#hud{--ink: #fff6e8;--dim: #c8b8d8;--p1: #39c7ff;--p2: #ff8b5c;position:absolute;inset:0;z-index:10;pointer-events:none;font-family:Trebuchet MS,Segoe UI,system-ui,sans-serif;color:var(--ink);user-select:none;-webkit-user-select:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}#boot{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:60;background:#1b1436;color:#ffe6c4;font:700 clamp(18px,4vw,30px) "Trebuchet MS",system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;transition:opacity .32s ease}#boot.hidden{opacity:0;pointer-events:none}#game-canvas{display:block;width:100%;height:100%;touch-action:none}.hud-top{position:absolute;top:10px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:clamp(10px,2vw,26px);padding:8px clamp(12px,2.4vw,26px);background:#140e269e;border:1px solid rgba(255,235,200,.18);border-radius:14px;backdrop-filter:blur(8px);white-space:nowrap}.hud-team{display:flex;align-items:center;gap:8px;font-weight:700;letter-spacing:.1em}.hud-name{font-size:clamp(9px,1.4vw,12px);color:var(--dim);text-transform:uppercase}.hud-p1 .hud-score{color:var(--p1)}.hud-p2 .hud-score{color:var(--p2)}.hud-score{font-size:clamp(20px,3.6vw,30px);font-variant-numeric:tabular-nums;line-height:1}.hud-clock{text-align:center;min-width:74px}.hud-time{font-size:clamp(15px,2.4vw,21px);font-variant-numeric:tabular-nums;font-weight:700}.hud-mode{font-size:9px;letter-spacing:.16em;color:var(--dim);text-transform:uppercase}.hud-bars{position:absolute;top:62px;left:50%;transform:translate(-50%);display:flex;gap:26px;width:min(360px,70vw)}.hud-bar{flex:1;height:5px;border-radius:3px;background:#fff0dc29;overflow:hidden}.hud-bar.mirrored{transform:scaleX(-1)}.hud-bar>i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left center;background:linear-gradient(90deg,#39c7ff,#a0f0ff)}.hud-bar.mirrored>i{background:linear-gradient(90deg,#ff8b5c,#ffd6a0)}.hud-banner{position:absolute;top:32%;left:50%;transform:translate(-50%,-50%) scale(.86);font-size:clamp(26px,6vw,58px);font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:0;transition:opacity .18s ease,transform .18s ease;text-shadow:0 6px 24px rgba(0,0,0,.5)}.hud-banner.show{opacity:1;transform:translate(-50%,-50%) scale(1)}.hud-banner.p1{color:var(--p1)}.hud-banner.p2{color:var(--p2)}.hud-banner.dim{color:var(--dim);font-size:clamp(20px,4vw,34px)}.hud-help{position:absolute;bottom:10px;left:50%;transform:translate(-50%);font-size:11px;color:var(--dim);text-align:center;width:min(560px,92vw)}.hud-buttons{position:absolute;top:10px;left:10px;display:flex;gap:6px;pointer-events:auto}.hud-btn{width:34px;height:34px;border-radius:9px;border:1px solid rgba(255,235,200,.28);background:#140e2699;color:var(--ink);font-size:13px;font-weight:700;cursor:pointer;backdrop-filter:blur(6px)}.hud-btn.off{color:var(--dim)}.hud-btn:hover{filter:brightness(1.3)}.overlay{position:absolute;inset:0;z-index:40;display:none;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#28163cb8,#0c0816eb);pointer-events:auto;padding:16px}.overlay.visible{display:flex}.overlay-card{width:min(520px,94vw);text-align:center;padding:clamp(18px,4vw,32px);border-radius:20px;border:1px solid rgba(255,235,200,.2);background:#18102cdb;box-shadow:0 22px 60px #00000073}.overlay-kicker{font-size:10px;letter-spacing:.28em;color:#ffd9a0;text-transform:uppercase}.overlay-title{margin:8px 0 0;font-size:clamp(28px,6.4vw,46px);letter-spacing:.04em;line-height:1.02;background:linear-gradient(180deg,#fff6e8,#ffc98f);-webkit-background-clip:text;background-clip:text;color:transparent}.overlay-sub{margin:6px 0 0;font-size:clamp(12px,2.2vw,14px);color:var(--dim)}.overlay-body{margin:14px 0 6px;font-size:clamp(12px,2.3vw,14px);line-height:1.62;color:#efe4d6}.overlay-body p{margin:0 0 8px}.overlay-btn{margin-top:12px;min-height:48px;padding:0 30px;border:0;border-radius:12px;background:linear-gradient(180deg,#ffd27a,#ff9f5c);color:#2a1408;font:800 15px Trebuchet MS,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;box-shadow:0 8px 22px #ff96504d}.overlay-btn:hover{filter:brightness(1.08)}.overlay-foot{margin-top:12px;font-size:10px;letter-spacing:.1em;color:var(--dim);text-transform:uppercase}#touch{position:absolute;inset:0;z-index:20;display:none;pointer-events:none}#touch.visible{display:block}.touch-btn{position:absolute;border:1px solid rgba(255,240,220,.3);background:#18102c85;color:#fff6e8;font:700 12px system-ui,sans-serif;border-radius:50%;width:62px;height:62px;pointer-events:auto;backdrop-filter:blur(6px);touch-action:none;user-select:none}.touch-btn.down{background:#ffc88c80}.touch-btn.p1-left{left:14px;bottom:74px}.touch-btn.p1-right{left:88px;bottom:74px}.touch-btn.p1-kick{left:92px;bottom:140px;border-color:#5ac8ff99;color:#bdeeff}.touch-btn.p2-left{right:88px;bottom:74px}.touch-btn.p2-right{right:14px;bottom:74px}.touch-btn.p2-kick{right:92px;bottom:140px;border-color:#ff966499;color:#ffd2b8}@media(max-width:620px){.hud-help{display:none}.hud-bars{top:56px;width:min(280px,84vw)}.touch-btn{width:56px;height:56px}.touch-btn.p1-kick,.touch-btn.p2-kick{bottom:128px}}@media(max-height:520px){.overlay-title{font-size:clamp(22px,5vw,32px)}.overlay-body{font-size:12px;line-height:1.5}.touch-btn{width:52px;height:52px}.touch-btn.p1-kick,.touch-btn.p2-kick{bottom:116px}}