/* Snowbank Standoff. Colours, type and brackets come from shared/tokens.css; the Start and Finish
   cards, buttons, sound toggle, tick and high scores come from shared/frame.css. Only this game's
   own parts and its overrides of the frame are here. */
:root { --frame-backdrop: rgba(251, 248, 241, .55); } /* a paper wash over the snow, so the scene stays bright */
html, body { margin: 0; height: 100%; background: var(--ink); overscroll-behavior: none; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}

#app {
  position: relative;
  max-width: 480px;
  height: 100vh; height: 100dvh;
  margin: 0 auto;
  background: var(--paper);
  overflow: hidden;
  touch-action: none;
}
#stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }

/* HUD */
#hud {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; gap: 22px; align-items: flex-start;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 72px 0 6px;
  pointer-events: none;
}
/* back to the arcade: tap once for "Tap again to leave", again to go */
.leave-btn { margin: -2px -12px 0 0; }
.leave-btn .leave-text { z-index: 9; }
.hud-item { display: flex; flex-direction: column; min-width: 64px; }
.hud-item .mono-label { font-size: 11px; color: var(--ink-dark); }
.hud-val { font-family: var(--font-mono); font-weight: 600; font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hud-val.low { animation: pulse 1s steps(2, jump-none) infinite; }
.hud-time { position: relative; display: flex; align-items: baseline; }
/* the −3s / +3s badge hangs under the time, out of the row, so it never pushes the HUD under the sound button */
.hud-pen { position: absolute; left: 0; top: 100%; margin-top: 2px; white-space: nowrap; font-family: var(--font-mono); font-weight: 600; font-size: 15px; color: var(--white); background: var(--ink); padding: 1px 5px; border-radius: var(--radius-button); }
.hud-val.hit { animation: jolt .4s ease-out; }
@keyframes jolt { 20% { transform: translateX(-4px); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); } }
@keyframes pulse { 50% { opacity: .35; } }
@media (max-width: 390px) { #hud { gap: 14px; } }

/* The sound and back icons are the frame's (shared/ui/). The Hide icon is this game's own mask.
   It's written as mask-image, not --icon: a url() inside a variable is resolved from the
   stylesheet that uses the variable (shared/frame.css), not from this one. */
.icon-hide { width: 40px; height: 22px; -webkit-mask-image: url("art/icon-hide.svg"); mask-image: url("art/icon-hide.svg"); }

/* Streak dots */
.streak { display: flex; gap: 5px; height: 31px; align-items: center; }
.streak i { width: 13px; height: 13px; border: 2.5px solid var(--ink); border-radius: 50%; box-sizing: border-box; }
.streak i.on { background: var(--green); }

/* Hold-to-hide button */
.hide-btn {
  position: absolute; z-index: 4;
  left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  transform: translateX(-50%);
  width: 108px; height: 68px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 0; border-radius: var(--radius-button);
  background: var(--ink); color: var(--white);
  font-family: var(--font-mono); font-weight: 600; font-size: 14px; letter-spacing: .16em;
  box-shadow: 0 0 0 4px var(--paper);
  touch-action: none; cursor: pointer;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.hide-btn[aria-pressed="true"] { box-shadow: 0 0 0 4px var(--paper), 0 0 0 9px var(--green); transform: translateX(-50%) scale(.95); }
.hide-btn:focus-visible { outline: 3px solid var(--green); outline-offset: 6px; }
/* a tap on the scene while hiding nudges the Hide button: let go to throw */
.hide-btn.nudge { animation: nudge .32s ease-out; }
@keyframes nudge {
  25% { transform: translateX(calc(-50% - 2px)) scale(.95); }
  50% { transform: translateX(calc(-50% + 2px)) scale(.95); }
  75% { transform: translateX(calc(-50% - 1px)) scale(.95); }
}

/* Start and finish screens */
/* screens fade and slide in, and fade out when you press Play (instant under reduced motion) */
.screen.enter { animation: screenIn .22s ease-out; }
#start.enter .card { animation: cardIn .22s ease-out; } /* the Finish card lands with the frame's stamp instead */
.screen.leaving { animation: screenOut .16s ease-in forwards; pointer-events: none; }
@keyframes screenIn { from { opacity: 0; } }
@keyframes cardIn { from { transform: translateY(12px); } }
@keyframes screenOut { to { opacity: 0; } }
#endHost { display: block; width: 160px; height: 108px; margin: 8px auto 0; }
.btn:disabled { opacity: .5; cursor: progress; }

/* High scores */
.scores { margin: 26px 0 0; padding: 18px 0 0; border-top: 2px dashed var(--ink-light); }
.scores-title { margin: 0; font-size: 12px; font-weight: 600; color: var(--ink-dark); }
.hs-form { margin-top: 12px; }
.hs { margin-top: 14px; }
.hs-list { max-height: none; }

.todo { margin: 16px 0 18px; }

@media (prefers-reduced-motion: reduce) {
  .hud-val.low, .hud-val.hit, .hide-btn.nudge { animation: none; }
  .screen.enter, .screen.enter .card, .screen.leaving { animation: none; }
}