/* ---- Typefaces --------------------------------------------------------------
   Text: Highway Gothic (the FHWA sign alphabet, public domain) - see fonts/README.md.
   Headers: XBAND Rough, in caps, and only in caps. Both are bundled and served from
   this site, never linked from a CDN: the privacy policy promises every asset is ours
   to serve. These two blocks and the two rules below are the only places either face
   is named; everything else inherits. */
@font-face {
    font-family: 'Highway Gothic';
    src: url('../fonts/HWYGOTH.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'XBAND Rough';
    src: url('../fonts/XbandRough.woff') format('woff');
    font-display: swap;
}
/* IBM VGA 8x16 (Oldschool PC Font Pack v2.2, CC BY-SA 4.0 - fonts/README.md): the
   connection readouts and the log surfaces. A pixel face, native at 16px - the status
   pill is set there; the log and debug readouts keep their smaller sizes for density,
   where the outline softens but the face still reads as itself. */
@font-face {
    font-family: 'IBM VGA';
    src: url('../fonts/Px437_IBM_VGA_8x16.ttf') format('truetype');
    font-display: swap;
}

/* Headers. Uppercase is part of the face's look, not a per-heading decision. The h3
   labels (deck headings, player-card names) are deliberately left in the text face:
   the rough texture stops reading at that size. */
h1, h2, #round-seq-text, #winner-text-big, #winner-sub-text {
    font-family: 'XBAND Rough', 'Highway Gothic', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Form controls do not inherit type on their own: without this, every button, input
   and select in the game draws itself in the browser's own UI face (measured: Arial)
   while everything around it is in Highway Gothic. One place names the typeface - the
   body rule below - and everything else inherits it. */
button, input, select, textarea { font-family: inherit; }

body { 
    overflow: hidden; 
    background: #000; 
    /* Highway Gothic first (the sign alphabet), a normal UI face behind it for the
       glyphs it does not carry (emoji, arrows, bullets). */
    font-family: 'Highway Gothic', 'Segoe UI', sans-serif; 
    /* A double tap is a dash, not a text gesture: on an iPhone a tap on the pad (or
       anywhere over the arena) otherwise starts iOS' own text selection over
       whatever is under the thumb, and the blue selection boxes sit on top of the
       match. The -webkit- form is the one iOS Safari honours - unprefixed
       user-select only landed in 16.4, so Safari older than that ignored this rule
       entirely and selected anyway. -webkit-touch-callout is in the body.mobile
       block below, together with the double-tap-zoom refusal. */
    user-select: none;
    -webkit-user-select: none;
}

/* ...and the one place selection has to survive it: the text fields (player name,
   lobby code, invite link, bug report). Turning it off on body is enough to stop
   iOS putting a caret in them at all. */
input,
textarea,
[contenteditable="true"] {
    user-select: text;
    -webkit-user-select: text;
    -webkit-touch-callout: default;
}

canvas { display: block; }

/* ==================== ICONS ==================== */
/* One stroke style for the whole app. The definitions live in a sprite at the top
   of index.html; an icon is size 1em of whatever it sits in, so `.btn-icon`,
   `.touch-btn` and `.mode-icon` only need a font-size (which they already set). */
.ico {
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.14em;
    pointer-events: none;
}

/* ==================== MENU SYSTEM ==================== */

/* ==================== MENU SCREENS (shared layout) ==================== */
/* The menu screens used to be fixed-height flex boxes centred with
   justify-content: center. A screen taller than the window was then clipped at
   BOTH ends (a centred flex item that overflows spills past the top edge, where
   it cannot be scrolled to). These two classes fix that for every screen: the
   outer box scrolls, the inner box centres itself only while it fits. */
.menu-screen {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: none;              /* JS flips this to flex */
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    z-index: 11;
}

.menu-inner {
    /* flex: 0 0 auto is load-bearing: as a shrinking flex item this box was
       squashed to the viewport height while its content stayed taller, and the
       centred overflow was then cut off at BOTH ends. Not shrinking lets it grow,
       so the screen scrolls and nothing is hidden. */
    flex: 0 0 auto;
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 26px 16px 34px;
    box-sizing: border-box;
}

.menu-inner h2 { font-size: 34px; }
.menu-inner .subtitle { font-size: 15px; color: #aaa; }
/* The matchmaking screen's sub-line is orange with its mode descriptions below -
   the muted grey stays the app's shared subtitle colour everywhere else. */
#matchmaking-screen .subtitle { color: #ff9800; }

/* Two-column card row (Private Match: settings | invite lobby) */
.panel-row {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    max-width: 980px;
}

/* PRIVATE MATCH tabs. The screen is two ways to play, not two screens: one
   settings card serves both, and the tab decides what its values configure - the
   match on this machine, or the room. */
.pm-tabs {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 980px;
}

.pm-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.6px;
    color: #ddd;
    background: rgba(0, 0, 0, 0.66);
    border: 2px solid rgba(255, 255, 255, 0.22);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.pm-tab .ico { font-size: 18px; }

.pm-tab.active {
    color: #fff;
    background: linear-gradient(135deg, #4550c0 0%, #5c3a8c 100%);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.35);
}

/* A room's rules belong to its host: the rows are shown to everyone (so a guest
   can see what they are about to play) but only the host can change them. */
#settings-controls.locked {
    opacity: 0.55;
    pointer-events: none;
}

#settings-card .lobby-hint { margin-bottom: 2px; }

.pm-card {
    background: rgba(0, 0, 0, 0.74);
    border: 2px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    padding: 14px 16px;
    min-width: 320px;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
    backdrop-filter: blur(5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.pm-card h3 {
    color: #ffd700;
    font-size: 15px;
    letter-spacing: 1px;
    text-align: center;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

.pm-card label {
    color: #e6e6e6;
    font-size: 12px;
    letter-spacing: 0.6px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95);
}

.pm-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: center; }
.pm-field { display: flex; gap: 8px; align-items: center; }

.pm-input {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: 2px solid #555;
    border-radius: 8px;
}

.pm-input:disabled { opacity: 0.55; }
.pm-input:focus { outline: none; border-color: #ffd700; }

/* Compact variants so a whole screen fits a short window (e.g. 659px tall) */
.mode-btn.compact { min-width: 92px; padding: 8px 10px; }
.mode-btn.compact .mode-icon { font-size: 20px; margin-bottom: 2px; }
.mode-btn.compact .mode-name { font-size: 13px; margin-bottom: 0; }
.mode-btn.compact .mode-desc { font-size: 11px; }

.player-count-btn.compact { padding: 7px 14px; font-size: 14px; }

.menu-btn.compact {
    padding: 10px 18px;
    font-size: 16px;
    min-width: 0;
    gap: 8px;
}
.menu-btn.compact .btn-icon { font-size: 18px; }
.menu-btn.compact .btn-text { font-size: 16px; }

/* Lobby player list */
#lobby-players {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
    color: #fff;
    max-height: 150px;
    overflow-y: auto;
}

#lobby-players li {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 7px;
    padding: 4px 8px;
}

#lobby-players .tag {
    font-size: 11px;
    color: #ffd700;
    border: 1px solid rgba(255, 215, 0, 0.5);
    border-radius: 5px;
    padding: 0 4px;
}

#lobby-players .tag.you { color: #4fc3f7; border-color: rgba(79, 195, 247, 0.6); }

.lobby-hint { font-size: 12px; color: #c9c9c9; text-align: center; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95); }
.lobby-code { font-family: 'IBM VGA', monospace; font-size: 22px; letter-spacing: 3px; color: #ffd700; }

/* Main Menu */
#main-menu {
    background: transparent;
}

/* Watermark, bottom-left of the main menu: the studio mark, and a link to the
   studio's site. The anchor is a bare wrapper - the image keeps the positioning,
   so the click target is the mark itself and not a rectangle around it.
   Sized at 1.7x its old mark (260/26vw -> 442/44vw, and the phone's cap with it):
   `max-width` is a share of the width, so scaling the pair keeps the mark the same
   amount larger on a narrow window as on a wide one - leaving the cap behind would
   have grown it only until the cap took over. */
#menu-watermark {
    position: absolute;
    left: 24px;
    bottom: 24px;
    width: 442px;
    max-width: 44vw;
    height: auto;
    cursor: pointer;
    user-select: none;
    -webkit-user-drag: none;
    transform-origin: left bottom;
    transition: filter 120ms ease, transform 120ms ease;
    /* Layer 0 of the menu chrome: the buttons are layer 1 (see below), so where
       a short window makes them overlap, the button keeps the click. */
    z-index: 0;
}

/* Where the mark and a button overlap (a window too short to keep them apart),
   the button is painted above and keeps the click. The wrapper's empty space is
   not lifted, so the mark stays clickable everywhere else. */
#main-menu .menu-btn {
    position: relative;
    z-index: 1;
}

#menu-watermark:hover {
    filter: brightness(1.2);
    transform: scale(1.03);
}

#menu-watermark-link:focus-visible #menu-watermark {
    outline: 2px solid #ffd700;
    outline-offset: 6px;
    border-radius: 4px;
}

#main-menu h1 {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Menu Buttons */
.menu-btn {
    padding: 18px 50px;
    font-size: 24px;
    /* Darker than it was (#667eea -> #764ba2): white on that start was 3.66:1, so the
       text and the stroke icons washed out on the left of every button. These two clear
       4.5:1 on both ends (6.6:1 and 8.6:1) and keep the same blue-to-purple read. */
    background: linear-gradient(135deg, #4550c0 0%, #5c3a8c 100%);
    border: none;
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s;
    min-width: 280px;
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}

.menu-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(102, 126, 234, 0.6);
    background: linear-gradient(135deg, #5c3a8c 0%, #4550c0 100%);
}

.menu-btn:active {
    transform: translateY(-1px);
}

.btn-icon {
    font-size: 28px;
}

.btn-text {
    font-size: 24px;
}

/* Back button variant */
.back-btn {
    background: linear-gradient(135deg, #555 0%, #333 100%);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.back-btn:hover {
    background: linear-gradient(135deg, #666 0%, #444 100%);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
}

/* Private Match */
#private-match h2, #settings-screen h2 {
    animation: float 3s ease-in-out infinite;
}

/* These screens sit straight over the bright arena now (the menu is not shaded),
   so their text carries its own contrast. */
#private-match h2, #settings-screen h2,
#private-match h3, #settings-screen h3,
#private-match p, #settings-screen p {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
}

/* Mode Selection Buttons */
.mode-btn {
    background: rgba(0, 0, 0, 0.45);   /* was translucent white: invisible over grass */
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
    min-width: 150px;
}

.mode-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 215, 0, 0.5);
}

.mode-btn.active {
    background: rgba(255, 215, 0, 0.2);
    border-color: #ffd700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

.mode-icon {
    font-size: 48px;
    margin-bottom: 10px;
}

.mode-name {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
}

.mode-desc {
    color: #ff9800;
    font-size: 14px;
    /* Orange needs the same dark edge the rest of the over-arena text carries:
       a SELECTED button lays a gold wash over the panel, and the thin 11-14px
       line was otherwise eaten by it. */
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}

/* Player Count Buttons */
.player-count-btn {
    background: rgba(0, 0, 0, 0.45);   /* dark enough to read over the arena */
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    padding: 12px 24px;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
}

.player-count-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.player-count-btn.active {
    background: rgba(255, 215, 0, 0.3);
    border-color: #ffd700;
}

/* Match Preview */
#match-preview {
    border: 2px solid rgba(255, 215, 0, 0.3);
}

/* Settings */
#settings-screen h3 {
    color: #ffd700;
}

#settings-screen label {
    display: block;
    margin-bottom: 5px;
}

#volume-slider {
    -webkit-appearance: none;
    height: 8px;
    background: #444;
    border-radius: 4px;
    outline: none;
}

#volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: #ffd700;
    border-radius: 50%;
    cursor: pointer;
}

/* Bug report (js/bug-report.js). The player writes the description; the log, the
   state and a screenshot are attached by the screen itself, and the log preview
   is there so it is obvious what is being sent.
   The backdrop is not decoration: this screen can be opened from a live match (the
   🐞 button next to the in-match gear), where the HUD renders straight through
   `.menu-inner` and every label overlaps the round clock. */
#bug-report-screen {
    background: rgba(8, 8, 14, 0.72);
}

.report-body {
    background: rgba(0, 0, 0, 0.74);
    border: 2px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    padding: 18px 20px;
    width: min(720px, 92vw);
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
    backdrop-filter: blur(5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.report-body label, .report-label {
    color: #e6e6e6;
    font-size: 12px;
    letter-spacing: 0.6px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95);
}

.report-label { margin-top: 6px; }

.report-message {
    min-height: 78px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.35;
}

.report-shot-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 110px;
    max-height: 260px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
}

#report-shot {
    display: none;
    max-width: 100%;
    max-height: 240px;
}

#report-shot-empty {
    color: #888;
    font-size: 13px;
    padding: 24px;
    margin: 0;
}

.report-shot-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

/* Four compact buttons have to share one row on a phone. */
.report-shot-actions .menu-btn.compact { padding: 8px 12px; }
.report-shot-actions .menu-btn.compact .btn-icon { font-size: 15px; }
.report-shot-actions .menu-btn.compact .btn-text { font-size: 13px; }

.report-hint {
    color: #9e9e9e;
    font-size: 12px;
    margin: 0;
}

.report-log-box {
    background: rgba(0, 0, 0, 0.45);
    border-radius: 10px;
    padding: 10px;
}

#report-log {
    margin: 6px 0 0;
    max-height: 132px;
    overflow: auto;
    font-family: 'IBM VGA', monospace;
    font-size: 11px;
    line-height: 1.4;
    color: #9ccc65;
    white-space: pre-wrap;
    word-break: break-word;
}

.report-actions { gap: 12px; }

.report-status {
    min-height: 20px;
    margin: 0;
    font-size: 14px;
    color: #aaa;
    text-align: center;
    max-width: 92vw;
}

.report-status.ok { color: #8bc34a; }
.report-status.error { color: #ff8a80; }

/* SEND is disabled while a send is in flight, during the cooldown, and once the
   day's reports are used up (js/bug-report.js). */
#report-send:disabled {
    opacity: 0.6;
    cursor: default;
    transform: none;
    box-shadow: none;
}

/* Quick Match Stub */
#quick-match-stub {
    background: rgba(0, 0, 0, 0.8);
}

/* ==================== GAME UI ==================== */

/* Player cards: compact, stacked down the right edge of the screen. */
#player-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 200px;
}

#player-stack .player-hud {
    background: rgba(0, 0, 0, 0.7);
    border-radius: 9px;
    padding: 7px 10px;
    min-width: 0;
    width: 100%;
    /* No backdrop-filter: the card is a flat 70% black either way, and a blur
       region has to re-sample the live WebGL canvas underneath it on every
       composited frame - four of these, plus the HUD pills, every frame of a
       match. The cost is per-region and per-frame; the look is identical. */
}

#player-stack .player-hud h3 { font-size: 12px; margin-bottom: 4px; }

/* The pip strip: in basic it is the round wins, in brawl the remaining lives. ONE rule
   for every card: the first two cards are hand-written in index.html and the rest are
   built by Game.createPlayerHUDBlock, and the two copies of this styling had drifted
   to 13px vs 16px. The wider glyphs could then wrap in the card, so one side's strip
   showed fewer pips than the other's and read as "that team has more lives". nowrap
   keeps a strip on one line at any count. */
#player-stack [id$="-rounds"] {
    font-size: 13px;
    line-height: 1;
    margin-top: 3px;
    white-space: nowrap;
}

/* The brawl damage readout: its COLOUR and spacing are what drifted between the two
   card sources (3px vs 5px margin-top). The font-size is not set here on purpose -
   Game.updateHUD sizes it per mode (22px brawl / 14px basic) as an inline style, and
   that is deliberate emphasis, not drift. Its `display` stays inline too. */
#player-stack [id$="-damage"] {
    color: #ff5722;
    margin-top: 3px;
}
#player-stack .bar-container { height: 12px; margin-bottom: 3px; border-width: 1px; }
#player-stack .bar-container .bar { border-radius: 5px; }
#player-stack .ammo-bar { height: 8px; margin-top: 2px; }
#player-stack .bar-label { font-size: 9px; }

/* HUD - Persists across rounds */
#hud {
    display: none;
    align-items: flex-start;
}

.player-hud {
    background: rgba(0,0,0,0.7);
    border-radius: 10px;
    padding: 10px 16px;
    min-width: 220px;
    backdrop-filter: blur(6px);
}

.player-hud h3 {
    color: #fff;
    font-size: 14px;
    margin-bottom: 6px;
}

.bar-container {
    width: 100%;
    height: 18px;
    background: #222;
    border-radius: 9px;
    overflow: hidden;
    margin-bottom: 5px;
    position: relative;
    border: 2px solid #444;
}

.bar-container .bar {
    height: 100%;
    border-radius: 7px;
    transition: width 0.2s ease;
}

.hp-bar {
    background: linear-gradient(90deg, #4caf50, #8bc34a);
}

.ammo-bar {
    background: linear-gradient(90deg, #ff9800, #ffc107);
    height: 11px;
    margin-top: 3px;
}

.bar-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    text-shadow: 0 0 3px #000;
}

/* Kick charge meter: hangs BELOW the top-centre column while the local fighter
   winds a kick up (a hold), turning gold at full charge. Hidden otherwise, and
   absolutely positioned so it costs no space either way: in the flow it widened
   this column from 95px to its own 190px, and because the column is centred
   between the left spacer and the settings/report pills, growing it shifted every
   line (round, cow, mode, seed) ~48px sideways the moment a wind-up started. A
   HUD element appearing must never move another one. */
#center-info {
    text-align: center;
    color: #fff;
    position: relative;   /* the charge meter's containing block */
}
#charge-bar {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 6px;
    width: 190px;
}

#center-info .round {
    font-size: 13px;
    opacity: 0.8;
    font-weight: bold;
}

#center-info .cow-timer {
    font-size: 16px;
    color: #ff9800;
    margin-top: 5px;
    font-weight: bold;
}

/* Instructions */
#instructions {
    display: none;
}

#instructions span {
    margin: 0 12px;
}

#instructions kbd {
    background: #555;
    padding: 2px 7px;
    border-radius: 3px;
    border: 1px solid #777;
    font-size: 11px;
    font-weight: bold;
}

/* ==================== COMBAT FEEDBACK (Feature B) ==================== */

/* Combo counter - centre of the screen, just under the fighters */
.combo-counter {
    position: fixed;
    top: 32%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.85);
    font-size: 44px;
    font-weight: bold;
    color: #ffd700;
    text-shadow: 0 0 12px rgba(0,0,0,0.9), 0 0 26px rgba(255,215,0,0.7);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 16;
    font-family: inherit;
}

.combo-counter.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.combo-counter.combo-finisher {
    color: #ff5722;
    font-size: 56px;
    text-shadow: 0 0 14px rgba(0,0,0,0.9), 0 0 34px rgba(255,87,34,0.8);
}

/* Damage numbers - float up and fade at the point of impact */
.damage-numbers {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 17;
}

.damage-number {
    position: absolute;
    transform: translate(-50%, -50%);
    font-size: 26px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,0.95), 0 0 12px rgba(255,255,255,0.5);
    animation: damage-float 0.8s ease-out forwards;
    font-family: inherit;
}

.damage-number.headshot {
    color: #ff5252;
    font-size: 34px;
}

@keyframes damage-float {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
    20%  { opacity: 1; transform: translate(-50%, -70%) scale(1.15); }
    100% { opacity: 0; transform: translate(-50%, -170%) scale(1); }
}

/* ==================== OFF-SCREEN FIGHTER INDICATORS ==================== */
/* One chip per fighter outside the frame - an arrow turned toward them and
   their seat name, ringed in their HUD colour. js/offscreen.js builds the
   markers and places them on the edge; `--seat` is the fighter's colour. */
.offscreen-indicators {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 14;
}

.offscreen-marker {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 2px solid var(--seat, #fff);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.offscreen-marker.visible { opacity: 1; }

.offscreen-arrow {
    font-size: 13px;
    color: var(--seat, #fff);
}

body.mobile .offscreen-marker { font-size: 11px; padding: 1px 6px; gap: 3px; }
body.mobile .offscreen-arrow { font-size: 12px; }

/* Matchmaking screen sits over the arena like the other menu screens */
#matchmaking-screen h2, #matchmaking-screen h3, #matchmaking-screen p {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
}

#matchmaking-preview {
    border: 2px solid rgba(255, 215, 0, 0.3);
}

/* Debug */
#debug-info {
    display: none;      /* shown by game.showDebug() during a match */
    pointer-events: none;
}

/* Notifications and the rest of the announcer lines.
   The text carries its own highlight instead of a banner. The callers pass the
   player/team colours (yellow over the arena's green measured 1.79:1, red 1.39:1),
   so those glyphs need a halo to read at all - but a box behind them is what the
   players asked to be rid of, so the halo is white instead. One hairline dark shadow
   rides along underneath: a WHITE announcer line (READY?, GO!!!, the winner's
   sub-line) would otherwise have no separation from a bright arena at all. */
#poop-notification,
#round-seq-text,
#winner-text-big,
#winner-sub-text {
    text-shadow:
        0 0 3px rgba(255, 255, 255, 0.95),
        0 0 9px rgba(255, 255, 255, 0.90),
        0 0 18px rgba(255, 255, 255, 0.60),
        0 2px 3px rgba(0, 0, 0, 0.55);
}

/* Round Sequence */
#round-seq-text {
    animation: roundSeqPulse 0.5s ease-out;
}

@keyframes roundSeqPulse {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* Winner Announcement */
#winner-announce {
    animation: winnerFadeIn 0.5s ease-out;
}

@keyframes winnerFadeIn {
    0% { background: transparent; }
    100% { background: radial-gradient(circle, rgba(255,215,0,0.1) 0%, transparent 70%); }
}

/* Start Screen */
#start-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Left as it was: the darkening in .menu-btn is a contrast fix for white text and
       stroke icons on a button, and this is a full-page backdrop with neither. */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    color: #fff;
}

#start-screen h1 {
    font-size: 64px;
    text-shadow: 0 0 30px rgba(255,255,255,0.5);
    margin-bottom: 20px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

#start-screen .subtitle {
    font-size: 22px;
    opacity: 0.9;
    margin-bottom: 35px;
}

#start-screen .start-btn {
    padding: 18px 55px;
    font-size: 26px;
    background: #ff6b6b;
    border: none;
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 8px 20px rgba(255,107,107,0.4);
    transition: all 0.3s;
}

#start-screen .start-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(255,107,107,0.6);
}

#start-screen .controls-info {
    margin-top: 35px;
    background: rgba(0,0,0,0.3);
    padding: 22px;
    border-radius: 12px;
    max-width: 580px;
}

#start-screen .controls-info h3 {
    margin-bottom: 12px;
    font-size: 18px;
}

#start-screen .controls-info .control-row {
    display: flex;
    justify-content: space-between;
    margin: 8px 0;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

/* End Screen */
/* The overlay scrolls and `.menu-inner` does the centring (see MENU SCREENS above),
   so a tall result - four seats of stats, the rematch line, three buttons - scrolls
   on a short screen instead of having its top and bottom cut off. The layout values
   live here and NOT on the element: an inline style would beat the phone rules at
   the bottom of this file, and for the heading and the stats box it already did. */
#end-screen {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1000;
    color: #fff;
}

#end-screen h1 {
    margin: 0;
    font-size: 56px;
    text-align: center;
    /* A lobby name is up to 16 characters of whatever the player typed - it wraps
       rather than running off the side of the screen. */
    overflow-wrap: anywhere;
    text-shadow: 0 0 30px rgba(255,255,255,0.5);
}

#end-screen .stats {
    background: rgba(255,255,255,0.1);
    padding: 25px;
    border-radius: 12px;
    text-align: center;
}

#end-screen .stats p {
    margin: 8px 0;
    font-size: 16px;
}

/* PLAY AGAIN / MAIN MENU / RETURN TO LOBBY. A row on a wide window, one column on
   a phone (see the mobile block); wrapping keeps a third button on screen either
   way. They are all flex rows so that the icon and the label sit the same way in
   every one of them - as buttons they would otherwise each do their own thing:
   PLAY AGAIN (a plain <button>) centres its content, the two .menu-btn ones start
   it at the left edge, and RETURN TO LOBBY was `display:inline-block` from
   showEndScreen, which centres it too and no rule here can override an inline
   style. `justify-content: center` is the wide-window look. */
#end-actions button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

#end-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

#end-screen .restart-btn {
    padding: 14px 45px;
    font-size: 20px;
    background: #51cf66;
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
}

/* Rematch status line, shown on the end screen and in the lobby. Amber reads
   against both the dark end screen and the lobby panel. It says who the room is
   waiting for - only the room's leader can start the next match. */
.rematch-status {
    display: none;
    margin: 10px 0;
    color: #ffd700;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    text-align: center;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95);
}

/* Kick charge meter - the box itself is positioned above (#center-info). */
.charge-track {
    height: 7px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.25);
    overflow: hidden;
}
.charge-fill {
    height: 100%;
    width: 0%;
    background: #ff9800;
    transition: width 40ms linear;
}
.charge-label {
    font-size: 11px;
    letter-spacing: 1px;
    color: #ffd700;
    margin-bottom: 3px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

/* ==================== TOUCH CONTROLS & PHONE LAYOUT ==================== */
/* Opt-in through two body classes:
     body.mobile   - js/input.js: phone-sized coarse-pointer viewport (re-checked
                     on resize/orientationchange, so rotating the phone works)
     body.in-match - js/input.js mirrors the match HUD (#hud shown, in-match
                     settings panel closed). Deriving it from the DOM keeps ONE
                     owner and survives a stale cached game.js.
   The pad needs BOTH, so it can never sit over a menu button - the bug that made
   the menu untappable on an iPhone. */

/* Pinch/double-tap zoom: iOS Safari ignores user-scalable=no in the viewport
   meta, so js/input.js also cancels the gesture* and multi-touch events.
   touch-action keeps scrolling alive in the menu screens (they scroll when the
   viewport is short) while refusing the double-tap zoom. */
body.mobile {
    /* Touch targets never shrink below 52px even if the phone's layout width is
       small (iOS reports a narrower vw than the screen in some modes). */
    --touch-key: clamp(52px, 14vw, 66px);
    /* Clearance under the controls. iOS Safari's bottom bar floats OVER the page,
       and env(safe-area-inset-bottom) is 0 while it is visible - so the pad needs
       a real lift, keeping the home indicator in mind for standalone (installed)
       mode where the bar is gone. Tune here if it still feels tight. */
    --pad-lift: max(72px, calc(28px + env(safe-area-inset-bottom)));
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    overscroll-behavior: none;
    /* A phone must never be wider than its screen: iOS Safari lets the page be
       panned when the layout viewport outgrows the device (and then the controls
       drift off-screen). The rules below keep every row inside the width. */
    max-width: 100vw;
    overflow-x: hidden;
}

/* Sticky :hover on iOS would leave a tapped button looking pressed. */
body.mobile .menu-btn:hover,
body.mobile .mode-btn:hover,
body.mobile .player-count-btn:hover { transform: none; }

#touch-controls { display: none; }

body.mobile.in-match #touch-controls {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* dvh (iOS 15.4+) measures the visible viewport, so Safari's toolbars cannot
       sit on top of the pad; vh stays as the fallback for older browsers. */
    height: min(38vh, 250px);
    height: min(38dvh, 250px);
    /* --pad-lift keeps the stick and buttons clear of Safari's bottom bar. */
    padding: 0 max(14px, env(safe-area-inset-right)) var(--pad-lift) max(14px, env(safe-area-inset-left));
    box-sizing: border-box;
    justify-content: space-between;
    align-items: flex-end;
    /* Below every menu screen (z-index 10-11) and below the HUD (10): the pad is
       a match control, so a menu can always cover it and take the touch. */
    z-index: 9;
    pointer-events: none;   /* between the stick and the buttons the arena still takes input */
    touch-action: none;     /* a drag on the pad is a drag, not a page gesture */
    /* Belt and braces with the body rule: a double tap on the stick (the dash) is
       exactly what iOS reads as "select the block under this". */
    user-select: none;
    -webkit-user-select: none;
}

#touch-stick {
    position: relative;
    width: calc(var(--touch-key) * 2.7);
    height: calc(var(--touch-key) * 2.7);
    border-radius: 50%;
    background: rgba(20, 20, 20, 0.42);
    border: 2px solid rgba(255, 255, 255, 0.22);
    pointer-events: auto;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

#touch-stick.active {
    background: rgba(102, 126, 234, 0.32);
    border-color: rgba(255, 255, 255, 0.5);
}

#touch-stick-knob {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--touch-key) * 1.15);
    height: calc(var(--touch-key) * 1.15);
    margin: calc(var(--touch-key) * -0.575) 0 0 calc(var(--touch-key) * -0.575);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.26);
    border: 2px solid rgba(255, 255, 255, 0.45);
    pointer-events: none;   /* the base owns the pointer, the knob only follows */
}

#touch-actions {
    display: grid;
    /* Three columns for five buttons: punch / kick / jump on the top row,
       poop / block on the bottom. Measured against the pad: 3 keys + the stick
       fit a 360px-wide phone with room for the safe-area padding. */
    grid-template-columns: repeat(3, var(--touch-key));
    grid-template-rows: repeat(2, var(--touch-key));
    gap: 6px;
    pointer-events: auto;
    touch-action: none;
}

.touch-btn {
    width: var(--touch-key);
    height: var(--touch-key);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 20, 20, 0.55);
    border: 2px solid rgba(255, 255, 255, 0.28);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.9);
    font-size: calc(var(--touch-key) * 0.4);
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
}

.touch-btn.action { border-radius: 50%; font-size: calc(var(--touch-key) * 0.46); }
/* The poop button keeps its own colour so the throw is never mistaken for a hit. */
.touch-btn.poop { background: rgba(139, 69, 19, 0.62); border-color: rgba(255, 215, 0, 0.45); }
.touch-btn.block { background: rgba(33, 150, 243, 0.42); border-color: rgba(144, 202, 249, 0.5); }

.touch-btn.active,
.touch-btn:active {
    background: rgba(102, 126, 234, 0.7);
    border-color: rgba(255, 255, 255, 0.85);
    transform: scale(0.94);
}
.touch-btn.poop.active { background: rgba(255, 165, 0, 0.75); border-color: rgba(255, 215, 0, 0.95); }

/* ---- menu screens ---- */
body.mobile .menu-inner { padding: 10px; gap: 10px; }
body.mobile .menu-inner h2 { font-size: 24px; }
body.mobile .menu-inner .subtitle { font-size: 13px; }
body.mobile .panel-row { flex-direction: column; gap: 12px; }
body.mobile .pm-card { padding: 12px; }

/* Tabs share the width; the two labels are long, so they drop to 12px rather
   than wrapping inside their own button. */
body.mobile .pm-tabs { width: 100%; gap: 6px; }
body.mobile .pm-tab { flex: 1 1 0; min-width: 0; padding: 11px 8px; font-size: 12px; letter-spacing: 0.2px; gap: 6px; }
body.mobile .pm-tab .ico { font-size: 16px; }
/* flex-basis 0 lets the browser fit as many buttons per line as the phone is
   wide instead of overflowing to the right (the row containers wrap). */
body.mobile .mode-btn.compact,
body.mobile .mm-mode-btn,
body.mobile .mm-style-btn { flex: 1 1 0; min-width: 0; padding: 8px 4px; }
body.mobile .mode-btn.compact .mode-name { font-size: 12px; }
body.mobile .mode-btn.compact .mode-desc { font-size: 10px; }
body.mobile .player-count-btn.compact { flex: 1 1 0; min-width: 0; padding: 9px 6px; }
/* Buttons that sit in a horizontal row must share the line, not demand 100%. */
body.mobile .menu-btn.compact { flex: 1 1 0; min-width: 0; width: auto; padding: 12px 10px; justify-content: center; }
body.mobile .menu-btn.compact .btn-text { font-size: 14px; }
/* ...but a screen's own BACK button is a direct child of the .menu-inner column,
   where `flex: 1 1 0` (above) makes it swallow every spare pixel - a screen with
   one short card grew a full-height BACK button down the page. Rows still share
   their line; only the screen-level button is held to its own height. */
body.mobile .menu-inner > .back-btn { flex: 0 0 auto; }
/* iOS zooms the page when a focused input's font is under 16px. */
body.mobile input, body.mobile select { font-size: 16px !important; max-width: 100%; }

/* The base .menu-btn has min-width: 280px, which no phone can honour. */
body.mobile .menu-btn { min-width: 0; }

/* #main-menu carries its layout in inline styles, so the overrides need
   !important. (Cheaper than moving the markup to classes: the phone layout is
   the only thing that ever changes here.) */
body.mobile #main-menu { align-items: center !important; padding: 8vh 6vw 0 !important; }
body.mobile #main-menu h1 { font-size: clamp(24px, 7vw, 32px) !important; }
body.mobile #main-menu p { font-size: 15px !important; }
/* The main menu stacks its own buttons in a column. On a phone they are shoved
   to the right edge and shrunk: the desktop pill (24px text, 18/50px padding,
   12px gap) eats most of a portrait screen, and the thumb side of the menu has
   the watermark in it. align-self overrides #main-menu's centred align-items,
   which is inline, so it needs the !important; gap is inline too. */
body.mobile #main-menu > div:has(> .menu-btn) { align-self: flex-end; gap: 8px !important; }
body.mobile #main-menu .menu-btn { width: 100%; padding: 10px 16px; gap: 8px; border-radius: 10px; }
body.mobile #main-menu .menu-btn .btn-icon { font-size: 20px; }
body.mobile #main-menu .menu-btn .btn-text { font-size: 17px; }
body.mobile #menu-watermark { width: 204px; max-width: 51vw; left: 12px; bottom: 12px; }

/* ---- bug report (phone) ---- */
body.mobile .report-body { padding: 12px; width: 94vw; gap: 6px; }
body.mobile .report-shot-frame { min-height: 80px; max-height: 150px; }
body.mobile #report-shot { max-height: 140px; }
body.mobile #report-log { max-height: 96px; font-size: 10px; }
body.mobile .report-status { font-size: 12px; }
/* Four attach buttons on one phone row: two per line, no horizontal scroll. */
body.mobile .report-shot-actions { gap: 6px; }
body.mobile .report-shot-actions .menu-btn.compact { flex: 1 1 44%; padding: 8px 6px; }

/* ---- HUD: same shape as desktop (cards stacked top-right), just much smaller;
   phone screens are high-PPI, so 120-odd px reads fine. The round info stays
   centred at the top and the flex row keeps the two from ever overlapping. ---- */
body.mobile #hud { flex-direction: row; align-items: flex-start !important; padding: 2px 6px calc(2px + env(safe-area-inset-top)) 6px !important; gap: 4px; }
body.mobile #player-stack { width: auto !important; flex-direction: column; gap: 2px; }
/* The base card rules are ID-scoped (#player-stack .player-hud), so the phone
   versions must reach at least as far - a class-only selector silently lost to
   them and the cards collapsed to their text width.
   Four cards share a phone screen, so each one is a wrapped flex column: name,
   hp, ammo, and then the stocks and the KO% share the last line instead of
   taking one each. Nothing is dropped, only stacked tighter. */
body.mobile #player-stack .player-hud {
    flex: 0 0 auto; width: 96px; min-width: 0; padding: 3px 5px; border-radius: 6px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
}
body.mobile #player-stack .player-hud h3 { flex: 1 1 100%; font-size: 8px; margin-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.mobile #player-stack .bar-container { flex: 1 1 100%; height: 8px; margin-bottom: 0; border-width: 1px; }
body.mobile #player-stack .bar-container .bar { border-radius: 3px; }
body.mobile #player-stack .ammo-bar { height: 5px; margin-top: 0; }
body.mobile #player-stack .bar-label { font-size: 7px; }
/* Round dots and brawl damage % carry inline font sizes, so they need !important. */
body.mobile #player-stack [id$="-rounds"], body.mobile #player-stack [id$="-damage"] { font-size: 8px !important; line-height: 1; margin-top: 0 !important; flex: 0 0 auto; }
body.mobile #round-display { font-size: 14px; }
body.mobile #cow-timer { font-size: 12px; }
body.mobile #game-mode-display, body.mobile #world-seed-display { font-size: 10px !important; }
/* In-match settings + bug report. Desktop: two labelled pills in the HUD row.
   Phone: js/input.js moves both into #touch-hud-buttons, which stands in the
   top-left corner at half the pad's key size. They are pressed once a match, not
   while fighting, so the corner is where they belong - out of the thumbs' way
   rather than between them. The holder stays a child of #touch-controls and is
   only lifted out of its flow (position: fixed), so body.in-match still shows
   and hides it with the pad. */
.hud-pill {
    pointer-events: auto;   /* the HUD row itself is pointer-events: none */
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
    /* No backdrop-filter here either - see #player-stack .player-hud. */
    margin-left: 6px;       /* the HUD row is a gap-less flex row */
}

body.mobile #match-settings-label,
body.mobile #match-report-label,
body.mobile #voice-label { display: none; }

#touch-hud-buttons {
    display: flex;
    flex-direction: row;
    gap: 5px;
    position: fixed;
    top: calc(6px + env(safe-area-inset-top));
    left: calc(8px + env(safe-area-inset-left));
    pointer-events: auto;
}

/* Voice: one dot per player (HUD card + lobby row) and the in-match mic pill.
   Dots sit inside `pointer-events: none` HUD cards, so they opt back in; the
   lobby row's dot is clickable and mutes that player locally. */
.voice-dot { margin-left: 6px; font-size: 12px; opacity: 0.9; pointer-events: auto; cursor: pointer; }
body.mobile .voice-dot { font-size: 11px; margin-left: 4px; }

/* Lobby voice chip: always present, colour-coded, pushed to the row's right. */
.voice-chip {
    margin-left: auto;
    flex: none;
    font-size: 11px;
    line-height: 1;
    padding: 4px 7px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #cfd8dc;
    background: rgba(0, 0, 0, 0.18);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}
.voice-chip.on { color: #4fc3f7; border-color: rgba(79, 195, 247, 0.6); }
.voice-chip.talk { color: #9dff6e; border-color: rgba(157, 255, 110, 0.8); background: rgba(157, 255, 110, 0.14); }
.voice-chip.muted { color: #ffb74d; border-color: rgba(255, 183, 77, 0.6); }
.voice-chip.connecting { color: #b39ddb; border-color: rgba(179, 157, 219, 0.55); }
.voice-chip.blocked { color: #ffd54f; border-color: rgba(255, 213, 79, 0.7); }
.voice-chip.off, .voice-chip.none { color: #8d939c; border-color: rgba(255, 255, 255, 0.14); }

/* Microphone chain controls in Settings: gain, gate, and the live level meter. */
.mic-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.mic-label { color: #ccc; font-size: 13px; width: 96px; flex: none; }
.mic-row input[type=range] { flex: 1; min-width: 0; }
.mic-value { color: #aaa; font-size: 13px; width: 42px; text-align: right; flex: none; }
.mic-meter { position: relative; height: 10px; margin-top: 10px; background: #222; border: 1px solid #555; border-radius: 5px; overflow: hidden; opacity: 0.45; transition: opacity 0.2s; }
.mic-meter.live { opacity: 1; }
.mic-meter-fill { height: 100%; width: 0; background: #4caf50; transition: width 0.05s linear; }
.mic-meter-fill.open { background: #8bc34a; }
.mic-gate-mark { position: absolute; top: 0; bottom: 0; width: 2px; left: 20%; background: #ff9800; }

body.mobile .hud-pill {
    margin: 0;
    /* Half the pad's key, 26-33px: deliberately small - they sit out of the fight. */
    width: calc(var(--touch-key) * 0.5);
    height: calc(var(--touch-key) * 0.5);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border-width: 1px;
    font-size: calc(var(--touch-key) * 0.22);
    line-height: 1;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}
/* The network status pill is bottom-right in the desktop layout - exactly where
   the action buttons live. Centre it above the raised pad (its top edge is the
   lift plus the tallest control, the stick). The element carries right/bottom
   inline, so those need !important. */
/* Mobile: a corner chip, right-aligned like the desktop layout, sitting just above
   the action buttons (they own the corner itself, as the stick owns the other one).
   It used to be centred above the pad, which parked a status label in the middle of
   the play field. */
body.mobile #network-status { font-size: 16px; padding: 3px 6px;
    right: max(14px, env(safe-area-inset-right)) !important;
    /* A long message wraps instead of growing leftwards into the joystick: the stick
       owns the other bottom corner and is 2.7 key-widths wide, so the pill starts to
       its right. Measured with the longest one, "Relay (a peer link dropped)". */
    max-width: calc(100vw - var(--touch-key) * 2.7 - 44px);
    text-align: right; }
body.mobile.in-match #network-status { bottom: calc(var(--pad-lift) + var(--touch-key) * 2.3 + 6px) !important; }

/* Landscape phones have little height to spare: lift the pad less there. */
@media (orientation: landscape) and (max-height: 500px) {
    body.mobile { --pad-lift: max(44px, calc(16px + env(safe-area-inset-bottom))); }
}
/* The keyboard/mouse help line and the debug readout are noise on a phone - and
   they sit exactly where the thumbs go. */
body.mobile #debug-info, body.mobile #instructions { display: none !important; }
body.mobile .combo-counter { font-size: 26px; }
body.mobile #round-seq-text { font-size: 46px; }
body.mobile #winner-text-big { font-size: 34px; }
body.mobile #winner-sub-text { font-size: 18px; }

/* ---- end screen ---- */
/* The busiest screen on a phone: a heading that can be a 16-character name, one
   stat line per seat (four in a brawl, plus the poop total), the rematch line and
   up to three buttons. It is one column of full-width controls, and because it is
   a .menu-inner it scrolls rather than clipping when it still does not fit. */
body.mobile #end-screen h1 { font-size: 30px; }
body.mobile #end-screen .stats { padding: 12px 16px; max-width: 92vw; }
body.mobile #end-screen .stats p { margin: 3px 0; font-size: 13px; }
body.mobile #end-actions { flex-direction: column; width: min(340px, 88vw); gap: 10px; }
/* One column of equal, full-width controls. The base .menu-btn is desktop-sized
   (24px text, 18px 50px padding) and is only shrunk for .compact and for the main
   menu, so the end screen's row of them was three oversized buttons - the widest,
   RETURN TO LOBBY, wrapped onto two lines inside its own button.
   The content is aligned like the phone main menu's buttons: to the left, with the
   icon in a fixed column so every label starts at the same x. Centred, three
   labels of different lengths put the icons at three different offsets and the
   column read as ragged. */
body.mobile #end-actions button {
    width: 100%;
    min-height: 48px;
    padding: 14px 16px;
    font-size: 16px;
    justify-content: flex-start;
    gap: 12px;
}
body.mobile #end-actions button .ico { width: 20px; height: 20px; }
body.mobile .rematch-status { font-size: 12px; letter-spacing: 0; max-width: 92vw; }