/* The item page's play area and pop-up — see play.js. Tokens from styles.css only; radius 8 / 12 / 16
   (docs/DESIGN.md §3); logical directions throughout. */

/* The player before it plays — one box the width of the page, like a video that has not started:
   the cover, blurred and half-transparent over a dark ground, and one button in the middle. The dark
   is the site's own ink, not a grey of its own; the blur says "not started" without a word, and the
   sharp cover is already on the library row that led here. */
.play{position:relative;margin:32px 0 0}
.playcover{position:relative;display:block;aspect-ratio:16/9;max-height:72vh;width:100%;overflow:hidden;
  border-radius:var(--r);background:var(--ink);cursor:pointer;
  box-shadow:0 24px 60px -40px rgba(20,15,10,.5);text-decoration:none;color:inherit}
.playbg{position:absolute;inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);object-fit:cover;
  filter:blur(18px);opacity:.34;transition:opacity .4s ease,transform .6s ease}
/* On hover the picture barely brightens and drifts in a little — a sign of life, not a flash. */
.playcover:hover .playbg{opacity:.37;transform:scale(1.04)}
.playcover:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.playcenter{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;pointer-events:none}
/* One button in the middle: the play mark and the words together. It carries its own contrast, so it
   reads on any cover without darkening the picture. */
.playbtn{display:inline-flex;align-items:center;gap:12px;padding:14px 26px;padding-inline-start:20px;border-radius:12px;
  background:var(--accent);color:var(--accent-ink);box-shadow:0 16px 40px -14px rgba(20,15,10,.6);
  font-family:var(--display);font-weight:700;font-size:22px;line-height:1.2;
  pointer-events:auto;transition:transform .15s ease,background .15s ease,box-shadow .15s ease}
.playbtn svg{flex:none;width:26px;height:26px}
/* Its own answer when the pointer reaches it — the cover's hover is the picture drifting, this one is the
   button: a step darker, a touch larger, lifted. */
.playbtn:hover,.playcover:focus-visible .playbtn{background:color-mix(in srgb,var(--accent) 86%,var(--ink));
  transform:scale(1.06);box-shadow:0 20px 44px -14px rgba(20,15,10,.7)}

/* Start over — a secondary control in the player's corner, like a player's own small buttons */
.playcorner{position:absolute;inset-block-end:16px;inset-inline-end:16px;z-index:2}
.playfresh{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:14px;font-weight:600;line-height:1.2;padding:8px 14px;border-radius:8px;cursor:pointer;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);
  box-shadow:0 6px 18px -10px rgba(20,15,10,.45);transition:background .15s,border-color .15s,transform .15s}
.playfresh:hover{background:color-mix(in srgb,var(--surface) 86%,var(--ink));border-color:var(--faint);transform:translateY(-1px)}
.playfresh:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

@media(max-width:560px){
  .playbtn{font-size:18px;padding:10px 18px;padding-inline-start:14px;gap:8px}
  .playbtn svg{width:20px;height:20px}
  .playcorner{inset-block-end:10px;inset-inline-end:10px}
  .playfresh{font-size:13px;padding:6px 10px}
}
@media(prefers-reduced-motion:reduce){ .playbg,.playbtn{transition:none} }

/* The pop-up. A native dialog: it traps focus, Escape closes it, and it does NOT close on a click
   outside — a child's stray tap on the dark edge should not end their game. The only way out drawn
   on screen is the X in its own bar, quiet until pointed at. */
.playdlg{padding:0;border:0;border-radius:var(--r);background:var(--surface);color:var(--ink);
  width:min(1200px,calc(100vw - 48px));height:calc(100dvh - 48px);max-width:none;max-height:none;
  overflow:hidden;box-shadow:0 30px 80px -30px rgba(20,15,10,.55)}
.playdlg[open]{display:flex;flex-direction:column}
.playdlg::backdrop{background:rgba(20,15,10,.62)}
.playbar{flex:none;display:flex;align-items:center;gap:4px;min-height:48px;padding-block:4px;
  padding-inline:16px 8px;border-bottom:1px solid var(--line)}
.playtitle{flex:1;min-width:0;font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iconbtn{flex:none;width:40px;height:40px;display:inline-grid;place-items:center;border:0;border-radius:8px;
  background:transparent;color:var(--muted);cursor:pointer;transition:background .12s,color .12s}
.iconbtn:hover{background:var(--raise);color:var(--ink)}
.iconbtn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.iconbtn[hidden]{display:none}
/* The stage inside it: no card of its own, it IS the pop-up's body. It scrolls when the activity is
   taller than the window; a shorter one is stretched to fill (the page tells the wrapper, host-fill). */
.playdlg .stage{flex:1;min-height:0;margin:0;border:0;border-radius:0;box-shadow:none;overflow:auto;background:var(--surface)}
.playdlg .stage iframe{min-height:100%}
@media(max-width:560px){
  .playdlg{width:100vw;height:100dvh;border-radius:0}
}

/* "Start over?" — says what is lost before anything is */
.playsure{border:1px solid var(--line);border-radius:var(--r);padding:24px;max-width:min(420px,calc(100vw - 32px));
  background:var(--surface);color:var(--ink);box-shadow:0 30px 80px -30px rgba(20,15,10,.55)}
.playsure::backdrop{background:rgba(20,15,10,.45)}
.playsure h2{font-family:var(--display);font-size:22px;margin:0 0 8px}
.playsure p{margin:0 0 20px;color:var(--muted);font-size:15.5px}
.playsureacts{display:flex;flex-wrap:wrap;gap:8px}