/* ═══════════════════════════════════════════════════════════
   ALOHA SPORTSWEAR — coming soon
   A sport-matching game for four-year-olds.

   Visual system: Flying Papers (Saturday-morning cartoon on
   riso cardstock). Flat paint, hard black borders, no shadows,
   6px on blocks and 100px on pills, display type that eats the
   viewport.

   One deliberate departure: the system says never put more than
   two accent colours in one composition. A matching game needs
   every sport to be told apart at a glance, so the full confetti
   cast is on the field at once. Stage and type stay strict.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Brand */
  --violet:     #8584bd;   /* Dusk Violet — the stage, never a section accent */
  --lilac:      #61609a;   /* Lilac Shadow — nested surfaces on the stage */
  --hivis:      #f4ed36;   /* Hi-Vis Yellow — outlined actions only */
  --buttery:    #f9cc73;

  /* Confetti */
  --pink:       #f8c1ba;
  --matcha:     #b5c995;
  --magenta:    #ac4f98;
  --firecracker:#c94245;

  /* Neutrals */
  --black:      #000000;   /* hard borders and icons */
  --ink:        #1a1a1a;
  --bone:       #f9f5f2;

  --border: 3px;
  --r-block: 6px;          /* sharp blocks */
  --r-pill: 100px;         /* soft pills — the contrast is the signature */
  --pad: 17px;
  --gap: 17px;

  --display: "Anton", "Founders Grotesk Condensed", "Druk Wide", Impact, sans-serif;
  --mono: "JetBrains Mono", "Bergen Mono", ui-monospace, monospace;
  --ui: "Inter", "Degular", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--violet);
}

body {
  color: var(--black);
  font-family: var(--ui);
  touch-action: none;
  -webkit-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#field {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  display: block;
  cursor: pointer;
}

/* The chrome floats over the field and never steals a tap */
.ui {
  position: fixed; inset: 0;
  z-index: 2;
  pointer-events: none;
  display: flex; flex-direction: column;
  padding: calc(var(--pad) + env(safe-area-inset-top)) var(--pad)
           calc(var(--pad) + env(safe-area-inset-bottom));
}

/* ── Top bar ──────────────────────────────────────────────── */

.bar { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--gap); }

.brand { display: flex; align-items: center; gap: 10px; }
.mark { width: 44px; height: auto; fill: var(--black); }
.wordmark {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px; font-weight: 600; line-height: 0.8;
  text-transform: uppercase;
}

.bar__right { display: flex; align-items: center; gap: 10px; }

.round__n {
  margin: 0;
  display: flex; align-items: baseline; gap: 2px;
  background: var(--hivis);
  border: var(--border) solid var(--black);
  border-radius: var(--r-block);
  padding: 4px 12px 6px;
  font-family: var(--display);
  font-size: 30px; line-height: 0.8; letter-spacing: 0.02em;
}
.round__of { font-family: var(--mono); font-size: 13px; }

/* Ten flat blocks on their own row — a four-year-old can see the end coming */
.pips {
  display: flex; gap: 5px;
  justify-content: flex-end;
  margin-top: 10px;
}
.pips i {
  width: 11px; height: 11px;
  background: transparent;
  border: 2px solid var(--black);
  border-radius: 2px;
}
@media (min-width: 700px) { .pips i { width: 14px; height: 14px; } }
.pips i.is-done { background: var(--black); }

/* Outlined action — the system forbids a filled CTA */
.sound {
  pointer-events: auto;
  font-family: var(--mono);
  font-size: 12px; font-weight: 600; line-height: 0.8;
  text-transform: uppercase;
  color: var(--black);
  background: transparent;
  border: var(--border) solid var(--hivis);
  border-radius: var(--r-pill);
  padding: 10px 16px;
  cursor: pointer;
  white-space: nowrap;
}
.sound .sound__off { display: none; }
.sound[aria-pressed="false"] .sound__on { display: none; }
.sound[aria-pressed="false"] .sound__off { display: inline; }

/* ── The ask ──────────────────────────────────────────────── */

.ask {
  margin: 4vh auto 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center;
}

.ask__label {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px; font-weight: 600; line-height: 0.8;
  text-transform: uppercase;
}

.ask__card {
  display: flex; align-items: center; gap: 14px;
  background: var(--bone);
  border: var(--border) solid var(--black);
  border-radius: var(--r-block);
  padding: 10px 22px 10px 12px;
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1);
}
.ask__card.is-swap { transform: scale(1.09) rotate(-1.5deg); }

.ask__icon { width: 62px; height: 62px; display: block; }

.ask__word {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(46px, 13vw, 130px);
  font-weight: 900; line-height: 0.8;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ── Cheer ────────────────────────────────────────────────── */

.cheer {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.cheer.is-on { opacity: 1; }
.cheer span {
  font-family: var(--display);
  font-size: clamp(80px, 26vw, 244px);
  line-height: 0.8; letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--hivis);
  -webkit-text-stroke: 4px var(--black);
  transform: rotate(-4deg) scale(0.7);
  transition: transform 0.45s cubic-bezier(.34,1.56,.64,1);
}
.cheer.is-on span { transform: rotate(-4deg) scale(1); }

/* ── Footer ───────────────────────────────────────────────── */

.foot {
  margin-top: auto;
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gap);
  font-family: var(--mono);
  font-size: 12px; font-weight: 600; line-height: 0.8;
  text-transform: uppercase;
}
.foot p { margin: 0; }

/* Flat chips so the footer stays readable when a disc floats over it */
.foot__soon, .foot__tag {
  background: var(--bone);
  border: var(--border) solid var(--black);
  border-radius: var(--r-block);
  padding: 8px 12px;
}
.foot__soon { display: flex; align-items: center; gap: 8px; }
.dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--firecracker);
  border: 2px solid var(--black);
  animation: blink 2.4s ease-in-out infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.foot__tag { color: var(--lilac); }

/* ── Roomier screens ──────────────────────────────────────── */

@media (min-width: 700px) {
  :root { --pad: 28px; }
  .mark { width: 60px; }
  .wordmark { font-size: 14px; }
  .ask { gap: 12px; }
  .ask__icon { width: 92px; height: 92px; }
  .ask__card { gap: 20px; padding: 14px 30px 14px 16px; }
  .round__n { font-size: 40px; }
}

/* ── Reduced motion ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .dot { animation: none; }
  .ask__card, .cheer span { transition: none; }
}

/* ── Finish ───────────────────────────────────────────────── */

.done {
  position: fixed; inset: 0; z-index: 5;
  display: grid; place-items: center;
  padding: var(--pad);
  background: rgba(97, 96, 154, 0.72);
}
.done[hidden] { display: none; }

.done__card {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  background: var(--bone);
  border: var(--border) solid var(--black);
  border-radius: var(--r-block);
  padding: 28px 26px 26px;
  text-align: center;
  max-width: 460px;
}
.done__kicker {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px; font-weight: 600; line-height: 0.8;
  text-transform: uppercase;
}
.done__title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(48px, 14vw, 113px);
  line-height: 0.8; letter-spacing: 0.02em;
  text-transform: uppercase;
}
.done__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.done__row canvas { width: 46px; height: 46px; display: block; }

/* Outlined pill — the system has no filled CTA */
.btn {
  pointer-events: auto;
  font-family: var(--mono);
  font-size: 14px; font-weight: 600; line-height: 0.8;
  text-transform: uppercase;
  color: var(--black);
  background: transparent;
  border: var(--border) solid var(--hivis);
  border-radius: var(--r-pill);
  padding: 14px 26px;
  margin-top: 4px;
  cursor: pointer;
}
.btn:hover, .btn:focus-visible { background: var(--hivis); }