/* Star Rocks Blaster: the sky, the home screen, the bar and the thumb pads. */
body{background:#060A16}
#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;text-align:center}
.home .title{font-size:clamp(2.5em,12vw,4.8em);font-weight:900;text-transform:uppercase;font-style:italic}
.home .title .pre{display:block;font-size:.56em;letter-spacing:.12em;margin-bottom:.06em}
.tagline{margin:0;color:var(--ink);font-size:1.1em}
.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:48px;font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15}
.levels .choice small{font-weight:400;font-size:.72em;opacity:.85}
.menu-col .pill{min-width:12em;min-height:50px}
.links{display:flex;gap:.2em;justify-content:center;flex-wrap:wrap}
.links .link{min-height:44px;font-size:.98em}
@media (max-height:480px){
  .home{flex-direction:row;flex-wrap:wrap;gap:.4em 2.2em;padding:.6em 1em}
  .home .title{font-size:2.8em}
  .menu-col{gap:.45em}
  .menu-col .pill{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}
#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;align-items:baseline;justify-content:center;gap:.9em;min-width:0}
.hud b{font:800 1.5em/1 var(--sans);color:var(--brass-hi);text-shadow:0 0 10px rgba(111,227,255,.6);font-variant-numeric:tabular-nums}
.hud span{color:var(--ink-soft);font-weight:700;letter-spacing:.06em}
.lives{flex:none;display:flex;gap:4px;min-width:2.6em;justify-content:flex-end;align-items:center}
.lives i{display:block;width:14px;height:18px;background:#7DF9FF;clip-path:polygon(50% 0,100% 100%,50% 78%,0 100%);filter:drop-shadow(0 0 3px #7DF9FF)}
.lives em{font-style:normal;font-weight:700;color:var(--brass-hi);margin-left:2px}
.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:.08em;color:var(--brass-hi);text-shadow:0 0 12px rgba(111,227,255,.8);font-size:1.25em;transition:opacity .3s}
.banner:empty{opacity:0}

/* thumb pads: in the gutters beside the field (landscape) or under it (portrait), never over it */
.pad{position:absolute;inset:0;pointer-events:none}
.pad .turn,.pad .act{position:absolute;pointer-events:auto;display:flex;gap:10px;touch-action:none}
.pad .turn{border-radius:999px;background:rgba(111,227,255,.07);border:1.5px solid rgba(111,227,255,.35);padding:4px}
.pad .turn span{width:62px;height:66px;border-radius:999px;display:grid;place-items:center;transition:background .08s}
.pad .turn span.on{background:rgba(111,227,255,.32)}
.pad .act button{width:68px;height:68px;border-radius:50%;border:1.5px solid rgba(111,227,255,.45);background:rgba(111,227,255,.08);display:grid;place-items:center;padding:0;touch-action:none}
.pad .act #b-fire{width:78px;height:78px;border-color:rgba(255,246,176,.6);background:rgba(255,246,176,.08)}
.pad .act button.on{background:rgba(111,227,255,.34)}
.pad .act #b-fire.on{background:rgba(255,246,176,.34)}
.pad svg{width:30px;height:30px;fill:none;stroke:#D2F8FF;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.pad #b-fire svg{stroke:#FFF6B0}
.pad.side .turn{left:calc(max(env(safe-area-inset-left),0px) + (var(--g) - 144px) / 2);bottom:max(14px,env(safe-area-inset-bottom))}
.pad.side .act{right:calc(max(env(safe-area-inset-right),0px) + (var(--g) - 78px) / 2);bottom:max(14px,env(safe-area-inset-bottom));flex-direction:column;align-items:center}
.pad.below .turn{left:max(14px,env(safe-area-inset-left));bottom:calc(max(10px,env(safe-area-inset-bottom)) + (var(--s) - 84px) / 2)}
.pad.below .act{right:max(14px,env(safe-area-inset-right));bottom:calc(max(10px,env(safe-area-inset-bottom)) + (var(--s) - 84px) / 2);align-items:center}

.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}}