/* Anomalies — 3D hospital shell (v2a) */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #070a14;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  user-select: none; -webkit-user-select: none; touch-action: none; color: #e8ecf6;
}
#c { position: fixed; inset: 0; width: 100%; height: 100svh; display: block; outline: none; touch-action: none; }

/* ---------- title ---------- */
#intro {
  /* the title has grown a helper picker AND a night picker, so on a short
     window it has to be able to scroll — otherwise Start goes off the bottom
     and the game cannot be started at all. */
  position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; text-align: center;
  padding: 18px; overflow-y: auto; overscroll-behavior: contain;
  background:
    radial-gradient(ellipse at 50% 12%, #182a3a 0%, transparent 55%),
    radial-gradient(ellipse at 85% 90%, #241430 0%, transparent 45%),
    linear-gradient(180deg, #0a1020 0%, #05060c 100%);
  transition: opacity .35s;
}
#intro.gone { opacity: 0; pointer-events: none; }
@media (max-height: 760px) {
  #intro { gap: 10px; justify-content: flex-start; padding-top: 12px; }
  #intro .hint.dim { display: none; }
  #title-text { font-size: clamp(30px, 9vw, 52px); }
}
#intro .moon {
  position: absolute; top: 7%; right: 10%; width: 74px; height: 74px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fdf6d8, #d8ceA0 70%);
  box-shadow: 0 0 44px rgba(250, 240, 200, .45);
}
#title-text {
  font-weight: 900; font-size: clamp(38px, 12vw, 76px); line-height: .95; letter-spacing: .02em;
  color: #7de8d8;
  text-shadow: 0 0 18px rgba(90, 240, 210, .4), 0 0 60px rgba(60, 220, 190, .22), 0 4px 0 #000;
}
#title-sub {
  font-weight: 800; font-size: clamp(15px, 4.4vw, 22px); color: #c8b8f0; letter-spacing: .12em;
  text-shadow: 0 0 14px rgba(160, 120, 255, .5);
}
.hint { color: #9fb4c8; font-weight: 700; max-width: 30em; line-height: 1.45; }
#playBtn {
  border: none; cursor: pointer; font-size: 23px; font-weight: 900; color: #06201a;
  background: linear-gradient(180deg, #8ef0dc, #35b89a); padding: .55em 1.6em;
  border-radius: 18px; box-shadow: 0 6px 0 #1d7a64;
}
#playBtn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 #1d7a64; }
#playBtn:disabled { filter: grayscale(.6); opacity: .85; cursor: default; }
.link-btn {
  background: rgba(255,255,255,.1); color: #c8d8e8; text-decoration: none;
  border: 2px solid rgba(255,255,255,.22); border-radius: 14px; font-weight: 800; font-size: 14px;
  padding: 8px 16px; cursor: pointer;
}
.link-btn:active { transform: translateY(2px); }
#intro .row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ---------- character picker ---------- */
#char-pick { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pick-title { color: #cfe0f0; font-weight: 800; font-size: 15px; letter-spacing: .08em; margin: 0; }
.pick-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.char-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer;
  width: 118px; padding: 8px 8px 10px; border-radius: 16px;
  background: rgba(255,255,255,.06); border: 2.5px solid rgba(255,255,255,.16);
  transition: transform .1s, border-color .12s, background .12s;
}
.char-card .char-thumb {
  width: 100px; height: 124px; border-radius: 12px; object-fit: cover;
  background: #101827; display: block;
}
.char-card .char-name { color: #dce8f4; font-weight: 800; font-size: 13px; }
.char-card[aria-pressed="true"] {
  border-color: #8ef0dc; background: rgba(90,240,210,.14);
  box-shadow: 0 0 20px rgba(90,240,210,.28);
}
.char-card:active { transform: translateY(2px); }

/* ---------- gummy flavour row (shows when the Gummy Doctor is picked) ---- */
#gummy-colors { display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; }
/* display:flex above BEATS the hidden attribute's UA display:none — without
   this rule the row showed for every character (Katherine caught it) */
#gummy-colors[hidden] { display: none; }

/* ---------- fast asleep (out of hearts) ---------- */
#sleep-scrim {
  position: fixed; inset: 0; z-index: 28; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; text-align: center;
  background: radial-gradient(ellipse at center, rgba(8,6,18,.55), rgba(4,3,10,.9));
  pointer-events: none;
}
#sleep-scrim[hidden] { display: none; }
#sleep-big { font-size: 34px; font-weight: 900; color: #cfd6ff; text-shadow: 0 3px 14px #000; }
#sleep-sub { font-size: 18px; font-weight: 700; color: #9aa3cf; max-width: 78vw; }
.gummy-swatch {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 2.5px solid rgba(255,255,255,.25); padding: 0;
  transition: transform .1s, border-color .12s, box-shadow .12s;
}
.gummy-swatch[aria-pressed="true"] {
  border-color: #8ef0dc; box-shadow: 0 0 14px rgba(90,240,210,.45);
  transform: scale(1.12);
}
.gummy-swatch:active { transform: translateY(2px); }

/* ---------- night picker ---------- */
#night-pick { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 4px; }
/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; z-index: 8; pointer-events: none; display: none; }
#hud.on { display: block; }
/* The HUD wrapper swallows pointer events so the walk/look zones underneath
   get them — but its BUTTONS (panic, lock, briefcase) must win them back, or
   every real tap falls straight through to the joystick. (Programmatic
   .click() in the harness bypasses hit-testing, which is how this shipped
   broken: Katherine could not press what the tests could.) */
#hud button { pointer-events: auto; }
#room-tag {
  position: absolute; top: calc(12px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  background: rgba(8, 12, 20, .8); border: 1px solid #2c4450; border-radius: 999px;
  padding: 7px 18px; font-weight: 900; font-size: 15px; color: #a8e8dc; letter-spacing: .06em;
}
/* Katherine asked for the hearts in the top LEFT. Everything about YOU lives
   in that corner now — hearts (damage), sanity (fear) and the wallet — so
   there is one place to glance at instead of three. */
#you {
  position: absolute; top: calc(12px + env(safe-area-inset-top));
  left: calc(12px + env(safe-area-inset-left));
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
#brave { display: flex; gap: 3px; }
#brave .heart { filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
#shift-count {
  position: absolute; top: calc(12px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right));
  background: rgba(8, 12, 20, .8); border: 1px solid #2c4450; border-radius: 12px;
  padding: 6px 12px; font-weight: 900; font-size: 13px; color: #c8d8e8;
}
/* ---------- the context stack: ONE uniform interact button ---------------
   Every walk-up action (panic, door lock, briefcase, fuse box, tazer,
   machines, command centre) renders as the same pill in the same slot —
   bottom-right, above the Zap end of the tool row, like a normal game's
   context prompt. Usually one shows at a time; at the supply-room wall
   panic + lock can stack. Right side on purpose: on a phone the left half
   of the screen is the walk-stick zone (a near-miss there spawns the
   joystick on top of the button); a miss on the right just nudges camera. */
#ctx-stack {
  position: fixed; z-index: 23;
  right: calc(14px + env(safe-area-inset-right));
  bottom: calc(96px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  pointer-events: none;
}
.ctxbtn {
  pointer-events: auto; display: none;
  flex-direction: row; align-items: center; justify-content: center; gap: 8px;
  min-width: 176px; min-height: 52px; padding: 10px 18px;
  border: none; border-radius: 16px; cursor: pointer;
  color: #2a1200; font-weight: 900; font-size: 14px;
  background: linear-gradient(180deg, #fff0a8, #ffc93c);
  box-shadow: 0 5px 0 #c08d16, 0 0 22px rgba(255, 215, 120, .8);
  animation: fusePulse 1.4s ease-in-out infinite;
}
.ctxbtn.on { display: flex; }
.ctxbtn:active { transform: translateY(3px); box-shadow: 0 2px 0 #c08d16; }
.ctxbtn:disabled { filter: grayscale(.7); opacity: .55; cursor: default; animation: none; }
.ctxbtn b { font-size: 14px; letter-spacing: .5px; }
.ctxbtn span { font-size: 12.5px; }
@media (prefers-reduced-motion: reduce) { .ctxbtn { animation: none; } }
/* accents keep each action recognisable inside the one uniform shape */
.ctx-red {
  color: #fff; background: radial-gradient(circle at 50% 32%, #ff7a6a, #d92b1d 78%, #a01208);
  box-shadow: 0 5px 0 #700c04, 0 0 18px rgba(255, 70, 50, .55);
}
.ctx-red:active { box-shadow: 0 2px 0 #700c04; }
.ctx-amber {
  color: #241300; background: linear-gradient(180deg, #ffd97a, #e89b18);
  box-shadow: 0 5px 0 #6e4102, 0 0 18px rgba(255, 190, 70, .5);
  animation: none;
}
.ctx-amber:active { box-shadow: 0 2px 0 #6e4102; }
.ctx-blue {
  color: #04161f; background: linear-gradient(180deg, #a8e4ff, #46a8d8);
  box-shadow: 0 5px 0 #1c6688, 0 0 20px rgba(110, 200, 255, .7);
  animation: none;
}
.ctx-blue:active { box-shadow: 0 2px 0 #1c6688; }
.ctx-mint {
  color: #06231d; background: linear-gradient(180deg, #b6f5e0, #48c9a8);
  box-shadow: 0 5px 0 #227a63, 0 0 20px rgba(110, 235, 200, .7);
  animation: none;
}
.ctx-mint:active { box-shadow: 0 2px 0 #227a63; }
#buyBtn:disabled { opacity: .5; }
/* the tazer pickup is pink like the Zap button it unlocks */
#grabBtn {
  color: #fff; background: linear-gradient(180deg, #ff9ae0, #d94fb8);
  box-shadow: 0 5px 0 #9c2d80, 0 0 22px rgba(255, 140, 230, .8);
  animation: grabPulse 1.4s ease-in-out infinite;
}
#grabBtn:active { box-shadow: 0 2px 0 #9c2d80; }
@keyframes grabPulse {
  0%, 100% { box-shadow: 0 5px 0 #9c2d80, 0 0 14px rgba(255, 140, 230, .55); }
  50%      { box-shadow: 0 5px 0 #9c2d80, 0 0 30px rgba(255, 140, 230, .95); }
}
@keyframes fusePulse {
  0%, 100% { box-shadow: 0 5px 0 #c08d16, 0 0 14px rgba(255, 215, 120, .55); }
  50%      { box-shadow: 0 5px 0 #c08d16, 0 0 30px rgba(255, 215, 120, .95); }
}
@media (prefers-reduced-motion: reduce) { #grabBtn { animation: none; } }
#prompt {
  position: absolute; bottom: calc(26px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  max-width: 82vw; text-align: center; color: #ffe9a8; font-weight: 800; font-size: 15px;
  text-shadow: 0 2px 6px rgba(0,0,0,.8); pointer-events: none;
}
/* the tool row and the fuse switch stack up from the bottom in a blackout —
   lift the hint clear of them instead of printing it across the buttons */
#prompt.raised { bottom: calc(160px + env(safe-area-inset-bottom)); }
#prompt.raised.high { bottom: calc(268px + env(safe-area-inset-bottom)); }
/* the context stack owns the bottom-right; while any context button is out,
   the hint text keeps to the left of it instead of printing underneath
   (matters most on a phone, where the two used to share the same band) */
#hud:has(.ctxbtn.on) #prompt {
  left: calc(10px + env(safe-area-inset-left));
  right: calc(210px + env(safe-area-inset-right));
  transform: none; max-width: none;
}

/* ---------- desk papers ---------- */
#papers {
  position: fixed; z-index: 20; right: calc(14px + env(safe-area-inset-right));
  bottom: calc(20px + env(safe-area-inset-bottom));
  display: none; pointer-events: none;
}
#papers.on { display: block; animation: paperIn .22s ease-out; }
@keyframes paperIn { from { opacity: 0; transform: translateY(16px) rotate(-1deg); } to { opacity: 1; } }
.paper-card {
  width: min(340px, 84vw); pointer-events: auto;
  background: linear-gradient(180deg, #fbf7ea, #efe6cf); color: #2a2418;
  border-radius: 14px; border: 1px solid #d8cba6; box-shadow: 0 14px 40px rgba(0,0,0,.5);
  padding: 12px 14px 14px; font-family: system-ui, sans-serif;
}
.paper-head {
  font-weight: 900; letter-spacing: .18em; font-size: 12px; color: #8a6a2a;
  text-align: center; border-bottom: 2px dashed #cdbd94; padding-bottom: 7px; margin-bottom: 10px;
}
.paper-body { display: flex; gap: 12px; align-items: center; }
.photo-wrap { flex: 0 0 auto; text-align: center; }
.photo {
  width: 88px; height: 88px; border-radius: 8px; background: #dfeaf2;
  border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); overflow: hidden;
}
.photo-cap { font-size: 10px; font-weight: 700; color: #8a7a52; margin-top: 3px; }
.paper-rows { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; }
.prow { display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid #e2d7b8; padding-bottom: 3px; }
.prow span { font-size: 12px; font-weight: 700; color: #9a8a5a; }
.prow b { font-size: 17px; font-weight: 900; color: #3a3020; }
.paper-hint { text-align: center; font-size: 12.5px; font-weight: 700; color: #6a5a38; margin: 10px 0 8px; }
.paper-btns { display: flex; gap: 10px; }
.paper-btns button {
  flex: 1; border: none; cursor: pointer; font-weight: 900; font-size: 16px;
  padding: 12px 8px; border-radius: 12px; color: #fff;
}
.p-admit { background: linear-gradient(180deg, #6fd39a, #35a870); box-shadow: 0 4px 0 #227a4e; }
.p-turn  { background: linear-gradient(180deg, #f28aa0, #d24d6a); box-shadow: 0 4px 0 #9a2f47; }
.paper-btns button:active { transform: translateY(3px); box-shadow: none; }

/* ---------- desk tools row ---------- */
#tools {
  position: fixed; z-index: 22; left: 50%; transform: translateX(-50%);
  bottom: calc(18px + env(safe-area-inset-bottom)); display: none; gap: 10px;
}
#tools.on { display: flex; }
/* the check-up kit owns the bottom rows at a bedside (buttons at 18, chart at
   96, and the chart wraps to two lines on a phone) — if something woken turns up
   mid-check-up the tool row stacks clear above all of it */
#tools.above { bottom: calc(200px + env(safe-area-inset-bottom)); }
.toolbtn {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  border: none; cursor: pointer; color: #06201a; font-weight: 900; font-size: 12px;
  background: linear-gradient(180deg, #ffe9b0, #f4b73e); padding: 8px 14px 6px;
  border-radius: 14px; box-shadow: 0 5px 0 #b9832a; min-width: 66px;
}
.toolbtn:active { transform: translateY(3px); box-shadow: 0 2px 0 #b9832a; }
/* the five investigation tools exist only at the front desk with a patient —
   away from it the row shrinks to Light + Zap */
.toolbtn.gone { display: none; }
.toolbtn-zap { color: #fff; background: linear-gradient(180deg, #ff9ae0, #d94fb8); box-shadow: 0 5px 0 #9c2d80; }
.toolbtn-zap:active { box-shadow: 0 2px 0 #9c2d80; }
.toolbtn-light { color: #06231d; background: linear-gradient(180deg, #d5fbe9, #79d9b4); box-shadow: 0 5px 0 #3e9a79; }
.toolbtn-light:active { box-shadow: 0 2px 0 #3e9a79; }
/* the light is ON — the button glows so it's obvious how to switch it back */
.toolbtn-light[aria-pressed="true"] {
  color: #3a2a00; background: linear-gradient(180deg, #fff6c9, #ffd85e);
  box-shadow: 0 5px 0 #c79a1e, 0 0 18px rgba(255, 226, 130, .75);
}
.toolbtn-light[aria-pressed="true"]:active { box-shadow: 0 2px 0 #c79a1e, 0 0 18px rgba(255, 226, 130, .75); }
/* away from the desk the row is only there for the flashlight, so the desk
   tools grey out rather than disappear — the row keeps its shape either way */
.toolbtn[disabled] { opacity: .34; cursor: default; filter: grayscale(.5); }
.toolbtn[disabled]:active { transform: none; }
/* the zapper is a weapon away from the desk — it should be impossible to miss
   when something woken is coming at you */
.toolbtn.urgent { animation: zapUrgent .8s ease-in-out infinite; }
@keyframes zapUrgent {
  0%, 100% { box-shadow: 0 5px 0 #9c2d80, 0 0 12px rgba(255, 120, 210, .6); }
  50%      { box-shadow: 0 5px 0 #9c2d80, 0 0 30px rgba(255, 140, 230, 1); }
}
@media (prefers-reduced-motion: reduce) { .toolbtn.urgent { animation: none; } }

/* SIX tools have to fit a small phone (Notes, Ask, Photo, Cameras, Light, Zap) */
@media (max-width: 430px) {
  #tools, #care { gap: 6px; }
  .toolbtn { min-width: 58px; padding: 7px 8px 5px; font-size: 11px; }
  #tools { gap: 4px; }
  #tools .toolbtn { min-width: 50px; padding: 7px 4px 5px; font-size: 10px; }
  #tools .toolbtn svg { width: 23px; height: 23px; }
  /* six cures have to fit one phone row — they are the widest row in the game */
  #care-treat { gap: 4px; }
  #care-treat .toolbtn { min-width: 46px; padding: 6px 3px 4px; font-size: 9.5px; }
  #care-treat .toolbtn svg { width: 22px; height: 22px; }
}

/* ---------- the check-up kit (bedside) ---------- */
/* Full width, centred by flex — NOT left:50%+translate. Anchoring at 50% makes
   the containing block only half the screen, which is what made the cure row
   wrap onto the chart when it grew past three buttons. */
#care {
  position: fixed; z-index: 22; left: 0; right: 0;
  bottom: calc(18px + env(safe-area-inset-bottom));
  display: none; gap: 10px; justify-content: center;
}
#care.on { display: flex; }
/* NO flex-wrap: a wrapped row grows to two lines and lands on the chart above
   it. #care is full-width now (see above) so a single line always has room. */
.care-row { display: none; gap: 10px; justify-content: center; }
.care-row.on { display: flex; }
/* the SCAN button — the one big fun action at a bedside */
#scanBtn {
  display: flex; align-items: center; gap: 10px; border: none; cursor: pointer;
  padding: 12px 26px 12px 20px; border-radius: 18px;
  color: #052018; font-weight: 900; font-size: 19px; letter-spacing: 1.5px;
  background: linear-gradient(180deg, #b8ffd9, #46e39b);
  box-shadow: 0 6px 0 #1f9c68, 0 0 26px rgba(70, 227, 155, .5);
  animation: scanPulse 1.6s ease-in-out infinite;
}
#scanBtn:active { transform: translateY(3px); box-shadow: 0 3px 0 #1f9c68; }
#scanBtn[disabled] { animation: none; filter: grayscale(.5) brightness(.8); }
@keyframes scanPulse {
  0%, 100% { box-shadow: 0 6px 0 #1f9c68, 0 0 18px rgba(70, 227, 155, .35); }
  50% { box-shadow: 0 6px 0 #1f9c68, 0 0 34px rgba(70, 227, 155, .75); }
}

/* the scanner read-out card */
#scanout {
  position: fixed; z-index: 26; left: 50%; transform: translateX(-50%) translateY(14px);
  bottom: calc(156px + env(safe-area-inset-bottom));
  width: min(300px, 86vw); padding: 12px 14px 10px; border-radius: 16px;
  background: rgba(6, 18, 16, .92); border: 1px solid rgba(70, 227, 155, .45);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .55);
  opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
#scanout.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.so-head {
  display: flex; align-items: center; gap: 7px; color: #7cf3bb;
  font-size: 12px; letter-spacing: 2px; margin-bottom: 9px;
}
.so-dot { width: 8px; height: 8px; border-radius: 50%; background: #46e39b; animation: scanPulse 1.2s infinite; }
.so-gauge { display: grid; grid-template-columns: 24px 1fr 96px; align-items: center; gap: 8px; margin: 7px 0; color: #7fe8d0; }
.so-name { font-size: 12px; letter-spacing: .5px; }
.so-bar { display: block; height: 9px; border-radius: 6px; background: rgba(255,255,255,.12); overflow: hidden; }
.so-bar b { display: block; height: 100%; width: 0; border-radius: 6px; background: #46e39b; transition: width .5s ease-out; }
.so-gauge.bad { color: #ffc9a3; }
.so-gauge.bad .so-bar b { background: linear-gradient(90deg, #ffd166, #ff5f6d); }
.so-gauge.bad .so-name { animation: soFlash .5s ease-in-out 3; }
@keyframes soFlash { 50% { opacity: .25; } }
#so-verdict { margin: 10px 0 2px; text-align: center; color: #eafff6; font-size: 14px; letter-spacing: .3px; }
#so-verdict.bad { color: #ffd166; }
/* only park it on the left once the screen is wide enough that it can't reach
   the bedside chart in the middle — otherwise it stacks above the chart */
@media (min-width: 1000px) {
  #scanout { left: 24px; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateY(14px); }
  #scanout.on { transform: translateY(0); }
}
/* on a phone it sits above the chart, but small enough to see past */
@media (max-width: 430px) {
  #scanout { bottom: calc(174px + env(safe-area-inset-bottom)); padding: 9px 11px 7px; }
  .so-gauge { margin: 5px 0; grid-template-columns: 22px 1fr 74px; }
  #so-verdict { font-size: 13px; margin: 8px 0 2px; }
}
.toolbtn-cure { color: #2a1030; background: linear-gradient(180deg, #ffe0f2, #f79ac8); box-shadow: 0 5px 0 #b45c8b; }
.toolbtn-cure:active { box-shadow: 0 2px 0 #b45c8b; }
/* the LOOK instruments — a cooler blue, so the "find out what it is" step reads
   as different work from the pink "make it better" step */
.toolbtn-look { color: #06222e; background: linear-gradient(180deg, #d6f2ff, #7cc9ea); box-shadow: 0 5px 0 #3c7f9c; }
.toolbtn-look:active { box-shadow: 0 2px 0 #3c7f9c; }
/* Sticky Paws broke this one — it stays in place so you can see WHICH is gone.
   A greyed button already means "not now", so a broken one needs to look
   DIFFERENT, not just dimmer: a red outline and a strike through the label. */
.toolbtn.busted {
  opacity: .8; filter: grayscale(1); cursor: default; position: relative;
  outline: 2.5px solid #ff5f7a; outline-offset: -2px;
  box-shadow: 0 5px 0 #7a2a3a;
}
.toolbtn.busted span { text-decoration: line-through; color: #ff8fa2; }
.toolbtn.busted::after {
  content: ""; position: absolute; inset: 0; border-radius: 14px;
  background: repeating-linear-gradient(45deg,
    rgba(255, 90, 120, .22) 0 6px, transparent 6px 12px);
}
.toolbtn.busted:active { transform: none; }

/* the bedside chart card sits just above the kit */
#chart {
  position: fixed; z-index: 22; left: 50%; transform: translateX(-50%);
  bottom: calc(96px + env(safe-area-inset-bottom));
  display: none; flex-direction: column; align-items: center; gap: 1px;
  padding: 8px 16px; border-radius: 14px; max-width: min(340px, 88vw); text-align: center;
  background: rgba(10, 16, 28, .82); border: 1px solid rgba(150, 220, 255, .3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
#chart.on { display: flex; }
#chart b { color: #9fe8ff; font-size: 15px; letter-spacing: .3px; }
#chart span { color: #e8f2ff; font-size: 14px; line-height: 1.25; }
#chart.found { border-color: rgba(255, 216, 94, .55); }
#chart.found span { color: #ffe08a; }
#chart.done { border-color: rgba(160, 255, 190, .55); }
#chart.done span { color: #a7f5c1; }

/* ---------- handwritten notepad ---------- */
#notepad {
  position: fixed; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center;
  padding: 20px; background: rgba(4, 6, 10, .55);
}
#notepad.on { display: flex; animation: paperIn .2s ease-out; }
.note-card {
  position: relative; width: min(340px, 86vw);
  background: repeating-linear-gradient(#fffdf3, #fffdf3 27px, #e7dfc4 28px);
  border-radius: 6px; box-shadow: 0 16px 44px rgba(0,0,0,.5); padding: 20px 20px 16px;
  color: #2b2a1e; transform: rotate(-1deg);
  font-family: "Comic Sans MS", "Segoe Print", "Bradley Hand", cursive;
}
.note-tape { position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  width: 84px; height: 22px; background: rgba(180, 210, 160, .6); border: 1px solid rgba(120,150,110,.4); }
.note-title { text-align: center; margin: 2px 0 12px; font-size: 21px; color: #6a5a2a; }
.note-line { display: flex; justify-content: space-between; align-items: baseline; line-height: 28px; }
.note-line span { font-size: 13px; color: #8a7a4a; }
.note-line b { font-size: 18px; color: #262418; font-weight: 700; }
.note-hint { text-align: center; font-size: 13px; color: #7a6a3a; margin: 12px 0 10px; }
.note-btns { display: flex; gap: 10px; }
.note-btns button { flex: 1; border: none; cursor: pointer; font-weight: 900; font-size: 16px;
  padding: 11px 8px; border-radius: 12px; color: #fff; font-family: system-ui, sans-serif; }
.ov-close { display: block; margin: 10px auto 0; border: none; cursor: pointer; font-weight: 800;
  font-size: 13px; color: #fff; background: rgba(90,100,120,.85); padding: 6px 18px; border-radius: 10px;
  font-family: system-ui, sans-serif; }

/* ---------- security cameras overlay ---------- */
#cameras {
  position: fixed; inset: 0; z-index: 32; display: none; align-items: center; justify-content: center;
  padding: 20px; background: rgba(4, 6, 10, .8);
}
#cameras.on { display: flex; }
.cam-card { background: #10151c; border: 3px solid #2a3642; border-radius: 12px; padding: 10px;
  box-shadow: 0 18px 50px rgba(0,0,0,.6); max-width: 92vw; }
.cam-head { display: flex; align-items: center; gap: 8px; color: #7fe0c8; font-weight: 900;
  font-size: 13px; letter-spacing: .08em; margin: 2px 4px 8px; }
.cam-dot { width: 9px; height: 9px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 8px #ff4d4d;
  animation: recBlink 1.2s steps(1) infinite; }
@keyframes recBlink { 50% { opacity: .25; } }
#cam-feed { display: block; width: min(78vw, 460px); aspect-ratio: 4/3; object-fit: cover;
  background: #05070c; border-radius: 4px; }

/* ---------- printed polaroid ---------- */
/* bottom 180px, NOT 90: the walk pad owns the bottom 162px of the left edge,
   and the print used to sit right on it and eat its touches (Katherine,
   2026-07-30: "it blocks the movement controls and can't be closed") */
#polaroid {
  position: fixed; z-index: 23; left: 14px; bottom: calc(180px + env(safe-area-inset-bottom));
  display: none; padding: 8px 8px 22px; background: #fbfaf6;
  border-radius: 4px; box-shadow: 0 10px 26px rgba(0,0,0,.5); transform: rotate(-4deg);
}
#pol-look { display: block; padding: 0; margin: 0; background: none; border: none; cursor: pointer; }
#pol-x {
  position: absolute; top: -12px; right: -12px; z-index: 1; width: 30px; height: 30px;
  border: none; border-radius: 50%; cursor: pointer; font-size: 19px; font-weight: 900;
  line-height: 1; color: #fff; background: #c23f5c; box-shadow: 0 3px 8px rgba(0,0,0,.45);
}
#polaroid.on { display: block; animation: printOut .5s cubic-bezier(.2,1.3,.5,1); }
@keyframes printOut { from { transform: translateY(60px) rotate(-4deg); opacity: 0; } to { opacity: 1; } }
#polaroid-img { display: block; width: 116px; height: 116px; object-fit: cover; background: #223; border-radius: 2px; }
.pol-cap { display: block; text-align: center; font-size: 11px; font-weight: 800; color: #6a5a38; margin-top: 5px; }

/* ---------- enlarged photo inspector ---------- */
#photo-view {
  position: fixed; inset: 0; z-index: 34; display: none; align-items: center; justify-content: center;
  padding: 20px; background: rgba(4, 6, 10, .8);
}
#photo-view.on { display: flex; }
.pv-card {
  background: #fbfaf6; padding: 12px 12px 16px; border-radius: 6px; text-align: center;
  box-shadow: 0 18px 50px rgba(0,0,0,.6); transform: rotate(-1.5deg); max-width: 88vw;
}
#pv-img { display: block; width: min(74vw, 340px); height: min(74vw, 340px); object-fit: cover;
  background: #223; border-radius: 3px; }
.pv-hint { font-weight: 800; color: #4a3f28; margin: 10px 0 10px; font-size: 15px; }
#pv-close {
  border: none; cursor: pointer; font-weight: 900; font-size: 15px; color: #fff;
  background: linear-gradient(180deg, #8ea0b4, #5a6b80); padding: 8px 22px; border-radius: 12px;
}

/* ---------- camera flash ---------- */
#flash { position: fixed; inset: 0; z-index: 40; background: #fff; opacity: 0; pointer-events: none; }
#flash.fire { animation: flashPop .32s ease-out; }
@keyframes flashPop { 0% { opacity: 0; } 12% { opacity: .92; } 100% { opacity: 0; } }

/* ---------- decision toast ---------- */
/* 2026-07-29, Katherine: "disable them both" — the white-on-red/green toast
   up top AND the yellow guidance line at the bottom. The code still writes
   both (harmless, and turning them back on = deleting the next rule); the
   screen just never shows them. */
#toast, #prompt { display: none !important; }
#toast {
  position: fixed; z-index: 30; top: 22%; left: 50%; transform: translateX(-50%) scale(.9);
  padding: 12px 22px; border-radius: 14px; font-weight: 900; font-size: 18px; color: #fff;
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; text-align: center;
  max-width: 84vw;
}
#toast.on { opacity: 1; transform: translateX(-50%) scale(1); }
#toast.good { background: linear-gradient(180deg, #4fc98a, #2e9e68); }
#toast.bad { background: linear-gradient(180deg, #e6708c, #c23f5c); }

/* ---------- the dark round the edges ----------
   Katherine asked for scarier. A vignette does more for that than any prop:
   the middle of the screen stays perfectly readable (this is still a game a
   7-year-old has to play), while the corners of every room fall away into
   nothing, so the hospital never quite shows you all of itself.
   Pointer-events off — it sits over the canvas and under every control. */
#vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 72% 62% at 50% 45%,
      rgba(0,0,0,0) 30%, rgba(2,3,8,.30) 58%, rgba(1,2,6,.62) 82%, rgba(0,1,4,.88) 100%);
  opacity: 0; transition: opacity .8s ease;
}
body.playing #vignette { opacity: 1; }

/* ---------- grade screen ---------- */
#grade {
  position: fixed; inset: 0; z-index: 40; display: none; align-items: center; justify-content: center;
  padding: 22px; background: rgba(5, 8, 14, .82);
}
#grade.on { display: flex; }
.grade-card {
  text-align: center; max-width: 400px; width: 100%;
  background: linear-gradient(180deg, #182a3a, #0d1524); border: 1px solid #2c4a54;
  border-radius: 22px; padding: 26px 22px; box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
#grade-helper {
  display: block; width: 96px; height: 118px; margin: -4px auto 6px;
  border-radius: 16px; border: 1px solid #2c4a54; background: #101a28;
  object-fit: cover;
}
#grade-helper[hidden] { display: none; }
#grade-stars { display: flex; gap: 6px; justify-content: center; margin-bottom: 8px; }
.grade-card h2 { margin: 6px 0; font-size: 26px; color: #8ff0dc; }
.grade-card p { color: #bcd0e0; font-weight: 700; margin: 4px 0 18px; line-height: 1.4; }
.grade-card .row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---------- the dawn report card ---------- */
.grade-card { max-height: calc(100svh - 44px); overflow-y: auto; }
#report-head {
  margin: 2px 0 10px; font-size: 15px; letter-spacing: .06em; color: #9fd8cd;
  text-transform: uppercase;
}
#report-head[hidden] { display: none; }
#report { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; text-align: left; }
.rep {
  display: flex; gap: 9px; align-items: flex-start; padding: 8px;
  border-radius: 13px; background: rgba(255,255,255,.045); border: 1px solid #274050;
}
.rep.right { border-color: #2f7d5f; background: rgba(79,201,138,.10); }
.rep.wrong { border-color: #a2455c; background: rgba(230,112,140,.10); }
.rep-pics { display: flex; gap: 4px; flex: 0 0 auto; }
.rep-pic { width: 62px; border-radius: 10px; display: block; background: #0d1524; }
.rep-pic.lens { outline: 2px solid #ffcf5e; outline-offset: -2px; }
.rep-body { min-width: 0; }
.rep-name { font-weight: 900; font-size: 13.5px; color: #eaf3fb; }
.rep-verdict { font-weight: 900; font-size: 11.5px; margin: 1px 0 3px; }
.rep-verdict.real { color: #7fe6b4; }
.rep-verdict.anom { color: #ff9db1; }
.rep-why { font-size: 11.5px; line-height: 1.35; color: #b9cddd; font-weight: 600; margin: 0; padding: 0; list-style: none; }
.rep-why li { margin: 1px 0; }
.rep-call { font-size: 11px; font-weight: 800; color: #8fa8bc; margin-top: 3px; }
#nextNightBtn {
  border: none; cursor: pointer; font-size: 18px; font-weight: 900; color: #201406;
  background: linear-gradient(180deg, #ffd98e, #e8a33c); padding: .5em 1.4em; border-radius: 14px;
  box-shadow: 0 5px 0 #9c6b1c;
}
#nextNightBtn[hidden] { display: none; }
#againBtn {
  border: none; cursor: pointer; font-size: 18px; font-weight: 900; color: #06201a;
  background: linear-gradient(180deg, #8ef0dc, #35b89a); padding: .5em 1.4em; border-radius: 14px;
  box-shadow: 0 5px 0 #1d7a64;
}
#againBtn:active { transform: translateY(3px); box-shadow: 0 2px 0 #1d7a64; }
.hint.dim { color: #6a7d90; font-size: 13px; }

/* ---------- touch stick ---------- */
#zone-move { position: fixed; inset: 0; z-index: 4; touch-action: none; }
#joy {
  position: fixed; width: 132px; height: 132px; border-radius: 50%; z-index: 9;
  left: 26px; bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  background: rgba(18, 28, 30, .45); border: 2px solid rgba(130, 220, 200, .35);
  opacity: 0; transition: opacity .12s; pointer-events: none;
}
/* the walk pad LIVES in the bottom-left corner — always visible on touch
   screens during play, brighter while a finger is on it */
@media (pointer: coarse) { #hud.on ~ #joy, #joy.shown { opacity: .55; } }
#joy.live { opacity: 1; }
#joy-nub {
  position: absolute; left: 50%; top: 50%; margin: -28px 0 0 -28px; width: 56px; height: 56px;
  border-radius: 50%; background: rgba(130, 220, 200, .5); border: 2px solid rgba(200, 245, 235, .6);
}

/* ---------- context-lost ---------- */
#ctx-lost {
  position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center;
  background: rgba(4, 6, 10, .92); text-align: center; padding: 20px;
}
#ctx-lost.on { display: flex; }
#ctx-lost button {
  border: none; cursor: pointer; font-size: 20px; font-weight: 900; color: #06201a;
  background: linear-gradient(180deg, #8ef0dc, #35b89a); padding: .5em 1.4em; border-radius: 14px;
}

.game-version { position: fixed; bottom: 2px; right: 4px; font-size: 10px; opacity: .55;
  color: #fff; pointer-events: none; z-index: 99999; text-shadow: 0 1px 1px rgba(0,0,0,.5); }

/* The waiting-room queue count. It turns amber once the room is filling, which
   is the only nudge the game gives you that pets are stacking up behind the
   one at your counter. */
#shift-count.busy { color: #ffcf6b; border-color: rgba(255,207,107,.45); }

/* ---------- working the shift together ---------- */
/* Deliberately quiet on the title screen: playing on your own is the normal
   thing to do. These lines only light up when friends really are around. */
#together { margin-top: 10px; text-align: center; }
#mp-status {
  margin: 8px 0 0; font-size: 14px; color: #9fd8c8;
}
#mp-roster {
  margin-top: 4px; font-size: 13px; color: #cfe6de; opacity: .85;
}


/* ---------- sanity, money and the machines ---------- */
/* The sanity bar is the meter you MANAGE, so it is bigger and louder than the
   hearts: it moves all night, and it is the reason to walk to a machine. */
#sanity-wrap { display: flex; align-items: center; gap: 7px; }
#sanity-bar {
  width: 128px; height: 13px; border-radius: 999px; overflow: hidden;
  background: rgba(8,12,20,.82); border: 1px solid #2c4450;
}
#sanity-fill {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, #6fe3c0, #46c9e8);
  transition: width .35s ease, background .5s ease;
}
#sanity-wrap.low #sanity-fill { background: linear-gradient(90deg, #ffb057, #ff6a6a); }
#sanity-wrap.low #sanity-num { color: #ff9c9c; }
#sanity-num { font-weight: 900; font-size: 12px; color: #a8e8dc; min-width: 22px; }
#wallet { display: flex; gap: 8px; align-items: center; }
#money {
  background: rgba(8,12,20,.82); border: 1px solid #3a5a3e; border-radius: 10px;
  padding: 3px 10px; font-weight: 900; font-size: 13px; color: #a5e6a8;
}
#charges {
  background: rgba(8,12,20,.82); border: 1px solid #5a4a70; border-radius: 10px;
  padding: 3px 10px; font-weight: 900; font-size: 13px; color: #d9b8ff;
}
/* a short flash when either number moves, so a change is never missed */
@keyframes kgPop { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
#money.bump, #charges.bump, #sanity-num.bump { animation: kgPop .34s ease; }

/* ---------- the command centre ---------- */
/* One terminal, three tabs. Tabs rather than a single dense screen because it
   has to be readable on a phone held in one hand — you look at ONE of the map,
   the cameras or the shop at a time, and never all three squeezed together. */
#cc {
  position: fixed; inset: 0; z-index: 32; display: flex; flex-direction: column;
  background: rgba(4, 7, 12, .95);
  padding: calc(10px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom));
}
#cc[hidden] { display: none; }
.cc-head { display: flex; align-items: center; gap: 10px; }
.cc-head p { margin: 0; font-weight: 900; color: #bfe9dd; letter-spacing: .06em; flex: 1; }
#cc-cash {
  background: rgba(8,12,20,.9); border: 1px solid #3a5a3e; border-radius: 10px;
  padding: 4px 11px; font-weight: 900; font-size: 14px; color: #a5e6a8;
}
.cc-tabs { display: flex; gap: 6px; margin: 10px 0 8px; }
.cc-tab {
  flex: 1; min-height: 44px; border-radius: 12px; cursor: pointer;
  background: #12222f; border: 1px solid #2a4657; color: #9fc4d4;
  font-weight: 900; font-size: 14px;
}
.cc-tab.on { background: #1d3a4c; border-color: #57a89a; color: #dff3ee; }
.cc-body { flex: 1; min-height: 0; }
.cc-pane { display: none; height: 100%; flex-direction: column; }
.cc-pane.on { display: flex; }

/* --- map tab --- */
#cc-map {
  width: 100%; flex: 1; min-height: 0; display: block;
  background: #06090f; border: 1px solid #24404e; border-radius: 12px;
}
#cc-legend { margin: 8px 0 0; text-align: center; font-size: 12px; color: #8fb6c6; }

/* --- cameras tab --- */
#cc-grid {
  flex: 1; min-height: 0; display: grid; gap: 8px; overflow: auto;
  grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(96px, 1fr);
}
@media (min-width: 760px) { #cc-grid { grid-template-columns: repeat(3, 1fr); } }
.cc-cam {
  position: relative; background: #05080e; border: 1px solid #24404e;
  border-radius: 10px; overflow: hidden; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.cc-cam.big { grid-column: 1 / -1; grid-row: span 2; }
.cc-cam img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-cam .no { position: absolute; left: 6px; top: 5px;
  background: rgba(4,8,14,.8); border-radius: 6px; padding: 1px 6px;
  font-size: 11px; font-weight: 900; color: #6fe3c0; }
.cc-cam .nm { position: absolute; left: 6px; bottom: 5px; font-size: 11px;
  font-weight: 900; color: #cfe6de; text-shadow: 0 1px 3px #000; }
.cc-cam.dead { color: #35505e; font-weight: 900; font-size: 12px; cursor: default; }
#cc-camnote { margin: 8px 0 0; text-align: center; font-size: 12px; color: #7fa8b8; }

/* --- shop tab --- */
#cc-shop { flex: 1; min-height: 0; overflow: auto; display: grid; gap: 8px;
  grid-template-columns: 1fr; align-content: start; }
@media (min-width: 720px) { #cc-shop { grid-template-columns: 1fr 1fr; } }
.cc-item {
  display: flex; align-items: center; gap: 10px; text-align: left;
  background: linear-gradient(180deg, #16283640, #0f1e2b);
  background-color: #12222f;
  border: 1px solid #2a4657; border-radius: 14px;
  padding: 10px 12px; min-height: 68px; cursor: pointer; color: #dff3ee;
}
/* The drawn picture of the thing — the reason a shelf reads as a shelf. It sits
   on a PALE tile, the way an item slot does in every shop screen worth copying:
   these are little colour drawings, and on a dark tile they all went to mud. */
.cc-item .ic {
  flex: 0 0 auto; width: 46px; height: 46px; display: block; padding: 6px;
  border-radius: 12px; color: #2c4453;
  background: linear-gradient(180deg, #eef5f9, #cfdde6);
  border: 1px solid #ffffff2e;
  box-shadow: inset 0 -2px 0 #00000018;
}
.cc-item .t { flex: 1; min-width: 0; }
.cc-item .t b { display: block; font-size: 14px; font-weight: 900; }
.cc-item .t span { display: block; font-size: 12px; color: #9fc4d4; line-height: 1.3; }
/* the price, as a coin + a number on a little tag */
.cc-item .p {
  flex: 0 0 auto; display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  justify-content: flex-end; max-width: 40%;
  font-weight: 900; font-size: 15px; color: #ffe08a; white-space: nowrap;
  background: #00000038; border-radius: 999px; padding: 5px 10px;
}
.cc-item .p .coin { flex: 0 0 auto; }
.cc-item .p em { font-style: normal; font-size: 12px; letter-spacing: .06em; color: #6fe3c0; }
.cc-item.owned { border-color: #3f7a5a; }
.cc-item.owned .p { color: #6fe3c0; background: #1c3a301f; }
.cc-item.rented { border-color: #7a6a3f; }
.cc-item:active:not(:disabled) { transform: translateY(1px); }
.cc-item:disabled { opacity: .45; cursor: default; }
.cc-sub { grid-column: 1 / -1; margin: 6px 0 0; font-weight: 900; font-size: 12px;
  color: #7fa8b8; letter-spacing: .08em; }
/* the line at the bottom of a shelf that says where the rest of it went */
.cc-note { grid-column: 1 / -1; margin: 10px 0 2px; font-size: 12px; line-height: 1.4;
  color: #8ba4b2; }

/* ---------- the same terminal, being a SHOP ---------- */
/* Katherine, 2026-07-28: "the ability to enter the three shops" … "can you make
   the shop screens look nicer? look online how other games do this".
   The parts every good shop screen has, and now this one does:
     an AWNING so you can tell you walked into somewhere,
     a SHOPKEEPER who says hello,
     CARDS with a picture, a name, what it does and a coin price,
     the shop's OWN COLOUR (--shop-ink, set when it opens) on all of it,
   and no map/camera tabs, because inside a shop there is only the shelf. */
#cc.shopmode .cc-tabs, #cc.shopmode .cc-links { display: none; }
#cc.shopmode .cc-head p { color: var(--shop-ink, #bfe9dd); font-size: 17px; }
#cc.shopmode {
  background:
    radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--shop-ink, #57a89a) 12%, transparent), transparent 70%),
    rgba(6, 5, 12, .965);
}
/* the striped awning across the top — the one shape that says SHOP instantly */
#cc.shopmode .cc-head::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px;
  background: repeating-linear-gradient(90deg,
    var(--shop-ink, #57a89a) 0 18px, #ffffff1a 18px 36px);
  opacity: .55; border-radius: 0 0 4px 4px;
}
#cc.shopmode .cc-head { position: relative; padding-top: 16px; }
#cc.shopmode #cc-cash { border-color: color-mix(in srgb, var(--shop-ink, #57a89a) 50%, #2a4657); }
#cc.shopmode .cc-item {
  border-color: color-mix(in srgb, var(--shop-ink, #57a89a) 34%, #24303a);
}
#cc.shopmode .cc-item .ic {
  background: linear-gradient(180deg, #ffffff,
    color-mix(in srgb, var(--shop-ink, #57a89a) 26%, #dfe9ef));
}
#cc.shopmode .cc-sub { color: color-mix(in srgb, var(--shop-ink, #57a89a) 62%, #6f8794); }
#cc.shopmode .cc-bigback {
  color: #06231d;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--shop-ink, #b6f5e0) 70%, #ffffff),
    var(--shop-ink, #48c9a8));
}

/* WHO IS BEHIND THE COUNTER */
.cc-keeper {
  grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 12px;
  padding: 8px 12px 0; border-radius: 16px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--shop-ink, #57a89a) 16%, transparent), #ffffff06);
  border: 1px solid color-mix(in srgb, var(--shop-ink, #57a89a) 24%, #23323c);
}
.cc-keeper .face { flex: 0 0 auto; width: 82px; height: 82px; display: block; }
.cc-keeper .face img { width: 100%; height: 100%; object-fit: contain; display: block;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.5)); }
.cc-keeper .say { flex: 1; min-width: 0; padding-bottom: 12px; }
.cc-keeper .say b {
  display: block; font-size: 15px; font-weight: 900;
  color: var(--shop-ink, #dff3ee); letter-spacing: .02em;
}
.cc-keeper .say span {
  display: block; font-size: 13px; line-height: 1.35; color: #d6e6ee; font-style: italic;
}

/* The full-screen terminal owns the screen while it is up: the site topbar and
   every in-world control get out of its way rather than sitting on top of it. */
body.cc-open #kg-topbar, body.cc-open #tools, body.cc-open #prompt,
body.cc-open #hud, body.cc-open #ccBtn, body.cc-open #buyBtn,
body.cc-open #fuseBtn, body.cc-open #grabBtn,
body.cc-open #rouseBtn,
/* …AND THE INPUT LAYER ITSELF. `#zone-move` is a full-screen `inset: 0` div
   with `touch-action: none` that calls setPointerCapture on every pointerdown,
   and it was left LIVE underneath the command centre. On iPadOS that is a very
   good way to lose taps on whatever is above it: `touch-action: none` tells
   WebKit not to synthesise the click, and a captured pointer is retargeted away
   from the element the finger is actually on. Chromium shrugs at both, which is
   why it never reproduced on a desktop — Katherine hit it on an iPad: "the
   store keeps trapping the player… they cannot buy anything or exit… no even
   with money they don't work. and exit doesn't work either."
   While a full-screen panel is up, the game's input layer should not exist. */
body.cc-open #zone-move, body.cc-open #joy { display: none !important; }

/* ---------- ASK: the fifth lens ---------- */
/* Deliberately shaped like a conversation, not a form: the question is a button
   you press and the answer arrives underneath it in the pet's own voice. The
   answers stay on screen once given, so you can compare all three. */
#askcard {
  position: fixed; z-index: 25; left: 50%; transform: translateX(-50%);
  bottom: calc(104px + env(safe-area-inset-bottom));
  width: min(94vw, 400px); display: none;
}
#askcard.on { display: block; }
.ask-inner {
  background: linear-gradient(180deg, #1b2f3f, #0d1724);
  border: 1px solid #35586b; border-radius: 18px; padding: 14px 14px 10px;
  box-shadow: 0 16px 44px rgba(0,0,0,.66);
  /* three questions and three answers is a tall card — on a short screen it
     scrolls inside itself rather than climbing off the top */
  max-height: calc(100svh - 190px); overflow-y: auto;
}
.ask-title {
  margin: 0 0 10px; font-size: 15px; font-weight: 900; color: #bfe9dd;
  text-align: center; letter-spacing: .03em;
}
.ask-title span { color: #ffe9a8; }
#ask-qs { display: flex; flex-direction: column; gap: 8px; }
.ask-q {
  width: 100%; text-align: left; cursor: pointer;
  background: #1d3a4c; border: 1px solid #3d6a80; color: #dff3ee;
  border-radius: 12px; padding: 10px 12px; min-height: 44px;
  font-weight: 800; font-size: 13.5px; line-height: 1.3;
}
.ask-q:disabled { cursor: default; opacity: 1; }
.ask-q.asked { background: #16293a; border-color: #2c4a5a; color: #90b6c6; }
/* the answer, in the pet's voice */
.ask-a {
  margin: 6px 0 2px 10px; padding: 9px 12px; border-radius: 12px;
  border-top-left-radius: 3px;
  background: #f2efe4; color: #23303c;
  font-weight: 800; font-size: 13.5px; line-height: 1.35;
  box-shadow: 0 3px 0 rgba(0,0,0,.28);
}
.ask-hint { margin: 10px 0 2px; text-align: center; font-size: 12px; color: #8fb6c6; }

/* ---------- special-event decision card ---------- */
#eventcard {
  position: fixed; inset: 0; z-index: 36; display: none; align-items: center; justify-content: center;
  padding: 20px; background: rgba(2, 3, 6, .72);
}
#eventcard.on { display: flex; animation: paperIn .22s ease-out; }
.ev-card {
  width: min(360px, 88vw); background: #0d1220; border: 2px solid #3b4664;
  border-radius: 14px; padding: 20px 18px 16px; box-shadow: 0 20px 60px rgba(0,0,0,.7);
  text-align: center;
}
#ev-title { margin: 0 0 10px; color: #d7e3f5; font-size: 18px; letter-spacing: .02em; }
#ev-text { margin: 0 0 16px; color: #9fb0c8; font-size: 15px; line-height: 1.45; white-space: pre-line; }
.ev-btns { display: flex; gap: 10px; }
.ev-btn { flex: 1; border: none; cursor: pointer; font-weight: 900; font-size: 15px;
  padding: 12px 8px; border-radius: 12px; color: #fff;
  background: linear-gradient(180deg, #4d6b8f, #33475f); }
.ev-btn.alt { background: linear-gradient(180deg, #8f5560, #5f3540); }
.ev-btn:active { transform: translateY(1px); }

.cc-links {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  padding-top: 8px;
}
/* The way out has to be impossible to miss. The header Close is 74x36 in a
   corner; this is the one a thumb finds. */
/* the header Close: a real 44px touch target, not a text link */
#cc-close { min-height: 44px; min-width: 72px; font-size: 15px; }
.cc-bigback {
  /* `#cc` is a flex COLUMN whose body takes `flex: 1`; without this the button
     is squeezed to zero height and there is a way out you cannot see or hit. */
  flex: 0 0 auto;
  margin-top: 10px; min-height: 52px; border: none; border-radius: 14px;
  cursor: pointer; font-weight: 900; font-size: 16px; color: #06231d;
  background: linear-gradient(180deg, #b6f5e0, #48c9a8);
  box-shadow: 0 4px 0 #227a63;
}
.cc-bigback:active { transform: translateY(2px); box-shadow: 0 2px 0 #227a63; }
/* an item you cannot afford yet: dimmed, but still a live button that says so */
.cc-item.poor { opacity: .62; }
.cc-item.poor .p { color: #ff9aa0; }
.cc-item .p i { display: block; font-style: normal; font-size: 11px; opacity: .85; }

/* ---------- the Anomaly Album (corkboard) ---------- */
#album {
  position: fixed; inset: 0; z-index: 9800; display: none; align-items: center; justify-content: center;
  padding: 16px; background: rgba(3, 4, 8, .8);
}
#album.on { display: flex; }
.alb-card-outer {
  width: min(680px, 94vw); max-height: min(86vh, 86svh); overflow-y: auto;
  background: linear-gradient(180deg, #7a5a3c, #6a4c30);
  border: 6px solid #4a3420; border-radius: 14px; padding: 16px 14px 14px;
  box-shadow: 0 22px 70px rgba(0,0,0,.7);
}
.alb-title { margin: 0; text-align: center; color: #ffe9c9; font-size: 24px; letter-spacing: .04em; }
.alb-sub { text-align: center; color: #d9bd97; font-size: 13px; margin: 6px 0 4px; }
.alb-count { text-align: center; color: #ffe9c9; font-weight: 900; font-size: 14px; margin: 4px 0 10px; }
.alb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; }
.alb-card {
  position: relative; background: #fbfaf6; border-radius: 4px; padding: 7px 7px 9px;
  box-shadow: 0 8px 18px rgba(0,0,0,.45); transform: rotate(-1.2deg); text-align: center;
}
.alb-card:nth-child(2n) { transform: rotate(1.4deg); }
.alb-card:nth-child(3n) { transform: rotate(-0.6deg); }
.alb-card::before { content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f26666, #a02020); box-shadow: 0 2px 4px rgba(0,0,0,.4); }
.alb-frame { width: 100%; aspect-ratio: 1; border-radius: 3px; background: #1c2231;
  display: flex; align-items: center; justify-content: center; overflow: hidden; color: #7fd9c2; }
.alb-pic { width: 100%; height: 100%; object-fit: cover; }
.alb-name { display: block; font-size: 13px; color: #2c2618; margin-top: 6px; }
.alb-desc { display: block; font-size: 11px; line-height: 1.3; color: #6a5f48; margin-top: 2px; }
.alb-n { position: absolute; top: 4px; right: 5px; font-size: 11px; font-weight: 900;
  color: #fff; background: #45806e; border-radius: 8px; padding: 1px 6px; }
.alb-card.locked { background: #2a2f3c; }
.alb-card.locked .alb-frame { background: #12161f; color: #4a5568; }
.alb-card.locked .alb-name { color: #8a93a5; }
.alb-card.locked .alb-desc { color: #5d6678; }
#album-close { margin-top: 14px; }
#album-note { color: #7fd9a8; font-weight: 900; margin: 4px 0 0; }

/* ---------- low-sanity: the edges of the screen breathe with your heart ---- */
#vignette.pulse { animation: vigPulse 1.5s ease-in-out infinite; }
@keyframes vigPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  22% { opacity: 1; transform: scale(1.015); }
  32% { opacity: .82; transform: scale(1); }
  54% { opacity: 1; transform: scale(1.012); }
  64% { opacity: .85; transform: scale(1); }
}