/* BATTLE CITY - shell styling. The battlefield itself is drawn entirely on canvas. */

:root{
  --bg:#07090c;
  --panel:#14181d;
  --line:#2c333c;
  --ink:#c8d0d8;
  --cyan:#3cbcfc;
  --amber:#fcd800;
  --red:#f83800;
  --btn:#1b2129;
  --btn-edge:#3a434e;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
}

*{box-sizing:border-box;}

html,body{
  margin:0;padding:0;
  width:100%;height:100%;
  background:var(--bg);
  color:var(--ink);
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:none;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  font-family:ui-monospace,"Courier New",Courier,monospace;
}

body{
  background:
    radial-gradient(120% 90% at 50% 0%, #131a22 0%, #07090c 70%);
}

/* the space around the battlefield reads as a cabinet panel, not emptiness */
#stagewrap::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(60,188,252,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(60,188,252,.045) 1px, transparent 1px);
  background-size:28px 28px;
  background-position:center center;
  mask-image:radial-gradient(70% 60% at 50% 50%, rgba(0,0,0,.9), transparent 100%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 50%, rgba(0,0,0,.9), transparent 100%);
}

#app{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  padding:calc(var(--safe-t) + 4px) calc(var(--safe-r) + 6px) calc(var(--safe-b) + 6px) calc(var(--safe-l) + 6px);
  gap:6px;
}

/* ---------- top bar ---------- */
#topbar{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:30px;
}
.brand{
  font-size:clamp(11px,2.6vmin,15px);
  letter-spacing:2px;
  color:var(--amber);
  text-shadow:1px 1px 0 #6b4a00;
  white-space:nowrap;
}
.topbtns{display:flex;gap:6px;}
.tbtn{
  font:inherit;
  font-size:clamp(10px,2.2vmin,13px);
  letter-spacing:1.5px;
  color:var(--ink);
  background:var(--btn);
  border:2px solid var(--btn-edge);
  border-radius:3px;
  padding:5px 9px;
  cursor:pointer;
  touch-action:none;
  line-height:1;
}
.tbtn:active{background:#2b333d;}
.tbtn.off{color:#6b7480;}
.tbtn.hidden{visibility:hidden;}

/* ---------- battlefield ---------- */
#stagewrap{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
#game{
  display:block;
  box-sizing:content-box;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  background:#000;
  border:2px solid #333b45;
  box-shadow:0 0 0 2px #0c1014, 0 6px 22px rgba(0,0,0,.75);
  touch-action:none;
  max-width:100%;
  max-height:100%;
}

/* ---------- controls ---------- */
#controls{
  flex:0 0 auto;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  padding-top:2px;
}
.hint{
  display:none;
  flex:1 1 auto;
  text-align:center;
  font-size:11px;
  letter-spacing:1px;
  color:#6b7480;
  align-self:center;
}
.padspacer{flex:1 1 auto;}

.pad{
  position:relative;
  width:clamp(108px,30vmin,168px);
  height:clamp(108px,30vmin,168px);
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-rows:1fr 1fr 1fr;
  gap:3px;
  touch-action:none;
}
.dbtn{
  border:2px solid var(--btn-edge);
  background:var(--btn);
  border-radius:6px;
  position:relative;
  padding:0;
  cursor:pointer;
  touch-action:none;
}
.dbtn:active,.dbtn.on{background:#39424e;border-color:var(--cyan);}
.dbtn::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:0;height:0;
  transform:translate(-50%,-50%);
  border:9px solid transparent;
}
.dbtn.up::after{border-bottom-color:var(--ink);margin-top:-5px;}
.dbtn.down::after{border-top-color:var(--ink);margin-top:5px;}
.dbtn.left::after{border-right-color:var(--ink);margin-left:-5px;}
.dbtn.right::after{border-left-color:var(--ink);margin-left:5px;}
.dbtn.up{grid-area:1/2/2/3;}
.dbtn.left{grid-area:2/1/3/2;}
.dbtn.right{grid-area:2/3/3/4;}
.dbtn.down{grid-area:3/2/4/3;}
.dcenter{grid-area:2/2/3/3;background:#0d1116;border-radius:4px;}

.firebtn{
  width:clamp(84px,22vmin,124px);
  height:clamp(84px,22vmin,124px);
  border-radius:50%;
  border:3px solid #6a3a2c;
  background:radial-gradient(circle at 35% 30%, #d24a22, #8c2a10 70%);
  color:#ffe8c8;
  font:inherit;
  font-size:clamp(12px,2.8vmin,16px);
  letter-spacing:2px;
  cursor:pointer;
  touch-action:none;
  box-shadow:0 4px 0 #4a1c0a, inset 0 2px 0 rgba(255,255,255,.18);
}
.firebtn:active,.firebtn.on{
  transform:translateY(3px);
  box-shadow:0 1px 0 #4a1c0a, inset 0 2px 0 rgba(255,255,255,.12);
  background:radial-gradient(circle at 35% 30%, #ef6a34, #a53512 70%);
}

/* wide screens: keyboard is primary, keep the pads compact and show the hint */
@media (min-width:820px){
  .hint{display:block;}
  .pad{width:clamp(96px,14vmin,132px);height:clamp(96px,14vmin,132px);}
  .firebtn{width:clamp(76px,11vmin,104px);height:clamp(76px,11vmin,104px);}
}
@media (min-width:820px) and (hover:hover) and (pointer:fine){
  .pad{opacity:.55;}
  .firebtn{opacity:.7;}
}

/* short landscape: tighten the bars so the field keeps its size */
@media (orientation:landscape) and (max-height:560px){
  #app{gap:4px;padding:calc(var(--safe-t) + 3px) calc(var(--safe-r) + 6px) calc(var(--safe-b) + 4px) calc(var(--safe-l) + 6px);}
  #topbar{min-height:24px;}
  .brand{font-size:11px;}
  .tbtn{padding:4px 7px;font-size:10px;}
  .pad{width:clamp(92px,20vh,132px);height:clamp(92px,20vh,132px);}
  .firebtn{width:clamp(72px,16vh,108px);height:clamp(72px,16vh,108px);}
}

/* very short landscape phones: put the pads in the side gutters */
@media (orientation:landscape) and (max-height:430px) and (pointer:coarse){
  #controls{position:absolute;inset:auto 0 0 0;padding:0;pointer-events:none;}
  #controls .hint{display:none;}
  #controls .pad,#controls .firebtn,#controls .padspacer{pointer-events:auto;}
  #controls{padding:0 8px calc(var(--safe-b) + 6px) 8px;}
}