/* Echoes of Battle interactive games (play.js). Uses the site tokens from site.css. */
.play { border:1px solid var(--gold-line); border-radius:22px; background:radial-gradient(120% 80% at 50% 0%,rgba(212,175,95,.07),transparent 60%),linear-gradient(180deg,var(--card-2),var(--card)); padding:32px 28px 28px; box-shadow:0 40px 90px -55px var(--gold-glow); position:relative; overflow:hidden; margin:1.6rem 0 2.4rem; min-height:420px; }
.play::before { content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.play.pl-fade > * { animation:plIn .38s var(--ease,ease) both; }
@keyframes plIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.pl-err { color:var(--muted); text-align:center; padding:3rem 0; }

/* start screen */
.pl-kicker { font-family:var(--font-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); text-align:center; }
.pl-title { font-family:var(--font-display); font-size:clamp(1.7rem,5.4vw,2.3rem); line-height:1.12; margin:.55rem 0 .4rem; text-align:center; color:var(--text); }
.pl-title em { color:var(--gold-bright); }
.pl-sub { color:var(--muted); text-align:center; font-size:1.02rem; line-height:1.65; max-width:500px; margin:0 auto 1.2rem; }
.pl-meds { display:flex; justify-content:center; margin:1.3rem 0 1.1rem; }
.pl-med { width:54px; height:54px; border-radius:50%; background-size:cover; background-position:center; border:2px solid var(--gold); margin-left:-12px; box-shadow:0 6px 14px -6px #000, inset 0 -6px 10px rgba(0,0,0,.45); }
.pl-med:first-child { margin-left:0; }
.pl-meds-blur .pl-med { filter:blur(5px) saturate(.6); }
.pl-how { list-style:none; margin:0 auto 1.3rem; padding:0; max-width:440px; display:grid; gap:.45rem; }
.pl-how li { position:relative; padding-left:1.6rem; color:var(--muted); font-size:.95rem; line-height:1.5; }
.pl-how li::before { content:""; position:absolute; left:.35rem; top:.55em; width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 3px var(--gold-soft); }
.pl-best { text-align:center; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-bright); margin-bottom:1rem; }
.pl-center { text-align:center; }

/* buttons */
.pl-btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; cursor:pointer; border:0; font-family:var(--font-mono); font-weight:600; letter-spacing:.02em; font-size:.96rem; padding:.85rem 1.7rem; border-radius:100px; background:linear-gradient(180deg,var(--gold-bright),var(--gold)); color:#1a1204; transition:transform .15s,box-shadow .2s; box-shadow:0 10px 26px -12px var(--gold-glow); text-decoration:none; min-height:46px; }
.pl-btn:hover { transform:translateY(-2px); box-shadow:0 16px 30px -12px var(--gold-glow); }
.pl-btn:focus-visible, .pl-opt:focus-visible, .pl-share button:focus-visible, .pl-read:focus-visible { outline:2px solid var(--gold-bright); outline-offset:3px; }
.pl-btn.ghost { background:none; border:1px solid var(--gold-line); color:var(--text); box-shadow:none; }
.pl-btn.ghost:hover { border-color:var(--gold); color:var(--gold-bright); }

/* round chrome */
.pl-top { display:flex; align-items:center; gap:.8rem; margin-bottom:1.1rem; }
.pl-bar { flex:1; height:6px; border-radius:4px; background:var(--gold-line); overflow:hidden; }
.pl-bar > i { display:block; height:100%; background:linear-gradient(90deg,var(--gold),var(--gold-bright)); border-radius:4px; transition:width .35s ease; }
.pl-num, .pl-score { font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.pl-score { color:var(--gold-bright); border:1px solid var(--gold-line); border-radius:100px; padding:.25rem .65rem; }
.pl-q { font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); text-align:center; margin:.2rem 0 .9rem; }
.pl-streak { text-align:center; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:#ffc46b; margin:-.3rem 0 .7rem; }

/* reveal frame */
.pl-frame-wrap { display:flex; justify-content:center; }
.pl-frame { position:relative; width:min(100%, calc(58vh * var(--ar,1.5))); overflow:hidden; border-radius:14px; border:1px solid var(--gold-line); background:#0d0b09; box-shadow:inset 0 0 0 1px rgba(0,0,0,.4), 0 24px 50px -30px #000; transition:aspect-ratio .7s var(--ease,ease); }
.pl-frame img { position:absolute; max-width:none; display:block; transition:width .7s var(--ease,ease),height .7s var(--ease,ease),left .7s var(--ease,ease),top .7s var(--ease,ease),filter .7s ease; user-select:none; -webkit-user-drag:none; }
.pl-frame::after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 60px rgba(0,0,0,.45); pointer-events:none; border-radius:14px; }
.pl-frame.pl-done { border-color:var(--gold); }
.pl-stagebadge { position:absolute; left:10px; top:10px; z-index:2; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#f3e6c4; background:rgba(12,10,8,.72); border:1px solid var(--gold-line); border-radius:100px; padding:.25rem .6rem; backdrop-filter:blur(4px); }
.pl-clues { list-style:none; counter-reset:clue; margin:1rem auto .4rem; padding:0; max-width:560px; display:grid; gap:.45rem; }
.pl-clues li { counter-increment:clue; position:relative; padding:.6rem .8rem .6rem 2.4rem; border-radius:12px; background:rgba(255,255,255,.025); border:1px solid var(--gold-line); color:var(--muted); font-size:.98rem; line-height:1.5; }
.pl-clues li::before { content:counter(clue); position:absolute; left:.7rem; top:.6rem; width:1.15rem; height:1.15rem; border-radius:50%; background:var(--gold-soft); color:var(--gold-bright); font-family:var(--font-mono); font-size:.7rem; display:flex; align-items:center; justify-content:center; }
.pl-clues li.pl-new { color:var(--text); border-color:var(--gold); animation:plIn .4s ease both; }
.pl-worth { text-align:center; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-bright); margin:.5rem 0 .8rem; min-height:1em; }
.pl-actions { text-align:center; margin-top:.9rem; min-height:1px; }

/* options */
.pl-opts { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.pl-sides { grid-template-columns:1fr; }
.pl-opt { display:flex; align-items:center; gap:.7rem; text-align:left; cursor:pointer; border:1px solid var(--gold-line); border-radius:14px; background:rgba(255,255,255,.02); padding:.85rem 1rem; color:var(--text); font-size:1rem; font-family:var(--font-display); line-height:1.3; transition:border-color .18s,background .18s,transform .12s; min-height:52px; }
.pl-opt kbd { flex:none; font-family:var(--font-mono); font-size:.68rem; width:1.5rem; height:1.5rem; border-radius:7px; border:1px solid var(--gold-line); color:var(--muted); display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.25); }
.pl-opt:hover:not(:disabled) { border-color:var(--gold); background:var(--gold-soft); transform:translateY(-1px); }
.pl-opt:disabled { cursor:default; }
.pl-opt.ok { border-color:#5bef95; background:rgba(91,239,149,.12); color:#d6ffe6; }
.pl-opt.no { border-color:#ff8a8a; background:rgba(255,138,138,.1); color:#ffdede; }
.pl-opt.dim { opacity:.45; }

/* who-won card */
.pl-card { border-radius:16px; border:1px solid var(--gold-line); min-height:260px; background-size:cover; background-position:center 35%; display:flex; align-items:flex-end; margin-bottom:1rem; overflow:hidden; box-shadow:0 24px 50px -30px #000; }
.pl-card-in { padding:1.3rem 1.3rem 1.2rem; }
.pl-when { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-bright); }
.pl-bname { font-family:var(--font-display); font-size:clamp(1.4rem,4.6vw,1.9rem); color:#fff6e2; line-height:1.15; margin:.25rem 0 .45rem; text-shadow:0 2px 12px rgba(0,0,0,.6); }
.pl-setup { color:#e7dcc4; font-size:1rem; line-height:1.55; max-width:560px; }

/* feedback */
.pl-fb { margin:1.2rem auto 0; max-width:580px; border-top:1px solid var(--gold-line); padding-top:1rem; }
.pl-verdict { font-family:var(--font-mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; text-align:center; }
.pl-verdict.ok { color:#5bef95; } .pl-verdict.no { color:#ff8a8a; }
.pl-ftitle { font-family:var(--font-display); font-size:1.25rem; color:var(--text); text-align:center; margin:.45rem 0 .2rem; }
.pl-fact { color:var(--muted); line-height:1.65; margin:.5rem 0 .4rem; text-align:center; }
.pl-credit { color:var(--muted); opacity:.7; font-size:.78rem; text-align:center; margin:0 0 .6rem; }
.pl-fbrow { display:flex; align-items:center; justify-content:center; gap:1.2rem; flex-wrap:wrap; margin-top:.7rem; }
.pl-read { color:var(--gold); text-decoration:none; font-size:.95rem; } .pl-read:hover { text-decoration:underline; }

/* result */
.pl-res-eyebrow { font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); text-align:center; margin-top:.4rem; }
.pl-res-score { font-family:var(--font-display); font-size:3.6rem; text-align:center; color:var(--gold-bright); line-height:1; margin:.4rem 0 .1rem; }
.pl-res-score small { font-size:1.3rem; color:var(--muted); }
.pl-res-rank { font-family:var(--font-display); font-size:1.75rem; text-align:center; color:var(--text); margin:.2rem 0; }
.pl-res-note { color:var(--muted); text-align:center; max-width:460px; margin:.2rem auto .8rem; line-height:1.6; }
.pl-res-stats { display:flex; justify-content:center; gap:.6rem; flex-wrap:wrap; margin-bottom:1rem; }
.pl-res-stats span { font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); border:1px solid var(--gold-line); border-radius:100px; padding:.3rem .7rem; }
.pl-res-stats .pl-pb { color:#1a1204; background:var(--gold-bright); border-color:var(--gold-bright); }
.pl-recap { list-style:none; margin:0 auto 1.2rem; padding:0; max-width:460px; display:grid; gap:.3rem; }
.pl-recap li { display:flex; justify-content:space-between; gap:1rem; padding:.45rem .75rem; border-radius:10px; background:rgba(255,255,255,.02); border:1px solid var(--gold-line); }
.pl-recap a { color:var(--text); text-decoration:none; } .pl-recap a:hover { color:var(--gold-bright); }
.pl-recap b { font-family:var(--font-mono); font-size:.8rem; }
.pl-recap li.ok b { color:#5bef95; } .pl-recap li.no b { color:#ff8a8a; }
.pl-res-actions { display:flex; justify-content:center; gap:.6rem; flex-wrap:wrap; margin-bottom:1rem; }
.pl-share-nudge { text-align:center; color:var(--muted); font-size:.9rem; margin-bottom:.6rem; }
.pl-share { display:flex; justify-content:center; gap:.6rem; }
.pl-share button { width:44px; height:44px; border-radius:50%; border:1px solid var(--gold-line); background:rgba(255,255,255,.03); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color .15s,background .15s; }
.pl-share button:hover { border-color:var(--gold); background:var(--gold-soft); }
.pl-share svg { width:18px; height:18px; fill:var(--text); }
.pl-toast { position:absolute; left:50%; bottom:14px; transform:translate(-50%,20px); opacity:0; transition:all .25s; background:var(--gold-bright); color:#1a1204; font-family:var(--font-mono); font-size:.75rem; padding:.4rem .9rem; border-radius:100px; pointer-events:none; }
.pl-toast.show { opacity:1; transform:translate(-50%,0); }

@media (max-width:560px) {
  .play { padding:24px 16px 20px; border-radius:18px; }
  .pl-opts { grid-template-columns:1fr; }
  .pl-frame { width:min(100%, calc(46vh * var(--ar,1.5))); }
  .pl-card { min-height:220px; }
  .pl-opt kbd { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .play.pl-fade > *, .pl-clues li.pl-new { animation:none; }
  .pl-frame, .pl-frame img, .pl-bar > i, .pl-btn, .pl-opt { transition:none; }
}

/* pool list under the game */
.prose .pl-list { list-style:none; padding:0; margin:.4rem 0 1.4rem; display:flex; flex-wrap:wrap; gap:.45rem; }
.prose .pl-list li { margin:0; }
.prose .pl-list a { display:inline-block; padding:.35rem .8rem; border:1px solid var(--gold-line); border-radius:100px; color:var(--text); text-decoration:none; font-size:.92rem; background:rgba(255,255,255,.02); }
.prose .pl-list a:hover { border-color:var(--gold); color:var(--gold-bright); }

/* layout fixes inside the blog "dispatch" template: the game goes first on phones (the column is a
   flex box that puts .prose first), and the text-only hero is compact so the game is on screen at once */
body.dx .dx-col > #play { order: 0; }
body.dx:has(#play) .dx-hero-plain { min-height: 0; padding-top: 5.2rem; padding-bottom: 0; }
body.dx:has(#play) .dx-hero-plain .dx-hero-in { padding-bottom: .6rem; }

/* 50:50 hint */
.pl-opt.pl-struck { text-decoration:line-through; opacity:.35; }
.pl-hintnote { font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

/* starter-set offer on the result screen */
.pl-offer { margin:0 auto 1.3rem; max-width:560px; text-align:center; border:1px solid var(--gold); border-radius:18px; padding:1.3rem 1.2rem 1.25rem; background:radial-gradient(120% 90% at 50% 0%,rgba(212,175,95,.16),transparent 70%),rgba(255,255,255,.02); box-shadow:0 20px 50px -35px var(--gold-glow); }
.pl-offer-k { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.pl-offer-h { font-family:var(--font-display); font-size:clamp(1.25rem,4vw,1.5rem); color:var(--text); margin:.35rem 0 .4rem; line-height:1.2; }
.pl-offer-p { color:var(--muted); font-size:.97rem; line-height:1.55; margin:0 auto .9rem; max-width:470px; }
.pl-offer-pick { display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem; margin-bottom:1rem; }
.pl-era { cursor:pointer; border:1px solid var(--gold-line); background:rgba(255,255,255,.02); color:var(--text); border-radius:100px; padding:.42rem .8rem; font-size:.88rem; font-family:var(--font-body); transition:border-color .15s,background .15s; min-height:36px; }
.pl-era:hover { border-color:var(--gold); }
.pl-era.on { background:var(--gold-bright); border-color:var(--gold-bright); color:#1a1204; font-weight:600; }
.pl-era:focus-visible { outline:2px solid var(--gold-bright); outline-offset:2px; }
.pl-offer-done { color:var(--gold-bright); font-family:var(--font-display); font-size:1.05rem; padding:1rem; }
/* the toast is a direct child of .play: keep the entrance animation (fill-mode both) from forcing it visible */
.play.pl-fade > .pl-toast { animation: none; }