@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap'); /* * custom-theme.css — pokemon.blakehenstock.com * * Complete two-theme redesign: macOS "liquid glass". * Dark (default): obsidian black + translucent white glass. * Light: cool paper gray + bright glass. Same shapes, same language. * * ARCHITECTURE * - Tokens: light values on :root, dark overrides on html.dark/body.dark * (anti-flash puts .dark on pre-mount; the client moves it to * after mount — both arms covered). * - Selector pattern: every component rule is written ONCE as * :is(html.dark, body.dark, body) .X { ... } * The :is() contributes (0,1,1) regardless of theme, which outranks * stock unscoped light rules (even in the 4 stylesheets that load AFTER * this file: sim-types, utilichart, battle-search, font-awesome) AND * stock `.dark .X` rules. The `body` arm makes it apply in both themes. * - Rare theme-divergent rules: dark-only `html.dark X, body.dark X`; * light-only `html:not(.dark) body X` is unsafe pre-mount, so use * tokens instead wherever possible. * - The 640x360 battle sprite field contents are NOT restyled (frame only). * - The ≤700px swipe-drawer (document widening + scroll-snap) is preserved. * * Geometry contract (kept in sync with TSX): * HEADER_HEIGHT=68 / MINI_HEADER_HEIGHT=42 in src/panels.tsx, * `totalHeight - 68` in src/client-main.ts updateLayout(). */ /*═══════════════════════════════════════════════════════════ * Tokens *═══════════════════════════════════════════════════════════*/ :root { /* LIGHT (default-scope values; dark overrides below) */ color-scheme: light; --bg: #eef0f3; --bg-2: #e6e8ec; --g1: rgba(255, 255, 255, 0.55); --g2: rgba(255, 255, 255, 0.78); --g3: rgba(255, 255, 255, 0.95); --g-bright: #ffffff; --g-deep: rgba(255, 255, 255, 0.85); /* popup/sheet body material */ --scrim: rgba(40, 44, 52, 0.30); --edge: rgba(20, 24, 32, 0.10); --edge-2: rgba(20, 24, 32, 0.20); --edge-3: rgba(20, 24, 32, 0.34); /* strong ring / cur */ --spec: inset 0 1px 0 rgba(255, 255, 255, 0.85); --depth: 0 10px 34px rgba(20, 24, 32, 0.16); --depth-sm: 0 4px 16px rgba(20, 24, 32, 0.10); --depth-lg: 0 24px 70px rgba(20, 24, 32, 0.25); --ink: #15171c; --ink-soft: #45494f; --ink-mute: #71757d; --ink-faint: #9a9ea6; --ink-inv: #f5f6f8; /* text on inverted (accent) fills */ --accent: #1b1d22; /* monochrome accent fill */ --accent-hover: #2c2f36; --link: #3a5f9e; --link-hover: #2a4a82; --link-visited: #5a5f6a; --ok: #2e7d4f; --bad: #b54343; --warn: #a96a1f; --track: rgba(20, 24, 32, 0.12); /* slider/hp track */ --sel: rgba(20, 24, 32, 0.14); /* ::selection */ --r-xl: 22px; --r-lg: 16px; --r-md: 11px; --r-sm: 8px; --r-pill: 999px; --blur: blur(24px) saturate(140%); --blur-sm: blur(12px) saturate(130%); --font: 'Manrope', ui-sans-serif, system-ui, "SF Pro Text", "Segoe UI", Roboto, sans-serif; --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; } html.dark, body.dark { color-scheme: dark; --bg: #060607; --bg-2: #0b0b0d; --g1: rgba(255, 255, 255, 0.045); --g2: rgba(255, 255, 255, 0.075); --g3: rgba(255, 255, 255, 0.12); --g-bright: rgba(255, 255, 255, 0.16); --g-deep: rgba(18, 18, 21, 0.72); --scrim: rgba(0, 0, 0, 0.5); --edge: rgba(255, 255, 255, 0.10); --edge-2: rgba(255, 255, 255, 0.18); --edge-3: rgba(255, 255, 255, 0.38); --spec: inset 0 1px 0 rgba(255, 255, 255, 0.14); --depth: 0 10px 34px rgba(0, 0, 0, 0.55); --depth-sm: 0 4px 16px rgba(0, 0, 0, 0.4); --depth-lg: 0 24px 70px rgba(0, 0, 0, 0.7); --ink: #f2f3f5; --ink-soft: #b8bbc4; --ink-mute: #888c96; --ink-faint: #5d616b; --ink-inv: #0a0b0e; --accent: #e9eaee; --accent-hover: #ffffff; --link: #a9c2e8; --link-hover: #c8d8f2; --link-visited: #c5c8d0; --ok: #69c98f; --bad: #e98080; --warn: #e0a55c; --track: rgba(255, 255, 255, 0.14); --sel: rgba(255, 255, 255, 0.18); } /*═══════════════════════════════════════════════════════════ * Root + typography *═══════════════════════════════════════════════════════════*/ @media (min-width: 701px) { html, body { overflow-x: clip; } } /* page background: flat, both themes (kills charizard art) */ html.dark body, body.dark, html:not(.dark) body { background: var(--bg) !important; background-image: none !important; } :is(html.dark, body.dark, body) { color: var(--ink); font-family: var(--font); font-size: 11pt; letter-spacing: 0.1px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* the client hardcodes Verdana on many components */ :is(html.dark, body.dark, body) :is(input, button, select, textarea, .button, .textbox, .select, .team, .userlist li, .userlist li button, .chatbox .textbox, .movebutton, .switchmenu button, .chooser button, .folder .selectFolder, .battle, .battle-log, .battle-log-add, .chat, .chat-log, pre.textbox, .mini-window-header, .roomlist, .tabbar, .options, .mainmessage, .ps-popup, .ladder, .table, h1, h2, h3, .statbar, .trainer) { font-family: var(--font); } :is(html.dark, body.dark, body) :is(h1, h2, h3, .roomlist h2, .mainmenu.button, .button.big) { font-weight: 700; letter-spacing: 0.2px; } :is(html.dark, body.dark, body) ::selection { background: var(--sel); } :is(html.dark, body.dark, body) :is(.battle-log, .chat-log, .ladder, .statbar, .setstats, .movebutton small.pp) { font-variant-numeric: tabular-nums; } /* scrollbars — thin, neutral, themed */ :is(html.dark, body.dark, body) { scrollbar-color: var(--track) transparent; } :is(html.dark, body.dark, body) ::-webkit-scrollbar { width: 10px; height: 10px; } :is(html.dark, body.dark, body) ::-webkit-scrollbar-track { background: transparent; border: 0; } :is(html.dark, body.dark, body) ::-webkit-scrollbar-track:hover { background: transparent; border: 0; } :is(html.dark, body.dark, body) ::-webkit-scrollbar-button, :is(html.dark, body.dark, body) ::-webkit-scrollbar-corner { display: none; } :is(html.dark, body.dark, body) ::-webkit-scrollbar-thumb { background: var(--track); border-radius: 999px; border: 2px solid rgba(0, 0, 0, 0); background-clip: content-box; min-height: 2rem; } :is(html.dark, body.dark, body) ::-webkit-scrollbar-thumb:hover { background: var(--edge-2); border: 2px solid rgba(0, 0, 0, 0); background-clip: content-box; } /* links */ :is(html.dark, body.dark, body) :is(a, .ilink) { color: var(--link); } :is(html.dark, body.dark, body) :is(a:hover, .ilink:hover) { color: var(--link-hover); } :is(html.dark, body.dark, body) a:visited, :is(html.dark, body.dark, body) .ilink.yours { color: var(--link-visited); } :is(html.dark, body.dark, body) .subtle:hover { color: var(--link-hover); } :is(html.dark, body.dark, body) hr { border: 0; border-top: 1px solid var(--edge); } :is(html.dark, body.dark, body) li::marker { color: var(--ink-faint); } /*═══════════════════════════════════════════════════════════ * THE DOCK (header) — floating glass bar * Markup: #header.header > .dock > [.tabbar.maintabbar | .overflow | .userbar] *═══════════════════════════════════════════════════════════*/ :is(html.dark, body.dark, body) .header { height: 68px; /* HEADER_HEIGHT */ background: transparent; box-shadow: none; } :is(html.dark, body.dark, body) .header .dock { position: absolute; top: 8px; left: 10px; right: 10px; height: 54px; display: flex; align-items: center; padding: 0 8px; background: var(--g1); border: 1px solid var(--edge); border-radius: var(--r-lg); box-shadow: var(--spec), var(--depth-sm); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-sizing: border-box; } :is(html.dark, body.dark, body) .dock .tabbar.maintabbar { flex: 1 1 auto; min-width: 0; margin-right: 0; overflow: hidden; white-space: nowrap; padding: 0; } :is(html.dark, body.dark, body) .maintabbar .inner-1 { height: 52px; line-height: 52px; } :is(html.dark, body.dark, body) .dock .dock-logo { vertical-align: middle; margin: 0 6px 0 2px; } :is(html.dark, body.dark, body) .dock .dock-logo .logo { display: block; width: 34px; height: 34px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35)); } :is(html.dark, body.dark, body) .maintabbarbottom { display: none; } :is(html.dark, body.dark, body) .tabbar:after { display: none; } /* tabs = dock chips */ :is(html.dark, body.dark, body) .tabbar { text-shadow: none; } :is(html.dark, body.dark, body) .maintabbar .button { height: 36px; min-width: 50px; padding: 3px 9px 3px 9px; margin: 0 2px; background: transparent; border: 1px solid transparent; border-radius: var(--r-md); color: var(--ink-mute); box-shadow: none; text-shadow: none; font-weight: 600; font-size: 10.5px; transition: background 0.14s ease, color 0.14s ease, transform 0.1s ease; box-sizing: border-box; } :is(html.dark, body.dark, body) .tabbar li:first-child .button, :is(html.dark, body.dark, body) .tabbar li.home-li .button, :is(html.dark, body.dark, body) .tabbar li.home-li + li .button { border-radius: var(--r-md); margin-left: 2px; } :is(html.dark, body.dark, body) .tabbar li:last-child .button { border-radius: var(--r-md); } :is(html.dark, body.dark, body) .maintabbar .button:hover { background: var(--g2); color: var(--ink); transform: translateY(-1px); box-shadow: none; } :is(html.dark, body.dark, body) .maintabbar .button.cur, :is(html.dark, body.dark, body) .maintabbar .button.cur:hover, :is(html.dark, body.dark, body) .maintabbar .button.cur:active { background: var(--g3); border-color: var(--edge); color: var(--ink); box-shadow: var(--spec), var(--depth-sm); padding: 3px 9px; transform: none; } :is(html.dark, body.dark, body) .tabbar .button i { margin: 1px auto 0; font-size: 13px; height: 14px; } :is(html.dark, body.dark, body) .tabbar .closebutton { top: 6px; color: var(--ink-faint); } :is(html.dark, body.dark, body) .tabbar a.cur + .closebutton { top: 6px; } :is(html.dark, body.dark, body) .closebutton:hover { color: var(--bad); } :is(html.dark, body.dark, body) :is(.minimizebutton:hover, .maximizebutton:hover, summary:hover .expandbutton, .mini-window-header:hover .minimizebutton) { color: var(--ink); } /* userbar + overflow as dock items */ :is(html.dark, body.dark, body) .dock .userbar { position: static; display: flex; align-items: center; gap: 6px; margin-left: auto; padding-left: 8px; flex: none; } :is(html.dark, body.dark, body) .userbar .username { color: var(--ink); text-shadow: none; } :is(html.dark, body.dark, body) .dock .overflow { position: static; flex: none; margin-left: 4px; } :is(html.dark, body.dark, body) .header .overflow .button { height: 34px; width: 34px; border-radius: var(--r-md); font-size: 11pt; } :is(html.dark, body.dark, body) .userbar button.icon { height: 30px; width: 32px; border-radius: var(--r-md); } :is(html.dark, body.dark, body) .notification-badge { background: var(--accent); color: var(--ink-inv); border: 0; } /* mini-header (narrow mode top strip) → floating mini dock */ :is(html.dark, body.dark, body) .mini-header { top: 6px; height: 30px; line-height: 30px; right: 8px; background: var(--g1); border: 1px solid var(--edge); border-radius: var(--r-md); color: var(--ink-soft); box-shadow: var(--spec), var(--depth-sm); backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm); } :is(html.dark, body.dark, body) :is(.mini-header-right, .mini-header-left) { border-color: var(--edge); color: var(--ink); } :is(html.dark, body.dark, body) .mini-header-left.notifying { color: var(--link); } :is(html.dark, body.dark, body) :is(.mini-header i.text, .tablist i.text, .tabbar .button i.text) { border-color: var(--edge-2); color: var(--ink-mute); } /* vertical header (tablist column) → floating glass column on desktop, flush drawer at ≤700px (geometry must stay pixel-identical there) */ :is(html.dark, body.dark, body) .header-vertical { background: var(--g1); border: 1px solid var(--edge); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); } @media (min-width: 701px) { :is(html.dark, body.dark, body) .header-vertical { top: 8px; left: 8px; bottom: 8px; border-radius: var(--r-lg); box-shadow: var(--spec), var(--depth-sm); } } @media (max-width: 700px) { :is(html.dark, body.dark, body) .header-vertical { border-top: 0; border-left: 0; border-bottom: 0; border-right: 1px solid var(--edge); background: var(--bg-2); } } :is(html.dark, body.dark, body) .header-vertical .maintabbarbottom { display: none; } :is(html.dark, body.dark, body) .header-vertical .tablist .button { background: transparent; border: 1px solid transparent; border-radius: var(--r-md); margin: 1px 4px; color: var(--ink-mute); box-shadow: none; text-shadow: none; font-weight: 600; } :is(html.dark, body.dark, body) .header-vertical .tablist .button:hover { background: var(--g2); color: var(--ink); box-shadow: none; } :is(html.dark, body.dark, body) .header-vertical .tablist .button.cur, :is(html.dark, body.dark, body) .header-vertical .tablist .button.cur:hover, :is(html.dark, body.dark, body) .header-vertical .tablist .button.cur:active { background: var(--g3); color: var(--ink); border-color: var(--edge); box-shadow: var(--spec); margin: 1px 4px; } /* overflow tablist popup (RoomTabList) → vertical dock chips */ :is(html.dark, body.dark, body) .tablist ul { padding: 6px; width: 220px; } :is(html.dark, body.dark, body) .tablist .button { background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); margin: 1px 0; color: var(--ink-soft); box-shadow: none; } :is(html.dark, body.dark, body) .tablist li:first-child .button, :is(html.dark, body.dark, body) .tablist li:last-child .button { border-radius: var(--r-sm); } :is(html.dark, body.dark, body) .tablist .button:hover { background: var(--g2); color: var(--ink); } :is(html.dark, body.dark, body) .tablist .button.cur { background: var(--g3); color: var(--ink); border-color: var(--edge); } /*═══════════════════════════════════════════════════════════ * Core controls — buttons, textboxes, selects, checkboxes *═══════════════════════════════════════════════════════════*/ :is(html.dark, body.dark, body) .button { background: var(--g1); border: 1px solid var(--edge); border-radius: var(--r-md); box-shadow: var(--spec); text-shadow: none; color: var(--ink); font-weight: 500; padding: 5px 13px; backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm); transition: background 0.14s ease, border-color 0.14s ease, transform 0.05s ease; } :is(html.dark, body.dark, body) .button:hover { background: var(--g2); border-color: var(--edge-2); color: var(--ink); } :is(html.dark, body.dark, body) .button:active { transform: translateY(1px); background: var(--g1); } :is(html.dark, body.dark, body) :is(.button option, .button optgroup) { background: var(--bg-2); color: var(--ink); } :is(html.dark, body.dark, body) :is(.button:focus-visible, .textbox:focus-visible) { outline: none; border-color: var(--edge-3); box-shadow: var(--spec), 0 0 0 3px var(--sel); } :is(html.dark, body.dark, body) .button.notifying { background: var(--g3); border-color: var(--edge-2); color: var(--ink); } :is(html.dark, body.dark, body) .button.notifying:hover { background: var(--g-bright); } :is(html.dark, body.dark, body) .button.alt-notifying { background: var(--g2); border-color: var(--edge-2); color: var(--ink); } :is(html.dark, body.dark, body) .button.subtle-notifying { color: var(--link); } :is(html.dark, body.dark, body) :is(.button.disabled, .button.disabled:hover, .button.disabled:active, .button:disabled, .button:disabled:hover, .button:disabled:active) { background: transparent; border-color: var(--edge); box-shadow: none; color: var(--ink-faint); backdrop-filter: none; -webkit-backdrop-filter: none; cursor: default; } :is(html.dark, body.dark, body) :is(.button.cur, .button.cur:hover, .button.cur:disabled, .button.cur:disabled:hover) { background: var(--g3); border-color: var(--edge-2); color: var(--ink); box-shadow: var(--spec); } :is(html.dark, body.dark, body) .textbox { background: var(--g-deep); border: 1px solid var(--edge); border-radius: var(--r-md); box-shadow: none; color: var(--ink); padding: 6px 12px; } :is(html.dark, body.dark, body) .textbox:hover { border-color: var(--edge-2); background: var(--g-deep); box-shadow: none; } :is(html.dark, body.dark, body) .textbox:focus { border-color: var(--edge-3); outline: none; background: var(--g-deep); box-shadow: 0 0 0 3px var(--sel); } :is(html.dark, body.dark, body) :is(.textbox.disabled, .textbox:disabled) { opacity: 1; background: transparent; color: var(--ink-faint); border-color: var(--edge); box-shadow: none; } :is(html.dark, body.dark, body) pre.textbox.textbox-empty[placeholder]:before { color: var(--ink-faint); } :is(html.dark, body.dark, body) .textbox tt { color: var(--link); } :is(html.dark, body.dark, body) .textbox tt.message-cmd { color: var(--link); } :is(html.dark, body.dark, body) .checkbox { border-radius: var(--r-sm); } :is(html.dark, body.dark, body) .checkbox:hover { background: var(--g2); color: var(--ink); text-shadow: none; } :is(html.dark, body.dark, body) :is(.label, .optlabel) { color: var(--ink-soft); } /* fake-select buttons (format/team) + PSDropdown trigger */ :is(html.dark, body.dark, body) :is(.select, .team) { border: 1px solid var(--edge); border-radius: var(--r-md); box-shadow: var(--spec); background: var(--g1); color: var(--ink); backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm); transition: background 0.14s ease, border-color 0.14s ease; } :is(html.dark, body.dark, body) :is(.select:hover, .select:hover .team, a.team:hover, button.team:hover) { border-color: var(--edge-2); background: var(--g2); color: var(--ink); } :is(html.dark, body.dark, body) :is(.select:active, .select:active .team, a.team:active, button.team:active) { background: var(--g1); box-shadow: var(--spec); } :is(html.dark, body.dark, body) :is(.select:focus, .team:focus) { outline: none; border-color: var(--edge-3); box-shadow: var(--spec), 0 0 0 3px var(--sel); } :is(html.dark, body.dark, body) .select:disabled { border-color: var(--edge); background: transparent; color: var(--ink-mute); box-shadow: none; } :is(html.dark, body.dark, body) :is(.select:disabled .team, .select:disabled:hover .team, .select:disabled:active .team) { border-color: transparent; background: transparent; } :is(html.dark, body.dark, body) .select:before { color: var(--ink-soft); } :is(html.dark, body.dark, body) .select:disabled:before { color: var(--ink-faint); } :is(html.dark, body.dark, body) .teamselect:disabled strong { color: var(--ink-mute); } :is(html.dark, body.dark, body) .select.preselected, :is(html.dark, body.dark, body) .select:disabled.preselected { color: var(--ink); } /* custom dropdown trigger + menu */ :is(html.dark, body.dark, body) .select.psdropdown { width: auto; min-width: 92px; max-width: 100%; height: auto; min-height: 32px; padding: 6px 28px 6px 13px; display: inline-flex; align-items: center; vertical-align: middle; font-weight: 600; } :is(html.dark, body.dark, body) .select.psdropdown .psdropdown-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :is(html.dark, body.dark, body) .select.psdropdown:before { top: 50%; transform: translateY(-50%); right: 11px; font-size: 12px; color: var(--ink-soft); } :is(html.dark, body.dark, body) .psselect-popup { display: flex; flex-direction: column; gap: 2px; padding: 5px; min-width: 150px; max-height: 70vh; overflow-y: auto; overscroll-behavior: contain; } :is(html.dark, body.dark, body) .psselect-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; box-sizing: border-box; text-align: left; padding: 9px 12px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-soft); cursor: pointer; font: inherit; font-weight: 500; transition: background 0.1s ease, color 0.1s ease; } :is(html.dark, body.dark, body) .psselect-option:hover { background: var(--g2); color: var(--ink); } :is(html.dark, body.dark, body) .psselect-option.cur { background: var(--g1); color: var(--ink); } :is(html.dark, body.dark, body) .psselect-option-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :is(html.dark, body.dark, body) .psselect-check { flex: none; color: var(--ink-soft); opacity: 0; } :is(html.dark, body.dark, body) .psselect-option.cur .psselect-check { opacity: 1; } :is(html.dark, body.dark, body) .psselect-group { font-size: 8pt; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--ink-mute); margin: 8px 6px 2px; padding: 0; } /* blocklinks */ :is(html.dark, body.dark, body) .blocklink { background: var(--g1); border: 1px solid var(--edge); border-radius: var(--r-md); color: var(--ink-soft); box-shadow: var(--spec); text-shadow: none; transition: background 0.14s ease, border-color 0.14s ease; } :is(html.dark, body.dark, body) :is(.blocklink:hover, .blocklink.cur) { background: var(--g2); border-color: var(--edge-2); color: var(--ink); } :is(html.dark, body.dark, body) .blocklink small { color: var(--ink-mute); } /* range sliders (volume, EV sliders) */ :is(html.dark, body.dark, body) input[type=range] { -webkit-appearance: none; appearance: none; height: 18px; background: transparent; accent-color: var(--accent); } :is(html.dark, body.dark, body) input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: var(--track); border: 0; } :is(html.dark, body.dark, body) input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: var(--g-bright); border: 1px solid var(--edge-2); box-shadow: var(--depth-sm); } :is(html.dark, body.dark, body) input[type=range]::-moz-range-track { height: 4px; border-radius: 999px; background: var(--track); border: 0; } :is(html.dark, body.dark, body) input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--g-bright); border: 1px solid var(--edge-2); box-shadow: var(--depth-sm); } /*═══════════════════════════════════════════════════════════ * Rooms / panels *═══════════════════════════════════════════════════════════*/ :is(html.dark, body.dark, body) .ps-room { top: 68px; /* HEADER_HEIGHT */ border-left: 1px solid var(--edge); } :is(html.dark, body.dark, body) :is(.ps-room.ps-room-light, .ps-room-light, .tournament-box, .tournament-status, .tournament-toggle, .pm-log-add) { background: var(--g1); backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm); color: var(--ink); } :is(html.dark, body.dark, body) .ps-room.ps-room-opaque { background: var(--bg-2); color: var(--ink); } :is(html.dark, body.dark, body) .mainmessage { background: var(--g1); border: 1px solid var(--edge); border-radius: var(--r-lg); color: var(--ink); box-shadow: var(--spec), var(--depth-sm); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); } /*═══════════════════════════════════════════════════════════ * Main menu *═══════════════════════════════════════════════════════════*/ :is(html.dark, body.dark, body) .menugroup { background: var(--g1); border: 1px solid var(--edge); border-radius: var(--r-xl); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--spec), var(--depth); color: var(--ink); text-shadow: none; padding: 16px 0; } :is(html.dark, body.dark, body) .menugroup .label { color: var(--ink-soft); } :is(html.dark, body.dark, body) :is(.mainmenu.button, .button.mainmenu1, .button.mainmenu2, .button.mainmenu3, .button.mainmenu4, .button.mainmenu5, .button.mainmenu6, .button.mainmenu7) { background: var(--g1); border: 1px solid var(--edge); border-radius: var(--r-md); color: var(--ink); text-shadow: none; box-shadow: var(--spec); font-weight: 600; padding: 9px 12px; transition: background 0.14s ease, border-color 0.14s ease, transform 0.05s ease; } :is(html.dark, body.dark, body) :is(.mainmenu.button:hover, .button.mainmenu1:hover, .button.mainmenu2:hover, .button.mainmenu3:hover, .button.mainmenu4:hover, .button.mainmenu5:hover, .button.mainmenu6:hover, .button.mainmenu7:hover) { background: var(--g2); border-color: var(--edge-2); color: var(--ink); } :is(html.dark, body.dark, body) :is(.mainmenu.button:active, .button.mainmenu1:active, .button.mainmenu2:active, .button.mainmenu3:active, .button.mainmenu4:active, .button.mainmenu5:active, .button.mainmenu6:active, .button.mainmenu7:active) { transform: translateY(1px); background: var(--g1); } :is(html.dark, body.dark, body) :is(.mainmenu.button.disabled, .mainmenu.button.disabled:hover, .mainmenu.button.disabled:active) { background: transparent; border-color: var(--edge); color: var(--ink-faint); box-shadow: none; } /* hero Battle! — inverted accent fill */ :is(html.dark, body.dark, body) :is(.mainmenu.button.big, .mainmenu.button.big.mainmenu1) { background: var(--accent); border: 1px solid var(--accent); border-radius: var(--r-lg); color: var(--ink-inv); height: 60px; box-shadow: var(--depth-sm); text-shadow: none; } :is(html.dark, body.dark, body) .mainmenu.button.big strong { font-size: 16pt; font-weight: 800; } :is(html.dark, body.dark, body) .mainmenu.button.big:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--ink-inv); } :is(html.dark, body.dark, body) .mainmenu.button.big:active { transform: translateY(1px); } :is(html.dark, body.dark, body) :is(.mainmenu.button.big.disabled, .mainmenu.button.big.disabled:hover) { background: transparent; color: var(--ink-faint); box-shadow: none; border-color: var(--edge); } :is(html.dark, body.dark, body) .menugroup .button.small { border-radius: var(--r-sm); } :is(html.dark, body.dark, body) :is(.mainmenu-footer, .mainmenu-footer small, .mainmenufooter, .mainmenufooter small) { color: var(--ink-mute); text-shadow: none; } :is(html.dark, body.dark, body) :is(.mainmenu-footer a, .mainmenu-footer button, .mainmenufooter a) { color: var(--ink-soft); text-shadow: none; } :is(html.dark, body.dark, body) :is(.mainmenu-footer a:hover, .mainmenu-footer button:hover, .mainmenufooter a:hover) { color: var(--ink); } @media (min-width: 1150px) { .mainmenu-left { margin: 0 auto; } .mainmenu-footer { left: 0; right: 0; padding-left: 0; text-align: center; } } /*═══════════════════════════════════════════════════════════ * Mini-windows (news, PMs, challenges) — macOS titlebar cards *═══════════════════════════════════════════════════════════*/ :is(html.dark, body.dark, body) :is(.mini-window-header, .pm-window h3) { background: var(--g2); color: var(--ink-soft); border: 1px solid var(--edge); border-top-left-radius: var(--r-lg); border-top-right-radius: var(--r-lg); font-weight: 600; box-shadow: var(--spec); backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm); padding: 5px 8px 5px 10px; } :is(html.dark, body.dark, body) :is(.mini-window-header:hover, .pm-window h3:hover) { color: var(--ink); } :is(html.dark, body.dark, body) :is(.mini-window-header.notifying, .mini-window-header.notifying:hover) { background: var(--g3); border-color: var(--edge-2); color: var(--ink); } :is(html.dark, body.dark, body) .mini-window-header small { color: var(--ink-mute); } /* traffic-light window buttons */ :is(html.dark, body.dark, body) .mini-window-header :is(.closebutton, .maximizebutton, .minimizebutton) { width: 20px; height: 20px; margin: 2px 2px 0 0; border-radius: 50%; font-size: 11px; line-height: 20px; text-align: center; color: transparent; background: var(--g3); border: 1px solid var(--edge-2); transition: color 0.1s ease, background 0.1s ease; } :is(html.dark, body.dark, body) .mini-window-header :is(.closebutton i, .maximizebutton i, .minimizebutton i) { display: block; line-height: 18px; } :is(html.dark, body.dark, body) .mini-window-header:hover :is(.closebutton, .maximizebutton, .minimizebutton) { color: var(--ink-soft); } :is(html.dark, body.dark, body) .mini-window-header .closebutton:hover { color: var(--ink-inv); background: var(--bad); border-color: var(--bad); } :is(html.dark, body.dark, body) .mini-window-header :is(.maximizebutton:hover, .minimizebutton:hover) { color: var(--ink); background: var(--g-bright); } :is(html.dark, body.dark, body) :is(.mini-window .mini-window-contents, .mini-window-body, .pm-log) { border: 1px solid var(--edge); border-top: 0; border-bottom-left-radius: var(--r-lg); border-bottom-right-radius: var(--r-lg); } :is(html.dark, body.dark, body) .mini-window-body { background: var(--g1); color: var(--ink); backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm); } :is(html.dark, body.dark, body) .mini-window.collapsed .mini-window-header { border-radius: var(--r-lg); } :is(html.dark, body.dark, body) :is(.mini-window.focused .mini-window-header, .mini-window.focused .mini-window-header:hover) { background: var(--g3); color: var(--ink); } :is(html.dark, body.dark, body) :is(.mini-window.focused .mini-window-header, .mini-window.focused .mini-window-body, .mini-window.focused .mini-window-contents) { border-color: var(--edge-2); } :is(html.dark, body.dark, body) .newsentry { color: var(--ink-soft); } :is(html.dark, body.dark, body) .newsentry + .newsentry { border-top: 1px solid var(--edge); } :is(html.dark, body.dark, body) .unread { background: var(--sel); } :is(html.dark, body.dark, body) .challenge { border: 1px solid var(--edge-2); background: var(--g2); color: var(--ink); border-radius: var(--r-md); } :is(html.dark, body.dark, body) .challenge.outgoing { background: var(--g1); color: var(--ink-soft); } /*═══════════════════════════════════════════════════════════ * Popups / overlays *═══════════════════════════════════════════════════════════*/ :is(html.dark, body.dark, body) .ps-overlay { background: var(--scrim); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } :is(html.dark, body.dark, body) .ps-popup { background: var(--g-deep); color: var(--ink); border: 1px solid var(--edge-2); border-radius: var(--r-xl); box-shadow: var(--spec), var(--depth-lg); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); max-width: calc(100vw - 8px); box-sizing: border-box; } :is(html.dark, body.dark, body) .ps-popup h3 { color: var(--ink); } :is(html.dark, body.dark, body) p.or { color: var(--ink-mute); } :is(html.dark, body.dark, body) :is(p.or:before, p.or:after) { border-bottom-color: var(--edge-2); } :is(html.dark, body.dark, body) .ps-popup p.error { color: var(--bad); } @media (max-width: 380px) { :is(html.dark, body.dark, body) .ps-overlay .ps-popup { max-width: calc(100vw - 16px); } } /* generic .options popups */ :is(html.dark, body.dark, body) .options h3 { color: var(--ink-mute); } :is(html.dark, body.dark, body) .options .option:hover { background: var(--g2); color: var(--ink); border-radius: var(--r-sm); } :is(html.dark, body.dark, body) .options .option.cur { color: var(--ink); } :is(html.dark, body.dark, body) .options .star { color: var(--ink-faint); } :is(html.dark, body.dark, body) .options .star:hover { color: #d9a514; } :is(html.dark, body.dark, body) .options .star.cur { color: #d9a514; text-shadow: none; } /* avatar / background / form chooser grids → glass tiles */ :is(html.dark, body.dark, body) :is(.avatarlist button, .formlist button, .bglist button) { border: 1px solid transparent; border-radius: var(--r-md); background-color: transparent; transition: background 0.12s ease, border-color 0.12s ease, transform 0.1s ease; } :is(html.dark, body.dark, body) :is(.avatarlist button:hover, .avatarlist button.cur:hover, .formlist button:hover, .formlist button.cur:hover, .bglist button:hover, .bglist button.cur:hover) { border-color: var(--edge-2); background-color: var(--g2); box-shadow: none; transform: translateY(-1px); } :is(html.dark, body.dark, body) :is(.avatarlist button.cur, .formlist button.cur, .bglist button.cur) { border-color: var(--edge-3); background-color: var(--g1); } :is(html.dark, body.dark, body) .volume em { color: var(--ink-mute); } :is(html.dark, body.dark, body) .userdetails .offline { color: var(--bad); } :is(html.dark, body.dark, body) .usergroup { color: var(--ink-mute); } :is(html.dark, body.dark, body) .userstatus { color: var(--ink-soft); } /*────────────────────────────────────────────── * Battle FORMAT menu (.formatdrop — rebuilt panel) *──────────────────────────────────────────────*/ :is(html.dark, body.dark, body) .formatdrop { display: flex; flex-direction: column; min-height: 0; box-sizing: border-box; width: min(700px, calc(100vw - 30px)); max-height: calc(100dvh - 70px); padding: 15px; } :is(html.dark, body.dark, body) .formatdrop-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 2px 2px 11px; flex: none; border-bottom: 1px solid var(--edge); margin-bottom: 10px; } :is(html.dark, body.dark, body) .formatdrop-search { flex: 1 1 200px; min-width: 0; border-radius: var(--r-pill); padding: 8px 15px; } :is(html.dark, body.dark, body) .formatdrop-gens { display: inline-flex; flex: none; align-items: center; background: var(--track); border: 1px solid var(--edge); border-radius: var(--r-pill); padding: 3px; gap: 2px; } :is(html.dark, body.dark, body) .formatdrop-gens .button { border: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-radius: var(--r-pill) !important; margin: 0 !important; padding: 4px 9px; min-width: 0; color: var(--ink-mute); font-weight: 600; font-size: 10px; } :is(html.dark, body.dark, body) .formatdrop-gens .button:hover { background: var(--g2) !important; color: var(--ink); } :is(html.dark, body.dark, body) .formatdrop-gens .button.cur { background: var(--g-bright) !important; color: var(--ink); box-shadow: var(--spec) !important; } /* centered on screen */ :is(html.dark, body.dark, body) .ps-overlay .ps-popup:has(.formatdrop) { position: fixed !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%) !important; margin: 0 !important; max-width: none !important; } :is(html.dark, body.dark, body) .formatdrop-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 2px 2px; } :is(html.dark, body.dark, body) .formatdrop-section { margin-bottom: 14px; } :is(html.dark, body.dark, body) .formatdrop-section h3 { font-size: 8.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--ink-mute); margin: 4px 2px 8px; padding: 0; } :is(html.dark, body.dark, body) .formatdrop-section h3 .fa { color: var(--ink-soft); margin-right: 6px; } :is(html.dark, body.dark, body) .formatdrop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 6px; } :is(html.dark, body.dark, body) .formatdrop-item { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; box-sizing: border-box; padding: 9px 12px; text-align: left; border: 1px solid var(--edge); border-radius: var(--r-md); background: var(--g1); color: var(--ink-soft); box-shadow: var(--spec); cursor: pointer; font: inherit; font-weight: 500; transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease; } :is(html.dark, body.dark, body) .formatdrop-item:hover { background: var(--g2); border-color: var(--edge-2); color: var(--ink); } :is(html.dark, body.dark, body) .formatdrop-item.cur { background: var(--g3); border-color: var(--edge-3); color: var(--ink); } :is(html.dark, body.dark, body) .formatdrop-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :is(html.dark, body.dark, body) .formatdrop-name em { color: var(--ink-mute); font-style: normal; } :is(html.dark, body.dark, body) .formatdrop-item .star { flex: none; color: var(--ink-faint); opacity: 0; transition: opacity 0.1s ease; } :is(html.dark, body.dark, body) :is(.formatdrop-item:hover .star, .formatdrop-item .star.cur) { opacity: 1; } :is(html.dark, body.dark, body) .formatdrop-item .star.cur { color: #d9a514; } :is(html.dark, body.dark, body) .formatdrop-empty { color: var(--ink-mute); padding: 14px; text-align: center; } @media (max-width: 480px) { :is(html.dark, body.dark, body) .formatdrop-grid { grid-template-columns: 1fr; } :is(html.dark, body.dark, body) .formatdrop-head { gap: 6px; } :is(html.dark, body.dark, body) .formatdrop-gens .button { padding: 5px 8px; } } /*══════════════════════════════════════════════════════════ * Settings sheet (.ps-settings) *══════════════════════════════════════════════════════════*/ :is(html.dark, body.dark, body) .ps-settings { padding: 6px 4px 2px; } :is(html.dark, body.dark, body) .ps-settings > p { margin: 7px 0; } :is(html.dark, body.dark, body) .ps-settings h3 { font-size: 8.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--ink-mute); margin: 16px 4px 4px; padding: 0; } :is(html.dark, body.dark, body) .ps-settings hr { margin: 14px 0 4px; } :is(html.dark, body.dark, body) .ps-settings .optlabel { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 10pt; font-weight: 500; color: var(--ink-soft); padding: 3px 4px; } :is(html.dark, body.dark, body) .ps-settings .optlabel :is(.select.psdropdown, .button) { flex: none; } :is(html.dark, body.dark, body) .ps-settings .checkbox { display: flex; align-items: center; gap: 10px; font-size: 10pt; font-weight: 500; color: var(--ink-soft); padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer; transition: background 0.1s ease; } :is(html.dark, body.dark, body) .ps-settings .checkbox:hover { background: var(--g1); color: var(--ink); } :is(html.dark, body.dark, body) .ps-settings .checkbox input[type=checkbox] { appearance: none; -webkit-appearance: none; flex: none; width: 19px; height: 19px; margin: 0; border: 1px solid var(--edge-2); border-radius: 6px; background: var(--g1); cursor: pointer; position: relative; transition: background 0.12s ease, border-color 0.12s ease; } :is(html.dark, body.dark, body) .ps-settings .checkbox input[type=checkbox]:checked { background: var(--accent); border-color: var(--accent); } :is(html.dark, body.dark, body) .ps-settings .checkbox input[type=checkbox]:checked::after { content: ''; position: absolute; left: 6px; top: 2px; width: 4px; height: 9px; border: solid var(--ink-inv); border-width: 0 2px 2px 0; transform: rotate(45deg); } /*═══════════════════════════════════════════════════════════ * Chat *═══════════════════════════════════════════════════════════*/ :is(html.dark, body.dark, body) :is(.chat-log, .readable-bg) { background: var(--g1); color: var(--ink); backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm); } :is(html.dark, body.dark, body) .chat-log-add { border-top: 1px solid var(--edge); } :is(html.dark, body.dark, body) .chat.mine { background: var(--sel); } :is(html.dark, body.dark, body) .highlighted { background: var(--sel); } :is(html.dark, body.dark, body) .chat > strong { color: var(--ink); } :is(html.dark, body.dark, body) .chat small { color: var(--ink-faint); } :is(html.dark, body.dark, body) .chatbox label { color: var(--ink-soft); } :is(html.dark, body.dark, body) .message-pm { color: var(--ok); } :is(html.dark, body.dark, body) .message-log h2 { background: var(--g2); border-color: var(--edge); color: var(--ink); } /* userlist */ :is(html.dark, body.dark, body) :is(.userlist strong, .userlist span) { text-shadow: none; } :is(html.dark, body.dark, body) .userlist li em.group { color: var(--ink-faint); } :is(html.dark, body.dark, body) .userlist li button:hover { background: var(--g2); } :is(html.dark, body.dark, body) .userlist li button:active { background: var(--g3); } :is(html.dark, body.dark, body) .userlist li.cur, :is(html.dark, body.dark, body) .userlist li.cur button { background: var(--g3); } :is(html.dark, body.dark, body) .userlist-maximized { background: var(--bg-2); color: var(--ink); } :is(html.dark, body.dark, body) .userlist-minimized { background: var(--g1); color: var(--ink-soft); } :is(html.dark, body.dark, body) :is(.userlist-minimized .userlist-count:hover, .userlist-maximized .userlist-count:hover) { background: var(--g2); } :is(html.dark, body.dark, body) .userlist-count { color: var(--ink-mute); font-weight: 600; } :is(html.dark, body.dark, body) .chat-log.hasuserlist { border-left: 1px solid var(--edge); } /*═══════════════════════════════════════════════════════════ * Tournament UI *═══════════════════════════════════════════════════════════*/ :is(html.dark, body.dark, body) .tournament-wrapper { border-bottom: 1px solid var(--edge); } :is(html.dark, body.dark, body) .tournament-status { border-right: 1px solid var(--edge); } :is(html.dark, body.dark, body) .tournament-box { border-color: var(--edge); } :is(html.dark, body.dark, body) .tournament-title { color: var(--ink); } :is(html.dark, body.dark, body) .tournament-title:hover { background: var(--g2); } :is(html.dark, body.dark, body) .tournament-tools { border-top: 1px solid var(--edge); } :is(html.dark, body.dark, body) :is(.tournament-challenge-user, .tournament-challengeby, .tournament-challenged-message, .tournament-challenging-message) { color: var(--ink-soft); } /* bracket table */ :is(html.dark, body.dark, body) :is(.tournament-bracket-table, .tournament-bracket-table td, .tournament-bracket-table th) { border-color: var(--edge-2); } :is(html.dark, body.dark, body) .tournament-bracket-table-cell-result-win { background: var(--g3); color: var(--ink); } :is(html.dark, body.dark, body) .tournament-bracket-table-cell-result-draw { background: var(--g2); color: var(--ink-soft); } :is(html.dark, body.dark, body) .tournament-bracket-table-cell-result-loss { background: transparent; color: var(--ink-faint); } /* bracket SVG tree — monochrome glass */ :is(html.dark, body.dark, body) .tournament-bracket-tree-link { stroke: var(--edge-2); } :is(html.dark, body.dark, body) .tournament-bracket-tree-link-active { stroke: var(--ink-mute); } :is(html.dark, body.dark, body) .tournament-bracket-tree-abbreviated { fill: var(--ink-mute); } :is(html.dark, body.dark, body) .tournament-bracket-tree-node rect { fill: var(--g2); stroke: var(--edge-2); } :is(html.dark, body.dark, body) .tournament-bracket-tree-node a rect { fill: var(--g3); stroke: var(--edge-3); } :is(html.dark, body.dark, body) .tournament-bracket-tree-node a:hover rect { fill: var(--g-bright); stroke: var(--edge-3); } :is(html.dark, body.dark, body) :is(.tournament-bracket-tree-node-match-available rect, .tournament-bracket-tree-node-match-challenging rect) { fill: var(--g-bright); stroke: var(--ink-mute); } :is(html.dark, body.dark, body) .tournament-bracket-tree-node rect.tournament-bracket-tree-win { fill: var(--ok); stroke: var(--ok); opacity: 0.55; } :is(html.dark, body.dark, body) :is(.tournament-bracket-tree-node rect.tournament-bracket-tree-loss, .tournament-bracket-tree-node rect.tournament-bracket-tree-draw) { fill: var(--g1); stroke: var(--edge); } :is(html.dark, body.dark, body) :is(.tournament-bracket-tree-node text, .tournament-bracket-tree-node) { fill: var(--ink); color: var(--ink); } :is(html.dark, body.dark, body) .tournament-bracket-tree-node a { color: var(--link); } :is(html.dark, body.dark, body) :is(.tournament-bracket-tree-node a text, .tournament-bracket-tree-node a:hover text) { fill: var(--link); } /*═══════════════════════════════════════════════════════════ * Tables / ladder *═══════════════════════════════════════════════════════════*/ :is(html.dark, body.dark, body) :is(.ladder table, .ladder td, .ladder th, .table, .table td, .table th) { border-color: var(--edge); } :is(html.dark, body.dark, body) :is(.ladder table, .table) { border-radius: var(--r-md); overflow: hidden; border-collapse: separate; border-spacing: 0; } :is(html.dark, body.dark, body) :is(.ladder th, .table th) { background: var(--g2); color: var(--ink); font-weight: 600; letter-spacing: 0.2px; padding: 7px 9px; } :is(html.dark, body.dark, body) :is(.ladder td, .table td) { padding: 6px 9px; } /*═══════════════════════════════════════════════════════════ * Room list (rooms panel) *═══════════════════════════════════════════════════════════*/ :is(html.dark, body.dark, body) .roomlist h2 { font-size: 15pt; font-weight: 800; margin: 4px 0 12px; padding: 0 2px; color: var(--ink); } :is(html.dark, body.dark, body) .roomlist .blocklink { margin: 0 0 9px; padding: 11px 14px; border-radius: var(--r-lg); border: 1px solid var(--edge); background: var(--g1); box-shadow: var(--spec); backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm); line-height: 1.5; } :is(html.dark, body.dark, body) .roomlist .blocklink strong { font-size: 12pt; font-weight: 700; color: var(--ink); } :is(html.dark, body.dark, body) .roomlist .blocklink strong i.fa { color: var(--ink-mute); margin-right: 6px; } :is(html.dark, body.dark, body) :is(.roomlist .blocklink:hover, .roomlist .blocklink.cur) { border-color: var(--edge-2); background: var(--g2); } :is(html.dark, body.dark, body) .roomlist .subrooms { padding-left: 16px; color: var(--ink-mute); } :is(html.dark, body.dark, body) .roomlist .subrooms .blocklink { display: inline-block; margin: 3px 5px 3px 0; padding: 4px 11px; border-radius: var(--r-pill); } :is(html.dark, body.dark, body) .roomcounters .button { border-radius: var(--r-lg); } /*═══════════════════════════════════════════════════════════ * BATTLE — frame, log, controls (sprites untouched) *═══════════════════════════════════════════════════════════*/ :is(html.dark, body.dark, body) .ps-room .battle { border: 1px solid var(--edge-2); border-radius: var(--r-lg); box-shadow: var(--spec), var(--depth); overflow: hidden; } :is(html.dark, body.dark, body) :is(.ps-room .battle-log, .ps-room .battle-log-add) { border-left: 1px solid var(--edge); border-top: 0; border-right: 0; border-bottom: 0; background: var(--g1); backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm); color: var(--ink); } :is(html.dark, body.dark, body) .ps-room .battle-userlist { border-left: 1px solid var(--edge); } :is(html.dark, body.dark, body) .battle-log { color: var(--ink); } /* centered controls beneath the enlarged field */ .battle-controls > .controls, .battle-controls > .controls > .whatdo, .battle-controls .movecontrols, .battle-controls .switchcontrols { max-width: 600px; margin-left: auto; margin-right: auto; } .battle-controls .movemenu, .battle-controls .switchmenu { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto; padding-left: 0; } .battle-controls .movemenu .movebutton, .battle-controls .switchmenu button { float: none; margin: 0; } .battle-controls .movebutton { width: 172px; height: 46px; } .battle-controls .switchmenu button { width: 112px; } :is(html.dark, body.dark, body) :is(.whatdo, .battle-controls .whatdo) { text-align: center; font-size: 9.5pt; color: var(--ink-mute); } :is(html.dark, body.dark, body) .battle-controls .whatdo small { border-radius: var(--r-sm); border-color: var(--edge-2); } :is(html.dark, body.dark, body) .battle-controls .whatdo small.weak { color: var(--warn); border-color: var(--warn); } :is(html.dark, body.dark, body) .battle-controls .whatdo small.critical { color: var(--bad); border-color: var(--bad); } :is(html.dark, body.dark, body) :is(.moveselect, .switchselect, .shiftselect) { text-align: center; font-style: normal; font-weight: 700; letter-spacing: 0.6px; color: var(--ink-soft); text-transform: uppercase; font-size: 10.5pt; } :is(html.dark, body.dark, body) :is(.moveselect button, .switchselect button) { color: var(--ink-soft); } :is(html.dark, body.dark, body) :is(.movebutton, .switchmenu button) { background: var(--g1); border: 1px solid var(--edge); border-radius: var(--r-md); box-shadow: var(--spec); text-shadow: none; color: var(--ink); transition: background 0.12s ease, border-color 0.12s ease; } :is(html.dark, body.dark, body) :is(.movebutton:hover, .switchmenu button:hover) { background: var(--g2); border-color: var(--edge-2); } :is(html.dark, body.dark, body) :is(.movebutton:active, .movebutton.pressed, .switchmenu button:active, .switchmenu button.pressed) { background: var(--g3); } :is(html.dark, body.dark, body) :is(.movebutton small, .switchmenu button small) { color: var(--ink-mute); } :is(html.dark, body.dark, body) :is(.movebutton.disabled, .movebutton:disabled, .switchmenu button.disabled, .switchmenu button:disabled) { background: transparent !important; border-color: var(--edge) !important; box-shadow: none !important; color: var(--ink-faint) !important; opacity: 1; } :is(html.dark, body.dark, body) .switchmenu button .hpbar { border-color: var(--edge-2); background: var(--track); } :is(html.dark, body.dark, body) .megaevo { color: var(--ink); border-color: var(--edge-2); border-radius: var(--r-md); } :is(html.dark, body.dark, body) .megaevo:hover { color: var(--ink); background: var(--g2); border-color: var(--edge-3); } /* timer */ :is(html.dark, body.dark, body) :is(.timerbutton-on, .timerbutton-on:hover) { color: var(--bad); border-color: var(--bad); } :is(html.dark, body.dark, body) :is(.timerbutton-critical, .timerbutton-critical:hover) { color: #fff; border-color: #b33; background: #b33; text-shadow: none; } /* replay seek + chooser bars */ :is(html.dark, body.dark, body) .chooser { background: var(--g1); border: 1px solid var(--edge); color: var(--ink); border-radius: var(--r-md); overflow: hidden; backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm); } :is(html.dark, body.dark, body) .chooser em { background: var(--g1); border-right: 1px solid var(--edge); color: var(--ink-mute); } :is(html.dark, body.dark, body) .chooser button { color: var(--ink); } :is(html.dark, body.dark, body) .chooser button:hover { border-color: var(--edge-2); background: var(--g2); color: var(--ink); } :is(html.dark, body.dark, body) :is(.chooser button.sel, .chooser button.sel:hover) { border-color: var(--edge-3); background: var(--g3); color: var(--ink); } /* battle tooltips */ :is(html.dark, body.dark, body) #tooltipwrapper .tooltip { background: var(--g-deep); border: 1px solid var(--edge-2); border-radius: var(--r-md); color: var(--ink); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); } :is(html.dark, body.dark, body) #tooltipwrapper .tooltip h2 { border-bottom: 1px solid var(--edge); color: var(--ink); background: transparent; } :is(html.dark, body.dark, body) #tooltipwrapper .tooltip p.tooltip-section { border-top: 1px solid var(--edge); } :is(html.dark, body.dark, body) #tooltipwrapper.tooltip-locked .tooltip { border-color: var(--edge-3); background: var(--g-deep); } /*═══════════════════════════════════════════════════════════ * Teambuilder *═══════════════════════════════════════════════════════════*/ :is(html.dark, body.dark, body) .folderpane { border-left-color: transparent; } :is(html.dark, body.dark, body) :is(.folderlist .foldersep:before, .folderlistafter:before, .folderlistbefore:before, .folderpane h3, .folderpane .text, .folder .selectFolder, .folderhack1, .folderhack2) { background: var(--g1); color: var(--ink); border-right-color: var(--edge); } :is(html.dark, body.dark, body) :is(.folderpane h3, .folderpane .text) { color: var(--ink-mute); } :is(html.dark, body.dark, body) .folderpane i { color: var(--ink-mute); } :is(html.dark, body.dark, body) .folder .selectFolder:hover { background: var(--g2); color: var(--ink); } :is(html.dark, body.dark, body) :is(.folder .selectFolder.active, .folder .selectFolder:active) { background: var(--g3); color: var(--ink); } :is(html.dark, body.dark, body) :is(.folder.cur .selectFolder, .folder.cur .selectFolder:hover, .folder.cur .selectFolder:active) { background: transparent; color: var(--ink); border-top-color: var(--edge); border-bottom-color: var(--edge); border-left-color: var(--edge); } :is(html.dark, body.dark, body) .teamname .textbox { font-family: var(--font); } :is(html.dark, body.dark, body) .teaminnertextbox { border-color: var(--edge-3); box-shadow: 0 0 0 2px var(--sel); border-radius: var(--r-sm); } :is(html.dark, body.dark, body) :is(.searchresults, .team-focus-editor) { background: var(--g-deep); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); } :is(html.dark, body.dark, body) .searchresults { border: 1px solid var(--edge-2); border-radius: var(--r-md); box-shadow: var(--depth); } :is(html.dark, body.dark, body) :is(.setdetails, .setstats) { background: var(--g1); border: 1px solid var(--edge); border-radius: var(--r-md); box-shadow: var(--spec); color: var(--ink); } :is(html.dark, body.dark, body) :is(.setdetails:hover, .setstats:hover) { background: var(--g2); border-color: var(--edge-2); box-shadow: var(--spec); } :is(html.dark, body.dark, body) :is(.setdetails:active, .setstats:active) { background: var(--g3); border: 1px solid var(--edge-2); box-shadow: none; margin: 2px 2px 1px 1px; } :is(html.dark, body.dark, body) :is(.setdetails:focus-visible, .setstats:focus-visible) { border: 1px solid var(--edge-3); outline: none; } :is(html.dark, body.dark, body) .setdetails .detailcell + .detailcell { border-top: 1px solid var(--edge); } :is(html.dark, body.dark, body) .setdetails label { color: var(--ink-mute); } :is(html.dark, body.dark, body) .statrow label { color: var(--ink-soft); } :is(html.dark, body.dark, body) .statrow .statrow-head em { color: var(--ink-mute); } :is(html.dark, body.dark, body) .statrow .statgraph span { border-color: transparent; border-radius: 2px; } :is(html.dark, body.dark, body) .setstatbar span { border-color: transparent; border-radius: 3px; } :is(html.dark, body.dark, body) .sample-sets { border: 1px solid var(--edge); border-radius: var(--r-md); } :is(html.dark, body.dark, body) .set-button .label { color: var(--ink-mute); } :is(html.dark, body.dark, body) .set-button .detailcell + .detailcell { border-left: 1px solid var(--edge); } :is(html.dark, body.dark, body) .set-button .sprite-inner { background: none; } :is(html.dark, body.dark, body) .set-button .cur .sprite-inner { background: none; } /* dex / search result lists (utilichart.css + battle-search.css load after us; the :is() pattern outranks them) */ :is(html.dark, body.dark, body) :is(.dexlist h3, .dexentry h3, .resultheader h3, .utilichart h3) { background: var(--g2); color: var(--ink); border: 1px solid var(--edge); border-right: none; text-shadow: none; box-shadow: none; } :is(html.dark, body.dark, body) :is(.dexlist .result a, .teambuilder-results .result a, .utilichart .result a) { color: var(--ink-soft); } :is(html.dark, body.dark, body) :is(.dexlist .result a.hover, .dexlist .result a:hover, .teambuilder-results .result a.hover, .teambuilder-results .result a:hover, .utilichart .result a:hover, .utilichart .result a.hover) { border-color: var(--edge-2); background: var(--g2); color: var(--ink); } :is(html.dark, body.dark, body) :is(.dexlist .result a.cur, .teambuilder-results .result a.cur, .utilichart .result a.cur) { border-color: var(--edge-3); background: var(--g3); } :is(html.dark, body.dark, body) :is(.dexlist .result a.cur:hover, .dexlist .result a.cur.hover, .teambuilder-results .result a.cur:hover, .utilichart .result a.cur:hover) { border-color: var(--edge-3); background: var(--g-bright); color: var(--ink); } :is(html.dark, body.dark, body) :is(.dexlist .namecol, .dexlist .pokemonnamecol, .dexlist .movenamecol, .utilichart .namecol, .utilichart .pokemonnamecol, .utilichart .movenamecol, .dexlist .col, .utilichart .col) { color: var(--ink-soft); } :is(html.dark, body.dark, body) :is(.dexlist .cur .col, .utilichart .cur .col, .dexlist a:hover .col, .utilichart a:hover .col) { color: var(--ink); } :is(html.dark, body.dark, body) :is(.filter, .searchboxwrapper .filter) { background: var(--g2); border: 1px solid var(--edge); border-radius: var(--r-pill); color: var(--ink); } :is(html.dark, body.dark, body) :is(.sortrow, .sortcol) { background: var(--g1); color: var(--ink-soft); } :is(html.dark, body.dark, body) .sortcol:hover { background: var(--g2); color: var(--ink); } :is(html.dark, body.dark, body) .sortcol.cur { background: var(--g3); color: var(--ink); } /*═══════════════════════════════════════════════════════════ * Server-emitted HTML (chat protocol, room intros, pages) *═══════════════════════════════════════════════════════════*/ :is(html.dark, body.dark, body) :is(.broadcast-blue, .message-announce) { background: var(--accent); color: var(--ink-inv); border-radius: var(--r-sm); } :is(html.dark, body.dark, body) :is(.broadcast-blue a, .message-announce a) { color: var(--ink-inv); text-decoration: underline; } :is(html.dark, body.dark, body) .broadcast-green { background: var(--ok); color: #fff; border-radius: var(--r-sm); } :is(html.dark, body.dark, body) .broadcast-red { background: var(--bad); color: #fff; border-radius: var(--r-sm); } :is(html.dark, body.dark, body) :is(.broadcast-green a, .broadcast-red a) { color: #fff; text-decoration: underline; } :is(html.dark, body.dark, body) :is(.infobox, .infobox-limited) { border: 1px solid var(--edge-2); border-radius: var(--r-sm); background: var(--g1); padding: 4px 8px; } :is(html.dark, body.dark, body) .message-error { color: var(--bad); } :is(html.dark, body.dark, body) .message-warning { color: var(--warn); } :is(html.dark, body.dark, body) .message-learn-canlearn { color: var(--ok); } :is(html.dark, body.dark, body) .message-learn-cannotlearn { color: var(--bad); } :is(html.dark, body.dark, body) .message-effect-weak { color: var(--bad); } :is(html.dark, body.dark, body) .message-effect-resist { color: var(--link); } :is(html.dark, body.dark, body) .message-effect-immune { color: var(--ink-mute); } :is(html.dark, body.dark, body) .stat-boosted { color: var(--ok); } :is(html.dark, body.dark, body) .stat-lowered { color: var(--bad); } :is(html.dark, body.dark, body) .spoiler { background: var(--g3); color: transparent; border-radius: 4px; padding: 0 3px; } :is(html.dark, body.dark, body) .spoiler :is(a, code) { color: transparent; } :is(html.dark, body.dark, body) :is(.spoiler:hover, .spoiler:active, .spoiler-shown) { background: var(--g2); color: var(--ink); border-radius: 4px; padding: 0 3px; } :is(html.dark, body.dark, body) :is(.spoiler:hover a, .spoiler:active a, .spoiler-shown a) { color: var(--link); } :is(html.dark, body.dark, body) :is(.spoiler:hover code, .spoiler:active code, .spoiler-shown code) { color: var(--ink); } :is(html.dark, body.dark, body) :is(code, .code, kbd) { font-family: var(--mono); background: var(--g2); border: 1px solid var(--edge); border-radius: 6px; color: var(--ink); padding: 0 4px; } :is(html.dark, body.dark, body) .greentext { color: var(--ok); } :is(html.dark, body.dark, body) .notice { color: var(--ink-soft); } :is(html.dark, body.dark, body) .message-log .rated strong { background: var(--g3); color: var(--ink); border-radius: 5px; padding: 0 4px; } :is(html.dark, body.dark, body) :is(.details summary, .readmore summary) { color: var(--ink-soft); } :is(html.dark, body.dark, body) :is(.roomintro, .uhtml, .uhtmlchange) { color: var(--ink); } :is(html.dark, body.dark, body) :is(.roomintro img, .uhtml img) { max-width: 100%; } :is(html.dark, body.dark, body) .revealed { background: var(--sel); } :is(html.dark, body.dark, body) .chat.timer { color: var(--warn); } /*═══════════════════════════════════════════════════════════ * Responsive *═══════════════════════════════════════════════════════════*/ @media (max-width: 900px) { .battle-controls .movebutton { width: 150px; height: 44px; } .battle-controls .switchmenu button { width: 104px; } } @media (max-width: 480px) { .battle-log .movecontrols, .battle-log .switchcontrols { max-width: 100%; } .battle-log .movemenu, .battle-log .switchmenu { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding-left: 0; margin-right: 0; } .battle-log .movemenu .movebutton { float: none; margin: 0; width: calc(50% - 4px); height: 48px; } .battle-log .switchmenu button { float: none; margin: 0; width: calc(33.333% - 4px); } :is(html.dark, body.dark, body) .roomlist .blocklink { padding: 12px 14px; } } @media (max-width: 360px) { :is(html.dark, body.dark, body) .mainmenu.button { padding: 9px 7px; } :is(html.dark, body.dark, body) .mini-window { width: auto; max-width: 312px; } } /*═══════════════════════════════════════════════════════════ * Move buttons — per-type chips (glass + type-hued bottom edge) * sim-types.css loads after this file; :is() pattern outranks it. *═══════════════════════════════════════════════════════════*/ :is(html.dark, body.dark, body) .movemenu button.type-Normal { background: var(--g1); border: 1px solid var(--edge); border-bottom: 2px solid hsla(60,12%,50%,.55); box-shadow: var(--spec); color: var(--ink); } html.dark .movemenu button.type-Normal small, body.dark .movemenu button.type-Normal small { color: hsl(60,8%,68%); } html:not(.dark) body:not(.dark) .movemenu button.type-Normal small { color: hsl(60,22%,32%); } :is(html.dark, body.dark, body) .movemenu button.type-Normal:hover { background: var(--g2); border-color: var(--edge-2); border-bottom-color: hsla(60,12%,52%,.85); } :is(html.dark, body.dark, body) .movemenu button.type-Normal:active, :is(html.dark, body.dark, body) .movemenu button.type-Normal.pressed { background: var(--g3); } :is(html.dark, body.dark, body) .movemenu button.type-Fighting { background: var(--g1); border: 1px solid var(--edge); border-bottom: 2px solid hsla(3,55%,50%,.55); box-shadow: var(--spec); color: var(--ink); } html.dark .movemenu button.type-Fighting small, body.dark .movemenu button.type-Fighting small { color: hsl(3,39%,68%); } html:not(.dark) body:not(.dark) .movemenu button.type-Fighting small { color: hsl(3,65%,32%); } :is(html.dark, body.dark, body) .movemenu button.type-Fighting:hover { background: var(--g2); border-color: var(--edge-2); border-bottom-color: hsla(3,55%,52%,.85); } :is(html.dark, body.dark, body) .movemenu button.type-Fighting:active, :is(html.dark, body.dark, body) .movemenu button.type-Fighting.pressed { background: var(--g3); } :is(html.dark, body.dark, body) .movemenu button.type-Flying { background: var(--g1); border: 1px solid var(--edge); border-bottom: 2px solid hsla(214,45%,50%,.55); box-shadow: var(--spec); color: var(--ink); } html.dark .movemenu button.type-Flying small, body.dark .movemenu button.type-Flying small { color: hsl(214,31%,68%); } html:not(.dark) body:not(.dark) .movemenu button.type-Flying small { color: hsl(214,55%,32%); } :is(html.dark, body.dark, body) .movemenu button.type-Flying:hover { background: var(--g2); border-color: var(--edge-2); border-bottom-color: hsla(214,45%,52%,.85); } :is(html.dark, body.dark, body) .movemenu button.type-Flying:active, :is(html.dark, body.dark, body) .movemenu button.type-Flying.pressed { background: var(--g3); } :is(html.dark, body.dark, body) .movemenu button.type-Poison { background: var(--g1); border: 1px solid var(--edge); border-bottom: 2px solid hsla(295,45%,50%,.55); box-shadow: var(--spec); color: var(--ink); } html.dark .movemenu button.type-Poison small, body.dark .movemenu button.type-Poison small { color: hsl(295,31%,68%); } html:not(.dark) body:not(.dark) .movemenu button.type-Poison small { color: hsl(295,55%,32%); } :is(html.dark, body.dark, body) .movemenu button.type-Poison:hover { background: var(--g2); border-color: var(--edge-2); border-bottom-color: hsla(295,45%,52%,.85); } :is(html.dark, body.dark, body) .movemenu button.type-Poison:active, :is(html.dark, body.dark, body) .movemenu button.type-Poison.pressed { background: var(--g3); } :is(html.dark, body.dark, body) .movemenu button.type-Ground { background: var(--g1); border: 1px solid var(--edge); border-bottom: 2px solid hsla(34,45%,50%,.55); box-shadow: var(--spec); color: var(--ink); } html.dark .movemenu button.type-Ground small, body.dark .movemenu button.type-Ground small { color: hsl(34,31%,68%); } html:not(.dark) body:not(.dark) .movemenu button.type-Ground small { color: hsl(34,55%,32%); } :is(html.dark, body.dark, body) .movemenu button.type-Ground:hover { background: var(--g2); border-color: var(--edge-2); border-bottom-color: hsla(34,45%,52%,.85); } :is(html.dark, body.dark, body) .movemenu button.type-Ground:active, :is(html.dark, body.dark, body) .movemenu button.type-Ground.pressed { background: var(--g3); } :is(html.dark, body.dark, body) .movemenu button.type-Rock { background: var(--g1); border: 1px solid var(--edge); border-bottom: 2px solid hsla(45,38%,50%,.55); box-shadow: var(--spec); color: var(--ink); } html.dark .movemenu button.type-Rock small, body.dark .movemenu button.type-Rock small { color: hsl(45,27%,68%); } html:not(.dark) body:not(.dark) .movemenu button.type-Rock small { color: hsl(45,48%,32%); } :is(html.dark, body.dark, body) .movemenu button.type-Rock:hover { background: var(--g2); border-color: var(--edge-2); border-bottom-color: hsla(45,38%,52%,.85); } :is(html.dark, body.dark, body) .movemenu button.type-Rock:active, :is(html.dark, body.dark, body) .movemenu button.type-Rock.pressed { background: var(--g3); } :is(html.dark, body.dark, body) .movemenu button.type-Bug { background: var(--g1); border: 1px solid var(--edge); border-bottom: 2px solid hsla(80,45%,50%,.55); box-shadow: var(--spec); color: var(--ink); } html.dark .movemenu button.type-Bug small, body.dark .movemenu button.type-Bug small { color: hsl(80,31%,68%); } html:not(.dark) body:not(.dark) .movemenu button.type-Bug small { color: hsl(80,55%,32%); } :is(html.dark, body.dark, body) .movemenu button.type-Bug:hover { background: var(--g2); border-color: var(--edge-2); border-bottom-color: hsla(80,45%,52%,.85); } :is(html.dark, body.dark, body) .movemenu button.type-Bug:active, :is(html.dark, body.dark, body) .movemenu button.type-Bug.pressed { background: var(--g3); } :is(html.dark, body.dark, body) .movemenu button.type-Ghost { background: var(--g1); border: 1px solid var(--edge); border-bottom: 2px solid hsla(265,40%,50%,.55); box-shadow: var(--spec); color: var(--ink); } html.dark .movemenu button.type-Ghost small, body.dark .movemenu button.type-Ghost small { color: hsl(265,28%,68%); } html:not(.dark) body:not(.dark) .movemenu button.type-Ghost small { color: hsl(265,50%,32%); } :is(html.dark, body.dark, body) .movemenu button.type-Ghost:hover { background: var(--g2); border-color: var(--edge-2); border-bottom-color: hsla(265,40%,52%,.85); } :is(html.dark, body.dark, body) .movemenu button.type-Ghost:active, :is(html.dark, body.dark, body) .movemenu button.type-Ghost.pressed { background: var(--g3); } :is(html.dark, body.dark, body) .movemenu button.type-Steel { background: var(--g1); border: 1px solid var(--edge); border-bottom: 2px solid hsla(220,22%,50%,.55); box-shadow: var(--spec); color: var(--ink); } html.dark .movemenu button.type-Steel small, body.dark .movemenu button.type-Steel small { color: hsl(220,15%,68%); } html:not(.dark) body:not(.dark) .movemenu button.type-Steel small { color: hsl(220,32%,32%); } :is(html.dark, body.dark, body) .movemenu button.type-Steel:hover { background: var(--g2); border-color: var(--edge-2); border-bottom-color: hsla(220,22%,52%,.85); } :is(html.dark, body.dark, body) .movemenu button.type-Steel:active, :is(html.dark, body.dark, body) .movemenu button.type-Steel.pressed { background: var(--g3); } :is(html.dark, body.dark, body) .movemenu button.type-Fire { background: var(--g1); border: 1px solid var(--edge); border-bottom: 2px solid hsla(20,70%,50%,.55); box-shadow: var(--spec); color: var(--ink); } html.dark .movemenu button.type-Fire small, body.dark .movemenu button.type-Fire small { color: hsl(20,49%,68%); } html:not(.dark) body:not(.dark) .movemenu button.type-Fire small { color: hsl(20,80%,32%); } :is(html.dark, body.dark, body) .movemenu button.type-Fire:hover { background: var(--g2); border-color: var(--edge-2); border-bottom-color: hsla(20,70%,52%,.85); } :is(html.dark, body.dark, body) .movemenu button.type-Fire:active, :is(html.dark, body.dark, body) .movemenu button.type-Fire.pressed { background: var(--g3); } :is(html.dark, body.dark, body) .movemenu button.type-Water { background: var(--g1); border: 1px solid var(--edge); border-bottom: 2px solid hsla(210,62%,50%,.55); box-shadow: var(--spec); color: var(--ink); } html.dark .movemenu button.type-Water small, body.dark .movemenu button.type-Water small { color: hsl(210,43%,68%); } html:not(.dark) body:not(.dark) .movemenu button.type-Water small { color: hsl(210,72%,32%); } :is(html.dark, body.dark, body) .movemenu button.type-Water:hover { background: var(--g2); border-color: var(--edge-2); border-bottom-color: hsla(210,62%,52%,.85); } :is(html.dark, body.dark, body) .movemenu button.type-Water:active, :is(html.dark, body.dark, body) .movemenu button.type-Water.pressed { background: var(--g3); } :is(html.dark, body.dark, body) .movemenu button.type-Grass { background: var(--g1); border: 1px solid var(--edge); border-bottom: 2px solid hsla(110,48%,50%,.55); box-shadow: var(--spec); color: var(--ink); } html.dark .movemenu button.type-Grass small, body.dark .movemenu button.type-Grass small { color: hsl(110,34%,68%); } html:not(.dark) body:not(.dark) .movemenu button.type-Grass small { color: hsl(110,58%,32%); } :is(html.dark, body.dark, body) .movemenu button.type-Grass:hover { background: var(--g2); border-color: var(--edge-2); border-bottom-color: hsla(110,48%,52%,.85); } :is(html.dark, body.dark, body) .movemenu button.type-Grass:active, :is(html.dark, body.dark, body) .movemenu button.type-Grass.pressed { background: var(--g3); } :is(html.dark, body.dark, body) .movemenu button.type-Electric { background: var(--g1); border: 1px solid var(--edge); border-bottom: 2px solid hsla(48,75%,50%,.55); box-shadow: var(--spec); color: var(--ink); } html.dark .movemenu button.type-Electric small, body.dark .movemenu button.type-Electric small { color: hsl(48,53%,68%); } html:not(.dark) body:not(.dark) .movemenu button.type-Electric small { color: hsl(48,80%,32%); } :is(html.dark, body.dark, body) .movemenu button.type-Electric:hover { background: var(--g2); border-color: var(--edge-2); border-bottom-color: hsla(48,75%,52%,.85); } :is(html.dark, body.dark, body) .movemenu button.type-Electric:active, :is(html.dark, body.dark, body) .movemenu button.type-Electric.pressed { background: var(--g3); } :is(html.dark, body.dark, body) .movemenu button.type-Psychic { background: var(--g1); border: 1px solid var(--edge); border-bottom: 2px solid hsla(338,58%,50%,.55); box-shadow: var(--spec); color: var(--ink); } html.dark .movemenu button.type-Psychic small, body.dark .movemenu button.type-Psychic small { color: hsl(338,41%,68%); } html:not(.dark) body:not(.dark) .movemenu button.type-Psychic small { color: hsl(338,68%,32%); } :is(html.dark, body.dark, body) .movemenu button.type-Psychic:hover { background: var(--g2); border-color: var(--edge-2); border-bottom-color: hsla(338,58%,52%,.85); } :is(html.dark, body.dark, body) .movemenu button.type-Psychic:active, :is(html.dark, body.dark, body) .movemenu button.type-Psychic.pressed { background: var(--g3); } :is(html.dark, body.dark, body) .movemenu button.type-Ice { background: var(--g1); border: 1px solid var(--edge); border-bottom: 2px solid hsla(185,50%,50%,.55); box-shadow: var(--spec); color: var(--ink); } html.dark .movemenu button.type-Ice small, body.dark .movemenu button.type-Ice small { color: hsl(185,35%,68%); } html:not(.dark) body:not(.dark) .movemenu button.type-Ice small { color: hsl(185,60%,32%); } :is(html.dark, body.dark, body) .movemenu button.type-Ice:hover { background: var(--g2); border-color: var(--edge-2); border-bottom-color: hsla(185,50%,52%,.85); } :is(html.dark, body.dark, body) .movemenu button.type-Ice:active, :is(html.dark, body.dark, body) .movemenu button.type-Ice.pressed { background: var(--g3); } :is(html.dark, body.dark, body) .movemenu button.type-Dragon { background: var(--g1); border: 1px solid var(--edge); border-bottom: 2px solid hsla(255,58%,50%,.55); box-shadow: var(--spec); color: var(--ink); } html.dark .movemenu button.type-Dragon small, body.dark .movemenu button.type-Dragon small { color: hsl(255,41%,68%); } html:not(.dark) body:not(.dark) .movemenu button.type-Dragon small { color: hsl(255,68%,32%); } :is(html.dark, body.dark, body) .movemenu button.type-Dragon:hover { background: var(--g2); border-color: var(--edge-2); border-bottom-color: hsla(255,58%,52%,.85); } :is(html.dark, body.dark, body) .movemenu button.type-Dragon:active, :is(html.dark, body.dark, body) .movemenu button.type-Dragon.pressed { background: var(--g3); } :is(html.dark, body.dark, body) .movemenu button.type-Dark { background: var(--g1); border: 1px solid var(--edge); border-bottom: 2px solid hsla(265,16%,50%,.55); box-shadow: var(--spec); color: var(--ink); } html.dark .movemenu button.type-Dark small, body.dark .movemenu button.type-Dark small { color: hsl(265,11%,68%); } html:not(.dark) body:not(.dark) .movemenu button.type-Dark small { color: hsl(265,26%,32%); } :is(html.dark, body.dark, body) .movemenu button.type-Dark:hover { background: var(--g2); border-color: var(--edge-2); border-bottom-color: hsla(265,16%,52%,.85); } :is(html.dark, body.dark, body) .movemenu button.type-Dark:active, :is(html.dark, body.dark, body) .movemenu button.type-Dark.pressed { background: var(--g3); } :is(html.dark, body.dark, body) .movemenu button.type-Fairy { background: var(--g1); border: 1px solid var(--edge); border-bottom: 2px solid hsla(320,55%,50%,.55); box-shadow: var(--spec); color: var(--ink); } html.dark .movemenu button.type-Fairy small, body.dark .movemenu button.type-Fairy small { color: hsl(320,39%,68%); } html:not(.dark) body:not(.dark) .movemenu button.type-Fairy small { color: hsl(320,65%,32%); } :is(html.dark, body.dark, body) .movemenu button.type-Fairy:hover { background: var(--g2); border-color: var(--edge-2); border-bottom-color: hsla(320,55%,52%,.85); } :is(html.dark, body.dark, body) .movemenu button.type-Fairy:active, :is(html.dark, body.dark, body) .movemenu button.type-Fairy.pressed { background: var(--g3); } :is(html.dark, body.dark, body) .movemenu button.type-Stellar { background: var(--g1); border: 1px solid var(--edge-2); box-shadow: var(--spec); color: var(--ink); border-bottom: 2px solid var(--edge-3); } :is(html.dark, body.dark, body) .movemenu button.type-Stellar small { color: var(--ink-soft); } :is(html.dark, body.dark, body) .movemenu button.type-Stellar:hover { background: var(--g2); } /* desktop vertical mode: breathing room between floating column and mini dock */ @media (min-width: 701px) { :is(html.dark, body.dark, body) .mini-header { margin-left: 12px; } } /*═══════════════════════════════════════════════════════════ * Sweep residuals *═══════════════════════════════════════════════════════════*/ /* teambuilder set-editor tab strip (.team-focus-editor .tabbar — not the dock) */ :is(html.dark, body.dark, body) .team-focus-editor .tabbar .button { background: var(--g1); border: 1px solid var(--edge); border-radius: var(--r-md) var(--r-md) 0 0; color: var(--ink-mute); box-shadow: none; text-shadow: none; font-weight: 600; } :is(html.dark, body.dark, body) .team-focus-editor .tabbar .button:hover { background: var(--g2); color: var(--ink); box-shadow: none; } :is(html.dark, body.dark, body) .team-focus-editor .tabbar .button.cur, :is(html.dark, body.dark, body) .team-focus-editor .tabbar .button.cur:hover { background: var(--g3); color: var(--ink); border-color: var(--edge-2); box-shadow: var(--spec); } /* watch-battles list rows */ :is(html.dark, body.dark, body) .blocklink .p1, :is(html.dark, body.dark, body) .blocklink .p2 { color: var(--ink); font-style: normal; font-weight: 600; } :is(html.dark, body.dark, body) .blocklink .vs { color: var(--ink-mute); } /* battle log "Battle options" toolbar + .battle-options strip */ :is(html.dark, body.dark, body) .battle-options { padding: 2px 4px; } /* PSDropdowns sitting in teambuilder stat/details forms */ :is(html.dark, body.dark, body) :is(.statform, .detailsform) .select.psdropdown { min-height: 28px; padding: 4px 26px 4px 11px; } /* resources / page panels typography */ :is(html.dark, body.dark, body) .page-html-container { color: var(--ink); } :is(html.dark, body.dark, body) :is(.pad h1, .pad h2) { color: var(--ink); } /* construction banner (server notices) — keep readable, de-saturate */ :is(html.dark, body.dark, body) .construction { background: var(--g2); background-image: none; border: 1px dashed var(--edge-3); border-radius: var(--r-md); color: var(--ink); font-weight: 600; } /* megaevo rainbow checked state: keep functional indicator, glassify frame */ :is(html.dark, body.dark, body) .megaevo:has(:checked) { text-shadow: none; color: var(--ink-inv); } /* userbar username chip */ :is(html.dark, body.dark, body) .userbar .username { padding: 3px 8px; border-radius: var(--r-md); } :is(html.dark, body.dark, body) .userbar .username:hover { background: var(--g2); } /* room search row in rooms panel */ :is(html.dark, body.dark, body) .roomcounters .button strong { font-weight: 800; }