/* ENDLESS-MEMORIES.NET - STYLESHEET
================================================
Table of Contents:
1. CSS Variables & Root
2. Reset & Base Styles
3. Typography Scale
4. Color Utility Classes
5. Spacing Utility Classes
6. Text Alignment & Display Utilities
7. Layout & Container
8. Navigation
9. Header & Banner
10. Sidebar & Login
11. Content Areas
12. Tables
13. Forms & Inputs
14. Button Boxes
15. Cards & Special Containers
16. Tooltips
17. Slideshow & Lightbox
18. Accordion
19. Footer
20. Responsive / Mobile
================================================ */
/* ================================================
1. CSS VARIABLES & ROOT
================================================ */
:root {
/* ----- SITE COLORS ------ */
--primary-color: #36393e;
--secondary-color: #2c2f33;
--accent-color: #7289da;
--text-color: #fff;
--title-color: #fff;
--link-color: #5a6fa8;
--hover-color: #7289da;
--light-text: #FFFFFF;
--title-font: #e8d5a3;
--transparent-window: #ffffffd7;
--dropdown-background: #2c2f33ec;
--dropdown-background-hover: #7289da;
--borders: #5a6fa8;
/* ----- SEMANTIC COLORS ------ */
--color-gold: #daa520;
--color-danger: #dc3545;
--color-danger-dark: #721c24;
--color-success: #28a745;
--color-success-light: #90ee90;
--color-warning: #fd7e14;
--color-info: #17a2b8;
--color-muted: #808080;
--color-special: #600ff7;
--color-purple: #b57edc;
--color-yellow: #ffff00;
--color-orange: #ffa500;
--color-pink: #fa6f9d;
--color-cyan: #8be9fd;
/* ----- GAME-SPECIFIC COLORS ------ */
--color-boss: #dc3545;
--color-minion: #b57edc;
--color-passive: #808080;
--color-aggressive: #fd7e14;
--color-pet: #ffff00;
--color-hp: #64dc64;
--color-damage: #f44f4f;
--color-dot: #ff9632;
--color-passive-buff: #ffff00;
--color-element: #a097f6;
--color-exp: #ffff00;
/* ----- GRADIENTS ------ */
--header-gradient: linear-gradient(90deg, #2a3854 0%, #3d5278 50%, #2a3854 100%);
--exp-gradient: linear-gradient(90deg, #53542a 0%, #786b3d 50%, #544f2a 100%);
--dark-gradient: linear-gradient(180deg, #272a31 0%, #21242a 50%, #1c1f24 100%);
--event-gradient: linear-gradient(90deg, #2d542a 0%, #3d7845 50%, #2a542a 100%);
/* ----- LOGIN BOX ------ */
--login-box-bg: transparent;
--input-border-color: #7289daac;
--input-focus-color: #7289da;
--button-bg-color: transparent;
--button-hover-color: #7289da;
--input-border-radius: 0px;
/* ----- ICONS ----- */
--icon-color: #7289da;
--icon-link: #7289daac;
--icon-link-hover: #7289da;
/* ----- SHADOWS ------ */
--shadow-color: #03030399;
--shadow-color-2: #0000001b;
/* ----- FONTS ------ */
--font: Arial, sans-serif;
--font-mono: monospace;
/* ----- TYPOGRAPHY SCALE ------ */
--text-2xs: 0.625rem; /* 10px */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.8125rem; /* 13px */
--text-base: 0.875rem; /* 14px */
--text-md: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.375rem; /* 22px */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 1.75rem; /* 28px */
/* ----- SPACING SCALE ------ */
--space-0: 0;
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-7: 1.75rem; /* 28px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
/* ----- BORDER RADIUS ------ */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 10px;
--radius-xl: 20px;
--radius-full: 9999px;
}
/* ================================================
2. RESET & BASE STYLES
================================================ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #1e2124;
background-image: url("../images/grass_bg_2.webp");
font-family: var(--font);
font-size: var(--text-md);
color: var(--text-color);
line-height: 1.5;
position: relative;
}
body::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: -30px;
background: linear-gradient(180deg,
#1e21241d 0%,
#1e212425 20%,
#1e212446 40%,
#1e21246b 60%,
#1e21248f 70%
);
pointer-events: none;
z-index: -1;
}
a {
text-decoration: none;
color: var(--link-color);
font-size: var(--text-md);
transition: color 0.2s ease;
}
a:hover {
color: var(--hover-color);
}
img {
max-width: 100%;
height: auto;
}
/* ================================================
3. TYPOGRAPHY SCALE
================================================ */
.text-2xs { font-size: var(--text-2xs); }
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md { font-size: var(--text-md); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
/* Font Weights */
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
/* Font Styles */
.font-italic { font-style: italic; }
.font-mono { font-family: var(--font-mono); }
/* Line Heights */
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.75; }
/* ================================================
4. COLOR UTILITY CLASSES
================================================ */
/* Text Colors */
.text-white { color: var(--light-text); }
.text-muted { color: var(--color-muted); }
.text-gold { color: var(--color-gold); }
.text-danger { color: var(--color-danger); }
.text-success { color: var(--color-success); }
.text-success-light { color: var(--color-success-light); }
.text-warning { color: var(--color-warning); }
.text-info { color: var(--color-info); }
.text-special { color: var(--color-special); }
.text-purple { color: var(--color-purple); }
.text-yellow { color: var(--color-yellow); }
.text-orange { color: var(--color-orange); }
.text-pink { color: var(--color-pink); }
.text-cyan { color: var(--color-cyan); }
.text-accent { color: var(--accent-color); }
.text-link { color: var(--link-color); }
/* Game-Specific Text Colors */
.text-boss { color: var(--color-boss); }
.text-minion { color: var(--color-minion); }
.text-passive { color: var(--color-passive); }
.text-aggressive { color: var(--color-aggressive); }
.text-pet { color: var(--color-pet); }
.text-hp { color: var(--color-hp); }
.text-damage { color: var(--color-damage); }
.text-dot { color: var(--color-dot); }
.text-passive-buff { color: var(--color-passive-buff); }
.text-element { color: var(--color-element); }
.text-exp { color: var(--color-exp); }
/* Background Colors */
.bg-primary { background-color: var(--primary-color); }
.bg-secondary { background-color: var(--secondary-color); }
.bg-accent { background-color: var(--accent-color); }
.bg-transparent { background-color: transparent; }
.bg-success { background-color: #078424a4; }
.bg-danger { background-color: #4b0208; }
/* ================================================
5. SPACING UTILITY CLASSES
================================================ */
/* Margin */
.m-0 { margin: var(--space-0); }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-5 { margin: var(--space-5); }
.m-6 { margin: var(--space-6); }
.m-8 { margin: var(--space-8); }
.m-auto { margin: auto; }
/* Margin Top */
.mt-0 { margin-top: var(--space-0); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
/* Margin Bottom */
.mb-0 { margin-bottom: var(--space-0); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }
/* Margin Left */
.ml-0 { margin-left: var(--space-0); }
.ml-1 { margin-left: var(--space-1); }
.ml-2 { margin-left: var(--space-2); }
.ml-3 { margin-left: var(--space-3); }
.ml-4 { margin-left: var(--space-4); }
.ml-5 { margin-left: var(--space-5); }
.ml-auto { margin-left: auto; }
/* Margin Right */
.mr-0 { margin-right: var(--space-0); }
.mr-1 { margin-right: var(--space-1); }
.mr-2 { margin-right: var(--space-2); }
.mr-3 { margin-right: var(--space-3); }
.mr-4 { margin-right: var(--space-4); }
.mr-5 { margin-right: var(--space-5); }
.mr-auto { margin-right: auto; }
/* Margin X (horizontal) */
.mx-0 { margin-left: var(--space-0); margin-right: var(--space-0); }
.mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); }
.mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); }
.mx-3 { margin-left: var(--space-3); margin-right: var(--space-3); }
.mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); }
.mx-auto { margin-left: auto; margin-right: auto; }
/* Margin Y (vertical) */
.my-0 { margin-top: var(--space-0); margin-bottom: var(--space-0); }
.my-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); }
.my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }
.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
/* Padding */
.p-0 { padding: var(--space-0); }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }
/* Padding Top */
.pt-0 { padding-top: var(--space-0); }
.pt-1 { padding-top: var(--space-1); }
.pt-2 { padding-top: var(--space-2); }
.pt-3 { padding-top: var(--space-3); }
.pt-4 { padding-top: var(--space-4); }
.pt-5 { padding-top: var(--space-5); }
.pt-6 { padding-top: var(--space-6); }
.pt-8 { padding-top: var(--space-8); }
/* Padding Bottom */
.pb-0 { padding-bottom: var(--space-0); }
.pb-1 { padding-bottom: var(--space-1); }
.pb-2 { padding-bottom: var(--space-2); }
.pb-3 { padding-bottom: var(--space-3); }
.pb-4 { padding-bottom: var(--space-4); }
.pb-5 { padding-bottom: var(--space-5); }
.pb-6 { padding-bottom: var(--space-6); }
/* Padding Left */
.pl-0 { padding-left: var(--space-0); }
.pl-1 { padding-left: var(--space-1); }
.pl-2 { padding-left: var(--space-2); }
.pl-3 { padding-left: var(--space-3); }
.pl-4 { padding-left: var(--space-4); }
.pl-5 { padding-left: var(--space-5); }
/* Padding Right */
.pr-0 { padding-right: var(--space-0); }
.pr-1 { padding-right: var(--space-1); }
.pr-2 { padding-right: var(--space-2); }
.pr-3 { padding-right: var(--space-3); }
.pr-4 { padding-right: var(--space-4); }
.pr-5 { padding-right: var(--space-5); }
/* Padding X (horizontal) */
.px-0 { padding-left: var(--space-0); padding-right: var(--space-0); }
.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
/* Padding Y (vertical) */
.py-0 { padding-top: var(--space-0); padding-bottom: var(--space-0); }
.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
/* Gap (for flex/grid) */
.gap-0 { gap: var(--space-0); }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
/* Legacy Spacer Class */
.spacer {
margin-bottom: var(--space-5);
}
.divider {
max-width: 100%;
margin-top: var(--space-8);
margin-bottom: var(--space-8);
border: solid 1px var(--primary-color);
}
/* ================================================
6. TEXT ALIGNMENT & DISPLAY UTILITIES
================================================ */
/* Text Alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
/* Vertical Alignment */
.align-top { vertical-align: top; }
.align-middle { vertical-align: middle; }
.align-bottom { vertical-align: bottom; }
/* Display */
.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-grid { display: grid; }
/* Flexbox */
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-1 { flex: 1; }
.flex-grow-0 { flex-grow: 0; }
.flex-grow-1 { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
/* Justify Content */
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between;}
.justify-around { justify-content: space-around; }
/* Align Items */
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
/* Width & Height */
.w-full { width: 100%; }
.w-auto { width: auto; }
.w-50 { width: 50%; }
.w-75 { width: 75%; }
.w-90 { width: 90%; }
.max-w-full { max-width: 100%; }
.min-w-0 { min-width: 0; }
.h-full { height: 100%; }
.h-auto { height: auto; }
.min-h-0 { min-height: 0; }
/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
/* Cursor */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
/* Visibility */
.visible { visibility: visible; }
.invisible { visibility: hidden; }
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
/* ================================================
7. LAYOUT & CONTAINER
================================================ */
#container {
background-color: var(--primary-color);
background: #30353f;
width: 100%;
max-width: 1200px;
margin: 20px auto;
position: relative;
border: 2px solid var(--borders);
border-radius: 4px;
box-shadow:
0 0 10px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.05),
inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}
#container::before,
#container::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
border: 2px solid #b2b2b2;
}
#container::before {
top: -2px;
left: -2px;
border-right: none;
border-bottom: none;
}
#container::after {
top: -2px;
right: -2px;
border-left: none;
border-bottom: none;
}
#container .corner-bottom-left,
#container .corner-bottom-right {
position: absolute;
width: 20px;
height: 20px;
border: 2px solid #b2b2b2;
}
#container .corner-bottom-left {
bottom: -2px;
left: -2px;
border-right: none;
border-top: none;
}
#container .corner-bottom-right {
bottom: -2px;
right: -2px;
border-left: none;
border-top: none;
}
.page-content {
display: flex;
gap: var(--space-5);
padding: var(--space-8) 0;
max-width: 100%;
margin: 0 auto;
}
.main-content {
padding: 1em;
flex: 1;
min-width: 0;
}
.content-box {
margin-bottom: var(--space-12);
margin-right: 1em;
box-sizing: border-box;
}
.content-box table {
width: 100%;
max-width: 100%;
}
.table-scroll {
overflow-x: auto;
width: 100%;
}
/* ================================================
8. NAVIGATION
================================================ */
.main-nav {
padding: var(--space-4) var(--space-8);
position: relative;
}
.nav-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: var(--space-6);
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.nav-list li {
position: relative;
}
.nav-list a {
color: var(--text-color);
text-decoration: none;
font-family: var(--font);
font-size: var(--text-base);
font-weight: bold;
padding: var(--space-2) var(--space-4);
display: block;
white-space: nowrap;
}
.nav-list a:hover {
color: var(--hover-color);
}
/* Dropdown Styles */
.dropdown {
position: absolute;
top: 100%;
left: 0;
background: var(--dropdown-background);
min-width: 150px;
visibility: hidden;
opacity: 0;
transform: translateY(-10px);
transition: all 0.3s ease;
border: 2px solid var(--primary-color);
z-index: 1000;
box-shadow: 0 2px 5px var(--shadow-color-2);
list-style: none;
}
.has-dropdown:hover .dropdown {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
.dropdown li {
width: 100%;
}
.dropdown a {
padding: var(--space-3) var(--space-4);
white-space: nowrap;
}
.dropdown a:hover {
background: var(--dropdown-background-hover);
color: var(--light-text);
}
/* Hamburger Menu */
.hamburger {
display: none;
background: none;
border: none;
cursor: pointer;
padding: var(--space-2);
z-index: 1001;
}
.hamburger-line {
display: block;
width: 25px;
height: 3px;
background-color: var(--text-color);
margin: 5px 0;
transition: all 0.3s ease;
}
/* ================================================
9. HEADER & BANNER
================================================ */
#page_header {
display: flex;
height: 250px;
overflow: hidden;
background-image: url("../images/header/banner.webp");
background-size: cover;
width: 100%;
left: 0;
padding: 0;
align-items: flex-end;
justify-content: space-between;
}
.online_players {
color: var(--transparent-window);
font-family: var(--font);
font-style: italic;
font-weight: bold;
margin: 0 0 20px 50px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
}
.online_players span {
font-size: var(--text-xl);
}
.online_players a {
color: var(--transparent-window);
text-decoration: underline;
font-size: var(--text-sm);
}
.online_players a:hover {
color: var(--light-text);
text-decoration: underline;
}
.social_links {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--space-3);
margin: 0 50px 20px 0;
}
.social_links a {
display: inline-block;
opacity: 0.8;
transition: opacity 0.2s;
}
.social_links a:hover {
opacity: 1;
}
.social_links img {
width: 32px;
height: 32px;
}
/* Notifications & Messages */
.notification {
background: var(--header-gradient);
border-top: 1px solid #5a6fa8;
border-bottom: 1px solid #5a6fa8;
font-size: var(--text-md);
color: rgb(225, 223, 252);
text-align: center;
padding: 12px;
}
.exp-countdown {
background: var(--exp-gradient);
border-top: 1px solid #a8935a;
border-bottom: 1px solid #a8935a;
font-size: var(--text-md);
color: rgb(225, 223, 252);
text-align: center;
padding: 12px;
}
.event {
background: var(--event-gradient);
border-top: 1px solid #5aa85f;
border-bottom: 1px solid #5aa866;
color: rgb(225, 223, 252);
text-align: center;
padding: 12px;
}
.exp-active {
background: var(--exp-gradient);
border-top: 1px solid #a8935a;
border-bottom: 1px solid #a8935a;
font-size: var(--text-md);
color: rgb(225, 223, 252);
text-align: center;
padding: 12px;
}
.message {
font-family: 'Cinzel', serif;
font-size: 14px;
font-weight: 600;
color: var(--title-font);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
letter-spacing: 1px;
text-align: center;
}
#weekend-countdown {
font-size: 22px;
}
/* Bonus Icons (Header) */
.bonus-icon {
width: 40px;
height: 32px;
}
/* ================================================
10. SIDEBAR & LOGIN
================================================ */
.sidebar {
display: flex;
flex-direction: column;
gap: 1em;
padding: 1em;
flex: 0 0 222px;
min-width: 0;
}
.sidebar-content {
display: flex;
flex-direction: column;
gap: 1em;
}
.sidebar img {
max-width: 100%;
height: auto;
display: block;
}
.login-box {
background: var(--dark-gradient);
border: 2px solid var(--borders);
border-radius: 4px;
position: relative;
overflow: hidden;
transition: transform 0.2s, box-shadow 0.2s;
width: 100%;
padding: var(--space-8) var(--space-3);
}
.login-box::before,
.login-box::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
border: 2px solid #b2b2b2;
}
.login-box::before {
top: -2px;
left: -2px;
border-right: none;
border-bottom: none;
}
.login-box::after {
top: -2px;
right: -2px;
border-left: none;
border-bottom: none;
}
.login-box .corner-bottom-left,
.login-box .corner-bottom-right {
position: absolute;
width: 20px;
height: 20px;
border: 2px solid #b2b2b2;
}
.login-box .corner-bottom-left {
bottom: -2px;
left: -2px;
border-right: none;
border-top: none;
}
.login-box .corner-bottom-right {
bottom: -2px;
right: -2px;
border-left: none;
border-top: none;
}
.login-box h3 {
text-align: center;
}
.login-box form {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.login-box label {
color: var(--text-color);
font-size: 0.9rem;
margin-bottom: -5px;
}
.login-box input[type="text"],
.login-box input[type="password"] {
background: transparent;
border: 2px solid var(--input-border-color);
border-radius: var(--input-border-radius);
padding: var(--space-2) var(--space-3);
color: var(--text-color);
outline: none;
transition: border-color 0.3s ease;
}
.login-box input[type="text"]:focus,
.login-box input[type="password"]:focus {
border-color: var(--input-focus-color);
}
.login-box input[type="submit"] {
background-color: var(--button-bg-color);
color: var(--light-text);
border: none;
border-radius: var(--input-border-radius);
padding: var(--space-3) var(--space-5);
cursor: pointer;
font-weight: bold;
transition: background-color 0.3s ease;
}
.login-box input[type="submit"]:hover {
background-color: var(--button-hover-color);
}
/* Sidebar Link Boxes */
.link-box {
background: var(--dark-gradient);
border: 2px solid var(--borders);
border-radius: 4px;
position: relative;
box-shadow:
0 0 10px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.05),
inset 0 -1px 0 rgba(0, 0, 0, 0.05);
overflow: hidden;
transition: transform 0.2s, box-shadow 0.2s;
background-position: bottom left;
min-height: 200px;
width: 100%;
padding: var(--space-8) var(--space-3);
text-align: center;
}
.link-box h3,
.link-box h4 {
text-align: center;
}
.style-box {
background: var(--dark-gradient);
border: 2px solid var(--borders);
border-radius: 4px;
position: relative;
overflow: hidden;
transition: transform 0.2s, box-shadow 0.2s;
min-height: 75px;
width: 100%;
padding: var(--space-8) var(--space-3);
text-align: center;
}
.style-box h3,
.style-box h4,
.style-box h5,
.style-box h6 {
text-align: center;
color: var(--text-color);
padding-bottom: 3px;
}
.style-box .link-gap {
margin-bottom: 7px;
}
.style-box .profile-icon {
display: block;
margin: 0 auto var(--space-2) auto;
max-width: 48px;
margin-bottom: -20px;
font-size: 2.5em;
}
/* Sidebar Character Boxes - For when class is on same element as link-box */
.link-box.donate-box::after,
.link-box.download-box::after,
.link-box.discord-box::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: contain;
background-position: bottom left;
pointer-events: none;
transition: background-image 0.7s ease;
z-index: 0;
}
.link-box.donate-box::after {
background-image: url("../images/char_01.png");
}
.link-box.download-box::after {
background-image: url("../images/char_02.png");
}
.link-box.discord-box::after {
background-image: url("../images/char_03.png");
}
.link-box.donate-box:hover::after {
background-image: url("../images/char_04.png");
}
.link-box.download-box:hover::after {
background-image: url("../images/char_05.png");
}
.link-box.discord-box:hover::after {
background-image: url("../images/char_06.png");
}
/* Sidebar Character Boxes - For nested div case */
.link-box > .donate-box,
.link-box > .download-box,
.link-box > .discord-box {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: contain;
background-position: bottom left;
pointer-events: none;
transition: background-image 0.7s ease;
z-index: 0;
padding: var(--space-8) var(--space-3);
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.link-box > .donate-box {
background-image: url("../images/char_01.png");
}
.link-box > .download-box {
background-image: url("../images/char_02.png");
}
.link-box > .discord-box {
background-image: url("../images/char_03.png");
}
/* Hover on parent link-box affects nested character box */
.link-box:hover > .donate-box {
background-image: url("../images/char_04.png");
}
.link-box:hover > .download-box {
background-image: url("../images/char_05.png");
}
.link-box:hover > .discord-box {
background-image: url("../images/char_06.png");
}
/* Ensure content is above the character image */
.link-box h3,
.link-box h4,
.link-box > .download-box h3,
.link-box > .download-box h4,
.link-box > .discord-box h3,
.link-box > .discord-box h4,
.link-box > .donate-box h3,
.link-box > .donate-box h4 {
position: relative;
z-index: 1;
}
.server-time-text {
color: var(--hover-color) !important;
margin-bottom: -10px;
}
/* ================================================
11. CONTENT AREAS
================================================ */
.content-header {
background: linear-gradient(90deg, #2a3854 0%, #3d5278 50%, #2a3854 100%);
box-shadow:
0 0 10px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.05),
inset 0 -1px 0 rgba(0, 0, 0, 0.05);
margin-bottom: 0;
border: 2px solid var(--borders);
display: flex;
align-items: center;
gap: var(--space-3);
width: 100%;
min-height: 33px;
justify-content: center;
padding: 12px;
}
.content-header img {
margin-left: var(--space-3);
}
.content-header i[class^="fi-br-"],
.content-header span[class^="fi-br-"] {
color: var(--icon-color);
font-size: 1.5em;
margin-left: var(--space-3);
margin-top: 10px;
}
.content-header .title {
font-weight: bold;
}
.cinzel {
font-family: 'Cinzel', serif;
}
.title {
font-family: 'Cinzel', serif;
font-size: 18px;
font-weight: 600;
color: var(--title-font);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
letter-spacing: 1px;
}
h3 {
color: var(--text-color);
}
article {
color: var(--text-color);
}
.content-body {
width: 100%;
text-align: left;
line-height: 1.5;
padding-left: var(--space-3);
color: var(--text-color);
}
/* Character Container - Used for info layouts */
.character-container {
color: var(--text-color);
display: flex;
flex-wrap: wrap;
gap: var(--space-5);
font-family: var(--font);
font-size: var(--text-lg);
line-height: 1.5;
}
.character-column {
flex: 1;
min-width: 300px;
padding: 0;
font-weight: 400;
}
.character-column.left {
text-align: left;
padding-left: var(--space-12);
}
.character-column.right {
text-align: left;
}
.character-container .character-column b {
font-weight: bold;
}
.character-container .character-column span {
font-weight: normal;
}
/* News Container */
.news-container {
max-width: 100%;
margin-top: var(--space-3);
padding: var(--space-2);
border: 1px solid var(--secondary-color);
box-shadow: 2px 5px 3px var(--shadow-color);
border-radius: var(--radius-xl);
background-color: var(--secondary-color);
}
.news-box {
max-height: 70vh;
overflow-y: scroll;
padding: 0;
background-color: var(--secondary-color);
border: 1px solid var(--secondary-color);
border-radius: var(--radius-sm);
}
.news-entry {
margin-bottom: var(--space-5);
padding: var(--space-3);
border-bottom: 1px solid var(--secondary-color);
}
/* Crash Logs */
.crash-log-container {
border: 1px solid var(--input-border-color);
border-radius: var(--radius-md);
margin-bottom: var(--space-5);
background-color: var(--secondary-color);
overflow: hidden;
}
.crash-log-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-3) var(--space-4);
background-color: var(--primary-color);
border-bottom: 1px solid var(--input-border-color);
}
.crash-filename {
font-weight: bold;
font-family: var(--font-mono);
color: var(--link-color);
}
.crash-filetime {
font-size: var(--text-sm);
color: #f8f8f2;
}
.crash-log-body {
padding: var(--space-4);
max-height: 400px;
overflow-y: auto;
background-color: #1a1a2e;
font-family: var(--font-mono);
font-size: 0.9em;
line-height: 1.5;
}
.crash-header {
color: #f8f8f2;
font-weight: bold;
text-align: center;
padding: var(--space-2) 0;
}
.crash-timestamp { color: var(--color-cyan); }
.crash-type { color: var(--color-warning); font-weight: bold; }
.crash-signal { color: var(--color-danger); font-weight: bold; font-size: 1.1em; padding: var(--space-2) 0; }
.crash-stack { padding-left: var(--space-4); }
.crash-stack.stack-known { color: var(--color-success-light); }
.crash-stack.stack-unknown { color: #6272a4; }
.crash-line { color: #f8f8f2; }
.crash-spacer { height: var(--space-3); }
/* Scrollbar styling for crash logs */
.crash-log-body::-webkit-scrollbar { width: 8px; }
.crash-log-body::-webkit-scrollbar-track { background: #1a1a2e; }
.crash-log-body::-webkit-scrollbar-thumb { background-color: #6272a4; border-radius: var(--radius-sm); }
.crash-log-body::-webkit-scrollbar-thumb:hover { background-color: var(--color-cyan); }
/* ================================================
12. TABLES
================================================ */
/* Base Table Styles */
table {
width: 100%;
border-collapse: collapse;
margin: var(--space-4) 0;
font-size: 0.9rem;
overflow-x: auto;
border-radius: var(--radius-md);
table-layout: auto;
text-align: center;
background: var(--dark-gradient);
border: 2px solid var(--borders);
box-shadow:
0 0 10px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.05),
inset 0 -1px 0 rgba(0, 0, 0, 0.05);
position: relative;
}
thead {
background: linear-gradient(90deg, #2a3854 0%, #3d5278 50%, #2a3854 100%);
border-bottom: 2px solid #5a6fa8;
}
th {
padding: var(--space-4);
font-family: var(--font);
text-align: center;
font-weight: 600;
color: var(--text-color);
white-space: nowrap;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
td {
padding: var(--space-4);
border-bottom: 1px solid rgba(90, 111, 168, 0.3);
border-right: 1px solid rgba(90, 111, 168, 0.3);
font-family: var(--font);
text-align: center;
font-weight: 600;
color: var(--text-color);
}
td:last-child {
border-right: none;
}
tbody tr:hover {
background: linear-gradient(90deg, rgba(114, 137, 218, 0.1) 0%, transparent 100%);
}
/* Table Modifiers */
.table-borderless,
.table-borderless thead,
.table-borderless th,
.table-borderless td {
border: none;
}
.table-borderless tbody tr:hover {
background-color: transparent;
}
/* Disable hover effect on specific rows */
tr.nohover:hover,
tbody.nohover tr:hover,
thead.nohover tr:hover {
background-color: transparent !important;
}
/* Table Cell Alignment Classes */
td.td-left,
th.th-left { text-align: left; }
td.td-right,
th.th-right { text-align: right; }
td.td-center,
th.th-center { text-align: center; }
td.td-top { vertical-align: top; }
td.td-bottom { vertical-align: bottom; }
td.td-middle { vertical-align: middle; }
/* Borderless Cell Modifier */
td.td-borderless,
th.th-borderless {
border: none;
}
/* Sortable Table Columns */
th.sortable {
cursor: pointer;
user-select: none;
}
th.sortable:hover {
background: var(--accent-color);
}
th.sortable .sort-icon {
margin-left: var(--space-2);
opacity: 0.5;
}
th.sortable.active .sort-icon {
opacity: 1;
}
/* Map Search Controls */
.map-controls {
margin-bottom: var(--space-5);
display: flex;
gap: var(--space-4);
align-items: center;
flex-wrap: wrap;
}
.map-search-input {
padding: var(--space-3) var(--space-4);
font-size: var(--text-base);
border: 1px solid var(--input-border-color);
border-radius: var(--input-border-radius);
background: var(--secondary-color);
color: var(--text-color);
width: 300px;
max-width: 100%;
}
.map-search-input:focus {
outline: none;
border-color: var(--input-focus-color);
}
.no-results {
text-align: center;
color: var(--text-color);
padding: var(--space-5);
font-style: italic;
}
.map-controls {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 20px;
}
.map-filters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 16px;
}
.filter-label {
font-weight: 600;
color: #ccc;
}
.filter-checkbox {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
user-select: none;
color: #aaa;
font-size: 14px;
}
.filter-checkbox:hover {
color: #fff;
}
.filter-checkbox input[type="checkbox"] {
cursor: pointer;
accent-color: #5a9fd4;
}
.map-count {
font-size: 14px;
color: #888;
}
.map-count span {
font-weight: 600;
color: #5a9fd4;
}
.level-req-badge {
display: inline-block;
background: linear-gradient(135deg, #4a6fa5 0%, #3d5a80 100%);
color: #fff;
padding: 2px 8px;
border-radius: 4px;
font-size: 13px;
font-weight: 600;
}
/* Custom Table: .edit-table-form */
.edit-table-form {
display: block;
width: 100%;
border-collapse: collapse;
white-space: nowrap;
font-size: var(--text-sm);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
table-layout: auto;
text-align: center;
background: var(--dark-gradient);
box-shadow:
0 0 10px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.05),
inset 0 -1px 0 rgba(0, 0, 0, 0.05);
position: relative;
}
.edit-table-form tr:hover {
background: linear-gradient(90deg, rgba(114, 137, 218, 0.1) 0%, transparent 100%);
}
.edit-table-form thead {
background: linear-gradient(90deg, #2a3854 0%, #3d5278 50%, #2a3854 100%);
border-bottom: 2px solid #5a6fa8;
}
.edit-table-form th,
.edit-table-form td {
padding: var(--space-4);
font-family: var(--font);
text-align: center;
font-weight: 600;
color: var(--text-color);
border-bottom: 1px solid rgba(90, 111, 168, 0.3);
border-right: 1px solid rgba(90, 111, 168, 0.3);
}
.edit-table-form td:last-child {
border-right: none;
}
.edit-table-form th {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
/* Custom Table: .table-form (two-column layout tables) */
.table-form tr:hover {
background: linear-gradient(90deg, rgba(114, 137, 218, 0.1) 0%, transparent 100%);
}
.table-form td,
.table-form th {
text-align: left;
border: 0;
width: 50%;
}
.table-form input[type="search"],
.table-form input[type="input"] {
background: transparent;
width: 100%;
border: 2px solid var(--input-border-color);
border-radius: var(--input-border-radius);
padding: var(--space-2) var(--space-3);
color: var(--text-color);
outline: none;
transition: border-color 0.3s ease;
}
/* Link Tree Table */
.link-tree a {
width: 100% !important;
font-size: 1.3rem !important;
text-align: center !important;
line-height: 3;
}
/* Player Icon in Tables */
.player_icon {
max-width: 18px;
margin-right: var(--space-2);
margin-left: -30px;
margin-bottom: -3px;
}
/* ================================================
13. FORMS & INPUTS
================================================ */
form {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
}
label {
color: #ccc;
font-weight: bold;
}
input[type="text"],
input[type="number"],
input[type="password"],
select {
background-color: #2a2b30;
color: #eee;
border: 1px solid var(--hover-color);
border-radius: var(--radius-md);
padding: var(--space-3);
font-size: var(--text-base);
width: 100%;
transition: border 0.2s ease, box-shadow 0.2s ease;
}
input:focus,
select:focus {
border-color: #5d91e3;
box-shadow: 0 0 6px #5d91e3;
outline: none;
}
select {
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 12px;
padding-right: 30px;
}
button {
background-color: transparent;
color: #e1e1e1;
padding: var(--space-3);
border: 2px solid var(--borders);
cursor: pointer;
font-weight: bold;
font-size: var(--text-base);
transition: background 0.3s ease;
}
button:hover {
background-color: #4677c2;
}
.edit-character {
font-family: 'Cinzel', serif;
font-size: 10px;
font-weight: 600;
padding: 2px 8px;
border-radius: 2px;
margin-bottom: 4px;
letter-spacing: 1px;
}
.edit-character:hover {
background: transparent;
color: white;
border-color: var(--icon-link-hover);
transition: 0.7s;
}
input[type="submit"] {
background-color: var(--button-bg-color);
color: var(--light-text);
border: 1px solid var(--input-border-color) !important;
border-radius: var(--input-border-radius);
padding: var(--space-3) var(--space-5);
cursor: pointer;
font-weight: bold;
transition: background-color 0.3s ease;
}
input[type="submit"]:hover {
background-color: var(--button-hover-color);
}
/* Toggle Switch */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: 0.4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: 0.4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
/* Form Box Container */
.form-box {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-5);
background: var(--secondary-color);
border-radius: var(--radius-lg);
box-shadow: 0 0 10px var(--shadow-color);
width: 100%;
max-width: 400px;
margin: 0 auto;
}
.form-box label {
color: #ccc;
font-weight: bold;
}
.form-box input[type="text"],
.form-box input[type="number"],
.form-box select {
background-color: #2a2b30;
color: #eee;
border: 1px solid var(--hover-color);
border-radius: var(--radius-md);
padding: var(--space-3);
font-size: var(--text-base);
width: 100%;
transition: border 0.2s ease, box-shadow 0.2s ease;
}
.form-box input:focus,
.form-box select:focus {
border-color: #5d91e3;
box-shadow: 0 0 6px #5d91e3;
outline: none;
}
.form-box select {
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 12px;
padding-right: 30px;
}
.form-box button {
background-color: #5d91e3;
color: white;
padding: var(--space-3);
border: none;
border-radius: var(--radius-md);
cursor: pointer;
font-weight: bold;
font-size: var(--text-base);
transition: background 0.3s ease;
}
.form-box button:hover {
background-color: #4677c2;
}
/* Small Button */
.small-button {
padding: var(--space-1);
border: 1px solid var(--input-border-color);
border-radius: var(--radius-lg);
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
box-sizing: border-box;
cursor: pointer;
text-decoration: none;
color: var(--text-color);
}
textarea {
background-color: #2a2b30;
color: #eee;
border: 1px solid var(--hover-color);
border-radius: var(--radius-md);
padding: var(--space-3);
font-size: var(--text-base);
width: 100%;
max-width: 100%;
transition: border 0.2s ease, box-shadow 0.2s ease;
resize: vertical;
min-height: 120px;
display: block;
}
textarea:focus {
border-color: #5d91e3;
box-shadow: 0 0 6px #5d91e3;
outline: none;
}
.settings-stack {
display: flex;
flex-direction: column;
gap: 16px;
}
.settings-toggle-item {
justify-content: space-between;
align-items: center;
gap: 16px;
}
.textarea-help {
margin-bottom: 8px;
display: block;
}
/* ================================================
14. BUTTON BOXES (Consolidated)
================================================ */
.button-box-container {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
justify-content: flex-start;
padding-top: var(--space-8);
margin-bottom: 2em;
width: 100%;
}
.button-box {
background: var(--dark-gradient);
width: calc((100% - 48px) / 4); /* 4 columns with gaps */
padding: var(--space-3);
min-height: 150px;
border: 2px solid var(--borders);
border-radius: 4px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
box-sizing: border-box;
box-shadow:
0 0 10px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.05),
inset 0 -1px 0 rgba(0, 0, 0, 0.05);
text-decoration: none;
color: var(--text-color);
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.button-box:hover {
transform: translateY(-4px);
transition: 0.3s;
box-shadow:
0 8px 40px rgba(114, 137, 218, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.05),
inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}
.button-box img {
max-height: 64px;
max-width: 150px;
object-fit: contain;
margin-bottom: var(--space-3);
}
.button-box h1,
.button-box h2,
.button-box h3 {
color: var(--text-color);
margin: var(--space-1) 0;
}
.button-box small {
font-size: var(--text-xs);
}
/* Button Box Size Modifiers */
.button-box.box-sm {
min-height: 100px;
padding: var(--space-2);
}
.button-box.box-lg {
min-height: 200px;
padding: var(--space-4);
}
/* Inventory-style Button Box (smaller gap) */
.button-box-container.inventory {
gap: var(--space-3);
}
.button-box-container.inventory .button-box {
width: calc((100% - 36px) / 4);
}
/* Add Item Box (dashed border style) */
.button-box.box-add {
border: 2px dashed #666;
opacity: 0.8;
}
.button-box.box-add:hover {
opacity: 1;
border-color: var(--hover-color);
}
/* Flag Icons */
.flag-icon {
width: 16px;
height: 12px;
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
/* ================================================
15. CARDS & SPECIAL CONTAINERS
================================================ */
/* Flag Icon */
.flag-icon {
width: 16px;
height: 12px;
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
/* Admin Icon */
.admin-icon {
max-height: 18px;
vertical-align: middle;
color: var(--color-gold);
font-size: 1em;
}
.admin-icon.sm {
max-height: 13px;
margin-bottom: -3px;
font-size: 0.85em;
}
/* Item/NPC Image Constraints */
.img-item {
max-height: 64px;
max-width: 150px;
object-fit: contain;
}
.img-npc {
max-height: 64px;
object-fit: contain;
}
.img-spell {
max-height: 48px;
object-fit: contain;
}
/* ================================================
16. TOOLTIPS
================================================ */
.tooltip {
position: relative;
cursor: pointer;
}
.tooltip::after {
content: attr(data-tooltip);
white-space: pre-line;
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: rgba(50, 50, 50, 0.9);
color: #fff;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
font-size: var(--text-sm);
line-height: 1.3;
display: none;
z-index: 999;
min-width: 180px;
min-height: 10px;
text-align: left;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.tooltip:hover::after {
display: block;
}
/* ================================================
17. SLIDESHOW & LIGHTBOX
================================================ */
.slideshow-container {
background: var(--dark-gradient);
position: relative;
width: 100%;
height: 500px;
padding: 10px;
border: 2px solid var(--borders);
box-shadow:
0 0 10px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.05),
inset 0 -1px 0 rgba(0, 0, 0, 0.05);
border-radius: 4px;
}
.slideshow-container::before,
.slideshow-container::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
border: 2px solid #b2b2b2;
}
.slideshow-container::before {
top: -2px;
left: -2px;
border-right: none;
border-bottom: none;
}
.slideshow-container::after {
top: -2px;
right: -2px;
border-left: none;
border-bottom: none;
}
.slideshow-container .corner-bottom-left,
.slideshow-container .corner-bottom-right {
position: absolute;
width: 20px;
height: 20px;
border: 2px solid #b2b2b2;
}
.slideshow-container .corner-bottom-left {
bottom: -2px;
left: -2px;
border-right: none;
border-top: none;
}
.slideshow-container .corner-bottom-right {
bottom: -2px;
right: -2px;
border-left: none;
border-top: none;
}
.image-container {
background: var(--dark-gradient);
position: relative;
width: 100%;
padding: 0px;
border: 2px solid var(--borders);
box-shadow:
0 0 10px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.05),
inset 0 -1px 0 rgba(0, 0, 0, 0.05);
border-radius: 4px;
}
.image-container::before,
.image-container::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
border: 2px solid #b2b2b2;
}
.image-container::before {
top: -2px;
left: -2px;
border-right: none;
border-bottom: none;
}
.image-container::after {
top: -2px;
right: -2px;
border-left: none;
border-bottom: none;
}
.image-container .corner-bottom-left,
.image-container .corner-bottom-right {
position: absolute;
width: 20px;
height: 20px;
border: 2px solid #b2b2b2;
}
.image-container .corner-bottom-left {
bottom: -2px;
left: -2px;
border-right: none;
border-top: none;
}
.image-container .corner-bottom-right {
bottom: -2px;
right: -2px;
border-left: none;
border-top: none;
}
.slideshow {
width: 100%;
height: 100%;
position: relative;
border: none;
}
.slideshow img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
border: none;
transition: opacity 0.7s ease-in-out;
}
.slideshow img.active {
opacity: 1;
}
/* Lightbox */
.lightbox {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
}
.lightbox-content {
display: block;
margin: auto;
max-width: 90%;
max-height: 90%;
}
.lightbox .close {
position: absolute;
top: 20px;
right: 30px;
color: white;
font-size: 30px;
font-weight: bold;
cursor: pointer;
}
/* ================================================
18. ACCORDION
================================================ */
.accordion {
border-radius: var(--radius-sm);
padding-right: var(--space-8);
margin-top: var(--space-8);
}
.accordion input[type="checkbox"] {
display: none;
}
.accordion-label {
display: block;
padding: var(--space-3);
color: white;
border: solid 1px var(--accent-color);
cursor: pointer;
font-weight: bold;
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
padding: 0 var(--space-3);
}
.accordion input[type="checkbox"]:checked ~ .accordion-content {
max-height: 100%;
padding: var(--space-3);
}
/* ================================================
19. FOOTER
================================================ */
.page-footer {
padding: var(--space-4);
text-align: center;
min-height: 38px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-color);
}
.copyright {
margin: 0;
font-size: var(--text-2xs);
line-height: 1.4;
}
.pagination {
margin-top: var(--space-3);
color: var(--link-color);
}
/* ================================================
ERROR LOGS
================================================ */
.log-container {
display: flex;
flex-direction: column;
gap: var(--space-5);
margin-top: var(--space-5);
}
.log-box {
border: 1px solid var(--input-border-color);
border-radius: var(--radius-md);
background-color: var(--secondary-color);
overflow: hidden;
}
.log-box-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-3) var(--space-4);
background-color: var(--primary-color);
border-bottom: 1px solid var(--input-border-color);
}
.log-box-title {
font-weight: bold;
font-family: var(--font-mono);
color: var(--title-color);
}
.log-box-content {
padding: var(--space-4);
max-height: 400px;
overflow-y: auto;
background-color: #1a1a2e;
font-family: var(--font-mono);
font-size: 0.9em;
line-height: 1.5;
}
/* Custom scrollbar for log boxes */
.log-box-content::-webkit-scrollbar {
width: 8px;
}
.log-box-content::-webkit-scrollbar-track {
background: #1a1a2e;
}
.log-box-content::-webkit-scrollbar-thumb {
background-color: #6272a4;
border-radius: var(--radius-sm);
}
.log-box-content::-webkit-scrollbar-thumb:hover {
background-color: var(--color-cyan);
}
/* Error Log Styles */
.error-header {
color: var(--color-cyan);
font-weight: bold;
text-align: center;
padding: var(--space-2) 0;
margin-bottom: var(--space-3);
border-bottom: 1px solid var(--input-border-color);
}
.error-line {
color: #f8f8f2;
padding: var(--space-1) 0;
word-break: break-word;
}
.error-line.error-critical {
color: var(--color-danger);
font-weight: bold;
background-color: rgba(255, 68, 68, 0.15);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-xs);
}
.error-line.error-crash-ref {
color: var(--color-warning);
font-style: italic;
}
.error-line.error-general {
color: var(--color-warning);
}
.error-line.error-load {
color: var(--color-orange);
}
.error-line.error-syntax {
color: #ff6b6b;
}
.error-line.error-validation {
color: var(--color-yellow);
}
.error-line.error-notfound {
color: var(--color-yellow);
}
.error-line.error-rest {
color: var(--color-cyan);
}
.error-line.error-stack {
color: #b9c4e4;
font-size: var(--text-xs);
padding-left: var(--space-4);
}
.error-line.error-category {
color: #b9c4e4;
font-size: var(--text-xs);
padding-left: var(--space-4);
}
.error-line.error-id {
color: #b9c4e4;
font-size: var(--text-xs);
padding-left: var(--space-4);
margin-bottom: var(--space-2);
}
.error-line.error-continuation {
color: #b9c4e4;
font-size: var(--text-xs);
padding-left: var(--space-4);
}
/* ================================================
20. RESPONSIVE / MOBILE
================================================ */
@media screen and (max-width: 1024px) {
.button-box-container {
gap: var(--space-3);
}
.button-box {
width: calc((100% - 24px) / 3); /* 3 columns on tablet */
}
.button-box-container.inventory .button-box {
width: calc((100% - 24px) / 3);
}
}
@media screen and (max-width: 884px) {
/* Layout adjustments */
#container {
width: 95% !important;
max-width: 100% !important;
margin: 5px auto !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow-x: hidden;
overflow-y: hidden;
}
/* Hide corner decorations in mobile view */
#container::before,
#container::after,
#container .corner-bottom-left,
#container .corner-bottom-right {
display: none !important;
}
/* Hide slideshow in mobile view */
.slideshow-container {
display: none !important;
}
.page-content {
flex-direction: column-reverse !important;
padding: var(--space-2) !important;
}
.main-content {
width: 100% !important;
align-items: stretch !important;
}
.sidebar {
width: 100% !important;
flex: 1 1 100% !important;
min-width: 0 !important;
flex-basis: auto !important;
padding: var(--space-2) !important;
margin: 0 auto !important;
box-sizing: border-box !important;
}
.login-form {
display: none !important;
}
.link-box {
width: 100% !important;
max-width: none !important;
box-sizing: border-box;
}
.download-box {
display: none !important;
}
#download {
display: none !important;
}
/* Button boxes - 2 columns on mobile */
.button-box-container {
padding-right: 0;
gap: var(--space-3);
}
.button-box {
width: calc((100% - 12px) / 2);
min-height: 120px;
}
.button-box-container.inventory .button-box {
width: calc((100% - 12px) / 2);
}
/* Hamburger menu behavior */
.hamburger {
display: block !important;
position: relative;
z-index: 1002;
}
.main-nav {
position: relative !important;
}
.nav-list {
display: none !important;
flex-direction: column !important;
align-items: stretch !important;
position: absolute !important;
top: 100% !important;
left: 0 !important;
width: 100% !important;
background: var(--dropdown-background) !important;
z-index: 1001 !important;
padding: 0 !important;
border-top: 2px solid var(--text-color) !important;
}
.nav-list.active {
display: flex !important;
}
.nav-list > li {
border-bottom: 1px solid var(--shadow-color-2);
width: 100%;
}
.nav-list a {
font-size: var(--text-md) !important;
padding: var(--space-3) var(--space-4) !important;
width: 100% !important;
}
/* Dropdowns on mobile */
.has-dropdown > .dropdown {
display: none !important;
position: relative !important;
background: var(--dropdown-background) !important;
width: 100% !important;
border: none !important;
padding: 0 !important;
visibility: visible !important;
opacity: 1 !important;
transform: none !important;
box-shadow: none !important;
}
.has-dropdown.active .dropdown {
display: block !important;
}
.dropdown a {
padding: var(--space-2) var(--space-4) !important;
font-size: var(--text-sm) !important;
}
.link-tree a {
width: 100% !important;
font-size: 1.3rem !important;
text-align: center !important;
}
/* Tables */
table,
.edit-table-form {
display: block;
width: 100% !important;
white-space: nowrap;
font-size: var(--text-sm);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
text-align: center;
}
table tr td:only-child,
.edit-table-form tr td:only-child {
display: block;
width: 100%;
box-sizing: border-box;
text-align: center;
}
table tr td:only-child a,
.edit-table-form tr td:only-child a {
display: block;
width: 100%;
text-align: center;
}
thead {
display: table-header-group;
width: 100%;
}
tbody {
display: table-row-group;
width: 100%;
}
tr:has(td:only-child),
tr:has(th:only-child) {
display: table-row;
}
td:only-child,
th:only-child {
width: 100%;
text-align: center;
display: table-cell;
}
td:only-child a {
display: block;
width: 100%;
text-align: center;
}
tr {
display: table-row;
width: 100%;
}
th,
td {
display: table-cell;
min-width: unset;
padding: var(--space-3);
text-align: center;
}
.player_icon {
max-width: 13px;
margin-right: var(--space-2);
margin-left: -10px;
margin-bottom: 0;
}
/* Prevent scroll bleed */
.content-body,
.content-box,
.main-content {
overflow-x: hidden !important;
}
.content-box {
padding-right: var(--space-2) !important;
}
.content-box article {
padding: var(--space-1) !important;
}
/* Character details layout */
.character-container {
flex-direction: column !important;
padding: var(--space-5);
}
.character-column {
min-width: 100% !important;
}
.character-column.left {
padding-left: 0;
}
.content-header {
width: 100% !important;
min-height: 33px !important;
box-sizing: border-box !important;
padding: var(--space-2) !important;
margin: var(--space-2) 0 var(--space-4) 0 !important;
gap: var(--space-2) !important;
display: flex !important;
align-items: center !important;
overflow: visible !important;
}
.content-header .title {
font-size: 0.95rem !important;
padding-left: var(--space-2) !important;
flex: 1 1 auto !important;
word-break: break-word;
}
.content-header img {
height: 20px;
width: auto;
margin-left: var(--space-2);
}
.online_players {
font-size: var(--text-sm) !important;
margin: 0 0 var(--space-3) var(--space-4) !important;
}
/* Header banner fix */
#page_header {
height: 150px !important;
background-size: cover !important;
background-position: center center !important;
}
.slideshow-container {
height: auto !important;
}
/* Typography adjustments for mobile */
.text-xl { font-size: var(--text-lg); }
.text-2xl { font-size: var(--text-xl); }
.text-3xl { font-size: var(--text-2xl); }
}
@media screen and (max-width: 480px) {
/* Single column on very small screens */
.button-box {
width: 100%;
}
.button-box-container.inventory .button-box {
width: 100%;
}
.content-box {
padding-right: var(--space-1) !important;
}
.character-container {
padding: var(--space-3);
}
}
v
/* ================================================
21. ACHIEVEMENTS
================================================ */
.achievement-icon {
width: 32px;
height: 32px;
object-fit: contain;
margin-right: var(--space-2);
}
.button-box.achievement-legendary,
.button-box.achievement-epic,
.button-box.achievement-rare,
.button-box.achievement-uncommon {
flex-direction: row;
justify-content: flex-start;
align-items: center;
min-height: auto;
padding: var(--space-3) var(--space-4);
width: calc((100% - 32px) / 3);
}
.button-box.achievement-legendary {
border-color: #daa520;
background: linear-gradient(135deg, rgba(218, 165, 32, 0.15) 0%, rgba(218, 165, 32, 0.05) 100%);
}
.button-box.achievement-epic {
border-color: #b57edc;
background: linear-gradient(135deg, rgba(181, 126, 220, 0.15) 0%, rgba(181, 126, 220, 0.05) 100%);
}
.button-box.achievement-rare {
border-color: #7289da;
background: linear-gradient(135deg, rgba(114, 137, 218, 0.15) 0%, rgba(114, 137, 218, 0.05) 100%);
}
.button-box.achievement-uncommon {
border-color: #28a745;
background: linear-gradient(135deg, rgba(40, 167, 69, 0.15) 0%, rgba(40, 167, 69, 0.05) 100%);
}
.button-box.achievement-legendary img,
.button-box.achievement-epic img,
.button-box.achievement-rare img,
.button-box.achievement-uncommon img {
margin-bottom: 0;
max-height: 32px;
max-width: 32px;
}
@media screen and (max-width: 1024px) {
.button-box.achievement-legendary,
.button-box.achievement-epic,
.button-box.achievement-rare,
.button-box.achievement-uncommon {
width: calc((100% - 16px) / 2);
}
}
@media screen and (max-width: 480px) {
.button-box.achievement-legendary,
.button-box.achievement-epic,
.button-box.achievement-rare,
.button-box.achievement-uncommon {
width: 100%;
}
}
/* ================================================
MOBILE RESPONSIVE ENHANCEMENTS - COLUMN STACKING
================================================ */
/* Info Panel, Stats Grids, Member Boxes, Badges - Stack on mobile (768px) */
@media screen and (max-width: 768px) {
/* Info Panel Responsive - Stack columns vertically */
.panel-content {
grid-template-columns: 1fr !important;
gap: var(--space-4);
}
.left-column,
.right-column {
width: 100% !important;
min-width: 0 !important;
}
.left-column {
padding-left: 0 !important;
}
.info-identity {
flex-direction: column;
text-align: center;
}
.info-emblem {
margin: 0 auto var(--space-3);
}
/* Stats Grids Responsive - Stack all grids to single column */
.stats-grid,
.stats-grid-2,
.stats-grid-3,
.stats-grid-4,
.stats-grid-5,
.stats-grid-6 {
grid-template-columns: 1fr !important;
gap: var(--space-3);
}
.stat-box {
padding: var(--space-3);
min-height: auto;
}
/* Member Box Container Responsive - Cards stack properly */
.member-box-container {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
gap: var(--space-3);
padding: var(--space-3) 0 0 0;
}
.card-panel {
min-height: auto;
}
/* Badges Container Responsive - Wrap properly */
.badges-container {
gap: var(--space-2);
justify-content: center;
}
.badge {
width: 40px;
height: 40px;
}
.badge-icon {
font-size: 20px;
}
/* Bonus Items Responsive - Stack vertically */
.bonus-item {
flex-direction: column;
text-align: center;
padding: var(--space-3);
}
.bonus-icon {
margin: 0 0 var(--space-2) 0;
}
}
/* Small Mobile Adjustments (480px and below) */
@media screen and (max-width: 480px) {
/* Stats Grids - Reduce gap */
.stats-grid,
.stats-grid-2,
.stats-grid-3,
.stats-grid-4,
.stats-grid-5,
.stats-grid-6 {
gap: var(--space-2);
}
/* Member Box - Single column */
.member-box-container {
grid-template-columns: 1fr !important;
}
/* Badges - Further reduce size */
.badges-container {
gap: var(--space-1);
}
.badge {
width: 36px;
height: 36px;
}
.badge-icon {
font-size: 18px;
}
/* Exp Bar - Stack header */
.exp-bar-header {
flex-direction: column;
gap: var(--space-1);
text-align: center;
}
.exp-bar-bg {
height: 6px;
}
/* Section Header - Minor font size adjustment */
.section-header {
font-size: 11px;
letter-spacing: 1px;
}
/* Info Identity - Layout adjustment */
.info-identity {
flex-direction: column;
text-align: center;
}
.info-emblem {
margin: 0 auto var(--space-2);
}
.info-title {
font-size: 16px;
}
.info-description {
font-size: 11px;
}
}
/* ================================================
22. INFO & CARD PANELS
================================================ */
/* ================================================
22. INFO & CARD PANELS
================================================ */
.info-panel {
width: 100%;
background: var(--dark-gradient);
border: 2px solid var(--borders);
border-radius: 4px;
position: relative;
box-shadow:
0 0 40px rgba(0, 0, 0, 0.8),
inset 0 1px 0 rgba(255, 255, 255, 0.05),
inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}
.member-box-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 2fr));
gap: 32px;
width: 100%;
max-width: 1200px;
padding: 20px 0 0 0;
}
.info-panel::before,
.info-panel::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
border: 2px solid #b2b2b2;
}
.info-panel::before {
top: -2px;
left: -2px;
border-right: none;
border-bottom: none;
}
.info-panel::after {
top: -2px;
right: -2px;
border-left: none;
border-bottom: none;
}
.corner-bottom-left,
.corner-bottom-right {
position: absolute;
width: 20px;
height: 20px;
border: 2px solid #b2b2b2;
}
.corner-bottom-left {
bottom: -2px;
left: -2px;
border-right: none;
border-top: none;
}
.corner-bottom-right {
bottom: -2px;
right: -2px;
border-left: none;
border-top: none;
}
.panel-header {
background: linear-gradient(90deg, #2a3854 0%, #3d5278 50%, #2a3854 100%);
padding: 12px 20px;
border-bottom: 2px solid #b2b2b2;
display: flex;
justify-content: space-between;
align-items: center;
}
.panel-title {
font-family: 'Cinzel', serif;
font-size: 18px;
font-weight: 600;
color: var(--title-font);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
letter-spacing: 2px;
}
.close-btn {
width: 28px;
height: 28px;
background: linear-gradient(180deg, #3d4a6b 0%, #2d3550 100%);
border: 1px solid #7289da;
border-radius: 2px;
color: #7289da;
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.close-btn:hover {
background: linear-gradient(180deg, #4d5a7b 0%, #3d4560 100%);
color: #99aae8;
}
.panel-content {
padding: 20px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.left-column {
display: flex;
flex-direction: column;
}
.right-column {
display: flex;
flex-direction: column;
}
.info-identity {
display: flex;
gap: 16px;
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid #3a4560;
}
.info-emblem {
width: 70px;
height: 90px;
background: linear-gradient(180deg, #3d5278 0%, #2a3854 100%);
border: 2px solid #b2b2b2;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
flex-shrink: 0;
}
.emblem-icon {
font-size: 36px;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}
.info-badge {
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(180deg, #7289da 0%, #5a6fa8 100%);
color: #ffffff;
font-family: 'Cinzel', serif;
font-weight: 700;
font-size: 13px;
padding: 2px 10px;
border-radius: 10px;
border: 1px solid #99aae8;
}
.info-content {
flex: 1;
}
.info-tag {
display: inline-block;
background: linear-gradient(180deg, #4a5a80 0%, #3a4560 100%);
color: #e1e1e1;
font-family: 'Cinzel', serif;
font-size: 10px;
font-weight: 600;
padding: 2px 8px;
border-radius: 2px;
margin-bottom: 4px;
letter-spacing: 1px;
}
.info-title {
font-family: 'Cinzel', serif;
font-size: 18px;
font-weight: 700;
color: var(--title-font);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
margin-bottom: 6px;
}
.info-description {
font-size: 12px;
color: #a8b0c0;
line-height: 1.4;
font-style: italic;
}
.info-space {
display: flex;
justify-content: space-between;
align-items: center;
}
.grid-items {
padding: 10px 20px 20px 20px
}
.stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-bottom: 16px;
}
.stats-grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 16px;
}
.stats-grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 16px;
}
.stats-grid-5 {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
margin-bottom: 16px;
}
.stats-grid-6 {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px;
margin-bottom: 16px;
}
.stat-box {
background: linear-gradient(180deg, #252d38 0%, #1a2028 100%);
border: 1px solid #3a4560;
border-radius: 4px;
padding: 10px;
position: relative;
overflow: hidden;
text-align: center;
align-content: end;
}
.stat-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(114, 137, 218, 0.3), transparent);
}
.stat-label {
font-size: 9px;
color: #6b7a9a;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 3px;
}
.stat-value {
font-family: 'Cinzel', serif;
font-size: 16px;
font-weight: 600;
color: var(--title-font);
}
.stat-value.gold {
color: #ffd700;
}
.stat-value.exp {
color: #7dd87d;
}
.stat-value.points {
color: #7289da;
}
.stat-value.members {
color: #da7289;
}
.exp-bar-container {
margin-bottom: 0;
}
.exp-bar-header {
display: flex;
justify-content: space-between;
margin-bottom: 6px;
}
.exp-label {
font-size: 10px;
color: #6b7a9a;
text-transform: uppercase;
letter-spacing: 1px;
}
.exp-text {
font-size: 11px;
color: #7dd87d;
}
.exp-bar-bg {
height: 8px;
background: #1a1d25;
border: 1px solid #3a4560;
border-radius: 4px;
overflow: hidden;
}
.exp-bar-fill {
height: 100%;
background: linear-gradient(90deg, #4a8a4a, #7dd87d);
border-radius: 3px;
box-shadow: 0 0 10px rgba(125, 216, 125, 0.5);
transition: width 0.5s ease;
}
.section-header {
font-family: 'Cinzel', serif;
font-size: 12px;
font-weight: 600;
color: #7289da;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 10px;
padding-bottom: 6px;
border-bottom: 1px solid #3a4560;
}
.header-margin {
margin-top: 10px;
}
.badges-container {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
.badge {
width: 44px;
height: 44px;
background: linear-gradient(180deg, #242f38 0%, #1a232a 100%);
border: 2px solid #4a5a80;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
transition: all 0.2s;
}
.badge:hover {
transform: translateY(-3px);
border-color: #7289da;
box-shadow: 0 4px 15px rgba(114, 137, 218, 0.3);
}
.badge-icon {
font-size: 22px;
}
.badge.locked {
opacity: 0.4;
filter: grayscale(100%);
}
.badge.locked:hover {
transform: none;
border-color: #4a5a80;
box-shadow: none;
}
.badge-tooltip {
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%);
background: linear-gradient(180deg, #2a3548 0%, #1a2028 100%);
border: 1px solid #7289da;
border-radius: 4px;
padding: 10px 14px;
min-width: 160px;
opacity: 0;
visibility: hidden;
transition: all 0.2s;
z-index: 100;
pointer-events: none;
}
.badge:hover .badge-tooltip {
opacity: 1;
visibility: visible;
}
.badge-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: #7289da;
}
.tooltip-title {
font-family: 'Cinzel', serif;
font-size: 13px;
font-weight: 600;
color: var(--title-font);
margin-bottom: 4px;
white-space: nowrap;
}
.tooltip-desc {
font-size: 11px;
color: #a8b0c0;
line-height: 1.4;
}
.tooltip-value {
font-size: 12px;
color: #7dd87d;
margin-top: 6px;
font-weight: 600;
}
.bonuses-section {
flex: 1;
}
.bonus-item {
display: flex;
align-items: center;
gap: 10px;
background: linear-gradient(90deg, rgba(114, 137, 218, 0.1) 0%, transparent 100%);
border: 1px solid rgba(114, 137, 218, 0.3);
border-radius: 4px;
padding: 8px 10px;
margin-bottom: 8px;
position: relative;
cursor: pointer;
transition: all 0.2s;
}
.bonus-item:hover {
background: linear-gradient(90deg, rgba(114, 137, 218, 0.2) 0%, transparent 100%);
border-color: rgba(114, 137, 218, 0.5);
}
.bonus-item:last-child {
margin-bottom: 0;
}
.bonus-icon {
font-size: 18px;
max-width: 35px;
text-align: center;
}
.bonus-info {
flex: 1;
}
.bonus-name {
font-size: 12px;
color: var(--title-font);
font-weight: 600;
}
.bonus-effect {
font-size: 10px;
color: #7289da;
}
.bonus-timer {
font-size: 10px;
color: #da7289;
font-family: 'Cinzel', serif;
}
.bonus-item .badge-tooltip {
bottom: auto;
top: calc(100% + 10px);
min-width: 200px;
}
.bonus-item .badge-tooltip::after {
top: auto;
bottom: 100%;
border-top-color: transparent;
border-bottom-color: #7289da;
}
.bonus-item:hover .badge-tooltip {
opacity: 1;
visibility: visible;
}
.card-panel {
background: var(--dark-gradient);
border: 2px solid var(--borders);
border-radius: 4px;
position: relative;
box-shadow:
0 0 10px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.05),
inset 0 -1px 0 rgba(0, 0, 0, 0.05);
overflow: hidden;
transition: transform 0.2s, box-shadow 0.2s;
}
.card-panel:hover {
transform: translateY(-4px);
box-shadow:
0 8px 40px rgba(114, 137, 218, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.05),
inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}
.card-panel::before,
.card-panel::after {
content: '';
position: absolute;
width: 12px;
height: 12px;
border: 2px solid #bdbec1;
}
.card-panel::before {
top: -2px;
left: -2px;
border-right: none;
border-bottom: none;
}
.card-panel::after {
top: -2px;
right: -2px;
border-left: none;
border-bottom: none;
}
.card-header {
background: linear-gradient(90deg, #2a3854 0%, #3d5278 50%, #2a3854 100%);
padding: 10px 14px;
border-bottom: 2px solid #7289da;
display: flex;
justify-content: space-between;
align-items: center;
}
.card-title {
font-family: 'Cinzel', serif;
font-size: 14px;
font-weight: 600;
color: var(--title-font);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
letter-spacing: 1px;
}
.card-content {
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 6px;
}
@media screen and (max-width: 768px) {
.info-panel {
width: 100%;
max-width: 850px;
background: var(--dark-gradient);
margin: 0;
border: 2px solid var(--borders);
border-radius: 4px;
position: relative;
box-shadow:
0 0 40px rgba(0, 0, 0, 0.8),
inset 0 1px 0 rgba(255, 255, 255, 0.05),
inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}
}