/* Winter / New Year theme */
:root { --ice: #bae6fd; --ice-2: #e0f2fe; --xmas-red: #ef4444; --xmas-green: #22c55e; }

#snow-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* Aurora behind everything */
.bg-fx::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 60%;
  background:
    radial-gradient(40% 70% at 20% 30%, rgba(34, 211, 238, .22), transparent 70%),
    radial-gradient(35% 60% at 60% 20%, rgba(52, 211, 153, .16), transparent 70%),
    radial-gradient(40% 70% at 85% 40%, rgba(129, 140, 248, .20), transparent 70%);
  filter: blur(24px); animation: aurora 14s ease-in-out infinite alternate;
}
@keyframes aurora { from { transform: translateX(-4%) skewX(-4deg); opacity: .7; } to { transform: translateX(5%) skewX(5deg); opacity: 1; } }

/* Garland */
#garland { position: fixed; top: 0; left: 0; right: 0; height: 34px; z-index: 60; pointer-events: none; display: flex; justify-content: space-around; overflow: hidden; }
#garland::before { content: ""; position: absolute; left: -2%; right: -2%; top: -14px; height: 28px; border-bottom: 2px solid rgba(148, 163, 184, .45); border-radius: 0 0 50% 50% / 0 0 100% 100%; }
#garland i { position: relative; width: 9px; height: 13px; margin-top: 9px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; animation: twinkle 1.8s ease-in-out infinite; }
#garland i::before { content: ""; position: absolute; left: 2px; top: -5px; width: 5px; height: 6px; background: #475569; border-radius: 1px; }
#garland i:nth-child(4n+1) { background: var(--xmas-red); color: var(--xmas-red); }
#garland i:nth-child(4n+2) { background: #fbbf24; color: #fbbf24; animation-delay: .4s; }
#garland i:nth-child(4n+3) { background: var(--xmas-green); color: var(--xmas-green); animation-delay: .8s; }
#garland i:nth-child(4n)   { background: #38bdf8; color: #38bdf8; animation-delay: 1.2s; }
@keyframes twinkle { 0%, 100% { opacity: .45; box-shadow: 0 0 2px currentColor; } 50% { opacity: 1; box-shadow: 0 0 12px 3px currentColor; } }
#app, #admin { padding-top: 40px; }

/* Countdown */
.ny-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; padding: 12px 14px;
  border-radius: 14px; border: 1px solid rgba(186, 230, 253, .35);
  background: linear-gradient(110deg, rgba(14, 165, 233, .18), rgba(99, 102, 241, .16), rgba(239, 68, 68, .14));
  background-size: 200% 100%; animation: bannerShift 8s linear infinite alternate; position: relative; overflow: hidden;
}
.ny-banner::after { content: ""; position: absolute; top: 0; bottom: 0; width: 60px; left: -80px; background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent); animation: sweep 4.5s ease-in-out infinite; }
@keyframes bannerShift { to { background-position: 100% 0; } }
@keyframes sweep { 60%, 100% { left: 120%; } }
.ny-title { font-size: 13px; font-weight: 800; color: var(--ice-2); }
.ny-title small { display: block; font-size: 10px; font-weight: 600; color: var(--muted); margin-top: 2px; }
.ny-time { display: flex; gap: 6px; font-family: var(--mono); }
.ny-time div { min-width: 38px; text-align: center; padding: 5px 4px; border-radius: 8px; background: rgba(2, 6, 13, .55); border: 1px solid var(--line); }
.ny-time b { display: block; font-size: 16px; color: #fff; font-variant-numeric: tabular-nums; }
.ny-time span { display: block; font-size: 8px; color: var(--muted); text-transform: uppercase; }

/* Icy glow on mode cards */
#card-standard, #card-ultra, #card-solar { animation: icyPulse 4s ease-in-out infinite; }
#card-ultra { animation-delay: 1.3s; } #card-solar { animation-delay: 2.6s; }
@keyframes icyPulse { 0%, 100% { box-shadow: 0 0 0 rgba(186, 230, 253, 0); } 50% { box-shadow: 0 0 22px rgba(186, 230, 253, .22); } }
.brand h1 .accent { background: linear-gradient(90deg, #7dd3fc, #e0f2fe, #7dd3fc); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: frost 5s linear infinite; }
@keyframes frost { to { background-position: 200% 0; } }

@media (prefers-reduced-motion: reduce) {
  #garland i, .bg-fx::before, .ny-banner, .ny-banner::after, #card-standard, #card-ultra, #card-solar, .brand h1 .accent, .brand-logo::after { animation: none !important; }
  #snow-canvas { display: none; }
}

/* ===== Redesign v2: frosted glass, gradient hairlines, softer geometry ===== */
:root {
  --radius: 18px; --radius-lg: 24px;
  --sans: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --card-grad: linear-gradient(160deg, rgba(125, 211, 252, .45), rgba(99, 102, 241, .18) 40%, rgba(239, 68, 68, .28));
}
body { font-family: var(--sans); letter-spacing: .005em; }
.bg-fx .mesh {
  background:
    radial-gradient(60% 40% at 50% -5%, rgba(56, 189, 248, .20), transparent 60%),
    radial-gradient(50% 35% at 0% 60%, rgba(99, 102, 241, .16), transparent 60%),
    radial-gradient(50% 35% at 100% 85%, rgba(239, 68, 68, .10), transparent 60%),
    linear-gradient(180deg, #050b1c 0%, #070d22 45%, #04081a 100%);
}
.bg-fx .scanlines { display: none; }
.bg-fx .grid { opacity: .5; }

/* cards: frosted glass with a gradient hairline border */
.glass, .panel, .hero {
  border: 1px solid transparent; border-radius: var(--radius-lg);
  background:
    linear-gradient(rgba(10, 18, 38, .78), rgba(7, 13, 30, .82)) padding-box,
    var(--card-grad) border-box;
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.panel::before { display: none; }

.mode-card {
  border: 1px solid transparent; border-radius: 20px; padding: 16px 18px;
  background:
    linear-gradient(160deg, rgba(14, 26, 54, .92), rgba(8, 14, 32, .95)) padding-box,
    linear-gradient(135deg, rgba(125, 211, 252, .5), rgba(99, 102, 241, .15) 55%, rgba(255,255,255,.08)) border-box;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .25s;
}
.mode-card::before { display: none; }
.mode-card:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0, 0, 0, .45), 0 0 26px rgba(125, 211, 252, .16); }
.mode-card:active { transform: scale(.985); }
.mode-card .mode-ic { width: 48px; height: 48px; border-radius: 16px; background: linear-gradient(145deg, rgba(125,211,252,.22), rgba(99,102,241,.14)); border-color: rgba(186,230,253,.25); }
.mode-card.ultra { background: linear-gradient(160deg, rgba(40, 28, 10, .92), rgba(16, 12, 8, .95)) padding-box, linear-gradient(135deg, rgba(251,191,36,.75), rgba(245,158,11,.15) 60%, rgba(255,255,255,.08)) border-box; }
.mode-card.solar { border-radius: 20px; }

.btn { border-radius: 16px; font-weight: 800; letter-spacing: .01em; }
.btn-primary { background: linear-gradient(135deg, #38bdf8, #6366f1); box-shadow: 0 8px 22px rgba(99, 102, 241, .38), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-primary:active { box-shadow: 0 3px 10px rgba(99, 102, 241, .3); }
.btn:not(.btn-primary):not(.btn-success) { background: rgba(255,255,255,.05); border: 1px solid rgba(186,230,253,.2); backdrop-filter: blur(8px); }

.block-title { font-family: var(--sans); font-size: 11px; letter-spacing: .16em; font-weight: 800; }
.block-title::before { content: "❄ "; opacity: .8; }
.menu-signals .block-title { color: #7dd3fc; } .menu-events .block-title { color: #fca5a5; }
.brand-logo { border-radius: 16px; background: linear-gradient(145deg, #38bdf8, #6366f1); box-shadow: 0 8px 22px rgba(99,102,241,.45), inset 0 1px 0 rgba(255,255,255,.4); }
.brand h1 { font-weight: 800; letter-spacing: -.01em; }
.stat-pill, .balance-chip, .pair-cell, .exp-cell, .hot-chip, .hot-row, .kpi { border-radius: 16px; }
.pair-cell, .exp-cell { background: linear-gradient(160deg, rgba(14,26,54,.9), rgba(8,14,32,.92)); transition: transform .18s, border-color .2s, box-shadow .2s; }
.pair-cell:hover, .exp-cell:hover { transform: translateY(-2px); }
.ny-banner, .ny-scene { border-radius: 20px; }
#app { max-width: 600px; }
::selection { background: rgba(125, 211, 252, .35); }

/* ===== Winter Battle Pass v2 ===== */
.bp-hero { background: linear-gradient(150deg, rgba(14, 38, 84, .9), rgba(30, 20, 70, .85)) padding-box, linear-gradient(135deg, rgba(125,211,252,.6), rgba(167,139,250,.25), rgba(239,68,68,.35)) border-box; border: 1px solid transparent; border-radius: 22px; }
.bp-hero-glow { background: radial-gradient(60% 80% at 80% 0%, rgba(125, 211, 252, .28), transparent 70%) !important; }
.bp-season { background: linear-gradient(90deg, #7dd3fc, #c4b5fd); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; letter-spacing: .12em; }
.bp-level-row { display: flex; align-items: center; gap: 14px; margin-top: 12px; position: relative; }
.bp-level { width: 62px; height: 62px; border-radius: 20px; display: grid; place-content: center; text-align: center; background: linear-gradient(145deg, #38bdf8, #6366f1); box-shadow: 0 8px 24px rgba(99, 102, 241, .45), inset 0 1px 0 rgba(255,255,255,.4); }
.bp-level small { font-size: 9px; font-weight: 800; letter-spacing: .14em; color: rgba(255,255,255,.8); }
.bp-level b { font-size: 24px; line-height: 1; color: #fff; font-family: var(--mono); }
.bp-ends { font-size: 12px; font-weight: 700; color: var(--ice-2); font-family: var(--mono); }
.bp-next { font-size: 12px; color: var(--muted); margin-top: 3px; }
.bp-progress-fill { background: linear-gradient(90deg, #38bdf8, #a78bfa, #f472b6) !important; box-shadow: 0 0 14px rgba(167, 139, 250, .55); }

.bp-block-title { margin: 18px 2px 10px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ice); }

/* streak */
.bp-streak { padding: 14px; }
.st-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.st-day { position: relative; text-align: center; padding: 8px 2px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; align-items: center; }
.st-day small { font-size: 8px; color: var(--muted); font-weight: 700; text-transform: uppercase; }
.st-day .st-ic { font-size: 18px; line-height: 1.1; }
.st-day b { font-size: 10px; font-family: var(--mono); color: var(--text); }
.st-day.done { background: rgba(34, 197, 94, .12); border-color: rgba(34, 197, 94, .4); }
.st-day.done .st-ic { color: var(--green); font-weight: 800; }
.st-day.current { border-color: #fde047; background: rgba(253, 224, 71, .1); box-shadow: 0 0 16px rgba(253, 224, 71, .25); animation: stPulse 1.8s ease-in-out infinite; }
.st-day.big { background: linear-gradient(160deg, rgba(167, 139, 250, .2), rgba(239, 68, 68, .12)); border-color: rgba(196, 181, 253, .5); }
.st-day.big .st-ic { font-size: 22px; }
@keyframes stPulse { 50% { transform: translateY(-3px); box-shadow: 0 0 22px rgba(253, 224, 71, .45); } }
.st-claim { width: 100%; margin-top: 12px; }
.st-claim:disabled { opacity: .55; }
.st-hint { margin: 10px 2px 0; font-size: 11px; color: var(--muted); line-height: 1.5; }

/* quests */
.bp-quests { display: flex; flex-direction: column; gap: 8px; }
.bp-quest { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.04); }
.bp-quest.ready { border-color: rgba(253, 224, 71, .5); box-shadow: 0 0 18px rgba(253, 224, 71, .12); }
.bp-quest.claimed { opacity: .55; }
.q-body { flex: 1; min-width: 0; }
.q-name { font-size: 13px; font-weight: 700; }
.q-bar { height: 6px; border-radius: 3px; background: rgba(0,0,0,.4); margin: 7px 0 5px; overflow: hidden; }
.q-bar span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #38bdf8, #22c55e); transition: width .5s; }
.q-sub { font-size: 11px; color: var(--muted); font-family: var(--mono); }

/* track */
.bp-track { position: relative; gap: 10px; padding-left: 4px; }
.bp-track::before { content: ""; position: absolute; left: 21px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(180deg, rgba(125,211,252,.5), rgba(167,139,250,.25), transparent); }
.bp-tier { position: relative; border-radius: 18px; padding: 12px 14px 12px 12px; gap: 12px; align-items: center; transition: transform .2s; }
.bp-node { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 800; font-family: var(--mono); background: #0b1630; border: 2px solid rgba(125,211,252,.45); color: var(--ice); z-index: 1; }
.bp-tier.unlocked .bp-node, .bp-tier.claimable .bp-node { background: #38bdf8; color: #04101c; border-color: #bae6fd; }
.bp-tier.claimed .bp-node { background: #22c55e; border-color: #86efac; color: #04101c; }
.bp-tier-ic { width: 46px; height: 46px; border-radius: 15px; font-size: 22px; background: rgba(255,255,255,.06); }
.bp-tier.t-ultra_token .bp-tier-ic { background: rgba(245, 158, 11, .16); box-shadow: 0 0 14px rgba(245, 158, 11, .25); }
.bp-tier.t-money .bp-tier-ic { background: rgba(34, 197, 94, .14); box-shadow: 0 0 14px rgba(34, 197, 94, .2); }
.bp-tier.t-spin .bp-tier-ic { background: rgba(99, 102, 241, .18); box-shadow: 0 0 14px rgba(99, 102, 241, .25); }
.bp-tier.t-snow_pass .bp-tier-ic { background: rgba(125, 211, 252, .2); box-shadow: 0 0 16px rgba(125, 211, 252, .4); }
.bp-tier.t-title .bp-tier-ic { background: linear-gradient(145deg, rgba(251,191,36,.3), rgba(239,68,68,.2)); box-shadow: 0 0 18px rgba(251, 191, 36, .35); }
.bp-tier.big { padding-top: 16px; padding-bottom: 16px; border-color: rgba(196, 181, 253, .45); background: linear-gradient(120deg, rgba(167,139,250,.12), rgba(56,189,248,.07)); }
.bp-tier.big .bp-tier-reward { font-size: 15px; }
.bp-tier.claimable { animation: stPulse 2s ease-in-out infinite; }

/* ===== Pairs ===== */
.pair-grid { gap: 12px; }
.pair-cell { position: relative; padding: 16px 12px 12px; text-align: left; border-radius: 20px; overflow: hidden;
  background: linear-gradient(160deg, rgba(16, 30, 62, .92), rgba(8, 14, 32, .95)) padding-box, linear-gradient(135deg, rgba(125,211,252,.4), rgba(99,102,241,.12) 55%, rgba(255,255,255,.06)) border-box;
  border: 1px solid transparent; box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.pair-cell::before { content: ""; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, rgba(125,211,252,.18), transparent 70%); }
.pair-cell:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(0,0,0,.45), 0 0 22px rgba(125,211,252,.18); }
.pc-flags { display: inline-flex; margin-bottom: 10px; }
.pc-av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; font-family: var(--sans);
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.45), var(--c) 60%); border: 2px solid #0a1530; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.pc-av + .pc-av { margin-left: -9px; }
.pc-name { font-family: var(--mono); font-size: 15px; font-weight: 800; letter-spacing: .01em; }
.pair-cell .otc { display: inline-block; margin: 4px 6px 0 0; padding: 2px 7px; border-radius: 999px; font-size: 9px; letter-spacing: .08em; background: rgba(125,211,252,.12); color: var(--ice); }
.pair-cell .spark { height: 26px; margin-top: 8px; width: 100%; }
.pair-cell.hot-pick { box-shadow: 0 0 0 1px rgba(251,191,36,.5), 0 10px 26px rgba(251,146,60,.18); }
.pair-all-title { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ice); margin: 18px 2px 10px; }

/* ===== Expiration ===== */
.selected-pair { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 16px; border-radius: 20px; text-align: left;
  background: linear-gradient(135deg, rgba(14,38,84,.9), rgba(30,20,70,.85)) padding-box, linear-gradient(135deg, rgba(125,211,252,.55), rgba(167,139,250,.25)) border-box; border: 1px solid transparent; }
.selected-pair .pc-flags { margin: 0; } .selected-pair .pc-av { width: 38px; height: 38px; font-size: 15px; }
.sp-txt { flex: 1; } .sp-txt b { display: block; font-family: var(--mono); font-size: 20px; color: var(--cyan); } .sp-txt small { color: var(--muted); font-size: 11px; letter-spacing: .08em; }
.sp-live { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; letter-spacing: .1em; color: var(--green); }
.sp-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: twinkle 1.4s infinite; }
.exp-list { gap: 12px; }
.exp-cell { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 10px 14px; border-radius: 22px;
  background: linear-gradient(160deg, rgba(16,30,62,.92), rgba(8,14,32,.95)) padding-box, linear-gradient(135deg, rgba(125,211,252,.4), rgba(99,102,241,.12) 55%, rgba(255,255,255,.06)) border-box; border: 1px solid transparent; }
.ex-ring { width: 64px; height: 64px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: radial-gradient(circle at 50% 40%, rgba(14,30,64,1) 55%, transparent 56%), conic-gradient(from 200deg, #38bdf8, #a78bfa, #f472b6, #38bdf8); box-shadow: 0 0 20px rgba(125,211,252,.25); }
.ex-ring b { font-size: 22px; line-height: 1; font-family: var(--mono); color: #fff; } .ex-ring small { font-size: 9px; font-weight: 800; letter-spacing: .1em; color: var(--ice); text-transform: uppercase; }
.ex-txt { font-size: 13px; font-weight: 700; } .ex-tag { font-size: 10px; font-weight: 800; letter-spacing: .08em; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.06); color: var(--ice); }
.exp-cell:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(0,0,0,.45), 0 0 24px rgba(167,139,250,.25); }

/* ===== Contests ===== */
.contest-card { padding: 20px; border-radius: 24px; text-align: center;
  background: linear-gradient(150deg, rgba(40,24,70,.92), rgba(12,26,60,.9)) padding-box, linear-gradient(135deg, rgba(253,224,71,.7), rgba(167,139,250,.3), rgba(56,189,248,.5)) border-box; border: 1px solid transparent; }
.contest-card::after { content: "🏆"; position: absolute; right: 14px; bottom: 6px; font-size: 64px; opacity: .13; transform: rotate(-12deg); }
.contest-top { justify-content: space-between; }
.contest-timer { padding: 4px 12px; border-radius: 999px; background: rgba(2,6,13,.5); border: 1px solid var(--line); font-family: var(--mono); }
.contest-prize { justify-content: center; flex-direction: column; align-items: center; gap: 2px; }
.contest-prize span { font-size: 46px; filter: drop-shadow(0 0 18px rgba(253,224,71,.35)); }
.contest-desc { text-align: center; }
.lb-me { border-radius: 18px; border: 1px solid rgba(125,211,252,.4); background: linear-gradient(120deg, rgba(56,189,248,.16), rgba(99,102,241,.1)); }
.lb-me .me-rank { font-size: 22px; font-family: var(--mono); }
.lb-title { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ice); margin: 18px 2px 12px; }
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 8px; margin-bottom: 12px; }
.pod { flex: 1 1 0; max-width: 34%; text-align: center; display: flex; flex-direction: column; align-items: center; }
.pod-av { position: relative; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; font-weight: 800; background: linear-gradient(145deg, #38bdf8, #6366f1); box-shadow: 0 6px 18px rgba(99,102,241,.4); border: 2px solid rgba(255,255,255,.35); }
.pod.p1 .pod-av { width: 62px; height: 62px; font-size: 24px; background: linear-gradient(145deg, #fde047, #f59e0b); color: #3b2a05; box-shadow: 0 0 24px rgba(253,224,71,.5); }
.pod-medal { position: absolute; right: -8px; bottom: -6px; font-size: 20px; }
.pod-name { margin-top: 8px; font-size: 12px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-cnt { font-family: var(--mono); font-size: 12px; color: var(--cyan); font-weight: 800; margin-bottom: 6px; }
.pod-step { width: 100%; border-radius: 12px 12px 0 0; display: grid; place-items: center; font-size: 22px; color: rgba(255,255,255,.9); background: linear-gradient(180deg, rgba(125,211,252,.25), rgba(125,211,252,.05)); }
.pod.p1 .pod-step { height: 74px; background: linear-gradient(180deg, rgba(253,224,71,.35), rgba(253,224,71,.05)); }
.pod.p2 .pod-step { height: 54px; } .pod.p3 .pod-step { height: 40px; }
.pod.me .pod-av { outline: 2px solid var(--cyan); outline-offset: 2px; }
.lb-row { border-radius: 16px; background: rgba(255,255,255,.04); }
.lb-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: linear-gradient(145deg, #38bdf8, #6366f1); }
.lb-row.me { border-color: rgba(125,211,252,.55); background: linear-gradient(90deg, rgba(56,189,248,.16), transparent); }

/* ===== Promo ===== */
.promo-hero { position: relative; overflow: hidden; padding: 26px 20px; border-radius: 24px;
  background: linear-gradient(150deg, rgba(20,30,80,.92), rgba(50,20,70,.88)) padding-box, linear-gradient(135deg, rgba(167,139,250,.6), rgba(244,114,182,.35), rgba(56,189,248,.5)) border-box; border: 1px solid transparent; }
.promo-emoji { position: relative; height: 70px; }
.promo-emoji .tk { position: absolute; top: 6px; font-size: 44px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)); animation: tkFloat 3.4s ease-in-out infinite; }
.promo-emoji .t1 { left: 50%; margin-left: -22px; z-index: 2; } .promo-emoji .t2 { left: 50%; margin-left: -70px; font-size: 32px; top: 18px; animation-delay: .6s; transform: rotate(-14deg); }
.promo-emoji .t3 { left: 50%; margin-left: 30px; font-size: 30px; top: 16px; animation-delay: 1.2s; transform: rotate(12deg); }
@keyframes tkFloat { 50% { translate: 0 -8px; } }
.spins-chip { padding: 10px 20px; background: rgba(2,6,13,.45); border: 1px dashed rgba(253,224,71,.5); }
.spins-chip b { font-size: 26px; font-family: var(--mono); }
.field { padding: 16px; border-radius: 22px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.field input { text-align: center; letter-spacing: .24em; font-family: var(--mono); font-weight: 800; font-size: 18px; text-transform: uppercase; border-radius: 16px; border: 2px dashed rgba(125,211,252,.4); background: rgba(2,6,13,.5); padding: 14px; }
.field input:focus { border-color: #7dd3fc; box-shadow: 0 0 18px rgba(125,211,252,.25); outline: none; }
#btn-open-wheel { margin-top: 12px; border-radius: 18px; background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff; box-shadow: 0 8px 22px rgba(239,68,68,.3); }

/* ===== Expiration: terminal-style rows ===== */
.exp-list { display: flex !important; flex-direction: column; gap: 10px; }
.exp-row { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px 14px 14px; border-radius: 16px; cursor: pointer; overflow: hidden;
  background: linear-gradient(90deg, rgba(16,28,56,.9), rgba(9,16,34,.92)); border: 1px solid rgba(125,160,210,.16);
  transition: transform .16s, border-color .2s, background .2s, box-shadow .2s; }
.exp-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, #38bdf8, #6366f1); opacity: .35; transition: opacity .2s; }
.exp-row:hover { transform: translateX(3px); border-color: rgba(125,211,252,.45); box-shadow: 0 10px 26px rgba(0,0,0,.4); background: linear-gradient(90deg, rgba(20,38,76,.95), rgba(11,20,42,.95)); }
.exp-row:hover::before { opacity: 1; }
.exp-row:active { transform: scale(.99); }
.er-code { flex-shrink: 0; width: 52px; height: 40px; display: grid; place-items: center; border-radius: 10px; font-family: var(--mono); font-size: 16px; font-weight: 700; color: #e0f2fe;
  background: rgba(125,211,252,.08); border: 1px solid rgba(125,211,252,.28); letter-spacing: .02em; }
.er-main { flex: 1; min-width: 0; }
.er-main b { display: block; font-size: 15px; font-weight: 700; }
.er-main small { display: block; margin-top: 3px; font-size: 11px; color: var(--muted); }
.er-bars { display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.er-bars i { width: 4px; border-radius: 1px; background: rgba(148,163,184,.25); }
.er-bars i.on { background: linear-gradient(180deg, #7dd3fc, #38bdf8); box-shadow: 0 0 6px rgba(56,189,248,.45); }
.er-go { font-size: 22px; color: var(--muted); transition: transform .2s, color .2s; }
.exp-row:hover .er-go { transform: translateX(3px); color: #7dd3fc; }
.selected-pair { border-radius: 16px; }

/* pair cell change badge */
.pc-chg { position: absolute; right: 10px; top: 14px; font-family: var(--mono); font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: 8px; }
.pc-chg.up { color: #6ee7b7; background: rgba(52, 211, 153, .12); }
.pc-chg.down { color: #fda4af; background: rgba(251, 113, 133, .12); }
.pair-cell .spark { height: 34px !important; margin-top: 10px; }

/* ===== Winter mode switch ===== */
#winter-toggle { position: fixed; right: 14px; bottom: 16px; z-index: 90; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  font-size: 18px; color: #e0f2fe; background: rgba(10, 20, 44, .78); border: 1px solid rgba(125, 211, 252, .4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 0 14px rgba(125,211,252,.18); transition: transform .15s, background .2s; opacity: .85; }
#winter-toggle:hover { opacity: 1; transform: scale(1.06); } #winter-toggle:active { transform: scale(.94); }
#winter-toggle.off { border-color: rgba(148,163,184,.35); box-shadow: 0 6px 18px rgba(0,0,0,.45); }

/* Calm mode: no snow, garland, countdown or festive glow */
html.calm #snow-canvas, html.calm #garland, html.calm .ny-banner, html.calm .snowcap { display: none !important; }
html.calm .bg-fx::before { display: none; }
html.calm .brand h1 .accent { animation: none; -webkit-text-fill-color: initial; background: none; color: var(--cyan); }
html.calm #card-standard, html.calm #card-ultra, html.calm #card-solar { animation: none; }
html.calm #app, html.calm #admin { padding-top: 16px; }