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

/* ============================================================================
   DEADLY WORLD
   ----------------------------------------------------------------------------
   Dark is the native palette (warm black, steel hairlines, seal red). Light is
   the same object in daylight: parchment paper, ink text, the same rules.
   Tokens live here so every page follows html[data-theme].
   ========================================================================== */

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

:root{
    /* ── Ink ────────────────────────────────────────────────────────────── */
    --ink:#07080c;
    --ink-2:#0e1118;
    --ink-3:#141821;
    --ink-4:#1a2030;

    /* ── Metal ──────────────────────────────────────────────────────────── */
    --moon:#c9d6e4;
    --moon-lit:#e8eef4;
    --moon-dim:#8fa3b8;

    /* Forged gold and ember. Every page reads the accent through the --gold
       aliases, so re-pointing them here re-skins the whole site. Steel is
       still reachable as --moon* for anything that must stay cold. */
    --au-dim:#8a6524;
    --au:#c2912f;
    --au-lit:#e8bd5e;
    --au-hi:#f9e7ad;
    --ember:#b3311a;
    --ember-lit:#ff6a2a;
    --ember-hi:#ffb266;
    --gold:var(--au);
    --gold-lit:var(--au-lit);
    --gold-hi:var(--au-hi);
    --rule:rgba(143,163,184,.26);
    --rule-lit:rgba(201,214,228,.46);

    /* ── Seal ───────────────────────────────────────────────────────────── */
    --seal:#8a1a1f;
    --seal-lit:#c4382a;

    /* ── Paper ──────────────────────────────────────────────────────────── */
    --text:#e4eaf0;
    --text-2:#adb9c9;
    --text-3:#8492a3;

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

    /* aliases used by older page markup */
    --gold2:var(--gold-lit);
    --text-dim:var(--text-3);
    --cyan3:#6eb8c8;
    --green:var(--jade);

    --f-display:'Cormorant Garamond',Georgia,serif;
    --f-body:'Cormorant Garamond',Georgia,serif;
    --f-mono:'IBM Plex Mono',ui-monospace,monospace;
    --f-ui:'Inter',system-ui,-apple-system,sans-serif;

    --header-bg:rgba(7,8,12,.88);
    --scrim:rgba(7,8,12,.92);
    --card-top:#141821;
    --card-bot:#07080c;
    --photo-void:#07080c;
    --wash-a:rgba(180,205,230,.10);
    --wash-b:rgba(138,26,31,.12);
    --wash-grid:rgba(201,214,228,.018);
    --vignette-top:rgba(201,214,228,.07);
    --vignette-bot:rgba(0,0,0,.55);
    --hairline:rgba(201,214,228,.7);

    /* Moonlight, not drop shadow: a hairline of light plus a wide, faint
       halo. Anything that needs to lift uses these rather than black. */
    --glow-moon:0 0 0 1px rgba(201,214,228,.10),0 20px 46px rgba(2,4,8,.55);
    --glow-moon-lit:0 0 0 1px rgba(201,214,228,.22),0 26px 60px rgba(2,4,8,.62),0 0 34px rgba(201,214,228,.10);
    --glow-seal:0 0 0 1px rgba(196,56,42,.22),0 22px 50px rgba(2,4,8,.6),0 0 30px rgba(196,56,42,.12);
    --glow-au:0 0 0 1px rgba(232,189,94,.16),0 20px 46px rgba(2,4,8,.6),0 0 26px rgba(194,145,47,.14);
    --glow-au-lit:0 0 0 1px rgba(249,231,173,.34),0 26px 60px rgba(2,4,8,.66),0 0 44px rgba(232,189,94,.24);
    --glow-ember:0 0 0 1px rgba(255,106,42,.26),0 22px 54px rgba(2,4,8,.62),0 0 38px rgba(179,49,26,.3);
    /* Leaf gold for headline text: highlight, body, shadowed edge, catch-light */
    --au-sheen:linear-gradient(180deg,#fff8e2 0%,#f9e7ad 20%,#e8bd5e 48%,#a87a22 70%,#f4dd9e 100%);
    --tick:var(--gold);
    --focus:rgba(201,214,228,.85);
    --focus-ring:0 0 0 1px var(--ink),0 0 0 3px var(--focus);
    --lift:translateY(-3px);
    --ease:cubic-bezier(.2,.9,.3,1);

    --shell:1280px;
    --step:8px;
    color-scheme:dark;
}

html[data-theme="light"]{
    --ink:#f4efe6;
    --ink-2:#fffdf8;
    --ink-3:#efe8dc;
    --ink-4:#e7dfd2;
    --moon:#3d4a58;
    --moon-lit:#1c242e;
    --moon-dim:#5c6b7a;
    /* Daylight turns leaf gold into antique bronze so text keeps its contrast */
    --au-dim:#a98436;
    --au:#8a6418;
    --au-lit:#6d4e12;
    --au-hi:#46310a;
    --ember:#a32a12;
    --ember-lit:#c8451c;
    --ember-hi:#8a3a14;
    --gold:var(--au);
    --gold-lit:var(--au-lit);
    --gold-hi:var(--au-hi);
    --rule:rgba(40,36,28,.14);
    --rule-lit:rgba(40,36,28,.28);
    --text:#1c1a16;
    --text-2:#3a352c;
    --text-3:#6b6458;
    --header-bg:rgba(244,239,230,.92);
    --scrim:rgba(255,253,248,.94);
    --card-top:#fffdf8;
    --card-bot:#f4efe6;
    --photo-void:#1a1814;
    --wash-a:rgba(160,120,60,.10);
    --wash-b:rgba(138,26,31,.06);
    --wash-grid:rgba(40,36,28,.05);
    --vignette-top:rgba(180,140,80,.08);
    --vignette-bot:rgba(244,239,230,.2);
    --hairline:rgba(80,64,40,.35);
    --glow-moon:0 0 0 1px rgba(40,36,28,.08),0 16px 36px rgba(40,36,28,.12);
    --glow-moon-lit:0 0 0 1px rgba(40,36,28,.16),0 22px 48px rgba(40,36,28,.18);
    --glow-seal:0 0 0 1px rgba(138,26,31,.18),0 20px 44px rgba(40,36,28,.16);
    --glow-au:0 0 0 1px rgba(138,100,24,.18),0 16px 36px rgba(40,36,28,.14);
    --glow-au-lit:0 0 0 1px rgba(138,100,24,.34),0 22px 48px rgba(40,36,28,.2);
    --glow-ember:0 0 0 1px rgba(163,42,18,.24),0 20px 44px rgba(40,36,28,.18);
    --au-sheen:linear-gradient(180deg,#8a6418 0%,#6d4e12 40%,#46310a 72%,#7a5615 100%);
    --focus:rgba(60,52,40,.85);
    color-scheme:light;
}

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

html{
    scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:88px;
    scrollbar-width:thin;scrollbar-color:var(--moon-dim) var(--ink);
}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:var(--ink-4);border:1px solid var(--rule)}
::-webkit-scrollbar-thumb:hover{background:var(--ink-3);border-color:var(--rule-lit)}

body{
    font-family:var(--f-body);
    font-size:18px;
    line-height:1.75;
    color:var(--text-2);
    background:var(--ink);
    min-height:100vh;
    overflow-x:hidden;
    padding-bottom:env(safe-area-inset-bottom);
    background-image:
        radial-gradient(90% 50% at 50% -8%,var(--wash-a),transparent 58%),
        radial-gradient(70% 40% at 80% 0%,var(--wash-b),transparent 50%),
        repeating-linear-gradient(90deg,var(--wash-grid) 0 1px,transparent 1px 11px);
    background-attachment:fixed;
}

::selection{background:var(--seal);color:#fff}

.vignette{
    display:block;pointer-events:none;position:fixed;inset:0;z-index:40;
    background:
        radial-gradient(ellipse at 50% -10%,var(--vignette-top),transparent 42%),
        radial-gradient(ellipse at 50% 120%,var(--vignette-bot),transparent 55%);
    opacity:.9;
}
.vignette::after{
    content:'';position:absolute;inset:0;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.55'/></svg>");
    opacity:.055;mix-blend-mode:overlay;
}
.grid-overlay{display:none}

/* ── Rhythm ─────────────────────────────────────────────────────────────── */
.content,.gm-wrap,.pp-wrap,.vote-wrap{
    width:100%;max-width:var(--shell);margin:0 auto;padding:0 24px;
}
/* Field wrappers on login/register — not a page shell. */
.form-content{width:100%;max-width:none;margin:0 0 16px;padding:0}
.form-content .news-all-text{
    color:var(--text-2);letter-spacing:.12em;margin-bottom:8px;
}
form.form.glass-card,form.glass-card.form{width:100%;margin:0 auto 48px}

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:.12em}
h2{font-size:clamp(21px,3.2vw,31px);letter-spacing:.12em}
h3{font-size:19px;letter-spacing:.04em}
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 ─────────────────────────────────────────────────────────────── */
html,body{width:100%;max-width:none}
header{
    position:sticky;top:0;z-index:60;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"logo nav tools";
    align-items:center;
    gap:10px 16px;
    width:100%;
    min-height:70px;
    padding:max(8px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
    background:var(--header-bg);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    border-bottom:1px solid var(--rule);
}
header .logo{grid-area:logo;min-width:0}
header nav{grid-area:nav;margin:0;min-width:0;justify-self:center;max-width:100%}
header .nav-toggle{grid-area:toggle;margin:0}
header .top-panel_right{grid-area:tools}
header::after{
    content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
    background:linear-gradient(90deg,transparent,var(--hairline),transparent);opacity:.7;
}

.logo{position:relative;display:flex;align-items:center;gap:13px;text-decoration:none}
.logo-icon{
    flex:none;width:46px;height:46px;border-radius:0;object-fit:contain;display:block;
    background:transparent;position:relative;z-index:1;
    animation:dwLogoBreathe 4.6s ease-in-out infinite;
    transition:transform .3s var(--ease);
}
.logo:hover .logo-icon{transform:scale(1.08)}
/* A gold ring turning slowly behind the mark: the header's one live element. */
.logo::before{
    content:'';position:absolute;pointer-events:none;
    inset-inline-start:-8px;top:50%;width:62px;height:62px;margin-top:-31px;
    border:1px solid rgba(232,189,94,.3);
    transform:rotate(45deg) scale(.72);
    animation:dwLogoRing 18s linear infinite;
}
.logo:hover::before{border-color:rgba(249,231,173,.62)}
.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;
    /* Leaf gold with a catch-light drifting across it. */
    background:linear-gradient(100deg,#c2912f 0%,#e8bd5e 26%,#fff8e2 42%,#e8bd5e 58%,#c2912f 100%);
    background-size:280% 100%;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:dwLogoSheen 8s linear infinite;
}
/* Daylight: bronze text reads better than leaf gold on parchment. */
html[data-theme="light"] .logo-name{
    background:none;-webkit-text-fill-color:currentColor;
    color:var(--gold-lit);animation:none;
}
html[data-theme="light"] .logo::before{border-color:rgba(138,100,24,.34)}
@keyframes dwLogoRing{
    from{transform:rotate(45deg) scale(.72)}
    to{transform:rotate(405deg) scale(.72)}
}
@keyframes dwLogoBreathe{
    0%,100%{filter:drop-shadow(0 0 7px rgba(232,189,94,.22))}
    50%{filter:drop-shadow(0 0 18px rgba(232,189,94,.6))}
}
@keyframes dwLogoSheen{
    from{background-position:0% 50%}
    to{background-position:-280% 50%}
}
.logo-game{
    font-family:var(--f-mono);font-size:9px;letter-spacing:.32em;
    color:var(--text-3);text-transform:uppercase;margin-top:3px;
}

nav ul{display:flex;gap:2px;list-style:none;flex-wrap:nowrap;justify-content:center}
nav ul li a{
    display:block;padding:8px 12px;
    font-family:var(--f-display);font-weight:600;font-size:11.5px;
    letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);
    border:none;border-bottom:2px solid transparent;white-space:nowrap;
    transition:color .16s,border-color .16s;
}
nav ul li a:hover{color:var(--gold-lit);background:transparent;}
nav ul li.active a{color:var(--gold-lit);border-bottom-color:var(--gold);background:transparent;}

.top-panel_right{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;overflow:visible}
.header-player-name{
    font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;
    color:var(--gold-lit);padding-inline-end:6px;white-space:nowrap;
}
header .button{
    padding:8px 14px;min-height:36px;font-size:11px;white-space:nowrap;flex:none;
}
header .dw-theme-btn{width:36px;height:36px}
header .lang-dd-btn{min-height:36px;padding:6px 10px}

/* ── 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 var(--ease),background .16s var(--ease),border-color .16s var(--ease);
}
.button:hover,.btn-outline:hover,.copy-btn:hover{
    color:var(--gold-hi);border-color:rgba(232,189,94,.5);background:rgba(232,189,94,.09);
}
.button.hot{
    background:linear-gradient(180deg,#b02a22,#6f1610);
    border-color:rgba(196,56,42,.55);
    color:#fff!important;
}
.button.hot:hover{
    border-color:var(--gold-lit);
    color:#fff!important;
    background:linear-gradient(180deg,#c43229,#871b14);
}

/* The one filled button on any given view. */
.btn-3d,.btn-save,.btn-approve,.vote-btn,.pp-btn,input[type="submit"],button[type="submit"]{
    position:relative;overflow:hidden;
    color:var(--au-hi);
    background:linear-gradient(180deg,rgba(232,189,94,.20),rgba(138,101,36,.10));
    border-color:rgba(232,189,94,.44);
}
/* A slow catch-light crossing the one filled button on the view. */
.btn-3d::after,.vote-btn::after,.pp-btn::after{
    content:'';position:absolute;top:0;bottom:0;width:38%;
    left:-45%;pointer-events:none;
    background:linear-gradient(100deg,transparent,rgba(255,246,222,.26),transparent);
    transition:left .55s var(--ease);
}
.btn-3d:hover::after,.vote-btn:hover::after,.pp-btn:hover::after{left:115%}
.btn-3d:hover,.btn-save:hover,.btn-approve:hover,.vote-btn:hover,.pp-btn:hover,
input[type="submit"]:hover,button[type="submit"]:hover{
    color:#2a1c05;border-color:var(--au-hi);
    background:linear-gradient(180deg,#f9e7ad,#c2912f);
    box-shadow:0 0 26px rgba(232,189,94,.3);
}
.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);
}
a:focus-visible,.button:focus-visible,.btn-3d:focus-visible,.btn-outline:focus-visible,
.btn-danger:focus-visible,.lang-dd-btn:focus-visible,.dw-theme-btn:focus-visible,
.nav-toggle:focus-visible,.rank-tab:focus-visible,.imp-tab:focus-visible,
.carousel-nav-btn:focus-visible,.carousel-dot:focus-visible,.vote-action-btn:focus-visible,
input[type="submit"]:focus-visible,button:focus-visible,select:focus-visible,
textarea:focus-visible,input:focus-visible{
    outline:none;box-shadow:var(--focus-ring);
}
input::placeholder,textarea::placeholder{color:var(--text-3);opacity:1}
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 var(--ease),border-color .2s var(--ease),
               transform .25s var(--ease),box-shadow .25s var(--ease);
}
.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);
    transform:var(--lift);box-shadow:var(--glow-moon);
}
.skin-auth .glass-card:hover,.form.glass-card:hover{
    transform:none;box-shadow:none;
}
.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 var(--ease),border-color .2s var(--ease),
               transform .25s var(--ease),box-shadow .25s var(--ease);
}
.feature-card:hover{background:var(--ink-3);border-color:var(--rule-lit);transform:var(--lift);box-shadow:var(--glow-moon)}
.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 ── */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.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(143,163,184,.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(143,163,184,.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(143,163,184,.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(143,163,184,.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:0;text-align:center;
    border-top:1px solid var(--rule);
    background:linear-gradient(180deg, transparent, var(--ink));
}
.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:var(--scrim);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){
    .logo::before,.logo-icon,.logo-name{animation:none}
    .logo-icon{filter:none}
    .reveal{opacity:1;transform:none;transition:none}
    *{animation-duration:.001ms!important;animation-iteration-count:1!important}
    .glass-card:hover,.donation-card:hover,.store-item:hover,.vote-card:hover,
    .feature-card:hover{transform:none;box-shadow:none}
}

.lang-btn{
    display:inline-flex;align-items:center;padding:7px 12px;
    font-family:var(--f-display);font-weight:700;font-size:11px;
    letter-spacing:.12em;text-transform:none;
    color:var(--gold-lit);border:1px solid var(--rule);
    background:rgba(143,163,184,.08);text-decoration:none;
}
.lang-btn:hover{border-color:var(--gold);color:var(--gold-hi)}

.lang-dd{position:relative;z-index:70;flex:none}
.dw-theme-btn{
    display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;padding:0;flex:none;cursor:pointer;
    color:var(--gold-lit);background:var(--ink-3);
    border:1px solid var(--rule);
    -webkit-tap-highlight-color:transparent;
}
.dw-theme-btn:hover{border-color:var(--rule-lit);color:var(--gold-hi);background:var(--ink-4)}
.dw-theme-sun,.dw-theme-moon{
    display:block;width:16px;height:16px;
    fill:currentColor;
}
html[data-theme="dark"] .dw-theme-moon,
html:not([data-theme]) .dw-theme-moon{display:none}
html[data-theme="light"] .dw-theme-sun{display:none}
html[data-theme="light"] .dw-theme-moon{display:block}
.lang-dd-btn{
    display:inline-flex;align-items:center;gap:8px;
    min-height:40px;padding:6px 12px;
    background:var(--ink-3);border:1px solid var(--rule);
    color:var(--text);cursor:pointer;font-family:var(--f-mono);
    font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
    line-height:1;white-space:nowrap;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;
    transition:border-color .16s var(--ease),background .16s var(--ease);
}
.lang-dd-btn:hover,.lang-dd.is-open .lang-dd-btn{border-color:var(--rule-lit);background:var(--ink-4)}
.lang-flag{
    display:inline-block;flex:none;width:auto;height:auto;
    font-size:18px;line-height:1;box-shadow:none;
    font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;
}
.lang-dd-caret{
    width:0;height:0;margin-inline-start:2px;
    border-left:4px solid transparent;border-right:4px solid transparent;
    border-top:5px solid currentColor;opacity:.9;
}
.lang-dd.is-open .lang-dd-caret{transform:rotate(180deg)}
.lang-dd-menu{
    display:none;position:absolute;top:calc(100% + 8px);inset-inline-end:0;
    min-width:188px;padding:6px 0;
    background:var(--ink-2);border:1px solid var(--rule);
    box-shadow:var(--glow-moon);z-index:80;
}
.lang-dd.is-open .lang-dd-menu{display:block}
.lang-dd-item{
    display:flex;align-items:center;gap:10px;
    min-height:40px;padding:8px 14px;
    color:var(--text);font-family:var(--f-mono);font-size:12px;
    letter-spacing:.12em;text-transform:uppercase;font-weight:500;
    text-decoration:none;text-align:start;
}
.lang-dd-item:hover,.lang-dd-item.is-on{background:var(--ink-3);color:var(--moon-lit)}
html[dir="rtl"] .lang-dd-item{font-family:'Noto Kufi Arabic',var(--f-ui),sans-serif}
html[dir="rtl"] .lang-dd-btn{font-family:'Noto Kufi Arabic',var(--f-ui),sans-serif}
.nav-toggle{
    display:none;
    width:40px;height:36px;cursor:pointer;
    font-size:20px;line-height:1;color:var(--gold-lit);
    background:var(--scrim);border:1px solid var(--rule);
}
@media(max-width:1280px){
    .lang-dd-label{display:none}
}
@media(max-width:1200px){
    .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
    header{
        grid-template-columns:auto minmax(0,1fr) auto;
        grid-template-areas:"logo tools toggle" "nav nav nav";
        gap:10px 12px;
        padding:max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));
    }
    header.has-nav-toggle nav{display:none;width:100%;justify-self:stretch}
    header.has-nav-toggle.nav-open nav{display:block}
    header.has-nav-toggle.nav-open nav ul{flex-direction:column;align-items:stretch;flex-wrap:nowrap}
    header.has-nav-toggle.nav-open nav ul li a{padding:12px 14px;min-height:44px}
    header .top-panel_right{flex-wrap:wrap;justify-content:flex-end}
    .content,.gm-wrap,.pp-wrap{padding-left:12px;padding-right:12px}
    .divider-row h1{font-size:22px}
    .ew-methods{flex-direction:column}
    footer{margin-top:28px;padding:24px 14px}
}
@media(max-width:600px){
    body{font-size:16px}
    .imp-tab{padding:9px 15px;font-size:11px}
    .imp-clock{gap:6px}
    .cd-sep{display:none}
    .logo-game{display:none}
}
body.compact-ui header{
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"logo tools toggle" "nav nav nav";
    gap:10px 12px;
}
body.compact-ui .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
body.compact-ui header.has-nav-toggle nav{display:none;width:100%}
body.compact-ui header.has-nav-toggle.nav-open nav{display:block}
body.compact-ui header.has-nav-toggle.nav-open nav ul{flex-direction:column;align-items:stretch}
body.compact-ui .store-wrapper{padding:0 8px;margin-bottom:24px}
body.compact-ui .points-custom-box{grid-template-columns:1fr;padding:14px}
body.compact-ui .points-hero{padding:16px 14px}
body.compact-ui .points-hero-title h2{font-size:16px}
body.compact-ui .points-hero-desc{font-size:13px;margin-bottom:14px}
body.compact-ui .pp-wrap{margin:12px auto;padding:16px}


/* ── 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)}

/* ── Home (image-led, multi-page hub) ───────────────────────────────────── */
body.is-home{padding:0}
.home-hero{
    position:relative;min-height:calc(100vh - 72px);
    display:flex;align-items:flex-end;justify-content:center;
    overflow:hidden;isolation:isolate;
}
.home-hero-bg{
    position:absolute;inset:0;z-index:0;
    background-size:cover;background-position:center top;
    transform:scale(1.04);
    animation:homeKen 22s ease-in-out infinite alternate;
}
.home-hero-veil{
    position:absolute;inset:0;z-index:1;
    background:
        linear-gradient(180deg,rgba(7,8,12),.35) 0%,rgba(7,8,12),.55) 42%,rgba(7,8,12),.96) 100%),
        radial-gradient(80% 60% at 50% 100%,rgba(150,32,26,.22),transparent 70%);
}
.home-hero-inner{
    position:relative;z-index:2;width:100%;max-width:var(--shell);
    padding:0 24px 72px;text-align:center;
}
.home-brand{
    font-family:var(--f-display);font-weight:900;
    font-size:clamp(42px,9vw,88px);letter-spacing:.14em;
    text-transform:uppercase;color:var(--gold-hi);
    margin:10px 0 14px;line-height:.95;
    text-shadow:0 2px 24px rgba(0,0,0,.55);
}
.home-note{
    font-size:clamp(16px,2.2vw,22px);color:var(--text-2);
    max-width:34em;margin:0 auto 28px;
}
.home-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}
.home-online{
    display:inline-flex;align-items:center;gap:10px;
    font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--jade);
}
.home-online .pulse{
    width:8px;height:8px;border-radius:50%;background:var(--jade);
    box-shadow:0 0 0 0 rgba(77,138,106,.55);
    animation:homePulse 1.8s ease-out infinite;
}
.home-shots{max-width:var(--shell);margin:0 auto;padding:56px 24px 72px}
.home-shots-head{text-align:center;margin-bottom:28px}
.home-shots-head h2{
    font-size:clamp(22px,3vw,34px);letter-spacing:.18em;
    text-transform:uppercase;margin-top:8px;
}
.home-shots-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:36px;
}
.home-shot{
    margin:0;border:1px solid var(--rule);background:#000;overflow:hidden;
    aspect-ratio:16/10;
}
.home-shot img{
    width:100%;height:100%;object-fit:cover;display:block;
    transition:transform .7s ease;filter:saturate(1.05) contrast(1.04);
}
.home-shot:hover img{transform:scale(1.03)}
.home-quick{
    display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px;
}
.home-quick a{
    font-family:var(--f-display);font-size:11px;letter-spacing:.16em;
    text-transform:uppercase;padding:10px 16px;
    border:1px solid var(--rule);color:var(--text-2);
}
.home-quick a:hover{color:var(--gold-lit);border-color:var(--rule-lit);background:rgba(143,163,184,.08)}
.news-list,.events-grid{display:flex;flex-direction:column;gap:16px;padding-bottom:40px}
.events-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.news-item h2,.event-card h2{color:var(--gold-lit)}
.news-body{color:var(--text-2);line-height:1.75}
.vip-feats{list-style:none;text-align:start;max-width:28em;margin:0 auto;padding:0}
.vip-feats li{
    position:relative;padding:12px 0 12px 22px;
    border-bottom:1px solid var(--rule);color:var(--text-2);
}
.vip-feats li:last-child{border-bottom:none}
.vip-feats li::before{
    content:'';position:absolute;left:0;top:1.15em;width:8px;height:1px;background:var(--gold);
}
@keyframes homeKen{from{transform:scale(1.02)}to{transform:scale(1.08)}}
@keyframes homePulse{
    0%{box-shadow:0 0 0 0 rgba(77,138,106,.5)}
    70%{box-shadow:0 0 0 10px rgba(77,138,106,0)}
    100%{box-shadow:0 0 0 0 rgba(77,138,106,0)}
}
@media(max-width:720px){
    .home-shots-grid{grid-template-columns:1fr}
    .home-hero{min-height:calc(100vh - 120px)}
    .home-hero-inner{padding-bottom:48px}
}

/* ── Facebook / Discord community widgets ─────────────────────────────── */
.community-widgets{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:22px;
    margin-bottom:45px;
    align-items:start;
}
.soc-card{
    overflow:hidden;
    background:var(--ink-2);
    border:1px solid var(--rule);
}
.soc-head{
    display:flex;
    align-items:center;
    gap:10px;
    padding:11px 16px;
    background:#2f3236;
    color:#fff;
    font-family:var(--f-display);
    font-size:12px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
}
.soc-head svg{flex:none}
.soc-head.fb{background:#3a3d42}
.soc-head.dc{background:#2b2d31}
.soc-head.wa{background:#1f2a24}
.soc-body{background:#fff; min-height:420px}
.soc-body.dc-body{
    background:#2b2d31;
    min-height:420px;
    display:flex;
    flex-direction:column;
}
.soc-body iframe{display:block;width:100%;border:0;background:#fff}
.fb-fallback{
    padding:28px 20px 32px;
    color:#1c1e21;
    font-family:Helvetica, Arial, sans-serif;
    min-height:420px;
}
.fb-fallback-row{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
}
.fb-avatar{
    width:50px;height:50px;border-radius:50%;flex:none;
    background:#1877F2;display:flex;align-items:center;justify-content:center;
    color:#fff;font-weight:800;font-size:18px;
}
.fb-name{font-size:16px;font-weight:700;color:#050505;line-height:1.2}
.fb-meta{font-size:13px;color:#65676b;margin-top:2px}
.fb-join{
    display:inline-flex;align-items:center;justify-content:center;
    background:#1877F2;color:#fff;text-decoration:none;
    font-weight:700;font-size:14px;padding:8px 16px;
}
.fb-join:hover{background:#166fe5;color:#fff}
.dc-banner{
    background:#5865F2;
    padding:18px 16px 16px;
    color:#fff;
    display:flex;
    flex-direction:column;
    gap:8px;
}
.dc-banner-top{display:flex;align-items:center;gap:10px}
.dc-banner-name{font-family:var(--f-display);font-size:15px;font-weight:700}
.dc-online-line{
    font-size:22px;font-weight:800;letter-spacing:.02em;line-height:1.2;
}
.dc-list{flex:1;padding:10px 14px 6px;color:#b5bac1;font-size:13px}
.dc-ch{
    display:flex;align-items:center;gap:8px;
    padding:6px 8px;color:#80848e;
}
.dc-members{padding:8px 14px 4px}
.dc-mem{
    display:flex;align-items:center;gap:8px;
    padding:5px 8px;color:#f2f3f5;font-size:13px;
}
.dc-dot{
    width:10px;height:10px;border-radius:50%;background:#23a559;flex:none;
}
.dc-foot{
    display:flex;align-items:center;justify-content:space-between;
    gap:10px;padding:12px 14px 14px;background:#1e1f22;
}
.dc-foot span{color:#b5bac1;font-size:12px}
.dc-join{
    display:inline-flex;align-items:center;justify-content:center;
    background:#5865F2;color:#fff;text-decoration:none;white-space:nowrap;
    font-weight:700;font-size:13px;padding:8px 14px;
}
.dc-join:hover{background:#4752c4;color:#fff}
.community-widgets-sm{
    margin-top:16px;
    margin-bottom:40px;
}
.soc-card-sm .soc-body,
.soc-card-sm .soc-body.dc-body{
    min-height:240px;
}
.dc-online-line.sm{font-size:16px;font-weight:700}
.fb-group-body{background:#242526}
.fb-group-banner{background:#1877F2}
.wa-body{background:#111b16}
.wa-banner{background:#128C7E}
.wa-join{
    display:inline-flex;align-items:center;justify-content:center;
    background:#25D366;color:#06210f;text-decoration:none;white-space:nowrap;
    font-weight:700;font-size:13px;padding:8px 14px;
}
.wa-join:hover{background:#1ebe5d;color:#06210f}
.soc-card-sm .dc-foot span{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    max-width:58%;
}
@media(max-width:820px){
    .community-widgets{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}
    .community-widgets-sm{margin-top:0}
}

html[data-theme="light"] .vignette{opacity:.38}
html[data-theme="light"] .vignette::after{opacity:.03;mix-blend-mode:multiply}
html[data-theme="light"] .dw-hero h1,
html[data-theme="light"] .dw-gate-title{color:#fff}
.bar .dw-theme-btn{flex:none}