:root{
  --bg:#0b0e14; --ink:#eaeef6; --accent:#0b5fff; --muted:#8c96af; --zone:#2a2f3a;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 10px; background:linear-gradient(180deg,#0b1222,#0b0e14);
  border-bottom:1px solid #121625;
}
.brand{font-weight:700; letter-spacing:.3px}
.controls{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.controls button{
  appearance:none; border:1px solid #1f2740; background:#111624; color:var(--ink);
  border-radius:10px; padding:6px 10px; font-size:16px; line-height:1;
}
.controls button:active{transform:translateY(1px)}
#hud{color:var(--muted); margin-left:6px; font-size:14px}

main{display:grid; place-items:center; padding:6px}
canvas#game{
  width:100vw; max-width:820px;
  background:#060912 radial-gradient(60% 100% at 50% 0%, #0b1220 0%, #060912 70%) no-repeat;
  border:1px solid #141b2c; border-radius:12px;
  touch-action:none;
}
#touchZone{
  width:100vw; max-width:820px;
  height:clamp(80px, 24vh, 160px); margin-top:8px;
  background:repeating-linear-gradient(45deg, var(--zone), var(--zone) 8px, #262b36 8px, #262b36 16px);
  border:1px dashed #3b4153; border-radius:12px; opacity:.8;
}

.foot{padding:10px; color:var(--muted); text-align:center}
details{max-width:820px; margin:8px auto; text-align:left}
summary{cursor:pointer}
.about{margin:.3rem 0 0}
@media (min-width:768px){ body{font-size:17px} }


/* v5: label "Area Touch" */
#touchZone{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c8cfdb;
  font-size: 14px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}
#touchZone span{
  pointer-events: none;
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: .06em;
}