:root {
  --cream: #f6eedc;
  --ink: #2a2320;
  --brass: #c9a24f;
  --rose: #e9b9b0;
  --mint: #a9d3bf;
  --lilac: #c7b4d9;
  --mustard: #e1b94d;
  --powder: #b6cfe0;
  --burgundy: #7b2b33;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #120f10; overflow: hidden; }
body { display: grid; place-items: center; font-family: "Work Sans", "Futura", system-ui, sans-serif; color: var(--cream); user-select: none; }

#stage { position: relative; width: 100vw; height: 100vh; overflow: hidden; overflow: clip; background: #120f10; container-type: size; perspective: 1100px; }
#world { position: absolute; inset: 0; transform-origin: 50% 50%; transform-style: preserve-3d; }
#para { position: absolute; transform-style: preserve-3d; will-change: transform; }
#bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; transition: opacity .6s; }
#layer { position: absolute; inset: 0; transform-style: preserve-3d; }
#stage.sway #world { animation: sway 7s ease-in-out infinite; }
@keyframes sway { 0%, 100% { rotate: 0deg; translate: 0 0; } 30% { rotate: .12deg; translate: 0 .15cqh; } 60% { rotate: -.1deg; translate: 0 -.1cqh; } }

#vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 60%, rgba(20,10,12,.55) 100%); }
#grain { position: absolute; inset: -50%; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain .5s steps(4) infinite; }
@keyframes grain { 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } }
#flash, #fade { position: absolute; inset: 0; pointer-events: none; }
#flash { background: #fff6e0; opacity: 0; }
#fade { background: #120f10; opacity: 1; }

/* glows painted on top of the scene (lamps, the call-board bulb) */
.glow { position: absolute; pointer-events: none; mix-blend-mode: screen; border-radius: 50%; }
.glow.warm { background: radial-gradient(circle, rgba(255,200,120,.55), rgba(255,180,100,.15) 50%, transparent 70%); }
.glow.ring { background: radial-gradient(circle, rgba(255,235,170,.95), rgba(255,200,90,.35) 40%, transparent 70%); animation: blink .5s steps(2) infinite; }
/* light under a door: a thin warm line on the carpet that someone inside has switched on */
.glow.under7 { border-radius: 40%; background: radial-gradient(ellipse at 50% 30%, rgba(255,214,150,.95), rgba(255,170,80,.45) 45%, transparent 72%); animation: lampon 1.6s ease-out both; }
@keyframes lampon { 0% { opacity: 0; } 20% { opacity: .6; } 30% { opacity: .1; } 100% { opacity: 1; } }
/* a boy's torch under the covers: cooler, and never quite steady */
.glow.torch { border-radius: 30%; background: radial-gradient(ellipse at 50% 20%, rgba(255,246,210,.9), rgba(255,220,150,.35) 50%, transparent 75%); animation: torch 3.2s ease-in-out infinite; }
@keyframes torch { 0%, 100% { opacity: .95; } 40% { opacity: .7; } 55% { opacity: .9; } 70% { opacity: .55; } }
@keyframes blink { 50% { opacity: .35; } }

/* ===== hotspots: a white disc with a drawn icon, like the Miu Miu site ===== */
.hs { position: absolute; cursor: pointer; transform: translateZ(8px); transition: opacity .4s; }
.hs.off { pointer-events: none; opacity: 0; }
#stage.locked .hs { opacity: 0; pointer-events: none; }
.hs .dot { position: absolute; left: 50%; top: 50%; width: 5.6cqh; height: 5.6cqh; margin: -2.8cqh 0 0 -2.8cqh; border-radius: 50%; background: #fbf6ec; display: grid; place-items: center;
  box-shadow: 0 0 0 .35cqh rgba(255,255,255,.45), 0 .6cqh 1.6cqh rgba(40,20,20,.45); transition: transform .5s cubic-bezier(.23,1,.32,1); pointer-events: none; }
.hs .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: .15cqh solid rgba(255,255,255,.75); animation: ring 2s cubic-bezier(.215,.61,.355,1) infinite; }
@keyframes ring { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(2.1); opacity: 0; } }
.hs .dot svg { width: 60%; height: 60%; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-4deg); }
.hs:hover .dot { transform: scale(1.14); background: #fff; }
.hs:hover .dot svg { animation: jitter .4s infinite ease-in-out; }
@keyframes jitter { 25% { transform: rotate(-9deg); } 75% { transform: rotate(3deg); } }
.hs.seen .dot { transform: scale(.78); }
.hs.seen .dot::after { animation: none; opacity: 0; }
.hs.seen:hover .dot { transform: scale(.92); }
.hs.new .dot { background: #ffe9a8; }
.hs .hs-label { position: absolute; left: calc(50% + 3.6cqh); top: 50%; transform: translate(-.6cqh, -50%); white-space: nowrap; pointer-events: none;
  padding: .7cqh 1.5cqh; border-radius: .4cqh; background: var(--cream); color: var(--ink); font: 500 2cqh "Work Sans", sans-serif; opacity: 0; transition: opacity .2s, transform .2s; box-shadow: 0 .4cqh 1.2cqh rgba(0,0,0,.3); }
.hs .hs-label b { font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-right: .9cqh; color: var(--burgundy); font-size: 1.6cqh; }
.hs:hover .hs-label { opacity: 1; transform: translate(0, -50%); }
.hs.left .hs-label { left: auto; right: calc(50% + 3.6cqh); transform: translate(.6cqh, -50%); }
.hs.left:hover .hs-label { transform: translate(0, -50%); }

/* ===== keyhole peek ===== */
#keyhole { position: absolute; width: 26cqh; pointer-events: none; opacity: 0; transform: scale(.85); transition: opacity .25s, transform .25s; z-index: 5; }
#keyhole.on { opacity: 1; transform: scale(1); }
#keyhole .kh-view { width: 26cqh; height: 26cqh; border-radius: 50%; background-size: cover; background-position: center; border: .8cqh solid var(--brass); box-shadow: 0 1cqh 3cqh rgba(0,0,0,.6), inset 0 0 4cqh rgba(0,0,0,.8); filter: brightness(.55) saturate(.8); }
#keyhole .kh-cap { margin-top: 1.2cqh; text-align: center; font: italic 500 2.1cqh "Work Sans", sans-serif; color: var(--cream); text-shadow: 0 .2cqh .6cqh #000; }

/* ===== the call board ===== */
#board { position: absolute; inset: 0; display: none; place-items: center; background: rgba(20,12,12,.6); z-index: 20; }
#board.on { display: grid; }
#board .panel { padding: 4cqh 5cqh 3.5cqh; background: linear-gradient(180deg, #d9b765, #b48a38); border-radius: 1.2cqh; box-shadow: inset 0 .4cqh 0 rgba(255,255,255,.4), inset 0 -.6cqh 0 rgba(0,0,0,.25), 0 3cqh 6cqh rgba(0,0,0,.5); text-align: center; color: #3b2a12; }
#board h3 { margin: 0 0 3cqh; font: 700 2.4cqh "Work Sans", sans-serif; letter-spacing: .45em; }
#board .lamps { display: flex; gap: 2.6cqh; }
#board .lamp { width: 8cqh; text-align: center; font: 700 2.2cqh "Work Sans", sans-serif; }
#board .lamp i { display: block; width: 6cqh; height: 6cqh; margin: 0 auto 1.2cqh; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #6d6253, #2f2a22); border: .5cqh solid #7a5b22; }
#board .lamp.lit i { background: radial-gradient(circle at 35% 30%, #fff6c9, #ffcf55 45%, #e08a1f); box-shadow: 0 0 3cqh #ffc34a; animation: blink .6s steps(2) infinite; }
#board .lamp small { display: block; font: 500 1.5cqh "Work Sans", sans-serif; letter-spacing: .05em; margin-top: .6cqh; opacity: .8; }
#board .close { margin-top: 3cqh; font: 500 1.8cqh "Work Sans", sans-serif; opacity: .75; }

/* ===== inserts (documents) ===== */
#doc { position: absolute; inset: 0; display: none; place-items: center; background: rgba(30,18,20,.72); z-index: 20; cursor: pointer; }
#doc.on { display: grid; }
#doc .paper { width: 64cqh; padding: 5cqh 5.5cqh; background: #fbf4e4; color: #2d2520; box-shadow: 0 3cqh 6cqh rgba(0,0,0,.5); position: relative; font: 400 2.5cqh "Special Elite", monospace; line-height: 1.55; animation: docin .5s cubic-bezier(.23,1,.32,1); }
@keyframes docin { from { transform: translateY(6cqh) rotate(3deg); opacity: 0; } }
#doc .paper h3 { margin: 0 0 2cqh; text-align: center; font: 700 2.2cqh "Work Sans", sans-serif; letter-spacing: .35em; color: var(--burgundy); border-bottom: .2cqh solid var(--burgundy); padding-bottom: 1.4cqh; }
#doc .paper .crest { display: block; text-align: center; font-size: 3.4cqh; margin-bottom: 1cqh; color: var(--burgundy); }
#doc .paper.hand { font: 500 3.3cqh "Caveat", cursive; color: #233a6b; background: #f3ead2; line-height: 1.35; transform: rotate(-1.2deg); }
#doc .paper .rule { display: block; margin: 1.2cqh 0; }
#doc .paper .rule b { color: var(--burgundy); font-family: "Work Sans", sans-serif; letter-spacing: .1em; }
#doc .close { position: absolute; bottom: 5%; width: 100%; text-align: center; color: var(--cream); font: 500 1.9cqh "Work Sans", sans-serif; opacity: .8; }

/* ===== title cards (chapters, endings, title) ===== */
#card { position: absolute; inset: 0; display: none; place-items: center; z-index: 30; text-align: center; color: var(--ink); background: var(--rose); }
#card.on { display: grid; }
#card .frame { position: absolute; inset: 4cqh; border: .3cqh solid currentColor; opacity: .35; pointer-events: none; }
#card .art { position: absolute; inset: 0; background-size: cover; background-position: center; }
#card .art ~ .inner { background: rgba(251,244,228,.92); padding: 5cqh 7cqh; box-shadow: 0 2cqh 5cqh rgba(0,0,0,.3); }
#card .inner { position: relative; max-width: 78%; animation: cardin .9s cubic-bezier(.23,1,.32,1); }
@keyframes cardin { from { opacity: 0; transform: translateY(2cqh); } }
#card .kicker { font: 600 2cqh "Work Sans", sans-serif; letter-spacing: .45em; text-transform: uppercase; opacity: .8; }
#card h1 { margin: 2cqh 0; font: 600 10cqh "Work Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase; line-height: 1; }
#card h2 { margin: 1.5cqh 0 2.5cqh; font: 600 6.4cqh "Work Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; line-height: 1.1; }
#card p { font: italic 400 2.7cqh "Work Sans", sans-serif; line-height: 1.55; margin: 0 auto 1.4cqh; max-width: 90cqh; }
#card .btns { display: flex; gap: 2cqh; justify-content: center; margin-top: 3.5cqh; }
#card button { font: 600 2.1cqh "Work Sans", sans-serif; letter-spacing: .2em; text-transform: uppercase; padding: 1.5cqh 3.2cqh; background: transparent; color: var(--ink); border: .25cqh solid var(--ink); cursor: pointer; }
#card button.primary { background: var(--ink); color: var(--cream); }
#card button:hover { opacity: .85; }
#card .cont { font: 500 1.9cqh "Work Sans", sans-serif; letter-spacing: .2em; text-transform: uppercase; margin-top: 4cqh; opacity: .6; }

/* ===== Part Two: lost-property tags, owner tags, the ledger ===== */
#doc .paper.tagcard { width: 78cqh; font-size: 2.25cqh; cursor: default; }
#doc .tagtext { margin-bottom: 2.4cqh; }
#doc .tagtext b { font-family: "Work Sans", sans-serif; letter-spacing: .06em; }
#doc .whose { font: 600 2.1cqh "Work Sans", sans-serif; letter-spacing: .3em; text-transform: uppercase; color: var(--burgundy); text-align: center; margin-bottom: 1.6cqh; min-height: 3cqh; }
#doc .whose i { font: italic 500 2.2cqh "Work Sans", sans-serif; letter-spacing: 0; text-transform: none; color: #6b4b2a; }
#doc .owners { display: flex; gap: 1.4cqh; justify-content: center; flex-wrap: wrap; }
#doc .owners button { position: relative; padding: 1.3cqh 2.2cqh 1.3cqh 3.4cqh; font: 600 2cqh "Work Sans", sans-serif; color: var(--ink); background: #f0dfb4; border: .2cqh solid #b99a55; cursor: pointer;
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 14% 100%, 0 50%); transition: transform .15s, background .15s; }
#doc .owners button::before { content: ""; position: absolute; left: 1.4cqh; top: 50%; width: .9cqh; height: .9cqh; margin-top: -.45cqh; border-radius: 50%; background: #fbf4e4; box-shadow: inset 0 0 0 .2cqh #b99a55; }
#doc .owners button:hover { transform: translateY(-.4cqh) rotate(-1deg); background: #f6e7c0; }
#doc .owners button.wrong { background: #e8c3bb; opacity: .55; transform: rotate(2deg); }
#doc .owners button.right { background: #bfe0c9; }
#doc .notyet { display: block; margin: 2.2cqh auto 0; font: 500 1.8cqh "Work Sans", sans-serif; letter-spacing: .15em; text-transform: uppercase; background: none; border: none; color: #8b7a66; cursor: pointer; }
#doc .stamp { position: absolute; right: 4cqh; top: 4cqh; padding: .6cqh 1.6cqh; border: .4cqh solid #8d2b2b; color: #8d2b2b; font: 700 2.2cqh "Work Sans", sans-serif; letter-spacing: .15em; text-transform: uppercase; transform: rotate(-9deg); animation: stamp .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes stamp { from { transform: rotate(-9deg) scale(2.2); opacity: 0; } }
#doc .paper.ledger { width: 82cqh; background: #f7efd9; font-size: 2.1cqh; }
#doc .ledger .row { display: grid; grid-template-columns: 14cqh 1fr 12cqh; gap: 2cqh; padding: .7cqh 0; border-bottom: .15cqh solid rgba(120,90,50,.25); font: 500 2.5cqh "Caveat", cursive; color: #2c3e6b; }
#doc .ledger .row.dots { color: #a99; }
#doc .ledger .row.last { color: #1d2f5e; font-size: 2.9cqh; border-bottom: none; background: rgba(255,230,150,.35); }
#doc .pair { display: flex; gap: 4cqh; align-items: center; }
#doc .paper.small { width: 46cqh; padding: 4cqh; font-size: 3cqh; }
#doc .pair .paper:last-child { transform: rotate(1.5deg); }

/* ===== Part Three: what you can hear ===== */
#ears { position: absolute; left: 3cqh; bottom: 3cqh; padding: 1.1cqh 1.6cqh; background: rgba(251,244,228,.94); color: var(--ink); border-radius: .3cqh; box-shadow: 0 .5cqh 1.5cqh rgba(0,0,0,.35);
  font: 500 1.9cqh "Work Sans", sans-serif; z-index: 6; opacity: 0; transition: opacity .5s; pointer-events: none; min-width: 34cqh; }
#ears.on { opacity: 1; }
#ears small { display: block; font-size: 1.35cqh; letter-spacing: .3em; text-transform: uppercase; color: var(--burgundy); font-weight: 700; margin-bottom: .5cqh; }
#ears div { padding: .35cqh 0 .35cqh 1.4cqh; border-left: .45cqh solid; margin-top: .4cqh; transition: color .3s, border-color .3s; }
#ears .safe { border-color: #4f9a6a; color: #24563a; }
#ears .unsafe { border-color: #c06a4f; color: #7a3a26; }

/* ===== Part Four: the typewriter ===== */
#doc .typer { font-size: 2.4cqh; }
#doc .blank { font: inherit; padding: .1cqh .8cqh; margin: 0 .2cqh; background: #fff3c4; border: none; border-bottom: .3cqh dashed var(--burgundy); color: var(--burgundy); cursor: pointer; }
#doc .blank:hover { background: #ffe58a; }

/* ===== endings gallery ===== */
#card .gal { display: grid; grid-template-columns: repeat(4, 24cqh); gap: 1.6cqh; justify-content: center; margin: 2cqh 0 1cqh; }
#card .gal div { height: 11cqh; border: .25cqh solid rgba(42,35,32,.35); display: grid; place-items: center; align-content: center; padding: 1cqh; font: 600 2cqh "Work Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
#card .gal div.found { background: var(--cream); border-color: var(--ink); }
#card .gal b { font-size: 3cqh; opacity: .5; }
#card .gal small { display: block; font: italic 400 1.6cqh "Work Sans", sans-serif; letter-spacing: 0; text-transform: none; opacity: .7; margin-top: .4cqh; }

/* ===== cinematic picture cards: words on top, the picture drifts, click to continue ===== */
#doc, #board { z-index: 40; }                    /* documents always open above any card */
#stage.cine #card { cursor: pointer; }
#stage.cine #card .art { animation: drift 16s ease-out forwards; }
@keyframes drift { from { transform: scale(1.02) translateX(0); } to { transform: scale(1.14) translateX(-1.5%); } }
#stage.cine::after { content: "click to continue"; position: absolute; left: 50%; bottom: 3cqh; transform: translateX(-50%); z-index: 35; font: 600 1.6cqh "Work Sans", sans-serif; letter-spacing: .3em; text-transform: uppercase; color: rgba(251,244,228,.9); background: rgba(20,14,16,.55); padding: .6cqh 1.6cqh; border-radius: 2cqh; pointer-events: none; animation: hintpulse 2s ease-in-out infinite; }
@keyframes hintpulse { 50% { opacity: .35; } }
#card button[disabled] { opacity: .55; cursor: wait; }

/* ===== hotspots, cleaner: a plain white disc like the Miu Miu site, no halo, no ring ===== */
.hs .dot { box-shadow: 0 .5cqh 1.4cqh rgba(40,20,20,.35); }
.hs .dot::after { display: none; }
.hs:not(.seen) .dot { animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.08); } }
.hs:hover .dot { animation: none; transform: scale(1.14); }
.hs.seen .dot { opacity: .85; }

#keyhole .kh-cap { display: none; }   /* the subtitle already says it */

/* ===== buttons: easy to hit ===== */
.hs { pointer-events: none; }                                  /* only the disc and its label are clickable */
.hs .dot, .hs .hs-label { pointer-events: auto; cursor: pointer; }
.hs .dot { width: 6.2cqh; height: 6.2cqh; margin: -3.1cqh 0 0 -3.1cqh; }
.hs .dot::before { content: ""; display: block; position: absolute; inset: -2cqh; border-radius: 50%; width: auto; height: auto; margin: 0; background: transparent; }   /* a generous invisible target */
.hs.off .dot, .hs.off .hs-label, #stage.locked .hs .dot, #stage.locked .hs .hs-label { pointer-events: none; }
#stage.reveal .hs:not(.off) .hs-label { opacity: 1; transform: translate(0, -50%); }


/* =====================================================================
   The Miu Miu rules: the painting is the screen. On top of it, only
   white discs, one hint card, a line of subtitle, and two small buttons.
   ===================================================================== */
body, #card, .hs .hs-label, #doc .paper h3, #doc .close { font-family: "Work Sans", sans-serif; }

/* the room's name, for a moment on the way in */
#roomname { position: absolute; left: 50%; top: 4cqh; transform: translateX(-50%); z-index: 6; pointer-events: none; white-space: nowrap;
  font: 700 1.5cqh "Work Sans", sans-serif; letter-spacing: .6em; text-transform: uppercase; color: #fff; text-shadow: 0 .2cqh 1cqh rgba(0,0,0,.5); opacity: 0; }
#roomname.on { animation: roomname 3.4s ease forwards; }
@keyframes roomname { 0% { opacity: 0; } 20%, 70% { opacity: 1; } 100% { opacity: 0; } }

/* what to do next: one cream card, bottom centre (Miu Miu: "Pick up the notebook and get started") */
#hint { position: absolute; left: 50%; bottom: 4cqh; z-index: 7; display: flex; align-items: center; gap: 1.6cqh; max-width: 52cqh; padding: 1.4cqh 2.6cqh 1.4cqh 1.4cqh;
  background: #fcf5e6; color: #000; border-radius: .4cqh; box-shadow: 0 .3cqh .6cqh rgba(0,0,0,.25); pointer-events: none;
  opacity: 0; transform: translate(-50%, 2cqh); transition: opacity .5s, transform .9s cubic-bezier(.23,1,.32,1); }
#hint.on { opacity: 1; transform: translate(-50%, 0); }
#stage.talking #hint, #stage.locked #hint { opacity: 0; transform: translate(-50%, 2cqh); }
#hint .dot { flex: none; width: 5.4cqh; height: 5.4cqh; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 .1cqh rgba(0,0,0,.08); }
#hint .dot svg { width: 58%; fill: none; stroke: #000; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
#hint small { display: block; margin-bottom: .3cqh; font: 500 1.2cqh "Work Sans", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: rgba(0,0,0,.5); }
#hint small:empty { display: none; }
#goal { font: 400 1.9cqh/1.3 "Work Sans", sans-serif; letter-spacing: .02em; }

/* subtitles: one plain line, no box */
#sub { position: absolute; left: 50%; bottom: 5.5cqh; transform: translateX(-50%); z-index: 7; width: max-content; max-width: 70%; text-align: center; pointer-events: none;
  font: 400 2.2cqh/1.45 "Work Sans", sans-serif; color: #ffe86b; text-shadow: 0 .1cqh .5cqh rgba(0,0,0,.9), 0 0 2cqh rgba(0,0,0,.4); opacity: 0; transition: opacity .3s; }
#sub.on { opacity: 1; }
#sub.narrator { color: #ffe86b; font-style: normal; }
#sub.conductor { color: #bfe8d4; }
#sub.conductor::before { content: "Intercom — "; opacity: .75; }
#sub.sound { color: #f1e6d2; font-style: italic; }
#sub.porter { color: #fff; font-style: italic; }
#stage.cine #sub { z-index: 35; bottom: 9cqh; }

/* small white buttons: back (top left), pockets and sound (bottom right) */
#back, #skipintro, #ui button { display: inline-flex; align-items: center; gap: 1cqh; border: none; background: #fff; color: #000; cursor: pointer; box-shadow: .3cqh .15cqh .3cqh rgba(0,0,0,.25);
  font: 500 1.6cqh "Work Sans", sans-serif; letter-spacing: .02em; transition: transform .3s cubic-bezier(.23,1,.32,1), opacity .3s; }
#back svg, #skipintro svg, #ui svg { width: 2.4cqh; fill: none; stroke: #000; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
#back { position: absolute; left: 3.5cqh; top: 3.5cqh; z-index: 8; padding: 1.2cqh 1.8cqh 1.2cqh 1.4cqh; transform: rotate(-2deg); }
#back:hover { transform: rotate(0) scale(1.05); }
#stage.locked #back { opacity: 0; pointer-events: none; }
#skipintro { position: absolute; right: 3.5cqh; bottom: 3.5cqh; z-index: 36; padding: 1.2cqh 1.6cqh 1.2cqh 2cqh; }
#skipintro:hover { transform: scale(1.05); }
#ui { position: absolute; right: 3.5cqh; bottom: 3.5cqh; z-index: 8; display: flex; gap: 1.2cqh; }
#ui button { position: relative; width: 5.6cqh; height: 5.6cqh; justify-content: center; padding: 0; }
#ui button:nth-child(1) { transform: rotate(4deg); } #ui button:nth-child(2) { transform: rotate(-8deg); }
#ui button:hover { transform: rotate(0) scale(1.08); }
#ui button.muted .w { opacity: 0; }
#pockets b { position: absolute; right: -.8cqh; top: -.8cqh; min-width: 2.2cqh; height: 2.2cqh; padding: 0 .5cqh; border-radius: 1.1cqh; background: #000; color: #fff; font: 700 1.2cqh/2.2cqh "Work Sans", sans-serif; }
#pockets.got b { animation: got .9s ease-out; }
@keyframes got { 0%, 50% { transform: scale(1.6); background: var(--burgundy); } }

/* what you carry, as a page */
#doc .paper.pockets { width: 60cqh; font: 400 2cqh "Work Sans", sans-serif; }
#doc .pocket { display: flex; align-items: center; gap: 1.6cqh; width: 100%; padding: 1.2cqh .4cqh; border: none; border-bottom: .15cqh solid rgba(0,0,0,.1); background: none; text-align: left; font: inherit; color: inherit; cursor: default; }
#doc .pocket span { font-size: 3cqh; }
#doc .pocket.usable { cursor: pointer; }
#doc .pocket.usable:hover { background: rgba(0,0,0,.04); }
#doc .pocket i { margin-left: auto; font: 700 1.2cqh "Work Sans", sans-serif; letter-spacing: .2em; text-transform: uppercase; font-style: normal; color: var(--burgundy); }

/* title cards and their buttons, Miu Miu style: bold tracked caps, a plain white button */
#card h1 { font: 700 9cqh/1.25 "Work Sans", sans-serif; letter-spacing: .18em; }
#card h2 { font: 700 5.6cqh/1.3 "Work Sans", sans-serif; letter-spacing: .14em; }
#card .kicker { font: 700 1.6cqh "Work Sans", sans-serif; letter-spacing: .5em; }
#card p { font: 400 2.1cqh/1.5 "Work Sans", sans-serif; font-style: normal; }
#card button { padding: 1.6cqh 3cqh; border: .1cqh solid #000; background: #fff; color: #000; font: 500 1.7cqh "Work Sans", sans-serif; letter-spacing: .02em; text-transform: none; }
#card button.primary { background: #000; color: #fff; }
#card button:hover { opacity: 1; transform: scale(1.04); }
#stage.cine::after { font-family: "Work Sans", sans-serif; background: none; letter-spacing: .3em; }

/* hotspot labels stay, but only on hover, small and plain */
.hs .hs-label { border-radius: .3cqh; font-size: 1.7cqh; padding: .8cqh 1.4cqh; background: #fcf5e6; color: #000; }
.hs .hs-label b { color: rgba(0,0,0,.5); font-size: 1.2cqh; letter-spacing: .2em; }
#ears { left: auto; right: 3.5cqh; bottom: auto; top: 3.5cqh; font-family: "Work Sans", sans-serif; }
/* picture cards can be pale: a soft dark fade under the subtitle keeps it readable */
#stage.cine #card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 32%; background: linear-gradient(transparent, rgba(10,6,8,.6)); pointer-events: none; }

/* ===== hand-drawn icons (traced ink, so they are filled shapes, not strokes) ===== */
.hs .dot svg, #hint .dot svg, #ui svg, #back svg, #skipintro svg, #doc .pocket svg { fill: #000; stroke: none; }
.hs .dot svg { width: 68%; height: 68%; transform: none; }   /* a tad smaller than the disc, so it breathes */
.hs.seen .dot svg { width: 62%; height: 62%; }
#hint .dot svg { width: 66%; }
#ui svg { width: 3.6cqh; height: 3.6cqh; }
#back svg, #skipintro svg { width: 2.4cqh; height: 2.4cqh; }
#skipintro svg { transform: scaleX(-1); }
#ui button.muted { opacity: 1; }
#ui button.muted::after { content: ""; position: absolute; left: 22%; right: 22%; top: 50%; height: .3cqh; background: #000; border-radius: .2cqh; transform: rotate(-45deg); }
#ui button.muted svg { opacity: .45; }
#doc .pocket svg { flex: none; width: 3.8cqh; height: 3.8cqh; }

/* only the disc takes the mouse: labels are for reading, and an invisible label must never cover another disc */
.hs .hs-label { pointer-events: none !important; }
.hs:hover { z-index: 2; }                     /* the disc you're on, and its label, sit above its neighbours */

/* rooms whose action is on the floor keep the hint card out of the way, at the top */
#stage.hint-top #hint, #stage.hint-top #hint.on { left: 3.5cqh; bottom: auto; top: 11cqh; transform: none; }
#stage.hint-top.talking #hint, #stage.hint-top.locked #hint { transform: translateY(-1cqh); }