/* MDT TITANIC - the MDT look (near-black glass, gold for the main
   actions) with an Edwardian serif for titles; brass and ivory accents */
:root {
  --ink: #f4efe4; --mute: #aab0b8; --faint: #6a7078; --bg: #04060a; --glass: rgba(8, 11, 16, 0.88); --glass2: rgba(20, 24, 30, 0.8);
  --line: rgba(220, 230, 255, 0.1); --line2: rgba(220, 230, 255, 0.2);
  --gold: #e8c26a; --gold2: #ffdc90; --goldInk: #2a1c04; --acc: #d8b26a; --ice: #bfe3f2; --good: #46e39a; --bad: #ff6a6a; --warn: #ffb15a;
  --font: Inter, -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif; --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font: 15px/1.45 var(--font); }
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input { -webkit-user-select: text; user-select: text; }
#game { position: fixed; inset: 0; }
#game canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.hidden { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
svg { flex: none; }
#buildTag { position: fixed; right: 6px; bottom: calc(4px + var(--safe-b)); font: 10px system-ui, sans-serif; color: rgba(255, 255, 255, 0.35); z-index: 95; pointer-events: none; }
.muted { color: var(--mute); }
.small { font-size: 13px; }
.kick { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--acc); }
h2 { font: 700 24px/1.15 var(--serif); margin: 4px 0 6px; }
h3 { font: 700 17px/1.2 var(--serif); margin: 18px 0 4px; color: var(--gold2); }
p { margin: 6px 0; }

/* --- screen effects: vignette, under water, the cold */
#vignette { position: fixed; inset: 0; z-index: 5; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.55)); }
#underwater { position: fixed; inset: 0; z-index: 6; pointer-events: none; opacity: 0; transition: opacity 0.4s; background: radial-gradient(ellipse at 50% 30%, rgba(20, 60, 70, 0.55), rgba(0, 10, 14, 0.92)); }
#frost { position: fixed; inset: 0; z-index: 6; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(200, 230, 255, 0.35) 85%, rgba(230, 245, 255, 0.6)); }
body.dark #vignette { background: radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(0, 0, 0, 0.8)); }

/* --- loading */
#loading { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: radial-gradient(circle at 50% 42%, #10161f, var(--bg) 68%); transition: opacity 0.5s; }
#loading.gone { opacity: 0; pointer-events: none; }
.ld { text-align: center; width: 290px; }
.ld b { display: block; font: 800 34px var(--serif); letter-spacing: 5px; background: linear-gradient(180deg, #fff6d8, #e8c26a 55%, #b8862e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ld b em { display: block; font-style: italic; font-size: 0.6em; letter-spacing: 9px; }
.ld .bar { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); margin: 16px 0 10px; overflow: hidden; }
.ld .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ice), var(--gold)); transition: width 0.3s; }
.ld span { color: var(--mute); font-size: 13.5px; }
/* what the game is, under the bar (also the words a search engine reads here) and the way to its About page */
.ldAbout { margin: 22px auto 0; max-width: 290px; color: var(--mute); font-size: 12.5px; line-height: 1.5; opacity: 0.85; }
.ldAbout a { display: block; margin-top: 6px; color: var(--gold); text-decoration: none; }
.ldAbout a:hover { text-decoration: underline; }

/* --- buttons */
.btn { flex: 1; min-height: 46px; padding: 0 18px; border-radius: 14px; border: 1px solid var(--line2); background: rgba(255, 255, 255, 0.07); font-weight: 650; display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; transition: transform 0.12s, background 0.2s; }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn.gold { background: linear-gradient(180deg, var(--gold2), var(--gold) 60%, #c99a40); border-color: rgba(255, 230, 160, 0.7); color: var(--goldInk); box-shadow: 0 6px 20px rgba(232, 194, 106, 0.2); }
.btn.big { min-height: 54px; font-size: 17px; }
.btn.sm { flex: none; min-height: 34px; padding: 0 13px; font-size: 13.5px; border-radius: 11px; }
.btn.ghost { background: transparent; }
.btn.danger { background: rgba(255, 106, 106, 0.16); border-color: rgba(255, 106, 106, 0.5); color: #ffb8b8; }
.btns { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.link { background: none; border: 0; color: var(--gold); padding: 10px 0; font-weight: 600; }
.err { color: var(--bad); min-height: 18px; font-size: 13px; margin: 4px 0; }
.card input:not([type=range]) { width: 100%; height: 48px; border-radius: 13px; border: 1px solid var(--line2); background: rgba(0, 0, 0, 0.35); color: var(--ink); padding: 0 14px; font: inherit; margin-bottom: 8px; }
form { margin: 0; }

/* --- the title card */
#title { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: flex-start; padding: calc(var(--mdts-h, 52px) + 20px) 6vw calc(24px + var(--safe-b)); background: linear-gradient(90deg, rgba(4, 6, 10, 0.92), rgba(4, 6, 10, 0.5) 46%, rgba(4, 6, 10, 0) 72%); }
.tCard { max-width: 480px; }
.tKick { font-size: 12px; font-weight: 800; letter-spacing: 2.4px; text-transform: uppercase; color: var(--ice); }
.tLogo { margin: 6px 0 8px; font: 800 clamp(48px, 10vw, 86px)/0.92 var(--serif); letter-spacing: 7px; background: linear-gradient(180deg, #fff6d8, #e8c26a 55%, #b8862e); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 22px rgba(232, 194, 106, 0.25)); }
.tLogo em { display: block; font-style: italic; font-size: 0.42em; letter-spacing: 0.5em; margin-top: 6px; }
.tLogo em.pre, .ld b em.pre { margin: 0 0 6px; font-size: 0.36em; }
.tDate { font: italic 600 15px var(--serif); color: var(--ice); margin: 0 0 8px; }
.tTag { font-size: 16px; color: #e2e6ea; margin: 0 0 14px; }
.tStats { color: var(--mute); font-size: 13.5px; }
.tStats b { color: var(--gold); }
.tLinks { display: flex; gap: 2px 16px; flex-wrap: wrap; }
#title .btns { max-width: 380px; flex-direction: column; flex-wrap: nowrap; gap: 9px; }
#title .btns .ticket { margin-bottom: 2px; }
.tMain { width: 100%; flex: none; }
.tRow { display: flex; gap: 9px; } .tRow .btn { flex: 1; min-height: 44px; font-size: 14.5px; }
/* the hard mode switch */
.tSwitch { display: flex; align-items: center; gap: 10px; padding: 2px 2px; font-size: 13px; color: var(--mute); cursor: pointer; }
.tSwitch input { position: absolute; opacity: 0; pointer-events: none; }
.tSwitch i { position: relative; flex: none; width: 34px; height: 20px; border-radius: 10px; background: rgba(255, 255, 255, 0.12); border: 1px solid var(--line2); transition: background 0.2s; }
.tSwitch i::after { content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #d8dce2; transition: transform 0.2s; }
.tSwitch input:checked + i { background: rgba(232, 194, 106, 0.5); border-color: var(--gold); }
.tSwitch input:checked + i::after { transform: translateX(14px); background: var(--gold2); }
.tSwitch input:focus-visible + i { outline: 2px solid var(--gold); outline-offset: 2px; }
/* continue from a checkpoint */
.tCont { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }
.tCont span { width: 100%; font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--mute); }
.tCont .btn { flex: 1 1 auto; }
@media (max-width: 640px) {
  #title { align-items: flex-end; background: linear-gradient(0deg, rgba(4, 6, 10, 0.96), rgba(4, 6, 10, 0.6) 60%, rgba(4, 6, 10, 0)); }
  .tTag { font-size: 14.5px; }
}

/* --- the HUD */
#hud { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
#hud > *, #hud .hRight > * { pointer-events: auto; }
.hb b[hidden] { display: none; }
/* one panel style for everything on screen: near-black glass, a hairline border warmed with brass, the same
   corners and shadow; labels in small capitals, values in the serif */
#clockPill, #goal, .meter, .hRight, #toast { -webkit-backdrop-filter: blur(10px) saturate(1.15); backdrop-filter: blur(10px) saturate(1.15); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.38); }
#clockPill { position: fixed; top: calc(64px + var(--safe-t)); left: calc(12px + var(--safe-l)); display: flex; flex-direction: column; min-width: 196px; padding: 8px 14px 9px; border-radius: 14px; background: var(--glass); border: 1px solid rgba(216, 178, 106, 0.28); pointer-events: none; }
#clockPill b { font: 700 21px/1.1 var(--serif); color: var(--gold2); letter-spacing: 0.4px; font-variant-numeric: tabular-nums; }
#clockPill span { margin-top: 2px; font-size: 11px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
/* the goal: a card with a brass edge, the distance in a chip */
#goal { position: fixed; top: calc(12px + var(--safe-t)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; width: max-content; min-width: 300px; max-width: min(480px, calc(100vw - 520px)); padding: 9px 12px 9px 16px; border-radius: 14px; background: var(--glass); border: 1px solid rgba(216, 178, 106, 0.28); pointer-events: none; overflow: hidden; }
#goal::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--gold2), var(--gold)); }
#goal i { display: none; }
#goal div:not(.gR) { display: flex; flex-direction: column; min-width: 0; flex: 1; }
#goal b { font: 700 15px/1.25 var(--serif); color: #fff6e0; letter-spacing: 0.2px; }
#goal span { font-size: 12.5px; line-height: 1.35; color: var(--mute); }
#goal .gR { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
#goal em { font-style: normal; font-size: 11.5px; font-weight: 750; color: var(--gold2); white-space: nowrap; padding: 3px 9px; border-radius: 99px; background: rgba(232, 194, 106, 0.13); border: 1px solid rgba(232, 194, 106, 0.3); }
#goal em:empty { display: none; }
#goal small { display: none; font-size: 11px; font-weight: 700; color: var(--mute); white-space: nowrap; }
#goal.urgent { border-color: rgba(255, 120, 90, 0.55); }
#goal.urgent::before { background: linear-gradient(180deg, #ff9a7a, var(--bad)); animation: blink 1.1s infinite; }
@keyframes blink { 50% { opacity: 0.35; } }
/* the buttons, top right: one toolbar */
.hRight { position: fixed; top: calc(10px + var(--safe-t)); right: calc(10px + var(--safe-r)); display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 26px; background: rgba(6, 9, 14, 0.8); border: 1px solid rgba(216, 178, 106, 0.4); }
.hb { position: relative; width: 42px; height: 42px; border-radius: 50%; border: 0; background: transparent; display: grid; place-items: center; transition: background 0.15s; }
.hb:hover { background: rgba(255, 255, 255, 0.08); }
.hb:active { background: rgba(232, 194, 106, 0.22); }
.hb svg { width: 20px; height: 20px; fill: #f6e1a6; }
.hb.on { background: rgba(232, 194, 106, 0.26); }
.hb.on svg { fill: var(--gold2); }
#pauseBtn { margin-left: 3px; }
#pauseBtn::before { content: ''; position: absolute; left: -3px; top: 10px; bottom: 10px; width: 1px; background: rgba(216, 178, 106, 0.3); }
.hb b { position: absolute; right: -2px; bottom: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--gold); color: var(--goldInk); font-size: 10.5px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px rgba(6, 9, 14, 0.9); }
/* the meters, under the clock and as wide */
#meters { position: fixed; left: calc(12px + var(--safe-l)); top: calc(128px + var(--safe-t)); display: flex; flex-direction: column; gap: 6px; pointer-events: none; transition: transform 0.25s; }
.meter { display: flex; align-items: center; gap: 9px; min-width: 196px; padding: 6px 12px; border-radius: 12px; background: var(--glass); border: 1px solid var(--line); font-size: 11px; font-weight: 750; letter-spacing: 0.9px; text-transform: uppercase; color: var(--mute); }
.meter i { flex: 1; min-width: 70px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.meter i b { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #8fd0ea, var(--ice)); transition: width 0.2s; }
.meter.low { border-color: rgba(255, 106, 106, 0.45); }
.meter.low i b { background: var(--bad); }
.meter em { font-style: normal; color: var(--ink); text-transform: none; letter-spacing: 0; font-weight: 650; }
.meter.warn { border-color: rgba(255, 177, 90, 0.6); } .meter.warn em { color: var(--warn); }
#line { position: fixed; left: 50%; bottom: calc(96px + var(--safe-b)); transform: translateX(-50%); max-width: min(620px, calc(100vw - 32px)); text-align: center; font: italic 600 17px/1.35 var(--serif); color: #fff6e0; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9), 0 0 2px #000; opacity: 0; transition: opacity 0.6s; pointer-events: none; }
#line.on { opacity: 1; }
#line { width: max-content; padding: 9px 18px 10px; border-radius: 14px; background: linear-gradient(180deg, rgba(4, 6, 10, 0.5), rgba(4, 6, 10, 0.62)); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
#line:empty { display: none; }
/* what the people near you say: a bubble over the speaker's head (placeSay) */
#say { position: fixed; left: 0; top: 0; z-index: 30; max-width: min(300px, 70vw); padding: 8px 12px 7px; border-radius: 14px; background: rgba(250, 244, 230, 0.94); color: #2a2018; font: italic 600 14px/1.3 var(--serif); text-align: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45); pointer-events: none; opacity: 0; transition: opacity 0.25s; }
#say::after { content: ''; position: absolute; left: 50%; bottom: -7px; margin-left: -7px; border: 7px solid transparent; border-bottom: 0; border-top-color: rgba(250, 244, 230, 0.94); }
#say small { display: block; margin-top: 3px; font: 600 10px var(--font); font-style: normal; letter-spacing: 0.6px; text-transform: uppercase; color: #8a6a2a; }
#say.on { opacity: 1; }
body.photo #say { display: none; }
#line small { display: block; font: 600 12px var(--font); font-style: normal; color: var(--gold); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 3px; }
#useBtn { position: fixed; left: 50%; bottom: calc(26px + var(--safe-b)); transform: translateX(-50%); display: flex; align-items: center; gap: 9px; max-width: calc(100vw - 170px); padding: 0 18px; height: 52px; border-radius: 99px; border: 1px solid rgba(255, 230, 160, 0.7); background: linear-gradient(180deg, var(--gold2), var(--gold) 60%, #c99a40); color: var(--goldInk); font-weight: 750; font-size: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); animation: pop 0.25s; }
#useBtn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#useBtn kbd { font: 700 11px var(--font); border: 1px solid rgba(42, 28, 4, 0.4); border-radius: 5px; padding: 1px 5px; }
body.touch #useBtn kbd { display: none; }
@keyframes pop { from { transform: translateX(-50%) scale(0.85); opacity: 0; } }
@media (max-width: 700px) {
  /* a phone: the toolbar and the shell's pill share the top row, the goal card (with the time in it) the next,
     tips under that (the meters step down while one shows), the meters on the left */
  #goal { top: calc(60px + var(--safe-t)); left: calc(10px + var(--safe-l)); right: calc(10px + var(--safe-r)); transform: none; width: auto; min-width: 0; max-width: none; padding: 8px 10px 8px 14px; }
  #goal b { font-size: 14px; } #goal span { font-size: 12px; }
  #goal small { display: block; }
  #clockPill { display: none; }
  #meters { top: calc(var(--goalB, 126px) + 8px); left: calc(10px + var(--safe-l)); }
  body.toastOn #meters { transform: translateY(var(--toastH, 50px)); }
  body.touch:has(#useBtn:not(.hidden)) #line { bottom: calc(252px + var(--safe-b)); }
  .meter { min-width: 0; }
  .hb { width: 38px; height: 38px; } .hb svg { width: 19px; height: 19px; }
  .hRight { top: calc(8px + var(--safe-t)); right: calc(8px + var(--safe-r)); }
  body.touch #useBtn { bottom: calc(190px + var(--safe-b)); }
  #line { bottom: calc(150px + var(--safe-b)); font-size: 15px; }
}

/* --- touch: hold and jump (the stick is the shared MDT stick, fixed bottom-left) */
#controls { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
body:not(.touch) #controls button { display: none; }
#jumpBtn, #holdBtn { position: fixed; border-radius: 50%; border: 1px solid var(--line2); background: rgba(6, 9, 14, 0.6); pointer-events: auto; display: grid; place-items: center; touch-action: none; }
#jumpBtn { right: calc(22px + var(--safe-r)); bottom: calc(30px + var(--safe-b)); width: 62px; height: 62px; }
#holdBtn { right: calc(96px + var(--safe-r)); bottom: calc(44px + var(--safe-b)); width: 70px; height: 70px; flex-direction: column; gap: 0; border-color: rgba(216, 178, 106, 0.6); }
#holdBtn span { font-size: 10.5px; font-weight: 800; color: var(--gold2); letter-spacing: 0.5px; margin-top: -2px; }
#jumpBtn svg, #holdBtn svg { width: 26px; height: 26px; fill: #fff; }
#holdBtn:active, #holdBtn.on { background: rgba(232, 194, 106, 0.35); }
body.steep #holdBtn { animation: pulse 1s infinite; border-color: var(--gold); }
@keyframes pulse { 50% { box-shadow: 0 0 0 10px rgba(232, 194, 106, 0.15); } }

/* --- the cinematic bars (the break, the end) */
#cine { position: fixed; inset: 0; z-index: 25; pointer-events: none; }
#cine .cineTop, #cine .cineBot { position: absolute; left: 0; right: 0; height: 11vh; background: #000; transition: transform 0.8s; }
#cine .cineTop { top: 0; } #cine .cineBot { bottom: 0; display: flex; align-items: center; justify-content: center; }
#cine p { font: italic 600 17px var(--serif); color: #f4ead0; margin: 0; padding: 0 20px; text-align: center; }

/* --- toast and note */
#toast { position: fixed; left: 50%; top: calc(80px + var(--safe-t)); transform: translateX(-50%) translateY(-10px); z-index: 70; padding: 10px 16px; border-radius: 14px; background: var(--glass); border: 1px solid var(--line2); font-weight: 650; font-size: 14px; opacity: 0; transition: opacity 0.25s, transform 0.25s; pointer-events: none; max-width: calc(100vw - 30px); text-align: center; }
#toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast { width: max-content; max-width: min(520px, calc(100vw - 24px)); text-align: center; }
@media (max-width: 700px) { #toast { top: calc(var(--goalB, 124px) + 8px); max-width: calc(100vw - 24px); font-size: 13.5px; text-align: center; } }
/* with a sheet open, toasts move to the bottom so they never sit over its heading */
body:has(.screen:not(.hidden)) #toast { top: auto; bottom: calc(18px + var(--safe-b)); }
#note { position: fixed; left: 50%; bottom: calc(100px + var(--safe-b)); transform: translateX(-50%); z-index: 50; width: min(420px, calc(100vw - 24px)); padding: 14px 16px; border-radius: 18px; background: var(--glass); border: 1px solid var(--line2); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); animation: up 0.25s ease-out; }
#note p { margin: 0 0 10px; } #note .btns { margin-top: 6px; }
@keyframes up { from { transform: translate(-50%, 30px); opacity: 0; } }

/* --- sheets */
.screen { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: calc(16px + var(--safe-t)) 14px calc(16px + var(--safe-b)); background: rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.screen .card { width: 100%; max-width: 460px; max-height: 100%; overflow: auto; padding: 18px 20px 20px; border-radius: 22px; background: var(--glass); border: 1px solid var(--line2); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); }
.screen .card.wide { max-width: 620px; }
/* clear the shell's top bar (the full bar and guest line on the title and end screens, the small pill in play) */
body[data-phase="play"] .screen { padding-top: calc(70px + var(--safe-t)); }
body[data-phase="title"] .screen, body[data-phase="end"] .screen { padding-top: calc(100px + var(--safe-t)); }
.shHead { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.x { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line2); background: rgba(255, 255, 255, 0.06); }
.pBar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; margin: 4px 0 10px; }
.pBar i { display: block; height: 100%; background: linear-gradient(90deg, var(--ice), var(--gold)); }
.logList { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.logItem { padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.logItem b { display: block; font: 700 15px var(--serif); color: var(--gold2); }
.logItem span { font-size: 12px; color: var(--faint); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.logItem p { font-size: 13.5px; color: #dfe4ea; margin: 4px 0 0; }
.logItem.locked { opacity: 0.45; } .logItem.locked p { display: none; }
.howList p { margin: 2px 0 6px; color: #dfe4ea; font-size: 14px; line-height: 1.5; }
.howList h3 { margin: 14px 0 2px; font-size: 15.5px; }
/* the controls table */
.ctlGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 12px 0 4px; }
.ctlGrid div { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 11px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.ctlGrid span { flex: none; min-width: 64px; font-size: 12px; font-weight: 800; color: var(--gold2); }
.ctlGrid em { font-style: normal; font-size: 12.5px; color: var(--ink); line-height: 1.3; }
kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; margin-right: 3px; border-radius: 6px; border: 1px solid rgba(232, 194, 106, 0.45); border-bottom-width: 2px; background: rgba(232, 194, 106, 0.08); font: 800 11px var(--font); color: var(--gold2); }
@media (max-width: 480px) { .ctlGrid { grid-template-columns: 1fr; } }
.howList b { color: var(--gold2); }
.mem { text-align: center; }
.mem .big { font: 800 52px/1 var(--serif); color: var(--gold2); }
.mem .row { display: flex; gap: 10px; justify-content: center; margin: 12px 0; }
.mem .row div { flex: 1; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); }
.mem .row b { display: block; font: 800 26px var(--serif); color: var(--ink); }
.mem .row span { font-size: 12px; color: var(--mute); }
.endTitle { font: 800 36px/1.05 var(--serif); margin: 6px 0; background: linear-gradient(180deg, #fff6d8, #e8c26a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.endTitle.lost { background: linear-gradient(180deg, #e8eef4, #8aa0b8); -webkit-background-clip: text; background-clip: text; }
.statRow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.statRow div { padding: 9px 11px; border-radius: 13px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); }
.statRow b { display: block; font-size: 18px; } .statRow span { font-size: 12px; color: var(--mute); }
.mxcBox { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-top: 10px; border-radius: 14px; background: rgba(232, 194, 106, 0.1); border: 1px solid rgba(232, 194, 106, 0.35); }
.mxcBox span { flex: 1; } .mxcBox.paid { border-color: var(--good); }
/* the deck plan */
#plan { width: 100%; height: auto; display: block; margin-top: 8px; border-radius: 12px; background: #0a1018; border: 1px solid var(--line); }
.planKey { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12.5px; color: var(--mute); }
.planKey span { display: inline-flex; align-items: center; gap: 6px; }
.planKey .k { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.planKey .you { background: #ffd36a; box-shadow: 0 0 6px rgba(255, 211, 106, 0.8); }
.planKey .goal { border: 2px solid #fff; }
.planKey .sea { width: 18px; height: 0; border-radius: 0; border-top: 2px dashed rgba(120, 190, 230, 0.85); }
.planKey .wet { border-radius: 3px; background: rgba(70, 150, 200, 0.7); }
.planTabs { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.planTabs button { padding: 5px 9px; border-radius: 9px; border: 1px solid var(--line2); background: rgba(255, 255, 255, 0.05); font-size: 12px; font-weight: 700; }
.planTabs button.on { background: var(--gold); color: var(--goldInk); border-color: var(--gold); }

/* the ticket choice on the title card */
.ticket { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; width: 100%; }
.ticket span { font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--mute); margin-right: 4px; }
.ticket button { padding: 6px 11px; border-radius: 99px; border: 1px solid var(--line2); background: rgba(255, 255, 255, 0.05); font-size: 13px; font-weight: 700; }
.ticket button.on { background: var(--gold); color: var(--goldInk); border-color: var(--gold); }

/* Watch her sink: only the clock and the narration */
body.watch #goal, body.watch .hRight, body.watch #meters, body.watch #useBtn, body.watch #controls { display: none !important; }
/* Watch her sink: the views bar */
#watchBar { position: fixed; left: 0; right: 0; bottom: calc(14px + var(--safe-b)); z-index: 12; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
#watchBar.hidden { display: none; }
#watchCap { text-align: center; padding: 6px 14px; border-radius: 12px; background: rgba(6, 9, 14, 0.55); border: 1px solid var(--line2); max-width: min(560px, calc(100vw - 32px)); transition: opacity 0.6s; }
#watchCap b { display: block; font: italic 700 16px var(--serif); color: var(--gold2, #f0d290); }
#watchCap span { display: block; font-size: 12.5px; color: var(--ink); opacity: 0.85; }
#watchCap.dim span { display: none; }
.wRow { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; pointer-events: auto; padding: 0 12px; }
.wb { min-height: 38px; padding: 0 13px; border-radius: 12px; border: 1px solid var(--line2); background: rgba(6, 9, 14, 0.7); color: var(--ink); font-weight: 650; font-size: 13.5px; }
.wb.gold { background: linear-gradient(180deg, var(--gold2), var(--gold) 60%, #c99a40); color: var(--goldInk); border-color: rgba(255, 230, 160, 0.7); }
.wb.on { border-color: var(--gold); color: var(--gold2, #f0d290); }
#wUD { position: fixed; right: calc(18px + var(--safe-r)); bottom: calc(26px + var(--safe-b)); display: none; flex-direction: column; gap: 10px; pointer-events: auto; }
body.watch #wUD { display: flex; }
#watchBar, #wUD { touch-action: manipulation; }
#wUD button { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--line2); background: rgba(6, 9, 14, 0.6); color: #fff; font-size: 20px; touch-action: none; }
/* (watching, the watch's own joystick takes the bottom left on every screen: the bar sits above it, the arrows
   bottom right) */
body.watch #watchBar { bottom: calc(176px + var(--safe-b)); z-index: 14; }     /* (1.65: over the stick's touch circle, which is larger than its ring: the timeline wins a touch at its edge) */
body.watch #line { top: calc(12px + var(--safe-t)); bottom: auto; max-width: min(620px, max(280px, calc(100vw - 480px))); font-size: 15.5px; }     /* (watching, the top middle is free: no goal)*/
/* (a phone, watching: the clock back at the top left, the narration under it, clear of the views bar) */
@media (max-width: 700px) { body.watch #clockPill { display: flex; top: calc(62px + var(--safe-t)); min-width: 0; padding: 6px 12px 7px; } body.watch #clockPill b { font-size: 17px; } body.watch #line { top: calc(126px + var(--safe-t)); bottom: auto; max-width: calc(100vw - 32px); font-size: 14.5px; } }
body.watch #jumpBtn, body.watch #holdBtn { display: none !important; }
/* Escape the flood: what you're carrying, and the black between rooms */
#escInv { width: max-content; max-width: calc(100vw - 24px); position: fixed; left: 50%; top: calc(108px + var(--safe-t)); transform: translateX(-50%); padding: 5px 12px; border-radius: 11px; background: rgba(6, 9, 14, 0.7); border: 1px solid rgba(216, 178, 106, 0.6); color: var(--gold2, #f0d290); font-size: 13px; font-weight: 650; pointer-events: none; }
#escInv.hidden { display: none; }
@media (max-width: 700px) { #escInv { top: auto; bottom: calc(250px + var(--safe-b)); } }
#fade { position: fixed; inset: 0; z-index: 30; background: #000; display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity 0.7s; }
#fade.on { opacity: 1; pointer-events: auto; }
#fade div { text-align: center; padding: 0 24px; }
#fade span { display: block; color: var(--gold); font-size: 12.5px; letter-spacing: 1.5px; text-transform: uppercase; }
#fade b { display: block; margin: 8px 0; font: italic 700 30px var(--serif); color: #fff6e0; }
#fade #fadeSub { text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--ink); opacity: 0.85; max-width: 460px; }
.viewList { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.viewList button { text-align: left; padding: 10px 14px; border-radius: 13px; border: 1px solid var(--line2); background: rgba(255, 255, 255, 0.05); color: var(--ink); }
.viewList button.on { border-color: var(--gold); background: rgba(232, 194, 106, 0.12); }
.viewList button b { display: block; font-weight: 700; }
.viewList button span { display: block; font-size: 13px; opacity: 0.75; margin-top: 2px; }
.viewList button em { float: right; font-style: normal; font-size: 12px; color: var(--gold2, #f0d290); }
.ldFact { display: block; margin-top: 8px; font: italic 600 13px/1.4 var(--serif); color: var(--ice); opacity: 0.85; }

/* the goal's direction when its marker is off screen */
#edge { position: fixed; left: 0; top: 0; width: 0; height: 0; margin: 0; pointer-events: none; z-index: 5; }
#edge::before { content: ''; position: absolute; left: -14px; top: -11px; border-left: 22px solid rgba(232, 194, 106, 0.92); border-top: 11px solid transparent; border-bottom: 11px solid transparent; filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.8)); animation: edgePulse 1.2s ease-in-out infinite; }
#edge[hidden] { display: none; }
@keyframes edgePulse { 50% { transform: translateX(-4px); } }

.logItem .where { display: inline-block; margin-left: 8px; font-family: Inter, system-ui, sans-serif; font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted, #8a8f98); }

/* a short screen (a phone held sideways): the title card scrolls from the top instead of overflowing under the top bar */
#title { overflow-y: auto; align-items: flex-start; }
#title .tCard { margin: auto 0; padding-top: 34px; }     /* (centred when it fits, from the top when it doesn't: nothing under the bar) */
@media (max-width: 640px) { #title .tCard { margin: auto 0 0; } }
@media (max-height: 560px) {
  #line { bottom: calc(16px + var(--safe-b)); max-width: min(520px, max(260px, calc(100vw - 340px))); font-size: 14px; }
  #title { align-items: flex-start; padding-top: calc(var(--mdts-h, 52px) + 44px + var(--safe-t)); }
  .tLogo { font-size: 44px; letter-spacing: 5px; margin: 2px 0 4px; }
  .tTag { margin: 6px 0; }
}

/* photo mode (photoStart in app.js): everything but the picture and its own bar goes */
body.photo #hud, body.photo #controls, body.photo #watchBar, body.photo #mdtShell, body.photo #wUD { display: none !important; }
#photoBar { position: fixed; left: 0; right: 0; bottom: calc(18px + var(--safe-b)); z-index: 14; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; touch-action: manipulation; }
#photoBar.hidden { display: none; }
#photoBar .wRow { pointer-events: auto; }
#photoBar [aria-pressed="true"]#pOld { border-color: var(--gold); color: var(--gold); }
#photoTip { padding: 6px 12px; border-radius: 12px; background: rgba(6, 9, 14, 0.55); color: #e8e2d4; font: 600 12px var(--font); transition: opacity 0.6s; }
#photoTip.dim { opacity: 0; }
#pUD { position: fixed; right: calc(18px + var(--safe-r)); bottom: calc(90px + var(--safe-b)); display: flex; flex-direction: column; gap: 10px; pointer-events: auto; }
#pUD button { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--line2); background: rgba(6, 9, 14, 0.6); color: #fff; font-size: 20px; touch-action: none; }
body:not(.touch) #pUD { display: none; }
/* (a touch screen: the bar sits above the stick, up/down bottom right, as in Watch her sink) */
body.touch #photoBar { bottom: calc(150px + var(--safe-b)); }
body.touch #pUD { bottom: calc(26px + var(--safe-b)); }
#flash { position: fixed; inset: 0; z-index: 90; background: #fff; opacity: 0; pointer-events: none; transition: opacity 0.5s; }
#flash.on { opacity: 0.85; transition: none; }

/* medals (MEDALS in app.js): in the Ship's log, and the new ones on the end cards */
.medalHead { display: flex; align-items: baseline; justify-content: space-between; margin: 14px 0 6px; }
.medalHead b { font: italic 700 17px var(--serif); } .medalHead span { font-size: 12px; color: var(--mute); }
.medals { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 7px; }
.medal { position: relative; padding: 8px 10px 8px 38px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); opacity: 0.55; }
.medal i { position: absolute; left: 9px; top: 10px; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); border: 2px solid rgba(255, 255, 255, 0.18); }
.medal b { display: block; font-size: 12.5px; line-height: 1.2; } .medal span { display: block; font-size: 11px; line-height: 1.25; color: var(--mute); margin-top: 2px; }
.medal.won { opacity: 1; border-color: rgba(232, 194, 106, 0.45); background: rgba(232, 194, 106, 0.08); }
.medal.won i { background: radial-gradient(circle at 35% 35%, #fff2c0, var(--gold) 55%, #9a7428); border-color: #f0d290; box-shadow: 0 0 8px rgba(232, 194, 106, 0.5); }
.medalNew { margin: 8px 0; padding: 8px 12px; border-radius: 12px; background: rgba(232, 194, 106, 0.1); border: 1px solid rgba(232, 194, 106, 0.4); font-size: 13.5px; }
.medalNew b { color: var(--gold2, #f0d290); }

/* Escape the flood: the room just cleared on the card between rooms, and the times on the end card */
#fade #fadeNote { margin-top: 14px; text-transform: none; letter-spacing: 0.3px; font-size: 14px; font-weight: 700; color: var(--gold2, #f0d290); }
.splits { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.splits div { display: grid; grid-template-columns: 1fr auto 86px; gap: 10px; align-items: baseline; padding: 5px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); font-size: 13px; }
.splits b { font-variant-numeric: tabular-nums; } .splits em { font-style: normal; font-size: 11.5px; color: var(--mute); text-align: right; }
.splits .nb em { color: var(--gold2, #f0d290); font-weight: 700; }
#mWater em { margin-left: 2px; font-style: normal; color: var(--ice); }
#mWater.low em { color: var(--warn); }

/* your night (storyHtml): a short timeline on the end card */
.night { margin: 10px 0; padding: 10px 12px; border-radius: 13px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); text-align: left; max-height: 34vh; overflow-y: auto; }
.nightHead { display: block; margin-bottom: 6px; font: italic 700 15px var(--serif); color: var(--gold2, #f0d290); }
.night div { display: grid; grid-template-columns: 62px 1fr; gap: 8px; padding: 3px 0; font-size: 13px; line-height: 1.35; }
.night span { color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.night p { margin: 0; color: var(--ink); }
/* a short laptop screen: a smaller logo, so the whole title card fits */
@media (max-height: 720px) and (min-height: 561px) {
  .tLogo { font-size: clamp(44px, 8vw, 66px); margin: 4px 0 6px; }
  #title .tCard { padding-top: 22px; }
  .tTag { margin-bottom: 10px; }
}

/* the Ship's log's tabs, and its rooms grouped by deck */
.logTabs { display: flex; gap: 4px; margin: 12px 0 8px; padding: 3px; border-radius: 13px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); }
.logTabs button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--mute); font-weight: 700; font-size: 13.5px; }
.logTabs button em { font-style: normal; font-size: 11px; font-weight: 700; opacity: 0.75; }
.logTabs button.on { background: rgba(232, 194, 106, 0.18); color: var(--gold2); box-shadow: inset 0 0 0 1px rgba(232, 194, 106, 0.4); }
.logDeck { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 2px 6px; font-size: 11.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--acc); }
.logDeck span { font-size: 11px; color: var(--mute); letter-spacing: 0.5px; }
.logDeck + .logList { margin-top: 0; }
/* the note (a choice, someone's story): nearly solid, a serif heading, clear of the touch controls, the narration
   out of the way while it's open */
#note { background: rgba(10, 13, 18, 0.97); border-color: rgba(216, 178, 106, 0.35); box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55); }
#note > p:first-child b { font: 700 17px/1.25 var(--serif); color: var(--gold2); }
#note p { font-size: 14px; line-height: 1.5; }
body.touch #note { bottom: calc(196px + var(--safe-b)); max-height: calc(100vh - 300px - var(--safe-b)); overflow-y: auto; }
body:has(#note:not(.hidden)) #line { opacity: 0 !important; }

/* Settings > Larger text */
body.bigText #line { font-size: 20px; }
body.bigText #say { font-size: 16.5px; max-width: min(340px, 78vw); }
body.bigText #goal b { font-size: 17px; } body.bigText #goal span { font-size: 14px; }
body.bigText .meter { font-size: 12.5px; } body.bigText body.bigText #toast { font-size: 16px; }
body.bigText #note p { font-size: 16px; }
@media (max-width: 700px) { body.bigText #line { font-size: 17.5px; } }

/* Watch her sink, Hide (watchClean): only her on the screen, and the eye button to bring the rest back */
body.clean #hud, body.clean #watchBar, body.clean #wUD, body.clean #mdtShell, body.clean #note, body.clean #edge { display: none !important; }
#showUi { position: fixed; top: calc(12px + var(--safe-t)); right: calc(12px + var(--safe-r)); z-index: 40; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 12px; border-radius: 22px; border: 1px solid rgba(216, 178, 106, 0.45); background: rgba(6, 9, 14, 0.7); color: var(--gold2); font-weight: 700; font-size: 13.5px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: opacity 0.6s; }
#showUi svg { width: 20px; height: 20px; fill: var(--gold2); }
#showUi.dim { opacity: 0; }
#showUi.hidden { display: none; }

/* 1.62: Settings > What to do next off: no goal card (on a phone the clock comes back, as it is everywhere else) */
body.noGoal #goal { display: none !important; }
@media (max-width: 700px) { body.noGoal #clockPill { display: flex; } }

/* 1.65: (the narration, watching on a phone, was given a width of "the screen less 480 px": nothing, one word to a line)
   Watch her sink's timeline: drag or tap to go anywhere in the night; the ticks are the Moments */
#wTime { display: flex; align-items: center; gap: 10px; width: min(620px, calc(100vw - 32px)); pointer-events: auto; padding: 6px 12px; border-radius: 12px; background: rgba(6, 9, 14, 0.62); border: 1px solid var(--line2); touch-action: none; }
#wTime > span { flex: none; font: 700 12.5px var(--font); color: var(--ink); font-variant-numeric: tabular-nums; min-width: 54px; }
#wTime > span#wtEnd { text-align: right; color: var(--mute); }
#wtNow { color: var(--gold2, #f0d290) !important; }
#wTrack { position: relative; flex: 1; height: 30px; cursor: pointer; outline: none; touch-action: none; }
#wtBar { position: absolute; left: 0; right: 0; top: 13px; height: 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
#wtFill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, var(--gold), var(--gold2, #f0d290)); }
#wtMarks i { position: absolute; top: 10px; width: 2px; height: 10px; margin-left: -1px; border-radius: 1px; background: rgba(255, 240, 210, 0.55); pointer-events: none; }
#wtMarks i.past { background: rgba(20, 14, 4, 0.55); }
#wtKnob { position: absolute; top: 6px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3cc, var(--gold) 70%); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); pointer-events: none; }
#wTrack.drag #wtKnob, #wTrack:focus-visible #wtKnob { transform: scale(1.25); }
#wtTip { position: absolute; bottom: 34px; transform: translateX(-50%); padding: 4px 9px; border-radius: 8px; background: rgba(6, 9, 14, 0.9); border: 1px solid var(--line2); font: 600 12px var(--font); font-style: normal; color: var(--ink); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.15s; }
#wtTip b { color: var(--gold2, #f0d290); margin-right: 6px; }
#wTrack.drag #wtTip { opacity: 1; }
@media (max-width: 700px) { #wTime { padding: 4px 10px; gap: 8px; } #wTime > span { font-size: 11.5px; min-width: 48px; } }