:root{color:#fff9ec;background:#17120e;font-family:Hiragino Sans,Hiragino Kaku Gothic ProN,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;--gap: 8px;--pad-top: max(8px, env(safe-area-inset-top));--pad-right: max(10px, env(safe-area-inset-right));--pad-bottom: max(8px, env(safe-area-inset-bottom));--pad-left: max(10px, env(safe-area-inset-left))}*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:#17120e}body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}body:before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,#160e0994,#160e09f5),url(/assets/takoyaki-osaka-bg.jpg) center / cover no-repeat,#17120e}#app{position:fixed;inset:0}button{border:0;color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.shell{width:min(100%,760px);height:100%;margin:0 auto;padding:var(--pad-top) var(--pad-right) var(--pad-bottom) var(--pad-left);display:grid;grid-template-areas:"hud" "stage" "coach" "legend" "hint";grid-template-rows:auto minmax(0,1fr) auto auto auto;gap:var(--gap)}.hud,.coach,.legend{border:1px solid var(--line);background:var(--panel);box-shadow:0 18px 60px #00000047;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:8px}.hud{grid-area:hud;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand tools" "stats stats";gap:6px 8px;align-items:center;padding:8px}.brand{grid-area:brand;min-width:0}.kicker{display:block;color:#ffdca0;font-size:clamp(.6rem,2.4vw,.74rem);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}h1{margin:0;color:#fff7e3;font-size:clamp(1.15rem,5.6vw,2rem);line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tools{grid-area:tools;display:flex;gap:6px}.stats{grid-area:stats;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.stat{min-width:0;padding:5px 4px;border-radius:7px;background:#00000047;text-align:center}.stat span{display:block;color:#f7cf95;font-size:.64rem;font-weight:800}.stat strong{display:block;font-size:clamp(1rem,4.4vw,1.3rem);line-height:1.15;font-variant-numeric:tabular-nums}.icon-button{width:44px;height:44px;display:grid;place-items:center;border-radius:8px;background:linear-gradient(180deg,#f2c657,#cc5c2d);color:#23120c;font-size:1.2rem;font-weight:900;line-height:1;box-shadow:inset 0 1px #ffffff61,0 8px 20px #0000003d}.icon-button:active{transform:translateY(1px);filter:brightness(.94)}.icon-button.is-muted{background:linear-gradient(180deg,#504a42,#2d2925);color:#fff2d0}.stage{grid-area:stage;position:relative;min-height:0;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);touch-action:none}#gameCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}.toast{position:absolute;left:50%;bottom:8px;max-width:calc(100% - 20px);transform:translate(-50%);padding:7px 12px;border-radius:7px;background:#0e0a08c2;color:#fff7e8;font-size:clamp(.78rem,3.4vw,1rem);font-weight:900;text-align:center;pointer-events:none}.toast.is-hot{color:#2a1307;background:#ffd25d}.coach{grid-area:coach;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;padding:8px}.coach img{width:clamp(52px,15vw,78px);aspect-ratio:1;height:auto;object-fit:cover;display:block;border-radius:8px;background:#fff}.speech{min-width:0}.rank{width:fit-content;max-width:100%;margin-bottom:4px;padding:3px 9px;border-radius:999px;background:#ffd25d;color:#2b1608;font-size:.76rem;font-weight:900}.speech p{margin:0;color:#fff5dd;font-size:clamp(.84rem,3.5vw,1.04rem);font-weight:800;line-height:1.35}.legend{grid-area:legend;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:6px}.legend div{min-width:0;padding:5px 3px;border-radius:7px;background:#00000045;text-align:center}.legend b,.legend span{display:block;white-space:nowrap}.legend b{color:var(--gold);font-size:.82rem}.legend span{color:#fff3d6;font-size:clamp(.62rem,2.8vw,.8rem);font-weight:800}.hint{grid-area:hint;margin:0;color:#f7d9aa;font-size:clamp(.68rem,3vw,.84rem);font-weight:800;line-height:1.3;text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.6)}@media(max-height:700px){.hint{display:none}}@media(max-height:600px)and (orientation:portrait){.legend span{display:none}.legend b{font-size:.9rem}.coach{padding:6px}}@media(orientation:landscape)and (max-height:560px){.shell{grid-template-areas:"stage hud" "stage coach" "stage legend" "stage hint";grid-template-columns:minmax(0,1fr) clamp(180px,32%,260px);grid-template-rows:auto auto auto minmax(0,1fr);align-content:start}.stage{height:100%}h1{font-size:clamp(.95rem,3.2vh,1.3rem)}.kicker{display:none}.coach img{width:clamp(44px,9vh,62px)}.legend{grid-template-columns:repeat(2,minmax(0,1fr))}.legend span{display:block}.hint{display:none}}@media(prefers-reduced-motion:reduce){.icon-button:active{transform:none}}