/* Ligazo — the brand theme, built exclusively from the Brand Sheet v1.0. Rosso #C8342A carries action, self, victory, the market, the cup — the golazo moment. Fields are crema/nero; ink is inchiostro. Positions ride a tonal ink ramp (GK darkest → FWD outlined). One gesture: the diagonal cut. */ @font-face { font-family: "Anton"; src: url("fonts/Anton-400.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Archivo"; src: url("fonts/Archivo-600.woff2") format("woff2"); font-weight: 600; font-display: swap; } @font-face { font-family: "Archivo"; src: url("fonts/Archivo-700.woff2") format("woff2"); font-weight: 700; font-display: swap; } @font-face { font-family: "Archivo"; src: url("fonts/Archivo-800.woff2") format("woff2"); font-weight: 800; font-display: swap; } @font-face { font-family: "Instrument Sans"; src: url("fonts/InstrumentSans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Instrument Sans"; src: url("fonts/InstrumentSans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; } @font-face { font-family: "Instrument Sans"; src: url("fonts/InstrumentSans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; } :root { color-scheme: light; /* — surfaces — */ --bg: #F5F3EE; /* crema — the field */ --card: #FCFBF8; --panel: #ECEAE1; /* sunken row / chip */ --panel-hi: #E7E4DA; /* hover / raised mid */ --panel-bench: #EFEDE6; /* recessed bench */ --panel-lk: #E4E0D4; /* locked / greyed row */ --inset: #EFECE4; /* inset track / disabled fill */ --sel: #F7EEEA; /* your-row tint (select / drop) */ --gl: #DDD8CB; /* thin guides, goal lines */ /* — ink — */ --fg: #17150F; /* inchiostro */ --muted: #6B6963; --faint: #8B887F; --ink2: #55524A; /* secondary ink */ --dim: #A8A396; /* dimmed / disabled / struck text */ --onaccent: #FCFBF8; /* text / marks on a colour fill */ --line: #E5E2DA; --line2: #D8D4C8; /* stronger divider */ /* — brand & state — */ --accent: #C8342A; /* rosso — action, self, the Z */ --accent2: #C8342A; /* gold retired: rosso reigns */ --live: #E4573F; /* rosso chiaro — scores in motion */ --mine: #F6E8E4; /* rosso-washed crema — your rows */ --mine-line: #E7C6C2; --emph-bg: #141310; /* near-black content chip / tooltip */ --emph-fg: #F2EFE6; /* text on emphasis surfaces */ --press: #17150F; /* pressed/active state of an accent control */ --prov-bg: #FDF3F0; --prov-line: #F1DAD4; --prov-fg: #7A5A52; /* provisional bar */ --win-band: #D5BBB3; --tagdark: #2E2B24; /* highlight tag inside the tooltip */ --gk: #C4841D; --def: #1E5C9E; --mid: #0E6B4A; --fwd: #46265B; --heads: "Archivo", system-ui, sans-serif; --body: "Instrument Sans", system-ui, sans-serif; --logo: "Anton", sans-serif; } /* Dark mode. base.html stamps data-theme (system pref, or the saved override) onto before paint, so the whole palette is one variable flip — every hard-coded shade was already lifted into the vars above. Emphasis surfaces invert (near-black chip → light chip); pressed accent states stay dark. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #16130E; --card: #201C15; --panel: #232019; --panel-hi: #2E2A22; --panel-bench: #1C1913; --panel-lk: #18150F; --inset: #13100B; --sel: #33201A; --gl: #2E2A21; --fg: #ECE7DD; --muted: #A19C91; --faint: #7C766B; --ink2: #C9C4B8; --dim: #6F6A61; --onaccent: #F6F2EB; --line: #302B23; --line2: #3A352C; --accent: #D8443A; --accent2: #D8443A; --live: #E4573F; --mine: #2E1A14; --mine-line: #573129; --emph-bg: #E8E3D9; /* inverts: light chip on the dark field */ --emph-fg: #17140F; --press: #2E2820; /* stays dark: pressed red-button state */ --prov-bg: #2A1712; --prov-line: #47291F; --prov-fg: #D7A99D; --win-band: #6B453C; --tagdark: #D6D0C4; --gk: #D6961F; --def: #2E74BE; --mid: #17915F; --fwd: #6C4A96; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--fg); font: 15.5px/1.5 var(--body); } main { max-width: 1080px; margin: 0 auto; padding: 1.2rem 1.3rem 4.5rem; } /* the draft room is a data-dense page: give the board room to show all ten columns without a horizontal scroll */ main.dr-wide { max-width: 1600px; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 2px; } h1 { font-family: var(--heads); font-weight: 800; font-size: 1.55rem; letter-spacing: -.01em; margin: 1.1rem 0 .8rem; text-wrap: balance; } h2 { font-family: var(--heads); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .13em; color: var(--fg); margin: 2.2rem 0 .7rem; } h1 small, h2 small, h3 small { font-family: var(--body); color: var(--muted); font-weight: 400; font-size: .72em; text-transform: none; letter-spacing: 0; } .muted { color: var(--muted); } .hint { color: var(--muted); font-size: .88rem; max-width: 68ch; } /* ---- the brand mark (cut caps + bladed L) ---- */ .brandmark { display: inline-flex; align-items: center; gap: .42em; line-height: 1; } .brandmark .bl { width: .74em; height: .87em; background: var(--accent); flex: none; clip-path: polygon(0 0, 42% 14%, 42% 60%, 100% 60%, 88% 100%, 0 100%); } .brandmark .wm { display: flex; gap: .045em; font-family: var(--logo); font-weight: 400; color: var(--fg); } .brandmark .wm span { display: inline-block; } .brandmark .c-l { clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%, 0 16%); } .brandmark .c-g { clip-path: polygon(0 0, 100% 0, 100% 100%, 16% 100%, 0 84%); } .brandmark .c-a { clip-path: polygon(0 0, 80% 0, 100% 24%, 100% 100%, 0 100%); } .brandmark .c-z { color: var(--accent); clip-path: polygon(14% 0, 100% 0, 100% 86%, 86% 100%, 0 100%, 0 14%); } .brandmark .c-o { clip-path: polygon(0 0, 84% 0, 100% 20%, 100% 100%, 0 100%); } /* ---- chrome ---- */ .strip { background: var(--card); border-bottom: 1px solid var(--line); padding: .38rem 1.3rem; font-size: .82rem; color: var(--muted); display: flex; gap: 1.2rem; font-family: var(--heads); font-weight: 600; } .strip .window { color: var(--accent); font-weight: 800; letter-spacing: .08em; } .banner { background: var(--accent); color: var(--onaccent); padding: .55rem 1.3rem; font-family: var(--heads); font-weight: 700; } /* read-only demo strip (ligazo.app/demo): a meta-bar above the app chrome */ .demobar { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; background: var(--fg); color: var(--bg); padding: .5rem 1.3rem; font-family: var(--heads); font-size: .9rem; } .demobar-tag { background: var(--accent); color: var(--onaccent); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; padding: .12rem .5rem; border-radius: 3px; } .demobar-txt { opacity: .92; } .demobar-cta { margin-left: auto; color: var(--bg); font-weight: 800; white-space: nowrap; border-bottom: 2px solid var(--accent); } .demobar-cta:hover { color: #fff; text-decoration: none; border-bottom-color: #fff; } @media (max-width: 560px) { .demobar-txt { flex: 1 1 100%; order: 3; font-size: .82rem; opacity: .8; } } nav { display: flex; gap: 1.15rem; align-items: center; padding: .75rem 1.3rem; border-bottom: 2px solid var(--fg); background: var(--card); } nav a { color: var(--fg); font-family: var(--heads); font-weight: 600; font-size: .92rem; } nav a:hover { color: var(--accent); text-decoration: none; } nav .nav-short { display: none; } /* Rules sits in the bar on desktop, so its avatar-menu twin hides here. This MUST stay above the mobile block: same specificity, so source order decides — putting it after silently beat the override and left Rules unreachable on phones. */ .avpop .avrules { display: none; } /* NOTE: mobile overrides live in ONE block below. Do not add a second @media for nav elsewhere in this file — a later rule of equal specificity silently wins, which has already killed three overrides here. */ @media (max-width: 640px) { /* One line, no wrap, no sideways scroll: short labels, and the brand collapses to its blade mark (the wordmark alone ate ~45px). Gap/font scale with the viewport so a 375px SE doesn't overflow while a 430px Max still gets air. */ nav { gap: clamp(.5rem, 2.6vw, .95rem); padding: .5rem clamp(.45rem, 2vw, .8rem); flex-wrap: nowrap; } nav a { font-size: clamp(.74rem, 3.1vw, .84rem); white-space: nowrap; padding: 6px 0; } /* taller tap target, costs no width */ nav .nav-full { display: none; } nav .nav-short { display: inline; } /* Rules is OUT of the bar again: adding the Score Center tab took the width it was using, and 7 tabs cannot fit 375px without shrinking tap targets. It moves into the avatar menu — reference material, not a daily tab. */ nav .navrules { display: none; } .avpop .avrules { display: block; } nav .brand { flex: none; font-size: 1.15rem; padding: 6px 9px; margin: 0 -3px; } /* the blade needs a real tap area */ nav .brand .wm { display: none; } /* blade only; the wordmark ate ~45px */ nav .av { width: 27px; height: 27px; font-size: .74rem; } } nav .brand { font-size: 1.05rem; } nav .brand:hover .wm { color: var(--fg); } nav .spacer { flex: 1; min-width: 0; } nav a.on { color: var(--accent); } /* the profile circle: username + admin live behind it (zero-JS
) */ .avmenu { position: relative; flex: none; } .avmenu > .av { list-style: none; cursor: pointer; width: 29px; height: 29px; border-radius: 50%; border: 1.5px solid var(--fg); display: flex; align-items: center; justify-content: center; font-family: var(--heads); font-weight: 800; font-size: .82rem; color: var(--fg); background: var(--crema, transparent); user-select: none; } .avmenu > .av::-webkit-details-marker { display: none; } .avmenu > .av:hover, .avmenu[open] > .av, .avmenu > .av.on { background: var(--accent); border-color: var(--accent); color: var(--onaccent); } .avpop { position: absolute; top: calc(100% + .5rem); right: 0; z-index: 40; min-width: 9.5rem; background: var(--card); border: 1.5px solid var(--fg); border-radius: 8px; padding: .45rem; display: flex; flex-direction: column; gap: .1rem; box-shadow: 0 6px 18px rgba(20,19,16,.16); } .avpop .avwho { font-family: var(--heads); font-weight: 800; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: .2rem .45rem .3rem; border-bottom: 1px solid var(--line, #e6e1d8); margin-bottom: .2rem; white-space: nowrap; } .avpop a { display: block; padding: .34rem .45rem; border-radius: 5px; font-size: .86rem; white-space: nowrap; } .avpop a:hover { background: var(--accent); color: var(--onaccent); } /* unread badge overlaid on the avatar (messages now; any notification later) */ .av-badge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--accent); color: #fff; font-family: var(--heads); font-weight: 800; font-size: 10px; line-height: 15px; text-align: center; border: 1.5px solid var(--card); box-sizing: border-box; } .avpop .av-mnum { float: right; min-width: 17px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-weight: 800; font-size: 11px; text-align: center; } .avpop a:hover .av-mnum { background: #fff; color: var(--accent); } /* ---- direct messages: inbox ---- */ .dm-inbox { padding: 0; overflow: hidden; } .dm-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--line); } .dm-row:last-child { border-bottom: none; } .dm-row:hover { background: var(--mine); } .dm-av { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--fg); color: var(--bg); display: flex; align-items: center; justify-content: center; font-family: var(--heads); font-weight: 800; } .dm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .dm-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; } .dm-name { font-family: var(--heads); font-weight: 700; font-size: 15px; } .dm-ts { font-size: 11.5px; color: var(--muted); flex: none; } .dm-prev { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dm-row.unread .dm-prev { color: var(--fg); font-weight: 600; } .dm-row.unread .dm-name { color: var(--accent); } .dm-badge { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 800; font-size: 11px; display: flex; align-items: center; justify-content: center; } /* ---- direct messages: thread ---- */ .dm-head { display: flex; align-items: center; gap: 12px; margin: 1rem 0 .8rem; } .dm-back { font-size: 22px; color: var(--fg); text-decoration: none; line-height: 1; } .dm-h { font-family: var(--logo); font-size: 24px; text-transform: uppercase; line-height: 1; } .dm-h small { display: block; font-family: var(--body); font-size: 12px; text-transform: none; color: var(--muted); font-weight: 400; margin-top: 2px; letter-spacing: normal; } .dm-teamlink { margin-left: auto; font-family: var(--heads); font-weight: 700; font-size: 12px; color: var(--accent); text-decoration: none; white-space: nowrap; } .dm-thread { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px 14px; max-height: 62vh; overflow-y: auto; } .dm-msg { max-width: 78%; align-self: flex-start; background: var(--mine); border-radius: 12px; padding: 8px 12px; } .dm-msg.me { align-self: flex-end; background: var(--accent); color: var(--onaccent); } .dm-b { display: block; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; } .dm-t { display: block; font-size: 10.5px; opacity: .6; margin-top: 3px; text-align: right; } .dm-empty { text-align: center; padding: 2rem 0; } .dm-form { display: flex; gap: 8px; margin-top: 8px; } .dm-form input { flex: 1; min-width: 0; } /* ---- profile popover (click an @user) ---- */ .umodal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; } /* above the banter dock (60) */ .umodal[hidden] { display: none; } /* the class's display:flex would defeat [hidden] */ .uchip { cursor: pointer; } /* any clickable user name -> profile popover */ .umodal-back { position: absolute; inset: 0; background: rgba(20,18,12,.5); } .umodal-card { position: relative; background: var(--card); border-radius: 16px; padding: 26px 26px 22px; width: 100%; max-width: 320px; text-align: center; box-shadow: 0 12px 40px rgba(20,18,12,.3); } .umodal-x { position: absolute; top: 8px; right: 12px; border: none; background: none; font-size: 24px; color: var(--muted); cursor: pointer; line-height: 1; } .umodal-av { width: 60px; height: 60px; border-radius: 50%; background: var(--accent); color: var(--onaccent); font-family: var(--heads); font-weight: 800; font-size: 26px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; } .umodal-team { font-family: var(--logo); font-size: 22px; text-transform: uppercase; line-height: 1.1; } .umodal-name { font-size: 13px; color: var(--muted); margin-top: 3px; } .umodal-acts { display: flex; gap: 10px; margin-top: 18px; } .umodal-btn { flex: 1; padding: 10px; border-radius: 8px; font-family: var(--heads); font-weight: 700; font-size: 14px; text-decoration: none; text-align: center; cursor: pointer; border: 1.5px solid var(--fg); color: var(--fg); } .umodal-btn.primary { background: var(--accent); color: var(--onaccent); border-color: var(--accent); } .umodal-btn:hover { border-color: var(--accent); color: var(--accent); } .umodal-btn.primary:hover { color: var(--onaccent); background: #A82A22; } .avpop .avtheme { display: block; width: 100%; text-align: left; background: none; border: none; border-top: 1px solid var(--line); margin-top: .18rem; padding: .4rem .45rem .34rem; font: inherit; font-size: .86rem; color: inherit; white-space: nowrap; cursor: pointer; border-radius: 5px; } .avpop .avtheme:hover { background: var(--accent); color: var(--onaccent); } .avtheme .when-dark { display: none; } :root[data-theme="dark"] .avtheme .when-light { display: none; } :root[data-theme="dark"] .avtheme .when-dark { display: inline; } nav a.drlive { color: var(--accent); font-weight: 800; } nav a.drlive::after { content: "●"; font-size: .6em; vertical-align: 2px; margin-left: 4px; animation: drpulse 1.6s ease-in-out infinite; } @keyframes drpulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } .flash { max-width: 1080px; margin: .7rem auto 0; padding: 0 1.3rem; } .flash div { background: var(--card); border: 1.5px solid var(--accent); border-radius: 8px; padding: .5rem .85rem; font-size: .92rem; margin-bottom: .3rem; } /* ---- tables ---- */ table { border-collapse: collapse; width: 100%; } td, th { padding: .4rem .55rem; text-align: left; border-bottom: 1px solid var(--line); } th { font-family: var(--heads); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); font-weight: 700; } .num { text-align: right; font-variant-numeric: tabular-nums; } tr.mine { background: var(--mine); box-shadow: inset 3px 0 0 var(--accent); } tr.muted td { color: var(--muted); } .standings { max-width: 520px; } .pname { font-weight: 500; } .pname small { color: var(--muted); display: block; font-size: .75rem; font-weight: 400; } .playerlist .pname { font-weight: 600; } .pager { margin-right: 1rem; font-size: .9rem; font-family: var(--heads); font-weight: 600; } /* ---- cards ---- */ .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(305px, 1fr)); gap: 1rem; } .card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .9rem 1rem; } .card h3 { margin: 0 0 .55rem; font-family: var(--heads); font-weight: 800; font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; } .card table td { border-bottom: 1px solid var(--line); padding: .3rem .3rem; } .card tr:last-child td { border-bottom: none; } tr.nominated { background: var(--mine); } tr.nominated .pname::after { content: " ©"; color: var(--accent); font-weight: 800; } tr.queued { background: var(--mine); box-shadow: inset 0 0 0 1px var(--accent); } tr.queued .pname::after { content: " ©?"; color: var(--accent); font-weight: 800; } tr.benchrow td { opacity: .42; } tr.benchrow .pname::after { content: " (sits)"; color: var(--muted); font-size: .75rem; } .colhead th { font-size: .62rem; color: var(--faint); border-bottom: none; padding: 0 .3rem; } /* ---- chips, pips, positions: the tonal ink ramp ---- */ .pos { font-family: var(--heads); font-size: .66rem; font-weight: 800; padding: .12rem .38rem; letter-spacing: .05em; color: var(--onaccent); clip-path: polygon(12% 0, 100% 0, 100% 82%, 88% 100%, 0 100%, 0 18%); } .pos-GK { background: var(--gk); } .pos-DEF { background: var(--def); } .pos-MID { background: var(--mid); } .pos-FWD { background: var(--fwd); } .pos-TBD { background: var(--faint); } .chip { font-size: .66rem; font-family: var(--heads); font-weight: 600; border: 1px solid var(--line); border-radius: 4px; padding: 0 .32rem; color: var(--muted); vertical-align: middle; } .chip.cap { border-color: var(--accent); color: var(--accent); font-weight: 800; } .pips { font-size: .68rem; letter-spacing: .12em; color: var(--accent); white-space: nowrap; } /* the one place the site admits its numbers aren't final yet */ .provbar { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 7px 16px; background: var(--prov-bg); border-bottom: 1px solid var(--prov-line); font-size: 12.5px; color: var(--prov-fg); } .provbar .prov { position: relative; padding-left: 13px; } .provbar .prov::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--live); animation: drpulse 1.6s ease-in-out infinite; } .prov { color: var(--live); font-weight: 800; font-family: var(--heads); letter-spacing: .05em; } .tick input { transform: scale(1.2); accent-color: var(--accent); } /* ---- feed ---- */ .feed { list-style: none; padding: 0; max-width: 660px; } .feed li { padding: .34rem 0; border-bottom: 1px solid var(--line); font-size: .92rem; } .feed .wk { color: var(--faint); font-family: var(--heads); font-weight: 700; font-size: .72rem; margin-right: .55rem; text-transform: uppercase; } /* ---- forms & buttons ---- */ .filters { display: flex; gap: .5rem; margin: .9rem 0; flex-wrap: wrap; align-items: center; } .filters select, .filters input, .login input, .rowform select, .rowform input { font: inherit; padding: .4rem .65rem; border: 1.5px solid var(--line); border-radius: 7px; background: var(--card); color: var(--fg); } .filters select:focus, .filters input:focus, .login input:focus, .rowform select:focus, .rowform input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } button.primary, .filters button, .login button { font-family: var(--heads); font-weight: 700; font-size: .9rem; background: var(--accent); color: var(--onaccent); border: none; padding: .48rem 1.05rem; cursor: pointer; letter-spacing: .02em; clip-path: polygon(4% 0, 100% 0, 100% 78%, 96% 100%, 0 100%, 0 22%); } button.primary:hover, .filters button:hover, .login button:hover { background: #A82A22; } button.linklike { background: none; border: none; color: var(--accent); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; text-underline-offset: 2px; } form.inline { display: inline; } .rowform { display: flex; gap: .4rem; align-items: center; padding: .45rem 0; flex-wrap: wrap; font-size: .88rem; } .rowform .rf-hd, .rowform .rf-lbl { display: none; } /* only in the mobile popover */ .rowform .rf-row { display: contents; } /* fields flow inline on desktop */ .rf-price { display: inline-flex; align-items: center; gap: 4px; } .rf-price input { width: 5em; } .rf-price i { font-style: normal; color: var(--muted); font-size: .82rem; } .act details summary { cursor: pointer; list-style: none; display: inline-block; background: var(--accent); color: var(--onaccent); transform: skewX(-14deg); padding: 6px 12px; font-family: var(--logo); font-size: 10px; letter-spacing: .08em; line-height: 1; -webkit-font-smoothing: antialiased; } .act details summary::-webkit-details-marker { display: none; } .act details summary:hover { background: #A62A22; } .act details[open] summary { background: var(--press); } /* ---- login & ratification ---- */ .login { max-width: 400px; margin: 13vh auto; text-align: center; } .login .brandmark { font-size: 2.6rem; margin-bottom: .4rem; } .login h1 { margin: .4rem 0; } .login form { display: flex; gap: .5rem; justify-content: center; margin-top: 1rem; } .rulecard { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 1.1rem 1.3rem; max-width: 720px; line-height: 1.6; } .constitution h2 { margin-top: 1.5rem; } .constitution ul { padding-left: 1.2rem; } .constitution li { margin-bottom: .35rem; max-width: 70ch; } .ratbox { background: var(--card); border: 2px solid var(--accent); border-radius: 10px; padding: 1rem 1.15rem; margin-bottom: 1.3rem; max-width: 720px; } .ratbox form { margin-bottom: .6rem; display: flex; gap: .8rem; align-items: center; } .ratroster { max-width: 380px; margin-top: .5rem; } .ratroster td { border: none; padding: .16rem .4rem; font-size: .9rem; } /* ---- activity feed (Cole's Claude Design component, 2026-07-10) ---- */ .af-row { display: grid; grid-template-columns: 48px 62px 1fr; align-items: center; min-height: 42px; padding: 4px 0; border-bottom: 1px solid var(--panel); } .af-row.last { border-bottom: none; } .af-row.you { background: var(--inset); } .af-wk { font-family: var(--heads); font-weight: 700; font-size: 10px; letter-spacing: .12em; color: var(--dim); } .af-claim { background: var(--emph-bg); color: var(--emph-fg); } .af-arm { background: var(--panel); color: var(--ink2); } .af-text { line-height: 1.45; padding-right: 8px; font-size: 14.5px; } .af-text span { font-variant-numeric: tabular-nums; } .af-mgr { font-weight: 600; color: var(--fg); } .af-plyr { font-weight: 500; color: var(--fg); } .af-x { color: var(--ink2); } .af-mut { color: var(--muted); } .af-num { font-weight: 600; color: var(--fg); } .af-pts { font-family: var(--heads); font-weight: 700; font-size: 12px; color: var(--accent); } @media (max-width: 640px) { .af-row { grid-template-columns: 40px 58px 1fr; } } /* ---- draft autopilot toggle ---- */ .autopilot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--card); border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 14px; margin: 0 0 1rem; } .autopilot.on { border-color: var(--accent); } /* status light: dim/grey when off, lit + glowing when Auto Draft is on */ .dr-auto-light { flex: 0 0 auto; width: 13px; height: 13px; border-radius: 50%; background: var(--dim); box-shadow: inset 0 0 2px rgba(0,0,0,.35); transition: background .2s ease, box-shadow .2s ease; } .autopilot.on .dr-auto-light { background: var(--accent); animation: dr-auto-pulse 1.8s ease-out infinite; } @keyframes dr-auto-pulse { 0% { box-shadow: 0 0 7px 1px rgba(200, 52, 42, .8), 0 0 0 0 rgba(200, 52, 42, .5); } 70% { box-shadow: 0 0 7px 1px rgba(200, 52, 42, .8), 0 0 0 6px rgba(200, 52, 42, 0); } 100% { box-shadow: 0 0 7px 1px rgba(200, 52, 42, .8), 0 0 0 0 rgba(200, 52, 42, 0); } } @media (prefers-reduced-motion: reduce) { .autopilot.on .dr-auto-light { animation: none; box-shadow: 0 0 7px 1px rgba(200, 52, 42, .8); } } .autopilot form { display: flex; align-items: center; gap: 10px; } .autopilot small { color: var(--muted); } /* ---- "rules that trip you up" — the cross-page nudge + its page ---- */ /* a topbar that lets the gotcha link ride the RIGHT edge of a heading/toggle row without disturbing what's already there. Wraps under on narrow screens. */ .pg-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; } .pg-topbar > h1 { margin: 0; } .pg-topbar .modetoggle { margin: 0; } .gotcha-row { margin: -.4rem 0 1rem; } /* team page: its own quiet line */ /* the link itself: a small skewed pill — the brand's diagonal-cut gesture. Quiet by default (faint rosso wash + hairline), fills rosso on hover. */ .gotcha-link { display: inline-flex; align-items: center; gap: 6px; flex: none; transform: skewX(-14deg); padding: 5px 12px; background: var(--sel); border: 1.5px solid var(--mine-line); text-decoration: none; transition: background .12s ease, border-color .12s ease; } .gotcha-link > * { transform: skewX(14deg); } /* un-skew the contents */ .gotcha-link span { font-family: var(--heads); font-weight: 800; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); -webkit-font-smoothing: antialiased; } .gotcha-link svg { width: 13px; height: 13px; color: var(--accent); flex: none; } .gotcha-link:hover { background: var(--accent); border-color: var(--accent); text-decoration: none; } .gotcha-link:hover span, .gotcha-link:hover svg { color: var(--onaccent); } .gotcha-lede { max-width: 720px; margin: 0 0 20px; color: var(--muted); font-size: .95rem; line-height: 1.55; } .gotcha-lede a { color: var(--accent); } /* the trip-ups bullets reuse the rules .rb/.tick styling; give them more air */ .gotcha-card .gotcha-list { gap: 16px; } /* ---- admin: the shareable open-join link ---- */ .join-card { max-width: 640px; margin: 14px 0 4px; padding: 14px 16px; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; } .join-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; } .join-head > span:first-child { font-family: var(--heads); font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; } .join-seats { font-size: 12px; color: var(--muted); } .join-url { width: 100%; box-sizing: border-box; margin: 8px 0 6px; padding: 8px 10px; font-family: var(--body); font-size: 12.5px; color: var(--ink2); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; } /* ---- rules card (Cole's Claude Design format, 2026-07-10) ---- */ .rules-card { max-width: 980px; padding: 28px 36px 32px; } .rules-card .rh { display: flex; align-items: center; gap: 10px; margin: 40px 0 16px; font-family: var(--logo); font-size: 19px; letter-spacing: .045em; color: var(--fg); line-height: 1; text-transform: uppercase; -webkit-font-smoothing: antialiased; } /* banner headings break the page into big centred movements (The Big Picture, The Details); the peer sections between them stay left-aligned. Equal specificity to the base .rh above, so this MUST stay after it to win. */ .rules-card .rh-banner { justify-content: center; font-size: 27px; letter-spacing: .03em; margin: 56px 0 24px; } .rules-card .rh:first-child { margin-top: 0; } /* The Big Picture opens the card */ .rules-card .rh .bl { width: 15px; height: 18px; background: var(--accent); flex: none; clip-path: polygon(0 0, 42% 14%, 42% 60%, 100% 60%, 88% 100%, 0 100%); } .rules-card .rbs { display: flex; flex-direction: column; gap: 13px; max-width: 720px; } .rules-card .rb { display: flex; gap: 12px; } .rules-card .rb .tick { width: 5px; height: 14px; background: var(--accent); transform: skewX(-14deg); flex: none; margin-top: 4px; } .rules-card .rb > span:last-child, .rules-card .rp { font-size: 14.5px; line-height: 1.65; color: var(--ink2); } .rules-card .rp { max-width: 720px; margin: 0 0 13px; } .rules-card strong { font-weight: 600; color: var(--fg); } @media (max-width: 640px) { .rules-card { padding: 18px 16px 22px; } } /* ---- scoring matrix (Cole's Claude Design table, 2026-07-10) ---- */ .mx { border-collapse: collapse; margin: .3rem 0 .6rem; max-width: 780px; width: 100%; } .mx th { font-family: var(--heads); font-weight: 700; font-size: 10px; letter-spacing: .14em; color: var(--muted); text-align: right; padding: 0 10px 10px 0; border-bottom: 1px solid var(--panel-lk); width: 64px; } .mx td { height: 40px; padding: 0 10px 0 0; border-bottom: 1px solid var(--panel); text-align: right; font-size: 13.5px; color: var(--fg); font-variant-numeric: tabular-nums; font-weight: 600; } .mx tr:last-child td { border-bottom: none; } .owner.mine { color: var(--accent); font-weight: 700; } .mx td.act { text-align: left; font-weight: 400; color: var(--ink2); font-size: 14.5px; padding: 0 12px 0 0; width: auto; } .mx td.neg { color: var(--accent); } .mx td.na { color: var(--dim); font-weight: 400; } /* ---- rules hero ---- */ .rules-hero { display: flex; align-items: center; gap: .32em; margin: .8rem 0 1.5rem; font-family: var(--logo); font-size: clamp(2.2rem, 6vw, 3rem); letter-spacing: .04em; color: var(--fg); line-height: 1; } .rules-hero .bl { width: .72em; height: .85em; background: var(--accent); flex: none; clip-path: polygon(0 0, 42% 14%, 42% 60%, 100% 60%, 88% 100%, 0 100%); } /* ---- draft progress strip (league home, preseason) ---- */ .stl-band.dvseg > span { font-size: 9.5px; letter-spacing: .1em; white-space: nowrap; } .stl-band.dvseg i { font-style: normal; } .stl-band.dvseg .ls { display: none; } .stl-band.dvseg.live { background: var(--accent); } .stl-band.dvseg.live > span { color: var(--onaccent); } .stl-band.dvseg.done { background: var(--dim); } .stl-band.dvseg.done > span { color: var(--emph-fg); } .stl-band.dvseg.upcoming { border: 1.5px solid var(--fg); } .stl-band.dvseg.upcoming > span { color: var(--fg); } .stl-axis .dv-start { transform: none; } .stl-today { pointer-events: none; } /* ---- roster zones (My Team drag-and-drop, 2026-07-10) ---- */ /* the key: what the row colours mean */ .ro-key { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 1rem; font-size: .8rem; color: var(--muted); } .ro-key > span { display: inline-flex; align-items: center; gap: 7px; } .ro-key i { flex: none; width: 16px; height: 16px; border-radius: 4px; font-style: normal; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; } .ro-key .k-cap { background: var(--accent); color: var(--onaccent); font-family: var(--logo); font-weight: 400; } /* ---- roster selector (Ligazo Roster Selector, ported 2026-07-13) ---- tap two players to swap them; the C sets the captain. No drag: it never worked on touch without a long-press hack, and a tap is one gesture. */ .rs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 5px; } .rs-head h3 { margin: 0; } /* a league with no fixtures this week is greyed out — dead roster this week, obvious at a glance */ .rocard.not-live { opacity: .6; } .rocard.not-live .rs-zone, .rocard.not-live .ro-list, .rocard.not-live .rs-div { filter: grayscale(.7); } .rs-off { display: inline-flex; align-items: center; height: 16px; padding: 0 7px; margin-left: 8px; border-radius: 4px; font-family: var(--heads); font-size: 10px; font-weight: 800; letter-spacing: .05em; background: var(--panel-lk); color: var(--muted); vertical-align: 2px; } /* per-league status chips on the team card: LIVE (in play) / UPCOMING (fixtures set) */ .rs-on, .rs-up { display: inline-flex; align-items: center; height: 16px; padding: 0 7px; margin-left: 8px; border-radius: 4px; font-family: var(--heads); font-size: 10px; font-weight: 800; letter-spacing: .05em; vertical-align: 2px; } .rs-on { background: #1f7a4d; color: #fff; } .rs-up { background: var(--panel-lk); color: var(--accent); border: 1px solid var(--accent); } /* week label: date range + the CURRENT-week badge, so you always know where you are */ .wk-dates { font-style: normal; color: var(--muted); font-weight: 600; } .wk-cur { font-style: normal; color: #1f7a4d; font-weight: 800; letter-spacing: .05em; } .rs-legend { display: inline-flex; align-items: center; gap: 6px; font-family: var(--heads); font-weight: 800; font-size: 11px; letter-spacing: .16em; color: var(--fg); } .rs-legend i { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 5px; background: var(--accent); color: var(--onaccent); font-family: var(--logo); font-style: normal; font-size: 10px; line-height: 1; } .rs-hint { font-size: 12.5px; color: var(--faint); margin: 0 0 16px; min-height: 16px; transition: color .2s; } .rs-hint.on { color: var(--accent); } /* the row's fixed columns total ~244px; cards sit side by side, so a WIDE viewport can still leave a 300px card and crush the name to "Ju...". Size the row off the card (container query), never off the viewport. */ .rocard { container-type: inline-size; } .rs-zone { display: flex; flex-direction: column; gap: 8px; min-height: 40px; } .rs-div { display: flex; align-items: center; gap: 12px; margin: 14px 2px 12px; font-family: var(--heads); font-weight: 700; font-size: 10px; letter-spacing: .2em; color: var(--dim); } .rs-div::before, .rs-div::after { content: ""; flex: 1; height: 0; border-top: 1px solid var(--panel-lk); } /* ---- another manager's profile: standings bar + offer buttons on his roster ---- */ .mgr-stats { display: flex; flex-wrap: wrap; gap: 8px 30px; margin: 0 0 14px; padding: 12px 18px; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; } .mgr-stats .ms { display: flex; align-items: baseline; gap: 8px; } .mgr-stats .msl { font-family: var(--heads); font-weight: 700; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-style: normal; } .mgr-stats .ms b { font-family: var(--logo); font-size: 20px; color: var(--fg); line-height: 1; } .mgr-stats .ms b sup { font-size: 10px; } .mgr-stats .ms em { font-style: normal; font-size: 12.5px; color: var(--muted); } /* the offer control sits in a 6th column on an opponent's row */ /* drop the kickoff column on an offer row — it reserved ~60px (often empty) and crushed the name; the name + season points + offer button matter more here */ .rs-row.ro { grid-template-columns: 44px minmax(0, 1fr) 36px 18px 54px; column-gap: 8px; } .rs-row.ro .rs-ko { display: none; } .ro-offer { position: relative; justify-self: end; } .ro-offer > summary { list-style: none; cursor: pointer; display: inline-block; background: var(--accent); color: var(--onaccent); transform: skewX(-14deg); transform-origin: right center; padding: 5px 10px; font-family: var(--logo); font-size: 10px; letter-spacing: .07em; line-height: 1; -webkit-font-smoothing: antialiased; } .ro-offer > summary::-webkit-details-marker { display: none; } .ro-offer[open] > summary { background: var(--press); } .ro-offer .rowform { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: 280px; max-width: 86vw; box-sizing: border-box; cursor: default; display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; box-shadow: 0 8px 22px rgba(20, 18, 12, .18); } .ro-offer .rowform .rf-hd { display: block; font-family: var(--logo); font-size: 12.5px; letter-spacing: .03em; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ro-offer .rowform .rf-row { display: flex; flex-direction: column; align-items: stretch; gap: 4px; } .ro-offer .rowform .rf-lbl { display: block; font-family: var(--heads); font-weight: 700; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .ro-offer .rowform .rf-price { display: flex; width: 100%; } .ro-offer .rowform .rf-price input { flex: 1; width: auto; } .ro-offer .rowform select, .ro-offer .rowform input[type="number"] { width: 100%; max-width: 100%; box-sizing: border-box; } .ro-offer .rowform button { width: 100%; white-space: nowrap; } .rs-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) 84px 28px 40px; align-items: center; column-gap: 11px; height: 54px; padding: 0 12px 0 14px; border-radius: 10px; cursor: pointer; background: var(--panel); transition: background .2s ease, box-shadow .2s ease; } .rs-row.bench { background: var(--panel-bench); } /* Frozen (doc §7): a transferred-in player benched until the roster returns to 8 */ .rs-row.frozen { cursor: default; opacity: .72; } .rs-row.frozen .rs-sc { color: var(--dim); } .rs-frozen { display: inline-flex; align-items: center; height: 15px; padding: 0 6px; margin-left: 2px; border-radius: 4px; font-family: var(--heads); font-size: 9.5px; font-weight: 800; letter-spacing: .06em; background: #2C6E9B; color: #fff; vertical-align: 1px; } .rs-row.bench .nm { color: var(--dim); } .rs-row.bench .fx { color: var(--dim); } .rs-row.bench .rs-sc { color: var(--dim); } .rs-row.bench .rs-pos { filter: saturate(.35) brightness(1.28); } /* the left edge carries the position colour */ .rs-row { box-shadow: inset 4px 0 0 var(--posc, var(--dim)); } .rs-row[data-pos="GK"] { --posc: var(--gk); } .rs-row[data-pos="DEF"] { --posc: var(--def); } .rs-row[data-pos="MID"] { --posc: var(--mid); } .rs-row[data-pos="FWD"] { --posc: var(--fwd); } .rs-row:hover { background: var(--panel-hi); } .rs-row.bench:hover { background: var(--panel-hi); } /* picked up */ .rs-row.sel { background: var(--sel); box-shadow: inset 4px 0 0 var(--posc), 0 0 0 2px var(--accent), 0 4px 12px rgba(20, 18, 12, .12); } /* a legal partner for the pick */ .rs-row.target { background: var(--inset); box-shadow: inset 4px 0 0 var(--posc), 0 0 0 1.5px rgba(200, 52, 42, .4); } /* his match kicked off — nothing about him can change. This has to be UNMISTAKABLE: a locked row that looks like a normal one makes a correctly refused tap feel like a broken page. */ .rs-row.lk { cursor: not-allowed; background: var(--panel-lk); box-shadow: inset 4px 0 0 var(--dim); } .rs-row.lk:hover { background: var(--panel-lk); } .rs-row.lk .nm, .rs-row.lk .rs-sc { color: var(--dim); } .rs-row.lk .fx { color: var(--dim); } .rs-row.lk .rs-pos { filter: saturate(.15) brightness(1.1); } .rs-row.lk .rs-ko { display: inline-flex; align-items: center; gap: 4px; font-family: var(--heads); font-weight: 700; font-size: 9px; letter-spacing: .1em; color: var(--faint); } .rs-row.lk .rs-ko::before { content: ""; width: 8px; height: 9px; flex: none; border-radius: 1px; background: var(--faint); box-shadow: 0 -4px 0 -1.5px transparent, inset 0 0 0 99px var(--faint); } .rs-pos { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 29px; border-radius: 7px; background: var(--posc); color: var(--onaccent); font-family: var(--heads); font-weight: 800; font-size: 11px; letter-spacing: .07em; } .rs-row[data-pos="GK"] .rs-pos { color: #2A1D08; } .rs-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .rs-id .nm { font-weight: 600; font-size: 15px; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rs-id .fx { font-size: 12.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rs-ko { justify-self: end; font-size: 11.5px; color: var(--faint); white-space: nowrap; } .rs-sc { font-family: var(--logo); font-size: 18px; color: var(--fg); text-align: right; font-variant-numeric: tabular-nums; } .rs-cap { justify-self: end; width: 34px; height: 34px; border-radius: 8px; border: 1.5px solid var(--line2); background: transparent; color: var(--dim); cursor: pointer; font-family: var(--logo); font-size: 14px; padding: 0; display: flex; align-items: center; justify-content: center; transition: transform .15s ease, background .15s ease, border-color .15s ease; } .rs-cap:hover:not(:disabled) { transform: scale(1.08); } .rs-cap.on { background: var(--accent); border-color: var(--accent); color: var(--onaccent); } .rs-cap:disabled { opacity: .35; cursor: not-allowed; } .rs-cap.static { cursor: default; } /* the name/fixture is now a LINK to the player's stats; swapping is the ⇅ button */ a.rs-id { text-decoration: none; color: inherit; cursor: pointer; } a.rs-id:hover .nm { color: var(--accent); } .rs-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; } .rs-swap { width: 30px; height: 30px; border-radius: 8px; border: 1.5px solid var(--line2); background: transparent; color: var(--muted); cursor: pointer; font-size: 15px; padding: 0; display: flex; align-items: center; justify-content: center; line-height: 1; transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease; } .rs-swap:hover { transform: scale(1.08); border-color: var(--accent); color: var(--accent); } .rs-row.sel .rs-swap { background: var(--accent); border-color: var(--accent); color: var(--onaccent); } .rs-row.target .rs-swap { border-color: var(--accent); color: var(--accent); } .ro-inj { display: inline-flex; align-items: center; height: 15px; padding: 0 5px; background: var(--accent); color: var(--onaccent); font-family: var(--heads); font-weight: 800; font-size: 9px; letter-spacing: .06em; line-height: 1; clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px); vertical-align: 1px; } /* narrow CARD (not narrow screen): drop the kickoff column — the fixture line already names the tie — and tighten everything else */ @container (max-width: 430px) { .rs-row { grid-template-columns: 42px minmax(0, 1fr) 30px 34px; column-gap: 8px; padding: 0 8px 0 11px; height: 50px; } .rs-ko { display: none; } .rs-row.lk .rs-ko { display: none; } .rs-pos { width: 40px; height: 26px; font-size: 10px; } .rs-id .nm { font-size: 14px; } .rs-id .fx { font-size: 11.5px; } .rs-cap { width: 30px; height: 30px; } } /* ===== cleaner roster card (own editable roster only; opponent .ro rows untouched) ===== Ports the Roster Selector design: transparent rows with thin dividers, position as coloured text (not a chip), kickoff folded into the subtitle, a circle captain button, and a per-league accent on the card. All JS hooks are unchanged. */ .rocard { border-top: 4px solid var(--lac, var(--accent)); } .rocard[data-lg="ENG-Premier League"] { --lac: #3D195B; } .rocard[data-lg="ESP-La Liga"] { --lac: #C6912E; } .rocard[data-lg="ITA-Serie A"] { --lac: #1E5C9E; } .rocard[data-lg="GER-Bundesliga"] { --lac: #B01E28; } .rocard[data-lg="FRA-Ligue 1"] { --lac: #16213E; } :root[data-theme="dark"] .rocard[data-lg="ENG-Premier League"] { --lac: #A784CE; } :root[data-theme="dark"] .rocard[data-lg="ESP-La Liga"] { --lac: #E0B24C; } :root[data-theme="dark"] .rocard[data-lg="ITA-Serie A"] { --lac: #5B9BD6; } :root[data-theme="dark"] .rocard[data-lg="GER-Bundesliga"] { --lac: #E86A6F; } :root[data-theme="dark"] .rocard[data-lg="FRA-Ligue 1"] { --lac: #6E86B8; } .rs-head { align-items: center; } .rs-head h3 { display: inline-flex; align-items: center; gap: 8px; font-family: var(--heads); font-weight: 800; font-size: 13.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--lac, var(--fg)); } .rs-head h3::before { content: ""; width: 5px; height: 14px; flex: none; background: var(--lac, var(--accent)); transform: skewX(-14deg); } .rs-zone[data-zone] { gap: 0; } .rs-row.rsc { grid-template-columns: 40px minmax(0, 1fr) 30px 66px; column-gap: 12px; height: 56px; padding: 0 8px; background: transparent; box-shadow: none; border-radius: 10px; } .rs-row.rsc + .rs-row.rsc { border-top: 1px solid var(--line); } .rs-row.rsc:hover, .rs-row.rsc.bench:hover { background: var(--panel); } .rs-row.rsc.bench { background: transparent; } /* position as coloured text (theme-aware via --posc), not a filled chip */ .rs-row.rsc .rs-pos { width: auto; height: auto; background: none; border-radius: 0; justify-content: flex-start; color: var(--posc); font-size: 10.5px; letter-spacing: .1em; } .rs-row.rsc.bench .rs-pos, .rs-row.rsc.lk .rs-pos { color: var(--dim); filter: none; } /* subtitle: fixture + kickoff/locked inline */ .rs-row.rsc .rs-ko { display: inline; justify-self: auto; font-size: inherit; color: var(--faint); } .rs-lk { font-family: var(--heads); font-weight: 700; font-size: 9px; letter-spacing: .1em; color: var(--faint); } .rs-row.rsc .rs-sc { font-size: 18px; } .rs-row.rsc.bench .rs-sc { color: var(--dim); } .rs-row.rsc .rs-cap { width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--panel); color: var(--dim); font-size: 13px; } .rs-row.rsc .rs-cap:hover:not(:disabled) { transform: scale(1.1); background: var(--panel-hi); } .rs-row.rsc .rs-cap.on { background: var(--accent); color: var(--onaccent); } .rs-row.rsc .rs-cap.on:hover:not(:disabled) { background: #A62A22; } .rs-row.rsc .rs-cap:disabled { opacity: .4; } /* selected / target rings; locked greyed (no left stripe in the clean design) */ .rs-row.rsc.sel { background: var(--sel); box-shadow: 0 0 0 2px var(--accent); } .rs-row.rsc.target { background: var(--inset); box-shadow: 0 0 0 1.5px rgba(200, 52, 42, .4); } .rs-row.rsc.sel, .rs-row.rsc.target, .rs-row.rsc.sel + .rs-row.rsc, .rs-row.rsc.target + .rs-row.rsc { border-top-color: transparent; } .rs-row.rsc.lk { background: transparent; box-shadow: none; cursor: not-allowed; opacity: .68; } .rs-row.rsc.lk:hover { background: transparent; } @container (max-width: 430px) { .rs-row.rsc { grid-template-columns: 34px minmax(0, 1fr) 28px 60px; column-gap: 8px; height: 52px; } .rs-row.rsc .rs-cap { width: 28px; height: 28px; } } .toast { position: fixed; right: 18px; bottom: 18px; z-index: 60; background: var(--fg); color: var(--emph-fg); padding: 9px 14px; border-radius: 8px; font-family: var(--heads); font-weight: 600; font-size: 13px; opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; max-width: 420px; } .toast.show { opacity: 1; transform: none; } .toast.bad { background: var(--accent); color: var(--onaccent); } .ro-head { display: flex; justify-content: flex-end; padding: 0 2px 4px; font-family: var(--heads); font-weight: 800; font-size: 9px; letter-spacing: .14em; color: var(--muted); } /* ---- the market (Cole's Claude Design page, 2026-07-10) ---- */ .mk-grid { display: grid; grid-template-columns: 1fr 220px 80px 70px 170px; align-items: center; min-width: 640px; } .mk-grid.deals { grid-template-columns: 56px 1fr 130px 130px 80px 70px; } .mk-head { padding-bottom: 10px; border-bottom: 1px solid var(--panel-lk); font-family: var(--heads); font-weight: 700; font-size: 10.5px; letter-spacing: .14em; color: var(--muted); } .mk-head .n { text-align: right; } .mk-row { min-height: 52px; border-bottom: 1px solid var(--panel); } .mk-grid.deals .mk-row, .mk-grid.deals.mk-row { min-height: 46px; } .mk-row.last { border-bottom: none; } .mk-player { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; color: var(--fg); } .mk-player .tick { width: 4px; height: 13px; transform: skewX(-14deg); flex: none; } .mk-offer { font-size: 14px; color: var(--ink2); } .mk-offer i { font-style: normal; color: var(--dim); } .mk-offer b { font-weight: 600; color: var(--fg); } .mk-offer small { display: block; font-size: 12px; color: var(--faint); margin-top: 2px; } .mk-offer em { font-style: normal; color: var(--accent); font-weight: 600; } .mk-price { text-align: right; font-family: var(--logo); font-size: 16px; color: var(--fg); -webkit-font-smoothing: antialiased; } .mk-price small { font-family: var(--body); font-size: 11px; color: var(--faint); } .mk-floor { text-align: right; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; } .mk-wk { font-family: var(--heads); font-weight: 700; font-size: 10.5px; letter-spacing: .12em; color: var(--faint); } .mk-seller { font-size: 14px; color: var(--ink2); } .mk-buyer { font-size: 14px; font-weight: 600; color: var(--fg); } .mk-acts { display: flex; justify-content: flex-end; gap: 8px; } .mk-btn { display: inline-block; border: 1.5px solid var(--dim); background: transparent; color: var(--ink2); cursor: pointer; transform: skewX(-14deg); padding: 6px 11px; font-family: var(--logo); font-size: 10px; letter-spacing: .08em; line-height: 1; text-decoration: none !important; -webkit-font-smoothing: antialiased; } .mk-btn:hover { border-color: var(--fg); color: var(--fg); } .mk-btn.go { border: none; background: var(--accent); color: var(--onaccent); padding: 7.5px 12px; } .mk-btn.go:hover { background: #A62A22; color: var(--onaccent); } .mk-btn.dark { border: none; background: var(--press); color: var(--onaccent); padding: 8px 14px; } .mk-btn.dark:hover { background: var(--accent); } .mk-quiet { border: 1.5px dashed var(--line2); border-radius: 10px; background: var(--inset); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 30px 20px; } .mk-quiet .q1 { font-family: var(--logo); font-size: 14px; letter-spacing: .1em; color: var(--faint); line-height: 1; -webkit-font-smoothing: antialiased; } .mk-quiet .q2 { font-size: 14.5px; color: var(--ink2); } .mk-bal { display: grid; grid-template-columns: 170px 1fr 70px 56px; align-items: center; height: 40px; column-gap: 14px; border-bottom: 1px solid var(--panel); } .mk-bal.last { border-bottom: none; } .mk-bal.you { background: var(--inset); } .mk-bal .nm { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; color: var(--fg); } .mk-bal .bar { position: relative; display: block; height: 10px; } .mk-bal .bar .base { position: absolute; left: 76.9%; top: -4px; bottom: -4px; width: 1px; background: var(--panel-lk); } .mk-bal .bar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--emph-bg); transform: skewX(-14deg); } .mk-bal .bar .fill.you { background: var(--accent); } .mk-bal .cr { text-align: right; font-family: var(--logo); font-size: 16px; color: var(--fg); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; } .mk-bal .dl { text-align: right; font-size: 13.5px; color: var(--dim); font-variant-numeric: tabular-nums; } .mk-bal .dl.up { color: var(--fg); font-weight: 600; } .mk-bal .dl.dn { color: var(--accent); font-weight: 600; } @media (max-width: 640px) { .mk-bal { grid-template-columns: 1fr 64px 48px; } .mk-bal .bar { display: none; } } /* ---- cup fixtures (Cole's Claude Design page, 2026-07-10) ---- */ .cf-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 1rem 0 1.1rem; max-width: 980px; } .cf-head .cf-nav { margin-left: auto; } .cf-head .stl-brand { font-size: 18px; } .cf-nav { display: flex; align-items: center; gap: 12px; } .cf-btn { display: inline-block; background: var(--emph-bg); color: var(--emph-fg) !important; transform: skewX(-14deg); padding: 6px 11px; font-family: var(--logo); font-size: 10.5px; letter-spacing: .08em; line-height: 1; white-space: nowrap; text-decoration: none !important; } .cf-btn:hover { background: var(--accent); color: var(--onaccent) !important; } .cf-card { max-width: 980px; } .cf-cardhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .cf-title { display: inline-flex; align-items: center; gap: 10px; font-family: var(--logo); font-size: 17px; letter-spacing: .05em; color: var(--fg); line-height: 1; -webkit-font-smoothing: antialiased; } .cf-title .bar { width: 5px; height: 16px; background: var(--accent); transform: skewX(-14deg); } .cf-title .cf-dates { font-family: var(--heads); font-size: 14px; font-weight: 800; letter-spacing: .03em; color: var(--accent); } .cf-cardhead { gap: 10px; flex-wrap: wrap; } .cf-cardhead.solo { justify-content: flex-end; margin-bottom: 0; } /* the unplayed state reads VS, not a lowercase 'v' lost between two names */ .cf-score.vs { font-family: var(--heads); font-weight: 800; font-size: 15px; letter-spacing: .12em; color: var(--accent); } .cf-status { display: inline-flex; align-items: center; height: 20px; padding: 0 9px; font-family: var(--heads); font-weight: 800; font-size: 10.5px; letter-spacing: .08em; line-height: 1; white-space: nowrap; clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); } .cf-status.ft { background: var(--emph-bg); color: var(--emph-fg); } .cf-status.live { background: var(--accent); color: var(--onaccent); } .cf-status.up { background: var(--panel); color: var(--ink2); } /* baseline, not center: the left column carries a manager line under the team name and the right one often doesn't, so centring floated the two names off each other. Baseline puts both names — and the score — on one line. */ .cf-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 26px; margin: 20px 0; } .cf-team { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .cf-team.a { align-items: flex-end; text-align: right; } .cf-team.b { align-items: flex-start; } .cf-team .tn { font-family: var(--logo); font-size: 27px; color: var(--fg); line-height: 1; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .cf-team .tn.mine { color: var(--accent); } .cf-team .mn { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--muted); } .cf-score { font-family: var(--logo); font-size: 44px; color: var(--fg); line-height: 1; white-space: nowrap; } /* the lead bar: share of the combined score, plus who leads and by how much */ .cf-lead { display: flex; flex-direction: column; gap: 8px; margin: 20px 0 18px; } .cf-leadbar { position: relative; display: flex; height: 12px; border-radius: 3px; overflow: hidden; background: var(--panel-hi); box-shadow: inset 0 0 0 1px rgba(20, 18, 12, .06); } .cf-leadbar .a { background: var(--accent); } .cf-leadbar .b { flex: 1; background: var(--fg); } .cf-leadbar.quiet .a { background: var(--line2); } .cf-leadbar.quiet .b { background: var(--gl); } .cf-leadtext { text-align: center; font-family: var(--heads); font-weight: 700; font-size: 10px; letter-spacing: .14em; } .cf-leadtext.you { color: var(--accent); } .cf-leadtext.them { color: var(--fg); } .cf-leadtext.level { color: var(--ink2); } .cf-leadtext.quiet { color: var(--dim); } /* per-league share bar */ .cf-blkbar { display: flex; height: 4px; border-radius: 2px; overflow: hidden; background: var(--panel-hi); margin: 8px 0 2px; } .cf-blkbar .a { background: var(--accent); } .cf-blkbar .b { flex: 1; background: var(--fg); } .cf-blkbar.quiet .a { background: var(--line2); } .cf-blkbar.quiet .b { background: var(--gl); } /* nothing revealed on either side yet */ .cf-locked { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 26px 0 14px; font-family: var(--heads); font-weight: 700; font-size: 9.5px; letter-spacing: .14em; color: var(--dim); text-align: center; } .cf-locked.plain { padding: 18px 0 12px; } .cf-locked .pad { position: relative; width: 13px; height: 15px; } .cf-locked .pad::before { content: ""; position: absolute; left: 2px; bottom: 0; width: 9px; height: 8px; border-radius: 1.5px; background: var(--dim); } .cf-locked .pad::after { content: ""; position: absolute; left: 3.5px; top: 0; width: 6px; height: 7px; border: 1.5px solid var(--dim); border-bottom: none; border-radius: 3px 3px 0 0; } /* club-GK marker on a player row */ .gkchip { flex: none; display: inline-flex; align-items: center; height: 13px; padding: 0 4px; background: var(--panel-hi); color: var(--muted); border-radius: 2px; font-family: var(--heads); font-weight: 700; font-size: 8px; letter-spacing: .06em; line-height: 1; } .cf-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .cf-blk { background: var(--bg); border-radius: 10px; border-top: 3px solid var(--fg); padding: 14px 18px 10px; } /* a league whose matches haven't kicked off yet (or has none this week): greyed so it doesn't read as live. The accent top-border desaturates too. */ .cf-blk-off { opacity: .5; filter: saturate(.35); } .cf-lgstat { font-family: var(--heads); font-weight: 700; font-size: 9px; letter-spacing: .14em; color: var(--dim); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; margin-left: 4px; } .cf-blkhead { display: flex; align-items: center; justify-content: center; gap: 7px; margin-bottom: 7px; font-family: var(--heads); font-weight: 700; font-size: 11.5px; letter-spacing: .16em; white-space: nowrap; } .cf-blkhead .bar { width: 4px; height: 11px; transform: skewX(-14deg); } .cf-blkscore { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; height: 20px; margin-bottom: 2px; } .cf-blkscore .tm { font-family: var(--heads); font-weight: 700; font-size: 10.5px; letter-spacing: .1em; color: var(--dim); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cf-blkscore .tm.you-side { color: var(--accent); } .cf-blkscore .tm.r { text-align: right; } .cf-blkscore .sc { display: flex; align-items: baseline; gap: 6px; font-family: var(--logo); font-size: 16px; line-height: 1; white-space: nowrap; -webkit-font-smoothing: antialiased; } .cf-blkscore .sc b { font-weight: 400; color: var(--faint); } .cf-blkscore .sc b.w { color: var(--fg); } .cf-blkscore .sc i { font-style: normal; color: var(--dim); font-size: 13px; } .cf-prow { display: grid; grid-template-columns: 1fr 36px 16px 36px 1fr; align-items: center; height: 32px; border-top: 1px dashed var(--panel-hi); } .cf-prow .pn { display: flex; align-items: center; gap: 5px; min-width: 0; } .cf-prow .pn.r { justify-content: flex-end; } .cf-prow .nm { font-size: 14px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; } .cf-prow .cchip { display: inline-flex; align-items: center; flex-shrink: 0; height: 15px; padding: 0 5px; background: var(--accent); color: var(--onaccent); font-family: var(--heads); font-weight: 800; font-size: 9.5px; line-height: 1; clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px); } .cf-prow .pp { text-align: right; font-family: var(--logo); font-size: 14px; color: var(--fg); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; } .cf-prow .pp.l { text-align: left; } /* captain: mark that the shown number is RAW and doubles in the total */ .cf-x2 { font-family: var(--heads); font-weight: 800; font-size: 9px; letter-spacing: .02em; color: var(--accent); vertical-align: super; margin-left: 2px; cursor: help; } /* the lowest of six is dropped from the total; grey + strike it, subtly, so you can see it is not being counted */ .cf-prow .pp.dropped { color: var(--dim); text-decoration: line-through; text-decoration-thickness: 1px; } .cf-around { text-decoration: none; border-radius: 10px; transition: background .12s ease; display: grid; grid-template-columns: 1fr 170px 1fr; align-items: center; column-gap: 20px; min-height: 58px; border-bottom: 1px solid var(--panel); } .cf-around.last { border-bottom: none; } /* the whole row features the matchup on click */ .cf-around:hover { background: var(--mine); } .cf-around:hover .side .t { color: var(--accent); } .cf-around .side { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px 4px; text-decoration: none; } .cf-around .side.a { align-items: flex-end; text-align: right; } .cf-around .side.b { align-items: flex-start; } /* the design: team names are bold Instrument Sans, not the uppercase logo. Loser is muted, winner is ink; the name reads first, the manager/rank sub reads second. */ .cf-around .side .t { font-weight: 700; font-size: 14.5px; color: var(--ink2); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .cf-around .side .t.w { color: var(--fg); } .cf-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } .cf-around .side .m { font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .cf-around .mid { display: flex; flex-direction: column; align-items: center; gap: 5px; } .cf-around .mid .sc { display: flex; align-items: baseline; gap: 7px; font-family: var(--logo); font-size: 18px; line-height: 1; } .cf-around .s { color: var(--faint); font-variant-numeric: tabular-nums; } .cf-around .s.w { color: var(--fg); } .cf-around .sep { color: var(--dim); font-size: 13px; } .cf-minibar { display: flex; width: 120px; height: 3.5px; border-radius: 2px; overflow: hidden; background: var(--panel-hi); } .cf-minibar .a { background: var(--accent); display: block; } .cf-minibar .b { flex: 1; background: var(--fg); display: block; } .cf-minibar.quiet .a { background: var(--line2); } .cf-minibar.quiet .b { background: var(--gl); } /* the WEEK badge: a red skewed tab in the card header */ .cf-wkbadge { display: inline-flex; align-items: center; height: 28px; padding: 0 14px; background: var(--accent); color: var(--onaccent); transform: skewX(-14deg); box-shadow: 0 1px 3px rgba(200, 52, 42, .35); white-space: nowrap; } .cf-wkbadge > span { display: block; transform: skewX(14deg); font-family: var(--logo); font-size: 15px; letter-spacing: .08em; line-height: 1; } @media (max-width: 640px) { .cf-around { grid-template-columns: 1fr 96px 1fr; column-gap: 8px; } .cf-around .side { padding: 8px 2px; } .cf-around .side .t { font-size: 12.5px; } .cf-around .side .m { font-size: 10.5px; } .cf-around .mid .sc { font-size: 15px; gap: 5px; } /* the 120px mini bar won't fit a phone's centre column — shrink it to the column */ .cf-minibar { width: 100%; } } .cf-tipbox { position: absolute; z-index: 70; transform: translate(-50%, -100%); background: var(--emph-bg); color: var(--emph-fg); padding: 10px 12px 9px; border-radius: 8px; display: none; pointer-events: none; min-width: 190px; box-shadow: 0 6px 18px rgba(20, 18, 12, .3); } .cf-tipbox.show { display: block; } .cf-tipbox .th { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 2px; } .cf-tipbox .th b { font-family: var(--heads); font-weight: 700; font-size: 12.5px; } .cf-tipbox .th em { font-style: normal; font-family: var(--logo); font-size: 14px; color: var(--live); white-space: nowrap; } .cf-tipbox .ts { display: block; font-size: 10px; color: var(--dim); margin-bottom: 6px; } .cf-tipbox .ts u { text-decoration: none; color: var(--emph-fg); background: var(--tagdark); padding: 1px 5px; border-radius: 3px; font-family: var(--heads); font-weight: 700; font-size: 8.5px; letter-spacing: .08em; } .cf-tipbox .tr { display: flex; justify-content: space-between; gap: 16px; font-size: 11px; color: var(--dim); line-height: 1.7; } .cf-tipbox .tr b { font-family: var(--heads); font-weight: 700; color: var(--emph-fg); font-variant-numeric: tabular-nums; } @media (max-width: 720px) { .cf-blocks { grid-template-columns: 1fr; } /* stay SIDE BY SIDE: collapsing to one column turned the head-to-head into a vertical list, so you couldn't tell it was X vs Y at all. Shrink instead. */ .cf-teams { grid-template-columns: 1fr auto 1fr; gap: 14px; } .cf-team.a { align-items: flex-end; text-align: right; } .cf-team.b { align-items: flex-start; text-align: left; } /* team names stay on ONE line beside the score — shrink and ellipsize rather than wrapping "TOTAL / FARTBALL" onto two rows */ .cf-team .tn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-size: 15px; } .cf-team .mn { font-size: 11px; } .cf-score { font-size: 26px; text-align: center; } .cf-score.vs { font-size: 13px; } /* head-to-head player rows: give the NAMES back their width. The two 36px score columns + 16px divider ate 88px of a ~333px panel, so 14 names were clipping. Tighter score/divider columns + a smaller chip + font reclaim ~30px per side. */ .cf-blk { padding: 13px 12px 9px; } .cf-prow { grid-template-columns: 1fr 24px 8px 24px 1fr; column-gap: 6px; } .cf-prow .nm { font-size: 12.5px; } .cf-prow .pp { font-size: 12.5px; } /* captain's "C" badge -> a red NAME (no chip). The GK chip stays, but the keeper is now pinned to the bottom row, so it's one chip per side, not clutter on every row. */ .cf-prow .cchip { display: none; } .cf-prow .nm.cap { color: var(--accent); font-weight: 600; } .cf-prow .gkchip { height: 13px; padding: 0 3px; font-size: 8px; } .cf-prow .pn { gap: 4px; } .cf-blkscore .tm { font-size: 9.5px; } /* the round label ("Round 3 of 18 · Qualifying") — a global `.stl-sub { display:none }` from the draft-strip block was hiding it here too. Re-show it (higher specificity) and drop it onto its own line under the week buttons instead of cramming the row. */ .cf-head .cf-nav { flex-wrap: wrap; justify-content: flex-end; row-gap: 5px; } .cf-head .stl-sub { display: block; flex-basis: 100%; order: 3; text-align: right; font-size: 11.5px; } } /* ---- cup qualifying circuit (Cole's Claude Design component, 2026-07-10) ---- */ @keyframes ccbob { 0%, 100% { transform: translateY(.6px); } 50% { transform: translateY(-.6px); } } /* ---- cup qualifying leaderboard (Ligazo Leaderboard, ported 2026-07-12) ---- */ #cupboard { max-width: 560px; } #cupboard .stl-head { margin-bottom: 3px; } .cb-play { border: 0; cursor: pointer; background: var(--accent); transform: skewX(-14deg); padding: 6px 11px; font-family: var(--logo); font-size: 10px; letter-spacing: .08em; color: var(--onaccent); line-height: 1; white-space: nowrap; } .cb-play > * { display: block; transform: skewX(14deg); } .cb-play:hover { background: #A62A22; } .cb-play.on { background: var(--emph-bg); color: var(--emph-fg); } .cb-sub { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; font-size: 11.5px; color: var(--faint); } .cb-sub .cb-wk { color: var(--muted); white-space: nowrap; } .cb-sub .cb-wk b { font-family: var(--logo); font-weight: 400; } .cb-stack { position: relative; width: 100%; } /* the plate keeps its DOM node and slides: `top` is the only thing that animates */ .cb-plate { position: absolute; left: 0; right: 0; height: 40px; display: flex; align-items: center; gap: 9px; padding: 0 22px 0 13px; clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%); } .cb-plate .rk { flex: none; width: 18px; text-align: center; font-family: var(--logo); font-size: 16px; font-variant-numeric: tabular-nums; } .cb-plate .mv { flex: none; width: 22px; display: flex; align-items: center; justify-content: center; gap: 2px; font-family: var(--heads); font-weight: 700; font-size: 9px; line-height: 1; } .cb-plate .mv::before { content: ""; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; } .cb-plate .mv.up::before { border-bottom: 5px solid currentColor; } .cb-plate .mv.dn::before { border-top: 5px solid currentColor; } .cb-plate .mv.flat { opacity: .6; font-size: 11px; } .cb-plate .mv.flat::before { display: none; } .cb-plate .tm { flex: 1; min-width: 0; font-family: var(--logo); font-size: 14px; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cb-plate .chip { flex: none; display: inline-flex; align-items: center; height: 15px; padding: 0 6px; font-family: var(--logo); font-size: 9px; letter-spacing: .05em; line-height: 1; clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px); } .cb-plate .chip[hidden] { display: none; } .cb-plate .val { flex: none; width: 34px; text-align: right; font-family: var(--logo); font-size: 16px; font-variant-numeric: tabular-nums; } .cb-plate .rose { flex: none; display: flex; align-items: center; } .cb-rose { display: block; overflow: visible; filter: drop-shadow(0 2px 3px rgba(20, 18, 12, .22)); } /* cup standings: medal plates (Ligazo Cup Fixtures design). Colours come from the route (cup_plates), so the plate carries them inline; this is only geometry. */ .cf-plates { display: flex; flex-direction: column; gap: 6px; } .cf-plate { height: 40px; display: flex; align-items: center; gap: 9px; padding: 0 22px 0 13px; clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%); } .cf-plate .cpr { flex: none; width: 18px; text-align: center; font-family: var(--logo); font-size: 16px; font-variant-numeric: tabular-nums; } .cf-plate .cpt { flex: 1 1 auto; min-width: 0; font-family: var(--logo); font-size: 14px; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; } .cf-plate.you .cpt { text-decoration: underline; text-underline-offset: 3px; } .cf-plate .cpc { flex: none; display: inline-flex; align-items: center; height: 15px; padding: 0 6px; font-family: var(--logo); font-size: 9px; letter-spacing: .05em; line-height: 1; clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px); } .cf-plate .cpg { flex: none; font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; } .cf-plate .cpp { flex: none; width: 26px; text-align: right; font-family: var(--logo); font-size: 16px; font-variant-numeric: tabular-nums; } .cf-rose { flex: none; display: block; filter: drop-shadow(0 1px 1px rgba(20, 18, 12, .35)); } .cf-cutline { display: flex; align-items: center; gap: 12px; padding: 2px 0; font-family: var(--heads); font-weight: 700; font-size: 9px; letter-spacing: .12em; color: var(--accent); } .cf-cutline span { flex: 1; height: 0; border-top: 1.5px dashed var(--accent); } /* the qualifying cut */ .cb-cut { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px dashed var(--accent); z-index: 20; } .cb-cutlabel { position: absolute; right: 0; z-index: 21; display: inline-flex; align-items: center; height: 15px; padding: 0 7px; background: var(--accent); color: var(--onaccent); font-family: var(--heads); font-weight: 700; font-size: 8.5px; letter-spacing: .12em; line-height: 1; clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); } .cb-scrub { position: relative; width: 100%; height: 24px; margin-top: 14px; background: var(--inset); border-radius: 3px; overflow: hidden; cursor: ew-resize; touch-action: none; user-select: none; } .cb-scrub .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); pointer-events: none; } .cb-scrub .cell { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; z-index: 2; font-family: var(--heads); font-weight: 700; font-size: 8.5px; color: var(--faint); pointer-events: none; } .cb-scrub .cell.lit { color: var(--onaccent); } .cb-scrub .cell.future { opacity: .45; } @media (max-width: 640px) { .cb-plate { gap: 7px; padding: 0 18px 0 10px; } .cb-plate .tm { font-size: 13px; } .cb-plate .val { width: 28px; font-size: 15px; } } /* ---- fun stats (league page novelty board) ---- */ .fs-row { display: grid; grid-template-columns: 172px 1fr 64px; align-items: center; min-height: 42px; padding: 4px 0; border-bottom: 1px solid var(--panel); } .fs-row.last { border-bottom: none; } .fs-label { font-weight: 600; font-size: 14px; color: var(--fg); padding-right: 10px; } .fs-detail { font-size: 14px; color: var(--ink2); padding-right: 10px; } .fs-val { text-align: right; font-family: var(--logo); font-size: 16px; color: var(--fg); } .fs-val.bad { color: var(--accent); } @media (max-width: 640px) { .fs-row { grid-template-columns: 120px 1fr 52px; } } /* ---- the draft record (league page, post-draft) ---- */ .dl-league summary { cursor: pointer; padding: 9px 2px; font-family: var(--logo); font-size: 13px; letter-spacing: .05em; color: var(--fg); border-bottom: 1px solid var(--panel); -webkit-font-smoothing: antialiased; } .dl-league summary small { font-family: var(--body); color: var(--muted); letter-spacing: 0; font-size: 11.5px; } .dl-pick { display: grid; grid-template-columns: 34px 30px 1fr auto; align-items: center; gap: 8px; padding: 5px 2px; border-bottom: 1px solid var(--inset); font-size: 13.5px; } .dl-pick .no { font-family: var(--logo); font-size: 12px; color: var(--faint); } .dl-pick .rd { font-family: var(--heads); font-weight: 700; font-size: 9.5px; letter-spacing: .08em; color: var(--muted); } .dl-pick .tm { font-size: 12px; color: var(--muted); } /* ---- banter (the trash-talk box) ---- */ .bn-feed { display: flex; flex-direction: column-reverse; gap: .5rem; max-height: 300px; overflow-y: auto; margin: 2px 0 14px; } .bn-msg { margin: 0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; } /* the feed carries two voices: people TALKING (bn-msg) and the league HAPPENING (bn-evt). Events are quieter and set apart by a rail, so a 400-pick draft doesn't shout over the banter — but they're in the same room, which is the whole point. */ .bn-evt { padding: 4px 0 4px 9px; border-left: 2px solid var(--line); font-size: 13px; color: var(--muted); line-height: 1.45; } .bn-evt strong { color: var(--fg); font-weight: 700; } /* system 'Ligazo' alert (transfer conversion, etc.): accent rail + branded author */ .bn-alert { border-left-color: var(--accent); } .bn-alert strong { color: var(--accent); letter-spacing: .01em; } /* a line that tags YOU: your business, so it earns the accent rail */ .bn-msg.me, .bn-evt.me { border-left: 2px solid var(--accent); background: var(--mine); padding-left: 9px; border-radius: 0 6px 6px 0; } .bn-tag { font-weight: 700; color: var(--accent); background: var(--mine); padding: 0 5px; border-radius: 5px; white-space: nowrap; text-decoration: none; } a.bn-tag { cursor: pointer; } a.bn-tag:hover { background: var(--accent); color: var(--onaccent); } .bn-msg strong { font-weight: 600; } .bn-rank { font-family: var(--heads); font-weight: 800; font-size: 12px; } .bn-gold { color: #C9A227; } .bn-silver { color: #8E9196; } .bn-bronze { color: #A46628; } .bn-red, .bn-none { color: var(--accent); } .bn-last { font-family: "Comic Sans MS", "Comic Neue", "Chalkboard SE", cursive; font-weight: 700; color: #6B8E23; display: inline-block; transform: rotate(-4deg); } .bn-form { display: flex; gap: 8px; align-items: flex-end; } .bn-form input, .bn-form textarea { flex: 1; min-width: 0; } .bn-form textarea { resize: none; font-family: inherit; line-height: 1.4; max-height: 120px; overflow-y: auto; } /* message body: keep the writer's line breaks (Shift+Enter) and render **bold**/*italic* */ .bn-body { white-space: pre-wrap; overflow-wrap: anywhere; } .bn-body strong { font-weight: 700; } .bn-body em { font-style: italic; } .bn-body del { text-decoration: line-through; opacity: .85; } /* pasted gifs/images render inline; other links are clickable */ .bn-img { display: block; max-width: min(240px, 78%); max-height: 240px; margin-top: 5px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); } .bn-link { color: var(--accent); text-decoration: underline; word-break: break-all; } /* formatting toolbar above the composer */ .bn-fmt { display: flex; gap: 4px; margin-bottom: 5px; } .bn-fmt-b { width: 27px; height: 27px; padding: 0; font-size: 13px; line-height: 1; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); color: var(--fg); cursor: pointer; font-family: var(--heads); } .bn-fmt-b:hover { border-color: var(--accent); color: var(--accent); } .bn-fmt-b b { font-weight: 800; } .bn-fmt-b i { font-style: italic; } .bn-fmt-b s { text-decoration: line-through; } .bn-gif-btn { margin-left: auto; height: 27px; padding: 0 9px; font-size: 11px; font-weight: 800; font-family: var(--heads); letter-spacing: .04em; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); color: var(--fg); cursor: pointer; } .bn-gif-btn:hover { border-color: var(--accent); color: var(--accent); } /* GIF picker panel floats above the composer, like the @-mention list */ .bn-gifpick { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 45; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.28); } .bn-gifpick[hidden] { display: none; } .bn-gifhead { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; } .bn-gifpick input { flex: 1; min-width: 0; font-size: 16px; padding: .5rem .6rem; } .bn-gifclose { flex: none; width: 34px; height: 34px; border-radius: 8px; font-size: 20px; line-height: 1; border: 1px solid var(--line); background: var(--inset); color: var(--fg); cursor: pointer; padding: 0; } .bn-gifclose:hover { border-color: var(--accent); color: var(--accent); } /* masonry: FIXED small column width -> many ~115px thumbs on wide screens, full aspect ratio, no cropping, no giant previews */ .bn-gifgrid { column-width: 115px; column-gap: 6px; min-height: 90px; max-height: 240px; overflow-y: auto; overflow-x: hidden; color: var(--muted); font-size: 13px; } .bn-gifopt { display: block; width: 100%; height: auto; margin: 0 0 6px; border-radius: 6px; cursor: pointer; background: var(--line); break-inside: avoid; } .bn-gifopt:hover { outline: 2px solid var(--accent); } .bn-gif-cred { font-size: 9px; color: var(--muted); text-align: right; margin-top: 6px; letter-spacing: .06em; } /* mobile: float-up picker runs off the top of the screen, so make it a full overlay inside the chat — search pinned at top, grid fills and scrolls, close X reachable */ @media (max-width: 640px) { .bn-gifpick { position: fixed; left: 8px; right: 8px; top: 62px; bottom: 8px; z-index: 70; display: flex; flex-direction: column; } .bn-gifpick .bn-gifhead { flex: none; } .bn-gifpick .bn-gifgrid { flex: 1; max-height: none; column-width: 108px; } } /* timestamp — inline next to the name, quiet, in the viewer's local time */ .bn-ts { margin-left: 6px; font-family: var(--heads); font-size: 10.5px; font-weight: 600; color: var(--muted); letter-spacing: .02em; } /* who-reacted popover (hover on desktop, long-press on mobile) */ .bn-names { position: fixed; z-index: 60; max-width: 220px; pointer-events: none; background: var(--fg); color: var(--bg); font-size: 12px; line-height: 1.35; padding: 5px 8px; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.28); } .bn-names[hidden] { display: none; } .bn-demo-note { margin: 4px 0 2px; font-size: 12.5px; color: var(--muted); font-style: italic; text-align: center; } /* @-mention autocomplete: floats above the composer */ .bn-compose { position: relative; } .bn-ac { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 40; background: var(--card); border: 1.5px solid var(--mine-line); border-radius: 12px; box-shadow: 0 -8px 28px rgba(20,18,12,.22); overflow-y: auto; max-height: 44vh; } .bn-ac-item { display: flex; flex-direction: column; gap: 1px; padding: 9px 14px; cursor: pointer; } .bn-ac-item + .bn-ac-item { border-top: 1px solid var(--line); } .bn-ac-item b { font-family: var(--heads); font-weight: 800; font-size: 14px; color: var(--accent); } .bn-ac-item span { font-size: 12px; color: var(--muted); } .bn-ac-item.on { background: var(--mine); } /* edit your own chat line: a faint pencil that brightens, an inline editor, and an "(edited)" tag so a rewrite is never silent */ .bn-edit { border: 0; background: none; padding: 0 0 0 5px; cursor: pointer; color: var(--muted); line-height: 1; opacity: .5; } .bn-edit:hover { color: var(--accent); opacity: 1; } .bn-edit svg { vertical-align: -1px; } .bn-edited { font-size: 11px; color: var(--muted); font-style: italic; } .bn-editing { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 5px; width: 100%; } .bn-edit-in { font-size: 14px; padding: .32rem .5rem; min-width: 0; flex: 1 1 11rem; font-family: inherit; line-height: 1.4; resize: none; max-height: 120px; overflow-y: auto; } .bn-esave, .bn-ecancel { font-family: var(--heads); font-weight: 700; font-size: 12px; padding: .32rem .72rem; border-radius: 5px; cursor: pointer; white-space: nowrap; } .bn-esave { background: var(--accent); color: var(--onaccent); border: 0; } .bn-ecancel { background: none; border: 1px solid var(--line); color: var(--muted); } .bn-panel .bn-edit-in { font-size: 16px; } /* 16px: no iOS auto-zoom in full-screen chat */ /* the banter dock: bottom-fixed, closed by default (a thin ribbon), expands up. safe-area padding: installed to the home screen the app runs standalone and owns the whole screen, so the ribbon would otherwise sit under the iPhone's home indicator. env() is 0 in a normal browser tab, so this costs nothing. */ .bn-spacer { height: calc(44px + env(safe-area-inset-bottom, 0px)); } .bn-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--card); border-top: 2px solid var(--fg); box-shadow: 0 -6px 18px rgba(20, 19, 16, .10); padding-bottom: env(safe-area-inset-bottom, 0px); } .bn-ribbon { display: flex; align-items: center; gap: 9px; width: 100%; height: 42px; padding: 0 14px; background: transparent; border: 0; cursor: pointer; text-align: left; color: var(--fg); } .bn-rlabel { display: inline-flex; align-items: center; gap: 7px; flex: none; font-family: var(--heads); font-weight: 800; font-size: 11px; letter-spacing: .12em; } .bn-rlabel .bl { width: 9px; height: 11px; background: var(--accent); flex: none; clip-path: polygon(0 0, 62% 0, 100% 100%, 38% 100%); } .bn-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(176, 58, 46, .18); } /* the newest line, previewed in the closed ribbon — one line, never wraps */ .bn-last-peek { flex: 1; min-width: 0; font-size: 12.5px; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bn-caret { flex: none; font-size: 9px; color: var(--muted); } /* OPEN = full screen (Sleeper-style). JS sizes height/top to the VISUAL viewport so the input sits above the keyboard instead of behind it. */ .bn-dock.open { top: 0; height: 100%; display: flex; flex-direction: column; border-top: 0; } .bn-dock.open .bn-ribbon { display: none; } .bn-panel { display: flex; flex-direction: column; min-height: 0; flex: 1; padding: 0 14px 12px; } /* class rules beat the UA's [hidden]{display:none}, so restate it or the panel never actually hides */ .bn-panel[hidden] { display: none; } /* a grab handle, like a native sheet — the obvious "pull me down to close" */ .bn-grab { flex: none; width: 100%; display: flex; justify-content: center; padding: 8px 0 2px; cursor: grab; touch-action: none; } .bn-grab::before { content: ""; width: 42px; height: 5px; border-radius: 3px; background: var(--panel-lk); } .bn-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 10px; border-bottom: 1.5px solid var(--fg); margin-bottom: 10px; flex: none; } .bn-head .bn-rlabel { font-size: 13px; } /* a real target, not a hairline glyph: 36px circle */ .bn-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; flex: none; background: var(--inset); border: 1.5px solid var(--fg); cursor: pointer; font-size: 20px; line-height: 1; color: var(--fg); padding: 0; } .bn-close:hover { background: var(--accent); border-color: var(--accent); color: var(--onaccent); } /* max-height:none — the base .bn-feed caps at 300px (leftover from the card), which stopped it filling the screen and floated the input up under the last message instead of pinning it to the bottom */ .bn-panel .bn-feed { flex: 1; min-height: 0; max-height: none; overflow-y: auto; gap: .55rem; margin: 0 0 10px; padding-bottom: 2px; } .bn-panel .bn-msg { font-size: 14px; line-height: 1.4; } .bn-panel .bn-form { flex: none; } /* 16px MINIMUM: iOS auto-zooms the whole page when you focus an input smaller than this, which is what made the chat blow up on open. Never shrink it. */ .bn-panel .bn-form input, .bn-panel .bn-form textarea { font-size: 16px; padding: .55rem .7rem; } .bn-panel .bn-form button { font-size: 15px; padding: .55rem 1rem; } /* no double-tap zoom anywhere in the chat */ .bn-dock { touch-action: manipulation; } body.bn-locked { overflow: hidden; } /* no scrolling the page behind the chat */ body.bn-locked, body.bn-locked .bn-dock { touch-action: manipulation; } @media (max-width: 640px) { .bn-ribbon { height: 38px; padding: 0 11px; gap: 8px; } .bn-spacer { height: calc(40px + env(safe-area-inset-bottom, 0px)); } .bn-panel { padding: 0 12px 10px; } } /* ---- league tables (Cole's Claude Design component, 2026-07-10) ---- */ .lcard { background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; padding: 22px 30px 22px; margin: 0 0 1.6rem; max-width: 820px; } .lcard.slim { max-width: 640px; } .lt-link { font-family: var(--heads); font-weight: 600; font-size: 12.5px; color: var(--accent); text-decoration: none; } .lt-link:hover { text-decoration: underline; color: var(--accent); } .lt-wrap { overflow-x: auto; padding-left: 12px; margin-left: -12px; } .lt-grid { display: grid; align-items: center; grid-template-columns: 34px 46px minmax(150px, 1fr) 44px 76px 64px 78px 78px 78px 64px; min-width: 720px; } .lt-grid.cup { grid-template-columns: 34px minmax(170px, 1fr) 44px 44px 44px 44px 76px 60px; min-width: 540px; } .lt-head { padding-bottom: 10px; border-bottom: 1px solid var(--panel-lk); font-family: var(--heads); font-weight: 700; font-size: 10px; letter-spacing: .14em; color: var(--muted); } .lt-head .n { text-align: right; } .lt-row { position: relative; height: 44px; border-bottom: 1px solid var(--panel); } .lt-row.dash { border-bottom: 1px dashed var(--dim); } .lt-row.last { border-bottom: none; } .lt-row.you { background: var(--inset); } .lt-row.you .lt-name a { color: var(--accent); font-weight: 800; } .mk-bal.you .nm { color: var(--accent); font-weight: 700; } .lt-row.drop { background: var(--sel); } .lt-row.drop::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 4px; background: var(--accent); transform: skewX(-14deg); } .lt-rank { font-family: var(--logo); font-size: 13px; color: var(--ink2); padding-left: 2px; } .lt-mv { font-family: var(--heads); font-weight: 700; font-size: 11px; } .lt-mv.up { color: var(--fg); } .lt-mv.dn { color: var(--accent); } .lt-mv.flat { color: var(--dim); } .lt-name { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; min-width: 0; } .lt-name a { color: var(--fg); text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lt-name a:hover { color: var(--accent); } .lt-chip { display: inline-flex; align-items: center; height: 17px; padding: 0 7px; background: var(--accent); color: var(--onaccent); flex: none; clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); font-family: var(--heads); font-weight: 800; font-size: 10px; letter-spacing: .08em; line-height: 1; } .lt-chip.bye { background: var(--emph-bg); color: var(--emph-fg); } .lt-chip.q { background: var(--panel); color: var(--ink2); } .lt-chip.mini { height: 15px; padding: 0 6px; font-size: 9px; font-weight: 700; clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px); } .lt-num { text-align: right; font-size: 13.5px; color: var(--ink2); font-variant-numeric: tabular-nums; } .lt-num.dim { color: var(--muted); } .lt-pts { text-align: right; font-family: var(--logo); font-size: 15px; color: var(--fg); } .lt-note { font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 14px; max-width: 640px; } .lt-legend { display: flex; gap: 18px; margin-top: 14px; font-size: 12px; color: var(--muted); } .lt-legend > span { display: flex; align-items: center; gap: 6px; } @media (max-width: 640px) { .lcard { padding: 16px 14px 16px; } /* clip, not hidden: contains sub-pixel/skew spill from the fitted tables without creating a scroll container */ .lt-wrap { overflow-x: clip; } /* the numeric columns had no gutters and the last one hugged the card edge, while the 1fr name column hoarded ~160px for names like "Cole". Give the right side gutters + padding; the name column absorbs it. */ .lt-grid { min-width: 0; grid-template-columns: 22px 30px minmax(0, 1fr) 52px 50px; column-gap: 8px; padding-right: 6px; } .lt-grid > :nth-child(4), .lt-grid > :nth-child(6), .lt-grid > :nth-child(7), .lt-grid > :nth-child(8), .lt-grid > :nth-child(9) { display: none; } .lt-grid.cup { min-width: 0; grid-template-columns: 26px minmax(0, 1fr) 30px 30px 30px 52px; } .lt-grid.cup > :nth-child(3), .lt-grid.cup > :nth-child(7) { display: none; } .lt-name { font-size: 13.5px; } /* stay ONE line (nowrap+ellipsis) — wrapping overflowed the 44px row and crowded the next */ .mk-grid { min-width: 0; grid-template-columns: minmax(0, 1fr) 96px 54px 104px; } .mk-grid > :nth-child(4) { display: none; } .mk-grid.deals { min-width: 0; grid-template-columns: 44px minmax(0, 1fr) 86px 58px; } .mk-grid.deals > :nth-child(3), .mk-grid.deals > :nth-child(6) { display: none; } /* the table must FIT, not scroll: drop club/league, drop the min-price column (it's the offer form's own min + default anyway), and bound the open bid/offer form so the action cell can't widen the table past the screen */ /* SCOPED to .pl-market — the players page. The draft pool shares the .playerlist class but NOT its columns: here 2,3 are Club and League (safe to drop); in the pool they are Player and Pts. Unscoped, this rule deleted the player's NAME and his points from the draft board on every phone. */ .playerlist { min-width: 0 !important; width: 100%; table-layout: fixed; } .pl-market td:nth-child(2), .pl-market th:nth-child(2), .pl-market td:nth-child(3), .pl-market th:nth-child(3) { display: none; } .pl-market .fl { display: none; } .pl-market .pname { width: 34%; overflow-wrap: break-word; } .pl-market .act { width: 29%; } /* the offer/bid form does NOT fit a 100px action cell — on a tap it drops as a right-anchored popover spanning the row, instead of clipping off the screen edge */ .pl-market td.act { position: relative; overflow: visible; } .pl-market td.act details[open] .rowform { position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; /* max-width:100% of the ~105px cell was clamping this to a sliver — override it */ width: 280px; max-width: 86vw; box-sizing: border-box; display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; box-shadow: 0 8px 22px rgba(20, 18, 12, .18); font-size: 13px; } .pl-market td.act details[open] .rowform select, .pl-market td.act details[open] .rowform input[type="number"] { width: 100%; max-width: 100%; box-sizing: border-box; } .pl-market td.act details[open] .rowform button { width: 100%; white-space: nowrap; font-size: .9rem; margin-top: 2px; } /* the popover is a real little form: a header, then labelled fields */ .pl-market td.act details[open] .rowform .rf-hd { display: block; font-family: var(--logo); font-size: 12.5px; letter-spacing: .03em; color: var(--fg); padding-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pl-market td.act details[open] .rowform .rf-row { display: flex; flex-direction: column; align-items: stretch; gap: 4px; } .pl-market td.act details[open] .rowform .rf-lbl { display: block; font-family: var(--heads); font-weight: 700; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .pl-market td.act details[open] .rowform .rf-lbl .chest { letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--faint); } .pl-market td.act details[open] .rowform .rf-price { display: flex; width: 100%; } .pl-market td.act details[open] .rowform .rf-price input { flex: 1; width: auto; } /* skew from the RIGHT edge so the closed button can never lean off-screen */ .pl-market td.act details summary { transform-origin: right center; } } /* ---- season timeline (Cole's Claude Design component, 2026-07-10) ---- */ .stl { background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; padding: 22px 30px 24px; margin: .8rem 0 1.8rem; max-width: 980px; } .stl-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .stl-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--logo); font-size: 16px; letter-spacing: .05em; color: var(--fg); line-height: 1; } .stl-brand .bl { width: 15px; height: 18px; background: var(--accent); flex: none; clip-path: polygon(0 0, 42% 14%, 42% 60%, 100% 60%, 88% 100%, 0 100%); } .stl-sub { font-size: 12.5px; color: var(--muted); } .stl-grid { display: grid; grid-template-columns: 96px 1fr; column-gap: 18px; } .stl-rail { display: flex; flex-direction: column; gap: 12px; padding-top: 26px; } .stl-rail span { height: 34px; display: flex; align-items: center; justify-content: flex-end; text-align: right; line-height: 1.3; font-family: var(--heads); font-weight: 700; font-size: 10.5px; letter-spacing: .15em; color: var(--ink2); } .stl-plot { padding-top: 26px; } .stl-canvas { position: relative; } .stl-gl { position: absolute; top: 0; width: 1px; height: 80px; background: var(--gl); z-index: 0; } .stl-row { position: relative; height: 34px; z-index: 1; background: var(--inset); border-radius: 3px; } .stl-row.market { margin-top: 12px; } .stl-band { position: absolute; top: 0; bottom: 0; transform: skewX(-14deg); box-sizing: border-box; display: flex; align-items: center; justify-content: center; } .stl-band > span { transform: skewX(14deg); font-family: var(--heads); font-weight: 700; font-size: 10.5px; letter-spacing: .16em; padding-left: .16em; } .stl-band.qual.active { background: var(--fg); } .stl-band.qual.active > span { color: var(--emph-fg); } .stl-band.qual.upcoming { border: 1.5px solid var(--fg); } .stl-band.qual.upcoming > span { color: var(--fg); } .stl-band.qual.done { background: var(--dim); } .stl-band.qual.done > span { color: var(--emph-fg); } .stl-band.win.open { background: var(--accent); } .stl-band.win.done { background: var(--win-band); } .stl-band.win.upcoming { background: var(--accent); } .stl-winlabel { position: absolute; top: 50%; transform: translateY(-50%); font-family: var(--heads); font-weight: 700; font-size: 10px; letter-spacing: .14em; white-space: nowrap; color: var(--muted); } .stl-winlabel.open { color: var(--accent); } .stl-chip { position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 2; background: var(--fg); color: var(--emph-fg); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); height: 24px; padding: 0 11px; display: inline-flex; align-items: center; font-family: var(--logo); font-size: 11.5px; letter-spacing: .07em; line-height: 1; } .stl-chip.fin { background: var(--accent); } .stl-chip.done { background: var(--dim); } .stl-axis { position: relative; height: 15px; margin-top: 14px; } .stl-axis span { position: absolute; transform: translateX(-50%); white-space: nowrap; font-family: var(--heads); font-weight: 600; font-size: 11px; letter-spacing: .05em; color: var(--muted); } .stl-today { position: absolute; top: -6px; width: 2px; height: 92px; margin-left: -1px; background: var(--accent); box-shadow: 0 0 0 1.5px var(--card); z-index: 3; } .stl-todaytag { position: absolute; top: -26px; transform: translateX(-50%) skewX(-12deg); background: var(--accent); padding: 4px 9px; z-index: 3; } .stl-todaytag > span { display: block; transform: skewX(12deg); font-family: var(--heads); font-weight: 800; font-size: 9.5px; letter-spacing: .12em; color: var(--onaccent); white-space: nowrap; } @media (max-width: 640px) { .stl { padding: 16px 14px 18px; } .stl-grid { grid-template-columns: 70px 1fr; column-gap: 10px; } .stl-rail span { font-size: 9px; letter-spacing: .11em; } .stl-sub { display: none; } .stl-winlabel { display: none; } .stl-band > span { font-size: 8.5px; letter-spacing: .1em; } .stl-band.dvseg .lf { display: none; } .stl-band.dvseg .ls { display: inline; } .stl-chip { height: 20px; padding: 0 8px; font-size: 10px; } .stl-axis span { font-size: 8.5px; } .stl-axis span.minor { display: none; } .stl-todaytag { padding: 3px 7px; } .stl-todaytag > span { font-size: 8.5px; } .stl-today { height: 84px; } } /* ---- matchup hero ---- */ .hero { background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; padding: 1.05rem 1.25rem; max-width: 560px; margin: .8rem 0 1.5rem; position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--line); } .hero.won { border-color: var(--accent); } .hero.won::before { background: var(--accent); } .hero.lost::before { background: var(--fg); } .heroline { display: flex; align-items: baseline; gap: 1rem; margin-bottom: .65rem; } .heroline .me { font-family: var(--heads); font-weight: 800; font-size: 1.15rem; } .heroline .them { font-size: 1.1rem; font-family: var(--heads); font-weight: 600; } .heroline .score { font-family: var(--heads); font-weight: 800; font-size: 1.7rem; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .herotable { max-width: 330px; } .herotable td { border: none; padding: .16rem .6rem; } .herotable .lgname { text-align: center; color: var(--faint); font-family: var(--heads); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; } .herotable tr.edge-me td:first-child { font-weight: 800; color: var(--accent); } .herotable tr.edge-them td:last-child { font-weight: 800; color: var(--muted); } .matchline { background: var(--card); border: 1.5px solid var(--accent); border-radius: 10px; padding: .55rem .95rem; max-width: 560px; } /* ---- players: toggle + wire panel ---- */ .modetoggle { display: inline-flex; gap: 7px; margin: .2rem 0 .8rem; } .modetoggle a { padding: .5rem 1.3rem; color: var(--fg); font-family: var(--heads); font-weight: 700; font-size: .9rem; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); box-shadow: inset 0 0 0 2px var(--accent); } .modetoggle a.on { background: var(--accent); color: var(--onaccent); box-shadow: none; } .modetoggle a:hover { text-decoration: none; color: var(--accent); } .modetoggle a.on:hover { color: var(--onaccent); } /* Score Center controls: mode toggle (left) + US time-zone selector (right). Wraps to two rows on narrow screens; the zone bar goes full-width there. */ .sc-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin: .2rem 0 .9rem; } .sc-controls .modetoggle { margin: 0; } /* the segmented zone bar: a sunken track, the active zone a filled rosso pill. Six US zones — ET default. Pops via the accent fill, stays legible at 9-11px. */ .sc-tz { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: var(--inset); border-radius: 10px; box-sizing: border-box; } .sc-tzlbl { font-family: var(--heads); font-weight: 800; font-size: 9px; letter-spacing: .16em; color: var(--faint); padding: 0 8px 0 6px; } .sc-tz button { border: none; background: transparent; cursor: pointer; font-family: var(--heads); font-weight: 800; font-size: 11px; letter-spacing: .05em; color: var(--muted); padding: 7px 11px; border-radius: 7px; line-height: 1; transition: color .12s ease, background .12s ease; } .sc-tz button:hover:not(.on) { color: var(--fg); } .sc-tz button.on { background: var(--accent); color: var(--onaccent); box-shadow: 0 1px 3px rgba(200, 52, 42, .3); } .sc-tzsel { display: none; } /* desktop uses the pill bar above */ /* key for the red rail on match rows — its marker mimics the rail itself (a short rosso bar), not a swatch, so the link to the row edge is obvious */ .sc-legend { display: flex; align-items: center; gap: 8px; margin: 0 0 .9rem; font-size: 12.5px; color: var(--muted); } .sc-legend i { width: 3px; height: 15px; border-radius: 2px; background: var(--accent); flex: none; } /* phones: one control, not six. The segmented bar collapses to a single styled dropdown — a filled rosso pill showing the current zone with a caret. */ @media (max-width: 640px) { .sc-controls { gap: 10px; } .sc-tz { background: transparent; padding: 0; gap: 0; } .sc-tzlbl, .sc-tz button { display: none; } .sc-tzsel { display: block; -webkit-appearance: none; appearance: none; border: none; cursor: pointer; background-color: var(--accent); color: var(--onaccent); font-family: var(--heads); font-weight: 800; font-size: 12px; letter-spacing: .05em; line-height: 1; padding: 10px 30px 10px 14px; border-radius: 9px; box-shadow: 0 1px 3px rgba(200, 52, 42, .3); /* white caret, baked in so it needs no extra element */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23FCFBF8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } .sc-tzsel option { color: var(--fg); background: var(--card); } } .window-hero { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; background: var(--emph-bg); border-radius: 12px; padding: 14px 18px; margin-bottom: .7rem; max-width: 740px; } .window-hero.open { background: var(--accent); } .window-hero .big { font-family: var(--logo); font-size: 20px; letter-spacing: .05em; color: var(--emph-fg); line-height: 1; -webkit-font-smoothing: antialiased; } .window-hero .sub { font-family: var(--heads); font-weight: 600; font-size: 12px; color: rgba(245, 243, 238, .75); } /* remaining budget, shown where it's actually used: sizing a sealed bid */ .rowform .chest { color: var(--muted); font-family: var(--heads); font-weight: 700; font-size: .78rem; white-space: nowrap; } /* an open bid/offer form must never widen the page: a select sizes to its longest option, which blew past the cell on mobile */ .rowform { max-width: 100%; } .rowform > * { min-width: 0; } /* flex items default to min-width:auto and won't shrink */ .rowform select { max-width: 100%; } .rowform .bidnum { width: 4.5rem; } @media (max-width: 640px) { .filters { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; } .filters select { min-width: 0; font-size: .8rem; padding: .35rem .3rem; } .filters input[name="q"], .filters input[type="hidden"] + input { min-width: 0; } .filters input { grid-column: 1 / 3; } .filters button { grid-column: 3 / 4; } .filters input[type="hidden"] { display: none; grid-column: auto; } } /* ---- draft room (client, 2026-07-10) ---- */ .dr-tabs { flex-wrap: wrap; } .dr-tabs { gap: 10px; } .dr-tab { display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; background: var(--card); border: 2px solid var(--panel-lk); color: var(--fg); transform: skewX(-14deg); font-family: var(--logo); font-size: 15px; letter-spacing: .05em; line-height: 1; text-decoration: none !important; -webkit-font-smoothing: antialiased; transition: transform .15s ease, box-shadow .15s ease; } .dr-tab > *, .dr-tab::before { transform: skewX(14deg); } .dr-tab:hover { transform: skewX(-14deg) translateY(-1px); } .dr-tab em { font-style: normal; font-family: var(--heads); font-weight: 800; font-size: 9.5px; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; } .dr-tab.st-complete { color: var(--faint); border-color: var(--panel-lk); background: transparent; } .dr-tab.st-pending { border-style: dashed; color: var(--muted); } .dr-tab.st-paused { background: #f5a524; border-color: #f5a524; color: #1a1205; font-weight: 800; box-shadow: 0 3px 12px rgba(245, 165, 36, .35); } /* PAUSED banner — full-width, amber, gently pulsing: impossible to miss */ .dr-paused-bar { display: flex; align-items: center; gap: .6rem; margin: 0 0 .9rem; padding: .7rem 1rem; border-radius: 10px; background: linear-gradient(90deg, #f5a524, #f7b83f); color: #1a1205; border: 2px solid #d98a00; box-shadow: 0 4px 16px rgba(245, 165, 36, .30); animation: dpb-pulse 1.9s ease-in-out infinite; } .dr-paused-bar .dpb-ico { font-size: 1.4rem; line-height: 1; } .dr-paused-bar .dpb-txt { font-size: 1rem; letter-spacing: .01em; } .dr-paused-bar strong { text-transform: uppercase; letter-spacing: .04em; } @keyframes dpb-pulse { 0%, 100% { box-shadow: 0 4px 16px rgba(245, 165, 36, .30); } 50% { box-shadow: 0 4px 22px rgba(245, 165, 36, .60); } } @media (prefers-reduced-motion: reduce) { .dr-paused-bar { animation: none; } } /* the league being drafted RIGHT NOW — the one thing you must not miss */ .dr-tab.st-live { background: var(--accent); border-color: var(--accent); color: var(--onaccent); box-shadow: 0 3px 12px rgba(200, 52, 42, .30); } .dr-tab.st-live em { color: rgba(252, 251, 248, .92); } .dr-tab.st-live::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--card); animation: drpulse 1.6s ease-in-out infinite; } /* and this is the one you're LOOKING at (may not be the live one) */ .dr-tab.on { box-shadow: 0 0 0 2.5px var(--fg); } .dr-tab.on.st-live { box-shadow: 0 0 0 2.5px var(--fg), 0 3px 12px rgba(200, 52, 42, .30); } /* PHONES: the other four leagues are dead weight in a 390px header — a finished draft, and three that haven't started, cost a whole row and tell you nothing you can act on. Show ONLY the league you're looking at, and sit it on the same line as the DRAFT ROOM title so the header is one line instead of two. :not(.on) so the tab for the league you are ACTUALLY viewing never vanishes. (The other drafts stay reachable from League Home > Draft History.) */ @media (max-width: 700px) { .dr-tab:not(.on) { display: none; } .cf-head { flex-wrap: nowrap; gap: 10px; margin: .8rem 0 1rem; } .cf-head .cf-nav { margin-left: auto; min-width: 0; } .dr-tabs { flex-wrap: nowrap; gap: 0; } /* the lone tab has to survive a long league name next to the title */ .dr-tab.on { padding: 8px 12px; font-size: 13px; gap: 6px; min-width: 0; } .dr-tab.on em { font-size: 9px; letter-spacing: .08em; } } .dr-otc { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .dr-otc.me { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .dr-otcgrid { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; } .dr-picknow { display: flex; flex-direction: column; gap: 5px; } .dr-picknow .k { font-family: var(--heads); font-weight: 800; font-size: 10.5px; letter-spacing: .16em; color: var(--muted); } .dr-picknow .k i { font-style: normal; color: var(--dim); } .dr-picknow .who { font-family: var(--logo); font-size: 24px; color: var(--fg); line-height: 1.1; text-transform: uppercase; -webkit-font-smoothing: antialiased; } .dr-picknow .who small { display: block; font-family: var(--body); font-size: 12px; font-weight: 600; color: var(--muted); text-transform: none; } /* the live pre-open countdown: a big ticking clock with a small label beneath */ .dr-picknow .who small.dr-countdown { display: block; margin-top: 8px; } .dr-cd-time { display: block; font-family: var(--logo); color: var(--accent); font-weight: 800; line-height: 1; letter-spacing: .01em; font-variant-numeric: tabular-nums; font-size: clamp(38px, 11vw, 64px); } .dr-cd-when { display: block; margin-top: 4px; font-family: var(--body); font-size: 13px; font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: normal; } /* notifications opt-in pill (shared: draft header, profile, …) */ .push-optin { font-family: var(--heads); font-weight: 700; font-size: 12px; padding: .4rem .85rem; border-radius: 999px; cursor: pointer; white-space: nowrap; border: 1.5px solid var(--mine-line); background: var(--card); color: var(--fg); } .push-optin:hover { border-color: var(--accent); color: var(--accent); } .push-optin.on { background: var(--accent); color: var(--onaccent); border-color: var(--accent); } .push-optin:disabled { opacity: .6; cursor: default; } .dr-alerts { margin-left: auto; } /* draft-header placement only */ .dr-clock { display: flex; flex-direction: column; align-items: center; gap: 3px; } .dr-clock .t { font-family: var(--logo); font-size: 34px; color: var(--fg); line-height: 1; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; } .dr-clock.hot .t { color: var(--accent); } .dr-clock .l { font-family: var(--heads); font-weight: 700; font-size: 8.5px; letter-spacing: .14em; color: var(--faint); } .dr-auto { margin: 0; } /* The card head is a WIDE-LAYOUT-ONLY element. Everywhere else it collapses to `display: contents`, which puts #drSnd back to being a direct child of .dr-otc — the narrow bar (a flex row) and the phone grid-areas both depend on that. Same for the count/hint spans the wide roster and queue heads add. */ .dr-otchead { display: contents; } .dr-otchead .cf-title { display: none; } .dr-rcount i { font-style: normal; } .dr-qcount, .dr-qmore { display: none; } .dr-snd { border: 1.5px solid var(--line); background: transparent; cursor: pointer; line-height: 1; padding: 7px 9px; border-radius: 8px; align-self: center; color: var(--ink2); display: inline-flex; align-items: center; justify-content: center; } .dr-snd:hover { border-color: var(--accent); } .dr-snd svg { width: 15px; height: 15px; display: block; } /* one icon, two states: the waves mean live, the red cross means muted */ .dr-snd .xed { display: none; stroke: var(--accent); } .dr-snd.off .wav { display: none; } .dr-snd.off .xed { display: block; } .dr-recent { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 1rem; max-width: 980px; font-size: 13px; color: var(--ink2); } .dr-recent .lbl { font-family: var(--heads); font-weight: 800; font-size: 9.5px; letter-spacing: .16em; color: var(--muted); } .dr-recent .rp b { font-family: var(--heads); color: var(--faint); font-size: 11px; } .dr-recent .rp i { font-style: normal; color: var(--muted); font-size: 11.5px; } .dr-roster { margin: 0; line-height: 2; } .dr-slot { display: flex; align-items: center; gap: 9px; padding: 3px 2px; border-bottom: 1px solid var(--inset); font-size: 13.5px; } .dr-slot:last-child { border-bottom: none; } .dr-slot .pos.ghost { background: transparent; color: var(--faint); box-shadow: inset 0 0 0 1.5px var(--panel-lk); } .dr-slot.empty .nm { font-size: 12.5px; letter-spacing: .04em; } /* the row is width-starved: 3 buttons + grip + rank leave ~90px for the name in a 300px card. So the name gets min-width:0 and ellipsizes on ONE line — it must never wrap, or the chip wraps with it and the row grows to 3 lines. */ .dr-qrow { display: grid; grid-template-columns: 12px 14px minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 5px 2px; border-bottom: 1px solid var(--panel); cursor: grab; } .dr-qrow:last-child { border-bottom: none; } .dr-qrow.sel { outline: 1.5px dashed var(--accent); outline-offset: -1.5px; background: var(--mine); } .dr-qrow .grip { color: var(--dim); font-size: 11px; letter-spacing: -2px; } .dr-qrow .rk { font-family: var(--logo); font-size: 12px; color: var(--faint); text-align: center; } .dr-qrow .nm { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 13px; font-weight: 500; } .dr-qrow .nm .pos { flex: none; font-size: 9px; padding: 2px 4px; min-width: 0; } .dr-qrow .nm .t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dr-qrow .acts { display: flex; gap: 2px; } /* queue actions: proper icon buttons. They were four red underlined text links (top / up / down / x), which read as a row of hyperlinks, not controls. All three share ONE rest/hover/disabled treatment — up, down and remove are peers, so nothing here varies but the glyph. */ .qbtn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border-radius: 7px; border: 1.5px solid var(--mine-line); background: var(--sel); color: var(--accent); cursor: pointer; transition: transform .12s ease, border-color .12s ease, color .12s ease, background .12s ease; } .qbtn svg { width: 13px; height: 13px; display: block; } .qbtn:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: var(--onaccent); transform: translateY(-1px); } .qbtn:active:not(:disabled) { transform: translateY(0); } .qbtn:focus-visible { outline: 2px solid var(--fg); outline-offset: 1px; } /* disabled is a different material, not a faded copy: no tint, no lift */ .qbtn:disabled { background: var(--inset); border-color: var(--line); color: var(--dim); cursor: not-allowed; } /* filters live on the title line now: no margin, no wrap, and they must not look like part of the summary's click target */ .dr-filters { margin: 0; display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 0; margin-left: 18px; cursor: default; } .dr-filters select, .dr-filters input { margin: 0; } .dr-filters input { max-width: 240px; } .dr-pool summary { flex-wrap: wrap; } @media (max-width: 640px) { .dr-filters { flex-basis: 100%; margin-left: 0; margin-top: 8px; flex-direction: column; align-items: stretch; gap: 8px; } .dr-filters input { max-width: none; } /* .dr-filters .dr-chips (0,2,0), not .dr-chips (0,1,0): the base `display: none` lives LATER in this file, and an equal-specificity rule further down wins on source order — which is exactly why the chips never appeared the first time. */ .dr-filters #drPos { display: none; } /* the chips replace it */ .dr-filters .dr-chips { display: flex; } } /* pool row actions: DRAFT (solid) + QUEUE (ghost) as one matched pair */ .dr-acts { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; } .dr-acts .mk-btn { padding: 7px 13px; font-size: 10px; } /* .mk-btn.go has border:none, which made it 3px shorter than the ghost — give it a matching border so the pair lines up */ .dr-acts .mk-btn.go { border: 1.5px solid var(--accent); } .dr-acts .mk-btn.q { border-color: var(--gl); color: var(--muted); background: transparent; } .dr-acts .mk-btn.q:hover { border-color: var(--accent); color: var(--accent); } /* the PLAYER column was flexing to ~700px, so names ended early and the stats were stranded far to the right. Fixed layout with real column widths keeps the table reading as a dense data grid instead of an archipelago. */ .dr-pool .playerlist { table-layout: fixed; width: 100%; } .dr-pool .playerlist th, .dr-pool .playerlist td { padding: 7px 8px; } /* percentages, so the stats stay anchored near the names instead of the PLAYER column swelling to 681px and stranding them across a sea of nothing */ .dr-pool .playerlist th:nth-child(1), .dr-pool .playerlist td:nth-child(1) { width: 5%; } .dr-pool .playerlist th:nth-child(2), .dr-pool .playerlist td:nth-child(2) { width: 32%; } .dr-pool .playerlist th:nth-child(n+3):nth-child(-n+6), .dr-pool .playerlist td:nth-child(n+3):nth-child(-n+6) { width: 9%; } .dr-pool .playerlist th:nth-child(7), .dr-pool .playerlist td:nth-child(7) { width: 27%; } /* PHONES: table-layout:fixed can't shrink a cell below its content, so the three stat columns (54px each) plus the action buttons (162px) ate the whole 390px and squeezed the NAME column to literally 0. Something had to go: GP / PPG / Best are the least useful numbers to have in front of you while you're on the clock, so they drop and the name gets the room. Season points stay — that's the one number you actually draft on. (The full line is still on the Players page.) */ @media (max-width: 640px) { .dr-pool .playerlist th:nth-child(n+4):nth-child(-n+6), .dr-pool .playerlist td:nth-child(n+4):nth-child(-n+6) { display: none; } /* the position column must be able to HOLD ITS OWN CHIP. At 9% (33px) the FWD chip is 39px and simply overflowed its cell, bleeding across the player's name — a table cell doesn't clip its content, it just spills. Size the column off the chip, not off a tidy-looking percentage, and take the room from the name (which has it). */ .dr-pool .playerlist th:nth-child(1), .dr-pool .playerlist td:nth-child(1) { width: 14%; } .dr-pool .playerlist th:nth-child(2), .dr-pool .playerlist td:nth-child(2) { width: 41%; } .dr-pool .playerlist th:nth-child(3), .dr-pool .playerlist td:nth-child(3) { width: 12%; } .dr-pool .playerlist th:nth-child(7), .dr-pool .playerlist td:nth-child(7) { width: 33%; } /* belt and braces: even if a longer tag ever appears, it stays inside its column */ .dr-pool .playerlist td:nth-child(1) { overflow: hidden; padding-right: 2px; } .dr-pool .playerlist td:nth-child(1) .pos { max-width: 100%; box-sizing: border-box; } .dr-pool .playerlist th, .dr-pool .playerlist td { padding: 7px 4px; } /* the buttons are the other half of the squeeze — trim them to what a thumb needs */ .dr-pool .dr-acts { gap: 4px; } .dr-pool .dr-acts .mk-btn { padding: 6px 8px; font-size: 10.5px; letter-spacing: .04em; } .dr-pool .playerlist .pname { white-space: normal; } .dr-pool .playerlist .pname small { display: block; font-size: 11px; } /* the "club" tag is redundant next to the gold GK badge, and on a long club name it truncated to "cl…" — the badge already says this is a club slot */ .dr-pool .playerlist .pname .chip { display: none; } } .dr-pool .playerlist td.act { text-align: right; white-space: nowrap; } .dr-pool .playerlist .pname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dr-pool .playerlist .pname small { display: block; } .dr-pool .playerlist tr:hover td { background: var(--mine); } .dr-pool .playerlist td.num strong { font-family: var(--logo); font-weight: 400; font-size: 14px; color: var(--accent); -webkit-font-smoothing: antialiased; } .dr-pool .playerlist .colhead th { color: var(--accent); } /* position chips: the phone's filter. One tap instead of a dropdown, and a position you cannot legally roster greys itself out — the pick becomes unreachable instead of being rejected after you've already tapped it. Desktop keeps the select. */ /* .dr-filters .dr-chip (0,2,0), not .dr-chip (0,1,0): the chips sit inside , and `.filters button` (0,1,1) paints every button in there solid rosso — so an UNSELECTED chip rendered as if it were active. Out-specify it. */ .dr-chips { display: none; gap: 6px; flex-wrap: wrap; } .dr-filters .dr-chip { font-family: var(--heads); font-weight: 800; font-size: 11px; letter-spacing: .06em; padding: 7px 12px; border-radius: 999px; border: 1.5px solid var(--panel-lk); background: var(--card); color: var(--muted); cursor: pointer; line-height: 1; transform: none; transition: background .12s ease, color .12s ease, border-color .12s ease; } .dr-filters .dr-chip:hover:not(:disabled) { border-color: var(--fg); color: var(--fg); background: var(--card); } .dr-filters .dr-chip.on { background: var(--emph-bg); border-color: var(--emph-bg); color: var(--emph-fg); } .dr-filters .dr-chip[data-pos="GK"].on { background: var(--gk); border-color: var(--gk); } .dr-filters .dr-chip[data-pos="DEF"].on { background: var(--def); border-color: var(--def); } .dr-filters .dr-chip[data-pos="MID"].on { background: var(--mid); border-color: var(--mid); } .dr-filters .dr-chip[data-pos="FWD"].on { background: var(--fwd); border-color: var(--fwd); } /* disallowed: a different material, not a faded copy — you cannot roster one of these */ .dr-filters .dr-chip:disabled { background: var(--inset); border-color: var(--line); color: var(--dim); cursor: not-allowed; text-decoration: line-through; } /* the clock is a COMPACT BAR, not a card: it was a tall block of whitespace pushing the pool below the fold */ .dr-otc { max-width: none; display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; padding: 12px 18px; } .dr-otc .dr-otcgrid { flex: 1 1 auto; gap: 24px; } .dr-otc .dr-auto { margin: 0; flex: 0 1 auto; } .dr-picknow { gap: 3px; } .dr-picknow .who { font-size: 20px; } /* phones: the hero was five stacked blocks (kicker, team, chip, clock, autopilot) eating ~310px before you saw a single pick. Collapse to two rows — [who | clock] over [auto-draft | sound] — by letting .dr-otcgrid's children join the card's own grid via display: contents. */ @media (max-width: 640px) { .dr-otc { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who clock" "auto snd"; align-items: center; gap: 10px; padding: 12px 14px; } .dr-otcgrid { display: contents; } .dr-picknow { grid-area: who; gap: 2px; min-width: 0; } .dr-clock { grid-area: clock; align-items: flex-end; } .dr-auto { grid-area: auto; padding: 6px 10px; gap: 8px; margin: 0; } /* justify-self, or the button stretches to fill its whole grid column */ .dr-snd { grid-area: snd; justify-self: end; padding: 6px 9px; font-size: 13px; } .dr-auto strong, .dr-auto button { white-space: nowrap; } /* the cell is too narrow for label + button on one line — let it wrap (button drops under the label) instead of the button bleeding out the right edge */ .dr-auto form { flex-wrap: wrap; gap: 6px 10px; } .dr-auto button.primary { max-width: 100%; } .dr-picknow .k { font-size: 9.5px; } .dr-picknow .who { font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* on YOUR pick the red chip already says it — drop the duplicate caption */ .dr-otc.me .dr-picknow .who small { display: none; } .dr-picknow .who small { font-size: 11px; } .dr-picknow .lt-chip { align-self: flex-start; } .dr-clock .t { font-size: 26px; } .dr-auto small { display: none; } } /* the board keeps the room, roster + queue ride beside it. Below ~1400 the side column drops UNDER the board rather than squeezing it — the board showing all ten columns matters more than the sidebar staying put. */ /* Draft layout. WIDE: the on-the-clock card, MY ROSTER and MY QUEUE share the top row; the board takes the full width beneath them. The old sidebar dropped under the board below 1400px, which buried the roster/queue a board-height down on any ordinary desktop — and squeezed the ten-column board on the wide ones. */ /* 1.15fr : 1fr : 1fr per the design. minmax(0, …) on ALL THREE, never a bare fr — a bare 1fr is minmax(AUTO, 1fr), and .dr-col spans 1/-1, so the 1800px board would set the columns' min size and blow the page out sideways instead of scrolling inside .db-scroll. (This has already been broken twice.) */ .dr-layout { display: grid; gap: 16px; align-items: start; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); } .dr-layout > .lcard, .dr-side > .lcard { margin: 0; max-width: none; } .dr-side { display: contents; } /* roster -> col 2, queue -> col 3 */ .dr-side > .lcard { padding: 14px 12px; } /* minmax(0, 1fr), NOT 1fr — a bare 1fr is minmax(AUTO, 1fr), so the column refuses to shrink under the board's content width and the 1800px board blows the page out sideways instead of scrolling inside .db-scroll */ .dr-col { grid-column: 1 / -1; min-width: 0; } /* NARROW: back to exactly what mobile had — on-the-clock, then the board + pool, then roster/queue side by side (stacking under 700). `order` does it, so the markup can put the side cards up top for desktop without moving them on phones. */ @media (max-width: 1200px) { /* stays a GRID with minmax(0, 1fr): that definite, shrinkable column is what keeps the 1800px board scrolling inside .db-scroll instead of blowing the page out sideways. Only `order` moves the cards. */ .dr-layout { grid-template-columns: minmax(0, 1fr); } .dr-otc { order: 1; grid-column: 1; } .dr-col { order: 2; grid-column: 1; } .dr-side { order: 3; grid-column: 1; display: flex; flex-direction: row; gap: 16px; min-width: 0; } .dr-side > .lcard { flex: 1; min-width: 0; } } @media (max-width: 700px) { .dr-side { flex-direction: column; } } /* ── WIDE ONLY (Claude Design "Ligazo Draft Room", 2026-07-17) ─────────────── The top row becomes three real cards of equal height: on-the-clock (1.15fr), roster, queue. This block is ADDITIVE and min-width-gated — everything at or below 1200px keeps the compact bar and the stacked order it has today, which is what the phone layout was signed off on. Placement is load-bearing: `.dr-otchead .cf-title` and `.dr-slot` here are EQUAL specificity to the base rules they beat, so source order is the only reason they win. A media query adds no specificity. Do not move this block. */ @media (min-width: 1201px) { .dr-layout { align-items: stretch; } /* ---- on the clock ---- */ .dr-otc { display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0; padding: 20px 24px; } .dr-otchead { display: flex; margin-bottom: 16px; } .dr-otchead .cf-title { display: inline-flex; } .dr-snd { width: 32px; height: 32px; padding: 0; align-self: auto; } .dr-otcgrid { gap: 20px; flex-wrap: nowrap; margin-bottom: 16px; } .dr-picknow { gap: 4px; min-width: 0; } .dr-picknow .who { font-size: 27px; } /* a hairline between the pick and the clock, drawn on the clock itself so it stretches with the row instead of needing a spacer element */ .dr-otcgrid .dr-clock { align-items: flex-start; gap: 4px; padding-left: 20px; border-left: 1px solid var(--inset); } .dr-clock .t { font-size: 38px; } /* the auto-draft block sinks to the card's floor: it is the one control here, and the card's height is set by its neighbours */ .dr-otc .dr-auto { margin-top: auto; background: var(--bg); border: none; border-radius: 10px; padding: 12px 14px; gap: 12px; flex-direction: row; align-items: center; } .dr-otc .dr-auto form { flex: 0 0 auto; } /* readable label: heads font, sentence case, tight spacing (was --logo 11px uppercase, which was hard to read); the status is the light, not words */ .dr-otc .dr-auto button.primary { border: none; background: var(--accent); color: var(--onaccent); padding: 9px 14px; font-family: var(--heads); font-weight: 800; font-size: 12px; letter-spacing: .01em; line-height: 1; text-transform: none; -webkit-font-smoothing: antialiased; } .dr-otc .dr-auto button.primary:hover { background: #A62A22; } /* ---- roster + queue ---- */ .dr-side > .lcard { padding: 20px 24px; display: flex; flex-direction: column; } .dr-rhead, .dr-qhead { margin-bottom: 0; } .dr-rcount, .dr-qcount { display: inline; font-family: var(--logo); font-size: 14px; color: var(--faint); } /* --dim, not --gl: --gl is a hairline-guide shade and vanishes on the dark card */ .dr-rcount i { color: var(--dim); } /* flex-basis 100% drops these onto their own line inside the wrapping head */ .dr-caps, .dr-qsub { flex-basis: 100%; font-size: 12px; color: var(--faint); margin: 2px 0 12px; } /* the eight slots share the card's height, so the roster reads as a full eight-man sheet with the empties visible rather than a short list */ .dr-slots { display: flex; flex-direction: column; flex: 1; } .dr-slot { flex: 1; min-height: 30px; padding: 0; gap: 10px; border-bottom: none; border-top: 1px solid var(--inset); } .dr-slot:first-child { border-top: none; } .dr-slot .pos { flex: none; width: 34px; height: 17px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; letter-spacing: .08em; } .dr-slot .nm { min-width: 0; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dr-slot .chip { border: none; padding: 0; font-weight: 700; font-size: 8.5px; letter-spacing: .1em; color: var(--dim); text-transform: uppercase; } /* queue rows become discrete pills instead of a ruled list */ #drQueue { display: flex; flex-direction: column; gap: 8px; } .dr-qrow { height: 44px; padding: 0 10px 0 12px; gap: 10px; background: var(--panel); border-radius: 10px; border-bottom: none; } .dr-qrow .rk { font-size: 14px; } .dr-qmore { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 44px; margin-top: 8px; padding: 8px; border: 1.5px dashed var(--line2); border-radius: 10px; font-size: 12px; color: var(--dim); text-align: center; } } /* the pool is full width now — it was the cramped column next to the sidebar */ .dr-pool { max-width: none; } .dr-pool summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .dr-pool summary::-webkit-details-marker { display: none; } .dr-pool .chev { display: none; } .dr-poolbody { max-height: 64vh; overflow-y: auto; margin-top: 10px; } .dr-pool-spacer { display: none; } @media (max-width: 900px) { .dr-pool { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 60; margin: 0; border-radius: 14px 14px 0 0; max-width: none; box-shadow: 0 -4px 18px rgba(20, 18, 12, .18); padding: 12px 16px; } .dr-pool summary::before { content: ""; position: absolute; left: 50%; top: 5px; transform: translateX(-50%); width: 44px; height: 4px; border-radius: 2px; background: var(--panel-lk); } .dr-pool { padding-top: 14px; } .dr-pool summary { position: relative; } .dr-pool .chev { display: inline; color: var(--accent); } .dr-pool[open] .chev { transform: rotate(180deg); display: inline-block; } .dr-poolbody { max-height: 52vh; } .dr-pool-spacer { display: block; height: 64px; } } /* ---- draft (legacy bits kept) ---- */ .draftcols { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.6rem; } @media (max-width: 900px) { .draftcols { grid-template-columns: 1fr; } } .scrollx { overflow-x: auto; } /* ---- the draft board (Ligazo Draft Board, ported 2026-07-13) ---- round labels ride OUTSIDE the horizontal scroller so they stay put while the picks scroll under them. */ /* .cf-card clamps to 820px; the board needs the whole page or ten columns can never fit */ .db-card { max-width: none; } .db-legend { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); } .db-legend i { width: 12px; height: 12px; border-radius: 3px; background: var(--accent); } .db-sub { margin: 0 0 16px; font-size: 12.5px; color: var(--faint); } .db-wrap { display: flex; gap: 6px; align-items: flex-start; } .db-rounds { display: flex; flex-direction: column; gap: 6px; flex: none; } /* :not(.db-rspacer) — `.db-rounds span` (0,1,1) OUTRANKS `.db-rspacer` (0,1,0), so the spacer was silently taking the LABEL's height instead of the header's, and every round label sat out of step with its own row. */ .db-rounds span:not(.db-rspacer) { width: 32px; height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-family: var(--logo); font-size: 15px; letter-spacing: .03em; color: var(--dim); } .db-scroll { flex: 1; min-width: 0; overflow-x: auto; padding-bottom: 8px; } .db-rows { display: flex; flex-direction: column; gap: 6px; } .db-row { display: flex; gap: 6px; } /* flex:1 with a min-width floor: the cells GROW to fill a wide board (all ten columns visible, no scroll) and stop shrinking at a readable width, at which point .db-scroll takes over. A fixed 210px could never fit ten across. */ /* floor of 100px: ten of those + gaps fits a 1200px laptop, so the whole board shows without scrolling on any real desktop. They grow past 140px on a big screen. */ .db-cell { flex: 1 1 0; min-width: 96px; height: 58px; box-sizing: border-box; border-radius: 10px; background: var(--card); border-left: 3px solid var(--rail); box-shadow: 0 1px 2px rgba(20, 18, 12, .08); padding: 7px 10px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; } .db-cell.mine { background: var(--sel); box-shadow: 0 1px 3px rgba(200, 52, 42, .14), inset 0 0 0 1.5px rgba(200, 52, 42, .30); } .db-cell.empty { background: var(--inset); box-shadow: none; } .db-cell.otc { background: var(--mine); box-shadow: 0 0 0 2px var(--accent), 0 2px 8px rgba(200, 52, 42, .18); } .db-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .db-top .no { font-family: var(--logo); font-weight: 400; font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; } /* column header = the manager. Same flex geometry as .db-cell or the columns drift out of alignment with the rows below. */ /* the column cap = the manager's own colour, filled. Ten beige pills read as washed-out; a solid --rail nameplate makes each owner pop and ties the header to its colour-railed column below. Every MGR_COLOR is dark and saturated, so light text clears contrast on all ten and in both themes. */ .db-head { flex: 1 1 0; min-width: 96px; box-sizing: border-box; height: 44px; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 0 12px; border-radius: 10px 10px 0 0; background: var(--rail); overflow: hidden; box-shadow: 0 1px 3px rgba(20, 18, 12, .16); } /* mine is already --rail == --accent; a ring sets it apart without a colour change */ .db-head.mine { box-shadow: 0 1px 3px rgba(200, 52, 42, .22), inset 0 0 0 1.5px rgba(255, 255, 255, .28); } .db-head .tn { font-family: var(--heads); font-weight: 800; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: #FCFBF8; -webkit-font-smoothing: antialiased; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .db-head .mn { font-size: 10.5px; font-weight: 600; color: rgba(252, 251, 248, .78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .db-heads { position: sticky; top: 0; z-index: 2; } .db-rounds .db-rspacer { width: 32px; height: 42px; flex: none; } .db-rounds i { font-style: normal; display: block; font-family: var(--body); font-size: 10px; color: var(--dim); line-height: 1; } .db-pos { flex: none; font-family: var(--heads); font-weight: 800; font-size: 10px; letter-spacing: .08em; } .db-pos[data-pos="GK"] { color: var(--gk); } .db-pos[data-pos="DEF"] { color: var(--def); } .db-pos[data-pos="MID"] { color: var(--mid); } .db-pos[data-pos="FWD"] { color: var(--fwd); } .db-name { font-weight: 600; font-size: 14.5px; color: var(--fg); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .db-otc { font-family: var(--heads); font-weight: 800; font-size: 8.5px; letter-spacing: .12em; color: var(--accent); } @media (max-width: 640px) { /* BOTH need flex:none. .db-cell/.db-head are flex items with `flex: 1 1 0`, and a flex-basis of 0 OVERRIDES width — so a bare `width: 168px` was silently ignored on the cells (they collapsed to their 96px min-width) while the headers, which had flex:none, honoured it. Headers 168 / columns 96: every manager's name drifted further from his own column. Size them the same way or they cannot line up. */ /* tighter cells: 168x58 was more room than the content ever used, and every pixel here is a pixel of board you can actually see on a 390px screen */ .db-cell, .db-head { flex: none; width: 148px; } .db-cell { height: 50px; padding: 6px 9px; } .db-head { height: 38px; padding: 0 9px; } .db-rows, .db-row, .db-rounds { gap: 5px; } .db-name { font-size: 14px; } /* the round rail cost 34px (a 28px rail + a 6px gap) before the board even began. R1..R8 fit in 22px. ONE rule for the rail and ONE for the spacer — a second rule of equal specificity further down silently wins on source order, and the rail's height must track .db-cell (50) and .db-head (38) or the rows stop lining up. */ .db-wrap { gap: 4px; } .db-rounds span:not(.db-rspacer) { width: 22px; height: 50px; font-size: 13px; } .db-rounds .db-rspacer { width: 22px; height: 38px; } .db-card { padding-left: 12px; padding-right: 12px; } } .otcline { background: var(--card); border: 1.5px solid var(--line); border-radius: 10px; padding: .65rem .95rem; } .otcline.meotc { border-color: var(--accent); background: var(--mine); font-family: var(--heads); } h1 small a { margin-right: .8rem; } h1 small a.onlg { font-weight: 800; color: var(--accent); text-decoration: none; border-bottom: 2px solid var(--accent); } /* ---- the table & race ---- */ .move .up { color: var(--accent); font-size: .78rem; font-weight: 700; } .move .down { color: var(--faint); font-size: .78rem; } .race { width: 100%; max-width: 680px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; } .race polyline { stroke: var(--faint); opacity: .5; } .race polyline[stroke-width="3"] { stroke: var(--accent); opacity: 1; } .legend { max-width: 680px; display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .85rem; } .swatch { display: inline-block; width: .7em; height: .7em; margin-right: .35em; clip-path: polygon(20% 0, 100% 0, 100% 80%, 80% 100%, 0 100%, 0 20%); } /* mobile */ @media (max-width: 640px) { main { padding: 1rem .8rem 4rem; } /* nav geometry lives in the nav block above — do not re-set flex-wrap here */ .heroline .score { font-size: 1.45rem; } } /* ---- the race, properly drawn ---- */ .race { width: 100%; max-width: 760px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .4rem; } .race-grid { stroke: var(--line); stroke-width: 1; } .race-base { stroke: var(--muted); stroke-width: 1.2; } .race-tick { font: 600 11px "Archivo", sans-serif; fill: var(--faint); letter-spacing: .04em; } .race-other { stroke: var(--faint); stroke-width: 1.3; opacity: .38; fill: none; } .race-lead { stroke: var(--fg); stroke-width: 2; fill: none; } .race-me { stroke: var(--accent); stroke-width: 3; fill: none; } .race-dot { fill: var(--faint); opacity: .5; } .race-dot-lead { fill: var(--fg); } .race-dot-me { fill: var(--accent); } .race-lab { font: 500 12px "Instrument Sans", sans-serif; fill: var(--muted); } .race-lab-lead { font-weight: 600; fill: var(--fg); } .race-lab-me { font: 700 12px "Archivo", sans-serif; fill: var(--accent); } /* ---- the lobby ---- */ .lobby-hero { text-align: center; padding: 2.6rem 0 2.2rem; } .lobby-hero .brandmark { font-size: clamp(3.4rem, 11vw, 5.6rem); } .lobby-hero .tagline { margin: .85rem 0 0; font-family: var(--heads); font-weight: 600; font-size: clamp(.82rem, 2.4vw, 1rem); letter-spacing: .34em; text-transform: uppercase; color: var(--muted); } .ml-head { display: flex; align-items: center; gap: 10px; margin: 1.6rem 0 16px; font-family: var(--logo); font-size: 18px; letter-spacing: .05em; color: var(--fg); line-height: 1; } .ml-head .bl { width: 15px; height: 18px; background: var(--accent); flex: none; clip-path: polygon(0 0, 42% 14%, 42% 60%, 100% 60%, 88% 100%, 0 100%); } .lobby { display: flex; flex-wrap: wrap; gap: 16px; } .mlcard { width: 440px; max-width: 100%; background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; padding: 24px 28px 26px; box-sizing: border-box; display: block; text-decoration: none; transition: box-shadow .15s ease, transform .15s ease; } .mlcard:hover { box-shadow: 0 6px 20px rgba(20, 18, 12, .14); transform: translateY(-2px); text-decoration: none; } .ml-name { display: flex; align-items: center; gap: 11px; font-family: var(--logo); font-size: 20px; letter-spacing: .03em; color: var(--fg); line-height: 1.1; text-transform: uppercase; } .ml-name .bar { width: 5px; height: 20px; background: var(--accent); transform: skewX(-14deg); flex: none; } .ml-lines { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; } .ml-line { display: flex; align-items: center; gap: 10px; } .ml-chip { display: inline-flex; align-items: center; height: 19px; padding: 0 8px; background: var(--panel); color: var(--ink2); flex: none; clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); font-family: var(--heads); font-weight: 800; font-size: 11px; letter-spacing: .06em; line-height: 1; } .ml-chip.first { background: var(--emph-bg); color: var(--emph-fg); } .ml-chip.last { background: var(--accent); color: var(--onaccent); } .ml-label { font-size: 14.5px; color: var(--ink2); } /* ============ player profile (/player/) ============ */ .pp-head { display: flex; align-items: center; gap: 14px; margin: 4px 0 6px; } .pp-pos { flex: none; font-family: var(--heads); font-weight: 800; font-size: .82rem; color: var(--onaccent); padding: .3rem .55rem; letter-spacing: .05em; line-height: 1; clip-path: polygon(12% 0, 100% 0, 100% 82%, 88% 100%, 0 100%, 0 18%); } .pp-id h1 { margin: 0; line-height: 1.05; } .pp-id .chip { vertical-align: middle; } .pp-sub { display: block; margin-top: 3px; color: var(--muted); font-size: .92rem; } .pp-inj { display: inline-flex; align-items: center; height: 15px; padding: 0 5px; margin-left: 4px; background: var(--accent); color: var(--onaccent); border-radius: 3px; font-family: var(--heads); font-weight: 800; font-size: 9.5px; letter-spacing: .05em; } .pp-note { color: var(--muted); font-size: .84rem; max-width: 64ch; margin: 0 0 14px; } /* derived profile line: two clauses divided by a thin rule, quiet enough that the numbers below stay the headline */ .pp-bio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0 0 14px; color: var(--ink2); font-size: .9rem; line-height: 1.45; } .pp-bio span + span { padding-left: 12px; border-left: 1px solid var(--line2); } @media (max-width: 560px) { /* stacked on phones — a left rule reads wrong at the start of a wrapped line */ .pp-bio { flex-direction: column; gap: 3px; } .pp-bio span + span { padding-left: 0; border-left: none; } } .pp-own { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 14px; margin: 0 0 18px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; } .pp-ownlbl { display: inline-flex; align-items: center; gap: 8px; font-size: .95rem; } .pp-ownlbl b { font-family: var(--heads); } .pp-drop { margin: 0; } .pp-dropbtn { font-family: var(--heads); font-weight: 700; font-size: 12px; letter-spacing: .03em; color: #c0504a; background: transparent; border: 1px solid #c0504a55; border-radius: 8px; padding: 6px 12px; cursor: pointer; } .pp-dropbtn:hover { background: #c0504a; color: #fff; border-color: #c0504a; } .pp-ownlbl .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); flex: none; } .pp-ownlbl .dot.mine { background: var(--accent); } .pp-ownlbl .dot.free { background: var(--mid); } .pp-act { position: relative; margin-left: auto; } .pp-act > summary { list-style: none; cursor: pointer; display: inline-block; background: var(--accent); color: var(--onaccent); transform: skewX(-14deg); padding: 6px 14px; font-family: var(--logo); font-size: 11px; letter-spacing: .07em; line-height: 1; -webkit-font-smoothing: antialiased; } .pp-act > summary::-webkit-details-marker { display: none; } .pp-act[open] > summary { background: var(--press); } .pp-form.rowform { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: 280px; max-width: 86vw; box-sizing: border-box; cursor: default; display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; box-shadow: 0 8px 22px rgba(20, 18, 12, .18); } .pp-form.rowform .rf-hd { display: block; font-family: var(--logo); font-size: 12.5px; letter-spacing: .03em; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pp-form.rowform .rf-row { display: flex; flex-direction: column; align-items: stretch; gap: 4px; } .pp-form.rowform .rf-lbl { display: block; font-family: var(--heads); font-weight: 700; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .pp-form.rowform .rf-price { display: flex; width: 100%; } .pp-form.rowform .rf-price input { flex: 1; width: auto; } .pp-form.rowform select, .pp-form.rowform input[type="number"] { width: 100%; max-width: 100%; box-sizing: border-box; } .pp-form.rowform button { width: 100%; white-space: nowrap; } .pp-seasons { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 18px; } .pp-card { padding: 14px 16px; } .pp-ct { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .pp-ct h3 { margin: 0; font-family: var(--heads); font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); } .pp-big { font-family: var(--logo); font-size: 30px; line-height: 1; color: var(--fg); } .pp-big em { font-style: normal; font-size: 12px; color: var(--muted); margin-left: 4px; } .pp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .pp-tile { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid var(--line); } .pp-tile b { font-family: var(--logo); font-size: 19px; color: var(--fg); line-height: 1; } .pp-tile span { font-family: var(--heads); font-weight: 700; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .pp-empty { margin: 6px 0 0; font-size: .9rem; } /* last-season breakdown: the stat line + tier split behind the total */ .pp-brk { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); } .pp-brk-hd { font-family: var(--heads); font-weight: 700; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; } .pp-brk-pos { color: var(--dim); font-weight: 600; } .pp-brk-line { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 8px; } .pp-brk-line span { font-size: 12px; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; } .pp-brk-tiers { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); } .pp-brk-tiers b { font-family: var(--logo); color: var(--fg); font-size: 14px; } .pp-recent { padding: 14px 16px; } .pp-recent h3 { margin: 0 0 8px; font-family: var(--heads); font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); } .pp-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; } .pp-tbl col.c-wk { width: 34%; } .pp-tbl col.c-n { width: 12%; } .pp-tbl col.c-cd { width: 18%; } .pp-tbl th { font-family: var(--heads); font-weight: 700; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); border-bottom: 1px solid var(--line); padding: 5px 6px; } .pp-tbl td { padding: 8px 6px; border-bottom: 1px solid var(--line); font-size: .92rem; } .pp-tbl tr:last-child td { border-bottom: none; } .pp-tbl .num { text-align: right; font-variant-numeric: tabular-nums; } .pp-tbl th.num { text-align: right; } .pp-tbl td.pts { font-family: var(--logo); font-size: 16px; color: var(--fg); } .pp-tbl td.sub { color: var(--muted); } .pp-tbl .wk { font-family: var(--heads); font-weight: 700; color: var(--fg); white-space: nowrap; } .pp-tbl .latest { font-family: var(--heads); font-weight: 800; font-size: 8.5px; letter-spacing: .07em; color: var(--accent); border: 1px solid var(--accent); border-radius: 3px; padding: 0 3px; vertical-align: middle; } .pp-tbl .dgw { color: var(--muted); font-size: 11px; } .pp-tbl .cards { text-align: right; white-space: nowrap; } .pp-tbl .yc, .pp-tbl .rc { display: inline-block; width: 8px; height: 11px; border-radius: 1.5px; margin-left: 2px; vertical-align: middle; } .pp-tbl .yc { background: #E0B93A; } .pp-tbl .rc { background: var(--accent); } @media (max-width: 640px) { .pp-seasons { grid-template-columns: 1fr; } .pp-big { font-size: 26px; } } /* player-name links: inherit the row's ink; reveal as interactive on hover */ .plink { color: inherit; text-decoration: none; } .plink:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } .pname .plink { font-weight: inherit; } /* player pop-up card (modal fetched by base.html from a.plink) */ .pmodal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 14px; } .pmodal[hidden] { display: none; } .pmodal-backdrop { position: absolute; inset: 0; background: rgba(20, 18, 12, .5); backdrop-filter: blur(1.5px); } /* the card is capped to the DYNAMIC viewport (dvh, not vh) so on mobile it never runs under the URL bar; only the inner slot scrolls, and the × rides the fixed frame so it stays reachable at the top no matter how far you scroll. */ .pmodal-card { position: relative; z-index: 1; width: 100%; max-width: 680px; max-height: 92vh; max-height: 92dvh; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px rgba(20, 18, 12, .35); } .pmodal-slot { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 22px 22px 20px; } .pmodal-x { position: absolute; top: 8px; right: 12px; z-index: 3; background: none; border: none; font-size: 26px; line-height: 1; color: var(--muted); cursor: pointer; padding: 2px 6px; } .pmodal-x:hover { color: var(--accent); } body.pm-lock { overflow: hidden; } .pm-load { color: var(--muted); padding: 40px 0; text-align: center; font-size: .9rem; } /* the dossier reads a touch tighter inside the card than on the standalone page */ .pmodal .pp-head { padding-right: 28px; } .pmodal .pp-head h1 { font-size: 1.4rem; } .pmodal .pp-body > :last-child { margin-bottom: 0; } /* ================= Score Center (/scores) ================= */ .sc-updated { margin-left: auto; font-size: 12px; color: var(--faint); font-family: var(--heads); font-weight: 700; letter-spacing: .04em; } .sc-toggle { margin-bottom: 18px; } .sc-toggle b { margin-left: 6px; font-family: var(--logo); font-weight: 400; opacity: .8; } .sc-league { margin: 0 0 22px; } .sc-lhead { display: flex; align-items: center; gap: 10px; margin: 0 0 9px; } .sc-lname { font-family: var(--heads); font-weight: 800; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg); } .sc-livecount { display: inline-flex; align-items: center; gap: 5px; font-family: var(--heads); font-weight: 800; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--live); } .sc-list { display: flex; flex-direction: column; gap: 6px; } .sc-item { background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } .sc-item.on { border-color: var(--live); } .sc-item.mine { box-shadow: inset 3px 0 0 var(--accent); } .sc-item.open { box-shadow: 0 5px 18px rgba(20, 18, 12, .13); } .sc-item.mine.open { box-shadow: inset 3px 0 0 var(--accent), 0 5px 18px rgba(20, 18, 12, .13); } .sc-match { display: grid; grid-template-columns: 1fr 40px 92px 40px 1fr; align-items: center; column-gap: 10px; padding: 9px 32px 9px 16px; min-height: 54px; cursor: pointer; position: relative; } .sc-match:hover { background: var(--panel); } .sc-chev { position: absolute; right: 13px; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint); transform: translateY(-70%) rotate(45deg); transition: transform .2s; } .sc-item.open .sc-chev { transform: translateY(-30%) rotate(-135deg); } .sc-tn { font-family: var(--heads); font-weight: 600; font-size: 14.5px; color: var(--fg); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sc-home { text-align: right; } .sc-away { text-align: left; } /* club-colour code chip with the brand diagonal-cut notch (the crest stand-in) */ .sc-code { justify-self: center; display: inline-flex; align-items: center; justify-content: center; height: 20px; padding: 0 6px; font-family: var(--heads); font-weight: 800; font-size: 10px; letter-spacing: .06em; line-height: 1; -webkit-font-smoothing: antialiased; clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); } .sc-mid { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; } .sc-day { font-family: var(--heads); font-weight: 700; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); line-height: 1; white-space: nowrap; } .sc-day.fri { color: var(--accent); } .sc-score { font-family: var(--logo); font-size: 22px; line-height: 1; color: var(--fg); white-space: nowrap; } .sc-score i { font-style: normal; color: var(--faint); margin: 0 5px; } /* --fg, not --muted: the kickoff time is the primary fact on a scheduled row and was reading as low-contrast grey on cream. Match the score's weight. */ .sc-ko { font-family: var(--logo); font-size: 18px; color: var(--fg); line-height: 1; white-space: nowrap; } .sc-state { font-family: var(--heads); font-weight: 800; font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; line-height: 1; min-height: 10px; } .sc-state.s-live { color: var(--live); display: inline-flex; align-items: center; gap: 4px; } .sc-state.s-ht { color: var(--accent); } .sc-state.s-ft, .sc-state.s-sched, .sc-state.s-other { color: var(--faint); } .sc-state .lp, .sc-livecount .lp { width: 7px; height: 7px; border-radius: 50%; background: var(--live); display: inline-block; animation: scpulse 1.5s ease-in-out infinite; } @keyframes scpulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } } .sc-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); vertical-align: middle; margin-left: 3px; } .sc-empty { padding: 34px 0; font-size: .95rem; } /* which of my players are in this match (My games view) */ .sc-mine-players { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; padding: 0 32px 10px 16px; } .scp-side { display: flex; flex-wrap: wrap; gap: 5px; align-content: flex-start; } .scp-home { justify-content: flex-start; } .scp-away { justify-content: flex-end; } .scp { display: inline-flex; align-items: center; gap: 5px; background: var(--panel); border-radius: 5px; padding: 2px 8px 2px 3px; font-family: var(--heads); font-weight: 600; font-size: 12px; color: var(--fg); } .scp .pos { font-size: 8px; padding: 1px 3px; } /* expandable match-stats panel */ .sc-detail { border-top: 1px solid var(--line); background: var(--inset); padding: 12px 16px 14px; } .scd-load, .scd-none { margin: 0; padding: 6px 0; font-size: .86rem; } .scd-stats { display: flex; flex-direction: column; gap: 8px; } .scd-row { display: grid; grid-template-columns: 46px 1fr 46px; align-items: center; column-gap: 8px; row-gap: 3px; } .scd-h, .scd-a { font-family: var(--logo); font-size: 15px; color: var(--fg); } .scd-h { text-align: right; } .scd-a { text-align: left; } .scd-lbl { text-align: center; font-family: var(--heads); font-weight: 700; font-size: 9px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); } .scd-bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--faint); overflow: hidden; } .scd-bar i { display: block; height: 100%; background: var(--accent); } .scd-events { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 5px; } .scd-ev { display: grid; grid-template-columns: 1fr 42px 1fr; align-items: center; gap: 6px; font-family: var(--heads); font-size: 12.5px; color: var(--fg); } .scd-eh { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; text-align: right; } .scd-ea { display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px; } .scd-emin { text-align: center; font-family: var(--logo); font-size: 12px; color: var(--faint); } .scd-who em { font-style: normal; color: var(--faint); font-weight: 400; font-size: 11px; } .ev-goal { display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex: none; background: var(--card); border: 1.5px solid var(--fg); box-shadow: inset 0 0 0 1.5px var(--card); } .ev-yc, .ev-rc { display: inline-block; width: 8px; height: 11px; border-radius: 1.5px; flex: none; } .ev-yc { background: #E0B93A; } .ev-rc { background: var(--accent); } @media (max-width: 560px) { /* 78px middle, not 62 — "10:00 AM" / "12:30 PM" wrapped to two lines at 62. The names ellipsize, so the extra width comes from them harmlessly. */ .sc-match { grid-template-columns: 1fr 34px 78px 34px 1fr; column-gap: 6px; padding: 9px 28px 9px 12px; } .sc-tn { font-size: 12.5px; } .sc-code { height: 18px; padding: 0 5px; font-size: 9px; } .sc-mine-players { padding: 0 28px 9px 12px; gap: 5px 10px; } .scp { font-size: 11px; } } /* the Wire Queue — pending waiver bids, surfaced above the roster cards (only rendered when a bid exists). Ports the Wire Queue design. */ .wq { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; margin: 0 0 18px; } .wq-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .wq-t { display: inline-flex; align-items: center; gap: 10px; font-family: var(--logo); font-size: 15px; letter-spacing: .05em; color: var(--fg); } .wq-bar { width: 5px; height: 15px; background: var(--accent); transform: skewX(-14deg); flex: none; } .wq-settles { display: inline-flex; align-items: center; gap: 7px; height: 22px; padding: 0 11px; background: var(--panel); color: var(--ink2); white-space: nowrap; clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); font-family: var(--heads); font-weight: 700; font-size: 9px; letter-spacing: .12em; } .wq-settles i { width: 6px; height: 6px; border-radius: 50%; background: var(--gk); flex: none; } .wq-row { display: flex; align-items: center; gap: 16px; padding: 13px 16px; background: var(--bg); border-radius: 10px; box-shadow: inset 3px 0 0 var(--mid); } .wq-row + .wq-row { margin-top: 8px; } .wq-badge { flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 11px; background: var(--mid); transform: skewX(-14deg); } .wq-badge > span { display: block; transform: skewX(14deg); font-family: var(--logo); font-size: 11px; letter-spacing: .1em; color: var(--onaccent); -webkit-font-smoothing: antialiased; } .wq-body { flex: 1; display: flex; align-items: center; gap: 26px; min-width: 0; flex-wrap: wrap; } .wq-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .wq-lbl { font-family: var(--heads); font-weight: 700; font-size: 9.5px; letter-spacing: .16em; color: var(--dim); } .wq-lbl.claim { color: var(--mid); } .wq-p { display: flex; align-items: center; gap: 6px; min-width: 0; } .wq-p b { font-weight: 700; font-size: 15px; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wq-drop { font-weight: 600; font-size: 15px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wq-pos { flex: none; display: inline-flex; align-items: center; height: 14px; padding: 0 5px; background: var(--panel-hi); color: var(--muted); border-radius: 2px; font-family: var(--heads); font-weight: 700; font-size: 8.5px; letter-spacing: .06em; } .wq-pos.dim { background: var(--panel); color: var(--dim); } .wq-bid { font-family: var(--logo); font-size: 16px; color: var(--fg); line-height: 1; } .wq-bid em { font-family: var(--body); font-style: normal; font-size: 11px; color: var(--faint); } /* wire results panel: a settled bid must not silently vanish — show won vs rejected */ .wq-res .wq-row.rej { border-color: #b23b3b55; } .wq-row.rej .wq-badge { background: #b23b3b; } .wq-why { font-family: var(--body); font-size: 12.5px; font-weight: 600; line-height: 1.25; color: #c85a52; } .wq-x { flex: none; margin: 0; } .wq-x button { border: 1.5px solid var(--line2); background: transparent; cursor: pointer; transform: skewX(-14deg); padding: 7px 13px; } .wq-x button:hover { border-color: var(--accent); } .wq-x button > span { display: block; transform: skewX(14deg); font-family: var(--logo); font-size: 10.5px; letter-spacing: .09em; color: var(--accent); } @media (max-width: 560px) { .wq { padding: 14px 14px; } .wq-row { gap: 12px; padding: 11px 12px; flex-wrap: wrap; } .wq-body { gap: 14px 20px; } } /* ---- claim page: a new manager's first entry ---- */ /* .claim-page, NOT .claim: a bare `.claim` also matched the wire queue's and dropped 100px of viewport padding on a 9.5px label. Everything in this block is namespaced claim-* — keep it that way. */ .claim-page { display: flex; justify-content: center; padding: 4vh 0 6vh; } .claim-card { width: 100%; max-width: 460px; background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: 14px; padding: 26px 28px 22px; box-shadow: 0 4px 18px rgba(20, 18, 12, .10); } .claim-kicker { display: inline-flex; align-items: center; gap: 9px; font-family: var(--heads); font-weight: 800; font-size: 10px; letter-spacing: .18em; color: var(--accent); } .claim-bar { width: 5px; height: 13px; background: var(--accent); transform: skewX(-14deg); flex: none; } .claim-h { margin: 10px 0 6px; font-size: 1.7rem; line-height: 1.05; } .claim-sub { margin: 0 0 20px; font-size: .92rem; color: var(--muted); } .claim-form { display: flex; flex-direction: column; gap: 14px; } .claim-row { display: flex; flex-direction: column; gap: 5px; } .claim-lbl { font-family: var(--heads); font-weight: 700; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .claim-lbl em { font-style: normal; letter-spacing: .02em; text-transform: none; color: var(--faint); font-weight: 400; } .claim-row input { font: inherit; padding: .55rem .7rem; border: 1.5px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); } .claim-row input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } .claim-go { margin-top: 4px; align-self: flex-start; } .claim-fine { margin: 14px 0 0; font-size: 11.5px; color: var(--faint); } .claim-demo { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--mine-line); font-size: 13px; color: var(--faint); } .claim-demo a { font-weight: 700; color: var(--accent); white-space: nowrap; } .login-fine { margin-top: 16px; font-size: 12px; } /* ---- admin: onboarding pipeline ---- */ .ob-sum { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; font-size: 12.5px; color: var(--muted); } .ob-sep { color: var(--dim); margin: 0 6px; } .ob-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; padding: 1px 6px; border-radius: 4px; font-family: var(--heads); font-weight: 800; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--onaccent); } .ob-invited { background: var(--dim); } .ob-joined { background: var(--gk); } .ob-named { background: var(--mid); } .admin-mgrs td { vertical-align: top; } .ob-acts { font-size: 12px; color: var(--dim); white-space: nowrap; } .ob-edit { position: relative; display: inline-block; } .ob-edit > summary { list-style: none; cursor: pointer; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } .ob-edit > summary::-webkit-details-marker { display: none; } .ob-edit .rowform { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: 260px; max-width: 86vw; box-sizing: border-box; cursor: default; display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; box-shadow: 0 8px 22px rgba(20, 18, 12, .18); white-space: normal; } .ob-edit .rowform .rf-hd { display: block; font-family: var(--logo); font-size: 12.5px; } .ob-edit .rowform .rf-row { display: flex; flex-direction: column; align-items: stretch; gap: 4px; } .ob-edit .rowform .rf-lbl { display: block; font-family: var(--heads); font-weight: 700; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .ob-edit .rowform input { width: 100%; box-sizing: border-box; } /* ---- Developer API page (/account/api) ---- */ .api-intro { margin: 4px 2px 10px; line-height: 1.5; } .api-keyrow { display: flex; gap: 8px; align-items: center; margin: 2px 0 8px; } .api-keyfield { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; padding: 9px 11px; border: 1.5px solid var(--line); border-radius: 9px; background: var(--inset); color: var(--fg); } .api-regen { margin-top: 12px; } .api-ep { display: block; padding: 9px 2px; border-bottom: 1px solid var(--line2); line-height: 1.5; } .api-ep:last-of-type { border-bottom: none; } .api-verb { display: inline-block; font-family: var(--heads); font-weight: 800; font-size: 10px; letter-spacing: .08em; padding: 2px 7px; border-radius: 6px; margin-right: 8px; vertical-align: 1px; color: var(--onaccent); } .api-verb.get { background: var(--dim); } .api-verb.post { background: var(--accent); } .api-note { margin-top: 10px; color: var(--muted); font-size: 13px; } .api-exlabel { font-family: var(--heads); font-weight: 700; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 14px 2px 5px; } .api-code { background: var(--inset); border: 1.5px solid var(--line); border-radius: 10px; padding: 11px 13px; overflow-x: auto; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.55; white-space: pre; color: var(--fg); margin: 0; } .api-ep code, .api-note code, .api-intro code { background: var(--inset); border: 1px solid var(--line2); border-radius: 5px; padding: 1px 5px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; } /* API page — leagues list */ .api-lg { margin: 10px 0; } .api-lg-head { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; } .api-lg-name { font-family: var(--heads); font-weight: 700; font-size: 13.5px; } .api-lg-status { font-family: var(--heads); font-weight: 800; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; border: 1.5px solid var(--line2); color: var(--muted); } .api-lg-status.s-live { color: var(--onaccent); background: var(--live); border-color: transparent; } .api-lg-status.s-complete { color: var(--muted); background: var(--inset); } .api-lg-status.s-pending { color: var(--dim); } /* API page — copy-all */ .api-copyall { margin-top: 6px; } .api-offscreen { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* API page — hardened regenerate (reveal + type-to-confirm) */ .api-regen { margin-top: 12px; } .api-regen > summary { display: inline-block; list-style: none; cursor: pointer; } .api-regen > summary::-webkit-details-marker { display: none; } .api-regen-form { margin-top: 10px; padding: 12px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--inset); max-width: 460px; } .api-regen-form p { margin: 0 0 9px; line-height: 1.5; } /* API page — demo banner + promises list */ .api-demo-banner { border-color: var(--accent); background: var(--inset); line-height: 1.5; } .api-promises { margin: 4px 2px 12px; padding-left: 18px; } .api-promises li { margin: 5px 0; line-height: 1.5; } /* ---- chat reactions (mature pattern) ---- */ .bn-line { position: relative; display: flex; flex-direction: column; } .bn-react { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; } .bn-react:has(.bn-rx) { margin-top: 4px; } .bn-rx { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; line-height: 1; padding: 3px 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--inset); color: var(--fg); cursor: pointer; } .bn-rx.on { border-color: var(--accent); background: var(--mine); } .bn-rx-n { font-family: var(--heads); font-weight: 700; font-size: 11px; color: var(--muted); } .bn-rx.on .bn-rx-n { color: var(--accent); } /* the react button: inline on the message line, subtle, always tappable (no hover needed for touch). Long-press a message also opens the bar on mobile. */ .bn-rxadd { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 18px; padding: 0; margin-left: 5px; vertical-align: -3px; border: none; background: none; color: var(--muted); cursor: pointer; opacity: .5; transition: opacity .12s, color .12s; } .bn-rxadd:hover { opacity: 1; color: var(--accent); } /* the quick-emoji bar that pops above a message (position set inline by JS) */ .bn-rxbar { position: fixed; z-index: 210; display: flex; gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); box-shadow: 0 6px 20px rgba(0,0,0,.22); } .bn-rxbar[hidden] { display: none; } .bn-rxbar-opt { font-size: 20px; line-height: 1; padding: 3px 6px; border: none; background: none; cursor: pointer; border-radius: 999px; transition: transform .1s, background .1s; } .bn-rxbar-opt:hover { background: var(--inset); transform: scale(1.25); } /* presence dot sits tight before a chat name */ .bn-msg .on-dot { margin-right: 5px; } .db-head .on-dot { margin-right: 4px; width: 7px; height: 7px; vertical-align: 0; } /* desktop: the chat opens to the bottom HALF of the screen, not full (mobile stays full) */ @media (min-width: 900px) { .bn-dock.open { top: auto; height: 50vh; max-height: 50vh; border-top: 2px solid var(--accent); box-shadow: 0 -10px 30px rgba(0,0,0,.18); } } /* Queue: the rows area scrolls INSIDE the card. On desktop it flex-fills so the card matches the roster card's height (it was growing past it as players were added); narrow screens get a fixed cap so it never grows unbounded. */ #drQueue { overflow-y: auto; overscroll-behavior: contain; max-height: 320px; } @media (min-width: 1201px) { #drQueue { flex: 1 1 0; min-height: 0; max-height: none; } } /* ---- The Feed ---- */ .fd-section { margin: 18px 0 26px; } .fd-shead { display: flex; align-items: center; gap: 8px; font-family: var(--heads); font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 2px 12px; } .fd-shead .bl { display: inline-block; width: 3px; height: 15px; background: var(--accent); } .fd-empty { padding: 8px 2px; } .fd-newslist { display: grid; gap: 10px; } @media (min-width: 720px) { .fd-newslist { grid-template-columns: 1fr 1fr; } } .fd-news { display: flex; gap: 12px; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; padding: 11px; } .fd-thumb { flex: 0 0 auto; width: 84px; height: 84px; object-fit: cover; border-radius: 8px; background: var(--inset); } .fd-ntext { min-width: 0; display: flex; flex-direction: column; gap: 4px; } .fd-nmeta { display: flex; align-items: center; gap: 8px; } .fd-nlg { font-family: var(--heads); font-weight: 800; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); } .fd-nago { font-size: 11px; color: var(--faint); } .fd-nhead { font-weight: 700; line-height: 1.3; color: var(--fg); text-decoration: none; } a.fd-nhead:hover { color: var(--accent); } .fd-ndesc { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .fd-nclubs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; } .fd-club { font-size: 10px; padding: 1px 6px; border-radius: 999px; background: var(--inset); border: 1px solid var(--line2); color: var(--muted); } .sc-controls-embed { margin-bottom: 10px; } /* ---- draft board: Board / List view toggle ---- */ .db-viewtoggle { display: inline-flex; border: 1.5px solid var(--line); border-radius: 8px; overflow: hidden; margin-left: auto; } .db-viewtoggle button { font-family: var(--heads); font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 5px 11px; border: none; background: transparent; color: var(--muted); cursor: pointer; } .db-viewtoggle button + button { border-left: 1.5px solid var(--line); } .db-viewtoggle button.on { background: var(--accent); color: var(--onaccent); } .db-wrap[hidden], .db-list[hidden] { display: none !important; } .db-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .dbl-row { display: grid; grid-template-columns: 34px 30px 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px 8px 12px; position: relative; border-top: 1px solid var(--inset); } .dbl-row:first-child { border-top: none; } .dbl-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--rail, transparent); } .dbl-row.mine { background: var(--mine); } .dbl-row.otc { background: var(--inset); } .dbl-no { font-family: var(--logo); font-size: 15px; color: var(--fg); } .dbl-rd { font-family: var(--heads); font-size: 10px; letter-spacing: .06em; color: var(--faint); } .dbl-posx { display: inline-block; } .dbl-plr { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .dbl-plr .plink { color: var(--fg); text-decoration: none; } .dbl-plr .plink:hover { color: var(--accent); } .dbl-otc { color: var(--accent); font-style: normal; font-weight: 700; font-size: 12.5px; } .dbl-team { font-size: 12px; color: var(--muted); max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; } /* ---- presence: the online light ---- */ .on-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--line2); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); vertical-align: 1px; margin-right: 6px; transition: background .2s, box-shadow .2s; } .on-dot.live { background: #3fbf6a; box-shadow: 0 0 5px 1px rgba(63,191,106,.6); } .umodal-status { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--muted); margin: 2px 0 10px; } .umodal-status .on-dot { margin-right: 0; } .lt-name .on-dot { margin-right: 5px; } /* draft: a maxed slot (1-GK cap / full roster) grays its players in pool + queue */ #drPoolTable tr.unavail { opacity: .42; } #drPoolTable tr.unavail .pname a { pointer-events: none; } .dr-filled { font-family: var(--heads); font-weight: 700; font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .dr-qrow.unavail { opacity: .45; } .dr-qrow.unavail .nm { text-decoration: line-through; text-decoration-color: var(--muted); } /* The Feed — three tabs (Score Center default | News | My News) */ .feed-tabs { display: flex; gap: 2px; border-bottom: 1.5px solid var(--line); margin: 14px 0 16px; } .feed-tabs button { font-family: var(--heads); font-weight: 700; font-size: 13px; letter-spacing: .02em; padding: 9px 14px; border: none; background: none; color: var(--muted); cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -1.5px; } .feed-tabs button:hover { color: var(--fg); } .feed-tabs button.on { color: var(--fg); border-bottom-color: var(--accent); } .feed-tabs button b { color: var(--accent); font-weight: 800; } .feed-tab[hidden] { display: none; } /* draft pool: Hide GK toggle */ .dr-hidegk { font-family: var(--heads); font-weight: 700; font-size: 11px; letter-spacing: .04em; padding: 5px 10px; border: 1.5px solid var(--line); border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; white-space: nowrap; transition: background .12s, color .12s, border-color .12s; } .dr-hidegk:hover { border-color: var(--fg); color: var(--fg); } .dr-hidegk.on { background: var(--accent); color: var(--onaccent); border-color: var(--accent); } /* ---- draft recap (post-draft rankings) ---- */ .rc-note { margin: 2px 2px 12px; color: var(--muted); font-size: 13px; } .rc-rankings { display: flex; flex-direction: column; } .rc-row { display: grid; grid-template-columns: 30px 44px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 9px 8px 9px 12px; position: relative; border-top: 1px solid var(--inset); } .rc-row:first-child { border-top: none; } .rc-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--rail, transparent); } .rc-row.you { background: var(--mine); } .rc-rank { font-family: var(--logo); font-size: 17px; color: var(--faint); } .rc-grade { font-family: var(--heads); font-weight: 800; font-size: 15px; text-align: center; padding: 3px 0; border-radius: 7px; background: var(--inset); } .rc-g-A { color: #0E6B4A; } .rc-g-B { color: #C4841D; } .rc-g-C { color: var(--accent); } .rc-team { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .rc-team .uchip { color: var(--fg); text-decoration: none; } .rc-team .uchip:hover { color: var(--accent); } .rc-total { font-family: var(--logo); font-size: 16px; color: var(--fg); white-space: nowrap; } .rc-total i { font-family: var(--body); font-style: normal; font-size: 10px; color: var(--muted); margin-left: 3px; } .rc-awards { display: flex; flex-direction: column; gap: 12px; } .rc-award { display: flex; flex-direction: column; gap: 3px; padding: 11px 12px; border-radius: 10px; background: var(--inset); border: 1px solid var(--line); } .rc-atitle { font-family: var(--heads); font-weight: 800; font-size: 13px; letter-spacing: .02em; } .rc-adesc { font-size: 13px; line-height: 1.5; color: var(--body); } .dr-recaplink { margin-top: 8px; text-decoration: none; } /* ---- activity ledger (admin) ---- */ .act-filter { display: flex; align-items: center; gap: 10px; margin: 4px 2px 12px; } .act-count { font-size: 12px; color: var(--muted); } .act-log { display: flex; flex-direction: column; } .act-row { display: grid; grid-template-columns: 84px 110px minmax(0,1fr); gap: 10px; align-items: baseline; padding: 6px 2px; border-top: 1px solid var(--inset); font-size: 13px; } .act-row:first-child { border-top: none; } .act-when { color: var(--faint); font-size: 11.5px; white-space: nowrap; } .act-who { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .act-what { min-width: 0; } .act-tag { font-family: var(--heads); font-weight: 700; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; padding: 2px 6px; border-radius: 5px; background: var(--inset); color: var(--muted); } .act-tag.act-login { background: #0E6B4A; color: #fff; } .act-tag.act-draft_pick { background: var(--accent); color: var(--onaccent); } .act-lg { font-size: 11px; color: var(--muted); } .act-det { color: var(--body); overflow-wrap: anywhere; } @media (max-width: 560px) { .act-row { grid-template-columns: 66px 1fr; } .act-what { grid-column: 1 / -1; } } /* roster fixture flags: no game this week (gray) + double gameweek badge */ .rs-row.ng { opacity: .5; } .rs-row.ng .rs-sc { color: var(--faint); } .fx-off { color: var(--accent); font-weight: 600; } .fx-dbl { display: inline-block; font-family: var(--heads); font-weight: 800; font-size: 9.5px; letter-spacing: .04em; padding: 1px 5px; border-radius: 999px; vertical-align: 1px; background: #0E6B4A; color: #fff; margin-left: 5px; } .tm-blank { border-color: var(--accent); background: var(--inset); line-height: 1.5; font-size: 13.5px; margin: 12px 0; } /* add/drop rows: dim a player whose club is idle this week */ .pl-ng { opacity: .55; }