, and the way back is still href="#". ⚠ MEASURED, not assumed: a modal dialog sits in the TOP LAYER, and the Filter Effects spec lists a top-layer element as a backdrop root — which would make the pane's frost inert. It does not, in Chromium: an A/B of the pane's blur inside showModal() came back 0.00 vs 4.40 gradient energy, i.e. the blur samples the scrimmed page normally. So the ::backdrop is a translucent DIM and nothing more — no blur of its own, or the pane would have nothing left to frost and the glass would read flat. The splash stays visible through both. */ .setup { scroll-margin-block-start: var(--s-5); /* the UA dialog box, undone */ margin: 0; padding: 0; border: 0; inline-size: auto; max-inline-size: none; max-block-size: none; color: var(--ink); background-color: transparent; /* visible, so .lift's cast shadow is not clipped away */ overflow: visible; } html:not([data-dlg]) .setup:target { display: block; position: static; } html:not([data-dlg]) .setup:target ~ .modes__grid { display: none; } .setup[open] { display: flex; position: fixed; inset: 0; margin: auto; inline-size: min(100% - 2 * var(--s-5), 928px); max-block-size: calc(100% - 2 * var(--s-5)); } /* the dim. The rail, the top bar and the cards all stay readable underneath it — this is a modal over the splash, not a page. */ .setup::backdrop { background-color: oklch(0.11 0.016 253 / 0.62); } @media (prefers-reduced-motion: no-preference) { .setup[open] { animation: setup-rise 180ms var(--ease); } .setup[open]::backdrop { animation: scrim-in 180ms var(--ease); } } /* fill-mode NONE is load-bearing: `translate` must return to its initial `none` when the animation ends, because any non-initial translate makes the dialog a containing block for the listbox popup, which is position: fixed. */ @keyframes setup-rise { from { translate: 0 12px; } to { translate: 0 0; } } @keyframes scrim-in { from { opacity: 0; } to { opacity: 1; } } /* At phone width it is a full-height sheet, pinned to the bottom. The 30px of scrim left above it is not decoration: at 100% of the viewport there is no backdrop left to tap, and "clicking the backdrop closes it" would quietly stop being true on a phone — which is the one place it is most used. It also gives the top-left chamfer something to cut into. */ @media (max-width: 559px) { .setup[open] { inline-size: 100%; max-inline-size: none; block-size: calc(100% - 30px); max-block-size: none; margin: auto 0 0; } } /* the sheet/box scrolls its OWN content. Flex, never a percentage height — a % height against a fit-content dialog resolves in Chromium and not in Firefox or WebKit. */ .setup[open] .setup__pane { flex: 1 1 auto; min-block-size: 0; display: flex; flex-direction: column; } /* ⚠ The scroll region carries tabindex="-1" — it is where focus is put when the modal opens, and a scroll container with no tabindex cannot be scrolled by keyboard in Chromium or WebKit. But the base sheet gives every [tabindex] a gold :focus-visible ring, and WebKit DOES match :focus-visible on focus moved by script: the whole sheet came up ringed in gold at 390, in WebKit only, while every geometry assertion passed. It is caught by looking at the screenshot, and by nothing else. Suppressed, not worked around: the region is not a control, it is unreachable by Tab, and it is the standard tabindex="-1" focus target whose ring is always suppressed. Every real control inside it keeps its own authored ring. */ .setup__scroll:focus-visible { outline: none; } .setup[open] .setup__scroll { flex: 1 1 auto; min-block-size: 0; overflow: hidden auto; overscroll-behavior: contain; padding-inline-end: 2px; scrollbar-width: thin; scrollbar-color: rgba(174, 190, 210, 0.72) rgba(11, 15, 21, 0.72); &::-webkit-scrollbar { inline-size: 10px; } &::-webkit-scrollbar-track { background-color: rgba(11, 15, 21, 0.72); } &::-webkit-scrollbar-thumb { background-color: rgba(174, 190, 210, 0.72); border: 2px solid rgba(11, 15, 21, 0.72); } } /* the close X — pinned to the pane, not to the scroller, so it is reachable at every scroll position. The pane's top-RIGHT corner is the square one; the chamfers are top-left and bottom-right. Its plane is deliberately DARKER than --btn-fill and its rim brighter. Pinned, it has the body's own buttons sliding under it, and in the same steel as theirs the two rims ran together — the X read as part of whatever happened to be behind it. */ .setup__x { --cut: 8px; --rim: 1px; --plane: var(--e-sunk); --plane-art: linear-gradient(160deg, rgba(255, 255, 255, 0.070) 0%, transparent 52%); --rim-hi: rgba(206, 224, 246, 0.66); --rim-lo: rgba(120, 142, 172, 0.26); position: absolute; z-index: 2; /* set to the PANE's own padding, so the X's top edge lines up with the top of the header text block and the pool chip beside it rather than floating 14px above them */ inset-block-start: var(--s-4); inset-inline-end: 18px; display: grid; place-items: center; inline-size: var(--tap); block-size: var(--tap); color: var(--ink-2); @media (min-width: 620px) { inset-block-start: var(--s-5); inset-inline-end: var(--s-5); } & svg { inline-size: 16px; block-size: 16px; } &:hover { --plane: var(--e3); --plane-art: var(--btn-fill-hi); --rim-hi: rgba(222, 238, 255, 0.86); color: var(--ink); } } /* the header's right-hand cluster: the Card Pool chip. The detected-pool note used to be reserved inside here and now sits beside it as its own row of the head grid — see .poolnote. The chip stops clear of the pinned X. */ .setup__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); grid-column: 2; justify-self: start; @media (min-width: 620px) { grid-column: 3; grid-row: 1; justify-self: end; justify-content: flex-end; } } /* THE DETECTED-POOL NOTE. The slot was reserved empty; this is the pass that fills it, and filling it changed two things about it. SENTENCE CASE, not the slot's placeholder uppercase. Every other 10px uppercase string on this page is a LABEL of one or two words ("Card Pool", "Live play"). This one is a sentence, and a tracked uppercase sentence at 10px is the least readable text on the page — which is the opposite of an explanation. Same size family, one step up (11px), tracking dropped to near-normal, weight 600 instead of 700: still plainly subordinate to the chip beside it, and actually readable. flex-basis:100% IS LOAD-BEARING. .setup__tools is a wrap flex row that is justified to the end on the wide layout. Sharing the chip's line, the note appearing would push the chip left — the header would visibly jump the instant a deck resolved. Given the whole basis it always takes its own line UNDER the chip, so the chip's box never moves. On the wide layout the tools column is shorter than .setup__id beside it, so the extra line cannot grow the head's row height either; measured both widths, all three engines, and the chip and title rects are identical to the pixel with the note shown and hidden. WHERE IT SITS IS THE WHOLE TRICK. As a flex item of .setup__tools it was part of that cluster's max-content, and .setup__head sizes the cluster's column with `auto` — so the note appearing widened column 3 and dragged the chip AND the title 205px to the left. Measured, and in all three engines, so it is the sizing rules and not a bug: dx -205.6 chromium, -205.3 firefox, -205.6 webkit. A grid item that SPANS A FLEXIBLE TRACK is skipped when intrinsic track sizes are resolved. Spanning 1/-1 across the head's minmax(0, 1fr), the note therefore contributes nothing to either `auto` column, and the art tile, the identity block and the chip cannot move. What it does do is add a second row, so the head grows by the note's own height (~19px at 1440, ~39px at 390 where the string takes two lines) and the FORM below shifts down by that much. That is the trade taken: nothing above the head's rule moves, and no permanently empty gutter is reserved in every modal for a note most sessions never see. */ .poolnote { grid-column: 2; max-inline-size: 52ch; font-size: var(--t-11); font-weight: 600; letter-spacing: 0.012em; line-height: 1.4; color: var(--ink-3); text-wrap: pretty; /* its own row, right-aligned so it reads as belonging to the chip it explains rather than to the description on the left */ @media (min-width: 620px) { grid-column: 1 / -1; justify-self: end; text-align: end; } &[hidden] { display: none; } } /* with no script the chip is a small native select. Same place, same accessible name (the is visually hidden, never absent — a chip that announces "Premier, button" names the value and not the field). */ .poolpick { display: inline-flex; min-inline-size: 0; & .selwrap { --cut: 8px; min-inline-size: 0; } & .select { font-size: var(--t-11); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } } .setup__pane { --cut: 18px; --rim: 2px; --plane: var(--pane-modal); /* THE MUTED INK IS LIFTED INSIDE THE MODAL, and only here. Measured, not guessed: nine points sampled across the rendered pane, the LIGHTEST one taken as the worst case, and the ink photographed from a swatch rather than parsed out of the computed style (oklch() now serialises as oklch(), and reading "0.704 0.024 250" as if it were rgb reports a confident 1.1:1). At the page's --ink-3 the muted strings came out 4.28-4.39:1 in all three engines — under AA. The pane's own tint wash and highlight peak at its top-left, which is exactly where a modal puts its labels, and the modal sits over the splash rather than over the arena plate, so it is brighter than the rail is. Lifted here, the same strings measure 4.9-5.0:1, and --ink-3 is still clearly a step below --ink-2. The global token is untouched: the approved splash keeps its exact ink. */ --ink-3: oklch(0.745 0.022 250); /* the mode's tint washes down from the top, exactly as on the card */ --plane-art: radial-gradient(118% 56% at 26% 0%, color-mix(in oklch, var(--tint) 16%, transparent), transparent 66%), radial-gradient(112% 62% at 26% 0%, rgba(255, 255, 255, 0.060), transparent 68%), linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0, transparent 30%, transparent 66%, rgba(0, 0, 0, 0.22) 100%); padding: var(--s-4) 18px 18px; @media (min-width: 620px) { padding: var(--s-5) var(--s-5) var(--s-5); } } /* ---------- head: art tile, identity, way back ----------- */ .setup__head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: var(--s-4); row-gap: var(--s-3); padding-block-end: var(--s-4); border-block-end: 1px solid var(--edge); /* the pinned close X lives over this corner */ padding-inline-end: 56px; @media (min-width: 620px) { grid-template-columns: auto minmax(0, 1fr) auto; } } /* The mode's own art, cropped nearly square-on: the source is 1200x1600, the tile is 0.84, so `cover` crops ~11% — the head of the subject, not a mystery slice. */ .setup__tile { --cut: 10px; --rim: 1px; --plane: var(--e-sunk); position: relative; overflow: hidden; flex: none; inline-size: 66px; block-size: 78px; grid-row: 1; @media (min-width: 620px) { inline-size: 84px; block-size: 100px; } & img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 26%; } /* the tint wash + a foot shadow, so the tile shares the card's light */ &::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(180deg, color-mix(in oklch, var(--tint) 24%, transparent), transparent 56%), linear-gradient(180deg, transparent 42%, oklch(0.14 0.018 253 / 0.52) 100%); } } .setup__id { min-inline-size: 0; grid-row: 1; } /* NOT the card's mix. .mode__kind is 56% tint into --ink-3 because it sits on the card BODY, under the art scrim, which is the darkest surface on the page. The setup head is one of the brightest: the pane's own tint wash peaks at the top-left and the arena plate behind the frost is light there. Sampled through the glass in all three engines, the card's mix came out at 3.64-4.98 — under AA in Firefox and WebKit on three of the four tints. Same hue, more lightness: measured 5.8-7.4. */ .setup__kind { font-size: var(--t-11); font-weight: 700; letter-spacing: 0.185em; text-transform: uppercase; color: color-mix(in oklch, var(--tint) 38%, var(--ink)); } .setup__title { margin-block-start: 5px; font-size: var(--t-24); font-weight: 700; letter-spacing: 0.035em; text-transform: uppercase; font-variation-settings: "wdth" 112; line-height: 1.08; @media (min-width: 620px) { font-size: var(--t-28); } } .setup__desc { margin-block-start: 6px; font-size: var(--t-13); line-height: 1.45; color: var(--ink-2); text-wrap: pretty; max-inline-size: 58ch; } /* ---------- body: a stack of form blocks ----------------- */ .setup__body { display: grid; gap: var(--s-5); padding-block-start: var(--s-4); } /* fieldset, de-chromed. min-inline-size:0 is load-bearing — a fieldset's default min-content width is its content's, which is what makes a long list overflow a 390px viewport. */ .fs { min-inline-size: 0; margin: 0; padding: 0; border: 0; } .lg, .flabel { display: block; padding: 0; margin-block-end: var(--s-2); font-size: var(--t-11); font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); } .note { font-size: var(--t-12); line-height: 1.5; color: var(--ink-3); text-wrap: pretty; } .note--under { margin-block-start: var(--s-2); } .note--over { margin-block-end: var(--s-2); } /* ---------- a deck-link row + its Save button ------------ */ .drow { display: grid; gap: var(--s-3); grid-template-columns: minmax(0, 1fr); @media (min-width: 560px) { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } & > .swu2-btn { inline-size: 100%; @media (min-width: 560px) { inline-size: auto; } } } .inwrap { --cut: 9px; --rim: 1px; --plane: var(--e-sunk); display: flex; min-block-size: var(--tap); } /* the wrapper's rim ignites for the control inside it, exactly as .selwrap already does for a carrying the deck names, paired with a preview panel in the same sunken well. The panel swaps with .deckpick:has(option[value="x"]:checked) .deckprev--x and that is the whole no-script mechanism. ⚠ VERIFIED BEFORE IT WAS BUILT, not assumed. :has() with option:checked re-evaluates in chromium, firefox AND webkit, and it invalidates on the SELECTEDNESS ITSELF with no change event fired at all — the probe set .value, then .selectedIndex, then option.selected directly, and all three engines repainted on each. The preview therefore cannot desync from the control. That property is what the ENHANCED listbox is built on. The script hides the , so the collapsed rich row is still switched by the rule above rather than by the script. See "THE CUSTOM LISTBOX" at the end of this layer. The preview keeps the three things the owner asked to keep — the leader/base thumbnails, the "Leader · Base" subtitle, and the card count — and the open list now shows the same row. The slugs are scoped by the :has() to their own .deckpick, so the same slug may repeat in another block without collision. The popup's CLONES of these rows deliberately live outside .deckpick, or that same :has() would hide all but one. */ .deckpick { --cut: 12px; --rim: 1px; --plane: var(--e-sunk); --rim-hi: rgba(196, 214, 238, 0.26); --rim-lo: rgba(120, 142, 172, 0.09); display: grid; gap: 6px; padding: 6px; } /* the control fills the well — this is the "fat" part */ .deckpick .selwrap { --plane: var(--e2); display: flex; inline-size: 100%; } .deckpick .select { font-size: var(--t-14); } /* position: relative is LOAD-BEARING, not tidying. A .u-vh radio is position:absolute with no offsets, so without a positioned wrapper its containing block is the pane — which means inside a scroll container it is NOT clipped by the scroller, and the 23 pre-con radios laid themselves out down the page and added 630px of empty document below the footer. Every geometry assertion passed; the screenshot showed a black band. */ .pc, .seg { position: relative; } .deckprev { --cut: 10px; --rim: 1px; --plane: var(--e2); --plane-art: linear-gradient(165deg, rgba(255, 255, 255, 0.050) 0%, transparent 46%); --rim-hi: rgba(196, 214, 238, 0.30); --rim-lo: rgba(120, 142, 172, 0.12); /* the thumbnail metrics the .tc component reads — declared here because .match declares them and this is not a .match */ --tl-w: 38px; --tl-h: 27px; --tb-w: 29px; --tb-h: 21px; --tc-gap: 3px; --tc-lap: 6px; --tc-cut: 3px; display: none; /* the :has() rules turn ONE on */ grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); min-block-size: var(--tap); padding: 7px 10px; /* At 390 the three-across layout leaves the text column ~90px on a Twin Suns row (two leader thumbs AND a base), so the name wrapped to two or three ragged lines. Dropping the count under the text gives it ~176px — one line for the name, two at most below. */ @media (max-width: 559px) { grid-template-columns: auto minmax(0, 1fr); align-items: start; row-gap: 4px; & .deck__end { grid-column: 2; justify-content: flex-start; } & .cards { margin-block-start: 2px; } } } .deck__text { display: grid; min-inline-size: 0; } /* These WRAP, they never ellipsise. The rail's chips can afford to truncate a leader name because the chip is a link to a game you already know; a saved deck is a thing you are picking, so losing the end of "Kylo Ren · Major Vonreg · Command Center" is losing the base you were choosing by. */ .deck__name { font-size: var(--t-13); font-weight: 600; line-height: 1.25; min-inline-size: 0; overflow-wrap: break-word; } .deck__sub { font-size: var(--t-11); line-height: 1.32; color: var(--ink-3); min-inline-size: 0; overflow-wrap: break-word; text-wrap: pretty; } /* the "no saved deck" preview — the bot's block, where choosing a pre-con instead is a real answer rather than an empty one */ .deckprev--none { grid-template-columns: minmax(0, 1fr); color: var(--ink-3); font-size: var(--t-12); @media (max-width: 559px) { grid-template-columns: minmax(0, 1fr); } } /* Scoped by :has() to its own .deckpick, so the same value repeating in another block cannot cross-fire. The mockup could hard-code one rule per fixture slug; real saved-deck keys are per-account hashes, so those rules ship with the page from SWUSetupPreviewStyles(). Only "none" is fixed — it is the Arenabot bot picker's "use a pre-con below" row. */ .deckpick:has(option[value="none"]:checked) .deckprev--none { display: grid; } .deck__end, .pc__end { display: flex; align-items: center; gap: var(--s-2); flex: none; } .deck__n { font-size: var(--t-10); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; } /* selection is never colour alone — a mark comes on too */ .mark { display: grid; place-items: center; inline-size: 16px; block-size: 16px; flex: none; color: var(--gold); opacity: 0; transition: opacity 150ms var(--ease); & svg { inline-size: 100%; block-size: 100%; } } .pc__in:checked + .pc__row .mark { opacity: 1; } /* ---------- pre-con list ------------------------------- THE LIST IS A SUNKEN WELL, and that is the affordance. Measured in all three engines at 1440 and 390: the platform scrollbar here is an OVERLAY one — offsetWidth - clientWidth is 0 and it paints nothing until you are already scrolling — so a styled scrollbar cannot be what tells you the list continues. The rail solves this with a scripted bar; this list has no script, so instead: · the well is visibly sunken and rimmed, so it reads as a WINDOW onto something longer rather than as the whole list; · the frame height is tuned to cut a row in half rather than land on a row boundary; · the legend note says how many fixtures there are. No bottom fade: with no script a fade cannot know whether there really is more below, and a fade that lies about the end of a list is the exact thing the rail's was written to avoid. */ .pool { --cut: 10px; --rim: 1px; --plane: var(--e-sunk); --rim-hi: rgba(196, 214, 238, 0.26); --rim-lo: rgba(120, 142, 172, 0.09); position: relative; padding: 5px; } .pool__scroll { overflow: hidden auto; /* 6 rows of 48px + their 5px gaps is 313px; 344 leaves 26px of row 7 showing, which reads as a cut row and not as a seam. */ max-block-size: clamp(232px, 34vh, 344px); overscroll-behavior: contain; padding-inline-end: 2px; /* Kept for the platforms and settings that draw a CLASSIC bar — there it is a real, always-visible affordance. It is simply not one we can rely on. */ scrollbar-width: thin; scrollbar-color: rgba(174, 190, 210, 0.72) rgba(11, 15, 21, 0.72); &::-webkit-scrollbar { inline-size: 10px; } &::-webkit-scrollbar-track { background-color: rgba(11, 15, 21, 0.72); } &::-webkit-scrollbar-thumb { background-color: rgba(174, 190, 210, 0.72); border: 2px solid rgba(11, 15, 21, 0.72); } &:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } } /* ---------- Arenabot fits on ONE PAGE ------------------------ Owner, 2026-09-25: four chips; then "fix the spacing so everything fits on one page — making the well a little smaller is fine as long as it is obvious that you can scroll". Arenabot is the tallest modal: two deck slots, two saved-deck pickers, the pre-con well and the bot-style row. At 900px of viewport it overflowed by 181px, which cut off Start Arenabot — the primary action invisible is the actual bug in the screenshot. ⚠ Everything here is scoped to THIS modal. .setup__body / .setup__head / .setup__tile are shared by all four, and PvP, Twin Suns and 1P already fit and are signed off against the mockup. Tightening them globally would churn three approved screens to fix one. THE WELL TAKES WHAT IS LEFT. A fixed height cannot honour both "four chips" and "fits on one page" — which of the two is even possible depends on the viewport. So the cap is the leftover space, bounded: · ceiling 183px = 3 rows (48px) + their gaps + 24px of the 4th, so a tall window shows four chips with the 4th visibly CUT; · floor 120px = 2 rows + a cut 3rd, so it never collapses to a sliver; · 780px is everything else in the modal once the trims below are applied. Below ~900px of viewport the other content alone exceeds the window and the modal scrolls; measured, not assumed — see the table in §21 of Tests/Visual/MainMenu_SetupModals_RealData.md. A cut row is the strongest "there is more below" signal there is, which is the constraint the owner attached to shrinking it. The legend note ("23 tuned fixtures. Scroll for the rest.") and the sunken rim back it up. */ #setup-arenabot .pool__scroll { max-block-size: clamp(120px, calc(100vh - 780px), 183px); } #setup-arenabot .setup__body { gap: var(--s-4); } #setup-arenabot .setup__head { padding-block-end: var(--s-3); } @media (min-width: 620px) { #setup-arenabot .setup__tile { inline-size: 64px; block-size: 76px; } } #setup-arenabot .flabel { margin-block-end: 6px; } #setup-arenabot .note--under { margin-block-start: 6px; } #setup-arenabot .note--over { margin-block-end: 6px; } #setup-arenabot .lg { margin-block-end: 6px; } .pcs { display: grid; gap: 5px; } .pc { display: grid; min-inline-size: 0; } .pc__row { --cut: 9px; --rim: 1px; --plane: var(--e2); --plane-art: linear-gradient(165deg, rgba(255, 255, 255, 0.045) 0%, transparent 46%); --rim-hi: rgba(196, 214, 238, 0.30); --rim-lo: rgba(120, 142, 172, 0.12); display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 3px var(--s-3); min-block-size: var(--tap); padding: 7px 10px; cursor: pointer; &:hover { --plane: var(--e3); --rim-hi: rgba(214, 230, 250, 0.48); } /* the tag rides beside the text once there is room for it */ @media (min-width: 560px) { grid-template-columns: minmax(0, 1fr) auto; & .pc__end { grid-column: 2; grid-row: 1 / span 2; } } } .pc__in:checked + .pc__row { --plane: var(--e3); --plane-art: linear-gradient(180deg, color-mix(in oklch, var(--gold) 9%, transparent), transparent 62%); --rim-hi: color-mix(in oklch, var(--gold) 74%, transparent); --rim-lo: var(--edge-strong); } .pc__in:focus + .pc__row, .pc__in:focus-visible + .pc__row { --rim: 3px; --rim-hi: var(--gold-hi); --rim-lo: var(--gold); } .pc__name { grid-column: 1; font-size: var(--t-13); font-weight: 600; line-height: 1.25; } .pc__meta { grid-column: 1; font-size: var(--t-11); line-height: 1.35; color: var(--ink-3); text-wrap: pretty; } .pc__n { font-weight: 600; color: var(--ink-2); } /* The style tag. Steel, never one of the six aspect colours, and the style NAME is the whole tag. It used to carry a five-step meter running Hyper Aggro to Hard Control. Removed on the owner's ruling: a 1-to-5 indicator reads as a difficulty ranking, and these are archetypes, not levels — Hard Control is not "harder" than Hyper Aggro. Nothing ordinal replaces it: no dots, no bars, no numbers. */ .tag { display: inline-flex; align-items: center; flex: none; min-block-size: 22px; padding-inline: 9px; font-size: var(--t-10); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; background-color: color-mix(in oklch, var(--ink) 10%, transparent); clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); } /* ---------- a pre-con row that carries card art ----------- Twin Suns pre-cons name two leaders and a base, so the row shows the same three thumbnails the deck preview does. Built as a variant of .pc__row, not a second component, so a populated Twin Suns well and the Arenabot well stay the same object. */ .pc__row--rich { --tl-w: 38px; --tl-h: 27px; --tb-w: 29px; --tb-h: 21px; --tc-gap: 3px; --tc-lap: 6px; --tc-cut: 3px; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--s-3); & .pc__text { display: grid; min-inline-size: 0; gap: 2px; } /* The selected-mark rides INLINE on the name rather than in a .pc__end column. A rich row carries no style tag, so an end column would hold nothing but a 16px mark — and at 390, where the row stacks, that mark reserved a whole empty grid row under the text. Inline, it costs nothing at any width and it sits where the eye already is. */ @media (max-width: 559px) { align-items: start; & .cards { margin-block-start: 2px; } } } .pc__name .mark { display: inline-grid; vertical-align: -3px; margin-inline-start: 7px; } .pc__by { font-weight: 500; color: var(--ink-3); letter-spacing: 0.01em; } /* ---------- the designed EMPTY pre-con state ------------ Ghost rows, then the message: the shape says what will land here, the words say why it has not. */ .ghosts { display: grid; gap: 5px; padding-block-end: var(--s-3); } .ghost { --cut: 9px; --rim: 1px; --plane: var(--e1); --rim-hi: rgba(196, 214, 238, 0.16); --rim-lo: rgba(120, 142, 172, 0.07); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px var(--s-3); min-block-size: var(--tap); padding: 9px 10px; } .ghost__bar { block-size: 8px; grid-column: 1; background-color: color-mix(in oklch, var(--ink) 11%, transparent); clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px); } .ghost__bar--name { inline-size: 38%; } .ghost__bar--meta { inline-size: 74%; block-size: 6px; } .ghost__tag { grid-column: 2; grid-row: 1 / span 2; inline-size: 84px; block-size: 22px; background-color: color-mix(in oklch, var(--ink) 8%, transparent); clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); } /* ---------- the Hotseat-only second seat ---------------- Zero JS again: the Mode radios sit ABOVE this block and :has() reads which one is checked. Goldfish is solo, so with Goldfish chosen the block is display:none — out of the layout AND out of the tab order, not merely dimmed. */ .hot { display: none; } .setup__body:has(.hotpick:checked) .hot { display: grid; gap: var(--s-5); padding-inline-start: var(--s-4); /* tinted, not neutral: a steel hairline here was invisible against the pane, and the tint is what says "this belongs to 1P Mode" */ border-inline-start: 2px solid color-mix(in oklch, var(--tint) 46%, transparent); } .hot__lede { font-size: var(--t-12); color: var(--ink-2); text-wrap: pretty; } /* the quiet third button: Cancel is a way out, not an action, so it is the only button on the page with no fill at rest. */ .swu2-btn--quiet { --plane: var(--e1); --plane-art: none; --rim-hi: rgba(196, 214, 238, 0.28); --rim-lo: rgba(120, 142, 172, 0.10); color: var(--ink-2); &:hover { --plane: var(--e2); --plane-art: var(--btn-fill); --rim-hi: rgba(214, 230, 250, 0.62); color: var(--ink); } } /* Arenabot's primary sits INSIDE the .prow beside Bot Style; with Cancel next to it the row is three cells, not two. The pair is matched by shape rather than by a new class so the primary does not have to move out of the row it was signed off in. */ @media (min-width: 560px) { .prow:has(> .swu2-btn + .swu2-btn) { grid-template-columns: minmax(0, 264px) auto auto; } } /* The bot-style announcement is a full-width line UNDER the row. It is a SIBLING of the .prow, not a cell in it: inside the select's 264px track it wrapped to four lines and shoved Start/Cancel down, and spanning it 1/-1 instead fed its min-content to the row's `auto` button tracks (Start Arenabot 150px -> 195px against the mockup). */ .prow + .pickmsg { margin-block-start: var(--s-3); } /* ============================================================ THE CUSTOM LISTBOX — progressive enhancement over popup is drawn by the OS and cannot. HOW: the and fires `change`, so the collapsed row is still switched by the approved `:has(option:checked)` rule — one source of truth, and the preview cannot desync. WHERE THE POPUP LIVES — two constraints, one answer: · it must be a DESCENDANT OF THE DIALOG, because showModal() makes everything outside the dialog inert: a popup parked on would be un-clickable and out of the focus trap; · it must be OUTSIDE .deckpick, because the approved `.deckpick:has(option[value=x]:checked) .deckprev--x` rule would otherwise hide every cloned row but the selected one. So it is parked in a zero-size .lb-layer pinned to the pane, and positioned with position: fixed. Fixed is not clipped by the scroller (the scroller is not its containing block), which is what keeps the popup from being cut off by the dialog. BACKDROP-ROOT DISCIPLINE: the popup is SOLID .ch, never .gl. It sits inside .lb-layer, which needs a z-index to paint above the scroller — and a z-index is a backdrop root, so glass in there would have been inert. A solid steel well is also the right material: it is the same one .pool uses. ============================================================ */ .lb { position: relative; } /* the native control, once the listbox has replaced it. It stays in the DOM and keeps carrying the value for form submission. */ .lb > .selwrap { display: none; } .lb__btn { position: relative; display: grid; align-items: center; inline-size: 100%; text-align: start; cursor: pointer; } .lb__caret { inline-size: 11px; block-size: 11px; flex: none; color: var(--ink-3); } /* ---- the deck skin: the trigger IS the rich row ---------- */ .lb--deck .lb__val { display: grid; min-inline-size: 0; } /* room for the caret, matching .selwrap's own 34px */ .lb--deck .lb__val .deckprev { padding-inline-end: 34px; } .lb--deck .lb__caret { position: absolute; inset-inline-end: 12px; inset-block-start: calc(50% - 6px); } .lb--deck .lb__btn:hover .deckprev { --plane: var(--e3); --rim-hi: rgba(214, 230, 250, 0.48); } /* authored focus, in the page's own language: the row's rim ignites gold, exactly as .selwrap:has(:focus-visible) does. */ .lb--deck .lb__btn:focus-visible { outline: none; & .deckprev { --rim: 3px; --rim-hi: var(--gold-hi); --rim-lo: var(--gold); } } /* ---- the chip skin: Card Pool in the modal header -------- */ .lb--chip { display: inline-flex; } .lb--chip .lb__btn { --cut: 8px; --rim: 1px; --plane: var(--e3); --plane-art: var(--btn-fill); --rim-hi: rgba(196, 214, 238, 0.46); --rim-lo: rgba(120, 142, 172, 0.18); grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2); min-block-size: var(--tap); padding-inline: var(--s-3) 10px; font-size: var(--t-11); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); &:hover { --plane-art: var(--btn-fill-hi); & .lb__caret { color: var(--ink-2); } } } .lb__text { min-inline-size: 0; overflow-wrap: break-word; } /* ---- the popup ------------------------------------------- */ .lb-layer { position: absolute; z-index: 3; inset-block-start: 0; inset-inline-start: 0; inline-size: 0; block-size: 0; } .lb__wrap { --sc: 12px; /* = .lb__pop --cut */ --cast: 0 2px 6px 5px oklch(0 0 0 / 0.40), 0 18px 34px 6px oklch(0 0 0 / 0.54); position: fixed; z-index: 3; display: none; &[data-open] { display: block; } } .lb__pop { --cut: 12px; --rim: 1px; --plane: var(--e2); --rim-hi: rgba(196, 214, 238, 0.42); --rim-lo: rgba(120, 142, 172, 0.16); padding: 5px; } .lb__opts { position: relative; /* offsetTop is measured against it */ display: grid; gap: 5px; overflow: hidden auto; overscroll-behavior: contain; max-block-size: var(--lb-max, 320px); scrollbar-width: thin; scrollbar-color: rgba(174, 190, 210, 0.72) rgba(11, 15, 21, 0.72); &::-webkit-scrollbar { inline-size: 10px; } &::-webkit-scrollbar-track { background-color: rgba(11, 15, 21, 0.72); } &::-webkit-scrollbar-thumb { background-color: rgba(174, 190, 210, 0.72); border: 2px solid rgba(11, 15, 21, 0.72); } /* the focus indicator is the active row's rim, below — the roving one, so it survives programmatic focus in WebKit, where :focus-visible does not reliably match. */ &:focus-visible { outline: none; } } .lb__opt { --cut: 9px; --rim: 1px; --plane: var(--e2); --plane-art: linear-gradient(165deg, rgba(255, 255, 255, 0.045) 0%, transparent 46%); --rim-hi: rgba(196, 214, 238, 0.30); --rim-lo: rgba(120, 142, 172, 0.12); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); min-block-size: var(--tap); padding: 7px 10px; cursor: pointer; &:hover { --plane: var(--e3); --rim-hi: rgba(214, 230, 250, 0.48); } /* selected: a gold RIM and ordinary ink, never a gold fill — the one gold fill per screen is still the primary button. */ &[aria-selected="true"] { --plane: var(--e3); --plane-art: linear-gradient(180deg, color-mix(in oklch, var(--gold) 9%, transparent), transparent 62%); --rim-hi: color-mix(in oklch, var(--gold) 74%, transparent); --rim-lo: var(--edge-strong); & .mark { opacity: 1; } } &[data-active] { --rim: 3px; --rim-hi: var(--gold-hi); --rim-lo: var(--gold); } } /* a cloned .deckprev, stripped of .ch by the script, so the row's own rim and plane are the only ones. It has to be turned back on explicitly: .deckprev is display:none by default and these clones live outside the .deckpick that would switch them. */ .lb__opt > .deckprev { display: grid; padding: 0; min-block-size: 0; } .lb__opt > .deckprev--none { grid-template-columns: minmax(0, 1fr); } .lb__opt--text .lb__txt { font-size: var(--t-13); font-weight: 600; line-height: 1.25; min-inline-size: 0; overflow-wrap: break-word; } /* ============================================================ FORMAT DETECTION — the reason line and the demo scaffolding The detected-pool note itself is .poolnote, up in the head block, because the slot was already reserved there. Two more pieces live here. .whyline is the switch's reason, and it is what the dialog's aria-describedby points at. It is the FIRST CHILD OF .setup__body, i.e. below the head's rule, so it can only push the form down — the title, the art tile and the pool chip above it do not move. It is not a live region and not an alert: see the script for why the description is the right channel and a live region is the wrong one. ============================================================ */ .whyline { --cut: 9px; --rim: 1px; --plane: var(--e2); /* the mode's own tint, washing in from the leading edge — the same language the pane and the art tile already use */ --plane-art: linear-gradient(90deg, color-mix(in oklch, var(--tint) 15%, transparent), transparent 58%); display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-4); font-size: var(--t-13); line-height: 1.45; color: var(--ink); text-wrap: pretty; &[hidden] { display: none; } & svg { flex: none; inline-size: 17px; block-size: 17px; margin-block-start: 2px; color: var(--ink-2); } } .whyline__t { min-inline-size: 0; } /* --- mockup-only demo affordance ------------------------- */ /* the deck-link row and its scaffolding read as one block, at the row's own rhythm rather than the body's 24px section gap */ .dblock { display: grid; gap: var(--s-3); } /* THE PAGE BEHIND MUST NOT SCROLL. showModal() makes the background inert but does NOT lock the scroller — measured: a wheel over the backdrop moved the page 400px in chromium, firefox AND webkit. scrollbar-gutter keeps the splash from jumping sideways by the scrollbar's width as it locks, on the platforms that draw a classic bar. */ html[data-modal] { overflow: hidden; scrollbar-gutter: stable; } .u-vh { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms; animation-iteration-count: 1; transition-duration: 1ms; transition-delay: 0s; /* the stage light switches, never travels */ scroll-behavior: auto; } .mode:hover { translate: none; --sweep: -40%; } .mode:hover .mode__art svg, .mode:focus-visible .mode__art svg { scale: 1; } .mode:hover .mode__pool, .mode:focus-visible .mode__pool { scale: 1 1; } .mode:hover .mode__go svg { translate: none; } .swu2-btn:hover, .nav-bar-user .NavBarItem[aria-current="page"]:hover { translate: none; } } /* ── Touch targets in the shared chrome ────────────────────────────────────── The cross-browser gate measured these below 44x44 on every state, and the original audit found the same: .NavBarItem 90x30, .burger-menu 52x40, the Discord/GitHub links 30px wide. They are styled by swusim-overrides.css, so this file — loaded last — raises them without touching the other five sims or reaching for !important. WCAG 2.5.8 wants 24x24; 44x44 is the comfortable touch target and what the rest of this design already meets. */ .nav-bar-user .NavBarItem, .nav-bar-links .NavBarItem { display: flex; align-items: center; min-block-size: 44px; } .burger-menu { min-inline-size: 44px; min-block-size: 44px; } /* The Discord/GitHub links wrap an , not an

as three flat siblings, so the emblem spans two rows and the wordmark stacks over the tagline / & .home-header .title { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: center; column-gap: 14px; text-decoration: none; min-block-size: 44px; padding: 0; / swusim-overrides positions the old gold plate with `margin: 10px 0 0 -24px`, which pulled the wordmark 24px OUTSIDE the header's gutter (brand at x=44 against the mockup's 68) and added 10px to the bar's height. / margin: 0; background: none; border: 0; box-shadow: none; clip-path: none; } & .home-header .title-logo { grid-row: 1 / 3; } & .home-header h1 { grid-column: 2; grid-row: 1; } & .home-header .title p { grid-column: 2; grid-row: 2; } & .home-header .title-logo { inline-size: 44px; block-size: 44px; / steel, not gold: gold is rationed to the primary action and active state / filter: brightness(0) saturate(100%) invert(84%) sepia(8%) saturate(360%) hue-rotate(178deg) brightness(95%) contrast(90%); } & .home-header h1 { margin: 0; font-size: var(--t-17, 17px); font-weight: 700; letter-spacing: 0.055em; text-transform: uppercase; color: var(--ink, #eef2f6); line-height: 1.15; } & .home-header .title p { margin: 1px 0 0; font-size: var(--t-12, 12px); font-weight: 400; letter-spacing: 0.012em; text-transform: none; color: var(--ink-3, rgba(226, 232, 240, 0.66)); } / the nav sits on the same bar rather than floating as its own glass chip / & .nav-bar { position: absolute; inset-block-start: 0; inset-inline-end: clamp(14px, 3vw, 34px); z-index: 4; display: flex; align-items: center; min-block-size: 64px; background: none; border: 0; box-shadow: none; } & .nav-bar-user, & .nav-bar-links { display: flex; align-items: center; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; padding: 0; box-shadow: none; clip-path: none; } / the glass chips are pseudos (swusim-overrides.css:30,54), same trap as the header plate / & .nav-bar-user::before, & .nav-bar-links::before, & .nav-bar-user::after, & .nav-bar-links::after { content: none; } / the dividers belonged to the chip, not to a plain link row / & .nav-bar-user li + li { border-inline-start: 0; } & .nav-bar .rightnav { display: flex; align-items: center; gap: clamp(6px, 1.4vw, 22px); margin: 0; padding: 0; list-style: none; } & .nav-bar-user .NavBarItem { padding-inline: 8px; font-size: var(--t-14, 14px); font-weight: 500; letter-spacing: 0.01em; color: var(--ink-2, rgba(226, 232, 240, 0.86)); text-shadow: none; } & .nav-bar-user .NavBarItem:hover { color: var(--ink, #eef2f6); text-decoration: none; } } / renderHotkeyList() writes .hotkey-row/.hotkey-badge — the pre-redesign shape. The JS stays authoritative (the list comes from _hotkeyList), so style what it actually emits rather than freezing static markup that would drift from it. / body:has(.home-header) { & #hotkey-list { display: flex; flex-direction: column; gap: 8px; margin-block-start: 12px; } & .hotkey-row { display: flex; align-items: center; gap: 12px; font-size: var(--t-13, 13px); color: var(--ink-2, rgba(226,232,240,0.86)); } & .hotkey-badge { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 44px; padding: 3px 10px; font-size: var(--t-12, 12px); font-weight: 600; letter-spacing: 0.02em; color: var(--ink, #eef2f6); background: var(--btn-fill, linear-gradient(135deg, rgba(70,80,92,.92), rgba(46,54,64,.92))); border: 1px solid var(--edge, rgba(226,232,240,0.16)); border-block-end-width: 2px; border-radius: 3px; } } / The deck-link inputs measured 167x35 on the live page but not in the mockup: the site's own `body .container input[type=text]` rule (swusim-overrides.css) is more specific than the mockup's field rule, so it won the height. Raise them to the 44px touch target here, where the selector is specific enough to win without !important. / body:has(.home-header) .setup input[type="text"], body:has(.home-header) .setup input[type="url"], body:has(.home-header) .setup input:not([type]) { min-block-size: 44px; } / ══ LEGACY CASCADE CORRECTIONS ════════════════════════════════════════════ Three rules from the pre-redesign stylesheets reach inside the new setup modals and win, because this sheet never declared the property they set. Each was MEASURED on the live page against the approved mockup, and each is fixed at the lowest specificity that actually wins — no !important. / / 1 ─ menuStyles.css:119 `input, select { margin: 10px 0 20px 0 }` A bare-element rule, so it applies to every field in here that does not declare a margin of its own. Measured: .inwrap 787x74 around a 44px input — the extra 30px is exactly this 10+20. It also pushed the selects and the "Best of 1" row well past the mockup's 44px field height. / / ⚠ Scoped to the whole redesigned PAGE, not just .setup. It was .setup-only at first, which left the Games-in-Progress format filter 30px too tall on the splash — the same 10+20 margin, just outside the modals. The design spaces its fields with gaps, never with field margins. / body:has(.home-header) .input, body:has(.home-header) .select, body:has(.home-header) input, body:has(.home-header) select, body:has(.home-header) textarea { margin: 0; } / 2 ─ swusim-overrides.css `input[type=checkbox], input[type=radio]` Specificity 0-1-1 beats .u-vh's 0-1-0, so it re-imposed `width:16px; height:16px; position:relative; margin:0 6px 0 0` on every visually-hidden radio in the redesign. They were not hidden at all: each one sat in the flow as a real 16px box. In the Arrangement control — a grid with `grid-auto-flow: column` — the two radios took two of their own tracks, so a two-option toggle became FOUR columns of 63px and "Free-For-All" wrapped onto three lines. Matching the same 0-1-1 and loading later is enough to win it back. / input.u-vh, select.u-vh, textarea.u-vh, button.u-vh { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } / 3 ─ menuStyles.css:103 `button { text-align: center; white-space: nowrap }` The saved-deck "fat dropdown" trigger is a