/* Power Five report page: the 1080x1920 stage (the video), plus the toolbar
   and players sheet around it on the interactive page.
   Timeline (seconds): 0-2 title slam, 2-4 badges drop, 4-10 bars race #5 -> #1,
   10-13 champion, 12.9 chips, 15.6 team chips roll to the top scorer, 25 end.
   1.1.1: back to the original full-size layout (Dave's call). ?guides=1 still
   shades what Instagram's buttons and caption cover, for reference. */

@font-face { font-family: "Anton"; font-weight: 400; font-display: block; src: url(../fonts/anton-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 500; font-display: block; src: url(../fonts/barlow-condensed-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: block; src: url(../fonts/barlow-condensed-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: block; src: url(../fonts/barlow-condensed-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-display: block; src: url(../fonts/barlow-condensed-latin-800-normal.woff2) format("woff2"); }

:root { --ink: #FFFFFF; --muted: #9AA5BD; --gold: #FFC83D; --bg: #05070C; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; -webkit-font-smoothing: antialiased; }
button, select { font: inherit; color: inherit; }
button:focus-visible, a:focus-visible, select:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }

/* ---------- page shell (interactive page) ---------- */
.pf-page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.pf-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px 4px; }
.pf-bar a, .pf-bar button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); color: #FFFFFF; text-decoration: none; font-size: 18px; font-weight: 700; letter-spacing: 1px; cursor: pointer; }
.pf-bar .pf-spacer { flex: 1; }
.pf-bar .pf-week { font-family: "Anton", Impact, sans-serif; font-size: 22px; letter-spacing: 2px; padding: 0 4px; white-space: nowrap; }
.pf-bar [aria-disabled="true"] { opacity: 0.35; pointer-events: none; }
.pf-pick { display: flex; gap: 8px; padding: 4px 12px; align-items: center; }
.pf-pick label { color: var(--muted); font-size: 15px; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; }
.pf-pick select { flex: 1; min-width: 0; min-height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.18); background: #0F1420; padding: 0 12px; font-size: 18px; font-weight: 700; }
.pf-hint { text-align: center; color: var(--muted); font-size: 15px; padding: 2px 12px 8px; letter-spacing: 1px; }
.pf-fit { flex: 1; position: relative; min-height: 360px; }
.pf-scaler { position: absolute; left: 50%; top: 0; width: 1080px; height: 1920px; transform-origin: top left; }

/* ---------- the stage (1.1.1: the original full-size layout, Dave's call) ---------- */
.pf-stage { position: relative; width: 1080px; height: 1920px; overflow: hidden; background: var(--bg); color: #FFFFFF; }
.pf-render .pf-stage { position: absolute; left: 0; top: 0; }
.pf-anton { font-family: "Anton", Impact, sans-serif; font-weight: 400; }

.pf-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(130,170,255,0.07) 2px, transparent 2px), linear-gradient(90deg, rgba(130,170,255,0.07) 2px, transparent 2px); background-size: 90px 90px; animation: pf-grid 5s linear infinite; }
@keyframes pf-grid { from { background-position: 0 0; } to { background-position: 0 90px; } }
.pf-spot { position: absolute; left: 50%; top: -520px; width: 1500px; height: 1100px; margin-left: -750px; border-radius: 50%; }
.pf-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 42%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.7) 100%); }
.pf-swipe { position: absolute; top: -700px; left: 0; height: 3300px; transform: translateX(-1400px) rotate(20deg); pointer-events: none; animation: pf-swipe .95s cubic-bezier(.5,0,.3,1) both; }
@keyframes pf-swipe { from { transform: translateX(-700px) rotate(20deg); } to { transform: translateX(1500px) rotate(20deg); } }
.pf-flash { position: absolute; inset: 0; background: #FFFFFF; opacity: 0; pointer-events: none; animation: pf-flash 1.3s ease-out both; }
@keyframes pf-flash { 0% { opacity: 0; } 36% { opacity: 0; } 41% { opacity: 0.8; } 100% { opacity: 0; } }
.pf-flash2 { position: absolute; inset: 0; background: var(--gold); opacity: 0; pointer-events: none; animation: pf-flash2 1s ease-out 9.95s both; }
@keyframes pf-flash2 { 0% { opacity: 0; } 12% { opacity: 0.4; } 100% { opacity: 0; } }

.pf-head { position: absolute; top: 128px; left: 36px; right: 36px; display: flex; flex-direction: column; align-items: center; animation: pf-shake .45s linear .55s both; }
@keyframes pf-shake { 0%, 100% { transform: translate(0,0); } 15% { transform: translate(-14px,6px); } 30% { transform: translate(12px,-8px); } 45% { transform: translate(-9px,4px); } 60% { transform: translate(7px,-3px); } 75% { transform: translate(-4px,2px); } }
.pf-eyebrow { font-size: 30px; font-weight: 700; letter-spacing: 10px; text-transform: uppercase; white-space: nowrap; margin-bottom: 18px; }
.pf-weekline { display: flex; align-items: center; gap: 24px; }
.pf-weekline .pf-rule { width: 90px; height: 6px; flex: none; }
.pf-weekline .pf-anton { font-size: 96px; line-height: 1; letter-spacing: 4px; text-transform: uppercase; white-space: nowrap; }
.pf-titlewrap { position: relative; }
.pf-title { margin: 0; font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: 188px; line-height: 0.92; letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; animation: pf-slam .6s cubic-bezier(.2,.9,.3,1.15) .15s both; }
@keyframes pf-slam { 0% { transform: scale(2.8); opacity: 0; filter: blur(14px); } 55% { transform: scale(.95); opacity: 1; filter: blur(0); } 100% { transform: scale(1); opacity: 1; filter: blur(0); } }
.pf-shock { position: absolute; left: 50%; top: 50%; width: 600px; height: 600px; margin: -300px 0 0 -300px; border-radius: 50%; border: 8px solid; opacity: 0; pointer-events: none; animation: pf-shock 1.4s cubic-bezier(.2,.8,.3,1) both; }
@keyframes pf-shock { 0% { transform: scale(.15); opacity: 0; } 30% { transform: scale(.15); opacity: 0; } 36% { opacity: 1; } 100% { transform: scale(2.8); opacity: 0; } }
.pf-sub { margin-top: 14px; font-size: 28px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: #B8C1D6; white-space: nowrap; }

.pf-rows { position: absolute; top: 584px; left: 36px; right: 36px; display: flex; flex-direction: column; gap: 16px; }
.pf-row { position: relative; isolation: isolate; display: flex; align-items: center; gap: 16px; width: 100%; padding: 0 16px; border: 0; border-radius: 26px; color: inherit; text-align: left; background: rgba(255,255,255,0.03); height: 170px; }
.pf-view .pf-row { cursor: pointer; }
.pf-row.pf-top { background: rgba(255,200,61,0.07); height: 214px; }
.pf-rank { flex: none; width: 64px; line-height: 1; text-align: center; font-size: 84px; color: rgba(255,255,255,0.42); }
.pf-top .pf-rank { font-size: 104px; color: var(--gold); }
.pf-badge { position: relative; flex: none; width: 112px; height: 112px; border-radius: 50%; border: 6px solid; display: flex; align-items: center; justify-content: center; }
.pf-top .pf-badge { width: 136px; height: 136px; }
.pf-badge span { font-family: "Anton", Impact, sans-serif; letter-spacing: 1px; color: #FFFFFF; font-size: 44px; position: relative; }
.pf-top .pf-badge span { font-size: 52px; }
.pf-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.pf-name { display: flex; align-items: baseline; gap: 12px; font-size: 32px; font-weight: 800; letter-spacing: 2px; line-height: 1; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.pf-top .pf-name { font-size: 40px; }
.pf-name .pf-dim { font-weight: 700; color: var(--muted); flex: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; }
.pf-name .pf-main { overflow: hidden; text-overflow: ellipsis; }
.pf-name.pf-ba .pf-dim { flex: 1 1 auto; font-size: 0.8em; letter-spacing: 1.5px; }
.pf-name.pf-ba .pf-main { flex: none; max-width: 70%; }
.pf-track { position: relative; height: 62px; border-radius: 12px; background: rgba(255,255,255,0.06); overflow: hidden; }
.pf-top .pf-track { height: 82px; }
.pf-barwrap { position: relative; height: 100%; }
.pf-fill { position: absolute; inset: 0; border-radius: 12px; overflow: hidden; transform-origin: left center; animation: pf-fill 1.1s cubic-bezier(.16,1,.3,1) both; }
@keyframes pf-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pf-streak { position: absolute; top: 0; bottom: 0; left: 0; width: 28%; transform: translateX(-120%); background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,0.55), rgba(255,255,255,0)); animation: pf-streak 3s ease-in-out infinite; }
@keyframes pf-streak { 0% { transform: translateX(-120%); } 40% { transform: translateX(480%); } 100% { transform: translateX(480%); } }
.pf-pts { position: absolute; left: 100%; top: 0; bottom: 0; transform: translateX(calc(-100% - 18px)); display: flex; align-items: center; white-space: nowrap; font-family: "Anton", Impact, sans-serif; font-size: 46px; animation: pf-ride 1.1s cubic-bezier(.16,1,.3,1) both; }
.pf-top .pf-pts { font-size: 60px; }
@keyframes pf-ride { 0% { left: 0%; opacity: 0; } 12% { opacity: 1; } 100% { left: 100%; opacity: 1; } }

/* One row of chips; each chip as wide as what it shows (the names face, when it flips). */
.pf-chips { display: flex; gap: 8px; }
.pf-chip { position: relative; flex: 1 1 auto; min-width: 0; height: 42px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); font-size: 25px; font-weight: 700; letter-spacing: 0.5px; animation: pf-fadeup .6s cubic-bezier(.2,1,.3,1) both; }
.pf-face { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; white-space: nowrap; }
.pf-face .pf-ca { flex: none; font-weight: 800; }
.pf-face .pf-cb { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pf-face .pf-cc { flex: none; font-weight: 800; }
.pf-chip.pf-flip .pf-front { position: absolute; inset: 0; transform: translateY(-110%); opacity: 0; animation: pf-rollout .45s cubic-bezier(.5,0,.75,0) both; }
@keyframes pf-rollout { from { transform: none; opacity: 1; } to { transform: translateY(-110%); opacity: 0; } }
.pf-chip.pf-flip .pf-back { padding: 0 10px; gap: 5px; font-size: 21px; letter-spacing: 0; animation: pf-rollin .55s cubic-bezier(.2,1.3,.4,1) both; }
.pf-back .pf-cb { font-weight: 600; color: #D5DCEB; }
@keyframes pf-rollin { from { transform: translateY(110%); opacity: 0; } to { transform: none; opacity: 1; } }

.pf-rays { position: absolute; left: 50%; top: 50%; width: 760px; height: 760px; margin: -380px 0 0 -380px; z-index: -1; pointer-events: none; animation: pf-raysin 1s cubic-bezier(.2,1,.3,1) 9.9s both; }
@keyframes pf-raysin { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.pf-rays i { position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255,200,61,.30) 0deg 5deg, rgba(255,200,61,0) 5deg 15deg);
  -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 62%); mask-image: radial-gradient(circle, #000 18%, transparent 62%); animation: pf-spin 18s linear infinite; }
@keyframes pf-spin { to { transform: rotate(360deg); } }
.pf-champ { position: absolute; inset: 0; border-radius: 26px; border: 3px solid var(--gold); box-shadow: 0 0 60px rgba(255,200,61,0.45); pointer-events: none; animation: pf-fadein .5s ease-out 10s both, pf-pulse 1.8s ease-in-out 10.5s infinite; }
@keyframes pf-fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes pf-pulse { 0%, 100% { box-shadow: 0 0 30px rgba(255,200,61,.35); } 50% { box-shadow: 0 0 90px rgba(255,200,61,.75); } }
.pf-crown { position: absolute; top: -74px; left: 50%; margin-left: -48px; width: 96px; height: 72px; transform: rotate(-12deg); animation: pf-crown .85s cubic-bezier(.3,1.4,.5,1) 10.15s both; }
.pf-crown svg { width: 96px; height: 72px; display: block; }
@keyframes pf-crown { 0% { transform: translateY(-300px) rotate(-40deg); opacity: 0; } 65% { transform: translateY(10px) rotate(-6deg); opacity: 1; } 100% { transform: rotate(-12deg); opacity: 1; } }

.pf-bottom { position: absolute; top: 1580px; left: 36px; right: 36px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pf-banner { transform: skewX(-12deg); padding: 10px 40px; background: var(--gold); color: #0A0A0A; font-family: "Anton", Impact, sans-serif; font-size: 64px; line-height: 1.05; letter-spacing: 3px; text-transform: uppercase; white-space: nowrap; box-shadow: 0 10px 40px rgba(255,200,61,0.45); animation: pf-banner .55s cubic-bezier(.2,1.3,.4,1) 10.7s both; }
@keyframes pf-banner { from { transform: skewX(-12deg) scaleX(0); opacity: 0; } to { transform: skewX(-12deg) scaleX(1); opacity: 1; } }
.pf-champline { font-size: 40px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; max-width: 1000px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-champline b { color: var(--gold); }
.pf-outro { position: absolute; left: 0; right: 0; bottom: 56px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pf-outro .pf-anton { font-size: 56px; letter-spacing: 6px; text-transform: uppercase; }
.pf-outro .pf-tag { font-size: 30px; font-weight: 700; letter-spacing: 4px; }

.pf-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pf-conf { position: absolute; top: -60px; animation-timing-function: linear; animation-fill-mode: both; will-change: transform; }
.pf-fa { animation-name: pf-fa; } .pf-fb { animation-name: pf-fb; } .pf-fc { animation-name: pf-fc; } .pf-fd { animation-name: pf-fd; }
@keyframes pf-fa { from { transform: translate3d(0,0,0) rotateZ(0deg) rotateX(0deg); } to { transform: translate3d(140px,2060px,0) rotateZ(720deg) rotateX(900deg); } }
@keyframes pf-fb { from { transform: translate3d(0,0,0) rotateZ(0deg) rotateX(0deg); } to { transform: translate3d(-160px,2060px,0) rotateZ(-540deg) rotateX(720deg); } }
@keyframes pf-fc { from { transform: translate3d(0,0,0) rotateZ(0deg) rotateY(0deg); } to { transform: translate3d(70px,2060px,0) rotateZ(900deg) rotateY(800deg); } }
@keyframes pf-fd { from { transform: translate3d(0,0,0) rotateZ(0deg) rotateY(0deg); } to { transform: translate3d(-60px,2060px,0) rotateZ(-800deg) rotateY(600deg); } }

.pf-slidel { animation: pf-slidel .55s cubic-bezier(.2,1,.3,1) both; }
@keyframes pf-slidel { from { transform: translateX(-160px); opacity: 0; } to { transform: none; opacity: 1; } }
.pf-fadeup { animation: pf-fadeup .6s cubic-bezier(.2,1,.3,1) both; }
@keyframes pf-fadeup { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.pf-drop { animation: pf-drop .8s cubic-bezier(.3,1.45,.5,1) both; }
@keyframes pf-drop { 0% { transform: translateY(-460px) scale(.6) rotate(-25deg); opacity: 0; } 55% { opacity: 1; } 100% { transform: none; opacity: 1; } }

/* ?guides=1: shades what Instagram Reels covers (buttons, caption, top bar) */
.pf-guide { position: absolute; pointer-events: none; z-index: 50; background: rgba(255,0,80,0.28); }

/* ---------- players sheet (interactive page, real phone-size CSS) ---------- */
.pf-sheet-wrap { position: fixed; inset: 0; z-index: 10; display: none; }
.pf-sheet-wrap.open { display: block; }
.pf-scrim { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; background: rgba(2,3,8,0.72); cursor: pointer; }
.pf-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 92vh; max-height: 92dvh; overflow-y: auto; background: #0B0F19; border-top: 4px solid; border-radius: 22px 22px 0 0;
  padding: 18px 16px 28px; box-shadow: 0 -20px 60px rgba(0,0,0,0.6); animation: pf-sheet .35s cubic-bezier(.2,1,.3,1) both; }
@keyframes pf-sheet { from { transform: translateY(100%); } to { transform: none; } }
@media (min-width: 700px) { .pf-sheet { left: 50%; right: auto; width: 640px; margin-left: -320px; } }
.pf-sh-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pf-sh-head .pf-badge { width: 60px; height: 60px; border-width: 4px; }
.pf-sh-head .pf-badge span { font-size: 22px; }
.pf-sh-title { flex: 1; min-width: 0; }
.pf-sh-title small { display: block; color: var(--muted); font-weight: 700; letter-spacing: 2px; font-size: 14px; text-transform: uppercase; }
.pf-sh-title div { font-family: "Anton", Impact, sans-serif; font-size: 26px; line-height: 1.05; text-transform: uppercase; }
.pf-sh-total { text-align: right; }
.pf-sh-total div { font-family: "Anton", Impact, sans-serif; font-size: 32px; line-height: 1; }
.pf-sh-total small { color: var(--muted); font-weight: 700; letter-spacing: 2px; font-size: 12px; }
.pf-close { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.pf-groups { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .pf-groups.pf-two { grid-template-columns: 1fr 1fr; } }
.pf-group { border-radius: 16px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.pf-group header { display: flex; justify-content: space-between; align-items: baseline; }
.pf-group header span { font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: #C9D2E6; font-size: 15px; }
.pf-group header b { font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: 24px; }
.pf-player { display: flex; flex-direction: column; gap: 4px; }
.pf-player .pf-l1 { display: flex; align-items: baseline; gap: 8px; font-size: 18px; }
.pf-player .pf-slot { width: 46px; font-weight: 800; flex: none; }
.pf-player .pf-nm { flex: 1; min-width: 0; font-weight: 600; color: #E3E8F2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-player .pf-pp { font-family: "Anton", Impact, sans-serif; font-size: 20px; }
.pf-player .pf-line { color: #A9B3C9; font-size: 15px; padding-left: 54px; }
.pf-player .pf-mini { height: 6px; border-radius: 4px; background: rgba(255,255,255,0.07); overflow: hidden; margin-left: 54px; }
.pf-player .pf-mini i { display: block; height: 100%; border-radius: 4px; }
.pf-note { color: #8E99B3; font-size: 14px; margin-top: 12px; line-height: 1.4; }

/* Render mode: no clock runs by itself; the renderer sets each frame's time. */
.pf-render .pf-bar, .pf-render .pf-pick, .pf-render .pf-hint, .pf-render .pf-sheet-wrap { display: none !important; }

/* ---------- personal version (1.2.0): real team logos and player photos ---------- */
.pf-badge.pf-has-logo img.pf-logo { position: relative; width: 76%; height: 76%; object-fit: contain; display: block; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.18)); }
.pf-disc { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.pf-disc img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
.pf-coin { position: absolute; right: -14px; bottom: -10px; width: 50px; height: 50px; border-radius: 50%; border: 4px solid; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 36%, #FFFFFF 0%, #F2F5F9 58%, #D2D9E3 100%); box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
.pf-top .pf-coin { width: 60px; height: 60px; right: -16px; bottom: -12px; }
.pf-coin img { width: 74%; height: 74%; object-fit: contain; display: block; }
.pf-coin-abbr { font-family: "Anton", Impact, sans-serif; font-size: 17px; color: #FFFFFF; letter-spacing: 0.5px; }
.pf-top .pf-coin-abbr { font-size: 20px; }
.pf-cface { flex: none; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; border: 2px solid; background: rgba(255,255,255,0.14); margin-left: -4px; }
.pf-chip.pf-flip .pf-back.pf-withface { padding-left: 4px; }