* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #2b1b4d;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; color: #f7f3e2; }
#gl { position: fixed; inset: 0; display: block; }

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#topbar { display: flex; justify-content: center; gap: 14px; align-items: center; padding-top: 10px; }
.team { display: flex; align-items: center; gap: 8px; background: rgba(20,12,45,.72);
  border: 2px solid rgba(255,255,255,.15); border-radius: 14px; padding: 6px 16px;
  font-size: 26px; font-weight: 800; min-width: 74px; justify-content: center; }
.dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.dot-home { background: #ff7a45; } .dot-away { background: #7d6bff; }
#clock { background: rgba(255,207,92,.92); color: #2b1b4d; border-radius: 14px;
  padding: 4px 18px; display: flex; flex-direction: column; align-items: center; line-height: 1; }
#time { font-size: 26px; font-weight: 900; }
#clock small { font-size: 10px; letter-spacing: 2px; }
#time.low { color: #c92a48; animation: blink 0.6s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.35; } }
#pts { position: fixed; top: 74px; left: 50%; transform: translateX(-50%);
  background: rgba(20,12,45,.6); border-radius: 10px; padding: 3px 12px; font-size: 13px; letter-spacing: 1px; }
#pts b { color: #ffcf5c; font-size: 16px; }

.msg { position: fixed; top: 34%; left: 50%; transform: translate(-50%,-50%) scale(.6);
  font-size: clamp(34px, 8vw, 72px); font-weight: 900; letter-spacing: 2px;
  opacity: 0; transition: opacity .12s, transform .12s; text-shadow: 0 4px 24px rgba(0,0,0,.6); }
.msg.show { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.msg.goal { color: #ffcf5c; } .msg.bad { color: #ff5d7f; } .msg.kick { color: #41d4c0; font-size: clamp(26px,6vw,52px); }

#btn-pause { position: fixed; top: 12px; right: 12px; pointer-events: auto;
  background: rgba(20,12,45,.72); color: #f7f3e2; border: 2px solid rgba(255,255,255,.18);
  border-radius: 12px; font-size: 18px; width: 42px; height: 42px; cursor: pointer; }

#overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
  background: rgba(15,8,35,.62); z-index: 10; backdrop-filter: blur(3px); }
#overlay.show { display: flex; }
#ov-card { text-align: center; max-width: 520px; padding: 34px 30px; border-radius: 22px;
  background: linear-gradient(160deg, rgba(43,27,77,.95), rgba(24,14,48,.95));
  border: 2px solid rgba(255,207,92,.5); box-shadow: 0 20px 60px rgba(0,0,0,.5); margin: 12px; }
#ov-title { font-size: clamp(30px,7vw,48px); letter-spacing: 1px;
  background: linear-gradient(90deg, #ff7a45, #ffcf5c, #41d4c0);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
#ov-sub { margin: 14px 0 20px; line-height: 1.7; color: #cfc6ee; font-size: 15px; }
#ov-sub b { color: #ffcf5c; }
#ov-btn { pointer-events: auto; cursor: pointer; border: 0; border-radius: 14px;
  padding: 14px 44px; font-size: 20px; font-weight: 900; letter-spacing: 2px; color: #2b1b4d;
  background: linear-gradient(90deg, #ffcf5c, #ff9d5c); box-shadow: 0 8px 24px rgba(255,157,92,.35); }
#ov-btn:hover { transform: translateY(-2px); }
.hint { margin-top: 16px; font-size: 12px; color: #9a8fc7; }

#touch-ui { position: fixed; inset: 0; z-index: 8; pointer-events: none; }
#touch-ui.hidden { display: none; }
#joy { position: fixed; left: 22px; bottom: 26px; width: 128px; height: 128px;
  border-radius: 50%; background: rgba(20,12,45,.5); border: 2px solid rgba(255,255,255,.25);
  pointer-events: auto; touch-action: none; }
#joy-knob { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px;
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffcf5c, #ff7a45);
  pointer-events: none; }
.tbtns { position: fixed; right: 20px; bottom: 26px; display: flex; flex-direction: column; gap: 14px; }
.tbtns button { pointer-events: auto; touch-action: none; width: 92px; height: 64px; border-radius: 18px;
  border: 2px solid rgba(255,255,255,.25); font-weight: 900; font-size: 16px; letter-spacing: 1px;
  color: #2b1b4d; background: linear-gradient(160deg, #ffcf5c, #ff9d5c); cursor: pointer; }
#btn-boost { background: linear-gradient(160deg, #41d4c0, #2f9f92); }
#btn-boost.on { outline: 3px solid #41d4c0; }