/* LAST SAFE STEP — surveyor's blueprint sheet.
   Three inks on Prussian blue: white line, highlighter yellow (go), redline (threat). */
:root{
  --sheet:#0A3A5E; --sheet-hi:#0F4670; --sheet-deep:#062A45;
  --line:#EAF2FF; --line-2:#AFC6EA; --line-3:rgba(234,242,255,.32); --grid:rgba(234,242,255,.07);
  --hi:#F5E04A; --red:#FF8A7F;
  --lw:1.5px;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --f-draw:'Barlow Condensed','Arial Narrow',sans-serif;
  --f-fig:'Azeret Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden}
body{
  background-color:var(--sheet);color:var(--line);font-family:var(--f-draw);font-weight:500;font-size:18px;
  /* survey grid: fine 8px, bold every 40px */
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px),
    linear-gradient(rgba(234,242,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(234,242,255,.035) 1px,transparent 1px);
  background-size:40px 40px,40px 40px,8px 8px,8px 8px;
}
/* sheet border: outer trim line + inner drawing frame */
body::before,body::after{content:"";position:fixed;pointer-events:none;z-index:30}
body::before{inset:8px;border:1px solid var(--line-3);
  background:
    repeating-linear-gradient(90deg,var(--line-3) 0 1px,transparent 1px 40px) top/100% 6px no-repeat,
    repeating-linear-gradient(90deg,var(--line-3) 0 1px,transparent 1px 40px) bottom/100% 6px no-repeat,
    repeating-linear-gradient(0deg,var(--line-3) 0 1px,transparent 1px 40px) left/6px 100% no-repeat,
    repeating-linear-gradient(0deg,var(--line-3) 0 1px,transparent 1px 40px) right/6px 100% no-repeat}
body::after{inset:14px;border:var(--lw) solid rgba(234,242,255,.55)}
::selection{background:var(--hi);color:var(--sheet)}
#game{position:fixed;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}
.fig{font-family:var(--f-fig);font-variant-numeric:tabular-nums;font-weight:500}
.small{font-size:12px}
.y{color:var(--hi)} .r{color:var(--red)}
b{font-weight:600}

/* ---------- controls: drafted boxes ---------- */
.btn{font:600 17px/1 var(--f-draw);letter-spacing:.06em;text-transform:uppercase;color:var(--line);
  background:transparent;border:var(--lw) solid var(--line);padding:11px 18px;min-height:44px;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  transition:background-color 160ms var(--ease),color 160ms var(--ease),transform 160ms var(--ease)}
.btn:hover{background:rgba(234,242,255,.12)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible,.card-btn:focus-visible,.room-btn:focus-visible,input:focus-visible,select:focus-visible,.touch-pad button:focus-visible{
  outline:2px solid var(--hi);outline-offset:3px}
.btn.primary{background:var(--line);color:var(--sheet)}
.btn.primary:hover{background:var(--hi);border-color:var(--hi)}
.btn.big{font-size:22px;padding:14px 26px;min-height:54px}
.btn.danger{border-color:var(--red);color:var(--red)}
.btn.danger:hover{background:rgba(255,138,127,.14)}
.btn.icon{padding:0;width:40px;min-height:40px;justify-content:center;border-color:var(--line-3)}
.btn svg,.touch-pad svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ---------- title block (HUD + menu) ---------- */
.title-block{border-collapse:collapse;background:rgba(6,42,69,.86);border:var(--lw) solid var(--line)}
.title-block th,.title-block td{border:1px solid var(--line-3);padding:6px 10px;text-align:left;vertical-align:middle}
.title-block th{font:600 11px/1 var(--f-draw);letter-spacing:.14em;text-transform:uppercase;color:var(--line-2);white-space:nowrap}
.title-block td{font-size:17px;font-weight:600}
.title-block td.fig{font-family:var(--f-fig);font-size:17px;font-weight:700;min-width:3.2em}
.title-block .hot{color:var(--hi)}
.title-block .tb-btn{padding:3px;width:46px}

/* ---------- screens ---------- */
/* margin:auto centering: overflowing screens scroll from the top instead of clipping */
.screen{position:fixed;inset:0;display:none;align-items:flex-start;justify-content:flex-start;
  padding:calc(26px + var(--sat)) 26px calc(26px + var(--sab));z-index:20;
  background:rgba(6,42,69,.78);overflow-y:auto}
.screen.active{display:flex}
.screen.click-through{background:rgba(6,42,69,.62);align-items:flex-end;pointer-events:none}
#scr-menu{background:transparent}

/* title sheet */
.title-sheet{width:min(1160px,100%);margin:auto;display:grid;gap:22px 40px;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  grid-template-areas:"copy plan" "copy notes" "block block";align-items:start}
.title-copy{grid-area:copy;align-self:center}
h1{font:800 clamp(64px,11vw,136px)/.84 var(--f-draw);text-transform:uppercase;letter-spacing:-.01em;margin:0 0 22px;
  color:var(--line);text-wrap:balance}
.lede{font-size:20px;line-height:1.4;max-width:34ch;color:var(--line-2);margin:0 0 26px}
.plan{grid-area:plan;margin:0}
.plan svg{width:100%;height:auto;display:block;max-height:46vh}
.plan figcaption{font-size:14px;color:var(--line-2);letter-spacing:.04em;margin-top:6px}
.plan .cells rect,.plan .cracked rect{fill:none;stroke:var(--line);stroke-width:1.6}
.plan .cells rect{stroke-width:2.2}
.plan .cracked rect{stroke-dasharray:6 4}
.plan .cracked path{stroke:var(--line);stroke-width:1;opacity:.7}
.plan .erased rect{fill:var(--sheet-deep);stroke:var(--line-3);stroke-dasharray:2 5}
.plan .exit{fill:var(--hi);stroke:var(--hi)}
.plan .exit-t{font:800 12px var(--f-draw);fill:var(--sheet);text-anchor:middle;letter-spacing:.1em}
.plan .route{fill:none;stroke:var(--hi);stroke-width:3;stroke-dasharray:8 7;stroke-linecap:square;
  animation:march 1.4s linear infinite}
.plan .you{fill:var(--line);stroke:var(--sheet);stroke-width:3}
.plan .cloud{fill:none;stroke:var(--red);stroke-width:2}
.plan .sent{fill:var(--red)}
.plan .dim path{stroke:var(--line-2);stroke-width:1;fill:none}
.plan .dim text{font:600 10px var(--f-draw);fill:var(--line-2);letter-spacing:.14em;text-anchor:middle}
@keyframes march{to{stroke-dashoffset:-30}}
.notes{grid-area:notes;border-top:var(--lw) solid var(--line);padding-top:12px}
.notes h2{font:800 22px/1 var(--f-draw);text-transform:uppercase;letter-spacing:.06em;margin:0 0 8px}
.notes ol{margin:0;padding-left:22px;line-height:1.5;color:var(--line-2)}
.notes b{color:var(--line)} .notes b.y{color:var(--hi)} .notes b.r{color:var(--red)}
.menu-block{grid-area:block;width:100%}
.menu-block th{width:1%}
.menu-block .tb-actions{display:flex;flex-wrap:wrap;gap:8px;padding:2px 0}
.menu-block .tb-actions .btn{min-height:40px;padding:8px 14px;font-size:15px}
#menu-save-line{padding:0}
.slot-cell{display:inline-block;padding:7px 12px;font-size:14px;color:var(--line-2);border-right:1px solid var(--line-3)}
.slot-cell b{color:var(--line);letter-spacing:.06em;text-transform:uppercase;margin-right:6px}
.slot-cell.on{color:var(--line)}
.slot-cell.on b::before{content:"";display:inline-block;width:8px;height:8px;background:var(--hi);margin-right:7px;vertical-align:1px}

/* generic sheet (sub-screens) */
.sheet{position:relative;width:min(620px,100%);background:var(--sheet);border:var(--lw) solid var(--line);
  outline:1px solid var(--line-3);outline-offset:6px;
  padding:30px 30px 58px;margin:auto}
.sheet.wide{width:min(760px,100%)}
.h-sheet{font:800 clamp(44px,7vw,76px)/.9 var(--f-draw);text-transform:uppercase;margin:0 0 18px;text-wrap:balance}
.sheet-tag{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;
  border-top:var(--lw) solid var(--line);padding:8px 14px;font:600 12px/1 var(--f-draw);
  letter-spacing:.16em;text-transform:uppercase;color:var(--line-2)}
.rules{line-height:1.5;padding-left:24px;margin:0 0 22px;max-width:62ch}
.rules li{margin-bottom:8px}
#clear-stats,#pause-stats,#fail-stats{font-size:18px;line-height:1.6;margin:0 0 20px;color:var(--line-2)}
#clear-stats b{font-family:var(--f-fig);font-size:15px}
#clear-rating{margin:-6px 0 14px}
#clear-stats b{color:var(--line)}

/* stamps: the one authored moment */
.stamp{position:absolute;bottom:64px;right:26px;font:800 30px/1 var(--f-draw);letter-spacing:.14em;text-transform:uppercase;
  padding:8px 14px;border:3px double currentColor;transform:rotate(-8deg)}
.stamp.ok{color:var(--hi)} .stamp.void{color:var(--red)}
.screen.active .stamp{animation:stamp 420ms var(--ease) 120ms both}
@keyframes stamp{from{opacity:0;transform:rotate(-14deg) scale(1.8);filter:blur(3px)}to{opacity:1;transform:rotate(-8deg) scale(1);filter:none}}

/* settings form */
.form{display:grid;grid-template-columns:auto 1fr;gap:12px 18px;align-items:center;margin-bottom:24px}
.form label{font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--line-2)}
input[type=range]{accent-color:var(--hi);width:100%}
select,input:not([type=range]){font:600 16px var(--f-draw);color:var(--line);background:var(--sheet-deep);
  border:var(--lw) solid var(--line-3);padding:8px 10px;min-height:40px}
input:not([type=range]){width:64px;text-transform:uppercase;text-align:center;font-family:var(--f-fig)}
select option{background:var(--sheet-deep)}

/* drawing index (rooms) */
.index-head,.room-btn{display:grid;grid-template-columns:56px 1fr 110px 70px;gap:10px;align-items:center}
.index-head{font:600 11px/1 var(--f-draw);letter-spacing:.14em;text-transform:uppercase;color:var(--line-2);
  padding:0 12px 8px;border-bottom:var(--lw) solid var(--line)}
#rooms-body{max-height:min(52vh,560px);overflow-y:auto;margin-bottom:20px;scrollbar-color:var(--line-3) transparent}
.room-btn{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-3);color:var(--line);
  padding:10px 12px;cursor:pointer;text-align:left;font:600 18px/1.1 var(--f-draw);position:relative}
.room-btn:hover:not(:disabled){background:rgba(234,242,255,.1)}
.room-btn.locked{cursor:not-allowed;color:var(--line-3)}
.room-num{font-family:var(--f-fig);font-size:15px}
.room-diff{display:inline-flex;gap:4px}
.room-diff i{width:9px;height:9px;border:1.2px solid var(--line-2)}
.room-diff i.on{background:var(--line-2)}
.room-btn.locked .room-diff i{border-color:var(--line-3)}
.room-btn.locked .room-diff i.on{background:var(--line-3)}
.rating{display:inline-flex;gap:4px;vertical-align:middle}
.rating .on{fill:var(--hi)}
.rating .off{fill:none;stroke:var(--line-3);stroke-width:1.4}
.room-stars{line-height:0}
.room-btn.locked .room-stars{color:var(--line-3)}
.room-lock{position:absolute;right:12px;font-size:11px;letter-spacing:.16em;color:var(--line-2)}
.room-btn.locked .room-stars{visibility:hidden}

/* save slots */
#slots-body{margin-bottom:22px}
#slots-body .slotrow{display:flex;justify-content:space-between;align-items:center;gap:12px;
  border-bottom:1px solid var(--line-3);padding:10px 2px;font-family:var(--f-fig);font-size:13px;color:var(--line-2)}
#slots-body .slotrow b{color:var(--line);font-family:var(--f-draw);font-size:17px;letter-spacing:.06em}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:15}
.hud-block{position:absolute;top:calc(24px + var(--sat));right:24px;pointer-events:auto}
.hud-block #hud-mode{font-size:18px;max-width:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hud-tools{position:absolute;top:calc(24px + var(--sat));left:24px;pointer-events:auto}
#hud-cards{display:flex;flex-direction:column;gap:6px}
.card-btn{display:grid;grid-template-columns:26px 18px auto;gap:10px;align-items:center;min-width:150px;min-height:40px;
  background:rgba(6,42,69,.86);color:var(--line);border:var(--lw) solid var(--line);padding:5px 12px 5px 5px;
  cursor:pointer;font:600 16px/1 var(--f-draw);letter-spacing:.06em;text-transform:uppercase;text-align:left;
  transition:background-color 160ms var(--ease)}
.card-btn:hover:not(:disabled){background:var(--sheet-hi)}
.card-btn kbd{font:700 12px/24px var(--f-fig);width:26px;height:26px;text-align:center;border:1px solid var(--line-2)}
.card-btn svg{width:18px;height:18px;fill:none;stroke:var(--hi);stroke-width:1.6;stroke-linecap:square}
.card-btn:disabled svg{stroke:var(--line-3)}
.card-btn .n{font-family:var(--f-fig);font-size:13px;color:var(--hi);margin-left:6px}
.card-btn:disabled{border-color:var(--line-3);color:var(--line-3);cursor:not-allowed}
.card-btn:disabled .n{color:var(--line-3)}
#hud-toast{position:absolute;left:50%;bottom:calc(9vh + var(--sab));transform:translate(-50%,8px);margin:0;
  font:600 16px/1.2 var(--f-draw);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  background:var(--sheet-deep);border:var(--lw) solid var(--line);padding:9px 16px;
  opacity:0;transition:opacity 180ms var(--ease),transform 180ms var(--ease)}
#hud-toast.show{opacity:1;transform:translate(-50%,0)}

.touch-pad{display:none;position:absolute;bottom:calc(26px + var(--sab));left:24px;right:24px;
  justify-content:space-between;align-items:flex-end;pointer-events:none}
.dpad{display:grid;grid-template-columns:repeat(3,56px);grid-template-rows:repeat(2,52px);gap:6px;pointer-events:auto}
.dpad [data-move=up]{grid-column:2}
.dpad [data-move=left]{grid-column:1;grid-row:2}
.dpad [data-move=down]{grid-column:2;grid-row:2}
.dpad [data-move=right]{grid-column:3;grid-row:2}
.touch-pad button{pointer-events:auto;background:rgba(6,42,69,.9);color:var(--line);border:var(--lw) solid var(--line);
  display:flex;align-items:center;justify-content:center}
.touch-pad svg{width:22px;height:22px}
.btn.rewind{min-height:56px;padding:0 20px;font-size:18px;border-color:var(--hi);color:var(--hi)}
@media (pointer:coarse){.touch-pad{display:flex} #hud-toast{bottom:auto;top:calc(168px + var(--sat));white-space:normal;text-align:center;max-width:calc(100% - 48px)}}

/* dialogue: a notes strip on the sheet */
.dialogue-box{pointer-events:auto;display:grid;grid-template-columns:auto 1fr;gap:4px 18px;align-items:baseline;
  width:min(680px,100%);margin:0 auto;background:var(--sheet-deep);border:var(--lw) solid var(--line);
  outline:1px solid var(--line-3);outline-offset:5px;padding:16px 20px;margin-bottom:calc(20px + var(--sab));margin-top:auto}
#dlg-speaker{font:800 20px/1 var(--f-draw);letter-spacing:.12em;text-transform:uppercase;color:var(--hi);
  border-right:var(--lw) solid var(--line-3);padding-right:16px;align-self:stretch}
/* speaker marks: ECHO = concentric echo rings, YOU = the player's survey marker */
#dlg-speaker{display:flex;align-items:center;gap:10px}
#dlg-speaker::before{content:"";flex:none;width:22px;height:22px;border-radius:50%}
#dlg-speaker[data-who="ECHO"]::before{border:1.5px solid var(--hi);box-shadow:inset 0 0 0 4px var(--sheet-deep),inset 0 0 0 5.5px var(--hi)}
#dlg-speaker[data-who="YOU"]{color:var(--line)}
#dlg-speaker[data-who="YOU"]::before{background:var(--line);box-shadow:inset 0 0 0 5px var(--line),inset 0 0 0 8px var(--sheet-deep)}
#dlg-text{font-size:21px;line-height:1.35;min-height:2.7em}
.dlg-hint{grid-column:2;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--line-2)}

/* feedback */
#dmg-frame{position:fixed;inset:0;pointer-events:none;z-index:14;border:10px solid var(--red);opacity:0;transition:opacity 80ms}
body.hit #dmg-frame{opacity:1}
#fps-meter{position:fixed;bottom:22px;left:24px;z-index:40;font-size:12px;color:var(--line-2)}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .title-sheet{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "plan" "notes" "block";gap:18px}
  .plan svg{max-height:32vh}
  .lede{font-size:18px}
}
@media (max-width:620px){
  body{font-size:16px}
  .screen{padding:calc(28px + var(--sat)) 28px calc(28px + var(--sab))}
  .sheet{padding:22px 18px 54px}
  .stamp{position:static;display:inline-block;font-size:22px;margin:0 0 14px 4px}
  .hud-block{top:calc(20px + var(--sat));right:20px}
  .hud-block th{font-size:11px;letter-spacing:.08em;padding:4px 6px}
  .hud-block td{padding:4px 7px;font-size:14px}
  .hud-block td.fig{font-size:14px;min-width:2.4em}
  .hud-block #hud-mode{max-width:9ch;font-size:15px}
  .hud-tools{top:auto;bottom:calc(150px + var(--sab));left:20px}
  #hud-cards{flex-direction:row}
  .card-btn{min-width:0;grid-template-columns:22px 16px auto;gap:7px;padding:4px 8px 4px 4px;font-size:13px}
  .card-btn .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .card-btn .n{margin-left:0}
  .card-btn kbd{width:22px;height:22px;line-height:20px}
  .index-head,.room-btn{grid-template-columns:40px 1fr 70px}
  .index-head span:nth-child(3),.room-diff{display:none}
  .form{grid-template-columns:1fr}
  .dialogue-box{grid-template-columns:1fr} #dlg-speaker{border:0;padding:0} .dlg-hint{grid-column:1}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}