/* Screens for games built on shared/engine.js: stations (home), a problem (play), and results (done).
   Load after theme.css. */

/* HOME */
.hero p.lede a{color:var(--cyan)}
.zones{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.zone{
  text-align:left;display:grid;grid-template-columns:64px 1fr;gap:6px 14px;align-items:start;
  padding:18px;border:1.5px solid rgba(170,205,255,.28);border-radius:14px;background:var(--sheet);
  transition:transform .15s,border-color .15s,background .15s;
}
.zone:hover{transform:translateY(-3px);border-color:var(--gold);background:var(--sheet2)}
.zone svg.icon{grid-row:span 3;width:64px;height:64px}
.zone h3{font:800 21px/1.1 var(--display);margin:2px 0 0}
.zone p{margin:0;color:var(--dim);font-size:14.5px}
.zone .meta{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:10px;border-top:1px dashed rgba(170,205,255,.25)}
.zone .go{font:700 13px var(--mono);color:var(--gold);letter-spacing:.06em;text-transform:uppercase}
.zone .lock{grid-column:2;font:700 12px/1.3 var(--mono);color:var(--cyan)}
.zone.boss{border-color:rgba(255,201,60,.6);background:linear-gradient(135deg,#1b467a,#12365f)}
.stars{display:inline-flex;gap:3px}
.stars svg{width:20px;height:20px}
.star-on{fill:var(--gold)}.star-off{fill:none;stroke:rgba(170,205,255,.45);stroke-width:1.5}

/* PLAY */
.bar{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.ghost-btn{background:none;border:1.5px solid rgba(170,205,255,.35);border-radius:10px;padding:7px 12px;font:700 14px var(--mono)}
.ghost-btn:hover{border-color:var(--chalk)}
.bar-mid{flex:1;min-width:160px;display:grid;gap:6px}
.bar-mid .zn{font:800 18px var(--display)}
.track{height:10px;border-radius:99px;background:rgba(170,205,255,.18);overflow:hidden}
#prog{height:100%;width:0;background:var(--gold);border-radius:99px;transition:width .4s}
.bar-stats{display:flex;gap:8px}
.pill.hot{border-color:var(--gold);box-shadow:0 0 14px rgba(255,201,60,.45)}
.card{background:var(--sheet);border:1.5px solid rgba(170,205,255,.28);border-radius:16px;padding:22px clamp(16px,4vw,32px) 26px;display:grid;gap:16px}
#prompt{font:700 clamp(20px,3.4vw,26px)/1.3 var(--display);margin:0;text-wrap:balance}
.ans input{
  width:9.5em;max-width:100%;font:700 24px var(--mono);padding:10px 14px;border-radius:10px;
  border:2px solid rgba(170,205,255,.45);background:#0a2340;color:var(--chalk);font-variant-numeric:tabular-nums
}
.ans input.sm{width:4.2em;text-align:center}
.ans .colon{font:700 30px var(--mono);color:var(--gold)}
.ans .pairlab{display:grid;gap:2px;justify-items:center}
.ans .pairlab small{color:var(--dim);font:500 13px var(--mono)}
.tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.link-btn{background:none;border:1.5px dashed var(--cyan);color:var(--cyan);border-radius:10px;padding:7px 12px;font:700 14px var(--mono)}
.link-btn:disabled{opacity:.4;cursor:default}
.tapnote{color:var(--pink);font:700 14px var(--mono)}
.choices{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.choice{background:#0a2340;border:2px solid rgba(170,205,255,.4);border-radius:12px;padding:14px;font:700 19px var(--display);text-align:center}
.choice svg{display:block;width:100%;height:auto;max-height:120px}
.choices.stack .choice{text-align:left;font:700 16px/1.4 var(--mono);padding:12px 14px}
/* the problem's picture (#fig); tap problems mark .cand elements right or wrong */
.fig{background:rgba(9,32,61,.65);border-radius:12px;border:1px solid rgba(170,205,255,.18);padding:10px;overflow-x:auto}
.fig svg{display:block;width:100%;height:auto;max-height:420px;margin:0 auto}
.hintbox{border-left:4px solid var(--cyan);padding:8px 14px;background:rgba(127,227,255,.08);border-radius:0 10px 10px 0;color:#d6f6ff}
.fb ul{margin:0;padding-left:1.2em}
.fb .work{font-family:var(--mono);font-size:14.5px;color:var(--chalk)}
.fb .btn{justify-self:start;margin-top:4px}

/* DONE */
.done{text-align:center;display:grid;gap:14px;justify-items:center;padding:34px 16px}
.done .bigstars svg{width:64px;height:64px;animation:pop .5s backwards}
.done .bigstars svg:nth-child(2){animation-delay:.15s}.done .bigstars svg:nth-child(3){animation-delay:.3s}
@keyframes pop{from{transform:scale(0) rotate(-40deg)}}
.done h2{font:800 clamp(32px,6vw,48px)/1 var(--display);margin:0}
.done p{margin:0;color:var(--dim);max-width:44ch}
.done .row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
/* young readers (see theme.css): bigger answers and buttons, and a Read to me button above the problem */
.young #prompt{font-size:clamp(22px,4vw,28px)}
.young .choice{min-height:64px;font-size:22px}
.young .choices.stack .choice{font-size:18px}
.young .ans input{font-size:28px;width:6em}
.young .link-btn,.young .ghost-btn{padding:10px 16px;font-size:16px}
.young .tapnote{font-size:16px}
.card>.say{justify-self:start;margin:0}

@media (prefers-reduced-motion:reduce){
  .done .bigstars svg{animation:none}
  .zone{transition:none}
}