/* ---- Theme tokens ------------------------------------------------------- Dark is the default. [data-theme="light"] on re-points the same tokens at a light ramp; "system" is resolved to one of the two in JS. Surfaces that are deliberately dark in BOTH themes -- video players, the sponsor intro and the VYBE+ / level-up dialogs -- keep their literal colours and are not tokenised. */ :root { color-scheme:dark; /* surfaces, darkest to lightest */ --bg:#0f0f11; --field:#121214; --panel-dim:#161619; --panel:#17171a; --panel-soft:#222226; --raised:#29292e; --raised-hi:#444048; --track:#2b2b32; --skeleton:#292631; --line:#303034; --line-strong:#3a3a41; --line-loud:#5b5b66; /* text, faintest to loudest */ --soft:#8a8a93; --muted:#a9a9b0; --muted-hi:#babac2; --text-dim:#dedee4; --text:#f2f2f3; --text-hi:#fff; /* accents that sit on themed surfaces and so must flip with them */ --ink-pink:#fa8fbd; --ink-purple:#b8a1ff; --ink-green:#6ee2ad; --ink-gold:#ffd479; --ink-warm:#ffbe91; --ink-blue:#8fd0ff; --warm-wash:rgba(255,124,60,.16); --warm-edge:rgba(255,150,90,.4); --pink-wash:rgba(255,92,168,.14); --purple-wash:rgba(169,130,255,.16); --green-wash:rgba(110,226,173,.13); --gold-wash:rgba(255,212,121,.13); --blue-wash:rgba(143,208,255,.13); /* inverted pills: filled chip reads as "on" against the page */ --chip-bg:#f4e6ef; --chip-fg:#181116; /* chrome */ --topbar-bg:rgba(15,15,17,.96); --hairline:rgba(255,255,255,.07); --hairline-soft:rgba(255,255,255,.04); --shadow-lg:rgba(0,0,0,.35); --shadow-modal:rgba(0,0,0,.7); /* fixed brand + type */ --pink:#ff5ca8; --red:#f63b53; --purple:#a982ff; --font:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --display:"Space Grotesk","DM Sans",system-ui,sans-serif; } [data-theme="light"] { color-scheme:light; --bg:#f4f4f7; --field:#fff; --panel-dim:#fafafc; --panel:#fff; --panel-soft:#eeeef3; --raised:#e8e8ef; --raised-hi:#dadae4; --track:#e0e0e9; --skeleton:#e3e1ec; --line:#e4e4eb; --line-strong:#d3d3de; --line-loud:#b4b4c2; --soft:#6f6f7b; --muted:#5b5b67; --muted-hi:#4a4a57; --text-dim:#2c2c35; --text:#17171c; --text-hi:#08080b; --ink-pink:#c42a70; --ink-purple:#6a3ecf; --ink-green:#0f7a4f; --ink-gold:#8a6008; --ink-warm:#a8501a; --ink-blue:#1f5fa8; --warm-wash:rgba(255,124,60,.13); --warm-edge:rgba(199,104,42,.35); --pink-wash:rgba(196,42,112,.09); --purple-wash:rgba(106,62,207,.09); --green-wash:rgba(15,122,79,.09); --gold-wash:rgba(138,96,8,.1); --blue-wash:rgba(31,95,168,.09); --chip-bg:#26202c; --chip-fg:#f6f2f8; --topbar-bg:rgba(255,255,255,.94); --hairline:rgba(16,16,32,.10); --hairline-soft:rgba(16,16,32,.07); --shadow-lg:rgba(24,24,48,.16); --shadow-modal:rgba(24,24,48,.28); } * { box-sizing:border-box; } /* A class that sets `display` outranks the UA rule for [hidden], which would leave elements toggled via .hidden on screen. Settle it once, globally. */ [hidden] { display:none!important; } html { scroll-behavior:smooth; background:var(--bg); } body { margin:0; background:var(--bg); color:var(--text); font-family:var(--font); font-size:14px; line-height:1.45; } button,a,input,select,textarea { font:inherit; } button { cursor:pointer; } a { color:inherit; text-decoration:none; } :focus-visible { outline:2px solid var(--purple); outline-offset:2px; } h1,h2,h3 { text-wrap:balance; } @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } } .skip-link { position:absolute; z-index:100; top:8px; left:8px; padding:8px 12px; border-radius:8px; color:#14101c; background:#fff; transform:translateY(-150%); } .skip-link:focus { transform:none; } .noscript { padding:40px 0; color:var(--muted); } .linkish { padding:0; border:0; color:var(--ink-purple); background:none; font-weight:700; text-decoration:underline; } /* ---- Top bar ------------------------------------------------------------ */ .topbar { position:sticky; z-index:20; top:0; height:67px; display:flex; align-items:center; gap:17px; padding:0 26px; background:var(--topbar-bg); border-bottom:1px solid var(--hairline); backdrop-filter:blur(16px); }.menu-button { width:28px; padding:5px 2px; border:0; background:none; }.menu-button span { display:block; height:2px; margin:4px 0; border-radius:2px; background:var(--text); }.brand { display:flex; align-items:center; gap:7px; min-width:123px; color:var(--text-hi); font:700 21px/1 var(--display); letter-spacing:-.08em; }.search { display:flex; width:min(590px,44vw); height:39px; margin-left:auto; }.search input { width:100%; min-width:0; border:1px solid var(--line-strong); border-radius:9px 0 0 9px; outline:0; padding:0 15px; color:var(--text); background:var(--field); font-size:13px; }.search input:focus { border-color:#8c78c9; box-shadow:inset 0 0 0 1px #8c78c9; }.search button { width:61px; border:1px solid var(--line-strong); border-left:0; border-radius:0 9px 9px 0; color:var(--text-dim); background:var(--raised); font-size:24px; }.top-icon { border:0; color:var(--text); background:transparent; }.topbar-actions { display:flex; align-items:center; gap:10px; margin-left:auto; }.top-icon { position:relative; min-width:32px; height:34px; padding:0 4px; font-size:22px; }.create-icon { display:flex; align-items:center; gap:5px; padding:0 10px!important; border-radius:7px; background:var(--raised); font-size:18px; }.create-icon b { font-size:12px; }.create-icon:hover { background:var(--raised-hi); } .premium-button { min-height:30px; padding:0 9px; border:1px solid #9d70d3; border-radius:6px; color:var(--ink-purple); background:linear-gradient(135deg,rgba(158,101,219,.25),rgba(82,54,129,.25)); font:700 10px var(--display); letter-spacing:.02em; }.premium-button:hover { border-color:#e0b9ff; background:rgba(159,100,218,.32); }.premium-active .premium-button { color:#1d1722; border-color:#f6d6ff; background:#f2d2ff; }.premium-active .premium-button::after { content:" ✓"; } .account-slot { display:flex; align-items:center; } .sign-in-button { display:flex; align-items:center; gap:7px; height:34px; padding:0 12px 0 8px; border:1px solid var(--line-strong); border-radius:20px; color:var(--text); background:var(--panel-soft); font-size:12.5px; font-weight:700; } .sign-in-button:hover { border-color:var(--line-loud); background:var(--raised); } .g-mark { display:grid; place-items:center; width:20px; height:20px; border-radius:50%; color:#fff; background:conic-gradient(#ea4335 0 25%,#fbbc05 0 50%,#34a853 0 75%,#4285f4 0); font:700 11px var(--font); } .account { position:relative; } .user-avatar { display:grid; place-items:center; width:33px; height:33px; padding:0; overflow:hidden; border:0; border-radius:50%; color:#fff; background:linear-gradient(135deg,#efb1dc,#7d45ab 50%,#332354); font:700 13px var(--display); } .user-avatar img { width:100%; height:100%; object-fit:cover; } .account-menu { position:absolute; z-index:30; top:calc(100% + 8px); right:0; min-width:200px; padding:10px; border:1px solid var(--line-strong); border-radius:12px; background:var(--panel); box-shadow:0 16px 38px var(--shadow-lg); } .account-name { margin:2px 4px 0; font:700 13px var(--display); } .account-meta { margin:2px 4px 10px; color:var(--muted); font-size:12px; } .account-menu button { width:100%; padding:9px 10px; border:0; border-radius:8px; color:var(--text); background:var(--panel-soft); font-size:12.5px; font-weight:700; text-align:left; } .account-menu button:hover { background:var(--raised); } .google-button { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:12px; border:1px solid var(--line-strong); border-radius:10px; color:#1f1f1f; background:#fff; font-size:14px; font-weight:700; } .google-button:hover { background:#f2f2f2; } .sign-in-fine { margin:12px 0 0; color:var(--soft); font-size:11.5px; line-height:1.5; } .sign-in-fine a { color:var(--ink-purple); text-decoration:underline; } .level-chip { display:flex; align-items:center; gap:8px; height:34px; padding:0 11px 0 6px; border:1px solid var(--line-strong); border-radius:20px; background:var(--panel-soft); color:var(--text); } .level-chip:hover { border-color:var(--line-loud); background:var(--raised); } .chip-badge { display:grid; place-items:center; min-width:23px; height:23px; padding:0 4px; border-radius:12px; background:linear-gradient(140deg,#ff5ca8,#a982ff); color:#14101c; font:700 11px var(--display); } .chip-copy { display:flex; flex-direction:column; gap:3px; } .chip-copy b { font:700 10px var(--display); letter-spacing:.06em; color:var(--text); } .chip-track { display:block; width:52px; height:4px; border-radius:3px; background:var(--track); overflow:hidden; } .chip-track i { display:block; height:100%; width:0; border-radius:3px; background:linear-gradient(90deg,#ff5ca8,#a982ff); transition:width .4s; } /* ---- Sidebar ------------------------------------------------------------ */ .sidebar { position:fixed; z-index:15; top:67px; bottom:0; left:0; width:225px; padding:13px 12px 28px; overflow-y:auto; background:var(--bg); border-right:1px solid var(--hairline-soft); transition:width .2s; } .side-link { display:flex; align-items:center; gap:20px; min-height:43px; padding:0 13px; border-radius:9px; color:var(--text-dim); font-size:13px; font-weight:600; white-space:nowrap; } .side-link span { width:18px; color:var(--muted-hi); font-size:18px; text-align:center; } .side-link:hover,.side-link.active { color:var(--text-hi); background:var(--raised); } .side-link.active span { color:var(--ink-pink); } .sidebar hr { height:1px; border:0; margin:13px 0; background:var(--line); } .side-label { margin:0 13px 8px; color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.06em; } .sidebar-footer { margin:28px 12px 0; color:var(--soft); font-size:11px; line-height:1.9; } .sidebar-footer a:hover { color:var(--text); text-decoration:underline; } .sidebar.collapsed { width:70px; } .sidebar.collapsed .side-link { gap:0; justify-content:center; padding:0; font-size:0; } .sidebar.collapsed .side-label,.sidebar.collapsed .sidebar-footer { display:none; } .sidebar.collapsed ~ .app-content,.sidebar.collapsed ~ .site-footer { margin-left:70px; } /* ---- Layout ------------------------------------------------------------- */ .app-content { max-width:1710px; min-height:70vh; margin-left:225px; padding:0 34px 40px; transition:margin-left .2s; outline:0; } .site-footer { margin-left:225px; padding:26px 34px 40px; border-top:1px solid var(--line); color:var(--soft); font-size:12px; transition:margin-left .2s; } .site-footer nav { display:flex; flex-wrap:wrap; gap:8px 18px; margin-bottom:12px; } .site-footer nav a,.site-footer nav button { color:var(--muted-hi); font-size:12px; font-weight:600; } .site-footer nav a:hover { color:var(--text); text-decoration:underline; } .site-footer nav .linkish { color:var(--muted-hi); } .site-footer p { max-width:70ch; margin:0; line-height:1.6; } .site-footer .social-links { margin-bottom:12px; } .site-footer .social-links a { color:var(--ink-pink); } .loading-state { display:flex; align-items:center; gap:12px; padding:60px 0; color:var(--muted); } .spinner { width:18px; height:18px; border:2px solid var(--line-strong); border-top-color:var(--pink); border-radius:50%; animation:spin .8s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } } .button-primary { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:11px 16px; border:0; border-radius:10px; color:#14101c; background:linear-gradient(135deg,#ff5ca8,#a982ff); font:700 13px var(--display); } .button-primary:hover { filter:brightness(1.07); } .fresh-pill { position:sticky; z-index:5; top:78px; display:block; margin:12px auto 0; padding:9px 16px; border:0; border-radius:999px; color:#14101c; background:linear-gradient(135deg,#7fe3b0,#8fd0ff); font:700 13px var(--display); box-shadow:0 10px 24px var(--shadow-lg); } .empty-state { display:grid; justify-items:start; gap:6px; padding:28px; border:1px dashed var(--line-loud); border-radius:14px; background:var(--panel-dim); } .empty-state b { font:700 16px var(--display); } .empty-state p { margin:0 0 8px; color:var(--muted); } /* ---- Filters ------------------------------------------------------------ */ .filter-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 18px; padding:18px 0; } .category-row { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; } .category-row::-webkit-scrollbar { display:none; } .category { flex:none; border:0; border-radius:8px; padding:8px 13px; color:var(--text-dim); background:var(--raised); font-size:12px; font-weight:700; } .category:hover,.category.active { color:var(--chip-fg); background:var(--chip-bg); } .segmented { display:flex; padding:3px; border:1px solid var(--line-strong); border-radius:10px; background:var(--panel-dim); } .segment { padding:6px 11px; border-radius:7px; color:var(--muted-hi); font-size:12px; font-weight:700; white-space:nowrap; } .segment:hover { color:var(--text); } .segment.active { color:var(--text-hi); background:var(--raised-hi); } /* ---- Chips and status --------------------------------------------------- */ .card-chips { display:flex; flex-wrap:wrap; gap:5px; } .chip { display:inline-flex; align-items:center; padding:3px 8px; border-radius:20px; color:var(--muted-hi); background:var(--panel-soft); font:700 10px var(--display); letter-spacing:.03em; white-space:nowrap; } .chip-pink { color:var(--ink-pink); background:var(--pink-wash); } .chip-blue { color:var(--ink-blue); background:var(--blue-wash); } .chip-purple { color:var(--ink-purple); background:var(--purple-wash); } .chip-gold { color:var(--ink-gold); background:var(--gold-wash); } .chip-green { color:var(--ink-green); background:var(--green-wash); } .chip-viral { color:#fff; background:linear-gradient(135deg,#ff7a3d,#f63b53); } .chip-sponsored { color:var(--ink-warm); background:var(--warm-wash); } .chip-mine { color:var(--ink-green); background:var(--green-wash); } .chip-new { color:#14101c; background:#7fe3b0; } .final-hour { padding:1px 7px; border-radius:5px; color:#fff; background:#e4344d; font-size:10.5px; font-weight:700; } .extended-mark { color:var(--ink-warm); font-weight:700; } .battle-countdown.is-final { color:var(--red); font-weight:700; } .card-status { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:0; color:var(--muted); font-size:12px; } .status-dot { width:7px; height:7px; border-radius:50%; background:var(--line-loud); } .status-dot.is-open { background:#34d58b; box-shadow:0 0 0 3px rgba(52,213,139,.18); } .voted-mark { color:var(--ink-green); font-weight:700; } /* ---- Thumbnails (images, never players) ---------------------------------- */ .card-thumb { position:relative; display:block; aspect-ratio:16/9; overflow:hidden; border-radius:10px; background:var(--skeleton); } .card-thumb img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .35s ease; } .card-thumb.is-sample { display:grid; place-items:center; background:repeating-linear-gradient(135deg,var(--panel-soft) 0 10px,var(--panel-dim) 10px 20px); color:var(--soft); font:700 10px var(--display); letter-spacing:.08em; text-transform:uppercase; } .card-thumb.size-sm { width:88px; flex:none; border-radius:8px; } .card-thumbs { display:grid; grid-template-columns:1fr 26px 1fr; align-items:center; gap:4px; } .card-thumbs.is-small { grid-template-columns:72px 20px 72px; } .card-thumbs.is-small .card-thumb { width:72px; } .card-vs { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; color:#fff; background:linear-gradient(135deg,#ff5ca8,#a982ff); font:700 9px var(--display); } .card-thumbs.is-small .card-vs { width:20px; height:20px; font-size:7px; } /* ---- Feed --------------------------------------------------------------- */ .feed-section { padding:30px 0 6px; } .section-title { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:16px; } .section-title h2 { margin:0; font:600 21px/1.1 var(--display); letter-spacing:-.04em; } .view-all { color:var(--ink-purple); font-size:12px; font-weight:700; white-space:nowrap; } .view-all:hover { text-decoration:underline; } .tiny-kicker,.eyebrow { display:flex; align-items:center; margin:0 0 6px; color:var(--ink-pink); font-size:10px; font-weight:700; letter-spacing:.08em; } .tiny-kicker span,.eyebrow span { display:inline-block; width:6px; height:6px; margin-right:7px; border-radius:50%; background:#f94d7b; animation:pulse 1.8s infinite; } @keyframes pulse { 50% { opacity:.4; } } .battle-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(var(--card-min,380px),1fr)); gap:24px 20px; } /* Card size, picked by the reader (S / M / L), remembered in the browser. */ :root[data-grid="s"] { --card-min:210px; } :root[data-grid="m"] { --card-min:380px; } :root[data-grid="l"] { --card-min:540px; } :root[data-grid="s"] .battle-card h3 { font-size:14px; } :root[data-grid="l"] .battle-card h3 { font-size:19px; } .grid-size { display:flex; align-items:center; gap:6px; margin-left:auto; } .grid-size .segment { border:0; background:none; font-size:12px; } .grid-size-label { color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.06em; } .battle-card-link { display:grid; gap:11px; } .battle-card-link:hover .card-thumb img { transform:scale(1.04); } .battle-card-link:hover h3 { color:var(--ink-pink); } .card-info { display:grid; gap:6px; } .card-info h3 { margin:0; font:600 15px/1.25 var(--display); letter-spacing:-.02em; transition:color .15s; } .card-sides { color:var(--text-dim); font-size:12.5px; font-weight:600; } .card-sides i,.feature-sides i { color:var(--soft); font-style:normal; font-weight:500; } .feature { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr); gap:28px; align-items:center; padding:6px 0 30px; border-bottom:1px solid var(--line); } .feature-thumbs { display:grid; grid-template-columns:1fr 36px 1fr; align-items:center; gap:6px; } .feature-thumbs .card-vs { width:36px; height:36px; font-size:11px; } .feature-thumbs:hover img { transform:scale(1.03); } .feature-copy { display:grid; gap:10px; justify-items:start; } .feature-copy h1 { margin:0; font:700 clamp(26px,2.6vw,38px)/1.05 var(--display); letter-spacing:-.05em; } .feature-sides { margin:0; font-size:15px; } .feature-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:6px; } .watch-button { padding:11px 16px; border-radius:9px; color:#171519; background:#f1f1f3; font-size:13px; font-weight:700; } [data-theme="light"] .watch-button { color:#fff; background:#17171c; } .feature-countdown { color:var(--muted); font:500 12px ui-monospace,Menlo,monospace; font-variant-numeric:tabular-nums; } .belt-line { margin:0; font-size:12.5px; color:var(--muted); } .belt-line b { color:var(--text-hi); } .belt-mark { color:var(--ink-gold); } .streak-flame { font-style:normal; padding:2px 7px; border-radius:20px; background:var(--warm-wash); border:1px solid var(--warm-edge); color:var(--ink-warm); font-size:11px; font-weight:700; } .category-tiles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; } .category-tile { position:relative; display:grid; gap:6px; min-height:130px; padding:16px; overflow:hidden; border-radius:12px; color:#fff; align-content:end; } .category-tile::after { content:""; position:absolute; width:150px; height:150px; right:-40px; top:-60px; border:10px solid rgba(255,255,255,.22); border-radius:50%; } .category-tile span { font-size:10px; font-weight:700; letter-spacing:.08em; opacity:.85; } .category-tile b { font:700 22px/1 var(--display); letter-spacing:-.05em; } .category-tile small { font-size:11px; opacity:.85; } .category-tile:hover { filter:brightness(1.08); } .tile-pink { background:linear-gradient(135deg,#e84e9a,#692d91 61%,#272256); } .tile-blue { background:linear-gradient(135deg,#72c5e1,#3b68ad 53%,#272162); } .tile-purple { background:linear-gradient(135deg,#b58cff,#5b3aa8 55%,#231a4d); } .tile-gold { background:linear-gradient(135deg,#ffcc5b,#d96358 54%,#69326b); } .tile-green { background:linear-gradient(135deg,#6ee2ad,#2f8f7a 52%,#1d3350); } .winner-row,.leaderboard-list,.queue-list { display:grid; gap:10px; margin:0; padding:0; list-style:none; } .winner-row { grid-template-columns:repeat(3,minmax(0,1fr)); } .winner-card,.leader-row { display:flex; align-items:center; gap:12px; padding:11px 13px; border:1px solid var(--line); border-radius:11px; background:var(--panel); } .winner-card:hover,.leader-row:hover { border-color:var(--line-loud); } .place { color:var(--muted); font:500 12px ui-monospace,Menlo,monospace; } .winner-copy,.leader-copy { display:grid; gap:4px; min-width:0; } .winner-copy b,.leader-copy b { overflow:hidden; font:700 14px var(--display); text-overflow:ellipsis; white-space:nowrap; } .winner-copy small { color:var(--muted); font-size:11.5px; } .leader-stats { display:grid; justify-items:end; gap:2px; margin-left:auto; text-align:right; } .leader-stats b { font:700 14px var(--display); color:var(--ink-green); } .leader-stats small { color:var(--muted); font-size:11.5px; font-variant-numeric:tabular-nums; } /* ---- Page headers and static pages --------------------------------------- */ .page-header { display:grid; gap:8px; padding:22px 0 18px; } .page-header h1 { margin:0; font:700 clamp(26px,3vw,36px)/1.08 var(--display); letter-spacing:-.05em; } .page-lede { max-width:66ch; margin:0; color:var(--muted); font-size:15px; line-height:1.55; } .page-actions { margin:0 0 18px; } .static-page { max-width:760px; padding-bottom:20px; } .static-page section { margin-top:22px; } .static-page h2 { margin:0 0 8px; font:700 18px var(--display); letter-spacing:-.03em; } .static-page p,.static-page li { max-width:68ch; color:var(--text-dim); font-size:14.5px; line-height:1.65; } .static-page ul { display:grid; gap:6px; padding-left:1.2em; } .static-page a:not(.button-primary) { color:var(--ink-purple); text-decoration:underline; text-underline-offset:3px; } .fine-print { color:var(--soft)!important; font-size:12.5px!important; } .draft-note { display:inline-block; padding:6px 10px; border:1px solid var(--warm-edge); border-radius:8px; color:var(--ink-warm)!important; background:var(--warm-wash); font-size:12.5px!important; font-weight:700; } .table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:12px; } .table-wrap table { width:100%; min-width:560px; border-collapse:collapse; font-size:13px; } .table-wrap th,.table-wrap td { padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; } .table-wrap th { color:var(--muted); background:var(--panel-soft); font:700 10.5px var(--display); letter-spacing:.07em; text-transform:uppercase; } .table-wrap tr:last-child td { border-bottom:0; } /* ---- Battle page --------------------------------------------------------- The two players sit in their own frames. Nothing here may be positioned over a .player-frame once YouTube's iframe is inside it (policy). */ .battle-page { display:grid; gap:18px; padding:18px 0 10px; } .breadcrumbs { color:var(--soft); font-size:12px; } .breadcrumbs a { color:var(--muted-hi); } .breadcrumbs a:hover { color:var(--text); text-decoration:underline; } .battle-head { display:grid; gap:10px; } .battle-head h1 { margin:0; font:700 clamp(26px,3vw,40px)/1.05 var(--display); letter-spacing:-.05em; } .battle-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; } .fair-match { color:var(--muted); font-size:12px; } .battle-countdown { margin-left:auto; color:var(--muted-hi); font:500 12px ui-monospace,Menlo,monospace; font-variant-numeric:tabular-nums; } .sponsor-wrap { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:stretch; gap:12px; } .sponsor-strip { display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; padding:12px 14px; border:1px solid var(--warm-edge); border-radius:12px; background:var(--warm-wash); } .sponsored-label { padding:3px 8px; border-radius:5px; color:#1b120b; background:#ffbe91; font:700 10px var(--display); letter-spacing:.06em; text-transform:uppercase; } .sponsor-logo { border-radius:7px; } .sponsor-strip p { flex:1; min-width:180px; margin:0; font-size:13px; } .sponsor-tagline { color:var(--muted); } .sponsor-visit { color:var(--ink-warm); font-weight:700; white-space:nowrap; } .sponsor-visit:hover { text-decoration:underline; } .sponsor-intro { display:grid; width:240px; overflow:hidden; border-radius:12px; background:#101014; color:#eee; } .sponsor-intro-media { display:block; line-height:0; } .sponsor-clip { width:240px; aspect-ratio:16/9; object-fit:cover; background:#1d2b4f; } .sponsor-intro-bar { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 8px; font-size:11px; color:#c9c4d0; } .sponsor-skip { padding:4px 10px; border:0; border-radius:6px; color:#14101c; background:#fff; font-size:11px; font-weight:700; } .sponsor-intro.is-done { display:none; } .contenders { container-type:inline-size; } .contenders-inner { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; align-items:start; } .vs-gutter { display:grid; place-items:center; } .vs-gutter span { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; color:#fff; background:linear-gradient(135deg,#ff5ca8,#a982ff); font:700 12px var(--display); box-shadow:0 0 0 5px var(--bg); } .contender { display:grid; gap:9px; align-content:start; min-width:0; } .contender-head { display:flex; align-items:center; gap:9px; } .contender-head b { font:700 16px var(--display); letter-spacing:-.02em; } .side-badge { display:grid; place-items:center; flex:none; width:26px; height:26px; border-radius:7px; color:#14101c; font:700 12px var(--display); } .side-a { background:#ff8fc2; } .side-b { background:#b8a1ff; } .watch-status { margin-left:auto; padding:5px 10px; border:1px solid var(--line-strong); border-radius:999px; color:var(--text-dim); background:var(--panel-soft); font-size:12px; font-weight:700; white-space:nowrap; } .watch-status:hover:not(:disabled) { border-color:var(--line-loud); background:var(--raised); } .watch-status.is-on { border-color:rgba(52,213,139,.45); color:var(--ink-green); background:var(--green-wash); } .watch-status:disabled { cursor:default; opacity:.6; } .watch-status.is-playing { border-color:rgba(255,92,168,.45); color:var(--ink-pink); background:var(--pink-wash); font-variant-numeric:tabular-nums; } .vote-confirm { display:grid; gap:8px; } .vote-confirm b { font:600 16px var(--display); } .vote-confirm p { margin:0; color:var(--text-dim); font-size:13px; line-height:1.55; } .vote-confirm-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:4px; } .vote-confirm-actions .notice-secondary { border-color:var(--line-loud); color:var(--text); } .player-frame { position:relative; width:100%; max-width:100%; aspect-ratio:16/9; min-height:200px; overflow:hidden; border-radius:12px; background:#000; } .player-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; } .player-frame.is-short { width:min(100%,340px); aspect-ratio:9/16; justify-self:center; } .player-facade { position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; background:#000; } .player-facade img { width:100%; height:100%; object-fit:cover; opacity:.92; } .facade-play { position:absolute; left:50%; top:50%; display:grid; place-items:center; width:68px; height:48px; padding-left:4px; border-radius:14px; color:#fff; background:rgba(15,15,17,.82); font-size:20px; transform:translate(-50%,-50%); transition:background .15s, transform .15s; } .player-facade:hover .facade-play,.player-facade:focus-visible .facade-play { background:var(--pink); transform:translate(-50%,-50%) scale(1.05); } /* Attribution: YouTube is the source of every video (Developer Policies III.F.2). */ .facade-source { position:absolute; left:10px; bottom:10px; padding:3px 8px; border-radius:6px; color:#fff; background:rgba(15,15,17,.78); font-size:11px; font-weight:700; letter-spacing:.01em; } .player-notice,.player-loading,.unavailable-card { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:12px; padding:18px; color:#e8e6ec; background:#131317; text-align:center; font-size:13px; } .player-notice p,.unavailable-card p { max-width:34ch; margin:0; line-height:1.5; color:#c7c3cf; } .player-notice-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; } .notice-primary,.notice-secondary { padding:9px 14px; border-radius:8px; font-size:12.5px; font-weight:700; } .notice-primary { border:0; color:#14101c; background:#fff; } .notice-secondary { border:1px solid #5b5b66; color:#f2f2f3; background:transparent; } .unavailable-card b { font:700 15px var(--display); color:#fff; } .credit { display:grid; gap:2px; margin:0; color:var(--muted); font-size:12.5px; } .credit-title { overflow:hidden; color:var(--text-dim); font-weight:600; text-overflow:ellipsis; white-space:nowrap; } .credit-channel { color:var(--muted); } .credit-links { display:flex; flex-wrap:wrap; gap:14px; margin:0; font-size:12px; font-weight:700; } .credit-links a { color:var(--ink-purple); } .credit-links a:hover { text-decoration:underline; } /* Side by side only when each frame can be at least 480px wide (regular) or 340px wide (Shorts); otherwise they stack, so a player is never squeezed under YouTube's 200x200 minimum. */ @container (min-width:1010px) { .contenders-inner { grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr); } } @container (min-width:760px) { .is-shorts .contenders-inner { grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr); } .suggest-slots-inner { grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr); } } .vote-area { display:grid; gap:10px; padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--panel); } .vote-bar { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .vote-button { display:grid; gap:2px; justify-items:center; min-height:54px; padding:9px 12px; border:1px solid var(--line-strong); border-radius:11px; color:var(--text); background:var(--raised); font:700 14px var(--display); transition:transform .15s, background .15s; } .vote-button small { color:var(--muted); font-size:10px; letter-spacing:.08em; } .vote-button:hover:not(:disabled) { transform:translateY(-1px); } .vote-a:hover:not(:disabled) { border-color:#ff8fc2; background:var(--pink-wash); } .vote-b:hover:not(:disabled) { border-color:#b8a1ff; background:var(--purple-wash); } .vote-button:disabled { cursor:not-allowed; opacity:.5; } .vote-watch-chips { grid-column:1 / -1; display:none; justify-content:center; gap:10px; margin:0; font-size:12px; color:var(--soft); } .vote-watch-chips .is-on { color:var(--ink-green); } .disclaimer { margin:0; color:var(--ink-warm); font-size:12.5px; } .disclaimer.is-ok { color:var(--ink-green); } .vote-note { margin:0; color:var(--soft); font-size:12px; } .result-headline { margin:0; font-size:15px; } .result-headline.is-final { font:600 17px var(--display); } .winner-badge { padding:3px 9px; border-radius:6px; color:#10131a; background:#7fe3b0; font:700 11px var(--display); letter-spacing:.06em; text-transform:uppercase; } .results-bar { display:flex; height:34px; overflow:hidden; border-radius:9px; background:var(--track); } .results-bar span { display:flex; align-items:center; min-width:42px; padding:0 10px; color:#14101c; font:700 13px var(--display); transition:width .5s ease; } .results-a { background:#ff8fc2; } .results-b { justify-content:flex-end; background:#b8a1ff; } .results-bar .is-winner { box-shadow:inset 0 -3px 0 rgba(0,0,0,.25); } .results-legend { display:flex; flex-wrap:wrap; gap:6px 16px; margin:0; color:var(--muted); font-size:12.5px; } .results-legend i { display:inline-block; width:9px; height:9px; margin-right:6px; border-radius:3px; } .dot-a { background:#ff8fc2; } .dot-b { background:#b8a1ff; } .next-battle { justify-self:start; margin:4px 0 0; } .inline-status { margin:0; padding:9px 12px; border-radius:9px; color:var(--text); background:var(--panel-soft); font-size:12.5px; font-weight:600; } .battle-about { display:grid; gap:16px; padding-top:6px; } .share-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; } .share-row b { margin-right:4px; font:700 13px var(--display); } .share-row button { padding:8px 12px; border:1px solid var(--line-strong); border-radius:8px; color:var(--text); background:var(--panel-soft); font-size:12px; font-weight:700; } .share-row button:hover { background:var(--raised); } .why-these { display:grid; gap:8px; max-width:760px; } .why-these h2 { margin:0; font:700 16px var(--display); } .why-these p { margin:0; color:var(--text-dim); line-height:1.6; } .battle-links { display:flex; flex-wrap:wrap; gap:8px 18px; font-size:12.5px; font-weight:700; } .battle-links a { color:var(--ink-purple); } .battle-links a:hover { text-decoration:underline; } /* ---- Suggest and queue -------------------------------------------------- */ .suggest-form { display:grid; gap:14px; max-width:980px; } .suggest-slots { container-type:inline-size; } .suggest-slots-inner { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; align-items:start; } .suggest-slot { display:grid; gap:10px; align-content:start; padding:14px; border:1px solid var(--line); border-radius:13px; background:var(--panel); } .slot-error { margin:0; color:var(--red); font-size:12.5px; } [data-theme="light"] .slot-error { color:#b3263a; } .slot-preview { display:flex; align-items:center; gap:11px; padding:9px; border-radius:10px; background:var(--panel-soft); } .slot-preview img { width:96px; aspect-ratio:16/9; object-fit:cover; border-radius:7px; } .slot-preview span { display:grid; gap:3px; min-width:0; } .slot-preview b { overflow:hidden; font-size:12.5px; text-overflow:ellipsis; white-space:nowrap; } .slot-preview small { color:var(--muted); font-size:11.5px; } .slot-loading { margin:0; color:var(--muted); font-size:12.5px; } .slot-bad { margin:0; color:var(--ink-warm); font-size:12.5px; } .slot-details { display:grid; gap:0; } .field-hint { display:block; margin-top:6px; color:var(--soft); font-size:11.5px; line-height:1.45; } .verdict:empty { display:none; } .verdict-block,.verdict-ok,.verdict-pending { display:grid; gap:6px; padding:12px 14px; border-radius:11px; font-size:13px; } .verdict ul { display:grid; gap:4px; margin:0; padding-left:1.1em; } .verdict-block { border:1px solid rgba(246,59,83,.45); background:rgba(246,59,83,.1); } .verdict-block b { color:var(--red); } [data-theme="light"] .verdict-block b { color:#b3263a; } .verdict-ok { border:1px solid rgba(52,213,139,.4); background:var(--green-wash); } .verdict-ok b { color:var(--ink-green); } .verdict-ok p { margin:0; color:var(--text-dim); } .verdict-pending { color:var(--muted); background:var(--panel-dim); border:1px dashed var(--line-loud); } .queue-item { display:flex; align-items:center; gap:14px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--panel); } .upvote { display:grid; justify-items:center; gap:1px; flex:none; width:48px; padding:6px 0; border:1px solid var(--line-strong); border-radius:9px; color:var(--muted-hi); background:var(--panel-soft); font-size:11px; } .upvote b { font:700 14px var(--display); color:var(--text); font-variant-numeric:tabular-nums; } .upvote.is-on { border-color:var(--pink); color:var(--ink-pink); background:var(--pink-wash); } .queue-copy { display:grid; gap:4px; min-width:0; } .queue-copy b { font:700 14.5px var(--display); letter-spacing:-.02em; } .queue-copy small { color:var(--muted); font-size:12px; } /* ---- Forms (shared with dialogs) ----------------------------------------- */ .field { display:block; margin-bottom:12px; } .field > span { display:block; margin-bottom:5px; font:700 9.5px var(--display); letter-spacing:.09em; color:var(--muted); text-transform:uppercase; } .field input,.field select,.field textarea { width:100%; min-height:38px; padding:8px 11px; border:1px solid var(--line-strong); border-radius:9px; color:var(--text); background:var(--field); font-size:13px; } .field input:focus,.field select:focus,.field textarea:focus { border-color:var(--purple); outline:0; box-shadow:inset 0 0 0 1px var(--purple); } .field input:disabled,.field select:disabled { opacity:.7; } .field-row { display:grid; grid-template-columns:1fr 1fr; gap:11px; } .upload-note { margin:0; font-size:11.5px; line-height:1.5; color:var(--soft); } .upload-publish { display:flex; align-items:center; justify-content:center; gap:7px; width:100%; padding:12px; border:0; border-radius:10px; color:#fff; background:linear-gradient(135deg,#ff5ca8,#a982ff); font:700 13px var(--display); } .upload-publish:hover:not(:disabled) { filter:brightness(1.07); } .upload-publish:disabled { cursor:not-allowed; color:var(--soft); background:var(--raised); } .form-status { min-height:1em; margin:0; color:var(--muted); font-size:12.5px; } .removal-form { max-width:640px; } /* ---- Toast, XP, dialogs ------------------------------------------------- */ .toast { position:fixed; z-index:80; right:24px; bottom:24px; display:flex; align-items:center; gap:9px; max-width:320px; padding:12px 15px; border:1px solid var(--line-strong); border-radius:8px; color:var(--text); background:var(--panel-soft); box-shadow:0 14px 32px var(--shadow-lg); opacity:0; transform:translateY(120px); transition:.28s; pointer-events:none; } .toast.show { opacity:1; transform:translateY(0); } .toast span { color:var(--ink-pink); } .toast p { margin:0; font-size:12px; font-weight:600; } .xp-float { position:fixed; z-index:75; right:34px; bottom:88px; padding:7px 13px; border-radius:20px; background:linear-gradient(135deg,#ff5ca8,#a982ff); color:#14101c; font:700 13px var(--display); pointer-events:none; animation:xp-rise 1.4s ease-out forwards; } @keyframes xp-rise { 0% { opacity:0; transform:translateY(14px) scale(.85); } 18% { opacity:1; transform:translateY(0) scale(1); } 100% { opacity:0; transform:translateY(-52px) scale(1); } } .premium-modal { position:fixed; z-index:60; inset:0; display:grid; place-items:center; padding:20px; visibility:hidden; opacity:0; background:rgba(0,0,0,.72); backdrop-filter:blur(7px); transition:.2s; }.premium-modal.open { visibility:visible; opacity:1; }.premium-dialog { position:relative; width:min(440px,100%); overflow:hidden; padding:35px 34px 25px; border:1px solid rgba(232,203,255,.35); border-radius:18px; color:#f6f2f9; background:radial-gradient(circle at 92% 9%,rgba(241,118,202,.4),transparent 23%),linear-gradient(145deg,#3a2460,#18141f 67%); box-shadow:0 28px 75px rgba(0,0,0,.65); transform:translateY(15px) scale(.98); transition:.22s; }.premium-modal.open .premium-dialog { transform:none; }.premium-close { position:absolute; top:9px; right:12px; border:0; color:#e4dce9; background:transparent; font-size:27px; }.plus-mark { display:inline-block; padding:6px 8px; border-radius:5px; color:#281637; background:#ecd2ff; font:700 12px var(--display); }.premium-kicker { margin:20px 0 8px; color:#e8bce9; font-size:9px; font-weight:700; letter-spacing:.13em; }.premium-dialog h2 { margin:0; font:700 34px/.9 var(--display); letter-spacing:-.07em; }.premium-dialog h2 em { color:#e7bcff; font-style:normal; }.premium-intro { margin:17px 0 22px; color:#c4bacb; font-size:12px; line-height:1.55; }.premium-dialog ul { display:grid; gap:13px; margin:0; padding:0; list-style:none; }.premium-dialog li { display:flex; align-items:center; gap:12px; }.premium-dialog li>span { display:grid; place-items:center; flex:none; width:30px; height:30px; border-radius:8px; color:#f1ceff; background:rgba(213,152,255,.13); font-size:15px; }.premium-dialog li strong,.premium-dialog li small { display:block; }.premium-dialog li strong { color:#f2edf6; font-size:12px; }.premium-dialog li small { margin-top:2px; color:#aaa1b1; font-size:10.5px; }.price-row { display:flex; align-items:end; justify-content:space-between; margin:24px 0 12px; padding-top:19px; border-top:1px solid rgba(255,255,255,.13); }.price-row strong { font:700 25px var(--display); letter-spacing:-.06em; }.price-row span,.price-row small { color:#aca3b2; font-size:10px; }.activate-premium { width:100%; min-height:45px; border:0; border-radius:8px; color:#211529; background:#e3b4ff; font-size:12px; font-weight:800; }.activate-premium span { margin-left:8px; font-size:16px; }.demo-note { margin:10px 0 0; color:#938a99; text-align:center; font-size:9.5px; } .premium-error { margin:0 0 11px; padding:9px 11px; border:1px solid rgba(246,59,83,.45); border-radius:8px; color:#ffb9c4; background:rgba(246,59,83,.16); font-size:11.5px; line-height:1.45; } .levelup-modal { position:fixed; z-index:50; inset:0; display:none; place-items:center; padding:20px; background:rgba(8,8,11,.82); backdrop-filter:blur(7px); } .levelup-modal.open { display:grid; } .levelup-dialog { position:relative; width:min(390px,100%); padding:34px 28px 26px; border:1px solid #48414f; border-radius:18px; color:#f6f2f9; background:linear-gradient(165deg,#241d31,#141418 72%); text-align:center; overflow:hidden; animation:levelup-pop .4s cubic-bezier(.2,1.1,.4,1); } @keyframes levelup-pop { from { opacity:0; transform:translateY(18px) scale(.94); } to { opacity:1; transform:none; } } .levelup-rays { position:absolute; top:-120px; left:50%; width:340px; height:340px; margin-left:-170px; border-radius:50%; background:radial-gradient(circle,rgba(255,92,168,.35),transparent 66%); } .levelup-badge { position:relative; display:grid; place-items:center; width:74px; height:74px; margin:0 auto 15px; border-radius:22px; background:linear-gradient(140deg,#ffd479,#ff5ca8 55%,#a982ff); color:#16101f; font:700 30px var(--display); } .levelup-kicker { margin:0; font:700 10.5px var(--display); letter-spacing:.16em; color:#ffbdd9; } .levelup-dialog h2 { margin:7px 0 8px; font:700 25px var(--display); } .levelup-unlock { margin:0 0 20px; font-size:12.5px; color:#b3a9c0; } .levelup-close { width:100%; padding:12px; border:0; border-radius:10px; background:#f2d2ff; color:#1d1722; font:700 13px var(--display); } .settings-modal { position:fixed; z-index:70; inset:0; display:grid; place-items:center; padding:20px; visibility:hidden; opacity:0; background:rgba(0,0,0,.6); transition:opacity .18s, visibility .18s; } .settings-modal.open { visibility:visible; opacity:1; } .settings-dialog { width:min(430px,100%); max-height:calc(100vh - 40px); overflow-y:auto; padding:22px; border:1px solid var(--line-strong); border-radius:15px; background:var(--panel); box-shadow:0 28px 70px var(--shadow-modal); transform:translateY(10px); transition:transform .18s; } .settings-modal.open .settings-dialog { transform:none; } .settings-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:5px; } .settings-head h2 { margin:0; font:700 19px var(--display); letter-spacing:-.03em; } .settings-close { width:32px; height:32px; border:0; border-radius:50%; color:var(--muted); background:var(--panel-soft); font-size:19px; line-height:1; } .settings-close:hover { color:var(--text); background:var(--raised); } .settings-group { margin:0; padding:0; border:0; } .settings-privacy { margin-top:18px; padding-top:14px; border-top:1px solid var(--line); } .settings-legend { padding:0; font:700 10.5px var(--display); letter-spacing:.09em; color:var(--muted); text-transform:uppercase; } .settings-hint { margin:7px 0 14px; font-size:12px; line-height:1.5; color:var(--muted); } .settings-hint b { color:var(--text); } .settings-button { padding:9px 14px; border:1px solid var(--line-strong); border-radius:9px; color:var(--text); background:var(--panel-soft); font-size:12.5px; font-weight:700; } .settings-button:hover { background:var(--raised); } .theme-options { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .theme-option { position:relative; display:flex; flex-direction:column; align-items:center; gap:9px; padding:11px 8px 10px; border:1px solid var(--line); border-radius:12px; background:var(--panel-soft); cursor:pointer; transition:border-color .15s, background .15s; } .theme-option:hover { border-color:var(--line-loud); background:var(--raised); } .theme-option input { position:absolute; opacity:0; width:0; height:0; } .theme-option:has(input:checked) { border-color:var(--pink); background:var(--raised); } .theme-option:has(input:focus-visible) { outline:2px solid var(--purple); outline-offset:2px; } .theme-name { font:700 11.5px var(--display); color:var(--text); } .theme-option:has(input:checked) .theme-name::after { content:" ✓"; color:var(--pink); } /* Previews use literal colours, not tokens: each tile must show its own theme whichever theme is currently active. */ .theme-preview { position:relative; display:block; width:100%; height:42px; overflow:hidden; border-radius:7px; border:1px solid var(--line-strong); } .theme-preview i { position:absolute; top:0; left:0; right:0; height:11px; } .theme-preview b { position:absolute; left:7px; height:5px; border-radius:2px; } .theme-preview b:nth-of-type(1) { top:19px; width:56%; } .theme-preview b:nth-of-type(2) { top:28px; width:34%; } .preview-light { background:#f4f4f7; } .preview-light i { background:#fff; border-bottom:1px solid #e4e4eb; } .preview-light b { background:#c9c9d4; } .preview-light b:nth-of-type(1) { background:#17171c; } .preview-dark { background:#0f0f11; } .preview-dark i { background:#1c1c20; border-bottom:1px solid #303034; } .preview-dark b { background:#4a4a52; } .preview-dark b:nth-of-type(1) { background:#f2f2f3; } .preview-system { background:linear-gradient(105deg,#f4f4f7 0 50%,#0f0f11 50% 100%); } .preview-system i { background:linear-gradient(105deg,#fff 0 50%,#1c1c20 50% 100%); border-bottom:1px solid #9a9aa6; } .preview-system b { background:linear-gradient(105deg,#c9c9d4 0 50%,#4a4a52 50% 100%); } .preview-system b:nth-of-type(1) { background:linear-gradient(105deg,#17171c 0 50%,#f2f2f3 50% 100%); } /* ---- Consent ------------------------------------------------------------ */ .consent { position:fixed; z-index:90; left:50%; bottom:18px; display:grid; gap:14px; width:min(640px,calc(100% - 24px)); padding:18px; border:1px solid var(--line-strong); border-radius:14px; background:var(--panel); box-shadow:0 20px 50px var(--shadow-modal); transform:translateX(-50%); } .consent-notice { grid-template-columns:1fr auto; align-items:center; width:min(760px,calc(100% - 24px)); padding:12px 14px; } .consent-notice p { margin:0; color:var(--text-dim); font-size:12.5px; } .consent h2 { margin:0 0 6px; font:700 16px var(--display); } .consent-copy p { margin:0; color:var(--text-dim); font-size:13px; line-height:1.55; } .consent a { color:var(--ink-purple); text-decoration:underline; } .consent-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; } .consent-primary,.consent-secondary { padding:9px 15px; border-radius:9px; font-size:12.5px; font-weight:700; } .consent-primary { border:0; color:#14101c; background:linear-gradient(135deg,#ff5ca8,#a982ff); } .consent-secondary { border:1px solid var(--line-strong); color:var(--text); background:var(--panel-soft); } .consent-row { display:flex; gap:10px; align-items:flex-start; margin-top:10px; font-size:13px; color:var(--text-dim); cursor:pointer; } .consent-row input { width:16px; height:16px; margin-top:2px; accent-color:var(--pink); } .consent-fixed { cursor:default; opacity:.8; } .consent-small { margin-top:10px!important; color:var(--soft)!important; font-size:11.5px!important; } /* While a YouTube player exists on the page nothing fixed may sit in front of it: the consent notice waits for the next page, and toasts appear inline in the vote area instead (see ui.js). */ body.player-active .consent,body.player-active .toast,body.player-active .xp-float { display:none!important; } /* The sticky top bar would slide over a player when scrolling, so it scrolls away with the page while a player exists. */ body.player-active .topbar { position:relative; } /* ---- Responsive --------------------------------------------------------- */ @media (max-width:1200px) { .category-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); } .winner-row { grid-template-columns:1fr; } } @media (max-width:1040px) { .feature { grid-template-columns:1fr; gap:18px; } .sponsor-wrap { grid-template-columns:1fr; } .sponsor-intro { width:100%; max-width:360px; } .sponsor-clip { width:100%; } } @media (max-width:870px) { .topbar { height:59px; gap:11px; padding:0 15px; } .brand { min-width:auto; font-size:19px; } .search { width:auto; flex:1; margin-left:10px; } .search input { font-size:12px; } .search button { width:45px; } .topbar-actions { margin-left:0; } .create-icon b { display:none; } .create-icon { padding:0 7px!important; } .sidebar { top:59px; width:260px; transform:translateX(-100%); transition:transform .2s; box-shadow:10px 0 30px var(--shadow-lg); } .sidebar.open { transform:none; } .app-content,.site-footer,.sidebar.collapsed ~ .app-content,.sidebar.collapsed ~ .site-footer { margin-left:0; padding-left:19px; padding-right:19px; } .chip-copy { display:none; } .level-chip { padding:0 5px; } } @media (max-width:540px) { .topbar { padding:0 11px; gap:8px; } .brand { font-size:17px; } .search { margin-left:0; } .search input { padding:0 10px; } .search input::placeholder { color:transparent; } .search button { width:40px; } .premium-button { display:none; } .app-content,.site-footer { padding-left:13px; padding-right:13px; } .filter-bar { padding:12px 0; } .battle-grid { grid-template-columns:1fr; } :root[data-grid="s"] .battle-grid { grid-template-columns:1fr 1fr; gap:16px 10px; } :root[data-grid="s"] .battle-card .card-sides,:root[data-grid="s"] .battle-card .card-status { display:none; } .category-tiles { grid-template-columns:1fr 1fr; gap:9px; } .category-tile { min-height:104px; padding:12px; } .category-tile b { font-size:17px; } .field-row { grid-template-columns:1fr; gap:0; } .queue-item { flex-wrap:wrap; } .toast { right:12px; bottom:12px; left:12px; max-width:none; } .consent { bottom:10px; } .consent-notice { grid-template-columns:1fr; } .consent-actions { justify-content:stretch; } .consent-actions button { flex:1; } .premium-dialog { padding:30px 25px 22px; } .premium-dialog h2 { font-size:30px; } .settings-dialog { padding:17px; } .theme-options { gap:7px; } .vote-button { font-size:13px; } .vote-watch-chips { display:flex; } .battle-countdown { margin-left:0; } } /* ---- Moderation ---------------------------------------------------------- */ .admin-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:16px; } .admin-stat { display:grid; gap:2px; padding:12px 14px; border:1px solid var(--line); border-radius:11px; background:var(--panel); } .admin-stat b { font:700 20px var(--display); font-variant-numeric:tabular-nums; } .admin-stat span { color:var(--muted); font-size:12px; } .admin-tabs { width:fit-content; margin-bottom:16px; } .admin-body { display:grid; gap:14px; } .admin-card { display:grid; gap:10px; padding:16px; border:1px solid var(--line); border-radius:13px; background:var(--panel); } .admin-card p { margin:0; } .admin-card-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; } .admin-card-head small { color:var(--soft); font-size:12px; } .admin-card .field { margin:0; } .admin-pair { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px; } .admin-video { display:flex; gap:12px; padding:10px; border-radius:10px; background:var(--panel-soft); } .admin-thumb { flex:none; width:128px; } .admin-thumb img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:8px; } .admin-video-copy { display:grid; gap:4px; align-content:start; min-width:0; } .admin-video-copy b { font-size:13px; line-height:1.3; } .admin-video-copy small { color:var(--muted); font-size:11.5px; } .admin-video-copy input,.admin-add input,.admin-add select,.admin-table input,.admin-table select,.admin-actions input { min-height:34px; padding:6px 10px; border:1px solid var(--line-strong); border-radius:8px; color:var(--text); background:var(--field); font-size:12.5px; } .admin-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; } .admin-actions input { flex:1; min-width:180px; } .admin-actions .notice-secondary { border-color:var(--line-loud); color:var(--text); } .notice-secondary.danger { border-color:var(--red); color:var(--red); } .admin-details { padding:10px 12px; border-radius:8px; background:var(--panel-soft); color:var(--text-dim); white-space:pre-wrap; } .admin-thumbs { display:flex; flex-wrap:wrap; gap:8px; } .mono { font-family:ui-monospace,Menlo,monospace; font-size:12.5px; } .admin-row { grid-template-columns:auto 1fr auto; align-items:center; } .admin-row-copy { display:grid; gap:4px; min-width:0; } .admin-row-copy small { color:var(--muted); font-size:12px; } .admin-add { display:grid; grid-template-columns:2fr 1fr 1fr 1fr auto; gap:8px; } .admin-table { min-width:900px!important; } .admin-table td { vertical-align:middle!important; } .admin-pool-video { display:flex; align-items:center; gap:10px; max-width:320px; } .admin-pool-video img { width:80px; aspect-ratio:16/9; object-fit:cover; border-radius:6px; } .admin-pool-video span { overflow:hidden; font-size:12.5px; text-overflow:ellipsis; white-space:nowrap; } .admin-table tr.is-removed { opacity:.5; } .admin-sign-in { max-width:320px; } @media (max-width:760px) { .admin-row { grid-template-columns:1fr; } .admin-add { grid-template-columns:1fr; } } /* Suggest: pick-a-video gallery */ .pick-gallery { max-width:980px; margin-bottom:16px; padding:14px 0 4px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .pick-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:10px; } .pick-head h2 { margin:0; font:700 15px var(--display); } .pick-head p { margin:2px 0 0; color:var(--muted); font-size:12.5px; } .pick-arrows { display:flex; gap:6px; flex:none; } .pick-arrow { width:32px; height:32px; border:1px solid var(--line-strong); border-radius:50%; color:var(--text); background:var(--panel-soft); font-size:18px; line-height:1; } .pick-arrow:hover { background:var(--raised); } .pick-row { display:flex; gap:10px; overflow-x:auto; padding:2px 2px 12px; scroll-snap-type:x proximity; scrollbar-width:thin; overscroll-behavior-x:contain; } .pick-row > div { flex:none; scroll-snap-align:start; } .pick-tile { display:grid; gap:3px; width:150px; padding:0; border:0; color:var(--text); background:none; text-align:left; cursor:pointer; transition:opacity .2s; } .pick-tile b { overflow:hidden; font-size:12.5px; white-space:nowrap; text-overflow:ellipsis; } .pick-tile small { color:var(--muted); font-size:11px; } .pick-thumb { position:relative; display:block; aspect-ratio:16/9; overflow:hidden; border:2px solid transparent; border-radius:9px; background:var(--skeleton); } .pick-thumb img { width:100%; height:100%; display:block; object-fit:cover; } .pick-tile:hover .pick-thumb { border-color:var(--line-loud); } .pick-tile.is-picked .pick-thumb { border-color:var(--purple); } .pick-thumb .side-badge { position:absolute; top:6px; left:6px; width:22px; height:22px; font-size:11px; } .pick-flag { position:absolute; right:6px; bottom:6px; padding:2px 6px; border-radius:5px; color:#fff; background:rgba(0,0,0,.68); font-size:10px; font-weight:700; } .pick-tile.is-off { opacity:.4; } .pick-tile:disabled { cursor:not-allowed; } .pick-search { display:flex; max-width:460px; height:38px; margin-bottom:12px; } .pick-search-input { flex:1; min-width:0; padding:0 13px; border:1px solid var(--line-strong); border-right:0; border-radius:9px 0 0 9px; color:var(--text); background:var(--field); font:inherit; font-size:13px; } .pick-search-input:focus { border-color:var(--purple); outline:0; box-shadow:inset 0 0 0 1px var(--purple); } .pick-search-button { width:48px; border:1px solid var(--line-strong); border-radius:0 9px 9px 0; color:var(--text-dim); background:var(--raised); font-size:18px; } .pick-search-button:hover { background:var(--raised-hi); } .pick-status { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; min-height:4px; padding-bottom:8px; } .pick-status:empty { padding:0; } .pick-note { display:flex; align-items:center; gap:4px; margin:0; color:var(--muted); font-size:12.5px; } .pick-note .linkish { font-size:12.5px; } .spinner.is-small { width:12px; height:12px; border-width:2px; } .pick-youtube { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border:1px solid var(--line-strong); border-radius:18px; color:var(--text); background:var(--panel-soft); font-size:12.5px; font-weight:700; } .pick-youtube:hover { border-color:var(--line-loud); background:var(--raised); } .yt-source { font-weight:700; } .pick-back { font-size:12.5px; } @media (max-width:700px) { .pick-arrows { display:none; } .pick-tile { width:132px; } .pick-search { max-width:none; } } .auto-hint { color:var(--ink-green); } /* Moderation flags */ .chip-red { color:var(--red); background:rgba(246,59,83,.14); } .mod-summary { display:contents; } .mod-flags ul { display:grid; gap:4px; margin:0; padding:10px 12px; border-radius:9px; background:var(--panel-soft); list-style:none; } .mod-flag { position:relative; padding-left:16px; font-size:12.5px; line-height:1.4; } .mod-flag::before { content:''; position:absolute; top:.45em; left:2px; width:8px; height:8px; border-radius:50%; } .mod-flag.is-block::before { background:var(--red); } .mod-flag.is-warn::before { background:var(--ink-gold); } .mod-flag b { font-weight:700; } input.is-flag-block { border-color:var(--red)!important; box-shadow:inset 0 0 0 1px var(--red); } input.is-flag-warn { border-color:var(--ink-gold)!important; } .admin-video.is-flag-block { box-shadow:inset 0 0 0 1px var(--red); } .admin-video.is-flag-warn { box-shadow:inset 0 0 0 1px var(--ink-gold); } /* Subcategory chips on category pages */ .sub-row { display:flex; gap:8px; margin:-4px 0 6px; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin; } .sub-chip { display:inline-flex; flex:none; align-items:center; gap:6px; padding:6px 12px; border:1px solid var(--line-strong); border-radius:18px; color:var(--text-dim); background:var(--panel); font-size:12.5px; font-weight:700; white-space:nowrap; } .sub-chip small { color:var(--muted); font-size:11px; font-weight:700; } .sub-chip:hover { border-color:var(--line-loud); color:var(--text); } .sub-chip.active { border-color:transparent; color:var(--bg); background:var(--text); } .sub-chip.active small { color:var(--bg); opacity:.7; } .sub-chip.is-empty { opacity:.55; } /* ---- Logo: VYBE + neon VS ------------------------------------------------ */ .brand-vs { margin-left:-6px; background:linear-gradient(135deg,#ff5ca8,#a982ff); -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:-.04em; filter:drop-shadow(0 0 6px rgba(255,92,168,.55)) drop-shadow(0 0 14px rgba(169,130,255,.35)); } [data-theme="light"] .brand-vs { filter:drop-shadow(0 0 4px rgba(255,92,168,.35)); } @media (prefers-reduced-motion:no-preference) { .brand:hover .brand-vs { filter:drop-shadow(0 0 9px rgba(255,92,168,.8)) drop-shadow(0 0 20px rgba(169,130,255,.55)); } } .admin-row { display:flex; flex-wrap:wrap; gap:10px; align-items:end; } .admin-row .admin-grow { flex:1; min-width:240px; } .admin-row select { min-height:40px; padding:6px 10px; border:1px solid var(--line-strong); border-radius:8px; color:var(--text); background:var(--field); } .notice-secondary.is-on { border-color:#f63b53; color:#fff; background:linear-gradient(135deg,#ff7a3d,#f63b53); } /* Comments */ .comments { display:grid; gap:14px; margin-top:26px; padding-top:22px; border-top:1px solid var(--line); } .comments-head { display:flex; align-items:center; justify-content:space-between; gap:12px; } .comments-head h2 { margin:0; font:700 19px var(--display); letter-spacing:-.02em; } .comments-note { margin:0; color:var(--muted); font-size:13px; } .comments-locked { display:flex; align-items:center; gap:12px; padding:16px; border:1px dashed var(--line-loud); border-radius:12px; background:var(--panel-dim); } .comments-locked p { margin:0; color:var(--text-dim); font-size:13.5px; } .comments-lock { font-size:22px; } .comment-form { display:grid; gap:8px; } .comment-form.is-reply { margin-top:8px; } .comment-input { width:100%; min-height:64px; padding:10px 12px; border:1px solid var(--line-strong); border-radius:10px; color:var(--text); background:var(--field); font:inherit; font-size:14px; resize:vertical; } .comment-input:focus { border-color:var(--purple); outline:0; box-shadow:inset 0 0 0 1px var(--purple); } .comment-form-foot { display:flex; align-items:center; gap:10px; } .comment-rules { flex:1; color:var(--soft); font-size:11.5px; } .comment-counter { color:var(--muted); font-size:11.5px; font-variant-numeric:tabular-nums; } .comment-send { padding:8px 16px; } .comment-list,.comment-replies { display:grid; gap:14px; margin:0; padding:0; list-style:none; } .comment { display:grid; grid-template-columns:34px 1fr; gap:10px; } .comment-replies { grid-column:2; gap:12px; margin-top:4px; padding-left:4px; border-left:2px solid var(--line); } .comment.is-reply { grid-template-columns:28px 1fr; padding-left:10px; } .comment-avatar { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:#14101c; background:linear-gradient(135deg,#ff8fc2,#b8a1ff); font:700 12px var(--display); } .comment.is-reply .comment-avatar { width:28px; height:28px; font-size:10.5px; } .comment-main { display:grid; gap:4px; min-width:0; } .comment-meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0; font-size:12.5px; } .comment-meta time { color:var(--soft); font-size:11.5px; } .comment-level { padding:1px 6px; border-radius:6px; color:var(--muted-hi); background:var(--raised); font-size:10.5px; font-weight:700; } .comment-side { padding:1px 7px; border-radius:6px; color:#14101c; font-size:10.5px; font-weight:700; } .comment-text { margin:0; color:var(--text-dim); font-size:14px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; } .comment-deleted { grid-column:1 / -1; margin:0; color:var(--soft); font-size:13px; font-style:italic; } .comment-actions { display:flex; gap:4px; margin-left:-6px; } .comment-action { padding:3px 7px; border:0; border-radius:6px; color:var(--muted); background:none; font-size:12px; font-weight:700; } .comment-action:hover { color:var(--text); background:var(--raised); } .comment-like.is-on { color:var(--ink-pink); } .comments-sort .segment { border:0; background:none; } .comments-sort .segment.active { color:var(--text-hi); background:var(--raised); } .yt-likes { margin:4px 0 0; color:var(--muted-hi); font-size:12.5px; font-weight:700; } .filter-right { display:flex; flex-wrap:wrap; align-items:center; gap:10px; } .pick-row.is-drifting { scroll-snap-type:none; } /* The picked video leads the matches row and stays put while it scrolls. */ .pick-row > .is-pinned { position:sticky; left:0; z-index:1; padding-right:12px; background:linear-gradient(90deg,var(--bg) 88%,transparent); } .pick-row > .is-pinned .pick-thumb { border-width:3px; } .pick-row > .is-pinned small { color:var(--ink-pink); font-weight:700; } .pick-row > .is-pinned .pick-tile:hover small { text-decoration:underline; } /* Notifications bell */ .bell-wrap { position:relative; } .bell-button { position:relative; font-size:18px; } .bell-badge { position:absolute; top:2px; right:-2px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; color:#fff; background:var(--red); font:700 10px/16px var(--font); text-align:center; } .notify-panel { position:absolute; z-index:30; top:calc(100% + 8px); right:-60px; width:min(360px,calc(100vw - 24px)); max-height:min(520px,70vh); overflow:auto; border:1px solid var(--line-strong); border-radius:12px; background:var(--panel); box-shadow:0 16px 38px var(--shadow-lg); } .notify-head { position:sticky; top:0; display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--line); background:var(--panel); } .notify-list { margin:0; padding:4px; list-style:none; } .notify-item { display:grid; gap:2px; width:100%; padding:10px 12px; border:0; border-radius:8px; color:var(--text-dim); background:none; text-align:left; } .notify-item:hover { background:var(--raised); } .notify-item.is-unread { color:var(--text); background:var(--purple-wash); } .notify-title { font-size:13px; font-weight:700; } .notify-body { color:var(--muted); font-size:12px; } .notify-item time { color:var(--soft); font-size:11px; } .notify-empty { margin:0; padding:18px 14px; color:var(--muted); font-size:13px; } .notify-foot { display:block; padding:10px 14px; border-top:1px solid var(--line); color:var(--ink-purple); font-size:12px; font-weight:700; } /* Account area */ .account-head { display:flex; align-items:center; gap:16px; margin:8px 0 14px; } .account-head h1 { margin:2px 0; font:700 28px var(--display); letter-spacing:-.03em; } .account-avatar { display:grid; place-items:center; width:64px; height:64px; overflow:hidden; border-radius:50%; background:var(--raised); font-size:28px; flex:none; } .account-avatar img,.account-avatar .vybe-avatar { width:100%; height:100%; object-fit:cover; } .vybe-avatar { display:grid; place-items:center; width:100%; height:100%; border-radius:50%; } .user-avatar .vybe-avatar { font-size:16px; } .comment-avatar img,.comment-avatar .vybe-avatar { width:100%; height:100%; border-radius:50%; object-fit:cover; } .comment-avatar .vybe-avatar { font-size:15px; } .comment-author { color:var(--text); font-weight:700; } .account-tabs { margin-bottom:16px; } .account-body { display:grid; gap:16px; } .account-stat { text-decoration:none; color:inherit; } a.account-stat:hover { border-color:var(--line-loud); } .account-level p { margin:0 0 6px; color:var(--muted-hi); font-size:13px; } .xp-bar { height:10px; overflow:hidden; border-radius:6px; background:var(--raised); } .xp-bar i { display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,var(--pink),var(--purple)); } .account-note { margin:0; color:var(--muted-hi); font-size:13.5px; } .account-subhead { margin:12px 0 0; font:700 18px var(--display); } .account-row { display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--panel); } .account-row-link { display:flex; flex:1; align-items:center; gap:14px; min-width:0; color:inherit; } .account-form { display:grid; gap:16px; max-width:640px; } .account-form textarea,.handle-input input { width:100%; padding:10px 12px; border:1px solid var(--line-strong); border-radius:10px; color:var(--text); background:var(--field); font:inherit; } .handle-input { display:flex; align-items:center; gap:6px; } .handle-input i { color:var(--muted); font-style:normal; font-weight:700; } .avatar-picker { display:flex; flex-wrap:wrap; gap:8px; } .avatar-option { display:grid; place-items:center; width:46px; height:46px; padding:0; overflow:hidden; border:2px solid transparent; border-radius:50%; background:var(--raised); font-size:20px; } .avatar-option img { width:100%; height:100%; object-fit:cover; } .avatar-option.is-on { border-color:var(--purple); box-shadow:0 0 0 2px var(--purple-wash); } .check-field { display:flex; align-items:flex-start; gap:10px; font-size:13.5px; line-height:1.45; } .check-field input { margin-top:3px; accent-color:var(--purple); } .account-fieldset { display:grid; gap:10px; margin:0; padding:14px 16px; border:1px solid var(--line); border-radius:12px; } .account-fieldset legend { padding:0 6px; font-weight:700; } .sub-row.wrap { flex-wrap:wrap; overflow:visible; } .save-button { padding:4px 10px; border:1px solid var(--line-strong); border-radius:14px; color:var(--text-dim); background:none; font-size:12px; font-weight:700; } .save-button.is-on { border-color:var(--ink-gold); color:var(--ink-gold); } .onboard-dialog { max-width:520px; } .onboard-chips { margin:6px 0 12px; } .onboard-steps { margin:0 0 16px; padding-left:18px; color:var(--muted-hi); font-size:13px; line-height:1.6; } /* Reading preferences */ :root[data-text="large"] body { font-size:16px; } :root[data-text="large"] .battle-card h3,:root[data-text="large"] .comment-text { font-size:1.12em; } :root[data-motion="reduce"] *,:root[data-motion="reduce"] *::before,:root[data-motion="reduce"] *::after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } .settle-button { justify-self:start; padding:9px 14px; border:1px solid var(--line-strong); border-radius:20px; color:var(--text); background:var(--panel-soft); font-size:13px; font-weight:700; } .settle-button:hover { border-color:var(--line-loud); background:var(--raised); } .friend-line { margin:0; padding:10px 12px; border-radius:10px; background:var(--purple-wash); font-weight:700; } /* Progress panels */ .progress-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:14px; } .progress-panel { display:grid; gap:10px; align-content:start; padding:16px; border:1px solid var(--line); border-radius:13px; background:var(--panel); } .progress-panel h2 { margin:0; font:700 16px var(--display); } .streak-line { display:flex; align-items:center; gap:8px; margin:0; font-size:14px; } .streak-days { font:700 28px var(--display); } .xp-bar.small { height:6px; } .quest-list,.perk-list,.shop-list { display:grid; gap:10px; margin:0; padding:0; list-style:none; } .quest-list li { display:grid; grid-template-columns:1fr auto; gap:4px 10px; font-size:13px; } .quest-list li .xp-bar { grid-column:1 / -1; } .quest-list li.is-done { color:var(--ink-green); } .perk-list li { color:var(--muted); font-size:13px; } .perk-list li.is-on { color:var(--text); } .shop-list li { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; } .credit-balance { font:700 22px var(--display); color:var(--ink-gold); } .frame-picker { display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:13px; } .medal-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; margin:0; padding:0; list-style:none; } .medal-grid li { display:grid; justify-items:center; gap:2px; padding:10px 8px; border:1px dashed var(--line-strong); border-radius:10px; color:var(--soft); text-align:center; font-size:11.5px; filter:grayscale(1); opacity:.6; } .medal-grid li.is-earned { border-style:solid; border-color:var(--ink-gold); color:var(--text); filter:none; opacity:1; background:var(--gold-wash); } .medal-grid b { font-size:12.5px; } .medal-icon { font-size:26px; } .invite-link { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0; } .invite-link code { flex:1; min-width:0; overflow:hidden; padding:8px 10px; border-radius:8px; background:var(--field); font-size:12px; text-overflow:ellipsis; white-space:nowrap; } .squad-table td,.squad-table th { font-size:12.5px; } /* Avatar frames */ .avatar-frame { display:grid; place-items:center; width:100%; height:100%; border-radius:50%; } .avatar-frame > * { width:100%; height:100%; border-radius:50%; } .frame-gold { box-shadow:0 0 0 3px #ffd479; } .frame-neon { box-shadow:0 0 0 3px #6ee2ad, 0 0 10px #6ee2ad; } .frame-fire { box-shadow:0 0 0 3px #ff7a3d, 0 0 12px #f63b53; } .frame-curator { box-shadow:0 0 0 3px #ff8fc2; } .frame-legend { box-shadow:0 0 0 3px #ffd479, 0 0 0 5px #b58cff; } .creator-badge { margin-left:6px; padding:1px 7px; border-radius:6px; color:#0f1a14; background:var(--ink-green); font-size:10.5px; font-weight:700; vertical-align:middle; } h1 .creator-badge { font-size:12px; } .claim-code { padding:2px 8px; border-radius:6px; background:var(--field); font-weight:700; letter-spacing:.06em; user-select:all; } .creator-form input { flex:1; min-width:240px; } /* AI or real? */ .round-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(var(--card-min,380px),1fr)); gap:20px; } .round-card { display:grid; gap:10px; align-content:start; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--panel); } .round-card h3 { margin:0; font:700 16px var(--display); } .round-card .card-thumb { width:100%; } .guess-buttons { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .guess-button { padding:14px; border:1px solid var(--line-strong); border-radius:12px; color:var(--text); background:var(--panel-soft); font:700 15px var(--display); } .guess-button.is-ai:hover { border-color:#b8a1ff; background:var(--purple-wash); } .guess-button.is-real:hover { border-color:#6ee2ad; background:var(--green-wash); } .round-status,.round-split { margin:0; color:var(--muted); font-size:13px; } .round-answer { margin:0; font:700 18px var(--display); } .round-verdict { margin:0; } .detective-board { display:grid; gap:8px; margin:0; padding:0; list-style:none; } .detective-board li { display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--panel); } .detective-board small { margin-left:auto; color:var(--muted); } /* Progress drawer and the climb */ .progress-drawer { width:min(820px,100%); max-width:none; max-height:90vh; overflow-y:auto; } .progress-drawer-body { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; } .progress-summary { display:flex; align-items:center; gap:14px; } .progress-summary > div { display:grid; flex:1; gap:6px; min-width:0; } .progress-summary small { color:var(--muted); font-size:12px; } .progress-tier { display:grid; place-items:center; flex:none; width:54px; height:54px; border-radius:50%; background:var(--raised); box-shadow:0 0 0 3px var(--tier); font-size:26px; } .progress-open { justify-self:start; } .roadmap { border-radius:16px; overflow:hidden; } .roadmap-svg { display:block; width:100%; height:auto; } :root { --rm-sky-top:#241a44; --rm-sky-bottom:#3a2556; --rm-rock-top:#5b4a7a; --rm-rock-bottom:#2a2238; --rm-snow:#f2f2f3; } :root[data-theme="light"] { --rm-sky-top:#cfe6ff; --rm-sky-bottom:#f3e8ff; --rm-rock-top:#9c8cc0; --rm-rock-bottom:#5f537a; --rm-snow:#ffffff; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --rm-sky-top:#cfe6ff; --rm-sky-bottom:#f3e8ff; --rm-rock-top:#9c8cc0; --rm-rock-bottom:#5f537a; --rm-snow:#ffffff; } } .rm-snow { fill:var(--rm-snow); opacity:.9; } .rm-trail { fill:none; stroke:rgba(255,255,255,.35); stroke-width:4; stroke-dasharray:2 9; stroke-linecap:round; } .rm-trail-done { fill:none; stroke:#ffd479; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; } .rm-stop circle { fill:#2a2238; stroke:rgba(255,255,255,.4); stroke-width:2; } .rm-stop.is-reached circle { fill:#ffd479; stroke:#fff; } .rm-stop.is-current circle { stroke:#ff5ca8; stroke-width:4; } .rm-icon { font-size:13px; } .rm-stop:not(.is-reached) .rm-icon { opacity:.45; } .rm-label { fill:#fff; font:700 14px var(--display); paint-order:stroke; stroke:rgba(0,0,0,.45); stroke-width:3px; } .rm-level { fill:rgba(255,255,255,.8); font:600 11px var(--font); paint-order:stroke; stroke:rgba(0,0,0,.4); stroke-width:3px; } .rm-stop:not(.is-reached) .rm-label,.rm-stop:not(.is-reached) .rm-level { opacity:.6; } .rm-you circle { fill:#ff5ca8; stroke:#fff; stroke-width:3; } .rm-you text { fill:#fff; font:700 12px var(--display); paint-order:stroke; stroke:#14101c; stroke-width:4px; } :root:not([data-motion="reduce"]) .rm-you circle { animation:rm-pulse 1.8s ease-in-out infinite; } @keyframes rm-pulse { 50% { stroke-width:6; } } @media (prefers-reduced-motion: reduce) { .rm-you circle { animation:none!important; } } /* ---- Events: banners sit above the feed and in battle headers, never on or over a player ---------------------------------------------------------- */ .event-theme-default { --event-a:#a982ff; --event-b:#ff5ca8; } .event-theme-launch { --event-a:#ff5ca8; --event-b:#ffbe4d; } .event-theme-showdown { --event-a:#ffd479; --event-b:#ff7a3d; } .event-theme-happy_hour { --event-a:#6ee2ad; --event-b:#3fb6ff; } .event-theme-halloween { --event-a:#ff7a1a; --event-b:#8a3cff; } .event-theme-holiday { --event-a:#f63b53; --event-b:#3fcf8e; } .event-theme-super_bowl { --event-a:#3f7cff; --event-b:#f63b53; } .event-banners { display:grid; gap:8px; margin:14px 0 4px; } .event-banners:empty { display:none; } .event-banner { display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:12px; padding:10px 14px; border:1px solid color-mix(in srgb,var(--event-a) 45%,transparent); border-radius:14px; color:var(--text); background:linear-gradient(100deg,color-mix(in srgb,var(--event-a) 20%,var(--panel)),color-mix(in srgb,var(--event-b) 16%,var(--panel))); } .event-banner:hover { border-color:var(--event-a); } .event-banner-icon { font-size:26px; } .event-banner-text { display:grid; gap:2px; min-width:0; } .event-banner-text b { display:flex; align-items:center; gap:8px; font:700 15px var(--display); } .event-banner-text small { overflow:hidden; color:var(--muted-hi); font-size:12px; text-overflow:ellipsis; white-space:nowrap; } .event-live-dot { padding:1px 6px; border-radius:5px; color:#fff; background:var(--red); font:700 9.5px var(--font); letter-spacing:.08em; } .event-banner-time { font:700 14px var(--display); font-variant-numeric:tabular-nums; white-space:nowrap; } .event-banner-cta { padding:6px 12px; border-radius:20px; color:#111; background:var(--event-a); font-size:12px; font-weight:700; white-space:nowrap; } @media (max-width:640px) { .event-banner { grid-template-columns:auto 1fr auto; } .event-banner-cta { display:none; } .event-banner-time { font-size:12px; } } .event-goal { display:grid; gap:4px; } .event-goal-track { height:8px; overflow:hidden; border-radius:6px; background:var(--track); } .event-goal.is-compact .event-goal-track { height:5px; } .event-goal-fill { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--event-a,#a982ff),var(--event-b,#ff5ca8)); transition:width .6s; } .event-goal small { color:var(--muted-hi); font-size:11.5px; } .event-slot:empty { display:none; } .event-inline { display:inline-flex; margin-top:6px; padding:4px 10px; border-radius:20px; color:var(--text); background:color-mix(in srgb,var(--event-a) 22%,var(--panel)); font-size:12.5px; font-weight:700; } .chip-event { color:#111; background:linear-gradient(135deg,#ffd479,#ff7a3d); } .event-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; } .event-card { display:grid; gap:6px; align-content:start; padding:16px; border:1px solid color-mix(in srgb,var(--event-a) 35%,var(--line)); border-radius:16px; color:var(--text); background:linear-gradient(160deg,color-mix(in srgb,var(--event-a) 14%,var(--panel)),var(--panel) 70%); } .event-card:hover { border-color:var(--event-a); } .event-card h3 { margin:0; font:700 18px var(--display); letter-spacing:-.03em; } .event-card p { margin:0; color:var(--muted-hi); font-size:13px; } .event-card-kind { color:var(--event-a); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } .event-card-perks { color:var(--text-dim)!important; font-weight:600; } .event-card-time { font:700 14px var(--display)!important; color:var(--text)!important; font-variant-numeric:tabular-nums; } .event-hero { display:grid; gap:8px; margin:18px 0 8px; padding:22px; border-radius:18px; background:linear-gradient(120deg,color-mix(in srgb,var(--event-a) 26%,var(--panel)),color-mix(in srgb,var(--event-b) 18%,var(--panel))); } .event-hero h1 { margin:0; font:700 clamp(28px,3.4vw,40px)/1.05 var(--display); letter-spacing:-.05em; } .event-hero .page-lede { margin:0; } .event-hero-time { margin:0; font:700 20px var(--display); font-variant-numeric:tabular-nums; } .event-quests .quest-count { color:var(--muted-hi); font-weight:700; font-variant-numeric:tabular-nums; } .bracket { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(210px,1fr); gap:14px; overflow-x:auto; padding-bottom:6px; } .bracket-round { display:grid; gap:10px; align-content:space-around; } .bracket-round h3 { margin:0; color:var(--muted-hi); font-size:11px; letter-spacing:.08em; text-transform:uppercase; } .bracket-match { display:grid; gap:4px; padding:8px; border:1px solid var(--line); border-radius:12px; color:var(--text); background:var(--panel); } .bracket-match:hover { border-color:var(--line-loud); } .bracket-side { display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:8px; font-size:12.5px; } .bracket-side img, .bracket-seeds img, .bracket-champion img { width:44px; aspect-ratio:16/9; object-fit:cover; border-radius:6px; } .bracket-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bracket-side.is-through { color:var(--ink-gold); font-weight:700; } .bracket-side.is-out { opacity:.5; } .bracket-open { color:var(--ink-green); font-weight:700; } .bracket-seeds { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px; padding-left:22px; } .bracket-seeds li { display:flex; align-items:center; gap:8px; } .bracket-champion { display:flex; align-items:center; gap:12px; width:max-content; max-width:100%; margin-bottom:14px; padding:10px 14px; border-radius:14px; background:var(--gold-wash); } .bracket-champion img { width:80px; } .bracket-champion small { display:block; color:var(--ink-gold); font-size:11px; font-weight:700; letter-spacing:.08em; } .frame-launch { box-shadow:0 0 0 3px #ff5ca8, 0 0 0 5px #ffbe4d; } .frame-showdown { box-shadow:0 0 0 3px #ffd479, 0 0 12px #ff7a3d; } .admin-event-form { display:grid; gap:8px; } .admin-event-form .admin-add, .admin-card > .admin-add { display:flex; flex-wrap:wrap; align-items:center; } .admin-event-form input[type="text"] { flex:1; min-width:200px; } .admin-event-form label { display:flex; align-items:center; gap:6px; color:var(--muted-hi); font-size:12px; } .event-preview-note { margin:12px 0 0; padding:8px 12px; border:1px dashed var(--ink-gold); border-radius:10px; color:var(--ink-gold); background:var(--gold-wash); font-size:12.5px; font-weight:700; } /* ---- Events admin (calendar, editor, preview) ---------------------------- */ .ev-toolbar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; margin:6px 0 14px; } .ev-cal-wrap { display:grid; gap:10px; } .ev-cal-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; } .ev-cal-nav { display:flex; align-items:center; gap:8px; } .ev-cal-nav b { min-width:150px; text-align:center; font:700 17px var(--display); } .ev-cal-scroll { overflow-x:auto; } .ev-cal { display:grid; grid-template-columns:repeat(7,minmax(104px,1fr)); gap:4px; min-width:760px; } .ev-cal.is-week .ev-day { min-height:220px; } .ev-dow { padding:0 6px; color:var(--muted); font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } .ev-day { position:relative; display:grid; align-content:start; gap:3px; min-height:96px; padding:6px 6px 22px; border-radius:9px; background:var(--panel); border:1px solid var(--line); } .ev-day.is-out { opacity:.45; } .ev-day.is-past { background:var(--panel-dim); } .ev-day.is-today { border-color:var(--pink); } .ev-daynum { color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; } .ev-add { position:absolute; right:4px; bottom:3px; width:20px; height:20px; border:0; border-radius:6px; color:var(--muted); background:transparent; font-size:15px; line-height:1; opacity:0; } .ev-day:hover .ev-add, .ev-add:focus-visible { opacity:1; background:var(--raised); } .ev-chip { display:block; width:100%; overflow:hidden; padding:3px 6px; border:0; border-radius:6px; color:#111; font-size:11px; font-weight:700; line-height:1.3; text-align:left; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; } .ev-chip small { font-weight:500; opacity:.8; } .kind-showdown { background:#ffd479; } .kind-happy_hour { background:#6ee2ad; } .kind-community_goal { background:#ff8fc2; } .kind-custom { background:#8fd0ff; } .ev-chip.is-draft { outline:1.5px dashed var(--text); outline-offset:-1.5px; opacity:.72; } .ev-chip.is-ended { color:var(--muted); background:var(--raised); } .ev-chip.is-cancelled { color:var(--muted); background:var(--raised); text-decoration:line-through; } .ev-chip.is-live { box-shadow:0 0 0 2px var(--red); } .ev-chip:focus-visible { outline:2px solid var(--pink); outline-offset:1px; } .ev-legend { display:flex; flex-wrap:wrap; gap:14px; color:var(--muted); font-size:11.5px; } .ev-legend span { display:inline-flex; align-items:center; gap:6px; } .ev-swatch { display:inline-block; width:11px; height:11px; border-radius:3px; } .ev-swatch.is-draft { outline:1.5px dashed var(--text); outline-offset:-1.5px; } .ev-swatch.is-ended { background:var(--raised); } .ev-past { display:grid; gap:8px; } .ev-past-row { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--panel); } .ev-past-name { display:grid; gap:2px; padding:0; border:0; color:var(--text); background:none; text-align:left; cursor:pointer; } .ev-past-name small { color:var(--muted); font-size:12px; } .ev-editor-head { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:6px 0 12px; } .ev-editor-head b { font:700 18px var(--display); } .ev-status { padding:2px 8px; border-radius:6px; background:var(--raised); color:var(--muted); font-size:11px; font-weight:700; } .ev-status.is-draft { border:1px dashed var(--line-loud); background:transparent; } .ev-status.is-live { color:#fff; background:var(--red); } .ev-status.is-published { color:#0f1a14; background:var(--ink-green); } .ev-tab-hint { margin-left:10px; align-self:center; } .ev-steps { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; padding:0; list-style:none; } .ev-steps li { padding:5px 12px; border-radius:99px; background:var(--raised); color:var(--muted); font-size:12px; font-weight:700; } .ev-steps li.is-on { color:#150a12; background:var(--pink); } .ev-steps li.is-done { color:var(--ink-green); } .ev-templates { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; } .ev-template { display:grid; align-content:start; gap:6px; padding:16px; border:1px solid var(--line); border-radius:14px; color:var(--text); background:var(--panel); text-align:left; cursor:pointer; } button.ev-template:hover, button.ev-template:focus-visible { border-color:var(--ink-gold); } .ev-template b { font:700 16px var(--display); } .ev-template small { color:var(--muted); font-size:12.5px; line-height:1.4; } .ev-template-icon { font-size:26px; } .ev-template.is-launch { cursor:default; border-style:dashed; } .ev-inline { display:flex; flex-wrap:wrap; align-items:center; gap:6px; } .ev-inline label { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:12px; } .ev-form { display:grid; gap:14px; max-width:920px; } .ev-group { display:grid; gap:10px; margin:0; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--panel); min-width:0; } .ev-group legend { padding:0 6px; font:700 14px var(--display); } .ev-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; } .ev-field { display:grid; gap:4px; min-width:0; } .ev-field > span { color:var(--muted); font-size:12px; font-weight:700; } .ev-form input, .ev-form select, .ev-template input, .ev-template select { min-height:34px; padding:6px 10px; border:1px solid var(--line-strong); border-radius:8px; color:var(--text); background:var(--field); font-size:13px; min-width:0; } .ev-chips { display:flex; flex-wrap:wrap; gap:6px; } .ev-chip-pick { padding:4px 10px; border:0; border-radius:99px; color:#111; background:#8fd0ff; font-size:12px; font-weight:700; } .ev-quests { display:grid; gap:6px; } .ev-quest { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1.3fr) 80px auto; gap:6px; } @media (max-width:640px) { .ev-quest { grid-template-columns:1fr 1fr; } } .ev-actions { position:sticky; bottom:0; padding:10px 0; background:var(--bg); } .ev-preview { display:grid; gap:12px; } .ev-summary { display:grid; gap:4px; } .ev-summary p { margin:0; } .ev-preview-bar { display:flex; flex-wrap:wrap; gap:8px; } .ev-preview-stage { display:grid; justify-items:center; padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--panel-dim); overflow:auto; } .ev-preview-frame { width:100%; height:640px; border:1px solid var(--line-strong); border-radius:10px; background:var(--bg); } .ev-preview-frame.is-phone { width:390px; max-width:100%; height:760px; } /* ---- Bracket builder ---------------------------------------------------- */ .bb-layout { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:16px; align-items:start; } @media (max-width:900px) { .bb-layout { grid-template-columns:1fr; } } .bb-status { margin:0; } .bb-seeds { display:grid; gap:4px; margin:0; padding:0; list-style:none; } .bb-seed { display:grid; grid-template-columns:24px 64px minmax(0,1fr) auto; align-items:center; gap:10px; padding:6px 8px; border:1px solid var(--line); border-radius:10px; background:var(--panel-soft); } .bb-seed[draggable="true"] { cursor:grab; } .bb-seed.is-dragging { opacity:.4; } .bb-seed.is-over { border-color:var(--pink); } .bb-seed.has-warning { border-color:var(--warm-edge); } .bb-seed.is-swapping { border-color:var(--ink-blue); } .bb-seed img { width:64px; aspect-ratio:16/9; object-fit:cover; border-radius:6px; } .bb-num { color:var(--muted); font:700 13px var(--display); text-align:right; font-variant-numeric:tabular-nums; } .bb-copy { display:grid; gap:2px; min-width:0; } .bb-copy b { overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; } .bb-copy small { overflow:hidden; color:var(--muted); font-size:11.5px; text-overflow:ellipsis; white-space:nowrap; } .bb-warnings { display:flex; flex-wrap:wrap; gap:4px; } .bb-warning { padding:1px 6px; border-radius:5px; color:var(--ink-warm); background:var(--warm-wash); font-size:10.5px; font-weight:700; } .bb-tools { display:flex; gap:4px; } .bb-icon, .bb-swap { min-width:30px; height:30px; padding:0 8px; border:1px solid var(--line-strong); border-radius:7px; color:var(--text); background:var(--raised); font-size:12px; font-weight:700; } .bb-icon:disabled { opacity:.35; } .bb-swap { color:var(--ink-blue); } .bb-swap-panel { display:grid; gap:8px; margin:0 0 6px 34px; padding:10px; border:1px dashed var(--ink-blue); border-radius:10px; } .bb-swap-panel input { flex:1; min-width:200px; } .bb-results { display:grid; gap:4px; max-height:320px; overflow:auto; } .bb-result { display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; gap:10px; padding:6px; border:1px solid transparent; border-radius:8px; color:var(--text); background:var(--panel); text-align:left; } .bb-result:hover:not(:disabled) { border-color:var(--ink-blue); } .bb-result:disabled { opacity:.45; } .bb-result img { width:64px; aspect-ratio:16/9; object-fit:cover; border-radius:6px; } .bb-result span { display:grid; min-width:0; } .bb-result b, .bb-result small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bb-result small { color:var(--muted); font-size:11.5px; } .bb-first { display:grid; gap:6px; padding:12px; border-radius:12px; background:var(--panel-soft); font-size:12px; } .bb-first ul { display:grid; gap:5px; margin:0; padding:0; list-style:none; } .bb-first li span { display:inline; } .bb-first i { color:var(--muted); font-style:normal; } /* ---- Events 2.0: preset art -------------------------------------------------- Each art sets two colours (--event-a/--event-b) and a background on a dark base. Art surfaces always use light text, in both site themes. */ .event-theme-stage_lights { --event-a:#b58cff; --event-b:#ff4fa0; } .event-theme-neon_grid { --event-a:#3ff0ff; --event-b:#ff3fd8; } .event-theme-sunset { --event-a:#ff9a3d; --event-b:#ff4f7a; } .event-theme-ocean { --event-a:#3f9dff; --event-b:#3fe0c8; } .event-theme-retro { --event-a:#ffde3f; --event-b:#ff3f6e; } [class*="event-art-"] { --art-base:#141019; } .event-art-default { background:radial-gradient(90% 120% at 90% 0%, rgba(169,130,255,.55), transparent 60%), radial-gradient(80% 120% at 0% 100%, rgba(255,92,168,.45), transparent 60%), var(--art-base); } .event-art-launch { background:radial-gradient(circle at 12% 30%, #ffbe4d 0 3px, transparent 4px) 0 0/46px 46px, radial-gradient(circle at 70% 60%, #ff5ca8 0 3px, transparent 4px) 0 0/58px 58px, radial-gradient(circle at 40% 80%, #8fd0ff 0 2px, transparent 3px) 0 0/38px 38px, radial-gradient(100% 140% at 85% 0%, rgba(255,92,168,.55), transparent 60%), #1a0f1c; } .event-art-showdown { background:repeating-conic-gradient(from 0deg at 85% 30%, rgba(255,212,121,.16) 0 6deg, transparent 6deg 18deg), radial-gradient(90% 130% at 85% 30%, rgba(255,212,121,.5), transparent 60%), radial-gradient(70% 100% at 0% 100%, rgba(255,122,61,.45), transparent 60%), #1e140b; } .event-art-happy_hour { background:repeating-linear-gradient(115deg, rgba(110,226,173,.10) 0 14px, transparent 14px 34px), radial-gradient(100% 140% at 90% 10%, rgba(63,182,255,.5), transparent 60%), #0b1a17; } .event-art-stage_lights { background:conic-gradient(from 160deg at 20% -10%, transparent 0 10deg, rgba(181,140,255,.35) 14deg, transparent 24deg 60deg), conic-gradient(from 170deg at 80% -10%, transparent 0 8deg, rgba(255,79,160,.35) 13deg, transparent 22deg 60deg), radial-gradient(80% 60% at 50% 110%, rgba(255,79,160,.35), transparent 70%), #120c1a; } .event-art-neon_grid { background:linear-gradient(rgba(63,240,255,.16) 1px, transparent 1px) 0 0/28px 28px, linear-gradient(90deg, rgba(255,63,216,.14) 1px, transparent 1px) 0 0/28px 28px, radial-gradient(90% 120% at 80% 0%, rgba(255,63,216,.35), transparent 60%), #0a0b1a; } .event-art-sunset { background:radial-gradient(40% 55% at 78% 70%, #ffcf6b 0 30%, rgba(255,154,61,.6) 45%, transparent 70%), linear-gradient(180deg, #2a1030 0%, #5a1d3a 55%, #ff6a4f 120%); } .event-art-ocean { background:radial-gradient(120% 60% at 50% 120%, rgba(63,224,200,.45), transparent 70%), repeating-radial-gradient(circle at 80% 120%, rgba(63,157,255,.12) 0 10px, transparent 10px 24px), #07162a; } .event-art-retro { background:repeating-linear-gradient(0deg, rgba(255,222,63,.10) 0 4px, transparent 4px 10px), linear-gradient(180deg, transparent 55%, rgba(255,63,110,.45)), radial-gradient(60% 80% at 80% 20%, rgba(255,222,63,.4), transparent 60%), #180b1e; } .event-art-halloween { background:radial-gradient(35% 45% at 82% 25%, rgba(255,122,26,.75), transparent 70%), radial-gradient(90% 120% at 0% 100%, rgba(138,60,255,.45), transparent 60%), #120a14; } .event-art-holiday { background:radial-gradient(circle at 20% 20%, #fff 0 1.5px, transparent 2px) 0 0/40px 40px, radial-gradient(circle at 60% 70%, #fff 0 1px, transparent 1.5px) 0 0/30px 30px, radial-gradient(90% 120% at 90% 0%, rgba(246,59,83,.5), transparent 60%), radial-gradient(80% 100% at 0% 100%, rgba(63,207,142,.4), transparent 60%), #0d1512; } .event-art-super_bowl { background:repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 2px, transparent 2px 60px), radial-gradient(90% 120% at 85% 10%, rgba(63,124,255,.55), transparent 60%), radial-gradient(70% 100% at 0% 100%, rgba(246,59,83,.4), transparent 60%), #0a1020; } /* ---- Takeover (home) and the event page hero ---------------------------------- */ .ev-takeover, .ev-hero { position:relative; display:grid; gap:18px; padding:24px; border-radius:20px; color:#fff; overflow:hidden; } .ev-takeover { grid-template-columns:minmax(0,1fr) auto; align-items:end; margin-top:10px; } .ev-takeover-main { display:grid; gap:12px; justify-items:start; } .ev-takeover h2, .ev-hero h1 { margin:0; font:700 clamp(28px,4.2vw,48px)/1 var(--display); letter-spacing:-.05em; text-wrap:balance; } .ev-tagline { max-width:52ch; margin:0; color:rgba(255,255,255,.85); font-size:14.5px; } .ev-live, .ev-soon { display:inline-flex; padding:3px 9px; border-radius:6px; font-size:10.5px; font-weight:700; letter-spacing:.1em; } .ev-live { background:var(--red); } .ev-soon { background:rgba(255,255,255,.18); } .ev-clock { display:flex; gap:6px; } .ev-clock div { min-width:58px; padding:8px 10px; border-radius:10px; background:rgba(0,0,0,.38); text-align:center; font:700 24px/1 var(--display); font-variant-numeric:tabular-nums; } .ev-clock small { display:block; margin-top:4px; color:rgba(255,255,255,.7); font:700 9.5px var(--font); letter-spacing:.1em; } .ev-actions-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; } .ev-ghost { padding:9px 16px; border:1px solid rgba(255,255,255,.35); border-radius:99px; color:#fff; font-size:13px; font-weight:700; } .ev-ghost:hover { background:rgba(255,255,255,.12); } .ev-takeover-side { display:grid; gap:8px; width:280px; padding:14px; border-radius:14px; background:rgba(0,0,0,.35); } .ev-takeover .event-goal small, .ev-hero .event-goal small { color:rgba(255,255,255,.85); } .ev-takeover .event-goal { width:min(420px,100%); } @media (max-width:760px) { .ev-takeover { grid-template-columns:1fr; padding:18px; } .ev-takeover-side { width:auto; } .ev-clock div { min-width:48px; font-size:19px; } } .ev-hero { margin:18px 0 6px; } .ev-hero-kind { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0; font-size:11.5px; font-weight:700; letter-spacing:.1em; color:rgba(255,255,255,.8); } .ev-hero-perks, .ev-hero-ended { margin:0; font-weight:700; } /* Rewards */ .ev-reward-chips { display:flex; flex-wrap:wrap; gap:8px; } .ev-reward-chip { display:inline-flex; align-items:center; gap:7px; padding:4px 11px 4px 4px; border-radius:99px; background:rgba(0,0,0,.35); font-size:12.5px; font-weight:700; } .ev-avatar { display:inline-grid; place-items:center; overflow:visible; border-radius:50%; background:var(--raised); font-weight:700; } .ev-avatar .avatar-frame, .ev-avatar > span, .ev-avatar img { width:100%; height:100%; border-radius:50%; display:grid; place-items:center; object-fit:cover; } .ev-avatar.is-sm { width:26px; height:26px; font-size:12px; } .ev-avatar.is-lg { width:72px; height:72px; font-size:28px; } .ev-avatar .avatar-frame { box-sizing:border-box; } .ev-medal { font-size:44px; line-height:72px; } .ev-reward-chip .ev-medal, .ev-reward-chip .ev-coin { font-size:16px; line-height:26px; width:26px; text-align:center; } .ev-coin { display:grid; place-items:center; width:72px; height:72px; border-radius:50%; background:var(--gold-wash); color:var(--ink-gold); font-size:30px; } .ev-showcase { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px; } .ev-reward { display:grid; justify-items:center; gap:6px; padding:18px 12px; border:1px solid var(--line); border-radius:16px; background:var(--panel); text-align:center; } .ev-reward b { font:700 15px var(--display); } .ev-reward small { color:var(--muted); font-size:12px; } .ev-limited { color:var(--ink-warm); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } /* Event track */ .ev-track-bar { height:7px; overflow:hidden; border-radius:7px; background:var(--track); } .ev-track-bar i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--ink-green),var(--pink)); transition:width .5s; } .ev-stages { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin:0; padding:0; list-style:none; } .ev-stage { display:grid; justify-items:center; align-content:start; gap:4px; padding:10px 6px; border-radius:12px; text-align:center; } .ev-stage-dot { display:grid; place-items:center; width:38px; height:38px; border:2px solid var(--line-strong); border-radius:50%; background:var(--raised); font:700 15px var(--display); } .ev-stage.is-done .ev-stage-dot { border-color:var(--ink-green); color:#0f1a14; background:var(--ink-green); } .ev-stage.is-now .ev-stage-dot { border-color:var(--pink); box-shadow:0 0 0 5px var(--pink-wash); } .ev-stage.is-final .ev-stage-dot { width:48px; height:48px; border-color:var(--ink-gold); font-size:22px; } .ev-stage-text { font-size:12.5px; font-weight:700; } .ev-stage-count { color:var(--muted); font-variant-numeric:tabular-nums; } .ev-stage-reward { color:var(--ink-gold); font-size:11px; font-weight:700; } .ev-track.is-compact .ev-stages { grid-template-columns:1fr; gap:4px; } .ev-track.is-compact .ev-stage { grid-template-columns:28px 1fr auto; justify-items:start; align-items:center; padding:2px 0; text-align:left; } .ev-track.is-compact .ev-stage-dot { width:26px; height:26px; font-size:11px; } .ev-track.is-compact .ev-stage.is-final .ev-stage-dot { width:26px; height:26px; font-size:13px; } .ev-track.is-compact .ev-stage-reward { display:none; } .ev-takeover-side .ev-stage-count, .ev-takeover-side .ev-stage-text { color:#fff; } /* Remind me and teasers */ .ev-remind { display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border:0; border-radius:99px; color:#150a12; background:linear-gradient(135deg,var(--pink),var(--purple)); font-size:13px; font-weight:700; } .ev-remind.is-on { color:var(--text); background:var(--raised); border:1px solid var(--line-strong); } .ev-teaser { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px 16px; border-radius:14px; color:#fff; } .ev-teaser-icon { font-size:26px; } .ev-teaser-text { display:grid; gap:2px; color:#fff; min-width:0; } .ev-teaser-text b { font:700 16px var(--display); } .ev-teaser-time { color:rgba(255,255,255,.8); font-size:12px; } @media (max-width:640px) { .ev-teaser { grid-template-columns:auto 1fr; } .ev-teaser .ev-remind { grid-column:1 / -1; justify-self:start; } } .event-card { display:grid; align-content:start; gap:10px; color:#fff; border:0; } .event-card-link { display:grid; gap:6px; color:#fff; } .event-card p { color:rgba(255,255,255,.82); } .event-card .event-card-kind { color:rgba(255,255,255,.9); } .event-card .event-card-perks, .event-card .event-card-time { color:#fff!important; } .event-card .ev-remind { justify-self:start; } /* The small live bracket: one line, opens on hover, focus or tap */ .minibracket { display:grid; gap:0; border:1px solid var(--line); border-radius:14px; background:var(--panel); } .mb-strip { display:flex; flex-wrap:wrap; align-items:center; gap:10px; width:100%; padding:10px 14px; border:0; color:var(--text); background:none; font-size:12.5px; text-align:left; cursor:pointer; } .mb-now { color:var(--ink-green); font-weight:700; } .mb-hint { margin-left:auto; color:var(--muted); } .mb-full { display:grid; grid-template-columns:repeat(4,minmax(150px,1fr)); gap:10px; max-height:0; overflow:hidden; padding:0 14px; opacity:0; transition:max-height .35s ease, opacity .25s, padding .25s; } .minibracket:hover .mb-full, .minibracket:focus-within .mb-full, .minibracket.is-open .mb-full { max-height:620px; padding:0 14px 14px; opacity:1; overflow-x:auto; } @media (prefers-reduced-motion:reduce) { .mb-full { transition:none; } } .mb-col { display:grid; align-content:start; gap:6px; font-size:11.5px; } .mb-col > b { color:var(--muted); font-size:10px; letter-spacing:.08em; text-transform:uppercase; } .mb-match { display:grid; gap:2px; padding:6px 8px; border-radius:8px; color:var(--text); background:var(--raised); } .mb-match span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mb-match .is-through { color:var(--ink-gold); font-weight:700; } .mb-match .is-out { opacity:.5; } .mb-later { color:var(--muted); } /* Admin: art picker and track rows */ .ev-art-picker { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; } .ev-art-tile { display:flex; align-items:flex-end; height:70px; padding:8px; border:2px solid transparent; border-radius:12px; color:#fff; font-size:11.5px; font-weight:700; text-align:left; cursor:pointer; } .ev-art-tile.is-on { border-color:#fff; box-shadow:0 0 0 2px var(--pink); } .ev-art-tile:focus-visible { outline:2px solid var(--pink); outline-offset:2px; } .ev-stage-row { display:grid; grid-template-columns:26px minmax(0,2fr) minmax(0,1.4fr) auto auto auto auto; align-items:center; gap:6px; } .ev-stage-row label { display:flex; align-items:center; gap:4px; color:var(--muted); font-size:11.5px; } .ev-stage-row input[type="number"] { width:64px; } .ev-stage-num { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--raised); font-size:11px; font-weight:700; } @media (max-width:900px) { .ev-stage-row { grid-template-columns:26px 1fr 1fr; } } .event-banner, .event-inline { color:#fff; } .event-banner .event-banner-text small { color:rgba(255,255,255,.8); } .event-banner .event-goal small { color:rgba(255,255,255,.85); } .ev-avatar .avatar-frame > *, .ev-avatar > span:not(.avatar-frame) { display:grid; place-items:center; width:100%; height:100%; border-radius:50%; background:var(--raised); color:var(--text); } .ev-reward-chip .ev-coin, .ev-reward-chip .ev-medal { width:26px; height:26px; line-height:26px; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; font-size:14px; display:grid; place-items:center; } .ev-repeat-details { display:grid; gap:10px; } .ev-rotation { display:grid; gap:6px; justify-items:start; } /* Profile complete badge on avatars, and the optional details form */ .avatar-badged { position:relative; display:grid; place-items:center; width:100%; height:100%; } .avatar-badged > :first-child { width:100%; height:100%; } .avatar-badge { position:absolute; right:-3px; bottom:-3px; display:grid; place-items:center; width:40%; min-width:12px; max-width:22px; aspect-ratio:1; border:2px solid var(--bg); border-radius:50%; color:#0f1a14; background:var(--ink-green); font-size:9px; font-style:normal; font-weight:700; line-height:1; } .profile-details { display:grid; gap:10px; margin:0; padding:14px; border:1px solid var(--line); border-radius:14px; } .profile-details legend { padding:0 6px; font:700 14px var(--display); } /* ---- Insights (admin) ------------------------------------------------------ */ .insights { display:grid; gap:16px; } .in-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; } .in-period { display:flex; flex-wrap:wrap; align-items:center; gap:8px; } .in-custom { display:flex; flex-wrap:wrap; align-items:center; gap:6px; color:var(--muted); font-size:12px; } .in-custom input { min-height:32px; padding:4px 8px; border:1px solid var(--line-strong); border-radius:8px; color:var(--text); background:var(--field); font-size:12.5px; } .in-live-note { display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:12.5px; } .in-pulse { width:9px; height:9px; border-radius:50%; background:var(--ink-green); box-shadow:0 0 0 0 var(--green-wash); animation:in-pulse 2s infinite; } @keyframes in-pulse { 0% { box-shadow:0 0 0 0 rgba(110,226,173,.5); } 70% { box-shadow:0 0 0 10px rgba(110,226,173,0); } 100% { box-shadow:0 0 0 0 rgba(110,226,173,0); } } @media (prefers-reduced-motion:reduce) { .in-pulse { animation:none; } } .in-body { display:grid; gap:14px; } .in-period-line, .in-foot { margin:0; color:var(--muted); font-size:12.5px; } .in-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; } .in-tile { display:grid; gap:2px; align-content:start; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--panel); } .in-tile small { color:var(--muted); font-size:11.5px; font-weight:700; } .in-tile b { font:700 24px/1.1 var(--display); font-variant-numeric:tabular-nums; letter-spacing:-.02em; } .in-delta { min-height:15px; color:var(--muted); font-size:11.5px; font-weight:700; } .in-delta.is-up, .in-bar-value .is-up { color:var(--ink-green); } .in-delta.is-down, .in-bar-value .is-down { color:#ff7a8a; } .in-hint { color:var(--soft); font-size:10.5px; font-style:normal; } .in-card { display:grid; gap:10px; align-content:start; min-width:0; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:var(--panel); } .in-card h3 { margin:0; font:700 15px var(--display); } .in-grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:14px; } .in-chart svg { display:block; width:100%; height:auto; overflow:visible; } .in-grid { stroke:var(--line); stroke-width:1; } .in-axis { fill:var(--muted); font-size:11px; font-family:var(--font); font-variant-numeric:tabular-nums; } .in-line .in-stroke { fill:none; stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; stroke:var(--tone); } .in-line .in-area { fill:var(--tone); opacity:.14; } .in-line .in-point { fill:var(--tone); } .in-line.is-dashed .in-stroke { stroke-width:1.6; stroke-dasharray:5 5; } .tone-a { --tone:var(--pink); } .tone-b { --tone:var(--purple); } .tone-c { --tone:var(--ink-green); } .tone-d { --tone:var(--ink-blue); } .tone-e { --tone:var(--ink-gold); } .tone-f { --tone:var(--ink-warm); } .tone-muted { --tone:var(--soft); } .in-legend { display:flex; flex-wrap:wrap; gap:14px; margin-top:6px; color:var(--muted); font-size:12px; } .in-legend span { display:inline-flex; align-items:center; gap:6px; } .in-legend i { width:14px; height:3px; border-radius:2px; background:var(--tone); } .in-legend .is-dashed i { background:repeating-linear-gradient(90deg,var(--tone) 0 4px,transparent 4px 7px); } .in-column { fill:var(--pink); opacity:.85; } .in-bars { display:grid; gap:7px; } .in-bar { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,2fr) auto; align-items:center; gap:10px; font-size:12.5px; } .in-bar-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .in-bar-label a { color:var(--text); } .in-bar-track { height:9px; overflow:hidden; border-radius:5px; background:var(--track); } .in-bar-track i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--purple),var(--pink)); } .in-bar-value { font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; } .in-bar-value small { color:var(--muted); font-weight:500; } .in-empty { margin:0; color:var(--muted); font-size:12.5px; } .in-heat { display:grid; grid-template-columns:34px repeat(24,minmax(8px,1fr)); gap:2px; overflow-x:auto; font-size:10px; color:var(--muted); } .in-heat i { aspect-ratio:1; min-width:8px; border-radius:3px; background:var(--pink); } .in-heat-day { align-self:center; font-weight:700; } .in-heat-hour { text-align:left; white-space:nowrap; } .in-feed { display:grid; gap:6px; margin:0; padding:0; list-style:none; } .in-feed li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; padding:7px 10px; border-radius:8px; background:var(--panel-soft); font-size:12.5px; } .in-feed li span { grid-column:1; overflow:hidden; color:var(--muted); font-size:11.5px; text-overflow:ellipsis; white-space:nowrap; } .in-feed li small { grid-column:2; grid-row:1 / span 2; align-self:center; color:var(--muted); white-space:nowrap; } .in-feed a { color:var(--text); } .in-table td:first-child { max-width:360px; } @media (max-width:640px) { .in-bar { grid-template-columns:1fr auto; } .in-bar-track { grid-column:1 / -1; grid-row:2; } } .in-shares { display:flex; flex-wrap:wrap; gap:6px; } .in-shares span { padding:2px 8px; border-radius:99px; background:var(--panel-soft); font-size:12px; white-space:nowrap; } .in-table tr.is-baseline td { color:var(--muted); font-style:italic; } .in-table tr.is-small td { color:var(--muted); } .in-small { color:var(--soft); font-size:11px; } .in-funnel { display:grid; gap:10px; } .in-step { display:grid; grid-template-columns:170px minmax(0,1fr) 70px; grid-template-rows:auto auto; align-items:center; gap:2px 12px; font-size:13px; } .in-step small { grid-column:2 / 4; color:var(--muted); font-size:11.5px; } .in-step b { text-align:right; font-variant-numeric:tabular-nums; } .in-step-track { height:16px; overflow:hidden; border-radius:6px; background:var(--track); } .in-step-track i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--ink-blue),var(--purple)); } @media (max-width:640px) { .in-step { grid-template-columns:1fr auto; } .in-step-track { grid-column:1 / -1; } .in-step small { grid-column:1 / -1; } } .in-cohorts td, .in-cohorts th { text-align:center; } .in-cohorts td:first-child, .in-cohorts th:first-child { text-align:left; } .in-ret { background:rgba(110,226,173,calc(var(--heat,0) * .6)); font-weight:700; font-variant-numeric:tabular-nums; } .in-ret small { color:var(--muted); font-weight:500; } .in-ret.is-pending { background:none; color:var(--muted); } .in-csv-row { display:flex; justify-content:flex-end; } .in-csv { font-size:12px; } /* Up next: a slowly drifting row of battles under the vote area. */ .up-next { margin:28px 0 8px; min-width:0; } .up-next-rail { overflow-x:auto; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image:linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); padding:4px 0 8px; } .up-next-rail::-webkit-scrollbar { display:none; } .up-next-track { display:flex; gap:16px; width:max-content; padding:0 24px; } .up-next-card { width:260px; flex:none; } .up-next-card h3 { font-size:15px; } @media (max-width:640px) { .up-next-card { width:220px; } .up-next-track { gap:12px; padding:0 16px; } } @media (prefers-reduced-motion:reduce) { .up-next-rail { scroll-snap-type:x mandatory; } .up-next-card { scroll-snap-align:start; } } /* ---- Pits (groups) ------------------------------------------------------- */ .link-button { padding:0; border:0; background:none; color:var(--ink-purple); font:700 12.5px var(--font); cursor:pointer; } .link-button:hover { text-decoration:underline; } .link-button.danger { color:var(--red); margin-top:14px; } .form-error { margin:8px 0; color:var(--red); font-size:12.5px; font-weight:700; } .loading-line { color:var(--soft); padding:30px 0; } .pit-tile { display:grid; place-items:center; flex:none; width:44px; height:44px; border:0; border-radius:12px; font-size:22px; line-height:1; background:var(--purple-wash); } .pit-tile.is-sm { width:36px; height:36px; border-radius:10px; font-size:18px; } .pit-tile.is-lg { width:64px; height:64px; border-radius:18px; font-size:32px; } .pit-pink { --pit:var(--pink-wash); } .pit-purple { --pit:var(--purple-wash); } .pit-green { --pit:var(--green-wash); } .pit-gold { --pit:var(--gold-wash); } .pit-blue { --pit:var(--blue-wash); } .pit-tile[class*="pit-"] { background:var(--pit, var(--purple-wash)); } button.pit-tile { cursor:pointer; box-shadow:inset 0 0 0 1px var(--line); } button.pit-tile.is-picked { box-shadow:inset 0 0 0 2px var(--pink); } .pits-page, .pit-page { display:flex; flex-direction:column; gap:26px; min-width:0; } .pits-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; } .pits-head .page-header { margin:0; } .pit-section { display:flex; flex-direction:column; gap:12px; min-width:0; } .pit-filters { display:flex; flex-direction:column; gap:10px; } .pit-filters input, .pit-picker input { width:100%; max-width:420px; min-height:38px; padding:8px 12px; border:1px solid var(--line-strong); border-radius:10px; background:var(--field); color:var(--text); font-size:13px; } .pit-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; } .pit-card { display:flex; flex-direction:column; gap:7px; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--panel); color:var(--text); } .pit-card:hover { border-color:var(--line-loud); } .pit-card b { font:700 15px var(--display); } .pit-card-desc { color:var(--muted); font-size:12.5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .pit-mine-row { display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; } .pit-mine { display:flex; align-items:center; gap:10px; flex:none; padding:9px 14px 9px 9px; border:1px solid var(--line); border-radius:14px; background:var(--panel); color:var(--text); } .pit-mine > span:last-child { display:flex; flex-direction:column; } .pit-mine small { color:var(--soft); font-size:11.5px; } .pit-mine small.is-waiting { color:var(--ink-pink); font-weight:700; } .pit-hero { display:flex; flex-direction:column; gap:12px; padding:20px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(180deg,var(--pit, var(--purple-wash)),transparent 85%); } .pit-title { display:flex; align-items:center; gap:14px; } .pit-title h1 { margin:0 0 6px; font:700 clamp(22px,4vw,30px) var(--display); } .pit-desc { margin:0; color:var(--text-dim); max-width:62ch; } .pit-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; } .pit-more { display:flex; gap:16px; flex-wrap:wrap; } .pit-locked { color:var(--muted); padding:20px; border:1px dashed var(--line-strong); border-radius:14px; } .pit-tabs { display:flex; gap:20px; border-bottom:1px solid var(--line); } .pit-tab { padding:10px 0; border:0; background:none; color:var(--muted); font:700 13px var(--font); cursor:pointer; } .pit-tab.active { color:var(--text); box-shadow:inset 0 -2px 0 var(--pink); } .pit-panel { display:flex; flex-direction:column; gap:14px; } .pit-post { display:flex; flex-direction:column; gap:10px; max-width:620px; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--panel); } .pit-post-head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; } .pit-post-actions { display:flex; gap:12px; } .pit-person { display:inline-flex; align-items:center; gap:8px; min-width:0; } .pit-person .comment-avatar { width:28px; height:28px; font-size:11px; overflow:hidden; } .pit-person .comment-avatar img { width:100%; height:100%; object-fit:cover; } .pit-person small { color:var(--soft); font-weight:400; } .pit-note { margin:0; color:var(--text-dim); } .pit-battle { display:flex; flex-direction:column; gap:6px; color:var(--text); } .pit-battle .card-thumbs { max-width:420px; } .pit-battle small { color:var(--muted); } .pit-post-foot { display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .pit-voters { display:inline-flex; align-items:center; gap:8px; margin-right:auto; } .pit-voters small { color:var(--muted); } .pit-faces { display:inline-flex; } .pit-faces .comment-avatar { width:24px; height:24px; margin-left:-6px; border:2px solid var(--panel); font-size:9.5px; overflow:hidden; } .pit-faces .comment-avatar:first-child { margin-left:0; } .pit-faces .comment-avatar img { width:100%; height:100%; object-fit:cover; } .pit-post-foot .field-hint { flex-basis:100%; margin:0; } .pit-split { display:flex; flex-direction:column; gap:6px; } .pit-split-line { display:grid; grid-template-columns:70px 1fr auto; align-items:center; gap:10px; font-size:12.5px; } .pit-split-line > span:first-child { color:var(--muted); } .pit-track { height:8px; border-radius:9px; background:var(--track); overflow:hidden; } .pit-fill { display:block; height:100%; border-radius:9px; background:linear-gradient(90deg,var(--pink),var(--purple)); } .pit-fill.is-world { background:var(--ink-blue); } .pit-voted { width:max-content; } .pit-members { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; max-width:720px; } .pit-member { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--panel); } .pit-member .soft { color:var(--soft); } .pit-member-actions { display:flex; gap:12px; flex-wrap:wrap; margin-left:auto; } .pit-dialog .field { margin-bottom:14px; } .pit-emojis { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; } .pit-colors { display:flex; gap:8px; } .pit-swatch { width:26px; height:26px; border-radius:50%; border:0; background:var(--pit); box-shadow:inset 0 0 0 1px var(--line-strong); cursor:pointer; } .pit-swatch.is-picked { box-shadow:inset 0 0 0 2px var(--pink); } .pit-seg { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .pit-opt { display:flex; flex-direction:column; gap:2px; padding:10px 12px; border:1px solid var(--line-strong); border-radius:12px; background:var(--panel-dim); color:var(--text); text-align:left; cursor:pointer; } .pit-opt small { color:var(--soft); } .pit-opt.is-picked { border-color:var(--pink); background:var(--pink-wash); } .pit-opt:disabled { opacity:.5; cursor:not-allowed; } .pit-submit { width:100%; margin-top:6px; } .pit-picker { display:flex; flex-direction:column; gap:10px; } .pit-pick-list { display:flex; flex-direction:column; gap:6px; max-height:360px; overflow-y:auto; } .pit-pick { display:flex; align-items:center; gap:10px; padding:8px; border:1px solid var(--line); border-radius:12px; background:var(--panel-dim); color:var(--text); text-align:left; cursor:pointer; } .pit-pick:hover { border-color:var(--line-loud); } .pit-pick > span:last-child { display:flex; flex-direction:column; min-width:0; } .pit-pick small { color:var(--soft); } .pit-pick-thumbs { display:flex; gap:4px; flex:none; } .pit-pick-thumbs .card-thumb.size-sm { width:60px; } .pit-reasons { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; } .pit-reason { display:flex; align-items:center; gap:8px; font-size:13px; } .age-dialog { text-align:center; } .age-dialog h2 { margin:0 0 8px; font:700 22px var(--display); } .age-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0 10px; } .age-option { padding:18px 10px; border:1px solid var(--line-strong); border-radius:14px; background:var(--panel-dim); color:var(--text); font:700 24px var(--display); cursor:pointer; } .age-option:hover, .age-option:focus-visible { border-color:var(--pink); background:var(--pink-wash); } .age-note { margin-bottom:10px; } @media (max-width:640px) { .pit-hero { padding:16px; } .pit-member-actions { margin-left:0; } } .settings-dialog.pit-dialog { width:min(520px,100%); } .pit-dialog .pit-emojis { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin; } .pit-dialog .field { margin-bottom:12px; } .pit-panel-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .pit-panel-head .field-hint { margin:0; } .pit-sub { margin:6px 0 0; font:700 14px var(--display); color:var(--muted); } .pit-link-field { display:grid; grid-template-columns:1fr 96px; gap:0 12px; align-items:start; } .pit-link-field .field:last-child { grid-column:1 / -1; } .pit-link-preview { display:grid; place-items:center; margin-top:18px; aspect-ratio:16/9; border-radius:8px; background:var(--panel-soft); overflow:hidden; color:var(--soft); font-size:10.5px; text-align:center; } .pit-link-preview img { width:100%; height:100%; object-fit:cover; } .pit-seg.pit-seg-3 { grid-template-columns:repeat(3,1fr); } .pit-seg-3 .pit-opt { align-items:center; } .pit-responsible { display:flex; gap:10px; align-items:flex-start; margin:4px 0 8px; font-size:12.5px; color:var(--text-dim); line-height:1.45; } .pit-responsible input { margin-top:3px; flex:none; } .pit-vote-area { display:flex; flex-direction:column; gap:10px; max-width:620px; } .pit-vote-buttons { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .pit-results .pit-split-line { grid-template-columns:minmax(80px,140px) 1fr auto; } .pit-results .is-mine b { color:var(--ink-green); } @media (max-width:640px) { .pit-vote-buttons { grid-template-columns:1fr; } } .dmca-agent { font-style:normal; line-height:1.7; padding:12px 16px; border:1px solid var(--line); border-radius:12px; background:var(--panel); max-width:420px; }