:root {
  color-scheme: dark;
  font-family: Inter, ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #070b18;
  color: #f4f7ff;
  --safe: #78ffd6;
  --danger: #ff657a;
  --ink: #0b1024;
}
* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #070b18; touch-action: none; }
body { overscroll-behavior: none; }
#game { width: 100%; height: 100%; display: block; background: radial-gradient(circle at 50% 20%, #111b3a 0, #070b18 58%, #040610 100%); }
.hud { position: fixed; z-index: 10; pointer-events: none; }
.top-hud { top: max(10px, env(safe-area-inset-top)); left: 12px; right: 12px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 10px; }
.brand-chip, .clock-card, .round-btn, .score-card, .round-chip, .control-panel { background: rgba(8, 13, 31, .74); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 8px 24px rgba(0,0,0,.20); }
.brand-chip { justify-self: start; border-radius: 15px; padding: 8px 11px; display: flex; flex-direction: column; gap: 1px; }
.brand-chip strong { font-size: 11px; letter-spacing: .14em; }
.brand-chip span { color: #9fa9c8; font-size: 9px; }
.clock-card { min-width: 95px; border-radius: 17px; padding: 7px 13px 8px; text-align: center; }
.clock-card span { display: block; color: #9fa9c8; font-size: 8px; letter-spacing: .16em; }
.clock-card strong { display: block; margin-top: 1px; font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; }
.round-btn { pointer-events: auto; justify-self: end; color: #f4f7ff; border-radius: 15px; padding: 10px 13px; font-weight: 750; cursor: pointer; }
.score-hud { top: max(72px, calc(env(safe-area-inset-top) + 72px)); left: 50%; transform: translateX(-50%); width: min(720px, calc(100% - 24px)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.score-card { border-radius: 14px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.ai-card { justify-content: flex-end; text-align: right; }
.score-card small { display: block; color: #aab4d2; font-size: 9px; letter-spacing: .08em; white-space: nowrap; }
.score-card strong { display: block; margin-top: 2px; font-size: 13px; }
.avatar-dot { width: 20px; height: 20px; border-radius: 7px; display: inline-block; border: 2px solid rgba(255,255,255,.8); transform: rotate(45deg); flex: 0 0 auto; }
.avatar-dot.you { background: linear-gradient(135deg,#67f2ff,#6f7aff); }
.avatar-dot.ai { background: linear-gradient(135deg,#ff6c88,#ffba61); }
.round-chip { border-radius: 999px; padding: 7px 10px; font-size: 9px; color: #c7cdeb; letter-spacing: .11em; white-space: nowrap; }
.control-panel { pointer-events: auto; right: 10px; top: max(126px, calc(env(safe-area-inset-top) + 126px)); bottom: auto; border-radius: 13px; padding: 7px 8px; display: flex; flex-direction: column; gap: 4px; min-width: 124px; max-width: 132px; background: rgba(8,13,31,.66); opacity: .92; }
.control-panel label { color: #aab4d2; font-size: 8px; letter-spacing: .09em; text-transform: uppercase; }
.control-panel select { width: 100%; background: #111833; color: #f4f7ff; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; padding: 5px; font-size: 10px; }
.control-panel span { display: none; }
.message { position: fixed; z-index: 15; top: 142px; left: 50%; transform: translate(-50%, -10px); opacity: 0; pointer-events: none; padding: 9px 14px; border-radius: 999px; background: rgba(7,11,24,.86); border: 1px solid rgba(255,255,255,.16); font-size: 11px; font-weight: 800; letter-spacing: .04em; transition: .22s ease; white-space: nowrap; }
.message.show { opacity: 1; transform: translate(-50%, 0); }
.joystick, .fixed-guide { position: fixed; z-index: 12; width: 112px; height: 112px; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); }
.joystick { display: none; border: 1px solid rgba(255,255,255,.28); background: rgba(15,22,49,.42); box-shadow: inset 0 0 20px rgba(100,125,255,.07); }
.joystick.active { display: block; }
.joystick-knob, .fixed-guide > div { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; transform: translate(-50%,-50%); border-radius: 50%; background: rgba(255,255,255,.18); border: 2px solid rgba(255,255,255,.55); box-shadow: 0 6px 16px rgba(0,0,0,.20); }
.fixed-guide { display: none; left: 82px; bottom: calc(max(20px, env(safe-area-inset-bottom)) + 38px); transform: translate(-50%, 0); border: 1px dashed rgba(255,255,255,.22); background: rgba(15,22,49,.2); }
.fixed-guide.show { display: block; }
.result-panel { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 24px; background: rgba(3,6,15,.68); backdrop-filter: blur(8px); }
.result-panel.hidden { display: none; }
.result-card { width: min(410px, 100%); padding: 28px; border-radius: 28px; text-align: center; background: linear-gradient(180deg, rgba(25,34,73,.96), rgba(9,14,34,.98)); border: 1px solid rgba(255,255,255,.15); box-shadow: 0 24px 60px rgba(0,0,0,.42); }
.result-card span { color: #9ba8cc; letter-spacing: .18em; font-size: 10px; }
.result-card h1 { margin: 10px 0 6px; font-size: 42px; }
.result-card p { margin: 0 0 18px; color: #b8c1dd; font-size: 13px; line-height: 1.55; }
.result-card button { border: 0; border-radius: 14px; padding: 12px 18px; font-weight: 850; color: #091226; background: linear-gradient(135deg,#79ffe1,#7aa2ff); cursor: pointer; }
@media (max-width: 640px) {
  .brand-chip span { display: none; }
  .brand-chip { padding: 8px 9px; }
  .clock-card { min-width: 84px; }
  .clock-card strong { font-size: 22px; }
  .round-btn { font-size: 10px; padding: 9px 10px; }
  .score-hud { top: max(66px, calc(env(safe-area-inset-top) + 66px)); }
  .control-panel { min-width: 116px; max-width: 120px; right: 8px; top: max(118px, calc(env(safe-area-inset-top) + 118px)); padding: 6px 7px; }
  .control-panel select { font-size: 9px; padding: 4px; }
  .message { top: 126px; }
}