:root{color:#fff9ec;background:#17120e;font-family:Hiragino Sans,Yu Gothic UI,Yu Gothic,Meiryo,system-ui,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--ink: #24150f;--panel: rgba(40, 24, 16, .82);--panel-strong: rgba(31, 18, 13, .94);--line: rgba(255, 238, 202, .18);--gold: #ffd25d;--red: #df4834;--green: #64c54a;--cream: #fff1ca}*{box-sizing:border-box}html,body,#app{min-height:100%;margin:0}body{min-height:100svh;overflow-x:hidden;background:linear-gradient(180deg,#160e098a,#160e09f5),url(/assets/takoyaki-osaka-bg.png) center / cover fixed,#17120e;touch-action:manipulation}button{border:0;color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}.shell{width:min(100%,760px);min-height:100svh;margin:0 auto;padding:max(12px,env(safe-area-inset-top)) 12px max(14px,env(safe-area-inset-bottom));display:grid;grid-template-rows:auto minmax(320px,1fr) auto auto auto;gap:10px}.hud,.coach,.legend,.controls{border:1px solid var(--line);background:var(--panel);box-shadow:0 18px 60px #00000047;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.hud{min-height:92px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(190px,1fr) 48px;gap:8px;align-items:center;padding:10px;border-radius:8px}.brand{min-width:0}.kicker{display:block;margin-bottom:2px;color:#ffdca0;font-size:clamp(.68rem,2.4vw,.78rem);font-weight:800}h1{margin:0;color:#fff7e3;font-size:clamp(1.3rem,7vw,2.4rem);line-height:.96}.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.stat{min-width:0;padding:8px 6px;border-radius:7px;background:#00000047;text-align:center}.stat span{display:block;color:#f7cf95;font-size:.68rem;font-weight:800}.stat strong{display:block;margin-top:1px;font-size:clamp(1rem,4vw,1.35rem);line-height:1}.icon-button,.controls button{min-height:44px;border-radius:7px;background:linear-gradient(180deg,#f2c657,#cc5c2d);color:#23120c;font-weight:900;box-shadow:inset 0 1px #ffffff61,0 8px 20px #0000003d}.icon-button.is-muted{background:linear-gradient(180deg,#504a42,#2d2925);color:#fff2d0}.stage{position:relative;min-height:min(74vw,530px);border-radius:8px;overflow:hidden;border:1px solid rgba(255,229,172,.2);background:radial-gradient(circle at 20% 8%,rgba(255,210,93,.2),transparent 28%),linear-gradient(160deg,#131110b8,#040404e6)}#gameCanvas{width:100%;height:100%;display:block;touch-action:none}.toast{position:absolute;left:50%;bottom:10px;max-width:calc(100% - 24px);transform:translate(-50%);padding:8px 12px;border-radius:7px;background:#0e0a08c2;color:#fff7e8;font-size:clamp(.82rem,3.5vw,1rem);font-weight:900;text-align:center;pointer-events:none}.toast.is-hot{color:#2a1307;background:#ffd25d}.coach{min-height:116px;display:grid;grid-template-columns:98px minmax(0,1fr);gap:10px;align-items:center;padding:10px;border-radius:8px}.coach picture{width:98px;aspect-ratio:1;overflow:hidden;border-radius:8px;background:#fff}.coach img{width:100%;height:100%;object-fit:cover;display:block}.speech{min-width:0}.rank{width:fit-content;max-width:100%;margin-bottom:6px;padding:5px 9px;border-radius:999px;background:#ffd25d;color:#2b1608;font-size:.82rem;font-weight:900}.speech p{margin:0;color:#fff5dd;font-size:clamp(.92rem,3.7vw,1.08rem);font-weight:800;line-height:1.4}.legend{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:8px;border-radius:8px}.legend div{min-width:0;padding:7px 4px;border-radius:7px;background:#00000045;text-align:center}.legend b,.legend span{display:block;white-space:nowrap}.legend b{color:var(--gold);font-size:.88rem}.legend span{margin-top:2px;color:#fff3d6;font-size:clamp(.68rem,2.9vw,.82rem);font-weight:800}.controls{display:grid;grid-template-columns:112px minmax(0,1fr);gap:10px;align-items:center;padding:8px;border-radius:8px}.controls p{margin:0;color:#f7d9aa;font-size:clamp(.72rem,3.1vw,.88rem);font-weight:800;line-height:1.35}@media(max-width:560px){.shell{padding-inline:8px;gap:8px}.hud{grid-template-columns:1fr 44px;grid-template-areas:"brand sound" "stats stats"}.brand{grid-area:brand}.stats{grid-area:stats}.icon-button{grid-area:sound}.stage{min-height:min(94vw,460px)}.coach{grid-template-columns:82px minmax(0,1fr)}.coach picture{width:82px}}@media(max-width:360px){.legend{grid-template-columns:repeat(2,minmax(0,1fr))}.controls{grid-template-columns:1fr}}
