:root{--ink:#f2ece0;--dim:#b6ada0;--panel:rgba(16,14,12,.82);--edge:rgba(226,214,190,.18);--accent:#d9c98f;--warn:#e8996a;--good:#a9d17f;color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:#0d0b0a;color:var(--ink);font:15px/1.5 "Iowan Old Style",Georgia,"Times New Roman",serif;overflow:hidden}
#game{position:fixed;inset:0;width:100%;height:100%;display:block}
#vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 42%,rgba(0,0,0,.62) 100%)}
.hidden{display:none!important}
button{font:inherit;color:var(--ink);background:rgba(30,26,22,.9);border:1px solid var(--edge);border-radius:11px;padding:11px 16px;cursor:pointer;transition:.15s}
button:hover{background:rgba(48,42,34,.95);border-color:rgba(226,214,190,.4)}
button.primary{background:var(--accent);color:#1a1512;border-color:transparent;font-weight:600}
/* A button that cannot be pressed yet — the start button in a room of one —
   says so, and stops answering the mouse. */
button:disabled{opacity:.45;cursor:default;pointer-events:none}
button.primary:hover{background:#e7d9a6}
button small{display:block;font-size:11px;opacity:.72;font-weight:400;letter-spacing:.04em}
/* Every screen you are not playing on -- the front door, the waiting room, the
   scoreboard -- is the hall of the house itself, and everything on it stands
   down the middle of that hall. It used to be a column pinned to the left edge
   over a sideways gradient, which read as a panel bolted onto a game rather
   than the way in to one. The photograph is behind a scrim heavy enough to read
   serif text over and light enough to still be a room. */
.screen{position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:min(7vw,64px);padding-top:max(min(7vw,64px),72px);text-align:center;overflow:auto;
  background:
    radial-gradient(ellipse 74% 54% at 50% 44%,rgba(9,8,7,.72) 0%,rgba(9,8,7,.5) 58%,rgba(6,5,5,.72) 100%),
    linear-gradient(180deg,rgba(6,5,5,.86) 0%,rgba(6,5,5,.1) 30%,rgba(6,5,5,.16) 64%,rgba(6,5,5,.88) 100%),
    #0d0b0a url("/chase/assets/corridor/house/front-door.webp") center/cover no-repeat}
/* The waiting room is a different room from the front door: the parlour off the
   hall, with the mask already hanging on the wall. Walking from one to the other
   should feel like walking further into the house rather than like the same
   picture with different words on it. */
#lobby{background-image:
  radial-gradient(ellipse 70% 52% at 50% 42%,rgba(9,8,7,.58) 0%,rgba(9,8,7,.3) 56%,rgba(6,5,5,.56) 100%),
  linear-gradient(180deg,rgba(6,5,5,.8) 0%,rgba(6,5,5,.04) 26%,rgba(6,5,5,.08) 62%,rgba(6,5,5,.84) 100%),
  url("/chase/assets/corridor/house/waiting-room.webp")}
/* A kicker with a rule either side of it, which is what turns a line of small
   caps into a title page. */
.screen > .kicker{display:flex;align-items:center;justify-content:center;gap:12px}
.screen > .kicker::before,.screen > .kicker::after{content:"";height:1px;width:clamp(18px,7vw,64px);background:linear-gradient(90deg,transparent,var(--accent))}
.screen > .kicker::after{background:linear-gradient(90deg,var(--accent),transparent)}
/* Everything in a centred column is centred with it, and nothing is allowed to
   run the full width of a desk monitor. */
.screen > *{width:100%;max-width:560px;margin-inline:auto}
.screen > h1,.screen > h2,.screen > .kicker,.screen > .lede,.screen > .error{max-width:46ch}
/* One line of prose, so it is not broken over two with a word on its own. */
.screen > .fine{max-width:min(100%,62ch)}
button.link small{white-space:nowrap}
.kicker{margin:0;font:600 11px/1 ui-sans-serif,system-ui;letter-spacing:.24em;color:var(--accent);text-transform:uppercase}
h1{margin:0;font-size:clamp(34px,6vw,60px);line-height:1.04;letter-spacing:-.02em}
/* The one lit house in a dark garden, over the name. Inline rather than a
   file because an .svg served without image/svg+xml is not drawn at all, and
   the local development service has no mime type for one. */
#menu h1::before{content:"";display:block;width:clamp(76px,11vw,116px);height:clamp(47px,6.8vw,72px);margin:0 auto 10px;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 74%22 width=%22120%22 height=%2274%22 role=%22img%22 aria-label=%22A lit house between two firs%22%3E %3Cg fill=%22none%22 stroke=%22%23e6c98d%22 stroke-width=%221.6%22 stroke-linejoin=%22round%22 stroke-linecap=%22round%22%3E %3Cg opacity=%22.62%22%3E %3Cpath d=%22M18 66V56M18 30l7 11h-14zM18 38l9 13h-18zM18 46l11 15h-22z%22/%3E %3Cpath d=%22M102 66V56M102 30l7 11h-14zM102 38l9 13h-18zM102 46l11 15h-22z%22/%3E %3C/g%3E %3Cpath d=%22M34 66V33h52v33z%22/%3E %3Cpath d=%22M28 35 60 10l32 25%22/%3E %3Cpath d=%22M34 33h52%22 opacity=%22.7%22/%3E %3C/g%3E %3Cg fill=%22%23f0cf8f%22%3E %3Crect x=%2253%22 y=%2220%22 width=%2214%22 height=%2212%22 rx=%221%22/%3E %3Crect x=%2241%22 y=%2245%22 width=%2214%22 height=%2214%22 rx=%221%22/%3E %3Crect x=%2265%22 y=%2245%22 width=%2214%22 height=%2214%22 rx=%221%22/%3E %3C/g%3E %3Cg stroke=%22%231b1512%22 stroke-width=%221.3%22 opacity=%22.85%22%3E %3Cpath d=%22M60 20v12M53 26h14%22/%3E %3Cpath d=%22M48 45v14M41 52h14%22/%3E %3Cpath d=%22M72 45v14M65 52h14%22/%3E %3C/g%3E %3Cpath d=%22M55 66V52a5 5 0 0 1 10 0v14z%22 fill=%22none%22 stroke=%22%23e6c98d%22 stroke-width=%221.6%22 stroke-linejoin=%22round%22/%3E %3Cpath d=%22M6 66h108%22 stroke=%22%23e6c98d%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 opacity=%22.5%22/%3E %3C/svg%3E") center/contain no-repeat}
h2{margin:0;font-size:clamp(24px,4vw,36px)}
h3{margin:0 0 4px;font-size:15px}
.lede{margin:0;color:var(--dim);max-width:46ch;margin-inline:auto}
.actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
/* The two doors of the front screen: make a room, or walk into one with a code
   somebody gave you. They are the same size and sit side by side, because they
   are the two things you can do here and neither is a footnote to the other. */
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:12px;max-width:560px;margin-inline:auto;width:100%}
.door{display:flex;flex-direction:column;justify-content:center;gap:6px;min-height:104px;padding:15px 17px;text-align:left;border-radius:14px}
.door small{display:block;font-size:11px;opacity:.74;font-weight:400;letter-spacing:.04em}
form.door{display:grid;grid-template-columns:1fr auto;grid-template-areas:"label label" "input button";gap:8px;align-content:center;background:rgba(30,26,22,.9);border:1px solid var(--edge)}
form.door label{grid-area:label;margin-bottom:0}
form.door input{grid-area:input;min-width:0;width:100%}
form.door button{grid-area:button;white-space:nowrap}
/* The quiet third way in. It is a button because it does something rather than
   goes somewhere, and it reads as a line of text because practising alone is
   not one of the two doors. */
button.link{background:none;border:0;padding:0;color:var(--accent);font:inherit;font-size:13px;text-align:center;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
button.link:hover{background:none;color:#e7d9a6}
button.link small{display:inline;margin-left:7px;font-size:11px;opacity:.7;text-decoration:none}
/* The room code, big enough to read out across a room and copyable with one
   tap, because reading six characters to a friend is the whole front door. */
/* Six characters read out loud across a room is the entire job of this screen,
   so they are set on a brass-edged plate rather than in a panel: a double rule,
   a dark ground the gold can burn against, and room to breathe round it. */
.code-card{display:grid;gap:6px;justify-items:center;padding:16px 22px;background:linear-gradient(180deg,rgba(12,10,9,.82),rgba(20,16,13,.88));border:1px solid rgba(214,187,124,.5);border-radius:14px;max-width:min(100%,440px);margin-inline:auto;box-shadow:0 0 0 1px rgba(0,0,0,.55) inset,0 0 0 4px rgba(12,10,9,.55),0 0 0 5px rgba(214,187,124,.22),0 18px 44px rgba(0,0,0,.45)}
.code-label{font:600 10px/1 ui-sans-serif,system-ui;letter-spacing:.24em;text-transform:uppercase;color:rgba(214,187,124,.72)}
button.code{padding:0;border:0;background:none;color:#f0dda4;font:700 clamp(32px,6.4vw,50px)/1.08 ui-monospace,SFMono-Regular,monospace;letter-spacing:.22em;text-indent:.22em;cursor:pointer;text-shadow:0 0 22px rgba(226,190,110,.32)}
button.code:hover{background:none;color:#f0e4b4}
button.code:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}
.code-hint{font-size:12px;color:var(--dim)}
.join{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.join label{font:600 10px/1 ui-sans-serif,system-ui;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);display:block;margin-bottom:6px}
input{font:inherit;color:var(--ink);background:rgba(0,0,0,.42);border:1px solid var(--edge);border-radius:10px;padding:10px 12px;min-width:150px}
input::placeholder{color:#6f6659;letter-spacing:.1em}
.error{color:var(--warn);margin:0;min-height:1.2em}
.fine{margin:0;font-size:13px;color:var(--dim)}
.fine a{color:var(--accent)}
#identity{display:flex;flex-direction:column;align-items:center;gap:7px}
/* Signed in, and shown whose account it is: a RumyFriend house has no guests
   in it, so the front door says who it has let in rather than nothing. */
.signed-in{font-size:14px;color:var(--ink)}
.rf-id{font:600 10px/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.14em;color:var(--accent);background:rgba(217,201,143,.1);border:1px solid rgba(217,201,143,.28);border-radius:999px;padding:5px 10px}
.signed-out{font:600 10px/1 ui-sans-serif,system-ui;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
#identity label{display:inline-flex;flex-direction:column;align-items:center;gap:6px;font:600 10px/1 ui-sans-serif,system-ui;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
#identity input{text-align:center;letter-spacing:.02em;text-transform:none;font:inherit;font-size:15px;font-weight:400;letter-spacing:normal}
#roster{display:grid;gap:6px;max-width:560px;margin-inline:auto;width:100%;text-align:left}
.player-row{display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:center;padding:8px 10px;background:rgba(255,255,255,.045);border-radius:9px}
.uniform{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;font:700 11px ui-sans-serif,system-ui;color:#17130f}
.readiness{font-size:12px;color:var(--dim)}
#chat{display:grid;gap:8px}
#messages{max-height:150px;overflow:auto;font-size:13px;display:grid;gap:3px;color:var(--dim)}
#chat-form{display:flex;gap:8px}
#chat-form input{flex:1}
#hud{position:fixed;inset:0;z-index:4;pointer-events:none;font-family:ui-sans-serif,system-ui,sans-serif}
#hud>*{pointer-events:auto}
.hud-top{position:absolute;top:14px;left:50%;transform:translateX(-50%);display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;pointer-events:none}
.chip{background:var(--panel);border:1px solid var(--edge);border-radius:999px;padding:6px 13px;font:600 11px/1 ui-sans-serif,system-ui;letter-spacing:.12em;text-transform:uppercase;backdrop-filter:blur(7px)}
#role-chip.it{background:#7a2f24;border-color:#c26a53}
#role-chip.spirit{background:#2b4256;border-color:#8fd0ff;color:#dff1ff}
#role-chip.covered{background:#1f3a2a;border-color:#a9d17f;color:#e2f3d6}
/* Found: the dark red of a round that is over for you, and not the bright red
   of the person who ended it. */
#role-chip.gone{background:#37211d;border-color:#9a6053;color:#f0d5cc}
/* How many are hunting, and — when there are two of you — who the other one
   is. A hider counts them; IT is told it is not alone. */
#hunt-chip{background:rgba(122,47,36,.6);border-color:#c26a53;color:#ffdfd4}
#hunt-chip.mine{background:#7a2f24;border-color:#e0a08a;color:#ffe6dc}
.timer{background:var(--panel);border:1px solid var(--edge);border-radius:999px;padding:6px 16px;font:700 19px/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.06em}
.timer.urgent{color:var(--warn);border-color:var(--warn)}
#centre{position:absolute;top:34%;left:0;right:0;padding:0 18px;text-align:center;pointer-events:none;text-shadow:0 2px 14px rgba(0,0,0,.85)}
#headline{margin:0;font:700 clamp(26px,5vw,52px)/1.06 "Iowan Old Style",Georgia,serif}
/* A line of prose, not a banner: it wraps inside a column a reader's eye can
   follow, and on a phone it wraps rather than running off both edges. */
#sub{margin:8px auto 0;max-width:min(100%,64ch);font-size:14px;color:#e0d6c4;opacity:.9;text-wrap:pretty}
#crosshair{position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid rgba(240,230,205,.75);border-radius:50%;pointer-events:none}
#crosshair.hot{border-color:var(--accent);box-shadow:0 0 12px rgba(217,201,143,.75)}
#target{position:absolute;top:calc(50% + 22px);left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid var(--edge);border-radius:9px;padding:6px 12px;font-size:13px;white-space:nowrap}
#prompt{position:absolute;bottom:132px;left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid var(--accent);border-radius:10px;padding:9px 16px;font-size:14px;white-space:nowrap}
#prompt b{color:var(--accent)}
/* The water prompt stands ABOVE the S prompt rather than replacing it: S keeps
   every job it had, and this is a new one beside it. Cooler than the accent,
   so at a glance the two lines are plainly two different buttons. */
#prompt-space{position:absolute;bottom:196px;left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid #6fb7d6;border-radius:10px;padding:9px 16px;font-size:14px;white-space:nowrap}
#prompt-space b{color:#bfe8ff}
#prompt-space i{display:block;margin-top:4px;font-size:12px;font-style:normal;letter-spacing:.04em;color:#8fb9cf;text-transform:none}
/* The second line of a prompt: what the place you are standing in is doing
   for you, under what the button in your thumb is about to do. */
#prompt i{display:block;margin-top:4px;font-size:12px;font-style:normal;letter-spacing:.04em;color:#9fd3ff;text-transform:none}
#prompt i b{color:#dff1ff}
#stair-fade{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .11s linear;z-index:40}
#stair-fade.on{opacity:.82}
#hearing{position:absolute;top:78px;left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid var(--edge);border-radius:999px;padding:7px 16px;display:flex;gap:10px;align-items:center;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
#hearing i{display:block;height:6px;width:90px;border-radius:3px;background:linear-gradient(90deg,var(--warn),var(--accent));transform-origin:left;transition:transform .2s}
/* The signal itself. Colour says how many floors away it was — red on your
   own floor, amber one away, green two or more — and the size says how near,
   which is the only bearing a hunter is ever given. */
#hearing b{display:block;border-radius:50%;flex:0 0 auto;width:22px;height:22px;transition:transform .18s,background .18s,box-shadow .18s;background:#5ad07a;box-shadow:0 0 10px rgba(90,208,122,.55)}
#hearing.floor-0 b{background:#ff5a4d;box-shadow:0 0 16px rgba(255,90,77,.7)}
#hearing.floor-1 b{background:#ffc046;box-shadow:0 0 13px rgba(255,192,70,.6)}
#hearing-floor{opacity:.62;font-size:11px}
#feed{position:absolute;left:16px;bottom:120px;display:grid;gap:5px;max-width:min(46vw,330px);pointer-events:none}
.feed-line{background:var(--panel);border-left:3px solid var(--accent);border-radius:0 8px 8px 0;padding:6px 11px;font-size:12.5px;animation:slide .25s ease}
.feed-line.bad{border-left-color:var(--warn)}
.feed-line.good{border-left-color:var(--good)}
@keyframes slide{from{opacity:0;transform:translateX(-10px)}}
#it-panel{position:absolute;right:16px;top:66px;display:grid;gap:8px}
.counter{background:var(--panel);border:1px solid var(--edge);border-radius:10px;padding:8px 14px;text-align:center;min-width:88px}
.counter b{display:block;font:700 21px/1 ui-monospace,monospace}
.counter span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
#trap-panel{position:absolute;right:16px;bottom:120px;width:min(300px,42vw);background:var(--panel);border:1px solid var(--edge);border-radius:13px;padding:14px}
#trap-panel p{margin:0 0 9px;font-size:12px;color:var(--dim)}
#trap-rooms{display:grid;gap:5px;max-height:38vh;overflow:auto}
#trap-rooms button{padding:7px 10px;font-size:12.5px;text-align:left}
#trap-rooms button.armed{background:#7a2f24;border-color:#c26a53}
#trap-rooms button:disabled{opacity:.4;cursor:default}
#touch{position:absolute;left:0;right:0;bottom:18px;display:flex;justify-content:space-between;align-items:flex-end;padding:0 18px;gap:12px}
#joystick{position:relative;width:118px;height:118px;border-radius:50%;background:rgba(20,17,14,.5);border:1px solid var(--edge);touch-action:none}
#stem{position:absolute;left:50%;top:50%;height:3px;background:rgba(226,214,190,.34);transform-origin:left center;border-radius:2px}
#knob{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(226,214,190,.28);border:1px solid var(--edge)}
/* The thumb buttons live on the right of the stick, and they stay on the right
   when there is no stick: a body that has been found does not walk, so the
   stick goes, and space-between would slide the one button left that is still
   worth pressing into the corner the stick just left. */
#pad{display:flex;gap:12px;align-items:flex-end;margin-left:auto}
#button-a,#button-s,#button-q,#button-f{width:78px;height:78px;border-radius:50%;font:700 19px ui-sans-serif,system-ui;display:grid;place-items:center;touch-action:none}
#button-q{width:66px;height:66px;font-size:16px;border-color:#8fd0ff;color:#dff1ff;background:rgba(28,44,60,.85)}
/* The spirit's own second button: go to where IT is. Cooler than Q on
   purpose -- it is the colder half of being dead -- and it greys out
   while the spirit is waiting to be allowed to jump again. */
#button-f{width:66px;height:66px;font-size:16px;border-color:#9fb8ff;color:#e6ecff;background:rgba(30,36,62,.85)}
#button-f.waiting{opacity:.45;border-color:rgba(159,184,255,.35)}
#button-f.pressed{background:#9fb8ff;color:#141a2e;border-color:transparent}
#button-space{width:66px;height:66px;border-radius:50%;font:700 12px ui-sans-serif,system-ui;display:grid;place-items:center;touch-action:none;border-color:#6fb7d6;color:#dff4ff;background:rgba(24,46,56,.85)}
#button-space small{font-size:9px;letter-spacing:.1em}
#button-space.pressed{background:#6fb7d6;color:#0b232e;border-color:transparent}
#button-a small,#button-s small,#button-q small,#button-f small{font-size:9px;letter-spacing:.1em}
#button-s.pressed,#button-a.pressed{background:var(--accent);color:#1a1512}
/* A button that would do nothing if you pressed it says so. */
#button-s.spent{opacity:.4}
#button-q.pressed{background:#8fd0ff;color:#0d2233;border-color:transparent}
.ghost{background:rgba(16,14,12,.6)}
#score-table table{width:100%;border-collapse:collapse;font-size:13.5px}
#score-table th{text-align:left;font:600 10px/1 ui-sans-serif,system-ui;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);padding:0 8px 7px 0}
#score-table td{padding:7px 8px 7px 0;border-top:1px solid rgba(226,214,190,.11)}
#score-table td:first-child{display:flex;gap:8px;align-items:center}
.status{position:fixed;left:14px;bottom:10px;margin:0;font:600 10px/1 ui-sans-serif,system-ui;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);z-index:6}
#fatal{position:fixed;inset:0;z-index:9;display:grid;place-items:center;padding:40px;background:#0d0b0a;text-align:center}
body.caught #vignette{background:radial-gradient(ellipse at center,transparent 20%,rgba(84,20,14,.78) 100%)}
body.hidden-in #vignette{background:radial-gradient(ellipse at center,rgba(150,205,255,.06) 30%,rgba(18,34,52,.72) 96%);box-shadow:inset 0 0 140px rgba(160,215,255,.22)}
/* Flat on the floor the world closes in from top and bottom, the way it does
   when your cheek is on the boards. */
body.prone #vignette{background:linear-gradient(180deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.2) 30%,rgba(0,0,0,.2) 62%,rgba(0,0,0,.86) 100%),radial-gradient(ellipse at center,transparent 38%,rgba(0,0,0,.7) 100%)}
body.covered:not(.prone) #vignette{box-shadow:inset 0 0 120px rgba(120,190,120,.14)}
@media (max-width:640px){/* The hall stays on a phone; the scrim over it gets heavier, because the
   text sits on far less of it. */
.screen{padding:min(7vw,64px) 20px;padding-top:76px;background:radial-gradient(ellipse 120% 52% at 50% 42%,rgba(9,8,7,.78) 0%,rgba(9,8,7,.62) 62%,rgba(6,5,5,.82) 100%),linear-gradient(180deg,rgba(6,5,5,.9) 0%,rgba(6,5,5,.24) 26%,rgba(6,5,5,.3) 62%,rgba(6,5,5,.92) 100%),#0d0b0a url("/chase/assets/corridor/house/front-door.webp") center/cover no-repeat}#feed{max-width:60vw;bottom:150px}#trap-panel{width:min(260px,60vw)}
#prompt{white-space:normal;width:max-content;max-width:min(88vw,330px);bottom:150px;text-align:center}
#prompt-space{white-space:normal;width:max-content;max-width:min(88vw,330px);bottom:214px;text-align:center}
#centre{padding:0 22px}
/* Three thumb buttons and a stick have to share a phone's width. */
#pad{gap:8px}#button-a,#button-s{width:64px;height:64px;font-size:17px}#button-q{width:54px;height:54px;font-size:14px}#button-space{width:54px;height:54px;font-size:10px}#joystick{width:104px;height:104px}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* The sound controls, the exit control and its confirmation.

   The three controls sit in the top right in the order every game puts them
   in — mute the music, how loud the music is, mute the sound effects — inside
   one pill, so they read as one control rather than three loose buttons, in
   the same panel-and-blur as every other chip on the HUD. */
#top-right{position:absolute;top:14px;right:14px;display:flex;gap:8px;align-items:center}
#top-right button{padding:7px 13px;font-size:12px}
/* The way out sits above every screen — the front door, the waiting room, the
   round and the scoreboard — and under the dialog that asks about it. */
#exit-all{position:fixed;top:14px;left:14px;z-index:7;padding:7px 13px;font-size:12px}
#sound{display:flex;align-items:center;gap:6px;padding:3px 11px 3px 3px;background:var(--panel);border:1px solid var(--edge);border-radius:999px;backdrop-filter:blur(7px)}
.sound-switch{position:relative;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:var(--ink);transition:background .15s}
.sound-switch:hover{background:rgba(226,214,190,.12)}
/* The checkbox IS the button: invisible, on top, filling the whole target, so
   that a mouse, a thumb, the tab key and a screen reader all get hold of the
   same thing — and it announces itself as a switch that is on or off. */
.sound-switch input{position:absolute;inset:0;width:100%;height:100%;min-width:0;margin:0;padding:0;border:0;border-radius:50%;background:none;-webkit-appearance:none;appearance:none;opacity:0;cursor:pointer;touch-action:manipulation}
.sound-switch svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.sound-switch .cut{stroke:var(--warn);opacity:0;transition:opacity .12s}
.sound-switch input:checked~svg{color:var(--dim)}
.sound-switch input:checked~svg .cut{opacity:1}
.sound-switch input:focus-visible~svg{color:var(--accent)}
.sound-switch:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.sound-level{display:flex;align-items:center;gap:7px}
#volume{width:84px;height:16px;min-width:0;margin:0;padding:0;border:0;border-radius:0;background:none;accent-color:var(--accent);cursor:pointer;touch-action:none}
#volume:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:3px}
#volume-value{min-width:31px;text-align:right;font:600 11px/1 ui-monospace,SFMono-Regular,monospace;color:var(--accent);font-variant-numeric:tabular-nums}
/* Muted music greys out its own volume, and nothing else: the effects mute is
   a different switch and leaves the music exactly where it was. */
#sound:has(#mute-music:checked) .sound-level{opacity:.45}
/* A phone gives this corner a third of a screen and the exit control wants the
   other side of it. Everything tightens and the readout goes (the bar itself
   says how loud it is); on a screen too narrow even for that, the leave button
   drops under the pill rather than either of them climbing over the exit —
   which is why the two floating panels below start lower down on a phone. */
@media (max-width:640px){
#top-right{gap:5px;flex-wrap:wrap;justify-content:flex-end;max-width:calc(100% - 156px)}
#sound{gap:3px;padding:2px 7px 2px 2px}
.sound-switch{width:29px;height:29px}
.sound-switch svg{width:17px;height:17px}
#volume{width:48px}
#volume-value{display:none}
#top-right button,#exit-all{padding:6px 9px;font-size:11px}
#it-panel{top:104px}
#hearing{top:96px}}
#confirm{position:fixed;inset:0;z-index:8;display:grid;place-items:center;background:rgba(6,5,4,.72);backdrop-filter:blur(3px)}
.confirm-card{width:min(430px,88vw);background:#141110;border:1px solid var(--edge);border-radius:16px;padding:22px;display:grid;gap:12px;text-align:left}
.confirm-card h2{margin:0;font-size:24px}
.confirm-card p{margin:0;color:var(--dim);font-size:14px}
.confirm-card .actions{margin-top:4px}

/* The answer to a search, big enough that it cannot be missed. */
#verdict{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);min-width:min(360px,74vw);padding:16px 26px;border-radius:14px;text-align:center;background:rgba(14,12,11,.9);border:2px solid var(--edge);backdrop-filter:blur(8px);pointer-events:none;animation:verdict .22s ease}
#verdict b{display:block;font:700 clamp(20px,3.2vw,34px)/1.15 "Iowan Old Style",Georgia,serif;letter-spacing:-.01em}
#verdict span{display:block;margin-top:5px;font-size:13px;color:var(--dim)}
#verdict.found{border-color:var(--good);background:rgba(24,40,20,.92)}
#verdict.found b{color:var(--good)}
#verdict.warm{border-color:var(--accent);background:rgba(42,34,16,.92)}
#verdict.warm b{color:var(--accent)}
#verdict.empty b{color:#cdc3b2}
#verdict.refused{border-color:var(--warn);background:rgba(44,24,18,.92)}
#verdict.refused b{color:var(--warn)}
@keyframes verdict{from{opacity:0;transform:translate(-50%,-58%) scale(.95)}}
#target.searched{border-color:var(--warn);color:var(--dim)}

/* The spirit notice. Top left under the way out, where the eye already goes,
   and quiet enough to read past while you are walking. */
#projected{position:fixed;left:14px;top:58px;z-index:36;max-width:290px;padding:10px 13px;
  border-radius:12px;border:1px solid rgba(150,205,255,.42);background:rgba(14,26,38,.82);
  backdrop-filter:blur(7px);color:#dff1ff;font-size:12px;line-height:1.45;
  box-shadow:0 8px 26px rgba(0,0,0,.45)}
#projected b{display:block;font-size:13px;letter-spacing:.02em;margin-bottom:3px;color:#eaf6ff}
/* A key named inside the notice is a key, not a heading. */
#projected span b{display:inline;font-size:inherit;margin:0}
/* The notice has two versions of itself and the body says which: a hider is out
   there to look back at their own cover, somebody already found is out there
   because the house is worth a walk. Only ever one of them is in the box. */
#projected .while-found{display:none}
body.found #projected .while-hiding{display:none}
body.found #projected .while-found{display:block}
@media (max-width:640px){#projected{max-width:180px;font-size:11px;top:52px}}