/* ==========================================================================
   LAYOUT: section scaffolding
   Each section's structural shape and spacing. Component appearance
   (buttons, the gate, etc.) lives in components.css, not here.
   ========================================================================== */

   .section {
    position: relative;
    width: 100%;
  }
  
  /* ---------- HERO ---------- */
  .section--hero {
    min-height: 100svh;
    display: grid;
    place-items: center;
    overflow: hidden;
  }
  
  #hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  
  .hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    pointer-events: none;
  }
  
  .hero__title {
    font-size: clamp(3rem, 12vw, 7rem);
    letter-spacing: 0.18em;
    color: var(--navy);
  }
  
  .hero__tagline {
    margin-top: var(--space-2);
    font-size: clamp(0.85rem, 2vw, 1.05rem);
    letter-spacing: 0.08em;
    color: var(--slate-1);
    max-width: none;
  }
  
  .scroll-cue {
    position: absolute;
    bottom: var(--space-4);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    color: var(--slate-2);
  }
  
  /* ---------- THE IDEA ---------- */
  .section--idea {
    padding-block: var(--space-7);
    background: var(--bg);
  }
  
  .idea__intro {
    text-align: center;
    margin-bottom: var(--space-5);
  }
  
  .idea__lead {
    font-size: clamp(1.2rem, 3vw, 1.7rem);
    font-weight: 700;
    color: var(--navy);
    max-width: 22ch;
    margin-inline: auto;
  }
  
  .idea__stage {
    position: relative;
    width: min(100%, 960px);
    margin-inline: auto;
    padding-inline: var(--space-3);
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--slate-3);
  }
  
  .idea__trigger {
    position: absolute;
    left: 50%;
    bottom: var(--space-3);
    transform: translateX(-50%);
    z-index: 2;
  }
  
  .idea__stage .player-dot {
    left: 14%;
    top: 50%;
  }
  
  .idea__stage .gate {
    left: 84%;
  }
  
  .idea__caption {
    margin-top: var(--space-2);
    text-align: center;
    min-height: 1.6em;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    color: var(--slate-1);
    max-width: none;
  }
  
  /* ---------- THE GAME ---------- */
  .section--game {
    padding-block: var(--space-7);
    background: #ffffff;
  }
  
  .game__intro {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--space-5);
    padding-inline: var(--space-3);
  }
  
  .game__intro h2 {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    margin-bottom: var(--space-2);
  }
  
  .game__intro p {
    color: var(--slate-1);
    margin-inline: auto;
  }
  
  .game__cover {
    display: block;
    width: min(100%, 560px);
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
    margin: var(--space-4) auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--slate-3);
  }
  
  .game__cta {
    text-align: center;
    margin-top: var(--space-4);
  }
  
  .game-embed {
    width: min(100%, 960px);
    margin: var(--space-5) auto 0;
    padding-inline: var(--space-3);
  }
  
  .game-embed__frame-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 2px solid var(--navy);
    background: #f0ede8;
  }
  
  #game-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
  
  .game-embed__placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--slate-1);
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    transition: opacity var(--duration-fade) ease;
  }
  
  .game-embed__placeholder.is-hidden {
    opacity: 0;
    pointer-events: none;
  }
  
  .game-embed__frame-wrap:fullscreen {
    border: none;
    border-radius: 0;
  }
  .game-embed__frame-wrap:fullscreen #game-frame {
    width: 100vw;
    height: 100vh;
  }
  
  .game-embed__toolbar {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-2);
  }
  
  /* ---------- CONTINUE ---------- */
  .section--continue {
    padding-block: var(--space-7);
    background: var(--navy);
    color: var(--bg);
  }
  
  .continue__inner {
    max-width: 480px;
    margin-inline: auto;
    text-align: center;
  }
  
  .continue__eyebrow {
    color: var(--slate-3);
    margin-bottom: var(--space-2);
  }
  
  .continue__title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    margin-bottom: var(--space-2);
  }
  
  .continue__sub {
    color: var(--slate-3);
    margin: 0 auto var(--space-4);
  }
  
  /* ---------- FOOTER ---------- */
  .footer {
    background: var(--navy);
    color: var(--slate-3);
    padding-block: var(--space-3);
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  
  .footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
  }
  
  .footer__links {
    display: flex;
    gap: var(--space-3);
  }
  
  .footer__links a {
    text-decoration: none;
    color: var(--slate-2);
  }
  
  .footer__links a:hover,
  .footer__links a:focus-visible {
    color: var(--bg);
  }
  
  /* Same breakpoint and value as .container's own padding bump, kept
     consistent rather than introducing a new pattern for these three. */
  @media (min-width: 768px) {
    .idea__stage,
    .game__intro,
    .game-embed {
      padding-inline: var(--space-4);
    }
  }