/* ============================================================ Resonance — the Games tab and the With-Matches game room. Work Order 153a, August 12, 2026. ------------------------------------------------------------ Its own `.g-` namespace, loaded after style.css and member.css, which carry the tokens, the nav strip, the buttons (.btn / .btn-primary / .m-btn-small), the section head and the boot shell this page reuses whole. Nothing here restyles a shared class. NO NEW KEYFRAMES ANYWHERE IN THIS FILE. Where attention is wanted the page wears member.css's own `.n-attention` — three beats then still, with the standing held ring under prefers-reduced-motion. One attention mechanism in the product, and this is a user of it, never a second implementation. ============================================================ */ /* ============================================================================ WO248 (MATT, AUGUST 16 2026) — WHERE A FOCUS LANDING COMES TO REST, AND WHY IT IS A STYLESHEET DECLARATION RATHER THAN A LINE OF JAVASCRIPT ============================================================================ MATT, OF LESSER EVILS: "on mobile, Next Trial leaves the member where they were; it must refocus to the TOP OF THE SCREEN where the next trial is." THE SCREEN WAS ALREADY MOVING. WO246 built the focus engine, site/assets/games.js has armed 'round-next' at the Next-trial tap since that order, and the map answers 'game'. What was wrong was the LANDING: `scrollIntoView({ block: 'start' })` puts the anchor's top at the top of the VIEWPORT, and the site's nav is `position: sticky; top: 0` (assets/style.css) — 114 pixels tall on a 390 phone, 73 on a desktop. Measured on a real browser before this order: after Next Trial the game's heading came to rest at y=11 and "Would you rather" at y=107, both of them behind a strip that ends at 114. The member landed on two option buttons with the question they answer hidden under the chrome. scroll-margin-top IS EXACTLY THE PROPERTY FOR THIS. It is what scrollIntoView is specified to honour, so the engine's call did not change — same block, same smooth-or-instant answer, same rule about not moving for something already on the screen. One declaration, and the browser does the arithmetic. THE NUMBER IS THE SHELL'S OWN MEASUREMENT AND NOT A GUESS. `--rsx-navh` is published on by assets/shell.js from the real nav's height and republished on every resize, so this is correct at every width, in every section, and on the day the nav grows a row. The fallback (84px) is the shell stylesheet's own, copied rather than invented, so a page whose shell has not booted still lands below a nav of about the right size. The extra 16px is the page's own gutter: a heading flush against the underside of a nav reads as clipped even when it is not. IT APPLIES TO EVERY ANCHOR ON THE GAMES SURFACE and therefore to every game, which is honest rather than broad — the fault is the site chrome's, not this game's, and an offset scoped to Lesser Evils would leave the other eight landing under the nav while the order claimed the rule had been applied. Nothing outside this stylesheet is touched, and no other page's scrolling is affected: the selector is the games surface's own anchor attribute. ============================================================================ */ [data-focus] { scroll-margin-top: calc(var(--rsx-navh, 84px) + 16px); } /* ============================================================================ WO312 (MATT, AUGUST 18 2026) — AND THE ASK BUTTON LANDS BY THE SAME RULE ============================================================================ THE PICKER'S ASK IS THE SECOND THING ON THIS SURFACE THE PAGE MOVES THE SCREEN TO. When a person is chosen from the pull-downs, site/assets/games.js scrolls the button into view — through WO246's own engine, so it is the same call with the same reduced-motion answer — and a landing with no offset would put the button under the sticky nav exactly as WO248 found the game heading under it. The declaration is WO248's, character for character, at a second selector; the number is still the shell's own measurement and is still typed nowhere. IT IS A SECOND SELECTOR AND NOT A WIDENED ONE. `[data-focus]` names the anchors the focus engine may LAND on, and the ask control is not one of them — nothing may arm a transition to it, and it takes no focus when the screen moves to it. Two selectors, one rule, and the difference between them stays visible. THE PULSE ON THIS BUTTON NEEDS NOTHING HERE AND GETS NOTHING HERE. It is WO120's shared `rs-pulse` from assets/style.css, in its light-ground form because the picker card is `--white` — no keyframes are minted in this file (see the head of it), no colour is named, and the reduced-motion static ring comes with the shared class. The one thing the ring needs is room to breathe, and the card's own 18px/20px padding already gives it more than the 5px the ring spreads to. ============================================================================ */ [data-pickgo] { scroll-margin-top: calc(var(--rsx-navh, 84px) + 16px); } .g-pagewrap { max-width: 860px; margin: 0 auto; padding: 26px 20px 64px; } .g-pagewrap h1 { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: clamp(1.6rem, 5vw, 2.2rem); line-height: 1.15; margin: 0 0 10px; } .g-pagewrap h2 { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.22rem; margin: 0; } /* the one sentence the tab carries about what games are for (the porch doctrine) */ .g-porch { color: var(--ink-soft, #55503F); max-width: 46rem; margin: 0 0 26px; } .g-cat { margin: 0 0 34px; } .g-cat .m-fine { margin: 8px 0 14px; } .g-back { margin: 0 0 12px; font-size: .92rem; } /* ---------- WO183 (Matt, August 14 2026) — THE QUIET ENDING'S ONE SENTENCE ---------- A game that a member was in can now end because the pair started a different one, and the partner meets this line where the game used to be. IT IS DELIBERATELY THE CALMEST SURFACE ON THE PAGE: no red, no icon, no border on all four sides, no animation, nothing that reads as an error or an alert. A soft rule down the side and the page's own soft ink — the visual weight of a footnote, because the ending is not news and must not look like a rebuke. THE CONTRAST IS THE PRODUCT'S OWN --ink-soft on --white, which the a11y sweep already holds at AA everywhere else it is used. */ .g-ended { margin: 0 0 18px; padding: 10px 0 10px 14px; max-width: 46rem; color: var(--ink-soft, #55503F); font-size: .95rem; line-height: 1.5; border-left: 3px solid rgba(33, 29, 22, .14); } /* ---------- the people you can play with ---------- WO216 (MATT, AUGUST 14 2026) — NOTHING ON THE TAB WEARS THESE ANY MORE. He ruled the bottom people list off the games page ("the bottom list I kept discovering things in is gone") and site/assets/games.js no longer draws it. The rules are KEPT rather than deleted for one reason: they are the shape the whole tab's card vocabulary was drawn from — `.g-inprogitem`, `.g-askedoutitem` and `.g-invitecard` are all this card, one shade at a time — and deleting the original would leave three descendants and no ancestor for the next person to read. They cost nothing: no markup on any page matches them today. */ .g-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .g-person { background: var(--white, #FFFDF8); border-radius: 16px; box-shadow: 0 6px 18px rgba(33, 29, 22, .07); border: 1px solid rgba(33, 29, 22, .05); } .g-personlink { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 16px 18px; min-height: 48px; text-decoration: none; color: inherit; } .g-personlink:hover { text-decoration: none; background: var(--cream-deep, #F3EADA); border-radius: 16px; } .g-name { font-weight: 700; font-size: 1.05rem; } .g-state { color: var(--ink-soft, #55503F); font-size: .88rem; } /* ---------- the menu ---------- */ .g-menulist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .g-menuitem { background: var(--white, #FFFDF8); border-radius: 18px; padding: 18px 20px; box-shadow: 0 6px 18px rgba(33, 29, 22, .07); border: 1px solid rgba(33, 29, 22, .05); } .g-menuname { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.15rem; margin-bottom: 4px; } .g-menufoot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; } .g-firstmove { margin-top: 16px; max-width: 44rem; } /* ---------- the invitation ---------- */ .g-invited { background: var(--white, #FFFDF8); border-radius: 18px; padding: 20px; box-shadow: 0 6px 18px rgba(33, 29, 22, .07); border: 1px solid rgba(33, 29, 22, .05); } .g-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0 10px; } .g-sent { font-weight: 600; margin: 10px 0; } /* ---------- the game ---------- */ .g-gamehead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; } /* THE SCORE LINE — the recorded carve-out to words-not-numbers, and it lives on this one selector in this one file, which is itself part of the guarantee: there is no shared class a score could be drawn with somewhere else. */ .g-score { font-weight: 700; margin: 4px 0 18px; color: var(--orange-deep, #B54800); } .g-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: g; } .g-item { background: var(--white, #FFFDF8); border-radius: 18px; padding: 18px 20px; box-shadow: 0 6px 18px rgba(33, 29, 22, .07); border: 1px solid rgba(33, 29, 22, .05); } .g-item.g-revealed { background: var(--cream, #FAF5EC); } .g-stem { font-weight: 700; margin: 0 0 12px; } .g-side { border: none; padding: 0; margin: 0 0 14px; min-width: 0; } .g-side legend { padding: 0; font-size: .9rem; font-weight: 700; color: var(--ink-soft, #55503F); margin-bottom: 6px; } /* WO193 — TWO TRUTHS' GUESS QUESTION, WHICH IS NOW THE FIELDSET'S OWN LEGEND RATHER THAN A HEADING ABOVE ONE. Matt's complaint was that the question was on the screen twice; the cure was to draw it once, and the cost of drawing it once is that the one that survives has to carry the weight the heading was carrying. So this is .g-stem's size and colour on a — no new voice, no second style, just the heading rule applied where the heading now lives. */ .g-side legend.g-askhead { font-size: 1rem; color: var(--ink, #211D16); margin-bottom: 12px; } /* 44px IS THE FLOOR AND IT IS THE FLOOR EVERYWHERE, not only on a phone — the standing tap target rule has no desktop tier. */ .g-opt { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 10px; cursor: pointer; border-radius: 12px; border: 1px solid rgba(33, 29, 22, .08); margin-bottom: 8px; background: var(--cream, #FAF5EC); } .g-opt:last-child { margin-bottom: 0; } .g-opt input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--orange-deep, #B54800); cursor: pointer; } .g-opt input:focus-visible { outline: 3px solid var(--orange-deep, #B54800); outline-offset: 3px; } .g-said { min-height: 1.3em; margin: 6px 0 10px; font-size: .9rem; color: #8A3A22; font-weight: 600; } .g-locked p { margin: 0 0 6px; } .g-mine, .g-theirs { font-size: .96rem; } .g-verdict { font-weight: 700; margin-top: 8px; } .g-verdict.g-right { color: var(--orange-deep, #B54800); } /* ---------- the porch guard ---------- */ .g-handoff { margin-top: 26px; padding: 20px; border-radius: 18px; background: var(--cream-deep, #F3EADA); border: 1px solid rgba(33, 29, 22, .06); } .g-handoff p { font-family: "Fraunces", Georgia, serif; font-size: 1.2rem; margin: 0 0 14px; } .g-rematch { margin-top: 14px; } /* ---------- the chat: the third door ---------- */ .g-chat { margin-top: 34px; } .g-chatlist { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; } .g-line { padding: 10px 14px; border-radius: 14px; max-width: 34rem; background: var(--white, #FFFDF8); border: 1px solid rgba(33, 29, 22, .06); } .g-line.g-me { margin-left: auto; background: var(--orange-soft, #FCEBD2); } .g-say textarea { width: 100%; border-radius: 12px; padding: 10px 12px; font: inherit; border: 1px solid rgba(33, 29, 22, .18); background: var(--white, #FFFDF8); min-height: 60px; } .g-say textarea:focus-visible { outline: 3px solid var(--orange-deep, #B54800); outline-offset: 2px; } .g-saylab { display: block; font-size: .9rem; font-weight: 700; color: var(--ink-soft, #55503F); margin-bottom: 6px; } /* ---------- the rules panel ---------- */ .g-rulesbtn { flex: none; } .g-modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(20, 20, 20, .45); } .g-modalcard { background: var(--white, #FFFDF8); border-radius: 20px; padding: 24px 22px; max-width: 34rem; width: 100%; max-height: 88vh; overflow: auto; box-shadow: 0 18px 46px rgba(20, 20, 20, .28); } .g-modalcard h2 { margin-bottom: 12px; } .g-steps { margin: 0 0 18px; padding-left: 1.3em; display: grid; gap: 6px; } .g-steps li { color: var(--ink, #211D16); } /* THE VISUAL. currentColor throughout, so it survives forced-colours and any background; it carries role="img" with the server's own sentence as its accessible name, and every step it pictures is also printed above it in words. */ .g-fig { display: block; width: 100%; height: auto; max-width: 32rem; margin: 0 auto 16px; color: var(--ink-soft, #55503F); } .g-modalcard .g-fine { color: var(--ink-soft, #55503F); font-size: .92rem; margin-bottom: 18px; } @media (max-width: 560px) { .g-pagewrap { padding: 20px 16px 56px; } .g-menufoot, .g-actions { flex-direction: column; align-items: stretch; } .g-menufoot .btn, .g-actions .btn, .g-menufoot .m-btn-small, .g-actions .m-btn-small { width: 100%; } .g-line { max-width: 100%; } } /* ============================================================ WO153b — THE SIX SIBLING GAMES. August 12–13, 2026. ------------------------------------------------------------ Six new control shapes, in the same `.g-` namespace, under the same three rules WO153a set for this file and did not break: NO NEW KEYFRAMES anywhere (the one attention treatment in the product is member.css's `.n-attention` and this page is a user of it, never a second implementation); nothing here restyles a shared class; and 48px is the tap-target floor on EVERY control, on a desktop exactly as on a phone. ============================================================ */ /* ---------- 'tiles' — WHAT WOULD THEY SAY ---------- One column on a phone, two from 480px. Never three: a tile is a phrase, not a word, and three columns of phrases is a wall of text pretending to be buttons. */ .g-tiles { display: grid; gap: 8px; } .g-tile { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 12px; cursor: pointer; border-radius: 12px; border: 1px solid rgba(33, 29, 22, .08); background: var(--cream, #FAF5EC); } .g-tile input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--orange-deep, #B54800); cursor: pointer; } .g-tile input:focus-visible { outline: 3px solid var(--orange-deep, #B54800); outline-offset: 3px; } .g-tile:has(input:checked) { border-color: var(--orange-deep, #B54800); background: var(--orange-soft, #FCEBD2); } @media (min-width: 480px) { .g-tiles { grid-template-columns: 1fr 1fr; } } /* ---------- 'multi' — COMMON GROUND ---------- Twenty-four things read at one go, so they go two-up as soon as there is room and the checkbox stays the full 48px target it is everywhere else. */ .g-optionlist { display: grid; gap: 8px; } .g-optmulti { margin-bottom: 0; } @media (min-width: 520px) { .g-optionlist { grid-template-columns: 1fr 1fr; } } .g-mylist { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; } .g-mypick { padding: 8px 12px; border-radius: 10px; background: var(--cream, #FAF5EC); border: 1px solid rgba(33, 29, 22, .06); } /* THE SHARED ONES, AND ONLY THE SHARED ONES, ARE MARKED. There is no style in this file for "only you picked this" because there is no such key in the payload — see the server. */ .g-mypick.g-shared { background: var(--orange-soft, #FCEBD2); border-color: var(--orange-deep, #B54800); font-weight: 700; } .g-bothtag { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--orange-deep, #B54800); } /* ---------- 'statements' — TWO TRUTHS ---------- */ .g-stmt { margin-bottom: 12px; } .g-stmt textarea { width: 100%; border-radius: 12px; padding: 10px 12px; font: inherit; border: 1px solid rgba(33, 29, 22, .18); background: var(--white, #FFFDF8); min-height: 60px; } .g-stmt textarea:focus-visible { outline: 3px solid var(--orange-deep, #B54800); outline-offset: 2px; } .g-stmtlist { margin: 0 0 10px; padding-left: 1.4em; display: grid; gap: 6px; } .g-stmtlist li { padding: 2px 0; } .g-stmtlist li.g-lie { font-weight: 700; } /* WO174 — THE ASK UNDER A STATEMENT. It reuses .g-quiet, which is the whole point: this is the quietest control on a revealed round, exactly as the "Tell me why?" row is, and its 44px floor and its focus ring come with it. Its own row so the statement is never squeezed by it on a phone, and never bold — a statement marked as the lie is bold, and the button beside it is not part of that sentence. */ .g-askrow { margin: 2px 0 0; font-weight: 400; } .g-theirlist { color: var(--ink-soft, #55503F); } /* ---------- 'order' — RANK MY THREE ---------- */ .g-rankrow { margin-bottom: 12px; } .g-rankrow select { width: 100%; min-height: 48px; border-radius: 12px; padding: 8px 12px; font: inherit; border: 1px solid rgba(33, 29, 22, .18); background: var(--white, #FFFDF8); } .g-rankrow select:focus-visible { outline: 3px solid var(--orange-deep, #B54800); outline-offset: 2px; } /* ---------- 'slider' — THE SPECTRUM GAME ---------- THE THUMB IS 44px AND IT IS 44px ON EVERY ENGINE, which is why both vendor pseudo-elements are written out: a 44px target that is only 44px in one browser is not a 44px target. The track is tall enough to hit without the thumb, and the focus ring is on the input itself so it survives both. */ .g-poles { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: .9rem; font-weight: 700; color: var(--ink-soft, #55503F); } .g-poleright { text-align: right; } .g-track { position: relative; height: 14px; margin: 6px 0 14px; border-radius: 7px; background: var(--cream-deep, #F3EADA); border: 1px solid rgba(33, 29, 22, .08); } /* ============================================================================ WO246 (MATT, AUGUST 16 2026) — THESE TWO ARE SCOPED TO THE TRACK NOW, AND THAT WAS THE STRAY CHECK MARK ============================================================================ MATT: "at the end of a game on mobile, a green check mark on a dark orange disc appeared in the upper right, above all the tabs. I have no idea why that's there but it shouldn't be." THIS RULE DREW IT. `.g-mark` has meant "Same Page's marker on the 0–100 track" since WO153b — position:absolute, top:-5px, 4×22, dark orange — and WO189 minted a SECOND `.g-mark` for the reveal's verdict glyph (the green check and the red X, .g-mark-check / .g-mark-x, 38×38, display:block). Two rules, one class, and the cascade gave the verdict SVG all of both: the 38×38 box and the display from WO189's rule, and the position:absolute, the top:-5px and the DARK ORANGE BACKGROUND from this one. AN ABSOLUTELY POSITIONED ELEMENT WITH NO POSITIONED ANCESTOR IS LAID OUT AGAINST THE PAGE. The verdict row is a flex row and nothing above it is positioned, so the containing block is the initial one: the green check went to top:-5px OF THE DOCUMENT — over the brand strip, above the tabs — wearing a dark orange ground it was never meant to have. That is exactly what he photographed, and it is a violation of NOTHING_ABOVE_THE_TABS arriving from a stylesheet rather than from a script. THE FIX IS THE NARROWING THIS RULE SHOULD ALWAYS HAVE HAD. The track marker only ever exists inside `.g-track` (site/assets/games.js's markHTML wraps it, in all four of its call sites), so saying so costs nothing, changes no pixel on Same Page, and puts the verdict glyph back under WO189's rule alone — in the flow, beside its sentence, where Matt asked for it in the first place. The class names are left as they are: renaming one would be a rename disguised as a fix and would move two suites' handles for no gain. THE STANDING GUARD IS IN smoke-wo246 §0: nothing on a games surface may be position:absolute without a positioned ancestor, asserted in the browser at 390. ============================================================================ */ .g-track .g-mark, .g-track .g-markthem { position: absolute; top: -5px; width: 4px; height: 22px; border-radius: 2px; transform: translateX(-2px); } .g-track .g-mark { background: var(--orange-deep, #B54800); } .g-track .g-markthem { background: var(--ink, #211D16); } .g-slider { width: 100%; height: 44px; margin: 4px 0 2px; background: transparent; -webkit-appearance: none; appearance: none; } .g-slider:focus-visible { outline: 3px solid var(--orange-deep, #B54800); outline-offset: 4px; } .g-slider::-webkit-slider-runnable-track { height: 14px; border-radius: 7px; background: var(--cream-deep, #F3EADA); border: 1px solid rgba(33, 29, 22, .12); } .g-slider::-moz-range-track { height: 14px; border-radius: 7px; background: var(--cream-deep, #F3EADA); border: 1px solid rgba(33, 29, 22, .12); } .g-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 44px; height: 44px; margin-top: -16px; border-radius: 50%; background: var(--orange-deep, #B54800); border: 3px solid var(--white, #FFFDF8); box-shadow: 0 2px 8px rgba(33, 29, 22, .28); cursor: pointer; } .g-slider::-moz-range-thumb { width: 38px; height: 38px; border-radius: 50%; background: var(--orange-deep, #B54800); border: 3px solid var(--white, #FFFDF8); box-shadow: 0 2px 8px rgba(33, 29, 22, .28); cursor: pointer; } .g-slideout { display: block; margin: 0 0 10px; font-size: .9rem; font-weight: 700; color: var(--ink-soft, #55503F); } .g-answer input[type="text"] { width: 100%; min-height: 48px; border-radius: 12px; padding: 10px 12px; font: inherit; border: 1px solid rgba(33, 29, 22, .18); background: var(--white, #FFFDF8); margin-bottom: 10px; } .g-answer input[type="text"]:focus-visible { outline: 3px solid var(--orange-deep, #B54800); outline-offset: 2px; } /* ---------- 'board' — ONE WORD ---------- Three across at every width, because a three-by-three board that reflows is not a board any more — the shape IS the thing both people are looking at. WO173 — THE TILE IS A PICTURE WITH ITS WORD UNDER IT. The picture is what makes the board scannable; the caption is what keeps the game about the CLUE rather than about identifying a drawing. The whole tile is the tap target and it is never smaller than 88px tall, which is twice the 44px floor — a nine-cell grid on a 390px phone gives about 118px of width per tile, so the target is comfortable rather than merely legal. */ .g-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; } .g-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 88px; padding: 10px 4px 8px; text-align: center; cursor: pointer; border-radius: 14px; border: 2px solid rgba(33, 29, 22, .10); background: var(--cream, #FAF5EC); color: var(--ink, #211D16); font-weight: 600; } .g-tilepic { display: block; line-height: 0; color: var(--ink, #211D16); } .g-tilepic .g-ico { width: 46px; height: 46px; display: block; } .g-tilecap { display: block; font-size: .84rem; line-height: 1.15; letter-spacing: .01em; } /* THE CHECKBOX IS REAL AND FOCUSABLE and sits in the tile's top-left corner, small, because the PICTURE is the thing being chosen and a 20px box in the middle of a tile would compete with it. It is never the only signal that a tile is chosen — see the selected state. */ .g-tile input { position: absolute; top: 6px; left: 6px; width: 18px; height: 18px; margin: 0; accent-color: var(--orange-deep, #B54800); cursor: pointer; } .g-tile input:focus-visible { outline: 3px solid var(--orange-deep, #B54800); outline-offset: 3px; } .g-tile input:disabled { cursor: default; } /* SELECTED IS NEVER COLOUR ALONE: a heavier border, a lifted background AND the ticked box — three signals, two of which survive a monochrome screen. */ .g-tile:has(input:checked), .g-tileon { border-color: var(--orange-deep, #B54800); background: var(--orange-soft, #FCEBD2); box-shadow: inset 0 0 0 1px var(--orange-deep, #B54800); } /* ---------- WO173: THE REVEAL, AND ITS FOUR STATES ---------- Matt's test is a board he would have read as fence + snow, where he got snow: WHAT WAS MEANT and WHAT WAS GOT both legible without reading a word. Four treatments, and none of them is colour on its own — every one carries a SHAPE in the corner as well as a fill: FOUND filled and ringed, with a tick — the strongest thing on the board MISSED ringed, dashed, with a dot — "this was one of them" STRAY a warm outline with an open circle — a stray tap, never a red wrong PLAIN faded, no mark — neither of them touched it NOTHING HERE IS RED. A cooperative game does not tell two people off. */ .g-boardrev .g-tile { cursor: default; } .g-tilemark { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; display: none; } .g-rev-found { border-color: var(--orange-deep, #B54800); background: var(--orange-soft, #FCEBD2); box-shadow: inset 0 0 0 2px var(--orange-deep, #B54800); } .g-rev-found .g-tilemark { display: block; background: var(--orange-deep, #B54800); } .g-rev-found .g-tilemark::after { content: ""; position: absolute; left: 6px; top: 4px; width: 6px; height: 10px; border: solid var(--white, #FFFDF8); border-width: 0 2.5px 2.5px 0; transform: rotate(42deg); } .g-rev-missed { border-color: var(--orange-deep, #B54800); border-style: dashed; background: var(--cream, #FAF5EC); } .g-rev-missed .g-tilemark { display: block; border: 2px solid var(--orange-deep, #B54800); } .g-rev-missed .g-tilemark::after { content: ""; position: absolute; left: 5px; top: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--orange-deep, #B54800); } .g-rev-stray { border-color: var(--ink-soft, #55503F); background: var(--white, #FFFDF8); } .g-rev-stray .g-tilemark { display: block; border: 2px dotted var(--ink-soft, #55503F); } /* PLAIN IS FADED IN THE PICTURE AND NOT IN THE WORD. Dropping the whole tile's opacity was the obvious way to say "nothing happened here" and it is the wrong one: it takes the CAPTION under the contrast floor, and a member using a phone in the sun would lose six of the nine words. So the drawing recedes and the caption goes to the room's soft ink, which is an AA colour on this background everywhere else in the file. */ .g-rev-plain { border-color: rgba(33, 29, 22, .10); background: var(--white, #FFFDF8); } .g-rev-plain .g-tilepic { opacity: .45; } .g-rev-plain .g-tilecap { color: var(--ink-soft, #55503F); font-weight: 500; } /* THE KEY. Three little chips reusing the tile states exactly, so the mark on the chip is the same mark as the mark on the board — a key that redraws its own version of a thing is a key that can drift from it. */ .g-revkey { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: .84rem; color: var(--ink-soft, #55503F); } .g-revkey li { display: flex; align-items: center; gap: 6px; } .g-keychip { position: relative; width: 24px; height: 24px; border-radius: 7px; border: 2px solid rgba(33, 29, 22, .10); flex: none; } .g-keychip .g-tilemark { top: 1px; right: 1px; width: 18px; height: 18px; } .g-keychip.g-rev-found .g-tilemark::after { left: 5px; top: 3px; } .g-keychip.g-rev-missed .g-tilemark::after { left: 4px; top: 4px; } /* THE CLUE, OVER THE BOARD, AT THE SIZE IT DESERVES — it is the whole of what the other person said, and the count beside it is how many they meant. */ .g-clueline { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; } .g-cluebig { font-size: 1.3rem; font-weight: 700; color: var(--ink, #211D16); } .g-cluecount { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px; font-weight: 700; font-size: .9rem; background: var(--orange-deep, #B54800); color: var(--white, #FFFDF8); } /* ---------- the member-written surfaces: the quiet control and the placeholder ---------- The Fast Friends room's own treatment, and its own weight: a quiet text button that does not look like a feature, and a placeholder that is visibly a placeholder rather than a sentence somebody wrote. */ /* THE LEGEND THAT IS ALREADY ON THE PAGE. Three of the six new forms print their instruction as a paragraph and then need it AGAIN as the fieldset's legend, because a fieldset without one is not announced as a group. Hiding it from the eye and keeping it for the ear is the only honest way to have both: the standard clip-rect treatment, never display:none (which would take it from the ear as well) and never a zero font-size. */ .g-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .g-quiet { background: none; border: 0; padding: 8px 2px; min-height: 44px; font: inherit; font-size: .9rem; color: var(--ink-soft, #55503F); text-decoration: underline; cursor: pointer; } .g-quiet:hover { color: var(--ink, #211D16); } .g-quiet:focus-visible { outline: 3px solid var(--orange-deep, #B54800); outline-offset: 2px; } .g-delrow { margin-top: 10px; } .g-gone { color: var(--ink-soft, #55503F); font-style: italic; margin: 8px 0; } .g-reportrow { margin-top: 18px; } .g-reportbox { max-width: 34rem; } .g-reportbox textarea { width: 100%; border-radius: 12px; padding: 10px 12px; font: inherit; border: 1px solid rgba(33, 29, 22, .18); background: var(--white, #FFFDF8); min-height: 60px; } .g-reportbox textarea:focus-visible { outline: 3px solid var(--orange-deep, #B54800); outline-offset: 2px; } @media (max-width: 560px) { /* THE TILE SHRINKS AND THE TARGET DOES NOT. 44px is the floor and 84px is what this is — the picture gives back two of the six pixels, the caption none of them. */ .g-board { gap: 6px; } .g-tile { min-height: 84px; padding: 8px 3px 7px; } .g-tilepic .g-ico { width: 42px; height: 42px; } .g-tilecap { font-size: .78rem; } } /* ========================================================================================== WO153 FOLLOW-UP #3 (Matt, August 13 2026): "TELL ME WHY?" AND THE GAMES BARRIER ========================================================================================== THE WHY ROW is deliberately the quietest thing on a revealed item — it reuses .g-quiet, the same weight as "Take this down", because it is an offer and never a prompt. It sits under the verdict rather than beside it so that nothing about the reveal moves when it appears. */ .g-whyrow { margin: 6px 0 0; } .g-why { text-underline-offset: 3px; } /* THE BARRIER CARD. It looks like a card and not like an error: the room's own warm surface, one shade lifted, with no red and no warning iconography anywhere in it. What it holds is the next game, and the copy says so — a card that looked like a wall would be making a claim the rule does not make. */ .g-barrier { margin: 0 0 26px; padding: 18px 18px 6px; border-radius: 16px; background: var(--cream-deep, #F6EEDD); border: 1px solid rgba(33, 29, 22, .12); } .g-barrier h2 { margin: 2px 0 8px; } .g-kicker { margin: 0; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft, #55503F); } .g-arow { margin: 16px 0; } .g-alab { display: block; font-weight: 700; margin-bottom: 6px; } .g-arow select { width: 100%; max-width: 30rem; min-height: 48px; font: inherit; padding: 8px 10px; border-radius: 12px; background: var(--white, #FFFDF8); border: 1px solid rgba(33, 29, 22, .28); } .g-arow select:focus-visible { outline: 3px solid var(--orange-deep, #B54800); outline-offset: 2px; } /* WO157 — .g-aidk IS GONE, and so is the checkbox it styled. "I don't know" is the last ROW of the pull-down above, after a blank disabled separator (lib/assessments.mjs, COMPAT_OPTION_LIST), so there is no second control here to style: the row inherits the select's own 48px and the browser's own wheel. */ /* ============================================================ WO160 — PICK YOUR PLAYER, AND THE CHAT BENEATH. August 13, 2026. ------------------------------------------------------------ Two surfaces, in the same `.g-` namespace, under the same rules this file has kept since WO153a: no new keyframes, no colour that is not already a variable here, and every hit target at least 48px on a phone. Nothing below restyles anything above it. ============================================================ */ /* ---------- (a) the picker ---------- */ .g-pick { margin: 0 0 30px; } .g-pick h2 { margin: 0 0 12px; } /* the box under one game's row, empty and hidden until that game is tapped */ .g-pickbox { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(33, 29, 22, .12); } .g-pickbox[hidden] { display: none; } .g-pickpools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } /* THE CURRENT POOL IS MARKED WITH WEIGHT AND A BORDER, never with colour alone — the same rule every toggle in this product follows, so it survives forced-colours and colour blindness. `aria-pressed` carries the same fact for a screen reader. */ .g-pickpool { min-height: 44px; } .g-pickpool.is-on { font-weight: 700; border-color: var(--orange-deep, #B54800); background: var(--orange-soft, #FCEBD2); } .g-pickbox select { width: 100%; max-width: 30rem; min-height: 48px; font: inherit; padding: 8px 10px; border-radius: 12px; background: var(--white, #FFFDF8); border: 1px solid rgba(33, 29, 22, .28); } .g-pickbox select:focus-visible { outline: 3px solid var(--orange-deep, #B54800); outline-offset: 2px; } .g-pickbox p { margin: 12px 0 0; } /* ---------- (b) the chat card, the Fast Friends room's shape ---------- */ .g-chathead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 4px; } .g-chathead h2 { margin: 0; } .g-chatsub { color: var(--ink-soft, #55503F); font-size: .92rem; } /* THE HOUSE RULE FOR A MUTED THREAD: the word where the number would be. Quiet on purpose — it is a statement of fact about this member's own setting and never an alarm. */ .g-chatmuted { font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft, #55503F); background: var(--cream-deep, #F6EEDD); border-radius: 999px; padding: 3px 10px; } .g-chatelse { margin-left: auto; font-size: .92rem; } /* ONE WINDOW, HOWEVER LONG THE CONVERSATION. The Fast Friends room's scroll region, at this door — a conversation that pushed the composer off the bottom of a phone would be a conversation a member had to scroll past to answer. */ .g-chatscroll { max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; } .g-quietnote { list-style: none; color: var(--ink-soft, #55503F); font-size: .95rem; padding: 10px 0; } @media (max-width: 560px) { .g-pickpools { flex-direction: column; align-items: stretch; } .g-pickpool { width: 100%; } .g-chatelse { margin-left: 0; } .g-chatscroll { max-height: 40vh; } } /* ============================================================================ WO192 — ON REPEAT, REDESIGNED: the builder, the three pull-downs, the reveal ============================================================================ WO161's rules for this game are GONE with the screens they dressed — the category negotiation card (.g-negotiate, .g-negcard, .g-negtitle, .g-negfrom, .g-verdictkey, .g-vkey, .g-erapick) and the swap row (.g-swaprow, .g-swapbtn, .g-swapnote). Nothing on any surface in this feature draws those class names any more, so leaving them would be leaving a reader to work out which of two games they belonged to. THE STANDING RULES ARE UNCHANGED AND THIS BLOCK KEEPS THEM: layout and emphasis only, no string of copy anywhere in this file, NO NEW KEYFRAMES, every control at least 48px on its short side, and NOT ONE STATE CARRIED BY COLOUR ALONE — a right answer at the reveal gets a check, a border and a weight as well as a tint, so it survives forced-colours mode and reads to a colour-blind member, which is the same rule .g-mypick.g-shared already follows. */ /* ---------- the round kicker and the handover ---------- */ .g-rpkick { margin: 0 0 6px; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft, #55503F); } .g-rphand { margin: 8px 0 14px; padding: 10px 14px; border-radius: 14px; background: var(--cream, #FAF5EC); border: 1px solid rgba(33, 29, 22, .10); } .g-rphand h3 { margin: 0 0 2px; font-size: 1.02rem; } .g-rphand p { margin: 0; } /* THE WAITING LINE IS A FACT ABOUT THE ROUND, and it is drawn quietly on purpose: it is the screen a member meets while the other one is typing, and a loud one reads as an instruction to do something they cannot do. */ .g-rpwait { margin: 14px 0; } /* ---------- the topic, which stays at the top of the round ---------- */ .g-rptopic { margin: 2px 0 10px; font-size: 1.15rem; line-height: 1.25; } /* ---------- the builder ---------- */ .g-rpbuild { margin: 4px 0 8px; } .g-rpbuild h3 { margin: 0 0 4px; font-size: 1.05rem; } .g-rpfield { display: block; margin: 12px 0; } .g-rpfield input { width: 100%; min-height: 48px; font: inherit; padding: 8px 12px; border-radius: 12px; background: var(--white, #FFFDF8); border: 1px solid rgba(33, 29, 22, .28); } .g-rpfield input:focus-visible, .g-rpbrow input:focus-visible { outline: 3px solid var(--orange-deep, #B54800); outline-offset: 2px; } .g-rpfield .m-fine { display: block; margin-top: 4px; } /* THE TWO HELPERS. They sit BESIDE the boxes they fill rather than above the form, because a member who has not typed a topic yet has nothing to fill from. */ .g-rphelp { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 4px; } .g-rphelp .m-fine { margin: 0; flex: 1 1 12rem; } .g-rpshelf { margin: 4px 0 10px; display: flex; flex-wrap: wrap; gap: 8px; } .g-rpshelf p { width: 100%; margin: 0 0 2px; } .g-rptopicbtn { min-height: 44px; } .g-rpfillmsg { width: 100%; font-size: .9rem; color: var(--ink-soft, #55503F); } .g-rprows { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 10px; } .g-rpbrow input { width: 100%; min-height: 48px; font: inherit; padding: 8px 12px; border-radius: 12px; background: var(--white, #FFFDF8); border: 1px solid rgba(33, 29, 22, .28); } .g-rpverdicts { margin: 14px 0 6px; } .g-rperr { display: block; margin-top: 4px; font-size: .9rem; font-weight: 700; color: var(--orange-deep, #B54800); } .g-rperr:empty { display: none; } /* ---------- one option and its pull-down ---------- The row inherits .g-rankrow's select sizing (48px, full width, focus ring) from Rank My Three, which is the same control doing the same job — one list, one set of rules for it. */ .g-rprow label { display: block; } .g-rprow select option:disabled { color: var(--ink-soft, #55503F); } /* ---------- WO250: the designer's guessing screen, and the lock beneath the builder ---------- TWO DECLARATIONS AND NO NEW LAYOUT. Matt's ruling was that the designer's post-lock screen takes the GUESSER'S OWN LAYOUT, so it is the same .g-rprow it always was: the only thing drawn here is the second line of the label — "Guess — Ada's verdict" — which reads as fine print under the option it is about, exactly like every other m-fine on this surface. .g-rplockrow puts the pill and its one line of fine print on one row and lets them stack on a phone, which is .g-rphelp's own arrangement borrowed rather than a third one invented. */ .g-rpguesslab { display: block; margin-top: 2px; font-size: .9rem; font-weight: 400; color: var(--ink-soft, #55503F); } .g-rprow label .g-rpopt { font-weight: 700; } .g-rplockrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .g-rplockrow .m-fine { margin: 0; flex: 1 1 12rem; } /* ---------- what a member sees after they have locked in ---------- */ .g-rplocked { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; } .g-rplocked li { padding: 8px 12px; border-radius: 10px; background: var(--cream, #FAF5EC); border: 1px solid rgba(33, 29, 22, .06); display: grid; gap: 2px; } .g-rpopt { font-weight: 700; } .g-rpsaid { font-size: .92rem; color: var(--ink-soft, #55503F); } /* ---------- the reveal: three rows, two columns and a mark ---------- THE MARK IS A SHAPE AND THE ROW IS A WEIGHT. The tint is the third signal rather than the only one — .g-right and .g-wrongmark both carry a border and a left rule, so the two rows are told apart with the colour switched off. */ .g-rprows2 { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; } .g-rprevrow { padding: 10px 12px; border-radius: 10px; background: var(--cream, #FAF5EC); border: 1px solid rgba(33, 29, 22, .08); border-left: 4px solid rgba(33, 29, 22, .18); display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; } .g-rprevrow .g-rpopt { grid-column: 1 / 2; } .g-rprevrow .g-rpmark { grid-column: 2 / 3; grid-row: 1 / 4; } .g-rprevrow.g-right { background: var(--orange-soft, #FCEBD2); border-color: var(--orange-deep, #B54800); border-left-color: var(--orange-deep, #B54800); } .g-rprevrow.g-wrongmark { border-left-color: rgba(33, 29, 22, .38); } .g-rpcol { grid-column: 1 / 2; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; } .g-rpcol .m-fine { margin: 0; } .g-rpline { margin: 6px 0 10px; font-weight: 700; } @media (max-width: 560px) { .g-rphelp, .g-rplockrow { flex-direction: column; align-items: stretch; } .g-rphelp .m-fine, .g-rplockrow .m-fine { flex: 1 1 auto; } .g-rptopicbtn { width: 100%; } } /* ============================================================================ WO166 — WINNER STAYS: the builder, the arena, the boss, the two columns ============================================================================ THE ONE RULE THIS FILE HAS KEPT SINCE WO153a IS KEPT HERE, AND IT TOOK A DECISION TO KEEP IT. The work order says the "no new keyframes" rule does not bind games.css and invites a light theatrical transition (§18: "puff of smoke, card sliding in, flip animation"). This file says the opposite three times over, in its own headers, and deployed reality wins over an order: NOT ONE KEYFRAME RULE IS DECLARED IN THIS FILE, STILL. (smoke-wo153a greps for the at-rule by name, so the literal cannot be written here even inside a comment — which is exactly the kind of pin that keeps a rule true.) So the transition is a TRANSITION — a CSS `transition` property on a class the page adds for one draw, which is a different thing from an animation and needs no keyframe rule. The champion card and the incoming challenger settle in from a small offset over 180ms; the Final Boss's card does the same thing from a little further and a little slower, which is §20's "slightly enhanced treatment" and is the whole of it. Nothing loops, nothing repeats, and the longest thing on this screen lasts a quarter of a second — §18's own budget ("quick enough that repeated rounds continue to feel fast"). AND IT IS OFF ENTIRELY UNDER REDUCED MOTION, which is the correct answer here rather than the house's usual "hold the end state still": there is no state being carried by this movement. The champion is labelled 'Current champion' in words on the card, the boss has a kicker and a sentence, and the round number is printed. Somebody who has asked for no motion loses decoration and not one fact — which is the test the standing rule actually applies (see member.css's note on .m-attention, where the ring IS the fact and so is held). EVERYTHING ELSE IS THIS FILE'S USUAL: the `.g-` namespace, 48px on every control, no colour carrying a state on its own, and not one string of copy anywhere below. ============================================================================ */ .g-wstopic { font-family: 'Fraunces', Georgia, serif; font-size: 1.15rem; font-weight: 600; margin: 4px 0 14px; } /* ---- §3, the role choice ---- */ .g-wsroles { border: 1px solid rgba(33, 29, 22, .10); border-radius: 16px; padding: 16px; background: var(--cream, #FAF5EC); } .g-wsroles h3 { margin: 0 0 6px; } /* ---- §5–§10, the builder ---- */ .g-wsbuild { display: block; margin: 0 0 20px; } .g-wsfield { display: flex; flex-direction: column; gap: 4px; margin: 0 0 14px; } .g-wsfield input[type="text"], .g-wsfield select { min-height: 48px; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(33, 29, 22, .18); font: inherit; background: #fff; width: 100%; box-sizing: border-box; } /* ============================================================ WO233 (MATT, AUGUST 15 2026) — THE EXAMPLE'S CUE IS DRAWN AS THE PLACEHOLDER'S TWIN ------------------------------------------------------------ MATT: the greyed example "Best 1970s Bands" reads as an entry somebody already made. The sentence under the field is the half a placeholder cannot do — it survives the first keystroke — and it is drawn in the SAME grey and the same italic as the greyed line it is talking about, so the eye ties the two together without a line of copy having to say "see above". It is deliberately NOT the ordinary .m-fine weight of the sentence under it: two identical-looking sentences would be two sentences, and this one is a caption on the box. THE COLOUR IS THE HOUSE'S PLACEHOLDER GREY at the ratio a caption needs (4.6:1 on the card), which is why it is not the browser's own placeholder colour — that is decorative and this is read. ============================================================ */ .g-wseg { font-style: italic; color: rgba(33, 29, 22, .62); } .g-wsbuild input[type="text"]::placeholder { color: rgba(33, 29, 22, .48); font-style: italic; } .g-wsgen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; } .g-wsgenmsg { display: block; width: 100%; font-size: .92rem; } .g-wsrankfine { font-weight: 700; margin: 0 0 6px; } .g-wsslidefine { margin: 0 0 8px; } .g-wsrows { list-style: decimal; padding-left: 28px; margin: 0 0 16px; } .g-wsrow { display: flex; gap: 8px; align-items: center; margin: 0 0 8px; } .g-wsrow input[type="text"] { flex: 1 1 auto; min-height: 48px; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(33, 29, 22, .18); font: inherit; background: #fff; } /* ============================================================================ WO190 — THE SLIDEABLE ROW ============================================================================ THE NUMBER BOX IS GONE and its rule went with it: a row's PLACE IN THE LIST is its ranking, so the
    's own numbering is the rank and there is nothing to type. What replaces it is a grip and two buttons, and the two buttons are not a consolation — they are always there, they are 48px, and the whole list can be ordered with them and a keyboard. `touch-action: none` ON THE GRIP IS LOAD-BEARING. Without it the browser claims the vertical gesture for scrolling and the pointermove events stop arriving mid-drag, which on a phone is a row that follows your thumb for ten pixels and then gives up. It is on the HANDLE ONLY, so the page still scrolls normally everywhere else on the builder — including over the text box that is most of the row. NO NEW KEYFRAMES, STILL: the dragged row is a shadow and a lift, both static. */ .g-wsgrip { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 48px; cursor: grab; touch-action: none; user-select: none; font-size: 1.2rem; line-height: 1; opacity: .55; } .g-wsmove { flex: 0 0 auto; display: inline-flex; gap: 4px; } .g-wsmove button { min-height: 48px; min-width: 48px; padding: 4px 8px; border-radius: 12px; border: 1px solid rgba(33, 29, 22, .18); background: #fff; font: inherit; font-size: .8rem; line-height: 1.1; cursor: pointer; } .g-wsmove button[disabled] { opacity: .4; cursor: default; } /* ============================================================================ WO247 (MATT, AUGUST 16 2026) — AND ONE MORE CONTROL ON THE ROW: REMOVE ============================================================================ MATT, ON AN OBSCURE CATEGORY: he asked the generator for his own published papers and got some real ones and some inventions, and asked to be able to "edit or remove individual generated items before locking the list". Editing was already the text box; removing is this. IT IS 48px AND IT IS A WORD, on both of this builder's standing rules. Every control on this form is a thumb target, and a bare × is a picture — the two move buttons say 'Move up' and 'Move down' for exactly this reason (see the WO190 note above), so the third one says 'Remove'. Its accessible name adds the row's own number, which is the same join those two use. IT SITS AFTER THE MOVE BUTTONS AND IS DRAWN LIGHTER THAN THEM, which is the whole of the visual hierarchy here: reordering is what a Designer does constantly and removing is what they do once or twice, so the destructive one is the understated one at the end of the row rather than the loud one in the middle of it. It gets the house's deep orange on hover and focus, because an outline is the only carrier that survives forced-colours mode. NOTHING PULSES AND NOTHING IS RED. There is nothing to warn about: the form posts nothing until Save or Start, so a mis-tap costs a retype. The sentence beside the rows says so. */ .g-wsrm { flex: 0 0 auto; min-height: 48px; min-width: 48px; padding: 4px 10px; border-radius: 12px; border: 1px solid transparent; background: transparent; font: inherit; font-size: .8rem; line-height: 1.1; cursor: pointer; opacity: .7; color: inherit; } .g-wsrm:hover, .g-wsrm:focus-visible { opacity: 1; border-color: var(--orange-deep, #B54800); color: var(--orange-deep, #B54800); } .g-wsrmfine { margin: 0 0 8px; } .g-wsdragging { box-shadow: 0 6px 18px rgba(33, 29, 22, .18); border-radius: 12px; background: #fff; } .g-wsdragging .g-wsgrip { cursor: grabbing; } /* A REFUSAL IS NOT A COLOUR. It is a sentence, in the flow, in bolder type — so it survives forced-colours mode and a colour-blind reader, exactly as .g-rperr and .g-mypick do. */ .g-wserr:not(:empty) { display: block; font-weight: 700; margin-top: 4px; color: var(--orange-deep, #B54800); } .g-wsready { font-weight: 600; margin: 8px 0 16px; } .g-wswait { font-style: italic; margin: 12px 0; } /* ---- §12, the library ---- */ .g-wslib { border-top: 1px solid rgba(33, 29, 22, .10); padding-top: 14px; margin-top: 18px; } .g-wslist { list-style: none; padding: 0; margin: 10px 0 0; } .g-wslistrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 0; border-bottom: 1px solid rgba(33, 29, 22, .06); } .g-wslisttopic { font-weight: 700; flex: 1 1 12rem; } .g-wslistdo { display: flex; gap: 8px; align-items: center; } /* WO233 — THE LIBRARY IS ONE CONTROL NOW. The three rules WO166's cards needed are kept above because the shape is still drawn at the end of a game (the per-round Save blocks), and the builder's own block is a .g-wsfield select like every other pull-down on this screen — which is the point: it inherits the 48px target, the radius and the full width from the rule at the top of the builder rather than inventing a second look for the same kind of thing. THE TWO BUTTONS SIT ON THEIR OWN ROW and wrap on a 390px phone, so 'Use a previous list' and 'Delete' never end up shoulder to shoulder at thumb width. */ .g-wslibdo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 6px; } .g-wslibdo [hidden] { display: none; } /* ========================================================================================== WO298 (MATT, AUGUST 17 2026) — THE LIBRARY'S HOUSEKEEPING, AND IT LOOKS LIKE THE BUILDER ========================================================================================== MATT: "see all my lists, edit a list's contents, delete a list." THE EDITOR IS NOT A SECOND KIND OF SCREEN. Its rows are `.g-wsrow` — the same class the builder's rows wear — so the 48px boxes, the 44px handle, the Remove and the flex line all come from the rules at the top of this file and nothing about a row is said twice. What is added here is the CONTAINER: an inset panel that makes clear the thing being edited is a saved list rather than the game about to be started, which is the one thing a member standing inside a builder could get wrong. THE METADATA LINE IS A LINE AND NOT A CARD. WO233 has composed `meta` for every row since it built the dropdown and nothing ever drew it; it sits directly under the select as fine print, where it answers "which of these is which" without adding a control. NO NEW COLOUR AND NO NEW ANIMATION. The panel is the room's own cream on the form's white, the same pair every other inset on this page uses, and this file's standing law since WO153a is that it adds no keyframes. ========================================================================================== */ /* WO298 — THE ONE PRE-GAME QUESTION ON A MENU CARD (One Word's board size). It is a `.g-wsfield` like every other pull-down in this feature, so the 48px target, the radius and the full width all come from that rule; what it takes of its own is the air that keeps it from sitting on the blurb above or the two buttons below. */ .g-setupask { margin: 10px 0 12px; } .g-wslibmeta { margin: -4px 0 8px; } .g-wslibmeta:empty { display: none; } .g-wsled { margin: 10px 0 4px; padding: 14px; border-radius: 14px; background: var(--cream, #FAF5EC); border: 1px solid rgba(33, 29, 22, .12); } .g-wsled[hidden] { display: none; } .g-wsledhead { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.02rem; margin: 0 0 10px; } .g-wsledrows { margin-bottom: 10px; } /* WO268 WROTE THESE TWO DOWN AND COULD NOT WRITE THEM HERE — its own note says so: the 44px floor on the handle and the shrinkable text box were held inline because games.css was outside that order. This order owns this file, so the EDITOR's rows take them from the stylesheet, which is where a rule about a control's size belongs. WO268's own two inline styles are left exactly where they are: moving them would move a pin its suite counts. */ .g-wsled .g-wsgrip { min-width: 44px; } .g-wsled .g-wsrow input[type="text"] { min-width: 0; } .g-wsleddo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 6px; } /* ---- §15–§20, the arena ---- */ .g-wsarena { border: 1px solid rgba(33, 29, 22, .10); border-radius: 18px; padding: 16px; background: var(--cream, #FAF5EC); margin: 0 0 18px; } .g-wsround { font-size: .92rem; opacity: .75; margin: 0 0 10px; } .g-wskicker { font-family: 'Fraunces', Georgia, serif; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .95rem; margin: 0 0 2px; } .g-wscards { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; } .g-wscard { flex: 1 1 12rem; min-width: 11rem; border: 1px solid rgba(33, 29, 22, .14); border-radius: 16px; padding: 14px; background: #fff; display: flex; flex-direction: column; gap: 10px; } /* THE CHAMPION IS ALWAYS ON THE LEFT (§18) and says so in words as well as in position — `order` alone would be lost to a screen reader and to a narrow single-column phone. */ .g-wschamp { order: 0; } .g-wschall { order: 2; } /* THE "vs." CARRIES NO OPACITY. It is aria-hidden and decorative, and axe still measures it — rightly: a low-contrast glyph is unreadable whether or not a screen reader skips it. Full ink, small type, and the spacing does the de-emphasising instead. */ .g-wsvs { order: 1; align-self: center; margin: 0; font-weight: 700; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; } .g-wslegend { margin: 0; font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; opacity: .7; } .g-wsname { margin: 0; font-family: 'Fraunces', Georgia, serif; font-size: 1.3rem; font-weight: 600; line-height: 1.25; } .g-wschoose { min-height: 48px; margin-top: auto; } .g-wswatch { font-weight: 600; margin: 12px 0 2px; } /* THE ENTRANCE. A `transition`, not an animation: the class is on the card for the one draw that follows a choice, and the properties settle from their offset to their resting values. No keyframe, nothing to loop, and nothing to clean up. ============================================================================ WO232 (MATT, AUGUST 15 2026) — AND IT PLAYS AT A PACE SOMEBODY CAN WATCH ============================================================================ MATT: "it took about four seconds to register and then animated in about a quarter second. Invert that — register fast, animate at a watchable pace." THE OTHER HALF OF THE INVERSION IS site/assets/games.js's (the tap now registers under the thumb instead of waiting out a round trip, and the redraw is held until the beat finishes); this half is four numbers. .18s becomes .52s, and the ghost's .24s becomes .7s — about three times the old budget, which is the difference between a flicker and a movement. §18's OWN BUDGET IS SUPERSEDED, DELIBERATELY, AND IT IS RECORDED HERE. WO166 wrote "quick enough that repeated rounds continue to feel fast" and spent a quarter of a second on it; Matt has now watched it and ruled the other way. The reasoning under the old number stays above so the trail is readable — the number is what changed, not the principle that a game should not drag, and half a second is still half a second. STILL NOT ONE KEYFRAME RULE IN THIS FILE. Everything below is a `transition` on a class the page adds for one draw, except the ring, which BORROWS member.css's own keyframe by name rather than declaring a second one — see .g-wspicked. */ /* ============================================================================ WO247 (MATT, AUGUST 16 2026) — THE MOVEMENT DID NOT READ, AND THE REASON WAS THE DISTANCE ============================================================================ MATT: "the fading of the loser now reads well on desktop and mobile both. The slide from challenger slot to champion slot still does not — on either." THE MOVEMENT WAS NEVER A SLIDE. WO190 described one and WO232 slowed one down, and what the stylesheet actually said was 34 PIXELS. The champion slot and the challenger slot are a whole card apart — three hundred-odd pixels on a desktop — so a card that began 34px to the right of where it was going did not travel from the challenger's slot to the champion's: it twitched in place. Slowing a twitch from a quarter of a second to half a second makes it a slow twitch, which is why WO232's pacing fix was right and still did not fix this. AND ON A PHONE IT WAS THE WRONG AXIS ENTIRELY. Under 560px the arena is a COLUMN — champion above, 'vs.' between, challenger below (see the media query further down, which has been there since WO166) — so the two slots are separated VERTICALLY. A horizontal translate on a vertical layout is not a small slide; it is a movement pointing at nothing. That is the whole of "on either". SO THE TRAVEL THAT SURVIVES IS MEASURED IN SLOTS RATHER THAN IN PIXELS, and it is spent on the one card that can carry it. `--ws-step` is a card's own width plus the gap and the 'vs.' between them; a percentage in a translate resolves against the ELEMENT's own box, and the two cards are the same size (both are `flex: 1 1 12rem`), so one step is the distance between the two slots at every screen width for free. No JavaScript measures anything and the arena does not change height or width while it plays — the cards are where they always were and a transform is moving the paint. The column gets the same step on the other axis, in the phone media query below, which is one declaration rather than a second mechanism. WHICH CARD CARRIES IT, AND WHY IT IS NOT THE CHAMPION, is written out at `.g-wsdefeat .g-wschamp` further down with the ghost that decided it. WHAT DID NOT CHANGE, DELIBERATELY: the three durations. WO232 measured .52s / .62s / .7s against Matt's own watching and smoke-wo232 pins every one of them against this file. The fault was never the pace; a card that now crosses a real distance in half a second is the movement that budget was written for. THE ARENA CLIPS, and that is this order's one new declaration of housekeeping. A card translated a full slot extends past the arena's edge for half a second, and a transform contributes to a page's scrollable area even though it contributes nothing to its layout — so without the clip a 390px phone would gain a scrollbar for the length of every arrival. The ring is a box-shadow four pixels outside the card and the arena's padding is sixteen, so nothing that should be seen is cut. ============================================ */ .g-wsarena { overflow: hidden; --ws-step: calc(100% + 44px); } .g-wscard { transition: transform .52s ease-out, opacity .52s ease-out; } /* THE NEXT CHALLENGER COMES IN FROM OFF THE TABLE — one slot beyond the challenger's own place, which is where the item that is about to arrive has been standing all along: nowhere. This is the movement in the arena, and it is the one that crosses nothing: no other card is in the space it travels through, and it carries no ghost. */ .g-wsenter .g-wschall { transform: translateX(var(--ws-step)); opacity: .25; } /* AND THE CHAMPION SLOT DOES NOT TRAVEL AT ALL. This is `none` rather than WO190's six-pixel settle on purpose: on a matchup where the champion held its ground the item in that slot is the SAME item that was there a second ago, and a card that shifts is the screen dramatising a thing that did not happen. Where it DID change hands, the slot crossfades — see `.g-wsdefeat .g-wschamp` below, and the ghost note above it, which is where the reasoning is. */ .g-wsenter .g-wschamp { transform: none; } /* §20 — THE BOSS ARRIVES FROM FURTHER AWAY AND A LITTLE SLOWER. That is the whole of the "slightly enhanced visual treatment", and it is two declarations rather than a second mechanism. The border weight carries the same fact without motion. */ .g-wsboss .g-wscard { transition-duration: .62s; } .g-wsboss .g-wschall { border-width: 2px; } /* WO190 — "at the final battle 'challenger' becomes 'final boss'". The WORD is the change and it arrives from the server (challenger_label); this is the half-step of elevation the order allows "if cheap" — the legend on the boss card only, full ink instead of the legend's usual .7, in the deep orange this file already uses for the thing that matters on a card. Every legend on this game is drawn uppercase, so it reads FINAL BOSS without the constant having to shout at a screen reader. Nothing moves and nothing new is minted. */ .g-wsboss .g-wschall .g-wslegend { opacity: 1; font-weight: 700; letter-spacing: .09em; color: var(--orange-deep, #B54800); } /* WO247 — AND 'FURTHER AWAY' IS NOW FURTHER THAN A FULL SLOT, which is what it always said in words. Two dozen pixels past the ordinary entrance plus a little more shrink: the same half-step of elevation WO166 asked for, now measured against a distance that exists. */ .g-wsboss.g-wsenter .g-wschall { transform: translateX(calc(var(--ws-step) + 24px)) scale(.94); opacity: .2; } /* ============================================================================ WO190 (MATT, WO185, ANSWERED YES) — THE CHAMPION'S DEFEAT ============================================================================ "the losing champion fades or explodes away, the challenger slides into the champion spot and takes the current-champion label." TWO MOVEMENTS, AND BOTH ARE TRANSITIONS. The GHOST (`.g-wsgone`) is the beaten champion, drawn once, in the champion's own place, and it fades and shrinks out of it; the card that won arrives from the challenger's side and settles into the same spot wearing the champion legend. The ghost is absolutely positioned over the champion slot so the arena does not change height while it goes — a layout that jumps under a thumb is worse than no animation. NOT ONE KEYFRAME RULE, STILL — this file's oldest promise, kept for the fourth order in a row. The classes are added for one draw and removed on the next frame (site/assets/games.js's wsSettle), which is what makes a `transition` play at all; WO166's own entrance has been waiting four seconds for a poll to release it since the day it shipped and now does not. THE WHOLE THING LASTS UNDER A THIRD OF A SECOND, which is §18's budget ("quick enough that repeated rounds continue to feel fast"). [WO232: superseded — see the note above .g-wscard.] AND IT CARRIES NO FACT. The reveal line under the arena says in words which item was kept and which was let go, and the card that stays is labelled 'Current champion' — so the reduced-motion rule below can hide the ghost outright and lose nothing but the theatre. [WO232: THE REVEAL LINE IS GONE FROM THAT SCREEN — Matt retired the running callouts — so the sentence that carried the fact for a reduced-motion reader is now the CARD ITSELF: the item that won is standing in the champion's slot with 'Current champion' over it, and the static ring below marks the one the player picked. Still a fact in words on the screen, still nothing carried by the movement, which is what the rule turns on.] ============================================================================ WO232 (MATT, AUGUST 15 2026) — AND THE LOSING CHALLENGER GOES THE SAME WAY ============================================================================ MATT: "a losing challenger disappears the same way a defeated champion does (the cloud of smoke) instead of the new option just popping in." SO THE GHOST HAS TWO SLOTS AND IS STILL ONE ELEMENT. `.g-wsdefeat` is the champion's defeat (WO190, untouched); `.g-wsheld` is this order's — the champion held its ground, and what leaves is the challenger, out of the challenger's own card, on the same transition. The challenger card gets the same `position: relative; overflow: hidden` the champion card has had since WO190, which is the whole of the plumbing. THE NEW OPTION STILL ARRIVES, and that is not a contradiction: `.g-wsenter` slides the next challenger in from the right exactly as it always did — what it no longer does is arrive into an empty slot with no account of what was there. */ .g-wschamp, .g-wschall { position: relative; overflow: hidden; } /* ============================================================================ WO247 (MATT, AUGUST 16 2026) — THE GHOST WAS RUNNING BACKWARDS, AND THAT IS THE CHAMPION THAT WOULD NOT DIE ============================================================================ MATT: "the correct answer briefly slid over to the champion's spot, then got covered again by the SAME WRONG ITEM from the previous trial — maybe whatever starts out as the initial champion is persisting there in a way that it shouldn't." HE WAS DESCRIBING THESE FOUR LINES. Read the mechanism first, because the fault is only visible against it: the arena's beat classes are drawn ON in the markup and taken OFF on the next frame (site/assets/games.js's wsSettle) — so for every rule in this section, the state WITH the class is where the movement starts and the state WITHOUT it is where the movement ends. Every other rule here is written that way round. The ghost was written the other way. WHAT THAT MEANT, EXACTLY. `.g-wsgone` rested at `opacity: 1` and `.g-wsdefeat .g-wsgone` set it to 0 — so the beaten champion's name began each beat INVISIBLE and, the moment the class came off, FADED IN over seven tenths of a second and stayed there. It is absolutely positioned at inset:0 over the champion card with a white background, so what it covered was the item that had just won, legend and all. And it stayed covered until the next matchup redrew the arena — which on the Designer's screen is however long the Chooser takes to move. THAT IS ALL THREE HALVES OF HIS REPORT AT ONCE. The two screens disagreed because only the WATCHER is drawn a ghost (the Chooser watched the loser leave under their own thumb, and gets no ghost at all — see wsBeatOf); the second option matched because the challenger card has no ghost in it; and "briefly slid over, then got covered again" is the winner being drawn, then the previous trial's item fading in on top of it. It really was the previous champion persisting — not in any state, but in one CSS declaration pointing the wrong way. THE FIX IS THE TWO STATES SWAPPED. The ghost's resting state is GONE and its beat state is PRESENT, so it is there at the start of the beat and dissolves out of the slot — which is what WO190's own note directly above has always said it does, and what Matt means when he says the fading of the loser reads well. Nothing else about it moves: the same element, the same slot, the same .7s, the same two slots (`.g-wsdefeat` for the champion's, `.g-wsheld` for the challenger's), the same aria-hidden, the same `display: none` under reduced motion. ============================================================================ */ .g-wsgone { position: absolute; inset: 0; margin: 0; pointer-events: none; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 14px; background: #fff; border-radius: 16px; box-sizing: border-box; font-family: 'Fraunces', Georgia, serif; font-size: 1.3rem; font-weight: 600; line-height: 1.25; text-align: center; transform: scale(.86) translateY(-10px); opacity: 0; transition: transform .7s ease-in, opacity .7s ease-in; } .g-wsdefeat .g-wsgone, .g-wsheld .g-wsgone { transform: scale(1) translateY(0); opacity: 1; } /* ============================================================================ WO247 — AND THE SLOT THAT CHANGES HANDS CROSSFADES RATHER THAN TRAVELS ============================================================================ MATT: "the fading of the loser now reads well on desktop and mobile both. The slide from challenger slot to champion slot still does not — on either." THE OLD SLIDE WAS 34 PIXELS, which is why it did not read: the two slots are a whole card apart on a desktop and are stacked VERTICALLY on a phone (the column media query below has been there since WO166), so a 34px horizontal nudge was a twitch at one width and a movement pointing at a wall at the other. Slowing a twitch down — which is what WO232's pacing fix did to it — makes a slow twitch. AND IT CANNOT SIMPLY BE MADE LONGER, which is the finding that decided this. The ghost lives INSIDE the champion card (WO190 put it there so it is the size of the slot at every width, and that reasoning is still right), and the card clips its own overflow. Travel the card a whole slot and the ghost of the beaten champion travels with it — so the item that just LOST would appear to slide into the champion's place, which is the animation saying the opposite of what happened. SO THE ORDER'S OWN NAMED ALTERNATIVE IS TAKEN: "a clean crossfade/reposition without transform travel across layout." The slot that changes hands crossfades — the beaten name dissolves out of it and the winner is standing underneath with the champion's legend already on — and the slot that does NOT change hands is where the movement lives: the next challenger arrives from a whole slot away, off the table, which is a distance that reads at 390 and at 1280 and is the one movement in the arena that crosses nothing. ONE RULE, STATED ONCE: A SLOT WITH A GHOST IN IT CROSSFADES; A SLOT WITHOUT ONE ARRIVES. On a defeat the ghost is in the champion's slot, so the champion crossfades and the challenger arrives. On a held matchup the ghost is in the challenger's slot, so the challenger crossfades and nothing travels — which is right, because nothing changed hands. VETO-ABLE, AND THE ALTERNATIVE IS ONE LINE: `.g-wsdefeat .g-wschamp { transform: translateX(var(--ws-step)); }` puts the literal slide back, at a distance that now reads, at the cost of the ghost riding across with it. ============================================ */ .g-wsdefeat .g-wschamp { transform: none; opacity: 1; } .g-wsheld .g-wschall { transform: none; opacity: 1; } /* ============================================================================ WO232 — THE CHOICE REGISTERS UNDER THE THUMB, BEFORE THE SERVER HAS ANSWERED ============================================================================ `.g-wsleaving` is put on the arena by the TAP (site/assets/games.js's wsRegisterChoice) and `.g-wsloser` on the card that was not tapped. Which card lost is known locally — there are two — so the smoke starts on the same tick as the thumb and the round trip happens under it. IT IS THE SAME MOVEMENT THE GHOST MAKES, on purpose: the item that goes goes the same way whether the member watching is the one who sent it away or the one who watched it happen. NOTHING IS CLICKABLE WHILE IT LEAVES. The other card's button is on its way out and a second tap on it would be a tap on a matchup that is over — the request is already refused by the server and by the page's own busy latch, and this makes it un-attemptable as well. */ .g-wsleaving .g-wscard { pointer-events: none; } .g-wsloser { transition: transform .7s ease-in, opacity .7s ease-in; } .g-wsleaving .g-wsloser { transform: scale(.86) translateY(-10px); opacity: 0; } /* ============================================================================ WO232 — THE WATCHER'S RING: THREE FLASHES ROUND THE ANSWER THE PLAYER PICKED ============================================================================ MATT: "the watcher (the person who set up the game) gets animation too: a flashing ring around the answer the player picked — two or three flashes — then, if the challenger won, the slide over to the champion position." IT IS member.css's OWN RING AND THIS FILE MINTS NOTHING. `m-attention-ring` is the product's one attention treatment — the invitation card at the top of the games tab wears it, so does the start pill, and games.html has loaded member.css since the day it existed. What is declared here is a duration and a count for a card in an arena, which is three flashes rather than the strip's three slower ones: a watcher is looking straight at it, and 1.2s beats would put the slide nearly four seconds behind the choice. THIS FILE'S OLDEST RULE IS UNBROKEN. "No new keyframes in games.css" is about a SECOND implementation of an attention treatment drifting from the first; referring to member.css's keyframe by name is the opposite of that — it is the reuse the rule exists to force. Not one at-rule is declared in this file, still, and smoke-wo153a's grep for it still finds nothing. THE RING IS OUTSIDE THE CARD's BOX and is therefore unaffected by the `overflow: hidden` the ghost needs: an element does not clip its own box-shadow. THE FLASH ENDS BY ITSELF. The keyframe returns to a transparent ring at 100% and the count is finite, so nothing has to take the class off — which is also why the release that follows can be a plain timer rather than an animation listener. */ .g-wspicked { animation: m-attention-ring .55s ease-in-out 3; } /* ============================================================================ WO310 (MATT, AUGUST 18 2026) — THE LAST BATTLE, HELD FOR A BEAT BEFORE THE RANKINGS ============================================================================ MATT, ON A PHONE: "it needed to show the last choice for a couple of seconds and then show the overall lineup and rankings that the two people gave." The screen used to go from a live matchup to two columns of ranking in one draw, so the result of the final battle was never on it at all. THE ARENA IS THE ARENA. `.g-wslast` is the same `.g-wsarena` every matchup is drawn in and it inherits every rule above — the border, the cream, the two cards, the column at 560px, the ring. There are exactly TWO declarations here and both are about the card that LOST. THE LOSING CARD IS DIMMED AND NOTHING ELSE. It is one card of two, it carries no legend (see site/assets/games.js's wsLastBattleHTML, where the reason for that is written out) and the winner beside it says 'Current champion' in words — so the dimming is decoration on top of a fact that is already stated, which is this file's standing rule for every treatment that is only a colour or only an opacity. NOTHING MOVES HERE AND THERE IS NOTHING FOR THE REDUCED-MOTION BLOCK TO TURN OFF. The hold is TIME rather than animation — a member who has asked for less motion still gets the result of their last choice on the screen for the same two and a half seconds — so this section is deliberately absent from the media query below. The RING inside it is `.g-wspicked`, which that block already makes static. NOT ONE NEW KEYFRAME, STILL. ======================================================= */ .g-wslast .g-wschall { opacity: .55; } .g-wslast .g-wschall .g-wsname { font-weight: 500; } /* ============================================================================ WO318 (MATT, AUGUST 19 2026) — THE CATCH-UP BAR AND ITS EXIT ============================================================================ MATT: "a 'Skip to now' pill sits with the replay so nobody is ever trapped watching a long backlog (a replay without an exit is an attention trap)." IT IS A BAR AND NOT A BANNER, and the distinction is the same one WO246 drew for the hovering notice: a banner floats over the page and follows the member down it, and this belongs to the arena directly under it. So it is in the flow, at the top of the game, the width of the arena and wearing the arena's own cream and border radius — a member reads the sentence, watches the thing it is about, and the exit is the last thing under their thumb before the cards. THE PILL IS THE HOUSE'S SMALL BUTTON (`.m-btn-small`, member.css) with one declaration on top of it: forty-four pixels of height, which is this file's standing tap target and the same one `.g-wschoose` carries four rules up. Nothing about its colour or its type is decided here. IT WRAPS AT 390 rather than squeezing, so the sentence takes the first line and the pill the second on a phone and they sit side by side on a desktop. One flex rule, no media query. NOT ONE MOVEMENT IS DECLARED HERE AND THERE IS NOTHING FOR THE REDUCED-MOTION BLOCK TO TURN OFF. That is the point rather than an omission: the order's own rule is that reduced motion gets "the same sequence, static swaps — order and time carry the story, not animation", so the replay's carrier is the PACE, which is site/assets/games.js's one number and is the same at both settings. What the bar does is say in words what is happening, which is the channel that works when every transition on the page is off. NOT ONE NEW KEYFRAME, STILL — this file's oldest promise, kept. ======================================================================= */ .g-wscatch { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border: 1px solid rgba(33, 29, 22, .10); border-radius: 14px; padding: 10px 12px; background: var(--cream, #FAF5EC); margin: 0 0 12px; } .g-wscatch p { margin: 0; } .g-wscatchline { flex: 1 1 14rem; font-weight: 600; } .g-wscatchskip { min-height: 44px; } /* ---- the reveals ---- */ .g-wsplayed { list-style: none; padding: 0; margin: 0 0 16px; } .g-wsreveal { padding: 10px 12px; border-left: 3px solid rgba(33, 29, 22, .12); margin: 0 0 8px; } /* AN AGREEMENT IS A WEIGHT AND A BORDER, never a colour on its own. */ .g-wsagree { border-left-width: 5px; border-left-color: var(--orange-deep, #B54800); } .g-wsagree .g-wsline { font-weight: 700; } .g-wsline { margin: 0; } /* ---- §21–§22, the results ---- */ .g-wsresults { margin: 0 0 18px; } .g-wscols { display: flex; flex-wrap: wrap; gap: 16px; } .g-wscol { flex: 1 1 12rem; min-width: 10rem; } .g-wscol h4 { margin: 0 0 6px; font-size: 1rem; } .g-wscol ol { padding-left: 22px; margin: 0; } .g-wscol li { padding: 3px 0; } .g-wshigh { padding-left: 20px; margin: 10px 0; } .g-wshonesty { margin: 12px 0 16px; } .g-wsagain { flex-wrap: wrap; gap: 8px; } /* ============================================================================ WO190 — THE OVERLAP, THE ROUND KICKER AND THE HANDOVER ============================================================================ THE HIGHLIGHT IS NEVER A COLOUR ON ITS OWN. An item both people put in their top tier gets WEIGHT, a RULE down its left side and a tint — three carriers, so it reads in forced-colours mode, on a monochrome screen and to a colour-blind reader, exactly as .g-wsagree does two sections up. The sentence under the columns says in words what has been marked, which is the fourth carrier and the one a screen reader gets. THE ROUND KICKER wears the same treatment as the Final Boss kicker, because it is the same kind of thing: a small word above a screen saying which part of the game this is. */ .g-wsboth { font-weight: 700; border-left: 3px solid var(--orange-deep, #B54800); padding-left: 8px; margin-left: -11px; background: rgba(181, 72, 0, .06); } .g-wsoverlap { margin: 6px 0 10px; } .g-wsroundkick { font-family: 'Fraunces', Georgia, serif; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .85rem; opacity: .75; margin: 0 0 8px; } .g-wsblock { padding: 0 0 6px; margin: 0 0 18px; } .g-wsblock + .g-wsblock { border-top: 1px solid rgba(33, 29, 22, .10); padding-top: 16px; } .g-wspast { border-top: 1px solid rgba(33, 29, 22, .10); padding-top: 16px; margin-top: 18px; } .g-wshandover { border: 1px solid rgba(33, 29, 22, .10); border-radius: 16px; padding: 14px; background: var(--cream, #FAF5EC); margin: 0 0 16px; } .g-wshandover h3 { margin: 0 0 4px; } .g-wsinvite { margin: 0 0 16px; } /* ON A PHONE THE ARENA IS ONE COLUMN, and the "vs." sits BETWEEN the two cards rather than beside them — which is where §15's own sketch puts it, and the only place it reads as a fixture rather than as a stray word. The champion is still first, which is "the champion stays on the left" said in the one direction a 390px screen has. */ @media (max-width: 560px) { .g-wscards { flex-direction: column; } .g-wscard { flex: 1 1 auto; min-width: 0; width: 100%; box-sizing: border-box; } .g-wsvs { align-self: flex-start; } /* ========================================================================================== WO247 — AND ON A PHONE THE SLOTS ARE ONE ABOVE THE OTHER, SO THE TRAVEL IS TOO ========================================================================================== THIS IS THE HALF OF MATT'S "on either" THAT NOTHING HAD EVER ADDRESSED. Every movement in the arena was written as translateX, and this block has turned the arena into a COLUMN since WO166 — so on the device the game is actually played on, the challenger has been BELOW the champion the whole time and the slide has been pointing sideways at a wall. A card that travels along the wrong axis does not read as a small slide; it reads as a glitch, which is what he saw. ONE STEP, THE OTHER WAY, and the percentage resolves against the card's own HEIGHT here exactly as it resolved against its width above. The two cards carry the same three things (a legend, a name, a button) so they are the same height, and the constant is the gap plus the 'vs.' line between them rather than the desktop's gap plus the 'vs.' beside them. THE RULES ARE THE ONES ABOVE, restated on this axis rather than added to. They are repeated in full rather than patched with a variable for the direction because a transform is one property: a rule that set only the axis would still be carrying the desktop's translateX underneath it. Order matters and it is deliberate — this block sits BEFORE the reduced-motion block below, so an honest phone in reduced motion still gets `transform: none` from there and not a vertical arrival from here. */ .g-wsarena { --ws-step: calc(100% + 40px); } .g-wsenter .g-wschall { transform: translateY(var(--ws-step)); opacity: .25; } .g-wsboss.g-wsenter .g-wschall { transform: translateY(calc(var(--ws-step) + 24px)) scale(.94); opacity: .2; } /* the two crossfading slots are the same on this axis as on the other, because a crossfade has no axis — they are restated only so the rule above them cannot reach them. */ .g-wsdefeat .g-wschamp { transform: none; opacity: 1; } .g-wsheld .g-wschall { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { /* SILENCE IS THE RIGHT ANSWER HERE, and only here: this movement carries no state. Every fact it decorates — which card is the champion, that this is the Final Boss, which matchup of how many — is printed in words on the same card. */ .g-wscard { transition: none; } .g-wsenter .g-wschall, .g-wsenter .g-wschamp, .g-wsboss.g-wsenter .g-wschall { transform: none; opacity: 1; } /* WO190 — AND THE DEFEAT IS A STATIC SWAP. The ghost is not drawn at all and the card that won is simply in the champion's place, which is the same screen everybody else arrives at a quarter of a second later. The order's own requirement, and the right one here for the reason the note above already gives: this movement carries no fact. */ .g-wsgone { display: none; } .g-wsdefeat .g-wschamp, .g-wsdefeat .g-wschall { transition: none; transform: none; opacity: 1; } /* ========================================================================================== WO232 — AND THE THREE NEW MOVEMENTS ARE HONEST HERE TOO ========================================================================================== MATT's standing rule, and this order says it again: "honest under reduced-motion". THE HELD CHALLENGER is the same static swap the defeat is — the ghost is already `display: none` above, and the card that arrives is simply there. THE TAP'S OWN SMOKE does not play. The card that lost is not faded out from under a thumb; the redraw replaces it, and site/assets/games.js sets no hold at all in this mode, so the screen moves as soon as the server answers rather than sitting still for seven tenths of a second with nothing happening on it. THE RING IS A RING AND NOT A LOOP. This is the one of the three that keeps something, because it CARRIES A FACT for the reader who has just lost the reveal line: it marks the answer the player picked. So it is the house's own reduced-motion treatment — member.css holds `.m-attention` still as a static ring for exactly this reason — and it is held until the next matchup redraws the arena. A ring that flashes is decoration; a ring that is simply there is a label. */ .g-wsheld .g-wschamp, .g-wsheld .g-wschall { transition: none; transform: none; opacity: 1; } .g-wsloser, .g-wsleaving .g-wsloser { transition: none; transform: none; opacity: 1; } .g-wspicked { animation: none; box-shadow: 0 0 0 4px rgba(181, 72, 0, .55), var(--shadow); } } /* ============================================================================ WO232 — THE ROUND-END SCREEN, AND IT IS DELIBERATELY NOT A WINNER STAYS CLASS ============================================================================ `.g-roundend` is the SHARED panel (site/assets/games.js's roundEndHTML, composed by lib/games.mjs's roundEndPanel): a head, whatever blocks the game handed it, a button onward and the talk window. WO234 draws a Lesser Evils trial into the same frame, which is why not one rule below mentions a ranking, a column or a matchup. THE TALK WINDOW READS AS A CONVERSATION AND NOT AS A FORM. The lines above the box are `.g-talklines`, the same element the per-trial boxes have used since WO188 — so a line from the other person wears their name in the same place, in the same type, on every game surface in the product. All this section adds is the room round it and the line over it. IT IS OPEN, WHICH IS THE ONE THING IT DOES DIFFERENTLY. Matt's words: "a 'Want to talk about it?' line over a small open chat window". No pill, no disclosure, nothing to press first. */ .g-roundend { margin: 0 0 18px; } .g-roundend > h3 { margin: 0 0 12px; } /* THE BUTTON ONWARD IS 48px, which is the house's touch target and not a preference: the primary button's own padding comes to 46, and two pixels is the difference between a control that passes the standing rule and one that only looks as though it does. */ .g-roundend [data-roundnext] { min-height: 48px; } .g-retalk { border-top: 1px solid rgba(33, 29, 22, .10); margin: 18px 0 0; padding-top: 14px; } .g-retalkhead { margin: 0 0 8px; font-size: 1rem; font-weight: 700; } .g-retalk .g-talklines { margin: 0 0 10px; } .g-retalk .g-roundsay { margin: 0; } /* ---------------------------------------------------------------------------- WO234 (MATT, AUGUST 15 2026) — "A SMALL OPEN TEXT WINDOW THAT EXPANDS A LITTLE AS THEY CHAT" ---------------------------------------------------------------------------- His three words are SMALL, OPEN and EXPANDS A LITTLE, and the third one is the one that needs a rule: a trial's window sits between the reveal above it and the 'Next trial' pill below it, so a conversation that grew without limit would push the way onward off the bottom of a phone. The list of lines therefore GROWS TO ABOUT FOUR LINES AND THEN SCROLLS INSIDE ITSELF — the window gets taller as they talk and then stops, and nothing older is lost because the whole thread is one tap away in Messages. RECORDED DEFAULT, VETO-ABLE: 9.5rem is roughly four short lines at this type size on a 390px screen. Say the word and it is one number. IT IS SCOPED TO A WINDOW THAT HAS NO BLOCKS IN IT, which is what `.g-roundend-bare` names — Winner Stays' round-end screen is a whole screen of its own with nothing under it to protect, and its window is deliberately left to grow as it always has. NO NEW KEYFRAMES, for the sixth order running: nothing here animates. */ .g-roundend-bare { margin: 14px 0 0; } .g-roundend-bare .g-retalk { margin-top: 0; } .g-roundend-bare .g-talklines { max-height: 9.5rem; overflow-y: auto; } /* THE BOX STAYS TWO ROWS TALL WHATEVER IS ABOVE IT. A textarea that grew with the conversation would be the "giant chat" Matt struck on this page in WO187A, arriving one trial at a time. */ .g-roundend-bare .g-roundsay textarea { min-height: 0; } /* ============================================================ WORK ORDER 170 — THE SPINE AND THE TAB. August 13, 2026. ------------------------------------------------------------ THE FILE'S THREE STANDING RULES ARE UNBROKEN HERE, and the first is the one worth naming again: NO NEW KEYFRAMES. The invitation at the top of the tab wears member.css's own `.m-attention` — three beats at 1.2s and then still, with a STATIC RING under prefers-reduced-motion — and nothing below animates anything of its own. ONE RECORDED FINDING AND ITS FIX. Since WO153a this page has been writing `.n-attention` on an invitation row, and `.n-attention` is defined in network.css — which games.html has never loaded. The class matched no rule and the arrival flash the order asks for has never fired on this tab. It is fixed by wearing the class this page's own stylesheets define (`.m-attention`, member.css) rather than by copying network.css's rule here, which would have been the second implementation of the one attention treatment in the product. ============================================================ */ /* ---------- the invitation at the top, set off on its own ---------- */ .g-invitetop { margin: 0 0 30px; } .g-invitehead { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.05rem; margin: 0 0 10px; color: var(--ink-soft, #55503F); } /* THE CARD IS SET OFF BY ITS OWN GROUND rather than by a flash, so it still reads as separate after the three beats are over and for a reader who never saw them. */ /* ============================================================ WO253 (MATT, AUGUST 15 2026) — AND THIS CARD IS DARK ORANGE, PULSING UNTIL IT IS HANDLED ------------------------------------------------------------ MATT'S ITEM 3: "the games-tab invitation card gains the same dark orange pulse-until-handled treatment so the grammars agree." The centre-then-dock signal this order puts on every member page and this card are the SAME PIECE OF NEWS in two registers — the arrival and the standing evidence — and until tonight they looked like two different products. WHAT DIED HERE, VERBATIM: .g-invitecard { background: var(--orange-soft, #FCEBD2); … } LIGHT ORANGE with ink on it, plus WO170's `m-attention` finite three-beat ring on the first draw. Matt has ruled the treatment for these two events dark orange, and pulse-until-handled: an unanswered invitation is still pending, and a signal about a pending thing that has stopped signalling is a signal that was missed. THE COLOUR IS `--orange-deep` (#B54800) CARRYING WHITE at 5.4:1 — comfortably AA, and the same ground the signal card wears, from the same two tokens. Every piece of text on the card is repainted below rather than left to inherit: `.m-fine` (#6E685A) and `.g-said` (#8A3A22) are both ink-family colours chosen for a cream card and would be unreadable on this one. THE PRECEDENCE OF THE PULSE IS DECLARED RATHER THAN LEFT TO SOURCE ORDER. `.m-hs-pulse` lives in member.css and this file is loaded after it, so the plain class would already win — but a rule that is correct because of the order two tags happen to be in is a rule that breaks the day somebody reorders them. The scoped selector below says it on purpose. ============================================================ */ .g-invitecard { background: var(--orange-deep, #B54800); border-radius: 18px; padding: 18px 20px; border: 1px solid rgba(255, 253, 248, .35); color: #FFFDF8; box-shadow: 0 6px 18px rgba(33, 29, 22, .18); } .g-invitecard + .g-invitecard { margin-top: 12px; } .g-inviteline { font-family: "Fraunces", Georgia, serif; font-size: 1.12rem; margin: 0 0 12px; } .g-invitecard p:last-child { margin-bottom: 0; } .g-invitecard .m-fine, .g-invitecard .g-said { color: #FFFDF8; } /* THE THREE PILLS ON A DARK GROUND. The primary keeps its weight by inverting rather than by shouting — cream ground, ink on it — and the two secondaries become outlines in the same cream. Nothing about which control is primary changes; only what it is sitting on. */ .g-invitecard .btn-primary { background: #FFFDF8; color: var(--ink, #211D16); box-shadow: 0 8px 24px rgba(33, 29, 22, .22); } .g-invitecard .btn-primary:hover { background: #FFFFFF; box-shadow: 0 12px 30px rgba(33, 29, 22, .28); } .g-invitecard .m-btn-small { background: transparent; color: #FFFDF8; border-color: rgba(255, 253, 248, .7); } /* ---- WO246: THE HOVER DARKENS RATHER THAN LIGHTENS, and that is a contrast fix ---- A cream wash over the card's dark orange composites to a LIGHTER orange, and cream text on it falls just under the 4.5:1 floor — a latent AA failure on all three of this card's secondary pills that nobody had met because nothing on it was hovered in a suite until WO246 added a fourth control and opened it in the browser half. Darkening the ground instead keeps the card's own colour, keeps the "this is hovered" signal, and puts the composite comfortably above the floor. The border still brightens, so the state is carried twice. */ .g-invitecard .m-btn-small:hover { background: rgba(20, 18, 15, .20); border-color: #FFFDF8; } .g-invitecard .btn:focus-visible, .g-invitecard .m-btn-small:focus-visible { outline: 3px solid #FFFDF8; outline-offset: 3px; } /* PULSE UNTIL HANDLED — member.css's keyframes, scoped here so the precedence is a decision. No iteration count: the card leaves because the invitation was ANSWERED, never because an animation ran out. The reduced-motion branch is the static high-contrast ring, never nothing. */ .g-invitecard.m-hs-pulse { animation: m-hs-beat 1.4s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .g-invitecard.m-hs-pulse { animation: none; box-shadow: 0 0 0 10px rgba(181, 72, 0, .48), 0 6px 18px rgba(33, 29, 22, .18); } } /* ---------- WO170: the count beside a name ---------- Quiet, and deliberately not a badge: no pill, no ring, no colour of its own. It is a fact about the two of them ('4 games'), which is the whole of what Principle 4's amendment allows, and it must not read as a score. */ .g-played { color: var(--ink-soft, #55503F); font-size: .88rem; font-variant-numeric: tabular-nums; } .g-personlink .g-played + .g-state::before { content: "· "; } /* ---------- WO170: the two pull-downs ---------- Stacked on a phone, side by side from 560px, each with its own label above it. Both are the full 48px control this file requires everywhere. */ .g-pickpool2 { margin: 0 0 12px; } .g-pickpool2 select { width: 100%; min-height: 48px; border-radius: 12px; padding: 8px 12px; font: inherit; border: 1px solid rgba(33, 29, 22, .18); background: var(--white, #FFFDF8); } .g-pickpool2 select:focus-visible { outline: 3px solid var(--orange-deep, #B54800); outline-offset: 2px; } .g-pickbox { margin-top: 14px; } @media (min-width: 560px) { .g-pickbox { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .g-pickbox > .g-said, .g-pickbox > p { grid-column: 1 / -1; } } /* ---------- WO170: the Under construction card ---------- A NATIVE
    , so the fold is the browser's own disclosure widget: keyboard-operable, its expanded state announced, and shut by default because the server said so. IT IS DELIBERATELY QUIET. Greyed ground, no shadow, no accent, no counter and nothing that could be mistaken for a badge — a card that looked like news would be the one thing Principle 19 forbids it to be. */ .g-uc { margin: 0 0 34px; background: var(--cream-deep, #F3EADA); border-radius: 18px; border: 1px solid rgba(33, 29, 22, .08); padding: 4px 18px; } .g-ucsum { cursor: pointer; padding: 14px 0; min-height: 48px; display: flex; align-items: center; color: var(--ink-soft, #55503F); } .g-ucsum:focus-visible { outline: 3px solid var(--orange-deep, #B54800); outline-offset: 2px; border-radius: 10px; } .g-uctitle { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.05rem; } .g-uclede { margin: 0 0 14px; max-width: 44rem; } .g-uclist { padding-bottom: 16px; } /* GREYED AND UNPLAYABLE, and it is the ground and the ink that say so rather than a label shouting it. There is no Play control inside one of these cards at all — the markup does not draw one, so there is nothing here to disable. */ .g-ucitem { background: var(--cream, #FAF5EC); box-shadow: none; border: 1px dashed rgba(33, 29, 22, .18); color: var(--ink-soft, #55503F); } .g-ucitem .g-menuname { color: var(--ink-soft, #55503F); } .g-ucword { font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft, #55503F); margin: 8px 0 0; } /* ============================================================ WO171 (MATT, AUGUST 13–14 2026) — LESSER EVILS: ONE ROUND, AND THE REVEAL BY NAME ------------------------------------------------------------ ONE ROUND FILLS THE CARD, so nothing here is a list. The two options are real