:root{ --ink:#07070A; --panel:#101015; --panel2:#0b0b0f; --line:#221d14; --text:#F4F1EA; --muted:#8A8698; /* --dim WAS #6A6876, which measured 3.48:1 on --panel against a 4.5:1 floor for body text, and 143 rules set text to it - 56 of them at 10px or smaller. #807D8E measures 4.74 on panel and 5.02 on ink, so it passes everywhere while staying clearly quieter than --muted. */ --dim:#807D8E; /* THE BORDER YOU HAVE TO BE ABLE TO FIND. --line is a decorative hairline at 1.13:1 and is right for a card edge, but it was also drawing the edges of every text field, which made them invisible. --edge is for a boundary the eye must locate: 3.36:1 on the field backgrounds. */ --edge:#72644A; --orange:#E89900; --gold:#F9B234; --green:#3BA55D; --red:#D4564E; /* THE LEAGUE ACCENT, item 5. One token per competition, set on a wrapper by discPage, and read by the masthead rule, the board header, the stat-tile bar and the top-three medals. Default is the house gold, so anything that does not set it looks exactly as it did before. */ --acc:#F9B234; --acc2:#E89900; /* ELEVATION, item 14. Every surface was a flat 1px border on the same plane. A soft drop plus a 1px inset highlight along the top edge is what gives a card an order without drawing another line. */ --lift:0 1px 2px rgba(0,0,0,.4), 0 6px 20px -8px rgba(0,0,0,.65); --liftin:inset 0 1px 0 rgba(255,255,255,.045); /* THE DISPLAY FACE, item 1. Headings only - Inter keeps the body and every number, because a condensed face at 12px with letterspacing is unreadable and tabular figures are the whole point of the columns below. */ /* Tells the browser the page is dark, so native scrollbars, select menus, date pickers and form controls render dark instead of in the light default against a black page. */ color-scheme:dark; /* 9. NAMED LAYERS. The stack was 1, 2, 3, 38, 40, 60, 70, 100, each number chosen at the moment it was needed and none of them saying what sits above what. Now the order is written down once, and a new overlay picks a name rather than guessing a number that clears everything else. */ --z-back:-2; --z-under:-1; --z-flat:0; --z-base:1; --z-raise:2; --z-stick:3; --z-dock:38; --z-float:40; --z-menu:60; --z-bar:70; --z-toast:90; --z-skip:100; /* 7. A SPACING SCALE, for everything written from here on. The sheet uses 28 distinct spacing values including every odd number from 1 to 17, and that was measured and reported as a defect. It is NOT retrofitted: those values are hand-tuned against type that is itself hand-tuned, and snapping 500 declarations to a 4px grid would move every card on the site at once with nothing gained that anyone can see. The defect worth fixing is that there was no scale to reach for, so here is one. */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; /* 8. THE BREAKPOINT LADDER, written down rather than remapped. Five widths are in use and each earns its place: 900 the background art and the editor top bar 860 the editor panes, and the hero going single-column 760 the nav collapsing into the phone sheet 620 the main phone layout - the big one, 15 blocks 560 small-phone trims: thumbnails, tab strips, crew headers Collapsing 560 into 620 would hand small-phone layouts to every phone, and 860 into 900 would move the editor 40px early. Both are churn with a visible downside, so the fix is that the ladder is now documented in one place instead of being rediscovered from grep. */ --disp:"Archivo Narrow",Inter,-apple-system,Segoe UI,Roboto,sans-serif; } *{box-sizing:border-box} html{background:var(--ink)} body{margin:0;background:transparent;color:var(--text); font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif; -webkit-font-smoothing:antialiased} /* THE SKYLINE BEHIND EVERYTHING. Operator, 28 Sep 2026: a faded image behind the site, like the one tracker.gg sits on - a cityscape. DRAWN, NOT DOWNLOADED. It is gradients, not a photograph: nothing to host, nothing to wait for on a slow connection, no licence attached to somebody else art, and it is sharp at any width instead of a fixed-size picture stretched across a 4K monitor. It is the same skyline the city card background in the shop is built from, so the site and the cards look like one place. position:fixed ON A PSEUDO-ELEMENT, not background-attachment:fixed, which iOS Safari has never handled properly - it snaps and judders on scroll. This holds still. AND THEN A VEIL OVER IT, because a background you can admire is a background you are reading instead of the table in front of it. The whole thing sits at a third strength under a gradient that deepens downward, where the dense rows live. */ body:before{content:'';position:fixed;inset:0;z-index:var(--z-back);pointer-events:none; background: url(/skyline.svg?v=1790635921010) bottom center / 100% auto no-repeat, radial-gradient(62% 28% at 50% 88%,#FF8A2EB3,#0000 72%), linear-gradient(180deg,#0E1A33 0%,#0A1020 40%,#07070A 72%)} body:after{content:'';position:fixed;inset:0;z-index:var(--z-under);pointer-events:none; background:linear-gradient(180deg,var(--ink) 0%,#07070AF7 34%,#07070AE0 52%,#07070A8C 74%,#07070A2E 100%)} @media(max-width:900px){body:before{background-size:auto 26%,100% 100%,100% 100%}} @media(prefers-reduced-transparency:reduce){body:before{display:none}} a{color:var(--gold);text-decoration:none} @media (hover:hover){a:hover{color:var(--orange);text-decoration:underline}} .top{border-bottom:1px solid var(--line);background:linear-gradient(180deg,#0f0d09,#07070A)} .topbar{height:3px;background:linear-gradient(90deg,#e8990000,#F9B234,#e8990000)} .joinbar{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap; padding:7px 16px;background:linear-gradient(90deg,rgba(249,178,52,.05),rgba(249,178,52,.13),rgba(249,178,52,.05)); border-bottom:1px solid #2a2114;text-align:center;line-height:1.3} @media (hover:hover){.joinbar:hover{background:linear-gradient(90deg,rgba(249,178,52,.08),rgba(249,178,52,.2),rgba(249,178,52,.08));text-decoration:none}} .joinb{font-size:11px;font-weight:800;letter-spacing:.16em;color:#FFC94E} .joinw{font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.02em} .joina{font-size:12px;color:#FFC94E;font-weight:800} @media(max-width:620px){.joinw{display:none}.joinb{font-size:10px;letter-spacing:.1em}.joinbar{padding:6px 12px;gap:7px}} .wrap{max-width:1080px;margin:0 auto;padding:0 20px} .nav{display:flex;align-items:center;gap:14px;padding:16px 0} .mark{font-weight:800;letter-spacing:.22em;font-size:13px;color:var(--gold)} .navsub{font-size:12px;color:var(--dim);letter-spacing:.14em;font-weight:700} .spacer{flex:1} .hero{display:flex;gap:22px;align-items:flex-start;padding:26px 0 22px} .avatar{width:104px;height:104px;border-radius:22px;object-fit:cover;flex:none; border:2px solid rgba(249,178,52,.55);background:#1a1820} .who h1{margin:0;font-size:30px;line-height:1.1;font-weight:800} .handle{color:var(--dim);font-size:13px;margin-top:5px;font-weight:600} .badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px} /* THE STAFF RIBBONS - see the note above ribbon() for why this is a different shape rather than a brighter pill. The swallowtail is cut with clip-path on two stacked layers, the outer one a pixel and a half proud of the inner, so the gold edge follows the notch instead of being sliced off by the clip. */ /* THE STAFF SEAL. The club own mark, worn beside a name - small on a board, larger beside the name on a record. It is never drawn for anybody who does not hold a staff role, which is the whole value of it. */ .seal{width:15px;height:15px;vertical-align:middle;margin-left:5px;flex:none; display:inline-block;filter:drop-shadow(0 1px 2px #0009)} .seal.big{width:22px;height:22px;margin-left:9px;position:relative;top:-2px; filter:drop-shadow(0 0 10px #f9b23455) drop-shadow(0 1px 2px #000a)} /* The founder seal is white gold, so it gets a cooler glow than the staff one. */ .seal.fnd.big{filter:drop-shadow(0 0 10px #f3e6c055) drop-shadow(0 1px 2px #000a)} @media (max-width:760px){.seal.big{width:18px;height:18px;margin-left:7px;top:-1px}} .ribs{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:13px 0 0} .riblab{font-size:10px;font-weight:800;letter-spacing:.24em;color:#8a6a24;padding-right:3px} .rib{--rib:polygon(0 0,100% 0,calc(100% - 9px) 50%,100% 100%,0 100%,9px 50%); position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:7px; padding:8px 19px;font-size:10px;font-weight:800;letter-spacing:.16em; text-transform:uppercase;color:#EFDCA8;white-space:nowrap;line-height:1; transition:transform .16s ease,color .16s ease} .rib:before,.rib:after{content:"";position:absolute;inset:0;clip-path:var(--rib)} .rib:before{background:linear-gradient(180deg,#8a6a24,#4a3a18)} .rib:after{inset:1.5px;background:linear-gradient(180deg,#2b2009,#140e04)} /* Only elements rise above the two layers, so the label is wrapped in a b. */ .rib > *{position:relative;z-index:var(--z-base)} /* A role with no icon gets a lozenge, not a bar: a 3px vertical line beside capitals reads as a stray pipe character, which is how the first cut of this looked - THE SOURCE came out as | THE SOURCE. */ .rib i{width:7px;height:7px;border-radius:1px;display:block;font-style:normal; transform:rotate(45deg);box-shadow:0 0 0 1px #00000040} .rib.more{color:#C9B98A;letter-spacing:.06em;padding:8px 15px} .rib .ribi{width:14px;height:14px;border-radius:4px;object-fit:contain;display:block} .rib .ribe{font-size:12px;line-height:1} @media (hover:hover){.rib:hover{transform:translateY(-1px);color:#FFF0C6}} /* The offices that run the place wear the brighter gilt and carry a sheen. */ .rib.gilt{color:#FFEDBC} .rib.gilt:before{background:linear-gradient(180deg,#d8ab45,#7a5c1c)} .rib.gilt:after{background:linear-gradient(180deg,#4a3410 0%,#24190a 55%,#3a2a0d 100%)} .rib.gilt b{text-shadow:0 1px 0 #00000080} /* The gilt sits slightly lit, and any ribbon warms under the cursor. */ .rib.gilt:before{box-shadow:0 0 16px #f9b2342e} @media (hover:hover){.rib:hover:after{background:linear-gradient(180deg,#3a2b0e,#1b1206)}} @media (hover:hover){.rib.gilt:hover:after{background:linear-gradient(180deg,#5c4214,#2e2009)}} @media (max-width:760px){.rib{font-size:10px;padding:7px 15px;letter-spacing:.11em} .ribs{gap:5px;margin-top:10px}.riblab{font-size:10px;letter-spacing:.18em}} .badge{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800; letter-spacing:.09em;padding:4px 10px 4px 7px;border-radius:999px;border:1px solid; text-transform:uppercase;line-height:1.5} .badge:has(.bico),.badge:has(.bemo){padding-left:5px} /* the Halloween 2026 flip tag - exclusive, see MEMBER_TAGS */ .badge.xtag.hallow{position:relative;overflow:hidden;color:#FFB347;border:1px solid #FF7A18; background:linear-gradient(110deg,#1a0b24 0%,#3b1150 38%,#5a1a06 62%,#1a0b24 100%);background-size:220% 100%; text-shadow:0 0 8px rgba(255,122,24,.75);box-shadow:0 0 0 1px rgba(155,77,255,.35),0 0 14px rgba(255,122,24,.35),inset 0 0 10px rgba(155,77,255,.25); animation:xhGlow 3.2s ease-in-out infinite,xhDrift 9s linear infinite;padding-right:22px} .badge.xtag.hallow .bemo{filter:drop-shadow(0 0 4px #FF7A18);animation:xhFlick 2.6s steps(1) infinite} .badge.xtag.hallow .xbat{position:absolute;right:5px;top:50%;width:12px;height:7px;margin-top:-4px;background:#9B4DFF;opacity:.9; clip-path:polygon(0 30%,18% 0,30% 35%,42% 20%,50% 40%,58% 20%,70% 35%,82% 0,100% 30%,80% 70%,60% 55%,50% 100%,40% 55%,20% 70%); animation:xhBat 1.8s ease-in-out infinite} @keyframes xhGlow{0%,100%{box-shadow:0 0 0 1px rgba(155,77,255,.35),0 0 12px rgba(255,122,24,.3),inset 0 0 10px rgba(155,77,255,.25)} 50%{box-shadow:0 0 0 1px rgba(155,77,255,.6),0 0 22px rgba(255,122,24,.6),inset 0 0 12px rgba(155,77,255,.4)}} @keyframes xhDrift{from{background-position:0% 0}to{background-position:220% 0}} @keyframes xhFlick{0%,100%{opacity:1}47%{opacity:1}48%{opacity:.45}50%{opacity:1}83%{opacity:.7}84%{opacity:1}} @keyframes xhBat{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-2px) scaleY(.55)}} @media(prefers-reduced-motion:reduce){.badge.xtag.hallow,.badge.xtag.hallow .bemo,.badge.xtag.hallow .xbat{animation:none}} .bico{width:15px;height:15px;border-radius:4px;object-fit:contain;flex:none;display:block} .bemo{font-size:12px;line-height:1;flex:none} .rec{margin-left:auto;text-align:right;flex:none} .recnum{font-size:44px;font-weight:800;line-height:1;letter-spacing:-.02em} .reclab{font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--dim);margin-top:6px} .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:8px 0 26px} .tile{background:linear-gradient(180deg,#141319,#0C0C10);border:1px solid #231f1a; border-radius:14px;padding:14px 16px;position:relative;overflow:hidden} .tile:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--rail,var(--orange))} .tlab{font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--muted)} .tval{font-size:26px;font-weight:800;margin-top:7px;line-height:1} .tsuf{font-size:12px;font-weight:700;color:var(--orange);margin-left:4px} .sec{margin:0 0 30px} .sechd{display:flex;align-items:center;gap:11px;margin:0 0 12px} .sectitle{font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--gold)} .secrule{flex:1;height:1px;background:var(--line)} .secnote{font-size:11px;color:var(--dim);font-weight:600} table{width:100%;border-collapse:collapse;font-size:13px} th{text-align:left;font-size:10px;letter-spacing:.11em;color:var(--muted); font-weight:800;padding:8px 10px;border-bottom:1px solid var(--line)} td{padding:9px 10px;border-bottom:1px solid #16130f;vertical-align:middle} @media (hover:hover){tr:hover td{background:#0d0d11}} .pill{display:inline-block;min-width:22px;text-align:center;font-weight:800; font-size:11px;padding:3px 7px;border-radius:6px} .w{background:rgba(59,165,93,.16);color:var(--green);border:1px solid rgba(59,165,93,.45)} .l{background:rgba(212,86,78,.14);color:var(--red);border:1px solid rgba(212,86,78,.4)} .title{font-size:10px;font-weight:800;color:var(--gold);letter-spacing:.08em} .found{background:linear-gradient(135deg,#1a1207,#0c0c10);border-color:#4A3A17} .fbig{font-size:21px;font-weight:800;letter-spacing:-.01em;color:var(--gold);padding:4px 0 0} .fsub{color:var(--muted);font-size:13px;line-height:1.6;margin-top:8px} .tryo{border:1px solid var(--line);border-radius:12px;background:#0b0b0f;padding:12px 14px;margin-bottom:10px} .tryhd{display:flex;align-items:center;gap:9px;flex-wrap:wrap} .trres{font-size:10px;font-weight:800;letter-spacing:.13em;border-radius:4px;padding:3px 8px;color:#0a0a0d} .trres.pass{background:var(--green)} .trres.fail{background:#6A6876} .trdate{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.06em} .trplaced{font-size:10px;font-weight:800;letter-spacing:.13em;color:var(--gold);border:1px solid #4A3A17;border-radius:4px;padding:2px 7px} .trby{margin-top:9px;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:7px} .trlab{font-size:10px;font-weight:800;letter-spacing:.15em;color:var(--dim)} .olab{font-size:10px;font-weight:800;letter-spacing:.15em;color:var(--dim);margin:2px 0 8px} .orow{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid #16130f;font-size:13px} .orow:last-child{border-bottom:0} .orow .ln{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .odays{color:var(--dim);font-size:12px;font-weight:700;white-space:nowrap} .oexp{color:var(--dim);font-size:11px;line-height:1.55;margin:-2px 0 9px;max-width:420px} .omore{color:var(--dim);font-size:12px;font-weight:700;padding-top:8px} .crow{display:flex;gap:10px;padding:11px 0;border-bottom:1px solid #16130f} .crow:last-child{border-bottom:0} .cav{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:0 0 28px;margin-top:2px} .cmain{flex:1;min-width:0} .cwho{font-size:13px;font-weight:800;color:var(--text)} .cmk{display:inline-flex;align-items:center;vertical-align:middle} /* WHAT THEY PLAY. The label chips carry the count inside them so the row reads as one object per lane rather than as a list with numbers trailing it. */ .btags{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 16px} .btag{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.06em; text-transform:uppercase;color:var(--text);background:var(--panel2);border:1px solid var(--line); border-radius:999px;padding:6px 7px 6px 12px} .btag i{font-style:normal;font-size:10px;font-weight:800;color:#0a0a0d;background:var(--gold); border-radius:999px;min-width:18px;text-align:center;padding:2px 6px} .btrks{display:flex;flex-direction:column;gap:2px} .btrk{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:11px;text-decoration:none;min-width:0} @media (hover:hover){.btrk:hover{background:#ffffff07;text-decoration:none}} .bthumb{width:58px;height:33px;border-radius:6px;object-fit:cover;background:#15121a;flex:none} .btin{flex:1;min-width:0} .btt{display:block;font-size:13px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bta{display:block;font-size:11px;font-weight:600;color:var(--dim);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media (hover:hover){.btrk:hover .btt{color:var(--gold)}} .btn{flex:none;font-size:12px;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums} .bnote{font-size:11px;color:var(--dim);font-weight:600;line-height:1.5;margin-top:12px} @media (max-width:560px){.bthumb{width:46px;height:26px}.btt{font-size:12px}.btag{font-size:10px;padding:5px 6px 5px 10px}} @media (hover:hover){.cwhol:hover{color:var(--gold);text-decoration:none}} .cavl{flex:0 0 28px;display:block;line-height:0;margin-top:2px} .cavl .cav{margin-top:0} @media (hover:hover){.cavl:hover{opacity:.82}} .cwhen{font-size:11px;color:var(--dim);font-weight:700;margin-left:7px} .cbody{font-size:14px;line-height:1.55;color:#D9D5CC;margin-top:3px;white-space:pre-wrap;overflow-wrap:anywhere} .cgone{font-size:13px;color:var(--dim);font-style:italic;margin-top:3px} .cx{background:none;border:0;color:var(--dim);font-size:11px;font-weight:700;cursor:pointer;padding:0 2px} @media (hover:hover){.cx:hover{color:#E06C6C}} .cin{width:100%;box-sizing:border-box;background:#0C0A08;border:1px solid var(--edge);border-radius:10px;color:var(--text);font:inherit;font-size:14px;padding:10px 12px;resize:vertical;min-height:62px} .cin:focus{outline:0;border-color:#4a3a20} .cin{caret-color:var(--gold)} .cact{display:flex;gap:6px;align-items:center;margin-top:6px} .cv{background:none;border:1px solid #241d14;border-radius:7px;color:var(--dim);font:inherit;font-size:11px;font-weight:700;padding:3px 9px;cursor:pointer} @media (hover:hover){.cv:hover{color:var(--text);border-color:#4a3a20}} .cv.on{color:#3BA55D;border-color:#3BA55D66} .cv.dn{color:#D4564E;border-color:#D4564E66} .creply{margin-left:34px;border-left:2px solid #1b1610;padding-left:12px} .creplybox:empty{display:none} .creplybox{margin-top:10px} .cin::placeholder{color:var(--dim)} .cbar{display:flex;align-items:center;gap:10px;margin-top:8px} .cbtn{background:#E89900;border:0;border-radius:9px;color:#12100c;font-weight:800;font-size:12px;letter-spacing:.06em;padding:8px 15px;cursor:pointer} .cbtn[disabled]{opacity:.45;cursor:default} .cerr{font-size:12px;color:#E06C6C;font-weight:600} .cnote{font-size:12px;color:var(--dim)} .cleft{margin-left:auto;font-size:11px;color:var(--dim);font-weight:700} .balstrip{text-align:center} .ballab{font-size:10px;font-weight:800;letter-spacing:.2em;color:var(--dim)} .balnum{font-size:44px;font-weight:800;line-height:1.05;color:var(--gold);margin:4px 0 2px} .balsub{font-size:12px;color:var(--dim);font-weight:700} .bk{border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px;background:#0B0A0C} .bk.settled{opacity:.72} .bkhd{display:flex;align-items:center;gap:12px;margin-bottom:12px} .bktag{font-size:10px;font-weight:800;letter-spacing:.16em;padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--dim)} .bktag.open{color:#3BA55D;border-color:#3BA55D55} .bktag.locked{color:var(--gold);border-color:#F9B23455} .bkmeta{font-size:11px;color:var(--dim);font-weight:700} .bkrow{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch} .bkv{align-self:center;font-size:12px;color:var(--dim);font-weight:800} .bkf{border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center} .bkf.won{border-color:#3BA55D88;background:#0B140E} .bkfh{display:flex;align-items:center;gap:8px;justify-content:center;margin-bottom:6px} .bkfn{font-size:14px;font-weight:800} .bkpool{font-size:20px;font-weight:800;color:var(--gold)} .bkret{font-size:11px;color:var(--dim);font-weight:700;margin-top:2px} .bkpick{margin-top:10px} .bknote{font-size:12px;color:var(--dim);margin-top:10px} .bkmine{font-size:13px;font-weight:700;margin-top:10px;color:var(--muted)} .bkmine.up{color:#3BA55D} .bkstaff{display:flex;gap:7px;margin-top:11px;border-top:1px solid #16130f;padding-top:10px} .bkin{margin-bottom:7px} @media (max-width:620px){.bkrow{grid-template-columns:1fr}.bkv{display:none}} .cmini{margin-top:12px;border-top:1px solid #16130f;padding-top:10px} .cmini .crow{padding:8px 0} .copen{background:none;border:1px solid #241d14;border-radius:8px;color:var(--dim); font:inherit;font-size:10px;font-weight:800;letter-spacing:.14em;padding:5px 11px;cursor:pointer} @media (hover:hover){.copen:hover{color:var(--text);border-color:#4a3a20}} .pemb{margin-left:10px;color:var(--gold);font-size:.72em;vertical-align:middle} .efield{margin:0 0 22px} .elab{font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--dim);margin-bottom:6px} .enote{font-size:12px;color:var(--dim);line-height:1.5;margin-bottom:8px} .elist{display:flex;flex-direction:column;gap:6px;margin-top:8px} .erow{display:flex;align-items:center;gap:10px;background:#0C0A08;border:1px solid #241d14;border-radius:10px;padding:9px 12px;touch-action:none} .erow.edrag{opacity:.55;border-color:#4a3a20} .egrip{cursor:grab;color:var(--dim);font-size:16px;line-height:1;user-select:none} .ename{flex:1;font-size:14px;font-weight:600} .earr{background:none;border:0;color:var(--dim);font-size:11px;cursor:pointer;padding:2px 5px} @media (hover:hover){.earr:hover{color:var(--text)}} .epick{display:flex;flex-wrap:wrap;gap:7px} .echip{background:#0C0A08;border:1px solid #241d14;border-radius:999px;color:var(--muted);font:inherit;font-size:12px;font-weight:700;padding:6px 13px;cursor:pointer} .echip.on{border-color:var(--orange);color:var(--gold);background:#1a1206} .ecol{width:54px;height:34px;padding:0;border:1px solid #241d14;border-radius:8px;background:#0C0A08;cursor:pointer;margin-right:8px;vertical-align:middle} .esub{margin-top:10px} .efile{font-size:12px;color:var(--muted);margin-bottom:6px;display:block} .ebar{display:flex;align-items:center;gap:12px;margin-top:6px} .edwrap{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:22px;align-items:start} .edpane{position:sticky;top:16px} .edprev{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#08080B} .edprevhd{font-size:10px;font-weight:800;letter-spacing:.18em;color:var(--dim);padding:9px 14px;border-bottom:1px solid var(--line)} .pvbar{display:flex;gap:7px;padding:9px 12px;border-bottom:1px solid var(--line)} .pvhold{padding:14px;position:relative;min-height:120px;transition:opacity .15s} .pvhold.busy{opacity:.45} .eshelf{display:block;margin-top:4px} .efam{display:flex;align-items:baseline;gap:8px;margin:14px 0 7px} .efaml{font-size:10px;letter-spacing:.14em;font-weight:800;color:var(--gold)} .efamn{font-size:11px;color:var(--dim)} .eswrow{display:flex;flex-wrap:wrap;gap:9px} /* THE REBUILT EDITOR - order beside the preview, drawers underneath. */ /* THE PROFILE TABS, MADE OBVIOUS. 1 Oct: the first cut styled them as quiet folder tabs - grey text on a near-black card, hanging off nothing, because the sections below are not panels. They read as labels, not controls. These are a segmented control instead: a bordered tray, raised pills, a lit tab. */ .ptabs{display:flex;gap:4px;flex-wrap:wrap;align-items:center;margin:22px 0 18px; padding:5px;background:#100D08;border:1px solid #2b2418;border-radius:13px; box-shadow:0 6px 22px #00000055} .ptab{position:relative;background:#1A150D;border:1px solid #2e2718;border-radius:9px; padding:11px 20px;font:inherit;font-size:12px;font-weight:800;letter-spacing:.14em; text-transform:uppercase;color:#CFCBD8;cursor:pointer;-webkit-tap-highlight-color:transparent; transition:background .14s ease,color .14s ease,border-color .14s ease} @media (hover:hover){.ptab:hover{background:#241D11;color:#FFF8E8;border-color:#4a3c24}} .ptab:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .ptab.on{background:linear-gradient(180deg,#3A2B0E,#241A07);color:var(--gold); border-color:#6b5320;box-shadow:inset 0 1px 0 #ffffff14,0 2px 10px #00000055} /* The lit tab also carries a bar, so the state survives a colour-blind read. */ .ptab.on::after{content:"";position:absolute;left:20px;right:20px;bottom:5px; height:2px;border-radius:2px;background:var(--gold)} /* The league filter inside the bout record. */ .plgf{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 11px} .plg{background:#15110B;border:1px solid #2a2317;font:inherit;font-size:12px; font-weight:700;color:#BDB9C8;cursor:pointer;padding:5px 12px;border-radius:7px} @media (hover:hover){.plg:hover{color:#FFF8E8;background:#221B10;border-color:#41351f}} .plg.on{color:#F0D77A;border-color:#6b5320;background:#2A1F08} @media (max-width:560px){.ptabs{gap:3px;padding:4px} .ptab{padding:10px 13px;font-size:11px;letter-spacing:.1em} .ptab.on::after{left:13px;right:13px}} .edtop{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:16px;align-items:start;margin-bottom:18px} .edorderpane{background:#0E0C09;border:1px solid var(--line);border-radius:12px;padding:14px 15px} .etabs{display:flex;gap:4px;padding-left:4px;flex-wrap:wrap} .etab{background:#14100A;border:1px solid var(--line);border-bottom:none;border-radius:9px 9px 0 0;padding:9px 17px;font:inherit;font-size:13px;font-weight:700;color:#8A8798;cursor:pointer;position:relative;top:1px} @media (hover:hover){.etab:hover{color:#E9E6EE}} .etab.on{background:#0E0C09;color:var(--gold);z-index:var(--z-raise)} .ebay{background:#0E0C09;border:1px solid var(--line);border-radius:0 12px 12px 12px;padding:14px 16px 12px;margin-bottom:18px} .efams{display:flex;flex-wrap:wrap;gap:2px;padding-bottom:11px;border-bottom:1px solid var(--line);margin-bottom:14px} .efamt{background:none;border:none;font:inherit;font-size:12px;font-weight:700;color:#8A8798;cursor:pointer;padding:5px 10px;border-radius:6px;letter-spacing:.03em} @media (hover:hover){.efamt:hover{color:#E9E6EE;background:#ffffff08}} .efamt.on{color:#F0D77A;box-shadow:inset 0 -2px 0 var(--gold)} .efamc{color:#5a5468;font-weight:600;margin-left:5px;font-size:10px} .eswgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;align-content:start;min-height:150px} .epager{display:flex;align-items:center;gap:10px;margin-top:13px;padding-top:11px;border-top:1px solid var(--line)} .epgn{font-size:11px;color:#8A8798;margin-right:auto} .epg,.epgc{background:none;border:none;font:inherit;font-size:12px;font-weight:700;color:var(--gold);cursor:pointer;padding:4px 9px;border-radius:6px} .epgc{color:#8A8798} @media (hover:hover){.epg:hover:not(:disabled),.epgc:hover{background:#ffffff0a}} .epg:disabled{color:#4a4152;cursor:default} .esw.emb{display:flex;align-items:center;justify-content:center;font-size:25px;color:var(--gold);background:#0C0A08} @media (max-width:900px){.edtop{grid-template-columns:1fr}.eswgrid{grid-template-columns:repeat(3,1fr)}} @media (max-width:560px){.eswgrid{grid-template-columns:repeat(2,1fr)}} .eschip{display:flex;flex-direction:column;align-items:center;gap:6px;background:transparent;border:1px solid #241d14;border-radius:10px;padding:7px 7px 6px;cursor:pointer;font:inherit;width:82px} @media (hover:hover){.eschip:hover{border-color:#3a2f1e}} .eschip.on{border-color:var(--orange);background:#160F05} .esw{display:block;width:66px;height:40px;border-radius:6px;background:#0C0A08;overflow:hidden} /* THE MOVING GROUNDS, in the shelf and on the preview. The card renders these as a real animated GIF; here they are CSS doing an impression of it, so a member can see the thing move before spending six thousand on it. */ /* THE PICTURE FRAMES THAT MOVE, 27 Oct 2026. Here rather than with each frame so the shop swatch, the editor shelf and the profile all animate from one place. --pfpa turns a ring without turning the face inside it: an img has no pseudo-element to spin, so the gradient angle is what rotates. */ @property --pfpa{syntax:'';initial-value:0deg;inherits:false} @keyframes pfpspin{to{--pfpa:360deg}} @keyframes pfpslide{0%{background-position:0 0,0% 50%}100%{background-position:0 0,300% 50%}} @keyframes pfpneon{0%,100%{box-shadow:0 0 0 2px #07070A,0 0 0 4px #29F3FF,0 0 14px #FF2FD6,0 0 28px #29F3FF88}46%{box-shadow:0 0 0 2px #07070A,0 0 0 4px #29F3FF,0 0 14px #FF2FD6,0 0 28px #29F3FF88}48%{box-shadow:0 0 0 2px #07070A,0 0 0 4px #0E4E55,0 0 4px #FF2FD644,0 0 0 #0000}50%{box-shadow:0 0 0 2px #07070A,0 0 0 4px #29F3FF,0 0 18px #FF2FD6,0 0 34px #29F3FFAA}} @keyframes pfpbeat{0%,100%{box-shadow:0 0 0 2px #07070A,0 0 0 4px #C0001A88,0 0 14px #C0001A77}12%{box-shadow:0 0 0 2px #07070A,0 0 0 6px #E0102ACC,0 0 26px #E0102AAA}24%{box-shadow:0 0 0 2px #07070A,0 0 0 4px #C0001A88,0 0 14px #C0001A77}36%{box-shadow:0 0 0 2px #07070A,0 0 0 6px #E0102ACC,0 0 24px #E0102AAA}} @keyframes pfpglitch{0%,100%{box-shadow:-3px 0 0 #FF004C,3px 0 0 #00E5FF}20%{box-shadow:-5px 1px 0 #FF004C,4px -1px 0 #00E5FF}22%{box-shadow:2px 0 0 #FF004C,-2px 0 0 #00E5FF}60%{box-shadow:-3px 0 0 #FF004C,3px 0 0 #00E5FF}62%{box-shadow:-7px -2px 0 #FF004C,6px 2px 0 #00E5FF}64%{box-shadow:-3px 0 0 #FF004C,3px 0 0 #00E5FF}} @keyframes pfpcorona{0%,100%{box-shadow:0 0 0 2px #1A1A1A,0 0 22px 6px #FFF3D0AA,0 0 60px 16px #FFB34766}50%{box-shadow:0 0 0 2px #1A1A1A,0 0 30px 10px #FFF8E0DD,0 0 84px 26px #FFB34788}} @keyframes pfpflame{0%,100%{box-shadow:0 0 18px #FF6A0088,0 0 40px #FF2D0044}50%{box-shadow:0 0 28px #FFB300AA,0 0 60px #FF2D0066}} @keyframes pfpmorph{0%,100%{border-radius:50%}20%{border-radius:30% 70% 70% 30% / 30% 30% 70% 70%}40%{border-radius:22%}60%{border-radius:70% 30% 50% 50% / 50% 60% 40% 50%}80%{border-radius:50% 50% 22% 22% / 40% 40% 60% 60%}} @keyframes pfpglint{0%,100%{filter:brightness(1)}45%{filter:brightness(1)}50%{filter:brightness(1.35)}55%{filter:brightness(1)}} @media (prefers-reduced-motion:reduce){.pstack .hero2 .avatar{animation:none!important}} /* THE EMBLEM FINISHES, 27 Oct 2026. Only the keys listed here are painted - an older mark keeps the plain accent colour it always had. */ .efx-ankh,.efx-wheel,.efx-yinyang,.efx-rose,.efx-maltese,.efx-scales,.efx-atom,.efx-chain,.efx-infinity,.efx-rook,.efx-knight,.efx-halo,.efx-comet,.efx-eclipse,.efx-trident,.efx-omega,.efx-sovereign{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} .efx-ankh,.efx-knight{background-image:linear-gradient(180deg,#FFF3C4,#E8A21E 55%,#8A5A00)} .efx-wheel{background-image:linear-gradient(180deg,#C8F2D8,#3FBF7F 50%,#0F5A3A);filter:drop-shadow(0 0 4px #3FBF7F66)} .efx-yinyang{background-image:linear-gradient(180deg,#FFFFFF,#9A9AA6 55%,#2A2A32)} .efx-rose{background-image:linear-gradient(180deg,#FF6B7F,#C0001A 55%,#5A0010);filter:drop-shadow(0 0 4px #C0001A77)} .efx-maltese{background-image:linear-gradient(180deg,#F2F2F6,#B0001A 50%,#3A0006)} .efx-scales,.efx-chain{background-image:linear-gradient(180deg,#F2F5F8,#8A95A3 50%,#2A3038)} .efx-atom{background-image:linear-gradient(180deg,#B9FBFF,#29F3FF 50%,#0077FF);filter:drop-shadow(0 0 6px #29F3FFAA)} .efx-infinity{background-image:linear-gradient(180deg,#C8FFE6,#4DFFA6 50%,#0F8A55);filter:drop-shadow(0 0 4px #4DFFA666)} .efx-rook{background-image:linear-gradient(180deg,#E3D2FF,#8A5CD6 50%,#2A1745);filter:drop-shadow(0 0 5px #8A5CD699)} .efx-halo{background-image:linear-gradient(110deg,#8A5A00 0%,#E8A21E 30%,#FFFFFF 45%,#E8A21E 60%,#8A5A00 100%);background-size:250% 100%;animation:efxshine 2.6s linear infinite;filter:drop-shadow(0 0 6px #E8A21E99)} .efx-comet{background-image:linear-gradient(0deg,#FF2D00,#FFB300 50%,#FFF2B0);animation:efxflame 1.2s ease-in-out infinite} .efx-eclipse{background-image:linear-gradient(#0A0A0C,#0A0A0C);animation:efxcorona 4s ease-in-out infinite} .efx-trident{background-image:linear-gradient(180deg,#E0FFFF,#29C9FF,#0040A0,#00E5C0,#E0FFFF);background-size:100% 300%;animation:efxtide 4s linear infinite;filter:drop-shadow(0 0 6px #29C9FF88)} .efx-omega{background-image:linear-gradient(90deg,#FF4D6D,#FFB84D,#4DFFA6,#4DA6FF,#B44DFF,#FF4D6D);background-size:300% 100%;animation:efxprism 3s linear infinite;filter:drop-shadow(0 0 6px #FFFFFF66)} .efx-sovereign{background-image:linear-gradient(115deg,#6E4A0E,#E8A21E 25%,#FFF8E0 40%,#FFD24D 50%,#E8A21E 65%,#6E4A0E 100%);background-size:300% 100%;animation:efxprism 4s linear infinite,efxregal 2.4s ease-in-out infinite} .efx-pawn,.efx-bishop,.efx-whitepawn,.efx-whiteknight,.efx-whitebishop,.efx-whiterook,.efx-whitequeen,.efx-whiteking{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} .efx-pawn{background-image:linear-gradient(180deg,#FFD9B0,#C77A3A 50%,#5A2E10)} .efx-bishop{background-image:linear-gradient(180deg,#E8F0FF,#7F8FB8 50%,#2A3352);filter:drop-shadow(0 0 4px #7F8FB866)} .efx-whitepawn,.efx-whiteknight,.efx-whitebishop,.efx-whiterook{background-image:linear-gradient(180deg,#FFFFFF,#F1E6CC 55%,#B9A57A)} .efx-whitequeen{background-image:linear-gradient(180deg,#FFFFFF,#FBE3F0 50%,#C48AA8);filter:drop-shadow(0 0 5px #FBE3F0AA)} .efx-whiteking{background-image:linear-gradient(180deg,#FFFFFF,#FFE9A8 50%,#C8901E);filter:drop-shadow(0 0 6px #FFE9A8CC)} @keyframes efxshine{0%{background-position:100% 0}100%{background-position:-150% 0}} @keyframes efxflame{0%,100%{filter:drop-shadow(0 0 4px #FF6A00AA)}50%{filter:drop-shadow(0 0 10px #FFB300DD) brightness(1.15)}} @keyframes efxcorona{0%,100%{filter:drop-shadow(0 0 3px #FFF3D0) drop-shadow(0 0 8px #FFB34788)}50%{filter:drop-shadow(0 0 5px #FFFFFF) drop-shadow(0 0 16px #FFB347CC)}} @keyframes efxtide{to{background-position:0 300%}} @keyframes efxprism{to{background-position:300% 0}} @keyframes efxregal{0%,100%{filter:drop-shadow(0 0 5px #E8A21EAA)}50%{filter:drop-shadow(0 0 12px #FFD24DFF) drop-shadow(0 0 2px #FFFFFF)}} @media (prefers-reduced-motion:reduce){.efx-ankh,.efx-wheel,.efx-yinyang,.efx-rose,.efx-maltese,.efx-scales,.efx-atom,.efx-chain,.efx-infinity,.efx-rook,.efx-knight,.efx-halo,.efx-comet,.efx-eclipse,.efx-trident,.efx-omega,.efx-sovereign{animation:none!important}} @keyframes tfcPulse{0%,100%{filter:brightness(.88)}50%{filter:brightness(1.24)}} @keyframes tfcScan{0%{background-position:0 0,0 0}100%{background-position:0 16px,0 0}} @keyframes tfcRain{0%{background-position:0 0,0 0}100%{background-position:0 22px,0 0}} @keyframes tfcAurora{0%,100%{filter:hue-rotate(0deg)}50%{filter:hue-rotate(38deg)}} @keyframes tfcEmber{0%,100%{filter:brightness(.9)}50%{filter:brightness(1.3)}} @keyframes tfcSweep{0%{background-position:120% 0,0 0}100%{background-position:-20% 0,0 0}} /* THE VAULT FOUR, 23 Oct 2026. Same rule as the six above: this is CSS doing an impression of what the card draws on canvas, so a member can see the thing move before spending nine thousand on it. */ @keyframes tfcVault{0%{background-position:124% 0,0 0,0 0}100%{background-position:-24% 0,0 0,0 0}} @keyframes tfcCircuit{0%{background-position:0 0,0 0,0 0}100%{background-position:26px 0,0 26px,0 0}} @keyframes tfcPrism{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(360deg)}} @keyframes tfcRings{0%{background-size:100% 100%,100% 100%;opacity:.86}100%{background-size:150% 150%,100% 100%;opacity:1}} @media(prefers-reduced-motion:reduce){.esw,.pstack .hero2{animation:none!important}} /* ===== UPGRADE PASS, 4 Oct 2026. Items 1, 3, 11 and 14 of the twenty the operator asked for. Kept in one block rather than scattered through the sheet so the whole visual change can be read, and reverted, in one place. WHAT IS DELIBERATELY NOT HERE: anything that moves a number. This block changes type, figures, weight and depth only. */ /* 1. THE DISPLAY FACE ON HEADINGS ONLY. Archivo Narrow is condensed, so it buys about 15 per cent more width at the same size - which is what lets a 38px masthead title hold a long league name without wrapping. Body copy stays Inter because a condensed face is harder to read in a paragraph, and every NUMBER stays Inter for the same reason plus item 3. */ .mast h1,.pagehd h1,.ch1,.fh1,.pmh1,.bttl,.sectitle,.csech,.clab,.lstatl,.mastkick, .aschd,.gcardh,.hallh,.dnavi,.atag,.cbadge,.bsub,.jlab,.pmhd{font-family:var(--disp)} .mast h1,.pagehd h1,.ch1{letter-spacing:-.005em} /* Letterspaced small caps need a touch more tracking in a condensed face than they did in Inter, or the counters close up. */ .bttl,.sectitle,.csech,.clab,.lstatl,.mastkick,.aschd,.dnavi{letter-spacing:.17em} /* 3. TABULAR FIGURES WHEREVER A NUMBER REPEATS DOWN A COLUMN. Proportional digits make a column of records ragged - a 1 is half the width of a 0 - and a ragged column is the single clearest tell that a table was not typeset. .lstatv already had this; everything else did not. */ .bval,.cval,.n,.frank,.clbr,.credhv,.asr,.aspk,.stdv,.gcardb .n, .pmtot,.pms,.tval,.asrs{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} /* 11. THE TOP THREE AS MEDALS. p1/p2/p3 were coloured numerals, which reads as three slightly different list items. A filled disc with the numeral knocked out of it reads as a placing. */ .bpos.p1,.bpos.p2,.bpos.p3{width:19px;height:19px;line-height:19px;border-radius:50%; text-align:center;font-size:11px;font-weight:800;color:#15110a;flex:none; box-shadow:0 1px 3px rgba(0,0,0,.5)} .bpos.p1{background:linear-gradient(145deg,#FFE9A8,#F2B733 58%,#C98A12)} .bpos.p2{background:linear-gradient(145deg,#F2F4F7,#C2C7D0 58%,#8E949E)} .bpos.p3{background:linear-gradient(145deg,#F0C9A0,#CE9158 58%,#9A6428)} /* 14. ELEVATION on the surfaces that are cards. Not on rows, not on chips - only things that are meant to sit above the page. */ .board,.lstat,.champ,.mast,.gcard,.pmcard,.abt,.fjudge,.flead,.pmdec,.ascore{ box-shadow:var(--lift),var(--liftin)} .ascore{box-shadow:none} .esw.plain{background:repeating-linear-gradient(45deg,#141318 0 5px,#0C0A08 5px 10px)} .esw.frame{background:#111016;box-sizing:border-box} .ecolw{display:inline-flex;align-items:center;gap:7px;margin-right:12px} .ereset{background:#0C0A08;border:1px solid #241d14;color:var(--dim);border-radius:999px;padding:4px 10px;font:inherit;font-size:10px;font-weight:800;letter-spacing:.04em;cursor:pointer} @media (hover:hover){.ereset:hover{border-color:#3a2f1e;color:var(--muted)}} .eown{margin-top:20px;padding-top:4px;border-top:1px solid #1c1812} .coll{display:block} .collfam{display:flex;align-items:baseline;gap:9px;margin:14px 0 8px} .collfl{font-size:10px;letter-spacing:.14em;font-weight:800;color:var(--gold)} .collfn{font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums} .collrow{display:flex;flex-wrap:wrap;gap:10px} .collitem{display:flex;flex-direction:column;align-items:center;gap:5px;width:78px;padding:7px 5px 6px;border:1px solid #1e1a14;border-radius:10px;background:#0A0A0C} .collitem.on{border-color:var(--orange);background:#160F05;box-shadow:0 0 0 1px #E8990033} .collsw{display:block;width:58px;height:36px;border-radius:7px;background:#121118;box-sizing:border-box;overflow:hidden} .collsw.collframe,.collsw.collpfp{background:#121118} .collsw.collpfp{width:40px;height:40px;border-radius:11px} .collsw.collem{display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--gold);background:#0F0E13} .collsw.collplain{background:repeating-linear-gradient(45deg,#16151c 0 5px,#0d0c11 5px 10px)} .collcap{font-size:10px;font-weight:700;color:var(--muted);text-align:center;line-height:1.3;word-break:break-word} .collitem.on .collcap{color:var(--gold)} .collcost{font-size:10px;font-weight:800;color:#F0A81E;font-variant-numeric:tabular-nums} .collpct{font-size:10px;font-weight:800;color:#3BA55D;font-variant-numeric:tabular-nums;margin-top:1px} .ethumb{width:190px;height:106px;border-radius:10px;border:1px solid #241d14;background:#0C0A08;overflow:hidden;margin:0 0 9px;display:block} .ethumb img{width:100%;height:100%;object-fit:cover;display:block} .ethumb.empty{border-style:dashed;background:repeating-linear-gradient(45deg,#141318 0 6px,#0C0A08 6px 12px)} .ethumb.empty img{display:none} .esw.pfp{width:46px;height:46px;border-radius:12px;box-sizing:border-box;background:linear-gradient(150deg,#3A3744,#221F2A)} .escap{font-size:10px;font-weight:700;letter-spacing:.02em;color:var(--muted);text-align:center;line-height:1.35;word-break:break-word} .eschip.on .escap{color:var(--gold)} .escap .eprice{display:block;margin:3px 0 0} .eyield{display:inline-block;margin-left:6px;font-size:10px;font-weight:800;color:#3BA55D;letter-spacing:.02em} /* THE TROPHY WALL. A piece nobody here has won is dimmed rather than hidden, and wears the name of the thing that opens it. Still clickable - the save route is what refuses it - because a chip that does nothing at all reads as a bug, while one that says LOCKED - KING OF THE CYPHER reads as a target. */ .eschip.locked{opacity:.52;border-style:dashed} @media (hover:hover){.eschip.locked:hover{opacity:.78;border-color:var(--gold)}} .eschip.locked .esw{filter:grayscale(.55) brightness(.8)} @media (hover:hover){.eschip.locked:hover .esw{filter:none}} /* THE TROPHY CASE. Gold, and deliberately the loudest thing on the page after the name - it is the only row here that cannot be bought. */ .trophies{display:flex;flex-wrap:wrap;gap:9px;margin-top:4px} /* A trophy is not a rounded rectangle. Gilt edge, square corners, a hairline inset like a picture frame, and a sheen across the top. */ .trophy{position:relative;display:flex;flex-direction:column;gap:2px;border:2px solid;border-image:linear-gradient(135deg,#FFE9A8,#C9A227 30%,#6E4A0E 58%,#C9A227 76%,#FFE9A8) 1;border-radius:0;background:linear-gradient(160deg,#1e1709,#0d0a04);padding:11px 15px 10px;min-width:154px;box-shadow:inset 0 1px 0 #FFE9A81F,0 8px 22px #00000066} .trophy:before{content:"";position:absolute;inset:3px;border:1px solid #C9A2273D;pointer-events:none} .trophy b{font-size:11px;font-weight:900;letter-spacing:.06em;color:var(--gold)} .trophy i{font-size:10px;font-style:normal;color:#8A8798} /* EARNED, where a price would be. Gold and small-caps rather than a number, on the chip in the editor and on the collection tile. */ /* An earned swatch wears its gilt in the shelf too, so the prestige row is visibly a different class of object before you click anything. */ .eschip.earned{border-color:#6E4A0E;background:linear-gradient(170deg,#161006,#0C0A08)} .eschip.earned .esw{border-radius:0;box-shadow:0 0 0 2px #C9A227,inset 0 0 0 1px #FFE9A855} .eschip.earned.on{border-color:#F0D77A;background:#1B1307} .eprice.earned{color:var(--gold);font-weight:900;letter-spacing:.05em} .collcost.earned{color:var(--gold);font-weight:900;font-size:10px;letter-spacing:.05em} .cearn{color:#F9B234;font-weight:900;font-size:10px;letter-spacing:.05em} .elock{display:block;margin-top:3px;font-size:10px;font-weight:800;color:var(--gold);letter-spacing:.04em;line-height:1.25} .eprice{display:inline-block;margin-left:7px;font-size:10px;font-weight:800;letter-spacing:.04em;color:#F0A81E;background:#140f04;border:1px solid #3a2a08;border-radius:999px;padding:1px 6px;vertical-align:1px} .eprice.owned{color:var(--dim);background:#0d0d0f;border-color:#221f1a} .echip.on .eprice{border-color:#5a4110} .ebill{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin:14px 0 2px;padding:11px 13px;border:1px solid #241d14;border-left:2px solid #F0A81E;border-radius:6px;background:#0C0A08} .ebnote{font-size:12px;color:var(--dim);line-height:1.5} .ebtot{font-size:15px;font-weight:800;color:#F0A81E;letter-spacing:.01em} .ebtot.short{color:var(--red)} .enote.bad{color:var(--red)} .pvmsg{padding:0 14px 12px;font-size:12px;color:var(--dim);min-height:17px} .pvmsg.bad{color:var(--red)} .pvmsg.ok{color:var(--green)} .pvhold img{display:block;width:100%;height:auto;border-radius:10px} @media (max-width:860px){.edwrap{grid-template-columns:1fr}.edpane{position:static}} .brow2{display:flex;align-items:center;gap:11px;padding:6px 0;font-size:13px} .bgen{width:132px;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600} .bbar{flex:1;height:8px;border-radius:5px;background:#17141c;overflow:hidden;min-width:0} .bbar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#E89900,#F9B234)} .bhrs{width:52px;text-align:right;color:var(--muted);font-weight:700;font-size:12px;flex:none} .taper td{padding:10px 10px 14px;border-bottom:1px solid #16130f;background:#0a0a0e} .tapehd{font-size:10px;font-weight:800;letter-spacing:.15em;color:var(--gold);margin-bottom:8px} .tapemeta{color:var(--dim);font-weight:700;letter-spacing:.06em;margin-left:8px} /* THE TAPE PLAYER. Dark, gold, and the same shape wherever a tape appears. audio.tape keeps display:none once upgraded - the native strip is the fallback for a browser that never ran the script, not a second player. */ .tp{display:flex;align-items:center;gap:13px;padding:11px 14px;border-radius:12px; border:1px solid #241f16;background:linear-gradient(180deg,#121016,#0b0b0f)} .tp.on{border-color:rgba(249,178,52,.45);box-shadow:0 0 0 1px rgba(249,178,52,.12) inset} .tp audio{display:none} .tpb{flex:none;width:38px;height:38px;border-radius:50%;cursor:pointer;position:relative; border:1px solid rgba(249,178,52,.5);background:radial-gradient(circle at 35% 30%,#3a2a08,#15110a); transition:transform .12s ease,border-color .12s ease} @media (hover:hover){.tpb:hover{transform:scale(1.06);border-color:var(--gold)}} .tpb:before{content:"";position:absolute;left:14px;top:11px;width:0;height:0; border-left:12px solid var(--gold);border-top:8px solid transparent;border-bottom:8px solid transparent} .tp.on .tpb:before{left:12px;top:11px;width:4px;height:16px;border:0;background:var(--gold); box-shadow:7px 0 0 0 var(--gold)} .tpw{flex:1;min-width:0;height:34px;display:flex;align-items:center;gap:2px;cursor:pointer} .tpw i{flex:1;min-width:1px;border-radius:2px;background:#2a2431;transition:background .12s ease} .tpw i.on{background:linear-gradient(180deg,#F9B234,#E89900)} .tp.on .tpw i.on{box-shadow:0 0 6px rgba(249,178,52,.35)} .tpt{flex:none;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--muted); font-variant-numeric:tabular-nums;min-width:74px;text-align:right} /* ===================== POLISH ===================== Nothing here changes what the site says. It changes how it feels to move through: where you are, what is clickable, and where the eye lands. */ html{scroll-behavior:smooth} ::selection{background:rgba(249,178,52,.26);color:#fff} /* The default scrollbar is a bright grey slab down the side of a black page. */ *{scrollbar-width:thin;scrollbar-color:#332c22 var(--ink)} ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-track{background:var(--ink)} ::-webkit-scrollbar-thumb{background:#2b251d;border-radius:8px;border:2px solid var(--ink)} @media (hover:hover){::-webkit-scrollbar-thumb:hover{background:#4a3f2c}} /* Keyboard users could not see where they were at all. */ :focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:5px} /* YOU ARE HERE. The nav gave no indication which page you were on. */ .navsub{position:relative;transition:color .14s ease} .navsub.here{color:var(--gold)} .navsub.here:after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent)} /* Everything that is a card now answers the cursor. */ .tile,.board,.abt,.evblk,.tcard,.mcard,.champ,.vcard,.erow,.tryo,.sec{ transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease} @media (hover:hover){.abt:hover,.evblk:hover,.tcard:hover,.mcard:hover,.erow:hover{border-color:#3c3121}} @media (hover:hover){.champ:hover,.vcard:hover{transform:translateY(-2px)}} @media (hover:hover){.tile:hover{border-color:#31291f}} tr{transition:background .12s ease} @media (hover:hover){table tr:hover{background:rgba(249,178,52,.045)}} .brow{transition:background .12s ease} @media (hover:hover){.brow:hover{background:rgba(249,178,52,.045)}} /* A hundred and fifty bouts is a long way back up. */ .totop{position:fixed;right:18px;bottom:18px;width:42px;height:42px;border-radius:13px;cursor:pointer; border:1px solid #2e2618;background:rgba(16,14,20,.92);color:var(--gold);font-size:15px;line-height:1; display:none;align-items:center;justify-content:center;z-index:var(--z-float);opacity:0;transition:opacity .2s ease,transform .16s ease} /* THE ROLL OF OFFICE. Gold, spaced and quiet - the look is doing the work that the word "official" does, so it leans on restraint rather than ornament. */ .ofnd{position:relative;margin:4px 0 30px;padding:26px 26px 24px;border:1px solid;border-image:linear-gradient(135deg,#FFE9A8,#C9A227 28%,#6E4A0E 56%,#C9A227 78%,#FFE9A8) 1;background:linear-gradient(160deg,rgba(240,168,30,.10),rgba(240,168,30,.02) 60%,transparent);box-shadow:inset 0 0 0 1px #6E4A0E33,0 18px 48px #00000070} .ofndk{font-family:var(--disp);font-size:10px;letter-spacing:.32em;color:var(--gold);font-weight:700;margin-bottom:16px} .ofndl{display:flex;align-items:center;gap:20px;text-decoration:none;min-width:0} .ofndav{flex:0 0 auto;width:104px;height:104px;border-radius:50%;object-fit:cover;background:#15121a;box-shadow:0 0 0 2px #C9A227,0 0 0 6px #0b0b0f,0 0 30px #C9A22733} .ofndn{display:flex;flex-direction:column;gap:6px;min-width:0} .ofndn b{font-family:var(--disp);font-size:30px;font-weight:700;color:var(--text);letter-spacing:.01em;line-height:1.1} .ofndn i{font-style:normal;font-size:13px;color:var(--dim);line-height:1.6;max-width:52ch} .ofsec{margin:0 0 26px} .ofhd{display:flex;align-items:center;gap:14px;margin:0 0 4px} .ofht{font-family:var(--disp);font-size:14px;font-weight:700;letter-spacing:.24em;color:var(--gold)} .ofrule{flex:1;height:1px;background:linear-gradient(90deg,#C9A22755,transparent)} .ofn2{font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums} .ofsub{font-size:13px;color:var(--dim);margin:0 0 13px;line-height:1.6} .ofgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:9px} .ofc{display:flex;align-items:center;gap:11px;padding:10px 13px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);text-decoration:none;min-width:0} @media (hover:hover){.ofc:hover{border-color:#C9A227}} .ofav{flex:0 0 auto;width:46px;height:46px;border-radius:13px;object-fit:cover;background:#15121a;display:block} .ofn{display:flex;flex-direction:column;gap:2px;min-width:0} .ofn b{font-size:14px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ofn i{font-style:normal;font-size:10px;letter-spacing:.1em;color:var(--dim);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ofalso{font-style:normal;display:block;font-size:10px;letter-spacing:.05em;color:var(--dim);font-weight:600;line-height:1.5;margin-top:2px;opacity:.78} .ofalsol{margin:9px 0 0;font-size:12px;color:var(--dim);line-height:1.7}.ofalsol b{color:var(--muted);font-weight:800;font-size:10px;letter-spacing:.12em;text-transform:uppercase}.ofalsol a{color:var(--text);font-weight:700;text-decoration:none}@media (hover:hover){.ofalsol a:hover{color:var(--gold)}}.ofalsol span{color:var(--dim);font-size:10px;letter-spacing:.06em} .ndot{display:inline-block;margin-left:6px;min-width:15px;padding:1px 5px;border-radius:9px;background:var(--gold);color:#17120a;font-size:10px;font-weight:800;line-height:1.5;text-align:center;vertical-align:middle} .ismine{position:relative;background:linear-gradient(90deg,rgba(249,178,52,.13),rgba(249,178,52,.03) 60%,transparent)!important} .ismine>td:first-child,.ismine>:first-child{box-shadow:inset 3px 0 0 var(--gold)} .ismine .lnn,.ismine .gwho,.ismine .ofn b{color:var(--gold)} @media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}} /* A BOARD HEADER THAT STAYS PUT. .twrap scrolls sideways only, so a sticky thead sticks to the viewport rather than to the box - which is what is wanted on a 200-row leaderboard. The minibar is 46px tall, so the header sits under it instead of behind it. The arrow comes from data-a, set by the sorter, so no glyph has to be escaped into this stylesheet. */ .ltab thead th{position:sticky;top:46px;z-index:var(--z-stick);background:var(--panel2);box-shadow:0 1px 0 var(--line)} .ltab th.sortme{cursor:pointer;-webkit-user-select:none;user-select:none} @media (hover:hover){.ltab th.sortme:hover{color:var(--gold)}} .ltab th.sortme:after{content:attr(data-a);color:var(--gold);font-size:10px;margin-left:4px;vertical-align:middle} .ltab th.sorta,.ltab th.sortd{color:var(--gold)} .navon{color:var(--gold)!important} .nav a.navon,.menui.navon{position:relative} .nav a.navon:after{content:attr(data-x);position:absolute;left:0;right:0;bottom:-7px;height:2px;background:var(--gold);border-radius:2px} /* BACK TO TOP. Hidden until there is something to come back from, and it keeps clear of the phone home bar with the safe-area inset. */ .totop{position:fixed;right:16px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:var(--z-float);width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--gold);font-size:13px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .18s ease;box-shadow:0 6px 18px rgba(0,0,0,.45)} .totop.on{opacity:1;pointer-events:auto} .h2h{display:inline-block;margin-left:7px;font-size:10px;letter-spacing:.12em;font-weight:800;color:var(--dim);border:1px solid var(--line);border-radius:4px;padding:1px 4px;text-decoration:none;vertical-align:middle} @media (hover:hover){.h2h:hover{color:var(--gold);border-color:var(--gold)}} /* ITEM 14, THE RIVALRY LINE. Sits between the section heading and the table, so it reads as a summary of what follows rather than a row in it. */ .rival{margin:0 0 11px;padding:10px 13px;border:1px solid var(--line);border-radius:10px; background:var(--panel);color:var(--muted);font-size:13px;line-height:1.65} .rival b{color:var(--text)} .rival a{color:var(--gold)} .rivall{display:inline-block;margin-right:9px;font-family:var(--disp);font-size:10px;letter-spacing:.2em; font-weight:800;color:var(--dim);vertical-align:1px} /* ITEM 28, THE STALE-SOURCE STRIP. Amber rather than red: the page is still correct, it is just incomplete, and red is for things a member has to act on. It sits above the masthead because the thing it qualifies is the whole page, and it is only ever in the markup when a feed is actually down. */ .srcw{margin:0 0 14px;padding:11px 14px;border:1px solid #4a3a12;border-left:3px solid var(--gold); border-radius:10px;background:rgba(249,178,52,.055);color:var(--muted);font-size:13px;line-height:1.6} .srcw b{color:var(--text)} /* THE ARCHIVE HANDOFF at the foot of a capped day list, which was shipping unstyled and reading as stray body text. */ .evmore{margin:14px 0 2px;padding:11px 14px;border:1px dashed var(--line);border-radius:10px; color:var(--dim);font-size:13px} .evmore a{color:var(--gold)} /* THE PHONE TAB BAR. Off entirely above 620px, so the desktop page carries no weight for it. hastabs adds the clearance so the last row of a board is not sitting under the bar, and the inset keeps it clear of the home gesture. */ .tabbar{display:none} .recent{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:0 0 16px} .recentl{font-family:var(--disp);font-size:10px;letter-spacing:.2em;color:var(--dim);font-weight:700} .recenti{font-size:12px;font-weight:700;color:var(--muted);text-decoration:none;border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:4px 10px;max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media (hover:hover){.recenti:hover{color:var(--gold);border-color:var(--gold)}} @media (max-width:620px){ .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-dock);background:rgba(10,10,14,.94);border-top:1px solid var(--line);padding:0 0 env(safe-area-inset-bottom,0px)} .tabi{flex:1;text-align:center;padding:11px 4px 12px;font-family:var(--disp);font-size:10px;letter-spacing:.14em;font-weight:700;color:var(--dim);text-decoration:none;text-transform:uppercase} .tabi.on{color:var(--gold);box-shadow:inset 0 2px 0 var(--gold)} body.hastabs{padding-bottom:62px} } @media (hover:hover){.totop:hover{border-color:var(--gold)}} @media (max-width:620px){.totop{right:12px;bottom:calc(68px + env(safe-area-inset-bottom,0px));width:38px;height:38px}} @media (max-width:620px){.ltab thead th{top:0}} @media (max-width:620px){.ofnd{padding:20px 16px}.ofndl{gap:14px}.ofndav{width:76px;height:76px}.ofndn b{font-size:22px}.ofgrid{grid-template-columns:1fr}.ofht{font-size:12px;letter-spacing:.18em}} /* THE JOIN LANDING. One column, centred, because a recruiting link has exactly one job and anything else on the page is a distraction from pressing it. */ .jnwrap{max-width:420px;margin:40px auto 60px;text-align:center;padding:30px 26px;border:1px solid var(--line);border-radius:18px;background:var(--panel2);box-shadow:var(--lift)} .jnemb{width:96px;height:96px;border-radius:26px;object-fit:cover;background:#15121a;display:block;margin:0 auto 16px} .jnname{font-family:var(--disp);font-size:26px;font-weight:700;color:var(--text);line-height:1.15;overflow-wrap:anywhere} .jntag{display:inline-block;margin-top:8px;font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--gold);border:1px solid var(--line);border-radius:999px;padding:5px 11px} .jnmeta{margin-top:10px;font-size:12px;color:var(--dim)} .jnact{margin-top:22px;display:flex;flex-direction:column;gap:10px;align-items:center} .jnbtn{font-size:13px;font-weight:700;padding:12px 22px;border-radius:11px;text-decoration:none;display:inline-block} .jnbtn.alt{background:none;border:1px solid var(--line);color:var(--muted)} .jnnote{font-size:13px;color:var(--muted);line-height:1.55} .jnerr{font-size:12px;color:#E09A9A;min-height:16px} .jnfine{margin-top:20px;font-size:12px;color:var(--dim);line-height:1.6} /* The owner invite link row on the crew page. */ .glink{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px} .glinkin{flex:1;min-width:190px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--muted);background:#0c0c11;border:1px solid var(--line);border-radius:9px;padding:9px 11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* THE MOVEMENT ARROW. Beside the placing, deliberately small - it is context for the number next to it, not a number of its own. */ .mvi{display:inline-block;margin-left:5px;font-size:10px;font-style:normal;font-weight:800;letter-spacing:-.02em;vertical-align:middle;white-space:nowrap} .mvi.up{color:#8BD9A4} .mvi.dn{color:#E09A9A} @media (max-width:620px){.mvi{display:block;margin:2px 0 0;font-size:10px}} /* THE SHARE ROW. Sits under the masthead, quiet until you want it. */ .shr{display:flex;gap:9px;margin:0 0 20px} .shrb{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);text-decoration:none;background:none;border:1px solid var(--line);border-radius:999px;padding:8px 14px;cursor:pointer;font-family:inherit;transition:color .14s ease,border-color .14s ease} @media (hover:hover){.shrb:hover{color:var(--acc,var(--gold));border-color:var(--acc,var(--gold))}} .shrb.ok{color:#8BD9A4;border-color:#2b5a3c} /* THE STREAK BADGE. Sits on the end of the form pips, same height, so the row does not grow when somebody goes on a run. */ .fstk{display:inline-flex;align-items:center;justify-content:center;height:17px;padding:0 6px;margin-left:5px;border-radius:5px;font-size:10px;font-weight:800;letter-spacing:.04em;font-style:normal;vertical-align:middle} .fstk.w{background:#14301f;color:#8BD9A4;box-shadow:inset 0 0 0 1px #2b5a3c} .fstk.l{background:#331618;color:#E09A9A;box-shadow:inset 0 0 0 1px #5e2b2e} .vsh2h{display:flex;flex-direction:column;align-items:center;gap:3px;padding:16px 0 14px;border-bottom:1px solid var(--line)} .vsh2h b{font-family:var(--disp);font-size:30px;font-weight:700;color:var(--gold);letter-spacing:.04em;font-variant-numeric:tabular-nums} .vsh2h span{font-size:12px;color:var(--dim)} .vsh2h.none{font-size:12px;color:var(--dim);padding:14px 0 13px} .totop.show{display:flex;opacity:1} @media (hover:hover){.totop:hover{transform:translateY(-2px);border-color:var(--gold)}} /* HEAD TO HEAD. A three-column table with the measure down the middle, so the eye compares across a label instead of across a gap. */ .vswrap{border:1px solid var(--line);border-radius:14px;background:var(--panel2);padding:6px 16px 14px;box-shadow:var(--lift)} .vsheads{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:16px 0 12px;border-bottom:1px solid var(--line)} .vshd{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;min-width:0} .vsav,.vsavx{width:56px;height:56px;border-radius:16px;object-fit:cover;background:#15121a;display:block} .vshd b{font-size:14px;color:var(--text);font-weight:700;text-align:center;overflow:hidden;text-overflow:ellipsis;max-width:100%} .vsv2{font-size:10px;letter-spacing:.2em;color:var(--dim);font-weight:800;text-transform:uppercase} .vstab{width:100%;border-collapse:collapse;margin-top:4px} .vstab th{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);font-weight:700;padding:11px 10px;text-align:center;white-space:nowrap} .vstab td{padding:11px 10px;font-size:15px;font-weight:700;color:var(--muted);width:38%;font-variant-numeric:tabular-nums} .vstab td:first-child{text-align:right} .vstab td:last-child{text-align:left} .vstab tr+tr th,.vstab tr+tr td{border-top:1px solid var(--line)} .vsv.up{color:var(--text)} .vsv.up:first-child{box-shadow:inset 3px 0 0 var(--gold)} .vsv.up:last-child{box-shadow:inset -3px 0 0 var(--gold)} /* THE 404. */ .nf .nfm{font-family:var(--disp);font-size:54px;font-weight:700;color:var(--gold);opacity:.3;line-height:1;margin-bottom:6px} .nfl{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:18px} .nfl a{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--gold);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:9px 15px} @media (hover:hover){.nfl a:hover{border-color:var(--gold)}} @media (max-width:620px){.vstab td{font-size:14px;padding:10px 6px}.vstab th{font-size:10px;padding:10px 4px}.vswrap{padding:4px 10px 12px}} /* The tier bars were flat blocks; the same gold gradient the player uses. */ .dbar{background-image:linear-gradient(180deg,rgba(255,255,255,.14),transparent 55%)} @media (hover:hover){.dcol:hover .dbar{filter:brightness(1.18)}} /* Section headings read as labels rather than leftovers. */ .sectitle{position:relative} .pagehd h1{background:linear-gradient(180deg,#FFF6E2,#D9C79C);-webkit-background-clip:text; background-clip:text;color:transparent} @media (max-width:760px){.tpw{height:28px}.tpb{width:34px;height:34px} .tpb:before{left:12px;top:9px}.tp.on .tpb:before{left:11px;top:9px} .tpt{min-width:64px;font-size:11px}} .ko{display:inline-block;margin-left:6px;font-size:10px;font-weight:800;letter-spacing:.12em; color:#0a0a0d;background:var(--red);border-radius:4px;padding:2px 6px} .card{display:flex;gap:5px;margin-top:5px;flex-wrap:wrap} .rd{font-size:10px;font-weight:800;letter-spacing:.06em;border-radius:4px;padding:2px 5px; border:1px solid #2a2438;color:var(--dim)} .rd.won{border-color:rgba(59,165,93,.55);color:#6FD18C;background:rgba(59,165,93,.12)} .rd.lost{border-color:rgba(212,86,78,.5);color:#E3897F;background:rgba(212,86,78,.1)} .empty{color:var(--dim);font-size:13px;padding:14px 2px;line-height:1.55} /* ===== THE STANDINGS TABLE, items 2, 4, 10, 12, 15 ===== */ .twrap{overflow-x:auto;-webkit-overflow-scrolling:touch} .ltab{width:100%;border-collapse:collapse;font-size:13px} .ltab thead th{position:sticky;top:0;z-index:var(--z-raise);background:#0c0c11; font-family:var(--disp);font-size:10px;font-weight:700;letter-spacing:.16em; color:var(--dim);text-transform:uppercase;text-align:right; padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap} .ltab thead th.tnm,.ltab thead th.tform{text-align:left} .ltab td{padding:8px 10px;border-bottom:1px solid #141117;text-align:right;white-space:nowrap} .ltab tbody tr:last-child td{border-bottom:0} @media (hover:hover){.ltab tbody tr:hover td{background:#0e0e13}} .ltab .tpos{width:38px;text-align:center;padding-left:14px} .ltab .tnm{text-align:left;min-width:168px} .ltab .n{color:var(--muted);font-weight:700;width:46px} .ltab .n.w{color:#8BD9A4} .ltab .n.l{color:#E09A9A} .ltab .n.pct{color:var(--text);font-weight:800} .ltab .tform{text-align:left;width:124px;padding-left:16px} /* A screen-reader-only label for the position column, which has no visible header because a number above a number reads as a second number. */ .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .fp{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px; border-radius:5px;font-size:10px;font-weight:800;font-style:normal;margin-right:3px; font-family:var(--disp);letter-spacing:0;vertical-align:middle} .fp.w{background:rgba(59,165,93,.18);color:#8BD9A4;border:1px solid rgba(59,165,93,.4)} .fp.l{background:rgba(212,86,78,.14);color:#E09A9A;border:1px solid rgba(212,86,78,.35)} .fnone{color:var(--dim);font-size:11px} .tlegend{padding:9px 16px 11px;font-size:10px;color:var(--dim);letter-spacing:.04em; border-top:1px solid var(--line);line-height:1.5} .belt{width:18px;height:11px;color:var(--acc);flex:none} /* STICKY NEEDS A NON-SCROLLING ANCESTOR. .board was overflow:hidden for its rounded corners, and overflow:hidden makes an element a scroll container - so a sticky header inside it sticks to a box that never scrolls, which is to say it does nothing. overflow:clip clips identically WITHOUT becoming one. The hidden declaration stays first as the fallback. */ .board{overflow:hidden;overflow:clip} /* ITEM 15, THE REST OF IT. A league table needs about 470px before anything is cut, and two boards side by side in a 1568px window give each about 420. The board clips (it has to, so the sticky column works on a phone), so the overflow was not scrollable - PCT and Last 5 were simply gone. A board that carries a table takes the whole row instead. :has is the right tool here: the rule applies itself on exactly the page that has a table in it, and no call site has to remember to pass a flag. The auto below is the backstop for any width where it still does not fit. */ .boards:has(.ltab){grid-template-columns:1fr} /* ITEM 15. On a phone the table scrolls sideways while the placing and the name stay put, so you always know whose row you are reading. */ @media (max-width:620px){ .twrap{overflow-x:auto;-webkit-overflow-scrolling:touch} .ltab{font-size:12px} .ltab td,.ltab thead th{padding:7px 7px} .ltab .tpos{position:sticky;left:0;background:var(--panel2);z-index:var(--z-base);width:30px;padding-left:9px} .ltab .tnm{position:sticky;left:30px;background:var(--panel2);z-index:var(--z-base); min-width:124px;max-width:152px;box-shadow:7px 0 9px -9px rgba(0,0,0,.95)} .ltab thead th.tpos,.ltab thead th.tnm{z-index:var(--z-stick);background:#0c0c11} .ltab .tnm .bname{overflow:hidden} .ltab .tform{width:auto;padding-left:12px} .ltab .n{width:34px} } /* ITEM 16, THE CARD NIGHT. A dated header over the bouts fought that night, so the archive reads as a season of events rather than a query result. */ .night{margin:0 0 26px} /* THE SPARKLINE BOX. Full width so the curve has room to be a curve, and a label on it because an unlabelled line is a decoration. */ .sparkw{display:flex;align-items:center;gap:14px;margin:0 0 12px;padding:10px 15px;border:1px solid var(--line);border-radius:11px;background:var(--panel2)} .sparkl{font-size:10px;letter-spacing:.17em;color:var(--dim);font-weight:800;white-space:nowrap} .spark{flex:1;min-width:0;height:44px;display:block} @media (max-width:620px){.sparkw{gap:10px;padding:9px 12px}.sparkl{font-size:10px;letter-spacing:.12em}} /* THE PROFILE STATUS STRIP. One row, scannable, above everything else on the page - the identity line, not the stat dump. */ .pstat{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;margin:14px 0 4px;padding:13px 17px;border:1px solid var(--line);border-left:3px solid var(--acc,var(--gold));border-radius:12px;background:var(--panel2)} .pstati{display:flex;flex-direction:column;gap:3px;min-width:0} .pstati b{font-size:10px;letter-spacing:.17em;color:var(--dim);font-weight:800;text-transform:uppercase} .pstati i{font-style:normal;font-size:14px;color:var(--text);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap} .pstatf{margin-left:auto} .pstatf>span{display:flex;gap:4px} @media (max-width:620px){.pstat{gap:10px 18px;padding:12px 14px}.pstati i{font-size:13px}.pstatf{margin-left:0}} /* SEARCH RESULTS. One card shape for all four kinds of hit, because a result list that changes shape per section reads as four lists that happen to share a page. */ .sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:10px} .shit{display:flex;align-items:center;gap:11px;padding:10px 13px;border:1px solid var(--line);border-radius:11px;background:var(--panel2);text-decoration:none;min-width:0} @media (hover:hover){.shit:hover{border-color:var(--gold)}} .savx{flex:0 0 auto;display:block;width:30px;height:30px;border-radius:9px;background:#15121a} .shn{display:flex;flex-direction:column;gap:1px;min-width:0} .shn b{font-size:13px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .shn i{font-style:normal;font-size:11px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sbout .shn b{font-weight:600;white-space:normal} @media (max-width:620px){.sgrid{grid-template-columns:1fr}} /* THE TIER STEPPER. Two targets, one each way, each naming where it goes. Always both drawn so the row does not change shape at the ends. */ .tsteps{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0 18px} .tstep{display:flex;flex-direction:column;gap:3px;padding:12px 15px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);text-decoration:none;min-width:0} .tstep:last-child{text-align:right} .tstep b{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:800} .tstep span{font-size:13px;color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media (hover:hover){.tstep:hover{border-color:var(--gold)}} .tstep.off{opacity:.4} .tstep.off b{color:var(--dim)} .tstep.off span{color:var(--dim);font-weight:500} @media (hover:hover){.tstep.off:hover{border-color:var(--line)}} @media (max-width:620px){.tsteps{gap:9px}.tstep{padding:10px 12px}.tstep span{font-size:12px}} /* THE ARCHIVE PAGER. Laid out as a row with the marker in the middle so the two directions sit where your thumbs already are on a phone. */ .apager{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:24px 0 10px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)} .apg{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gold);text-decoration:none;white-space:nowrap} @media (hover:hover){.apg:hover{text-decoration:underline}} .apg.off{color:var(--dim);opacity:.4;cursor:default} .apgm{display:flex;flex-direction:column;gap:3px;text-align:center;font-size:11px;letter-spacing:.1em;color:var(--dim);text-transform:uppercase} .apgm b{color:var(--text);font-weight:600;font-size:12px;letter-spacing:0;text-transform:none} .nighthd{display:flex;align-items:center;gap:13px;margin:0 0 11px;padding:0 2px} .nightd{font-family:var(--disp);font-size:12px;font-weight:700;letter-spacing:.18em; text-transform:uppercase;color:var(--acc);white-space:nowrap} .nightr{flex:1;height:1px;background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 42%,transparent),transparent)} .nightn{font-family:var(--disp);font-size:10px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--dim);white-space:nowrap;font-variant-numeric:tabular-nums} @media (max-width:620px){.nightd{font-size:10px;letter-spacing:.12em}.nightn{font-size:10px}} /* ITEM 17, THE RIVALRY LINE. Only on a rematch, so it stays information rather than furniture. */ .ah2h{text-decoration:none;margin-top:9px;font-size:11px;font-weight:700;letter-spacing:.07em;color:var(--dim); text-transform:uppercase;font-family:var(--disp);font-variant-numeric:tabular-nums} /* ITEM 18, A DIVISION NOT YET IN SESSION. An empty page that looks designed reads as a division waiting to start; one that looks bare reads as a club that does not run it. */ .nyet{border:1px dashed #2f2740;border-radius:16px;padding:34px 30px;text-align:center; background:linear-gradient(170deg,rgba(255,255,255,.018),transparent)} .nyet .crest{width:70px;height:70px;opacity:.5;margin-bottom:4px} .nyeth{font-family:var(--disp);font-size:17px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--muted);margin:10px 0 0} .nyetp{max-width:460px;margin:11px auto 0;font-size:13px;line-height:1.65;color:var(--dim)} .nyetl{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:18px} .tl{list-style:none;margin:0;padding:0 0 0 18px;border-left:1px solid var(--line)} .tl li{position:relative;padding:0 0 16px 16px} .tl li:before{content:"";position:absolute;left:-23px;top:4px;width:9px;height:9px; border-radius:50%;background:var(--orange);border:2px solid var(--ink)} .tlt{font-weight:800;font-size:14px} .tld{font-size:11px;color:var(--dim);margin-top:3px;font-weight:600} .two{display:grid;grid-template-columns:1fr 1fr;gap:26px} .yt{position:relative;width:100%;padding-top:56.25%;border-radius:14px;overflow:hidden; border:1px solid var(--line);background:#0b0b0f} .yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .foot{border-top:1px solid var(--line);margin-top:40px;padding:26px 0 44px; color:var(--dim);font-size:12px;line-height:1.7} .footgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:30px;padding-bottom:22px} .footh{font-size:10px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--gold);margin-bottom:11px} .footp{margin:0;max-width:48ch;color:var(--dim);font-size:12px;line-height:1.75} .footc a{display:block;color:var(--muted);font-size:12.5px;font-weight:600;padding:4px 0;text-decoration:none} @media (hover:hover){.footc a:hover{color:var(--gold);text-decoration:none}} .footbar{display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between;border-top:1px solid var(--line);padding-top:15px;font-size:11.5px;color:#5e5968} @media(max-width:820px){.footgrid{grid-template-columns:1fr 1fr;gap:24px}} @media(max-width:520px){.footgrid{grid-template-columns:1fr}.footbar{gap:8px}} .joind{display:inline-flex;align-items:center;color:#FFC94E;line-height:0;flex:none} .search{display:flex;gap:8px;margin:22px 0 30px} .search input{flex:1;background:#0d0d12;border:1px solid var(--edge);color:var(--text); border-radius:10px;padding:12px 14px;font-size:14px;font-family:inherit} .search button{background:var(--orange);color:#0b0b0f;border:0;border-radius:10px; padding:12px 20px;font-weight:800;font-size:13px;cursor:pointer;font-family:inherit} .hitn{margin:2px 0 10px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)} @media (pointer:coarse){.footc a{padding:10px 0}.nav a,.navsub{padding-top:8px;padding-bottom:8px}} .hit{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--line); border-radius:12px;margin-bottom:8px;background:var(--panel2)} .hit img{width:40px;height:40px;border-radius:10px;object-fit:cover;background:#1a1820} /* THE FIVE, ON EVERY ONE OF THEM. A discipline page that does not show the other four makes the set invisible: you would have to go back to the menu to learn King of the Cypher has a page at all. */ .dnav{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0 10px} .dnavi{font-size:11px;font-weight:800;letter-spacing:.13em;color:var(--dim);text-decoration:none; border:1px solid var(--line);border-radius:999px;padding:7px 13px;background:var(--panel2);white-space:nowrap} @media (hover:hover){.dnavi:hover{color:var(--text);border-color:#3a3142;text-decoration:none}} .dnavi.on{color:#0a0a0d;background:var(--gold);border-color:var(--gold)} .dnavi.alt{color:#6A6876;border-style:dashed} @media (hover:hover){.dnavi.alt:hover{color:var(--gold);border-color:rgba(249,178,52,.5)}} @media (max-width:760px){.dnavi{font-size:10px;letter-spacing:.09em;padding:6px 10px}} .menusep{height:1px;background:var(--line);margin:6px 10px} /* A GROUP HEADING IN A MENU, and not a link. The Stats menu lists pages under four headings and the headings are not pages - see the note in the nav. Dim, small and spaced so it reads as a divider with a word on it rather than a row somebody is meant to click. */ .menugrp{padding:9px 12px 3px;font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--dim);text-transform:uppercase} .menupanel .menugrp:first-child{padding-top:4px} .menui.sub{margin-left:18px;padding-left:12px;border-left:1px solid var(--line);border-radius:0 8px 8px 0} .menui.sub:hover{border-left-color:var(--gold)} .staffnav{color:var(--gold)} .staffnav[hidden]{display:none} /* The five competitions, as a way in rather than as a second copy of them. */ .comps{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:12px;margin:8px 0 26px} .compc{display:flex;align-items:flex-start;gap:16px;padding:20px;border:1px solid var(--line);border-radius:16px; background:linear-gradient(160deg,#131019,#0b0b0f);text-decoration:none} @media (hover:hover){.compc:hover{border-color:rgba(249,178,52,.5);text-decoration:none;transform:translateY(-2px);transition:all .12s}} .compc .crest{width:52px;height:52px;flex:none} .compt{min-width:0} .compk{font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)} .compn{font-size:19px;font-weight:800;letter-spacing:-.01em;color:var(--text);margin-top:5px} .compb{font-size:13px;color:var(--muted);font-weight:600;margin-top:6px;line-height:1.5} .compm{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px} .compm span{font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--dim); border:1px solid #241f2c;border-radius:999px;padding:3px 9px} .compm span.none{color:#5c5668;border-style:dashed} /* ============ THE MASTHEAD OF AN OFFICIAL COMPETITION ============ What reads as prestige here is restraint, not decoration: a crest with air around it, one hairline of gold, a kicker in wide small caps, and a record stated as fact. The temptation is a big gradient and a glow on everything, which reads as a product launch rather than a sanctioning body. */ .mast{position:relative;overflow:hidden;border:1px solid #241d2e;border-radius:18px; background:linear-gradient(165deg,#15111c 0%,#0c0b11 55%,#0a0a0e 100%); padding:30px 30px 0;margin:10px 0 18px} /* The one gold line, across the top edge, brightest in the middle. */ .mast:before{content:"";position:absolute;left:0;right:0;top:0;height:2px; background:linear-gradient(90deg,transparent,rgba(249,178,52,.9),transparent)} .mastglow{position:absolute;left:-10%;top:-60%;width:46%;height:200%;pointer-events:none; background:radial-gradient(ellipse at center,rgba(249,178,52,.13),transparent 62%)} .mastin{position:relative;display:flex;align-items:center;gap:26px;flex-wrap:wrap} .crest{width:92px;height:92px;flex:none;filter:drop-shadow(0 2px 10px rgba(249,178,52,.22))} .mastt{min-width:0;flex:1} /* Wide small caps between two rules is the oldest trick in official typography and it still works: it says this line is a designation, not a sentence. */ .mastkick{display:flex;align-items:center;gap:10px;font-size:10px;font-weight:800; letter-spacing:.26em;text-transform:uppercase;color:var(--gold);white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .mastkick i{flex:1 1 18px;min-width:12px;max-width:54px;height:1px;background:linear-gradient(90deg,transparent,rgba(249,178,52,.55));font-style:normal} .mastkick i:last-child{background:linear-gradient(90deg,rgba(249,178,52,.55),transparent)} .mastkick b{color:#6b5a30;font-weight:800} .mast h1{margin:11px 0 0;font-size:38px;font-weight:800;letter-spacing:-.015em;line-height:1.05} .mastsub{margin-top:11px;font-size:14px;line-height:1.6;color:var(--muted);font-weight:600;max-width:680px} /* The record, set apart by a rule: a competition states its history, it does not fold it into the blurb. */ .mastmeta{position:relative;margin-top:22px;padding:13px 0 15px;border-top:1px solid #1e1927; font-size:10px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:#8a8398} .creds{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 22px} .lstat{position:relative;border:1px solid var(--line);border-radius:13px;background:var(--panel2);padding:15px 17px} .lstat:before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:2px; background:linear-gradient(180deg,rgba(249,178,52,.85),rgba(249,178,52,.15))} /* ===== THE LEAGUE ACCENT IN USE, item 5. Every rule below reads --acc, which discPage sets per discipline and which defaults to the house gold on every other page - so nothing outside the five league pages changes at all. */ .mast:before{background:linear-gradient(90deg,transparent,var(--acc),transparent)!important;height:3px!important} .mastglow{background:radial-gradient(ellipse at center,color-mix(in srgb,var(--acc) 15%,transparent),transparent 62%)!important} .mastkick i{background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--acc) 60%,transparent))!important} .mastkick i:last-child{background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 60%,transparent),transparent)!important} .mastkick{color:var(--acc)} .lstat:before{background:linear-gradient(180deg,var(--acc),var(--acc2))!important} .bttl{color:var(--acc)!important} .dnavi.on{background:var(--acc);border-color:var(--acc)} .compk{color:var(--acc)} /* ITEM 8, THE TRAIL. Small, dim, and above everything - it orients without competing with the masthead that follows it. */ .crumb{display:flex;align-items:center;gap:9px;margin:20px 0 0;font-size:10px;font-weight:700; letter-spacing:.15em;text-transform:uppercase;font-family:var(--disp);color:var(--dim)} .crumb a{color:var(--dim);text-decoration:none} @media (hover:hover){.crumb a:hover{color:var(--acc);text-decoration:none}} .crumb b{color:var(--muted);font-weight:700} .crumb i{width:9px;height:1px;background:#2e2838;flex:none;font-style:normal} @media (max-width:620px){.crumb{font-size:10px;letter-spacing:.1em;gap:7px}} /* ITEM 9, SECTION ORDINALS. A numbered section reads as part of a document; an unnumbered one reads as a heading somebody typed. */ .secno{font-family:var(--disp);font-size:10px;font-weight:700;letter-spacing:.14em; color:var(--acc);opacity:.75;margin-right:9px;font-variant-numeric:tabular-nums} /* ITEM 7, PROVENANCE. The time a board was built, said quietly under its own header. This is the cheapest thing on the list and it is the one that most makes a page read as a record being maintained rather than written. */ .asof{font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--dim); text-transform:uppercase;font-variant-numeric:tabular-nums} /* Its own strip under the board header rather than inside it: .bsub already claims margin-left:auto in .bhd, and two things fighting for the right edge is how a header ends up wrapping onto a second line. */ .basof{padding:6px 16px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.015); display:flex;align-items:center;gap:8px} .basof:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--green);flex:none; box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 18%,transparent)} /* ITEM 13, THE CREST WATERMARK behind each board header. Five per cent, large, and bleeding off the right edge so it reads as a mark on the paper rather than a picture in a box. Pointer events off so it never eats a click on the ALL 127 link sitting over it. */ .bhd{position:relative;overflow:hidden} .bwm{position:absolute;right:-22px;top:50%;transform:translateY(-50%);opacity:.055; pointer-events:none;line-height:0;z-index:var(--z-flat)} .bwm .crest{width:116px;height:116px;filter:none} .bhd .bttl,.bhd .bsub{position:relative;z-index:var(--z-base)} .lstatv{font-size:25px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--text);line-height:1} .lstatl{margin-top:6px;font-size:10px;font-weight:800;letter-spacing:.15em;color:var(--dim)} @media (max-width:760px){ .mast{padding:22px 18px 0;border-radius:15px} .mastin{gap:16px} .crest{width:62px;height:62px} .mast h1{font-size:27px;margin-top:9px} .mastsub{font-size:13px;margin-top:9px} .mastkick{font-size:10px;letter-spacing:.2em} .mastkick i{max-width:22px} .mastmeta{font-size:10px;letter-spacing:.12em;margin-top:16px} .creds{grid-template-columns:repeat(2,1fr);gap:8px} .lstat{padding:12px 13px} .lstatv{font-size:20px} .lstatl{font-size:10px;letter-spacing:.11em} } .ln{display:inline-flex;align-items:center;gap:7px;vertical-align:middle;min-width:0} /* THE NAME IS WHAT GIVES WAY, NOT THE MARKS. On a phone a league row is narrower than a TFC display name - several carry their whole record in it - and whatever sits last in the row is what gets cut. That was the sigil and the clan tag, which is the one thing on the row that was asked to always show, so the name now takes the ellipsis and the marks keep their place. */ .lnn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .hsub{display:block;font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--dim);margin-top:3px;text-align:right} .mini{width:20px;height:20px;border-radius:6px;object-fit:cover;background:#1a1820;flex:none;display:inline-block} .tnote{font-size:11px;font-weight:700;color:var(--dim);margin-top:8px} .hero2{position:relative;overflow:hidden;border-radius:22px;border:1px solid var(--line);margin:22px 0;padding:30px 32px} .wash{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(40px) saturate(1.6);opacity:.36;transform:scale(1.3)} .washveil{position:absolute;inset:0;background:linear-gradient(120deg,rgba(7,7,10,.93),rgba(7,7,10,.70) 45%,rgba(7,7,10,.95))} .h2in{position:relative;display:flex;gap:26px;align-items:center} .ring{position:relative;width:106px;height:106px;flex:none} .ringn{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center} .ringv{font-size:24px;font-weight:800;line-height:1} .ringl{font-size:10px;font-weight:800;letter-spacing:.13em;color:var(--dim);margin-top:4px} .form{display:flex;gap:5px;margin-top:13px;align-items:center} .fchip{width:25px;height:25px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800} .fw{background:rgba(59,165,93,.18);color:var(--green);border:1px solid rgba(59,165,93,.5)} .fl{background:rgba(212,86,78,.16);color:var(--red);border:1px solid rgba(212,86,78,.45)} .flab{font-size:10px;font-weight:800;letter-spacing:.14em;color:var(--dim);margin-right:5px} tr.rw td:first-child{box-shadow:inset 3px 0 0 var(--green)} tr.rl td:first-child{box-shadow:inset 3px 0 0 var(--red)} .ladder{display:flex;gap:6px;margin:0 0 15px} /* THE NAME IN THE CORNER IS A DOOR, NOT A LINK. It went straight to the card editor, which meant the one page a member most wants - their own record - had no way in from anywhere on the site. */ .menuwrap{position:relative;display:inline-flex} .menupanel{position:absolute;top:calc(100% + 9px);right:0;z-index:var(--z-menu);min-width:214px; background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px; box-shadow:0 18px 44px #000b;display:none} .menupanel.on{display:block} .menuhd{display:flex;align-items:center;gap:9px;padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:5px} .menuav{width:30px;height:30px;border-radius:9px;object-fit:cover;background:#1a1820;flex:none} .menunm{font-weight:800;font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .menui{display:block;padding:8px 10px;border-radius:8px;font-size:13px;color:var(--text);font-weight:600;letter-spacing:0} @media (hover:hover){.menui:hover{background:#1c1926;color:var(--gold);text-decoration:none}} .menui small{display:block;color:var(--dim);font-size:11px;font-weight:500;margin-top:1px} .menui.out{color:var(--muted);border-top:1px solid var(--line);border-radius:0 0 8px 8px;margin-top:5px;padding-top:9px} .fcar{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:0 0 12px} .scats{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:0 0 12px} .scath{font-size:10px;letter-spacing:.16em;font-weight:800;color:var(--dim);margin-bottom:9px} .scat{display:flex;align-items:center;gap:11px;margin:0 0 7px} .scatl{flex:0 0 132px;font-size:12px;font-weight:700} .scatl i{display:block;font-style:normal;font-size:10px;color:var(--dim);font-weight:600;letter-spacing:.04em} .scatb{flex:1;height:7px;border-radius:5px;background:#17141c;overflow:hidden;min-width:60px} .scatb span{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#8FD3C7,#F0A81E)} .scatv{flex:0 0 52px;text-align:right;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums} @media(max-width:560px){.scatl{flex-basis:104px}} /* THE COIN. Cred is the one number on a profile that moves every day, so it gets the loudest block on the page rather than a tile in a row of eight. */ .credhero{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 14px;padding:16px 20px; background:radial-gradient(120% 180% at 0% 0%,rgba(249,178,52,.16),rgba(249,178,52,.03) 60%,transparent); border:1px solid #33280f;border-radius:16px} .credcoin{width:52px;height:52px;flex:none} .credhv{font-size:38px;font-weight:800;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums; background:linear-gradient(180deg,#FFD873,#E89900);-webkit-background-clip:text;background-clip:text;color:transparent} .credhl{font-size:10px;letter-spacing:.2em;font-weight:800;color:var(--gold);margin-bottom:3px} .credhs{font-size:12px;color:var(--muted);margin-top:4px} .credhx{margin-left:auto;text-align:right} .credhb{font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums} .credhb b{color:var(--text);font-weight:700} @media(max-width:560px){.credhv{font-size:30px}.credhx{margin-left:0;text-align:left;width:100%}} .fcarb{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 11px} .fcarl{display:block;font-size:10px;letter-spacing:.14em;color:var(--dim);font-weight:800} .fcarv{display:block;font-size:19px;font-weight:800;margin-top:2px} .fround{background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:10px 13px;margin:0 0 8px} .frhd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:7px} .frd{font-weight:800;font-size:14px} .frn{color:var(--dim);font-size:11px} .frsp{flex:1} .frp{font-size:12px;font-weight:800;color:var(--gold)} .frs{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums} .frs i,.fsv i{font-style:normal;color:var(--dim);font-weight:600;font-size:11px} .frpc{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums} .frded{font-size:11px;color:var(--red);font-weight:700} .fside{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:5px 0;border-top:1px solid #16131d} .fsl{font-size:10px;letter-spacing:.14em;font-weight:800;color:var(--dim);min-width:76px} .fsv{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;min-width:58px} .fsj{font-size:11px;color:var(--dim);min-width:130px} .fcats{display:flex;gap:12px;flex-wrap:wrap;margin-left:auto} .fcat{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums} .fcat b{color:var(--text);font-weight:700;font-size:10px;letter-spacing:.06em;margin-right:4px} .fcat i{font-style:normal;color:var(--dim);font-size:10px} @media(max-width:620px){.fcar{grid-template-columns:repeat(2,1fr)}.fcats{margin-left:0;width:100%}.fsj{min-width:0}} .lp{flex:1;height:38px;border-radius:9px;border:1px solid #241f2c;background:#0c0c11;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#3c3746} .lp.on{border-color:rgba(240,168,30,.55);background:rgba(240,168,30,.13);color:#F0A81E} .lp.cur{border-color:#F0A81E;background:rgba(240,168,30,.26);color:#FFDF9E} .emb{margin-left:10px;color:var(--gold);font-size:.82em;vertical-align:2px} .standing{font-size:12px;font-weight:700;color:var(--gold);margin-top:10px;letter-spacing:.02em} .decay{display:inline-block;margin-top:8px;font-size:11px;font-weight:800;letter-spacing:.05em;color:#9AA0A6;background:#0E0E12;border:1px solid #23222A;border-radius:999px;padding:4px 10px} .decay.hot{color:#F2A0A0;background:#180C0C;border-color:#4A2020} /* THE HEADER COLLAPSED INTO SECTIONS, 1 Oct. Twelve top-level links wrapped to two rows on a laptop and scrolled sideways on a phone, so half the site was reachable only by guessing. Four remain - HOME, LEAGUE, WATCH, CRED - and the rest hang under them in the same panel the account menu already used. */ .navtrig{background:none;border:0;font:inherit;font-size:12px;font-weight:700; letter-spacing:.14em;color:var(--dim);cursor:pointer;padding:0;display:inline-flex; align-items:center;gap:6px;transition:color .14s ease} .navtrig[aria-expanded="true"]{color:var(--text)} @media (hover:hover){.navtrig:hover{color:var(--text)}} /* The caret is what says this one opens rather than goes. */ .navcar{width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent; border-top:4px solid currentColor;opacity:.75;transition:transform .16s ease;display:block} .navtrig[aria-expanded="true"] .navcar{transform:rotate(180deg)} .navpanel{left:0;right:auto;min-width:236px} .navpanel .menui{letter-spacing:.01em} .navpanel .menui.here{color:var(--gold);background:#1a1509} .navlinks{display:flex;align-items:center;gap:14px;flex:1;min-width:0} /* THE PHONE MENU BUTTON. Hidden until the sheet exists to open - see the 760px block below for why the strip it replaces had to go. */ .burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:4px; background:none;border:1px solid var(--line);border-radius:9px;padding:8px 9px;cursor:pointer} .burger i{display:block;width:17px;height:2px;border-radius:2px;background:var(--dim); transition:transform .16s ease,opacity .16s ease,background .16s ease} .burger[aria-expanded="true"] i{background:var(--gold)} .burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)} .burger[aria-expanded="true"] i:nth-child(2){opacity:0} .burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* THE SKIP LINK. Off-screen until focused, which is the whole point: the first thing a keyboard reaches on every page was the start of a twelve-item nav, with no way past it but twelve more tabs. */ .skip{position:absolute;left:-9999px;top:0;z-index:var(--z-skip);background:var(--gold);color:#0a0a0e;padding:11px 18px;font-size:12px;font-weight:800;letter-spacing:.1em;text-decoration:none;border-radius:0 0 9px 0} .skip:focus{left:0} /* A FOCUS RING YOU CAN ACTUALLY SEE. focus-visible rather than focus, so a mouse click does not leave a ring behind on everything it touches. */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:3px} main:focus{outline:none} /* THE MINI HEADER. A long board scrolls the masthead away and takes the name of the page with it, so three screens down there is nothing on screen saying what you are reading. This slides in once the real one is gone. */ .minibar{position:fixed;top:0;left:0;right:0;z-index:var(--z-bar);transform:translateY(-101%);transition:transform .18s ease;background:rgba(9,9,13,.93);border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .minibar.on{transform:translateY(0)} .mbin{display:flex;align-items:center;gap:12px;padding:9px 0;min-width:0} .mbm{font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--gold);text-decoration:none;white-space:nowrap} .mbs{color:var(--line)} .mbt{font-size:12px;color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} @media (prefers-reduced-motion:reduce){.minibar{transition:none}} /* THE HEADER MUST NOT DRAG THE PAGE SIDEWAYS. Seven wide-tracked links do not fit a phone, and a flex row that overflows its parent makes the whole document scrollable - which is why the right-hand side used to come up blank: you were scrolling past the end of the body background, not past the nav. The guard on html,body stays as the backstop; the nav itself now solves it properly, with a button instead of an overflow. */ @media (max-width:760px){ html,body{overflow-x:hidden} .wrap{padding:0 16px} /* THE PHONE NAV IS A SHEET, NOT A SIDEWAYS SCROLLER. Seven wide-tracked links do not fit a phone, and the previous answer was to let them scroll inside the header. That hides most of the site behind a gesture nothing on screen advertises, and it clipped the dropdown panels badly enough that they had to be pinned to the viewport by hand in JS on every open and every resize. One button that opens the whole menu costs one tap, shows every destination at once, and deletes that workaround entirely. */ .nav{flex-wrap:wrap;gap:0;padding:13px 0;align-items:center} .mark{flex:1 1 auto;font-size:12px;letter-spacing:.18em} .burger{display:flex} .navsub{white-space:nowrap;font-size:12px} .spacer{display:none} .navlinks{flex:0 0 100%;display:none;flex-direction:column;align-items:stretch;gap:0; margin:11px -16px 0;padding:2px 16px 12px;border-top:1px solid var(--line); max-height:74vh;overflow-y:auto;-webkit-overflow-scrolling:touch} .navlinks.on{display:flex} .navlinks>.navsub,.navlinks .menuwrap:not(.navdd)>.navsub{display:block; padding:13px 2px;border-top:1px solid var(--line)} .navlinks>.navsub:first-child{border-top:0} .navlinks .menuwrap:not(.navdd){display:block} /* The three dropdowns stop being dropdowns. There is room in a sheet to show what they hold, so every destination is one tap instead of two, and the headings become labels rather than buttons. */ .navlinks .navdd{display:block;position:static} .navlinks .navdd>.navtrig{pointer-events:none;width:100%;text-align:left; color:var(--gold);opacity:.9;padding:14px 2px 6px;letter-spacing:.18em; border-top:1px solid var(--line)} .navlinks .navcar{display:none} .navlinks .navpanel{position:static;display:block;min-width:0;border:0; background:none;box-shadow:none;padding:0 0 6px;top:auto;right:auto;left:auto} .navlinks .menusep{display:none} .navlinks .menui{padding:10px 10px} .pagehd h1{font-size:25px} .avatar{width:74px;height:74px;border-radius:17px} .who h1{font-size:22px} /* THE PHONE HERO WAS AIMED AT A CLASS THAT NO LONGER EXISTS. The rule here was .hero{flex-wrap:wrap}, and the hero was rebuilt as .hero2 > .h2in at some point without this block following it. So on a phone the hero stayed a NOWRAP flex row of four parts on a 390px screen: measured, the win-rate ring sat at x=393 and the league record at x=525 - both of them off the side of the phone, clipped to nothing by the overflow guard on body, while the name was squeezed into 218px and wrapped. That is the collapse. */ .hero2{padding:18px 16px;margin:16px 0;border-radius:18px} .h2in{flex-wrap:wrap;gap:13px;align-items:flex-start} .avatar{width:64px;height:64px;border-radius:16px} .who{flex:1 1 190px;min-width:0} .who h1{font-size:20px;line-height:1.22} .handle{font-size:12px;margin-top:3px} .standing{font-size:11px;margin-top:8px} .decay{font-size:10px;padding:3px 9px;letter-spacing:.03em} /* Smaller pills so two sit on a line instead of one each. */ .badges{gap:5px;margin-top:9px} .badge{font-size:10px;padding:3px 8px 3px 6px;letter-spacing:.07em} /* The ring and the record take the second row together, side by side, which is the pairing they already have on a desktop - the win rate next to the thing it is the rate OF. */ .ring{width:84px;height:84px} .ringv{font-size:20px} .rec{margin-left:auto;text-align:right;flex:none;align-self:center} .recnum{font-size:38px} .form{margin-top:11px;flex-wrap:wrap} .two{grid-template-columns:1fr}.recnum{font-size:36px} /* TABLES ON A PHONE. The old pair of rules here - table-layout:fixed with word-break:break-word - is what shredded the bout record: six columns forced into 390px gave the opponent about 30px, so a name came out one or two letters per line and a nowrap date overflowed its cell and printed under the result chip. Auto layout sizes the columns to what is in them. */ table{font-size:12px;table-layout:auto} td,th{padding:7px 6px;word-break:normal;overflow-wrap:anywhere} /* The bout record has six columns and a phone has room for four. League is already the filter above the table and the panel size is detail; the date, the result and WHO IT WAS AGAINST are the record. Dropping the other two is what gives a name room to be a name. */ [data-b="bouts"] th:nth-child(4),[data-b="bouts"] td:nth-child(4), [data-b="bouts"] th:nth-child(6),[data-b="bouts"] td:nth-child(6){display:none} .taper td{display:table-cell} /* A DATE AND A NUMBER ARE SINGLE THINGS. With the columns sized to content, a long middle column squeezes the narrow ones until overflow-wrap starts breaking them mid-token - 1 Oct 2026 came out as four lines and +1,317 as three. These columns hold one value each and must never break. */ [data-b="cred"] td:first-child,[data-b="cred"] th:first-child, [data-b="cred"] td:last-child,[data-b="cred"] th:last-child, [data-b="judging"] td:first-child,[data-b="judging"] th:first-child, [data-b="tiers"] td:first-child,[data-b="tiers"] th:first-child, [data-b="rooms"] td:last-child,[data-b="rooms"] th:last-child{white-space:nowrap} } /* ===== SITE-WIDE UI PASS, 11 Oct 2026. The thirty points measured off the built stylesheet. Kept in one block so the whole change can be read, and reverted, together. The ones fixed at the token or at their own source rule instead of here say so where they are. ===== */ /* 26 and 27. VISUALLY HIDDEN, STILL ANNOUNCED. For the home page h1 and for labels on regions the design names in type that should not be competed with. Not display:none, which would take it out of the reading order too. */ .vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* 5. A PRESS THAT SHOWS. There was not a single :active rule on the site, so every tap on a phone felt like nothing had happened. */ .btn:active,.cbtn:active,.gbtn:active,.jnbtn:active,.ftb:active, .chip:active,.pill:active,.echip:active,.eschip:active,.gchip:active, .jchip:active,.fchip:active,button:not(:disabled):active{filter:brightness(.92)} @media (prefers-reduced-motion:no-preference){ .btn:active,.cbtn:active,.gbtn:active,.jnbtn:active,.ftb:active, .chip:active,.pill:active,.echip:active,.eschip:active,.gchip:active, .jchip:active,.fchip:active,.etab:active,.ptab:active,.vstab:active, .dnavi:active,.menui:active,.burger:active,button:not(:disabled):active{ transform:translateY(1px)} } /* 12. FORTY-FOUR PIXELS, WHERE A FINGER IS THE POINTER. Nothing on the site reached it - .pill stood about 23px tall and .chip about 22. The density is kept for a mouse, where 23px is fine, and opened up only where the pointer is coarse. */ @media (pointer:coarse){ .btn,.cbtn,.gbtn,.jnbtn,.ftb,.chip,.pill,.echip,.eschip,.gchip,.jchip, .fchip,.etab,.ptab,.vstab,.dnavi,.menui,.burger,button,select,summary{ min-height:44px} .chip,.pill,.echip,.eschip,.gchip,.jchip,.fchip,.btn,.cbtn,.gbtn,.ftb{ display:inline-flex;align-items:center;justify-content:center} input:not([type=checkbox]):not([type=radio]),textarea{min-height:44px} } /* 14. A FOCUS RING ON WHAT ONLY HAD A HOVER. 72 components changed under the mouse and showed a keyboard nothing. Native elements already get a ring; this extends it to the cards, rows and chips that are not native. */ .gtile:focus-visible,.mcard:focus-visible,.evblk:focus-visible,.grow:focus-visible, .brow:focus-visible,.erow:focus-visible,.compc:focus-visible,.cwhol:focus-visible, .champ:focus-visible,.gchipi:focus-visible,.eschip:focus-visible,.etab:focus-visible, .ltab tbody tr:focus-visible,.ltab th.sortme:focus-visible,.ggname:focus-visible, .h2h:focus-visible,.jchip:focus-visible,.menui:focus-visible,.dnavi:focus-visible, .gtab th a:focus-visible,.crumb a:focus-visible,.cavl:focus-visible{ outline:2px solid var(--gold);outline-offset:2px} /* 23. THE SORTED COLUMN, READ THE SAME WAY BY EYE AND BY SCREEN READER. The arrow itself already worked - app.js writes a triangle into data-a and the rule above renders it - but it was drawn at 8px, and nothing told a screen reader which column was sorting. aria-sort is now set beside the existing classes, and the sorting header is tinted so the column is obvious at a glance rather than by hunting for a small glyph. */ .ltab th.sortme:after{font-size:10px} .ltab th.sorta,.ltab th.sortd{color:var(--gold)} .ltab th[aria-sort]{background:rgba(249,178,52,.07)} /* 25. NUMBERS THAT DO NOT JITTER. tabular-nums was set on 58 rules but not on every column that carries a figure, so the ones it missed shifted width as their digits changed. */ td,th,.num,output,time{font-variant-numeric:tabular-nums} /* 28. AN ANCHOR THAT CLEARS THE MASTHEAD. scroll-margin was set exactly once, so every other in-page link dropped its target under the sticky header. */ :target,[id]{scroll-margin-top:84px} /* 17. SOMETHING TO LOOK AT WHILE IT LOADS. There was no skeleton rule on the site, so an async panel went from empty to full with nothing in between. */ .sk{background:linear-gradient(90deg,#15151c 25%,#20202a 37%,#15151c 63%); background-size:400% 100%;border-radius:8px;min-height:12px;display:block} .sk+.sk{margin-top:8px} .skrow{display:flex;gap:9px;align-items:center;margin:0 0 10px} .skrow .sk:first-child{width:28px;height:28px;border-radius:9px;flex:none;min-height:28px} .skrow .sk:last-child{flex:1;height:12px} @media (prefers-reduced-motion:no-preference){ .sk{animation:skw 1.3s ease-in-out infinite} } @keyframes skw{0%{background-position:100% 0}100%{background-position:0 0}} /* 18. A BUTTON THAT LOOKS BUSY WHILE IT IS. Four disabled rules covered the whole site, so a button mid-request looked identical to an idle one. */ button[disabled],button:disabled,.btn[disabled],.cbtn[disabled],.gbtn[disabled], .ftb[disabled]{opacity:.55;cursor:not-allowed} .btn.busy,.cbtn.busy,.gbtn.busy,.ftb.busy{opacity:.7;pointer-events:none} [aria-busy=true]{cursor:progress} /* 21. A CONFIRMATION THAT DOES NOT NEED THE PAGE TO BLINK. Success was reported by 26 (window.TFC&&window.TFC.reload?window.TFC.reload():location.reload()) calls and an inline message line. */ .toastw{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:var(--z-toast); display:flex;flex-direction:column;gap:8px;align-items:center; pointer-events:none;padding:0 12px;max-width:min(520px,94vw)} .toast{background:var(--panel);border:1px solid var(--edge);border-radius:11px; box-shadow:var(--lift);padding:11px 15px;font-size:13px;font-weight:600; color:var(--text);pointer-events:auto;text-align:center} .toast.good{border-color:rgba(59,165,93,.55)} .toast.bad{border-color:rgba(212,86,78,.6)} @media (prefers-reduced-motion:no-preference){ .toast{animation:tin .18s ease-out} } @keyframes tin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* 22. A WIDE TABLE SCROLLS INSTEAD OF CLIPPING. 53 table rules against four overflow-x:auto, and /cred alone serves 24 tables. */ .tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%} /* 29. PAPER. There was no print stylesheet at all, so a bracket, a board or a scoresheet printed dark on dark and came out unusable at an event. The important flags are the point here: they have to beat 1,180 screen rules. */ @media print{ :root{color-scheme:light} *{background:#fff!important;color:#000!important;box-shadow:none!important; text-shadow:none!important;border-color:#999!important} a{color:#000!important;text-decoration:underline} a[href^="/"]:after{content:" (tfcrankings.com" attr(href) ")"; font-size:8pt;color:#555!important} nav,.burger,.navtrig,.skip,.toastw,.search,.bigsearch,.sk,.skrow, button,.btn,.cbtn,.gbtn,.ftb,.chips,footer{display:none!important} main{max-width:100%!important;padding:0!important} table{border-collapse:collapse!important;width:100%!important;min-width:0!important} td,th{border:1px solid #999!important;padding:4px 6px!important;font-size:9.5pt!important} thead{display:table-header-group} tr,img,.ftcard,.gcard,.mcard,.compc{page-break-inside:avoid} h1,h2,h3{page-break-after:avoid} .tscroll,.shwrap,.ftscroll,.twrap{overflow:visible!important;max-height:none!important} .shc0{position:static!important} } .gchip{display:inline-flex;align-items:center;gap:5px;vertical-align:middle;margin-left:5px; text-decoration:none;flex:none}@media (hover:hover){.gchip:hover{text-decoration:none}} .gchipi{width:17px;height:17px;border-radius:5px;object-fit:cover;background:#15121a;flex:none} .mtag{font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--gold); background:#241A07;border:1px solid rgba(249,178,52,.3);border-radius:4px; padding:1px 4px;line-height:1.5}@media (hover:hover){.gchip:hover .mtag{border-color:var(--gold);background:#2e2008}} @media (max-width:760px){.gchipi{width:15px;height:15px} .mtag{font-size:10px;letter-spacing:.07em;padding:1px 3px}} .hero{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:20px; background:linear-gradient(135deg,#141008,#0a0a0d 60%);margin:24px 0 10px;padding:26px 28px} .hero:before{content:"";position:absolute;inset:0;pointer-events:none; background:repeating-linear-gradient(115deg,rgba(232,153,0,.05) 0 2px,transparent 2px 46px)} .heroin{position:relative;display:flex;gap:26px;align-items:center} .herotxt{flex:1;min-width:0} .kicker{font-size:10px;font-weight:800;letter-spacing:.22em;color:var(--orange)} .hero h2{margin:9px 0 0;font-size:31px;line-height:1.14;font-weight:800;letter-spacing:-.01em} .herowhen{margin-top:11px;color:var(--muted);font-size:14px;font-weight:600} .chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;align-items:center} .chip{font-size:11px;font-weight:800;letter-spacing:.06em;padding:6px 11px;border-radius:999px; border:1px solid rgba(249,178,52,.45);background:rgba(249,178,52,.11);color:var(--gold)} .chip.dim{border-color:#2d2740;background:#131119;color:var(--muted)} a.chip.bet{border-color:rgba(59,165,93,.55);background:rgba(59,165,93,.13);color:#5FD182; text-decoration:none;transition:background .12s ease,border-color .12s ease}@media (hover:hover){a.chip.bet:hover{background:rgba(59,165,93,.22);border-color:rgba(59,165,93,.8)}} a.chip.bet.shut{border-color:#2d2740;background:#131119;color:var(--muted)} .herocover{width:250px;height:140px;border-radius:13px;object-fit:cover;flex:none; border:1px solid var(--line)} .upnext{display:flex;flex-direction:column;gap:7px;margin:0 0 30px} .upitem{display:flex;gap:13px;align-items:baseline;padding:10px 14px;border:1px solid var(--line); border-radius:11px;background:var(--panel2);font-size:13px} .upwhen{color:var(--orange);font-weight:800;font-size:12px;letter-spacing:.05em; white-space:nowrap;min-width:104px} .upname{color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .boards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:30px;align-items:start} .brow.lin{align-items:flex-start} .brow.lin .bname{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.9;flex-wrap:wrap} .board{border:1px solid var(--line);border-radius:15px;background:var(--panel2);overflow:hidden} .bhd{display:flex;align-items:center;gap:9px;padding:13px 16px;border-bottom:1px solid var(--line); background:linear-gradient(180deg,#131009,#0b0b0f)} .bttl{font-size:11px;font-weight:800;letter-spacing:.15em;color:var(--gold)} .bsub{font-size:11px;color:var(--dim);font-weight:700;margin-left:auto} .brow{display:flex;align-items:center;gap:11px;padding:9px 16px;border-bottom:1px solid #141117;font-size:13px} .brow:last-child{border-bottom:0}@media (hover:hover){.brow:hover{background:#0e0e13}} .bpos{width:20px;text-align:right;color:var(--dim);font-weight:800;font-size:12px;flex:none} /* A ROW IS A FLEX LINE SO THE MARKS CAN HOLD THEIR PLACE. It used to be a block with an ellipsis, which cut whatever came last - and what comes last is the sigil and the clan tag. The gap replaces the spaces that used to sit between the pieces as text, which a flex line throws away. */ .bname{display:flex;align-items:center;gap:6px;flex:1;min-width:0;overflow:hidden;white-space:nowrap} .bname .seal,.bname .gchip{margin-left:0} .bval{color:var(--muted);font-weight:700;font-size:13px;white-space:nowrap} .crown{color:#FFD700} .vis{font-size:10px;font-weight:800;letter-spacing:.06em;color:var(--dim); border:1px solid #2a2434;border-radius:5px;padding:1px 5px} .res{display:flex;align-items:baseline;gap:11px;padding:9px 2px;border-bottom:1px solid #141117;font-size:13px} .res:last-child{border-bottom:0} .resd{display:none} .resb{flex:1;min-width:0} .resl{color:#5e5968;font-size:10px;font-weight:800;letter-spacing:.12em;white-space:nowrap;min-width:106px;text-align:right} .resday{display:flex;align-items:center;gap:12px;margin:20px 0 2px;font-size:10px;font-weight:800;letter-spacing:.2em;color:#6b6676;text-transform:uppercase} .twrap{position:relative} .twrap.scrollable:after{content:"";position:absolute;right:0;top:0;bottom:0;width:38px;pointer-events:none;background:linear-gradient(90deg,transparent,#0b0b0f)} .twrap.scrolled:after{opacity:0} .swipehint{display:none;padding:6px 16px 0;font-size:10px;font-weight:800;letter-spacing:.12em;color:#5e5968} .twrap.scrollable+.swipehint{display:block} .resday i{flex:1;height:1px;background:linear-gradient(90deg,rgba(233,170,42,.3),rgba(233,170,42,.04) 45%,transparent);font-style:normal} .bpos.p1{color:#FFD700} .bpos.p2{color:#C9CDD4} .bpos.p3{color:#CD7F32} .strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 26px} .sv{border:1px solid var(--line);border-radius:13px;background:var(--panel2);padding:14px 16px} .svv{font-size:25px;font-weight:800;line-height:1;color:var(--gold)} .svl{font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--muted);margin-top:8px} .champs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:0 0 28px} .champ{position:relative;display:flex;gap:14px;align-items:center;padding:17px 18px;border-radius:16px; border:1px solid var(--cc);background:linear-gradient(135deg,var(--cbg),#0a0a0d 70%);text-decoration:none;overflow:hidden}@media (hover:hover){.champ:hover{text-decoration:none;transform:translateY(-2px);transition:transform .12s}} .champ:after{content:"";position:absolute;inset:0;pointer-events:none; background:repeating-linear-gradient(118deg,rgba(255,255,255,.028) 0 2px,transparent 2px 40px)} .cbadge{position:absolute;top:0;right:0;font-size:11px;font-weight:800;letter-spacing:.04em; color:var(--cc);background:rgba(0,0,0,.45);border-left:1px solid var(--cc);border-bottom:1px solid var(--cc); border-radius:0 16px 0 11px;padding:6px 13px 7px 12px} .cav{width:56px;height:56px;border-radius:15px;object-fit:cover;flex:none;border:2px solid var(--cc);background:#1a1820} .cin{min-width:0;position:relative} .cname{font-size:15px;font-weight:800;color:var(--text);display:flex;align-items:center;min-width:0} .cnm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .clab{font-size:10px;font-weight:800;letter-spacing:.13em;color:var(--cc);margin-top:4px} .cval{font-size:27px;font-weight:800;color:var(--cc);line-height:1;margin-top:9px} .cunit{font-size:10px;font-weight:800;letter-spacing:.11em;color:var(--dim);margin-left:7px} .dist{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;align-items:end;padding:6px 2px 0} .dcol{text-align:center;display:block;color:var(--text)}@media (hover:hover){.dcol:hover{text-decoration:none;opacity:.82}} .dbarw{height:120px;display:flex;align-items:flex-end;justify-content:center} .dbar{width:100%;max-width:74px;border-radius:7px 7px 0 0;min-height:4px} .dn{font-size:16px;font-weight:800;margin-top:9px} .dt{font-size:11px;font-weight:800;letter-spacing:.09em;margin-top:3px} .dsub{font-size:10px;font-weight:700;letter-spacing:.09em;color:var(--dim);margin-top:2px} .bigsearch{margin:26px 0 8px} .bigsearch input{font-size:16px;padding:16px 18px;border-color:rgba(232,153,0,.5)} .bigsearch input:focus{outline:none;border-color:var(--gold)} .bigsearch button{padding:16px 26px;font-size:14px} .sline{text-align:center;color:var(--dim);font-size:12px;font-weight:700;letter-spacing:.04em;margin:0 0 24px} .vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;margin:6px 0 30px} .vc{display:block;text-decoration:none;border-radius:13px;overflow:hidden;border:1px solid var(--line);background:var(--panel2)}@media (hover:hover){.vc:hover{text-decoration:none;border-color:rgba(232,153,0,.55);transform:translateY(-2px);transition:all .12s}} .vthumbw{position:relative;display:block;aspect-ratio:16/9;background:#111;overflow:hidden} .vthumb{width:100%;height:100%;object-fit:cover;display:block} .vplay{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(0,0,0,.35),transparent 60%)} .vplay:after{content:"";position:absolute;left:50%;top:50%;width:0;height:0;transform:translate(-40%,-50%); border-left:19px solid rgba(255,255,255,.93);border-top:12px solid transparent;border-bottom:12px solid transparent; filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))} .vt{display:block;padding:12px 14px 0;font-size:14px;font-weight:700;color:var(--text);line-height:1.35} .vm{display:block;padding:7px 14px 13px;font-size:11px;font-weight:700;color:var(--dim)} .vcap{font-size:15px;font-weight:800;margin-top:14px} .vsub{font-size:12px;font-weight:700;color:var(--dim);margin-top:5px} .pagehd{padding:26px 0 18px} .pagehd h1{margin:0;font-size:32px;font-weight:800;letter-spacing:-.01em} .pagesub{color:var(--muted);font-size:14px;line-height:1.6;margin-top:7px;max-width:640px} .erow{display:flex;gap:18px;align-items:center;padding:16px;border:1px solid var(--line); border-radius:15px;background:var(--panel2);margin-bottom:12px} .ecov{width:190px;height:107px;border-radius:11px;object-fit:cover;flex:none;background:#151319;border:1px solid var(--line)} .ein{min-width:0} .ename{font-size:18px;font-weight:800;line-height:1.2} .ewhen{color:var(--muted);font-size:13px;font-weight:600;margin-top:7px} .ecov.noc{display:flex;align-items:center;justify-content:center;text-align:center;font-size:13px; font-weight:800;letter-spacing:.08em;color:var(--gold);background:linear-gradient(135deg,#191207,#0c0c10)} .arch{display:flex;flex-direction:column;gap:10px;margin-bottom:30px} .abt{border:1px solid var(--line);border-radius:14px;background:var(--panel2);padding:13px 15px} /* A bout linked to from Discord lands under the sticky header without this. */ .abt{scroll-margin-top:90px} .abt:target{border-color:var(--gold);box-shadow:0 0 0 1px rgba(249,178,52,.35)} .ahd{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:11px} .adate{font-size:11px;font-weight:800;letter-spacing:.09em;color:var(--muted)} .alg{font-size:10px;font-weight:800;letter-spacing:.14em;color:var(--dim);border:1px solid #2a2438;border-radius:4px;padding:2px 7px} .atag{font-size:10px;font-weight:800;letter-spacing:.13em;border-radius:4px;padding:2px 7px;color:#0a0a0d} .atag.ttl{background:var(--gold)} .atag.ko2{background:var(--red)} .atag.pass2{background:var(--green)} .atag.fail2{background:#6A6876} .abt.try{background:linear-gradient(135deg,#0c1410,#0b0b0f)} .acard{display:inline-flex;gap:4px;margin-left:auto} .acard i{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.05em;border-radius:4px;padding:2px 5px;border:1px solid #2a2438;color:var(--dim)} .acard i.won{border-color:rgba(59,165,93,.55);color:#6FD18C;background:rgba(59,165,93,.12)} .acard i.lost{border-color:rgba(212,86,78,.5);color:#E3897F;background:rgba(212,86,78,.1)} .afight{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .side{display:inline-flex;align-items:center;gap:9px;min-width:0;color:var(--text);font-weight:600;font-size:14px}@media (hover:hover){.side:hover{text-decoration:none;color:var(--gold)}} .side.win .sname{color:var(--gold)} .sav{width:30px;height:30px;border-radius:9px;object-fit:cover;flex:none;background:#1a1820} .sname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .vs{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--dim)} .ajud{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:11px;padding-top:10px;border-top:1px solid #16130f} .ascore{margin-top:11px;padding-top:10px;border-top:1px solid #16130f} .aschd{display:flex;align-items:center;gap:9px;font-size:10px;font-weight:800;letter-spacing:.14em;color:var(--dim);margin-bottom:8px} .aschl{margin-left:auto;color:var(--gold);letter-spacing:.06em;font-size:11px} .ascr{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:4px 0} .asrs{display:inline-flex;gap:5px;flex-wrap:wrap} .asr{font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px;border:1px solid #2d2740;color:var(--muted);white-space:nowrap} .asr b{font-weight:800;letter-spacing:.06em;margin-right:3px;font-size:10px} .asr.w{border-color:rgba(59,165,93,.5);background:rgba(59,165,93,.1);color:#8BD9A4} .asr.l{border-color:rgba(224,108,108,.4);background:rgba(224,108,108,.08);color:#E09A9A} .asr.e{border-color:#3a3550} .aspk{margin-left:auto;font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap} .aspk i{color:var(--dim);font-style:normal;font-size:10px;letter-spacing:.06em} .ascn{font-size:11px;color:var(--dim);margin-top:8px;line-height:1.45} .jlab{font-size:10px;font-weight:800;letter-spacing:.15em;color:var(--dim)} .jchip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--muted);border:1px solid #241f2c;border-radius:999px;padding:3px 9px 3px 3px}@media (hover:hover){.jchip:hover{text-decoration:none;color:var(--gold);border-color:rgba(249,178,52,.45)}} .jav{width:18px;height:18px;border-radius:50%;object-fit:cover;background:#1a1820} .atape{margin-top:11px;padding-top:10px;border-top:1px solid #16130f} .gfloor{border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:14px; background:var(--panel2);padding:17px 19px} .gfl{font-size:14px;line-height:1.65;color:var(--text);margin:0 0 13px;max-width:78ch} .gfl.dim{color:var(--dim);font-size:13px;margin:13px 0 0} .gfl b{color:var(--gold)} .gfb{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:11px 0;border-top:1px solid #16130f;border-bottom:1px solid #16130f} .gfd{font-size:11px;color:#5c5668;font-variant-numeric:tabular-nums;white-space:nowrap} .gflg{font-size:9px;font-weight:800;letter-spacing:.1em;padding:3px 8px;border-radius:999px;border:1px solid #3a2e14;color:var(--gold)} .gfv{color:#6A6876;font-size:13px} .gfj{font-size:11px;color:var(--dim);margin-left:auto} .gfcard{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:12px} .gfcl{font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);margin-right:3px} .gfr{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:#5c5668; border:1px solid var(--line);border-radius:8px;padding:4px 9px} .gfr b{font-weight:800;color:var(--muted)} .gfr.on{color:var(--gold);border-color:rgba(249,178,52,.45);background:rgba(249,178,52,.06)} .gfr.on b{color:var(--gold)} .rtiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:12px;margin-bottom:30px} .tcard{display:block;border:1px solid var(--line);border-radius:15px;background:var(--panel2); padding:16px 18px;position:relative;overflow:hidden;color:var(--text)} .tcard:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--tc)}@media (hover:hover){.tcard:hover{border-color:var(--tc);text-decoration:none}} .tname{font-size:15px;font-weight:800} .tcount{font-size:27px;font-weight:800;margin-top:9px;line-height:1;color:var(--tc)} .tlabel{font-size:10px;font-weight:800;letter-spacing:.15em;color:var(--dim);margin-top:6px} a.tabb{text-decoration:none;display:inline-flex;align-items:center}@media (hover:hover){a.tabb:hover{text-decoration:none;color:var(--text)}}@media (hover:hover){a.tabb.on:hover{color:#0a0a0d}} .rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:9px;margin-bottom:22px} .mcard{display:flex;align-items:center;gap:10px;padding:8px 11px;border:1px solid var(--line); border-radius:12px;background:var(--panel2);color:var(--text);min-width:0}@media (hover:hover){.mcard:hover{border-color:rgba(249,178,52,.5);text-decoration:none}} .mav{width:29px;height:29px;border-radius:9px;object-fit:cover;flex:none;background:#1a1820} .mn{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} /* These rows are already flex with their own gap, so the marks do not add a second one - without this the sigil drifts away from the name it belongs to. */ .side .seal,.jchip .seal,.mcard .seal,.side .gchip,.jchip .gchip,.mcard .gchip{margin-left:0} .pager{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 22px} .pg{font-size:11px;font-weight:800;letter-spacing:.1em;padding:8px 13px;border-radius:999px; border:1px solid var(--line);background:var(--panel2);color:var(--muted)}@media (hover:hover){.pg:hover{color:var(--gold);border-color:rgba(249,178,52,.45);text-decoration:none}} .pg.off{opacity:.3;pointer-events:none} .pgnow{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--dim);margin-left:4px} .tabs{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 20px} .tabb{font:inherit;font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--dim); background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:8px 15px;cursor:pointer}@media (hover:hover){.tabb:hover{color:var(--text)}} .tabb.on{color:#0a0a0d;background:var(--gold);border-color:var(--gold)} /* A DISCIPLINE HEADING. Bigger than a block header on purpose: these are the five things the club does, and the blocks underneath are instances of one of them. Enough air above it that the eye reads a new section rather than another card in the same list. */ .disc{margin:30px 0 12px;padding:0 2px} .disc:first-child{margin-top:6px} .disct{display:flex;align-items:center;gap:10px;flex-wrap:wrap} /* The same crest the discipline page carries, at a size that sits beside a heading rather than announcing one. */ .discc{display:inline-flex;flex:none} .discc .crest{width:26px;height:26px;filter:none} .disc h2{margin:0;font-size:15px;font-weight:800;letter-spacing:.13em;color:var(--text)} .discn{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--gold); border:1px solid rgba(249,178,52,.35);border-radius:999px;padding:2px 9px;background:#1a1407} .discb{font-size:13px;color:var(--muted);font-weight:600;margin-top:6px;max-width:620px;line-height:1.55} .discl{color:var(--dim)} .discl a{color:var(--gold);font-weight:700} /* An empty discipline still has to look like a considered answer. */ .evnone{padding:20px 16px;font-size:13px;color:var(--dim);font-weight:600;line-height:1.6} .evnote{padding:12px 16px;border-top:1px solid #141117;font-size:12px;color:var(--dim);font-weight:600;line-height:1.6} .evnote a{color:var(--gold)} .chip.discfreestyle,.chip.disckoth,.chip.disctiers,.chip.discwritten,.chip.discflips{ background:#241A07;border-color:rgba(249,178,52,.4);color:var(--gold)} .evblk{border:1px solid var(--line);border-radius:15px;background:var(--panel2);overflow:hidden;margin-bottom:14px} .evhd{display:flex;align-items:center;gap:9px;padding:13px 16px;border-bottom:1px solid var(--line);background:#121016} .evblk .erow{border:0;border-radius:0;background:transparent;margin:0;border-bottom:1px solid #141117} .beat{color:var(--dim);font-weight:700;font-size:12px;letter-spacing:.06em;padding:0 3px} .belt{display:inline-block;margin-left:7px;font-size:10px;font-weight:800;letter-spacing:.14em; color:#0a0a0d;background:var(--gold);border-radius:4px;padding:2px 6px} .brow.ttl{background:linear-gradient(90deg,rgba(232,153,0,.12),transparent 62%)} a.secnote{color:var(--gold)} @media (max-width:760px){ .erow{gap:12px;padding:12px} .ecov{width:96px;height:64px} .ecov.noc{font-size:11px;letter-spacing:.03em} .ename{font-size:15px} .ewhen{font-size:12px;margin-top:5px} .chip{font-size:10px;padding:5px 9px} .tabs{flex-wrap:nowrap;gap:6px;margin:2px -16px 16px;padding:2px 16px 9px; overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none} .tabs::-webkit-scrollbar{display:none} .tabb{flex:none;padding:7px 13px;font-size:11px} .brow{padding:9px 12px;gap:8px;font-size:13px} .bval{font-size:12px} .bhd,.evhd{padding:11px 12px} .upwhen{min-width:0} .upname{min-width:0} .dist{gap:6px} .dn{font-size:13px} .dt{font-size:10px;letter-spacing:.03em} .dsub{font-size:10px;letter-spacing:.03em} .dbarw{height:96px} .rgrid{gap:8px} .bttl{font-size:11px} .bsub{font-size:10px} } @media (max-width:860px){ .boards{grid-template-columns:1fr} .heroin{flex-wrap:wrap}.herocover{width:100%;height:150px} .hero h2{font-size:25px} } /* THE CREW BIO. Whitespace preserved so a written paragraph break survives, and wrapped hard so a pasted link cannot push the page sideways. */ .gbio{margin:9px 0 0;max-width:62ch;color:var(--muted);font-size:13px;line-height:1.6; white-space:pre-wrap;overflow-wrap:anywhere} /* On a directory tile it is two lines at most - the tile is a choice, not a read, and a crew that writes 300 characters must not make the grid ragged. */ .gtbio{margin-top:5px;color:var(--dim);font-size:12px;line-height:1.45;overflow:hidden; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere} .gta{width:100%;display:block;margin-top:10px;resize:vertical;min-height:84px;line-height:1.55; font-size:13px;white-space:pre-wrap} .gbiorow{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:9px;flex-wrap:wrap} /* ITEM 25, CREW AGAINST CREW. */ .vswrap{margin:2px 0 30px} .vshead{display:flex;align-items:center;justify-content:center;gap:clamp(12px,4vw,40px);flex-wrap:nowrap; padding:20px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel)} .vscrew{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:7px;text-decoration:none;color:inherit} .vsem{width:58px;height:58px;border-radius:14px;object-fit:cover;background:#15121a;border:1px solid rgba(249,178,52,.45)} .vsemn{display:block;border-style:dashed;border-color:#3a3142} .vscn{font-size:14px;font-weight:800;text-align:center;line-height:1.3;overflow-wrap:anywhere}@media (hover:hover){.vscrew:hover .vscn{color:var(--gold)}} .vsct{font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--dim)} .vsscore{flex:none;text-align:center} .vsn{font-size:clamp(26px,8vw,40px);font-weight:800;font-variant-numeric:tabular-nums;line-height:1} .vsn i{color:var(--dim);font-style:normal;font-weight:600;margin:0 4px} .vsl2{margin-top:5px;font-family:var(--disp);font-size:10px;letter-spacing:.2em;color:var(--dim);font-weight:700} .vssay{margin:13px 2px 0;color:var(--muted);font-size:13px;line-height:1.65;max-width:72ch} .vscols{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0 0} .vscol{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:12px 13px} .vsch{font-family:var(--disp);font-size:10px;letter-spacing:.18em;color:var(--dim);font-weight:800;margin-bottom:9px;line-height:1.5} .vstop{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:13px;font-weight:700; color:var(--muted);text-decoration:none;border-top:1px solid rgba(255,255,255,.04)} .vstop:first-of-type{border-top:0}@media (hover:hover){.vstop:hover{color:var(--gold)}} .vstop b{color:var(--text);font-variant-numeric:tabular-nums} .vsnone{color:var(--dim);font-size:12px} .vssec{font-family:var(--disp);font-size:10px;letter-spacing:.2em;color:var(--dim);font-weight:800;margin:24px 0 9px} .vslist{display:flex;flex-direction:column;gap:5px} .vsrow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:9px 12px;border:1px solid var(--line); border-radius:10px;background:var(--panel);font-size:13px} .vsrow.va{border-left:3px solid var(--gold)} .vsrow.vb{border-left:3px solid #6A6876} .vsd{color:var(--dim);font-size:11px;font-weight:700;min-width:74px} .vsw a{color:var(--text);font-weight:800;text-decoration:none} .vsl a{color:var(--muted);text-decoration:none}@media (hover:hover){.vsw a:hover,.vsl a:hover{color:var(--gold)}} .vsdef{color:var(--dim);font-size:11px} .vslg{margin-left:auto;color:var(--dim);font-size:10px;letter-spacing:.1em;font-weight:700;text-transform:uppercase} .vstitle{font-size:10px;letter-spacing:.14em;font-weight:800;color:#17120a;background:var(--gold);border-radius:4px;padding:2px 5px} .vsempty{margin:18px 0 0;padding:28px 18px;text-align:center;border:1px dashed var(--line);border-radius:12px;color:var(--dim);font-size:13px} .vfaced{display:flex;flex-direction:column;gap:5px} .vfr{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:10px; background:var(--panel);text-decoration:none;color:var(--muted);font-size:13px}@media (hover:hover){.vfr:hover{border-color:var(--gold)}} .vfr img{width:24px;height:24px;border-radius:7px;object-fit:cover;flex:none;background:#15121a} .vfn{font-weight:800;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .vfrec{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:800;color:var(--text);flex:none} .vfw{color:var(--gold)} @media (max-width:560px){.vscols{grid-template-columns:1fr}.vsd{min-width:0}.vshead{gap:10px;padding:16px 10px}} /* GROUPS. */ .gwrap{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin:6px 0 22px} .gemb{width:96px;height:96px;border-radius:20px;object-fit:cover;flex:none;background:#15121a;border:2px solid rgba(249,178,52,.5)} .gembx{width:96px;height:96px;border-radius:20px;flex:none;background:#15121a;border:2px dashed #3a3142; display:flex;align-items:center;justify-content:center;color:#6A6876;font-size:11px;font-weight:700;text-align:center;padding:8px} .gname{font-size:28px;font-weight:800;letter-spacing:-.01em;overflow-wrap:anywhere;min-width:0} .gtag{font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--gold)} .gmeta{font-size:12px;color:var(--dim);font-weight:600;margin-top:5px} .grow{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px}@media (hover:hover){.grow:hover{background:#ffffff06}} .gav{width:30px;height:30px;border-radius:9px;object-fit:cover;background:#1a1820;flex:none} .gwhow{flex:1;min-width:0;display:flex;align-items:center} .gwho{min-width:0;font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gown{font-size:10px;font-weight:800;letter-spacing:.14em;color:#F0D77A;background:#241A07; border:1px solid #6b5320;border-radius:999px;padding:3px 9px;flex:none} .gbtn{background:#1A150D;border:1px solid #2e2718;border-radius:9px;color:#CFCBD8;font:inherit; font-size:12px;font-weight:700;padding:9px 15px;cursor:pointer}@media (hover:hover){.gbtn:hover{background:#241D11;color:#FFF8E8;border-color:#4a3c24}} .gbtn.key{background:linear-gradient(180deg,#3A2B0E,#241A07);color:var(--gold);border-color:#6b5320} .gbtn[disabled]{opacity:.5;cursor:default} .gin{background:#0E0C09;border:1px solid var(--edge);border-radius:9px;color:var(--text); font:inherit;font-size:13px;padding:9px 11px;min-width:0} .gcard{background:var(--panel2);border:1px solid var(--line);border-radius:13px;padding:16px 17px;margin:0 0 14px} .gcardh{font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--dim);margin:0 0 11px} .gcardb{font-size:12px;color:var(--muted);font-weight:600;line-height:1.5;margin:-4px 0 10px} /* THE TABLE OF CREWS. Numbers right-aligned and tabular so columns line up down the page; a zero is dimmed rather than hidden, because a crew that has not scored is information and a blank cell is a question. */ .ggwrap{overflow-x:auto;margin:2px -2px 0} .gtab{width:100%;border-collapse:collapse;font-size:13px} .gtab th{text-align:left;font-size:10px;font-weight:800;letter-spacing:.14em;color:var(--dim); padding:0 10px 9px;border-bottom:1px solid var(--line);white-space:nowrap} .gtab th a{color:var(--dim);text-decoration:none}@media (hover:hover){.gtab th a:hover{color:var(--gold)}} .gtab th.n,.gtab td.n{text-align:right} .gtab td{padding:11px 10px;border-bottom:1px solid #141117;font-variant-numeric:tabular-nums;font-weight:700} .gtab tr:last-child td{border-bottom:0} .gtab td.zero{color:#4a4553} .gtab td.lead{color:var(--gold)} .grk{display:inline-block;margin-left:6px;font-size:10px;font-weight:800;letter-spacing:.04em;color:#6A6876;vertical-align:1px} .gtab td.lead .grk{color:var(--gold);opacity:.75} .gtab td.bonus{color:#6FD18C;font-weight:800} .ggname{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--text);min-width:0}@media (hover:hover){.ggname:hover{text-decoration:none;color:var(--gold)}} .ggname span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ggemb{width:24px;height:24px;border-radius:7px;object-fit:cover;background:#15121a;flex:none;display:inline-block} .gfoot{font-size:11px;color:var(--dim);font-weight:600;line-height:1.5;margin-top:11px} @media (max-width:560px){.gtab{font-size:12px}.gtab td,.gtab th{padding-left:7px;padding-right:7px}} /* A crew standing, one row per competition. The crest ties the row to the competition page it links to; the rank sits under the figure so the eye reads the number first and the placing second. */ .gcardh{display:flex;align-items:baseline;gap:10px} .gcardt{margin-left:auto;font-size:11px;letter-spacing:.06em;color:var(--gold);border:1px solid rgba(249,178,52,.38);border-radius:999px;padding:2px 9px} .gcardb{font-size:12.5px;color:var(--dim);line-height:1.55;margin:0 0 10px;max-width:72ch} .gcardb b{color:var(--gold)} .stdpay{display:block;margin-top:3px;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#111;background:linear-gradient(180deg,#FFD369,#E5A22A);border-radius:999px;padding:2px 8px;width:fit-content} .stdpay.thin{color:#f2b63c;background:#1f1a0e;border:1px solid #6b5320} .stdmiss{display:block;margin-top:3px;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#6c6678} .stdgap{display:block;font-style:normal;font-size:10.5px;font-weight:700;color:#8a8698;margin-top:2px} .stdgap.lead{color:#8fd49b} .stdr{border-left:3px solid transparent;transition:background .15s,border-color .15s}@media (hover:hover){.stdr:hover{background:#17131c}} .stdr.paying{background:linear-gradient(90deg,rgba(249,178,52,.10),transparent 70%)} .stdr.paying.c-freestyle{border-left-color:#E89900} .stdr.paying.c-koth{border-left-color:#FFD873} .stdr.paying.c-flips{border-left-color:#CDA349} .stdv b{font-variant-numeric:tabular-nums} .abbar{display:flex;height:7px;border-radius:4px;overflow:hidden;background:#241d29;margin:10px 0 9px} .abseg{display:block;height:100%} .abseg.b{background:linear-gradient(90deg,#6b5320,#E5A22A)} .abseg.e{background:linear-gradient(90deg,#2f7a3f,#6ec46e)} .abseg.s{background:repeating-linear-gradient(135deg,#FFD369 0 5px,#B9801A 5px 10px)} .abparts{display:flex;flex-wrap:wrap;gap:6px} .abpart{flex:1 1 120px;min-width:0;background:rgba(0,0,0,.28);border:1px solid #3a3021;border-radius:9px;padding:7px 9px} .abpart b{display:block;font-size:15px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums} .abpart i{display:block;font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-top:2px} .abpart em{display:block;font-style:normal;font-size:10.5px;color:#8a8698;margin-top:3px;line-height:1.35} .abpart.b{border-color:#6b5320} .abpart.e{border-color:#2f5a35} .abpart.s{border-color:#8a6b1f} .abpart.s b{color:#FFD369} @media(max-width:560px){.stdr{flex-wrap:wrap;row-gap:6px}.stdv{width:100%;text-align:left}} @media(max-width:480px){.abpart{flex:1 1 100%}} @media(pointer:coarse){.stdr{min-height:48px}.gbtn,.achip{min-height:44px}} @media(prefers-reduced-motion:reduce){.stdr{transition:none}} .stdl{display:flex;flex-direction:column;gap:2px;margin-top:4px} .stdr{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:11px;text-decoration:none}@media (hover:hover){.stdr:hover{background:#ffffff07;text-decoration:none}} .stdc{flex:none;display:inline-flex} .stdc .crest{width:28px;height:28px;filter:none} .stdn{flex:1;min-width:0;font-size:13px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .stdv{flex:none;text-align:right;font-size:13px;font-weight:700;color:var(--muted)} .stdv b{color:var(--gold);font-size:15px;font-weight:800;font-variant-numeric:tabular-nums} .stdv i{display:block;font-style:normal;font-size:10px;font-weight:800;letter-spacing:.11em;color:var(--dim);margin-top:3px} .stdv i.stdnone{color:#5c5668} .stdnone{font-size:11px;font-weight:700;letter-spacing:.06em;color:#5c5668;font-style:normal} @media (max-width:560px){.stdr{gap:9px;padding:9px 8px}.stdc .crest{width:22px;height:22px}.stdn{font-size:12px}} .gpot{height:9px;border-radius:6px;background:#17141c;overflow:hidden;margin:9px 0 7px} .gpotf{height:100%;background:linear-gradient(90deg,#8a6a1e,var(--gold))} .gerr{color:#D4564E;font-size:12px;font-weight:600;margin-top:9px;min-height:16px} .ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px} .gtile{display:flex;gap:12px;align-items:center;background:var(--panel2);border:1px solid var(--line); border-radius:13px;padding:13px 14px}@media (hover:hover){.gtile:hover{border-color:#3c3121}} .gtemb{width:46px;height:46px;border-radius:12px;object-fit:cover;background:#15121a;flex:none} /* The group pill on a member profile. */ .gpill{display:inline-flex;align-items:center;gap:9px;background:var(--panel2);border:1px solid var(--line); border-radius:11px;padding:8px 13px;margin:0 0 14px;font-size:13px;font-weight:700} .gpill img{width:26px;height:26px;border-radius:8px;object-fit:cover;background:#15121a} @media (max-width:560px){.gemb,.gembx{width:72px;height:72px}.gname{font-size:22px}} /* CLAN ARTIFACTS. */ .abig{background:linear-gradient(180deg,#241A07,#120D05);border:1px solid #6b5320; border-radius:13px;padding:17px 18px;margin:0 0 16px;text-align:center} .abign{font-size:34px;font-weight:800;color:var(--gold);line-height:1} .abigl{font-size:10px;font-weight:800;letter-spacing:.17em;color:#8a6a24;margin-top:7px} .acap{font-size:11px;color:var(--dim);font-weight:600;margin-top:8px} .arthd{font-size:10px;font-weight:800;letter-spacing:.18em;color:var(--dim);margin:16px 0 9px} .agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:11px} .artc{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:13px 14px} .artc.won{border-color:#6b5320;background:linear-gradient(180deg,#1d1608,#100c06)} .aname{font-size:13px;font-weight:800} .aname i{font-style:normal;color:var(--gold);font-size:11px;letter-spacing:.1em} .aun{font-size:10px;letter-spacing:.16em;color:#C9B98A;border:1px solid #4a3c24;border-radius:999px;padding:2px 7px;margin-left:5px;vertical-align:middle} .apct{font-size:21px;font-weight:800;color:var(--gold);margin-top:5px;line-height:1} .apct.dim{color:#8A8698} .anote{font-size:12px;color:var(--dim);font-weight:600;margin-top:6px} .anext{font-size:11px;color:var(--dim);font-weight:600;margin-top:6px} .arow{display:flex;gap:7px;margin-top:9px} .gpotv{font-size:30px;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums;margin:2px 0 8px} .gpoth{font-size:10px;letter-spacing:.16em;color:var(--dim);font-weight:800;margin:16px 0 7px} .gpotl{display:flex;flex-direction:column;gap:5px} .gpotr{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap;font-size:13px;padding:6px 9px;background:#15121a;border:1px solid var(--line);border-radius:9px} .gpotr a{color:var(--text);font-weight:700;text-decoration:none}@media (hover:hover){.gpotr a:hover{color:var(--gold)}} .gpotr b{color:var(--gold);font-variant-numeric:tabular-nums;margin-left:auto} .gpotn{color:var(--dim);font-weight:800;font-size:11px;min-width:16px} .gpotd{font-size:10px;letter-spacing:.12em;font-weight:800;padding:2px 6px;border-radius:5px;background:#1b2a1b;color:#6ec46e} .gpotd.out{background:#2a1b1b;color:#d98a8a} /* THE LEDGER CONTROLS. A filter and a sort side by side above the rows. They wrap on a phone rather than shrinking: a select nobody can read the options of is worse than one on a line of its own. */ .gledc{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:9px 0 8px} .gsel{background:#0E0C09;border:1px solid var(--edge);border-radius:9px;color:var(--text); font:inherit;font-size:12px;font-weight:700;padding:7px 9px;max-width:100%} .gsel:focus{outline:none;border-color:#6b5320} .gledn{font-size:11px;color:var(--dim);font-weight:700;font-variant-numeric:tabular-nums} /* CLEAR. Sits with the two selects and only exists while there is something to clear, so the row is not carrying a dead control the whole time somebody is just reading the ledger. */ .gledx{padding:7px 12px;font-size:11px;letter-spacing:.04em} /* WHAT THE CONTRIBUTION WAS FOR. The pot wears the gold the pot wears everywhere else; an artifact wears its own colour, so the eye can sort a long ledger without reading a word of it. */ .gpotk{font-size:10px;letter-spacing:.1em;font-weight:800;padding:2px 7px;border-radius:5px; background:#1a1726;color:#9a8fc4;border:1px solid #2a2440;white-space:nowrap} .gpotk.pot{background:#1f1a0e;color:var(--gold);border-color:#3a3018} @font-face{font-family:"TFCClan bebasneue";src:url("/static/clanfonts/bebasneue.ttf") format("truetype");font-display:swap}@font-face{font-family:"TFCClan oswald";src:url("/static/clanfonts/oswald.ttf") format("truetype");font-display:swap}@font-face{font-family:"TFCClan playfair";src:url("/static/clanfonts/playfair.ttf") format("truetype");font-display:swap}@font-face{font-family:"TFCClan teko";src:url("/static/clanfonts/teko.ttf") format("truetype");font-display:swap}@font-face{font-family:"TFCClan staatliches";src:url("/static/clanfonts/staatliches.ttf") format("truetype");font-display:swap}@font-face{font-family:"TFCClan caveat";src:url("/static/clanfonts/caveat.ttf") format("truetype");font-display:swap}@font-face{font-family:"TFCClan anton";src:url("/static/clanfonts/anton.ttf") format("truetype");font-display:swap}@font-face{font-family:"TFCClan marker";src:url("/static/clanfonts/marker.ttf") format("truetype");font-display:swap}@font-face{font-family:"TFCClan cinzel";src:url("/static/clanfonts/cinzel.ttf") format("truetype");font-display:swap}@font-face{font-family:"TFCClan orbitron";src:url("/static/clanfonts/orbitron.ttf") format("truetype");font-display:swap}@font-face{font-family:"TFCClan rubikmono";src:url("/static/clanfonts/rubikmono.ttf") format("truetype");font-display:swap}@font-face{font-family:"TFCClan pacifico";src:url("/static/clanfonts/pacifico.ttf") format("truetype");font-display:swap}@font-face{font-family:"TFCClan blackops";src:url("/static/clanfonts/blackops.ttf") format("truetype");font-display:swap}@font-face{font-family:"TFCClan russo";src:url("/static/clanfonts/russo.ttf") format("truetype");font-display:swap}@font-face{font-family:"TFCClan audiowide";src:url("/static/clanfonts/audiowide.ttf") format("truetype");font-display:swap}@font-face{font-family:"TFCClan fraktur";src:url("/static/clanfonts/fraktur.ttf") format("truetype");font-display:swap}@font-face{font-family:"TFCClan pressstart";src:url("/static/clanfonts/pressstart.ttf") format("truetype");font-display:swap}@font-face{font-family:"TFCClan monoton";src:url("/static/clanfonts/monoton.ttf") format("truetype");font-display:swap}@font-face{font-family:"TFCClan bungee";src:url("/static/clanfonts/bungee.ttf") format("truetype");font-display:swap} .cfgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:11px} .cfo{background:#15121a;border:1px solid var(--line);border-radius:11px;padding:12px 13px; display:flex;flex-direction:column;gap:7px;min-width:0} .cfo.worn{border-color:var(--gold);background:#1b1710} .cfs{font-size:26px;line-height:1.15;color:var(--text);overflow:hidden;text-overflow:ellipsis; white-space:nowrap;min-height:32px} .cfn{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--dim);text-transform:uppercase} .cfr{display:flex;align-items:center;gap:8px;margin-top:2px} .cfp{font-size:12px;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums;margin-right:auto} .cfp.owned{color:#6ec46e} .cfnote{font-size:11px;color:var(--dim);line-height:1.45;overflow-wrap:anywhere} .cfb{background:#1A150D;border:1px solid #2e2718;border-radius:8px;color:#CFCBD8;font:inherit; font-size:11px;font-weight:800;padding:6px 11px;cursor:pointer;flex:none}@media (hover:hover){.cfb:hover{background:#241D11;color:#FFF8E8;border-color:#4a3c24}} .cfb[disabled]{opacity:.45;cursor:default} .gttl{display:inline-block;margin-left:7px;font-size:10px;letter-spacing:.1em;font-weight:800;color:var(--dim);border:1px solid var(--line);border-radius:5px;padding:1px 5px;text-transform:uppercase;vertical-align:middle} .gpotp{display:inline-block;margin-left:8px;font-size:10px;letter-spacing:.06em;font-weight:800;color:var(--gold);border:1px solid rgba(249,178,52,.35);border-radius:6px;padding:2px 7px;vertical-align:middle} .arow .gin{width:95px}.lsadd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:13px}.lsaddbox{margin:14px 0 6px;padding:18px 18px 16px;border:2px solid #b8801f;border-radius:14px;background:linear-gradient(180deg,#241A07,#120d06);box-shadow:0 10px 34px -16px rgba(249,178,52,.55)}.lsaddh{font-size:17px;font-weight:900;letter-spacing:.08em;color:#f9b234}.lsaddsub{font-size:13px;color:#d9cfb6;font-weight:600;margin-top:4px}.lsaddbox .lsadd{border-top:0;padding-top:0;margin-top:12px;gap:10px}.lsaddbox .lsaid{font-size:16px;padding:13px 14px;min-width:240px;flex:1;border-radius:10px}.lsaddbox .lsbtn{font-size:15px;padding:13px 20px;border-radius:10px}.lsaddbox .gmeta{margin-top:6px}@media(max-width:560px){.lsaddbox .lsaid{min-width:0;width:100%}.lsaddbox .lsbtn{width:100%}}.lsaid{background:#15121a;border:1px solid var(--line);border-radius:7px;color:var(--text); font-size:12px;font-weight:700;padding:7px 9px;width:200px;max-width:100%}.lsrung{margin:14px 0 0}.lsjp{margin-top:7px;padding:7px 9px;background:#141019;border:1px solid #241f2e;border-radius:9px}.lsjph{font:800 9px/1 Inter,sans-serif;letter-spacing:.16em;color:var(--dim);text-transform:uppercase;margin-bottom:6px}.lsjph b{color:#f2b63c}.lsjpr{display:flex;align-items:center;gap:6px;margin-top:4px}.lsjpw{display:block;font-style:normal;font-size:9.5px;letter-spacing:.06em;font-weight:800;color:#f2b63c;margin-top:2px}.lsjpn{flex:1;font-size:11.5px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lsjpsel{flex:1;background:#15121a;border:1px solid var(--line);border-radius:7px;color:#8A8698;font-size:11px;font-weight:700;padding:5px 7px;max-width:100%}.lsrh{display:flex;align-items:center;gap:8px;font:800 11px/1 Inter,sans-serif;letter-spacing:.14em;color:var(--gold);text-transform:uppercase;padding:0 0 6px}.lsrn{background:#1A150D;border:1px solid #2e2718;border-radius:999px;color:#CFCBD8;font-size:10px;padding:1px 7px}.lsrr{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:7px 0;border-top:1px solid #1e1a12}.lsrname{font-weight:700;color:#FFF8E8;min-width:170px}.lsrclock{font-size:11px;font-weight:700;color:#9b937f}.lsrclock.hot{color:#f2b63c} .lsrjudge{font-size:10px;font-weight:800;letter-spacing:.04em;border-radius:6px;padding:1px 6px;border:1px solid #3a3426;color:#9b937f} .lsrjudge.ok{color:#8fd48a;border-color:#2f4a2c} .lsrjudge.hot{color:#f2b63c;border-color:#5b4727} .lsrmiss{font-size:10px;font-weight:800;letter-spacing:.04em;border-radius:6px;padding:1px 6px;margin-left:6px;border:1px solid #5a2f2f;color:#e08a8a} .lsrmiss.hot{color:#ff8e8e;border-color:#8a3a3a;background:#2a1414}.lsract{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}.lsbtn.warn{border-color:#5a2a2a;color:#f3a0a0}.lsamsg{display:none;font-size:11px;font-weight:700;color:#f3a0a0}.lsvn{background:#15121a;border:1px solid var(--line);border-radius:7px;color:var(--text); font-size:11px;font-weight:700;letter-spacing:.02em;padding:5px 7px;max-width:118px}.lsr{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px;margin-top:12px}.lshost{background:#15121a;border:1px solid var(--line);border-radius:11px;padding:12px 13px;min-width:0}.lshn{font-weight:800;color:var(--text);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lshr{display:block;font-size:9px;letter-spacing:.11em;font-weight:800;color:var(--dim);margin-top:3px;white-space:nowrap}.lsdays{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}/* The time list carries its own rule above it only when it has something in it - a host with no days set shows a clean block, not an empty gap with a line across it. :has is supported everywhere this site runs. */.lstimes:has(.lstr:not([style*=none])){margin-top:10px;padding-top:9px;border-top:1px solid var(--line)}.lstr{display:flex;align-items:center;gap:8px;padding:3px 0}.lstd{font-size:12px;font-weight:700;color:var(--muted);flex:1;min-width:0}.lsd{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;letter-spacing:.05em; color:var(--dim);background:#15121a;border:1px solid var(--line);border-radius:7px;padding:5px 8px;cursor:pointer;user-select:none}.lsd.on{color:var(--gold);border-color:#6b5320;background:#1f1a0e}.lsd input{accent-color:#f9b234;margin:0}/* color-scheme matters on a native time input: without it the browser draws the AM/PM picker and the spinner in its light palette on top of this dark field. Width is for the 12-hour form - 56px fitted 19:30 and clips 7:30 PM. */.lstto{font-size:10px;font-weight:800;letter-spacing:.06em;color:var(--dim);flex:none}.lstr{flex-wrap:wrap}.lstr .lstd{min-width:30px}.lsht{width:92px;flex:none;background:#0E0C09;border:1px solid var(--edge); border-radius:7px;color:var(--text);font:inherit;font-size:12px;font-weight:700;padding:4px 6px; text-align:center;color-scheme:dark}.lsht:focus{outline:none;border-color:#6b5320}.lsbt{color:var(--gold);font-weight:800;font-variant-numeric:tabular-nums}.lstz{font-size:9px;letter-spacing:.1em;font-weight:800;color:#5c5668;flex:none}.lsgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-top:12px}.lsev{padding-top:9px}.lsev + .lsev{margin-top:9px;border-top:1px solid var(--line)}.lsn{float:right;font-size:9px;font-weight:800;letter-spacing:.08em;color:#f9b234; border:1px solid #3a2e14;border-radius:999px;padding:2px 7px;text-transform:uppercase}.lsadd{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}.lsadd>summary{list-style:none;cursor:pointer;font-size:10px;font-weight:800; letter-spacing:.09em;text-transform:uppercase;color:#5c5668;padding:2px 0}.lsadd>summary::-webkit-details-marker{display:none}@media (hover:hover){.lsadd>summary:hover{color:#f9b234}}.lsaddb{padding-top:8px}.lsday{background:#15121a;border:1px solid var(--line);border-radius:11px;padding:11px 12px;min-width:0}.lsday.draft{border-color:#6b5320}.lsday.conf{border-color:#2f7a3f;background:#121a13}.lsdt{font-size:11px;font-weight:800;letter-spacing:.09em;color:var(--dim);text-transform:uppercase}.lsb{font-size:13px;font-weight:700;color:var(--text);margin-top:7px;overflow-wrap:anywhere}.lsnone{font-size:12px;color:#5c5668;margin-top:8px;font-style:normal}.lsrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.lsbtn{background:#1A150D;border:1px solid #2e2718;border-radius:8px;color:#CFCBD8;font:inherit; font-size:11px;font-weight:800;padding:6px 10px;cursor:pointer}@media (hover:hover){.lsbtn:hover{background:#241D11;color:#FFF8E8;border-color:#4a3c24}}.lsbtn.key{background:linear-gradient(180deg,#3A2B0E,#241A07);color:var(--gold);border-color:#6b5320}.lsbtn[disabled]{opacity:.45;cursor:default}/* Marked free reads normally; not marked free is dimmed but fully live - it is a note about who usually can, not a lock on who may. Hover brings it up to full so it never feels disabled. */.lsbtn.free{border-color:#3c3121;white-space:normal;text-align:left;line-height:1.35}/* The one-off, folded away. It is an exception you choose, so it costs a click to open and takes no room until then. */.lsone{margin-top:8px}.lsone summary{font-size:11px;font-weight:800;letter-spacing:.05em;color:var(--dim);cursor:pointer; list-style:none;padding:3px 0}.lsone summary::-webkit-details-marker{display:none}.lsone summary:before{content:"+ ";color:var(--gold)}.lsone[open] summary:before{content:"- "}@media (hover:hover){.lsone summary:hover{color:var(--text)}}.lsonb{display:flex;flex-direction:column;gap:6px;margin-top:6px}.lsoh{background:#0E0C09;border:1px solid var(--edge);border-radius:7px;color:var(--text); font:inherit;font-size:12px;font-weight:700;padding:5px 6px;max-width:100%}.lsonr{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.lsot{width:112px;flex:none;background:#0E0C09;border:1px solid var(--edge);border-radius:7px; color:var(--text);font:inherit;font-size:12px;font-weight:700;padding:4px 6px;text-align:center;color-scheme:dark}.lstime{background:#0E0C09;border:1px solid var(--edge);border-radius:6px;color:var(--text); font:inherit;font-size:12px;font-weight:700;padding:3px 6px;width:104px;color-scheme:dark}.lsmeta{font-size:11px;color:var(--dim);margin-top:6px;overflow-wrap:anywhere}.lsmeta.ok{color:#6ec46e}.lsmeta.bad{color:#D4564E}.lshr.warn{color:#f2b63c}.lshr.judge{color:#8fb7ff}.lsmeta.warn{color:#f2b63c}.lscerr{display:none;font-size:11px;font-weight:700;color:#D4564E;margin-top:6px;overflow-wrap:anywhere}.lsmeta a{color:var(--gold)}.lspage .sechd{align-items:center;gap:13px;margin:0 0 16px}.lspage .sechd:before{content:'';flex:none;width:5px;height:27px;border-radius:3px; background:linear-gradient(180deg,#FFD369,#B9801A)}.lspage .sectitle{font-size:22px;font-weight:800;letter-spacing:.05em;color:#FFC94E;line-height:1.15; text-shadow:0 2px 0 rgba(0,0,0,.55),0 0 26px rgba(249,178,52,.22)}.lspage .secrule{height:2px;border-radius:2px; background:linear-gradient(90deg,rgba(249,178,52,.5),rgba(249,178,52,.04))}.lspage .gcardh{font-size:15px;letter-spacing:.09em;color:var(--gold);margin:0 0 13px;line-height:1.2}.lspage .lsrh{font-size:16px;letter-spacing:.07em;line-height:1.25;padding-bottom:9px}.lspage .lsrn{font-size:12px}@media(max-width:620px){.lspage .sectitle{font-size:18px}.lspage .gcardh{font-size:13.5px} .lspage .lsrh{font-size:14px}.lspage .sechd:before{height:22px;width:4px}}.lshot{font-size:10px;font-weight:700;color:#8a7f6a;margin-top:3px;letter-spacing:.01em}.lshm{margin-top:13px;overflow-x:auto}.lshmr{display:flex;align-items:center;gap:1px;margin-bottom:1px;min-width:430px}.lshmd{flex:none;width:30px;font-size:10px;font-weight:800;color:var(--dim);letter-spacing:.04em}.lshc{flex:1 1 0;min-width:9px;height:15px;border-radius:2px;background:#15121a}.lshmh .lshc{background:none;height:12px}.lshlbl{font-size:8px;font-weight:800;color:#5c5668;white-space:nowrap;overflow:visible}.lshmv{flex:none;width:74px;text-align:right;font-size:10px;font-weight:700;color:var(--muted); font-variant-numeric:tabular-nums}.lshmh .lshmv{color:#5c5668;font-size:8px;letter-spacing:.1em}.hptab{width:100%;border-collapse:collapse;margin-top:12px;font-size:12px}.hptab th{text-align:right;font-size:9px;letter-spacing:.08em;color:#5c5668;font-weight:800;padding:0 0 6px 9px;white-space:nowrap}.hptab th:first-child{text-align:left;padding-left:0}.hptab td{text-align:right;padding:5px 0 5px 9px;border-top:1px solid var(--line);font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}.hptab td:first-child{text-align:left;padding-left:0}.hpn{color:var(--text);font-weight:700}.hpsc{color:#f9b234;font-weight:800}.hpbad{color:#e5534b;font-weight:800}.hpthin td{opacity:.52}.hpna{font-size:9px;letter-spacing:.05em;color:#5c5668;font-weight:700}.hpempty{margin-top:14px;padding:16px;border:1px dashed var(--line);border-radius:9px; color:var(--dim);font-size:12px;text-align:center}.lspage select.fssel{-webkit-appearance:none;appearance:none;color-scheme:dark; background:#0E0C09 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23f2b63c' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat right 9px center; border:1px solid #2e2718;border-radius:8px;color:var(--text);font:inherit;font-size:11.5px;font-weight:700; padding:6px 26px 6px 9px;max-width:100%;cursor:pointer}@media (hover:hover){.lspage select.fssel:hover{border-color:#6b5320}}.lspage select.fssel option{background:#15121a;color:#eee}.fspill{display:inline-flex;align-items:center;font-size:10px;font-weight:800;letter-spacing:.05em; text-transform:uppercase;border-radius:999px;padding:3px 8px;border:1px solid #3a3544;color:#bdb7c9; background:#18151d;white-space:nowrap}.fspill.conf{color:#111;background:linear-gradient(180deg,#FFD369,#E5A22A);border-color:#E5A22A}.fspill.draft{color:#f2b63c;border-color:#6b5320;background:#1f1a0e}.fspill.open{color:#7c768a}.fspill.bad{color:#f3a0a0;border-color:#5a2a2a;background:#1f1010}.lsbtn.warn.armed{background:#5a1f1c;color:#fff;border-color:#d4564e}.lsrr{align-items:center}.lsrr .lsbtn{margin-left:auto;font-size:11px;padding:3px 9px}.lshost .lsbtn.warn{margin-top:8px;font-size:11px;padding:3px 9px}.lsjp.need{border-color:#6b5320;box-shadow:0 0 0 1px rgba(249,178,52,.12)}.fsseats{display:flex;gap:5px;margin:3px 0 2px}.fsseat{width:22px;height:22px;border-radius:50%;border:2px solid #2f7a3f;background:#221d29}.fsseat.empty{border:2px dashed #6b5320;background:none}.lsday .lsdt{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.lsday .lsdt .fspill{margin-left:auto}.fsline{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:7px}.fslab{font:800 9px/1 Inter,sans-serif;letter-spacing:.16em;color:var(--dim);text-transform:uppercase}.fsnote{font-size:11px;color:#8a8698;margin-top:4px}.pnmeta{font-size:11px;color:var(--dim);line-height:1.55;margin-top:6px;max-width:780px}.pnmiss{padding:40px 0;text-align:center;color:var(--dim);font-size:13px}.pnbar{display:flex;align-items:center;justify-content:space-between;margin:10px 0 8px}.pnst{font-size:10px;font-weight:800;letter-spacing:.07em;color:#5c5668}.pnst.bad{color:#e5534b}.pnbox{width:100%;min-height:30vh;resize:vertical;background:#15121a;border:1px solid var(--line); border-radius:9px;color:var(--text);padding:14px 15px;font:14px/1.65 inherit;outline:none}.pnbox:focus{border-color:#f9b234}.pnerr{display:none;margin-top:10px;padding:12px 14px;border:1px solid #e5534b;border-radius:9px; color:#e5534b;font-size:12px;line-height:1.5}.pnerr button{margin-top:9px}.pnrow{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}.pnid{flex:1 1 220px;background:#15121a;border:1px solid var(--line);border-radius:7px; color:var(--text);padding:7px 10px;font:12px inherit;outline:none}.pnlog{margin-top:12px;font-size:12px;color:var(--muted)}.pnlr{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line)}.pnls{flex:none;width:118px;color:#f9b234;font-weight:800;font-size:10px;letter-spacing:.05em; text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pnlw{flex:1 1 auto;color:var(--text);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pnlt{flex:none;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}.pnlc{flex:none;width:126px;text-align:right;color:#5c5668;font-variant-numeric:tabular-nums;white-space:nowrap}.pnlv{flex:none}.pndates{display:flex;align-items:center;gap:8px;margin-top:9px;flex-wrap:wrap}.pndt{background:#15121a;border:1px solid var(--line);border-radius:7px;color:var(--text); padding:5px 9px;font:12px inherit;outline:none;color-scheme:dark}.pndt:focus{border-color:#f9b234}.pndt:disabled{opacity:.6}.pnarr{font-size:10px;font-weight:800;letter-spacing:.08em;color:#5c5668;text-transform:uppercase}.pnspan{font-size:10px;font-weight:800;letter-spacing:.05em;color:#f9b234;margin-left:4px}.pntabs{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0 14px}.pntb{background:#15121a;border:1px solid var(--line);border-radius:999px;color:var(--muted); font:800 11px/1 inherit;letter-spacing:.06em;text-transform:uppercase;padding:9px 15px; cursor:pointer;white-space:nowrap}@media (hover:hover){.pntb:hover{color:var(--text);border-color:#4a4458}}.pntb.on{background:#f9b234;border-color:#f9b234;color:#15121a}.pnp{position:relative}.pnp.pndrag{opacity:.45;outline:1px dashed #f9b234}.pnph{display:flex;align-items:center;gap:9px}.pngrip{flex:none;cursor:grab;color:#5c5668;font-weight:800;letter-spacing:2px; user-select:none;padding:2px 6px;border:1px solid var(--line);border-radius:6px;font-size:11px}.pngrip:active{cursor:grabbing;color:#f9b234}.pnname{flex:1 1 auto;background:none;border:1px solid transparent;border-radius:7px; color:var(--text);font:800 13px/1.3 inherit;letter-spacing:.06em;text-transform:uppercase; padding:6px 8px;outline:none}@media (hover:hover){.pnname:hover{border-color:var(--line)}}.pnname:focus{border-color:#f9b234;background:#15121a}.pnteam{margin-top:14px}.pntm{display:flex;gap:13px;align-items:flex-start;padding:11px 0}.pntm.rep{margin-left:22px;padding-left:17px;border-left:1px solid var(--line)}.pnav{flex:none;width:46px;height:46px;border-radius:50%;background:#15121a; border:1px solid var(--line);object-fit:cover}.pntm.boss .pnav{border-color:#f9b234}.pntmb{flex:1 1 auto;min-width:0}.pntmn{font:800 13px/1.3 inherit;letter-spacing:.05em;text-transform:uppercase; color:var(--text);margin:3px 0 5px}.pntmo{font-size:9px;font-weight:800;letter-spacing:.08em;color:#f9b234; border:1px solid #f9b234;border-radius:999px;padding:2px 7px;margin-left:7px}.pntt,.pntr{display:block;width:100%;background:none;border:1px solid transparent; border-radius:7px;color:var(--text);padding:5px 8px;font:13px/1.5 inherit;outline:none}.pntt{font-weight:700;color:#f9b234;max-width:390px}.pntr{color:var(--muted);font-size:12px;max-width:640px}@media (hover:hover){input.pntt:hover,input.pntr:hover{border-color:var(--line)}}input.pntt:focus,input.pntr:focus{border-color:#f9b234;background:#15121a}.pntt.ro,.pntr.ro{padding-left:0}.pntu{background:none;border:1px solid transparent;border-radius:7px;color:inherit; font:inherit;padding:2px 7px;outline:none;min-width:280px;max-width:100%}@media (hover:hover){.pntu:hover{border-color:var(--line)}}.pntu:focus{border-color:#f9b234;background:#15121a}.pnfl{margin-top:6px}.pnf{border-top:1px solid var(--line)}.pnf:first-child{border-top:none}.pnf .pnav{width:40px;height:40px}.pnfm{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:5px; font-size:11px;color:#5c5668;padding-left:8px}.pnfm code{font-size:10px;color:var(--dim)}.pnfm .lsbtn{padding:3px 9px;font-size:10px}.chdock{position:fixed;right:16px;bottom:0;width:330px;max-width:calc(100vw - 24px);z-index:60; font-size:13px;filter:drop-shadow(0 18px 34px rgba(0,0,0,.55))}.chbar{display:flex;align-items:center;gap:8px;width:100%;border:1px solid var(--line);border-bottom:0; background:linear-gradient(180deg,#141019,#0d0a12);color:var(--gold);border-radius:12px 12px 0 0; padding:9px 13px;font-size:11px;font-weight:800;letter-spacing:.16em;cursor:pointer;text-align:left}.chbar .chcar{margin-left:auto;transition:transform .18s ease;font-size:9px;opacity:.75}.chdock.open .chbar .chcar{transform:rotate(180deg)}.chdot{width:7px;height:7px;border-radius:50%;background:#E2574C;box-shadow:0 0 8px rgba(226,87,76,.8)}.chbox{display:none;flex-direction:column;background:var(--panel);border:1px solid var(--line); border-bottom:0;border-radius:0;height:46vh;max-height:430px;min-height:240px;overflow:hidden}.chdock.open .chbox{display:flex}.chlist{flex:1 1 auto;overflow-y:auto;padding:11px 12px;display:flex;flex-direction:column;gap:9px}.chm{display:flex;gap:9px;align-items:flex-start}.chm.cont{margin-top:-6px}.chm.cont .chav{visibility:hidden}.chm.cont .chn,.chm.cont .chw{display:none}.chm.cont .chh{min-height:0;margin:0}.chav{flex:none;width:26px;height:26px;border-radius:50%;background:#17131f center/cover no-repeat; border:1px solid var(--line);font-size:11px;font-weight:800;color:var(--dim);display:flex; align-items:center;justify-content:center;overflow:hidden}.chbd{flex:1 1 auto;min-width:0}.chh{display:flex;align-items:baseline;gap:7px;margin-bottom:1px}.chn{font-size:11.5px;font-weight:800;color:#E7E3F0;letter-spacing:-.01em}.chn.you{color:var(--gold)}.chw{font-size:9.5px;color:var(--dim);font-variant-numeric:tabular-nums}.cht{font-size:13px;line-height:1.5;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere}.cht a{color:var(--gold)}.cht.gone{color:var(--dim);font-style:italic;font-size:12px}.chx{margin-left:auto;border:0;background:none;color:var(--dim);font-size:13px;line-height:1; cursor:pointer;opacity:0;padding:0 2px}.chx:focus-visible{opacity:1}@media (hover:hover){.chm:hover .chx{opacity:1}}@media (hover:hover){.chx:hover{color:#E2574C}}.chf{flex:none;border-top:1px solid var(--line);padding:8px 9px;display:flex;gap:7px;align-items:flex-end; background:rgba(0,0,0,.25)}.chin{flex:1 1 auto;resize:none;min-height:34px;max-height:96px;border:1px solid var(--line); background:#0c0910;color:var(--text);border-radius:9px;padding:8px 10px;font:inherit;font-size:13px}.chin:focus{outline:0;border-color:#3a2d10}.chgo{flex:none;border:1px solid #6b5320;border-radius:9px;padding:8px 12px;font-size:11px;font-weight:800; letter-spacing:.1em;color:var(--gold);background:linear-gradient(180deg,#3A2B0E,#241A07);cursor:pointer}.chgo[disabled]{opacity:.45;cursor:default}.chsay{padding:10px 12px;font-size:12px;color:var(--dim);border-top:1px solid var(--line);text-align:center}.chsay a{color:var(--gold)}.chnote{font-size:11px;color:var(--dim);text-align:center;padding:14px 10px;line-height:1.6}.cherr{font-size:11px;color:#E2574C;padding:0 12px 8px}.chpanel{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line); border-radius:13px;overflow:hidden;min-height:260px;max-height:340px}.chpanel .chph{font-size:10px;font-weight:800;letter-spacing:.18em;color:var(--gold);padding:12px 14px 6px}.chpanel .chbox{display:flex;height:auto;flex:1 1 auto;border:0;background:none;max-height:none;min-height:0}@media(max-width:760px){.chdock{right:8px;left:8px;width:auto}.chbox{height:52vh}}@media print{.chdock{display:none}}