/* =========================================================================== THE SITE SHELL — the house audio strip, the account chip, the results block. =========================================================================== ITS OWN SHEET, FOR THE REASON THE FOUR SHEETS ABOVE IT IN index.html GIVE. `gate.css`, `final-killcam.css`, `boot-veil.css` and `cheats.css` each carry the same note: style.css is a 4,600-line file that several sessions write at once, and two agents appending to it is how a rule lands inside somebody else's media query. This is the port's own chrome and it is filed the same way — deleting the site layer is deleting this file and its . LOADED LAST, so the two shared stylesheets it adjusts (`shared/account.css`, `shared/fun_stats.css`) are already in the cascade. It adjusts them rather than replacing them: those are the whole platform's and are not editable from this port. THE DESIGN RULE FOR EVERYTHING BELOW: the site chrome sits ALONGSIDE this game's look, not over it. So every colour here is one of style.css's own tokens — `--gold` for the current action, `--ink` for text, `--s1`/`--rule` for surfaces — and the type is `--ui`, the same condensed face the deployment panel uses. Nothing here introduces a colour or a font this game does not already have. =========================================================================== */ /* --------------------------------------------------------------------------- 1. THE FIVE-CONTROL AUDIO STRIP --------------------------------------------------------------------------- Ids and order are the platform's (`#muteSfx #sfxVolume #muteMusic #musicVolume #skipTrack`), so a player who has used the strip on any other game here has used this one. Only the paint is this game's. `flex-wrap` and the `min-width` on the sliders are what make one rule cover both a 1920-wide menu and a 390-wide phone: the strip lays out as one row where there is room and folds into two or three where there is not, with no breakpoint deciding which. See the touch block at the bottom for the part a breakpoint genuinely cannot do. --------------------------------------------------------------------------- */ .audio-controls { display: flex; flex-wrap: wrap; align-items: center; /* SIZED TO FIT ON ONE ROW, and the width below is derived rather than picked: two buttons at ~76px, one at ~66px, two 78px sliders and four 8px gaps come to ~406px inside 20px of padding. At 420px the MUSIC pair wrapped and the strip stood 98px tall, which on a menu column that already scrolls at 720p is three lines of vertical budget spent on chrome. `flex-wrap` is kept because the fold is still the right answer below ~500px — see the media query at the bottom — it just must not be the answer at full size. */ gap: 8px; margin: 4px 0 0; padding: 9px 10px; border: 1px solid var(--rule-strong, rgba(238, 241, 243, 0.17)); border-radius: 4px; background: rgba(8, 11, 13, 0.55); /* The menu sits over a live 3D backdrop; without this the strip's own text competes with whatever the camera is looking at behind it. */ backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); max-width: 460px; } .audio-controls button { flex: 0 0 auto; min-height: 32px; padding: 5px 9px; border: 1px solid var(--rule-strong, rgba(238, 241, 243, 0.17)); border-radius: 3px; background: rgba(238, 241, 243, 0.05); color: var(--ink, #eef1f3); font-family: var(--ui, system-ui), sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; transition: background var(--fast, 120ms) var(--ease, ease), border-color var(--fast, 120ms) var(--ease, ease), color var(--fast, 120ms) var(--ease, ease); } .audio-controls button:hover, .audio-controls button:focus-visible { border-color: var(--gold, #e0a437); color: var(--gold, #e0a437); background: rgba(224, 164, 55, 0.1); } /* MUTED IS A STATE, NOT A HOVER. It has to be legible without reading the emoji, because the emoji is the only other signal and it is 12px tall. */ .audio-controls button.muted { color: var(--ink-3, rgba(238, 241, 243, 0.45)); border-color: var(--rule, rgba(238, 241, 243, 0.085)); background: transparent; } .audio-controls .volume-slider { flex: 1 1 78px; min-width: 62px; max-width: 110px; height: 22px; /* the TRACK is 4px; this is the hit area */ margin: 0; accent-color: var(--gold, #e0a437); background: transparent; cursor: pointer; } /* The three slots `relocateAudioControls` moves the strip between. There is ONE strip in the document and it is re-parented, never copied — five duplicated ids would make `getElementById` answer about whichever copy is first while the listeners bound at boot sat on the other one. EVERY PIXEL IN THE MENU SLOT IS TAKEN OFF THE COLUMN THE PRIMARY ACTION LIVES IN, so this slot is measured rather than eyeballed. `#menu` is `grid-template-rows: 1fr auto` — the menu column, then the sticky `.legal` bar — so the column gets viewport height MINUS the footer, ~805px at 1280x900, and anything past that is clipped until the player scrolls. Two versions of this were wrong before the third was right, and both are worth recording because both looked reasonable: - in `.brand`, under the attribution: pushed PLAY VS BOTS 98px down the page. - with 56px of "footer clearance" below it: the footer was never overlapping anything, and the clearance was itself what pushed the strip past the fold. What is left is a NEGATIVE top margin claiming back half of `.menu-grid`'s row gap (`clamp(26px, 4vh, 52px)`). That gap is sized to separate the wordmark block from the action list — two peers. The strip is not a third peer, it is a footnote to the list, and at the full gap it sat 21px past the bottom of the column and had to be scrolled to. */ #menu-audio-slot { margin-top: clamp(-26px, -2vh, -12px); } #lobby-audio-slot { margin-top: 14px; } #lobby-audio-slot .audio-controls { max-width: none; } #pause-audio-slot { display: flex; justify-content: center; margin-top: 14px; } #pause-audio-slot .audio-controls { margin-top: 0; } /* --------------------------------------------------------------------------- 2. THE ACCOUNT CHIP --------------------------------------------------------------------------- `shared/account.js` injects its own `.account-playing-as` rule — but only on the path where IT creates the chip, i.e. when it finds `#usernameInput` or `#nameInput`. This game has neither (see js/site-account.js's header), so the chip is created here and must be styled here; without this rule it renders as unstyled body text where the CALL SIGN field used to be. The shared rule's shape is kept — a soft-bordered pill with the name and the controller glyph — repainted in gold rather than the platform blue, because gold is this game's "current selection" colour and the chip is exactly that. --------------------------------------------------------------------------- */ .account-playing-as { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 0 10px; padding: 8px 14px; border: 1px solid rgba(224, 164, 55, 0.4); border-radius: 4px; background: rgba(224, 164, 55, 0.1); color: var(--ink, #eef1f3); font-family: var(--ui, system-ui), sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; line-height: 1.2; max-width: 280px; } /* --------------------------------------------------------------------------- 3. THE END-OF-MATCH RESULTS BLOCK --------------------------------------------------------------------------- `web/shared/fun_stats.js` renders the server's `{columns, rows, awards}` into `#resultsAwards` and `#resultsTable`, which sit inside `#endboard` — under this game's own scoreboard, above its two buttons. It is a SECOND block rather than a replacement for the endboard table on purpose: the endboard is the match result (who won), the fun-stats grid is the colour commentary (who was the deadeye). Collapsing them would lose one of the two. Empty until a `results` packet arrives, and `:empty` collapses both, so a match that ends without one — a solo run, a server that has not been wired yet — leaves the endboard exactly as upstream draws it rather than opening a gap. --------------------------------------------------------------------------- */ #endboard .eb-results:empty { display: none; } #endboard #resultsAwards { margin: 14px 0 0; } #endboard #resultsTable { margin: 12px 0 0; /* Wide tables scroll INSIDE the card. The endboard is already a fixed-height overlay over a live canvas; letting the table widen it is how the PLAY AGAIN button ends up off screen. */ max-height: 34vh; overflow: auto; } /* --------------------------------------------------------------------------- 4. TOUCH AND SMALL SCREENS --------------------------------------------------------------------------- CLAUDE.md requires the audio controls to work on mobile, and this game gates phones itself (`js/device-gate.js`) — so this block is about the SMALL WINDOW and the COARSE POINTER, both of which happen on a desktop too, rather than about a phone specifically. A coarse pointer is queried rather than a width, because the thing that actually breaks is the 22px slider being dragged with a finger: `pointer: coarse` is the condition, and a 380px-wide desktop window does not need 44px-tall buttons. --------------------------------------------------------------------------- */ @media (pointer: coarse) { .audio-controls { gap: 10px 12px; padding: 12px; } .audio-controls button { min-height: 44px; padding: 8px 14px; font-size: 13px; } .audio-controls .volume-slider { height: 44px; flex-basis: 110px; } } /* SHORT VIEWPORTS, AND ONLY UNDER A MOUSE. `(pointer: fine)` is on this query because the coarse block ABOVE is lower in specificity than these `#menu-audio-slot …` selectors and would lose to them regardless of source order — measured at 390x844 with a finger, where the 44px targets came out 35px and the sliders 18px. Saving vertical pixels is a laptop's problem; a touch device needs the target size more than it needs the pixels, so it simply does not enter this block. `.menu-main` already overflows a 720px-tall window before any of this exists — the file says so itself, which is why `.screen` is `overflow-y: auto` — so the strip cannot be guaranteed above the fold there without moving controls that are not this port's to move. What it can do is stop being the reason: at 52px it sits ~30px under a 720p fold, and this takes it to ~30px and a smaller top margin so a 768- or 800-tall window clears it. */ @media (max-height: 950px) and (pointer: fine) { #menu-audio-slot .audio-controls { margin-top: 0; } #menu-audio-slot .audio-controls { padding: 6px 8px; gap: 6px; } #menu-audio-slot .audio-controls button { min-height: 28px; } #menu-audio-slot .audio-controls .volume-slider { height: 18px; } } @media (max-width: 560px) { .audio-controls { max-width: none; } /* A BUTTON AND ITS OWN SLIDER STAY ON ONE ROW, and the 55% floor is what makes that happen rather than a wish. Measured first at 390px with the sliders left free to grow: all three buttons and the SFX slider fitted on the first row and the MUSIC slider wrapped away from the button it belongs to, two rows below its label — a slider with nothing next to it saying what it controls. At a 55% floor the second button can no longer fit beside the first pair, so the fold lands between the pairs instead of inside one. */ .audio-controls .volume-slider { flex: 1 1 55%; min-width: 55%; max-width: none; } /* SKIP owns the last row: it is the only control with no partner, and a lone button sharing a row with half a pair reads as belonging to it. */ #skipTrack { flex: 1 1 100%; } }