/* Lesson player. Every colour comes from the site tokens (css/site.css), so the chrome follows the
   light/dark toggle (redesign phase R3). The 3D scene behind the overlays is bright by day and dark at
   night, so text that sits on the stage never relies on it: each overlay brings its own backing
   (#caption, #start .stage-card, #locked .stage-card), built from --bg so it stays low glare by day. */
.player{position:relative;height:100%;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);overflow:hidden;
  /* glass over the 3D scene: mostly opaque so text keeps AA contrast over any pixel behind it */
  --glass:color-mix(in srgb,var(--bg) 94%,transparent);
  --glass-caption:color-mix(in srgb,var(--bg) 86%,transparent);
  --scrim:color-mix(in srgb,var(--bg) 40%,transparent);
  --scrim-strong:color-mix(in srgb,var(--bg) 66%,transparent)}
#stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;background:var(--bg)}
#frame{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--surface-2);box-shadow:var(--shadow-lift)}
#gl,#hud{position:absolute;left:0;top:0;display:block}

/* captions: a small panel at the bottom centre, as wide as its text */
#caption{position:absolute;left:50%;transform:translateX(-50%);bottom:22px;width:max-content;max-width:min(1100px,92%);padding:11px 22px;
  background:var(--bg);background:var(--glass-caption);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-soft);font-size:clamp(15px,1.4vw,21px);line-height:1.45;text-align:center;text-wrap:balance;
  -webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px);transition:opacity .35s;pointer-events:none}
#caption:empty{opacity:0}

/* landing page hero (?hero=1): the drawing only */
body.hero #bar,body.hero #prog,body.hero #caption,body.hero #start,body.hero #locked,body.hero #pgCta{display:none !important}
body.hero #frame{border-radius:0;box-shadow:none}

/* progress line and control bar */
#prog{height:3px;background:var(--accent);width:0;flex:none}
#bar{flex:none;height:60px;display:flex;align-items:center;gap:10px;padding:0 14px;background:var(--surface);border-top:1px solid var(--line);overflow-x:auto}
#bar .grow{flex:1}
#bar label.toggle{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:15px;color:var(--ink);white-space:nowrap;cursor:pointer;padding:0 4px}
#bar label.toggle input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent);cursor:pointer}
#bar label.toggle select{background:var(--field-bg);color:var(--ink);border:1px solid var(--field-line);border-radius:8px;padding:7px 8px;font:inherit;font-weight:600}

/* start and locked screens: a light scrim over the scene and one centred card that carries the text */
#start,#locked{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;overflow:auto}
#start{z-index:5;background:var(--scrim)}
#locked{z-index:4;background:var(--scrim-strong);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#start.hidden,#locked.hidden{display:none}
.stage-card{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;width:min(760px,100%);max-height:100%;overflow:auto;
  padding:clamp(22px,3.4vw,44px) clamp(20px,3.6vw,48px);background:var(--bg);background:var(--glass);color:var(--ink);
  border:1px solid var(--line);border-radius:calc(var(--radius) + 6px);box-shadow:var(--shadow-lift);
  -webkit-backdrop-filter:saturate(1.2) blur(14px);backdrop-filter:saturate(1.2) blur(14px)}
#start h1{font-size:clamp(28px,3.6vw,50px);margin:0;color:var(--ink)}
#start p{color:var(--muted);max-width:620px;font-size:18px;margin:0;line-height:1.5}
#start p.small{font-size:14px}
#start #bStart{font-size:21px;padding:16px 36px;background:var(--btn-violet);border-radius:var(--radius);
  box-shadow:0 12px 28px -10px color-mix(in srgb,var(--btn-violet) 70%,transparent)}
#locked h2{margin:0;font-size:clamp(24px,3vw,38px);color:var(--ink)}
#locked p{margin:0;color:var(--muted);max-width:620px;font-size:18px;line-height:1.5}
#locked .row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* call to action over the last scene (a solid amber button, readable on any scene) */
#pgCta{position:absolute;left:50%;top:56%;transform:translateX(-50%);display:none;font-size:clamp(16px,2vw,26px);padding:16px 34px;border-radius:var(--radius);
  box-shadow:0 12px 28px -10px color-mix(in srgb,var(--amber) 70%,transparent),var(--shadow-soft);z-index:3}
#pgCta.show{display:block}