/* R04 · 1930s vaudeville cartoon presentation: theatre curtains, gilded deco frame,
   hand-inked lettering, playing-card paper and heavy old-film treatment. */
@font-face{font-family:Rye;src:url('assets/fonts/Rye-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:ZCOOL;src:url('assets/fonts/ZCOOLKuaiLe-Regular.ttf') format('truetype');font-display:swap}
:root{
 --booth:#0e0907;--ink:#1a110b;--ink-soft:#3b2a1c;--cream:#f4e6c3;--paper:#ead6a8;--paper-dark:#d9bf87;--muted:#a8957a;
 --gold:#e8b443;--gold-hi:#fbe3a1;--gold-lo:#9c6a1c;--red:#b8261c;--red-dark:#6d0f0b;--red-hi:#de4a36;--teal:#2d6a6e;
 --font-cn:ZCOOL,"Microsoft YaHei",sans-serif;--font-en:Rye,Georgia,serif;color-scheme:dark
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--booth)}
body{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:18px max(16px,env(safe-area-inset-left)) 12px;color:var(--cream);font-family:var(--font-cn);
 background:radial-gradient(ellipse 70% 55% at 50% 42%,#3a2416 0,#1b100a 55%,#0a0605 100%)}
button{font:inherit;cursor:pointer;border:0;-webkit-tap-highlight-color:transparent}button:disabled{cursor:wait;opacity:.45}
button:focus-visible,canvas:focus-visible{outline:3px solid var(--gold);outline-offset:4px}button:active{translate:0 2px}button:focus:not(:focus-visible){outline:0}.hidden{display:none!important}

/* ── Projector booth & gilded proscenium ─────────────────────────── */
.projector{width:min(100%,calc((100dvh - 100px)*16/9),1280px);display:flex;flex-direction:column;align-items:center;gap:14px}
.stage{position:relative;width:100%;aspect-ratio:16/9;padding:1.1%;border-radius:14px;container-type:inline-size;
 background:linear-gradient(135deg,var(--gold-hi) 0,var(--gold) 18%,var(--gold-lo) 38%,var(--gold) 55%,var(--gold-hi) 70%,var(--gold-lo) 100%);
 box-shadow:0 0 0 2px var(--ink),0 0 0 5px #4a2c12,0 0 0 7px var(--ink),0 22px 60px #000c,0 0 120px #f2b65a1c}
.stage:before{content:'';position:absolute;inset:.45%;border:2px solid #5b3a10;border-radius:10px;pointer-events:none;box-shadow:inset 0 0 0 1px #fff3c066}
.screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:8px/10px;background:#1b1512;box-shadow:0 0 0 3px var(--ink)}
canvas{display:block;width:100%;height:100%;outline:0;touch-action:none;animation:gate-weave .5s steps(1) infinite}
.overlay{position:absolute;inset:0}
body.film-off canvas,body.film-off .film-dust{animation:none}
@keyframes gate-weave{0%{transform:translate(0,0)}25%{transform:translate(.06cqw,-.05cqw)}50%{transform:translate(-.04cqw,.06cqw)}75%{transform:translate(.05cqw,.03cqw)}}

/* soft flicker over everything, including HTML paper, so menus feel printed on film */
.film-dust{position:absolute;inset:0;pointer-events:none;z-index:6;mix-blend-mode:multiply;
 background:radial-gradient(ellipse 78% 74% at 50% 50%,transparent 62%,#2b170955 88%,#120804b0 100%);animation:flicker .18s steps(2) infinite}
body.film-off .film-dust{background:radial-gradient(ellipse 80% 76% at 50% 50%,transparent 70%,#12080466 100%)}
@keyframes flicker{0%{opacity:.92}50%{opacity:1}}

.stage-tools{position:absolute;right:2.2%;top:2.6%;display:flex;gap:.7cqw;z-index:4}
.stage-tools button{padding:.35cqw 1.05cqw .45cqw;background:linear-gradient(180deg,var(--cream),var(--paper-dark));border:.2cqw solid var(--ink);border-radius:.5cqw;color:var(--ink);font-size:1.3cqw;box-shadow:.2cqw .25cqw 0 var(--ink);transform:rotate(1.5deg);transition:transform .12s}
.stage-tools button:hover{background:var(--gold);transform:rotate(-1deg) scale(1.06)}
#pause-open{font-family:var(--font-en);min-width:3.2cqw}

/* ── Title: stage curtains ───────────────────────────────────────── */
#menu{overflow:hidden}
.spotlight{position:absolute;inset:0;pointer-events:none;
 background:radial-gradient(ellipse 34% 62% at 76% 46%,#f9dfa21f 0,transparent 70%),linear-gradient(90deg,#0f0805c4 0,#0f080575 34%,#0f080510 56%,transparent 70%)}
.curtain{position:absolute;top:0;bottom:0;width:7.6%;pointer-events:none;z-index:1;
 background:repeating-linear-gradient(90deg,#4b0907 0,#8a1812 .9cqw,#c5362a 1.6cqw,#e0563f 1.85cqw,#a7231a 2.4cqw,#5f0c09 3.3cqw);
 filter:drop-shadow(.6cqw 0 .8cqw #000a)}
.curtain-left{left:-1.5%;border-bottom-right-radius:100% 22%;transform-origin:top left;animation:sway 6s ease-in-out infinite}
.curtain-right{right:-1.5%;border-bottom-left-radius:100% 22%;transform-origin:top right;animation:sway 6s ease-in-out -3s infinite;filter:drop-shadow(-.6cqw 0 .8cqw #000a)}
.curtain:after{content:'';position:absolute;top:60%;width:112%;height:2.2cqw;border-radius:1cqw;background:linear-gradient(180deg,var(--gold-hi),var(--gold) 45%,var(--gold-lo));box-shadow:0 .2cqw 0 var(--ink),inset 0 0 0 .15cqw #6b4410}
.curtain-left:after{left:-10%;transform:rotate(-8deg)}.curtain-right:after{right:-10%;transform:rotate(8deg)}
.valance{position:absolute;left:0;right:0;top:0;height:6.2%;z-index:2;pointer-events:none;
 background:linear-gradient(180deg,#5a0b08,#a32219 60%,#7b1510);box-shadow:0 .3cqw .6cqw #000a}
.valance:before{content:'';position:absolute;left:0;right:0;top:100%;height:2.4cqw;
 background:radial-gradient(circle at 50% 0,#9c2018 0 1.55cqw,var(--gold) 1.55cqw 1.85cqw,var(--ink) 1.85cqw 2.0cqw,transparent 2.05cqw) 0 0/4cqw 2.4cqw repeat-x}
.valance:after{content:'';position:absolute;left:0;right:0;bottom:0;height:.45cqw;background:var(--gold);border-top:.12cqw solid var(--ink);border-bottom:.12cqw solid var(--ink)}
@keyframes sway{0%,100%{transform:skewX(0)}50%{transform:skewX(.8deg)}}

/* ── Title card ──────────────────────────────────────────────────── */
.title-content{position:absolute;left:8.6%;top:11.5%;width:45%;text-align:center;z-index:3}
.marquee{position:relative;padding:1.3cqw 2cqw 1.15cqw;margin:0 auto;width:96%;
 background:radial-gradient(ellipse at 50% 30%,#3d2414 0,#1e120b 75%);border:.3cqw solid var(--ink);border-radius:1.4cqw;
 box-shadow:0 0 0 .35cqw var(--gold),0 0 0 .55cqw var(--ink),.7cqw .9cqw 0 .55cqw #0008;transform:rotate(-1.2deg)}
/* row of twinkling theatre bulbs inside the frame */
.marquee:before,.marquee:after{content:'';position:absolute;left:.9cqw;right:.9cqw;height:.9cqw;pointer-events:none;
 background:radial-gradient(circle,#fff6d6 0 .18cqw,#f6c659 .2cqw .3cqw,#a86c1a .32cqw .38cqw,transparent .4cqw) 0 50%/1.8cqw .9cqw repeat-x;animation:bulbs 1.1s steps(2) infinite}
.marquee:before{top:.3cqw}.marquee:after{bottom:.3cqw;animation-delay:-.55s}
@keyframes bulbs{0%{opacity:1;filter:drop-shadow(0 0 .35cqw #ffd36ccc)}50%{opacity:.55;filter:none}}
.presenter{margin:.4cqw 0 .25cqw}
.presenter span{position:relative;display:inline-block;padding:.32cqw 2.4cqw .38cqw;font-size:1.25cqw;letter-spacing:.24cqw;color:var(--cream);background:var(--red);border:.18cqw solid var(--ink);box-shadow:.15cqw .2cqw 0 var(--ink);text-shadow:.1cqw .12cqw 0 var(--ink)}
.presenter span:before,.presenter span:after{content:'';position:absolute;top:.45cqw;width:1.6cqw;height:100%;background:var(--red-dark);border:.18cqw solid var(--ink);z-index:-1}
.presenter span:before{left:-1.2cqw;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,40% 50%)}
.presenter span:after{right:-1.2cqw;clip-path:polygon(0 0,100% 0,60% 50%,100% 100%,0 100%)}
.ink-title{margin:.2cqw 0 0;font:normal 7.6cqw/1.02 var(--font-cn);letter-spacing:.35cqw;white-space:nowrap}
.ink-title span{position:relative;display:inline-block;color:var(--ink);-webkit-text-stroke:.95cqw var(--ink);text-shadow:.45cqw .55cqw 0 var(--ink),.55cqw .65cqw 0 #000;
 animation:bob 2.4s ease-in-out infinite}
.ink-title span:after{content:attr(data-ch);position:absolute;inset:0;-webkit-text-stroke:0;text-shadow:none;color:transparent;
 background:linear-gradient(180deg,#fffbea 0,#fde6a6 36%,#f2b645 60%,#c7741c 100%);-webkit-background-clip:text;background-clip:text}
.ink-title span:nth-child(1){--r:-5deg;animation-delay:0s}.ink-title span:nth-child(2){--r:3deg;animation-delay:-.6s}.ink-title span:nth-child(3){--r:-3deg;animation-delay:-1.2s}.ink-title span:nth-child(4){--r:5deg;animation-delay:-1.8s}
@keyframes bob{0%,100%{transform:rotate(var(--r)) translateY(0) scale(1,1)}45%{transform:rotate(calc(var(--r)*.4)) translateY(-.45cqw) scale(.97,1.04)}60%{transform:rotate(var(--r)) translateY(.05cqw) scale(1.04,.96)}}
.english-title{font:1.6cqw/1.2 var(--font-en);color:var(--gold);margin:.9cqw 0 .3cqw;letter-spacing:.22cqw;-webkit-text-stroke:.16cqw var(--ink);paint-order:stroke fill;text-shadow:.15cqw .2cqw 0 var(--ink)}
.episode{display:flex;justify-content:center;align-items:center;gap:.8cqw;margin:.2cqw 0 .3cqw;font-size:.95cqw;letter-spacing:.2cqw;color:#e2c995}
.episode:before,.episode:after{content:'';height:.12cqw;width:5cqw;background:linear-gradient(90deg,transparent,var(--gold))}.episode:after{background:linear-gradient(90deg,var(--gold),transparent)}
.episode i{font-style:normal;color:var(--gold);font-size:.8cqw}
.tagline{font-size:1.3cqw;margin:1.3cqw 0 1cqw;color:var(--cream);text-shadow:.1cqw .14cqw 0 var(--ink),0 0 .8cqw #000}

/* difficulty as ticket stubs */
.difficulty{display:flex;justify-content:center;gap:1.4cqw;margin-bottom:.9cqw}
.difficulty button{position:relative;display:flex;align-items:baseline;gap:.6cqw;min-width:10.5cqw;justify-content:center;padding:.5cqw 1.4cqw .55cqw;color:var(--ink-soft);font-size:1.45cqw;
 background:radial-gradient(circle at 0 50%,transparent .55cqw,#d7c193 .6cqw) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent .55cqw,#d7c193 .6cqw) right/51% 100% no-repeat;
 filter:drop-shadow(.18cqw .22cqw 0 var(--ink));transform:rotate(-2deg);transition:transform .14s;opacity:.78}
.difficulty button:nth-child(2){transform:rotate(2deg)}
.difficulty button:after{content:'';position:absolute;inset:.3cqw .9cqw;border:.12cqw dashed #6c5232;pointer-events:none}
.difficulty button b{font-weight:normal}.difficulty small{font:.9cqw var(--font-en);color:var(--red)}
.difficulty button:hover{opacity:1}
.difficulty button[aria-pressed=true]{opacity:1;color:var(--ink);transform:rotate(-2deg) scale(1.1);
 background:radial-gradient(circle at 0 50%,transparent .55cqw,var(--gold) .6cqw) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent .55cqw,var(--gold) .6cqw) right/51% 100% no-repeat}
.difficulty button[aria-pressed=true]:nth-child(2){transform:rotate(2deg) scale(1.1)}
.style-switch{display:block;margin:0 auto .8cqw;background:transparent;color:#e2c995;font-size:1cqw;padding:.1cqw .7cqw;text-shadow:.08cqw .1cqw 0 var(--ink);border-bottom:.1cqw dashed #d6bb8c80}
.style-switch:hover{color:var(--gold)}

/* controls card */
.control-paper{position:relative;margin:0 auto;width:84%;padding:.85cqw 1.3cqw;color:var(--ink);
 background:linear-gradient(0deg,#d8bf8a 0,var(--paper) 40%,#f3e3bd 100%);border:.22cqw solid var(--ink);border-radius:.6cqw;box-shadow:.35cqw .4cqw 0 #0009;transform:rotate(.8deg)}
.control-paper:before{content:'';position:absolute;inset:.35cqw;border:.1cqw solid #8a6a3e;border-radius:.35cqw;pointer-events:none}
.control-paper dl{margin:0;display:grid;gap:.25cqw}.control-paper dl>div{display:grid;grid-template-columns:44% 56%;align-items:center;font-size:1.18cqw;line-height:1.25}
.control-paper dt{text-align:right;padding-right:1.2cqw;color:var(--red);font-family:var(--font-cn)}.control-paper dd{margin:0;text-align:left}

.start-call{position:relative;display:block;margin:1.3cqw auto .1cqw;padding:.2cqw 1cqw;background:none;color:var(--cream);font-size:2.3cqw;letter-spacing:.1cqw;
 -webkit-text-stroke:.3cqw var(--ink);paint-order:stroke fill;text-shadow:.18cqw .24cqw 0 var(--ink);animation:call-pulse 1.2s ease-in-out infinite}
.start-call i{font-style:normal;display:inline-block;margin-right:.6cqw;color:var(--cream);animation:poke .6s ease-in-out infinite alternate}
.start-call:hover,.start-call:focus-visible{color:var(--gold);outline:none}
.start-call:disabled{animation:none}
@keyframes call-pulse{0%,100%{transform:scale(1) rotate(-1deg)}50%{transform:scale(1.06) rotate(1deg)}}
@keyframes poke{from{transform:translateX(-.4cqw)}to{transform:translateX(.3cqw)}}
.load-note{font-size:.95cqw;color:#e4cda6;margin:.4cqw 0 0;text-shadow:.08cqw .1cqw 0 var(--ink)}
.sound-note{font-size:.85cqw;color:#cdb892;margin:.15cqw 0 0;text-shadow:.08cqw .1cqw 0 var(--ink)}

/* ── Paper cards (pause / settings / result) ────────────────────── */
.center{z-index:3;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 50%,#1a0f0899,#0b0604d9)}
.paper{position:relative;color:var(--ink);text-align:center;padding:2.6cqw 3.6cqw 2.2cqw;width:46cqw;
 background-color:var(--paper);
 background-image:radial-gradient(ellipse at 85% 92%,#a8782a22 0 28%,transparent 30%),radial-gradient(ellipse at 12% 8%,#fff6dc80 0 20%,transparent 40%),radial-gradient(#6c4f2420 .55px,transparent .75px);
 background-size:auto,auto,6px 6px;border:.3cqw solid var(--ink);border-radius:1cqw;
 box-shadow:0 0 0 .35cqw var(--gold),0 0 0 .55cqw var(--ink),1cqw 1.2cqw 0 .5cqw #000a;transform:rotate(-1deg);animation:paper-enter .32s cubic-bezier(.2,.9,.3,1.25)}
.paper:before{content:'';position:absolute;inset:.7cqw;border:.14cqw solid var(--ink-soft);border-radius:.6cqw;pointer-events:none;
 box-shadow:inset 0 0 0 .3cqw var(--paper),inset 0 0 0 .42cqw #8a6a3e}
/* deco corner fans */
.paper:after{content:'';position:absolute;inset:.25cqw;pointer-events:none;
 background:
  radial-gradient(circle at 0 0,var(--red) 0 1.3cqw,var(--ink) 1.3cqw 1.5cqw,transparent 1.55cqw) top left/3cqw 3cqw no-repeat,
  radial-gradient(circle at 100% 0,var(--red) 0 1.3cqw,var(--ink) 1.3cqw 1.5cqw,transparent 1.55cqw) top right/3cqw 3cqw no-repeat,
  radial-gradient(circle at 0 100%,var(--red) 0 1.3cqw,var(--ink) 1.3cqw 1.5cqw,transparent 1.55cqw) bottom left/3cqw 3cqw no-repeat,
  radial-gradient(circle at 100% 100%,var(--red) 0 1.3cqw,var(--ink) 1.3cqw 1.5cqw,transparent 1.55cqw) bottom right/3cqw 3cqw no-repeat;border-radius:.8cqw}
.paper-title{font:normal 4.4cqw/1.05 var(--font-cn);margin:0 0 .3cqw;color:var(--red);letter-spacing:.3cqw;-webkit-text-stroke:.38cqw var(--ink);paint-order:stroke fill;text-shadow:.22cqw .3cqw 0 var(--ink);transform:rotate(-2deg)}
.paper-subtitle{display:flex;align-items:center;justify-content:center;gap:1cqw;font-size:1.35cqw;margin:.6cqw 0 1cqw;color:var(--ink-soft)}
.paper-subtitle:before,.paper-subtitle:after{content:'';flex:0 1 6cqw;height:.5cqw;background:radial-gradient(circle,var(--ink) 0 .14cqw,transparent .16cqw) center/.9cqw .5cqw repeat-x}
.menu-list{display:grid;gap:.15cqw;margin-top:1.2cqw}
.menu-list button{position:relative;background:none;color:#7a6446;font-size:1.85cqw;min-height:3.4cqw;padding:.45cqw 1.7cqw;transition:transform .1s,color .1s}
.menu-list button:hover,.menu-list button:focus{color:var(--ink);outline:none;transform:scale(1.12) rotate(-1deg)}
.menu-list button:before{content:'☛';position:absolute;left:12%;top:50%;translate:0 -52%;font-size:2.3cqw;color:var(--cream);-webkit-text-stroke:.14cqw var(--ink);opacity:0;transition:opacity .1s}
.menu-list button:hover:before,.menu-list button:focus:before{opacity:1;animation:poke .5s ease-in-out infinite alternate}
.menu-nav{font-size:1.05cqw;color:#7f6c50;margin:1.1cqw 0 0;letter-spacing:.06cqw}
.settings-paper{width:50cqw;padding:2.2cqw 3.4cqw 1.8cqw}.settings-paper .paper-title{font-size:3.8cqw}.settings-paper .paper-subtitle{font-size:1.2cqw;margin:.4cqw 0 .6cqw}
.settings-list{margin-top:.6cqw;gap:0}
.settings-list button{display:flex;justify-content:space-between;align-items:center;min-height:2.85cqw;font-size:1.5cqw;padding:.4cqw 1.6cqw .4cqw 3.2cqw;border-bottom:.1cqw dotted #8a6a3e66}
.settings-list button:hover,.settings-list button:focus{transform:none;background:linear-gradient(90deg,transparent,#e8b44366 15%,#e8b44366 85%,transparent)}
.settings-list button:before{left:.4cqw;font-size:1.9cqw}
.settings-list button strong{font-weight:normal;color:var(--red);font-size:1.3cqw}.settings-list #settings-back{display:block;padding-left:1.6cqw;border-bottom:0;margin-top:.3cqw}
.settings-list #settings-back:before{left:36%}
.settings-list [data-adjust=sfx] strong{min-width:8cqw;text-align:right;background:linear-gradient(90deg,#b8261c33 calc(var(--level,0)*100%),transparent 0);padding:.15cqw .5cqw;border-bottom:.16cqw solid var(--red)}
.settings-list button[data-adjust]:focus strong:before{content:'‹ ';color:var(--ink)}.settings-list button[data-adjust]:focus strong:after{content:' ›';color:var(--ink)}

/* result */
.result-paper{width:58cqw;padding:2.4cqw 4.3cqw 2cqw}
.result-paper .paper-title{font:normal 5.2cqw/1 var(--font-cn);color:var(--red)}
.result-kicker{font:1.55cqw var(--font-en);color:var(--ink);margin:.6cqw 0 1cqw;letter-spacing:.3cqw}
.result-quote{font-size:1.55cqw;line-height:1.5;margin:0 0 2.4cqw;color:var(--ink-soft)}
.progress-track{height:.35cqw;margin:3.6cqw 2.4cqw 3.6cqw;position:relative;text-align:center;background:repeating-linear-gradient(90deg,var(--ink) 0 .9cqw,transparent .9cqw 1.4cqw)}
.progress-track>div{height:100%;background:var(--red);width:0;box-shadow:0 0 0 .08cqw var(--ink)}
.progress-track>span{position:absolute;left:var(--mark);top:1.2cqw;transform:translateX(-50%);font-size:1.15cqw;white-space:nowrap}
.progress-track>span:before{content:'';position:absolute;left:50%;top:-1.75cqw;width:1.3cqw;height:1.3cqw;background:var(--cream);border:.22cqw solid var(--ink);border-radius:50%;transform:translateX(-50%)}
.progress-track>span.done:before{background:var(--gold)}
.progress-track>span:last-child:before{content:'★';display:grid;place-items:center;width:1.9cqw;height:1.9cqw;top:-2.05cqw;font-size:1.1cqw;color:var(--red);line-height:1}
#progress-player{position:absolute;bottom:.8cqw;left:0;height:4.6cqw;width:auto;transform:translateX(-50%);animation:hop .55s ease-in-out infinite alternate;filter:drop-shadow(.15cqw .2cqw 0 #0005)}
@keyframes hop{from{translate:0 0}to{translate:0 -.5cqw}}
#result-stats{font-size:1.35cqw;color:var(--red);margin:1.2cqw 0}
.paper-action{position:relative;background:var(--red);color:var(--cream);font-size:1.75cqw;padding:.55cqw 2cqw .6cqw;margin-top:.6cqw;border:.2cqw solid var(--ink);border-radius:.5cqw;box-shadow:.22cqw .28cqw 0 var(--ink);text-shadow:.1cqw .12cqw 0 var(--ink);transform:rotate(-1deg);transition:transform .1s}
.paper-action:hover,.paper-action:focus{background:var(--red-hi);transform:rotate(1deg) scale(1.06);outline:none}
.text-button{display:block;margin:.8cqw auto 0;background:transparent;color:#715d46;font-size:1.15cqw;padding:.35cqw}.text-button:hover,.text-button:focus{color:var(--red);outline:none}
.result-paper.won{transform:rotate(1deg);min-height:32cqw}
.result-paper.won .paper-title,.result-paper.won .result-kicker,.result-paper.won .result-quote{padding-right:10cqw}
.result-paper.won .paper-title{color:var(--gold)}
.result-paper.won .result-quote{margin-bottom:1.2cqw}
#win-report{position:relative;min-height:14cqw;text-align:left}
.score-lines{margin:0;width:64%;display:grid;gap:.85cqw;padding-top:.4cqw}
.score-lines>div{display:flex;align-items:baseline;font-size:1.6cqw;opacity:0;animation:tally .3s ease-out forwards}
.score-lines>div:nth-child(1){animation-delay:1.7s}.score-lines>div:nth-child(2){animation-delay:2.16s}.score-lines>div:nth-child(3){animation-delay:2.62s}.score-lines>div:nth-child(4){animation-delay:3.08s}.score-lines>div:nth-child(5){animation-delay:3.54s}
@keyframes tally{from{opacity:0;translate:-1cqw 0}to{opacity:1;translate:0 0}}
.score-lines dt{display:flex;flex:1;gap:1cqw;align-items:baseline}.score-lines dt:after{content:'';border-bottom:.16cqw dotted #6c4f24aa;flex:1}
.score-lines dd{font:1.55cqw var(--font-en);color:var(--red);margin:0 0 0 1cqw}#score-difficulty{font-family:var(--font-cn)}
#grade-stamp{position:absolute;right:-1cqw;top:-7.5cqw;width:12cqw;height:12cqw;border:.45cqw solid var(--red);outline:.18cqw solid var(--red);outline-offset:-1.2cqw;border-radius:50%;display:grid;place-items:center;font:6cqw var(--font-en);color:var(--red);transform:rotate(-14deg);mix-blend-mode:multiply;background:radial-gradient(circle,#b8261c14,transparent 70%);opacity:0}
.result-paper.won #grade-stamp{animation:stamp-enter .42s cubic-bezier(.2,.8,.3,1.4) 4.05s forwards}

/* toast as a ribbon */
#toast{position:absolute;left:50%;bottom:16%;transform:translateX(-50%) rotate(-2deg);background:var(--red);color:var(--cream);border:.2cqw solid var(--ink);padding:.5cqw 2.2cqw .6cqw;font-size:1.5cqw;letter-spacing:.1cqw;text-shadow:.1cqw .12cqw 0 var(--ink);box-shadow:.2cqw .26cqw 0 var(--ink);clip-path:polygon(0 0,100% 0,96% 50%,100% 100%,0 100%,4% 50%);opacity:0;pointer-events:none;transition:opacity .15s,scale .15s;scale:.8;white-space:nowrap;z-index:2}
#toast.show{opacity:1;scale:1}

/* iris wipe */
#iris{position:absolute;inset:0;background:#0b0604;z-index:7;clip-path:circle(0 at 50% 50%);transition:clip-path .24s ease-in;pointer-events:none}
#iris.covered{clip-path:circle(78% at 50% 50%);pointer-events:auto}

/* keys strip under the stage as a cinema ticket roll */
.keys{margin:0;max-width:1280px;text-align:center;color:var(--muted);font-size:12px;line-height:1.9;text-wrap:balance;letter-spacing:.02em}
.keys b{color:var(--ink);font-size:11px;font-weight:normal;border:1px solid var(--ink);border-radius:3px;padding:1px 5px;background:linear-gradient(180deg,var(--cream),var(--paper-dark));white-space:nowrap;box-shadow:1px 1px 0 #000}

.stage:fullscreen{width:100vw;height:100dvh;aspect-ratio:auto;padding:0;display:grid;place-items:center;background:var(--booth);border-radius:0}
.stage:fullscreen:before{display:none}
.stage:fullscreen .screen{width:min(100vw,calc(100dvh * 16/9));height:auto;aspect-ratio:16/9;container-type:inline-size}
body[data-scene=playing] #settings-open,body[data-scene=intro] #settings-open{display:none}

@keyframes paper-enter{from{opacity:0;scale:.6;rotate:-6deg}to{opacity:1;scale:1;rotate:0deg}}
@keyframes stamp-enter{from{opacity:0;scale:2.2}to{opacity:.92;scale:1}}
@media(max-width:700px){body{padding:8px}.projector{width:min(100%,calc((100dvh - 114px)*16/9))}.keys{font-size:10px;line-height:1.9}.keys b{font-size:9px;padding:1px 2px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.score-lines>div{opacity:1}.result-paper.won #grade-stamp{opacity:.92}}
/* one cursor at a time: while the mouse is over a list, it owns the highlight */
.menu-list:hover button:focus:not(:hover){color:#7a6446;transform:none;background:none}
.menu-list:hover button:focus:not(:hover):before{opacity:0;animation:none}