/* Learn — Trace holds the left column (sticky, chain scrolls inside it);
   the right column stacks a field bar that visibly governs everything under
   it, the games card (Test your eye / The Selection behind door-card
   pickers), and the Study deck as its own section. Paper cards on the cream
   ground, normal page flow. The .tr-nav header + .tr-node/.tr-hop trace
   chain come from trace.css (linked alongside). */
.pl-page{background:var(--bg);min-height:100vh}

/* site-wide lesson (see CLAUDE.md): author display rules must never defeat
   the hidden attribute — this guard keeps verdicts/cards genuinely hidden */
.pl-page [hidden]{display:none !important}

.pl-main{padding:16px clamp(20px,3vw,48px) 70px}

/* ── hero: title + lead as one left group, a stat rail on the right ── */
.pl-hero{
  display:flex;align-items:flex-end;gap:32px;
  padding-bottom:14px;margin-bottom:18px;
  border-bottom:2px solid var(--rule);
}
.pl-hero-left{flex:1 1 auto;min-width:0}
.pl-title{font-size:clamp(28px,2.6vw,42px);font-weight:900;letter-spacing:-.04em;margin:0 0 9px;line-height:.9}
.pl-dot{display:inline-block;width:.14em;height:.14em;background:var(--accent);margin-left:.04em}
.pl-lead{
  margin:0;color:#55534c;font-size:13px;line-height:1.6;
  max-width:56ch;
}
:root[data-theme="dark"] .pl-lead{color:#bdb8ab}
.pl-hero-right{flex:none;display:flex;align-items:flex-end}
/* real stats — number over a small-caps label, hairline-divided */
.pl-bests{display:flex;align-items:stretch}
.pl-bests span{
  display:flex;flex-direction:column-reverse;align-items:flex-start;gap:3px;
  padding:0 18px;border-left:1px solid rgba(var(--ink-rgb),.14);
  font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute);white-space:nowrap;line-height:1;
}
.pl-bests span:first-child{padding-left:0;border-left:0}
.pl-bests b{
  font-size:20px;font-weight:850;color:var(--ink);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1;margin:0;
}

/* ── the board: trace left, field + games right; columns share a bottom edge ── */
.pl-board{
  display:grid;grid-template-columns:minmax(300px,1fr) 2.05fr;
  gap:clamp(14px,1.4vw,20px);align-items:stretch;
}
.pl-cell{
  min-width:0;
  background:var(--paper);border:1px solid rgba(var(--ink-rgb),.16);
  border-radius:14px;padding:16px 20px 18px;
}
.pl-right{min-width:0;display:flex;flex-direction:column;gap:clamp(12px,1.2vw,16px)}

.pl-cell-head{
  display:flex;align-items:baseline;gap:12px;
  padding-bottom:10px;margin-bottom:14px;
  border-bottom:1px solid rgba(var(--ink-rgb),.14);
}
.pl-cell-num{
  flex:none;font-size:9px;font-weight:700;color:var(--accent);
  font-variant-numeric:tabular-nums;letter-spacing:.06em;
}
.pl-cell-title{margin:0;font-size:15.5px;font-weight:850;letter-spacing:-.015em}
.pl-cell-meta{
  margin-left:auto;text-align:right;
  font-size:10px;font-weight:600;color:var(--mute);letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
/* the Field filter lives in the games-card head — visibly scoped to the tabs */
.pl-cell-field{margin-left:auto;display:flex;align-items:center;gap:8px;min-width:0}
.pl-cell-field .pl-cat{max-width:210px}

/* ── the one field filter — a bar bracketing the whole games column ── */
.pl-fieldbar{
  display:flex;align-items:center;gap:12px;
  background:var(--paper);border:1px solid rgba(var(--ink-rgb),.16);
  border-radius:12px;padding:10px 16px;
}
.pl-cat-label{font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.pl-cat{
  font:600 12px/1.2 Inter,system-ui,sans-serif;color:var(--ink);
  background:var(--bg);border:1px solid rgba(var(--ink-rgb),.25);
  padding:8px 10px;border-radius:8px;outline:none;max-width:250px;
}
.pl-cat:focus{border-color:var(--accent)}
.pl-fieldbar-note{
  margin-left:auto;text-align:right;min-width:0;
  font-size:10.5px;font-weight:600;color:var(--mute);line-height:1.4;
}

/* ── door-card pickers for the two games ── */
.pl-doors{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.pl-gametab{
  text-align:left;cursor:pointer;font:inherit;
  background:var(--bg);color:var(--ink);
  border:1px solid rgba(var(--ink-rgb),.2);border-radius:11px;
  padding:12px 15px 13px;min-width:0;
  transition:background .16s,color .16s,border-color .16s;
}
.pl-gametab i{
  display:block;font-style:normal;
  font-size:8.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:4px;
}
.pl-gametab b{
  display:block;font-size:15px;font-weight:850;letter-spacing:-.015em;line-height:1.15;
}
.pl-gametab span{
  display:block;font-size:10.5px;font-weight:600;color:var(--mute);
  margin-top:3px;line-height:1.35;
}
.pl-gametab:hover{border-color:var(--ink)}
.pl-gametab.is-active{
  background:var(--ink);border-color:var(--ink);color:var(--paper);
}
.pl-gametab.is-active span{color:rgba(255,255,255,.62)}
:root[data-theme="dark"] .pl-gametab.is-active span{color:rgba(0,0,0,.55)}

/* ── shared game surface ── */
.pl-game{min-width:0}
.pl-q{font-size:15px;font-weight:800;letter-spacing:-.015em;margin-bottom:12px;line-height:1.3}
.pl-score{
  font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--mute);margin-top:12px;
}

/* ── 01 · trace: left column, chain flows to full length (never clipped) ── */
.pl-cell--trace{display:flex;flex-direction:column}
.pl-tr-body{display:flex;flex-direction:column;min-height:0}
.pl-trform{flex:none;display:flex;flex-direction:column;gap:8px}
.pl-trfield{display:flex;flex-direction:column;gap:5px}
.pl-trin{
  font:500 13px/1.2 Inter,system-ui,sans-serif;color:var(--ink);
  background:var(--bg);border:1px solid rgba(var(--ink-rgb),.22);
  padding:9px 12px;border-radius:8px;outline:none;width:100%;
}
.pl-trin:focus{border-color:var(--accent)}
.pl-trswap{
  align-self:center;width:34px;height:28px;border-radius:7px;cursor:pointer;
  border:1px solid rgba(var(--ink-rgb),.22);background:none;color:var(--mute);
  font-size:13px;line-height:1;transform:rotate(90deg);
}
.pl-trswap:hover{color:var(--ink);border-color:var(--ink)}
.pl-tr-btns{display:flex;gap:8px;margin-top:2px}
.pl-tr-btns .pl-next{flex:1;text-align:center}
.pl-trsurprise{
  flex:1;font:600 11.5px/1 Inter,system-ui,sans-serif;cursor:pointer;
  background:none;color:var(--ink);border:1px solid rgba(var(--ink-rgb),.3);
  padding:11px 14px;border-radius:999px;
}
.pl-trsurprise:hover{background:var(--ink);color:var(--paper)}
.pl-trstatus{flex:none;margin-top:10px;font-size:11.5px;line-height:1.5;color:var(--mute);min-height:1.2em}
.pl-trstatus.is-err{color:var(--accent)}
.pl-trresult{margin-top:10px}
/* chain cards sit on paper here — swap their ground to cream for contrast */
.pl-trresult .tr-node{background:var(--bg)}
/* compact the chain for this narrow column (scoped to Learn) */
.pl-trresult .tr-node{gap:12px;padding:10px 13px;border-radius:10px}
.pl-trresult .tr-node-img,.pl-trresult .tr-node-imgempty{width:46px;height:46px;flex-basis:46px;border-radius:7px}
.pl-trresult .tr-node-name{font-size:14.5px}
.pl-trresult .tr-node-tag{-webkit-line-clamp:1;font-size:11px}
.pl-trresult .tr-node-open{font-size:10.5px}
.pl-trresult .tr-hop{padding:3px 0 3px 40px}
.pl-trresult .tr-hop::before{left:29px;top:-6px;bottom:-6px}
.pl-trresult .tr-hop-txt{font-size:11px;padding:3px 0}

/* ── game: test your eye ── */
.pl-eye-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:22px}
.pl-eye-media,.pl-eye-side{min-width:0}
/* modest stage: dictionary photos are mixed-res — never blow them up huge */
.pl-imgwrap{
  position:relative;border-radius:10px;overflow:hidden;
  background:rgba(var(--ink-rgb),.06);
  aspect-ratio:16/10;max-height:390px;width:100%;
}
.pl-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.pl-piece{
  font-size:12px;font-style:italic;color:var(--mute);
  margin:8px 0 0;line-height:1.4;min-height:1.2em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pl-opts{display:grid;grid-template-columns:1fr;gap:9px}
.pl-opt{
  font:600 13px/1.35 Inter,system-ui,sans-serif;cursor:pointer;text-align:left;
  border:1px solid rgba(var(--ink-rgb),.22);background:var(--bg);color:var(--ink);
  padding:12px 15px;border-radius:10px;transition:border-color .15s;
  min-height:44px;
}
.pl-opt:hover{border-color:var(--ink)}
.pl-opt.is-right{background:#2e7d5b;border-color:#2e7d5b;color:#fff}
.pl-opt.is-wrong{background:var(--accent);border-color:var(--accent);color:#fff}

.pl-imgwrap,.pl-piece,.pl-opts,.pl-q{transition:opacity .24s ease,transform .24s ease}
.pl-game.is-swap .pl-imgwrap,.pl-game.is-swap .pl-piece,
.pl-game.is-swap .pl-opts,.pl-game.is-swap .pl-q{opacity:0;transform:translateY(8px)}

/* history: thumbnail strip under the options */
.pl-history{margin-top:16px;min-width:0}
.pl-history-label{
  font-size:8.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mute);margin-bottom:6px;
}
.pl-history-row{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.pl-h{
  flex:0 0 auto;width:64px;background:var(--bg);
  border:1px solid rgba(var(--ink-rgb),.16);border-radius:8px;overflow:hidden;
  position:relative;
}
.pl-h-img{width:100%;height:64px;object-fit:cover;display:block}
.pl-h-dot{
  position:absolute;top:4px;right:4px;width:9px;height:9px;border-radius:50%;
  border:2px solid rgba(255,255,255,.9);
}
.pl-h-dot--right{background:#2e7d5b}
.pl-h-dot--wrong{background:var(--accent)}
.pl-h-body{display:none}
.pl-h-act{
  font:700 9.5px/1 Inter,system-ui,sans-serif;cursor:pointer;text-align:center;
  border:1px solid rgba(var(--ink-rgb),.25);background:none;color:var(--mute);
  padding:6px 4px;border-radius:6px;text-decoration:none;
}
.pl-h-act:hover{color:var(--ink);border-color:var(--ink)}
.pl-h-act.is-saved{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ── game: the selection ── */
.pl-q--sel{margin-bottom:14px}
/* filmstrip: each tile is sized to its own work's aspect ratio (JS sets the
   px width/height), so portrait and landscape works both show whole — no crop,
   no letterbox — sharing a common row height. */
.pl-sel-grid{
  display:flex;gap:12px;justify-content:center;align-items:center;
  height:clamp(240px,44vh,440px);min-height:0;
}
.pl-sel-tile{
  flex:0 0 auto;position:relative;padding:0;cursor:pointer;overflow:hidden;
  border:2px solid rgba(var(--ink-rgb),.15);border-radius:11px;background:var(--bg);
  transition:border-color .15s;
}
.pl-sel-tile:hover{border-color:var(--ink)}
/* the tile matches the image's aspect, so cover fills it with no cropping */
.pl-sel-tile img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.pl-sel-grid.is-revealed .pl-sel-tile{cursor:zoom-in}
.pl-sel-grid.is-revealed .pl-sel-tile:not(.rv-answer):not(.rv-wrong) img{opacity:.35;filter:grayscale(.5)}
.pl-sel-tile.rv-answer{border-color:#2e7d5b;box-shadow:0 0 0 3px #2e7d5b}
.pl-sel-tile.rv-answer::before{
  content:"✓";position:absolute;top:8px;right:8px;z-index:2;width:26px;height:26px;
  background:#2e7d5b;color:#fff;border-radius:50%;
  font:800 15px/26px Inter,system-ui,sans-serif;text-align:center;
}
.pl-sel-tile.rv-wrong{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent)}
.pl-sel-tile.rv-wrong::before{
  content:"✕";position:absolute;top:8px;right:8px;z-index:2;width:26px;height:26px;
  background:var(--accent);color:#fff;border-radius:50%;
  font:800 14px/26px Inter,system-ui,sans-serif;text-align:center;
}
.pl-sel-tile .pl-sel-label{
  position:absolute;left:0;right:0;bottom:0;z-index:1;padding:16px 9px 7px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.82));
  color:#fff;font-size:10px;font-weight:700;letter-spacing:.03em;line-height:1.35;
  text-align:left;opacity:0;transition:opacity .25s;pointer-events:none;
}
.pl-sel-grid.is-revealed .pl-sel-label{opacity:1}
.pl-sel-foot{display:flex;align-items:baseline;gap:14px;margin-top:10px}
.pl-sel-hint{font-size:11px;color:var(--mute);line-height:1.45;min-width:0}
.pl-sel-foot .pl-score{margin:0 0 0 auto;white-space:nowrap}
.pl-sel-topic{color:var(--accent)}

/* verdict sits ABOVE the grid so the why is never pushed off-screen */
.pl-verdict{
  display:flex;align-items:center;gap:12px;
  margin-bottom:12px;padding:11px 14px;border-radius:11px;
  border:1.5px solid;animation:plVerdictIn .3s ease;
}
@keyframes plVerdictIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.pl-verdict.is-right{border-color:#2e7d5b;background:rgba(46,125,91,.08)}
.pl-verdict.is-wrong{border-color:var(--accent);background:rgba(var(--accent-rgb),.08)}
.pl-verdict-mark{
  flex:none;width:30px;height:30px;border-radius:50%;
  font:800 15px/30px Inter,system-ui,sans-serif;text-align:center;color:#fff;
}
.pl-verdict.is-right .pl-verdict-mark{background:#2e7d5b}
.pl-verdict.is-wrong .pl-verdict-mark{background:var(--accent)}
.pl-verdict-txt{flex:1;font-size:12.5px;line-height:1.55;min-width:0}
.pl-verdict-txt b{font-weight:800}
.pl-next{
  flex:none;font:700 12px/1 Inter,system-ui,sans-serif;cursor:pointer;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  padding:11px 18px;border-radius:999px;
}
.pl-next:hover{background:var(--accent);border-color:var(--accent)}

/* ── 03 · study deck: in the right stack, image left / reading right ── */
.pl-deck-sub{font-size:12px;color:var(--mute);line-height:1.6;margin:4px 0 16px;max-width:48ch}
.pl-deal{
  font:700 12.5px/1 Inter,system-ui,sans-serif;cursor:pointer;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  padding:12px 22px;border-radius:999px;
}
.pl-deal:hover{background:var(--accent);border-color:var(--accent)}
.pl-deck-card{
  display:grid;grid-template-columns:1fr;gap:18px;align-items:start;
}
.pl-deck-imgwrap{
  position:relative;border-radius:10px;overflow:hidden;cursor:zoom-in;
  background:rgba(var(--ink-rgb),.06);
  aspect-ratio:4/3;max-height:460px;width:100%;
}
/* desktop (deck as its own panel, natural-scroll height): 2-up with a wider,
   taller image so the work isn't a stamp in a grey field */
@media (min-width:1100px){
  .pl-cell--deck .pl-deck-card{
    grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
    gap:clamp(20px,2.2vw,34px);align-items:center;
  }
  .pl-cell--deck .pl-deck-imgwrap{aspect-ratio:4/3;max-height:520px;}
}
.pl-deck-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.pl-deck-body{min-width:0}

/* ── the maker: compact dictionary intro (portrait + synopsis), clickable ── */
.pl-deck-maker-card{
  display:flex;align-items:center;gap:11px;
  text-decoration:none;color:inherit;
  padding:8px;margin:-8px -8px 8px;border-radius:10px;
  transition:background .16s;
}
.pl-deck-maker-card:hover{background:rgba(var(--ink-rgb),.05)}
.pl-deck-portrait{
  width:44px;height:44px;flex:0 0 44px;border-radius:50%;
  background:rgba(var(--ink-rgb),.08) center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;
}
.pl-deck-portrait--mono{
  font-size:14px;font-weight:800;letter-spacing:.02em;color:var(--mute);
}
.pl-deck-maker-txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.pl-deck-maker-name{
  font-size:16px;font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pl-deck-maker-field{
  font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pl-deck-maker-go{margin-left:auto;flex:none;color:var(--mute);font-size:13px}
.pl-deck-maker-card:hover .pl-deck-maker-go{color:var(--ink)}
.pl-deck-synopsis{
  margin:0 0 12px;font-size:12.5px;line-height:1.55;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.pl-deck-worklabel{
  font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mute);margin:0 0 5px;
  padding-top:11px;border-top:1px solid rgba(var(--ink-rgb),.12);
}
.pl-deck-title{font-size:clamp(15px,1.4vw,19px);font-weight:800;letter-spacing:-.02em;line-height:1.2}
.pl-deck-maker{
  font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);margin:4px 0 10px;
}
.pl-deck-desc{font-size:12.5px;line-height:1.65;color:var(--mute);margin:0 0 10px;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.pl-deck-quote{
  margin:0 0 10px;padding:2px 0 2px 12px;border-left:2px solid var(--accent);
  font-size:12px;font-weight:600;font-style:italic;line-height:1.55;
}
.pl-deck-fact{
  font-size:11px;line-height:1.55;color:var(--mute);margin-bottom:12px;
  padding:8px 11px;background:rgba(var(--ink-rgb),.05);border-radius:8px;
}
.pl-deck-fact::before{content:"◆ ";color:var(--accent)}
.pl-deck-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.pl-deck-actions .pl-h-act{flex:none;padding:9px 13px;font-size:10.5px}
.pl-deck-progress{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--mute);letter-spacing:.05em}
.pl-deck-next{
  flex:none;font:700 12px/1 Inter,system-ui,sans-serif;cursor:pointer;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  padding:10px 16px;border-radius:999px;
}
.pl-deck-next:hover{background:var(--accent);border-color:var(--accent)}
.pl-deck-card{transition:opacity .28s ease,transform .28s ease}
.pl-deck.is-swap .pl-deck-card{opacity:0;transform:translateY(10px)}

/* ── the lightbox — boards-style: image left, exploration rail right ── */
.pl-lb{position:fixed;inset:0;z-index:240;display:none}
.pl-lb.is-open{display:block}
.pl-lb-backdrop{position:absolute;inset:0;background:rgba(15,14,12,.86);cursor:zoom-out}
.pl-lb-back{
  position:absolute;top:16px;left:16px;z-index:4;
  font:700 12px/1 Inter,system-ui,sans-serif;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:999px;
  padding:10px 16px;
}
.pl-lb-back:hover{background:var(--accent)}
.pl-lb-close{
  position:absolute;top:16px;right:calc(var(--pl-lbrail,380px) + 16px);z-index:4;
  width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;font-size:14px;
}
.pl-lb-close:hover{background:var(--accent)}
.pl-lb-stage{
  position:absolute;top:0;bottom:0;left:0;right:var(--pl-lbrail,380px);
  display:flex;align-items:center;justify-content:center;
  padding:56px 34px 64px;cursor:zoom-out;
}
.pl-lb-img{max-width:100%;max-height:100%;object-fit:contain;display:block;cursor:default;
  box-shadow:0 30px 90px rgba(0,0,0,.5)}
.pl-lb-cap{
  position:absolute;left:34px;bottom:20px;right:calc(var(--pl-lbrail,380px) + 34px);
  color:rgba(255,255,255,.85);font-size:12px;line-height:1.5;pointer-events:none;
}
.pl-lb-cap b{font-weight:800}
.pl-lb-cap span{opacity:.65}
.pl-lb-rail{
  position:absolute;top:0;right:0;bottom:0;width:var(--pl-lbrail,380px);
  background:var(--bg);border-left:1px solid rgba(var(--ink-rgb),.18);
  padding:22px 20px;overflow-y:auto;
}
.pl-lb-kicker{
  font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:6px;
}
.pl-lb-name{font-size:20px;font-weight:900;letter-spacing:-.02em;line-height:1.1}
.pl-lb-sec{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);margin:4px 0 16px}
.pl-lb-label{
  font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mute);margin:16px 0 8px;
}
.pl-lb-works{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pl-lb-w{
  border:1px solid rgba(var(--ink-rgb),.14);background:var(--paper);
  padding:0;cursor:pointer;font:inherit;color:inherit;text-align:left;
  overflow:hidden;border-radius:8px;
}
.pl-lb-w:hover{border-color:var(--ink)}
.pl-lb-w img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.pl-lb-w span{
  display:block;font-size:10px;font-weight:700;padding:5px 8px 6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pl-lb-actions{display:flex;gap:8px;margin-top:16px}
.pl-lb-actions .pl-h-act{flex:1;padding:10px 8px;font-size:11px}

/* desktop shows the study deck as its own panel, so its tab button is hidden
   (arrangeDeck relocates the deck DOM out of the tabs at ≥1100px) */
@media (min-width:1100px){
  .pl-gametab[data-mode="deck"]{display:none;}
}

/* ── desktop: fit the whole page to the viewport — no page scroll ──
   The board fills the height below the hero; the right stack shares that height
   between games and deck; every media area scales to fit (so the selection grid
   never clips). Trace fills the left column, bottom-aligned to the deck. Only
   engages when there's enough height; shorter screens fall back to scrolling. */
@media (min-width:1100px) and (min-height:820px){
  body.pl-page{height:100vh;overflow:hidden;display:flex;flex-direction:column}
  .pl-nav{flex:none}
  .pl-main{flex:1;min-height:0;display:flex;flex-direction:column;
    padding-top:14px;padding-bottom:clamp(12px,1.6vh,20px)}
  .pl-hero{flex:none;margin-bottom:clamp(10px,1.4vh,18px);padding-bottom:clamp(8px,1vh,12px)}
  .pl-board{flex:1;min-height:0}
  .pl-cell{min-height:0}

  /* desktop = 3 panels: games (larger share) + the study deck as its own card
     below it (the deck is relocated out of the tabs by arrangeDeck on ≥1100). */
  .pl-right{min-height:0}   /* base .pl-right already flex-column with a gap */
  /* 2×2 options shrink the eye game's footprint so the deck can take a bigger,
     more even share of the column height (the deck images were too small) */
  .pl-cell--games .pl-opts{grid-template-columns:1fr 1fr;gap:8px}
  .pl-cell--games{flex:1.3;min-height:0;overflow:hidden;display:flex;flex-direction:column}
  .pl-cell--deck{flex:1.35;min-height:0;overflow:hidden;display:flex;flex-direction:column}

  /* trim section chrome a touch so the media keeps the room */
  .pl-cell--games .pl-cell-head,.pl-cell--deck .pl-cell-head{margin-bottom:9px;padding-bottom:8px}
  .pl-cell--games .pl-doors{margin-bottom:10px}
  .pl-cell--games .pl-gametab{padding:9px 14px 10px}

  /* games body fills; eye media & selection grid scale to available height */
  .pl-cell--games .pl-modewrap{flex:1;min-height:0}
  .pl-cell--games .pl-modewrap[data-modewrap="eye"]{display:flex;flex-direction:column;justify-content:center}
  .pl-cell--games .pl-eye-grid{height:100%;align-items:stretch}
  .pl-cell--games .pl-eye-media{display:flex;flex-direction:column;min-height:0}
  .pl-cell--games .pl-imgwrap{flex:1;min-height:0;aspect-ratio:auto;max-height:420px}
  .pl-cell--games .pl-eye-side{overflow:hidden}
  .pl-cell--games .pl-sel-body{display:flex;flex-direction:column;min-height:0}
  /* verdict stays in flow above the grid; the filmstrip shrinks to the space
     that's left, so the card height never changes and nothing overlaps */
  .pl-cell--games .pl-sel-grid{flex:1;height:auto;min-height:0}
  /* compact verdict so the reveal keeps as much image height as possible */
  .pl-cell--games .pl-verdict{flex:none;margin:0 0 8px;padding:8px 12px;gap:10px}
  .pl-cell--games .pl-verdict-mark{width:24px;height:24px;line-height:24px;font-size:13px}
  .pl-cell--games .pl-verdict-txt{font-size:11.5px;line-height:1.45}
  .pl-cell--games .pl-verdict .pl-next{padding:8px 14px;font-size:11px}

  /* study-deck panel (desktop): image frame fills (capped), text beside,
     Next anchored to the bottom so it sits in the same spot every card */
  .pl-cell--deck .pl-deck{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center}
  /* image gets the larger share and fills the panel height — no 340px cap, so
     the work is as big as the space allows (portrait works especially) */
  .pl-cell--deck .pl-deck-card{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
    gap:clamp(20px,2.2vw,34px);align-items:stretch;min-height:0;flex:1}
  .pl-cell--deck .pl-deck-imgwrap{height:100%;min-height:220px;max-height:none;aspect-ratio:auto}
  .pl-cell--deck .pl-deck-body{display:flex;flex-direction:column;justify-content:center;min-height:0;overflow:hidden}
  .pl-cell--deck .pl-deck-actions{margin-top:auto;flex:none;padding-top:6px}

  /* trace fills the left column; the chain scrolls inside only if it must */
  .pl-cell--trace .pl-tr-body{flex:1;min-height:0}
  .pl-cell--trace .pl-trresult{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none}
  .pl-cell--trace .pl-trresult::-webkit-scrollbar{display:none}
}

/* ── responsive ── */
@media (max-width:1099px){
  .pl-hero{flex-wrap:wrap;gap:14px}
  .pl-lead{max-width:none;flex:1 1 100%}
  .pl-hero-right{margin-left:0}
  .pl-board{display:block}
  .pl-cell--trace{position:static;margin-bottom:16px}
  .pl-trform{max-width:520px}
  .pl-trresult{max-height:none;overflow:visible;padding-right:0}
  .pl-right{display:block}
  .pl-fieldbar{margin-bottom:16px}
  .pl-cell--games{margin-bottom:16px}
  .pl-eye-grid{grid-template-columns:1fr;gap:14px}
  .pl-opts{grid-template-columns:1fr 1fr;gap:8px}
  .pl-deck-card{grid-template-columns:1fr}
  .pl-deck-imgwrap{margin-bottom:2px}
}
@media (max-width:640px){
  /* three compact segmented tabs — the big door-cards were too heavy for a
     phone, and with the deck as tab 3 they'd have towered (owner, 2026-07-22) */
  .pl-doors{grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px}
  .pl-gametab{padding:10px 6px 11px;border-radius:9px;text-align:center;min-width:0}
  .pl-gametab i,.pl-gametab span{display:none}
  .pl-gametab b{font-size:12.5px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pl-opts{grid-template-columns:1fr}
  /* mobile: filmstrip → simple 2×2, whole works shown (contain) */
  .pl-sel-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;height:auto}
  .pl-sel-tile{aspect-ratio:1/1}
  .pl-sel-tile img{object-fit:contain}
  .pl-verdict{flex-wrap:wrap}
  .pl-verdict .pl-next{width:100%;text-align:center}
  /* head: title row, then the Field control full-width underneath */
  .pl-cell-head{flex-wrap:wrap;row-gap:8px}
  .pl-cell-meta{margin-left:0;width:100%;text-align:left;white-space:normal}
  .pl-cell-field{flex:1 1 100%;margin-left:0}
  .pl-cell-field .pl-cat{max-width:100%}
  .pl-cat{max-width:100%;flex:1;min-width:0;width:100%}  /* min-width:0 — a select's longest option must never widen the page */
  .pl-sel-foot{flex-wrap:wrap}
  .pl-lb-stage{right:0;bottom:46%;padding:52px 16px 12px}
  .pl-lb-cap{display:none}
  .pl-lb-close{right:16px}
  .pl-lb-rail{top:auto;left:0;width:100%;height:46%;border-left:0;border-top:1px solid rgba(var(--ink-rgb),.18)}
}

/* ═══ Desktop: sharpen the Learn page to the site's Swiss-grid corners
   (owner, 2026-07-23). Rounded stays on phones (≤699); from 700px up the
   cards, image frames, inputs, tabs and buttons go square. Circles — dots,
   avatars, verdict/answer marks — keep their 50%; they're intentional, not
   "rounded corners". ═══ */
@media (min-width:700px){
  body.pl-page :is(
    .pl-cell, .pl-fieldbar, .pl-cat, .pl-gametab,
    .pl-trin, .pl-trswap, .pl-trsurprise, .pl-next, .pl-deal,
    .pl-imgwrap, .pl-opt, .pl-h, .pl-h-act,
    .pl-sel-tile, .pl-verdict,
    .pl-deck-imgwrap, .pl-deck-maker-card, .pl-deck-fact,
    .pl-trresult .tr-node, .pl-trresult .tr-node-img, .pl-trresult .tr-node-imgempty,
    .pl-lb-action, .pl-lb-rail
  ){ border-radius:0; }
}

/* ═══ Learn hero as a Swiss ruled band (owner, 2026-07-23) — echoes the
   mission grid: full-bleed hairlines top and bottom, a vertical rule between
   the title/lead and the stats, and deliberate negative space in the cells.
   Desktop only; mobile keeps the simple stacked hero. ═══ */
@media (min-width:700px){
  .pl-hero{
    display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:0;
    margin-left:calc(-1 * clamp(20px,3vw,48px));
    margin-right:calc(-1 * clamp(20px,3vw,48px));
    padding:clamp(14px,1.6vw,22px) clamp(20px,3vw,48px);
    border-top:1px solid rgba(var(--ink-rgb),.22);
    border-bottom:1px solid rgba(var(--ink-rgb),.22);
  }
  .pl-hero-left{padding-right:clamp(24px,3vw,56px)}
  .pl-hero-right{
    align-self:stretch;display:flex;align-items:flex-end;margin-left:0;
    border-left:1px solid rgba(var(--ink-rgb),.22);
    padding-left:clamp(24px,2.6vw,46px);
  }
}

/* ═══ Learn board as one Swiss ruled grid (owner, 2026-07-23) — extends the
   hero band into the board: the interior card boxes give way to hairlines.
   A vertical rule divides Trace from the games column, a horizontal rule
   splits games from the study deck, and a full-bleed rule closes the page.
   Paper panels on cream still read (–paper ≠ –bg). Desktop 2-col only;
   ≤1099 keeps the bordered cards. ═══ */
@media (min-width:1100px){
  .pl-board{position:relative;gap:0}
  .pl-cell--trace,
  .pl-right .pl-cell{border:0}
  .pl-cell--trace{border-right:1px solid rgba(var(--ink-rgb),.22)}
  .pl-right{gap:0}
  .pl-right .pl-cell--deck{border-top:1px solid rgba(var(--ink-rgb),.22)}
  .pl-board::after{
    content:"";position:absolute;bottom:0;
    left:calc(-1 * clamp(20px,3vw,48px));
    right:calc(-1 * clamp(20px,3vw,48px));
    border-top:1px solid rgba(var(--ink-rgb),.22);
  }
}

/* ── clarity: a padded gutter around the board's dividing rules (owner,
   2026-07-23), matching the mission grid's breathing room. Content is pushed
   off the lines so the separation reads clearly. ── */
@media (min-width:1100px){
  .pl-cell--trace{padding-right:clamp(28px,2.4vw,46px)}
  .pl-right .pl-cell{padding-left:clamp(28px,2.4vw,46px)}
  .pl-right .pl-cell--deck{padding-top:clamp(15px,1.5vw,24px)}
  .pl-right .pl-cell--games{padding-bottom:clamp(15px,1.5vw,22px)}
}