/* Gokab game surface — the design handoff (Space Grotesk + DM Mono, yellow accent, auto light/dark).
 *
 * EVERYTHING is scoped under .gk-app. The kit layout's `stylesheet_link_tag :app` globs every CSS
 * file in app/assets, so this file is parsed on the marketing/auth pages too — and the kit's
 * Terminal system already owns :root tokens with names this design also uses (--ink). Hence the
 * --gk-* prefix and the .gk-app scope: nothing here can leak into the kit's chrome, and nothing
 * there can leak in.
 *
 * Theme: Light is the default; Dark comes from prefers-color-scheme, which means the palette
 * follows the device and re-renders live when the OS setting changes, with no JS involved.
 */

/* ------------------------------------------------------------------ Fonts --- */
/* Self-hosted (app/assets/fonts). Propshaft rewrites these url()s to digested paths. */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/space-grotesk-latin-dfda626c.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/space-grotesk-latin-ext-f523b595.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/dm-mono-400-latin-bf792450.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/dm-mono-400-latin-ext-c908ed67.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/dm-mono-500-latin-e06c27ef.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/dm-mono-500-latin-ext-ba1b3349.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ----------------------------------------------------------------- Tokens --- */

.gk-app {
  /* Accent — yellow only. Bright yellow is illegible as small text on a light ground, so accent
     TEXT on Light is a darkened sibling on the same hue; fills stay bright with dark text on top. */
  --gk-accent: #ffd21e;
  --gk-accent-text: #e0a400;
  --gk-on-accent: #0c1206;
  --gk-heat-end: #ff7a1a;

  /* Light (default) */
  --gk-bg: #eef1f6;
  --gk-bg-grad: linear-gradient(180deg, #f7f9fd 0%, #e8ecf4 100%);
  --gk-ink: #161824;
  --gk-dim: #6b6f83;
  --gk-dim2: #565a6d;
  --gk-mute: #9298ac;
  --gk-line: #e1e4ef;
  --gk-tile: #ffffff;
  --gk-tile-line: #e4e7f1;
  --gk-tile-shadow: 0 2px 5px rgba(22, 30, 60, .06);
  --gk-track: #e3e6f2;
  --gk-dot: #dde1ee;
  --gk-bad: #f0405e;
  --gk-bad-text: #d31e4c;
  --gk-bad-tile: #ffe6ec;
  --gk-pill-border: rgba(22, 24, 36, .16);

  --gk-glow: #ffd21e33;
  --gk-glow-op: .55;
  --gk-flash-op: .16;
  --gk-flash-blend: multiply;
  --gk-vignette: none;
  --gk-shadow-btn: 0 12px 30px -10px var(--gk-accent);
  --gk-ring-glow-op: .65;
}

@media (prefers-color-scheme: dark) {
  .gk-app {
    --gk-accent-text: var(--gk-accent); /* bright yellow reads fine as text on the dark ground */
    --gk-on-accent: #07070e;

    --gk-bg: #07070e;
    --gk-bg-grad: none;
    --gk-ink: #f2f2ff;
    --gk-dim: #8686a6;
    --gk-dim2: #a6a6c4;
    --gk-mute: #6a6a88;
    --gk-line: #262642;
    --gk-tile: #141428;
    --gk-tile-line: #262642;
    --gk-tile-shadow: none;
    --gk-track: #1b1b30;
    --gk-dot: #20203a;
    --gk-bad: #ff3b6b;
    --gk-bad-text: #ff3b6b;
    --gk-bad-tile: #2a1220;
    --gk-pill-border: rgba(255, 255, 255, .14);

    --gk-glow: #ffd21e22;
    --gk-glow-op: .42;
    --gk-flash-op: .5;
    --gk-flash-blend: screen;
    --gk-vignette: radial-gradient(120% 90% at 50% 0%, transparent 40%, #07070e 100%);
    --gk-shadow-btn: 0 0 40px -8px var(--gk-accent);
    --gk-ring-glow-op: .5;
  }
}

/* The body colour has to be set outside .gk-app too, or overscroll on iOS shows white behind a
   dark game. Scoped to the game layout's body class so kit pages are untouched. */
.gk-body { margin: 0; background: #eef1f6; }
@media (prefers-color-scheme: dark) { .gk-body { background: #07070e; } }

/* ------------------------------------------------------------------ Shell --- */

.gk-app {
  position: relative;
  min-height: 100dvh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--gk-bg-grad, none), var(--gk-bg);
  color: var(--gk-ink);
  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

.gk-app *, .gk-app *::before, .gk-app *::after { box-sizing: border-box; }
/* [hidden] must always beat component display rules, or hidden screens leak through. */
.gk-app [hidden] { display: none !important; }

/* The slow accent bloom behind everything. */
.gk-glow {
  position: absolute;
  width: 700px;
  height: 700px;
  top: 50%;
  left: 50%;
  margin: -350px 0 0 -350px;
  background: conic-gradient(from 0deg, var(--gk-glow), transparent 30%, var(--gk-glow), transparent 62%, var(--gk-glow));
  filter: blur(72px);
  opacity: var(--gk-glow-op);
  animation: gk-spin 26s linear infinite;
  pointer-events: none;
}
/* Dimmed once play starts so the word and tiles stay the hero. */
.gk-app[data-phase="warmup"] .gk-glow,
.gk-app[data-phase="run"] .gk-glow,
.gk-app[data-phase="over"] .gk-glow { opacity: calc(var(--gk-glow-op) * .72); }

.gk-vignette {
  position: absolute;
  inset: 0;
  background: var(--gk-vignette);
  pointer-events: none;
}

/* Full-screen answer feedback. Re-triggered by swapping the animation via a data attribute. */
.gk-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  mix-blend-mode: var(--gk-flash-blend);
  pointer-events: none;
}
.gk-flash[data-flash="ok"]  { background: var(--gk-accent); animation: gk-flash .5s ease forwards; }
.gk-flash[data-flash="bad"] { background: var(--gk-bad);    animation: gk-flash .5s ease forwards; }

/* The play column: full-bleed on a phone, a centred 460px column on a desktop.

   min-width: 0 because this is a flex item, and a flex item's default `min-width: auto` refuses to
   shrink below its content's min-content width. One long unbreakable headline is then enough to
   push the whole column — cards, buttons and all — past the right edge of a narrow phone, where
   .gk-app's `overflow: hidden` quietly clips it. */
.gk-col {
  position: relative;
  z-index: 2;
  width: 100%;
  min-width: 0;
  max-width: 460px;
  min-height: 100dvh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.gk-screen { flex: 1; display: flex; flex-direction: column; }
.gk-screen[hidden] { display: none; }

/* Safe-area insets keep the column clear of the notch and the home indicator when installed.
   max() so the design's padding still wins on hardware without insets. */
.gk-screen--landing {
  justify-content: space-between;
  padding:
    max(clamp(40px, 9vh, 84px), env(safe-area-inset-top))
    max(30px, env(safe-area-inset-right))
    max(40px, env(safe-area-inset-bottom))
    max(30px, env(safe-area-inset-left));
  animation: gk-rise .5s ease;
}
.gk-screen--play {
  padding:
    max(clamp(28px, 5vh, 44px), env(safe-area-inset-top))
    max(22px, env(safe-area-inset-right))
    max(26px, env(safe-area-inset-bottom))
    max(22px, env(safe-area-inset-left));
}
.gk-screen--result {
  padding:
    max(clamp(30px, 6vh, 52px), env(safe-area-inset-top))
    max(30px, env(safe-area-inset-right))
    max(30px, env(safe-area-inset-bottom))
    max(30px, env(safe-area-inset-left));
  animation: gk-rise .45s ease;
}
.gk-screen--stats {
  padding:
    max(clamp(36px, 7vh, 64px), env(safe-area-inset-top))
    max(30px, env(safe-area-inset-right))
    max(36px, env(safe-area-inset-bottom))
    max(30px, env(safe-area-inset-left));
  animation: gk-rise .45s ease;
}

/* ------------------------------------------------------------ Type helpers --- */

.gk-mono { font-family: 'DM Mono', ui-monospace, Menlo, monospace; }
.gk-accent { color: var(--gk-accent-text); }

.gk-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .22em;
  padding: 6px 13px;
  border-radius: 30px;
  white-space: nowrap;
  color: var(--gk-accent-text);
  background: transparent;
  border: 1px solid var(--gk-pill-border);
}
.gk-pill--solid {
  color: var(--gk-on-accent);
  background: var(--gk-accent);
  border-color: transparent;
}

.gk-bolt { flex-shrink: 0; fill: currentColor; }

/* Value-over-label stat, mono value in accent (landing) */
.gk-stat__value {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 26px;
  line-height: 1;
  white-space: nowrap;
  color: var(--gk-accent-text);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.gk-stat__label { margin-top: 6px; font-size: 12px; line-height: 1.2; color: var(--gk-mute); }

/* Bigger sans stat (result + stats screens) */
.gk-bigstat__value {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  color: var(--gk-ink);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.gk-bigstat__label { margin-top: 5px; font-size: 12px; color: var(--gk-mute); }

/* --------------------------------------------------------------- Buttons --- */

.gk-btn {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: 19px;
  font-weight: 700;
  color: var(--gk-on-accent);
  background: var(--gk-accent);
  border: none;
  border-radius: 18px;
  padding: 19px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: transform .1s;
  box-shadow: var(--gk-shadow-btn);
}
.gk-btn:active { transform: scale(.97); }
.gk-btn--compact { font-size: 17px; border-radius: 16px; padding: 17px; }

.gk-ghost {
  flex: 1;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--gk-ink);
  background: transparent;
  border: 1px solid var(--gk-line);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  /* ≥44px hit target even though the label is small. */
  min-height: 48px;
}
.gk-ghost--accent {
  color: var(--gk-on-accent);
  background: var(--gk-accent);
  border-color: transparent;
  font-weight: 700;
}
.gk-ghost[disabled] { opacity: .55; cursor: default; }

.gk-btnrow { display: flex; gap: 11px; }

.gk-countdown {
  margin-top: 14px;
  text-align: center;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .05em;
  color: var(--gk-mute);
}

/* --------------------------------------------------------------- Landing --- */

.gk-wordmark {
  font-weight: 700;
  font-size: 26px;
  letter-spacing: .03em;
  line-height: 1;
  color: var(--gk-ink);
}
/* It is a link back to the picker on every screen except the picker itself. Inline-block so the
   hit area is the wordmark and not the full column width, and the colour/decoration are pinned
   because the game layout has no link reset of its own. */
a.gk-wordmark {
  display: inline-block;
  text-decoration: none;
  color: var(--gk-ink);
  transition: opacity .16s ease;
}
a.gk-wordmark:hover { opacity: .72; }
a.gk-wordmark:focus-visible {
  outline: 2px solid var(--gk-accent);
  outline-offset: 6px;
  border-radius: 4px;
}

/* The leading G underlined by an accent bar — the app icon, echoed in type. */
.gk-wordmark__g {
  display: inline-block;
  border-bottom: 4px solid var(--gk-accent);
  padding-bottom: 3px;
}

.gk-greeting {
  margin-top: 30px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--gk-dim2);
}
.gk-greeting span { color: var(--gk-accent-text); }

.gk-headline {
  margin: 10px 0 0;
  font-size: clamp(40px, 10.5vw, 54px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--gk-ink);
}
.gk-headline span { color: var(--gk-accent-text); }

.gk-intro {
  margin-top: 20px;
  max-width: 310px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--gk-dim2);
}

.gk-statrow { display: flex; gap: 44px; margin-bottom: 24px; }

/* -------------------------------------------------------------- Gameplay --- */

.gk-topbar { display: flex; align-items: center; justify-content: space-between; }
.gk-level {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--gk-dim);
}
.gk-level span { color: var(--gk-accent-text); font-weight: 500; }

/* Heat bar: grows with the streak, and the multiplier bumps beside it. */
.gk-heatrow { display: flex; align-items: center; gap: 12px; margin: 16px 0 4px; }
.gk-heat { flex: 1; height: 6px; border-radius: 4px; background: var(--gk-track); overflow: hidden; }
.gk-heat__fill {
  height: 100%;
  width: 0;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--gk-accent), var(--gk-heat-end));
  transition: width .3s ease;
}
.gk-mult {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 15px;
  font-weight: 500;
  color: var(--gk-mute);
}
.gk-mult.is-live { color: var(--gk-accent-text); animation: gk-bump .4s; }

.gk-dots { display: flex; gap: 7px; justify-content: center; margin: 16px 0 4px; }
.gk-dots span {
  width: 28px;
  height: 5px;
  border-radius: 3px;
  background: var(--gk-dot);
  transition: background .2s;
}
.gk-dots span.is-done { background: var(--gk-accent); }

.gk-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
}

.gk-warmlabel {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--gk-mute);
}

/* Timer ring */
.gk-ring { position: relative; width: 132px; height: 132px; }
.gk-ring__glow {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  box-shadow: 0 0 34px -4px var(--gk-accent);
  opacity: var(--gk-ring-glow-op);
}
.gk-ring__svg { transform: rotate(-90deg); position: relative; display: block; }
.gk-ring__track { fill: none; stroke: var(--gk-track); stroke-width: 9; }
.gk-ring__bar {
  fill: none;
  stroke: var(--gk-accent);
  stroke-width: 9;
  stroke-linecap: round;
  transition: stroke-dashoffset .09s linear;
}
.gk-ring__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.gk-ring__secs {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
  color: var(--gk-ink);
}
.gk-ring__unit {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--gk-mute);
  margin-top: 2px;
}
/* Under a third of the clock left: everything goes red and pulses. */
.gk-ring.is-danger .gk-ring__bar { stroke: var(--gk-bad); }
.gk-ring.is-danger .gk-ring__glow { box-shadow: 0 0 34px -4px var(--gk-bad); opacity: .9; animation: gk-pulse .55s infinite; }
.gk-ring.is-danger .gk-ring__secs { color: var(--gk-bad); animation: gk-pulse .55s infinite; }

.gk-word {
  font-size: clamp(54px, 16vw, 70px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  text-align: center;
  color: var(--gk-ink);
  animation: gk-pop .35s ease;
}

.gk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 8px; }
.gk-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 19px;
  font-weight: 600;
  color: var(--gk-ink);
  background: var(--gk-tile);
  border: 1px solid var(--gk-tile-line);
  box-shadow: var(--gk-tile-shadow);
  border-radius: 16px;
  padding: 22px 10px;
  min-height: 72px;
  cursor: pointer;
  transition: all .12s;
}
.gk-tile__mark { font-weight: 700; }
.gk-tile.is-correct {
  background: var(--gk-accent);
  color: var(--gk-on-accent);
  border-color: var(--gk-accent);
  box-shadow: 0 0 26px -6px var(--gk-accent);
}
.gk-tile.is-wrong {
  background: var(--gk-bad-tile);
  color: var(--gk-bad-text);
  border-color: var(--gk-bad);
  animation: gk-shake .42s;
}
.gk-tile.is-muted { opacity: .35; }
.gk-tile[disabled] { cursor: default; }

/* ---------------------------------------------------------------- Result --- */

.gk-resulthead { display: flex; justify-content: space-between; align-items: center; }
.gk-day {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--gk-mute);
}

.gk-resultbody { flex: 1; display: flex; flex-direction: column; justify-content: center; }

.gk-kicker {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: .22em;
  color: var(--gk-dim);
  margin-bottom: 6px;
}

.gk-hero { display: flex; align-items: baseline; gap: 2px; }
.gk-hero__num {
  font-size: clamp(104px, 34vw, 140px);
  line-height: .78;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--gk-ink);
}
.gk-hero__pct {
  font-size: clamp(44px, 13vw, 58px);
  font-weight: 700;
  color: var(--gk-accent-text);
}
.gk-hero__sub { margin: 10px 0 0; font-size: 16px; color: var(--gk-dim2); }

/* You against everyone else, on one line. */
.gk-meter { margin-top: 24px; }
.gk-meter__track { position: relative; height: 12px; border-radius: 8px; background: var(--gk-track); }
.gk-meter__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  border-radius: 8px;
  background: var(--gk-accent);
  box-shadow: 0 0 18px -4px var(--gk-accent);
  transition: width .7s cubic-bezier(.2, .8, .2, 1);
}
.gk-meter__dot {
  position: absolute;
  top: 50%;
  left: 0;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  background: var(--gk-accent);
  border: 3px solid var(--gk-bg);
  box-shadow: 0 0 12px -2px var(--gk-accent);
  transition: left .7s cubic-bezier(.2, .8, .2, 1);
}
.gk-meter__ends {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .08em;
}
.gk-meter__you { color: var(--gk-accent-text); font-weight: 500; }
.gk-meter__world { color: var(--gk-mute); }

/* One square per ranked answer — the shareable trail. */
.gk-trail { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 26px; }
.gk-trail span { width: 22px; height: 22px; border-radius: 5px; background: var(--gk-accent); opacity: .92; }
.gk-trail span.is-miss { background: var(--gk-bad); opacity: 1; }

.gk-bigstats { display: flex; gap: 34px; margin-top: 24px; }

/* The word that ended the run — the one bit of teaching the result screen keeps. */
.gk-taught {
  margin: 22px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gk-dim2);
}
.gk-taught b { color: var(--gk-accent-text); font-weight: 600; }
.gk-taught i { font-style: normal; color: var(--gk-mute); }

.gk-actions { display: flex; flex-direction: column; gap: 11px; }

.gk-sharelink {
  text-align: center;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 11.5px;
  color: var(--gk-accent-text);
  word-break: break-all;
  padding: 2px 6px;
}

/* ----------------------------------------------------------------- Stats --- */

.gk-statshead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.gk-statshead h2 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--gk-ink); }

.gk-week { display: flex; align-items: flex-end; gap: 10px; height: 160px; }
.gk-week__day {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.gk-week__bar {
  width: 100%;
  min-height: 8px;
  border-radius: 6px;
  background: var(--gk-dot);
  transition: height .5s ease;
}
.gk-week__day.is-today .gk-week__bar { background: var(--gk-accent); box-shadow: 0 0 20px -6px var(--gk-accent); }
.gk-week__label { font-family: 'DM Mono', ui-monospace, monospace; font-size: 11px; color: var(--gk-mute); }

.gk-rule { height: 1px; background: var(--gk-line); margin: 28px 0; }
.gk-statsrow { display: flex; justify-content: space-between; }
.gk-note { margin-top: 20px; font-size: 15px; line-height: 1.5; color: var(--gk-dim2); }
.gk-spacer { flex: 1; }

/* ------------------------------------------------------------- Challenge --- */
/* The /share/:date/:code page a friend opens. Same shell, no game. */

.gk-screen--challenge {
  justify-content: space-between;
  padding:
    max(clamp(40px, 9vh, 84px), env(safe-area-inset-top))
    max(30px, env(safe-area-inset-right))
    max(40px, env(safe-area-inset-bottom))
    max(30px, env(safe-area-inset-left));
  animation: gk-rise .5s ease;
}

/* ---------------------------------------------------------------- Motion --- */

@keyframes gk-shake {
  0%, 100% { transform: translateX(0); }
  18% { transform: translateX(-9px); }
  36% { transform: translateX(8px); }
  54% { transform: translateX(-5px); }
  72% { transform: translateX(4px); }
}
@keyframes gk-pop {
  0% { transform: scale(.7); opacity: 0; }
  55% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes gk-rise {
  0% { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes gk-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
@keyframes gk-spin { to { transform: rotate(360deg); } }
@keyframes gk-flash {
  0% { opacity: var(--gk-flash-op); }
  100% { opacity: 0; }
}
@keyframes gk-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* The arcade energy is decoration, not information — everything it conveys is also in the layout,
   the numbers, and the colours. Honour a request for calm. */
@media (prefers-reduced-motion: reduce) {
  .gk-app *, .gk-app *::before, .gk-app *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .gk-glow { animation: none; }
}

/* ------------------------------------------------------- Language switcher --- */

/* Top right of every screen except a live run. A <details> disclosure, so it opens and closes with
   no JavaScript and still works in the offline shell.

   Anchored to .gk-col, not .gk-app: the column is full-bleed on a phone, so the two are identical
   there, but on a desktop .gk-app is the whole viewport and the toggle would drift hundreds of
   pixels away from the content it belongs to. The insets mirror .gk-screen--landing's own padding,
   so it lines up with the wordmark below it and stays clear of the notch in an installed PWA. */
.gk-lang {
  position: absolute;
  top: max(clamp(34px, 7vh, 70px), calc(env(safe-area-inset-top) + 10px));
  right: max(22px, calc(env(safe-area-inset-right) + 10px));
  z-index: 5;
  font-family: 'DM Mono', ui-monospace, monospace;
}

/* Never mid-run. A player four seconds into a timed tile must not be one stray tap from navigating
   away and losing a run they only get one of per day. */
.gk-app[data-phase="play"] .gk-lang { display: none; }

.gk-lang__current {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid var(--gk-pill-border);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--gk-dim2);
  background: var(--gk-tile);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: border-color .16s ease, color .16s ease;
}
.gk-lang__current::-webkit-details-marker { display: none; }
.gk-lang__current:hover { border-color: var(--gk-accent); color: var(--gk-ink); }
.gk-lang[open] .gk-lang__current { border-color: var(--gk-accent); color: var(--gk-ink); }
.gk-lang__caret { transition: transform .16s ease; }
.gk-lang[open] .gk-lang__caret { transform: rotate(180deg); }

/* The flag is decoration and the name is the label — Windows Chrome and Edge draw no flag at all,
   so the row has to read correctly with the emoji missing entirely. */
.gk-lang__flag { font-size: 15px; line-height: 1; }

.gk-lang__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 214px;
  padding: 6px;
  border: 1px solid var(--gk-line);
  border-radius: 14px;
  background: var(--gk-tile);
  box-shadow: 0 18px 40px -18px rgba(10, 12, 30, .5);
  animation: gk-rise .18s ease;
}

.gk-lang__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--gk-ink);
}
.gk-lang__option:hover { background: var(--gk-track); }
.gk-lang__option.is-current { color: var(--gk-accent-text); }
.gk-lang__option .gk-lang__name { display: block; font-size: 13px; }
.gk-lang__variant { display: block; margin-top: 2px; font-size: 10.5px; color: var(--gk-mute); }

/* ---------------------------------------------------------- Language picker --- */

/* The root page for anyone with no language cookie yet. Four links, nothing else. */
.gk-picker { display: flex; flex-direction: column; gap: 10px; margin-top: 30px; }

.gk-picker__option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border: 1px solid var(--gk-tile-line);
  border-radius: 16px;
  background: var(--gk-tile);
  box-shadow: var(--gk-tile-shadow);
  text-decoration: none;
  color: var(--gk-ink);
  transition: border-color .16s ease, transform .16s ease;
}
.gk-picker__option:hover { border-color: var(--gk-accent); transform: translateX(3px); }

.gk-picker__flag { font-size: 26px; line-height: 1; }
.gk-picker__text { flex: 1; }
.gk-picker__name { display: block; font-size: 17px; font-weight: 600; }
.gk-picker__variant {
  display: block;
  margin-top: 2px;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--gk-mute);
}
.gk-picker__go { color: var(--gk-accent-text); font-size: 18px; }