/* Sprout's Starfield — the night-sky arcade game.
 *
 * Everything you see in the play area is drawn by the canvas in
 * js/sprouts-starfield.js. There are no pictures anywhere in this game.
 * This sheet only builds the frame around the canvas: the stage, the
 * overlay cards (start / paused / game over) and the thumb buttons a
 * child uses on a phone.
 */

.sf-room{
  max-width:1080px;
  margin:0 auto;
  padding:clamp(18px,4vw,38px) clamp(14px,4vw,28px) 56px;
}

.sf-intro{text-align:center;margin:0 auto clamp(14px,3vw,22px);max-width:60ch}
.sf-intro .eyebrow{
  font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin:0 0 .35rem;
}
.sf-intro h1{
  font-family:var(--serif);
  font-size:clamp(1.7rem,4.6vw,2.7rem);
  line-height:1.15;margin:0 0 .5rem;color:var(--gold-pale);
}
.sf-intro p{margin:0;color:var(--muted);font-size:clamp(.95rem,2.4vw,1.05rem)}

/* ---- the stage -------------------------------------------------- */
.sf-stage{
  position:relative;
  width:100%;
  max-width:min(560px, calc(72vh * 0.6667));
  aspect-ratio:2 / 3;
  margin:0 auto;
  border-radius:var(--radius);
  border:1px solid var(--glass-border);
  background:linear-gradient(180deg,#04100c,#071b16 60%,#0a2a20);
  box-shadow:var(--shadow), 0 0 0 6px rgba(210,173,100,.08);
  overflow:hidden;
  touch-action:none;
  isolation:isolate;
}

.sf-stage canvas{
  display:block;
  width:100%;
  height:100%;
  touch-action:none;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
}

/* ---- overlay cards ---------------------------------------------- */
.sf-overlay{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:.9rem;
  padding:clamp(16px,5%,34px);
  text-align:center;
  background:rgba(4,16,12,.82);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  z-index:3;
}
.sf-overlay[hidden]{display:none!important}

.sf-overlay h2{
  font-family:var(--serif);
  font-size:clamp(1.5rem,6.4vw,2.2rem);
  line-height:1.1;margin:0;color:var(--gold-pale);
}
.sf-overlay p{
  margin:0;max-width:34ch;
  color:var(--ink);opacity:.9;
  font-size:clamp(.9rem,3.4vw,1rem);line-height:1.55;
}
.sf-overlay .sf-small{font-size:.82rem;color:var(--muted);opacity:.85}
.sf-overlay .sf-tally{
  display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap;
  margin:.2rem 0 .1rem;
}
.sf-overlay .sf-tally div{min-width:74px}
.sf-overlay .sf-tally b{
  display:block;font-family:var(--serif);
  font-size:clamp(1.2rem,5vw,1.7rem);color:var(--gold);line-height:1.1;
}
.sf-overlay .sf-tally span{
  display:block;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}

.sf-btn{
  font-family:var(--sans);
  font-size:.82rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  padding:.78rem 1.5rem;
  border-radius:999px;
  border:1px solid var(--gold);
  background:linear-gradient(180deg,rgba(210,173,100,.28),rgba(210,173,100,.12));
  color:var(--gold-pale);
  cursor:pointer;
  transition:transform var(--speed), background var(--speed);
}
.sf-btn:hover{background:rgba(210,173,100,.34);transform:translateY(-2px)}
.sf-btn:active{transform:translateY(0)}
.sf-btn:focus-visible{outline:2px solid var(--gold-pale);outline-offset:3px}
.sf-btn.ghost{
  border-color:var(--glass-border);
  background:var(--glass-soft);
  color:var(--ink);
}

.sf-keys{
  list-style:none;margin:.2rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.4rem .8rem;justify-content:center;
  font-size:.76rem;color:var(--muted);
}
.sf-keys li b{color:var(--gold-pale);font-weight:700}

/* ---- thumb controls --------------------------------------------- */
.sf-pad{
  display:flex;
  align-items:center;justify-content:center;
  gap:.7rem;
  margin:14px auto 0;
  max-width:min(560px, calc(72vh * 0.6667));
}
.sf-pad button{
  flex:1 1 0;
  min-height:64px;
  border-radius:18px;
  border:1px solid var(--glass-border);
  background:var(--glass-soft);
  color:var(--gold-pale);
  font-family:var(--sans);
  font-size:.72rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:none;
  transition:background .15s ease, transform .15s ease;
}
.sf-pad button.is-down{background:rgba(210,173,100,.3);transform:scale(.97)}
.sf-pad .sf-fire{flex:1.4 1 0;border-color:var(--gold);background:rgba(210,173,100,.16)}
.sf-pad .sf-pause{flex:.7 1 0;font-size:.66rem}
.sf-pad .arrow{display:block;font-size:1.35rem;line-height:1;margin-bottom:.15rem}

/* ---- helper notes under the game -------------------------------- */
.sf-notes{
  max-width:min(560px, calc(72vh * 0.6667));
  margin:22px auto 0;
  padding:16px 18px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:var(--glass-soft);
}
.sf-notes h2{
  font-family:var(--serif);font-size:1.05rem;margin:0 0 .4rem;color:var(--gold-pale);
}
.sf-notes ul{margin:0;padding-left:1.1rem;color:var(--muted);font-size:.9rem;line-height:1.6}
.sf-notes li+li{margin-top:.25rem}

.sf-verse{
  text-align:center;max-width:44ch;margin:26px auto 0;
  font-family:var(--serif);font-size:1.02rem;color:var(--gold-pale);opacity:.9;
}
.sf-verse span{display:block;font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:.35rem}

@media (max-width:520px){
  .sf-stage{max-width:100%;max-height:none}
  .sf-pad,.sf-notes{max-width:100%}
}

@media (prefers-reduced-motion:reduce){
  .sf-btn,.sf-pad button{transition:none}
}