/* THE TWO FACES, SERVED FROM THIS ORIGIN (JIO-1300). They arrived from fonts.googleapis.com until then, as a stylesheet `` in the head of both pages -- which is to say as a RENDER-BLOCKING request to a host the browser had never spoken to, in front of every pixel of the first paint, and whose response was not even the fonts but the URLs of two more files on a third host. Nothing else on either page reaches outside this origin, so the slowest thing on the critical path was also the only thing on it we did not serve. WHAT WAS DOWNLOADED, AND WHY THESE EXACT FILES (confirmed 2026-09-20). They are Google Fonts' own `latin` subsets, byte-for-byte what the css2 stylesheet pointed a modern Chrome at -- so this is the same type, not a re-cut of it, and nothing about the rendering moved. The other subsets it offered (latin-ext, cyrillic, cyrillic-ext, vietnamese) are dropped: every string this game and its landing page can render is its own copy, in English, and the unicode-range below is the honest statement of what these files cover. Bungee is 14,296 bytes and Nunito Sans 49,612, which is what the two cross-origin requests already cost -- the saving here is the round trips, not the bytes. NUNITO SANS IS ONE VARIABLE FILE FOR ALL THREE WEIGHTS, and that is a fact about the file rather than a shortcut: Google's css2 response gave the IDENTICAL URL for 400, 600 and 700, because the face carries a `wght` axis and the browser instances it. `font-weight: 400 700` is the range declaration that says so; three static @font-face rules over one file would be three names for the same download. BUNGEE HAS EXACTLY ONE WEIGHT, so every rule that sets it also sets `font-weight: 400` (see the display roles below) -- a heading asking for 700 of a single-weight face gets a synthesised bold, which is Bungee smeared. THE URLS ARE RELATIVE, and they have to be. This sheet is served from /v//dicelock/style.css (server/server.ts, VERSIONED_CACHE) and from /dicelock//style.css on jiolab.dev (scripts/publish.js), and a relative `fonts/...` resolves against whichever of those it was loaded from -- so the faces are versioned and year-cached with the sheet, by doing nothing. An absolute `/dicelock/fonts/...` here would have escaped both rewrites and landed on the one-hour bare path. Both are SIL Open Font License 1.1; fonts/OFL.txt is the licence and names both. */ @font-face { font-family: "Bungee"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/bungee-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url("fonts/nunito-sans-latin-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* TWO THEMES, ONE SET OF ROLES (JIO-1061). Every token below that a light page has to re-light is declared twice and read once, and the two declarations are in this order for a reason: 1. `:root, [data-theme="dark"]` -- dark, and dark is the default. It is the palette this game shipped with, value for value, so the theme port is not also a redesign of the screen everybody is already looking at (design/foundation/FOUNDATION.md: "dark is the game's current"). Being on BARE `:root` as well as on the attribute is what makes the game black with no JavaScript at all, on any machine, at any hour. 2. `[data-theme="light"]` -- the same roles re-lit, from FOUNDATION section 1 and the Vs Computer light artboard. It is reached by ASKING for it on the Settings screen and by nothing else. ~~3. the `prefers-color-scheme: light` block, on `:root:not([data-theme])`~~ WENT IN JIO-1455, and this is the whole of that ticket: the machine's light mode used to re-light the game under a player who had never asked it to, so dicelockgame.com was near-white for anybody on a light Mac. There is no third declaration to add back -- `settings.theme` has no value that leaves the attribute off, so `:root:not([data-theme])` matches nothing after settings.ts has run and only the dark defaults before it. Dice faces, locked, the ability tints and the six role colours are IDENTICAL in both themes and stay in the shared block below: they are the colours of the game's own objects, and a die that changed colour with the page would be a different die. --ink is the text drawn on teal, amber and a die face, so it is dark in both for the same reason. design/foundation/tokens.css is the spec of record for every value here. */ :root, [data-theme="dark"] { --bg: #0c0e12; --panel: #151922; --panel-2: #1c2230; --line: #2a3242; --text: #e8ecf3; /* The body copy under a heading -- help rules, a card's paragraph, the tutorial banner's line, the touch diagram's legend. Those four rules each carried a bare `#c8cfdb` before this was a token, which is exactly the shape that cannot be re-lit. */ --text-2: #c8cfdb; --muted: #8d97ab; --ink: #0b0d12; /* The canvas's own fill and grid. A INHERITS a custom property but cannot be painted by one, so render/renderer.ts reads these two off the element with getComputedStyle rather than the stylesheet drawing them -- which also means any container that pins `data-theme` pins the board inside it, and that is how the landing page's hero stays dark. */ --board-bg: #0a0c10; --board-grid: #161b26; --left: #2dd4bf; --left-dim: #135e58; --right: #f5a524; --right-dim: #6b4a10; /* THE SAME ACCENT, TAKEN DOWN FAR ENOUGH TO BE READ. On white --left is 3.3:1, --right 3.5:1 and --ok 3.8:1 -- the AA bar for LARGE text and a fail for anything smaller, which is most of what this stylesheet sets in them: a 14px help heading, a 13px card title, a 12px stat label. These three are those hues at 5:1 or better against both --panel and --panel-2, and in dark they are the base accent unchanged, so nothing about the shipped theme moved. A BAR, A BORDER, A DIE, A MARK and display type keep the bright one -- the wordmark's LOCK at 40px and a result title at 44px are large text, and being bright is the point of them. scripts/probe-theme-contrast.ts is what found the 3.49:1 heading and is what fails if a new rule sets small text in the base accent (JIO-1061). */ --left-text: #2dd4bf; --right-text: #f5a524; --ok-text: #34d399; /* AND --danger-text, WHICH IS THE ONE OF THESE THAT ALSO MOVES IN DARK (JIO-1081). The other three are the base accent unchanged on a dark page; `--danger` is #ef4444, which is 4.67:1 on `--panel` and **4.22:1 on `--panel-2`** -- and a History row was `--panel-2` everywhere when this was measured, so "Topped out" on every Endless run in the list was under the 4.5 bar in the DARK theme as well as the light one. A row now takes `--card`, which is `--panel-2` on the desktop card and `--panel` on the full-bleed phone screen: the 4.22 is the WORSE of the two surfaces and is still the one this value has to answer, so nothing here moves. It read as passing for two tickets because probe-theme-contrast.ts walked History on a fresh profile, where there are no rows to measure; seeding that walk is what found it (measured 2026-09-13). Red-400 over red-500 in dark, red-700 over red-600 in light: the same hue one rung along, which is what the other three -text values are. A result title at 40px keeps the base accent -- §1's own rule, large text is where being bright is the point. */ --danger-text: #f87171; /* HOW MUCH INK A ROLE COLOUR TAKES BEFORE IT IS READ AS TEXT (JIO-1061). The six role colours, the six dice faces, the risk strip's six levels and the six ability tints are the colours of the game's OWN OBJECTS and are identical in both themes on purpose -- a die that changed colour with the page would be a different die. But the help screen's diagrams also SET WORDS in them: a key cap lettered "Shift" in --role-raise, a legend reading "Risky" in the risk strip's amber. On a dark panel those land between 7:1 and 12:1; on white they land between 1.4:1 and 2.6:1, which is not text at all. scripts/probe-theme-contrast.ts measured every one of them. So the OBJECT keeps its colour and the WORD takes the same hue with half the page's ink mixed into it -- the coding survives, the label is legible, and dark is untouched because the mix is 0% there. It is a percentage rather than two colours because the thing being mixed into differs per call site (a role, a face, an ability), and a token per pairing would be forty of them. ui/sketch.ts reads it the same way for the figure captions it draws from renderer.ts's own constants. */ --legend-mix: 0%; --danger: #ef4444; --ok: #34d399; --card-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 24px rgba(0,0,0,0.35); /* HOW MUCH OF A WORLD THE PAGE WEARS (JIO-1230). Four numbers, all four per-palette, because the same ground does opposite things to the two. `--world-shade` IS THE ONE THAT MATTERS AND IT IS 1 HERE AND 0 IN LIGHT: how much of the compositing's LIGHTNESS survives. On a dark page the whole of it does -- every ground in `config.puzzles.themes` is dark, so 55% of one is a tint of a tint, and the worst run on the darkest screen is 5.41:1 on a card, which a world moves by nothing. On a light page none of it does, and that is a measured rule: `--left` is 3.04:1 on `--bg` against the 3:1 bar large text takes (section 1 of design/foundation/FOUNDATION.md accepts that deliberately), so seven percent of the Workshop's ground put the wordmark's LOCK at 2.66:1 -- under the bar, on the title screen, in five worlds at once. ui/world.ts pulls the light tint back to --bg's own luminance, which makes every ratio on a light page the House's exactly. scripts/probe-theme-contrast.ts is what found it and what holds it: since this ticket it walks every screen once per world in BOTH palettes rather than once in the House. The texture and the motif are dimmed separately because they are different amounts of ink: the texture covers the whole page and the motif is one shape, so a motif at the texture's opacity disappears and a texture at the motif's is a pattern you read instead of a page. */ --world-ground: 0.55; --world-shade: 1; --world-texture: 0.10; --world-motif: 0.16; /* AND THE FOUR THE HOUSE'S OWN SHEET IS DRAWN IN (JIO-1702). The House wears no world, so it has no `--world-ink` to tint and no ground to dim against: the Pips sheet is drawn in resolved colours, and these are them. The near lattice is the page's own `--line`, the hairline every card edge is, at 1.502:1 on `--bg`; the far one is a step under it at 1.121:1, so the parallax is a difference in WEIGHT as well as in size. */ --sheet-near: var(--line); --sheet-far: #161b26; --sheet-left: #25b3a2; --sheet-right: #cf8c1f; } [data-theme="light"] { --bg: #f4f6fa; --panel: #ffffff; --panel-2: #eef1f6; --line: #d5dbe6; --text: #14181f; --text-2: #3a4250; --muted: #5b6578; --ink: #0b0d12; --board-bg: #e6eaf1; --board-grid: rgba(20, 24, 31, 0.06); --left: #0f9f92; --left-dim: #b8ece6; --right: #c07a00; --right-dim: #ffe2ad; --left-text: #0a736a; --right-text: #8a5800; --ok-text: #047857; --danger-text: #b91c1c; --legend-mix: 50%; --danger: #dc2626; --ok: #059669; --card-shadow: 0 1px 2px rgba(20,24,31,0.06), 0 8px 24px rgba(20,24,31,0.08); --world-ground: 0.35; --world-shade: 0; --world-texture: 0.09; --world-motif: 0.14; /* One step UNDER `--line` here rather than on it, and the step is measured: #d5dbe6 on this page's #f4f6fa is 1.285:1 where the dark hairline is 1.502:1, so the light lattice is #c5cdda at 1.479:1 -- the same drawing in both palettes rather than the same token. It is the one place the sheet does NOT follow a world, which is an order of magnitude fainter here (`--world-shade` is 0) because its ink is composited and this ink is chosen. The lit pair stay `--left` and `--right`: a light page is where those two are already the darker of the two sets. */ --sheet-near: #c5cdda; --sheet-far: #e6eaf1; --sheet-left: var(--left); --sheet-right: var(--right); } :root { /* One colour per job a control does, shared by all three help-screen input diagrams (ui/cursorFigure.ts names them, JIO-890). They are here rather than in the diagram that draws them so the keyboard's Reroll and the gamepad's Reroll can never drift apart one tab from each other. Colour is never the only carrier: every control is also lettered and every role is named in the legend beside its swatch. */ --role-move: #60a5fa; --role-swap: #f472b6; --role-reroll: #f5a524; --role-ability: #c084fc; --role-raise: #34d399; --role-pause: #aab4c8; /* One tint per ability id in `CONFIG.abilities.list` (JIO-920), and deliberately NOT part of the six above. Those are CONTROL colours -- one per job a button does -- so `--role-ability` is a single purple for the whole list and can say "this key casts something" but never which thing. These say which, and they are what a BOARD wears while an effect runs on it (JIO-1074), what the meter takes when it rolls, and what the chip and the banner over the board are drawn in -- so the ability is caught in peripheral vision instead of read off a 9px line in a panel. Colour is not the only carrier here either: the meter's glyph box carries the ability's own glyph and the status card names it in words. The pairs that could be confused are the pairs that never share a screen: Row is solo-only and Lock versus-only, so the yellow and the orange are never both castable. A new id in `abilities.list` needs a line here and a mapping rule further down -- test/abilityFeedback.test.js fails on a missing one rather than letting that ability colour nothing at all. */ --ability-cleanse: #38bdf8; --ability-barrage: #f43f5e; --ability-shield: #22c55e; --ability-erase: #a78bfa; --ability-lock: #f97316; --ability-stop: #cbd5e1; /* Hint (JIO-1660) is the seventh, and it is a YELLOW because it is the one ability that marks the board instead of changing it: the mark is two cell outlines drawn over live dice (render/renderer.ts), so the colour has to read against every face at once rather than against the board it tints. Nothing it could be confused with shares a screen with it -- Lock's orange is Versus-only and Hint is the Tower's. */ --ability-hint: #facc15; /* Full clear (JIO-1661) is the eighth, and it is a MAGENTA for the reason Hint is a yellow: nothing it could be confused with shares a screen with it. Erase's violet is the one near neighbour and the two are the pair a player most has to tell apart -- one face gone against every die gone -- so the hue is pushed the whole way to magenta rather than left a shade off the violet. It is also the only ability colour that is never drawn over live dice: the wipe is painted over a board that has already been re-dealt, so what it has to read against is the board's own ground. */ --ability-fullclear: #e879f9; /* Wild (JIO-1662) is the ninth, and it is a LIME because that is the one gap left on the wheel: the eight above spend sky, rose, green, violet, orange, slate, yellow and fuchsia, and the seven FACE colours (render/renderer.ts) spend blue, green, yellow, red, purple, orange and pink. It is the only ability colour that is a DIE BODY rather than a wash, an outline or a chip -- a wild stops wearing a face colour, which is the one thing on a board that has always meant "which face is this" -- so it is read against 2's green and 3's yellow rather than against the board, and it sits between them, 37 degrees off the nearer. */ --ability-wild: #a3e635; /* Transmute (JIO-1663) is the tenth, and it is an INDIGO because the wheel is now spent twice over: the nine above take sky, rose, green, violet, orange, slate, yellow, fuchsia and lime, and the seven face colours (render/renderer.ts) take blue, green, yellow, red, purple, orange and pink. What is left is the blue-violet between Cleanse's sky and Erase's violet, and Erase is the near neighbour that matters -- the two are the pair a player has to tell apart, one face deleted against one face rewritten -- so this is held on the BLUE side of the gap where Erase's #a78bfa is on the purple side. It never shares a screen with Cleanse: a Transmute is the Tower's and a Cleanse over a board with no locked dice is not dealt at all. It is a chip, a banner and an outline and is never painted on the canvas, so renderer.ts does not carry it (the PAINTED list in test/abilityFeedback.test.js is Hint, Full clear and Wild, and that test fails if a fourth hex turns up there). */ --ability-transmute: #818cf8; /* Frost (JIO-1940) is the eleventh, and it is THE ICE'S OWN RIM rather than a gap on the wheel. Every colour since Hint was chosen by elimination, and the hue this one wants is spent three times over: Cleanse has sky #38bdf8, the LEFT PLAYER'S ACCENT has teal #2dd4bf (render/renderer.ts's ACCENT, and an ability token that matched a player's own accent would be the worst of the ten), and face 1 has #5eb0ff. What is left in the blues is the pale cyan the ice is actually DRAWN in -- the rim of `rFrost` in ui/sketch.ts and the crust `drawFrost` paints on a real iced die -- so the token is the thing rather than a colour standing for it. CLEANSE IS THE PAIR THAT MATTERS and the two do share a screen, which no ability colour before this had to answer for: both are Versus and both are about locked dice, one freeing them and one landing dice it cannot free. They are told apart by VALUE and not by hue -- 81% lightness against 60% -- which is the comparison that survives a 300ms board flash. Against Stop's pale slate #cbd5e1, the other light token, it is the saturation: 92% against 25%, a vivid cyan beside something all but neutral. It is a chip, a banner and an outline and is never painted on the canvas, so renderer.ts does not carry it -- the PAINTED list in test/abilityFeedback.test.js is Hint, Full clear and Wild, and that test fails if a fourth hex turns up there. */ --ability-frost: #a5f3fc; /* Scramble (JIO-1941) is the twelfth, and it is a DEEP MAGENTA. Its one near neighbour in hue is Full clear's #e879f9, one degree away -- and the two never share a screen, which is the argument Hint, Full clear, Wild and Transmute were all chosen under: Full clear is the Tower's and a Scramble is Versus's. What it is held against instead is Erase's violet #a78bfa, which IS castable beside it: 38 degrees of hue and 27 points of lightness apart, which is the widest separation any ability colour added since Hint has managed against something on the same screen. It is also held off face 7's hot pink #ff5ec8 (render/renderer.ts, dealt by Endless Hard alone) by 29 degrees and 19 points, because a chip that read as a die body would be the one confusion a wash cannot survive. It is a chip, a banner and an outline and is never painted on the canvas, so renderer.ts does not carry it. */ --ability-scramble: #c026d3; /* Jam (JIO-1942) is the thirteenth, and it is the ONE HUE NOTHING ON A VERSUS SCREEN SPENDS. Every colour since Hint was chosen by elimination and this one has the widest gap any of them has had: what a Versus board can show is Cleanse sky 199, Frost cyan 187, Shield green 142, Erase violet 260, Lock orange 25, Stop slate 213, Barrage rose 350 and Scramble magenta 294, the two player accents are teal 172 and amber 38, and the seven face colours (render/renderer.ts) take 212, 157, 46, 0, 262, orange and 320. That leaves 46 -> 142 empty, and this sits in the middle of it: 48 degrees off face 3's yellow and 48 off Shield's green, the two nearest things that are on screen with it. WILD'S LIME #a3e635 IS THE NEAR NEIGHBOUR, 13 degrees away, and it is the Tower's -- which is the argument Hint, Full clear, Wild, Transmute and Scramble were every one of them chosen under, and Scramble took a hue one degree off Full clear's on it. SHIELD is the pair that does share a screen and the one worth stating: 48 degrees and 13 points of lightness, and the shapes carry it too -- a Shield is a ring around your OWN board and a jam is a chip on theirs. It is a chip, a banner and an outline and is never painted on the canvas, so renderer.ts does not carry it. */ --ability-jam: #8ae047; /* THE EMERGENCY STOP (JIO-1115), and it is deliberately NOT an --ability-* token. The danger-zone rise pause and a cast Stop are the same event to a player -- the board is not rising -- and they used to be the same pixels, one amber zone line for both, so a free reprieve you earned and a whole meter you spent read identically. This is what tells them apart: whitish red against Stop's whitish slate, the same value the danger line's #ef4444 would reach washed out the way that slate is. The name is the rule. Nothing DEALS an emergency stop -- it is not in `CONFIG.abilities.list`, no meter rolls it and the help screen's ability list must never grow a row for it -- so an `--ability-emergency` would have put it in front of every walk over that list (the meter's tinting, the help grid, test/abilityFeedback.test.js's own palette sweep) as an ability that does not exist. It is mapped onto --effect-color by one rule beside the six, further down, which is all the board and the chip ever ask for. render/renderer.ts carries the same colour again as EMERGENCY_HUE, because a canvas cannot be painted by a custom property; the two are held equal by test/abilityFeedback.test.js rather than by memory. */ --rise-emergency: #fecaca; /* HOW LONG A SPENT SHIELD STAYS ON SCREEN (JIO-1075). The charge is gone in the tick that eats a volley, so the chip reading SHIELD · BLOCKED n and the ring around the board are both outliving the thing they name -- the window is ui/feedback.ts's BLOCKED_MS, which owns the clock, and this is the same number where CSS can reach it. It is written here rather than hard-coded into the two animations for the reason --topbar-h is: two copies of a duration drift, and a ring that outlives its chip by 200ms is a shield that looks like it blocked twice. test/abilityFeedback.test.js reads BLOCKED_MS out of feedback.ts and fails when this disagrees with it. */ --blocked-ms: 900ms; /* What the top bar measures, which the fixed element that hangs under it (.tutorial) is positioned from. The coarse-pointer block at the bottom of this file grows the top bar, and it follows from here rather than carrying its own copy of the number (JIO-836). */ --topbar-h: 52px; /* THE FOUNDATION'S TWO FACES (design/foundation/FOUNDATION.md §2, JIO-1062), the same pair and the same fallback stacks web/landing.html already loads, so the page a player lands on and the game they land in are one type system. Bungee is a POSTER face: all-caps by design, unreadable in a paragraph, and never set below 16px -- the smallest role §2 and §5 give it is a button. Nunito Sans carries every sentence. Both are THIS ORIGIN'S OWN FILES since JIO-1300 -- the @font-face rules at the top of this sheet, the woff2 under fonts/ beside it; every fallback here is a system face, so a font that fails to arrive costs the menus their display face and nothing else. --hud-font is the face the GAME wears and it is deliberately unchanged: this ticket retypes the menus and leaves the in-game HUD -- score, clock, the dice-info line, the meter labels -- on the face it was tuned at, where a digit is read at a glance out of the corner of an eye rather than read as prose. */ --display: "Bungee", "Impact", "Haettenschweiler", sans-serif; --font: "Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif; --hud-font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* THE SCALE, and the menus set nothing outside it. Every size on an overlay screen was its own number before this -- forty-odd of them between 9px and 44px, chosen a screen at a time -- which is how a help paragraph came to be 13px and a puzzle tally 11px with nothing to say they were wrong. 14px IS THE FLOOR for anything a player reads, and it outranks the scale's own mono row: §2 lists mono at 13 for times and scores, and every mono run on a menu screen (a date, a duration, a tally, a cap) is something a player reads, so those take --t-small instead. --t-mono is left for the in-game readouts that are genuinely a glance and not a sentence. scripts/probe-landing.ts measures the rendered size of every run of text on the title, help, Settings and opponent screens against the floor (JIO-1062), the way it already does for the landing page (JIO-898). Match settings was the fourth of those until JIO-1068 deleted the screen; the probe kept opening the opponent screen under its label until JIO-1080, which is how Settings -- the screen with the smallest type in the game -- came to be the one menu the floor was never measured on. THE SCALE IS IN rem, AND NOT BECAUSE OF BROWSER ZOOM (JIO-1188). The ticket that converted it asked for rem so that zoom could reach 200%, and that premise is disproven: measured in Chrome on 2026-09-17, a 200% zoom is the CSS VIEWPORT HALVING (390 -> 195) and nothing else -- `font-size: 16px` and `font-size: 1rem` both still compute to 16px, and both are painted twice as large. Zoom has never cared what unit a size is written in, so WCAG 1.4.4 passed here before this change and passes after it. What px actually blocks is the OTHER control, the browser's own default font size (Chrome Settings -> Appearance -> Font size, which a low-vision reader sets once and expects every page to honour). Measured the same day with `--blink-settings=defaultFontSize=32`: the root goes to 32px, a rem size follows it (14 -> 28), and a px size is FROZEN at 14 whatever the reader asks for. That is the accessibility failure this sheet had, and it is the one rem fixes. Every size here is a whole number of px at the default root, so every token is an exact multiple of 1/16rem and the rendered size at the default setting is unchanged to the pixel -- test/type.test.js multiplies each token by 16 and matches it against FOUNDATION §2's table, which still states the scale in px because px is what the artboards are drawn at. The comments below give each role's px size for that reason: it is the number the design is drawn and measured in, and rem is how it is spent. */ --t-hero: 2.5rem; /* Bungee 40/1.05 -- the wordmark, the result title */ --t-h1: 2rem; /* Bungee 32/1.05 -- a screen title */ --t-h2: 1.5rem; /* Bungee 24/1.1 -- a section inside a screen */ --t-card: 1.25rem; /* Bungee 20/1.1 -- a card title, a menu row's name */ --t-lede: 1.125rem; /* Nunito 18/1.5/600 -- the sentence under a screen title */ --t-body: 1rem; /* Nunito 16/1.5/400 -- prose, and a secondary button */ --t-small: 0.875rem; /* Nunito 14/1.4/600 -- small print, and THE FLOOR */ --t-mono: 0.8125rem; /* mono 13 -- a time or a count in the game's own chrome */ --t-mono-md: 0.9375rem; /* mono 15 -- a leaderboard row, and nothing else (design/pages/puzzles/NOTES.md, "times in mono 15"). A board is a COLUMN of times read against each other rather than one number read beside something, so it sits above the glance size and below the readout -- and it is drawn in `text` and never in teal, because on a board of ten the accent is what marks the top three ranks, and a column of teal times would take that mark away (JIO-1090). */ --t-mono-lg: 1.125rem; /* mono 18 -- the Daily's clock, the one in-game number that is the POINT of the screen rather than a readout beside it (design/pages/puzzles/NOTES.md, "the timer sits beside the dots in mono 18 teal"). It is a step ABOVE the scale's mono row and the row was widened here rather than the clock being typed at 18px where it is drawn: §2 is the spec of record and test/type.test.js reads it, so a size that lived only in a rule would be a size the foundation does not know about. */ } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--hud-font); } body { overflow: hidden; /* The page itself never scrolls or zooms: it is a fixed game screen driven by keyboard and gamepad, so a stray drag on a phone must not rubber-band the document, select the HUD text, or double-tap-zoom the board. */ overscroll-behavior: none; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } button { font: inherit; } .app { /* The page's colour is painted HERE as well as on , so that flipping `data-theme` on `#app` in devtools restyles the whole screen and not only the panels on it -- which is the check JIO-1061's acceptance is written as. `body` keeps its own copy for the rubber-band area past the app's box on a phone. `--world-wash` IS THE SAME COLOUR ONE WORLD DEEPER (JIO-1230): the worse of the two composited ground stops, written by ui/world.ts. It is a flat COLOUR and never a gradient on purpose -- scripts/probe-theme-contrast.ts composites a run of text's ancestors to find what is behind it and gives up on the first `background-image`, so a gradient here would have made every measured run in the game unmeasurable without failing anything. The gradient, the texture and the motif are on `.world` below, which is a sibling of the content rather than an ancestor of it. */ background: var(--world-wash, var(--bg)); /* The world sits at z-index -1 INSIDE this box: between `.app`'s own background and everything in it. That only holds while `.app` is a stacking context of its own -- without `isolation`, a negative child escapes to the root's and paints behind the background it is supposed to be in front of. */ position: relative; isolation: isolate; /* dvh, not vh: on a phone 100vh is the viewport with the URL bar retracted, which pushes the footer (and the bottom of the arena) off the screen while the bar is showing. The vh line is the fallback for browsers without dvh. */ height: 100vh; height: 100dvh; display: grid; /* topbar, the step's goal row, the puzzle's moves left (JIO-1908), arena, the puzzle HUD, the replay transport, footer. Every row but the arena is explicit rather than implicit so that a mode which does not draw one (every mode but the Tower for the goal row, every mode but puzzle for the first HUD, everything but a replay for the second, where each is `hidden`) collapses to nothing instead of taking a share of the slack the arena needs (JIO-928, JIO-992, JIO-1272). */ grid-template-rows: auto auto auto 1fr auto auto auto; /* minmax(0, 1fr), not the default auto minimum: an auto track grows to the widest item's min-content, and the footer's nowrap bindings hint has a min-content of ~1069px. That one line of text was what laid the whole page out 1171px wide at a 375px viewport (JIO-833). Every track down the page is floored at 0 for the same reason. */ grid-template-columns: minmax(0, 1fr); gap: 0; } /* THE WORLD BEHIND EVERY SCREEN (JIO-1230). Three layers, low contrast, behind content: the ground gradient out of `config.puzzles.themes`, a repeating texture and one motif in the world's heading colour. Menus, Settings, Records, Endless, Versus, Puzzles and the Tower map all sit on it, because all of them sit inside `.app` and this is the whole of `.app`. NOTHING THE GAME IS PLAYED WITH IS IN HERE. A die, a pip, the cursor and the locked hatch are the game's own objects and do not change with the place -- the rule is written beside the themes in config.ts and probe-puzzles.ts samples both halves of it off the canvas. `color` IS THE WHOLE OF THE WORLD'S PALETTE. The drawing is `currentColor` throughout, so one property tints every stroke in it, and the two groups inside are dimmed separately because a texture and a motif are different amounts of ink (see --world-texture / --world-motif above). */ .world { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; color: var(--world-ink, var(--muted)); background: linear-gradient(180deg, var(--world-top, var(--bg)), var(--world-bottom, var(--bg))); } /* ---- AND THE HOUSE WEARS THE PIPS SHEET (JIO-1702) ------------------------ ~~House -- no world -- and the layer is not merely empty but absent: an empty box still paints its gradient.~~ STILL NO WORLD, NO LONGER EMPTY: `applyWorld()` draws `art/sheets/house.svg` into it for a fresh profile (ui/world.ts). The screen every new player sees first was the only one in the game with nothing behind it. Decision 0101, as amended, is the argument and FOUNDATION section 10 is the drawing's spec and its two contrast bands. `data-world` STAYS OFF, which is what keeps the House a palette: no ground, no `--world-ink`, no transparent menu panel, and every ratio probe-theme-contrast.ts reads on a light page is still the House's own. All three rules below hang off that attribute's ABSENCE, and they are the whole of the difference. 0101's COST IS STILL PAID -- `--bg` over `--bg` is a repaint for nothing -- by the EMPTY layer, which is the state between first paint and the first `applyWorld()`, and by dropping the gradient under the full one. FULL OPACITY, because `--world-texture` and `--world-motif` dim a `currentColor` drawing onto its ground and the sheet is drawn in `--sheet-near`/`--sheet-far`, which are already what it must read at. Dimming is the tuning applied twice. THE FADE IS THE LAYER'S OWN ALPHA, for the reason the scroller further down this file fades that way: a mask composites once, and the drift moves THROUGH it rather than carrying it along. Its stops are px because the tile is px -- a phone and a 1440 desktop get the same quiet band, not the same fraction of a different screen. */ :root:not([data-world]) .world:empty { display: none; } :root:not([data-world]) .world { background: none; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.4) 0, rgba(0,0,0,0.4) 150px, #000 520px); mask-image: linear-gradient(180deg, rgba(0,0,0,0.4) 0, rgba(0,0,0,0.4) 150px, #000 520px); } :root:not([data-world]) .world .texture, :root:not([data-world]) .world .motif { opacity: 1; } .world > svg { display: block; width: 100%; height: 100%; } .world .texture { opacity: var(--world-texture, 0.1); } .world .motif { opacity: var(--world-motif, 0.16); } /* ---- AND THE PLACE MOVES, SLOWLY, AND STOPS DEAD (JIO-1696) --------------- The two groups above drift against each other, and the parallax between two speeds is the whole of the effect. This one layer is BOTH halves of the ticket -- it is the whole of `.app`, so the menus and the arena a board is played in are behind the same rule. Nothing the board does changes it: motion that answered a game event would be saying so, and would then owe a readout that is not motion. docs/decisions/0100 is the argument. `transform` AND NOTHING ELSE. Sliding the ground gradient would repaint the viewport every frame -- the cost the `display: none` above refuses to pay for an EMPTY layer. These two are composited: no JavaScript, no frame callback, and `loop.frameJsP95Ms` in perf-budgets.json measured 3.4ms against its 6 either side of this change (2026-10-06). IT PING-PONGS RATHER THAN SCROLLING. A one-way scroll must travel exactly one pattern tile to arrive back at itself, and across the 27 drawings those tiles are 60 to 220 units tall -- further than the margin below buys. `alternate` with `ease-in-out` has zero velocity at each turn, so there is no seam. THE TRAVEL IS SPENT OUT OF THE SCALE, and the two are owed each other. Every world is a 900x900 viewBox whose `.texture` is a 900x900 rect filling it exactly, so a translate uncovers its own edge -- and it runs INSIDE the scale, so the margin owes travel x scale: 1.12 buys 54 a side against 35.8, the motif's 1.07 buys 31.5 against 21.4. test/world.test.js holds the relation, so JIO-1701 doubling the pace moved the scales too (0100). THE HOUSE'S SHEET BUYS ITS MARGIN THE OTHER WAY (JIO-1702), and it has to: it has no viewBox, its units are device px, and a scale of 1.12 on a 600px window is 36px of margin against 35.84 of travel -- a hairline, and the motif's 20px of HORIZONTAL travel at 1.07 is 21.4 against 13.65 on a 390 phone, which is not a margin at all. So its three rects are `x="-50%" width="200%"`: half a viewport of pattern past every edge, which no travel this layer is allowed can reach. The bound above still holds the keyframes; this is why the sheet is not held to it. AND NEITHER RULE BELOW MAY DECLARE A TRANSFORM OF ITS OWN. `animation: none` leaves an element at what its rule says, so reduced motion is scale 1 at offset 0 -- the frame design/foundation/worlds/ was approved at and the frame scripts/probe-world-art.ts reads all 27 contrast bands from. A base transform here would re-measure every one of them silently. */ .world .texture, .world .motif { transform-box: view-box; transform-origin: 50% 50%; } .world .texture { animation: world-drift 11s ease-in-out infinite alternate; } .world .motif { animation: world-float 15.5s ease-in-out infinite alternate; } @keyframes world-drift { from { transform: scale(1.12) translate(0, 32px); } to { transform: scale(1.12) translate(0, -32px); } } @keyframes world-float { from { transform: scale(1.07) translate(-20px, 15px); } to { transform: scale(1.07) translate(20px, -15px); } } /* THE PAIR (decision 0097, generalised off the Tower's scene onto this layer): test/world.test.js reads the PAIRING off this file and never the count -- a count passes a layer whose newest motion has no variant at all. */ .app.reduced-motion .world .texture { animation: none; } .app.reduced-motion .world .motif { animation: none; } /* ---- THE GUARDIAN'S OBJECT (JIO-1234, canvas §5) ------------------------- A Guardian is a thing on the screen and the fight is read off the thing. Five drawings in `art/guardians/`, one layer, and every state the fight is in arrives here as a `data-` attribute or a custom property that ui/guardianObject.ts wrote -- so the whole of what a fight LOOKS like is in this block and the whole of what it MEANS is in that module. IT BORROWS THE WORLD'S COLOUR AND NOT ITS OWN. `--world-ink` is the floor's heading colour, which is the same ink the emblem in the top bar is drawn in (ui/world.ts) -- so the door, the bench and the vines are the Vault's, the Workshop's and the Greenhouse's rather than five hues chosen here. On the House palette, where no world is worn, it falls back to `--muted` for the world layer's reason: a drawing at full text contrast behind a board is a drawing that competes with the dice. THREE PLACES, AND ONLY ONE OF THEM COSTS THE BOARD ANYTHING. */ .guardian-object { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; color: var(--world-ink, var(--muted)); opacity: var(--guardian-object, 0.38); } /* No fight, no layer. Same rule as the world's, same reason: an empty absolutely-positioned box is a thing the compositor still visits. */ .guardian-object:not([data-object]) { display: none; } .guardian-object > svg { display: block; width: 100%; height: 100%; } /* A `top` object -- the Warden's door, the Foreman's bench -- IS NOT A ROW OF THE PAGE ANY MORE, AT ANY WIDTH (2026-10-02). It was one from JIO-1234: the grid gained a row, chromeHeight() charged it, and a fight's board was drawn a fifth smaller than Endless's under it. George, on the web build: "The board size should not change across any mode", and then, asked what a phone should do with no column to put the door in: draw it behind the board. So `place: 'top'` now says where the drawing stands and never what it costs. OFF A PHONE it is in the column beside the board (`.tower-side`, further down, where its rules are). ON A PHONE it is this same layer every `behind` object uses, pinned to the top of the board instead of centred on the page: the drawing is a 900x240 band, the board covers most of it, and what is left is its top edge behind the goal row and its ends past the board's sides. The health it is cut into is in words in the goal row either way (ui/guardianObject.ts), which is what makes a covered mark a lost picture and not a lost number. `--board-y` is the canvas's own top, published by main.ts's syncMeters() off the box it just sized; 50px is the goal row the drawing's head goes behind. */ .app.compact .guardian-object[data-place="top"] > svg { height: auto; aspect-ratio: 900 / 240; margin-top: max(0px, calc(var(--board-y, 0px) - 50px)); } /* `sides` and `behind` stay at `inset: 0` behind the whole app, which is where the vines' two stems and the eye's rings want to be: the vines grow down from the TOP CORNERS OF THE PAGE, and the eye is behind the board in the glow. */ /* ---- the health, which is the object ------------------------------------- Every object cuts its health into marks -- nine bolts, nine tools, nine lengths of vine, seven stars, five rings -- and a mark that is spent carries `data-gone`, written by ui/guardianObject.ts from the same `guardianHealth()` the header bar's number comes out of. GREY AND STILL THERE, NEVER REMOVED. A bolt that vanished would leave a door with a hole in it and would say the Warden has fewer bolts rather than fewer left; the ticket's word is "snaps grey". The struck tool, the cut vine and the dead star are the same idea -- what a Guardian has lost has to stay countable, which is the whole reason nine of them are drawn. */ .guardian-object [data-mark] { opacity: 1; transition: opacity 320ms ease, stroke-width 320ms ease; } .guardian-object [data-mark][data-gone] { opacity: 0.16; } /* A snapped bolt and a dead star lose their weight as well as their light: at 0.16 alone the nine read as one dim row rather than as five out of nine. */ .guardian-object[data-object="vault-door"] [data-mark][data-gone], .guardian-object[data-object="star-chart"] [data-mark][data-gone] { stroke-width: 2; } /* A tool taken down is off the bench and on its way, so it drops as it fades -- `transform-box: fill-box` because an SVG element's transform origin is the user-space origin otherwise, which would swing it across the page. */ .guardian-object[data-object="workbench"] [data-mark] { transform-box: fill-box; transform-origin: 50% 0; transition: opacity 320ms ease, transform 320ms ease; } .guardian-object[data-object="workbench"] [data-mark][data-gone] { transform: translateY(26px) rotate(8deg); } /* THE HEALTH THAT APPEARS INSTEAD OF FADING (JIO-1442). The Smith's anvil, the Bellringer's bell and the Frost's pillars lose their health as CRACKS, and a crack is a thing that shows up: a `.fissure` is a hairline while it is still to come and full ink once it has opened, so the count left is the hairlines. The Queen's cells are the same idea the other way round -- an empty cell is health, and a spent one fills with honey. */ .guardian-object [data-mark].fissure { opacity: 0.2; } .guardian-object [data-mark].fissure[data-gone] { opacity: 1; } .guardian-object [data-mark].cell[data-gone] { opacity: 1; fill: currentColor; fill-opacity: 0.55; } /* The Pinnacle's flag comes down a notch per mark spent. 14 is the notch pitch in design/foundation/guardians/peak.svg, in its own user units. */ .guardian-object .flag { transform: translateY(calc(var(--g-spent, 0) * 14px)); transition: transform 320ms ease; } /* The constellation's links go out with the star they end at, so a half-dead constellation is a broken figure and not a full one with gaps in it. */ .guardian-object [data-link] { opacity: 0.7; transition: opacity 320ms ease; } .guardian-object[data-spent="1"] [data-link="1"], .guardian-object[data-spent="2"] :is([data-link="1"], [data-link="2"]), .guardian-object[data-spent="3"] :is([data-link="1"], [data-link="2"], [data-link="3"]), .guardian-object[data-spent="4"] :is([data-link="1"], [data-link="2"], [data-link="3"], [data-link="4"]), .guardian-object[data-spent="5"] :is([data-link="1"], [data-link="2"], [data-link="3"], [data-link="4"], [data-link="5"]), .guardian-object[data-spent="6"] :is([data-link="1"], [data-link="2"], [data-link="3"], [data-link="4"], [data-link="5"], [data-link="6"]), .guardian-object[data-spent="7"] [data-link] { opacity: 0.12; } /* ---- the barrage clock, which is the Warden's wheel ----------------------- `--g-arc` is 0 at the last volley and 1 at the next, written every frame from `battle.barrage.ms`. The arc is drawn with `pathLength="100"` in the file, so the dash is that fraction of a hundred and the circle's real circumference never enters into it -- which is what lets the door be redrawn at a different radius without this number moving. */ .guardian-object .arc { stroke: var(--danger); stroke-dasharray: calc(var(--g-arc, 0) * 100) 100; opacity: calc(0.35 + var(--g-arc, 0) * 0.65); } /* THE VOLLEY: the wheel turns, the door cracks, and 700ms later both are gone. `data-volley` is a deadline ui/guardianObject.ts holds off the engine's own `guardianBarrage` event -- the same event the columns' incoming markers are drawn from, so the door cannot crack on a volley the board did not get. */ @keyframes g-spin { to { transform: rotate(360deg); } } .guardian-object[data-volley] .wheel { transform-box: fill-box; transform-origin: 50% 50%; animation: g-spin 700ms cubic-bezier(0.4, 0, 0.2, 1); } .guardian-object .crack { stroke: var(--danger); transition: opacity 400ms ease; } .guardian-object[data-volley] .crack { opacity: 0.9; } /* ---- the Overgrowth's leaves --------------------------------------------- One leaf per barrage, and a big clear near the top burns them all back (ui/guardianObject.ts's BURN_SIZE / BURN_ROWS). They grow in rather than appearing, because the whole point of the Overgrowth's object is that the vine is DOING something while you are not cutting it. */ .guardian-object [data-leaf] { opacity: 0; transform-box: fill-box; transform-origin: 0 50%; transform: scale(0.3); transition: opacity 420ms ease, transform 420ms cubic-bezier(0.2, 1.4, 0.4, 1); } .guardian-object [data-leaf][data-shown] { opacity: 0.85; transform: none; } /* ---- the five rules of the twenty-five-floor climb (JIO-1666) ------------- Each flag below is a `data-` attribute ui/guardianObject.ts holds off an engine event -- never off a reading of the board -- and each selector names the one part group of the one drawing that answers it, which is the leaves' own arrangement: the module writes every flag for every object, and the stylesheet is what decides that only the sluice's water freezes. THE ICE (`iced:n`, the Sexton's crypt and the Tide's sluice). `data-iced` holds for the rule's own seconds, restarted by every volley that carries it. The sluice's water stiffens to a frozen dash and brightens; the crypt's candles gutter down -- and relight when the ice lets go, which is the one thing the Sexton's line promises. 600ms transitions, so the ice SPREADS rather than switches. */ .guardian-object .water, .guardian-object .candles { transition: opacity 600ms ease; } .guardian-object[data-iced] .water { opacity: 0.95; stroke-dasharray: 2 12; } .guardian-object[data-iced] .candles { opacity: 0.35; } /* THE REVEAL (`hidden:n`, the Jester's mirror and the Keeper of the Lamp's lantern). The clear that shows a hidden face is answered for REVEAL_MS: the lamp's flame leaps -- "Borrow my light" -- and the mirror's glass glints. The flame scales about its own foot (`fill-box`, the workbench's reason: an SVG transform origin is the user-space origin otherwise). */ .guardian-object .glass { transition: opacity 400ms ease; } .guardian-object .flame { transform-box: fill-box; transform-origin: 50% 100%; transition: opacity 400ms ease, transform 400ms cubic-bezier(0.2, 1.4, 0.4, 1); } .guardian-object[data-reveal] .flame { opacity: 1; transform: scale(1.3); } .guardian-object[data-reveal] .glass { opacity: 0.8; } /* THE FUSE (`fuse:n`, the Magmaw's vent). `data-fuse` burns for the engine's own `burnMs` and goes out EARLY on the wave that defused it: the vent's smoke thickens while a die is lit, and smoke still thickening past the clear that answered it would say the answer did not work. */ .guardian-object .smoke { transition: opacity 600ms ease, stroke-width 600ms ease; } .guardian-object[data-fuse] .smoke { opacity: 1; stroke-width: 9; } /* THE GROWTH (`grow:n`, the Besieger's trebuchet and the Ringmaster's cage). One `data-load` per volley SENT -- the queue of stones waiting by the engine, the extra hoops winding the cage tighter -- numbered like the leaves and capped by what the drawing carries. They are NOT marks: the health never moves through them. */ .guardian-object [data-load] { opacity: 0; transition: opacity 420ms ease; } .guardian-object [data-load][data-shown] { opacity: 0.85; } /* THE RE-DEAL (`reshuffle:n`, the Dealer's roulette). One turn of the wheel per `guardianReshuffle`, on the Warden's own clock and curve: the wedges ride the spin and the spent pockets ride it with them, so the health reads the same the moment it stops. The marks' own `fill-box` would spin each wedge about itself; the group's box is the whole ring, whose centre is the wheel's. */ .guardian-object[data-shuffle] .wedges { transform-box: fill-box; transform-origin: 50% 50%; animation: g-spin 700ms cubic-bezier(0.4, 0, 0.2, 1); } /* ---- the Leviathan's eye ------------------------------------------------- The pupil follows the CURSOR and not the pointer: every input the game has moves the same cursor, and a pupil that tracked a mouse would be still for the whole of a fight played on a phone. The two numbers are the eye's travel in its own user units, here beside the transform that spends them, so a redrawn eye moves its pupil by editing the picture. */ .guardian-object .pupil { transform: translate(calc(var(--g-pupil-x, 0) * 46px), calc(var(--g-pupil-y, 0) * 34px)); transition: transform 180ms ease-out; } /* THE BLINK IS THE 4+ FEEDBACK ON THIS FLOOR. A refused three shakes the three dice and leaves a white outline (JIO-1233); down here the eye shuts and opens once, which is the object saying the same no. It is 180ms because a blink that outlasted the shake would be answering a second refusal with the first one's lid still down. */ @keyframes g-blink { 0%, 100% { opacity: 0; } 30%, 70% { opacity: 1; } } .guardian-object[data-blink] .lid { stroke: currentColor; animation: g-blink 180ms ease-in-out; } /* A BEATEN GUARDIAN'S OBJECT GOES OUT WITH IT. The chain that crossed the bar is still settling (SPEC §20), so there are a dozen frames after the last mark snaps in which the object is still on screen -- and an object at full strength over a board that has already won reads as a fight still running. */ .guardian-object[data-dead] { opacity: calc(var(--guardian-object, 0.38) * 0.4); transition: opacity 600ms ease; } /* ---- less motion --------------------------------------------------------- A player who asked for less motion gets the same OBJECT and none of its movement: the marks still go out, the arc still grows (it is a clock, and a clock that did not move would be the one readout on the screen that lies), and the three things that MOVE rather than change -- the wheel's spin, the tool's drop, the leaf's pop -- are cut to a change of state. The eye still blinks: a blink IS the feedback here, and dropping it would leave a refused three with no answer at all on this floor. It is stepped rather than eased, which is the same bargain the refused shake takes (render/renderer.ts). */ .app.reduced-motion .guardian-object [data-mark], .app.reduced-motion .guardian-object [data-leaf], .app.reduced-motion .guardian-object [data-link], .app.reduced-motion .guardian-object [data-load], .app.reduced-motion .guardian-object .pupil, .app.reduced-motion .guardian-object .water, .app.reduced-motion .guardian-object .candles, .app.reduced-motion .guardian-object .glass, .app.reduced-motion .guardian-object .flame, .app.reduced-motion .guardian-object .smoke, .app.reduced-motion .guardian-object .flag { transition: none; } .app.reduced-motion .guardian-object[data-volley] .wheel { animation: none; } /* The re-deal's spin is a MOVE and is cut like the wheel's; the frozen water, the guttered candles, the thickened smoke, the glint and the waiting stones all SURVIVE as changes of state, because each is the one thing on its floor saying what the Guardian just did. The flame keeps its flare's light and loses its leap. */ .app.reduced-motion .guardian-object[data-shuffle] .wedges { animation: none; } .app.reduced-motion .guardian-object[data-reveal] .flame { transform: none; } .app.reduced-motion .guardian-object[data-object="workbench"] [data-mark][data-gone] { transform: none; } .app.reduced-motion .guardian-object [data-leaf][data-shown] { transform: none; } .app.reduced-motion .guardian-object[data-blink] .lid { animation: g-blink 180ms steps(1, end); } /* EVERY ROW IS PLACED EXPLICITLY, so that hiding one does not move the rest (JIO-1064). `display: none` takes an element out of grid FLOW, and with auto-placement the tracks are then handed out to whatever is left, in order: taking the top bar off a menu screen moved the arena into the `auto` track and the FOOTER into the `1fr`, which stretched a 28px bar to 39 and resized the board under it. Three of these five are `display: none` in most modes, so auto-placement was only ever safe because the two that are not happened to sit above them. An empty track collapses to 0 and costs nothing. */ .topbar { grid-row: 1; } .step-goal { grid-row: 2; } .puzzle-count { grid-row: 3; } .arena { grid-row: 4; } .puzzle-hud { grid-row: 5; } .replay-hud { grid-row: 6; } .footer { grid-row: 7; } .topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; padding: calc(8px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 8px calc(16px + env(safe-area-inset-left)); border-bottom: 1px solid var(--line); background: var(--panel); } /* THE HOME LINK IS THE 24px MARK (JIO-1063), not the text "jiolab.dev". It has no colour and no font size any more, which is why the compact rules below no longer shrink it -- the mark is the smallest it is ever drawn at already. */ .topbar .home { display: inline-flex; align-items: center; flex: 0 0 auto; text-decoration: none; } .topbar .home img { display: block; width: 24px; height: 24px; } .topbar .home:focus-visible { outline: 2px solid var(--left); outline-offset: 3px; border-radius: 6px; } .match-info { font-size: 0.875rem; color: var(--muted); display: flex; gap: 8px; align-items: center; } .match-info .clock { font-family: var(--mono); color: var(--text); min-width: 4ch; text-align: center; } .match-info .clock.sudden { color: var(--danger); } /* ~~THE TOWER'S TARGET BAR, in the clock's slot and in the clock's mono face: `412 / 600` over a 64px track~~ (JIO-1232). The readout is a ROW of its own now and its rules are with `.step-goal` further down this file (JIO-1272). The struck paragraph stays because the 64px was argued for -- "a track that grew with the bar would be a different picture of the same score at two widths" -- and that argument is still true of anything put back in this slot; what changed is that the slot was the wrong place for the one rule a step is played against. `hidden` HAS TO WIN over the `display` this rule sets, the same trap `.deck[hidden]` carries a comment about: the UA's `[hidden] { display: none }` loses to any authored `display`, so without this a Guardian fight drew the step's target bar under the Guardian's health bar (JIO-1233). */ .match-info .guardian[hidden] { display: none; } /* WHO YOU ARE FIGHTING (JIO-1233, canvas §5, emptied by JIO-1272): the emblem and the name, beside the floor line. The health that used to hang off this readout is in the goal row below the bar, at a step's target's own size. */ .match-info .guardian { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .match-info .g-emblem { display: flex; line-height: 0; color: var(--world-ink, var(--danger)); } .match-info .g-emblem svg { display: block; } /* The name in the display face, and TRUNCATED rather than wrapped: the top bar wraps as a row, and a Guardian whose name took two lines would push the chip row and the board down by the height of one of them mid-fight. */ .match-info .g-name { font-family: var(--display); font-weight: 400; font-size: 0.8125rem; line-height: 1.1; letter-spacing: 0.04em; color: var(--world-ink, var(--text)); max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* THE STEP'S GOAL ROW (JIO-1272): a row of the page between the top bar and the board, carrying the one rule a Tower step is played against. WHY IT IS A ROW AND NOT A SLOT IN THE BAR. The readout was a 64px track four pixels tall in the clock's slot with `412 / 600` in 12px mono beside it -- "It took me a while to even find it" (George, 2026-09-18) -- which made the whole rule of the mode the least visible thing on the screen. Prominence is the deliverable here, so the score is drawn at 1.75rem in the display face: the size `.score-line` gives the board's own score on a phone, which is the biggest number the game draws outside a result card, and the floor this ticket asks for ("at least the size of the board's score"). THE ROW STAYS OFF A PHONE. It is the step's rule and not a phone accommodation, so there is no `.compact` gate anywhere in this block. THE WIDTH IS THE BOARD'S OWN GUTTER and not the readout's: the same horizontal padding `.arena` carries, safe-area insets and all, so the track runs the width the board is laid out in rather than 64px of the middle of the bar. `.arena` narrows that gutter from 24 to 12 under 1100px and this row is in the same rule, or the track would hang 12px past the board on each side on every phone -- which is the one width the ticket was written about. ONE GEOMETRY, ~~TWO~~ THREE READOUTS, NEVER TWO AT ONCE. `#info-target` counts UP to a step's target, `#guardian-goal` counts a Guardian's health DOWN to zero, and `#duel-goal` counts the rows of the Guardian's OWN board (JIO-1725) -- three readings of one rule, so they are the same big number, the same goal phrase and the same 10px track, because a fight drawn at a different height would re-proportion the board between a step and a fight. What differs is the direction and the colour: the first two carry theirs on `.drains` below and the duel's are on `.duel`. ui/hud.ts's setTower() is still the one place that decides which is on screen. THE DUEL STRIP ADDS NO ROW, and that is the rule above honoured rather than quoted: its twelve segments ARE the track and the meter the fight's words are cast off fills the chip that names the next one, so the strip is one line and one track like the other two. A second track would have been 14px off the board on every phone (SPEC §20: the board is one size in every mode). */ .step-goal { display: flex; flex-direction: column; padding: 8px calc(24px + env(safe-area-inset-right)) 0 calc(24px + env(safe-area-inset-left)); } /* `hidden` has to win over the `display` above, the trap `.deck[hidden]` and the readouts in the top bar both carry a comment about. */ .step-goal[hidden], .step-goal .goal[hidden] { display: none; } .step-goal .goal { display: flex; flex-direction: column; gap: 4px; } .step-goal .goal-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } /* NEITHER WORD WRAPS, and that is the layout order rather than taste: the row is measured as chrome BEFORE the board is sized and capped to the board's width AFTER, so a row whose height could change with its width would size the board against a row that is about to move. One line and a 10px track, at every width. */ .step-goal .goal-score, .step-goal .goal-want { white-space: nowrap; } /* THE HELD POWER-UPS' TOKENS, AT THE RIGHT END OF THE LINE ABOVE (JIO-1899, canvas board 5), and on a phone only: off one this row is a card beside the board and the chip row under it names the same power-ups. OUT OF FLOW, AND THAT IS GEORGE'S ONE CONDITION ON THE DESIGN (2026-10-16): the board is the same size with tokens as without, on every layout. The button is absolutely placed over the row's first line, its content box exactly that line's 1.75rem (`.goal-score`'s line-height 1), and the line makes room with a HORIZONTAL padding -- 30px a token, the 24px ring and its gap -- so nothing here can add a pixel to the height chromeHeight() measures. Its 8px above and below is the row's own top padding and the track's gap: a 44px target that overlaps nothing but the track's picture. `right` is the row's own gutter, which is 24px and 12px under 1100px (the `@media` below says it twice). NOT SCOPED TO THE PHONE'S CLASS, which is this row's own rule (test/towerScreens.test.js): what takes the tokens off the desktop is the column the row is moved into, `.tower-side`. */ .step-goal { position: relative; } .step-goal .goal-line { padding-right: calc(var(--goal-tokens, 0) * 30px); } .goal-tokens[hidden], .tower-side .goal-tokens { display: none; } .goal-tokens { position: absolute; top: 0; right: calc(24px + env(safe-area-inset-right)); box-sizing: content-box; height: 1.75rem; padding: 8px 0 8px 6px; margin: 0; display: flex; align-items: center; gap: 6px; border: 0; background: none; color: inherit; cursor: pointer; } /* ~~FULL BOARD WIDTH OFF A PHONE~~ -- off a phone this is not a row at all any more: main.ts's placeTowerReadouts() moves it into the column beside the board, and its rules there are with `.tower-side` further down this file. The row cost the board a cell in ten at 1440x900 and the board is one size in every mode there now (docs/decisions/0038). */ .step-goal .goal-score { font-family: var(--display); font-weight: 400; font-size: 1.75rem; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; } /* The goal, in the map's own words and the world's own ink -- "REACH 450" is what the lit die on ui/towerMap.ts says over the step you are standing on, and a player arrives here from that screen. */ .step-goal .goal-want { font-family: var(--display); font-weight: 400; font-size: 0.875rem; line-height: 1.1; letter-spacing: 0.06em; color: var(--world-ink, var(--left)); text-align: right; } /* 10px, where the bar's track was 4. The ticket's floor is 8 and the two extra pixels are the radius: a 8px track with a 4px radius reads as a lozenge at the ends and as a bar in the middle. */ .step-goal .goal-track { height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; } .step-goal .goal-fill { display: block; height: 100%; width: 0; background: var(--left); border-radius: 5px; } /* MET IS SAID AND NOT ONLY DRAWN. The bar is full for the whole of the settle that ends the step (SPEC §20), and the one instant a step is won has to read differently from the dozen frames before it. The old readout carried that in `font-weight: 700` over its colour; the display face has ONE weight, so the word carries it instead -- ui/hud.ts writes REACH 450 / REACHED and DEFEATED, which is a state a palette cannot take away. */ .step-goal .goal.met .goal-score, .step-goal .goal.met .goal-want { color: var(--world-ink, var(--left)); } .step-goal .goal.met .goal-fill { background: var(--world-ink, var(--left)); } /* A GUARDIAN'S HALF DRAINS (JIO-1233, moved here by JIO-1272), so its fill is anchored RIGHT -- it empties towards the number counting down with it rather than away from it -- and starts full rather than empty. The fill's colour is written inline by ui/hud.ts from ui/guardian.ts's amber-to-red mix: the fraction is continuous, so a threshold in a stylesheet would say "close" once instead of all the way down. */ .step-goal .goal.drains .goal-fill { width: 100%; margin-left: auto; background: #f59e0b; } .step-goal .goal.drains.met .goal-score, .step-goal .goal.drains.met .goal-want { color: var(--danger); } /* ---- A BOUNTY'S ROW (JIO-1793) -------------------------------------------- THE CALLED FACE'S DIE, before the count it is the unit of. It sits on the line's own baseline at the figure's cap height rather than at its full line-box: the figure is display type at 1.5rem and a 22px die hung off the top of it would push the row taller, and this row is a row of the grid main.ts's chromeHeight() measures. `flex: none` because everything else on the line grows and this is 22px whatever the width is. */ .step-goal .goal-count { display: inline; white-space: nowrap; } /* THE TRACK AS A ROW OF SEGMENTS, which is the duel strip's shape below and is the same 10px at the same radius, so a bounty step and every other board are one row at one height. A chain's waves and a big one's matches are counts of between one and six: lighting them one at a time says how many are left, where a fill at 1/3 says only "some". The gaps are 2px, the duel's own. UNLIT IS THE TRACK'S OWN `--line` and not a dimmed accent, for the duel's reason: a step with nothing done yet should read as nothing done at a glance rather than as a bar at 8%. */ .step-goal .goal.segmented .goal-track { display: flex; gap: 2px; background: none; overflow: visible; } /* THE BAR GOES BY THE `hidden` ATTRIBUTE and not by the `.segmented` class, which is `.step-goal`'s own rule and a test (test/towerScreens.test.js): every selector in this file that takes part of this row off the page keys on the attribute ui/hud.ts writes rather than on a width or a state, so the row can never be hidden by a viewport again. The explicit rule is needed because `.goal-fill` sets `display: block`, which wins over the UA stylesheet's own `[hidden]`. */ .step-goal .goal-fill[hidden] { display: none; } .step-goal .goal.segmented .goal-track > i.seg { flex: 1 1 0; min-width: 0; height: 100%; border-radius: 2px; background: var(--line); } .step-goal .goal.segmented .goal-track > i.seg[data-full] { background: var(--left); } /* Met is the row's own word AND the colour the other branches take, which keeps the one instant a step is won reading differently from the frame before it on this branch too. */ .step-goal .goal.segmented.met .goal-track > i.seg[data-full] { background: var(--world-ink, var(--left)); } /* ---- A PUZZLE STEP'S RINGS (JIO-1797) ------------------------------------- The segmented branch read the other way: those segments are PROGRESS and light up, where a puzzle's budget is SPENT -- so its one to three are slots that get used, as wide as they are tall rather than stretched across the row (a 10px bar the width of the screen over a budget of one is 0% or 100% and never anything else). UNLIT IS A RING AND NOT A BLOCK: `--line` at 2px with nothing inside says "a move you still have". design/pages/tower/NOTES.md. */ .step-goal .goal.rings .goal-track { display: flex; gap: 4px; background: none; overflow: visible; justify-content: flex-start; } .step-goal .goal.rings .goal-track > i.seg { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: none; border: 2px solid var(--line); box-sizing: border-box; } .step-goal .goal.rings .goal-track > i.seg[data-full] { background: var(--left); border-color: var(--left); } .step-goal .goal.rings.met .goal-track > i.seg[data-full] { background: var(--world-ink, var(--left)); border-color: var(--world-ink, var(--left)); } /* A BUDGET SPENT WITH DICE STILL STANDING is the puzzle HUD's own red: the dots under the board go red on `puzzleStuck` and this row carries the same state, because UNDO OR RESET is what both are telling the player. */ .step-goal .goal.rings.spent .goal-track > i.seg[data-full] { background: var(--danger); border-color: var(--danger); } .step-goal .goal.rings.spent .goal-want { color: var(--danger); } /* ---- THE DUEL STRIP (JIO-1725) ------------------------------------------- A Guardian plays a board of its own and that board is UNDRAWN -- `.side.right` is `display: none` in this mode, so the player's board keeps the one size every mode draws it at -- but for a portrait phone's window (JIO-1818). These twelve segments are therefore not a decoration beside a grid; they are the only reading of that grid there always is, one per row of it, lighting from the FOOT up because that is the direction a stack grows. THE GAPS ARE 2px AND THE TRACK IS THE SAME 10px, so a fight and a step are the same row at the same height. Unlit is the track's own `--line`, which is what makes a nearly-empty board read as empty rather than as a bar at 8%: the Guardian is in no trouble and the strip should say so at a glance. */ .step-goal .goal.duel .goal-track { display: flex; gap: 2px; background: none; overflow: visible; } .step-goal .goal.duel .goal-track > i { flex: 1 1 0; min-width: 0; height: 100%; border-radius: 2px; background: var(--line); } /* AMBER AT THE FOOT AND RED AT THE TOP, which is the health bar's own mix read the other way (ui/guardian.ts's HEALTH_FULL / HEALTH_LOW): red means the Guardian is nearly finished, there as here. Per-segment and in the stylesheet rather than written inline per frame, because a segment is either lit or it is not -- the same quantisation the object's marks are drawn under -- so there is no continuous fraction for a style attribute to carry. */ .step-goal .goal.duel .goal-track > i[data-full] { background: #f59e0b; } .step-goal .goal.duel .goal-track > i:nth-child(n+8)[data-full] { background: #ef4444; } .step-goal .goal.duel.met .goal-score, .step-goal .goal.duel.met .goal-want { color: var(--danger); } /* THE CAST METER IS THE CHIP. The word the Guardian's meter has rolled, with the meter itself filling behind it -- so WHAT is coming and HOW SOON are one readout in the space of one, which is what keeps this strip to a single line. `--cast` is the only thing ui/hud.ts writes per frame. */ .step-goal .goal.duel .goal-cast { font-family: var(--display); font-weight: 400; font-size: 0.75rem; line-height: 1.1; letter-spacing: 0.08em; white-space: nowrap; color: var(--muted); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); background: linear-gradient(to right, color-mix(in srgb, #f59e0b 28%, transparent) var(--cast, 0%), transparent var(--cast, 0%)); } .step-goal .goal.duel .goal-cast[hidden] { display: none; } /* HELD, AND IT IS SAID RATHER THAN ONLY FILLED: a full meter is the one state of this chip a player has to be able to act on -- it is the next thing that happens to their board -- and a bar that merely reached its own end reads like a bar at 95%. The border and the ink carry it, which is a palette and a colour-blind eye's two carriers rather than one. */ .step-goal .goal.duel .goal-cast.ready { color: var(--text); border-color: #f59e0b; } /* THE MUTATION CHIP ROW (JIO-1233). ~~ON A PHONE, a second LINE OF THE TOP BAR -- 100% basis in a wrapping `.topbar` -- so the rules of the fight are legible for the whole of it without a word being laid over a die~~ -- **ON A PHONE IT IS CLIPPED AND DRAWN NOWHERE (JIO-1783, 2026-10-08)**: a line of that bar is a line off every Tower board, and asked to choose between the two George took the board ("just remove the explanatory pills because that is affecting the height in tower mode"). The rule the first sentence is about still holds and is why the row cannot simply move onto the board instead (design/pages/gameplay/NOTES.md Revision 3, and SPEC §20's rule for a Guardian): nothing may be laid over a die, so a phone reads the fight's rules on the Guardian's sheet and the floor's briefing BEFORE the board, and the clipped row keeps them for a screen reader during it. The declarations below are the row as it is drawn OFF a phone, in the column beside the board (`.tower-side`), where it costs the board nothing. ~~The bar's width and not the readout's: inside `.match-info` the row had ~184px at a 390px phone and two chips wrapped onto two lines.~~ */ .guardian-chips { flex: 1 0 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 4px; } .guardian-chips[hidden] { display: none; } .guardian-chips .g-chip, .gs-chips .g-chip, .tb-board-chips .g-chip { font-family: var(--display); font-weight: 400; font-size: 0.6875rem; line-height: 1; letter-spacing: 0.06em; padding: 5px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); background: none; } /* A TOOL THE FIGHT TOOK AWAY is the danger outline, and it is the same red the hatched deck key and the hatched meter wear: one colour for "this is gone", said on the control and in the row that names it. */ .guardian-chips .g-chip[data-kind="taken"], .gs-chips .g-chip[data-kind="taken"], .tb-board-chips .g-chip[data-kind="taken"] { border-color: var(--danger); color: var(--danger); } /* The barrage is the one chip whose text changes during the fight: it counts down to the next volley, and it goes SOLID for the 1.5 s the volley spends in the air. Solid rather than flashing, because the markers over the columns are already pulsing and two rhythms for one event is one of them being read as something else. */ .guardian-chips .g-chip[data-kind="sent"], .gs-chips .g-chip[data-kind="sent"], .tb-board-chips .g-chip[data-kind="sent"] { border-color: var(--danger); color: var(--danger); font-variant-numeric: tabular-nums; } .guardian-chips .g-chip[data-kind="sent"][data-warning="1"] { background: var(--danger); color: #0b0d12; } /* THE FLOOR'S POWER-UP, AND IT IS THE ONE CHIP IN THE ROW ON THE PLAYER'S SIDE (JIO-1758). The three above it are what the floor and its Guardian do TO the board and they are all the danger red; this one is SOLID in the floor's own ink, which is the token applyWorld() writes for the place the board is being played in -- so the chip is in the world's style without this rule naming a single world. `--left` is the fallback for the one case there is no world: the debug panel's jump, which deals a step with no floor dressing on the page. ~~SOLID RATHER THAN OUTLINED~~ -- TINTED AND IN ITS FAMILY'S COLOUR SINCE JIO-1899, one chip per held power-up with its glyph at the head. A row of three solid pills in one shared ink said "three things you hold" and not which; the family is the colour the reveal card and the token wear, so the chip is the token's name said aloud. It still reads apart from the danger chips: those are an outline in red, and this is a FILL -- the held-thing carrier the barrage chip uses for its volley in the air. `--world-ink` is the fallback for an id with no family. A COUNT IS WHAT IS LEFT THIS BOARD (Shield, Second Wind, Spare Rerolls), and at 0 the chip dims for the rest of the board; the engine refills it on the next one. */ .guardian-chips .g-chip[data-kind="gift"], .gs-chips .g-chip[data-kind="gift"], .tb-board-chips .g-chip[data-kind="gift"] { --pu: var(--world-ink, var(--left)); display: inline-flex; align-items: center; gap: 5px; border-color: var(--pu); background: color-mix(in srgb, var(--pu) 16%, transparent); color: var(--pu); } .g-chip[data-kind="gift"] .pu-glyph { flex: none; } .g-chip[data-kind="gift"] .g-count { font-variant-numeric: tabular-nums; } .g-chip[data-kind="gift"][data-spent] { opacity: 0.4; } /* THE TOKEN (JIO-1899): ui/powerUpLook.ts's `powerUpToken()`, the one small drawing of a held power-up -- on the map's pill, in the phone's goal row and down the sheet. `--pu` is the family's colour, set off the same four tokens `.tower-powerup[data-family]` sets the reveal card's off, so a token and its card are one colour. The badge is what is left this board, and a token at 0 dims for the rest of it. */ .pu-token, .g-chip[data-kind="gift"][data-family="board"] { --pu: var(--left); } .pu-token[data-family="kit"], .g-chip[data-kind="gift"][data-family="kit"] { --pu: var(--right); } .pu-token[data-family="guard"], .g-chip[data-kind="gift"][data-family="guard"] { --pu: var(--role-move); } .pu-token[data-family="foe"], .g-chip[data-kind="gift"][data-family="foe"] { --pu: var(--role-ability); } .pu-token { position: relative; flex: none; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: var(--pu-size, 24px); height: var(--pu-size, 24px); border-radius: 50%; border: 2px solid var(--pu); color: var(--pu); background: color-mix(in srgb, var(--pu) 13%, transparent); } .pu-token[data-spent] { opacity: 0.35; } .pu-token .pu-count { position: absolute; right: -6px; top: -5px; box-sizing: border-box; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font-family: var(--hud-font); font-style: normal; font-weight: 800; font-size: 0.625rem; line-height: 12px; text-align: center; font-variant-numeric: tabular-nums; } /* THE MAP'S PILL (JIO-1899): what the floor you are standing on holds, under the floor head, and the door to the sheet. A floor with nothing drawn yet has no pill at all rather than an empty one. */ html .app .overlay .panel .menu button.tower-active { flex: none; display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; align-self: flex-start; min-height: 44px; padding: 6px 12px 6px 8px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--panel); color: var(--text); font-family: var(--hud-font); font-weight: 800; font-size: 0.75rem; letter-spacing: 0.04em; cursor: pointer; } html .app .overlay .panel .menu button.tower-active .tower-active-more { margin-left: 4px; color: var(--muted); } /* THE SHEET (JIO-1899): one row per held power-up -- the token, the name, the effect sentence and what is left -- then the footer that says how long it all lasts. The row is the design's `srow`: a card of its own in the sheet. */ .pu-rows { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; } .pu-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--text) 6%, transparent); } .pu-row .pu-row-body { display: grid; gap: 2px; min-width: 0; text-align: left; } .pu-row .pu-name { font-family: var(--display); font-weight: 400; font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--text); } .pu-row .pu-effect { font-size: 0.75rem; line-height: 1.35; color: var(--muted); } .pu-row .pu-left { margin-left: auto; flex: none; max-width: 9ch; text-align: right; font-family: var(--hud-font); font-weight: 800; font-size: 0.6875rem; line-height: 1.2; color: var(--pu, var(--text)); } .pu-row[data-family="board"] { --pu: var(--left); } .pu-row[data-family="kit"] { --pu: var(--right); } .pu-row[data-family="guard"] { --pu: var(--role-move); } .pu-row[data-family="foe"] { --pu: var(--role-ability); } .pu-row[data-spent] .pu-left { color: var(--muted); } .pu-foot { text-align: center; } /* The floor's rise, as a chip: the one number that says how fast this board climbs, and it does not change for the length of the step (SPEC §20). */ .match-info .rise-chip { font-size: 0.75rem; font-weight: 700; line-height: 1; padding: 3px 6px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); } /* THE VOLLEY-GROWTH CHIP (JIO-1540) IS THE SAME CHIP, in the same slot: from 2:00 every Versus volley carries an extra locked die and one more a minute (SPEC §9, JIO-1536), and the player has to be able to see it. It is one shape rather than two because the two can never collide -- the rise chip is a Tower floor's and this is Versus's -- so the only rules below are the number and the step. ONLY THE STEP IS COLOURED. The chip rests in chrome neutral because the growth is symmetric -- both boards send more -- and a chip in either side's accent would read as that side's; what CHANGED is worse, so the change is red and the readout is not. It fills for a second at 2:00 and at every minute after, in place: no banner, which is the Shield chip's rule (gameplay NOTES.md Revision 4) applied to the one other readout that changes mid-match. It does not ramp: `+10` is the same chip as `+1`. The fill is `--danger` under #0b0d12, which is the solid the Guardian's own sent chip already wears twenty lines above -- one "this is arriving" colour, said the same way in both places. */ .match-info .growth-chip b { color: var(--text); font-weight: inherit; } .match-info .growth-chip.step { background: var(--danger); border-color: var(--danger); color: #0b0d12; transition: none; } .match-info .growth-chip.step b { color: inherit; } /* Coming OUT of the step is the animated half, and it is a fade of colour and not a movement -- so what reduced motion drops is the fade, leaving the fill and its return as two steps. The number is untouched either way, which is the part a player who turned the animation down still has to be able to read. */ .match-info .growth-chip { transition: background-color 400ms ease, border-color 400ms ease, color 400ms ease; } .app.reduced-motion .match-info .growth-chip { transition: none; } .topbar-controls { display: flex; gap: 6px; } .topbar-controls button, .menu button, .debug button { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 6px 12px; cursor: pointer; } .topbar-controls button:hover, .menu button:hover { border-color: var(--muted); } .topbar-controls button:focus-visible, .menu button:focus-visible, .debug button:focus-visible, .debug input:focus-visible, .debug select:focus-visible { outline: 2px solid var(--left); outline-offset: 2px; } /* THE SPEAKER IS THE CHROME BAR'S GLYPH (JIO-2049): muted-coloured in both states, as §4 draws it on every menu page, and the glyph itself says which state -- sound-on or sound-off, swapped by ui/hud.ts. ~~The word Sound, struck through when off~~ went with the ticket. A square target, 36px here and the 44px floor on a coarse pointer (the media query at the foot). */ .topbar-controls .bar-icon { width: 36px; min-width: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); } .topbar-controls .bar-icon .glyph { display: block; } .topbar-controls .bar-icon:hover { color: var(--text); } .app.compact .topbar-controls .bar-icon { padding: 0; } /* The touch deck. Tapping the board moves the cursor and swaps (JIO-835); these are the actions a finger has nowhere else to go, so they need real controls. Since JIO-1072 it is THREE buttons -- Reroll L, Raise, Reroll R -- and it is a row under the board in both phone shapes as well as under the boards on a wide screen, so layout() counts its height in all of them. ~~The two `.deck-group` boxes (JIO-923) are gone with the two buttons they existed to separate.~~ They were a box only in the landscape shape, where three buttons went along the bottom edge and Ability and Pause stacked up the side; the layout ticket moved Ability onto the meter and Pause into the top bar, so there is one run of three in every shape and nothing left to group. The note is struck rather than deleted because `display: contents` on a wrapper is the obvious thing to reach for again the next time a deck grows, and the reason it is not needed here is the deck's size. */ .deck { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .deck[hidden] { display: none; } /* or the display above outranks the attribute */ .deck button { background: var(--panel-2); color: var(--text); font: inherit; font-size: 0.8125rem; border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; /* 44px is the smallest control a thumb hits without aiming, and this deck is only ever used by a thumb. */ min-height: 44px; min-width: 64px; cursor: pointer; /* The press belongs to the game: no scroll, no double-tap zoom, no text selection, and no 300ms blue flash over a button being held down. */ touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } /* RAISE IS NOT ONE OF THREE EQUAL BUTTONS (JIO-1072, Gameplay NOTES.md Rev 3). It wears the raise ROLE colour -- the same `--role-raise` the keyboard diagram tints Shift and Space with, so the green means one thing across the whole game -- with a 2px border, a 13% fill and an up-chevron over the word. Height and width are the phone's and live in the compact block below; the colour is here because it is the button's identity in every shape. The chevron is CSS and not an inline so the button's text node stays the label alone: TOUCH_LABELS, the README's drawing and the test helper all read it, and an in front of the word breaks every one of them. */ .deck-raise { --raise: var(--role-raise); border-width: 2px !important; border-color: var(--raise) !important; background: color-mix(in srgb, var(--raise) 13%, transparent) !important; color: var(--raise) !important; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } .deck-raise::before { content: ''; width: 10px; height: 10px; border-top: 2.5px solid currentColor; border-left: 2.5px solid currentColor; border-radius: 1px; transform: rotate(45deg) translate(1px, 1px); } /* Held is a state the player has to be able to see: `raise` is a hold, and a thumb covers the button it is holding. */ .deck button.held { border-color: var(--left); background: var(--left-dim); color: var(--text); } .deck-raise.held { background: color-mix(in srgb, var(--raise) 34%, transparent) !important; color: var(--text) !important; } .deck button:focus-visible { outline: 2px solid var(--left); outline-offset: 2px; } /* A TOOL A GUARDIAN HAS TAKEN AWAY IS DRAWN, NOT HIDDEN (JIO-1233, canvas §5). `noRerolls` strikes both deck keys through and hatches them; `noAbilities` hatches the meter, which then never fills because the engine never charges it (engine/battle.ts). Present and struck rather than removed, for the reason the ticket gives and the reason the deck is five controls in every shape: a control that VANISHED would be a deck that re-flows mid-climb, and a player who reached for Reroll L would learn nothing about why the board did not move. THE HATCH RUNS THE SAME WAY A LOCKED DIE'S DOES (render/renderer.ts draws it top-right to bottom-left, and the refusal's bar deliberately runs the other way): "this is locked" is one diagonal across the whole game. The button is NOT disabled. `engine/board.ts` refuses the reroll by name and `render/renderer.ts` draws the refusal where the cursor is (JIO-1203), which is the answer to "why did nothing happen" -- and a `disabled` button gives a thumb no event at all and drops out of the tab order the touch probe walks. */ .app.no-rerolls .deck-roll, .app.no-abilities .meter-track { background-image: repeating-linear-gradient( -45deg, color-mix(in srgb, var(--danger) 26%, transparent) 0 4px, transparent 4px 9px ); } .app.no-rerolls .deck-roll { border-color: var(--danger); color: var(--muted); text-decoration: line-through; } .app.no-abilities .meter-track { border-radius: 999px; } .app.no-abilities .meter-box { border-color: var(--danger); color: var(--muted); } .app.no-abilities .meter-pct { text-decoration: line-through; } /* A FLOOR WHOSE KIT NAMES NO ABILITY HAS NO METER (JIO-1435), and it is not drawn -- not hatched, which says a Guardian took a tool, but absent, because nothing was handed out. `visibility` and not `display` for the reason the hatch above is not a removal: the column is what the board is sized around, and a meter that left the layout would re-flow the board between two steps. */ .app.no-meter .meter { visibility: hidden; } /* The Guardian's meter is not the floor's: drawn if it casts, its column gone if not (JIO-1821). */ .app.no-meter.duel:not(.no-cast) .side.right > .meter { visibility: visible; } .app.compact.no-meter.no-cast .side.right > .meter { display: none; } .app.compact.no-meter.no-cast .side.right > .board { grid-column: 1 / -1; justify-self: center; } /* ---- THE FIRST-RUN WALKTHROUGH'S BOARD (JIO-1970) ------------------------- PLAY! on a first open raises a Survival board with no deck on it: the three deck controls arrive one at a time, each on the beat that teaches it (ui/firstRunSteps.ts's `reveals`, written onto `.app` by main.ts's dressFirstRun()). A board with its whole apparatus on it is the screen the eight beats exist to not be -- a first-time player cannot tell the control they are being asked for from the four they are not. THE METER IS NOT ONE OF THEM (JIO-2015, 2026-10-20). A deck button is a control the walkthrough is about to ASK for, so holding it back is the lesson; the meter asks for nothing until it fills, and hidden it left the board beside a blank strip. decisions/0178 is the argument. `visibility` AND NOT `display`, WHICH IS THE WHOLE OF HOW WHAT IS LEFT IS WRITTEN, and it is the rule `.app.no-meter` above already follows for the Tower's own reason: the deck's row is what the board is SIZED around (main.ts's chromeHeight() charges `#deck`), so a control that left the layout would re-flow the board -- and here it would do it SEVEN TIMES, once per reveal, each one re-sizing every die mid-walkthrough and moving the cell the next beat is pointing at. Invisible and in place, the board is the same board from the arrival to beat 8. The deck itself keeps its row from the first frame for the same reason, so `.deck[hidden]`'s `display: none` is not what hides it here. */ .app.first-run .deck button { visibility: hidden; } /* ...and each one comes back on its own beat. One attribute per control rather than a class per control, so the whole reveal state is one write and a beat that stopped revealing something cannot leave it on. */ .app.first-run[data-fr-reroll-left] .deck button[data-action="rerollLeft"], .app.first-run[data-fr-reroll-right] .deck button[data-action="rerollRight"], .app.first-run[data-fr-raise] .deck button[data-action="raise"] { visibility: visible; } /* ...AND THE BAR AND THE BACKDROP (JIO-1993). The mark and Pause stay, the readouts go whole with `#match-info`, and the House Pips sheet waits for the hand-over. `visibility` for the block above's reason -- chromeHeight() charges the bar. decisions/0178 is the argument; the fade is cfg's. */ .app.first-run #match-info, .app.first-run #btn-sound { visibility: hidden; } .app.first-run[data-fr-handover] #match-info, .app.first-run[data-fr-handover] #btn-sound { visibility: visible; } /* ...AND MENU GOES LAST, SO IT SITS AT THE EDGE (JIO-2015, 2026-10-20). The speaker is invisible and still charges its width -- the rule above working -- and Menu (~~Pause~~, JIO-2049) is its FIRST sibling, so it stood in from the right of an empty bar. IT MOVES ONCE, AND NOT ON A BEAT: beat 8 brings them back IN PLACE, and the order reverts with the class at the END of beat 8 (main.ts's endFirstRun()). decisions/0178 is the argument. */ .app.first-run #btn-pause { order: 1; } .app.first-run .world { opacity: 0; } .app.first-run[data-fr-handover] .world { opacity: 1; transition: opacity var(--fr-sheet-ms, 500ms) ease-in; } .app.first-run.reduced-motion[data-fr-handover] .world { transition: none; } /* ...AND THE METER, IN THE BATTLE WALKTHROUGH (JIO-2018): hidden until the act that teaches it, by the deck's rule above -- `visibility`, in place, so the board is the same board from the arrival to Play on. */ /* THE LIFT (JIO-2018): the opponent window, the meter column or the deck, ringed in the beat's colour while the board behind it dims. It is the spotlight ring drawn in CSS -- the 3px stroke and the halo -- because these three are DOM and the board's rings are bitmap. Over nothing: the dim is on the canvas, so a z-index would only fight the enlarged opponent's. */ .fr-lift { outline: 3px solid var(--spot, var(--left)); outline-offset: 4px; border-radius: 10px; box-shadow: 0 0 0 7px color-mix(in srgb, var(--spot, var(--left)) 28%, transparent), 0 0 28px color-mix(in srgb, var(--spot, var(--left)) 55%, transparent); animation: fr-lift-glow 1600ms ease-in-out infinite; } @keyframes fr-lift-glow { 0%, 100% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--spot, var(--left)) 28%, transparent), 0 0 28px color-mix(in srgb, var(--spot, var(--left)) 55%, transparent); } 50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--spot, var(--left)) 22%, transparent), 0 0 40px color-mix(in srgb, var(--spot, var(--left)) 70%, transparent); } } .app.reduced-motion .fr-lift { animation: none; } /* ---- THE SPOTLIGHT (JIO-1971) --------------------------------------------- Each beat dims the board to the dice that matter and floats one sentence over them. The DIM, the bright dice, the rings and the in-board gesture are on the bitmap (render/renderer.ts's drawSpotlight) -- a wash behind a canvas cannot dim a die, which is JIO-920's lesson and the reason the ability tint moved onto the board. What is here is the three drawings that have to leave the board's box: the pill above it, the band across it, and the dashed line from a deck button up to a die. THE LAYER IS BUILT BY ui/hud.ts ON FIRST USE, not written into dicelock.html: /play's request and byte gates are measured on a page that has never opened the walkthrough, and five elements in the markup would be five elements every other board carries for one mode's sake. `pointer-events: none` ON ALL OF IT. The line is drawn OVER the deck button it starts at, and a layer that ate the tap would be a walkthrough that draws the press it then refuses to take. */ /* ---- THE IMPACT LAYER (JIO-2000) ------------------------------------------ The rings a chain leaves, their words, and the freeze's ring and numeral, over the arena: the board's bitmap is clipped to its own box and the ×4 ring George picked crosses the board's edge. Pointer-events none, like the spotlight; the same z, since neither is ever up with the enlarged opponent. The words are Bungee at one weight, white, outlined in the rung's colour. */ .impact { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 30; pointer-events: none; overflow: visible; } .impact[hidden] { display: none; } .impact circle { fill: none; } .impact text { font-family: "Bungee", Impact, Haettenschweiler, sans-serif; font-weight: 400; text-anchor: middle; dominant-baseline: middle; paint-order: stroke fill; stroke-linejoin: round; } .spotlight { position: absolute; inset: 0; /* Over the board and over the deck, under the enlarged opponent (z 41) and its scrim (40) -- neither of which a one-board walkthrough ever raises, which is why this is below them rather than argued with them. */ z-index: 30; pointer-events: none; } .spotlight[hidden] { display: none; } .spot-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } /* DASHED AND STILL. Every other dashed mark on this board marches (the hint's box, the volley's cells) and this one does not: the beat it is drawn on is asking for one press, and the only thing moving on the screen is the glow on the button it points at. One moving part, one instruction. */ .spot-path { fill: none; stroke: var(--spot, var(--role-reroll)); stroke-width: 3; stroke-dasharray: 7 6; stroke-linecap: round; } .spot-head { fill: var(--spot, var(--role-reroll)); } /* THE PILL: the beat's one sentence, in Bungee 18 over the board, with an 8px tail standing on the cell it is about. `nowrap` is the drawing's own -- a caption that wrapped would be two lines of a different shape on every beat -- and ui/hud.ts slides the pill inward until it is 12px inside the window, so the tail can sit well off its centre and still be on the right die. ...AND IT IS NEVER WIDER THAN THE WINDOW (George, 2026-10-20, build 31: the Battle walkthrough's longer sentences "slide to the right"). The slide cannot bring a pill inside a screen it is wider than, so past 24px short of the viewport the sentence wraps rather than leaves: a two-line pill is worse than the drawing and better than one the player cannot read. The captions themselves are held short (ui/battleRunSteps.ts), so on a phone this is the net and not the look. */ .spot-pill { position: absolute; box-sizing: border-box; background: #151922; color: #e8ecf3; border: 1px solid #2a3242; border-radius: 12px; padding: 10px 16px; font-family: var(--display); font-size: 1.125rem; line-height: 1.1; white-space: nowrap; max-width: calc(100vw - 24px); text-align: center; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); } .spot-pill[hidden] { display: none; } .spot-pill .spot-say { display: block; white-space: normal; text-wrap: balance; } .spot-pill .spot-note { display: block; white-space: normal; margin-top: 4px; font-family: inherit; /* 14 AND NOT THE ARTBOARD'S 13, which is FOUNDATION §2's floor beating the drawing: "14px is the floor for anything a player reads", and this line is read. `.ar-chip` was raised off 12 for the same reason (JIO-1188). The unit is rem for that ticket's other half -- a px size is the one line on the page that does not move when a reader raises their browser's font size. */ font-size: 0.875rem; color: var(--left); /* THE SECOND, SMALLER LABEL IS IN THE PILL and not beside the cells it names, which is the one place this departs from the artboards (`A-Chain` draws "then these three match" under the three dice it points at). Those cells do not exist yet: they are what FALLS once the swap has cleared, so a label pinned to them would be pointing at dice that are not there while the sentence is being read, and gone by the time they are. */ font-weight: 700; } .spot-pill .spot-note[hidden] { display: none; } /* ...and the same line carrying a wrong input's answer, in the beat's own colour rather than the board's accent (JIO-1972): the hint and the ring it is about read as one thing, which is the tutorial's own rule for its hint row (design/pages/tutorial/NOTES.md). */ .spot-pill .spot-note.hint { color: var(--spot, var(--left)); } .spot-pill .spot-tail { position: absolute; bottom: -8px; transform: translateX(-50%); border: 8px solid transparent; border-bottom: 0; border-top-color: #151922; } /* ...and the same tail on top, for the one case there is no room above the target: a cell in the board's top row on a short phone. */ .spot-pill.under .spot-tail { bottom: auto; top: -8px; border-top: 0; border-bottom: 8px solid #151922; } /* THE LOCK BEAT TRADES THE PILL FOR THIS. It is the only warning in the eight beats and the canvas shouts it: a red strip laid across the board at four degrees, the caption in Bungee 27 and the rule under it in the page's own text face. A pill would have made it one more polite instruction. */ .spot-band { position: absolute; box-sizing: border-box; transform: rotate(-4deg); /* The beat's colour (JIO-2018): the lock beat's red, and an act opener's own -- the Battle walkthrough's bands are the act's role, written onto the layer as `--spot` with the rest of the beat. */ background: var(--spot, #ef4444); color: #ffffff; padding: 18px 12px; text-align: center; font-family: var(--display); /* 27 is the band's own size and is not on FOUNDATION §2's scale, which is a deliberate exception rather than a drift: the scale sizes headings on a screen, and this is a strip laid across the board at an angle with one sentence in it -- h2's 24 leaves the band half empty and h1's 32 wraps it. In rem, like every other size in this sheet. */ font-size: 1.6875rem; line-height: 1.05; box-shadow: 0 12px 32px rgba(239, 68, 68, 0.45); } .spot-band[hidden] { display: none; } /* TAP TO CONTINUE (JIO-2040): under the band's note, and under a read beat's pill, from the moment a tap would count. Small caps in the display face so it reads as a control's label and not as more of the sentence. */ .spot-pill .spot-tap, .spot-band .spot-tap { display: block; margin-top: 8px; font-family: var(--display); font-weight: 400; font-size: 0.6875rem; line-height: 1.1; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; } .spot-pill .spot-tap[hidden], .spot-band .spot-tap[hidden] { display: none; } .spot-band .spot-band-note { display: block; margin-top: 6px; font-family: var(--font); font-weight: 700; font-size: 0.875rem; opacity: 0.95; } /* THE BUTTON THE BEAT IS ASKING FOR, AND THE ONE IT HAS JUST HANDED OVER. It is not `.deck button.tut-lit` two thousand lines down: that one FILLS with the role colour and inks the label dark, and this is the artboards' own (`A-Press`) -- a role-colour border, a tint of it inside, the label in the colour and a glow outside it. Two modes, two looks, never on one screen. `!important` ON THE RAISE'S FOUR, because `.deck-raise` declares its own border, background and colour that way (its identity in every shape, 1500 lines up) -- and an `!important` is the one thing a longer selector cannot outrank. */ .app.first-run .deck button { position: relative; } .app.first-run .deck button.fr-lit { border-width: 2px !important; border-color: var(--spot, var(--left)) !important; background: color-mix(in srgb, var(--spot, var(--left)) 22%, transparent) !important; color: var(--spot, var(--left)) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--spot, var(--left)) 35%, transparent), 0 0 24px color-mix(in srgb, var(--spot, var(--left)) 45%, transparent); animation: fr-glow 1600ms ease-in-out infinite; } /* The raise is half a button wider and carries a chevron, and its artboard sits a shade heavier than the two rolls: 30% against 22%. */ .app.first-run .deck .deck-raise.fr-lit { background: color-mix(in srgb, var(--spot, var(--left)) 30%, transparent) !important; } @keyframes fr-glow { 0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--spot, var(--left)) 35%, transparent), 0 0 24px color-mix(in srgb, var(--spot, var(--left)) 45%, transparent); } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--spot, var(--left)) 20%, transparent), 0 0 12px color-mix(in srgb, var(--spot, var(--left)) 25%, transparent); } } /* REDUCED MOTION DROPS THE PULSE AND KEEPS THE GLOW, which is this game's rule for every breathing thing on the screen: what the drawing says is "press this", and that survives being still. Nothing else in the spotlight moves -- the dashed line does not march and the band does not swing. */ .app.reduced-motion .deck button.fr-lit { animation: none; } /* NEW, on the beat that hands the button over. A pseudo-element and not markup, for the reason the raise's chevron is one (1500 lines up): the button's text node has to stay the label alone, because TOUCH_LABELS, the README's drawing and the test helper all read it. */ .app.first-run .deck button.fr-new::after { content: 'NEW'; position: absolute; top: -12px; right: -8px; font-family: var(--display); /* 14 AND NOT THE ARTBOARD'S 11, for the floor's reason above: NEW is a word a player reads, and it is the one word on the screen that says a control they have never had is now theirs. */ font-size: 0.875rem; letter-spacing: 0.04em; color: #0b0d12; background: var(--spot, var(--left)); padding: 2px 8px; border-radius: 999px; white-space: nowrap; } /* ---- THE WALKTHROUGH'S LEAVE CARD (JIO-1977) ------------------------------ The card is the pause sheet's own box -- `.overlay .panel`, which is what the sheet one press back is drawn in -- so the only thing new here is the row of tiles. A TILE IS A SECTION 5 CARD TURNED ON ITS SIDE, declared the way `.mode-card` declares the same move: `.menu .card` above is a 64px ROW, and this overrides the direction, the padding and the gap rather than opting out of the hover state, the focus ring and the transition that come with it. THE ART BOX IS FIXED AT THE CANVAS'S 96x68 and is not a ratio: three of them plus two 8px gaps and the card's padding is the 312px the drawing is wide in a 390 frame, and a percentage box would let one tile differ from its neighbours the day a title wraps. `min-width: 0` is what lets three fit. 14 AND NOT `--t-card`'s 20 ON THE TITLE, the one §5 size this screen argues with: three titles at 20 in a 96px column wrap PUZZLES, and the drawing sets them on one line. Four classes, because `.app.compact` is two and a shorter selector loses to it on a phone -- which is every frame this is drawn in. */ .leave-tiles { display: flex; gap: 8px; } .menu .card.leave-tile { flex: 1 1 0; min-width: 0; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; padding: 10px 6px 12px; min-height: 0; text-align: center; } .leave-art { display: block; width: 96px; height: 68px; overflow: hidden; border-radius: 10px; } html .app .overlay .menu .card.leave-tile .card-title { font-size: 0.875rem; line-height: 1.1; } /* The second line is `.desc`, at --t-small. ~~The drawing's 12~~ is under 14, and 14 is THE FLOOR for anything a player reads (the scale at the head of this file) -- the NEW badge above took the same correction. */ html .app .overlay .menu .card.leave-tile .desc { text-align: center; } /* MENU IS MUTED AND CENTRED, which the canvas draws and which says what it is: the way out of all three tiles rather than a fourth of them. A pause sheet's rows stay left-aligned like every other menu row in the game. */ html .app .overlay .menu button.leave-menu { color: var(--muted); justify-content: center; } .arena { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* The boards, and the touch deck under them. Written out rather than left to the implicit rows, because two AUTO rows in a grid taller than its contents SHARE the slack: the deck's box then grew and shrank with the boards' row, and its buttons stretch to it. Measured 2026-09-08 at 768x1024 with a touchscreen, mid-match: the deck went 46px -> 65px tall and its buttons moved 20px UP as the "locked incoming" warning appeared -- the same wrong-button press JIO-835 fixed in the rail, on the layout nobody had re-measured since. 1fr takes the slack for the boards, min-content leaves the deck exactly its own height, at the bottom. */ grid-template-rows: minmax(0, 1fr) min-content; gap: 24px; padding: 12px calc(24px + env(safe-area-inset-right)) 12px calc(24px + env(safe-area-inset-left)); min-height: 0; align-items: stretch; /* THE CONTAINING BLOCK for everything laid over a board. It opened a stacking context for the arena-wide tint's `z-index: -1` until JIO-1074 removed that layer; what keeps `position: relative` here now is the callout, the effect chip and the hit banner, which are absolutely positioned into a board's grid area -- and on a phone `.side.left` is `display: contents` and generates no box, so this is the nearest positioned ancestor they have. */ position: relative; z-index: 0; } /* THE ARENA-WIDE ABILITY TINT IS GONE (JIO-1074). It lived here as an `.arena::before` wash in `--ability-tint`, driven by `data-ability` on `.app`, and it said which ability the PLAYER could fire (JIO-920). Two things retired it, and both are worth writing down because the obvious reading of its absence is that somebody forgot to draw it: ~~while a roll is ready the arena carries that ability's tint~~ -- the READY signal is now carried three times over by the meter beside the board (fill and glyph box in the ability's colour, a ring glow and a TAP label) and once more in words by the status card's pick row, which is what FOUNDATION §6 and NOTES.md Revision 3 moved it to. A fifth copy behind the whole page was the one that could not say WHO. And that is the second thing: what the ability feedback has to answer is whose board an effect is happening to (FOUNDATION §7). A wash behind both boards is the one shape that cannot -- a debuff on the opponent and the same debuff on you were the same colour behind both. So the colour moved ONTO the board that wears the effect, which is the block below. (The debuff that made the case, Degrade, was deleted by JIO-1279; the rule is about the surface, not about that ability, and Barrage and Lock still land on a board that is not the caster's.) `.arena` keeps `position: relative` and its stacking context: the callout, the chip and the banner are all absolutely positioned into a board's grid area and the arena is the containing block for them on a phone, where `.side.left` is `display: contents` and generates no box of its own. */ /* --------------------------------------------------------------------------- PER-BOARD ABILITY FEEDBACK (JIO-1074, FOUNDATION.md §7, and the Gameplay canvas's Stop and Shield artboards) Three surfaces, one colour token each, and the id is the contract exactly as it was for the tint this replaced: `data-effect` on the canvas and `data-ability` on the two panels, mapped to `--ability-*` by the six rules at the foot of this block. What a hue means stays the stylesheet's business, and a probe or a test reads an id. The wash itself is NOT here. A 30% background wash under the dice and a 10% overlay over them are drawn on the canvas by render/renderer.ts, because a canvas paints over anything a stylesheet puts behind it -- that is the whole reason JIO-920 could promise the arena tint would never cost a die a point of contrast, and the whole reason this one cannot be done the same way. What CSS owns is the part OUTSIDE the bitmap: the 4px outline and its 28px glow. THE CHAIN'S RIM IS THE OTHER WAY ROUND, AND ON PURPOSE (JIO-1961). It is stroked on the bitmap by render/renderer.ts's drawChainRim, because the rule below hands `box-shadow` on this element to `data-effect` and a second owner of one property is a rule that silently deletes the other. They are two different rims besides: an ability outlines the whole canvas, and a chain lights the GRID the dice stand on, inside the board's own pad. */ .board[data-effect] { box-shadow: 0 0 0 4px var(--effect-color), 0 0 28px var(--effect-color); } /* A Shield eating a volley: the ring swells to 7px, settles back, AND THEN GOES OUT (NOTES.md Revision 4, JIO-1075) -- "the outline ring pulses, the column markers shatter, then the chip and outline fade as the shield is spent". One animation and no second banner: the block is announced by the chip that was already there changing its own second half, by the markers shattering on the canvas, and by this. THE LAST STOP IS THE ONE THIS TICKET ADDED. The charge is gone the instant it eats a volley, so `data-effect` comes off the canvas the moment the chip's window closes -- and until the fade was written in, that removal was the ring VANISHING between two frames, on the one beat a player is looking straight at it. `forwards` holds the faded end state for the few frames between the animation finishing and hud.ts dropping the attribute, so the two cannot disagree; the timing is `--blocked-ms`, which is ui/feedback.ts's BLOCKED_MS and is asserted against it by test/abilityFeedback.test.js rather than being typed twice. Fading a box-shadow to `transparent` is safe rather than muddy: CSS interpolates colour premultiplied, so the ring thins out in its own hue instead of travelling through black on its way to nothing. */ .board[data-effect].blocked { animation: shield-block var(--blocked-ms) ease-out forwards; } @keyframes shield-block { 0% { box-shadow: 0 0 0 7px var(--effect-color), 0 0 34px var(--effect-color); } 35% { box-shadow: 0 0 0 4px var(--effect-color), 0 0 28px var(--effect-color); } 100% { box-shadow: 0 0 0 4px transparent, 0 0 28px transparent; } } /* THE BOARD'S GRID AREA, SHARED BY THE THREE THINGS LAID OVER IT. The callout (JIO-1071), the effect chip and the hit banner are all absolutely positioned into whichever cell the board landed in, and `.side` is laid out in five different shapes -- two boards, the narrow-desktop band, Endless's one board, a phone in portrait and a phone on its side. Writing the placement once against `.board-overlay` rather than three times against three class names is what stops the next shape teaching two of them and forgetting the third. */ .board-chip, .board-banner { position: absolute; z-index: 3; pointer-events: none; /* Aligned to the board and not to the area it sits in. On a phone the board is `justify-self: start` inside a column pair wider than it is, so a panel centred in the area hangs ~12px off the board's right edge; `--board-w` is the board's own measured width, published by syncMeters() in main.ts from the same canvas the meter's height comes from, so the two cannot disagree. The 16px is the artboards' 8px inset on each side. */ align-self: start; justify-self: start; box-sizing: border-box; width: calc(var(--board-w, 100%) - 16px); margin-left: 8px; color: var(--text); /* SOLID over an empty board, and the artboards draw it that way. `data-over` is written by hud.ts the moment the stack reaches the rows these sit in -- see the translucent pair below, which is NOTES.md Revision 3's rule. */ background: color-mix(in srgb, var(--bg) 93%, transparent); } .board-chip[hidden], .board-banner[hidden] { display: none; } /* THE CHAIN'S CHIP, ON THE BOARD'S TOP RIM (JIO-1961). `CHAIN ×n · total` in the impact ladder's colour for the newest ring (SPEC §13), from a second wave. Placed with the pair above rather than beside them, because it is the same problem: absolutely positioned into whichever cell the board landed in, and aligned to the board's own measured width instead of to the area, which on a phone is wider than the board. ON the rim and not inside it: the effect chip starts 8px below the canvas top and this one sits where the border is, which is the only place on a board that is never a die. `--chain-color` is written by ui/hud.ts from the same resolved step the rim on the bitmap is stroked in, so the two cannot be two colours for a frame. ALWAYS TRANSLUCENT, which is the callout's rule (NOTES.md Revision 3) rather than the effect chip's `data-over`: a chain deep enough to be worth a chip is often being played to dig out of a stack that HAS reached the top rows, so there is no beat where the solid form would be the right one. */ .chain-chip { position: absolute; z-index: 4; pointer-events: none; align-self: start; justify-self: start; box-sizing: border-box; margin-left: 8px; margin-top: 4px; max-width: calc(var(--board-w, 100%) - 16px); padding: 3px 10px; border-radius: 999px; border: 2px solid var(--chain-color, var(--left)); background: color-mix(in srgb, var(--bg) 62%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--chain-color, var(--left)); font-family: var(--display); font-size: 0.75rem; line-height: 1.4; letter-spacing: 0.04em; white-space: nowrap; animation: chip-in 180ms ease-out; } .chain-chip[hidden] { display: none; } /* AND THE EFFECT CHIP MOVES DOWN FOR IT. Two panels aligned to the same top rim is the collision this avoids, and it is one rule with one owner rather than each of them measuring the other: `data-chain` is written on the side by ui/hud.ts on the frame the chip appears and removed on the frame it goes. */ .side[data-chain] .board-chip { margin-top: 38px; } /* Reduced motion keeps the chip and the rim and drops the arrival, for the reason every other `prefers-reduced-motion` rule in this sheet gives: the readout is the point and the movement is not. */ @media (prefers-reduced-motion: reduce) { .chain-chip { animation: none; } } /* THE NO-HIDING RULE (NOTES.md Revision 3): a panel over dice is translucent with a 6px blur and the text stays fully legible; over an empty part of the board it may be solid. The ticket's acceptance is "dice remain readable under any banner", and a chip is a banner as far as a die underneath it is concerned -- so both wear it, even though the four artboards happen to draw the chip over a low stack. */ .board-chip[data-over="dice"], .board-banner[data-over="dice"] { background: color-mix(in srgb, var(--bg) 60%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .board-chip { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 10px; border: 2px solid var(--effect-color, var(--left)); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); animation: chip-in 180ms ease-out; } /* A SPENT SHIELD'S CHIP READS, THEN FADES (JIO-1075), and `data-blocked` is what hud.ts writes on the frame the note changes to BLOCKED n. It holds full strength for the first half of the window so the count is READ and not glimpsed, and goes out over the second half beside the ring, which is the other half of the same sentence in NOTES.md Revision 4. It overrides `chip-in` rather than running beside it: the chip is not arriving, it is the one that was already there ending. */ .board-chip[data-blocked] { animation: chip-spend var(--blocked-ms) ease-out forwards; } @keyframes chip-spend { 0%, 55% { opacity: 1; } 100% { opacity: 0; } } .board-chip .bc-head { display: flex; align-items: center; gap: 8px; } .board-chip .bc-icon { width: 24px; height: 24px; border-radius: 6px; background: var(--effect-color, var(--left)); color: var(--ink); display: flex; align-items: center; justify-content: center; flex: none; line-height: 0; } .board-chip .bc-icon svg { display: block; width: 16px; height: 16px; } .board-chip .bc-name { font-family: var(--display); font-size: 0.875rem; line-height: 1; letter-spacing: 0.02em; } /* The clock, or UNTIL HIT, or BLOCKED 4 -- one slot, because a Shield that has just eaten a volley is the same chip saying something else, never a second one (NOTES.md Revision 4). */ .board-chip .bc-note { margin-left: auto; font-family: var(--mono); font-size: 0.75rem; font-weight: 700; color: var(--effect-color, var(--left)); } /* The bar drains over the window the effect was armed with, which is what `totalMs` is for. Shield has no window and so has no bar at all: hud.ts hides this rather than drawing a full bar that never moves, which would read as a countdown that had stopped. */ .board-chip .bc-bar { height: 6px; border-radius: 3px; background: var(--panel-2); overflow: hidden; display: block; } .board-chip .bc-bar[hidden] { display: none; } .board-chip .bc-fill { display: block; height: 100%; background: var(--effect-color, var(--left)); } .board-banner { margin-top: 8px; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--effect-color, var(--left)); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); animation: chip-in 180ms ease-out; } /* Under the chip when there is one, at the top of the board when there is not. The class is written by hud.ts because the two are siblings and a stylesheet cannot ask whether the one above it is on screen; 60px is the chip's own height plus its 8px inset, measured off the chip artboards. */ .board-banner.under-chip { margin-top: 60px; } .board-banner .bb-icon { width: 22px; height: 22px; border-radius: 5px; background: var(--effect-color, var(--left)); color: var(--ink); display: flex; align-items: center; justify-content: center; flex: none; line-height: 0; } .board-banner .bb-icon svg { display: block; width: 14px; height: 14px; } .board-banner .bb-text { font-family: var(--font); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; } @keyframes chip-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* ~~The seven~~ The eight, on all three surfaces at once. Same shape as the meter's mapping below and the tint's before it: one token per id in `abilities.list`, and test/abilityFeedback.test.js fails on a missing one rather than letting a tenth ability colour nothing at all. */ .board[data-effect="cleanse"], .board-chip[data-ability="cleanse"], .board-banner[data-ability="cleanse"] { --effect-color: var(--ability-cleanse); } .board[data-effect="barrage"], .board-chip[data-ability="barrage"], .board-banner[data-ability="barrage"] { --effect-color: var(--ability-barrage); } .board[data-effect="shield"], .board-chip[data-ability="shield"], .board-banner[data-ability="shield"] { --effect-color: var(--ability-shield); } .board[data-effect="erase"], .board-chip[data-ability="erase"], .board-banner[data-ability="erase"] { --effect-color: var(--ability-erase); } .board[data-effect="lock"], .board-chip[data-ability="lock"], .board-banner[data-ability="lock"] { --effect-color: var(--ability-lock); } .board[data-effect="stop"], .board-chip[data-ability="stop"], .board-banner[data-ability="stop"] { --effect-color: var(--ability-stop); } .board[data-effect="hint"], .board-chip[data-ability="hint"], .board-banner[data-ability="hint"] { --effect-color: var(--ability-hint); } .board[data-effect="fullclear"], .board-chip[data-ability="fullclear"], .board-banner[data-ability="fullclear"] { --effect-color: var(--ability-fullclear); } .board[data-effect="wild"], .board-chip[data-ability="wild"], .board-banner[data-ability="wild"] { --effect-color: var(--ability-wild); } .board[data-effect="transmute"], .board-chip[data-ability="transmute"], .board-banner[data-ability="transmute"] { --effect-color: var(--ability-transmute); } .board[data-effect="frost"], .board-chip[data-ability="frost"], .board-banner[data-ability="frost"] { --effect-color: var(--ability-frost); } .board[data-effect="scramble"], .board-chip[data-ability="scramble"], .board-banner[data-ability="scramble"] { --effect-color: var(--ability-scramble); } .board[data-effect="jam"], .board-chip[data-ability="jam"], .board-banner[data-ability="jam"] { --effect-color: var(--ability-jam); } /* The emergency stop is the seventh board colour and the first that no ability deals (JIO-1115). Two surfaces and not three: the danger-zone pause is a state the board is IN, so it wears the ring and the wash and carries the chip, but nothing ever lands it -- there is no hit to flash and no banner to raise, and a `.board-banner` rule here would be a promise nothing keeps. */ .board[data-effect="emergency"], .board-chip[data-ability="emergency"] { --effect-color: var(--rise-emergency); } /* THREE columns since JIO-1071, and the third is the meter: [status][board] [meter] on the left and the mirror of it on the right, which is FOUNDATION §6's "two boards, meters on the inner edges". `position: relative` is what makes this the callout's containing block -- see .meter-callout above. */ .side { display: grid; /* The status card's column, NAMED because five rules need the same number: both sides here, both again in the narrow-desktop band below, and Endless's one-board shape, which has to re-declare the whole track list because the `max-width: 900px` band rewrites it for the two-board one. It was the literal `200px`/`160px` in each of them until JIO-1073. main.ts's layout() still carries its own copy, and says so. */ --status-col: 200px; grid-template-columns: var(--status-col) minmax(0, auto) 44px; gap: 12px; min-height: 0; align-items: start; justify-content: end; position: relative; } .side.right { grid-template-columns: 44px minmax(0, auto) var(--status-col); justify-content: start; } .side.right .status { order: 3; } .side.right .board { order: 2; } .side.right .meter { order: 1; } /* The board's own grid area, named for everything laid over it -- the callout, the effect chip and the hit banner all carry `.board-overlay` (JIO-1074). Written as column/row pairs rather than a `grid-area` name because the board is placed by auto-flow and an absolutely-positioned item cannot ask where that put it. */ .side.left > .board-overlay { grid-column: 2; grid-row: 1; } .side.right > .board-overlay { grid-column: 2; grid-row: 1; } .status { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 10px; font-size: 0.8125rem; } .status-head { display: flex; align-items: center; gap: 8px; font-weight: 600; } .char-badge { width: 14px; height: 14px; border-radius: 4px; background: var(--left); transform: rotate(45deg); display: inline-block; } .side.right .char-badge { background: var(--right); } .chain-badge { margin-left: auto; font-family: var(--mono); font-size: 0.75rem; padding: 2px 6px; border-radius: 4px; background: var(--panel-2); border: 1px solid var(--line); } /* THE HORIZONTAL BARS ARE BOTH GONE, and with them the whole .bar family -- the trough, its fill, the label inside it and the `pulse` keyframe that lit it. JIO-1068 took the health bar out (a match is lost by top-out and nothing else) and JIO-1071 replaced the "Meter N%" row with the vertical column below, so no element in dicelock.html carries `class="bar"` any more. The rules are struck rather than left dead: each one carried a comment arguing for a control the page does not have, which is the sentence a later reader would have taken for a live constraint. */ /* --------------------------------------------------------------------------- THE VERTICAL METER (JIO-1071, FOUNDATION.md §6) A 22px column the height of the board with a 40px glyph box under it, and it is the ability CONTROL on touch as well as the readout. It replaced the "Meter N%" row in the status panel, which had two problems the design brief names: it was a horizontal bar beside a vertical board, and on a phone its own label was `display: none` -- so the whole of what a phone said about the meter was a 13px bar and a word in the panel under it (JIO-919). Four states, written by hud.ts onto `data-state` from ui/meter.ts: empty | filling | full | spent. The attribute is the contract: every rule below hangs off it, and a probe or a test reads it rather than inferring the state from a colour. Colour comes through `--meter-accent`, mapped from `data-ability` the way the board's own effect colour is mapped from `data-effect` (JIO-1074). Same nine tokens, one indirection, so a tenth ability is a token and a mapping rule in ONE place per surface and test/abilityFeedback.test.js fails when either is missing. */ /* `align-self: start` and a height in PX, written by layout() from the canvas it sits beside (syncMeters in main.ts). Stretching to the grid row is what it did first, and on a phone the row is the whole arena -- the board spans three rows and the last one is the 1fr that absorbs the slack -- so the column ran 150px past the bottom of the board it was supposed to be the height of (measured 2026-09-11 at 393x852). The canvas is already sized in px by the same pass, so this is the one number that cannot disagree with it. */ .meter { display: flex; align-self: start; min-height: 0; } /* The hit target, and the 44px is on THIS box rather than on the 22px track: JIO-836's floor is about the area a thumb lands in, and a bar drawn at the width a thumb needs would be a bar drawn for the wrong reason. `button` on the player's side, plain `div` on the AI's -- the reset below is written for both so the two boxes measure the same. */ .meter-tap { width: 44px; height: 100%; flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; -webkit-tap-highlight-color: transparent; /* Or a double-tap on the meter zooms the page instead of firing twice. */ touch-action: manipulation; } button.meter-tap { cursor: pointer; } button.meter-tap:focus-visible { outline: 2px solid var(--left); outline-offset: 2px; border-radius: 12px; } .meter-track { width: 22px; flex: 1 1 auto; min-height: 44px; border-radius: 11px; background: var(--panel-2); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; /* The fill grows from the BOTTOM. A column that filled downwards would be draining, which is what every other bar on this page does when it is losing something. */ justify-content: flex-end; } /* `height` and not a transform: the track has a 11px radius and `overflow: hidden`, so a scaled child is a rectangle clipped to a capsule -- correct at the ends and wrong everywhere between, because scaleY also stretches the fill's own rounded cap into an ellipse. */ .meter-fill { width: 100%; height: 0%; border-radius: 11px; background: var(--left); transition: height 120ms linear, background-color 200ms, box-shadow 200ms; } .side.right .meter-fill { background: var(--right); } .meter-box { flex: none; width: 40px; height: 40px; box-sizing: border-box; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: var(--text); transition: background-color 200ms, border-color 200ms, color 200ms; } .meter-pct { font-family: var(--mono); font-size: 0.75rem; line-height: 1; } .meter-icon { display: none; line-height: 0; } .meter-icon svg { display: block; width: 16px; height: 16px; } /* The TAP affordance is a COARSE-POINTER rule and nothing else (see the (pointer: coarse) block at the foot of this file): on a desktop the meter is a readout and F is the control, and a word telling a mouse to tap is an instruction for a gesture that screen has no way to make. */ .meter-word { display: none; font-family: var(--display); font-size: 0.625rem; line-height: 1; letter-spacing: 0.04em; } /* Full: the bar and the box take the ability's colour, the box shows the glyph instead of the percentage, and the fill gets the glow FOUNDATION §6 asks for. `--meter-accent` falls back to the side's own accent so a config with an ability nothing has mapped still lights rather than going transparent. */ .meter:not([data-cells])[data-state="full"] .meter-fill { background: var(--meter-accent, var(--left)); box-shadow: 0 0 18px var(--meter-accent, var(--left)); } /* THE STACKED COLUMN (2026-10-13, decision 0145; JIO-1438's two cells made the default): a two-cell column splits the track in half with a hairline, and each cell fills its own half from the bottom. A cell is the side's own colour while it fills -- it is not a roll yet -- and takes ITS OWN ability's colour and glyph once it holds one, because each cell is a different roll and a held cell is a button of its own on touch. The PRIMED cell -- what the key fires and the glyph box shows -- wears a 2px `text` ring inside its glow. A STUCK cell -- held, but the board gives it nothing to act on -- is hatched the way a locked die is (the no-abilities hatch above, the same diagonal): "this is locked" is one diagonal across the whole game, and a stuck roll no longer blocks the bar, which is the whole point of the second cell. */ .meter[data-cells] .meter-track { position: relative; } .meter[data-cells="2"] .meter-track::after { content: ''; position: absolute; left: 3px; right: 3px; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px; background: var(--line); pointer-events: none; } .meter[data-cells] .meter-fill { position: relative; background: var(--left); box-shadow: none; } .side.right .meter[data-cells] .meter-fill { background: var(--right); } .meter[data-cells] .meter-fill.held { background: var(--meter-accent, var(--left)); box-shadow: 0 0 18px var(--meter-accent, var(--left)); } .meter[data-cells] .meter-fill.held.primed { box-shadow: 0 0 18px var(--meter-accent, var(--left)), inset 0 0 0 2px var(--text); } .meter[data-cells] .meter-fill.held.stuck { box-shadow: none; background-image: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--ink) 28%, transparent) 0 4px, transparent 4px 9px); } /* The 16px glyph inside a 22px cell: the smallest the glyph is drawn anywhere, in ink on the ability's colour, centred in the cell. Hidden in the phone's 6px mini strip, where there is no room for a picture. */ .meter[data-cells] .meter-fill svg { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; color: var(--ink); pointer-events: none; } .app.compact .side.right .meter-fill svg { display: none; } .meter[data-state="full"] .meter-box { background: var(--meter-accent, var(--left)); border-color: var(--meter-accent, var(--left)); color: var(--ink); } .meter[data-state="full"] .meter-pct { display: none; } .meter[data-state="full"] .meter-icon { display: block; } /* Spent: the box goes flat and the bar drains. It is the one state the engine leaves no trace of -- `use()` clears the roll in the same tick it spends the charge -- so without the 500ms ui/meter.ts holds, the meter would go from the ability's colour to an empty track between two frames. */ .meter[data-state="spent"] .meter-box { opacity: 0.55; } .meter[data-state="spent"] .meter-pct { color: var(--muted); } /* Filling is not tappable, so it does not pretend to be: only a full meter's box pulses, and only where a press would actually fire (`tappable` in ui/meter.ts, which is false for a roll a Shield of your own is refusing). */ .meter[data-state="full"].tappable .meter-box { animation: meter-pulse 900ms ease-in-out infinite alternate; } @keyframes meter-pulse { from { transform: scale(1); } to { transform: scale(1.08); } } .meter[data-ability="cleanse"], .meter-callout[data-ability="cleanse"] { --meter-accent: var(--ability-cleanse); } .meter[data-ability="barrage"], .meter-callout[data-ability="barrage"] { --meter-accent: var(--ability-barrage); } .meter[data-ability="shield"], .meter-callout[data-ability="shield"] { --meter-accent: var(--ability-shield); } .meter[data-ability="erase"], .meter-callout[data-ability="erase"] { --meter-accent: var(--ability-erase); } .meter[data-ability="lock"], .meter-callout[data-ability="lock"] { --meter-accent: var(--ability-lock); } .meter[data-ability="stop"], .meter-callout[data-ability="stop"] { --meter-accent: var(--ability-stop); } .meter[data-ability="hint"], .meter-callout[data-ability="hint"] { --meter-accent: var(--ability-hint); } .meter[data-ability="fullclear"], .meter-callout[data-ability="fullclear"] { --meter-accent: var(--ability-fullclear); } .meter[data-ability="wild"], .meter-callout[data-ability="wild"] { --meter-accent: var(--ability-wild); } .meter[data-ability="transmute"], .meter-callout[data-ability="transmute"] { --meter-accent: var(--ability-transmute); } .meter[data-ability="frost"], .meter-callout[data-ability="frost"] { --meter-accent: var(--ability-frost); } .meter[data-ability="scramble"], .meter-callout[data-ability="scramble"] { --meter-accent: var(--ability-scramble); } .meter[data-ability="jam"], .meter-callout[data-ability="jam"] { --meter-accent: var(--ability-jam); } /* The callout (FOUNDATION §6, and NOTES.md Revision 3's overlay rule): the glyph and the bare ability name over the board for ~1500ms when the meter fills. ALWAYS TRANSLUCENT -- ability colour at 72% with a 6px blur -- because it sits mid-board and the rule George set in review is that nothing the game puts over the board may hide a die. Absolutely positioned INTO THE BOARD'S GRID AREA rather than over the side as a whole: an absolutely-positioned child of a grid container that carries grid-placement properties is positioned against that area, so the pill is centred on the board in every one of the four shapes .side is laid out in without a single measurement in JavaScript -- and it costs the layout nothing, which a flow child centred with a negative margin would not. */ .meter-callout { position: absolute; place-self: center; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: color-mix(in srgb, var(--meter-accent, var(--left)) 72%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--ink); box-shadow: var(--card-shadow); pointer-events: none; animation: callout-in 180ms ease-out; } .meter-callout[hidden] { display: none; } .meter-callout .mc-name { font-family: var(--display); font-size: var(--t-card); line-height: 1; letter-spacing: 0.02em; } .meter-callout .mc-icon { display: flex; line-height: 0; } .meter-callout .mc-icon svg { display: block; width: 24px; height: 24px; } @keyframes callout-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } /* THE ABILITY PICKER (JIO-1439): one button per kit ability, over the TOP of the board, which is where the stack is not. Translucent and blurred for the callout's rule -- nothing over the board may hide a die -- and every option is a 44px target (JIO-836's floor). The option the keyboard and the pad are on wears its ability's colour as a ring; an option the board gives nothing to act on is dimmed, not removed, so the row never re-flows under a thumb. */ .ability-picker { position: absolute; place-self: start center; margin-top: 12px; z-index: 4; display: flex; gap: 8px; padding: 8px; border-radius: 16px; background: color-mix(in srgb, var(--panel) 72%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: var(--card-shadow); animation: callout-in 180ms ease-out; } .ability-picker[hidden] { display: none; } .ability-picker .ap-opt { min-width: 64px; min-height: 44px; margin: 0; padding: 6px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 12px; border: 2px solid transparent; background: color-mix(in srgb, var(--meter-accent, var(--left)) 34%, transparent); color: var(--text); font-family: var(--display); font-size: 0.75rem; letter-spacing: 0.02em; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .ability-picker .ap-opt-icon { display: flex; line-height: 0; } .ability-picker .ap-opt-icon svg { display: block; width: 20px; height: 20px; } .ability-picker .ap-opt.focused { border-color: var(--meter-accent, var(--left)); box-shadow: 0 0 12px var(--meter-accent, var(--left)); } .ability-picker .ap-opt[aria-disabled="true"] { opacity: 0.45; } /* ~~SIX LINES~~ EIGHT LINES, TWO COMPONENTS, for the board group's reason above: a selector added to these lines borrows the one map of id to hue, where a fourth copy of it would be an ability coloured in three places and grey in the fourth. `.tfc-kit` is the floor-cleared screen's card for an ability the next floor deals (JIO-1654) -- the same thing the picker's option is. THAT IS NOT A HYPOTHETICAL: Hint had no line here from JIO-1660 until JIO-1661 added its own, so for one ticket's life the seventh ability's picker option and its NEW card on the floor-cleared screen fell back to `--left` while its meter, its board and its chip were yellow. Nothing failed -- the palette sweep in test/abilityFeedback.test.js walks the three surfaces above and had never been pointed at these two, which it now is. */ .ap-opt[data-ability="cleanse"], .tfc-kit[data-ability="cleanse"] { --meter-accent: var(--ability-cleanse); } .ap-opt[data-ability="barrage"], .tfc-kit[data-ability="barrage"] { --meter-accent: var(--ability-barrage); } .ap-opt[data-ability="shield"], .tfc-kit[data-ability="shield"] { --meter-accent: var(--ability-shield); } .ap-opt[data-ability="erase"], .tfc-kit[data-ability="erase"] { --meter-accent: var(--ability-erase); } .ap-opt[data-ability="lock"], .tfc-kit[data-ability="lock"] { --meter-accent: var(--ability-lock); } .ap-opt[data-ability="stop"], .tfc-kit[data-ability="stop"] { --meter-accent: var(--ability-stop); } .ap-opt[data-ability="hint"], .tfc-kit[data-ability="hint"] { --meter-accent: var(--ability-hint); } .ap-opt[data-ability="fullclear"], .tfc-kit[data-ability="fullclear"] { --meter-accent: var(--ability-fullclear); } .ap-opt[data-ability="wild"], .tfc-kit[data-ability="wild"] { --meter-accent: var(--ability-wild); } .ap-opt[data-ability="transmute"], .tfc-kit[data-ability="transmute"] { --meter-accent: var(--ability-transmute); } .ap-opt[data-ability="frost"], .tfc-kit[data-ability="frost"] { --meter-accent: var(--ability-frost); } .ap-opt[data-ability="scramble"], .tfc-kit[data-ability="scramble"] { --meter-accent: var(--ability-scramble); } .ap-opt[data-ability="jam"], .tfc-kit[data-ability="jam"] { --meter-accent: var(--ability-jam); } /* The granted ability, in the player's status panel (JIO-857). It names what Use / F / LT will fire and what it costs, which the meter's glyph box says in a picture and not in words. Hidden outright while the meter fills since JIO-1071 -- see the comment on it in dicelock.html. */ .ability-pick[hidden] { display: none; } .ability-pick { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; font-family: var(--mono); font-size: 0.6875rem; color: var(--muted); white-space: nowrap; overflow: hidden; } /* `margin-right: auto` and not the row's own `space-between`: with the glyph in front of it the row holds three items, and space-between would push the NAME into the middle of the panel away from the icon it belongs to. On a wrapped compact line the name is alone and the auto margin does nothing, which is what keeps READY at the left edge there. */ .ability-pick .ap-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; margin-right: auto; } .ability-pick.ready .ap-name { color: var(--left-text); } /* The AI's card wears the AI's accent (JIO-1073), the way their badge, their meter fill and their effect chips already do. READY in teal on the amber side would say the roll is yours to fire. */ .side.right .ability-pick.ready .ap-name { color: var(--right-text); } .ability-pick .ap-cost { flex: none; } /* The ability's glyph (JIO-924), in front of its name and drawn in the name's own colour -- `currentColor` in the config.ts writes, so READY moves the glyph with the word and no second palette exists to drift from the first. The colour of WHICH ability this is is already the arena's (the --ability-* tints, JIO-920); this glyph carries the SHAPE, which is the half of it that survives being 13px on a phone. `:empty` is load-bearing: `gap` is charged for a flex item whether it has a box or not, so an icon span left empty while the meter fills would hold a 6px hole in front of "Random next". */ .ability-pick .ap-icon { flex: none; display: inline-flex; align-self: center; color: var(--text); } .ability-pick .ap-icon:empty { display: none; } .ability-pick.ready .ap-icon { color: var(--left); } .side.right .ability-pick.ready .ap-icon { color: var(--right); } .ability-pick .ap-icon svg { display: block; width: 1.35em; height: 1.35em; } /* Active timed effects (JIO-862), under the pick. Wraps rather than scrolls: a chip clipped to "Sto" is the same failure as a clipped ability name. The wrap has to work INSIDE a chip and not only between them: the compact rail measures 61px and the widest chip the game ever drew, "Empower ×2 · 2.8s", was 83px, so a row that only wrapped between chips overflowed on a phone with a single effect running. That ability is gone (JIO-1279) and "Stop · 4.2s" fits, which is a reason to keep the wrap rather than to drop it: the rail did not get wider. Hence an inline-block chip whose text wraps at the spaces around the separator, the same answer .ability-pick already gives for the ability name below. */ .effects { display: flex; flex-wrap: wrap; gap: 4px; font-family: var(--mono); font-size: 0.625rem; } .effects[hidden] { display: none; } .effects .effect { display: inline-block; padding: 1px 5px; border-radius: 999px; border: 1px solid var(--left); color: var(--left-text); background: color-mix(in srgb, var(--left) 12%, transparent); text-align: center; line-height: 1.3; /* A label with no space in it -- "Stop · 1.4s" -- has only the separator to break at, and a longer one would have nothing at all. Breaking mid-word is ugly; overflowing the rail is unreadable. */ overflow-wrap: anywhere; } .effects .ef-sep, .effects .ef-time { color: var(--muted); } .side.right .effects .effect { border-color: var(--right); color: var(--right-text); background: color-mix(in srgb, var(--right) 12%, transparent); } /* A DEBUFF IS DRAWN IN THE CASTER'S COLOUR (Jam, JIO-1942), which is what `data-source` on the chip is for (ui/hud.ts). The two rules above colour this row by the CARD it sits in, and that was right while every effect in the game was self-cast: the board wearing one and the board that bought it were the same board. A jam runs on the side it was cast at, so the victim's card would otherwise draw it in the victim's own accent -- a chip that reads as something they did to themselves. Same specificity as the two above (three classes and an attribute against four classes) and written after them, so order is what decides it: a self-cast chip publishes its own side here and lands on exactly the colour it already had, which is why this is one pair of rules and not a third state. */ .side .effects .effect[data-source="left"] { border-color: var(--left); color: var(--left-text); background: color-mix(in srgb, var(--left) 12%, transparent); } .side .effects .effect[data-source="right"] { border-color: var(--right); color: var(--right-text); background: color-mix(in srgb, var(--right) 12%, transparent); } /* Endless (solo): one board, and the whole of the opponent's side goes with the opponent (JIO-1073). This used to empty `.side.right` rule by rule -- their status, their board, then their meter and callout when JIO-1071 added them -- and keep the box, because the Endless score card was a child of it. The card is a child of `.side.left` now (see dicelock.html), so what is left here is an empty grid box with a gap on each side, and the mode that already had nothing to put in that column says so the way puzzle mode does, in one rule. It also takes the NEXT component that lands on the opponent's side with it for free, which is the half the rule-by-rule form kept getting wrong. */ .solo-panel { display: none; } /* TWO SELECTORS, AND THE SECOND IS THE ONE THAT DOES THE WORK ON A PHONE. The rail block further down puts `display: grid` on the same element, at the same (0,4,0) specificity and later in the file, so the plain form here loses to it and the opponent's block comes back into an Endless rail -- in the very cell the score card is placed in, one drawn over the other. That is what it looked like at 375x667 with the plain form alone, inside this ticket and before the `.compact` selector was added (measured 2026-09-12) -- and it is why the old rule-by-rule version reached for the CHILDREN: each of those carried a class more than the rail rule did and won by accident. Puzzle mode below has needed the pair since JIO-927 and never had it: nothing hid ITS children, so a puzzle on a phone drew an `AI` card and an empty black opponent board in the rail, in a mode that has no opponent. Measured at HEAD the same day, with the same screenshot. */ .app:is([data-mode="solo"], [data-mode="tower"]) .side.right, .app.compact:is([data-mode="solo"], [data-mode="tower"]) .side.right { display: none; } /* ...but a duel's is Versus's corner window on a portrait phone (JIO-1818): absolutely positioned, so it costs your board nothing. On `.duel`, never the mode; main.ts's oppWindowUp() asks the same gate before rendering it. */ .app.compact.duel[data-mode="tower"]:not(.landscape):not(.opp-hidden) .side.right { display: grid; } .app[data-mode="solo"] .solo-panel { display: grid; gap: 10px; align-content: start; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px; max-width: 320px; } .solo-title { font-weight: 700; color: var(--right-text); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.8125rem; } .solo-stat { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 0.875rem; } .solo-stat .k { color: var(--muted); } .solo-stat .v { font-family: var(--mono); font-weight: 600; } .solo-stat .v.big { font-size: 1.75rem; } .solo-stat .v.beating { color: var(--left-text); } .solo-hint { color: var(--muted); font-size: 0.75rem; margin: 4px 0 0; } .stats.score-block .big { font-size: var(--t-h2); } /* ENDLESS OFF A PHONE (JIO-1073): one board with its meter on the inner edge and the score card on the LEFT, under your status panel. `:not(.compact)` AND NO MEDIA QUERY. The width at which the rail shape takes over is COMPACT_MAX_WIDTH in main.ts -- deliberately not written in this file, because layout() sizes the canvas in px and the two have to agree about which shape is on screen (JIO-834) -- and `compact` is the class it publishes to say so. A `min-width: 701px` here would have been that number written twice, and it would have been wrong on a landscape phone, which is 667-932px wide and compact anyway. It also makes this one shape for EVERY non-compact width rather than two: the status panel goes above the board below 900px because two boards cannot each afford a 200px column beside them, and one board can. At 768x1024 that is the difference between a cell of 48 and a cell of 64. Placed explicitly, all five, for the reason the .app rows are: auto-flow puts the card in row 2 of a grid whose row 1 is the BOARD, which is 787px down the page and off the bottom of it. The board and the meter span both rows and the two cards stack in the first column, so the card sits under the status panel and beside the dice. The arena is ONE track here and not the two equal halves two boards need. Left at two, this mode parked the board and the card in the left half and left the right half of a 1440px screen empty; centred, the group is where the eye already is. main.ts's layout() reads the same fact off `data-mode` -- see the `oneBoard` branch there -- so the cell is sized against the width this shape really has, and the status panel is not moved above the board either. TWO MODES WEAR THIS SHAPE SINCE JIO-1232, and they are written as one `:is()` rather than as a second copy of the block: a Tower step is one board with nobody on the other side of it, which is what every rule here is about. `engine/battle.ts`'s SOLO_MODES is the same fact in the engine and `alone(this.app.dataset.mode)` is how layout() reads it, so the three cannot drift into disagreeing about which shape is on screen. WHAT THE TOWER DOES *NOT* TAKE WITH IT is the score card -- `.solo-panel` is `display: none` outside Endless and stays that way. ~~The Tower's readout is the target bar in the top bar~~ The Tower has a card of its own in the same slot, `.tower-side` below, holding the step's goal and what a Guardian fight adds to it; a panel reporting a best, a speed and a clock that a step does not have is the argument the puzzle's own missing panel is made of. It is still PLACED by the rule below, because placement is a property of the shape and display is a property of the mode; a child of `.side.left` that one shape does not place lands wherever auto-flow puts it the day somebody shows it. */ .app:not(.compact):is([data-mode="solo"], [data-mode="tower"]) .arena { grid-template-columns: minmax(0, 1fr); } .app:not(.compact):is([data-mode="solo"], [data-mode="tower"]) .side.left { justify-content: center; /* Re-declared, not inherited: the `max-width: 900px` band rewrites `.side` to the two columns the two-board shape needs there, and this shape keeps three at every width it covers. */ grid-template-columns: var(--status-col) minmax(0, auto) 44px; grid-template-rows: min-content minmax(0, 1fr); } .app:not(.compact):is([data-mode="solo"], [data-mode="tower"]) .side.left > .status { grid-column: 1; grid-row: 1; } .app:not(.compact):is([data-mode="solo"], [data-mode="tower"]) .side.left > .solo-panel { grid-column: 1; grid-row: 2; } .app:not(.compact):is([data-mode="solo"], [data-mode="tower"]) .side.left > .board { grid-column: 2; grid-row: 1 / span 2; } .app:not(.compact):is([data-mode="solo"], [data-mode="tower"]) .side.left > .meter { grid-column: 3; grid-row: 1 / span 2; } /* THE TOWER'S READOUTS, BESIDE THE BOARD AND NOT ABOVE IT. Off a phone the step's goal, a Guardian's `top` object and the mutation chips are children of `.tower-side` -- main.ts's placeTowerReadouts() moves them in -- so none of them is a row of the page and the board is the size Endless draws it, in a step and in a fight alike (docs/decisions/0038). It is the slot Endless's score card has. Empty and `display: none` on a phone, where the three are back in the rows dicelock.html writes them in. */ .tower-side { display: none; } .app:not(.compact)[data-mode="tower"] .side.left > .tower-side { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; } /* The goal as the card Endless's score is: the same panel, the same 16px. The two words stack because the column is 200px (160 under 1100) and the row's one line needed the board's whole width; nothing measures this height any more, so it may be two lines. */ .tower-side .step-goal { padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; } .tower-side .step-goal .goal { width: auto; gap: 8px; } .tower-side .step-goal .goal-line { flex-direction: column; align-items: flex-start; gap: 6px; } .tower-side .step-goal .goal-want { text-align: left; } /* No tokens in the column (JIO-1899), so no room kept for them. */ .tower-side .step-goal .goal-line { padding-right: 0; } /* The object keeps the height the band had and the drawing's own 900x240, so it is WIDER than the column: it is pinned to the column's right edge -- the board's side -- and leans out over the empty page to the left, as far as `--side-x` says there is page (main.ts's syncMeters()). Never narrower than the column, where the drawing simply scales down. */ .tower-side .guardian-object[data-place="top"] { position: static; inset: auto; z-index: 0; /* No taller than a sixth of the viewport, which is the band's old clamp and is still what keeps it clear of the chips in a short window. */ height: clamp(56px, 16dvh, 132px); opacity: var(--guardian-object-band, 0.72); flex: none; align-self: flex-end; aspect-ratio: 900 / 240; max-width: max(100%, calc(100% + var(--side-x, 0px) - 24px)); } .tower-side .guardian-object[data-place="top"] > svg { width: 100%; height: 100%; } /* The chips from the left edge, wrapping in the column: centred is what a row the width of the bar wanted. */ .tower-side .guardian-chips { flex: none; justify-content: flex-start; margin-top: 0; } /* Over the board, which is now two rows tall: the callout is placed by area and an area that stopped at row 1 would put it over the status panel. */ .app:not(.compact):is([data-mode="solo"], [data-mode="tower"]) .side.left > .board-overlay { grid-column: 2; grid-row: 1 / span 2; } /* Puzzle mode (JIO-927) wears Endless's one-board shape: the opponent's side of the arena goes entirely, and the board keeps the column and the status panel it has in every other mode. It does NOT take Endless's score panel with it -- a puzzle has no score and no rise, and a panel reporting numbers that are all zero is worse than an empty column. (It has no MATCH clock either -- the Daily's own stopwatch is in the row below the board, not up here, and the thirty fixed puzzles have none at all: JIO-1088.) The top bar carries the budget as text (ui/hud.ts: the clock slot holds `1/2 changes`) and the HUD below the board carries it as dots -- one readout in two forms, both read off the same Puzzle, so they cannot drift. */ .app[data-mode="puzzle"] .side.right, .app.compact[data-mode="puzzle"] .side.right { display: none; } /* The meter and the ability it would roll go with them: a puzzle charges no meter (main.ts zeroes the gain, and says why), so a bar that never moves and a "Random next" that never rolls are two readouts promising something the mode does not have. */ .app[data-mode="puzzle"] .meter, .app[data-mode="puzzle"] .ability-pick { display: none; } /* And so does the cursor-dice readout, for the same reason rather than for room: it reports the risk of rerolling each die and whether the reroll is ready, and in a puzzle a reroll takes a printed face, cannot lock, and is refused outright on a die with no pip (engine/puzzle.ts). "Low 1/6 · Reroll ready" over a die that cannot be rerolled at all is the one kind of readout worse than none. */ .app[data-mode="puzzle"] .dice-info { display: none; } /* ---- A BOARD THAT HOLDS A PUZZLE, WHICHEVER MODE IT IS (JIO-1797) --------- `data-mode` is the MODE and this class is the BOARD. A Tower puzzle step is a board with a Puzzle laid on it in `tower` mode, so every rule above that is about what the board does NOT have is true of it -- plus the Undo/Reset row, the one about what it DOES have, which a step was played without because the row's `display` keyed on the mode. THE RULES ABOUT A LEVEL STAY ON THE ATTRIBUTE, which is why this is a second block: a step wears its FLOOR's world, so the ground, the row's tint and the heading colour are a level's. main.ts toggles it in `applyPuzzleTheme()`, beside every `this.puzzle`. */ .app.puzzle-board .side.right { display: none; } .app.puzzle-board .meter, .app.puzzle-board .ability-pick { display: none; } /* NO RAISE ON A PUZZLE BOARD (JIO-2046, docs/decisions/0214). A held raise does nothing on a puzzle -- ui/puzzleRun.ts's raiseAllowed() is false and engine/puzzle.ts ignores it -- and the deck still drew it as the biggest of its three buttons. The button STAYS IN THE MARKUP (TOUCH_LABELS, the tutorial and test/touch.test.js read the deck out of the file); it is not drawn here, the two rerolls share the row, and the row is the rerolls' own 48px rather than the 56 the raise stood up to. */ .app.puzzle-board .deck .deck-raise { display: none; } .app.compact.puzzle-board .deck { height: 48px; } .app.puzzle-board .dice-info { display: none; } .app.puzzle-board :is(.puzzle-hud, .puzzle-count):not([hidden]) { display: flex; } .app.compact.puzzle-board .side.left > .cursor-risk { display: none; } /* ---- the puzzle HUD (JIO-928) -------------------------------------------- A row under the arena, shown only in puzzle mode. It holds the whole of what a puzzle player reads and presses: N dots that fill as changes are spent, three buttons, and -- on the Daily alone -- the clock (JIO-1088). No score and no meter: a puzzle has neither, and a readout of a number that never changes is worse than an empty row. The clock was in that list until JIO-1088, and it is out of it because the Daily is the one board everybody plays on the same day and so the one that can be ranked. ~~The one note levels 5-6 need~~ was in it until JIO-1211, which folded that sentence into the first-encounter card (JIO-1210): the row says what this attempt has spent and never what the board's furniture means. */ /* FLEX AND WRAPPING, not a three-column grid. Measured 2026-09-08 at 375x667: as a grid of `auto minmax(0,1fr) auto` the dots and the three buttons are two auto tracks that cannot shrink below their own content, so the note's track collapsed to zero width and its one sentence wrapped to a word a line -- a 212px row, which took the board's cell from 39px to 28. Flex let it wrap to a LINE of its own instead of to a column of words, and the row was ~76px at the same viewport. The note is gone (JIO-1211) and the wrapping is not: what pushes the row past a phone's width now is the state line, which reads ~~"Playing the solution -- Pause stops it"~~ "PLAYING THE SOLUTION" while the solution plays and ~~"Undo or Reset"~~ "UNDO OR RESET" on a stuck board (JIO-1892 put the label UNDER the dots, in a 12px display face), and the row wraps to a count above the buttons rather than overflowing (the arithmetic is under .app.compact .puzzle-hud). Every pixel of this row is a pixel off a 13-row board, which is why its height is measured rather than eyeballed. */ .puzzle-hud { display: none; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; /* THE BOTTOM INSET IS THIS ROW'S (JIO-1908). It is the last row of the page whenever it is drawn, so the home indicator sits under it; the arena's own inset is taken off below while it is up. */ padding: 8px calc(16px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)); border-top: 1px solid var(--line); background: var(--panel); } .app[data-mode="puzzle"] :is(.puzzle-hud, .puzzle-count):not([hidden]) { display: flex; } /* THE MOVES LEFT'S OWN ROW (JIO-1908): between the bar and the board, centred, where the eye already is during play. It is the Tower goal row's slot, and a Tower Puzzle step draws no goal row, so the two never stand together. */ .puzzle-count { display: none; justify-content: center; align-items: center; padding: 6px calc(16px + env(safe-area-inset-right)) 8px calc(16px + env(safe-area-inset-left)); border-bottom: 1px solid var(--line); background: var(--panel); } /* ---- THE LOCKBOX (JIO-2041) -------------------------------------------------- A puzzle board is a lockbox (George chose the look on 2026-10-20 over a tray and a blueprint). The moves-left row and the arena are ONE BODY -- an amber frame round both, the row's corners above and the arena's below -- the dials in the row are the combination, and the shackle stands over the row. `data-lock` on the row is the state: set, jammed, unlocked, shown. The Tower's puzzle steps are not this: they are Tower boards under a goal row. */ .app[data-mode="puzzle"] .puzzle-count:not([hidden]) { position: relative; margin: 64px 12px 0; border: 3px solid var(--right); border-bottom: 0; border-radius: 16px 16px 0 0; background: var(--panel); transition: border-color 200ms, box-shadow 300ms; } /* ON A DESKTOP THE BODY HUGS THE COLUMN, not the window: a lock 1,400px wide round a 280px board is a frame and not a lock. 720 is §4's shell column. */ .app:not(.compact)[data-mode="puzzle"] :is(.puzzle-count:not([hidden]), .arena) { width: min(100% - 24px, 720px); margin-left: auto; margin-right: auto; box-sizing: border-box; } .app[data-mode="puzzle"] .arena { margin: 0 12px 8px; border: 3px solid var(--right); border-top: 0; border-radius: 0 0 16px 16px; background: var(--panel); transition: border-color 200ms, box-shadow 300ms; } /* THE SHACKLE: a U of two straight legs and a rounded top, never a half circle -- 84 tall on a 50 radius leaves 34px of leg, and the legs run 12px into the body. It pivots on its left leg to open and rattles when jammed. */ .lock-shackle { position: absolute; left: 50%; top: -72px; z-index: 2; width: 120px; height: 84px; margin-left: -60px; box-sizing: border-box; border: 12px solid var(--right); border-bottom: 0; border-radius: 50px 50px 0 0; transform-origin: 12px 100%; transition: transform 300ms ease-out, border-color 200ms; pointer-events: none; } .app:not([data-mode="puzzle"]) .lock-shackle { display: none; } /* SET: the dials are the combination. A dial is a 28px ring in amber with its number until its move is made, and teal and solid once it is. */ .app[data-mode="puzzle"] .ph-dots { counter-reset: dial; gap: 8px; } .app[data-mode="puzzle"] .ph-dots i { counter-increment: dial; width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--right); background: transparent; color: var(--right-text); display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 400; font-size: 0.75rem; line-height: 1; transition: background-color 120ms, border-color 120ms; } .app[data-mode="puzzle"] .ph-dots i::after { content: counter(dial); } .app[data-mode="puzzle"] .ph-dots i.set { background: var(--left); border-color: var(--left); color: var(--ink); } .app[data-mode="puzzle"] .puzzle-count[data-left="1"] .ph-dots i.on { background: transparent; border-color: var(--right); } /* JAMMED: every dial set and dice still standing. The last dial goes red, the body's edge and the shackle go red, the shackle rattles, and the two buttons that get the player out light up. This replaces the hollow red dots. */ .app[data-mode="puzzle"] .puzzle-count.stuck .ph-dots i { border-color: var(--left); background: var(--left); color: var(--ink); } .app[data-mode="puzzle"] .puzzle-count.stuck .ph-dots i.bad { border-color: var(--danger); background: var(--danger); } .app[data-mode="puzzle"] .puzzle-count[data-lock="jammed"], .app[data-mode="puzzle"]:has(.puzzle-count[data-lock="jammed"]) .arena { border-color: var(--danger); } .puzzle-count[data-lock="jammed"] .lock-shackle { border-color: var(--danger); animation: lock-rattle 120ms ease-in-out 2; } @keyframes lock-rattle { 0%, 100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(3px) rotate(3deg); } 75% { transform: translateX(-3px) rotate(-3deg); } } .app[data-mode="puzzle"]:has(.puzzle-count[data-lock="jammed"]) .puzzle-hud button:not([disabled]) { border-color: var(--left); color: var(--left-text); } /* UNLOCKED: the shackle swings open on its left leg, the body goes teal and glows, the row says UNLOCKED. main.ts holds the poster for LOCK_OPEN_MS. */ .app[data-mode="puzzle"] .puzzle-count[data-lock="unlocked"], .app[data-mode="puzzle"]:has(.puzzle-count[data-lock="unlocked"]) .arena { border-color: var(--left); box-shadow: 0 0 44px rgba(45, 212, 191, 0.35); } /* The swing is small -- 8px up and 14 degrees on the left leg -- because the row stands 64px under the top bar and a shackle that swung further would go under it (the first build's -32 degrees did, measured on a phone). */ .puzzle-count[data-lock="unlocked"] .lock-shackle { border-color: var(--left); transform: translate(0, -8px) rotate(-14deg); } .puzzle-count[data-lock="unlocked"] .ph-state { color: var(--left-text); } /* SHOWN: the solution plays in grey -- the dials it sets, the body and the shackle -- and the clear pays one star, which the poster says. */ .app[data-mode="puzzle"] .puzzle-count[data-lock="shown"], .app[data-mode="puzzle"]:has(.puzzle-count[data-lock="shown"]) .arena { border-color: var(--muted); } .puzzle-count[data-lock="shown"] .lock-shackle { border-color: var(--muted); } .app[data-mode="puzzle"] .puzzle-count[data-lock="shown"] .ph-dots i.set { background: var(--muted); border-color: var(--muted); } .app.reduced-motion .lock-shackle { transition: none; animation: none; } /* THE POSTER'S ART: the open lock, drawn in CSS on the puzzle field -- the body and the swung shackle -- so the result reads as the thing just opened. */ .overlay .poster[data-field="puzzle"] .poster-field { position: relative; } .overlay .poster[data-field="puzzle"] .poster-field::before { content: ''; position: absolute; right: 24px; top: 112px; width: 54px; height: 40px; border-radius: 8px; border: 3px solid var(--left); background: var(--panel); box-shadow: 0 0 24px rgba(45, 212, 191, 0.35); } .overlay .poster[data-field="puzzle"] .poster-field::after { content: ''; position: absolute; right: 28px; top: 76px; width: 46px; height: 40px; box-sizing: border-box; border: 7px solid var(--left); border-bottom: 0; border-radius: 20px 20px 0 0; transform-origin: 7px 100%; transform: translate(-4px, -8px) rotate(-32deg); } /* ---- THE TOWER WALKTHROUGH (JIO-2066): the Spotlight on the stair ---------- ~~One screen per beat: the act and its pips, a drawing, the caption~~ (JIO-2044). It is the real stair screen at a scripted climb with ONE layer laid over it by ui/towerRun.ts, rebuilt per beat from measured boxes: the wash is one SVG path with the chrome row, the plaque and the lifted controls cut out of it, the die and the door are a second copy of the stair's own over the wash, and the pill and the band are the shipped `.spot-pill` and `.spot-band` above. In the overlay and not in the panel, over the sheet scrim (z 1) and the panel's own tab bar (z 4), because a beat is laid over a sheet and over a poster as well as over the stair. */ .overlay .spotlight.tower-spot { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 1; transition: opacity 250ms linear; } .app.reduced-motion .overlay .spotlight.tower-spot { transition: none; } .tower-spot-wash { position: absolute; left: 0; top: 0; display: block; overflow: visible; } /* The 78% of #0a0c10 every walkthrough's wash is (docs/decisions/0186). */ .tower-spot-wash path { fill: #0a0c10; fill-opacity: 0.78; } .tower-spot-ring, .tower-spot-glow { fill: none; stroke: var(--spot, var(--left)); } .tower-spot-glow { stroke-opacity: 0.35; } .tower-spot-map { position: absolute; pointer-events: none; } .tower-spot-map .tower-stair { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; } /* A held beat's tap lands here, on the pill or on the band -- and nowhere else, so the chrome row's back arrow is still the way to the pause sheet. */ .tower-spot-catch { position: absolute; pointer-events: auto; cursor: pointer; } .tower-spot .tower-spot-press { pointer-events: auto; cursor: pointer; } /* The band is the act's colour with the page's ink on it, as the stair storyboard draws all four; the arena's band is white on red. */ .tower-spot .spot-band { color: var(--ink); border-radius: 6px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); } .tower-spot .spot-band .spot-tap { opacity: 0.75; } /* The pill's second line wears the beat's colour -- amber under the Guardian's door and the rebuff, red under TOPPED OUT -- as the storyboard draws it; the arena's pill keeps its teal. */ .tower-spot .spot-pill .spot-note { color: var(--spot, var(--left)); } /* The act and its pips, where the FLOORS pill stands outside the walkthrough. */ .tower-run-place { display: inline-flex; align-items: center; gap: 10px; height: 36px; } .tower-run-act { font-family: var(--display); font-weight: 400; font-size: 0.75rem; letter-spacing: 0.08em; color: var(--text-2); white-space: nowrap; } .tower-run-pips { display: inline-flex; gap: 6px; } .tower-run-pips i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); display: inline-block; } .tower-run-pips i.on { background: var(--left); } /* While the walkthrough is up the tab bar and the ? are drawn and not pressable: the only ways out are the pause sheet's. */ .app[data-tower-run] .overlay .panel > .tabbar, .app[data-tower-run] .overlay .panel > .chrome-bar .chrome-help { pointer-events: none; } /* ...and there is no board under it (docs/decisions/0212), so the arena, the in-game bar and the deck that TOPPED OUT, the card and the poster are drawn over in play are not drawn here: an empty board and a COMPUTER window with nothing in it, showing through a card about losing, read as a board. */ .app[data-tower-run] .topbar, .app[data-tower-run] .arena, .app[data-tower-run] .footer { visibility: hidden; } /* ---- the replay transport (JIO-992) --------------------------------------- The row under the arena while a kept run is watched back: the run's name and its clock, the scrubber, and the four controls. A ROW and not a panel over the board, the same call the puzzle HUD was built on (JIO-928): it is pressed as well as read, and what it is about is the board it would otherwise cover. It is a column and not a wrapping flex row, unlike that one, because the scrubber has to be the full width of the page at every viewport -- a slider sharing a line with four buttons on a 375px phone is a 90px slider over a three-minute run, which is about a second of run per pixel. main.ts's chromeHeight() measures this row, so the boards are sized with it on screen. `[data-state="replay"]` and not a mode: a replay is a STATE the whole app is in -- there is no battle, no input reaches a board, and the deck and the two match buttons in the top bar are hidden below for the same reason. The mode is still set beside it, because how the arena lays out (one board and a rail, or two) is a fact about the run being replayed. */ .replay-hud { display: none; flex-direction: column; gap: 6px; padding: 8px calc(16px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)); border-top: 1px solid var(--line); background: var(--panel); } .app[data-state="replay"] .replay-hud:not([hidden]) { display: flex; } .rp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; } .rp-name { font-size: 0.8125rem; font-weight: 600; } .rp-clock { font-family: var(--mono); font-size: var(--t-mono); color: var(--muted); } /* The full width, and 44px tall on every pointer rather than only a coarse one. scripts/probe-touch.ts measures every inherits its size from the paragraph but not its metrics: the UA stylesheet's monospace default lands it at ~0.83em, which under the 14px small print is 11.6px -- a run of prose below the floor that nothing in this file had ever set a size for. */ .overlay code { font-family: var(--mono); font-size: 1em; } .overlay .result-title.victory { color: var(--left); } .overlay .result-title.defeat { color: var(--danger); } .overlay .result-title.draw { color: var(--muted); } /* THE RESULT SHEET (JIO-1076) -- design/pages/gameplay/Results.dc.html. The reason line is BODY TEXT and not the muted lede every other screen's `.tagline` is. It is the one sentence this screen exists to say -- "They buried you. Rematch?" -- and the sheet sets it in the text colour at the lede size, under a verdict rather than under a screen title. */ .overlay .result-why { color: var(--text); font-weight: 400; font-size: var(--t-lede); line-height: 1.5; margin: 6px 0 0; } /* Who the match was against, in one pill: amber with ink on it, the pair already used for a die face and the right-hand side's accent. THERE ARE TWO `.chip`s IN THIS FILE AND THEY ARE NOT THE SAME COMPONENT. This one is a static label on a result screen; `.overlay .menu .chips .chip` is High scores' speed selector, which is a radio button (JIO-1081). The word is the speed selector's by right -- FOUNDATION §3 lists `chip 999` among the radii and `design/pages/menu/NOTES.md` calls those three chips -- and the selector's own rules are four classes deep, so they cannot reach each other whichever screen is open. ui/screens.ts queries `.chips .chip` rather than `.chip` for the same reason: a selector that is right only because the two never share a screen is right until they do. */ .overlay .result-vs { margin: 10px 0 0; } /* THE REMATCH VOTE, DIRECTLY OVER THE BUTTON IT IS ABOUT (JIO-1171): what this seat has asked for, or what the other one has. It is small print rather than a second lede -- the verdict is still the sentence this screen says, and this is a note about what the next press will do -- and it sits under the stats card so that the eye reaches it on the way to the buttons rather than after them. The colour is the muted one every other note on a menu screen takes: a line that appears only while somebody is waiting is already the newest thing on the screen without being coloured like an alarm. */ .overlay .result-rematch { color: var(--muted); font-size: var(--t-small); font-weight: 600; margin: 10px 0 0; } .overlay .chip { display: inline-block; font-family: var(--display); font-weight: 400; font-size: var(--t-small); color: var(--ink); background: var(--right); border-radius: 999px; padding: 4px 10px; line-height: 1.1; } /* The sheet's stats panel: one card, the labels in the body face and the numbers in mono, right-aligned under the column head they belong to. The alignment is `nth-child` rather than a class on every cell because the grid is strictly three spans to a row -- a class would have to be written on twenty-one of them and would be forgotten on the twenty-second. */ .overlay .stats.stats-card { font-family: var(--font); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; gap: 6px 16px; margin: 12px 0 0; } .overlay .stats.stats-card .h { font-weight: 600; } /* THE SCORE BLOCK'S LABEL COLUMN IS `auto`, NOT `1fr`. The long cells on that block are the values -- "12,450 · NEW HIGH SCORE" is wider than anything in the stats table under it -- and with the label column flexible they were what got squeezed: "Best on Hard" and "All-time best" each wrapped to two lines, and those two lines are what pushed the Endless result's last row of buttons below the fold of a 390x844 frame. A label never wraps; a value may. */ .overlay .stats.score-block.stats-card { grid-template-columns: auto 1fr auto; } .overlay .stats.stats-card .l, .overlay .stats.stats-card .r { font-family: var(--mono); } .overlay .stats.stats-card > span:nth-child(3n+2), .overlay .stats.stats-card > span:nth-child(3n) { text-align: right; } /* THE COACHING CARD, where the statistics table goes on a quiet loss (JIO-1318). Same card as the stats panel -- same fill, line, radius and pad -- because it stands in exactly its place and a different-looking box would read as a warning rather than as the screen's own answer. The head is the stats table's `.h` in every respect but the letter-spacing, which it needs because it is three words rather than one column label. */ .overlay .coach-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 12px 0 0; } .overlay .coach-head { margin: 0; font-family: var(--display); font-size: var(--t-small); letter-spacing: 0.06em; color: var(--muted); } .overlay .coach-line { margin: 8px 0 0; font-size: var(--t-small); line-height: 1.5; color: var(--text); } /* A LIST AND NOT A PARAGRAPH (2026-10-21): two short tips with the browser's own bullets, under the head, at the card's text size. */ .overlay .coach-list { margin: 8px 0 0; padding: 0 0 0 18px; } .overlay .coach-list .coach-line { margin: 4px 0 0; } .overlay .coach-line strong { color: var(--left-text); font-weight: 700; } /* The key it names is drawn by the shared rule further down, which this selector is added to rather than copied -- the help overlay, the rules cards, the keybind chart and the puzzle sheet all print keys, and a fifth drawing of one is a fifth thing to forget when the key style changes. */ /* The two the sheet pairs on one row (Change opponent | History). They are still two menu items and still carry their own `data-row`, so the pad and the arrow keys walk left and right across the pair. */ .overlay .btn-pair { display: flex; gap: 8px; } .overlay .btn-pair .btn { flex: 1; min-width: 0; } /* THE NEXT RUNG, UNDER THE WAYS OFF EVERY RESULT SCREEN (JIO-1465). One line and one button ON THE SAME ROW, which is all the Endless result can afford: that screen has the least room of anything in the game that is not a list -- it is the one result screen this row makes scroll (SPEC 13) -- and a stacked line over a full-width button would have cost it the sentence, the gap and the button together. Side by side the row costs the button's own 44px. The line is the muted small print every note on a menu screen is set in -- it is a recommendation, not the sentence the screen exists to say -- and it takes the width the button leaves rather than the button shrinking to it: a two-word destination and a nine-word line must not swap sizes between screens. The margin is written here in full so the row does not pick up `.menu`'s 16px top and bottom -- and on a result screen it is not what spaces the row at all, because `.panel.menu-panel > *` zeroes margin-block and the panel's own gap does it. Where it does apply, the Tower's floating card, the block above stops being `.menu:last-child` and the 16px that rule drops comes back, so this 12px collapses into a 16 (JIO-1465, measured) -- which is the number design/pages/tower draws that gap with. */ .overlay .menu.next-rung { flex-direction: row; align-items: center; gap: 10px; margin: 12px 0 0; } .overlay .next-rung .rung-line { flex: 1; min-width: 0; margin: 0; font-size: var(--t-small); font-weight: 600; line-height: 1.4; color: var(--muted); } .overlay .next-rung .btn { flex: 0 0 auto; width: auto; padding: 0 14px; } /* ============================================================================ THE RESULTS POSTER (JIO-1500) -- design/pages/results/ and its NOTES.md, the row George picked on 2026-09-29. ONE SECTION FOR FOUR SCREENS, and it is here rather than at the end of the file because it stands exactly where the result sheet above it does: the two are the same screen before and after the pick, and a reader who comes looking for what a finish looks like must not find the old answer under the heading and the new one 4,700 lines below it. EVERY FIELD TOKEN IS IN THIS BLOCK. JIO-1501..1504 wire the four modes onto `posterBody()` and ~~NONE of them adds CSS~~ **none of them adds a FIELD** -- a mode names its field (`data-field`, one of ui/screens.ts's POSTER_FIELDS) and hands in at most the two paints that are data rather than a token. Four tickets each writing their own field colour is four near-copies of this block, which is what the one builder exists to stop. The struck absolute did not survive the Tower (JIO-1503): its hero is three star GLYPHS and not a number, and where they are drawn decides their colour -- teal on the map's sheet, the field's own ink here -- which is three declarations under `.poster-hero` below and is not a field. THE BANDS ADD UP TO THE FRAME: 486 + 84 + 274 = 844. The foot is what is LEFT rather than a third fixed number, so a taller phone spends the extra on the controls, and the strip is a MINIMUM, so a key that wraps to a third line takes the foot's slack instead of being clipped. ~~AND A SHORTER PHONE IS THE SAME SUM READ BACKWARDS~~ -- **it is not, and that was never written down** (JIO-1552, 2026-09-30, docs/decisions/0073). BELOW 844 THE FIELD IS THE BAND THAT PAYS -- it is bare colour by direction and the only band with anything to give -- and the foot no longer shrinks at all. Two `flex` shorthands further down, and no second number anywhere. §2's FLOOR WINS OVER THE DRAWING. The artboards set the label at 12 and a cell's key at 11, which is what a drawing can afford and a screen cannot (§2: 14px is the floor for anything a player reads). Both take --t-small, and the consequence lands on the four mode tickets rather than here -- a cell's key is two short words, because three lines of 14px do not fit an 84px strip. THE HERO IS THE ONE SIZE OFF THE SCALE: §2 tops out at the wordmark's 40 and this is the drawing's 84, a token so the Tower can pass 64 for three star glyphs, which are wider than any number. ========================================================================== */ .overlay .poster { /* The bands, and the hero the field is built around. */ --poster-field: 486px; --poster-strip: 84px; --poster-hero: 5.25rem; /* THE FOUR FIELDS, UP FRONT AND NAMED, so a mode ticket reaches one by name and adds no CSS of its own. Endless is face 5 and Puzzles is face 1 -- the die faces themselves, which is why test/screens.test.js asserts these two against `render/renderer.ts`'s FACE_COLORS rather than trusting a hex typed twice. Versus is `--left`, the player's own side of every board in this game, with the opponent's amber naming the computer at the foot of it. The Tower's is the floor's own world, off the skin tokens `applyWorld()` writes. NONE OF THEM HAS A LIGHT VARIANT OF ITS OWN, and two of the four are the same colour in both palettes for it: a die face is a die face (FOUNDATION §1) and so is a world skin. ~~So the FOOT is what flips.~~ **Versus flips too** (JIO-1502, 2026-09-29: `--left` is #2dd4bf on the dark palette and #0f9f92 on the light one, two declarations up this file) -- not because a variant was added here but because `--left` IS a palette token, mixed for each page, and so is the `--right` the band under it takes. That is the pairing being kept rather than broken: a teal mixed for a dark page, pasted onto a light one beside a re-lit amber, would be the two sides of the board no longer matching the board. The struck clause is kept because it is still true of the other three. */ --field-endless: #b28dff; --field-versus: var(--left); --field-puzzle: #5eb0ff; --field-tower: linear-gradient(180deg, var(--world-top, var(--panel)), var(--world-bottom, var(--panel-2))); --field: var(--panel); --field-ink: var(--ink); /* The muted ink ON the field: the label and the warm line. Ink at 68% rather than `--muted`, which is a grey mixed for a dark page and would be a smear on face 5. */ --field-sub: rgba(11, 13, 18, 0.68); /* What the primary button is filled with. It is separate from `--field` because the Tower's field is a gradient and a border-color cannot be one. */ --field-accent: var(--field); display: flex; flex-direction: column; height: 100%; min-height: 100%; background: var(--bg); color: var(--text); } .overlay .poster[data-field="endless"] { --field: var(--field-endless); } .overlay .poster[data-field="versus"] { --field: var(--field-versus); } .overlay .poster[data-field="puzzle"] { --field: var(--field-puzzle); } /* THE TOWER'S FIELD IS THE FLOOR IT WAS CLIMBED ON, read here rather than passed in: `applyWorld()` already puts the skin's two ground stops and its heading colour on the element it is handed (ui/world.ts's WORLD_TOKENS), so a nineteenth world arrives on this screen with nothing edited. The ground is wanted at FULL strength -- 0.55 is the wash a Tower SCREEN wears behind a board, and here the field IS the thing (results/NOTES.md) -- which is the caller's business: the strength is an argument to `worldStyle()`, not a colour. The ink is light, because a world ground is dark in both palettes. */ .overlay .poster[data-field="tower"] { --field: var(--field-tower); --field-ink: var(--world-ink, var(--text)); --field-sub: rgba(232, 236, 243, 0.82); --field-accent: var(--world-ink, var(--left)); } /* THE FIRST GAME'S FIELD IS THE PLAYER'S OWN TEAL (JIO-1986). A modifier on whichever field the finish already names rather than a fifth field: the run is still a Survival run, so `data-field` is still `endless` and everything but the colour is the poster above. `--left` says "yours" (FOUNDATION §1, and the Versus poster's field is the same token). ONE DECLARATION, because the rest follows: `--field-accent` is `var(--field)` on the block above, so the primary goes teal with the field, and `--field-sub` is already the dark ink a light field wants. AFTER the four field rules and not before: three classes against two and an attribute is a specificity TIE, and a tie goes to whichever rule is later in the file. */ .overlay .poster.first { --field: var(--left); } /* THE PANEL IS THE POSTER. Every other menu screen is a 16/20/24 frame with a 20px column gap (the block further down); a poster is full-bleed colour to all four edges, so the gutter and the gap come off and the poster's own bands put the padding back inside themselves. Five classes, because the rule it is replacing has four. */ html .app .overlay .panel.menu-panel:has(.poster) { padding: 0; gap: 0; display: block; position: relative; } /* ...AND IT STAYS OPAQUE WITH SOMETHING BEHIND THE PAGE (JIO-1503). `html[data-behind] .app .overlay .panel.menu-panel` further down this file makes a full-bleed menu transparent so what is behind reaches it, and that rule is about a panel holding CARDS IN A GUTTER. A poster IS the frame and paints every pixel of it, and the Tower's is the one poster drawn while a world is worn -- its own field is that world, at full strength, inside the poster. Nothing on the screen moves either way; what it fixes is a panel that reported itself transparent to anything measuring the frame, which is scripts/probe-artboards.ts's fill check against an artboard root of --bg (2026-09-30). The attribute is in the selector rather than the rule being moved, because the rule it outranks is LATER in the file and a tie on specificity would go to that one. ~~`html[data-world]`~~ `html[data-behind]` SINCE JIO-1703, in step with the rule it outranks. */ html[data-behind] .app .overlay .panel.menu-panel:has(.poster) { background: var(--bg); } /* AND THE SPEAKER STAYS IN THE FIELD'S TOP-RIGHT (FOUNDATION §4). It is `show()`'s own chrome row -- the same button `setSound()` patches on every screen, not a second one drawn in the poster -- lifted out of the column and into the corner the artboards draw it in. The empty 44px box beside it goes: it exists to hold the speaker's place against a back arrow (ui/chrome.ts), and a poster never has one. */ html .app .overlay .panel.menu-panel:has(.poster) > .chrome-bar { position: absolute; z-index: 2; margin: 0; top: calc(16px + env(safe-area-inset-top)); right: calc(10px + env(safe-area-inset-right)); } html .app .overlay .panel.menu-panel:has(.poster) > .chrome-bar .chrome-spacer { display: none; } /* The field's own type is the ink the mode chose, so the speaker is too. */ html .app .overlay .panel.menu-panel:has(.poster) > .chrome-bar .chrome-sound { color: var(--field-sub); } /* ---- the field ----------------------------------------------------------- */ /* THE CONTENT SITS AT THE FOOT OF THE FIELD. Roughly the top half of every poster is bare colour, which is the direction rather than a gap: a hero at 84px only reads as one with nothing above it competing (NOTES.md). The auto margin does it, so the label stays pinned to the top row by the speaker. */ /* AND ON A SHORT PHONE THIS IS THE BAND THAT GIVES WAY (docs/decisions/0073). It was `flex: none` at 486, so a frame shorter than 844 pushed the whole overrun past the bottom: at 375x667 the rung row ended 122px under the fold. `min-height` is spelt because `overflow: hidden` makes the automatic minimum zero, and it is `min-content` rather than a px floor because the field's own content moves with the warm line's wrap (298px at 375 wide, 328 at 320). */ .overlay .poster-field { position: relative; overflow: hidden; flex: 0 1 auto; height: var(--poster-field); min-height: min-content; display: flex; flex-direction: column; padding: calc(16px + env(safe-area-inset-top)) 20px 0; background: var(--field); color: var(--field-ink); } .overlay .poster-world { position: absolute; inset: 0; } .overlay .poster-label { flex: none; height: 44px; margin: 0; display: flex; align-items: center; /* Clear of the speaker, which is out of flow in the same row. */ padding-right: 44px; font-size: var(--t-small); font-weight: 700; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase; color: var(--field-sub); } /* The verdict and its chip on ONE BASELINE, which is what lets NEW BEST sit beside GAME OVER rather than under it. */ .overlay .poster-verdict-row { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } /* FOUR CLASSES, because `.app.compact .overlay h2` takes every other h2 in the game one rung down to 24 and a poster's verdict is not a section heading: it is the screen's own word, second only to the hero, and the artboards draw it at 30. Measured at 24 in a 390x844 frame before this selector was widened (2026-09-30) -- the rule said `--t-h1` and the compact block was winning. */ html .app .overlay .poster .poster-verdict { margin: 0; font-family: var(--display); font-weight: 400; font-size: var(--t-h1); line-height: 1.05; color: var(--field-ink); } /* NOT `.chip`, which is the amber pill on the result sheet (two of them in this file already, and the comment above the first says why a third would be one too many): this one is the field's own ink on a wash of it, because an amber pill on face 5 would be the loudest thing on a screen whose hero is 84px. */ .overlay .poster-chip { flex: none; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(11, 13, 18, 0.12); border: 1px solid rgba(11, 13, 18, 0.3); font-family: var(--display); font-weight: 400; font-size: var(--t-small); line-height: 1; color: var(--field-ink); } .overlay .poster[data-field="tower"] .poster-chip { background: rgba(232, 236, 243, 0.1); border-color: rgba(232, 236, 243, 0.26); } .overlay .poster-hero { margin: 6px 0 0; font-family: var(--display); font-weight: 400; font-size: var(--poster-hero); line-height: 1; letter-spacing: 0.01em; color: var(--field-ink); font-variant-numeric: tabular-nums; } /* THE ONE HERO THAT IS NOT A NUMBER (JIO-1503): the Tower's is three star glyphs, `starRow()`'s own markup, which is drawn on the map's step sheets as well and is coloured there in teal on grey (`.tower-stars` further down). On a poster both marks are the FIELD's ink and the unearned ones are dimmed, because the field is a world ground and teal on it is a third colour nothing on the screen is in. Two opacities and not two colours, which is what the artboards draw: an outline star is the same mark not yet paid for, and a second hue would read as a different kind of thing. The letter-spacing is `.tower-earned`'s, which this replaces. */ .overlay .poster-hero .tower-stars { letter-spacing: 0.12em; } .overlay .poster-hero .tower-stars .on, .overlay .poster-hero .tower-stars .off { color: var(--field-ink); } .overlay .poster-hero .tower-stars .off { opacity: 0.42; } .overlay .poster-line { margin: 12px 0 20px; font-size: var(--t-lede); font-weight: 600; line-height: 1.45; color: var(--field-sub); } /* WHERE THE SCORE CAME FROM, UNDER THE WARM LINE (JIO-1515). The field's own muted ink at §2's small size -- the same pair the label at the top of the field and the note in the foot wear -- because it is a footnote to the hero and not a second sentence competing with the one above it. IT IS IN THE FIELD AND NOT THE FOOT, and the reason is the 274px sum: the foot holds its four rows with 12px to spare (results/NOTES.md, measured over CDP), so a fifth line there is the one screen in the game whose rule is that nothing scrolls, scrolling. The field's top half is bare colour by direction, and it is what pays for this line. THE WARM LINE CLOSES UP ABOVE IT, the same way it does above the Versus band a few rules down: the two are one block under the hero, and 20px between them would read as two unrelated sentences. */ .overlay .poster-source { margin: 0 0 20px; font-size: var(--t-small); font-weight: 700; line-height: 1.35; letter-spacing: 0.01em; color: var(--field-sub); } .overlay .poster-line:has(+ .poster-source) { margin-bottom: 8px; } /* THE BAND ACROSS THE FOOT OF THE FIELD, full-bleed inside the field's own gutter -- which is why it carries negative margins rather than the field dropping its padding for it. Amber on teal is the game's own pairing (§1): the player's side is the field and the other one names what lost on it. */ .overlay .poster-band { margin: 0 -20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 44px; padding: 0 20px; background: var(--right); color: var(--ink); } .overlay .poster-line:has(+ .poster-band) { margin-bottom: 16px; } .overlay .poster-band-who { font-family: var(--display); font-weight: 400; font-size: var(--t-small); line-height: 1.1; } .overlay .poster-band-how { font-size: var(--t-small); font-weight: 700; line-height: 1.2; } /* ---- the strip ---------------------------------------------------------- */ /* One to three cells, each a value over its key, divided by a hairline. `min-width: 0` is what lets a two-word key wrap inside its own third of the strip instead of pushing its neighbour off the frame. */ .overlay .poster-strip { flex: none; min-height: var(--poster-strip); display: flex; align-items: stretch; background: var(--panel-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .overlay .poster-cell { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 12px 14px; } .overlay .poster-cell + .poster-cell { border-left: 1px solid var(--line); } .overlay .poster-value { font-family: var(--display); font-weight: 400; font-size: var(--t-lede); line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; } /* THE ONE ACCENT A STRIP CELL MAY CARRY (JIO-1566's drawing, JIO-1569's screen): the placing, the moment the run is really on a board. `--left` is the player's own side of every board here (FOUNDATION §1). */ .overlay .poster-value.poster-accent { color: var(--left); } .overlay .poster-key { font-size: var(--t-small); font-weight: 700; line-height: 1.25; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } /* ---- the foot ----------------------------------------------------------- */ /* THE FOOT GROWS AND NEVER SHRINKS (docs/decisions/0073). At `1 1 auto` a frame the poster overflows took the shortfall off this band too, and the foot shrinking is the buttons leaving it. */ .overlay .poster-foot { flex: 1 0 auto; display: flex; flex-direction: column; padding: 16px 20px calc(24px + env(safe-area-inset-bottom)); background: var(--bg); } .overlay .poster-note { margin: 0 0 10px; font-size: var(--t-small); font-weight: 700; line-height: 1.35; color: var(--muted); } /* THE ROW THAT OPENS THE STATISTICS. A real