:root {
  --ink: #2a1a0a; --parch: #f3e7c9; --parch2: #e6d4a8; --gold: #ffb35c; --night: #0b0e24;
  --ui: "Heebo", system-ui, sans-serif; --serif: "Frank Ruhl Libre", "David", serif;
}
html, body { margin: 0; height: 100%; background: #07080f; overflow: hidden; }
body { display: grid; place-items: center; font-family: var(--ui); color: #f2eee6; -webkit-user-select: none; user-select: none; }
.stage { position: relative; width: min(100vw, calc(100vh * 16 / 9)); aspect-ratio: 16 / 9; container-type: inline-size; overflow: hidden; background: #000; }
.stage > canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; z-index: 0; }
button { font-family: inherit; }

/* script running: clicks advance dialogue */
.blocker { position: absolute; inset: 0; z-index: 5; display: none; }
.stage.busy .blocker { display: block; }
.shade { position: absolute; inset: 0; z-index: 6; background: #000; opacity: 0; pointer-events: none; transition: opacity 1.2s; }

/* dialogue */
.dlg { position: absolute; inset-inline: 15cqw; top: 2.2cqw; z-index: 10; padding: 1.3cqw 2.2cqw 1.5cqw; color: #f2eee6;
  background: linear-gradient(180deg, #1a1d3ae8, #0e1028f2); border: 1px solid #ffffff2a; border-radius: 1.2cqw;
  box-shadow: 0 1.4cqw 3cqw #0008; font-size: 2.05cqw; line-height: 1.5; backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(-1cqw); transition: opacity .25s, transform .25s; pointer-events: none; cursor: pointer; }
.dlg.show { opacity: 1; transform: none; pointer-events: auto; }
.dlg .who { display: block; font-weight: 800; font-size: 1.4cqw; letter-spacing: .06em; color: var(--gold); margin-bottom: .2cqw; }
.dlg.noname .who { display: none; }
.dlg.narr { background: linear-gradient(180deg, #2a2216f0, #18120af4); border-color: #ffd89a40; font-family: var(--serif); font-size: 2.2cqw; }
.dlg.narr .who { color: #e8c88a; font-family: var(--ui); }
.dlg .more { position: absolute; inset-inline-end: 1.2cqw; bottom: .6cqw; font-size: 1.2cqw; color: var(--gold); opacity: 0; }
.dlg.done .more { opacity: 1; animation: bob 1s infinite; }
@keyframes bob { 50% { transform: translateX(-.4cqw); } }

/* choices */
.choices { position: absolute; inset-inline: 18cqw; bottom: 10.5cqw; z-index: 11; display: none; flex-direction: column; gap: .6cqw; }
.choices.show { display: flex; }
.cprompt { font-size: 1.6cqw; color: #ffe2b0; text-align: center; text-shadow: 0 2px 6px #000; }
.copt { display: flex; align-items: center; gap: .8cqw; text-align: start; font-size: 1.75cqw; color: #f6efe0; padding: .8cqw 1.6cqw;
  background: linear-gradient(180deg, #2b2142ee, #1a1430f2); border: 1px solid #ffffff30; border-radius: 1cqw; cursor: pointer; transition: background .15s, transform .15s; }
.copt:hover { background: linear-gradient(180deg, #4a3768, #2c2050); transform: translateX(-.3cqw); }
.copt.used { color: #a9a3b8; }
.copt.crux { border-color: #ffb35c80; }
.copt:disabled { opacity: .45; cursor: default; }
.cand { width: 1.2cqw; height: 1.8cqw; flex: none; }

/* bag */
.bar { position: absolute; inset-inline: 0; bottom: 0; height: 8.6cqw; z-index: 8; display: flex; align-items: center; gap: 1cqw; padding: 0 1.4cqw;
  background: linear-gradient(180deg, #6b4428f0, #4a2c18f5); border-top: .25cqw solid #8a5a32; box-shadow: 0 -.6cqw 2cqw #0007; transition: opacity .3s, transform .3s; }
.stage.busy .bar { opacity: .55; }
.stage.nobar .bar { transform: translateY(100%); opacity: 0; }
.inv { flex: 1; display: flex; gap: .7cqw; justify-content: center; overflow-x: auto; }
.slot { width: 6.6cqw; height: 6.6cqw; flex: none; border-radius: .9cqw; background: radial-gradient(#3a2414, #2a180c); border: .18cqw dashed #a87a4a80; display: grid; place-items: center; cursor: pointer; }
.slot img { width: 92%; height: 92%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 .2cqw .3cqw #000a); }
.slot.sel { border: .22cqw solid var(--gold); background: radial-gradient(#5a3a1c, #3a2210); }
.slot:hover { border-color: #ffd89a; }
.bbtn { display: flex; flex-direction: column; align-items: center; gap: .1cqw; background: none; border: none; color: #f3e2c0; font-size: 1.15cqw; font-weight: 800; cursor: pointer; padding: .3cqw .6cqw; border-radius: .8cqw; }
.bbtn:hover { background: #ffffff14; }
.bbtn svg { width: 3.4cqw; height: 3.4cqw; }
.ghost { position: absolute; z-index: 20; width: 5.4cqw; height: 5.4cqw; transform: translate(-50%, -50%); pointer-events: none; display: none; filter: drop-shadow(0 .4cqw .6cqw #000c); }
.stage.holding .ghost.show { display: block; }

/* hover + labels */
.hoverlbl { position: absolute; z-index: 3; pointer-events: none; transform: translate(-50%, 1.9cqw); font-size: 1.35cqw; font-weight: 800; color: #fff6e0; white-space: nowrap;
  background: #120c06c8; padding: .25cqw .8cqw; border-radius: .6cqw; opacity: 0; transition: opacity .12s; }
.hoverlbl.show { opacity: 1; }
.labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hl { position: absolute; transform: translate(-50%, -130%); font-size: 1.25cqw; font-weight: 800; padding: .2cqw .7cqw; border-radius: .6cqw; white-space: nowrap; color: #1a1006; background: #ffe2a8; box-shadow: 0 0 1cqw #ffb35c; }
.hl.k-talk { background: #c8e2ff; box-shadow: 0 0 1cqw #7ab0ff; }
.hl.k-exit { background: #ffc35c; }
.hl.k-look { background: #f0f0e8; box-shadow: 0 0 1cqw #fff; }

/* toasts */
.toasts { position: absolute; z-index: 12; inset-inline-end: 1.4cqw; bottom: 10cqw; display: flex; flex-direction: column; gap: .5cqw; align-items: flex-end; pointer-events: none; }
.toast { display: flex; align-items: center; gap: .7cqw; font-size: 1.4cqw; background: #1a120ae8; border: 1px solid #ffd89a50; color: #ffeccc; padding: .45cqw 1.1cqw; border-radius: .8cqw; animation: tin .3s; transition: opacity .5s, transform .5s; }
.toast img { width: 2.6cqw; height: 2.6cqw; }
.toast.t-done { border-color: #8ad08a; color: #d8ffd0; }
.toast.t-letter { border-color: #ffd04a; color: #ffe89a; font-weight: 800; }
.toast.out { opacity: 0; transform: translateY(.5cqw); }
@keyframes tin { from { opacity: 0; transform: translateX(-1cqw); } }

/* cards, fades */
.card { position: absolute; inset: 0; z-index: 60; background: radial-gradient(#1a1410, #050403); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4cqw; text-align: center; padding: 0 10cqw;
  opacity: 0; pointer-events: none; transition: opacity .45s; cursor: pointer; }
.card.show { opacity: 1; pointer-events: auto; }
.card .ct { font-family: var(--serif); font-size: 4.2cqw; color: #f6dca0; font-weight: 700; text-shadow: 0 0 2cqw #ff9a3c55; }
.card .cs { font-family: var(--serif); font-size: 2.2cqw; color: #e6d6b6; line-height: 1.6; }
.card .csm { font-size: 1.5cqw; color: #a89a80; }
.card .cc { position: absolute; bottom: 3cqw; font-size: 1.3cqw; color: #8a7a60; animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .4; } }
.fader { position: absolute; inset: 0; z-index: 50; background: #000; opacity: 0; pointer-events: none; transition: opacity .45s; }
.fader.on { opacity: 1; pointer-events: auto; }

/* panels */
.panelhost { position: absolute; inset: 0; z-index: 40; display: none; place-items: center; background: #0008; }
.panelhost.show { display: grid; }
.panelhost > .panel { grid-area: 1 / 1; }
.panel { position: relative; min-width: 40cqw; max-width: 78cqw; max-height: 44cqw; display: flex; flex-direction: column; color: var(--ink);
  background: linear-gradient(180deg, var(--parch), var(--parch2)); border-radius: 1.4cqw; box-shadow: 0 2cqw 5cqw #000c, inset 0 0 3cqw #a8803a40; border: .25cqw solid #8a6a3a; padding: 1.8cqw 2.4cqw; }
.ptitle { font-family: var(--serif); font-size: 2.6cqw; font-weight: 700; margin-bottom: 1cqw; color: #4a2a10; }
.px { position: absolute; top: 1cqw; inset-inline-end: 1.2cqw; width: 3cqw; height: 3cqw; border-radius: 50%; border: none; background: #8a5a3220; color: #4a2a10; font-size: 1.6cqw; cursor: pointer; }
.px:hover { background: #8a5a3240; }
.pbody { overflow-y: auto; font-size: 1.6cqw; line-height: 1.55; }
.pbody p { margin: .4cqw 0; }
.pbtn, .menu button { font-size: 1.6cqw; padding: .6cqw 1.8cqw; border-radius: .8cqw; border: .18cqw solid #8a5a32; background: #fff6df; color: #3a2412; cursor: pointer; font-weight: 700; }
.pbtn:hover, .menu button:hover { background: #ffe8b8; }
.pbtn:disabled { opacity: .45; cursor: default; }
.menu .pbody { display: flex; flex-direction: column; gap: .8cqw; min-width: 30cqw; }
.menu .small, .mnote { font-size: 1.3cqw; color: #6a5030; }
.vols { display: flex; flex-direction: column; gap: .5cqw; padding: .6cqw 1cqw; border-radius: .8cqw; background: #8a5a3214; }
.vol { display: grid; grid-template-columns: 9cqw 1fr 4.5cqw; align-items: center; gap: 1cqw; font-size: 1.5cqw; font-weight: 700; color: #3a2412; cursor: pointer; }
.vol i { font-style: normal; font-size: 1.3cqw; color: #6a5030; text-align: end; }
.vol input { -webkit-appearance: none; appearance: none; width: 100%; height: .6cqw; border-radius: .3cqw; cursor: pointer; direction: rtl;
  background: linear-gradient(to left, #8a5a32 var(--p, 100%), #d9c39a var(--p, 100%)); }
.vol input::-webkit-slider-thumb { -webkit-appearance: none; width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: #fff6df; border: .2cqw solid #8a5a32; }
.vol input::-moz-range-thumb { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #fff6df; border: .2cqw solid #8a5a32; }
.vol input:focus-visible { outline: .2cqw solid #c8902a; outline-offset: .3cqw; }
.help ul { margin: 0; padding-inline-start: 2cqw; } .help li { margin: .4cqw 0; }

/* notebook */
.notebook { width: 62cqw; height: 40cqw; }
.tabs { display: flex; gap: .6cqw; margin-bottom: 1cqw; }
.tabs button { font-size: 1.5cqw; padding: .4cqw 1.4cqw; border: .15cqw solid #8a5a32; border-radius: .8cqw; background: transparent; color: #4a2a10; cursor: pointer; font-weight: 700; }
.tabs button.on { background: #8a5a32; color: #fff3d8; }
.goal { padding: .7cqw 1cqw; border-bottom: 1px dashed #8a5a3260; }
.goal .gt { font-weight: 700; }
.goal.done .gt { color: #5a7a3a; text-decoration: line-through; text-decoration-color: #5a7a3a80; }
.hints { margin-top: .4cqw; padding-inline-start: 1.6cqw; }
.hint { font-size: 1.45cqw; color: #4a3a2a; margin: .3cqw 0; font-family: var(--serif); }
.hbtn { font-size: 1.3cqw; padding: .3cqw 1cqw; border-radius: .7cqw; border: .15cqw solid #a07a40; background: #fff3d0; color: #6a4010; cursor: pointer; margin-top: .3cqw; }
.note { padding: .6cqw 1cqw; border-bottom: 1px dashed #8a5a3260; }
.note .nt { font-weight: 800; } .note .nx { font-family: var(--serif); font-size: 1.55cqw; }
.empty { color: #8a7050; }
.letters { display: flex; gap: .4cqw; justify-content: center; direction: rtl; margin: 1cqw 0; }
.letters .lt { width: 3.4cqw; height: 4.2cqw; display: grid; place-items: center; font-family: var(--serif); font-size: 2.8cqw; border-radius: .6cqw; background: #e0cc9a; color: #a08a60; }
.letters .lt.on { background: #4a2a10; color: #ffd890; box-shadow: 0 0 1cqw #ffb35c80; }
.letters .sp { width: 1.6cqw; }
.lnote { text-align: center; font-size: 1.35cqw; color: #6a5030; }
.deed { font-size: 1.4cqw; } .deed b { font-family: var(--serif); font-size: 1.8cqw; margin-inline-end: .6cqw; }

/* map */
.mappanel { width: 64cqw; }
.map { position: relative; height: 30cqw; background: radial-gradient(#efe0b8, #d8c08a); border-radius: 1cqw; border: .15cqw solid #a08050; }
.mnode { position: absolute; transform: translate(-50%, -50%); font-size: 1.35cqw; font-weight: 800; padding: .4cqw 1cqw; border-radius: 1cqw; border: .18cqw solid #6a4a20; background: #fff6df; color: #3a2412; cursor: pointer; white-space: nowrap; z-index: 1; }
.mnode:hover { background: #ffe0a0; }
.mnode.here { background: #6a4a20; color: #ffe8b8; }
.mline { position: absolute; height: .25cqw; background: repeating-linear-gradient(90deg, #8a6a3a 0 .8cqw, transparent .8cqw 1.4cqw); transform-origin: 0 50%; }

/* puzzle boards */
.board { display: flex; flex-direction: column; gap: 1cqw; align-items: center; }
.row { display: flex; gap: .8cqw; flex-wrap: wrap; justify-content: center; }
.tok { font-size: 1.5cqw; padding: .5cqw 1.2cqw; border-radius: .8cqw; border: .18cqw solid #6a4a20; background: #fff6df; color: #3a2412; cursor: pointer; font-weight: 700; }
.tok.on { background: #6a4a20; color: #ffe8b8; }
.tok.placed { opacity: .35; }
.cell { min-width: 12cqw; min-height: 4.2cqw; border: .18cqw dashed #8a5a32; border-radius: .8cqw; display: grid; place-items: center; text-align: center; font-size: 1.45cqw; cursor: pointer; padding: .3cqw .6cqw; background: #fffaf0a0; }
.cell.full { border-style: solid; background: #fff3d0; font-weight: 800; }
.cell .lab { display: block; font-size: 1.15cqw; color: #7a5a30; font-weight: 400; }
.msg { min-height: 2.2cqw; font-family: var(--serif); font-size: 1.6cqw; color: #5a3a10; text-align: center; }
.okmsg { color: #3a6a20; font-weight: 800; }

/* title */
.title { position: absolute; inset: 0; z-index: 35; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1.2cqw;
  background: radial-gradient(ellipse at 50% 40%, #0000 0, #0006 60%, #000c 100%); }
.title.show { display: flex; }
.title h1 { margin: 0; font-family: var(--serif); font-size: 7.5cqw; color: #ffe2a0; text-shadow: 0 0 3cqw #ff9a3c90, 0 .4cqw 1cqw #000; font-weight: 900; }
.title .sub { font-family: var(--serif); font-size: 2cqw; color: #f0dcb4; margin-top: -1cqw; text-shadow: 0 2px 6px #000; }
.title .verse { font-family: var(--serif); font-size: 1.5cqw; color: #d8c49a; text-shadow: 0 2px 6px #000; margin-bottom: 1.4cqw; }
.title .tb { font-size: 1.9cqw; min-width: 22cqw; padding: .8cqw 2cqw; border-radius: 1cqw; border: .2cqw solid #ffb35c90; background: #1a1430d8; color: #ffeccc; cursor: pointer; font-weight: 800; }
.title .tb:hover { background: #3a2a58; }
.title .ver { position: absolute; bottom: 1.2cqw; font-size: 1.1cqw; color: #a8a0c0; }
.title .acct { position: absolute; top: 1.4cqw; inset-inline-start: 1.6cqw; font-size: 1.3cqw; padding: .5cqw 1.2cqw; border-radius: 99px; border: .15cqw solid #ffb35c70; background: #1a1430c0; color: #f0dcb4; cursor: pointer; font-weight: 700; }
.title .acct:hover { background: #3a2a58; }
.title .acct[hidden] { display: none; }
.chsel { display: grid; grid-template-columns: 1fr 1fr; gap: .8cqw; }
.chsel button { font-size: 1.5cqw; padding: .6cqw 1.2cqw; text-align: start; border-radius: .8cqw; border: .18cqw solid #8a5a32; background: #fff6df; color: #3a2412; cursor: pointer; }
.chsel button:hover { background: #ffe8b8; }
.chsel button small { display: block; font-size: 1.15cqw; color: #7a5a30; }
.chsel button:disabled { opacity: .5; cursor: default; background: #fff6df; }
/* who's playing: four save slots */
.slots { display: grid; grid-template-columns: 1fr 1fr; gap: 1cqw; width: 52cqw; max-width: 100%; }
.pslot { position: relative; min-height: 9cqw; padding: 1cqw 1.4cqw; border-radius: 1cqw; border: .2cqw solid #8a5a32; background: #fff6df; color: #3a2412;
  cursor: pointer; display: flex; flex-direction: column; justify-content: center; gap: .3cqw; }
.pslot:hover { background: #ffe8b8; }
.pslot.empty { border-style: dashed; background: #fff6df80; align-items: center; }
.pslot .sn { font-family: var(--serif); font-size: 2.2cqw; font-weight: 700; }
.pslot .sch { font-size: 1.35cqw; }
.pslot .sago, .pslot .snew { font-size: 1.2cqw; color: #7a5a30; }
.pslot .snew { font-size: 1.6cqw; font-weight: 700; }
.pslot .sq { font-size: 1.45cqw; font-weight: 700; }
.pslot .stools { position: absolute; top: .6cqw; inset-inline-end: .6cqw; display: flex; gap: .3cqw; }
.pslot .stools button { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; border: none; background: transparent; color: #6a4a2a; font-size: 1.4cqw; cursor: pointer; }
.pslot .stools button:hover { background: #8a5a3220; }
.pslot .sname { font: inherit; font-size: 1.7cqw; padding: .4cqw .8cqw; border-radius: .6cqw; border: .15cqw solid #8a5a32; background: #fff; color: #3a2412; width: 100%; box-sizing: border-box; }
.sbtns { display: flex; gap: .8cqw; flex-wrap: wrap; margin-top: .6cqw; }
.pslot .pbtn { font-size: 1.35cqw; padding: .4cqw 1.2cqw; }
.lockedp .pbody { max-width: 46cqw; }
.opts { margin-top: 1cqw; font-size: 1.35cqw; }
.opts label { display: block; margin: .2cqw 0; }

/* toon style: a faint paper grain over the 3D view */
.stage.style-toon::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .16; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .25 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); }
.stage.showcase .bar, .stage.showcase .toasts { display: none; }

/* ch.5: which day of Hanukkah */
.daybadge { position: absolute; top: 1.4cqw; inset-inline-start: 1.6cqw; z-index: 7; padding: .5cqw 1.4cqw; border-radius: 2cqw; font: 800 1.5cqw var(--serif);
  color: #2a1a0a; background: linear-gradient(180deg, #ffe2a8, #f0c070); box-shadow: 0 0 1.6cqw #ffb35c80; opacity: 0; transition: opacity .4s; pointer-events: none; }
.daybadge.show { opacity: 1; }
.stage.showcase .daybadge { display: none; }