is the entire mechanism because it opens and closes with no
JavaScript at all — so the phone behaviour cannot be broken by a script
error. Each one ships with `open` and the inline script under the block
closes them below 700px, which means a no-JS visitor gets today's fully
expanded band rather than three headings they have no way to open.
On desktop the summary is inert: no marker, no caret, no pointer. */
.pw-rules summary{list-style:none;display:block;cursor:default}
.pw-rules summary::-webkit-details-marker{display:none}
.pw-rules-caret{display:none}
/* ── 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}
/* The corner tool cluster: drag handle + remove. .pw-grab keeps its own
absolute positioning for any markup that still places it alone. */
.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-tools{position:absolute;top:10px;right:10px;display:flex;align-items:center;gap:5px;z-index:3}
.pw-tools .pw-grab{position:static}
/* Deliberately quiet until the card is touched. A red × sitting on every
poster makes a board look like a list of mistakes; a player who wants one
gone will hover or tap the card first. On touch there is no hover, so the
media query below keeps it permanently visible there. */
.pw-remove{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:6px;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:rgba(255,255,255,.55);font-family:inherit;font-size:16px;line-height:1;cursor:pointer;opacity:0;transition:opacity .15s,background .15s,color .15s}
.pw-card:hover .pw-remove,.pw-remove:focus-visible{opacity:1}
.pw-remove:hover{background:var(--accent-red-bg);color:var(--accent-red-text)}
.pw-remove:focus-visible{outline:2px solid var(--accent-green);outline-offset:2px}
.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 ─────────────────────────────────────────────────────────────── */
/* The lock bar renders between the board and the shelf, so it no longer
closes the page — the shelf does. Bottom spacing moved with it. */
.pw-lockwrap{max-width:1100px;margin:34px auto 0;padding:0 64px}
#pw-shelfwrap{padding-bottom:44px}
/* Once the week closes the shelf comes off — it is a picker with nothing left
to pick — and that leaves the lock bar as the last thing in the stage,
sitting flush against the rules grid's border-top with no gap at all. The
shelf's own bottom padding is what held that line off the card, so match it
here rather than putting a margin on .pw-lockwrap, which would also open a
gap between the bar and the shelf on a board that is still open. */
#pw-stage > .pw-lockwrap:last-child{padding-bottom: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)}
/* ── The board's standing note (ruling 6) ───────────────────────────────────
Sits under the lock bar on /play/board/: amber when the board would score
nothing as it stands, green when it is complete and therefore safe. Same
visual language as .pw-oop further down — an explanation, not an error.
EVERY selector here is scoped under .pw-lockwrap on purpose. play.css is
shared with Predict the Final, and .pw-lockwrap is rendered by /play/board/
and by nothing else, so scoping is what keeps this out of the other game. */
.pw-lockwrap .pw-lockmsg{display:flex;gap:10px;align-items:flex-start;margin-top:10px;
padding:11px 15px;border-radius:11px;font-size:12.5px;line-height:1.6;color:#d8d8dd}
.pw-lockwrap .pw-lockmsg .i{flex:none;width:18px;height:18px;border-radius:50%;
display:grid;place-items:center;font-weight:800;font-size:11px;line-height:1;margin-top:1px}
.pw-lockwrap .pw-lockmsg--warn{background:rgba(234,179,8,.07);border:1px solid rgba(234,179,8,.28)}
.pw-lockwrap .pw-lockmsg--warn .i{background:rgba(234,179,8,.22);color:#fde047}
.pw-lockwrap .pw-lockmsg--warn b{color:#fde047;font-weight:700}
.pw-lockwrap .pw-lockmsg--ok{background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.26)}
.pw-lockwrap .pw-lockmsg--ok .i{background:rgba(34,197,94,.2);color:#4ade80}
.pw-lockwrap .pw-lockmsg--ok b{color:#4ade80;font-weight:700}
@media(max-width:700px){.pw-lockwrap .pw-lockmsg{font-size:12px;padding:10px 13px}}
/* ── 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 */
/* Three slots, explicitly placed. It was flex + space-between, which put the
middle item hard against the right edge whenever there was no "next" week,
and on a phone squeezed all three into one line of two-word wraps. Explicit
grid columns mean an absent slot leaves a gap where it was rather than
dragging its neighbours across; below 700px the row becomes one centred
column, because three links across 390px is not a row. */
.pw-weeknav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
gap:12px 20px;margin-top:24px;padding-top:18px;
border-top:1px solid var(--border-light);font-size:12.5px}
.pw-weeknav-prev{grid-column:1;justify-self:start;text-align:left}
.pw-weeknav-mid{grid-column:2;justify-self:center;text-align:center}
.pw-weeknav-next{grid-column:3;justify-self:end;text-align:right}
@media(max-width:700px){
.pw-weeknav{grid-template-columns:1fr;gap:16px;justify-items:center;
margin-top:20px;padding-top:20px}
.pw-weeknav-prev,.pw-weeknav-mid,.pw-weeknav-next{
grid-column:1;justify-self:center;text-align:center}
}
.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)}
/* Sortable column headers (all-time board). They have to read exactly like
the weekly board's static ones — same size, weight, tracking, colour —
because the two theads sit behind one toggle and any difference in the
type reads as a different table. The caret is the only tell. */
.pw-thead .pw-sortbtn{appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;margin:0;font-family:inherit;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);cursor:pointer;display:inline-flex;align-items:center;justify-content:flex-end;gap:4px;white-space:nowrap;flex:0 0 auto;transition:color .12s}
.pw-thead .pw-sortbtn:hover{color:var(--text-secondary)}
.pw-thead .pw-sortbtn.is-on{color:var(--accent-green-text)}
.pw-thead .pw-sortbtn .pw-caret{font-size:7px;line-height:1}
.pw-thead .pw-sortbtn:focus-visible{outline:2px solid var(--accent-green-text);outline-offset:3px;border-radius:3px}
/* Phones drop the Bullseyes and Wks columns (handles need the width), which
would otherwise make two of the sorts unreachable on the device most of
the game is played on. Same buttons, same data-sort hooks, shown as pills
in the .pw-toggle's visual language instead of as column headers. */
.pw-sortbar{display:none}
.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 */
/* The scored-leaderboard headline block. .optb-nav is position:absolute and
54px tall (48px on a phone), so anything less than that here is drawn UNDER
the nav — which is exactly what a 34px inline padding was doing. Clear the
nav, then leave it room to breathe. */
.pw-lbtop{text-align:center;padding:82px 20px 0}
@media(max-width:700px){.pw-lbtop{padding:68px 16px 0}}
.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)}
/* The unit that stops a big bare number in the all-time podium reading as a
score. It ranks on the average now, and "64.3" without a label is the one
thing that would send someone looking for the missing points. */
.pw-grid .v .pw-unit,.pw-pod .p .pw-unit{font-size:.32em;font-weight:700;letter-spacing:.14em;margin-left:.4em;vertical-align:.42em;color:var(--text-muted)}
.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}
/* The record book sits in the slot the weekend strip occupies on the weekly
board, so it wears the same card. Without this it is .pw-grid's bare
full-bleed band, which is the one thing that still made the two boards
look like different pages. */
.pw-grid--card{background:var(--bg-card);border:1px solid var(--border-medium);border-radius:12px;overflow:hidden}
/* 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{padding-top:64px}
.pw-hero--tall{min-height:340px}
.pw-hero--compact,.pw-hero--mid,.pw-hero--board{min-height:150px}
.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-direction:column;align-items:stretch;gap:10px}
.pw-ctas .pw-pill{width:100%}
/* 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}
/* Collapsed by default on a phone. Three stacked cells of prose ran 477px —
most of a viewport spent on rules a returning player has read every week
since they signed up — so the resting state is three tappable headings at
~150px, and the detail is one tap away for whoever actually wants it.
The number stops being a display element on its own line and becomes a
badge in the left gutter, which is what buys the row its single line.
Padding moves from the cell to the summary and the paragraph so the whole
row is the tap target, indented under the badge when open. */
.pw-rules > div,.pw-rules--boxed > div{padding:0}
.pw-rules summary{display:grid;grid-template-columns:26px 1fr 14px;column-gap:12px;
align-items:center;padding:14px 20px;cursor:pointer;
-webkit-tap-highlight-color:transparent}
.pw-rules summary .n,.pw-rules--boxed summary .n{font-size:12px;font-weight:800;
line-height:26px;height:26px;text-align:center;border-radius:8px;
background:rgba(34,197,94,.14);margin-bottom:0}
.pw-rules summary h3,.pw-rules--boxed summary h3{font-size:13px;margin:0}
.pw-rules-caret{display:block;width:14px;height:14px;color:var(--text-faint);
transition:transform .18s}
.pw-rules details[open] .pw-rules-caret{transform:rotate(180deg)}
.pw-rules details > p{padding:0 20px 15px 58px;font-size:12px;line-height:1.5}
/* The line break in rule 1 exists to split two sentences across a wide
column; in a 58px-indented phone column it just strands "5 points". */
.pw-rules details > p br{display:none}
.pw-rules details > p br + b::before{content:" \00b7 "}
/* 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}
/* "50 for the order · 50 for the grosses" comes off the phone entirely: the
collapsed rules below it already carry "— 50 points" on rules 1 and 2, so
the split is stated twice within a screen height of itself. The headline
stays. On desktop the clause still sits inline and costs nothing, so it
stays there. */
.pw-banner b{display:block}
.pw-banner span{display:none}
.pw-grid .v{font-size:30px}
.pw-row,.pw-board,.pw-shelf,.pw-scored{padding-left:16px;padding-right:16px;gap:10px}
/* Scored view stays two-up-and-wrap: it is a result, not a ranking task, and
you want all five scores on screen together. Left-aligned rather than
centred so the fifth card lands under the first instead of being stranded
in the middle of row three, where it reads as a mistake rather than slot 5. */
.pw-scored{justify-content:flex-start}
/* Poster rows marked .pw-cardrow become one horizontal strip on a phone. A
wrapping grid turns five cards into two rows of two and an orphan, which
reads as three separate things rather than one board — and buries the fifth
pick below the fold. The negative margin lets the strip bleed to both edges
so the last card is visibly cut off, which is what tells a thumb to swipe.
The strip is exactly as wide as the viewport and scrolls inside itself — no
negative margin, which would have made the element wider than the document
and given the whole page a horizontal scrollbar to go with the strip's. The
last card is cut off by the viewport edge either way, which is the part that
tells a thumb to swipe. .pw-board is excluded: the editor has its own. */
.pw-cardrow{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
scrollbar-width:none;-webkit-overflow-scrolling:touch;
scroll-padding-left:16px}
.pw-cardrow::-webkit-scrollbar{display:none}
.pw-cardrow > *{flex:0 0 auto}
.pw-cardrow .pw-scard{width:clamp(134px,42vw,158px)}
.pw-cardrow .pw-scard .p{font-size:20px}
/* THE BOARD IS ONE HORIZONTAL STRIP ON A PHONE.
Two-up-and-wrap made every poster ~174px, so slot 1 filled the screen and
slots 3-5 sat below the fold: the one thing this page asks you to do is
read your five in rank order, and you could not see them as an order.
A single strip puts the ranks along the axis they already run on, and the
third card peeking is what says "there is more" without a caption.
The negative margin is deliberate — cards must reach the screen edge or
the strip reads as a clipped grid rather than a scroller. Matches the
homepage's .yl-grid / .upc-strip treatment.
No scroll-snap. The snapport starts at the padding edge, so snapping the
first card to `start` pulls it 16px left and eats the gutter on load —
the strip opens with slot 1 already clipped. The homepage strips
(.yl-grid, .upc-strip, .pstrip-scroll) are all free-scrolling for the
same reason; this matches them. */
.pw-board{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;
-webkit-overflow-scrolling:touch;scrollbar-width:none;
margin:0 -16px;padding-bottom:6px}
.pw-board::-webkit-scrollbar{display:none}
.pw-card,.pw-empty{flex:0 0 auto;width:clamp(132px,38vw,150px)}
.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.
THE GREY BAR. Cards in a row stretch to the tallest (align-items:stretch),
the poster is a fixed 2:3, and the scrim was sized to its own content — so
a card sitting next to a two-line title got its extra height as bare
.pw-card background below the caption. A 20px grey band under exactly one
poster in the row, which reads as a rendering fault rather than a layout.
Two rules fix it, and both are needed:
· the scrim grows into the leftover space, so any remainder is scrim
rather than card background;
· the title reserves two lines whatever it holds, so a row of mixed
one- and two-line titles keeps its grosses on the same baseline
instead of stepping down mid-row. */
/* No hover on a phone, so the remove button never appears — it has to be
visible by default here or the dead end this exists to fix comes straight
back on the half of the traffic that is a phone. Bigger, too: 24px is
under the 44px touch target and it sits next to the drag handle. */
.pw-remove{opacity:1;width:30px;height:30px;font-size:19px}
.pw-tools{gap:6px}
.pw-card .pw-scrim,.pw-scard .pw-scrim{position:static;padding:12px 10px 14px;background:rgba(0,0,0,.55);
flex:1;display:flex;flex-direction:column;justify-content:flex-start}
.pw-card,.pw-scard{display:flex;flex-direction:column}
.pw-card .pw-scrim .n,.pw-scard .pw-scrim .f{line-height:1.25;min-height:2.5em;
display:flex;align-items:center;justify-content:center}
.pw-gross{width:100%;font-size:19px}
/* Champion first. Stacked vertically, "2nd, champ, 3rd" buries the winner in
the middle of the column.
And the card turns on its side. As three portrait cards the podium ran to
roughly 1,000px on a 390px screen — the winner, the runner-up and nothing
else, for three full swipes — which is not what a podium is for. The same
pieces laid out as a row are about 70px each: medal, avatar, placing and
handle, score. Nothing is dropped, it just stops being a poster. */
.pw-podium{flex-direction:column;align-items:stretch;gap:9px}
.pw-pod--champ{order:-1}
.pw-pod{width:auto;max-width:none;text-align:left;padding:12px 14px;
display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;
grid-template-rows:auto auto auto;align-items:center;column-gap:13px;row-gap:1px}
.pw-pod .pw-champ{grid-column:1;grid-row:1/4;flex-direction:row;gap:0}
.pw-pod .pw-champ-t{display:none}
.pw-pod .pw-champ--lg .pw-champ-medal{width:34px;height:34px}
.pw-pod .pw-av{grid-column:2;grid-row:1/4;width:38px;height:38px;font-size:13px;margin:0}
.pw-pod .l{grid-column:3;grid-row:1;margin:0;font-size:9px;letter-spacing:.13em}
.pw-pod .h{grid-column:3;grid-row:2;margin:0;font-size:13.5px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pw-pod .m{grid-column:3;grid-row:3;margin:0;font-size:10.5px}
.pw-pod .p{grid-column:4;grid-row:1/4;margin:0;font-size:23px}
.pw-div{padding-left:16px;padding-right:16px}
.pw-lockwrap{padding:0 16px}
#pw-shelfwrap{padding-bottom:32px}
#pw-stage > .pw-lockwrap:last-child{padding-bottom: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}
/* Full width, not 320. The cap dated from the portrait podium card, where
320px of poster on a 390px screen was the right proportion. The card is a
row now, and a row that stops 38px short of the right edge while every
other block on the page runs to the margin just looks broken. */
.pw-pod,.pw-pod--champ{width:100%;max-width:none}
.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,.pw-thead .h-wks,.pw-tr .b-wks{display:none}
.pw-sortbar{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 14px;padding-bottom:2px;scrollbar-width:none}
.pw-sortbar::-webkit-scrollbar{display:none}
.pw-sortbar .pw-sortlbl{flex:0 0 auto;align-self:center;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-xfaint);margin-right:2px}
.pw-sortbar .pw-sortpill{flex:0 0 auto;appearance:none;-webkit-appearance:none;background:var(--bg-card);border:1px solid var(--border-medium);border-radius:100px;padding:6px 13px;font-family:inherit;font-size:11px;font-weight:700;color:rgba(255,255,255,.6);cursor:pointer;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.pw-sortbar .pw-sortpill.is-on{background:var(--accent-green);border-color:transparent;color:var(--accent-green-on)}
.pw-sortbar .pw-sortpill .pw-caret{font-size:7px;line-height:1}
/* Sorting by a column the phone hides reorders the table for no visible
reason — the rows shuffle and the number they shuffled on is not on
screen. So the active sort's column comes back, for as long as it is
the active sort. Handles get tighter; that is the trade the reader
just asked for by tapping it. */
/* The phone shows FOUR columns, always: rank, player, average, and one
context column. Move by default; whatever you sorted by if you sorted
by something the phone hides. Revealing a fifth instead collapsed the
handles to "@\2026", and the handle is the one thing in the row nobody
can do without. The widths are narrowed off their inline desktop values,
which is what the !important is for. */
.pw-col.pw-show-bull .pw-thead .h-bull{display:inline-flex;width:52px!important}
.pw-col.pw-show-bull .pw-tr .b-bull{display:block;width:52px!important}
.pw-col.pw-show-wks .pw-thead .h-wks{display:inline-flex}
.pw-col.pw-show-wks .pw-tr .b-wks{display:block}
.pw-col.pw-show-bull .pw-thead .h-move,.pw-col.pw-show-bull .pw-tr .pw-move,
.pw-col.pw-show-wks .pw-thead .h-move,.pw-col.pw-show-wks .pw-tr .pw-move{display:none}
/* The weekend strip. On desktop this is one line: label, five films, stamp.
On a phone the label and the stamp were eating two thirds of the width and
the five films were being squeezed into what was left, which is what made
every title wrap mid-word. Label on its own line, one film per row, gross
pushed to the right edge where the eye already goes for a number. */
.pw-strip{flex-direction:column;align-items:stretch;gap:11px;padding:15px 16px}
.pw-strip .list{flex-direction:column;gap:10px;font-size:13.5px}
.pw-strip .list span{display:flex;align-items:baseline;gap:8px}
.pw-strip .list i{flex:none;width:13px}
.pw-strip .list b{flex:1;min-width:0}
.pw-strip .stamp{align-self:flex-end}
.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}
}
/* ── Predict the Final ──────────────────────────────────────────────────────
The second game. Shares this stylesheet because it shares the shell — hero,
pills, dividers and the .pw-toggle are all reused as-is. Only the call card
is new, and it is prefixed .pwf- so nothing here can collide with the .pw-
weekend classes or the .pf- profile classes in account.css.
The field visualisation USED to reuse the movie pages' pred-bar language.
Design handoff rev 4 (frame 10a) replaced it with a track whose marks each
mean one thing — running gross, your call, the model, the field, the median —
because the borrowed bar could not say where the film actually was. The
.pred-bar-* copy that lived here has gone with it. */
.pwf-intro{max-width:1100px;margin:0 auto;padding:22px 64px 0;font-size:14.5px;line-height:1.75;color:var(--text-body)}
.pwf-intro b{color:#fff;font-weight:600}
.pwf-intro .lock{color:var(--accent-green-text);font-weight:600}
.pwf-list{max-width:1100px;margin:0 auto;padding:0 64px}
/* ── A call card ───────────────────────────────────────────────────────────
The card element itself is now just a positioning shell. All the chrome
lives on .pfd (desktop, frame 10a) or on .pwf-card itself at ≤640px, where
the mobile subtree takes over — exactly one of the two is ever displayed. */
.pwf-card{margin-top:18px}
/* ═══════════════════════════════════════════════════════════════════════════
PREDICT THE FINAL — DESKTOP CARD (design handoff rev 4, frame 10a)
---------------------------------------------------------------------------
Replaces the old poster / model-bar / right-rail grid. The bar it used to
draw was a verbatim copy of the movie page's .pred-bar-* — that copy is gone
with it, so there is no longer a second place to keep in step when the movie
page is restyled.
What the marks mean, because the redesign changed them:
.pfd-dot green glowing dot the RUNNING GROSS
.pfd-call dashed green line YOUR CALL
.pfd-band bright green band the MODEL's range
.pfd-run dim green run the spread of every call the field made
.pfd-tick 2px white tick the FIELD MEDIAN
═══════════════════════════════════════════════════════════════════════════ */
.pfd{display:grid;grid-template-columns:150px 1fr;background:#111;
border:1px solid rgba(255,255,255,.09);border-radius:18px;overflow:hidden}
.pwf-card.pwfm-card--settled .pfd{border-color:rgba(34,197,94,.35)}
.pfd-poster{position:relative;border-right:1px solid rgba(255,255,255,.08);min-height:100%}
.pfd-poster .pw-art{position:absolute;inset:0;width:100%;height:100%;border-radius:0;box-shadow:none}
.pfd-poster .pw-art img{width:100%;height:100%;object-fit:cover;display:block}
/* Locked films desaturate rather than grey out — the film is still in theaters,
it is only your call that is fixed. */
.pfd-poster.is-off .pw-art img{filter:brightness(.75) saturate(.8)}
.pfd-main{display:flex;flex-direction:column;min-width:0}
.pfd-head{position:relative;height:80px;flex-shrink:0}
.pfd-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
object-position:center 25%;filter:brightness(.4)}
.pfd-head--off .pfd-bg{filter:brightness(.3) saturate(.7)}
.pfd-scrim{position:absolute;inset:0;background:linear-gradient(to top,#111 5%,rgba(17,17,17,.2) 100%)}
.pfd-headtext{position:absolute;left:20px;bottom:10px;right:20px;display:flex;
flex-direction:column;gap:3px;min-width:0}
.pfd-title{font-size:18px;font-weight:800;color:#fff;letter-spacing:-.01em;line-height:1.1;
text-shadow:0 2px 12px rgba(0,0,0,.6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pfd-hmeta{font-size:11.5px;color:rgba(255,255,255,.6);text-shadow:0 2px 8px rgba(0,0,0,.6);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Lock chip. Carries both class families so initMobile()'s 60s re-render, which
swaps the whole element's className, cannot strip the desktop styling. */
.pfd-chip{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:5px;
font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#eab308;
background:rgba(10,10,10,.65);backdrop-filter:blur(8px);border:1px solid rgba(234,179,8,.3);
border-radius:100px;padding:4px 10px;white-space:nowrap}
.pfd-chip--urgent{color:#f87171;border-color:rgba(248,113,113,.35)}
.pfd-chip--locked{color:rgba(255,255,255,.6);border-color:rgba(255,255,255,.15)}
.pfd-chip--settled{color:#052e16;background:#22c55e;border-color:transparent}
.pfd-body{padding:22px 24px 20px;display:grid;grid-template-columns:1fr 216px;gap:26px;
align-items:stretch;flex:1;min-width:0}
/* EXACTLY TWO grid children: the track column and the rail. The stats line is a
sibling of the slider in the markup, so without this wrapper the body had
three children and grid wrapped the rail onto its own row underneath —
rendering the rail full-width below the track with the stats line floated up
into the rail's slot. Frame 10a is track-beside-rail; keep it two children. */
.pfd-col{min-width:0;display:flex;flex-direction:column;justify-content:center}
/* ── The track ───────────────────────────────────────────────────────────── */
.pfd-slider{position:relative;padding-top:22px;min-width:0}
.pfd-above{position:relative;height:0}
.pfd-al{position:absolute;top:-22px;transform:translateX(-50%);font-size:11px;
color:rgba(255,255,255,.45);white-space:nowrap;font-variant-numeric:tabular-nums}
.pfd-al--max{right:0;left:auto;transform:none}
.pfd-track{position:relative;height:10px;background:rgba(255,255,255,.07);border-radius:5px}
.pfd-run{position:absolute;top:0;height:10px;background:rgba(34,197,94,.22);border-radius:5px}
.pfd-band{position:absolute;top:0;height:10px;background:rgba(34,197,94,.65);border-radius:5px}
.pfd-tick{position:absolute;top:-4px;width:2px;height:18px;background:rgba(255,255,255,.85);
border-radius:1px;transform:translateX(-50%)}
.pfd-call{position:absolute;top:-6px;width:2px;height:22px;transform:translateX(-50%);
background:repeating-linear-gradient(to bottom,#22c55e 0 3px,transparent 3px 6px)}
.pfd-dot{position:absolute;top:50%;width:20px;height:20px;background:#22c55e;border-radius:50%;
transform:translate(-50%,-50%);box-shadow:0 0 0 4px rgba(34,197,94,.18),0 2px 10px rgba(0,0,0,.5)}
.pfd-thumb{position:absolute;top:50%;width:22px;height:22px;background:#111;
border:2.5px solid rgba(255,255,255,.5);border-radius:50%;transform:translate(-50%,-50%);
cursor:grab;touch-action:none}
.pfd-thumb:focus-visible{outline:2px solid var(--focus-ring,rgba(34,197,94,.55));outline-offset:2px}
.pfd-slider:not(.is-readonly) .pfd-track{cursor:pointer;touch-action:none}
/* Locked: everything greys out except the running-gross dot, which is the one
thing still moving. */
.pfd-head--off ~ .pfd-body .pfd-run,
.pwf-card--locked .pfd-run{background:rgba(255,255,255,.12)}
.pwf-card--locked .pfd-band{background:rgba(255,255,255,.3)}
.pwf-card--locked .pfd-call{background:repeating-linear-gradient(to bottom,rgba(255,255,255,.6) 0 3px,transparent 3px 6px)}
.pfd-bubble{position:absolute;top:-6px;transform:translate(-50%,-100%);background:#27272a;
color:rgba(255,255,255,.7);font-size:11px;font-weight:700;border-radius:8px;padding:3px 10px;
white-space:nowrap;border:1px solid rgba(255,255,255,.12);pointer-events:none}
.pfd-bubble::after{content:"";position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);
width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
border-top:5px solid #27272a}
/* Two label rows below the track. placeDeskLabels() moves the users label down
to row 2 when it would collide with "so far", and clamps anything that runs
past an edge — the labels are positioned off live data, so overlap is a
question of when, not if. */
.pfd-row{position:relative;height:16px;margin-top:10px}
.pfd-row--2{margin-top:3px}
.pfd-l{position:absolute;transform:translateX(-50%);white-space:nowrap;font-size:11.5px;
font-weight:600;font-variant-numeric:tabular-nums}
.pfd-l--now{color:rgba(255,255,255,.65)}
.pfd-l--users{color:rgba(255,255,255,.6)}
.pfd-l--you{color:#22c55e;font-weight:700}
.pfd-l--you.is-muted{color:rgba(255,255,255,.75)}
.pfd-stats{font-size:11px;color:rgba(255,255,255,.4);margin-top:12px}
/* ── Right rail ──────────────────────────────────────────────────────────── */
.pfd-rail{border-left:1px solid rgba(255,255,255,.07);padding-left:26px;display:flex;
flex-direction:column;justify-content:center;gap:18px;text-align:center}
.pfd-kick{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#22c55e}
.pfd-kick--off{color:rgba(255,255,255,.45)}
.pfd-static{font-size:26px;font-weight:800;color:#fff;letter-spacing:-.01em}
.pfd-static--empty{color:rgba(255,255,255,.35)}
/* The input IS the displayed number — 10a's dashed-underline value — rather
than a display node shadowing a hidden field, so the rail and the track can
never show two different figures. */
.pfd-rail .pwf-value{margin:0;font-size:26px;font-weight:800;letter-spacing:-.01em;color:#fff;
background:none;border:none;border-bottom:1px dashed rgba(255,255,255,.4);
text-align:center;width:100%;padding:0 0 2px;font-family:inherit;cursor:text}
.pfd-rail .pwf-value:focus{outline:none;border-bottom-color:#22c55e}
.pfd-rail .pwf-value::placeholder{color:rgba(255,255,255,.35)}
.pfd-rail .pwf-count{display:none}
.pfd-rail .pwf-note{font-size:11px;margin:-8px 0 0}
.pfd-rail .pwf-note:empty{display:none}
.pfd-cta{width:100%;border-radius:100px;font-size:11.5px;font-weight:800;letter-spacing:.07em;
text-transform:uppercase;text-align:center;display:flex;align-items:center;justify-content:center;
gap:7px;white-space:nowrap;font-family:inherit;text-decoration:none;
/* min-height keeps the four CTA variants the same size: the mock's solid
button is padded 13px and the two bordered bars 12px, which renders three
different heights as the card cycles through its states. */
min-height:44px;padding:12px 0;border:1px solid transparent;box-sizing:border-box}
.pfd-cta--go{background:#22c55e;color:#052e16;cursor:pointer}
.pfd-cta--go:hover{opacity:.85}
.pfd-cta--rest{background:rgba(34,197,94,.1);color:#22c55e;border-color:rgba(34,197,94,.35);cursor:default}
.pfd-cta--locked{background:#18181b;color:rgba(255,255,255,.55);border-color:rgba(255,255,255,.1);
cursor:default;font-size:10.5px;letter-spacing:.05em}
.pfd-cta--result{background:rgba(34,197,94,.12);color:#22c55e;border-color:rgba(34,197,94,.4)}
.pfd-cta--result:hover{background:rgba(34,197,94,.2)}
.pfd-cta[disabled]{opacity:1}
.pfd .pwf-bar-empty{font-size:12.5px;color:var(--text-faint);line-height:1.6;align-self:center}
.pwf-err{font-size:11.5px;color:#f87171}
.pwf-saved{font-size:11.5px;color:var(--accent-green-text)}
.pwf-empty{max-width:1100px;margin:0 auto;padding:18px 64px 0;font-size:13.5px;
color:var(--text-faint);line-height:1.7;text-align:center}
/* 641–900px was the one band the redesign left behind: too wide for the mobile
card, too narrow for a 216px rail beside a readable track. The rail unstacks
into a row under the slider instead of being squeezed beside it. */
@media(max-width:900px){
.pwf-intro,.pwf-list,.pwf-empty{padding-left:20px;padding-right:20px}
.pfd{grid-template-columns:110px 1fr}
.pfd-body{grid-template-columns:1fr;gap:18px;padding:20px 18px 18px}
.pfd-col{display:block}
.pfd-rail{border-left:none;border-top:1px solid rgba(255,255,255,.07);padding-left:0;
padding-top:16px;display:grid;grid-template-columns:1fr auto;align-items:center;
gap:6px 18px;text-align:left}
.pfd-kick{grid-column:1;align-self:end}
.pfd-static,.pfd-rail .pwf-value{grid-column:1;text-align:left;font-size:22px}
.pfd-cta{grid-column:2;grid-row:1 / span 2;width:auto;padding:12px 26px}
.pfd-rail .pwf-count,.pfd-rail .pwf-note{grid-column:1}
}
/* ═══════════════════════════════════════════════════════════════════════════
PREDICT THE FINAL — MOBILE CARD (design handoff rev 3, frames 8a + 8b)
---------------------------------------------------------------------------
The desktop card is a poster + bar + right rail grid. Below 640px that grid
was a squeeze: the absolutely-positioned .pred-bar labels overlapped, the
rail stranded a "Your call" row, and the button orphaned left. Rather than
patch it, ≤640px swaps to a purpose-built card: backdrop header with a
per-film lock chip, and a slider whose scale labels sit in a static flex row
BELOW the track so they can never collide.
One source of truth: the slider writes into the SAME hidden .pwf-value input
the desktop rail uses, and .pwfm-cta forwards its click to the rail's real
button — so saving, validation and RLS errors all run through the existing
wire() path untouched.
═══════════════════════════════════════════════════════════════════════════ */
.pwfm-head, .pwfm-body { display: none; }
@media (max-width: 640px) {
/* One switch, not a list of structural selectors. The old rule hid the
desktop pieces individually via `.pwf-card > div > .pwf-title` and friends,
which made an anonymous wrapper load-bearing — remove or rename it
and the desktop text reappeared on top of the mobile card. The desktop
subtree is a single element now, so hiding it is one rule that no DOM
change can quietly defeat. */
.pwf-card { display: block; padding: 0; grid-template-columns: none; gap: 0;
background: #111; border: 1px solid rgba(255,255,255,.09);
border-radius: 18px; overflow: hidden; }
.pfd { display: none !important; }
.pwfm-head, .pwfm-body { display: block; }
/* ── Backdrop header ─────────────────────────────────────────────────── */
.pwfm-head { position: relative; height: 88px; }
.pwfm-bg { position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: center 25%; filter: brightness(.4); }
.pwfm-card--locked .pwfm-bg { filter: brightness(.3) saturate(.7); }
.pwfm-fade { position: absolute; inset: 0;
background: linear-gradient(to top,#111 5%,rgba(17,17,17,.2) 100%); }
.pwfm-chip { position: absolute; top: 10px; right: 10px; display: inline-flex;
align-items: center; gap: 5px; font-size: 10px; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase; border-radius: 100px;
padding: 4px 10px; background: rgba(10,10,10,.65);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
color: #eab308; border: 1px solid rgba(234,179,8,.3); }
.pwfm-chip--urgent { color: #f87171; border-color: rgba(248,113,113,.35); }
.pwfm-chip--locked { color: rgba(255,255,255,.6); border-color: rgba(255,255,255,.15); }
.pwfm-chip--settled { color: #052e16; background: #22c55e; border-color: #22c55e; }
.pwfm-thumb { position: absolute; left: 16px; bottom: -26px; width: 52px;
border-radius: 7px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.6);
border: 1px solid rgba(255,255,255,.12); }
.pwfm-thumb img { width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block; }
.pwfm-name { position: absolute; left: 82px; bottom: 10px; right: 16px;
font-size: 16.5px; font-weight: 800; color: #fff; letter-spacing: -.01em;
line-height: 1.1; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
/* ── Body ────────────────────────────────────────────────────────────── */
.pwfm-body { padding: 34px 16px 18px; display: flex; flex-direction: column; gap: 18px; }
.pwfm-meta { font-size: 11.5px; color: rgba(255,255,255,.45); }
.pwfm-meta b { color: rgba(255,255,255,.65); font-weight: 600; }
/* ── Slider ──────────────────────────────────────────────────────────── */
.pwfm-slider { position: relative; padding-top: 30px; touch-action: none; }
.pwfm-bubble { position: absolute; top: 0; transform: translateX(-50%);
background: #22c55e; color: #052e16; font-size: 13px; font-weight: 800;
border-radius: 8px; padding: 4px 10px; white-space: nowrap;
border: 1px solid transparent; cursor: pointer; }
.pwfm-bubble::after { content: ''; position: absolute; left: 50%; bottom: -5px;
transform: translateX(-50%); width: 0; height: 0;
border-left: 5px solid transparent; border-right: 5px solid transparent;
border-top: 5px solid #22c55e; }
.pwfm-bubble--empty { background: #27272a; color: rgba(255,255,255,.7); font-size: 12px;
font-weight: 700; border-color: rgba(255,255,255,.12); }
.pwfm-bubble--empty::after { border-top-color: #27272a; }
.pwfm-bubble--muted { background: #27272a; color: #fff; border-color: rgba(255,255,255,.12); }
.pwfm-bubble--muted::after { border-top-color: #27272a; }
.pwfm-bubble--final { background: #fff; color: #0a0a0a; }
.pwfm-bubble--final::after { border-top-color: #fff; }
.pwfm-track { position: relative; height: 12px; background: rgba(255,255,255,.07);
border-radius: 6px; }
.pwfm-fill { position: absolute; top: 0; height: 12px; left: 0; border-radius: 6px;
background: linear-gradient(90deg,rgba(34,197,94,.12),rgba(34,197,94,.45)); }
.pwfm-fill--grey { background: linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.22)); }
.pwfm-tick { position: absolute; top: -4px; width: 2px; height: 20px;
background: rgba(255,255,255,.7); transform: translateX(-50%); }
.pwfm-tick--green { background: #22c55e; }
.pwfm-dot { position: absolute; top: 50%; width: 24px; height: 24px; background: #22c55e;
border: 4px solid #111; border-radius: 50%; transform: translate(-50%,-50%);
box-shadow: 0 0 0 1.5px rgba(34,197,94,.6), 0 4px 14px rgba(34,197,94,.4);
cursor: grab; touch-action: none; }
.pwfm-dot:active { cursor: grabbing; }
.pwfm-dot--hollow { background: transparent; border: 2.5px solid rgba(255,255,255,.5);
box-shadow: none; }
.pwfm-dot--small { width: 18px; height: 18px; background: #3f3f46; border-width: 3px;
box-shadow: none; cursor: default; }
.pwfm-dot--final { width: 18px; height: 18px; background: #fff; border-width: 3px;
box-shadow: none; cursor: default; }
.pwfm-dot:focus-visible { outline: 2px solid var(--focus-ring, rgba(34,197,94,.55));
outline-offset: 3px; }
.pwfm-scale { display: flex; justify-content: space-between; font-size: 10.5px;
color: rgba(255,255,255,.4); margin-top: 8px; gap: 8px; }
.pwfm-scale b { color: rgba(255,255,255,.6); font-weight: 600; }
.pwfm-scale .pwfm-acc { color: #22c55e; font-weight: 600; }
/* Keyboard entry: tapping the bubble reveals the real input in place. */
.pwfm-edit { position: absolute; top: 0; left: 50%; transform: translateX(-50%);
z-index: 3; display: none; }
.pwfm-slider.is-editing .pwfm-edit { display: block; }
.pwfm-slider.is-editing .pwfm-bubble { visibility: hidden; }
.pwf-card .pwfm-edit .pwf-value { display: block !important; margin: 0; width: 130px;
text-align: center; font-size: 13px; font-weight: 800; padding: 5px 8px;
background: #18181b; color: #fff; border: 1px solid rgba(34,197,94,.5);
border-radius: 8px; font-family: inherit; }
/* ── No published model yet ──────────────────────────────────────────────
A film that opened this Friday has no model until the weekend's numbers
land, and there is no honest range to draw a slider against — so the
rail's input is relocated here and simply shown, rather than hidden
behind a bubble that was never rendered. The dashed underline is the
weekend board's .pw-gross treatment, so "this number is yours to type"
looks the same in both games. */
.pwfm-entry { border: 1px solid rgba(255,255,255,.1); border-radius: 12px;
background: #18181b; padding: 12px 14px 14px; }
.pwfm-entry .k { font-size: 10px; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: rgba(255,255,255,.4);
margin-bottom: 9px; }
.pwfm-edit--inline { position: static; transform: none; display: block; }
.pwf-card .pwfm-edit--inline .pwf-value { width: 100%; text-align: left;
font-size: 25px; font-weight: 800; letter-spacing: -.02em;
padding: 0 0 4px; background: none; border: none; border-radius: 0;
border-bottom: 1px dashed rgba(255,255,255,.35); transition: border-color .2s; }
.pwf-card .pwfm-edit--inline .pwf-value:focus { outline: none;
border-bottom-color: #22c55e; }
.pwfm-hint { font-size: 11.5px; line-height: 1.5; color: rgba(255,255,255,.4); }
/* ── CTA ─────────────────────────────────────────────────────────────── */
.pwfm-cta { width: 100%; background: #22c55e; color: #052e16; border: none;
border-radius: 100px; padding: 14px 0; font-size: 12px; font-weight: 800;
letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
font-family: inherit; display: flex; align-items: center;
justify-content: center; gap: 7px; text-decoration: none; }
.pwfm-cta:active { opacity: .85; }
.pwfm-cta--locked { background: #18181b; color: rgba(255,255,255,.55);
border: 1px solid rgba(255,255,255,.1); cursor: default; }
.pwfm-cta--result { background: rgba(34,197,94,.12); color: #22c55e;
border: 1px solid rgba(34,197,94,.4); }
/* Resting state: a call is saved and untouched, so there is nothing to do.
Quiet confirmation rather than a primary action — it goes solid green only
once the slider actually moves off the saved value. Disabled because it is
a status, not a target: the slider and the bubble stay the ways to edit. */
.pwfm-cta--rest { background: rgba(34,197,94,.12); color: #22c55e;
border: 1px solid rgba(34,197,94,.4); cursor: default; }
.pwfm-cta--rest:active { opacity: 1; }
.pwfm-cta[disabled] { opacity: 1; }
.pwfm-note { font-size: 11.5px; color: #f87171; text-align: center; }
.pwfm-note:empty { display: none; }
/* Settled card gets a green frame (state 4). */
.pwf-card.pwfm-card--settled { border-color: rgba(34,197,94,.35); }
}
/* ═══════════════════════════════════════════════════════════════════════════
REV 5 — LAUNCH
---------------------------------------------------------------------------
Everything the rev 5 handoff adds on top of the shipped slice:
· the shelf, regrouped 2a — three labelled groups + a search fail-safe
· the dead lock button ruling 2 — all five picks required to enter
· 11a .pw-noentry locked out with no board, results still open
· 11b .pw-gate signed out of /play (and of /play/board/,
where it sits under a previewed board)
· 11c .pw-prov* Sunday estimates, before Monday settles them
· 3d .pw-artband the cinematic article banner (mirrored into the
article's own