:root{
  --bg:#050b16;
  --bg2:#08172b;
  --panel:rgba(7,18,34,.86);
  --panel2:rgba(9,24,48,.94);
  --line:rgba(91,215,255,.30);
  --text:#f0f7ff;
  --muted:#a7b8d8;
  --cyan:#4fe7ff;
  --blue:#48a7ff;
  --purple:#b56dff;
  --gold:#ffce54;
  --orange:#ff9c2e;
  --danger:#ff5575;
  --shadow:0 26px 90px rgba(0,0,0,.52);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body{height:100%;overscroll-behavior:none}
body{
  margin:0;
  min-height:100dvh;
  overflow:hidden;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 520px at 50% -18%, rgba(79,231,255,.20), transparent 60%),
    radial-gradient(700px 520px at 100% 55%, rgba(181,109,255,.16), transparent 62%),
    radial-gradient(650px 560px at 0% 100%, rgba(255,206,84,.08), transparent 62%),
    #050b16;
  -webkit-font-smoothing:antialiased;
  touch-action:none;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cg fill='none' stroke='%234bdcff' stroke-opacity='.30' stroke-width='1'%3E%3Cpath d='M30 1h60l30 52-30 52H30L0 53 30 1Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:74px 64px;
  mask-image:radial-gradient(circle at center,#000 54%,transparent 100%);
}
button{font:inherit;color:inherit}
.game-shell{
  height:100dvh;
  width:100vw;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  padding:calc(8px + var(--safe-top)) 10px calc(8px + var(--safe-bottom));
  gap:8px;
}
.canvas-wrap{
  position:relative;
  min-height:0;
  border:1px solid rgba(91,215,255,.22);
  border-radius:26px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01)),rgba(3,10,21,.74);
  box-shadow:var(--shadow), inset 0 0 28px rgba(79,231,255,.04);
  overflow:hidden;
}
#gameCanvas{
  display:block;
  width:100%;
  height:100%;
  touch-action:none;
}
.touch-hint{
  position:absolute;
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  padding:8px 12px;
  border:1px solid rgba(91,215,255,.25);
  border-radius:999px;
  background:rgba(6,17,31,.72);
  color:rgba(239,247,255,.78);
  font-size:.78rem;
  font-weight:850;
  letter-spacing:.04em;
  white-space:nowrap;
  pointer-events:none;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.bottom-controls{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  max-width:780px;
  width:min(100%,780px);
  margin:0 auto;
}
.control-btn,
.primary-btn,
.secondary-btn{
  border:1px solid rgba(91,215,255,.28);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),rgba(7,18,34,.9);
  color:var(--text);
  box-shadow:0 14px 34px rgba(0,0,0,.34);
  cursor:pointer;
  font-weight:950;
}
.control-btn{
  min-height:58px;
  display:grid;
  place-items:center;
  gap:1px;
  padding:7px 5px;
}
.control-btn span{font-size:1.35rem;line-height:1;color:#dff7ff;text-shadow:0 0 16px rgba(79,231,255,.55)}
.control-btn small{font-size:.64rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.control-btn.surge:not(:disabled){
  border-color:rgba(255,206,84,.70);
  background:radial-gradient(circle at 50% 20%,rgba(255,206,84,.24),rgba(7,18,34,.88) 62%);
  animation:surgeGlow 1.2s ease-in-out infinite alternate;
}
.control-btn.surge:not(:disabled) span{color:#fff5c7;text-shadow:0 0 20px rgba(255,206,84,.85)}
.control-btn:disabled{opacity:.45;cursor:not-allowed;filter:saturate(.5)}
@keyframes surgeGlow{from{box-shadow:0 0 18px rgba(255,206,84,.10)}to{box-shadow:0 0 28px rgba(255,206,84,.34)}}
.modal-card{
  border:1px solid rgba(91,215,255,.32);
  background:linear-gradient(180deg,rgba(12,27,54,.98),rgba(4,12,25,.98));
  color:var(--text);
  border-radius:24px;
  padding:0;
  width:min(560px,calc(100vw - 28px));
  box-shadow:0 30px 100px rgba(0,0,0,.66);
}
.modal-card::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(8px)}
.modal-inner{padding:22px;display:grid;gap:12px}
.modal-inner.compact{text-align:center}
.modal-inner h1,.modal-inner h2{margin:0;line-height:1.05;text-transform:uppercase;letter-spacing:.02em}
.modal-inner h1{font-size:clamp(2rem,8vw,3.2rem);background:linear-gradient(180deg,#fff,#60e7ff 48%,#b56dff);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 26px rgba(79,231,255,.18)}
.modal-inner h2{font-size:clamp(1.5rem,6vw,2.2rem)}
.kicker{margin:0;color:var(--gold);font-size:.75rem;font-weight:950;letter-spacing:.16em;text-transform:uppercase}
.lead,.modal-inner p,.modal-inner li{color:var(--muted);line-height:1.45}
ul,ol{margin:0;padding-left:1.2rem}.guide-inner ol{display:grid;gap:7px}.guide-inner strong{color:#fff6c8}.note{font-size:.8rem;color:rgba(167,184,216,.78)}
.primary-btn,.secondary-btn{min-height:46px;padding:12px 16px}.primary-btn{background:linear-gradient(135deg,var(--cyan),var(--purple));color:#06111f;border:0}.secondary-btn{background:rgba(7,18,34,.88)}
.modal-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.modal-actions button{min-width:150px}
.final-score{font-size:clamp(2.1rem,10vw,4rem);font-weight:1000;margin:.1rem 0;color:var(--gold);text-shadow:0 0 22px rgba(255,206,84,.5)}
.local-scores{display:grid;gap:8px;text-align:left;max-height:280px;overflow:auto;padding-left:1.4rem}.local-scores li{color:var(--muted)}.local-scores strong{color:var(--text)}
@media (min-width:900px){
  .game-shell{padding:14px;gap:12px}.canvas-wrap{max-width:980px;width:100%;justify-self:center}.bottom-controls{max-width:620px}.control-btn{min-height:64px}.touch-hint{bottom:16px}
}
@media (max-width:430px){
  .game-shell{padding:calc(6px + var(--safe-top)) 6px calc(7px + var(--safe-bottom));gap:6px}.canvas-wrap{border-radius:18px}.bottom-controls{gap:5px}.control-btn{min-height:48px;border-radius:14px;padding:5px 2px}.control-btn span{font-size:1.12rem}.control-btn small{font-size:.56rem}.touch-hint{font-size:.68rem;bottom:8px;max-width:calc(100vw - 24px);overflow:hidden;text-overflow:ellipsis}.modal-inner{padding:18px}.modal-actions button{min-width:130px}
}
@media (max-height:720px){.control-btn{min-height:48px}.touch-hint{display:none}.bottom-controls{gap:6px}}

/* v3 polish: modal buttons and compact final screen */
.modal-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.modal-actions .primary-btn,.modal-actions .secondary-btn{min-width:150px}
@media (max-width:520px){.modal-actions .primary-btn,.modal-actions .secondary-btn{flex:1 1 100%;min-width:0}}