* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0a0a12; font-family: 'Segoe UI', sans-serif; color: #e0e0e0; }

/* ── Screens ── */
.screen { position: absolute; inset: 0; display: none; }
.screen.active { display: flex; }

/* ── Main Menu (Story 19-0: product start screen, PL/EN) ── */
#main-menu-screen {
    flex-direction: column; align-items: center; justify-content: flex-start;
    padding: 52px 24px 0;
    overflow-y: auto; overflow-x: hidden;
    background: radial-gradient(ellipse 130% 95% at 50% 28%, #1a1a2e 0%, #0a0a12 70%);
}
.menu-inner {
    flex: 1 1 auto; width: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 34px; padding: 20px 0 28px;
}

/* language switch (top-right, deliberately quiet) */
.lang-switch { position: absolute; top: 16px; right: 20px; display: flex; align-items: center; gap: 4px; z-index: 5; }
.lang-btn {
    background: none; border: none; padding: 4px 6px; cursor: pointer;
    color: #6d7385; font: 12px 'Segoe UI', sans-serif; letter-spacing: 2px; text-transform: uppercase;
    border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s;
}
.lang-btn:hover { color: #ccc; }
.lang-btn.active { color: #4fc; border-bottom-color: #4fc; }
.lang-sep { color: #33384a; font-size: 11px; }

/* header */
.menu-head { text-align: center; max-width: 720px; }
.menu-title {
    font-size: clamp(32px, 5.4vw, 56px); font-weight: 200; line-height: 1.05;
    letter-spacing: 0.2em; text-indent: 0.2em; text-transform: uppercase; color: #fff; margin: 0;
}
.menu-title em { font-style: normal; font-weight: 300; color: #4fc; }
.menu-subtitle {
    font-size: clamp(12px, 1.3vw, 14px); color: #8b93a7; letter-spacing: 0.06em;
    line-height: 1.5; margin: 16px 0 0;
}
.menu-subtitle::before {
    content: ''; display: block; width: 72px; height: 1px; margin: 0 auto 16px;
    background: linear-gradient(90deg, rgba(68,255,204,0) 0%, rgba(68,255,204,0.75) 50%, rgba(68,255,204,0) 100%);
}

/* map cards — one wide hero card today, still a grid for Porto Santo / Desertas */
.map-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px; max-width: 780px; width: 100%;
}
.map-card {
    background: #13131f; border: 1px solid #2a2a4a; border-radius: 10px;
    overflow: hidden; cursor: pointer;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.map-card:hover, .map-card:focus-visible {
    border-color: #4fc; transform: translateY(-3px);
    box-shadow: 0 10px 34px rgba(68, 255, 204, 0.14); outline: none;
}
.map-card .thumb {
    width: 100%; aspect-ratio: 1600 / 582; background: #0d0d1a;
    display: flex; align-items: center; justify-content: center;
    color: #4a4a63; font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
    overflow: hidden; border-bottom: 1px solid #23233d;
}
.map-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.map-card:hover .thumb img { transform: scale(1.03); }
.map-card .body { padding: 16px 20px 18px; }
.map-card .name { font-size: 18px; font-weight: 500; color: #fff; letter-spacing: 0.08em; text-transform: uppercase; }
.map-card .desc { font-size: 13px; color: #8b93a7; line-height: 1.5; margin-top: 6px; }
.map-card .go {
    display: inline-block; margin-top: 12px; color: #4fc; opacity: 0.75;
    font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
    transition: opacity 0.2s, transform 0.2s;
}
.map-card:hover .go, .map-card:focus-visible .go { opacity: 1; transform: translateX(3px); }

.menu-buttons { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.btn {
    padding: 10px 24px; border: 1px solid #3a3a5a; border-radius: 6px;
    background: transparent; color: #ccc; font-size: 14px; cursor: pointer; transition: all 0.2s;
    font-family: inherit;
}
.btn:hover { border-color: #4fc; color: #4fc; }
.btn-primary { border-color: #4fc; color: #4fc; }
.btn-primary:hover { background: rgba(68, 255, 204, 0.1); }

/* footer — DBG wordmark is attribution, never the headline (IDENTITY-KIT) */
.menu-footer {
    position: relative; flex: none; width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 26px 16px;
    background: linear-gradient(180deg, rgba(44, 62, 80, 0) 0%, rgba(44, 62, 80, 0.30) 100%);
}
.menu-footer::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, rgba(255,106,0,0) 0%, rgba(255,106,0,0.35) 50%, rgba(255,106,0,0) 100%);
}
.dbg-mark { height: 26px; width: auto; flex: none; opacity: 0.85; }
.footer-attrib { font-size: 11px; line-height: 1.45; color: #6d7385; text-align: right; }

/* ── Loading Screen ── */
#loading-screen {
    flex-direction: column; align-items: center; justify-content: center; gap: 20px;
    background: radial-gradient(ellipse 130% 95% at 50% 40%, #1a1a2e 0%, #0a0a12 70%);
}
.loading-brand {
    font-size: 20px; font-weight: 200; color: #cfd6e4;
    letter-spacing: 0.24em; text-indent: 0.24em; text-transform: uppercase; margin-bottom: 4px;
}
.loading-brand em { font-style: normal; color: #4fc; }
#loading-map-name { font-size: 20px; color: #fff; letter-spacing: 0.06em; }
.progress-bar { width: 320px; height: 6px; background: #1a1a2e; border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; width: 0%; background: #4fc; transition: width 0.15s; }
#progress-text { font-size: 13px; color: #888; }

/* ── Scene Screen ── */
#scene-screen { background: #000; }
#scene-screen canvas { width: 100%; height: 100%; display: block; outline: none; }

#hud {
    position: absolute; top: 12px; left: 12px;
    color: #fff; font: 13px/1.5 'Consolas', monospace;
    background: rgba(0,0,0,0.6); padding: 8px 12px; border-radius: 6px;
    pointer-events: none; user-select: none;
}
#hud .label { color: #888; }
#hud .val { color: #4fc; }

/* Story 19-2 (AC2): "About" in the free top-right corner of the game view. Deliberately quiet,
   same key as the language switch in the menu; z-index keeps it above the HUD (10-45) and below
   every modal (200+), and the dark plate keeps it readable over bright terrain. */
#btn-about-hud {
    position: absolute; top: 12px; right: 12px; z-index: 50;
    background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 5px;
    padding: 5px 10px; cursor: pointer;
    color: #9aa1b4; font: 11px 'Segoe UI', sans-serif; letter-spacing: 2px; text-transform: uppercase;
    transition: color 0.2s, border-color 0.2s;
    pointer-events: auto; user-select: none;
}
#btn-about-hud:hover, #btn-about-hud:focus-visible { color: #4fc; border-color: #4fc; outline: none; }

#hud-reticle {
    position: fixed; left: 50%; top: 50%;
    width: 6px; height: 6px; margin: -3px 0 0 -3px;
    border-radius: 50%;
    background: rgba(0,0,0,.35);
    box-shadow: 0 0 0 1px rgba(255,255,255,.85);
    pointer-events: none; z-index: 40; display: none;
}

/* Story 7.9 (AC5): persistent corner region readout ("Concelho › Freguesia"), NOT a banner -
   positioned per meta.region.hud_corner (currently "bottom-left"); stacked above #help-hint
   (bottom-left, ~70-80px tall) so the two never overlap. Hidden by default; js/hud.js.
   setRegionLabel() toggles display. #region-attrib (the CC-BY credit under it, js/regions.js)
   is created dynamically with its own inline styles, mirroring #ortho-attrib - no rule needed here. */
#hud-region {
    position: fixed; left: 12px; bottom: 118px;
    color: #fff; font: 14px/1.4 'Consolas', monospace;
    text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 6px rgba(0,0,0,.6);
    background: rgba(0,0,0,0.45); padding: 6px 12px; border-radius: 5px;
    pointer-events: none; user-select: none; z-index: 45; display: none;
}

#help-hint {
    position: absolute; bottom: 12px; left: 12px;
    color: #aaa; font: 12px/1.6 'Consolas', monospace;
    background: rgba(0,0,0,0.5); padding: 6px 10px; border-radius: 4px;
    pointer-events: none; transition: opacity 0.3s;
}

#time-bar {
    position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
    font: 13px/1.5 'Consolas', monospace;
    background: rgba(0,0,0,0.7); padding: 6px 16px; border-radius: 6px;
    display: flex; gap: 10px; align-items: center;
    color: #e0e0e0; pointer-events: auto; user-select: none; z-index: 10;
}
#time-bar .tb-btn {
    background: none; border: 1px solid #3a3a5a; border-radius: 4px;
    color: #ccc; font-size: 14px; width: 28px; height: 28px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: border-color 0.2s, color 0.2s;
}
#time-bar .tb-btn:hover { border-color: #4fc; color: #4fc; }
#tb-time { color: #fff; min-width: 130px; }
#tb-mode { color: #4fc; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
#tb-speed { width: 100px; accent-color: #4fc; }
#tb-speed-label { color: #888; min-width: 44px; text-align: right; font-size: 12px; }
#tb-jump { background: #1a1a2e; border: 1px solid #3a3a5a; border-radius: 4px; color: #ccc; font: 11px 'Consolas', monospace; padding: 2px 6px; }
#tb-jump:focus { border-color: #4fc; outline: none; }

/* ── Story 19-7: the touch pad (two floating thumbsticks + a speed slider) ──
   NOT inside the phone media query on purpose. The overlay is gated by JS, not by width: it is
   cloned from <template id="touchpad-tpl"> only when the D62 detectMobile triad says "touch
   device" (js/scene.js), which includes tablets wider than the 900px phone threshold. Rules
   under that threshold would leave such a device with an UNSTYLED full-width block sitting in
   the #scene-screen flex flow. So: no new breakpoint, no second mobile threshold - the gate is
   simply not CSS.

   The bottom edge is already a hand-laid ladder (Story 19-5, from the bottom):
       #time-bar      8..60 px, full width, z-index 10, the only tappable thing down there
       #region-attrib 68..84 px  (pointer-events: none)
       #hud-region    92..120 px (pointer-events: none)
   Both zones therefore start at 128px - clear of all three - and #touchpad sits at z-index 8,
   BELOW #time-bar (10) and #btn-about-hud (50), so even a future overlap would lose the hit
   test to the UI rather than swallow it. */
#touchpad {
    position: fixed; inset: 0; z-index: 8;
    pointer-events: none;             /* only the zones and the slider opt back in */
}
.tp-zone {
    position: fixed; bottom: 128px; height: 42vh; width: 50vw;
    pointer-events: auto;
    touch-action: none;               /* no browser scroll/zoom stealing the drag */
    -webkit-user-select: none; user-select: none;
    -webkit-tap-highlight-color: transparent;
}
#tp-move { left: 0; }
#tp-look { right: 0; }

/* AC5 - invisible until a thumb lands. The stick is drawn WHERE the finger touched down
   (js/touchpad.js writes the transforms), so there is nothing to place here: only the look. */
.tp-base, .tp-knob {
    position: absolute; left: 0; top: 0;
    border-radius: 50%;
    opacity: 0; transition: opacity 0.12s ease-out;
    will-change: transform, opacity;
}
.tp-base {
    width: 112px; height: 112px; margin: -56px 0 0 -56px;
    border: 2px solid rgba(255, 255, 255, 0.55);
    background: rgba(0, 0, 0, 0.18);
}
.tp-knob {
    width: 48px; height: 48px; margin: -24px 0 0 -24px;
    border: 2px solid rgba(68, 255, 204, 0.9);
    background: rgba(68, 255, 204, 0.22);
}
.tp-zone.tp-on .tp-base { opacity: 0.5; }
.tp-zone.tp-on .tp-knob { opacity: 0.85; }

/* AC4 - the speed slider. Top-left, tucked under the single-line phone #hud (8..36px) and far
   from #btn-about-hud (top-right), the time bar and the region readout. Visible at all times,
   unlike the sticks: it is a setting, not a gesture. */
#tp-speed-plate {
    position: fixed; left: 8px; top: 42px;
    width: min(58vw, 210px);
    display: flex; align-items: center; gap: 8px;
    background: rgba(0, 0, 0, 0.6); border-radius: 6px; padding: 3px 9px;
    color: #e0e0e0; font: 12px/1.5 'Consolas', monospace;
    pointer-events: auto; user-select: none;
}
#tp-speed-plate .tp-speed-label { color: #888; flex: none; }
#tp-speed-plate .tp-speed-val { color: #4fc; flex: none; min-width: 30px; text-align: right; }
#tp-speed { flex: 1 1 auto; min-width: 0; height: 34px; margin: 0; accent-color: #4fc; }

/* AC5 - the one-time discovery hint. Non-interactive; js/touchpad.js removes it on the first
   touch or after ~6s and remembers that in localStorage, so it never comes back. */
#tp-hint {
    position: fixed; left: 12px; right: 12px; top: 38%;
    text-align: center;
    color: #e6e6e6; font: 13px/1.65 'Segoe UI', sans-serif;
    background: rgba(0, 0, 0, 0.58); border-radius: 8px; padding: 10px 12px;
    pointer-events: none; user-select: none;
    opacity: 0; transition: opacity 0.4s;
}
#tp-hint.tp-on { opacity: 1; }

/* ── Overlay (in-game menu) ── */
#overlay-screen { align-items: center; justify-content: center; z-index: 100; }
.overlay-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); }
.overlay-card {
    position: relative; z-index: 1;
    background: #12122a; border: 1px solid #2a2a4a; border-radius: 12px;
    padding: 40px 50px; display: flex; flex-direction: column; align-items: center; gap: 14px;
    min-width: 260px;
}
.overlay-card h2 { font-size: 22px; font-weight: 300; color: #fff; margin-bottom: 10px; letter-spacing: 2px; }
.overlay-card .btn { width: 100%; text-align: center; }

/* ── Settings Modal ── */
#settings-modal {
    position: absolute; inset: 0; display: none; align-items: center; justify-content: center; z-index: 200;
}
#settings-modal.active { display: flex; }
#settings-modal .overlay-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0); }
.settings-card {
    position: relative; z-index: 1;
    background: #12122a; border: 1px solid #2a2a4a; border-radius: 12px;
    padding: 30px 40px; max-width: 420px; width: 90%;
}
.settings-card h2 { font-size: 20px; font-weight: 300; color: #fff; margin-bottom: 20px; }
.settings-card h3 { font-size: 13px; color: #4fc; text-transform: uppercase; letter-spacing: 1px; margin: 16px 0 8px; }
.settings-card h3:first-of-type { margin-top: 0; }

/* ── Settings tabs (Epic 4) ── */
.settings-tabs { display: flex; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid #2a2a4a; }
.settings-tab {
    background: none; border: none; color: #888; cursor: pointer;
    font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
    padding: 6px 12px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.settings-tab:hover { color: #ccc; }
.settings-tab.active { color: #4fc; border-bottom-color: #4fc; }
.tab-panel { display: none; max-height: 52vh; overflow-y: auto; }
.tab-panel.active { display: block; }

.setting-row { display: flex; align-items: center; justify-content: space-between; margin: 6px 0; font-size: 13px; }
.setting-row label { color: #ccc; flex: 1; }
.setting-row input[type=range] { width: 120px; accent-color: #4fc; }
.setting-row input[type=checkbox] { accent-color: #4fc; width: 16px; height: 16px; }
.setting-row .val { color: #4fc; min-width: 40px; text-align: right; font-family: 'Consolas', monospace; font-size: 12px; }

.settings-footer { margin-top: 20px; display: flex; gap: 10px; justify-content: flex-end; }

/* ── Help Modal (Story 19-0) ── */
#help-modal { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; z-index: 210; }
#help-modal.active { display: flex; }
.help-card {
    position: relative; z-index: 1;
    background: #12122a; border: 1px solid #2a2a4a; border-radius: 12px;
    padding: 28px 32px; max-width: 470px; width: 90%; max-height: 86vh; overflow-y: auto;
}
.help-card h2 { font-size: 19px; font-weight: 300; color: #fff; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; }
.help-lead { font-size: 12.5px; color: #8b93a7; line-height: 1.5; margin-bottom: 18px; }
.help-keys { display: grid; grid-template-columns: max-content 1fr; gap: 9px 18px; align-items: baseline; }
.help-keys dt { color: #4fc; font: 12.5px 'Consolas', monospace; white-space: nowrap; }
.help-keys dd { margin: 0; color: #ccc; font-size: 13px; line-height: 1.4; }

/* ── About Modal (Story 19-2) ── */
/* A frame around a whole other document: the card supplies only the header bar and the close
   button, everything below it is the title page itself in an iframe (its own CSS, its own
   language switch). Nothing here may style the page - that is the point of the iframe. */
#about-modal { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; z-index: 220; }
#about-modal.active { display: flex; }
#about-modal .overlay-backdrop { background: rgba(0, 0, 0, 0.55); }
.about-card {
    position: relative; z-index: 1;
    background: #12122a; border: 1px solid #2a2a4a; border-radius: 12px;
    width: 92%; max-width: 980px; height: 90vh;
    display: flex; flex-direction: column; overflow: hidden;
}
/* Header stays put; only the framed page scrolls, so the close button is always reachable (AC8). */
.about-head {
    flex: none; display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 11px 12px 11px 20px; border-bottom: 1px solid #23233d;
}
.about-head h2 { font-size: 14px; font-weight: 300; color: #fff; letter-spacing: 0.16em; text-transform: uppercase; }
.about-head .btn { padding: 6px 16px; font-size: 12px; }
#about-frame { flex: 1 1 auto; width: 100%; min-height: 0; border: 0; display: block; background: #f6f7f8; }

/* ── Responsive (Story 19-0 AC8) ── */
@media (max-height: 860px) {
    #main-menu-screen { padding-top: 44px; }
    .menu-inner { gap: 26px; padding: 14px 0 22px; }
    .map-grid { max-width: 620px; }
    .menu-title { font-size: clamp(30px, 4.2vw, 42px); }
    .menu-subtitle { margin-top: 12px; }
    .menu-subtitle::before { margin-bottom: 12px; }
}
@media (max-width: 700px) {
    #main-menu-screen { padding: 48px 14px 0; }
    .lang-switch { top: 12px; right: 12px; }
    .menu-inner { gap: 22px; padding: 10px 0 20px; }
    .menu-title { font-size: 30px; letter-spacing: 0.14em; text-indent: 0.14em; }
    .menu-subtitle { font-size: 12px; margin-top: 12px; }
    .map-grid { grid-template-columns: 1fr; max-width: 100%; }
    .map-card .body { padding: 14px 16px 16px; }
    .menu-buttons .btn { padding: 10px 20px; }
    .menu-footer { flex-direction: column; align-items: center; gap: 10px; padding: 12px 14px 14px; }
    .footer-attrib { text-align: center; }
    .help-card { padding: 22px 20px; }
    .help-keys { grid-template-columns: 1fr; gap: 2px 0; }
    .help-keys dd { margin-bottom: 8px; }
    /* Story 19-2 AC8: at 390 px the card takes almost the whole screen and the header shrinks,
       but the close button never scrolls away with the framed page. */
    .about-card { width: 96%; height: 94vh; }
    .about-head { padding: 8px 8px 8px 12px; }
    .about-head h2 { font-size: 12px; letter-spacing: 0.1em; }
    .about-head .btn { padding: 5px 12px; font-size: 11px; }
    #btn-about-hud { top: 10px; right: 10px; padding: 4px 8px; font-size: 10px; letter-spacing: 1.5px; }
}

/* ── Story 19-5: the game view on a phone ──
   Adam: "objaśnienia sterowania na komputerze powinny być wyłączone, nic nie wnoszą i śmiecą (...)
   w miejsce objaśnień sterowania dałbym informację celownika, czyli na co patrzę."
   So on a touch / narrow viewport: the keyboard legend goes away, the telemetry plate keeps only
   FPS, and the region readout that Story 7.9 already builds and feeds (#hud-region + the CC-BY
   #region-attrib under it, js/regions.js) MOVES DOWN into the corner the legend just vacated.
   Nothing is added here - this is placement only.

   Condition: a coarse pointer on any phone-sized viewport (portrait AND landscape), OR a plainly
   narrow window. 1600x900 with a mouse matches neither, so the desktop layout is untouched.

   The bottom-left corner is a hand-laid ladder of offsets, because the three elements share no
   parent and the story forbids new DOM. Bottom-anchored, so a label that wraps to a second line
   grows UPWARDS, away from the bar - the stack cannot collapse into #time-bar:
       #time-bar     bottom  8px, ~52px tall  ->  8..60
       #region-attrib bottom 68px, ~16px tall -> 68..84
       #hud-region   bottom 92px, ~28px tall  -> 92..120                                       */
@media (pointer: coarse) and (max-width: 900px), (max-width: 700px) {
    /* AC1 - a keyboard legend is pure noise on a device with no keyboard. */
    #help-hint { display: none; }

    /* AC3 - FPS only. Every row after the first (Pos / Elev / Mesh and the whole #hud-weather
       block) is one selector away; #hud is auto-sized, so the plate shrinks to the single line
       by itself - no empty frame left behind. */
    #hud { top: 8px; left: 8px; padding: 5px 9px; font-size: 12px; }
    #hud > div + div { display: none; }

    /* AC2 - the reticle readout takes over the freed bottom-left corner. */
    #hud-region {
        left: 8px; bottom: 92px;
        max-width: calc(100vw - 16px);
        font-size: 13px; padding: 5px 10px;
    }
    /* js/regions.js builds #region-attrib with inline position/left/bottom (mirroring
       #ortho-attrib), and inline beats a stylesheet - !important is the only lever that reaches
       it without editing the JS, which is out of this story's scope. */
    #region-attrib {
        left: 8px !important; bottom: 68px !important;
        max-width: calc(100vw - 16px);
    }

    /* AC4 - the bar measured 580px inside a 485px viewport, i.e. it hung off BOTH edges. Drop the
       date picker and the speed caption (both desktop conveniences), span the width instead of
       centring a fixed block, and grow the touch targets to 40px. Transport + time slider stay. */
    #time-bar {
        left: 8px; right: 8px; bottom: 8px; transform: none;
        justify-content: center; gap: 8px; padding: 6px 10px; font-size: 12px;
    }
    #tb-jump, #tb-speed-label { display: none; }
    #time-bar .tb-btn { width: 40px; height: 40px; font-size: 16px; }
    #tb-time { min-width: 0; }
    #tb-speed { flex: 1 1 90px; width: auto; min-width: 70px; height: 40px; }

    /* ── Story 19-6: the settings panel on a phone (same threshold on purpose) ──
       Measured at 390x844 before this block: the tab strip was wider than the card, so the
       fourth tab ("Swiatlo") sat off-screen with no way to reach it; sliders were squeezed into
       a 120px column next to a wrapping label; checkboxes sat on the far edge, away from the
       text they belong to; and three settings that need a mouse or a keyboard were offered on a
       device that has neither. Target pattern: _mob_propozycje.png, column C.

       Everything below leans on :has(), which is what lets a stylesheet reach a whole ROW from
       the control inside it - no markup change, no JS, data-setting/data-tab/data-panel/data-i18n
       untouched. A browser without :has() could not run this WebGL engine in the first place. */

    /* The card becomes a sheet: header + tabs + footer pinned, only the panel scrolls, so the
       close button can never scroll away and no edge leaves the viewport. */
    .settings-card {
        width: calc(100% - 16px); max-width: 460px;
        padding: 16px 14px 14px;
        display: flex; flex-direction: column;
        max-height: calc(100vh - 16px);
        max-height: calc(100dvh - 16px);
    }
    .settings-card h2 { font-size: 17px; margin-bottom: 12px; flex: none; }
    .settings-card h3 { margin: 14px 0 6px; }
    .tab-panel { max-height: none; }
    .tab-panel.active { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
    .settings-footer { flex: none; margin-top: 12px; gap: 8px; }
    .settings-footer .btn { flex: 1 1 auto; padding: 12px 10px; }

    /* AC2 - four tabs wrap into a 2x2 block of pills. Chosen over a scrolling strip because a
       wrapped row needs no gesture and no discovery hint: all four tabs are simply on screen. */
    .settings-tabs { flex-wrap: wrap; gap: 6px; margin: 0 0 12px; border-bottom: none; flex: none; }
    .settings-tab {
        flex: 1 1 auto; min-width: 40%;
        padding: 11px 6px; margin-bottom: 0;
        font-size: 11.5px; letter-spacing: 0.5px;
        border: 1px solid #2a2a4a; border-radius: 8px;
    }
    .settings-tab.active { color: #4fc; border-color: #4fc; background: rgba(68, 255, 204, 0.10); }

    .setting-row {
        margin: 0; padding: 6px 2px; font-size: 14px;
        border-bottom: 1px solid #1c1c33;
        position: relative;                     /* anchor for the full-row checkbox hit area */
    }
    .setting-row:last-child { border-bottom: none; }

    /* AC3 - label and value share the first line, the slider gets the whole width underneath.
       DOM order is label / range / value, so `order` (not markup) puts the value back up top. */
    .setting-row:has(> input[type="range"]) { flex-wrap: wrap; row-gap: 2px; padding-bottom: 8px; }
    .setting-row:has(> input[type="range"]) label { flex: 1 1 auto; min-width: 0; }
    .setting-row .val { order: 1; flex: none; font-size: 13px; }
    .setting-row input[type="range"] {
        order: 2; flex: 0 0 100%; width: 100%; height: 40px; margin: 0;
    }

    /* AC4 - the whole row is the switch. The real checkbox is stretched over the row (invisible,
       still a real focusable input) and paints the toggle in its own background at the left edge,
       right against the label text - never parked on the opposite edge. */
    .setting-row:has(> input[type="checkbox"]) { min-height: 44px; padding: 4px 6px 4px 58px; }
    .setting-row:has(> input[type="checkbox"]) label { flex: 1 1 auto; }
    .setting-row input[type="checkbox"] {
        position: absolute; inset: 0; z-index: 1;
        width: 100%; height: 100%; margin: 0;
        -webkit-appearance: none; appearance: none;
        background-color: transparent; border: 0; border-radius: 8px; cursor: pointer;
        background-repeat: no-repeat; background-position: 6px center;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='26'%3E%3Crect x='.5' y='.5' width='45' height='25' rx='12.5' fill='%231a1a2e' stroke='%233a3a5a'/%3E%3Ccircle cx='13' cy='13' r='7.5' fill='%236d7385'/%3E%3C/svg%3E");
    }
    .setting-row input[type="checkbox"]:checked {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='26'%3E%3Crect x='.5' y='.5' width='45' height='25' rx='12.5' fill='%23113a35' stroke='%2344ffcc'/%3E%3Ccircle cx='33' cy='13' r='7.5' fill='%2344ffcc'/%3E%3C/svg%3E");
    }
    .setting-row input[type="checkbox"]:focus-visible { outline: 2px solid #4fc; outline-offset: -2px; }

    /* AC5 (as amended mid-story) - only the keyboard setting goes. A phone has no keyboard and
       never will; but Movement Speed and Mouse Sensitivity are about to drive the two thumbsticks
       of the touch pad (Story 19-7), so they stay on screen. Their labels still read
       mouse-first - wording is a separate decision, deliberately not touched here.
       Matched by data-setting, so re-ordering the rows cannot break it. */
    .setting-row:has(> [data-setting="keyboardLookSpeed"]) { display: none; }
}