/* ============================================================================= THE SETTINGS SURFACE — ONE STYLESHEET, BOTH DOCUMENTS. The game renders this panel twice, from two documents that share no bundle: the landing page's modal (web-v5/index.html) and the in-game ⚙ overlay (web-v5/public/tavern.html). Their INLINE base sizes were always identical — a 20px title, 15px row labels, a 52x26 switch, a 34px ✕, a 16px Done — but each document also carried its OWN responsive treatment, the two were written against different goals, and they drifted apart in opposite directions: the landing copy shrank its chrome to buy scroll room, the board copy grew every control for thumbs. Measured at 844x390 on a touch pointer, the board copy came out 13-30% larger than the landing copy on every control they share — 20px title vs 16px, 44px ✕ vs 34px, 17px labels vs 15px, a 64x34 switch vs 52x26, an 18px Done vs 14px. One surface, two sizes, decided by which gear you happened to tap. So the treatment lives here, once, and both documents link it. Same reason the volume slider's skin is injected from music.js instead of being written into each page's CSS: a control rendered by two documents needs one definition, or it has two. The panel's WIDTH is here too, and neither document declares one inline any more. It was the last size the two still disagreed about: the board copy carried a `clamp(380px, 45vh, 700px)` that reproduced the width it happened to have when it was painted under the board's transform, so on a desktop the two copies of one surface were 405px and 640px. `bg-set--landing` / `bg-set--board` scope only the handful of rules that answer a STRUCTURAL difference between the two panels — the landing panel is a fixed-height flex column with a pinned footer, the board panel is a single scrolling box. Every rule that decides a SIZE is left unscoped on purpose: a size rule that can reach only one of the two panels is exactly how they came apart the first time. `!important` throughout because both panels are authored as INLINE styles, and an inline declaration outranks a normal stylesheet rule. ============================================================================= */ /* The panel's width, for both copies, at every viewport. Neither document sets a `width` inline any more — that is what makes this the only declaration, so the two cannot come out at different widths on the same screen again. `100vw - 24px` is the room left by the 12px scrim padding both panels sit in, so on a narrow phone the gutter IS the width. */ .bg-set { width: min(640px, 100vw - 24px); } /* The row container is a GROUPING, not a box: with `display:contents` the panel lays the rows out itself, so the wrapper is invisible to layout everywhere except the two-up grid below — which is the only reason it exists. */ .bg-set-rows { display: contents; } /* --- A phone held sideways, and a short desktop window ---------------------- Under 500px tall and wider than it is high: height is the scarce axis, width is not. Only the CHROME gives ground — the title bar and Done — because the rows ARE the content and the way out has to stay above the fold. Deliberately NOT gated on `pointer: coarse`. A short window has the same problem with a mouse; and more to the point, a pointer-gated rule is what let these two panels answer the same breakpoint differently for as long as they did, since only one of them ever carried it. */ @media (orientation: landscape) and (max-height: 500px) { /* No width override here — the panel is already one width at every viewport (above), and restating it per breakpoint is how it drifted last time. */ .bg-set-head { padding: 9px 16px 7px !important; } /* both the ⚙ glyph and the title text — the two s in the bar (the ✕ is a
) */ .bg-set-head span { font-size: 16px !important; } .bg-set-foot { padding: 8px 16px 10px !important; } /* The Done label is a child on the landing panel and a bare text node on the board's, so the size has to be stated for both. */ .bg-set-done, .bg-set-done span { font-size: 14px !important; } .bg-set-done { padding: 9px !important; } /* The ✕ keeps its 34px on both. It is the way out, and shrinking the way out to buy content space is the wrong trade. */ /* --- board panel only: it has no pinned footer, so it fits by reflowing ---- Its Done scrolls with everything else, so on a ~340px-tall viewport a scrollbar is where that button goes to hide. The three rows go two-up instead — Language spans the full width because its