:root{
  --bg:#0b1020;
  --panel:rgba(14,20,38,.92);
  --stroke:rgba(255,255,255,.12);
  --text:#eaf0ff;
  --muted:#93a0c4;
  --accent:#4dd2ff;
  --accent2:#7c8cff;
  --danger:#ff5d6c;
  --gold:#ffd166;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

html,body{
  margin:0;padding:0;height:100%;width:100%;
  overflow:hidden;position:fixed;overscroll-behavior:none;
  background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;
  user-select:none;-webkit-user-select:none;
  touch-action:none;
}

#app{position:fixed;inset:0;}

#game{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;touch-action:none;
}

.hidden{display:none !important;}

/* ---------- HUD ---------- */
.hud{position:absolute;inset:0;pointer-events:none;}

.hud-top{
  position:absolute;left:0;right:0;
  top:calc(var(--safe-t) + 8px);
  padding:0 calc(12px + var(--safe-l)) 0 calc(12px + var(--safe-r));
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
}

.hud-left{display:flex;align-items:center;gap:8px;}

.level-badge{
  width:38px;height:38px;border-radius:12px;
  background:linear-gradient(160deg,var(--accent),var(--accent2));
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:19px;color:#08111f;
  box-shadow:0 4px 14px rgba(77,210,255,.3);
}

.level-bar{
  width:92px;height:9px;border-radius:99px;
  background:rgba(255,255,255,.14);overflow:hidden;
}
.level-bar i{
  display:block;height:100%;width:0%;border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  transition:width .15s linear;
}

.hud-center{text-align:center;flex:1;}
.timer{
  font-size:30px;font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;
  text-shadow:0 2px 10px rgba(0,0,0,.55);
}
.timer.warn{color:var(--danger);}
.sub{font-size:11px;color:#c3cfe8;margin-top:3px;letter-spacing:.04em;text-shadow:0 1px 6px rgba(0,0,0,.7);}

.hud-right{text-align:right;min-width:80px;}
.score{
  font-size:24px;font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;
  text-shadow:0 2px 10px rgba(0,0,0,.55);
}
.combo{font-size:13px;font-weight:800;color:var(--gold);height:16px;margin-top:2px;}

.hud-buttons{
  position:absolute;right:calc(12px + var(--safe-r));
  bottom:calc(14px + var(--safe-b));
  display:flex;flex-direction:column;gap:10px;pointer-events:auto;
}
.icon-btn{
  width:48px;height:48px;border-radius:16px;border:1px solid var(--stroke);
  background:rgba(12,18,34,.6);backdrop-filter:blur(8px);
  color:var(--text);font-size:17px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.icon-btn:active{transform:scale(.94);}

.toast{
  position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) scale(.8);
  font-size:26px;font-weight:900;letter-spacing:.02em;
  color:var(--gold);text-shadow:0 3px 18px rgba(0,0,0,.7);
  opacity:0;transition:opacity .18s ease, transform .18s ease;
  white-space:nowrap;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,-50%) scale(1);}

/* ---------- Джойстик ---------- */
.joystick{position:absolute;inset:0;pointer-events:none;}
.joy-base,.joy-knob{position:absolute;border-radius:50%;transform:translate(-50%,-50%);}
.joy-base{
  width:124px;height:124px;
  border:2px solid rgba(255,255,255,.22);
  background:radial-gradient(circle,rgba(255,255,255,.08),rgba(255,255,255,.02) 70%);
}
.joy-knob{
  width:56px;height:56px;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.92),rgba(140,180,255,.55));
  box-shadow:0 4px 18px rgba(0,0,0,.35);
}

/* ---------- Экраны ---------- */
.screen{
  position:absolute;inset:0;z-index:10;
  display:flex;align-items:center;justify-content:center;
  padding:calc(16px + var(--safe-t)) calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l));
  background:radial-gradient(120% 90% at 50% 0%,rgba(30,45,90,.72),rgba(6,9,20,.94));
  backdrop-filter:blur(6px);
  overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
}

.panel{
  width:100%;max-width:440px;
  background:var(--panel);border:1px solid var(--stroke);
  border-radius:24px;padding:22px 20px;
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  text-align:center;
}
.panel.small{max-width:340px;}

.title{
  margin:2px 0 6px;font-size:38px;font-weight:900;letter-spacing:.12em;
  background:linear-gradient(180deg,#ffffff,#7fc9ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.tagline{margin:0 0 16px;font-size:13.5px;color:var(--muted);line-height:1.5;}

h2{margin:0 0 14px;font-size:24px;font-weight:800;}

button{
  font-family:inherit;font-size:16px;font-weight:800;
  width:100%;padding:15px 18px;border-radius:16px;border:0;
  cursor:pointer;margin-bottom:10px;
  transition:transform .08s ease, filter .15s ease;
}
button:active{transform:scale(.97);}
.primary{
  background:linear-gradient(160deg,var(--accent),var(--accent2));
  color:#06101f;box-shadow:0 8px 26px rgba(77,210,255,.28);
}
.secondary{
  background:rgba(255,255,255,.08);color:var(--text);
  border:1px solid var(--stroke);
}

.stages{display:flex;gap:7px;margin-bottom:14px;min-width:0;}
.stage{
  flex:1 1 0;min-width:0;padding:11px 4px;border-radius:14px;
  border:1px solid var(--stroke);background:rgba(255,255,255,.05);
  cursor:pointer;text-align:center;
}
.stage.active{
  border-color:var(--accent);background:rgba(77,210,255,.14);
  box-shadow:0 0 0 1px rgba(77,210,255,.35) inset;
}
.stage b{display:block;font-size:13px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.stage span{display:block;font-size:10px;color:var(--muted);margin-top:3px;white-space:nowrap;}

.legend{
  text-align:left;margin:6px 0 12px;padding:12px 14px;
  background:rgba(255,255,255,.04);border:1px solid var(--stroke);border-radius:16px;
}
.legend-title{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:8px;}
.legend-row{display:flex;gap:10px;font-size:12.5px;line-height:1.7;}
.legend-row b{min-width:44px;color:var(--accent);font-weight:800;}
.legend-row span{color:#c8d3ee;}
.legend-row.danger b{color:var(--danger);}
.legend-row.danger span{color:#ffb3bb;}

.hint{font-size:12px;color:var(--muted);line-height:1.5;}
.best{margin-top:10px;font-size:12.5px;color:var(--gold);font-weight:700;min-height:16px;}
.build{
  margin-top:8px;font-size:10.5px;color:#5f6a8a;
  letter-spacing:.06em;font-variant-numeric:tabular-nums;
}

.result-score{
  font-size:52px;font-weight:900;line-height:1;margin:4px 0 12px;
  background:linear-gradient(180deg,#fff,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.result-stats{
  font-size:13px;color:var(--muted);line-height:1.9;
  margin-bottom:16px;text-align:left;
  padding:10px 14px;background:rgba(255,255,255,.04);
  border:1px solid var(--stroke);border-radius:14px;
}
.result-stats .row{display:flex;justify-content:space-between;gap:12px;}
.result-stats .row b{color:var(--text);font-weight:700;}

/* Пейзаж / маленькая высота */
@media (max-height:560px){
  .title{font-size:28px;}
  .legend{display:none;}
  .tagline{margin-bottom:10px;}
  .panel{padding:16px;}
  button{padding:12px 16px;font-size:15px;}
}