/* MOSTLY — Wonderland 12.24
   Brand tokens lifted from unlimitedentmt.com (unl-globals.liquid) */

:root{
  --ink:#0A0A0A;
  --bone:#EDEAE3;
  --acc:#FF2E12;
  --mut:#7c7a76;
  --line:rgba(237,234,227,.14);
  --f-dis:'Archivo','Helvetica Neue',Arial,sans-serif;
  --f-mono:'Space Mono',ui-monospace,monospace;
  --stretch:62%;
  --ease:cubic-bezier(0.16,1,0.3,1);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

html,body{
  height:100%;overflow:hidden;background:var(--ink);color:var(--bone);
  font-family:var(--f-mono);
  overscroll-behavior:none;touch-action:none;
  -webkit-user-select:none;user-select:none;
}

#c{position:fixed;inset:0;width:100%;height:100%;display:block}

.dis{
  font-family:var(--f-dis);font-weight:900;
  font-stretch:var(--stretch);
  text-transform:uppercase;line-height:.86;letter-spacing:-.02em;
}
.mono{
  font-family:var(--f-mono);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
}

.screen{position:fixed;inset:0;z-index:10;pointer-events:none}
.screen.center{
  display:flex;align-items:center;justify-content:center;
  background:rgba(10,10,10,.82);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  pointer-events:auto;
  padding:max(20px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom));
}
.screen[hidden]{display:none!important}

/* ---------- plates ---------- */
/* The start plate explains the whole game now, so it can outgrow a small
   phone. Let the plate scroll instead of clipping the PLAY button. */
.plate{
  text-align:center;max-width:420px;width:100%;
  max-height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;
}
/* The promoter's mark. Fixed height, width auto, so the official artwork is
   never stretched — only ever scaled. */
.unl{
  display:block;margin:0 auto 16px;
  height:62px;width:auto;
  opacity:.92;
}
.unl--sm{height:44px;margin-bottom:12px}
@media (max-height:780px){ .unl{height:48px;margin-bottom:10px} }

.kick{color:var(--mut);margin-bottom:22px;font-size:10px}
.logo{
  font-size:clamp(46px,15vw,104px);
  margin:0 0 14px;
  text-shadow:4px 4px 0 var(--acc);
}
.tag{color:var(--bone);font-size:12px;margin-bottom:22px}
.tag em{font-style:normal;color:var(--acc)}

/* On a short phone the whole plate must still land PLAY above the fold —
   a scroll-to-find-the-button start screen loses players before run one. */
@media (max-height:780px){
  #start .kick{margin-bottom:14px}
  #start .logo{font-size:clamp(40px,13vw,72px);margin-bottom:10px}
  #start .tag{margin-bottom:14px}
  #start .lead{margin-bottom:12px}
  #start .rules li{padding:7px 2px}
  #start .prize{margin-bottom:13px;padding:10px}
  #start .fine{margin-top:16px}
}

/* ---------- how to play ---------- */
.lead{
  color:var(--bone);font-size:10px;line-height:1.9;
  margin:0 0 18px;letter-spacing:.1em;
}
.rules{
  list-style:none;margin:0 0 20px;padding:0;text-align:left;
  border-top:1px solid var(--line);
}
.rules li{
  display:flex;align-items:flex-start;gap:11px;
  padding:9px 2px;border-bottom:1px solid var(--line);
  color:var(--mut);font-size:9px;line-height:1.7;letter-spacing:.09em;
}
.rules b{color:var(--bone);font-weight:700}
/* the swatches are the actual in-game colours, so the list doubles as a legend */
.sw{flex:0 0 auto;width:11px;height:11px;margin-top:3px;display:block}
.sw-nice{background:var(--bone)}
.sw-naughty{background:var(--acc)}
/* steel grey, which is what the gift boxes actually are in the scene */
.sw-gift{background:#5b6070}
.sw-meter{border:1px solid var(--acc);background:linear-gradient(to right,var(--acc) 70%,transparent 70%)}
/* a rising wedge for the multiplier, a lit stage for the walk-in bonus */
.sw-mult{background:var(--acc);clip-path:polygon(0 100%,100% 0,100% 100%)}
.sw-stage{background:#1b1d24;border-bottom:4px solid var(--bone)}

/* the score breakdown on the game-over plate */
.sub{color:var(--mut);font-size:9px;line-height:1.8;letter-spacing:.1em;margin:12px 0 0}

.prize{
  border:1px solid var(--acc);color:var(--mut);
  padding:13px 12px;margin:0 0 20px;
  font-size:9px;line-height:1.9;letter-spacing:.11em;
}
.prize b{color:var(--acc);font-size:11px;letter-spacing:.16em}

/* With no status message yet, SUBMIT SCORE and RUN AGAIN end up welded
   together and read as one two-storey button. */
#again{margin-top:10px}

/* ---------- control opt-ins ---------- */
.ctrls{margin:0 0 18px}
.ctrls-h{color:var(--mut);font-size:9px;margin-bottom:9px}
.ctrl-row{display:flex;gap:7px}
.ctrl{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  background:transparent;color:var(--mut);
  border:1px solid var(--line);padding:11px 4px;
  font-family:var(--f-mono);font-weight:700;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;border-radius:0;-webkit-appearance:none;appearance:none;
}
.ctrl small{font-size:7.5px;letter-spacing:.08em;opacity:.75;font-weight:400}
.ctrl.on{border-color:var(--acc);color:var(--acc)}
/* DRAG is disabled because it cannot be turned off, not because it is broken —
   so it must not wear the faded look a dead control gets. */
.ctrl[disabled]{cursor:default;opacity:1}
.ctrl.busy{opacity:.5;cursor:progress}
.ctrl-msg{
  min-height:12px;margin-top:9px;color:var(--mut);
  font-size:8.5px;line-height:1.7;
}
.ctrl-msg.err{color:var(--acc)}

/* the BLOW tell in the HUD — only drawn when the player turned it on */
.boost{
  margin-top:7px;font-size:10px;color:var(--acc);
  opacity:.28;transition:opacity .08s linear;
}
.boost.on{opacity:1}
.boost[hidden]{display:none}

/* Active power-ups. Outlined chips, never filled: a filled chip up here would
   compete with the NAUGHTY meter, and the meter has to stay the loudest thing
   in the corner. 2X is the only one that gets the accent, because it is the
   only one that changes what a pickup is worth. */
.pows{display:flex;gap:5px;justify-content:flex-end;margin-top:7px}
.pows i{
  font-style:normal;font-size:8px;letter-spacing:.1em;
  padding:3px 6px;border:1px solid var(--line);color:var(--bone);
  opacity:.9;animation:pop .22s var(--ease)
}
.pows i.acc{border-color:var(--acc);color:var(--acc)}
.pows i[hidden]{display:none}
@keyframes pop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:.9}}

/* PLAY stays the only full-width control; these two sit under it as peers */
.row{display:flex;gap:8px;margin-top:4px}
.row .lnk{margin-top:0;border:1px solid var(--line)}
.fine{color:var(--mut);margin-top:26px;line-height:2;font-size:9.5px}
.hint{color:var(--mut);margin-top:14px;font-size:9.5px;opacity:.7}

/* ---------- button ---------- */
.btn{
  display:block;width:100%;
  background:transparent;color:var(--bone);
  border:1px solid var(--bone);
  padding:19px 26px;font-size:clamp(20px,5.5vw,26px);
  cursor:pointer;position:relative;overflow:hidden;
  transition:color .4s var(--ease);
  font-family:var(--f-dis);font-weight:900;font-stretch:var(--stretch);
  text-transform:uppercase;letter-spacing:.01em;
}
.btn::after{
  content:'';position:absolute;inset:0;background:var(--acc);
  transform:translateY(101%);transition:transform .45s var(--ease);z-index:-1;
}
.btn{z-index:0}
.btn:active::after,.btn:hover::after{transform:translateY(0)}
.btn--acc{border-color:var(--acc);color:var(--acc)}
.btn--acc:active,.btn--acc:hover{color:var(--ink)}

/* Secondary actions. Same shape as PLAY so they are obviously buttons, quieter
   type and a hairline border so they never compete with it. */
.btn--ghost{
  border-color:var(--line);color:var(--mut);
  padding:14px 20px;font-size:clamp(14px,3.8vw,17px);
  margin-top:8px;text-decoration:none;
}
.btn--ghost:active,.btn--ghost:hover{color:var(--ink);border-color:var(--acc)}

/* ---------- entry form ---------- */
.entry{margin:26px 0 0;text-align:left}
.entry[hidden]{display:none!important}
.entry-lead{color:var(--mut);font-size:9px;margin-bottom:11px;text-align:center}

.fld{
  display:block;width:100%;margin-bottom:9px;
  background:transparent;color:var(--bone);
  border:1px solid var(--line);
  padding:14px 14px;
  /* 16px is the floor that stops iOS Safari zooming the whole page when the
     field takes focus. Anything smaller and the canvas gets scaled mid-run. */
  font-family:var(--f-mono);font-size:16px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  border-radius:0;-webkit-appearance:none;appearance:none;
}
.fld::placeholder{color:var(--mut);opacity:1}
.fld:focus{outline:none;border-color:var(--bone)}
.fld.bad{border-color:var(--acc)}

.chk{
  display:flex;align-items:flex-start;gap:10px;
  color:var(--mut);font-size:9px;line-height:1.6;
  margin:13px 0 17px;cursor:pointer;
}
.chk input{
  flex:0 0 auto;width:17px;height:17px;margin:0;
  accent-color:var(--acc);cursor:pointer;
}

.f-msg{
  min-height:14px;margin:13px 0 17px;text-align:center;
  font-size:9.5px;line-height:1.7;color:var(--mut);
}
.f-msg:empty{margin:0;min-height:0}
.f-msg.err{color:var(--acc)}
.f-msg.ok{color:var(--bone)}

.lnk{
  display:block;width:100%;margin-top:13px;
  background:none;border:0;color:var(--mut);
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  cursor:pointer;padding:8px;
  font-family:var(--f-mono);font-weight:700;
}
.lnk:hover,.lnk:active{color:var(--bone)}

/* ---------- leaderboard ---------- */
.board-h{font-size:clamp(34px,10vw,56px);margin:0 0 20px}
.board-list{
  list-style:none;margin:0 0 6px;padding:0;
  max-height:46vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  border-top:1px solid var(--line);
}
.board-list li{
  display:flex;align-items:baseline;gap:12px;
  padding:10px 2px;border-bottom:1px solid var(--line);
  font-size:11px;letter-spacing:.08em;
}
.board-list .r{color:var(--mut);min-width:26px;font-size:9.5px}
.board-list .a{
  flex:1;text-align:left;text-transform:uppercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.board-list .s{font-weight:700;font-variant-numeric:tabular-nums}
/* the three that actually win something */
.board-list li.win .r,.board-list li.win .s{color:var(--acc)}
.board-list li.me{background:rgba(255,46,18,.1)}
.board-list li.me .a{color:var(--acc)}

/* ---------- HUD ---------- */
#hud{pointer-events:none}

/* Phase 2: the ground is snow now, so bone HUD text can land on a bright
   surface and disappear. A scrim at the top keeps the contrast guaranteed
   instead of hoping the camera never tilts far enough to matter. */
#hud::before{
  content:'';position:absolute;left:0;right:0;top:0;height:34vh;
  background:linear-gradient(to bottom,rgba(10,10,10,.72),rgba(10,10,10,0));
  pointer-events:none;
}
/* the descent — summit on the left, stage on the right */
.prog{
  position:absolute;left:0;right:0;top:0;height:3px;z-index:2;
  background:rgba(237,234,227,.16);
}
.prog i{
  position:absolute;inset:0;transform-origin:left;transform:scaleX(0);
  background:var(--bone);
}
/* the stage end of the bar, so the bar has a destination and not just a length */
.prog::after{
  content:'';position:absolute;right:0;top:0;width:4px;height:9px;background:var(--acc);
}

.hud-top{
  z-index:1;
  position:absolute;left:0;right:0;
  top:max(16px,env(safe-area-inset-top));
  padding:0 18px;
  display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
}
.lbl{color:var(--mut);font-size:9px;margin-bottom:5px}
.num{font-size:clamp(42px,12vw,74px);line-height:.84;font-variant-numeric:tabular-nums}
/* Score sits under the crowd count, not beside it: you glance at the crowd
   constantly and at the score twice a run, so it gets the smaller slot. */
.score{
  color:var(--bone);font-size:11px;margin-top:8px;
  letter-spacing:.12em;font-variant-numeric:tabular-nums;
}
.hud-right{text-align:right;min-width:112px}
.meter{
  width:112px;height:7px;border:1px solid var(--line);
  margin-left:auto;position:relative;overflow:hidden;
}
.meter i{
  position:absolute;inset:0;transform-origin:left;transform:scaleX(0);
  background:var(--acc);transition:transform .14s linear;
}
.meter.hot{border-color:var(--acc);animation:pulse .34s steps(2) infinite}
@keyframes pulse{50%{opacity:.35}}
.best{color:var(--mut);margin-top:9px;font-size:9px}

/* ---------- flash ---------- */
.flash{
  position:absolute;left:0;right:0;top:46%;
  text-align:center;font-size:clamp(28px,9vw,54px);
  color:var(--acc);opacity:0;pointer-events:none;
  /* vermillion on bone snow is a weak pair — the ink shadow carries it */
  text-shadow:0 3px 0 var(--ink),0 0 26px rgba(10,10,10,.9);
}
.flash.on{animation:fl .62s var(--ease) forwards}
@keyframes fl{
  0%{opacity:0;transform:scale(.82)}
  22%{opacity:1;transform:scale(1.04)}
  70%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.1)}
}

/* red vignette when the meter is hot */
body.hot::after{
  content:'';position:fixed;inset:0;z-index:5;pointer-events:none;
  box-shadow:inset 0 0 160px 30px rgba(255,46,18,.4);
  animation:vig .5s steps(2) infinite;
}
@keyframes vig{50%{opacity:.4}}

@media (prefers-reduced-motion:reduce){
  .meter.hot,body.hot::after{animation:none}
  .flash.on{animation-duration:.01s}
}