/* Opt-in game studies reuse Playroom content and artwork. */
html[data-game] body.playroom{--ink:#233c34;--muted:#526258;--wash:#f8f3e6;--lime:#d8e4b7;--game-card:#fffdf4;--game-accent:#eac77c;--game-edge:#233c34;background:var(--wash)}
html[data-game] .playroom .pop-hero{background:var(--lime);color:var(--ink);margin-top:-76px;padding-top:125px}
html[data-game] .playroom .hero-copy>p{color:var(--ink)}
html[data-game] .playroom .pop-hero::before,html[data-game] .playroom main::after{display:none}
html[data-game] .playroom .pop-hero-inner{padding-bottom:65px;gap:35px}
html[data-game] .playroom .pop-hero h1{font-size:clamp(2.9rem,5.3vw,5.1rem)}
html[data-game] .playroom .pop-human{position:relative;max-width:550px}
html[data-game] .playroom .pop-human img{mix-blend-mode:normal}
html[data-game] .playroom .outcomes-bar{margin-top:35px;border:2px solid var(--game-edge);background:var(--game-card);padding:25px;gap:24px}
html[data-game] .playroom .outcomes-bar dd{color:var(--ink)}
html[data-game] .playroom .work-grid article{padding:26px;background:var(--game-card);border:2px solid var(--game-edge)}
html[data-game] .playroom .professional-learning{border-color:var(--game-edge)}
html[data-game] .playroom .page-ending{background:var(--lime);color:var(--ink);padding-bottom:145px}
html[data-game] .playroom .site-footer{background:var(--ink);padding-bottom:120px}
html[data-game] .playroom .button,html[data-game] .playroom .btn:not(.ghost){background:var(--ink);color:var(--game-card);border-color:var(--ink)}
html[data-game] .playroom .article-list>li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px}
html[data-game] .playroom .article-list>li article{min-width:0}
html[data-game] .playroom .article-list>li.note-saved{background:var(--game-card)}
html[data-game] .playroom :is(a,button,summary):focus-visible{outline:3px solid var(--ink);outline-offset:5px}
.explore-console{width:100%;max-width:520px;padding:24px;background:var(--game-card);border:2px solid var(--game-edge);text-align:left;position:relative}
.explore-console h2{font-size:1.45rem;margin:0 0 18px;letter-spacing:-.025em}
.route-choice{display:grid;grid-template-columns:32px 1fr 20px;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--game-edge);text-decoration:none;color:var(--ink);font-size:.95rem}
.route-choice:hover{background:var(--game-accent)}
.route-number{font-size:.75rem;opacity:.75}
.route-choice.explored .route-mark{background:var(--ink);color:var(--game-card);text-align:center}
.explore-progress{font-size:.8rem;color:var(--muted);margin:18px 0 0}
.question-deck{max-width:760px;margin:65px auto 0;background:var(--game-card);border:2px solid var(--game-edge);padding:30px;position:relative;box-shadow:6px 6px 0 var(--game-accent)}
.deck-header{display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.deck-header h3{font-size:1.2rem;margin:0;letter-spacing:-.02em}
.deck-count{font-size:.8rem;white-space:nowrap}
.playroom .question-deck .deck-question{font-size:1.65rem;line-height:1.4;color:var(--ink);min-height:3em;margin:22px 0}
.draw-question,.save-note{font:500 .875rem/1.4 Inter,Arial,sans-serif;padding:12px 18px;border:2px solid var(--game-edge);background:var(--game-accent);color:var(--ink);cursor:pointer;min-height:44px;box-shadow:3px 3px 0 var(--game-edge)}
.draw-question:hover,.save-note:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--game-edge)}
.save-note{margin-right:8px;min-width:84px}
.reading-status{font-size:.875rem;color:var(--muted);margin:0 0 20px}
.game-switcher{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:5px;padding:7px;background:var(--game-card);border:2px solid var(--game-edge);box-shadow:4px 4px 0 var(--game-edge);z-index:50;max-width:calc(100% - 24px);font:500 .8rem/1.4 Inter,Arial,sans-serif}
.game-switcher a{padding:10px 12px;white-space:nowrap;text-decoration:none;color:var(--ink)}
.game-switcher a[aria-current]{background:var(--ink);color:var(--game-card)}
.game-switcher a:hover{outline:1px solid var(--game-edge);outline-offset:-1px}

/* Arcade: an ink-blue cabinet, pixel geometry and compact control panels. */
html[data-game="arcade"] body.playroom{--ink:#192845;--muted:#515d72;--wash:#edf0f6;--lime:#c9d7f0;--game-card:#fffaf0;--game-accent:#efb86d;--game-edge:#192845;--heading:ui-monospace,monospace;--serif:ui-monospace,monospace}
html[data-game="arcade"] .playroom :is(h1,h2,h3,h4,blockquote,.outcomes-bar dd,.scope-grid dd){font-family:ui-monospace,monospace;letter-spacing:-.055em;font-weight:800}
html[data-game="arcade"] .playroom .site-header{border:2px solid #192845;border-radius:0;background:#fffaf0ed;box-shadow:5px 5px 0 #192845}
html[data-game="arcade"] .playroom .pop-hero{background:#192845;color:#fffaf0;background-image:linear-gradient(#fff1 1px,transparent 1px),linear-gradient(90deg,#fff1 1px,transparent 1px);background-size:32px 32px}
html[data-game="arcade"] .playroom .hero-copy>p{color:#e3e9f5}
html[data-game="arcade"] .playroom .pop-hero-inner{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;text-align:left}
html[data-game="arcade"] .playroom .hero-copy{grid-column:1;grid-row:1/3}
html[data-game="arcade"] .playroom .hero-copy>p{margin-left:0}
html[data-game="arcade"] .playroom .actions{justify-content:flex-start}
html[data-game="arcade"] .playroom .pop-human{grid-column:2;grid-row:1;width:100%;padding:15px;background:#c9d7f0;border:6px double #192845;outline:3px solid #c9d7f0;box-shadow:10px 10px 0 #0c162b}
html[data-game="arcade"] .explore-console{grid-column:2;grid-row:2;color:var(--ink);box-shadow:7px 7px 0 #0c162b}
html[data-game="arcade"] .playroom .button{background:#efb86d;color:#192845;border-radius:0;box-shadow:4px 4px 0 #fffaf0}
html[data-game="arcade"] .playroom .work-grid article,html[data-game="arcade"] .playroom .outcomes-bar{box-shadow:5px 5px 0 #192845}
html[data-game="arcade"] .playroom .portrait-note{border:5px solid #192845;border-radius:0;box-shadow:9px 9px 0 #efb86d}
html[data-game="arcade"] .playroom .page-ending{background:#192845;color:#fffaf0}
html[data-game="arcade"] .playroom .page-ending a{color:#fffaf0}
html[data-game="arcade"] .playroom .page-ending .button{color:#192845}
html[data-game="arcade"] .playroom .pop-hero :focus-visible,html[data-game="arcade"] .playroom .page-ending :focus-visible{outline-color:#efb86d}

/* Field Quest: a field notebook, route markers and paper artifacts. */
html[data-game="quest"] .playroom .site-header{border-radius:6px;background:#fffdf4ed;border:1px solid #233c34;box-shadow:0 5px 0 #233c3420}
html[data-game="quest"] .playroom .pop-hero{background-color:#d8e4b7;background-image:radial-gradient(#233c341d 1px,transparent 1px);background-size:18px 18px}
html[data-game="quest"] .playroom .hero-copy{max-width:920px}
html[data-game="quest"] .playroom .pop-hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
html[data-game="quest"] .playroom .hero-copy{grid-column:1/-1;justify-self:center}
html[data-game="quest"] .playroom .pop-human{grid-column:1;width:100%;transform:rotate(-3deg)}
html[data-game="quest"] .explore-console{grid-column:2;transform:rotate(2deg);border-radius:2px;box-shadow:7px 7px 0 #233c3426}
html[data-game="quest"] .explore-console::before{content:"";position:absolute;width:90px;height:22px;background:#eac77caa;top:-12px;left:calc(50% - 45px);transform:rotate(-5deg)}
html[data-game="quest"] .route-number{border:1px solid var(--ink);border-radius:50%;width:28px;height:28px;display:grid;place-items:center;opacity:1}
html[data-game="quest"] .playroom .work-grid{counter-reset:step}
html[data-game="quest"] .playroom .work-grid article{counter-increment:step;position:relative;border:1px solid #233c3466;border-radius:3px;padding-top:45px}
html[data-game="quest"] .playroom .work-grid article::before{content:counter(step,decimal-leading-zero);position:absolute;top:-18px;left:24px;background:#233c34;color:#fffdf4;border-radius:50%;width:36px;height:36px;display:grid;place-items:center;font-size:.8rem}
html[data-game="quest"] .playroom .outcomes-bar{border:1px dashed var(--game-edge);border-radius:3px}
html[data-game="quest"] .question-deck{transform:rotate(-1deg);border-width:1px;background:repeating-linear-gradient(#fffdf4 0 31px,#233c3410 31px 32px)}
html[data-game="quest"] .playroom .article-list>li{border-top-style:dashed}
html[data-game="quest"] .playroom .page-ending{border-top:2px dashed #233c3455}

/* Tabletop: a play mat, oversized counters and tactile rounded cards. */
html[data-game="tabletop"] body.playroom{--ink:#342343;--muted:#675872;--wash:#fcf3e7;--lime:#d8c7ed;--game-card:#fffdf7;--game-accent:#f1ba77;--game-edge:#342343;--heading:Inter,Arial,sans-serif}
html[data-game="tabletop"] .playroom :is(h1,h2,h3,h4,blockquote,.outcomes-bar dd,.scope-grid dd){font-family:Inter,Arial,sans-serif;font-weight:750;letter-spacing:-.055em}
html[data-game="tabletop"] .playroom .site-header{border:2px solid #342343;border-radius:30px;box-shadow:0 6px 0 #342343;background:#fffdf7f0}
html[data-game="tabletop"] .playroom .pop-hero-inner{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;text-align:left;gap:35px}
html[data-game="tabletop"] .playroom .hero-copy{grid-column:1;grid-row:1}
html[data-game="tabletop"] .playroom .hero-copy>p{margin-left:0}
html[data-game="tabletop"] .playroom .actions{justify-content:flex-start}
html[data-game="tabletop"] .playroom .pop-human{grid-column:2;grid-row:1;width:100%;border-radius:48% 48% 20px 20px;background:#fffdf7;border:3px solid #342343;padding:25px;box-shadow:12px 12px 0 #b19acb;transform:rotate(3deg)}
html[data-game="tabletop"] .explore-console{grid-column:1/-1;max-width:none;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;border-radius:24px;box-shadow:0 8px 0 #342343}
html[data-game="tabletop"] .explore-console h2{grid-column:1/-1;margin-bottom:0}
html[data-game="tabletop"] .route-choice{border:2px solid #342343;border-radius:16px;padding:18px 12px;grid-template-columns:1fr 20px;gap:8px;background:#f1ba77}
html[data-game="tabletop"] .route-number{grid-column:1/-1;font-size:1.8rem;font-weight:700;opacity:1}
html[data-game="tabletop"] .explore-progress{grid-column:1/-1;margin-top:5px}
html[data-game="tabletop"] .playroom .outcomes-bar{background:none;border:0;padding:10px 0;gap:20px}
html[data-game="tabletop"] .playroom .outcomes-bar>div{background:#fffdf7;border:2px solid #342343;border-radius:20px;padding:22px;box-shadow:0 6px 0 #342343}
html[data-game="tabletop"] .playroom .work-grid article{border-radius:22px;box-shadow:0 7px 0 #342343}
html[data-game="tabletop"] .playroom .button,html[data-game="tabletop"] .draw-question,html[data-game="tabletop"] .save-note{border-radius:12px;box-shadow:0 5px 0 #342343}
html[data-game="tabletop"] .question-deck{border-radius:24px;box-shadow:7px 8px 0 #d8c7ed,9px 10px 0 #342343}
html[data-game="tabletop"] .playroom .article-list>li{border:2px solid #342343;border-radius:18px;padding:0 20px;margin-bottom:16px;background:#fffdf7;box-shadow:0 4px 0 #342343}
html[data-game="tabletop"] .game-switcher{border-radius:18px}

@media(max-width:800px){
 html[data-game] .playroom .pop-hero-inner{display:flex;flex-direction:column;text-align:center;padding-block:35px 55px;gap:30px}
 html[data-game] .playroom .hero-copy>p{margin-inline:auto}
 html[data-game] .playroom .actions{justify-content:center}
 html[data-game] .playroom .pop-hero h1{font-size:clamp(2.5rem,9vw,4rem)}
 html[data-game] .playroom .pop-human{width:min(100%,460px);padding:12px}
 html[data-game] .explore-console{transform:none;max-width:540px}
 html[data-game="tabletop"] .explore-console{display:block}
 html[data-game="tabletop"] .route-choice{margin-top:12px;grid-template-columns:32px 1fr 20px;text-align:left;padding:12px}
 html[data-game="tabletop"] .route-number{grid-column:1;font-size:1rem}
 html[data-game] .playroom .outcomes-bar{padding:20px;gap:20px}
 html[data-game="tabletop"] .playroom .outcomes-bar{padding:0}
 html[data-game="tabletop"] .playroom .outcomes-bar>div{padding:16px}
 html[data-game] .playroom .article-list>li{gap:15px}
 .question-deck{padding:22px;margin-top:40px}
 .deck-header{align-items:start}.deck-header h3{font-size:1.05rem}
 .playroom .question-deck .deck-question{font-size:1.35rem;min-height:4.2em}
 .game-switcher{flex-wrap:wrap;justify-content:center;width:max-content}
 .game-switcher a{padding:9px 10px;font-size:.75rem}
 html[data-game] .playroom .page-ending{padding-bottom:160px}
}
@media(prefers-reduced-motion:reduce){html[data-game] *,html[data-game] *::before,html[data-game] *::after{scroll-behavior:auto!important;transition:none!important}}

html[data-game] .playroom .certification-footer{padding-bottom:150px}
