* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: #0b1020; }
body { font-family: "Segoe UI", system-ui, -apple-system, sans-serif; color: #e6edff;
  -webkit-user-select: none; user-select: none; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

#hud { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between;
  align-items: center; padding: 10px 14px; pointer-events: none;
  background: linear-gradient(#0b1020cc, #0b102000); }
.hud-row { display: flex; gap: 8px; flex-wrap: wrap; }
.stat { background: #141b3099; border: 1px solid #2c3c66; border-radius: 10px; padding: 6px 11px;
  font-size: 13px; color: #9fb3dd; }
.stat b { color: #ffd166; font-variant-numeric: tabular-nums; }
.stat.warn b { color: #ff5c8a; }
#btn-restart-hud { pointer-events: auto; background: #141b3099; color: #9fe8fa; border: 1px solid #2c3c66;
  border-radius: 10px; font-size: 18px; width: 38px; height: 34px; cursor: pointer; }
#btn-restart-hud:hover { background: #1d2a4d; }

#banner { position: fixed; top: 64px; left: 50%; transform: translateX(-50%) scale(0.9);
  background: #141b30ee; border: 1px solid #ffd166; color: #ffd166; padding: 10px 22px;
  border-radius: 14px; font-size: 17px; font-weight: 600; letter-spacing: 0.04em;
  opacity: 0; transition: opacity 0.25s, transform 0.25s; pointer-events: none; }
#banner.show { opacity: 1; transform: translateX(-50%) scale(1); }

.overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
  background: #070b18d9; backdrop-filter: blur(3px); z-index: 10; }
.overlay.open { display: flex; }
.card { max-width: 560px; width: calc(100% - 32px); background: #131a30f2; border: 1px solid #2c3c66;
  border-radius: 18px; padding: 26px 28px; text-align: center; box-shadow: 0 20px 60px #0009; }
.card h1 { font-size: 30px; letter-spacing: 0.03em; margin-bottom: 6px; }
.card .tag { color: #9fe8fa; margin-bottom: 14px; font-style: italic; }
.card .how { text-align: left; font-size: 14px; color: #b9c7e8; line-height: 1.55; margin-bottom: 18px; }
.card .how ul { margin: 8px 0 0 18px; }
.card .how li { margin: 5px 0; }
.gold { color: #ffd166; } .teal { color: #67e8f2; } .orange { color: #ff9e64; }
.accent { color: #62ffd0; } .rose { color: #ff5c8a; }
kbd { background: #223058; border: 1px solid #3a4f86; border-bottom-width: 3px; border-radius: 5px;
  padding: 1px 6px; font-size: 12px; color: #e6edff; }
.big-btn { display: inline-block; background: linear-gradient(#62ffd0, #1fa87f); color: #06231a;
  border: none; border-radius: 12px; font-size: 17px; font-weight: 700; padding: 12px 30px;
  cursor: pointer; letter-spacing: 0.03em; }
.big-btn:hover { filter: brightness(1.12); }

#touch-controls { position: fixed; bottom: 12px; left: 0; right: 0; display: none;
  justify-content: space-between; padding: 0 16px; z-index: 8; }
#touch-controls button { width: 52px; height: 52px; border-radius: 14px; font-size: 20px;
  background: #141b30cc; color: #9fe8fa; border: 1px solid #2c3c66; touch-action: none;
  pointer-events: auto; }
#touch-controls button:active { background: #2b3a66; }
.dpad { display: grid; grid-template-columns: 52px 52px 52px; grid-template-rows: 52px 52px; gap: 6px; }
#t-up { grid-area: 1 / 2; } #t-left { grid-area: 2 / 1; } #t-down { grid-area: 2 / 2; }
#t-right { grid-area: 2 / 3; }
.actions { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
@media (hover: none) and (pointer: coarse) { #touch-controls { display: flex; } }
@media (max-width: 760px) { #touch-controls { display: flex; } .card h1 { font-size: 24px; }
  .stat { font-size: 11px; padding: 4px 8px; } }