:root{--bp-phone:600px;--bp-tablet:1024px;--ui-scale:1;}
    /* ══════════════════════════════════════════════════════════
       PERISCOPE PATROL
       ────────────────────────────────────────────────────────────────
       VERSION NUMBERING lives in ONE place: the VERSION constant at the
       top of sw.js. Bump it there and nothing else — it names the cache
       (so old ones are retired), it drives the update prompt, and it is
       what the chip in the top bar shows the player.
       v11 — the visuals round:
         · impact model: hit position along the hull + track angle decide the
           outcome — glancing shots (<22°) can bounce off, square hits crush
           the Mk14 contact exploder (higher dud chance), oblique fires best
         · sinking follows the wound: bow hit → down by the head, stern hit →
           down by the stern, amidships → back broken (broken ends flood and
           go under FIRST, bow and stern rear up) or settling on even keel
         · land view rebuilt: world-azimuth terrain profiles (edge-sampled,
           cached) — rock-steady while training the scope, layered ridges,
           seeded relief, surf line, islands now occlude ships behind them
         · sea: sky-reflection band, hull mirrored on calm water
         · sky: volumetric cumulus with shaded bases, cirrus, storm lightning
         · ships: Kelvin bow wave, waterline foam, propeller churn,
           transverse wake crests; burning wound + oil smoke while sinking;
           oil slick, flotsam and burning fuel after she goes under
         · explosions rebuilt: flash, fireball, collapsing water column with
           falling spray, expanding foam ring, thrown debris, smoke pall

       v11.1 — the engineering round:
         · a flat battery or foul air now breaks off a transit ONCE, on the
           crossing, instead of walling the clock off for good
         · new warning when the water is coming in faster than the planes can
           lift her — with the answer: blow main ballast, pumps, way on her
         · the main induction now announces itself when it shuts, and says
           why the diesels cannot follow her down: no snorkel in this boat
         · charging rewritten: the screws have first call on the diesels, so
           she charges fastest loafing and not at all at flank — three to four
           hours from flat, the arithmetic every Pacific skipper hated

       v11.2 — the water round:
         · the sea is now a true wave field in world metres — two swell
           systems and a wind chop, facet-lit by their slope, Fresnel-mixed
           with the sky (mirror at the horizon, glass-dark up close). Train
           the scope and the sea holds still; only the waves march
         · breaking crests ride the forward faces of real waves; spindrift
           streaks lie down the wind in half a gale; the sun's glitter path
           narrows on a calm sea and shatters wide on a rough one
         · the chart got its bathymetry: a synthesised shelf falling away
           from every coast, washed in the palest chart tints, with spot
           soundings in fathoms when zoomed close — and the two lines a
           submariner actually read: the 10-fathom danger line and the
           100-fathom curve, outside which the deep ocean will hide you
         · built with a scanline land mask and chamfer distance transform:
           the whole seafloor costs ~60 ms once per patrol

       v11.3 — the coaching round:
         · the tutorial card folds. On a phone held upright it opens long
           enough to be read, then collapses to a one-line peek strip —
           title, tick, progress — leaving the controls it is talking about
           free to press. Tap the strip to open it again; that choice sticks
           for the rest of the step
         · it dodges: if the card covers the very control being highlighted,
           it moves to the other end of the screen. If neither end is clear,
           it folds, which always is
         · it never strands you: on a read-only step, where the only way on
           is the NEXT button inside the card, it will not fold itself away

       v11.4 — PERISCOPE PATROL (renamed), installable, and the gun rebuilt:
         · the 20 mm no longer rolls one die after the bombs have fallen. It
           fires continuously while an aircraft is inside about a mile, and
           what it mostly buys is a rattled pilot: he comes in higher and
           releases early, and the bombs go in the sea. Measured over full
           three-run engagements in daylight and a calm sea: mean bomb damage
           drops from ~16% to ~3%, roughly a fifth are driven off, and about
           one in twelve is splashed. At night or in a rough sea it achieves
           almost nothing — an iron ring sight on a pitching deck
         · the price is real: she cannot dive, a crash dive is held 14 s while
           the crew tumble below, close bursts wound them, ready-use ammunition
           runs out, and an aircraft out of bombs will come back with guns for
           an exposed deck. Doctrine said DIVE, and the model now agrees
         · installable as a PWA: manifest, icons, offline app shell
         · version numbering has exactly one home — the VERSION constant at
           the top of sw.js. The game reads it back from the running worker
           (falling back to reading the file) and shows it as a chip in the
           top bar; tap it to copy the build string. A new build raises a
           reload prompt rather than swapping under a patrol in progress

       ── the usability round ──────────────────────────────────────────
         · torpedoes: the hit test was a 240 m circle round the ship's
           CENTRE, so a fish crossing her beam "hit" while still 200 m clear
           and the column of water went up in open sea. It is now the actual
           hull box (7.2:1 merchant, 11:1 escort) and the explosion is placed
           on the plating. A miss is a miss — no splash — but it is reported:
           range in yards, which side, and whether she crossed ahead of the
           stem or astern of the rudder, with the correction to make
         · notify(): anything the boat refuses or confirms now reaches the
           player as a toast wherever he is looking, not just the log on
           another tab. This is what made "Man AA Gun" look broken — the
           refusal ("the platform is under water") was invisible from Helm
         · a lost boat says so when you work her controls, once every few
           seconds, instead of swallowing the order in silence
         · waypoints: a pinch never accumulated into `moved`, so releasing
           two fingers looked exactly like a tap. Now a second finger is
           remembered, the tap window is tighter (7 px / 300 ms), and there
           is a 260 ms settle after any gesture. Dropping one confirms
         · press feedback on every touch button and tab: scale, brightness
           and a buzz on pointerdown, before the command is even dispatched
         · depth and speed: the DEPTH and SPEED read-outs in the permanent
           strip ARE the control now. Tap the number, an order pad opens over
           the picture with presets, ±10/±50 ft and ±25/±50 rpm steppers,
           crash dive and emergency blow. Steppers added to the Helm pane
           too; the sliders remain, demoted to fine adjustment
         · map zoom 0.9–900 px/nm (was 5–120), with waypoint snapping that
           tightens as you zoom in
         · the oil slick is three separately animated systems instead of one
           grey ellipse: overlapping lobes that breathe and drift, drawn in
           multiply so they SUPPRESS the water rather than sit on it; an
           iridescent sheen rim; and burning patches with their own ignition,
           guttering and death, each shedding its own smoke column that
           leaves black and narrow and greys as it spreads
         · autosave on visibilitychange / pagehide / blur / freeze plus a
           45 s heartbeat, into its own key so it can never overwrite a
           manual slot. A resume bar offers the patrol back on next launch
         · intel board: everything the boat holds, nearest first, each with a
           course to steer and the age of the fix — the ULTRA estimate dead
           reckoned forward and marked closing or opening, sunk contacts
           dropped, and the newest signal badged LATEST

       ── the helm becomes instruments ─────────────────────────────────
         Three sliders nobody dragged are gone. In their place: a gyro
         repeater, a depth gauge and an engine telegraph, sharing one
         grammar — heavy pale needle for where she IS, thin amber for where
         she has been ORDERED, and the gap between them is the state of the
         boat. Tap the rim to send an order there; drag the face to nudge.
         Tap a dial's name to give it the full width.
         · DEPTH rescales between a fine and a deep range with hysteresis,
           and the sea floor is a hatched sector she cannot be ordered into
         · COURSE is a full circle, geared down to a third on the face so a
           five-pixel wobble is worth half a degree. The shortest way round
           is drawn as the turn arc; pips mark the TDC target and the next
           waypoint; the light sector is the ±90° torpedo gyro envelope
         · POWER is linear in revolutions, but the knots are marked at their
           true positions and bunch towards flank — the last hundred
           revolutions buy almost no speed and a great deal of noise, and
           the noise is an amber-to-red sector on the rim. Dive and the
           whole dial changes meaning: 18 kn becomes 8.5, and the quiet band
           widens from 125 rpm to 230
         · 60 Hz canvas, gated on visibility so it costs nothing off-screen
         · the bank fits the room it is given: it measures the sheet's width
           AND height and tries one, two and three columns, keeping whichever
           arrangement yields the largest dial that still fits — 171 px on a
           phone in portrait, 187 landscape, 245 on a tablet, 318 focused.
           The button rows are deliberately NOT subtracted; the instruments
           get the first screenful and the buttons scroll below, because
           subtracting them crushed the dials to 126 px, small enough that
           the scale numbers had to go — and a dial with no numbers is a
           picture of a dial. Three legibility tiers replace one hard cliff
         · the value you are setting has left the canvas. It used to be drawn
           a fifth of a radius above the touch point, which on a 170 px gauge
           is directly under the fingertip. It is now a chip pinned to the top
           or the bottom of the screen depending on which half your hand is
           in — the finger cannot be in both
         · THE NEEDLE WOULD NOT MOVE. The relative drag wrote the SNAPPED
           value back into its own accumulator, so once the needle caught a
           detent every following frame started again from that detent — and
           one frame of a normal swipe moves about 2 ft against a 3.3 ft
           detent window, so it could never climb out. The thumb kept
           sliding, the phone kept buzzing, and nothing happened. The
           accumulator now stays raw and snapping happens only on the way
           out to the boat; detents also hold 45% wider once you are in one,
           so the needle cannot chatter on the boundary
         · the depth dial's fine/deep rescale was declared and never
           computed, so it was stuck on the 200 ft scale and anything ordered
           deeper pinned the needle at the stop. It now rescales with
           hysteresis, as designed

       ── fuel, transit, and shots that cannot reach ───────────────────
         · FUEL burned linearly with revolutions and emptied the bunkers in
           twelve and a half hours of cruising — you could not cross a patrol
           area without limping home. A Gato carried 94,000 gallons and had a
           designed radius of 11,000 miles at 10 knots. Power goes as the
           cube of speed, so that is the law now, scaled to keep the decision
           without the leash: 169 h and ~2,300 nm at cruise, 33 h and ~550 nm
           at flank. Fast transit is expensive, not forbidden. Warnings at
           25% and 12%
         · TRANSIT is no longer capped at eight hours. "Until something
           happens" runs with no clock at all and stops on the first event —
           and the edge of the patrol area and the fuel falling under 20% are
           now events in their own right
         · TORPEDO RANGE is checked before the fish leaves the tube, against
           the run to the INTERCEPT rather than the present range, because a
           target drawing away is further than she looks: at 3 nm a 10-knot
           target opening from you makes it a 3.8 nm run. A shot that cannot
           reach is refused primarily in nautical miles (yards only as a
           secondary detail); a shot inside 85% of the run fires with a warning

       ── the needle really moves now ──────────────────────────────────
         · shortDelta(from,to) returns to − from, and the drag handler had
           the arguments the other way round. The finger's travel was
           negated, so on the depth dial (0 ft at twelve o'clock, deeper
           clockwise) dragging the natural way pushed the value DOWN into the
           clamp at zero and nothing happened — it only answered when the
           thumb went round backwards. The same slip had inverted three other
           things: the "port/starboard N° to go" line, the relative bearing
           to the target, and the direction the turn arc is drawn
         · the drag step now lives in relStep(), which the tests drive — the
           reason this survived two rounds is that every test called order()
           directly and never went through the gesture

       ── knowing where you are in the patrol ──────────────────────────
         · when the last merchant is accounted for, the objective completing
           is announced on screen with the rendezvous named, its range and
           the course to steer, and a standing line in the warnings panel
         · GOING ALONGSIDE is now a deliberate act rather than something you
           could do by accident while passing: the 1.5 nm line is only the
           approach station. The transfer starts inside 0.3 nm, surfaced and
           below 3 knots, and must be held for three minutes of ship's time.
           Dive, speed up or drift off and it stops and says so. A tender
           transfers fuel and torpedoes with hoses and a crane; it is not a
           checkpoint you drive through
         · "until something happens" is in all three time menus, not only on
           the panel button
         · the native <select> is gone from the touch shell. Android drew its
           own full-screen system picker for it, which is white, enormous and
           nothing to do with a 1943 control room. The select stays in the DOM
           as the source of truth — every existing change handler goes on
           working — behind a button of our own, with a compact popover in the
           app's colours, a tick on the current choice and a rule between the
           time scales and the skip actions

       ── finding them, and not running aground looking ────────────────
         · THE INTERCEPT TRIANGLE. The intel board used to give the bearing
           TO the convoy, which is a pursuit curve: you end up in her wake
           doing her speed and never arrive. It now solves the collision
           course — the heading that holds her on a constant bearing while
           the range closes — and reports the time to meet. When there is no
           solution at the speed she is making it says SURFACE AND RUN with
           the flank answer; when there is none at all it says CANNOT BE
           CAUGHT, which is worth as much as the course
         · convoys used to sail a straight line out of the charted box and be
           gone for good. They now put the helm over eight miles from the
           boundary and work the lane back, the way real traffic shuttles
         · hold nothing for twenty-five minutes and Fleet sends an AMPLIFYING
           REPORT: the same convoy, freshly fixed — a third of the error and
           hours less stale. You still have to run the intercept
         · ULTRA fixes and contacts are clamped inside the patrol area; a plot
           out in the blank was the clearest possible way of telling a player
           to go somewhere that does not exist
         · THE PATROL AREA is drawn: a dashed boundary with the six-mile
           margin shaded, and a legend entry. The edge interrupt was a
           CONDITION and re-fired the instant you set a course away from it,
           which made the boundary impossible to leave under time compression.
           It is now latched and directional: only standing OUT counts, and a
           run started on an outbound course is allowed
         · TOASTS ARE HELD during a transit and released as at most two lines
           plus a count, with the reason she stopped last and longest —
           "TRANSIT STOPPED — …" — and standing in the warnings panel for a
           further ninety seconds
         · SHOAL WATCH. Running the clock forward is the player saying
           "nothing is happening", not "drive her aground". Whenever time is
           compressed at all — a transit or any scale above 1× — less than
           45 ft under the keel takes the way off her, drops the clock to real
           time, pulls the ordered depth back and says why. At real time the
           captain is left to con her himself

       ── the bottom exists ────────────────────────────────────────────
         The bathymetry grid was a colour on the chart and nothing else —
         she would dive to 300 ft in 90 ft of water and never notice. The
         grid is now shared with the simulation (Bathy), and the hundred
         fathom line finally means something:
         · depth orders are trimmed to the water actually under her, with
           25 ft of keel clearance, and the fathometer says why
         · touching the bottom hurts in proportion to speed and hardness —
           easing on at half a knot settles her, nine knots onto coral
           opens her up — and every escort in the sea hears it
         · UNDER KEEL is a permanent read-out beside the depth, with the
           bottom type; the order pad gives the safe depth for where she is
         · and she can be LAID ON THE BOTTOM: all stop, everything shut
           down, acoustic signature under 0.02 — the oldest trick in
           shallow water. Sand and mud only, 210 ft or less, and not at
           speed. Mud takes hold of her the longer she sits, and blowing
           free once it has is a noise that carries
       Touch-first responsive shell. Two layouts:
         html[data-lay="touch"] → tablet / phone / any coarse pointer
         html[data-lay="desk"]  → wide landscape + fine pointer
    ══════════════════════════════════════════════════════════ */
    :root{
      --bg:#04090b; --panel:#0a191e; --panel2:#0f272e; --panel3:#16323a;
      --ink:#dff7ea; --muted:#82a89a; --dim:#4f7168; --line:#26564f; --line2:#3a7d70;
      --alert:#f5c65c; --danger:#ef6a58; --ok:#6fe08f; --info:#54b6ff;
      --deep:#4a9eff; --shallow:#f0c35a; --port:#ff8844;
      --mob-tab-h:60px;
      --sat:env(safe-area-inset-top,0px);
      --sab:env(safe-area-inset-bottom,0px);
      --sal:env(safe-area-inset-left,0px);
      --sar:env(safe-area-inset-right,0px);
      --r:8px;
      --mono:ui-monospace,'SFMono-Regular',Consolas,'Roboto Mono',Monaco,'Courier New',monospace;
      --gauge-bezel:#2f5f56; --gauge-face-in:#0d2029; --gauge-face-out:#050f13; --gauge-needle:#f5c65c;
      --gauge-font:var(--mono);
    }
    /* US Navy — Fleet Submarine (Gato class) */
    html[data-station-theme="us-fleet"]{
      --bg:#04090b;--panel:#0a191e;--panel2:#0f272e;--panel3:#16323a;
      --ink:#dff7ea;--muted:#82a89a;--dim:#4f7168;--line:#26564f;--line2:#3a7d70;
      --alert:#f5c65c;--danger:#ef6a58;--ok:#6fe08f;--info:#54b6ff;
      --gauge-bezel:#2f5f56;--gauge-face-in:#0d2029;--gauge-face-out:#050f13;--gauge-needle:#f5c65c;
      --gauge-font:var(--mono);
    }
    html[data-station-theme="us-fleet"] body{
      background:radial-gradient(ellipse at 50% 25%,#0d2429 0%,var(--bg) 70%);
    }
    html[data-station-theme="us-fleet"] .panel{
      background:linear-gradient(180deg,rgba(18,46,53,.96),rgba(7,20,24,.96));
      box-shadow:inset 0 1px 0 rgba(120,220,180,.06),0 2px 10px rgba(0,0,0,.45);
    }
    html[data-station-theme="us-fleet"] button{
      background:linear-gradient(180deg,#14343c,#0d242a);border-color:var(--line);
    }
    html[data-station-theme="us-fleet"] .hg-t{background:rgba(4,12,15,.8);border-color:var(--line2);color:var(--muted);}
    html[data-station-theme="us-fleet"] #hgChip{background:rgba(6,18,22,.97);border-color:var(--alert);}

    /* Kriegsmarine — Type VII (U-Boot-Waffe) */
    html[data-station-theme="km-bakelite"]{
      --bg:#050604;--panel:#11110d;--panel2:#1a1912;--panel3:#252319;
      --ink:#eee5ca;--muted:#aaa185;--dim:#756e5b;--line:#5d5543;--line2:#86795a;
      --alert:#d6a84a;--danger:#e05347;--ok:#9eae75;--info:#8aa8b2;
      --gauge-bezel:#5d5543;--gauge-face-in:#171712;--gauge-face-out:#070806;--gauge-needle:#d6a84a;
      --gauge-font:var(--mono);
    }
    html[data-station-theme="km-bakelite"] body{
      background:radial-gradient(ellipse at 50% 25%,#242118 0%,var(--bg) 72%);
    }
    html[data-station-theme="km-bakelite"] .panel{
      background:linear-gradient(180deg,rgba(34,32,23,.97),rgba(10,11,8,.97));
      box-shadow:inset 0 1px 0 rgba(225,205,145,.06),0 2px 10px rgba(0,0,0,.55);
    }
    html[data-station-theme="km-bakelite"] button{
      background:linear-gradient(180deg,#302d20,#171710);border-color:var(--line);
    }
    html[data-station-theme="km-bakelite"] .hg-t{background:rgba(15,14,10,.88);border-color:var(--line2);color:var(--muted);}
    html[data-station-theme="km-bakelite"] #hgChip{background:rgba(17,17,13,.98);border-color:var(--alert);}

    /* Royal Navy — Admiralty Submarine Service (T/U class) */
    html[data-station-theme="rn-admiralty"]{
      --bg:#04070a;--panel:#0b131b;--panel2:#101c26;--panel3:#172736;
      --ink:#e4e9ee;--muted:#8f9fad;--dim:#586877;--line:#3b4d5e;--line2:#576f87;
      --alert:#e5b158;--danger:#de564b;--ok:#68b894;--info:#52a5d4;
      --gauge-bezel:#6b583e;--gauge-face-in:#121922;--gauge-face-out:#080d14;--gauge-needle:#e5b158;
      --gauge-font:var(--mono);
    }
    html[data-station-theme="rn-admiralty"] body{
      background:radial-gradient(ellipse at 50% 25%,#152535 0%,var(--bg) 72%);
    }
    html[data-station-theme="rn-admiralty"] .panel{
      background:linear-gradient(180deg,rgba(18,31,43,.97),rgba(9,15,22,.97));
      box-shadow:inset 0 1px 0 rgba(160,200,230,.06),0 2px 10px rgba(0,0,0,.55);
    }
    html[data-station-theme="rn-admiralty"] button{
      background:linear-gradient(180deg,#1c2d3d,#0f1a24);border-color:var(--line);
    }
    html[data-station-theme="rn-admiralty"] .hg-t{background:rgba(11,19,27,.88);border-color:var(--line2);color:var(--muted);}
    html[data-station-theme="rn-admiralty"] #hgChip{background:rgba(11,19,27,.98);border-color:var(--alert);}

    /* Imperial Japanese Navy — Sensuikan (I-15 class) */
    html[data-station-theme="ijn-fleet"]{
      --bg:#060404;--panel:#130e0e;--panel2:#1d1515;--panel3:#271c1c;
      --ink:#f3ede0;--muted:#aa9d88;--dim:#706452;--line:#544139;--line2:#7d5e50;
      --alert:#d63a2a;--danger:#e0342b;--ok:#8fae6a;--info:#6b9bb8;
      --gauge-bezel:#54483b;--gauge-face-in:#161412;--gauge-face-out:#080706;--gauge-needle:#d63a2a;
      --gauge-font:var(--mono);
    }
    html[data-station-theme="ijn-fleet"] body{
      background:radial-gradient(ellipse at 50% 25%,#261816 0%,var(--bg) 72%);
    }
    html[data-station-theme="ijn-fleet"] .panel{
      background:linear-gradient(180deg,rgba(32,23,22,.97),rgba(13,9,9,.97));
      box-shadow:inset 0 1px 0 rgba(240,200,160,.06),0 2px 10px rgba(0,0,0,.55);
    }
    html[data-station-theme="ijn-fleet"] button{
      background:linear-gradient(180deg,#2e1e1d,#160e0d);border-color:var(--line);
    }
    html[data-station-theme="ijn-fleet"] .hg-t{background:rgba(19,14,14,.88);border-color:var(--line2);color:var(--muted);}
    html[data-station-theme="ijn-fleet"] #hgChip{background:rgba(19,14,14,.98);border-color:var(--alert);}

    /* Regia Marina — Sommergibili (Marcello class) */
    html[data-station-theme="rm-brass"]{
      --bg:#070503;--panel:#15100a;--panel2:#1f1810;--panel3:#2a2016;
      --ink:#f6eedb;--muted:#b8a685;--dim:#7a6b52;--line:#695233;--line2:#8f7044;
      --alert:#e8a838;--danger:#de563b;--ok:#83a76a;--info:#5ea8b5;
      --gauge-bezel:#8c6d3b;--gauge-face-in:#1c1813;--gauge-face-out:#0a0907;--gauge-needle:#e8a838;
      --gauge-font:var(--mono);
    }
    html[data-station-theme="rm-brass"] body{
      background:radial-gradient(ellipse at 50% 25%,#2b2014 0%,var(--bg) 72%);
    }
    html[data-station-theme="rm-brass"] .panel{
      background:linear-gradient(180deg,rgba(34,26,18,.97),rgba(14,10,7,.97));
      box-shadow:inset 0 1px 0 rgba(240,210,140,.06),0 2px 10px rgba(0,0,0,.55);
    }
    html[data-station-theme="rm-brass"] button{
      background:linear-gradient(180deg,#312415,#171109);border-color:var(--line);
    }
    html[data-station-theme="rm-brass"] .hg-t{background:rgba(21,16,10,.88);border-color:var(--line2);color:var(--muted);}
    html[data-station-theme="rm-brass"] #hgChip{background:rgba(21,16,10,.98);border-color:var(--alert);}

    /* Voyenno-Morskoy Flot — Podvodnaya Lodka (S class) */
    html[data-station-theme="vmf-red"]{
      --bg:#050607;--panel:#0f1215;--panel2:#161a1e;--panel3:#1f252b;
      --ink:#e8edef;--muted:#96a0a6;--dim:#606a70;--line:#455059;--line2:#61727f;
      --alert:#de3333;--danger:#eb2d2d;--ok:#6eb875;--info:#579bbd;
      --gauge-bezel:#4e5559;--gauge-face-in:#151719;--gauge-face-out:#08090a;--gauge-needle:#de3333;
      --gauge-font:var(--mono);
    }
    html[data-station-theme="vmf-red"] body{
      background:radial-gradient(ellipse at 50% 25%,#1c2329 0%,var(--bg) 72%);
    }
    html[data-station-theme="vmf-red"] .panel{
      background:linear-gradient(180deg,rgba(25,31,37,.97),rgba(10,12,14,.97));
      box-shadow:inset 0 1px 0 rgba(200,220,230,.06),0 2px 10px rgba(0,0,0,.55);
    }
    html[data-station-theme="vmf-red"] button{
      background:linear-gradient(180deg,#242c34,#12161a);border-color:var(--line);
    }
    html[data-station-theme="vmf-red"] .hg-t{background:rgba(15,18,21,.88);border-color:var(--line2);color:var(--muted);}
    html[data-station-theme="vmf-red"] #hgChip{background:rgba(15,18,21,.98);border-color:var(--alert);}
    *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
    html,body{height:100%;width:100%;overflow:hidden;overscroll-behavior:none;}
    body{
      background:radial-gradient(ellipse at 50% 25%,#0d2429 0%,var(--bg) 70%);
      color:var(--ink);font-family:var(--mono);
      -webkit-user-select:none;user-select:none;
      -webkit-text-size-adjust:100%;
      touch-action:manipulation;
    }
    ::-webkit-scrollbar{width:6px;height:6px;}
    ::-webkit-scrollbar-thumb{background:#27544d;border-radius:3px;}
    ::-webkit-scrollbar-track{background:transparent;}

    /* ── SHARED COMPONENTS ── */
    .panel{border:1px solid var(--line);border-radius:var(--r);
      background:linear-gradient(180deg,rgba(18,46,53,.96),rgba(7,20,24,.96));
      box-shadow:inset 0 1px 0 rgba(120,220,180,.06),0 2px 10px rgba(0,0,0,.45);}
    .ptitle{color:var(--alert);font-size:11px;letter-spacing:1.4px;text-transform:uppercase;
      border-bottom:1px solid var(--line);padding-bottom:5px;margin:2px 0 9px;display:flex;
      justify-content:space-between;align-items:center;}
    .cgroup{margin-bottom:12px;}
    .cgroup label{display:flex;justify-content:space-between;align-items:baseline;
      color:var(--muted);font-size:12px;margin-bottom:2px;}
    .cgroup label strong{color:var(--ink);font-size:14px;}
    input[type=range]{width:100%;accent-color:var(--ok);background:transparent;}
    button{width:100%;margin:3px 0;background:linear-gradient(180deg,#14343c,#0d242a);
      border:1px solid var(--line);border-radius:6px;
      color:var(--ink);padding:7px 8px;font-family:inherit;cursor:pointer;
      text-transform:uppercase;letter-spacing:1px;font-size:11px;transition:transform .06s,background .12s,border-color .12s;}
    button:active{transform:scale(.97);background:#1d4650;}
    @media (hover:hover){button:hover{background:#1a414a;border-color:var(--line2);}}
    button.danger{border-color:#7d3b34;color:#ffd9d5;background:linear-gradient(180deg,#3a1a17,#240f0d);}
    button.danger:active{background:#5a2723;}
    button.go{border-color:#2f7d4b;color:#c9ffd8;background:linear-gradient(180deg,#123a25,#0a2216);}
    button.on{border-color:var(--alert);color:var(--alert);background:linear-gradient(180deg,#3d3116,#211a08);}
    .note{color:var(--muted);font-size:11px;line-height:1.4;margin-top:6px;}
    .orders-grid{display:grid;grid-template-columns:1fr auto;gap:3px 10px;font-size:12px;margin-bottom:8px;}
    .orders-grid .lbl{color:var(--muted);}
    .orders-grid .val{color:var(--ink);text-align:right;}
    .orders-grid .val.changed{color:var(--alert);}
    .dmg-row{display:flex;align-items:center;gap:6px;margin-bottom:5px;font-size:11px;}
    .dmg-lbl{width:74px;color:var(--muted);flex-shrink:0;}
    .dmg-bar-wrap{flex:1;height:9px;border:1px solid var(--line);background:#04090b;border-radius:5px;overflow:hidden;}
    .dmg-bar-fill{height:100%;transition:width .3s;}
    .dmg-val{width:34px;text-align:right;color:var(--ink);}
    .readout{display:grid;grid-template-columns:1fr auto;gap:4px 8px;font-size:12px;}
    .readout span{color:var(--muted);}
    .res-bar{height:10px;border:1px solid var(--line);background:#04090b;margin:3px 0 9px;border-radius:5px;overflow:hidden;}
    .res-bar i{display:block;height:100%;background:linear-gradient(90deg,#2b6a55,#6fe08f);transition:width .4s;}
    .log-entry{border-bottom:1px dotted rgba(130,168,154,.16);padding:2px 0;}
    .warn{color:var(--alert);} .bad{color:var(--danger);}
    @keyframes blink{50%{opacity:.35;}}

    /* ── TOASTS ── */
    #toastContainer{position:fixed;top:calc(var(--sat) + 10px);left:50%;transform:translateX(-50%);
      z-index:300;display:flex;flex-direction:column;gap:6px;pointer-events:none;min-width:min(300px,86vw);max-width:92vw;}
    /* On touch the clock/time-skip control lives in the 42px top bar. Toasts
       start below it instead of covering the selector the player may need next. */
    html[data-lay="touch"] #toastContainer{top:calc(var(--sat) + 52px);}
    html[data-dev="tablet"] #toastContainer{max-width:min(720px,calc(100vw - 32px));}
    @media (orientation: landscape) {
      html[data-lay="touch"][data-dev="tablet"] #toastContainer{left:calc((100vw - 420px) / 2);max-width:min(480px,calc(100vw - 440px));}
    }
    .toast{background:rgba(9,26,31,.97);border:1px solid var(--line);border-radius:6px;padding:9px 16px;
      font-size:12.5px;line-height:1.38;letter-spacing:.35px;text-align:center;overflow-wrap:anywhere;backdrop-filter:blur(4px);
      box-shadow:0 4px 18px rgba(0,0,0,.6);
      animation:toastIn .18s ease-out,toastOut .3s ease-in var(--toast-hold,2s) forwards;}
    .toast.ok{border-color:var(--ok);color:var(--ok);}
    .toast.warn{border-color:var(--alert);color:var(--alert);}
    .toast.bad{border-color:#ef8f86;color:#ef8f86;}
    .action-toast{pointer-events:auto;display:flex;align-items:center;gap:10px;text-align:left;}
    .impact-action-toast{order:-20;border-width:2px;box-shadow:0 5px 22px rgba(0,0,0,.78),0 0 0 1px rgba(245,198,92,.14) inset;}
    .action-toast span{flex:1;min-width:0;}
    .toast-action-btn{width:auto!important;min-width:86px;margin:0!important;padding:7px 10px!important;border-color:currentColor!important;color:inherit!important;background:rgba(0,0,0,.22)!important;font-size:9.5px!important;white-space:nowrap;}
    @keyframes toastIn{from{opacity:0;transform:translateY(-10px) scale(.96);}to{opacity:1;transform:none;}}
    @keyframes toastOut{from{opacity:1;}to{opacity:0;}}

    /* ── HOTKEY OVERLAY ── */
    #hotkeyOverlay{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:180;
      display:none;align-items:center;justify-content:center;}
    #hotkeyOverlay.open{display:flex;}
    #hotkeyBox{background:#0a191e;border:1px solid var(--line);border-radius:10px;padding:22px 26px;
      max-width:680px;width:92%;max-height:86vh;overflow-y:auto;column-count:2;column-gap:28px;}
    #hotkeyBox h2{color:var(--alert);font-size:14px;letter-spacing:2px;margin-bottom:14px;column-span:all;}
    .hk-section{break-inside:avoid;margin-bottom:14px;}
    .hk-title{color:var(--alert);font-size:11px;letter-spacing:1px;text-transform:uppercase;
      border-bottom:1px solid var(--line);padding-bottom:3px;margin-bottom:6px;}
    .hk-row{display:flex;justify-content:space-between;gap:16px;font-size:12px;padding:2px 0;}
    .hk-key{background:#14343c;border:1px solid var(--line);padding:1px 7px;border-radius:4px;
      color:var(--alert);font-size:11px;white-space:nowrap;flex-shrink:0;}
    .hk-desc{color:var(--muted);}
    #hotkeyBox .close-btn{column-span:all;margin-top:14px;width:auto;padding:10px 24px;
      border-color:var(--ok);color:var(--ok);}

    /* ── DAY / NIGHT + GYRO (live inside canvas holder) ── */
    #dayNightBar{position:absolute;top:10px;left:10px;width:120px;height:10px;
      border:1px solid var(--line);background:#020608;z-index:3;border-radius:6px;overflow:hidden;}
    #dayNightFill{height:100%;transition:width .5s,background .5s;}
    #dayNightLabel{position:absolute;top:23px;left:12px;font-size:10px;color:var(--muted);z-index:3;
      text-shadow:0 1px 3px #000;}
    #gyroIndicator{position:absolute;bottom:12px;right:12px;width:110px;height:110px;z-index:3;pointer-events:none;}

    /* ── TORPEDO DEPTH ROW ── */
    .torp-depth-row{display:flex;align-items:center;gap:8px;margin:4px 0 8px;}
    .torp-depth-row label{color:var(--muted);font-size:12px;white-space:nowrap;min-width:96px;}
    .torp-depth-row input{flex:1;accent-color:var(--ok);}
    .torp-depth-row strong{color:var(--ink);font-size:12px;min-width:38px;text-align:right;}

    /* ── OVERLAYS: SCENARIO + BRIEFING ── */
    #scenarioOverlay{position:fixed;inset:0;background:rgba(0,0,0,.93);z-index:150;
      display:none;align-items:center;justify-content:center;flex-direction:column;
      padding:calc(var(--sat) + 8px) 8px calc(var(--sab) + 8px);}
    #scenarioOverlay.open{display:flex;}
    #scenarioBox{background:#0a191e;border:1px solid var(--line);border-radius:10px;padding:0;
      max-width:860px;width:100%;max-height:100%;overflow:hidden;display:flex;flex-direction:column;}
    .scen-header{padding:14px 18px 12px;border-bottom:1px solid var(--line);display:flex;
      justify-content:space-between;align-items:center;flex-shrink:0;gap:10px;}
    .scen-header h2{color:var(--alert);font-size:13px;letter-spacing:1.6px;text-transform:uppercase;}
    .scen-tabs{display:flex;border-bottom:1px solid var(--line);flex-shrink:0;}
    .scen-tab{flex:1;padding:13px 6px;text-align:center;font-size:12px;letter-spacing:1px;text-transform:uppercase;
      color:var(--muted);cursor:pointer;border:none;border-radius:0;background:none;font-family:inherit;
      border-right:1px solid var(--line);margin:0;}
    .scen-tab:last-child{border-right:none;}
    .scen-tab.active{color:var(--alert);background:rgba(245,198,92,.08);box-shadow:inset 0 -2px 0 var(--alert);}
    /* Five scenario tabs still have to be thumb-readable on a narrow phone.
       Shrink typography before allowing wrapping; tablet/desktop keep the full labels. */
    /* component-fit, geen apparaatklasse: scenario-tabs hebben onder 520px te weinig breedte */
    @media(max-width:520px){
      .scen-tab{padding:11px 2px;font-size:9px;letter-spacing:.35px;}
    }
    .scen-body{overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch;}
    .area-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;padding:14px;}
    .area-card{border:1px solid var(--line);border-radius:8px;background:#061014;padding:14px;cursor:pointer;
      transition:border-color .15s,background .15s;}
    .area-card:active{border-color:var(--alert);}
    .area-card.selected{border-color:var(--ok);background:#0a1f1c;box-shadow:0 0 0 1px var(--ok) inset;}
    .area-card h3{color:var(--alert);font-size:13px;letter-spacing:1px;margin-bottom:6px;}
    .area-card .area-desc{color:var(--muted);font-size:11px;line-height:1.5;margin-bottom:8px;}
    .area-card .area-stats{display:grid;grid-template-columns:1fr 1fr;gap:3px;font-size:11px;}
    .area-card .area-stats span:nth-child(odd){color:var(--muted);}
    .area-card .area-stats span:nth-child(even){color:var(--ink);}
    .area-card .area-diff{display:inline-block;padding:2px 8px;border-radius:10px;font-size:10px;letter-spacing:1px;margin-top:6px;}
    .diff-easy{background:rgba(111,224,143,.14);color:var(--ok);border:1px solid var(--ok);}
    .diff-med{background:rgba(245,198,92,.14);color:var(--alert);border:1px solid var(--alert);}
    .diff-hard{background:rgba(239,106,88,.14);color:var(--danger);border:1px solid var(--danger);}
    .hist-list{padding:14px;display:flex;flex-direction:column;gap:10px;}
    .hist-card{border:1px solid var(--line);border-radius:8px;background:#061014;padding:12px 14px;cursor:pointer;}
    .hist-card:active{border-color:var(--alert);}
    .hist-card h3{color:var(--ink);font-size:12.5px;margin-bottom:4px;}
    .hist-card .hist-date{color:var(--alert);font-size:11px;margin-bottom:6px;}
    .hist-card .hist-desc{color:var(--muted);font-size:11px;line-height:1.5;}
    .campaign-command{border:1px solid var(--line2);border-radius:9px;background:linear-gradient(180deg,rgba(13,34,41,.96),rgba(5,16,20,.96));padding:12px;box-shadow:inset 0 1px rgba(255,255,255,.025);}
    .campaign-step{display:flex;gap:10px;align-items:center;margin:4px 0 9px;color:var(--alert);}.campaign-step>span{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--alert);border-radius:50%;font-size:10px;flex:0 0 auto}.campaign-step b,.campaign-step small{display:block}.campaign-step b{font-size:12px;letter-spacing:1.7px}.campaign-step small{margin-top:2px;color:var(--muted);font-size:9px;line-height:1.35;letter-spacing:.2px;font-weight:400}.campaign-step:not(:first-child){margin-top:16px}.mission-step{margin-bottom:0!important}
    .campaign-choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:7px}.campaign-choice{min-width:0;margin:0;padding:10px;text-align:left;border-color:var(--line);background:rgba(3,15,19,.82);display:flex;flex-direction:column;align-items:stretch;gap:4px}.campaign-choice strong{color:var(--ink);font-size:11px;line-height:1.3}.campaign-choice small{color:var(--muted);font-size:8.5px;line-height:1.35;min-height:2.7em}.campaign-choice em{color:var(--ok);font-size:8px;font-style:normal;letter-spacing:.55px}.campaign-index{color:var(--alert);font-size:8px;text-transform:uppercase;letter-spacing:1px}.campaign-choice.selected{border-color:var(--alert);box-shadow:inset 0 0 0 1px rgba(245,198,92,.30);background:rgba(50,42,19,.30)}.campaign-choice.locked{filter:saturate(.2);opacity:.50}.campaign-choice.locked em{color:var(--muted)}
    .war-party-choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:7px}.war-party-choice{min-width:0;margin:0;padding:9px;text-align:left;border-color:var(--line);background:rgba(4,18,22,.86);display:grid;grid-template-columns:50px minmax(0,1fr);gap:9px;align-items:center}.war-party-choice>span{display:grid;place-items:center;align-self:stretch;border-right:1px solid var(--line);color:var(--alert);font-size:14px;letter-spacing:1px}.war-party-choice strong,.war-party-choice b,.war-party-choice small{display:block}.war-party-choice strong{color:var(--ink);font-size:11px}.war-party-choice b{color:var(--alert);font-size:8.5px;margin:2px 0}.war-party-choice small{color:var(--muted);font-size:8.5px;line-height:1.35}.war-party-choice.selected{border-color:var(--ok);box-shadow:inset 0 0 0 1px rgba(111,224,143,.25);background:rgba(16,51,42,.34)}
    .boat-assignment{border-left:3px solid var(--ok);padding:9px 11px;background:rgba(6,27,27,.75);display:grid;grid-template-columns:1fr auto;gap:3px 10px}.boat-assignment strong{color:var(--ink);font-size:11px}.boat-assignment span{color:var(--alert);font-size:9px}.boat-assignment p{grid-column:1/-1;color:var(--muted);font-size:9px;line-height:1.4}
    /* component-fit, geen apparaatklasse: campaign/war-party cards hebben onder 560px te weinig breedte */
    @media(max-width:560px){.campaign-command{padding:9px}.campaign-choice-grid,.war-party-choice-grid{grid-template-columns:1fr}.campaign-choice small{min-height:0}.campaign-step small{font-size:8.5px}.boat-assignment{grid-template-columns:1fr}.boat-assignment p{grid-column:1}.boat-assignment span{grid-row:2}}
    .save-grid{padding:14px;display:flex;flex-direction:column;gap:10px;}
    .save-slot{border:1px solid var(--line);border-radius:8px;background:#061014;padding:11px 13px;
      display:flex;justify-content:space-between;align-items:center;gap:10px;}
    .save-slot .slot-info{flex:1;min-width:0;}
    .save-slot .slot-name{color:var(--ink);font-size:12px;margin-bottom:3px;}
    .save-slot .slot-meta{color:var(--muted);font-size:11px;}
    .save-slot .slot-btns{display:flex;gap:6px;flex-shrink:0;}
    .save-slot .slot-btns button{width:auto;padding:9px 13px;font-size:11px;margin:0;}
    .profile-tools{border:1px solid var(--line);border-radius:8px;background:rgba(6,16,20,.94);padding:12px 13px;
      display:flex;align-items:center;gap:12px;margin-bottom:2px;}
    .profile-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;color:var(--muted);font-size:10.5px;line-height:1.45;}
    .profile-copy b{color:var(--alert);font-size:11px;letter-spacing:1px;}.profile-copy small{color:var(--dim);font-size:9px;}
    .profile-buttons{display:flex;gap:7px;flex:0 0 auto;}.profile-buttons button{width:auto;margin:0;padding:9px 11px;font-size:10px;}
    /* component-fit, geen apparaatklasse: profile- en save-controls hebben onder 560px te weinig breedte */
    @media(max-width:560px){.profile-tools{align-items:stretch;flex-direction:column}.profile-buttons{width:100%}.profile-buttons button{flex:1;padding:10px 5px}.save-slot{align-items:flex-start;flex-direction:column}.save-slot .slot-btns{width:100%}.save-slot .slot-btns button{flex:1;padding:9px 6px}}
    .scen-footer{padding:10px 14px calc(10px + var(--sab));border-top:1px solid var(--line);
      display:flex;justify-content:flex-end;gap:10px;flex-shrink:0;}
    .scen-footer button{width:auto;padding:12px 22px;font-size:12px;margin:0;}
    .scen-footer button:disabled{opacity:.34;filter:saturate(.45);cursor:default;box-shadow:none;}
    /* PRIMARY MISSION uses the same in-app picker as the other touch selects.
       The native Android picker remains hidden, while this button keeps the
       same footprint and visual hierarchy as the old field. */
    .pk > #missionTypeSelect + .pk-btn,
    .pk > #campaignProfileSelect + .pk-btn{min-width:250px;max-width:min(100%,430px);justify-content:space-between;
      padding:10px 12px;font-size:11px;color:var(--ink);background:linear-gradient(180deg,#0d2229,#071216);
      border-color:var(--line);}
    .pk > #missionTypeSelect + .pk-btn.open,
    .pk > #campaignProfileSelect + .pk-btn.open{border-color:var(--alert);color:var(--alert);box-shadow:0 0 0 1px rgba(245,198,92,.14) inset;}
    /* component-fit, geen apparaatklasse: mission-picker heeft onder 520px te weinig breedte */
    @media(max-width:520px){
      .pk:has(#missionTypeSelect),.pk:has(#campaignProfileSelect){width:100%;}
      .pk > #missionTypeSelect + .pk-btn,.pk > #campaignProfileSelect + .pk-btn{width:100%;min-width:0;}
    }

    #briefingOverlay{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:200;
      display:flex;align-items:center;justify-content:center;padding:14px;}
    .decision-overlay{position:fixed;inset:0;z-index:420;display:grid;place-items:center;padding:18px;background:rgba(0,7,9,.84);backdrop-filter:blur(3px);}
    .decision-box{width:min(440px,100%);border:1px solid var(--line2);border-top:3px solid var(--alert);border-radius:8px;padding:18px;background:linear-gradient(180deg,#10262c,#061317);box-shadow:0 18px 54px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.04);}
    .decision-kicker{color:var(--dim);font-size:8px;letter-spacing:1.6px;margin-bottom:6px;}
    .decision-box h2{margin:0;color:var(--alert);font-size:16px;letter-spacing:1.7px;}
    .decision-box p{margin:12px 0 18px;color:var(--ink);font-size:11px;line-height:1.55;}
    .decision-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
    .decision-actions button{margin:0;min-height:44px;font-size:10px;}
    .decision-actions .confirm{border-color:var(--ok);color:var(--ok);}.decision-actions .danger{border-color:var(--danger);color:var(--danger);}
    #briefingBox{background:#0a191e;border:1px solid var(--alert);border-radius:10px;padding:22px 24px;
      max-width:520px;width:100%;max-height:88vh;overflow-y:auto;}
    #briefingBox h2{color:var(--alert);font-size:14px;letter-spacing:2px;margin-bottom:14px;}
    #briefingBox p{color:var(--muted);font-size:12.5px;line-height:1.65;margin-bottom:10px;}
    #briefingBox strong{color:var(--ink);}
    #briefingBox button{width:100%;padding:14px;margin-top:12px;border-color:var(--ok);color:var(--ok);font-size:12px;}

    /* ── VERSION CHIP ──────────────────────────────────────────────────
       Small, dim, always there. When a player writes in to say something is
       broken, the first thing you need is which build they are running. */
    .verchip{font-size:9.5px;letter-spacing:.6px;color:var(--dim);
      border:1px solid var(--line);border-radius:999px;padding:1px 6px;
      margin-left:7px;white-space:nowrap;flex-shrink:0;opacity:.85;
      font-variant-numeric:tabular-nums;cursor:pointer;
      -webkit-tap-highlight-color:transparent;}
    .verchip:active{color:var(--ok);border-color:var(--ok);}
    .verchip.upd{color:var(--alert);border-color:var(--alert);opacity:1;}
    .verchip.dev{color:var(--alert);border-color:rgba(245,198,92,.72);background:rgba(74,51,8,.35);opacity:1;}

    /* ── UPDATE BAR ── */
    #updBar{position:fixed;left:8px;right:8px;z-index:80;display:none;
      bottom:calc(var(--mob-tab-h) + 10px + var(--sab));
      border:1px solid var(--alert);border-radius:10px;padding:10px 12px;
      background:linear-gradient(180deg,rgba(38,30,10,.97),rgba(14,11,4,.97));
      box-shadow:0 8px 26px rgba(0,0,0,.6);font-size:12px;color:var(--ink);
      align-items:center;gap:10px;}
    #updBar.on{display:flex;}
    #resumeBar{position:fixed;left:8px;right:8px;top:calc(var(--sat) + 10px);z-index:82;
      display:none;align-items:center;gap:10px;padding:10px 12px;
      border:1px solid var(--ok);border-radius:10px;font-size:12px;color:var(--ink);
      background:linear-gradient(180deg,rgba(10,38,30,.98),rgba(4,16,14,.98));
      box-shadow:0 8px 26px rgba(0,0,0,.65);}
    #resumeBar.on{display:flex;}
    #resumeBar span{flex:1;line-height:1.45;}
    #resumeBar button{margin:0;width:auto;padding:8px 14px;min-height:40px;flex-shrink:0;}
    #resumeNo{border-color:var(--line);color:var(--muted);}
    #resumeYes{border-color:var(--ok);color:#cfffdd;}
    html[data-lay="desk"] #resumeBar{left:auto;right:16px;width:460px;}
    #updBar span{flex:1;line-height:1.45;}
    #updBar button{margin:0;width:auto;padding:8px 14px;min-height:40px;flex-shrink:0;}
    #updLater{border-color:var(--line);color:var(--muted);}
    html[data-lay="desk"] #updBar{left:auto;right:16px;bottom:16px;width:420px;}

    /* ── SONAR PING ── */
    #sonarPing{position:fixed;top:calc(var(--sat) + 86px);left:50%;transform:translate(-50%,-50%);
      width:18px;height:18px;border-radius:50%;border:2px solid var(--ok);opacity:0;pointer-events:none;z-index:50;}
    #sonarPing.ping{animation:sonarAnim .9s ease-out forwards;}
    html[data-station="MAP"] #sonarPing{display:none;}
    @keyframes sonarAnim{0%{transform:translate(-50%,-50%) scale(.45);opacity:.88;box-shadow:0 0 0 0 rgba(111,224,143,.34);}100%{transform:translate(-50%,-50%) scale(2.4);opacity:0;box-shadow:0 0 0 12px rgba(111,224,143,0);}}

    /* ── TUTORIAL COACH CARD ── */
    #coach{position:fixed;left:8px;right:8px;bottom:calc(var(--mob-tab-h) + 70px + var(--sab));
      z-index:60;display:none;border:1px solid var(--line2);border-radius:10px;
      background:linear-gradient(180deg,rgba(14,38,45,.985),rgba(6,17,21,.985));
      box-shadow:0 6px 26px rgba(0,0,0,.6);padding:10px 12px 12px;backdrop-filter:blur(4px);}
    #coach.on{display:block;}
    #coach.up{bottom:auto;top:calc(var(--sat) + 78px);}
    #coach h4{color:var(--alert);font-size:12px;letter-spacing:1.2px;text-transform:uppercase;
      display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:7px;}
    #coach h4 #tutProg{color:var(--dim);font-size:10px;letter-spacing:1px;flex-shrink:0;}
    #tutBody{font-size:12px;line-height:1.6;color:var(--muted);max-height:26vh;overflow-y:auto;}
    #tutBody b{color:var(--ink);}
    #tutGoal{margin-top:8px;font-size:12px;color:var(--alert);border-top:1px solid var(--line);padding-top:7px;}
    #tutGoal.done{color:var(--ok);}
    #tutGoal .tick{display:inline-block;width:15px;}
    #coach .row{display:flex;gap:8px;margin-top:9px;}
    #coach .row button{margin:0;min-height:44px;}
    #tutQuit{flex:0 0 34%;border-color:var(--line);color:var(--muted);}
    #tutNext{flex:1;border-color:var(--ok);color:#cfffdd;}
    @keyframes tutPulse{0%,100%{box-shadow:0 0 0 0 rgba(245,198,92,.6);}50%{box-shadow:0 0 0 7px rgba(245,198,92,0);}}
    .tut-hl{animation:tutPulse 1.6s ease-out infinite;border-radius:12px;}
    @media (orientation:landscape){
      html[data-lay="touch"] #coach{right:auto;width:min(52%,440px);
        bottom:calc(var(--mob-tab-h) + 54px + var(--sab));}
      html[data-lay="touch"] #coach.up{top:auto;bottom:calc(var(--mob-tab-h) + 54px + var(--sab));}
      #tutBody{max-height:19vh;}
    }
    html[data-lay="desk"] #coach{left:auto;right:16px;bottom:16px;width:390px;}
    html[data-dev="tablet"] #coach{width:min(640px,calc(100vw - 32px));right:16px;left:auto;}

    /* ── COACH: collapsed "peek" strip ──────────────────────────────────
       On a phone held upright the card was eating the controls it was
       telling you to press. So the whole header row is a grip: tap it and
       the card folds down to a single line — step title, tick, progress —
       which is all you need once you have read the instruction. It unfolds
       again on a tap, on the next step, and the moment the step is done. */
    #coachBar{cursor:pointer;-webkit-tap-highlight-color:transparent;
      touch-action:manipulation;user-select:none;}
    #coachChev{color:var(--dim);font-size:11px;flex-shrink:0;margin-left:2px;
      transition:transform .18s ease;display:inline-block;}
    #coach.min #coachChev{transform:rotate(-90deg);}
    #coach.min{padding:8px 12px 9px;}
    #coach.min h4{margin-bottom:0;}
    #coach.min #tutBody,#coach.min .row{display:none;}
    #coach.min #tutGoal{margin-top:6px;padding-top:6px;font-size:11.5px;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    #coach.min #tutGoal:empty{display:none;}
    /* portrait phones: never let the card own more than a corner of the screen */
    @media (orientation:portrait){
      html[data-lay="touch"] #coach{left:6px;right:6px;
        bottom:calc(var(--mob-tab-h) + 10px + var(--sab));}
      html[data-lay="touch"] #coach.up{top:calc(var(--sat) + 64px);bottom:auto;}
      html[data-lay="touch"] #tutBody{max-height:22vh;}
      html[data-lay="touch"] #coach{box-shadow:0 8px 30px rgba(0,0,0,.72);}
      /* Once an action step has been read, collapse the coach into a true
         corner chip. A full-width "minimised" card still covered the very
         controls a phone player was asked to operate. Tap the chip to reopen. */
      html[data-lay="touch"] #coach.min{left:6px;right:auto;top:calc(var(--sat) + 118px);bottom:auto;
        width:min(72vw,270px);padding:7px 9px 8px;border-radius:9px;}
      html[data-lay="touch"] #coach.min.up{top:calc(var(--sat) + 118px);bottom:auto;}
      html[data-lay="touch"] #coach.min h4{font-size:10.5px;gap:6px;white-space:nowrap;overflow:hidden;}
      html[data-lay="touch"] #coach.min h4 #tutTitle{overflow:hidden;text-overflow:ellipsis;}
      html[data-lay="touch"] #coach.min #tutGoal{max-width:250px;font-size:9.5px;margin-top:4px;padding-top:4px;}
    }
    /* a highlighted control must never sit under the card */
    .tut-hl{position:relative;z-index:61;}

    /* ══════════════════════════════════════════════
       DESKTOP LAYOUT
    ══════════════════════════════════════════════ */
    html[data-lay="desk"] #touchShell{display:none !important;}
    html[data-lay="desk"] #desktopShell{
      display:grid;height:100vh;
      grid-template-columns:270px 1fr 310px;
      grid-template-rows:52px 1fr 38px 128px;
      gap:6px;padding:6px;
    }
    html[data-lay="desk"] #deskHeader{grid-column:1/4;display:flex;align-items:center;
      justify-content:space-between;padding:0 14px;}
    html[data-lay="desk"] #deskHeader h1{font-size:15px;letter-spacing:2px;text-transform:uppercase;color:var(--alert);}
    .hstatus{display:flex;gap:12px;font-size:12px;color:var(--muted);flex-wrap:wrap;align-items:center;}
    .hstatus strong{color:var(--ink);}
    .hstatus button{width:auto;margin:0;padding:6px 10px;font-size:10px;letter-spacing:1px;
      border-color:var(--alert);color:var(--alert);}
    html[data-lay="desk"] #deskBridge{grid-column:1;grid-row:2;padding:10px;overflow-y:auto;}
    html[data-lay="desk"] #deskCanvas{grid-column:2;grid-row:2;position:relative;padding:6px;}
    html[data-lay="desk"] #mainCanvas{width:100%;height:100%;display:block;background:#03090b;
      border:1px solid #1f403c;border-radius:4px;cursor:crosshair;}
    html[data-lay="desk"] #stationTabs{position:absolute;top:12px;right:12px;display:flex;gap:4px;z-index:4;}
    html[data-lay="desk"] #stationTabs button{padding:6px 10px;font-size:11px;background:rgba(16,42,49,.92);width:auto;margin:0;}
    html[data-lay="desk"] #stationTabs button.active{border-color:var(--alert);color:var(--alert);}

    /* ── SURFACE BRIDGE CONTROL STRIP ──
       One shared DOM strip lives with the canvas, so it follows the canvas
       between desktop and touch shells without duplicate controls. */
    #bridgeControls{position:absolute;z-index:9;display:none;gap:5px;pointer-events:auto;
      right:10px;bottom:10px;padding:4px;border:1px solid var(--line);border-radius:9px;
      background:rgba(5,17,21,.84);backdrop-filter:blur(3px);box-shadow:0 3px 14px rgba(0,0,0,.45);}
    #bridgeControls.on{display:flex;}
    #bridgeControls button{width:auto;min-width:72px;margin:0;padding:8px 9px;font-size:10px;min-height:38px;
      background:rgba(10,31,37,.92);}
    #bridgeControls button span{margin-left:3px;}
    #bridgeBino.on{border-color:var(--alert);color:var(--alert);background:rgba(60,44,10,.92);}
    html[data-lay="touch"] #bridgeControls{left:8px;right:8px;bottom:8px;justify-content:stretch;}
    html[data-lay="touch"] #bridgeControls button{flex:1;min-width:0;min-height:46px;padding:6px 4px;font-size:9.5px;}
    @media (orientation:landscape){
      html[data-lay="touch"] #bridgeControls{left:auto;right:8px;bottom:8px;flex-direction:column;width:82px;}
      html[data-lay="touch"] #bridgeControls button{width:100%;min-height:40px;flex:0 0 auto;padding:5px 3px;}
      html[data-lay="touch"] #bridgeControls button span{display:block;margin:2px 0 0;font-size:8px;}
    }
    /* ── SOUND ROOM CONTROL STRIP ── */
    #soundControls{position:absolute;z-index:9;display:none;gap:5px;pointer-events:auto;
      right:10px;bottom:10px;padding:4px;border:1px solid var(--line);border-radius:9px;
      background:rgba(3,20,16,.88);backdrop-filter:blur(3px);box-shadow:0 3px 14px rgba(0,0,0,.45);}
    #soundControls.on{display:flex;}
    #soundControls button{width:auto;min-width:68px;margin:0;padding:8px 8px;font-size:9.5px;min-height:38px;background:rgba(7,34,26,.94);}
    #soundControls button span{margin-left:2px;}
    #soundControls #soundEcho.confirm{border-color:#ef6a58;color:#fff;background:rgba(126,25,20,.96);box-shadow:0 0 0 1px rgba(239,106,88,.65) inset,0 0 14px rgba(239,106,88,.32);}
    #soundRadar.on{border-color:#6fe08f;color:#aef7c3;background:rgba(8,54,28,.92);}
    html[data-lay="touch"] #soundControls{left:6px;right:6px;bottom:8px;justify-content:stretch;gap:3px;}
    html[data-lay="touch"] #soundControls button{flex:1;min-width:0;min-height:46px;padding:5px 2px;font-size:9px;}
    html[data-lay="touch"] #soundControls button span{display:block;margin:2px 0 0;font-size:7.6px;}
    @media (orientation:landscape){
      html[data-lay="touch"] #soundControls{left:auto;right:8px;bottom:8px;flex-direction:column;width:88px;}
      html[data-lay="touch"] #soundControls button{width:100%;min-height:36px;flex:0 0 auto;padding:4px 2px;}
    }

    html[data-lay="desk"] #deskRight{grid-column:3;grid-row:2;display:flex;flex-direction:column;gap:6px;overflow:hidden;}
    html[data-lay="desk"] #deskOrders{flex:0 0 auto;padding:10px;overflow-y:auto;max-height:40%;}
    html[data-lay="desk"] #deskDamage{flex:0 0 auto;padding:10px;overflow-y:auto;max-height:30%;}
    html[data-lay="desk"] #deskGauges{flex:1 1 auto;padding:10px;overflow-y:auto;}
    html[data-lay="desk"] #deskAlert{grid-column:1/4;grid-row:3;padding:0 12px;overflow:hidden;
      display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:1px;white-space:nowrap;
      background:linear-gradient(90deg,rgba(18,9,9,.96),rgba(32,17,9,.96));}
    #deskAlert .normal,#tAlert .normal{color:var(--ok);}
    #deskAlert .warn,#tAlert .warn{color:var(--alert);}
    #deskAlert .critical,#tAlert .critical{color:var(--danger);animation:blink 1s step-end infinite;}
    html[data-lay="desk"] #deskLog{grid-column:1/4;grid-row:4;padding:8px 12px;overflow-y:auto;
      font-size:12px;line-height:1.35;color:var(--muted);}

    /* ══════════════════════════════════════════════
       TOUCH LAYOUT  (tablet / phone — portrait & landscape)
    ══════════════════════════════════════════════ */
    html[data-lay="touch"] #desktopShell{display:none !important;}
    html[data-lay="touch"] #touchShell{
      display:flex;flex-direction:column;
      position:fixed;top:0;left:0;right:0;
      height:100vh;height:100dvh;height:var(--appH,100dvh);
      padding:var(--sat) var(--sar) var(--sab) var(--sal);
      overflow:hidden;
    }

    /* Top bar */
    #tTop{flex:0 0 auto;height:42px;display:flex;align-items:center;gap:8px;
      padding:0 8px;border-bottom:1px solid var(--line);
      background:linear-gradient(180deg,rgba(20,50,58,.97),rgba(8,20,24,.97));}
    #tTop .brand{color:var(--alert);font-size:11px;letter-spacing:1.5px;white-space:nowrap;
      text-transform:uppercase;flex-shrink:0;}
    #tTop .tstats{display:flex;gap:10px;font-size:11px;color:var(--muted);
      flex:1;justify-content:flex-end;overflow:hidden;white-space:nowrap;}
    #tTop .tstats strong{color:var(--ink);}
    #tTop .tbtn{width:34px;height:32px;flex:0 0 auto;margin:0;padding:0;font-size:15px;
      display:flex;align-items:center;justify-content:center;}
    #tTop .tsel{flex:0 0 auto;height:32px;margin:0;padding:0 4px;font-size:11px;
      background:linear-gradient(180deg,#14343c,#0d242a);border:1px solid var(--line);
      border-radius:6px;color:var(--alert);font-family:inherit;letter-spacing:.5px;
      max-width:96px;-webkit-appearance:none;appearance:none;text-align:center;}

    /* Alert strip */
    #tAlert{flex:0 0 auto;height:26px;display:flex;align-items:center;padding:0 10px;gap:8px;
      font-size:11px;white-space:nowrap;overflow:hidden;
      background:linear-gradient(90deg,rgba(18,9,9,.95),rgba(32,17,9,.95));
      border-bottom:1px solid var(--line);}

    /* Stage — canvas + floating controls */
    #tStage{flex:1 1 auto;position:relative;min-height:0;overflow:hidden;}
    html[data-lay="touch"] #deskCanvas{position:absolute;inset:0;padding:0;border:none;
      background:none;box-shadow:none;border-radius:0;}
    html[data-lay="touch"] #mainCanvas{width:100%;height:100%;display:block;background:#03090b;
      touch-action:none;border:none;}
    html[data-lay="touch"] #stationTabs{display:none;}
    html[data-lay="touch"] #gyroIndicator{width:82px;height:82px;bottom:auto;top:62px;right:10px;opacity:.95;}
    html[data-lay="touch"] #gyroIndicator.off{display:none;}

    #transitBar{position:absolute;left:50%;top:46px;transform:translateX(-50%);z-index:12;
      display:none;align-items:center;gap:10px;padding:7px 10px 7px 14px;border-radius:20px;
      background:rgba(8,24,28,.94);border:1px solid var(--alert);box-shadow:0 4px 18px rgba(0,0,0,.6);
      font-size:11.5px;color:var(--alert);letter-spacing:.5px;white-space:nowrap;}
    #transitBar.on{display:flex;}
    #transitBar button{width:auto;margin:0;padding:6px 12px;font-size:10.5px;
      border-color:var(--danger);color:#ffd9d5;}

    /* Floating overlay clusters on the stage */
    .ovl{position:absolute;z-index:5;display:flex;gap:6px;pointer-events:none;}
    .ovl > *{pointer-events:auto;}
    #ovlStations{top:8px;right:8px;flex-direction:row;background:rgba(6,16,20,.82);
      border:1px solid var(--line);border-radius:20px;padding:3px;backdrop-filter:blur(3px);}
    #ovlStations button{width:auto;margin:0;padding:8px 13px;font-size:10.5px;border:none;
      border-radius:16px;background:none;color:var(--muted);letter-spacing:1px;}
    #ovlStations button.active{background:linear-gradient(180deg,#3d3116,#241a09);color:var(--alert);
      box-shadow:0 0 0 1px rgba(245,198,92,.5) inset;}
    /* component-fit, geen apparaatklasse: station-buttons hebben onder 430px te weinig breedte */
    @media(max-width:430px){
      #ovlStations button{padding:7px 9px;font-size:9.5px;letter-spacing:.7px;}
    }
    /* MAP owns a four-line navigation HUD at the top-left. Give it a true
       vertical safe zone instead of floating the station selector through it. */
    html[data-lay="touch"][data-station="MAP"] #ovlStations{top:78px;}
    #oGunFire{border-color:#7d3b34;color:#ffd9d5;background:rgba(60,18,14,.92);}
    #oGunFire.ready{border-color:var(--ok);color:#dbffe6;background:rgba(10,62,35,.92);}
    #ovlLeft{left:8px;bottom:8px;flex-direction:column;gap:10px;}
    #ovlRight{right:8px;bottom:8px;flex-direction:column;align-items:flex-end;gap:10px;}
    #gunElevPanel{display:none;right:78px;bottom:90px;flex-direction:column;align-items:center;gap:8px;pointer-events:none;}
    #gunElevPanel > *{pointer-events:auto;}
    html[data-lay="touch"] #ovlLeft,html[data-lay="touch"] #ovlRight{bottom:10px;}
    html[data-lay="touch"][data-station="MAP"] #ovlLeft{bottom:8px;}
    html[data-lay="touch"][data-station="PERISCOPE"] #ovlLeft,
    html[data-lay="touch"][data-station="PERISCOPE"] #ovlRight{bottom:8px;}
    html[data-lay="touch"][data-station="DECK_GUN"] #gunElevPanel{display:flex;}
    .gun-elev-wrap{position:relative;width:54px;height:168px;border-radius:18px;padding:10px 8px 8px;
      background:rgba(8,22,27,.88);border:1px solid var(--line);backdrop-filter:blur(3px);
      box-shadow:0 2px 10px rgba(0,0,0,.45);}
    .gun-elev-readout{position:absolute;left:0;right:0;top:7px;text-align:center;color:var(--alert);font-size:10px;letter-spacing:.6px;}
    #oGunElev{position:absolute;left:50%;top:86px;width:132px;height:24px;margin:0;background:transparent;
      transform:translate(-50%,-50%) rotate(-90deg);accent-color:var(--alert);}
    #gunElevPanel .gunstep{width:50px;height:50px;font-size:16px;}
    /* component-fit, geen apparaatklasse: gun-elevation controls hebben onder 430px te weinig breedte */
    @media(max-width:430px){
      #gunElevPanel{right:74px;bottom:84px;}
      .gun-elev-wrap{width:50px;height:154px;}
      #oGunElev{width:120px;top:80px;}
    }
    .rbtn{width:58px;height:58px;border-radius:50%;margin:0;padding:0;font-size:20px;
      display:flex;align-items:center;justify-content:center;letter-spacing:0;
      background:rgba(8,22,27,.86);border:1px solid var(--line);backdrop-filter:blur(3px);
      box-shadow:0 2px 10px rgba(0,0,0,.5);}
    .rbtn small{font-size:8px;letter-spacing:0;display:block;color:var(--muted);}
    .rbtn.on{border-color:var(--alert);color:var(--alert);background:rgba(60,44,10,.9);}
    .rbtn.hot{border-color:var(--danger);color:#ffd9d5;background:rgba(60,18,14,.9);}
    #btnFire{width:74px;height:74px;font-size:12px;letter-spacing:1px;flex-direction:column;
      border-color:#7d3b34;color:#ffd9d5;background:radial-gradient(circle at 50% 40%,#5c231d,#2a0d0a);}
    #btnFire.ready{border-color:var(--ok);color:#dbffe6;
      background:radial-gradient(circle at 50% 40%,#175232,#0a2216);animation:firePulse 1.6s ease-in-out infinite;}
    #btnFire .sol{font-size:10px;color:var(--muted);}
    #btnFire.ready .sol{color:var(--ok);}
    @keyframes firePulse{50%{box-shadow:0 0 16px rgba(111,224,143,.45);}}

    /* Attack HUD chip */
    #tdcChip{position:absolute;left:8px;top:8px;z-index:5;display:none;
      background:rgba(6,16,20,.85);border:1px solid var(--line);border-radius:8px;
      padding:6px 9px;font-size:10.5px;line-height:1.5;color:var(--muted);backdrop-filter:blur(3px);
      max-width:56%;}
    #tdcChip.on{display:block;}
    #tdcChip b{color:var(--ink);}

    /* MAP weather is an information chip as well as the overlay toggle. Keeping
       it at the otherwise unused top-right edge frees one large circular control
       and makes the current local weather visible without opening the overlay. */
    #mapWxChip{display:none;position:absolute;z-index:6;top:8px;right:8px;width:auto;height:30px;margin:0;padding:0 10px;
      border:1px solid var(--line);border-radius:15px;background:rgba(6,16,20,.86);color:var(--muted);
      font:700 9.5px/1 var(--mono);letter-spacing:.55px;white-space:nowrap;backdrop-filter:blur(3px);
      box-shadow:0 2px 10px rgba(0,0,0,.38);}
    html[data-lay="touch"][data-station="MAP"] #mapWxChip{display:flex;align-items:center;justify-content:center;}
    html[data-lay="touch"][data-station="MAP"] #mapWxChip.on{border-color:var(--alert);color:var(--alert);background:rgba(60,44,10,.88);}
    html[data-lay="touch"][data-station="MAP"] #oWeather{display:none!important;}
    html[data-lay="touch"] #dayNightBar,
    html[data-lay="touch"] #dayNightLabel{display:none;}

    /* Quick status strip */
    #tQS{flex:0 0 auto;display:flex;background:rgba(6,16,20,.96);border-top:1px solid var(--line);}
    .qs-cell{flex:1;padding:4px 2px;text-align:center;border-right:1px solid rgba(38,86,79,.5);min-width:0;}
    .qs-cell:last-child{border-right:none;}
    .qs-l{color:var(--dim);font-size:8px;display:block;letter-spacing:.6px;}
    .qs-v{font-size:13px;font-weight:bold;color:var(--ok);display:block;overflow:hidden;text-overflow:ellipsis;}
    .qs-v.w{color:var(--alert);} .qs-v.d{color:var(--danger);animation:blink 1s step-end infinite;}
    .qs-ord{display:block;font-size:8.5px;color:var(--alert);letter-spacing:.4px;height:10px;line-height:10px;}
    .qs-cell.tapcell{cursor:pointer;-webkit-tap-highlight-color:transparent;
      background:linear-gradient(180deg,rgba(245,198,92,.055),transparent);}
    .qs-cell.tapcell .qs-l{color:var(--alert);opacity:.8;}
    .qs-cell.tapcell.pressed{background:rgba(245,198,92,.22);}
    .qs-cell.tapcell.open{background:rgba(245,198,92,.16);box-shadow:0 -2px 0 var(--alert) inset;}


    /* component-fit, geen apparaatklasse: quick-status cells hebben onder 430px te weinig breedte */
    @media(max-width:430px){
      #tQS .qs-l{font-size:7px;letter-spacing:.35px;}
      #tQS .qs-v{font-size:11px;}
      #tQS .qs-ord{font-size:7.5px;}
    }


    /* Release polish — TAC portrait controls use measured canvas safe areas.
       CSS puts the action clusters in predictable lanes; JS measures their
       real bounds so labels adapt to phone/tablet width without magic pixels. */
    @media (orientation:portrait){
      html[data-lay="touch"][data-station="TACTICAL"] #tdcChip{
        top:10px;font-size:10px;line-height:1.42;
      }
      html[data-lay="touch"][data-station="TACTICAL"] #tdcChip.compact{
        padding:5px 7px;font-size:9px;line-height:1.32;white-space:nowrap;
      }
      html[data-lay="touch"][data-station="TACTICAL"] #tdcChip.micro{
        padding:4px 5px;font-size:8.5px;line-height:1.28;letter-spacing:-.15px;
      }
      html[data-lay="touch"][data-station="TACTICAL"] #ovlLeft{
        top:50%;bottom:auto;transform:translateY(-50%);left:10px;gap:12px;
      }
      html[data-lay="touch"][data-station="TACTICAL"] #ovlRight{
        bottom:118px;right:10px;gap:12px;
      }
      html[data-lay="touch"][data-station="TACTICAL"] #btnFire{width:78px;height:78px;}
    }
    /* component-fit, geen apparaatklasse: portrait tactical controls hebben onder 430px te weinig breedte */
    @media (orientation:portrait) and (max-width:430px){
      html[data-lay="touch"][data-station="TACTICAL"] #ovlLeft{left:8px;gap:10px;}
      html[data-lay="touch"][data-station="TACTICAL"] #ovlRight{right:8px;bottom:112px;gap:10px;}
      html[data-lay="touch"][data-station="TACTICAL"] .rbtn{width:56px;height:56px;}
      html[data-lay="touch"][data-station="TACTICAL"] #btnFire{width:74px;height:74px;}
    }

    /* ══ ORDER PAD ══════════════════════════════════════════════════════
       The two orders a skipper gives constantly are depth and speed, and
       they were buried behind a tab and a slider nobody dragged. Now the
       DEPTH and SPEED read-outs in the permanent strip ARE the control:
       tap the number, get a pad of big buttons over the picture, tap once
       more, it closes. Presets for the orders that have names, steppers for
       everything between. */
    #orderPad{position:fixed;left:6px;right:6px;z-index:70;display:none;
      bottom:calc(var(--mob-tab-h) + 46px + 6px + var(--sab));
      border:1px solid var(--alert);border-radius:12px;padding:8px 10px 10px;
      background:linear-gradient(180deg,rgba(12,32,38,.985),rgba(5,15,19,.985));
      box-shadow:0 10px 34px rgba(0,0,0,.72);backdrop-filter:blur(5px);}
    #orderPad.on{display:block;animation:opIn .13s ease-out;}
    @keyframes opIn{from{transform:translateY(10px);opacity:0;}to{transform:none;opacity:1;}}
    .op-head{display:flex;align-items:center;gap:8px;margin-bottom:7px;}
    .op-head #opTitle{color:var(--alert);font-size:12px;letter-spacing:1.4px;text-transform:uppercase;flex:0 0 auto;}
    .op-head .op-now{flex:1;color:var(--muted);font-size:11px;letter-spacing:.4px;}
    .op-head button{width:34px;min-height:34px;margin:0;padding:0;flex:0 0 auto;
      border-color:var(--line);color:var(--muted);font-size:13px;}
    .op-body{display:none;} .op-body.on{display:block;}
    .op-row{display:flex;gap:6px;margin-bottom:6px;}
    .op-row button{flex:1;margin:0;min-height:46px;font-size:12px;padding:4px 2px;}
    .op-row.op-step button{flex:0 0 auto;width:58px;font-size:13px;}
    .op-val{flex:1;display:flex;align-items:center;justify-content:center;
      font-size:19px;font-weight:bold;color:var(--ok);font-variant-numeric:tabular-nums;
      border:1px solid var(--line);border-radius:8px;background:rgba(4,14,17,.7);}
    .op-note{font-size:10.5px;color:var(--dim);line-height:1.45;margin-top:2px;}

    /* ══ IN-APP DROP-DOWNS ══════════════════════════════════════════════
       A native <select> on Android opens a full-screen system picker: white,
       enormous, and nothing to do with a 1943 control room. The select stays
       in the DOM as the source of truth — every existing change handler goes
       on working — but it is hidden behind a button of our own, and the list
       is a compact popover in the app's own colours. */
    .pk{position:relative;display:inline-flex;}
    .pk > select{position:absolute;inset:0;opacity:0;pointer-events:none;}
    .pk-btn{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
      font:inherit;font-size:11px;color:var(--ink);padding:6px 9px;margin:0;
      background:linear-gradient(180deg,#0d2229,#071216);
      border:1px solid var(--line);border-radius:8px;min-height:36px;}
    .pk-btn::after{content:'▾';color:var(--dim);font-size:10px;margin-left:1px;}
    .pk-btn.open{border-color:var(--alert);color:var(--alert);}
    #pkMenu{position:fixed;z-index:190;display:none;min-width:168px;max-width:min(84vw,300px);
      max-height:min(60vh,420px);overflow-y:auto;-webkit-overflow-scrolling:touch;
      border:1px solid var(--alert);border-radius:10px;padding:4px;
      background:linear-gradient(180deg,rgba(12,32,38,.99),rgba(5,15,19,.99));
      box-shadow:0 10px 34px rgba(0,0,0,.75);}
    #pkMenu.on{display:block;}
    #pkMenu button{display:block;width:100%;text-align:left;margin:0;
      font:inherit;font-size:12px;color:var(--ink);background:transparent;
      border:none;border-radius:7px;padding:9px 10px;min-height:40px;}
    #pkMenu button.sel{background:rgba(245,198,92,.18);color:var(--alert);}
    #pkMenu button.sel::before{content:'✓ ';}
    #pkMenu button:not(.sel)::before{content:'\00a0\00a0';}
    #pkMenu hr{border:none;border-top:1px solid var(--line2);margin:4px 6px;}
    #pkVeil{position:fixed;inset:0;z-index:189;display:none;}
    #pkVeil.on{display:block;}

    /* ══ HELM INSTRUMENTS ═══════════════════════════════════════════════ */
    #helmGauges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;justify-content:center;
      align-items:flex-start;}
    /* the value being set, kept off the dial and away from the hand */
    #hgChip{position:fixed;left:50%;transform:translateX(-50%) scale(.96);
      top:calc(var(--sat) + 52px);z-index:95;display:none;pointer-events:none;
      padding:7px 16px 8px;border:1px solid var(--alert);border-radius:12px;
      background:rgba(6,18,22,.97);box-shadow:0 6px 22px rgba(0,0,0,.7);
      text-align:center;transition:transform .1s ease;}
    #hgChip.on{display:block;transform:translateX(-50%) scale(1);}
    #hgChip.low{top:auto;bottom:calc(var(--mob-tab-h) + var(--sab) + 14px);}
    #hgChip span{display:block;font-size:8.5px;letter-spacing:1.4px;color:var(--dim);}
    #hgChip b{display:block;font-size:26px;line-height:1.1;color:var(--alert);
      font-variant-numeric:tabular-nums;}
    .hg{position:relative;flex:0 0 auto;min-width:0;max-width:100%;}
    .hg.focus{flex-basis:100%;}
    .hg canvas{display:block;width:100%;height:auto;touch-action:none;}
    .hg-t{position:absolute;left:50%;top:2px;transform:translateX(-50%);
      font-size:8.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--dim);
      padding:2px 8px;border:1px solid var(--line2);border-radius:99px;
      background:rgba(4,12,15,.8);cursor:pointer;}
    .hg.focus .hg-t{color:var(--alert);border-color:var(--alert);}
    @media (orientation:landscape){ .hg{flex:1 1 30%;} }

    /* ══ INTEL BOARD ═══════════════════════════════════════════════════
       A stack of signals is a filing cabinet, not intelligence. This is the
       one thing the skipper wants: everything he knows about, nearest at
       the top, each with a range, a bearing to steer, and how old the fix
       is — because a two-hour-old position is a guess and it should look
       like one. */
    .intel-row{display:flex;align-items:center;gap:8px;padding:7px 8px;margin-bottom:5px;
      border:1px solid var(--line);border-left-width:3px;border-radius:7px;
      background:rgba(8,22,26,.75);}
    .intel-row.ultra{border-left-color:#7fbcff;}
    .intel-row.contact{border-left-color:var(--ok);}
    .intel-row.escort{border-left-color:var(--danger);}
    .intel-rng{flex:0 0 auto;text-align:center;min-width:56px;}
    .intel-rng b{display:block;font-size:16px;color:var(--ink);line-height:1.05;font-variant-numeric:tabular-nums;}
    .intel-rng span{font-size:8.5px;color:var(--dim);letter-spacing:.5px;}
    .intel-main{flex:1;min-width:0;}
    .intel-main b{font-size:11.5px;color:var(--ink);display:block;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .intel-main span{font-size:10px;color:var(--muted);}
    .intel-age{flex:0 0 auto;font-size:9.5px;text-align:right;line-height:1.35;}
    .intel-age .fresh{color:var(--ok);} .intel-age .stale{color:var(--alert);}
    .intel-age .cold{color:var(--danger);}
    /* component-fit, geen apparaatklasse: intel rows hebben onder 560px te weinig breedte */
    @media(max-width:560px){
      .intel-row{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:start;gap:4px 8px;}
      .intel-rng{grid-row:1 / span 2;align-self:center;}
      .intel-main{grid-column:2;min-width:0;}
      .intel-main b{white-space:normal;overflow:visible;}
      .intel-age{grid-column:2;min-width:0;text-align:left;overflow-wrap:anywhere;}
      .intel-age br{display:none;}
      .intel-age span+span::before{content:' · ';color:var(--dim);}
    }
    .intel-empty{font-size:11px;color:var(--dim);padding:4px 2px;}
    .intel-ic{display:block;margin-top:2px;font-size:10px;}
    .intel-ic b{font-weight:bold;letter-spacing:.4px;}
    .ic-go{color:var(--ok);} .ic-warn{color:var(--alert);} .ic-no{color:var(--danger);}
    .sig-new{display:inline-block;background:var(--alert);color:#1a1405;font-size:8.5px;
      border-radius:3px;padding:0 4px;margin-left:6px;letter-spacing:.6px;vertical-align:1px;}
    .sig-age{color:var(--dim);font-size:9.5px;float:right;}
    /* the sliders stay as a fine adjustment, but they are no longer the
       only way to give the order — the steppers above them are */
    .stepline button{font-size:13px;}
    input[type=range].fine{opacity:.62;height:26px;}
    html[data-lay="desk"] #orderPad{display:none !important;}
    @media (orientation:landscape){
      html[data-lay="touch"] #orderPad{left:auto;right:8px;width:min(62%,520px);}
    }

    /* Tab bar */
    #tTabs{flex:0 0 auto;height:var(--mob-tab-h);display:flex;
      border-top:1px solid var(--line2);
      background:linear-gradient(0deg,rgba(3,9,11,.99),rgba(9,22,27,.98));}
    .mob-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
      background:none;border:none;border-radius:0;border-right:1px solid rgba(38,86,79,.5);
      color:var(--muted);font-size:9px;letter-spacing:.6px;text-transform:uppercase;
      padding:4px 2px;width:auto;margin:0;position:relative;}
    .mob-tab:last-child{border-right:none;}
    .mob-tab .ti{font-size:20px;line-height:1.15;}
    .mob-tab.active{color:var(--alert);background:rgba(245,198,92,.08);}
    .mob-tab.active::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--alert);}
    /* ── PRESS FEEDBACK ────────────────────────────────────────────────
       Glass gives the finger nothing back. These two rules are the whole
       difference between "the button does nothing" and "the boat heard me". */
    .mob-tab.pressed{background:rgba(245,198,92,.20);color:var(--alert);
      transform:scale(.94);transition:transform .06s ease;}
    #touchShell button.pressed,#touchShell .rbtn.pressed{
      transform:scale(.955);filter:brightness(1.55);
      box-shadow:0 0 0 2px rgba(111,224,143,.55) inset;
      transition:transform .05s ease,filter .05s ease;}
    #touchShell button,#touchShell .rbtn{transition:transform .16s ease,filter .16s ease;}

    .t-badge{display:none;position:absolute;top:3px;right:calc(50% - 26px);
      background:var(--danger);color:#fff;border-radius:9px;font-size:9px;padding:1px 5px;min-width:16px;text-align:center;}
    .t-badge.on{display:block;}
    .t-badge.ok{background:var(--ok);color:#062;}

    /* Sheets — slide over the stage, canvas stays visible */
    #tSheet{position:absolute;left:0;right:0;bottom:var(--mob-tab-h);
      height:58%;z-index:20;display:flex;flex-direction:column;
      background:linear-gradient(180deg,rgba(12,32,38,.985),rgba(5,14,18,.99));
      border-top:1px solid var(--line2);
      box-shadow:0 -8px 26px rgba(0,0,0,.55);
      transform:translateY(calc(100% + var(--mob-tab-h) + var(--sab) + 24px));
      visibility:hidden;pointer-events:none;
      transition:transform .24s cubic-bezier(.4,0,.2,1),visibility 0s linear .24s;
      will-change:transform;}
    #tSheet.open{transform:translateY(0);visibility:visible;pointer-events:auto;
      transition:transform .24s cubic-bezier(.4,0,.2,1),visibility 0s;}
    #tSheetHead{flex:0 0 auto;height:38px;display:flex;align-items:center;justify-content:space-between;
      padding:0 12px;border-bottom:1px solid var(--line);}
    #tSheetHead .st{color:var(--alert);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;}
    #tSheetHead button{width:auto;margin:0;padding:6px 12px;font-size:11px;}
    #tSheetBody{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:10px 12px 18px;}
    .sheet-pane{display:none;}
    .sheet-pane.active{display:block;}

    /* Touch-friendly controls inside sheets */
    #tSheetBody button{min-height:46px;font-size:11.5px;padding:10px 8px;}
    #tSheetBody input[type=range]{height:36px;margin:2px 0 8px;}
    #tSheetBody select{width:100%;background:#14343c;border:1px solid var(--line);border-radius:6px;
      color:var(--ink);padding:12px;font-family:inherit;font-size:12px;margin-bottom:8px;}
    .g2{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:4px 0;}
    .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:4px 0;}
    .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:4px 0;}
    .g5{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin:4px 0;}
    .g2 button,.g3 button,.g4 button,.g5 button{margin:0;}
    .stepper{display:flex;align-items:center;gap:6px;margin:2px 0 6px;}
    .stepper button{width:46px;height:46px;flex:0 0 auto;margin:0;font-size:18px;padding:0;}
    .stepper .sv{flex:1;text-align:center;font-size:20px;color:var(--ink);letter-spacing:1px;}
    .stepper .sv small{display:block;font-size:9px;color:var(--muted);letter-spacing:1px;}

    /* Tube tiles */
    .tubes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:4px 0 8px;}
    .tube{border:1px solid var(--line);border-radius:6px;background:#0c2229;padding:8px 4px;
      text-align:center;font-size:10px;color:var(--muted);min-height:56px;
      display:flex;flex-direction:column;justify-content:center;gap:2px;}
    .tube b{font-size:13px;color:var(--ink);display:block;}
    .tube.ready{border-color:var(--ok);color:var(--ok);background:#0c2a1c;}
    .tube.ready b{color:var(--ok);}
    .tube.flooded{border-color:var(--info);color:var(--info);}
    .tube.empty{border-color:#5a2723;color:var(--danger);opacity:.75;}
    .tube:active{transform:scale(.96);}

    /* Landscape: sheet becomes a side drawer */
    @media (orientation:landscape){
      html[data-lay="touch"] #tSheet{
        left:auto;right:0;top:0;bottom:0;width:min(44%,430px);height:auto;
        border-top:none;border-left:1px solid var(--line2);
        transform:translateX(calc(100% + 24px));
        box-shadow:-8px 0 26px rgba(0,0,0,.55);
      }
      html[data-lay="touch"] #tSheet.open{transform:translateX(0);visibility:visible;pointer-events:auto;}
      html[data-lay="touch"] #tTop{height:38px;}
      html[data-lay="touch"] #tAlert{height:22px;font-size:10px;}
      html[data-lay="touch"] #tTabs{height:52px;}
      html[data-lay="touch"] .mob-tab .ti{font-size:17px;}
      html[data-lay="touch"] .qs-v{font-size:12px;}
    }

    /* Very small phones */
    @media (max-width:380px){
      #tTop .brand{display:none;}
      .rbtn{width:46px;height:46px;font-size:17px;}
      #btnFire{width:64px;height:64px;}
    }
    /* Device class comes only from LayoutService; this replaces the former
       min-width:820px device decision for tablet and desktop shells. */
    html[data-dev="tablet"] .qs-v,html[data-dev="desktop"] .qs-v{font-size:15px;}
    html[data-dev="tablet"] .qs-l,html[data-dev="desktop"] .qs-l{font-size:9px;}
    html[data-dev="tablet"] #tTop,html[data-dev="desktop"] #tTop{height:48px;}
    html[data-dev="tablet"] #tTop .brand,html[data-dev="desktop"] #tTop .brand{font-size:12.5px;}
    html[data-dev="tablet"] #tAlert,html[data-dev="desktop"] #tAlert{height:30px;font-size:12px;}
    html[data-dev="tablet"] #tSheetBody,html[data-dev="desktop"] #tSheetBody{padding:14px 16px 24px;}
    html[data-dev="tablet"] .rbtn,html[data-dev="desktop"] .rbtn{width:66px;height:66px;font-size:23px;}
    html[data-dev="tablet"] #btnFire,html[data-dev="desktop"] #btnFire{width:82px;height:82px;}
    @media (prefers-reduced-motion:reduce){
      *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
    }

/* Patch 5 refinement — time scale pickers keep a stable footprint. */
#timeSelect + .pk-btn{width:214px;min-width:214px;justify-content:space-between;}
#tBtnTime + .pk-btn{width:96px;min-width:96px;max-width:96px;justify-content:space-between;overflow:hidden;text-overflow:ellipsis;}
#mTimeSel + .pk-btn{width:100%;min-width:180px;justify-content:space-between;}

/* After Action Report — static patrol debrief / engagement cards. */
#aarOverlay{position:fixed;inset:0;z-index:230;background:rgba(0,0,0,.94);display:none;align-items:center;justify-content:center;padding:16px;}
#aarOverlay.open{display:flex;}
#aarBox{width:min(1180px,96vw);height:min(860px,94vh);background:#0a1b20;border:1px solid var(--line2);box-shadow:0 18px 70px rgba(0,0,0,.75);display:flex;flex-direction:column;overflow:hidden;}
.aar-head{display:flex;justify-content:space-between;align-items:flex-start;padding:14px 18px 9px;border-bottom:1px solid var(--line);gap:12px;}
.aar-head h2{margin:2px 0 1px;color:var(--alert);font-size:20px;letter-spacing:1.2px}.aar-kicker{font-size:9px;letter-spacing:2.4px;color:var(--muted)}.aar-dates{font-size:11px;color:var(--ink);letter-spacing:.8px}.aar-close{width:38px!important;height:38px;padding:0!important;font-size:24px!important;margin:0!important;}
.aar-stats{display:grid;grid-template-columns:repeat(8,1fr);gap:1px;background:var(--line);border-bottom:1px solid var(--line)}.aar-stat{background:#0b2228;padding:8px 9px;min-width:0}.aar-stat strong,.aar-stat span{display:block;overflow:hidden;text-overflow:ellipsis}.aar-stat strong{color:var(--muted);font-size:8.5px;letter-spacing:.6px;text-transform:uppercase}.aar-stat span{color:var(--alert);font-size:10.5px;margin-top:3px;white-space:nowrap}
.aar-main{min-height:0;flex:1;display:grid;grid-template-columns:minmax(0,1.85fr) minmax(245px,.62fr)}.aar-debrief{min-width:0;min-height:0;overflow:auto;padding:12px;border-right:1px solid var(--line);background:linear-gradient(180deg,#081b20 0%,#07171b 100%)}
.aar-mission{border:1px solid rgba(111,224,143,.18);background:rgba(8,31,35,.72);padding:10px 12px;margin-bottom:10px}.aar-mission-kicker{color:var(--muted);font-size:8px;letter-spacing:1.8px}.aar-mission-title{color:var(--alert);font-size:13px;letter-spacing:.7px;margin:3px 0 4px}.aar-mission-copy{color:var(--ink);font-size:9.5px;line-height:1.42}.aar-mission-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;color:var(--dim);font-size:8.5px}.aar-objectives{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}.aar-objective{font-size:8px;padding:3px 6px;border:1px solid rgba(160,190,185,.18);color:var(--muted)}.aar-objective.done{border-color:rgba(111,224,143,.35);color:var(--ok)}.aar-objective.failed{border-color:rgba(255,110,90,.35);color:#ff967f}
.aar-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:8px 1px 6px}.aar-section-head span{display:block;color:var(--alert);font-size:10px;letter-spacing:1.4px}.aar-section-head small{display:block;color:var(--dim);font-size:8px;margin-top:2px}.aar-engagement-nav{display:flex;align-items:center;gap:7px;white-space:nowrap}.aar-engagement-nav button{margin:0!important;width:30px!important;height:28px!important;min-height:28px!important;padding:0!important;font-size:20px!important;line-height:1}.aar-engagement-nav b{min-width:42px;text-align:center;color:var(--ink);font-size:9px}.aar-engagement-panel{touch-action:pan-y;user-select:none}.aar-engagement-card{border:1px solid rgba(135,185,181,.22);background:rgba(6,22,27,.94);box-shadow:inset 0 0 35px rgba(38,89,90,.08);overflow:hidden}.aar-card-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;padding:10px 12px 4px}.aar-card-kicker{color:var(--muted);font-size:8px;letter-spacing:1.4px}.aar-card-top h3{margin:2px 0 0;color:#dff5e8;font-size:16px;letter-spacing:.5px}.aar-status{color:#f3c95f;border:1px solid rgba(243,201,95,.42);padding:4px 7px;font-size:8.5px;letter-spacing:1px}.aar-status.sunk{color:#ff8c73;border-color:rgba(255,110,90,.52)}.aar-status.severe{color:#ffc267;border-color:rgba(255,170,80,.5)}
.aar-ship-stage{position:relative;height:150px;margin:0 12px;border-top:1px solid rgba(111,224,143,.08);border-bottom:1px solid rgba(111,224,143,.08);overflow:hidden;background:linear-gradient(180deg,rgba(55,91,104,.16) 0%,rgba(20,57,66,.14) 61%,rgba(5,31,38,.58) 62%,rgba(5,25,31,.85) 100%)}.aar-ship-stage svg{width:78%;height:100%;display:block;margin:0 auto;filter:drop-shadow(0 7px 5px rgba(0,0,0,.45))}.aar-ship-stage svg .hull{fill:#20343a;stroke:#71908c;stroke-width:1.3}.aar-ship-stage svg .upper{fill:#354950;stroke:#75908d;stroke-width:1}.aar-ship-stage svg .line{fill:none;stroke:#7b9691;stroke-width:1.3}.aar-rarity{position:absolute;right:8px;top:8px;text-align:right;background:rgba(2,14,18,.78);border:1px solid rgba(245,198,92,.22);padding:5px 7px}.aar-rarity small,.aar-rarity b,.aar-rarity span{display:block}.aar-rarity small{font-size:6.8px;color:var(--dim);letter-spacing:1px}.aar-rarity b{font-size:9px;color:var(--alert);margin:1px 0}.aar-rarity span{font-size:7.5px;color:var(--muted)}
.aar-difficulty{display:grid;grid-template-columns:auto minmax(120px,1fr);gap:12px;align-items:center;padding:8px 12px 5px}.aar-difficulty small,.aar-difficulty b{display:block}.aar-difficulty small{font-size:7px;color:var(--dim);letter-spacing:1px}.aar-difficulty b{font-size:9px;color:var(--ink);margin-top:1px}.aar-difficulty>i{height:6px;background:#10292f;border:1px solid rgba(111,224,143,.12);overflow:hidden}.aar-difficulty>i>b{display:block;height:100%;background:linear-gradient(90deg,rgba(111,224,143,.55),rgba(245,198,92,.9))}.aar-badges{display:flex;flex-wrap:wrap;gap:4px;padding:0 12px 7px}.aar-badges span{font-size:7px;letter-spacing:.7px;padding:3px 5px;color:#dceee6;border:1px solid rgba(111,224,143,.22);background:rgba(23,55,52,.45)}
.aar-card-body{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(180px,.75fr);gap:10px;padding:4px 12px 8px}.aar-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.aar-specs>div{background:rgba(15,45,50,.48);border:1px solid rgba(100,155,154,.1);padding:5px 6px;min-width:0}.aar-specs small,.aar-specs b{display:block}.aar-specs small{font-size:6.8px;color:var(--dim);letter-spacing:.8px}.aar-specs b{font-size:8.5px;color:var(--ink);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aar-specs .aar-points b{color:var(--ok)}.aar-damage{padding:3px 0}.aar-subhead{font-size:7px;color:var(--dim);letter-spacing:1px;margin-bottom:3px}.aar-damage-row{display:grid;grid-template-columns:34px 1fr 30px;gap:5px;align-items:center;margin:3px 0;font-size:7px}.aar-damage-row span{color:var(--muted)}.aar-damage-row em{font-style:normal;color:var(--ink);text-align:right}.aar-damage-row i{height:5px;background:#10252b;overflow:hidden}.aar-damage-row i b{display:block;height:100%;background:rgba(236,136,74,.78)}
.aar-mini-map{margin:0 12px 10px;border:1px solid rgba(90,150,154,.14);background:#07181d;height:126px;overflow:hidden}.aar-mini-svg{width:100%;height:100%;display:block}.aar-mini-svg .grid{fill:none;stroke:rgba(125,175,176,.10);stroke-width:1}.aar-mini-svg .attack{fill:none;stroke:#73ced1;stroke-width:1.5;stroke-dasharray:6 4}.aar-mini-svg .own{fill:#f8e8a4}.aar-mini-svg .target{fill:#c46e5b}.aar-mini-svg text{fill:#72928d;font-size:6.5px;font-family:ui-monospace,Consolas,monospace;letter-spacing:.6px}.aar-mini-empty{display:flex;height:100%;align-items:center;justify-content:center;color:var(--dim);font-size:8px}.aar-no-engagement{min-height:280px;border:1px solid rgba(100,155,154,.17);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--muted)}.aar-no-engagement strong{color:var(--alert);letter-spacing:1px}
.aar-honors{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}.aar-honor{border:1px solid rgba(245,198,92,.16);background:rgba(32,37,28,.32);padding:6px 8px;min-width:0}.aar-honor small,.aar-honor b,.aar-honor span{display:block}.aar-honor small{font-size:6.7px;color:var(--dim);letter-spacing:.8px}.aar-honor b{font-size:8.5px;color:var(--alert);margin:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aar-honor span{font-size:7.5px;color:var(--ink)}
.aar-truth{width:auto!important;min-height:28px!important;margin:0!important;padding:5px 8px!important;font-size:7.5px!important;color:var(--muted)!important}.aar-truth.active{color:#ff9b82!important;border-color:#ff8068!important}.aar-route-map{height:176px;border:1px solid rgba(90,150,154,.18);background:#06171c;margin-bottom:9px;overflow:hidden}.aar-route-map svg{width:100%;height:100%;display:block}.aar-route-map .route{fill:none;stroke:#f4dc8a;stroke-width:2}.aar-route-map .observed{fill:none;stroke:#74cfd1;stroke-width:1.2;stroke-dasharray:4 3}.aar-route-map .truth{fill:none;stroke:#ff8068;stroke-width:1;stroke-dasharray:2 3}.aar-route-map text{fill:#72928d;font:7px ui-monospace,Consolas,monospace}.aar-detail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:8px}.aar-detail-grid>div,.aar-weapons,.aar-lessons{border:1px solid rgba(100,155,154,.14);background:rgba(8,31,35,.62);padding:7px 8px}.aar-detail-grid small,.aar-detail-grid b{display:block}.aar-detail-grid small{font-size:6.8px;color:var(--dim)}.aar-detail-grid b{font-size:9px;color:var(--ink);margin-top:2px}.aar-weapons,.aar-lessons{margin-top:7px;font-size:8px;color:var(--muted);line-height:1.45}.aar-weapons h4,.aar-lessons h4{margin:0 0 5px;color:var(--alert);font-size:8px;letter-spacing:1px}.aar-weapon-row,.aar-lesson{padding:4px 0;border-top:1px solid rgba(100,155,154,.10)}
.aar-aircraft-row{display:grid;grid-template-columns:minmax(118px,24%) 1fr;gap:9px;align-items:center;padding:5px 0;border-top:1px solid rgba(100,155,154,.10)}.aar-aircraft-row b,.aar-aircraft-row span,.aar-aircraft-row small{display:block}.aar-aircraft-row span{color:var(--muted)}.aar-aircraft-row small{margin-top:2px;color:var(--dim);font-size:7px}.aar-aircraft-svg{width:100%;max-width:160px;height:56px;background:rgba(3,19,23,.55);border:1px solid rgba(100,155,154,.12)}.aar-aircraft-svg .air-wing,.aar-aircraft-svg .air-body,.aar-aircraft-svg .air-tail{fill:#42676a;stroke:#8db4b0;stroke-width:1}.aar-aircraft-svg .air-detail{fill:#132b2e;stroke:#b6d0c9;stroke-width:1;fill-opacity:.9}
.aar-pacing,.aar-decisions,.aar-truth-comparison,.aar-intel-dossier{border:1px solid rgba(100,155,154,.14);background:rgba(8,31,35,.62);padding:7px 8px;margin-top:7px;font-size:8px;color:var(--muted);line-height:1.45}
.aar-pacing h4,.aar-decisions h4,.aar-truth-comparison h4,.aar-intel-dossier h4{margin:0 0 5px;color:var(--alert);font-size:8px;letter-spacing:1px;display:flex;justify-content:space-between;align-items:center}
.aar-pacing-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:4px}
.aar-pacing-cell{background:rgba(15,45,50,.5);border:1px solid rgba(100,155,154,.15);padding:4px 5px;text-align:center}
.aar-pacing-cell small{display:block;font-size:6.8px;color:var(--dim);letter-spacing:.6px}
.aar-pacing-cell b{display:block;font-size:8.5px;color:var(--ink);margin-top:2px}
.aar-pacing-cell.active{border-color:rgba(111,224,143,.4);background:rgba(20,55,50,.6)}
.aar-pacing-cell.active b{color:var(--ok)}
.aar-decision-row{display:grid;grid-template-columns:52px 1fr;gap:8px;align-items:baseline;padding:4px 0;border-top:1px solid rgba(100,155,154,.10)}
.aar-decision-row span{color:var(--dim);font-size:7.5px;font-family:ui-monospace,Consolas,monospace}
.aar-decision-row b{font-weight:500;color:var(--ink);font-size:8px}
.aar-decision-row small{color:var(--dim);margin-left:4px}
.aar-truth-table{width:100%;border-collapse:collapse;margin-top:4px}
.aar-truth-table th{font-size:7px;color:var(--dim);text-align:left;padding:3px 5px;border-bottom:1px solid rgba(100,155,154,.2);letter-spacing:.6px}
.aar-truth-table td{font-size:7.5px;padding:4px 5px;border-top:1px solid rgba(100,155,154,.08);vertical-align:top}
.aar-truth-badge{display:inline-block;padding:1px 4px;font-size:6.8px;letter-spacing:.5px;border:1px solid rgba(100,155,154,.25)}
.aar-truth-badge.accurate{border-color:rgba(111,224,143,.5);color:var(--ok);background:rgba(18,50,40,.4)}
.aar-truth-badge.misidentified{border-color:rgba(255,110,90,.5);color:#ff967f;background:rgba(50,20,18,.4)}
.aar-truth-badge.unobserved{border-color:rgba(160,190,185,.3);color:var(--muted)}
.aar-truth-badge.acoustic{border-color:rgba(243,201,95,.4);color:#f3c95f}
.aar-intel-item{padding:5px 0;border-top:1px solid rgba(100,155,154,.10)}
.aar-intel-top{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-bottom:2px}
.aar-intel-class{color:#ff967f;font-size:7px;letter-spacing:1px;border:1px solid rgba(255,110,90,.3);padding:1px 4px}
.aar-intel-auth{color:var(--dim);font-size:6.8px}
.aar-intel-headline{color:var(--alert);font-size:8px;font-weight:600;margin:1px 0}
.aar-intel-copy{color:var(--ink);font-size:7.5px;line-height:1.4}
.aar-log{min-height:0;overflow:auto;padding:12px 14px;background:#08181d}.aar-log h3{margin:0 0 8px;color:var(--alert);font-size:11px;letter-spacing:1.5px}.aar-log-row{padding:7px 0;border-bottom:1px solid rgba(100,150,155,.14);font-size:10px;line-height:1.35}.aar-log-row span{display:block;color:var(--dim);font-size:8px;margin-bottom:2px}.aar-log-row b{font-weight:500;color:var(--ink)}.aar-foot{padding:8px 14px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}.aar-foot>span{font-size:7.5px;color:var(--dim);letter-spacing:.7px}.aar-foot button{width:auto;margin:0;border-color:var(--ok);color:var(--ok);padding:9px 16px}
@media(max-width:900px){.aar-stats{grid-template-columns:repeat(4,1fr)}.aar-main{grid-template-columns:minmax(0,1fr) minmax(205px,.42fr)}.aar-card-body{grid-template-columns:1fr}.aar-damage{display:grid;grid-template-columns:repeat(2,1fr);column-gap:10px}.aar-subhead{grid-column:1/-1}.aar-ship-stage svg{width:88%}}
@media(max-width:760px){#aarOverlay{padding:0}#aarBox{width:100vw;height:100dvh;border:0}.aar-head{padding:8px 10px 6px}.aar-head h2{font-size:15px}.aar-dates{font-size:9px}.aar-stats{grid-template-columns:repeat(4,1fr)}.aar-stat{padding:5px 6px}.aar-stat strong{font-size:7px}.aar-stat span{font-size:8.5px}.aar-main{display:block;overflow:auto}.aar-debrief{overflow:visible;border-right:0;border-bottom:1px solid var(--line);padding:8px}.aar-log{max-height:210px;padding:8px 10px}.aar-mission{padding:8px 9px}.aar-section-head small{display:none}.aar-route-map{height:140px}.aar-detail-grid{grid-template-columns:repeat(2,1fr)}.aar-ship-stage{height:128px;margin:0 8px}.aar-card-top{padding:8px 8px 3px}.aar-card-top h3{font-size:14px}.aar-difficulty{padding:6px 8px 4px;grid-template-columns:auto 1fr}.aar-badges{padding:0 8px 5px}.aar-card-body{padding:3px 8px 6px}.aar-specs{grid-template-columns:repeat(2,1fr)}.aar-mini-map{margin:0 8px 8px;height:105px}.aar-honors{grid-template-columns:1fr 1fr 1fr}.aar-foot{padding:6px 9px}.aar-foot>span{display:none}}
@media(orientation:landscape) and (max-height:520px){#aarBox{height:100dvh;width:100vw}.aar-head{padding:5px 9px}.aar-head h2{font-size:13px}.aar-stats{grid-template-columns:repeat(8,1fr)}.aar-stat{padding:4px 5px}.aar-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,.38fr);overflow:hidden}.aar-debrief{overflow:auto;padding:6px}.aar-mission{padding:5px 7px;margin-bottom:5px}.aar-mission-copy{display:none}.aar-mission-meta{margin-top:4px}.aar-ship-stage{height:108px}.aar-mini-map{height:82px}.aar-card-body{grid-template-columns:1.25fr .75fr}.aar-damage{display:block}.aar-log{max-height:none;font-size:9px;padding:6px 8px}.aar-foot{padding:4px 8px}}


/* Patch 10.7 — compact torpedo stores readout in the touch Attack sheet. */
.torp-stores-note{margin:2px 0 7px;padding:5px 7px;border-left:2px solid rgba(111,224,143,.55);color:rgba(205,238,223,.88);font-size:10.5px;line-height:1.35;}

/* Phase 4 audio controls live in the existing keyboard/help sheet so mobile and
   desktop share one low-maintenance settings surface. */
.hk-audio-row{display:grid!important;grid-template-columns:minmax(70px,1fr) minmax(110px,2fr) 46px;gap:8px;align-items:center}.hk-audio-row input[type=range]{width:100%;accent-color:var(--alert);margin:0}.hk-audio-row .hk-key{min-width:42px;text-align:right}
html[data-lay="touch"] .desk-display-settings{display:none;}

/* ═══════════════════════════════════════════════════════════════
   DESKTOP COCKPIT REFACTOR — v1.0 browser usability
   Keep desktop useful as a command station instead of showing every control
   at once. Mobile/touch selectors remain untouched by scoping all rules to
   html[data-lay="desk"]. Critical controls (time scale/transit) live in the
   header, command families are tabbed, and every desktop column scrolls in
   its own bounded region so browser chrome can never push controls off-screen.
   ═══════════════════════════════════════════════════════════════ */
html[data-lay="desk"] #desktopShell{
  position:relative;
  height:100vh;height:100dvh;
  grid-template-columns:minmax(620px,1fr) clamp(220px,18vw,260px);
  grid-template-rows:68px 38px minmax(0,1fr) 58px clamp(66px,7vh,78px);
  gap:5px;padding:5px;
  overflow:hidden;
}
html[data-lay="desk"] #deskHeader{
  grid-column:1 / 3;
  min-width:0;padding:0 10px;display:grid;
  grid-template-columns:minmax(210px,auto) auto minmax(0,1fr);
  gap:7px 9px;align-items:center;overflow:hidden;
}
html[data-lay="desk"] #deskHeader #deskAlert{
  grid-column:1/-1;grid-row:2;min-width:0;height:19px;padding:0 7px;display:flex;align-items:center;gap:8px;
  font-size:9.5px;letter-spacing:.7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border-top:1px solid rgba(91,57,29,.75);background:linear-gradient(90deg,rgba(18,9,9,.72),rgba(32,17,9,.72));
}
html[data-lay="desk"] #deskHeader h1{
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:clamp(11px,1.05vw,15px);letter-spacing:clamp(1px,.14vw,2px);
}
html[data-lay="desk"] #deskHeader .verchip{white-space:nowrap;flex:none;}
html[data-lay="desk"] .hstatus{
  min-width:0;display:flex;flex-wrap:nowrap;justify-content:flex-end;gap:8px;
  align-items:center;overflow:hidden;font-size:10.5px;
}
html[data-lay="desk"] .hstatus>span{white-space:nowrap;flex:0 0 auto;}
html[data-lay="desk"] .hstatus>button{flex:0 0 auto;padding:5px 8px;font-size:8.5px;}
html[data-lay="desk"] .desk-time-picker{
  flex:0 0 auto;display:flex;align-items:center;gap:5px;color:var(--alert);
  font-size:8.5px;letter-spacing:.8px;white-space:nowrap;
}
html[data-lay="desk"] .desk-time-picker>span{color:var(--muted);}
html[data-lay="desk"] #timeSelect + .pk-btn{
  width:174px;min-width:174px;max-width:174px;height:30px;margin:0;padding:5px 8px;
  justify-content:space-between;overflow:hidden;text-overflow:ellipsis;font-size:9px;
}
html[data-lay="desk"] #deskBridge{
  position:absolute;z-index:55;left:10px;top:112px;bottom:124px;width:min(330px,calc(100vw - 20px));
  min-width:0;min-height:0;padding:7px;overflow:hidden;display:none;flex-direction:column;
  box-shadow:0 12px 38px rgba(0,0,0,.78);
}
html[data-lay="desk"] #deskBridge.open{display:flex;}
html[data-lay="desk"] .desk-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;color:var(--alert);font-size:9px;letter-spacing:1.1px;}
html[data-lay="desk"] .desk-drawer-head button{width:30px;height:26px;min-height:0;margin:0;padding:0;}
html[data-lay="desk"] #deskMissionActions{display:flex;gap:3px;flex:0 0 auto;order:-2;}
html[data-lay="desk"] #deskMissionActions button{width:auto;min-width:0;margin:0;padding:5px 7px;font-size:7.7px;letter-spacing:.3px;white-space:nowrap;}
html[data-lay="desk"] #deskMissionActions #newScenarioButton{border-color:var(--alert);color:var(--alert);font-size:8px;}
html[data-lay="desk"] #deskNavToolbar{
  grid-column:1;grid-row:2;min-width:0;display:flex;align-items:center;gap:4px;padding:3px 6px;overflow:hidden;
}
html[data-lay="desk"] #deskNavToolbar>span{color:var(--alert);font-size:8px;letter-spacing:1px;margin:0 3px;white-space:nowrap;}
html[data-lay="desk"] #deskNavToolbar>i{flex:1 1 auto;min-width:4px;}
html[data-lay="desk"] #deskNavToolbar button{width:auto;min-width:0;margin:0;padding:6px 7px;font-size:7.8px;letter-spacing:.25px;white-space:nowrap;}
html[data-lay="desk"] #deskNavToolbar button.secondary{color:var(--muted);border-color:var(--line2);background:rgba(8,25,29,.78);}
html[data-lay="desk"] .desk-command-tabs{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;
  flex:0 0 auto;margin-bottom:7px;padding-bottom:6px;border-bottom:1px solid var(--line);
}
html[data-lay="desk"] .desk-command-tabs button{
  min-width:0;width:100%;margin:0;padding:6px 2px;border-radius:5px;
  font-size:8px;letter-spacing:.45px;color:var(--muted);
}
html[data-lay="desk"] .desk-command-tabs button.active{
  color:var(--alert);border-color:var(--alert);background:linear-gradient(180deg,#3d3116,#211a08);
}
html[data-lay="desk"] .desk-cmd-pane{
  display:none;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:2px;
}
html[data-lay="desk"] .desk-cmd-pane.active{display:block;}
html[data-lay="desk"] .desk-cmd-pane>.ptitle:first-child{margin-top:1px;}
html[data-lay="desk"] .desk-order-presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;margin-top:5px;}
html[data-lay="desk"] .desk-order-presets button{min-width:0;margin:0;padding:5px 1px;font-size:7.7px;}
html[data-lay="desk"] .desk-order-fine{display:grid;grid-template-columns:42px minmax(0,1fr) 42px;gap:3px;margin-top:4px;}
html[data-lay="desk"] .desk-order-fine button{margin:0;padding:5px 2px;}
html[data-lay="desk"] .desk-order-fine input[type=number]{width:100%;min-width:0;padding:4px 5px;text-align:center;color:var(--ink);background:#07171b;border:1px solid var(--line);border-radius:4px;font-family:inherit;}
.heading-order-fine{display:grid;grid-template-columns:repeat(3,minmax(34px,1fr)) minmax(56px,1.3fr) repeat(3,minmax(34px,1fr));gap:3px;margin-top:5px;}
.heading-order-fine button{margin:0;padding:6px 2px;font-size:9px;}
.heading-order-fine input[type=number]{width:100%;min-width:0;padding:5px 3px;text-align:center;color:var(--ink);background:#07171b;border:1px solid var(--line);border-radius:4px;font-family:inherit;}
.touch-heading-fine{margin:6px 0 10px;}
.intel-plot-action{width:100%;margin-top:7px;border-color:rgba(111,224,143,.45);color:var(--ok);}
/* component-fit, geen apparaatklasse: heading-order controls hebben onder 430px te weinig breedte */
@media(max-width:430px){.heading-order-fine{grid-template-columns:repeat(3,1fr);}.heading-order-fine input[type=number]{grid-column:1/-1;grid-row:1;}}
html[data-lay="desk"] .desk-nav-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px;}
html[data-lay="desk"] .desk-nav-grid button{margin:0;min-width:0;}
html[data-lay="desk"] #deskCanvas{min-width:0;min-height:0;padding:4px;overflow:hidden;}
html[data-lay="desk"] #deskCanvas{grid-column:1;grid-row:3;}
html[data-lay="desk"] #deskVitals{
  grid-column:1;grid-row:4;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));
  min-width:0;min-height:0;padding:0;overflow:visible;
}
html[data-lay="desk"] .desk-vital{
  position:relative;min-width:0;display:flex;flex-direction:column;justify-content:center;
  padding:5px 7px;border-right:1px solid var(--line2);overflow:visible;
}
html[data-lay="desk"] .desk-vital:last-child{border-right:0;}
html[data-lay="desk"] .desk-vital>span{font-size:7.5px;line-height:1;color:var(--dim);letter-spacing:.75px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
html[data-lay="desk"] .desk-vital>strong{margin-top:4px;font-size:12px;line-height:1;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;}
html[data-lay="desk"] .desk-vital>small{margin-top:3px;font-size:7.5px;line-height:1;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
html[data-lay="desk"] .desk-vital.actionable{cursor:pointer;background:linear-gradient(180deg,rgba(19,49,54,.44),rgba(6,20,24,.28));}
html[data-lay="desk"] .desk-vital.actionable:hover,html[data-lay="desk"] .desk-vital.actionable:focus-visible,html[data-lay="desk"] .desk-vital.actionable.open{outline:none;background:rgba(47,95,86,.28);box-shadow:inset 0 0 0 1px var(--alert);}
html[data-lay="desk"] .desk-vital.caution>strong{color:var(--alert);}
html[data-lay="desk"] .desk-vital.critical>strong{color:var(--danger);}
html[data-lay="desk"] .desk-vital-menu{
  position:absolute;display:none;z-index:40;left:0;bottom:calc(100% + 5px);width:250px;
  padding:6px;border:1px solid var(--alert);border-radius:6px;background:rgba(6,20,24,.985);
  box-shadow:0 8px 24px rgba(0,0,0,.68);
}
html[data-lay="desk"] #deskVitalSpeed .desk-vital-menu{left:auto;right:0;}
html[data-lay="desk"] #deskVitalTorps .desk-vital-menu{left:auto;right:0;width:280px;}
html[data-lay="desk"] #deskVitalHeading .desk-vital-menu{left:0;width:270px;}
html[data-lay="desk"] .desk-vital-step.hdg{grid-template-columns:repeat(2,44px) 1fr repeat(2,44px);}
html[data-lay="desk"] .desk-vital.open .desk-vital-menu{display:block;}
html[data-lay="desk"] .desk-vital-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;}
html[data-lay="desk"] .desk-vital-step{display:grid;grid-template-columns:52px 1fr 52px;gap:4px;margin-top:4px;align-items:center;}
html[data-lay="desk"] .desk-vital-menu button{min-width:0;margin:0;padding:6px 3px;font-size:8px;}
html[data-lay="desk"] .desk-vital-step b{text-align:center;color:var(--ok);font-size:11px;font-variant-numeric:tabular-nums;}
html[data-lay="desk"] #deskFireButton{
  position:absolute;z-index:12;right:12px;bottom:12px;width:72px;height:72px;margin:0;padding:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;
  border-color:#7d3b34;color:#e7aaa4;background:radial-gradient(circle at 50% 40%,#4a211d,#21100e);
  font-size:12px;letter-spacing:1px;box-shadow:0 3px 14px rgba(0,0,0,.55);
}
html[data-lay="desk"] #deskFireButton span{font-size:9px;color:var(--muted);}
html[data-lay="desk"] #deskFireButton.ready{border-color:var(--ok);color:#dbffe6;background:radial-gradient(circle at 50% 40%,#175232,#0a2216);animation:firePulse 1.6s ease-in-out infinite;}
html[data-lay="desk"] #deskFireButton.ready span{color:var(--ok);}
html[data-lay="desk"] #bridgeControls,html[data-lay="desk"] #soundControls{right:92px;}
#deskGunControls{
  position:absolute;z-index:9;display:none;gap:5px;pointer-events:auto;
  right:10px;bottom:10px;padding:4px;border:1px solid var(--line);border-radius:9px;
  background:rgba(5,17,21,.84);backdrop-filter:blur(3px);box-shadow:0 3px 14px rgba(0,0,0,.45);
}
#deskGunControls.on{display:flex;}
#deskGunControls button{
  width:auto;min-width:76px;margin:0;padding:8px 9px;font-size:10px;min-height:38px;
  background:rgba(10,31,37,.92);
}
#deskGunControls button span{margin-left:3px;}
html[data-lay="desk"] #deskGunControls{right:12px;bottom:12px;}
html[data-lay="touch"] #deskGunControls{display:none!important;}
html[data-lay="desk"] #deskEmergencyCluster{
  position:absolute;z-index:11;left:10px;bottom:34px;display:grid;grid-template-columns:repeat(2,minmax(88px,1fr));
  gap:4px;width:210px;padding:4px;border:1px solid var(--line);border-radius:7px;background:rgba(5,17,21,.88);box-shadow:0 3px 14px rgba(0,0,0,.45);
}
html[data-lay="desk"] #deskEmergencyCluster button{min-width:0;margin:0;padding:6px 4px;font-size:7.7px;letter-spacing:.25px;}
html[data-lay="desk"] #deskEmergencyCluster button.on{border-color:var(--alert);color:var(--alert);background:rgba(60,44,10,.92);}
html[data-lay="touch"] #deskVitals,html[data-lay="touch"] #deskFireButton,html[data-lay="touch"] #deskNavToolbar,html[data-lay="touch"] #deskEmergencyCluster{display:none!important;}
html[data-lay="desk"] #gyroIndicator{
  position:absolute;bottom:12px;right:96px;width:96px;height:96px;z-index:9;pointer-events:none;
}
html[data-lay="desk"] #gyroIndicator.off{display:none!important;}
html[data-lay="desk"] #deskInputHint{display:none!important;}
html[data-lay="touch"] #deskInputHint{display:none;}
html[data-lay="desk"] #stationTabs{
  top:9px;right:9px;max-width:calc(100% - 18px);gap:3px;overflow:hidden;
  border-radius:7px;background:rgba(4,15,19,.55);padding:3px;
}
html[data-lay="desk"] #stationTabs button{padding:5px 7px;font-size:9px;letter-spacing:.45px;}
#deskScopeControls{display:none;}
/* #deskCanvas is re-parented into #tStage for the touch shell. Keep this
   desktop-only periscope strip out of the mobile accessibility and paint trees
   even if a partially stale client stylesheet would otherwise expose it. */
#deskScopeControls[hidden]{display:none!important;}
html[data-lay="touch"]{--pp-touch-ui-contract:'touch-scope-hidden-v1';}
html[data-lay="touch"] #deskScopeControls{display:none!important;visibility:hidden!important;pointer-events:none!important;}
html[data-lay="desk"] #deskScopeControls{position:absolute;z-index:9;left:50%;bottom:34px;transform:translateX(-50%);gap:5px;padding:4px;border:1px solid var(--line);border-radius:8px;background:rgba(3,17,21,.88);}
html[data-lay="desk"][data-station="PERISCOPE"] #deskScopeControls{display:flex;}
html[data-lay="desk"] #deskScopeControls button{width:auto;min-width:78px;margin:0;padding:8px 10px;font-size:10px;}
html[data-lay="desk"] #deskRight{
  grid-column:2;grid-row:2 / 5;min-width:0;min-height:0;overflow:hidden;
  display:flex;flex-direction:column;gap:4px;
}
html[data-lay="desk"] .desk-info-panel{
  flex:0 0 auto;min-width:0;min-height:31px;max-height:31px;padding:0;
  display:flex;flex-direction:column;overflow:hidden;
}
html[data-lay="desk"] .desk-info-panel.open{flex:1 1 0;max-height:none;min-height:86px;}
html[data-lay="desk"] .desk-info-head{
  flex:0 0 31px;width:100%;min-width:0;min-height:31px;margin:0;padding:5px 7px;
  display:grid;grid-template-columns:auto minmax(0,1fr) 10px;gap:6px;align-items:center;
  border:0;border-bottom:1px solid transparent;border-radius:0;background:rgba(10,28,32,.76);
  color:var(--muted);text-align:left;box-shadow:none;
}
html[data-lay="desk"] .desk-info-head:hover,html[data-lay="desk"] .desk-info-head:focus-visible{background:rgba(28,54,55,.86);outline:none;}
html[data-lay="desk"] .desk-info-panel.open .desk-info-head{border-bottom-color:var(--line);color:var(--alert);}
html[data-lay="desk"] .desk-info-head strong{font-size:8px;letter-spacing:.75px;text-transform:uppercase;white-space:nowrap;}
html[data-lay="desk"] .desk-info-head span{min-width:0;color:var(--dim);font-size:7.5px;letter-spacing:.15px;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
html[data-lay="desk"] .desk-info-head i{font-style:normal;text-align:center;color:var(--alert);}
html[data-lay="desk"] .desk-info-body{display:none;min-width:0;min-height:0;padding:7px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;}
html[data-lay="desk"] .desk-info-panel.open .desk-info-body{display:block;flex:1 1 auto;}
html[data-lay="desk"] .desk-info-subhead{margin:9px 0 5px;padding-top:6px;border-top:1px solid var(--line);color:var(--alert);font-size:8px;letter-spacing:1px;text-transform:uppercase;}
html[data-lay="desk"] #missionStatus{font-size:9.5px;line-height:1.45;}
html[data-lay="desk"] .desk-target-overview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;margin-bottom:7px;}
html[data-lay="desk"] .desk-target-overview>b,html[data-lay="desk"] .desk-target-overview>small{grid-column:1/-1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
html[data-lay="desk"] .desk-target-overview>b{color:var(--ok);font-size:11px;}.desk-target-overview>span{font-size:7.5px;color:var(--muted);white-space:nowrap;}.desk-target-overview>small{color:var(--dim);font-size:7.5px;}
html[data-lay="desk"] .desk-info-grid{display:grid;grid-template-columns:minmax(72px,.85fr) minmax(0,1.15fr);gap:3px 7px;font-size:8.5px;line-height:1.25;}
html[data-lay="desk"] .desk-info-grid>span{color:var(--muted);}html[data-lay="desk"] .desk-info-grid>strong{min-width:0;color:var(--ink);text-align:right;overflow-wrap:anywhere;}
html[data-lay="desk"] .desk-tube-list{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-top:5px;}
html[data-lay="desk"] .desk-tube{min-width:0;padding:5px;border:1px solid var(--line);border-radius:4px;display:grid;grid-template-columns:auto 1fr;gap:2px 5px;font-size:7.5px;cursor:pointer;user-select:none;transition:border-color .15s,background .15s;}
html[data-lay="desk"] .desk-tube:hover{border-color:var(--alert);background:rgba(18,48,54,.35);}
html[data-lay="desk"] .desk-tube>b{grid-row:1/3;color:var(--muted);align-self:center;}html[data-lay="desk"] .desk-tube>span{min-width:0;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}html[data-lay="desk"] .desk-tube>strong{color:var(--muted);}
html[data-lay="desk"] .desk-tube.ready{border-color:rgba(111,224,143,.48);}html[data-lay="desk"] .desk-tube.ready>strong{color:var(--ok);}html[data-lay="desk"] .desk-tube.empty>strong{color:var(--danger);}
html[data-lay="desk"] .desk-resources{margin:7px 0;}html[data-lay="desk"] #deskCrewStatus,html[data-lay="desk"] #deskAaStatus,html[data-lay="desk"] #deskDeckGunInfo,html[data-lay="desk"] #deskRadioState{font-size:8px;line-height:1.4;}
html[data-lay="desk"] #deskIntel .intel-row{grid-template-columns:34px minmax(0,1fr);gap:5px;}html[data-lay="desk"] #deskIntel .intel-age{grid-column:2;}html[data-lay="desk"] #deskRadioMessages .log-entry{font-size:8.5px;line-height:1.35;}
html[data-lay="desk"] #deskLog{grid-column:1 / 3;grid-row:5;min-width:0;min-height:0;padding:0;overflow:hidden;display:grid;grid-template-columns:126px minmax(0,1fr);}
html[data-lay="desk"] .desk-log-head{min-width:0;padding:5px 6px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:4px;justify-content:center;}
html[data-lay="desk"] .desk-log-head>strong{color:var(--alert);font-size:calc(8px * var(--ui-scale));letter-spacing:1px;text-transform:uppercase;}
html[data-lay="desk"] .desk-log-switch{display:grid;grid-template-columns:1fr;gap:2px;}
html[data-lay="desk"] .desk-log-switch button{min-width:0;width:100%;min-height:0;margin:0;padding:3px 5px;border-radius:3px;color:var(--dim);font-size:calc(7px * var(--ui-scale));letter-spacing:.25px;text-align:left;}
html[data-lay="desk"] .desk-log-switch button.active{border-color:var(--alert);color:var(--alert);background:rgba(57,45,14,.55);}
html[data-lay="desk"] #deskLogEntries{min-width:0;min-height:0;padding:5px 8px;overflow-y:auto;overflow-x:hidden;color:var(--muted);font-size:calc(9px * var(--ui-scale));line-height:1.35;scrollbar-width:thin;}
html[data-lay="desk"] #deskLogEntries .log-entry{min-height:1.35em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
html[data-lay="desk"] #deskLogEntries .log-empty{color:var(--dim);padding-top:4px;}
.resource-label{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:var(--muted);}.resource-label strong{color:var(--ink);}
[data-desk-panel="boat"].damage-pulse{animation:damagePulse 1.8s ease-out 2;}
#tTabs .mob-tab.damage-pulse{animation:damagePulse 1.8s ease-out 2;color:var(--danger);}
@keyframes damagePulse{0%,100%{box-shadow:0 0 0 1px rgba(239,106,88,0)}35%{box-shadow:0 0 0 2px rgba(239,106,88,.95),0 0 22px rgba(239,106,88,.45)}}

/* Medium laptop: preserve the canvas first, hide redundant header telemetry.
   Current values remain available in the right-hand status column. */
@media (max-width:1480px){
  html[data-lay="desk"] #desktopShell{grid-template-columns:minmax(560px,1fr) 238px;}
  html[data-lay="desk"] .hstatus>span:nth-of-type(2),
  html[data-lay="desk"] .hstatus>span:nth-of-type(3){display:none;}
  html[data-lay="desk"] #deskTutBtn{display:none;}
  html[data-lay="desk"] #timeSelect + .pk-btn{width:160px;min-width:160px;max-width:160px;}
}
@media (max-width:1220px){
  html[data-lay="desk"] #desktopShell{grid-template-columns:minmax(520px,1fr) 220px;}
  html[data-lay="desk"] #deskHeader{grid-template-columns:minmax(170px,auto) auto minmax(0,1fr);}
  html[data-lay="desk"] .hstatus>span:nth-of-type(1),
  html[data-lay="desk"] .hstatus>span:nth-of-type(4),
  html[data-lay="desk"] .hstatus>span:nth-of-type(6){display:none;}
  html[data-lay="desk"] #deskLayoutBtn{font-size:0;padding:5px 7px;}
  html[data-lay="desk"] #deskLayoutBtn::after{content:'⇄ UI';font-size:8.5px;}
  html[data-lay="desk"] #timeSelect + .pk-btn{width:148px;min-width:148px;max-width:148px;}
  html[data-lay="desk"] #stationTabs button{padding:5px 5px;font-size:8.3px;}
}

/* Short laptop/browser viewport: browser chrome often removes 100–150 px of
   vertical room. Sacrifice log height, not controls or the tactical picture. */
@media (max-height:760px){
  html[data-lay="desk"] #desktopShell{
    grid-template-rows:62px 34px minmax(0,1fr) 52px 72px;gap:4px;padding:4px;
  }
  html[data-lay="desk"] #deskHeader{padding:0 8px;gap:7px;}
  html[data-lay="desk"] #deskHeader h1{font-size:11px;}
  html[data-lay="desk"] .hstatus{gap:6px;font-size:9px;}
  html[data-lay="desk"] #deskBridge{top:104px;bottom:108px;padding:6px;}
  html[data-lay="desk"] .cgroup{margin-bottom:8px;}
  html[data-lay="desk"] .ptitle{margin-bottom:6px;padding-bottom:4px;font-size:9.5px;}
  html[data-lay="desk"] button{padding:6px 7px;font-size:9px;}
  html[data-lay="desk"] .desk-info-body{padding:6px;}
  html[data-lay="desk"] #deskLogEntries{padding:4px 7px;}
}
@media (max-height:620px){
  html[data-lay="desk"] #desktopShell{grid-template-rows:56px 32px minmax(0,1fr) 48px 66px;}
  html[data-lay="desk"] #deskHeader h1{max-width:220px;}
  html[data-lay="desk"] .hstatus>span{display:none!important;}
  html[data-lay="desk"] #deskLayoutBtn{display:none;}
  html[data-lay="desk"] #deskInputHint{font-size:7.5px;padding:3px 6px;}
}
html[data-lay="desk"] .desk-cmd-pane{flex:1 1 auto;}
html[data-lay="desk"] .desk-timescale-readout{display:none;}
.radio-actions{display:flex;gap:5px;flex-wrap:wrap;margin:6px 0 8px}.radio-actions button{min-height:34px;padding:6px 9px;border:1px solid var(--line);border-radius:4px;background:var(--panel2);color:var(--ink);font:700 10px/1 var(--mono);letter-spacing:.05em}.radio-actions button:disabled{opacity:.38}.radio-actions button.active{border-color:var(--alert);color:var(--alert)}

/* 9b-4 desktop type scale. Keep geometry and the touch reference layout fixed;
   only text in the desktop command and information surfaces responds. */
html[data-lay="desk"] #deskHeader h1{font-size:clamp(calc(11px * var(--ui-scale)),calc(1.05vw * var(--ui-scale)),calc(15px * var(--ui-scale)));}
html[data-lay="desk"] .hstatus{font-size:calc(10.5px * var(--ui-scale));}
html[data-lay="desk"] .hstatus>button{font-size:calc(8.5px * var(--ui-scale));}
html[data-lay="desk"] #deskNavToolbar>span{font-size:calc(8px * var(--ui-scale));}
html[data-lay="desk"] #deskNavToolbar button{font-size:calc(7.8px * var(--ui-scale));}
html[data-lay="desk"] .desk-command-tabs button,html[data-lay="desk"] #stationTabs button{font-size:calc(8px * var(--ui-scale));}
html[data-lay="desk"] .desk-vital>span,html[data-lay="desk"] .desk-vital>small{font-size:calc(7.5px * var(--ui-scale));}
html[data-lay="desk"] .desk-vital>strong{font-size:calc(12px * var(--ui-scale));}
html[data-lay="desk"] #deskFireButton{font-size:calc(12px * var(--ui-scale));}html[data-lay="desk"] #deskFireButton span{font-size:calc(9px * var(--ui-scale));}
html[data-lay="desk"] .desk-info-head strong{font-size:calc(8px * var(--ui-scale));}html[data-lay="desk"] .desk-info-head span{font-size:calc(7.5px * var(--ui-scale));}
html[data-lay="desk"] #missionStatus{font-size:calc(9.5px * var(--ui-scale));}
html[data-lay="desk"] .desk-target-overview>b{font-size:calc(11px * var(--ui-scale));}html[data-lay="desk"] .desk-target-overview>span,html[data-lay="desk"] .desk-target-overview>small{font-size:calc(7.5px * var(--ui-scale));}
html[data-lay="desk"] .desk-info-grid{font-size:calc(8.5px * var(--ui-scale));}html[data-lay="desk"] .desk-tube{font-size:calc(7.5px * var(--ui-scale));}
html[data-lay="desk"] #deskCrewStatus,html[data-lay="desk"] #deskAaStatus,html[data-lay="desk"] #deskDeckGunInfo,html[data-lay="desk"] #deskRadioState{font-size:calc(8px * var(--ui-scale));}
html[data-lay="desk"] #deskRadioMessages .log-entry{font-size:calc(8.5px * var(--ui-scale));}
html[data-lay="desk"] .desk-drawer-head{font-size:calc(9px * var(--ui-scale));}
html[data-lay="desk"] .desk-order-presets button{font-size:calc(7.7px * var(--ui-scale));}
html[data-lay="desk"] .desk-order-fine button{font-size:calc(8px * var(--ui-scale));}
html[data-lay="desk"] .desk-vital-menu button{font-size:calc(8px * var(--ui-scale));}
html[data-lay="desk"] #deskEmergencyCluster button{font-size:calc(7.7px * var(--ui-scale));}
html[data-lay="desk"] #deskScopeControls button{font-size:calc(10px * var(--ui-scale));}
html[data-lay="desk"] .desk-nav-grid button{font-size:calc(8px * var(--ui-scale));}
html[data-lay="desk"] .desk-info-subhead{font-size:calc(8px * var(--ui-scale));}
html[data-lay="desk"] #deskMissionActions button{font-size:calc(7.7px * var(--ui-scale));}

/* ════ SHIP RECOGNITION MANUAL (ONI-208) MODAL ════ */
.rec-manual-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center}
.rec-manual-modal.hidden{display:none!important}
.rec-manual-veil{position:absolute;inset:0;background:rgba(2,6,8,.86);backdrop-filter:blur(4px)}
.rec-manual-window{position:relative;width:min(890px,95vw);height:min(640px,92vh);background:#0b1518;border:1px solid var(--line,#254448);border-radius:6px;box-shadow:0 18px 45px rgba(0,0,0,.85);display:flex;flex-direction:column;overflow:hidden;font-family:var(--mono,monospace);color:var(--ink,#d6e2dd)}
.rec-manual-header{padding:10px 16px;background:#060e10;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.rec-manual-title{display:flex;align-items:baseline;gap:10px}
.rec-doc-code{font-size:9.5px;color:var(--alert,#f5c65c);letter-spacing:1px;font-weight:bold}
.rec-manual-title h3{margin:0;font-size:13px;letter-spacing:1.2px;color:var(--ink,#d6e2dd)}
.rec-manual-close{background:none;border:1px solid var(--line);color:var(--dim,#8ba8a0);font-size:14px;cursor:pointer;padding:4px 9px;border-radius:4px;transition:all .15s}
.rec-manual-close:hover{color:var(--alert);border-color:var(--alert)}
.rec-manual-tabs{display:flex;gap:4px;padding:6px 14px;background:rgba(14,28,32,.95);border-bottom:1px solid var(--line);overflow-x:auto}
.rec-tab-btn{padding:5px 11px;background:transparent;border:1px solid transparent;color:var(--dim,#789994);cursor:pointer;border-radius:3px;font-weight:bold;font-size:9.5px;letter-spacing:.6px}
.rec-tab-btn.active{background:var(--panel2,#14282c);color:var(--ok,#6fe08f);border-color:var(--line)}
.rec-manual-body{flex:1;display:flex;overflow:hidden}
.rec-manual-list-col{width:290px;border-right:1px solid var(--line);overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:6px;background:rgba(8,16,19,.5)}
.rec-card-item{display:flex;gap:8px;padding:6px 8px;border:1px solid rgba(40,75,80,.4);border-radius:4px;cursor:pointer;align-items:center;background:rgba(12,25,29,.6);transition:all .15s ease}
.rec-card-item:hover{background:rgba(20,42,48,.8);border-color:var(--ok)}
.rec-card-item.selected{background:rgba(26,56,64,.9);border-color:var(--ok);box-shadow:0 0 8px rgba(111,224,143,.25)}
.rec-sil-svg{width:74px;height:26px;color:var(--dim,#8ba8a0);flex-shrink:0}
.rec-card-item.selected .rec-sil-svg{color:var(--ok,#6fe08f)}
.rec-card-name{font-size:10.5px;font-weight:bold;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.rec-tag-code{display:inline-block;font-size:8px;padding:1px 4px;border-radius:2px;background:rgba(245,198,92,.15);color:var(--alert,#f5c65c);margin-right:4px}
.rec-tag-navy{display:inline-block;font-size:8px;padding:1px 4px;border-radius:2px;background:rgba(111,224,143,.15);color:var(--ok,#6fe08f)}
.rec-manual-detail-col{flex:1;overflow-y:auto;padding:14px 18px;display:flex;flex-direction:column}
.rec-detail-hero{background:rgba(4,10,12,.8);border:1px solid var(--line);border-radius:4px;padding:10px;text-align:center;margin-bottom:10px}
.rec-hero-svg{width:100%;height:85px;color:var(--ink)}
.rec-detail-name{font-size:15px;font-weight:bold;color:var(--ink);letter-spacing:.8px}
.rec-detail-sub{font-size:10px;color:var(--alert);margin-top:2px;margin-bottom:10px;letter-spacing:.5px}
.rec-specs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:8px 0 12px}
.rec-spec-box{background:rgba(12,24,28,.8);border:1px solid var(--line);border-radius:4px;padding:7px;text-align:center}
.rec-spec-box.highlight{border-color:var(--alert);background:rgba(40,32,10,.6)}
.rec-spec-lbl{display:block;font-size:7.5px;color:var(--dim);letter-spacing:.5px;margin-bottom:2px}
.rec-spec-val{font-size:11.5px;color:var(--ink);font-weight:bold}
.rec-spec-box.highlight .rec-spec-val{color:var(--alert)}
.rec-detail-section{margin-top:10px;border-top:1px solid rgba(40,75,80,.35);padding-top:8px}
.rec-detail-section h4{margin:0 0 4px;font-size:9.5px;letter-spacing:.8px;color:var(--dim)}
.rec-detail-section p{margin:2px 0;font-size:9.5px;line-height:1.45}
.rec-notes{color:var(--ink,#d6e2dd);font-style:italic}
.rec-manual-footer{padding:10px 16px;background:#060e10;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px}
.rec-footer-status{font-size:10px;color:var(--ink)}
.rec-footer-status.muted{color:var(--dim)}
.rec-footer-actions{display:flex;gap:8px}
.rec-action-btn{padding:8px 14px;border-radius:4px;font-family:inherit;font-size:10px;font-weight:bold;cursor:pointer;letter-spacing:.5px;transition:all .15s}
.rec-action-btn.primary{background:var(--ok,#6fe08f);color:#04120f;border:1px solid var(--ok)}
.rec-action-btn.primary:hover:not(:disabled){background:#8bf0a6}
.rec-action-btn.primary:disabled{opacity:.4;cursor:not-allowed}
.rec-action-btn.secondary{background:transparent;border:1px solid var(--line);color:var(--ink)}
.rec-action-btn.secondary:hover{border-color:var(--alert);color:var(--alert)}
@media(max-width:680px){
  .rec-manual-body{flex-direction:column}
  .rec-manual-list-col{width:100%;height:150px;border-right:none;border-bottom:1px solid var(--line)}
  .rec-specs-grid{grid-template-columns:repeat(2,1fr)}
  .rec-manual-footer{flex-direction:column;align-items:stretch}
  .rec-footer-actions{justify-content:flex-end}
}