/* PlayClock Fan page (NEW FILE, PROMPT 1). Uses the watch site's theme variables; nothing here restyles other pages. */
.f-page{display:flex;flex-direction:column;gap:18px;max-width:1000px;margin:0 auto;min-width:0}
.f-skel .w-h{min-height:1.2em}
/* League banner: fixed 8:1 slot, image only, cropped to fit — it can never change the page layout */
.f-league{display:block;width:100%;aspect-ratio:8/1;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.06)}
.f-league img{display:block;width:100%;height:100%;object-fit:contain}
.f-team{display:flex;align-items:center;gap:14px;min-height:72px}
.f-team .w-h{margin:0;overflow-wrap:anywhere}.f-team .w-muted{margin:2px 0 0}
.f-tlogo{flex:0 0 64px;width:64px;height:64px;border-radius:14px;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:34px;background:var(--w-team,rgba(255,255,255,.08))}
.f-tlogo img{width:100%;height:100%;object-fit:cover;display:block}
.f-watch{min-height:120px}
.f-watchbtn{width:100%;text-align:left;cursor:pointer;font:inherit}
.f-watch .w-card{font:inherit;color:inherit;cursor:pointer;width:100%;text-align:left}
.f-next{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.06)}
.f-next small{opacity:.75}
.f-player{width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden}
.f-player .w-player,.f-player .w-ph{width:100%;height:100%}
.f-player .w-ph{display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;box-sizing:border-box}
.f-watch .w-ctrl{position:static;margin-top:10px}
.f-lock p{line-height:1.5}
.f-codeform{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch;margin-top:8px}
.f-codeform input{flex:1 1 220px;min-height:46px;font-size:16px;padding:8px 12px;border-radius:10px;letter-spacing:1px;text-transform:uppercase;box-sizing:border-box}
.f-codeform .w-btn{min-height:46px}
.f-err{color:#ff9b9b;font-weight:700;min-height:1.3em;margin:6px 0 0}
/* Sponsor slot: fixed 728:90 box directly under the video, image only */
.f-bn{width:100%;max-width:728px;margin:0 auto}
.f-bn[hidden]{display:none}
.f-bn-box{position:relative;width:100%;aspect-ratio:728/90;border-radius:10px;overflow:hidden;background:rgba(255,255,255,.06);cursor:pointer;-webkit-tap-highlight-color:transparent}
.f-bn-box:focus-visible{outline:3px solid var(--w-accent,#f3b51b);outline-offset:2px}
.f-bn-box img{display:block;width:100%;height:100%;object-fit:contain}
.f-bn-more{position:absolute;right:8px;top:50%;transform:translateY(-50%);padding:8px 14px;border-radius:999px;background:var(--w-accent,#f3b51b);color:#111;font-weight:800;text-decoration:none;box-shadow:0 2px 10px #0008;opacity:0;pointer-events:none;transition:opacity .15s}
.f-bn-paused .f-bn-more{opacity:1;pointer-events:auto}
.f-bn-paused .f-bn-box{outline:2px solid var(--w-accent,#f3b51b)}
.f-bn-foot{display:flex;justify-content:space-between;align-items:center;min-height:18px;font-size:12px;opacity:.8;margin-top:4px}
.f-bn-dots{display:flex;gap:5px}.f-bn-dots i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.35}.f-bn-dots i.on{opacity:1}
/* Highlights */
.f-pick{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:750;margin-bottom:10px}
.f-pick select{min-height:46px;width:100%;max-width:640px;font-size:16px}
.f-stage{position:relative;background:#000;border-radius:12px;overflow:hidden;aspect-ratio:16/9;width:100%;max-width:960px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.f-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;display:block}
.f-cap{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);background:rgba(0,0,0,.55);color:#fff;font:700 clamp(13px,3vw,20px)/1.2 system-ui,sans-serif;padding:6px 12px;border-radius:6px;max-width:88%;text-align:center;pointer-events:none}
.f-cap:empty{display:none}
.f-big{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;padding:0;font-size:28px;background:#000a;border:2px solid #fff;color:#fff;cursor:pointer}
.f-big[hidden]{display:none}
.f-nextr{display:flex;align-items:center;justify-content:center;position:absolute;top:50%;right:8px;width:46px;height:70px;margin-top:-35px;padding:0;font-size:42px;line-height:1;background:#000a;border:2px solid #ffffffcc;color:#fff;border-radius:14px;cursor:pointer;z-index:3}
.f-nextr:disabled{opacity:.35;cursor:default}
.f-rctrls{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.f-rctrls .w-cb{min-height:46px;min-width:110px}
.f-stage .f-x,.f-stage .f-mpp,.f-stage .f-mtitle{display:none}
/* Maximized: app-controlled layer (no browser Fullscreen API). Portrait phones get the video turned landscape. Only ✕ Close exits. */
html.f-max-on,html.f-max-on body{overflow:hidden!important;overscroll-behavior:none!important}
.f-stage.max{position:fixed;left:0;top:0;z-index:100000;max-width:none;aspect-ratio:auto;border-radius:0;transform-origin:0 0;touch-action:none;
 --s-t:env(safe-area-inset-top,0px);--s-r:env(safe-area-inset-right,0px);--s-b:env(safe-area-inset-bottom,0px);--s-l:env(safe-area-inset-left,0px)}
.f-stage.max.rot{--s-t:env(safe-area-inset-left,0px);--s-r:env(safe-area-inset-top,0px);--s-b:env(safe-area-inset-right,0px);--s-l:env(safe-area-inset-bottom,0px)}
.f-stage.max .f-x,.f-stage.max .f-mpp{display:flex;align-items:center;justify-content:center}
.f-stage.max .f-mtitle{display:block;position:absolute;top:calc(12px + var(--s-t));left:calc(14px + var(--s-l));right:150px;color:#fff;font-weight:800;font-size:15px;text-shadow:0 1px 3px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.f-stage.max .f-x{position:absolute;top:calc(10px + var(--s-t));right:calc(10px + var(--s-r));min-height:46px;padding:8px 16px;font-size:16px;background:#000b;border:2px solid #fff;color:#fff;border-radius:999px;z-index:3;cursor:pointer}
.f-stage.max .f-nextr{right:calc(8px + var(--s-r));width:60px;height:84px;margin-top:-42px;font-size:52px}
.f-stage.max .f-mpp{position:absolute;left:calc(12px + var(--s-l));bottom:calc(12px + var(--s-b));width:58px;height:58px;padding:0;font-size:22px;background:#000b;border:2px solid #fff;color:#fff;border-radius:50%;z-index:3;cursor:pointer}
.f-stage.max .f-cap{bottom:calc(10% + var(--s-b))}
@media (max-width:560px){.f-team{gap:10px}.f-tlogo{flex-basis:52px;width:52px;height:52px;font-size:28px}.f-league{border-radius:8px}}

/* Follow button (public page) */
.f-team .f-tname{flex:1 1 auto;min-width:0}
.f-follow{flex:0 0 auto;white-space:nowrap;text-decoration:none}
@media (max-width:560px){.f-team{flex-wrap:wrap}.f-follow{width:100%;text-align:center}}
/* In-app mode (inside the PlayClock app's Fan area): no site header/footer/team picker, one part per frame */
body.f-app .w-top,body.f-app .w-tbar,body.f-app .w-foot,body.f-app .w-ctrl2{display:none!important}
body.f-app .w-main{padding-top:12px}
body.f-part-watch [data-f-hl]{display:none}
body.f-part-hl .f-league,body.f-part-hl .f-team,body.f-part-hl [data-f-watch],body.f-part-hl [data-f-bn]{display:none}

.f-code{margin:2px 0 0;font-weight:850;letter-spacing:1px;color:var(--w-accent,#f3b51b);min-height:1.2em}
body.f-app .f-code{display:none}