/* The screens. Laid out on a phone-shaped column, 100 units wide, which on a
   phone is the screen and on a desktop is a phone-width strip in the middle. */
:root { --u: min(1vw, 0.46vh); }

.screen {
  position: fixed; inset: 0;
  margin: 0 auto;
  width: calc(100 * var(--u));
  display: flex; flex-direction: column; align-items: stretch;
  padding: calc(env(safe-area-inset-top) + 7 * var(--u)) calc(4.5 * var(--u))
           calc(env(safe-area-inset-bottom) + 6 * var(--u));
}

/* ---- the board screen ---------------------------------------------------- */
.bar { display: flex; align-items: center; gap: calc(2.4 * var(--u)); }
.bar.right { justify-content: flex-end; margin-top: calc(3 * var(--u)); }
.spacer { flex: 1; }
.hairline {
  height: 2px; margin-top: calc(4.6 * var(--u));
  background: #22445E; box-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}
#stage {
  position: relative;
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
}
#game { display: block; touch-action: none; }
.moves-line {
  position: relative; display: flex; justify-content: center;
  margin-bottom: calc(10 * var(--u));
}
.moves-line::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; background: #22445E;
}
.moves { position: relative; min-width: calc(44 * var(--u)); height: calc(7.6 * var(--u));
         font-size: calc(3.3 * var(--u)); }
.moves .n { margin-right: .25em; }
.moves.revealing .n { display: none; }

/* ---- the teach card ------------------------------------------------------- */
#teach {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 15, 26, .72);
  z-index: 2;
}
.teach-card {
  position: relative;
  width: 100%;
  display: flex; align-items: center; gap: calc(3.6 * var(--u));
  background: rgba(30, 58, 85, .92);
  border-radius: calc(2.8 * var(--u));
  padding: calc(6 * var(--u)) calc(9 * var(--u)) calc(6 * var(--u)) calc(4 * var(--u));
}
.teach-card .well {
  flex: none;
  width: calc(11.5 * var(--u)); height: calc(11.5 * var(--u));
  border-radius: calc(2.2 * var(--u));
  background: #16303F;
  box-shadow: inset 0 0 0 2px #2B5571;
  display: flex; align-items: center; justify-content: center;
}
.teach-card .well img { max-width: 82%; max-height: 82%; }
.teach-card p { margin: 0; font-size: calc(4.3 * var(--u)); line-height: 1.4; }
.teach-card.centre { justify-content: center; text-align: center; padding: calc(7 * var(--u)) calc(6 * var(--u)); }
.teach-card.objective p { font-size: calc(5 * var(--u)); }
.teach-card .close {
  position: absolute; top: calc(1.3 * var(--u)); right: calc(1.3 * var(--u));
  width: calc(6.3 * var(--u)); height: calc(6.3 * var(--u));
  border-radius: 50%;
  background: var(--ink); border: 2px solid var(--edge);
}
.teach-card .close::before, .teach-card .close::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 46%; height: 16%; border-radius: 2px; background: var(--snow);
  transform: translate(-50%, -50%) rotate(45deg);
}
.teach-card .close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.teach-card.centre .close { display: none; }

/* ---- the hub --------------------------------------------------------------- */
#hub { justify-content: flex-start; }
.hub-card { margin-top: calc(15 * var(--u)); padding-top: calc(16 * var(--u)); }
/* the ghost flake is clipped to the card, not the card to itself: the heading
   bar hangs above the card's edge and must not be cut */
.hub-card .wash { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.pips { display: grid; grid-template-columns: repeat(10, calc(5.4 * var(--u)));
        gap: calc(1.4 * var(--u)); justify-content: center; }
.pip { height: calc(4.4 * var(--u)); border-radius: calc(1.3 * var(--u));
       background: #2E516F; border: 2px solid var(--ink); }
.pip.on { background: #6AC6E6; }
.frac { margin-top: calc(2.6 * var(--u)); font-size: calc(4.2 * var(--u)); color: var(--dim); }
.lvl-word { font-size: calc(7.8 * var(--u)); letter-spacing: .03em; }
.lvl-num { font-size: calc(23 * var(--u)); line-height: 1; margin-top: calc(1 * var(--u)); }
.end-line { font-size: calc(4.6 * var(--u)); line-height: 1.5; padding: calc(4 * var(--u)) 0; }
.tally { display: flex; align-items: center; justify-content: center; gap: calc(1.6 * var(--u));
         margin-bottom: calc(6 * var(--u)); font-size: calc(4.1 * var(--u)); color: var(--tally); }
.tally img { height: calc(6.6 * var(--u)); }
.hub-card .ghost { position: absolute; right: calc(-20 * var(--u)); top: calc(38 * var(--u));
                   width: calc(55 * var(--u)); opacity: .07; }
.hub-card > :not(.wash) { position: relative; }
.hub-card > .head { position: absolute; }

/* ---- the title beat ----------------------------------------------------- */
#title { padding: 0; align-items: center; justify-content: flex-start; z-index: 30;
         background: radial-gradient(ellipse at 50% 40%, #16405F 0%, var(--ground) 72%); }
#title .wordmark { width: 92%; margin-top: 38%; }
.title-tile { width: calc(28 * var(--u)); height: calc(28 * var(--u)); margin-top: calc(7 * var(--u));
              border-radius: calc(5 * var(--u)); background: var(--card);
              display: flex; align-items: center; justify-content: center; }
.title-tile img { width: 72%; }
#title .strip { position: absolute; bottom: 0; left: 0; width: 100%; }

/* ---- overlays --------------------------------------------------------------- */
.end .card { margin-top: calc(-4 * var(--u)); }
.end .badge-line { font-size: calc(4.3 * var(--u)); display: flex; align-items: center;
                   justify-content: center; gap: calc(1.4 * var(--u)); }
.end .badge-line img { height: 1.1em; }
.end .badge-line.pulse { animation: pulse 1.3s ease-in-out infinite; }
@keyframes pulse { 50% { color: var(--accent); } }
.score { display: flex; align-items: center; }
.score > div { flex: 1; }
.score .big { font-size: calc(13 * var(--u)); line-height: 1; }
.score .lab { font-size: calc(4 * var(--u)); color: var(--dim); margin-top: calc(1 * var(--u)); }
.score .best-lab { font-size: calc(3.5 * var(--u)); color: var(--dim); }
.score .best { font-size: calc(9 * var(--u)); line-height: 1.1; }
.score .vrule { flex: none; width: 2px; align-self: stretch; background: #14293B; margin: 0 calc(2 * var(--u)); }
.sum .big { font-size: calc(8 * var(--u)); }
.sum .lab { font-size: calc(3.6 * var(--u)); color: var(--accent); margin-top: calc(1 * var(--u)); }
.btn.ring { outline: calc(1 * var(--u)) solid #FFD45A; outline-offset: calc(0.6 * var(--u));
            animation: ring 2s ease-in-out infinite; }
@keyframes ring { 50% { outline-color: rgba(255, 212, 90, .25); transform: scale(1.05); } }
.nudge { position: fixed; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 8 * var(--u));
         text-align: center; font-size: calc(3 * var(--u)); color: rgba(232, 244, 251, .45); }
.scrim.looking > * { opacity: 0; transition: opacity .11s; }
.scrim.looking { background: transparent; }

.pause-glyph { height: calc(16 * var(--u)); margin: calc(1 * var(--u)) 0 calc(4 * var(--u)); }

/* settings */
.sheet .card { padding-top: calc(15 * var(--u)); }
.srow { display: flex; align-items: center; gap: calc(3.6 * var(--u));
        height: calc(13.3 * var(--u)); padding: 0 calc(4 * var(--u));
        background: var(--row); border-radius: calc(4 * var(--u));
        font-size: calc(4.3 * var(--u)); margin-bottom: calc(3.3 * var(--u)); width: 100%; text-align: left; }
.srow img.icon { height: calc(6.9 * var(--u)); width: calc(7.5 * var(--u)); object-fit: contain; }
.srow .lab { flex: 1; }
.group { background: var(--row); border-radius: calc(4 * var(--u)); margin-bottom: calc(3.3 * var(--u)); }
.group .srow { margin: 0; background: none; }
.group .srow + .srow { border-top: 2px solid #14293B; }
.switch { width: calc(19 * var(--u)); height: calc(7 * var(--u)); border-radius: calc(2 * var(--u));
          background: var(--accent); border: 2px solid var(--ink); position: relative;
          font-size: calc(3.1 * var(--u)); color: #08222F; display: flex; align-items: center;
          padding: 0 calc(2.4 * var(--u)); }
.switch::after { content: ""; position: absolute; top: 12%; bottom: 12%; aspect-ratio: 1;
                 border-radius: 50%; background: var(--snow); border: 2px solid var(--ink); right: 6%; }
.switch.off { background: #2E516F; color: var(--dim); justify-content: flex-end; }
.switch.off::after { right: auto; left: 6%; }
.chev { width: calc(3.2 * var(--u)); height: calc(3.2 * var(--u)); border-right: 3px solid var(--edge);
        border-bottom: 3px solid var(--edge); transform: rotate(-45deg); margin-right: calc(1 * var(--u)); }
.build { margin-top: calc(4 * var(--u)); font-size: calc(3 * var(--u)); color: var(--dim); }

/* how to play */
.howto { position: fixed; inset: 0; z-index: 25; background: var(--ground);
         display: flex; flex-direction: column; margin: 0 auto; width: calc(100 * var(--u)); }
.howto h1 { margin: calc(env(safe-area-inset-top) + 8 * var(--u)) 0 calc(4 * var(--u));
            text-align: center; font-size: calc(6 * var(--u)); letter-spacing: .35em; }
.howto .scroll { flex: 1; overflow-y: auto; padding: 0 calc(6 * var(--u)) calc(4 * var(--u));
                 touch-action: pan-y; -webkit-user-select: text; user-select: text; }
.howto h2 { font-size: calc(5 * var(--u)); color: var(--accent); margin: calc(6 * var(--u)) 0 calc(2 * var(--u)); }
.howto .entry { display: flex; gap: calc(3 * var(--u)); margin: calc(3 * var(--u)) 0; }
.howto .entry img { width: calc(11 * var(--u)); height: calc(11 * var(--u)); object-fit: contain; flex: none; }
.howto .lead { font-size: calc(4.2 * var(--u)); }
.howto .body { font-size: calc(3.8 * var(--u)); color: var(--dim); line-height: 1.4; font-weight: 400; margin-top: calc(1 * var(--u)); }
.howto .done-wrap { padding: calc(3 * var(--u)) calc(6 * var(--u)) calc(env(safe-area-inset-bottom) + 5 * var(--u)); }

/* A primary sharing its row is half width: the app sets its word smaller there
   (TRY AGAIN beside REVEAL), and nothing on a button ever wraps. */
.btn { white-space: nowrap; }
.row > .btn.primary:not(:only-child) { font-size: calc(3.9 * var(--u)); }

/* the switch word is small, on a light track: no ink ring (it smudged) */
.switch { text-shadow: none; }

/* ---- ironing, 2026-10-27 (the user's iron.txt) ----------------------------- */
/* the board and its count sit high; the space left over goes below them */
#stage { margin-top: calc(4 * var(--u)); }
.moves-line { margin-top: calc(1 * var(--u)); margin-bottom: 0; }
#board-screen::after { content: ""; flex: 1; }
/* the teach card is solid, not see-through */
.teach-card { --r: calc(2.8 * var(--u)); background: var(--row); }
/* the hub's pips are square */
.pips { grid-template-columns: repeat(10, calc(5.6 * var(--u))); }
.pip { height: auto; aspect-ratio: 1; }
/* settings rows wear the two-line rim */
.srow, .group { --r: calc(4 * var(--u)); }
.group .srow { border: 0; }
.group .srow::after { display: none; }
/* the settings sheet sits high, covering more of what is under it */
.scrim.top { align-items: flex-start; padding-top: calc(env(safe-area-inset-top) + 24 * var(--u)); }
/* while measuring, the stage must take nearly all the room, not share it with
   the filler below */
#stage { flex: 1000 1 0; }
/* half-width words a little smaller still: TRY AGAIN beside its arrow touched the edge */
.row > .btn:not(:only-child) { font-size: calc(3.9 * var(--u)); gap: calc(1.4 * var(--u)); }
.row > .btn:not(:only-child) img { height: 1.4em; }

/* ---- second ironing, from the user's ss2a/ss2c side by side ----------------- */
/* closer to the screen's edges, as the app: the board gains most from it */
.screen { padding-left: calc(2.2 * var(--u)); padding-right: calc(2.2 * var(--u)); }
/* ROUNDER corners on the controls: the web's read squarer than the app's
   (the user, comparing ss2a with ss2c) */
.pill, .chip { --r: calc(3.2 * var(--u)); }
.tile { --r: calc(3 * var(--u)); }
.btn { --r: calc(4.6 * var(--u)); }
/* the board a little lower, the count a clear gap under it, and bigger */
#stage { margin-top: calc(7 * var(--u)); }
.moves-line { margin-top: calc(5 * var(--u)); }
.moves { height: calc(9.6 * var(--u)); font-size: calc(4.2 * var(--u)); min-width: calc(54 * var(--u)); }

/* ---- the title beat, to the app's own measures (TitleScreen.cs) ------------ */
/* The ice strip is 1.45 screens wide, anchored to the foot and cropped at both
   sides, so it reads as ground you stand on rather than a border. The lockup
   (wordmark .86 of the width, the flake tile .34 of the wordmark, a gap of
   .055 of it) is centred in the room ABOVE the strip. */
#title { justify-content: flex-end; overflow: hidden; }
#title .lockup {
  position: relative; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
#title .wordmark { width: calc(86 * var(--u)); margin: 0; position: relative; }
#title .halo { position: absolute; width: calc(132 * var(--u)); left: 50%; top: 50%;
               transform: translate(-50%, -62%); pointer-events: none; }
#title .title-tile { --r: calc(5.5 * var(--u)); --edge-w: calc(1 * var(--u));
                     width: calc(29.2 * var(--u)); height: calc(29.2 * var(--u));
                     margin-top: calc(4.7 * var(--u)); }
#title .strip { position: relative; left: 50%; transform: translateX(-50%);
                width: calc(145 * var(--u)); max-width: none; flex: none; bottom: auto; }
/* the strip is centred by the column itself; offsetting it again shifted it left */
#title .strip { left: auto; transform: none; }
/* the flake tile's inner line is the bright accent, as on the app */
#title .title-tile { --key: var(--accent); --key-w: calc(0.55 * var(--u)); }

/* THE TEACH VEIL COVERS THE WHOLE SCREEN, not the board's box: a box-sized veil
   showed as a dark square round the board (the user, 2026-10-27). The top
   controls stay above it, bright and live, as on the app. */
#teach { position: fixed; inset: 0; z-index: 4; }
#board-screen .bar { position: relative; z-index: 5; }
#teach { padding: 0 calc(2.2 * var(--u)); }

/* THE TITLE COVERS THE WHOLE SCREEN, not the phone-shaped column the other
   screens use: in a browser with its address bar showing, that column is a
   little narrower than the screen and the board showed at both sides (the
   user, 2026-10-27). The strip covers at least the full width, as the app's
   does ("measured against the screen, not the capped content frame"). */
#title { width: 100vw; left: 0; right: 0; margin: 0; }
#title .strip { width: max(calc(145 * var(--u)), 100vw); }

/* ---- third ironing: settings (the user's ss3a/ss3b) --------------------------
   THE UNIT WAS SHRINKING EVERYTHING in a browser with its address bar showing:
   .46 of the height is a full phone's ratio, and the bar takes height away, so
   on the A34 every screen came out about 13% small. .56 lets a phone's width
   rule, while a desktop window still gets a phone-shaped column. */
:root { --u: min(1vw, 0.56vh); }
/* cards are the app's .846 of the width (SettingsSheet.CW) */
.scrim { padding: 0; }
.card { width: calc(84.6 * var(--u)); max-width: none; }
/* the light inner line sits closer to the card's edge */
.card { --key-gap: calc(0.9 * var(--u)); }
/* the heading tab: wider and taller */
.card > .head { min-width: 76%; padding: calc(3.2 * var(--u)) calc(6 * var(--u)); }
/* the switch's knob: a fine dark edge, not a heavy one */
.switch { border-width: 1px; }
.switch::after { border-width: 1px; }
/* the rows: more room round the words */
.srow { height: calc(14.4 * var(--u)); padding: 0 calc(5 * var(--u)); gap: calc(4.4 * var(--u)); }
.group .srow { position: relative; }
/* the hairline between Sound and Vibration, inset from the ends */
.group .srow + .srow::before {
  content: ""; position: absolute; left: 5.5%; right: 5.5%; top: -1px; height: 2px;
  background: #14293B; box-shadow: 0 1px 0 #3A6585;
}
/* DONE sits lower, with the build line in the space under it */
.sheet .row { margin-top: calc(7 * var(--u)); }
.sheet .build { margin-top: calc(5 * var(--u)); margin-bottom: calc(1 * var(--u)); }
/* the OLD divider was a border-top on a rounded row, so it bent down at both
   ends (the user saw it); only the straight inset line above remains */
.group .srow + .srow { border-top: 0; }
.group .srow { border-radius: 0; }

/* How to play's section headings: capitals in the accent, a chevron at the
   right, RIGHT when shut and DOWN when open; the whole row is the target */
.howto .sec { display: flex; align-items: center; width: 100%; text-align: left;
              padding: calc(4 * var(--u)) 0 calc(2.6 * var(--u)); color: var(--accent);
              font-size: calc(4.4 * var(--u)); border-bottom: 1px solid #1C3A52; }
.howto .sec span:first-child { flex: 1; }
.howto .sec .chev { transform: rotate(-45deg); transition: transform .15s; }
.howto .sec.open .chev { transform: rotate(45deg); }
.howto .sec.open { border-bottom: 0; }

/* THE CLOCK PILL HOLDS ITS WIDTH: equal-width digits and room for the widest
   time, so the pill does not breathe as the seconds change (the user saw it). */
#clock .t { font-variant-numeric: tabular-nums; display: inline-block; min-width: 2.7em; text-align: left; }
/* a full-width primary with a mark: smaller words, as the app sets TRY AGAIN */
.btn.primary.marked { font-size: calc(5.6 * var(--u)); }

/* a little narrower all round, so the board's shadow stays clear of the
   screen's edges (the user, 2026-10-27) */
.screen { padding-left: calc(4 * var(--u)); padding-right: calc(4 * var(--u)); }
/* a card narrower than its column is centred in it (the hub card sat left) */
.card { margin-left: auto; margin-right: auto; }
.hub-card { align-self: center; }

/* the title shows itself only when its pictures are ready (shell.js) */
#title.waiting > * { visibility: hidden; }

/* THE MOVES PILL HOLDS ITS WIDTH, like the clock: equal-width digits in a
   fixed field, and the S of MOVES keeps its space at 1 MOVE (shell.js). */
.moves .n { font-variant-numeric: tabular-nums; display: inline-block; min-width: 1.9em; text-align: right; }
.moves .s1 { visibility: hidden; }

/* WORD SPACING ON OUTLINED TYPE: the font's space is narrow and the ink ring
   eats into it from both sides, so "1 CLEARED IN PAR" read as joined (the
   user). A touch more everywhere, more on the tally line. */
.ink { word-spacing: 0.08em; }
.tally span { word-spacing: 0.16em; }