/* ==========================================================================
   Server-rendered content pages (activity, subject, grade, 404)
   ========================================================================== */

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--bg); padding: .6rem 1rem; border-radius: 0 0 var(--r) 0;
  font-family: var(--font-display); font-weight: 700;
}
.skip-link:focus { left: 0; }

.page-wrap { padding-block: 1.25rem 3rem; display: grid; gap: 2rem; }
.page-wrap > section { display: grid; gap: .9rem; }
.page-wrap h2 { margin: 0; }

/* ---------------- breadcrumbs ---------------- */

.crumbs ol {
  display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0;
  font-size: .87rem; color: var(--ink-2);
}
.crumbs li + li::before { content: '/'; margin-right: .4rem; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--lapis); text-decoration: underline; }

/* ---------------- activity page ---------------- */

.game-page { display: grid; gap: 2rem; }

.game-page-head {
  display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap;
  padding: 1.4rem 1.5rem; border-radius: var(--r-xl);
  background:
    radial-gradient(700px 320px at 88% 12%, color-mix(in srgb, var(--tile-color) 24%, transparent), transparent 62%),
    var(--surface);
  border: 1.5px solid var(--border-soft); box-shadow: var(--shadow-1);
}
.game-page-icon {
  font-size: 64px; line-height: 1; flex: none;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.18));
}
.game-page-head h1 { margin: 0 0 .15rem; font-size: clamp(1.9rem, 4.4vw, 2.8rem); }
.game-page-tagline { margin: 0 0 .6rem; color: var(--ink-2); font-size: 1.05rem; }
.game-page-meta { display: flex; gap: .35rem; flex-wrap: wrap; margin: 0; }
.game-page-meta a.chip { text-decoration: none; }
.game-page-meta a.chip:hover { background: var(--lapis-soft); color: var(--lapis); }

/* the embedded game surface */
.game-embed {
  position: relative; overflow: hidden;
  height: min(76vh, 700px); min-height: 460px;
  border-radius: var(--r-xl); border: 1.5px solid var(--border);
  background: var(--surface-2); box-shadow: var(--shadow-2);
}
.game-embed-cta {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: .8rem;
  text-align: center; padding: 1.5rem;
  background:
    radial-gradient(600px 300px at 50% 20%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 65%),
    var(--surface-2);
}
.game-embed-icon { font-size: 84px; line-height: 1; animation: bob 3.5s ease-in-out infinite; }
.game-embed-cta p { margin: 0; font-size: .9rem; }

/* When a game mounts, its shell fills the embed box instead of the viewport. */
.game-embed .game-shell { position: absolute; inset: 0; }

/* ...but once a game is actually running, the embed takes over the window.
   Boxed inside the article the student had two scrollbars to fight — the page
   itself and the stage inside the box — just to see the whole board, and the
   box only ever offered 76vh minus chrome for the board to live in. The start
   screen already covered the viewport, so this also makes the two consistent. */
html.game-live, body.game-live { overflow: hidden; height: 100%; }
body.game-live .game-embed {
  position: fixed; inset: 0; z-index: 60;
  height: auto; min-height: 0; max-height: none;
  border: 0; border-radius: 0; box-shadow: none;
}

/* ---------------- prose ---------------- */

.prose { display: grid; gap: .8rem; max-width: 74ch; }
.prose p { margin: 0; line-height: 1.7; }
.prose h2 { margin: 0; }

.howto-list { margin: 0; padding-left: 1.3rem; display: grid; gap: .5rem; line-height: 1.6; }
.howto-list li::marker { font-family: var(--font-display); font-weight: 800; color: var(--gold-deep); }

.skill-chips { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }

.faq { margin: 0; display: grid; gap: .3rem; }
.faq dt {
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  margin-top: .9rem; color: var(--ink);
}
.faq dt:first-child { margin-top: 0; }
.faq dd { margin: 0; color: var(--ink-2); line-height: 1.65; }

.lede { font-size: 1.05rem; color: var(--ink-2); line-height: 1.65; margin: .3rem 0 0; max-width: 68ch; }

/* ---------------- subject / grade headers ---------------- */

.subject-head {
  display: flex; gap: 1.2rem; align-items: flex-start; flex-wrap: wrap;
  padding: 1.5rem; border-radius: var(--r-xl);
  background:
    radial-gradient(700px 340px at 88% 10%, color-mix(in srgb, var(--tile-color) 22%, transparent), transparent 62%),
    var(--surface);
  border: 1.5px solid var(--border-soft); box-shadow: var(--shadow-1);
}
.subject-icon { font-size: 56px; line-height: 1; flex: none; }
.subject-head h1 { margin: 0; font-size: clamp(1.9rem, 4.4vw, 2.7rem); }

/* ---------------- ad slots ---------------- */

/*
 * Deliberately reserved height: an ad that appears after layout settles is the
 * classic cause of a bad CLS score, and CLS is a ranking signal.
 */
.ad-slot {
  display: block; width: 100%; min-height: 100px;
  margin: .5rem 0; padding: .5rem 0;
  background: var(--surface-2); border: 1px dashed var(--border-soft); border-radius: var(--r);
  overflow: hidden; text-align: center;
}
.ad-slot-label {
  display: block; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: .3rem; font-weight: 700;
}
.ad-slot ins { display: block; }
.ad-below-game { margin-top: 1rem; }
/* Never inside the play surface — see the README. */
.game-embed .ad-slot, .game-shell .ad-slot { display: none !important; }

@media (max-width: 720px) {
  .game-embed { height: min(70vh, 560px); min-height: 380px; }
  body.game-live .game-embed { height: auto; min-height: 0; }
  .game-page-icon { font-size: 48px; }
  .page-wrap { gap: 1.5rem; }
}

@media print {
  .ad-slot, .game-embed { display: none; }
}