/* #279: 44px is the tap floor Apple and Google both publish, and the
   header pill (Home / Mute / Help) is the one control on every screen of
   every product. Measured before this: 31.6px to 42px across 12 products.
   Raised to the floor rather than to taste. */
/* Gloop Run — presentation only. The road is a canvas: a pseudo-3D scanline
   projection redrawn every frame, so nothing here knows about perspective. */

:root {
  --bg: #0f172a;
  --panel: #1e293b;
  --line: #334155;
  --ink: #e2e8f0;
  --dim: #94a3b8;
  --accent: #38bdf8;
  --go: #22c55e;
  --stop: #ef4444;
  --gold: #fbbf24;

  /* The road's own palette, named for the ROLE so the legend can resolve the
     same custom property the canvas does and cannot drift away from it.

     v6: THERE IS NO GROUND AND NO SKY. The road is one lit ribbon in a void —
     `--sky` and `--ground` are gone rather than retinted, because a name kept
     alive for a thing that no longer exists is how a stylesheet starts lying.
     `--void` is what is behind everything now. */
  --void: #04070f;
  --tarmac: #16233a;
  --tarmacAlt: #223550;    /* the alternating band that gives speed a texture.
                              Measured: at #232f3f against #1f2937 the two were
                              4 points apart and the road read as motionless at
                              8,000 units a second. Speed you cannot see is not
                              speed. */
  --edge: #e2e8f0;
  --blobFront: #7dd3fc;    /* its front, the one the walls read */
        --wall: #ef4444;
  --wallOpen: #22c55e;     /* a wall lane you can get through right now */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--ink);
  font: 400 16px/1.45 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden; overscroll-behavior: none;
}

#app { height: 100%; display: flex; flex-direction: column; }
.scr { display: none; flex: 1; min-height: 0; flex-direction: column; }
.scr.on { display: flex; }

#scr-menu, #scr-how, #scr-win {
  overflow-y: auto;
  padding: max(16px, env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom));
  align-items: stretch;
}

h1 { font-size: 30px; margin: 8px 0 2px; text-align: center; }
h2 { font-size: 17px; margin: 0 0 6px; }
.sub { text-align: center; color: var(--dim); margin-bottom: 16px; }

/* ---- buttons ---- */

.big {
  display: block; width: 100%; margin: 8px 0; padding: 14px 16px;
  font: 600 16px/1 inherit; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  cursor: pointer; text-align: center; text-decoration: none;
  -webkit-appearance: none; appearance: none; touch-action: manipulation;
}
.big.primary { background: var(--accent); color: #04233a; border-color: transparent; }
.big:active { transform: translateY(1px); }

.btn {
  padding: 9px 12px; font: 600 14px/1 inherit; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  cursor: pointer; -webkit-appearance: none; appearance: none;
  touch-action: manipulation; min-height: 44px;}

.pill {
  padding: 8px 10px; min-width: 44px; min-height: 44px;
  font: 600 14px/1 inherit; color: var(--ink);
  background: rgba(255, 255, 255, .06); border: 1px solid var(--line);
  border-radius: 10px; cursor: pointer; white-space: nowrap;
  display: flex; align-items: center; justify-content: center;
  -webkit-appearance: none; appearance: none; touch-action: manipulation;
}
.pill:disabled { opacity: .35; cursor: default; }

/* ---- tiers ---- */

#tierRow { display: flex; gap: 8px; margin-bottom: 4px; }
/* THESE RULES WERE ORPHANED. They were written for `.tier`, the markup emits
   `.tierBtn`, and the net effect was that the rung and mode pickers rendered as
   NATIVE BUTTONS — white boxes with run-together text on a dark theme. It was
   visible in the first screenshot of every release since v5.0 and reported by
   `just check-classes`, which is wired into neither `guards` nor `guards-full`.
   A guard nobody runs is a guard that does not exist (#272, again). */
.tierBtn {
  flex: 1; padding: 12px 6px; border-radius: 12px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink);
  font: 600 13px/1.2 inherit; text-align: center; min-height: 44px;
  -webkit-appearance: none; appearance: none; touch-action: manipulation;
}
.tierBtn .te { display: block; font-size: 18px; line-height: 1.1; }
.tierBtn small { display: block; font-weight: 400; font-size: 11px; color: var(--dim); margin-top: 3px; }
.tierBtn[aria-checked="true"] { border-color: var(--accent); background: #10344a; }

/* ---- settings ---- */

details#custom {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; margin: 8px 0; padding: 0 14px;
}
details#custom summary {
  padding: 14px 0; font-weight: 600; cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 8px;
}
details#custom summary::-webkit-details-marker { display: none; }
.badge {
  margin-left: auto; font: 400 12px/1 inherit; color: var(--dim);
  max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fields { padding-bottom: 12px; }
/* WRAPS (R-G26.9). A settings row is [label][segmented control], and the
   control's width is decided by its option labels at runtime. Measured at
   320px this row ran 13px past the screen edge, so the last option was
   cut in half — a control you cannot see or reliably hit. Wrapping drops
   the control onto its own line ONLY when it has to; at 375px and wider
   nothing moves. */
.field { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0; min-height: 44px; }
.field .lbl { flex: 0 0 76px; font-size: 13px; color: var(--dim); }
.seedRow { display: flex; flex: 1; gap: 6px; }
/* R188's two sliders. The readout is a fixed column so the row does not jog
   sideways as "30s" becomes "2.5 min". */
.slideRow { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; }
.slideRow input[type=range] { flex: 1 1 auto; min-width: 0; height: 44px;
  accent-color: var(--accent); background: none; border: 0; padding: 0;
  cursor: pointer; }
.slideVal { flex: 0 0 58px; text-align: right; font-size: 13px; color: var(--edge); }
#seedIn {
  flex: 1; min-width: 0; padding: 9px 10px; border-radius: 9px;
  font: 600 13px/1 inherit; color: var(--ink);
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
  -webkit-appearance: none; appearance: none;
}
.hint { font-size: 12px; color: var(--dim); margin: 10px 0 0; }
#statsLine { text-align: center; font-size: 12px; color: var(--dim); margin-top: 14px; }

/* ---- play ---- */

#hdr {
  flex: 0 0 auto; display: flex; gap: 6px; align-items: center;
  padding: max(6px, env(safe-area-inset-top)) 8px 6px;
  border-bottom: 1px solid var(--line); background: var(--bg);
}
#hdrTitle {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-weight: 700; font-size: 15px;
}
#hdr .pill { min-width: 44px; min-height: 44px; font-size: 17px; }

#bar {
  display: flex; gap: 6px; align-items: center;
  padding: 6px 8px; border-bottom: 1px solid var(--line); background: var(--bg);
}
#barSpace { flex: 1; min-width: 0; }
#bar .pill { padding: 8px 10px; font-size: 15px; min-height: 44px;}
/* R-C19: a number the player watches change gets tabular figures, or the pill
   beside it slides sideways every time the front doubles. */
#hudFront, #hudBest { font-variant-numeric: tabular-nums; }
#hudFront { font-weight: 800; color: #04233a; background: var(--blobFront);
            border-color: transparent; min-width: 62px; }

/* R181b: the canvas is a centred portrait column, sized in resize(). */
#stage { flex: 1; min-height: 0; position: relative; overflow: hidden;
         display: flex; align-items: stretch; justify-content: center;
         background: var(--void); }
/* NOT inset:0 any more. resize() gives the canvas an explicit width — the
   portrait column of R181b — and `inset: 0` would stretch it straight back
   over the whole stage, so the column would be computed and then ignored. */
#cv { touch-action: none; display: block; align-self: stretch; }

#playHint {
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
  font-size: 12px; color: var(--dim); text-align: center; min-height: 24px;
}

/* ---- cards ---- */

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px; margin: 8px 0; font-size: 14px;
}
.card.win { text-align: center; }
#winStars { font-size: 34px; letter-spacing: 4px; }
#winBody { color: var(--dim); margin-top: 6px; }
#winBest { color: var(--gold); font-weight: 600; margin-top: 8px; min-height: 20px; }
/* A result carries its evidence (#173). */
.evid { text-align: left; font-size: 13px; color: var(--dim); margin-top: 10px; }
.evid .row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.evid .row b { color: var(--ink); }

/* ---- the legend (docs/offline-games-pwa.md R-L1) ---- */
.lgSub { font-weight: 600; font-size: 13px; color: var(--dim); margin: 10px 0 6px; }
.legend { display: flex; flex-direction: column; gap: 8px; }
.lgRow { display: flex; align-items: center; gap: 10px; }
.lgArt { flex: none; width: 40px; height: 20px; display: flex; align-items: center; justify-content: center; font-style: normal; }
.lgArt.lg-blob::after { content: ''; width: 18px; height: 18px; border-radius: 40%; background: var(--m); }
.lgArt.lg-slab::after { content: ''; width: 28px; height: 14px; border-radius: 3px; background: var(--m); }
.lgArt.lg-arch::after { content: ''; width: 26px; height: 16px; border-radius: 8px 8px 0 0; border: 3px solid var(--m); border-bottom: 0; }
.lgArt.lg-thin::after { content: ''; width: 30px; height: 2px; background: var(--m); }
.lgTxt { display: flex; flex-direction: column; min-width: 0; }
.lgTxt b { font-weight: 700; }
.lgTxt small { font-size: 12.5px; color: var(--dim); line-height: 1.35; }

/* ---- toast ---- */
#toast {
  position: fixed; left: 50%; bottom: calc(64px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(12px);
  background: #0b1220; border: 1px solid var(--line); color: var(--ink);
  padding: 10px 14px; border-radius: 10px; font-size: 14px;
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
  z-index: 50; max-width: calc(100vw - 32px); text-align: center;
}
#toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (min-width: 720px) {
  #scr-menu, #scr-how, #scr-win { max-width: 560px; margin: 0 auto; width: 100%; }
}

/* #228: a landscape window under 500px tall must not spend a 44px row on the
   version chip. Unlike Atlas, nothing here needs a side column — the road is
   the whole screen and it simply gets taller. */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 600px) {
  #app { position: relative; }
  #footer { position: absolute; right: 0; bottom: 0;
            padding-bottom: env(safe-area-inset-bottom); }
  /* R-C19: #playHint is a SIBLING of #stage, so hiding it with `display`
     would resize the road the moment the phone turned. It keeps its box and
     just gets tighter. */
  #playHint { padding: 1px 10px 3px; min-height: 16px; font-size: 11px; }
}

/* ---- v5: the mode picker and the shop ----------------------------------- */
#modeRow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 2px; }
#modeRow .tierBtn small { text-transform: none; letter-spacing: 0; }
.shopRow { display: flex; align-items: center; gap: 10px; padding: 8px 0;
           border-top: 1px solid rgba(255,255,255,.08); }
.shopRow:first-child { border-top: 0; }
.shopRow .te { font-size: 26px; line-height: 1; flex: none; }
.shopTxt { flex: 1 1 auto; min-width: 0; }
.shopTxt b { display: block; }
.shopTxt small { display: block; color: #94a3b8; }
/* R153: bought reads "Ready" in words, so the state is never carried by colour
   alone and nobody has to compare two greys. */
.shopRow .btn { flex: none; min-width: 76px; min-height: 44px; }
.shopRow .btn:disabled { opacity: .55; }
#shopGems { float: right; font-size: 15px; }

/* A two-way setting inside the panel. The chosen one is marked by BACKGROUND
   AND WEIGHT, never by hue alone (check-settings, and R-C's readability rule). */
.seg { display: flex; gap: 6px; }
.segBtn { flex: 1 1 0; min-height: 44px; border-radius: 10px; cursor: pointer;
          background: rgba(0,0,0,.24); border: 2px solid rgba(255,255,255,.13);
          color: #e2e8f0; font: inherit; font-size: 14px; font-weight: 700; }
.segBtn.on { background: var(--wallOpen); border-color: #fff; color: #04233a;
             font-weight: 900; }

/* ---- R207: the ladder ---------------------------------------------------
   A level tile carries four things and a child reads three of them without
   knowing what a level is: the number, the name, and how many stars they got.
   The fourth (the age band) is for whoever bought the phone. 44px floor on the
   whole tile, which is the arcade tap floor and not negotiable. */
#ladderList { display: grid; gap: 8px; width: 100%; margin: 4px 0 10px; }
.lvlBtn {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 10px; min-height: 56px; padding: 8px 12px; width: 100%;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--card); color: var(--ink); text-align: left;
  font: inherit; cursor: pointer;
}
.lvlBtn .lvlN {
  display: grid; place-items: center; min-width: 40px; min-height: 40px;
  border-radius: 11px; background: var(--chip); font-weight: 800; font-size: 16px;
}
.lvlBtn b { display: block; font-size: 15px; }
.lvlBtn small { display: block; opacity: .68; font-size: 12px; }
.lvlBtn .lvlStars { font-size: 15px; letter-spacing: 1px; white-space: nowrap; }
.lvlBtn.on { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(56,189,248,.22); }
.lvlBtn[disabled] { opacity: .42; cursor: default; }
.lvlBtn[disabled] .lvlStars { opacity: .5; }