/* Strangers — the walk-around game. The 3D view fills the screen; the
   controls sit on top of it: the walk pad bottom-left (touch), the big Use
   button bottom-right, choice bubbles bottom-centre, one subtitle line above
   them. Heights use svh + safe-area insets (Shell S8); every tap target is
   at least 44 px, the bubbles 64 px, the Use button 76 px. */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #1a1d2b;
  font-family: "Fredoka", "Comic Sans MS", "Chalkboard SE", system-ui, sans-serif;
  user-select: none; -webkit-user-select: none; touch-action: none; color: #3b2a1e;
}
:root { --warm: #fff6e6; --ink: #3b2a1e; --gold: #f1c24a; --rose: #e0766a; }
#c { position: fixed; inset: 0; width: 100%; height: 100svh; display: block; outline: none; touch-action: none; }

/* ---------- the controls over the world (night only) ---------- */
.ctl { display: none; }
body.mode-night .ctl { display: block; }
body.mode-night #bubbles:not([hidden]) { display: flex; }

/* the walk pad (touch screens only; a copy of the Anomalies pad) */
#joy {
  position: fixed; z-index: 30; left: max(18px, env(safe-area-inset-left)); bottom: calc(18px + env(safe-area-inset-bottom));
  width: 132px; height: 132px; border-radius: 50%; background: rgba(255,246,230,.18); border: 3px solid rgba(255,246,230,.45);
  pointer-events: none;
}
#joy.live { background: rgba(255,246,230,.28); }
#joy-nub { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%;
  background: rgba(255,246,230,.75); border: 3px solid var(--ink); }
@media (hover: hover) and (pointer: fine) { #joy { display: none !important; } }

/* the Use button: its icon says what it will do */
#useBtn {
  position: fixed; z-index: 31; right: max(18px, env(safe-area-inset-right)); bottom: calc(22px + env(safe-area-inset-bottom));
  width: 84px; height: 84px; border-radius: 50%; border: 4px solid var(--ink); cursor: pointer;
  background: radial-gradient(circle at 40% 35%, #ffe9a8, #f1b03f); box-shadow: 0 5px 0 #7a4f18;
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; font: inherit; color: var(--ink);
}
#useBtn[hidden] { display: none !important; }
#useBtn span { font-size: 13px; font-weight: 900; line-height: 1; margin-top: -2px; }
#useBtn:active { transform: translateY(3px); box-shadow: 0 2px 0 #7a4f18; }
#useHint { position: fixed; z-index: 31; right: max(112px, calc(env(safe-area-inset-right) + 112px)); bottom: calc(46px + env(safe-area-inset-bottom));
  background: rgba(20,16,30,.7); color: #fff3da; border-radius: 10px; padding: 4px 10px; font-weight: 800; font-size: 16px; pointer-events: none; }
#useHint b { background: #fff3da; color: var(--ink); border-radius: 5px; padding: 0 6px; margin-right: 4px; }
#useHint[hidden] { display: none !important; }
@media (hover: none) { #useHint { display: none !important; } }

/* choice bubbles: the door's Look / Open / Slot / Sorry, the phone reply */
#bubbles {
  position: fixed; z-index: 32; left: 50%; transform: translateX(-50%); bottom: calc(118px + env(safe-area-inset-bottom));
  display: none; gap: 10px; flex-wrap: wrap; justify-content: center; width: min(560px, calc(100vw - 24px));
}
.bubble {
  min-width: 76px; min-height: 64px; padding: 6px 12px; border-radius: 20px; border: 3px solid var(--ink); cursor: pointer;
  background: var(--warm); font: inherit; font-size: 17px; font-weight: 900; color: var(--ink);
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; position: relative;
  box-shadow: 0 4px 0 rgba(0,0,0,.45); animation: pop .3s ease-out;
}
.bubble:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.45); }
.bubble kbd { position: absolute; top: -8px; right: -6px; background: var(--ink); color: #fff3da; border-radius: 7px; font: inherit; font-size: 12px; padding: 0 5px; }
@media (hover: none) { .bubble kbd { display: none; } }

/* one subtitle line (DESIGN §9.4): tap to skip */
#sub {
  position: fixed; z-index: 33; left: 50%; transform: translateX(-50%); bottom: max(calc(196px + env(safe-area-inset-bottom)), var(--bub-clear, 0px));
  max-width: min(620px, calc(100vw - 24px)); background: rgba(20,16,30,.82); color: #fff6e6; border-radius: 16px;
  padding: 8px 16px 10px; text-align: center; cursor: pointer; pointer-events: auto;
}
#sub[hidden] { display: none !important; }
.sub-name { display: block; font-size: 15px; font-weight: 900; }
.sub-name i { font-weight: 700; opacity: .8; }
.sub-text { display: block; font-size: clamp(20px, 5vw, 26px); font-weight: 800; line-height: 1.15; }

/* someone's at the door: an arrow at the screen edge */
#doorArrow { position: fixed; z-index: 29; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
#doorArrow[hidden] { display: none !important; }
#doorArrow .arrow-in {
  position: absolute; transform: rotate(var(--a)) translateY(calc(-1 * min(30vh, 30vw))) rotate(calc(-1 * var(--a))) translate(-50%, -50%);
  background: rgba(255,246,230,.92); border: 3px solid var(--ink); border-radius: 16px; padding: 4px 10px;
  display: flex; align-items: center; gap: 6px; font-weight: 900; font-size: 15px; white-space: nowrap; animation: bob 1s ease-in-out infinite;
  max-width: min(260px, 60vw);
}
@keyframes bob { 50% { margin-top: 5px; } }

/* control hints (controls only, never a verdict) */
#hint {
  position: fixed; z-index: 28; left: 50%; transform: translateX(-50%); top: calc(64px + env(safe-area-inset-top));
  background: rgba(20,16,30,.75); color: #fff3da; border-radius: 14px; padding: 6px 14px; font-weight: 800; font-size: 18px;
  pointer-events: none; text-align: center; max-width: calc(100vw - 24px);
}
#hint[hidden] { display: none !important; }

/* the peephole: a round dark edge over the fish-eye */
#peepmask { position: fixed; inset: 0; z-index: 20; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(0,0,0,0) 0, rgba(0,0,0,0) min(44vh, 46vw), rgba(8,6,10,.96) calc(min(44vh, 46vw) + 14px)); }
#peepmask[hidden] { display: none !important; }

/* the sleep curtain */
#fade { position: fixed; inset: 0; z-index: 40; background: #05060c; pointer-events: none; opacity: 0; }
#fade[hidden] { display: none !important; }

/* phones held sideways: everything a little lower and tighter */
@media (max-width: 500px) {
  #doorArrow .arrow-in { white-space: normal; text-align: left; line-height: 1.1; max-width: 150px; }
}
@media (max-height: 480px) {
  #joy { width: 112px; height: 112px; bottom: calc(10px + env(safe-area-inset-bottom)); }
  #useBtn { width: 76px; height: 76px; bottom: calc(14px + env(safe-area-inset-bottom)); }
  #bubbles { bottom: calc(12px + env(safe-area-inset-bottom)); width: min(420px, calc(100vw - 280px)); }
  .bubble { min-height: 56px; min-width: 64px; font-size: 15px; padding: 4px 8px; }
  #sub { bottom: max(calc(84px + env(safe-area-inset-bottom)), var(--bub-clear, 0px)); }
  .sub-text { font-size: 19px; }
  #hint { top: calc(52px + env(safe-area-inset-top)); font-size: 15px; }
}

/* ---------- full-screen pages ---------- */
.page {
  position: fixed; inset: 0; z-index: 9950; overflow: auto; touch-action: pan-y;
  background: rgba(24,18,30,.88); padding: calc(60px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
.page.soft { display: flex; align-items: center; justify-content: center; background: rgba(250,236,210,.55); backdrop-filter: blur(3px); }
.big-btn {
  min-height: 56px; min-width: 120px; padding: 8px 24px; border-radius: 18px; border: 3px solid var(--ink);
  background: linear-gradient(180deg, #ffd978, #f1b03f); font: inherit; font-size: 20px; font-weight: 900; color: var(--ink);
  cursor: pointer; box-shadow: 0 5px 0 #7a4f18;
}
.big-btn[hidden] { display: none !important; }
.big-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #7a4f18; }
.rep-head, .ff-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; max-width: 760px; margin: 0 auto 10px; flex-wrap: wrap; }
.rep-head h2, .ff-head h2 { margin: 0; color: #fff3da; font-size: clamp(22px, 6vw, 32px); }
.rep-rows { max-width: 760px; margin: 0 auto; display: grid; gap: 10px; }
.rep-row { display: flex; gap: 10px; background: var(--warm); border-radius: 16px; padding: 10px; border: 4px solid #cbb89a; }
.rep-row.real { border-color: #8cc57a; }
.rep-row.mimic { border-color: #9aa3c4; }
.rep-row.dusk { border-color: #c9a0e0; }
.rep-pics { display: flex; gap: 4px; flex: 0 0 auto; }
.rep-pics img { width: 72px; height: 72px; border-radius: 10px; background: #efe2c6; object-fit: cover; }
.rep-pics img.fogpic { background: #dfe6f0; }
.rep-kind { font-weight: 900; font-size: 18px; }
.rep-did { font-weight: 700; margin: 2px 0; }
.ff-count { color: #fff3da; font-weight: 800; }
.ff-grid { max-width: 760px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ff-page { background: #eef3fa; border-radius: 14px; padding: 8px; position: relative; text-align: center; border: 3px solid #b9c6dc; min-height: 150px; }
.ff-page.empty { background: rgba(255,255,255,.12); border: 3px dashed rgba(255,255,255,.35); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #cfd6e4; }
.ff-page.empty svg { opacity: .35; filter: grayscale(1); }
.ff-page.new { animation: pop .6s ease-out; border-color: #ffd24a; }
.ff-pics { display: flex; gap: 4px; justify-content: center; }
.ff-pics img { width: 62px; height: 62px; border-radius: 10px; background: #fff; }
.ff-name { font-weight: 900; margin-top: 4px; }
.ff-by, .ff-say { font-size: 13px; font-weight: 700; }
.ff-stamp { position: absolute; top: 6px; right: -4px; transform: rotate(12deg); background: #6fc16f; color: #fff; font-weight: 900; padding: 2px 8px; border-radius: 8px; font-size: 13px; }
.ff-stamp.sneak { background: #9a7fd1; }
@keyframes pop { from { transform: scale(.6); } 60% { transform: scale(1.08); } to { transform: none; } }
.mo-card { background: var(--warm); border: 4px solid var(--ink); border-radius: 22px; padding: 16px 18px; max-width: 460px; width: 92%; text-align: center; box-shadow: 0 8px 0 rgba(0,0,0,.3); }
.mo-card h2 { margin: 4px 0 10px; font-size: clamp(22px, 6vw, 30px); }
.mo-card p { font-size: 18px; font-weight: 700; }
#intro {
  position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: calc(64px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); text-align: center;
  background: linear-gradient(180deg, rgba(20,16,34,.62) 0%, rgba(20,16,34,0) 36%, rgba(20,16,34,0) 60%, rgba(20,16,34,.6) 100%);
}
#title-text { font-weight: 900; color: #fff3da; font-size: clamp(48px, 15vw, 96px); line-height: .95; letter-spacing: .02em; text-shadow: 0 4px 0 #3b2a1e, 0 8px 24px rgba(0,0,0,.6); }
.pitch { color: #fff3da; font-weight: 700; font-size: clamp(16px, 4.2vw, 22px); margin-top: 8px; text-shadow: 0 2px 6px rgba(0,0,0,.8); }
.title-btns { display: flex; flex-direction: column; align-items: center; gap: 10px; }
#playBtn, #resumeBtn {
  border: 4px solid var(--ink); cursor: pointer; font: inherit; font-size: 30px; font-weight: 900; color: var(--ink);
  background: linear-gradient(180deg, #ffd978, #f1b03f); padding: .35em 1.6em; min-height: 64px; border-radius: 22px; box-shadow: 0 6px 0 #7a4f18;
}
#playBtn:active:not(:disabled), #resumeBtn:active { transform: translateY(4px); box-shadow: 0 2px 0 #7a4f18; }
#playBtn:disabled { filter: grayscale(.4); opacity: .85; cursor: default; font-size: 22px; }
.sub-btn {
  min-height: 48px; padding: 6px 18px; border-radius: 16px; border: 3px solid var(--ink); background: #fff1c9; font: inherit;
  font-size: 18px; font-weight: 800; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 4px 0 rgba(0,0,0,.4);
}
#resume-curtain {
  position: fixed; inset: 0; z-index: 9970; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: linear-gradient(180deg, #2b2440, #120f1c); color: #fff3da; text-align: center;
}
#resume-curtain h2 { font-size: clamp(28px, 8vw, 48px); margin: 0; }
#resume-curtain p { font-size: 20px; margin: 0; }
.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); }
.big-btn.ready { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; }
.big-btn.ready:disabled { opacity: .5; }
#soonLine { color: #fff3da; font-weight: 800; font-size: 20px; background: rgba(20,16,30,.55); border-radius: 12px; padding: 4px 14px; }
#soonLine[hidden] { display: none; }
.page[hidden] { display: none !important; }
.sub-btn[hidden] { display: none !important; }
/* looking through the peephole / at the board: the bubbles drop out of the way */
@media (min-width: 600px) {
  body.looking #bubbles { bottom: calc(8px + env(safe-area-inset-bottom)); width: min(560px, calc(100vw - 240px)); }
  body.looking #sub { bottom: max(calc(86px + env(safe-area-inset-bottom)), var(--bub-clear, 0px)); }
}

/* ---------- the hunt (S4, 2026-10-01): hearts, ammo, crosshair, Fire + Torch, death ---------- */
#huntHud { position: fixed; z-index: 33; left: max(12px, env(safe-area-inset-left)); top: calc(58px + env(safe-area-inset-top)); pointer-events: none; }
body.mode-night #huntHud { display: flex; flex-direction: column; gap: 4px; }
#hearts { display: flex; gap: 2px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
#ammoNum { display: flex; align-items: center; gap: 6px; background: rgba(14,10,18,.72); color: #fff3da; border-radius: 12px; padding: 2px 10px 2px 6px; font-weight: 900; font-size: 20px; width: max-content; }
#ammoNum span { font-size: 15px; opacity: .8; }
#ammoNum[hidden] { display: none !important; }
#crosshair { position: fixed; z-index: 27; left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; pointer-events: none;
  border: 3px solid rgba(255,246,230,.85); border-radius: 50%; box-shadow: 0 0 0 2px rgba(0,0,0,.45); }
#crosshair::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: #fff3da; }
#crosshair.onTarget { border-color: #ff4a3a; }
#crosshair[hidden], body.looking #crosshair { display: none !important; }
/* CF 2026-10-01: the lock-on ring on the monster the pistol is aimed at */
#lockRing { position: fixed; z-index: 27; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; pointer-events: none;
  border: 3px solid #ff4a3a; border-radius: 50%; box-shadow: 0 0 8px rgba(255, 60, 40, 0.8); animation: lockPulse 0.8s ease-in-out infinite alternate; }
#lockRing i { position: absolute; background: #ff4a3a; }
#lockRing i:nth-child(1), #lockRing i:nth-child(2) { left: 50%; width: 3px; height: 9px; margin-left: -1.5px; }
#lockRing i:nth-child(1) { top: -11px; } #lockRing i:nth-child(2) { bottom: -11px; }
#lockRing i:nth-child(3), #lockRing i:nth-child(4) { top: 50%; height: 3px; width: 9px; margin-top: -1.5px; }
#lockRing i:nth-child(3) { left: -11px; } #lockRing i:nth-child(4) { right: -11px; }
#lockRing[hidden], body.looking #lockRing { display: none !important; }
@keyframes lockPulse { from { opacity: 0.75; } to { opacity: 1; } }
#fireBtn, #torchBtn { position: fixed; z-index: 31; border-radius: 50%; border: 4px solid var(--ink); cursor: pointer; padding: 0; font: inherit; color: #fff3da;
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
#fireBtn { right: max(18px, env(safe-area-inset-right)); bottom: calc(122px + env(safe-area-inset-bottom)); width: 80px; height: 80px;
  background: radial-gradient(circle at 40% 35%, #f0685a, #a8221a); box-shadow: 0 5px 0 #4a0d08; }
#fireBtn span { font-size: 13px; font-weight: 900; line-height: 1; }
#fireBtn:active { transform: translateY(3px); box-shadow: 0 2px 0 #4a0d08; }
#fireBtn[hidden] { display: none !important; }
#torchBtn { right: max(110px, calc(env(safe-area-inset-right) + 110px)); bottom: calc(132px + env(safe-area-inset-bottom)); width: 60px; height: 60px;
  background: radial-gradient(circle at 40% 35%, #5c6470, #262a31); box-shadow: 0 4px 0 #0c0d10; }
#torchBtn.on { background: radial-gradient(circle at 40% 35%, #fff2b0, #e2b53a); box-shadow: 0 4px 0 #6b4f0e, 0 0 18px rgba(255,220,120,.7); }
#fireBtn kbd, #torchBtn kbd { position: absolute; top: -6px; right: -4px; background: var(--ink); color: #fff3da; border-radius: 7px; font: inherit; font-size: 12px; padding: 0 5px; }
@media (hover: none) { #fireBtn kbd, #torchBtn kbd { display: none; } }
body:not(.mode-night) #fireBtn, body:not(.mode-night) #torchBtn { display: none !important; }
body.looking #torchBtn { display: none !important; }
/* Shoot is always on screen and always live (Katherine 2026-10-07): never
   hidden by a look view or the door's buttons; no gun yet = greyed, a tap says where it is */
#fireBtn.nogun { filter: grayscale(.85) brightness(.8); }
#huntToast { position: fixed; z-index: 33; left: 50%; top: calc(64px + env(safe-area-inset-top)); transform: translateX(-50%);
  background: rgba(20,16,30,.82); color: #fff3da; border: 3px solid #e2b53a; border-radius: 14px; padding: 6px 16px; font-weight: 900; font-size: 19px; pointer-events: none; white-space: nowrap; }
#huntToast[hidden] { display: none !important; }
#huntToast.pop { animation: toastPop .35s ease-out; }
@keyframes toastPop { from { transform: translateX(-50%) scale(.6); } 60% { transform: translateX(-50%) scale(1.08); } to { transform: translateX(-50%); } }
#hurtFlash { position: fixed; inset: 0; z-index: 26; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgba(160,0,0,0) 35%, rgba(170,0,0,.85) 100%); }
#deadPage { display: flex; align-items: center; justify-content: center; background: rgba(6,0,0,.9); z-index: 9960; }
#deadPage[hidden] { display: none !important; }
#lifePage { display: flex; align-items: center; justify-content: center; background: rgba(10,0,0,.72); z-index: 9960; }
#lifePage[hidden] { display: none !important; }
.dead-card p { color: #ffe9c8; font-size: clamp(18px, 5vw, 26px); margin: -10px 0 22px; text-shadow: 0 2px 0 #000; }
.dead-card .big-btn.huge { min-width: 280px; min-height: 76px; font-size: clamp(24px, 6vw, 34px); }
#lives { display: flex; gap: 3px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
#lives .life { fill: #ffd34a; stroke: #6b4a00; stroke-width: 1.2; }
#lives .life.lost { fill: rgba(255,255,255,.12); stroke: rgba(255,255,255,.35); }
#huntHud.protected #hearts { animation: protBlink .4s steps(2) infinite; }
@keyframes protBlink { 50% { opacity: .35; } }
.dead-card { text-align: center; animation: pop .5s ease-out; }
.dead-card h2 { color: #ff4a3a; font-size: clamp(30px, 9vw, 54px); margin: 0 0 24px; text-shadow: 0 3px 0 #000, 0 0 24px rgba(255,0,0,.5); letter-spacing: 1px; }
.dead-card .big-btn { display: block; margin: 0 auto 14px; min-width: 220px; min-height: 56px; }
.dead-card .sub-btn { display: block; margin: 0 auto; min-width: 160px; min-height: 48px; }
@media (max-height: 480px) {
  #fireBtn { width: 70px; height: 70px; bottom: calc(98px + env(safe-area-inset-bottom)); }
  #torchBtn { width: 54px; height: 54px; right: max(98px, calc(env(safe-area-inset-right) + 98px)); bottom: calc(18px + env(safe-area-inset-bottom)); }
  #huntHud { top: calc(48px + env(safe-area-inset-top)); }
}
/* narrow screens: the door's bubbles need the middle; Fire + Torch step aside */
@media (max-width: 600px) {
  body:has(#bubbles:not([hidden])) #torchBtn { display: none !important; }
  body:has(#bubbles:not([hidden])) #fireBtn { bottom: max(calc(122px + env(safe-area-inset-bottom)), calc(var(--bub-clear, 0px) + 6px)); }
}

/* Grandma's phones + the power slot (Katherine 2026-10-07) */
#powerBtn { position: fixed; z-index: 31; right: max(18px, env(safe-area-inset-right)); bottom: calc(214px + env(safe-area-inset-bottom));
  width: 80px; min-height: 64px; border-radius: 16px; border: 4px solid var(--ink); cursor: pointer; padding: 4px 2px; font: inherit; color: #fff3da;
  background: radial-gradient(circle at 40% 30%, #6c7bf0, #2a2f8a); box-shadow: 0 5px 0 #11133d; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
#powerBtn b { font-size: 12px; font-weight: 900; line-height: 1.05; text-align: center; }
#powerBtn span { font-size: 15px; font-weight: 900; line-height: 1; }
#powerBtn.empty { background: radial-gradient(circle at 40% 30%, #4a4f60, #23252e); box-shadow: 0 5px 0 #0c0d10; }
#powerBtn.empty span { font-size: 10px; font-weight: 700; opacity: .85; text-align: center; }
#powerBtn.live { box-shadow: 0 5px 0 #11133d, 0 0 20px rgba(140,170,255,.85); }
#powerBtn:active { transform: translateY(3px); }
#powerBtn kbd { position: absolute; top: -6px; right: -4px; background: var(--ink); color: #fff3da; border-radius: 7px; font: inherit; font-size: 12px; padding: 0 5px; }
@media (hover: none) { #powerBtn kbd { display: none; } }
body:not(.mode-night) #powerBtn { display: none !important; }
@media (max-height: 480px) { #powerBtn { width: 70px; min-height: 54px; bottom: calc(180px + env(safe-area-inset-bottom)); } }
#shieldWave { position: fixed; inset: 0; z-index: 27; pointer-events: none; opacity: 0; }
#shieldWave.go { animation: shieldGo .7s ease-out; background: radial-gradient(circle at 50% 55%, rgba(120,170,255,0) 10%, rgba(120,170,255,.75) 40%, rgba(120,170,255,0) 70%); }
#shieldWave.hit { animation: shieldHit .35s ease-out; background: radial-gradient(circle at 50% 50%, rgba(120,170,255,0) 45%, rgba(110,160,255,.7) 100%); }
@keyframes shieldGo { from { opacity: 1; transform: scale(.3); } to { opacity: 0; transform: scale(1.6); } }
@keyframes shieldHit { from { opacity: 1; } to { opacity: 0; } }
/* H4: secrets - the safe room, the note card, the pause-menu counter */
#allClear { position: fixed; z-index: 34; left: 50%; top: 32%; transform: translateX(-50%); text-align: center; pointer-events: none; animation: toastPop .5s ease-out; }
#allClear b { display: block; font-size: clamp(34px, 10vw, 64px); color: #7dff8a; text-shadow: 0 3px 0 #000, 0 0 30px rgba(80,255,120,.6); letter-spacing: 2px; }
#allClear span { display: block; color: #fff; font-size: clamp(14px, 4vw, 20px); text-shadow: 0 2px 0 #000; }
#allClear[hidden] { display: none !important; }
#barredShade { position: fixed; inset: 0; z-index: 5; pointer-events: none; box-shadow: inset 0 0 120px rgba(0,0,0,.55); }
#barredShade[hidden] { display: none !important; }
#noteCard { z-index: 40; }
#noteCard[hidden] { display: none !important; }
.note-card { background: #f6eed6; color: #2a2118; border-radius: 10px; padding: 22px 26px; max-width: min(92vw, 520px); margin: auto; box-shadow: 0 8px 30px rgba(0,0,0,.6); font-family: Georgia, serif; }
.note-card h3 { margin: 0 0 12px; font-size: clamp(18px, 5vw, 24px); }
.note-card p { font-style: italic; font-size: clamp(15px, 4.2vw, 19px); line-height: 1.45; margin: 0 0 18px; }
.kg-secrets-line { color: #ffe9a8; font-weight: 700; margin: 0 0 10px; text-align: center; }

/* item 12: the friends lobby */
#lobby { z-index: 9950; }
.lobby-card { max-width: 520px; }
.lobby-who { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 10px 0 14px; }
.lobby-who .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 14px; background: #fff1c9; border: 2px solid var(--ink); font-size: 16px; }
.lobby-who .chip i { font-style: normal; font-size: 12px; font-weight: 800; opacity: .7; }
.lobby-who .chip.ready { background: #c9f5c9; }
.lobby-who .chip.ready i { opacity: 1; color: #1d6b2a; }
.lobby-who .chip.me { outline: 3px solid #f1b03f; }
.lobby-btns { display: flex; flex-direction: column; align-items: center; gap: 8px; }
#lobbyReady.on { background: #c9f5c9; }

/* A loot toast and an encounter warning can arrive together. */
body:has(#hint:not([hidden])) #huntToast { top: calc(108px + env(safe-area-inset-top)); }

.keeper-objective { position:fixed; top:80px; left:50%; transform:translateX(-50%); max-width:min(540px,85vw); padding:8px 14px; border:1px solid #e0bc79; border-radius:12px; background:#18252bea; color:#fff2cf; font:600 14px/1.4 system-ui; text-align:center; pointer-events:none; z-index:12; }
#endingCard .note-card { max-width:600px; }
#endingText { line-height:1.7; }
#relayChoice button { display:block; width:100%; margin-top:12px; }
#noteCard { z-index:11000; }

/* The old dial-a-number power control is retired, including old save files. */
#powerBtn[hidden] { display: none !important; }

#nightClock{position:fixed;right:max(16px,env(safe-area-inset-right));top:70px;z-index:25;background:#192339e8;color:#fff3c9;border:2px solid #d6ba75;border-radius:14px;padding:8px 15px;font:800 24px/1.2 system-ui;box-shadow:0 3px 12px #0008;pointer-events:none;font-variant-numeric:tabular-nums}
#nightClock.last-minute{animation:sunriseClock 1s ease-in-out infinite;border-color:#ffbd83}
@keyframes sunriseClock{50%{background:#613347;color:#fff}}
@media(prefers-reduced-motion:reduce){#nightClock.last-minute{animation:none;background:#613347}}
@media(max-width:600px){#nightClock{top:66px;font-size:19px;padding:6px 10px}}
.rep-head small{display:block;font-size:.65em;margin-top:4px}

/* Notices share one flow layout. Their height follows the actual words,
   including narrow screens and larger text; subtitles stay above choices. */
#noticeStack {position:fixed;z-index:34;top:calc(62px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:min(620px,calc(100vw - 300px));display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;}
#noticeStack #hint,#noticeStack #huntToast,#noticeStack #keeperObjective,#noticeStack #doorArrow {position:static;transform:none;top:auto;left:auto;width:auto;height:auto;max-width:100%;margin:0;box-sizing:border-box;}
#noticeStack #huntToast.pop {animation:none;}
#noticeStack #doorArrow .arrow-in {position:static;transform:none;animation:none;max-width:100%;white-space:normal;line-height:1.2;box-sizing:border-box;text-align:left;}
#doorArrow .arrow-in span {min-width:0;overflow-wrap:anywhere;}
#doorArrow .arrow-in svg {flex:none;}
.door-direction {display:inline-block;flex:none;transform:rotate(var(--a));font-size:25px;}
@media(max-width:600px){#noticeStack {top:calc(146px + env(safe-area-inset-top));width:calc(100vw - 24px);gap:4px;}#noticeStack #hint,#noticeStack #huntToast {font-size:15px;padding:5px 9px;}#noticeStack .arrow-in {font-size:14px;}#sub .sub-text {font-size:20px;}}
@media(max-height:480px){#noticeStack {top:calc(54px + env(safe-area-inset-top));width:calc(100vw - 290px);gap:3px;}#noticeStack #hint,#noticeStack #huntToast,#noticeStack .arrow-in {font-size:13px;padding:3px 7px;}#noticeStack .keeper-objective{font-size:12px;}#sub {max-width:calc(100vw - 270px);padding:5px 9px;}#sub .sub-text {font-size:17px;}}

#sub {width:min(620px,calc(100vw - 24px));box-sizing:border-box;}

#bonusHearts{display:flex;gap:2px;height:26px}#bonusHearts:empty{display:none}#bonusHearts svg path:first-child{fill:#63efff}.rescue-btn{display:block;margin:12px auto;background:#63dfec;color:#18213a}