main{max-width:760px;margin:auto;padding:28px 0 60px}h1{margin-bottom:0}.lead{color:var(--gold);font-size:21px}section{margin:24px 0}.primary{background:var(--gold);color:#17130d;font-weight:bold}.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.toolbar strong{flex:1}progress{width:100%;height:8px;accent-color:var(--gold);margin-top:18px}.hall{text-align:center;background:radial-gradient(ellipse at top,#805a364f,transparent 70%),#14151f;border:1px solid var(--line);border-radius:18px;padding:20px 10px;margin-top:18px}#baton{font-size:65px;height:90px;color:#ffe4a6;transform:rotate(-25deg);transition:transform .12s}#baton.beat{transform:rotate(25deg)}.orchestra{font-size:30px;letter-spacing:.16em;margin:0;color:var(--gold)}#audience{font-size:24px;line-height:1.6;color:#a5a2b4;transition:color .3s}#audience[data-mood=happy]{color:#f5cc77}#audience[data-mood=confused]{color:#b591b0}#reaction{min-height:3.6em;margin-bottom:0}.meters{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}.meters>div{padding:12px;border:1px solid var(--line);border-radius:10px}.meters small,.meters strong{display:block}.meters strong{font-size:25px;color:var(--gold)}#tap{width:100%;min-height:116px;background:linear-gradient(135deg,#6e5733,#372c21);border:2px solid #dfc58e;color:#fff2d3;font-size:23px;touch-action:manipulation;user-select:none}#tap span{display:block;font-size:12px;color:#e3d3b5}#tap:active{background:#80663e}#tapNote,.credits{font-size:13px;color:var(--muted)}#guidance{color:var(--gold)}#paused{padding:16px;border:1px solid var(--gold);margin-top:16px}#score{font-size:36px;color:var(--gold)}#breakdown{margin:20px 0}.volume{margin-top:30px;display:flex;gap:12px;align-items:center}.volume input{min-width:0;flex:1;accent-color:var(--gold)}@media(max-width:480px){.catalog-shell{padding:0 16px}.catalog-header{gap:12px;flex-wrap:wrap}main{padding-top:12px}.toolbar button{font-size:13px;padding:8px}#baton{height:70px;font-size:50px}.hall{padding-top:10px}.meters strong{font-size:21px}}@media(prefers-reduced-motion:reduce){#baton,#audience{transition:none}}

#baton{width:80px;margin-inline:auto;pointer-events:none}.hall{overflow:hidden}

.conducting .catalog-header,.conducting main>h1,.conducting main>.lead,.conducting main>.eyebrow{display:none}.conducting main{padding-top:16px}.conducting #stage{margin-top:0}
/* The conducting area owns touch gestures; the rest of the page still scrolls. */
.gesture-area{position:relative;width:100%;height:clamp(160px,25dvh,230px);border:1px solid #dfc58e42;border-radius:12px;background:radial-gradient(ellipse at center,#d9ad6120,transparent 75%);overflow:hidden}
#gestureCanvas{display:block;width:100%;height:100%;touch-action:none;user-select:none;cursor:crosshair}
#gestureCanvas.drawing{cursor:none}
.gesture-hint{position:absolute;top:10px;left:0;right:0;pointer-events:none;color:#ddcaa2;font-size:12px}
.gesture-area #baton{position:absolute;right:12px;bottom:8px;top:auto;width:28px;height:28px;margin:0;font-size:20px;line-height:28px;transform:none;opacity:.25;transition:opacity .1s;pointer-events:none}
.gesture-area #baton.beat{transform:none;opacity:1;text-shadow:0 0 14px #ffe09b}
.hall{padding:12px 10px}.orchestra{font-size:22px;line-height:1.5}#audience{font-size:18px;line-height:1.4}#reaction{font-size:13px;min-height:3.6em;margin:8px 0 0}
#tap{min-height:60px;font-size:17px}#tap span{font-size:11px}#tapNote{margin:8px 0}#guidance{margin:10px 0}
@media(prefers-reduced-motion:reduce){.gesture-area #baton{transition:none}}
/* The orchestra surrounds the podium, seen from behind the front desks. */
.conducting main{max-width:1040px}.hall{padding:0;border-color:#977346}.gesture-area{height:auto;aspect-ratio:1000/640;border:0;border-radius:16px 16px 0 0;background:#17131a;isolation:isolate}#concertScene{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#gestureCanvas{position:absolute;inset:0;z-index:1}.gesture-hint{z-index:2;top:12px;left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:95%;padding:5px 14px;border-radius:20px;background:#111018bf;color:#f1dfb9;text-shadow:0 1px 3px #000}.gesture-area #baton{display:none}#reaction{min-height:2.8em;padding:10px 14px;margin:0;background:#15131bdd;border-top:1px solid #d3b07c33}#conductorFigure{transform-origin:500px 385px}.bow{transition:none}.concert-audience{transition:filter .4s,opacity .4s}#concertScene[data-mood=happy] .concert-audience{filter:brightness(1.5)}#concertScene[data-mood=confused] .concert-audience{opacity:.6}@media(min-width:800px){.conducting .meters{float:left;width:49%;margin-top:12px}.conducting #guidance{margin:12px 0 8px 52%;font-size:14px}.conducting #tap{margin-left:3%;width:48%;min-height:64px}.conducting #tapNote{clear:both;padding-top:8px}.conducting .volume{margin-top:16px}}@media(max-width:600px){.gesture-area{aspect-ratio:1.25}#concertScene{width:125%;max-width:none;left:-12.5%}.gesture-hint{font-size:10px;padding:4px 10px}#reaction{font-size:12px}}@media(prefers-reduced-motion:reduce){.bow,.concert-audience{transition:none}}
@media(min-width:800px){.conducting main{max-width:min(1040px,calc(156.25dvh - 453px))}}
/* Shared game typography and a velvet-curtain concert hall. */
@font-face{font-family:'RocknRoll One';font-weight:400;font-style:normal;font-display:swap;src:url('../fonts/rocknroll-one/RocknRollOne-Regular.ttf') format('truetype')}
body{min-height:100dvh;font-family:'M PLUS 2','Yu Gothic',sans-serif;background:radial-gradient(ellipse at 50% 0,#f2c77226,transparent 60%),radial-gradient(ellipse at 50% 90%,#79412a44,transparent 70%),#15111b;background-attachment:fixed}
h1,h2{font-family:'RocknRoll One','M PLUS 2',sans-serif;font-weight:400}body::before,body::after{content:'';position:fixed;top:0;bottom:0;width:24vw;z-index:-1;pointer-events:none;background:repeating-linear-gradient(92deg,#180d18 0%,#592537 10%,#311522 18%,#170d16 27%);box-shadow:inset -30px 0 65px #0c0914aa}body::before{left:0;transform:skewY(-3deg);transform-origin:top left}body::after{right:0;transform:scaleX(-1) skewY(-3deg);transform-origin:center}.catalog-shell{position:relative;isolation:isolate}.catalog-header{background:#130f19a8}.catalog-brand{padding:4px 0}
main{position:relative;margin-top:30px;padding:32px clamp(16px,4vw,44px) 28px;border:1px solid #b18a4e77;border-radius:24px;background:linear-gradient(150deg,#342435eb,#15131fef 65%);box-shadow:0 24px 80px #0008,inset 0 1px #ffe1a633}
main>.eyebrow{text-align:center;font-size:12px;letter-spacing:.3em}main>h1{text-align:center;font-size:clamp(26px,4vw,42px);margin:18px 0}main>.lead{text-align:center;font-size:clamp(16px,2.2vw,21px)}#intro{text-align:center;margin-top:32px}#intro h2{font-size:clamp(20px,2.8vw,26px);color:#ffe3a9}#intro>p:not(.concert-label){max-width:590px;margin:18px auto;font-size:14px;line-height:2.1;color:#e4d8cd}.concert-seal{display:grid;place-items:center;width:76px;height:76px;margin:0 auto 18px;border:1px solid #dfbd77;border-radius:50%;box-shadow:0 0 45px #ebbe5622,inset 0 0 22px #d7ad4b16;font-size:36px;color:#ffe1a6}.concert-label{font:11px Georgia,serif;letter-spacing:.25em;color:#d8b978}#intro .primary{padding:14px 40px;border-radius:40px;margin-top:12px;box-shadow:0 6px 25px #c393472e}.credits{margin-top:26px;font-size:11px;line-height:1.8;color:#b4a695}
.conducting main{margin-top:0;padding:16px 0 24px;border:0;border-radius:0;background:none;box-shadow:none}.conducting .catalog-shell{max-width:1200px}.conducting::before,.conducting::after{opacity:.45}
.curtain-call main>h1,.curtain-call main>.lead,.curtain-call main>.eyebrow{display:none}.curtain-call main{max-width:850px;margin-top:22px;background:radial-gradient(ellipse at 50% 35%,#8e63323b,transparent 65%),linear-gradient(135deg,#302031f5,#13121ef5)}
#results{text-align:center;margin:0;outline:none;padding:8px 0 18px;position:relative}#results>.eyebrow{font-size:12px;letter-spacing:.35em;color:#e8ca8d}#resultStatus{min-height:28px;font-size:14px;color:#eed8ad}.rating-ring{width:clamp(220px,34vw,300px);aspect-ratio:1;margin:24px auto;border-radius:50%;padding:8px;background:conic-gradient(from -90deg,#ffe6a6 var(--rating,0%),#65513c66 0);box-shadow:0 0 55px #d8aa4924,0 0 0 12px #d9ad6410;position:relative}.rating-inner{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse at 40% 25%,#49362f,#18131f 75%);border:1px solid #f1d49c55}.rating-label{font-size:16px;color:#ebd6ad;letter-spacing:.08em}#score{line-height:1.1;margin:12px 0;color:#fff0c8;text-shadow:0 2px 18px #edc56166}#scoreValue{font:400 clamp(66px,10vw,100px)/1.1 'RocknRoll One',sans-serif;font-variant-numeric:tabular-nums}#score small{display:block;font:13px/1.8 'M PLUS 2',sans-serif;color:#bda885}.rating-caption{font:8px Georgia,serif;letter-spacing:.15em;color:#c8ad77}.result-details{opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .5s,transform .5s}.revealed .result-details{opacity:1;visibility:visible;transform:none}#verdict{font-size:clamp(19px,2.6vw,26px);color:#ffe5ab;margin:26px auto 12px;max-width:640px}#review{font-size:14px;max-width:570px;margin:14px auto;line-height:1.9}#breakdown{font-size:12px;padding:14px;border-block:1px solid #d8af6550;color:#d0c0a8}#retry{border-radius:30px;padding:12px 30px}.judging .rating-ring{animation:ring-breathe 1s ease-in-out infinite alternate}.revealed .rating-ring{animation:rating-reveal .7s ease-out}.revealed .rating-ring::after{content:'✦';position:absolute;inset:-30px;color:#ffe0a1;font-size:28px;pointer-events:none;text-shadow:120px 60px #ffe0a1,-110px 100px #dcb57b,80px 260px #fff0c8,-100px 240px #dcb57b;animation:rating-sparkle 1.2s ease-out both}@keyframes ring-breathe{to{box-shadow:0 0 70px #f7c55d55,0 0 0 16px #d9ad6410}}@keyframes rating-reveal{0%{transform:scale(.96)}45%{transform:scale(1.06);filter:brightness(1.4)}100%{transform:scale(1)}}@keyframes rating-sparkle{0%{opacity:0;transform:scale(.6)}35%{opacity:1}100%{opacity:0;transform:scale(1.1)}}@media(max-width:600px){main{margin-top:18px;padding:24px 18px}body::before,body::after{width:15vw}.curtain-call main{margin-top:12px}.rating-ring{margin:22px auto}.rating-label{font-size:14px}#resultStatus{font-size:12px}#breakdown{line-height:1.9}}@media(prefers-reduced-motion:reduce){.judging .rating-ring,.revealed .rating-ring,.revealed .rating-ring::after{animation:none}.result-details{transition:none}}
.concert-actions{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:18px}.concert-actions button{border-radius:30px;padding:12px 24px}#intro .concert-actions .primary{margin-top:0}#historySaveStatus{font-size:12px;color:#d0c0a8;margin:16px 0}#historyDialog{color:#f0e9da;background:linear-gradient(135deg,#342435,#17131f);border:1px solid #c29d62;border-radius:20px;width:min(700px,calc(100vw - 24px));max-height:85dvh;padding:24px;font-family:'M PLUS 2','Yu Gothic',sans-serif;box-shadow:0 20px 80px #0009}#historyDialog::backdrop{background:#090710c9;backdrop-filter:blur(5px)}.history-heading{display:flex;align-items:center;gap:12px}.history-heading h2{flex:1;font-size:clamp(17px,3vw,23px);margin:0}#closeHistory{flex-shrink:0}#historySummary{padding:16px 0;border-block:1px solid #d8af6550;color:#ffe3a9;font-weight:700}#historyNotice{font-size:12px;color:#c9bca9}#historyList{padding:0;list-style:none}#historyList li{display:grid;grid-template-columns:1fr auto;gap:8px;padding:16px 0;border-bottom:1px solid #d8af6533}#historyList time{font-size:13px;color:#c9bca9}#historyList strong{color:#ffe3a9}#historyList p{grid-column:1/-1;font-size:12px;margin:0;color:#d0c0a8}@media(max-width:480px){#historyDialog{padding:18px}#historyList li{grid-template-columns:1fr}#historySummary{font-size:14px}}

.piece-picker{display:grid;gap:8px;margin:20px 0;color:var(--gold);font-size:14px}.piece-picker select{width:100%;max-width:100%;min-height:48px;padding:10px 12px;font:inherit;border:1px solid var(--line);border-radius:10px;background:#171720;color:#f4ebd8}.performed-piece{color:var(--gold);font-size:16px}

.expression-panel{margin:16px 0;padding:12px;border:1px solid var(--line);border-radius:10px}.expression-panel label{display:flex;justify-content:space-between;font-size:14px}.expression-panel progress{margin:8px 0 0}.expression-panel p,.expression-controls p{font-size:14px;line-height:1.7;color:var(--muted);margin:6px 0}.expression-controls{display:flex;align-items:center;gap:12px;margin-top:12px}.expression-controls button{flex:none;min-height:48px;padding:10px 14px}#strongTap[aria-pressed=true]{background:#efd19a;color:#241c12;border-color:#efd19a}.expressive .hall{border-color:#f5cc77;box-shadow:0 0 18px #e9b75335}.expressive #expressionFeedback{color:#ffe1a0}@media(max-width:480px){.expression-controls{align-items:flex-start;flex-wrap:wrap}.expression-controls p{margin:0}}