:root{
 --bg:#0b0302;--cream:#f7ead0;--text:#f1e2c4;--muted:#b49a7c;--gold:#f3d99c;--gold-hi:#ffe9b8;--line:rgba(243,217,156,.28);--red:#d93422;
 --jp:"Yu Gothic","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;
 --mincho:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
 --num:Impact,"Arial Black",sans-serif;
 font-family:var(--jp);color:var(--text);background:var(--bg);
}
*{box-sizing:border-box}body{margin:0;overflow:hidden;background:var(--bg)}
button,a{-webkit-tap-highlight-color:transparent;color:inherit;font:inherit}button{border:0;cursor:pointer;background:none}a{text-decoration:none}[hidden]{display:none!important}
button:focus-visible,a:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
.app{height:100svh;display:flex;flex-direction:column;user-select:none;-webkit-user-select:none}

header{height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:#070201;border-bottom:1px solid rgba(243,217,156,.14);position:relative;z-index:20}
.brand{display:flex;align-items:center;gap:14px}.brand img{width:104px}.brand span{font:700 9px/1 sans-serif;letter-spacing:.28em;color:var(--gold);border-left:1px solid rgba(243,217,156,.3);padding-left:14px}
nav{display:flex;gap:2px;font-size:11px;color:#d8c4a4}nav button,nav a{min-height:34px;padding:0 10px;border-radius:6px;display:inline-flex;align-items:center}nav button:hover,nav a:hover{background:rgba(255,255,255,.07);color:#fff}
#sound[aria-pressed="true"]{color:var(--gold-hi)}

main{position:relative;flex:1;min-height:0;overflow:hidden;background:#0b0302 url(assets/backdrop.webp) center 30%/cover no-repeat}
main::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 38%,rgba(11,3,2,.15),rgba(11,3,2,.7) 75%),linear-gradient(rgba(11,3,2,.2),rgba(11,3,2,.45));pointer-events:none}
@media(max-aspect-ratio:1/1){main{background-image:url(assets/backdrop-v.webp);background-position:center 20%}}
main.shake{animation:shake .35s}
@keyframes shake{25%{transform:translate(-5px,2px)}50%{transform:translate(4px,-3px)}75%{transform:translate(-2px,1px)}}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:3;pointer-events:none}

/* カウンター（素材の木目） */
.counter{position:absolute;left:0;right:0;top:var(--counter-top,70%);bottom:0;z-index:2;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.55)),url(assets/wood-strip.webp) 0 0/520px 22px repeat;box-shadow:0 -1px 0 rgba(255,220,170,.25)}
.counter::before{content:'';position:absolute;left:0;right:0;top:0;height:30px;background:linear-gradient(rgba(255,200,140,.18),rgba(0,0,0,.25)),url(assets/wood-strip.webp) 0 0/900px 30px repeat-x;filter:brightness(1.25) saturate(1.1)}
.rail{position:absolute;left:0;right:0;top:30px;height:8px;background:linear-gradient(#e8452c,#8e1c12);box-shadow:0 3px 8px rgba(0,0,0,.6)}

/* 客（サイトのドット絵） */
.sprite{display:block;background-repeat:no-repeat;background-size:300% 200%;image-rendering:pixelated}
.customer{position:absolute;z-index:4;left:var(--cust-x,70%);top:calc(var(--counter-top,70%) - var(--cust-size,170px) + 12px);width:var(--cust-size,170px);transition:transform .45s cubic-bezier(.2,1.2,.4,1),opacity .35s;filter:drop-shadow(0 12px 10px rgba(0,0,0,.7))}
.customer .sprite{width:100%;aspect-ratio:1}
.customer.out{transform:translateX(60vw);opacity:0}.customer.enter{transform:translateX(40vw);opacity:0;transition:none}
.customer.bounce .sprite{animation:bounce .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes bounce{40%{transform:translateY(-16px)}}
.name{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);margin:0;font:700 10px var(--jp);color:var(--gold);background:rgba(11,3,2,.8);padding:3px 8px;border-radius:3px;white-space:nowrap;border:1px solid var(--line)}
.order,.say{position:absolute;z-index:6;left:calc(var(--cust-x,70%) + var(--cust-size,170px) / 2);top:calc(var(--counter-top,70%) - var(--cust-size,170px) - 6px);transform:translate(-50%,-100%);background:#f3e6c8 url(assets/washi.webp) center/cover;color:#1a0d06;border-radius:4px;box-shadow:0 0 0 2px #3a2414,0 0 0 3px rgba(243,217,156,.45),0 12px 26px rgba(0,0,0,.6);padding:9px 14px 11px;text-align:center;min-width:130px;max-width:min(240px,46vw);animation:pop .35s cubic-bezier(.2,1.6,.4,1)}
.order::after,.say::after{content:'';position:absolute;left:50%;bottom:-10px;margin-left:-8px;border:8px solid transparent;border-top-color:#3a2414;border-bottom:0}
.order small{display:block;font:700 10px var(--jp);color:#8e1c12;letter-spacing:.08em}
.order b{display:block;font:800 16px/1.35 var(--mincho);margin:2px 0 5px}
.order span{display:inline-block;font:400 18px/1 var(--num);color:#fff;background:#b3241a;padding:4px 10px 3px;border-radius:3px;letter-spacing:.06em}
.say{font:800 14px/1.45 var(--mincho)}
@keyframes pop{from{transform:translate(-50%,-100%) scale(.5);opacity:0}}

/* HUD */
.hud{position:absolute;z-index:8;top:12px;left:14px;right:14px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;pointer-events:none}
.hud>div{background:linear-gradient(rgba(40,14,7,.92),rgba(16,5,3,.88));border:1px solid var(--line);border-radius:8px;padding:8px 14px;box-shadow:0 10px 24px rgba(0,0,0,.5)}
.hud small{display:block;font:700 10px var(--jp);color:var(--gold);letter-spacing:.14em}
.hud b{font:400 38px/1 var(--num);color:var(--cream)}
.timer b.low{color:#ff5a3a;animation:pulse .5s infinite alternate}@keyframes pulse{to{transform:scale(1.1)}}
.score{text-align:right;min-width:120px}.score b{color:var(--gold-hi)}.score b.bump{animation:bump .45s cubic-bezier(.2,1.8,.4,1);display:inline-block}@keyframes bump{from{transform:scale(1.3)}}
.combo{display:flex;align-items:center;gap:8px;border-color:#e8452c!important;animation:pop2 .4s cubic-bezier(.2,1.6,.4,1)}.combo b{color:#ff8a4a}.combo small{line-height:1.25}
@keyframes pop2{from{transform:scale(.4)}}
.app:not([data-state="play"]) .hud{opacity:0}

/* 判定 */
.verdict{position:absolute;z-index:9;left:var(--glass-x,50%);top:calc(var(--counter-top,70%) - 200px);transform:translate(-50%,-50%);text-align:center;pointer-events:none;animation:verdict .55s cubic-bezier(.2,1.7,.35,1)}
.verdict img{display:none;width:min(280px,58vw);margin:0 auto -30px;filter:drop-shadow(0 12px 20px rgba(0,0,0,.6))}
.verdict.god img{display:block}
.verdict b{display:inline-block;font:900 34px/1 var(--mincho);color:#fff;padding:8px 18px 10px;background:linear-gradient(#e8452c,#9e1e14);border:2px solid var(--gold);border-radius:4px;box-shadow:0 10px 24px rgba(0,0,0,.55);transform:rotate(-4deg)}
.verdict.good b{background:linear-gradient(#e6a93a,#a8661a)}.verdict.meh b{background:linear-gradient(#6b5a4a,#3a2c20)}.verdict.bad b{background:linear-gradient(#3a3a48,#1c1c26)}
.verdict span{display:block;margin-top:10px;font:400 30px var(--num);color:var(--gold-hi);text-shadow:0 0 16px rgba(255,200,120,.8),0 3px 0 #000}
@keyframes verdict{from{transform:translate(-50%,-50%) scale(2.2) rotate(-8deg);opacity:0}}

/* 操作 */
.controls{position:absolute;z-index:10;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr auto 1fr;gap:10px;padding:0 14px 14px;align-items:end}
.controls button{touch-action:none;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;transition:transform .06s,box-shadow .06s,filter .15s}
.tap{height:88px;border:2px solid var(--gold)}
.tap b{font:900 26px/1 var(--mincho);letter-spacing:.1em}.tap small{font-size:10px;opacity:.85;letter-spacing:.06em}
.beer{color:#3a1a02;background:linear-gradient(#ffd166,#f2a01a 55%,#c9740a);box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 7px 0 #6a3a04,0 16px 30px rgba(242,160,26,.3)}
.foam{color:#3a2a1a;background:linear-gradient(#fffdf6,#efe3c8 60%,#d8c7a2);box-shadow:inset 0 2px 0 #fff,0 7px 0 #7a6a4a,0 16px 30px rgba(255,240,200,.2)}
.tap.on{transform:translateY(6px);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 1px 0 #3a2a1a;filter:brightness(1.08)}
.serve{height:70px;min-width:120px;padding:0 18px;color:#fff;background:linear-gradient(#f0553a,#d93422 50%,#a8231a);border:2px solid var(--gold);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 0 #5e140c,0 14px 26px rgba(217,52,34,.35)}
.serve b{font:900 20px/1 var(--mincho);letter-spacing:.08em}.serve small{font-size:10px;opacity:.85}
.serve:active{transform:translateY(5px);box-shadow:0 1px 0 #5e140c}
.serve:disabled,.tap:disabled{filter:grayscale(.7) brightness(.6);cursor:default}

/* 表紙 */
.cover{position:absolute;inset:0;z-index:12;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;background:radial-gradient(ellipse at 50% 45%,rgba(11,3,2,.55),rgba(11,3,2,.92) 70%)}
.cover .logo{width:min(380px,74vw);filter:drop-shadow(0 12px 26px rgba(0,0,0,.7));animation:sway 4s ease-in-out infinite}
@keyframes sway{50%{transform:rotate(-1.2deg) translateY(-3px)}}
.cover h1{margin:6px 0 18px;font:900 clamp(84px,14vw,150px)/1 var(--mincho);color:#fff4dc;text-shadow:0 4px 0 #8e1c12,0 8px 0 #3a0a06,0 0 40px rgba(217,52,34,.6);letter-spacing:.02em}
.cover h1 small{display:block;margin-top:10px;font:900 clamp(15px,2.2vw,20px) var(--jp);letter-spacing:.3em;color:var(--gold);text-shadow:0 2px 0 #000}
.rules{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:9px;text-align:left}
.rules li{display:flex;align-items:center;gap:11px;font-size:14px;color:#ecdcbe}.rules b{color:var(--gold-hi)}
.rules i{flex-shrink:0;width:24px;height:24px;border-radius:4px;background:var(--red);display:grid;place-items:center;font:700 12px var(--mincho);font-style:normal;color:#fff}
.go{display:inline-flex;align-items:center;gap:18px;height:58px;padding:0 10px 0 30px;border-radius:8px;color:#fff;font:900 18px var(--mincho);letter-spacing:.14em;background:linear-gradient(#f0553a,#d93422 50%,#a8231a);border:2px solid var(--gold);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 0 #5e140c,0 16px 34px rgba(217,52,34,.4);transition:transform .15s,filter .15s}
.go i{width:38px;height:38px;border-radius:6px;display:grid;place-items:center;font-style:normal;background:rgba(0,0,0,.25);color:var(--gold-hi)}
.go:hover{transform:translateY(-1px);filter:brightness(1.06)}
.note{margin:16px 0 0;font-size:11px;color:#a8917a}
.hosts{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:space-between;padding:0 max(3vw,10px);pointer-events:none}
.hosts .sprite{width:min(190px,28vw);aspect-ratio:1;filter:drop-shadow(0 12px 10px #000)}
.honda{background-image:url(assets/honda.png);background-position:100% 100%}.toyokura{background-image:url(assets/toyokura.png);background-position:100% 100%}
.hosts .honda{animation:hop 1.6s ease-in-out infinite}.hosts .toyokura{animation:hop 1.6s .8s ease-in-out infinite}
@keyframes hop{50%{transform:translateY(-8px)}}

/* 結果 */
.result{position:absolute;inset:0;z-index:12;overflow:auto;display:flex;justify-content:center;padding:18px 14px;background:rgba(6,2,1,.72);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.board{width:min(460px,100%);margin:auto 0;padding:24px 24px 20px;color:#1a0d06;background:#f3e6c8 url(assets/washi.webp) center/cover;border:10px solid #4a2c18;box-shadow:inset 0 0 0 2px #b3241a,0 0 0 2px rgba(243,217,156,.35),0 30px 80px rgba(0,0,0,.7);animation:rise .6s cubic-bezier(.2,1.3,.4,1);text-align:center}
@keyframes rise{from{transform:translateY(30px);opacity:0}}
.r-head{margin:0;font:700 12px var(--mincho);letter-spacing:.4em;color:#8e1c12}
.board h2{margin:8px 0 2px;font:900 clamp(28px,7vw,38px)/1.2 var(--mincho)}
.r-copy{margin:0 0 14px;font-size:12px;color:#4a3a2a}
.board dl{display:grid;grid-template-columns:1.2fr 1fr 1fr;margin:0 0 14px;padding:10px 0;border-block:2px solid #1a0d06}
.board dt{font-size:10px;font-weight:700;color:#6b5a4a;letter-spacing:.08em}.board dd{margin:3px 0 0;font:400 30px var(--num)}.board dl div:first-child dd{color:#b3241a;font-size:36px}
.r-cta{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:4px 12px;align-items:center;text-align:left;padding:12px;background:#1a0806;color:var(--text);border:1px solid #6d2b20;margin-bottom:14px}
.r-cta .sprite{grid-row:span 2;width:84px;aspect-ratio:1;filter:drop-shadow(0 6px 5px #000)}
.r-cta p{margin:0;font-size:12.5px;line-height:1.6}.r-cta p b{color:var(--gold-hi);font:400 17px var(--num);letter-spacing:.04em}
.r-cta a{justify-self:start;font:800 12px var(--jp);color:#fff;background:var(--red);border:1px solid var(--gold);padding:7px 12px;border-radius:3px}
.r-buttons{display:flex;gap:10px}.r-buttons .go{flex:1;justify-content:space-between}
.ghost{display:inline-flex;align-items:center;height:58px;padding:0 16px;border-radius:8px;border:2px solid #4a2c18;color:#1a0d06;font:700 12px var(--jp)}

dialog{width:min(92vw,460px);border:1px solid var(--line);padding:26px 28px;border-radius:10px;color:var(--text);background:linear-gradient(#2a0f07,#140503);box-shadow:0 30px 100px rgba(0,0,0,.7)}
dialog::backdrop{background:rgba(6,2,1,.72)}#close{position:absolute;right:10px;top:8px;min-width:36px;min-height:36px;font-size:24px;color:var(--muted)}
dialog h3{font:700 18px var(--mincho);margin:0 0 10px;color:var(--cream)}dialog ol{font-size:13px;line-height:1.85;padding-left:20px;color:#e6d3b2}dialog b{color:var(--gold-hi)}
dialog .note{font-size:11px;line-height:1.7}dialog .note a{color:var(--gold-hi);text-decoration:underline}

@media(max-width:640px){
 header{padding:0 10px}.brand img{width:90px}.brand span{display:none}nav{font-size:10.5px}nav button,nav a{padding:0 7px}
 .hud{top:8px;left:8px;right:8px}.hud>div{padding:6px 10px}.hud b{font-size:30px}.score{min-width:92px}
 .controls{gap:7px;padding:0 8px 10px}.tap{height:76px}.tap b{font-size:22px}.tap small{font-size:9px}.serve{height:62px;min-width:88px;padding:0 10px}.serve b{font-size:17px}
 .order,.say{min-width:110px;padding:7px 10px 9px}.order b{font-size:14px}.say{font-size:12.5px}
 .verdict b{font-size:26px}.verdict span{font-size:24px}.verdict img{width:44vw;margin-bottom:-20px}
}
@media(max-aspect-ratio:9/10){
 .order{left:auto;right:10px;top:68px;transform:none;animation:none}.order::after{display:none}
 .say{left:auto;right:10px;top:68px;transform:none;animation:none}.say::after{display:none}
 .rules li{font-size:12.5px}.cover h1{margin-bottom:14px}
 .board{padding:20px 16px 16px;border-width:8px}.r-buttons{flex-direction:column}.ghost{justify-content:center}
}