:root { font-family: system-ui, sans-serif; color: #fff; background: #2a1545; }
body { margin: 0 auto; padding: 12px; max-width: 840px; text-align: center; }
h1 { margin: .2em; font-size: 2rem; }
.tagline { margin: .2em 0 .6em; color: #ffd9a0; }
#hud { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap;
  background: #1c0f30; border-radius: 14px; padding: 8px 12px; margin: 0 0 8px; font-size: 1.1rem; }
#wrap { position: relative; }
canvas { display: block; width: 100%; height: auto; background: #3b1d5a; border-radius: 16px; touch-action: none; }
#overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none; text-align: center; padding: 12px; }
#overlay .card { pointer-events: auto; background: rgba(20,8,40,.88); border: 2px solid #ffd166;
  border-radius: 18px; padding: 18px 20px; max-width: 480px; }
#overlay h2 { margin: .1em 0 .3em; }
#overlay p { margin: .4em 0; line-height: 1.45; }
#overlay button.big { font-size: 1.3rem; margin-top: 10px; background: #ffd166; color: #3b1d5a; font-weight: 800; }
button { font: inherit; padding: 10px 18px; border: 0; border-radius: 12px; cursor: pointer;
  background: #ffd166; color: #3b1d5a; font-weight: 700; }
button:active { transform: scale(.97); }
#controls { display: flex; gap: 12px; justify-content: center; margin: 10px 0 0; }
#controls button { flex: 1; max-width: 220px; padding: 16px 10px; font-size: 1.15rem; }
#btn-zap { background: #7bf59b; }
#btn-up, #btn-down { background: #8ecae6; }
.hint { color: #e9d8ff; font-size: .95rem; }
section { margin: 20px auto; max-width: 480px; background: #1c0f30; border-radius: 14px; padding: 12px; }
form { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 16px 0; }
label { display: flex; flex-direction: column; gap: 6px; }
input { font: inherit; padding: 10px; width: 7em; border-radius: 8px; border: 0; }
ol { text-align: left; line-height: 1.8; }
@media (max-width: 480px) {
  body { padding: 8px; }
  h1 { font-size: 1.5rem; }
  #controls button { padding: 18px 6px; font-size: 1.05rem; }
}
@media (orientation: landscape) and (max-height: 500px) {
  h1, .tagline, .hint { display: none; }
}