@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800;900&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500&family=Noto+Kufi+Arabic:wght@400;600;700&display=swap');

/* ============================================================================
   DEADLY WORLD
   ----------------------------------------------------------------------------
   Built once, from nothing, with no runtime theme switching. The palette is a
   decision, not a setting: a switcher that recolours the site makes every
   composition below a compromise that has to survive four palettes, and the
   result reads as a template. One palette, chosen and committed to.

   The reference is a lacquered imperial object rather than a games portal:
   warm black, oxidised gold hairlines, one seal red. Structure comes from
   rules and frames, never from glow, blur or rounded corners. Display type is
   carved (Cinzel), body is a book face (Cormorant), and numbers are monospaced
   so a ledger column lines up.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
    /* ── Ink ────────────────────────────────────────────────────────────── */
    --ink:#0c0a09;              /* the page                                  */
    --ink-2:#14100e;            /* raised surface                            */
    --ink-3:#1b1613;            /* raised twice, hover                       */
    --ink-4:#241d18;            /* wells, inputs                             */

    /* ── Metal ──────────────────────────────────────────────────────────── */
    --gold:#b98f2e;             /* the structural line                       */
    --gold-lit:#d9b455;         /* headings, hover                           */
    --gold-hi:#f0dda6;          /* highlight, used rarely                    */
    --rule:rgba(185,143,46,.26);
    --rule-lit:rgba(185,143,46,.46);

    /* ── Seal ───────────────────────────────────────────────────────────── */
    --seal:#96201a;
    --seal-lit:#c4382a;

    /* ── Paper ──────────────────────────────────────────────────────────── */
    --text:#e9dfcd;
    --text-2:#b6a993;
    --text-3:#7d7263;

    --jade:#4d8a6a;             /* the only cool note: online, success       */

    --f-display:'Cinzel',serif;
    --f-body:'Cormorant Garamond',Georgia,serif;
    --f-mono:'IBM Plex Mono',ui-monospace,monospace;

    --shell:1220px;
    --step:8px;
}

html[dir="rtl"] body,html[lang="ar"] body{font-family:'Noto Kufi Arabic',sans-serif}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{font-family:'Noto Kufi Arabic',sans-serif}

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

body{
    font-family:var(--f-body);
    font-size:17px;                    /* a book face needs the size */
    line-height:1.75;
    color:var(--text-2);
    background:var(--ink);
    min-height:100vh;
    overflow-x:hidden;
    /* A woven ground, barely there. Two hairline grids at odd angles read as
       silk rather than as a UI grid overlay. */
    background-image:
        repeating-linear-gradient(58deg,rgba(185,143,46,.028) 0 1px,transparent 1px 7px),
        repeating-linear-gradient(-58deg,rgba(185,143,46,.02) 0 1px,transparent 1px 9px),
        radial-gradient(120% 80% at 50% -10%,rgba(150,32,26,.10),transparent 60%);
    background-attachment:fixed;
}

::selection{background:var(--gold);color:var(--ink)}

/* Left over from the old markup — kept as no-ops so no PHP needed touching. */
.vignette,.grid-overlay{display:none}

/* ── Rhythm ─────────────────────────────────────────────────────────────── */
.content,.form-content,.gm-wrap,.pp-wrap,.vote-wrap{
    width:100%;max-width:var(--shell);margin:0 auto;padding:0 24px;
}
.form-content{max-width:560px}

img{max-width:100%;height:auto}

/* ── Type ───────────────────────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--f-display);color:var(--gold-lit);font-weight:700;line-height:1.25}
h1{font-size:clamp(26px,4.6vw,44px);letter-spacing:.06em}
h2{font-size:clamp(21px,3.2vw,31px);letter-spacing:.09em}
h3{font-size:19px;letter-spacing:.03em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
a{color:var(--gold-lit);text-decoration:none;transition:color .16s}
a:hover{color:var(--gold-hi)}

.section-label,.hero-eyebrow,.imp-sub,.label,.lbl,.cd-eyebrow,.cd-lbl,.imp-date,.u{
    font-family:var(--f-mono);font-size:10.5px;letter-spacing:.24em;
    text-transform:uppercase;color:var(--text-3);
}

/* Numbers are always monospaced — columns must line up. */
.number,.imp-price,.cd-num,.cd-date,.imp-cell .n,.pts,.cnt,.val,.group-count{
    font-family:var(--f-mono);font-variant-numeric:tabular-nums;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
header{
    position:sticky;top:0;z-index:60;
    display:flex;align-items:center;gap:26px;flex-wrap:wrap;
    padding:14px 30px;
    background:rgba(12,10,9,.92);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--rule);
}
header::after{
    /* the thread of gold under the bar */
    content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.5;
}

.logo{display:flex;align-items:center;gap:13px;text-decoration:none}
.logo-icon{flex:none}
.logo-text-wrap{display:flex;flex-direction:column;line-height:1.1}
.logo-name{
    font-family:var(--f-display);font-weight:800;font-size:19px;
    letter-spacing:.14em;color:var(--gold-lit);text-transform:uppercase;
}
.logo-game{
    font-family:var(--f-mono);font-size:9px;letter-spacing:.32em;
    color:var(--text-3);text-transform:uppercase;margin-top:3px;
}

nav{margin-inline-start:auto}
nav ul{display:flex;gap:2px;list-style:none;flex-wrap:wrap}
nav ul li a{
    display:block;padding:9px 16px;
    font-family:var(--f-display);font-weight:600;font-size:12.5px;
    letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);
    border:1px solid transparent;transition:color .16s,border-color .16s,background .16s;
}
nav ul li a:hover{color:var(--gold-lit);background:rgba(185,143,46,.07)}
nav ul li.active a{color:var(--gold-lit);border-color:var(--rule);background:rgba(185,143,46,.09)}

.top-panel_right{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.header-player-name{
    font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;
    color:var(--gold-lit);padding-inline-end:6px;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.button,.btn-3d,.btn-outline,.btn-danger,.btn-save,.btn-test,.btn-approve,.btn-reject,
.copy-btn,.vote-btn,.pp-btn,input[type="submit"],button[type="submit"]{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    padding:11px 24px;cursor:pointer;text-decoration:none;
    font-family:var(--f-display);font-weight:600;font-size:12.5px;
    letter-spacing:.13em;text-transform:uppercase;
    color:var(--text);background:transparent;
    border:1px solid var(--rule);
    transition:color .16s,background .16s,border-color .16s;
}
.button:hover,.btn-outline:hover,.copy-btn:hover{
    color:var(--gold-lit);border-color:var(--rule-lit);background:rgba(185,143,46,.08);
}

/* The one filled button on any given view. */
.btn-3d,.btn-save,.btn-approve,.vote-btn,.pp-btn,input[type="submit"],button[type="submit"]{
    color:var(--gold-hi);
    background:linear-gradient(180deg,rgba(185,143,46,.20),rgba(185,143,46,.06));
    border-color:var(--rule-lit);
}
.btn-3d:hover,.btn-save:hover,.btn-approve:hover,.vote-btn:hover,.pp-btn:hover,
input[type="submit"]:hover,button[type="submit"]:hover{
    color:var(--ink);background:var(--gold);border-color:var(--gold-lit);
}
.btn-3d:active,input[type="submit"]:active,button[type="submit"]:active{transform:translateY(1px)}

.btn-danger,.btn-reject{color:var(--seal-lit);border-color:rgba(150,32,26,.5)}
.btn-danger:hover,.btn-reject:hover{color:#fff;background:var(--seal);border-color:var(--seal-lit)}

.disabled,[disabled],.vote-btn.disabled{
    opacity:.4;pointer-events:none;filter:grayscale(.5);
}

/* ── Forms ──────────────────────────────────────────────────────────────── */
form{width:100%}
input[type="text"],input[type="password"],input[type="email"],input[type="number"],
input[type="datetime-local"],input[type="date"],select,textarea{
    width:100%;padding:13px 15px;
    font-family:var(--f-body);font-size:16px;color:var(--text);
    background:var(--ink-4);border:1px solid var(--rule);
    transition:border-color .16s,background .16s;
}
input:focus,select:focus,textarea:focus{
    outline:none;border-color:var(--gold);background:var(--ink-3);
}
input::placeholder,textarea::placeholder{color:var(--text-3);opacity:.8}
label{display:block;margin-bottom:7px}
textarea{resize:vertical;min-height:110px;line-height:1.8}

/* ── Panels ─────────────────────────────────────────────────────────────── */
/* One surface treatment, used everywhere. Corner ticks instead of a border
   radius: the frame reads as mounted metal rather than as a card component. */
.glass-card,.panel-card,.donation-card,.store-item,.vote-card,.wa-card,.ew-card,
.bn-panel,.terminal-box,.note-box,.rate-box,.addr-box,.cooldown-box,.admin-section{
    position:relative;background:var(--ink-2);border:1px solid var(--rule);
    padding:26px 26px 28px;transition:background .2s,border-color .2s;
}
.glass-card::before,.glass-card::after,
.donation-card::before,.donation-card::after,
.store-item::before,.store-item::after,
.vote-card::before,.vote-card::after{
    content:'';position:absolute;width:11px;height:11px;
    border:1px solid var(--gold);opacity:.5;transition:opacity .2s;
}
.glass-card::before,.donation-card::before,.store-item::before,.vote-card::before{
    top:-1px;inset-inline-start:-1px;border-inline-end:none;border-bottom:none;
}
.glass-card::after,.donation-card::after,.store-item::after,.vote-card::after{
    bottom:-1px;inset-inline-end:-1px;border-inline-start:none;border-top:none;
}
.glass-card:hover,.donation-card:hover,.store-item:hover,.vote-card:hover{
    background:var(--ink-3);border-color:var(--rule-lit);
}
.glass-card:hover::before,.glass-card:hover::after,
.donation-card:hover::before,.donation-card:hover::after,
.store-item:hover::before,.store-item:hover::after,
.vote-card:hover::before,.vote-card:hover::after{opacity:1}

.glass-card h3,.panel-card h3,.donation-card h3{margin-bottom:11px}

/* ── Section headings ───────────────────────────────────────────────────── */
.block-title-news{margin:62px 0 30px}
.divider-row{display:flex;align-items:center;gap:22px}
.divider-row .line{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--rule),transparent)}
.divider-row h1{
    font-size:clamp(19px,3.2vw,29px);letter-spacing:.16em;text-transform:uppercase;
    white-space:nowrap;text-align:center;
}
/* A small lozenge either side of a heading — the page's one ornament. */
.divider-row h1::before,.divider-row h1::after{
    content:'';display:inline-block;width:6px;height:6px;
    background:var(--gold);transform:rotate(45deg);vertical-align:middle;
    margin:0 16px;opacity:.75;
}

.imp-head{
    display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
    padding-bottom:13px;margin-bottom:26px;border-bottom:1px solid var(--rule);
}
.imp-head h2{margin:0}
.imp-block{margin:64px 0}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero-section{
    position:relative;text-align:center;
    padding:clamp(60px,11vw,120px) 20px clamp(48px,8vw,84px);
}
.hero-eyebrow{margin-bottom:18px}
.hero-title-wrap h1,.hero-title-wrap{
    font-family:var(--f-display);font-weight:900;
    font-size:clamp(38px,9vw,86px);line-height:1.02;letter-spacing:.04em;
    text-transform:uppercase;color:var(--gold-lit);
}
.hero-subtitle-row{
    margin-top:20px;font-family:var(--f-display);font-weight:600;
    font-size:clamp(13px,2.2vw,17px);letter-spacing:.3em;text-transform:uppercase;
    color:var(--text-2);
}
.hero-tagline{
    margin-top:16px;min-height:1.9em;font-size:clamp(16px,2.4vw,20px);
    font-style:italic;color:var(--text-2);
}
/* A single rule beneath the hero, the width of the title. */
.hero-section::after{
    content:'';display:block;width:min(420px,70%);height:1px;margin:38px auto 0;
    background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.6;
}

/* ── Counters ───────────────────────────────────────────────────────────── */
.stat-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    gap:1px;background:var(--rule);border:1px solid var(--rule);margin:42px 0;
}
.stat-grid-single{grid-template-columns:minmax(200px,300px);justify-content:center}
.stat-card{background:var(--ink-2);padding:32px 20px;text-align:center;transition:background .2s}
.stat-card:hover{background:var(--ink-3)}
.stat-card .number{
    display:block;font-size:clamp(30px,5vw,46px);font-weight:500;line-height:1;
    color:var(--gold-hi);
}
.stat-card .label{display:block;margin-top:11px}
.status-dot,.wa-status-dot,.dot-yellow{
    display:inline-block;width:7px;height:7px;background:var(--jade);
    margin-inline-end:9px;transform:rotate(45deg);
}
.dot-yellow{background:var(--gold)}

/* ── Features ───────────────────────────────────────────────────────────── */
.features-grid,.store-grid,.donation-grid,.vote-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;
}
.feature-card{
    position:relative;background:var(--ink-2);border:1px solid var(--rule);
    padding:30px 26px;transition:background .2s,border-color .2s;
}
.feature-card:hover{background:var(--ink-3);border-color:var(--rule-lit)}
.feature-icon{
    display:flex;align-items:center;justify-content:center;
    width:46px;height:46px;margin-bottom:18px;
    border:1px solid var(--rule);color:var(--gold);
}
.feature-card h3{margin-bottom:9px}
.fc-shimmer{display:none}   /* the old sweep animation; the frame does the work now */

/* ── News آ· chronicle ───────────────────────────────────────────────────── */
.imp-tabs{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--rule);margin-bottom:24px}
.imp-tab{
    appearance:none;background:transparent;border:1px solid transparent;border-bottom:none;
    position:relative;top:1px;padding:11px 22px;cursor:pointer;
    font-family:var(--f-display);font-weight:600;font-size:12px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--text-2);transition:color .16s,background .16s;
}
.imp-tab:hover{color:var(--gold-lit)}
.imp-tab.is-on{color:var(--gold-lit);background:var(--ink-2);border-color:var(--rule);border-bottom-color:var(--ink-2)}
.imp-tab.is-on::before{content:'';position:absolute;inset-inline:0;top:-1px;height:2px;background:var(--seal)}

.imp-pane{display:none}
.imp-pane.is-on{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
    gap:1px;background:var(--rule);border:1px solid var(--rule);
}
.imp-entry{
    position:relative;background:var(--ink-2);padding:26px;
    display:flex;flex-direction:column;gap:11px;transition:background .2s;
}
.imp-entry:hover{background:var(--ink-3)}
.imp-entry h3{color:var(--gold-hi);line-height:1.4}
.imp-entry p{font-size:16px;color:var(--text-2)}
.imp-seal{
    position:absolute;top:18px;inset-inline-end:18px;width:36px;height:36px;
    display:flex;align-items:center;justify-content:center;transform:rotate(-9deg);
    border:1px solid var(--seal);color:var(--seal-lit);opacity:.8;
    font-family:var(--f-display);font-size:10px;font-weight:700;
}
.imp-empty{
    padding:48px 22px;text-align:center;color:var(--text-3);
    border:1px dashed var(--rule);background:var(--ink-2);
}

/* ── Events آ· decrees ───────────────────────────────────────────────────── */
.imp-decrees{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.imp-decree{
    position:relative;background:var(--ink-2);border:1px solid var(--rule);
    padding:28px 26px 26px;display:flex;flex-direction:column;gap:15px;
}
.imp-decree::before,.imp-decree::after{
    content:'';position:absolute;width:11px;height:11px;border:1px solid var(--gold);opacity:.55;
}
.imp-decree::before{top:-1px;inset-inline-start:-1px;border-inline-end:none;border-bottom:none}
.imp-decree::after{bottom:-1px;inset-inline-end:-1px;border-inline-start:none;border-top:none}
.imp-decree h3{text-transform:uppercase;letter-spacing:.08em}
.imp-when{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--text-3)}
.imp-reward{
    font-size:16px;color:var(--text);line-height:1.7;
    border-inline-start:2px solid var(--seal);padding-inline-start:14px;
}
.imp-clock{display:flex;gap:9px}
.imp-cell{
    flex:1;text-align:center;padding:12px 4px;
    background:var(--ink);border:1px solid var(--rule);
}
.imp-cell .n{
    display:block;font-size:clamp(20px,4.4vw,27px);font-weight:500;
    line-height:1;color:var(--gold-hi);
}
.imp-cell .u{display:block;margin-top:7px;font-size:9px}
.imp-live{
    display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
    padding:6px 15px;background:rgba(150,32,26,.16);
    border:1px solid var(--seal);color:var(--seal-lit);
    font-family:var(--f-mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
}
.imp-live i{width:6px;height:6px;background:var(--seal-lit);animation:beat 1.5s ease-in-out infinite}
@keyframes beat{0%,100%{opacity:1}50%{opacity:.25}}

/* ── Tables آ· ledger, rankings, admin ───────────────────────────────────── */
.imp-ledger,.rank-table,.admin-table,.gm-table{
    width:100%;background:var(--ink-2);border:1px solid var(--rule);overflow-x:auto;
}
.imp-ledger table,table.rank-table,table.admin-table,table.gm-table{
    width:100%;border-collapse:collapse;min-width:440px;
}
.imp-ledger th,.rank-table th,.admin-table th,.gm-table th{
    padding:14px 13px;text-align:center;font-weight:400;
    font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--text-3);background:var(--ink);border-bottom:1px solid var(--rule);
}
.imp-ledger td,.rank-table td,.admin-table td,.gm-table td{
    padding:14px 13px;text-align:center;font-size:16px;color:var(--text-2);
    border-bottom:1px solid rgba(185,143,46,.10);
}
.imp-ledger tr:last-child td,.rank-table tr:last-child td,.gm-table tr:last-child td{border-bottom:none}
.imp-ledger tbody tr:hover td,.rank-table tbody tr:hover td,.admin-table tbody tr:hover td{
    background:var(--ink-3);color:var(--text);
}
.imp-ledger .nm,.rank-table td:nth-child(2){
    text-align:start;font-family:var(--f-display);font-weight:600;color:var(--gold-hi);
}
.imp-medal{
    display:inline-flex;align-items:center;justify-content:center;width:27px;height:27px;
    border:1px solid var(--rule);font-family:var(--f-mono);font-size:12px;color:var(--text-3);
}
.imp-medal.m1{border-color:var(--gold);color:var(--gold-hi);background:rgba(185,143,46,.14)}
.imp-medal.m2{border-color:rgba(206,206,206,.42);color:#dcdcdc;background:rgba(220,220,220,.07)}
.imp-medal.m3{border-color:rgba(176,110,60,.52);color:#c88f5c;background:rgba(176,110,60,.11)}
.rank-1 td,.rank-2 td,.rank-3 td{color:var(--text)}
.rank-1 td:first-child{color:var(--gold-hi)}

/* ── Store آ· items ──────────────────────────────────────────────────────── */
.store-item{display:flex;flex-direction:column;gap:12px}
.item-name{font-family:var(--f-display);font-weight:600;font-size:17px;color:var(--gold-hi)}
.item-tag{
    align-self:flex-start;padding:4px 12px;
    font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--text-3);border:1px solid var(--rule);
}
.item-prices{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.price-usd{font-family:var(--f-mono);font-size:25px;color:var(--gold-hi)}
.price-egp{font-family:var(--f-mono);font-size:15px;color:var(--text-3)}
.price-sep{color:var(--rule)}
.pts{font-family:var(--f-mono);color:var(--gold-lit)}
.store-notice,.no-pending,.login-prompt,.offline-warn,.pp-note,.wa-qr-hint,.read-more{
    padding:16px 20px;font-size:16px;color:var(--text-2);
    background:var(--ink-2);border-inline-start:2px solid var(--gold);
}
.offline-warn{border-inline-start-color:var(--seal);color:var(--seal-lit)}

/* ── Donations آ· methods ────────────────────────────────────────────────── */
.ew-methods,.bn-method-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.bn-tab,.ew-type{
    padding:10px 20px;cursor:pointer;
    font-family:var(--f-display);font-weight:600;font-size:12px;
    letter-spacing:.12em;text-transform:uppercase;
    color:var(--text-2);background:var(--ink-2);border:1px solid var(--rule);
    transition:color .16s,border-color .16s,background .16s;
}
.bn-tab:hover,.ew-type:hover{color:var(--gold-lit);border-color:var(--rule-lit)}
.bn-tab.active,.ew-type.active{color:var(--gold-hi);background:var(--ink-3);border-color:var(--gold)}
.ew-brand{font-family:var(--f-display);font-weight:700;letter-spacing:.1em;color:var(--gold-lit)}
.ew-num,.addr-val,.group-id{
    font-family:var(--f-mono);font-size:15px;color:var(--text);
    word-break:break-all;background:var(--ink-4);border:1px solid var(--rule);padding:12px 14px;
}
.addr-label,.ew-type,.term-title,.group-name{font-family:var(--f-display)}
.vodafone{color:#d8302a}
.etisalat{color:#8ac640}
.orange{color:#e88322}

/* ── Terminal آ· code blocks ─────────────────────────────────────────────── */
.terminal-box{background:var(--ink);font-family:var(--f-mono);font-size:14px;line-height:1.9}
.terminal-line{color:var(--text-2)}
.terminal-line .prompt{color:var(--gold);margin-inline-end:9px}
.term-title{
    font-size:11px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--text-3);margin-bottom:14px;
}

/* ── Vote ───────────────────────────────────────────────────────────────── */
.vote-card{display:flex;flex-direction:column;gap:13px}
.vote-site-name{font-family:var(--f-display);font-weight:700;font-size:18px;color:var(--gold-hi)}
.vote-freq{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--text-3)}
.vote-reward-badge{
    align-self:flex-start;padding:5px 14px;
    font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;
    color:var(--gold-hi);background:rgba(185,143,46,.12);border:1px solid var(--rule-lit);
}
.vote-success{color:var(--jade);border-inline-start:2px solid var(--jade);padding-inline-start:14px}
.cooldown-timer{font-family:var(--f-mono);font-size:19px;color:var(--gold-lit)}
.vote-banner,.pending-banner,.saved-badge,.badge-gm{
    display:inline-flex;align-items:center;gap:9px;padding:8px 18px;
    font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--gold-hi);background:rgba(185,143,46,.10);border:1px solid var(--rule-lit);
}
.badge-gm{color:var(--seal-lit);background:rgba(150,32,26,.14);border-color:rgba(150,32,26,.5)}
.saved-badge{color:var(--jade);border-color:rgba(77,138,106,.5);background:rgba(77,138,106,.12)}

/* ── Countdown (legacy hero block) ──────────────────────────────────────── */
.countdown-section{
    display:flex;flex-direction:column;align-items:center;
    padding:56px 20px 62px;margin-bottom:40px;
    border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.cd-badge{
    display:inline-flex;align-items:center;gap:10px;margin-bottom:26px;padding:7px 20px;
    font-family:var(--f-mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
    color:var(--jade);background:rgba(77,138,106,.10);border:1px solid rgba(77,138,106,.42);
}
.cd-live-dot,.cd-dot{width:6px;height:6px;display:inline-block;background:var(--jade);transform:rotate(45deg)}
.cd-dot--gold{background:var(--gold)}
.cd-dot--c{background:var(--gold-lit)}
.cd-dot--g{background:var(--jade);animation:beat 1.5s ease-in-out infinite}
.cd-eyebrow{margin-bottom:10px}
.cd-heading{
    font-family:var(--f-display);font-weight:900;
    font-size:clamp(23px,6vw,52px);letter-spacing:.14em;text-transform:uppercase;
    color:var(--gold-lit);line-height:1;margin-bottom:9px;
}
.cd-date{font-size:clamp(14px,3vw,24px);color:var(--gold-hi);letter-spacing:.16em;margin-bottom:30px}
.cd-divider{
    width:min(440px,88vw);height:1px;margin-bottom:34px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.6;
}
.cd-grid{display:flex;gap:clamp(8px,2.4vw,18px);justify-content:center;flex-wrap:wrap;margin-bottom:34px}
.cd-unit{display:flex;flex-direction:column;align-items:center;gap:9px}
.cd-box{
    display:flex;align-items:center;justify-content:center;
    width:clamp(72px,15vw,108px);height:clamp(72px,15vw,108px);
    background:var(--ink-2);border:1px solid var(--rule);
}
.cd-box--c,.cd-box--v,.cd-box--g,.cd-box--f{border-color:var(--rule-lit)}
.cd-num{font-size:clamp(25px,6vw,45px);font-weight:500;line-height:1;color:var(--gold-hi)}
.cd-sep{
    align-self:center;font-family:var(--f-mono);font-size:clamp(18px,4vw,34px);
    color:var(--rule-lit);user-select:none;
}
.cd-status-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:24px}
.cd-status-item{
    display:flex;align-items:center;gap:9px;padding:7px 16px;
    font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;
    color:var(--text-3);background:var(--ink-2);border:1px solid var(--rule);
}
.cd-status-item strong{color:var(--text)}
.cd-notice{
    max-width:600px;text-align:center;font-size:16px;line-height:1.95;color:var(--text-2);
    border-inline-start:2px solid var(--gold);padding-inline-start:16px;
}

/* ── Patronage ──────────────────────────────────────────────────────────── */
.imp-patron{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:1px;background:var(--rule);border:1px solid var(--rule);
}
.imp-tier{
    position:relative;background:var(--ink-2);padding:32px 24px;text-align:center;
    display:flex;flex-direction:column;gap:13px;transition:background .2s;
}
.imp-tier:hover{background:var(--ink-3)}
.imp-tier.is-best{background:var(--ink-3)}
.imp-tier.is-best::before{content:'';position:absolute;inset-inline:0;top:0;height:2px;background:var(--gold)}
.imp-rank{font-family:var(--f-display);font-weight:800;font-size:13px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-lit)}
.imp-price{font-size:33px;color:var(--gold-hi);line-height:1}
.imp-tier ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:8px;text-align:start}
.imp-tier li{position:relative;padding-inline-start:17px;font-size:15.5px;color:var(--text-2);line-height:1.65}
.imp-tier li::before{content:'';position:absolute;inset-inline-start:0;top:9px;width:5px;height:5px;background:var(--seal);transform:rotate(45deg)}

/* ── Community + colophon ───────────────────────────────────────────────── */
.imp-gather{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.imp-door{
    display:flex;align-items:center;gap:17px;padding:24px 26px;
    background:var(--ink-2);border:1px solid var(--rule);
    transition:background .2s,border-color .2s;
}
.imp-door:hover{background:var(--ink-3);border-color:var(--rule-lit)}
.imp-door svg{flex:none}
.imp-door .t{display:block;font-family:var(--f-display);font-weight:700;font-size:15px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-lit)}
.imp-door .d{display:block;margin-top:4px;font-size:15px;color:var(--text-3)}

.imp-colophon{
    margin-top:70px;padding:38px 0 46px;border-top:1px solid var(--rule);
    display:flex;flex-direction:column;align-items:center;gap:15px;text-align:center;
}
.imp-marks{display:flex;gap:24px;flex-wrap:wrap;justify-content:center}
.imp-marks a{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.imp-marks a:hover{color:var(--gold-lit)}
.imp-age{
    padding:6px 16px;font-family:var(--f-display);font-weight:600;font-size:11.5px;
    letter-spacing:.14em;color:var(--text-3);border:1px solid var(--rule);
}
.imp-copy{font-family:var(--f-mono);font-size:11.5px;color:var(--text-3)}

/* ── Footer ─────────────────────────────────────────────────────────────── */
footer{
    margin-top:70px;padding:44px 24px 54px;text-align:center;
    border-top:1px solid var(--rule);
}
.footer-logo{
    font-family:var(--f-display);font-weight:800;font-size:17px;
    letter-spacing:.28em;text-transform:uppercase;color:var(--gold-lit);
}
.footer-divider{
    width:min(300px,60%);height:1px;margin:20px auto;
    background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.55;
}
.ct,.copyright-text,.ct-text,.news-all-text{
    display:block;font-family:var(--f-mono);font-size:11.5px;
    letter-spacing:.1em;color:var(--text-3);
}
.ct-text{margin-top:9px;letter-spacing:.3em;text-transform:uppercase}

/* ── Music toggle ───────────────────────────────────────────────────────── */
.music-player{position:fixed;inset-inline-end:20px;bottom:20px;z-index:70}
.music-btn{
    display:inline-flex;align-items:center;gap:9px;padding:10px 17px;cursor:pointer;
    font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--text-2);background:rgba(12,10,9,.94);border:1px solid var(--rule);
    transition:color .16s,border-color .16s;
}
.music-btn:hover{color:var(--gold-lit);border-color:var(--rule-lit)}

/* ── GM pages ───────────────────────────────────────────────────────────── */
.admin-section{margin-bottom:36px;padding:0;background:none;border:none}
.gm-form{background:var(--ink-2);border:1px solid var(--rule);padding:24px;display:grid;gap:13px;margin-bottom:26px}
.gm-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:13px}
.gm-form label{display:flex;flex-direction:column;gap:7px;margin:0}
.gm-check{flex-direction:row!important;align-items:center}
.gm-check input{width:auto}
.gm-mini{padding:6px 13px;font-size:10.5px}
.gm-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.gm-note{padding:14px 19px;margin-bottom:22px;background:var(--ink-2);border-inline-start:2px solid var(--gold);color:var(--text)}
.gm-note.error{border-inline-start-color:var(--seal);color:var(--seal-lit)}
.gm-off{opacity:.45}
.gm-table td,.gm-table th{text-align:start}

/* ── Reveal ─────────────────────────────────────────────────────────────── */
/* Short and shallow. A long slide on every block is the thing that makes a
   page feel like a template. */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
    .reveal{opacity:1;transform:none;transition:none}
    *{animation-duration:.001ms!important;animation-iteration-count:1!important}
}

/* ── Small screens ──────────────────────────────────────────────────────── */
@media(max-width:880px){
    header{gap:14px;padding:12px 18px}
    nav{order:3;width:100%;margin-inline-start:0}
    nav ul{justify-content:center}
    .top-panel_right{margin-inline-start:auto}
}
@media(max-width:600px){
    body{font-size:16px}
    .content,.form-content,.gm-wrap{padding:0 16px}
    .divider-row{gap:12px}
    .divider-row h1::before,.divider-row h1::after{margin:0 9px}
    .imp-tab{padding:9px 15px;font-size:11px}
    .imp-clock{gap:6px}
    .cd-sep{display:none}
    .music-player{inset-inline-end:12px;bottom:12px}
}


/* ── Remaining page-specific pieces ─────────────────────────────────────── */
/* Small helpers used by a single page each. Grouped here rather than scattered
   so there is one file to read when something looks wrong. */
.imp-rail{position:relative}
.act-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.uname,.key{font-family:var(--f-mono);color:var(--gold-lit);letter-spacing:.06em}
.pp-wrap{display:flex;flex-direction:column;gap:18px}
.pp-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.pp-sub{font-size:15.5px;color:var(--text-3)}
.pp-quick{display:flex;gap:9px;flex-wrap:wrap}
.pp-in{max-width:220px}
.wa-qr-wrap{
    display:flex;flex-direction:column;align-items:center;gap:14px;padding:22px;
    background:var(--ink);border:1px solid var(--rule);
}
.wa-qr-wrap img{border:1px solid var(--rule)}