/* ============================================================
   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, .box-style4 > .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; scroll-margin-top: calc(var(--header-h) + 1rem); }
.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; }
}

/* ============================================================
   ACCOUNT PANEL — Balance box (WCoin / WCoin P / Goblin Point)
   ============================================================ */
.balance-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.balance-card {
    background: #121214; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1.25rem 1.6rem; min-height: 92px;
    display: flex; flex-direction: column; justify-content: center;
}
.balance-card .bal-label {
    font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-dim); margin-bottom: .35rem;
}
.balance-card .bal-amount { font-size: 1.9rem; font-weight: 800; color: var(--white); line-height: 1; font-variant-numeric: tabular-nums; }
.balance-card.is-primary {
    border-color: var(--primary);
    background: linear-gradient(135deg, rgba(249,115,22,.10), rgba(249,115,22,.02));
}
.balance-card.is-primary .bal-label { color: var(--primary-300); }
.balance-card.is-primary .bal-amount { color: var(--primary); }

@media (max-width: 760px) {
    .balance-grid { grid-template-columns: 1fr; }
}
@media (min-width: 561px) and (max-width: 760px) {
    .balance-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   WIKI menu — Guides dropdown group
   ============================================================ */
.wiki-group { margin-top: .15rem; }
.wiki-group-toggle {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    gap: .5rem; padding: .6rem .8rem; border: 0; background: transparent; cursor: pointer;
    border-radius: var(--radius-sm); color: var(--text-muted); font-size: .88rem; font-weight: 500;
    font-family: inherit;
}
.wiki-group-toggle .g-left { display: flex; align-items: center; gap: .5rem; }
.wiki-group-toggle:hover { color: var(--white); }
.wiki-group-toggle.is-active { color: var(--primary-300); }
.wiki-group-toggle .chev { transition: transform .2s ease; }
.wiki-group.open .wiki-group-toggle .chev { transform: rotate(180deg); }
.wiki-submenu { display: none; padding: .15rem 0 .15rem .85rem; margin-left: .35rem; border-left: 1px solid var(--border); }
.wiki-group.open .wiki-submenu { display: block; }
.wiki-submenu a { display: block; padding: .5rem .7rem; border-radius: var(--radius-sm); color: var(--text-muted); font-size: .85rem; }
.wiki-submenu a:hover { color: var(--white); }
.wiki-submenu a.is-active { background: var(--primary-soft); color: var(--primary-300); }

/* ============================================================
   QUESTS
   ============================================================ */
.quest-stats { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; }
.qstat { display: inline-flex; align-items: center; gap: .4rem; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: .3rem .7rem; font-size: .8rem; }
.qstat img { width: 16px; height: 16px; object-fit: contain; }
.qstat .qs-l { color: var(--text-muted); }
.qstat .qs-v { color: var(--white); font-weight: 700; }
.quest-searchbar { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.quest-searchbar input { flex: 1; max-width: 26rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .55rem .85rem; color: var(--text); font-size: .9rem; }
.quest-searchbar input:focus { outline: none; border-color: var(--primary-40); }
.quest-count { color: var(--text-dim); font-size: .85rem; font-variant-numeric: tabular-nums; }

.quest { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: .6rem; }
.quest.is-milestone { border-color: var(--primary-40); background: linear-gradient(180deg, rgba(249,115,22,.05), transparent); }
.q-top { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.q-num { color: var(--text-dim); font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.q-name { font-weight: 700; color: var(--white); }
.quest.is-milestone .q-num { color: var(--primary); }
.q-badge { margin-left: auto; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--primary-300); background: var(--primary-soft); border: 1px solid var(--primary-40); border-radius: var(--radius-sm); padding: .12rem .5rem; }
.q-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.q-h { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); margin-bottom: .4rem; }
.q-line { font-size: .86rem; color: var(--text-toned); padding: .12rem 0; }
.q-line.q-cls { display: flex; align-items: center; gap: .5rem; }
.q-code { display: inline-block; min-width: 30px; font-weight: 800; font-size: .76rem; }

@media (max-width: 620px){ .q-cols { grid-template-columns: 1fr; gap: .75rem; } }

/* ============================================================
   GUIDE: Item Level Bonuses
   ============================================================ */
.ilb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.ilb-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.ilb-card h3 { margin: 0; padding: .9rem 1.1rem .25rem; font-size: 1rem; }
.ilb-sub { margin: 0; padding: 0 1.1rem .8rem; color: var(--text-muted); font-size: .78rem; border-bottom: 1px solid var(--border); }
.ilb-row { display: flex; align-items: center; gap: .6rem; padding: .5rem 1.1rem; border-bottom: 1px solid var(--border); }
.ilb-row:last-child { border-bottom: 0; }
.ilb-lvl { flex-shrink: 0; min-width: 34px; text-align: center; background: var(--elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .72rem; font-weight: 800; padding: .1rem .3rem; color: var(--text-toned); }
.ilb-txt { font-size: .82rem; color: var(--text-toned); }
.ilb-row.is-top { background: rgba(249,115,22,.06); }
.ilb-row.is-top .ilb-lvl { background: var(--primary-soft); border-color: var(--primary-40); color: var(--primary-300); }
.ilb-row.is-top .ilb-txt { color: var(--primary-300); font-weight: 600; }

/* ============================================================
   GUIDE: Hotkeys & Commands
   ============================================================ */
.hk-sec { padding: .5rem 0 1.25rem; }
.hk-sec h2 { font-size: 1.2rem; margin: 0 0 1rem; }
.hk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; }
.hk-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1rem; }
.hk-top { display: flex; align-items: center; gap: .55rem; margin-bottom: .35rem; }
.hk-key { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .72rem; font-weight: 700; background: var(--elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .15rem .45rem; color: var(--primary-300); white-space: nowrap; }
.hk-name { font-weight: 700; color: var(--white); font-size: .92rem; }
.hk-desc { margin: 0; color: var(--text-muted); font-size: .82rem; line-height: 1.45; }

/* ============================================================
   GUIDE: VIP Levels
   ============================================================ */
.vip-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.vip-tier { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.1rem 1.25rem; }
.vip-tier h3 { margin: 0 0 .5rem; font-size: 1.1rem; }
.vip-tier p { margin: 0; color: var(--text-muted); font-size: .85rem; }

/* ============================================================
   GUIDE: Jewels
   ============================================================ */
.jw-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 1rem; }
.jw-head { display: flex; align-items: center; gap: .85rem; padding: .9rem 1.25rem; border-bottom: 1px solid var(--border); background: rgba(0,0,0,.2); }
.jw-head img { width: 30px; height: 30px; object-fit: contain; }
.jw-head h3 { margin: 0; font-size: 1.05rem; }
.jw-sub { color: var(--text-muted); font-size: .8rem; }
.jw-body { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 1.5rem; padding: 1.1rem 1.25rem; }
.jw-col p { margin: 0 0 .6rem; color: var(--text-toned); font-size: .86rem; }
.jw-h { font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim); margin-bottom: .55rem; }
.jw-bul, .jw-tac { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.jw-bul li, .jw-tac li { display: flex; gap: .5rem; font-size: .84rem; color: var(--text-toned); }
.jw-bul li::before, .jw-tac li::before { content: "\2713"; color: var(--primary); flex-shrink: 0; }
.jw-rates { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .5rem; }
.jw-rate { display: flex; align-items: center; justify-content: space-between; background: var(--elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .35rem .6rem; font-size: .82rem; }
.jw-rate span { color: var(--text-muted); } .jw-rate b { color: var(--white); }
.jw-note { color: var(--text-dim); font-size: .78rem; line-height: 1.45; }
.jw-none { color: var(--text-dim); font-size: .82rem; }
.jw-path { list-style: none; counter-reset: jp; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.jw-path li { counter-increment: jp; display: flex; align-items: center; gap: .75rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .7rem 1rem; font-size: .9rem; color: var(--text-toned); }
.jw-path li::before { content: counter(jp); width: 22px; height: 22px; flex-shrink: 0; 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; }

/* common mistakes grid (jewels + castle) */
.mis-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.mis-card { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--danger); border-radius: var(--radius); padding: .9rem 1.1rem; }
.mis-card h4 { margin: 0 0 .3rem; font-size: .92rem; color: var(--white); }
.mis-card p { margin: 0; color: var(--text-muted); font-size: .82rem; line-height: 1.45; }

/* ============================================================
   GUIDE: Castle Siege
   ============================================================ */
.cs-goal { background: linear-gradient(135deg, rgba(249,115,22,.1), rgba(249,115,22,.02)); border: 1px solid var(--primary-40); border-radius: var(--radius-lg); padding: 1.1rem 1.25rem; margin-bottom: 1.5rem; }
.cs-goal-h { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--primary-300); margin-bottom: .35rem; }
.cs-goal p { margin: 0; color: var(--text-toned); font-size: .92rem; }
.cs-sec { padding: .5rem 0 1.25rem; }
.cs-sec h2 { font-size: 1.25rem; margin: 0 0 1rem; }
.cs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .85rem; }
.cs-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1.1rem; }
.cs-card h4 { margin: 0 0 .35rem; font-size: .95rem; color: var(--white); }
.cs-card p { margin: 0; color: var(--text-muted); font-size: .85rem; line-height: 1.5; }
.cs-card.cs-plain { background: var(--elevated); }
.cs-bul { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.cs-bul li { display: flex; gap: .5rem; font-size: .83rem; color: var(--text-toned); }
.cs-bul li::before { content: "\25B8"; color: var(--primary); flex-shrink: 0; }
.cs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.cs-list li { display: flex; gap: .6rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem .9rem; font-size: .86rem; color: var(--text-toned); }
.cs-list li::before { content: "\2713"; color: var(--primary); flex-shrink: 0; }

@media (max-width: 980px){
    .ilb-grid { grid-template-columns: 1fr 1fr; }
    .hk-grid, .mis-grid { grid-template-columns: 1fr 1fr; }
    .vip-tiers { grid-template-columns: 1fr; }
    .jw-body { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 620px){
    .ilb-grid, .hk-grid, .mis-grid, .cs-grid { grid-template-columns: 1fr; }
}

.cs-note { display: flex; gap: .7rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem 1.25rem; margin-top: 1rem; color: var(--text-muted); }
.cs-note svg { color: var(--primary); flex-shrink: 0; margin-top: .15rem; }
.cs-note strong { color: var(--white); font-size: .9rem; }
.cs-note p { margin: .25rem 0 0; font-size: .85rem; line-height: 1.5; }



/* ================================================================
   ELIAMU WEBSHOP — complete theme add-on  (muby dark/orange)
   Append this to the END of  assets/muby/css/style.css
   Covers: item grid, promo banner, and the buy dialog (jQuery-UI).
   ================================================================ */

/* ---- item grid: flatten DMN's table into ONE continuous card grid ---- */
.item_table { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; width: 100%; }
.item_table > tbody { display: contents; }
.item_table > tbody > tr { display: contents; }
.item_table > tbody > tr > td { display: block; padding: 0; }
.each_item { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.each_item:hover { transform: translateY(-4px); border-color: var(--primary-40); box-shadow: 0 20px 44px -24px rgba(0,0,0,.85), 0 0 0 1px var(--primary-40); }
.each_item .item_name { padding: 12px 12px 0; text-align: center; }
.each_item .items a { color: var(--white); font-weight: 700; font-size: .95rem; text-decoration: none; }
.each_item:hover .items a { color: var(--primary-300); }
.each_item .item_bg { text-align: center; padding: 18px 12px 22px; background: radial-gradient(circle at 50% 35%, rgba(249,115,22,.07), transparent 70%); }
.each_item .item_image { display: inline-block; cursor: pointer; }
.each_item .item_image img { max-width: 100%; height: auto; image-rendering: -webkit-optimize-contrast; }
.each_item .item_footer { height: 4px; background: linear-gradient(90deg, var(--primary-600), var(--primary)); opacity: 0; transition: opacity .18s ease; }
.each_item:hover .item_footer { opacity: 1; }

/* ---- promo / discount banner ---- */
.discount_notice { position: relative; display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; padding: 1rem 1.25rem 1rem 1rem; background: var(--primary-soft); border: 1px solid var(--primary-40); border-radius: var(--radius-lg); color: var(--primary-300); font-weight: 600; }
.discount_notice .ribbon-discount-green .ribbon-green { background: var(--primary); color: #1a1208; font-weight: 800; padding: .3rem .8rem; border-radius: 999px; font-size: .8rem; letter-spacing: .03em; }
.discount_notice .content { color: var(--text-toned); }

@media (max-width: 900px) { .item_table { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .item_table { grid-template-columns: 1fr; } }

/* ---- buy dialog (jQuery-UI popup) ---- */
.ui-widget-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.65) !important; opacity: 1 !important; }
.ui-dialog { background: var(--surface) !important; border: 1px solid var(--border-muted) !important; border-radius: var(--radius-xl) !important; box-shadow: 0 30px 80px -20px rgba(0,0,0,.9) !important; padding: 0 !important; overflow: hidden; color: var(--text) !important; font-family: var(--font) !important; }
.ui-dialog .ui-dialog-titlebar { background: var(--elevated) !important; border: 0 !important; border-bottom: 1px solid var(--border) !important; border-radius: 0 !important; padding: .85rem 1.2rem !important; color: var(--white) !important; font-weight: 800 !important; }
.ui-dialog .ui-dialog-title { font-size: 1rem !important; color: var(--white) !important; }
/* close button: hide jQuery-UI's "Close" text + icon, show a clean × */
.ui-dialog .ui-dialog-titlebar-close { right: .7rem !important; width: 28px !important; height: 28px !important; background: transparent !important; border: 1px solid var(--border-muted) !important; border-radius: 8px !important; margin-top: -14px !important; font-size: 0 !important; text-indent: 0 !important; }
.ui-dialog .ui-dialog-titlebar-close .ui-icon, .ui-dialog .ui-dialog-titlebar-close .ui-button-icon-space, .ui-dialog .ui-dialog-titlebar-close span { display: none !important; }
.ui-dialog .ui-dialog-titlebar-close::before { content: "\00d7"; color: var(--text-muted); font-size: 18px; line-height: 26px; display: block; text-align: center; }
.ui-dialog .ui-dialog-titlebar-close:hover { border-color: var(--primary-40) !important; }
.ui-dialog .ui-dialog-titlebar-close:hover::before { color: var(--white); }
.ui-dialog .ui-dialog-content { padding: 1.25rem !important; background: transparent !important; color: var(--text) !important; }

#item_buy { display: flex; gap: 1.5rem; align-items: flex-start; }
#item_buy_left { flex: 0 0 190px; }
#item_image_bg { background: radial-gradient(circle at 50% 35%, rgba(249,115,22,.08), transparent 70%), #141416; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem; text-align: center; margin-bottom: 1rem; }
#item_image_bg img { max-width: 100%; height: auto; }
.item_info { margin-bottom: .5rem; }
.item_info .info { font-size: .85rem; color: var(--text-muted); }
.btimes { color: var(--primary); font-weight: 700; }
.normalcr, .goldcr { color: var(--text-dim); font-size: .8rem; }

#item_buy_right { flex: 1; min-width: 0; display: grid; grid-template-columns: max-content 1fr; gap: .55rem 1rem; align-items: center; }
.opt_title { color: var(--text-muted); font-size: .88rem; }
.opt { color: var(--text-toned); font-size: .88rem; }
#item_buy_right select, #item_buy_right input[type="text"] { width: 100%; background: var(--elevated); border: 1px solid var(--border-muted); color: var(--white); border-radius: var(--radius); padding: .45rem .55rem; font-family: var(--font); font-size: .88rem; }
#item_buy_right input[type="checkbox"] { accent-color: var(--primary); width: 16px; height: 16px; }

/* single-currency buy buttons */
#buy_buttons { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1rem; }
.buy_button { background: var(--primary); color: #1a1208; border: 0; border-radius: var(--radius); padding: .7rem 1.4rem; font-weight: 700; cursor: pointer; font-family: var(--font); font-size: .95rem; }
.buy_button:hover { background: var(--primary-400); }
#add_to_card.buy_button { background: var(--elevated); color: var(--text); }
#add_to_card.buy_button:hover { background: #303034; color: var(--white); }

/* dual-currency inline payment blocks (compact) */
#buy_windows, #add_to_card_windows { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .85rem; padding: .85rem 1rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); }
/* NOTE: scoped to the webshop payment blocks only. Previously these
   were unscoped (.modal-header ...) and leaked into #login_box /
   #select_server, hiding their close (X) button. */
#buy_windows .modal-header, #add_to_card_windows .modal-header { flex: 1 0 100%; display: flex; justify-content: space-between; align-items: center; margin: 0 0 .2rem; }
#buy_windows .modal-header h2, #add_to_card_windows .modal-header h2 { font-size: .82rem; font-weight: 600; color: var(--text-muted); margin: 0; }
#buy_windows .modal-header .close, #add_to_card_windows .modal-header .close { display: none; }
.payment-method-button { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; padding: .5rem .95rem; margin: 0; border-radius: var(--radius); background: var(--elevated); border: 1px solid var(--border-muted); color: var(--text-toned); font-size: .88rem; }
.payment-method-button:hover { border-color: var(--primary-40); color: var(--white); }
.payment-method-button:has(.span_red) { border-color: var(--primary); background: var(--primary-soft); color: var(--white); }
.span_red { color: var(--primary) !important; font-weight: 700; }
.btn-fld { margin: 0 0 0 auto; }
.buttonn { background: var(--primary); color: #1a1208; border: 0; border-radius: var(--radius); padding: .6rem 1.2rem; font-weight: 700; cursor: pointer; font-family: var(--font); font-size: .9rem; }
.buttonn:hover { background: var(--primary-400); }

@media (max-width: 620px){ #item_buy { flex-direction: column; } #item_buy_left { flex: none; width: 100%; } }

/* ============================================================
   Tooltip popover  ( jQuery Tooltip plugin  ->  <div id="tooltip"> )
   Used by: Grand Reset / "View Reward", Market & Warehouse item
   tooltips, Shop card, and Character equipment — anywhere
   App.initializeTooltip() runs.

   The plugin appends #tooltip to <body> and drives its location
   with inline left/top. Without position:absolute those inline
   values do nothing, so the popup collapses into normal flow at
   the bottom of the page as raw text. This restores positioning
   and gives it the muby look.
   ============================================================ */
#tooltip {
    position: absolute;                 /* <- the actual fix: lets inline left/top place it */
    z-index: 99999;                     /* above header, modals (13000) and jQuery-UI dialogs */
    max-width: 340px;
    padding: .72rem .9rem;
    background: var(--surface);
    border: 1px solid var(--border-muted);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    color: var(--text-toned);
    font-family: var(--font);
    font-size: .84rem;
    line-height: 1.55;
    pointer-events: none;               /* never steals the cursor / causes flicker */
    overflow-wrap: anywhere;
}

/* small accent bar so the popover reads as an intentional card */
#tooltip::before {
    content: "";
    position: absolute;
    left: 0; top: .72rem; bottom: .72rem;
    width: 3px;
    border-radius: 3px;
    background: var(--primary);
    opacity: .9;
}

#tooltip h3 {                            /* title line (item tooltips) — hidden for rewards */
    margin: 0 0 .4rem;
    padding: 0 0 .4rem;
    border-bottom: 1px solid var(--border);
    color: var(--white);
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .01em;
}

#tooltip .body { color: var(--text-toned); }

/* reward lines like "WCoin(P) Bonus + 1500" — give the +values pop */
#tooltip .body b,
#tooltip .body strong { color: var(--primary-300); font-weight: 700; }

#tooltip .url {
    display: block;
    margin-top: .4rem;
    color: var(--text-dim);
    font-size: .76rem;
}

/* edge classes the plugin toggles when the popover would overflow */
#tooltip.viewport-right  { /* shifted to the left of the cursor */ }
#tooltip.viewport-bottom { /* shifted above the cursor */ }


/* ============================================================
   COUNTRY FLAG SPRITES  (uses assets/muby/images/flags.png)
   Append to the END of  assets/muby/css/style.css
   ============================================================ */
.f16 .flag{display:inline-block;height: 13px;width: 16px;vertical-align:text-top;line-height:16px;background:url(../images/flags.png) no-repeat;}
.f16 ._African_Union{background-position:0 -16px;}
.f16 ._Arab_League{background-position:0 -32px;}
.f16 ._ASEAN{background-position:0 -48px;}
.f16 ._CARICOM{background-position:0 -64px;}
.f16 ._CIS{background-position:0 -80px;}
.f16 ._Commonwealth{background-position:0 -96px;}
.f16 ._England{background-position:0 -112px;}
.f16 ._European_Union, .f16 .eu{background-position:0 -128px;}
.f16 ._Islamic_Conference{background-position:0 -144px;}
.f16 ._Kosovo{background-position:0 -160px;}
.f16 ._NATO{background-position:0 -176px;}
.f16 ._Northern_Cyprus{background-position:0 -192px;}
.f16 ._Northern_Ireland{background-position:0 -208px;}
.f16 ._Olimpic_Movement{background-position:0 -224px;}
.f16 ._OPEC{background-position:0 -240px;}
.f16 ._Red_Cross{background-position:0 -256px;}
.f16 ._Scotland{background-position:0 -272px;}
.f16 ._Somaliland{background-position:0 -288px;}
.f16 ._Tibet{background-position:0 -304px;}
.f16 ._United_Nations{background-position:0 -320px;}
.f16 ._Wales{background-position:0 -336px;}
.f16 .ad{background-position:0 -352px;}
.f16 .ae{background-position:0 -368px;}
.f16 .af{background-position:0 -384px;}
.f16 .ag{background-position:0 -400px;}
.f16 .ai{background-position:0 -416px;}
.f16 .al{background-position:0 -432px;}
.f16 .am{background-position:0 -448px;}
.f16 .ao{background-position:0 -464px;}
.f16 .aq{background-position:0 -480px;}
.f16 .ar{background-position:0 -496px;}
.f16 .as{background-position:0 -512px;}
.f16 .at{background-position:0 -528px;}
.f16 .au{background-position:0 -544px;}
.f16 .aw{background-position:0 -560px;}
.f16 .ax{background-position:0 -576px;}
.f16 .az{background-position:0 -592px;}
.f16 .ba{background-position:0 -608px;}
.f16 .bb{background-position:0 -624px;}
.f16 .bd{background-position:0 -640px;}
.f16 .be{background-position:0 -656px;}
.f16 .bf{background-position:0 -672px;}
.f16 .bg{background-position:0 -688px;}
.f16 .bh{background-position:0 -704px;}
.f16 .bi{background-position:0 -720px;}
.f16 .bj{background-position:0 -736px;}
.f16 .bm{background-position:0 -752px;}
.f16 .bn{background-position:0 -768px;}
.f16 .bo{background-position:0 -784px;}
.f16 .br{background-position:0 -800px;}
.f16 .bs{background-position:0 -816px;}
.f16 .bt{background-position:0 -832px;}
.f16 .bw{background-position:0 -848px;}
.f16 .by{background-position:0 -864px;}
.f16 .bz{background-position:0 -880px;}
.f16 .ca{background-position:0 -896px;}
.f16 .cg{background-position:0 -912px;}
.f16 .cf{background-position:0 -928px;}
.f16 .cd{background-position:0 -944px;}
.f16 .ch{background-position:0 -960px;}
.f16 .ci{background-position:0 -976px;}
.f16 .ck{background-position:0 -992px;}
.f16 .cl{background-position:0 -1008px;}
.f16 .cm{background-position:0 -1024px;}
.f16 .cn{background-position:0 -1040px;}
.f16 .co{background-position:0 -1056px;}
.f16 .cr{background-position:0 -1072px;}
.f16 .cu{background-position:0 -1088px;}
.f16 .cv{background-position:0 -1104px;}
.f16 .cy{background-position:0 -1120px;}
.f16 .cz{background-position:0 -1136px;}
.f16 .de{background-position:0 -1152px;}
.f16 .dj{background-position:0 -1168px;}
.f16 .dk{background-position:0 -1184px;}
.f16 .dm{background-position:0 -1200px;}
.f16 .do{background-position:0 -1216px;}
.f16 .dz{background-position:0 -1232px;}
.f16 .ec{background-position:0 -1248px;}
.f16 .ee{background-position:0 -1264px;}
.f16 .eg{background-position:0 -1280px;}
.f16 .eh{background-position:0 -1296px;}
.f16 .er{background-position:0 -1312px;}
.f16 .es{background-position:0 -1328px;}
.f16 .et{background-position:0 -1344px;}
.f16 .fi{background-position:0 -1360px;}
.f16 .fj{background-position:0 -1376px;}
.f16 .fm{background-position:0 -1392px;}
.f16 .fo{background-position:0 -1408px;}
.f16 .fr{background-position:0 -1424px;}  
.f16 .bl, .f16 .cp, .f16 .mf, .f16 .yt{background-position:0 -1424px;}
.f16 .ga{background-position:0 -1440px;}
.f16 .gb{background-position:0 -1456px;}  
.f16 .sh{background-position:0 -1456px;}
.f16 .gd{background-position:0 -1472px;}
.f16 .ge{background-position:0 -1488px;}
.f16 .gg{background-position:0 -1504px;}
.f16 .gh{background-position:0 -1520px;}
.f16 .gi{background-position:0 -1536px;}
.f16 .gl{background-position:0 -1552px;}
.f16 .gm{background-position:0 -1568px;}
.f16 .gn{background-position:0 -1584px;}
.f16 .gp{background-position:0 -1600px;}
.f16 .gq{background-position:0 -1616px;}
.f16 .gr{background-position:0 -1632px;}
.f16 .gt{background-position:0 -1648px;}
.f16 .gu{background-position:0 -1664px;}
.f16 .gw{background-position:0 -1680px;}
.f16 .gy{background-position:0 -1696px;}
.f16 .hk{background-position:0 -1712px;}
.f16 .hn{background-position:0 -1728px;}
.f16 .hr{background-position:0 -1744px;}
.f16 .ht{background-position:0 -1760px;}
.f16 .hu{background-position:0 -1776px;}
.f16 .id{background-position:0 -1792px;}
.f16 .mc{background-position:0 -1792px;}
.f16 .ie{background-position:0 -1808px;}
.f16 .il{background-position:0 -1824px;}
.f16 .im{background-position:0 -1840px;}
.f16 .in{background-position:0 -1856px;}
.f16 .iq{background-position:0 -1872px;}
.f16 .ir{background-position:0 -1888px;}
.f16 .is{background-position:0 -1904px;}
.f16 .it{background-position:0 -1920px;}
.f16 .je{background-position:0 -1936px;}
.f16 .jm{background-position:0 -1952px;}
.f16 .jo{background-position:0 -1968px;}
.f16 .jp{background-position:0 -1984px;}
.f16 .ke{background-position:0 -2000px;}
.f16 .kg{background-position:0 -2016px;}
.f16 .kh{background-position:0 -2032px;}
.f16 .ki{background-position:0 -2048px;}
.f16 .km{background-position:0 -2064px;}
.f16 .kn{background-position:0 -2080px;}
.f16 .kp{background-position:0 -2096px;}
.f16 .kr{background-position:0 -2112px;}
.f16 .kw{background-position:0 -2128px;}
.f16 .ky{background-position:0 -2144px;}
.f16 .kz{background-position:0 -2160px;}
.f16 .la{background-position:0 -2176px;}
.f16 .lb{background-position:0 -2192px;}
.f16 .lc{background-position:0 -2208px;}
.f16 .li{background-position:0 -2224px;}
.f16 .lk{background-position:0 -2240px;}
.f16 .lr{background-position:0 -2256px;}
.f16 .ls{background-position:0 -2272px;}
.f16 .lt{background-position:0 -2288px;}
.f16 .lu{background-position:0 -2304px;}
.f16 .lv{background-position:0 -2320px;}
.f16 .ly{background-position:0 -2336px;}
.f16 .ma{background-position:0 -2352px;}
.f16 .md{background-position:0 -2368px;}
.f16 .me{background-position:0 -2384px;}
.f16 .mg{background-position:0 -2400px;}
.f16 .mh{background-position:0 -2416px;}
.f16 .mk{background-position:0 -2432px;}
.f16 .ml{background-position:0 -2448px;}
.f16 .mm{background-position:0 -2464px;}
.f16 .mn{background-position:0 -2480px;}
.f16 .mo{background-position:0 -2496px;}
.f16 .mq{background-position:0 -2512px;}
.f16 .mr{background-position:0 -2528px;}
.f16 .ms{background-position:0 -2544px;}
.f16 .mt{background-position:0 -2560px;}
.f16 .mu{background-position:0 -2576px;}
.f16 .mv{background-position:0 -2592px;}
.f16 .mw{background-position:0 -2608px;}
.f16 .mx{background-position:0 -2624px;}
.f16 .my{background-position:0 -2640px;}
.f16 .mz{background-position:0 -2656px;}
.f16 .na{background-position:0 -2672px;}
.f16 .nc{background-position:0 -2688px;}
.f16 .ne{background-position:0 -2704px;}
.f16 .ng{background-position:0 -2720px;}
.f16 .ni{background-position:0 -2736px;}
.f16 .nl{background-position:0 -2752px;}  
.f16 .bq{background-position:0 -2752px;}
.f16 .no{background-position:0 -2768px;}  
.f16 .bv, .f16 .nq, .f16 .sj{background-position:0 -2768px;}
.f16 .np{background-position:0 -2784px;}
.f16 .nr{background-position:0 -2800px;}
.f16 .nz{background-position:0 -2816px;}
.f16 .om{background-position:0 -2832px;}
.f16 .pa{background-position:0 -2848px;}
.f16 .pe{background-position:0 -2864px;}
.f16 .pf{background-position:0 -2880px;}
.f16 .pg{background-position:0 -2896px;}
.f16 .ph{background-position:0 -2912px;}
.f16 .pk{background-position:0 -2928px;}
.f16 .pl{background-position:0 -2944px;}
.f16 .pr{background-position:0 -2960px;}
.f16 .ps{background-position:0 -2976px;}
.f16 .pt{background-position:0 -2992px;}
.f16 .pw{background-position:0 -3008px;}
.f16 .py{background-position:0 -3024px;}
.f16 .qa{background-position:0 -3040px;}
.f16 .re{background-position:0 -3056px;}
.f16 .ro{background-position:0 -3072px;}
.f16 .rs{background-position:0 -3088px;}
.f16 .ru{background-position:0 -3104px;}
.f16 .rw{background-position:0 -3120px;}
.f16 .sa{background-position:0 -3136px;}
.f16 .sb{background-position:0 -3152px;}
.f16 .sc{background-position:0 -3168px;}
.f16 .sd{background-position:0 -3184px;}
.f16 .se{background-position:0 -3200px;}
.f16 .sg{background-position:0 -3216px;}
.f16 .si{background-position:0 -3232px;}
.f16 .sk{background-position:0 -3248px;}
.f16 .sl{background-position:0 -3264px;}
.f16 .sm{background-position:0 -3280px;}
.f16 .sn{background-position:0 -3296px;}
.f16 .so{background-position:0 -3312px;}
.f16 .sr{background-position:0 -3328px;}
.f16 .st{background-position:0 -3344px;}
.f16 .sv{background-position:0 -3360px;}
.f16 .sy{background-position:0 -3376px;}
.f16 .sz{background-position:0 -3392px;}
.f16 .tc{background-position:0 -3408px;}
.f16 .td{background-position:0 -3424px;}
.f16 .tg{background-position:0 -3440px;}
.f16 .th{background-position:0 -3456px;}
.f16 .tj{background-position:0 -3472px;}
.f16 .tl{background-position:0 -3488px;}
.f16 .tm{background-position:0 -3504px;}
.f16 .tn{background-position:0 -3520px;}
.f16 .to{background-position:0 -3536px;}
.f16 .tr{background-position:0 -3552px;}
.f16 .tt{background-position:0 -3568px;}
.f16 .tv{background-position:0 -3584px;}
.f16 .tw{background-position:0 -3600px;}
.f16 .tz{background-position:0 -3616px;}
.f16 .ua{background-position:0 -3632px;}
.f16 .ug{background-position:0 -3648px;}
.f16 .us{background-position:0 -3664px;}
.f16 .uy{background-position:0 -3680px;}
.f16 .uz{background-position:0 -3696px;}
.f16 .va{background-position:0 -3712px;}
.f16 .vc{background-position:0 -3728px;}
.f16 .ve{background-position:0 -3744px;}
.f16 .vg{background-position:0 -3760px;}
.f16 .vi{background-position:0 -3776px;}
.f16 .vn{background-position:0 -3792px;}
.f16 .vu{background-position:0 -3808px;}
.f16 .ws{background-position:0 -3824px;}
.f16 .ye{background-position:0 -3840px;}
.f16 .za{background-position:0 -3856px;}
.f16 .zm{background-position:0 -3872px;}
.f16 .zw{background-position:0 -3888px;}
.f16 .sx{background-position:0 -3904px;}
.f16 .cw{background-position:0 -3920px;}
.f16 .ss{background-position:0 -3936px;}
.f16 .nu{background-position:0 -3952px;}