/* Shared terminal/cockpit theme - dark background, phosphor-green text, bordered panels reminiscent of an old Apple II/Atari-era console. Global (not a Blazor CSS-isolation *.razor.css file) because more than one page uses it: /play originated it, /lobby reuses it, and any future page should too rather than duplicating this theme locally. */ :root { --cockpit-bg: #01120a; --cockpit-panel-bg: #041c10; --cockpit-green: #33ff77; --cockpit-green-dim: #1c8a49; --cockpit-amber: #ffb000; --cockpit-red: #ff3b3b; --cockpit-font: 'Consolas', 'Courier New', monospace; /* Achievement tiers (docs/ACHIEVEMENTS-PLAN.md Phase 1): /profile's grid and the Promotions page's badge stamps. */ --achievement-bronze: #d08a4c; --achievement-silver: #c9d3dc; --achievement-gold: #ffd54a; /* One step brighter than --cockpit-green, for the moment a control is under the pointer or holding focus - the base green is already the resting text color, so "lit up" needs somewhere above it to go. */ --cockpit-green-bright: #8affb4; /* Phosphor bloom. Always used as a box-shadow/glow color, never as a fill, so it carries its own alpha. */ --cockpit-glow: rgba(51, 255, 119, 0.35); /* .cockpit-panel-bg lifted just enough to read as "this one" when the pointer is over it, without looking like a selected state. */ --cockpit-panel-hover-bg: #062716; /* Motion. Every transition in the cockpit reads its duration from one of these three rather than hardcoding its own, so the reduced-motion block at the bottom of this file can neutralize the whole UI in one place instead of each effect carrying its own media query. Fast = a press (must feel like the click itself, not a response to it), the default = hover/focus, slow = anything that sweeps. */ --cockpit-dur-fast: 90ms; --cockpit-dur: 160ms; --cockpit-dur-slow: 320ms; --cockpit-ease: cubic-bezier(0.2, 0.7, 0.3, 1); /* Shared by every overlay in the app (CockpitSelect's dropdown, the arena Inspect bubble) - everything else stacks at 0/1, so this just needs to clear the highest of those, not compete with a real stacking context. */ --cockpit-z-popup: 5; /* docs/RESULTS-MODAL-PLAN.md Phase 1 - the modal layer (CockpitModalHost's backdrop and panel) sits above every popup; the connection banner and TimeoutBanner sit above THAT (html.cockpit-modal-open lifts them - see .cockpit-connection-banner below), so Reconnect / Take back control stay reachable while a modal is open. Both stay below #blazor-error-ui (1000). docs/PLAN.md "Tunable Values". */ --cockpit-z-modal: 50; --cockpit-z-banner: 60; /* The one deliberate departure from all-phosphor-green: a traditional loot-game rarity ladder (grey/green/blue/purple/orange), the first place this cockpit uses hues beyond its own accent. Shared across every 5-tier quality/rarity concept in the game - RosterQuality (Common..Legendary) and VehicleQualityTier (Beater..Legendary) map onto it by ladder position (RarityCssClass.cs); weapons have no such tier yet, so nothing here applies to them until that model exists. Uncommon deliberately reuses --cockpit-green rather than a second green - the cockpit's own accent color already sits exactly where "uncommon" belongs on this ladder. The others are picked to still read clearly against the near-black background rather than matching any specific game's exact hex values. */ --rarity-common: #9aa3a8; --rarity-uncommon: var(--cockpit-green); --rarity-rare: #3fa9ff; --rarity-epic: #b266ff; --rarity-legendary: #ff9425; /* Crew Traits (docs/CREW-TRAITS-PLAN.md PR 2) - one color per skill for Shared/TraitChips.razor, reusing hues the rarity ladder already established (a trait chip is never on the same line as a rarity label, so reuse reads as "another accent," not a clash) plus the cockpit's own red for Driving (loss-of-control/ collision risk already reads red everywhere else in this app). */ --skill-driving: var(--cockpit-red); --skill-gunnery: var(--rarity-rare); --skill-mechanic: var(--cockpit-amber); --skill-navigator: var(--rarity-epic); /* Safe-area insets (App.razor's viewport meta has viewport-fit=cover, so on a notched phone the page runs under the notch / home indicator). Every edge-pinned box adds these to its own padding - 0 on every device without a notch, so those render exactly as before. Read through tokens (never env() directly) so a uitest can set one on to simulate a notch, which no headless browser reports (tools/uitest/verify-modal-followups.mjs). */ --cockpit-safe-top: env(safe-area-inset-top, 0px); --cockpit-safe-right: env(safe-area-inset-right, 0px); --cockpit-safe-bottom: env(safe-area-inset-bottom, 0px); --cockpit-safe-left: env(safe-area-inset-left, 0px); } /* ========================================================================== Mouse cursors (art: wwwroot/img/cursors, SVG sources in its src/, noted in docs/ART-STYLE.md "Mouse cursors"). The one place they are defined: every cursor rule in this file, a scoped .razor.css or an inline style says var(--cursor-*) (Web.ClientTests' CursorRulesTests holds that line); real text fields keep the system I-beam, `cursor: text`. - Why three layers instead of a plain line and an image-set line: `cursor: var(--x)` always parses, so a value an engine cannot use is only found out at computed-value time, when no earlier declaration is left to fall back to (the element just inherits). So the choice is made here, with @supports, before anything reads the property. - Why root-absolute URLs: a url() in a custom property has no one stylesheet it obviously belongs to, and this property is read from cockpit.css, from the scoped bundle in another folder (_content/...) and from inline styles. App.razor's is hard-coded, so the app only ever runs at the site root; a path base would have to change these six names too. - Touch-only devices keep the bare keywords, no images, so what a tap reads is what it always read: iOS Safari synthesises a click on a plain element only when its cursor is `pointer` (see .cockpit-tooltip-trigger--chip). - 32 x 32 CSS px is the largest a browser reliably shows anywhere on the page; Chromium drops a larger one near the window edge. Hotspots are in that 32 x 32 space; the 64 px files are the same art for a 2x screen. Do not scale them up. ========================================================================== */ :root { --cursor-arrow: default; --cursor-action: pointer; --cursor-crosshair: crosshair; --cursor-grab: grab; --cursor-grabbing: grabbing; --cursor-not-allowed: not-allowed; } @media (hover: hover) { :root { --cursor-arrow: url("/img/cursors/arrow-32.png") 3 3, default; --cursor-action: url("/img/cursors/action-32.png") 11 2, pointer; --cursor-crosshair: url("/img/cursors/crosshair-32.png") 15 15, crosshair; --cursor-grab: url("/img/cursors/grab-32.png") 16 19, grab; --cursor-grabbing: url("/img/cursors/grabbing-32.png") 16 19, grabbing; --cursor-not-allowed: url("/img/cursors/not-allowed-32.png") 15 15, not-allowed; } @supports (cursor: image-set(url("x.png") 1x) 1 1, auto) { :root { --cursor-arrow: image-set(url("/img/cursors/arrow-32.png") 1x, url("/img/cursors/arrow-64.png") 2x) 3 3, url("/img/cursors/arrow-32.png") 3 3, default; --cursor-action: image-set(url("/img/cursors/action-32.png") 1x, url("/img/cursors/action-64.png") 2x) 11 2, url("/img/cursors/action-32.png") 11 2, pointer; --cursor-crosshair: image-set(url("/img/cursors/crosshair-32.png") 1x, url("/img/cursors/crosshair-64.png") 2x) 15 15, url("/img/cursors/crosshair-32.png") 15 15, crosshair; --cursor-grab: image-set(url("/img/cursors/grab-32.png") 1x, url("/img/cursors/grab-64.png") 2x) 16 19, url("/img/cursors/grab-32.png") 16 19, grab; --cursor-grabbing: image-set(url("/img/cursors/grabbing-32.png") 1x, url("/img/cursors/grabbing-64.png") 2x) 16 19, url("/img/cursors/grabbing-32.png") 16 19, grabbing; --cursor-not-allowed: image-set(url("/img/cursors/not-allowed-32.png") 1x, url("/img/cursors/not-allowed-64.png") 2x) 15 15, url("/img/cursors/not-allowed-32.png") 15 15, not-allowed; } } /* The arrow everywhere (html: `cursor` inherits), so plain text is not an I-beam. These base rules are hover-only, so an element that had no cursor rule before gets none on a touch screen (see above). They sit before every class rule on purpose: same specificity, later wins. */ html { cursor: var(--cursor-arrow); } input, textarea, [contenteditable]:not([contenteditable="false"]), [role="textbox"] { cursor: text; } a[href], area[href], button, select, summary, input[type="button"], input[type="submit"], input[type="reset"], input[type="image"], input[type="file"], input[type="color"], input[type="checkbox"], input[type="radio"], input[type="range"], [role="button"], [role="link"], [role="tab"], [role="option"], [role="menuitem"], [role="switch"], [role="checkbox"], [role="radio"] { cursor: var(--cursor-action); } /* Separate, so an engine without :has() loses only this rule. */ label:has(input[type="checkbox"]:not(:disabled), input[type="radio"]:not(:disabled)) { cursor: var(--cursor-action); } /* A label wrapped round a disabled box or radio: not the hand of the rule above, and not the arrow either. */ label:has(input:disabled) { cursor: var(--cursor-not-allowed); } /* A row that selects its car on a click. Only hover-mode: on a touch screen its button is what takes the tap, as before. */ .squad-row[data-mode]:not(.is-out) { cursor: var(--cursor-action); } /* !important: a control's class rule (or a parent's action cursor, through a label) must never bring the hand back on a disabled one. */ :disabled, [aria-disabled="true"] { cursor: var(--cursor-not-allowed) !important; } } /* The map (CameraViewport.razor, Rendering/ViewportCursor). The arrow by default; these classes come from its pointer handlers. The hand over another car stays while nothing else applies: a press there picks the car. */ .car-hover-target { cursor: var(--cursor-action); } .camera-viewport--targeting, .camera-viewport--targeting .car-hover-target { cursor: var(--cursor-crosshair); } .camera-viewport--handle, .camera-viewport--handle .car-hover-target { cursor: var(--cursor-grab); } /* Everything: a drag crosses cars, the Recenter button and the Inspect bubble and is still a drag. Only for the length of a press. */ .camera-viewport--grabbing, .camera-viewport--grabbing * { cursor: var(--cursor-grabbing) !important; } /* Every cockpit page fills the browser edge-to-edge - no default white page margin/background should ever show around .cockpit-shell. */ /* Controls are never double-tap-to-zoom targets: two quick taps on a button/link/field (the speed arrows, Ready, a turn's confirm) must act twice, not zoom the page on iOS. manipulation keeps scrolling and pinch-zoom. */ button, a, input, select, textarea, label, summary, [role="button"], /* Tappable things that are not native controls: the custom select's popup rows, /play's opponent rows, and SVG maps (the Overworld's node circles). An element's effective touch-action is the intersection of its own and its ancestors' (up to a scroll container), so the page root covers everything else; the arena's CameraViewport sets touch-action:none inline, which still wins there. */ html, body, svg, [role="option"], .cockpit-select-option, .cockpit-opponent-row, .play-combatant-row, .play-combatant-detail { touch-action: manipulation; } html, body { margin: 0; padding: 0; height: 100%; background: var(--cockpit-bg); } /* This is where `.camera-viewport-svg * { pointer-events: none }` used to live. The bug it worked around was real - a pointer event's OffsetX/OffsetY are measured against event.target, the specific shape the finger landed on, not against the element the listener sits on, so a tap landing on a painted car outline got measured against that shape's own bounding box instead of the canvas (found on a real phone: the drag handle only answered taps offset to one side of the car). Switching every shape off was the cheapest fix at the time. It was also the wrong layer. The defect was the coordinate *source*, not the hit-testing: CameraViewport now reads ClientX/ClientY, which are viewport-relative and don't care what was hit, and subtracts the container's own origin (see ContainerPoint there). With that in place nothing needs the shapes switched off, so they're switched back on - which is what makes hovering and tapping things in the arena possible at all, and what the observation/inspect UI is built on. */ /* Turn playback moves each car 20 times a second (30 steps over 1.5s, each one a full Blazor re-render) and the cars visibly stuttered across the field as a result. Rather than re-rendering more often - which multiplies the cost of every panel on the page, not just the arena, and lands hardest on the phones this game is actually played on - the browser fills in the gaps between steps for free. --car-step is set per-car by the owning page to its own step interval, so a transition finishes exactly as the next step arrives. The 0ms default means a caller that hasn't set it gets today's snapping rather than a guessed cadence. `linear` because CurvedTurnPlayback has already paced the motion correctly; easing here would fight it and make constant speed look like it surges. .wreck-glyph is every out-of-action glyph (wrecked, exploded, drowned, overturned - docs/COLLISION-PHYSICS-PLAN.md Phase 1): the same placement so a wreck can glide once it can be pushed, without being counted as a live .car-glyph. */ .car-glyph, .car-capsule, .car-outline, .wreck-glyph { /* `translate`/`rotate`, not `transform` - see CarGlyph.razor. The SVG transform attribute isn't mapped to the CSS transform property in WebKit at all, so transitioning `transform` here was a silent no-op for every Safari player. fill-box keeps rotation about the glyph's own centre rather than the viewBox corner that auto-fit moves each render. */ transform-box: fill-box; transform-origin: center; transition: translate var(--car-step, 0ms) linear, rotate var(--car-step, 0ms) linear; } /* Everything that rides along with a car - its label and status icons, the hover ring and hover target, a shot's muzzle and impact flashes, a damage number (Rendering/CarFollow) - glides with it on the same transition, never rotating. Before this they jumped once per playback step beside a gliding glyph (docs/PLAN.md "Playback smoothness"). */ .car-follow { transition: translate var(--car-step, 0ms) linear; } /* Weapons fire (docs/WEAPON-MOUNT-ART-PLAN.md Phase 4a, D-22..D-25). Every shot is a frame - a group TurnPlaybackLayer lays from the barrel tip to where the shot ends (translate, rotate, scale by its length; the playback driver re-lays it every frame as both cars move) holding its family's look in a unit frame, (0,0) to (1,0) (Shared/ShotEffectShape). Strokes are non-scaling, so widths and the Vulcan's dashes are screen pixels at any zoom - nothing is dashed by a stroke-dasharray measured in metres any more (the Phase 3 hit tracer drew as zoom-dependent dashes because of exactly that: under vector-effect: non-scaling-stroke both engines measure dashes in screen px, and pathLength does not fix it - it scales by the user-space length first). A draw-on is a scaleX of the line from the tip instead, and a projectile a translateX along the frame, so neither needs a length at all. What tells a hit from a miss is the target end (D-23): a hit's frame ends on the target's centre, where the impact spark (below) and the damage label land; a miss's ends short of the target or past it (ShotEffects.MissOf) and is a little fainter. Colour and shape say the family (D-24) - and never only colour: a dashed burst, a thick streak, a travelling dot, a cone, an instant line. Nothing persists (D-25): every look's whole life is --fx-life (at most ~480 ms) from its own start, and a hit's impact ends by --fx-travel + 240 ms (at most 490 ms). The shots of one volley start --shot-delay apart (D-15, set inline); every animation fills both ways so a delayed shot holds its invisible first frame until it starts, and its last (invisible) frame after it ends. The elements stay in the DOM for the rest of the turn (keyed, so their animations run once), transparent. */ .fx-gun { --fx-life: 400ms; --fx-travel: 150ms; --fx-colour: #ffd84a; --fx-width: 2px; } .fx-vulcan { --fx-life: 400ms; --fx-travel: 150ms; --fx-colour: #ffd84a; --fx-width: 2px; } .fx-cannon { --fx-life: 380ms; --fx-travel: 120ms; --fx-colour: #ff9a3c; --fx-width: 4.5px; --fx-impact: #ff9a3c; } .fx-rocket { --fx-life: 480ms; --fx-travel: 250ms; --fx-colour: #fff3b0; --fx-width: 3px; --fx-impact: #ff7a29; } .fx-flame { --fx-life: 450ms; --fx-travel: 150ms; --fx-colour: #ff6a1a; --fx-width: 0px; --fx-impact: #ff6a1a; } .fx-laser { --fx-life: 300ms; --fx-travel: 0ms; --fx-colour: #7ff7ff; --fx-width: 1.5px; --fx-flash: #9ffaff; --fx-impact: #7ff7ff; } .fx-sidearm { --fx-life: 300ms; --fx-travel: 100ms; --fx-colour: #f4f4f4; --fx-width: 1.2px; --fx-impact: #f4f4f4; } .shot-fx { animation: fx-life var(--fx-life, 400ms) linear var(--shot-delay, 0ms) both; } .shot-fx.is-miss { animation-name: fx-life-miss; } .shot-fx.fx-laser { animation-name: fx-life-laser; } .shot-fx.fx-laser.is-miss { animation-name: fx-life-laser-miss; } @keyframes fx-life { 0% { opacity: 0; } 0.1% { opacity: 1; } 55% { opacity: 1; } 100% { opacity: 0; } } @keyframes fx-life-miss { 0% { opacity: 0; } 0.1% { opacity: 0.8; } 45% { opacity: 0.7; } 100% { opacity: 0; } } @keyframes fx-life-laser { 0% { opacity: 0; } 0.1% { opacity: 1; } 30% { opacity: 1; } 100% { opacity: 0; } } @keyframes fx-life-laser-miss { 0% { opacity: 0; } 0.1% { opacity: 0.8; } 30% { opacity: 0.75; } 100% { opacity: 0; } } .shot-fx .fx-line, .shot-fx .fx-casing, .shot-fx .fx-glow, .shot-fx .fx-smoke, .shot-fx .fx-dot, .shot-fx .fx-dot-casing { fill: none; stroke-linecap: round; } .shot-fx .fx-line { stroke: var(--fx-colour); stroke-width: var(--fx-width); } /* A dark casing under each line, so a pale tracer still reads on the salt flats and on sand. */ .shot-fx .fx-casing { stroke: rgba(0, 0, 0, 0.45); stroke-width: calc(var(--fx-width) + 2px); } .shot-fx.fx-vulcan .fx-line, .shot-fx.fx-vulcan .fx-casing { /* The one deliberately dashed look (D-24): a burst. Screen px - the stroke is non-scaling. */ stroke-dasharray: 7 5; stroke-linecap: butt; } .shot-fx.fx-laser .fx-glow { stroke: rgba(80, 235, 255, 0.35); stroke-width: 5px; } .shot-fx.fx-rocket .fx-smoke { stroke: rgba(205, 205, 205, 0.7); stroke-width: var(--fx-width); } .shot-fx.fx-rocket .fx-dot { stroke: var(--fx-colour); stroke-width: 7px; } .shot-fx.fx-rocket .fx-dot-casing { stroke: rgba(0, 0, 0, 0.55); stroke-width: 10px; } .shot-fx.fx-flame .fx-cone { fill: var(--fx-colour); fill-opacity: 0.4; } .shot-fx.fx-flame .fx-cone-core { fill: #ffd23f; fill-opacity: 0.55; } /* A line drawn on from the tip (fill-box origin at its left end - the tip - not the viewBox corner). */ .shot-fx .fx-grow { transform-box: fill-box; transform-origin: 0% 50%; animation: fx-grow var(--fx-travel, 150ms) linear var(--shot-delay, 0ms) both; } @keyframes fx-grow { from { transform: scaleX(0.001); } to { transform: scaleX(1); } } /* The flame's cone spreads out from the nozzle, longer and wider at once. */ .shot-fx .fx-spread { transform-box: fill-box; transform-origin: 0% 50%; animation: fx-spread var(--fx-travel, 150ms) ease-out var(--shot-delay, 0ms) both; } @keyframes fx-spread { from { transform: scale(0.05); } to { transform: scale(1); } } /* A projectile along the frame: 1px is the frame's whole length (the group is scaled by it). */ .shot-fx .fx-run { animation: fx-run var(--fx-travel, 250ms) linear var(--shot-delay, 0ms) both; } @keyframes fx-run { from { transform: translateX(0px); } to { transform: translateX(1px); } } /* The cannon's streak is a fifth of the frame long, so it runs to 0.8 and ends at the target. */ .shot-fx .fx-run-streak { animation: fx-run-streak var(--fx-travel, 120ms) linear var(--shot-delay, 0ms) both; } @keyframes fx-run-streak { from { transform: translateX(0px); } to { transform: translateX(0.8px); } } /* Muzzle flash and impact spark. Both expand and vanish - only the moment it happened. fill-box origins so each scales about its own centre and not about the viewBox corner, which auto-fit moves every render (the same trap CarGlyph avoids by staying on the transform attribute). The impact starts as the family's line or projectile reaches the target (--fx-travel), its own volley delay on top. */ .shot-muzzle, .shot-impact { transform-box: fill-box; transform-origin: center; } .shot-muzzle { stroke: var(--fx-flash, #ffd479); animation: shot-flash 200ms ease-out var(--shot-delay, 0ms) both; } .shot-impact { stroke: var(--fx-impact, #ff8a7a); animation: shot-flash 240ms ease-out calc(var(--fx-travel, 150ms) + var(--shot-delay, 0ms)) both; opacity: 0; } @keyframes shot-flash { 0% { transform: scale(0.4); opacity: 0; } 0.1% { transform: scale(0.4); opacity: 0.95; } 100% { transform: scale(2.2); opacity: 0; } } /* The legend's own layout: a small table of samples, each a dark strip of field with a shooter and a target. */ .shot-legend { margin-top: 12px; } .shot-legend-title { margin: 0 0 6px; font-size: 1rem; } .shot-legend-table { border-collapse: collapse; } .shot-legend-table th, .shot-legend-table td { padding: 3px 8px 3px 0; text-align: left; vertical-align: middle; font-weight: normal; } .shot-legend-table thead th { font-size: 0.8rem; opacity: 0.75; } .shot-legend-sample { display: block; max-width: 100%; height: auto; border-radius: 3px; } .shot-legend-ground { fill: #3a3f44; } .shot-legend-car { fill: #9aa3ad; } /* /play's "?" legend (Cockpit/ShotEffectsLegend) draws the same frames and sparks, frozen at one moment of their run: 180 ms into a shot (a gun's line drawn, a rocket three-quarters of the way, a laser still bright) and 80 ms into a spark. */ .shot-legend .shot-fx, .shot-legend .shot-fx * { animation-delay: -180ms !important; animation-play-state: paused !important; } .shot-legend .shot-impact { animation-delay: -80ms !important; animation-play-state: paused !important; } /* docs/WEAPON-MOUNT-ART-PLAN.md Phase 4b (D-27, D-28): the fire-check ticks on /play's planned path (Cockpit/FireCheckTicks) - a short white bar across the path at each moving leg's end, a white ring where the car stands still (its count beside it). Light, thin and colourless, so they never read as the risk-coloured waypoint dots; dimmed and dashed while Hold fire or the weapons hold is on. */ .fire-check-tick line, .fire-check-tick circle { stroke: #f2f5f8; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; fill: none; opacity: 0.85; } .fire-check-tick.is-stationary circle { stroke-width: 1.5; } .fire-check-count text { fill: #f2f5f8; opacity: 0.85; font-weight: bold; } .fire-check-ticks.is-held line, .fire-check-ticks.is-held circle { opacity: 0.35; stroke-dasharray: 2 3; } .fire-check-ticks.is-held .fire-check-count text { opacity: 0.35; } .fire-check-legend { margin-top: 12px; } /* The field's top-right corner while planning (Play.razor's OverlayContent): the count of fire checks, the tooltip's trigger. */ .cockpit-fire-check-chip { position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; align-items: center; min-height: 32px; padding: 0 10px; background: rgba(5, 12, 5, 0.82); border: 1px solid var(--cockpit-green-dim); color: #f2f5f8; font-size: 0.8rem; line-height: 1.3; white-space: nowrap; } .cockpit-fire-check-chip.is-held { opacity: 0.6; } .cockpit-fire-check-hint { display: inline-block; line-height: 1.3; text-decoration: underline dotted; text-underline-offset: 3px; } /* docs/WEAPON-MOUNT-ART-PLAN.md section 6 "Dispenser drops" (Phase 3): a short puff where a drop leaves the car's dispenser box (or the drop point when this observer sees no box). Grows and fades in ~300 ms; the hazard itself is drawn as before. */ .drop-puff { transform-box: fill-box; transform-origin: center; animation: drop-puff 300ms ease-out both; } @keyframes drop-puff { from { transform: scale(0.6); opacity: 0.9; } to { transform: scale(2.4); opacity: 0; } } /* Boot splash. Sits at the bottom of the stacking order; .cockpit-shell and the title screen both claim a layer above it and both paint an opaque background, so it is covered the instant a page renders rather than needing to be dismissed. */ .app-boot { position: fixed; inset: 0; z-index: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: var(--cockpit-bg); font-family: var(--cockpit-font); color: var(--cockpit-green-dim); } .app-boot-title { font-size: clamp(18px, 4vw, 30px); letter-spacing: 8px; color: var(--cockpit-green); text-shadow: 0 0 18px var(--cockpit-glow); } .app-boot-status { font-size: 12px; letter-spacing: 3px; text-transform: uppercase; } /* Three dots that fill in, so a slow connection shows something alive rather than a frozen word. content, not opacity, so there is no layout shift. */ .app-boot-status::after { content: ""; animation: app-boot-dots 1.2s steps(1, end) infinite; } @keyframes app-boot-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } } /* docs/ART-STYLE.md Phase 3: a wind turbine's rotor (Shared/StandingLayer). Display only, and no C# runs for it. transform-box: fill-box keeps the origin on the hub, the centre of the rotor symbol's full circle, wherever the camera has put the viewBox: the default box is the warning in ArenaMapLayer. PropRenderMath.RotorSeconds is this duration, and its 108 steps are 12 frames a second. It keyframes the individual rotate property, not transform, for an engine detail: Chromium gives an animated transform its own compositor layer, which re-records paint across the page at each step during playback, and does not composite this one (measured in the doc). If an engine changes that, the look is the same and only the cost moves. */ .standing-rotor { transform-box: fill-box; transform-origin: center; animation: standing-rotor-turn 9s steps(108) infinite; } @keyframes standing-rotor-turn { to { rotate: 360deg; } } @media (prefers-reduced-motion: reduce) { .standing-rotor { animation: none; } } @media (prefers-reduced-motion: reduce) { .app-boot-status::after { animation: none; content: "..."; } } /* A cell that just lost points. Brief, and on the cell itself rather than the whole panel - the point is to say *which* readout changed, which a panel flash would lose. Paired with a @key on the same token in Play.razor, since a class alone would not replay the animation on a second hit. */ .cockpit-cell.is-damaged { animation: cockpit-damage-flash 620ms ease-out; } @keyframes cockpit-damage-flash { 0% { background: var(--cockpit-red); color: var(--cockpit-bg); } 35% { background: var(--cockpit-red); color: var(--cockpit-bg); } 100% { background: transparent; } } .cockpit-bar-track.is-damaged { animation: cockpit-damage-bar 620ms ease-out; } @keyframes cockpit-damage-bar { 0% { border-color: var(--cockpit-red); box-shadow: 0 0 10px var(--cockpit-red); } 100% { border-color: var(--cockpit-green-dim); box-shadow: none; } } /* ========================================================================== Armor table (docs/PLAN.md "Armor table and damage flash") - Cockpit/ArmorCells + ArmorHeaderCells inside a .armor-table: the Combatants/Standings tables on /watch, /hall (rail and broadcast), /dev/replay and /play's Game Over table. Five narrow right-aligned columns F B L R U. The wrapper is the size container: the rail's columns are narrow even on a desktop, so the layout answers to the TABLE's width, never the viewport's. Narrow, each row becomes two lines (a flex row that wraps after the armor): the car and its armor first, then the status (and the model / result / time) under it, so the numbers keep their columns and the status gets the whole width. ========================================================================== */ :root { /* One armor column's width: three digits and a little air. */ --armor-col: 2.3em; } .armor-table-wrap { container: armor-table / inline-size; overflow-x: auto; } .armor-table { width: 100%; border-collapse: collapse; } .armor-table th { text-align: left; font-weight: normal; color: var(--cockpit-green-dim); white-space: nowrap; } .armor-table td, .armor-table th { padding: 1px 4px 1px 0; vertical-align: top; } .armor-table .armor-head, .armor-table .armor-cell { width: var(--armor-col); min-width: var(--armor-col); max-width: var(--armor-col); box-sizing: border-box; padding-left: 0; padding-right: 0.4em; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .armor-table .armor-cell--unknown { width: auto; max-width: none; text-align: left; color: var(--cockpit-green-dim); } /* The header letters: a tooltip chip each (Front armor, ...), the chip's own underline kept but no extra padding. */ .armor-table .armor-head .cockpit-tooltip-wrap { display: inline-block; } /* The car name ellipsises before anything else does. */ .armor-table .armor-table-car { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 0; width: 40%; } .armor-table--race .armor-table-status, .armor-table--broadcast .armor-table-status { white-space: nowrap; } /* The first armor column gets a little room from whatever sits before it. */ .armor-table .armor-head[data-facing="Front"], .armor-table .armor-cell[data-facing="Front"] { width: calc(var(--armor-col) + 0.3em); min-width: calc(var(--armor-col) + 0.3em); max-width: calc(var(--armor-col) + 0.3em); } /* A side at 0 is gone: dimmed, still legible. */ .armor-value.is-gone { opacity: 0.4; } /* A side that just lost points: red, held for the first ~35%, then back to its own colour. Re-created by its @key on every drop, so a second hit restarts it. --cockpit-armor-flash-duration is written inline by Cockpit/ArmorCells from its one tunable, ArmorFlash.FlashMilliseconds (docs/PLAN.md "Tunable Values"). */ .armor-value { display: inline-block; } .armor-value.is-flash { animation: armor-flash var(--cockpit-armor-flash-duration) ease-out; } @keyframes armor-flash { 0%, 35% { color: var(--cockpit-red); opacity: 1; text-shadow: 0 0 6px rgba(255, 59, 59, 0.6); } 100% { text-shadow: none; } } @keyframes armor-flash-static { 0%, 100% { color: var(--cockpit-red); opacity: 1; } } /* Reduced motion: the same red for the same time, no fade - it switches off at the end (steps), it never animates. */ @media (prefers-reduced-motion: reduce) { .armor-value.is-flash { animation: armor-flash-static var(--cockpit-armor-flash-duration) step-end; } } /* Screen-reader-only header text (the broadcast's Car / Status headings - the letters are the only header it shows). */ .armor-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Narrow: two lines per car. The row becomes a wrapping flex line - [pos] car (flexible, ellipsised) + the five fixed armor columns, a zero-height break (tbody tr::after, order 3), then the row's other cells (.armor-table-sub: status, model, result, time, laps) on the second line. The header keeps the car heading and the letters; its other headings stay for screen readers only. The thresholds are where the one-line row stops fitting at the rail's font: a race status "P3 · 2.1 km to go", a model and a status word, a result and a time beside a car name and the five columns. */ @container armor-table (max-width: 399px) { .armor-table--race tr { display: flex; flex-wrap: wrap; align-items: baseline; } .armor-table--race tbody tr::after { content: ""; order: 3; flex-basis: 100%; height: 0; } .armor-table--race tbody tr { padding-bottom: 3px; } .armor-table--race .armor-table-pos { order: 0; flex: none; } .armor-table--race .armor-table-car { order: 1; flex: 1 1 0; min-width: 0; max-width: none; width: auto; } .armor-table--race .armor-cell, .armor-table--race .armor-head { order: 2; flex: none; } .armor-table--race .armor-table-sub { order: 4; min-width: 0; padding-left: 0.6em; } .armor-table--race thead .armor-table-sub { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); } .armor-table--race .armor-table-status { flex: 1 1 100%; white-space: normal; } } @container armor-table (max-width: 459px) { .armor-table--model tr { display: flex; flex-wrap: wrap; align-items: baseline; } .armor-table--model tbody tr::after { content: ""; order: 3; flex-basis: 100%; height: 0; } .armor-table--model tbody tr { padding-bottom: 3px; } .armor-table--model .armor-table-pos { order: 0; flex: none; } .armor-table--model .armor-table-car { order: 1; flex: 1 1 0; min-width: 0; max-width: none; width: auto; } .armor-table--model .armor-cell, .armor-table--model .armor-head { order: 2; flex: none; } .armor-table--model .armor-table-sub { order: 4; min-width: 0; padding-left: 0.6em; } .armor-table--model thead .armor-table-sub { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); } /* The model then the status on the second line, the status right-aligned under the armor. */ .armor-table--model .armor-table-model { flex: 1 1 auto; color: var(--cockpit-green-dim); } .armor-table--model .armor-table-status { flex: 0 1 auto; margin-left: auto; text-align: right; padding-right: 0.45em; } } @container armor-table (max-width: 419px) { .armor-table--gameover tr { display: flex; flex-wrap: wrap; align-items: baseline; } .armor-table--gameover tbody tr::after { content: ""; order: 3; flex-basis: 100%; height: 0; } .armor-table--gameover tbody tr { padding-bottom: 3px; } .armor-table--gameover .armor-table-pos { order: 0; flex: none; } .armor-table--gameover .armor-table-car { order: 1; flex: 1 1 0; min-width: 0; max-width: none; width: auto; } .armor-table--gameover .armor-cell, .armor-table--gameover .armor-head { order: 2; flex: none; } .armor-table--gameover .armor-table-sub { order: 4; min-width: 0; padding-left: 0.6em; } .armor-table--gameover thead .armor-table-sub { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); } } /* /play's Combatants/Standings rows (docs/PLAN.md "Armor table and damage flash", /play): the same table and narrow layout as the spectator tables (.armor-table--model / --race above), plus what /play's rows always had - a click centres the camera, a live opponent's row rings its car on hover, an out car is struck through, this player's own row is a bold tinted band (kept in sight while the list scrolls, in the fit layout below) - and an opponent's components / damage line under its row (.play-combatant-detail). The wrap is not a scroll container here (the panel body is), or the own row's sticky band would stick to the wrap instead. */ .armor-table-wrap--play { overflow: visible; } /* Clear of the panel's scrollbar: an overlay scrollbar (macOS, iOS) sits over the panel body's right edge while the list scrolls, which is where the U column's numbers are. */ .cockpit-rail-scroll-panel .armor-table-wrap--play { padding-right: 8px; } /* A fixed layout: the rail's width sizes the table, never its text - a 32-character name or a long model + passenger token (both ellipsised, nowrap) would otherwise widen the table past the panel by its min-content. */ .armor-table--play { table-layout: fixed; } .armor-table--play tr.play-combatant-row, .armor-table--play tr.play-combatant-detail { cursor: var(--cursor-action); transition: background-color var(--cockpit-dur) var(--cockpit-ease); } .armor-table--play tr.play-combatant-row.out { opacity: 0.45; text-decoration: line-through; } /* The race's slim own-row band: only in the fit layout, where the Standings panel scrolls inside itself (see the fit rules). */ .armor-table--play tr.play-own-band { display: none; } .armor-table--play tr.play-combatant-row.is-own { font-weight: 700; background-color: rgba(255, 255, 255, 0.08); } .armor-table--play .play-combatant-detail-cell { padding: 0 0 3px 0; } /* A little tighter than the spectator tables: the fit layout's tightest rail (a five-weapon car, or eight race cars, at 1000x600) leaves this panel the header and one or two rows, and the first must still be wholly in sight (verify-combat-fit.mjs). */ .armor-table--play td, .armor-table--play th { padding-top: 0; padding-bottom: 0; } /* The numbers in the cockpit's own green, not the row's colour: the first seat's colour is red (TeamColors), so this player's own row - very often that seat - would hide the red flash. The car name keeps the colour. */ .armor-table--play .armor-value { color: var(--cockpit-green); } /* One hover band over a car's row and its detail row, whichever is pointed at. */ @media (hover: hover) { .armor-table--play tr.play-combatant-row.hoverable:hover, .armor-table--play tr.play-combatant-row.hoverable:hover + tr.play-combatant-detail, .armor-table--play tr.play-combatant-row.hoverable:has(+ tr.play-combatant-detail:hover), .armor-table--play tr.play-combatant-detail.hoverable:hover { background: rgba(51, 255, 119, 0.12); } } /* Narrow (the rail on every desktop and phone): the model cell ellipsises (its title has the whole text) so the status beside it stays whole; the detail line spans the row. */ @container armor-table (max-width: 459px) { .armor-table--play.armor-table--model .armor-table-model { flex: 1 1 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .armor-table--play.armor-table--model .armor-table-status { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .armor-table--play .play-combatant-detail-cell { flex: 1 1 100%; min-width: 0; } } /* The power bar's own width used to snap between turns. */ .cockpit-bar-fill { transition: width var(--cockpit-dur-slow) var(--cockpit-ease); } /* The topbar phase readout. It changes text on every phase change and was otherwise indistinguishable from the turn counter beside it; @key'd on the phase in Play.razor so each new state announces itself once. */ .cockpit-phase { animation: cockpit-phase-in var(--cockpit-dur) var(--cockpit-ease); } .cockpit-phase.is-resolving { color: var(--cockpit-amber); } .cockpit-phase.is-spectating { color: var(--cockpit-green-dim); } .cockpit-phase.is-over { color: var(--cockpit-green-bright); } @keyframes cockpit-phase-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .cockpit-cell.is-damaged, .cockpit-bar-track.is-damaged, .cockpit-phase { animation: none; } .cockpit-bar-fill { transition: none; } } .cockpit-shell { font-family: var(--cockpit-font); color: var(--cockpit-green); background: var(--cockpit-bg); /* Above the boot splash - see .app-boot. */ position: relative; z-index: 1; /* 10px, plus the safe-area inset on each edge (0 without a notch). The frame's border still runs edge to edge; only the content is kept clear. */ padding: calc(10px + var(--cockpit-safe-top)) calc(10px + var(--cockpit-safe-right)) calc(10px + var(--cockpit-safe-bottom)) calc(10px + var(--cockpit-safe-left)); border: 2px solid var(--cockpit-green-dim); box-sizing: border-box; /* Fills the browser viewport rather than a fixed footprint - min- height (not height) so a page whose content genuinely needs more room (e.g. Garage's crew panels) still just scrolls normally rather than clipping. display:flex column is what lets /play's .cockpit-main claim the remaining vertical space below the topbar (see its own flex:1) and lets a lighter page like /lobby center its content in that same remaining space. */ width: 100%; min-height: 100vh; display: flex; flex-direction: column; } .cockpit-topbar { display: flex; flex-wrap: wrap; justify-content: space-between; /* A floor on the gap between the left (Home/page name) and right (Prestige/status/menu) groups, and the row gap once a topbar with enough content wraps to two lines at a narrow width - without either, the two groups could sit flush against each other with no visible separation ("HOME ROSTERPRESTIGE" running together) rather than reflowing. Found live on a tablet, on /roster's heavier topbar (a Prestige bar plus an unlock count on the right, alongside Home/Lobby/ Roster on the left) - every page sharing this shell benefits. */ gap: 4px 10px; padding: 4px 10px; margin-bottom: 10px; border-bottom: 1px solid var(--cockpit-green-dim); letter-spacing: 2px; text-transform: uppercase; } /* Lobby topbar's Prestige readout (Arena progression Phase 3) - the rank number plus a small horizontal XP bar toward the next one. */ .lobby-prestige-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; } .lobby-prestige-bar { display: inline-block; width: 48px; height: 6px; background: var(--cockpit-panel-bg); border: 1px solid var(--cockpit-green-dim); } /* The same bar at panel width - GameOver's Prestige XP bar and /roster's "next Prestige rank" panel, which are the same quantity as the badge's, just given room. A modifier rather than a second class so there is one XP bar in the app. */ .lobby-prestige-bar.is-wide { display: block; width: 100%; height: 8px; } .lobby-prestige-bar-fill { display: block; height: 100%; background: var(--cockpit-green); } /* Standard hamburger-menu affordance for reaching Settings without a keyboard (a tablet has no Escape key). Sized as a real tap target, not a text-sized cockpit-button - it needs to work on a phone. */ .cockpit-menu-button { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; font-size: 20px; line-height: 1; background: transparent; color: var(--cockpit-green); border: 2px solid var(--cockpit-green); cursor: var(--cursor-action); flex-shrink: 0; } .cockpit-menu-button:hover { background: var(--cockpit-green-dim); color: var(--cockpit-bg); box-shadow: 0 0 8px var(--cockpit-glow); } .cockpit-menu-button:active { background: var(--cockpit-green); color: var(--cockpit-bg); box-shadow: none; } /* /play's Leave match, beside the menu button (it was a rail panel of its own - no room for it in the 1000x600 fit rail). As tall as the menu button, so the top bar does not grow. */ .cockpit-topbar-button { height: 32px; padding: 0 8px; font-size: 12px; white-space: nowrap; flex-shrink: 0; } .cockpit-topbar-label-short { display: none; } /* The status group wraps (Play.razor): the sentence may take its own line(s) and break inside, Leave match + Settings stay together. */ .cockpit-topbar-status { min-width: 0; max-width: 100%; } .cockpit-topbar-status > .cockpit-phase { min-width: 0; overflow-wrap: anywhere; } /* A phone: the short label ("Leave"), so Leave match and the Settings menu button always fit beside each other on screen. */ @media (max-width: 699px) { .cockpit-topbar-label-full { display: none; } .cockpit-topbar-label-short { display: inline; } } .cockpit-main { display: flex; gap: 12px; /* flex:1/min-height:0 claims the shell's remaining vertical space below the topbar (and above .cockpit-log, on /play) - stretch (not flex-start) is what hands .cockpit-field a genuine, non-circular height so the arena canvas inside it can size itself against a real number instead of a percentage with nothing definite to resolve against. Pages without a canvas (/lobby, /garage) are unaffected in practice - their own content just centers or flows normally in the same reclaimed space. */ align-items: stretch; flex: 1; min-height: 0; } .cockpit-field { border: 1px solid var(--cockpit-green-dim); padding: 4px; background: #000; line-height: 0; max-width: 100%; /* Grows to fill whatever width .cockpit-main has left over (next to .cockpit-side's fixed 340px) and centers CameraViewport's own canvas within that space - CameraViewport.razor measures this element's own rendered rect (via viewport.js's getSquareSize) and explicitly sizes itself to the largest square that fits both axes. A no-op for pages with no canvas child. */ display: flex; align-items: center; justify-content: center; flex: 1; min-width: 0; min-height: 0; } /* The body of a non-arena page (/overworld, /lobby...) - the space below the topbar. Declares itself a container so LayoutGrid's container queries have something to measure: a grid collapses to one column by how wide *this* is, not the viewport. Pages compose HStack/VStack/ LayoutGrid inside it rather than writing flex/grid inline. */ .cockpit-page { flex: 1; min-width: 0; min-height: 0; padding: 16px; container-type: inline-size; container-name: cockpit-page; /* Same size the /play rail (.cockpit-side) reads at - the form pages used to borrow that class purely for this, and its fixed 340px width came along for the ride. */ font-size: 15px; } /* A single centred form or notice (settings, a countdown, an error) - capped so it reads as a card on a wide screen, full width on a phone. Sizing, not layout: put it inside a VStack/LayoutGrid, don't nest more layout inside it. */ .cockpit-col-narrow { width: min(440px, 100%); } .cockpit-side { display: flex; flex-direction: column; gap: 8px; width: 340px; flex-shrink: 0; font-size: 15px; } .cockpit-weapon-row, .cockpit-status-grid, .cockpit-nav-row, .cockpit-opponent-row { display: flex; justify-content: space-between; } /* Keeps the weapon/crew row's name column ("Machine Gun · front, fixed") on one line instead of wrapping to a second - at the fit layout's ~244px rail column (1000x600, PR #293's breakpoint) a wrap pushed the whole rail past the viewport (tools/uitest/verify-combat-fit.mjs's railScroll check). min-width: 0 overrides flex's default auto min-width, which otherwise refuses to shrink a row below its text's natural width and defeats text-overflow entirely. gap keeps the stat column from crowding the ellipsis when the name truncates. The full name is still available via the span's title attribute, and this only clips the name text - the stat span (tier colour, damage/range/WRECKED) is untouched. */ .cockpit-weapon-row { gap: 8px; } .cockpit-weapon-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; } .cockpit-weapon-row > span:last-child { flex-shrink: 0; } /* docs/CREW-TRAITS-PLAN.md PR 5 review remediation - a display name can run up to 32 characters (DisplayNameChanger.MaxLength) plus a team prefix and a "(Waymo)"/disconnected suffix, routinely much longer than the old bare "Waymo-2". The ORIGINAL version of this fix put the ellipsis on the STATUS span (last-child) and kept the name/model spans at their natural width - backwards, it turned out: a 32-char name is exactly the span that needs to shrink, while ACTIVE/OUT (plus the new COMPACT not-scouted token, see OpponentDamageSummary.NotScoutedToken) must never be the one silently clipped mid-word, since losing track of whether a car is still in the fight is worse than a clipped name a tooltip can recover. So the NAME is the one with min-width:0/overflow:hidden/ellipsis now (.cockpit-opponent-name, shared with InspectBubble's own two-span header below, which has the identical "32-char name vs. a 220px-wide bubble" problem). A SECOND pass (still review remediation, caught live with a real 32-char name rather than a short one) found the rail row's own model column needs the identical treatment, not nowrap/flex-shrink:0: at the rail's ~244px column, "Alexandria Thunderclap VonDraxxx" plus "Standard Sedan" plus "active · ? Cond" is more text than fits even with the status column held fixed - giving ONLY the name flex:1/min-width:0 meant it alone absorbed the entire deficit and shrank to a sliver with no visible ellipsis character at all (and, with no gap between columns, visually fused into the model text right next to it: "Standard Sedanactive"). .cockpit-opponent-model now shares the same ellipsis treatment (rail only - InspectBubble has no model span in this row at all), so flexbox's normal shrink math (proportional to each item's own natural width) distributes the squeeze across BOTH text columns instead of one disappearing while the other stays full - the model name is short and from a small fixed catalog, so it only loses a character or two in practice; the long name gives up the most, same as before, just never all the way to nothing. The row's own `gap` keeps the three columns visually separated even at their tightest. */ .cockpit-opponent-name, .cockpit-opponent-row--rail > .cockpit-opponent-model { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; } .cockpit-opponent-row--rail { gap: 6px; } /* The status span (ACTIVE/OUT, or - rail only - that plus a compact "? Cond"/"? Load" not-scouted token, OpponentDamageSummary.NotScoutedToken) never shrinks below its own natural width, in EITHER row - short and fixed in the bubble, short-by-design (a token, never the full sentence) in the rail. */ .cockpit-opponent-status { white-space: nowrap; flex-shrink: 0; } /* Every Combatants row centers the camera on that car when clicked, regardless of .out/.hoverable - a wreck still has a real position worth jumping to. Scoped to those two classes rather than the bare .cockpit-opponent-row, which InspectBubble.razor's own header row also uses (inert there only because the bubble is pointer-events:none) - a pointer cursor over a row that can't actually be clicked would be misleading even if harmless. */ .cockpit-opponent-row.hoverable, .cockpit-opponent-row.out { cursor: var(--cursor-action); } .cockpit-status-grid { flex-wrap: wrap; row-gap: 4px; } /* The inspect bubble's Damage row: one item per line rather than a single "1 TIRE OUT | 1 WPN OUT" string, which read as a run-on in the bubble's narrow width. Same "- " marker as .cockpit-participant-list, indented a little further since this sits under its own "Damage" label line rather than starting a panel. */ .cockpit-damage-list { list-style: none; margin: 0; padding: 0 0 0 12px; } .cockpit-damage-list li::before { content: "- "; color: var(--cockpit-green-dim); } .cockpit-status-grid span { width: 48%; } /* docs/DROPPED-WEAPONS-PLAN.md's "Underbody armor" added a 5th cell to the Armor row's own grid - sized so it still wraps to the same row count as the 4-cell Tires row beside it (3-per-row narrow, same 2 rows a 2-per-row/4-item grid already took; 5-per-row at the wide breakpoint below, still 1 row) rather than growing the rail past the /play fit layout's viewport-tall budget (tools/uitest/verify-combat-fit.mjs). Two classes on the same element for specificity over the plain .cockpit-status-grid span rule above, regardless of source order. */ .cockpit-status-grid.cockpit-status-grid--armor span { width: 31%; } /* docs/RACING-PLAN.md Phase 4 - the "Race" badge beside a race map in the /lobby and /watch arena pickers: a small chequered-flag-white outlined tag, inline BEFORE the label (a long label ellipsises at the end, and took a trailing badge with it - found live) so it rides along in the closed select and every option. */ .cockpit-race-badge { display: inline-block; margin-right: 6px; padding: 0 4px; border: 1px solid #f4f4f4; border-radius: 3px; color: #f4f4f4; font-size: 0.75em; line-height: 1.4; letter-spacing: 0.05em; text-transform: uppercase; vertical-align: middle; } /* docs/RACING-PLAN.md Phase 4 - the player's own row in a race's Standings panel. A tinted band (same negative-margin trick as .hoverable below, so the row keeps its width) plus bold, so "where am I" is a glance in a list of eight. */ .cockpit-opponent-row.is-own { margin: 0 -4px; padding: 0 4px; font-weight: 700; background-color: rgba(255, 255, 255, 0.08); cursor: var(--cursor-action); } .cockpit-opponent-row.out, .cockpit-weapon-row.out { opacity: 0.45; text-decoration: line-through; } /* An opponent row that answers back: pointing at it rings that car on the arena (Play.razor's _hoveredOpponentId). The negative margin lets the highlight sit slightly proud of the text without moving anything - the row lives in a fixed-width rail, so growing it would reflow the panel. Only rows for cars still in the match get this class. */ .cockpit-opponent-row.hoverable { margin: 0 -4px; padding: 0 4px; transition: background-color var(--cockpit-dur) var(--cockpit-ease); } /* /play's "center on my car" button (map UI polish) - top-left corner of the arena, the one corner CameraViewport doesn't already use (the scale bar is bottom-right, Recenter is bottom-center - see their own CSS in CameraViewport.razor.css). Declared here rather than there because this button is Play.razor's own OverlayContent markup, not CameraViewport's - /watch has no "my car" to center on, so it never renders this at all. Sized well past the 44px touch-target minimum on every screen (not just a narrow one) rather than branching on a breakpoint for a few extra pixels on desktop. */ .camera-center-button { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: rgba(1, 18, 10, 0.85); } /* The Inspect panel, floated over the car on the arena instead of the side rail - see InspectBubble.razor/BubblePlacement.cs. top is set inline as a plain percentage of CameraViewport's own container; left is computed below from the inline --bubble-left custom property (see its own comment there) so the bubble's actual pixel box - not just its anchor fraction - stays inside the container on any screen size. Everything else here is the fixed visual shell. pointer-events:none - it's a readout, must never block a click/hover reaching the arena underneath it. Default sits above the car (tail on the bottom edge, pointing down at it); .tail-top is BubblePlacement's flip for a car too close to the top of the screen to fit the bubble above it. */ .inspect-bubble { position: absolute; /* --bubble-left (InspectBubble.razor, BubblePlacement.LeftPercent) is only ever clamped to a FRACTION of the view (SideMarginPercent) - fine on a wide desktop canvas, but on a narrow phone viewport the container itself can be well under this bubble's own max-width (220px), so a percent-only clamp still let it hang off the right edge and add horizontal page scroll (found live at 390px). 100cqw is this same container's real width in CSS pixels (container-type:inline-size is set on .camera-viewport-focus specifically for this, alongside the notch's own identical trick just below) - clamping the pixel position against it, using half of max-width as the margin, keeps the bubble's actual rendered box on screen at any container size, not just a wide one. */ left: clamp(110px, var(--bubble-left), calc(100cqw - 110px)); transform: translate(-50%, calc(-100% - 12px)); /* Glides with the car it points at between playback steps (--car-step, set inline; docs/PLAN.md "Playback smoothness"), as the camera and the car glyphs do. */ transition: left var(--car-step, 0ms) linear, top var(--car-step, 0ms) linear; min-width: 160px; max-width: 220px; /* Was 70% transparent (30% opaque) - reported live as too opaque, hiding the arena and cars underneath a hovered/pinned car. Owner feedback, 2026-09-25 (after the sparser-dots pass made terrain patterns easier to read through the bubble): the tradeoff had gone too far the other way - text over a dotted surface was hard to read at 30% opaque, so this is back up to 50%, plus a light backdrop-filter blur so the terrain dots directly behind the text soften into a wash rather than competing with the letterforms, while the map still shows through. Same color-mix-over-transparent idiom .cockpit-spinner's border already uses, so this fixed --cockpit-bg thins out the same way a per-theme rgba() literal couldn't without hand-updating if that variable ever changed. */ background: color-mix(in srgb, var(--cockpit-bg) 50%, transparent); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); border: 1px solid var(--cockpit-green); box-shadow: 0 0 8px var(--cockpit-glow); padding: 6px 8px; font-size: 12px; /* .cockpit-field (this element's ancestor) sets line-height:0 to kill the inline-SVG descender gap - inherited here it collapses every row's line box to nothing, stacking all the text on top of itself. .camera-recenter resets it the same way for the same reason. */ line-height: normal; z-index: var(--cockpit-z-popup); pointer-events: none; } .inspect-bubble.tail-top { transform: translate(-50%, 12px); } /* docs/WEAPON-DAMAGE-REBALANCE-PLAN.md sidearm follow-up S4 - the armed-passenger token's own line under the Model row ("Passenger: Shotgun (tires)"). The bubble is pointer-events:none, so a title tooltip can't reach it and an ellipsis would lose the intel for good: it wraps instead. The bubble floats over the map, outside the fit layout's rail budget. */ .inspect-bubble-passenger { text-align: right; } /* The one clickable thing inside .inspect-bubble (map UI polish) - opts itself back into pointer-events so a tap/click reaches it even though the bubble itself is pointer-events:none. Sized for a comfortable phone tap target (the bubble travels with the car on a small screen too, and there's no hover fallback there). Small margin-top so it doesn't crowd the header row right above it. */ .inspect-bubble-target-button { pointer-events: auto; display: block; width: 100%; margin-top: 4px; min-height: 32px; font-size: 12px; padding: 4px 8px; } .inspect-bubble-target-button.is-active { background: var(--cockpit-green); color: var(--cockpit-bg); } /* The notch - a real child of .inspect-bubble now (not a ::after), so its `left` can be driven by --notch-offset (InspectBubble.razor, a fraction of the whole view set by BubblePlacement) instead of a fixed 50%: a car near/off the side edge clamps the bubble's own LeftPercent to stay readable, but the notch still has to track the car's true position past that clamp. `100cqw` is 1% of CameraViewport's own rendered width per unit (see its container-type:inline-size, set specifically for this) - the same "percent of the whole view" unit --notch-offset is already expressed in - converted here to real pixels and added to 50% of *this element's own containing block* (the bubble, since it's a child now), then clamped to [7px, 100%-7px] so the notch travels the bubble's entire rendered width tracking the car exactly, but can never render outside the bubble's own rounded border no matter how far the car's true position has diverged from the bubble's clamped anchor. A rotated square, half-overlapping the bubble's edge with only the two borders that end up facing outward drawn, the same "diamond with two borders" technique every CSS speech-bubble tail uses. No existing tail/tooltip precedent anywhere else in this codebase to diverge from or match. */ .inspect-bubble-notch { position: absolute; left: clamp(7px, calc(50% + var(--notch-offset, 0) * 100cqw), calc(100% - 7px)); width: 10px; height: 10px; /* Same transparency as .inspect-bubble itself, so the notch reads as part of the bubble rather than an opaque patch stuck to it. */ background: color-mix(in srgb, var(--cockpit-bg) 30%, transparent); transform: translateX(-50%) rotate(45deg); } .inspect-bubble:not(.tail-top) .inspect-bubble-notch { bottom: -6px; border-right: 1px solid var(--cockpit-green); border-bottom: 1px solid var(--cockpit-green); } .inspect-bubble.tail-top .inspect-bubble-notch { top: -6px; border-left: 1px solid var(--cockpit-green); border-top: 1px solid var(--cockpit-green); } /* The car is genuinely outside the visible view horizontally - a notch would have nothing on-screen left to point at, so BubblePlacement swaps it for this instead: a small arrowhead sitting right at the screen's own edge, its tip touching the edge exactly and its base fanning inward - a directional cue ("keep looking that way") rather than a mere marker. A classic CSS border-triangle: a zero-size box with only one border colored and the two perpendicular to it transparent, which mitres them into the taper. edge-left points left (border-right is the flat base, no border-left at all collapses that side to the tip) with no further shift needed, since the tip already sits exactly on the box's own left%:0 anchor; edge-right mirrors that (border-left is the base) but then has to shift itself left by its own border width, since a box's near-zero-width anchor is always its *left* edge regardless of which side the triangle's point ends up on. */ .inspect-bubble-edge-arrow { position: absolute; width: 0; height: 0; border-top: 16px solid transparent; border-bottom: 16px solid transparent; filter: drop-shadow(0 0 3px var(--cockpit-glow)); z-index: var(--cockpit-z-popup); pointer-events: none; } .inspect-bubble-edge-arrow.edge-left { border-right: 14px solid var(--cockpit-green); transform: translateY(-50%); } .inspect-bubble-edge-arrow.edge-right { border-left: 14px solid var(--cockpit-green); transform: translate(-14px, -50%); } .cockpit-bar-track { background: #062513; border: 1px solid var(--cockpit-green-dim); height: 14px; width: 100%; position: relative; } .cockpit-bar-fill { background: var(--cockpit-green); height: 100%; } .cockpit-bar-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #eafff2; mix-blend-mode: difference; } .cockpit-log { margin-top: 10px; border: 1px solid var(--cockpit-green-dim); background: #000; padding: 6px 10px; height: 120px; overflow-y: auto; font-size: 14px; } /* The log is the one panel that actually scrolls, so it's the one place a default OS scrollbar shows up - a pale chrome strip down the side of an otherwise black terminal. `scrollbar-color` covers Firefox; the ::-webkit- rules cover Chrome/Edge/Safari, which ignore it. Applied to any cockpit scroll region, not just the log, so a future one matches. */ .cockpit-log, .cockpit-scroll, .cockpit-rail-scroll-panel > .cockpit-panel-body, .hall-scroll-panel > .cockpit-panel-body, .hall-recent-list, .hall-shell .cockpit-side-group, .replay-shell .cockpit-side-group { scrollbar-width: thin; scrollbar-color: var(--cockpit-green-dim) #000; } .cockpit-log::-webkit-scrollbar, .cockpit-scroll::-webkit-scrollbar, .cockpit-rail-scroll-panel > .cockpit-panel-body::-webkit-scrollbar, .hall-scroll-panel > .cockpit-panel-body::-webkit-scrollbar, .hall-recent-list::-webkit-scrollbar, .hall-shell .cockpit-side-group::-webkit-scrollbar, .replay-shell .cockpit-side-group::-webkit-scrollbar { width: 10px; } .cockpit-log::-webkit-scrollbar-track, .cockpit-scroll::-webkit-scrollbar-track, .cockpit-rail-scroll-panel > .cockpit-panel-body::-webkit-scrollbar-track, .hall-scroll-panel > .cockpit-panel-body::-webkit-scrollbar-track, .hall-recent-list::-webkit-scrollbar-track, .hall-shell .cockpit-side-group::-webkit-scrollbar-track, .replay-shell .cockpit-side-group::-webkit-scrollbar-track { background: #000; border-left: 1px solid var(--cockpit-green-dim); } .cockpit-log::-webkit-scrollbar-thumb, .cockpit-scroll::-webkit-scrollbar-thumb, .cockpit-rail-scroll-panel > .cockpit-panel-body::-webkit-scrollbar-thumb, .hall-scroll-panel > .cockpit-panel-body::-webkit-scrollbar-thumb, .hall-recent-list::-webkit-scrollbar-thumb, .hall-shell .cockpit-side-group::-webkit-scrollbar-thumb, .replay-shell .cockpit-side-group::-webkit-scrollbar-thumb { background: var(--cockpit-green-dim); border: 2px solid #000; } .cockpit-log::-webkit-scrollbar-thumb:hover, .cockpit-scroll::-webkit-scrollbar-thumb:hover, .cockpit-rail-scroll-panel > .cockpit-panel-body::-webkit-scrollbar-thumb:hover, .hall-scroll-panel > .cockpit-panel-body::-webkit-scrollbar-thumb:hover, .hall-recent-list::-webkit-scrollbar-thumb:hover, .hall-shell .cockpit-side-group::-webkit-scrollbar-thumb:hover, .replay-shell .cockpit-side-group::-webkit-scrollbar-thumb:hover { background: var(--cockpit-green); } /* Windows Chrome puts stepper arrows at both ends of a scrollbar and renders them in OS chrome that no scrollbar property reaches. Nothing else in this UI has them; dropping them also matches Firefox's thin scrollbar, so the two browsers agree. */ .cockpit-log::-webkit-scrollbar-button, .cockpit-scroll::-webkit-scrollbar-button { display: none; } .cockpit-checkbox-row input[type="checkbox"] { accent-color: var(--cockpit-green); } /* An opt-in fully cockpit-drawn checkbox: accent-color above only tints the CHECKED state - an unchecked box is still the OS's white square, the kind of native control that "pops up unstyled" on an otherwise black terminal page. The arena builder uses this (tools/uitest/verify-builder-styles.mjs checks for it); other pages keep the accent-color look until they opt in. The tick is a clip-path, so it can take var(--cockpit-green) directly. */ input[type="checkbox"].cockpit-checkbox { appearance: none; -webkit-appearance: none; flex: none; width: 16px; height: 16px; margin: 0; border: 1px solid var(--cockpit-green); background: #000; display: inline-grid; place-content: center; cursor: var(--cursor-action); } input[type="checkbox"].cockpit-checkbox::before { content: ""; width: 10px; height: 10px; background: var(--cockpit-green); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); transform: scale(0); transition: transform var(--cockpit-dur-fast, 90ms) var(--cockpit-ease, ease); } input[type="checkbox"].cockpit-checkbox:checked::before { transform: scale(1); } input[type="checkbox"].cockpit-checkbox:focus-visible { outline: 2px solid var(--cockpit-green-bright); outline-offset: 2px; } input[type="checkbox"].cockpit-checkbox:disabled { opacity: 0.4; cursor: var(--cursor-not-allowed); } .cockpit-log-line::before { content: "> "; color: var(--cockpit-green-dim); } /* The log was forty lines of identical green, which made "did I hit anything" a reading exercise rather than a glance. Colour is by event kind, and the palette is the one already in use on the field, so a red line in the log and a red marker on the arena mean the same thing. */ .cockpit-log-line.is-hit { color: #ff8a7a; } .cockpit-log-line.is-miss { color: #7f8c8d; } .cockpit-log-line.is-collision { color: #f6ad55; } .cockpit-log-line.is-control { color: #ecc94b; } .cockpit-log-line.is-impact { color: var(--cockpit-red); } .cockpit-log-line.is-hazard { color: var(--cockpit-amber); } /* Same blue as the drowned status icon/glyph (Rendering/SurfaceRenderColors.Drowned) - a zone-change note is almost always about water, and the colour link makes the connection obvious at a glance. */ .cockpit-log-line.is-terrain { color: #7ec8f5; } /* docs/RACING-PLAN.md Phase 4 - gate crossings, finishes, "weapons free": the chequered-flag white of the gates themselves (ArenaLayer draws them #f4f4f4), so a race line never reads as damage or a hazard. */ .cockpit-log-line.is-race { color: #f4f4f4; } /* docs/WEAPON-MOUNT-ART-PLAN.md Phase 4b - why one of your own weapons fired nothing: a quiet violet, never a damage or hazard colour. */ .cockpit-log-line.is-nofire { color: #b9a7e8; } /* A shot's instant in the turn, in front of its line - dimmer than the line itself, tabular so the stamps line up. */ .cockpit-log-time { opacity: 0.7; font-variant-numeric: tabular-nums; } /* Turn separators are the log's structure rather than its content - dimmer and letter-spaced so they read as rules between turns, not as events. */ .cockpit-log-line.is-structural { color: var(--cockpit-green-dim); letter-spacing: 1px; } /* Age banding, newest first. Older lines recede rather than competing with what just happened; three coarse bands rather than a per-line opacity, because this list re-renders ~20 times a second during playback. */ .cockpit-log-line.is-older { opacity: 0.62; } .cockpit-log-line.is-oldest { opacity: 0.38; } /* The newest line arrives rather than appearing. Only the inserted element runs this - see the @key note in Play.razor - so the list doesn't re-animate wholesale every time a line lands. */ .cockpit-log-line { animation: cockpit-log-arrive var(--cockpit-dur) var(--cockpit-ease); transition: opacity var(--cockpit-dur-slow) var(--cockpit-ease); } @keyframes cockpit-log-arrive { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .cockpit-log-line { animation: none; transition: none; } } .cockpit-select, .cockpit-input, .cockpit-button { font-family: var(--cockpit-font); background: #000; color: var(--cockpit-green); border: 1px solid var(--cockpit-green); padding: 3px 6px; box-sizing: border-box; } .cockpit-select, .cockpit-input { /* Below 16px, iOS Safari auto-zooms the whole page on focus (these inherit 15px from .cockpit-side otherwise) - an explicit 16px here is imperceptible on desktop but stops that zoom on a phone. */ font-size: 16px; transition: border-color var(--cockpit-dur) var(--cockpit-ease), box-shadow var(--cockpit-dur) var(--cockpit-ease); } /* Strips the native control chrome (macOS bevel + arrow) so the closed select reads as cockpit rather than OS UI - Safari draws its own bevel here whenever appearance isn't overridden. The open option list is still OS-drawn either way (Safari allows no CSS on