:root { --ink: #2b2620; --paper: #f4efe2; --rule: rgba(80, 140, 200, .28); --red: #b8463c; --graphite: #3a3a40; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1b130d; color: var(--ink); overscroll-behavior: none; }
body { font: 17px/1.5 Alegreya, Georgia, serif; -webkit-tap-highlight-color: transparent; }
#table { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; touch-action: none; outline: none; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#keys:focus-within { clip: auto; width: auto; height: auto; left: 12px; top: 12px; z-index: 30; background: var(--paper); padding: 10px 14px; border-radius: 4px; box-shadow: 0 8px 30px rgba(0,0,0,.5); max-height: 80vh; overflow: auto; white-space: normal; }
#keys button { font: inherit; display: block; background: none; border: 0; padding: 2px 0; color: var(--ink); cursor: pointer; text-align: left; }
#keys ol { margin: 6px 0 0; padding-left: 26px; }

/* loader: a corridor being ruled in pencil on graph paper */
#loader { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; transition: opacity .45s ease;
  background-color: #f1ede1;
  background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 18px 18px; }
#loader.gone { opacity: 0; pointer-events: none; }
#loader svg { width: min(70vw, 420px); height: auto; overflow: visible; }
#loader path { fill: none; stroke-linejoin: miter; }
.ld-corr { stroke: rgba(58, 58, 64, .12); stroke-width: 14; }
.ld-draw { stroke: rgba(48, 48, 54, .85); stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .35s ease; }

/* the DM's boxed read-aloud text, laid on the table under the screen */
#dm { position: fixed; left: 50%; top: max(10px, env(safe-area-inset-top)); transform: translate(-50%, -8px); width: min(560px, calc(100vw - 32px)); z-index: 10;
  pointer-events: none; opacity: 0; transition: opacity .35s ease, transform .35s ease; }
#dm.on { opacity: 1; transform: translate(-50%, 0); }
#dm p { margin: 0; padding: 12px 16px 13px; background: rgba(240, 234, 220, .94); border: 2px solid #2e2a25; outline: 1px solid rgba(46, 42, 37, .5); outline-offset: 3px;
  box-shadow: 0 10px 28px rgba(0,0,0,.45); font: italic 18px/1.42 Alegreya, Georgia, serif; color: #221d18; }
#dm.short p { text-align: center; font-style: normal; font-weight: 700; letter-spacing: .02em; }

#snd { position: fixed; left: max(10px, env(safe-area-inset-left)); bottom: max(10px, env(safe-area-inset-bottom)); z-index: 12; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255, 240, 215, .25); background: rgba(27, 19, 13, .55); color: #f1e6d0; display: grid; place-items: center; cursor: pointer; padding: 0; }
#snd svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#snd svg path:first-child { fill: currentColor; }
#snd .x { display: none; }
#snd[aria-pressed="true"] .x { display: block; } #snd[aria-pressed="true"] .w1, #snd[aria-pressed="true"] .w2 { display: none; }
#snd:focus-visible, .x-btn:focus-visible { outline: 2px solid #f6d27a; outline-offset: 2px; }

.x-btn { position: fixed; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); z-index: 41; width: 46px; height: 46px; border-radius: 50%;
  border: 0; background: #2b241d; color: #f4ead6; font: 30px/46px Georgia, serif; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.4); padding: 0; }

/* the module page a room opens to */
#case { position: fixed; inset: 0; z-index: 40; background: rgba(18, 12, 8, .72); opacity: 0; transition: opacity .3s ease; }
#case.on { opacity: 1; }
.case-scroll { position: absolute; inset: 0; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 28px 16px 60px; }
.page { position: relative; margin: 0 auto; max-width: 1080px; background: #f3eddc; color: #221d18; padding: 34px 44px 44px; box-shadow: 0 30px 80px rgba(0,0,0,.55);
  background-image: radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.5), transparent 60%), radial-gradient(ellipse at 100% 100%, rgba(120, 90, 50, .12), transparent 60%);
  transform: translateY(26px) rotate(-.4deg); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
#case.on .page { transform: none; }
.page-head { border-bottom: 2px solid #221d18; margin-bottom: 18px; padding-bottom: 8px; display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; padding-right: 40px; }
#case-title { margin: 0; font: 700 34px/1.1 "Alegreya SC", Alegreya, serif; letter-spacing: .01em; }
#case-title .no { color: var(--red); margin-right: .3em; }
#case-client { margin: 0; font: 500 15px/1.2 "Alegreya SC", serif; letter-spacing: .08em; color: #5a5045; }
.boxed { margin: 0 0 24px; padding: 14px 18px; border: 2px solid #221d18; outline: 1px solid rgba(34,29,24,.45); outline-offset: 3px; background: rgba(214, 205, 185, .45);
  font: italic 19px/1.45 Alegreya, serif; }
#case-work { --ab-fg: #221d18; --ab-muted: #5a5045; --ab-accent: #b8463c; --ab-chrome: 150px; }
#case-work .ab-lede { font-size: 18px; }
#case-work .ab-heading { font: 700 21px/1.2 "Alegreya SC", serif; letter-spacing: .02em; border-bottom: 1px solid rgba(34,29,24,.35); padding-bottom: 4px; }
#case-work figcaption { font: italic 16px/1.3 Alegreya, serif; }
#case-work .ab-frame { box-shadow: 0 3px 0 rgba(0,0,0,.08); }
#case-work .ab-credits { margin-top: 10px; border-top: 1px solid rgba(34,29,24,.25); padding-top: 10px; }
@media (max-width: 640px) {
  .case-scroll { padding: 0 0 40px; }
  .page { padding: 66px 16px 30px; box-shadow: none; min-height: 100%; transform: translateY(16px); }
  #case-title { font-size: 26px; }
  .boxed { font-size: 17px; padding: 12px 14px; }
  .page-head { padding-right: 0; }
}

/* behind the screen: the DM's notes */
#notes { position: fixed; inset: 0; z-index: 40; opacity: 0; transition: opacity .35s ease; pointer-events: none; }
#notes.on { opacity: 1; pointer-events: auto; }
.notes-scroll { position: absolute; inset: 0; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 60px 16px 50px;
  display: flex; flex-wrap: wrap; gap: 26px; justify-content: center; align-items: flex-start; }
.sheet { width: min(470px, 100%); background: #f6f2e6; color: #2a2a35; padding: 26px 26px 26px 54px; box-shadow: 0 22px 50px rgba(0,0,0,.55); position: relative;
  font: 400 20px/30px Kalam, "Comic Sans MS", cursive; }
.lined { background-image: linear-gradient(90deg, transparent 38px, rgba(205, 80, 80, .55) 38px, rgba(205, 80, 80, .55) 40px, transparent 40px),
  repeating-linear-gradient(transparent 0 29px, rgba(80, 140, 200, .35) 29px 30px); background-position: 0 0, 0 25px; }
#notes-key { transform: rotate(-1.2deg); }
#notes-about { transform: rotate(1deg); }
#notes-list { list-style: none; margin: 0; padding: 0; }
#notes-list li { margin: 0; }
#notes-list button { all: unset; display: flex; gap: 10px; width: 100%; cursor: pointer; line-height: 30px; min-height: 30px; }
#notes-list button:hover .nm, #notes-list button:focus-visible .nm { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
#notes-list button:focus-visible { outline: 2px solid #b8463c; outline-offset: 2px; }
#notes-list .n { width: 30px; text-align: right; color: #7a2f2a; font-weight: 700; flex: none; }
#notes-list .nm { font-weight: 700; color: #1f2a5c; }
#notes-list .cl { color: #6a6a78; font: 500 12px/30px Alegreya, serif; letter-spacing: .08em; padding-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#notes-list .seen .n::after { content: "✓"; margin-left: 2px; color: #2d6a3a; }
#notes-about h2 { margin: 0; font: 700 28px/30px Kalam, cursive; color: #1f2a5c; }
#notes-about p { margin: 0; }
#notes-about .t { font-weight: 700; }
#notes-about a { color: #7a2f2a; text-decoration-thickness: 2px; text-underline-offset: 3px; }
#notes-about ul { list-style: none; margin: 0; padding: 0; }
#notes-about .gap { height: 30px; }
@media (max-width: 640px) { .sheet { padding: 22px 16px 22px 50px; font-size: 18px; } #notes-list .cl { display: none; } .notes-scroll { padding-top: 64px; } }
@media (prefers-reduced-motion: reduce) { .page, #case, #notes, #dm { transition: none !important; } }