/* ============================================================
   Solver Society — live hero stage
   The studio, board and day cards are real HTML/CSS, not a picture.
   Nothing here needs re-exporting when the week changes.
   ============================================================ */

.stage{
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(18px,3vw,34px) 0 0;
  background:#061B31;
}

/* ---------- the room ---------- */
.stage-room{position:absolute;inset:0;z-index:0;pointer-events:none}
.stage-room .wall{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 78% at 50% -8%, rgba(38,150,255,.34), transparent 62%),
    linear-gradient(180deg,#0A2A47 0%,#071D33 58%,#050F1D 100%);
}
.stage-room .arch{
  position:absolute; left:50%; top:-8%; width:min(1180px,92%); height:118%;
  transform:translateX(-50%);
  border-radius:50% 50% 0 0 / 26% 26% 0 0;
  background:radial-gradient(60% 46% at 50% 0%, rgba(64,190,255,.20), transparent 70%);
  box-shadow:0 0 90px 12px rgba(38,150,255,.16) inset;
}
.stage-room .rail{
  position:absolute; top:6%; bottom:20%; width:3px; border-radius:3px;
  background:linear-gradient(180deg,transparent,#3FD5EC 18%,#3FD5EC 82%,transparent);
  box-shadow:0 0 18px 3px rgba(63,213,236,.5);
  opacity:.85;
}
.stage-room .rail-l{left:1.6%} .stage-room .rail-r{right:1.6%}
.stage-room .floor{
  position:absolute; left:0; right:0; bottom:0; height:26%;
  background:linear-gradient(180deg,rgba(8,26,46,0),rgba(4,12,22,.92));
  border-top:1px solid rgba(120,205,255,.16);
}
.stage-room .floor::after{
  content:""; position:absolute; left:50%; bottom:14%; transform:translateX(-50%);
  width:min(1080px,86%); height:42%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(63,213,236,.20), transparent 72%);
  filter:blur(2px);
}

/* faint chalk equations on the walls */
.stage-eq{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.stage-eq span{
  position:absolute; font-family:"Inter Tight",system-ui,sans-serif;
  color:rgba(150,205,255,.20); font-weight:600; white-space:nowrap;
  font-size:clamp(13px,1.35vw,25px);
}

/* ---------- brand plaque ---------- */
.stage-plaque{
  position:relative; z-index:3; width:max-content; max-width:92%;
  margin:0 auto clamp(14px,2.2vw,26px);
  padding:clamp(10px,1.5vw,16px) clamp(20px,3vw,38px);
  text-align:center; border-radius:16px;
  background:linear-gradient(180deg,rgba(10,42,74,.92),rgba(6,24,44,.92));
  border:1px solid rgba(96,207,255,.42);
  box-shadow:0 0 34px rgba(38,150,255,.24), inset 0 1px 0 rgba(255,255,255,.10);
}
.stage-plaque b{
  display:block; font-family:"Inter Tight",system-ui,sans-serif;
  font-size:clamp(19px,3vw,36px); font-weight:900; letter-spacing:.10em;
  color:#EAF6FB; text-transform:uppercase; line-height:1;
}
.stage-plaque small{
  display:block; margin-top:7px; color:#8CE0A8;
  font-size:clamp(9px,1.05vw,13px); font-weight:800;
  letter-spacing:.20em; text-transform:uppercase;
}

/* ---------- characters ---------- */
.stage-char{
  position:absolute; bottom:0; z-index:2; height:auto; pointer-events:none;
  filter:drop-shadow(0 24px 26px rgba(0,0,0,.55));
}
.stage-char-l{left:1%;  width:clamp(120px,15vw,250px)}
.stage-char-r{right:1%; width:clamp(115px,14.5vw,240px)}
.stage-plinth{
  position:absolute; bottom:0; left:2.2%; z-index:1; width:clamp(96px,12vw,200px);
  height:clamp(30px,4vw,66px); border-radius:6px;
  background:linear-gradient(180deg,#0E3252,#071C31);
  border:1px solid rgba(120,205,255,.22);
  box-shadow:0 -2px 26px rgba(63,213,236,.20);
}

/* ---------- the green board ---------- */
.stage-board{
  position:relative; z-index:3;
  width:min(920px, calc(100% - clamp(150px,26vw,470px)));
  margin:0 auto; padding:clamp(20px,2.6vw,38px) clamp(18px,2.6vw,40px) clamp(22px,2.8vw,34px);
  border-radius:clamp(16px,1.7vw,26px);
  background:linear-gradient(160deg,#245239 0%,#1B4430 52%,#15382A 100%);
  border:1px solid rgba(150,230,180,.26);
  box-shadow:0 34px 70px -28px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.07);
}
.board-pill{
  /* align-self keeps the pill hugging its text: inside the flex column of
     .stage-board the default stretch would blow it across the whole board. */
  display:inline-block; align-self:flex-start; width:max-content; max-width:100%;
  padding:6px 14px; border-radius:999px;
  background:#A8E6B4; color:#0C2A18;
  font-size:clamp(10px,1.05vw,13px); font-weight:900;
  letter-spacing:.13em; text-transform:uppercase;
}
.stage-board h1{
  margin:clamp(12px,1.6vw,18px) 0 clamp(8px,1vw,12px);
  font-family:"Inter Tight",system-ui,sans-serif;
  font-size:clamp(25px,4.15vw,58px); font-weight:900; line-height:1.02;
  letter-spacing:-.028em; color:#FFFFFF; text-wrap:balance;
}
.board-sub{margin:0; color:#CFE6D6; font-size:clamp(13px,1.32vw,18px); line-height:1.5}

/* ---------- day cards ---------- */
.day-row{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  grid-auto-rows:1fr;
  gap:clamp(7px,.85vw,13px); margin:clamp(16px,2vw,26px) 0 0;
  padding:0; list-style:none;
}
.day{
  display:flex; flex-direction:column; gap:5px; min-width:0;
  padding:clamp(9px,1.05vw,15px); border-radius:clamp(9px,.95vw,14px);
  background:rgba(9,32,22,.55); border:1px solid rgba(255,255,255,.07);
}
.day .dow{
  font-size:clamp(8.5px,.86vw,11.5px); font-weight:900; letter-spacing:.15em;
  text-transform:uppercase; color:#8FBFA2;
}
.day .topic{
  font-size:clamp(10.5px,1.06vw,14.5px); font-weight:700; line-height:1.26;
  color:#DCEFE2; overflow-wrap:break-word;
}
.day .state{margin-top:auto; padding-top:6px; font-size:clamp(9px,.92vw,12px); color:#7FA48D}

/* linked day cards — a released day opens its lesson. The anchor takes over
   the card's column layout so the whole tile is the hit area, not just the
   words. Locked days render the same spans with no anchor at all. */
.day.is-linked{transition:transform .18s ease, border-color .18s ease, background-color .18s ease}
.day-link{
  display:flex; flex-direction:column; gap:5px; flex:1 1 auto; min-width:0;
  color:inherit; text-decoration:none;
}
.day.is-linked:hover{transform:translateY(-2px); border-color:rgba(168,230,180,.55)}
.day.is-linked:hover .topic{text-decoration:underline; text-underline-offset:3px}
.day.is-boss.is-linked:hover{border-color:rgba(240,180,60,.75)}
.day-link:focus-visible{outline:2px solid #A8E6B4; outline-offset:3px; border-radius:6px}
@media (prefers-reduced-motion: reduce){
  .day.is-linked{transition:none}
  .day.is-linked:hover{transform:none}
}

/* today */
.day.is-today{background:rgba(16,58,38,.9); border-color:#7FE0A0; box-shadow:0 0 0 1px rgba(127,224,160,.35)}
.day.is-today .dow{color:#BFF3D0}
.day.is-today .topic{color:#FFFFFF}
.day.is-today .state{
  display:inline-flex; align-items:center; gap:5px; align-self:flex-start;
  margin-top:auto; padding:4px 10px; border-radius:999px;
  background:#A8E6B4; color:#0C2A18; font-weight:900; letter-spacing:.06em;
}
/* already released */
.day.is-open .state{color:#A8E6B4; font-weight:700}
/* friday boss prep */
.day.is-boss{background:rgba(38,28,8,.72); border-color:rgba(240,180,60,.5)}
.day.is-boss .dow{color:#F0B43C}
.day.is-boss .topic{color:#F8E6BE}
.day.is-boss .state{color:#E0A93A; font-weight:800}

/* ---------- calls to action ---------- */
.board-cta{display:flex; flex-wrap:wrap; align-items:center; gap:clamp(8px,1vw,13px); margin-top:clamp(16px,2vw,26px)}
.board-cta a{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:12px clamp(15px,1.7vw,24px); border-radius:12px;
  font-weight:900; font-size:clamp(13px,1.15vw,16px); text-decoration:none;
  transition:transform .16s ease, box-shadow .16s ease;
}
.btn-go{background:#A8E6B4; color:#0C2A18; border:1px solid rgba(255,255,255,.4)}
.btn-alt{background:rgba(6,24,18,.82); color:#EAF6FB; border:1px solid rgba(255,255,255,.20)}
.board-cta a:hover,.board-cta a:focus-visible{transform:translateY(-1px); box-shadow:0 10px 24px -10px rgba(0,0,0,.7)}
.board-cta a:focus-visible{outline:3px solid #FFEA00; outline-offset:3px}
.board-free{
  display:inline-flex; align-items:center; gap:7px; padding:10px 15px; border-radius:12px;
  background:rgba(9,32,22,.5); border:1px solid rgba(168,230,180,.28);
  color:#BFE3C9; font-size:clamp(11px,1vw,14px); font-weight:600;
}
.board-free b{color:#A8E6B4}
.board-note{margin:clamp(12px,1.5vw,18px) 0 0; color:#9FC2AC; font-size:clamp(11px,1.02vw,14px); line-height:1.5}

/* ---------- responsive ---------- */
@media(max-width:1100px){
  .stage-board{width:min(880px, calc(100% - clamp(120px,22vw,330px)))}
}
@media(max-width:900px){
  /* characters step aside; the board takes the full width */
  .stage-board{width:calc(100% - 32px)}
  .stage-char-l,.stage-char-r{opacity:.30; z-index:1}
  .stage-char-l{width:clamp(96px,16vw,150px)}
  .stage-char-r{width:clamp(92px,15vw,145px)}
  .day-row{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:620px){
  .stage{padding-top:14px}
  .stage-char-l,.stage-char-r,.stage-plinth{display:none}
  .stage-board{width:calc(100% - 22px); padding:20px 17px 22px}
  .day-row{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
  .board-cta a{flex:1 1 100%}
  .board-free{flex:1 1 100%; justify-content:center}
  .stage-eq{display:none}
}
@media(prefers-reduced-motion:reduce){
  .board-cta a{transition:none}
}

/* ============================================================
   RENDERED STUDIO BACKDROP  (class="hero stage has-backdrop")
   ------------------------------------------------------------
   The studio WITHOUT the green board and WITHOUT any text — room,
   lighting, plaque, plinth and both characters only, middle left clear:
       assets/stage-backdrop.webp      1672 x 941
   DESKTOP ONLY. There is deliberately no phone version: a 16:9 render
   cropped to a portrait viewport shows only the empty middle. See the
   max-width:900px block at the foot of this file.

   The board occupies x 390..1282 of 1672, y 193..784 of 941 — that is
   left 23.3%, top 20.5%, width 53.4%, height 62.8%, which is what the
   rules below actually set. (An earlier note in DEPLOY_README.md quotes
   x 399..1261; that figure is stale — these percentages are the truth.)
   Every size inside the board is expressed in cqw, a share of the hero's
   own width, so the whole board scales as one piece exactly like the
   picture did, leaving the floor visible beneath it.

   To replace the artwork later, overwrite stage-backdrop.webp at the
   same 1672 x 941 and keep that middle region clear. No code changes.
   ============================================================ */
/* DESKTOP ONLY — see the note in the max-width:900px block at the end of this
   file for why the backdrop is not used on phones. */
@media(min-width:901px){
.stage.has-backdrop .stage-room .wall{
  background-image:url("/assets/stage-backdrop.webp");
  background-size:100% 100%; background-position:center top; background-repeat:no-repeat;
}
/* the render already contains these */
.stage.has-backdrop .stage-room .arch,
.stage.has-backdrop .stage-room .rail,
.stage.has-backdrop .stage-room .floor,
.stage.has-backdrop .stage-eq,
.stage.has-backdrop .stage-plaque,
.stage.has-backdrop .stage-char,
.stage.has-backdrop .stage-plinth{display:none}

/* lighting, so the board sits in the room rather than on it */
.stage.has-backdrop .stage-board{
  border:1px solid rgba(178,240,205,.34);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05),
    0 0 34px rgba(150,240,190,.20),
    0 0 96px rgba(40,160,255,.20),
    0 40px 90px -34px rgba(0,0,0,.85),
    inset 0 1px 0 rgba(255,255,255,.10);
}
.stage.has-backdrop .stage-board::before{
  content:""; position:absolute; inset:-9% -6%; z-index:-1; border-radius:inherit;
  background:radial-gradient(60% 55% at 50% 42%, rgba(120,235,175,.20), transparent 72%);
  filter:blur(26px); pointer-events:none;
}
}
/* end DESKTOP ONLY */

@media(min-width:901px){
  .stage.has-backdrop{aspect-ratio:1672/941; padding:0; container-type:inline-size}

  .stage.has-backdrop .stage-board{
    position:absolute; left:23.3%; top:20.5%;
    width:53.4%; height:62.8%; margin:0;
    display:flex; flex-direction:column; justify-content:center;
    padding:2.0cqw 2.3cqw;
    border-radius:1.5cqw;
  }
  /* every measurement below is a share of the hero width, so the board
     keeps its proportions instead of growing as the screen narrows */
  .stage.has-backdrop .board-pill{font-size:.78cqw; padding:.36cqw .84cqw}
  .stage.has-backdrop .stage-board h1{font-size:3.45cqw; margin:1.1cqw 0 .65cqw}
  .stage.has-backdrop .board-sub{font-size:1.14cqw}
  .stage.has-backdrop .day-row{margin-top:1.5cqw; gap:.78cqw}
  .stage.has-backdrop .day{padding:.95cqw; border-radius:.65cqw; gap:.34cqw}
  .stage.has-backdrop .day-link{gap:.34cqw}
  .stage.has-backdrop .day .dow{font-size:.64cqw}
  .stage.has-backdrop .day .topic{font-size:.93cqw}
  .stage.has-backdrop .day .state{font-size:.66cqw; padding-top:.34cqw}
  .stage.has-backdrop .day.is-today .state{padding:.24cqw .6cqw}
  .stage.has-backdrop .board-cta{margin-top:1.5cqw; gap:.68cqw}
  .stage.has-backdrop .board-cta a{
    min-height:2.8cqw; padding:.7cqw 1.4cqw; font-size:.97cqw; border-radius:.75cqw}
  .stage.has-backdrop .board-free{
    padding:.5cqw .8cqw; font-size:.74cqw; border-radius:.7cqw; gap:.4cqw}
  .stage.has-backdrop .board-note{margin-top:1.1cqw; font-size:.8cqw}
}

@media(max-width:900px){
  /* NO BACKDROP ON PHONES — deliberate.
     The backdrop is a 16:9 studio render. A phone viewport is far taller than
     it is wide, so `cover` scales the picture until its HEIGHT fits and then
     crops the sides: on a 375px screen only the middle ~30% survives, and that
     middle is the empty wall the board sits on. Bandit, Sunny, the plaque and
     the arch all fall outside the crop, so the hero became a blank blue panel.

     Below 901px we therefore leave `has-backdrop` doing nothing at all and let
     the CSS-drawn room render exactly as it does without the class — which is
     the mobile layout that was already working. If a phone backdrop is ever
     wanted, it needs its own portrait crop, not this one scaled down. */
  .stage.has-backdrop .stage-board{margin-top:clamp(26px,9vw,70px)}
}