/* Benny's Wrap Rush — a magical North Pole night. A real conveyor machine with
   brass rollers hums under an aurora sky; gifts ride in as wrapped presents (read
   the NICE/NAUGHTY stamp!) and get flung to the wrap shelf or the coal chute in a
   burst of sparks. Cozy scene, loud juice, ramps into "Sleigh Fever" on a streak,
   freezes over for Frost Time, glitters for Sparkle Time, and goes red for Rush Hour. */
:root {
  --pine: #2f9e5f;
  --pine-deep: #17663d;
  --pine-soft: #dcefe3;
  --bg: #ecf3f1;
  --card: #fffdf7;
  --ink: #26382f;
  --ink-soft: #6c8377;
  --crit: #e5604d;
  --urg: #e8a13b;
  --min: #57b894;
  --gold: #f5c451;
  --coal: #3a4048;
  --sky-top: #0a1130;
  --sky-mid: #23245c;
  --brass: #d9b25a;
  --brass-d: #8a6a2e;
  --violet: #7c4dff;
  --ice: #bfe9ff;
  --shadow: rgba(3, 10, 25, 0.4);
  --radius: 16px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  font-family: 'Nunito', system-ui, sans-serif; color: var(--ink);
  background: linear-gradient(180deg, var(--sky-top), var(--sky-mid) 60%, #3b2a63 100%);
  -webkit-font-smoothing: antialiased; overscroll-behavior: none;
  -webkit-touch-callout: none; touch-action: manipulation; user-select: none;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input { font-family: inherit; }
[hidden] { display: none !important; }

/* ============ background scene ============ */
#scene { position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background: linear-gradient(180deg, var(--sky-top) 0%, #191a52 45%, #3a2a63 78%, #6a3a63 100%); }
.stars { position: absolute; inset: 0; opacity: .9;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 28% 9%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 44% 22%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 62% 12%, #cfe6ff, transparent),
    radial-gradient(1.7px 1.7px at 78% 26%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 90% 14%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 34% 40%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 84% 44%, #dce6ff, transparent),
    radial-gradient(1.6px 1.6px at 6% 52%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 54% 6%, #fff, transparent);
  animation: twinkle 3.5s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .55; } to { opacity: 1; } }
.aurora { position: absolute; left: -25%; right: -25%; top: -8%; height: 62%;
  filter: blur(30px); mix-blend-mode: screen; opacity: .5; transition: opacity .6s, filter .6s; }
.aurora.a1 { background: radial-gradient(60% 100% at 28% 0%, rgba(70,240,180,.55), transparent 70%);
  animation: auroraDrift 15s ease-in-out infinite; }
.aurora.a2 { background: radial-gradient(55% 100% at 66% 0%, rgba(120,150,255,.5), transparent 72%);
  animation: auroraDrift 21s ease-in-out infinite reverse; }
.aurora.a3 { background: radial-gradient(45% 90% at 48% 0%, rgba(180,110,230,.4), transparent 72%);
  animation: auroraDrift 18s ease-in-out infinite; }
@keyframes auroraDrift { 0%,100% { transform: translateX(-4%) scaleY(1); } 50% { transform: translateX(6%) scaleY(1.15); } }
.moon { position: absolute; top: 7%; right: 12%; width: 52px; height: 52px; border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #fffdf0, #e6dfb8);
  box-shadow: 0 0 42px rgba(255,248,214,.55), inset -6px -4px 0 rgba(0,0,0,.05); }
.ground { position: absolute; left: -5%; right: -5%; bottom: 0; height: 20%;
  background: linear-gradient(180deg, #eaf3fc, #c9dcef);
  border-radius: 50% 50% 0 0 / 26% 26% 0 0; box-shadow: 0 -6px 26px rgba(255,255,255,.35); }
.tree { position: absolute; bottom: 11%; font-size: 30px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.tree.t1 { left: 6%; } .tree.t2 { right: 8%; font-size: 24px; bottom: 12%; }

/* ============ shell ============ */
#app {
  position: relative; z-index: 1; max-width: 560px; margin: 0 auto; height: 100dvh;
  display: flex; flex-direction: column; background: transparent; overflow: hidden;
}

/* ---------- HUD ---------- */
#hud {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 5px;
  padding: calc(6px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 7px calc(10px + env(safe-area-inset-left));
  background: linear-gradient(180deg, #0b1130, #17663d);
  color: #fff; box-shadow: 0 3px 14px var(--shadow); z-index: 5; transition: background .5s;
}
body.rush #hud { background: linear-gradient(180deg, #2a0b16, #8f0f22); }
body.sparkle #hud { background: linear-gradient(180deg, #2a1e05, #a8741a); }
.hud-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hud-left { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.hud-left img.logo { width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 2px rgba(255,255,255,.7); }
.hud-left .title { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 17px; white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.hud-stats { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; justify-content: flex-end; min-width: 0; }
.stat { display: flex; align-items: center; gap: 4px; background: rgba(255,255,255,.16);
  padding: 4px 8px; border-radius: 999px; font-weight: 800; font-size: 13px; white-space: nowrap; }
.stat.score { transition: transform .12s; }
.stat.score.bump { animation: scoreBump .32s ease; }
@keyframes scoreBump { 30% { transform: scale(1.22); color: #ffe6a8; } }
.stat.combo { min-width: 42px; justify-content: center; transition: transform .12s, background .2s, box-shadow .2s; }
.stat.combo.hot { background: var(--gold); color: #4a3410; transform: scale(1.06); }
.stat.combo[data-tier="2"] { box-shadow: 0 0 12px rgba(245,196,81,.7); }
.stat.combo[data-tier="3"] { background: linear-gradient(90deg,#ff8a3d,#f5c451); box-shadow: 0 0 18px rgba(255,138,61,.8); animation: comboThrob .5s infinite; }
@keyframes comboThrob { 50% { transform: scale(1.14); } }
.stat.timer { background: rgba(0,0,0,.3); font-variant-numeric: tabular-nums; }
.stat.timer.low { background: var(--crit); animation: comboThrob .5s infinite; }
.stat.target { background: rgba(0,0,0,.3); color: #ffe6a8; }
.stat.target.beaten { background: var(--gold); color: #4a3410; }

.rep-bar { display: flex; align-items: center; gap: 7px; }
.rep-bar .rep-icon { font-size: 14px; flex: 0 0 auto; }
.rep-bar .bar { flex: 1 1 auto; height: 12px; background: rgba(0,0,0,.28); border-radius: 999px; overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.4); }
.rep-bar #rep-fill { height: 100%; width: 100%; background: var(--min); border-radius: 999px;
  transition: width .25s, background .25s; box-shadow: 0 0 10px rgba(87,184,148,.7); }
.rep-bar .rep-label { flex: 0 0 auto; font-weight: 800; font-size: 12px; min-width: 24px; text-align: right; }
.rep-bar.low .rep-icon { animation: lowThump .5s infinite; }
.rep-bar.low #rep-fill { box-shadow: 0 0 12px rgba(229,96,77,.9); }
@keyframes lowThump { 50% { transform: scale(1.22); } }

/* Santa's sleigh loader — fills gold with each wrapped gift */
#sleigh-fill { height: 100%; width: 0%; border-radius: 999px;
  transition: width .3s cubic-bezier(.3,1.5,.5,1);
  background: linear-gradient(90deg, #e8a13b, #f5c451 60%, #ffe6a8);
  box-shadow: 0 0 10px rgba(245,196,81,.75); }

.hud-btn { font-size: 17px; background: rgba(255,255,255,.18); width: 32px; height: 30px; border-radius: 9px; }
.hud-btn:active { transform: scale(.92); }
@media (max-width: 430px) { .hud-left .title { display: none; } }

/* ---------- stage ---------- */
#stage {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  padding: 7px calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));
  gap: 7px; overflow: hidden;
  touch-action: none; /* so vertical swipes aren't stolen as scroll gestures */
}

/* target zones — glowing signposts */
.zone {
  position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 14px; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 15px;
  padding: 10px; min-height: 50px; overflow: hidden; transition: transform .15s, box-shadow .15s, filter .15s;
  color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.zone .zone-glow { position: absolute; inset: 0; opacity: 0; transition: opacity .2s; }
.zone.wrap { background: linear-gradient(180deg, #2fae6a, #17663d);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.25), 0 4px 14px rgba(23,102,61,.5); }
.zone.wrap .zone-glow { background: radial-gradient(circle at 50% 50%, rgba(120,255,190,.7), transparent 70%); }
.zone.coal { background: linear-gradient(180deg, #464e59, #23282f);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.1), 0 4px 14px rgba(0,0,0,.5); }
.zone.coal .zone-glow { background: radial-gradient(circle at 50% 50%, rgba(255,150,70,.6), transparent 70%); }
.zone-arrow { font-size: 13px; opacity: .8; }
.zone.lit { transform: scale(1.015); filter: brightness(1.12); }
.zone.lit .zone-glow { opacity: 1; animation: zoneFlash .5s ease; }
@keyframes zoneFlash { 0% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- the conveyor machine ---------- */
#belt-area { flex: 1 1 auto; min-height: 0; position: relative; overflow: hidden; border-radius: 16px;
  background: linear-gradient(180deg, #1c2129 0%, #2b3038 12%, #2b3038 88%, #171b21 100%);
  box-shadow: inset 0 3px 10px rgba(0,0,0,.55), 0 6px 20px var(--shadow), 0 0 0 3px #3c2a18;
  transition: box-shadow .3s; }
#belt { position: absolute; left: 0; right: 0; top: 10px; bottom: 10px; overflow: hidden; background: #2f353e; --tread: .85s; }
/* Moving tread on a wider ::before, animated with transform (not background-position)
   so it loops seamlessly — no subpixel seam scrolling across the belt. */
#belt::before { content: ''; position: absolute; top: 0; bottom: 0; left: -48px; width: calc(100% + 96px);
  background: repeating-linear-gradient(90deg, #2b323b 0 24px, #353d47 24px 48px);
  animation: tread var(--tread) linear infinite; }
/* top/bottom darkening as a gradient overlay (blurred inset shadows band on some GPUs) */
#belt::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.5), transparent 24%, transparent 76%, rgba(0,0,0,.5)); }
@keyframes tread { to { transform: translateX(48px); } }
.belt-rail { position: absolute; left: 0; right: 0; height: 9px; z-index: 2;
  background: linear-gradient(180deg, #f0d382, var(--brass) 40%, var(--brass-d));
  box-shadow: 0 1px 4px rgba(0,0,0,.5); transition: background .4s; }
.belt-rail.top { top: 0; } .belt-rail.bottom { bottom: 0; }
body.rush .belt-rail { background: linear-gradient(180deg, #ff9a8a, var(--crit) 40%, #8f0f22); animation: railBlink .5s infinite; }
@keyframes railBlink { 50% { filter: brightness(1.4); } }
.roller { position: absolute; top: 0; bottom: 0; width: 26px; z-index: 2; overflow: hidden;
  background: linear-gradient(90deg, var(--brass-d), var(--brass) 50%, #f2d98a, var(--brass) 70%, var(--brass-d));
  box-shadow: 0 0 10px rgba(0,0,0,.5); }
.roller.left { left: -3px; border-radius: 0 40% 40% 0 / 0 50% 50% 0; }
.roller.right { right: -3px; border-radius: 40% 0 0 40% / 50% 0 0 50%; }
.roller::after { content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 6px, transparent 6px 13px);
  animation: rollerSpin .35s linear infinite; }
@keyframes rollerSpin { to { background-position: 0 13px; } }

/* Frost Time — the belt ices over */
.frost-veil { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(ellipse at 50% 50%, rgba(191,233,255,.05), rgba(191,233,255,.42) 100%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.12) 0 2px, transparent 2px 18px); }
#belt-area.frozen .frost-veil { opacity: 1; }
#belt-area.frozen { box-shadow: inset 0 3px 10px rgba(0,0,0,.55), 0 0 26px rgba(191,233,255,.75), 0 0 0 3px var(--ice); }
#belt-area.frozen #belt { filter: saturate(.6) brightness(1.15); }
/* Star Shield takes a hit */
#belt-area.shield-pop { animation: shieldPop .7s ease; }
@keyframes shieldPop { 0% { box-shadow: 0 0 0 0 rgba(191,233,255,.9), 0 0 0 3px #fff; } 100% { box-shadow: 0 0 0 40px rgba(191,233,255,0), 0 0 0 3px #3c2a18; } }

/* power-up chips (top-right of the belt) */
#power-chips { position: absolute; top: 14px; right: 30px; z-index: 6; display: flex; gap: 5px; pointer-events: none; }
.chip { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 12px; padding: 3px 9px; border-radius: 999px; color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.4); animation: chipIn .3s ease; white-space: nowrap; }
@keyframes chipIn { from { transform: scale(.6); opacity: 0; } }
.chip.frost { background: linear-gradient(180deg, #7fd0ff, #2b7fc9); }
.chip.shield { background: linear-gradient(180deg, #d9d9e8, #7c7ca3); }
.chip.sparkle { background: linear-gradient(180deg, #ffd23f, #e88b1a); color: #3a2a05; }

/* Rush Hour strip (top of the belt) */
#rush-bar { position: absolute; top: 12px; left: 30px; right: 30px; z-index: 6; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 3px; }
#rush-bar .rush-text { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 13px; color: #fff; letter-spacing: .5px;
  background: linear-gradient(90deg, #c0392b, #e5604d); padding: 3px 12px; border-radius: 999px; box-shadow: 0 2px 10px rgba(229,96,77,.7);
  animation: comboThrob .6s infinite; }
#rush-bar .rush-track { width: 60%; height: 5px; background: rgba(0,0,0,.4); border-radius: 999px; overflow: hidden; }
#rush-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #ffe6a8, #ff8a3d); transition: width .2s linear; }
body.rush #belt-area { box-shadow: inset 0 3px 10px rgba(0,0,0,.55), 0 0 30px rgba(229,96,77,.7), 0 0 0 3px var(--crit); }
body.rush .roller::after { animation-duration: .16s; }

/* ---------- tutorial hand ---------- */
#tutor { position: absolute; left: calc(30% + 88px); top: 50%; z-index: 8; pointer-events: none; display: flex; flex-direction: column;
  align-items: center; gap: 2px; transform: translate(-50%, -50%); }
#tutor .tutor-hand { font-size: 44px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
#tutor.up .tutor-hand { animation: handUp 1s ease-in-out infinite; }
#tutor.down .tutor-hand { animation: handDown 1s ease-in-out infinite; }
@keyframes handUp { 0%,100% { transform: translateY(18px); } 50% { transform: translateY(-26px); } }
@keyframes handDown { 0%,100% { transform: translateY(-18px); } 50% { transform: translateY(26px); } }
#tutor .tutor-text { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 13px; color: #fff; white-space: nowrap;
  background: rgba(11,17,48,.92); padding: 4px 10px; border-radius: 999px; border: 2px solid var(--gold); }
#tutor.up .tutor-text { border-color: var(--min); } #tutor.down .tutor-text { border-color: var(--crit); }

/* ---------- Benny — his real StoryMaker self, cut from the reference ---------- */
#benny { position: absolute; left: 2px; bottom: 3px; height: 93%; z-index: 2; pointer-events: none;
  display: flex; align-items: flex-end; transform-origin: bottom center; }
#benny.wrapping { animation: bennyWrap .5s ease; }
#benny.tossing  { animation: bennyToss .5s ease; }
#benny.oops     { animation: bennyOops .5s ease; }
#benny.cheer    { animation: bennyCheer .9s ease; }
@keyframes bennyWrap { 30% { transform: translateY(-7px) scale(1.05); } }
@keyframes bennyToss { 25% { transform: translateX(5px) rotate(5deg); } 60% { transform: rotate(-2deg); } }
@keyframes bennyOops { 20% { transform: rotate(-5deg); } 60% { transform: rotate(5deg); } }
@keyframes bennyCheer { 20% { transform: translateY(-14px) rotate(-4deg); } 40% { transform: translateY(0); } 60% { transform: translateY(-10px) rotate(4deg); } 80% { transform: translateY(0); } }

#benny .benny-glow { position: absolute; top: 4%; left: 50%; transform: translateX(-50%); width: 74px; height: 74px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,230,150,.5), transparent 70%);
  animation: glowPulse 2.6s ease-in-out infinite; z-index: 0; }
@keyframes glowPulse { 50% { transform: translateX(-50%) scale(1.14); opacity: .7; } }
#benny .benny-sprite { position: relative; height: 100%; width: auto; z-index: 1;
  transform-origin: bottom center; animation: bobFig 2.1s ease-in-out infinite; }
#benny .benny-shadow { position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%);
  width: 72px; height: 12px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.45), transparent); z-index: 0; }
@keyframes bobFig { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* ---------- a gift riding the belt ---------- */
.gift {
  position: absolute; top: 50%; left: 100%; transform: translate(-50%, -50%);
  width: 104px; height: 116px; border-radius: 12px; z-index: 3; overflow: visible;
  box-shadow: 0 8px 16px rgba(0,0,0,.45);
  animation: giftBob 1.6s ease-in-out infinite;
}
@keyframes giftBob { 0%,100% { margin-top: -3px; } 50% { margin-top: 3px; } }

/* NICE present — wrapped box with ribbon cross + bow */
.gift.nice { background: linear-gradient(135deg, hsl(var(--h,150) 68% 60%), hsl(var(--h,150) 60% 44%));
  border: 2px solid hsl(var(--h,150) 55% 38%);
  background-image: linear-gradient(135deg, hsl(var(--h,150) 68% 62%), hsl(var(--h,150) 60% 46%)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.14) 0 6px, transparent 6px 14px);
  background-blend-mode: overlay; }
.gift .ribbon-v { position: absolute; top: 0; bottom: 0; left: 50%; width: 16px; transform: translateX(-50%);
  background: linear-gradient(90deg, #f7e6ad, #f3d178); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); z-index: 1; }
.gift .ribbon-h { position: absolute; left: 0; right: 0; top: 34px; height: 15px;
  background: linear-gradient(180deg, #f9ecbd, #f0cd77); box-shadow: 0 1px 2px rgba(0,0,0,.15); z-index: 1; }
.gift .bow { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-size: 24px; z-index: 2;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }

/* NAUGHTY — a sooty coal parcel */
.gift.naughty { background: linear-gradient(150deg, #4b525c, #23282f); border: 2px solid #12151a;
  background-image: linear-gradient(150deg, #4b525c, #23282f),
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.08), transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(0,0,0,.4), transparent 50%);
  background-blend-mode: overlay; }

/* shared card content */
.gift .stamp { position: absolute; top: 6px; left: 50%; transform: translateX(-50%) rotate(-3deg); z-index: 3;
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 12px; letter-spacing: .4px; color: #fff;
  padding: 2px 10px; border-radius: 6px; white-space: nowrap; box-shadow: 0 2px 5px rgba(0,0,0,.35);
  border: 2px solid rgba(255,255,255,.85); }
.gift.nice .stamp { background: var(--min); }
.gift.naughty .stamp { background: var(--crit); }
.gift .who { position: absolute; left: 0; right: 0; top: 44px; display: flex; align-items: center; justify-content: center; gap: 2px; z-index: 3; }
.gift .who .face { font-size: 30px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.gift .who .wish { font-size: 18px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.gift .name { position: absolute; left: 4px; right: 4px; bottom: 5px; text-align: center; z-index: 3;
  font-weight: 800; font-size: 12px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gift .tag { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%) rotate(2deg); z-index: 4;
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 10px; letter-spacing: .5px; padding: 1px 8px;
  border-radius: 999px; color: #fff; background: #23282f; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); white-space: nowrap; }
.gift .hint { position: absolute; right: -8px; top: -10px; z-index: 5; font-size: 18px; font-weight: 800; color: #fff;
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--gold); color: #4a3410; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.gift .hint:empty { display: none; }
.gift .own-badge { position: absolute; left: -8px; top: -12px; z-index: 5; font-family: 'Baloo 2', sans-serif; font-weight: 800;
  font-size: 9px; padding: 2px 7px; border-radius: 999px; background: #fff; color: #8f0f22; box-shadow: 0 2px 6px rgba(0,0,0,.4);
  transform: rotate(-6deg); white-space: nowrap; }
.gift.own { box-shadow: 0 8px 16px rgba(0,0,0,.45), 0 0 0 3px #fff, 0 0 18px rgba(255,255,255,.7); }

.gift.front { transform: translate(-50%, -50%) scale(1.08); z-index: 5;
  box-shadow: 0 10px 22px rgba(0,0,0,.5), 0 0 0 3px rgba(245,196,81,.85), 0 0 20px rgba(245,196,81,.5); animation: none; }
.gift.danger { animation: giftDanger .35s infinite; }
@keyframes giftDanger { 50% { box-shadow: 0 10px 22px rgba(0,0,0,.5), 0 0 0 4px var(--crit), 0 0 26px rgba(229,96,77,.8); } }

/* GOLDEN gift — radiant */
.gift.golden { background: linear-gradient(135deg, #ffe9a8, #f5b731); border-color: #d99a1e;
  box-shadow: 0 8px 18px rgba(0,0,0,.4), 0 0 0 2px #ffe08a, 0 0 26px rgba(245,196,81,.8); }
.gift.golden::before { content: ''; position: absolute; inset: -30%; z-index: 0; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 8%, rgba(255,240,180,.55) 12%, transparent 20% 30%,
    rgba(255,240,180,.55) 34%, transparent 42% 55%, rgba(255,240,180,.55) 60%, transparent 68% 82%, rgba(255,240,180,.55) 88%, transparent 96%);
  animation: rays 6s linear infinite; }
@keyframes rays { to { transform: rotate(360deg); } }
.gift.golden .stamp { background: linear-gradient(90deg,#e88b1a,#f5c451); }
.gift.golden .name { color: #5a3d08; text-shadow: 0 1px 2px rgba(255,240,180,.6); }
.gift.golden .tag { background: linear-gradient(90deg,#e88b1a,#f5c451); color: #4a3410; }

/* MYSTERY — purple wrapping, big question mark, flips at the reveal line */
.gift.mystery { background: linear-gradient(135deg, #a67cff, #5b2fc9); border: 2px solid #3d1d8f;
  background-image: linear-gradient(135deg, #a67cff, #5b2fc9), repeating-linear-gradient(45deg, rgba(255,255,255,.14) 0 6px, transparent 6px 14px);
  background-blend-mode: overlay; box-shadow: 0 8px 16px rgba(0,0,0,.45), 0 0 18px rgba(124,77,255,.6); }
.gift.mystery .stamp { background: var(--violet); }
.gift.mystery .face.q { font-size: 34px; animation: qWobble 1s ease-in-out infinite; }
@keyframes qWobble { 50% { transform: rotate(12deg) scale(1.1); } }
.gift.mystery .ribbon-v, .gift.mystery .ribbon-h { background: linear-gradient(90deg, #ffe6a8, #f3d178); }
.gift.flip { animation: flipOut .18s ease-in forwards; }
.gift.flipped { animation: flipIn .3s ease-out; }
@keyframes flipOut { to { transform: translate(-50%, -50%) rotateY(90deg) scale(1.08); } }
@keyframes flipIn { from { transform: translate(-50%, -50%) rotateY(-90deg) scale(1.08); } }
.gift.was-mystery { box-shadow: 0 8px 16px rgba(0,0,0,.45), 0 0 0 2px var(--violet); }
.gift.was-mystery.front { box-shadow: 0 10px 22px rgba(0,0,0,.5), 0 0 0 3px var(--violet), 0 0 20px rgba(124,77,255,.6); }

/* FROST — icy blue wrapping */
.gift.frost { background: linear-gradient(135deg, #e8f7ff, #7fd0ff); border-color: #2b7fc9;
  background-image: linear-gradient(135deg, #e8f7ff, #7fd0ff), repeating-linear-gradient(135deg, rgba(255,255,255,.4) 0 3px, transparent 3px 12px);
  background-blend-mode: overlay; box-shadow: 0 8px 16px rgba(0,0,0,.45), 0 0 18px rgba(127,208,255,.8); }
.gift.frost .ribbon-v, .gift.frost .ribbon-h { background: linear-gradient(90deg, #fff, #cfeeff); }
.gift.frost .name { color: #0d3e66; text-shadow: none; }
.gift.frost .tag { background: #2b7fc9; }
/* SHIELD — silver + star */
.gift.shield { background: linear-gradient(135deg, #f4f4fb, #a9a9cc); border-color: #63639a;
  box-shadow: 0 8px 16px rgba(0,0,0,.45), 0 0 18px rgba(200,200,255,.8); }
.gift.shield .ribbon-v, .gift.shield .ribbon-h { background: linear-gradient(90deg, #ffe6a8, #f3d178); }
.gift.shield .name { color: #2c2c55; text-shadow: none; }
.gift.shield .tag { background: #63639a; }
/* SPARKLE — pink-gold glitter */
.gift.sparkle { background: linear-gradient(135deg, #ffd6e8, #ff8fb8); border-color: #d1477f;
  background-image: linear-gradient(135deg, #ffd6e8, #ff8fb8), radial-gradient(circle at 20% 30%, #fff 1.5px, transparent 2px),
    radial-gradient(circle at 70% 60%, #fff 1.5px, transparent 2px), radial-gradient(circle at 45% 80%, #ffe6a8 1.5px, transparent 2px);
  box-shadow: 0 8px 16px rgba(0,0,0,.45), 0 0 18px rgba(255,143,184,.8); animation: giftBob 1.6s ease-in-out infinite, sparkleTwinkle 1.2s infinite; }
@keyframes sparkleTwinkle { 50% { filter: brightness(1.2) saturate(1.2); } }
.gift.sparkle .name { color: #6a1a3c; text-shadow: none; }
.gift.sparkle .tag { background: #d1477f; }
/* BANDIT — a raccoon making off with a striped sack, scurrying */
.gift.bandit { background: repeating-linear-gradient(135deg, #5a3d1e 0 10px, #3a2612 10px 20px); border: 2px solid #1d1208;
  border-radius: 40% 40% 14px 14px / 30% 30% 12px 12px; animation: scurry .25s infinite; }
@keyframes scurry { 0%,100% { margin-top: -2px; transform: translate(-50%, -50%) rotate(-3deg); } 50% { margin-top: 2px; transform: translate(-50%, -50%) rotate(3deg); } }
.gift.bandit.front { animation: scurry .25s infinite; }
.gift.bandit .stamp { background: var(--crit); }
.gift.bandit .who .face { font-size: 34px; }
.gift.bandit .tag { background: var(--crit); animation: comboThrob .5s infinite; }

/* exit animations */
.gift.exiting { transition: transform .5s cubic-bezier(.4,-0.25,.5,1), opacity .5s ease; z-index: 6; animation: none; }
.gift.exit-wrap  { transform: translate(-50%, -280px) rotate(-16deg) scale(.65); opacity: 0; }
.gift.exit-coal  { transform: translate(-50%,  280px) rotate(16deg) scale(.65); opacity: 0; }
.gift.exit-miss  { transform: translate(-150%, 130px) rotate(-45deg) scale(.55); opacity: 0; }
.gift.exit-wrong { filter: saturate(1.7) brightness(1.2); box-shadow: 0 0 0 4px var(--crit), 0 0 26px rgba(229,96,77,.9); }

/* ---------- controls ---------- */
#controls { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ctl { display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 19px; color: #fff;
  padding: 15px 10px; border-radius: 15px; box-shadow: 0 5px 0 rgba(0,0,0,.35), 0 6px 14px rgba(0,0,0,.3);
  transition: transform .07s, box-shadow .07s; border: 2px solid rgba(255,255,255,.18); }
.ctl span { font-size: 24px; }
.ctl:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.ctl.wrap { background: linear-gradient(180deg, #37b26f, #17663d); }
.ctl.coal { background: linear-gradient(180deg, #515963, #22272e); }

/* ---------- fever / sparkle / danger moods ---------- */
#fever-glow { position: fixed; inset: 0; pointer-events: none; z-index: 43; opacity: 0; transition: opacity .5s; }
body.fever-2 #fever-glow { opacity: 1; box-shadow: inset 0 0 90px 12px rgba(245,196,81,.28); animation: feverPulse 1.1s infinite; }
body.fever-3 #fever-glow { opacity: 1; box-shadow: inset 0 0 120px 20px rgba(255,138,61,.4); animation: feverPulse .7s infinite; }
body.sparkle #fever-glow { opacity: 1; box-shadow: inset 0 0 120px 24px rgba(255,210,63,.45); animation: feverPulse .5s infinite; }
body.danger #fever-glow { opacity: 1; box-shadow: inset 0 0 110px 30px rgba(229,96,77,.45); animation: dangerPulse .9s infinite; }
@keyframes feverPulse { 50% { filter: brightness(1.35); } }
@keyframes dangerPulse { 50% { opacity: .35; } }
body.fever-2 .aurora { opacity: .8; filter: blur(24px) saturate(1.4); }
body.fever-3 .aurora, body.sparkle .aurora { opacity: 1; filter: blur(20px) saturate(1.7); }
body.fever-2 #belt-area { box-shadow: inset 0 3px 10px rgba(0,0,0,.55), 0 0 22px rgba(245,196,81,.5), 0 0 0 3px var(--brass); }
body.fever-3 #belt-area { box-shadow: inset 0 3px 10px rgba(0,0,0,.55), 0 0 34px rgba(255,138,61,.7), 0 0 0 3px var(--gold); }
body.sparkle #belt-area { box-shadow: inset 0 3px 10px rgba(0,0,0,.55), 0 0 40px rgba(255,210,63,.8), 0 0 0 3px var(--gold); }

/* ---------- flash / shake ---------- */
#flash { position: fixed; inset: 0; pointer-events: none; z-index: 45; opacity: 0; }
#flash.show { animation: flashFade .36s ease; }
#flash.leave { background: radial-gradient(circle, transparent 40%, rgba(229,96,77,.5)); }
#flash.win { background: radial-gradient(circle, rgba(120,255,190,.35), transparent 60%); }
#flash.shield { background: radial-gradient(circle, rgba(191,233,255,.5), transparent 65%); }
#flash.gold { background: radial-gradient(circle, rgba(255,210,63,.45), transparent 65%); }
@keyframes flashFade { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes shakeAnim {
  10%{transform:translate(-2px,1px)} 30%{transform:translate(-4px,2px)} 50%{transform:translate(-2px,-1px)}
  70%{transform:translate(-3px,-1px)} 90%{transform:translate(-1px,1px)} }
@keyframes shakeBig {
  10%{transform:translate(-5px,3px)} 30%{transform:translate(7px,-4px)} 50%{transform:translate(-6px,2px)}
  70%{transform:translate(5px,-2px)} 90%{transform:translate(-2px,1px)} }
#app.shake { animation: shakeAnim .45s ease; }
#app.shake-big { animation: shakeBig .45s ease; }

/* ---------- overlay / menus ---------- */
#overlay { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center;
  padding: 14px; background: rgba(6,12,30,.72); backdrop-filter: blur(3px); }
#overlay.show { display: flex; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.panel {
  background: linear-gradient(180deg, #fffdf7, #eef4f1); border-radius: 22px; padding: 20px 18px; max-width: 420px; width: 100%; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 0 3px rgba(245,196,81,.5); animation: rise .25s ease; max-height: 94dvh; overflow-y: auto;
  overscroll-behavior: contain;
}
@keyframes rise { from { transform: translateY(16px) scale(.97); opacity: 0; } }
.panel h1 { font-family: 'Mountains of Christmas', 'Baloo 2', cursive; font-weight: 700; margin: 4px 0 4px; font-size: 34px; color: var(--pine-deep); line-height: 1.05; }
.panel h2 { font-family: 'Baloo 2', sans-serif; font-weight: 800; margin: 14px 0 6px; font-size: 16px; color: var(--pine-deep); }
.hero { margin: -6px -4px 8px; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 18px var(--shadow); }
.hero img { display: block; width: 100%; height: 150px; object-fit: cover; object-position: center 22%; }
.hero.santa img { object-position: center 15%; background: #2a0f12; }
.hero.compact img { height: 104px; }
@media (max-height: 700px) { .hero.compact img { height: 78px; } .panel h1 { font-size: 30px; } }
/* Character beside the title — a transparent full-body cutout, never cropped. */
.hero-row { display: flex; align-items: center; gap: 12px; text-align: left; margin: 0 0 6px; }
.hero-fig { height: 124px; width: auto; flex: 0 0 auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,.28)); animation: figBob 2.4s ease-in-out infinite; }
@keyframes figBob { 50% { transform: translateY(-3px); } }
.hero-txt { flex: 1 1 auto; min-width: 0; }
.hero-txt h1 { margin: 0 0 4px; font-size: 32px; }
.hero-txt .tagline { margin: 0; }
.hero-txt .score-big { text-align: left; margin: 2px 0; font-size: 46px; }
.hero-txt .subline { margin: 2px 0 0; }
@media (max-height: 700px) { .hero-fig { height: 100px; } .hero-txt h1 { font-size: 28px; } }
@media (max-width: 360px) { .hero-fig { height: 96px; } .hero-txt h1 { font-size: 26px; } }
.tagline { color: var(--ink-soft); font-weight: 700; margin: 0 0 10px; font-size: 14px; }
.howto { text-align: left; background: var(--card); border-radius: 14px; padding: 12px 14px; margin: 12px 0;
  box-shadow: inset 0 0 0 1px #e2ece4; }
.howto p { margin: 7px 0; font-size: 13.5px; line-height: 1.4; }
.nice-ink { color: var(--pine-deep); } .naughty-ink { color: var(--crit); }
.best { font-weight: 800; color: var(--pine-deep); margin: 10px 0; font-size: 14px; }
.tiny { font-size: 12px; } .muted { color: var(--ink-soft); }
.big-btn { width: 100%; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 19px; color: #fff;
  background: linear-gradient(180deg, var(--pine), var(--pine-deep)); padding: 14px; border-radius: 14px;
  box-shadow: 0 5px 0 #0f4a2c; transition: transform .08s; margin-top: 8px; }
.big-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #0f4a2c; }
.big-btn.gold { background: linear-gradient(180deg, #ffd23f, #e88b1a); color: #4a3410; box-shadow: 0 5px 0 #a35d0a; }
.big-btn.red { background: linear-gradient(180deg, #e5604d, #b8172c); box-shadow: 0 5px 0 #6e0a17; }
.ghost-btn { width: 100%; margin-top: 10px; font-weight: 800; color: var(--pine-deep); padding: 11px; border-radius: 12px;
  box-shadow: inset 0 0 0 2px var(--pine); background: transparent; }
.ghost-btn.small { width: auto; padding: 8px 14px; font-size: 13px; margin-top: 8px; }
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.btn-row .big-btn, .btn-row .ghost-btn { margin-top: 0; }
.score-big { font-family: 'Baloo 2', sans-serif; font-size: 52px; font-weight: 800; color: var(--pine-deep); margin: 2px 0;
  text-shadow: 0 2px 0 rgba(245,196,81,.35); line-height: 1.05; }
.subline { font-weight: 800; font-size: 13px; margin: 2px 0 8px; color: var(--ink-soft); }
.subline.good { color: var(--pine-deep); } .subline.gold { color: #a35d0a; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.stats-grid.four { grid-template-columns: repeat(4, 1fr); }
.stats-grid > div { background: var(--card); border-radius: 12px; padding: 8px 4px; box-shadow: 0 2px 6px var(--shadow); }
.stats-grid b { display: block; font-size: 20px; font-family: 'Baloo 2', sans-serif; color: var(--ink); }
.stats-grid span { font-size: 10.5px; color: var(--ink-soft); font-weight: 700; }

/* rank card + XP bar */
.rank-card { display: flex; align-items: center; gap: 10px; text-align: left; background: var(--card); border-radius: 14px;
  padding: 9px 12px; margin: 10px 0 4px; box-shadow: inset 0 0 0 1px #e2ece4; }
.rank-card .rank-ic { font-size: 30px; flex: 0 0 auto; filter: drop-shadow(0 2px 2px rgba(0,0,0,.2)); }
.rank-card .rank-body { flex: 1 1 auto; min-width: 0; }
.rank-card .rank-title { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 15px; color: var(--pine-deep); display: flex; justify-content: space-between; gap: 6px; }
.rank-card .rank-title small { font-size: 11px; color: var(--ink-soft); font-weight: 700; white-space: nowrap; }
.xp-bar { height: 9px; background: #e2ece4; border-radius: 999px; overflow: hidden; margin-top: 5px; }
.xp-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--pine), #57e39b); border-radius: 999px; transition: width 1.1s cubic-bezier(.3,1,.4,1); }
.xp-fill.gold { background: linear-gradient(90deg, #e88b1a, #ffd23f); }
.xp-text { font-size: 11px; color: var(--ink-soft); font-weight: 700; margin-top: 3px; display: flex; justify-content: space-between; }
.xp-gain { color: var(--pine-deep); font-weight: 800; }
.rankup { margin: 8px 0 0; font-family: 'Baloo 2', sans-serif; font-weight: 800; color: #4a3410; font-size: 15px;
  background: linear-gradient(90deg, #ffe6a8, #ffd23f, #ffe6a8); border-radius: 12px; padding: 8px 10px; animation: rankGlow 1.2s infinite; }
@keyframes rankGlow { 50% { box-shadow: 0 0 18px rgba(255,210,63,.9); } }

/* challenge card */
.challenge-card { background: linear-gradient(135deg, #fff3cf, #ffe6a8); border-radius: 14px; padding: 10px 12px; margin: 8px 0;
  font-weight: 800; color: #4a3410; font-size: 14px; box-shadow: inset 0 0 0 2px #f5c451; }
.challenge-card small { display: block; font-weight: 700; font-size: 11.5px; color: #7a5312; margin-top: 2px; }

/* mode buttons + menu row */
.mode-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.mode-btn { text-align: left; background: var(--card); border-radius: 14px; padding: 10px 12px; box-shadow: inset 0 0 0 2px #e2ece4, 0 2px 6px var(--shadow);
  transition: transform .08s; display: flex; flex-direction: column; gap: 1px; }
.mode-btn:active { transform: translateY(2px); }
.mode-btn .mode-title { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 15px; color: var(--ink); }
.mode-btn .mode-sub { font-size: 11px; color: var(--ink-soft); font-weight: 700; line-height: 1.3; }
.mode-btn.daily { box-shadow: inset 0 0 0 2px #f5c451, 0 2px 6px var(--shadow); background: linear-gradient(180deg, #fffdf7, #fff6da); }
.mode-btn .fire { color: #c0392b; }
.mode-btn.pulse { animation: rankGlow 1.2s infinite; }
.menu-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.menu-btn { background: var(--card); border-radius: 12px; padding: 7px 2px 6px; box-shadow: inset 0 0 0 1px #e2ece4; display: flex; flex-direction: column; align-items: center; gap: 1px; position: relative; }
.menu-btn:active { transform: translateY(2px); }
.menu-btn .menu-ic { font-size: 20px; }
.menu-btn .menu-lbl { font-size: 10.5px; font-weight: 800; color: var(--ink); }
.menu-btn .menu-cnt { font-size: 9.5px; font-weight: 700; color: var(--ink-soft); }
.menu-btn .dot { position: absolute; top: 4px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--crit); box-shadow: 0 0 0 2px #fff; }

/* trophies */
.ach-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 8px 0 2px; }
.ach-chip { display: inline-flex; align-items: center; gap: 5px; background: linear-gradient(180deg, #fff6da, #ffe6a8); color: #4a3410;
  font-weight: 800; font-size: 12px; padding: 5px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px #f5c451; animation: chipIn .35s ease; }
.trophy-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin: 10px 0; text-align: left; }
.trophy { display: flex; align-items: center; gap: 8px; background: var(--card); border-radius: 12px; padding: 7px 9px; box-shadow: inset 0 0 0 1px #e2ece4; }
.trophy .t-ic { font-size: 22px; flex: 0 0 auto; }
.trophy .t-name { font-weight: 800; font-size: 12px; color: var(--ink); line-height: 1.15; }
.trophy .t-desc { font-size: 10.5px; color: var(--ink-soft); font-weight: 700; line-height: 1.2; }
.trophy.locked { opacity: .5; filter: grayscale(1); }
.trophy.unlocked { box-shadow: inset 0 0 0 2px #f5c451; background: linear-gradient(180deg, #fffdf7, #fff6da); }

/* postcards */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 10px 0; }
.pc-tile { background: var(--card); border-radius: 12px; padding: 9px 4px 7px; box-shadow: inset 0 0 0 1px #e2ece4; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pc-tile .pc-ic { font-size: 26px; }
.pc-tile .pc-name { font-weight: 800; font-size: 10.5px; color: var(--ink); line-height: 1.15; }
.pc-tile.locked { opacity: .55; }
.pc-tile.locked .pc-ic { filter: grayscale(1); }
.pc-tile .pc-lock { font-size: 9.5px; color: var(--ink-soft); font-weight: 700; }
.pc-tile.unlocked { box-shadow: inset 0 0 0 2px var(--pine); cursor: pointer; }
.postcard { position: relative; text-align: left; background: #fffaf0; border-radius: 10px; padding: 16px 16px 14px; margin: 8px 0;
  box-shadow: 0 8px 24px rgba(0,0,0,.25), inset 0 0 0 1px #e8dcc0; transform: rotate(-1deg);
  background-image: repeating-linear-gradient(180deg, transparent 0 27px, rgba(120,90,40,.12) 27px 28px); background-position: 0 44px; }
.postcard .pc-stamp { position: absolute; top: 10px; right: 12px; width: 44px; height: 52px; border: 2px dashed #c9b48a; border-radius: 4px;
  display: flex; align-items: center; justify-content: center; font-size: 24px; background: #fff; transform: rotate(4deg); }
.postcard .pc-post { position: absolute; top: 18px; right: 62px; font-size: 9px; color: #9a7a4a; font-weight: 800; letter-spacing: 1px;
  border: 2px solid #c9b48a; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  text-align: center; line-height: 1; transform: rotate(-12deg); opacity: .8; }
.postcard .pc-title { font-family: 'Mountains of Christmas', cursive; font-weight: 700; font-size: 26px; color: #8f0f22; margin: 0 90px 6px 0; line-height: 1.05; }
.postcard .pc-text { font-family: 'Nunito', sans-serif; font-size: 13.5px; line-height: 28px; color: #3a2d1a; margin: 0; }
.postcard .pc-sign { font-family: 'Mountains of Christmas', cursive; font-size: 22px; color: #17663d; margin: 6px 0 0; text-align: right; }
.postcard-cta { margin-top: 10px; }

/* my list editor */
.list-editor { text-align: left; margin: 8px 0; }
.list-row { display: flex; align-items: center; gap: 8px; background: var(--card); border-radius: 12px; padding: 7px 10px; margin-bottom: 6px; box-shadow: inset 0 0 0 1px #e2ece4; }
.list-row .l-name { flex: 1 1 auto; font-weight: 800; font-size: 14px; }
.tog { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 11px; padding: 4px 9px; border-radius: 999px; color: #fff; background: var(--min); }
.tog.naughty { background: var(--crit); }
.x-btn { font-weight: 800; color: var(--ink-soft); font-size: 16px; padding: 2px 6px; }
.list-add { display: flex; gap: 6px; margin-top: 6px; }
.list-add input { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 700; padding: 10px 12px; border-radius: 12px; border: 2px solid #cfdcd3; background: #fff; color: var(--ink); }
.list-add input:focus { outline: none; border-color: var(--pine); }
.list-add button { font-family: 'Baloo 2', sans-serif; font-weight: 800; color: #fff; background: var(--pine-deep); padding: 0 16px; border-radius: 12px; font-size: 15px; }
.promo-line { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); margin: 8px 0 0; line-height: 1.4; }

/* settings */
.settings { text-align: left; margin: 8px 0; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--card); border-radius: 12px; padding: 9px 12px; margin-bottom: 6px; box-shadow: inset 0 0 0 1px #e2ece4; font-weight: 800; font-size: 14px; }
.set-row input[type=text] { font-size: 14px; font-weight: 700; padding: 6px 10px; border-radius: 10px; border: 2px solid #cfdcd3; width: 46%; background: #fff; color: var(--ink); }
.switch { position: relative; width: 46px; height: 26px; border-radius: 999px; background: #cfdcd3; transition: background .2s; flex: 0 0 auto; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.switch.on { background: var(--pine); } .switch.on::after { left: 23px; }
.quick-toggles { display: flex; gap: 6px; justify-content: center; margin: 10px 0 0; }
.quick-toggles button { font-weight: 800; font-size: 12px; padding: 7px 10px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px #e2ece4; color: var(--ink); }
.quick-toggles button.off { opacity: .5; text-decoration: line-through; }

/* daily box */
.daily-box { background: linear-gradient(180deg, #fffdf7, #fff6da); border-radius: 14px; padding: 10px 12px; margin: 8px 0; box-shadow: inset 0 0 0 2px #f5c451; }
.daily-box .d-title { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 14px; color: #4a3410; }
.daily-box .d-sub { font-size: 12px; font-weight: 700; color: #7a5312; margin-top: 2px; }
.daily-box pre.grid { font-family: inherit; font-size: 15px; line-height: 1.3; margin: 6px 0 0; letter-spacing: 1px; white-space: pre-wrap; }

/* app cross-promo */
.app-cta { display: flex; align-items: center; gap: 12px; text-align: left; text-decoration: none;
  margin-top: 12px; padding: 12px 14px; border-radius: 16px;
  background: linear-gradient(135deg, #b8172c 0%, #8f0f22 100%); color: #fff;
  box-shadow: 0 4px 14px rgba(143,15,34,.5); border: 2px solid rgba(255,255,255,.22); transition: transform .08s; }
.app-cta:active { transform: translateY(2px); }
.app-cta.night { background: linear-gradient(135deg, #1d2a6b 0%, #0b1130 100%); box-shadow: 0 4px 14px rgba(11,17,48,.6); }
img.app-cta-elf { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.app-cta-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.app-cta-text b { font-family: 'Baloo 2', sans-serif; font-size: 15px; }
.app-cta-text span { font-size: 12.5px; color: rgba(255,255,255,.92); font-weight: 700; }
.app-cta-text i { font-style: normal; font-weight: 800; color: #ffe6a8; }
.app-cta-note { text-align: center; font-size: 11px; font-weight: 700; color: var(--ink-soft); margin: 6px 0 0; }

/* ---------- toasts / floats / banners ---------- */
#toast-layer { position: fixed; top: 58px; left: 50%; transform: translateX(-50%); z-index: 55;
  display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; width: 100%; max-width: 560px; }
.toast { background: rgba(11,17,48,.94); color: #fff; font-weight: 800; font-size: 13px; padding: 8px 16px;
  border-radius: 999px; box-shadow: 0 6px 16px rgba(0,0,0,.4); max-width: 92%; text-align: center;
  border: 1px solid rgba(255,255,255,.12); animation: toastIn .25s ease, toastOut .3s ease 1.9s forwards; }
.toast.good { background: linear-gradient(90deg,#2e8b57,#46a86e); }
.toast.bad { background: linear-gradient(90deg,#c0392b,#e5604d); }
.toast.warn { background: linear-gradient(90deg,#e8a13b,#f5c451); color: #4a3410; }
.toast.ice { background: linear-gradient(90deg,#2b7fc9,#7fd0ff); }
.toast.gold { background: linear-gradient(90deg,#e88b1a,#ffd23f); color: #4a3410; }
.toast.trophy { background: linear-gradient(90deg,#4a3410,#8a6a2e); border-color: #f5c451; }
@keyframes toastIn { from { transform: translateY(-10px); opacity: 0; } }
@keyframes toastOut { to { transform: translateY(-10px); opacity: 0; } }

#fx { position: fixed; inset: 0; pointer-events: none; z-index: 58; }
.floatnum { position: absolute; transform: translate(-50%,0); font-family:'Baloo 2',sans-serif; font-weight: 800;
  font-size: 24px; color: #57e39b; text-shadow: 0 2px 4px rgba(0,0,0,.5); white-space: nowrap;
  animation: floatUp 1.2s ease-out forwards; }
.floatnum.bad { color: #ff7a6a; } .floatnum.warn { color: var(--urg); }
.floatnum.save { color: #ffd23f; font-size: 30px; text-shadow: 0 0 12px rgba(255,210,63,.8), 0 2px 4px rgba(0,0,0,.5); }
.floatnum.ice { color: #bfe9ff; text-shadow: 0 0 12px rgba(191,233,255,.9), 0 2px 4px rgba(0,0,0,.5); }
.floatnum.own { color: #fff; font-size: 20px; text-shadow: 0 0 10px rgba(255,255,255,.8), 0 2px 4px rgba(0,0,0,.5); }
@keyframes floatUp { 0%{opacity:0;transform:translate(-50%,6px) scale(.7)} 15%{opacity:1} 100%{opacity:0;transform:translate(-50%,-58px) scale(1.1)} }

#combo-banner { position: fixed; top: 24%; left: 0; right: 0; z-index: 57; pointer-events: none; text-align: center;
  font-family:'Mountains of Christmas','Baloo 2',cursive; font-weight: 700; font-size: 42px; color: #fff; opacity: 0;
  text-shadow: 0 3px 0 rgba(0,0,0,.3), 0 0 28px rgba(255,220,120,.7); padding: 0 12px; }
#combo-banner.show { animation: bannerPop 1.4s ease; }
#combo-banner.big { font-size: 54px; color: #ffd23f; }
#combo-banner.small { font-size: 30px; top: 27%; }
#combo-banner.ice { color: #bfe9ff; text-shadow: 0 3px 0 rgba(0,0,0,.3), 0 0 28px rgba(191,233,255,.9); }
#combo-banner.red { color: #ff9a8a; text-shadow: 0 3px 0 rgba(0,0,0,.3), 0 0 28px rgba(229,96,77,.9); }
@keyframes bannerPop { 0%{opacity:0;transform:scale(.5) rotate(-4deg)} 15%{opacity:1;transform:scale(1.15) rotate(2deg)} 80%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(1)} }

#level-banner { position: fixed; top: 96px; left: 50%; transform: translateX(-50%); z-index: 56; pointer-events: none; opacity: 0;
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 15px; color: #fff; white-space: nowrap;
  background: linear-gradient(90deg, #0b1130, #17663d); padding: 8px 18px; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0,0,0,.45); border: 2px solid var(--gold); }
#level-banner.show { animation: stripIn 2.2s ease; }
#level-banner.rush { background: linear-gradient(90deg, #8f0f22, #e5604d); border-color: #fff; }
#level-banner.ice { background: linear-gradient(90deg, #2b7fc9, #7fd0ff); border-color: #fff; color: #0d3e66; }
#level-banner.gold { background: linear-gradient(90deg, #e88b1a, #ffd23f); color: #4a3410; border-color: #fff; }
@keyframes stripIn { 0% { opacity: 0; transform: translate(-50%, -14px) scale(.9); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.04); } 20% { transform: translate(-50%, 0) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; } }

/* full sleigh — flings across the night sky */
.flying-sleigh { position: fixed; top: 18%; left: -14%; z-index: 59; font-size: 58px; pointer-events: none;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.45)); animation: sleighFly 1.7s ease-in forwards; }
@keyframes sleighFly {
  0% { left: -14%; top: 22%; transform: rotate(-7deg) scale(.85); }
  55% { top: 7%; }
  100% { left: 114%; top: 13%; transform: rotate(5deg) scale(1.12); }
}

#ambient { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .aurora, .stars, #belt::before, .roller::after, .gift, .benny-sprite, .benny-glow { animation: none !important; }
}