:root{
  --bg:#0a1310;
  --ink:#e9f7ef;
  --muted:#a1b6a9;
  --accent:#68f0a7;
  --accent-2:#83ffd0;
  --warn:#ffd36a;
  --danger:#ff6b6b;
}

html,body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  color:var(--ink);
  font-family:system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
}

#game {
  display: block;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  background: #000;
  z-index: 1;
}

/* SHOW the UI container by default (was display:none) */
#ui { display:block; }

/* UI above canvas */
#ui, #touch {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  gap: 12px;
  justify-content: space-between;
  z-index: 10000;
  pointer-events: auto;
}

#touch { display:none; }

/* buttons remain clickable */
#touch button, #ui button { pointer-events: auto; }

canvas{
  display:block;
  width:100vw;
  height:100svh;
  cursor:crosshair;
  touch-action:none;
  position:relative; z-index:0;
}

/* clickable UI (fix) */
#ui{ position:fixed; inset:0; z-index:2; pointer-events:auto; }
.hud{
  position:absolute;left:12px;top:10px;display:flex;gap:12px;align-items:center;
  background:rgba(120,180,150,.08);border:1px solid rgba(120,180,150,.18);
  padding:10px 12px;border-radius:14px;backdrop-filter:blur(4px);
  pointer-events:none;
}
.tag{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.val{font-weight:800;font-variant-numeric:tabular-nums}

.centercard{
  transform-origin: center center;
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:grid;gap:12px;text-align:center;
  width:min(92vw,620px);
  background:linear-gradient(180deg, rgba(12,28,22,.78), rgba(8,20,16,.72));
  border:1px solid rgba(130,255,200,.15);
  border-radius:22px;
  box-shadow:0 20px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  padding:22px;
}
.title{font-size:24px;font-weight:900;letter-spacing:.02em}
.subtitle{color:var(--muted);font-size:14px}
.kbd{display:inline-block;border:1px solid rgba(180,255,210,.35);border-bottom-width:3px;border-radius:8px;padding:2px 6px;font-weight:800}
.btn-row{display:flex;gap:12px;justify-content:center;}

/* Buttons */
.btn-hero{
  pointer-events:auto; cursor:pointer; user-select:none; margin-top: 20px;
  padding:14px 22px; font-size:18px; font-weight:900;
  color:#062a17; background:linear-gradient(180deg,#7bffc9,#4df2a4);
  border:none; border-radius:16px;
  box-shadow:0 16px 32px rgba(104,240,167,.35), inset 0 -2px 0 rgba(0,0,0,.25);
  transform: translateY(0);
  transition: transform .06s ease, box-shadow .12s ease;
}
.btn-hero:active{ transform:translateY(1px); box-shadow:0 10px 24px rgba(104,240,167,.28), inset 0 -1px 0 rgba(0,0,0,.25); }

.btn-ghost{
  pointer-events:auto; cursor:pointer; user-select:none;
  background:rgba(255,255,255,.06); color:var(--ink);
  border:1px solid rgba(180,255,210,.25);
  border-radius:12px; padding:10px 14px; font-weight:800;
}
.btn-ghost:hover{ background:rgba(255,255,255,.1); }
.btn-sm{ padding:8px 12px; font-size:14px; }

/* Touch */
#touch button{
  pointer-events:auto;cursor:pointer;border:none;border-radius:16px;padding:14px 12px; touch-action: manipulation; user-select: none;
  background:rgba(20,40,30,.6);color:var(--ink);font-weight:800;border:1px solid rgba(180,255,210,.18)
}
#touch .fire{background:linear-gradient(180deg,#ffd67a,var(--warn));color:#291b00}
#touch .missile{background:linear-gradient(180deg,#ff8888,var(--danger));color:#2a0000}

/* Modern game-over */
.gameover .go-head{ display:grid; gap:12px; justify-items:center; }
.gameover .go-title{ font-size:26px; font-weight:900; letter-spacing:.02em; }

.go-badges{ display:flex; gap:10px; margin-bottom: 20px; flex-wrap:wrap; justify-content:center; }
.badge{
  display:flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:14px;
  background:linear-gradient(180deg, rgba(120,255,190,.16), rgba(120,255,190,.08));
  border:1px solid rgba(120,255,190,.25);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.25);
}
.badge-tag{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.badge-val{ font-size:20px; font-weight:900; }

.go-input{ display:flex; gap:10px; justify-content:center; align-items:center; margin:10px 0 6px 0; }
/* Safety */
#menu, #menu *{ pointer-events:auto; }

@media (max-width: 900px) { #touch { display: flex; } }
@media (max-width: 720px){ .btn-hero{ width:100%; margin-top: 20px; } }
@media (max-width: 420px) { .hud { transform: scale(.9); transform-origin: top left; } #touch button { padding: 12px 10px; font-size: 14px; } }
@media (orientation: portrait) { #menu .title img { max-width: 80%; } }
@media (orientation: landscape) { #menu .title img { max-width: 60%; } }
@media (orientation: landscape) and (max-height: 520px) { #menu .title img { max-width: 55%; } .btn-hero, .btn-ghost { padding: 8px 12px; } .subtitle { font-size: 0.9rem; } }

/* Mobile-specific downsizing for menus */
@media (max-width: 560px){
  .centercard{ width:min(92vw, 520px); padding:16px; border-radius:18px; }
  .title{ font-size:20px; }
  .subtitle{ font-size:13px; }
  .btn-hero{ font-size:16px; padding:12px 16px; }
  .btn-ghost{ font-size:14px; padding:8px 12px; }
  .go-badges{ gap:8px; }
  .badge{ padding:8px 10px; border-radius:12px; }
  .badge-tag{ font-size:11px; }
  .badge-val{ font-size:18px; }
  .gameover .go-title{ font-size:22px; }
}
@media (max-width: 400px){
  .centercard{ padding:12px; border-radius:16px; }
  .btn-hero{ font-size:15px; padding:10px 14px; }
  .badge{ padding:6px 8px; }
  .badge-val{ font-size:16px; }
}

#menu .centercard{ pointer-events:auto; }
#menu .initial .btn-row { margin-top: 20px; gap: 12px; }
#menu .initial .btn-hero { margin-bottom: 18px; }
#menu .initial .subtitle { margin-bottom: 16px; }

@media (max-width: 900px) { #touch { display: flex; } }
@media (max-width: 720px){ .btn-hero{ width:100%; margin-top: 20px; } }
@media (max-width: 420px) { .hud { transform: scale(.9); transform-origin: top left; } #touch button { padding: 12px 10px; font-size: 14px; } }
@media (orientation: portrait) { #menu .title img { max-width: 80%; } }
@media (orientation: landscape) { #menu .title img { max-width: 60%; } }
@media (orientation: landscape) and (max-height: 520px) { #menu .title img { max-width: 55%; } .btn-hero, .btn-ghost { padding: 8px 12px; } .subtitle { font-size: 0.9rem; } }

#menu .centercard{ pointer-events:auto; }
#menu .initial .btn-row { margin-top: 20px; gap: 12px; }
#menu .initial .btn-hero { margin-bottom: 18px; }
#menu .initial .subtitle { margin-bottom: 16px; }