/* Play: every way aboard. A stock head with the three real things you play on (the printed chart, the television,
   the phone), then one plate per way, stock and night in turn. */

/* ---------- the head ---------- */
.play-head{padding-bottom:clamp(64px,8vw,120px)}
.play-head-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,80px);align-items:center}
.play-head h1{font-size:clamp(3.6rem,2rem + 7vw,8rem);margin-bottom:.12em}
.play-head .lede{color:var(--ink-2);margin-bottom:28px}
.ways-nav{display:grid;max-width:30em;border-top:1px solid var(--rule)}
.ways-nav a{display:block;padding:10px 0;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--ink-2);font-size:1.06rem}
.ways-nav a b{color:var(--ink);font-weight:600}
.ways-nav a:hover,.ways-nav a:hover b{color:var(--scarlet)}
.play-art{position:relative;aspect-ratio:11/9;width:100%}
.play-art img{display:block;width:100%;height:auto}
.pa-sheet{position:absolute;left:0;top:2%;width:44%!important;background:#fff;transform:rotate(-6deg);box-shadow:0 2px 0 rgba(28,24,20,.15), 8px 18px 30px -16px rgba(40,24,10,.55)}
.pa-tv{position:absolute;right:0;top:12%;width:80%;border:clamp(6px,.8vw,11px) solid #050708;border-bottom-width:clamp(8px,1vw,15px);border-radius:6px;background:#050708;box-shadow:0 30px 44px -26px rgba(0,0,0,.7)}
.pa-tv::after{content:"";position:absolute;left:38%;right:38%;bottom:calc(-1 * clamp(22px,2.6vw,36px));height:clamp(8px,1vw,14px);background:#1a1d20;border-radius:0 0 4px 4px}
.pa-phone{position:absolute;right:5%;bottom:-3%;width:28%;padding:clamp(4px,.5vw,7px);background:#121416;border-radius:clamp(14px,1.8vw,24px);box-shadow:0 24px 36px -18px rgba(0,0,0,.65)}
.pa-phone img{border-radius:clamp(10px,1.3vw,18px)}
@media (max-width:860px){
  .play-head-grid{grid-template-columns:1fr}
  .play-art{max-width:560px;margin:8px auto 0}
}

/* ---------- against the bots ---------- */
.bots .split{align-items:start}
.crew{list-style:none;margin:22px 0 30px;padding:0;display:grid;gap:12px}
.crew li{margin:0;color:var(--ink-2);padding-left:18px;border-left:2px solid var(--rule)}
.crew b{color:var(--ink);font-weight:600}
.screen{margin:0;position:sticky;top:calc(var(--head-h) + 32px)}
.screen img{width:100%}
@media (max-width:860px){ .screen{position:static} }

/* ---------- print and play ---------- */
.print-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(36px,6vw,96px);align-items:start}
.kit{list-style:none;margin:0;padding:0;border-top:1px solid rgba(243,234,211,.18)}
.kit li{margin:0;padding:16px 0 12px;border-bottom:1px solid rgba(243,234,211,.18);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 18px;align-items:baseline}
.kit a{font-weight:600;font-size:var(--fs-1);color:var(--stock-hi);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:.2em}
.kit-meta{font-family:var(--fell);font-style:italic;color:#b9c2c3;white-space:nowrap}
.kit p{grid-column:1 / -1;margin:.3em 0 0;color:#d0d6d2;max-width:36em}
.need-title{margin:clamp(36px,4vw,52px) 0 .5em;font-size:var(--fs-1)}
.need{margin:0;padding-left:1.2em;color:#d0d6d2}
.need li::marker{color:var(--gold)}
.sheet{margin:0;position:sticky;top:calc(var(--head-h) + 32px)}
.sheet img{width:100%;background:#fff;transform:rotate(1.5deg);box-shadow:0 30px 44px -26px #000}
.sheet figcaption{margin-top:20px}
.support{margin-top:clamp(56px,7vw,96px);padding-top:clamp(28px,3vw,40px);border-top:1px solid rgba(243,234,211,.22);max-width:760px}
.support-free{font:400 var(--fs-2)/1.15 var(--display);color:var(--stock-hi);margin:0 0 .4em;max-width:none}
.support-offer h3{font:400 var(--fs-3)/1 var(--display);color:var(--gold);margin:1.1em 0 .3em}
.support-offer p{color:#d0d6d2}
.amounts{display:flex;flex-wrap:wrap;gap:12px 16px;margin:20px 0 14px}
.amounts .btn{min-width:5.2em}
.recognition{font-family:var(--fell);font-style:italic}
@media (max-width:860px){ .print-grid{grid-template-columns:1fr} .sheet{position:static;max-width:420px} }

/* ---------- the beta ---------- */
.beta .split{align-items:center}
.phone{margin:0 auto;max-width:360px}
.phone img{width:100%;padding:9px;background:#121416;border-radius:30px;box-shadow:0 30px 44px -24px rgba(40,24,10,.6)}
.phone img{border-radius:30px}
.phone figcaption{text-align:center}
.beta-list{margin:22px 0 22px;padding-left:1.2em}
.beta-list li{color:var(--ink-2);margin:.5em 0}
.beta-list li::marker{color:var(--scarlet)}
.beta p:not(.lede):not(.fine){color:var(--ink-2)}
.beta .actions{margin:26px 0 14px}

/* ---------- party mode ---------- */
.party .lede{color:var(--stock-hi)}
.party-steps{list-style:none;margin:22px 0 18px;padding:0;counter-reset:ps;display:grid;gap:12px}
.party-steps li{margin:0;counter-increment:ps;display:grid;grid-template-columns:1.6em 1fr;gap:10px;color:#d8dcd6}
.party-steps li::before{content:counter(ps);font:400 1.5em/1 var(--display);color:var(--gold)}
.tv{margin:0}
.tv img{width:100%;border:10px solid #050708;border-bottom-width:14px;border-radius:6px;box-shadow:0 30px 50px -28px #000}

/* ---------- tables near you ---------- */
.tables .split{align-items:start}
.tables p{color:var(--ink-2)}
.tables-form{background:var(--stock-hi);border:2px solid var(--ink);box-shadow:var(--shadow-block);padding:clamp(20px,3vw,34px);max-width:none}
.tables-form input[type=email],.tables-form input[type=text]{background:#fffaf0}
.tables-form .btn{justify-self:start}