* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b1026; color: #e6e9f5;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; user-select: none; -webkit-user-select: none; touch-action: none; }
canvas#game { position: fixed; inset: 0; display: block; }
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }

#hud { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) calc(env(safe-area-inset-right, 0px) + 64px) 0 calc(env(safe-area-inset-left, 0px) + 14px);
  pointer-events: none; text-shadow: 0 2px 4px #0008; }
#hud-level { font-weight: 700; font-size: 15px; letter-spacing: .5px; }
.bar { width: min(40vw, 320px); height: 8px; background: #ffffff22; border-radius: 4px; margin-top: 6px; overflow: hidden; }
#hud-progress { height: 100%; width: 0; background: linear-gradient(90deg, #3df2c6, #ff4d6d); }
.hud-right { text-align: right; }
#hud-score { font-size: 28px; font-weight: 800; color: #ffd23f; }
#hud-combo { font-size: 15px; color: #3df2c6; min-height: 18px; font-weight: 700; }
#hud-speed { font-size: 12px; opacity: .7; }
#btn-pause { pointer-events: auto; position: fixed; top: calc(env(safe-area-inset-top, 0px) + 10px); right: calc(env(safe-area-inset-right, 0px) + 10px);
  width: 44px; height: 44px; border-radius: 12px; border: 1px solid #ffffff33; background: #0b102699; color: #fff; }

#popups { position: fixed; left: 0; right: 0; top: 22%; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.popup { font-weight: 900; font-size: 26px; color: #fff; text-shadow: 0 0 12px #ff4d6d, 0 2px 0 #0b1026;
  animation: pop 1.1s ease-out forwards; }
.popup small { display: block; text-align: center; font-size: 15px; color: #ffd23f; }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 15% { transform: scale(1.15); opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(-40px); opacity: 0; } }

#controls { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: flex-end;
  padding: 0 calc(env(safe-area-inset-right, 0px) + 14px) calc(env(safe-area-inset-bottom, 0px) + 14px) calc(env(safe-area-inset-left, 0px) + 14px);
  pointer-events: none; }
.pad { display: flex; gap: 10px; align-items: flex-end; pointer-events: auto; }
.pad button { width: 76px; height: 76px; border-radius: 50%; border: 2px solid #ffffff55; background: #1b204099; color: #fff;
  font-size: 26px; font-weight: 700; backdrop-filter: blur(4px); touch-action: none; }
.pad button.small { width: 58px; height: 58px; font-size: 13px; }
.pad.right button { font-size: 14px; }
.pad button.big { width: 96px; height: 96px; font-size: 16px; background: #ff4d6d99; border-color: #ff9fb2; }
.pad button.on { background: #3df2c6aa; border-color: #fff; transform: scale(.94); }
@media (pointer: fine) { .pad button { opacity: .75; } }
@media (max-height: 420px) { .pad button { width: 62px; height: 62px; } .pad button.big { width: 78px; height: 78px; } .pad button.small { width: 50px; height: 50px; } }

.screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 20px; background: radial-gradient(ellipse at center, #2a1b4dcc, #0b1026ee); overflow-y: auto; touch-action: pan-y; }
h1 { margin: 0; font-size: clamp(40px, 9vw, 84px); font-weight: 900; letter-spacing: 2px; color: #ffd23f; text-shadow: 4px 4px 0 #ff4d6d, 0 0 30px #ff6fae; }
h1 span { color: #3df2c6; }
h2 { margin: 0; font-size: 40px; color: #ffd23f; text-shadow: 3px 3px 0 #ff4d6d; }
.sub { margin: 0; opacity: .8; text-align: center; }
.levels { display: grid; grid-template-columns: repeat(5, minmax(110px, 150px)); gap: 10px; }
@media (max-width: 640px) { .levels { grid-template-columns: repeat(2, minmax(120px, 1fr)); } }
.levels button, .row button { padding: 12px 10px; border-radius: 12px; border: 2px solid #3df2c6; background: #1b2040; color: #fff; font-weight: 700; }
.levels button small { display: block; font-weight: 400; font-size: 12px; opacity: .75; margin-top: 3px; }
.levels button:disabled { border-color: #ffffff22; color: #ffffff55; cursor: not-allowed; }
.levels button:not(:disabled):hover, .row button:hover { background: #30386b; }
.row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
#ov-primary { border-color: #ffd23f; background: #ff4d6d; }
.help { max-width: 560px; background: #0b102699; padding: 10px 14px; border-radius: 12px; }
.help summary { cursor: pointer; font-weight: 700; }
.help td { padding: 2px 10px 2px 0; } .help td:first-child { color: #ffd23f; white-space: nowrap; }
#ov-text { text-align: center; white-space: pre-line; margin: 0; font-size: 18px; }

#rotate { display: none; position: fixed; inset: 0; z-index: 10; background: #0b1026; color: #fff; align-items: center; justify-content: center;
  font-size: 22px; text-align: center; padding: 30px; }
@media (orientation: portrait) and (pointer: coarse) { #rotate { display: flex; } }