/* Spin League: black / yellow, grey + white as needed. Everything is scoped to #spl-app so a theme can't bleed in. */ body.spl-canvas { margin: 0; background: #0A0A0A; min-height: 100vh; } body.spl-lock-scroll { overflow: hidden; } #spl-app { --bg: #0A0A0A; --s1: #141414; --s2: #1C1C1C; --s3: #262626; --line: #2C2C2C; --y: #FFC72C; --y2: #FFD65E; --yd: rgba(255, 199, 44, .12); --tx: #F5F5F5; --mu: #9A9A9A; --mu2: #6E6E6E; --red: #FF5A5F; --green: #3DDC84; --w: 1280px; background: var(--bg); color: var(--tx); font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; min-height: 100vh; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; text-align: left; } #spl-app *, #spl-app *::before, #spl-app *::after { box-sizing: border-box; } #spl-app h1, #spl-app h2, #spl-app h3, #spl-app p { margin: 0; color: inherit; font-family: inherit; letter-spacing: normal; text-transform: none; } #spl-app button, #spl-app select, #spl-app input { font: inherit; color: inherit; margin: 0; } #spl-app button { cursor: pointer; background: none; border: 0; padding: 0; box-shadow: none; text-transform: none; letter-spacing: normal; line-height: inherit; min-height: 0; text-align: inherit; } #spl-app img { max-width: none; border: 0; box-shadow: none; } #spl-app a { color: var(--y); } #spl-app.loading .spl-main { opacity: .45; pointer-events: none; } #spl-app .spl-y { color: var(--y); } .spl-boot { min-height: 60vh; display: grid; place-items: center; } .spl-boot svg { width: 56px; height: 56px; animation: spl-rot 1s linear infinite; } @keyframes spl-rot { to { transform: rotate(360deg); } } /* ---------- header ---------- */ #spl-app .spl-top { position: sticky; top: 0; z-index: 30; background: rgba(10, 10, 10, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } #spl-app .spl-top-in { max-width: var(--w); margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 12px; justify-content: space-between; } #spl-app .spl-brand { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } #spl-app .spl-brand span { overflow: hidden; text-overflow: ellipsis; } #spl-app .spl-top-r { display: flex; align-items: center; gap: 8px; flex: none; } #spl-app .spl-select { background: var(--s2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 30px 8px 12px; font-size: 14px; font-weight: 600; appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--y) 50%), linear-gradient(135deg, var(--y) 50%, transparent 50%); background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%; background-size: 5px 5px; background-repeat: no-repeat; max-width: 200px; height: auto; line-height: 1.3; } #spl-app .spl-select:focus { outline: 2px solid var(--y); outline-offset: 1px; } #spl-app .spl-menu { position: relative; } #spl-app .spl-menu summary { list-style: none; width: 38px; height: 38px; border-radius: 10px; background: var(--s2); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; } #spl-app .spl-menu summary::-webkit-details-marker { display: none; } #spl-app .spl-menu summary span { width: 16px; height: 2px; background: var(--tx); border-radius: 2px; } #spl-app .spl-menu > div { position: absolute; right: 0; top: 46px; background: var(--s2); border: 1px solid var(--line); border-radius: 12px; min-width: 210px; padding: 6px; box-shadow: 0 16px 40px rgba(0, 0, 0, .6); } #spl-app .spl-menu a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--tx); text-decoration: none; font-weight: 600; } #spl-app .spl-menu a:hover { background: var(--s3); } #spl-app .spl-menu-me { padding: 8px 12px; color: var(--mu); font-size: 13px; border-bottom: 1px solid var(--line); margin-bottom: 4px; } #spl-app .spl-commish { max-width: var(--w); margin: 0 auto; padding: 0 16px 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--mu); } #spl-app .spl-commish label { font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; } #spl-app .spl-commish.on { color: var(--y); } #spl-app .spl-commish.on .spl-select { border-color: var(--y); } /* ---------- tabs + lock pill (one row) ---------- */ #spl-app .spl-tabs { max-width: var(--w); margin: 0 auto; padding: 12px 16px 0; display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; } #spl-app .spl-tabs-b { display: flex; gap: 6px; flex: 1 1 320px; } #spl-app .spl-tabs-b button { flex: 1; padding: 10px 8px; border-radius: 12px; background: var(--s1); border: 1px solid var(--line); font-weight: 800; font-size: 14px; color: var(--mu); letter-spacing: .02em; text-align: center; } #spl-app .spl-tabs-b button.on { background: var(--y); color: #111; border-color: var(--y); } @media (min-width: 700px) { #spl-app .spl-tabs-b { flex: 0 0 auto; } #spl-app .spl-tabs-b button { flex: 0 0 auto; padding: 10px 22px; } } #spl-app .spl-lockpill { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 12px; background: var(--yd); border: 1px solid rgba(255, 199, 44, .35); font-size: 14px; flex: 1 1 auto; max-width: 100%; } @media (min-width: 700px) { #spl-app .spl-lockpill { flex: 0 1 auto; } } #spl-app .spl-lockpill b { color: var(--y); } #spl-app .spl-lockpill.locked { background: var(--s1); border-color: var(--line); } #spl-app .spl-cd { margin-left: auto; padding-left: 10px; font-weight: 800; color: var(--tx); font-variant-numeric: tabular-nums; } #spl-app .spl-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mu2); flex: none; } #spl-app .spl-dot.open { background: var(--y); } #spl-app .spl-dot.live { background: var(--red); box-shadow: 0 0 0 0 rgba(255, 90, 95, .7); animation: spl-pulse 1.6s infinite; } @keyframes spl-pulse { 70% { box-shadow: 0 0 0 8px rgba(255, 90, 95, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 90, 95, 0); } } #spl-app .spl-main { max-width: var(--w); margin: 0 auto; padding: 12px 16px 60px; transition: opacity .2s; } /* ---------- games (bigger, with lines) ---------- */ #spl-app .spl-games { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 14px; scrollbar-width: thin; scroll-snap-type: x proximity; } #spl-app .spl-game { flex: 0 0 176px; background: var(--s1); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; scroll-snap-align: start; } #spl-app .spl-game.live { border-color: rgba(255, 90, 95, .55); } #spl-app .spl-gt { display: flex; align-items: center; gap: 8px; font-size: 15px; height: 30px; width: 100%; color: var(--mu); border-radius: 8px; } #spl-app .spl-gt:hover { color: var(--tx); } #spl-app .spl-gt.won, #spl-app .spl-game.live .spl-gt { color: var(--tx); } #spl-app .spl-gt img { width: 24px; height: 24px; object-fit: contain; } #spl-app .spl-gt b { font-weight: 800; } #spl-app .spl-sc { margin-left: auto; font-weight: 900; font-size: 18px; font-variant-numeric: tabular-nums; } #spl-app .spl-imp { margin-left: auto; font-weight: 700; font-size: 14px; color: var(--mu); font-variant-numeric: tabular-nums; } #spl-app .spl-poss { width: 7px; height: 7px; border-radius: 50%; background: var(--y); } #spl-app .spl-poss.rz { background: var(--red); } #spl-app .spl-gline { font-size: 12px; font-weight: 800; color: var(--y); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #spl-app .spl-gs { font-size: 11px; color: var(--mu); margin-top: 3px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #spl-app .spl-game.live .spl-gs { color: var(--red); } /* ---------- cards ---------- */ #spl-app .spl-card { background: var(--s1); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; } #spl-app .spl-card-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 16px 16px 12px; } #spl-app .spl-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--y); } #spl-app .spl-eyebrow.dim { color: var(--mu); } #spl-app .spl-card-h h2 { font-size: 22px; font-weight: 900; margin-top: 2px; } #spl-app .spl-card-h h2 small { font-size: 13px; color: var(--mu); font-weight: 700; margin-left: 4px; } #spl-app .spl-card-pts { font-size: 30px; font-weight: 900; line-height: 1; color: var(--y); font-variant-numeric: tabular-nums; text-align: right; } #spl-app .spl-card-pts small { display: block; font-size: 10px; color: var(--mu); letter-spacing: .12em; margin-top: 4px; } #spl-app .spl-foot { text-align: center; color: var(--mu); margin-top: 16px; } #spl-app .spl-foot b { color: var(--y); font-size: 18px; } #spl-app .spl-note { color: var(--mu); font-size: 13px; padding: 0 16px 14px; } #spl-app .spl-note.tight { padding: 0 16px 10px; } #spl-app .spl-note.flush { padding: 8px 0 0; } #spl-app .spl-muted { color: var(--mu); } #spl-app .spl-pad { padding: 12px 16px; } #spl-app .spl-pad-x { padding: 12px 16px 0; } #spl-app .spl-empty { text-align: center; padding: 60px 20px; color: var(--mu); } #spl-app .spl-empty h2 { color: var(--tx); font-size: 22px; margin-bottom: 6px; } #spl-app .spl-empty.sm { padding: 30px 16px; } #spl-app .spl-reset { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); } #spl-app .spl-reset span { width: 100%; text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mu); } #spl-app .spl-reset .spl-btn { padding: 10px 16px; font-size: 14px; } /* ---------- My Team layout: two equal rosters + the wheel on its own ---------- */ #spl-app .spl-board { display: grid; gap: 14px; grid-template-areas: "any" "stage" "spin"; align-items: start; } #spl-app .spl-roster.any { grid-area: any; } #spl-app .spl-roster.spin { grid-area: spin; border-color: rgba(255, 199, 44, .35); } #spl-app .spl-stage { grid-area: stage; } @media (min-width: 760px) { #spl-app .spl-board { grid-template-columns: 1fr 1fr; grid-template-areas: "stage stage" "any spin"; } } @media (min-width: 1180px) { #spl-app .spl-board { grid-template-columns: 1fr 1fr 330px; grid-template-areas: "any spin stage"; } #spl-app .spl-stage { position: sticky; top: 76px; } } /* ---------- slots ---------- */ #spl-app .spl-slots { list-style: none; margin: 0; padding: 0 10px 10px; } #spl-app .spl-slot { display: flex; align-items: center; gap: 10px; padding: 8px; height: 60px; border-radius: 12px; margin: 0 0 4px; background: var(--s2); border: 1px solid transparent; position: relative; } #spl-app .spl-slot[data-act] { cursor: pointer; } #spl-app .spl-slot[data-act]:hover { border-color: var(--s3); background: #202020; } #spl-app .spl-slot.empty { background: transparent; border: 1px dashed var(--line); } #spl-app .spl-slot.hot { border: 1px solid var(--y); background: var(--yd); animation: spl-glow 1.8s ease-in-out infinite; } @keyframes spl-glow { 50% { box-shadow: 0 0 0 3px rgba(255, 199, 44, .15); } } #spl-app .spl-slot.dim { opacity: .45; } #spl-app .spl-pos { flex: none; width: 44px; text-align: center; font-size: 12px; font-weight: 900; letter-spacing: .04em; padding: 6px 0; border-radius: 8px; background: var(--s3); color: var(--tx); } #spl-app .spl-pos.flex { background: #3A3320; color: var(--y); } #spl-app .spl-pos.sm { width: 38px; font-size: 10px; padding: 3px 0; } #spl-app .spl-add { font-weight: 700; color: var(--y); font-size: 14px; } #spl-app .spl-add.muted { color: var(--mu2); font-weight: 600; } #spl-app .spl-lockico { position: absolute; right: 6px; top: 2px; color: var(--mu); font-weight: 900; font-size: 14px; line-height: 1; } #spl-app .spl-hs { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--s3); flex: none; } #spl-app .spl-hs.dst { object-fit: contain; padding: 5px; background: #222; } #spl-app .spl-pinfo { flex: 1; min-width: 0; display: block; } #spl-app .spl-pinfo b { font-weight: 800; font-size: 15px; } #spl-app .spl-pinfo small { display: block; color: var(--mu); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; } #spl-app .spl-pinfo small em { color: var(--red); font-style: normal; font-weight: 700; } #spl-app .spl-ppts { flex: none; text-align: right; font-weight: 900; font-size: 18px; font-variant-numeric: tabular-nums; min-width: 52px; } #spl-app .spl-ppts small { display: block; font-size: 9px; letter-spacing: .12em; color: var(--mu); font-weight: 800; } #spl-app .spl-ppts.pre { color: var(--mu); font-size: 15px; } #spl-app .spl-ppts.live { color: var(--y); } #spl-app .spl-ppts.live small { color: var(--red); } #spl-app .spl-badge { display: inline-block; font-size: 10px; font-weight: 900; padding: 1px 5px; border-radius: 4px; margin-left: 6px; vertical-align: 2px; letter-spacing: .04em; } #spl-app .spl-badge.out { background: var(--red); color: #fff; } #spl-app .spl-badge.q { background: #3A3320; color: var(--y); } #spl-app .spl-tag { display: inline-block; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 4px; margin-left: 6px; background: var(--y); color: #111; vertical-align: 2px; } #spl-app .spl-tag.dim { background: var(--s3); color: var(--mu); } /* ---------- the wheel ---------- */ #spl-app .spl-stage { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 18px 16px; } @media (min-width: 760px) and (max-width: 1179px) { #spl-app .spl-stage { flex-direction: row; align-items: center; gap: 28px; padding: 18px 24px; } #spl-app .spl-stage .spl-wheel-box { width: 260px; flex: none; } } #spl-app .spl-wheel-box { position: relative; width: min(290px, 78vw); aspect-ratio: 1; border-radius: 50%; } #spl-app .spl-wheel-box.can { cursor: pointer; } #spl-app .spl-wheel-box.can:hover .spl-wheel { filter: brightness(1.08); } #spl-app .spl-wheel { width: 100%; height: 100%; display: block; border-radius: 50%; box-shadow: 0 0 0 6px #111, 0 0 0 8px var(--s3), 0 18px 40px rgba(0, 0, 0, .6); will-change: transform; } #spl-app .spl-wheel text { font-size: 10px; font-weight: 900; letter-spacing: .02em; font-family: inherit; } #spl-app .spl-wheel.winding { animation: spl-wind .5s linear infinite; } @keyframes spl-wind { from { transform: rotate(var(--r, 0deg)); } to { transform: rotate(calc(var(--r, 0deg) + 360deg)); } } #spl-app .spl-pointer { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 26px solid #fff; z-index: 2; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .7)); } #spl-app .spl-cap { position: absolute; left: 50%; top: 50%; width: 11%; height: 11%; transform: translate(-50%, -50%); border-radius: 50%; background: #0A0A0A; border: 3px solid var(--y); box-shadow: 0 3px 10px rgba(0, 0, 0, .6); pointer-events: none; } #spl-app .spl-stage-side { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 10px; } #spl-app .spl-stage-side h2 { font-size: 22px; font-weight: 900; } #spl-app .spl-stage-side p { color: var(--mu); font-size: 14px; } #spl-app .spl-stage-side p b { color: var(--tx); } #spl-app .spl-spinbtn { width: 100%; padding: 15px 20px; font-size: 18px; letter-spacing: .02em; } #spl-app .spl-landed { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 14px; background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 55%, #000), var(--s2)); border: 1px solid color-mix(in srgb, var(--tc) 60%, #000); } #spl-app .spl-landed img { width: 58px; height: 58px; object-fit: contain; flex: none; background: #fff; border-radius: 50%; padding: 6px; } #spl-app .spl-landed .spl-eyebrow { color: #fff; opacity: .8; } #spl-app .spl-landed h2 { font-size: 26px; color: #fff; } #spl-app .spl-stage.landed .spl-landed { animation: spl-pop .5s ease; } @keyframes spl-pop { 0% { transform: scale(.9); opacity: 0; } 100% { transform: none; opacity: 1; } } #spl-app .spl-commtools { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--line); } #spl-app .spl-commtools small { color: var(--mu); font-size: 12px; } #spl-app .spl-commtools small b { color: var(--tx); } #spl-app .spl-link { color: var(--y); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } #spl-app .spl-link.light { color: #fff; } /* ---------- leaderboard ---------- */ #spl-app .spl-lb { padding: 0 10px 10px; } #spl-app .spl-lb-row { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--s2); border-radius: 12px; margin-bottom: 6px; border: 1px solid transparent; } #spl-app .spl-lb-row[data-act] { cursor: pointer; } #spl-app .spl-lb-row.lead { border-color: var(--y); } #spl-app .spl-lb-row.open { border-radius: 12px 12px 0 0; margin-bottom: 0; } #spl-app .spl-rank { width: 28px; height: 28px; border-radius: 50%; background: var(--s3); display: grid; place-items: center; font-weight: 900; font-size: 14px; flex: none; } #spl-app .spl-lb-row.lead .spl-rank { background: var(--y); color: #111; } #spl-app .spl-lb-name { flex: 1; min-width: 0; } #spl-app .spl-lb-name b { font-size: 16px; font-weight: 800; } #spl-app .spl-lb-name small { display: block; color: var(--mu); font-size: 12px; } #spl-app .spl-lb-name small em { color: var(--red); font-style: normal; font-weight: 700; } #spl-app .spl-you { font-size: 9px; background: var(--s3); color: var(--y); padding: 2px 5px; border-radius: 4px; vertical-align: 2px; letter-spacing: .08em; } #spl-app .spl-lb-tot { font-size: 24px; font-weight: 900; color: var(--y); font-variant-numeric: tabular-nums; } #spl-app .spl-chev { width: 8px; height: 8px; border-right: 2px solid var(--mu); border-bottom: 2px solid var(--mu); transform: rotate(45deg); margin: 0 4px 4px; transition: transform .2s; } #spl-app .spl-lb-row.open .spl-chev { transform: rotate(-135deg); margin-bottom: -4px; } #spl-app .spl-lb-detail { display: grid; gap: 10px; padding: 10px; background: var(--s2); border-radius: 0 0 12px 12px; margin-bottom: 8px; border-top: 1px solid var(--line); } @media (min-width: 700px) { #spl-app .spl-lb-detail { grid-template-columns: 1fr 1fr; } } #spl-app .spl-mini-h { display: flex; justify-content: space-between; font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--y); padding: 0 4px 6px; } #spl-app .spl-mini-r { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-top: 1px solid var(--line); cursor: pointer; } #spl-app .spl-mini-r.empty { color: var(--mu2); cursor: default; font-size: 13px; } #spl-app .spl-mini-n { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; } #spl-app .spl-mini-n small { display: block; color: var(--mu); font-weight: 500; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #spl-app .spl-mini-r > b { font-variant-numeric: tabular-nums; font-size: 15px; } #spl-app .spl-mini-r > b.live { color: var(--y); } #spl-app .spl-mini-r > b small { color: var(--mu); font-size: 11px; font-weight: 600; } /* ---------- tables ---------- */ #spl-app .spl-table-wrap { overflow-x: auto; padding: 0 10px 10px; } #spl-app .spl-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; margin: 0; border: 0; } #spl-app .spl-table th, #spl-app .spl-table td { padding: 9px 8px; text-align: right; border: 0; border-bottom: 1px solid var(--line); white-space: nowrap; background: none; color: inherit; } #spl-app .spl-table th { color: var(--mu); font-size: 11px; letter-spacing: .06em; font-weight: 800; text-transform: uppercase; } #spl-app .spl-table .l { text-align: left; } #spl-app .spl-table td.big { font-weight: 900; color: var(--tx); } #spl-app .spl-table td.win { background: var(--y); color: #111; font-weight: 900; border-radius: 6px; } #spl-app .spl-table td.lead { color: var(--y); font-weight: 800; } #spl-app .spl-table tbody tr:nth-child(odd) td:not(.win) { background: rgba(255, 255, 255, .02); } #spl-app .spl-table .w { color: var(--green); font-weight: 800; } #spl-app .spl-table .lo { color: var(--red); font-weight: 800; } /* ---------- overlays ---------- */ #spl-app .spl-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .7); z-index: 40; animation: spl-fade .2s; } #spl-app .spl-scrim.top { z-index: 48; } #spl-app .spl-scrim.top2 { z-index: 54; } #spl-app .spl-scrim.top3 { z-index: 64; } @keyframes spl-fade { from { opacity: 0; } } #spl-app .spl-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--s1); border-top: 1px solid var(--line); border-radius: 20px 20px 0 0; height: 92vh; height: 92dvh; display: flex; flex-direction: column; animation: spl-up .25s ease; max-width: 760px; margin: 0 auto; } @media (min-width: 800px) { #spl-app .spl-sheet { top: 5vh; bottom: 5vh; height: auto; border-radius: 20px; border: 1px solid var(--line); } } @keyframes spl-up { from { transform: translateY(40px); opacity: 0; } } #spl-app .spl-sheet-h { display: flex; justify-content: space-between; align-items: flex-start; padding: 16px 16px 8px; } #spl-app .spl-sheet-h h3 { font-size: 20px; font-weight: 900; margin-top: 2px; } #spl-app .spl-x { width: 36px; height: 36px; border-radius: 50%; background: var(--s3); font-size: 22px; line-height: 1; color: var(--tx); flex: none; display: grid; place-items: center; text-align: center; } #spl-app .spl-current { display: flex; align-items: center; gap: 10px; margin: 0 16px 8px; padding: 8px 10px; background: var(--s2); border-radius: 12px; } #spl-app .spl-current .spl-pinfo small { margin: 0; } #spl-app .spl-current .spl-btn { padding: 9px 14px; font-size: 14px; } #spl-app .spl-filters { padding: 4px 16px 10px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--line); } #spl-app .spl-search { width: 100%; background: var(--s2); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; font-size: 16px; height: auto; box-shadow: none; } #spl-app .spl-search:focus { outline: 2px solid var(--y); border-color: transparent; } #spl-app .spl-chips { display: flex; gap: 6px; flex-wrap: wrap; } #spl-app .spl-chips button { padding: 7px 14px; border-radius: 999px; background: var(--s2); border: 1px solid var(--line); font-weight: 800; font-size: 13px; color: var(--mu); } #spl-app .spl-chips button.on { background: var(--y); color: #111; border-color: var(--y); } #spl-app .spl-filter-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } #spl-app .spl-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mu); font-weight: 600; cursor: pointer; } #spl-app .spl-check input { accent-color: var(--y); width: 16px; height: 16px; } #spl-app .spl-check.commish-only { margin: 0 16px 8px; color: var(--y); } #spl-app .spl-list { flex: 1; overflow-y: auto; padding: 6px 10px 20px; -webkit-overflow-scrolling: touch; } #spl-app .spl-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 12px; border-bottom: 1px solid var(--s2); } #spl-app .spl-row:hover { background: var(--s2); } #spl-app .spl-row.on { opacity: .55; } #spl-app .spl-row-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 2px 0; border-radius: 10px; } #spl-app .spl-row-main:hover .spl-pinfo b { color: var(--y); text-decoration: underline; text-underline-offset: 2px; } #spl-app .spl-rstats { display: flex; gap: 10px; flex: none; } #spl-app .spl-rstats span { display: flex; flex-direction: column; align-items: flex-end; font-size: 9px; color: var(--mu); font-weight: 800; letter-spacing: .08em; min-width: 34px; } #spl-app .spl-rstats b { font-size: 13px; color: var(--tx); letter-spacing: 0; font-variant-numeric: tabular-nums; } @media (max-width: 520px) { #spl-app .spl-rstats span:nth-child(n+2) { display: none; } } #spl-app .spl-addbtn { flex: none; padding: 8px 12px; border-radius: 10px; background: var(--y); color: #111; font-weight: 900; font-size: 13px; white-space: nowrap; } #spl-app .spl-addbtn:hover { background: var(--y2); } #spl-app .spl-btn { display: inline-flex; align-items: center; justify-content: center; background: var(--y); color: #111; font-weight: 900; padding: 12px 22px; border-radius: 12px; font-size: 15px; text-decoration: none; text-align: center; } #spl-app .spl-btn:hover { background: var(--y2); } #spl-app .spl-btn.ghost { background: var(--s3); color: var(--tx); } #spl-app .spl-btn.ghost:hover { background: #333; } #spl-app .spl-btn.sm { padding: 9px 14px; font-size: 14px; align-self: flex-start; } #spl-app .spl-btn:disabled { opacity: .5; cursor: default; } /* ---------- team depth chart ---------- */ #spl-app .spl-tcard { position: fixed; z-index: 50; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, 96vw); max-height: 92vh; max-height: 92dvh; background: #000; border: 1px solid var(--line); border-radius: 20px; display: flex; flex-direction: column; overflow: hidden; animation: spl-fade .2s; box-shadow: 0 30px 80px rgba(0, 0, 0, .8); } #spl-app .spl-tc-h { position: relative; display: flex; gap: 14px; align-items: center; padding: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--tc) 70%, #000) 0%, #111 100%); } #spl-app .spl-tc-logo { width: 72px; height: 72px; object-fit: contain; flex: none; background: #fff; border-radius: 50%; padding: 8px; } #spl-app .spl-tc-id { flex: 1; min-width: 0; font-size: 13px; color: #ddd; } #spl-app .spl-tc-id .spl-eyebrow { color: #fff; opacity: .75; } #spl-app .spl-tc-id h3 { font-size: 24px; font-weight: 900; color: #fff; } #spl-app .spl-tc-line { margin-top: 3px; color: var(--y); font-weight: 700; } #spl-app .spl-tc-line b { color: #fff; } #spl-app .spl-tc-h .spl-x { background: rgba(0, 0, 0, .45); align-self: flex-start; } #spl-app .spl-tc-body { overflow-y: auto; padding: 12px 10px 16px; } #spl-app .spl-dc { margin-bottom: 10px; } #spl-app .spl-dc-h { font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--y); padding: 6px 6px; } #spl-app .spl-dc-r { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px; border-radius: 10px; } #spl-app .spl-dc-r:hover { background: var(--s2); } #spl-app .spl-dc-r.inj { opacity: .6; } #spl-app .spl-dc-n { width: 22px; text-align: center; font-weight: 900; color: var(--mu); flex: none; } #spl-app .spl-dc-r .spl-hs { width: 36px; height: 36px; } #spl-app .spl-dc-name { flex: 1; min-width: 0; } #spl-app .spl-dc-name b { font-weight: 800; } #spl-app .spl-dc-name small { display: block; color: var(--mu); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #spl-app .spl-dc-proj { font-weight: 900; font-variant-numeric: tabular-nums; text-align: right; color: var(--mu); } #spl-app .spl-dc-proj.live { color: var(--y); } #spl-app .spl-dc-proj small { display: block; font-size: 9px; letter-spacing: .1em; } /* ---------- player card ---------- */ #spl-app .spl-pcard { position: fixed; z-index: 58; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(720px, 96vw); max-height: 92vh; max-height: 92dvh; background: #000; border: 1px solid var(--line); border-radius: 20px; display: flex; flex-direction: column; overflow: hidden; animation: spl-fade .2s; box-shadow: 0 30px 80px rgba(0, 0, 0, .8); } #spl-app .spl-pc-h { position: relative; display: flex; gap: 14px; padding: 18px 18px 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 55%, #000) 0%, #111 100%); overflow: hidden; min-height: 150px; } #spl-app .spl-pc-logo { position: absolute; left: -30px; top: -20px; width: 210px; height: 210px; object-fit: contain; opacity: .22; pointer-events: none; } #spl-app .spl-pc-hs { position: relative; width: 116px; height: 116px; object-fit: cover; object-position: top; flex: none; align-self: flex-end; margin-bottom: -14px; } #spl-app .spl-pc-hs.dst { object-fit: contain; } #spl-app .spl-pc-id { position: relative; flex: 1; min-width: 0; font-size: 13px; color: #ddd; display: flex; flex-direction: column; gap: 2px; } #spl-app .spl-pc-id h3 { font-size: 20px; font-weight: 900; color: #fff; } #spl-app .spl-pc-sub b { color: #fff; } #spl-app .spl-oprk { font-size: 11px; color: var(--mu); font-weight: 800; margin-left: 6px; } #spl-app .spl-oprk b { color: var(--y); } #spl-app .spl-pc-h .spl-x { position: relative; background: rgba(0, 0, 0, .45); } #spl-app .spl-pc-stats { display: flex; margin: 0 14px; background: var(--s2); border-radius: 12px; padding: 8px 0; transform: translateY(-4px); } #spl-app .spl-pc-stats > div { flex: 1; text-align: center; border-right: 1px solid var(--line); } #spl-app .spl-pc-stats > div:last-child { border: 0; } #spl-app .spl-pc-stats small { display: block; font-size: 10px; color: var(--mu); font-weight: 800; letter-spacing: .08em; } #spl-app .spl-pc-stats b { font-size: 17px; font-weight: 900; } #spl-app .spl-pc-stats b.live { color: var(--y); } #spl-app .spl-pc-tabs { display: flex; gap: 20px; padding: 10px 18px 0; border-bottom: 1px solid var(--line); } #spl-app .spl-pc-tabs button { padding: 8px 0 10px; font-weight: 800; color: var(--mu); border-bottom: 2px solid transparent; font-size: 15px; } #spl-app .spl-pc-tabs button.on { color: var(--tx); border-color: var(--y); } #spl-app .spl-pc-body { flex: 1; overflow-y: auto; padding-bottom: 10px; } #spl-app .spl-pc-live { display: flex; gap: 16px; align-items: center; margin: 14px 16px 4px; padding: 12px 14px; background: var(--s2); border-radius: 12px; font-size: 13px; } #spl-app .spl-big { font-size: 34px; font-weight: 900; line-height: 1; } #spl-app .spl-big.live { color: var(--y); } #spl-app .spl-big small { display: block; font-size: 10px; color: var(--mu); letter-spacing: .1em; margin-top: 4px; } #spl-app .spl-sec-h { font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--y); margin-bottom: 6px; } #spl-app .spl-news { padding: 10px 12px; background: var(--s1); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; } #spl-app .spl-news-m { font-size: 11px; color: var(--mu); font-weight: 700; margin-bottom: 3px; } #spl-app .spl-news b { display: block; font-size: 14px; line-height: 1.35; } #spl-app .spl-news p { color: #c9c9c9; font-size: 13px; margin-top: 6px; line-height: 1.5; } #spl-app .spl-log-h { display: flex; align-items: center; gap: 10px; padding: 12px 16px 6px; font-size: 13px; } #spl-app .spl-log-h > span:first-child { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mu); } #spl-app .spl-bars-h { display: flex; justify-content: space-between; padding: 14px 16px 6px; font-size: 14px; } #spl-app .spl-bars-h span { color: var(--mu); font-size: 12px; } #spl-app .spl-bars-h span b { color: var(--y); } #spl-app .spl-bars { position: relative; display: flex; gap: 8px; height: 190px; margin: 8px 16px 12px; padding-bottom: 36px; border-bottom: 1px solid var(--line); } #spl-app .spl-avg { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--mu2); margin-bottom: 36px; } #spl-app .spl-bar { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; } #spl-app .spl-bar-c { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; } #spl-app .spl-bar-c > div { position: relative; width: min(46px, 80%); background: linear-gradient(180deg, var(--y) 0%, #8a6a10 100%); border-radius: 6px 6px 0 0; } #spl-app .spl-bar-c span { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 800; white-space: nowrap; } #spl-app .spl-bar small { font-size: 10px; color: var(--mu); margin-top: 4px; white-space: nowrap; } #spl-app .spl-bar small + small { margin-top: 0; } #spl-app .spl-pc-f { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--s1); } #spl-app .spl-pc-f small { display: block; color: var(--mu); font-size: 12px; } #spl-app .spl-pc-f b { font-size: 16px; } #spl-app .spl-confirm { position: fixed; z-index: 65; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(400px, 92vw); background: var(--s2); border: 1px solid var(--y); border-radius: 18px; padding: 20px; animation: spl-fade .15s; } #spl-app .spl-confirm h3 { font-size: 19px; font-weight: 900; margin-bottom: 6px; } #spl-app .spl-confirm p { color: var(--mu); font-size: 14px; } #spl-app .spl-confirm-b { display: flex; gap: 8px; margin-top: 16px; } #spl-app .spl-confirm-b .spl-btn { flex: 1; } .spl-toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 99999; background: #FFC72C; color: #111; font: 700 14px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; padding: 12px 18px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); max-width: 92vw; text-align: center; transition: opacity .4s, transform .4s; } .spl-toast.bad { background: #FF5A5F; color: #fff; } .spl-toast.out { opacity: 0; transform: translate(-50%, 10px); } /* ---------- login ---------- */ #spl-app.spl-login { display: grid; place-items: center; padding: 24px 16px; min-height: 100vh; } #spl-app .spl-login-card { width: min(380px, 100%); background: var(--s1); border: 1px solid var(--line); border-radius: 20px; padding: 26px 22px; } #spl-app .spl-login-card .spl-brand { justify-content: center; margin-bottom: 18px; font-size: 20px; } #spl-app .spl-login-card .spl-brand svg { width: 34px; height: 34px; } #spl-app .spl-login-card p { margin: 0 0 12px; color: var(--mu); } #spl-app .spl-login-card label { display: block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mu); margin-bottom: 6px; } #spl-app .spl-login-card input[type=text], #spl-app .spl-login-card input[type=password] { width: 100%; background: var(--s2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 16px; color: var(--tx); height: auto; box-shadow: none; } #spl-app .spl-login-card input:focus { outline: 2px solid var(--y); border-color: transparent; } #spl-app .spl-login-card .login-remember label { text-transform: none; letter-spacing: 0; font-size: 14px; display: flex; gap: 8px; align-items: center; } #spl-app .spl-login-card input[type=checkbox] { accent-color: var(--y); } #spl-app .spl-login-card input[type=submit] { width: 100%; background: var(--y); color: #111; font-weight: 900; font-size: 16px; border: 0; border-radius: 12px; padding: 13px; cursor: pointer; margin-top: 4px; } #spl-app .spl-login-err { background: rgba(255, 90, 95, .12); color: #ffb3b5 !important; border: 1px solid rgba(255, 90, 95, .4); padding: 10px 12px; border-radius: 10px; font-size: 14px; } /* ---------- iPhone home-screen app: keep clear of the clock/battery bar and the home indicator ---------- */ #spl-app .spl-top { padding-top: env(safe-area-inset-top, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } #spl-app .spl-main { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); } #spl-app .spl-sheet { padding-bottom: env(safe-area-inset-bottom, 0px); } #spl-app.spl-login { padding-top: calc(24px + env(safe-area-inset-top, 0px)); } .spl-toast { bottom: calc(22px + env(safe-area-inset-bottom, 0px)); } #spl-app .spl-brand .spl-short { display: none; } @media (max-width: 700px) { #spl-app .spl-brand .spl-long { display: none; } #spl-app .spl-brand .spl-short { display: inline; } } /* ---------- commissioner editing bar (opened from wp-admin) ---------- */ #spl-app .spl-editbar { max-width: var(--w); margin: 0 auto 10px; padding: 8px 16px; display: flex; align-items: center; gap: 10px; font-size: 14px; color: #111; background: var(--y); border-radius: 10px; width: calc(100% - 32px); } #spl-app .spl-editbar a { margin-left: auto; color: #111; font-weight: 900; text-decoration: underline; } /* ---------- menu buttons ---------- */ #spl-app .spl-menu > div button { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 8px; color: var(--tx); font-weight: 600; } #spl-app .spl-menu > div button:hover { background: var(--s3); } /* ---------- season block on the player card ---------- */ #spl-app .spl-season { margin: 14px 16px 4px; } #spl-app .spl-season-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 6px; } #spl-app .spl-season-g > div { background: var(--s1); border: 1px solid var(--line); border-radius: 10px; padding: 8px; text-align: center; } #spl-app .spl-season-g b { display: block; font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; } #spl-app .spl-season-g small { display: block; font-size: 10px; color: var(--mu); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } #spl-app .spl-dc-proj + .spl-dc-proj { margin-left: 12px; } /* ---------- demo team picker (demo weeks only) ---------- */ #spl-app .spl-demobar { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 14px; background: var(--s1); border: 1px solid var(--line); border-radius: 12px; } #spl-app .spl-demobar label { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--y); } #spl-app .spl-demobar span { margin-left: auto; font-weight: 900; font-size: 18px; color: var(--y); font-variant-numeric: tabular-nums; } /* ---------- standings: newest first, filter, pinned names ---------- */ #spl-app .spl-st-filter { padding: 0 16px 10px; } #spl-app .spl-table.spl-st th.sticky, #spl-app .spl-table.spl-st td.sticky { position: sticky; left: 0; z-index: 1; background: var(--s1); } #spl-app .spl-table.spl-st tbody tr:nth-child(odd) td.sticky { background: #181818; } /* ---------- usage ---------- */ #spl-app .spl-tag.used { background: #26303f; color: #9ec5f4; } #spl-app .spl-usage { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin: 6px 14px 0; padding: 8px 12px; border-radius: 10px; background: var(--s1); border: 1px solid var(--line); font-size: 13px; color: #d6d6d6; } #spl-app .spl-usage b { color: #fff; } #spl-app .spl-usage small { color: var(--mu); font-weight: 700; white-space: nowrap; } /* ---------- scoreboard: top players ---------- */ #spl-app .spl-top5 { margin-top: 14px; } #spl-app .spl-tp { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--s2); border-radius: 12px; margin-bottom: 6px; cursor: pointer; } #spl-app .spl-tp .spl-hs { width: 38px; height: 38px; } #spl-app .spl-tp .spl-lb-tot { font-size: 20px; } /* ---------- record book ---------- */ #spl-app .spl-rb-title { margin: 4px 2px 12px; } #spl-app .spl-rb-title h2 { font-size: 26px; font-weight: 900; } #spl-app .spl-main > .spl-card + .spl-card { margin-top: 14px; } #spl-app .spl-key { width: 12px; height: 3px; border-radius: 2px; flex: none; display: inline-block; } #spl-app .spl-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0 16px 6px; font-size: 13px; color: #c3c2b7; } #spl-app .spl-legend span { display: inline-flex; align-items: center; gap: 6px; } #spl-app .spl-legend i { width: 14px; height: 2px; border-radius: 2px; display: inline-block; } #spl-app .spl-race-wrap { position: relative; padding: 4px 16px 16px; } #spl-app .spl-race { display: block; max-width: 100%; outline: none; } #spl-app .spl-race:focus-visible { outline: 2px solid var(--y); outline-offset: 4px; border-radius: 6px; } #spl-app .spl-race .grid { stroke: #2a2a28; stroke-width: 1; } #spl-app .spl-race .ax { fill: #898781; font-size: 11px; font-variant-numeric: tabular-nums; } #spl-app .spl-race .lbl { fill: #F5F5F5; font-size: 12px; font-weight: 700; } #spl-app .spl-race .lblv { fill: #c3c2b7; font-weight: 600; } #spl-app .spl-race .xh { stroke: #6e6e6e; stroke-width: 1; } #spl-app .spl-tip { position: absolute; top: 8px; z-index: 3; min-width: 190px; padding: 8px 10px; border-radius: 10px; background: #0b0b0b; border: 1px solid #333; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); pointer-events: none; font-size: 13px; } #spl-app .spl-tip-h { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mu); margin-bottom: 4px; } #spl-app .spl-tip-r { display: flex; align-items: center; gap: 8px; padding: 2px 0; } #spl-app .spl-tip-r i { width: 12px; height: 2px; border-radius: 2px; flex: none; } #spl-app .spl-tip-r b { color: #fff; font-variant-numeric: tabular-nums; min-width: 46px; } #spl-app .spl-tip-r span { color: #c3c2b7; flex: 1; } #spl-app .spl-tip-r small { color: var(--mu); font-variant-numeric: tabular-nums; } #spl-app .spl-recs { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; padding: 0 10px 12px; } #spl-app .spl-rec { background: var(--s2); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; } #spl-app .spl-rec small { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--y); } #spl-app .spl-rec b { font-size: 28px; font-weight: 900; line-height: 1.1; } #spl-app .spl-rec span { font-size: 13px; color: var(--mu); } #spl-app .spl-favs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; padding: 0 10px 12px; } #spl-app .spl-fav { background: var(--s2); border-radius: 12px; padding: 10px 12px; } #spl-app .spl-fav-h { display: flex; align-items: center; gap: 8px; font-weight: 800; margin-bottom: 6px; } #spl-app .spl-fav-r { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-top: 1px solid var(--line); } #spl-app .spl-fav-r .spl-hs { width: 32px; height: 32px; } #spl-app .spl-fav-r span { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; } #spl-app .spl-fav-r small { display: block; color: var(--mu); font-weight: 500; font-size: 11px; } #spl-app .spl-wheelfav { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; padding: 0 10px 12px; } #spl-app .spl-wheelfav > div { background: var(--s2); border-radius: 12px; padding: 10px 6px; text-align: center; } #spl-app .spl-wheelfav img { width: 34px; height: 34px; object-fit: contain; display: block; margin: 0 auto 4px; } #spl-app .spl-wheelfav b { display: block; font-size: 18px; font-weight: 900; } #spl-app .spl-wheelfav small { color: var(--mu); font-weight: 700; font-size: 11px; } @media (max-width: 520px) { #spl-app .spl-tabs-b button { padding: 9px 4px; font-size: 13px; } #spl-app .spl-tabs-b button { gap: 4px; } #spl-app .spl-tdot { width: 7px; height: 7px; } #spl-app .spl-rec b { font-size: 24px; } } /* ---------- help steps ---------- */ #spl-app .spl-steps { margin: 8px 0 0 18px; padding: 0; color: var(--tx); font-size: 14px; line-height: 1.6; } /* ---------- phones ---------- */ @media (max-width: 520px) { #spl-app .spl-top-in { gap: 8px; padding: 10px 12px; } #spl-app .spl-brand { font-size: 15px; flex: 1; } #spl-app .spl-top-r { gap: 6px; } #spl-app .spl-top-r .spl-select { max-width: 132px; font-size: 13px; padding: 7px 26px 7px 10px; } #spl-app .spl-commish { padding: 0 12px 8px; } #spl-app .spl-commish:not(.on) span { display: none; } #spl-app .spl-main, #spl-app .spl-tabs { padding-left: 12px; padding-right: 12px; } #spl-app .spl-game { flex-basis: 160px; } } /* ===================================================================== 1.5.0 ===================================================================== */ /* ---------- overlays animate in once (no flash when they re-render) ---------- */ html:has(body.spl-canvas) { scrollbar-gutter: stable; } #spl-app .spl-scrim, #spl-app .spl-sheet, #spl-app .spl-tcard, #spl-app .spl-pcard, #spl-app .spl-confirm, #spl-app .spl-cmp, #spl-app .spl-rules { animation: none; } #spl-app .spl-scrim.enter { animation: spl-fade .2s; } #spl-app .spl-sheet.enter { animation: spl-up .25s ease; } #spl-app .spl-tcard.enter, #spl-app .spl-pcard.enter, #spl-app .spl-cmp.enter, #spl-app .spl-rules.enter { animation: spl-pop-in .22s ease; } #spl-app .spl-confirm.enter { animation: spl-fade .15s; } @keyframes spl-pop-in { from { opacity: 0; transform: translate(-50%, -48%) scale(.98); } } /* ---------- avatars ---------- */ #spl-app .spl-av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--pc, #444); color: #fff; font-weight: 900; font-size: 13px; letter-spacing: .02em; object-fit: cover; box-shadow: 0 0 0 2px var(--s1), 0 0 0 3px var(--pc, #444); vertical-align: middle; } #spl-app img.spl-av { background: var(--s3); } #spl-app .spl-av.sm { width: 26px; height: 26px; font-size: 10px; } #spl-app .spl-av.xs { width: 20px; height: 20px; font-size: 8px; box-shadow: none; margin-right: 6px; } #spl-app .spl-av.lg { width: 52px; height: 52px; font-size: 18px; } #spl-app .spl-nm { display: inline-flex; align-items: center; gap: 0; white-space: nowrap; } /* ---------- trophy icon ---------- */ #spl-app .spl-trophy-ico { flex: none; display: inline-block; width: 26px; height: 26px; vertical-align: middle; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFC72C' d='M7 3h10v2h3v3a4 4 0 0 1-4 4h-.3A5 5 0 0 1 13 14.9V17h3v2H8v-2h3v-2.1A5 5 0 0 1 8.3 12H8a4 4 0 0 1-4-4V5h3V3zm0 4H6v1a2 2 0 0 0 1.2 1.8C7.1 9.2 7 8.6 7 8V7zm10 0v1c0 .6-.1 1.2-.2 1.8A2 2 0 0 0 18 8V7h-1zM7 20h10v1H7z'/%3E%3C/svg%3E"); } #spl-app .spl-trophy-ico.sm { width: 16px; height: 16px; vertical-align: -2px; } #spl-app .spl-trophy-ico.lg { width: 44px; height: 44px; } /* ---------- My Team: recap + head-to-head bars ---------- */ #spl-app .spl-recapbar { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(90deg, rgba(255, 199, 44, .16), var(--s1)); border: 1px solid rgba(255, 199, 44, .45); font-size: 14px; } #spl-app .spl-recapbar > div { flex: 1; min-width: 0; } #spl-app .spl-recapbar .spl-btn { flex: none; } #spl-app .spl-h2hbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--s1); border: 1px solid var(--line); font-size: 14px; } #spl-app .spl-h2hbar.po { border-color: var(--y); } #spl-app .spl-h2hbar small { color: var(--mu); margin-left: auto; font-size: 12px; } #spl-app .spl-h2h-p { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; } #spl-app .spl-h2h-p b { font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; } #spl-app .spl-vs { color: var(--mu); font-size: 12px; font-weight: 800; text-transform: uppercase; } /* ---------- scoreboard ---------- */ #spl-app .spl-lb-row .spl-av { margin-right: 2px; } #spl-app .spl-lb-key { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mu); padding-right: 90px; } #spl-app .spl-odds { display: flex; flex-direction: column; align-items: flex-end; min-width: 56px; font-variant-numeric: tabular-nums; } #spl-app .spl-odds span { font-size: 12px; color: var(--mu); font-weight: 700; } #spl-app .spl-odds b { font-size: 14px; font-weight: 900; color: var(--tx); } #spl-app .spl-lpchip { flex: none; font-size: 11px; font-weight: 900; color: var(--y); background: var(--yd); border: 1px solid rgba(255, 199, 44, .35); padding: 3px 7px; border-radius: 999px; font-variant-numeric: tabular-nums; } #spl-app .spl-lb-tot small { display: block; font-size: 9px; color: var(--mu); letter-spacing: .12em; text-align: right; } #spl-app .spl-main > section + section, #spl-app .spl-main > div + section, #spl-app .spl-main > section + div { margin-top: 14px; } #spl-app .spl-pad-chips { padding: 0 16px 10px; } #spl-app .spl-center { text-align: center; margin-top: 16px; } #spl-app .spl-replay { background: var(--s1); border: 1px solid var(--y); border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; } #spl-app .spl-replay.idle { display: flex; align-items: center; gap: 12px; border-color: var(--line); } #spl-app .spl-replay.idle > div { flex: 1; } #spl-app .spl-replay.idle small { display: block; color: var(--mu); font-size: 13px; } #spl-app .spl-rp-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } #spl-app .spl-rp-top .spl-chips button { padding: 5px 10px; } #spl-app .spl-rp-clock { font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--y); margin-left: auto; } #spl-app .spl-rp-range { width: 100%; margin: 12px 0 4px; accent-color: var(--y); } #spl-app .spl-rp-feed { display: grid; gap: 4px; margin-top: 6px; } #spl-app .spl-rp-feed > div { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 5px 8px; border-radius: 8px; background: var(--s2); } #spl-app .spl-rp-feed > div.new { background: var(--yd); } #spl-app .spl-rp-feed small { margin-left: auto; color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #spl-app .spl-td { font-size: 10px; font-weight: 900; background: var(--y); color: #111; border-radius: 4px; padding: 1px 5px; } #spl-app .spl-h2h { display: grid; gap: 8px; padding: 0 10px 4px; } @media (min-width: 760px) { #spl-app .spl-h2h { grid-template-columns: 1fr 1fr; } } #spl-app .spl-h2h-g { background: var(--s2); border-radius: 12px; padding: 8px 10px 10px; border: 1px solid transparent; } #spl-app .spl-h2h-g.po { border-color: rgba(255, 199, 44, .45); } #spl-app .spl-h2h-g.final { border-color: var(--y); background: linear-gradient(180deg, rgba(255, 199, 44, .12), var(--s2)); } #spl-app .spl-h2h-g.bye { color: var(--mu); display: flex; align-items: center; gap: 8px; } #spl-app .spl-h2h-t { font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--y); margin-bottom: 6px; } #spl-app .spl-h2h-s { display: flex; align-items: center; gap: 10px; padding: 5px 0; } #spl-app .spl-h2h-s + .spl-h2h-s { border-top: 1px solid var(--line); } #spl-app .spl-h2h-s > span { flex: 1; min-width: 0; } #spl-app .spl-h2h-s small { display: block; color: var(--mu); font-size: 11px; } #spl-app .spl-h2h-s em { font-style: normal; font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--mu); } #spl-app .spl-h2h-s.up em { color: var(--tx); } #spl-app .spl-h2h-s.won em { color: var(--y); } #spl-app .spl-h2h-s.won b::after { content: " W"; color: var(--y); font-size: 11px; } #spl-app .spl-aws { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; padding: 0 10px 12px; } #spl-app .spl-aw { background: var(--s2); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; } #spl-app .spl-aw.gold { background: linear-gradient(135deg, rgba(255, 199, 44, .22), var(--s2)); border: 1px solid rgba(255, 199, 44, .5); } #spl-app .spl-aw small { font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--y); } #spl-app .spl-aw b { font-size: 24px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; } #spl-app .spl-aw span { font-weight: 800; display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #spl-app .spl-aw em { font-style: normal; font-size: 12px; color: var(--mu); } /* ---------- champions ---------- */ #spl-app .spl-champs { background: var(--s1); border: 1px solid var(--line); border-radius: 18px; padding: 14px; margin-bottom: 14px; } #spl-app .spl-champs.done { background: radial-gradient(120% 140% at 50% 0%, rgba(255, 199, 44, .28), var(--s1) 60%); border-color: var(--y); } #spl-app .spl-champs-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } #spl-app .spl-champs-h h2 { font-size: 22px; font-weight: 900; } #spl-app .spl-champs.big .spl-champs-h h2 { font-size: 28px; } #spl-app .spl-champs-g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } @media (max-width: 620px) { #spl-app .spl-champs-g { grid-template-columns: 1fr 1fr; } } #spl-app .spl-champ { background: rgba(0, 0, 0, .35); border-radius: 12px; padding: 12px 8px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; } #spl-app .spl-champ small { font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--y); margin-top: 4px; } #spl-app .spl-champ b { font-size: 16px; font-weight: 900; } /* ---------- standings ---------- */ #spl-app .spl-subtabs { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 12px; padding-bottom: 2px; scrollbar-width: none; } #spl-app .spl-subtabs button { flex: none; padding: 8px 14px; border-radius: 999px; background: var(--s1); border: 1px solid var(--line); font-weight: 800; font-size: 13px; color: var(--mu); } #spl-app .spl-subtabs button.on { background: var(--tx); color: #111; border-color: var(--tx); } #spl-app .spl-mv { flex: none; width: 26px; font-size: 10px; font-weight: 900; color: var(--mu2); text-align: center; } #spl-app .spl-mv.up { color: var(--green); } #spl-app .spl-mv.dn { color: var(--red); } #spl-app .spl-lpb { display: flex !important; flex-wrap: wrap; gap: 4px; margin: 3px 0 2px; } #spl-app .spl-lpb span { background: var(--s3); color: #d6d6d6; border-radius: 6px; padding: 1px 6px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; } #spl-app .spl-table tr.in td:first-child { color: var(--y); font-weight: 900; } #spl-app .spl-cell-lp { display: block; font-size: 10px; color: var(--mu); font-weight: 700; } #spl-app .spl-table td.win .spl-cell-lp { color: #3a2e00; } #spl-app .spl-bracket { display: grid; gap: 14px; padding: 0 12px 14px; } @media (min-width: 640px) { #spl-app .spl-bracket { grid-template-columns: 1fr 1fr; align-items: center; } } #spl-app .spl-br-col { display: grid; gap: 10px; } #spl-app .spl-br-g { background: var(--s2); border-radius: 12px; padding: 8px 10px; } #spl-app .spl-br-col.fin .spl-br-g:first-child { border: 1px solid var(--y); } #spl-app .spl-br-g > small { display: block; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--y); margin-bottom: 4px; } #spl-app .spl-br-r { display: flex; align-items: center; gap: 6px; padding: 5px 0; color: var(--mu); } #spl-app .spl-br-r + .spl-br-r { border-top: 1px solid var(--line); } #spl-app .spl-br-r em { font-style: normal; font-size: 11px; font-weight: 900; width: 14px; color: var(--mu2); } #spl-app .spl-br-r span { flex: 1; font-weight: 700; } #spl-app .spl-br-r b { font-variant-numeric: tabular-nums; } #spl-app .spl-br-r.won { color: var(--tx); } #spl-app .spl-br-r.won b { color: var(--y); } #spl-app .spl-results { padding: 0 12px 12px; display: grid; gap: 10px; } #spl-app .spl-res-h { font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--mu); margin-bottom: 4px; } #spl-app .spl-res { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--s2); border-radius: 10px; margin-bottom: 4px; font-size: 14px; color: var(--mu); } #spl-app .spl-res span { flex: 1; } #spl-app .spl-res span + i + span { text-align: right; } #spl-app .spl-res i { font-style: normal; font-size: 11px; } #spl-app .spl-res .won { color: var(--tx); font-weight: 800; } #spl-app .spl-res .won b { color: var(--y); } #spl-app .spl-res small { font-size: 10px; color: var(--y); font-weight: 900; text-transform: uppercase; } /* ---------- record book: trophy, records, badges ---------- */ #spl-app .spl-holder { display: flex; align-items: center; gap: 12px; margin: 0 12px 10px; padding: 12px; border-radius: 14px; background: linear-gradient(90deg, rgba(255, 199, 44, .18), var(--s2)); } #spl-app .spl-holder b { font-size: 22px; font-weight: 900; display: block; } #spl-app .spl-holder small { color: #d6d6d6; } #spl-app .spl-tcount { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px 14px; } #spl-app .spl-tcount > div { display: flex; align-items: center; gap: 8px; background: var(--s2); border-radius: 999px; padding: 4px 12px 4px 4px; font-weight: 700; font-size: 14px; } #spl-app .spl-tcount b { color: var(--y); font-weight: 900; } #spl-app .spl-rec { border-left: 3px solid var(--pc, var(--y)); } #spl-app .spl-share { display: inline-block; width: 60px; height: 6px; background: var(--s3); border-radius: 3px; margin-right: 8px; vertical-align: middle; overflow: hidden; } #spl-app .spl-share i { display: block; height: 100%; background: var(--y); } #spl-app .spl-bpeople { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 12px 12px; } #spl-app .spl-bpeople button { display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; background: var(--s2); border: 1px solid var(--line); font-weight: 800; font-size: 14px; } #spl-app .spl-bpeople button.on { border-color: var(--y); background: var(--yd); } #spl-app .spl-bpeople small { display: inline-flex; align-items: center; gap: 3px; color: var(--mu); font-size: 11px; font-weight: 800; } #spl-app .spl-bpeople small i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-left: 4px; } #spl-app .t1 { --tier: #c77b3a; } #spl-app .t2 { --tier: #bfc5cc; } #spl-app .t3 { --tier: #FFC72C; } #spl-app .t4 { --tier: #9fe4f2; } #spl-app .spl-bpeople small i { background: var(--tier); } #spl-app .spl-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; padding: 0 10px 12px; } #spl-app .spl-bdg { display: flex; gap: 12px; align-items: flex-start; background: var(--s2); border-radius: 12px; padding: 12px; } #spl-app .spl-medal { flex: none; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #fff8, transparent 55%), var(--tier, #2e2e2e); box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .25), 0 0 0 2px var(--tier, #3a3a3a); } #spl-app .spl-medal span { font-weight: 900; font-size: 15px; color: #111; letter-spacing: .02em; } #spl-app .spl-bdg.t0 .spl-medal { background: #262626; box-shadow: inset 0 0 0 2px #333; } #spl-app .spl-bdg.t0 .spl-medal span { color: #555; } #spl-app .spl-bdg.t4 .spl-medal { box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .2), 0 0 0 2px var(--tier), 0 0 14px rgba(159, 228, 242, .55); } #spl-app .spl-bdg-i { flex: 1; min-width: 0; } #spl-app .spl-bdg-i b { font-weight: 900; } #spl-app .spl-bdg-i > small { display: block; color: var(--mu); font-size: 12px; } #spl-app .spl-bdg-v { font-size: 13px; margin: 3px 0 5px; } #spl-app .spl-bdg-v em { font-style: normal; font-weight: 900; color: var(--tier, var(--mu)); } #spl-app .spl-prog { height: 5px; border-radius: 3px; background: var(--s3); overflow: hidden; margin-bottom: 3px; } #spl-app .spl-prog i { display: block; height: 100%; background: var(--y); } /* ---------- picker: spaced columns, compare ---------- */ #spl-app .spl-listhead { display: flex; align-items: center; padding: 6px 18px 4px 52px; font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--mu); border-bottom: 1px solid var(--line); } #spl-app .spl-listhead > span:first-child { flex: 1; } #spl-app .spl-listhead .spl-rstats { margin-right: 72px; } #spl-app .spl-rstats { gap: 6px; } #spl-app .spl-rstats span { min-width: 64px; align-items: center; text-align: center; font-size: 10px; } #spl-app .spl-rstats b { font-size: 15px; } #spl-app .spl-rstats small { font-size: 9px; color: var(--mu2); font-weight: 700; letter-spacing: 0; } #spl-app .spl-listhead .spl-rstats span { display: block; } #spl-app .spl-dash { color: var(--mu2); font-size: 14px; } #spl-app .spl-addbtn, #spl-app .spl-addsp { width: 64px; text-align: center; } #spl-app .spl-addsp { flex: none; display: block; } #spl-app .spl-cmpt { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--mu2); position: relative; } #spl-app .spl-cmpt:hover { border-color: var(--y); } #spl-app .spl-cmpt.on { background: var(--y); border-color: var(--y); } #spl-app .spl-cmpt.on::after { content: ""; position: absolute; left: 5px; top: 1px; width: 6px; height: 11px; border: solid #111; border-width: 0 3px 3px 0; transform: rotate(45deg); } @media (max-width: 520px) { #spl-app .spl-rstats span, #spl-app .spl-rstats span:nth-child(n+2) { display: flex; min-width: 44px; } #spl-app .spl-rstats span:nth-child(n+4) { display: none; } #spl-app .spl-rstats b { font-size: 13px; } #spl-app .spl-row { gap: 6px; padding: 6px 4px; } #spl-app .spl-row .spl-hs { width: 34px; height: 34px; } #spl-app .spl-addbtn, #spl-app .spl-addsp { width: 50px; padding: 8px 4px; } #spl-app .spl-listhead { padding-left: 40px; padding-right: 10px; } #spl-app .spl-listhead .spl-rstats { margin-right: 54px; } #spl-app .spl-listhead .spl-rstats span { display: block; } #spl-app .spl-listhead .spl-rstats span:nth-child(n+4) { display: none; } } #spl-app .spl-cmpbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--y); background: var(--s2); font-size: 13px; font-weight: 700; } #spl-app .spl-cmp-faces { display: flex; } #spl-app .spl-cmp-faces .spl-hs { width: 30px; height: 30px; margin-right: -8px; box-shadow: 0 0 0 2px var(--s2); } #spl-app .spl-cmpbar > span { margin-left: 8px; color: var(--mu); } #spl-app .spl-cmpbar .spl-btn { margin-left: auto; align-self: center; } #spl-app .spl-cmp { position: fixed; z-index: 56; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(900px, 97vw); max-height: 92vh; max-height: 92dvh; background: var(--s1); border: 1px solid var(--line); border-radius: 20px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .8); } #spl-app .spl-cmp-body { overflow: auto; padding: 0 8px 12px; } #spl-app .spl-cmp-t { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; min-width: calc(110px + var(--n) * 120px); } #spl-app .spl-cmp-t th, #spl-app .spl-cmp-t td { padding: 9px 8px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; } #spl-app .spl-cmp-t tbody th, #spl-app .spl-cmp-t tfoot th { width: 110px; text-align: left; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mu); position: sticky; left: 0; background: var(--s1); } #spl-app .spl-cmp-t thead th:first-child { width: 110px; } #spl-app .spl-cmp-t thead th { position: relative; vertical-align: bottom; } #spl-app .spl-cmp-p { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; } #spl-app .spl-cmp-p .spl-hs { width: 58px; height: 58px; } #spl-app .spl-cmp-p b { font-weight: 900; font-size: 14px; line-height: 1.2; } #spl-app .spl-cmp-p:hover b { color: var(--y); } #spl-app .spl-cmp-p small { color: var(--mu); font-size: 11px; } #spl-app .spl-cmp-x { position: absolute; right: 4px; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--s3); font-size: 15px; line-height: 1; display: grid; place-items: center; } #spl-app .spl-cmp-t td.best { color: var(--y); font-weight: 900; } #spl-app .spl-cmp-t td small { color: var(--mu); font-weight: 600; } #spl-app .spl-spark { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 26px; margin-top: 4px; } #spl-app .spl-spark i { width: 8px; background: var(--y); border-radius: 2px 2px 0 0; opacity: .8; } #spl-app .spl-ok { color: var(--green); font-weight: 700; font-size: 13px; } #spl-app .spl-pc-fb { display: flex; gap: 8px; align-items: center; } #spl-app .spl-pc-f .spl-btn.sm { align-self: center; } /* ---------- league rules ---------- */ #spl-app .spl-rules { position: fixed; z-index: 66; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(720px, 96vw); max-height: 92vh; max-height: 92dvh; background: var(--s1); border: 1px solid var(--line); border-radius: 20px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .8); } #spl-app .spl-rules-body { overflow-y: auto; padding: 4px 18px 20px; font-size: 14px; line-height: 1.55; } #spl-app .spl-rules-body h4 { margin: 18px 0 6px; font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--y); } #spl-app .spl-rules-body p { color: #d6d6d6; margin: 0 0 8px; } #spl-app .spl-rules-body ul { margin: 0 0 8px 18px; padding: 0; color: #d6d6d6; } #spl-app .spl-rules-body li { margin-bottom: 4px; } #spl-app .spl-rules-body b { color: #fff; } #spl-app .spl-rules-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } #spl-app .spl-rules-champs div { background: var(--s2); border-radius: 12px; padding: 10px 12px; } #spl-app .spl-rules-champs b { display: block; color: var(--y); } #spl-app .spl-rules-champs span { font-size: 13px; color: var(--mu); } #spl-app .spl-rules-t { width: 100%; border-collapse: collapse; margin: 4px 0 8px; font-size: 13px; } #spl-app .spl-rules-t td { padding: 6px 8px; border-bottom: 1px solid var(--line); color: #d6d6d6; } #spl-app .spl-rules-t td:last-child { text-align: right; font-weight: 900; color: var(--tx); white-space: nowrap; font-variant-numeric: tabular-nums; } #spl-app .spl-rules-2 { display: grid; gap: 12px; } @media (min-width: 620px) { #spl-app .spl-rules-2 { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { #spl-app .spl-lpchip { display: none; } #spl-app .spl-lb-key { padding-right: 70px; } #spl-app .spl-lb-row { gap: 8px; padding: 10px; } #spl-app .spl-lb-row .spl-av { width: 28px; height: 28px; font-size: 11px; } #spl-app .spl-recapbar { flex-wrap: wrap; } #spl-app .spl-rules-champs { grid-template-columns: 1fr; } } /* avatars never stretch or inherit a parent's text rules */ #spl-app .spl-h2h-s > .spl-av, #spl-app .spl-br-r > .spl-av, #spl-app .spl-champ > .spl-av { flex: none; color: #fff; } #spl-app .spl-champ > .spl-av.lg { font-size: 18px; margin-bottom: 2px; } #spl-app .spl-champ > span:not(.spl-av) { font-size: 11px; color: var(--mu); } #spl-app .spl-aw span.spl-av { display: inline-grid; flex: none; } /* ---------- scoreboard leaderboard: each person in their own color, rosters easier to scan ---------- */ #spl-app .spl-lb-row.pc { box-shadow: inset 4px 0 0 var(--pc); } #spl-app .spl-lb-row.pc.open { background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 22%, var(--s2)), var(--s2) 70%); border-color: color-mix(in srgb, var(--pc) 55%, transparent); } #spl-app .spl-lb-row.pc.lead.open { border-color: var(--y); } #spl-app .spl-lb-detail[style] { box-shadow: inset 4px 0 0 var(--pc); border: 1px solid color-mix(in srgb, var(--pc) 55%, transparent); border-top: 0; padding: 12px 12px 12px 16px; } #spl-app .spl-mini { background: var(--s1); border-radius: 12px; padding: 4px 6px 6px; } #spl-app .spl-mini-h { align-items: center; padding: 8px 6px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line); } #spl-app .spl-mini-h span { background: var(--yd); color: var(--y); border-radius: 6px; padding: 3px 8px; } #spl-app .spl-mini.spin .spl-mini-h span { background: var(--y); color: #111; } #spl-app .spl-mini-h b { font-size: 18px; color: var(--tx); letter-spacing: 0; font-variant-numeric: tabular-nums; } #spl-app .spl-mini-r { position: relative; border-top: 0; border-radius: 8px; padding: 6px 8px; margin-top: 3px; isolation: isolate; } #spl-app .spl-mini-r::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 0%); border-radius: 8px; background: color-mix(in srgb, var(--pc, #666) 20%, transparent); z-index: -1; transition: width .4s ease; } #spl-app .spl-mini-r:not(.empty):hover { background: rgba(255, 255, 255, .04); } #spl-app .spl-hs.mini { width: 30px; height: 30px; } #spl-app .spl-mini-r > b { min-width: 44px; text-align: right; font-size: 16px; font-weight: 900; } #spl-app .spl-mini-r.top > b { color: var(--y); } #spl-app .spl-mini-r.top > b::after { content: "TOP"; display: block; font-size: 8px; letter-spacing: .12em; color: var(--y); } #spl-app .spl-mini-r.low > b { color: var(--mu); } #spl-app .spl-mini-r.empty { margin-top: 3px; border: 1px dashed var(--line); } #spl-app .spl-both { font-style: normal; font-size: 8px; font-weight: 900; letter-spacing: .08em; background: var(--s3); color: var(--mu); border-radius: 4px; padding: 1px 4px; margin-left: 6px; vertical-align: 2px; } /* ---------- weekly awards: an even 4 x 2 grid (2 across on phones), same layout in every tile ---------- */ #spl-app .spl-aws { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 760px) { #spl-app .spl-aws { grid-template-columns: repeat(2, minmax(0, 1fr)); } } #spl-app .spl-aw { padding: 12px 14px; } #spl-app .spl-aw > i { font-style: normal; font-size: 11px; color: var(--mu); margin-bottom: 4px; } #spl-app .spl-aw > em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------- standings: Head-to-Head list ---------- */ #spl-app .spl-rank.seed { box-shadow: 0 0 0 2px rgba(255, 199, 44, .55); } #spl-app .spl-lpb span.w { color: var(--green); } #spl-app .spl-lpb span.lo { color: var(--red); } #spl-app .spl-poline { display: flex; align-items: center; gap: 10px; margin: 8px 4px 10px; color: var(--y); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; } #spl-app .spl-poline::before, #spl-app .spl-poline::after { content: ""; flex: 1; border-top: 1px dashed rgba(255, 199, 44, .5); } /* ---------- standings: Weekly table (spaced, sortable, scrolls with pinned columns) ---------- */ #spl-app .spl-table.spl-st { border-collapse: separate; border-spacing: 0; width: auto; min-width: 100%; } #spl-app .spl-table.spl-st th, #spl-app .spl-table.spl-st td { padding: 6px 10px; border-bottom: 1px solid var(--line); } #spl-app .spl-table.spl-st tbody tr:nth-child(odd) td { background: #181818; } #spl-app .spl-table.spl-st tbody tr:nth-child(even) td { background: var(--s1); } #spl-app .spl-table.spl-st td.win { background: inherit; border-radius: 0; color: inherit; } #spl-app .spl-table.spl-st tbody tr:nth-child(odd) td.win { background: #181818; } #spl-app .spl-table.spl-st tbody tr:nth-child(even) td.win { background: var(--s1); } #spl-app .spl-table.spl-st th.sticky, #spl-app .spl-table.spl-st td.sticky { min-width: 140px; box-shadow: 8px 0 8px -8px rgba(0, 0, 0, .9); z-index: 2; } #spl-app .spl-table.spl-st.stk th.sticky, #spl-app .spl-table.spl-st.stk td.sticky { box-shadow: none; } #spl-app .spl-table.spl-st.stk .s2, #spl-app .spl-table.spl-st.stk .s3 { position: sticky; z-index: 2; } #spl-app .spl-table.spl-st.stk thead .s2, #spl-app .spl-table.spl-st.stk thead .s3 { background: var(--s1); } #spl-app .spl-table.spl-st.stk .s3 { box-shadow: 8px 0 8px -8px rgba(0, 0, 0, .9); border-right: 1px solid var(--line); } #spl-app .spl-table.spl-st .s2 { min-width: 60px; } #spl-app .spl-table.spl-st .s3 { min-width: 84px; } #spl-app .spl-table.spl-st td.wk { padding: 5px 4px; cursor: pointer; } #spl-app .spl-table.spl-st th.wk { padding: 6px 4px; } #spl-app .spl-cell { display: block; min-width: 84px; padding: 6px 10px; border-radius: 8px; text-align: right; font-variant-numeric: tabular-nums; } #spl-app .spl-table.spl-st td.wk:hover .spl-cell { background: var(--s3); } #spl-app .spl-table.spl-st td.sorted .spl-cell { box-shadow: inset 0 0 0 1px var(--line); } #spl-app .spl-table.spl-st td.win .spl-cell { background: var(--y); color: #111; font-weight: 900; } #spl-app .spl-table.spl-st td.win .spl-cell-lp { color: #3a2e00; } #spl-app .spl-sort { display: inline-flex; align-items: center; gap: 4px; font: inherit; color: var(--mu); text-transform: uppercase; letter-spacing: .06em; font-size: 11px; font-weight: 800; padding: 4px 6px; border-radius: 6px; } #spl-app .spl-sort:hover { color: var(--tx); background: var(--s2); } #spl-app .spl-sort.on { color: var(--y); } #spl-app .spl-sort i { font-style: normal; font-size: 9px; min-width: 8px; } #spl-app th.wk .spl-sort, #spl-app th.s2 .spl-sort, #spl-app th.s3 .spl-sort { margin-left: auto; float: right; } /* ---------- records: even 4 x 4, all-time or this season ---------- */ #spl-app .spl-recs4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 760px) { #spl-app .spl-recs4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } #spl-app .spl-rec em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--mu2); margin-top: 2px; } #spl-app .spl-rec.empty { border-left-color: var(--s3); opacity: .6; } #spl-app .spl-newrec { font-style: normal; font-size: 9px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; background: var(--y); color: #111; border-radius: 4px; padding: 1px 5px; margin-left: 4px; } /* ---------- badges: the four tier targets under each badge ---------- */ #spl-app .spl-ladder { display: flex; gap: 4px; margin-top: 7px; } #spl-app .spl-ladder span { flex: 1; display: flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 800; color: var(--mu2); background: var(--s1); border-radius: 6px; padding: 3px 5px; font-variant-numeric: tabular-nums; } #spl-app .spl-ladder i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: transparent; box-shadow: inset 0 0 0 1.5px var(--tier); } #spl-app .spl-ladder span.got { color: var(--tx); } #spl-app .spl-ladder span.got i { background: var(--tier); } #spl-app .spl-tier { color: var(--tier) !important; } #spl-app .spl-bd-t th { text-align: right; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--mu); padding: 6px 8px; border-bottom: 1px solid var(--line); } #spl-app .spl-bd-t th:first-child { text-align: left; } #spl-app .spl-bd-t td small { display: block; color: var(--mu); font-size: 11px; } #spl-app .spl-bd-t td:not(:first-child) { text-align: right; font-weight: 800; white-space: nowrap; } #spl-app .spl-table-wrap.flush { padding: 0; } /* ---------- head-to-head schedule ---------- */ #spl-app .spl-sched { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; padding: 0 12px 14px; } #spl-app .spl-sw { background: var(--s2); border-radius: 12px; padding: 8px; border: 1px solid transparent; } #spl-app .spl-sw.now { border-color: var(--y); } #spl-app .spl-sw .spl-res { background: var(--s1); margin-bottom: 4px; font-size: 13px; } #spl-app .spl-sw .spl-res:last-child { margin-bottom: 0; } #spl-app .spl-res.mine { box-shadow: inset 3px 0 0 var(--y); } #spl-app .spl-res span { display: flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; } #spl-app .spl-res span + i + span { justify-content: flex-end; } #spl-app .spl-res span .spl-av.xs { margin-right: 4px; } #spl-app .spl-res span + i + span .spl-av.xs { margin: 0 0 0 4px; } #spl-app .spl-res.bye, #spl-app .spl-res.tbd { color: var(--mu); font-size: 12px; } #spl-app .spl-res .spl-av { flex: none; width: 20px; height: 20px; } /* schedule: a playoff tag sits on its own line above the game instead of crowding the scores */ #spl-app .spl-sw .spl-res { flex-wrap: wrap; row-gap: 2px; } #spl-app .spl-sw .spl-res small { order: -1; width: 100%; font-size: 9px; letter-spacing: .08em; } /* ---------- leaderboard color, muted: a quiet tint + a thin score bar under each player so text stays easy to read ---------- */ #spl-app .spl-lb-row.pc.open { background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 10%, var(--s2)), var(--s2) 60%); border-color: color-mix(in srgb, var(--pc) 35%, var(--line)); } #spl-app .spl-lb-detail[style] { border-color: color-mix(in srgb, var(--pc) 35%, var(--line)); } #spl-app .spl-mini-r::before { top: auto; bottom: 1px; left: 8px; height: 3px; width: calc((100% - 16px) * var(--wf, 0)); width: min(calc(100% - 16px), var(--w, 0%)); border-radius: 2px; background: color-mix(in srgb, var(--pc, #666) 65%, transparent); } #spl-app .spl-mini-r { padding-bottom: 8px; } /* ---------- record book: go-to players and the wheel always fill the row ---------- */ #spl-app .spl-favs { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } #spl-app .spl-wheelfav { grid-template-columns: repeat(10, minmax(0, 1fr)); } @media (max-width: 760px) { #spl-app .spl-wheelfav { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* ---------- My Team: this week's Head-to-Head under the wheel ---------- */ #spl-app .spl-myh2h { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; } #spl-app .spl-myh2h .spl-h2h-g { background: var(--s2); } #spl-app .spl-myh2h-rest .spl-res { background: var(--s2); font-size: 13px; margin-bottom: 4px; } #spl-app .spl-myh2h-rest .spl-res span { display: flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; } #spl-app .spl-myh2h-rest .spl-res span + i + span { justify-content: flex-end; } /* ---------- My Team: the wheel card, then its own Head-to-Head card underneath ---------- */ #spl-app .spl-stagecol { grid-area: stage; display: flex; flex-direction: column; gap: 14px; min-width: 0; } #spl-app .spl-stagecol .spl-stage { grid-area: auto; } @media (min-width: 1180px) { #spl-app .spl-stagecol { position: sticky; top: 76px; align-self: start; } #spl-app .spl-stagecol .spl-stage { position: static; } } #spl-app .spl-myh2h-card .spl-myh2h { padding: 0 12px 12px; margin-top: 0; } #spl-app .spl-myh2h-card .spl-card-h { padding-bottom: 8px; } #spl-app .spl-foot .spl-saved { display: block; margin-top: 4px; font-size: 12px; color: var(--mu); } /* small avatars inside score lines stay round and centered (the line's flex rule was squeezing them) */ #spl-app .spl-res span.spl-av.xs { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; min-width: 20px; gap: 0; font-size: 8px; line-height: 1; overflow: hidden; } #spl-app .spl-myh2h-f { text-align: center; padding: 0 12px 12px; font-size: 12px; } /* ===================================================================== Monster League ===================================================================== */ #spl-app .spl-mon-row { padding: 0 12px 12px; } #spl-app .spl-mon-row .spl-sec-h small { color: var(--mu); font-weight: 700; } #spl-app .spl-mcs { display: flex; gap: 8px; flex-wrap: wrap; } #spl-app .spl-mcs > button { border-radius: 14px; } #spl-app .spl-mc { position: relative; width: 108px; padding: 6px; border-radius: 14px; background: linear-gradient(165deg, color-mix(in srgb, var(--tc, #333) 55%, #000), var(--s2) 70%); border: 1px solid color-mix(in srgb, var(--tc, #333) 55%, var(--line)); display: flex; flex-direction: column; align-items: center; text-align: center; } #spl-app .spl-mc img { width: 66px; height: 66px; border-radius: 50%; object-fit: cover; object-position: top; background: rgba(0, 0, 0, .35); } #spl-app .spl-mc-top { display: flex; align-items: center; gap: 4px; width: 100%; margin-bottom: 2px; } #spl-app .spl-mc-pos { font-size: 9px; font-weight: 900; letter-spacing: .08em; background: rgba(0, 0, 0, .45); border-radius: 4px; padding: 1px 5px; } #spl-app .spl-mc-v { margin-left: auto; font-size: 11px; font-weight: 900; font-variant-numeric: tabular-nums; } #spl-app .spl-mc-shiny { font-size: 8px; font-weight: 900; letter-spacing: .08em; background: var(--y); color: #111; border-radius: 4px; padding: 1px 4px; } #spl-app .spl-mc-n { margin-top: 4px; width: 100%; } #spl-app .spl-mc-n b { display: block; font-size: 12px; font-weight: 800; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #spl-app .spl-mc-n small { color: #d6d6d6; font-size: 10px; } #spl-app .spl-mc-tag { margin-top: 4px; font-size: 12px; color: var(--y); font-weight: 800; } #spl-app .spl-mc.on { outline: 2px solid var(--y); outline-offset: 1px; } #spl-app .spl-mc.out { opacity: .45; } #spl-app .spl-mc.shiny { border-color: var(--y); box-shadow: 0 0 14px rgba(255, 199, 44, .35); } #spl-app .spl-mc.empty { display: grid; place-items: center; min-height: 150px; color: var(--mu2); border-style: dashed; background: none; } #spl-app .spl-battle .spl-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; padding: 0 12px 12px; } #spl-app .spl-vs-side { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; } #spl-app .spl-vs-side .spl-select { max-width: 100%; } #spl-app .spl-vs-mid { text-align: center; color: var(--mu); font-weight: 900; font-size: 12px; text-transform: uppercase; } #spl-app .spl-edge { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; align-items: center; } #spl-app .spl-edge b { color: var(--y); font-size: 18px; } #spl-app .spl-edge span, #spl-app .spl-edge i { font-size: 10px; font-style: normal; color: var(--mu); text-transform: none; letter-spacing: 0; } #spl-app .spl-edge i { color: var(--y); } /* the three weekly battles sit side by side, stacked inside each card so there is no dead space */ #spl-app .spl-battles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } #spl-app .spl-battles .spl-card-h { padding: 12px 12px 6px; } #spl-app .spl-battle .spl-vs { grid-template-columns: 1fr; gap: 6px; justify-items: center; padding: 0 10px 12px; } #spl-app .spl-battle .spl-vs-mid { display: flex; align-items: center; gap: 10px; } #spl-app .spl-battle .spl-vs-mid > span { font-size: 11px; } #spl-app .spl-battle .spl-edge { flex-direction: row; flex-wrap: wrap; gap: 6px; margin-top: 0; } #spl-app .spl-battle .spl-note { padding: 0 12px 12px; } #spl-app .spl-mc.empty { min-height: 120px; width: 108px; } /* head start chips: negatives read red so a penalty is obvious */ #spl-app .spl-edge small { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--mu); } #spl-app .spl-edge span.dn { color: var(--red); } /* cards: two-line names, a labelled projection, and a logo fallback that does not look broken */ #spl-app .spl-mc { width: 116px; } #spl-app .spl-mc-n b { white-space: normal; font-size: 12px; line-height: 1.15; max-height: 2.4em; overflow: hidden; } #spl-app .spl-mc-n small { font-size: 10px; letter-spacing: .02em; } #spl-app .spl-mc-v { line-height: 1; text-align: right; } #spl-app .spl-mc-v small { display: block; font-size: 7px; letter-spacing: .1em; text-transform: uppercase; color: #cfcfcf; font-weight: 700; } #spl-app .spl-mc-shiny { font-size: 9px; padding: 1px 4px; } #spl-app .spl-mc img.logo { object-fit: contain; padding: 8px; background: rgba(255,255,255,.08); } #spl-app .spl-edge span.xf { color: var(--y); } /* a matchup with no boost should not shout a number at you */ #spl-app .spl-edge.flat b { font-size: 13px; color: var(--mu); } /* long tab names shorten on phones */ #spl-app .spl-tshort { display: none; } @media (max-width: 760px) { #spl-app .spl-tlong { display: none; } #spl-app .spl-tshort { display: inline; } } /* ===== the live score card: your matchup big, then the league as plain numbers ===== */ #spl-app .spl-live { background: linear-gradient(180deg, var(--s2), var(--s1)); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px 6px; margin: 0 0 12px; } #spl-app .spl-live-h { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--mu2); font-weight: 700; } #spl-app .spl-live-h span:first-child { color: var(--y); } #spl-app .spl-live-g { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 0 2px; } #spl-app .spl-live-g > i { color: var(--mu2); font-style: normal; font-size: 22px; line-height: 1; align-self: flex-start; margin-top: 5px; } #spl-app .spl-live-sc { text-align: center; min-width: 88px; } #spl-app .spl-live-sc b { display: block; font-size: 30px; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--tx); } #spl-app .spl-live-sc.up b { color: var(--y); } #spl-app .spl-live-sc small { display: block; font-size: 11px; color: var(--green); font-variant-numeric: tabular-nums; } #spl-app .spl-live-nm { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13px; font-weight: 700; padding-bottom: 8px; border-bottom: 1px solid var(--line); } #spl-app .spl-live-nm span { min-width: 88px; text-align: center; } #spl-app .spl-live-nm i { color: var(--mu2); font-style: normal; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; } #spl-app .spl-live-lb { width: 100%; border-collapse: collapse; margin-top: 2px; } #spl-app .spl-live-lb th { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--mu2); font-weight: 700; text-align: right; padding: 4px 0 2px; } #spl-app .spl-live-lb td { padding: 5px 0; font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; color: var(--mu); border-top: 1px solid rgba(255, 255, 255, .05); } #spl-app .spl-live-lb td b { color: var(--tx); font-size: 14px; } #spl-app .spl-live-lb td.l { text-align: left; color: var(--tx); font-weight: 600; } #spl-app .spl-live-lb td.l i { display: inline-block; width: 16px; color: var(--mu2); font-style: normal; font-weight: 700; font-size: 11px; } #spl-app .spl-live-lb tr.me td.l { color: var(--y); } @media (max-width: 480px) { #spl-app .spl-live-sc b { font-size: 26px; } #spl-app .spl-live-sc, #spl-app .spl-live-nm span { min-width: 72px; } } /* Coach 'Em All rules: a schedule table and the boost table, not the label / +1 layout */ #spl-app .spl-sched-t td:first-child { white-space: nowrap; width: 1%; color: var(--mu); font-variant-numeric: tabular-nums; } #spl-app .spl-sched-t td:last-child { text-align: left; font-weight: 400; white-space: normal; color: #d6d6d6; } #spl-app .spl-sched-t td:last-child b { color: var(--tx); font-weight: 800; } #spl-app .spl-boost-t th { padding: 6px 8px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--mu2); font-weight: 700; text-align: left; border-bottom: 1px solid var(--line); } #spl-app .spl-boost-t th:not(:first-child), #spl-app .spl-boost-t td:not(:first-child) { text-align: center; width: 22%; } #spl-app .spl-boost-t td:nth-child(2) { font-weight: 800; color: var(--tx); } #spl-app .spl-boost-t td:last-child { color: var(--y); } /* ===== 1.9: rivalries, Power Rankings, Year in Review, Survivor, Pick'em ===== */ #spl-app .spl-series { font-size: 11px; color: var(--mu); text-align: center; padding: 6px 0 2px; letter-spacing: .02em; } #spl-app .spl-rivals { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; padding: 0 12px 14px; } #spl-app .spl-rival { background: var(--s2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; } #spl-app .spl-rival.mine { border-color: rgba(255, 199, 44, .45); } #spl-app .spl-rival-p { display: flex; align-items: center; justify-content: center; gap: 8px; } #spl-app .spl-rival-p b { font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--mu); } #spl-app .spl-rival-p b.up { color: var(--y); } #spl-app .spl-rival-p i { color: var(--mu2); font-style: normal; } #spl-app .spl-rival-n { text-align: center; font-weight: 800; font-size: 13px; margin-top: 4px; } #spl-app .spl-rival-n i { color: var(--mu2); font-style: normal; font-weight: 600; font-size: 11px; } #spl-app .spl-rival small { display: block; text-align: center; font-size: 11px; color: var(--mu); margin-top: 2px; } #spl-app .spl-yir-hero { display: flex; align-items: center; gap: 12px; margin: 4px 12px 10px; padding: 14px; border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--pc) 35%, transparent), var(--s2)); } #spl-app .spl-yir-hero b { display: block; font-size: 22px; font-weight: 900; } #spl-app .spl-yir-hero small { color: var(--y); font-weight: 700; } #spl-app .spl-yir-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; padding: 0 12px 14px; } #spl-app .spl-yir-t { background: var(--s2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; min-width: 0; } #spl-app .spl-yir-t small { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--mu2); font-weight: 700; } #spl-app .spl-yir-t b { display: block; font-size: 22px; font-weight: 900; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #spl-app .spl-yir-t span { display: block; font-size: 12px; color: var(--mu); } #spl-app .spl-vegas { display: inline-grid; place-items: center; background: #2b2b2b; color: var(--y); font-weight: 900; border: 1px solid var(--line); } #spl-app .spl-to { display: inline-flex; gap: 4px; margin-left: auto; } #spl-app .spl-to i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--mu2); } #spl-app .spl-to i.on { background: var(--y); border-color: var(--y); } #spl-app .spl-lb-row.out { opacity: .55; } #spl-app .spl-sv-status { display: flex; align-items: center; gap: 18px; padding: 12px 16px; margin-bottom: 12px; flex-wrap: wrap; } #spl-app .spl-sv-status small { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--mu2); font-weight: 700; margin-bottom: 4px; } #spl-app .spl-sv-status b { font-size: 16px; font-weight: 900; } #spl-app .spl-sv-status .spl-to { margin-left: 0; } #spl-app .spl-sv-status .spl-to i { width: 14px; height: 14px; } #spl-app .spl-sv-status .spl-link { margin-left: auto; } #spl-app .w { color: var(--green); } #spl-app .lo { color: var(--red); } #spl-app .spl-sv-res { font-size: 12px; font-weight: 900; padding: 4px 10px; border-radius: 999px; } #spl-app .spl-sv-res.win { background: rgba(61, 220, 132, .15); color: var(--green); } #spl-app .spl-sv-res.loss { background: rgba(255, 90, 95, .15); color: var(--red); } #spl-app .spl-sv-games, #spl-app .spl-pk { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; padding: 0 12px 12px; } #spl-app .spl-sv-game, #spl-app .spl-pk-g { background: var(--s2); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; } #spl-app .spl-sv-game > small, #spl-app .spl-pk-g > small { display: block; font-size: 11px; color: var(--mu); margin-bottom: 6px; } #spl-app .spl-sv-pair, #spl-app .spl-pk-row { display: flex; align-items: center; gap: 6px; } #spl-app .spl-sv-pair > i, #spl-app .spl-pk-row > i { color: var(--mu2); font-style: normal; font-size: 12px; } #spl-app .spl-sv-t, #spl-app .spl-pk-t { flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--s1); border: 2px solid transparent; color: var(--tx); min-width: 0; } #spl-app .spl-sv-t img, #spl-app .spl-pk-t img { width: 26px; height: 26px; object-fit: contain; flex: none; } #spl-app .spl-sv-t b, #spl-app .spl-pk-t b { font-weight: 900; } #spl-app .spl-sv-t small { margin-left: auto; font-size: 11px; color: var(--mu); font-variant-numeric: tabular-nums; } #spl-app .spl-pk-t em { margin-left: auto; font-style: normal; font-weight: 900; font-variant-numeric: tabular-nums; } #spl-app .spl-sv-t:not([disabled]):hover, #spl-app .spl-pk-t:not([disabled]):hover { border-color: var(--line); } #spl-app .spl-sv-t.on, #spl-app .spl-pk-t.on { border-color: var(--y); background: var(--yd); } #spl-app .spl-sv-t.used { opacity: .35; } #spl-app .spl-sv-t.win, #spl-app .spl-pk-t.won { border-color: var(--green); background: rgba(61, 220, 132, .12); } #spl-app .spl-sv-t.loss, #spl-app .spl-pk-t.miss { border-color: var(--red); background: rgba(255, 90, 95, .12); } #spl-app .spl-sv-t[disabled], #spl-app .spl-pk-t[disabled] { cursor: default; } #spl-app .spl-sv-log { display: flex; gap: 6px; overflow-x: auto; padding: 0 12px 14px; } #spl-app .spl-sv-log > div { flex: none; width: 76px; text-align: center; background: var(--s2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 4px; } #spl-app .spl-sv-log small { display: block; font-size: 10px; color: var(--mu2); } #spl-app .spl-sv-log img { width: 28px; height: 28px; object-fit: contain; display: block; margin: 4px auto 2px; } #spl-app .spl-sv-log b { display: block; font-size: 12px; } #spl-app .spl-sv-log em { display: block; font-style: normal; font-size: 11px; font-weight: 800; color: var(--mu); } #spl-app .spl-sv-log .win em { color: var(--green); } #spl-app .spl-sv-log .loss em, #spl-app .spl-sv-log .missed em { color: var(--red); } #spl-app .spl-pk-tb { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 16px 16px; } #spl-app .spl-pk-tb label { font-size: 13px; font-weight: 700; } #spl-app .spl-pk-tb input { width: 80px; padding: 8px 10px; border-radius: 10px; background: var(--s2); border: 1px solid var(--line); color: var(--tx); font-size: 16px; font-weight: 800; } #spl-app .spl-pk-tb small { color: var(--mu); } /* ===== Wins Pool ===== */ #spl-app .spl-w-order { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 8px; } #spl-app .spl-w-order > div { display: flex; align-items: center; gap: 8px; background: var(--s2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px 4px 6px; } #spl-app .spl-w-order b { width: 20px; text-align: center; color: var(--y); font-weight: 900; } #spl-app .spl-w-clock { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; margin-bottom: 12px; } #spl-app .spl-w-clock small { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mu2); font-weight: 700; } #spl-app .spl-w-clock b { font-size: 20px; font-weight: 900; } #spl-app .spl-w-clock.you { border-color: var(--y); background: linear-gradient(90deg, var(--yd), var(--s1)); animation: spl-pulse 1.6s ease-in-out infinite; } #spl-app .spl-w-clock.you b { color: var(--y); } @keyframes spl-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 199, 44, 0); } 50% { box-shadow: 0 0 0 4px rgba(255, 199, 44, .25); } } #spl-app .spl-w-teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; padding: 0 12px 14px; } #spl-app .spl-w-team { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 12px; background: var(--s2); border: 2px solid transparent; color: var(--tx); } #spl-app .spl-w-team img { width: 40px; height: 40px; object-fit: contain; } #spl-app .spl-w-team b { font-weight: 900; } #spl-app .spl-w-team small { font-size: 11px; color: var(--mu); font-variant-numeric: tabular-nums; } #spl-app .spl-w-team:not([disabled]):hover { border-color: var(--y); } #spl-app .spl-w-team[disabled] { cursor: default; opacity: .75; } #spl-app .spl-w-board { padding: 0 12px 12px; } #spl-app .spl-w-row { background: var(--s2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; } #spl-app .spl-w-row.me { border-color: rgba(255, 199, 44, .45); } #spl-app .spl-w-who { display: flex; align-items: center; gap: 8px; } #spl-app .spl-w-who b { font-weight: 900; } #spl-app .spl-w-who em { margin-left: auto; font-style: normal; font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; } #spl-app .spl-w-who em small { font-size: 10px; color: var(--mu2); margin-left: 4px; text-transform: uppercase; letter-spacing: .08em; } #spl-app .spl-w-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } #spl-app .spl-w-chips span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 4px; border-radius: 999px; background: var(--s1); border-left: 3px solid var(--tc); font-size: 12px; font-weight: 800; } #spl-app .spl-w-chips img { width: 18px; height: 18px; object-fit: contain; } #spl-app .spl-w-chips i { font-style: normal; font-weight: 600; color: var(--mu); font-variant-numeric: tabular-nums; } #spl-app .spl-w-log { padding: 0 12px 12px; } #spl-app .spl-w-log > div { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px solid var(--line); } #spl-app .spl-w-log small { width: 22px; text-align: center; color: var(--mu2); font-weight: 800; } #spl-app .spl-w-log img { width: 28px; height: 28px; object-fit: contain; } #spl-app .spl-w-log b { display: block; font-size: 14px; } #spl-app .spl-w-log i { display: block; font-style: normal; font-size: 12px; color: var(--mu); } /* ===== Badge unlock moment ===== */ #spl-app .spl-unlock { position: fixed; z-index: 65; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(340px, 90vw); text-align: center; background: var(--s2); border: 1px solid var(--y); border-radius: 22px; padding: 26px 20px 20px; overflow: hidden; } #spl-app .spl-unlock.enter { animation: spl-pop .45s cubic-bezier(.2, 1.4, .4, 1); } @keyframes spl-pop { 0% { transform: translate(-50%, -50%) scale(.6); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } } #spl-app .spl-unlock-burst { position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent 0 8%, rgba(255, 199, 44, .12) 8% 12%, transparent 12% 20%, rgba(255, 199, 44, .12) 20% 24%, transparent 24% 33%, rgba(255, 199, 44, .12) 33% 37%, transparent 37% 45%, rgba(255, 199, 44, .12) 45% 49%, transparent 49% 58%, rgba(255, 199, 44, .12) 58% 62%, transparent 62% 70%, rgba(255, 199, 44, .12) 70% 74%, transparent 74% 83%, rgba(255, 199, 44, .12) 83% 87%, transparent 87%); animation: spl-spin 14s linear infinite; pointer-events: none; } @keyframes spl-spin { to { transform: rotate(360deg); } } #spl-app .spl-unlock > *:not(.spl-unlock-burst) { position: relative; } #spl-app .spl-unlock > small { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--y); font-weight: 800; } #spl-app .spl-unlock .spl-bdg { display: flex; justify-content: center; margin: 14px 0 8px; background: none; border: 0; padding: 0; } #spl-app .spl-unlock .spl-medal { width: 96px; height: 96px; } #spl-app .spl-unlock .spl-medal span { font-size: 30px; } #spl-app .spl-unlock h3 { font-size: 24px; font-weight: 900; margin: 4px 0 2px; } #spl-app .spl-unlock > b { display: inline-block; margin-bottom: 6px; } #spl-app .spl-unlock p { color: var(--mu); margin: 0 0 14px; } #spl-app .spl-unlock em { display: block; font-style: normal; font-size: 12px; color: var(--mu2); margin: -6px 0 10px; } #spl-app .spl-unlock .spl-btn { width: 100%; } /* Choose notifications: one switch per notification, saved per person. */ #spl-app .spl-npw { max-height: 86vh; display: flex; flex-direction: column; } #spl-app .spl-npl { overflow-y: auto; margin-top: 12px; border-top: 1px solid rgba(255,255,255,.08); -webkit-overflow-scrolling: touch; } #spl-app .spl-np { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 12px 2px; background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.08); color: var(--tx); font: inherit; font-size: 14px; text-align: left; cursor: pointer; } #spl-app .spl-np span { flex: 1; line-height: 1.35; } #spl-app .spl-np i { position: relative; flex: none; width: 44px; height: 26px; border-radius: 13px; background: #3a3a3a; transition: background .15s; } #spl-app .spl-np i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; } #spl-app .spl-np.on i { background: var(--y); } #spl-app .spl-np.on i::after { transform: translateX(18px); background: #111; } /* Coach 'Em All scouting: inbox, tiers, envelopes, Prospects, Gang Tackle, kick, Captain, Coach-dex. */ #spl-app .spl-theme { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin: 0 0 12px; padding: 10px 14px; border-radius: 14px; background: linear-gradient(90deg, rgba(255,199,44,.18), rgba(255,199,44,.04)); border: 1px solid rgba(255,199,44,.45); } #spl-app .spl-theme b { color: var(--y); font-weight: 900; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; } #spl-app .spl-theme span { color: var(--tx); font-size: 13px; } #spl-app .spl-sc-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-top: 1px solid var(--line); } #spl-app .spl-sc-item:first-of-type { border-top: 0; } #spl-app .spl-sc-item.need { display: block; } #spl-app .spl-sc-item.need .spl-mcs { margin-top: 10px; } #spl-app .spl-sc-card { flex: none; } #spl-app .spl-sc-b { flex: 1; min-width: 0; } #spl-app .spl-sc-b > small { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mu); } #spl-app .spl-sc-b > b { display: block; font-size: 17px; font-weight: 900; margin: 4px 0 2px; line-height: 1.2; } #spl-app .spl-sc-b > p { color: var(--mu); font-size: 13px; margin: 0; line-height: 1.45; } #spl-app .spl-sc-a { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; } #spl-app .spl-sc-a .spl-select { max-width: 220px; } #spl-app .spl-btn.ghost { background: transparent; color: var(--tx); border: 1px solid var(--line); } #spl-app .spl-sc-item.live { background: linear-gradient(90deg, rgba(255,70,70,.14), transparent 70%); } #spl-app .spl-sc-item.live .spl-sc-b > small { color: #ff7a7a; } #spl-app .spl-sc-item.live:not(.on) .spl-sc-b > small::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ff4d4d; animation: spl-pulse 1.2s infinite; } #spl-app .spl-sc-item.t3 .spl-sc-b > b, #spl-app .spl-sc-item.kick .spl-sc-b > b { color: var(--y); } #spl-app .spl-count { font-variant-numeric: tabular-nums; color: var(--tx); } #spl-app .spl-tierchip { display: inline-block; padding: 2px 7px; border-radius: 6px; font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; background: #3a3a3a; color: #eee; } #spl-app .spl-tierchip.t2, #spl-app .spl-tierchip.l2 { background: rgba(255,199,44,.25); color: var(--y); } #spl-app .spl-tierchip.t3, #spl-app .spl-tierchip.l3 { background: var(--y); color: #111; } #spl-app .spl-sc-hist { padding: 4px 12px 12px; display: grid; gap: 4px; } #spl-app .spl-sc-h { font-size: 12px; color: var(--mu); padding-left: 14px; position: relative; } #spl-app .spl-sc-h::before { content: ""; position: absolute; left: 0; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--mu2); } #spl-app .spl-sc-h.done::before { background: var(--y); } #spl-app .spl-env { width: 108px; height: 128px; border-radius: 12px; display: grid; place-items: center; text-align: center; padding: 8px; background: linear-gradient(160deg, #3b3b3b, #1b1b1b); border: 1px solid var(--line); position: relative; overflow: hidden; } #spl-app .spl-env::before { content: ""; position: absolute; left: -10%; right: -10%; top: 0; height: 48%; background: rgba(255,255,255,.06); clip-path: polygon(0 0, 100% 0, 50% 100%); } #spl-app .spl-env span { position: relative; font-weight: 900; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; } #spl-app .spl-env.t2 { border-color: rgba(255,199,44,.6); } #spl-app .spl-env.t3 { border-color: var(--y); box-shadow: 0 0 16px rgba(255,199,44,.35); } #spl-app .spl-env.t3 span { color: var(--y); } #spl-app .spl-film { padding: 0 12px; } #spl-app .spl-film-r { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); } #spl-app .spl-film-r:first-child { border-top: 0; } #spl-app .spl-film-r b { flex: 1; font-size: 14px; font-weight: 700; } #spl-app .spl-film-r small { color: var(--mu2); font-size: 11px; } #spl-app .spl-pros { padding: 4px 12px 0; display: grid; gap: 10px; } #spl-app .spl-pro-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 5px; } #spl-app .spl-pro-h small { color: var(--mu); font-variant-numeric: tabular-nums; font-size: 12px; } #spl-app .spl-prog { height: 8px; border-radius: 4px; background: #2d2d2d; overflow: hidden; } #spl-app .spl-prog i { display: block; height: 100%; border-radius: 4px; background: var(--y); transition: width .4s; } #spl-app .spl-gang .spl-sc-item { border-top: 0; } #spl-app .spl-mc-cap { font-size: 9px; font-weight: 900; background: #fff; color: #111; border-radius: 4px; padding: 1px 4px; } #spl-app .spl-cap-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 0 12px 12px; } #spl-app .spl-cap-row span { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--y); } #spl-app .spl-cap-row .spl-select { max-width: 240px; } #spl-app .spl-cap-row small { color: var(--mu); font-size: 12px; } #spl-app .spl-card-h .spl-btn.sm.ghost { flex: none; } #spl-app .spl-reveal .spl-reveal-c { display: flex; justify-content: center; margin: 14px 0 6px; } #spl-app .spl-reveal .spl-mc { width: 132px; } #spl-app .spl-reveal .spl-mc img { width: 84px; height: 84px; } #spl-app .spl-kick { position: fixed; z-index: 66; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(380px, 92vw); text-align: center; background: var(--s2); border: 1px solid var(--y); border-radius: 22px; padding: 22px 20px 20px; } #spl-app .spl-kick > small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--y); font-weight: 800; } #spl-app .spl-kick h3 { font-size: 20px; font-weight: 900; margin: 4px 0 16px; } #spl-app .spl-kick p { color: var(--mu); margin: 12px 0 0; font-size: 13px; } #spl-app .spl-kick-post { position: relative; height: 70px; margin: 0 6px; border-bottom: 6px solid #d9d9d9; border-radius: 2px; } #spl-app .spl-kick-zone { position: absolute; bottom: 0; top: 0; background: rgba(255,199,44,.22); border-left: 6px solid var(--y); border-right: 6px solid var(--y); } #spl-app .spl-kick-m { position: absolute; bottom: -12px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #111, 0 0 12px rgba(255,255,255,.6); } #spl-app .spl-kick-res { margin-top: 18px; font-size: 26px; font-weight: 900; animation: spl-kickpop .4s cubic-bezier(.2, 1.4, .4, 1); } @keyframes spl-kickpop { 0% { transform: scale(.5); opacity: 0; } 100% { transform: none; opacity: 1; } } #spl-app .spl-kick-res.good { color: var(--y); } #spl-app .spl-kick-res.bad { color: #ff6b6b; } #spl-app .spl-kick .spl-confirm-b { margin-top: 14px; } #spl-app .spl-dex { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; padding: 0 12px 16px; } #spl-app .spl-dex-d { border: 1px solid var(--line); border-radius: 14px; padding: 10px; } #spl-app .spl-dex-d.done { border-color: var(--y); box-shadow: 0 0 12px rgba(255,199,44,.25); } #spl-app .spl-dex-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } #spl-app .spl-dex-h small { color: var(--mu); font-size: 12px; } #spl-app .spl-dex-d.done .spl-dex-h small { color: var(--y); font-weight: 800; } #spl-app .spl-dex-t { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } #spl-app .spl-dex-team { position: relative; aspect-ratio: 1; border-radius: 10px; background: #2a2a2a; display: grid; place-items: center; } #spl-app .spl-dex-team img { width: 70%; height: 70%; object-fit: contain; filter: grayscale(1); opacity: .28; } #spl-app .spl-dex-team.on img { filter: none; opacity: 1; } #spl-app .spl-dex-team.on { background: #3a3a3a; box-shadow: inset 0 0 0 1px rgba(255,199,44,.35); } #spl-app .spl-dex-team small { position: absolute; right: 4px; bottom: 2px; font-size: 10px; font-weight: 900; color: var(--y); } @keyframes spl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } @media (max-width: 520px) { #spl-app .spl-sc-item { flex-direction: column; } #spl-app .spl-sc-item .spl-sc-card { align-self: center; } } /* Coach-dex: NFL map, progress, division sticker pages. */ #spl-app .spl-dex-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; padding: 0 12px 4px; } #spl-app .spl-dex-prog.done .spl-prog i { background: linear-gradient(90deg, var(--y), #fff3c4); } #spl-app .spl-dex-prog.done small { color: var(--y); font-weight: 800; } #spl-app .spl-dex-map { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 12px 16px; } #spl-app .spl-dex-conf { display: grid; gap: 8px; align-content: start; } #spl-app .spl-dex-cf { font-weight: 900; font-size: 18px; letter-spacing: .08em; color: var(--y); text-align: center; } #spl-app button.spl-dex-d { display: block; width: 100%; text-align: left; font: inherit; color: var(--tx); background: none; cursor: pointer; } #spl-app button.spl-dex-d:hover { border-color: rgba(255,199,44,.6); } #spl-app .spl-linkbtn { background: none; border: 0; color: var(--y); font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 0; cursor: pointer; } #spl-app .spl-stk-team { margin: 0 12px 14px; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(160deg, color-mix(in srgb, var(--tc, #333) 28%, #000), var(--s2) 60%); } #spl-app .spl-stk-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } #spl-app .spl-stk-h img { width: 28px; height: 28px; object-fit: contain; } #spl-app .spl-stk-h b { flex: 1; font-size: 15px; font-weight: 900; } #spl-app .spl-stk-h small { color: var(--mu); font-weight: 800; } #spl-app .spl-stk-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } #spl-app .spl-stk { position: relative; border-radius: 10px; padding: 6px 4px 8px; text-align: center; background: rgba(0,0,0,.35); border: 1px dashed rgba(255,255,255,.18); } #spl-app .spl-stk img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; object-position: top; filter: grayscale(1); opacity: .3; margin-top: 12px; } #spl-app .spl-stk b { display: block; font-size: 10px; font-weight: 800; line-height: 1.2; margin-top: 4px; color: var(--mu2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #spl-app .spl-stk-slot { position: absolute; top: 4px; left: 4px; font-size: 9px; font-weight: 900; letter-spacing: .06em; color: var(--mu); } #spl-app .spl-stk.got { border: 1px solid var(--tc, var(--y)); background: rgba(255,255,255,.08); } #spl-app .spl-stk.got img { filter: none; opacity: 1; } #spl-app .spl-stk.got b { color: var(--tx); } #spl-app .spl-stk.got .spl-stk-slot { color: var(--y); } #spl-app .spl-stk.shiny { border-color: var(--y); box-shadow: 0 0 12px rgba(255,199,44,.4); } #spl-app .spl-stk-extra { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; } #spl-app .spl-stk-extra small { color: var(--mu); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; margin-right: 2px; } #spl-app .spl-stk-extra span { font-size: 12px; padding: 3px 8px; border-radius: 8px; background: rgba(255,255,255,.08); } #spl-app .spl-stk-extra span.shiny { color: var(--y); } @media (max-width: 560px) { #spl-app .spl-dex-map { grid-template-columns: 1fr; } #spl-app .spl-stk img { width: 40px; height: 40px; } #spl-app .spl-stk b { font-size: 9px; } } /* Releasing squad players, and the waiting room. */ #spl-app .spl-rel-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; } #spl-app .spl-rel { background: none; border: 0; padding: 2px 6px; font: inherit; font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--mu); cursor: pointer; border-radius: 6px; } #spl-app .spl-rel:hover { color: #ff7a7a; background: rgba(255,90,90,.1); } #spl-app .spl-sc-item.hold .spl-sc-b > small { color: var(--y); } /* My Team: the weekly checklist, the Coach 'Em All line, the Games dot, and Head-to-Head placement. */ #spl-app .spl-chk { margin-bottom: 14px; } #spl-app .spl-chk-left { text-align: right; line-height: 1.1; } #spl-app .spl-chk-left .spl-count { display: block; font-size: 18px; font-weight: 900; color: var(--y); } #spl-app .spl-chk-left small { color: var(--mu); font-size: 11px; } #spl-app .spl-chk-list { display: grid; gap: 4px; padding: 0 10px 10px; } #spl-app .spl-chk-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border-radius: 12px; background: var(--s2); border: 1px solid transparent; color: var(--tx); font: inherit; font-size: 14px; text-align: left; cursor: pointer; } #spl-app .spl-chk-row i { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--mu2); display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 900; color: #111; } #spl-app .spl-chk-row span { flex: 1; font-weight: 700; } #spl-app .spl-chk-row em { font-style: normal; color: var(--y); font-weight: 900; font-size: 18px; } #spl-app .spl-chk-row:not(.done) { border-color: rgba(255,199,44,.35); } #spl-app .spl-chk-row.done { color: var(--mu); } #spl-app .spl-chk-row.done i { background: var(--y); border-color: var(--y); } #spl-app .spl-chk-nices { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 0 10px 12px; } #spl-app .spl-chk-nices small { color: var(--mu); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-right: 2px; } #spl-app .spl-chk-nice { background: var(--s2); border: 1px solid var(--line); color: var(--tx); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; } #spl-app .spl-chk.done { display: block; border-radius: 14px; padding: 10px 12px 2px; background: linear-gradient(90deg, rgba(255,199,44,.18), rgba(255,199,44,.04)); border: 1px solid rgba(255,199,44,.45); } #spl-app .spl-chk.done .spl-chk-nices { padding: 6px 0 8px; } #spl-app .spl-chk-all { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-bottom: 8px; } #spl-app .spl-chk-all b { color: var(--y); font-weight: 900; } #spl-app .spl-chk-all span { color: var(--mu); font-size: 13px; } #spl-app .spl-coachline { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 14px; padding: 10px 14px; border-radius: 14px; background: var(--s1); border: 1px solid rgba(255,199,44,.4); color: var(--tx); font: inherit; text-align: left; cursor: pointer; } #spl-app .spl-coachline b { color: var(--y); font-weight: 900; } #spl-app .spl-coachline span { flex: 1; font-size: 14px; } #spl-app .spl-coachline em { font-style: normal; color: var(--y); font-weight: 900; font-size: 18px; } #spl-app .spl-tabs-b button { position: relative; display: flex; align-items: center; justify-content: center; gap: 5px; } #spl-app .spl-tdot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #ff4d4d; } #spl-app .spl-sbadge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: #ff4d4d; color: #fff; font-size: 11px; font-weight: 900; line-height: 1; vertical-align: 1px; } #spl-app .spl-h2h-out { margin-top: 14px; } #spl-app .spl-h2h-in { display: none; } @media (min-width: 1180px) { #spl-app .spl-h2h-in { display: block; } #spl-app .spl-h2h-out { display: none; } } #spl-app .spl-dex-card .spl-dex-top, #spl-app .spl-dex-card .spl-note, #spl-app .spl-dex-card .spl-dex-map { padding-left: 12px; padding-right: 12px; } /* 1.17.0: a Spin replacement for an injured pick who did not play */ #spl-app .spl-badge.sub { background: var(--y); color: #000; } /* 1.17.1: the field goal on a field */ #spl-app .spl-kick-dist { font-size: 13px; color: var(--mu); margin: -10px 0 10px; } #spl-app .spl-kick-dist b { color: #fff; font-weight: 900; } #spl-app .spl-kick-field { position: relative; margin: 0 -8px; border-radius: 14px; overflow: hidden; border: 1px solid #2a2a2a; } #spl-app .spl-kick-svg { display: block; width: 100%; height: auto; } #spl-app .spl-kick-aim { position: absolute; top: 8%; width: 0; height: 0; margin-left: -8px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 13px solid #fff; filter: drop-shadow(0 0 3px #000); } #spl-app .spl-kick-aim::after { content: ""; position: absolute; left: -1px; top: -1px; width: 2px; height: 36px; background: linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,0)); } #spl-app .spl-kb { transform-box: view-box; transform-origin: 150px 184px; } #spl-app .spl-kb.fly { animation: spl-kb-fly .95s cubic-bezier(.3, .7, .45, 1) forwards; } #spl-app .spl-kb.post { animation: spl-kb-post 1.15s ease-out forwards; } #spl-app .spl-kb.landed { animation-delay: -5s; } #spl-app .spl-kb.fly ellipse, #spl-app .spl-kb.post ellipse { transform-box: fill-box; transform-origin: center; animation: spl-kb-spin .22s linear infinite; } #spl-app .spl-kb.landed ellipse { animation: none; } @keyframes spl-kb-fly { to { transform: translate(var(--kx), -166px) scale(.26); } } @keyframes spl-kb-post { 55% { transform: translate(var(--kx), -158px) scale(.3); } 100% { transform: translate(var(--kx2), var(--ky2)) scale(.28); } } @keyframes spl-kb-spin { to { transform: rotate(360deg); } } #spl-app .spl-kick-out { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 66px; margin-top: 12px; } #spl-app .spl-kick-out .spl-kick-res { margin-top: 0; font-size: 24px; } #spl-app .spl-ref { width: 46px; height: 62px; flex: none; } #spl-app .spl-ref-arms { transform-box: view-box; transform-origin: 30px 26px; } #spl-app .spl-ref.up .spl-ref-arms { animation: spl-ref-up .35s cubic-bezier(.2, 1.4, .4, 1); } #spl-app .spl-ref.no .spl-ref-arms { animation: spl-ref-no .45s ease-in-out 3; } @keyframes spl-ref-up { from { transform: scaleY(.1); } } @keyframes spl-ref-no { 25% { transform: rotate(14deg); } 75% { transform: rotate(-14deg); } } /* 1.18.0: Practice mini-games (Games > Practice) */ #spl-app .spl-pk { padding: 16px; } #spl-app .spl-pk h3 { margin: 0 0 4px; font-size: 19px; font-weight: 900; } #spl-app .spl-pk p { margin: 0; color: var(--mu); font-size: 13px; line-height: 1.45; } #spl-app .spl-pk-tag { display: inline-block; margin-bottom: 8px; padding: 2px 7px; border-radius: 4px; background: var(--y); color: #000; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } #spl-app .spl-pk-stat { margin: 10px 0 2px; font-size: 13px; font-weight: 800; color: var(--y); } #spl-app .spl-pk-lv { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; } #spl-app .spl-pk-lv button { padding: 7px 13px; border-radius: 999px; border: 1px solid #333; background: #1a1a1a; color: #ddd; font-weight: 800; font-size: 13px; } #spl-app .spl-pk-lv button.on { background: #fff; border-color: #fff; color: #000; } #spl-app .spl-pk > .spl-btn { width: 100%; } #spl-app .spl-mini { width: min(400px, 94vw); padding-top: 16px; } #spl-app .spl-mini h3 { margin-bottom: 8px; } #spl-app .spl-mini-hud { min-height: 18px; margin: 0 0 8px; font-size: 13px; font-weight: 800; color: #ddd; } #spl-app .spl-mini-field { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } #spl-app .spl-mini-svg { display: block; width: 100%; height: auto; max-height: 50vh; } #spl-app .spl-mini-flash { position: absolute; left: 0; right: 0; top: 5%; text-align: center; font-size: 22px; font-weight: 900; color: #fff; text-shadow: 0 2px 10px #000, 0 0 2px #000; pointer-events: none; } #spl-app .spl-mini-flash.good { color: var(--y); } #spl-app .spl-mini-flash.bad { color: #ff6b6b; } #spl-app .spl-juke-b { display: flex; gap: 10px; margin-top: 12px; } #spl-app .spl-juke-b .spl-btn { flex: 1; padding: 16px 0; font-size: 18px; touch-action: none; } /* 1.19.0: Retro Football (a full-screen layer on , outside #spl-app) */ html.spl-retro-on, html.spl-retro-on body { overflow: hidden; overscroll-behavior: none; } #spl-retro { position: fixed; inset: 0; z-index: 99999; display: flex; flex-direction: column; background: #000; color: #fff; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; text-transform: uppercase; -webkit-user-select: none; user-select: none; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); } /* Upright only: the game keeps a portrait box however the phone is held. */ #spl-retro { --rf-box: min(100%, calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 0.58)); } #spl-retro > * { width: var(--rf-box); margin-inline: auto; } #spl-retro .rf-top, #spl-retro .rf-stage, #spl-retro .rf-help { background: #0b0b0b; } #spl-retro .rf-top { display: flex; align-items: center; gap: 8px; padding: 8px 10px; } #spl-retro .rf-bug { flex: 1; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; font-weight: 800; letter-spacing: .04em; } #spl-retro .rf-tm { padding: 3px 6px; border-radius: 3px; color: #fff; text-shadow: 0 1px 0 #000; } #spl-retro .rf-vs { color: #888; font-size: 10px; } #spl-retro .rf-bug b { margin-left: 6px; color: #FFC72C; } #spl-retro .rf-bug span:last-child { color: #bbb; } #spl-retro .rf-x { width: 36px; height: 36px; border-radius: 8px; border: 1px solid #333; background: #1a1a1a; color: #fff; font-size: 22px; line-height: 1; } #spl-retro .rf-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; } #spl-retro canvas { display: block; image-rendering: pixelated; touch-action: none; } #spl-retro .rf-msg { position: absolute; left: 0; right: 0; top: 22%; text-align: center; font-size: 22px; font-weight: 900; letter-spacing: .06em; color: #FFC72C; text-shadow: 3px 3px 0 #000; opacity: 0; transform: scale(.8); transition: opacity .12s, transform .12s; pointer-events: none; } #spl-retro .rf-msg.on { opacity: 1; transform: none; } #spl-retro .rf-panel { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.55); padding: 16px; } #spl-retro .rf-panel.on { display: flex; } #spl-retro .rf-call, #spl-retro .rf-end { width: min(360px, 100%); background: #111; border: 3px solid #FFC72C; border-radius: 6px; padding: 14px; text-align: center; box-shadow: 6px 6px 0 #000; } #spl-retro .rf-call small { color: #aaa; font-size: 11px; } #spl-retro h3 { margin: 4px 0 12px; font-size: 20px; letter-spacing: .06em; } #spl-retro .rf-end h3 { font-size: 26px; color: #ff6b6b; } #spl-retro .rf-end.win h3 { color: #FFC72C; } #spl-retro .rf-end p { margin: 0 0 14px; color: #ddd; font-size: 12px; text-transform: none; } #spl-retro .rf-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } #spl-retro .rf-card { padding: 12px 8px; border-radius: 4px; border: 2px solid #000; background: #FFC72C; color: #000; font-family: inherit; text-transform: uppercase; box-shadow: 3px 3px 0 #000; } #spl-retro .rf-card b { display: block; font-size: 13px; } #spl-retro .rf-card small { display: block; margin-top: 3px; font-size: 10px; color: #3a3a3a; } #spl-retro .rf-card.ghost small { color: #bbb; } #spl-retro .rf-card.kick { background: #fff; } #spl-retro .rf-card.ghost { background: #2a2a2a; color: #fff; } #spl-retro .rf-card:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; } #spl-retro .rf-help { min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 6px 10px 10px; font-size: 11px; color: #bbb; letter-spacing: .04em; } #spl-retro .rf-btn { padding: 10px 18px; border-radius: 4px; border: 2px solid #000; background: #fff; color: #000; font-family: inherit; font-weight: 900; text-transform: uppercase; box-shadow: 3px 3px 0 #000; } #spl-app .spl-rf-teams { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 2px; margin-top: 10px; } #spl-app .spl-rf-teams button { flex: none; display: flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px; border: 1px solid #333; background: #1a1a1a; color: #ddd; font-weight: 800; font-size: 12px; } #spl-app .spl-rf-teams button.on { background: #fff; color: #000; border-color: #fff; } #spl-app .spl-rf-teams img { width: 18px; height: 18px; object-fit: contain; } #spl-app .spl-kick-streak { margin: 10px 0 0; color: #ddd; font-weight: 800; } /* 1.20.0: Retro Football sideways (side-scrolling, full screen), the stadium, the matchup card */ #spl-retro { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; } #spl-retro .rf-top { grid-row: 1; } #spl-retro .rf-stage { grid-row: 2; } #spl-retro .rf-help { grid-row: 3; } #spl-retro .rf-mu { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 12px; text-transform: none; } #spl-retro .rf-mu > div { border: 2px solid var(--c); border-radius: 4px; padding: 8px; background: #181818; text-align: left; } #spl-retro .rf-mu em { font-style: normal; font-weight: 900; font-size: 12px; background: var(--c); padding: 2px 6px; border-radius: 3px; text-shadow: 0 1px 0 #000; } #spl-retro .rf-mu strong { display: block; margin-top: 6px; font-size: 30px; line-height: 1; color: #FFC72C; } #spl-retro .rf-mu > div > small { color: #999; font-size: 10px; text-transform: uppercase; } #spl-retro .rf-mu ul { list-style: none; margin: 6px 0 0; padding: 0; } #spl-retro .rf-mu li { display: flex; gap: 6px; padding: 2px 0; font-size: 11px; } #spl-retro .rf-mu li i { width: 22px; font-style: normal; color: #888; } #spl-retro .rf-mu li span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #spl-retro .rf-mu li b { color: #FFC72C; } #spl-retro .rf-match > .rf-card { width: 100%; } #spl-retro .rf-tip { margin: 8px 0 0; font-size: 10px; color: #888; } #spl-retro .rf-mu li u { text-decoration: none; font-size: 9px; padding: 0 3px; margin-left: 3px; border-radius: 2px; background: #FFC72C; color: #000; vertical-align: 1px; } #spl-retro .rf-diag { display: block; width: 100%; height: auto; margin: 0 0 6px; background: #1f5c22; border: 1px solid #000; border-radius: 3px; } #spl-app .spl-rf-ro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin: 0 0 12px; font-size: 12px; color: var(--mu); } #spl-app .spl-rf-ro small { color: var(--mu); } /* 1.22.0: Retro Football playbook, zoom */ #spl-retro .rf-z { height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid #333; background: #1a1a1a; color: #fff; font-family: inherit; font-size: 11px; font-weight: 800; text-transform: uppercase; } #spl-retro .rf-call { max-height: calc(100% - 16px); overflow: auto; -webkit-overflow-scrolling: touch; } #spl-retro .rf-group { margin-top: 10px; text-align: left; } #spl-retro .rf-group > i { display: block; margin: 0 0 6px; font-style: normal; font-size: 11px; font-weight: 900; letter-spacing: .1em; color: #FFC72C; } #spl-retro .rf-card { padding: 8px 6px; } /* 1.23.0: Retro Football, closer to Retro Bowl */ #spl-retro { grid-template-columns: minmax(0, 1fr); } #spl-retro .rf-stage { min-width: 0; overflow: hidden; } #spl-retro .rf-msg { top: 38%; left: 50%; right: auto; padding: 8px 16px; border-radius: 6px; background: rgba(6, 22, 10, .8); color: #fff; font-size: 15px; letter-spacing: .04em; text-shadow: none; white-space: nowrap; transform: translateX(-50%) scale(.9); } #spl-retro .rf-msg.on { transform: translateX(-50%); } #spl-retro .rf-banner { position: absolute; left: 0; right: 0; top: 56%; padding: 10px 0 12px; background: rgba(0, 0, 0, .72); text-align: center; opacity: 0; transition: opacity .15s; pointer-events: none; } #spl-retro .rf-banner.on { opacity: 1; } #spl-retro .rf-banner b { display: block; font-size: 34px; letter-spacing: .08em; color: #fff200; text-shadow: 3px 3px 0 #000; } #spl-retro .rf-banner small { display: block; margin-top: 4px; font-size: 12px; letter-spacing: .12em; color: #fff; } #spl-retro .rf-who { position: absolute; left: 8px; bottom: 6px; display: none; padding: 3px 8px; border-radius: 4px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .04em; pointer-events: none; text-transform: none; } #spl-retro .rf-who.on { display: block; } #spl-retro .rf-pat h3 { color: #fff; } /* 1.24.0: Tecmo-style playbook, quieter overlays, two-button panels that center when sideways */ #spl-retro .rf-book { width: min(940px, 100%); max-height: 100%; overflow: auto; display: flex; flex-direction: column; gap: 6px; } #spl-retro .rf-plays { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } #spl-retro .rf-play { padding: 3px 3px 4px; border: 2px solid #FFC72C; border-radius: 4px; background: #0e2a12; color: #fff; font-family: inherit; box-shadow: 2px 2px 0 #000; } #spl-retro .rf-play.run { border-color: #e8e8e8; } #spl-retro .rf-play:active { transform: translate(1px, 1px); box-shadow: none; } #spl-retro .rf-play .rf-diag { margin: 0; border: 0; } #spl-retro .rf-play b { display: block; margin-top: 3px; overflow: hidden; font-size: 9px; letter-spacing: .03em; white-space: nowrap; text-overflow: ellipsis; } #spl-retro .rf-special { display: flex; justify-content: center; gap: 8px; } #spl-retro .rf-sbtn { padding: 8px 16px; border: 2px solid #000; border-radius: 4px; background: #fff; color: #000; font-family: inherit; font-size: 12px; font-weight: 900; text-transform: uppercase; box-shadow: 2px 2px 0 #000; } #spl-retro .rf-sbtn.ghost { background: #2a2a2a; color: #fff; } #spl-retro .rf-cards.two { grid-template-columns: 1fr 1fr; } #spl-retro .rf-banner b { font-size: 26px; } #spl-retro .rf-banner { padding: 7px 0 9px; background: rgba(0, 0, 0, .6); } #spl-retro .rf-msg { font-size: 13px; padding: 6px 12px; } #spl-retro .rf-who { font-size: 10px; background: rgba(0, 0, 0, .4); } #spl-retro .rf-play.page { border-color: #FFC72C; background: #1a1a1a; } /* 1.26.0: Retro Football scoreboard, moves, versus screen, first screen and team picker */ #spl-retro .rf-bug { gap: 8px; } #spl-retro .rf-teams { display: inline-flex; align-items: center; gap: 6px; } #spl-retro .rf-tm { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 3px; border-radius: 4px; background: var(--c); color: #fff; font-weight: 900; box-shadow: inset 0 -2px 0 rgba(0,0,0,.35); } #spl-retro .rf-tm img { width: 18px; height: 18px; padding: 1px; border-radius: 3px; background: rgba(255,255,255,.92); object-fit: contain; } #spl-retro .rf-teams i { font-style: normal; font-size: 10px; color: #888; } #spl-retro .rf-bug > b { margin-left: 4px; padding: 3px 8px; border-radius: 4px; background: #FFC72C; color: #000; letter-spacing: .04em; } #spl-retro .rf-bug > span:not(.rf-teams) { color: #ccc; } #spl-retro .rf-brand { font-weight: 900; letter-spacing: .14em; color: #FFC72C; } #spl-retro .rf-z { display: inline-flex; align-items: center; gap: 5px; } #spl-retro .rf-moves { display: flex; gap: 6px; pointer-events: auto; } #spl-retro .rf-moves button { min-width: 62px; padding: 9px 8px; border: 2px solid #000; border-radius: 4px; background: #fff; color: #000; font-family: inherit; font-size: 12px; font-weight: 900; text-transform: uppercase; box-shadow: 2px 2px 0 #000; touch-action: manipulation; } #spl-retro .rf-moves button:active { transform: translate(1px, 1px); box-shadow: none; } #spl-retro .rf-versus { width: min(720px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; text-transform: none; } #spl-retro .rf-vt { overflow: hidden; border: 2px solid var(--c); border-radius: 6px; background: #111; box-shadow: 4px 4px 0 #000; } #spl-retro .rf-vt-h { display: flex; align-items: center; gap: 8px; padding: 8px; background: var(--c); } #spl-retro .rf-vt-h img { width: 40px; height: 40px; padding: 2px; border-radius: 6px; background: rgba(255,255,255,.92); object-fit: contain; } #spl-retro .rf-vt-h div { flex: 1; min-width: 0; } #spl-retro .rf-vt-h strong { display: block; overflow: hidden; font-size: 16px; color: #fff; text-transform: uppercase; text-shadow: 2px 2px 0 rgba(0,0,0,.5); white-space: nowrap; text-overflow: ellipsis; } #spl-retro .rf-vt-h small { font-size: 10px; letter-spacing: .1em; color: rgba(255,255,255,.85); text-transform: uppercase; } #spl-retro .rf-vt-h b { font-size: 30px; color: #fff; text-shadow: 2px 2px 0 #000; } #spl-retro .rf-vt ul { margin: 0; padding: 6px 8px 8px; list-style: none; } #spl-retro .rf-vt li { display: flex; gap: 6px; padding: 2px 0; font-size: 12px; color: #eee; } #spl-retro .rf-vt li i { width: 22px; font-style: normal; color: #888; } #spl-retro .rf-vt li span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #spl-retro .rf-vt li em { font-style: normal; font-weight: 900; color: #FFC72C; } #spl-retro .rf-vt li u { padding: 0 3px; border-radius: 2px; background: #FFC72C; color: #000; font-size: 9px; text-decoration: none; } #spl-retro .rf-vsx { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } #spl-retro .rf-vsx span { font-size: 28px; font-weight: 900; color: #FFC72C; text-shadow: 3px 3px 0 #000; } #spl-retro .rf-vsx small { font-size: 10px; letter-spacing: .08em; color: #ccc; text-transform: uppercase; } #spl-retro .rf-vgo { grid-column: 1 / -1; display: flex; justify-content: center; align-items: center; gap: 10px; } #spl-retro .rf-go { min-width: 170px; padding: 12px 24px; border: 2px solid #000; border-radius: 4px; background: #FFC72C; color: #000; font-family: inherit; font-size: 16px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; box-shadow: 3px 3px 0 #000; } #spl-retro .rf-versus { gap: 6px; } #spl-retro .rf-vt-h { flex-wrap: wrap; gap: 4px; padding: 6px; } #spl-retro .rf-vt-h img { width: 28px; height: 28px; } #spl-retro .rf-vt-h strong { font-size: 12px; } #spl-retro .rf-vt-h b { font-size: 22px; } #spl-retro .rf-vt li { font-size: 10px; } #spl-retro .rf-vsx span { font-size: 18px; } #spl-retro .rf-menu { width: min(520px, 100%); padding: 16px; border: 3px solid #FFC72C; border-radius: 6px; background: #111; text-align: center; box-shadow: 6px 6px 0 #000; } #spl-retro .rf-menu h3 { font-size: 22px; letter-spacing: .12em; color: #FFC72C; } #spl-retro .rf-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } #spl-retro .rf-mode { padding: 18px 10px; border: 2px solid #000; border-radius: 4px; background: #FFC72C; color: #000; font-family: inherit; text-transform: uppercase; box-shadow: 3px 3px 0 #000; } #spl-retro .rf-mode b { display: block; font-size: 17px; } #spl-retro .rf-mode small { display: block; margin-top: 4px; font-size: 10px; text-transform: none; } #spl-retro .rf-mode.off { background: #2a2a2a; color: #888; } #spl-retro .rf-load { color: #ddd; text-transform: none; } #spl-retro .rf-pick { width: min(900px, 100%); max-height: 100%; display: flex; flex-direction: column; overflow: hidden; border: 3px solid #FFC72C; border-radius: 6px; background: #111; box-shadow: 6px 6px 0 #000; } #spl-retro .rf-pick-h { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid #333; } #spl-retro .rf-pick-h h3 { margin: 0; font-size: 15px; color: #fff; } #spl-retro .rf-teamgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 8px; overflow: auto; } #spl-retro .rf-team { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; border: 2px solid var(--c); border-radius: 4px; background: #1b1b1b; color: #fff; font-family: inherit; } #spl-retro .rf-team img { width: 34px; height: 34px; object-fit: contain; } #spl-retro .rf-team b { max-width: 100%; overflow: hidden; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; } #spl-retro .rf-team.real { border-color: #FFC72C; background: #3a3110; } #spl-retro .rf-team i { position: absolute; top: 2px; right: 2px; padding: 1px 3px; border-radius: 2px; background: #FFC72C; color: #000; font-size: 7px; font-style: normal; } #spl-retro .rf-link { margin-top: 10px; border: 0; background: none; color: #FFC72C; font-family: inherit; font-size: 12px; text-decoration: underline; text-transform: uppercase; } /* 1.27.0: Practice game cover, the full exhibition game */ #spl-app .spl-rf-cover { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 3px solid #FFC72C; border-radius: 12px; background: #0b0b0b; box-shadow: 0 10px 30px rgba(0,0,0,.5); cursor: pointer; } #spl-app .spl-rf-cover canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; filter: saturate(1.1) brightness(.85); } #spl-app .spl-rf-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.78)); } #spl-app .spl-rf-logo { position: absolute; left: 16px; bottom: 36px; z-index: 1; font-family: "Press Start 2P", ui-monospace, Menlo, monospace; font-size: clamp(20px, 6.5vw, 42px); line-height: 1.15; letter-spacing: .02em; color: #FFC72C; text-align: left; text-transform: uppercase; text-shadow: 3px 3px 0 #b31b1b, 6px 6px 0 #000; } #spl-app .spl-rf-play { position: absolute; left: 18px; bottom: 12px; z-index: 1; font-family: "Press Start 2P", ui-monospace, monospace; font-size: 10px; color: #fff; text-transform: uppercase; animation: spl-blink 1.1s steps(2) infinite; } /* Paper Football borrows Retro Football's card, but not its voice: a marker on paper rather than an arcade cabinet, and no pixel smoothing, because nothing here is drawn as pixels. */ #spl-app .spl-pf-cover canvas { image-rendering: auto; filter: saturate(1.05) brightness(.92); } #spl-app .spl-pf-cover .spl-rf-logo { font-family: "Permanent Marker", "Bradley Hand", "Segoe Print", cursive; font-size: clamp(26px, 8vw, 50px); line-height: 1.02; letter-spacing: .01em; color: #FFF8E7; text-transform: none; transform: rotate(-2.5deg); transform-origin: left bottom; text-shadow: 2px 3px 0 rgba(0,0,0,.55); } #spl-app .spl-pf-cover .spl-rf-play { font-family: "Permanent Marker", "Bradley Hand", "Segoe Print", cursive; font-size: 13px; letter-spacing: .04em; text-transform: none; color: #FFD98A; } @keyframes spl-blink { 50% { opacity: 0; } } #spl-app .spl-rf-rec { margin: 10px 2px 0; font-size: 13px; color: var(--mu); } #spl-retro .rf-sc { min-width: 14px; font-size: 14px; font-style: normal; font-weight: 900; color: #fff; text-align: center; } #spl-retro .rf-q { padding: 3px 7px; border-radius: 4px; background: #262626; color: #fff; font-weight: 900; letter-spacing: .04em; } #spl-retro .rf-setup { text-align: left; } #spl-retro .rf-setup h3 { text-align: center; } #spl-retro .rf-row { margin: 10px 0; } #spl-retro .rf-row > small { display: block; margin-bottom: 5px; font-size: 10px; letter-spacing: .1em; color: #aaa; } #spl-retro .rf-seg { display: flex; gap: 6px; } #spl-retro .rf-seg button { flex: 1; padding: 9px 4px; border: 2px solid #000; border-radius: 4px; background: #2a2a2a; color: #fff; font-family: inherit; font-size: 12px; font-weight: 900; text-transform: uppercase; box-shadow: 2px 2px 0 #000; } #spl-retro .rf-seg button.on { background: #FFC72C; color: #000; } #spl-retro .rf-seg button:disabled { color: #777; } #spl-retro .rf-seg button i { font-size: 8px; font-style: normal; color: #999; } #spl-retro .rf-seg.big button { padding: 13px 4px; background: #FFC72C; color: #000; font-size: 15px; } #spl-retro .rf-sim { width: min(560px, 100%); max-height: 100%; display: flex; flex-direction: column; overflow: hidden; border: 3px solid #FFC72C; border-radius: 6px; background: rgba(10,10,10,.94); box-shadow: 6px 6px 0 #000; } #spl-retro .rf-sim-h { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--c); } #spl-retro .rf-sim-h img { width: 26px; height: 26px; padding: 1px; border-radius: 4px; background: rgba(255,255,255,.92); object-fit: contain; } #spl-retro .rf-sim-h b { font-size: 14px; letter-spacing: .08em; color: #fff; text-shadow: 2px 2px 0 rgba(0,0,0,.5); } #spl-retro .rf-sim ul { flex: 1; margin: 0; padding: 6px 12px; overflow: auto; list-style: none; text-transform: none; } #spl-retro .rf-sim li { padding: 4px 0; border-bottom: 1px solid #222; font-size: 12px; color: #aaa; } #spl-retro .rf-sim li.new { font-weight: 800; color: #fff; } #spl-retro .rf-sim-b { display: flex; justify-content: center; padding: 8px; } #spl-retro .rf-final { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 8px 0; } #spl-retro .rf-fs { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 6px; background: var(--c); } #spl-retro .rf-fs img { width: 32px; height: 32px; padding: 2px; border-radius: 4px; background: rgba(255,255,255,.92); object-fit: contain; } #spl-retro .rf-fs b { font-size: 30px; color: #fff; text-shadow: 2px 2px 0 #000; } #spl-retro .rf-fs.w { box-shadow: 0 0 0 3px #FFC72C; } #spl-retro .rf-final i { font-size: 24px; font-style: normal; color: #777; } #spl-retro .rf-score { font-size: 18px; font-weight: 900; color: #fff; } #spl-retro .rf-end > small { letter-spacing: .12em; color: #aaa; } /* 1.28.0: Retro Football in arcade blue, the exhibition screen, roster and coin toss */ #spl-retro { --rf-blue: #2d5ff2; --rf-deep: #17379e; --rf-px: "Press Start 2P", ui-monospace, Menlo, monospace; } #spl-retro.solid { background: var(--rf-blue); } #spl-retro.solid .rf-top, #spl-retro.solid .rf-help, #spl-retro.solid .rf-who, #spl-retro.solid .rf-msg { display: none; } #spl-retro.solid .rf-panel { z-index: 5; padding: 0; background: var(--rf-blue); } #spl-retro .rf-screen { box-sizing: border-box; width: 100%; height: 100%; display: flex; flex-direction: column; gap: 8px; overflow: auto; -webkit-overflow-scrolling: touch; padding: 12px max(14px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); color: #fff; font-family: var(--rf-px); text-transform: uppercase; } #spl-retro .rf-title { margin: 0; font-family: var(--rf-px); font-size: clamp(13px, 3.3vw, 24px); font-weight: 400; line-height: 1.3; letter-spacing: .04em; color: #fff; text-align: center; text-shadow: 3px 3px 0 var(--rf-deep); white-space: nowrap; } #spl-retro .rf-3s { margin: 0 .5em; font-family: ui-monospace, Menlo, monospace; font-size: .9em; } #spl-retro .rf-3s i { font-style: normal; text-shadow: 2px 2px 0 var(--rf-deep); } #spl-retro .rf-3s .r { color: #d62a2a; } #spl-retro .rf-3s .w { color: #fff; } #spl-retro .rf-3s .n { color: #23336f; } #spl-retro .rf-pbtn { box-sizing: border-box; min-height: 0; margin: 0; padding: 10px 8px; border: 3px solid #fff; border-radius: 4px; background: var(--rf-blue); color: #fff; font-family: var(--rf-px); font-size: 10px; font-weight: 400; line-height: 1.35; letter-spacing: .02em; text-transform: uppercase; box-shadow: 3px 3px 0 var(--rf-deep); cursor: pointer; } #spl-retro .rf-pbtn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--rf-deep); } #spl-retro .rf-pbtn.dark { border-color: #1c1c1c; background: #1c1c1c; box-shadow: 3px 3px 0 rgba(0,0,0,.35); } #spl-retro .rf-pbtn.big { padding: 14px 10px; font-size: 14px; } #spl-retro .rf-ico { box-sizing: border-box; width: 46px; height: 46px; display: grid; place-items: center; margin: 0; padding: 0; border: 3px solid #fff; border-radius: 4px; background: var(--rf-blue); color: #fff; box-shadow: 3px 3px 0 var(--rf-deep); cursor: pointer; } #spl-retro .rf-ico svg { width: 22px; height: 22px; } #spl-retro .rf-ico:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--rf-deep); } #spl-retro .rf-foot { display: flex; align-items: flex-end; justify-content: space-between; margin-top: auto; } #spl-retro .rf-exh-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 12px; } #spl-retro .rf-side { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; } #spl-retro .rf-tag { font-size: 10px; letter-spacing: .12em; color: #cfdcff; } #spl-retro .rf-fig { position: relative; display: flex; justify-content: center; } #spl-retro .rf-fig::before { content: ""; position: absolute; left: 50%; bottom: -3px; width: 92px; height: 12px; transform: translateX(-50%); background: rgba(16, 38, 130, .55); } #spl-retro .rf-fig canvas { position: relative; width: 80px; height: 112px; image-rendering: pixelated; } #spl-retro .rf-side.opp .rf-fig canvas { transform: none; } #spl-retro .rf-name { max-width: 100%; display: flex; align-items: center; gap: 6px; } #spl-retro .rf-name img { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(1px 1px 0 rgba(0,0,0,.35)); } #spl-retro .rf-name b { overflow: hidden; font-size: 15px; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; text-shadow: 2px 2px 0 var(--rf-deep); } #spl-retro .rf-rt { display: flex; align-items: center; gap: 6px; } #spl-retro .rf-rt small { width: 60px; font-size: 8px; text-align: right; } #spl-retro .rf-stars { display: inline-flex; font-family: ui-monospace, Menlo, monospace; font-size: 17px; line-height: 1; letter-spacing: -1px; } #spl-retro .rf-stars i { font-style: normal; text-shadow: 1px 1px 0 rgba(0,0,0,.25); } #spl-retro .rf-stars.off i { color: #72d4ff; } #spl-retro .rf-stars.def i { color: #ff4f4f; } #spl-retro .rf-stars i.e { color: rgba(10, 25, 90, .45); text-shadow: none; } #spl-retro .rf-stars i.h { background: linear-gradient(90deg, currentColor 50%, rgba(10, 25, 90, .45) 50%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; } #spl-retro .rf-sbtns { display: flex; gap: 6px; } #spl-retro .rf-sbtns .rf-pbtn { padding: 7px 6px; font-size: 8px; } #spl-retro .rf-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; } #spl-retro .rf-opt { min-width: 0; display: flex; flex-direction: column; gap: 4px; } #spl-retro .rf-opt small { font-size: 8px; letter-spacing: .08em; color: #cfdcff; text-align: center; } #spl-retro .rf-opt .rf-pbtn { width: 100%; } #spl-retro .rf-opt:last-child { grid-column: 1 / -1; } #spl-retro .rf-exh-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: center; gap: 18px 10px; } #spl-retro .rf-side.you { grid-column: 1; grid-row: 1; } #spl-retro .rf-side.opp { grid-column: 2; grid-row: 1; } #spl-retro .rf-opts { grid-column: 1 / -1; grid-row: 2; } #spl-retro .rf-fig canvas { width: 78px; height: 109px; } #spl-retro .rf-rt small { width: auto; } #spl-retro .rf-rt { flex-direction: column; gap: 2px; } #spl-retro .rf-sbtns { flex-direction: column; width: 100%; } #spl-retro .rf-home { align-items: center; justify-content: center; gap: 16px; } #spl-retro .rf-home .rf-foot { align-self: stretch; } #spl-retro .rf-screen .rf-modes { width: min(560px, 100%); margin: auto 0 0; } #spl-retro .rf-screen .rf-mode { padding: 22px 10px; border: 3px solid #fff; border-radius: 4px; background: var(--rf-blue); color: #fff; font-family: var(--rf-px); box-shadow: 4px 4px 0 var(--rf-deep); } #spl-retro .rf-screen .rf-mode b { font-size: 13px; font-weight: 400; } #spl-retro .rf-screen .rf-mode small { margin-top: 8px; font-size: 7px; line-height: 1.5; color: #cfdcff; text-transform: uppercase; } #spl-retro .rf-screen .rf-mode.off { border-color: #1c1c1c; background: #1c1c1c; color: #888; box-shadow: 4px 4px 0 rgba(0,0,0,.3); } #spl-retro .rf-screen .rf-load { margin: 0; font-size: 10px; color: #cfdcff; text-transform: uppercase; } #spl-retro .rf-screen.rf-pick { max-height: none; border: 0; border-radius: 0; background: transparent; box-shadow: none; } #spl-retro .rf-screen .rf-teamgrid { flex: none; overflow: visible; padding: 2px 4px 6px 0; gap: 8px; } #spl-retro .rf-screen .rf-team { border: 3px solid #fff; border-radius: 4px; background: #fff; color: #1c1c1c; box-shadow: 3px 3px 0 var(--rf-deep); } #spl-retro .rf-screen .rf-team b { font-family: var(--rf-px); font-size: 6px; font-weight: 400; } #spl-retro .rf-screen .rf-team.real { border-color: #ffd21f; background: #fff6c9; } #spl-retro .rf-screen .rf-team i { font-family: var(--rf-px); font-size: 5px; background: #ffd21f; } #spl-retro .rf-toss { align-items: center; justify-content: center; gap: 14px; } #spl-retro .rf-toss p { margin: 0; font-size: 11px; color: #cfdcff; } #spl-retro .rf-toss .rf-foot { align-self: stretch; } #spl-retro .rf-coin { width: 70px; height: 70px; margin-top: auto; perspective: 300px; } #spl-retro .rf-coin span { display: block; width: 100%; height: 100%; border: 4px solid #a8791a; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2a8, #f2c230 45%, #c9921c); box-shadow: 3px 3px 0 var(--rf-deep); animation: rf-flip 1s ease-out 1; } @keyframes rf-flip { from { transform: rotateX(1440deg) translateY(-30px); } to { transform: none; } } #spl-retro .rf-toss-b { width: min(420px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } #spl-retro .rf-roster-h { display: flex; align-items: center; gap: 10px; } #spl-retro .rf-roster-h img { width: 34px; height: 34px; object-fit: contain; } #spl-retro .rf-roster-h h2 { flex: 1; min-width: 0; margin: 0; overflow: hidden; font-family: var(--rf-px); font-size: 16px; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; text-shadow: 3px 3px 0 var(--rf-deep); } #spl-retro .rf-roster-h .rf-pbtn { font-size: 8px; } #spl-retro .rf-roster-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; } #spl-retro .rf-roster-cols { grid-template-columns: minmax(0, 1fr); } #spl-retro .rf-roster h4 { display: flex; align-items: center; justify-content: space-between; margin: 0 0 6px; font-family: var(--rf-px); font-size: 10px; font-weight: 400; color: #fff; } #spl-retro .rf-roster ul { margin: 0; padding: 4px 8px; list-style: none; border: 3px solid #fff; border-radius: 4px; background: rgba(12, 30, 110, .3); box-shadow: 3px 3px 0 var(--rf-deep); } #spl-retro .rf-roster li { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.14); font-family: ui-monospace, Menlo, monospace; font-size: 12px; font-weight: 700; text-transform: none; } #spl-retro .rf-roster li:last-child { border-bottom: 0; } #spl-retro .rf-roster li i { width: 30px; font-size: 11px; font-style: normal; color: #cfdcff; } #spl-retro .rf-roster li em { width: 30px; font-style: normal; color: #cfdcff; } #spl-retro .rf-roster li span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #spl-retro .rf-roster li b { font-family: var(--rf-px); font-size: 10px; font-weight: 400; } #spl-retro .rf-roster li u { padding: 0 3px; border-radius: 2px; background: #ffd21f; color: #000; font-size: 9px; text-decoration: none; } /* the in-game overlays match */ #spl-retro .rf-menu, #spl-retro .rf-end, #spl-retro .rf-sim { border: 3px solid #fff; border-radius: 4px; background: var(--rf-blue); box-shadow: 5px 5px 0 rgba(0,0,0,.45); } #spl-retro .rf-menu h3, #spl-retro .rf-end h3 { font-family: var(--rf-px); font-size: 16px; font-weight: 400; line-height: 1.4; color: #fff; text-shadow: 3px 3px 0 var(--rf-deep); } #spl-retro .rf-end.win h3 { color: #ffe14d; } #spl-retro .rf-end > small { font-family: var(--rf-px); font-size: 9px; color: #cfdcff; } #spl-retro .rf-end p { color: #e3eaff; } #spl-retro .rf-score { font-family: var(--rf-px); font-size: 12px; font-weight: 400; } #spl-retro .rf-go { border: 3px solid #fff; background: #fff; color: var(--rf-blue); font-family: var(--rf-px); font-size: 12px; font-weight: 400; letter-spacing: .04em; box-shadow: 3px 3px 0 var(--rf-deep); } #spl-retro .rf-end .rf-card { border: 3px solid #fff; background: #fff; color: var(--rf-blue); font-family: var(--rf-px); box-shadow: 3px 3px 0 var(--rf-deep); } #spl-retro .rf-end .rf-card.ghost { background: var(--rf-blue); color: #fff; } #spl-retro .rf-end .rf-card b { font-size: 10px; font-weight: 400; } #spl-retro .rf-end .rf-link { font-family: var(--rf-px); font-size: 9px; color: #fff; } #spl-retro .rf-fs.w { box-shadow: 0 0 0 3px #fff; } #spl-retro .rf-final i { color: #cfdcff; } #spl-retro .rf-sim-h { border-bottom: 3px solid #fff; } #spl-retro .rf-sim-h b { font-family: var(--rf-px); font-size: 11px; font-weight: 400; } #spl-retro .rf-sim li { border-bottom-color: rgba(255,255,255,.15); color: rgba(255,255,255,.72); } #spl-retro .rf-sim li.new { color: #fff; } #spl-retro .rf-sim .rf-sbtn.ghost { border: 3px solid #fff; background: var(--rf-blue); color: #fff; font-family: var(--rf-px); font-size: 10px; font-weight: 400; box-shadow: 3px 3px 0 var(--rf-deep); } /* 1.29.0: looks (Black & Gold default, Stadium Lights, Turf & Chalk, Arcade, My Team), a fuller home screen, the arcade drive list */ #spl-retro { --sk-bg: #0c0c0c; --sk-panel: #1a1a1a; --sk-line: #FFC72C; --sk-btn: #FFC72C; --sk-btnt: #141000; --sk-alt: #2b2b2b; --sk-altt: #fff; --sk-txt: #fff; --sk-mute: #b8b8b8; --sk-tc: #FFC72C; --sk-ts: #000; --sk-tf: "Alfa Slab One", Georgia, serif; --sk-bf: Graduate, "Arial Black", serif; --sk-k: 1; } #spl-retro.solid, #spl-retro.solid .rf-panel { background: var(--sk-bg); } #spl-retro.solid.see .rf-panel { background: rgba(0,0,0,.62); background: color-mix(in srgb, var(--sk-bg) 74%, transparent); } #spl-retro .rf-screen { color: var(--sk-txt); font-family: var(--sk-bf); } #spl-retro .rf-title { font-family: var(--sk-tf); font-size: calc(clamp(18px, 4vw, 28px) * var(--sk-k)); color: var(--sk-tc); text-shadow: 3px 3px 0 var(--sk-ts); letter-spacing: .02em; } #spl-retro .rf-title small { display: block; margin-bottom: 3px; font-family: var(--sk-bf); font-size: calc(9px * var(--sk-k)); letter-spacing: .2em; color: var(--sk-mute); text-shadow: none; } #spl-retro .rf-pbtn { min-height: 40px; padding: 8px 10px; border: 0; border-radius: 6px; background: var(--sk-alt); color: var(--sk-altt); font-family: var(--sk-bf); font-size: calc(11px * var(--sk-k)); box-shadow: inset 0 -3px 0 rgba(0,0,0,.35); } #spl-retro .rf-pbtn:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 rgba(0,0,0,.35); } #spl-retro .rf-pbtn.dark { border: 0; background: rgba(0,0,0,.45); box-shadow: inset 0 -3px 0 rgba(0,0,0,.5); } #spl-retro .rf-pbtn.big { min-height: 54px; background: var(--sk-btn); color: var(--sk-btnt); font-size: calc(15px * var(--sk-k)); } #spl-retro .rf-opt .rf-pbtn { border: 2px solid rgba(255,255,255,.14); } #spl-retro .rf-sbtns .rf-pbtn { min-height: 36px; font-size: calc(9px * var(--sk-k)); } #spl-retro .rf-ico { width: 46px; height: 46px; border: 0; border-radius: 8px; background: var(--sk-alt); color: var(--sk-altt); box-shadow: inset 0 -3px 0 rgba(0,0,0,.35); } #spl-retro .rf-ico.go { width: 68px; background: var(--sk-btn); color: var(--sk-btnt); } #spl-retro .rf-ico:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 rgba(0,0,0,.35); } #spl-retro .rf-tag, #spl-retro .rf-opt small, #spl-retro .rf-rt small { font-family: var(--sk-bf); font-size: calc(9px * var(--sk-k)); color: var(--sk-mute); } #spl-retro .rf-name b { font-family: var(--sk-tf); font-size: calc(17px * var(--sk-k)); text-shadow: 2px 2px 0 var(--sk-ts); } #spl-retro .rf-fig::before { background: rgba(0,0,0,.35); } #spl-retro .rf-stars i.e { color: rgba(255,255,255,.16); } #spl-retro .rf-stars i.h { background: linear-gradient(90deg, currentColor 50%, rgba(255,255,255,.16) 50%); -webkit-background-clip: text; background-clip: text; } #spl-retro .rf-home { position: relative; align-items: stretch; justify-content: flex-start; gap: 12px; } #spl-retro .rf-home > * { position: relative; } #spl-retro .rf-home > .rf-chalk { position: absolute; top: 6%; right: 3%; width: min(44%, 300px); opacity: .22; pointer-events: none; } #spl-retro .rf-chalk .rf-diag { margin: 0; border: 0; background: transparent; } #spl-retro .rf-home-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } #spl-retro .rf-logo { margin: 0; font-family: var(--sk-tf); font-size: calc(clamp(30px, 7vw, 46px) * var(--sk-k)); font-weight: 400; line-height: .98; letter-spacing: .02em; color: var(--sk-tc); text-align: left; text-shadow: 4px 4px 0 var(--sk-ts); } #spl-retro .rf-rec { text-align: right; } #spl-retro .rf-rec small { display: block; font-size: calc(9px * var(--sk-k)); letter-spacing: .16em; color: var(--sk-mute); } #spl-retro .rf-rec b { font-family: var(--sk-tf); font-size: calc(26px * var(--sk-k)); font-weight: 400; color: var(--sk-txt); text-shadow: 2px 2px 0 var(--sk-ts); } #spl-retro .rf-week { box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 12px; margin: 0; padding: 9px 10px 9px 12px; border: 2px solid var(--sk-line); border-radius: 8px; background: var(--sk-panel); color: var(--sk-txt); font-family: var(--sk-bf); text-align: left; text-transform: uppercase; cursor: pointer; } #spl-retro .rf-week-l { flex: none; display: flex; align-items: center; gap: 6px; } #spl-retro .rf-week-l img { width: 30px; height: 30px; object-fit: contain; } #spl-retro .rf-week-l i { font-size: 9px; font-style: normal; color: var(--sk-mute); } #spl-retro .rf-week-t { flex: 1; min-width: 0; } #spl-retro .rf-week-t small { display: block; font-size: calc(9px * var(--sk-k)); letter-spacing: .16em; color: var(--sk-mute); } #spl-retro .rf-week-t b { display: block; overflow: hidden; font-size: calc(13px * var(--sk-k)); font-weight: 400; white-space: nowrap; text-overflow: ellipsis; } #spl-retro .rf-week-go { flex: none; padding: 11px 18px; border-radius: 6px; background: var(--sk-btn); color: var(--sk-btnt); font-size: calc(13px * var(--sk-k)); box-shadow: inset 0 -3px 0 rgba(0,0,0,.3); } #spl-retro .rf-week.off { cursor: default; opacity: .75; } #spl-retro .rf-screen .rf-modes { width: 100%; margin: 0; gap: 10px; } #spl-retro .rf-screen .rf-mode { padding: 16px 10px; border: 0; border-radius: 8px; background: var(--sk-btn); color: var(--sk-btnt); font-family: var(--sk-bf); box-shadow: inset 0 -4px 0 rgba(0,0,0,.3); } #spl-retro .rf-screen .rf-mode b { font-size: calc(16px * var(--sk-k)); } #spl-retro .rf-screen .rf-mode small { margin-top: 5px; font-size: calc(9px * var(--sk-k)); color: inherit; opacity: .75; } #spl-retro .rf-screen .rf-mode.off { border: 0; background: var(--sk-alt); color: var(--sk-mute); box-shadow: inset 0 -4px 0 rgba(0,0,0,.3); } #spl-retro .rf-lookbtn { min-height: 46px; padding: 8px 14px; } #spl-retro .rf-screen .rf-team { border: 2px solid transparent; border-radius: 6px; background: var(--sk-panel); color: var(--sk-txt); box-shadow: inset 0 -3px 0 rgba(0,0,0,.3); } #spl-retro .rf-screen .rf-team b { font-family: var(--sk-bf); font-size: calc(8px * var(--sk-k)); } #spl-retro .rf-screen .rf-team.real { border-color: var(--sk-line); background: var(--sk-panel); } #spl-retro .rf-screen .rf-team i { background: var(--sk-btn); color: var(--sk-btnt); font-family: var(--sk-bf); font-size: 7px; } #spl-retro .rf-toss p { font-family: var(--sk-bf); color: var(--sk-mute); } #spl-retro .rf-roster-h h2 { font-family: var(--sk-tf); color: var(--sk-tc); text-shadow: 3px 3px 0 var(--sk-ts); } #spl-retro .rf-roster h4 { font-family: var(--sk-bf); font-size: calc(11px * var(--sk-k)); color: var(--sk-txt); } #spl-retro .rf-roster ul { border: 2px solid rgba(255,255,255,.12); border-radius: 8px; background: var(--sk-panel); box-shadow: none; } #spl-retro .rf-roster li i, #spl-retro .rf-roster li em { color: var(--sk-mute); } #spl-retro .rf-roster li b { font-family: var(--sk-bf); font-size: calc(12px * var(--sk-k)); color: var(--sk-tc); } #spl-retro .rf-menu, #spl-retro .rf-end { border: 2px solid var(--sk-line); border-radius: 10px; background: var(--sk-bg); box-shadow: 0 10px 30px rgba(0,0,0,.5); } #spl-retro .rf-menu h3, #spl-retro .rf-end h3 { font-family: var(--sk-tf); color: var(--sk-tc); text-shadow: 3px 3px 0 var(--sk-ts); } #spl-retro .rf-end.win h3 { color: var(--sk-tc); } #spl-retro .rf-end > small, #spl-retro .rf-score { font-family: var(--sk-bf); color: var(--sk-mute); } #spl-retro .rf-score { color: var(--sk-txt); } #spl-retro .rf-end p { color: var(--sk-mute); } #spl-retro .rf-go { border: 0; border-radius: 6px; background: var(--sk-btn); color: var(--sk-btnt); font-family: var(--sk-bf); box-shadow: inset 0 -3px 0 rgba(0,0,0,.3); } #spl-retro .rf-end .rf-card { border: 0; border-radius: 6px; background: var(--sk-btn); color: var(--sk-btnt); font-family: var(--sk-bf); box-shadow: inset 0 -3px 0 rgba(0,0,0,.3); } #spl-retro .rf-end .rf-card.ghost { background: var(--sk-alt); color: var(--sk-altt); } #spl-retro .rf-end .rf-link { font-family: var(--sk-bf); color: var(--sk-tc); } #spl-retro .rf-fs.w { box-shadow: 0 0 0 3px var(--sk-line); } /* the CPU drive list is always the arcade cabinet */ #spl-retro .rf-sim { border: 2px solid #2c2c3c; border-radius: 10px; background: #121216; box-shadow: 0 10px 30px rgba(0,0,0,.55); } #spl-retro .rf-sim-h { gap: 8px; padding: 7px 10px; border-bottom: 3px solid var(--c2); background: var(--c); } #spl-retro .rf-sim-h b { font-family: "Press Start 2P", ui-monospace, monospace; font-size: 10px; text-shadow: 2px 2px 0 rgba(0,0,0,.5); } #spl-retro .rf-sim-sc { margin-left: auto; font-family: "Press Start 2P", ui-monospace, monospace; font-size: 9px; color: #fff; text-shadow: 1px 1px 0 #000; white-space: nowrap; } #spl-retro .rf-sim ul { padding: 0; } #spl-retro .rf-sim li { display: flex; align-items: center; gap: 9px; padding: 6px 10px; border: 0; background: #18181f; color: #a8a8c0; font-size: 12px; } #spl-retro .rf-sim li:nth-child(even) { background: #1f1f29; } #spl-retro .rf-sim li.new { color: #fff; font-weight: 700; } #spl-retro .rf-sim li em { flex: none; min-width: 40px; padding: 3px 4px; border-radius: 3px; background: #4a4a5e; color: #fff; font-family: "Press Start 2P", ui-monospace, monospace; font-size: 7px; font-style: normal; text-align: center; } #spl-retro .rf-sim li.pass em { background: #3b7dd8; } #spl-retro .rf-sim li.run em { background: #3a9a4a; } #spl-retro .rf-sim li.first em, #spl-retro .rf-sim li.fg em { background: #f2b632; color: #1a1200; } #spl-retro .rf-sim li.td em { background: #d6362b; } #spl-retro .rf-sim li.to em { background: #ff3d8b; } #spl-retro .rf-sim li.start em { background: #35d6ff; color: #00222b; } #spl-retro .rf-sim li.td { box-shadow: inset 3px 0 0 #d6362b; } #spl-retro .rf-sim li.to { box-shadow: inset 3px 0 0 #ff3d8b; } #spl-retro .rf-sim .rf-go { border: 0; border-radius: 6px; background: #35d6ff; color: #00222b; font-family: "Press Start 2P", ui-monospace, monospace; font-size: 11px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.3); } #spl-retro .rf-sim .rf-sbtn.ghost { border: 0; border-radius: 6px; background: #2a2a3c; color: #fff; font-family: "Press Start 2P", ui-monospace, monospace; font-size: 10px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.3); } #spl-retro .rf-home .rf-week { margin-top: auto; } /* held upright: the title up top, the field in the middle, the buttons by your thumb */ /* 1.30.0: my team, the fixed title, the box score, the drive list scrolls to its newest play */ #spl-retro .rf-logo { font-family: "Alfa Slab One", Georgia, serif; font-size: clamp(30px, 7vw, 46px); } #spl-retro .rf-home-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } #spl-retro .rf-myteam { box-sizing: border-box; min-height: 44px; display: flex; align-items: center; gap: 8px; margin: 0; padding: 5px 12px 5px 6px; border: 2px solid var(--sk-line); border-radius: 8px; background: var(--sk-panel); color: var(--sk-txt); font-family: var(--sk-bf); text-align: left; text-transform: uppercase; cursor: pointer; } #spl-retro .rf-myteam img { width: 30px; height: 30px; object-fit: contain; } #spl-retro .rf-myteam small { display: block; font-size: calc(8px * var(--sk-k)); letter-spacing: .14em; color: var(--sk-mute); } #spl-retro .rf-myteam b { display: block; font-size: calc(12px * var(--sk-k)); font-weight: 400; } #spl-retro .rf-rec small { letter-spacing: .1em; } #spl-retro .rf-rec b { font-size: calc(22px * var(--sk-k)); } #spl-retro .rf-sim ul { min-height: 0; } #spl-retro .rf-sim li span { min-width: 0; } #spl-retro .rf-cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } #spl-retro .rf-box-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; gap: 14px; } #spl-retro .rf-box-body { grid-template-columns: minmax(0, 1fr); } #spl-retro .rf-box table { width: 100%; margin: 0 0 10px; border-collapse: collapse; overflow: hidden; border-radius: 8px; background: var(--sk-panel); color: var(--sk-txt); font-family: var(--sk-bf); font-size: calc(11px * var(--sk-k)); } #spl-retro .rf-box th, #spl-retro .rf-box td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,.08); font-weight: 400; } #spl-retro .rf-box tr:last-child th, #spl-retro .rf-box tr:last-child td { border-bottom: 0; } #spl-retro .rf-box th img { width: 18px; height: 18px; margin-right: 6px; object-fit: contain; vertical-align: -4px; } #spl-retro .rf-line th { text-align: left; white-space: nowrap; } #spl-retro .rf-line td { width: 30px; text-align: center; } #spl-retro .rf-line tr:first-child td { font-size: calc(9px * var(--sk-k)); color: var(--sk-mute); } #spl-retro .rf-line td.t { color: var(--sk-tc); } #spl-retro .rf-tstats td { width: 32%; text-align: center; } #spl-retro .rf-tstats th { font-size: calc(9px * var(--sk-k)); color: var(--sk-mute); text-align: center; white-space: nowrap; } #spl-retro .rf-tstats tr:first-child th { font-size: calc(11px * var(--sk-k)); color: var(--sk-txt); } #spl-retro .rf-box h4 { margin: 0 0 6px; font-family: var(--sk-tf); font-size: calc(14px * var(--sk-k)); font-weight: 400; color: var(--sk-tc); } #spl-retro .rf-box ul { margin: 0 0 12px; padding: 2px 10px; list-style: none; border-radius: 8px; background: var(--sk-panel); } #spl-retro .rf-box li { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-family: ui-monospace, Menlo, monospace; font-size: 12px; text-transform: none; } #spl-retro .rf-box li:last-child { border-bottom: 0; } #spl-retro .rf-box li i { width: 36px; font-size: 10px; font-style: normal; color: var(--sk-mute); text-transform: uppercase; } #spl-retro .rf-box li span { flex: 1; min-width: 0; overflow: hidden; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; } #spl-retro .rf-box li b { font-weight: 400; color: var(--sk-mute); white-space: nowrap; } #spl-retro .rf-box .rf-foot .rf-pbtn.big { min-width: 170px; } #spl-retro .rf-box .rf-foot { position: sticky; bottom: calc(-1 * max(10px, env(safe-area-inset-bottom))); margin-top: auto; padding: 8px 0 max(10px, env(safe-area-inset-bottom)); background: var(--sk-bg); } /* 1.31.0: pixel titles in every look, the new home screen, framed exhibition, coin toss, Tecmo-style game stats */ #spl-retro { --rf-px: "Press Start 2P", ui-monospace, Menlo, monospace; } #spl-retro .rf-title, #spl-retro .rf-name b, #spl-retro .rf-menu h3, #spl-retro .rf-end h3, #spl-retro .rf-legend, #spl-retro .rf-roster-h h3 { font-family: var(--rf-px); font-weight: 400; } #spl-retro .rf-title { font-size: clamp(14px, 3.4vw, 20px); line-height: 1.35; letter-spacing: .04em; color: var(--sk-tc); text-shadow: 2px 2px 0 var(--sk-ts); } #spl-retro .rf-menu h3, #spl-retro .rf-end h3 { font-size: 16px; line-height: 1.5; } #spl-retro .rf-logo { margin: 0; font-family: var(--rf-px); font-size: clamp(26px, 10.5vw, 44px); font-weight: 400; line-height: 1.2; letter-spacing: .02em; color: #FFC72C; text-align: center; text-shadow: 3px 3px 0 #b31b1b, 6px 6px 0 #000; } #spl-retro .rf-ico.sm { width: 40px; height: 40px; } #spl-retro .rf-ico.sm svg { width: 18px; height: 18px; } #spl-retro .rf-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; gap: 8px; } #spl-retro .rf-head .rf-title { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #spl-retro .rf-center { align-items: center; justify-content: center; gap: 16px; } /* home */ #spl-retro .rf-screen.rf-home { position: relative; gap: 12px; padding-top: max(14px, env(safe-area-inset-top)); } #spl-retro .rf-screen.rf-home { display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; } #spl-retro .rf-home > .rf-quit { position: absolute; top: max(10px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); z-index: 2; } #spl-retro .rf-stack { width: min(440px, 100%); display: flex; flex-direction: column; gap: 10px; } #spl-retro .rf-mbtn { box-sizing: border-box; width: 100%; min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; margin: 0; padding: 10px 14px; border: 0; border-radius: 8px; background: var(--sk-btn); color: var(--sk-btnt); box-shadow: inset 0 -4px 0 rgba(0,0,0,.3); text-transform: uppercase; cursor: pointer; } #spl-retro .rf-mbtn:active { transform: translateY(1px); box-shadow: inset 0 -2px 0 rgba(0,0,0,.3); } #spl-retro .rf-mbtn b { font-family: var(--rf-px); font-size: 15px; font-weight: 400; letter-spacing: .04em; } #spl-retro .rf-mbtn small { display: flex; align-items: center; gap: 6px; font-family: var(--sk-bf); font-size: calc(10px * var(--sk-k)); opacity: .82; } #spl-retro .rf-mbtn small img { width: 18px; height: 18px; object-fit: contain; } #spl-retro .rf-mbtn.off { background: var(--sk-alt); color: var(--sk-mute); } #spl-retro .rf-homebar { width: min(560px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } #spl-retro .rf-hb { box-sizing: border-box; min-width: 0; min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; padding: 6px 12px; border: 2px solid var(--sk-line); border-radius: 8px; background: var(--sk-panel); color: var(--sk-txt); text-align: left; text-transform: uppercase; cursor: pointer; } #spl-retro .rf-hb img { width: 30px; height: 30px; object-fit: contain; } #spl-retro .rf-hb span { min-width: 0; } #spl-retro .rf-hb small { display: block; margin-bottom: 4px; font-family: var(--rf-px); font-size: 7px; letter-spacing: .08em; color: var(--sk-mute); } #spl-retro .rf-hb b { display: block; overflow: hidden; font-family: var(--sk-bf); font-size: calc(12px * var(--sk-k)); font-weight: 400; white-space: nowrap; text-overflow: ellipsis; } /* frames with a label set into the border */ #spl-retro .rf-frame { position: relative; box-sizing: border-box; min-width: 0; margin-top: 8px; padding: 16px 10px 10px; border: 2px solid var(--sk-line); border-radius: 6px; } #spl-retro .rf-legend { position: absolute; top: -7px; left: 10px; padding: 0 6px; background: var(--sk-bg); font-size: 9px; line-height: 12px; letter-spacing: .06em; color: var(--sk-tc); white-space: nowrap; } /* exhibition */ #spl-retro .rf-exh2 { gap: 6px; } #spl-retro .rf-x-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); align-items: stretch; gap: 12px; } #spl-retro .rf-tcard { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 5px; } #spl-retro .rf-tcard .rf-fig canvas { width: 60px; height: 84px; } #spl-retro .rf-tcard .rf-name b { font-size: 11px; text-shadow: 2px 2px 0 #000; } #spl-retro .rf-rts { display: flex; flex-direction: column; align-items: center; gap: 3px; } #spl-retro .rf-rts span { display: flex; align-items: center; gap: 6px; } #spl-retro .rf-rts small { width: 26px; font-family: var(--rf-px); font-size: 7px; color: var(--sk-mute); text-align: right; } #spl-retro .rf-tcard .rf-sbtns { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; } #spl-retro .rf-tcard .rf-sbtns .rf-pbtn { min-height: 34px; padding: 6px 4px; font-size: calc(9px * var(--sk-k)); } #spl-retro .rf-setbox { display: flex; flex-direction: column; justify-content: space-evenly; gap: 5px; } #spl-retro .rf-set { display: flex; align-items: center; justify-content: space-between; gap: 10px; } #spl-retro .rf-set > span { font-family: var(--rf-px); font-size: 8px; letter-spacing: .04em; color: var(--sk-mute); } #spl-retro .rf-set .rf-pbtn { min-width: 118px; min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border: 2px solid rgba(255,255,255,.12); } #spl-retro .rf-set .rf-pbtn i, #spl-retro .rf-roster-h .rf-pbtn i { font-style: normal; color: var(--sk-tc); } #spl-retro .rf-x-foot { display: flex; justify-content: flex-end; margin-top: auto; } #spl-retro .rf-x-foot .rf-pbtn.big { min-width: 200px; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--rf-px); font-size: 12px; } #spl-retro .rf-x-foot .rf-pbtn.big i { font-style: normal; } #spl-retro .rf-x-body { flex: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: start; gap: 14px 10px; } #spl-retro .rf-tcard.you { grid-column: 1; grid-row: 1; } #spl-retro .rf-tcard.opp { grid-column: 2; grid-row: 1; } #spl-retro .rf-setbox { grid-column: 1 / -1; grid-row: 2; gap: 10px; } #spl-retro .rf-tcard .rf-fig canvas { width: 72px; height: 101px; } #spl-retro .rf-set .rf-pbtn { min-width: 160px; min-height: 40px; } #spl-retro .rf-x-foot .rf-pbtn.big { width: 100%; min-height: 54px; } /* coin toss */ #spl-retro .rf-toss-c { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; } #spl-retro .rf-toss2 .rf-coin { margin: 0; } #spl-retro .rf-coin span { display: grid; place-items: center; font-family: var(--rf-px); font-size: 22px; color: #7a5410; } #spl-retro .rf-coin.flip span { animation: rf-toss 1.1s ease-out 1; } @keyframes rf-toss { 0% { transform: translateY(0) rotateX(0); } 50% { transform: translateY(-60px) rotateX(1080deg); } 100% { transform: translateY(0) rotateX(2160deg); } } #spl-retro .rf-toss2 p { max-width: 480px; margin: 0; font-family: var(--sk-bf); font-size: calc(12px * var(--sk-k)); line-height: 1.6; color: var(--sk-txt); text-align: center; } #spl-retro .rf-toss-b { min-height: 54px; } #spl-retro .rf-toss-b .rf-pbtn:only-child { grid-column: 1 / -1; } /* roster */ #spl-retro .rf-roster-h h3 { flex: 1; min-width: 0; margin: 0; overflow: hidden; font-size: 14px; color: var(--sk-tc); white-space: nowrap; text-overflow: ellipsis; text-shadow: 2px 2px 0 var(--sk-ts); } #spl-retro .rf-roster .rf-frame ul { padding: 0; border: 0; background: transparent; } #spl-retro .rf-fr-stars { position: absolute; top: -10px; right: 10px; padding: 0 6px; background: var(--sk-bg); } /* game stats */ #spl-retro .rf-news { display: flex; flex-direction: column; gap: 4px; } #spl-retro .rf-nw { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 56px; align-items: center; gap: 10px; } #spl-retro .rf-nw img { width: 28px; height: 28px; object-fit: contain; } #spl-retro .rf-nw b { overflow: hidden; font-family: var(--rf-px); font-size: clamp(13px, 2.8vw, 20px); font-weight: 400; color: var(--sk-txt); white-space: nowrap; text-overflow: ellipsis; } #spl-retro .rf-nw.w b { color: var(--sk-tc); } #spl-retro .rf-nw em { font-family: var(--rf-px); font-size: clamp(15px, 3.2vw, 24px); font-style: normal; text-align: right; } #spl-retro .rf-nw-q { display: flex; gap: 2px; } #spl-retro .rf-nw-q i { width: 26px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; font-style: normal; font-weight: 700; color: var(--sk-mute); text-align: center; } #spl-retro .rf-nw.h i, #spl-retro .rf-nw.h em { font-family: var(--rf-px); font-size: 8px; color: var(--sk-mute); } #spl-retro .rf-box2-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 12px; } #spl-retro .rf-box2-body { grid-template-columns: minmax(0, 1fr); } #spl-retro .rf-box2 table { width: 100%; border-collapse: collapse; font-family: ui-monospace, Menlo, monospace; font-size: 12px; font-weight: 700; color: var(--sk-txt); } #spl-retro .rf-box2 th { padding: 4px 6px 4px 0; font-family: var(--rf-px); font-size: 9px; font-weight: 400; color: var(--sk-tc); text-align: left; } #spl-retro .rf-box2 td { padding: 4px 5px; text-align: right; white-space: nowrap; } #spl-retro .rf-box2 td.nm { max-width: 110px; overflow: hidden; text-align: left; text-overflow: ellipsis; } #spl-retro .rf-box2 tr.sub td, #spl-retro .rf-box2 tr.sub2 td { padding-top: 8px; font-family: var(--rf-px); font-size: 7px; font-weight: 400; color: var(--sk-mute); } #spl-retro .rf-st tr.sub td { text-align: center; } #spl-retro .rf-ld tr.sub td:first-child { color: var(--sk-tc); text-align: left; } #spl-retro .rf-box2 .sep { border-left: 1px solid rgba(255,255,255,.14); } #spl-retro .rf-box2 .rf-foot { position: sticky; bottom: calc(-1 * max(10px, env(safe-area-inset-bottom))); margin-top: auto; padding: 8px 0 max(10px, env(safe-area-inset-bottom)); background: var(--sk-bg); } #spl-retro .rf-box2 .rf-foot .rf-pbtn.big { min-width: 170px; } #spl-retro .rf-pbtn i, #spl-retro .rf-hb i { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-style: normal; font-size: 1.1em; line-height: 1; } #spl-retro .rf-box2 .rf-foot .rf-pbtn { min-width: 120px; min-height: 46px; } #spl-retro i.rf-tri { display: inline-block; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid currentColor; } /* 1.32.0: home tweaks, division picker, exhibition polish, the new playbook, the move pad, readable game stats */ #spl-retro .rf-logo span { display: block; } #spl-retro .rf-logo .r1 { font-size: 1.5em; } #spl-retro .rf-screen.rf-home { display: grid; grid-template-rows: minmax(0, 1fr) auto minmax(18px, .4fr) auto; grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: center; } #spl-retro .rf-home > .rf-logo { grid-row: 1; font-size: clamp(26px, 10.8vw, 44px); } #spl-retro .rf-home > .rf-stack { grid-row: 2; } #spl-retro .rf-home > .rf-homebar { grid-row: 4; align-self: end; width: 100%; } #spl-retro .rf-mbtn.quick { flex-direction: row; justify-content: space-between; gap: 10px; min-height: 68px; padding: 8px 12px; } #spl-retro .rf-qlogo { flex: none; width: 48px; height: 48px; display: grid; place-items: center; } #spl-retro .rf-qlogo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(1px 2px 0 rgba(0,0,0,.35)); } #spl-retro .rf-qm { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; } #spl-retro .rf-qm small { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* team picker by division */ #spl-retro .rf-divs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } #spl-retro .rf-div h4 { margin: 0 0 5px; font-family: var(--rf-px); font-size: 8px; font-weight: 400; letter-spacing: .08em; color: var(--sk-tc); } #spl-retro .rf-teamrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } #spl-retro .rf-screen .rf-teamrow .rf-team { padding: 6px 2px 5px; } #spl-retro .rf-screen .rf-team.cur { border-color: var(--sk-txt); } /* exhibition polish */ #spl-retro .rf-tcard .rf-fig { width: 100%; box-sizing: border-box; padding: 6px 0 3px; border-top: 4px solid var(--c); border-radius: 4px; background-color: #2c7a30; background-image: repeating-linear-gradient(90deg, transparent 0 22px, rgba(255,255,255,.2) 22px 24px); } #spl-retro .rf-tcard .rf-fig::before { bottom: 2px; width: 70px; height: 8px; background: rgba(0,0,0,.25); } #spl-retro .rf-tcard .rf-name { max-width: 100%; padding-bottom: 4px; border-bottom: 3px solid var(--c); } #spl-retro .rf-rts em { width: 22px; font-family: var(--rf-px); font-size: 8px; font-style: normal; color: var(--sk-txt); text-align: right; } #spl-retro .rf-set > span { display: flex; align-items: center; gap: 8px; } #spl-retro .rf-ic { flex: none; width: 14px; height: 14px; fill: currentColor; color: var(--sk-tc); } /* the playbook */ #spl-retro .rf-book { box-sizing: border-box; padding: 8px; border: 2px solid var(--sk-line); border-radius: 8px; background: var(--sk-bg); } #spl-retro .rf-bookbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } #spl-retro .rf-seg2 { display: inline-flex; overflow: hidden; border: 2px solid var(--sk-line); border-radius: 6px; } #spl-retro .rf-seg2 button { min-height: 34px; margin: 0; padding: 6px 14px; border: 0; background: var(--sk-alt); color: var(--sk-altt); font-family: var(--rf-px); font-size: 9px; text-transform: uppercase; cursor: pointer; } #spl-retro .rf-seg2 button + button { border-left: 2px solid var(--sk-line); } #spl-retro .rf-seg2 button.on { background: var(--sk-btn); color: var(--sk-btnt); } #spl-retro .rf-seg2.sub button { padding: 6px 10px; font-size: 8px; } #spl-retro .rf-bookbar .rf-special { margin-left: auto; } #spl-retro .rf-special .rf-sbtn { min-height: 34px; border: 0; border-radius: 6px; background: var(--sk-btn); color: var(--sk-btnt); font-family: var(--sk-bf); box-shadow: inset 0 -3px 0 rgba(0,0,0,.3); } #spl-retro .rf-special .rf-sbtn.ghost { background: var(--sk-alt); color: var(--sk-altt); } #spl-retro .rf-play { border: 2px solid rgba(255,255,255,.18); border-radius: 6px; box-shadow: none; } #spl-retro .rf-play.trick { border-color: var(--sk-btn); } #spl-retro .rf-play b { font-family: var(--sk-bf); font-size: calc(9px * var(--sk-k)); font-weight: 400; } #spl-retro .rf-plays { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* the move pad */ #spl-retro .rf-pad { position: absolute; right: max(10px, env(safe-area-inset-right)); bottom: 14px; z-index: 3; display: none; grid-template-columns: repeat(2, 62px); gap: 10px; } #spl-retro .rf-pad.on { display: grid; } #spl-retro .rf-pad button { position: relative; width: 62px; height: 62px; margin: 0; padding: 0; overflow: hidden; border: 3px solid rgba(255,255,255,.85); border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-family: var(--rf-px); font-size: 8px; text-transform: uppercase; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } #spl-retro .rf-pad button::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(rgba(0,0,0,.72) calc(var(--cd, 0) * 360deg), transparent 0); pointer-events: none; } #spl-retro .rf-pad button.dv { border-color: #FFC72C; color: #FFC72C; } #spl-retro .rf-pad button.out { opacity: .3; } #spl-retro .rf-pad button:active { transform: scale(.94); } /* game stats */ #spl-retro .rf-b3 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; gap: 12px; } #spl-retro .rf-b3 { grid-template-columns: minmax(0, 1fr); } #spl-retro .rf-b3-col { min-width: 0; display: flex; flex-direction: column; gap: 10px; } #spl-retro .rf-card2 { box-sizing: border-box; padding: 8px 10px; border-radius: 8px; background: var(--sk-panel); } #spl-retro .rf-sb-row { display: flex; align-items: center; gap: 4px; padding: 7px 0 7px 8px; border-left: 4px solid var(--c, transparent); } #spl-retro .rf-sb-row + .rf-sb-row { border-top: 1px solid rgba(255,255,255,.08); } #spl-retro .rf-sb-row span { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; } #spl-retro .rf-sb-row img { width: 24px; height: 24px; object-fit: contain; } #spl-retro .rf-sb-row b { overflow: hidden; font-family: var(--rf-px); font-size: 11px; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; } #spl-retro .rf-sb-row i { width: 24px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; font-style: normal; font-weight: 700; color: var(--sk-mute); text-align: center; } #spl-retro .rf-sb-row em { width: 40px; font-family: var(--rf-px); font-size: 16px; font-style: normal; text-align: right; } #spl-retro .rf-sb-row.h { padding-top: 0; padding-bottom: 2px; border-left-color: transparent; } #spl-retro .rf-sb-row.h i, #spl-retro .rf-sb-row.h em { font-family: var(--rf-px); font-size: 7px; color: var(--sk-mute); } #spl-retro .rf-sb-row.w b, #spl-retro .rf-sb-row.w em { color: var(--sk-tc); } #spl-retro .rf-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 4px 10px; padding: 7px 0; border-top: 1px solid rgba(255,255,255,.08); } #spl-retro .rf-vs.head { padding-top: 2px; border-top: 0; } #spl-retro .rf-vs b { font-family: ui-monospace, Menlo, monospace; font-size: 14px; font-weight: 700; white-space: nowrap; } #spl-retro .rf-vs b:last-of-type { text-align: right; } #spl-retro .rf-vs b small { font-size: 10px; font-weight: 400; color: var(--sk-mute); } #spl-retro .rf-vs span { font-family: var(--rf-px); font-size: 7px; letter-spacing: .06em; color: var(--sk-mute); text-align: center; white-space: nowrap; } #spl-retro .rf-vs.head b { display: flex; align-items: center; gap: 6px; font-family: var(--rf-px); font-size: 9px; font-weight: 400; } #spl-retro .rf-vs.head b:last-of-type { justify-content: flex-end; } #spl-retro .rf-vs.head b img { width: 20px; height: 20px; object-fit: contain; } #spl-retro .rf-vs.head span { color: var(--sk-tc); } #spl-retro .rf-vs i { grid-column: 1 / -1; display: block; height: 4px; overflow: hidden; border-radius: 2px; background: var(--cb); } #spl-retro .rf-vs i u { display: block; height: 100%; background: var(--ca); } #spl-retro .rf-ld2 h4 { margin: 0 0 6px; font-family: var(--rf-px); font-size: 9px; font-weight: 400; color: var(--sk-tc); } #spl-retro .rf-ldr { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 0 6px 8px; border-left: 4px solid var(--c); } #spl-retro .rf-ldr + .rf-ldr { margin-top: 5px; } #spl-retro .rf-ldr em { font-family: var(--rf-px); font-size: 8px; font-style: normal; color: var(--sk-mute); } #spl-retro .rf-ldr b { overflow: hidden; font-family: ui-monospace, Menlo, monospace; font-size: 13px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; } #spl-retro .rf-ldr span { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--sk-mute); white-space: nowrap; } #spl-retro .rf-box3 .rf-foot { position: sticky; bottom: calc(-1 * max(10px, env(safe-area-inset-bottom))); margin-top: auto; padding: 8px 0 max(10px, env(safe-area-inset-bottom)); background: var(--sk-bg); } #spl-retro .rf-box3 .rf-foot .rf-pbtn { min-width: 120px; min-height: 46px; } #spl-retro .rf-box3 .rf-foot .rf-pbtn.big { min-width: 170px; } /* 1.33.0: favourite plays and the touchdown screen */ #spl-retro .rf-play { position: relative; } #spl-retro .rf-star { position: absolute; top: 0; right: 0; z-index: 2; padding: 3px 6px; font-size: 14px; font-style: normal; line-height: 1; color: rgba(255,255,255,.32); } #spl-retro .rf-star.on { color: #FFC72C; } #spl-retro .rf-nofav { max-width: 360px; margin: 24px auto; font-family: var(--sk-bf); font-size: calc(11px * var(--sk-k)); line-height: 1.7; color: var(--sk-mute); text-align: center; text-transform: uppercase; } #spl-retro .rf-td { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; overflow: hidden; } #spl-retro .rf-td-h { margin: 0; font-family: var(--rf-px); font-size: clamp(20px, 5.6vw, 42px); font-weight: 400; letter-spacing: .04em; color: #FFC72C; text-shadow: 3px 3px 0 #b31b1b, 6px 6px 0 #000; animation: rf-tdflash .42s steps(2) infinite; } @keyframes rf-tdflash { 50% { color: #ffffff; } } #spl-retro .rf-td-fig { width: 72px; height: 108px; image-rendering: pixelated; } #spl-retro .rf-td-p { margin: 0; font-family: var(--sk-bf); font-size: calc(14px * var(--sk-k)); color: #fff; text-align: center; text-transform: uppercase; } #spl-retro .rf-td-p span { display: block; margin-top: 5px; font-size: calc(10px * var(--sk-k)); color: var(--sk-mute); } #spl-retro .rf-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } #spl-retro .rf-confetti i { position: absolute; top: -14px; width: 6px; height: 10px; animation: rf-fall 1.6s linear infinite; } @keyframes rf-fall { to { transform: translateY(620px) rotate(260deg); } } /* 1.34.0: the play designer, the touchdown scene, tighter playbook tabs */ #spl-retro .rf-seg2 button { padding: 6px 10px; } #spl-retro .rf-seg2.sub button { padding: 6px 8px; } #spl-retro .rf-edit { position: absolute; top: 0; left: 0; z-index: 2; padding: 3px 6px; font-family: var(--sk-bf); font-size: 8px; font-style: normal; line-height: 1; color: var(--sk-tc); text-transform: uppercase; } #spl-retro .rf-play.new { display: flex; flex-direction: column; align-items: center; justify-content: center; border-style: dashed; } /* designer */ #spl-retro .rf-design { gap: 8px; } #spl-retro .rf-dwrap { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); align-items: start; gap: 14px; } #spl-retro .rf-dwrap { grid-template-columns: minmax(0, 1fr); } #spl-retro .rf-dfield { min-width: 0; } #spl-retro .rf-desfield { display: block; width: 100%; height: auto; border: 2px solid var(--sk-line); border-radius: 6px; touch-action: manipulation; } #spl-retro .rf-dside { min-width: 0; display: flex; flex-direction: column; gap: 8px; } #spl-retro .rf-drow { display: flex; flex-direction: column; gap: 5px; } #spl-retro .rf-drow > small { font-family: var(--rf-px); font-size: 8px; letter-spacing: .06em; color: var(--sk-mute); } #spl-retro .rf-dchips { display: flex; flex-wrap: wrap; gap: 6px; } #spl-retro .rf-dchip { min-height: 34px; margin: 0; padding: 7px 10px; border: 2px solid rgba(255,255,255,.14); border-radius: 6px; background: var(--sk-alt); color: var(--sk-altt); font-family: var(--sk-bf); font-size: calc(10px * var(--sk-k)); text-transform: uppercase; cursor: pointer; } #spl-retro .rf-dchip.on { border-color: var(--sk-line); background: var(--sk-btn); color: var(--sk-btnt); } #spl-retro .rf-dchip:active { transform: translateY(1px); } #spl-retro .rf-droutes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } #spl-retro .rf-droutes .rf-dchip { padding: 7px 4px; text-align: center; } #spl-retro .rf-dname { box-sizing: border-box; width: 100%; min-height: 38px; padding: 8px 10px; border: 2px solid var(--sk-line); border-radius: 6px; background: var(--sk-panel); color: var(--sk-txt); font-family: var(--sk-bf); font-size: calc(12px * var(--sk-k)); text-transform: uppercase; } #spl-retro .rf-derr { margin: 0; font-family: var(--sk-bf); font-size: calc(10px * var(--sk-k)); color: #ff6b6b; text-transform: uppercase; } #spl-retro .rf-dsave { display: flex; gap: 8px; margin-top: auto; } #spl-retro .rf-dsave .rf-pbtn { flex: 1; } #spl-retro .rf-dsave .rf-pbtn.big { min-height: 48px; } /* the touchdown shot */ #spl-retro .rf-td-scene { width: min(420px, 82%); height: auto; border: 3px solid var(--sk-line); border-radius: 4px; image-rendering: pixelated; box-shadow: 0 8px 24px rgba(0,0,0,.55); } /* held upright the playbook has seven tabs, so they shrink to stay on one row */ #spl-retro .rf-bookbar { gap: 6px; } #spl-retro .rf-seg2 button { padding: 6px 7px; font-size: 7px; } #spl-retro .rf-seg2.sub button { padding: 6px 6px; font-size: 7px; } /* 1.35.0: even playbook tabs, My plays under the grid, the new scorebug */ #spl-retro .rf-bookbar .rf-seg2 { flex: 1; } #spl-retro .rf-seg2 button { flex: 1; } #spl-retro .rf-mine { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.12); } #spl-retro .rf-mine-h { display: block; margin-bottom: 5px; font-family: var(--rf-px); font-size: 8px; letter-spacing: .08em; color: var(--sk-mute); } #spl-retro .rf-mine-row { display: flex; flex-wrap: wrap; gap: 6px; } #spl-retro .rf-mplay { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; margin: 0; padding: 7px 10px; border: 2px solid rgba(255,255,255,.18); border-radius: 6px; background: var(--sk-alt); color: var(--sk-altt); font-family: var(--sk-bf); text-transform: uppercase; cursor: pointer; } #spl-retro .rf-mplay b { font-size: calc(10px * var(--sk-k)); font-weight: 400; } #spl-retro .rf-mplay i { padding: 2px 5px; border-radius: 3px; background: rgba(0,0,0,.4); color: var(--sk-tc); font-size: 8px; font-style: normal; } #spl-retro .rf-mplay.new { border-style: dashed; color: var(--sk-tc); } #spl-retro .rf-sb2 { display: inline-flex; align-items: stretch; overflow: hidden; border: 2px solid rgba(255,255,255,.18); border-radius: 6px; background: #101010; } #spl-retro .rf-sbt { display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: var(--c); color: #fff; font-weight: 900; letter-spacing: .04em; text-shadow: 0 1px 0 rgba(0,0,0,.45); } #spl-retro .rf-sbt img { width: 18px; height: 18px; padding: 1px; border-radius: 3px; background: rgba(255,255,255,.9); object-fit: contain; } #spl-retro .rf-sb2 em { display: flex; align-items: center; padding: 4px 9px; background: #1c1c1c; color: #fff; font-family: var(--rf-px); font-size: 12px; font-style: normal; } #spl-retro .rf-sbq { display: flex; align-items: center; gap: 7px; padding: 4px 10px; background: #000; color: var(--sk-tc); font-family: var(--rf-px); font-size: 9px; } #spl-retro .rf-sbq i { font-style: normal; color: #fff; } /* the playbook scrolls when the grid plus My plays is taller than the screen */ #spl-retro .rf-book { max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* 1.36.0: season mode - save slots, the hub, league standings, schedule and the playoff picture */ #spl-retro .rf-slotlist { display: flex; flex-direction: column; gap: 8px; } #spl-retro .rf-slot { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: 8px; padding: 12px 10px 10px; border: 2px solid var(--sk-line); border-radius: 6px; } #spl-retro .rf-slot-h { position: absolute; top: -7px; left: 10px; padding: 0 6px; background: var(--sk-bg); font-family: var(--rf-px); font-size: 8px; color: var(--sk-tc); } #spl-retro .rf-slot-b { min-width: 0; display: flex; align-items: center; gap: 10px; } #spl-retro .rf-slot-b img { width: 30px; height: 30px; object-fit: contain; } #spl-retro .rf-slot-b b { font-family: var(--rf-px); font-size: 11px; font-weight: 400; } #spl-retro .rf-slot-b b.empty { color: var(--sk-mute); } #spl-retro .rf-slot-b small { display: block; margin-top: 4px; font-family: var(--sk-bf); font-size: calc(10px * var(--sk-k)); color: var(--sk-mute); } #spl-retro .rf-slot-go { display: flex; gap: 6px; } #spl-retro .rf-seahead { display: flex; align-items: center; gap: 12px; } #spl-retro .rf-seahead img { width: 44px; height: 44px; object-fit: contain; } #spl-retro .rf-seahead b { font-family: var(--rf-px); font-size: 15px; font-weight: 400; color: var(--sk-tc); } #spl-retro .rf-seahead small { display: block; margin-top: 4px; font-family: var(--sk-bf); font-size: calc(12px * var(--sk-k)); color: var(--sk-mute); } #spl-retro .rf-season .rf-week { margin-top: 6px; } #spl-retro .rf-season .rf-week .rf-pbtn { flex: none; margin-left: 8px; } #spl-retro .rf-seabtns { display: flex; gap: 8px; margin-top: auto; } #spl-retro .rf-seabtns .rf-pbtn { flex: 1; } #spl-retro .rf-lstand, #spl-retro .rf-lplay { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; align-content: start; } #spl-retro .rf-lstand, #spl-retro .rf-lplay { grid-template-columns: minmax(0, 1fr); } #spl-retro .rf-lhead { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 34px); gap: 4px; margin-bottom: 3px; } #spl-retro .rf-lhead u { font-family: var(--rf-px); font-size: 7px; color: var(--sk-mute); text-align: center; text-decoration: none; } #spl-retro .rf-lrow { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 34px); align-items: center; gap: 4px; padding: 3px 0; } #spl-retro .rf-lrow b { overflow: hidden; font-family: var(--sk-bf); font-size: calc(11px * var(--sk-k)); font-weight: 400; white-space: nowrap; text-overflow: ellipsis; } #spl-retro .rf-lrow span { font-family: ui-monospace, Menlo, monospace; font-size: 12px; font-weight: 700; text-align: center; } #spl-retro .rf-lrow.me b, #spl-retro .rf-lrow.me span { color: var(--sk-tc); } #spl-retro .rf-lplay h5 { margin: 6px 0 2px; font-family: var(--rf-px); font-size: 7px; font-weight: 400; color: var(--sk-mute); } #spl-retro .rf-lsched { flex: 1; } #spl-retro .rf-lsched-h { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 8px; } #spl-retro .rf-lsched-h span { font-family: var(--rf-px); font-size: 11px; color: var(--sk-tc); } #spl-retro .rf-lsched-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; } #spl-retro .rf-lsched-g { grid-template-columns: minmax(0, 1fr); } #spl-retro .rf-lsched-g span { font-family: ui-monospace, Menlo, monospace; font-size: 12px; font-weight: 700; color: var(--sk-mute); } #spl-retro .rf-lsched-g span.me { color: var(--sk-tc); } #spl-retro .rf-lbar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; } #spl-retro .rf-lbar .rf-pbtn { flex: 1; min-width: 78px; } #spl-retro .rf-lbar .rf-pbtn.on { background: var(--sk-btn); color: var(--sk-btnt); } /* five save slots have to fit on a phone held sideways */ #spl-retro .rf-slots .rf-slotlist { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-right: 2px; } /* the league tables scroll above the button bar, and playoff rows are team + record */ #spl-retro .rf-lstand, #spl-retro .rf-lplay { overflow-y: auto; -webkit-overflow-scrolling: touch; padding-right: 2px; } #spl-retro .rf-lrow.two { grid-template-columns: minmax(0, 1fr) auto; } #spl-retro .rf-lrow.two span { text-align: right; white-space: nowrap; } #spl-retro .rf-league .rf-lbar { flex: none; padding-top: 6px; background: var(--sk-bg); } /* 1.37.0: season slate, richer league rows, full box score sheets */ #spl-retro .rf-seahead { padding-left: 10px; border-left: 5px solid var(--c, var(--sk-line)); } #spl-retro .rf-nextgame { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 10px 9px 14px; border: 2px solid var(--sk-line); border-radius: 8px; background: var(--sk-panel); overflow: hidden; } #spl-retro .rf-nextgame::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c, var(--sk-line)); } #spl-retro .rf-nextgame img { width: 34px; height: 34px; object-fit: contain; } #spl-retro .rf-ng-t { flex: 1; min-width: 0; } #spl-retro .rf-ng-t small { display: block; font-family: var(--rf-px); font-size: 8px; letter-spacing: .1em; color: var(--sk-mute); } #spl-retro .rf-ng-t b { display: block; margin-top: 4px; overflow: hidden; font-family: var(--sk-bf); font-size: calc(13px * var(--sk-k)); font-weight: 400; white-space: nowrap; text-overflow: ellipsis; } #spl-retro .rf-nextgame.off { opacity: .8; } #spl-retro .rf-slatelist { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding-right: 2px; } #spl-retro .rf-slate { display: grid; grid-template-columns: 22px 20px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 4px 6px 4px 8px; border-left: 4px solid var(--c); border-radius: 3px; } #spl-retro .rf-slate i { font-family: var(--rf-px); font-size: 8px; font-style: normal; color: var(--sk-mute); } #spl-retro .rf-slate img { width: 20px; height: 20px; object-fit: contain; } #spl-retro .rf-slate b { overflow: hidden; font-family: var(--sk-bf); font-size: calc(11px * var(--sk-k)); font-weight: 400; white-space: nowrap; text-overflow: ellipsis; } #spl-retro .rf-slate b.bye { grid-column: 2 / 4; color: var(--sk-mute); } #spl-retro .rf-slate span { font-family: ui-monospace, Menlo, monospace; font-size: 12px; font-weight: 700; color: var(--sk-mute); } #spl-retro .rf-slate.now { background: rgba(255,255,255,.08); } #spl-retro .rf-slate.now b { color: var(--sk-tc); } #spl-retro .rf-slate.win span { color: #6ee37a; } #spl-retro .rf-slate.loss span { color: #ff6b6b; } #spl-retro .rf-lrow { padding-left: 7px; border-left: 4px solid var(--c, transparent); } #spl-retro .rf-lrow b { display: flex; align-items: center; gap: 6px; } #spl-retro .rf-lrow b img { width: 18px; height: 18px; object-fit: contain; } #spl-retro .rf-lsched-g span { display: flex; align-items: center; gap: 5px; } #spl-retro .rf-lsched-g img { width: 16px; height: 16px; object-fit: contain; } #spl-retro .rf-sheet { border-left: 5px solid var(--c); } #spl-retro .rf-sheet h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-family: var(--rf-px); font-size: 11px; font-weight: 400; color: var(--sk-tc); } #spl-retro .rf-sheet h4 img { width: 22px; height: 22px; object-fit: contain; } #spl-retro .rf-sheet h5 { margin: 8px 0 2px; font-family: var(--rf-px); font-size: 7px; font-weight: 400; letter-spacing: .08em; color: var(--sk-mute); } #spl-retro .rf-srow { display: flex; align-items: baseline; gap: 6px; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.07); font-family: ui-monospace, Menlo, monospace; font-size: 12px; } #spl-retro .rf-srow:last-child { border-bottom: 0; } #spl-retro .rf-srow i { flex: 1; min-width: 0; overflow: hidden; font-style: normal; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; } #spl-retro .rf-srow span { width: 46px; text-align: right; } #spl-retro .rf-srow.head { border-bottom: 0; } #spl-retro .rf-srow.head span { font-family: var(--rf-px); font-size: 7px; color: var(--sk-mute); } #spl-retro .rf-snone { margin: 4px 0 0; font-family: var(--sk-bf); font-size: calc(10px * var(--sk-k)); color: var(--sk-mute); } /* the 18-week slate has to fit under the next-game card on a phone held sideways */ /* the slate is its own scroll area so the League buttons always stay put */ #spl-retro .rf-season { overflow: hidden; } #spl-retro .rf-slatelist { flex: 1 1 0; min-height: 0; align-content: start; } /* 1.38.0: one standings table, seeded playoff rows, season stats */ #spl-retro .rf-lhead, #spl-retro .rf-lrow { grid-template-columns: minmax(0, 1fr) repeat(5, 30px); } #spl-retro .rf-lrow span { font-size: 11px; } #spl-retro .rf-lrow.two { grid-template-columns: minmax(0, 1fr) auto; } #spl-retro .rf-lrow b u { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 2px; border-radius: 3px; background: var(--sk-btn); color: var(--sk-btnt); font-family: var(--rf-px); font-size: 7px; text-decoration: none; } #spl-retro .rf-lrow b u.out { background: transparent; } #spl-retro .rf-lsched-g span i { font-style: normal; color: var(--sk-mute); } #spl-retro .rf-lhint { margin: 8px 0 0; font-family: var(--sk-bf); font-size: calc(9px * var(--sk-k)); color: var(--sk-mute); text-align: center; } #spl-retro .rf-stats .rf-b3 { flex: 1; min-height: 0; } #spl-retro .rf-stats .rf-b3-col { overflow-y: auto; -webkit-overflow-scrolling: touch; max-height: 100%; } #spl-retro .rf-trow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.08); } #spl-retro .rf-trow:last-child { border-bottom: 0; } #spl-retro .rf-trow i { font-family: var(--sk-bf); font-size: calc(10px * var(--sk-k)); font-style: normal; color: var(--sk-mute); text-transform: uppercase; } #spl-retro .rf-trow b { font-family: ui-monospace, Menlo, monospace; font-size: 13px; font-weight: 700; } #spl-retro .rf-trow span { font-family: var(--rf-px); font-size: 7px; color: var(--sk-tc); white-space: nowrap; } #spl-retro .rf-seabtns .rf-pbtn.big { min-height: 44px; font-size: calc(12px * var(--sk-k)); } /* 1.39.0: stacked playbook rows, designer strip, box score toggle, rotation text fix */ #spl-retro { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } #spl-retro .rf-bookbar { flex-direction: column; align-items: stretch; gap: 6px; } #spl-retro .rf-bookbar .rf-seg2 { width: 100%; } #spl-retro .rf-bookbar .rf-special { margin-left: 0; justify-content: center; } #spl-retro .rf-mplay.off { opacity: .45; } #spl-retro .rf-mplay.on { border-color: var(--sk-line); color: var(--sk-tc); } #spl-retro .rf-swap { width: 100%; margin-top: 8px; } #spl-retro .rf-box3 .rf-foot { justify-content: space-between; } #spl-retro .rf-slotfoot { display: flex; justify-content: center; margin-top: auto; padding-top: 8px; } #spl-retro .rf-slotfoot .rf-pbtn { min-width: 220px; } /* 1.39.0: league/team navigation, the week schedule board, season goals */ #spl-retro .rf-seg2.switch { align-self: center; width: min(320px, 100%); margin-bottom: 4px; } #spl-retro .rf-seg2.switch button { flex: 1; padding: 8px 10px; font-size: 9px; } #spl-retro .rf-wkbar { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 6px; } #spl-retro .rf-wkbar span { font-family: var(--rf-px); font-size: 12px; color: var(--sk-tc); } #spl-retro .rf-wkgames { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; align-content: start; } #spl-retro .rf-wkg { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr); align-items: center; gap: 6px; padding: 5px 8px; border-radius: 4px; background: var(--sk-panel); } #spl-retro .rf-wkg.me { outline: 2px solid var(--sk-line); } #spl-retro .rf-wkt { display: flex; align-items: center; gap: 6px; padding-left: 6px; border-left: 4px solid var(--c); font-family: var(--sk-bf); font-size: calc(11px * var(--sk-k)); } #spl-retro .rf-wkt.h { justify-content: flex-end; padding-left: 0; padding-right: 6px; border-left: 0; border-right: 4px solid var(--c); } #spl-retro .rf-wkg img { width: 20px; height: 20px; object-fit: contain; } #spl-retro .rf-wkg i { font-family: var(--sk-bf); font-size: calc(9px * var(--sk-k)); font-style: normal; color: var(--sk-mute); } #spl-retro .rf-wkg em { min-width: 22px; font-family: ui-monospace, Menlo, monospace; font-size: 13px; font-style: normal; font-weight: 700; text-align: center; } #spl-retro .rf-slatelist.big { grid-template-columns: minmax(0, 1fr); } #spl-retro .rf-team .rf-roster-cols { flex: 1; min-height: 0; overflow-y: auto; } #spl-retro .rf-team .rf-b3 { flex: 1; min-height: 0; } #spl-retro .rf-team .rf-b3-col { overflow-y: auto; max-height: 100%; } #spl-retro .rf-achs { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; } #spl-retro .rf-ach { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 8px 10px; border-radius: 6px; background: var(--sk-panel); } #spl-retro .rf-ach b { font-family: var(--sk-bf); font-size: calc(11px * var(--sk-k)); font-weight: 400; } #spl-retro .rf-ach span { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--sk-mute); } #spl-retro .rf-ach i { grid-column: 1 / -1; display: block; height: 4px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; } #spl-retro .rf-ach i u { display: block; height: 100%; background: var(--sk-btn); } #spl-retro .rf-ach.done b { color: var(--sk-tc); } #spl-retro .rf-ach.done i u { background: #6ee37a; } /* 1.40.0: playbook rows, designer strip of three, even menu bars */ #spl-retro .rf-bookbar .rf-seg2.main button { font-size: calc(11px * var(--sk-k)); } #spl-retro .rf-seg2.sub { border-color: rgba(255,255,255,.2); } #spl-retro .rf-seg2.sub button { background: rgba(255,255,255,.06); color: var(--sk-mute); } #spl-retro .rf-seg2.sub button + button { border-left-color: rgba(255,255,255,.2); } #spl-retro .rf-seg2.sub button.on { background: var(--sk-panel); color: var(--sk-tc); box-shadow: inset 0 -3px 0 var(--sk-btn); } #spl-retro .rf-mine { border-top: 0; } #spl-retro .rf-mine-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } #spl-retro .rf-mine-row .rf-mplay { justify-content: center; width: 100%; } #spl-retro .rf-lbar { flex-direction: column; gap: 6px; } #spl-retro .rf-lrow4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } #spl-retro .rf-lrow4 .rf-pbtn { flex: none; min-width: 0; width: 100%; } #spl-retro .rf-pbtn.cross { width: 100%; background: rgba(0,0,0,.45); box-shadow: inset 0 -3px 0 rgba(0,0,0,.5); } #spl-retro .rf-pbtn.cross::after { content: ' \203A'; } /* the fourth down row: kick or punt, impossible to miss */ #spl-retro .rf-bookbar .rf-special { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; width: 100%; margin-left: 0; } #spl-retro .rf-special .rf-sbtn.kick { background: var(--sk-btn); color: var(--sk-btnt); } #spl-retro .rf-toofar { display: grid; place-items: center; font-family: var(--sk-bf); font-size: calc(10px * var(--sk-k)); color: var(--sk-mute); text-transform: uppercase; } /* fourth down should be loud, and the kick is always offered */ #spl-retro .rf-bookbar .rf-special { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); align-items: center; } #spl-retro .rf-4th { padding: 6px 10px; border-radius: 4px; background: #d6362b; color: #fff; font-family: var(--rf-px); font-size: 9px; white-space: nowrap; } #spl-retro .rf-special .rf-sbtn.kick i { font-style: normal; font-size: .85em; opacity: .75; } #spl-retro .rf-bug > b.d4 { background: #d6362b; color: #fff; } /* Retro Football: Retro Bowl style player cards and the league leaderboards. */ #spl-retro .rf-pc-h { display: flex; align-items: center; justify-content: space-between; padding: 5px 8px; background: var(--c); color: #fff; font-family: var(--rf-px); font-size: 7px; letter-spacing: .06em; text-shadow: 1px 1px 0 rgba(0,0,0,.45); } #spl-retro .rf-screen .rf-pc .rf-pc-h i, #spl-retro .rf-pc-h i { position: static; top: auto; right: auto; padding: 0; border-radius: 0; background: none; font-style: normal; font-family: var(--rf-px); color: #fff; } #spl-retro .rf-pc-h em { font-style: normal; font-family: ui-monospace, Menlo, monospace; font-size: 13px; font-weight: 700; color: #fff; } #spl-retro .rf-pcman { display: block; width: 46px; height: 69px; margin: 4px auto 0; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); } #spl-retro .rf-pc > b { margin: 0 8px; padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.12); font-family: var(--sk-bf); font-size: calc(10px * var(--sk-k)); font-weight: 400; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #spl-retro .rf-pc > b u { text-decoration: none; font-family: ui-monospace, Menlo, monospace; font-size: 10px; color: var(--sk-mute); } #spl-retro .rf-pc > b s { text-decoration: none; font-size: 9px; color: var(--sk-tc); } #spl-retro .rf-pc-bars { display: grid; gap: 4px; margin: 2px 8px 0; } #spl-retro .rf-pcb { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 2px 6px; } #spl-retro .rf-screen .rf-pc .rf-pcb i, #spl-retro .rf-pcb i { position: static; grid-row: 1; grid-column: 1; top: auto; right: auto; padding: 0; border-radius: 0; background: none; font-style: normal; font-family: var(--sk-bf); font-size: 9px; line-height: 1.2; letter-spacing: .06em; color: rgba(255,255,255,.72); text-transform: uppercase; white-space: nowrap; } #spl-retro .rf-pcb span { grid-row: 2; grid-column: 1 / -1; display: block; height: 9px; border: 1px solid rgba(255,255,255,.35); border-radius: 2px; background: rgba(0,0,0,.55); overflow: hidden; } #spl-retro .rf-pcb span u { display: block; height: 100%; background: var(--sk-btn); } #spl-retro .rf-pcb em { grid-row: 1; grid-column: 2; font-style: normal; font-family: ui-monospace, Menlo, monospace; font-size: 10px; font-weight: 700; line-height: 1.2; text-align: right; color: var(--sk-txt); } #spl-retro .rf-leads { flex: 1; min-height: 0; width: 100%; align-self: stretch; overflow-y: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-content: start; } #spl-retro .rf-lb { display: grid; grid-template-columns: 15px 17px minmax(0, 1fr) 28px 44px; align-items: center; gap: 6px; padding: 3px 4px; border-bottom: 1px solid rgba(255,255,255,.07); font-family: ui-monospace, Menlo, monospace; font-size: 11px; } #spl-retro .rf-lb:last-child { border-bottom: 0; } #spl-retro .rf-lb u { text-decoration: none; text-align: right; font-size: 9px; color: var(--sk-mute); } #spl-retro .rf-lb img { width: 16px; height: 16px; object-fit: contain; } #spl-retro .rf-lb b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #spl-retro .rf-lb i { font-style: normal; font-size: 9px; color: var(--sk-mute); } #spl-retro .rf-lb span { text-align: right; } #spl-retro .rf-lb.me { background: rgba(255,255,255,.07); box-shadow: inset 3px 0 0 var(--c); } #spl-retro .rf-srow span.g { width: 26px; color: var(--sk-mute); } #spl-retro .rf-team-roster .rf-seg2.switch { width: 100%; align-self: stretch; } /* The to-do lists roll up, and say how many are left while rolled up. */ #spl-app .spl-fold > summary { cursor: pointer; list-style: none; } #spl-app .spl-fold > summary::-webkit-details-marker { display: none; } #spl-app .spl-fold > summary .spl-foldc { flex: 0 0 auto; width: 9px; height: 9px; margin-left: 10px; border-right: 2px solid var(--mu); border-bottom: 2px solid var(--mu); transform: rotate(45deg); transition: transform .15s ease; } #spl-app .spl-fold[open] > summary .spl-foldc { transform: rotate(-135deg); } #spl-app .spl-foldn { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 8px; border-radius: 10px; background: #ff4d4d; color: #fff; font-size: 12px; font-weight: 900; vertical-align: 2px; } /* The Games deck: every bonus game is a card you tap into, name only, dot when it needs you. */ #spl-app .spl-gc-deck { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } @media (max-width: 360px) { #spl-app .spl-gc-deck { grid-template-columns: minmax(0, 1fr); } } @media (min-width: 900px) { #spl-app .spl-gc-deck { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } } #spl-app .spl-gc { position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--s1); color: inherit; font: inherit; text-align: left; cursor: pointer; } #spl-app .spl-gc.wide { grid-column: 1 / -1; } #spl-app .spl-gc:active { transform: translateY(1px); } #spl-app .spl-gc-art { display: block; width: 100%; aspect-ratio: 16 / 10; } #spl-app .spl-gc-name { padding: 9px 11px 11px; font-size: 13.5px; font-weight: 900; letter-spacing: .01em; } #spl-app .spl-gc-name.retro { font-family: "Press Start 2P", ui-monospace, Menlo, monospace; font-size: 9px; line-height: 1.4; letter-spacing: 0; } #spl-app .spl-gc-dot { position: absolute; top: 9px; right: 9px; z-index: 2; width: 10px; height: 10px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 0 3px var(--s1); } #spl-app .spl-gback { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; padding: 7px 12px 7px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--s1); color: var(--mu); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; } #spl-app .spl-gback i { font-style: normal; font-size: 16px; line-height: 1; } #spl-app .spl-gc-rf { grid-column: 1 / -1; } /* A full-body sprite wants the card sideways: player left, attributes right. */ /* The open card above the roster wall, in the spirit of a trading card. */ #spl-retro .rf-pc { cursor: pointer; text-align: left; font: inherit; color: inherit; border-width: 2px; } #spl-retro .rf-pc.on { border-color: var(--sk-tc); box-shadow: 0 0 0 2px var(--sk-tc); } #spl-retro .rf-feat { width: 100%; align-self: stretch; border: 2px solid rgba(255,255,255,.22); border-radius: 10px; overflow: hidden; background: var(--sk-panel); } #spl-retro .rf-feat-h { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--c); color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,.45); } #spl-retro .rf-feat-h b { font-family: var(--rf-px); font-size: 11px; } #spl-retro .rf-feat-h span { flex: 1; min-width: 0; text-align: right; font-family: var(--rf-px); font-size: 8px; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #spl-retro .rf-feat-h img { width: 20px; height: 20px; object-fit: contain; } #spl-retro .rf-feat-b { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 9px; } #spl-retro .rf-feat-fig { display: grid; place-items: center; width: 92px; padding: 6px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.07), rgba(0,0,0,.35)); } #spl-retro .rf-feat-fig .rf-featart, #spl-retro .rf-feat-fig .rf-pcman { display: block; width: auto !important; height: 104px !important; max-width: 100%; image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(0,0,0,.45)); } /* A headshot is landscape, so it fills the width and keeps its own aspect rather than taking the sprite's fixed height, which would squash it. */ #spl-retro .rf-feat-fig .rf-featpic { display: block; width: 100%; height: auto; max-height: 104px; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(0,0,0,.45)); } /* A drawn face is a square with its own background, not a cut out, so it is cropped into the well rather than floated in it. */ #spl-retro .rf-feat-fig .rf-featpic.drawn { width: 100%; height: auto; aspect-ratio: 1 / 1; max-height: none; object-fit: cover; border-radius: 6px; filter: none; image-rendering: pixelated; } #spl-retro .rf-feat-info { min-width: 0; display: flex; flex-direction: column; gap: 8px; } #spl-retro .rf-feat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } #spl-retro .rf-feat-top h4 { margin: 0; font-family: var(--sk-bf); font-size: calc(14px * var(--sk-k)); font-weight: 400; line-height: 1.15; } #spl-retro .rf-screen .rf-feat-top small { display: block; margin-top: 2px; font-family: var(--sk-bf); font-size: 10px; letter-spacing: .05em; color: var(--sk-mute); text-transform: uppercase; } #spl-retro .rf-ovr { flex: none; display: grid; place-items: center; padding: 3px 9px; border: 2px solid var(--sk-btn); border-radius: 6px; } #spl-retro .rf-screen .rf-ovr i { position: static; padding: 0; background: none; border-radius: 0; font-style: normal; font-family: var(--rf-px); font-size: 6px; color: var(--sk-mute); text-transform: uppercase; } #spl-retro .rf-ovr b { font-family: ui-monospace, Menlo, monospace; font-size: 20px; font-weight: 700; line-height: 1.05; color: var(--sk-btn); } #spl-retro .rf-feat-bars { display: grid; gap: 5px; } #spl-retro .rf-fa { display: grid; grid-template-columns: 62px minmax(0, 1fr) 24px; align-items: center; gap: 7px; } #spl-retro .rf-screen .rf-feat .rf-fa i { position: static; top: auto; right: auto; padding: 0; border-radius: 0; background: none; font-style: normal; font-family: var(--sk-bf); font-size: 9px; letter-spacing: .05em; color: #fff; text-transform: uppercase; white-space: nowrap; } #spl-retro .rf-fa span { display: block; height: 13px; border: 1px solid rgba(255,255,255,.3); border-radius: 3px; background: rgba(0,0,0,.55); overflow: hidden; } #spl-retro .rf-fa span u { display: block; height: 100%; background: var(--sk-btn); } #spl-retro .rf-fa em { font-style: normal; font-family: ui-monospace, Menlo, monospace; font-size: 11px; font-weight: 700; text-align: right; color: #fff; } /* The illustrations live inside each game now, cropped to a strip above it. */ /* Survivor Pool: everything floating bobs on its own slow cycle. */ @keyframes spl-bob { 0% { transform: translate(0, 0) rotate(-2.5deg); } 50% { transform: translate(2.5px, -2.5px) rotate(2.5deg); } 100% { transform: translate(0, 0) rotate(-2.5deg); } } #spl-app .spl-bob { transform-box: fill-box; transform-origin: center; animation: spl-bob 7.5s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { #spl-app .spl-bob { animation: none; } } /* The roster upright: a name list in two columns under the player panel. */ #spl-retro .rf-names { flex: 1; min-height: 0; width: 100%; align-self: stretch; overflow-y: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; align-content: start; } #spl-retro .rf-name { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 9px 9px; border: 0; border-left: 4px solid var(--c); border-radius: 7px; background: var(--sk-panel); color: inherit; font: inherit; text-align: left; cursor: pointer; } #spl-retro .rf-name.on { background: var(--sk-alt); box-shadow: inset 0 0 0 2px var(--sk-tc); } #spl-retro .rf-screen .rf-names .rf-name i { position: static; top: auto; right: auto; padding: 0; border-radius: 0; background: none; font-style: normal; font-family: var(--rf-px); font-size: 6px; color: var(--sk-tc); } #spl-retro .rf-name b { min-width: 0; font-family: var(--sk-bf); font-size: calc(10px * var(--sk-k)); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #spl-retro .rf-name em { font-style: normal; font-family: ui-monospace, Menlo, monospace; font-size: 12px; font-weight: 700; color: var(--sk-mute); } #spl-retro .rf-name.on em { color: var(--sk-tc); } /* His season line, under the attributes. */ #spl-retro .rf-feat-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 8px; padding: 9px 10px 10px; border-top: 1px solid rgba(255,255,255,.12); } #spl-retro .rf-feat-stats.none { display: block; font-family: var(--sk-bf); font-size: 10px; color: var(--sk-mute); text-transform: uppercase; letter-spacing: .05em; } #spl-retro .rf-feat-sh { grid-column: 1 / -1; font-family: var(--rf-px); font-size: 6px; letter-spacing: .07em; color: var(--sk-tc); text-transform: uppercase; } #spl-retro .rf-feat-stats div { min-width: 0; } #spl-retro .rf-screen .rf-feat-stats i { position: static; top: auto; right: auto; display: block; padding: 0; border-radius: 0; background: none; font-style: normal; font-family: var(--sk-bf); font-size: 9px; letter-spacing: .04em; color: var(--sk-mute); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #spl-retro .rf-feat-stats b { font-family: ui-monospace, Menlo, monospace; font-size: 14px; font-weight: 700; } /* The season screen's own children fill its column: the team-picker tile shares this class name and centres its contents, which squeezed the slate list. */ #spl-retro .rf-screen.rf-team { align-items: stretch; } #spl-retro .rf-screen.rf-team > * { width: 100%; align-self: stretch; } #spl-retro .rf-slatelist { width: 100%; align-self: stretch; } /* The week number was absolutely positioned by the team-picker tile's rule, so it took no grid cell and every later child shifted a track left, landing the opponent name in the 20px logo column. Back in flow, the row lays out as written. */ #spl-retro .rf-screen .rf-trow > i, #spl-retro .rf-screen .rf-feat-stats > div > i { position: static; top: auto; right: auto; padding: 0; border-radius: 0; background: none; } #spl-retro .rf-screen .rf-slate > i { position: static; top: auto; right: auto; padding: 0; border-radius: 0; background: none; color: var(--sk-mute); text-align: right; } #spl-retro .rf-screen .rf-slate > b { min-width: 0; max-width: none; } #spl-retro .rf-screen .rf-slate > span { justify-self: end; } /* ------------------------------------------------------------------ `.rf-team` is two different components sharing one class name: the team-picker tile, and the season screen. The tile's rule was imposing its grey panel, border, padding and centring on the whole season screen, which caused the grey background, the clipped schedule and the vanished labels. Scope the tile's styling away from the screen once, here. ------------------------------------------------------------------ */ #spl-retro .rf-screen.rf-team { position: static; background: var(--sk-bg); border: 0; border-radius: 0; gap: 7px; align-items: stretch; } #spl-retro .rf-screen.rf-team > i { position: static; top: auto; right: auto; padding: 0; background: none; } /* The corner chip at 1544 was written for a team tile, but the season screen carries the same `rf-team` class, so it was yanking every on the page into the top right corner. Only a real tile inside the team grid should get it. */ #spl-retro .rf-screen.rf-team i { position: static; top: auto; right: auto; padding: 0; border-radius: 0; background: none; color: inherit; } #spl-retro .rf-teamgrid .rf-team i { position: absolute; top: 2px; right: 2px; padding: 1px 3px; border-radius: 2px; background: #FFC72C; color: #000; } /* Player names on the stats sheet were being flung out of their rows too. */ #spl-retro .rf-screen .rf-srow > i { position: static; top: auto; right: auto; flex: 1; min-width: 0; padding: 0; border-radius: 0; background: none; color: inherit; font-size: inherit; text-align: left; } /* The season page fits all 18 weeks: a tighter head and shorter rows. */ #spl-retro .rf-seahead { gap: 9px; } #spl-retro .rf-seahead img { width: 34px; height: 34px; } #spl-retro .rf-seahead b { font-size: 12px; } #spl-retro .rf-seahead small { margin-top: 2px; font-size: calc(10px * var(--sk-k)); } #spl-retro .rf-slate { padding: 2px 6px 2px 8px; gap: 7px; } #spl-retro .rf-slate img { width: 17px; height: 17px; } #spl-retro .rf-slate b { font-size: calc(10px * var(--sk-k)); } #spl-retro .rf-slate span { font-size: 11px; } #spl-retro .rf-slatelist { gap: 1px; } #spl-retro { --rf-box: min(100%, calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 0.55)); } /* Roster: the chosen player is a coloured row, not an outline, and he gets a bigger card now the name list only needs the bottom of the screen. */ #spl-retro .rf-name.on { background: color-mix(in srgb, var(--c) 42%, var(--sk-panel)); box-shadow: none; } #spl-retro .rf-name.on b, #spl-retro .rf-name.on em { color: #fff; } #spl-retro .rf-names { flex: 0 0 auto; margin-top: auto; } #spl-retro .rf-feat-fig { width: 116px; } #spl-retro .rf-feat-fig .rf-featart, #spl-retro .rf-feat-fig .rf-pcman { height: 146px !important; } #spl-retro .rf-feat-fig .rf-featpic { max-height: 146px; } #spl-retro .rf-feat-top h4 { font-size: calc(16px * var(--sk-k)); } #spl-retro .rf-fa { grid-template-columns: 70px minmax(0, 1fr) 26px; } #spl-retro .rf-fa span { height: 15px; } #spl-retro .rf-ovr b { font-size: 23px; } /* The next-game card sizes inside its width, so its button cannot run off screen. */ #spl-retro .rf-screen.rf-team > *, #spl-retro .rf-nextgame { box-sizing: border-box; } #spl-retro .rf-nextgame { flex-wrap: wrap; gap: 8px 10px; } #spl-retro .rf-nextgame .rf-pbtn { flex: 0 1 auto; min-width: 0; } #spl-retro .rf-nextgame .rf-pbtn.big { padding: 12px 14px; font-size: calc(13px * var(--sk-k)); } /* ------------------------------------------------------------------ Highlight instead of outline. The bordered `.rf-frame` boxes each cost an extra 8px margin plus a legend sitting above their top edge, so the bottom border of the last one ran off screen (the clipped AFC West). A filled heading strip costs nothing and reads better. ------------------------------------------------------------------ */ #spl-retro .rf-screen.rf-league .rf-frame { margin-top: 0; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: var(--sk-panel); } #spl-retro .rf-screen.rf-league .rf-legend { position: static; display: block; padding: 4px 9px; background: rgba(255,255,255,.07); color: var(--sk-tc); font-size: 8px; line-height: 14px; } #spl-retro .rf-screen.rf-league .rf-lhead, #spl-retro .rf-screen.rf-league .rf-lrow { padding-left: 9px; padding-right: 9px; } #spl-retro .rf-screen.rf-league .rf-lrow.me { background: color-mix(in srgb, var(--c) 34%, transparent); } #spl-retro .rf-lstand, #spl-retro .rf-lplay { gap: 7px; } /* League schedule: home left, "at" its own column, the opponent its own column, then a gap before the score, left aligned. */ #spl-retro .rf-wkg { grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr) minmax(0, 1.05fr); gap: 4px; } #spl-retro .rf-wkg em { padding-left: 14px; } #spl-retro .rf-wkt.o { justify-content: flex-start; padding-left: 6px; padding-right: 0; border-left: 4px solid var(--c); border-right: 0; } #spl-retro .rf-wkg i { text-align: center; } #spl-retro .rf-wkg em { min-width: 0; text-align: left; font-size: 12px; white-space: nowrap; } #spl-retro .rf-wkg.me { outline: 0; background: color-mix(in srgb, var(--sk-tc) 22%, var(--sk-panel)); } /* Leaders: one category at a time, chosen from a toggle, ten deep. */ #spl-retro .rf-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } #spl-retro .rf-cat { min-height: 34px; padding: 6px 4px; border: 0; border-radius: 6px; background: var(--sk-alt); color: var(--sk-altt); font-family: var(--sk-bf); font-size: calc(10px * var(--sk-k)); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; } #spl-retro .rf-cat.on { background: var(--sk-btn); color: var(--sk-btnt); } #spl-retro .rf-board { border-radius: 6px; overflow: hidden; background: var(--sk-panel); } #spl-retro .rf-bhead { display: block; padding: 4px 9px; background: rgba(255,255,255,.07); color: var(--sk-tc); font-family: var(--rf-px); font-size: 8px; line-height: 14px; letter-spacing: .06em; } #spl-retro .rf-board .rf-lb { padding-left: 9px; padding-right: 9px; } #spl-retro .rf-leads { gap: 8px; } /* The season slate sits at the bottom, with room to be read. */ #spl-retro .rf-slatelist.low { flex: 0 0 auto; margin-top: auto; gap: 2px; } #spl-retro .rf-slatelist.low .rf-slate { padding: 3px 6px 3px 8px; } #spl-retro .rf-slatelist.low .rf-slate img { width: 19px; height: 19px; } #spl-retro .rf-slatelist.low .rf-slate b { font-size: calc(11px * var(--sk-k)); } #spl-retro .rf-slatelist.low .rf-slate span { font-size: 12px; } #spl-retro .rf-screen .rf-slatelist.low .rf-slate > i { font-size: 9px; } #spl-retro .rf-slate.now { background: color-mix(in srgb, var(--sk-tc) 20%, transparent); } /* A real phone has a safe-area inset the emulator does not, which can eat the card's left border. Guarantee the gutter regardless. */ #spl-retro .rf-screen { padding-left: calc(14px + env(safe-area-inset-left)); padding-right: calc(14px + env(safe-area-inset-right)); } #spl-retro .rf-nextgame { margin-left: 1px; margin-right: 1px; } /* Standings: give the number columns room so the pixel font cannot push them under the headers on a narrow screen, and keep header and rows in step. */ #spl-retro .rf-screen.rf-league .rf-lhead, #spl-retro .rf-screen.rf-league .rf-lrow { padding-left: 7px; padding-right: 7px; } #spl-retro .rf-lhead, #spl-retro .rf-lrow { grid-template-columns: minmax(0, 1fr) repeat(5, minmax(26px, auto)); gap: 3px; } #spl-retro .rf-lhead u { font-size: 6px; } #spl-retro .rf-lrow span { font-size: 11px; } /* One header per division rather than two. The column labels ride in the division band on the same tracks as the rows below, so they read at a usable size and the cramped second header under every band goes away with its height. */ #spl-retro .rf-screen.rf-league .rf-lband { display: grid; grid-template-columns: minmax(0, 1fr) repeat(5, minmax(26px, auto)); gap: 3px; align-items: center; padding: 5px 7px; } #spl-retro .rf-screen.rf-league .rf-lband b { min-width: 0; overflow: hidden; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; } #spl-retro .rf-screen.rf-league .rf-lband u { font-size: 7px; color: var(--sk-mute); text-align: center; text-decoration: none; } /* Playoffs and Leaders fill the room under them. */ #spl-retro .rf-lplay .rf-lrow.two { padding-top: 5px; padding-bottom: 5px; } #spl-retro .rf-lplay .rf-lrow b { font-size: calc(12px * var(--sk-k)); } #spl-retro .rf-lplay .rf-lrow b img { width: 22px; height: 22px; } #spl-retro .rf-lplay .rf-lrow.two span { font-size: 13px; } #spl-retro .rf-lplay h5 { font-size: 9px; } #spl-retro .rf-board .rf-lb { padding-top: 5px; padding-bottom: 5px; font-size: 12px; } #spl-retro .rf-board .rf-lb img { width: 19px; height: 19px; } #spl-retro .rf-bhead { font-size: 9px; line-height: 16px; } #spl-retro .rf-cat { min-height: 38px; font-size: calc(11px * var(--sk-k)); } /* The Fantasy Sim screen inside Retro Football, and the playoff cards on the season page. */ /* Career: the man calling it a day, and the three from history who want his shirt. */ #spl-retro .rf-career { gap: 12px; } #spl-retro .rf-cr-head { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 2px solid var(--sk-line); border-left: 5px solid var(--c, var(--sk-line)); border-radius: 8px; background: var(--sk-panel); } #spl-retro .rf-cr-head img { width: 34px; height: 34px; object-fit: contain; } #spl-retro .rf-cr-head b { display: block; font-family: var(--sk-bf); font-size: calc(15px * var(--sk-k)); font-weight: 400; } #spl-retro .rf-cr-head small { display: block; margin-top: 3px; font-family: var(--rf-px); font-size: 7px; letter-spacing: .06em; color: var(--sk-mute); } #spl-retro .rf-cr-note { margin: 0; font-size: 11px; color: var(--sk-mute); } #spl-retro .rf-cr-men { display: grid; gap: 8px; } #spl-retro .rf-cr-man { box-sizing: border-box; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; margin: 0; padding: 12px; border: 2px solid var(--sk-line); border-radius: 8px; background: var(--sk-panel); color: var(--sk-txt); text-align: left; cursor: pointer; } #spl-retro .rf-cr-man:active { transform: translateY(1px); } #spl-retro .rf-cr-r { display: grid; place-items: center; height: 44px; border-radius: 6px; background: var(--c, var(--sk-btn)); color: #fff; font-family: var(--rf-px); font-size: 15px; } #spl-retro .rf-cr-n b { display: block; font-family: var(--sk-bf); font-size: calc(14px * var(--sk-k)); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #spl-retro .rf-cr-n small { display: block; margin-top: 3px; font-size: 10px; color: var(--sk-mute); } #spl-retro .rf-cr-man.one .rf-cr-r { background: var(--sk-btn); color: var(--sk-btnt); font-size: 13px; } /* The clock pack: a timeout button on the play call, and the count in the scoreboard. */ #spl-retro .rf-tobar { display: flex; justify-content: flex-end; margin-top: 4px; } #spl-retro .rf-sbtn.to { padding: 6px 10px; font-size: 9px; } #spl-retro .rf-sbtn.to.off { opacity: .45; } #spl-retro .rf-ton { margin-left: 6px; font-family: var(--rf-px); font-size: 8px; letter-spacing: .06em; color: #9ad7ff; } #spl-retro .rf-pc { margin-left: 6px; padding: 1px 5px; border-radius: 3px; background: #b31b1b; color: #fff; font-family: var(--rf-px); font-size: 8px; } #spl-retro .rf-simscreen { gap: 10px; } #spl-retro .rf-simnote { margin: 0; font-size: 11px; color: var(--sk-mute); } #spl-retro .rf-sw { border: 2px solid var(--sk-line); border-radius: 8px; background: var(--sk-panel); overflow: hidden; } #spl-retro .rf-sw.me { border-color: var(--sk-tc); } #spl-retro .rf-sw-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 9px; background: rgba(255,255,255,.07); } #spl-retro .rf-sw-h b { font-family: var(--rf-px); font-size: 8px; letter-spacing: .06em; color: var(--sk-tc); } #spl-retro .rf-sw-h em { font-family: var(--rf-px); font-size: 13px; font-style: normal; color: var(--sk-txt); } #spl-retro .rf-sr { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 2px 8px; align-items: baseline; padding: 5px 9px; border-top: 1px solid rgba(255,255,255,.07); } #spl-retro .rf-sr i { font-family: var(--rf-px); font-size: 6px; font-style: normal; color: var(--sk-mute); } #spl-retro .rf-sr b { min-width: 0; font-family: var(--sk-bf); font-size: calc(12px * var(--sk-k)); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #spl-retro .rf-sr em { grid-column: 3; grid-row: 1; justify-self: end; font-family: ui-monospace, Menlo, monospace; font-size: 12px; font-style: normal; font-weight: 700; } #spl-retro .rf-sr u { grid-column: 2 / -1; font-size: 10px; text-decoration: none; color: var(--sk-mute); } #spl-retro .rf-sr.empty span { grid-column: 2 / -1; font-size: 11px; color: var(--sk-mute); } #spl-retro .rf-simwin { padding: 9px 12px; border: 2px solid var(--sk-tc); border-radius: 8px; background: var(--sk-panel); font-family: var(--rf-px); font-size: 9px; letter-spacing: .05em; color: var(--sk-tc); text-align: center; } #spl-retro .rf-snone.sm { font-size: 10px; color: var(--sk-mute); } #spl-retro .rf-nextgame.cup { border-color: var(--sk-tc); box-shadow: 0 0 0 1px var(--sk-tc) inset; } /* The screen is a flex column, so a tall page used to squeeze this card to a sliver and its own overflow:hidden then clipped the result away. It keeps its height now, and the awards scroll instead of shoving everything else off the screen. */ #spl-retro .rf-nextgame { flex: none; } #spl-retro .rf-ng-t small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #spl-retro .rf-cups { display: inline-block; margin-top: 5px; padding: 2px 6px; border-radius: 3px; background: var(--sk-btn); color: var(--sk-btnt); font-family: var(--rf-px); font-size: 7px; letter-spacing: .04em; text-decoration: none; } #spl-retro .rf-awards { flex: none; } /* Season awards, the goal payouts, and the live playoff bracket. */ #spl-retro .rf-awards { display: grid; gap: 3px; margin-bottom: 9px; } #spl-retro .rf-award { display: grid; grid-template-columns: minmax(0, 86px) minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 9px; border-left: 4px solid var(--sk-tc); border-radius: 4px; background: var(--sk-panel); } #spl-retro .rf-award i { font-family: var(--rf-px); font-size: 7px; font-style: normal; letter-spacing: .04em; color: var(--sk-mute); } #spl-retro .rf-award b { min-width: 0; font-family: var(--sk-bf); font-size: calc(12px * var(--sk-k)); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #spl-retro .rf-award span { font-size: 10px; color: var(--sk-mute); white-space: nowrap; } #spl-retro .rf-paid { display: inline-block; margin-left: 5px; padding: 1px 4px; border-radius: 3px; background: var(--sk-tc); color: #000; font-family: var(--rf-px); font-size: 6px; text-decoration: none; vertical-align: middle; } #spl-retro .rf-ovr.up u { display: block; margin-top: 2px; font-family: var(--rf-px); font-size: 7px; color: #6ee07a; text-decoration: none; } #spl-retro .rf-bracket { display: grid; gap: 8px; } #spl-retro .rf-pog { display: grid; gap: 1px; margin: 5px 0; } #spl-retro .rf-por { display: grid; grid-template-columns: 15px 18px minmax(0, 1fr) auto; gap: 7px; align-items: center; padding: 4px 9px 4px 6px; border-left: 4px solid var(--c, transparent); opacity: .5; } #spl-retro .rf-por.won { opacity: 1; } #spl-retro .rf-por.me b { color: var(--sk-tc); } #spl-retro .rf-por u { font-family: var(--rf-px); font-size: 7px; text-align: center; text-decoration: none; color: var(--sk-mute); } #spl-retro .rf-por img { width: 18px; height: 18px; object-fit: contain; } #spl-retro .rf-por b { min-width: 0; font-family: var(--sk-bf); font-size: calc(11px * var(--sk-k)); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #spl-retro .rf-por span { font-family: ui-monospace, Menlo, monospace; font-size: 12px; font-weight: 700; } #spl-retro .rf-champ { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 2px solid var(--sk-tc); border-radius: 8px; background: var(--sk-panel); } #spl-retro .rf-champ img { width: 34px; height: 34px; object-fit: contain; } #spl-retro .rf-champ small { display: block; font-family: var(--rf-px); font-size: 7px; letter-spacing: .06em; color: var(--sk-mute); } #spl-retro .rf-champ b { font-family: var(--sk-bf); font-size: calc(15px * var(--sk-k)); font-weight: 400; color: var(--sk-tc); } /* The home screen carries a lot of buttons now, so only Quick matchup keeps the solid fill. */ #spl-retro .rf-home .rf-mbtn { background: transparent; color: var(--sk-btn); border: 2px solid var(--sk-btn); box-shadow: none; } #spl-retro .rf-home .rf-mbtn:active { transform: translateY(1px); box-shadow: none; } #spl-retro .rf-home .rf-mbtn.quick { background: var(--sk-btn); color: var(--sk-btnt); box-shadow: inset 0 -4px 0 rgba(0,0,0,.3); } #spl-retro .rf-home .rf-mbtn.quick:active { box-shadow: inset 0 -2px 0 rgba(0,0,0,.3); } #spl-retro .rf-home .rf-mbtn.off { color: var(--sk-mute); border-color: var(--sk-mute); } /* Same idea on the drills page: the random pick is the solid one, the rest are outlined. */ #spl-retro .rf-drills .rf-mbtn { background: transparent; color: var(--sk-btn); border: 2px solid var(--sk-btn); box-shadow: none; } #spl-retro .rf-drills .rf-mbtn:active { transform: translateY(1px); box-shadow: none; } #spl-retro .rf-drills .rf-mbtn.pick { background: var(--sk-btn); color: var(--sk-btnt); box-shadow: inset 0 -4px 0 rgba(0,0,0,.3); } #spl-retro .rf-drills .rf-mbtn.pick:active { box-shadow: inset 0 -2px 0 rgba(0,0,0,.3); } /* What you are chasing, kept in the status bar for the whole drill. */ #spl-retro .rf-goalc { display: inline-flex; align-items: baseline; gap: 5px; padding: 1px 5px; border-radius: 3px; background: var(--sk-btn); color: var(--sk-btnt); font-family: ui-monospace, Menlo, monospace; font-size: 11px; font-weight: 700; } #spl-retro .rf-goalc i { font-family: var(--rf-px); font-size: 6px; font-style: normal; letter-spacing: .04em; } /* Prop Bingo: a 5x5 card that marks itself off the box scores. */ #spl-app .spl-bg-card { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; max-width: 460px; margin: 0 auto; } #spl-app .spl-bg-sq { position: relative; display: flex; align-items: center; justify-content: center; padding: 5px 4px; aspect-ratio: 1 / 1; border: 1px solid var(--line); border-radius: 7px; background: var(--s2); font-size: 9px; font-weight: 700; line-height: 1.22; text-align: center; overflow: hidden; hyphens: auto; } #spl-app .spl-bg-sq.hit { border-color: var(--y); background: rgba(255,199,44,.16); color: var(--tx); } #spl-app .spl-bg-sq.hit::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--y); border-radius: 6px; pointer-events: none; } #spl-app .spl-bg-sq.free { background: var(--s3); color: var(--mu); font-size: 10px; } #spl-app .spl-bg-sq.row { background: rgba(255,199,44,.3); } #spl-app .spl-bg-meta { margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: var(--mu); text-align: center; } #spl-app .spl-bg-meta b { color: var(--tx); } @media (min-width: 560px) { #spl-app .spl-bg-sq { font-size: 11px; } } /* Trivia: one question at a time, answer shown after you commit. */ #spl-app .spl-tv-body { padding: 0 16px 16px; } #spl-app .spl-tv-q { margin: 0 0 14px; font-size: 16.5px; font-weight: 900; line-height: 1.4; } #spl-app .spl-tv-opts { display: grid; gap: 9px; } #spl-app .spl-tv-o { display: flex; align-items: center; gap: 9px; width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--s2); color: inherit; font: inherit; font-size: 14px; font-weight: 700; text-align: left; cursor: pointer; } #spl-app .spl-tv-o i { flex: none; width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; background: var(--s3); color: var(--mu); font-style: normal; font-size: 11px; font-weight: 900; } #spl-app .spl-tv-o.right { border-color: #35b46a; background: rgba(53,180,106,.14); } #spl-app .spl-tv-o.right i { background: #35b46a; color: #04240f; } #spl-app .spl-tv-o.wrong { border-color: #d94f4f; background: rgba(217,79,79,.13); } #spl-app .spl-tv-o.wrong i { background: #d94f4f; color: #2a0606; } #spl-app .spl-tv-o[disabled] { cursor: default; } #spl-app .spl-tv-after { margin-top: 16px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--s2); font-size: 13px; line-height: 1.5; color: var(--mu); } #spl-app .spl-tv-after b { color: var(--tx); } #spl-app .spl-tv-run { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; } /* Who's That Player: the headshot sharpens a step at a time, so the blur has to be clipped. */ #spl-app .spl-gs-body { padding: 0 16px 16px; } #spl-app .spl-gs-photo { overflow: hidden; width: 176px; height: 176px; margin: 0 auto 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--s2); } #spl-app .spl-gs-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; transition: filter .25s ease; transform: scale(1.06); } #spl-app .spl-gs-more { display: block; width: 100%; margin: 0 0 12px; } #spl-app .spl-gs-body .spl-tv-o { justify-content: center; } /* NFL Tiers: a row of faces per tier, scrolled sideways rather than squeezed. */ #spl-app .spl-ti { padding: 0 16px 16px; } #spl-app .spl-ti-t { margin-bottom: 14px; } #spl-app .spl-ti-t h4 { margin: 0 0 7px; font-size: 11px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; color: var(--mu); } #spl-app .spl-ti-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; } #spl-app .spl-ti-p { flex: none; width: 96px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--s2); color: inherit; font: inherit; cursor: pointer; } #spl-app .spl-ti-p.on { border-color: var(--y); background: rgba(255,199,44,.14); } #spl-app .spl-ti-p[disabled] { cursor: default; opacity: .75; } #spl-app .spl-ti-p img, #spl-app .spl-ti-p i { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; object-position: center 15%; background: var(--s3); } #spl-app .spl-ti-p b { font-size: 11.5px; font-weight: 800; text-align: center; line-height: 1.2; } #spl-app .spl-ti-p small { font-size: 9.5px; color: var(--mu); } #spl-app .spl-ti-p em { font-style: normal; font-size: 12px; font-weight: 900; color: var(--y); font-variant-numeric: tabular-nums; } #spl-app .spl-ti-p span { font-size: 11px; color: var(--mu); font-variant-numeric: tabular-nums; } /* Who's That Player: the clue, shown a line at a time as the photo sharpens. */ #spl-app .spl-gs-clue { margin: 0 0 12px; padding: 9px 12px; border: 1px dashed var(--line); border-radius: 10px; background: var(--s2); font-size: 12.5px; color: var(--mu); text-align: center; } #spl-app .spl-gs-clue b { color: var(--tx); font-weight: 800; } /* Mock Draft: a setup panel, your roster, then the whole board. */ #spl-app .spl-mk-set { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 16px 12px; } #spl-app .spl-mk-f { display: flex; flex-direction: column; gap: 4px; flex: 1 1 150px; } #spl-app .spl-mk-f.sm { flex: 0 0 74px; } #spl-app .spl-mk-f span { font-size: 10.5px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; color: var(--mu); } #spl-app .spl-mk-f select, #spl-app .spl-mk-f input { width: 100%; padding: 8px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--s2); color: var(--tx); font: inherit; font-size: 13.5px; font-weight: 700; } #spl-app .spl-mk-go { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px 16px; } #spl-app .spl-mk-go b { font-size: 13px; color: var(--mu); font-weight: 800; } #spl-app .spl-mk-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 8px; padding: 0 16px 16px; } #spl-app .spl-mk-row { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--s2); } #spl-app .spl-mk-row.bench { opacity: .66; } #spl-app .spl-mk-boards { padding: 0 16px 16px; } #spl-app .spl-mk-col { min-width: 0; } #spl-app .spl-mk-col h5 { margin: 0 0 6px; font-size: 10.5px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; color: var(--mu); } #spl-app .spl-mk-col.me h5 { color: var(--y); } #spl-app .spl-mk-p { display: flex; align-items: baseline; gap: 5px; padding: 4px 6px; margin-bottom: 3px; border: 1px solid var(--line); border-radius: 7px; background: var(--s2); font-size: 11.5px; font-weight: 700; } #spl-app .spl-mk-col.me .spl-mk-p { border-color: rgba(255,199,44,.5); } #spl-app .spl-mk-p i { font-style: normal; font-size: 9px; font-weight: 900; color: var(--y); } #spl-app .spl-mk-p small { margin-left: auto; font-size: 9.5px; color: var(--mu); } /* Mock Draft: the clock strip, the board you pick from, and a roster that uses the width. */ #spl-app .spl-mk-now { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 16px; } #spl-app .spl-mk-now b { font-size: 16px; font-weight: 900; } #spl-app .spl-mk-now span { font-size: 12.5px; color: var(--mu); font-weight: 700; } #spl-app .spl-mk-now.you { background: rgba(255,199,44,.1); border-left: 3px solid var(--y); } #spl-app .spl-mk-now.you b { color: var(--y); } #spl-app .spl-mk-now.done b { color: var(--tx); } #spl-app .spl-mk-clock { margin-left: auto; font-style: normal; font-size: 22px; font-weight: 900; color: var(--y); font-variant-numeric: tabular-nums; } #spl-app .spl-mk-filt { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 16px 10px; } #spl-app .spl-mk-filt button { padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--s2); color: var(--mu); font: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer; } #spl-app .spl-mk-filt button.on { border-color: var(--y); background: rgba(255,199,44,.16); color: var(--tx); } #spl-app .spl-mk-avail { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 7px; padding: 0 16px 16px; max-height: 420px; overflow-y: auto; } #spl-app .spl-mk-av { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--s2); color: inherit; font: inherit; text-align: left; cursor: pointer; } #spl-app .spl-mk-av:active { transform: translateY(1px); } #spl-app .spl-mk-rk { flex: none; width: 26px; font-size: 11px; font-weight: 900; color: var(--mu); font-variant-numeric: tabular-nums; } #spl-app .spl-mk-rd { flex: none; width: 28px; font-size: 11px; font-weight: 900; color: var(--mu); font-variant-numeric: tabular-nums; } #spl-app .spl-mk-av img, #spl-app .spl-mk-row img { flex: none; width: 24px; height: 24px; object-fit: contain; } #spl-app .spl-mk-nologo { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--s3); } #spl-app .spl-mk-nm { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; } #spl-app .spl-mk-nm b { font-size: 13.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #spl-app .spl-mk-nm small { font-size: 10.5px; color: var(--mu); } #spl-app .spl-mk-av em { font-style: normal; font-size: 12px; font-weight: 900; color: var(--y); font-variant-numeric: tabular-nums; } #spl-app .spl-mk-slot { flex: none; font-style: normal; font-size: 9.5px; font-weight: 900; letter-spacing: .06em; color: var(--y); } #spl-app .spl-mk-slot.bench { color: var(--mu); } #spl-app .spl-mk-half { display: grid; gap: 8px; margin-bottom: 10px; } #spl-app .spl-mk-p img { width: 15px; height: 15px; object-fit: contain; flex: none; } #spl-app .spl-mk-p b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; } @media (max-width: 560px) { #spl-app .spl-mk-half { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* Paper Football: a full screen table, the same furniture as the other game overlay. */ #spl-paper { position: fixed; inset: 0; z-index: 9000; background: #0C0E11; } #spl-paper .pf-wrap { position: absolute; inset: 0; display: block; } #spl-paper canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; } /* The bar clears the camera and clock: on a notched phone the safe area pushes it down, and the canvas underneath is told how tall it ended up so the field never starts behind it. */ #spl-paper .pf-bug { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: calc(10px + env(safe-area-inset-top)) calc(52px + env(safe-area-inset-right)) 10px calc(12px + env(safe-area-inset-left)); background: rgba(10,12,15,.82); color: #F3EEE0; font-family: ui-monospace, Menlo, monospace; font-size: 12px; } #spl-paper .pf-side { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 9px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; opacity: .6; } #spl-paper .pf-side.on { opacity: 1; border-color: #FFC72C; } #spl-paper .pf-side em { font-style: normal; font-size: 15px; font-weight: 700; color: #FFC72C; } #spl-paper .pf-mid { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .75; } #spl-paper .pf-row { width: 100%; display: flex; align-items: center; justify-content: center; gap: 14px; } #spl-paper .pf-row2 { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; opacity: .8; text-align: center; } /* The fourth down choice sits on the field rather than behind a modal, so you can see what you are weighing up while you decide. */ #spl-paper .pf-act { position: absolute; left: 0; right: 0; bottom: calc(54px + env(safe-area-inset-bottom)); z-index: 3; display: none; justify-content: center; padding: 0 16px; pointer-events: none; } #spl-paper .pf-act.on { display: flex; } #spl-paper .pf-actb { pointer-events: auto; padding: 11px 18px; border: 2px solid #FFC72C; border-radius: 999px; background: rgba(10,12,15,.9); color: #FFC72C; font: inherit; font-family: ui-monospace, Menlo, monospace; font-size: 13px; font-weight: 700; cursor: pointer; } #spl-paper .pf-lv { display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; margin: 0 0 16px; } #spl-paper .pf-lvb { padding: 8px 14px; border: 2px solid rgba(255,255,255,.22); border-radius: 999px; background: transparent; color: #C9C2B2; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } #spl-paper .pf-lvb.on { border-color: #FFC72C; background: #FFC72C; color: #141000; } /* Wraps inside the screen: at 20px fixed, "Drag back off the ball and let go." ran off both edges of a phone. */ #spl-paper .pf-msg { box-sizing: border-box; position: absolute; left: 0; right: 0; top: 46%; z-index: 3; padding: 0 20px; text-align: center; font-family: ui-monospace, Menlo, monospace; font-size: clamp(15px, 4.6vw, 20px); font-weight: 700; line-height: 1.3; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.8); opacity: 0; transition: opacity .18s; pointer-events: none; } #spl-paper .pf-msg.on { opacity: 1; } #spl-paper .pf-panel { position: absolute; inset: 0; z-index: 4; display: none; align-items: center; justify-content: center; padding: 22px; background: rgba(8,10,13,.86); } #spl-paper .pf-panel.on { display: flex; } #spl-paper .pf-end { width: 100%; max-width: 360px; padding: 22px; border: 2px solid #FFC72C; border-radius: 16px; background: #14161A; color: #F3EEE0; text-align: center; } #spl-paper .pf-end h3 { margin: 0 0 10px; font-family: "Permanent Marker", "Bradley Hand", "Segoe Print", cursive; font-size: 25px; font-weight: 400; letter-spacing: .01em; color: #FFF8E7; } #spl-paper .pf-end p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.55; color: #C9C2B2; } #spl-paper .pf-btns { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; } #spl-paper .pf-btn { padding: 11px 20px; border: 0; border-radius: 10px; background: #FFC72C; color: #141000; font: inherit; font-size: 14px; font-weight: 900; cursor: pointer; } #spl-paper .pf-btn.ghost { background: transparent; border: 2px solid rgba(255,255,255,.3); color: #F3EEE0; } #spl-paper .pf-quit { position: absolute; top: calc(8px + env(safe-area-inset-top)); right: calc(10px + env(safe-area-inset-right)); z-index: 5; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; font-size: 19px; line-height: 1; cursor: pointer; }