/* Tank Duel: a bright cartoon sky over the kit's shell. */
:root{
  --lacquer:#1C2C40;--lacquer-hi:#243A54;--ink:#F5F8FC;--ink-soft:#C3D2E2;--ink-dim:#8EA3BA;
  --hair:rgba(255,214,102,.34);--brass:#FFD666;--brass-lo:#E7A42A;--brass-hi:#FFEDB0;--jade:#2E9E6A;
  --serif:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold","Trebuchet MS",-apple-system,"Segoe UI",Roboto,sans-serif;
  --navy:#17324A;--you:#3BA7FF;--cpu:#FF8A3D;
}
body{background:#8ED3F5;font-size:19px}
#sky{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
.screen{position:fixed;inset:0;display:flex;flex-direction:column;z-index:1}

/* home */
.home{align-items:center;justify-content:center;gap:.9em;padding:1.2em;text-align:center}
.home .title{font-family:var(--serif);font-size:clamp(2.8em,13vw,5em);font-weight:900;color:#fff;letter-spacing:.01em;
  text-shadow:0 3px 0 var(--navy),0 -2px 0 var(--navy),3px 0 0 var(--navy),-3px 0 0 var(--navy),0 8px 18px rgba(23,50,74,.35)}
.tagline{margin:0;color:var(--navy);font-size:1.15em;font-weight:700;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.lead{display:flex;flex-direction:column;align-items:center;gap:.5em}
.menu-col{display:flex;flex-direction:column;align-items:center;gap:.6em;width:min(23em,100%)}
.levels{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;width:100%}
.levels .choice{min-height:52px;min-width:44px;padding:.2em;font:800 1.35em/1 var(--serif);color:var(--navy);background:rgba(255,255,255,.88);border:2px solid rgba(23,50,74,.18);border-radius:14px}
.levels .choice[aria-pressed=true]{background:var(--brass);border-color:var(--navy);color:var(--navy)}
.levels .choice:disabled{opacity:.45}
.levels .choice svg{width:.8em;height:.8em;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.lvl-note{margin:0;color:var(--navy);font-weight:700;font-size:.95em;min-height:1.4em}
.pill{font-family:var(--serif)}
.menu-col .pill{min-width:12em;min-height:52px}
.pill.alt{background:rgba(255,255,255,.9);color:var(--navy);box-shadow:0 4px 0 rgba(23,50,74,.35)}
.links{display:flex;gap:.2em;justify-content:center;flex-wrap:wrap}
.home .link{min-height:44px;font-size:1em;color:var(--navy);font-weight:700}
@media (max-height:480px){
  .home{flex-direction:row;flex-wrap:wrap;gap:.3em 2em;padding:.5em 1em}
  .home .title{font-size:2.7em}
  .lead{max-width:15em}
  .menu-col{gap:.35em;width:min(20em,100%)}
  .lvl-note{font-size:.82em}
  .menu-col .pill{min-height:46px}
  .levels .choice{min-height:46px}
  .tagline{font-size:1em}
}
@media (max-height:480px) and (max-width:760px){html:not(.hw-embed) body:has(#home:not([hidden])) #home{padding-top:.5em!important}}

/* the game */
#game{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none}
#game .bar{padding:max(.35em,env(safe-area-inset-top)) max(.7em,env(safe-area-inset-right)) .3em max(.7em,env(safe-area-inset-left));gap:.6em}
#game .bar .jewel{flex:none;width:2.6em;height:2.6em;min-width:44px;min-height:44px}
.hud{flex:1;display:flex;flex-direction:column;align-items:center;min-width:0;line-height:1.15;color:var(--navy)}
.hud b{font:900 1.15em/1.1 var(--serif)}
.hud span{font-weight:700;font-size:.9em;white-space:nowrap}
.hud span.you{color:#0E6FC2}
.hud span.cpu{color:#C2520F}
.wind{flex:none;min-width:5.4em;display:flex;flex-direction:column;align-items:center;background:rgba(255,255,255,.85);border-radius:14px;padding:.2em .6em;color:var(--navy);line-height:1.1}
.wind small{font-size:.7em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.wind span{font:800 1.05em/1.1 var(--serif);white-space:nowrap}
.banner{position:absolute;left:50%;top:var(--bt,4.5em);transform:translateX(-50%);pointer-events:none;padding:.3em 1.1em;border-radius:999px;white-space:nowrap;
  font:900 1.3em/1.2 var(--serif);color:#fff;background:rgba(23,50,74,.72);transition:opacity .3s;opacity:0}
.banner.show{opacity:1}

/* the controls: placed by game.js beside or under the hills, never over them */
.ctl{position:absolute;inset:0;pointer-events:none}
.ctl > *{position:absolute;pointer-events:auto;touch-action:none}
.grp{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:5px;border-radius:20px;background:rgba(255,255,255,.9);box-shadow:0 4px 0 rgba(23,50,74,.25)}
.grp.h{flex-direction:row-reverse}
.grp.v{flex-direction:column}
.nud{width:50px;height:50px;flex:none;border-radius:50%;border:0;background:#E3EFFA;color:var(--navy);font:900 30px/1 var(--serif);padding:0;display:grid;place-items:center}
.nud.on,.nud:active{background:var(--brass)}
.val{flex:1;display:flex;flex-direction:column;align-items:center;color:var(--navy);line-height:1.05;min-width:4em}
.val small{font-size:.68em;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.val b{font:900 1.45em/1.1 var(--serif);font-variant-numeric:tabular-nums}
.fire{border:0;border-radius:22px;font:900 1.45em/1 var(--serif);color:#fff;letter-spacing:.02em;
  background:linear-gradient(180deg,#FF7A59,#E9462B);box-shadow:0 5px 0 #A52A17,0 8px 16px rgba(0,0,0,.25);text-shadow:0 2px 0 rgba(0,0,0,.25)}
.fire:active{transform:translateY(3px);box-shadow:0 2px 0 #A52A17}
.ctl.wait .grp,.ctl.wait .fire{opacity:.45;filter:saturate(.5)}

.card .big{font:900 1.35em/1.3 var(--serif);text-align:center;margin:0 0 .4em;color:var(--brass-hi)}
.card p{margin:.2em 0 .5em}
.card ul{margin:.2em 0 .4em;padding-left:1.2em}
.card li{margin:.25em 0}
.card .pill,.card .row,.card .choice{min-height:44px}
.card .row{color:var(--ink);font-weight:700}
@media (max-height:420px){.card{font-size:.9em}.card .big{margin:0 0 .2em}}
@media (max-height:480px){#game .bar{padding-top:max(.25em,env(safe-area-inset-top));padding-bottom:.2em}#game .bar .jewel{width:44px;height:44px}.banner{font-size:1.05em}}
/* cards: the kit's card in this game's navy; the sticky button strip matches it */
.card{background:var(--lacquer-hi)}
.card .actions{background:var(--lacquer-hi)}
.lvl-note,.home .link{text-shadow:0 0 6px rgba(255,255,255,.9),0 0 2px rgba(255,255,255,.9)}