/* ============================================================
   D2R MODERN POLISH LAYER
   Sits on top of theme.css. Adds depth, motion-friendly hooks,
   modern micro-interactions. Tailwind CDN handles utilities.
   ============================================================ */

:root {
    --grad-gold: linear-gradient(135deg, #e8d5a3 0%, #c7b377 45%, #8b7355 100%);
    --grad-gold-shine: linear-gradient(110deg, transparent 30%, rgba(232,213,163,0.45) 50%, transparent 70%);
    --grad-red: linear-gradient(135deg, #c41e3a 0%, #8b0000 100%);
    --grad-card: linear-gradient(180deg, rgba(40,32,22,0.85) 0%, rgba(20,16,12,0.95) 100%);
    --grad-bevel: linear-gradient(180deg, rgba(255,235,180,0.12), rgba(0,0,0,0.6));

    --shadow-1: 0 1px 2px rgba(0,0,0,.45);
    --shadow-2: 0 4px 12px rgba(0,0,0,.55);
    --shadow-3: 0 12px 36px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.5);
    --shadow-gold: 0 0 0 1px rgba(199,179,119,.35), 0 0 24px rgba(199,179,119,.18);
    --shadow-gold-strong: 0 0 0 1px rgba(232,213,163,.6), 0 0 36px rgba(232,213,163,.32);
    --shadow-red-strong: 0 0 0 1px rgba(196,30,58,.55), 0 0 30px rgba(196,30,58,.35);

    --ring-gold: 0 0 0 2px rgba(199,179,119,.6), 0 0 0 4px rgba(199,179,119,.15);

    --motion-fast: 160ms;
    --motion-base: 280ms;
    --motion-slow: 480ms;
    --easing-spring: cubic-bezier(.34, 1.56, .64, 1);
    --easing-out: cubic-bezier(.2, .8, .2, 1);
}

/* ============================================================
   GLOBAL POLISH
   ============================================================ */

html { scroll-behavior: smooth; }

body {
    font-feature-settings: "ss01", "liga", "kern";
    background-image:
        radial-gradient(1200px 600px at 50% -10%, rgba(196,30,58,.08), transparent 60%),
        radial-gradient(900px 500px at 110% 110%, rgba(199,179,119,.06), transparent 60%),
        var(--bg-dark);
}

/* Grain layer over everything */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: .04;
    mix-blend-mode: overlay;
    background-image:
        radial-gradient(rgba(255,255,255,.6) 0.5px, transparent 0.5px),
        radial-gradient(rgba(255,255,255,.4) 0.5px, transparent 0.5px);
    background-size: 3px 3px, 5px 5px;
    background-position: 0 0, 1.5px 1.5px;
}

/* ============================================================
   HEADER UPGRADE
   ============================================================ */

.hero-header {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.hero-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 80% at 50% 0%, rgba(199,179,119,.16), transparent 70%),
        radial-gradient(50% 80% at 50% 100%, rgba(196,30,58,.18), transparent 70%);
    z-index: -1;
}

.hero-title {
    background: var(--grad-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 200% 100%;
    animation: titleShimmer 8s ease-in-out infinite;
    text-shadow: 0 0 30px rgba(199,179,119,.25);
    letter-spacing: .02em;
}

@keyframes titleShimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

.hero-subtitle {
    text-transform: uppercase;
    letter-spacing: .35em;
    font-size: .8rem;
    color: var(--text-muted);
    opacity: 0;
    animation: fadeInUp .9s var(--easing-out) .15s forwards;
}

.gold-divider {
    opacity: 0;
    animation: fadeIn .9s var(--easing-out) .35s forwards;
}

@keyframes fadeIn  { to { opacity: 1; } }
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   GLASS NAV
   ============================================================ */

.nav-wrapper {
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    background: linear-gradient(180deg, rgba(10,8,6,.78), rgba(10,8,6,.52));
    border-bottom: 1px solid rgba(199,179,119,.18);
    box-shadow: 0 8px 24px rgba(0,0,0,.45);
}

nav a {
    position: relative;
    transition:
        color var(--motion-fast) var(--easing-out),
        transform var(--motion-fast) var(--easing-out);
}

nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 0;
    height: 2px;
    background: var(--grad-gold);
    transform: translateX(-50%);
    transition: width var(--motion-base) var(--easing-spring);
    border-radius: 2px;
}

nav a:hover { color: var(--d2r-gold-bright); }
nav a:hover::after,
nav a.active::after { width: 80%; }

/* ============================================================
   MODERN CARD / SECTION
   ============================================================ */

.card,
.widget,
section > h2 + *,
section .table-wrap {
    will-change: transform;
}

.card-modern,
.surface {
    position: relative;
    background: var(--grad-card);
    border: 1px solid var(--border-gold);
    border-radius: 14px;
    box-shadow: var(--shadow-2);
    overflow: hidden;
    isolation: isolate;
    transition:
        transform var(--motion-base) var(--easing-spring),
        box-shadow var(--motion-base) var(--easing-out),
        border-color var(--motion-base) var(--easing-out);
}

.card-modern::before,
.surface::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--grad-bevel);
    mix-blend-mode: overlay;
    opacity: .55;
    z-index: -1;
}

.card-modern:hover,
.surface:hover {
    transform: translateY(-2px);
    border-color: var(--border-gold-bright);
    box-shadow: var(--shadow-3), var(--shadow-gold);
}

/* ============================================================
   TZ WIDGET — major upgrade
   ============================================================ */

.tz-widget {
    position: relative;
    background:
        radial-gradient(120% 100% at 100% 0%, rgba(196,30,58,.10), transparent 50%),
        radial-gradient(120% 100% at 0% 100%, rgba(199,179,119,.10), transparent 50%),
        var(--grad-card);
    border: 1px solid var(--border-gold);
    border-radius: 18px;
    padding: 1.4rem 1.5rem 1.6rem;
    box-shadow: var(--shadow-3);
    overflow: hidden;
}

.tz-widget::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 18px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(232,213,163,.6), transparent 35%, transparent 65%, rgba(196,30,58,.5));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

.tz-widget h2 {
    background: var(--grad-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: .04em;
    margin-bottom: 1rem;
}

.tz-current,
.tz-next {
    position: relative;
    padding: 1rem 1.1rem;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(60,42,22,.45), rgba(20,16,12,.7));
    border: 1px solid rgba(199,179,119,.22);
    margin-top: .9rem;
    transition: border-color var(--motion-base) var(--easing-out),
                box-shadow var(--motion-base) var(--easing-out);
}

.tz-current { box-shadow: inset 0 0 0 1px rgba(232,213,163,.08), 0 0 30px rgba(196,30,58,.10); }
.tz-current:hover { box-shadow: inset 0 0 0 1px rgba(232,213,163,.18), var(--shadow-gold); }

.tz-current .label,
.tz-next .label {
    text-transform: uppercase;
    letter-spacing: .25em;
    font-size: .68rem;
    color: var(--text-muted);
    margin-bottom: .3rem;
}

.tz-current .zone,
.tz-next .zone {
    font-size: 1.35rem;
    font-weight: 700;
    background: var(--grad-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1.15;
    margin-bottom: .35rem;
}

.tz-next .zone { font-size: 1.05rem; opacity: .85; }

.act-badge {
    display: inline-block;
    padding: .15rem .55rem;
    font-size: .65rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(199,179,119,.25), rgba(139,115,85,.15));
    border: 1px solid rgba(199,179,119,.35);
    color: var(--d2r-gold-bright);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.immunity-pills { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }

.immunity-pill {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .55rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 600;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(4px);
    transition: transform var(--motion-fast) var(--easing-spring),
                box-shadow var(--motion-fast) var(--easing-out);
}

.immunity-pill:hover { transform: translateY(-1px); }
.immunity-pill.fire   { color: #ffb070; box-shadow: inset 0 0 0 1px rgba(255,140,60,.35), 0 0 12px rgba(255,140,60,.15); }
.immunity-pill.cold   { color: #9ed3ff; box-shadow: inset 0 0 0 1px rgba(120,180,255,.35), 0 0 12px rgba(120,180,255,.15); }
.immunity-pill.light  { color: #ffe680; box-shadow: inset 0 0 0 1px rgba(255,220,100,.4),  0 0 12px rgba(255,220,100,.18); }
.immunity-pill.poison { color: #b6ff90; box-shadow: inset 0 0 0 1px rgba(140,255,120,.35), 0 0 12px rgba(140,255,120,.15); }
.immunity-pill.magic  { color: #d8a8ff; box-shadow: inset 0 0 0 1px rgba(190,140,255,.4),  0 0 12px rgba(190,140,255,.18); }
.immunity-pill.phys   { color: #cfcfcf; box-shadow: inset 0 0 0 1px rgba(220,220,220,.3),  0 0 12px rgba(220,220,220,.10); }

.tz-bosspacks,
.tz-superunique {
    display: inline-block;
    margin: .55rem .5rem 0 0;
    padding: .25rem .6rem;
    font-size: .72rem;
    border-radius: 8px;
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(199,179,119,.25);
}

/* COUNTDOWN RING — bigger, glowy */
.countdown-ring {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 1rem auto .25rem;
    filter: drop-shadow(0 0 18px rgba(199,179,119,.25));
}
.countdown-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.countdown-ring .ring-bg { fill: none; stroke: rgba(255,255,255,.06); stroke-width: 6; }
.countdown-ring .ring-fg {
    fill: none;
    stroke: url(#ringGrad);
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dasharray 1s linear;
}
.countdown-ring .ring-fg.warning-glow  { filter: drop-shadow(0 0 8px rgba(255,200,90,.7)); }
.countdown-ring .ring-fg.critical-glow { filter: drop-shadow(0 0 12px rgba(255,90,90,.85)); }
.countdown-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.85rem;
    font-weight: 700;
    background: var(--grad-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: .04em;
}
.countdown-text.pulse { animation: countdownPulse .9s ease-in-out infinite; }
@keyframes countdownPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,90,90,0)); }
    50%      { transform: scale(1.06); filter: drop-shadow(0 0 12px rgba(255,90,90,.6)); }
}

/* TZ loading spinner */
.tz-loading {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
    background: rgba(10,8,6,.75);
    backdrop-filter: blur(8px);
    z-index: 9990;
}
.tz-loading.active { display: flex; animation: fadeIn .25s ease both; }
.tz-loading-spinner {
    width: 56px; height: 56px;
    border-radius: 50%;
    border: 3px solid rgba(199,179,119,.18);
    border-top-color: var(--d2r-gold-bright);
    animation: spin .8s linear infinite;
    box-shadow: 0 0 24px rgba(199,179,119,.35);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   SKELETON LOADER
   ============================================================ */
.skeleton {
    background:
        linear-gradient(90deg, transparent, rgba(232,213,163,.08), transparent),
        rgba(255,255,255,.04);
    background-size: 200% 100%, 100% 100%;
    animation: skel 1.4s ease-in-out infinite;
    border-radius: 6px;
    color: transparent !important;
    user-select: none;
}
@keyframes skel { 0% { background-position: -150% 0; } 100% { background-position: 150% 0; } }

/* ============================================================
   HOLY GRAIL — tables + filter chips
   ============================================================ */

.controls {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    align-items: center;
    padding: .85rem 1rem;
    background: var(--grad-card);
    border: 1px solid var(--border-gold);
    border-radius: 14px;
    box-shadow: var(--shadow-2);
    position: sticky;
    top: 60px;
    z-index: 50;
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
}

.search-box {
    flex: 1 1 220px;
    min-width: 220px;
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(199,179,119,.25);
    border-radius: 10px;
    color: var(--text);
    padding: .55rem .8rem;
    font-family: inherit;
    font-size: .85rem;
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.search-box::placeholder { color: var(--text-dim); }
.search-box:focus {
    outline: none;
    border-color: var(--d2r-gold-bright);
    box-shadow: var(--ring-gold);
}

.filter-btn {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(199,179,119,.18);
    color: var(--text-muted);
    padding: .4rem .75rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    cursor: pointer;
    transition:
        transform var(--motion-fast) var(--easing-spring),
        background var(--motion-fast) var(--easing-out),
        border-color var(--motion-fast) var(--easing-out),
        color var(--motion-fast) var(--easing-out),
        box-shadow var(--motion-fast) var(--easing-out);
}
.filter-btn:hover { transform: translateY(-1px); color: var(--text); border-color: rgba(199,179,119,.45); }
.filter-btn.active {
    background: var(--grad-gold);
    color: #1a1208;
    border-color: transparent;
    box-shadow: var(--shadow-gold-strong);
}
.filter-btn.active::before {
    content: "✓ ";
}

.reset-btn {
    background: transparent;
    border: 1px solid rgba(196,30,58,.45);
    color: #ff8b9b;
    padding: .4rem .8rem;
    border-radius: 999px;
    cursor: pointer;
    font-size: .72rem;
    font-weight: 600;
    transition: all var(--motion-fast) var(--easing-out);
}
.reset-btn:hover {
    background: rgba(196,30,58,.18);
    box-shadow: var(--shadow-red-strong);
    color: #ffb6c1;
}

/* ============================================================
   PROGRESS BAR (Holy Grail)
   ============================================================ */

.progress-container {
    position: relative;
    height: 26px;
    background: rgba(0,0,0,.45);
    border: 1px solid var(--border-gold);
    border-radius: 999px;
    overflow: hidden;
    box-shadow: inset 0 2px 6px rgba(0,0,0,.6);
}

.progress-fill {
    height: 100%;
    background:
        linear-gradient(110deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%),
        var(--grad-gold);
    background-size: 200% 100%, 100% 100%;
    transition: width 1.2s var(--easing-spring);
    box-shadow: 0 0 16px rgba(232,213,163,.5);
    animation: progressShine 3s ease-in-out infinite;
}
@keyframes progressShine {
    0%   { background-position: -150% 0, 0 0; }
    100% { background-position: 150% 0, 0 0; }
}

.progress-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .85rem;
    color: #1a1208;
    text-shadow: 0 1px 0 rgba(232,213,163,.6);
    mix-blend-mode: difference;
    filter: invert(1);
    pointer-events: none;
}

/* ============================================================
   TABLE — runewords list
   ============================================================ */

.table-wrap {
    border-radius: 14px;
    overflow-x: auto;
    overflow-y: visible;
    max-height: none;
    border: 1px solid var(--border-gold);
    box-shadow: var(--shadow-3);
    background: var(--bg-card-alt);
}

table { border-collapse: collapse; width: 100%; }

thead th {
    position: sticky;
    top: 110px;   /* below sticky controls */
    background: linear-gradient(180deg, rgba(40,32,22,.95), rgba(20,16,12,.95));
    backdrop-filter: blur(10px);
    color: var(--d2r-gold-bright);
    font-weight: 700;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    padding: .7rem .6rem;
    text-align: left;
    border-bottom: 1px solid var(--border-gold);
    z-index: 10;
}

tbody tr {
    transition:
        background var(--motion-fast) var(--easing-out),
        transform var(--motion-fast) var(--easing-spring),
        box-shadow var(--motion-fast) var(--easing-out);
    border-bottom: 1px solid rgba(199,179,119,.08);
}
tbody tr:hover {
    background: linear-gradient(90deg, rgba(199,179,119,.08), transparent 80%);
    box-shadow: inset 3px 0 0 var(--d2r-gold-bright);
    transform: translateX(2px);
}
tbody tr.checked {
    background: linear-gradient(90deg, rgba(120,200,120,.07), transparent);
}
tbody tr.checked td { opacity: .55; }
tbody tr.checked td.check-cell { opacity: 1; }
tbody td {
    padding: .55rem .6rem;
    font-size: .82rem;
    vertical-align: middle;
}

/* CHECKBOX (modernized) */
td.check-cell { width: 36px; }

.grail-check {
    appearance: none;
    -webkit-appearance: none;
    width: 22px; height: 22px;
    border-radius: 6px;
    border: 1.5px solid rgba(199,179,119,.45);
    background: rgba(0,0,0,.4);
    cursor: pointer;
    position: relative;
    transition: all var(--motion-fast) var(--easing-spring);
    display: inline-block;
    vertical-align: middle;
}
.grail-check:hover {
    border-color: var(--d2r-gold-bright);
    box-shadow: var(--shadow-gold);
    transform: scale(1.08);
}
.grail-check:checked {
    background: var(--grad-gold);
    border-color: transparent;
    box-shadow: 0 0 0 2px rgba(232,213,163,.35), 0 0 18px rgba(232,213,163,.45);
    animation: grailPop .35s var(--easing-spring);
}
.grail-check:checked::after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1208;
    font-weight: 900;
    font-size: 14px;
}
@keyframes grailPop {
    0%   { transform: scale(.7); }
    60%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}

/* RUNE PILLS inside table */
.rune-pill {
    display: inline-block;
    padding: .12rem .45rem;
    margin: 0 .12rem .12rem 0;
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(199,179,119,.18), rgba(139,115,85,.08));
    border: 1px solid rgba(199,179,119,.3);
    color: var(--d2r-gold-bright);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* ============================================================
   BUTTONS (calculate, export, reset stock)
   ============================================================ */

.btn-calculate,
.btn-export,
.btn-reset-stock {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1rem;
    border-radius: 10px;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition:
        transform var(--motion-fast) var(--easing-spring),
        box-shadow var(--motion-fast) var(--easing-out);
    border: 1px solid transparent;
}

.btn-calculate {
    background: var(--grad-gold);
    color: #1a1208;
    box-shadow: var(--shadow-gold);
}
.btn-calculate:hover { transform: translateY(-2px); box-shadow: var(--shadow-gold-strong); }

.btn-export {
    background: rgba(199,179,119,.1);
    border-color: rgba(199,179,119,.4);
    color: var(--d2r-gold-bright);
}
.btn-export:hover { background: rgba(199,179,119,.18); transform: translateY(-2px); }

.btn-reset-stock {
    background: transparent;
    border-color: rgba(196,30,58,.4);
    color: #ff8b9b;
}
.btn-reset-stock:hover { background: rgba(196,30,58,.18); transform: translateY(-2px); }

.runecatcher-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1rem 0; }

/* RUNE STOCK GRID */
.rune-stock-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: .55rem;
}
.rune-stock-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: .55rem .35rem .45rem;
    background: var(--grad-card);
    border: 1px solid rgba(199,179,119,.2);
    border-radius: 10px;
    transition: transform var(--motion-fast) var(--easing-spring),
                border-color var(--motion-fast) var(--easing-out),
                box-shadow var(--motion-fast) var(--easing-out);
}
.rune-stock-item:hover {
    transform: translateY(-2px);
    border-color: var(--d2r-gold-bright);
    box-shadow: var(--shadow-gold);
}
.rune-stock-item .rune-num { font-size: .65rem; color: var(--text-dim); }
.rune-stock-item .rune-name {
    font-weight: 700;
    background: var(--grad-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: .9rem;
}
.rune-stock-item input {
    width: 60px;
    text-align: center;
    background: rgba(0,0,0,.5);
    border: 1px solid rgba(199,179,119,.25);
    border-radius: 6px;
    color: var(--text);
    font-family: inherit;
    padding: .2rem;
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.rune-stock-item input:focus { outline: none; border-color: var(--d2r-gold-bright); box-shadow: var(--ring-gold); }
.rune-stock-item.tier-common    { border-color: rgba(180,180,180,.25); }
.rune-stock-item.tier-uncommon  { border-color: rgba(110,200,110,.25); }
.rune-stock-item.tier-rare      { border-color: rgba(120,180,255,.3); }
.rune-stock-item.tier-epic      { border-color: rgba(190,140,255,.35); }
.rune-stock-item.tier-legendary { border-color: rgba(255,180,90,.45); box-shadow: 0 0 16px rgba(255,180,90,.15); }

/* ============================================================
   LANGUAGE TOGGLE
   ============================================================ */
.lang-toggle { display: inline-flex; gap: .25rem; }
.lang-toggle button {
    background: rgba(0,0,0,.4);
    border: 1px solid rgba(199,179,119,.3);
    color: var(--text-muted);
    padding: .25rem .55rem;
    font-size: .72rem;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    letter-spacing: .1em;
    transition: all var(--motion-fast) var(--easing-out);
}
.lang-toggle button:hover { color: var(--d2r-gold-bright); border-color: var(--d2r-gold-bright); }
.lang-toggle button.active {
    background: var(--grad-gold);
    color: #1a1208;
    border-color: transparent;
    box-shadow: var(--shadow-gold);
}

/* ============================================================
   FOOTER
   ============================================================ */
.minimal-footer,
.site-footer {
    text-align: center;
    padding: 1.5rem 1rem 2.5rem;
    color: var(--text-dim);
    font-size: .72rem;
    margin-top: 3rem;
    border-top: 1px solid rgba(199,179,119,.12);
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.4));
}
.footer-line {
    width: 100px;
    height: 1px;
    background: var(--grad-gold);
    margin: 0 auto 1rem;
    opacity: .4;
}

/* ============================================================
   CONFETTI (Holy Grail check)
   ============================================================ */
.confetti-piece {
    position: fixed;
    width: 8px; height: 8px;
    pointer-events: none;
    z-index: 9999;
    border-radius: 1px;
}

/* ============================================================
   ENTRANCE STAGGER HOOK (motion-fx.js)
   ============================================================ */
[data-anim="reveal"] {
    opacity: 0;
    transform: translateY(14px);
}
[data-anim-ready] [data-anim="reveal"] {
    opacity: 1;
    transform: none;
    transition: opacity .65s var(--easing-out), transform .65s var(--easing-spring);
}

/* ============================================================
   ACCESSIBILITY / MOTION REDUCE
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 640px) {
    .controls { top: 56px; padding: .65rem .75rem; gap: .4rem; }
    thead th { top: 105px; }
    .countdown-ring { width: 110px; height: 110px; }
    .countdown-text { font-size: 1.45rem; }
    .tz-current .zone, .tz-next .zone { font-size: 1.05rem; }
    .rune-stock-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
}