/* Cell Grow: a deep, glowing pond over the kit's shell. */
:root{
  --lacquer:#0B2C38;--lacquer-hi:#123D4C;--ink:#F2FAFB;--ink-soft:#BFDCE2;--ink-dim:#86AEB8;
  --hair:rgba(255,200,87,.34);--brass:#FFC857;--brass-lo:#E39B2D;--brass-hi:#FFE6A8;--jade:#2FA37A;
  --serif:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold","Trebuchet MS",-apple-system,"Segoe UI",Roboto,sans-serif;
  --deep:#06202B;
}
body{background:#0E3B4A;font-size:19px}
#pond{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:.9em;padding:1.2em;text-align:center}
.home .title{font-family:var(--serif);font-size:clamp(2.8em,13vw,5em);font-weight:900;color:var(--brass);letter-spacing:.01em;
  text-shadow:0 3px 0 #7A4B0E,0 8px 22px rgba(0,0,0,.45)}
.tagline{margin:0;color:var(--ink);font-size:1.15em;font-weight:700;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.lead{display:flex;flex-direction:column;align-items:center;gap:.5em}
.menu-col{display:flex;flex-direction:column;align-items:center;gap:.6em;width:min(23em,100%)}
.levels{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;width:100%}
.levels .choice{min-height:50px;min-width:44px;padding:.2em;font:800 1.3em/1 var(--serif);color:var(--ink);background:rgba(6,32,43,.78);border:2px solid rgba(191,220,226,.25);border-radius:14px}
.levels .choice[aria-pressed=true]{background:var(--brass);border-color:#fff;color:#3B2606}
.levels .choice:disabled{opacity:.45}
.levels .choice svg{width:.8em;height:.8em;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.lvl-note{margin:0;color:var(--ink);font-weight:700;font-size:.95em;min-height:1.4em;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.pill{font-family:var(--serif)}
.menu-col .pill{min-width:12em;min-height:52px}
.pill.alt{background:rgba(242,250,251,.92);color:#0B2C38;box-shadow:0 4px 0 rgba(0,0,0,.35)}
.links{display:flex;gap:.2em;justify-content:center;flex-wrap:wrap}
.home .link{min-height:44px;font-size:1em;color:var(--brass-hi);font-weight:700;text-shadow:0 1px 6px rgba(0,0,0,.8)}
@media (max-width:420px){.levels{grid-template-columns:repeat(4,1fr)}}
@media (max-height:480px){
  .home{flex-direction:row;flex-wrap:nowrap;gap:1.5em;padding:.5em 1em}
  .home .lead{flex:1 1 0;min-width:0}
  .home .menu-col{flex:none;width:min(23em,max(392px,56%))}
  .home .title{font-size:2.9em}
  .lvl-note{font-size:.85em}
  .menu-col{gap:.35em}
  .menu-col .pill{min-height:46px}
  .levels .choice{min-height:46px}
  .tagline{font-size:1em}
}
@media (max-height:480px) and (max-width:700px){.home .title{font-size:2.3em}.home .tagline{font-size:.9em}}
@media (max-height:480px) and (max-width:760px){html:not(.hw-embed) body:has(#home:not([hidden])) #home{padding-top:.5em!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;
  background:linear-gradient(180deg,rgba(6,32,43,.85),rgba(6,32,43,.55));cursor:default}
#game .bar .jewel{flex:none;width:2.6em;height:2.6em;min-width:44px;min-height:44px;border-color:var(--brass)}
.hud{flex:1;display:flex;flex-direction:column;align-items:center;min-width:0;line-height:1.15;color:var(--ink)}
.hud b{font:900 1.05em/1.1 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;color:var(--ink-soft)}
.hud span{font:900 1.35em/1.15 var(--serif);white-space:nowrap;color:var(--brass);font-variant-numeric:tabular-nums;transition:transform .15s}
.hud span.pop{transform:scale(1.18)}
.goal{flex:none;min-width:4.6em;display:flex;flex-direction:column;align-items:center;background:rgba(242,250,251,.12);border:1px solid rgba(191,220,226,.3);border-radius:14px;padding:.2em .6em;color:var(--ink);line-height:1.1}
.goal small{font-size:.7em;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.goal b{font:900 1.25em/1.1 var(--serif)}
.meter{height:8px;margin:0 max(.9em,env(safe-area-inset-left));background:rgba(6,32,43,.7);border-radius:4px;overflow:hidden;position:relative;z-index:5;border:1px solid rgba(191,220,226,.25)}
.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#9BE15D,var(--brass));transition:width .25s}
.banner{position:absolute;left:50%;top:var(--bt,5.4em);transform:translateX(-50%);pointer-events:none;padding:.3em 1.1em;border-radius:999px;white-space:nowrap;
  font:900 1.25em/1.2 var(--serif);color:#fff;background:rgba(6,32,43,.8);border:1px solid rgba(255,200,87,.4);transition:opacity .3s;opacity:0;max-width:calc(100% - 1em);overflow:hidden;text-overflow:ellipsis}
.banner.show{opacity:1}

.card .big{font:900 1.35em/1.3 var(--serif);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}
.card .row{color:var(--ink);font-weight:700}
@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}
  .banner{font-size:1.05em}.hud{flex-direction:row;gap:.6em;align-items:baseline;justify-content:center}}
.card{background:var(--lacquer-hi)}
.card .actions{background:var(--lacquer-hi)}