.snowfight { max-width: 72rem; }
#app.snowfight .bar h1 { font-size: var(--step-2); }

/* The field's colours, read by the canvas at draw time. */
:root {
  --snow-1: #f7f9ff;
  --snow-2: #e6ecfb;
  --snow-edge: #c9d3f2;
  --snow-wall: #ffffff;
  --snow-wall-top: #f4f7ff;
  --snow-wall-edge: #a9b6e6;
  --snow-shadow: rgb(74 37 69 / 0.16);
  --snow-ball: #ffffff;
  --snow-face: #ffd9bf;
  --snow-ink: #4a2545;
  --snow-label: #4a2545;
  --snow-label-ground: rgb(255 255 255 / 0.85);
  --snow-bench: #d7b48f;
  --snow-aim: #d63f8c;
  --snow-aim-bad: #8a8fb3;
}
@media (prefers-color-scheme: dark) {
  :root {
    --snow-1: #2b3152;
    --snow-2: #343b62;
    --snow-edge: #4b5488;
    --snow-wall: #dfe6ff;
    --snow-wall-top: #f4f7ff;
    --snow-wall-edge: #8d9be0;
    --snow-shadow: rgb(0 0 0 / 0.35);
    --snow-ball: #fffaf3;
  --snow-face: #f6c9a8;
    --snow-ink: #2a1530;
    --snow-label: #fbe9f4;
    --snow-label-ground: rgb(31 18 32 / 0.8);
    --snow-bench: #8a6a52;
    --snow-aim: #ff8fc7;
    --snow-aim-bad: #9aa2cc;
  }
}

.bar { display: flex; align-items: baseline; gap: 0.25rem 1rem; flex-wrap: wrap; margin-bottom: 0.25rem; }
.bar h1 { margin: 0; flex: 1; }
.bar .crumb { font-size: 0.8rem; color: var(--ink-soft); width: 100%; }
.room { font-family: var(--font-mono); font-size: 0.85rem; display: flex; align-items: center; gap: 0.5rem; }
.room .label { color: var(--ink-soft); }
.room .code { font-size: 1.15rem; letter-spacing: 0.12em; }

.status { margin: 0 0 0.5rem; font-weight: 600; min-height: 1.5em; }
.status.warn { color: var(--bad); }
.status.nudge { color: var(--candyfloss-deep); }

.stage {
  position: relative;
  height: clamp(20rem, calc(100dvh - 5rem), 48rem);
  border-radius: var(--radius); overflow: hidden;
  border: 2px solid var(--rule);
  background: color-mix(in srgb, var(--lilac) 18%, var(--paper));
  user-select: none; -webkit-user-select: none;
}
.fs.full .stage { height: calc(100dvh - 6rem); }
.field { display: block; width: 100%; height: 100%; touch-action: none; cursor: pointer; }
.field.aiming { cursor: crosshair; }
.stage [hidden] { display: none !important; }

.hud {
  position: absolute; inset: 0.5rem 0.5rem auto; display: flex; justify-content: center; gap: 0.5rem;
  pointer-events: none;
}
.hud p {
  margin: 0; padding: 0.2rem 0.8rem; border-radius: 999px; background: color-mix(in srgb, var(--paper) 88%, transparent);
  font-family: var(--font-display); font-weight: 600; line-height: 1.3; white-space: nowrap; box-shadow: var(--shadow);
}
.hud .hearts { color: var(--candyfloss-deep); letter-spacing: 0.08em; }
.hud .time { font-family: var(--font-mono); font-size: 1rem; }
.hud .time.hurry { color: var(--bad); }

.banner {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); margin: 0; pointer-events: none;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 7vw, 3.4rem); color: var(--ink);
  text-shadow: 0 0 14px var(--paper), 0 0 4px var(--paper); white-space: nowrap;
}
.banner[data-kind="count"] { font-size: clamp(3rem, 14vw, 6rem); }
.banner[data-kind="win"] { color: var(--candyfloss-deep); font-size: clamp(2.2rem, 9vw, 4.4rem); }
.banner:not([hidden]) { animation: pop 300ms cubic-bezier(.3,1.6,.5,1); }
@keyframes pop { from { transform: translate(-50%, -50%) scale(0.6); opacity: 0; } to { transform: translate(-50%, -50%); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .banner:not([hidden]) { animation: none; } }

/* Scoop and the Run / Throw switch, bottom left. */
.pads { position: absolute; left: 0.75rem; bottom: 0.75rem; display: flex; gap: 0.6rem; align-items: center; }
.pads button { touch-action: manipulation; font-family: var(--font-display); font-weight: 600; box-shadow: var(--shadow); }
.pads .scoop {
  width: 5.6rem; height: 5.6rem; border-radius: 50%; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #ffffff; border-color: #a9b6e6; color: #3a1636;
}
.pads .scoop .nm { font-size: 1.1rem; }
.pads .scoop .dots { font-size: 0.9rem; letter-spacing: 0.12em; color: #5b6bb8; }
.pads .scoop:disabled { opacity: 0.65; }

/* A toggle switch: Run on the left, Throw on the right, the knob slides over. */
.pads .switch {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.8rem; border-radius: 999px;
  background: var(--paper); font-size: 1rem;
}
.switch .opt { color: var(--ink-soft); transition: color 150ms; }
.switch:not(.on) .run, .switch.on .throw { color: var(--ink); }
.switch .track {
  position: relative; width: 3.4rem; height: 1.9rem; border-radius: 999px;
  background: color-mix(in srgb, var(--lilac) 70%, var(--paper)); border: 2px solid var(--rule);
  transition: background 150ms;
}
.switch.on .track { background: var(--candyfloss); border-color: var(--candyfloss-deep); }
.switch .thumb {
  position: absolute; top: 0.12rem; left: 0.15rem; width: 1.45rem; height: 1.45rem; border-radius: 50%;
  background: #ffffff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.3); transition: transform 180ms cubic-bezier(.3,1.4,.5,1);
}
.switch.on .thumb { transform: translateX(1.45rem); }
.switch.empty:not(.on) .throw { opacity: 0.55; }
@media (prefers-reduced-motion: reduce) { .switch .thumb, .switch .track, .switch .opt { transition: none; } }

/* Lobby and results, over the field. */
.panel {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); z-index: 2;
  width: min(30rem, calc(100% - 1rem)); max-height: calc(100% - 1rem); overflow: auto;
  background: var(--card); border: 2px solid var(--rule); border-radius: var(--radius); padding: 1.1rem 1.25rem;
  box-shadow: var(--shadow);
}
.panel h2 { margin: 0 0 0.4rem; font-size: var(--step-1); }
.results { margin-bottom: 1rem; }
.results:not([hidden]) { animation: results-in 500ms ease-out both; }
@keyframes results-in { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .results:not([hidden]) { animation: none; } }
.scores { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.scores th { font: 600 0.7rem var(--font-mono); color: var(--ink-soft); text-transform: uppercase; }
.scores td, .scores th { padding: 0.25rem; border-bottom: 1px solid var(--rule); }
.scores .num { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.scores tr.me td { font-weight: 700; }
.swatch { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 50%; margin-right: 0.4rem; vertical-align: -0.05em; border: 1px solid var(--rule); }
.cpu { color: var(--ink-soft); font-size: 0.78rem; font-weight: 400; }
.people { list-style: none; margin: 0 0 0.3rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.people li { padding: 0.2rem 0.7rem; border-radius: 999px; background: color-mix(in srgb, var(--lilac) 25%, var(--paper)); font-size: 0.9rem; }
.who { color: var(--ink-soft); font-size: 0.85rem; margin: 0.4rem 0 0; }
.panel .primary { width: 100%; margin-top: 0.6rem; }
.note { color: var(--ink-soft); font-size: 0.78rem; margin: 0.4rem 0 0; text-align: center; }

.foot { display: grid; gap: 0 2rem; margin-top: 1.25rem; }
@media (min-width: 40rem) { .foot { grid-template-columns: 2fr 1fr; } }
.foot h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); margin: 0 0 0.4rem; }
.log { list-style: none; margin: 0 0 1rem; padding: 0; font-size: 0.9rem; }
.log li { padding: 0.2rem 0; border-bottom: 1px solid var(--rule); color: var(--ink-soft); }
.how p { font-size: 0.88rem; color: var(--ink-soft); margin: 0 0 0.5rem; }