:root{--wood:#6b4423;--wood2:#8a5a33;--green:#2f5a2a;--brass:#c9a24a;--cream:#f3e6c4;--ink:#2a1a0c}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;font-family:'Courier Prime',monospace;color:var(--cream);
background:radial-gradient(ellipse at 50% 30%,rgba(255,200,120,.25),transparent 60%),
repeating-linear-gradient(90deg,#4a2d16 0 90px,#3f2612 90px 92px,#53331a 92px 180px);}
header{text-align:center;padding:14px 8px 4px}
h1{font-family:'Rye',serif;font-size:clamp(2.4rem,8vw,4.5rem);margin:0;color:var(--brass);text-shadow:3px 3px 0 var(--ink),0 0 20px rgba(201,162,74,.4);letter-spacing:3px}
.sub{margin:0;font-style:italic;opacity:.85}
main{flex:1;display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:center;padding:10px}
#stage{width:min(640px,96vw);aspect-ratio:4/3}
canvas{width:100%;height:100%;display:block;touch-action:none;cursor:pointer}
#controls{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:center;max-width:520px;
background:rgba(30,18,8,.6);border:3px solid var(--brass);border-radius:18px;padding:16px}
.col{display:flex;flex-direction:column;gap:10px;flex:1;min-width:230px}
.big{width:130px;height:130px;border-radius:50%;border:none;font-family:'Rye',serif;font-size:1.1rem;color:#fff;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none}
.red{background:radial-gradient(circle at 35% 30%,#ff6b5b,#b3221a 70%);box-shadow:0 8px 0 #6d1410,0 12px 20px rgba(0,0,0,.5);transition:transform .08s}
.red:active,.red.on{transform:translateY(6px);box-shadow:0 2px 0 #6d1410}
.red.on{background:radial-gradient(circle at 35% 30%,#ffd35b,#d97a12 70%)}
input[type=range]{width:100%;accent-color:var(--brass)}
.presets{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.chip{font-family:'Courier Prime',monospace;font-weight:700;padding:8px;border-radius:10px;border:2px solid var(--brass);background:var(--green);color:var(--cream);cursor:pointer;box-shadow:0 3px 0 #18301a}
.chip:active{transform:translateY(2px)}
.chip.sel{background:var(--brass);color:var(--ink)}
.chip:disabled{opacity:.4}
.row{display:flex;gap:6px}.row .chip{flex:1}
#splash{position:fixed;inset:0;background:rgba(20,10,4,.85);display:flex;align-items:center;justify-content:center;z-index:9}
.card{background:var(--wood);border:4px solid var(--brass);border-radius:20px;padding:24px;max-width:360px;text-align:center}
.card h2{font-family:'Rye',serif;color:var(--brass)}
.err{color:#ff9a8a}
footer{text-align:center;padding:10px;background:#2c1a0b;border-top:3px solid #1c1006;font-size:.85rem}
footer a{color:var(--brass)}