:root{--brass:#d4a64a;--brass2:#b5893b;--copper:#7a4b1f;--glow:#7fe8ff;--wood:#1a0f0a}
*{box-sizing:border-box}
body{margin:0;color:#e9d7b0;font-family:'IM Fell English',serif;min-height:100vh;
background:radial-gradient(ellipse at 50% 30%,#3a2015 0%,#160b07 60%,#080403 100%);
background-color:#120a06;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.07;
background-image:radial-gradient(circle at 25% 25%,#d4a64a 2px,transparent 3px),radial-gradient(circle at 75% 75%,#d4a64a 2px,transparent 3px);background-size:40px 40px}
.vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.75));z-index:5}
.plaque{position:relative;margin:18px auto 8px;max-width:760px;text-align:center;padding:14px 24px;
background:linear-gradient(180deg,#e7c36d,#b5893b 50%,#8a6224);border-radius:10px;color:#2b1708;
box-shadow:inset 0 2px 3px #fff5,inset 0 -3px 6px #0006,0 8px 30px #000a;animation:drop .9s ease-out}
.plaque h1{font-family:'Cinzel Decorative',serif;font-weight:900;margin:0;font-size:clamp(22px,5vw,44px);letter-spacing:2px;text-shadow:0 1px 0 #f8e2a0}
.plaque .sub{margin:4px 0 0;font-style:italic;font-size:clamp(12px,2.4vw,16px)}
.corner{position:absolute;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3c4,#7a4b1f)}
.tl{top:8px;left:8px}.tr{top:8px;right:8px}.bl{bottom:8px;left:8px}.br{bottom:8px;right:8px}
main{display:flex;gap:16px;max-width:1200px;margin:0 auto;padding:0 12px;align-items:stretch}
.stage{position:relative;flex:1;min-width:0}
#canvas{width:100%;height:auto;display:block;touch-action:none;cursor:pointer}
#hint{text-align:center;font-style:italic;opacity:.7;font-size:14px;padding:4px}
#banner{position:absolute;top:10%;left:50%;transform:translateX(-50%) scale(.8);opacity:0;transition:.5s;
font-family:'Cinzel',serif;font-weight:700;color:#082028;background:var(--glow);padding:10px 20px;border-radius:6px;
box-shadow:0 0 40px var(--glow);text-align:center;pointer-events:none;z-index:4}
#banner.show{opacity:1;transform:translateX(-50%) scale(1)}
aside{width:260px;padding:16px;border-radius:12px;background:linear-gradient(160deg,#3b2414,#1f120a);
border:2px solid var(--brass2);box-shadow:inset 0 0 20px #000a,0 6px 20px #0008;animation:drop 1.2s ease-out}
aside h2{font-family:'Cinzel',serif;margin:0 0 12px;color:var(--brass);font-size:18px;text-align:center;letter-spacing:2px}
aside label{display:block;margin-bottom:14px;font-size:15px}
aside label span{float:right;color:var(--glow)}
input[type=range]{width:100%;accent-color:var(--brass)}
select{width:100%;margin-top:4px;background:#2a170c;color:#f0dcae;border:1px solid var(--brass2);padding:6px;font-family:inherit;border-radius:4px}
.toggle{cursor:pointer}.toggle small{opacity:.6}
.cyl{display:flex;gap:8px}
.cyl button{flex:1;font-family:'Cinzel',serif;font-size:12px;padding:10px 4px;border-radius:20px/50%;cursor:pointer;
background:linear-gradient(180deg,#6b3a1a,#3a1d0b);color:#f4d99a;border:2px solid var(--brass2);box-shadow:inset 0 2px 2px #fff3}
.cyl button.on{background:linear-gradient(180deg,#a5281a,#5a0f08);box-shadow:0 0 12px #f44}
.small{font-size:13px;opacity:.7;font-style:italic}
.gauges{max-width:900px;margin:10px auto;text-align:center;padding:0 12px}
#gauges{width:100%;height:auto;display:block}
#timeText{font-family:'Cinzel',serif;color:var(--brass);margin:4px}
#curator{position:fixed;bottom:20px;left:20px;max-width:300px;background:#f1e3c0;color:#2b1708;padding:12px 16px;
font-style:italic;border-radius:4px;box-shadow:0 6px 20px #000b;transform:translateY(150%);transition:.6s;z-index:6;border-left:6px solid var(--copper)}
#curator.show{transform:translateY(0)}
footer{text-align:center;padding:20px;font-size:14px;opacity:.8}
footer a{color:var(--glow)}
@keyframes drop{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:none}}
@media(max-width:800px){main{flex-direction:column}aside{width:100%}}