:root {
  font-family: "Arial Narrow", "Roboto Condensed", "Liberation Sans Narrow", Arial, sans-serif;
  color: #f2eee0; background: #14201e; font-synthesis: none;
  --gold: #edc56f; --ink: #122420; --muted: #b5c4bb; --line: #c3d4bc38;
  --glass: #10231fe0;
}
* { box-sizing: border-box; }
body { margin: 0; overflow: hidden; touch-action: none; }
button, select, input { font: inherit; }
button { color: inherit; cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; opacity: .42; }
button:focus-visible, summary:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid #fff0bd; outline-offset: 4px; }
button, summary, select, input { -webkit-tap-highlight-color: transparent; }
#game { display: block; width: 100vw; height: 100vh; height: 100dvh; }
#game:focus { outline: none; }
#vignette { position: fixed; inset: 0; pointer-events: none; box-shadow: inset 0 0 100px #0b171b44; background: linear-gradient(#08121025, transparent 27%, transparent 75%, #0812103b); }
.hidden { display: none !important; }
[hidden] { display: none !important; }

/* A small patient chart leaves the hospital in view. */
#hud { position: absolute; top: max(22px, env(safe-area-inset-top)); left: max(24px, env(safe-area-inset-left)); right: max(24px, env(safe-area-inset-right)); display: flex; align-items: flex-start; gap: 28px; pointer-events: none; text-shadow: 0 2px 6px #0009; }
.identity { display: flex; align-items: center; gap: 12px; min-width: 230px; padding: 3px 0; }
#portrait { width: 62px; height: 62px; flex: none; border: 1px solid #e9cb8699; border-radius: 50%; padding: 3px; background: #1f322c; box-shadow: 0 3px 15px #0006; }
.vitals strong { display: block; margin: 0 0 7px; font-size: 17px; font-weight: 700; letter-spacing: .1px; }
.inventory { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #e5dfc6; white-space: nowrap; }
.inventory b { color: #ffdfa0; font-size: 15px; font-variant-numeric: tabular-nums; }
.inventoryName { margin-left: 3px; }
.capacity { opacity: .65; font-size: 10px; }
.poopicon { display: inline-block; position: relative; width: 16px; height: 7px; border-radius: 50%; background: linear-gradient(#cab27b, #786144); margin: 5px 5px 0 0; box-shadow: 0 1px 2px #000; }
.poopicon:before, .poopicon:after { content: ""; position: absolute; bottom: 3px; left: 3px; width: 11px; height: 6px; border-radius: 50%; background: inherit; }
.poopicon:after { bottom: 7px; left: 6px; width: 6px; height: 6px; border-radius: 80% 15% 50% 50%; }
.score { display: flex; align-items: baseline; gap: 7px; margin-top: 5px; font-variant-numeric: tabular-nums; }
.score small { color: #aebcaf; font-size: 8px; letter-spacing: 1.5px; }
.score b { color: #e9d49e; font-size: 13px; font-weight: 600; }
.mission { width: min(440px, 40vw); margin-left: auto; margin-right: 205px; padding: 11px 16px 12px; border-left: 2px solid var(--gold); background: linear-gradient(90deg, var(--glass), #10231fa8); box-shadow: 0 6px 25px #001a131a; }
#chapter { display: block; color: var(--gold); font-size: 9px; font-weight: 700; letter-spacing: 2px; margin-bottom: 7px; }
#objective { display: block; font-size: 16px; line-height: 1.25; font-weight: 700; letter-spacing: .2px; }
#route { margin-top: 7px; font-size: 12px; line-height: 1.4; color: #c9d5c9; }
#rounds { display: inline-block; font-size: 10px; color: var(--gold); margin-top: 8px; letter-spacing: .8px; }
#deadline { color: #ffe0a0; background: #81602c40; border-top: 1px solid #e8c46c4d; padding: 9px 0 0; margin-top: 10px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .8px; }
#deadline.urgent { color: #ffd0c1; border-color: #ff9579; background: linear-gradient(90deg, #873e334a, transparent); }
#status { position: absolute; top: 100px; left: 0; width: 214px; padding: 0 3px; }
.awareness>div:first-child { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: 1.1px; }
#alertnum { color: #d0dbcf; font-variant-numeric: tabular-nums; }
.bar { height: 3px; margin-top: 7px; overflow: hidden; background: #bfd3bf30; }
.bar i { height: 100%; width: 0; display: block; background: var(--gold); transition: width .1s; }
#stance, #cover { font-size: 9px; line-height: 1.4; color: #c0cebf; margin-top: 7px; }
#cover { color: var(--gold); }
#cover:empty { display: none; }
.topbuttons { position: absolute; right: max(24px, env(safe-area-inset-right)); top: max(24px, env(safe-area-inset-top)); display: flex; gap: 6px; }
.topbuttons button { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #ccd6b947; border-radius: 3px; background: #10221ec9; font-size: 17px; box-shadow: 0 2px 8px #0002; }
.topbuttons button:hover { background: #304337; border-color: #e3d9aa; }
.topbuttons #mapToggle { font-size: 9px; letter-spacing: .5px; }
.topbuttons #mapToggle[aria-expanded="true"] { border-color: var(--gold); color: var(--gold); }
.topbuttons #pause { font-size: 0; }
.topbuttons #pause:after { content: ''; width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
#mapWrap { position: absolute; left: max(24px, env(safe-area-inset-left)); bottom: max(26px, env(safe-area-inset-bottom)); width: 148px; pointer-events: none; text-shadow: 0 2px 5px #000; }
.mapHeader { display: flex; justify-content: center; margin-bottom: 9px; font-size: 8px; letter-spacing: 2px; color: #d0d7c0; }
.mapHeader small { display: none; }
.mapDisc { position: relative; width: 148px; height: 148px; border: 1px solid #d4d9bb80; border-radius: 50%; padding: 5px; background: #12251dbd; box-shadow: 0 8px 25px #0003; }
#map { width: 100%; height: 100%; display: block; border-radius: 50%; }
.north { position: absolute; top: -7px; left: calc(50% - 6px); color: #f3e4b7; background: #23362bc9; font-size: 10px; padding: 0 3px; }
#mapLocation { display: block; margin-top: 12px; text-align: center; font-size: 9px; line-height: 1.35; letter-spacing: .5px; }
body.map-hidden #mapWrap { display: none; }
.area { position: absolute; left: 50%; bottom: 27px; transform: translateX(-50%); text-align: center; pointer-events: none; text-shadow: 0 2px 6px #000; }
.area>span { display: block; font-size: 8px; letter-spacing: 2.5px; color: #c5ceb8; margin-bottom: 6px; }
.area strong { font-size: 11px; font-weight: 500; letter-spacing: .8px; }
#desktopControls { position: absolute; bottom: 26px; right: 24px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px 14px; max-width: 325px; font-size: 11px; text-shadow: 0 2px 6px #000; }
kbd { font-family: inherit; display: inline-block; min-width: 21px; text-align: center; padding: 3px 5px; margin-right: 3px; background: #10251fc9; border: 1px solid #d6d9bd6e; border-radius: 3px; font-size: 9px; }
#desktopControls small { color: #c0c9b8; font-size: 9px; }
#toast { position: absolute; top: 26%; left: 50%; transform: translateX(-50%); width: min(84vw, 560px); text-align: center; color: #ffe4a4; font-size: 21px; line-height: 1.35; font-weight: 700; text-shadow: 0 3px 10px #000; opacity: 0; transition: opacity .25s; pointer-events: none; }
#toast.show { opacity: 1; }
#caption { position: absolute; left: 50%; bottom: 85px; transform: translateX(-50%); width: max-content; max-width: min(64vw, 630px); padding: 9px 15px; border-left: 2px solid #e8c46c77; background: #11251fdb; color: #ece9d8; font-size: 15px; line-height: 1.45; text-align: center; text-shadow: 0 2px 3px #0006; pointer-events: none; }
#caption:empty { display: none; }
#prompt { position: absolute; left: 50%; bottom: 147px; transform: translateX(-50%); display: none; width: max-content; max-width: min(85vw, 600px); padding: 12px 19px; background: #e7c67e; color: #182920; border: 1px solid #ffdfa4; border-radius: 3px; font-size: 14px; font-weight: 700; text-align: center; box-shadow: 0 5px 24px #0005; pointer-events: none; }
#touch { display: none; }

/* Hospital paperwork, left open over the scene. */
.screen { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; padding: 5vh 7vw; overflow-y: auto; touch-action: pan-y; background: linear-gradient(90deg, #10231ff5, #10231fe0 34%, #10231f54 66%, #10231f05); }
#screen { display: block; }
.intro { position: relative; width: min(100%, 560px); min-height: min(660px, 85vh); padding: 12px 0 30px; }
.eyebrow { display: flex; align-items: center; gap: 11px; margin: 0 0 37px; font-size: 11px; letter-spacing: 2.5px; color: #dee3cd; }
.eyebrow>span { margin-left: 9px; color: #93a99c; font-size: 8px; letter-spacing: 1px; }
.hospitalCross { position: relative; width: 18px; height: 18px; margin-right: 2px; }
.hospitalCross:before, .hospitalCross:after { position: absolute; content: ''; background: #d9d2ae; }
.hospitalCross:before { width: 6px; height: 18px; left: 6px; }
.hospitalCross:after { width: 18px; height: 6px; top: 6px; }
.caseNumber { color: var(--gold); font-size: 8px; letter-spacing: 2.5px; margin-bottom: 14px; }
h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(65px, 7.5vw, 112px); font-weight: 800; line-height: .83; letter-spacing: -5px; color: #f1e7ca; margin: 0 0 30px; text-shadow: 0 4px 25px #00171055; }
h1>span { display: block; font-family: "Arial Narrow", "Roboto Condensed", "Liberation Sans Narrow", Arial, sans-serif; color: var(--gold); font-size: .57em; letter-spacing: 6px; line-height: 1.13; margin-top: 12px; font-weight: 700; }
.storyTitle { font-family: Georgia, "Times New Roman", serif; font-size: 24px; font-style: italic; color: #eee9d5; }
.intro>p { font-size: 15px; color: #c5d1c4; line-height: 1.7; margin: 13px 0 0; }
.brief { display: flex; gap: 25px; width: fit-content; padding: 20px 0; margin: 23px 0 4px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.brief>span { color: var(--gold); font-size: 9px; letter-spacing: 1px; }
.brief b { display: block; color: #e2e6d5; margin-top: 7px; font-size: 11px; font-weight: 500; letter-spacing: .2px; }
#assetProgress { min-height: 20px; margin: 11px 0 8px; font-size: 10px; color: #a4baaa; letter-spacing: .3px; }
.introActions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.primary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-width: 245px; min-height: 52px; padding: 17px 22px; border: 1px solid #fae0a3; border-radius: 2px; background: #e5c178; color: #1b2d23; font-size: 11px; font-weight: 800; letter-spacing: 1.1px; box-shadow: 0 5px 20px #00170d33; }
.primary:hover { background: #ffe0a0; }
.primary>span { font-size: 19px; line-height: 1; }
.textButton { border: none; background: transparent; padding: 13px 0; color: #d4dfcc; font-size: 11px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #bcccaa66; }
.intro>.hint { font-size: 11px; line-height: 1.7; color: #aabfae; margin-top: 17px; }
.introStamp { position: absolute; right: 7vw; top: 15%; transform: rotate(9deg); padding: 12px 15px 10px; border: 3px double #e0ca8f7d; color: #e7d29a9c; font-size: 22px; letter-spacing: 4px; font-weight: 700; opacity: .75; pointer-events: none; }
.introStamp>span { display: block; margin-top: 4px; font-size: 8px; letter-spacing: 3px; text-align: center; }
.edition { display: flex; justify-content: space-between; gap: 20px; margin-top: 20px; font-size: 8px; letter-spacing: 2px; color: #95ac9f; }
#whatsnew { width: min(440px, 100%); margin-top: 23px; color: #b4c5b8; font-size: 11px; }
#whatsnew>summary { color: #a9bfaf; font-size: 10px; padding: 8px 0; letter-spacing: .5px; }
#whatsnew>small { display: block; font-size: 8px; letter-spacing: 2px; color: var(--gold); margin-top: 10px; }
#whatsnew h3 { font-size: 13px; font-weight: 600; margin: 8px 0; }
#whatsnew ul { padding-left: 17px; margin: 0; font-size: 11px; line-height: 1.7; }
summary { cursor: pointer; }
body:not(.playing) { touch-action: pan-y; }
body.playing #screen { display: none; }
body:not(.playing) #hud, body:not(.playing) #mapWrap, body:not(.playing) #desktopControls, body:not(.playing) #touch, body:not(.playing) .area, body:not(.playing) .topbuttons { visibility: hidden; }
body.ended #hud, body.ended #mapWrap, body.ended #desktopControls, body.ended #touch, body.ended .area, body.ended .topbuttons, body.ended #toast, body.ended #caption { visibility: hidden; }

/* Menus are one scrolling sheet, including small landscape phones. */
#pauseScreen, #ending, #result { background: linear-gradient(110deg, #10231ff7, #10231fe8); padding-top: 35px; padding-bottom: 35px; }
#pauseScreen { z-index: 15; background: radial-gradient(ellipse at top, #1b342b, #10231f 75%); }
.pausebox, .resultbox { width: min(100%, 540px); margin: auto; }
.pausebox>small, .resultbox>small { color: var(--gold); font-size: 10px; letter-spacing: 1.8px; }
h2 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(36px, 5vw, 65px); font-weight: 500; letter-spacing: -2px; line-height: 1.04; margin: 20px 0; }
.pausebox>p, .resultbox>p { color: #c5d3c6; font-size: 15px; line-height: 1.65; }
.controlDetails, .graphics-details { margin: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.controlDetails summary, .graphics-details summary { color: #efe5c7; padding: 15px 0; font-size: 13px; }
.pausecontrols { display: grid; grid-template-columns: 108px 1fr; gap: 11px 15px; margin: 3px 0 20px; font-size: 12px; line-height: 1.5; }
.pausecontrols b { color: #e6c880; font-weight: 600; }
.pausecontrols span { color: #bacdbd; }
.pauseActions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; align-items: center; }
.menuUtilities { display: flex; gap: 10px; }
.secondary { min-height: 44px; border: 1px solid #bdcdae55; border-radius: 2px; background: transparent; padding: 12px 17px; font-size: 12px; }
.secondary:hover { background: #c9d4b916; }
.graphics-grid { display: grid; grid-template-columns: 1fr; gap: 14px 20px; padding: 5px 0 15px; }
.graphics-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 14px; font-size: 12px; color: #c8d6c8; }
.graphics-row select, .graphics-grid select { background: #1d342c; color: #f0e9d7; border: 1px solid #becbad45; border-radius: 3px; padding: 9px; min-height: 40px; width: 100%; }
.graphics-scale input { accent-color: var(--gold); width: 100%; min-height: 26px; }
.graphics-effects { display: flex; flex-wrap: wrap; gap: 12px 20px; border: none; border-top: 1px solid var(--line); padding: 16px 0 0; margin: 0; font-size: 12px; }
.graphics-effects legend { padding: 0 8px 0 0; color: #9eb7a5; font-size: 10px; letter-spacing: .6px; }
.graphics-effects label, label.checkbox { display: flex; align-items: center; gap: 6px; min-height: 28px; }
.graphics-effects input { accent-color: var(--gold); width: 17px; height: 17px; }
.graphics-readout { font-size: 11px; color: #ead29c; font-variant-numeric: tabular-nums; line-height: 1.6; }
.graphics-note { font-size: 10px; line-height: 1.6; color: #9fb8a7; }
.graphics-reload { margin: 0 0 15px; }
#endingrank { color: var(--gold); font-style: italic; margin: 0 0 12px; }
#endingstory { margin: 0 0 25px; }
.endingtotal { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.endingtotal>span { font-size: 10px; letter-spacing: 2px; }
.endingtotal strong { color: var(--gold); font-size: 42px; font-weight: 500; font-variant-numeric: tabular-nums; }
#endingbreakdown { display: grid; grid-template-columns: 1fr auto; gap: 10px 24px; margin: 20px 0 28px; font-size: 13px; }
#endingbreakdown>div { display: contents; }
#endingbreakdown dt { color: #bfcfbd; }
#endingbreakdown dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

@media (pointer: coarse) {
  #desktopControls { display: none; }
  #touch { display: block; }
  .pad { position: absolute; bottom: max(24px, env(safe-area-inset-bottom)); width: 110px; height: 110px; border: 1px solid #e1e9d480; border-radius: 50%; background: #15352870; touch-action: none; box-shadow: 0 4px 18px #0003; }
  .pad:before { content: ''; position: absolute; inset: 24px; border: 1px solid #d6e0cc32; border-radius: 50%; }
  .pad i { position: absolute; left: 35px; top: 35px; width: 40px; height: 40px; background: #c8d9c27d; border: 1px solid #edf0d99e; border-radius: 50%; pointer-events: none; box-shadow: 0 1px 8px #0004; }
  .padlabel { position: absolute; top: -18px; width: 100%; text-align: center; color: #bbd0bd; font-size: 8px; letter-spacing: 2px; pointer-events: none; }
  #movePad { left: max(20px, env(safe-area-inset-left)); }
  #run { position: absolute; left: max(47px, calc(env(safe-area-inset-left) + 27px)); bottom: max(158px, calc(env(safe-area-inset-bottom) + 134px)); width: 56px; min-height: 42px; border: 1px solid #c2d3b960; border-radius: 4px; background: #153126c9; color: #e0e6d1; font-size: 10px; font-weight: 700; letter-spacing: 1px; }
  #run[aria-pressed="true"], #run.active { background: var(--gold); color: var(--ink); border-color: #ffe9b7; }
  .touchActions { position: absolute; right: max(17px, env(safe-area-inset-right)); bottom: max(25px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: 64px 82px; grid-template-rows: 44px 57px; gap: 8px; }
  .touchActions button { display: grid; place-items: center; padding: 5px; min-height: 44px; border: 1px solid #d0d9c167; border-radius: 4px; background: #153126c9; font-size: 10px; line-height: 1.2; font-weight: 700; box-shadow: 0 3px 10px #0003; }
  #crouch { grid-column: 1; grid-row: 1; }
  #plant { grid-column: 1; grid-row: 2; color: #ead296; border-color: #ddbd726b; }
  #interact { grid-column: 2; grid-row: 1 / 3; background: var(--gold); color: var(--ink); border-color: #ffdfa0; font-size: 11px; }
  #interact.available { box-shadow: 0 0 20px #eac17030, 0 3px 12px #0004; }
  #interact:not(.available) { background: #153126b8; color: #c1d1bc; border-color: #c0d1b654; box-shadow: none; }
  #interact:active { filter: brightness(1.15); }
  #mapWrap { left: max(18px, env(safe-area-inset-left)); bottom: max(225px, calc(env(safe-area-inset-bottom) + 205px)); width: 120px; padding: 10px; background: #12251de8; border: 1px solid #c4d2b43d; border-radius: 3px; }
  .mapDisc { width: 98px; height: 98px; }
  .mapHeader { margin-bottom: 8px; font-size: 7px; }
  #mapLocation { font-size: 8px; margin-top: 9px; }
  #prompt { bottom: max(154px, calc(env(safe-area-inset-bottom) + 134px)); left: auto; right: max(17px, env(safe-area-inset-right)); transform: none; max-width: min(320px, calc(100vw - 145px)); font-size: 11px; padding: 10px 12px; }
  #caption { bottom: max(218px, calc(env(safe-area-inset-bottom) + 198px)); font-size: 12px; max-width: min(65vw, 500px); }
  .area { display: none; }
}

@media (max-width: 800px) {
  .mission { margin-right: 0; width: min(440px, 53vw); }
  .topbuttons { top: 190px; }
  .identity { min-width: 190px; }
  .vitals strong { font-size: 15px; }
  #portrait { width: 52px; height: 52px; }
  .introStamp { display: none; }
  .screen { padding-left: 7vw; padding-right: 7vw; }
}

@media (max-width: 600px) {
  #hud { top: max(12px, env(safe-area-inset-top)); left: max(11px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px 12px; }
  .identity { grid-column: 1; grid-row: 1; display: block; min-width: 0; width: 44px; padding: 0; }
  #portrait { width: 44px; height: 44px; padding: 2px; }
  .vitals { position: absolute; top: 50px; left: 0; width: 44px; text-align: center; }
  .vitals strong { display: none; }
  .inventory { display: flex; flex-direction: column; gap: 0; line-height: 1.1; font-size: 9px; }
  .inventory b { font-size: 20px; }
  .capacity { font-size: 9px; }
  .inventoryName { margin: 3px 0 0; color: #c8d4c1; font-size: 7px; }
  .poopicon { display: none; }
  .score { display: none; }
  body.details-open .score { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 10px; }
  .mission { grid-column: 2; grid-row: 1; width: 100%; margin: 0; padding: 9px 11px 10px; }
  #chapter { font-size: 8px; letter-spacing: 1.5px; margin-bottom: 5px; }
  #objective { font-size: 12px; line-height: 1.3; }
  #route { font-size: 10px; line-height: 1.4; margin-top: 5px; }
  #rounds { font-size: 8px; letter-spacing: .5px; margin-top: 7px; }
  #deadline { font-size: 11px; padding-top: 7px; margin-top: 8px; letter-spacing: .3px; }
  #status { position: static; grid-column: 2; grid-row: 2; width: auto; padding: 0 3px; }
  .awareness>div:first-child { font-size: 8px; letter-spacing: .8px; }
  .bar { margin-top: 5px; }
  #stance { display: none; font-size: 8px; }
  body.details-open #stance { display: block; }
  #cover { font-size: 8px; margin-top: 5px; }
  .topbuttons { left: max(15px, env(safe-area-inset-left)); right: auto; top: max(125px, calc(env(safe-area-inset-top) + 113px)); flex-direction: column; gap: 7px; }
  .topbuttons button { width: 36px; height: 36px; }
  .topbuttons .secondaryUtility { display: none; }
  body.details-open .topbuttons { top: max(150px, calc(env(safe-area-inset-top) + 138px)); }
  #toast { top: 34%; font-size: 16px; }
  #caption { left: auto; right: 13px; transform: none; max-width: calc(100vw - 158px); }
  #desktopControls, .area { display: none; }
  .screen { padding: 26px 7vw; }
  .intro { min-height: 0; padding: 8px 0 14px; }
  .eyebrow { font-size: 9px; letter-spacing: 1.7px; gap: 8px; margin-bottom: 32px; }
  .eyebrow>span { font-size: 7px; margin-left: 4px; }
  .caseNumber { font-size: 7px; letter-spacing: 2px; }
  h1 { font-size: clamp(69px, 20vw, 100px); letter-spacing: -3px; margin-bottom: 25px; }
  h1>span { letter-spacing: 4px; }
  .storyTitle { font-size: 22px; }
  .intro>p { font-size: 13px; }
  .brief { gap: 18px; margin-top: 22px; padding: 16px 0; width: 100%; }
  .brief b { font-size: 10px; }
  .brief>span { font-size: 8px; }
  .introActions { gap: 6px 16px; }
  .primary { min-width: 240px; }
  .intro>.hint { font-size: 10px; margin-top: 10px; }
  .edition { font-size: 7px; letter-spacing: 1px; line-height: 1.5; }
  .edition>span { max-width: 110px; text-align: right; }
  #ending, #result, #pauseScreen { padding: 28px 7vw; }
  h2 { font-size: 43px; }
  .pausebox>p, .resultbox>p { font-size: 13px; }
  .pausecontrols { grid-template-columns: 86px 1fr; gap: 10px; font-size: 11px; }
  .graphics-grid { gap: 14px 12px; }
  .graphics-row { grid-template-columns: 1fr; gap: 7px; font-size: 11px; }
  .endingtotal strong { font-size: 36px; }
}

@media (max-width: 370px) and (pointer: coarse) {
  #movePad { left: 12px; width: 100px; height: 100px; }
  #movePad i { left: 30px; top: 30px; }
  #run { left: 34px; bottom: max(146px, calc(env(safe-area-inset-bottom) + 122px)); }
  .touchActions { right: 10px; grid-template-columns: 59px 75px; gap: 6px; }
  .brief { gap: 14px; }
}

@media (max-height: 540px) {
  .screen { padding-top: 22px; padding-bottom: 22px; }
  .intro { min-height: 0; padding-top: 0; width: min(570px, 100%); }
  .eyebrow { margin-bottom: 18px; }
  .caseNumber { margin-bottom: 10px; }
  h1 { font-size: 64px; margin-bottom: 15px; }
  h1>span { font-size: .48em; margin-top: 7px; }
  .storyTitle { font-size: 19px; }
  .intro>p { font-size: 12px; line-height: 1.6; margin-top: 9px; }
  .brief { margin-top: 17px; padding: 12px 0; }
  .intro>.hint { font-size: 10px; }
  .edition { margin-top: 14px; }
  .introStamp { display: none; }
  #pauseScreen, #ending, #result { align-items: flex-start; }
  .pausebox h2 { font-size: 35px; margin: 12px 0; }
}

@media (pointer: coarse) and (max-height: 540px) {
  #hud { top: max(10px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); right: max(15px, env(safe-area-inset-right)); display: grid; grid-template-columns: 46px minmax(0, 370px); gap: 7px 12px; }
  .identity { grid-column: 1; grid-row: 1; display: block; min-width: 0; width: 46px; padding: 0; }
  #portrait { width: 42px; height: 42px; padding: 2px; }
  .vitals { position: absolute; top: 47px; left: 0; width: 44px; text-align: center; }
  .vitals strong, .poopicon, .score { display: none; }
  .inventory { display: flex; flex-direction: column; font-size: 8px; gap: 0; }
  .inventory b { font-size: 18px; }
  .inventoryName { font-size: 7px; margin: 2px 0 0; }
  .mission { grid-column: 2; grid-row: 1; width: 100%; margin: 0; padding: 7px 10px; }
  #chapter { font-size: 7px; margin-bottom: 4px; }
  #objective { font-size: 11px; }
  #route, #rounds { display: inline-block; font-size: 9px; margin: 5px 8px 0 0; }
  #deadline { font-size: 11px; padding-top: 6px; margin-top: 7px; }
  #status { position: static; grid-column: 2; grid-row: 2; width: min(250px, 100%); padding: 0; }
  .awareness>div:first-child { font-size: 8px; }
  .bar { margin-top: 4px; }
  #stance { display: none; }
  #cover { font-size: 8px; margin-top: 4px; }
  .topbuttons, body.details-open .topbuttons { left: auto; right: max(13px, env(safe-area-inset-right)); top: max(10px, env(safe-area-inset-top)); flex-direction: row; }
  .topbuttons button { width: 36px; height: 36px; }
  .topbuttons .secondaryUtility { display: none; }
  #movePad { width: 88px; height: 88px; bottom: max(17px, env(safe-area-inset-bottom)); left: max(20px, env(safe-area-inset-left)); }
  .pad:before { inset: 18px; }
  #movePad i { left: 24px; top: 24px; }
  #run { left: max(120px, calc(env(safe-area-inset-left) + 100px)); bottom: max(29px, calc(env(safe-area-inset-bottom) + 12px)); width: 48px; min-height: 44px; }
  .touchActions { bottom: max(17px, env(safe-area-inset-bottom)); grid-template-columns: 61px 78px; grid-template-rows: 40px 48px; gap: 6px; }
  .touchActions button { min-height: 40px; }
  #mapWrap { left: max(18px, env(safe-area-inset-left)); bottom: max(126px, calc(env(safe-area-inset-bottom) + 109px)); width: 100px; padding: 8px; }
  .mapDisc { width: 82px; height: 82px; }
  .mapHeader, #mapLocation { display: none; }
  #prompt { bottom: 120px; right: 19px; max-width: min(365px, calc(100vw - 180px)); padding: 8px 10px; font-size: 10px; }
  #caption { bottom: 30px; left: 50%; right: auto; transform: translateX(-50%); max-width: calc(100vw - 365px); min-width: 190px; font-size: 11px; padding: 6px 10px; }
  #toast { top: 40%; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .bar i, #toast { transition: none; }
}