/* City Defense: the sky, the home screen, the bar and the banner. */
body{background:#0B1030}
#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:1em;padding:1.2em 1.2em 4.5em;text-align:center}
.home .title{font-size:clamp(2.6em,12vw,4.8em);font-weight:900;text-transform:uppercase;letter-spacing:.03em;
  text-shadow:0 0 8px rgba(255,196,107,.7),0 0 26px rgba(224,138,46,.6)}
.home .title .pre{display:block;font-size:.6em;letter-spacing:.2em;margin-bottom:.04em;color:var(--pick);text-shadow:0 0 10px rgba(159,232,255,.7)}
.tagline{margin:0;color:var(--ink);font-size:1.15em}
.lead{display:flex;flex-direction:column;align-items:center;gap:.6em}
.menu-col{display:flex;flex-direction:column;align-items:center;gap:.7em;width:min(22em,100%)}
.levels{display:flex;gap:.4em;justify-content:center}
.levels .choice{min-width:5.8em;min-height:52px;font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15;font-size:1.02em}
.levels .choice small{font-weight:400;font-size:.72em;opacity:.85}
.menu-col .pill{min-width:12em;min-height:52px}
.links{display:flex;gap:.2em;justify-content:center;flex-wrap:wrap}
.links .link{min-height:44px;font-size:1em}
@media (max-height:480px){
  .home{flex-direction:row;flex-wrap:wrap;gap:.4em 2.2em;padding:.6em 1em}
  .home .title{font-size:2.7em}
  .menu-col{gap:.45em}
  .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:.6em!important}}

/* the game */
#game{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;cursor:crosshair}
#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;cursor:default}
#game .bar .jewel{flex:none;width:2.6em;height:2.6em;min-width:44px;min-height:44px}
.field{flex:1}
.hud{flex:1;display:flex;align-items:baseline;justify-content:center;gap:.9em;min-width:0}
.hud b{font:800 1.55em/1 var(--sans);color:var(--brass-hi);text-shadow:0 0 10px rgba(255,196,107,.6);font-variant-numeric:tabular-nums}
.hud span{color:var(--ink-soft);font-weight:700;letter-spacing:.04em;white-space:nowrap}
.ammo{flex:none;display:flex;align-items:center;gap:6px;min-width:3.6em;justify-content:flex-end}
.ammo i{display:block;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle,#fff,#9FE8FF 55%,rgba(159,232,255,0) 72%);box-shadow:0 0 8px #9FE8FF}
.ammo b{font:800 1.25em/1 var(--sans);color:var(--pick);font-variant-numeric:tabular-nums}
.ammo.low b{color:#FF8F8F}
@media (max-width:420px){.hud{flex-direction:column;align-items:center;gap:.1em}.hud span{font-size:.85em}}
.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-weight:800;letter-spacing:.05em;color:var(--brass-hi);text-shadow:0 0 12px rgba(255,196,107,.85),0 2px 4px rgba(0,0,0,.6);font-size:1.35em;transition:opacity .3s}
.banner:empty{opacity:0}

.card .big{font:800 1.3em/1.3 var(--sans);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}
@media (max-height:420px){.card{padding:.9em 1.1em .8em;font-size:.9em}.card h2{margin-bottom:.35em}.card .actions{margin-top:.5em;gap:.2em}.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}}
.card .actions{background:var(--lacquer-hi)}