/* Aim Trainer: a bright sky, soft pastel bubbles, navy type, coral buttons. Light and friendly. */
:root{
  color-scheme:light;
  --lacquer:#E8F6FF;--lacquer-hi:#FFFFFF;--ink:#15304D;--ink-soft:#3B5878;--ink-dim:#5F7894;
  --hair:rgba(21,48,77,.16);--brass:#FF6F59;--brass-lo:#E0503B;--brass-hi:#15304D;--jade:#2E9E6A;
  --round:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold","Trebuchet MS",-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:var(--round);
}
body{background:linear-gradient(180deg,#A9DEFF 0%,#D6EFFF 55%,#FFF4E6 100%);font-size:20px;color:var(--ink)}
#fx{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:25;pointer-events:none}
.screen{position:fixed;inset:0;z-index:1}

/* buttons */
.pill{font-family:var(--round);color:#fff;background:linear-gradient(180deg,#FF8E7A,#FF6F59 50%,#EE573F);text-shadow:0 1px 0 rgba(0,0,0,.18);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 4px 0 #C2412C,0 8px 16px rgba(21,48,77,.25)}
.pill:active{box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 2px 0 #C2412C,0 4px 10px rgba(21,48,77,.2)}
.pill:disabled{opacity:.75}
.pill.alt{background:#fff;color:var(--ink);text-shadow:none;box-shadow:0 4px 0 rgba(21,48,77,.25),0 8px 16px rgba(21,48,77,.15)}
.link{color:var(--ink);font-weight:700}
.jewel:focus-visible,.pill:focus-visible,.link:focus-visible,.choice:focus-visible,.row:focus-visible,.toggle:focus-visible,.x:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* home */
.home{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8em;padding:1.2em;text-align:center}
.home .title{font-family:var(--round);font-size:clamp(2.3em,11vw,4em);font-weight:900;color:var(--ink);line-height:1.02;
  text-shadow:0 3px 0 #fff,0 8px 22px rgba(21,48,77,.18);text-wrap:balance}
.tagline{margin:0;color:var(--ink-soft);font-size:1.1em;font-weight:700;text-shadow:none}
.lead{display:flex;flex-direction:column;align-items:center;gap:.5em}
.puffs{position:relative;width:5.2em;height:3.2em}
.puffs i{position:absolute;border-radius:50%;border:3px solid #fff;box-shadow:0 4px 10px rgba(21,48,77,.15)}
.puffs i:nth-child(1){left:.2em;top:.6em;width:2.4em;height:2.4em;background:radial-gradient(circle at 35% 30%,#FFD3E0,#FF8FB1 55%,#E2557F);animation:bob 3s ease-in-out infinite}
.puffs i:nth-child(2){left:2.6em;top:0;width:1.7em;height:1.7em;background:radial-gradient(circle at 35% 30%,#CFEFFF,#6EC8FF 55%,#2E92D6);animation:bob 3.4s ease-in-out -1s infinite}
.puffs i:nth-child(3){left:3.5em;top:1.7em;width:1.3em;height:1.3em;background:radial-gradient(circle at 35% 30%,#FFF1C4,#FFD36E 55%,#E0A21C);animation:bob 2.6s ease-in-out -.5s infinite}
@keyframes bob{50%{transform:translateY(-.35em)}}
.menu-col{display:flex;flex-direction:column;align-items:center;gap:.55em;width:min(23em,100%)}
.levels{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;width:100%}
.levels .choice{min-height:48px;min-width:0;padding:.2em;font:800 1.25em/1 var(--round);color:var(--ink);background:rgba(255,255,255,.85);
  border:2px solid rgba(21,48,77,.18);border-radius:14px}
.levels .choice[aria-pressed=true]{background:var(--brass);border-color:#fff;color:#fff;box-shadow:0 3px 0 #C2412C}
.levels .choice:disabled{opacity:.4}
.lvl-note{margin:0;color:var(--ink-soft);font-weight:700;font-size:.9em;min-height:1.4em}
.menu-col .pill{min-width:12em;min-height:52px}
.links{display:flex;gap:.1em;justify-content:center;flex-wrap:wrap}
.home .link{min-height:44px;font-size:1em}
@media (max-width:420px){.home{gap:.5em;padding-left:.8em;padding-right:.8em}.menu-col{gap:.45em}.levels{gap:4px}.levels .choice{font-size:1.1em}
  .home .link{padding:.4em .4em;font-size:.95em}.home .title{font-size:2.3em}.tagline{font-size:1em}}
@media (max-height:620px) and (max-aspect-ratio:1/1){.puffs,.home .tagline{display:none}}
@media (max-height:480px){
  .home{flex-direction:row;flex-wrap:nowrap;gap:1.4em;padding:.5em 1em}
  .home .lead{flex:1 1 0;min-width:0}
  .home .menu-col{flex:none;width:min(23em,max(380px,55%))}
  .home .title{font-size:2.4em}
  .lvl-note{font-size:.8em;min-height:0}
  .menu-col{gap:.3em}
  .menu-col .pill{min-height:46px;padding-top:.4em;padding-bottom:.4em}
  .levels .choice{min-height:44px}
  .tagline{font-size:.95em}
}
@media (max-height:480px) and (max-width:700px){.home .title{font-size:1.9em}.home .tagline{font-size:.85em}.puffs{display:none}}
@media (max-height:480px) and (max-width:760px){html:not(.hw-embed) body:has(#home:not([hidden])) #home{padding-top:.5em!important}}
@media (max-height:480px) and (max-width:520px){.home{flex-direction:column;gap:.3em}.home .lead{flex:none}.home .tagline,.puffs{display:none}.home .menu-col{width:100%}}

/* the game: the bar, then the field */
#game{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#game .bar{padding:max(.4em,env(safe-area-inset-top)) max(.7em,env(safe-area-inset-right)) .35em max(.7em,env(safe-area-inset-left));gap:.6em}
#game .bar .jewel{flex:none;width:2.6em;height:2.6em;min-width:48px;min-height:48px;border:2px solid #fff;background:var(--ink);box-shadow:0 3px 8px rgba(21,48,77,.25)}
#game .bar .jewel svg{stroke:#fff}
.hud{flex:1;display:flex;justify-content:flex-end;gap:.45em;min-width:0}
.stat{flex:0 1 6.2em;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.2em .4em;border-radius:.8em;
  background:rgba(255,255,255,.8);border:2px solid rgba(255,255,255,.95);box-shadow:0 2px 8px rgba(21,48,77,.12);line-height:1.1}
.stat small{font:800 .62em/1.2 var(--round);color:var(--ink-dim);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.stat b{font:900 1.2em/1.15 var(--round);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
#s-pops{flex-basis:7.4em}
.meter{display:block;width:100%;height:5px;border-radius:3px;background:rgba(21,48,77,.12);overflow:hidden;margin-top:2px}
.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#5FDBA7,#25A574);border-radius:3px;transition:width .25s}
.stat.low b{color:#D9402A}
#s-time.low{animation:pulse 1s ease-in-out infinite}
.stat.bump{animation:pop .35s ease-out}
@keyframes pop{0%{transform:scale(.9)}55%{transform:scale(1.08)}100%{transform:none}}
@keyframes pulse{50%{transform:scale(1.06)}}
.field{position:relative;margin:0 max(.6em,env(safe-area-inset-right)) max(.6em,env(safe-area-inset-bottom)) max(.6em,env(safe-area-inset-left));min-height:0;
  border-radius:1.2em;background:radial-gradient(ellipse 22% 11% at 18% 22%,rgba(255,255,255,.95),rgba(255,255,255,0) 72%),radial-gradient(ellipse 16% 8% at 64% 14%,rgba(255,255,255,.85),rgba(255,255,255,0) 72%),radial-gradient(ellipse 24% 12% at 80% 74%,rgba(255,255,255,.9),rgba(255,255,255,0) 72%),radial-gradient(ellipse 14% 7% at 30% 82%,rgba(255,255,255,.8),rgba(255,255,255,0) 72%),linear-gradient(180deg,#CFEBFF,#EEF8FF);
  border:3px solid rgba(255,255,255,.95);box-shadow:inset 0 2px 12px rgba(21,48,77,.08),0 4px 14px rgba(21,48,77,.12);overflow:hidden;touch-action:none;cursor:pointer}
#board{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
@media (max-height:480px){
  body{font-size:17px}
  #game .bar{padding-top:max(.25em,env(safe-area-inset-top));padding-bottom:.25em}
  #game .bar .jewel{width:44px;height:44px;min-width:44px;min-height:44px}
  .stat{flex-direction:row;gap:.4em;padding:.15em .6em;flex-basis:auto}
  #s-pops{flex-basis:auto}
  .meter{width:3em;margin:0}
  .field{margin-bottom:max(.4em,env(safe-area-inset-bottom))}
}
@media (max-width:380px){.stat small{font-size:.55em}.stat b{font-size:1.05em}.hud{gap:.3em}}

/* cards: white, rounded, navy type */
.veil{background:rgba(21,48,77,.42)}
.card{background:#fff;color:var(--ink);border:3px solid #fff;box-shadow:0 0 0 1px rgba(21,48,77,.08),0 20px 50px rgba(21,48,77,.35);font-size:1.02em}
.card h2{font:900 1.6em/1.1 var(--round);font-style:normal;color:var(--ink)}
.card .x{border-color:var(--hair);color:var(--ink)}
.card .x svg{stroke:var(--ink)}
.card .actions{background:#fff}
.card .big-line{font:900 1.35em/1.3 var(--round);text-align:center;margin:0 0 .3em;color:var(--brass-lo)}
.card .stars{text-align:center;font-size:2em;letter-spacing:.15em;color:#FFC531;margin:0;line-height:1.1;text-shadow:0 2px 0 #E0A21C}
.card .stars span{color:rgba(21,48,77,.15);text-shadow:none}
.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:48px}
.card .link{min-height:44px;font-size:1.05em}
.row{background:rgba(21,48,77,.05);border:1px solid rgba(21,48,77,.12);color:var(--ink)}
.card .row{font-weight:700}
.toggle{background:#C9D6E3;border-color:rgba(21,48,77,.2)}
.toggle::after{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.toggle[aria-pressed=true]{background:var(--jade)}
.toggle[aria-pressed=true]::after{background:#fff}
.stats{gap:1.1em;flex-wrap:wrap;color:var(--ink-soft);text-align:center;font-size:.9em}
.stats b{font:900 1.45em/1.1 var(--round);color:var(--ink)}
.note{color:var(--ink-soft)}
.toast{background:#fff;color:var(--ink);border-color:var(--hair)}
@media (max-height:480px){.card .stars{font-size:1.4em}.card .big-line{margin:0}.stats{gap:.9em;margin:0 0 .2em}.stats b{font-size:1.2em}}