*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:#07121c;color:#dcecf6;font:15px/1.5 system-ui,sans-serif;height:100dvh;display:grid;grid-template-columns:1fr 400px;grid-template-rows:1fr auto}
#view{position:relative;min-width:0;overflow:hidden;cursor:grab;-webkit-user-select:none;user-select:none}
/* THE VIEW OWNS ITS GESTURES. Without touch-action a swipe on the canvas is still a candidate for the browser's own
   panning, overscroll and pull-to-refresh, and two fingers zoom the PAGE -- the HUD and the transcript -- instead of
   the room; and when the browser claims a gesture it sends pointercancel and no pointerup (scene/view.js bindPointer).
   Page zoom itself is deliberately left alone: pinching the page is also how a low-vision player reads the
   transcript, so the canvas is fixed here rather than by forbidding scale in the viewport meta. */
#view canvas{display:block;touch-action:none}
/* No grey flash under a tap, on any of the buttons (the compass, the quick row, the menu, the inventory). */
button{-webkit-tap-highlight-color:transparent}
#hud{position:absolute;top:14px;left:16px;right:16px;display:flex;justify-content:space-between;pointer-events:none;font-size:13px;color:#a8c1d0}
#hover{background:rgba(8,14,20,.7);padding:4px 10px;border-radius:5px;min-height:1.6em}
#toast{position:absolute;top:56px;left:50%;transform:translateX(-50%);z-index:5;background:#1f7a45;color:#f1fff6;border:1px solid #5fd38a;border-radius:6px;padding:8px 16px;font-weight:600;box-shadow:0 6px 18px rgba(0,0,0,.45);pointer-events:none}
#toast.show{animation:toast-in .25s ease-out}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
/* The compass is a ROSE with fixed slots, not a strip: every direction keeps one place for the whole game, and
   a direction with no exit leaves its slot empty instead of letting the others slide along. A strip put UP
   first underwater and DOWN first on the crag, so the click that got you out of the sea put you back in. */
/* The bottom controls clear the phone's home indicator and the landscape notch (index.html asks for
   viewport-fit=cover). env() is 0px wherever there is no inset, so nothing moves on a desktop. */
#compass{position:absolute;bottom:calc(16px + env(safe-area-inset-bottom));left:calc(16px + env(safe-area-inset-left));display:flex;gap:10px;align-items:flex-start}
#compass .rose{display:grid;grid-template-columns:repeat(3,auto);gap:4px}
#compass .vert{display:grid;grid-template-columns:auto;gap:4px}
#compass .dir,#compass .slot{min-width:3.4em;height:2.1em;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}
#compass .dir{font:inherit;background:#132e42;color:#e7f3fa;border:1px solid #3d6379;border-radius:5px;padding:0 8px;cursor:pointer}
#compass .dir:hover{background:#24485d}
#compass .dir.blocked{opacity:.5}
#compass .dir.tried{opacity:.5}
#compass .dir.open{border-color:#5fd38a}
#compass .dir.closed{border-color:#e0655a}
#compass .dir.routine{border-style:dashed}
/* The quick row is quickButtons, whole (round thirteen), so it can be long: it wraps upward and never reaches the compass. */
#quick{position:absolute;bottom:calc(16px + env(safe-area-inset-bottom));right:calc(16px + env(safe-area-inset-right));left:calc(32px + 17em);display:flex;flex-wrap:wrap;justify-content:flex-end;align-content:flex-end;gap:6px;pointer-events:none}
#quick button{pointer-events:auto}
#quick button,#debug button,#restart2,#undo2,#continue2{font:inherit;background:#132e42;color:#e7f3fa;border:1px solid #3d6379;border-radius:5px;padding:6px 10px;cursor:pointer}
aside{display:flex;flex-direction:column;min-height:0;background:#102130;border-left:1px solid #274556}
#status{padding:8px 14px;font-size:13px;color:#94c3d5;border-bottom:1px solid #274556}
#transcript{flex:1;overflow:auto;padding:10px 14px}
#transcript p{margin:0 0 6px}
#transcript .turn{padding:6px 8px;border-radius:6px;margin-bottom:6px;opacity:.72}
#transcript .turn.latest,#transcript .note.latest{opacity:1;background:#15304a;border-left:3px solid #6fdaea}
#transcript .echo{color:#79bdce;font-size:13px}
#transcript .room{font-weight:700;color:#e7f3fa}
#transcript .event{color:#efbd69}
/* hunger, sleep, sickness and darkness warnings: the same words, set apart from Floyd's asides (round eight) */
#transcript .warning{color:#ffc2b3;font-weight:600;border-left:3px solid #f08a7d;padding-left:8px}
#transcript .death{color:#f08a7d;font-weight:600}
#transcript .note{color:#a8bac7;font-size:13px;padding:6px 8px;border-radius:6px}
#inventory{padding:8px 14px;border-top:1px solid #274556;max-height:32%;overflow:auto}
#inventory h3{margin:0 0 6px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#94c3d5}
#inventory .item{display:block;width:100%;text-align:left;font:inherit;background:none;border:0;color:#dcecf6;padding:4px 6px;cursor:pointer;border-radius:4px}
#inventory .item:hover{background:#1c3a52}
.muted{color:#7f95a3;font-size:13px;margin:0}
#command-row{grid-column:1/-1;display:flex;gap:8px;padding:8px 14px calc(8px + env(safe-area-inset-bottom));background:#0c1a26;border-top:1px solid #274556}
#command{flex:1;font:inherit;background:#07121c;color:#e7f3fa;border:1px solid #3d6379;border-radius:5px;padding:8px 10px}
#menu{position:fixed;z-index:20;background:#132e42;border:1px solid #3d6379;border-radius:6px;padding:6px;min-width:180px;box-shadow:0 8px 24px rgba(0,0,0,.5)}
#menu .title{font-size:12px;color:#94c3d5;padding:4px 8px;text-transform:uppercase;letter-spacing:.06em}
#menu button{display:block;width:100%;text-align:left;font:inherit;background:none;border:0;color:#e7f3fa;padding:7px 10px;border-radius:4px;cursor:pointer}
#menu button:hover{background:#24485d}
#menu .number{display:flex;gap:6px;align-items:center;padding:4px 8px}
#menu .number input{width:84px;font:inherit;background:#0e2434;color:#e7f3fa;border:1px solid #3d6379;border-radius:4px;padding:4px 6px}
#menu .number button{width:auto;padding:5px 8px;border:1px solid #3d6379}
#death{position:absolute;inset:0;display:grid;place-items:center;background:rgba(7,18,28,.85);z-index:10}
#death div{text-align:center}
#death h2{color:#f08a7d;margin:0 0 12px}
#death.won h2{color:#8fd19a}
#death p{color:#e7f3fa;margin:0 0 14px}
#debug{position:absolute;top:44px;left:16px;background:rgba(8,14,20,.92);border:1px solid #274556;border-radius:6px;padding:10px;max-width:360px;font-size:12px;display:none;z-index:8;max-height:calc(100dvh - 60px);overflow:auto}
#debug.open{display:block}
#debug pre{white-space:pre-wrap;word-break:break-all;margin:8px 0 0;color:#a8bac7;max-height:240px;overflow:auto}
#debug select{font:inherit;background:#07121c;color:#e7f3fa;border:1px solid #3d6379;border-radius:5px;padding:4px}
#debug .report-form{display:block;margin:10px 0 0;padding:8px 0 0;border-top:1px solid #274556}
#debug .report-form h3{margin:0 0 4px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#a8bac7}
#debug .report-form .dim{margin:0 0 6px;color:#8ba0b2}
#debug .report-form input:not([type=file]),#debug .report-form textarea{display:block;width:100%;margin:4px 0;font:inherit;padding:4px 6px;background:#07121c;color:#e7f3fa;border:1px solid #3d6379;border-radius:5px}
#debug .report-form textarea{resize:vertical;min-height:3.4rem}
#debug .report-attach{display:flex;align-items:baseline;gap:8px;margin:6px 0 2px}
#debug .report-pick{cursor:pointer;padding:2px 8px;border:1px dashed #3d6379;border-radius:5px}
#debug .report-thumbs{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 2px}
#debug .report-thumbs[hidden]{display:none}
#debug .report-thumb{display:block;width:96px;background:#07121c;border:1px solid #3d6379;border-radius:4px;overflow:hidden}
#debug .report-thumb img{display:block;width:100%;height:64px;object-fit:cover}
#debug .thumb-remove{width:100%;font:inherit;font-size:11px;cursor:pointer;padding:2px;background:#132e42;color:#e7f3fa;border:0;border-top:1px solid #3d6379}
#debug .verdict-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px}
#debug .verdict-status{color:#8ba0b2}
#debug .verdict-status.bad{color:#f08a7d}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #fff}
@media(max-width:900px){body{grid-template-columns:1fr;grid-template-rows:55dvh 1fr auto}aside{border-left:0;border-top:1px solid #274556}}
/* The loading spinner (game.js): the game's emblem (assets/ui/loading-head.png), clipped round, with a ring turning about it. */
#loading{position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;z-index:20;pointer-events:none}
#loading[hidden]{display:none}
#loading img{position:absolute;inset:10px;width:76px;height:76px;border-radius:50%;box-shadow:0 0 18px rgba(0,0,0,.6);animation:pf-bob 1.6s ease-in-out infinite}
#loading .ring{position:absolute;inset:0;border-radius:50%;border:4px solid rgba(121,189,206,.18);border-top-color:#79bdce;border-right-color:#79bdce;animation:pf-spin .9s linear infinite}
@keyframes pf-spin{to{transform:rotate(360deg)}}
@keyframes pf-bob{0%,100%{transform:scale(1)}50%{transform:scale(.94)}}
@media (prefers-reduced-motion:reduce){#loading .ring,#loading img{animation:none}}
/* M4 (ZIL mode): the keypads' number pad, the set-to-value dial, the package papers and the footnote marks. */
.panel{position:fixed;z-index:25;background:#132e42;border:1px solid #3d6379;border-radius:8px;padding:12px;box-shadow:0 10px 30px rgba(0,0,0,.55);color:#e7f3fa}
.panel .title{font-size:12px;color:#94c3d5;text-transform:uppercase;letter-spacing:.06em;margin:0 28px 8px 0}
.panel .close{position:absolute;top:6px;right:8px;font:inherit;font-size:18px;background:none;border:0;color:#94c3d5;cursor:pointer}
.panel button{font:inherit;background:#0e2434;color:#e7f3fa;border:1px solid #3d6379;border-radius:5px;padding:6px 10px;cursor:pointer}
.panel button:hover{background:#24485d}
.panel .row{display:flex;gap:6px;justify-content:space-between;margin-top:8px}
#pad{left:calc(50% - 110px);top:22%;width:220px}
#pad .display{font:600 22px/1.4 ui-monospace,monospace;text-align:right;background:#07121c;border:1px solid #3d6379;border-radius:5px;padding:4px 10px;min-height:1.6em;margin-bottom:8px}
#pad .keys{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
#pad .keys .key:nth-child(10):last-child{grid-column:2}  /* the 0 of a ten-key pad, centred under 7-8-9; a short pad (the Robot Pool 1 2 3, D56) stays one row */
#pad .key{font-size:18px;padding:8px 0}
#dial{left:calc(50% - 150px);top:25%;width:300px}
#dial input[type=range]{width:100%}
#dial input[type=number]{width:110px;font:inherit;background:#07121c;color:#e7f3fa;border:1px solid #3d6379;border-radius:4px;padding:4px 6px}
#dial .scale{font-size:12px;color:#94c3d5}
#papers{left:5%;top:5%;right:calc(400px + 2%);bottom:8%;display:grid;grid-template-columns:220px 1fr;grid-template-rows:auto 1fr;gap:8px}
#papers .title{grid-column:1/-1}
#papers .list{display:flex;flex-direction:column;gap:4px;overflow:auto}
#papers .list button{text-align:left}
#papers .list button.on{border-color:#6fdaea;background:#1c3a52}
#papers .view{overflow:auto;background:#07121c;border-radius:6px}
#papers .view img{max-width:100%;display:block;margin:0 auto}
#papers .view.fit{overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:0}
#papers .view.fit img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
#transcript .footnote{font:inherit;background:none;border:0;border-bottom:1px dotted #79bdce;color:#79bdce;padding:0;cursor:pointer}
@media(max-width:900px){#papers{left:2%;right:2%;grid-template-columns:1fr;grid-template-rows:auto auto 1fr}}

/* ------------------------------------------------------------------------------------------------------------------
   THE PHONE SHELL (ported from the Planetfall port's Option B, 2026-10-19; MOBILE-PLAY-ENABLEMENT.md section 6).
   ONE THING OWNS THE SCREEN AT A TIME: the painting fills it, the log is a drawer at the bottom with the inventory,
   the actions and the typed command as tabs beside it, and the compass sits under the thumb. Everything here hangs
   off body.phone-shell, which ui.js sets from (max-width:760px) or a coarse pointer in landscape -- a phone turned
   sideways is still a phone, and a width query alone hands it the desktop.

   NOTHING IS MOVED IN THE DOM, only re-laid out: the drawer's grip, tabs and Here panel are flat siblings of the
   status, the transcript and the inventory, so the desktop column is the same three boxes it always was with the
   rest display:none -- and the quick row and the command line, both already positioned elements, are re-placed into
   the drawer's panel region rather than reparented. That is what keeps the desktop screenshots identical and the
   browser harness's selectors pointing at the same things.
   ------------------------------------------------------------------------------------------------------------------ */
#drawer-handle,#tabs,#here,#hud-more{display:none}
#scrim{position:fixed;inset:0;z-index:15;background:rgba(3,8,12,.55)}
body.phone-shell{grid-template-columns:1fr;grid-template-rows:1fr}
body.phone-shell #view{grid-area:1/1}
/* THE DRAWER'S GEOMETRY IN TWO NUMBERS, so the parts cannot drift apart: --panel is the band at the bottom of the
   screen that whichever panel is showing occupies, --chrome is the grip, the status line and the tabs above it.
   The compass is placed off the same sum, and the quick row and the command line -- fixed elements standing in for
   panels -- are given the same band. Declared, because left to itself the transcript sizes the drawer from how much
   the player has read: on the earlier port that came out 526 px of an 844-px screen, swallowed the lower half of the
   painting with every object drawn in it, and the grip could not change it. */
body.phone-shell{--panel:22dvh;--chrome:110px}
body.phone-shell.drawer-open{--panel:56dvh}
/* The drawer. Its last child is the panel, so the panel is the bottom --panel of the screen -- which is what lets the
   quick row and the command line be placed into the same band with bottom:0 and the same height. */
body.phone-shell aside{position:fixed;left:0;right:0;bottom:0;height:calc(var(--panel) + var(--chrome));z-index:30;border-left:0;border-top:1px solid #274556;background:#0d1d2b;box-shadow:0 -8px 24px rgba(0,0,0,.45)}
/* THE GRIP, THE STATUS AND THE TABS DO NOT FLEX. They are flex items in a drawer of declared height, so they are
   shrinkable by default -- and once the transcript has a few turns in it, the tabs row is squeezed under its own
   buttons and the transcript, a later sibling, paints straight over them: the tabs still measure 44 px and have
   stopped answering a tap. Nothing on the desktop, whose aside has no height to divide. */
body.phone-shell #drawer-handle,body.phone-shell #status,body.phone-shell #tabs{flex:0 0 auto}
body.phone-shell #drawer-handle{display:block;width:100%;height:30px;padding:0;border:0;background:none;cursor:pointer}
body.phone-shell #drawer-handle::before{content:"";display:block;width:44px;height:4px;margin:13px auto;border-radius:2px;background:#3d6379}
body.phone-shell #status{padding:0 14px 6px;border-bottom:0}
body.phone-shell #tabs{display:flex;gap:6px;padding:0 10px 8px;overflow-x:auto;scrollbar-width:none}
body.phone-shell #tabs button{flex:0 0 auto;min-height:44px;padding:0 15px;font:inherit;background:#132e42;color:#cfe6f2;border:1px solid #3d6379;border-radius:22px;cursor:pointer}
body.phone-shell #tabs button.on{background:#24485d;color:#fff;border-color:#6fdaea}
/* One panel on screen, and the drawer has two heights: a glance and a read. */
body.phone-shell #transcript,body.phone-shell #here,body.phone-shell #inventory,body.phone-shell #quick{display:none;flex:1 1 auto;min-height:0;height:auto;max-height:none;border-top:1px solid #1c3447;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
body.phone-shell.tab-log #transcript,body.phone-shell.tab-here #here,body.phone-shell.tab-carrying #inventory{display:block;overflow:auto}
body.phone-shell #here{padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
body.phone-shell #here h3{margin:8px 0 6px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#94c3d5}
body.phone-shell #here .row{display:block;width:100%;min-height:48px;text-align:left;font:inherit;background:#102a3c;color:#e7f3fa;border:1px solid #27465b;border-radius:8px;padding:12px;margin-bottom:6px;cursor:pointer}
body.phone-shell #here .row .where{color:#94c3d5}
body.phone-shell #inventory{border-top:1px solid #1c3447}
body.phone-shell #inventory h3{display:none}
body.phone-shell #inventory .item{min-height:48px;padding:12px 10px}
/* THE QUICK ROW IS THE ACTIONS PANEL. On the desktop it is an overlay on the view that wraps upward; at phone width
   its left edge (calc(32px + 17em)) leaves it 90 px of a 390-px screen, so a dozen entries stack into a column up the
   painting. Here it is the drawer's panel, wrapping across the full width. */
body.phone-shell #quick{position:fixed;inset:auto 0 0;left:0;height:var(--panel);flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;gap:8px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));overflow:auto;background:#0d1d2b;pointer-events:auto;z-index:31}
body.phone-shell.tab-actions #quick{display:flex}
body.phone-shell #quick button{min-height:44px;padding:0 15px}
body.phone-shell #command-row{display:none;position:fixed;inset:auto 0 0;height:var(--panel);align-items:flex-start;z-index:31;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
body.phone-shell.tab-type #command-row{display:flex}
body.phone-shell #command{font-size:16px}   /* under 16 px, iOS zooms the whole page when the field takes focus */
/* THE COMPASS UNDER THE THUMB, keeping its fixed slots: every direction holds one place for the whole game (see the
   rose's note above), now at 44 px a cell and in the bottom-right corner, where a thumb is. It stands clear of the
   drawer's shut height, and goes away while the drawer is open -- the player is reading, not walking. */
body.phone-shell #compass{left:auto;right:calc(12px + env(safe-area-inset-right));bottom:calc(var(--panel) + var(--chrome) + 10px);gap:4px}
body.phone-shell.drawer-open #compass{display:none}
body.phone-shell #compass .rose,body.phone-shell #compass .vert{gap:5px}
/* 44 px is the FLOOR, not the width. The earlier port's rose was letters -- N, SE, Up -- and a square cell fitted
   them; this station names a ship's exits in words, and "Starboard" at a fixed 44 px spilled out of its button
   and across its neighbours. The cell grows to its word and the grid's auto columns keep every direction in its
   own place, which is the property the rose exists for. */
body.phone-shell #compass .dir,body.phone-shell #compass .slot{min-width:44px;width:auto;height:44px;padding:0 8px;white-space:nowrap}
body.phone-shell #compass .dir{font-weight:600;background:rgba(19,46,66,.92)}
/* The HUD: no hover readout to show, and the row of 13-px links becomes one 44-px button (ui.js hudMenu). */
body.phone-shell #hud{top:calc(10px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left));right:calc(12px + env(safe-area-inset-right));align-items:flex-start}
body.phone-shell #hover,body.phone-shell #hud .links{display:none}
body.phone-shell #hud-more{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;pointer-events:auto;font:inherit;line-height:1;background:rgba(8,14,20,.72);color:#cfe6f2;border:1px solid #3d6379;border-radius:22px;cursor:pointer}
/* A MENU IS A SHEET, not a popover at the fingertip: a popover opens under the hand that asked for it. Same items,
   same code path (ui.js showMenu stops placing it by coordinates when the shell is on). */
#menu.sheet{left:0;right:0;bottom:0;top:auto;width:100%;max-height:72dvh;overflow:auto;border-radius:14px 14px 0 0;padding:10px 10px calc(14px + env(safe-area-inset-bottom));z-index:40}
#menu.sheet .title{font-size:13px;padding:6px 12px 10px}
#menu.sheet button{min-height:48px;padding:12px;font-size:16px}
#menu.sheet .number{padding:8px 12px}
#menu.sheet .number input{font-size:16px;padding:10px;width:110px}
#menu.sheet .number button{min-height:44px}
body.phone-shell #papers{left:2%;right:2%;top:4%;bottom:4%}
body.phone-shell #death div{padding:0 16px}
body.phone-shell #death button,body.phone-shell #restart2{min-height:48px;padding:12px 18px}