/* ============================================================
   MU-ONLINE.BY theme for DMN CMS  —  master stylesheet
   Dark, modern Season 3 look. Orange primary on zinc neutrals.
   ============================================================ */

:root {
    /* surfaces */
    --bg:            #0a0a0a;
    --surface:       #18181b;   /* zinc-900  */
    --surface-2:     #1c1c1f;
    --elevated:      #27272a;   /* zinc-800  */
    --border:        #27272a;   /* zinc-800  */
    --border-muted:  #3f3f46;   /* zinc-700  */

    /* text */
    --text:          #e4e4e7;   /* zinc-200  */
    --text-toned:    #d4d4d8;   /* zinc-300  */
    --text-muted:    #a1a1aa;   /* zinc-400  */
    --text-dim:      #71717a;   /* zinc-500  */
    --white:         #ffffff;

    /* brand */
    --primary:       #f97316;   /* orange-500 */
    --primary-400:   #fb923c;   /* orange-400 */
    --primary-300:   #fdba74;   /* orange-300 */
    --primary-600:   #ea580c;   /* orange-600 */
    --primary-700:   #c2410c;   /* orange-700 */
    --primary-soft:  rgba(249,115,22,.12);
    --primary-40:    rgba(249,115,22,.40);

    /* status */
    --live:          #34d399;   /* emerald-400 */
    --online:        #22c55e;
    --danger:        #ef4444;

    --container:     80rem;     /* 1280px */
    --header-h:      4rem;      /* 64px   */

    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
            "Apple Color Emoji", "Segoe UI Emoji";

    --shadow:    0 1px 3px rgba(0,0,0,.4);
    --shadow-lg: 0 20px 40px -12px rgba(0,0,0,.7);
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    /* ambient glows like the original */
    background-image:
        radial-gradient(60rem 30rem at 15% -5%, rgba(249,115,22,.07), transparent 60%),
        radial-gradient(50rem 28rem at 100% 0%, rgba(120,80,255,.05), transparent 55%),
        radial-gradient(60rem 40rem at 50% 120%, rgba(249,115,22,.05), transparent 60%);
    background-attachment: fixed;
}

img { max-width: 100%; display: block; }

a { color: var(--primary-400); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--primary-300); }

h1, h2, h3, h4 { margin: 0 0 .5em; color: var(--white); font-weight: 700; line-height: 1.15; }
p { margin: 0 0 1em; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

/* ---------- layout container ---------- */
.mu-main { display: block; }

.mu-container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 1.25rem;
}

.section { padding: 4rem 0; }
.section + .section { padding-top: 0; }
.section-head { max-width: 42rem; margin: 0 auto 2.25rem; text-align: center; }
.section-head h2 { font-size: 1.875rem; margin-bottom: .5rem; }
.section-head p { color: var(--text-muted); margin: 0; }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header {
    position: sticky; top: 0; z-index: 50;
    height: var(--header-h);
    background: rgba(10,10,10,.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}
.site-header__inner {
    height: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 1.25rem;
    display: flex; align-items: center; gap: 1.5rem;
}

.brand { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.brand img { width: 38px; height: 38px; }
.brand__name { font-weight: 800; font-size: 1.05rem; color: var(--primary); letter-spacing: .2px; }
.brand__name b { color: var(--primary-300); }

.main-nav { display: flex; align-items: center; gap: .25rem; }
.main-nav a {
    color: var(--text-muted);
    font-size: .9rem; font-weight: 500;
    padding: .4rem .7rem; border-radius: var(--radius-sm);
    position: relative;
    transition: color .15s ease, background .15s ease;
}
.main-nav a:hover { color: var(--white); }
.main-nav a.is-active { color: var(--primary); }
.main-nav a.is-active::after {
    content: ""; position: absolute; left: .7rem; right: .7rem; bottom: -2px;
    height: 2px; background: var(--primary); border-radius: 2px;
}

.header-tools { display: flex; align-items: center; gap: .85rem; margin-left: auto; }
.header-tools .tool-icon {
    display: inline-flex; align-items: center; gap: .3rem;
    color: var(--text-muted); font-size: .85rem;
}
.header-tools .tool-icon:hover { color: var(--white); }
.header-tools .discord { color: #818cf8; }
.header-tools .discord:hover { color: #a5b4fc; }

/* language dropdown trigger */
.lang-switch { position: relative; }
.lang-switch > a {
    display: inline-flex; align-items: center; gap: .35rem;
    color: var(--text-muted); font-size: .85rem; font-weight: 500;
}
.lang-switch > a::after { content: "\25BE"; font-size: .6rem; opacity: .8; }
.lang-switch > a:hover { color: var(--white); }

.auth-links { display: flex; align-items: center; gap: .65rem; }
.auth-links .login-link { color: var(--text); font-weight: 500; font-size: .9rem; }
.auth-links .login-link:hover { color: var(--white); }

/* user menu (logged in) */
.user-menu { position: relative; }
.user-menu > a {
    display: inline-flex; align-items: center; gap: .4rem;
    font-weight: 600; color: var(--text); font-size: .9rem;
}
.user-menu > a::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--online);
    box-shadow: 0 0 8px var(--online);
}

/* dropdown panels (also see menu.css) */
.dropdown-panel {
    position: absolute; top: calc(100% + .55rem); right: 0;
    min-width: 190px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    padding: .35rem; z-index: 60;
}
.dropdown-panel a {
    display: block; padding: .5rem .7rem; border-radius: var(--radius-sm);
    color: var(--text-muted); font-size: .85rem; font-weight: 500;
}
.dropdown-panel a:hover { background: var(--elevated); color: var(--white); }

/* ---------- server live banner ---------- */
.server-banner {
    border-bottom: 1px solid var(--border);
    background:
        linear-gradient(90deg, transparent, rgba(52,211,153,.06), transparent);
    text-align: center;
    padding: .45rem 1rem;
    font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--live);
}
.server-banner .dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--live); margin-right: .5rem; vertical-align: middle;
    box-shadow: 0 0 8px var(--live);
    animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-weight: 600; font-size: .9rem; line-height: 1;
    padding: .7rem 1.15rem; border-radius: var(--radius-sm);
    border: 1px solid transparent; cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
    white-space: nowrap; text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: #1a1208; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-400); color: #1a1208; }
.btn-outline { background: transparent; color: var(--text); border-color: var(--border-muted); }
.btn-outline:hover { border-color: var(--text-muted); color: var(--white); background: rgba(255,255,255,.03); }
.btn-ghost { background: var(--elevated); color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: #303034; color: var(--white); }
.btn-lg { padding: .85rem 1.6rem; font-size: 1rem; }
.btn-sm { padding: .45rem .8rem; font-size: .8rem; }
.btn-block { width: 100%; }

/* ============================================================
   PILLS / BADGES / TAGS
   ============================================================ */
.stat-pills { display: flex; flex-wrap: wrap; gap: .6rem; }
.pill {
    display: inline-flex; align-items: center; gap: .45rem;
    background: rgba(24,24,27,.8); border: 1px solid var(--border);
    border-radius: var(--radius-full); padding: .35rem .9rem; font-size: .85rem;
    color: var(--text-toned);
}
.pill .ico { color: var(--primary); font-size: .8rem; }
.pill.is-off .dot, .pill.is-on .dot {
    width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}
.pill.is-on .dot  { background: var(--online); box-shadow: 0 0 7px var(--online); }
.pill.is-off .dot { background: var(--text-dim); }

.badge {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--elevated); color: var(--text-toned);
    border-radius: var(--radius-sm); padding: .25rem .7rem; font-size: .72rem; font-weight: 500;
}
.badge .ico { color: var(--primary); }

.tag {
    display: inline-flex; align-items: center;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-full); padding: .3rem .85rem; font-size: .8rem;
    color: var(--text-muted);
}

/* ============================================================
   CARDS
   ============================================================ */
.mu-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 1.5rem;
    transition: border-color .15s ease, transform .15s ease;
}
.mu-card:hover { border-color: var(--primary-40); }
.mu-card .card-ico { color: var(--primary); font-size: 1.6rem; margin-bottom: .85rem; line-height: 1; }
.mu-card h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.mu-card p { color: var(--text-muted); font-size: .9rem; margin: 0; }

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding: 3rem 0 2rem; }
.hero .stat-pills { margin-bottom: 1.75rem; }
.hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.25rem);
    font-weight: 800; letter-spacing: -.5px; max-width: 16ch; margin-bottom: 1rem;
}
.hero__sub { color: var(--text-muted); font-size: 1.05rem; max-width: 46rem; margin-bottom: 1.6rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.75rem; }
.hero__badges { display: flex; flex-wrap: wrap; gap: .55rem; }

/* ============================================================
   NEWS (home feed + read article)
   ============================================================ */
.news-list { display: flex; flex-direction: column; gap: 1.25rem; max-width: 60rem; margin: 0 auto; }
.news-article {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
    transition: border-color .15s ease;
}
.news-article:hover { border-color: var(--border-muted); }
.news-article__media img { width: 100%; height: auto; max-height: 320px; object-fit: cover; }
.news-article__body { padding: 1.5rem; }
.news-article__meta { display: flex; align-items: center; gap: .75rem; margin-bottom: .65rem; flex-wrap: wrap; }
.news-article__tag {
    background: var(--primary-soft); color: var(--primary-300);
    border: 1px solid var(--primary-40);
    border-radius: var(--radius-full); padding: .2rem .7rem; font-size: .72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em;
}
.news-article__date { color: var(--text-dim); font-size: .8rem; }
.news-article__title { font-size: 1.4rem; margin-bottom: .65rem; }
.news-article__content { color: var(--text-toned); font-size: .95rem; }
.news-article__content img { border-radius: var(--radius); margin: .75rem 0; }
.news-article__content a { color: var(--primary-400); }
.news-article__content .links { margin-top: 1rem; }

/* ============================================================
   PAGE HEADER (interior pages)  +  legacy .title1 / box-style
   ============================================================ */
.page-head { text-align: center; padding: 3rem 0 1.5rem; }
.page-head h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; }
.page-head p { color: var(--text-muted); margin: 0; }

/* DMN content wrapper used by most module views */
#content { display: block; }
#content_center { display: block; }

#box1 > .title1 {
    text-align: center; padding: 3rem 0 .25rem;
}
#box1 > .title1 h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; margin: 0; }

/* the boxed panels DMN uses everywhere */
.box-style1, .box-style2, .box-style3, .box-style4 {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    max-width: 60rem; margin: 1.25rem auto;
    padding: 0; overflow: hidden;
}
.box-style1 > .title, .box-style2 > .title, .box-style3 > .title {
    margin: 0; padding: 1.1rem 1.5rem; font-size: 1.1rem; color: var(--white);
    border-bottom: 1px solid var(--border); background: rgba(255,255,255,.015);
}
.box-style1 > .entry, .box-style2 > .entry, .box-style3 > .entry, .box-style4 > .entry,
.box-style1 .entry { padding: 1.5rem; }

/* notices */
.i_note, .e_note, .s_note, .w_note {
    border-radius: var(--radius); padding: .85rem 1.1rem; font-size: .9rem;
    border: 1px solid var(--border); background: var(--elevated); color: var(--text-toned);
    margin: 0 auto; max-width: 60rem;
}
.e_note { border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.08); color: #fca5a5; }
.s_note { border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.08); color: #6ee7b7; }
.w_note { border-color: rgba(249,115,22,.4); background: var(--primary-soft); color: var(--primary-300); }

/* ============================================================
   FORMS
   ============================================================ */
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="search"], select, textarea {
    width: 100%;
    background: #121214; color: var(--text);
    border: 1px solid var(--border-muted); border-radius: var(--radius-sm);
    padding: .6rem .75rem; font-size: .9rem; font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
input::placeholder, textarea::placeholder { color: var(--text-dim); }
select option { background: var(--surface); }
label { color: var(--text-toned); font-size: .9rem; }

/* DMN's table-based forms (registration, account panel, etc.) */
.entry .form table, .box-style1 table.form-table, #content_center form table { width: 100%; }
.entry .form td, .box-style1 .entry td { padding: .45rem .5rem; vertical-align: middle; color: var(--text-toned); }
.entry .form td:first-child { color: var(--text-muted); white-space: nowrap; }

button.button-style, .button-style, input[type="submit"], button[type="submit"] {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-weight: 600; font-size: .9rem; line-height: 1; cursor: pointer;
    padding: .7rem 1.3rem; border-radius: var(--radius-sm);
    background: var(--primary); color: #1a1208; border: 1px solid var(--primary);
    transition: background .15s ease;
}
button.button-style:hover, .button-style:hover,
input[type="submit"]:hover, button[type="submit"]:hover { background: var(--primary-400); }

/* small flat buttons used in sidebar/login */
.flatbtn-blu, .flatbtn-red, .flatbtn-grn {
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: .85rem; cursor: pointer;
    padding: .55rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--primary);
    background: var(--primary); color: #1a1208;
}
.flatbtn-blu:hover, .flatbtn-red:hover, .flatbtn-grn:hover { background: var(--primary-400); }
.txtfield { margin-bottom: .6rem; }

/* the orange tab/action buttons used by rankings + account panel */
.custom_button {
    display: inline-flex; align-items: center; justify-content: center;
    margin: .2rem; padding: .5rem .95rem; border-radius: var(--radius-sm);
    background: var(--elevated); color: var(--text); border: 1px solid var(--border);
    font-size: .82rem; font-weight: 600; cursor: pointer; transition: all .15s ease;
}
.custom_button:hover, .custom_button.selected {
    background: var(--primary); color: #1a1208; border-color: var(--primary);
}

/* ============================================================
   DATA TABLES  (rankings, logs, market, etc.)
   ============================================================ */
table.ranking-table, .data-table, .entry table.list {
    width: 100%; border-collapse: collapse; margin-top: .5rem;
    border-radius: var(--radius-lg); overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface);
}
table.ranking-table thead th, .data-table thead th {
    text-align: left; padding: .8rem 1rem;
    font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-dim); background: rgba(255,255,255,.02);
    border-bottom: 1px solid var(--border);
}
table.ranking-table tbody td, .data-table tbody td {
    padding: .75rem 1rem; border-bottom: 1px solid var(--border);
    color: var(--text-toned); font-size: .9rem;
}
table.ranking-table tbody tr:last-child td, .data-table tbody tr:last-child td { border-bottom: 0; }
table.ranking-table tbody tr:hover td, .data-table tbody tr:hover td { background: rgba(255,255,255,.025); }
table.ranking-table tbody tr td:first-child { color: var(--primary); font-weight: 700; }
table.ranking-table a { color: var(--text); font-weight: 500; }
table.ranking-table a:hover { color: var(--primary-300); }

/* rankings: ranking type buttons + class filter row */
#rank_by_class, .rankings #rankings_select_0,
[id^="rankings_select_"] { margin-bottom: 1rem; }

/* tab row (server selector on rankings) */
ul.tabrow {
    list-style: none; display: flex; flex-wrap: wrap; gap: .4rem;
    padding: 0; margin: 0 0 1.25rem; justify-content: center;
}
ul.tabrow li a {
    display: inline-flex; padding: .5rem 1rem; border-radius: var(--radius-sm);
    background: var(--elevated); border: 1px solid var(--border);
    color: var(--text-muted); font-size: .85rem; font-weight: 600;
}
ul.tabrow li a:hover { color: var(--white); }
ul.tabrow li.selected a { background: var(--primary); color: #1a1208; border-color: var(--primary); }

/* pagination */
.pagination, .paging { display: flex; gap: .35rem; justify-content: center; flex-wrap: wrap; margin-top: 1.25rem; }
.pagination a, .pagination span, .paging a, .paging span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 .6rem; border-radius: var(--radius-sm);
    background: var(--elevated); border: 1px solid var(--border);
    color: var(--text-muted); font-size: .85rem; font-weight: 600;
}
.pagination a:hover, .paging a:hover { color: var(--white); border-color: var(--border-muted); }
.pagination .current, .pagination span.active, .paging .current {
    background: var(--primary); color: #1a1208; border-color: var(--primary);
}

/* ============================================================
   RANKINGS class hero cards (top of rankings page, optional)
   ============================================================ */
.class-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: .75rem; max-width: 60rem; margin: 0 auto 2rem; }
.class-card {
    position: relative; border-radius: var(--radius-lg); overflow: hidden;
    border: 1px solid var(--border); aspect-ratio: 3/4; background: var(--surface);
}
.class-card img { width: 100%; height: 100%; object-fit: cover; opacity: .92; }
.class-card .label {
    position: absolute; left: 0; right: 0; bottom: 0; padding: .6rem;
    background: linear-gradient(transparent, rgba(0,0,0,.85));
    text-align: center; color: var(--white); font-weight: 800; letter-spacing: .04em;
}
.class-card .label small { display: block; color: var(--primary-300); font-weight: 600; }

/* ============================================================
   ACCOUNT PANEL
   ============================================================ */
.acp-grid { display: grid; grid-template-columns: 240px 1fr; gap: 1.5rem; align-items: start; max-width: 72rem; margin: 1.5rem auto; }
.acp-menu { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: .5rem; position: sticky; top: calc(var(--header-h) + 1rem); }
.acp-menu a { display: block; padding: .6rem .8rem; border-radius: var(--radius-sm); color: var(--text-muted); font-size: .88rem; font-weight: 500; }
.acp-menu a:hover, .acp-menu a.is-active { background: var(--elevated); color: var(--white); }

/* ============================================================
   FEATURE TABS (home "Explore the Improved Systems")
   ============================================================ */
.tab-pills { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 1.5rem; }
.tab-pills button {
    background: var(--elevated); border: 1px solid var(--border); color: var(--text-muted);
    padding: .45rem 1rem; border-radius: var(--radius-full); font-size: .82rem; font-weight: 600; cursor: pointer;
    transition: all .15s ease;
}
.tab-pills button:hover { color: var(--white); }
.tab-pills button.is-active { background: var(--primary-soft); border-color: var(--primary-40); color: var(--primary-300); }

.split-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 60rem; margin: 0 auto; }
.split-panel .lead {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 1.5rem; display: flex; flex-direction: column;
}
.split-panel .lead h3 { display: flex; align-items: center; gap: .5rem; }
.split-panel .lead .ico { color: var(--primary); }
.split-panel .lead .more { margin-top: auto; color: var(--primary-400); font-weight: 600; font-size: .85rem; padding-top: 1rem; }
.split-panel .lead p { color: var(--text-muted); }
.split-list { display: flex; flex-direction: column; gap: .5rem; }
.split-list .row {
    display: flex; align-items: center; gap: .6rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: .85rem 1rem; color: var(--text-toned); font-size: .9rem;
}
.split-list .row.is-active { border-color: var(--primary-40); background: var(--primary-soft); color: var(--primary-300); }
.split-list .row .ico { color: var(--primary); }

/* ============================================================
   WIKI / CTA cards
   ============================================================ */
.cta-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 2rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem;
    max-width: 60rem; margin: 0 auto; flex-wrap: wrap;
}
.cta-card .eyebrow { color: var(--primary); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .5rem; display: flex; align-items: center; gap: .4rem; }
.cta-card h3 { font-size: 1.4rem; margin-bottom: .4rem; }
.cta-card p { color: var(--text-muted); margin: 0; max-width: 38rem; }

.final-cta { text-align: center; padding: 4.5rem 0; }
.final-cta h2 { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 800; }
.final-cta p { color: var(--text-muted); font-size: 1.1rem; max-width: 36rem; margin: 0 auto 1.6rem; }
.final-cta .actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.final-cta .tagline { margin-top: 1.5rem; color: var(--text-dim); font-size: .85rem; }

/* tag cloud (events list) */
.tag-cloud { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; max-width: 50rem; margin: 1.5rem auto 0; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    border-top: 1px solid var(--border);
    margin-top: 3rem;
    background: rgba(0,0,0,.3);
}
.site-footer__inner {
    max-width: var(--container); margin: 0 auto; padding: 1.75rem 1.25rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.site-footer__copy { color: var(--text-dim); font-size: .85rem; }
.site-footer__links { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.site-footer__links a { color: var(--text-muted); font-size: .85rem; }
.site-footer__links a:hover { color: var(--white); }
.site-footer__links a.discord { color: #818cf8; display: inline-flex; align-items: center; gap: .35rem; }
.site-footer__links a.discord:hover { color: #a5b4fc; }

/* old footer markup fallback */
#footer { border-top: 1px solid var(--border); margin-top: 3rem; padding: 1.75rem 0; color: var(--text-dim); }
#footer a { color: var(--text-muted); }
#footer #copy { margin-top: .5rem; font-size: .82rem; }
#footer-warpper { max-width: var(--container); margin: 0 auto; padding: 0 1.25rem; }

/* ============================================================
   MODALS  (leanModal: #login_box, #select_server)
   ============================================================ */
#lean_overlay { background: rgba(0,0,0,.7) !important; }
#login_box, #select_server, .modal-box {
    display: none; position: fixed;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    padding: 0; width: 380px; max-width: 92vw; z-index: 11000; overflow: hidden;
}
.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--border);
}
.modal-header h2 { margin: 0; font-size: 1.1rem; }
.modal-header .close, a.close {
    width: 28px; height: 28px; border-radius: var(--radius-sm); display: inline-flex;
    align-items: center; justify-content: center; color: var(--text-muted);
    background: var(--elevated); font-size: 0;
}
.modal-header .close::before, a.close::before { content: "\00d7"; font-size: 1.1rem; }
.modal-header .close:hover, a.close:hover { color: var(--white); }
#login_box .modal-body, .modal-body { padding: 1.25rem; }
#login_box form { display: flex; flex-direction: column; gap: .7rem; }

/* loading toast */
#loading {
    display: none; position: fixed; bottom: 18px; right: 18px; z-index: 12000;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: .6rem .9rem; color: var(--text-toned); font-size: .85rem;
    align-items: center; gap: .5rem; box-shadow: var(--shadow-lg);
}
#loading img { width: 16px; height: 16px; display: inline-block; }
#exception { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 13000; }

/* grand-open countdown timer */
#timer_div_title { text-align: center; color: var(--primary-300); font-weight: 700; padding-top: 1.5rem; letter-spacing: .04em; }
#timer_div_time { display: flex; gap: .75rem; justify-content: center; padding: 1rem 0; flex-wrap: wrap; }
.timmer_inner_block {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: .85rem 1.1rem; min-width: 78px; text-align: center;
}
.timmer_inner_block .count { font-size: 1.6rem; font-weight: 800; color: var(--white); }
.timmer_inner_block .title { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); }

/* ============================================================
   LATEST MARKET ITEMS / sidebar blocks (if a module renders them)
   ============================================================ */
#mods-sides { max-width: var(--container); margin: 0 auto; padding: 0 1.25rem; }
#item-market, #sides-acp-top, #top-s1, #top-s2 { margin-bottom: 1rem; }
#sides-top {
    font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim);
    padding: .5rem 0; font-weight: 700;
}
#sides-content { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem; }

/* server status mini list in old header (hidden by default in new theme) */
#header-side1, #header-side3, #total-online { display: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
    .card-grid, .card-grid.cols-2, .card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
    .split-panel { grid-template-columns: 1fr; }
    .class-cards { grid-template-columns: repeat(3, 1fr); }
    .acp-grid { grid-template-columns: 1fr; }
    .acp-menu { position: static; }
}

@media (max-width: 760px) {
    .main-nav { display: none; }
    .header-tools { gap: .6rem; }
    .site-header__inner { gap: .75rem; }
    .hamburger { display: inline-flex !important; }
    .card-grid, .card-grid.cols-2, .card-grid.cols-4 { grid-template-columns: 1fr; }
    .class-cards { grid-template-columns: repeat(2, 1fr); }
    .cta-card { flex-direction: column; align-items: flex-start; }
    .site-footer__inner { flex-direction: column; align-items: flex-start; }
    .section { padding: 2.75rem 0; }
}

/* mobile nav drawer */
.hamburger {
    display: none; width: 38px; height: 38px; align-items: center; justify-content: center;
    background: var(--elevated); border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--text); cursor: pointer; font-size: 1.1rem;
}
.mobile-nav {
    display: none; position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 49;
    background: var(--bg); border-bottom: 1px solid var(--border); padding: .5rem;
}
.mobile-nav.open { display: block; }
.mobile-nav a { display: block; padding: .7rem .9rem; color: var(--text-muted); border-radius: var(--radius-sm); font-weight: 500; }
.mobile-nav a:hover { background: var(--elevated); color: var(--white); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* small helpers */
.text-center { text-align: center; }
.muted { color: var(--text-muted); }
.mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.hide { display: none; }

/* ============================================================
   VALIDATION ENGINE prompts (registration / login / settings)
   ============================================================ */
.formError { position: absolute; z-index: 5000; cursor: pointer; }
.formError .formErrorContent {
    background: #2a1410; color: #fca5a5;
    border: 1px solid rgba(239,68,68,.5); border-radius: var(--radius-sm);
    padding: .5rem .7rem; font-size: .8rem; box-shadow: var(--shadow-lg);
    max-width: 260px;
}
.formError .formErrorArrow div, .formError .formErrorArrowBottom div {
    background: #2a1410; border: 1px solid rgba(239,68,68,.5);
}
.formError.greenPopup .formErrorContent {
    background: #0f2417; color: #6ee7b7; border-color: rgba(52,211,153,.5);
}
.inputContainer { position: relative; }

/* ============================================================
   NOTICE toasts (App.notice -> #notifier-box)
   ============================================================ */
#notifier-box {
    position: fixed; top: 84px; right: 20px; z-index: 13000;
    display: flex; flex-direction: column; gap: .6rem; max-width: 340px;
}
#notifier-box .message-box {
    position: relative;
    background: var(--surface); border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    padding: .85rem 2.2rem .85rem 1rem; color: var(--text-toned); font-size: .88rem;
}
#notifier-box .message-box .error,
#notifier-box .message-box > .error { color: #fca5a5; font-weight: 700; margin-bottom: .25rem; }
#notifier-box .message-box .success,
#notifier-box .message-box > .success { color: #6ee7b7; font-weight: 700; margin-bottom: .25rem; }
#notifier-box .message-box.has-error, #notifier-box .message-box:has(.error) { border-left-color: var(--danger); }
#notifier-box .message-box:has(.success) { border-left-color: var(--live); }
#notifier-box .message-body { color: var(--text-muted); }
#notifier-box .message-close {
    position: absolute; top: .5rem; right: .6rem; color: var(--text-dim);
    font-size: 1rem; line-height: 1; text-decoration: none;
}
#notifier-box .message-close:hover { color: var(--white); }
#notifier-box .message-close::before { content: "\00d7"; }

/* ============================================================
   RANKINGS — "Who's Leading?" class-art cards
   ============================================================ */
.rank-hero { text-align: center; padding: 3rem 0 1.5rem; }
.rank-hero h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; }
.rank-hero p { color: var(--text-muted); margin: 0; }
.class-cards a.class-card { display: block; text-decoration: none; }
.class-cards a.class-card:hover { border-color: var(--primary-40); }
.class-cards a.class-card:hover img { opacity: 1; }

/* rankings search box (matches mu-online.by centered field) */
.rank-search { max-width: 26rem; margin: 0 auto 1.5rem; }
.rank-search input { text-align: left; }

/* ============================================================
   SCHEDULE page
   ============================================================ */
.sched-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; padding: 3rem 0 1rem; flex-wrap: wrap; }
.sched-head h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; margin: 0 0 .35rem; }
.sched-head p { color: var(--text-muted); margin: 0; }
.sched-clock { text-align: right; }
.sched-clock .time { font-size: 2rem; font-weight: 800; color: var(--primary); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.sched-clock .date { color: var(--text-toned); font-size: .95rem; }
.sched-clock .tz { color: var(--text-dim); font-size: .8rem; }
.sched-section { padding: 1.5rem 0; }
.sched-section .label { display: flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); margin-bottom: 1rem; }
.sched-empty { text-align: center; color: var(--text-muted); padding: 2rem 0; }
.sched-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.sched-card .now-row { display: flex; align-items: center; gap: .6rem; padding: .9rem 1.25rem; border-bottom: 1px solid var(--border); color: var(--primary); font-weight: 700; font-variant-numeric: tabular-nums; }
.sched-card .now-row::before { content: "\25B6"; font-size: .7rem; }
.sched-event { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1.25rem; border-bottom: 1px solid var(--border); }
.sched-event:last-child { border-bottom: 0; }
.sched-event .ev-name { font-weight: 600; color: var(--text); }
.sched-event .ev-time { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sched-event .ev-countdown { color: var(--primary-300); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ============================================================
   WIKI page (Server Overview)
   ============================================================ */
.wiki-layout { display: grid; grid-template-columns: 220px 1fr; gap: 2rem; align-items: start; padding: 2rem 0; }
.wiki-menu { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: .5rem; position: sticky; top: calc(var(--header-h) + 1rem); }
.wiki-menu a { display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem; border-radius: var(--radius-sm); color: var(--text-muted); font-size: .88rem; font-weight: 500; }
.wiki-menu a:hover { color: var(--white); }
.wiki-menu a.is-active { background: var(--primary-soft); color: var(--primary-300); }
.wiki-menu a .ico { color: currentColor; }
.wiki-main h1 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); font-weight: 800; margin-bottom: .5rem; }
.wiki-main > p.lead { color: var(--text-muted); max-width: 46rem; margin-bottom: 1.25rem; }
.wiki-sec { padding: 1.5rem 0; }
.wiki-sec > h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.3rem; margin-bottom: 1rem; }
.wiki-sec > h2 .ico { color: var(--primary); }
.kv-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.kv-table tr { border-bottom: 1px solid var(--border); }
.kv-table tr:last-child { border-bottom: 0; }
.kv-table td { padding: .85rem 1.25rem; font-size: .92rem; }
.kv-table td:first-child { color: var(--text-muted); }
.kv-table td:last-child { text-align: right; color: var(--white); font-weight: 600; }
.kv-table td .badge { margin-left: .35rem; }
.wiki-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.wiki-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; }
.wiki-panel h3 { font-size: 1rem; margin-bottom: 1rem; }
.wiki-panel .row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--border); font-size: .9rem; }
.wiki-panel .row:last-child { border-bottom: 0; }
.wiki-panel .row .k { color: var(--text-muted); }
.wiki-panel .row .v { color: var(--white); font-weight: 600; }
.reward-line { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; }
.reward-line .amt { font-size: 1.1rem; font-weight: 800; color: var(--white); min-width: 64px; }
.wiki-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }

@media (max-width: 860px) {
    .wiki-layout { grid-template-columns: 1fr; }
    .wiki-menu { position: static; }
    .wiki-two { grid-template-columns: 1fr; }
    .sched-head { flex-direction: column; }
    .sched-clock { text-align: left; }
}

/* ============================================================
   WAREHOUSE / inventory vault
   ============================================================ */
.wh_items {
    width: 261px; height: 485px; margin: 12px auto; padding: 6px 0 0 3px;
    position: relative; background-repeat: no-repeat; border-radius: var(--radius);
}
.wh_items .square { cursor: pointer; position: absolute; opacity: .85; border-radius: 3px; }
.wh_items .square:hover { opacity: 1; outline: 1px solid var(--primary); }
.wh_items .square img { width: 100%; height: 100%; display: block; }
#wh_content { box-shadow: inset 0 0 0 1px var(--border); }
#option_buttons { margin: .5rem 0 1rem; display: flex; gap: .6rem; }
#sell_item .form td { padding: .4rem .5rem; }

/* ============================================================
   ACCOUNT PANEL — light redesign
   ============================================================ */
/* drop the stray empty panel some installs render */
#box1 > .box-style4:first-of-type:empty { display: none; }

#ucp_info { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
#ucp_info .half { min-width: 0; }
#ucp_info table { width: 100%; border-collapse: collapse; }
#ucp_info td { padding: .55rem .4rem; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: .9rem; color: var(--text-toned); }
#ucp_info tr:last-child td { border-bottom: 0; }
#ucp_info td:nth-child(2) { color: var(--text-muted); }
#ucp_info td:last-child { color: var(--white); font-weight: 600; text-align: right; }
#ucp_info td img { width: 18px; height: 18px; opacity: .8; }

/* character options -> tidy responsive tile grid */
#character-info table, #character-info tbody, #character-info tr { display: contents; }
#character-info > table { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; width: 100%; }
#character-info td { display: block; }
#character-info td > div { height: 100%; }
#character-info ul { list-style: none; margin: 0; padding: 0; height: 100%; }
#character-info li {
    display: block; height: 100%;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1rem 1.1rem; color: var(--text-muted); font-size: .82rem; line-height: 1.5;
    transition: border-color .15s ease;
}
#character-info li:hover { border-color: var(--primary-40); }
#character-info li a { display: block; margin-bottom: .35rem; }
#character-info li a p { margin: 0; color: var(--white); font-weight: 700; font-size: .95rem; }
#character-info li a:hover p { color: var(--primary-300); }

@media (max-width: 860px) {
    #ucp_info { grid-template-columns: 1fr; }
    #character-info > table { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    #character-info > table { grid-template-columns: 1fr; }
}

/* ============================================================
   WIKI — heroes (list + detail), shares the wiki layout
   ============================================================ */
.wiki-view { display: none; }
.wiki-view.is-shown { display: block; }

.back-link { display: inline-flex; align-items: center; gap: .4rem; color: var(--text-muted); font-size: .9rem; font-weight: 500; margin-bottom: 1.25rem; }
.back-link:hover { color: var(--white); }

/* heroes grid */
.heroes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.hero-tile { display: block; text-decoration: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: border-color .15s ease, transform .15s ease; }
.hero-tile:hover { border-color: var(--primary-40); }
.hero-tile .ht-img { aspect-ratio: 16/10; overflow: hidden; }
.hero-tile .ht-img img { width: 100%; height: 100%; object-fit: cover; opacity: .92; }
.hero-tile:hover .ht-img img { opacity: 1; }
.hero-tile .ht-body { padding: 1rem 1.15rem; }
.hero-tile .ht-body h3 { margin: 0 0 .15rem; font-size: 1.05rem; }
.hero-tile .ht-body .code { color: var(--primary); font-weight: 800; font-size: .75rem; letter-spacing: .08em; }
.hero-tile .ht-body p { margin: .35rem 0 0; color: var(--text-muted); font-size: .85rem; }

/* hero detail */
.hero-head { display: grid; grid-template-columns: 280px 1fr; gap: 1.5rem; align-items: start; }
.hero-portrait { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); aspect-ratio: 1/1; background: var(--surface); }
.hero-portrait img { width: 100%; height: 100%; object-fit: cover; }
.hero-head h1 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); font-weight: 800; margin: 0 0 .65rem; }
.hero-evo { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.hero-evo .stage { text-align: center; }
.hero-evo .stage .nm { display: inline-block; background: var(--elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .25rem .65rem; font-size: .82rem; font-weight: 700; color: var(--text); }
.hero-evo .stage:first-child .nm { background: var(--primary-soft); border-color: var(--primary-40); color: var(--primary-300); }
.hero-evo .stage .st { display: block; color: var(--text-dim); font-size: .68rem; margin-top: .2rem; }
.hero-evo .arrow { color: var(--text-dim); }
.hero-desc { color: var(--text-muted); font-size: .95rem; }

.hero-sec { padding: 1.75rem 0 .25rem; }
.hero-sec > h2 { font-size: 1.3rem; margin-bottom: 1rem; }
.hero-char { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.hero-char li { display: flex; gap: .6rem; color: var(--text-toned); font-size: .92rem; }
.hero-char li::before { content: "\25B8"; color: var(--primary); flex-shrink: 0; }

/* base stats grid */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.stat-cell { display: flex; align-items: center; gap: .6rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .7rem .95rem; }
.stat-cell .s-ico { flex-shrink: 0; display: inline-flex; }
.stat-cell .s-name { color: var(--text-muted); font-size: .88rem; }
.stat-cell .s-val { margin-left: auto; color: var(--white); font-weight: 800; font-variant-numeric: tabular-nums; }
.s-hp { color: #f87171; } .s-mana { color: #60a5fa; } .s-str { color: #fb923c; }
.s-agi { color: #34d399; } .s-vit { color: #f472b6; } .s-ene { color: #38bdf8; } .s-cmd { color: #fbbf24; }

/* builds */
.builds-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.build-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.build-card h3 { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .9rem 1.1rem; border-bottom: 1px solid var(--border); font-size: 1rem; }
.build-card h3 .ico { color: var(--primary); }
.build-card .bbody { padding: 1.1rem; display: flex; flex-direction: column; gap: .85rem; }
.build-stat .lbl { display: flex; justify-content: space-between; font-size: .85rem; margin-bottom: .3rem; }
.build-stat .lbl .k { color: var(--text-toned); display: inline-flex; align-items: center; gap: .4rem; }
.build-stat .lbl .v { color: var(--white); font-weight: 700; }
.build-bar { height: 6px; border-radius: 999px; background: var(--elevated); overflow: hidden; }
.build-bar > span { display: block; height: 100%; border-radius: 999px; }
.bar-str > span { background: #ef4444; } .bar-agi > span { background: #22c55e; }
.bar-vit > span { background: #f472b6; } .bar-ene > span { background: #3b82f6; }
.bar-cmd > span { background: #f59e0b; }

@media (max-width: 860px) {
    .heroes-grid { grid-template-columns: 1fr 1fr; }
    .hero-head { grid-template-columns: 1fr; }
    .hero-portrait { max-width: 240px; }
    .stat-grid, .builds-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .heroes-grid, .stat-grid, .builds-grid { grid-template-columns: 1fr; }
}

/* schedule: time badge + past/passed events */
.sched-event .ev-time-badge {
    display: inline-block; min-width: 48px; text-align: center;
    background: var(--elevated); border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: .1rem .45rem; margin-right: .6rem; font-size: .78rem; font-weight: 700;
    color: var(--primary-300); font-variant-numeric: tabular-nums;
}
.sched-event.is-past { opacity: .45; }
.sched-event.is-past .ev-time-badge { color: var(--text-dim); }
.sched-event .ev-done { color: var(--text-dim); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }

/* ============================================================
   WIKI — events (grid + detail)
   ============================================================ */
.events-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.event-card { display: block; text-decoration: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: border-color .15s ease; }
.event-card:hover { border-color: var(--primary-40); }
.event-card .ec-img { aspect-ratio: 16/9; overflow: hidden; background: var(--elevated); }
.event-card .ec-img img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.event-card:hover .ec-img img { opacity: 1; }
.event-card .ec-body { padding: .9rem 1.1rem; }
.event-card .ec-body h3 { margin: 0 0 .3rem; font-size: 1.02rem; }
.event-card .ec-body p { margin: 0; color: var(--text-muted); font-size: .82rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.event-card .ec-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.event-card .ec-tags .badge { font-size: .68rem; }

/* event detail */
.ev-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.1rem; }
.ev-meta .pill { font-size: .8rem; }
.ev-meta .pill.accent { background: var(--primary-soft); border-color: var(--primary-40); color: var(--primary-300); }
.ev-hero-img { width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--border); overflow: hidden; margin-bottom: 1.75rem; }
.ev-hero-img img { width: 100%; display: block; max-height: 380px; object-fit: cover; }

.ev-cols { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 1.75rem; align-items: start; }
.ev-cols h2, .ev-block h2 { font-size: 1.15rem; margin: 0 0 1rem; }

.ev-howto { list-style: none; margin: 0; padding: 0; counter-reset: step; display: flex; flex-direction: column; gap: .85rem; }
.ev-howto li { display: flex; gap: .65rem; color: var(--text-toned); font-size: .9rem; align-items: flex-start; }
.ev-howto li::before { counter-increment: step; content: counter(step); flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--primary-soft); border: 1px solid var(--primary-40); color: var(--primary-300); font-size: .72rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }

.ev-rewards { display: flex; flex-direction: column; gap: .5rem; }
.ev-rewards .r { display: flex; align-items: center; gap: .6rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .55rem .75rem; }
.ev-rewards .r img { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }
.ev-rewards .r span { font-size: .88rem; color: var(--text-toned); }

.ev-sched .freq { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .65rem; }
.ev-sched .freq .badge { background: var(--elevated); }
.ev-sched .freq .badge.vip { background: var(--primary-soft); border: 1px solid var(--primary-40); color: var(--primary-300); }
.ev-sched .period { color: var(--text-dim); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .5rem; }
.ev-times { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
.ev-times span { text-align: center; background: var(--elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .25rem .2rem; font-size: .76rem; font-weight: 600; color: var(--primary-300); font-variant-numeric: tabular-nums; }

.ev-block { padding-top: 1.75rem; }
.ev-entry { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .85rem; }
.ev-entry .it { display: flex; align-items: center; gap: .85rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: .85rem 1rem; }
.ev-entry .it img { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
.ev-entry .it span { font-weight: 600; color: var(--text); font-size: .92rem; }

.ev-tactics { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.ev-tactics li { display: flex; gap: .6rem; color: var(--text-toned); font-size: .9rem; }
.ev-tactics li::before { content: "\25B8"; color: var(--primary); flex-shrink: 0; }

/* schedule row thumbnails */
.sched-event .ev-thumb { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; margin-right: .65rem; vertical-align: middle; border: 1px solid var(--border); }
.sched-event .ev-name { display: inline-flex; align-items: center; }
.sched-event .ev-name a { color: var(--text); }
.sched-event .ev-name a:hover { color: var(--primary-300); }

@media (max-width: 860px) {
    .events-grid { grid-template-columns: 1fr 1fr; }
    .ev-cols { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 560px) {
    .events-grid { grid-template-columns: 1fr; }
    .ev-times { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   WIKI — Boxes & Drops
   ============================================================ */
.box-cat { padding: .5rem 0 1.75rem; }
.box-cat > h2 { font-size: 1.4rem; margin: 0 0 1rem; }
.box-cat.c-amber > h2 { color: #fbbf24; }
.box-cat.c-green > h2 { color: #34d399; }
.box-cat.c-purple > h2 { color: #c084fc; }
.box-cat.c-orange > h2 { color: var(--primary); }
.box-cat.c-cyan > h2 { color: #38bdf8; }

.box-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.box-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.1rem 1.25rem; }
.box-card .bc-head { display: flex; align-items: flex-start; gap: .85rem; }
.box-card .bc-icon { width: 46px; height: 46px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.box-card .bc-icon img { max-width: 46px; max-height: 46px; object-fit: contain; }
.box-card .bc-titlewrap { flex: 1; min-width: 0; }
.box-card .bc-title { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.box-card .bc-title h3 { margin: 0; font-size: 1.02rem; }
.box-card .bc-chance { color: var(--text-muted); font-size: .8rem; margin-top: .15rem; display: flex; align-items: center; gap: .35rem; }
.box-card .bc-chance::before { content: "\1F381"; font-size: .8rem; }

.box-badge { font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .15rem .5rem; border-radius: var(--radius-sm); white-space: nowrap; border: 1px solid transparent; }
.box-badge.t-excellent { background: rgba(251,191,36,.12); color: #fcd34d; border-color: rgba(251,191,36,.35); }
.box-badge.t-normal { background: var(--elevated); color: var(--text-toned); border-color: var(--border); }
.box-badge.t-archangel { background: rgba(56,189,248,.12); color: #7dd3fc; border-color: rgba(56,189,248,.35); }
.box-badge.t-top { background: var(--primary-soft); color: var(--primary-300); border-color: var(--primary-40); }
.box-badge.t-pretop { background: rgba(192,132,252,.12); color: #d8b4fe; border-color: rgba(192,132,252,.35); }

.box-sec { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: .85rem; }
.box-sec h4 { margin: 0 0 .55rem; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.box-armor { display: flex; flex-direction: column; gap: .4rem; }
.box-armor .ba-row { display: grid; grid-template-columns: 110px 1fr; gap: .5rem; font-size: .85rem; }
.box-armor .ba-cls { font-weight: 800; font-size: .8rem; }
.box-armor .ba-items { color: var(--text-toned); }
.box-text { color: var(--text-toned); font-size: .85rem; line-height: 1.55; }
.box-wpn { display: flex; flex-direction: column; gap: .3rem; }
.box-wpn .bw-line { font-size: .84rem; color: var(--text-toned); }
.box-wpn .bw-line b { color: var(--white); font-weight: 600; }

/* class color codes */
.cc-dw { color: #60a5fa; } .cc-dk { color: #f87171; } .cc-elf { color: #34d399; }
.cc-mg { color: #c084fc; } .cc-dl { color: #fb923c; } .cc-rf { color: #f472b6; } .cc-sm { color: #818cf8; }
.cc-sep { color: var(--text-dim); font-weight: 600; }

@media (max-width: 860px) {
    .box-grid { grid-template-columns: 1fr; }
}