* { margin:0; padding:0; box-sizing:border-box; }
html,body { width:100%; height:100%; overflow:hidden; background:#1a1030;
  font-family:'Segoe UI', system-ui, sans-serif; color:#fff; }
#game-canvas { position:fixed; inset:0; display:block; }
#hud { position:fixed; top:0; left:0; right:0; padding:10px 14px; pointer-events:none; }
#scores { font-size:34px; font-weight:800; letter-spacing:2px; text-align:center; text-shadow:0 2px 8px #000; }
.team.you { color:#ff6a5e; } .team.ai { color:#2ee6c8; } .dash { color:#fff3d6; margin:0 10px; }
#serve-hint { text-align:center; color:#ffd08a; font-size:14px; margin-top:4px; text-shadow:0 1px 4px #000; }
#banner { position:fixed; top:26%; left:50%; transform:translateX(-50%); font-size:26px; font-weight:700;
  color:#fff3d6; text-shadow:0 2px 10px #000; opacity:0; transition:opacity .25s; white-space:nowrap; }
#banner.show { opacity:1; }
#menu-link { position:fixed; top:12px; left:14px; color:#ffd08a; text-decoration:none; font-size:14px; pointer-events:auto; opacity:.8; }
.overlay { position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(16,8,32,.72); backdrop-filter:blur(4px); z-index:10; }
.overlay.hidden { display:none; }
.panel { max-width:520px; width:calc(100% - 32px); text-align:center; background:rgba(35,26,70,.85);
  border:1px solid #5a4a8a; border-radius:16px; padding:28px 22px; box-shadow:0 10px 40px #000a; }
.panel h1 { font-size:44px; letter-spacing:4px; color:#ff6a5e; text-shadow:0 0 24px #ff6a5e88; }
.panel h2 { font-size:30px; color:#fff3d6; }
.panel .tag { color:#2ee6c8; margin:6px 0 14px; }
.how { list-style:none; text-align:left; font-size:14px; line-height:1.8; color:#e8e2f8; }
.how b { color:#ffd08a; }
button { pointer-events:auto; cursor:pointer; }
#start-btn, #restart-btn { margin-top:18px; font-size:20px; font-weight:800; letter-spacing:2px;
  color:#1a1030; background:linear-gradient(135deg,#ff6a5e,#ffd08a); border:none; border-radius:12px; padding:14px 42px; }
#start-btn:hover, #restart-btn:hover { filter:brightness(1.15); }
#touch { position:fixed; inset:auto 0 0 0; display:flex; justify-content:space-between; align-items:flex-end;
  padding:14px 18px 22px; z-index:9; }
#dpad { display:grid; grid-template-areas:". f ." "l c r" ". b ."; gap:6px; }
.tb { width:56px; height:56px; border-radius:14px; border:1px solid #5a4a8a; background:rgba(40,30,80,.55);
  color:#fff3d6; font-size:18px; font-weight:700; touch-action:none; user-select:none; -webkit-user-select:none; }
.tb.big { width:84px; height:64px; background:rgba(90,40,60,.55); }
#actions { display:flex; flex-direction:column; gap:10px; }
.tb:active { background:rgba(255,106,94,.6); }
@media (pointer:fine) { #touch { display:none; } }