:root{--gold-1:#fff3c0;--gold-2:#ffd23f;--gold-3:#e0a010;--gold-4:#7a4e08;--chrome-hi:#fff7e6;--chrome:#f0d68a;--chrome-mid:#cf9a3a;--chrome-lo:#7a4e08;--chrome-edge:#3a2404;--grass-1:#7cc65a;--grass-2:#3f8a2c;--grass-edge:#1f5216;--earth-1:#a9702f;--earth-2:#6e3f16;--lcd-bg:#10240a;--lcd-txt:#b9ff7a;--btn-1:#ff8a3a;--btn-2:#e0500c;--btn-3:#9c2a0a;--btn-edge:#561004;font-synthesis:none}*{box-sizing:border-box}.gender-opt,.lvbtn,.pbtn,.sound-btn{touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none}body,html{margin:0;min-height:100%;color:#eafce0;font-family:"Arial Black","Helvetica Neue",Arial,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;background:radial-gradient(1200px 800px at 50% -12%,#a7e3ff 0,transparent 52%),radial-gradient(900px 600px at 14% 30%,#6fbf4a 0,transparent 60%),radial-gradient(1000px 800px at 86% 74%,#2f7a20 0,transparent 60%),linear-gradient(180deg,#2a5a1a 0,#0c1e08 100%);background-attachment:fixed}body{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 14px 26px;position:relative;z-index:1}.gender-bar{justify-self:end;z-index:3;position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;max-width:190px;padding:6px;border-radius:14px;background:linear-gradient(180deg,rgba(20,48,16,.7),rgba(10,26,8,.7));border:1px solid rgba(255,210,90,.3);box-shadow:0 4px 12px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08)}.age-badge{flex-basis:100%;text-align:center;font-family:Arial,system-ui,sans-serif;font-weight:900;font-size:12px;letter-spacing:2px;color:#2a3a04;padding:4px 12px;border-radius:10px;user-select:none;background:linear-gradient(180deg,#ffe487,#ffb01e);border:1px solid #a5590a;box-shadow:inset 0 1px 1px rgba(255,255,255,.6)}.gender-opt{cursor:pointer;font-family:Arial,system-ui,sans-serif;font-weight:900;font-size:14px;color:#d8f0c0;padding:6px 13px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,#24401a,#142a0e);display:inline-flex;align-items:center;gap:4px;white-space:nowrap;transition:.15s}.gender-opt .gsym{font-size:14px;opacity:.9}.gender-opt:hover{filter:brightness(1.12)}.gender-opt.male.selected{color:#fff;background:linear-gradient(180deg,#ff9a4a,#e0500c);border-color:#ffd23f;box-shadow:0 0 12px rgba(255,120,40,.7),inset 0 1px 1px rgba(255,255,255,.4)}.gender-opt.female.selected{color:#fff;background:linear-gradient(180deg,#ff6ab0,#c81884);border-color:#ffd23f;box-shadow:0 0 12px rgba(255,90,180,.7),inset 0 1px 1px rgba(255,255,255,.4)}.cheer-slot{position:relative;z-index:3;justify-self:start;display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px;border-radius:16px;background:radial-gradient(120% 130% at 30% 0,rgba(180,40,140,.35),rgba(12,26,8,.5));border:1px solid rgba(255,210,90,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}.cheer-slot[data-theme=male]{background:radial-gradient(120% 130% at 30% 0,rgba(200,40,40,.35),rgba(24,10,4,.5))}.cheer-avatar{width:74px;height:74px;border-radius:16px;overflow:hidden;flex:0 0 auto;background:#12200c;border:2px solid var(--gold-3);box-shadow:0 4px 12px rgba(0,0,0,.5),0 0 0 1px #5a3c06,0 0 14px rgba(255,150,40,.45)}.cheer-avatar svg{display:block;width:100%;height:100%}.cheer-name-pill{font-family:Arial,system-ui,sans-serif;font-weight:900;font-size:12px;letter-spacing:.5px;color:#eafce0;padding:3px 10px;border-radius:999px;white-space:nowrap;background:linear-gradient(180deg,rgba(30,60,16,.6),rgba(12,26,8,.6));border:1px solid var(--gold-3);box-shadow:inset 0 1px 0 rgba(255,255,255,.15);text-shadow:0 1px 2px rgba(0,0,0,.6)}.cheer-bubble{position:absolute;left:88px;top:0;z-index:6;max-width:200px;font-family:Arial,system-ui,sans-serif;font-weight:900;font-size:13px;color:#2a3a04;padding:6px 11px;border-radius:12px;background:linear-gradient(180deg,#fffef4,#eaffcf);border:1px solid #8bbf3a;box-shadow:0 4px 10px rgba(0,0,0,.4);pointer-events:none;opacity:0;transform:translateY(6px) scale(.9);transform-origin:0 100%;transition:opacity .18s,transform .18s cubic-bezier(.2,1.5,.4,1)}.cheer-bubble::after{content:"";position:absolute;left:-5px;bottom:12px;width:11px;height:11px;background:#fffef4;border-left:1px solid #8bbf3a;border-bottom:1px solid #8bbf3a;transform:rotate(45deg)}.cheer-bubble.show{opacity:1;transform:translateY(0) scale(1)}@keyframes cheerBounce{0%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}60%{transform:translateY(-2px)}}@keyframes cheerBig{0%,100%{transform:scale(1) rotate(0)}25%{transform:scale(1.14) rotate(-4deg)}50%{transform:scale(1.1) rotate(4deg)}75%{transform:scale(1.12) rotate(-3deg)}}.cheer-avatar.react-spin{animation:.5s cheerBounce}.cheer-avatar.react-win{animation:.6s 2 cheerBounce}.cheer-avatar.react-big{animation:.7s cheerBig}#fxCanvas{position:fixed;inset:0;z-index:0;pointer-events:none}#cabinet,#controldeck,#hint,#screen,#statrow,#topdeck,.disclaimer{position:relative;z-index:2}#cabinet{width:min(680px,100%);border-radius:26px;padding:14px;display:flex;flex-direction:column;gap:12px;position:relative;background:linear-gradient(150deg,var(--chrome-hi) 0,var(--chrome) 16%,var(--chrome-mid) 34%,var(--chrome-lo) 50%,var(--chrome-mid) 66%,var(--chrome) 84%,var(--chrome-hi) 100%);box-shadow:0 40px 90px rgba(0,0,0,.7),inset 0 2px 2px rgba(255,255,255,.75),inset 0 -3px 6px rgba(0,0,0,.5),0 0 0 3px var(--gold-3),0 0 0 7px #5a3c06,0 0 0 9px rgba(255,210,90,.25),0 0 46px rgba(120,220,90,.35);overflow:hidden}#cabinet::before{content:"";position:absolute;inset:12px;border-radius:18px;pointer-events:none;z-index:0;box-shadow:inset 0 0 0 2px rgba(255,225,140,.5);background:radial-gradient(circle at 14px 14px,#fff6cf 2px,#ffd23f 4px,transparent 6px),radial-gradient(circle at calc(100% - 14px) 14px,#fff6cf 2px,#ffd23f 4px,transparent 6px),radial-gradient(circle at 14px calc(100% - 14px),#fff6cf 2px,#ffd23f 4px,transparent 6px),radial-gradient(circle at calc(100% - 14px) calc(100% - 14px),#fff6cf 2px,#ffd23f 4px,transparent 6px)}#cabinet::after{content:"";position:absolute;top:0;left:-30%;width:30%;height:100%;z-index:1;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);animation:6s ease-in-out infinite shimmer}@keyframes shimmer{0%,100%{left:-30%}100%,55%{left:130%}}#topdeck{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:6px 48px 0 10px;position:relative}.marquee{position:relative;justify-self:center;padding:4px 10px 6px;display:flex;flex-direction:column;align-items:center}.marquee-mole{font-size:26px;line-height:1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));animation:2.2s ease-in-out infinite gemPulse}@keyframes gemPulse{50%{transform:scale(1.16) rotate(-8deg);filter:brightness(1.15) drop-shadow(0 2px 4px rgba(0,0,0,.5))}}.marquee-title{position:relative;z-index:2;font-size:34px;font-weight:900;letter-spacing:1px;line-height:1;background:linear-gradient(180deg,#fff3b0 0,#ffd23f 45%,#9be040 75%,#3f8a2c 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:2px #1f5216;filter:drop-shadow(0 0 14px rgba(150,220,60,.9)) drop-shadow(0 3px 2px rgba(0,0,0,.55));padding:0 6px}.marquee-sub{position:relative;z-index:2;margin-top:3px;font-size:13px;font-weight:900;letter-spacing:4px;color:var(--gold-1);text-shadow:0 0 10px rgba(150,220,60,.85),0 1px 0 #1f5216}.sound-btn{position:absolute;right:8px;top:4px;z-index:5;width:34px;height:34px;border-radius:50%;cursor:pointer;border:1px solid rgba(255,255,255,.4);background:rgba(16,36,10,.7);color:#fff;font-size:15px;display:grid;place-items:center}.sound-btn.muted{opacity:.5}#statrow{display:grid;grid-template-columns:1.2fr 1fr 1.2fr;gap:10px;z-index:2}.lcd{background:linear-gradient(180deg,var(--lcd-bg),#061403);border-radius:12px;padding:7px 14px;display:flex;flex-direction:column;gap:2px;border:2px solid var(--gold-3);box-shadow:inset 0 3px 10px rgba(0,0,0,.85),inset 0 0 0 2px rgba(255,210,90,.25),0 0 0 1px #5a3c06,0 2px 0 rgba(255,255,255,.3),0 0 16px rgba(120,220,60,.25)}.score-lcd{align-items:flex-start}.time-lcd{align-items:center}.best-lcd{align-items:flex-end}.lcd-label{color:#a9e58a;font-size:13px;letter-spacing:3px;text-shadow:0 1px 0 #000}.lcd-value{color:var(--lcd-txt);font-size:30px;letter-spacing:1px;font-variant-numeric:tabular-nums;text-shadow:0 0 14px rgba(150,255,90,.9),0 2px 2px #000}.time-lcd .lcd-value.low{color:#ff6a5a;text-shadow:0 0 14px rgba(255,90,60,.95),0 2px 2px #000;animation:.6s steps(2) infinite lowBlink}@keyframes lowBlink{50%{opacity:.45}}#screen{display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#1f5216,#0c1e08);border-radius:16px;padding:12px;border:3px solid var(--gold-3);box-shadow:inset 0 0 46px rgba(0,0,0,.6),inset 0 0 0 2px rgba(255,210,90,.35),0 0 0 1px #5a3c06,0 3px 0 rgba(255,255,255,.3),0 0 26px rgba(120,220,60,.4)}.field-area{position:relative;padding:8px;border-radius:14px;aspect-ratio:1/1;width:min(100%,560px);max-width:100%;background:linear-gradient(150deg,var(--gold-1),var(--gold-2) 25%,var(--gold-4) 55%,var(--gold-2) 82%,var(--gold-1));box-shadow:0 0 0 2px #5a3c06,inset 0 0 0 2px rgba(255,255,255,.55),0 0 22px rgba(150,220,60,.45)}.field-area::after{content:"";position:absolute;inset:2px;border-radius:12px;pointer-events:none;z-index:3;background:radial-gradient(circle at 9px 9px,#ffd23f 0,#c8860a 3px,transparent 6px),radial-gradient(circle at calc(100% - 9px) 9px,#ffd23f 0,#c8860a 3px,transparent 6px),radial-gradient(circle at 9px calc(100% - 9px),#ffd23f 0,#c8860a 3px,transparent 6px),radial-gradient(circle at calc(100% - 9px) calc(100% - 9px),#ffd23f 0,#c8860a 3px,transparent 6px)}#fieldCanvas{touch-action:none;display:block;width:100%;height:100%;border-radius:8px;cursor:crosshair;box-shadow:0 0 0 2px #1f2a04,inset 0 0 30px rgba(0,0,0,.4)}#fieldCanvas.shake{animation:.3s fieldShake}@keyframes fieldShake{0%,100%{transform:translate(0,0)}20%{transform:translate(-6px,3px)}40%{transform:translate(5px,-4px)}60%{transform:translate(-4px,-2px)}80%{transform:translate(3px,3px)}}.combo-badge{position:absolute;top:12px;right:14px;z-index:5;display:none;flex-direction:column;align-items:center;line-height:1;padding:6px 12px;border-radius:12px;background:linear-gradient(180deg,#ff8a3a,#e0500c);border:2px solid var(--gold-2);box-shadow:0 3px 10px rgba(0,0,0,.5),0 0 14px rgba(255,150,40,.7);pointer-events:none}.combo-badge.show{display:inline-flex}.combo-badge span{font-size:26px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 2px 2px rgba(0,0,0,.5)}.combo-badge small{font-size:9px;letter-spacing:2px;color:#ffe9c0}.combo-badge.pulse{animation:.3s comboPulse}@keyframes comboPulse{0%,100%{transform:scale(1)}45%{transform:scale(1.28) rotate(-4deg)}}.message{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%) scale(0);font-size:clamp(24px, 5.5vw, 46px);font-weight:900;letter-spacing:1px;white-space:nowrap;color:var(--gold-2);z-index:6;pointer-events:none;-webkit-text-stroke:1.5px #1f5216;text-shadow:0 0 20px rgba(150,220,60,.9),0 3px 0 #1f5216,0 4px 8px rgba(0,0,0,.6);transition:transform .3s cubic-bezier(.2,1.5,.4,1)}.message.show{transform:translate(-50%,-50%) scale(1);animation:.5s msgPop}@keyframes msgPop{0%{transform:translate(-50%,-50%) scale(0)}60%{transform:translate(-50%,-50%) scale(1.15)}100%{transform:translate(-50%,-50%) scale(1)}}.game-overlay{position:absolute;inset:0;z-index:8;display:none;align-items:center;justify-content:center;border-radius:8px;background:radial-gradient(circle at 50% 40%,rgba(12,40,8,.82),rgba(4,12,2,.94));backdrop-filter:blur(2px)}.game-overlay.show{display:flex;animation:.25s overlayIn}@keyframes overlayIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.overlay-panel{text-align:center;padding:10px 16px;max-width:96%}.overlay-title{font-size:clamp(24px, 5vw, 40px);font-weight:900;letter-spacing:2px;background:linear-gradient(180deg,#fff3b0,#ffd23f 55%,#9be040);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:1px #1f5216;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}.overlay-sub{margin-top:6px;font-size:13px;color:#d8f0c0;font-family:Arial,sans-serif;letter-spacing:1px}.overlay-score{margin-top:12px;font-size:15px;color:#d8f0c0;font-family:Arial,sans-serif;letter-spacing:2px}.overlay-score b{color:var(--gold-2);font-size:34px;text-shadow:0 0 14px rgba(255,190,60,.85);display:block;margin-top:2px}.overlay-hint{margin-top:12px;font-size:12px;color:#a9e58a;font-family:Arial,sans-serif;letter-spacing:1px}.big-start{margin-top:16px}#controldeck{display:flex;flex-direction:column;align-items:stretch;gap:10px;background:linear-gradient(180deg,#1f3a12 0,#0a1806 100%);border-radius:16px;padding:10px 16px;border:2px solid #08130a;box-shadow:inset 0 2px 4px rgba(255,255,255,.12),inset 0 -4px 8px rgba(0,0,0,.5),0 3px 0 rgba(255,255,255,.3)}.ctrl-row{display:flex;align-items:center;justify-content:center;gap:12px}.ctrl-group{display:flex;flex-direction:row;align-items:center;gap:10px}.ctrl-label{font-size:15px;font-weight:900;font-style:italic;letter-spacing:1px;color:#d8f0c0;text-shadow:0 1px 0 #000,0 2px 3px rgba(0,0,0,.5)}.level-seg{display:inline-flex;gap:0;border-radius:12px;overflow:hidden;border:2px solid var(--gold-3);box-shadow:inset 0 2px 6px rgba(0,0,0,.6),0 0 8px rgba(120,220,60,.25)}.lvbtn{cursor:pointer;border:none;font-family:Arial,system-ui,sans-serif;font-weight:900;font-size:14px;color:#cfe8b8;padding:9px 16px;background:linear-gradient(180deg,#24401a,#142a0e);border-right:1px solid rgba(0,0,0,.4);transition:.12s}.lvbtn:last-child{border-right:none}.lvbtn:hover{filter:brightness(1.12)}.lvbtn.selected{color:#2a3a04;background:linear-gradient(180deg,#ffd873,#e0a010 60%,#a5720a);text-shadow:0 1px 0 rgba(255,255,255,.4);box-shadow:inset 0 0 10px rgba(255,190,60,.5)}.main-btns{display:flex;align-items:center;justify-content:center;gap:14px}.pbtn{cursor:pointer;border:none;color:#fff;font-weight:900;font-family:Arial,system-ui,sans-serif;border-radius:12px;padding:0 22px;height:52px;font-size:18px;letter-spacing:1px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,var(--btn-1) 0,var(--btn-2) 48%,var(--btn-3) 100%);box-shadow:inset 0 2px 2px rgba(255,255,255,.55),inset 0 -3px 6px rgba(0,0,0,.45),0 0 0 2px var(--gold-3),0 4px 0 var(--btn-edge),0 6px 12px rgba(0,0,0,.55);transition:transform .06s,filter .15s}.pbtn:hover:not(:disabled){filter:brightness(1.1)}.pbtn:active:not(:disabled){transform:translateY(3px);box-shadow:inset 0 2px 2px rgba(255,255,255,.5),0 0 0 2px var(--gold-3),0 1px 0 var(--btn-edge)}.pbtn:disabled{opacity:.45;cursor:not-allowed}.pbtn.start{border-radius:50%;width:96px;height:60px;padding:0;position:relative;font-size:19px;background:radial-gradient(circle at 40% 30%,#b6ff7a,#4fae2c 45%,#1f6a12 100%);box-shadow:inset 0 3px 3px rgba(255,255,255,.6),inset 0 -4px 8px rgba(0,0,0,.5),0 0 0 3px var(--gold-2),0 0 0 5px #7a4e08,0 4px 0 #0f4a08,0 0 22px rgba(120,220,60,.7);animation:1.8s ease-in-out infinite startGlow}@keyframes startGlow{50%{box-shadow:inset 0 3px 3px rgba(255,255,255,.6),inset 0 -4px 8px rgba(0,0,0,.5),0 0 0 3px var(--gold-1),0 0 0 5px #7a4e08,0 4px 0 #0f4a08,0 0 34px rgba(150,255,90,.95)}}.big-start.start{animation:1.6s ease-in-out infinite startGlow}.pbtn.pause.active{background:linear-gradient(180deg,#ffcf5a,#e0900c 55%,#a5620a);color:#2a3a04;box-shadow:inset 0 2px 2px rgba(255,255,255,.5),0 0 0 2px #7a4e08,0 4px 0 #5a3c06,0 6px 10px rgba(0,0,0,.5)}.disclaimer{text-align:center;color:#7aa85a;font-size:10px;margin:2px 0 0;font-family:Arial,system-ui,sans-serif;letter-spacing:.5px}#hint{color:#8aa87a;font-size:12px;letter-spacing:.3px;text-align:center;font-family:Arial,system-ui,sans-serif}@media (prefers-reduced-motion:reduce){#cabinet::after,.cheer-avatar.react-big,.cheer-avatar.react-spin,.cheer-avatar.react-win,.marquee-mole,.pbtn.start,.time-lcd .lcd-value.low{animation:none!important}}@media (max-width:720px){body,html{height:100dvh;overflow:hidden}body{padding:0;min-height:0;justify-content:flex-start;gap:0}#cabinet{border-radius:0;padding:6px;gap:5px;height:100dvh;min-height:0;overflow:hidden}#topdeck{grid-template-columns:auto 1fr auto;gap:6px;padding:2px 40px 0 2px}#statrow{gap:6px}.lcd{padding:4px 8px}.lcd-label{font-size:10px;letter-spacing:2px}.lcd-value{font-size:20px}.marquee{padding:2px 4px}.marquee-title{font-size:20px;letter-spacing:1px}.marquee-sub{font-size:9px;letter-spacing:1px}.marquee-mole{font-size:16px}#screen{padding:5px;align-items:stretch;flex:7 1 0;min-height:0}.field-area{flex:1 1 auto;width:100%;height:auto;max-width:none;aspect-ratio:auto;margin:0;min-height:0}.combo-badge{top:8px;right:8px;padding:4px 9px}.combo-badge span{font-size:20px}.disclaimer{font-size:9px;margin:0}#controldeck{gap:7px;padding:7px 8px calc(7px + env(safe-area-inset-bottom));flex:1 1 auto;justify-content:space-evenly}.ctrl-label{font-size:12px}.lvbtn{font-size:12px;padding:7px 12px}.main-btns{gap:12px}.pbtn{height:46px;padding:0 16px;font-size:15px;border-radius:10px}.pbtn.start{width:80px;height:50px;font-size:16px}#hint{display:none}.cheer-slot{padding:4px;gap:3px}.cheer-avatar{width:50px;height:50px;border-radius:12px}.cheer-name-pill{font-size:10px;padding:2px 7px}.cheer-bubble{left:56px;top:-2px;font-size:11px;max-width:140px;padding:5px 8px}.gender-bar{max-width:136px;gap:4px;padding:4px}.age-badge{font-size:10px;padding:3px 8px}.gender-opt{font-size:12px;padding:5px 9px;gap:3px}.gender-opt .gsym{font-size:12px}}