:root {
  color-scheme: only light;
  font-family: "Arial Rounded MT Bold", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif;
  --brown:#5a260f; --deep:#321407; --cream:#fff5d6; --gold:#ffc51b; --orange:#f47a20; --red:#e84225;
}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none;touch-action:manipulation;background:#241006}button{font:inherit}
#game{position:relative;width:100%;height:100%;min-height:480px;overflow:hidden;isolation:isolate;color:var(--deep);user-select:none;background:#4fb6ee url("./assets/game-bbq-background.webp") center/cover no-repeat}
#game::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,rgba(0,113,202,.06),rgba(102,37,2,.08))}#game.is-title{background-image:url("./assets/title-bbq-background.webp")}#scene{position:absolute;inset:0;width:100%;height:100%;display:block}#game.is-title #scene{opacity:.08;filter:blur(2px)}
.hud{position:absolute;z-index:4;top:max(12px,env(safe-area-inset-top));left:12px;right:12px;display:grid;grid-template-columns:1fr minmax(100px,1.25fr) 1fr;gap:8px;align-items:start;pointer-events:none;transition:opacity .2s}.is-title .hud{opacity:0}
.score-card,.best-card{min-width:80px;padding:8px 11px;border:2px solid #8a542c;border-radius:20px 30px 18px 24px;background:linear-gradient(145deg,#9c5225,#5d2b15);color:#fff8dc;box-shadow:inset 0 2px 0 rgba(255,255,255,.25),0 5px 0 #3c190b,0 8px 14px rgba(40,11,0,.28);text-shadow:0 2px 0 #381507}.best-card{text-align:right;border-radius:30px 20px 24px 18px}.score-card span,.best-card span{display:block;color:#ffdf66;font:900 10px/1 Arial,sans-serif;letter-spacing:1.5px}.score-card strong,.best-card strong{display:block;margin-top:2px;font:900 clamp(23px,6.3vw,34px)/.95 Arial,sans-serif;letter-spacing:1px}
.play-title{align-self:center;text-align:center;color:#fff;text-shadow:0 2px 0 #5a260f,0 4px 8px rgba(0,0,0,.3);transform:rotate(-1deg)}.play-title small{display:block;color:#ffe67d;font-size:9px;letter-spacing:3px}.play-title b{display:block;font-size:clamp(11px,3vw,15px);line-height:1.05}
.judgement{position:absolute;z-index:6;left:50%;top:29%;translate:-50% -50%;white-space:nowrap;font:900 italic clamp(42px,14vw,74px)/1 Arial,sans-serif;color:#fff;-webkit-text-stroke:2px #67260b;text-shadow:0 5px 0 #a23b0e,0 9px 18px rgba(70,20,0,.34);opacity:0;transform:rotate(-6deg) scale(.3);pointer-events:none}.judgement.pop{animation:judgement .7s cubic-bezier(.18,.89,.32,1.28)}.judgement.good{color:#ffe044}.judgement.slip{color:#ff9d32}.judgement.miss{color:#eee;filter:grayscale(1)}@keyframes judgement{0%{opacity:0;transform:rotate(-9deg) scale(.2)}20%,70%{opacity:1;transform:rotate(-5deg) scale(1)}100%{opacity:0;transform:rotate(1deg) scale(1.35)}}
.start-panel,.result-panel{position:absolute;z-index:10;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:calc(5vh + env(safe-area-inset-top)) 22px calc(4vh + env(safe-area-inset-bottom));text-align:center}.start-panel::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,rgba(0,121,212,.02) 0 52%,rgba(76,26,2,.16))}.start-panel[hidden],.result-panel[hidden]{display:none}
.title-logo{position:relative;width:min(560px,100vw);margin:0;filter:drop-shadow(0 12px 5px rgba(66,19,1,.34))}.title-logo img{display:block;width:100%;height:auto;object-fit:contain}
.start-panel button,.result-panel button{position:relative;border:3px solid #7b320c;border-radius:28px;min-width:min(330px,82vw);padding:16px 30px;cursor:pointer;color:#5b2409;background:linear-gradient(#fff569 0 8%,#ffd82e 9% 62%,#f7a813 63% 100%);box-shadow:inset 0 4px 0 rgba(255,255,255,.85),inset 0 -3px rgba(221,117,8,.5),0 8px 0 #8c3c0c,0 13px 24px rgba(77,25,2,.36);text-shadow:0 2px 0 #fff6b7;transform:translateY(0)}.start-panel button b,.result-panel button{font-size:clamp(28px,8vw,40px);font-weight:1000}.start-panel #startButton{display:inline-flex;align-items:center;justify-content:center}
.play-icon{display:grid;place-items:center;flex:none;margin-right:13px;width:45px;height:45px;border:3px solid #6b2b0c;border-radius:50%;background:#fffaf0;color:#ee8121}.play-icon svg{width:28px;height:28px;fill:currentColor}
.start-panel #startButton b{line-height:1}.start-panel button:active,.result-panel button:active{transform:translateY(6px);box-shadow:inset 0 3px 0 rgba(255,255,255,.75),0 2px 0 #8c3c0c,0 5px 10px rgba(77,25,2,.3)}
.start-panel #startButton{margin-top:7vh}
.title-best{display:flex;align-items:center;gap:12px;margin:auto 0 0;padding:8px 22px;border:2px solid #8c592c;border-radius:22px;background:linear-gradient(#fffbea,#eddbac);box-shadow:0 5px 0 #754019,0 8px 14px rgba(60,17,0,.25);color:#71330f}.title-best span{font-size:12px;font-weight:900}.title-best b{font:900 25px/1 Arial,sans-serif}
.eyebrow{margin:0 0 10px;color:#ffe66c;text-shadow:0 2px #521b08;font:900 12px/1 Arial,sans-serif;letter-spacing:3px}.result-panel{justify-content:center;background:rgba(70,26,7,.62);backdrop-filter:blur(8px)}.result-panel h2{margin:0;color:#fff;font-size:clamp(50px,14vw,78px);line-height:1;-webkit-text-stroke:3px #67270d;paint-order:stroke fill;text-shadow:0 7px 0 #45200d;transform:rotate(-2deg)}.result-score{margin:28px 0 10px;color:white}.result-score span{display:block;font:900 12px Arial;letter-spacing:4px}.result-score b{display:block;font:900 68px/1 Arial;text-shadow:0 5px #451807}.new-best{margin:0 0 24px;color:#ffe152;font-size:24px;font-weight:900;text-shadow:0 3px #6a260c;animation:pulse .7s infinite}
.sound-toggle{position:absolute;z-index:12;right:14px;bottom:calc(15px + env(safe-area-inset-bottom));width:48px;height:48px;border:2px solid #754019;border-radius:50%;background:linear-gradient(#fffdf1,#eedaa9);box-shadow:0 4px 0 #683613;font-size:22px;color:#632a10;cursor:pointer}.sound-toggle.muted{opacity:.55;text-decoration:line-through}.tap-zone{position:absolute;z-index:2;inset:90px 0 0;cursor:ew-resize;touch-action:none}.is-title .tap-zone{pointer-events:none}.tap-zone span{position:absolute;bottom:calc(20px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);padding:8px 14px;border-radius:999px;background:rgba(81,32,8,.62);color:#fff;font-size:12px;font-weight:900;letter-spacing:2px;text-shadow:0 2px #361306;opacity:0}.tap-zone.ready span{animation:tapHint 1.4s infinite}@keyframes tapHint{0%,100%{opacity:.62;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.06)}}@keyframes pulse{50%{transform:scale(1.08)}}
.flash{position:absolute;z-index:7;inset:0;background:white;opacity:0;pointer-events:none}.flash.go{animation:flash .22s ease-out}@keyframes flash{0%{opacity:.8}100%{opacity:0}}.shake{animation:shake .3s linear}@keyframes shake{0%,100%{transform:translate(0)}25%{transform:translate(-6px,3px)}50%{transform:translate(5px,-2px)}75%{transform:translate(-3px,-1px)}}
.loading{position:absolute;z-index:20;inset:0;display:grid;place-content:center;text-align:center;background:#ed7130;color:#fff}.loading b{font-size:24px;text-shadow:0 3px #55200c}.loading span{width:180px;height:9px;margin-top:14px;border:2px solid #55200c;background:linear-gradient(90deg,#ffe443 50%,transparent 50%);background-size:22px 100%;animation:load .5s linear infinite}@keyframes load{to{background-position:22px 0}}.loading.done{display:none}.loading.error span{width:auto;height:auto;padding:0 24px;border:0;background:none;animation:none;font-size:14px}
@media(max-height:700px){.title-logo{width:min(470px,96vw)}.start-panel{padding-top:2vh}.start-panel #startButton{margin-top:4vh}}@media(min-width:680px){body{display:grid;place-items:center;background:#241006}#game{width:min(100vw,520px);height:min(100vh,920px);box-shadow:0 0 80px #000}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}}
.result-shot{display:block;height:min(32vh,320px);aspect-ratio:9/16;margin:16px 0 0;border:3px solid #ffe7a6;border-radius:14px;object-fit:cover;background:#4fb6ee;box-shadow:0 6px 0 #45200d,0 10px 22px rgba(30,8,0,.4);transform:rotate(1.5deg)}.result-shot[hidden]{display:none}
.result-panel .result-score{margin:14px 0 6px}.result-panel .new-best{margin:0 0 6px}
.result-best{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:6px 18px;border:2px solid #8c592c;border-radius:20px;background:linear-gradient(#fffbea,#eddbac);box-shadow:0 4px 0 #754019;color:#71330f;font-size:12px;font-weight:900}.result-best b{font:900 22px/1 Arial,sans-serif}.result-best small{font-size:12px;color:#a2551c}
.result-actions{display:flex;gap:10px;margin:0 0 18px}.result-panel .result-actions button{min-width:0;padding:9px 18px;border-width:2px;border-radius:18px;font-size:16px;font-weight:900;box-shadow:inset 0 3px 0 rgba(255,255,255,.85),0 5px 0 #8c3c0c,0 8px 14px rgba(77,25,2,.3)}