/* Bug Blaster: the lawn, the home screen and the bar. */
:root{--brass-hi:#FFE9A8;--brass:#F5C451;--brass-lo:#C98E1D;--lacquer:#10261A;--lacquer-hi:#1A3A25;--hair:rgba(255,226,140,.3)}
body{background:#10261A}
#garden{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}
.card{background:linear-gradient(180deg,#24502F,#173A23 45%)}

/* home */
.home{align-items:center;justify-content:center;gap:1em;padding:1.2em;text-align:center}
.home .title{font-size:clamp(2.6em,13vw,5em);font-family:var(--sans);font-weight:900;color:#FFE27A;text-shadow:0 3px 0 #A3610F,0 8px 22px rgba(0,0,0,.45);letter-spacing:.01em}
.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.6em;min-height:52px;font-weight:700;font-size:1.05em;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15;background:rgba(16,38,26,.7)}
.levels .choice[aria-pressed=true]{background:linear-gradient(180deg,#FFE9A8,#F5C451);color:#3B220C;border-color:#FFE9A8}
.levels .choice small{font-weight:400;font-size:.72em;opacity:.85}
.menu-col .pill{min-width:12em;min-height:52px;font-family:var(--sans)}
.menu-col .pill.alt{background:rgba(16,38,26,.7);color:var(--brass-hi);box-shadow:inset 0 0 0 2px var(--brass)}
.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:nowrap;gap:.4em 1.6em;padding:.6em 1em}
  .home .title{font-size:2.6em}
  .lead{flex:0 1 auto;min-width:0}
  .menu-col{gap:.4em;width:auto;flex:0 1 20em;min-width:0}
  .menu-col .pill{min-width:0;width:100%;padding-left:1em;padding-right:1em}
  .levels .choice{min-width:0;flex:1;min-height:46px}
  .levels{width:100%}
  .menu-col .pill{min-height:46px}
  .tagline{font-size:1em;max-width:12em}
}
@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}
#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;background:radial-gradient(circle at 35% 30%,#2E6A40,#10261A 70%);box-shadow:0 0 0 3px #10261A,0 4px 10px rgba(0,0,0,.4)}
.hud{flex:1;display:flex;align-items:baseline;justify-content:center;gap:.9em;min-width:0}
.hud b{font:800 1.6em/1 var(--sans);color:#FFE27A;text-shadow:0 2px 0 #A3610F;font-variant-numeric:tabular-nums}
.hud span{color:var(--ink);font-weight:700;letter-spacing:.04em;font-size:1.05em}
.lives{flex:none;display:flex;gap:4px;min-width:2.6em;justify-content:flex-end;align-items:center}
.lives i{display:block;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#9BEBFF,#5ED7F2 45%,#2B9CC0)}
.lives em{font-style:normal;font-weight:700;color:var(--brass-hi);margin-left:2px}
.banner{position:absolute;left:50%;top:var(--bt,40%);transform:translate(-50%,-50%);pointer-events:none;padding:.3em 1.1em;border-radius:999px;white-space:nowrap;
  font-weight:900;letter-spacing:.04em;color:#FFE27A;text-shadow:0 3px 0 #7A4A10,0 0 14px rgba(0,0,0,.6);font-size:clamp(1.5em,6vw,2.4em);transition:opacity .3s}
.banner:empty{opacity:0}

.card .big{font:800 1.4em/1.3 var(--sans);text-align:center;margin:0 0 .4em;color:#FFE27A}
.card h2{font-family:var(--sans);font-style:normal;color:#FFE27A}
.card .pill{font-family:var(--sans)}
.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 button.row{cursor:pointer;color:var(--ink);font-size:1em}
.card button.row:focus-visible{outline:3px solid var(--brass-hi);outline-offset:2px}
.toggle[aria-pressed=true]{background:#3E9A55}
@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}}
/* a phone on its side: the bar becomes a column in the left margin */
#game.side .bar{position:absolute;left:0;top:0;bottom:0;width:max(5.6em,calc(env(safe-area-inset-left) + 4.8em));flex-direction:column;justify-content:flex-start;gap:.7em;
  padding:max(.5em,env(safe-area-inset-top)) .3em .5em max(.3em,env(safe-area-inset-left))}
#game.side .hud{flex:none;flex-direction:column;align-items:center;gap:.3em}
#game.side .lives{flex-wrap:wrap;justify-content:center;max-width:4.6em;min-width:0}