*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#07111f;
  --surface:#111d35;
  --border:#22365c;
  --text:#e8f0ff;
  --muted:#9ab0dc;
  --primary:#62ccff;
  --green:#48d98f;
  --danger:#ff688d;
  --glow:rgba(98,204,255,.35);
}

html{font-size:14px}
body{
  background:radial-gradient(circle at 30% 0%, #132342 0%, #07111f 55%, #040914 100%);
  color:var(--text);
  font-family:'Inter',sans-serif;
  min-height:100vh;
  overflow-x:hidden;
}

.top-bar{
  display:flex;align-items:center;gap:1rem;
  padding:.6rem 1.2rem;
  background:rgba(12,20,38,.94);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:100;
  flex-wrap:wrap;
  backdrop-filter:blur(8px);
}
.back-link{color:var(--primary);text-decoration:none;font-weight:700;font-size:.9rem;white-space:nowrap}
.back-link:hover{text-decoration:underline}
.game-info{display:flex;flex-direction:column;align-items:center;gap:0}
.info-label{font-size:.6rem;text-transform:uppercase;color:var(--muted);letter-spacing:.08em}
.info-val{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:1.1rem;color:var(--green)}
.top-title{margin-left:auto;font-family:'Bangers',cursive;font-size:1.55rem;color:var(--primary);letter-spacing:.06em}

.mobile-nav{
  display:none;
  background:rgba(12,20,38,.98);border-bottom:1px solid var(--border);
  padding:.4rem .6rem;gap:.4rem;
}
.mob-btn{
  flex:1;padding:.45rem;border:none;border-radius:7px;
  background:transparent;color:var(--muted);font-size:.8rem;font-weight:600;cursor:pointer;
}
.mob-btn.active{background:rgba(98,204,255,.2);color:var(--primary)}

.layout{display:flex;gap:0;min-height:calc(100vh - 48px)}
.panel{
  width:280px;flex-shrink:0;
  background:rgba(16,28,50,.85);
  border-right:1px solid var(--border);
  padding:1rem;overflow-y:auto;
}
.panel-right{border-right:none;border-left:1px solid var(--border)}
.panel-title{
  font-family:'Bangers',cursive;font-size:1.3rem;color:var(--primary);
  margin-bottom:.8rem;display:flex;align-items:center;gap:.5rem;
}

.game-center{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:1.5rem;gap:1rem;min-width:0;
}

.info-box{
  background:rgba(98,204,255,.08);border:1px solid rgba(98,204,255,.25);
  border-radius:8px;padding:.8rem;margin-bottom:1rem;
  font-size:.85rem;line-height:1.5;
}
.info-box p{margin-bottom:.5rem}
.info-box p:last-child{margin-bottom:0}

.controls-grid{font-size:.82rem;margin-bottom:1rem}
.key-row{padding:.32rem 0;border-bottom:1px solid rgba(255,255,255,.05)}
kbd{
  display:inline-block;padding:2px 6px;
  background:#1d2c4b;border:1px solid #2b4473;border-radius:3px;
  font-family:'JetBrains Mono',monospace;font-size:.75rem;color:var(--primary);
}

.stats-block{font-size:.85rem}
.stat-row{display:flex;justify-content:space-between;padding:.35rem 0;border-bottom:1px solid rgba(255,255,255,.05)}
.stat-row span:last-child{font-family:'JetBrains Mono',monospace;color:var(--green);font-weight:700}

.canvas-wrap{
  position:relative;
  width:900px;max-width:100%;aspect-ratio:16/9;
  border:2px solid rgba(98,204,255,.66);
  border-radius:10px;overflow:hidden;
  box-shadow:0 0 34px var(--glow);
  background:#030b18;
}
#gameCanvas{display:block;width:100%;height:100%}

.overlay{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(7,13,25,.88);z-index:10;
}
.overlay.hidden{display:none}
.overlay-box{
  text-align:center;padding:2rem;
  background:linear-gradient(160deg, rgba(17,30,54,.95), rgba(11,20,39,.95));
  border:1px solid rgba(98,204,255,.55);
  border-radius:12px;max-width:360px;width:90%;
}
.overlay-box h2{font-family:'Bangers',cursive;font-size:2rem;color:var(--primary);margin-bottom:.5rem}
.overlay-box p{color:var(--muted);margin-bottom:1rem;font-size:.9rem}
.score-big{font-family:'JetBrains Mono',monospace;font-size:2.3rem;color:var(--green);font-weight:700}

.btn-play,.btn-submit{
  display:inline-block;padding:.7rem 2rem;border:none;border-radius:8px;
  font-family:'Bangers',cursive;font-size:1.2rem;
  cursor:pointer;transition:transform .15s,filter .15s;
}
.btn-play{background:var(--primary);color:#051122}
.btn-play:hover{transform:scale(1.05);filter:brightness(1.07)}
.btn-submit{background:var(--green);color:#062116;font-size:1rem;margin-top:.5rem}
.btn-submit:hover{filter:brightness(1.05)}
.btn-submit:disabled{opacity:.5;cursor:not-allowed}

.name-input{
  display:block;width:100%;padding:.6rem;margin-top:.5rem;
  background:#061022;border:1px solid var(--border);border-radius:6px;
  color:var(--text);font-size:.95rem;font-family:'JetBrains Mono',monospace;text-align:center;
}
.name-input:focus{outline:none;border-color:var(--primary)}
.submit-status{font-size:.8rem;margin-top:.4rem;min-height:1.2em;color:var(--muted)}

.refresh-btn{
  background:none;border:1px solid var(--primary);color:var(--primary);
  border-radius:4px;padding:2px 8px;font-size:1rem;cursor:pointer;margin-left:auto;
}
.refresh-btn:hover{background:rgba(98,204,255,.15)}

.lb-list{list-style:none;counter-reset:lb}
.lb-list li{
  counter-increment:lb;
  display:flex;align-items:center;gap:.5rem;
  padding:.45rem .3rem;
  border-bottom:1px solid rgba(255,255,255,.05);
  font-size:.85rem;
}
.lb-list li::before{
  content:counter(lb) ".";
  font-family:'JetBrains Mono',monospace;
  color:var(--muted);min-width:1.8rem;text-align:right;
  font-weight:700;font-size:.8rem;
}
.lb-name{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-score{font-family:'JetBrains Mono',monospace;color:var(--green);font-weight:700;font-size:.85rem}
.lb-empty{color:var(--muted);font-style:italic;padding:1rem 0;text-align:center}
.lb-list li:nth-child(1)::before{color:gold}
.lb-list li:nth-child(2)::before{color:silver}
.lb-list li:nth-child(3)::before{color:#cd7f32}

@media(max-width:1100px){.panel{width:240px}}
@media(max-width:900px){
  .mobile-nav{display:flex}
  .layout{flex-direction:column}
  .panel{
    width:100%;border:none;display:none;
    position:fixed;top:90px;left:0;right:0;bottom:0;
    z-index:50;overflow-y:auto;
  }
  .panel.show{display:block}
  .game-center{padding:1rem .5rem}
  .top-title{display:none}
  .canvas-wrap{width:100%;max-width:700px}
}
@media(max-width:500px){
  .canvas-wrap{max-width:95vw}
}