/* Bubble Shooter: the kit's shell in a light, airy coat. */
:root{
  --lacquer:#EEF3FA;--lacquer-hi:#FFFFFF;--ink:#1B2533;--ink-soft:#4B586B;--ink-dim:#6E7A8D;
  --hair:rgba(47,95,170,.22);--brass:#2F6FDB;--brass-lo:#1F55B5;--brass-hi:#5B93F0;--jade:#22A861;
  --navy:#1F3B66;
  color-scheme:light;
}
body{background:linear-gradient(180deg,#F5F8FD 0%,#E4ECF7 100%);color:var(--ink)}
.title{font-family:var(--sans);font-weight:900;color:var(--navy);text-shadow:0 2px 0 #fff,0 6px 18px rgba(31,59,102,.15);letter-spacing:-.01em}
.pill{font-family:var(--sans);color:#fff;background:linear-gradient(180deg,#5B93F0,#2F6FDB 55%,#1F55B5);box-shadow:0 1px 0 #fff6 inset,0 4px 0 #17418C,0 8px 18px rgba(31,59,102,.25)}
.pill:active{box-shadow:0 1px 0 #fff6 inset,0 2px 0 #17418C,0 4px 10px rgba(31,59,102,.25)}
.link{color:var(--brass-lo);font-weight:600;min-height:44px}
.jewel{background:#fff;border:1px solid var(--hair);box-shadow:0 2px 8px rgba(31,59,102,.12)}
.jewel svg{stroke:var(--navy)}
.veil{background:rgba(20,34,58,.38)}
.card{background:#fff;border:1px solid var(--hair);box-shadow:0 20px 50px rgba(20,34,58,.28)}
.card h2{font-family:var(--sans);font-style:normal;font-weight:800;color:var(--navy)}
.card .x{color:var(--navy);border-color:var(--hair)}
.card .x svg{stroke:var(--navy)}
.row{background:#F3F7FC;border-color:var(--hair);min-height:52px;color:var(--ink)}
.toggle{background:#CBD5E3;border-color:transparent}
.toggle[aria-pressed=true]{background:var(--brass)}
.toggle::after{background:#fff}
.toggle[aria-pressed=true]::after{background:#fff}
.stats{color:var(--ink-soft)}
.stats b{font-family:var(--sans);color:var(--navy)}
.note{color:var(--ink-soft)}
.toast{background:#fff;color:var(--ink)}
:focus-visible{outline:3px solid var(--brass-hi);outline-offset:3px}

/* home */
.home{padding:1.2em}
.brand{display:flex;flex-direction:column;align-items:center;gap:.4em}
.logo{width:clamp(84px,20vmin,150px);height:auto;filter:drop-shadow(0 6px 10px rgba(31,59,102,.18))}
.home .title{font-size:clamp(2.3em,8.5vmin,4em);text-align:center}
.menu{display:flex;flex-direction:column;align-items:stretch;gap:.8em;width:min(21em,100%)}
.menu .pill{display:flex;flex-direction:column;align-items:center;padding:.55em 1em;min-height:64px;font-size:1.3em}
.menu .pill small{font-size:.62em;font-weight:600;opacity:.9}
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6em}
.soft{min-height:50px;border-radius:14px;border:1px solid var(--hair);background:#fff;color:var(--navy);font-weight:700;font-size:.95em;
  box-shadow:0 2px 6px rgba(31,59,102,.08);padding:.4em .6em}
.soft:active{transform:translateY(1px)}
.soft:disabled,.pill:disabled{opacity:.5}
.lock a{color:var(--brass-lo)}
@media (max-height:520px) and (min-aspect-ratio:5/4){
  .home{flex-direction:row;gap:2.4em}
  .logo{width:clamp(64px,22vh,120px)}
  .home .title{font-size:clamp(2em,11vh,3.4em)}
}

/* the game */
#game{background:transparent}
.bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.6em;padding:max(.5em,env(safe-area-inset-top)) max(.8em,env(safe-area-inset-right)) .3em max(.8em,env(safe-area-inset-left))}
.hud{display:flex;flex-direction:column;align-items:center;line-height:1.1}
.hud-level{font-size:.8em;font-weight:700;color:var(--ink-soft);letter-spacing:.04em}
.hud-score{font-size:1.5em;font-weight:900;color:var(--navy);font-variant-numeric:tabular-nums}
.meter{display:flex;gap:.28em;align-items:center;justify-content:flex-end;min-width:2.8em;max-width:9em;flex-wrap:wrap}
.meter i{width:.62em;height:.62em;border-radius:50%;background:#CBD5E3}
.meter i.on{background:var(--brass)}
.meter i.last{background:#E5484D;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.35}}
.felt{flex:1;position:relative;min-height:0;margin:0 max(.4em,env(safe-area-inset-right)) max(.4em,env(safe-area-inset-bottom)) max(.4em,env(safe-area-inset-left))}
#board{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair;-webkit-user-select:none;user-select:none;outline:none}
@media (max-height:520px) and (min-aspect-ratio:1/1){
  #game{flex-direction:row}
  .bar{display:flex;flex-direction:column;justify-content:flex-start;gap:.9em;width:7.5em;padding:max(.6em,env(safe-area-inset-top)) .4em .6em max(.6em,env(safe-area-inset-left))}
  .meter{justify-content:center;max-width:6em}
  .felt{margin:.3em max(.4em,env(safe-area-inset-right)) .3em 0}
}

/* cards */
.how{margin:0 0 .6em;padding-left:1.2em;display:flex;flex-direction:column;gap:.25em}
.stars-big{text-align:center;font-size:2.6em;margin:0;letter-spacing:.08em;line-height:1.1}
.stars-big .on{color:#F2B30F;text-shadow:0 2px 0 #B07A00}
.stars-big .off{color:#D5DEEA}
.lv-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.45em}
.lv{min-height:52px;border-radius:12px;border:1px solid var(--hair);background:#F3F7FC;color:var(--navy);font-weight:800;font-size:1.05em;
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.2em 0;line-height:1.1}
.lv small{font-size:.62em;color:#E0A100;letter-spacing:.04em}
.lv.cur{border-color:var(--brass);box-shadow:0 0 0 2px var(--brass) inset}
.lv:disabled{opacity:.45}
/* short screens (a phone on its side): cards keep every button in view */
@media (max-height:520px){
  .card{padding:.9em 1.1em .8em}
  .card h2{margin-bottom:.35em;font-size:1.35em}
  .card .actions{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:.1em .5em;margin-top:.5em}
  .card .actions .pill{padding:.5em 1.6em}
  .stars-big{font-size:2em}
  .lv{min-height:44px}
}