* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: #0b1024;
  font-family: ui-sans-serif, system-ui, "Segoe UI", sans-serif; color: #e8ecff; }
#game-canvas { position: fixed; inset: 0; width: 100%; height: 100%; touch-action: none; display: block; }
#flash { position: fixed; inset: 0; background: #d7ffe6; opacity: 0; pointer-events: none; z-index: 5; }
#hud { position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: center;
  gap: 14px; padding: 10px 14px; z-index: 10; pointer-events: none;
  background: linear-gradient(#0b1024cc, transparent); }
.hud-title { font-weight: 800; letter-spacing: 3px; color: #ffd985; font-size: 14px; }
.hud-stats { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; }
.hud-stats b { color: #7fe8ff; font-variant-numeric: tabular-nums; }
.hud-stats b.low { color: #ff7b9a; }
#touch-controls { position: fixed; bottom: 14px; right: 14px; display: flex; gap: 10px; z-index: 10; }
#touch-controls button { width: 54px; height: 54px; border-radius: 14px; font-size: 24px;
  border: 1px solid #4a5a8f; background: #1c2544cc; color: #ffe28a; touch-action: manipulation; }
#touch-controls button:active { background: #2c3a6a; }
#hint-bar { position: fixed; bottom: 12px; left: 14px; font-size: 11px; color: #8ea0cf; z-index: 10;
  max-width: 62%; background: #0b102499; padding: 6px 8px; border-radius: 8px; pointer-events: none; }
.overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
  background: #070b1ae0; z-index: 20; }
.overlay.show { display: flex; }
.panel { text-align: center; max-width: 480px; padding: 30px 26px; border: 1px solid #3a4a7a;
  border-radius: 18px; background: #101830f2; box-shadow: 0 20px 60px #0008; }
.panel h1 { font-size: 34px; letter-spacing: 6px; color: #ffd985; margin-bottom: 8px; }
.panel h2 { font-size: 26px; letter-spacing: 4px; color: #7fe8ff; margin-bottom: 10px; }
.tag { color: #ff8fb4; margin-bottom: 12px; font-style: italic; }
.rules { color: #b9c6ec; font-size: 14px; line-height: 1.55; margin-bottom: 16px; }
.mini { color: #7586b8; font-size: 11px; margin-top: 12px; }
.big-btn { font-size: 17px; font-weight: 700; letter-spacing: 2px; padding: 13px 34px;
  border-radius: 12px; border: none; cursor: pointer; color: #101830;
  background: linear-gradient(#ffe28a, #ffb46e); }
.big-btn:active { transform: translateY(1px); }
@media (max-width: 520px) {
  .hud-title { display: none; }
  #hint-bar { max-width: 55%; }
}