/* =====================================================================
הח״כ ה-121 — prototype, s1 round.
Sits ON TOP of ../prototype/hachach.css. Everything here is either
(a) screen-specific layout the handoff stylesheet deliberately does
not carry, (b) one of the two motion tokens the brief supersedes, or
(c) a documented workaround for a defect in the handoff file.
No colour is declared here that is not already a token.
===================================================================== */
@font-face{
font-family:'SimplerPro';
src:url('fonts/SimplerPro_HLAR-Black.woff2') format('woff2');
font-weight:900; font-style:normal; font-display:block;
}
/* 13b · THE REGULAR IS DECLARED AND LOADED, AND NOTHING IS WIRED TO IT YET.
Until now the family shipped one face, so every `font-weight` under 900
that named SimplerPro was answered by the Black — there was no lighter
face to pick. There is now, at 400.
THIS IS INERT ON EVERY EXISTING SCREEN, and that is checked rather than
assumed: every rule in this file and in hachach.css that reads
--font-display sets font-weight:900 in the same declaration, so nothing
currently resolves to the new face. Body copy is untouched for a
different reason — --font-ui does not name SimplerPro at all, it is
system-ui — which is the finding item 13 reports.
font-display:swap, not the Black's `block`: the Black carries the title
and a swap there would flash a system face through the display type,
but nothing is set in this face yet, so swap costs nothing and is the
safer default for the body copy it exists to become. */
@font-face{
font-family:'SimplerPro';
src:url('fonts/SimplerPro_HLAR-Regular.woff2') format('woff2');
font-weight:400; font-style:normal; font-display:swap;
}
/* ---------------------------------------------------------------------
THE TWO OVERRIDDEN TOKENS, and why.
hachach.css ships --t-flip:260ms and --t-finale:620ms. Both are below
the figures the brief calls MEASURED: the flip wants 300-500ms (the
Doherty band, sheet §1.4) and the finale wants ~850ms (Balatro weight,
sheet §8b [M]). Overridden here, in one place, so the handoff file
stays the handoff file.
--------------------------------------------------------------------- */
:root{
/* ---- 21 · THE BODY TOKEN, AND WHY IT IS NOT --font-ui ---------------
--font-ui is not a body-prose token. hachach.css defines it once and
this file's very first rule is `body{ font-family:var(--font-ui) }`,
so it is the app's DEFAULT face — on the intro alone 25 of 35 painted
elements resolve through it, and its other readers are a text input
(.prof-field), a chip (.gchip), a sticker label (.bopt-lbl) and the
share card. Repointing it at SimplerPro would have re-set the whole
app, so item 21's second branch applies: a separate token, wired to
the named elements only.
The system stack is kept behind SimplerPro exactly as it was, so a
failed font load degrades to today's rendering rather than to serif. */
--font-body: 'SimplerPro', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
/* ---- 22 · THE BODY INK, LIFTED OFF --ink-faint ----------------------
#BEB9AC measured 4.41 against the lightest dot of the grid (#4D4C48),
under the 4.5 AA floor for body text. This is +3 per channel — the
smallest lift that clears it with a margin rather than by 0.007.
It is a NEW token rather than a change to --ink-faint, because
--ink-faint has seven readers and three of them (.b5-a2 .b5count,
.b5link.is-missing, .eg-stat__sub) are not in item 21's set —
.eg-stat__sub sits on a card, where the ground is not the dot grid
and the ratio was never in question. */
--ink-body: #C1BCAF;
--t-flip: 380ms; /* was 260ms — mid of the measured 300-500 band */
--t-finale: 850ms; /* was 620ms — the round's one held beat */
/* ---- DERIVED. Baselines from the brief, tuned by hand on device. --- */
/* §1.2 THE ANSWER-FIRST HOLD. The brief's derived baseline was
250-300ms. On device that reads as latency, not as a held beat: the
player's choice does not get time to sit alone before the truth
arrives. --t-hold-long is the tuned figure; the switch in the spike
bar plays both. The FLIP is untouched at 380ms — lengthening the
hold does not touch the cascade-vs-finale contrast, because the hold
is the pause BEFORE the verdict, not the verdict's own duration. */
--t-hold-short: 275ms; /* the brief's derived baseline */
--t-hold-long: 640ms; /* tuned: the choice reads as HELD */
--t-hold: var(--t-hold-long);
--t-draw: 225ms; /* pile -> front, ease-out, deck not slide */
--t-exit: 180ms; /* the spent card leaving */
--t-ov-in: 260ms; /* beat-2 overlay, blur ramps with it */
--t-ov-collapse: 220ms; /* beat-3 dismiss, INTO the card beneath */
--t-snapback: 160ms; /* release below the drag threshold */
--t-resolve: 450ms; /* the pinned claim resolving. A moment. */
--t-coin: 400ms; /* one coin award counting up */
/* §D THE OVERLAY CONTENT SWAP. This token went missing last pass — the
edit that was meant to add it silently matched nothing — so the
shorthand `transition:transform var(--t-ov-swap) var(--e-settle)`
resolved with NO duration, which makes the whole declaration invalid
and leaves transition-duration at its 0s initial value. T.ovSwap read
the same empty token and became 0ms, so the JS wait was zero too.
Both halves were instant and the class toggle I checked looked fine. */
--t-ov-swap: 360ms;
/* §4 the chosen vote landing on the chair. Long enough to read as an
object arriving and settling, short enough that the hold after it is
still the beat's pause rather than a wait. */
/* B2-4 · THE SLAP IS ITS OWN BEAT. --t-ask-delay is measured from the
moment the card is in place, and it is the number the brief asked to
be tuned. The card turn is --t-card-flip 450ms on --e-settle, which
is asymptotic: the card is visually stopped at about 390ms and the
last 60ms is sub-pixel. 480ms puts the slap ~90ms after the eye has
read the card as arrived — clearly a second event, still inside the
window where the eye is on that corner. It is at the low end of the
brief's 400-600ms band on purpose: at 600 the pause reads as a
hesitation rather than as a beat, and the cascade's per-card tempo is
~850ms end to end. (Lion's 5ms is a third of a frame at 60Hz — the
slap and the card would arrive on the same paint.) */
--t-ask-delay: 480ms;
--t-ask-in: 300ms;
--t-b2-seat: 520ms;
/* §1 · THE LOADING BEAT, and the whole thing is budgeted to land under
2.5s door to door: 260 fade + 200 bar-in + 1600 fill + 180 hold =
2240ms from the tap to the destination. The chair's travel runs
inside the fade rather than after it — the screen empties and the
object grows as one movement, not two. */
--t-load-fade: 260ms;
--t-load-rise: 520ms;
--t-load-barin: 200ms;
--t-load-fill: 1600ms;
--t-load-hold: 180ms;
/* §1b · THE LOADING SCREEN'S EXIT. The chair rushes the camera and the
destination is already underneath when it dissolves.
0 -> 150 the bar fades
150 -> 350 the chair holds alone
350 -> 700 the chair launches, 1x -> 10x, ease-IN
525 -> 700 ... its second half, over which it fades to nothing
350 -> 530 the destination fades up from scale 1.04
700ms bar-full to settled. Runs once per load.
THE FADE STARTS AT THE HALFWAY POINT AND ENDS WITH THE SCALE, and
that is the correction. At 60% the chair had already filled the
viewport at full opacity and sat there ~35ms before anything
happened to it: a flat opaque frame, then a dissolve, which reads
as two events rather than one. The cover and the fade now begin on
the same frame — 50% of an ease-in zoom is where the chair passes
full-screen — so there is never a moment of solid chair holding
still. 350ms rather than 420 for the same reason: the halves have
to feel like one gesture.
The destination's fade drops to 180ms so it is fully up long before
the chair goes translucent. That ordering is the assertion now. */
--t-lx-bar: 150ms;
--t-lx-hold: 200ms;
--t-lx-zoom: 350ms;
--t-lx-fade-at: 175ms; /* 50% of the zoom */
--t-lx-fade: 175ms; /* and it ends when the zoom does */
--t-lx-dest: 180ms;
/* §S-1 · THE FINALE'S CHRONOLOGY. The whole beat is these eight
numbers, and the order they compose is the design:
r1 0.0 count -> 2.4 settled -> 2.8 flight -> 3.5 landed
-> 3.9 coins -> 4.7 reading + buttons
e3 0.0 outcome -> 1.2 flight -> 1.9 landed -> 2.3 coins
-> 3.1 reading + buttons
--t-f5-flare is INSIDE --t-f5-count, not added to it: the count
stops dead for 400ms on the frame 61 is crossed and the run is
shortened to match, so the settle still lands at 2.4s. */
--t-f5-count: 2400ms;
--t-f5-flare: 400ms;
--t-f5-prose: 800ms; /* the twin's peak, before the flight */
--t-f5-gap: 400ms; /* between two beats of the sequence */
--t-f5-flight: 700ms;
--t-f5-coin-hold: 500ms; /* the sticker alone before it flies */
--t-f5-coin-out: 300ms;
--t-f5-in: 300ms; /* a block arriving */
--t-f5-bnr-out: 250ms; /* the emptied banner leaving */
--t-f5-recentre: 400ms; /* the settled stack's one move */
/* ITEM 8 · THE BOARD'S MOVE IS ITS OWN NUMBER NOW. It used to be the
stack's re-centre at 400ms, fired after the panels had already
landed; the board is the object that moves and the panels follow it,
so the duration is named for the board and --t-f5-recentre is left
describing nothing else that runs. */
--t-f5-board: 320ms; /* the board rises to its final position */
--t-f5-panel: 80ms; /* one step of the panels' stagger */
/* ITEM 11 · the 121st vote, in the order it happens. */
--t-f5-hold: 500ms; /* a · the record, alone and readable */
--t-f5-tick-at: 120ms; /* c · after the token has settled */
--t-f5-tick: 220ms; /* d · the +1, the colour and the bar */
/* §T · THE TACHLES -> CASCADE TRANSITION. One continuous move made of
six overlapping steps; the offsets are when each STARTS, measured
from the tap, and the durations are how long each takes. They
overlap on purpose — the pair assembles while the letters are still
travelling — so the whole thing reads as one gesture and not as six.
0 -> 340 letters leave the button
180 -> 480 the avatar joins them
480 -> 740 the callout resolves into the banner
740 -> 1120 the banner travels to its pin <- the one to follow
900 -> 1300 the next screen enters behind
1300 the tap affordance appears
Total 1720ms. */
--t-tc-letters: 340ms;
--t-tc-av-at: 180ms;
--t-tc-av: 300ms;
--t-tc-resolve-at: 480ms;
--t-tc-resolve: 260ms;
--t-tc-travel-at: 740ms;
--t-tc-travel: 380ms;
--t-tc-next-at: 900ms;
--t-tc-next: 400ms;
--t-tc-tap-at: 1300ms;
--t-tc-end: 1720ms;
/* A6 · how long the claim's stamp holds alone before the explanation
arrives under it. Long enough to read one word and register the
colour, short enough that it is a beat and not a wait. */
--t-claim-hold: 700ms;
/* §1.1 step 2 · THE BEAT BETWEEN COMMIT AND STAMP. The answer is
registered and nothing moves. It is the pause that lets the commit
land as its own event before the verdict arrives on top of it — with
no gap the stamp reads as part of the tap. */
--t-claim-beat: 400ms;
/* ITEM 2 · the claim's reflow at the answer, played rather than snapped.
260ms sits inside --t-claim-beat's 400ms hold, so the move has landed
before claimReveal() measures the claim's box for the panel cap. */
--t-claim-lift: 260ms;
/* §6c · the seat fill. 2.15s of travel plus a 340ms stop on the seat
that crosses 61 — about 2.5s end to end, at the top of the brief's
1.8-2.5s window because the majority beat is time the eye spends on
one square rather than on the fill. */
--t-seat-fill: 2150ms;
--t-seat-cross: 340ms;
/* §0 · the two gaps that separate the reveal's three movements. Unequal
on purpose: an even rhythm reads as a loading sequence, an uneven one
reads as staging. */
/* ITEM 47B · 120 -> 140ms. The stamp lands ALONE and is held before the
verdict arrives: the stamp is the Knesset's answer, the pill is
whether the player called it, and the gap is what makes it cause then
consequence rather than one compound arrival. */
--t-mark-gap: 140ms;
--t-panel-gap: 160ms;
/* A-1 · THE PEEL. Three phases, all CSS.
--t-peel the sheet lifting and curling off the party line. 620ms
is slow enough to read as a physical action and short
enough that a player peeling five cards in a cascade is
not waiting on it; the ease starts fast and settles,
which is how a stuck edge releases.
--t-peel-out the discard. Shorter than the peel and on an
ACCELERATING curve — the peel is something the player
does, the fall is something gravity does.
--t-peel-land the party line's settle, run against the discard so the
beat belongs to the reveal rather than to the exit. */
--t-peel: 620ms;
--t-peel-out: 460ms;
--t-peel-land: 240ms;
/* the first curve was cubic-bezier(.32,.72,.36,1) and it was wrong for
this: front-loaded, so 27% of the duration had already peeled ~70% of
the sheet and the lift read as a snap. A peel unsticks slowly, runs
steady, then releases — slow in, slow out, nearly linear between. */
--e-peel: cubic-bezier(.55,.08,.35,1);
--e-fall: cubic-bezier(.42,0,.86,.62);
/* §A the deck. A card is turned over, never swapped: --t-card-flip is
the turn, --t-card-exit the resolved card being swiped off. */
--t-card-flip: 450ms;
--t-card-exit: 320ms;
/* ITEM 7 · CONTACT ON AN MK CARD. hachach.css's --t-stamp-drop (190ms)
still describes the CLAIM stamp's fall, which this item does not
touch; the cascade's fall is now 200ms and everything keyed to the
moment of contact — the jolt, the 25ms buzz, the ink rupture — reads
this instead. The code's own rule is that the buzz and the hit are
one event or neither, so they cannot be allowed to drift apart. */
--t-stamp-drop-mk: 200ms;
/* ITEM 47 · THE LANDING IS ONE MOTION AND ONE DURATION. Both stamps —
the claim's at 156px and the MK card's at 190px — run the same
keyframes for the same 360ms. Only the box differs. */
--t-stamp-land: 360ms;
/* §F the strip, played rather than stated: lock -> hold -> the MK's
token appears in the PLAYER'S slot -> the fill travels to the truth,
distance-proportional on one easing -> the stamp lands after it. */
--t-gx-lock: 200ms;
--t-gx-hold: 350ms;
--t-gx-appear: 140ms;
--t-gx-travel-1: 420ms; /* one slot of disagreement */
--t-gx-travel-2: 650ms; /* two — felt as bigger, not just longer */
--t-gx-settle: 220ms; /* agreement: nowhere to travel */
--t-gx-stamp-lag: 80ms;
--e-in: cubic-bezier(.55,.06,.9,.5); /* leaving, not arriving */
--e-out: cubic-bezier(.16,.84,.44,1);
--gate-hint: 4000ms; /* §1.6 idle -> instruction line appears */
--gate-grow: 8000ms; /* §1.6 idle -> it grows. NEVER an error. */
--card-scale: 1; /* set from JS so a 620px card fits a short
phone without ever introducing a scroll */
/* the guess-vs-reality strip, inside the card at its foot. 88px before
the caption row came out. */
--gx-h: 71px;
--gx-bottom: 8px; /* the strip's inset off the card's foot */
/* ---- the map ----------------------------------------------------
The disc and its extrusion are the v16 board's own numbers, off the
NODE and PathMap artboards. THE RING IS NOT, any more, and this is the
one measurement in the file that departs from the board — see the
block by .node-ico for the arithmetic that forced it. */
/* EVERY RENDERED PART IS 15% LARGER THAN THE BOARD'S. The previous attempt
grew --node-box 116 -> 132 and left the disc at 76 and the depth at 7, so
the bounding box moved and the node did not. These are the parts that
actually draw, and all of them moved together:
disc 76 -> 87px depth 7 -> 8px
ring radius 63 -> 59.5px ring stroke 6 -> 10px (see 1.3)
icon average 44 -> 51px badges 21 -> 24px
label 14 -> 16px status 11 -> 13px
The ring radius went DOWN while everything else went up, and that is
1.4 rather than a contradiction: the cream tile and the 14px overhang
are gone, so the clearance that forced r=63 is gone with them. The ring
is back to hugging the face+base composite by the board's own margin,
scaled 15% like everything else — 6px of clearance becomes 7px. */
--node-box: 130px; /* .ringnode, the whole node incl. the ring */
--node-box-h: 130px;
--node-face: 87px; /* the pressable top face — board 76 x 1.15 */
--node-depth: 8px; /* its extrusion. 9.2% of the face — the
brief's "~10% of diameter". Board. */
--node-face-x: 21.5px; /* (130 - 87) / 2 */
--node-face-y: 17.5px; /* centres face+base on the ring at cy 65 */
/* THE RING. Inner edge = the composite's half-height (87+8)/2 = 47.5,
plus the board's 6px clearance scaled to 7 = 54.5. Half the stroke on
top of that is the centreline: 54.5 + 5 = 59.5. */
--ring-r: 59.5px;
/* §1.3 A DELIBERATE HEAVY ARC, not a hairline. 6px was 7.9% of the
board's disc; 15% of it would be 6.9px and would read exactly as thin
as before against a 15% larger node. 10px is 11.5% of the 87px disc
and is the weight the segments need to hold a 360px screen. It is also
what makes the ring read as a track with part of it filled rather than
as two arcs near a disc. */
--ring-w: 10px;
/* the icon's larger dimension, AVERAGED over the eight. Each one is
this times its own manifest node_scale, so retuning the set is one
number here — see the node_mass note in tools/make_manifest.py.
51/87 = 58.6% of the disc, the same proportion 44/76 was. */
--node-ico-avg: 51px;
--node-gap: 199px; /* centre to centre, up the path */
/* §1.5 THESE TWO PADS ARE THE BLEED. The ribbon is drawn the full height
of the path now, not from the first node to the last, so what used to
be empty charcoal above the top node and below the bottom one is where
the road runs off the screen. --node-pad-top is 110 rather than 84 so
that 45px of ribbon shows clear of the top node's ring before the
edge; the bottom already had 132. */
--node-pad-top: 110px;
--node-pad-bot: 132px; /* the name and status under the last node */
/* ---- motion the map and the award add ----------------------------- */
--t-node-press: 80ms; /* board: transform+box-shadow, linear */
--t-screen: 300ms; /* map -> round. Under the brief's 350ms cap. */
--t-coin-fly: 450ms; /* one token, spawn to chip */
--t-coin-stagger: 40ms; /* between tokens */
/* ITEM 14 · the ALLOCATION's flight, which is a different trip from the
award's above: a short hop from the balance line to a topic row
rather than a long haul to the HUD chip, so it gets its own four
numbers rather than being folded into those two. */
--t-eg-fly: 420ms; /* one token, balance line to topic row */
--t-eg-fly-step: 25ms; /* between tokens */
--t-eg-fly-fade: 100ms; /* ... of which this is the fade, at the end */
--t-eg-pulse: 200ms; /* the balance's own acknowledgement */
--t-map-in: 260ms; /* the map settling under the round leaving */
}
:root[data-hold="short"]{ --t-hold: var(--t-hold-short); }
*{ box-sizing:border-box; }
/* =====================================================================
THE STAGE IS FIXED. NO SCROLL, EITHER AXIS, ON ANY BEAT.
The app is a fixed stage, not a document. html and body are pinned to
the visual viewport and cannot scroll, rubber-band or overscroll; the
stage is sized in DYNAMIC viewport units so it follows Safari's chrome
collapsing instead of assuming a height. Exactly two surfaces in the
whole app may scroll — the path map and character personalisation —
and they opt in with .scrolls, which is also the only place
touch-action is handed back.
===================================================================== */
html, body{
margin:0; padding:0;
position:fixed; inset:0;
width:100%; height:100%;
overflow:hidden;
overscroll-behavior:none;
touch-action:none; /* the body never pans. .scrolls opts back in. */
-webkit-text-size-adjust:100%;
}
body{
background:#6E6C68; color:var(--ink);
font-family:var(--font-ui); font-variant-numeric:tabular-nums;
-webkit-font-smoothing:antialiased;
display:flex; justify-content:center;
}
/* the only two surfaces that may ever scroll */
.scrolls{ overflow-y:auto; touch-action:pan-y; overscroll-behavior:contain;
-webkit-overflow-scrolling:touch; }
.defs{ position:absolute; width:0; height:0; }
.stage{
position:relative; width:100%; max-width:390px;
/* --vh is set from window.innerHeight for Safari versions without dvh;
dvh wins wherever it exists. Either way the stage IS the viewport. */
height:calc(var(--vh, 1vh) * 100);
overflow:hidden; isolation:isolate;
display:flex; flex-direction:column;
padding:calc(10px + env(safe-area-inset-top))
calc(16px + env(safe-area-inset-right))
calc(12px + env(safe-area-inset-bottom))
calc(16px + env(safe-area-inset-left));
background:#403E3A;
box-shadow:0 3px 20px rgba(0,0,0,.4);
}
/* §3.2 · THE MAP GETS A GROUND OF ITS OWN, warm and energetic. It is on
.stage rather than on .sc-map so it covers the whole viewport including
the strips under the HUD and below the jump button — see §5.3. The
round and the intro are untouched: only [data-screen="map"] matches.
THE DOT GRID CARRIES OVER IT. .stage::before is inset:0 above this and
is not touched, so the same 4px/7px two-layer grid the round stands on
runs across the gradient — which is what keeps the two screens the same
product. Its dark layer does most of the work on a light ground. */
.stage[data-screen="map"]{
background:
radial-gradient(120% 80% at 50% 108%, #F2B33C 0%, #E4732B 38%, #C4402E 70%, #8E2A2E 100%),
#C4402E;
}
@supports (height: 100dvh){ .stage{ height:100dvh; } }
/* §5.3, SECOND CAUSE. max-width:390px is a DESKTOP PREVIEW FRAME — it
keeps the prototype phone-shaped in a browser window — but it applies on
real phones too, so a 430px device ran the app at 390 with 20px of body
grey down each side. That is the same "does not fill the viewport"
symptom on the other axis, and it affects every screen, not just the
map. On anything phone-sized the cap comes off; above 480px the frame
stays, because there it is doing the job it was written for. */
@media (max-width: 480px){
.stage{ max-width:none; }
}
.stage::before{
content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
background-image:
radial-gradient(rgba(255,255,255,.07) .5px,transparent .6px),
radial-gradient(rgba(0,0,0,.34) .5px,transparent .6px);
background-size:4px 4px,7px 7px; background-position:0 0,2px 3px;
}
/* =====================================================================
HUD. Coins left, avatar right. Sits ABOVE the beat-2 overlay so the
coin count stays readable while the round is blurred out.
===================================================================== */
.hud{
position:relative; z-index:12; flex:none;
display:flex; align-items:center; gap:var(--sp-2);
/* §3c the chyron sits 12px under the HUD, not 32. 8px of HUD padding
plus a 22px helper box was making that gap the widest space on the
screen. The helper still reserves its box on every beat — the card
cannot change size — it is just the size of its own line now. */
padding-bottom:0;
}
/* §B the topic title. flex:1 so it centres between the chip and the
avatar whatever their widths, and truncates rather than wrapping the
HUD onto a second line. */
/* ITEM 28 · VARIANT C, ported from explorations/v22/hud-title.html.
The round's title stops being bare 15px ink on the dot grid and becomes
a white pill with a leading art slot.
GEOMETRY COMES FROM THE COIN PILL AS IT MEASURES IN THIS FILE, not from
the board's --pill-h:35px. The board redefines .h-a for its own page;
here .h-a is 36px tall (5px + a 17px line box + 6px), radius 999px —
see the §3 note below, this file already matches the shipped app's coin
chip — with a 2px keyline at .55 and a 3px extrusion. All four are
restated here rather than inherited, because .h-a's height is a
CONSEQUENCE of 17px type and this pill carries 15px type: matching by
padding would have made it shorter, and the brief forbids resizing the
title. So the height is explicit and the other three are copied.
flex:0 1 auto, not flex:1 — the pill hugs its content and shrinks only
when .hud-mid runs out of room, so a short title gets a short pill
instead of a full-width bar with the text floating in the middle. */
.hud-topic{
flex:0 1 auto; min-width:0; max-width:100%;
display:inline-flex; align-items:center; gap:8px;
height:36px;
padding-inline:7px 13px;
border-radius:999px;
background:var(--paper); color:var(--ink);
font-family:var(--font-display); font-weight:900; font-size:15px; line-height:1;
box-shadow:0 0 0 2px var(--keyline), 0 3px 0 rgba(0,0,0,.34);
}
/* the TITLE is what truncates, not the pill: the pill never grows past
the room .hud-mid gives it, the type never shrinks and never wraps.
A long title losing its tail is the accepted cost of variant C. */
.hud-topic__t{
min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* ITEM 28 · THE ART SLOT, placeholder until the real per-issue art lands.
It is the die-cut treatment the rest of the system uses — charcoal
fill, a 2px white edge, the keyline outside it — at the board's 20x20.
THE HOOK IS data-issue-icon AND IT CARRIES THE ISSUE ID. A per-issue
rule can drop art in later without touching the markup or this rule:
.hud-topic__slot[data-issue-icon="r1"]{ background-image:url(...) }
and every issue without one keeps this shared fallback. background is
written as a shorthand with center/cover so such a rule only has to
supply the image. */
.hud-topic__slot{
flex:none; width:20px; height:20px; border-radius:4px;
background:#2B2926 center/cover no-repeat;
border:2px solid var(--edge);
box-shadow:0 0 0 1.5px var(--keyline);
}
.hud-coins{ direction:ltr; }
.hud-coins .coin-glyph{ color:var(--primary); font-size:13px; line-height:1; }
.hud-coins .num{ direction:ltr; unicode-bidi:isolate; }
.hud-coins.is-awarding{ animation:coin-bump var(--t-coin) var(--e-out); }
@keyframes coin-bump{ 0%,100%{transform:none} 35%{transform:translateY(-3px) scale(1.04)} }
/* ---- T13 · THE MAP AVATAR: A PERMANENT STROKE AND A ONE-SHOT BEACON.
THE GOLD IS --f5-gold, and it is the token the item asks for: the
finale board's 121st-vote marker paints .f5av's ring out of it and
.f5n.is-mine's numeral to match. It is declared once, at :root, in the
§5 block — aliased there rather than pointed at --primary precisely so
that "the marker gold" is addressable as one name, which is what makes
this reuse a reference and not a coincidence. On this branch its value
is #FFD60A.
THE RING IS .f5av's RING, at its small size: 2.5px of gold and 4px of
keyline, the same two numbers the strip and the plate use. The avatar
is now the same object in both places — it is the player, and the
player is marked the same way on the map as on the board.
border-radius is set because the ring is a box-shadow and the SVG's
own round shell does not give the BUTTON a shape to spread from. */
.hud-you{
width:40px; height:40px; border-radius:50%;
box-shadow:0 0 0 2.5px var(--f5-gold), 0 0 0 4px rgba(0,0,0,.5);
}
/* THE BEACON IS THE GOLD, NOT THE FINALE'S CREAM. --f5-glow is
245,227,170 — a warm yellow-cream — and it is reserved for the S-1
board; this is 255,214,10, the marker gold decomposed to a triple
because a spread shadow needs alpha and the token is a hex. The two are
not interchangeable and are not meant to look alike: one is a soft
warm wash on a dark board, this is a hard saturated ring on a 40px
sticker, and it stops.
IT PULSES OUT OF THE STROKE IT WILL LEAVE BEHIND. The animation's
floor IS the resting box-shadow above, so when the class comes off
nothing jumps: the beacon stops on the frame it is already on and the
ring is simply what remains.
THE CLASS IS ONLY EVER ON THE MAP — showScreen() puts it there and
takes it off — and the selector says so a second time, so a beacon can
never be left running on a screen this rule did not intend. */
:root{ --av-beacon:255,214,10; }
@keyframes av-beacon{
0%,100%{ box-shadow:0 0 0 2.5px var(--f5-gold), 0 0 0 4px rgba(0,0,0,.5),
0 0 10px 1px rgba(var(--av-beacon),.30),
0 0 22px 4px rgba(var(--av-beacon),.13); }
50% { box-shadow:0 0 0 2.5px var(--f5-gold), 0 0 0 4px rgba(0,0,0,.5),
0 0 16px 3px rgba(var(--av-beacon),.62),
0 0 34px 9px rgba(var(--av-beacon),.28); }
}
.stage[data-screen="map"] .hud-you.is-beacon{
animation:av-beacon 2000ms ease-in-out infinite;
}
/* the same contract §5's board keeps: no motion, and it holds at the
midpoint rather than at the floor, so the beacon is still legible as a
beacon to somebody who has switched motion off. */
@media (prefers-reduced-motion: reduce){
.stage[data-screen="map"] .hud-you.is-beacon{
animation:none;
box-shadow:0 0 0 2.5px var(--f5-gold), 0 0 0 4px rgba(0,0,0,.5),
0 0 16px 3px rgba(var(--av-beacon),.62),
0 0 34px 9px rgba(var(--av-beacon),.28);
}
}
/* A4 · the right slot holds whichever of the two is on this screen, and
holds the SAME 40px box either way so the row never shifts when the
avatar swaps for the ✕. */
.hud-right{ flex:none; width:40px; height:40px; display:grid; place-items:center; }
.hud-right > [hidden]{ display:none; }
/* ITEM 28 · THE CLOSE IS A CIRCLE, diameter = the title pill's height, so
the row reads as two pills and a disc cut to one measure. Its keyline
and extrusion are .ib-b's own and are untouched.
THE 40px SLOT AROUND IT IS NOT CHANGED — .hud-right still reserves
40x40, which is what holds the strip at today's height whether the slot
is showing the 40px avatar or this 36px disc. See .hud-right. */
.hud-x{
width:36px; height:36px; border-radius:50%;
font-size:17px; line-height:1;
}
/* =====================================================================
B5-1 · THE EXIT CONFIRM, BUILT AND CENTRED
§3.3. The board drew a sheet at the foot; this is centred in BOTH axes,
because a bottom sheet is the shape of an options menu and this is a
destructive confirm. It borrows .stmodal's sticker outright — same
white die-cut, same keyline, same extrusion, same tilt — so the round
has ONE modal shape and not one for content and another for confirms.
===================================================================== */
.exitsheet{
position:absolute; inset:0; z-index:70; display:grid; place-items:center;
padding:var(--sp-4); background:rgba(20,18,15,.74);
opacity:0; transition:opacity var(--t-ov-in) linear;
}
.exitsheet.is-in{ opacity:1; }
.exitsheet.is-out{ opacity:0; }
.exitsheet__box{
position:relative; width:100%; max-width:300px;
background:var(--paper); color:var(--ink);
border:5px solid var(--edge); border-radius:18px;
box-shadow:0 0 0 2px var(--keyline), 0 8px 0 rgba(0,0,0,.4);
padding:var(--sp-4);
display:flex; flex-direction:column; gap:var(--sp-3);
/* the sticker is LAID DOWN, not printed square. 1.2 degrees the other
way from .stmodal so the two are not the same object twice. */
transform:rotate(1.2deg) scale(.9);
transition:transform var(--t-flip) var(--e-land);
}
.exitsheet.is-in .exitsheet__box{ transform:rotate(1.2deg) scale(1); }
/* §3.3 the ✕ — a third way to stay, and the one that costs nothing to
reach because it is where the ✕ that opened this already was. Inset so
it clears the die-cut border rather than sitting on it. */
/* the exit confirm's ✕ is the SAME COMPONENT as the modals' — see the
shared rules under .stmodal__x. Physically right, not inline-end:
inset-inline-end resolves LEFT under dir=rtl, which would put it on the
opposite side from the HUD ✕ that opened it. */
/* §3.3 THE QUESTION IS BLACK AND IT IS A QUESTION. It used to be one
string carrying the question and the consequence at once, at
--ink-faint's weight, which made the thing being agreed to read as
part of the thing being asked. Padded on the end so it clears the ✕. */
.exitsheet__q{
margin:0; padding-right:34px; /* clears the ✕, which is physically right */
font-family:var(--font-display); font-weight:900;
font-size:19px; line-height:1.18; color:var(--ink); text-align:start;
}
.exitsheet__note{
margin:-4px 0 0; font-size:var(--fs-meta); font-weight:700;
line-height:1.4; color:var(--ink-soft); text-align:start;
}
/* §1b · EQUAL HEIGHTS AND A REAL GAP. .p-c is min-height:56px and .r-b is
52px, so the yellow was 4px taller than the outline and the pair read as
primary-plus-afterthought rather than as two choices. I kept 56 — the
PRIMARY's height is the one tuned against every other primary in the
app, and shrinking it here would make this the one 52px primary in the
build; raising the outline costs nothing.
The gap goes 8 -> 14px: at 8 the two boxes were nearly flush and read as
a segmented control, which is the wrong affordance for a destructive
confirm where the two options are opposites. */
.exitsheet__row{ display:flex; flex-direction:column; gap:14px; }
/* min-height is not what was making them unequal — both already had 56 and
both already exceeded it. The heights come from the TYPE: .p-c is 25px
(--fs-action) and .r-b is 17px (--fs-body), which put them at 70 and 61.
The type sizes are system tokens and are not this modal's to change, so
the fix is an explicit shared height with the label centred in it. */
.exitsheet__row > *{
min-height:70px;
display:flex; align-items:center; justify-content:center;
padding-block:0;
}
/* R-B IS BUILT FOR THE DARK GROUND. hachach.css draws it as
`color:var(--paper); background:transparent; box-shadow:inset 0 0 0 2.5px
var(--paper)` — cream type in a cream outline, which is correct on the
charcoal stage and completely invisible on a cream sticker: להישאר
disappeared and the modal read as having one action and a large empty
panel under it. Re-inked here rather than in hachach.css, which is the
locked handoff sheet and not ours to change. */
.exitsheet .r-b{
color:var(--ink); box-shadow:inset 0 0 0 2.5px rgba(19,19,16,.38);
}
.exitsheet .r-b:active{ box-shadow:inset 0 0 0 2.5px rgba(19,19,16,.65); }
/* §C THE ONE HELPER LINE. Not a pill: plain type on the ground, low
contrast, between the HUD and the chyron. Its box is reserved on every
beat — is-empty hides the text, never the space — so turning it on for
the first MK card cannot change the card's size. */
/* A8 · 1.5x. --fs-micro is 11px and that is what the MK question was set
in; it is now 17px with a box to match. The box is still RESERVED on
every beat — is-empty hides the text, never the space — so the card is
the same size on the claim, the overlay and every cascade card. */
.helper{
/* margin, not margin-bottom: it is a
, and the UA's default 1em top
margin was quietly taking another 13px off the card. */
flex:none; min-height:18px; margin:5px 0 0;
font-size:17px; font-weight:900; line-height:1.05;
font-family:var(--font-display);
color:#D8D2C4; text-align:center; opacity:1;
}
.helper.is-empty{ visibility:hidden; }
.round{ position:relative; z-index:1; flex:1; min-height:0;
display:flex; flex-direction:column; padding-top:26px; }
.beat{ flex:1; min-height:0; display:flex; flex-direction:column; position:relative; }
/* =====================================================================
NUMERALS · §7. Western numerals in an LTR run inside the RTL flow.
===================================================================== */
.num,.n{ direction:ltr; unicode-bidi:isolate; font-family:var(--font-display);
font-weight:900; }
/* =====================================================================
PLACEHOLDER · copy Tamar has not written.
The spike bar hides these so the round can be played clean. They are
HIDDEN, never deleted: the marker is what makes a missing string
visible, and the layout has to hold without them because that is what
shipping looks like. Hiding targets the HOST element, so a paragraph
that exists only to carry a placeholder leaves no empty line behind.
===================================================================== */
.ph{
display:inline-block; background-color:var(--primary);
background-image:repeating-linear-gradient(45deg,#FFE03D 0 8px,var(--primary) 8px 16px);
color:var(--ink); border:2px dashed var(--ink); border-radius:4px;
padding:2px 8px 3px; font-size:var(--fs-meta); font-weight:700; line-height:1.4;
}
/* THE RULE MATCHED THE HOST BUT NOT THE MARKER, WHICH IS A SHIPPING BUG.
ph() emits `…` — a CLASS. `data-ph` is a separate,
optional ATTRIBUTE put on the HOST when hiding the marker alone would
leave an empty line behind (.b1hint, .b3go). Only two of the five ph()
call sites carry that attribute, so with DEV.ph false the other three
went on painting a yellow hazard stripe in production: the finale's
result line on all eight no-tally issues, and the cascade's guess label
on every card of every issue that has one.
Both halves are needed and they do different jobs: [data-ph] removes the
whole line, .ph removes just the marker. */
body.no-ph [data-ph],
body.no-ph .ph{ display:none !important; }
/* =====================================================================
THE CARD STACK
.cardwrap is the only thing that scales, so a 620px card fits a short
phone. It does NOT clip: the verdict stamp hangs outside the card and
.mf-b carries overflow:hidden, which is what clipped it before.
===================================================================== */
/* .stack is the only thing that scales, so a 620px card plus its axis
strip fits a short phone without ever introducing a scroll.
sizeStage() sets BOTH the transform and an explicit height, because a
transform does not shrink the box the flex column reserves — leaving
the layout claiming 620px while the eye saw 500. */
/* §3 THE DECK SITS HIGHER. The beat centres the stack, so a bottom
margin lifts it by half its own value: 20px here moves the deck up
10px and leaves that much more air under it. sizeStage() subtracts
this margin from the card's budget — it is the stack's own margin, so
the `others` sum never sees it, and uncounted it would push the card's
foot past the stage on a short viewport. */
.stack{
display:flex; flex-direction:column; align-items:center; flex:none;
transform-origin:top center; margin-bottom:20px;
}
/* .cardwrap does NOT clip: the verdict stamp hangs outside the card, and
.mf-b carries overflow:hidden, which is what was cutting it off. */
/* §A THE DECK. .cardwrap is the deck's own box and the 3D context the
cards turn inside: perspective HAS to sit on the parent, not on the
card, or every card gets its own vanishing point and the turn reads
flat. Fixed height because the cards are stacked absolutely on top of
each other now — the claim card, the active card and the face-down
next card all occupy it at once. */
.cardwrap{
position:relative; width:var(--card-w); height:var(--card-h); flex:none;
perspective:1400px;
}
/* one card: a back and a front on one element, turned in 3D.
THE TRANSFORM LISTS MATCH between states on purpose. Interpolating
`translate+rotate` against a bare `rotateY` falls back to matrix
decomposition, which squashes the card instead of turning it. */
.deckcard{
position:absolute; inset:0; transform-style:preserve-3d;
transform:translate(2px,-7px) rotate(.9deg) rotateY(0deg);
transition:transform var(--t-card-flip) var(--e-settle);
}
.deckcard.is-current{
z-index:2;
transform:translate(0px,0px) rotate(0deg) rotateY(180deg);
}
.deckcard.is-next{ z-index:1; }
/* the resolved card is swiped off — ease-IN, because it is leaving */
.deckcard.is-leaving{
transform:translate(-420px,8px) rotate(-13deg) rotateY(180deg); opacity:.2;
transition:transform var(--t-card-exit) var(--e-in),
opacity var(--t-card-exit) linear;
}
.deckcard > .cardback,
.deckcard > .mf-b{
position:absolute; inset:0; margin:0;
backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
/* the front is pre-turned, so the card shows its back at rest and its
face at rotateY(180deg). It is in the DOM from the deal but never
visible until then — which is what stopped an MK's face showing
through the beat-2 blur a whole beat before the cascade. */
.deckcard > .mf-b{ transform:rotateY(180deg); }
/* §6 THE JOLT WAS UN-TURNING THE CARD. hachach.css lands the stamp with
`.mf-b.is-stamped{ animation:d2-jolt ... both }`, and d2-jolt's frames
set `transform:translateY(...)` — a WHOLE transform, which replaced the
front face's own rotateY(180deg). With fill:both it then held that
value forever. The front's net rotation went from 360 to 180, its
backface turned to the viewer, backface-visibility hid it, and what
showed through was the face-down card underneath: the MK vanished and
the player saw a card back the instant the stamp landed.
The jolt is kept — it is the card taking the hit — but it now carries
the face's rotation with it. */
/* ITEM 7 · 3px -> 5px, AND THE DELAY IS NOW THE NEW FALL. The jolt has to
fire on the frame the disc hits, and the fall grew 190 -> 200ms, so the
delay is written out rather than left on --t-stamp-drop, which still
describes hachach.css's 190ms fall for anything else using it. */
.deckcard > .mf-b.is-stamped{
animation:d2-jolt-face 120ms var(--e-land) 200ms both;
}
@keyframes d2-jolt-face{
0%,100%{ transform:rotateY(180deg) translateY(0) }
40% { transform:rotateY(180deg) translateY(5px) }
}
/* §1 THE CARD BACK. One illustration, identical on every back and on
every pile card, at FULL STRENGTH — the previous treatment greyed it,
dropped it to 20% and multiplied it into the kraft, which was far too
faint to read as a card back at all.
BOTTOM-ANCHORED AND COVERED. The art is 1536x2752 (0.558) against a
340x620 card (0.548), so `cover` crops a sliver — and anchoring the
bottom takes that sliver off the EMPTY SKY at the top, keeping the
building and the flags at its foot, which is the part worth seeing. */
.cardback{
background:var(--cardback-art) bottom center / cover no-repeat, #C4B48F;
border:var(--card-border) solid var(--edge-warm);
box-shadow:0 0 0 2px var(--keyline), var(--shadow-card);
overflow:hidden;
}
/* the claim card sits on top of the deck it belongs to */
.b1card{ z-index:3; }
/* =====================================================================
BEAT 1 · THE CLAIM · B1-B developed
ONLY THE TOP CARD MOVES. The stage, the pile and the ground are never
transformed — the drag is on .b1card and nothing else.
===================================================================== */
.b1{ align-items:center; justify-content:center; }
.b1card{
display:flex; flex-direction:column; align-items:center;
padding:44px var(--sp-4) 84px;
touch-action:none; /* the card owns the gesture */
will-change:transform;
}
.b1card.is-dragging{ transition:none; }
.b1card.is-snapping{ transition:transform var(--t-snapback) var(--e-settle); }
/* §3 · THE CARD IS THROWN, AND IT IS THE DECK'S OWN THROW. It used to
travel on --t-swipe 220ms with --e-out — a DECELERATING curve, which is
the ease for something arriving — while fading 1 -> 0 linearly across
the whole flight, so it was half transparent by the time it had crossed
half the screen. That reads as vanishing, not as being thrown.
It now uses exactly what .deckcard.is-leaving uses when a resolved MK
card is swiped off in the cascade: --t-card-exit 320ms on --e-in, the
accelerating curve, and it fades only to .2 and only over the last
100ms, so the object is opaque for two thirds of its travel and leaves
the frame rather than dissolving in it. One throw in the round, not
two. */
.b1card.is-leaving{ transition:transform var(--t-card-exit) var(--e-in),
opacity 100ms linear 220ms; }
/* §1.3 · THE GRAPHIC USES THE ROOM, AND IT IS THE THING THAT YIELDS.
The card is 620px and the art had a flat 210px floor with the claim
taking whatever was left, so on a short claim (s1, 49 chars) a third of
the card was empty. It is now flexible with a generous floor and a cap,
so it grows into the space a short claim leaves and shrinks when the
claim needs the room — `flex:1 1 auto; min-height:0` on the art and
`flex:none` on the claim is what makes the TEXT win the fight. Checked
against e3, the longest claim in the active set at 190 characters. */
/* the BOX grows into whatever the claim leaves, the IMAGE is capped by its
own declared size — so the graphic is centred in the space rather than
the space collecting as a gap between the claim and the buttons */
.b1art{
flex:1 1 auto; min-height:0;
display:grid; place-items:center; align-self:stretch;
}
/* THE IMG IS CAPPED, NOT RE-SIZED. claimArt() writes width/height
attributes on the — 300x180 for s1's art, 128-scaled for the
topic fallback — and those attributes ARE the layout size. Setting
`width:auto; height:auto` here (which the first version did) threw them
away and the image rendered at its natural 900x539, four times its
slot, overflowing the card and being clipped by .mf-b's overflow.
max-* only: the attributes still size it, this only ever shrinks it. */
/* THE RATIO IS NOT NEGOTIABLE, AND max-height ALONE BREAKS IT. The
attributes set the used WIDTH; max-height then clamped the HEIGHT
without the width following, so the reveal state stretched the
graphic horizontally on ALL ELEVEN active issues — 1.32x on g1/g3 to
1.52x on r1. It was not a rounding artefact, it was every card.
`width:auto` is NOT the fix and was tried once already: on a replaced
element it discards the attributes and falls back to the INTRINSIC
size, which rendered s1 at 900x539 and overflowed the card.
object-fit:contain is. The box may still be constrained by a cap, but
the pixels inside it letterbox instead of distorting, so no future
asset or cap can reintroduce the squish. */
.b1art img{
max-width:100%; max-height:var(--b1art-cap, 340px); height:auto;
object-fit:contain;
}
/* WHEN THE PANEL RISES THE ART GIVES WAY. The panel covers the card's
lower portion, and the one thing that must survive it is the claim the
explanation is explaining. The art is capped hard here so the claim
floats up clear of the panel's top edge; the answer row is spent and
goes entirely, which is where most of the room comes from. */
/* ON REVEAL THE ART BOX STOPS GROWING. Left at flex:1 it absorbed the room
the hidden answer row freed and pushed the claim straight back under the
panel — the box grew even though the image inside it could not. */
.b1card.is-revealing .b1art{ flex:0 0 auto; }
/* THE 126px REVEAL CAP IS GONE. Capping the art was what forced the
choice between distorting it and shrinking it, and the artwork is
never the thing that gives. Every active issue's graphic is 126-191px
tall and 101-298px wide, all inside the 340px default cap and the
container's width, so with this removed NO max-* binds and the art
renders at exactly its declared size — identical before the answer and
in the reveal. The room comes out of the claim's leading instead; see
.b1card.is-revealing .b1claim. */
.b1card.is-revealing .b1ans{ display:none; }
.b1card.is-revealing{ padding-bottom:var(--sp-3); }
.b1card.is-revealing .b1claim{ flex:none; }
.b1art img{ display:block; filter:url(#dcw) drop-shadow(0 5px 0 rgba(0,0,0,.30)); }
/* §1.3 · THE TEXT WINS, SO THE TEXT SETS ITS OWN SIZE. The claims in the
active set run from 49 characters (s1) to 190 (e3) — nearly 4x — and one
font size cannot serve both: 29px is right for s1 and gives e3 eight
lines that overflow the card. Three steps, keyed off the string length
in beat1(), so the graphic yields to the text rather than the text being
clipped. The steps are measured, not guessed: at 393px, e3 at 29px is
336px of claim, at 20px it is 232 — which is what lets the panel clear
it. See the panel cap in claimReveal(). */
.b1claim{
flex:none; display:grid; place-items:center; margin-top:10px;
font-family:var(--font-display); font-weight:900;
font-size:var(--b1claim-fs, var(--fs-claim));
line-height:1.16; color:var(--ink); text-align:center; text-wrap:balance;
}
.b1card--mid { --b1claim-fs:24px; }
.b1card--long { --b1claim-fs:20px; }
/* the two answers. IDENTICAL — same class, same size, same weight, same
ink. אמת and שקר are never told apart by anything but their letters.
§2.2 THE BUTTON IS THE DRAG'S READOUT. The answer the gesture is
choosing fills solid --ink on the same ramp as the preview pill, so it
is fully solid at the commit threshold and partially filled below it.
Only --fill moves. It changes no geometry and it is never set on the
other button, so the pair is identical in size and weight at every
point of the drag — which is the whole reason the feedback could not
be "shrink the one you are not choosing". */
.b1ans{ position:absolute; z-index:7; bottom:var(--sp-3); inset-inline:var(--sp-3); }
.b1ans .v-a{
--fill:0;
min-height:60px; font-size:var(--fs-action);
position:relative; overflow:hidden; /* clips the fill to the radius */
}
/* THE FILL IS A WIPE, NOT A CROSS-FADE. Fading the background to --ink
while fading the label to --paper puts mid-grey text on a mid-grey
ground at --fill:.5 and the word vanishes at exactly the moment the
player is deciding. The wipe carries a hard edge instead: every pixel
is either ink-on-paper or paper-on-ink, so both halves stay at full
contrast at every value. The two layers share one clip so the dark
ground and the light lettering can never drift apart.
RTL: the fill grows from the inline-start edge, which is the right. */
.b1ans .v-a::before,
.b1ans .v-a::after{
position:absolute; inset:0; pointer-events:none;
clip-path:inset(0 0 0 calc((1 - var(--fill)) * 100%));
}
.b1ans .v-a::before{ content:""; background:var(--ink); }
/* the label's light copy. data-label is the same string as the button's
own text; the pseudo-element inherits the font, and the padding is
symmetric, so the two copies land on the same baseline. */
.b1ans .v-a::after{
content:attr(data-label);
display:grid; place-items:center; color:var(--paper);
}
/* ---- the swipe, §2.2 · every gesture has a button twin -------------
THE REVEAL APPEARS ON THE SIDE THE CARD IS MOVING TOWARD. Written in
PHYSICAL left/right on purpose: the logical properties invert under
dir=rtl, which is exactly how this ended up mirrored. The mapping
switch changes which ANSWER a direction means, never which side the
reveal comes from. */
/* ---- THE REVEAL, and why it is ON the card rather than behind it.
Measured: dragging left exposes 0px of ground on the left and 56-152px
on the right, because the card is 340px wide inside 25px of ground —
its leading edge leaves the stage before any gap can open there. A
panel parked behind the card on the travel side therefore cannot ever
become visible, at any drag distance. It is not a z-order or an RTL
bug; the geometry forbids it at this card width.
So the reveal is the Tinder/Reigns move instead: a wash on the card's
LEADING EDGE, which is visible from the first few pixels of travel, is
unambiguously on the side the card is going, and travels with it.
Same ink both directions — it names the word, never which one is the
"good" answer. The alternative, if the panel behind is wanted, is to
shrink the card during the drag so ground opens on the leading side. */
.b1target{
position:absolute; z-index:6; top:0; bottom:0; width:62%;
display:flex; align-items:center; opacity:0; pointer-events:none;
border-radius:2px;
}
.b1target--left{
left:0; justify-content:flex-start; padding-inline-start:20px;
/* §2 A SHADOW, NOT A LEAK. This was --kraft-deep, a pale beige, which
read as light escaping from behind the card instead of the card
lifting away from the deck. Deep warm brown-black: the gap a card
opens when it moves off is dark. */
background:linear-gradient(to right, rgba(14,10,6,.90) 0%,
rgba(14,10,6,.52) 58%, rgba(14,10,6,0) 100%);
}
.b1target--right{
right:0; justify-content:flex-end; padding-inline-end:20px;
background:linear-gradient(to left, rgba(14,10,6,.90) 0%,
rgba(14,10,6,.52) 58%, rgba(14,10,6,0) 100%);
}
/* THE WASH CARRIES NO WORD. It used to hold the answer at 38px across the
card face, which — with the pill above it and the button below it —
put the same word on screen three times during a single drag. The wash
is the DIRECTION; the pill and the button carry the word. */
/* §2.1 Reigns: the label fades in ACROSS the drag, before release.
It lives INSIDE the card so it travels with it — as a sibling it
floated loose on screen while the card moved out from under it. */
/* IT IS A STAMP, NOT A BUTTON. As a paper pill with --r-pill corners, a
white die-cut edge and an extruded shadow it was built out of exactly
the parts a control is built from, so the one thing on the card that
is NOT pressable looked the most pressable. Now it takes the committed
button's own treatment — solid --ink, --paper lettering — with every
affordance removed: no radius, no die-cut, no extrusion, nothing that
implies a press. It sits ON the card surface and hangs slightly over
the top edge, the way a stamp lands on top of a thing rather than
being part of it. The opacity ramp is unchanged: it is still the
drag's readout and still arrives on the same k as the button fill. */
.b1prev{
position:absolute; z-index:9; top:-9px; opacity:0;
display:flex; align-items:center;
background:var(--ink); border:0; border-radius:0;
padding:7px 16px 9px; pointer-events:none;
box-shadow:none;
}
.b1prev b{ font-family:var(--font-display); font-weight:900; font-size:22px;
color:var(--paper); }
/* out of flow so unwritten copy must not be
able to cost the card 40px when the placeholders are switched on */
/* 21 · in the set and switched, though it renders nothing today: it is a
data-ph placeholder and body.no-ph hides it. Wired now so it comes back
in the body face rather than in the app default. */
.b1hint{ position:absolute; left:0; right:0; bottom:0; z-index:10;
font-family:var(--font-body); font-weight:400;
text-align:center; margin:0; pointer-events:none; }
/* =====================================================================
BEAT 2 · YOUR OWN VOTE · B2-CHAIR-FULL
A full-height blurred overlay, not a card: this is an interruption,
a meta question, not a step in the same plane.
THE OVERLAY IS A CHILD OF .stage, NOT OF THE BEAT, so the blur reaches
every edge including the safe areas. Anchored to the beat it stopped
at the round's padding and the dot-grid ground showed through.
===================================================================== */
.ov--stage{
position:absolute; inset:0; z-index:9;
/* THE TRACK IS CAPPED AT THE PADDED BOX, and that one declaration is the
whole beat-2 clipping fix. An implicit `display:grid` track is sized to
MAX-CONTENT, and .b2votes below asks for --card-w (340px, hachach.css)
— so on any stage narrower than 372px the track grew to 340, the pane
and the vote row grew with it, and the 12px of overflow all landed on
the RTL end: at 360 the נגד chip sat 4px from the screen edge instead
of 16 and its 4.6px keyline was cut. minmax(0,1fr) makes the track the
content box, so --card-w's own max-width:100% can finally bite.
Nothing changes at 375 or 390, where 340 already fitted. */
display:grid; place-items:center; grid-template-columns:minmax(0,1fr);
padding:calc(18px + env(safe-area-inset-top)) 16px
calc(16px + env(safe-area-inset-bottom));
/* softer than beat 3's: what is behind it — the answer just given and
the cards ahead — is meant to be recognisable as those things */
-webkit-backdrop-filter:blur(9px) saturate(.9);
backdrop-filter:blur(9px) saturate(.9);
background:rgba(28,26,23,.52);
animation:ov-in var(--t-ov-in) var(--e-settle) both;
}
/* ONE SURFACE, TWO CONTENTS. Both panes occupy the same grid cell of the
same .ov, so the backdrop is painted once and never re-rendered: at the
commit the vote pane travels UP and out while the bill pane arrives
from BELOW, and the blur behind them does not move, blink or restart.
Two overlays doing this were two blurs and the seam read as a load. */
.ovpane{
/* the same cap one level down: .ovpane is itself a grid whose item is
.ov-inner, so without this the max-content track re-inflates to 340
under a correctly-sized parent and the row overflows anyway. Both
levels or neither. */
grid-area:1 / 1; width:100%; display:grid; place-items:center;
grid-template-columns:minmax(0,1fr);
transition:transform var(--t-ov-swap) var(--e-settle),
opacity var(--t-ov-swap) var(--e-settle);
}
.ovpane--vote.is-above{ transform:translateY(-44px); opacity:0; pointer-events:none; }
.ovpane--bill.is-below{ transform:translateY( 44px); opacity:0; pointer-events:none; }
/* ITEM 38 · --ovgap NAMES THE COLUMN GAP so the two rules around .b2q can
subtract it. The gap itself is unchanged and still applies between every
child; variant D's 26-above / 12-below are absolute figures, and the only
way to state an absolute gap inside a flex column whose gap is vh-based
is to cancel the gap out on the one pair that needs it. Same trick as the
board, which calls the variable --gap. */
.ov-inner{ display:flex; flex-direction:column; align-items:center;
--ovgap:clamp(8px, 1.6vh, 16px);
gap:var(--ovgap); width:100%; max-width:358px; }
/* align-items:center on a flex column shrink-wraps every child, so the
vote row was 219px of a 326px line. The board writes width:100% here. */
.ov-inner .v-a-row{ width:100%; }
/* THE VOTE ROW IS THE CARD'S WIDTH, NOT THE OVERLAY'S. At the overlay's
358px the three chips were wider and taller than anything on the claim
card, so beat 2 read as a bigger, more important surface than the deck
it interrupts. Same width as the card, same min-height and same type as
the claim card's two answers. */
/* the parent selector is load-bearing: `.ov-inner .v-a-row{width:100%}`
above is (0,2,0) and a bare .b2votes would lose to it silently. */
/* §4 AIR BETWEEN THE QUESTION AND THE ANSWERS. .ov-inner's own gap is
clamp(8px,1.6vh,16px) and it applies between every child, which left
the vote row sitting as close to the bill title as the title sits to
the question — one undifferentiated block. This is on top of the gap,
so the space before the buttons roughly doubles while the copy above
stays as tight as it was. */
/* ITEM 38 · THE GAP BELOW THE QUESTION IS 12px FLAT. It was the column gap
plus clamp(10px,2.2vh,22px) — 32px at 844 — which put the question nearer
the title line above it (13.5) than the buttons below it. It is the
question the buttons answer, so it groups with them: 26 above, 12 below.
The margin goes negative at tall viewports (12 - 13.5 = -1.5) and that is
correct — it is cancelling the column gap, not pulling the row up. */
.ov-inner .b2votes{
width:var(--card-w); max-width:100%;
margin-top:calc(12px - var(--ovgap));
}
.b2votes .v-a{ min-height:60px; font-size:var(--fs-action); }
/* §4 THE SEAT. The chair and the confirmation share one positioning
context so the confirmation can sit ON the chair rather than under it.
THE CHAIR IS NEVER CROPPED — it is the game's emblem and a cut one
reads as a bug — so it is height-capped against the viewport and the
cap is what shrinks on a short phone, never the crop. */
/* ITEM 36 · THE SEAT RESERVES THE TAPE'S DEPTH, AND THEN SOME. The tape is
absolutely positioned so it contributes no height of its own; this
margin is the only thing holding .b2head off it.
THE BOARD'S 40px IS NOT ENOUGH — measured, the line lands at -0.9px,
i.e. printing 1px INTO the tape rather than under it. 61px puts the gap
at 20.1px. The extra over a plain 16 is paid to the tape's own 3px
extrusion, which sits below its box and eats into any gap measured to
it: 20.1 measured reads as ~17 of actual air, which clears the beat's
own 12.9-16px column rhythm instead of competing with it. */
.b2seat{ position:relative; flex:none; display:grid; place-items:center;
margin-bottom:61px; }
/* ITEM 36 · VARIANT E, ported from explorations/v23/b2-headline.html.
.b2onchair is retired: the headline is no longer type on the cushion,
it is a KRAFT TAPE running edge to edge behind the chair's foot.
WHY IT IS STILL A CHILD OF .b2seat. The tape is positioned off the
seat's own box — top:calc(100% - 5px) drops its top edge 5px above the
seat's bottom, so the foot's die-cut overlaps the tape's top and the
thing reads as passing BEHIND the chair rather than under it. Anchoring
it to the pane instead would have to re-derive the chair's foot on every
viewport, which is exactly what the board avoided.
THE OVERRUN IS THE POINT. 440px fixed against a 390 or 360 stage, so the
tape leaves the screen on both sides and has no visible ends — the torn
clip-path is for the top and bottom edges, not the ends. Nothing scrolls:
html and body are position:fixed with overflow:hidden, and .stage clips.
THE GAP BELOW IT IS OURS, NOT THE BOARD'S. See .b2seat's margin. */
.b2tape{
position:absolute; z-index:0; left:50%; top:calc(100% - 5px);
width:440px; margin:0;
transform:translateX(-50%) rotate(-1.5deg);
padding:14px 0 13px;
background:var(--card-surface); color:var(--ink);
font-family:var(--font-display); font-weight:900;
font-size:26px; line-height:1; white-space:nowrap; text-align:center;
box-shadow:0 3px 0 rgba(0,0,0,.30), inset 0 0 0 1px rgba(0,0,0,.10);
clip-path:polygon(0 0,100% 0,99.4% 18%,100% 36%,99.3% 54%,100% 72%,99.4% 90%,99.7% 100%,
0 100%,.6% 84%,0 66%,.7% 48%,0 30%,.5% 12%);
pointer-events:none;
}
/* the chair paints IN FRONT of the tape — that overlap is the whole
illusion. .b2tape is z-index:0, so the chair only needs to be raised
into the same stacking context to sit above it. */
.b2chair{ position:relative; z-index:1; }
.b2chair{
display:block; flex:none;
/* was clamp(96px, 23vh, 196px) — at that size it read as an icon beside
the question instead of the thing the question is about */
width:auto; height:clamp(168px, 40vh, 330px); aspect-ratio:168 / 196;
object-fit:contain;
filter:url(#dcw) drop-shadow(0 5px 0 rgba(0,0,0,.34));
transition:transform var(--t-b2-seat) var(--e-settle);
}
/* the confirmation lands on the seat itself, ~62% down the chair, which
is where the seat pan is in the illustration */
.b2taken{
position:absolute; left:50%; top:62%; margin:0; z-index:2;
display:flex; align-items:baseline; gap:var(--sp-2); white-space:nowrap;
padding:8px 20px 11px;
background:var(--paper); color:var(--ink);
box-shadow:0 0 0 3px var(--edge), 0 0 0 5px var(--keyline), 0 5px 0 rgba(0,0,0,.34);
font-family:var(--font-display); font-weight:900;
font-size:clamp(21px, 4.2vh, 32px); line-height:1;
opacity:0; pointer-events:none;
transform:translate(-50%,-50%) scale(.82);
transition:opacity var(--t-b2-seat) var(--e-settle),
transform var(--t-b2-seat) var(--e-land);
}
.ovpane--vote.is-taken .b2taken{ opacity:1; transform:translate(-50%,-50%) scale(1); }
/* the chair settles under the weight of being taken */
.ovpane--vote.is-taken .b2chair{ transform:translateY(4px) scale(1.02); }
/* the two not chosen RECEDE, they are not deleted: the round never hides
an option it offered, and beat 5 still has to be able to talk about
what was on the table. */
.ovpane--vote.is-taken .b2votes .v-a{
opacity:.3; transform:scale(.94);
transition:opacity var(--t-b2-seat) linear, transform var(--t-b2-seat) var(--e-settle);
}
.ovpane--vote.is-taken .b2votes .v-a.is-chosen{ opacity:1; transform:none; }
/* §3.2 THE QUESTION'S LEADING. It had no line-height at all, so it ran
at the UA's `normal` — which for SimplerPro 900 resolves to 1.32 — and
at 22-29px that is 8px of air between two lines of a two-line question.
1.08 is the display face's own set width: the prompt now reads as one
block rather than as two sentences. Before 1.32 (normal), after 1.08.
text-wrap:balance keeps the two lines near-equal so the tighter leading
does not leave a one-word second line hanging under a full first. */
/* §2 · THE FRAMING LINE. Chrome, not card content, and deliberately NOT
the chyron's own treatment — the chyron is the player's pinned VOTE and
a second light-and-neon band would say the same thing twice. This is the
inverse construction: a dark plate with a bright rule down its leading
edge, so it reads as framing that belongs to the beat rather than as a
caption on the question below it.
WEIGHT SITS BETWEEN ITS NEIGHBOURS on purpose — larger and brighter than
the bill link (15px at 78% white) and clearly under the prompt
(22-29px display), because it introduces the question rather than being
it. Two lines at 360px; measured, not assumed. */
/* ITEM 30 · .b2frame IS GONE. The translucent strip with the cyan leading
edge is what this composition replaces: it was a second headline above
the question, and the 121st-MK conceit it carried is now in the vote
question itself. The rule is removed rather than left as a tombstone
because nothing emits the class any more.
THE BEAT HAS ONE LOUD OBJECT. Headline, bill button and תכלס are all
reading-size; .b2q is the only display line, and it sits directly above
the buttons it is asking about. Two competing headlines is exactly what
the banner was. */
.b2head{
margin:0; max-width:32ch;
font-size:17px; font-weight:700; line-height:1.5;
color:#D8D2C4; text-align:center; text-wrap:pretty;
}
/* ITEM 34b · THE TAP TARGET IS THE TITLE, INSIDE THE SENTENCE. It is a
real button, not a styled span, so it carries the control's semantics —
but it has to sit in the run of text without breaking it, hence the
inline box, the inherited type and the baseline alignment. The underline
and the 78% white are what .b2bill--link used to carry; that rule is
retired and this replaces it. */
.b2title-link{
appearance:none; border:0; background:none; cursor:pointer;
font:inherit; font-weight:900; color:#FBF7EE;
text-decoration:underline; text-underline-offset:3px;
padding:0; margin:0; display:inline;
}
/* ITEM 38 · VARIANT D, from explorations/v24/b2-question.html.
FLAT 30px, NOT A CLAMP. The clamp resolved 26px at 844 and bottomed out
at its 21px floor by 640, so the question shrank while the tape stayed
26 — and this beat repeats 22 times, where a size that moves between
rounds reads as a rendering wobble rather than as design. One size.
30px OUTRANKING THE 26px TAPE IS THE POINT, not an oversight: the tape
asks the framing question, this line asks the one the buttons answer.
NO PANEL, TINT, STROKE OR OUTLINE — board variants E and F were built
and rejected; F reads as a fourth button above the three. */
.b2q{ font-family:var(--font-display); font-weight:900;
font-size:30px; line-height:1.1; text-wrap:balance;
color:#FBF7EE; text-align:center; margin:0;
/* v26 · 26 -> 38. The 12px is room between the law-title link and the
question, and it is on the MARGIN rather than on padding for a
reason that is not cosmetic: .b2q is .b2q__tab's containing block,
and an absolutely positioned tab at bottom:100% anchors to the
PADDING box's top edge. padding-top:12px would leave the tab where
it is and push the text 12px out from under it, silently turning the
decided +11px descent into -1px. Measured on the board: the margin
moves the head-to-question gap 23.5 -> 35.5 and leaves the
question-to-buttons gap at 6.5, the line counts at 2/3 and the line
widths identical to the pixel. */
margin-top:calc(38px - var(--ovgap)); max-width:100%;
/* the tab's containing block. Changes no box. */
position:relative; }
/* ---- v26 · THE תכלס TAB, ON THE QUESTION.
Decided on explorations/v26/tachles-tab.html; it replaces the tab that
was briefly built on the kraft tape, which is gone.
SHAPE GRAMMAR IS .ask-st__i's, THE MK CARD'S BLACK TAB — same #2E2A26
neutral ink, same white die-cut, same keyline outside it, same radius,
same display Black — with every dimension multiplied by 0.8 and
nothing rounded to a nicer number: 16.5 -> 13.2px type, 8/13/9 ->
6.4/10.4/7.2 padding, 3 -> 2.4 border, 2 -> 1.6 keyline, 12 -> 9.6
radius, 4 -> 3.2 extrusion. line-height stays 1.06, a ratio that
already scales. Rendered box 58.43 x 35.44.
+4deg, NOT -4. About the bottom-right corner the far end then rides UP
and the tab's lowest ink IS the anchor corner, which is what makes the
descent below a single number instead of a corner-dependent one. It
also lifts the tab off .b2head: at -4deg it dipped into the title's
band and eight of the sixteen titles collided with it.
THE +11px DESCENT IS THE WHOLE DECISION. Measured against the
question's real ink: SimplerPro Black's ל carries 21.72px of ascent at
30px and the tallest body letter beside it 16.95, so the ascender the
tab may rest on is 4.77px tall and nothing more. +11 puts the tab
1.72px into it with 3.05px still clear of the letter bodies. +8 never
reached the ascender; +14 cleared the bodies by 0.05px, which is a
rounding artefact and not a tolerance; +20 cut 5.95px into them.
translateY is 5.5 less than the descent because the glyph rect's top
sits 5.5px above .b2q's own border box.
THE HORIZONTAL IS NO LONGER A PROPERTY OF THE STRING. It was: anchored
to the column's start edge the tab hit 11-54px of the first word on
ten of the sixteen and nothing at all on six. It is now anchored to
line 1's own box — see placeQTab() in proto.js for why that needs a
runtime read and what it costs. */
.b2q__tab{
/* v26f · left is written by placeQTab(), which puts it at line 1's
centre biased 30% of that line's width toward the start edge. The
0 here is a floor, not a position: it is overwritten in the same
tick the pane is appended, before a frame is painted.
translateX(-50%) is what makes `left` mean the tab's CENTRE, so the
placement never needs the tab's own width. It is listed BEFORE the
rotate, so it applies in the parent's frame after the rotation —
the rotate still pivots on transform-origin 100% 100% and the +11px
descent is untouched by the horizontal move. */
position:absolute; z-index:2; left:0; right:auto; bottom:100%;
transform:translateX(-50%) translateY(5.5px) rotate(4deg);
transform-origin:100% 100%;
display:block; white-space:nowrap; pointer-events:none;
background:#2E2A26; color:#F4F1E8;
font-family:var(--font-display); font-weight:900;
font-size:13.2px; line-height:1.06;
padding:6.4px 10.4px 7.2px; border-radius:9.6px;
border:2.4px solid var(--edge);
box-shadow:0 0 0 1.6px var(--keyline), 0 3.2px 0 rgba(0,0,0,.34);
}
/* ---- v26 · THE PROMPT'S TAIL, T-a.
display:block is the requirement, not a preference: the tail is its
own line at every width and must never run back inline. 21px Black
against the claim's 30px Black — the board drew a 22/400 and an 18/400
beside it and this is the one that stays in the display voice.
The 6px is the declared gap; measured ink to ink it reads as 12.0px
with the leading either side, baseline to baseline 31.0. */
.b2q__tail{
/* v27 PART 1 · 6px -> 0. The tail is part of the question and has to
group with the claim, not float between the claim and the buttons.
It read as floating because the two gaps matched: 11.99px ink-to-ink
above it against 6.5px below. MEASURE INK, NOT BOXES — the 30px
claim's line box hangs ~5.5px of leading below its last glyph and
the 21px tail carries its own above, so more than half of that 12px
was leading and only 6 of it was the margin. Removing the margin
entirely lands the ink gap at the ~6px asked for, which is now
visibly tighter than the 6.5px below rather than double it.
Neither font size moved; both are decided. */
display:block; margin-top:0;
font-family:var(--font-display); font-weight:900;
font-size:21px; line-height:1.15;
}
/* ITEM 34c · .b2bill is retired — the bill name is no longer its own
line; the tap target is the title inside .b2head. See .b2title-link. */
/* §3.2 .b2consent IS GONE from the markup — "את התוצאה נגלה בסוף ›" was
a promise about a beat five screens away, printed under the question
being asked now. The rule is kept as a tombstone rather than deleted so
the next person searching for the class finds out where it went. */
.ov--out{ animation:ov-out var(--t-ov-in) var(--e-settle) both; }
@keyframes ov-out{ from{opacity:1} to{opacity:0} }
/* =====================================================================
BEAT 3 · THE BILL · B3-OVERLAY
One line, over the MK card. What shows through is the card and nothing
else. Dismiss COLLAPSES INTO the card beneath.
===================================================================== */
/* the bill pane's own column. The surface is .ov--stage's; this is only
the content that arrives on it. */
.b3inner{ gap:var(--sp-4); text-align:center; }
.ov--stage.is-dismissable{ cursor:pointer; }
/* T5 · BEAT 3, DOWN TO THE QUESTION. .b3say and its two marked runs
(.b3say__d the date, .b3say__t the bill name) go the way ITEM 31 sent
.b3title, .b3date and .b3go: the beat is one line now, and the line is
the question. Deleted rather than left behind a retired class, because
the only element on the screen should not have a stylesheet describing
a paragraph that is no longer built.
.b3inner keeps its gap and its centring — it is a one-child column
today and the gap costs nothing, but it is also where anything the beat
grows back would land. */
.b3ask{
margin:0; font-family:var(--font-display); font-weight:900;
font-size:26px; line-height:1.2; color:#F6F1E2; text-wrap:balance;
}
.ov--collapse{ animation:ov-collapse var(--t-ov-collapse) var(--e-out) both;
transform-origin:50% 62%; }
@keyframes ov-collapse{
from{ opacity:1; transform:scale(1);
-webkit-backdrop-filter:blur(16px) saturate(.9); backdrop-filter:blur(16px) saturate(.9) }
to { opacity:0; transform:scale(.86);
-webkit-backdrop-filter:blur(0) saturate(1); backdrop-filter:blur(0) saturate(1) }
}
/* =====================================================================
BEAT 4 · THE MK CASCADE · B4-D developed, CHIPS-RING, D2 at 190px
===================================================================== */
.b4{ align-items:center; justify-content:center; }
/* draw/spend are gone: a card is TURNED OVER to arrive (.deckcard) and
SWIPED OFF to leave (.deckcard.is-leaving). Nothing fades in place. */
.mf-b__port{ filter:drop-shadow(0 2px 0 rgba(0,0,0,.18)); }
/* ---- THE PARTY GOES ON ITS OWN LINE.
hachach.css styles .mf-b__id's
and
both display:inline-block,
so on a short name they share a line and the party reads as a subtitle
beside it. Every board frame draws the party UNDER the name.
§1.4b the label itself stays — hiding it dumps the complexity on a
17-year-old as noise, and the fix for a boring round is curation. */
.mf-b__id h2{ display:block; }
.mf-b__id p { display:inline-block; margin-top:4px; }
/* the .mf-b__basis rule went with the line itself — see the note at the
verdict. Nothing else in the sheet targeted it. */
/* the initials badge. Never another politician's face. Set on the set's
own eyeline — 37.7% down the box — so it occupies the card as a
portrait does. */
.mf-b__badge{
position:absolute; left:50%; top:37.7%; translate:-50% -50%;
width:170px; height:170px; border-radius:50%;
display:grid; place-items:center;
background:var(--paper); color:var(--ink);
font-family:var(--font-display); font-weight:900; font-size:56px;
box-shadow:0 0 0 4px var(--edge), 0 0 0 6px var(--keyline);
}
.mf-b__foot .v-a{ font-size:19px; }
/* ---- the guess-vs-reality axis. The payload of the beat, and it is
INSIDE the card again, at the foot, where the board draws it.
It is absolutely positioned, so it contributes nothing to the card's
box: the card is 340x620 and the strip arriving at the verdict cannot
re-scale it. The reserved box that used to hold its footprint below the
card is gone with it — reserving space out there is what was making the
card smaller.
IT CROSSES THE LOWEST FACES IN THE SET, and that is known and accepted
for this build. Face boxes measured per portrait (card-local px, skin
mask + beard density, validated against the render):
ben_gvir y_max 508 · netanyahu 450 · lapid 516
gantz y_max 551 · michaeli 578 · deri 553
The strip's top edge sits at y=541, so it lands on Michaeli's neck by
37px and on Deri's beard by 12px. Unresolved, on the record. */
.gx{
position:absolute; z-index:8; bottom:var(--gx-bottom); inset-inline:var(--sp-3);
height:var(--gx-h);
animation:gx-in var(--t-hold) var(--e-settle) both;
background:rgba(216,201,168,.92); border-radius:12px; padding:7px 9px 5px;
box-shadow:0 0 0 2px rgba(0,0,0,.4);
}
@keyframes gx-in{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
.gx-track{
position:relative; height:38px; margin:0 4px;
background:rgba(34,31,23,.13); border-radius:19px;
box-shadow:inset 0 0 0 1.5px rgba(34,31,23,.22);
}
/* the fill. It grows FROM the player's stop toward the MK's, anchored on
the edge the growth starts at — see runAxis() for why that anchor is
what makes it read right-to-left when it runs that way. */
/* §3.1 · THE GAP CARRIES THE DISTANCE. It was rgba(34,31,23,.26) — a flat
grey that said only "there is a gap here" while the length of it
already said that.
ONE HUE, THREE STRENGTHS, and that is deliberate: the strengths are the
only variable, so the three states cannot be misread as three different
kinds of thing. The hue is --verdict-surprise, which is already the
system's "you were surprised" colour, so a wide gap says the same word
the stamp does rather than introducing a fourth verdict colour.
SYMMETRY IS STRUCTURAL. runAxis() keys the class off Math.abs(), so
בעד->נגד and נגד->בעד are the same class and there is no branch that
could drift. Verified in the report against all 9 guess/vote pairs.
DISTANCE 0 NEVER PAINTS A FILL — there is nowhere to travel — so
agreement is carried by a lime tint on the TRACK instead, which is the
"neutral/positive, no alarm" end of the scale. */
.gx-fill{
position:absolute; top:0; bottom:0; width:0; border-radius:19px;
background:var(--gx-gap, rgba(34,31,23,.26)); pointer-events:none;
transition:background var(--t-flip) linear;
}
.gx--d1{ --gx-gap:color-mix(in srgb, var(--verdict-surprise) 30%, transparent); }
.gx--d2{ --gx-gap:color-mix(in srgb, var(--verdict-surprise) 62%, transparent); }
.gx--d0 .gx-track,
.gx.is-agreed .gx-track{
background:color-mix(in srgb, var(--verdict-correct) 22%, rgba(34,31,23,.26));
}
.gx-m{ position:absolute; top:50%; translate:50% -50%; width:38px; height:38px; display:block;
transition:right var(--t-flip) var(--e-settle); z-index:2; }
/* the player's token drops into its slot rather than being there */
.gx-you{ transition:right var(--t-flip) var(--e-settle),
transform var(--t-gx-lock) var(--e-land),
opacity var(--t-gx-lock) linear; }
.gx-you.is-landing{ transform:translateY(-14px) scale(1.12); opacity:0; }
/* the MK's token arrives in the PLAYER'S slot before it travels */
.gx-mk{ transition:right var(--t-flip) var(--e-settle),
opacity var(--t-gx-appear) linear,
transform var(--t-gx-appear) var(--e-land); }
.gx-mk.is-hidden{ opacity:0; transform:scale(.72); }
/* agreement: the two share one slot and settle instead of travelling */
.gx.is-agreed .gx-track{ animation:gx-settle var(--t-gx-settle) var(--e-land); }
@keyframes gx-settle{ 0%,100%{transform:none} 45%{transform:scale(1.015)} }
/* A8 · the neutral "your guess" mark. A punch-hole: paper ring, dark
centre, NO hue — the verdict stamp beside it is the only coloured thing
in the beat and this must never compete with it or be mistaken for it.
Its label sits above the token rather than inside: 38px cannot hold
three Hebrew words, and the strip's own height is fixed. PLACEHOLDER,
marked as such — B4 replaces the whole mark. */
.gx-punch{
display:block; width:38px; height:38px; border-radius:50%;
background:var(--paper);
box-shadow:inset 0 0 0 6px var(--ground), 0 0 0 2px rgba(0,0,0,.45),
0 2px 0 rgba(0,0,0,.3);
}
.gx-punch__lab{
position:absolute; bottom:calc(100% + 3px); left:50%; transform:translateX(-50%);
white-space:nowrap; font-size:9px; line-height:1;
}
.gx-punch__lab .ph{ padding:1px 5px 2px; font-size:9px; border-width:1px; }
.gx-port{ display:block; width:34px; height:46px; object-fit:contain; object-position:50% 0; }
.gx-badge{ display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
background:var(--paper); font-family:var(--font-display); font-weight:900; font-size:14px;
box-shadow:0 0 0 2px var(--keyline); }
/* ---- THE PAIRED PLAYER TOKEN, and the bug it was.
When the guess and the vote land on the SAME stop the player's token is
lifted clear of the MK's so both read. The lift was translateY(-30px)
on a 38px token centred in a 38px track with 7px of strip padding above
it: 30px up put its top edge 16.6px ABOVE .gx's own top edge, so after
the verdict the avatar floated over the strip, outside it, attached to
nothing. The lift has to fit the headroom that exists.
A pure vertical stack cannot be made to fit: the MK's portrait already
overflows the track to -4px, so clearing it needs a 26px lift and the
strip has 7px. The paired token becomes a BADGE on the shared stop
instead — up and toward the inline-start, small, above the portrait in
z-order, and read as separate by the die-cut edge it already carries.
It costs no height, and it stays inside both the track and the slot at
every stop and every card scale. */
.gx-m.is-paired.gx-you{
translate:50% -50%; transform:translate(13px,-8px) scale(.58); z-index:2;
}
.gx-stops{ display:flex; margin-top:5px; }
.gx-stops i{ flex:1; text-align:center; font-style:normal; font-size:var(--fs-meta);
font-weight:700; color:var(--ink-soft); }
/* ---- D2, THE VERDICT STAMP · ONE PLANE, ON TOP ---------------------
It paints OVER everything the card carries — portrait, name plate, the
axis strip at the foot — and it is flat while it does it: no drop
shadow against the card, no ring, nothing that reads as a layer
sitting between the card and the viewer. hachach.css gives .d2 a
1px black shadow for exactly that depth cue; it is removed here.
Parented to .cardwrap rather than .mf-b, which carries overflow:hidden
and would cut the overhang, with a z-index above the card so it clears
the strip's z-index 8 inside it.
IT LANDS ON THE FACE ON ALL SIX, and that is accepted for this build
rather than solved. top:430 puts the disc's foot exactly on the card's
bottom edge — the largest inside-the-card placement — and the share of
the disc covering skin or beard is then:
netanyahu 4% · lapid 12% · ben_gvir 18% · gantz 35% · deri 42% ·
michaeli 69%
No placement that keeps a 190px disc wholly on the card clears anyone:
the faces run y[115,450..578] and the card is 620, so there is no 190px
band inside it that misses them. Dropping to top:470, which hangs 40px
below the card, would clear netanyahu and ben_gvir — but the overhang
is not reserved anywhere (reserving it would shrink the card) and it
clips ~19px off the stage at 375x667. Card size wins. ON THE RECORD,
UNRESOLVED. */
.d2{
/* one number for the disc. The word's size and the ink's CSS-px scale
are both derived from it, so they cannot drift out of step with it. */
--d2-size:190px;
width:var(--d2-size); height:var(--d2-size);
top:430px; left:-22px; bottom:auto; right:auto;
z-index:14;
box-shadow:none;
}
.d2__art{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; fill:none; }
.d2__art circle{ fill:none; stroke:currentColor; }
/* §1 THE CENTRE WORD IS HTML. No bidi property fixes SVG text in WebKit
— direction, unicode-bidi and every combination of them render Hebrew
left-to-right there — so the word does not go through SVG's text
shaping at all. HTML text is reordered correctly by every engine, and
the source strings stay in logical order in the file.
IT IS STILL THE STAMP'S OWN MARK, not type layered on a graphic:
· it lives INSIDE .d2, so d2-land's scale — and any rotation the disc
is ever given — carries it; disc and word are one object;
· `color` is unset, so it takes the disc's currentColor (--d2-on), the
identical ink the circles are stroked with;
· the display face at 900, as the ring had;
· filter:url(#ink-h) is #ink rescaled from viewBox units to CSS px, so
the displacement, the dry-brush holes and the blur land at the same
rendered grain — and inkBleed() drives both maps off one clock, so
the word ruptures at contact with the disc rather than after it.
WHAT IS LOST: nothing measurable. The one difference is that the word
is filtered in its own pass instead of inside the disc's , so the
noise field is sampled from its own origin — the grain does not
continue unbroken from circle to letter. At 32px on a 190px disc that
is not visible; it would be if the word ever overlapped a circle.
.d2__ring is GONE. Curved text is the one case HTML cannot take over
without hand-placing glyphs in visual order, which is the reversal
being refused here. The ring stays as the two stroked circles. */
.d2__word{
position:absolute; inset:0;
display:grid; place-items:center;
font-family:var(--font-display); font-weight:900;
font-size:calc(var(--d2-size) * .17); /* the 17 viewBox units it was */
letter-spacing:.01em; line-height:1;
filter:url(#ink-h);
/* the disc is role="img" with an aria-label; this is the same word
again, and pointer-events would otherwise put it over the card */
pointer-events:none;
}
/* EVERY BACK IS THE SAME BACK — the pile's cards carry the identical
artwork to .cardback, at the same strength, so the deck reads as one
deck. hachach.css gives .pile i a grid-on-kraft background; this
replaces it outright rather than layering over it.
The offsets start one step deeper than they did, because the face-down
.deckcard now occupies the slot the first pile back used to. */
.pile i{
background:var(--cardback-art) bottom center / cover no-repeat, #C4B48F;
}
.pile i:nth-last-child(1){ transform:translate(3px,-17px) rotate(1.7deg); }
.pile i:nth-last-child(2){ transform:translate(2px,-22px) rotate(1.4deg); }
.pile i:nth-last-child(3){ transform:translate(2px,-32px) rotate(1.85deg); }
.pile i:nth-last-child(4){ transform:translate(3px,-41px) rotate(1.2deg); }
/* =====================================================================
BEAT 5 · THE REVEAL · B5-A1 (count leads) / B5-A2 (count quiet)
Strict order: resolution + count, then the shape of the guess, then
the explanation, then sources as ONE line.
§8 NEVER: >1 number at the emotional peak. The tally counts up alone;
the score and the coins arrive after it has settled.
IT DOES NOT SCROLL. Only the map and character personalisation ever
do. fitBeat() scales this block down on a short phone instead.
===================================================================== */
/* the top pad is what a short phone can least afford: at 640px of height
fitBeat() is already scaling the whole beat, and 44px of air above the
board is 44px the grid pays for. Fluid, so the tall phones keep it. */
.b5{ padding-top:clamp(14px, 5vh, 44px); gap:var(--sp-2); justify-content:flex-start; }
.b5 > *{ flex:none; }
.b5fit{ transform-origin:top center; }
.b5panel{
background:rgba(0,0,0,.16); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.10);
width:calc(100% + 32px); margin:0 -16px; padding:16px var(--sp-4) 14px;
display:flex; flex-direction:column; gap:var(--sp-2);
}
/* =====================================================================
THE SEAT GRID · v20 option 4
===================================================================== */
/* §S-1 · THE BAR'S TWO FILLS, AND A CONFLICT ON THE RECORD.
The spec sets בעד to #B6E521 and נגד to #FF7A6B and says they "carry no
correctness meaning — they are a quantity, not a verdict."
#B6E521 IS --verdict-correct. It is the claim chip, the cascade stamp
and the cascade gap, and the rule written at the top of this file and
in the handoff stylesheet is that colour codes correctness and NEVER
vote direction — "nothing else may borrow either." The previous finale
pass removed a green/red pair from exactly this bar for exactly this
reason: a 17-year-old reads green as good, so the beat was quietly
saying that voting for a bill is the right answer. By beat 5 the
player has spent a whole round learning lime = you were right.
BUILT AS SPECIFIED, because it is a design call and it is Lion's, but
both palettes are here and the switch is ?f5bar=spec|neutral so the
two can be compared on a device. `neutral` is the pair the seat grid
derived and verified: #4E6BFF and #E8DCC0, separated on LUMINANCE
(0.194 vs 0.721 — a channel no dichromacy touches), dE2000 53.0
normal / 58.3 deuteranopia / 56.3 protanopia / 43.2 tritanopia, and
neither carries valence. */
:root{
--f5-for: #B6E521;
--f5-ag: #FF7A6B;
--f5-rem: #2A2822; /* the unfilled remainder of 120 */
}
[data-f5bar="neutral"]{
--f5-for: #4E6BFF;
--f5-ag: #E8DCC0;
}
/* the seat grid's stylesheet went with seatBoard() — .b5board, .b5seats,
.seat, .seat--me, .seat.is-cross, .b5me__lab, .b5tal and the
--seat-* tokens. See the note at §S-1 in proto.js for why. */
.b5-a2 .b5count{ font-size:22px; color:var(--ink-faint); }
.b5res{
font-family:var(--font-display); font-weight:900; font-size:44px; line-height:1;
background:#000; color:#fff; border:var(--card-border) solid var(--edge);
padding:2px 16px 6px;
}
.b5-a2 .b5res, .b5-nocount .b5res{ font-size:56px; }
.b5outcome{ font-size:12.5px; font-weight:700; color:#8E897C; margin:0; }
/* §1.4c THE 121st VOTE. Compared to the OUTCOME, never to a party or a
named MK. Usually nothing changes — that is the lesson. */
.b5you{
display:flex; align-items:center; gap:var(--sp-2);
font-size:var(--fs-body); font-weight:700; color:#EFECE4;
background:rgba(255,255,255,.06); border-radius:var(--r-chip);
padding:9px var(--sp-3);
}
.b5you .as-d{ width:32px; height:32px; flex:none; }
.b5you .num{ color:var(--primary); }
/* §1.8 the SHAPE of the guess, narrated before the score.
Describes the pattern; never characterises the guesser. */
.b5shape{ font-size:15px; font-weight:700; line-height:1.45; color:#D8D2C4; margin:0; }
.b5exp{ font-size:14.5px; font-weight:700; line-height:1.5; color:#D8D2C4; margin:0; }
/* §1.1 the unfinished sentence, completed. Verb + count, nothing added. */
.b5sentence{
font-size:14.5px; font-weight:700; line-height:1.45; color:#BEB9AC;
border-inline-start:2px solid rgba(255,214,10,.5); padding-inline-start:10px; margin:0;
}
.gt{ background:rgba(55,196,255,.22); border-bottom:2px dotted #9FD9F2;
color:#EFECE4; padding:0 3px; font-weight:900; cursor:pointer; }
/* §3.1 .gdef IS GONE. Tapping a term opened a plain white panel inline,
under the term, inside the paragraph — so the sentence the player was
reading reflowed around it as it opened and again as it shut. The term
now opens .stmodal, the same sticker the law does. Tombstone kept so
the next person searching for the class finds out where it went. */
/* sources: ONE line. Not a block, not a card, not chips. */
.b5src{ font-size:11.5px; font-weight:700; color:#8E897C; margin:0; }
.b5src a{ color:#8E897C; }
.b5stage{ opacity:0; transform:translateY(6px);
transition:opacity var(--t-flip) var(--e-settle), transform var(--t-flip) var(--e-settle); }
.b5stage.is-in{ opacity:1; transform:none; }
.b5go{ margin-top:var(--sp-3); }
/* ---- THE PINNED CLAIM · a chyron ------------------------------------
WHAT THIS REPLACES. hachach.css's .pinned is a pill: absolutely
positioned, --r-chip radius, --shadow-press, the same shape and weight
as the .h-a coin chip in the HUD opposite it. Two problems, and the
second is a defect. It read as a STATUS CHIP — a pip the round had
awarded — when it is the player's held commitment and has to read as a
declaration. And being positioned over the play area it sat ON the
card: measured on the beat-4 frame it covered the first letter of the
MK's name, so איתמר בן-גביר rendered as יתמר בן-גביר.
A BAND INSTEAD, IN FLOW. .chyron is a sibling of .hud and .round rather
than a child of either, so "it never overlaps the card" is structural:
the round begins where the band ends, at every viewport, and no z-index
is doing the work. Horizontal, flat, unrotated — the shape reports what
the player said rather than posturing it.
IT HOLDS ITS BOX ON BEAT 1. There is nothing to pin before the claim is
answered, so it renders empty — but it keeps its height. Collapsing it
would make .round 52px taller on beat 1 than on beats 2-5, and
sizeStage() would hand the card a different scale on either side of the
answer. visibility, not display, for exactly that reason. */
/* THE SLOT KEEPS THE FLOW; THE BANNER LEFT IT. .chyron-slot carries the
exact box .chyron used to occupy inside #scRound — same min-height,
same margins — so the round still begins where the band ends and the
card is the same size on every beat. It holds nothing and paints
nothing. See the note in index.html for why the banner had to go. */
.chyron-slot{ flex:none; min-height:44px; margin-top:8px; margin-bottom:var(--sp-2); }
/* z-index 11: ABOVE .ov--stage's 9, so the banner flies over the beat-2
blur rather than under it, and BELOW .hud's 12, so it still passes
beneath the coin counter it has always sat under. Positioned from
#chyronSlot's measured box by placeChyron(). */
.chyron{
position:absolute; z-index:11; pointer-events:none;
display:flex; align-items:center; gap:var(--sp-2);
/* §2 · AT LEAST 8px OFF THE HUD, at every width. The band was flush
against the HUD row — .hud has its own bottom padding but the chyron
had no top margin, so on the beats where the band is filled the two
read as one stacked object. margin-top, not a gap on the parent,
because .sc-round's other children must not gain the same space. */
min-height:44px;
color:var(--ink);
}
/* THE BOX IS RESERVED IN ALL THREE STATES. Only the contents change,
never the height, so the card is the same size whichever state is
switched on and whichever beat is showing. */
.chyron.is-empty{ visibility:hidden; }
/* ---- band · the full-width chyron -----------------------------------
§3b REAL TRANSPARENCY. It was a 62% paper film, which over the dark
ground composites to an almost solid mid-grey — a grey bar with a blur
nobody can see behind it. A LOW-ALPHA DARK film instead: the ground and
whatever card is under it genuinely read through, the blur does visible
work, and the type goes light because the band is now dark.
§3a the hard ink block down the leading edge is gone with the ::before
that drew it. §3d so is the avatar — the band carries the answer. */
/* §2 · THE BAND GOES LIGHT, AND THE TYPE GOES DARK WITH IT.
It was a 30% dark film with light type. Light type on a low-alpha film
only works while the ground stays dark, and §3.2 puts a warm
yellow/red gradient behind the map — so the same band would have had to
carry light type over a light ground. A LIGHT film with INK type is the
combination that survives both, which is why the re-ink goes this
direction rather than the other.
The blur stays: at 72% the ground still reads through it, and the band
is a film over the round rather than a panel on top of it.
§2 · THE NEON, AND WHY THIS HUE.
Every other candidate in the palette is spoken for:
lime #B6E521 / magenta #FF3BC0 are the verdict pair. A verdict hue on
the player's own vote banner says their vote was graded, which is
the exact thing §0 forbids anywhere near the tachles award.
yellow #FFD60A is P-C, "the only yellow in the system", and §3.2
turns the map ground warm yellow/red — a yellow glow would compete
with the primary button and then disappear against the map.
the six live topic hues name a topic, and this band is the player's.
#37C4FF is already in the system twice — it is the glossary accent
(.gt's dotted underline) and internal_sec's topic hue — so it
introduces no new brand colour. internal_sec has no active issue, so
its node never draws, and §3.2 takes topic hues off the nodes anyway;
the association is theoretical rather than visible. It is also the only
palette hue that stays legible against BOTH the charcoal round chrome
and the warm map gradient, being roughly complementary to the latter.
A LIT SIGN, NOT A BLOOM. One 2px stroke at full strength, then two
spreads at 55% and 22% — enough that the edge reads as emitting rather
than as drawn, and short enough that it does not haze the type inside
it or fight the sticker language around it. No animation: a pulsing
chyron would compete with §3.3's next-up node, which is the one thing
on screen that IS allowed to pulse. */
/* =====================================================================
THE ROUND BANNER · B-5 sticker + B-1's neon
.chyron is the RESERVED SLOT and nothing else now — no fill, no edge, no
width. The object is .bnr inside it, sized to its own contents, which is
what removes the 67% void the full-width band carried. Both banner
states are the same construction: only the fill and the skew differ.
===================================================================== */
[data-chyron="band"] .chyron{
background:none; box-shadow:none; padding-inline:0;
backdrop-filter:none; -webkit-backdrop-filter:none;
justify-content:flex-start;
}
[data-chyron="band"] .chyron-line{ color:var(--ink); }
[data-chyron="band"] .chyron-line .ph{ color:var(--ink); }
/* ---- .bnr · ONE STICKER, TWO STATES ---------------------------------
B-5's construction: sized to contents, white die-cut, hard keyline
outside it, flat extrusion, set down slightly off-square.
B-1's ACCENT, AND ONLY AS A GLOW. The neon does not replace the
keyline and is not a second hard rule — there is no `0 0 0 Npx neon`
term anywhere here. It is two blurred, spread shadows painted BEHIND
the keyline and the extrusion, so the stacking from the middle out is:
fill -> 3px white die-cut -> 2px keyline -> soft cyan halo
The white cut stays the object's edge; the cyan is light coming off it.
Order in the box-shadow list is load-bearing — the first entry paints on
top, so the keyline and the extrusion must be listed before the glows or
the halo washes over them. */
.bnr{
--neon:#37C4FF;
display:inline-flex; align-items:center; gap:8px;
/* PADDING IS OPTICALLY BALANCED, NOT NUMERICALLY. The leading side holds
a 28px circle and the trailing side holds Hebrew. A circle touches its
boundary at one point and curves away, so it reads as having more room
than flat type at the same distance; Hebrew letters like ד, ר and ם
end on a straight vertical stroke that sits flush. Equal numbers
therefore look wrong in exactly the way the brief describes — the word
crowding the edge while the avatar floats.
TUNED BY MEASUREMENT, NOT BY EYE ALONE. The first attempt swung too
far the other way — 8px behind the avatar and 17px behind the word
put the real ink gaps at 5.25px and 16.5px, a 3x difference, because
the avatar's own 2px ring already eats into its padding while the
Hebrew sits flush against its own. Rendered at DPR 4 and measured
from the last inked column to the inner edge, 11px / 12px lands the
ink at 8.2px and 11.4px — and those two READ as equal, because the
circle recedes from its tangent point while the flat stroke of ד
does not. Numerically 3px apart, optically level. */
padding:6px 6px 7px 6px;
padding-inline-start:11px;
padding-inline-end:12px;
border:3px solid var(--edge);
border-radius:13px;
color:var(--ink);
box-shadow:
0 0 0 2px var(--keyline),
0 3px 0 rgba(0,0,0,.34),
0 0 11px 2px color-mix(in srgb, var(--neon) 52%, transparent),
0 0 26px 6px color-mix(in srgb, var(--neon) 20%, transparent);
}
/* the two states differ in FILL, in how they are set down, and in whether
they carry the accent — see below. Same object, same edge. */
.bnr--vote{ background:var(--paper); transform:rotate(1.2deg); }
.cmark.bnr{ background:var(--cm); transform:rotate(-1.6deg); border-radius:999px; }
/* THE GLOW IS THE PINNED VOTE'S, NOT THE CHIP'S, and that is a meaning
distinction rather than a colour fix. The pinned vote persists for four
beats and is the 121st-MK conceit while it is on screen, so it earns
the accent; the correctness chip is on screen for a moment and already
carries a strong colour of its own. Cyan over magenta also stopped
reading as light and started reading as a third colour.
THE HALO IS NEVER TINTED TO THE CHIP'S HUE. That would make the accent
mean two things, and it would put a lime glow beside a right answer and
a magenta one beside a wrong answer — which is the accent creeping into
coding correctness, which it may never do. So it is removed, not
recoloured. */
.cmark.bnr{
box-shadow:0 0 0 2px var(--keyline), 0 3px 0 rgba(0,0,0,.34);
}
/* ?neon=off draws the same sticker with the glow removed, so the two can
be compared on a device rather than argued about. */
[data-neon="off"] .bnr{
box-shadow:0 0 0 2px var(--keyline), 0 3px 0 rgba(0,0,0,.34);
}
/* THE AVATAR IS RE-INKED BY ITS EDGE, not by repainting AV3. Its ground
circle is #C9BFA6 cream, which on a cream sticker loses its silhouette
entirely; a dark keyline restores the boundary without touching the
inline SVG's fills — which the map node and the HUD also draw. */
[data-chyron="band"] .chyron-av{
border-radius:50%;
box-shadow:0 0 0 2px rgba(19,19,16,.72);
}
/* ---- note · a scrap left on the table -------------------------------
Not a band at all: a small square of paper resting at the leading side
of the same reserved box, carrying the ANSWER WORD and nothing else —
no avatar, no lead-in. Low-key by construction: small, off to one side,
and the only thing in the row. */
[data-chyron="note"] .chyron{
background:none; box-shadow:none; padding:0;
justify-content:flex-start;
}
[data-chyron="note"] .chyron-line .ph{ display:none; }
[data-chyron="note"] .chyron-line{
width:40px; height:40px; display:grid; place-items:center;
background:var(--paper); color:var(--ink);
font-size:15px; line-height:1;
transform:rotate(-2.5deg); /* set down by hand, not placed */
box-shadow:0 2px 0 rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.18);
}
/* ---- off · nothing shown, box still reserved ---------------------- */
[data-chyron="off"] .chyron{ visibility:hidden; }
.chyron-line{
display:flex; align-items:baseline; gap:var(--sp-2); min-width:0;
font-family:var(--font-display); font-weight:900; font-size:20px;
line-height:1; color:var(--ink);
}
/* THE WORD IS NEVER COLOURED BY DIRECTION. אמת and שקר take exactly the
same ink, the same weight and the same size — the band says what was
said, and says nothing about whether it was right. */
.chyron-line b{ font:inherit; color:var(--ink); }
/* =====================================================================
THE THREE SCREENS · intro -> map -> round
The stage carries data-screen and the screens are `hidden`; only one is
in the layout at a time, so nothing off-screen can charge the visible
screen for height. The HUD is OUTSIDE all three — see index.html.
===================================================================== */
.screen{ flex:1; min-height:0; display:flex; flex-direction:column; position:relative; z-index:1; }
.screen[hidden]{ display:none; }
/* the intro has nothing to count and nobody to be yet */
.stage[data-screen="intro"] .hud{ display:none; }
/* §5 ON THE MAP THE HUD IS OUT OF FLOW, and that is what makes the map
pass BEHIND it rather than start below it. It is the same row, the same
three chips, with no band and no background of its own — the stage's
charcoal and dot grid run under the chips unbroken, and the path scrolls
through that gap. Taking it out of flow is also what hands .sc-map the
whole stage: the screen is the only flex child left, so it fills the
column without a negative margin anywhere.
In the round it stays IN FLOW: the card is measured against the height
the HUD leaves, and floating it there would put the card under it. */
.stage[data-screen="map"] .hud{
position:absolute; z-index:30;
top:calc(10px + env(safe-area-inset-top));
left:calc(16px + env(safe-area-inset-left));
right:calc(16px + env(safe-area-inset-right));
background:none;
}
/* the HUD's centre slot. Exactly one of the two children is ever in it,
and the slot holds the same box either way so the row never jumps. */
.hud-mid{ flex:1; min-width:0; display:flex; justify-content:center; align-items:center; }
.hud-progress[hidden], .hud-topic[hidden]{ display:none; }
/* §3 THE COIN CHIP GOES BACK TO A FULL PILL — deliberately, and it is now
the only 999px corner in the prototype. See the report: what hachach.css
CALLS H-A is the 14px chip (--r-chip), and 999px is the SHIPPED app's
coin chip (styles/home.css:9). The token is not touched, because
--r-chip is also .v-a, .ib-b, .p-c and the chyron; this is scoped to the
two chips that carry a NUMBER in the HUD row, so the pair still reads as
one family and the grammar chips are left where the board put them. */
.hud-coins, .hud-progress{ border-radius:999px; }
.hud-progress{ direction:ltr; font-size:var(--fs-body); }
/* =====================================================================
1 · INT-D · THE INTRO
One primary action, and it goes straight to the map. There is no
character step: §4.1 kills creation-as-first-step outright and the
default avatar is assigned at boot. The flowmap's Intro -> Create -> Map
is superseded; a stub would be a screen we know is wrong.
===================================================================== */
/* EVERY VERTICAL NUMBER HERE IS TIED TO VIEWPORT HEIGHT, and it has to
be: the intro is the one screen with no card to scale, so if the
composite does not shrink it clips — the stage is overflow:hidden and
would simply eat the CTA. Margins are all explicit for the same reason;
the UA's 1em
margin is 26px under a 26px sub-head and was quietly
spending a fifth of the slack on a 667px phone. */
/* A1 · ONE COMPOSED GROUP, SHIFTED UP. With the lede pill and the note
gone, the four things left — title, chair, tagline, CTA — are centred as
a block rather than spread between the top and the bottom edges. The CTA
keeps a small auto margin so it settles at the foot of the group instead
of being pushed to the foot of the screen. */
.sc-intro{ align-items:center; text-align:center;
justify-content:center; padding-top:clamp(6px, 1.6vh, 14px); }
/* the plaza the building stands on */
.sc-intro::before{
content:""; position:absolute; left:-16px; right:-16px; bottom:-12px; height:62%;
z-index:0; pointer-events:none;
background:linear-gradient(to top,#6E6242 0%,#514A38 38%,rgba(64,62,58,0) 100%);
}
.i-tag{ flex:none; position:relative; z-index:5; margin:clamp(6px,1.5vh,16px) 0; }
/* THE TITLE AND THE CHAIR ARE ONE COMPOSITE STICKER. The chair sits ON the
letters and both carry the same white die-cut edge — the overlap of the
two cuts is the whole idea, and it only works because neither is boxed. */
.i-comp{ position:relative; z-index:5; display:flex; flex-direction:column;
align-items:center; margin-top:6px; flex:none; }
.i-title{ display:flex; flex-direction:column; align-items:center; gap:2px; position:relative; z-index:4; }
/* the chair sits ON the letters — the two die-cut edges overlapping IS
the composite — so the negative margin is the whole point of it. Sized
off viewport height for the same reason the title is. */
/* ITEM 42 · THE SHADOW'S THREE NUMBERS ARE REGISTERED PROPERTIES, and
they have to be. filter cannot be tweened here: the chain starts with
url(#dcw), and a filter list containing a url() reference interpolates
DISCRETELY — the shadow would jump from 4px to 10px at the midpoint
instead of tracking the chair, which is the one thing this effect is
made of. Registering the numbers gives them a type, so THEY tween and
the filter is simply recomputed from them each frame.
Initial values are the resting shadow exactly as it was, so anything
that does not run the float still paints the shadow it always had. */
@property --i-chair-sy{ syntax:''; inherits:false; initial-value:4px; }
@property --i-chair-sb{ syntax:''; inherits:false; initial-value:0px; }
@property --i-chair-sa{ syntax:''; inherits:false; initial-value:0.3; }
.i-chair{ display:block; position:relative; z-index:3;
margin-top:clamp(-64px, -7.5vh, -40px);
width:auto; height:clamp(150px, 36vh, 324px); aspect-ratio:278 / 324;
filter:url(#dcw) drop-shadow(0 var(--i-chair-sy) var(--i-chair-sb)
rgba(0,0,0,var(--i-chair-sa))); }
/* =====================================================================
ITEM 42 · THE INTRO CHAIR FLOATS
THE SHADOW STAYS ON THE GROUND. That is the whole effect and it is why
the offset counter-animates: the chair rises 6px and the shadow's own
offset grows 4 -> 10px, so its painted position never moves. A shadow
that rises with the object reads as the sticker being nudged; a shadow
that stays put reads as the object leaving the ground. It also softens
as it goes — blur 0 -> 2px, alpha .30 -> .22 — because a thing further
from its ground casts a larger, weaker shadow.
The 2px of blur is the one soft moment in a hard-shadow language, and
it is deliberate: it is transient, it is 2px, and without it the
shadow reads as painted on rather than cast.
5500ms AND IT MUST NOT BE 3500 OR A MULTIPLE OF IT. The CTA breathes
on 3500 (item 10); at 5500 the two realign only every 38.5s, so they
never settle into a shared beat and read as one mechanism. This is its
own literal, deliberately NOT the CTA's token.
`translate`, NOT `transform`. The loading beat drives this same chair
with an inline `transform` and a transition on it, and keeping the
float on a different property means the two can never clobber one
another whatever the ordering.
AMBIENT, SO IT NEVER STOPS — except that the loading beat MEASURES
this chair to compute its launch, and a floating chair would be
measured 0-6px off. loadingBeat() sets sc.dataset.loading before it
measures, so :not([data-loading]) grounds the chair on that same tick,
before the rect is read. No JS was needed and none was added.
===================================================================== */
.sc-intro:not([data-loading]) .i-chair{
animation:i-chair-float 5500ms ease-in-out infinite both;
}
@keyframes i-chair-float{
0%,100%{ translate:0 0;
--i-chair-sy:4px; --i-chair-sb:0px; --i-chair-sa:0.30 }
50% { translate:0 -6px;
--i-chair-sy:10px; --i-chair-sb:2px; --i-chair-sa:0.22 }
}
/* no float at all — not a 1ms one. `animation:none` kills the NAME, which
the global reduce rule's animation-duration:1ms !important cannot
override, so the chair simply sits still with its resting shadow. */
@media (prefers-reduced-motion: reduce){
.sc-intro:not([data-loading]) .i-chair{ animation:none; }
}
/* §2 · A SOFT DARK LIFT BEHIND THE TAGLINE, and this is the element that
actually needed it: measured at 360, .i-sub and .i-para both cross the
building — the roof band and the flags — while the title clears it at
every viewport and sits on the charcoal ground.
TWO BLURRED LAYERS, NO OFFSET-HEAVY DROP. A tight one for the local
contrast right at the glyph edge and a wide one that darkens the whole
patch behind the line, both pure black at partial alpha. There is no
0-blur term, so it can never read as an outline, and no colour, so it
can never read as a glow. */
/* T1 · ONE LINE, AT THE QUESTION'S SIZE, IN SimplerPro REGULAR.
THE FAMILY IS NEW HERE AND THAT IS THE POINT. This rule named no family,
so it inherited --font-ui from body — system-ui, where `700` is a real
semibold. The line is specified as SimplerPro, which ships 400 and 900
and nothing between, so naming the family forces the weight to be
chosen rather than inherited: left at 700 it would resolve UPWARD and
silently print the Black across every line of it.
400, AND NOT 900, for three reasons. It is a fourteen-word sentence
running four to five lines, and the Black at 21-26px over five lines is
a wall rather than a voice. The title directly above it is already
SimplerPro Black at 52-84px, and a second Black block under it competes
with the one thing on the screen that should dominate. And the
standfirst this absorbs was already --font-body at 400, so the copy it
replaces keeps its weight rather than gaining one.
THE MEASURE AND THE LEADING COME WITH IT. At the question's size this is
now a paragraph, not a label: 20ch keeps the line count honest at 360
and 1.3 gives SimplerPro's tall em box somewhere to sit. */
.i-sub{ margin:clamp(10px,2.4vh,20px) 0 0; font-size:clamp(21px,3.1vh,26px);
font-family:var(--font-body); font-weight:400; line-height:1.3;
max-width:20ch; text-wrap:balance;
color:#EFECE4; position:relative; z-index:4; flex:none;
text-shadow:0 1px 5px rgba(0,0,0,.82), 0 2px 16px rgba(0,0,0,.62); }
/* T1 · .i-para IS NO LONGER RENDERED. The rule stays because the string
stays — INTRO_COPY.para survives unrendered and putting it back is one
line in renderIntro(), which is the arrangement the note there already
describes for `note` and `lede`. */
/* 21 · THE STANDFIRST INHERITED --font-ui FROM body AND NAMED NO FAMILY,
so switching it means stating one. 700 -> 400 for the same reason as
.eg-eyebrow: 700 would resolve to the Black. The colour is NOT touched
by item 22 — #EFECE4 measures 7.31:1 on the lightest dot, comfortably
over the 4.5 floor, and --ink-body (4.56) would DARKEN it. */
/* 25 · EMPHASIS WITHOUT WEIGHT. This line carries the game's positioning
and it sits over the illustration, where the ground is busiest. It was
system-ui 700; item 21 moved it to SimplerPro, and the family has no
500/600/700 to fall back on, so the two levers left are SIZE and INK.
Size: the clamp is raised a step rather than replaced, so the short
phones keep a floor that fits — 19px at 390x844 (was 16), 16px at 667
and 640 (was ~14.6). The 1.62 ratio is unchanged.
Ink: #EFECE4 -> #FBF7EE, the system's own paper white, which is what the
display type on this screen already uses. NOT 900 — the title and the
CTA are both 900 and a third would flatten the hierarchy, which is why
this is a size-and-ink change and not a weight one. */
/* ITEM 41 · 1.62 -> 1.4, AND ONLY HERE. The 1.62 came from the body-face
work, where it paid for SimplerPro's 7px descent against system-ui's
4px — and it was tuned at 17px on the allocation screen, which runs
many lines. This is two short centred lines at 19px, where the same
ratio buys 30.8px of leading and the gap between the rows starts
reading as a space rather than as a paragraph.
SCOPE IS THIS SELECTOR. --font-body's own line-height is untouched and
so are the other seven elements switched in item 21; their 1.6 was
measured against their own sizes and none of them is two centred lines
at 19px. */
.i-para{ margin:clamp(6px,1.2vh,10px) 0 0; max-width:30ch;
font-family:var(--font-body);
font-size:clamp(16px,2.3vh,19px); font-weight:400;
line-height:1.4; color:#FBF7EE; position:relative; z-index:4; flex:none;
text-shadow:0 1px 5px rgba(0,0,0,.82), 0 2px 16px rgba(0,0,0,.62); }
.i-stage{ position:absolute; left:-16px; right:-16px; bottom:-12px; top:0;
z-index:1; pointer-events:none; overflow:hidden; }
.i-build{ position:absolute; left:0; right:0; bottom:0; width:100%; display:block; }
/* a scrim OVER the building and under the type. On a 667px phone the
paragraph and the note come down onto the flags and the road stripes,
and light type on that is unreadable. It sits inside .i-stage so it can
never get between the composite and the viewer. */
/* §2 · THE SCRIM CARRIES THE REST, and this is the right lever rather than
a heavier text-shadow. Measured under the glyph strokes at 360, the
paragraph crosses the building's lit roof band at 2.13:1 — the shadow
alone takes it to 3.87:1, past AA-Large but short of the 4.5:1 body
text needs, and the brief says not to push the shadow further.
The scrim is the mechanism already designed for exactly this case; it
was simply too weak where the paragraph lands. It reached only ~31%
black at the paragraph's height because the .55 stop sat at 46% of a
46%-tall band. Raised to 56% tall with the mid stop held further up, so
the type band is genuinely dark while the gradient still fades to
nothing well before the roof line — the building keeps its own light.
TUNED TO THE MINIMUM THAT CLEARS AA, by sweeping four candidates and
measuring both the paragraph's contrast and the mean luminance of the
building band underneath it: 50%/.78 gives 4.76:1, this gives 5.49:1,
56%/.86 gives 7.01:1. The building band only moves 0.2251 -> 0.2122
across that whole range, so the scrim costs the illustration far less
than it looks like it does; this setting takes the margin over AA and
still leaves the building 1.6% brighter than the heaviest candidate. */
.i-stage::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:52%; z-index:2;
background:linear-gradient(to top,rgba(43,41,38,.80),rgba(43,41,38,.58) 52%,rgba(43,41,38,0));
}
/* the action sits with the group, not at the bottom of the screen — that
is the whole point of A1's rebalance. A capped top margin keeps it
clearly separate from the paragraph without opening a gap. */
/* §1 · DOWN 12px. Every bound of the top clamp moves by the same 12, so
the gap grows by 12 at every viewport rather than only where the middle
term is active — clamp(18,4vh,34) at 360 resolves to its 4vh term, at
393 to its ceiling, and bumping only one of the three would have moved
some phones and not others. Re-measured below the fold check. */
/* THE 12px COMES OUT OF THE BOTTOM MARGIN, NOT OUT OF THE COLUMN.
.sc-intro is justify-content:center, so simply growing the top margin
grows the whole group and the centring gives back half of it — the
first attempt moved the CTA down 6px and pushed the title UP 6px.
Adding 12 above and removing 12 below leaves the group exactly as tall
as it was, so nothing above the CTA moves and the CTA moves the full
12. Verified: title top unchanged, CTA top +12 at every width. */
.i-cta{ margin:clamp(30px,calc(4vh + 12px),46px) 0 clamp(0px,calc(2.4vh - 12px),8px);
width:280px; font-size:clamp(21px,3.1vh,26px);
position:relative; z-index:6; flex:none; }
/* =====================================================================
ITEM 10 · THE CTA BREATHES
ARRIVAL FIRST, THEN INVITATION. 1200ms of stillness before the first
fire, so the screen is read before anything on it asks for a tap; then
every 3500ms, which is long enough that the button is at rest almost
all the time and the motion is an event rather than a texture.
THE SHADOW TRAVELS WITH IT, AND THAT IS THE WHOLE EFFECT. A scale with
a fixed shadow reads as a CSS pulse — the object grows but stays stuck
to the page. Moving the hard offset 4 -> 6px says the sticker lifted
off the ground, which is the one thing that makes it physical. If the
shadow ever stops moving, the effect is dead and should be removed
rather than kept.
The 3-4.6px edge and keyline rings are re-stated at every keyframe
because box-shadow interpolates as a LIST: drop a layer at one frame
and the whole stack animates from nothing.
TRANSFORM ONLY otherwise. No margin, no padding, no width — the button
is in a centred flex column and any box change would move the
paragraph above it.
NO GLOW, NO HALO, NO SWEEP. The warm yellow-cream is the S-1 finale
board's alone, and a diagonal sweep on a die-cut object reads as a
loading skeleton.
===================================================================== */
.i-cta.is-breathing{
transform-origin:center;
animation:i-cta-breathe 3500ms linear 1200ms infinite both;
}
@keyframes i-cta-breathe{
/* 0 -> 420ms · out */
0% { transform:scale(1) rotate(0deg);
box-shadow:0 0 0 3px var(--edge), 0 0 0 4.6px var(--keyline),
0 var(--z-press) 0 var(--primary-base);
animation-timing-function:cubic-bezier(.2,.8,.2,1) }
/* 420 -> 720ms · back */
12% { transform:scale(1.035) rotate(-0.8deg);
box-shadow:0 0 0 3px var(--edge), 0 0 0 4.6px var(--keyline),
0 calc(var(--z-press) + 2px) 0 var(--primary-base);
animation-timing-function:ease-in-out }
/* 720 -> 3500ms · at rest, waiting */
20.571% { transform:scale(1) rotate(0deg);
box-shadow:0 0 0 3px var(--edge), 0 0 0 4.6px var(--keyline),
0 var(--z-press) 0 var(--primary-base) }
100% { transform:scale(1) rotate(0deg);
box-shadow:0 0 0 3px var(--edge), 0 0 0 4.6px var(--keyline),
0 var(--z-press) 0 var(--primary-base) }
}
/* NO ANIMATION AT ALL, not a 1ms one. The global reduce rule shortens
animations; an invitation that fires in 1ms every 3500ms is a flicker.
startBreath() also refuses to add the class — this is the backstop. */
@media (prefers-reduced-motion: reduce){
.i-cta.is-breathing{ animation:none; }
}
/* ---- the display title, letter by letter --------------------------
Each glyph is its own