@font-face { font-family:'Public Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/public-sans-regular.ttf') format('truetype'); }
@font-face { font-family:'Public Sans'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/public-sans-semibold.ttf') format('truetype'); }
:root {
  color-scheme:dark;
  --bg:#111f25;
  --surface:#20343a;
  --paper:#f1f4f2;
  --paper-back:#c1cecb;
  --ink:#16272c;
  --light:#eff4f1;
  --muted:#bfcfca;
  --accent:#ad173d;
  --accent-hover:#88102f;
  --curtain:#ad173d;
  --curtain-dark:#730d2e;
  --brass:#d5ba78;
  --font-text:'Public Sans',Arial,sans-serif;
  --small:14px;
  --body:16px;
  --lead:20px;
  --heading:clamp(32px,3vw,44px);
  --ease-out:cubic-bezier(.22,1,.36,1);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--light); font:400 var(--body)/1.5 var(--font-text); -webkit-font-smoothing:antialiased; }
button,input,select { font:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; color:inherit; border:0; }
button:disabled { cursor:default; opacity:.55; }
a { color:inherit; }
svg { display:block; }
[hidden] { display:none!important; }
:focus-visible { outline:3px solid var(--brass); outline-offset:5px; }
p { margin:0; text-wrap:pretty; }
h1,h2 { margin:0; font-weight:600; line-height:1.05; letter-spacing:-.035em; text-wrap:balance; }
h1 { font-size:var(--heading); }
h2 { font-size:var(--heading); }
::selection { background:var(--brass); color:var(--ink); }
.site-shell { position:relative; min-height:100svh; overflow:clip; }
.stage-set { position:absolute; top:0; left:0; width:100%; height:max(920px,100svh); pointer-events:none; }
.set-art { position:absolute; inset:0; width:100%; height:100%; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.curtain { fill:var(--curtain); stroke:var(--curtain-dark); stroke-width:2; }
.curtain-fold { stroke:var(--curtain-dark); stroke-width:2.5; }
.curtain-tie { fill:var(--brass); stroke:var(--curtain-dark); stroke-width:2; }
.floor-line { stroke:var(--surface); stroke-width:2.5; }
.footlights { fill:var(--brass); stroke:var(--ink); stroke-width:2; }
.light-ray { fill:none; stroke:var(--brass); stroke-width:2; }
.curtain-motion { position:absolute; top:0; width:25%; height:62.5%; overflow:visible; transform-origin:0 0; }
.curtain-motion-left { left:0; }
.curtain-motion-right { right:0; transform-origin:100% 0; }
.footlight-motion { position:absolute; bottom:15%; left:0; width:100%; height:11.67%; }
.masthead { position:relative; z-index:5; display:flex; justify-content:space-between; align-items:center; padding:16px 32px; gap:24px; }
.wordmark { display:flex; align-items:center; gap:8px; text-decoration:none; font-size:var(--small); }
.wordmark svg { width:25px; height:32px; fill:var(--paper); stroke:var(--ink); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.header-actions { display:flex; gap:24px; align-items:center; }
.sound-toggle,.text-button { padding:10px 0; background:none; font-size:var(--small); min-height:44px; }
.sound-toggle { display:flex; gap:8px; align-items:center; }
.sound-toggle svg { width:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.text-button { text-decoration:underline; text-underline-offset:5px; }
button,a { transition:transform 140ms var(--ease-out),background-color 180ms ease,color 180ms ease; }
button:active { transform:translateY(2px) rotate(-.5deg); }
.game-layout { position:relative; display:grid; grid-template-columns:39% 61%; max-width:1360px; margin:0 auto; padding:35px 64px 20px; min-height:790px; align-items:start; }
.story-column { position:relative; z-index:3; min-width:0; padding-top:18px; }
.show-sign { position:relative; width:100%; max-width:430px; height:auto; aspect-ratio:440/166; margin:0 0 32px; font-size:64px; }
.sign-ink { position:absolute; inset:0; width:100%; height:100%; fill:none; stroke:var(--light); stroke-width:5; stroke-linecap:round; stroke-linejoin:round; overflow:visible; }
.sign-fallback { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.programme { color:var(--ink); background:var(--paper); padding:28px; margin:0 12% 0 0; position:relative; transform:rotate(-1.5deg); clip-path:polygon(0 1%,98% 0,100% 98%,1% 100%); }
.programme:before { content:''; position:absolute; top:0; right:24px; width:22px; height:10px; background:var(--paper-back); }
.intro-copy { font-size:18px; line-height:1.5; margin:0 0 24px; }
.home-actions { display:flex; flex-direction:column; align-items:stretch; gap:12px; }
.primary,.secondary { padding:14px 18px; min-height:48px; border:0; border-radius:0; font-size:var(--body); line-height:1.35; text-align:center; }
.primary { background:var(--accent); color:var(--light); clip-path:polygon(0 0,100% 2%,99% 100%,1% 98%); font-weight:600; }
.secondary { background:var(--paper-back); color:var(--ink); clip-path:polygon(1% 0,100% 1%,99% 98%,0 100%); }
.play-aside { font-size:var(--small); margin-top:18px; }
.theatre-column { position:relative; min-width:0; }
.theatre { position:relative; width:100%; height:690px; isolation:isolate; }
.paper-holder { position:absolute; width:69%; height:75%; left:16%; top:5%; transform:rotate(-5deg); transform-origin:50% 95%; z-index:2; }
.paper { position:relative; color:var(--ink); color-scheme:light; background:var(--paper); width:100%; height:100%; display:flex; flex-direction:column; padding:20px; }
.paper:after { content:''; position:absolute; inset:5px -6px -5px 7px; background:var(--paper-back); z-index:-1; transform:rotate(2deg); }
.paper-meta { display:flex; align-items:start; justify-content:space-between; font-size:var(--small); gap:12px; }
#paper-number:empty { display:none; }
.monster-frame { flex:1; min-height:0; display:grid; place-items:center; cursor:default; }
.monster-frame>svg { width:100%; height:100%; overflow:visible; }
.paper-bottom { font-size:var(--small); margin-top:6px; }
.ghost-seat { position:absolute; z-index:3; width:20%; text-align:center; pointer-events:none; }
.ghost-art { width:100%; aspect-ratio:1; transform-origin:50% 88%; }
.ghost-art svg { width:100%; height:100%; overflow:visible; fill:var(--paper); stroke:var(--ink); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ghost-art .ink,.ghost-art .sheet-edge { fill:none; }
.ghost-art .eye { fill:var(--ink); stroke:none; }
.ghost-name { display:block; font-size:var(--small); line-height:1.35; white-space:nowrap; }
.ghost-name i { display:block; font-style:normal; color:var(--muted); font-size:var(--small); }
.seat-pip { left:-8%; top:12%; transform:rotate(-8deg); }
.seat-dot { right:-7%; top:15%; transform:rotate(7deg); }
.seat-moth { left:0; bottom:0; transform:rotate(-6deg); }
.seat-hush { right:-4%; bottom:0; transform:rotate(6deg); }
.seat-wisp { left:43%; bottom:-3%; width:19%; transform:rotate(3deg); }
.whisper-bubble { position:absolute; right:3%; top:7%; padding:10px 18px; background:var(--paper); color:var(--ink); z-index:4; font-size:var(--body); }
.stage-counter { font-size:var(--small); margin:35px 0 0; text-align:center; color:var(--muted); }
.stage-counter:empty { display:none; }
.notice { position:relative; z-index:6; background:var(--paper); color:var(--ink); padding:16px 24px; max-width:800px; margin:0 auto; }
#whisper-panel,#play-panel,#result-panel { background:var(--paper); color:var(--ink); padding:28px; margin-right:8%; transform:rotate(-1deg); }
#whisper-panel h1,#play-panel h1,#result-panel h1 { margin-bottom:24px; }
#whisper-panel .intro-copy { margin-top:0; }
.whisper-form label { display:block; font-size:var(--small); margin-bottom:8px; }
.input-wrap { display:flex; background:var(--paper-back); margin-bottom:12px; }
.input-wrap input { color:var(--ink); padding:14px 12px; min-width:0; width:100%; border:0; background:none; }
.shuffle { width:48px; flex-shrink:0; background:var(--paper-back); }
.shuffle svg { width:24px; margin:auto; fill:none; stroke:var(--ink); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.start-button { width:100%; }
.play-heading { font-size:var(--small); }
.recorded-tag { display:inline-block; background:var(--paper-back); color:var(--ink); padding:4px 8px; margin-bottom:18px; font-size:var(--small); }
.turn-state { font-size:var(--small); margin:0 0 18px; }
.turn-copy { font-size:var(--lead); line-height:1.4; margin-bottom:18px; overflow-wrap:anywhere; }
.paper-label { font-size:var(--small); display:block; }
.original-whisper blockquote { margin:8px 0 20px; font-size:24px; line-height:1.35; }
.next-prompt { font-size:var(--body); margin-bottom:18px; }
.turn-list { list-style:none; padding:0; margin:0 0 20px; display:flex; flex-wrap:wrap; gap:8px 16px; }
.turn-list li { color:var(--ink); font-size:var(--small); display:flex; gap:4px; }
.turn-list li>span:first-child,.turn-kind { display:none; }
.turn-list li.active { font-weight:600; text-decoration:underline; text-underline-offset:4px; }
.draw-tools { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.drawing-hint { font-size:var(--small); }
.draw-tools #done { order:-1; }
#failure-controls { display:flex; flex-direction:column; gap:12px; }
#continue-controls { margin-top:18px; }
.drawing-mode #draw-canvas { width:100%; flex:1; min-height:0; touch-action:none; cursor:crosshair; overflow:hidden; stroke:var(--ink); stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.flip-whisper { font-size:24px; line-height:1.35; overflow-wrap:anywhere; }
.comparison { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:24px; }
.comparison blockquote,.final-whisper p { font-size:var(--lead); margin:8px 0 0; overflow-wrap:anywhere; }
.result-actions { display:flex; flex-wrap:wrap; gap:10px; }
.sample-note { font-size:var(--small); margin-top:24px; }
.save-tools { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.save-tools label { font-size:var(--small); width:100%; }
.save-tools select { color:var(--ink); background:var(--paper-back); border:0; max-width:100%; width:100%; padding:12px; font-size:var(--body); color-scheme:light; }
.share-status { font-size:var(--small); margin-top:12px; }
.share-status:empty { display:none; }
.flipbook-caption { position:relative; background:var(--paper); color:var(--ink); padding:14px 20px; margin:30px 12% 0; font-size:var(--lead); transform:rotate(1deg); }
.flipbook-controls { position:relative; display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin:20px 8% 0; }
.flipbook-controls input { min-width:80px; flex:1; accent-color:var(--brass); }
#flip-count { font-size:var(--small); }
.how-strip { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:56px; max-width:1050px; margin:70px auto 80px; padding:32px; align-items:start; }
.how-strip h2 { padding-top:30px; }
.rules-slip { background:var(--paper); color:var(--ink); padding:28px 28px 40px; transform:rotate(2deg); clip-path:polygon(0 0,100% 0,100% 97%,95% 100%,90% 97%,85% 100%,80% 97%,75% 100%,70% 97%,65% 100%,60% 97%,55% 100%,50% 97%,45% 100%,40% 97%,35% 100%,30% 97%,25% 100%,20% 97%,15% 100%,10% 97%,5% 100%,0 97%); }
.rules-slip p+p { margin-top:20px; }
@media(hover:hover) and (pointer:fine) {
  .primary:hover { background:var(--accent-hover); }
  .secondary:hover { background:var(--light); }
  .text-button:hover,.sound-toggle:hover,.wordmark:hover { color:var(--brass); }
}
@media(min-width:1600px) { .game-layout { padding-top:65px; } }
@media(max-width:1100px) and (min-width:701px) {
  .game-layout { grid-template-columns:42% 58%; padding:30px 32px 0; min-height:800px; }
  .programme { margin-right:5%; padding:24px; }
  .show-sign { margin-bottom:28px; }
  .theatre { height:650px; }
  .paper-holder { left:18%; width:67%; height:65%; top:12%; }
  .ghost-seat { width:23%; }
  .seat-pip { left:-3%; top:1%; }
  .seat-dot { right:-5%; top:3%; }
  .seat-moth,.seat-hush { bottom:1%; }
  .seat-wisp { bottom:-2%; }
  #whisper-panel,#play-panel,#result-panel { padding:24px; margin-right:2%; }
  .comparison { grid-template-columns:1fr; }
  .how-strip { margin-top:0; }
}
@media(max-width:700px) {
  :root { --heading:32px; --lead:20px; }
  .stage-set { height:960px; }
  .masthead { padding:8px 20px; gap:12px; }
  .header-actions { gap:20px; }
  .wordmark span { display:none; }
  .curtain-motion { width:25%; height:45%; }
  .game-layout { display:flex; flex-direction:column; padding:16px 20px 0; min-height:0; gap:28px; }
  .story-column { width:100%; padding-top:0; }
  .show-sign { width:77%; max-width:340px; margin:0 auto 22px; }
  .programme { padding:20px; margin:0; transform:rotate(-1deg); }
  .intro-copy { font-size:16px; margin-bottom:16px; }
  .home-actions { gap:10px; }
  .home-actions .primary { padding-inline:8px; }
  .play-aside { margin-top:12px; }
  .theatre-column { width:100%; }
  .theatre { height:450px; }
  .paper-holder { width:74%; height:68%; left:14%; top:2%; }
  .paper { padding:14px; }
  .paper-meta,.paper-bottom { font-size:14px; }
  .ghost-seat { width:23%; }
  .ghost-name { font-size:14px; }
  .ghost-name i { display:none; }
  .seat-pip { left:-5%; top:1%; }
  .seat-dot { right:-5%; top:2%; }
  .seat-moth { left:0; bottom:0; }
  .seat-hush { right:0; bottom:0; }
  .seat-wisp { left:40%; bottom:-4%; }
  .stage-counter { margin-top:32px; }
  #whisper-panel,#play-panel,#result-panel { margin:0; padding:24px; transform:none; }
  .comparison { gap:16px; }
  .comparison blockquote,.final-whisper p { font-size:16px; }
  #play-panel h1 { margin-bottom:16px; }
  .turn-state,.turn-copy { margin-bottom:14px; }
  .turn-list { margin-bottom:16px; }
  .turn-list li:not(.active) { display:none; }
  .turn-kind { display:inline; }
  .playing .game-layout { gap:24px; }
  .theatre-column>#drawing-controls { background:var(--paper); color:var(--ink); padding:20px; margin-top:35px; }
  .drawing-mode .paper-holder { top:2%; width:80%; left:10%; height:70%; transform:rotate(-2deg); }
  .drawing-mode .seat-pip,.drawing-mode .seat-dot { visibility:hidden; }
  .drawing-mode .seat-moth,.drawing-mode .seat-hush { bottom:-2%; width:24%; }
  .drawing-mode .seat-wisp { bottom:-5%; }
  .flipbook-caption { margin:30px 0 0; }
  .flipbook-controls { margin:20px 0 0; }
  .how-strip { display:block; margin:64px 20px 40px; padding:0; }
  .how-strip h2 { padding:0; margin-bottom:24px; }
  .rules-slip { padding:24px 24px 36px; }
  .flip-whisper { font-size:20px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  button,a { transition:none; }
}
/* The cast gets a clear apron in front of the drawing sheet. */
@media(min-width:1101px) {
  .game-layout { min-height:860px; }
  .seat-moth,.seat-hush { bottom:-7%; }
  .seat-wisp { bottom:-10%; }
}
@media(min-width:701px) and (max-width:1100px) {
  .paper-holder { top:24%; height:53%; }
  .seat-pip { left:0; top:0; }
  .seat-dot { right:0; top:0; }
  .seat-moth,.seat-hush { bottom:0; }
  .seat-wisp { bottom:-3%; }
}
@media(max-width:700px) {
  .programme { padding:18px; }
  .home-actions { gap:4px; }
  .home-actions .secondary { background:none; min-height:44px; padding:10px 8px; text-decoration:underline; text-underline-offset:4px; }
  .programme .play-aside { margin-top:8px; }
  .theatre { height:430px; }
  .paper-holder { width:80%; left:10%; top:1%; height:72%; }
  .ghost-seat { width:18%; top:auto; bottom:0; transform:none; }
  .seat-pip { left:0; }
  .seat-dot { left:20%; right:auto; }
  .seat-moth { left:40%; }
  .seat-hush { left:60%; right:auto; }
  .seat-wisp { left:80%; }
  .theatre.drawing-mode { height:470px; }
  .drawing-mode .paper-holder { height:70%; }
  .drawing-mode .seat-moth { left:0; bottom:0; }
  .drawing-mode .seat-hush { left:auto; right:0; bottom:0; }
  .drawing-mode .seat-wisp { left:40%; bottom:-2%; }
  .how-strip { margin-top:110px; }
}
/* Keep the reveal's drawing ahead of its export controls on a phone. */
@media(min-width:701px) {
  .flipbook-caption { margin-top:100px; }
}
@media(min-width:701px) and (max-width:1100px) {
  .ghost-name i { font-size:14px; white-space:normal; }
  .seat-dot { right:2%; transform:none; }
  .seat-hush { right:0; transform:none; }
}
@media(max-width:700px) {
  .wordmark span { display:inline; }
  .curtain-motion { height:62.5%; }
  .playing .turn-list { display:none; }
  .game-layout:has(#result-panel:not([hidden])) { display:grid; grid-template-columns:minmax(0,1fr); }
  .story-column:has(#result-panel:not([hidden])),#result-panel:not([hidden]) { display:contents; }
  .reveal-summary { background:var(--paper); color:var(--ink); padding:20px; grid-row:2; }
  .game-layout:has(#result-panel:not([hidden])) .theatre-column { grid-row:1; }
  .reveal-details { background:var(--paper); color:var(--ink); padding:20px; grid-row:3; }
  .reveal-details .sample-note,.reveal-details .save-tools:first-child { margin-top:0; }
  .reveal-summary .result-actions { gap:8px; }
  .reveal-summary .result-actions button { padding:12px 10px; }
}
@media(min-width:701px) {
  .flipbook-caption[hidden]+.flipbook-controls { margin-top:100px; }
}
@media(min-width:701px) and (max-width:1100px) {
  .comparison { grid-template-columns:1fr 1fr; }
  .comparison blockquote,.comparison .final-whisper p { font-size:16px; }
}
/* On a phone the paper stays on top, so changing words never move it. */
@media(max-width:700px) {
  .playing .theatre-column { order:1; }
  .playing .story-column { order:2; }
  .playing .game-layout { padding-top:8px; gap:12px; }
  .stage-counter:empty { display:none; }
  .rescuing #turn-title,.rescuing #turn-label,.rescuing .turn-list,.rescuing .play-heading { display:none; }
  .rescuing #play-panel { padding:14px 18px; }
  .rescuing .turn-copy { margin-bottom:8px; }
  .theatre.drawing-mode { height:auto; aspect-ratio:1; }
  .drawing-mode .ghost-seat { display:none; }
  .drawing-mode .paper-holder { top:0; left:0; width:100%; height:100%; transform:none; }
  .theatre-column>#drawing-controls { margin-top:10px; padding:12px 16px; }
  .drawing-hint { margin-bottom:8px; }
}