/* ========================================================================== WILA — core stylesheet. Every colour here reads from a CSS variable that the Head Admin Panel rewrites at runtime, so the whole site can be re-skinned without a rebuild. ========================================================================== */ :root{ --primary:#7c3aed; --secondary:#0b0410; --accent:#ffd400; --bg:#07030c; --bg2:#120a1f; --text:#f3ecff; --muted:#a08bc0; --card:rgba(24,12,40,.72); --border:rgba(168,85,247,.28); --radius:16px; --font:'Outfit',system-ui,sans-serif; --hfont:var(--font); --glow:var(--primary); --speed:1; --intensity:.6; --ok:#22c55e; --warn:#f59e0b; --danger:#ef4444; --nav-h:64px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:var(--font); color:var(--text); min-height:100vh; overflow-x:hidden; -webkit-font-smoothing:antialiased; letter-spacing:.01em; } /* The colour lives on , not . A background on body paints over its own negative-z children, which hid the architecture layers entirely. */ html{background:var(--bg)} body.no-motion *{animation:none!important;transition:none!important} /* ---------- animated background ---------- */ #bg{position:fixed;inset:0;z-index:-2;background:var(--bg);overflow:hidden} #bg .layer{position:absolute;inset:-30%;opacity:var(--intensity);will-change:transform} #bg.aurora .layer{ background: radial-gradient(42% 42% at 22% 28%, color-mix(in srgb,var(--primary) 85%,transparent) 0%, transparent 62%), radial-gradient(38% 38% at 78% 22%, color-mix(in srgb,var(--glow) 70%,transparent) 0%, transparent 60%), radial-gradient(46% 46% at 60% 82%, color-mix(in srgb,var(--accent) 32%,transparent) 0%, transparent 64%), radial-gradient(50% 50% at 12% 84%, color-mix(in srgb,var(--primary) 55%,transparent) 0%, transparent 66%); filter:blur(64px) saturate(140%); animation:drift calc(34s / var(--speed)) ease-in-out infinite alternate; } #bg.mesh .layer{ background: conic-gradient(from 0deg at 30% 30%, var(--primary), var(--secondary), var(--glow), var(--primary)), radial-gradient(60% 60% at 70% 70%, color-mix(in srgb,var(--accent) 26%,transparent), transparent 70%); filter:blur(90px) saturate(130%); animation:spin calc(60s / var(--speed)) linear infinite; } #bg.grid .layer{ background-image: linear-gradient(color-mix(in srgb,var(--primary) 26%,transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb,var(--primary) 26%,transparent) 1px, transparent 1px); background-size:56px 56px; opacity:calc(var(--intensity) * .5); animation:pan calc(26s / var(--speed)) linear infinite; mask-image:radial-gradient(70% 70% at 50% 40%, #000 20%, transparent 100%); } #bg.rays .layer{ background:repeating-conic-gradient(from 0deg at 50% 0%, color-mix(in srgb,var(--primary) 40%,transparent) 0deg 6deg, transparent 6deg 16deg); filter:blur(30px); animation:spin calc(90s / var(--speed)) linear infinite; } #bg.plain .layer{background:linear-gradient(160deg,var(--bg),var(--bg2));filter:none;opacity:1;animation:none} #bg::after{ content:'';position:absolute;inset:0;pointer-events:none;z-index:3; background: radial-gradient(120% 90% at 50% 0%, transparent 30%, color-mix(in srgb,var(--bg) 78%,transparent) 100%), linear-gradient(180deg, transparent 45%, color-mix(in srgb,var(--bg) 82%,transparent) 96%); } /* With a landmark behind the page, the vignette must not bury it. */ body.leaguetint #bg::after{ background: radial-gradient(120% 80% at 50% 0%, transparent 45%, color-mix(in srgb,var(--bg) 45%,transparent) 100%), linear-gradient(180deg, transparent 55%, color-mix(in srgb,var(--bg) 35%,transparent) 100%); } #noise{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")} body.no-noise #noise{display:none} @keyframes drift{0%{transform:translate3d(-4%,-3%,0) scale(1.05) rotate(0deg)}100%{transform:translate3d(5%,4%,0) scale(1.16) rotate(8deg)}} @keyframes spin{to{transform:rotate(360deg)}} @keyframes pan{to{background-position:56px 56px}} /* ---------- shell ---------- */ .wrap{max-width:1360px;margin:0 auto;padding:0 22px} header.top{ position:sticky;top:0;z-index:60; backdrop-filter:blur(20px) saturate(160%); background:linear-gradient(180deg, color-mix(in srgb,var(--secondary) 92%,transparent), color-mix(in srgb,var(--secondary) 62%,transparent)); border-bottom:1px solid var(--border); } .top .bar{display:flex;align-items:center;gap:14px;height:var(--nav-h);min-width:0} .brand{display:flex;align-items:center;gap:12px;cursor:pointer;flex-shrink:0} .brand img{height:38px;width:38px;object-fit:contain;border-radius:10px; filter:drop-shadow(0 0 12px color-mix(in srgb,var(--primary) 70%,transparent))} .brand .mark{ height:38px;width:38px;border-radius:11px;display:grid;place-items:center;font-weight:800;font-size:15px; background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--accent) 60%,var(--primary))); color:#0b0410;box-shadow:0 0 22px color-mix(in srgb,var(--primary) 60%,transparent)} .brand b{font-family:var(--hfont);font-size:19px;letter-spacing:.14em;font-weight:800} .brand b em{font-style:normal;color:var(--accent)} .brand small{display:block;font-size:9.5px;letter-spacing:.24em;color:var(--muted);text-transform:uppercase;margin-top:-2px} /* Tab strip. When the tabs fit, this is an ordinary row and nothing extra renders. When they overflow, a hairline slider fades in underneath — 3px tall, draggable, and it doubles as a position indicator. */ .navwrap{ position:relative;display:flex;flex-direction:column;justify-content:center; margin-left:auto;min-width:0;flex-shrink:1; } nav.tabs1{ display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;min-width:0; scroll-behavior:smooth;-webkit-overflow-scrolling:touch; } /* Soften the edge you can still scroll toward. */ .navwrap::before,.navwrap::after{ content:'';position:absolute;top:0;bottom:0;width:26px;pointer-events:none;z-index:2; opacity:0;transition:opacity .25s ease; } .navwrap::before{left:0;background:linear-gradient(90deg, color-mix(in srgb,var(--secondary) 90%,transparent),transparent)} .navwrap::after{right:0;background:linear-gradient(270deg, color-mix(in srgb,var(--secondary) 90%,transparent),transparent)} .navwrap.can-left::before{opacity:1} .navwrap.can-right::after{opacity:1} /* A miniature slider, not a full-width underline. Fixed 64px pill, centred under the tabs, and it only takes up space once the tabs overflow. */ .navrail{ height:0;width:64px;opacity:0;align-self:center;position:relative; border-radius:99px;overflow:hidden;cursor:pointer; background:color-mix(in srgb,var(--muted) 22%,transparent); transition:height .2s ease, opacity .2s ease, margin .2s ease, width .2s ease; } .navwrap.scrollable .navrail{height:3px;opacity:.75;margin:6px 0 0} .navwrap.scrollable .navrail:hover, .navwrap.scrollable .navrail.dragging{opacity:1;height:5px;width:76px} .navthumb{ position:absolute;top:0;bottom:0;left:0;width:34%;border-radius:99px; background:linear-gradient(90deg,var(--primary),var(--accent)); } .navrail:hover .navthumb,.navrail.dragging .navthumb{ box-shadow:0 0 8px -1px var(--glow); } .navrail.dragging{cursor:grabbing} nav.tabs1::-webkit-scrollbar{display:none} nav.tabs1 a{ padding:9px 15px;border-radius:11px;font-size:13.5px;font-weight:600;color:var(--muted); text-decoration:none;white-space:nowrap;position:relative;transition:.22s;border:1px solid transparent} nav.tabs1 a:hover{color:var(--text);background:color-mix(in srgb,var(--primary) 14%,transparent)} nav.tabs1 a.on{ color:var(--text);background:color-mix(in srgb,var(--primary) 26%,transparent); border-color:var(--border);box-shadow:0 0 20px -6px var(--glow)} nav.tabs1 a.on::after{ content:'';position:absolute;left:22%;right:22%;bottom:-1px;height:2px;border-radius:2px; background:linear-gradient(90deg,transparent,var(--accent),transparent)} .userchip{display:flex;align-items:center;gap:9px;padding:5px 12px 5px 5px;border-radius:99px; border:1px solid var(--border);background:color-mix(in srgb,var(--primary) 12%,transparent); cursor:pointer;flex-shrink:0;transition:.2s} .userchip:hover{background:color-mix(in srgb,var(--primary) 22%,transparent)} .userchip img,.userchip .av{height:28px;width:28px;border-radius:50%;object-fit:cover; background:linear-gradient(135deg,var(--primary),var(--accent));display:grid;place-items:center; font-size:11px;font-weight:800;color:#0b0410} .userchip span{font-size:12.5px;font-weight:600;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block} .userchip .role{font-size:9px;letter-spacing:.12em;color:var(--accent);text-transform:uppercase} /* ---------- secondary / tertiary tabs ---------- */ .tabs2{display:flex;gap:8px;padding:14px 0 4px;overflow-x:auto;scrollbar-width:none} .tabs2::-webkit-scrollbar{display:none} .tabs2 button{ display:flex;align-items:center;gap:9px;padding:9px 17px;border-radius:13px;cursor:pointer; font-family:inherit;font-size:13.5px;font-weight:700;color:var(--muted);white-space:nowrap; background:color-mix(in srgb,var(--card) 80%,transparent);border:1px solid var(--border);transition:.24s} .tabs2 button img{height:20px;width:20px;object-fit:contain} .tabs2 button .dot{height:9px;width:9px;border-radius:50%;background:var(--lp,var(--primary)); box-shadow:0 0 10px var(--lp,var(--primary))} .tabs2 button:hover{color:var(--text);transform:translateY(-2px)} .tabs2 button.on{ color:#fff;border-color:var(--lp,var(--primary)); background:linear-gradient(135deg, color-mix(in srgb,var(--lp,var(--primary)) 42%,transparent), color-mix(in srgb,var(--ls,var(--secondary)) 55%,transparent)); box-shadow:0 8px 26px -10px var(--lg,var(--primary))} .tabs3{display:flex;gap:6px;margin:18px 0 22px;padding:5px;border-radius:14px;width:fit-content; background:color-mix(in srgb,var(--secondary) 60%,transparent);border:1px solid var(--border)} .tabs3 button{ padding:8px 22px;border-radius:10px;border:none;cursor:pointer;font-family:inherit; font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:var(--muted);background:transparent;transition:.2s} .tabs3 button:hover{color:var(--text)} .tabs3 button.on{color:#fff;background:linear-gradient(135deg,var(--lp,var(--primary)),var(--lg,var(--primary))); box-shadow:0 4px 18px -6px var(--lp,var(--primary))} /* ---------- league banner ---------- */ .lgbanner{ display:flex;align-items:center;gap:18px;padding:22px 26px;border-radius:var(--radius); border:1px solid color-mix(in srgb,var(--lp,var(--primary)) 40%,transparent); background:linear-gradient(115deg, color-mix(in srgb,var(--lp,var(--primary)) 26%,transparent), color-mix(in srgb,var(--ls,var(--secondary)) 40%,transparent) 60%, transparent); position:relative;overflow:hidden;margin-bottom:6px} .lgbanner::after{content:'';position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%; background:radial-gradient(circle, color-mix(in srgb,var(--lg,var(--primary)) 45%,transparent), transparent 70%); animation:pulse calc(6s / var(--speed)) ease-in-out infinite} @keyframes pulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.22);opacity:1}} .lgbanner img.crest{height:62px;width:62px;object-fit:contain; filter:drop-shadow(0 0 16px color-mix(in srgb,var(--lg,var(--primary)) 80%,transparent))} .lgbanner .fallback{height:62px;width:62px;border-radius:16px;display:grid;place-items:center; font-weight:900;font-size:17px;letter-spacing:.04em;color:#fff; background:linear-gradient(135deg,var(--lp,var(--primary)),var(--lg,var(--primary))); box-shadow:0 0 26px -6px var(--lg,var(--primary))} .lgbanner h2{font-family:var(--hfont);font-size:27px;font-weight:800;letter-spacing:-.01em} .lgbanner p{font-size:12.5px;color:var(--muted);margin-top:3px;letter-spacing:.04em} /* ---------- cards & layout ---------- */ .card{ background:var(--card);border:1px solid var(--border);border-radius:var(--radius); padding:20px;backdrop-filter:blur(14px);transition:.3s;position:relative;overflow:hidden} body.hoverfx .card:hover{border-color:color-mix(in srgb,var(--lp,var(--primary)) 55%,transparent); transform:translateY(-3px);box-shadow:0 18px 44px -22px var(--lg,var(--primary))} .card h3{font-family:var(--hfont);font-size:15px;font-weight:700;margin-bottom:14px; display:flex;align-items:center;gap:9px} .card h3 .pill{font-size:10px;padding:3px 9px;border-radius:99px;background:color-mix(in srgb,var(--primary) 26%,transparent); color:var(--accent);letter-spacing:.08em;text-transform:uppercase} .grid{display:grid;gap:16px} .g2{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))} .g3{grid-template-columns:repeat(auto-fill,minmax(255px,1fr))} .g4{grid-template-columns:repeat(auto-fill,minmax(185px,1fr))} .section{padding:26px 0 60px} @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .stack{display:flex;flex-direction:column;gap:14px} .row{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .spread{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap} /* ---------- tables ---------- */ table.tbl{width:100%;border-collapse:separate;border-spacing:0 5px;font-size:13.5px} table.tbl thead th{ text-align:left;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted); padding:0 12px 9px;font-weight:700} table.tbl tbody tr{background:color-mix(in srgb,var(--secondary) 55%,transparent);transition:.2s} table.tbl tbody tr:hover{background:color-mix(in srgb,var(--lp,var(--primary)) 16%,transparent)} table.tbl td{padding:11px 12px;border-top:1px solid transparent;border-bottom:1px solid transparent} table.tbl tbody tr td:first-child{border-radius:11px 0 0 11px;border-left:3px solid transparent} table.tbl tbody tr td:last-child{border-radius:0 11px 11px 0} table.tbl .num{text-align:center;width:46px;font-variant-numeric:tabular-nums} table.tbl .pts{font-weight:800;color:var(--accent)} tr.q-ucl td:first-child{border-left-color:#2f6fed!important} tr.q-uel td:first-child{border-left-color:#ff8c1a!important} tr.q-rel td:first-child{border-left-color:#ef4444!important} .teamcell{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:600} .teamcell:hover{color:var(--accent)} .crestmini{height:24px;width:24px;object-fit:contain;flex-shrink:0} .crestmini.fb{border-radius:7px;display:grid;place-items:center;font-size:9px;font-weight:800;color:#fff; background:linear-gradient(135deg,var(--lp,var(--primary)),var(--lg,var(--primary)))} .form{display:flex;gap:3px} .form i{height:17px;width:17px;border-radius:5px;font-style:normal;font-size:9px;font-weight:800; display:grid;place-items:center;color:#08040d} .form i.W{background:var(--ok)} .form i.D{background:#8b8b9e} .form i.L{background:var(--danger)} /* ---------- badges / buttons ---------- */ .badge{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;padding:3.5px 10px; border-radius:99px;letter-spacing:.07em;text-transform:uppercase; background:color-mix(in srgb,var(--primary) 22%,transparent);border:1px solid var(--border);color:var(--text)} .badge.acc{background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--accent); border-color:color-mix(in srgb,var(--accent) 40%,transparent)} .badge.ok{background:color-mix(in srgb,var(--ok) 20%,transparent);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)} .badge.warn{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent)} .badge.dng{background:color-mix(in srgb,var(--danger) 18%,transparent);color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,transparent)} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:11px; border:1px solid var(--border);cursor:pointer;font-family:inherit;font-size:13px;font-weight:700; color:var(--text);background:color-mix(in srgb,var(--primary) 20%,transparent);transition:.2s;text-decoration:none} .btn:hover{background:color-mix(in srgb,var(--primary) 34%,transparent);transform:translateY(-1px); box-shadow:0 8px 22px -12px var(--glow)} .btn.pri{background:linear-gradient(135deg,var(--primary),var(--glow));border-color:transparent;color:#fff} .btn.acc{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 60%,var(--primary)));color:#12060f;border-color:transparent} .btn.dng{background:color-mix(in srgb,var(--danger) 25%,transparent);border-color:color-mix(in srgb,var(--danger) 45%,transparent)} .btn.sm{padding:6px 12px;font-size:11.5px;border-radius:9px} .btn.gho{background:transparent} .btn:disabled{opacity:.45;cursor:not-allowed;transform:none} /* ---------- forms ---------- */ label.f{display:block;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted); margin:0 0 6px;font-weight:700} input,select,textarea{ width:100%;padding:10px 13px;border-radius:11px;font-family:inherit;font-size:13.5px; background:color-mix(in srgb,var(--bg) 72%,transparent);color:var(--text); border:1px solid var(--border);transition:.2s;outline:none} input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 22%,transparent)} input[type=color]{padding:3px;height:40px;cursor:pointer} input[type=range]{padding:0;accent-color:var(--primary)} input[type=file]{padding:8px;font-size:12px} textarea{min-height:82px;resize:vertical} select option{background:var(--bg2);color:var(--text)} .fieldrow{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(165px,1fr))} .switch{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:13px;padding:8px 0} .switch input{width:auto;height:auto;accent-color:var(--primary);cursor:pointer;transform:scale(1.15)} /* ---------- player / tierlist cards ---------- */ .pcard{ display:flex;gap:14px;align-items:center;padding:14px;border-radius:var(--radius); background:linear-gradient(120deg, color-mix(in srgb,var(--pos,var(--primary)) 15%,var(--card)), var(--card)); border:1px solid color-mix(in srgb,var(--pos,var(--primary)) 30%,transparent);transition:.28s;position:relative;overflow:hidden} body.hoverfx .pcard:hover{transform:translateY(-4px) scale(1.012); box-shadow:0 20px 46px -24px var(--pos,var(--primary)); border-color:color-mix(in srgb,var(--pos,var(--primary)) 65%,transparent)} /* ---------- class badges (X > S > A > B > C > D) ---------- */ .cls{ display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 8px; border-radius:10px;font-family:var(--hfont);font-size:17px;font-weight:900;line-height:1; color:#0b0410;letter-spacing:.02em; background:linear-gradient(150deg,var(--cc,#8b8b9e),color-mix(in srgb,var(--cc,#8b8b9e) 60%,#000)); box-shadow:0 0 18px -6px var(--cc,#8b8b9e); } .cls.lg{min-width:58px;height:58px;font-size:26px;border-radius:14px} .cls.sm{min-width:26px;height:26px;font-size:13px;border-radius:8px} .cls-X{--cc:#ffd400} /* gold */ .cls-S{--cc:#ff5ea8} /* pink */ .cls-A{--cc:#a855f7} /* purple*/ .cls-B{--cc:#3b82f6} /* blue */ .cls-C{--cc:#22c55e} /* green */ .cls-D{--cc:#8b8b9e} /* grey */ .cls-none{--cc:#3a3450;color:var(--muted)} .pcard .ovr{ min-width:58px;height:58px;border-radius:14px;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:1px; background:linear-gradient(150deg,var(--pos,var(--primary)),color-mix(in srgb,var(--pos,var(--primary)) 45%,#000)); font-family:var(--hfont);font-size:23px;font-weight:900;color:#fff;line-height:1; box-shadow:0 0 22px -6px var(--pos,var(--primary))} .pcard .ovr small{font-size:8px;letter-spacing:.16em;opacity:.85;font-weight:700} .pcard .av{height:44px;width:44px;border-radius:50%;object-fit:cover;flex-shrink:0; border:2px solid color-mix(in srgb,var(--pos,var(--primary)) 55%,transparent)} .pcard .av.fb{display:grid;place-items:center;font-weight:800;font-size:15px;color:#fff; background:linear-gradient(135deg,var(--primary),var(--accent))} .pcard .who{flex:1;min-width:0} .pcard .who b{display:block;font-size:14.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pcard .who .sub{display:flex;gap:7px;align-items:center;margin-top:4px;flex-wrap:wrap} .pcard .st{display:flex;gap:12px;text-align:center;flex-shrink:0} .pcard .st div b{display:block;font-size:16px;font-weight:800;font-family:var(--hfont)} .pcard .st div span{font-size:8.5px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase} .pos-attacker{--pos:#ef4444} .pos-midfielder{--pos:#22c55e} .pos-defender{--pos:#3b82f6} .pos-goalkeeper{--pos:#f59e0b} /* ---------- team tiles ---------- */ .ttile{ display:flex;flex-direction:column;align-items:center;gap:11px;padding:22px 14px;cursor:pointer; border-radius:var(--radius);background:var(--card);border:1px solid var(--border);transition:.3s;text-align:center} body.hoverfx .ttile:hover{transform:translateY(-6px); border-color:color-mix(in srgb,var(--lp,var(--primary)) 65%,transparent); box-shadow:0 22px 48px -26px var(--lg,var(--primary))} .ttile img{height:62px;width:62px;object-fit:contain;transition:.3s} body.hoverfx .ttile:hover img{transform:scale(1.1) rotate(-4deg)} .ttile .fb{height:62px;width:62px;border-radius:17px;display:grid;place-items:center;font-weight:900;font-size:19px; color:#fff;background:linear-gradient(140deg,var(--lp,var(--primary)),var(--lg,var(--primary)))} .ttile b{font-size:13.5px;font-weight:700;line-height:1.3} .ttile small{font-size:9.5px;color:var(--muted);font-family:ui-monospace,monospace;letter-spacing:.02em} /* ---------- result rows ---------- */ .res{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:15px 18px; border-radius:var(--radius);background:var(--card);border:1px solid var(--border);transition:.25s} body.hoverfx .res:hover{border-color:color-mix(in srgb,var(--lp,var(--primary)) 50%,transparent);transform:translateX(3px)} .res .side{display:flex;align-items:center;gap:11px;min-width:0} .res .side.r{flex-direction:row-reverse;text-align:right} .res .side b{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .res .sc{display:flex;align-items:center;gap:9px;font-family:var(--hfont);font-size:22px;font-weight:900; padding:5px 15px;border-radius:11px;background:color-mix(in srgb,var(--lp,var(--primary)) 22%,transparent); border:1px solid var(--border);white-space:nowrap} .res .sc i{font-style:normal;opacity:.4;font-size:15px} .res .meta{grid-column:1/-1;display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:start; padding-top:11px;margin-top:4px;border-top:1px solid var(--border);font-size:11.5px;color:var(--muted)} /* Home contributors hug the left, away hug the right — never interleaved. */ .res .rline{display:flex;gap:6px;flex-wrap:wrap;align-items:flex-start;min-width:0} .res .rline.s2{justify-content:flex-end} .res .midbits{display:flex;flex-direction:column;align-items:center;gap:3px;white-space:nowrap} .res .meta b{color:var(--text);font-weight:600} .res{cursor:pointer;outline:none} .res:focus-visible{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent)} /* Winner gets a subtle edge, so a glance tells you who took it. */ .res.w1{border-left:2px solid color-mix(in srgb,var(--lp,var(--primary)) 70%,transparent)} .res.w2{border-right:2px solid color-mix(in srgb,var(--lp,var(--primary)) 70%,transparent)} .res .wdot{height:6px;width:6px;border-radius:50%;flex-shrink:0; background:var(--la,var(--accent));box-shadow:0 0 8px var(--la,var(--accent))} .res .meta em{font-style:normal;opacity:.75} .res .meta .when{white-space:nowrap} .res .meta .open{color:var(--la,var(--accent));font-weight:700;opacity:0;transition:opacity .2s ease;white-space:nowrap} body.hoverfx .res:hover .meta .open{opacity:1} .gchip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;font-size:11px; color:var(--text);background:color-mix(in srgb,var(--lp,var(--primary)) 16%,transparent); border:1px solid color-mix(in srgb,var(--lp,var(--primary)) 26%,transparent)} .gchip i{font-style:normal;font-size:9.5px;font-weight:900;color:#0b0410; background:var(--la,var(--accent));padding:1px 5px;border-radius:99px} .res .meta .mvpmini{display:inline-flex;align-items:center;gap:5px; color:var(--la,var(--accent));font-weight:700} /* A match icon: an emoji character, or an uploaded image. */ .micon{display:inline-block;vertical-align:-2px;flex-shrink:0} img.micon{object-fit:contain} .micon.emoji{line-height:1} .scorer{display:inline-flex;align-items:center;gap:4px} /* ==================== MATCH REPORT ==================== */ .modal.reportmodal{max-width:760px;padding:0;overflow:hidden; background:linear-gradient(170deg, color-mix(in srgb,var(--secondary) 96%,transparent), color-mix(in srgb,var(--bg2) 94%,transparent))} .modal.reportmodal .x{top:16px;right:18px;z-index:5} .rp{display:flex;flex-direction:column} .rphead{display:flex;align-items:center;gap:10px;padding:16px 22px;font-size:12.5px; border-bottom:1px solid var(--border); background:color-mix(in srgb,var(--primary) 12%,transparent)} .rphead b{font-family:var(--hfont);font-size:14px} .rphead .g{flex:1} .rpstage{padding:3px 10px;border-radius:99px;font-size:10.5px;font-weight:800;letter-spacing:.08em; text-transform:uppercase;color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,transparent); border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)} .rpdate{color:var(--muted);font-size:11.5px;margin-right:34px;white-space:nowrap} .rpscore{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px; padding:34px 26px 30px;position:relative;overflow:hidden} .rpscore::before{content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(70% 120% at 50% 0%, color-mix(in srgb,var(--primary) 26%,transparent), transparent 70%)} .rpteam{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center; position:relative;z-index:2;min-width:0} .rpteam b{font-family:var(--hfont);font-size:16px;font-weight:800;line-height:1.25; overflow-wrap:anywhere;color:var(--muted);transition:color .2s ease} .rpteam.won b{color:var(--text)} /* Crest plate. crest() returns either an or a .fb initials block, so the frame lives on a wrapper rather than on the crest itself. */ .rpcrest{ height:76px;width:76px;border-radius:20px;display:grid;place-items:center;flex-shrink:0; background:color-mix(in srgb,var(--bg) 55%,transparent); border:1px solid var(--border); transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease; } .rpcrest .crestbig{max-height:52px;max-width:52px;object-fit:contain} .rpcrest .fb{height:52px!important;width:52px!important;border-radius:14px;display:grid;place-items:center; font-family:var(--hfont);font-weight:900;color:#fff; background:linear-gradient(140deg,var(--lp,var(--primary)),color-mix(in srgb,var(--lp,var(--primary)) 45%,#000))} .rpteam{opacity:.72;transition:opacity .25s ease} .rpteam.won{opacity:1} .rpteam.won .rpcrest{ border-color:color-mix(in srgb,var(--accent) 55%,transparent); box-shadow:0 0 34px -10px color-mix(in srgb,var(--accent) 90%,transparent); transform:translateY(-2px)} .rpwin{font-size:9.5px;letter-spacing:.18em;font-weight:900;color:#0b0410;padding:3px 10px;border-radius:99px; background:linear-gradient(120deg,var(--accent),color-mix(in srgb,var(--accent) 55%,var(--primary)))} .rpnums{display:flex;align-items:center;gap:12px;position:relative;z-index:2;flex-wrap:wrap;justify-content:center} .rpnums .n{font-family:var(--hfont);font-size:clamp(40px,9vw,60px);font-weight:900;line-height:1; color:var(--muted);transition:color .2s ease} .rpnums .n.hi{background:linear-gradient(150deg,var(--text),var(--accent)); -webkit-background-clip:text;background-clip:text;color:transparent} .rpnums .dash{font-size:26px;opacity:.3;font-weight:300} .rpnums .ft{flex-basis:100%;text-align:center;margin-top:8px;font-size:9.5px;letter-spacing:.2em; font-weight:800;color:var(--muted)} .rplabel{display:flex;align-items:center;gap:11px;font-size:11px;letter-spacing:.14em;font-weight:800; text-transform:uppercase;color:var(--muted);margin-bottom:12px} .rplabel .line{flex:1;height:1px;background:linear-gradient(90deg,var(--border),transparent)} /* Two club panels. Each one owns its crest, its scorers and its assisters, so there is never any doubt who did what for whom. */ .rpsides{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:4px 26px 20px} .rpside{padding:15px 16px;border-radius:16px;border:1px solid var(--border); background:color-mix(in srgb,var(--bg) 42%,transparent);position:relative;overflow:hidden} .rpside::before{content:'';position:absolute;left:0;right:0;top:0;height:2px; background:color-mix(in srgb,var(--primary) 45%,transparent)} .rpside.won::before{background:linear-gradient(90deg,var(--accent),var(--primary))} .rpside.won{border-color:color-mix(in srgb,var(--accent) 30%,transparent)} .rpsidehead{display:flex;align-items:center;gap:9px;padding-bottom:11px;margin-bottom:12px; border-bottom:1px solid var(--border)} .rpsidehead b{font-family:var(--hfont);font-size:14px;font-weight:800;flex:1;min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rpsidehead .ct{font-family:var(--hfont);font-size:19px;font-weight:900;color:var(--accent); min-width:26px;text-align:right} .rpgroup{margin-bottom:12px} .rpgroup:last-child{margin-bottom:0} .rpgl{display:flex;align-items:center;gap:7px;font-size:9.5px;letter-spacing:.16em; text-transform:uppercase;font-weight:800;color:var(--muted);margin-bottom:8px} .rplist{display:flex;flex-direction:column;gap:6px;align-items:flex-start} .rpempty{font-size:11.5px;color:var(--muted);opacity:.55} .rpnone{font-size:12px;color:var(--muted);opacity:.6;padding:6px 0} .rpnone.big{text-align:center;padding:0 26px 24px;font-size:13px} .rpplayer{display:inline-flex;align-items:center;gap:9px;padding:6px 12px 6px 6px;border-radius:99px; cursor:pointer;max-width:100%; background:color-mix(in srgb,var(--primary) 12%,transparent); border:1px solid transparent;transition:.18s} .rpplayer:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent); background:color-mix(in srgb,var(--primary) 22%,transparent);transform:translateY(-1px)} .rpplayer .nm{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rpplayer .av,.rpplayer .fb{height:26px;width:26px;border-radius:50%;flex-shrink:0; display:grid;place-items:center;font-size:9px;font-weight:800;letter-spacing:0} .rpmvp .av,.rpmvp .fb{height:46px;width:46px;border-radius:50%;display:grid;place-items:center; font-size:15px;font-weight:800} /* Named .mult, not .x — `.modal .x` is the close button and was absolutely positioning this badge into the corner of the dialog. */ .rpplayer .mult{font-size:10.5px;font-weight:900;color:#0b0410;padding:2px 7px;border-radius:99px; background:var(--accent);letter-spacing:.02em;flex-shrink:0} .rpplayer .ic{display:inline-flex;align-items:center;flex-shrink:0;opacity:.9} .rpplayer .note{font-size:10.5px;color:var(--muted)} .rpmvp{display:flex;align-items:center;gap:14px;margin:0 26px 22px;padding:15px 18px;border-radius:16px; cursor:pointer;position:relative;overflow:hidden;transition:.2s; background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 20%,transparent), color-mix(in srgb,var(--primary) 14%,transparent)); border:1px solid color-mix(in srgb,var(--accent) 34%,transparent)} .rpmvp:hover{transform:translateY(-2px); box-shadow:0 14px 34px -20px color-mix(in srgb,var(--accent) 90%,transparent)} .rpmvp .crown{font-size:20px;color:var(--accent);text-shadow:0 0 14px var(--accent)} .rpmvp small{display:block;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase; color:var(--muted);font-weight:800} .rpmvp b{font-family:var(--hfont);font-size:17px;font-weight:800} .rpmvp .who{flex:1;min-width:0} .rpmvp .mvpclub{display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:99px; font-size:12px;font-weight:700;flex-shrink:0; background:color-mix(in srgb,var(--bg) 55%,transparent);border:1px solid var(--border)} .rpextra{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;padding:0 26px 20px} .rpwrap{display:flex;flex-wrap:wrap;gap:7px} .rpnote{margin:0 26px 18px;font-size:12.5px;color:var(--muted);line-height:1.6; padding:11px 14px;border-radius:12px;background:color-mix(in srgb,var(--bg) 50%,transparent)} .rpfoot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:14px 22px; border-top:1px solid var(--border);background:color-mix(in srgb,var(--bg) 40%,transparent)} .rpfoot .g{flex:1} .rpfoot .chip{padding:5px 11px;border-radius:99px;font-size:11px;color:var(--muted); background:color-mix(in srgb,var(--primary) 14%,transparent);border:1px solid var(--border); text-decoration:none;cursor:default} .rpfoot .chip.link{cursor:pointer;color:var(--accent); border-color:color-mix(in srgb,var(--accent) 34%,transparent)} .rpfoot .chip.link:hover{background:color-mix(in srgb,var(--accent) 18%,transparent)} @media(max-width:620px){ .rpscore{grid-template-columns:1fr;gap:14px;padding:24px 18px} .rpsides{grid-template-columns:1fr;gap:12px;padding-left:18px;padding-right:18px} .rpextra{padding-left:18px;padding-right:18px} .rpmvp{margin-left:18px;margin-right:18px;flex-wrap:wrap} .rpmvp .mvpclub{width:100%;justify-content:center} .res .meta{grid-template-columns:1fr;gap:8px} .res .rline.s2{justify-content:flex-start} .res .midbits{align-items:flex-start} } /* ---------- fixtures ---------- */ .fx{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;padding:16px 18px; border-radius:var(--radius);background:var(--card);border:1px solid var(--border);transition:.25s} .fx .vs{font-family:var(--hfont);font-weight:900;font-size:13px;color:var(--muted);padding:6px 14px; border-radius:9px;background:color-mix(in srgb,var(--primary) 16%,transparent)} .fx .when{grid-column:1/-1;display:flex;gap:12px;align-items:center;justify-content:center;padding-top:11px; margin-top:3px;border-top:1px solid var(--border);font-size:12px} .fx .when .live{color:var(--accent);font-weight:700} .fx .when code{font-family:ui-monospace,monospace;font-size:10.5px;color:var(--muted); background:color-mix(in srgb,var(--bg) 60%,transparent);padding:2px 7px;border-radius:6px;cursor:copy} .countdown{font-variant-numeric:tabular-nums;font-weight:700} /* ---------- transfers feed ---------- */ .tf{display:flex;align-items:center;gap:13px;padding:13px 16px;border-radius:13px;background:var(--card); border:1px solid var(--border);border-left:3px solid var(--ok);transition:.2s} .tf.out{border-left-color:var(--danger)} .tf img.av{height:36px;width:36px;border-radius:50%;object-fit:cover} .tf .arw{font-size:16px;color:var(--muted)} .tf time{margin-left:auto;font-size:11px;color:var(--muted);white-space:nowrap} /* ---------- misc ---------- */ .empty{padding:52px 20px;text-align:center;color:var(--muted);font-size:13.5px} .empty .ico{font-size:38px;opacity:.35;margin-bottom:12px} .kv{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--border);font-size:13px} .kv:last-child{border:none} .kv span{color:var(--muted)} .kv b{font-weight:700;font-family:ui-monospace,monospace;font-size:12px} .stat{padding:18px;border-radius:var(--radius);background:var(--card);border:1px solid var(--border);text-align:center} .stat b{display:block;font-family:var(--hfont);font-size:28px;font-weight:900; background:linear-gradient(135deg,var(--text),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent} .stat span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .sep{height:1px;background:var(--border);margin:22px 0} .hint{font-size:11.5px;color:var(--muted);line-height:1.6} code.mono{font-family:ui-monospace,monospace;font-size:11.5px;background:color-mix(in srgb,var(--bg) 65%,transparent); padding:2px 7px;border-radius:6px;color:var(--accent)} /* ---------- modal / login ---------- */ .ovl{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px; background:color-mix(in srgb,#000 72%,transparent);backdrop-filter:blur(9px);animation:fade .22s} @keyframes fade{from{opacity:0}to{opacity:1}} .modal{width:100%;max-width:520px;max-height:88vh;overflow:auto;padding:28px;border-radius:22px; background:linear-gradient(160deg,var(--bg2),var(--bg));border:1px solid var(--border); box-shadow:0 40px 90px -30px #000;animation:pop .28s cubic-bezier(.2,.8,.3,1)} .modal.wide{max-width:840px} @keyframes pop{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}} .modal h2{font-family:var(--hfont);font-size:21px;margin-bottom:6px} .modal p.sub{font-size:13px;color:var(--muted);margin-bottom:20px;line-height:1.6} .modal .x{position:absolute;top:14px;right:16px;cursor:pointer;color:var(--muted);font-size:20px;background:none;border:none;width:auto} /* ---------- toast ---------- */ #toasts{position:fixed;bottom:22px;right:22px;z-index:300;display:flex;flex-direction:column;gap:9px} .toast{padding:13px 18px;border-radius:12px;font-size:13px;font-weight:600;min-width:230px; background:linear-gradient(135deg,var(--bg2),var(--secondary));border:1px solid var(--border); border-left:3px solid var(--ok);box-shadow:0 16px 40px -18px #000;animation:slide .3s} .toast.err{border-left-color:var(--danger)} .toast.info{border-left-color:var(--primary)} @keyframes slide{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}} /* ---------- admin ---------- */ .adminlayout{display:grid;grid-template-columns:216px 1fr;gap:22px;align-items:start} .adminnav{position:sticky;top:calc(var(--nav-h) + 18px);display:flex;flex-direction:column;gap:3px; padding:9px;border-radius:var(--radius);background:var(--card);border:1px solid var(--border)} .adminnav button{padding:10px 13px;border-radius:9px;border:none;background:transparent;cursor:pointer; font-family:inherit;font-size:12.5px;font-weight:600;color:var(--muted);text-align:left;transition:.18s; display:flex;align-items:center;gap:9px} .adminnav button:hover{color:var(--text);background:color-mix(in srgb,var(--primary) 14%,transparent)} .adminnav button.on{color:#fff;background:linear-gradient(135deg,var(--primary),var(--glow))} .adminnav .grp{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted); padding:12px 13px 5px;opacity:.65;font-weight:700} .danger-zone{border-color:color-mix(in srgb,var(--danger) 40%,transparent)!important; background:color-mix(in srgb,var(--danger) 7%,var(--card))!important} .listrow{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:11px; background:color-mix(in srgb,var(--secondary) 55%,transparent);border:1px solid var(--border);margin-bottom:7px} .listrow .g{flex:1;min-width:0} .listrow .g b{font-size:13.5px;display:block} .listrow .g small{font-size:10.5px;color:var(--muted);font-family:ui-monospace,monospace} footer.foot{border-top:1px solid var(--border);padding:26px 0;margin-top:40px;text-align:center; font-size:12px;color:var(--muted);background:color-mix(in srgb,var(--secondary) 45%,transparent)} footer.foot a{color:var(--accent);text-decoration:none} @media(max-width:900px){ .adminlayout{grid-template-columns:1fr} .adminnav{position:static;flex-direction:row;overflow-x:auto} .brand small{display:none} .res,.fx{grid-template-columns:1fr auto 1fr;font-size:12px} .pcard{flex-wrap:wrap} } /* ---------- pager (roster · transfers · scanner) ---------- */ .pager{ display:flex;align-items:center;gap:12px;flex-wrap:wrap; margin:18px 0 4px;padding:12px 14px;border-radius:14px; background:color-mix(in srgb,var(--secondary) 55%,transparent); border:1px solid color-mix(in srgb,var(--primary) 18%,transparent); } .pager .pginfo{font-size:12px;color:var(--muted);letter-spacing:.03em} .pager .pgbtns{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto} .pgbtn{ min-width:36px;height:34px;padding:0 10px;border-radius:10px;cursor:pointer; font-family:var(--hfont);font-size:13px;font-weight:700;line-height:1; color:var(--muted);background:transparent; border:1px solid color-mix(in srgb,var(--primary) 24%,transparent); transition:transform .12s ease,background .12s ease,color .12s ease; } .pgbtn:hover:not(:disabled){ color:var(--text);transform:translateY(-1px); background:color-mix(in srgb,var(--primary) 26%,transparent); } .pgbtn.on{ background:linear-gradient(135deg,var(--primary),var(--glow)); border-color:transparent;color:#fff; } .pgbtn:disabled{opacity:.32;cursor:not-allowed;transform:none} .pgap{color:var(--muted);padding:0 2px;font-size:13px} /* per-page selector sitting next to a pager */ .pgsize{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)} .pgsize select{ padding:6px 9px;border-radius:9px;font-size:12px; background:color-mix(in srgb,var(--secondary) 80%,transparent); color:var(--text);border:1px solid color-mix(in srgb,var(--primary) 24%,transparent); } @media(max-width:600px){ .pager{gap:8px;padding:10px} .pager .pgbtns{margin-left:0;width:100%} .pgbtn{min-width:32px;height:31px;padding:0 8px;font-size:12px} } /* ================= per-competition page tint ================= */ /* Set by applyLeagueBackground(). Walking into a competition recolours the whole page, not just its buttons. --lg-tint controls how strong it is. */ body.leaguetint{ --bg: color-mix(in srgb, var(--lg-bg) calc(var(--lg-tint) * 100%), var(--sitebg,#07030c)); --bg2: color-mix(in srgb, var(--lg-bg2) calc(var(--lg-tint) * 100%), var(--sitebg2,#120a1f)); } #bg.tinted{ background:var(--bg); transition:background .5s ease } #bg.tinted .layer{ transition:filter .5s ease } body.leaguetint header.top{ background:linear-gradient(180deg, color-mix(in srgb,var(--lg-bg2) 88%,transparent), color-mix(in srgb,var(--lg-bg2) 55%,transparent)); border-bottom-color:color-mix(in srgb,var(--lg-primary) 30%,transparent); } body.leaguetint .lgbanner{ background:linear-gradient(120deg, color-mix(in srgb,var(--lg-primary) 30%,transparent), color-mix(in srgb,var(--lg-bg2) 70%,transparent)); } /* ======================== HOMEPAGE ======================== */ .hero{ position:relative;overflow:hidden;border-radius:26px;margin:18px 0 26px; border:1px solid var(--border); background: radial-gradient(90% 130% at 12% 0%, color-mix(in srgb,var(--primary) 42%,transparent), transparent 60%), radial-gradient(80% 120% at 92% 20%, color-mix(in srgb,var(--accent) 22%,transparent), transparent 55%), linear-gradient(150deg, color-mix(in srgb,var(--secondary) 94%,transparent), color-mix(in srgb,var(--bg2) 88%,transparent)); } .hero.sm{min-height:220px} .hero.md{min-height:330px} .hero.lg{min-height:440px} .hero .heroimg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.5} .hero .veil{position:absolute;inset:0; background:linear-gradient(180deg, transparent 10%, color-mix(in srgb,var(--bg) 88%,transparent) 100%)} .hero .inner{position:relative;z-index:2;padding:52px 44px;display:flex;flex-direction:column;justify-content:center;height:100%} .hero.center .inner{align-items:center;text-align:center} .hero .kicker{ display:inline-flex;align-items:center;gap:8px;align-self:flex-start; padding:6px 14px;border-radius:99px;font-size:11.5px;font-weight:800;letter-spacing:.16em; text-transform:uppercase;color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,transparent); border:1px solid color-mix(in srgb,var(--accent) 34%,transparent); } .hero.center .kicker{align-self:center} .hero h1{ font-family:var(--hfont);font-size:clamp(38px,6.4vw,76px);line-height:.98;margin:16px 0 0; font-weight:900;letter-spacing:-.02em; background:linear-gradient(120deg,var(--text),var(--accent)); -webkit-background-clip:text;background-clip:text;color:transparent; } .hero h2{font-size:clamp(15px,2vw,21px);font-weight:600;color:var(--muted);margin:12px 0 0} .hero p.blurb{max-width:620px;margin:16px 0 0;color:var(--muted);font-size:14.5px;line-height:1.65} .hero.center p.blurb{margin-left:auto;margin-right:auto} .hero .cta{display:flex;gap:11px;margin-top:26px;flex-wrap:wrap} /* The logo sits free on the hero — no glass panel behind it, and bigger so it reads as the centrepiece rather than a small badge in a box. */ .hero .herologo{height:150px;width:150px;border-radius:0;object-fit:contain; background:transparent;padding:0;border:none;filter:drop-shadow(0 10px 30px color-mix(in srgb,var(--primary) 45%,transparent))} /* Live-match card on the homepage — a bold, centred scoreline with a pulsing LIVE tag, shown while a ref has a /kickoff running. */ .livecard{ border:1px solid color-mix(in srgb,var(--lp,var(--primary)) 55%,transparent); background: radial-gradient(120% 140% at 50% 0%, color-mix(in srgb,var(--lp,var(--primary)) 24%,transparent), transparent 60%), color-mix(in srgb,var(--card) 92%,transparent); border-radius:20px;padding:20px 24px} .liverow{display:flex;align-items:center;justify-content:space-between;gap:16px} .liveside{display:flex;align-items:center;gap:10px;flex:1;font-size:16px;font-weight:700} .liveside:last-child{justify-content:flex-end;text-align:right} .liveside img{height:40px;width:40px;object-fit:contain} .liveside .livedot{height:40px;width:40px;border-radius:50%;flex:none; background:color-mix(in srgb,var(--lp,var(--primary)) 30%,transparent); border:1px solid color-mix(in srgb,var(--lp,var(--primary)) 50%,transparent)} .livescore{display:flex;flex-direction:column;align-items:center;gap:2px} .livescore b{font-family:var(--hfont);font-size:26px;font-weight:900;letter-spacing:.02em} .livescore span{font-size:10px;font-weight:900;letter-spacing:.22em;color:#fff; background:#ef4444;padding:3px 9px;border-radius:99px;animation:livepulse 1.6s ease-in-out infinite} @keyframes livepulse{0%,100%{opacity:1}50%{opacity:.55}} .livelinups{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px; border-top:1px solid var(--border);padding-top:14px} .livexi{min-width:0} .livexi-head{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; color:var(--muted);margin-bottom:6px;text-align:center} .livexi-list{display:flex;flex-direction:column;gap:3px} .livexi-row{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:2px 0} .livexi-pos{flex:none;min-width:34px;text-align:center;font-size:10px;font-weight:800;letter-spacing:.03em; color:var(--muted);background:color-mix(in srgb,var(--lp,var(--primary)) 14%,transparent); border-radius:6px;padding:1px 0} .livexi-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media(max-width:620px){ .livelinups{grid-template-columns:1fr} } .livetimeline{display:flex;flex-direction:column;gap:4px;margin-top:12px;border-top:1px solid var(--border);padding-top:10px} .livegoal{display:flex;align-items:center;gap:10px;font-size:13px;padding:4px 0} .liveside-tag{flex:none;min-width:96px;text-align:center;font-size:10.5px;font-weight:800;letter-spacing:.04em; color:var(--text);background:color-mix(in srgb,var(--lp,var(--primary)) 22%,transparent); padding:3px 8px;border-radius:99px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} @media(max-width:620px){ .liverow{flex-wrap:wrap;justify-content:center} .liveside{flex:0 0 100%;justify-content:center} .liveside:last-child{justify-content:center;text-align:center} } /* ==================== MATCH CENTRE (live watch view) ==================== */ /* Three "monitors": team 1 panel on the left, the stream + score in the middle, team 2 panel on the right. The stream mounts once and survives score updates, so a goal never cuts the video or resets your scroll. */ .modal.livecentermodal{max-width:1280px;padding:0;overflow:hidden; background:linear-gradient(170deg,color-mix(in srgb,var(--secondary) 97%,transparent), color-mix(in srgb,var(--bg2) 94%,transparent))} .modal.livecentermodal > h2{padding:16px 24px 0;font-size:17px;text-align:center} .modal.livecentermodal .x{top:16px;right:18px;z-index:5} .lc-stage{display:grid;grid-template-columns:280px 1fr 280px;gap:14px; padding:16px 24px 24px;align-items:start} /* ---- side panels (team 1 / team 2) ---- */ .lc-team-panel{padding:14px;border-radius:16px;background:var(--card); border:1px solid var(--border);display:flex;flex-direction:column;gap:10px} .lc-team-head{display:flex;align-items:center;gap:10px} .lc-team-logo{width:38px;height:38px;object-fit:contain;flex:none} .lc-team-head .crestmini{width:38px;height:38px} .lc-team-name{flex:1;min-width:0;font-size:14px;font-weight:800; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lc-team-score{font-family:var(--hfont);font-size:26px;font-weight:900;color:var(--muted)} .lc-team-score.won{color:var(--accent)} .lc-lineup-head{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase; color:var(--muted);border-bottom:1px solid var(--border);padding-bottom:6px} .lc-goals{display:flex;flex-direction:column;gap:5px} .lc-goal{display:flex;align-items:center;gap:8px;font-size:12.5px; padding:5px 8px;border-radius:10px;background:color-mix(in srgb,var(--primary) 12%,transparent)} .lc-goal-ic{font-size:13px} .lc-goal-who{min-width:0} .lc-goal-sc{font-weight:700;color:var(--text);display:block} .lc-goal-as{font-size:11px;color:var(--muted)} .lc-plys{display:flex;flex-direction:column;gap:3px;max-height:52vh;overflow-y:auto} .lc-ply{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:3px 2px} .lc-ply .av{width:24px;height:24px;border-radius:50%;object-fit:cover;flex:none} .lc-ply .av.fb{display:grid;place-items:center;font-size:9px;font-weight:800;color:#fff; background:linear-gradient(135deg,var(--primary),var(--accent))} .lc-ply-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lc-ply-pos{flex:none;font-size:9.5px;font-weight:800;letter-spacing:.04em;color:var(--muted); background:color-mix(in srgb,var(--primary) 16%,transparent);padding:1px 7px;border-radius:99px} /* ---- centre monitor ---- */ .lc-center{display:flex;flex-direction:column;gap:14px;min-width:0} .lc-stream{min-height:0} .lc-stream-box{position:relative;border-radius:14px;overflow:hidden;background:#000; border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);box-shadow:0 22px 52px -32px #000} .lc-frame{display:block;width:100%;aspect-ratio:16/9;border:0;background:#000} .lc-nostream{display:flex;align-items:center;gap:14px;padding:20px;border-radius:14px; background:color-mix(in srgb,var(--secondary) 70%,transparent);border:1px dashed var(--border)} .lc-nostream-ico{font-size:28px;line-height:1} .lc-nostream b{display:block;font-size:14px} .lc-nostream small{color:var(--muted);font-size:12px;display:block;margin:4px 0 10px;line-height:1.5} .lc-sheet{display:flex;align-items:center;justify-content:center;gap:14px} .lc-sheet-logo{width:48px;height:48px;object-fit:contain;flex:none; filter:drop-shadow(0 4px 12px rgba(0,0,0,.5))} .lc-sheet-logo.fb{display:grid;place-items:center;border-radius:12px;font-weight:900; color:#0b0410;background:linear-gradient(135deg,var(--primary),var(--accent))} .lc-sheet-n{font-family:var(--hfont);font-size:clamp(40px,7vw,64px);font-weight:900;line-height:1; background:linear-gradient(120deg,var(--text),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent} .lc-sheet-dash{font-size:28px;opacity:.35} .lc-sheet-live{font-size:10px;font-weight:900;letter-spacing:.22em;color:#fff;background:#ef4444; padding:3px 10px;border-radius:99px;animation:livepulse 1.6s ease-in-out infinite; width:fit-content;margin:0 auto} .lc-mvp{text-align:center} .lc-league{text-align:center} @media(max-width:900px){ .lc-stage{grid-template-columns:1fr;grid-template-areas:"center" "left" "right"} .lc-center{grid-area:center} .lc-team-panel:nth-of-type(1){grid-area:left} .lc-team-panel:nth-of-type(3){grid-area:right} .lc-plys{max-height:none} } @media(max-width:640px){ .lc-stage{grid-template-columns:1fr 1fr;grid-template-areas:"left right" "center center"} .lc-team-panel{min-width:0} } .homesec{margin:30px 0} .homesec > h3{ font-family:var(--hfont);font-size:19px;font-weight:800;margin:0 0 14px; display:flex;align-items:center;gap:11px; } .homesec > h3 .line{flex:1;height:1px;background:linear-gradient(90deg,var(--border),transparent)} .homesec > h3 a{font-size:12px;font-weight:700;color:var(--muted);text-decoration:none;letter-spacing:.04em} .homesec > h3 a:hover{color:var(--accent)} .bignum{ padding:22px 18px;border-radius:18px;text-align:center; background:linear-gradient(160deg, color-mix(in srgb,var(--primary) 16%,transparent), transparent); border:1px solid var(--border); } .bignum b{display:block;font-family:var(--hfont);font-size:34px;font-weight:900; background:linear-gradient(120deg,var(--text),var(--accent)); -webkit-background-clip:text;background-clip:text;color:transparent;line-height:1} .bignum span{display:block;margin-top:7px;font-size:10.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--muted);font-weight:700} .lgcard{ position:relative;overflow:hidden;padding:20px;border-radius:18px;cursor:pointer; border:1px solid var(--border);transition:transform .16s ease, box-shadow .16s ease; background:linear-gradient(150deg, color-mix(in srgb,var(--lp,var(--primary)) 26%,transparent), color-mix(in srgb,var(--secondary) 88%,transparent)); } .lgcard:hover{transform:translateY(-3px);box-shadow:0 16px 40px -18px var(--lp,var(--primary))} .lgcard b{display:block;font-family:var(--hfont);font-size:17px;font-weight:800} .lgcard small{display:block;margin-top:5px;color:var(--muted);font-size:12px} .lgcard .glowdot{position:absolute;right:-30px;top:-30px;height:120px;width:120px;border-radius:50%; background:var(--lp,var(--primary));filter:blur(46px);opacity:.55} .annbar{ display:flex;align-items:center;gap:12px;padding:12px 18px;border-radius:14px;margin:14px 0 0; font-size:13.5px;border:1px solid var(--border); background:color-mix(in srgb,var(--primary) 14%,transparent); } .annbar.success{background:color-mix(in srgb,#22c55e 15%,transparent);border-color:#22c55e55} .annbar.warn{background:color-mix(in srgb,#ffd400 15%,transparent);border-color:#ffd40055} .annbar.danger{background:color-mix(in srgb,#ef4444 15%,transparent);border-color:#ef444455} .annbar .x{margin-left:auto;cursor:pointer;opacity:.6;background:none;border:0;color:inherit;font-size:16px} .annbar .x:hover{opacity:1} .awardcard{ display:flex;align-items:center;gap:14px;padding:15px 17px;border-radius:16px; border:1px solid var(--border); background:linear-gradient(140deg, color-mix(in srgb,var(--awc,#ffd400) 18%,transparent), transparent); } .awardcard .ico{font-size:26px;line-height:1} .awardcard b{display:block;font-size:14px} .awardcard small{color:var(--muted);font-size:11.5px} /* result rows grouped by gameweek / stage */ .gwhead{ display:flex;align-items:center;gap:11px;margin:20px 0 10px; font-family:var(--hfont);font-size:13.5px;font-weight:800;letter-spacing:.05em; text-transform:uppercase;color:var(--muted); } .gwhead .chip{ padding:4px 12px;border-radius:99px;font-size:11.5px;color:var(--text); background:color-mix(in srgb,var(--primary) 26%,transparent); border:1px solid color-mix(in srgb,var(--primary) 40%,transparent); } .gwhead .line{flex:1;height:1px;background:linear-gradient(90deg,var(--border),transparent)} .gwhead .caret{cursor:pointer;user-select:none;transition:transform .18s ease} .gwhead .caret.closed{transform:rotate(-90deg)} @media(max-width:760px){ .hero .inner{padding:34px 22px} .hero.lg{min-height:340px} } /* ---------- toggle switch (admin) ---------- */ .sw{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:13px;user-select:none} .sw input{position:absolute;opacity:0;width:0;height:0} .sw span{ position:relative;height:22px;width:40px;border-radius:99px;flex-shrink:0; background:color-mix(in srgb,var(--muted) 26%,transparent); border:1px solid var(--border);transition:background .18s ease; } .sw span::after{ content:'';position:absolute;top:2px;left:2px;height:16px;width:16px;border-radius:50%; background:var(--muted);transition:transform .18s ease, background .18s ease; } .sw input:checked + span{background:color-mix(in srgb,var(--primary) 60%,transparent); border-color:color-mix(in srgb,var(--primary) 70%,transparent)} .sw input:checked + span::after{transform:translateX(18px);background:#fff} .sw input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px} /* ---------- layout knobs ---------- */ .wrap{max-width:var(--wrapw,1360px)} body.no-sticky header.top{position:relative} body.no-crests .crest,body.no-crests .crestmini{display:none} body.no-crests .rpcrest{display:none} body.no-avatars .av,body.no-avatars .avatar{display:none} body.card-solid .card{background:color-mix(in srgb,var(--secondary) 96%,transparent);backdrop-filter:none} body.card-outline .card{background:transparent;border-width:1px} /* ============ per-league architecture ============ Three stacked layers inside #bg, all inheriting the competition's colour so your palette is never touched: #texture a repeating architectural pattern, drifting slowly #skyline the landmark itself, anchored to the bottom #glow a warm horizon behind the landmark, so it reads as a scene Generated by wila-tests/gen_textures.py. */ #texture,#skyline,#glow{ position:absolute;left:0;right:0;pointer-events:none;opacity:0; color:var(--lg-primary,var(--primary)); will-change:opacity,transform; z-index:2; } /* A soft light sitting on the horizon, behind the landmark. */ #glow{ bottom:0;height:min(52vh,460px); background:radial-gradient(120% 100% at 50% 100%, color-mix(in srgb,var(--lg-accent,var(--accent)) 26%,transparent) 0%, color-mix(in srgb,var(--lg-primary,var(--primary)) 14%,transparent) 40%, transparent 72%); transition:opacity .8s ease; } #glow.on{opacity:1;animation:glowPulse 12s ease-in-out infinite} @keyframes glowPulse{ 0%,100%{opacity:.75;transform:translateY(0)} 50%{opacity:1;transform:translateY(-6px)} } #texture{ inset:0; transition:opacity .55s ease; -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 45%,transparent 88%); mask-image:linear-gradient(180deg,#000 0%,#000 45%,transparent 88%); } #texture.on{opacity:.14;animation:texDrift 160s linear infinite} @keyframes texDrift{ from{background-position:0 0} to{background-position:520px 300px} } /* The landmark. Repeated along the bottom so it reads as a city edge. */ #skyline{ bottom:0;height:min(42vh,400px); background-repeat:repeat-x; background-position:center bottom; background-size:auto 100%; transition:opacity .8s ease,transform .8s cubic-bezier(.22,.9,.3,1); transform:translateY(18px); -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 100%); mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 100%); filter:drop-shadow(0 0 22px color-mix(in srgb,var(--lg-accent,var(--accent)) 40%,transparent)); } #skyline.on{opacity:.42;transform:none;animation:skyBreathe 34s ease-in-out infinite} @keyframes skyBreathe{ 0%,100%{background-position:center bottom} 50%{background-position:calc(50% + 30px) bottom} } /* ============ per-league architecture — generated ============ Two layers: a repeating PATTERN and a landmark SKYLINE. Both inherit the competition's own colour, so your palette is untouched — only the shapes change. Regenerate with wila-tests/gen_textures.py. */ .tex-roman{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'180'%20height%3D'200'%20viewBox%3D'0%200%20180%20200'%3E%20%3Cg%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'1.9'%20stroke-linecap%3D'round'%3E%20%20%3Cpath%20d%3D'M14%20196V92a31%2031%200%200%201%2062%200v104'%2F%3E%20%20%3Cpath%20d%3D'M26%20196V96a19%2019%200%200%201%2038%200v100'%2F%3E%20%20%3Cpath%20d%3D'M45%2061v14M38%2066h14'%2F%3E%20%20%3Cpath%20d%3D'M4%2080h82M4%2086h82M10%2068h70'%2F%3E%20%20%3Cpath%20d%3D'M104%20196V92a31%2031%200%200%201%2062%200v104'%2F%3E%20%20%3Cpath%20d%3D'M116%20196V96a19%2019%200%200%201%2038%200v100'%2F%3E%20%20%3Cpath%20d%3D'M135%2061v14M128%2066h14'%2F%3E%20%20%3Cpath%20d%3D'M94%2080h82M94%2086h82M100%2068h70'%2F%3E%20%20%3Cpath%20d%3D'M14%20150h62M104%20150h62'%2F%3E%20%3C%2Fg%3E%20%3Cg%20fill%3D'%23ffffff'%20opacity%3D'.5'%3E%20%20%3Ccircle%20cx%3D'45'%20cy%3D'120'%20r%3D'2.4'%2F%3E%3Ccircle%20cx%3D'135'%20cy%3D'120'%20r%3D'2.4'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E")} .tex-moorish{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'140'%20height%3D'140'%20viewBox%3D'0%200%20140%20140'%3E%20%3Cg%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'1.5'%3E%20%20%3Cpath%20d%3D'M70%206l17%2017-17%2017-17-17z'%2F%3E%20%20%3Cpath%20d%3D'M70%20100l17%2017-17%2017-17-17z'%2F%3E%20%20%3Cpath%20d%3D'M6%2070l17-17%2017%2017-17%2017z'%2F%3E%20%20%3Cpath%20d%3D'M100%2070l17-17%2017%2017-17%2017z'%2F%3E%20%20%3Cpath%20d%3D'M70%2023l47%2047-47%2047-47-47z'%2F%3E%20%20%3Cpath%20d%3D'M70%2040l30%2030-30%2030-30-30z'%2F%3E%20%20%3Ccircle%20cx%3D'70'%20cy%3D'70'%20r%3D'11'%2F%3E%20%20%3Cpath%20d%3D'M70%2059a11%2011%200%200%201%200%2022%2011%2011%200%200%201%200-22'%2F%3E%20%3C%2Fg%3E%20%3Cg%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'1.2'%20opacity%3D'.75'%3E%20%20%3Cpath%20d%3D'M0%200l24%2024M140%200l-24%2024M0%20140l24-24M140%20140l-24-24'%2F%3E%20%20%3Cpath%20d%3D'M35%20128a18%2018%200%200%201%2036%200M69%20128a18%2018%200%200%201%2036%200'%2F%3E%20%20%3Cpath%20d%3D'M35%2012a18%2018%200%200%200%2036%200M69%2012a18%2018%200%200%200%2036%200'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E")} .tex-gothic{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'150'%20height%3D'200'%20viewBox%3D'0%200%20150%20200'%3E%20%3Cg%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'1.9'%20stroke-linecap%3D'round'%3E%20%20%3Cpath%20d%3D'M28%20196V86C28%2056%2048%2032%2075%2014c27%2018%2047%2042%2047%2072v110'%2F%3E%20%20%3Cpath%20d%3D'M48%20196V96c0-17%2011-31%2027-40%2016%209%2027%2023%2027%2040v100'%2F%3E%20%20%3Cpath%20d%3D'M75%2056v140'%2F%3E%20%20%3Cpath%20d%3D'M48%20130h54'%2F%3E%20%20%3Cpath%20d%3D'M62%2096a13%2013%200%200%201%2026%200%2013%2013%200%200%201-26%200'%2F%3E%20%20%3Cpath%20d%3D'M75%2083a13%2013%200%200%201%200%2026M62%2096a13%2013%200%200%200%2026%200'%2F%3E%20%20%3Cpath%20d%3D'M40%20196v-46a12%2012%200%200%201%2024%200v46'%2F%3E%20%20%3Cpath%20d%3D'M86%20196v-46a12%2012%200%200%201%2024%200v46'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E")} .tex-bauhaus{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'140'%20height%3D'140'%20viewBox%3D'0%200%20140%20140'%3E%20%3Cg%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'2'%3E%20%20%3Crect%20x%3D'12'%20y%3D'12'%20width%3D'48'%20height%3D'48'%2F%3E%20%20%3Ccircle%20cx%3D'102'%20cy%3D'36'%20r%3D'24'%2F%3E%20%20%3Cpath%20d%3D'M12%20116h48l-24-34z'%2F%3E%20%20%3Crect%20x%3D'78'%20y%3D'78'%20width%3D'48'%20height%3D'48'%2F%3E%20%20%3Cpath%20d%3D'M78%20102h48M102%2078v48'%2F%3E%20%20%3Cpath%20d%3D'M12%2070h116'%20stroke-width%3D'1'%2F%3E%20%3C%2Fg%3E%20%3Cg%20fill%3D'%23ffffff'%20opacity%3D'.35'%3E%20%20%3Crect%20x%3D'90'%20y%3D'90'%20width%3D'24'%20height%3D'24'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E")} .tex-artdeco{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'160'%20height%3D'110'%20viewBox%3D'0%200%20160%20110'%3E%20%3Cg%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%3E%20%20%3Cpath%20d%3D'M80%20104a48%2048%200%200%201%200-96%2048%2048%200%200%201%200%2096z'%2F%3E%20%20%3Cpath%20d%3D'M80%20104a34%2034%200%200%201%200-68%2034%2034%200%200%201%200%2068z'%2F%3E%20%20%3Cpath%20d%3D'M80%20104a20%2020%200%200%201%200-40%2020%2020%200%200%201%200%2040z'%2F%3E%20%20%3Cpath%20d%3D'M80%20104V8'%2F%3E%20%20%3Cpath%20d%3D'M46%20104a34%2034%200%200%201%2068%200'%2F%3E%20%20%3Cpath%20d%3D'M0%20106h160M0%204h160'%2F%3E%20%20%3Cpath%20d%3D'M18%20104V70M142%20104V70'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E")} .tex-stars{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'170'%20height%3D'170'%20viewBox%3D'0%200%20170%20170'%3E%20%3Cg%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'1.5'%3E%20%20%3Ccircle%20cx%3D'85'%20cy%3D'85'%20r%3D'62'%2F%3E%20%20%3Ccircle%20cx%3D'85'%20cy%3D'85'%20r%3D'46'%2F%3E%20%3C%2Fg%3E%20%3Cg%20fill%3D'%23ffffff'%3E%20%20%3Cpath%20d%3D'M85%2030l5.3%2016.3h17.1l-13.9%2010.1%205.3%2016.3L85%2062.6%2071.2%2072.7l5.3-16.3-13.9-10.1h17.1z'%20opacity%3D'.9'%2F%3E%20%20%3Cpath%20d%3D'M136%2085l3.6%2011h11.6l-9.4%206.8%203.6%2011-9.4-6.8-9.4%206.8%203.6-11-9.4-6.8h11.6z'%20opacity%3D'.55'%2F%3E%20%20%3Cpath%20d%3D'M34%2085l3.6%2011h11.6l-9.4%206.8%203.6%2011L34%20110l-9.4%206.8%203.6-11-9.4-6.8h11.6z'%20opacity%3D'.55'%2F%3E%20%20%3Cpath%20d%3D'M85%20130l3.2%209.8h10.3l-8.4%206.1%203.2%209.8-8.3-6-8.3%206%203.2-9.8-8.4-6.1h10.3z'%20opacity%3D'.4'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E")} .tex-rays{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'170'%20height%3D'170'%20viewBox%3D'0%200%20170%20170'%3E%20%3Cg%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%3E%20%20%3Cpath%20d%3D'M85%2022c22%2022%2030%2044%2022%2062-8%2018-30%2024-44%2012'%2F%3E%20%20%3Cpath%20d%3D'M85%2022c-22%2022-30%2044-22%2062%208%2018%2030%2024%2044%2012'%2F%3E%20%20%3Cellipse%20cx%3D'85'%20cy%3D'96'%20rx%3D'34'%20ry%3D'22'%2F%3E%20%20%3Cellipse%20cx%3D'85'%20cy%3D'96'%20rx%3D'20'%20ry%3D'13'%2F%3E%20%20%3Cpath%20d%3D'M85%20118v30M64%20140h42'%2F%3E%20%3C%2Fg%3E%20%3Cg%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'1.1'%20opacity%3D'.55'%3E%20%20%3Cpath%20d%3D'M0%2085h170M85%200v170'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E")} .tex-roman{background-size:210px 235px} .tex-moorish{background-size:140px 140px} .tex-gothic{background-size:165px 220px} .tex-bauhaus{background-size:145px 145px} .tex-artdeco{background-size:165px 114px} .tex-stars{background-size:135px 135px} .tex-rays{background-size:150px 150px} .tex-world-cup{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%20viewBox%3D%270%200%20240%20240%27%3E%20%3Cdefs%3E%20%3CradialGradient%20id%3D%27fl%27%20cx%3D%2750%25%27%20cy%3D%270%25%27%20r%3D%2770%25%27%3E%20%3Cstop%20offset%3D%270%25%27%20stop-color%3D%27%23fff8d0%27%20stop-opacity%3D%27.16%27%2F%3E%20%3Cstop%20offset%3D%2755%25%27%20stop-color%3D%27%23ffd700%27%20stop-opacity%3D%27.05%27%2F%3E%20%3Cstop%20offset%3D%27100%25%27%20stop-color%3D%27%23ffd700%27%20stop-opacity%3D%270%27%2F%3E%20%3C%2FradialGradient%3E%20%3ClinearGradient%20id%3D%27pitch%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%270%27%20y2%3D%271%27%3E%20%3Cstop%20offset%3D%270%25%27%20stop-color%3D%27%23ffffff%27%20stop-opacity%3D%27.09%27%2F%3E%20%3Cstop%20offset%3D%27100%25%27%20stop-color%3D%27%23ffffff%27%20stop-opacity%3D%27.02%27%2F%3E%20%3C%2FlinearGradient%3E%20%3C%2Fdefs%3E%20%3Crect%20width%3D%27240%27%20height%3D%27240%27%20fill%3D%27none%27%2F%3E%20%3Cellipse%20cx%3D%27120%27%20cy%3D%276%27%20rx%3D%27104%27%20ry%3D%2772%27%20fill%3D%27url%28%23fl%29%27%2F%3E%20%3Cellipse%20cx%3D%270%27%20cy%3D%27210%27%20rx%3D%2790%27%20ry%3D%2760%27%20fill%3D%27url%28%23fl%29%27%20opacity%3D%27.5%27%2F%3E%20%3Cellipse%20cx%3D%27240%27%20cy%3D%27210%27%20rx%3D%2790%27%20ry%3D%2760%27%20fill%3D%27url%28%23fl%29%27%20opacity%3D%27.5%27%2F%3E%20%3Cg%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-opacity%3D%27.13%27%20stroke-width%3D%271.2%27%3E%20%3Cpath%20d%3D%27M120%20150v78M120%2012v40%27%2F%3E%20%3Ccircle%20cx%3D%27120%27%20cy%3D%27120%27%20r%3D%2734%27%2F%3E%20%3Cpath%20d%3D%27M56%2086h128M56%20154h128%27%2F%3E%20%3Cpath%20d%3D%27M56%2086v68M184%2086v68%27%2F%3E%20%3Cpath%20d%3D%27M86%2060h68v26H86zM86%20154h68v26H86z%27%2F%3E%20%3C%2Fg%3E%20%3Cg%20fill%3D%27%23ffd700%27%20fill-opacity%3D%27.10%27%3E%20%3Ccircle%20cx%3D%27120%27%20cy%3D%27120%27%20r%3D%274%27%2F%3E%20%3C%2Fg%3E%20%3Cg%20fill%3D%27none%27%20stroke%3D%27%23ffd700%27%20stroke-opacity%3D%27.16%27%20stroke-width%3D%271%27%3E%20%3Cpath%20d%3D%27M20%2030l14%2014M220%2030l-14%2014M20%20210l14-14M220%20210l-14-14%27%2F%3E%20%3Cpath%20d%3D%27M4%20120h26M210%20120h26%27%2F%3E%20%3C%2Fg%3E%20%3Cg%20fill%3D%27url%28%23pitch%29%27%3E%20%3Crect%20x%3D%270%27%20y%3D%27232%27%20width%3D%27240%27%20height%3D%278%27%2F%3E%20%3Crect%20x%3D%270%27%20y%3D%270%27%20width%3D%27240%27%20height%3D%276%27%2F%3E%20%3C%2Fg%3E%20%3Cg%20fill%3D%27%23ffffff%27%3E%20%3Ccircle%20cx%3D%2734%27%20cy%3D%2752%27%20r%3D%271.5%27%20fill-opacity%3D%27.16%27%2F%3E%20%3Ccircle%20cx%3D%27206%27%20cy%3D%2768%27%20r%3D%271.2%27%20fill-opacity%3D%27.13%27%2F%3E%20%3Ccircle%20cx%3D%2752%27%20cy%3D%27196%27%20r%3D%271.4%27%20fill-opacity%3D%27.14%27%2F%3E%20%3Ccircle%20cx%3D%27196%27%20cy%3D%27184%27%20r%3D%271.6%27%20fill-opacity%3D%27.12%27%2F%3E%20%3Ccircle%20cx%3D%2714%27%20cy%3D%27140%27%20r%3D%271.1%27%20fill-opacity%3D%27.11%27%2F%3E%20%3Ccircle%20cx%3D%27228%27%20cy%3D%27150%27%20r%3D%271.3%27%20fill-opacity%3D%27.13%27%2F%3E%20%3Ccircle%20cx%3D%27150%27%20cy%3D%2726%27%20r%3D%271.2%27%20fill-opacity%3D%27.10%27%2F%3E%20%3Ccircle%20cx%3D%2788%27%20cy%3D%27214%27%20r%3D%271.2%27%20fill-opacity%3D%27.11%27%2F%3E%20%3C%2Fg%3E%20%3Cg%20fill%3D%27%23ffd700%27%20fill-opacity%3D%27.09%27%3E%20%3Crect%20x%3D%2744%27%20y%3D%2720%27%20width%3D%273%27%20height%3D%277%27%20transform%3D%27rotate%2824%2045%2023%29%27%2F%3E%20%3Crect%20x%3D%27192%27%20y%3D%27106%27%20width%3D%273%27%20height%3D%277%27%20transform%3D%27rotate%28-38%20193%20109%29%27%2F%3E%20%3Crect%20x%3D%2766%27%20y%3D%27170%27%20width%3D%273%27%20height%3D%277%27%20transform%3D%27rotate%2852%2067%20173%29%27%2F%3E%20%3Crect%20x%3D%27168%27%20y%3D%2742%27%20width%3D%273%27%20height%3D%277%27%20transform%3D%27rotate%28-14%20169%2045%29%27%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E")} .tex-world-cup{background-size:240px 240px} .tex-copa-america{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'140'%20height%20'140'%20viewBox%3D'0%200%20140%20140'%3E%20%3Cg%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'1.5'%3E%20%20%3Ccircle%20cx%3D'70'%20cy%20'70'%20r%3D'50'%2F%3E%20%20%3Ccircle%20cx%3D'70'%20cy%20'70'%20r%3D'35'%2F%3E%20%20%3Cpath%20d%3D'M70%2020v100M20%2070h100'%2F%3E%20%20%3Cpath%20d%3D'M35%2035l70%2070M105%2035l-70%2070'%2F%3E%20%20%3Cpath%20d%3D'M70%2025l8%2015h16l-13%2010%205%2016-14-10-14%2010%205-16-13-10h16z'%20fill%3D'%23ffffff'%20fill-opacity%3D'.3'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E")} .tex-copa-america{background-size:140px 140px} .tex-euros{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'160'%20height%20'160'%20viewBox%3D'0%200%20160%20160'%3E%20%3Cg%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'1.2'%3E%20%20%3Ccircle%20cx%3D'80'%20cy%20'80'%20r%3D'60'%2F%3E%20%20%3Ccircle%20cx%3D'80'%20cy%20'80'%20r%3D'45'%2F%3E%20%20%3Ccircle%20cx%3D'80'%20cy%20'80'%20r%3D'30'%2F%3E%20%3Cg%20fill%3D'%23ffffff'%20fill-opacity%3D'.5'%3E%20%20%3Cpath%20d%3D'M80%2040l4%2012h13l-11%208%204%2012-10-7-10%207%204-12-11-8h13z'%2F%3E%20%20%3Cpath%20d%3D'M110%2060l3%209h10l-8%206%203%209-7-5-7%205%203-9-8-6h10z'%20opacity%3D'.7'%2F%3E%20%20%3Cpath%20d%3D'M50%2060l3%209h10l-8%206%203%209-7-5-7%205%203-9-8-6h10z'%20opacity%3D'.7'%2F%3E%20%20%3Cpath%20d%3D'M110%20100l3%209h10l-8%206%203%209-7-5-7%205%203-9-8-6h10z'%20opacity%3D'.5'%2F%3E%20%20%3Cpath%20d%3D'M50%20100l3%209h10l-8%206%203%209-7-5-7%205%203-9-8-6h10z'%20opacity%3D'.5'%2F%3E%20%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E")} .tex-euros{background-size:160px 160px} .sky-roman{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'700'%20height%3D'320'%20viewBox%3D'0%200%20700%20320'%3E%20%3Cg%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'2.4'%20stroke-linejoin%3D'round'%3E%20%20%3Cpath%20d%3D'M18%20300V150C18%2096%2088%2058%20200%2058c60%200%20108%2010%20140%2026'%2F%3E%20%20%3Cpath%20d%3D'M340%2084c40%2014%2066%2034%2066%2058v158'%2F%3E%20%20%3Cpath%20d%3D'M406%20300V142c0-30%2044-52%20118-52%2078%200%20122%2026%20122%2058v152'%2F%3E%20%20%3Cpath%20d%3D'M18%20118h330M406%20128h240'%2F%3E%20%20%3Cpath%20d%3D'M18%20164h388M406%20174h240'%2F%3E%20%20%3Cpath%20d%3D'M18%20212h388M406%20220h240'%2F%3E%20%20%3Cpath%20d%3D'M18%20258h628'%2F%3E%20%20%3Cpath%20d%3D'M2%20300h696'%2F%3E%20%20%3Cpath%20d%3D'M40%20300v-40a14%2014%200%200%201%2028%200v40'%2F%3E%3Cpath%20d%3D'M84%20300v-40a14%2014%200%200%201%2028%200v40'%2F%3E%3Cpath%20d%3D'M128%20300v-40a14%2014%200%200%201%2028%200v40'%2F%3E%3Cpath%20d%3D'M172%20300v-40a14%2014%200%200%201%2028%200v40'%2F%3E%3Cpath%20d%3D'M216%20300v-40a14%2014%200%200%201%2028%200v40'%2F%3E%3Cpath%20d%3D'M260%20300v-40a14%2014%200%200%201%2028%200v40'%2F%3E%3Cpath%20d%3D'M304%20300v-40a14%2014%200%200%201%2028%200v40'%2F%3E%3Cpath%20d%3D'M348%20300v-40a14%2014%200%200%201%2028%200v40'%2F%3E%3Cpath%20d%3D'M392%20300v-40a14%2014%200%200%201%2028%200v40'%2F%3E%3Cpath%20d%3D'M436%20300v-40a14%2014%200%200%201%2028%200v40'%2F%3E%3Cpath%20d%3D'M480%20300v-40a14%2014%200%200%201%2028%200v40'%2F%3E%3Cpath%20d%3D'M524%20300v-40a14%2014%200%200%201%2028%200v40'%2F%3E%3Cpath%20d%3D'M568%20300v-40a14%2014%200%200%201%2028%200v40'%2F%3E%3Cpath%20d%3D'M612%20300v-40a14%2014%200%200%201%2028%200v40'%2F%3E%3Cpath%20d%3D'M40%20252v-38a14%2014%200%200%201%2028%200v38'%2F%3E%3Cpath%20d%3D'M84%20252v-38a14%2014%200%200%201%2028%200v38'%2F%3E%3Cpath%20d%3D'M128%20252v-38a14%2014%200%200%201%2028%200v38'%2F%3E%3Cpath%20d%3D'M172%20252v-38a14%2014%200%200%201%2028%200v38'%2F%3E%3Cpath%20d%3D'M216%20252v-38a14%2014%200%200%201%2028%200v38'%2F%3E%3Cpath%20d%3D'M260%20252v-38a14%2014%200%200%201%2028%200v38'%2F%3E%3Cpath%20d%3D'M304%20252v-38a14%2014%200%200%201%2028%200v38'%2F%3E%3Cpath%20d%3D'M348%20252v-38a14%2014%200%200%201%2028%200v38'%2F%3E%3Cpath%20d%3D'M392%20252v-38a14%2014%200%200%201%2028%200v38'%2F%3E%3Cpath%20d%3D'M436%20252v-38a14%2014%200%200%201%2028%200v38'%2F%3E%3Cpath%20d%3D'M480%20252v-38a14%2014%200%200%201%2028%200v38'%2F%3E%3Cpath%20d%3D'M524%20252v-38a14%2014%200%200%201%2028%200v38'%2F%3E%3Cpath%20d%3D'M568%20252v-38a14%2014%200%200%201%2028%200v38'%2F%3E%3Cpath%20d%3D'M612%20252v-38a14%2014%200%200%201%2028%200v38'%2F%3E%3Cpath%20d%3D'M40%20206v-36a14%2014%200%200%201%2028%200v36'%2F%3E%3Cpath%20d%3D'M84%20206v-36a14%2014%200%200%201%2028%200v36'%2F%3E%3Cpath%20d%3D'M128%20206v-36a14%2014%200%200%201%2028%200v36'%2F%3E%3Cpath%20d%3D'M172%20206v-36a14%2014%200%200%201%2028%200v36'%2F%3E%3Cpath%20d%3D'M216%20206v-36a14%2014%200%200%201%2028%200v36'%2F%3E%3Cpath%20d%3D'M260%20206v-36a14%2014%200%200%201%2028%200v36'%2F%3E%3Cpath%20d%3D'M304%20206v-36a14%2014%200%200%201%2028%200v36'%2F%3E%3Cpath%20d%3D'M348%20206v-36a14%2014%200%200%201%2028%200v36'%2F%3E%3Cpath%20d%3D'M392%20206v-36a14%2014%200%200%201%2028%200v36'%2F%3E%20%3C%2Fg%3E%20%3Cg%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'1.6'%20opacity%3D'.6'%3E%20%20%3Cpath%20d%3D'M40%2096h300M420%20106h210'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E")} .sky-moorish{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'760'%20height%3D'320'%20viewBox%3D'0%200%20760%20320'%3E%20%3Cg%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'2.4'%20stroke-linejoin%3D'round'%3E%20%20%3Cpath%20d%3D'M24%20300V116h104v184'%2F%3E%20%20%3Cpath%20d%3D'M24%20116h104'%2F%3E%20%20%3Cpath%20d%3D'M24%20116V96h104v20'%2F%3E%20%20%3Cpath%20d%3D'M28%2096V80h14v16M56%2096V80h14v16M84%2096V80h14v16M112%2096V80h12v16'%2F%3E%20%20%3Cpath%20d%3D'M52%20300v-76a24%2024%200%200%201%2048%200v76'%2F%3E%20%20%3Cpath%20d%3D'M128%20300V180h168v120'%2F%3E%20%20%3Cpath%20d%3D'M128%20180V164h168v16'%2F%3E%20%20%3Cpath%20d%3D'M132%20164v-14h12v14M164%20164v-14h12v14M196%20164v-14h12v14M228%20164v-14h12v14M260%20164v-14h12v14M288%20164v-14h8v14'%2F%3E%20%20%3Cpath%20d%3D'M296%20300V132h92v168'%2F%3E%20%20%3Cpath%20d%3D'M296%20132l46-38%2046%2038'%2F%3E%20%20%3Cpath%20d%3D'M320%20300v-58a22%2022%200%200%201%2044%200v58'%2F%3E%20%20%3Cpath%20d%3D'M388%20300V196h180v104'%2F%3E%20%20%3Cpath%20d%3D'M388%20196v-16h180v16'%2F%3E%20%20%3Cpath%20d%3D'M392%20180v-14h12v14M424%20180v-14h12v14M456%20180v-14h12v14M488%20180v-14h12v14M520%20180v-14h12v14M552%20180v-14h12v14'%2F%3E%20%20%3Cpath%20d%3D'M568%20300V104h128v196'%2F%3E%20%20%3Cpath%20d%3D'M568%20104l64-46%2064%2046'%2F%3E%20%20%3Cpath%20d%3D'M568%20104V86h128v18'%2F%3E%20%20%3Cpath%20d%3D'M598%20300v-92a34%2034%200%200%201%2068%200v92'%2F%3E%20%20%3Cpath%20d%3D'M696%20300V214h48v86'%2F%3E%20%20%3Cpath%20d%3D'M0%20302h760'%2F%3E%20%3C%2Fg%3E%20%3Cg%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'1.8'%3E%20%20%3Cpath%20d%3D'M148%20300v-62a19%2019%200%200%201%2038%200v62M196%20300v-62a19%2019%200%200%201%2038%200v62M244%20300v-62a19%2019%200%200%201%2038%200v62'%2F%3E%20%20%3Cpath%20d%3D'M406%20300v-52a17%2017%200%200%201%2034%200v52M452%20300v-52a17%2017%200%200%201%2034%200v52M498%20300v-52a17%2017%200%200%201%2034%200v52'%2F%3E%20%20%3Cpath%20d%3D'M342%2094V72M334%2080h16'%2F%3E%20%20%3Cpath%20d%3D'M632%2058V34M624%2044h16'%2F%3E%20%3C%2Fg%3E%20%3Cg%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'1.4'%20opacity%3D'.6'%3E%20%20%3Cpath%20d%3D'M52%20148h48M148%20210h134M406%20226h126M598%20140h68'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E")} .sky-gothic{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'760'%20height%3D'320'%20viewBox%3D'0%200%20760%20320'%3E%20%3Cg%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'2.3'%20stroke-linejoin%3D'round'%3E%20%20%3Cpath%20d%3D'M30%20300V120h92v180'%2F%3E%20%20%3Cpath%20d%3D'M30%20120l46-52%2046%2052'%2F%3E%20%20%3Cpath%20d%3D'M46%2068V44h60v24'%2F%3E%20%20%3Cpath%20d%3D'M122%20300V182h300v118'%2F%3E%20%20%3Cpath%20d%3D'M180%20182v-40l24-26%2024%2026v40'%2F%3E%20%20%3Cpath%20d%3D'M300%20182v-52l26-28%2026%2028v52'%2F%3E%20%20%3Cpath%20d%3D'M422%20300V150h74v150'%2F%3E%20%20%3Cpath%20d%3D'M422%20150l37-40%2037%2040'%2F%3E%20%20%3Cpath%20d%3D'M496%20300V196h130v104'%2F%3E%20%20%3Cpath%20d%3D'M626%20300V96h86v204'%2F%3E%20%20%3Cpath%20d%3D'M626%2096l43-56%2043%2056'%2F%3E%20%20%3Cpath%20d%3D'M655%2040V16h28v24'%2F%3E%20%20%3Cpath%20d%3D'M0%20302h760'%2F%3E%20%3C%2Fg%3E%20%3Cg%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'1.6'%3E%20%20%3Ccircle%20cx%3D'669'%20cy%3D'142'%20r%3D'26'%2F%3E%20%20%3Cpath%20d%3D'M669%20124v18l12%208'%2F%3E%20%20%3Cpath%20d%3D'M146%20300v-70a14%2014%200%200%201%2028%200v70M206%20300v-70a14%2014%200%200%201%2028%200v70M266%20300v-70a14%2014%200%200%201%2028%200v70M326%20300v-70a14%2014%200%200%201%2028%200v70M386%20300v-70a14%2014%200%200%201%2028%200v70'%2F%3E%20%20%3Cpath%20d%3D'M520%20300v-56a13%2013%200%200%201%2026%200v56M566%20300v-56a13%2013%200%200%201%2026%200v56'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E")} .sky-bauhaus{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'700'%20height%3D'290'%20viewBox%3D'0%200%20700%20290'%3E%20%3Cg%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'2.4'%20stroke-linejoin%3D'round'%3E%20%20%3Cpath%20d%3D'M170%20272V96h360v176'%2F%3E%20%20%3Cpath%20d%3D'M158%2096h384'%2F%3E%20%20%3Cpath%20d%3D'M170%2078h360v18H170z'%2F%3E%20%20%3Cpath%20d%3D'M292%2078V56h116v22'%2F%3E%20%20%3Cpath%20d%3D'M206%20272V128h26v144M262%20272V128h26v144M318%20272V128h26v144M374%20272V128h26v144M430%20272V128h26v144M468%20272V128h26v144'%2F%3E%20%20%3Cpath%20d%3D'M0%20274h700'%2F%3E%20%20%3Cpath%20d%3D'M40%20272V170h100v102M40%20170l50-30%2050%2030'%2F%3E%20%20%3Cpath%20d%3D'M560%20272V186h108v86M560%20186l54-34%2054%2034'%2F%3E%20%3C%2Fg%3E%20%3Cg%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'1.7'%3E%20%20%3Cpath%20d%3D'M318%2056c0-14%2014-22%2032-22s32%208%2032%2022'%2F%3E%20%20%3Cpath%20d%3D'M336%2034v-12M364%2034v-12'%2F%3E%20%20%3Ccircle%20cx%3D'350'%20cy%3D'20'%20r%3D'5'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E")} .sky-artdeco{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'760'%20height%3D'340'%20viewBox%3D'0%200%20760%20340'%3E%20%3Cg%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'2.5'%20stroke-linejoin%3D'round'%20stroke-linecap%3D'round'%3E%20%20%3Cpath%20d%3D'M296%20318C296%20318%20316%20246%20336%20186C352%20138%20366%20100%20374%2062'%2F%3E%20%20%3Cpath%20d%3D'M464%20318C464%20318%20444%20246%20424%20186C408%20138%20394%20100%20386%2062'%2F%3E%20%20%3Cpath%20d%3D'M374%2062h12'%2F%3E%20%20%3Cpath%20d%3D'M380%2062V30'%2F%3E%20%20%3Cpath%20d%3D'M380%2030v-14'%2F%3E%20%20%3Cpath%20d%3D'M310%20272h140'%2F%3E%20%20%3Cpath%20d%3D'M330%20208h100'%2F%3E%20%20%3Cpath%20d%3D'M348%20148h64'%2F%3E%20%20%3Cpath%20d%3D'M362%20104h36'%2F%3E%20%20%3Cpath%20d%3D'M310%20272c18-34%2042-52%2070-52s52%2018%2070%2052'%2F%3E%20%20%3Cpath%20d%3D'M0%20320h760'%2F%3E%20%3C%2Fg%3E%20%3Cg%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'1.5'%20opacity%3D'.7'%3E%20%20%3Cpath%20d%3D'M318%20296h124M338%20240h84M354%20176h52M366%20128h28'%2F%3E%20%20%3Cpath%20d%3D'M336%20272l24-64M424%20272l-24-64M352%20208l14-60M408%20208l-14-60'%2F%3E%20%3C%2Fg%3E%20%3Cg%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'2'%3E%20%20%3Cpath%20d%3D'M26%20318V222h142v96M26%20222l71-34%2071%2034'%2F%3E%20%20%3Cpath%20d%3D'M168%20318V250h96v68'%2F%3E%20%20%3Cpath%20d%3D'M496%20318V242h126v76M496%20242l63-30%2063%2030'%2F%3E%20%20%3Cpath%20d%3D'M622%20318V266h116v52'%2F%3E%20%20%3Cpath%20d%3D'M56%20222v-26M138%20222v-26M540%20242v-24'%2F%3E%20%3C%2Fg%3E%20%3Cg%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'1.4'%20opacity%3D'.55'%3E%20%20%3Cpath%20d%3D'M52%20262h32M110%20262h32M196%20282h36M528%20278h34M646%20292h38'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E")} .sky-stars{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'860'%20height%3D'320'%20viewBox%3D'0%200%20860%20320'%3E%20%3Cg%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'2.4'%20stroke-linejoin%3D'round'%3E%20%20%3Cpath%20d%3D'M110%20300c0-70%20140-118%20320-118s320%2048%20320%20118'%2F%3E%20%20%3Cpath%20d%3D'M150%20300c0-54%20126-92%20280-92s280%2038%20280%2092'%2F%3E%20%20%3Cpath%20d%3D'M196%20300c0-38%20110-66%20234-66s234%2028%20234%2066'%2F%3E%20%20%3Cpath%20d%3D'M110%20300V232c0-70%20140-118%20320-118s320%2048%20320%20118v68'%2F%3E%20%20%3Cpath%20d%3D'M0%20302h860'%2F%3E%20%20%3Cpath%20d%3D'M96%20300V150M96%20150l-24-14v-26h48v26z'%2F%3E%20%20%3Cpath%20d%3D'M764%20300V150M764%20150l-24-14v-26h48v26z'%2F%3E%20%20%3Cpath%20d%3D'M430%20114V64'%2F%3E%20%3C%2Fg%3E%20%3Cg%20fill%3D'%23ffffff'%20opacity%3D'.85'%3E%20%20%3Cpath%20d%3D'M430%2022l7.4%2022.8h24l-19.4%2014.1%207.4%2022.8L430%2067.6l-19.4%2014.1%207.4-22.8L398.6%2044.8h24z'%2F%3E%20%3C%2Fg%3E%20%3Cg%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'1.5'%20opacity%3D'.6'%3E%20%20%3Cpath%20d%3D'M240%20300v-52M320%20300v-62M400%20300v-66M480%20300v-66M560%20300v-62M640%20300v-52'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E")} .sky-rays{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'860'%20height%3D'300'%20viewBox%3D'0%200%20860%20300'%3E%20%3Cg%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'2.4'%20stroke-linejoin%3D'round'%3E%20%20%3Cpath%20d%3D'M80%20282c0-64%20156-108%20350-108s350%2044%20350%20108'%2F%3E%20%20%3Cpath%20d%3D'M130%20282c0-50%20140-84%20300-84s300%2034%20300%2084'%2F%3E%20%20%3Cpath%20d%3D'M186%20282c0-36%20122-62%20244-62s244%2026%20244%2062'%2F%3E%20%20%3Cpath%20d%3D'M80%20282V226c0-64%20156-108%20350-108s350%2044%20350%20108v56'%2F%3E%20%20%3Cpath%20d%3D'M0%20284h860'%2F%3E%20%20%3Cpath%20d%3D'M66%20282V142M66%20142l-22-13v-24h44v24z'%2F%3E%20%20%3Cpath%20d%3D'M794%20282V142M794%20142l-22-13v-24h44v24z'%2F%3E%20%3C%2Fg%3E%20%3Cg%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'2.2'%20stroke-linecap%3D'round'%3E%20%20%3Cpath%20d%3D'M430%20118c18%2018%2024%2036%2018%2050-6%2014-24%2019-35%2010'%2F%3E%20%20%3Cpath%20d%3D'M430%20118c-18%2018-24%2036-18%2050%206%2014%2024%2019%2035%2010'%2F%3E%20%20%3Cellipse%20cx%3D'430'%20cy%3D'168'%20rx%3D'27'%20ry%3D'17'%2F%3E%20%3C%2Fg%3E%20%3Cg%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'1.5'%20opacity%3D'.6'%3E%20%20%3Cpath%20d%3D'M220%20282v-48M300%20282v-56M380%20282v-60M460%20282v-60M540%20282v-56M620%20282v-48'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E")} /* Background layers hold still under reduced motion and background refreshes. */ body.no-motion #texture.on,body.no-motion #skyline.on{animation:none} body.no-motion #texture,body.no-motion #skyline{transition:none} body.quiet #texture,body.quiet #skyline{transition:none} /* ==================== EXTRA MOTION ==================== */ /* Competition pills lift and glow as you move across them. */ .tabs2 button{position:relative;overflow:hidden} .tabs2 button::before{ content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:radial-gradient(60% 100% at 50% 120%, color-mix(in srgb,var(--lp,var(--primary)) 55%,transparent),transparent 70%); opacity:0;transition:opacity .25s ease; } body.hoverfx .tabs2 button:hover::before{opacity:1} body.hoverfx .tabs2 button:hover{transform:translateY(-2px)} .tabs2 button.on::before{opacity:.85} /* The banner crest settles in rather than snapping. */ @keyframes crestIn{ from{opacity:0;transform:scale(.82) rotate(-6deg)} to{opacity:1;transform:none} } .lgbanner .crest,.lgbanner .fallback{animation:crestIn .5s cubic-bezier(.34,1.4,.5,1) both} /* Big numbers rise as they appear. */ @keyframes numRise{ from{opacity:0;transform:translateY(14px) scale(.9)} to{opacity:1;transform:none} } .bignum b,.rpnums .n{animation:numRise .55s cubic-bezier(.34,1.3,.5,1) both} /* Standings rows slide in from the left, in order. */ @keyframes rowIn{ from{opacity:0;transform:translateX(-12px)} to{opacity:1;transform:none} } table.tbl tbody tr{animation:rowIn .34s cubic-bezier(.22,.9,.3,1) both} /* Cards lift on hover with a soft coloured shadow. */ body.hoverfx .card{transition:transform .22s cubic-bezier(.22,.9,.3,1), box-shadow .22s ease,border-color .22s ease} body.hoverfx .card:hover{transform:translateY(-2px); box-shadow:0 18px 40px -28px var(--lg,var(--primary))} /* Crests give a little bounce on hover. */ body.hoverfx .crestmini{transition:transform .2s cubic-bezier(.34,1.5,.5,1)} body.hoverfx .teamcell:hover .crestmini, body.hoverfx .res:hover .crestmini{transform:scale(1.14) rotate(-4deg)} /* The winner badge on a match report pulses once. */ @keyframes winPulse{ 0%{transform:scale(.85);opacity:0} 55%{transform:scale(1.08);opacity:1} 100%{transform:scale(1);opacity:1} } .rpwin{animation:winPulse .55s cubic-bezier(.34,1.4,.5,1) .2s both} /* Champion panel trophy gets a slow shine. */ @keyframes trophyGlow{ 0%,100%{filter:drop-shadow(0 0 10px var(--accent))} 50%{filter:drop-shadow(0 0 22px var(--accent))} } .champ .ctrophy{animation:trophyGlow 3s ease-in-out infinite} body.no-motion .lgbanner .crest, body.no-motion .lgbanner .fallback, body.no-motion .bignum b, body.no-motion .rpnums .n, body.no-motion table.tbl tbody tr, body.no-motion .rpwin, body.no-motion .champ .ctrophy{animation:none!important} body.quiet .lgbanner .crest, body.quiet .lgbanner .fallback, body.quiet .bignum b, body.quiet .rpnums .n, body.quiet table.tbl tbody tr{animation:none!important} /* The landmark sits behind the page, so the content column must not paint over it. Cards keep their own translucent fill. */ #app,main#app,#app .wrap,#app .section{background:transparent} /* ==================== SURFACE POLISH ==================== With real artwork behind the page, the foreground needs to sit ON it — glass panels with a lit top edge, rather than flat boxes. */ .card{ position:relative; backdrop-filter:blur(14px) saturate(130%); -webkit-backdrop-filter:blur(14px) saturate(130%); background:linear-gradient(165deg, color-mix(in srgb,var(--secondary) 72%,transparent), color-mix(in srgb,var(--secondary) 88%,transparent)); box-shadow:0 20px 50px -34px rgba(0,0,0,.9), inset 0 1px 0 color-mix(in srgb,#fff 7%,transparent); } /* A hairline of the competition's colour along the top of every panel. */ .card::before{ content:'';position:absolute;left:14px;right:14px;top:0;height:1px;border-radius:2px; background:linear-gradient(90deg,transparent, color-mix(in srgb,var(--lp,var(--primary)) 55%,transparent),transparent); pointer-events:none; } body.card-solid .card::before,body.card-outline .card::before{display:none} /* The competition banner becomes a proper hero strip. */ .lgbanner{ position:relative;overflow:hidden;border-radius:calc(var(--radius) + 4px); padding:26px 28px; background: radial-gradient(90% 160% at 12% 0%, color-mix(in srgb,var(--lp,var(--primary)) 42%,transparent), transparent 62%), radial-gradient(70% 140% at 92% 30%, color-mix(in srgb,var(--la,var(--accent)) 20%,transparent), transparent 58%), linear-gradient(150deg, color-mix(in srgb,var(--secondary) 78%,transparent), color-mix(in srgb,var(--ls,var(--secondary)) 92%,transparent)); border:1px solid color-mix(in srgb,var(--lp,var(--primary)) 34%,transparent); box-shadow:0 26px 60px -40px var(--lg,var(--primary)); } .lgbanner h2{font-size:clamp(22px,3vw,30px);letter-spacing:-.01em} .lgbanner .crest,.lgbanner img.crest{ border-radius:16px;padding:6px; background:color-mix(in srgb,var(--bg) 45%,transparent); border:1px solid color-mix(in srgb,#fff 10%,transparent); box-shadow:0 0 30px -10px var(--la,var(--accent)); } /* Standings: clearer zebra, a lit leading edge, and a highlight on hover. */ table.tbl tbody tr{ background:color-mix(in srgb,var(--secondary) 52%,transparent); transition:background .18s ease,transform .18s ease; } table.tbl tbody tr:hover{ background:color-mix(in srgb,var(--lp,var(--primary)) 16%,transparent); transform:translateX(2px); } table.tbl tbody tr td:first-child{ position:relative;font-variant-numeric:tabular-nums;color:var(--muted);font-weight:700; } table.tbl thead th{ font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted); font-weight:800; } table.tbl tbody td.pts,table.tbl tbody tr td:nth-last-child(2){font-weight:800} /* Qualification zones read as coloured spines rather than flat tints. */ tr.q-ucl td:first-child::before, tr.q-uel td:first-child::before, tr.q-rel td:first-child::before{ content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0; } tr.q-ucl td:first-child::before{background:var(--lp,#3b82f6);box-shadow:0 0 12px -2px var(--lp,#3b82f6)} tr.q-uel td:first-child::before{background:#f59e0b;box-shadow:0 0 12px -2px #f59e0b} tr.q-rel td:first-child::before{background:#ef4444;box-shadow:0 0 12px -2px #ef4444} /* Competition pills get a frosted feel. */ .tabs2 button{ backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); background:color-mix(in srgb,var(--secondary) 62%,transparent); border:1px solid color-mix(in srgb,var(--lp,var(--primary)) 26%,transparent); } .tabs2 button.on{ background:linear-gradient(135deg, color-mix(in srgb,var(--lp,var(--primary)) 46%,transparent), color-mix(in srgb,var(--lp,var(--primary)) 20%,transparent)); border-color:color-mix(in srgb,var(--lp,var(--primary)) 70%,transparent); box-shadow:0 8px 26px -14px var(--lg,var(--primary)); } .tabs3{ backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); background:color-mix(in srgb,var(--secondary) 55%,transparent); border:1px solid color-mix(in srgb,var(--border) 90%,transparent); } /* Result rows lift off the artwork too. */ .res{ backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); background:linear-gradient(150deg, color-mix(in srgb,var(--secondary) 74%,transparent), color-mix(in srgb,var(--secondary) 88%,transparent)); box-shadow:0 16px 40px -32px rgba(0,0,0,.9); } /* The header floats rather than sitting flat. */ header.top{ box-shadow:0 10px 34px -26px rgba(0,0,0,.95); } /* ==================== MOTION ==================== Everything here is disabled by body.no-motion (the Effects tab and the OS reduced-motion setting) and by body.quiet (a background refresh). */ @keyframes viewIn{ from{opacity:0;transform:translateY(10px) scale(.995)} to{opacity:1;transform:none} } @keyframes fadeUp{ from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} } @keyframes popIn{ 0%{opacity:0;transform:translateY(8px) scale(.97)} 60%{opacity:1;transform:translateY(-2px) scale(1.005)} 100%{opacity:1;transform:none} } @keyframes sweep{ from{transform:translateX(-100%)} to{transform:translateX(100%)} } #app .section{animation:viewIn .34s cubic-bezier(.22,.9,.3,1) both} .lgbanner{animation:fadeUp .4s cubic-bezier(.22,.9,.3,1) both} .lgbanner::after{ content:'';position:absolute;inset:0;pointer-events:none; background:linear-gradient(105deg,transparent 34%, color-mix(in srgb,var(--la,var(--accent)) 12%,transparent) 50%,transparent 66%); animation:sweep 1s ease-out .1s 1 both; opacity:.7; } .stagger > *{animation:fadeUp .4s cubic-bezier(.22,.9,.3,1) both} .stagger > *:nth-child(1){animation-delay:.02s} .stagger > *:nth-child(2){animation-delay:.06s} .stagger > *:nth-child(3){animation-delay:.10s} .stagger > *:nth-child(4){animation-delay:.14s} .stagger > *:nth-child(5){animation-delay:.18s} .stagger > *:nth-child(6){animation-delay:.22s} .stagger > *:nth-child(7){animation-delay:.26s} .stagger > *:nth-child(n+8){animation-delay:.30s} .pop{animation:popIn .42s cubic-bezier(.22,.9,.3,1) both} .res{animation:fadeUp .34s cubic-bezier(.22,.9,.3,1) both} .res:nth-child(1){animation-delay:.02s} .res:nth-child(2){animation-delay:.05s} .res:nth-child(3){animation-delay:.08s} .res:nth-child(4){animation-delay:.11s} .res:nth-child(5){animation-delay:.14s} .res:nth-child(n+6){animation-delay:.17s} table.tbl tbody tr:nth-child(1){animation-delay:.02s} table.tbl tbody tr:nth-child(2){animation-delay:.04s} table.tbl tbody tr:nth-child(3){animation-delay:.06s} table.tbl tbody tr:nth-child(4){animation-delay:.08s} table.tbl tbody tr:nth-child(5){animation-delay:.10s} table.tbl tbody tr:nth-child(n+6){animation-delay:.12s} .tabs2 button.on{animation:popIn .3s cubic-bezier(.22,.9,.3,1) both} .tabs3 button.on{animation:popIn .26s cubic-bezier(.22,.9,.3,1) both} nav.tabs1 a.on::after{animation:sweep .5s ease-out 1 both} body.quiet nav.tabs1 a.on::after{animation:none} @keyframes ovlIn{from{opacity:0}to{opacity:1}} @keyframes modalIn{ from{opacity:0;transform:translateY(18px) scale(.97)} to{opacity:1;transform:none} } .ovl{animation:ovlIn .2s ease both} .modal{animation:modalIn .3s cubic-bezier(.22,.9,.3,1) both} .btie{animation:popIn .4s cubic-bezier(.22,.9,.3,1) both} .bcol:nth-child(1) .btie{animation-delay:.04s} .bcol:nth-child(2) .btie{animation-delay:.12s} .bcol:nth-child(3) .btie{animation-delay:.20s} .bcol:nth-child(4) .btie{animation-delay:.28s} .bignum{animation:popIn .5s cubic-bezier(.22,.9,.3,1) both} .bignum:nth-child(2){animation-delay:.05s} .bignum:nth-child(3){animation-delay:.10s} .bignum:nth-child(4){animation-delay:.15s} .bignum:nth-child(5){animation-delay:.20s} .bignum:nth-child(6){animation-delay:.25s} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} } /* ---- motion guards, last word ---- These sit at the end so nothing later can re-enable them. */ body.quiet .section, body.quiet #app .section, body.quiet .lgbanner, body.quiet .stagger > *, body.quiet .pop, body.quiet .res, body.quiet table.tbl tbody tr, body.quiet .btie, body.quiet .bignum, body.quiet .bignum b, body.quiet .rpnums .n, body.quiet .champ, body.quiet .lgbanner .crest, body.quiet .lgbanner .fallback, body.quiet .tabs2 button.on, body.quiet .tabs3 button.on{animation:none!important} body.quiet .lgbanner::after{display:none!important} body.quiet #texture,body.quiet #skyline,body.quiet #glow{transition:none!important} body.no-motion .section, body.no-motion #app .section, body.no-motion .lgbanner, body.no-motion .stagger > *, body.no-motion .pop, body.no-motion .res, body.no-motion table.tbl tbody tr, body.no-motion .btie, body.no-motion .bignum, body.no-motion .bignum b, body.no-motion .rpnums .n, body.no-motion .champ, body.no-motion .champ .ctrophy, body.no-motion .rpwin, body.no-motion .lgbanner .crest, body.no-motion .lgbanner .fallback, body.no-motion #texture.on, body.no-motion #skyline.on, body.no-motion #glow.on, body.no-motion .tabs2 button.on, body.no-motion .tabs3 button.on{animation:none!important} body.no-motion .lgbanner::after{display:none!important} /* ===================================================================== */ /* ================== ADMIN PANEL — REVAMPED SHELL =================== */ /* ===================================================================== */ /* A wider, calmer sidebar with a search box and collapsible groups. */ .adminlayout{grid-template-columns:250px 1fr} .adminnav{padding:12px;gap:2px;max-height:calc(100vh - var(--nav-h) - 40px);overflow-y:auto; scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--primary) 40%,transparent) transparent} .adminnav::-webkit-scrollbar{width:6px} .adminnav::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--primary) 40%,transparent);border-radius:8px} .adminnav button{padding:9px 12px;font-size:12.5px;border-radius:10px;position:relative} .adminnav button.on{box-shadow:0 6px 18px -8px var(--glow)} .adminnav button .cnt{margin-left:auto;font-size:10px;font-weight:800;padding:1px 7px;border-radius:99px; background:color-mix(in srgb,var(--primary) 26%,transparent);color:var(--text)} .adminnav button.on .cnt{background:rgba(255,255,255,.24);color:#fff} /* Sidebar search */ .navsearch{position:relative;margin-bottom:8px} .navsearch input{width:100%;padding:9px 11px 9px 30px;font-size:12.5px;border-radius:10px; background:color-mix(in srgb,var(--bg) 55%,transparent);border:1px solid var(--border);color:var(--text)} .navsearch::before{content:'⌕';position:absolute;left:10px;top:50%;transform:translateY(-50%); color:var(--muted);font-size:14px;pointer-events:none} /* Owner-only sections get a subtle gold key. */ .adminnav button.owner::after{content:'🔑';font-size:9px;opacity:.75;margin-left:4px} /* The admin page header */ .adminhead{display:flex;align-items:center;gap:16px;padding:20px 24px;border-radius:20px;margin-bottom:4px; background:linear-gradient(120deg,color-mix(in srgb,var(--primary) 26%,transparent), color-mix(in srgb,var(--bg2) 82%,transparent)); border:1px solid color-mix(in srgb,var(--primary) 26%,transparent)} .adminhead .seal{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;flex:none; font-family:var(--hfont);font-size:22px;font-weight:900;color:#fff; background:linear-gradient(135deg,var(--primary),var(--glow));box-shadow:0 10px 26px -10px var(--glow)} .adminhead h2{font-family:var(--hfont);font-size:21px;margin:0} .adminhead p{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.5} .badge.owner{background:linear-gradient(135deg,#ffd400,#ff9500);color:#1a1000;border:none;font-weight:800} /* Section header inside a panel */ .sechead{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap} .sechead h2{font-family:var(--hfont);font-size:19px;margin:0;flex:1} .sechead .sub{font-size:12px;color:var(--muted);width:100%;line-height:1.55;margin-top:-6px} /* small buttons used in dense lists */ .btn.sm{padding:6px 10px;font-size:11.5px;min-width:auto} .btn.danger{border-color:color-mix(in srgb,var(--danger) 45%,transparent);color:var(--danger)} .btn.danger:hover{background:color-mix(in srgb,var(--danger) 16%,transparent)} /* toggle switch */ .tgl{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;cursor:pointer;user-select:none} .tgl input{width:36px;height:20px;appearance:none;border-radius:99px;position:relative;cursor:pointer; background:color-mix(in srgb,var(--muted) 35%,transparent);border:none;transition:.2s;flex:none} .tgl input:checked{background:linear-gradient(135deg,var(--primary),var(--glow))} .tgl input::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%; background:#fff;transition:.2s} .tgl input:checked::after{transform:translateX(16px)} .tgl input:disabled{opacity:.45;cursor:not-allowed} /* ===================================================================== */ /* ====================== EMBED STUDIO =============================== */ /* ===================================================================== */ .embedlayout{display:grid;grid-template-columns:230px 1fr;gap:18px;align-items:start} .embednav{position:sticky;top:calc(var(--nav-h) + 18px);display:flex;flex-direction:column;gap:2px; padding:10px;border-radius:var(--radius);background:var(--card);border:1px solid var(--border); max-height:calc(100vh - var(--nav-h) - 40px);overflow-y:auto;scrollbar-width:thin} .embednav .grp{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted); padding:12px 10px 5px;opacity:.65;font-weight:700} .embednav button{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:9px;border:none; background:transparent;cursor:pointer;font-family:inherit;font-size:12px;font-weight:600; color:var(--muted);text-align:left;transition:.16s;width:100%} .embednav button:hover{color:var(--text);background:color-mix(in srgb,var(--primary) 13%,transparent)} .embednav button.on{color:#fff;background:linear-gradient(135deg,var(--primary),var(--glow))} .embednav .dot{width:9px;height:9px;border-radius:50%;flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.12)} .embednav .off{font-size:8.5px;font-weight:800;letter-spacing:.08em;padding:1px 5px;border-radius:5px; background:color-mix(in srgb,var(--danger) 30%,transparent);color:#fff} .embededit{display:grid;grid-template-columns:1fr 380px;gap:18px;align-items:start} .previewpane{position:sticky;top:calc(var(--nav-h) + 18px);padding:18px;border-radius:var(--radius); background:var(--card);border:1px solid var(--border)} .previewpane h3{font-family:var(--hfont);font-size:14px} .ef{margin-bottom:12px} .ef:last-child{margin-bottom:0} .ef .hint{margin-top:5px} /* placeholder chips */ .varchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px} .varchip{font-family:ui-monospace,monospace;font-size:11px;padding:4px 9px;border-radius:7px;cursor:pointer; background:color-mix(in srgb,var(--primary) 15%,transparent);color:var(--accent); border:1px solid color-mix(in srgb,var(--primary) 26%,transparent);transition:.15s} .varchip:hover{background:color-mix(in srgb,var(--primary) 30%,transparent);transform:translateY(-1px)} /* ---- a faithful Discord embed preview ---- */ .dpreview{background:#313338;border-radius:10px;padding:14px;font-size:13.5px;line-height:1.45; color:#dbdee1;font-family:'gg sans','Noto Sans',system-ui,sans-serif} .dmsg{margin-bottom:8px;color:#dbdee1;word-break:break-word} .dembed{display:flex;gap:12px;background:#2b2d31;border-left:4px solid #7c3aed;border-radius:4px; padding:12px 16px 12px 12px;max-width:100%} .dinner{flex:1;min-width:0} .dauthor{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:#f2f3f5;margin-bottom:8px} .dauthor img{width:24px;height:24px;border-radius:50%;object-fit:cover} .dtitle{font-size:15px;font-weight:600;color:#f2f3f5;margin-bottom:8px;word-break:break-word} .ddesc{font-size:13.5px;color:#dbdee1;margin-bottom:8px;word-break:break-word;white-space:normal} .dfields{display:flex;flex-wrap:wrap;gap:8px 12px;margin:8px 0} .dfield{flex:1 1 100%;min-width:0} .dfield.inline{flex:1 1 30%;min-width:110px} .dfname{font-size:12.5px;font-weight:700;color:#f2f3f5;margin-bottom:2px;word-break:break-word} .dfval{font-size:13px;color:#dbdee1;word-break:break-word} .dthumb{width:72px;height:72px;border-radius:6px;object-fit:cover;flex:none} .dimage{max-width:100%;border-radius:6px;margin-top:10px;display:block} .dfooter{display:flex;align-items:center;gap:7px;font-size:11.5px;color:#949ba4;margin-top:9px} .dfooter img{width:18px;height:18px;border-radius:50%;object-fit:cover} .dpreview code{background:#1e1f22;padding:1px 4px;border-radius:3px;font-size:12px; font-family:ui-monospace,monospace} .dmention{background:rgba(88,101,242,.3);color:#c9cdfb;padding:0 2px;border-radius:3px} .dmeta{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px} @media(max-width:1150px){ .embededit{grid-template-columns:1fr} .previewpane{position:static} } @media(max-width:900px){ .embedlayout{grid-template-columns:1fr} .embednav{position:static;flex-direction:row;overflow-x:auto;max-height:none} .embednav .grp{display:none} .adminnav{max-height:none} .adminhead{flex-wrap:wrap} } /* ===================================================================== */ /* ========================== AWARDS TAB ============================= */ /* ===================================================================== */ .awardsbanner .fallback{font-size:26px} .awstat{margin-left:auto;text-align:right} .awstat b{display:block;font-family:var(--hfont);font-size:26px;font-weight:900;color:var(--accent)} .awstat span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} /* tinted 2nd tabs, one colour per honour */ .nav2 a[style*="--tabc"].on{ background:linear-gradient(135deg,var(--tabc,var(--primary)),color-mix(in srgb,var(--tabc,var(--primary)) 55%,#000)); border-color:transparent;color:#fff} .awsec{font-family:var(--hfont);font-size:15px;margin:26px 0 14px;display:flex;align-items:center;gap:12px} .awsec::after{content:'';flex:1;height:1px;background:var(--border)} .awgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px} /* ---- the big trophy card ---- */ .awbig{position:relative;overflow:hidden;text-align:center;padding:26px 18px 20px;border-radius:20px; background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb,var(--awc) 30%,transparent), transparent 62%), linear-gradient(170deg,var(--bg2),var(--bg)); border:1px solid color-mix(in srgb,var(--awc) 38%,transparent); box-shadow:0 18px 44px -26px color-mix(in srgb,var(--awc) 80%,#000); transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s;cursor:pointer} .awbig:hover{transform:translateY(-4px); box-shadow:0 26px 60px -26px color-mix(in srgb,var(--awc) 90%,#000)} .awbig .shine{position:absolute;inset:0;pointer-events:none; background:linear-gradient(115deg,transparent 38%,color-mix(in srgb,var(--awc) 22%,transparent) 50%,transparent 62%); transform:translateX(-120%);transition:transform .7s ease} .awbig:hover .shine{transform:translateX(120%)} .awbig .trophy{font-size:34px;display:block;filter:drop-shadow(0 4px 12px color-mix(in srgb,var(--awc) 70%,transparent))} .awbig .ttl{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--awc); font-weight:800;margin-top:8px} .awbig .face{width:64px;height:64px;border-radius:50%;object-fit:cover;margin:12px auto 10px;display:block; border:2px solid color-mix(in srgb,var(--awc) 60%,transparent); box-shadow:0 8px 22px -10px color-mix(in srgb,var(--awc) 90%,#000)} .awbig .face.fb{display:grid;place-items:center;font-family:var(--hfont);font-weight:900;font-size:20px; background:color-mix(in srgb,var(--awc) 20%,var(--secondary));color:var(--text)} .awbig .who{display:block;font-family:var(--hfont);font-size:16px;font-weight:800} .awbig .sub{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:7px; font-size:11.5px;color:var(--muted)} .awbig .sub span{display:inline-flex;align-items:center;gap:5px} .awbig .sub .sn{padding:2px 9px;border-radius:99px;font-weight:700; background:color-mix(in srgb,var(--awc) 18%,transparent);color:var(--awc)} .awbig .note{font-size:11.5px;color:var(--muted);margin-top:10px;line-height:1.5;font-style:italic} /* ---- category tile on the Hall of Fame ---- */ .awcat{display:flex;align-items:center;gap:13px;padding:15px 16px;border-radius:16px;text-decoration:none; background:var(--card);border:1px solid var(--border);transition:.18s;color:var(--text)} .awcat:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--awc) 55%,transparent); background:color-mix(in srgb,var(--awc) 8%,var(--card))} .awcat .ico{font-size:24px;width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:13px; background:color-mix(in srgb,var(--awc) 16%,transparent)} .awcat .meta{flex:1;min-width:0} .awcat .meta b{display:block;font-size:13.5px} .awcat .meta small{font-size:11px;color:var(--muted);display:block;margin-top:2px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .awcat .count{font-family:var(--hfont);font-size:18px;font-weight:900;color:var(--awc)} /* ---- roll of honour ---- */ .awroll{display:flex;flex-direction:column;gap:6px} .awrow{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px; background:color-mix(in srgb,var(--secondary) 50%,transparent);border:1px solid var(--border); transition:.15s} .awrow:hover{background:color-mix(in srgb,var(--primary) 12%,transparent);transform:translateX(3px)} .awrow .sn{font-family:var(--hfont);font-size:11px;font-weight:800;letter-spacing:.05em;color:var(--muted); min-width:82px;flex:none} .awrow .g{flex:1;min-width:0} .awrow .g b{display:block;font-size:13.5px} .awrow .g small{font-size:11px;color:var(--muted)} .awrow .ico{font-size:17px;flex:none} @media(max-width:600px){ .awgrid{grid-template-columns:1fr 1fr;gap:10px} .awbig{padding:20px 12px 16px} .awbig .face{width:52px;height:52px} .awrow .sn{min-width:64px;font-size:10px} } /* ---------- public budgets table ---------- */ .budlist{display:flex;flex-direction:column;gap:6px} .budrow{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;cursor:pointer; background:color-mix(in srgb,var(--secondary) 50%,transparent);border:1px solid var(--border);transition:.15s} .budrow:hover{background:color-mix(in srgb,var(--primary) 12%,transparent);transform:translateX(3px)} .budrow .rk{font-family:var(--hfont);font-size:13px;font-weight:900;color:var(--muted); min-width:30px;text-align:center;flex:none} .budrow .g{flex:0 0 190px;min-width:0} .budrow .g b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .budrow .g small{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden; text-overflow:ellipsis;display:block} .budrow .bar{flex:1;height:8px;border-radius:99px;min-width:60px; background:color-mix(in srgb,var(--bg) 60%,transparent);overflow:hidden} .budrow .bar i{display:block;height:100%;border-radius:99px; background:linear-gradient(90deg,var(--primary),var(--accent));transition:width .5s cubic-bezier(.2,.8,.3,1)} .budrow .amt{font-family:ui-monospace,monospace;font-size:12.5px;font-weight:700;color:var(--accent); min-width:110px;text-align:right;flex:none} @media(max-width:700px){ .budrow .bar{display:none} .budrow .g{flex:1} } /* ===================================================================== */ /* ============ ADMIN PANEL — OVERHAUL (v2 shell) ==================== */ /* ===================================================================== */ .adminmeta{display:flex;align-items:center;gap:10px;flex-wrap:wrap} /* "Jump to…" command palette button */ .cmdkbtn{display:inline-flex;align-items:center;gap:9px;padding:8px 12px;border-radius:10px;cursor:pointer; font-family:inherit;font-size:12px;font-weight:600;color:var(--muted); background:color-mix(in srgb,var(--bg) 55%,transparent); border:1px solid var(--border);transition:.16s} .cmdkbtn:hover{color:var(--text);border-color:color-mix(in srgb,var(--primary) 50%,transparent); background:color-mix(in srgb,var(--primary) 12%,transparent)} .cmdkbtn kbd{font-family:ui-monospace,monospace;font-size:10px;font-weight:700;padding:2px 6px;border-radius:5px; background:color-mix(in srgb,var(--primary) 22%,transparent);color:var(--text);border:none} /* live status strip */ .adminstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(122px,1fr));gap:9px;margin-top:14px} .astat{padding:11px 14px;border-radius:13px;background:var(--card); border:1px solid var(--border);border-left:3px solid var(--ac,var(--primary));transition:.16s} .astat.click{cursor:pointer} .astat.click:hover{transform:translateY(-2px); background:color-mix(in srgb,var(--ac) 10%,var(--card)); border-color:color-mix(in srgb,var(--ac) 45%,transparent)} .astat span{display:block;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)} .astat b{display:block;font-family:var(--hfont);font-size:17px;font-weight:800;color:var(--ac);margin-top:3px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* breadcrumbs */ .crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--muted); padding:0 2px 4px} .crumbs b{color:var(--text);font-size:12.5px} .crumbs .sep{opacity:.45} /* collapsible sidebar groups */ .adminnav .navlist{display:flex;flex-direction:column;gap:2px} .adminnav button.grp{display:flex;align-items:center;gap:7px;width:100%;padding:11px 11px 5px; background:none;border:none;cursor:pointer;text-align:left; font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:700; font-family:inherit;opacity:.7;transition:.15s} .adminnav button.grp:hover{opacity:1;color:var(--text)} .adminnav button.grp .car{font-size:9px;transition:transform .18s} .adminnav button.grp.shut .car{transform:rotate(-90deg)} .adminnav button.grp .n{margin-left:auto;font-size:9px;opacity:.6;letter-spacing:0} .adminnav button.navitem{width:100%} /* command palette */ .modal.palette{max-width:560px;padding:20px} .palinput{width:100%;padding:13px 15px;font-size:14.5px;border-radius:12px; background:color-mix(in srgb,var(--bg) 60%,transparent);border:1px solid var(--border);color:var(--text)} .palinput:focus{outline:none;border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 22%,transparent)} .pallist{margin-top:12px;max-height:min(46vh,380px);overflow-y:auto;display:flex;flex-direction:column;gap:3px; scrollbar-width:thin} .palrow{display:flex;align-items:center;gap:11px;width:100%;padding:10px 13px;border-radius:10px;cursor:pointer; background:transparent;border:none;font-family:inherit;font-size:13px;color:var(--muted);text-align:left; transition:.12s} .palrow.on{background:linear-gradient(135deg,var(--primary),var(--glow));color:#fff} .palrow .lbl{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .palrow .grp{font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.6} .palrow .key{font-size:11px} @media(max-width:700px){ .adminstrip{grid-template-columns:repeat(auto-fit,minmax(98px,1fr))} .cmdkbtn kbd{display:none} } /* ===================================================================== */ /* ===================== SITE POLISH PASS ============================ */ /* ===================================================================== */ /* --- consistent section headers across every admin page --- */ .sechead{margin-bottom:18px} .sechead h2{font-family:var(--hfont);font-size:20px;font-weight:800;margin:0;letter-spacing:-.01em} .sechead .sub{font-size:12.5px;color:var(--muted);line-height:1.6;margin-top:5px;max-width:74ch} /* --- focus states: keyboard users could not see where they were --- */ :where(a,button,input,select,textarea,[tabindex]):focus-visible{ outline:2px solid var(--primary);outline-offset:2px;border-radius:8px} .adminnav button:focus-visible,.embednav button:focus-visible{outline-offset:-2px} /* --- inputs: unify height, remove the jump on focus --- */ input,select,textarea{transition:border-color .16s,box-shadow .16s,background .16s} input:focus,select:focus,textarea:focus{ border-color:color-mix(in srgb,var(--primary) 70%,transparent); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent);outline:none} input:disabled,select:disabled,textarea:disabled{opacity:.5;cursor:not-allowed} input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--muted) 75%,transparent)} /* --- buttons: a real pressed state and a disabled state --- */ .btn{transition:transform .12s cubic-bezier(.2,.8,.3,1),background .16s,border-color .16s,box-shadow .16s} .btn:active:not(:disabled){transform:translateY(1px) scale(.985)} .btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important} .btn.pri:hover:not(:disabled){box-shadow:0 8px 22px -10px var(--glow)} /* --- cards: settle the hover so pages do not shimmer --- */ .card{transition:border-color .18s,background .18s,box-shadow .18s} /* --- empty states: give them presence instead of a bare line --- */ .empty{display:flex;flex-direction:column;align-items:center;gap:6px} .empty .ico{font-size:40px;opacity:.3;margin-bottom:6px} /* --- tables scroll on small screens rather than overflowing --- */ .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch; scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--primary) 40%,transparent) transparent} /* --- long IDs and names must never blow out a row --- */ .listrow .g b,.listrow .g small{overflow-wrap:anywhere} /* --- 2nd/3rd tab strips scroll instead of wrapping into a wall --- */ .nav2,.nav3{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch} .nav2::-webkit-scrollbar,.nav3::-webkit-scrollbar{display:none} .nav2 a,.nav3 a{white-space:nowrap;flex:none} /* --- skeleton shimmer for anything still loading --- */ .skel{position:relative;overflow:hidden;border-radius:10px; background:color-mix(in srgb,var(--secondary) 60%,transparent);min-height:14px} .skel::after{content:'';position:absolute;inset:0;transform:translateX(-100%); background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--text) 8%,transparent),transparent); animation:shim 1.3s infinite} @keyframes shim{to{transform:translateX(100%)}} /* --- clean tooltips --- */ .tipwrap{display:inline-flex;position:relative;align-items:center} [data-tip]{position:relative} [data-tip]::after{ content:attr(data-tip); position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%) scale(.96); background:var(--bg2);color:var(--text);border:1px solid var(--border); padding:6px 11px;border-radius:9px;font-size:12px;line-height:1.45; z-index:120;box-shadow:0 10px 30px rgba(0,0,0,.55);opacity:0;pointer-events:none; transition:opacity .12s ease,transform .12s ease;max-width:280px;width:max-content;text-align:center; } [data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;transform:translateX(-50%) scale(1)} /* --- toast stack should not cover the whole screen on mobile --- */ @media(max-width:520px){ #toasts{left:12px;right:12px;bottom:12px} .toast{min-width:0;width:100%} } /* --- respect the OS reduced-motion setting --- */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important} .awbig .shine{display:none} } /* --- print: let someone print a table cleanly --- */ @media print{ header.top,.adminnav,.nav2,.nav3,#toasts,footer.foot,.btn{display:none!important} body,.card{background:#fff!important;color:#000!important;border-color:#ccc!important} } /* --- skip link: keyboard users can jump past the nav --- */ .skiplink{position:absolute;left:-9999px;top:8px;z-index:400;padding:10px 16px;border-radius:10px; background:var(--primary);color:#fff;font-weight:700;font-size:13px;text-decoration:none} .skiplink:focus{left:12px} /* ===================================================================== */ /* ============== TRANSFER MARKET + SHARED UI PRIMITIVES ============= */ /* ===================================================================== */ /* window state banner */ .winbanner{display:flex;align-items:center;gap:13px;padding:13px 16px;border-radius:14px;margin-bottom:16px; background:var(--card);border:1px solid var(--border);border-left:3px solid var(--wc,var(--primary))} .winbanner.ok{--wc:var(--ok)} .winbanner.warn{--wc:var(--accent)} .winbanner.danger{--wc:var(--danger)} .winbanner .dot{width:9px;height:9px;border-radius:50%;background:var(--wc);flex:none; box-shadow:0 0 0 4px color-mix(in srgb,var(--wc) 22%,transparent)} .winbanner .g{flex:1;min-width:0} .winbanner .g b{display:block;font-size:13.5px} .winbanner .g small{font-size:11.5px;color:var(--muted)} /* mode switcher */ .modeswitch{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:9px;margin-bottom:14px} .modebtn{text-align:left;padding:13px 15px;border-radius:14px;cursor:pointer;font-family:inherit; background:var(--card);border:1px solid var(--border);color:var(--muted);transition:.16s} .modebtn:hover{border-color:color-mix(in srgb,var(--primary) 45%,transparent);color:var(--text)} .modebtn.on{border-color:transparent;color:#fff; background:linear-gradient(135deg,var(--primary),var(--glow)); box-shadow:0 10px 26px -14px var(--glow)} .modebtn b{display:block;font-size:13.5px;margin-bottom:3px} .modebtn small{font-size:11px;opacity:.8;line-height:1.45;display:block} /* pill tabs with counts */ .pilltabs{display:flex;gap:6px;flex-wrap:wrap} .pilltab{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:99px;cursor:pointer; font-family:inherit;font-size:12.5px;font-weight:600;color:var(--muted); background:color-mix(in srgb,var(--secondary) 55%,transparent);border:1px solid var(--border);transition:.15s} .pilltab:hover{color:var(--text);border-color:color-mix(in srgb,var(--primary) 40%,transparent)} .pilltab.on{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--primary),var(--glow))} .pilltab .n{font-size:10px;font-weight:800;padding:1px 6px;border-radius:99px; background:color-mix(in srgb,var(--text) 14%,transparent)} .pilltab.on .n{background:rgba(255,255,255,.26)} /* offer rows */ .offerrow{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;margin-bottom:7px; background:color-mix(in srgb,var(--secondary) 50%,transparent);border:1px solid var(--border);transition:.15s} .offerrow:hover{background:color-mix(in srgb,var(--primary) 10%,transparent)} .offerrow .g{flex:1;min-width:0} .offerrow .g b{display:block;font-size:13.5px} .offerrow .g small{font-size:11px;color:var(--muted);display:flex;gap:7px;align-items:center;flex-wrap:wrap} .offerrow .g small .sep{opacity:.5} .offerrow .fee{font-family:ui-monospace,monospace;font-size:13px;font-weight:700;color:var(--accent);flex:none} .offerrow .oid{font-size:9.5px;opacity:.5;flex:none} /* competition tag next to a club name (e.g. "UCL") */ .compchip{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:99px; font-size:9px;font-weight:800;letter-spacing:.06em;vertical-align:middle; background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--accent)} @media(max-width:700px){ .offerrow{flex-wrap:wrap} .offerrow .g{flex:1 1 100%;order:-1} .offerrow .oid{display:none} } /* ===================================================================== */ /* ============ TRANSACTIONS LEDGER + MARKET ANALYTICS =============== */ /* ===================================================================== */ .txrow{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;margin-bottom:6px; background:color-mix(in srgb,var(--secondary) 50%,transparent); border:1px solid var(--border);border-left:3px solid var(--primary);transition:.15s} .txrow:hover{background:color-mix(in srgb,var(--primary) 10%,transparent);transform:translateX(2px)} .txrow.reverted{opacity:.55;border-left-color:var(--danger)} .txrow.reverted .g b{text-decoration:line-through} .txrow .ico{font-size:16px;width:22px;text-align:center;flex:none} .txrow .g{flex:1;min-width:0} .txrow .g b{display:block;font-size:13.5px} .txrow .g small{font-size:11px;color:var(--muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap} .txrow .g small .sep{opacity:.45} .txrow .fee{font-family:ui-monospace,monospace;font-size:12.5px;font-weight:700;color:var(--accent);flex:none} .txrow .oid{font-size:9px;opacity:.4;flex:none} /* spend-vs-income chart */ .mktchart{display:flex;flex-direction:column;gap:9px} .mktrow{display:grid;grid-template-columns:150px 1fr 110px;gap:12px;align-items:center} .mktrow .nm{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mktrow .bars{display:flex;flex-direction:column;gap:3px;min-width:0} .mktrow .bar{height:9px;border-radius:99px;min-width:2px;transition:width .5s cubic-bezier(.2,.8,.3,1)} .mktrow .bar.spent{background:linear-gradient(90deg,var(--danger),color-mix(in srgb,var(--danger) 55%,var(--accent)))} .mktrow .bar.earned{background:linear-gradient(90deg,var(--ok),color-mix(in srgb,var(--ok) 55%,var(--accent)))} .mktrow .net{font-family:ui-monospace,monospace;font-size:12px;font-weight:700;text-align:right} i.legend{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:-1px;margin-right:2px} i.legend.spent{background:var(--danger)} i.legend.earned{background:var(--ok)} @media(max-width:760px){ .mktrow{grid-template-columns:110px 1fr 84px;gap:8px} .txrow .oid{display:none} } /* ===================================================================== */ /* ========== ADMIN PANEL v3 — TOP TABS, CARD BODY =================== */ /* ===================================================================== */ /* The sidebar layout is gone; the body is a single full-width column. */ .adminlayout{display:block} .adminnav{display:none} /* ---- header ---- */ .apanel-head{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:18px; background:linear-gradient(120deg,color-mix(in srgb,var(--primary) 22%,transparent), color-mix(in srgb,var(--bg2) 86%,transparent)); border:1px solid color-mix(in srgb,var(--primary) 24%,transparent)} .apanel-head .seal{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;flex:none; font-family:var(--hfont);font-size:21px;font-weight:900;color:#fff; background:linear-gradient(135deg,var(--primary),var(--glow)); box-shadow:0 8px 22px -10px var(--glow)} .apanel-head .seal.owner{background:linear-gradient(135deg,#ffd400,#ff9500);color:#1a1000} .apanel-head .who{flex:1;min-width:0} .apanel-head h2{font-family:var(--hfont);font-size:20px;margin:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .apanel-head p{font-size:12.5px;color:var(--muted);margin-top:2px} .tierbadge{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase; padding:3px 9px;border-radius:99px;color:var(--text); background:color-mix(in srgb,var(--primary) 20%,transparent); border:1px solid color-mix(in srgb,var(--primary) 34%,transparent)} .tierbadge.owner{color:#1a1000;background:linear-gradient(135deg,#ffd400,#ff9500);border:none} .tierbadge.mini{color:var(--muted);background:color-mix(in srgb,var(--text) 10%,transparent)} .jumpbtn{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:11px;cursor:pointer; font-family:inherit;font-size:12.5px;font-weight:600;color:var(--muted);flex:none; background:color-mix(in srgb,var(--bg) 55%,transparent);border:1px solid var(--border);transition:.16s} .jumpbtn:hover{color:var(--text);border-color:color-mix(in srgb,var(--primary) 50%,transparent); background:color-mix(in srgb,var(--primary) 12%,transparent)} .jumpbtn .jicon{font-size:15px;line-height:1} .jumpbtn svg{width:15px;height:15px;flex:none} .jumpbtn kbd{font-family:ui-monospace,monospace;font-size:10px;font-weight:700;padding:2px 6px;border-radius:5px; background:color-mix(in srgb,var(--primary) 22%,transparent);color:var(--text);border:none} /* ---- header stats strip ---- */ .hstats{display:flex;gap:8px;flex-wrap:wrap;flex:none} .hstat{min-width:64px;text-align:center;padding:8px 12px;border-radius:12px; background:color-mix(in srgb,var(--bg) 55%,transparent);border:1px solid var(--border)} .hstat b{display:block;font-family:var(--hfont);font-size:18px;font-weight:800;color:var(--text)} .hstat span{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} @media(max-width:900px){ .hstats{display:none} } /* ---- layout: sidebar + content ---- */ .apanel-layout{display:grid;grid-template-columns:250px 1fr;gap:16px;align-items:start;margin-top:16px} .apanel-sidebar{position:sticky;top:calc(var(--nav-h) + 14px); max-height:calc(100vh - var(--nav-h) - 28px);overflow-y:auto; display:flex;flex-direction:column;gap:2px; background:var(--card);border:1px solid var(--border);border-radius:16px;padding:12px} .apanel-sidebar::-webkit-scrollbar{width:6px} .apanel-sidebar::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--primary) 36%,transparent);border-radius:8px} .sgrp{display:flex;align-items:center;gap:7px;margin:14px 4px 4px;font-size:10.5px;font-weight:800; letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .sgrp:first-child{margin-top:2px} .sgrp .dot{width:8px;height:8px;border-radius:50%;flex:none;box-shadow:0 0 8px -1px currentColor} .sgrp .n{margin-left:auto;font-size:10px;font-weight:800;color:var(--muted);opacity:.7; background:color-mix(in srgb,var(--text) 10%,transparent);padding:1px 7px;border-radius:99px;letter-spacing:0} .sitem{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:10px; cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;text-align:left; color:var(--muted);background:transparent;border:1px solid transparent;transition:.14s} .sitem svg{width:17px;height:17px;flex:none;opacity:.85} .sitem .lbl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sitem:hover{color:var(--text);background:color-mix(in srgb,var(--primary) 12%,transparent)} .sitem.on{color:#fff;background:linear-gradient(135deg,var(--primary),var(--glow)); box-shadow:0 6px 16px -8px var(--glow)} .sitem.on svg{opacity:1} .sitem .key{flex:none;font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase; padding:1px 6px;border-radius:99px;background:rgba(255,255,255,.18);color:#fff;opacity:.85} .sitem:not(.on) .key{color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,transparent)} .apanel-main{min-width:0} /* ---- body ---- */ .apanel-body{padding:20px;background:var(--card); border:1px solid var(--border);border-radius:16px; display:flex;flex-direction:column;gap:16px;min-width:0} /* Cards inside the panel sit ON the panel, so drop their own chrome. */ .apanel-body > .card{background:color-mix(in srgb,var(--bg) 35%,transparent)} @media(max-width:900px){ .apanel-layout{grid-template-columns:1fr} .apanel-sidebar{position:static;max-height:none;flex-direction:row;flex-wrap:wrap; align-items:center;overflow-x:auto;overflow-y:hidden} .sgrp{display:none} .sitem{width:auto;flex:none} .apanel-body{padding:14px} .jumpbtn .lbl{display:none} } /* ===================================================================== */ /* ================== KNOCKOUT BRACKET — TREE ======================== */ /* ===================================================================== */ /* Ties in a column are spaced so each PAIR lines up with the single tie it feeds in the next column. The connector elbows are drawn with pseudo elements, so the tree scales to any number of rounds without images. */ .bracket{--tie-h:58px;--gap:14px;--elbow:26px; overflow-x:auto;padding:6px 2px 18px;scrollbar-width:thin} .bracket.two{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--elbow);align-items:center} .bracket.single .btrack{display:flex;gap:calc(var(--elbow) * 2);align-items:center;min-width:min-content} .bhalf{display:flex;gap:calc(var(--elbow) * 2);align-items:center;min-width:min-content} .bhalf.r{flex-direction:row-reverse} .bcol{display:flex;flex-direction:column;gap:8px;min-width:172px} .bch{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted); font-weight:800;text-align:center;padding-bottom:2px} .bch.cur{color:var(--accent)} .bch.fin{color:var(--accent);font-size:11px} /* Spacing doubles each round, which is what keeps pairs aligned with their parent tie as the draw narrows. */ .bties{display:flex;flex-direction:column;justify-content:space-around;height:100%; gap:calc(var(--gap) * (1 + var(--depth, 0)))} .bslot{position:relative;display:flex;align-items:center} /* the horizontal stub leaving every tie */ .bslot::after{content:'';position:absolute;left:100%;top:50%;width:var(--elbow); height:2px;background:var(--border)} /* the vertical elbow joining a pair */ .bslot.pair-top::before,.bslot.pair-bot::before{content:'';position:absolute; left:calc(100% + var(--elbow));width:2px;background:var(--border)} .bslot.pair-top::before{top:50%;height:calc(50% + (var(--gap) * (1 + var(--depth,0))) / 2 + var(--tie-h) / 2)} .bslot.pair-bot::before{bottom:50%;height:calc(50% + (var(--gap) * (1 + var(--depth,0))) / 2 + var(--tie-h) / 2)} /* the final column feeds nothing, so it gets no outgoing lines */ .bcol.final .bslot::after,.bcol.final .bslot::before{display:none} /* mirrored half: lines leave to the LEFT instead */ .bties.mirrored .bslot::after{left:auto;right:100%} .bties.mirrored .bslot.pair-top::before, .bties.mirrored .bslot.pair-bot::before{left:auto;right:calc(100% + var(--elbow))} /* ---- a tie ---- */ .btie{width:100%;border-radius:11px;overflow:hidden;background:var(--card); border:1px solid var(--border);transition:.18s} .btie:hover{border-color:color-mix(in srgb,var(--primary) 50%,transparent); transform:translateY(-1px);box-shadow:0 8px 20px -12px var(--glow)} .btie.live{border-color:color-mix(in srgb,var(--accent) 55%,transparent); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)} .bteam{display:flex;align-items:center;gap:8px;padding:7px 10px;font-size:12px;cursor:pointer; border-bottom:1px solid var(--border);transition:.15s} .bteam:last-child{border-bottom:none} .bteam:hover{background:color-mix(in srgb,var(--primary) 12%,transparent)} .bteam .bn{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bteam.won{background:color-mix(in srgb,var(--ok) 14%,transparent);font-weight:700} .bteam.won .bn{color:var(--text)} .bteam.lost{opacity:.45} .bteam.lost .bn{text-decoration:line-through} .bteam .bw{font-size:10px;color:var(--ok)} .bteam .tbd{width:20px;height:20px;border-radius:50%;display:grid;place-items:center; font-size:10px;color:var(--muted);background:color-mix(in srgb,var(--muted) 18%,transparent)} /* ---- the middle column: final + champion ---- */ .bmid{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:196px;padding:0 4px} .bmid .bties{gap:10px;width:100%} .champ{text-align:center;padding:16px 18px;border-radius:18px;margin-top:6px;width:100%; background:radial-gradient(120% 100% at 50% 0%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 70%), linear-gradient(170deg,var(--bg2),var(--bg)); border:1px solid color-mix(in srgb,var(--accent) 42%,transparent); box-shadow:0 18px 44px -26px color-mix(in srgb,var(--accent) 80%,#000)} .champ .ctrophy{font-size:30px;filter:drop-shadow(0 4px 12px color-mix(in srgb,var(--accent) 70%,transparent))} .champ .ctrophy.dim{opacity:.28;filter:none} .champ small{display:block;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase; color:var(--accent);margin-top:8px;font-weight:800} .champ b{display:block;font-family:var(--hfont);font-size:16px;margin-top:3px} .champ.pending{border-style:dashed;border-color:var(--border);box-shadow:none;background:var(--card)} @media(max-width:900px){ /* Stack the two halves; a mirrored bracket is unreadable on a phone. */ .bracket.two{grid-template-columns:1fr;gap:22px} .bhalf,.bhalf.r{flex-direction:column;align-items:stretch} .bslot::after,.bslot::before{display:none} .bties{gap:10px!important} .bcol{min-width:0} } /* ===================================================================== */ /* ===================== PLAYER SHEET ================================ */ /* ===================================================================== */ /* Two columns on desktop so nothing is crammed: identity, honours and career numbers on the left; where those numbers came from on the right. */ .modal.sheetmodal{max-width:960px;padding:0;overflow:hidden} .modal.sheetmodal > h2{padding:24px 28px 0} .modal.sheetmodal > p.sub{padding:0 28px;font-family:ui-monospace,monospace;font-size:11.5px} .modal.sheetmodal .x{top:20px;right:22px} .psheet{display:flex;flex-direction:column;gap:18px;padding:20px 28px 28px} .pgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:18px;align-items:start} .pcol{display:flex;flex-direction:column;gap:14px;min-width:0} /* ---- identity ---- */ .phead{display:flex;align-items:center;gap:18px;padding:20px 22px;border-radius:18px; background: radial-gradient(90% 140% at 0% 0%, color-mix(in srgb,var(--primary) 26%,transparent), transparent 62%), linear-gradient(150deg,var(--bg2),var(--bg)); border:1px solid color-mix(in srgb,var(--primary) 24%,transparent)} .phead .pav{width:76px;height:76px;border-radius:50%;object-fit:cover;flex:none; border:2px solid color-mix(in srgb,var(--primary) 50%,transparent); box-shadow:0 10px 26px -14px var(--glow)} .phead .pid{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px} .ptrophies{text-align:center;flex:none;padding:12px 18px;border-radius:15px; background:color-mix(in srgb,var(--accent) 13%,transparent); border:1px solid color-mix(in srgb,var(--accent) 34%,transparent)} .ptrophies b{display:block;font-family:var(--hfont);font-size:26px;font-weight:900; line-height:1;color:var(--accent)} .ptrophies span{font-size:9px;letter-spacing:.16em;text-transform:uppercase; color:var(--muted);margin-top:5px;display:block} /* ---- trophy cabinet: one per row, room to breathe ---- */ .pcabinet{display:flex;flex-direction:column;gap:8px;margin-top:14px} .ptrophy{display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:13px; background:linear-gradient(100deg,color-mix(in srgb,var(--awc,var(--accent)) 14%,transparent), color-mix(in srgb,var(--awc,var(--accent)) 4%,transparent)); border:1px solid color-mix(in srgb,var(--awc,var(--accent)) 32%,transparent);transition:.18s} .ptrophy:hover{transform:translateX(3px); border-color:color-mix(in srgb,var(--awc,var(--accent)) 58%,transparent)} .ptrophy .ico{font-size:24px;flex:none;width:30px;text-align:center; filter:drop-shadow(0 3px 8px color-mix(in srgb,var(--awc,var(--accent)) 60%,transparent))} .ptrophy .meta{flex:1;min-width:0} .ptrophy .meta b{display:block;font-size:13.5px;margin-bottom:3px} .ptrophy .meta small{font-size:11px;color:var(--muted);display:block;line-height:1.4} .ptrophy .xn{font-family:var(--hfont);font-size:17px;font-weight:900;flex:none; color:var(--awc,var(--accent));padding-left:4px} /* ---- career numbers ---- */ .pstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px} .pstat{text-align:center;padding:16px 10px;border-radius:14px;background:var(--card); border:1px solid var(--border);border-top:2px solid var(--ac,var(--primary));transition:.16s} .pstat:hover{transform:translateY(-2px); border-color:color-mix(in srgb,var(--ac,var(--primary)) 45%,transparent)} .pstat b{display:block;font-family:var(--hfont);font-size:26px;font-weight:900; line-height:1;color:var(--ac,var(--text))} .pstat span{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase; color:var(--muted);margin-top:7px;display:block} .pstat.good{--ac:var(--ok)} .pstat.gold{--ac:var(--accent)} .pstat.bad{--ac:var(--danger)} /* ---- sections ---- */ .psec{padding:18px 20px} .psec h3{font-family:var(--hfont);font-size:14px;display:flex;align-items:center;gap:9px; margin-bottom:4px} .psec .listrow{padding:12px 14px;margin-bottom:0} .psec .stack{gap:8px!important} @media(max-width:860px){ /* Stack the columns; two narrow columns on a phone is worse than one. */ .pgrid{grid-template-columns:1fr} .modal.sheetmodal{max-width:560px} } @media(max-width:560px){ .psheet{padding:16px 18px 22px} .modal.sheetmodal > h2{padding:20px 20px 0} .modal.sheetmodal > p.sub{padding:0 20px} .phead{flex-wrap:wrap;gap:14px;padding:16px} .phead .pav{width:60px;height:60px} .ptrophies{width:100%} } /* Bigger group frames for the group stage tables */ .groupgrid{grid-template-columns:repeat(auto-fit,minmax(580px,1fr)) !important;gap:32px} .groupcard{padding:32px} .groupcard h3{font-size:18px;margin-bottom:20px} .group.tbl th,.group.tbl td{padding:10px 14px;font-size:14px} .group.tbl th:first-child,.group.tbl td:first-child{padding-left:16px} .group.tbl td:last-child,.group.tbl th:last-child{padding-right:16px} /* ---- Searchable select (bracket team pickers) ---- */ .ss input{width:100%} .ss-list{background:var(--bg2);border:1px solid var(--border);border-radius:11px; box-shadow:0 14px 44px rgba(0,0,0,.55);padding:4px} .ss-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left; padding:9px 11px;border-radius:8px;background:transparent;border:none; color:var(--text);font-family:inherit;font-size:13px;cursor:pointer} .ss-row:hover{background:color-mix(in srgb,var(--primary) 18%,transparent)} .ss-row b{font-weight:600} /* Bracket tie rows: let the team pickers wrap cleanly on narrow screens. */ @media(max-width:700px){ .listrow .ss{flex:1 1 100% !important;min-width:100% !important} .listrow .g{flex:1 1 100% !important} }