/* ============================================================================
   play.css — Predict the Weekend
   ----------------------------------------------------------------------------
   Loaded AFTER /account/account.css, which already carries the v2 token block,
   the base reset, .optb-nav and .site-footer. Nothing in here re-declares any
   of that; this file is only the game.

   THEME. The game is dark-only, like the profile hero and unlike the auth
   cards. Every screen in the design is a cinematic backdrop with panels on
   #0a0a0a, and the handoff gives no light values for any of it — a light
   variant would be invention, not implementation. Each page pins dark before
   paint with the same inline script the profile pages use.

   NAMING. Everything is pw-* (Predict the Weekend). The game's display name
   lives in ONE place, PW.NAME in play.js, because the handoff says the name is
   still moving. Nothing in this file spells it out.
============================================================================ */

/* ── Shell ────────────────────────────────────────────────────────────────── */
body.pw-body{background:var(--acc-ground)}

/* ── Heroes ───────────────────────────────────────────────────────────────────
   Four heights across the five screens: 400 landing, 180 board, 200 scored,
   220 all-time. The weekly leaderboard has no fixed height — its content sets
   it — so it gets .pw-hero--auto. */
.pw-hero{position:relative;display:flex;align-items:flex-end;overflow:hidden}
.pw-hero--tall{height:400px}
.pw-hero--compact{height:180px}
.pw-hero--mid{height:200px}
.pw-hero--board{height:220px}
.pw-hero--auto{display:block;height:auto}
.pw-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%;filter:brightness(.35)}
.pw-hero--auto .pw-hero-img{object-position:center 30%;filter:brightness(.3)}
.pw-hero-glow{position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 20%,rgba(34,197,94,.12),transparent)}
.pw-hero-fade{position:absolute;inset:0;background:linear-gradient(to top,#0a0a0a 0%,rgba(10,10,10,.8) 20%,rgba(10,10,10,.25) 65%)}
.pw-hero--compact .pw-hero-fade,
.pw-hero--mid .pw-hero-fade{background:linear-gradient(to top,#0a0a0a 0%,rgba(10,10,10,.7) 30%,rgba(10,10,10,.3) 100%)}
.pw-hero--board .pw-hero-fade{background:linear-gradient(to top,#0a0a0a 0%,rgba(10,10,10,.75) 30%,rgba(10,10,10,.3) 100%)}
.pw-hero--auto .pw-hero-fade{background:linear-gradient(to top,#0a0a0a 0%,rgba(10,10,10,.85) 25%,rgba(10,10,10,.4) 70%)}
.pw-hero-body{position:relative;z-index:5;width:100%}
.pw-hero-centre{text-align:center;padding:0 64px 40px}
.pw-hero-row{padding:0 64px 20px;width:100%;display:flex;align-items:flex-end;gap:14px}
.pw-hero--board .pw-hero-row{padding-bottom:22px}

.pw-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-green-text);margin-bottom:14px}
.pw-eyebrow svg{width:12px;height:12px}
.pw-headline{font-size:50px;font-weight:800;letter-spacing:-.03em;line-height:1.05;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.6)}
.pw-headline--md{font-size:38px;letter-spacing:-.02em;line-height:1.1}
.pw-headline--sm{font-size:34px;letter-spacing:-.02em;text-shadow:none}
.pw-headline--xs{font-size:32px;letter-spacing:-.02em;text-shadow:none}
.pw-subhead{font-size:15px;color:var(--text-secondary);margin-top:12px}
.pw-crumb{font-size:11px;color:rgba(255,255,255,.5);margin-bottom:6px}
.pw-title{font-size:28px;font-weight:800;letter-spacing:-.02em;color:#fff}
.pw-hero-note{font-size:12.5px;color:rgba(255,255,255,.55);white-space:nowrap;padding-bottom:4px;margin-left:auto}

/* ── Pills ────────────────────────────────────────────────────────────────── */
.pw-ctas{display:flex;justify-content:center;gap:12px;margin-top:22px}
.pw-pill{display:inline-flex;align-items:center;justify-content:center;border-radius:100px;padding:12px 30px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;font-family:inherit;text-decoration:none;border:none;transition:opacity .2s,background .2s,border-color .2s,color .2s}
.pw-pill--solid{background:var(--accent-green);color:#fff}
.pw-pill--solid:hover{opacity:.9}
.pw-pill--ghost{background:rgba(255,255,255,.03);color:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.16)}
.pw-pill--ghost:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.pw-pill--sm{padding:12px 30px;font-size:12.5px;letter-spacing:.05em}
.pw-pill--outline{background:none;border:1px solid var(--accent-green-border);color:var(--accent-green-text);padding:9px 22px;font-size:11.5px}
.pw-pill--outline:hover{background:var(--accent-green-bg)}
.pw-pill:disabled{opacity:.45;cursor:default}
.pw-locked-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.4);border-radius:100px;padding:11px 26px;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-green-text)}
.pw-locked-pill svg{width:13px;height:13px}

/* ── Segmented toggle ─────────────────────────────────────────────────────── */
.pw-toggle{display:inline-flex;border-radius:100px;padding:3px}
.pw-toggle--glass{background:rgba(10,10,10,.5);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);margin-top:18px}
.pw-toggle--solid{background:var(--bg-card);border:1px solid var(--border-medium);margin-bottom:4px}
.pw-toggle a{font-size:11px;font-weight:700;border-radius:100px;padding:6px 16px;cursor:pointer;text-decoration:none;color:rgba(255,255,255,.6);transition:color .2s,background .2s}
.pw-toggle--solid a{padding:5px 14px;color:rgba(255,255,255,.55)}
.pw-toggle a:hover{color:#fff}
.pw-toggle a.is-on{color:var(--accent-green-on);background:var(--accent-green)}

/* ── Rules band ───────────────────────────────────────────────────────────── */
.pw-banner{text-align:center;margin:30px auto 0;max-width:1100px;padding:14px 0;border-top:1px solid var(--border-light)}
.pw-banner b{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-body)}
.pw-banner b i{font-style:normal;color:var(--accent-green-text)}
.pw-banner span{font-size:12.5px;color:var(--text-muted);margin-left:10px}

.pw-rules{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--border-light)}
.pw-rules--boxed{max-width:1100px;margin:0 auto;border-bottom:1px solid var(--border-light)}
.pw-rules > div{padding:24px 26px}
.pw-rules--boxed > div{padding:26px}
.pw-rules > div:not(:last-child){border-right:1px solid var(--border-light)}
.pw-rules .n{font-size:20px;font-weight:800;color:var(--accent-green-text);margin-bottom:8px}
.pw-rules--boxed .n{font-size:24px}
.pw-rules h3{font-size:13.5px;font-weight:700;color:#fff;margin-bottom:5px}
.pw-rules--boxed h3{font-size:14px}
.pw-rules h3 span{color:var(--text-muted);font-weight:600}
.pw-rules p{font-size:12.5px;color:var(--text-tertiary);line-height:1.6}
.pw-rules--boxed p{color:var(--text-muted)}
.pw-rules p b{color:#fff;font-weight:600}
.pw-rules p i{font-style:normal;color:var(--accent-green-text);font-weight:700}

/* ── Divider ──────────────────────────────────────────────────────────────── */
.pw-div{display:flex;align-items:center;gap:16px;max-width:1100px;margin:0 auto;padding:36px 64px 0}
.pw-div--narrow{max-width:860px;padding:34px 0 0}
.pw-div--tight{padding-top:22px}
.pw-div::before,.pw-div::after{content:'';flex:1;height:1px;background:var(--border-light)}
.pw-div span{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);white-space:nowrap}
.pw-div span i{font-style:normal;color:var(--accent-yellow-text)}

/* ── Poster cards ─────────────────────────────────────────────────────────── */
.pw-row{display:flex;justify-content:center;align-items:flex-start;flex-wrap:wrap;gap:14px;padding:24px 64px 8px}
.pw-slate{width:132px;text-align:center}
.pw-art{border-radius:10px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.pw-art img{width:100%;display:block;aspect-ratio:2/3;object-fit:cover}
.pw-ph{aspect-ratio:2/3;background:linear-gradient(160deg,#232326,#141416);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;color:rgba(255,255,255,.25)}
.pw-slate .t{font-size:12px;font-weight:600;color:#fff;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pw-slate .m{font-size:10.5px;color:var(--text-faint);margin-top:2px}

/* ── The board ────────────────────────────────────────────────────────────── */
.pw-board{display:flex;justify-content:center;align-items:stretch;flex-wrap:wrap;gap:16px;padding:32px 64px 0}
.pw-card{width:190px;position:relative;border-radius:12px;overflow:hidden;box-shadow:0 16px 48px rgba(0,0,0,.5);cursor:grab;background:var(--bg-card)}
.pw-card.is-dragging{opacity:.45;cursor:grabbing}
.pw-card.is-over{outline:2px solid var(--accent-green);outline-offset:2px}
/* Every poster is forced to 2:3 and cropped to fill. TMDB is *usually*
   consistent, but one film served at a different ratio leaves a black gap
   under a short card while its neighbour stretches — and in a flex row with
   align-items:stretch that gap is very visible. Pinning the ratio makes the
   row uniform whatever the CDN returns. */
.pw-card > img{width:100%;display:block;aspect-ratio:2/3;object-fit:cover}
.pw-card .pw-ph{flex-direction:column;gap:8px;font-size:30px;color:rgba(255,255,255,.3);background:linear-gradient(160deg,#26262a,#121214)}
.pw-card .pw-ph em{font-style:normal;font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.35)}
.pw-chip{position:absolute;top:10px;left:10px;width:28px;height:28px;border-radius:8px;background:var(--accent-green);color:var(--accent-green-on);display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:800}
.pw-grab{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:6px;padding:4px 7px;font-size:11px;letter-spacing:2px;color:rgba(255,255,255,.5)}
.pw-scrim{position:absolute;left:0;right:0;bottom:0;padding:50px 12px 14px;background:linear-gradient(transparent,rgba(0,0,0,.94));text-align:center}
.pw-scrim .n{font-size:13px;font-weight:700;color:#fff;margin-bottom:6px}
.pw-gross{width:110px;background:none;border:none;border-bottom:1px dashed rgba(255,255,255,.4);font-size:21px;font-weight:800;color:#fff;text-align:center;font-family:inherit;padding:0 0 3px;transition:border-color .2s}
.pw-gross:focus{outline:none;border-bottom-color:var(--accent-green)}
.pw-gross:disabled{opacity:1;border-bottom-color:transparent}
.pw-micro{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-top:5px}
.pw-empty{width:190px;aspect-ratio:2/3;position:relative;border-radius:12px;border:1px dashed rgba(34,197,94,.4);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;cursor:pointer;background:none;font-family:inherit;transition:border-color .2s,background .2s}
.pw-empty:hover{border-color:rgba(34,197,94,.8);background:rgba(34,197,94,.04)}
.pw-empty .pw-chip{position:static;background:rgba(34,197,94,.15);color:var(--accent-green-text)}
.pw-empty .l{font-size:12.5px;font-weight:600;color:var(--text-tertiary);text-align:center;line-height:1.6;padding:0 20px}
.pw-empty .l span{color:var(--text-faint);font-weight:400}

/* ── The shelf ────────────────────────────────────────────────────────────── */
.pw-shelf{display:flex;justify-content:center;align-items:flex-start;flex-wrap:wrap;gap:14px;padding:22px 64px 0}
.pw-tile{width:98px;text-align:center;cursor:pointer;background:none;border:none;padding:0;font-family:inherit}
.pw-tile:disabled{opacity:.35;cursor:default}
.pw-tile .pw-art{border-radius:8px}
.pw-tile .pw-art img{opacity:.9}
.pw-tile .pw-ph{border-radius:8px;font-size:16px;color:rgba(255,255,255,.3)}
.pw-tile .t{font-size:11px;font-weight:600;color:#fff;margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pw-tile .a{font-size:10.5px;font-weight:700;color:var(--accent-green-text);margin-top:2px}

/* ── Lock bar ─────────────────────────────────────────────────────────────── */
.pw-lockwrap{max-width:1100px;margin:34px auto 0;padding:0 64px 44px}
.pw-lockbar{display:flex;align-items:center;gap:20px;flex-wrap:wrap;background:var(--bg-card);border:1px solid var(--border-medium);border-radius:14px;padding:18px 26px}
.pw-lockbar .s{font-size:13.5px;font-weight:700;color:#fff}
.pw-lockbar .s span{font-weight:400;color:var(--text-muted)}
.pw-count{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--accent-yellow-text);margin-left:auto}
.pw-count svg{width:13px;height:13px}
.pw-count.is-past{color:var(--accent-red-text)}

/* ── Panels, tables, marquees ─────────────────────────────────────────────── */
.pw-col{max-width:860px;margin:0 auto;padding:26px 20px 48px}
.pw-strip{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--bg-card);border:1px solid var(--border-medium);border-radius:12px;padding:13px 18px;margin-top:18px}
.pw-strip .l{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);flex-shrink:0}
.pw-strip .list{flex:1;display:flex;gap:20px;flex-wrap:wrap;font-size:12.5px;color:var(--text-secondary)}
.pw-strip .list b{font-weight:700;color:#fff}
.pw-strip .list i{font-style:normal;color:var(--text-faint);font-weight:700}
.pw-strip .stamp{font-size:11px;color:var(--text-faint);flex-shrink:0}

/* ← older · latest · newer → under the weekly board */
.pw-weeknav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px;padding-top:16px;border-top:1px solid var(--border-light);font-size:12.5px}
.pw-weeknav .pw-navmid{color:var(--text-faint);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.pw-weeknav .pw-navspacer{flex:0 0 auto;min-width:1px}

.pw-noresult{padding:14px 4px;font-size:13px;color:var(--text-faint);text-align:center}

/* "Other…" overflow tile on the shelf */
.pw-tile--other .pw-art--dashed{display:flex;align-items:center;justify-content:center;border:1px dashed var(--border-strong);background:transparent}
.pw-tile--other:not(:disabled):hover .pw-art--dashed{border-color:var(--accent-green-border)}
.pw-tile--other .pw-ph{font-size:22px;color:var(--text-faint);background:none}

.pw-thead,.pw-tr{display:flex;align-items:center;gap:14px}
.pw-thead{padding:0 10px 9px;border-bottom:1px solid var(--border-medium)}
.pw-thead div{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint)}
.pw-tr{padding:11px 10px;border-bottom:1px solid var(--border-subtle);transition:background .2s}
.pw-tr:hover{background:var(--hover-bg)}
.pw-tr.is-you{background:rgba(34,197,94,.07);border-radius:10px;border-bottom:none;margin-top:2px}
.pw-tr.is-you:hover{background:rgba(34,197,94,.07)}
.pw-rank{width:26px;font-size:12px;font-weight:700;color:var(--text-tertiary);text-align:right;border-left:3px solid rgba(255,255,255,.15);padding-left:6px}
.pw-tr.is-you .pw-rank{color:var(--accent-green-text);border-left-color:var(--accent-green)}
.pw-av{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;flex-shrink:0;overflow:hidden}
.pw-who{flex:1;display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden}
.pw-who a,.pw-who span.h{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pw-flair{flex-shrink:0}
.pw-who a,.pw-who span.h{font-size:13.5px;font-weight:600;color:#fff;text-decoration:none}
.pw-tr.is-you .pw-who a{font-weight:700}
.pw-you{font-weight:600;color:var(--text-muted)}
.pw-num{text-align:right;font-size:13.5px;font-weight:700;color:var(--text-body)}
.pw-num2{text-align:right;font-size:12.5px;color:var(--text-muted)}
.pw-tr.is-you .pw-pts{font-weight:800;color:var(--accent-green-text)}
.pw-move{width:44px;text-align:right;font-size:11px;font-weight:700}
.pw-move.up{color:var(--accent-green-text)}
.pw-move.down{color:var(--accent-red-text)}
.pw-move.flat{color:var(--text-faint)}
.pw-ellipsis{text-align:center;padding:10px 0;font-size:12px;color:var(--text-xfaint)}
.pw-scale{font-size:12px;color:var(--text-faint)}
.pw-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:18px;padding:0 10px}
.pw-link{font-size:12.5px;font-weight:600;color:var(--accent-green-text);text-decoration:none;cursor:pointer}
.pw-link:hover{color:#4ade80}

/* Flair chips */
.pw-flair{border-radius:4px;padding:1px 6px;font-size:9px;font-weight:800;letter-spacing:.08em}
.pw-flair--green{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35);color:var(--accent-green-text)}
.pw-flair--gold{background:rgba(234,179,8,.12);border:1px solid rgba(234,179,8,.35);color:var(--accent-yellow-text)}

/* Podium */
.pw-podium{display:flex;justify-content:center;align-items:flex-end;flex-wrap:wrap;gap:18px;padding:34px 64px 40px}
.pw-pod{width:230px;background:rgba(24,24,27,.85);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:22px;text-align:center}
.pw-pod--champ{width:270px;background:rgba(24,24,27,.9);border-color:rgba(234,179,8,.55);border-radius:16px;padding:28px 22px;box-shadow:0 24px 80px rgba(234,179,8,.12)}
.pw-pod .l{font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--text-muted);margin-bottom:12px}
.pw-pod--champ .l{color:var(--accent-yellow-text)}
.pw-pod .pw-av{width:52px;height:52px;font-size:15px}
.pw-pod--champ .pw-av{width:66px;height:66px;font-size:19px;border:2px solid rgba(234,179,8,.6)}
.pw-pod .h{font-size:14px;font-weight:700;color:#fff;margin-top:10px;text-decoration:none;display:block}
.pw-pod--champ .h{font-size:16px}
.pw-pod .m{font-size:10.5px;color:var(--text-muted);margin-top:3px}
.pw-pod--champ .m{font-size:11px}
.pw-pod .p{font-size:30px;font-weight:800;color:#fff;letter-spacing:-.02em;margin-top:10px}
.pw-pod--champ .p{font-size:42px;color:var(--accent-yellow-text);line-height:1}
.pw-unlocked{display:inline-flex;align-items:center;gap:7px;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35);border-radius:100px;padding:6px 14px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-green-text);margin-top:14px}

/* Ruled stat grids — totals band, top-3 marquee, record book, week strip */
.pw-grid{display:grid;border-top:1px solid var(--border-light);border-bottom:1px solid var(--border-light)}
.pw-grid--3{grid-template-columns:repeat(3,1fr)}
.pw-grid--4{grid-template-columns:repeat(4,1fr)}
.pw-grid > div{padding:26px 18px;text-align:center}
.pw-grid > div:not(:last-child){border-right:1px solid var(--border-light)}
.pw-grid .v{font-size:44px;font-weight:800;letter-spacing:-.02em;line-height:1;color:#fff}
.pw-grid .v.g{color:var(--accent-green-text)}
.pw-grid .v.a{color:var(--accent-yellow-text)}
.pw-grid .l{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);margin-top:8px}
.pw-grid--record > div{padding:22px 26px}
.pw-grid--record .v{font-size:22px}
.pw-grid--record .l{font-size:10px;letter-spacing:.14em;margin-bottom:8px;margin-top:0}
.pw-grid--record .m{font-size:11.5px;color:var(--text-muted);margin-top:6px}
.pw-grid--top3 > div{padding:30px 24px}
.pw-grid--top3 .l{font-size:10px;letter-spacing:.16em;margin:0 0 10px}
.pw-grid--top3 .idrow{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px}
.pw-grid--top3 .pw-av{width:26px;height:26px;font-size:9px}

/* Four-week strip */
.pw-weeks{display:grid;grid-template-columns:repeat(4,1fr);max-width:860px;margin:20px auto 0;border:1px solid var(--border-light);border-radius:14px;overflow:hidden}
.pw-weeks > div{padding:18px;text-align:center;background:var(--bg-card)}
.pw-weeks > div:not(:last-child){border-right:1px solid var(--border-light)}
.pw-weeks .v{font-size:20px;font-weight:800;line-height:1;color:#fff}
.pw-weeks .l{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);margin-top:7px}
.pw-weeks .none .v{color:var(--text-xfaint)}
.pw-weeks .now{background:rgba(34,197,94,.08)}
.pw-weeks .now .v{color:var(--accent-green-text)}
.pw-weeks .now .l{color:var(--accent-green-text)}

/* ── Scored cards ─────────────────────────────────────────────────────────── */
.pw-scored{display:flex;justify-content:center;align-items:stretch;flex-wrap:wrap;gap:16px;padding:26px 64px 20px}
.pw-scard{width:186px;position:relative;border-radius:12px;overflow:hidden;box-shadow:0 16px 48px rgba(0,0,0,.5);background:var(--bg-card)}
.pw-scard > img{width:100%;display:block;aspect-ratio:2/3;object-fit:cover}
.pw-scard .pw-scrim{padding:52px 12px 13px;background:linear-gradient(transparent,rgba(0,0,0,.95))}
.pw-scard .p{font-size:24px;font-weight:800;letter-spacing:-.01em;line-height:1;color:#fff}
.pw-scard .p.g{color:var(--accent-green-text)}
.pw-scard .f{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-tertiary);margin-top:5px}
.pw-scard .c{font-size:10px;color:var(--text-muted);margin-top:3px}
.pw-stamp{position:absolute;top:10px;right:10px;background:rgba(234,179,8,.9);color:#1c1400;border-radius:6px;padding:4px 9px;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.pw-chip--shift{display:inline-flex;align-items:center;gap:4px;width:auto;height:28px;padding:0 9px;background:rgba(234,179,8,.9);color:#1c1400;font-size:13px}

/* ── Notes and empty states ───────────────────────────────────────────────── */
.pw-note{text-align:center;padding:26px 64px 44px;font-size:12.5px;color:var(--text-tertiary);line-height:1.7;max-width:640px;margin:0 auto}
.pw-legal{text-align:center;padding:16px 64px 44px;font-size:12px;color:var(--text-faint)}
.pw-legal span{color:var(--text-tertiary)}
.pw-blank{max-width:640px;margin:0 auto;padding:56px 20px;text-align:center}
.pw-blank h2{font-size:20px;font-weight:800;color:#fff;margin-bottom:8px}
.pw-blank p{font-size:13.5px;color:var(--text-tertiary);line-height:1.7}
.pw-blank .pw-pill{margin-top:20px}
.pw-err{background:var(--accent-red-bg);border:1px solid var(--accent-red-border);border-radius:10px;padding:12px 14px;font-size:13px;color:var(--accent-red-text);max-width:860px;margin:16px auto 0}

/* ── Prose, for the rules page ────────────────────────────────────────────── */
.pw-prose{max-width:720px;margin:0 auto;padding:36px 20px 64px;font-size:14.5px;line-height:1.75;color:var(--text-secondary)}
.pw-prose h2{font-size:17px;font-weight:800;color:#fff;margin:32px 0 10px}
.pw-prose h2:first-child{margin-top:0}
.pw-prose p,.pw-prose li{margin-bottom:12px}
.pw-prose ul,.pw-prose ol{padding-left:22px}
.pw-prose strong{color:#fff;font-weight:700}
.pw-prose table{width:100%;border-collapse:collapse;margin:14px 0 20px;font-size:13.5px}
.pw-prose th,.pw-prose td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border-light)}
.pw-prose th{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint)}

/* ── Responsive ───────────────────────────────────────────────────────────────
   The handoff has no responsive rules at all — five fixed 1280px frames — and
   says to inherit the site's conventions, so this is the site's 700px
   breakpoint applied to each component. The poster rows already wrap rather
   than scroll horizontally, which on a phone beats a 5-wide row of 190px cards
   in a carousel nobody discovers. */
@media(max-width:700px){
  .pw-hero--tall{height:340px}
  .pw-hero--compact,.pw-hero--mid,.pw-hero--board{height:auto;min-height:150px;padding-top:56px}
  .pw-hero-centre{padding:0 16px 28px}
  .pw-hero-row{padding:0 16px 18px;flex-wrap:wrap;gap:10px}
  .pw-hero-note{margin-left:0;white-space:normal}
  .pw-headline{font-size:29px}
  .pw-headline--md{font-size:25px}
  .pw-headline--sm,.pw-headline--xs{font-size:23px}
  .pw-subhead{font-size:13.5px}
  .pw-title{font-size:21px}
  .pw-ctas{flex-wrap:wrap}
  /* The rules band goes to ONE column, not two. Two columns of 12.5px prose in
     a 390px viewport gives each cell about 170px of measure, which breaks
     "Guess the gross" into a ladder of two-word lines — and the third cell
     orphans onto its own row anyway. The stat grids keep two columns because
     they hold numbers, not sentences. */
  .pw-rules{grid-template-columns:1fr}
  .pw-grid--3,.pw-grid--4,.pw-weeks{grid-template-columns:repeat(2,1fr)}
  .pw-rules > div,.pw-grid > div,.pw-weeks > div{border-right:none!important;border-bottom:1px solid var(--border-light)}
  .pw-rules > div:last-child{border-bottom:none}

  /* The divider label carries the live countdown, and nowrap sent
     "This weekend's board — Aug 14–16 · locks in 2d 3h" 14px past the right
     edge of a phone. Let it wrap and centre instead. */
  .pw-div{flex-wrap:wrap}
  .pw-div span{white-space:normal;text-align:center;flex:1 1 100%;order:-1}
  .pw-div::before,.pw-div::after{display:none}

  /* Same problem, smaller: the scoring banner's trailing clause sits inline on
     desktop and wraps mid-phrase on a phone. Stack it. */
  .pw-banner b,.pw-banner span{display:block}
  .pw-banner span{margin-left:0;margin-top:6px}
  .pw-grid .v{font-size:30px}
  .pw-row,.pw-board,.pw-shelf,.pw-scored{padding-left:16px;padding-right:16px;gap:10px}
  .pw-card,.pw-empty{width:calc(50% - 5px)}
  .pw-scard{width:calc(50% - 5px)}
  .pw-slate{width:calc(33.333% - 7px)}
  /* Three across, not four. At four the tiles are 85px wide and every title
     truncates to "The End of …", which tells a player nothing about what they
     are adding to their board. */
  .pw-tile{width:calc(33.333% - 7px)}

  /* The scrim stops floating over the poster and sits under it.
     At 170px wide a two-line film title plus a gross plus a caption is taller
     than the space the gradient covers, so the overlay version pushes text up
     over the middle of the image where it is unreadable. Below the poster it
     always fits, and the rank chip and bullseye stamp still sit on the art
     where the design wants them. */
  .pw-card .pw-scrim,.pw-scard .pw-scrim{position:static;padding:12px 10px 14px;background:rgba(0,0,0,.55)}
  .pw-card,.pw-scard{display:flex;flex-direction:column}
  .pw-gross{width:100%;font-size:19px}

  /* Champion first. Stacked vertically, "2nd, champ, 3rd" buries the winner in
     the middle of the column. */
  .pw-podium{flex-direction:column;align-items:center}
  .pw-pod--champ{order:-1}
  .pw-div{padding-left:16px;padding-right:16px}
  .pw-lockwrap{padding:0 16px 32px}
  .pw-lockbar{gap:12px}
  .pw-count{margin-left:0}
  .pw-lockbar .pw-pill,.pw-lockbar .pw-locked-pill{width:100%;justify-content:center}
  .pw-podium{padding:24px 16px 30px}
  .pw-pod,.pw-pod--champ{width:100%;max-width:320px}
  .pw-col{padding:20px 16px 36px}
  /* Drop the bullseye column and the flair chips from table rows. The chips
     were winning the fight for horizontal space and squeezing handles down to
     "@track…", which is the one thing in the row nobody can do without. The
     champion still wears their badge on the podium directly above. */
  .pw-thead .h-bull,.pw-tr .b-bull{display:none}
  .pw-tr .pw-flair{display:none}
  .pw-who a,.pw-who span.h{min-width:0}
  .pw-note,.pw-legal{padding-left:16px;padding-right:16px}
}