:root{
  --bg:#1c150c; --panel:#231a0f; --neon:#ffbf4d; --muted:#e1c18d; --edge:#8a5b1b;
  --glowA:rgba(255,191,77,.60); --glowB:rgba(255,191,77,.35);
}

*{ box-sizing:border-box }
html,body{ height:100% }
html{ background:var(--bg); color:var(--neon) }
body{ margin:0; font:12px/1.6 "Press Start 2P", monospace, system-ui }

.bar{
  background:var(--panel); border-bottom:1px solid var(--edge);
  box-shadow:0 0 12px var(--glowB) inset; padding:.75rem 1rem;
}
.bar h1{ margin:0; font-size:14px; letter-spacing:.06em; text-shadow:0 0 6px var(--glowA),0 0 12px var(--glowB) }

.wrap{
  display:grid; gap:1rem; padding:1rem; align-items:start;
  grid-template-columns:minmax(640px,auto) 260px;
}

.stage{
  position:relative; width:640px; height:416px; overflow:hidden;
  border:1px solid var(--edge); background:var(--panel);
  box-shadow:0 0 16px rgba(0,0,0,.3) inset, 0 0 8px var(--glowA);
}
#game{ display:block; width:640px; height:416px; background:#0f0b07 }

.stage .crt-color-wash, .stage .crt-scanlines{
  pointer-events:none; position:absolute; inset:0;
}
.stage .crt-color-wash{
  background:var(--neon); mix-blend-mode:color; opacity:.65;
}
.stage .crt-scanlines{
  background:
    linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25)),
    repeating-linear-gradient(to bottom, rgba(0,0,0,.22) 0px, rgba(0,0,0,.22) 1px, transparent 2px, transparent 3px),
    radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,.30) 80%, rgba(0,0,0,.42) 100%);
  mix-blend-mode:multiply; opacity:.95;
}

.panel{ background:var(--panel); border:1px solid var(--edge); box-shadow:0 0 12px var(--glowB) inset; padding:.75rem }
.row{ display:flex; justify-content:space-between; gap:1rem; margin:.25rem 0 }
hr{ border:none; border-top:1px solid var(--edge); margin:.5rem 0 }
strong{ color:var(--neon) }

.shop{ display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem }
.shop-title{ grid-column:1/-1; font-size:10px; color:var(--muted); margin-bottom:.25rem }

.tower-btn{
  background:#332314; color:var(--neon); border:1px solid var(--edge);
  border-radius:.25rem; padding:.5rem .25rem; text-align:center; cursor:pointer;
  text-shadow:0 0 6px var(--glowA); box-shadow:0 0 6px rgba(0,0,0,.3) inset;
  line-height:1.2;
}
.tower-btn:hover{ box-shadow:0 0 10px var(--glowA) inset }
.tower-btn.selected{ outline:2px solid var(--neon) }

/* Buttons — shared style for Start / Pause / Clear (and fine for others) */
button{
  appearance:none; -webkit-appearance:none; /* kill UA button styling */
  width:100%;
  margin:.35rem 0;
  padding:.5rem;
  background:#332314;
  color:var(--neon);
  border:1px solid var(--edge);
  border-radius:.25rem;
  cursor:pointer;
  text-shadow:0 0 6px var(--glowA);
  box-shadow:0 0 6px rgba(0,0,0,.3) inset;
}
button:hover{ box-shadow:0 0 10px var(--glowA) inset }
button:disabled{ opacity:.5; cursor:not-allowed }
button:focus-visible{ outline:2px solid var(--neon); outline-offset:2px }

/* Keep shop buttons’ extra tweaks */
.tower-btn{
  line-height:1.2; /* already has bg/border from the shared rule above */
}
.tower-btn.selected{ outline:2px solid var(--neon) }


.hint{ color:var(--muted); font-size:10px; line-height:1.4 }
.foot{ margin-top:1rem; border-top:1px solid var(--edge); border-bottom:none; text-align:center }