/* =========================================================== MCL - Mucy's Challenge List Palette: main list = violet, friends list = red-pink. The accent is set on at runtime, so everything that uses var(--accent) recolours when you switch lists. =========================================================== */ :root{ --bg:#FFFFFF; --bg2:#F7F8FA; --ink:#0F1115; --ink2:#5B6376; --line:#E4E7EE; --line2:#CFD4E0; --accent:#7A2FF2; --accent-2:#5C15D6; --on-accent:#FFFFFF; --good:#128A5E; --warn:#B26A00; --bad:#C42B2B; --disp:"Archivo","Arial Black",system-ui,sans-serif; --body:"IBM Plex Sans",system-ui,-apple-system,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace; } @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){ --bg:#0E1014; --bg2:#161A21; --ink:#EEF0F5; --ink2:#98A0B2; --line:#242A34; --line2:#333B49; --accent-2:#8A4BFF; --good:#2FCF97; --warn:#FFB020; --bad:#FF6060; }} :root[data-theme="dark"]{ --bg:#0E1014; --bg2:#161A21; --ink:#EEF0F5; --ink2:#98A0B2; --line:#242A34; --line2:#333B49; --accent-2:#8A4BFF; --good:#2FCF97; --warn:#FFB020; --bad:#FF6060; } *{box-sizing:border-box} html,body{margin:0} body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:14.5px;line-height:1.6;-webkit-font-smoothing:antialiased} img{max-width:100%} a{color:var(--accent-2);text-decoration:none} a:hover{text-decoration:underline} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} button{font:inherit;color:inherit;cursor:pointer;background:none;border:0} h1,h2,h3,h4{font-family:var(--disp);margin:0;text-wrap:balance} p{margin:0} input,select,textarea{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line2);border-radius:6px;padding:8px 10px;width:100%} input:hover,select:hover,textarea:hover{border-color:var(--ink2)} label{display:flex;flex-direction:column;gap:5px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);font-weight:700} .mono{font-family:var(--mono);font-variant-numeric:tabular-nums} /* ---------------- top bar ---------------- */ .top{position:sticky;top:0;z-index:30;background:var(--accent);color:var(--on-accent);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:0 16px;height:62px} .top .brand{display:flex;align-items:center;gap:8px;min-width:max-content} /* The name and the buttons keep their room; the nav is the thing that gives, because it can scroll. Without min-width:0 a grid track never shrinks below its content, and the nav pushed the logo out from under itself the moment the top bar gained another button. */ /* the logo mark sits on the accent bar, so it gets a hairline to keep its edge visible when the bar and the mark are the same violet */ .top .mark{width:30px;height:30px;border-radius:8px;display:block; box-shadow:0 0 0 1.5px rgba(255,255,255,.55),0 1px 3px rgba(0,0,0,.3)} .top .logo{font-family:var(--disp);font-weight:900;font-size:24px;letter-spacing:.06em} .top .ver{font-family:var(--mono);font-size:11px;opacity:.75;margin-left:4px} .top nav{display:flex;gap:4px;justify-content:center;overflow-x:auto;scrollbar-width:none;min-width:0} .top nav::-webkit-scrollbar{display:none} .top nav button,.top nav a{padding:9px 16px;border-radius:9px;font-family:var(--disp);font-weight:800;font-size:15.5px;letter-spacing:.01em;white-space:nowrap;opacity:.86;color:inherit;text-decoration:none;display:inline-block} .top nav button:hover,.top nav a:hover{opacity:1;background:rgba(255,255,255,.16);text-decoration:none} .top nav button[aria-current="true"],.top nav a[aria-current="true"]{opacity:1;background:rgba(255,255,255,.24)} .top .topright{display:flex;align-items:center;justify-content:flex-end;gap:8px} .top .sp{display:none} .icb{width:32px;height:32px;border-radius:7px;display:grid;place-items:center;opacity:.85} .icb:hover{opacity:1;background:rgba(255,255,255,.16)} .icb svg{width:18px;height:18px;fill:currentColor} .cta{background:var(--on-accent);color:var(--accent-2);font-weight:700;font-size:13.5px;padding:9px 15px;border-radius:9px;white-space:nowrap;display:inline-flex;align-items:center;gap:8px} .cta:hover{filter:brightness(.95);text-decoration:none} .cta.discord{background:#5865F2;color:#fff;font-family:var(--disp);font-weight:800;font-size:14.5px;padding:9px 16px;box-shadow:0 2px 0 rgba(0,0,0,.18)} .cta.discord svg{width:20px;height:20px;fill:currentColor} .cta.discord:hover{filter:brightness(1.08)} /* ---------------- three-column shell ---------------- */ .cols{display:grid;grid-template-columns:330px minmax(0,1fr) 340px;align-items:start} .side,.right{height:calc(100vh - 62px);position:sticky;top:62px;overflow-y:auto;padding:14px 12px 40px} .side{border-right:1px solid var(--line)} .right{border-left:1px solid var(--line);padding:18px 18px 50px} .mid{padding:24px 34px 60px;min-width:0} .one{max-width:1080px;margin:0 auto;padding:26px 30px 70px} /* ---------------- left column ---------------- */ .filters{display:grid;gap:8px;margin-bottom:12px} .filters select{font-size:13px;padding:7px 9px} /* a list row: rank, thumbnail, name over points - the shape pointercrate uses */ .lvl{display:grid;grid-template-columns:30px 64px minmax(0,1fr);align-items:center;gap:9px;width:100%;text-align:left; padding:6px 8px;border-radius:10px;border:1px solid transparent} .lvl .n{font-family:var(--mono);font-size:12.5px;color:var(--ink2);font-variant-numeric:tabular-nums;text-align:right} .lvl .t{min-width:0;display:block} .lvl .t b{display:block;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lvl .t small{display:block;font-family:var(--mono);font-size:10.5px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lvl:hover{background:var(--bg2)} .lvl[aria-current="true"]{background:color-mix(in srgb,var(--accent) 14%,transparent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)} .lvl[aria-current="true"] .t b{color:var(--accent-2)} .lvl[aria-current="true"] .n{color:var(--accent-2);font-weight:600} .lvl.legacy .n{opacity:.55} .lvl.legacy .thumb{filter:grayscale(.6) brightness(.85)} /* Thumbnail: a coloured tile with the level's initials, covered by the real image when there is one. A missing image removes itself, leaving the tile - so a level with no thumbnail yet still looks deliberate. */ .thumb{position:relative;display:block;width:64px;aspect-ratio:16/9;border-radius:6px;overflow:hidden; background:linear-gradient(135deg,hsl(var(--h) 55% 42%),hsl(calc(var(--h) + 40) 60% 28%));flex:none} .thumb i{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--disp);font-weight:900; font-size:15px;color:#fff;opacity:.85;font-style:normal;letter-spacing:.04em} .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} /* level page banner */ .lvlhead{position:relative;border-radius:14px;overflow:hidden;margin-bottom:16px; background:linear-gradient(135deg,hsl(var(--h) 55% 38%),hsl(calc(var(--h) + 40) 60% 22%))} .lvlhead .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(18px) saturate(1.3);transform:scale(1.15);opacity:.55} .lvlhead-in{position:relative;padding:22px 24px;background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.35));color:#fff} .lvlhead .rankbig{font-family:var(--mono);font-size:13px;letter-spacing:.1em;opacity:.8} .lvlhead .title{color:#fff;margin:2px 0 4px} .lvlhead .ptsbig{font-family:var(--mono);font-size:13px;opacity:.85} .sechead{font-family:var(--disp);font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin:16px 0 6px 6px} /* ---------------- centre column ---------------- */ .title{font-size:clamp(30px,4vw,46px);font-weight:900;letter-spacing:-.01em;line-height:1.05;margin-bottom:10px} .tagrow{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px} .based{display:inline-flex;align-items:center;gap:6px;font-family:var(--disp);font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase; padding:4px 10px;border-radius:20px;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent-2)} .credits{display:grid;grid-template-columns:auto 1fr;gap:2px 18px;font-size:14px;margin-bottom:20px} .credits dt{font-family:var(--disp);font-weight:800;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)} .credits dd{margin:0;color:var(--ink2)} .player{position:relative;width:100%;max-width:640px;aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden;border:1px solid var(--line)} .player iframe,.player video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000} /* click-to-play: the thumbnail with a play button, until somebody asks for the real player. Nothing from the video host is loaded before that. */ .player.poster{cursor:pointer} .player.poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .player.poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.55))} .playbtn{position:absolute;inset:0;margin:auto;width:74px;height:74px;border-radius:50%;z-index:2; background:rgba(12,12,16,.62);border:2px solid rgba(255,255,255,.85);display:grid;place-items:center; transition:transform .12s ease,background .12s ease} .playbtn svg{width:34px;height:34px;fill:#fff;margin-left:4px} .player.poster:hover .playbtn{transform:scale(1.07);background:var(--accent)} .playon{position:absolute;left:12px;bottom:10px;z-index:2;font-family:var(--mono);font-size:11px; letter-spacing:.08em;text-transform:uppercase;color:#fff;opacity:.9;text-shadow:0 1px 3px rgba(0,0,0,.8)} .noplayer{max-width:640px;border:1px dashed var(--line2);border-radius:10px;padding:26px;text-align:center;color:var(--ink2);font-size:13.5px;display:grid;gap:12px;justify-items:center} .stats{display:flex;flex-wrap:wrap;gap:10px 36px;margin:20px 0 6px;max-width:680px} .stats div{text-align:center;min-width:72px} .stats span{display:block;font-family:var(--disp);font-weight:800;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink)} .stats b{font-family:var(--mono);font-weight:500;font-size:14px;color:var(--ink2)} h2.sec{font-size:26px;font-weight:900;text-transform:uppercase;margin:26px 0 8px} .qual{font-size:14px;color:var(--ink2);margin-bottom:12px} .qual b{color:var(--ink)} .recs{max-width:660px} .rec{display:grid;grid-template-columns:56px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:7px 4px;border-bottom:1px solid var(--line)} .rec .p{font-weight:700;font-family:var(--mono);font-size:13.5px} .rec .who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rec .fps{font-family:var(--mono);font-size:12.5px;color:var(--ink2)} .rec .lk{font-size:12.5px} /* ---------------- right column ---------------- */ .right h3{font-size:19px;font-weight:900;text-transform:uppercase;margin:22px 0 10px} .right h3:first-of-type{margin-top:14px} .right p{font-size:13.5px;color:var(--ink2);margin-bottom:11px} .right p b{color:var(--ink);font-weight:700} .blurb{font-size:12.5px;color:var(--ink2);margin-bottom:4px} .editor{display:flex;align-items:center;gap:9px;font-size:14px;padding:3px 0} .editor svg{width:15px;height:15px;fill:var(--ink2);flex:none} .editor .r{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--ink2);text-transform:uppercase;letter-spacing:.06em} /* ---------------- shared ---------------- */ .btn{background:var(--accent);color:var(--on-accent);padding:9px 15px;border-radius:8px;font-weight:700;font-size:13.5px;display:inline-block} .btn:hover{filter:brightness(1.08);text-decoration:none} .btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line2)} .btn.ghost:hover{border-color:var(--ink2);filter:none} .btn.sm{padding:5px 10px;font-size:12px;border-radius:6px} .btn[disabled]{opacity:.45;cursor:not-allowed} .acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .panel{background:var(--bg);border:1px solid var(--line);border-radius:12px} .pad{padding:18px} .empty{border:1px dashed var(--line2);border-radius:10px;padding:24px;text-align:center;color:var(--ink2);font-size:13.5px} .start{border:1px dashed var(--line2);border-radius:12px;padding:34px 26px;text-align:center;display:grid;gap:14px;justify-items:center;max-width:620px} .start h3{font-size:22px;font-weight:900;text-transform:uppercase} .start p{color:var(--ink2);max-width:52ch;font-size:13.5px} .note{border-left:3px solid var(--warn);background:var(--bg2);border-radius:0 8px 8px 0;padding:11px 14px;font-size:13px;color:var(--ink2);display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px} .note b{color:var(--ink)} .msg{font-size:13.5px;padding:10px 13px;border-left:3px solid var(--good);background:var(--bg2);border-radius:0 8px 8px 0;margin-bottom:16px} .msg.err{border-color:var(--bad)} .chip{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border:1px solid var(--line2);border-radius:20px;color:var(--ink2)} .chip.pend{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)} /* webcam required - the chip on the level page, and the corner badge on a row's thumbnail. Amber rather than the accent so it reads as a condition, not a tag. */ .chip.cam{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent); background:color-mix(in srgb,var(--warn) 12%,transparent)} .chip .ci{width:12px;height:12px;fill:currentColor;flex:none} .thumb b.cam{position:absolute;top:3px;right:3px;display:grid;place-items:center;width:16px;height:16px; border-radius:4px;background:rgba(0,0,0,.66);color:#fff} .thumb b.cam svg{width:11px;height:11px;fill:currentColor} .tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:18px;flex-wrap:wrap} .tabs button{padding:8px 15px;font-family:var(--disp);font-weight:800;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2);border-bottom:2px solid transparent;margin-bottom:-1px} .tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)} .tabs button:hover{color:var(--ink)} table{width:100%;border-collapse:collapse;font-size:13.5px} th{text-align:left;font-family:var(--disp);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);font-weight:800;padding:8px 10px;border-bottom:1px solid var(--line2);white-space:nowrap} td{padding:8px 10px;border-bottom:1px solid var(--line)} td.num,th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums} tbody tr:hover{background:var(--bg2)} .scroll{overflow-x:auto} h1.pg{font-size:34px;font-weight:900;text-transform:uppercase;margin-bottom:6px} .sub{color:var(--ink2);font-size:14px;max-width:66ch;margin-bottom:20px} form.stack{display:grid;gap:13px} .fr{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:13px} .check{flex-direction:row;align-items:flex-start;gap:9px;text-transform:none;letter-spacing:0;font-size:13.5px;font-weight:400;color:var(--ink2);cursor:pointer} .check input{width:16px;height:16px;flex:none;margin-top:3px;accent-color:var(--accent)} .grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px} .qitem{border:1px solid var(--line);border-radius:10px;padding:14px;display:grid;gap:9px} .packs{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px} .pack{border:1px solid var(--line);border-radius:12px;overflow:hidden} .pack .ph{padding:13px 15px;border-top:4px solid var(--pc,var(--accent));border-bottom:1px solid var(--line)} .pack h4{font-size:17px;font-weight:900;text-transform:uppercase} .pack .ph p{font-size:12.5px;color:var(--ink2)} .pack ol{margin:0;padding:10px 15px 14px 32px;font-size:13.5px;display:grid;gap:4px} .pack ol li::marker{font-family:var(--mono);font-size:11px;color:var(--ink2)} .rule{display:grid;grid-template-columns:46px minmax(0,1fr);gap:14px;padding:15px 0;border-bottom:1px solid var(--line)} .rule .n{font-family:var(--mono);font-size:20px;font-weight:600;color:var(--accent-2)} .rule h4{font-size:17px;font-weight:800;margin-bottom:2px} .rule p{font-size:13.5px;color:var(--ink2);max-width:70ch} .rule.req .n{color:var(--good)} /* ---------------- players: flags, clan tags ---------------- */ img.flag{width:20px;height:15px;vertical-align:-2px;border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.15)} .cbox{display:flex;align-items:center;gap:8px} .cbox input{flex:1} .cbox img.flag{width:24px;height:18px;flex:none} .tag{font-family:var(--mono);font-size:.92em;color:var(--accent-2);font-weight:600} .tag:hover{text-decoration:underline} .tagpill{display:inline-block;font-family:var(--mono);font-weight:700;font-size:12px;padding:2px 9px;border-radius:6px;background:color-mix(in srgb,var(--pc,var(--accent)) 18%,transparent);color:var(--ink)} .clanhead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 18px;border:1px solid var(--line);border-left:5px solid var(--pc,var(--accent));border-radius:12px;margin-bottom:14px} .tagbig{display:inline-block;font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.14em;padding:3px 10px;border-radius:6px;background:color-mix(in srgb,var(--pc,var(--accent)) 18%,transparent)} /* ---------------- position history ---------------- */ details.hist{margin-top:30px} details.hist summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px} details.hist summary::-webkit-details-marker{display:none} details.hist summary::after{content:"\25BE";font-size:18px;color:var(--ink2);transition:transform .15s} details.hist[open] summary::after{transform:rotate(180deg)} .histt{margin-top:12px;max-width:720px;border-radius:10px;overflow:hidden} .histt thead th{background:var(--accent);color:var(--on-accent);border:0} .histt td{border-bottom:1px solid var(--line)} .histt tr.add td{background:color-mix(in srgb,var(--warn) 12%,transparent)} .histt tr.up td{background:color-mix(in srgb,var(--good) 12%,transparent)} .histt tr.down td{background:color-mix(in srgb,var(--bad) 12%,transparent)} /* ---------------- roulette ---------------- */ .draw{border:1px solid var(--line);border-radius:12px;padding:22px;display:grid;gap:14px;max-width:760px} .draw .lvlname{font-family:var(--disp);font-size:34px;font-weight:900;line-height:1.05} .draw .facts{display:flex;flex-wrap:wrap;gap:6px 18px;font-family:var(--mono);font-size:12.5px;color:var(--ink2)} .draw .facts b{color:var(--ink);font-weight:600} .draw .player{max-width:100%} .req{font-family:var(--mono);font-size:44px;font-weight:600;line-height:1;color:var(--accent-2)} .step{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)} .pctbar{display:flex;gap:9px;align-items:stretch;flex-wrap:wrap} .pctbar input{flex:1;min-width:190px;font-family:var(--mono);font-size:17px;padding:12px 14px;border-radius:9px;border-width:2px} .pctbar input::placeholder{color:var(--ink2);opacity:.8} .pctbar .btn{padding:12px 20px;font-size:14px} .steps{display:flex;flex-wrap:wrap;gap:5px} .pill{font-family:var(--mono);font-size:11px;padding:3px 8px;border:1px solid var(--line2);border-radius:20px;color:var(--ink2)} .pill.done{color:var(--good);border-color:color-mix(in srgb,var(--good) 45%,transparent)} .pill.skip{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)} .bar{display:block;height:5px;border-radius:3px;background:var(--line);position:relative;min-width:60px} .bar i{position:absolute;inset:0 auto 0 0;background:var(--accent);border-radius:3px} /* ---------------- admin + footer ---------------- */ .adm{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:9px 12px;border-radius:8px;background:var(--bg2);border:1px solid var(--line);margin-bottom:16px} .adm .lb{font-family:var(--disp);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-2);font-weight:800} footer{border-top:1px solid var(--line);padding:16px 34px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--ink2)} .pb{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:800;font-size:12.5px;letter-spacing:.04em;color:var(--ink);border:1px solid var(--line2);border-radius:8px;padding:7px 12px} .pb:hover{border-color:var(--accent);text-decoration:none} .pb i{width:9px;height:9px;border-radius:2px;background:var(--accent);display:block} /* one step before the sidebar goes: tighten the bar so the nav does not have to start scrolling */ @media (max-width:1340px){ .top nav button,.top nav a{padding:8px 11px;font-size:14.5px} .top .cta.discord span{display:none} .top .cta.ghostcta span{max-width:84px} } @media (max-width:1180px){.cols{grid-template-columns:300px minmax(0,1fr)}.right{display:none}.mid{padding:22px 24px 50px}} @media (max-width:820px){ .cols{grid-template-columns:minmax(0,1fr)} .side{position:static;height:auto;max-height:300px;border-right:0;border-bottom:1px solid var(--line)} .mid{padding:20px 16px 50px}.one{padding:20px 16px 50px} .top{grid-template-columns:auto 1fr auto;height:56px;gap:6px;padding:0 10px} .top .ver{display:none} .top nav{justify-content:flex-start} .top nav button,.top nav a{padding:7px 10px;font-size:13.5px} .top .cta{padding:7px 10px;font-size:12.5px}.top .cta.discord span{display:none} .side,.right{height:auto} footer{padding:16px} } @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* ---- profiles, sign-in, staff ---- */ /* A player's name is a link now. It should read as a name first and a link only when you go near it, or every table turns into a wall of blue. */ .plink{color:inherit;text-decoration:none;border-bottom:1px solid transparent} .plink:hover,.plink:focus-visible{color:var(--accent-2);border-bottom-color:currentColor} .linkish{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left} .linkish:hover{color:var(--accent-2)} /* the Discord sign-in button, in Discord's own blurple so it is recognisable */ .btn.discordbtn{display:inline-flex;align-items:center;gap:8px;background:#5865F2;border-color:#5865F2;color:#fff} .btn.discordbtn:hover{background:#4752c4;border-color:#4752c4} .btn.discordbtn .ci{width:17px;height:17px;fill:currentColor} /* the "me" chip in the top bar: quieter than Submit Record, which is the one thing up there that should shout */ .top .cta.ghostcta{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;gap:7px} .top .cta.ghostcta:hover{background:rgba(255,255,255,.14)} .top .cta.ghostcta .ci{width:15px;height:15px;fill:currentColor} .top .cta.ghostcta .av{width:19px;height:19px;border-radius:50%;object-fit:cover;display:block} .top .cta.ghostcta span{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}