:root{
  color-scheme:dark;
  --panel:rgba(5,12,24,.88);
  --line:rgba(255,255,255,.15);
  --gold:#ffc84a;
  --text:#fff;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#02060d;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
button,input{font:inherit}
#app{position:relative;width:100%;height:100%;min-height:100svh;overflow:hidden;background:#02060d;touch-action:none;user-select:none}
#game{position:absolute;inset:0;width:100%;height:100%;display:block}
.screen{position:absolute;inset:0;z-index:20;display:grid;place-items:center}
.hidden{display:none!important}

.start-screen{background:#040812;overflow:hidden}
.poster{position:absolute;inset:0;background:url('poster.png') center center/cover no-repeat}
.cover-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.03) 0%,rgba(0,0,0,.05) 45%,rgba(0,0,0,.55) 100%)}
.start-console{
  position:absolute;z-index:2;left:50%;bottom:max(24px,env(safe-area-inset-bottom));
  transform:translateX(-50%);width:min(440px,calc(100vw - 28px));
  padding:16px;border:1px solid rgba(255,255,255,.16);border-radius:22px;
  background:linear-gradient(180deg,rgba(3,9,20,.68),rgba(3,9,20,.86));
  backdrop-filter:blur(12px);box-shadow:0 20px 70px rgba(0,0,0,.48);text-align:center
}
.online-status{font-size:11px;letter-spacing:.08em;color:#ffd56a;margin-bottom:9px}
.online-ok{color:#83f1b1}.online-bad{color:#ffb5a6}.online-warn{color:#ffd56a}
.player-label{display:block;text-align:left;color:#dceaf5;font-size:12px;font-weight:800;margin:0 0 6px}
.player-input{
  width:100%;border:1px solid rgba(255,255,255,.18);border-radius:13px;padding:12px 13px;
  background:rgba(0,0,0,.5);color:#fff;outline:none;text-align:center;font-size:16px
}
.player-input:focus{border-color:rgba(255,200,74,.75);box-shadow:0 0 0 3px rgba(255,200,74,.11)}
.name-error{min-height:18px;font-size:12px;color:#ffc5b8;margin-top:4px}
.primary{
  appearance:none;border:0;border-radius:14px;padding:13px 20px;background:linear-gradient(180deg,#ffd45f,#e98f13);
  color:#180e03;font-weight:950;cursor:pointer;box-shadow:0 9px 28px rgba(234,145,20,.28)
}
.primary:disabled{opacity:.6;cursor:wait;filter:saturate(.6)}
.hero-button{width:100%;font-size:18px}
.glass-btn{
  appearance:none;border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:10px 12px;
  background:rgba(5,15,29,.74);color:#eff7ff;font-weight:800;cursor:pointer
}
.wide{width:100%}
.start-links{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}
.controls{margin-top:10px;color:#a9bfd0;font-size:11px}

.modal{position:absolute;inset:0;z-index:40;display:grid;place-items:center;background:rgba(0,5,14,.7);backdrop-filter:blur(5px)}
.modal-panel,.panel{
  width:min(500px,calc(100vw - 28px));padding:20px;border-radius:22px;background:var(--panel);
  border:1px solid var(--line);box-shadow:0 24px 80px rgba(0,0,0,.55);backdrop-filter:blur(12px)
}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.modal-head small{color:#9cb4c7;font-size:10px;letter-spacing:.14em}
.modal-head h2{margin:2px 0 0;font-size:25px}
.close-btn{width:40px;height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:white;font-size:25px;cursor:pointer}

.leaderboard-list{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:7px}
.leaderboard-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:8px;align-items:center;padding:9px 10px;border-radius:12px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.07)}
.leaderboard-row.current{border-color:rgba(255,200,74,.5);background:rgba(255,200,74,.09)}
.rank{font-weight:950;color:#ffd15d}.leader-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800}.leader-score{font-weight:950;color:#9de7ff}
.empty-rank{text-align:center;color:#9cb1c2;padding:20px 8px}

.hud{position:absolute;z-index:12;top:max(10px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));display:flex;gap:8px;align-items:center;pointer-events:none}
.hud-item{min-width:94px;padding:8px 12px;border-radius:12px;background:rgba(3,14,30,.78);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(8px)}
.hud-item small{display:block;color:#8daabd;font-size:9px;letter-spacing:.14em}.hud-item b{display:block;font-size:18px;color:#fff}
.icon-btn{width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.13);background:rgba(3,14,30,.78);color:#fff;cursor:pointer;pointer-events:auto}
#soundBtn{margin-left:auto}
.pause{position:absolute;inset:0;z-index:30;display:grid;place-items:center;background:rgba(0,5,14,.62)}
.panel{text-align:center}.panel h2{font-size:30px;margin:12px 0 18px}
.badge{display:inline-flex;padding:6px 10px;border-radius:999px;background:rgba(84,217,255,.12);border:1px solid rgba(84,217,255,.3);font-size:11px;font-weight:900;letter-spacing:.1em}
.badge.danger{color:#ffd7ce;border-color:rgba(255,109,77,.4);background:rgba(255,109,77,.12)}
.player-result{margin-top:10px;color:#a9bfd0}.player-result strong{color:white}
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:18px 0}
.result-grid div{padding:11px;border-radius:13px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.result-grid span{display:block;color:#8fa8bd;font-size:11px}.result-grid strong{display:block;color:white;font-size:23px;margin-top:3px}
.game-over .glass-btn{margin-top:9px}

@media(max-width:700px){
  .poster{background-position:50% 50%}
  .start-console{bottom:max(12px,env(safe-area-inset-bottom));padding:13px;width:min(410px,calc(100vw - 18px))}
  .hud-item{min-width:70px;padding:7px 9px}.hud-item b{font-size:15px}
}
@media(max-height:650px){
  .start-console{padding:10px;bottom:8px}
  .controls{display:none}
  .player-input{padding:9px 11px}
  .hero-button{padding:10px 16px}
  .glass-btn{padding:8px 10px}
}