/* ============================================================
   THREE BABY BIRDIES — Chirpy's First Flight
   css/game.css — loaded by game.html and index.html (modal)

   Everything the game module renders is prefixed .cf-, so the same
   stylesheet serves the standalone page and the homepage modal.
   ============================================================ */

/* ---- Stage ---- */
.cf-stage {
  position:relative; width:100%; aspect-ratio:420/640;
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sh-lg); border:4px solid #fff;
  background:var(--sky-light);
}
.cf-canvas { display:block; width:100%; height:100%; touch-action:manipulation; }
.cf-canvas:focus-visible { outline:3px solid var(--yellow); outline-offset:-3px; }

.cf-panel {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(44,24,16,.42);
}
.cf-panel[hidden] { display:none; }

.cf-card {
  background:var(--cream); border-radius:var(--r-lg);
  padding:24px 22px; max-width:290px; width:100%;
  box-shadow:var(--sh-md); text-align:center;
}
.cf-card .btn { width:100%; justify-content:center; }
.cf-bird { display:block; width:96px; margin:0 auto 10px; }
.cf-rhyme {
  font-family:var(--font-display); font-weight:600; font-size:.88rem;
  color:var(--sky-dark); line-height:1.5; margin-bottom:16px;
}
.cf-title { font-family:var(--font-display); font-size:1.25rem; color:var(--dark); margin-bottom:6px; }
.cf-msg   { font-size:.88rem; color:var(--mid); margin-bottom:16px; line-height:1.5; }

.cf-scores { display:flex; gap:14px; justify-content:center; margin-bottom:18px; }
.cf-score {
  background:var(--sky-xlight); border-radius:var(--r-md);
  padding:10px 16px; min-width:84px;
}
.cf-n {
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:1.6rem; color:var(--dark); line-height:1; font-variant-numeric:tabular-nums;
}
.cf-k {
  display:block; font-family:var(--font-display); font-weight:700; font-size:.6rem;
  letter-spacing:.11em; text-transform:uppercase; color:var(--light-text); margin-top:5px;
}

.cf-speed { display:flex; gap:8px; justify-content:center; margin-top:14px; }
.cf-sound-btn {
  display:inline-flex; align-items:center; gap:7px;
  border:2px solid var(--cream-dark); background:#fff; color:var(--mid);
  border-radius:var(--r-full); padding:6px 14px;
  font-family:var(--font-display); font-weight:700; font-size:.78rem;
  transition:border-color .18s, background .18s, color .18s;
}
.cf-sound-btn .ic { width:15px; height:15px; }
.cf-sound-btn:hover { border-color:var(--teal); }
.cf-sound-btn[aria-pressed="true"] { background:var(--teal); border-color:var(--teal); color:#fff; }
.cf-sound-btn[hidden] { display:none; }
.cf-speed-btn {
  border:2px solid var(--cream-dark); background:#fff; color:var(--mid);
  border-radius:var(--r-full); padding:6px 16px;
  font-family:var(--font-display); font-weight:700; font-size:.78rem;
  transition:border-color .18s, background .18s, color .18s;
}
.cf-speed-btn:hover { border-color:var(--sky); }
.cf-speed-btn[aria-pressed="true"] { background:var(--sky); border-color:var(--sky); color:#fff; }
.cf-speed-btn:focus-visible { outline:3px solid var(--yellow); outline-offset:2px; }

.cf-hud {
  position:absolute; top:14px; left:0; right:0; text-align:center;
  font-family:var(--font-display); font-weight:700; font-size:2.3rem;
  color:#fff; text-shadow:0 3px 0 rgba(44,24,16,.28);
  pointer-events:none; font-variant-numeric:tabular-nums;
}
.cf-hint {
  position:absolute; left:0; right:0; bottom:20px; text-align:center;
  font-family:var(--font-display); font-weight:700; font-size:.8rem;
  color:#fff; text-shadow:0 2px 6px rgba(44,24,16,.5); pointer-events:none;
}
.cf-hud[hidden], .cf-hint[hidden] { display:none; }

.cf-sr {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ============================================================
   Modal host (homepage)
   ============================================================ */
.cf-modal {
  position:fixed; inset:0; z-index:2000;
  display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(44,24,16,.62);
  animation:cf-fade .18s ease;
}
.cf-modal[hidden] { display:none; }
@keyframes cf-fade { from { opacity:0; } to { opacity:1; } }

.cf-modal-inner {
  position:relative;
  width:min(420px, 100%);
  max-height:calc(100vh - 40px);
  display:flex; flex-direction:column; gap:12px;
}
/* The stage is the tall element; cap it so the whole board stays on
   screen on short windows instead of running under the fold. */
.cf-modal .cf-stage { max-height:calc(100vh - 108px); aspect-ratio:420/640; margin:0 auto; }

.cf-modal-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.cf-modal-title {
  font-family:var(--font-display); font-weight:700; font-size:1rem; color:#fff;
  display:flex; align-items:center; gap:8px;
}
.cf-close {
  background:rgba(255,255,255,.16); color:#fff; border:none;
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  font-size:1.1rem; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:background .18s;
}
.cf-close:hover { background:rgba(255,255,255,.3); }
.cf-close:focus-visible { outline:3px solid var(--yellow); outline-offset:2px; }
.cf-modal-foot { text-align:center; }
.cf-modal-foot a { color:rgba(255,255,255,.8); font-size:.78rem; text-decoration:underline; }
.cf-modal-foot a:hover { color:#fff; }

body.cf-locked { overflow:hidden; }

/* ============================================================
   Homepage teaser card
   ============================================================ */
.game-banner {
  display:grid; grid-template-columns:minmax(0,340px) 1fr; gap:var(--sp-lg);
  align-items:center;
  background:linear-gradient(135deg,var(--sky-xlight) 0%,var(--sky-light) 100%);
  border-radius:var(--r-lg); padding:44px var(--sp-lg);
}
/* The art panel is the game's own sky. Chirpy is the full character now,
   cut from the illustrations the client supplied, in the pose the notes
   asked for: wings out, about to go. */
.game-banner-art {
  position:relative; height:320px; border-radius:var(--r-md);
  background:linear-gradient(180deg,#5FA8CC 0%,#9FD3EC 60%,#CDE9F7 100%);
  display:flex; align-items:flex-end; justify-content:center; overflow:hidden;
}
.gb-chirpy {
  position:relative; z-index:2; width:250px; margin-bottom:26px;
  filter:drop-shadow(0 14px 24px rgba(20,60,80,.32));
  transition:transform .35s cubic-bezier(.3,1.4,.5,1);
}
.game-banner:hover .gb-chirpy { transform:translateY(-14px) rotate(-4deg); }
.gb-cloud { position:absolute; background:rgba(255,255,255,.85); border-radius:var(--r-full); }
.gb-cloud::before, .gb-cloud::after {
  content:''; position:absolute; background:inherit; border-radius:50%;
}
.gb-cloud-a { width:86px; height:26px; top:34px;  left:16px; }
.gb-cloud-a::before { width:38px; height:38px; top:-17px; left:16px; }
.gb-cloud-a::after  { width:26px; height:26px; top:-11px; left:48px; }
.gb-cloud-b { width:64px; height:20px; top:86px;  right:22px; opacity:.8; }
.gb-cloud-b::before { width:30px; height:30px; top:-14px; left:12px; }
.gb-cloud-c { width:50px; height:16px; top:18px;  right:64px; opacity:.6; }
.gb-cloud-c::before { width:24px; height:24px; top:-11px; left:10px; }
/* A branch is wood, so this one keeps the brown. */
.gb-branch { position:absolute; width:34px; background:var(--brown); border-radius:10px; z-index:1; }
.gb-branch-a { right:26px; top:-10px;    height:74px; }
.gb-branch-b { right:26px; bottom:-10px; height:96px; }

.game-banner-copy { min-width:0; }
.game-banner-h { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.game-banner-h .ic { color:var(--sky-dark); }
.game-cta-row { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.game-free-tag {
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-display); font-weight:700; font-size:.92rem;
  color:var(--green); background:var(--green-light);
  border:1.5px solid #B4D6AF; border-radius:var(--r-full); padding:8px 16px;
}
.game-free-tag .ic { width:17px; height:17px; }

@media(max-width:860px){
  .game-banner { grid-template-columns:1fr; gap:var(--sp-md); padding:var(--sp-md); text-align:center; }
  .game-banner p { margin-left:auto; margin-right:auto; }
  .game-banner-h, .game-cta-row, .game-banner .kid-badges { justify-content:center; }
  .game-banner-art { height:230px; }
  .game-cta-row .btn-game { width:100%; justify-content:center; }
}

@media (prefers-reduced-motion: reduce) {
  .cf-modal { animation:none; }
  .game-banner-art .float { animation:none; }
  .game-banner:hover .gb-chirpy { transform:none; }
}