/* App shell: fixed top bar, left sidebar and the lobby chat panel (see shell.js). Colours come from the site tokens, so it follows the light/dark theme; the slot machine page forces the dark values below. */ body.app{ --top-h:60px; --side-w:240px; --chat-w:340px; --shell-bg:var(--surface); --shell-line:var(--border); --shell-hover:var(--surface-2); --chat-name:#1f9d6b; padding-top:var(--top-h); padding-left:var(--side-w); transition:padding .2s ease; } body.app.side-collapsed{ --side-w:72px; } @media (min-width:1280px){ body.app.chat-open{ padding-right:var(--chat-w); } } @media (max-width:900px){ body.app{ --side-w:0px; } } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) body.app{ --chat-name:#5fe3a1; } } :root[data-theme="dark"] body.app{ --chat-name:#5fe3a1; } body.app .ic{ display:inline-flex; width:20px; height:20px; flex:none; } body.app .ic svg{ width:100%; height:100%; } /* The slot machine page is always dark. */ .slots-body .app-top, .slots-body .app-side, .slots-body .app-chat, .slots-body .top-menu{ --surface:#150d26; --surface-2:#231742; --border:#2f2252; --ink:#fff6e0; --ink-soft:#c9b9e6; --ink-faint:#8d7fb0; --accent-soft:rgba(255,77,46,.16); --chip-bg:#231742; --chat-name:#5fe3a1; /* The shell colours are worked out on from the light/dark tokens, so they have to be set again here or light mode leaves a white bar on the dark machine page. */ --shell-bg:#150d26; --shell-line:#2f2252; --shell-hover:#231742; --gold-strong:#ffd84a; color:var(--ink); } /* ---------- Top bar ---------- */ .app-top{ position:fixed; top:0; left:0; right:0; height:var(--top-h); z-index:60; display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:1rem; padding:0 .9rem; background:var(--shell-bg); border-bottom:1px solid var(--shell-line); } .top-left, .top-right{ display:flex; align-items:center; gap:.45rem; } .top-left{ gap:.7rem; } .top-mid{ display:flex; justify-content:center; min-width:0; } .top-icon{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; flex:none; border-radius:10px; border:1px solid var(--shell-line); background:transparent; color:var(--ink); cursor:pointer; } .top-icon:hover, .top-icon[aria-expanded="true"]{ background:var(--shell-hover); } .top-icon:first-child{ border-color:transparent; } .top-icon .dot{ position:absolute; top:8px; right:9px; width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 2px var(--shell-bg); } .top-brand{ display:flex; align-items:center; gap:.5rem; text-decoration:none; } .top-brand .mk{ width:30px; height:30px; } .top-brand span{ font-family:var(--font-display); font-weight:900; font-size:1.3rem; letter-spacing:.02em; color:var(--accent); } .top-brand span b{ color:var(--ink); font-weight:900; } .top-search{ display:flex; align-items:center; gap:.6rem; width:min(560px, 100%); height:40px; padding:0 .75rem 0 .85rem; border-radius:10px; border:1px solid var(--shell-line); background:var(--surface-2); color:var(--ink-faint); font:500 .9rem var(--font-body); cursor:text; text-align:left; } .top-search:hover{ border-color:var(--ink-faint); } .top-search .ic{ width:17px; height:17px; } .top-search span:not(.ic){ flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .top-search kbd{ font:600 .72rem var(--font-mono); border:1px solid var(--shell-line); border-radius:5px; padding:.05rem .4rem; color:var(--ink-faint); background:var(--shell-bg); } .top-gold{ display:inline-flex; align-items:center; gap:.45rem; height:40px; padding:0 .8rem; border-radius:10px; text-decoration:none; border:1px solid var(--shell-line); color:var(--ink); font-weight:700; font-size:.9rem; } .top-gold[hidden]{ display:none; } .top-gold:hover{ background:var(--shell-hover); } .top-gold .mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; } .coin{ display:inline-block; width:18px; height:18px; border-radius:50%; flex:none; background:radial-gradient(circle at 35% 30%, #fff3b0, #ffcb05 45%, #c78c00); box-shadow:inset 0 0 0 2px #b07a00; } .top-chat{ display:inline-flex; align-items:center; gap:.45rem; height:40px; padding:0 .9rem; border-radius:10px; cursor:pointer; border:1px solid var(--shell-line); background:var(--shell-bg); color:var(--ink); font:700 .9rem var(--font-display); } .top-chat:hover, .top-chat.on{ background:var(--shell-hover); } .top-chat .count{ min-width:20px; height:20px; padding:0 .35rem; border-radius:999px; background:var(--accent); color:#fff; font-size:.72rem; display:inline-flex; align-items:center; justify-content:center; } .top-chat .count[hidden]{ display:none; } .top-account{ position:relative; } .top-login{ display:inline-flex; align-items:center; height:40px; padding:0 1rem; border-radius:10px; background:var(--accent); color:#fff; font:700 .9rem var(--font-display); text-decoration:none; } .top-login:hover{ filter:brightness(1.08); } .top-avatar{ width:40px; height:40px; padding:0; border-radius:50%; border:2px solid var(--accent); background:var(--surface-2); cursor:pointer; overflow:hidden; display:flex; align-items:center; justify-content:center; } .top-avatar img{ width:100%; height:100%; object-fit:cover; } .initial{ display:inline-flex; align-items:center; justify-content:center; font:800 .95rem var(--font-display); color:var(--ink); background:var(--surface-2); border-radius:50%; } .top-avatar .initial{ width:100%; height:100%; } .bell-wrap{ position:relative; } .top-menu{ position:absolute; right:0; top:calc(100% + 8px); z-index:70; min-width:220px; padding:.4rem; background:var(--surface); color:var(--ink); border:1px solid var(--shell-line); border-radius:12px; box-shadow:var(--shadow-lift); display:flex; flex-direction:column; } .top-menu[hidden]{ display:none; } .top-menu-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.5rem .6rem .6rem; border-bottom:1px solid var(--shell-line); margin-bottom:.3rem; } .top-menu-head a{ font-size:.82rem; color:var(--accent); text-decoration:none; font-weight:600; } .top-menu > a, .top-menu > button{ display:block; text-align:left; padding:.55rem .6rem; border-radius:8px; border:0; background:none; color:var(--ink); font:500 .9rem var(--font-body); text-decoration:none; cursor:pointer; } .top-menu > a:hover, .top-menu > button:hover{ background:var(--shell-hover); } .bell-panel{ width:min(360px, calc(100vw - 24px)); max-height:70vh; overflow-y:auto; } .bell-item{ padding:.55rem .6rem; border-radius:8px; font-size:.85rem; line-height:1.4; } .bell-item + .bell-item{ border-top:1px solid var(--shell-line); } .bell-title{ font-weight:600; } .bell-desc{ color:var(--ink-soft); margin-top:.15rem; } .bell-item small{ color:var(--ink-faint); font-size:.75rem; } .bell-item .feed-emoji{ width:18px; height:18px; vertical-align:-4px; } @media (max-width:1100px){ .top-search span:not(.ic), .top-search kbd{ display:none; } .top-search{ width:40px; padding:0; justify-content:center; } .top-mid{ justify-content:flex-end; } } @media (max-width:640px){ .app-top{ gap:.4rem; padding:0 .5rem; } .top-brand span, .top-chat span:not(.ic):not(.count), .top-gold{ display:none; } .top-right{ gap:.3rem; } .top-icon.theme-toggle{ display:none; } .top-chat{ padding:0 .6rem; } } /* ---------- Sidebar ---------- */ .app-side{ position:fixed; top:var(--top-h); bottom:0; left:0; width:240px; z-index:50; overflow-y:auto; overflow-x:hidden; padding:.8rem .7rem 1.2rem; background:var(--shell-bg); border-right:1px solid var(--shell-line); transition:width .2s ease, transform .2s ease; } body.side-collapsed .app-side{ width:72px; } .side-nav{ display:flex; flex-direction:column; gap:.15rem; } .side-link{ display:flex; align-items:center; gap:.8rem; width:100%; min-height:42px; padding:0 .75rem; border-radius:10px; border:0; background:none; color:var(--ink); font:600 .95rem var(--font-display); text-decoration:none; cursor:pointer; text-align:left; white-space:nowrap; } .side-link:hover{ background:var(--shell-hover); } .side-link.is-active{ background:var(--accent-soft); color:var(--accent); } .side-label{ flex:1; overflow:hidden; text-overflow:ellipsis; } .side-badge{ padding:.1rem .45rem; border-radius:5px; background:var(--accent); color:#fff; font:800 .62rem var(--font-display); letter-spacing:.06em; flex:none; } .side-badge[hidden]{ display:none; } .side-group-head{ display:flex; align-items:center; } .side-group-head .side-link{ flex:1; min-width:0; } .side-toggle{ width:32px; height:32px; flex:none; border:0; background:none; color:var(--ink-soft); border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; } .side-toggle:hover{ background:var(--shell-hover); } .side-toggle .ic{ width:18px; height:18px; transition:transform .15s; transform:rotate(-90deg); } .side-group.open .side-toggle .ic{ transform:none; } .side-sub{ display:none; flex-direction:column; gap:.1rem; margin:.1rem 0 .35rem 1.35rem; padding-left:.9rem; border-left:1px solid var(--shell-line); } .side-group.open .side-sub{ display:flex; } .side-sublink{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; min-height:36px; padding:0 .7rem; border-radius:8px; color:var(--ink-soft); font:500 .9rem var(--font-body); text-decoration:none; } .side-sublink span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .side-sublink:hover{ background:var(--shell-hover); color:var(--ink); } .side-sublink.is-active{ background:var(--accent-soft); color:var(--accent); font-weight:600; } .side-rule{ height:1px; background:var(--shell-line); margin:1rem .4rem .9rem; } .side-heading{ padding:0 .8rem .5rem; font:800 .72rem var(--font-display); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); } .side-note{ margin:0; padding:0 .8rem; font-size:.84rem; color:var(--ink-faint); } .side-online{ display:flex; flex-direction:column; gap:.1rem; } .side-person{ display:flex; align-items:center; gap:.65rem; padding:.4rem .75rem; border-radius:10px; color:var(--ink); text-decoration:none; } a.side-person:hover{ background:var(--shell-hover); } .side-person img, .side-person .initial{ width:30px; height:30px; border-radius:50%; flex:none; object-fit:cover; } .side-person-text{ display:flex; flex-direction:column; min-width:0; } .side-person-text strong{ font:600 .86rem var(--font-display); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .side-person-text small{ font-size:.75rem; color:var(--ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Collapsed rail: icons only. */ body.side-collapsed .side-label, body.side-collapsed .side-toggle, body.side-collapsed .side-sub, body.side-collapsed .side-heading, body.side-collapsed .side-note, body.side-collapsed .side-person-text, body.side-collapsed .side-link .side-badge{ display:none !important; } body.side-collapsed .side-link{ justify-content:center; padding:0; } body.side-collapsed .side-person{ justify-content:center; padding:.35rem 0; } body.side-collapsed .side-rule{ margin:.8rem .2rem; } .side-backdrop{ position:fixed; inset:var(--top-h) 0 0 0; z-index:45; background:rgba(5,8,18,.55); } .side-backdrop[hidden]{ display:none; } @media (max-width:900px){ .app-side, body.side-collapsed .app-side{ width:260px; transform:translateX(-100%); box-shadow:var(--shadow-lift); } body.side-open .app-side{ transform:none; } body.side-collapsed .side-label, body.side-collapsed .side-toggle, body.side-collapsed .side-heading, body.side-collapsed .side-note, body.side-collapsed .side-person-text{ display:revert !important; } body.side-collapsed .side-group.open .side-sub{ display:flex !important; } body.side-collapsed .side-link{ justify-content:flex-start; padding:0 .75rem; } } /* ---------- Lobby chat ---------- */ .app-chat{ position:fixed; top:var(--top-h); right:0; bottom:0; width:var(--chat-w); max-width:100vw; z-index:55; display:flex; flex-direction:column; background:var(--shell-bg); border-left:1px solid var(--shell-line); } .app-chat[hidden]{ display:none; } @media (max-width:1279px){ .app-chat{ box-shadow:-20px 0 50px -20px rgba(0,0,0,.5); } } .chat-head{ display:flex; align-items:center; gap:.6rem; padding:.7rem .8rem .7rem 1rem; border-bottom:1px solid var(--shell-line); } .chat-head strong{ font:900 .85rem var(--font-display); letter-spacing:.14em; } .chat-sub{ flex:1; font-size:.82rem; color:var(--ink-faint); } .chat-close{ width:32px; height:32px; border-color:transparent; } .chat-scroll{ position:relative; flex:1; min-height:0; } .chat-list{ position:absolute; inset:0; overflow-y:auto; padding:.6rem .5rem .8rem; display:flex; flex-direction:column; gap:.1rem; } .chat-empty{ margin:auto; color:var(--ink-faint); font-size:.88rem; text-align:center; } .chat-msg{ display:flex; gap:.6rem; padding:.35rem .5rem; border-radius:10px; } .chat-msg:hover{ background:var(--shell-hover); } .chat-avatar{ width:32px; height:32px; border-radius:50%; flex:none; object-fit:cover; margin-top:.1rem; } .chat-main{ min-width:0; flex:1; } .chat-meta{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; line-height:1.3; } .chat-name{ font:700 .88rem var(--font-display); color:var(--chat-name); } .chat-msg.mine .chat-name{ color:var(--gold-strong); } .chat-badge{ padding:.05rem .4rem; border-radius:4px; font:700 .68rem var(--font-display); color:#ff8f7a; background:rgba(227,53,13,.18); white-space:nowrap; } .chat-meta time{ font-size:.7rem; color:var(--ink-faint); opacity:0; transition:opacity .15s; } .chat-msg:hover time, .chat-msg:focus-within time{ opacity:1; } .chat-tools{ margin-left:auto; display:none; gap:.2rem; } .chat-msg:hover .chat-tools, .chat-msg:focus-within .chat-tools{ display:inline-flex; } .chat-tools button{ width:24px; height:24px; padding:3px; border:0; border-radius:6px; background:none; color:var(--ink-faint); cursor:pointer; } .chat-tools button:hover{ background:var(--shell-line); color:var(--accent); } .chat-tools .ic{ width:16px; height:16px; } .chat-text{ font-size:.9rem; line-height:1.4; color:var(--ink); overflow-wrap:anywhere; } .chat-card{ display:flex; align-items:center; gap:.7rem; margin-top:.35rem; padding:.7rem .75rem; border-radius:12px; background:var(--surface-2); border:1px solid var(--shell-line); } .chat-card.win{ border-color:rgba(255,203,5,.45); background:linear-gradient(135deg, rgba(255,203,5,.12), transparent 70%), var(--surface-2); } .chat-card .ball{ width:34px; height:34px; border-radius:10px; flex:none; background:linear-gradient(to bottom, #e3350d 0 46%, #131b33 46% 54%, #f7f8fb 54%); box-shadow:inset 0 0 0 2px #131b33; } .chat-card .coin{ width:34px; height:34px; } .chat-card-text{ display:flex; flex-direction:column; min-width:0; flex:1; } .chat-card-text strong{ font:700 .88rem var(--font-display); line-height:1.3; } .chat-card-text small{ color:var(--ink-faint); font-size:.78rem; } .chat-play{ padding:.4rem .8rem; border-radius:8px; background:var(--accent); color:#fff; font:700 .82rem var(--font-display); text-decoration:none; flex:none; } .chat-play:hover{ filter:brightness(1.08); } .chat-jump{ position:absolute; left:50%; bottom:.6rem; transform:translateX(-50%); padding:.35rem .9rem; border-radius:999px; border:0; background:var(--accent); color:#fff; font:700 .8rem var(--font-display); cursor:pointer; box-shadow:var(--shadow-lift); } .chat-jump[hidden]{ display:none; } .chat-bottom{ padding:.6rem .7rem .8rem; border-top:1px solid var(--shell-line); display:flex; flex-direction:column; gap:.4rem; } .chat-error{ margin:0; min-height:0; font-size:.8rem; color:var(--warn); } .chat-error:empty{ display:none; } .chat-login{ display:block; text-align:center; padding:.55rem; border-radius:10px; background:var(--accent); color:#fff; font:700 .88rem var(--font-display); text-decoration:none; } .chat-form{ display:flex; gap:.5rem; } .chat-input{ flex:1; min-width:0; height:40px; padding:0 .8rem; border-radius:10px; border:1px solid var(--shell-line); background:var(--surface-2); color:var(--ink); font:500 .9rem var(--font-body); } .chat-input:focus{ outline:2px solid var(--accent); outline-offset:-1px; } .chat-input:disabled{ opacity:.7; } .chat-send{ height:40px; padding:0 1rem; border-radius:10px; border:1px solid var(--shell-line); background:var(--shell-hover); color:var(--ink); font:700 .88rem var(--font-display); cursor:pointer; } .chat-send:not(:disabled):hover{ background:var(--accent); border-color:var(--accent); color:#fff; } .chat-send:disabled{ opacity:.5; cursor:not-allowed; } /* The old in-page nav is replaced by the shell. */ body.app .offline-banner{ position:sticky; top:var(--top-h); z-index:40; } @media (prefers-reduced-motion: reduce){ body.app, .app-side{ transition:none; } } /* ---------- Emotes and GIFs ---------- */ .chat-emote{ display:inline-block; width:22px; height:22px; object-fit:contain; vertical-align:-5px; margin:0 1px; image-rendering:auto; } .chat-text.jumbo .chat-emote{ width:44px; height:44px; vertical-align:middle; } .chat-text.muted{ color:var(--ink-faint); font-style:italic; } .chat-gif-wrap{ position:relative; display:inline-block; margin-top:.3rem; max-width:100%; } .chat-gif{ display:block; max-width:min(220px, 100%); max-height:180px; border-radius:10px; background:var(--surface-2); } .gif-credit{ position:absolute; right:6px; bottom:6px; padding:0 .35rem; border-radius:4px; font:600 .62rem var(--font-body); color:#fff; background:rgba(0,0,0,.55); } .chat-input-wrap{ position:relative; flex:1; min-width:0; display:flex; } .chat-input-wrap .chat-input{ padding-right:2.4rem; } .chat-emote-btn{ position:absolute; right:4px; top:50%; transform:translateY(-50%); width:32px; height:32px; border:0; border-radius:8px; background:none; color:var(--ink-faint); cursor:pointer; display:flex; align-items:center; justify-content:center; } .chat-emote-btn:hover, .chat-emote-btn[aria-expanded="true"]{ color:var(--gold-strong); background:var(--shell-hover); } .emote-picker{ display:flex; flex-direction:column; height:min(360px, 55vh); border:1px solid var(--shell-line); border-radius:12px; background:var(--surface); overflow:hidden; } .emote-picker[hidden], .emote-suggest[hidden]{ display:none; } .emote-picker > .side-note{ padding:.8rem; } .emote-top{ display:flex; flex-direction:column; gap:.45rem; padding:.55rem .55rem .45rem; border-bottom:1px solid var(--shell-line); } .emote-tabs{ display:flex; gap:.3rem; } .emote-tabs button{ flex:1; height:30px; border:0; border-radius:8px; background:none; color:var(--ink-soft); font:700 .82rem var(--font-display); cursor:pointer; } .emote-tabs button.on{ background:var(--accent-soft); color:var(--accent); } .emote-search{ height:34px; padding:0 .7rem; border-radius:8px; border:1px solid var(--shell-line); background:var(--surface-2); color:var(--ink); font:500 .85rem var(--font-body); } .emote-body{ flex:1; overflow-y:auto; padding:.3rem .55rem .6rem; } .emote-body > .side-note, .emote-body .side-note{ padding:.6rem .2rem; } .emote-group{ margin:.5rem 0 .3rem; font:800 .66rem var(--font-display); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); } .emote-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(40px, 1fr)); gap:.2rem; } .emote-cell{ aspect-ratio:1; border:0; border-radius:8px; background:none; cursor:pointer; padding:4px; display:flex; align-items:center; justify-content:center; } .emote-cell:hover, .emote-cell:focus-visible{ background:var(--shell-hover); } .emote-cell img{ width:100%; height:100%; object-fit:contain; } .gif-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.3rem; } .gif-cell{ aspect-ratio:1; border:0; border-radius:8px; padding:0; overflow:hidden; background:var(--surface-2); cursor:pointer; } .gif-cell img{ width:100%; height:100%; object-fit:cover; display:block; } .gif-cell:hover, .gif-cell:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; } .gif-cell:disabled{ cursor:not-allowed; opacity:.6; } .klipy-credit{ padding:.3rem .6rem; text-align:right; font:600 .68rem var(--font-body); color:var(--ink-faint); border-top:1px solid var(--shell-line); } .emote-suggest{ display:flex; flex-direction:column; padding:.3rem; border:1px solid var(--shell-line); border-radius:10px; background:var(--surface); } .emote-option{ display:flex; align-items:center; gap:.5rem; padding:.3rem .45rem; border:0; border-radius:6px; background:none; color:var(--ink); font:500 .85rem var(--font-body); cursor:pointer; text-align:left; } .emote-option:hover, .emote-option:first-child{ background:var(--shell-hover); } .emote-option img{ width:22px; height:22px; object-fit:contain; } /* ---------- "Website updated" notice ---------- */ .update-toast{ position:fixed; left:50%; bottom:1.2rem; transform:translateX(-50%); z-index:95; width:max-content; max-width:calc(100vw - 2rem); display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; padding:.7rem .8rem .7rem 1rem; border-radius:14px; background:var(--surface); color:var(--ink); border:1px solid var(--accent); box-shadow:var(--shadow-lift), 0 0 0 4px var(--glow); font-size:.9rem; animation:update-in .35s cubic-bezier(.2,1.4,.4,1); } .update-dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--glow); flex:none; } .update-text{ flex:1; min-width:12rem; } .update-reload{ height:34px; padding:0 1rem; border:0; border-radius:9px; background:var(--accent); color:#fff; font:700 .88rem var(--font-display); cursor:pointer; } .update-later{ height:34px; padding:0 .8rem; border:1px solid var(--shell-line, var(--border)); border-radius:9px; background:none; color:var(--ink-soft); font:600 .85rem var(--font-display); cursor:pointer; } @keyframes update-in{ from{ transform:translate(-50%, 30px); opacity:0; } } @media (prefers-reduced-motion: reduce){ .update-toast{ animation:none; } } /* ---------- Recent wins ticker (winTicker.js) ---------- */ /* Site tokens, so it follows the light/dark theme; the slot machine page swaps in the machine's own purple and gold below. */ .win-ticker{ --wt-bg:var(--surface); --wt-line:var(--border); --wt-ink:var(--ink); --wt-soft:var(--ink-faint); --wt-gold:var(--gold-strong); --wt-accent:var(--accent); --wt-chip:var(--chip-bg); display:flex; align-items:center; gap:.9rem; width:100%; min-width:0; height:44px; padding:0 0 0 .9rem; border-radius:12px; overflow:hidden; background:var(--wt-bg); border:1px solid var(--wt-line); color:var(--wt-ink); box-shadow:var(--shadow); } .slots-body .win-ticker{ --wt-bg:rgba(20,11,36,.85); --wt-line:rgba(245,192,74,.35); --wt-ink:#fff6e0; --wt-soft:#c9b9e6; --wt-gold:var(--gold-trim); --wt-accent:#ff5a36; --wt-chip:#281a45; box-shadow:none; } .wt-label{ flex:none; display:inline-flex; align-items:center; gap:.45rem; font:800 .68rem var(--font-display); letter-spacing:.16em; text-transform:uppercase; color:var(--wt-soft); } .wt-label::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--wt-accent); box-shadow:0 0 0 0 var(--wt-accent); animation:wt-live 1.8s ease-out infinite; } @keyframes wt-live{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--wt-accent) 60%, transparent); } 100%{ box-shadow:0 0 0 7px transparent; } } .wt-viewport{ flex:1; min-width:0; overflow:hidden; height:100%; display:flex; align-items:center; mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); } .wt-track{ display:flex; width:max-content; } .wt-track.moving{ animation:wt-scroll var(--wt-duration, 30s) linear infinite; } .win-ticker:hover .wt-track, .win-ticker:focus-within .wt-track{ animation-play-state:paused; } @keyframes wt-scroll{ to{ transform:translateX(calc(-1 * var(--wt-distance, 50%))); } } .wt-group{ display:flex; align-items:center; } .wt-item{ display:inline-flex; align-items:center; gap:.45rem; margin-right:.7rem; padding:.2rem .7rem .2rem .25rem; border-radius:999px; white-space:nowrap; color:inherit; text-decoration:none; font-size:.85rem; background:var(--wt-chip); } a.wt-item:hover{ outline:1px solid var(--wt-accent); } a.wt-item:focus-visible{ outline:2px solid var(--wt-accent); } .wt-avatar{ width:24px; height:24px; border-radius:50%; object-fit:cover; flex:none; } .wt-initial{ display:inline-flex; align-items:center; justify-content:center; background:var(--wt-line); color:var(--wt-ink); font:800 .7rem var(--font-display); } .wt-name{ font:700 .85rem var(--font-display); display:inline-flex; align-items:center; } .wt-gold{ display:inline-flex; align-items:center; gap:.3rem; font:700 .82rem var(--font-mono); font-variant-numeric:tabular-nums; color:var(--wt-gold); } .wt-coin{ width:12px; height:12px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #fff3b0, #ffcb05 45%, #c78c00); box-shadow:inset 0 0 0 1.5px #b07a00; } .wt-mult{ font:600 .74rem var(--font-mono); color:var(--wt-soft); } .wt-empty{ font-size:.84rem; color:var(--wt-soft); white-space:nowrap; } @media (prefers-reduced-motion: reduce){ .wt-track.moving, .wt-label::before{ animation:none; } .wt-viewport{ overflow-x:auto; } } @media (max-width:640px){ .wt-label{ font-size:0; gap:0; } .win-ticker{ padding-left:.6rem; } } .games-main > .win-ticker{ margin-bottom:1.2rem; }