/* ---------- stages / crossfade ---------- */
.stage{
  position:fixed; top:0; right:0; bottom:0; left:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  opacity:0; transition:opacity 1.6s ease;
  padding:7vmin 6vmin;
}
.stage.visible{ opacity:1; }
/* Colocated with .stage (rather than base.css) on purpose: base.css loads
   first, so a reduced-motion override placed there would be cascade-
   shadowed by the unconditional .stage transition rule above, which loads
   after it. Keeping both rules in source order in the same file guarantees
   this override actually wins. */
@media (prefers-reduced-motion: reduce){
  .stage{ transition:opacity 0.2s linear; }
}

.eyebrow{
  font-family:var(--utility); font-weight:400;
  font-size:1.7vmin; letter-spacing:0.42em; text-transform:uppercase;
  color:var(--brass); text-align:center;
  margin-bottom:4.5vmin;
}
.eyebrow .dim{ color:var(--smoke); }

.caption{
  margin-top:4.5vmin; text-align:center; max-width:110vmin;
}
.caption .lede{
  font-family:var(--display); font-weight:400;
  font-size:3.4vmin; line-height:1.45; color:var(--vellum);
}
.caption .sub{
  margin-top:1.6vmin;
  font-family:var(--utility); font-weight:300;
  font-size:2vmin; letter-spacing:0.06em; color:var(--smoke);
}

/* ---------- concept card ---------- */
.concept-title{
  font-family:var(--display); font-weight:500;
  font-size:11vmin; line-height:1.05; text-align:center;
  letter-spacing:0.01em; max-width:150vmin;
}
.concept-rule{
  width:9vmin; height:1px; background:var(--brass); opacity:0.7;
  margin:4vmin auto;
}
.concept-body{
  font-family:var(--display); font-weight:400;
  font-size:3.6vmin; line-height:1.55; text-align:center;
  color:var(--vellum); max-width:118vmin;
}
.concept-body em{ color:var(--brass); font-style:italic; }

/* ---------- chess ---------- */
.board{
  display:grid;
  grid-template-columns:repeat(8, 1fr);
  grid-template-rows:repeat(8, 1fr);
  width:56vmin; height:56vmin;
  border:1px solid rgba(198,161,91,0.5);
  box-shadow:0 0 12vmin rgba(0,0,0,0.6);
}
.sq{ display:flex; align-items:center; justify-content:center; position:relative; }
.sq.light{ background:var(--board-light); }
.sq.dark{ background:var(--board-dark); }
.sq .coord{
  position:absolute; font-family:var(--utility); font-weight:400;
  font-size:1.35vmin; letter-spacing:0.05em; color:rgba(234,227,210,0.35);
}
.sq .coord.file{ right:0.5vmin; bottom:0.3vmin; }
.sq .coord.rank{ left:0.5vmin; top:0.3vmin; }
.pc{
  font-family:var(--pieces);
  font-size:5.6vmin; line-height:1;
  user-select:none;
}
.pc.w{ color:#EFE8D8; text-shadow:0 0 2px rgba(0,0,0,0.9), 0 1px 2px rgba(0,0,0,0.7); }
.pc.b{ color:#14110D; text-shadow:0 0 2px rgba(234,227,210,0.5); }

/* Gilded wash marking a key square. ::before is the first painted child, so
   it sits under the piece glyph and coord labels (both later in DOM order)
   rather than obscuring them, on light or dark squares alike. */
.sq.mark::before{
  content:'';
  position:absolute;
  top:0.6vmin; right:0.6vmin; bottom:0.6vmin; left:0.6vmin;
  border-radius:0.4vmin;
  background:rgba(198,161,91,0.24);
  border:0.18vmin solid rgba(198,161,91,0.8);
  box-shadow:0 0 1vmin rgba(198,161,91,0.35);
}

.solution{
  opacity:0; transition:opacity 1.4s ease;
  color:var(--brass); font-family:var(--display);
  font-size:3.2vmin; letter-spacing:0.04em; margin-top:1.4vmin;
}
.solution.shown{ opacity:1; }

/* ---------- ambient ---------- */
.ambient-canvas{
  position:fixed; top:0; right:0; bottom:0; left:0; z-index:1;
  /* Internal resolution is halved in ambient.js for GPU headroom; this
     forces the CSS box back to full-screen (canvas is inline-replaced by
     default, so top/right/bottom/left alone won't stretch it). */
  width:100%; height:100%;
}
.ambient-word{
  position:relative; z-index:2;
  font-family:var(--display); font-weight:400;
  font-size:4vmin; letter-spacing:0.5em; text-transform:lowercase;
  color:rgba(234,227,210,0.55); text-align:center;
  padding-left:0.5em; /* balance letter-spacing */
}