:root {
  --ink: #101525;
  --ink-2: #20283a;
  --muted: #626b7f;
  --muted-2: #8c94a5;
  --canvas: #f6f8fc;
  --surface: #ffffff;
  --line: #e4e8f0;
  --line-strong: #d4d9e4;
  --violet: #6758f5;
  --violet-dark: #5143dc;
  --violet-soft: #eeecff;
  --cyan: #00a8e8;
  --cyan-soft: #e7f8ff;
  --lime: #b7e533;
  --lime-soft: #f2f9d9;
  --coral: #ff5968;
  --navy: #111827;
  --success: #159a69;
  --warning: #d97706;
  --danger: #df3545;
  --shadow-sm: 0 1px 2px rgba(16, 21, 37, .04), 0 7px 24px rgba(16, 21, 37, .05);
  --shadow-md: 0 18px 55px rgba(25, 32, 53, .1);
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --wrap: 1180px;
  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Static theme classes keep game identity consistent without server-rendered style attributes. */
.game-theme-valorant { --game-accent: #ff4655; }
.game-theme-counter-strike-2 { --game-accent: #f39c12; }
.game-theme-league-of-legends { --game-accent: #0a96aa; }
.game-theme-dota-2 { --game-accent: #d33c2d; }
.game-theme-fortnite { --game-accent: #6b5cff; }
.game-theme-apex-legends { --game-accent: #e34d40; }
.game-theme-rocket-league { --game-accent: #168be8; }
.game-theme-rainbow-six-siege { --game-accent: #1c2533; }
.game-theme-overwatch-2 { --game-accent: #f06414; }
.game-theme-pubg { --game-accent: #f2a900; }
.game-theme-the-finals { --game-accent: #f2d400; }
.game-theme-tekken-8 { --game-accent: #e83e8c; }
.game-theme-mortal-kombat-1 { --game-accent: #cf9f35; }
.game-theme-call-of-duty-warzone { --game-accent: #2f7d62; }
.game-theme-marvel-rivals { --game-accent: #e53f48; }
.game-theme-2xko { --game-accent: #ff4f78; }
.game-theme-street-fighter-6 { --game-accent: #e94d24; }
.game-theme-starcraft-2 { --game-accent: #1687d9; }
.game-theme-destiny-2-pvp { --game-accent: #5174a6; }
.game-theme-halo-infinite { --game-accent: #17815f; }
.game-theme-mobile-legends { --game-accent: #2576d8; }
.game-theme-brawl-stars { --game-accent: #f2b705; }
.game-theme-clash-royale { --game-accent: #3b87dc; }
.game-theme-ea-sports-fc { --game-accent: #32b77a; }
.game-theme-nba-2k { --game-accent: #e64235; }
.game-theme-smite-2 { --game-accent: #d6a83c; }
.game-theme-guilty-gear-strive { --game-accent: #d44838; }
.game-theme-world-of-warcraft-arena { --game-accent: #b27b34; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: var(--font); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
body:has(.menu-button[aria-expanded="true"]) { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { color: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.035em; line-height: 1.08; }
h1 { font-size: clamp(2.75rem, 6vw, 5.75rem); }
h2 { font-size: clamp(2rem, 3.5vw, 3.35rem); }
h3 { font-size: 1.2rem; }
p { color: var(--muted); }
strong, b { font-weight: 750; }
::selection { color: var(--ink); background: #dcd7ff; }

.wrap { width: min(calc(100% - 40px), var(--wrap)); margin-inline: auto; }
.narrow { width: min(calc(100% - 40px), 880px); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 1000; left: 18px; top: 12px; padding: 10px 16px; color: #fff; background: var(--ink); border-radius: 8px; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

.site-header { position: sticky; z-index: 100; top: 0; border-bottom: 1px solid rgba(228, 232, 240, .9); background: rgba(255, 255, 255, .9); backdrop-filter: blur(18px); }
.header-inner { display: flex; align-items: center; min-height: 74px; gap: 28px; }
.brand { display: inline-flex; flex: 0 0 auto; }
.brand img { width: 142px; height: 36px; }
.desktop-nav { display: flex; align-self: stretch; align-items: center; gap: 4px; }
.desktop-nav a { display: flex; align-items: center; height: 100%; padding: 0 12px; color: #434b5e; font-size: .91rem; font-weight: 650; position: relative; }
.desktop-nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--violet); transform: scaleX(0); transition: transform .2s ease; }
.desktop-nav a:hover, .desktop-nav a[aria-current="page"] { color: var(--ink); }
.desktop-nav a:hover::after, .desktop-nav a[aria-current="page"]::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.search-trigger { display: flex; align-items: center; gap: 8px; min-width: 180px; height: 42px; padding: 0 11px; color: var(--muted); border: 1px solid var(--line); background: #f7f8fb; border-radius: 11px; font-size: .86rem; }
.search-trigger svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.search-trigger kbd { margin-left: auto; padding: 1px 7px; border: 1px solid var(--line-strong); border-radius: 5px; background: #fff; font: 600 .75rem var(--font); }
.live-pill { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; color: #fff; background: var(--ink); border-radius: 11px; font-size: .84rem; font-weight: 700; }
.live-pill span, .pulse-dot, .status-live i { width: 8px; height: 8px; background: var(--coral); border-radius: 50%; box-shadow: 0 0 0 4px rgba(255, 89, 104, .14); }
.menu-button { display: none; width: 42px; height: 42px; padding: 11px; border: 1px solid var(--line); background: #fff; border-radius: 10px; cursor: pointer; }
.menu-button i { display: block; height: 2px; margin: 4px 0; background: var(--ink); border-radius: 2px; transition: .2s ease; }
.menu-button[aria-expanded="true"] i:nth-of-type(1) { transform: translateY(6px) rotate(45deg); }
.menu-button[aria-expanded="true"] i:nth-of-type(2) { opacity: 0; }
.menu-button[aria-expanded="true"] i:nth-of-type(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile-nav { position: fixed; z-index: 90; inset: 74px 0 0; padding: 24px 0; background: rgba(246, 248, 252, .98); overflow-y: auto; }
.mobile-nav .wrap { display: grid; }
.mobile-nav a { display: flex; justify-content: space-between; align-items: center; padding: 15px 4px; border-bottom: 1px solid var(--line); font-size: 1.25rem; font-weight: 750; }
.breadcrumbs { padding-block: 16px; }
.breadcrumbs ol { display: flex; align-items: center; gap: 9px; list-style: none; margin: 0; padding: 0; color: var(--muted); font-size: .78rem; }
.breadcrumbs li { display: flex; min-width: 0; align-items: center; gap: 9px; }
.breadcrumbs li:not(:last-child)::after { content: "/"; color: var(--line-strong); }
.breadcrumbs a:hover { color: var(--violet); }
.breadcrumbs span { overflow: hidden; max-width: 330px; text-overflow: ellipsis; white-space: nowrap; }

.button { display: inline-flex; justify-content: center; align-items: center; gap: 14px; min-height: 50px; padding: 0 20px; border: 1px solid transparent; border-radius: 12px; font-size: .93rem; font-weight: 750; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #fff; background: var(--violet); box-shadow: 0 10px 25px rgba(103, 88, 245, .2); }
.button-primary:hover { background: var(--violet-dark); box-shadow: 0 13px 30px rgba(103, 88, 245, .28); }
.button-ghost { border-color: var(--line-strong); background: #fff; }
.button-ghost:hover { border-color: #b9b1ff; color: var(--violet-dark); }
.button-dark { color: #fff; background: var(--ink); }
.button-light { color: var(--ink); background: #fff; }
.full-button { width: 100%; }
.text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 750; white-space: nowrap; }
.text-link span { color: var(--violet); transition: transform .18s ease; }
.text-link:hover span { transform: translateX(4px); }
.eyebrow, .section-kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; color: var(--violet-dark); font-size: .73rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.section-kicker { margin-bottom: 13px; }

.hero { position: relative; overflow: hidden; background: #fff; }
.home-hero { min-height: 690px; padding: 80px 0 72px; }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(390px, .75fr); align-items: center; gap: 80px; }
.hero-copy h1 { max-width: 720px; margin-bottom: 24px; font-size: clamp(3.7rem, 7.1vw, 6.65rem); letter-spacing: -.065em; line-height: .93; }
.hero-copy h1 em, .page-hero h1 em { color: var(--violet); font-style: normal; }
.hero-copy > p { max-width: 650px; margin-bottom: 30px; font-size: 1.18rem; line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.trust-row { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 34px; color: var(--muted); font-size: .78rem; font-weight: 600; }
.trust-row span { display: inline-flex; align-items: center; gap: 7px; }
.trust-row i { display: inline-grid; width: 17px; height: 17px; place-items: center; color: var(--success); background: #e5f7f0; border-radius: 50%; font-style: normal; font-size: .66rem; }
.hero-panel { overflow: hidden; border: 1px solid var(--line); background: rgba(255, 255, 255, .92); border-radius: 22px; box-shadow: var(--shadow-md); transform: rotate(1deg); }
.hero-panel-top, .hero-panel-foot { display: flex; justify-content: space-between; align-items: center; padding: 17px 20px; }
.hero-panel-top { border-bottom: 1px solid var(--line); }
.hero-panel-top span { font-weight: 780; }
.hero-panel-top a { color: var(--violet); font-size: .78rem; font-weight: 750; }
.hero-panel-foot { color: var(--muted); background: #fafbfe; font-size: .7rem; }
.pulse-match { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 12px; padding: 20px; border-bottom: 1px solid var(--line); transition: background .18s ease; }
.pulse-match:hover { background: var(--violet-soft); }
.pulse-game { font-size: .64rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.pulse-match div { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; text-align: center; }
.pulse-match div strong { overflow: hidden; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.pulse-match div b { color: var(--muted-2); font-size: .65rem; text-transform: uppercase; }
.pulse-match em, .pulse-match time { color: var(--muted); font-size: .7rem; font-style: normal; white-space: nowrap; }
.status-live { display: inline-flex !important; align-items: center; gap: 7px; color: var(--danger) !important; font-weight: 800; text-transform: uppercase; }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(3px); pointer-events: none; }
.hero-orb-one { width: 480px; height: 480px; right: -180px; top: -170px; background: radial-gradient(circle at 35% 35%, rgba(0, 168, 232, .2), rgba(103, 88, 245, .05) 55%, transparent 72%); }
.hero-orb-two { width: 310px; height: 310px; left: 42%; bottom: -210px; background: radial-gradient(circle, rgba(183, 229, 51, .22), transparent 68%); }

.signal-strip { border-block: 1px solid var(--line); background: #fff; }
.signal-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.signal-grid div { display: flex; flex-direction: column; padding: 24px 28px; border-right: 1px solid var(--line); }
.signal-grid div:first-child { padding-left: 0; }
.signal-grid div:last-child { border-right: 0; }
.signal-grid strong { font-size: 1.5rem; letter-spacing: -.04em; }
.signal-grid span { color: var(--muted); font-size: .75rem; }

.section { padding-block: 92px; }
.section-tint { background: #eef1f7; }
.section-heading { max-width: 760px; margin-bottom: 38px; }
.section-heading h2 { margin-bottom: 14px; }
.section-heading p { max-width: 680px; margin: 0; }
.split-heading { display: flex; justify-content: space-between; align-items: flex-end; max-width: none; gap: 30px; }
.split-heading > div { max-width: 760px; }
.centered-heading { margin-inline: auto; text-align: center; }

.data-notice { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; margin: -12px 0 28px; padding: 13px 16px; border: 1px solid #d9d4ff; background: var(--violet-soft); border-radius: 12px; }
.data-notice span { color: var(--violet-dark); font-size: .67rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.data-notice p { margin: 0; color: #4f5367; font-size: .8rem; }
.data-notice a { color: var(--violet-dark); font-size: .75rem; font-weight: 750; white-space: nowrap; }
.data-notice.prominent { margin-top: 0; }

.match-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.match-grid-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.match-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--line); background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.match-card:hover { transform: translateY(-3px); border-color: #cec8ff; box-shadow: var(--shadow-md); }
.match-card-top { display: flex; justify-content: space-between; align-items: center; min-height: 42px; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .67rem; }
.game-tag { color: var(--ink); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.status-finished { font-weight: 750; text-transform: uppercase; }
.match-card-body { display: grid; gap: 10px; padding: 18px 14px; }
.match-team { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; min-width: 0; }
.team-mark { display: grid; width: 40px; height: 40px; place-items: center; overflow: hidden; border: 1px solid var(--line); background: #f7f8fb; border-radius: 11px; }
.team-mark img { width: 32px; height: 32px; object-fit: contain; }
.team-mark b { font-size: .68rem; }
.match-team strong { overflow: hidden; font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.match-team em { font-size: 1.1rem; font-style: normal; font-weight: 800; }
.match-card-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: auto; padding: 12px 14px; border-top: 1px solid var(--line); color: var(--muted); background: #fafbfc; font-size: .67rem; }
.match-card-foot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-card-foot a { color: var(--violet-dark); font-weight: 750; white-space: nowrap; }
.empty-panel { display: flex; align-items: center; gap: 20px; padding: 28px; border: 1px dashed var(--line-strong); background: #fff; border-radius: var(--radius); }
.empty-panel > div { flex: 1; }
.empty-panel h2, .empty-panel h3, .empty-panel strong { margin-bottom: 6px; }
.empty-panel p { margin: 0; font-size: .9rem; }
.empty-panel.compact { padding: 20px; }
.empty-icon { display: grid; width: 48px; height: 48px; flex: 0 0 auto; place-items: center; color: var(--violet); background: var(--violet-soft); border-radius: 14px; font-size: 1.4rem; }
.light-empty { border-color: #3b455b; background: #20283a; }
.light-empty strong { color: #fff; }
.light-empty p { color: #aab2c2; }

.game-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.game-grid-page { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.game-card { overflow: hidden; border: 1px solid var(--line); background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform .22s ease, box-shadow .22s ease; }
.game-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.game-card a { display: flex; height: 100%; flex-direction: column; }
.game-art { position: relative; display: grid; height: 155px; place-items: center; overflow: hidden; color: #fff; background: var(--game-accent); background: linear-gradient(135deg, color-mix(in srgb, var(--game-accent) 85%, #171b2a), color-mix(in srgb, var(--game-accent) 48%, #fff)); }
.game-art::before, .game-art::after { content: ""; position: absolute; width: 120px; height: 190%; border: 1px solid rgba(255, 255, 255, .25); transform: rotate(35deg); }
.game-art::before { left: -55px; }
.game-art::after { right: -60px; }
.game-art span { position: relative; z-index: 2; font-size: 2.8rem; font-weight: 900; letter-spacing: -.1em; text-transform: uppercase; text-shadow: 0 8px 30px rgba(0,0,0,.22); }
.game-art i { position: absolute; width: 80px; height: 80px; border: 16px solid rgba(255,255,255,.12); border-radius: 50%; }
.game-card-copy { display: flex; flex: 1; flex-direction: column; padding: 18px; }
.game-card-copy > span { color: var(--game-accent); font-size: .65rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.game-card-copy h3 { margin: 5px 0 10px; font-size: 1.15rem; }
.game-card-copy p { margin-bottom: 18px; font-size: .78rem; line-height: 1.55; }
.game-card-copy strong { margin-top: auto; font-size: .75rem; }
.game-card-copy strong b { margin-left: 5px; color: var(--game-accent); }

.action-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.action-card { position: relative; display: flex; min-height: 320px; flex-direction: column; padding: 28px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); transition: transform .22s ease; }
.action-card:hover { transform: translateY(-5px); }
.action-card::after { content: ""; position: absolute; width: 160px; height: 160px; right: -70px; top: -70px; border: 28px solid rgba(255,255,255,.35); border-radius: 50%; }
.action-purple { background: #e9e6ff; }
.action-cyan { background: #dff6ff; }
.action-lime { background: #edf7cf; }
.action-icon { display: grid; width: 52px; height: 52px; place-items: center; margin-bottom: 46px; color: #fff; background: var(--ink); border-radius: 15px; font-size: 1.35rem; }
.action-card small { color: var(--muted); font-size: .65rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.action-card h3 { margin: 8px 0 10px; font-size: 1.45rem; }
.action-card p { font-size: .85rem; }
.action-card strong { margin-top: auto; font-size: .8rem; }

.event-section { color: #fff; background: var(--ink); }
.event-layout { display: grid; grid-template-columns: .72fr 1.28fr; align-items: start; gap: 72px; }
.event-intro { position: sticky; top: 112px; }
.event-intro h2 { color: #fff; }
.event-intro p { color: #aab2c2; }
.event-intro .section-kicker { color: var(--lime); }
.event-list { display: grid; gap: 10px; }
.event-card { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 16px; min-width: 0; padding: 16px; color: var(--ink); background: #fff; border-radius: 15px; }
.event-logo { display: grid; width: 72px; height: 72px; place-items: center; overflow: hidden; border: 1px solid var(--line); background: #f7f8fc; border-radius: 13px; }
.event-logo img { width: 56px; height: 56px; object-fit: contain; }
.event-logo img.event-game-art { width: 100%; height: 100%; object-fit: cover; }
.event-logo span { font-weight: 850; }
.event-copy { min-width: 0; }
.event-meta { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: .62rem; font-weight: 750; text-transform: uppercase; }
.event-copy h3 { overflow: hidden; margin: 5px 0 2px; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.event-copy h3 a:hover { color: var(--violet); }
.event-copy p { overflow: hidden; margin: 0; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.status-live, .event-meta .status-live { color: var(--danger); }
.status-upcoming { color: var(--violet-dark); }
.status-recent { color: var(--muted); }
.event-date { min-width: 58px; padding-left: 14px; border-left: 1px solid var(--line); text-align: center; }
.event-date time { display: flex; flex-direction: column; line-height: 1.05; }
.event-date b { color: var(--violet); font-size: .6rem; text-transform: uppercase; }
.event-date strong { margin: 4px 0; font-size: 1.45rem; }
.event-date span { color: var(--muted); font-size: .6rem; }
.event-list-page { max-width: 880px; margin-inline: auto; }
.event-list-page .event-card { border: 1px solid var(--line); box-shadow: var(--shadow-sm); }

.editorial-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.editorial-card { overflow: hidden; border: 1px solid var(--line); background: #fff; border-radius: var(--radius); }
.editorial-card a { display: grid; height: 100%; grid-template-columns: 150px 1fr; }
.editorial-visual { position: relative; display: grid; min-height: 210px; place-items: center; overflow: hidden; color: #fff; background: var(--ink); }
.editorial-visual::before { content: ""; position: absolute; width: 110px; height: 110px; border: 26px solid rgba(103,88,245,.45); border-radius: 50%; }
.editorial-visual span { position: relative; z-index: 2; font-size: 1.8rem; font-weight: 850; }
.editorial-copy { display: flex; flex-direction: column; padding: 24px; }
.editorial-copy small { color: var(--violet); font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.editorial-copy h3 { margin: 8px 0 10px; }
.editorial-copy p { font-size: .78rem; }
.editorial-copy strong { margin-top: auto; font-size: .75rem; }
.editorial-card:hover h3 { color: var(--violet-dark); }
.editorial-featured { grid-row: span 2; }
.editorial-featured a { grid-template-columns: 1fr; }
.editorial-featured .editorial-visual { min-height: 270px; }

.principles-section { padding: 86px 0; color: #fff; background: #151b2a; }
.principles-grid { display: grid; grid-template-columns: 1.25fr repeat(3, 1fr); gap: 30px; }
.principles-grid > div { padding-right: 20px; border-right: 1px solid #30384a; }
.principles-grid > div:last-child { border-right: 0; }
.principles-grid h2 { color: #fff; font-size: 2.4rem; }
.principles-grid .section-kicker { color: var(--lime); }
.principle b { display: block; margin-bottom: 40px; color: var(--lime); font-size: .7rem; }
.principle h3 { color: #fff; font-size: 1rem; }
.principle p { margin: 0; color: #aab2c2; font-size: .75rem; }

.page-hero { padding: 72px 0; border-bottom: 1px solid var(--line); background: #fff; }
.page-hero-grid { display: grid; grid-template-columns: 1fr 260px; align-items: end; gap: 70px; }
.page-hero h1 { margin-bottom: 20px; font-size: clamp(3.1rem, 6vw, 5.3rem); letter-spacing: -.065em; }
.page-hero p { max-width: 690px; margin: 0; font-size: 1.05rem; }
.hero-stat { display: flex; flex-direction: column; padding: 25px; border: 1px solid var(--line); background: var(--canvas); border-radius: var(--radius); }
.hero-stat > strong { font-size: 3.2rem; letter-spacing: -.08em; line-height: 1; }
.hero-stat > span { margin: 9px 0 20px; color: var(--ink-2); font-weight: 700; }
.hero-stat small { padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: .7rem; }
.filter-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 28px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.filter-group { display: flex; gap: 7px; }
.filter-group button, .stage-toolbar button, .export-tabs button { border: 1px solid var(--line); padding: 8px 13px; background: #fff; border-radius: 9px; cursor: pointer; font-size: .75rem; font-weight: 700; }
.filter-group button.is-active, .stage-toolbar button.is-active, .export-tabs button.is-active { color: #fff; border-color: var(--ink); background: var(--ink); }
.filter-group button i { display: inline-block; width: 7px; height: 7px; margin-right: 4px; background: var(--coral); border-radius: 50%; }
.filter-bar label { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: .75rem; font-weight: 650; }
.filter-bar select { min-width: 160px; padding: 8px 34px 8px 10px; border: 1px solid var(--line); background: #fff; border-radius: 9px; }
.filter-empty { padding: 40px; text-align: center; }
.prose-intro h2 { max-width: 700px; }
.three-copy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.three-copy p { margin: 0; font-size: .88rem; }
.three-copy strong { display: block; margin-bottom: 6px; color: var(--ink); }

.game-hero { padding: 54px 0; color: #fff; background: #151b2a; background: linear-gradient(120deg, color-mix(in srgb, var(--game-accent) 74%, #111827), #111827 72%); }
.game-hero-grid { display: grid; grid-template-columns: 210px 1fr 180px; align-items: center; gap: 46px; }
.game-monogram { position: relative; display: grid; width: 210px; aspect-ratio: 1; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.1); border-radius: 35px; }
.game-monogram::before { content: ""; position: absolute; width: 160%; height: 60px; background: rgba(255,255,255,.11); transform: rotate(-35deg); }
.game-monogram span { position: relative; z-index: 2; font-size: 5rem; font-weight: 900; letter-spacing: -.12em; text-transform: uppercase; }
.game-hero .eyebrow { color: #fff; opacity: .8; }
.game-hero h1 { margin: 0 0 13px; font-size: clamp(3.3rem, 7vw, 6.4rem); }
.game-hero p { max-width: 640px; color: rgba(255,255,255,.77); font-size: 1.05rem; }
.platform-row { display: flex; flex-wrap: wrap; gap: 7px; }
.platform-row span { padding: 5px 9px; border: 1px solid rgba(255,255,255,.24); border-radius: 7px; font-size: .66rem; }
.game-jump { display: grid; align-self: stretch; padding-left: 25px; border-left: 1px solid rgba(255,255,255,.2); }
.game-jump strong { margin-bottom: 6px; color: rgba(255,255,255,.55); font-size: .65rem; text-transform: uppercase; }
.game-jump a { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.14); font-size: .78rem; font-weight: 700; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: start; gap: 70px; }
.article-body { max-width: 760px; }
.article-body h2 { margin: 48px 0 17px; font-size: clamp(1.7rem, 3vw, 2.45rem); }
.article-body > section:first-child h2, .article-body > .section-kicker + h2 { margin-top: 0; }
.article-body p { font-size: 1rem; line-height: 1.82; }
.lead-copy { color: #41495c !important; font-size: 1.1rem !important; }
.article-aside { display: grid; gap: 14px; }
.sticky-aside { position: sticky; top: 108px; }
.aside-card { padding: 20px; border: 1px solid var(--line); background: #fff; border-radius: 14px; box-shadow: var(--shadow-sm); }
.aside-card > small { display: block; margin-bottom: 12px; color: var(--violet); font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.aside-card p { margin-bottom: 11px; font-size: .78rem; }
.aside-card a { color: var(--violet-dark); font-size: .75rem; font-weight: 750; }
.aside-card dl { margin: 0; }
.aside-card dl div { padding: 10px 0; border-top: 1px solid var(--line); }
.aside-card dt { color: var(--muted); font-size: .65rem; }
.aside-card dd { margin: 2px 0 0; font-size: .78rem; font-weight: 700; }
.keyword-card span { display: block; padding: 8px 0; border-top: 1px solid var(--line); font-size: .72rem; }
.watch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.watch-grid div { min-height: 160px; padding: 20px; border: 1px solid var(--line); background: #fff; border-radius: var(--radius); }
.watch-grid b { color: var(--violet); font-size: .72rem; }
.watch-grid p { margin: 36px 0 0; color: var(--ink); font-weight: 700; line-height: 1.45; }
.guide-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.guide-list a { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 20px; border: 1px solid var(--line); background: #fff; border-radius: 14px; }
.guide-list small { grid-column: 1 / -1; color: var(--violet); font-size: .63rem; font-weight: 800; text-transform: uppercase; }
.guide-list strong { margin-top: 5px; }
.guide-list span { color: var(--violet); font-size: .75rem; font-weight: 750; }
.guide-list-large a { grid-template-columns: 1fr auto; }
.guide-list-large p { grid-column: 1 / -1; margin: 7px 0 0; font-size: .75rem; }
.next-actions { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); align-items: stretch; gap: 14px; }
.next-actions > div { padding-right: 30px; }
.next-actions > a { display: flex; min-height: 150px; flex-direction: column; justify-content: flex-end; padding: 20px; border: 1px solid var(--line); background: #fff; border-radius: var(--radius); }
.next-actions > a > span { display: grid; width: 36px; height: 36px; place-items: center; margin-bottom: auto; color: var(--violet); background: var(--violet-soft); border-radius: 10px; }
.next-actions > a strong { margin-top: 20px; }
.next-actions > a small { color: var(--muted); }

.article-hero { padding: 72px 0; border-bottom: 1px solid var(--line); background: #fff; }
.article-hero h1 { margin-bottom: 24px; font-size: clamp(3rem, 6vw, 5.5rem); letter-spacing: -.065em; }
.article-hero p { max-width: 800px; font-size: 1.13rem; line-height: 1.7; }
.review-line { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 28px; color: var(--muted); font-size: .72rem; }
.review-line i { color: var(--line-strong); }
.review-line a { color: var(--violet-dark); font-weight: 700; }
.toc-card { display: grid; }
.toc-card a { display: grid; grid-template-columns: 23px 1fr; gap: 8px; padding: 9px 0; border-top: 1px solid var(--line); color: var(--ink); font-size: .7rem; line-height: 1.4; }
.toc-card a span { color: var(--violet); font-size: .6rem; }
.aside-game { display: flex; min-height: 140px; flex-direction: column; justify-content: flex-end; padding: 20px; color: #fff; background: #151b2a; background: linear-gradient(135deg, var(--game-accent), #111827); border-radius: 14px; }
.aside-game small { opacity: .72; }
.aside-game strong { font-size: 1.25rem; }
.aside-game span { margin-top: 12px; font-size: .7rem; font-weight: 700; }
.aside-link { padding: 16px; color: var(--violet-dark); border: 1px solid #d9d4ff; background: var(--violet-soft); border-radius: 12px; font-size: .75rem; font-weight: 750; }
.check-list { display: grid; gap: 10px; padding: 0; list-style: none; }
.check-list li { position: relative; padding: 12px 14px 12px 44px; border: 1px solid var(--line); background: #fff; border-radius: 11px; }
.check-list li::before { content: "✓"; position: absolute; left: 14px; top: 12px; display: grid; width: 20px; height: 20px; place-items: center; color: var(--success); background: #e6f7f0; border-radius: 6px; font-size: .7rem; font-weight: 900; }
.table-scroll { overflow-x: auto; margin: 24px 0; border: 1px solid var(--line); background: #fff; border-radius: 14px; }
table { width: 100%; border-collapse: collapse; font-size: .83rem; }
th, td { padding: 13px 15px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--ink); background: #f1f3f8; font-size: .7rem; text-transform: uppercase; }
tr:last-child td { border-bottom: 0; }
.faq-section { margin-top: 70px; }
.faq-section details { border-top: 1px solid var(--line); }
.faq-section details:last-child { border-bottom: 1px solid var(--line); }
.faq-section summary { display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; cursor: pointer; font-weight: 750; list-style: none; }
.faq-section summary::-webkit-details-marker { display: none; }
.faq-section summary span { color: var(--violet); }
.faq-section details[open] summary span { transform: rotate(45deg); }
.faq-section details p { padding-right: 30px; }
.faq-wide { max-width: 860px; }
.article-review-box { margin-top: 56px; padding: 22px; border-left: 4px solid var(--violet); background: var(--violet-soft); border-radius: 0 12px 12px 0; }
.article-review-box span { color: var(--violet-dark); font-size: .64rem; font-weight: 800; text-transform: uppercase; }
.article-review-box p { margin: 8px 0; font-size: .8rem; }
.article-review-box a { color: var(--violet-dark); font-size: .75rem; font-weight: 750; }

.tool-catalog { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.tool-catalog-card { display: grid; grid-template-columns: 90px 1fr; gap: 25px; padding: 30px; border: 1px solid var(--line); background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.tool-catalog-card:hover { border-color: #cfc9ff; box-shadow: var(--shadow-md); }
.tool-catalog-primary { background: linear-gradient(140deg, #fff, #f0edff); }
.tool-catalog-icon { display: grid; width: 90px; height: 90px; place-items: center; color: #fff; background: var(--ink); border-radius: 24px; font-size: 2rem; }
.tool-catalog-card span { color: var(--violet); font-size: .65rem; font-weight: 800; text-transform: uppercase; }
.tool-catalog-card h2 { margin: 8px 0 12px; font-size: 1.8rem; }
.tool-catalog-card p { font-size: .84rem; }
.tool-catalog-card ul { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; list-style: none; }
.tool-catalog-card li { padding: 5px 8px; background: var(--canvas); border-radius: 7px; font-size: .65rem; }
.tool-catalog-card strong { display: block; margin-top: 20px; font-size: .78rem; }
.tool-hero { padding: 60px 0 50px; color: #fff; background: linear-gradient(110deg, #171d2d 35%, #3e35a5 100%); }
.tool-hero h1 { margin-bottom: 14px; font-size: clamp(3.1rem, 6vw, 5.6rem); }
.tool-hero p { max-width: 760px; color: rgba(255,255,255,.72); font-size: 1.05rem; }
.tool-hero .eyebrow { color: var(--lime); }
.tool-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 24px; }
.tool-panel { padding: 26px; border: 1px solid var(--line); background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.tool-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.tool-panel-head span { color: var(--violet); font-size: .64rem; font-weight: 800; text-transform: uppercase; }
.tool-panel-head h2 { margin: 3px 0 0; font-size: 1.65rem; }
.reset-button { padding: 7px 10px; color: var(--muted); border: 1px solid var(--line); background: #fff; border-radius: 8px; cursor: pointer; font-size: .7rem; }
.tool-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.tool-form-grid label, .crosshair-controls > label, .range-control label { display: grid; gap: 7px; color: var(--ink-2); font-size: .72rem; font-weight: 700; }
.tool-form-grid input, .tool-form-grid select { width: 100%; height: 48px; padding: 0 12px; border: 1px solid var(--line-strong); background: #fff; border-radius: 10px; }
.tool-form-grid input:focus, .tool-form-grid select:focus { border-color: var(--violet); outline: 3px solid rgba(103,88,245,.12); }
.conversion-arrow { display: grid; width: 34px; height: 34px; place-items: center; margin: 18px auto; color: var(--violet); background: var(--violet-soft); border-radius: 50%; }
.result-panel { display: grid; grid-template-columns: 1fr auto; align-items: end; padding: 22px; color: #fff; background: var(--ink); border-radius: 17px; }
.result-panel span { grid-column: 1 / -1; color: #aab2c2; font-size: .7rem; }
.result-panel strong { font-size: 3rem; letter-spacing: -.07em; line-height: 1.15; }
.result-panel button { padding: 8px 12px; color: #fff; border: 1px solid #444d61; background: #252d3f; border-radius: 8px; cursor: pointer; font-size: .7rem; }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.metric-grid div { padding: 15px; border: 1px solid var(--line); background: var(--canvas); border-radius: 11px; }
.metric-grid span, .metric-grid small { display: block; color: var(--muted); font-size: .62rem; }
.metric-grid strong { display: block; margin: 3px 0; font-size: 1.1rem; }
.tool-message { margin: 14px 0 0; color: var(--muted); font-size: .72rem; }
.tool-sidebar { display: grid; gap: 14px; }

.crosshair-layout { display: grid; grid-template-columns: 1.4fr .6fr; gap: 22px; }
.crosshair-stage, .crosshair-controls { overflow: hidden; border: 1px solid var(--line); background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.stage-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.stage-toolbar > span { font-size: .75rem; font-weight: 750; }
.stage-toolbar div { display: flex; gap: 6px; }
.stage-toolbar button { padding: 6px 9px; font-size: .65rem; }
.preview-scene { position: relative; display: grid; min-height: 460px; place-items: center; overflow: hidden; background: linear-gradient(#bed7e7 0 43%, #9b9682 43% 100%); }
.preview-scene::before { content: ""; position: absolute; left: 7%; right: 7%; bottom: 10%; height: 58%; background: linear-gradient(90deg, #596477 0 12%, #858f9c 12% 30%, #4c5668 30% 34%, #9aa2ac 34% 76%, #586376 76%); clip-path: polygon(0 30%, 18% 0, 42% 25%, 65% 4%, 100% 30%, 100% 100%, 0 100%); opacity: .95; }
.preview-scene.scene-bright { background: linear-gradient(135deg, #fff 0 50%, #e7eef5 50%); }
.preview-scene.scene-dark { background: radial-gradient(circle at 70% 25%, #3d485b, #111827 65%); }
.scene-shape { position: absolute; z-index: 2; background: var(--coral); }
.scene-shape.one { width: 70px; height: 160px; left: 27%; bottom: 18%; border-radius: 35px 35px 8px 8px; opacity: .76; }
.scene-shape.two { width: 44px; height: 100px; right: 22%; bottom: 26%; background: var(--violet); border-radius: 22px 22px 5px 5px; }
.crosshair { --ch-color: #00f5d4; --ch-length: 6px; --ch-thick: 2px; --ch-gap: 4px; --ch-outline: 1px; position: relative; z-index: 5; width: 1px; height: 1px; filter: drop-shadow(0 0 var(--ch-outline) #000); }
.crosshair .line { position: absolute; display: block; background: var(--ch-color); }
.crosshair .top, .crosshair .bottom { width: var(--ch-thick); height: var(--ch-length); left: calc(var(--ch-thick) / -2); }
.crosshair .top { bottom: var(--ch-gap); }
.crosshair .bottom { top: var(--ch-gap); }
.crosshair .left, .crosshair .right { width: var(--ch-length); height: var(--ch-thick); top: calc(var(--ch-thick) / -2); }
.crosshair .left { right: var(--ch-gap); }
.crosshair .right { left: var(--ch-gap); }
.crosshair b { position: absolute; display: none; width: var(--ch-thick); height: var(--ch-thick); left: calc(var(--ch-thick) / -2); top: calc(var(--ch-thick) / -2); background: var(--ch-color); }
.crosshair.has-dot b { display: block; }
.crosshair.no-outline { filter: none; }
.crosshair-stage > p { margin: 0; padding: 11px 16px; color: var(--muted); font-size: .65rem; }
.crosshair-controls { padding: 22px; }
.crosshair-controls > label { grid-template-columns: 1fr auto; align-items: center; gap: 10px; margin: 17px 0; }
.range-control { display: grid; gap: 8px; margin: 17px 0; }
.range-control > div { display: flex; justify-content: space-between; align-items: center; }
.crosshair-controls input[type="range"] { width: 100%; accent-color: var(--violet); }
.crosshair-controls input[type="color"] { width: 44px; height: 32px; padding: 2px; border: 1px solid var(--line); background: #fff; border-radius: 7px; }
.crosshair-controls output { color: var(--violet); }
.switch-label input { position: absolute; opacity: 0; }
.switch-label i { position: relative; width: 38px; height: 22px; background: #ccd2dd; border-radius: 20px; }
.switch-label i::after { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .18s ease; }
.switch-label input:checked + i { background: var(--violet); }
.switch-label input:checked + i::after { transform: translateX(16px); }
.export-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 60px; align-items: center; }
.export-card { padding: 22px; border: 1px solid var(--line); background: #fff; border-radius: var(--radius); }
.export-tabs { display: flex; gap: 7px; margin-bottom: 13px; }
.export-card pre { min-height: 150px; margin: 0 0 14px; padding: 18px; overflow-x: auto; color: #dce3f0; background: #151b2a; border-radius: 12px; font: .76rem/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; }
.export-card > p { margin: 8px 0 0; font-size: .7rem; }

.glossary-tools { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.glossary-tools input { width: min(420px, 75vw); height: 46px; padding: 0 14px; border: 1px solid var(--line-strong); background: #fff; border-radius: 11px; }
.glossary-tools > span { color: var(--muted); font-size: .73rem; }
.glossary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.glossary-grid > a { display: grid; grid-template-columns: 58px 1fr; gap: 18px; padding: 20px; border: 1px solid var(--line); background: #fff; border-radius: 14px; }
.glossary-grid > a > span { display: grid; width: 58px; height: 58px; place-items: center; color: var(--violet); background: var(--violet-soft); border-radius: 13px; font-size: 1.45rem; font-weight: 850; }
.glossary-grid h2 { margin: 0 0 7px; font-size: 1.15rem; }
.glossary-grid p { margin: 0 0 11px; font-size: .76rem; }
.glossary-grid strong { color: var(--violet-dark); font-size: .7rem; }
.term-hero { padding: 62px 0 68px; border-bottom: 1px solid var(--line); background: #fff; }
.term-letter { display: grid; width: 68px; height: 68px; place-items: center; margin-bottom: 25px; color: var(--violet); background: var(--violet-soft); border-radius: 18px; font-size: 2rem !important; font-weight: 850; }
.term-hero h1 { font-size: clamp(2.8rem, 6vw, 5rem); }
.definition-lead { max-width: 760px; color: #41495c; font-size: 1.25rem; }
.usage-quote { margin: 32px 0; padding: 24px; border-left: 4px solid var(--lime); background: var(--lime-soft); border-radius: 0 13px 13px 0; }
.usage-quote span { color: #687d16; font-size: .65rem; font-weight: 800; text-transform: uppercase; }
.usage-quote blockquote { margin: 8px 0 0; font-size: 1.1rem; font-weight: 650; }
.related-terms { display: grid; }
.related-terms a, .related-terms > span { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--line); color: var(--ink); font-size: .74rem; }

.academy-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.academy-pillars div { min-height: 260px; padding: 28px; border: 1px solid var(--line); background: #fff; border-radius: var(--radius-lg); }
.academy-pillars b { color: var(--violet); font-size: .7rem; }
.academy-pillars h2 { margin: 90px 0 10px; font-size: 2rem; }
.academy-pillars p { margin: 0; font-size: .84rem; }
.rank-feature { display: grid; grid-template-columns: 290px 1fr; align-items: center; gap: 55px; padding: 40px; border: 1px solid var(--line); background: #fff; border-radius: var(--radius-lg); }
.rank-visual { position: relative; display: grid; aspect-ratio: 1; place-items: center; overflow: hidden; color: #fff; background: conic-gradient(from 160deg, #8f94a4, #6e8de7, #8c58d9, #e34b8c, #d54141, #d8ac39, #8f94a4); border-radius: 50%; }
.rank-visual::after { content: ""; position: absolute; inset: 35px; background: var(--ink); border-radius: 50%; }
.rank-visual span { position: relative; z-index: 2; font-size: 4rem; font-weight: 900; }
.rank-feature h2 { margin-bottom: 15px; }
.rank-feature p { max-width: 660px; }

.entity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.entity-card { display: grid; grid-template-columns: 72px 1fr; gap: 15px; padding: 18px; border: 1px solid var(--line); background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.entity-card:hover { border-color: #cec8ff; box-shadow: var(--shadow-md); }
.entity-image { display: grid; width: 72px; height: 72px; place-items: center; overflow: hidden; border: 1px solid var(--line); background: #f6f7fa; border-radius: 16px; }
.entity-image img { width: 84%; height: 84%; object-fit: contain; }
.entity-image b { font-size: 1.1rem; }
.entity-card small { color: var(--violet); font-size: .62rem; font-weight: 750; }
.entity-card h2 { overflow: hidden; margin: 4px 0; font-size: 1.05rem; text-overflow: ellipsis; white-space: nowrap; }
.entity-card p, .entity-card strong { margin: 0; font-size: .7rem; }
.entity-card strong { color: var(--violet-dark); }
.entity-hero { padding: 62px 0; color: #fff; background: #151b2a; }
.entity-hero-grid { display: grid; grid-template-columns: 144px 1fr; align-items: center; gap: 35px; }
.entity-image-large { width: 144px; height: 144px; border-color: #354057; background: #222b3e; border-radius: 28px; }
.entity-image-large b { font-size: 2rem; }
.entity-hero .eyebrow { color: var(--lime); }
.entity-hero h1 { margin: 0 0 8px; font-size: clamp(3.2rem, 6vw, 5.3rem); }
.entity-hero p { margin: 0; color: #aab2c2; }
.roster-list { display: grid; gap: 9px; }
.roster-list a { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; padding: 11px; border: 1px solid var(--line); background: #fff; border-radius: 11px; }
.roster-list a > span { display: grid; width: 44px; height: 44px; place-items: center; color: var(--violet); background: var(--violet-soft); border-radius: 9px; }
.roster-list small { display: block; color: var(--muted); }

.match-hero { padding: 52px 0 62px; color: #fff; background: radial-gradient(circle at 50% 120%, #3b329f, #151b2a 55%); }
.match-detail-meta { display: flex; justify-content: center; align-items: center; gap: 9px; margin-bottom: 40px; color: #aab2c2; font-size: .7rem; text-transform: uppercase; }
.match-detail-meta em { margin-left: 10px; color: #fff; font-style: normal; }
.versus-grid { display: grid; grid-template-columns: 1fr 170px 1fr; align-items: center; gap: 20px; }
.versus-team { display: grid; justify-items: center; text-align: center; }
.versus-team h1 { margin: 16px 0 0; font-size: clamp(1.8rem, 4vw, 3.2rem); }
.versus-team > strong { margin-top: 10px; font-size: 2.5rem; }
.versus-center { display: grid; justify-items: center; gap: 6px; color: #aab2c2; text-align: center; }
.versus-center b { display: grid; width: 70px; height: 70px; place-items: center; color: #fff; border: 1px solid #465168; border-radius: 50%; font-size: 1.2rem; }
.versus-center span, .versus-center time { font-size: .68rem; }
.match-info-grid { display: grid; grid-template-columns: 1fr 300px; gap: 60px; }
.match-info-main h2 { margin-bottom: 16px; }
.fact-grid { display: grid; grid-template-columns: repeat(2, 1fr); margin: 30px 0; border: 1px solid var(--line); background: #fff; border-radius: 14px; }
.fact-grid div { padding: 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fact-grid div:nth-child(2n) { border-right: 0; }
.fact-grid div:nth-last-child(-n+2) { border-bottom: 0; }
.fact-grid dt { color: var(--muted); font-size: .65rem; }
.fact-grid dd { margin: 3px 0 0; font-size: .82rem; font-weight: 700; }
.stream-link { display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--line); }

.status-stat > strong { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; letter-spacing: -.02em; }
.status-stat > strong i { width: 12px; height: 12px; background: var(--muted); border-radius: 50%; }
.status-none > strong i, .status-minor > strong i { background: var(--success); }
.status-major > strong i, .status-critical > strong i { background: var(--danger); }
.status-list { display: grid; margin: 24px 0; border: 1px solid var(--line); background: #fff; border-radius: 14px; }
.status-list div { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.status-list div:last-child { border-bottom: 0; }
.status-list em { color: var(--muted); font-size: .7rem; font-style: normal; }
.component-dot { width: 10px; height: 10px; background: var(--muted); border-radius: 50%; }
.component-operational { background: var(--success); }
.component-degraded_performance, .component-partial_outage { background: var(--warning); }
.component-major_outage { background: var(--danger); }
.status-feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.status-feature-grid > a { display: grid; grid-template-columns: 16px 1fr; gap: 17px; padding: 26px; border: 1px solid var(--line); background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.status-feature-grid > a:hover { border-color: #cec8ff; box-shadow: var(--shadow-md); }
.status-feature-grid .component-dot { margin-top: 5px; }
.status-feature-grid small { color: var(--violet); font-size: .64rem; font-weight: 800; text-transform: uppercase; }
.status-feature-grid h2 { margin: 7px 0 10px; font-size: 1.8rem; }
.status-feature-grid p { font-size: .8rem; }
.status-feature-grid strong { color: var(--violet-dark); font-size: .74rem; }
.status-game-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.status-game-grid a { display: grid; grid-template-columns: 5px 1fr auto; align-items: center; gap: 12px; padding: 15px; border: 1px solid var(--line); background: #fff; border-radius: 12px; }
.status-game-grid a:hover { border-color: color-mix(in srgb, var(--game-accent) 45%, var(--line)); transform: translateY(-2px); }
.status-game-grid i { width: 5px; height: 38px; background: var(--game-accent); border-radius: 6px; }
.status-game-grid strong, .status-game-grid small { display: block; }
.status-game-grid strong { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.status-game-grid small { color: var(--muted); font-size: .62rem; }
.status-game-grid b { color: var(--violet); }

.search-hero { padding: 68px 0; color: #fff; background: #151b2a; text-align: center; }
.search-hero .eyebrow { color: var(--lime); }
.search-hero h1 { font-size: clamp(2.8rem, 6vw, 5rem); }
.big-search { display: flex; max-width: 720px; margin: 28px auto 0; padding: 7px; background: #fff; border-radius: 14px; box-shadow: var(--shadow-md); }
.big-search input { min-width: 0; flex: 1; padding: 0 14px; border: 0; outline: 0; }
.big-search button { min-height: 46px; padding: 0 20px; color: #fff; border: 0; background: var(--violet); border-radius: 10px; cursor: pointer; font-weight: 750; }
.result-heading { margin-bottom: 28px; }
.result-heading span { color: var(--violet); font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.result-heading h2 { margin: 7px 0 0; }
.result-list { display: grid; gap: 10px; max-width: 860px; }
.result-list a { padding: 22px; border: 1px solid var(--line); background: #fff; border-radius: 14px; }
.result-list small { color: var(--violet); font-size: .63rem; font-weight: 800; text-transform: uppercase; }
.result-list h3 { margin: 6px 0; }
.result-list p { margin: 0 0 9px; font-size: .8rem; }
.result-list strong { color: var(--violet-dark); font-size: .7rem; }
.search-suggestions h2 { font-size: 2rem; }
.search-suggestions > div { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 860px; }
.search-suggestions a { display: flex; justify-content: space-between; padding: 20px; border: 1px solid var(--line); background: #fff; border-radius: 12px; font-weight: 700; }
.search-suggestions a span { color: var(--violet); }
.source-links { display: grid; gap: 8px; margin: 20px 0; }
.source-links a { display: flex; justify-content: space-between; padding: 12px 14px; color: var(--violet-dark); border: 1px solid #d9d4ff; background: var(--violet-soft); border-radius: 10px; font-size: .8rem; font-weight: 700; }
.comparison-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.comparison-grid a { padding: 28px; border: 1px solid var(--line); background: #fff; border-radius: var(--radius); }
.comparison-grid span { color: var(--violet); font-size: .64rem; font-weight: 800; text-transform: uppercase; }
.comparison-grid h2 { margin: 10px 0 12px; font-size: 1.7rem; }
.comparison-grid p { font-size: .82rem; }
.comparison-grid strong { color: var(--violet-dark); font-size: .75rem; }
.not-found { display: grid; min-height: 650px; place-items: center; padding: 70px 0; text-align: center; }
.not-found > div > span { display: inline-grid; width: 74px; height: 74px; place-items: center; color: var(--violet); background: var(--violet-soft); border-radius: 20px; font-size: 1.5rem; font-weight: 850; }
.not-found h1 { margin: 20px 0 10px; }
.not-found p { max-width: 650px; margin-inline: auto; }
.not-found-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 25px; }
.not-found-links a { padding: 8px 12px; border: 1px solid var(--line); background: #fff; border-radius: 8px; font-size: .75rem; font-weight: 700; }

.site-footer { color: #fff; background: #0d1220; }
.footer-pitch { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding-block: 60px; border-bottom: 1px solid #2a3142; }
.footer-pitch h2 { max-width: 760px; margin: 0; color: #fff; font-size: clamp(2rem, 4vw, 3.4rem); }
.footer-pitch .section-kicker { color: var(--lime); }
.footer-grid { display: grid; grid-template-columns: 2.2fr repeat(3, 1fr); gap: 55px; padding-block: 60px; }
.footer-brand img { margin-bottom: 20px; }
.footer-brand p { max-width: 400px; color: #9ba4b7; font-size: .78rem; }
.footer-source-note { padding-left: 12px; border-left: 2px solid var(--lime); }
.footer-grid h3 { margin-bottom: 18px; color: #fff; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
.footer-grid > div:not(:first-child) { display: flex; flex-direction: column; }
.footer-grid a { padding: 4px 0; color: #9ba4b7; font-size: .76rem; }
.footer-grid a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 22px; border-top: 1px solid #2a3142; }
.footer-bottom p, .footer-bottom a { margin: 0; color: #7f899e; font-size: .65rem; }

@media (max-width: 1080px) {
  .desktop-nav { display: none; }
  .menu-button { display: block; }
  .hero-grid { grid-template-columns: 1fr 390px; gap: 40px; }
  .home-hero { min-height: 640px; }
  .match-grid, .match-grid-wide { grid-template-columns: repeat(2, 1fr); }
  .game-grid { grid-template-columns: repeat(3, 1fr); }
  .principles-grid { grid-template-columns: repeat(3, 1fr); }
  .principles-grid > div:first-child { grid-column: 1 / -1; border-right: 0; }
  .principle b { margin-bottom: 25px; }
  .entity-grid { grid-template-columns: repeat(2, 1fr); }
  .status-game-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 820px) {
  .wrap, .narrow { width: min(calc(100% - 28px), var(--wrap)); }
  .search-trigger { min-width: 42px; width: 42px; justify-content: center; }
  .search-trigger span, .search-trigger kbd { display: none; }
  .live-pill { display: none; }
  .home-hero { padding-top: 55px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy h1 { font-size: clamp(3.7rem, 14vw, 6.4rem); }
  .hero-panel { transform: none; }
  .signal-grid { grid-template-columns: repeat(2, 1fr); }
  .signal-grid div:nth-child(2) { border-right: 0; }
  .signal-grid div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .signal-grid div { padding-left: 0; }
  .section { padding-block: 70px; }
  .split-heading { align-items: flex-start; flex-direction: column; }
  .game-grid, .game-grid-page { grid-template-columns: repeat(2, 1fr); }
  .action-grid { grid-template-columns: 1fr; }
  .action-card { min-height: 270px; }
  .event-layout { grid-template-columns: 1fr; gap: 40px; }
  .event-intro { position: static; }
  .editorial-grid { grid-template-columns: 1fr; }
  .editorial-featured { grid-row: auto; }
  .editorial-featured a { grid-template-columns: 150px 1fr; }
  .editorial-featured .editorial-visual { min-height: 210px; }
  .page-hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .hero-stat { max-width: 320px; }
  .three-copy { grid-template-columns: 1fr; gap: 15px; }
  .game-hero-grid { grid-template-columns: 140px 1fr; }
  .game-monogram { width: 140px; }
  .game-monogram span { font-size: 3.5rem; }
  .game-jump { grid-column: 1 / -1; grid-template-columns: auto repeat(4, 1fr); align-items: center; border-left: 0; border-top: 1px solid rgba(255,255,255,.2); padding: 14px 0 0; }
  .game-jump a { border-bottom: 0; text-align: center; }
  .article-layout { grid-template-columns: 1fr; gap: 35px; }
  .article-aside, .sticky-aside { position: static; grid-template-columns: repeat(2, 1fr); }
  .watch-grid { grid-template-columns: repeat(2, 1fr); }
  .next-actions { grid-template-columns: repeat(3, 1fr); }
  .next-actions > div { grid-column: 1 / -1; }
  .tool-catalog { grid-template-columns: 1fr; }
  .tool-layout { grid-template-columns: 1fr; }
  .tool-sidebar { grid-template-columns: repeat(2, 1fr); }
  .crosshair-layout, .export-layout { grid-template-columns: 1fr; }
  .academy-pillars { grid-template-columns: 1fr; }
  .academy-pillars div { min-height: 210px; }
  .academy-pillars h2 { margin-top: 50px; }
  .rank-feature { grid-template-columns: 220px 1fr; }
  .match-info-grid { grid-template-columns: 1fr; gap: 25px; }
  .status-game-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-pitch { align-items: flex-start; flex-direction: column; }
  .footer-grid { grid-template-columns: 2fr repeat(3, 1fr); gap: 25px; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 580px) {
  body { font-size: 15px; }
  .header-inner { min-height: 66px; }
  .brand img { width: 122px; height: auto; }
  .mobile-nav { top: 66px; }
  .breadcrumbs { padding-block: 12px; }
  .home-hero { padding: 45px 0 50px; }
  .hero-copy h1 { font-size: clamp(3.15rem, 16vw, 5rem); }
  .hero-copy > p { font-size: 1rem; }
  .hero-actions .button { width: 100%; }
  .trust-row { gap: 10px 18px; }
  .pulse-match { grid-template-columns: 48px 1fr; }
  .pulse-match > em, .pulse-match > time { grid-column: 2; }
  .signal-grid strong { font-size: 1.25rem; }
  .section { padding-block: 56px; }
  .section-heading { margin-bottom: 26px; }
  .data-notice { grid-template-columns: 1fr; gap: 6px; }
  .match-grid, .match-grid-wide { grid-template-columns: 1fr; }
  .game-grid, .game-grid-page { grid-template-columns: 1fr; }
  .game-card a { display: grid; grid-template-columns: 120px 1fr; }
  .game-art { height: 100%; min-height: 190px; }
  .game-art span { font-size: 2rem; }
  .action-card { padding: 22px; }
  .event-card { grid-template-columns: 54px 1fr; }
  .event-logo { width: 54px; height: 54px; }
  .event-logo img { width: 42px; height: 42px; }
  .event-date { grid-column: 2; padding: 8px 0 0; border: 0; border-top: 1px solid var(--line); text-align: left; }
  .event-date time { flex-direction: row; align-items: center; gap: 5px; }
  .event-date strong { margin: 0; font-size: .8rem; }
  .editorial-card a, .editorial-featured a { grid-template-columns: 1fr; }
  .editorial-visual, .editorial-featured .editorial-visual { min-height: 160px; }
  .principles-grid { grid-template-columns: 1fr; }
  .principles-grid > div { padding-bottom: 25px; border-right: 0; border-bottom: 1px solid #30384a; }
  .page-hero { padding: 50px 0; }
  .page-hero h1 { font-size: clamp(2.9rem, 14vw, 4.3rem); }
  .filter-bar { align-items: stretch; flex-direction: column; }
  .filter-group { display: grid; grid-template-columns: repeat(2, 1fr); }
  .filter-bar label { justify-content: space-between; }
  .game-hero-grid { grid-template-columns: 1fr; }
  .game-monogram { width: 105px; }
  .game-hero h1 { font-size: 3.4rem; }
  .game-jump { display: none; }
  .article-hero { padding: 50px 0; }
  .article-hero h1 { font-size: clamp(2.7rem, 13vw, 4rem); }
  .article-aside { grid-template-columns: 1fr; }
  .watch-grid { grid-template-columns: 1fr; }
  .guide-list { grid-template-columns: 1fr; }
  .next-actions { grid-template-columns: 1fr; }
  .next-actions > div { grid-column: auto; }
  .tool-catalog-card { grid-template-columns: 1fr; }
  .tool-catalog-icon { width: 60px; height: 60px; border-radius: 16px; }
  .tool-form-grid { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: 1fr; }
  .result-panel strong { font-size: 2.4rem; }
  .tool-sidebar { grid-template-columns: 1fr; }
  .preview-scene { min-height: 360px; }
  .stage-toolbar { align-items: flex-start; flex-direction: column; gap: 10px; }
  .glossary-tools { align-items: flex-start; flex-direction: column; gap: 10px; }
  .glossary-grid { grid-template-columns: 1fr; }
  .rank-feature { grid-template-columns: 1fr; padding: 25px; }
  .rank-visual { width: 180px; }
  .entity-grid { grid-template-columns: 1fr; }
  .entity-hero-grid { grid-template-columns: 95px 1fr; gap: 18px; }
  .entity-image-large { width: 95px; height: 95px; border-radius: 20px; }
  .entity-hero h1 { font-size: 2.6rem; }
  .versus-grid { grid-template-columns: 1fr 70px 1fr; }
  .versus-team h1 { font-size: 1.15rem; }
  .versus-center b { width: 50px; height: 50px; }
  .match-hero .entity-image-large { width: 78px; height: 78px; }
  .fact-grid { grid-template-columns: 1fr; }
  .status-feature-grid, .status-game-grid { grid-template-columns: 1fr; }
  .fact-grid div { border-right: 0; }
  .fact-grid div:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .fact-grid div:last-child { border-bottom: 0; }
  .search-suggestions > div, .comparison-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
}

/* Discovery directories and search -------------------------------------- */
.header-search { position: relative; }
.search-popover { position: absolute; z-index: 260; left: 0; right: 0; top: calc(100% + 8px); overflow: hidden; padding: 5px; border: 1px solid var(--line); background: #fff; border-radius: 12px; box-shadow: 0 20px 50px rgba(17,24,39,.18); }
.search-popover a { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 9px 10px; border-radius: 8px; }.search-popover a:hover { background: #f5f4ff; }.search-popover strong, .search-popover small { display: block; }.search-popover strong { font-size: .7rem; }.search-popover small { color: var(--muted); font-size: .55rem; }.search-popover b { color: var(--violet); }
.events-hero, .directory-hero, .games-directory-hero, .search-portal-hero { overflow: hidden; color: #fff; background: radial-gradient(circle at 8% 10%,rgba(183,229,51,.15),transparent 25%),radial-gradient(circle at 92% 10%,rgba(0,168,232,.17),transparent 28%),linear-gradient(120deg,#121827,#222c49); }
.events-hero-grid, .directory-hero-grid, .games-directory-hero-grid { display: grid; grid-template-columns: 1fr 430px; align-items: center; min-height: 440px; gap: 70px; padding-block: 50px; }
.events-hero .eyebrow, .directory-hero .eyebrow, .games-directory-hero .eyebrow, .search-portal-hero .eyebrow { color: var(--lime); }.events-hero .eyebrow .icon, .directory-hero .eyebrow .icon, .games-directory-hero .eyebrow .icon, .search-portal-hero .eyebrow .icon { width: 17px; }
.events-hero h1, .directory-hero h1, .games-directory-hero h1 { margin-bottom: 18px; color: #fff; font-size: clamp(3.1rem,5.7vw,5.4rem); }.events-hero h1 em, .games-directory-hero h1 em { color: #a49cff; font-style: normal; }.events-hero p, .directory-hero p, .games-directory-hero p { max-width: 680px; color: #b8c2d3; }
.event-hero-collage, .games-hero-mosaic { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; transform: rotate(1deg); }.event-hero-collage a, .games-hero-mosaic a { position: relative; overflow: hidden; height: 130px; border: 4px solid #fff; background: #fff; border-radius: 13px; box-shadow: 0 16px 38px rgba(0,0,0,.22); }.event-hero-collage a:first-child, .games-hero-mosaic a:first-child { grid-row: span 2; height: 268px; }.event-hero-collage img, .games-hero-mosaic img { width: 100%; height: 100%; object-fit: cover; }.event-hero-collage a::after, .games-hero-mosaic a::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent,rgba(8,13,24,.85)); }.event-hero-collage span, .games-hero-mosaic span { position: absolute; z-index: 2; left: 11px; right: 11px; bottom: 8px; overflow: hidden; color: #fff; font-size: .65rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.event-filter-bar { display: grid; grid-template-columns: 1fr 330px auto; align-items: center; gap: 14px; margin-bottom: 22px; padding: 12px 14px; border: 1px solid var(--line); background: #fff; border-radius: 13px; }.event-filter-bar > div:first-child { display: flex; align-items: center; gap: 9px; }.event-filter-bar > div:first-child > span { display: grid; width: 34px; height: 34px; place-items: center; color: var(--violet); background: var(--violet-soft); border-radius: 9px; }.event-filter-bar > div:first-child .icon { width: 17px; }.event-filter-bar strong { font-size: .73rem; }.event-filter-bar label { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; border: 1px solid var(--line); background: #f8f9fc; border-radius: 8px; }.event-filter-bar label span { color: var(--muted); font-size: .55rem; font-weight: 800; text-transform: uppercase; }.event-filter-bar select { min-width: 0; border: 0; outline: 0; background: transparent; font-size: .65rem; }.event-filter-bar .filter-group { display: flex; padding: 3px; border: 1px solid var(--line); background: #f5f6fa; border-radius: 8px; }.event-filter-bar button { display: flex; align-items: center; gap: 5px; min-height: 31px; padding: 0 9px; border: 0; background: transparent; border-radius: 6px; cursor: pointer; font-size: .61rem; font-weight: 720; }.event-filter-bar button.is-active { background: #fff; box-shadow: 0 1px 4px rgba(17,24,39,.08); }.event-filter-bar button i { width: 6px; height: 6px; background: var(--danger); border-radius: 50%; }
.portal-event-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; }.portal-event-list .event-card { margin: 0; }
.event-game-browser > .wrap > div:last-child { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; }.event-game-browser > .wrap > div:last-child > a { display: grid; grid-template-columns: 75px 1fr 16px; align-items: center; gap: 10px; min-width: 0; padding: 7px; border: 1px solid var(--line); background: #fff; border-radius: 9px; }.event-game-browser img { width: 75px; height: 42px; object-fit: cover; border-radius: 6px; }.event-game-browser strong, .event-game-browser small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.event-game-browser strong { font-size: .63rem; }.event-game-browser small { color: var(--muted); font-size: .51rem; }.event-game-browser .icon { width: 14px; color: var(--violet); }
.event-how > div:last-child, .directory-paths > .wrap > div:last-child { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); background: #fff; border-radius: 15px; }.event-how article, .directory-paths article { padding: 25px; border-right: 1px solid var(--line); }.event-how article:last-child, .directory-paths article:last-child { border-right: 0; }.event-how article > span, .directory-paths article > span { display: grid; width: 43px; height: 43px; place-items: center; color: var(--violet); background: var(--violet-soft); border-radius: 11px; }.event-how h3, .directory-paths h3 { margin: 30px 0 9px; font-size: 1rem; }.event-how p, .directory-paths p { margin: 0; font-size: .68rem; }
.directory-visual { padding: 28px; border: 1px solid #3a4660; background: rgba(20,27,43,.85); border-radius: 18px; box-shadow: 0 18px 45px rgba(0,0,0,.2); }.directory-visual > span { display: grid; width: 62px; height: 62px; place-items: center; color: var(--lime); background: #283249; border-radius: 16px; }.directory-visual > span .icon { width: 28px; height: 28px; }.directory-visual strong { display: block; margin: 50px 0 8px; color: #fff; font-size: 1.1rem; }.directory-visual p { margin: 0; font-size: .7rem; }
.directory-toolbar { display: grid; grid-template-columns: minmax(300px,1fr) 310px auto; align-items: center; gap: 12px; margin-bottom: 23px; }.directory-toolbar > div { display: grid; grid-template-columns: 19px 1fr; align-items: center; gap: 9px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); background: #fff; border-radius: 10px; }.directory-toolbar > div .icon { width: 18px; color: var(--violet); }.directory-toolbar input { min-width: 0; border: 0; outline: 0; }.directory-toolbar label { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 9px; min-height: 44px; padding: 0 11px; border: 1px solid var(--line); background: #fff; border-radius: 10px; }.directory-toolbar label > span { color: var(--muted); font-size: .56rem; font-weight: 800; text-transform: uppercase; }.directory-toolbar select { min-width: 0; border: 0; outline: 0; background: transparent; font-size: .66rem; }.directory-toolbar > span { color: var(--muted); font-size: .64rem; }.directory-toolbar > span b { color: var(--ink); }
.portal-directory-grid .entity-card { grid-template-columns: 62px 1fr; padding: 13px; border-radius: 12px; box-shadow: none; }.portal-directory-grid .entity-image { width: 62px; height: 62px; border-radius: 12px; }.portal-directory-grid .entity-card > span:last-child { min-width: 0; }.portal-directory-grid .entity-card h2 { margin: 2px 0; font-size: .9rem; }.portal-directory-grid .entity-card p { margin: 0; font-size: .61rem; }.portal-directory-grid .entity-card strong { display: flex; align-items: center; gap: 5px; margin-top: 5px; font-size: .58rem; }.portal-directory-grid .entity-card strong .icon { width: 13px; }
.games-directory-hero form { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; max-width: 570px; min-height: 48px; gap: 9px; padding: 6px 6px 6px 14px; background: #fff; border-radius: 11px; }.games-directory-hero form .icon { color: #6f788b; }.games-directory-hero input { min-width: 0; border: 0; outline: 0; font-size: .74rem; }.games-directory-hero button { min-height: 36px; padding: 0 14px; color: #fff; border: 0; background: var(--violet); border-radius: 8px; font-size: .68rem; font-weight: 750; }
.game-directory-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 23px; }.game-directory-search { display: grid; grid-template-columns: 18px minmax(180px,260px) auto; align-items: center; gap: 9px; min-height: 42px; padding: 0 11px; border: 1px solid var(--line); background: #fff; border-radius: 9px; }.game-directory-search .icon { width: 17px; color: var(--violet); }.game-directory-search input { min-width: 0; border: 0; outline: 0; }.game-directory-search > span { padding-left: 9px; border-left: 1px solid var(--line); color: var(--muted); font-size: .58rem; white-space: nowrap; }.game-directory-search b { color: var(--ink); }.game-genre-filter { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }.game-genre-filter button { padding: 7px 9px; border: 1px solid var(--line); background: #fff; border-radius: 7px; cursor: pointer; color: var(--muted); font-size: .59rem; font-weight: 700; }.game-genre-filter button.is-active { color: #fff; border-color: var(--violet); background: var(--violet); }
.portal-all-games { grid-template-columns: repeat(4,1fr); gap: 12px; }.portal-all-games .game-card { border-radius: 13px; box-shadow: none; }.portal-all-games .game-card-copy { padding: 13px; }
.games-directory-how > .wrap > div:last-child { display: grid; grid-template-columns: repeat(7,1fr); gap: 7px; }.games-directory-how > .wrap > div:last-child > a { padding: 15px 10px; border: 1px solid var(--line); background: #fff; border-radius: 10px; text-align: center; }.games-directory-how > .wrap > div:last-child > a > .icon { width: 23px; height: 23px; margin: 0 auto 12px; color: var(--violet); }.games-directory-how strong, .games-directory-how small { display: block; }.games-directory-how strong { font-size: .68rem; }.games-directory-how small { margin-top: 4px; color: var(--muted); font-size: .5rem; line-height: 1.35; }
.game-directory-copy { display: grid; grid-template-columns: 330px 1fr; gap: 70px; }.game-directory-copy p { line-height: 1.78; }
.search-portal-hero { padding-block: 68px; text-align: center; }.search-portal-hero h1 { color: #fff; font-size: clamp(3rem,5.5vw,5rem); }.search-portal-hero > .wrap > p { color: #b8c2d3; }.portal-big-search { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; max-width: 760px; min-height: 58px; gap: 10px; padding: 6px 6px 6px 16px; border-radius: 13px; }.portal-big-search .icon { color: #6d7689; }.portal-big-search input { height: 46px; }.search-popular { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; margin-top: 14px; color: #9ea8ba; font-size: .6rem; }.search-popular span { padding: 5px 0; }.search-popular a { padding: 5px 8px; border: 1px solid #3a4560; background: rgba(28,36,55,.8); border-radius: 6px; color: #d5dbe6; }
.search-start-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 11px; }.search-start-grid > a { padding: 21px; border: 1px solid var(--line); background: #fff; border-radius: 13px; }.search-start-grid > a > span { display: grid; width: 42px; height: 42px; margin-bottom: 35px; place-items: center; color: var(--violet); background: var(--violet-soft); border-radius: 11px; }.search-start-grid small { color: var(--violet); font-size: .55rem; font-weight: 800; text-transform: uppercase; }.search-start-grid h2 { margin: 5px 0 8px; font-size: 1.2rem; }.search-start-grid p { margin: 0; font-size: .67rem; }
.portal-result-list { max-width: 980px; }.portal-result-list > a { display: grid; grid-template-columns: 38px 1fr 17px; align-items: center; gap: 13px; padding: 15px; border-radius: 11px; }.portal-result-list > a > span { display: grid; width: 38px; height: 38px; place-items: center; color: var(--violet); background: var(--violet-soft); border-radius: 9px; }.portal-result-list > a > span .icon { width: 18px; }.portal-result-list > a > div { min-width: 0; }.portal-result-list h3 { margin: 3px 0; font-size: .88rem; }.portal-result-list p { overflow: hidden; margin: 0; font-size: .63rem; text-overflow: ellipsis; white-space: nowrap; }.portal-result-list > a > .icon { width: 15px; color: #9ca5b4; }
.google-search-section { border-block: 1px solid var(--line); }.google-search-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 25px; }.google-search-heading > div > p { margin: 6px 0 0; color: var(--muted); font-size: .68rem; }.google-search-badge { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid var(--line); background: #fff; border-radius: 8px; color: #4f596b; font-size: .6rem; font-weight: 750; white-space: nowrap; }.google-search-badge .icon { width: 15px; color: #4285f4; }.google-search-consent { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 16px; padding: 18px; border: 1px solid #d9deea; background: #fff; border-radius: 13px; }.google-search-consent > span { display: grid; width: 46px; height: 46px; place-items: center; color: var(--violet); background: var(--violet-soft); border-radius: 11px; }.google-search-consent > span .icon { width: 22px; }.google-search-consent strong { display: block; margin-bottom: 3px; font-size: .78rem; }.google-search-consent p { margin: 0; color: var(--muted); font-size: .64rem; }.google-search-consent .button { white-space: nowrap; }.google-search-loading, .google-search-error { padding: 16px; border: 1px solid var(--line); background: #fff; border-radius: 10px; color: var(--muted); font-size: .66rem; }.google-search-results { min-height: 170px; padding: 12px; border: 1px solid var(--line); background: #fff; border-radius: 13px; }.google-search-section[data-pse-loaded="true"] .google-search-results { min-height: 320px; }.google-search-section .gsc-control-cse { padding: 0; border: 0; font-family: inherit; }.google-search-section .gsc-webResult.gsc-result { border-color: var(--line); }.google-search-section .gsc-adBlock { margin-bottom: 18px; }

@media (max-width: 1080px) {
  .events-hero-grid, .directory-hero-grid, .games-directory-hero-grid { grid-template-columns: 1fr 370px; gap: 40px; }
  .event-game-browser > .wrap > div:last-child { grid-template-columns: repeat(3,1fr); }
  .portal-all-games { grid-template-columns: repeat(3,1fr); }
  .games-directory-how > .wrap > div:last-child { grid-template-columns: repeat(4,1fr); }
}
@media (max-width: 820px) {
  .events-hero-grid, .directory-hero-grid, .games-directory-hero-grid { grid-template-columns: 1fr; min-height: 0; }.event-hero-collage, .games-hero-mosaic { max-width: 600px; }
  .event-filter-bar { grid-template-columns: 1fr 1fr; }.event-filter-bar .filter-group { grid-column: 1 / -1; width: fit-content; }
  .portal-event-list { grid-template-columns: 1fr; }.event-game-browser > .wrap > div:last-child { grid-template-columns: repeat(2,1fr); }
  .directory-toolbar { grid-template-columns: 1fr 1fr; }.directory-toolbar > span { grid-column: 1 / -1; }
  .game-directory-toolbar { align-items: stretch; flex-direction: column; }.game-genre-filter { justify-content: flex-start; }
  .portal-all-games { grid-template-columns: repeat(2,1fr); }.games-directory-how > .wrap > div:last-child { grid-template-columns: repeat(3,1fr); }.game-directory-copy { grid-template-columns: 1fr; gap: 20px; }
  .search-start-grid { grid-template-columns: repeat(2,1fr); }
  .google-search-consent { grid-template-columns: 46px 1fr; }.google-search-consent .button { grid-column: 1 / -1; width: fit-content; }
}
@media (max-width: 580px) {
  .events-hero-grid, .directory-hero-grid, .games-directory-hero-grid { padding-block: 38px; }.events-hero h1, .directory-hero h1, .games-directory-hero h1 { font-size: 3rem; }
  .event-filter-bar { grid-template-columns: 1fr; }.event-filter-bar .filter-group { grid-column: auto; width: 100%; }.event-filter-bar button { flex: 1; justify-content: center; }
  .event-game-browser > .wrap > div:last-child { grid-template-columns: 1fr; }.event-how > div:last-child, .directory-paths > .wrap > div:last-child { grid-template-columns: 1fr; }.event-how article, .directory-paths article { border-right: 0; border-bottom: 1px solid var(--line); }.event-how article:last-child, .directory-paths article:last-child { border-bottom: 0; }
  .directory-toolbar { grid-template-columns: 1fr; }.directory-toolbar > span { grid-column: auto; }.portal-directory-grid { grid-template-columns: 1fr; }
  .game-directory-search { grid-template-columns: 18px 1fr auto; }.portal-all-games { grid-template-columns: 1fr; }.games-directory-how > .wrap > div:last-child { grid-template-columns: repeat(2,1fr); }
  .search-portal-hero { padding-block: 46px; }.search-portal-hero h1 { font-size: 3rem; }.portal-big-search { grid-template-columns: 20px 1fr auto; }.portal-big-search button { padding-inline: 12px; }.search-start-grid { grid-template-columns: 1fr; }
  .google-search-heading { align-items: flex-start; flex-direction: column; }.google-search-consent { grid-template-columns: 38px 1fr; padding: 14px; }.google-search-consent > span { width: 38px; height: 38px; }.google-search-consent .button { width: 100%; }.google-search-results { padding: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

@media print {
  .site-header, .site-footer, .breadcrumbs, .hero-actions, .filter-bar, .article-aside { display: none !important; }
  body { color: #000; background: #fff; }
  .section, .article-hero { padding: 24px 0; }
  a { text-decoration: underline; }
}

/* 2PVP portal shell ------------------------------------------------------- */
.icon { width: 20px; height: 20px; flex: 0 0 auto; }
.live-dot { display: inline-block; width: 8px; height: 8px; background: var(--coral); border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,89,104,.14); }
.portal-header { position: sticky; top: 0; z-index: 200; border: 0; background: #fff; backdrop-filter: none; box-shadow: 0 1px 0 var(--line); }
.header-utility { color: #dfe5f2; background: #121827; }
.utility-inner { display: flex; justify-content: space-between; align-items: center; min-height: 34px; gap: 24px; }
.utility-inner p { display: flex; align-items: center; gap: 8px; margin: 0; color: #aeb8ca; font-size: .69rem; }
.utility-inner p strong { color: #fff; }
.utility-inner nav { display: flex; align-items: center; gap: 20px; color: #9ca8bb; font-size: .67rem; }
.utility-inner nav a:hover { color: #fff; }
.header-main { display: grid; grid-template-columns: 160px minmax(320px, 690px) auto; align-items: center; min-height: 76px; gap: 26px; }
.header-main .brand img { width: 150px; height: auto; }
.header-search { display: grid; grid-template-columns: 22px minmax(0,1fr) auto auto; align-items: center; min-height: 48px; gap: 10px; padding: 5px 6px 5px 16px; border: 1px solid #d9deea; background: #f7f8fc; border-radius: 13px; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.header-search:focus-within { border-color: #aaa1ff; background: #fff; box-shadow: 0 0 0 4px rgba(103,88,245,.1); }
.header-search .icon { color: #70798e; }
.header-search input { min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: .84rem; }
.header-search kbd { padding: 2px 7px; color: #7c8497; border: 1px solid #d6dbe5; background: #fff; border-radius: 5px; font: 650 .68rem var(--font); }
.header-search button { min-height: 36px; padding: 0 14px; color: #fff; border: 0; background: var(--violet); border-radius: 9px; cursor: pointer; font-size: .76rem; font-weight: 780; }
.header-cta { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.live-cta { display: grid; grid-template-columns: 9px auto 17px; align-items: center; gap: 10px; min-height: 48px; padding: 6px 13px; color: #fff; background: #151c2d; border-radius: 12px; }
.live-cta small, .live-cta strong { display: block; line-height: 1.2; }
.live-cta small { color: #97a2b5; font-size: .57rem; font-weight: 650; text-transform: uppercase; }
.live-cta strong { margin-top: 2px; font-size: .74rem; }
.live-cta .icon { width: 16px; }
.portal-header .menu-button { display: none; place-items: center; padding: 0; }
.portal-header .menu-button .icon { width: 22px; height: 22px; }
.nav-shell { position: relative; border-top: 1px solid var(--line); background: #fff; }
.portal-header .desktop-nav { display: flex; min-height: 47px; align-items: stretch; gap: 2px; }
.portal-header .desktop-nav > a,
.portal-header .desktop-nav summary { position: relative; display: flex; align-items: center; gap: 8px; min-height: 47px; padding: 0 15px; color: #424b5e; cursor: pointer; list-style: none; font-size: .77rem; font-weight: 730; }
.portal-header .desktop-nav > a::after { left: 14px; right: 14px; bottom: 0; }
.portal-header .desktop-nav summary::-webkit-details-marker { display: none; }
.portal-header .desktop-nav summary .icon,
.portal-header .desktop-nav > a .icon { width: 17px; height: 17px; color: #70798d; }
.portal-header .desktop-nav summary b { margin-left: 3px; padding: 2px 6px; color: var(--violet-dark); background: var(--violet-soft); border-radius: 5px; font-size: .56rem; letter-spacing: 0; }
.portal-header .desktop-nav > a:hover,
.portal-header .desktop-nav summary:hover,
.portal-header .desktop-nav [aria-current="page"] { color: var(--violet-dark); background: #faf9ff; }
.portal-header .desktop-nav [aria-current="page"] .icon { color: var(--violet); }
.nav-mega { position: static; }
.nav-mega[open] summary { color: var(--violet-dark); background: #faf9ff; }
.nav-mega[open] summary::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; background: var(--violet); }
.mega-panel { position: absolute; z-index: 205; left: 50%; top: calc(100% + 1px); width: min(calc(100vw - 40px), var(--wrap)); padding: 26px; border: 1px solid var(--line); border-top: 0; background: #fff; border-radius: 0 0 20px 20px; box-shadow: 0 24px 60px rgba(17,24,39,.16); transform: translateX(-50%); }
.mega-games { display: grid; grid-template-columns: 230px minmax(0,1fr) 150px; gap: 24px; }
.mega-intro { padding: 6px 20px 6px 4px; border-right: 1px solid var(--line); }
.mega-intro > span, .mega-feature > small { color: var(--violet); font-size: .61rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.mega-intro h2, .mega-feature h2 { margin: 8px 0 10px; font-size: 1.3rem; }
.mega-intro p, .mega-feature p { margin-bottom: 16px; font-size: .72rem; line-height: 1.55; }
.mega-intro > a, .mega-feature > a { display: inline-flex; align-items: center; gap: 7px; color: var(--violet-dark); font-size: .71rem; font-weight: 800; }
.mega-intro > a .icon, .mega-feature > a .icon { width: 16px; }
.mega-game-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.mega-game-grid > a { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 10px; min-width: 0; padding: 6px; border: 1px solid transparent; border-radius: 10px; }
.mega-game-grid > a:hover { border-color: #dcd8ff; background: #f8f7ff; }
.mega-game-grid img { width: 74px; height: 42px; object-fit: cover; border-radius: 7px; }
.mega-game-grid strong, .mega-game-grid small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mega-game-grid strong { font-size: .71rem; }
.mega-game-grid small { color: var(--muted); font-size: .59rem; }
.mega-links { display: flex; flex-direction: column; padding-left: 4px; }
.mega-links strong, .mega-link-group > strong { margin-bottom: 8px; color: #8a93a4; font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }
.mega-links a { padding: 6px 0; color: #4b5568; font-size: .69rem; font-weight: 650; }
.mega-links a:hover { color: var(--violet); }
.mega-columns { display: grid; grid-template-columns: 1.05fr 1fr 1fr; gap: 28px; }
.mega-columns.compact { grid-template-columns: 1.1fr 1fr 1fr; }
.mega-feature { padding: 5px 26px 5px 5px; border-right: 1px solid var(--line); }
.mega-icon { display: grid; width: 42px; height: 42px; margin-bottom: 13px; place-items: center; color: var(--violet); background: var(--violet-soft); border-radius: 12px; }
.mega-icon.live { color: var(--danger); background: #fff0f2; }
.mega-link-group { display: flex; flex-direction: column; gap: 4px; }
.mega-link-group > a { display: flex; align-items: center; gap: 11px; padding: 8px; border-radius: 9px; }
.mega-link-group > a:hover { background: #f5f6fa; }
.mega-link-group > a > .icon { width: 19px; color: var(--violet); }
.mega-link-group b, .mega-link-group small { display: block; }
.mega-link-group b { font-size: .72rem; }
.mega-link-group small { color: var(--muted); font-size: .59rem; }
.portal-header .mobile-nav { position: fixed; z-index: 190; inset: 111px 0 0; padding: 0 0 90px; background: #f6f8fc; overflow-y: auto; }
.mobile-nav-search { padding: 14px; background: #fff; border-bottom: 1px solid var(--line); }
.mobile-nav-search form { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 10px; padding: 7px 7px 7px 13px; border: 1px solid var(--line-strong); background: #f8f9fc; border-radius: 11px; }
.mobile-nav-search input { min-width: 0; border: 0; outline: 0; background: transparent; }
.mobile-nav-search button { padding: 7px 11px; color: #fff; border: 0; background: var(--violet); border-radius: 7px; font-weight: 750; }
.mobile-nav-groups { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; padding-block: 20px; }
.mobile-nav-groups section { padding: 15px; border: 1px solid var(--line); background: #fff; border-radius: 14px; }
.mobile-nav-groups h2 { margin: 0 0 7px; color: var(--muted); font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; }
.portal-header .mobile-nav-groups a { display: flex; justify-content: flex-start; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: .8rem; font-weight: 700; }
.mobile-nav-groups a .icon { width: 17px; color: var(--violet); }
.mobile-popular a { display: grid !important; grid-template-columns: 64px 1fr; }
.mobile-popular img { width: 64px; height: 36px; object-fit: cover; border-radius: 6px; }
.mobile-bottom-nav { display: none; }

/* Home discovery --------------------------------------------------------- */
.portal-hero { position: relative; overflow: hidden; padding: 52px 0 58px; background: radial-gradient(circle at 10% 10%, rgba(184,229,51,.16), transparent 27%), radial-gradient(circle at 92% 15%, rgba(0,168,232,.14), transparent 28%), linear-gradient(135deg,#fff 0%,#faf9ff 52%,#f1f8ff 100%); border-bottom: 1px solid var(--line); }
.portal-hero::after { content: ""; position: absolute; width: 480px; height: 480px; right: -300px; bottom: -320px; border: 80px solid rgba(103,88,245,.08); border-radius: 50%; }
.portal-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1.02fr) minmax(400px,.8fr); align-items: center; gap: 52px; }
.hero-live-line { display: flex; align-items: center; gap: 10px; margin-bottom: 17px; color: #4d566a; font-size: .72rem; font-weight: 780; letter-spacing: .04em; text-transform: uppercase; }
.portal-hero h1 { margin-bottom: 20px; font-size: clamp(3.7rem,7vw,6.4rem); line-height: .9; letter-spacing: -.07em; }
.portal-hero h1 em { color: var(--violet); font-style: normal; }
.portal-hero-copy > p { max-width: 660px; margin-bottom: 24px; color: #525d71; font-size: 1.06rem; line-height: 1.58; }
.game-finder { padding: 17px; border: 1px solid #dfe3ed; background: rgba(255,255,255,.94); border-radius: 18px; box-shadow: 0 18px 45px rgba(38,43,67,.09); }
.finder-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.finder-heading > .icon { color: var(--violet); }
.finder-heading strong, .finder-heading small { display: block; line-height: 1.3; }
.finder-heading strong { font-size: .78rem; }
.finder-heading small { color: var(--muted); font-size: .63rem; }
.finder-fields { display: grid; grid-template-columns: 1.1fr 1fr .85fr auto; gap: 7px; }
.finder-fields label { min-width: 0; padding: 7px 10px; border: 1px solid var(--line); background: #f8f9fc; border-radius: 10px; }
.finder-fields label > span { display: block; color: #8a92a4; font-size: .53rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.finder-fields select { width: 100%; min-width: 0; padding: 1px 17px 0 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: .7rem; font-weight: 720; }
.finder-fields button { display: inline-flex; align-items: center; gap: 8px; padding: 0 15px; color: #fff; border: 0; background: var(--violet); border-radius: 10px; cursor: pointer; font-size: .71rem; font-weight: 800; white-space: nowrap; }
.finder-fields button .icon { width: 16px; }
.hero-trending { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; color: var(--muted); font-size: .64rem; }
.hero-trending > span { padding: 4px 0; font-weight: 750; }
.hero-trending a { padding: 4px 8px; border: 1px solid #e0ddff; background: #f8f7ff; border-radius: 6px; color: var(--violet-dark); font-weight: 700; }
.hero-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; transform: rotate(1deg); }
.hero-showcase > a, .showcase-count { position: relative; min-width: 0; overflow: hidden; border: 5px solid #fff; background: #fff; border-radius: 15px; box-shadow: 0 13px 35px rgba(26,33,52,.12); }
.hero-showcase > a img { width: 100%; height: 100%; object-fit: cover; }
.hero-showcase > a:not(.showcase-main) { height: 130px; }
.hero-showcase > a:not(.showcase-main)::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent,rgba(9,14,25,.78)); }
.hero-showcase > a:not(.showcase-main) > span { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 9px; overflow: hidden; color: #fff; font-size: .7rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.showcase-main { grid-row: span 2; height: 270px; }
.showcase-main::after { content: ""; position: absolute; inset: 25% 0 0; background: linear-gradient(transparent,rgba(7,12,23,.88)); }
.showcase-main > span { position: absolute; z-index: 2; left: 17px; right: 17px; bottom: 16px; color: #fff; }
.showcase-main small, .showcase-main strong, .showcase-main b { display: block; }
.showcase-main small { color: #d8deea; font-size: .58rem; font-weight: 750; text-transform: uppercase; }
.showcase-main strong { margin: 3px 0 8px; font-size: 1.5rem; }
.showcase-main b { display: flex; align-items: center; gap: 6px; color: var(--lime); font-size: .66rem; }
.showcase-main b .icon { width: 15px; }
.showcase-count { display: flex; height: 130px; flex-direction: column; justify-content: center; padding: 18px; border-color: #fff; background: linear-gradient(135deg,#6758f5,#4538c8); color: #fff; }
.showcase-count strong { font-size: 2.1rem; line-height: .9; }
.showcase-count span { margin: 5px 0 9px; color: #dedbff; font-size: .66rem; }
.showcase-count a { display: flex; align-items: center; gap: 5px; color: #fff; font-size: .62rem; font-weight: 780; }
.showcase-count .icon { width: 14px; }
.quick-rail { border-bottom: 1px solid var(--line); background: #fff; }
.quick-rail-inner { display: grid; grid-template-columns: repeat(4,1fr); }
.quick-rail-inner > a { display: grid; grid-template-columns: 40px 1fr 17px; align-items: center; gap: 11px; min-width: 0; padding: 16px 18px; border-right: 1px solid var(--line); }
.quick-rail-inner > a:first-child { padding-left: 0; }
.quick-rail-inner > a:last-child { border-right: 0; }
.quick-rail-inner > a:hover { background: #fafbfe; }
.rail-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 11px; }
.rail-icon .icon { width: 19px; }
.rail-icon.red { color: #e23b4b; background: #fff0f2; }.rail-icon.purple { color: var(--violet); background: var(--violet-soft); }.rail-icon.blue { color: #008dcc; background: var(--cyan-soft); }.rail-icon.green { color: #11865c; background: #e7f8f1; }
.quick-rail strong, .quick-rail small { display: block; overflow: hidden; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.quick-rail strong { font-size: .74rem; }.quick-rail small { color: var(--muted); font-size: .59rem; }
.quick-rail > .icon, .quick-rail-inner > a > .icon { width: 16px; color: #9ba3b3; }
.section-compact { padding-block: 72px; }
.home-match-tabs { display: flex; gap: 4px; margin: -14px 0 20px; padding: 4px; width: fit-content; border: 1px solid var(--line); background: #f5f6fa; border-radius: 10px; }
.home-match-tabs button { display: flex; align-items: center; gap: 7px; padding: 7px 12px; border: 0; background: transparent; border-radius: 7px; cursor: pointer; color: var(--muted); font-size: .68rem; font-weight: 750; }
.home-match-tabs button.is-active { color: var(--ink); background: #fff; box-shadow: 0 1px 5px rgba(17,24,39,.08); }
.match-grid-dense { gap: 11px; }
.match-grid-dense .match-card { border-radius: 13px; box-shadow: none; }
.match-grid-dense .match-card-top { min-height: 36px; padding: 8px 12px; }
.match-grid-dense .match-card-body { gap: 7px; padding: 12px; }
.match-grid-dense .match-team { grid-template-columns: 34px 1fr auto; gap: 8px; }
.match-grid-dense .team-mark { width: 34px; height: 34px; border-radius: 9px; }
.match-grid-dense .team-mark img { width: 28px; height: 28px; }
.match-grid-dense .match-team strong { font-size: .79rem; }
.match-grid-dense .match-card-foot { padding: 9px 12px; }
.data-attribution { margin: 12px 2px 0; color: #8c94a4; font-size: .58rem; }
.data-attribution.inverse { color: #7f8a9f; }
.friendly-empty { display: flex; align-items: center; gap: 16px; padding: 22px; border: 1px solid var(--line); background: #fff; border-radius: 14px; }
.friendly-empty > .icon { width: 34px; height: 34px; padding: 7px; color: var(--violet); background: var(--violet-soft); border-radius: 9px; }
.friendly-empty div { flex: 1; }.friendly-empty h3 { margin-bottom: 4px; font-size: 1rem; }.friendly-empty p { margin: 0; font-size: .75rem; }
.friendly-empty > a { display: flex; align-items: center; gap: 7px; color: var(--violet-dark); font-size: .7rem; font-weight: 800; }.friendly-empty > a .icon { width: 15px; }
.friendly-empty.dark { color: #fff; border-color: #354057; background: #20283a; }.friendly-empty.dark p { color: #9eabc0; }
.portal-game-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; }
.portal-game-grid .game-card { border-radius: 14px; box-shadow: none; }
.game-card-main { display: flex; height: 100%; flex-direction: column; }
.game-card .game-art { position: relative; display: block; height: 142px; background: #1a2030; }
.game-card .game-art::before, .game-card .game-art::after, .game-card .game-art > i { display: none; }
.game-card .game-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.game-card:hover .game-art img { transform: scale(1.035); }
.game-card-shade { position: absolute; inset: 45% 0 0; background: linear-gradient(transparent,rgba(11,16,27,.75)); }
.game-card .game-art small { position: absolute; z-index: 2; left: 12px; bottom: 9px; padding: 3px 6px; color: #fff; background: rgba(13,18,32,.65); border-radius: 5px; backdrop-filter: blur(7px); font-size: .54rem; font-weight: 750; text-transform: uppercase; }
.portal-game-grid .game-card-copy { padding: 13px 14px 11px; }
.game-card-copy h3 { margin: 0 0 5px; font-size: .95rem; }
.game-card-copy p { display: -webkit-box; overflow: hidden; margin: 0 0 9px; font-size: .67rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.game-card-copy strong { display: flex; align-items: center; gap: 6px; margin-top: auto; color: var(--violet-dark); font-size: .63rem; }.game-card-copy strong .icon { width: 14px; }
.game-card-links { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); }
.game-card-links a { display: block; height: auto; padding: 8px 4px; border-right: 1px solid var(--line); color: #636c7e; text-align: center; font-size: .56rem; font-weight: 720; }
.game-card-links a:last-child { border-right: 0; }.game-card-links a:hover { color: var(--violet); background: #faf9ff; }
.portal-pathways { padding-top: 76px; }
.pathway-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; }
.pathway-card { min-height: 260px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; transition: transform .2s ease, box-shadow .2s ease; }
.pathway-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pathway-card > span { display: grid; width: 43px; height: 43px; margin-bottom: 35px; place-items: center; color: var(--violet); background: rgba(255,255,255,.78); border-radius: 12px; }
.pathway-card > small { color: #687187; font-size: .58rem; font-weight: 850; text-transform: uppercase; }
.pathway-card h3 { margin: 6px 0 8px; font-size: 1.22rem; }
.pathway-card p { margin-bottom: 13px; font-size: .7rem; line-height: 1.5; }
.pathway-card b { display: flex; align-items: center; gap: 6px; font-size: .65rem; }.pathway-card b .icon { width: 14px; }
.pathway-card.warm { background: linear-gradient(145deg,#fff2f2,#fff9f2); }.pathway-card.cool { background: linear-gradient(145deg,#eef8ff,#f5f2ff); }.pathway-card.lime { background: linear-gradient(145deg,#f4fbe3,#effaf6); }.pathway-card.violet { background: linear-gradient(145deg,#f3f0ff,#fff); }
.portal-event-section { padding-block: 78px; background: #111827; }
.portal-event-section .event-intro { position: sticky; top: 190px; }
.portal-event-section .event-intro h2 { color: #fff; }
.portal-event-section .event-intro p { color: #9da8bb; }
.event-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }.event-actions > a:not(.button) { color: #bfc7d5; font-size: .7rem; font-weight: 720; }
.portal-event-section .event-list { gap: 8px; }
.portal-event-section .event-card { border-color: #30394c; background: #1a2233; box-shadow: none; }
.portal-event-section .event-card:hover { border-color: #536078; }
.portal-event-section .event-copy h3, .portal-event-section .event-date strong { color: #fff; }
.portal-event-section .event-copy p, .portal-event-section .event-date, .portal-event-section .event-meta { color: #9da8bb; }
.portal-event-section .event-logo { border-color: #354057; background: #252e41; }
.people-preview { padding-block: 76px; }
.inline-links { display: flex; gap: 8px; }.inline-links a { padding: 8px 11px; border: 1px solid var(--line); background: #fff; border-radius: 8px; color: var(--violet-dark); font-size: .66rem; font-weight: 750; }
.people-columns { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.people-columns > div { overflow: hidden; border: 1px solid var(--line); background: #fff; border-radius: 15px; }
.people-column-title { display: grid; grid-template-columns: 23px 1fr auto; align-items: center; gap: 9px; padding: 15px; border-bottom: 1px solid var(--line); }
.people-column-title > .icon { color: var(--violet); }.people-column-title h3 { margin: 0; font-size: .9rem; }.people-column-title a { color: var(--violet-dark); font-size: .62rem; font-weight: 750; }
.people-list > a { display: grid; grid-template-columns: 46px 1fr 17px; align-items: center; gap: 11px; padding: 10px 15px; border-bottom: 1px solid var(--line); }.people-list > a:last-child { border-bottom: 0; }.people-list > a:hover { background: #f8f9fc; }
.people-avatar { display: grid; width: 46px; height: 46px; place-items: center; overflow: hidden; border: 1px solid var(--line); background: #f5f6fa; border-radius: 10px; }.people-avatar img { width: 40px; height: 40px; object-fit: contain; }.people-avatar b { font-size: .7rem; }
.people-list strong, .people-list small { display: block; }.people-list strong { font-size: .74rem; }.people-list small { color: var(--muted); font-size: .6rem; }.people-list > a > .icon { width: 15px; color: #a1a9b7; }
.home-playbook { padding-block: 76px; }
.playbook-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 13px; }
.playbook-card { overflow: hidden; min-width: 0; border: 1px solid var(--line); background: #fff; border-radius: 15px; }
.playbook-card.featured { grid-row: span 2; }
.playbook-card a { display: grid; grid-template-columns: 115px 1fr; height: 100%; }
.playbook-card.featured a { display: flex; flex-direction: column; }
.playbook-card img, .playbook-graphic { width: 115px; height: 100%; min-height: 150px; object-fit: cover; }.playbook-card.featured img { width: 100%; height: 235px; }.playbook-graphic { display: grid; place-items: center; color: var(--violet); background: var(--violet-soft); }.playbook-graphic .icon { width: 38px; height: 38px; }
.playbook-card a > div { padding: 14px; }.playbook-card small { color: var(--violet); font-size: .55rem; font-weight: 850; text-transform: uppercase; }.playbook-card h3 { margin: 5px 0 7px; font-size: 1rem; }.playbook-card p { display: -webkit-box; overflow: hidden; margin-bottom: 9px; font-size: .64rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }.playbook-card b { display: flex; align-items: center; gap: 5px; color: var(--violet-dark); font-size: .61rem; }.playbook-card b .icon { width: 14px; }
.session-map { padding-block: 80px; }
.session-map ol { display: grid; grid-template-columns: repeat(3,1fr); margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); background: #fff; border-radius: 16px; }
.session-map li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 24px; border-right: 1px solid var(--line); }.session-map li:last-child { border-right: 0; }.session-map li > span { display: grid; width: 36px; height: 36px; place-items: center; color: #fff; background: var(--violet); border-radius: 10px; font-size: .8rem; font-weight: 850; }.session-map h3 { margin: 3px 0 8px; font-size: 1rem; }.session-map p { margin: 0; font-size: .7rem; line-height: 1.55; }

/* Footer and privacy ------------------------------------------------------ */
.portal-footer { background: #08111f; }
.footer-spotlight { border-bottom: 1px solid #293144; background: linear-gradient(120deg,#171e30,#121827); }
.footer-spotlight > .wrap { display: grid; grid-template-columns: 1fr 410px; align-items: center; gap: 45px; padding-block: 46px; }
.footer-spotlight h2 { max-width: 650px; margin: 0; color: #fff; font-size: clamp(1.8rem,3vw,2.8rem); }
.footer-spotlight form { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 8px; padding: 6px 6px 6px 13px; background: #fff; border-radius: 11px; }.footer-spotlight form .icon { color: #6f788a; }.footer-spotlight input { min-width: 0; border: 0; outline: 0; font-size: .75rem; }.footer-spotlight button { min-height: 36px; padding: 0 13px; color: #fff; border: 0; background: var(--violet); border-radius: 8px; font-size: .7rem; font-weight: 750; }
.portal-footer .footer-grid { grid-template-columns: 1.8fr repeat(4,1fr); gap: 38px; padding-block: 48px; }
.portal-footer .footer-brand p { margin-bottom: 14px; }.footer-email { display: flex; align-items: center; gap: 7px; color: #d6dce8 !important; }.footer-email .icon { width: 15px; }
.privacy-link { padding: 4px 0; color: #9ba4b7; border: 0; background: transparent; cursor: pointer; text-align: left; font-size: .76rem; }.privacy-link:hover { color: #fff; }
.portal-footer .footer-bottom > div { display: flex; gap: 16px; }
.privacy-banner { position: fixed; z-index: 500; left: 50%; bottom: 18px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; width: min(calc(100% - 28px),900px); gap: 22px; padding: 18px 20px; border: 1px solid #303a50; color: #fff; background: rgba(16,22,37,.97); border-radius: 15px; box-shadow: 0 24px 70px rgba(0,0,0,.28); transform: translateX(-50%); backdrop-filter: blur(15px); }
.privacy-banner strong { font-size: .82rem; }.privacy-banner p { margin: 4px 0 0; color: #aeb7c7; font-size: .67rem; line-height: 1.5; }.privacy-actions { display: flex; align-items: center; gap: 7px; }.privacy-actions .button { min-height: 38px; padding: 0 12px; font-size: .65rem; }.privacy-actions .button-ghost { color: #fff; border-color: #49546a; background: #20283a; }.privacy-actions > a { margin-left: 4px; color: #b7c0d1; font-size: .62rem; text-decoration: underline; }

@media (max-width: 1080px) {
  .utility-inner nav a:nth-child(-n+2) { display: none; }
  .header-main { grid-template-columns: 145px minmax(260px,1fr) auto; gap: 16px; }
  .header-main .brand img { width: 138px; }
  .live-cta { display: none; }
  .portal-header .menu-button { display: grid; }
  .portal-header .desktop-nav { display: none; }
  .portal-header .mobile-nav { inset: 111px 0 0; }
  .portal-hero-grid { grid-template-columns: 1fr 390px; gap: 35px; }
  .finder-fields { grid-template-columns: 1fr 1fr; }
  .finder-fields button { min-height: 48px; justify-content: center; }
  .portal-game-grid { grid-template-columns: repeat(3,1fr); }
  .pathway-grid { grid-template-columns: repeat(2,1fr); }
  .pathway-card { min-height: 230px; }
  .playbook-grid { grid-template-columns: 1.2fr 1fr; }
  .portal-footer .footer-grid { grid-template-columns: 1.6fr repeat(2,1fr); }
}

@media (max-width: 820px) {
  .header-utility { display: none; }
  .header-main { grid-template-columns: 132px 1fr auto; min-height: 67px; }
  .header-search { min-height: 42px; }
  .header-search button, .header-search kbd { display: none; }
  .portal-header .mobile-nav { inset: 67px 0 0; }
  .mobile-nav-groups { grid-template-columns: repeat(2,1fr); }
  .mobile-popular { grid-column: 1 / -1; }
  .mobile-popular { display: grid; grid-template-columns: repeat(2,1fr); column-gap: 16px; }.mobile-popular h2 { grid-column: 1 / -1; }
  .portal-hero { padding-top: 38px; }
  .portal-hero-grid { grid-template-columns: 1fr; }
  .portal-hero h1 { font-size: clamp(3.7rem,13vw,6rem); }
  .hero-showcase { max-width: 620px; transform: none; }
  .quick-rail-inner { grid-template-columns: repeat(2,1fr); }.quick-rail-inner > a:nth-child(2) { border-right: 0; }.quick-rail-inner > a:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.quick-rail-inner > a:first-child { padding-left: 18px; }
  .portal-game-grid { grid-template-columns: repeat(2,1fr); }
  .people-columns { grid-template-columns: 1fr; }
  .portal-event-section .event-intro { position: static; }
  .session-map ol { grid-template-columns: 1fr; }.session-map li { border-right: 0; border-bottom: 1px solid var(--line); }.session-map li:last-child { border-bottom: 0; }
  .footer-spotlight > .wrap { grid-template-columns: 1fr; gap: 24px; }.footer-spotlight form { max-width: 520px; }
  .portal-footer .footer-grid { grid-template-columns: repeat(2,1fr); }.portal-footer .footer-brand { grid-column: 1 / -1; }
  .privacy-banner { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 580px) {
  body { padding-bottom: 67px; }
  .wrap, .narrow { width: min(calc(100% - 26px),var(--wrap)); }
  .header-main { grid-template-columns: 118px 1fr 42px; gap: 9px; min-height: 62px; }
  .header-main .brand img { width: 116px; }
  .header-search { grid-template-columns: 18px 1fr; min-height: 39px; padding-left: 11px; }.header-search input { font-size: .72rem; }.header-search input::placeholder { color: transparent; }
  .portal-header .mobile-nav { inset: 62px 0 0; }
  .mobile-nav-groups { grid-template-columns: 1fr; }.mobile-popular { grid-column: auto; grid-template-columns: 1fr 1fr; }
  .mobile-bottom-nav { position: fixed; z-index: 180; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5,1fr); min-height: 64px; padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--line); background: rgba(255,255,255,.96); box-shadow: 0 -8px 25px rgba(17,24,39,.08); backdrop-filter: blur(14px); }
  .mobile-bottom-nav a { display: flex; justify-content: center; align-items: center; gap: 3px; flex-direction: column; color: #737c8e; font-size: .52rem; font-weight: 720; }.mobile-bottom-nav .icon { width: 19px; height: 19px; }.mobile-bottom-nav a[aria-current="page"] { color: var(--violet); }
  .portal-hero { padding: 31px 0 36px; }
  .hero-live-line { margin-bottom: 13px; font-size: .62rem; }
  .portal-hero h1 { font-size: clamp(3.15rem,15vw,4.7rem); }
  .portal-hero-copy > p { font-size: .9rem; }
  .game-finder { padding: 13px; }
  .finder-fields { grid-template-columns: 1fr; }.finder-fields label { padding: 8px 10px; }.finder-fields button { min-height: 44px; }
  .hero-trending { display: none; }
  .hero-showcase { grid-template-columns: 1fr 1fr; gap: 7px; }.showcase-main { height: 220px; }.hero-showcase > a:not(.showcase-main), .showcase-count { height: 106px; }.showcase-count { padding: 12px; }.showcase-count strong { font-size: 1.6rem; }
  .quick-rail-inner > a { grid-template-columns: 34px 1fr 13px; gap: 8px; padding: 12px 10px; }.quick-rail-inner > a:first-child { padding-left: 10px; }.rail-icon { width: 34px; height: 34px; }.quick-rail strong { font-size: .66rem; }.quick-rail small { font-size: .53rem; }
  .section-compact, .portal-pathways, .people-preview, .home-playbook, .session-map { padding-block: 52px; }
  .home-match-tabs { width: 100%; }.home-match-tabs button { flex: 1; justify-content: center; padding-inline: 5px; }
  .portal-game-grid { grid-template-columns: 1fr; }.portal-game-grid .game-card { display: grid; grid-template-columns: 1fr; }.game-card .game-art { height: 174px; }
  .pathway-grid { grid-template-columns: 1fr; }.pathway-card { min-height: 220px; }.pathway-card > span { margin-bottom: 28px; }
  .inline-links { width: 100%; }.inline-links a { flex: 1; text-align: center; }
  .playbook-grid { grid-template-columns: 1fr; }.playbook-card.featured { grid-row: auto; }.playbook-card.featured a { display: grid; grid-template-columns: 115px 1fr; }.playbook-card.featured img { width: 115px; height: 100%; min-height: 150px; }
  .footer-spotlight > .wrap { padding-block: 35px; }.portal-footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 27px 18px; }.portal-footer .footer-bottom { padding-bottom: 28px; }
  .privacy-banner { bottom: 78px; padding: 15px; }.privacy-actions { flex-wrap: wrap; }.privacy-actions > a { width: 100%; margin: 3px 0 0; }
}

@media print {
  .header-utility, .nav-shell, .mobile-bottom-nav, .privacy-banner, .footer-spotlight { display: none !important; }
}

/* Game hubs and topic pages ---------------------------------------------- */
.game-hub-hero, .game-topic-hero, .profile-hero, .match-center-hero { position: relative; overflow: hidden; color: #fff; background: #131a2a; }
.game-hub-backdrop, .game-topic-backdrop { position: absolute; inset: 0; }
.game-hub-backdrop::after, .game-topic-backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(12,17,29,.98) 0%,rgba(12,17,29,.9) 45%,rgba(12,17,29,.66) 100%); }
.game-hub-backdrop img, .game-topic-backdrop img { width: 100%; height: 100%; object-fit: cover; filter: blur(18px) saturate(.85); transform: scale(1.12); opacity: .48; }
.game-hub-hero-grid { position: relative; display: grid; grid-template-columns: 390px minmax(0,1fr) 160px; align-items: center; gap: 42px; min-height: 480px; padding-block: 52px; }
.game-hub-art { overflow: hidden; border: 6px solid rgba(255,255,255,.95); border-radius: 20px; box-shadow: 0 22px 60px rgba(0,0,0,.35); transform: rotate(-1.5deg); }
.game-hub-art img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.game-hub-heading .eyebrow, .game-topic-hero .eyebrow { color: var(--lime); }
.game-hub-heading h1 { margin-bottom: 12px; color: #fff; font-size: clamp(3rem,5.3vw,5.5rem); }
.game-hub-heading > p { max-width: 680px; margin-bottom: 18px; color: #c2cad8; font-size: .95rem; }
.game-hub-heading .platform-row span, .game-topic-hero .platform-row span { color: #dbe1eb; border-color: #3f4a60; background: rgba(25,34,51,.75); }
.game-hub-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.game-hub-cta .button { min-height: 44px; font-size: .74rem; }.game-hub-cta .button .icon { width: 17px; }
.game-hub-cta .button-ghost { color: #fff; border-color: #465269; background: rgba(24,31,48,.8); }
.game-hub-facts { display: grid; gap: 1px; overflow: hidden; margin: 0; border: 1px solid #3b465b; background: #3b465b; border-radius: 13px; }
.game-hub-facts div { padding: 12px; background: rgba(23,31,47,.93); }.game-hub-facts dt { color: #8e9aaf; font-size: .53rem; text-transform: uppercase; }.game-hub-facts dd { margin: 3px 0 0; color: #fff; font-size: .68rem; font-weight: 750; }
.game-section-nav { position: sticky; z-index: 80; top: 158px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.97); backdrop-filter: blur(12px); }
.game-section-nav .wrap { display: flex; overflow-x: auto; scrollbar-width: none; }.game-section-nav .wrap::-webkit-scrollbar { display: none; }
.game-section-nav a { position: relative; flex: 0 0 auto; padding: 13px 14px; color: #677083; font-size: .68rem; font-weight: 730; }.game-section-nav a:hover, .game-section-nav a[aria-current="page"] { color: var(--violet-dark); }.game-section-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--game-accent,var(--violet)); }
.hub-shortcut-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.hub-shortcut-grid > a { display: grid; grid-template-columns: 42px 1fr 16px; align-items: center; gap: 11px; min-width: 0; padding: 15px; border: 1px solid var(--line); background: #fff; border-radius: 13px; box-shadow: var(--shadow-sm); }.hub-shortcut-grid > a:hover { border-color: #d5d0ff; box-shadow: var(--shadow-md); }
.hub-shortcut-grid > a > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 11px; }.hub-shortcut-grid > a > span .icon { width: 20px; }.hub-shortcut-grid .red { color: #dc3545; background: #fff0f2; }.hub-shortcut-grid .blue { color: #008bc5; background: #e8f8ff; }.hub-shortcut-grid .purple { color: #6758f5; background: #eeecff; }.hub-shortcut-grid .cyan { color: #0789a7; background: #e7fbff; }.hub-shortcut-grid .green { color: #15825d; background: #e8f8f1; }.hub-shortcut-grid .orange { color: #cf6c00; background: #fff3e5; }.hub-shortcut-grid .gold { color: #9a7200; background: #fff8d7; }
.hub-shortcut-grid small, .hub-shortcut-grid h3, .hub-shortcut-grid p { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.hub-shortcut-grid small { color: #929aab; font-size: .52rem; font-weight: 800; text-transform: uppercase; }.hub-shortcut-grid h3 { margin: 2px 0; font-size: .82rem; }.hub-shortcut-grid p { margin: 0; font-size: .58rem; }.hub-shortcut-grid > a > .icon { width: 15px; color: #9fa7b5; }
.game-story { padding-block: 74px; }.game-story-grid { display: grid; grid-template-columns: minmax(0,1.2fr) 410px; align-items: start; gap: 70px; }.game-story article h2 { margin: 0 0 14px; font-size: 2rem; }.game-story article p + h2 { margin-top: 37px; }.game-story article p { line-height: 1.78; }.game-story aside { overflow: hidden; border: 1px solid var(--line); background: #fff; border-radius: 16px; box-shadow: var(--shadow-sm); }.game-story aside img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }.game-story aside div { padding: 18px; }.game-story aside small { color: var(--violet); font-size: .58rem; font-weight: 850; text-transform: uppercase; }.game-story aside p { margin: 5px 0 0; font-size: .7rem; }
.hub-watch-grid { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--line); background: #fff; border-radius: 15px; }.hub-watch-grid > div { padding: 21px; border-right: 1px solid var(--line); }.hub-watch-grid > div:last-child { border-right: 0; }.hub-watch-grid span { color: var(--game-accent,var(--violet)); font-size: .63rem; font-weight: 850; }.hub-watch-grid h3 { margin: 30px 0 9px; font-size: 1rem; }.hub-watch-grid p { margin: 0; font-size: .65rem; line-height: 1.5; }
.game-improve { color: #fff; background: linear-gradient(120deg,#111827,#1c2440); }.game-improve-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 70px; }.game-improve h2 { color: #fff; }.game-improve p { color: #b0bacb; }.game-improve ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }.game-improve li { display: grid; grid-template-columns: 38px 1fr; gap: 12px; padding: 14px; border: 1px solid #343e53; background: #1b2437; border-radius: 11px; }.game-improve li > span { color: var(--lime); font-size: .6rem; font-weight: 850; }.game-improve li strong { font-size: .76rem; }.game-improve li p { margin: 3px 0 0; font-size: .62rem; }
.portal-guide-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }.portal-guide-list a { display: grid; grid-template-columns: 100px 1fr 18px; align-items: center; gap: 13px; padding: 8px; border: 1px solid var(--line); background: #fff; border-radius: 11px; }.portal-guide-list img { width: 100px; height: 56px; object-fit: cover; border-radius: 7px; }.portal-guide-list small, .portal-guide-list strong { display: block; }.portal-guide-list small { color: var(--violet); font-size: .55rem; }.portal-guide-list strong { margin-top: 3px; font-size: .73rem; }.portal-guide-list > a > .icon { width: 16px; color: var(--violet); }
.game-keywords > .wrap { display: grid; grid-template-columns: 300px 1fr; gap: 50px; }.game-keywords > .wrap > div:last-child { display: flex; flex-wrap: wrap; align-content: start; gap: 8px; }.game-keywords a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 11px; border: 1px solid var(--line); background: #fff; border-radius: 8px; font-size: .66rem; font-weight: 700; }.game-keywords a .icon { width: 14px; color: var(--violet); }

.game-topic-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 330px; align-items: center; gap: 75px; min-height: 420px; padding-block: 52px; }.game-topic-hero h1 { max-width: 820px; margin-bottom: 15px; color: #fff; font-size: clamp(2.8rem,5vw,4.7rem); }.game-topic-hero-grid > div > p { max-width: 720px; color: #c0c9d8; font-size: .91rem; }.game-topic-hero aside { overflow: hidden; border: 5px solid #fff; background: #fff; border-radius: 17px; box-shadow: 0 20px 55px rgba(0,0,0,.35); transform: rotate(1.5deg); }.game-topic-hero aside img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }.game-topic-hero aside a { display: flex; justify-content: space-between; align-items: center; padding: 12px; color: var(--ink); font-size: .68rem; font-weight: 800; }.game-topic-hero aside a .icon { width: 15px; color: var(--violet); }
.topic-live-area { min-height: 310px; }.topic-event-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; }.topic-event-list .event-card { margin: 0; }
.topic-entity-grid .entity-card { display: grid; }.topic-entity-grid .entity-card > span:last-child { min-width: 0; }.topic-entity-grid .entity-card h3 { overflow: hidden; margin: 3px 0; font-size: .92rem; text-overflow: ellipsis; white-space: nowrap; }.topic-entity-grid .entity-card p { margin: 0; font-size: .63rem; }.topic-entity-grid .entity-card strong { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: .6rem; }.topic-entity-grid .entity-card strong .icon { width: 13px; }
.topic-action-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 11px; }.topic-action-grid > a { display: grid; grid-template-columns: 42px 1fr; gap: 12px; min-height: 150px; padding: 18px; border: 1px solid var(--line); background: #fff; border-radius: 13px; }.topic-action-grid > a:hover { border-color: #d5d0ff; box-shadow: var(--shadow-md); }.topic-action-grid > a > span { display: grid; width: 42px; height: 42px; place-items: center; color: var(--violet); background: var(--violet-soft); border-radius: 11px; }.topic-action-grid small, .topic-action-grid strong, .topic-action-grid p { grid-column: 2; }.topic-action-grid small { align-self: end; color: var(--violet); font-size: .54rem; font-weight: 800; text-transform: uppercase; }.topic-action-grid strong { font-size: .8rem; }.topic-action-grid p { margin: 0; font-size: .62rem; }
.topic-tool-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 13px; }.topic-tool-grid > a { display: grid; grid-template-columns: 75px 1fr; gap: 17px; padding: 24px; border: 1px solid var(--line); background: #fff; border-radius: 15px; box-shadow: var(--shadow-sm); }.topic-tool-grid > a > span { display: grid; width: 75px; height: 75px; place-items: center; color: var(--violet); background: var(--violet-soft); border-radius: 17px; }.topic-tool-grid > a > span .icon { width: 33px; height: 33px; }.topic-tool-grid small { color: var(--violet); font-size: .57rem; font-weight: 800; text-transform: uppercase; }.topic-tool-grid h3 { margin: 5px 0 7px; }.topic-tool-grid p { margin-bottom: 9px; font-size: .69rem; }.topic-tool-grid b { display: flex; align-items: center; gap: 5px; color: var(--violet-dark); font-size: .64rem; }.topic-tool-grid b .icon { width: 14px; }
.ranked-dashboard { display: grid; grid-template-columns: .85fr 1.15fr; gap: 60px; align-items: center; padding: 35px; color: #fff; background: linear-gradient(130deg,#171e30,#302a7d); border-radius: 20px; }.ranked-dashboard h2 { color: #fff; }.ranked-dashboard p { color: #c4c9dd; }.ranked-dashboard ol { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }.ranked-dashboard li { padding: 17px; border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.06); border-radius: 11px; }.ranked-dashboard li span, .ranked-dashboard li strong, .ranked-dashboard li small { display: block; }.ranked-dashboard li span { color: var(--lime); font-size: .58rem; font-weight: 850; }.ranked-dashboard li strong { margin: 13px 0 5px; font-size: .75rem; }.ranked-dashboard li small { color: #acb5c7; font-size: .58rem; line-height: 1.45; }
.topic-guide-layout { display: grid; grid-template-columns: minmax(0,1fr) 330px; align-items: start; gap: 75px; }.topic-article > .section-kicker { margin-bottom: 25px; }.topic-article section { max-width: 780px; margin-bottom: 43px; }.topic-article section:last-child { margin-bottom: 0; }.topic-article h2 { margin-bottom: 15px; font-size: 2rem; }.topic-article p { font-size: .92rem; line-height: 1.82; }.topic-article p:last-child { margin-bottom: 0; }.topic-guide-layout > aside { position: sticky; top: 220px; display: grid; gap: 12px; }.topic-checklist, .topic-game-card { overflow: hidden; border: 1px solid var(--line); background: #fff; border-radius: 15px; box-shadow: var(--shadow-sm); }.topic-checklist { padding: 20px; }.topic-checklist > .icon { width: 32px; height: 32px; padding: 7px; color: var(--violet); background: var(--violet-soft); border-radius: 9px; }.topic-checklist > small { display: block; margin-top: 18px; color: var(--violet); font-size: .56rem; font-weight: 850; text-transform: uppercase; }.topic-checklist h2 { margin: 4px 0 13px; font-size: 1.25rem; }.topic-checklist ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }.topic-checklist li { display: grid; grid-template-columns: 15px 1fr; gap: 7px; color: #50596b; font-size: .66rem; }.topic-checklist li .icon { width: 14px; color: var(--violet); }.topic-game-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }.topic-game-card > div { padding: 17px; }.topic-game-card small { color: var(--violet); font-size: .55rem; font-weight: 800; text-transform: uppercase; }.topic-game-card h3 { margin: 5px 0 7px; }.topic-game-card p { margin-bottom: 10px; font-size: .64rem; }.topic-game-card a { display: flex; align-items: center; gap: 5px; color: var(--violet-dark); font-size: .62rem; font-weight: 750; }.topic-game-card a .icon { width: 14px; }
.topic-faq { max-width: 980px; }.faq-list { display: grid; gap: 8px; }.faq-list details { border: 1px solid var(--line); background: #fff; border-radius: 11px; }.faq-list summary { display: flex; justify-content: space-between; gap: 20px; padding: 16px 18px; cursor: pointer; list-style: none; font-size: .78rem; font-weight: 750; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary span { color: var(--violet); font-size: 1rem; }.faq-list details[open] summary span { transform: rotate(45deg); }.faq-list p { margin: 0; padding: 0 18px 17px; font-size: .72rem; }
.related-game-paths > .wrap > div:last-child { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }.related-game-paths a { display: grid; grid-template-columns: 22px 1fr 15px; align-items: center; gap: 9px; padding: 13px; border: 1px solid var(--line); background: #fff; border-radius: 10px; font-size: .7rem; }.related-game-paths a .icon:first-child { color: var(--violet); }.related-game-paths a .icon:last-child { width: 14px; color: #9ca5b5; }

/* Match Center ----------------------------------------------------------- */
.match-center-hero { padding-block: 58px; background: radial-gradient(circle at 85% 10%,rgba(103,88,245,.35),transparent 30%),linear-gradient(120deg,#121827,#202945); }.match-center-hero-grid { display: grid; grid-template-columns: 1fr 390px; align-items: center; gap: 70px; }.match-center-hero .eyebrow { color: var(--lime); }.match-center-hero h1 { color: #fff; font-size: clamp(3.3rem,6vw,5.7rem); }.match-center-hero h1 em { color: #9b91ff; font-style: normal; }.match-center-hero p { max-width: 690px; color: #b6c0d2; }.hero-match-stats { display: flex; gap: 34px; margin-top: 26px; }.hero-match-stats div { display: flex; flex-direction: column; }.hero-match-stats strong { color: #fff; font-size: 1.5rem; }.hero-match-stats span { color: #8995aa; font-size: .57rem; text-transform: uppercase; }.match-center-hero aside { padding: 25px; border: 1px solid #3a4560; background: rgba(20,27,43,.9); border-radius: 17px; box-shadow: 0 22px 50px rgba(0,0,0,.2); }.match-center-hero aside > small { color: var(--lime); font-size: .57rem; font-weight: 800; text-transform: uppercase; }.match-center-hero aside > span:not(.match-center-empty-icon) { display: block; margin-top: 24px; color: #8f9bb0; font-size: .6rem; }.match-center-hero aside h2 { margin: 5px 0 14px; color: #fff; font-size: 1.5rem; }.match-center-hero aside time { color: #c3cbd9; font-size: .68rem; }.match-center-hero aside > a { display: flex; align-items: center; gap: 6px; margin-top: 22px; color: #fff; font-size: .67rem; font-weight: 800; }.match-center-hero aside > a .icon { width: 15px; color: var(--lime); }.match-center-empty-icon { display: grid !important; width: 50px; height: 50px; margin-bottom: 18px; place-items: center; color: var(--lime); background: #283247; border-radius: 13px; }
.match-filter-panel { margin-bottom: 24px; border: 1px solid var(--line); background: #fff; border-radius: 14px; box-shadow: var(--shadow-sm); }.filter-panel-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 12px 15px; border-bottom: 1px solid var(--line); }.filter-panel-top > div { display: grid; grid-template-columns: 28px auto auto; align-items: center; gap: 8px; }.filter-panel-top > div > span { display: grid; width: 28px; height: 28px; place-items: center; color: var(--violet); background: var(--violet-soft); border-radius: 8px; }.filter-panel-top > div .icon { width: 15px; }.filter-panel-top strong { font-size: .72rem; }.filter-panel-top small { color: var(--muted); font-size: .58rem; }.filter-panel-top > a { display: flex; align-items: center; gap: 5px; color: var(--violet-dark); font-size: .62rem; font-weight: 750; }.filter-panel-top > a .icon { width: 14px; }.filter-panel-fields { display: grid; grid-template-columns: auto 240px minmax(220px,1fr); align-items: center; gap: 15px; padding: 13px 15px; }.filter-panel-fields .filter-group { display: flex; padding: 3px; border: 1px solid var(--line); background: #f5f6fa; border-radius: 9px; }.filter-panel-fields .filter-group button { display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px; border: 0; background: transparent; border-radius: 6px; cursor: pointer; color: var(--muted); font-size: .64rem; font-weight: 730; }.filter-panel-fields .filter-group button.is-active { color: var(--ink); background: #fff; box-shadow: 0 1px 5px rgba(17,24,39,.08); }.filter-panel-fields .filter-group i { width: 6px; height: 6px; background: var(--danger); border-radius: 50%; }.filter-panel-fields > label { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; border: 1px solid var(--line); background: #f9fafc; border-radius: 9px; }.filter-panel-fields > label > span { color: #8a93a4; font-size: .55rem; font-weight: 800; text-transform: uppercase; }.filter-panel-fields select, .filter-panel-fields input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; font-size: .65rem; font-weight: 690; }.match-game-links > .wrap > div:last-child { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; }.match-game-links > .wrap > div:last-child > a { display: grid; grid-template-columns: 62px 1fr 14px; align-items: center; gap: 8px; min-width: 0; padding: 7px; border: 1px solid var(--line); background: #fff; border-radius: 9px; }.match-game-links img { width: 62px; height: 35px; object-fit: cover; border-radius: 5px; }.match-game-links strong, .match-game-links small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.match-game-links strong { font-size: .61rem; }.match-game-links small { color: var(--muted); font-size: .5rem; }.match-game-links .icon { width: 13px; color: #9aa3b3; }.match-how > div:last-child { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); background: #fff; border-radius: 15px; }.match-how article { padding: 25px; border-right: 1px solid var(--line); }.match-how article:last-child { border-right: 0; }.match-how article > span { color: var(--violet); font-size: .62rem; font-weight: 850; }.match-how h3 { margin: 27px 0 9px; font-size: 1rem; }.match-how p { margin: 0; font-size: .69rem; }

/* Team and player profiles ----------------------------------------------- */
.profile-hero { padding-block: 58px; background: radial-gradient(circle at 90% 10%,rgba(103,88,245,.3),transparent 28%),linear-gradient(120deg,#121827,#202942); }.profile-hero-grid { display: grid; grid-template-columns: 170px minmax(0,1fr) 260px; align-items: center; gap: 38px; }.profile-photo { display: grid; width: 170px; height: 170px; place-items: center; overflow: hidden; border: 5px solid #fff; background: #242e42; border-radius: 26px; box-shadow: 0 18px 45px rgba(0,0,0,.3); }.profile-photo img { width: 90%; height: 90%; object-fit: contain; }.profile-photo b { font-size: 2.3rem; }.profile-heading .eyebrow { color: var(--lime); }.profile-heading h1 { margin-bottom: 8px; color: #fff; font-size: clamp(3rem,5vw,5rem); }.profile-heading > p { color: #aeb9cb; }.profile-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }.profile-actions .button { min-height: 42px; font-size: .7rem; }.profile-actions .button-ghost { color: #fff; border-color: #465169; background: rgba(23,31,48,.7); }.profile-facts { display: grid; overflow: hidden; margin: 0; border: 1px solid #3a465d; background: #3a465d; border-radius: 13px; }.profile-facts div { padding: 13px; background: rgba(24,32,49,.95); }.profile-facts dt { color: #8f9aae; font-size: .53rem; text-transform: uppercase; }.profile-facts dd { margin: 3px 0 0; color: #fff; font-size: .68rem; font-weight: 750; }.profile-nav { position: sticky; z-index: 79; top: 158px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.97); }.profile-nav .wrap { display: flex; overflow-x: auto; }.profile-nav a { flex: 0 0 auto; padding: 13px 15px; color: var(--muted); font-size: .67rem; font-weight: 730; }.profile-nav a:hover { color: var(--violet); }.profile-main { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 75px; }.profile-main article h2 { font-size: 2rem; }.profile-main article p { line-height: 1.8; }.profile-side-card { padding: 20px; border: 1px solid var(--line); background: #fff; border-radius: 15px; box-shadow: var(--shadow-sm); }.profile-side-card > span { display: grid; width: 42px; height: 42px; place-items: center; color: var(--violet); background: var(--violet-soft); border-radius: 11px; }.profile-side-card > small { display: block; margin-top: 18px; color: var(--violet); font-size: .56rem; font-weight: 800; text-transform: uppercase; }.profile-side-card dl { margin: 9px 0 0; }.profile-side-card dl div { display: flex; justify-content: space-between; gap: 15px; padding: 9px 0; border-top: 1px solid var(--line); font-size: .66rem; }.profile-side-card dt { color: var(--muted); }.profile-side-card dd { margin: 0; font-weight: 730; text-align: right; }.profile-roster { display: grid; grid-template-columns: repeat(3,1fr); gap: 11px; }.profile-roster > a { display: grid; grid-template-columns: 70px 1fr; gap: 13px; padding: 13px; border: 1px solid var(--line); background: #fff; border-radius: 12px; }.profile-roster > a > span { display: grid; width: 70px; height: 70px; place-items: center; overflow: hidden; border: 1px solid var(--line); background: #f5f6f9; border-radius: 11px; }.profile-roster img { width: 64px; height: 64px; object-fit: contain; }.profile-roster small { color: var(--violet); font-size: .54rem; font-weight: 800; text-transform: uppercase; }.profile-roster h3 { margin: 3px 0; font-size: .85rem; }.profile-roster p { margin: 0; font-size: .58rem; }.profile-roster strong { display: flex; align-items: center; gap: 5px; margin-top: 7px; color: var(--violet-dark); font-size: .57rem; }.profile-roster strong .icon { width: 13px; }.profile-events { max-width: 850px; }.profile-about { display: grid; grid-template-columns: 320px 1fr; gap: 70px; }.profile-about p { line-height: 1.75; }.profile-about a { color: var(--violet-dark); text-decoration: underline; }

@media (max-width: 1080px) {
  .game-section-nav, .profile-nav { top: 111px; }
  .game-hub-hero-grid { grid-template-columns: 320px 1fr; }.game-hub-facts { grid-column: 1 / -1; grid-template-columns: repeat(4,1fr); }
  .hub-shortcut-grid { grid-template-columns: repeat(3,1fr); }
  .game-story-grid { grid-template-columns: 1fr 340px; gap: 40px; }
  .game-topic-hero-grid { grid-template-columns: 1fr 290px; gap: 45px; }
  .topic-guide-layout { gap: 45px; }
  .match-game-links > .wrap > div:last-child { grid-template-columns: repeat(3,1fr); }
  .profile-hero-grid { grid-template-columns: 150px 1fr 230px; }.profile-photo { width: 150px; height: 150px; }.profile-main { gap: 45px; }
}

@media (max-width: 820px) {
  .game-section-nav, .profile-nav { top: 67px; }
  .game-hub-hero-grid { grid-template-columns: 260px 1fr; gap: 26px; min-height: 400px; }.game-hub-heading h1 { font-size: 3.4rem; }.game-hub-facts { grid-template-columns: repeat(4,1fr); }
  .hub-shortcut-grid { grid-template-columns: repeat(2,1fr); }
  .game-story-grid, .game-improve-grid, .topic-guide-layout, .profile-main { grid-template-columns: 1fr; gap: 35px; }.game-story aside { max-width: 520px; }.topic-guide-layout > aside { position: static; grid-template-columns: 1fr 1fr; }
  .hub-watch-grid { grid-template-columns: repeat(2,1fr); }.hub-watch-grid > div:nth-child(2) { border-right: 0; }.hub-watch-grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .game-keywords > .wrap { grid-template-columns: 1fr; gap: 20px; }
  .game-topic-hero-grid { grid-template-columns: 1fr; }.game-topic-hero aside { display: none; }
  .topic-action-grid { grid-template-columns: repeat(2,1fr); }.topic-event-list { grid-template-columns: 1fr; }.ranked-dashboard { grid-template-columns: 1fr; gap: 30px; }
  .match-center-hero-grid { grid-template-columns: 1fr; gap: 35px; }.match-center-hero aside { max-width: 520px; }.filter-panel-fields { grid-template-columns: 1fr 1fr; }.filter-panel-fields .filter-group { grid-column: 1 / -1; }.match-game-links > .wrap > div:last-child { grid-template-columns: repeat(2,1fr); }
  .profile-hero-grid { grid-template-columns: 120px 1fr; }.profile-photo { width: 120px; height: 120px; }.profile-facts { grid-column: 1 / -1; grid-template-columns: repeat(3,1fr); }.profile-roster { grid-template-columns: repeat(2,1fr); }.profile-about { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 580px) {
  .game-section-nav, .profile-nav { top: 62px; }
  .game-hub-hero-grid { grid-template-columns: 1fr; padding-block: 31px; }.game-hub-art { width: 170px; border-width: 4px; }.game-hub-heading h1 { font-size: 3rem; }.game-hub-heading > p { font-size: .82rem; }.game-hub-facts { grid-template-columns: repeat(2,1fr); }
  .game-section-nav a { padding: 11px 12px; font-size: .62rem; }
  .hub-shortcut-grid { grid-template-columns: 1fr; }.hub-shortcut-grid > a { padding: 12px; }
  .game-story { padding-block: 50px; }.game-story article h2, .topic-article h2 { font-size: 1.65rem; }.game-story article p, .topic-article p { font-size: .82rem; }
  .hub-watch-grid { grid-template-columns: 1fr; }.hub-watch-grid > div { border-right: 0; border-bottom: 1px solid var(--line); }.hub-watch-grid > div:last-child { border-bottom: 0; }
  .portal-guide-list { grid-template-columns: 1fr; }
  .game-topic-hero-grid { min-height: 360px; padding-block: 38px; }.game-topic-hero h1 { font-size: 2.7rem; }.game-topic-hero-grid > div > p { font-size: .8rem; }
  .topic-action-grid, .topic-tool-grid { grid-template-columns: 1fr; }.topic-tool-grid > a { grid-template-columns: 58px 1fr; padding: 17px; }.topic-tool-grid > a > span { width: 58px; height: 58px; }.ranked-dashboard { padding: 22px; }.ranked-dashboard ol { grid-template-columns: 1fr; }.topic-guide-layout > aside { grid-template-columns: 1fr; }.related-game-paths > .wrap > div:last-child { grid-template-columns: repeat(2,1fr); }
  .match-center-hero { padding-block: 42px; }.match-center-hero h1 { font-size: 3rem; }.hero-match-stats { gap: 20px; }.filter-panel-top small { display: none; }.filter-panel-fields { grid-template-columns: 1fr; }.filter-panel-fields .filter-group { grid-column: auto; }.filter-panel-fields .filter-group button { flex: 1; justify-content: center; padding-inline: 5px; }.match-game-links > .wrap > div:last-child { grid-template-columns: 1fr; }.match-how > div:last-child { grid-template-columns: 1fr; }.match-how article { border-right: 0; border-bottom: 1px solid var(--line); }.match-how article:last-child { border-bottom: 0; }
  .profile-hero { padding-block: 39px; }.profile-hero-grid { grid-template-columns: 90px 1fr; gap: 18px; }.profile-photo { width: 90px; height: 90px; border-width: 3px; border-radius: 18px; }.profile-heading h1 { font-size: 2.6rem; }.profile-heading .eyebrow { margin-bottom: 8px; }.profile-heading > p { font-size: .7rem; }.profile-actions { grid-column: 1 / -1; }.profile-facts { grid-template-columns: 1fr; }.profile-main article p { font-size: .82rem; }.profile-roster { grid-template-columns: 1fr; }
}

/* Match and event details ------------------------------------------------ */
.match-detail-hero { position: relative; overflow: hidden; padding-block: 50px; color: #fff; background: radial-gradient(circle at 50% 120%,#3b329f,#151b2a 55%); }.match-detail-backdrop { position: absolute; inset: 0; }.match-detail-backdrop::after { content: ""; position: absolute; inset: 0; background: rgba(13,19,32,.84); }.match-detail-backdrop img { width: 100%; height: 100%; object-fit: cover; filter: blur(18px); transform: scale(1.1); opacity: .45; }.match-detail-hero > .wrap { position: relative; }.match-detail-hero .match-detail-meta { margin-bottom: 14px; }.match-detail-title { margin: 0 0 30px; color: #fff; text-align: center; font-size: clamp(1.55rem,3vw,2.7rem); }.match-detail-hero .versus-team > a { display: grid; justify-items: center; }.match-detail-hero .versus-team h2 { color: #fff; }.match-detail-hero .entity-image-large { border-color: #4a566d; background: #222c40; }.match-detail-nav { position: sticky; z-index: 79; top: 158px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.97); }.match-detail-nav .wrap { display: flex; overflow-x: auto; }.match-detail-nav a { flex: 0 0 auto; padding: 13px 15px; color: var(--muted); font-size: .67rem; font-weight: 730; }.match-detail-nav a:hover { color: var(--violet); }
.match-info-main .fact-grid a { color: var(--violet-dark); }.match-watch-card { padding: 20px; color: #fff; background: linear-gradient(135deg,#202941,#302778); border-radius: 14px; }.match-watch-card > span { display: grid; width: 42px; height: 42px; place-items: center; color: var(--lime); background: rgba(255,255,255,.09); border-radius: 11px; }.match-watch-card small { display: block; margin-top: 17px; color: #b8c0d2; font-size: .55rem; text-transform: uppercase; }.match-watch-card h2 { margin: 4px 0 14px; color: #fff; font-size: 1.3rem; }.match-watch-card a { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-top: 1px solid rgba(255,255,255,.12); font-size: .68rem; font-weight: 730; }.match-watch-card a .icon { width: 15px; }.match-time-card { display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 10px; margin-top: 10px; padding: 14px; border: 1px solid var(--line); background: #fff; border-radius: 11px; }.match-time-card > .icon { width: 34px; height: 34px; padding: 7px; color: var(--violet); background: var(--violet-soft); border-radius: 9px; }.match-time-card small, .match-time-card strong { display: block; }.match-time-card small { color: var(--muted); font-size: .54rem; text-transform: uppercase; }.match-time-card strong { margin-top: 2px; font-size: .66rem; }
.match-next-paths { display: grid; grid-template-columns: 1.2fr repeat(3,1fr); gap: 10px; }.match-next-paths > div { padding-right: 25px; }.match-next-paths > a { display: grid; grid-template-columns: 32px 1fr 15px; align-items: center; gap: 9px; min-width: 0; padding: 14px; border: 1px solid var(--line); background: #fff; border-radius: 11px; }.match-next-paths > a > .icon:first-child { width: 25px; color: var(--violet); }.match-next-paths > a > .icon:last-child { width: 14px; color: #9ca5b5; }.match-next-paths strong, .match-next-paths small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.match-next-paths strong { font-size: .7rem; }.match-next-paths small { color: var(--muted); font-size: .54rem; }
.event-detail-hero { position: relative; overflow: hidden; min-height: 430px; color: #fff; background: #121827; }.event-detail-backdrop { position: absolute; inset: 0; }.event-detail-backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(13,19,32,.98),rgba(13,19,32,.82)); }.event-detail-backdrop img { width: 100%; height: 100%; object-fit: cover; filter: blur(22px); transform: scale(1.15); opacity: .5; }.event-detail-hero-grid { position: relative; display: grid; grid-template-columns: 1fr 260px; align-items: center; gap: 70px; min-height: 430px; padding-block: 50px; }.event-detail-hero .eyebrow { color: var(--lime); }.event-detail-hero h1 { max-width: 880px; margin-bottom: 12px; color: #fff; font-size: clamp(3rem,5.5vw,5.2rem); }.event-detail-hero-grid > div > p { color: #b7c0d0; }.event-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 23px; }.event-detail-actions .button { min-height: 43px; font-size: .7rem; }.event-detail-actions .button .icon { width: 17px; }.event-detail-actions .button-ghost { color: #fff; border-color: #465269; background: rgba(23,31,47,.75); }.event-detail-hero aside { display: grid; width: 240px; height: 240px; place-items: center; overflow: hidden; border: 6px solid #fff; background: #242d40; border-radius: 24px; box-shadow: 0 20px 55px rgba(0,0,0,.34); }.event-detail-hero aside img { width: 100%; height: 100%; object-fit: contain; }.event-detail-hero aside > span .icon { width: 80px; height: 80px; color: var(--lime); }
.event-detail-overview { display: grid; grid-template-columns: minmax(0,1fr) 340px; align-items: start; gap: 70px; }.event-detail-overview article > p { line-height: 1.78; }.event-game-promo { display: block; overflow: hidden; border: 1px solid var(--line); background: #fff; border-radius: 15px; box-shadow: var(--shadow-sm); }.event-game-promo img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }.event-game-promo > div { padding: 18px; }.event-game-promo small { color: var(--violet); font-size: .55rem; font-weight: 800; text-transform: uppercase; }.event-game-promo h2 { margin: 4px 0 8px; font-size: 1.4rem; }.event-game-promo p { font-size: .65rem; }.event-game-promo strong { display: flex; align-items: center; gap: 6px; color: var(--violet-dark); font-size: .63rem; }.event-game-promo strong .icon { width: 14px; }
.event-follow-grid { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--line); background: #fff; border-radius: 15px; }.event-follow-grid article { padding: 22px; border-right: 1px solid var(--line); }.event-follow-grid article:last-child { border-right: 0; }.event-follow-grid article > span { display: grid; width: 42px; height: 42px; place-items: center; color: var(--violet); background: var(--violet-soft); border-radius: 11px; }.event-follow-grid h3 { margin: 35px 0 9px; font-size: .95rem; }.event-follow-grid p { margin: 0; font-size: .65rem; }
@media (max-width: 1080px) { .match-detail-nav { top: 111px; }.match-next-paths { grid-template-columns: repeat(3,1fr); }.match-next-paths > div { grid-column: 1 / -1; }.event-detail-overview { gap: 40px; } }
@media (max-width: 820px) { .match-detail-nav { top: 67px; }.match-next-paths { grid-template-columns: 1fr 1fr; }.event-detail-overview { grid-template-columns: 1fr; }.event-game-promo { max-width: 430px; }.event-follow-grid { grid-template-columns: repeat(2,1fr); }.event-follow-grid article:nth-child(2) { border-right: 0; }.event-follow-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
@media (max-width: 580px) { .match-detail-nav { top: 62px; }.match-detail-hero { padding-block: 35px; }.match-detail-hero .match-detail-meta { justify-content: flex-start; flex-wrap: wrap; }.match-next-paths { grid-template-columns: 1fr; }.event-detail-hero-grid { grid-template-columns: 1fr; min-height: 390px; gap: 25px; padding-block: 38px; }.event-detail-hero h1 { font-size: 3rem; }.event-detail-hero aside { display: none; }.event-follow-grid { grid-template-columns: 1fr; }.event-follow-grid article { border-right: 0; border-bottom: 1px solid var(--line); }.event-follow-grid article:last-child { border-bottom: 0; } }

/* Brand and mobile visual corrections ----------------------------------- */
.portal-header .brand { display: inline-flex; align-items: center; gap: 9px; }
.portal-header .brand img { width: 44px; height: 44px; object-fit: contain; }
.portal-header .brand > span { color: var(--ink); font-size: 1.35rem; font-weight: 900; letter-spacing: -.07em; line-height: 1; }
.footer-brand-lockup { display: inline-flex; align-items: center; gap: 11px; margin-bottom: 20px; color: #fff; }
.footer-brand-lockup img { width: 52px; height: 52px; margin: 0; object-fit: contain; }
.footer-brand-lockup span { color: #fff; font-size: 1.55rem; font-weight: 900; letter-spacing: -.07em; line-height: 1; }
.event-filter-bar button.is-active { color: #fff; background: var(--violet); box-shadow: 0 5px 14px rgba(103,88,245,.22); }
.event-filter-bar button.is-active i { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.16); }
.game-hub-art { min-width: 0; }
.game-hub-art img { display: block; }
.game-story aside img, .topic-game-card img, .event-game-promo img { display: block; height: auto; }

@media (max-width: 1080px) {
  .portal-header .brand img { width: 42px; height: 42px; }
}

@media (max-width: 580px) {
  .portal-header .brand { gap: 7px; }
  .portal-header .brand img { width: 38px; height: 38px; }
  .portal-header .brand > span { font-size: 1.16rem; }
  .game-hub-hero-grid { grid-template-columns: minmax(0,1fr); min-height: 0; padding-block: 31px; }
  .game-hub-art { width: 100%; max-width: none; justify-self: stretch; border-width: 4px; border-radius: 15px; transform: none; }
  .game-hub-art img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
}

/* Live package expansion: richer cards, articles and working tool station -- */
.has-image-fallback {
  object-fit: contain !important;
  padding: clamp(12px, 8%, 44px);
  background: linear-gradient(145deg, #f1f7ff, #f7f2ff 55%, #fff4ed);
}

.page-hero-grid:has(.collection-hero-art), .page-hero-grid:has(.collection-hero-collage) { grid-template-columns: minmax(0,1fr) 390px; align-items: center; }
.collection-hero-art { position: relative; display: block; min-height: 230px; overflow: hidden; color: #fff; border: 6px solid rgba(255,255,255,.92); border-radius: 18px; box-shadow: 0 22px 55px rgba(9,14,28,.26); transform: rotate(1deg); }
.collection-hero-art::after { content: ""; position: absolute; inset: 30% 0 0; background: linear-gradient(transparent,rgba(8,13,24,.94)); }
.collection-hero-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.collection-hero-art > span { position: absolute; z-index: 2; right: 15px; bottom: 14px; left: 15px; }
.collection-hero-art small, .collection-hero-art strong, .collection-hero-art b { display: block; }.collection-hero-art small { color: #c8d0dd; font-size: .56rem; text-transform: uppercase; }.collection-hero-art strong { margin: 3px 0 7px; font-size: 1.1rem; }.collection-hero-art b { display: flex; align-items: center; gap: 6px; font-size: .6rem; }.collection-hero-art b .icon { width: 14px; }
.collection-hero-collage { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; transform: rotate(1deg); }
.collection-hero-collage a { position: relative; min-height: 108px; overflow: hidden; border: 4px solid rgba(255,255,255,.94); border-radius: 13px; box-shadow: 0 14px 34px rgba(9,14,28,.2); }
.collection-hero-collage a:first-child { grid-row: span 2; }.collection-hero-collage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }.collection-hero-collage a::after { content: ""; position: absolute; inset: 42% 0 0; background: linear-gradient(transparent,rgba(8,13,24,.9)); }.collection-hero-collage span { position: absolute; z-index: 2; right: 9px; bottom: 8px; left: 9px; overflow: hidden; color: #fff; font-size: .6rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.rank-visual-image { aspect-ratio: 16/10; border-radius: 18px; }.rank-visual-image::after { inset: 45% 0 0; background: linear-gradient(transparent,rgba(8,13,24,.9)); border-radius: 0; }.rank-visual-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }.rank-visual-image span { position: absolute; right: 16px; bottom: 13px; left: 16px; font-size: 1.1rem; }
.visual-guide-list { grid-template-columns: repeat(3,minmax(0,1fr)); }.visual-guide-list > a { display: block; overflow: hidden; padding: 0; }.visual-guide-list > a > img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }.visual-guide-list > a > div { padding: 17px; }.visual-guide-list strong, .visual-guide-list p, .visual-guide-list span { display: block; }.visual-guide-list strong { margin-top: 5px; }.visual-guide-list span { display: flex; align-items: center; gap: 6px; margin-top: 13px; }.visual-guide-list span .icon { width: 14px; }
.visual-comparison-grid > a { overflow: hidden; padding: 0; }.visual-comparison-grid > a > img { display: block; width: 100%; aspect-ratio: 16/7; object-fit: cover; }.visual-comparison-grid > a > div { padding: 23px; }.visual-comparison-grid strong { display: flex; align-items: center; gap: 6px; }.visual-comparison-grid strong .icon { width: 14px; }
.status-game-grid-visual a { grid-template-columns: 78px minmax(0,1fr) auto; padding: 7px; }.status-game-grid-visual img { width: 78px; height: 48px; object-fit: cover; border-radius: 7px; }

.schedule-note { margin: 13px 2px 0; color: #7d8798; font-size: .61rem; line-height: 1.45; }
.schedule-note.inverse { color: #8995aa; }
.default-avatar { grid-area: 1 / 1; opacity: .13; filter: saturate(.8); }
.team-mark b, .people-avatar b, .entity-image b, .profile-photo b { z-index: 2; grid-area: 1 / 1; }
.people-avatar .default-avatar, .team-mark .default-avatar { width: 76%; height: 76%; object-fit: contain; }
.entity-image .default-avatar, .profile-photo .default-avatar { width: 74%; height: 74%; object-fit: contain; }

.home-tool-station { background: linear-gradient(180deg,#fff,#fbfbff); }
.home-tool-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; }
.home-tool-grid > a { position: relative; display: flex; min-height: 270px; overflow: hidden; flex-direction: column; justify-content: flex-end; color: #fff; background: #121827; border-radius: 16px; box-shadow: 0 12px 32px rgba(24,30,48,.13); }
.home-tool-grid > a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(11,16,29,.05) 8%,rgba(11,16,29,.94) 76%); }
.home-tool-grid > a > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.home-tool-grid > a:hover > img { transform: scale(1.045); }
.home-tool-grid > a > span { position: absolute; z-index: 2; top: 14px; left: 14px; display: grid; width: 40px; height: 40px; place-items: center; color: var(--violet); background: rgba(255,255,255,.93); border-radius: 11px; box-shadow: 0 8px 18px rgba(8,13,24,.14); }
.home-tool-grid > a > span .icon { width: 20px; }
.home-tool-grid > a > div { position: relative; z-index: 2; padding: 17px; }
.home-tool-grid small { color: #b8c0d2; font-size: .54rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.home-tool-grid h3 { margin: 4px 0 7px; color: #fff; font-size: 1.08rem; }
.home-tool-grid p { margin: 0 0 10px; color: #c1c8d5; font-size: .65rem; line-height: 1.5; }
.home-tool-grid b { display: flex; align-items: center; gap: 6px; font-size: .61rem; }.home-tool-grid b .icon { width: 14px; }

.article-hero-rich { position: relative; overflow: hidden; padding: 56px 0; background: linear-gradient(135deg,#fff 55%,#f2f5ff); }
.article-hero-grid { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(360px,.72fr); align-items: center; gap: 70px; }
.article-hero-rich h1 { margin-bottom: 19px; font-size: clamp(2.7rem,5.4vw,5rem); }
.article-hero-rich figure { position: relative; overflow: hidden; margin: 0; border: 7px solid #fff; background: #141a29; border-radius: 22px; box-shadow: 0 24px 70px rgba(24,31,50,.18); transform: rotate(1.2deg); }
.article-hero-rich figure img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.article-hero-rich figcaption { position: absolute; right: 12px; bottom: 11px; left: 12px; padding: 8px 10px; color: #fff; background: rgba(13,19,33,.76); border-radius: 8px; backdrop-filter: blur(8px); font-size: .57rem; }
.aside-game-image { position: relative; display: block; min-height: 176px; overflow: hidden; padding: 0; background: #151b2a; }
.aside-game-image > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .58; }
.aside-game-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent,rgba(12,17,29,.94)); }
.aside-game-image > span { position: absolute; z-index: 2; right: 16px; bottom: 16px; left: 16px; display: grid; margin: 0; }
.aside-game-image > span small, .aside-game-image > span strong, .aside-game-image > span b { display: block; }
.aside-game-image > span b { margin-top: 8px; font-size: .65rem; }

.tools-portal-hero { overflow: hidden; padding: 58px 0; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 80% 15%,#dffbff,transparent 34%),radial-gradient(circle at 15% 90%,#eee9ff,transparent 37%),#fff; }
.tools-portal-grid { display: grid; grid-template-columns: minmax(0,1fr) 470px; align-items: center; gap: 80px; }
.tools-portal-grid h1 { margin: 11px 0 17px; font-size: clamp(3.2rem,5.8vw,5.6rem); letter-spacing: -.065em; }.tools-portal-grid h1 em { color: var(--violet); font-style: normal; }
.tools-portal-grid > div > p { max-width: 670px; font-size: 1rem; line-height: 1.65; }
.tool-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 25px; }.tool-hero-actions > a:not(.button) { color: var(--violet-dark); font-size: .7rem; font-weight: 760; }
.tools-hero-collage { display: grid; grid-template-columns: 1.12fr .88fr; grid-template-rows: repeat(2,150px); gap: 10px; }
.tools-hero-collage > a { position: relative; overflow: hidden; color: #fff; background: #141b2c; border: 5px solid #fff; border-radius: 16px; box-shadow: 0 16px 40px rgba(28,36,59,.16); }
.tools-hero-collage > a:first-child { grid-row: span 2; }.tools-hero-collage img { width: 100%; height: 100%; object-fit: cover; }.tools-hero-collage > a::after { content: ""; position: absolute; inset: 30% 0 0; background: linear-gradient(transparent,rgba(9,14,25,.9)); }
.tools-hero-collage span { position: absolute; z-index: 2; right: 12px; bottom: 12px; left: 12px; }.tools-hero-collage small, .tools-hero-collage strong { display: block; }.tools-hero-collage small { color: #c8cfda; font-size: .5rem; text-transform: uppercase; }.tools-hero-collage strong { font-size: .83rem; }

.tool-catalog-expanded { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.tool-catalog-expanded .tool-catalog-card { display: flex; min-width: 0; overflow: hidden; flex-direction: column; gap: 0; padding: 0; border-radius: 16px; box-shadow: none; }
.tool-card-visual { position: relative; height: 135px; overflow: hidden; background: #171e2e; }.tool-card-visual::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent,rgba(12,17,29,.78)); }.tool-card-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }.tool-catalog-card:hover .tool-card-visual img { transform: scale(1.04); }
.tool-card-visual > span { position: absolute; z-index: 2; top: 11px; left: 11px; display: grid; width: 36px; height: 36px; place-items: center; color: var(--violet); background: rgba(255,255,255,.94); border-radius: 10px; }.tool-card-visual > span .icon { width: 18px; }
.tool-catalog-expanded .tool-catalog-card > div:last-child { display: flex; flex: 1; flex-direction: column; padding: 16px; }.tool-catalog-expanded .tool-catalog-card h2 { margin: 4px 0 8px; font-size: 1.2rem; }.tool-catalog-expanded .tool-catalog-card p { font-size: .68rem; line-height: 1.5; }.tool-catalog-expanded .tool-catalog-card ul { margin: 6px 0 0; }.tool-catalog-expanded .tool-catalog-card strong { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 14px; }.tool-catalog-expanded .tool-catalog-card strong .icon { width: 14px; }
.tool-use-grid { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 75px; }.tool-use-grid > div > p { font-size: .9rem; line-height: 1.7; }.tool-use-grid ol { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); background: #fff; border-radius: 16px; }.tool-use-grid li { display: grid; grid-template-columns: 44px 1fr; gap: 15px; padding: 21px; border-bottom: 1px solid var(--line); }.tool-use-grid li:last-child { border-bottom: 0; }.tool-use-grid li > span { display: grid; width: 40px; height: 40px; place-items: center; color: #fff; background: var(--violet); border-radius: 11px; font-size: .67rem; font-weight: 850; }.tool-use-grid strong { font-size: .82rem; }.tool-use-grid li p { margin: 4px 0 0; font-size: .67rem; }
.tool-game-links { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }.tool-game-links > a { display: grid; grid-template-columns: 78px 1fr 15px; align-items: center; gap: 10px; overflow: hidden; padding: 7px; border: 1px solid var(--line); background: #fff; border-radius: 11px; }.tool-game-links img { width: 78px; height: 54px; object-fit: cover; border-radius: 7px; }.tool-game-links strong, .tool-game-links small { display: block; }.tool-game-links strong { font-size: .68rem; }.tool-game-links small { color: var(--muted); font-size: .53rem; }.tool-game-links > a > .icon { width: 14px; color: var(--violet); }

.toolkit-hero { position: relative; overflow: hidden; color: #fff; background: #111827; }.toolkit-hero-backdrop { position: absolute; inset: 0; }.toolkit-hero-backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(12,18,31,.98) 10%,rgba(12,18,31,.78) 65%,rgba(12,18,31,.9)); }.toolkit-hero-backdrop img { width: 100%; height: 100%; object-fit: cover; filter: blur(18px); opacity: .45; transform: scale(1.12); }
.toolkit-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 430px; align-items: center; gap: 80px; min-height: 460px; padding-block: 55px; }.toolkit-hero h1 { margin: 11px 0 16px; color: #fff; font-size: clamp(3.2rem,6vw,5.7rem); }.toolkit-hero-grid > div > p { max-width: 720px; color: #c3cad6; font-size: 1rem; line-height: 1.65; }.toolkit-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 24px; }.toolkit-badges span { padding: 7px 10px; border: 1px solid rgba(255,255,255,.17); background: rgba(255,255,255,.07); border-radius: 8px; font-size: .6rem; font-weight: 740; }
.toolkit-hero figure { overflow: hidden; margin: 0; border: 7px solid #fff; background: #20283a; border-radius: 20px; box-shadow: 0 24px 70px rgba(0,0,0,.34); transform: rotate(1.3deg); }.toolkit-hero figure img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }.toolkit-hero figcaption { padding: 9px 12px; color: #1b2333; background: #fff; font-size: .57rem; }
.toolkit-workspace { margin-top: -1px; }.toolkit-panel { overflow: hidden; max-width: 1040px; margin-inline: auto; border: 1px solid var(--line); background: #fff; border-radius: 19px; box-shadow: 0 24px 70px rgba(37,45,67,.09); }.toolkit-panel-head { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 16px; padding: 22px 25px; border-bottom: 1px solid var(--line); background: linear-gradient(120deg,#fff,#f7f6ff); }.toolkit-panel-head > span { display: grid; width: 52px; height: 52px; place-items: center; color: #fff; background: var(--violet); border-radius: 14px; }.toolkit-panel-head > span .icon { width: 25px; }.toolkit-panel-head small { color: var(--violet); font-size: .55rem; font-weight: 850; text-transform: uppercase; }.toolkit-panel-head h2 { margin: 3px 0 4px; font-size: 1.45rem; }.toolkit-panel-head p { margin: 0; font-size: .67rem; }
.quick-tool-form { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; padding: 25px; }.quick-tool-form label { display: grid; gap: 7px; }.quick-tool-form label > span { color: #6f7889; font-size: .6rem; font-weight: 760; }.quick-tool-form input, .quick-tool-form select { width: 100%; min-height: 45px; padding: 0 12px; border: 1px solid var(--line); outline: 0; background: #f9fafd; border-radius: 9px; color: var(--ink); font: inherit; font-size: .72rem; }.quick-tool-form input:focus, .quick-tool-form select:focus { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-soft); }
.quick-results { display: grid; grid-template-columns: repeat(2,1fr); grid-column: 1 / -1; gap: 10px; }.quick-results > div { padding: 17px; border: 1px solid #ddd9ff; background: #f8f7ff; border-radius: 11px; }.quick-results small, .quick-results strong { display: block; }.quick-results small { color: #777f90; font-size: .56rem; font-weight: 760; text-transform: uppercase; }.quick-results strong { margin-top: 4px; color: var(--violet-dark); font-size: 1.6rem; }.tool-feedback { grid-column: 1 / -1; margin: 0; padding: 13px 15px; color: #5f6878; background: #f4f6fa; border-radius: 9px; font-size: .66rem; line-height: 1.5; }
.reaction-tool, .click-speed-tool, .warmup-builder, .fov-tool, .deadzone-tool { padding: 25px; }.reaction-stage, .click-stage { display: grid; width: 100%; min-height: 250px; place-items: center; align-content: center; gap: 10px; border: 0; color: #fff; background: linear-gradient(135deg,#302875,#6758f5); border-radius: 16px; cursor: pointer; touch-action: manipulation; }.reaction-stage span, .click-stage span { font-size: clamp(1.8rem,4vw,3rem); font-weight: 850; }.reaction-stage small, .click-stage small { color: rgba(255,255,255,.78); font-size: .68rem; }.reaction-stage.is-waiting { background: #e94c5f; }.reaction-stage.is-ready { background: #27a66f; }.reaction-stage.is-early { background: #c9344a; }.reaction-stage.is-result { background: #303a53; }.reaction-results { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 12px; }.reaction-results > div { padding: 13px; border: 1px solid var(--line); background: #f8f9fc; border-radius: 10px; }.reaction-results small, .reaction-results strong { display: block; }.reaction-results small { color: var(--muted); font-size: .55rem; }.reaction-results strong { margin-top: 3px; font-size: 1rem; }.attempt-list { display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; margin: 12px 0 0; padding: 0; list-style: none; }.attempt-list li { display: grid; padding: 9px; border: 1px solid var(--line); border-radius: 8px; font-size: .57rem; }.attempt-list li strong { margin-top: 3px; }.click-stage strong { font-size: clamp(3.5rem,8vw,6rem); }.click-stage.is-running { background: linear-gradient(135deg,#117f9e,#6758f5); }.click-stage.is-complete { background: #283248; }.click-speed-tool > .quick-results { margin-top: 12px; }.click-speed-tool > .button { margin-top: 12px; }
.warmup-fields { padding: 0; }.warmup-fields .button { align-self: end; min-height: 45px; }.routine-output { margin-top: 16px; padding: 21px; border: 1px solid #dcd8ff; background: linear-gradient(135deg,#f9f8ff,#f5fbff); border-radius: 13px; }.routine-output small { color: var(--violet); font-size: .57rem; font-weight: 850; text-transform: uppercase; }.routine-output h3 { margin: 5px 0 13px; }.routine-output ol { display: grid; gap: 8px; margin: 0 0 13px; padding-left: 20px; }.routine-output li, .routine-output p { font-size: .68rem; line-height: 1.55; }.routine-output p { margin: 0; }.warmup-builder > .button { margin-top: 10px; }
.fov-fields { padding: 0; grid-template-columns: repeat(2,1fr); }.fov-preview { display: grid; grid-template-columns: minmax(0,1fr) 310px; align-items: center; gap: 18px; margin-top: 18px; }.fov-frame { --fov-open: 54%; position: relative; display: grid; min-height: 270px; place-items: center; overflow: hidden; color: #fff; background: linear-gradient(145deg,#151b2b,#28334b); border-radius: 14px; }.fov-frame::before, .fov-frame::after { content: ""; position: absolute; top: 0; bottom: 0; width: calc((100% - var(--fov-open)) / 2); background: rgba(255,255,255,.08); }.fov-frame::before { left: 0; }.fov-frame::after { right: 0; }.fov-frame span { z-index: 2; padding: 8px 11px; background: rgba(0,0,0,.35); border-radius: 8px; font-size: .63rem; }.fov-preview .quick-results { grid-template-columns: 1fr; }.fov-tool > .tool-feedback { margin-top: 13px; }
.gamepad-status { display: grid; grid-template-columns: 12px 1fr; align-items: center; gap: 4px 10px; margin-bottom: 17px; padding: 14px; border: 1px solid var(--line); background: #f8f9fc; border-radius: 10px; }.gamepad-status > .live-dot { grid-row: span 2; background: #b6bdc9; }.gamepad-status.is-connected > .live-dot { background: #28ae72; }.gamepad-status strong, .gamepad-status small { display: block; }.gamepad-status strong { font-size: .75rem; }.gamepad-status small { color: var(--muted); font-size: .58rem; }.stick-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 13px; }.stick-grid > div { display: grid; justify-items: center; gap: 9px; padding: 18px; border: 1px solid var(--line); border-radius: 13px; }.stick-grid small { color: var(--violet); font-size: .58rem; font-weight: 800; text-transform: uppercase; }.stick-grid > div > strong { font-size: .64rem; }.stick-plot { position: relative; width: 120px; height: 120px; border: 2px solid #cad0dc; background: radial-gradient(circle,#f5f6fa 6%,transparent 7%),linear-gradient(#eef1f6 1px,transparent 1px),linear-gradient(90deg,#eef1f6 1px,transparent 1px); background-size: auto,50% 50%,50% 50%; border-radius: 50%; }.stick-plot b { position: absolute; top: 50%; left: 50%; width: 2px; height: 2px; background: #929bac; }.stick-plot i { position: absolute; z-index: 2; top: 50%; left: 50%; width: 18px; height: 18px; background: var(--violet); border: 4px solid #fff; border-radius: 50%; box-shadow: 0 4px 10px rgba(40,31,123,.24); transform: translate(-50%,-50%); }.deadzone-tool > .quick-results { margin-top: 13px; }.deadzone-tool > .button { margin: 12px 0; }
.toolkit-guide { display: grid; grid-template-columns: minmax(0,1fr) 340px; align-items: start; gap: 80px; }.toolkit-guide article > p { font-size: .9rem; line-height: 1.78; }.toolkit-guide article > ol { display: grid; gap: 9px; margin: 18px 0 0; padding: 0; list-style: none; }.toolkit-guide article > ol li { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 13px; padding: 13px; border: 1px solid var(--line); background: #fff; border-radius: 10px; }.toolkit-guide article > ol li > span { display: grid; width: 38px; height: 38px; place-items: center; color: #fff; background: var(--violet); border-radius: 10px; font-size: .6rem; font-weight: 850; }.toolkit-guide article > ol p { margin: 0; font-size: .7rem; }.toolkit-guide > aside { display: grid; gap: 12px; }.toolkit-tip-card, .toolkit-related { padding: 21px; border: 1px solid var(--line); background: #fff; border-radius: 14px; }.toolkit-tip-card > span { display: grid; width: 42px; height: 42px; place-items: center; color: var(--violet); background: var(--violet-soft); border-radius: 11px; }.toolkit-tip-card > small, .toolkit-related > small { display: block; margin-top: 16px; color: var(--violet); font-size: .55rem; font-weight: 850; text-transform: uppercase; }.toolkit-tip-card h2 { margin: 5px 0 9px; font-size: 1.25rem; }.toolkit-tip-card p { margin: 0; font-size: .69rem; line-height: 1.6; }.toolkit-related { padding-block: 10px; }.toolkit-related > small { margin: 7px 8px; }.toolkit-related a { display: flex; justify-content: space-between; align-items: center; padding: 11px 8px; border-top: 1px solid var(--line); font-size: .65rem; font-weight: 730; }.toolkit-related a .icon { width: 14px; color: var(--violet); }
.tool-more-strip > .wrap { display: grid; grid-template-columns: 1.3fr repeat(5,auto); align-items: center; gap: 12px; }.tool-more-strip h2 { margin: 4px 0 0; font-size: 1.6rem; }.tool-more-strip a { display: flex; align-items: center; gap: 5px; padding: 10px 12px; border: 1px solid var(--line); background: #fff; border-radius: 9px; font-size: .62rem; font-weight: 730; }.tool-more-strip a .icon { width: 13px; color: var(--violet); }

@media (max-width: 1080px) {
  .visual-guide-list { grid-template-columns: repeat(2,1fr); }
  .home-tool-grid, .tool-catalog-expanded { grid-template-columns: repeat(2,1fr); }
  .tools-portal-grid, .toolkit-hero-grid { grid-template-columns: 1fr 390px; gap: 40px; }
  .tool-game-links { grid-template-columns: repeat(2,1fr); }
  .tool-more-strip > .wrap { grid-template-columns: repeat(3,1fr); }.tool-more-strip > .wrap > div { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .page-hero-grid:has(.collection-hero-art), .page-hero-grid:has(.collection-hero-collage) { grid-template-columns: 1fr; }
  .article-hero-grid, .tools-portal-grid, .toolkit-hero-grid, .tool-use-grid, .toolkit-guide { grid-template-columns: 1fr; gap: 35px; }
  .article-hero-rich figure, .tools-hero-collage, .toolkit-hero figure { max-width: 560px; }
  .toolkit-hero-grid { min-height: 0; }.toolkit-hero figure { display: none; }
  .quick-tool-form { grid-template-columns: 1fr 1fr; }
  .fov-preview { grid-template-columns: 1fr; }.fov-preview .quick-results { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 580px) {
  .collection-hero-art { min-height: 205px; transform: none; }.collection-hero-collage { min-height: 250px; transform: none; }.visual-guide-list { grid-template-columns: 1fr; }.visual-comparison-grid > a > img { aspect-ratio: 16/9; }.status-game-grid-visual a { grid-template-columns: 86px minmax(0,1fr) auto; }.status-game-grid-visual img { width: 86px; height: 52px; }
  .home-tool-grid, .tool-catalog-expanded, .tool-game-links { grid-template-columns: 1fr; }
  .home-tool-grid > a { min-height: 235px; }
  .article-hero-rich { padding: 38px 0; }.article-hero-rich h1 { font-size: 2.6rem; }.article-hero-rich figure { border-width: 4px; transform: none; }
  .tools-portal-hero { padding: 40px 0; }.tools-portal-grid h1, .toolkit-hero h1 { font-size: 3rem; }.tools-hero-collage { grid-template-columns: 1fr 1fr; grid-template-rows: 190px 120px; }.tools-hero-collage > a:first-child { grid-column: 1 / -1; grid-row: auto; }
  .tool-use-grid { gap: 30px; }.tool-catalog-expanded .tool-card-visual { height: 180px; }
  .toolkit-hero-grid { padding-block: 40px; }.toolkit-panel-head { grid-template-columns: 44px 1fr; padding: 17px; }.toolkit-panel-head > span { width: 44px; height: 44px; }.toolkit-panel-head h2 { font-size: 1.2rem; }
  .quick-tool-form, .fov-fields, .quick-results, .reaction-results, .stick-grid, .fov-preview .quick-results { grid-template-columns: 1fr; }.quick-tool-form, .reaction-tool, .click-speed-tool, .warmup-builder, .fov-tool, .deadzone-tool { padding: 17px; }
  .reaction-stage, .click-stage { min-height: 220px; }.attempt-list { grid-template-columns: 1fr; }.attempt-list li { grid-template-columns: 1fr auto; }
  .tool-more-strip > .wrap { grid-template-columns: 1fr; }.tool-more-strip > .wrap > div { grid-column: auto; }
}

/* Platform layer: personal dashboard, picks, calendar, places and embeddable schedule. */
[hidden] { display: none !important; }
.save-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); color: var(--ink); background: rgba(255,255,255,.92); border-radius: 11px; cursor: pointer; font-size: .78rem; font-weight: 760; transition: .18s ease; }
.save-action:hover { color: var(--violet-dark); border-color: #b9b1ff; transform: translateY(-1px); }
.save-action.is-saved { color: #fff; border-color: var(--violet); background: var(--violet); }
.save-action .icon { width: 17px; height: 17px; }
.detail-action-row, .event-detail-actions, .profile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.match-detail-hero .save-action { color: #fff; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.09); backdrop-filter: blur(12px); }
.match-detail-hero .save-action.is-saved { border-color: var(--violet); background: var(--violet); }
.event-detail-actions .save-action { min-height: 50px; }

.home-command-center { overflow: hidden; position: relative; }
.home-command-center::before { content: ""; position: absolute; width: 520px; height: 520px; right: -220px; top: -220px; background: radial-gradient(circle,rgba(103,88,245,.16),transparent 68%); pointer-events: none; }
.command-center-grid { position: relative; display: grid; grid-template-columns: 1.45fr repeat(2,1fr); gap: 16px; }
.command-card { position: relative; min-height: 210px; padding: 25px; border: 1px solid var(--line); background: rgba(255,255,255,.9); border-radius: 18px; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.command-card:hover { transform: translateY(-4px); border-color: #c8c2ff; box-shadow: var(--shadow-md); }
.command-card > span { display: grid; width: 45px; height: 45px; place-items: center; margin-bottom: 28px; color: var(--violet); background: var(--violet-soft); border-radius: 12px; }
.command-card > span .icon { width: 21px; }
.command-card small { color: var(--violet); font-size: .58rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.command-card h3 { margin: 7px 0 9px; font-size: 1.35rem; }
.command-card p { margin: 0 0 18px; font-size: .75rem; line-height: 1.65; }
.command-card b { display: inline-flex; align-items: center; gap: 6px; font-size: .7rem; }
.command-card b .icon { width: 14px; color: var(--violet); }
.command-card-featured { grid-row: span 2; min-height: 436px; padding: 0; overflow: hidden; color: #fff; background: var(--navy); }
.command-card-featured > img { width: 100%; height: 215px; object-fit: cover; opacity: .8; }
.command-card-featured > span { position: absolute; margin: 18px; color: #fff; background: var(--violet); }
.command-card-featured > div { padding: 28px; }
.command-card-featured small, .command-card-featured p, .command-card-featured b .icon { color: rgba(255,255,255,.75); }
.command-card-featured h3 { font-size: 1.8rem; }
.command-card-featured p { font-size: .82rem; }

.personal-hero, .pickem-hero, .calendar-hero, .places-hero, .widgets-hero { position: relative; overflow: hidden; padding: 72px 0; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 82% 20%,rgba(0,168,232,.14),transparent 30%),radial-gradient(circle at 15% 0,rgba(183,229,51,.15),transparent 28%),linear-gradient(135deg,#fbfcff,#f0efff); }
.personal-hero::after, .pickem-hero::after, .calendar-hero::after, .places-hero::after, .widgets-hero::after { content: ""; position: absolute; right: -120px; bottom: -250px; width: 520px; height: 520px; border: 90px solid rgba(103,88,245,.06); border-radius: 50%; pointer-events: none; }
.personal-hero-grid, .pickem-hero-grid, .calendar-hero-grid, .places-hero-grid, .widgets-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1.2fr) minmax(330px,.8fr); align-items: center; gap: 70px; }
.personal-hero h1, .pickem-hero h1, .calendar-hero h1, .places-hero h1, .widgets-hero h1 { max-width: 790px; margin: 15px 0 20px; font-size: clamp(3rem,6vw,5.3rem); }
.personal-hero p, .pickem-hero p, .calendar-hero p, .places-hero p, .widgets-hero p { max-width: 700px; font-size: 1rem; }
.personal-hero-actions, .widgets-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.personal-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding: 16px; border: 1px solid rgba(255,255,255,.9); background: rgba(255,255,255,.68); border-radius: 23px; box-shadow: var(--shadow-md); backdrop-filter: blur(18px); }
.personal-summary article { display: grid; min-height: 155px; align-content: center; justify-items: center; text-align: center; border: 1px solid var(--line); background: #fff; border-radius: 16px; }
.personal-summary span { display: grid; width: 42px; height: 42px; place-items: center; color: var(--violet); background: var(--violet-soft); border-radius: 50%; }
.personal-summary strong { margin: 9px 0 -2px; font-size: 1.65rem; }
.personal-summary small { color: var(--muted); font-size: .62rem; }
.personal-onboarding { padding-top: 72px; }
.player-card { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 22px; padding: 24px; border: 1px solid var(--line); background: linear-gradient(120deg,#fff,#f0efff); border-radius: 20px; box-shadow: var(--shadow-sm); }
.player-card-mark { display: grid; width: 82px; height: 82px; place-items: center; background: var(--navy); border-radius: 18px; }
.player-card-mark img { width: 62px; height: 62px; object-fit: contain; }
.player-card small { color: var(--violet); font-size: .58rem; font-weight: 800; text-transform: uppercase; }
.player-card h3 { margin: 5px 0; font-size: 1.55rem; }
.player-card p { margin: 0; font-size: .78rem; }
.player-card > a { display: inline-flex; align-items: center; gap: 7px; font-size: .75rem; font-weight: 780; }
.player-card > a .icon { width: 15px; color: var(--violet); }
.personal-profile-form { display: grid; grid-template-columns: repeat(3,1fr) auto; align-items: end; gap: 12px; margin-top: 14px; padding: 20px; border: 1px solid var(--line); background: #fff; border-radius: 16px; }
.personal-profile-form label, .places-search label, .lineup-meta label, .quick-tool-form label { display: grid; gap: 7px; }
.personal-profile-form label > span, .places-search label > span, .lineup-meta label > span, .quick-tool-form label > span { color: var(--muted); font-size: .6rem; font-weight: 760; text-transform: uppercase; }
.personal-profile-form input, .personal-profile-form select, .places-search input, .places-search select, .quick-tool-form input, .quick-tool-form select, .quick-tool-form textarea, .lineup-meta input, .lineup-rows input { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--line-strong); background: #fff; border-radius: 10px; }
.personal-filter { display: flex; flex-wrap: wrap; gap: 7px; }
.personal-filter button, .calendar-toolbar button { min-height: 38px; padding: 0 13px; border: 1px solid var(--line); background: #fff; border-radius: 9px; cursor: pointer; font-size: .67rem; font-weight: 760; }
.personal-filter button.is-active, .calendar-toolbar button.is-active { color: #fff; border-color: var(--violet); background: var(--violet); }
.saved-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }
.saved-card { position: relative; overflow: hidden; border: 1px solid var(--line); background: #fff; border-radius: 16px; box-shadow: var(--shadow-sm); }
.saved-card > a { display: grid; height: 100%; }
.saved-card img, .saved-fallback { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.saved-fallback { display: grid; place-items: center; color: #fff; background: linear-gradient(135deg,var(--navy),var(--violet)); font-size: 1.6rem; font-weight: 850; }
.saved-card a > div { padding: 18px; }
.saved-card small { color: var(--violet); font-size: .56rem; font-weight: 850; text-transform: uppercase; }
.saved-card h3 { margin: 5px 34px 7px 0; font-size: 1.05rem; }
.saved-card p { margin: 0; font-size: .68rem; }
.saved-card > button { position: absolute; right: 12px; bottom: 12px; width: 31px; height: 31px; border: 0; background: #f0f2f7; border-radius: 50%; cursor: pointer; }
.personal-columns { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.personal-panel { padding: 24px; border: 1px solid var(--line); background: #fff; border-radius: 18px; box-shadow: var(--shadow-sm); }
.panel-heading { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.panel-heading > span { display: grid; width: 43px; height: 43px; place-items: center; color: var(--violet); background: var(--violet-soft); border-radius: 11px; }
.panel-heading small { color: var(--muted); font-size: .56rem; text-transform: uppercase; }
.panel-heading h2 { margin: 2px 0 0; font-size: 1.25rem; }
.panel-heading a { color: var(--violet); font-size: .65rem; font-weight: 760; }
.personal-list-item { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: .7rem; }
.personal-list-item > span, .personal-list-item > time { color: var(--muted); }
.personal-list-item > strong { color: var(--violet-dark); }
.panel-empty { margin: 18px 0 0; font-size: .72rem; }
.personal-data-grid { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 40px; }
.personal-data-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.text-danger { border: 0; color: var(--danger); background: transparent; cursor: pointer; font-size: .75rem; font-weight: 760; }

.pickem-note { display: inline-flex; padding: 10px 13px; margin-top: 13px; color: #6d4b00; background: #fff6d8; border: 1px solid #f1dfa0; border-radius: 10px; font-size: .68rem; font-weight: 700; }
.pickem-score, .timezone-card { padding: 30px; color: #fff; background: linear-gradient(145deg,var(--navy),#24245d); border-radius: 24px; box-shadow: var(--shadow-md); }
.pickem-score span, .timezone-card small { display: block; color: #bdc4d5; font-size: .62rem; text-transform: uppercase; }
.pickem-score strong { display: block; margin: 12px 0 0; font-size: 4.5rem; line-height: 1; }
.pickem-score small { color: #bdc4d5; }
.pickem-score a { display: inline-flex; align-items: center; gap: 7px; margin-top: 27px; color: #fff; font-size: .7rem; font-weight: 750; }
.pickem-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.pickem-card { overflow: hidden; border: 1px solid var(--line); background: #fff; border-radius: 17px; box-shadow: var(--shadow-sm); }
.pickem-card > header { display: flex; justify-content: space-between; gap: 15px; padding: 13px 17px; color: var(--muted); background: #f7f8fb; font-size: .6rem; text-transform: uppercase; }
.pickem-card h3 { margin: 17px 17px 12px; font-size: .95rem; }
.pickem-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 17px 17px; }
.pickem-choices button { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 10px; min-height: 62px; padding: 9px; text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 11px; cursor: pointer; }
.pickem-choices button:hover, .pickem-choices button.is-picked { color: var(--violet-dark); border-color: var(--violet); background: var(--violet-soft); }
.pickem-choices img, .team-mark { width: 38px; height: 38px; object-fit: contain; border-radius: 8px; }

.calendar-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 20px; }
.calendar-toolbar select { min-height: 40px; margin-left: auto; padding: 0 12px; border: 1px solid var(--line); background: #fff; border-radius: 9px; }
.timezone-card strong { display: block; margin: 8px 0 5px; font-size: 1.75rem; }
.timezone-card p { margin: 0; color: #d4d8e2; font-size: .72rem; }
.calendar-list { display: grid; gap: 10px; }
.calendar-list > article { display: grid; grid-template-columns: 80px minmax(0,1fr) auto; align-items: center; gap: 17px; padding: 16px; border: 1px solid var(--line); background: #fff; border-radius: 15px; }
.calendar-list > article > time { display: grid; justify-items: center; padding: 11px 5px; color: #fff; background: var(--navy); border-radius: 10px; }
.calendar-list > article > time b { font-size: .82rem; }.calendar-list > article > time span { color: #aeb7c9; font-size: .55rem; }
.calendar-list h2 { margin: 4px 0 0; font-size: 1rem; }
.calendar-list small { color: var(--violet); font-size: .58rem; font-weight: 750; text-transform: uppercase; }
.calendar-actions { display: flex; gap: 7px; }
.calendar-actions .button, .calendar-actions .save-action { min-height: 40px; padding-inline: 12px; font-size: .65rem; }

.places-search { display: grid; grid-template-columns: minmax(230px,1fr) 140px auto; align-items: end; gap: 10px; margin-top: 28px; padding: 14px; border: 1px solid rgba(255,255,255,.9); background: rgba(255,255,255,.78); border-radius: 17px; box-shadow: var(--shadow-sm); }
.places-search [data-places-nearby] { grid-column: 1 / -1; justify-self: start; min-height: 42px; }
.places-feedback { margin: 10px 3px 0; font-size: .68rem; }
.places-visual { position: relative; overflow: hidden; min-height: 410px; border: 6px solid #fff; border-radius: 26px; box-shadow: var(--shadow-md); transform: rotate(2deg); }
.places-visual > img { width: 100%; height: 100%; min-height: 410px; object-fit: cover; }
.places-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%,rgba(10,14,25,.9)); }
.places-visual > span { position: absolute; z-index: 1; left: 25px; right: 25px; bottom: 24px; color: #fff; }
.places-visual strong, .places-visual small { display: block; }.places-visual strong { font-size: 1.15rem; }.places-visual small { color: #d4d8e2; font-size: .7rem; }
.places-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.place-card { padding: 21px; border: 1px solid var(--line); background: #fff; border-radius: 16px; box-shadow: var(--shadow-sm); }
.place-card > small { color: var(--violet); font-size: .56rem; font-weight: 800; text-transform: uppercase; }
.place-card h3 { margin: 7px 0 10px; font-size: 1.05rem; }
.place-card p { margin: 5px 0; font-size: .68rem; }
.place-card footer { display: flex; gap: 8px; margin-top: 16px; }
.place-card footer a { display: inline-flex; align-items: center; gap: 5px; font-size: .65rem; font-weight: 750; }
.map-credit { margin-top: 18px; color: var(--muted); font-size: .62rem; }

.widgets-hero-grid { grid-template-columns: minmax(0,1fr) minmax(360px,.8fr); }
.widget-code { overflow: hidden; border: 1px solid #343b50; background: var(--navy); border-radius: 18px; box-shadow: var(--shadow-md); }
.widget-code::before { content: "Embed code"; display: block; padding: 11px 16px; color: #9ea8bb; border-bottom: 1px solid #30374a; font-size: .58rem; text-transform: uppercase; }
.widget-code pre { margin: 0; padding: 22px; overflow: auto; }.widget-code code { color: #dce2ef; font-size: .75rem; white-space: pre-wrap; }
.widget-preview-shell { padding: 24px; border: 1px solid var(--line); background: #fff; border-radius: 20px; box-shadow: var(--shadow-sm); }
.content-duo { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 70px; align-items: start; }
.content-duo article p { font-size: .86rem; line-height: 1.75; }
.link-stack { display: grid; gap: 10px; }.link-stack a { padding: 18px; border: 1px solid var(--line); background: #fff; border-radius: 13px; }.link-stack strong, .link-stack span { display: block; }.link-stack span { margin-top: 5px; color: var(--muted); font-size: .67rem; }.link-stack .icon { width: 14px; color: var(--violet); }

.advanced-tool { position: relative; z-index: 2; margin-top: -42px; }
.advanced-tool-panel { overflow: hidden; border: 1px solid var(--line); background: #fff; border-radius: 22px; box-shadow: var(--shadow-md); }
.advanced-tool-panel .toolkit-panel-head { border-bottom: 1px solid var(--line); }
.timezone-tool, .bracket-builder, .veto-tool, .lineup-tool { padding: 24px; }
.timezone-results { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 18px; }
.timezone-results article { padding: 16px; border: 1px solid var(--line); background: #f8f9fc; border-radius: 12px; }
.timezone-results small, .timezone-results strong { display: block; }.timezone-results small { color: var(--muted); font-size: .58rem; }.timezone-results strong { margin-top: 4px; font-size: .9rem; }
.quick-tool-form textarea { resize: vertical; }
.field-wide { grid-column: 1 / -1; }
.bracket-output { display: grid; gap: 12px; margin-top: 22px; overflow-x: auto; }
.bracket-round { display: grid; gap: 8px; min-width: 220px; }.bracket-match { padding: 12px; border: 1px solid var(--line); background: #f8f9fc; border-radius: 10px; }.bracket-match span { display: block; padding: 4px 0; font-size: .68rem; }
.veto-board { display: grid; gap: 10px; margin-top: 20px; }.veto-step { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 13px; border: 1px solid var(--line); background: #f8f9fc; border-radius: 11px; }.veto-step > span { display: grid; width: 34px; height: 34px; place-items: center; color: #fff; background: var(--violet); border-radius: 9px; font-size: .62rem; }.veto-map-list { display: flex; flex-wrap: wrap; gap: 7px; }.veto-map-list button { padding: 8px 10px; border: 1px solid var(--line); background: #fff; border-radius: 8px; cursor: pointer; font-size: .65rem; }.veto-map-list button:hover { border-color: var(--violet); color: var(--violet); }
.lineup-meta { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }.lineup-rows { display: grid; gap: 9px; margin-top: 16px; }.lineup-rows > div { display: grid; grid-template-columns: 38px .8fr 1fr 1.3fr; gap: 8px; align-items: center; }.lineup-rows > div > span { display: grid; height: 44px; place-items: center; color: #fff; background: var(--navy); border-radius: 9px; font-size: .6rem; }.tool-action-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }.tool-feedback { margin: 12px 0 0; font-size: .68rem; }

@media (max-width: 980px) {
  .command-center-grid { grid-template-columns: repeat(2,1fr); }.command-card-featured { grid-column: 1 / -1; grid-row: auto; min-height: 0; display: grid; grid-template-columns: .9fr 1.1fr; }.command-card-featured > img { height: 100%; min-height: 265px; }
  .personal-hero-grid, .pickem-hero-grid, .calendar-hero-grid, .places-hero-grid, .widgets-hero-grid { grid-template-columns: 1fr; gap: 35px; }
  .places-visual { max-width: 620px; min-height: 330px; transform: none; }.places-visual > img { min-height: 330px; }
  .saved-grid, .places-grid { grid-template-columns: repeat(2,1fr); }
  .personal-profile-form { grid-template-columns: repeat(2,1fr); }.personal-profile-form .button { align-self: stretch; }
  .content-duo { grid-template-columns: 1fr; gap: 30px; }.link-stack { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 700px) {
  .detail-action-row, .event-detail-actions, .profile-actions { align-items: stretch; }.detail-action-row > *, .event-detail-actions > *, .profile-actions > * { flex: 1 1 calc(50% - 6px); }
  .command-center-grid, .pickem-grid, .saved-grid, .places-grid, .personal-columns { grid-template-columns: 1fr; }
  .command-card-featured { display: block; }.command-card-featured > img { min-height: 0; height: 200px; }
  .personal-summary { grid-template-columns: 1fr 1fr 1fr; padding: 9px; }.personal-summary article { min-height: 120px; }.personal-summary strong { font-size: 1.35rem; }.personal-summary small { max-width: 60px; line-height: 1.25; }
  .player-card { grid-template-columns: auto 1fr; }.player-card > a { grid-column: 1 / -1; }
  .personal-profile-form, .places-search, .lineup-meta, .timezone-results { grid-template-columns: 1fr; }.places-search [data-places-nearby] { grid-column: auto; width: 100%; }.places-search .button { width: 100%; }
  .personal-data-grid { grid-template-columns: 1fr; }.personal-data-actions { justify-content: flex-start; }
  .calendar-list > article { grid-template-columns: 62px minmax(0,1fr); }.calendar-actions { grid-column: 1 / -1; }.calendar-actions > * { flex: 1; }
  .calendar-toolbar select { width: 100%; margin-left: 0; }
  .link-stack { grid-template-columns: 1fr; }
  .lineup-rows > div { grid-template-columns: 34px 1fr; }.lineup-rows > div input:nth-of-type(2), .lineup-rows > div input:nth-of-type(3) { grid-column: 2; }
}
@media (max-width: 480px) {
  .personal-hero, .pickem-hero, .calendar-hero, .places-hero, .widgets-hero { padding: 44px 0; }
  .personal-hero h1, .pickem-hero h1, .calendar-hero h1, .places-hero h1, .widgets-hero h1 { font-size: 2.65rem; }
  .personal-summary { grid-template-columns: 1fr; }.personal-summary article { min-height: 92px; grid-template-columns: auto auto; justify-content: center; gap: 10px; }.personal-summary small { grid-column: 1 / -1; max-width: none; }
  .detail-action-row > *, .event-detail-actions > *, .profile-actions > * { flex-basis: 100%; }
  .pickem-choices { grid-template-columns: 1fr; }
  .saved-card h3 { font-size: 1rem; }
}
.personal-recent-section { padding-top: 30px; }
.recent-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.recent-card { overflow: hidden; border: 1px solid var(--line); background: #fff; border-radius: 14px; box-shadow: var(--shadow-sm); transition: transform .18s ease, border-color .18s ease; }
.recent-card:hover { transform: translateY(-3px); border-color: #c8c2ff; }
.recent-card > img, .recent-card > .saved-fallback { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.recent-card > div { padding: 13px 15px 15px; }
.recent-card small { display: block; color: var(--violet); font-size: .54rem; font-weight: 850; text-transform: uppercase; }
.recent-card strong { display: block; margin-top: 4px; font-size: .75rem; line-height: 1.35; }
@media (max-width: 900px) { .recent-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px) { .recent-grid { grid-template-columns: 1fr; } }
.bracket-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px,1fr); align-items: center; gap: 18px; min-width: max-content; }
.bracket-round { display: grid; align-content: center; gap: 12px; min-width: 230px; }
.bracket-round h3 { margin: 0 0 4px; color: var(--violet); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.bracket-match { display: grid; grid-template-columns: 30px 1fr; gap: 6px; padding: 9px; border: 1px solid var(--line); background: #f8f9fc; border-radius: 11px; }
.bracket-match > span { grid-row: span 2; display: grid; place-items: center; color: var(--muted); font-size: .55rem; }
.bracket-match button { min-height: 37px; padding: 7px 9px; text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 8px; cursor: pointer; font-size: .68rem; }
.bracket-match button:disabled { color: #9aa2b2; cursor: default; }
.bracket-match button.is-picked { color: #fff; border-color: var(--violet); background: var(--violet); }
.bracket-champion { display: flex; align-items: center; gap: 12px; margin-top: 15px; padding: 16px 18px; color: #fff; background: linear-gradient(135deg,var(--navy),var(--violet)); border-radius: 13px; }
.bracket-champion small { color: #cdd3df; text-transform: uppercase; }.bracket-champion strong { font-size: 1rem; }
@media print { .site-header,.site-footer,.mobile-bottom-nav,.breadcrumbs,.toolkit-hero,.toolkit-guide,.tool-action-row,.quick-tool-form { display:none!important; }.advanced-tool { margin:0; }.advanced-tool-panel { box-shadow:none; border:0; }.bracket-scroll { overflow:visible; } }
.place-card-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.place-card-top span { color: var(--violet); font-size: .56rem; font-weight: 820; text-transform: uppercase; }
.place-card-top strong { font-size: .65rem; }
.place-card dl { display: grid; gap: 6px; margin: 14px 0 0; }
.place-card dl div { display: grid; grid-template-columns: 52px 1fr; gap: 8px; font-size: .64rem; }
.place-card dt { color: var(--muted); }.place-card dd { margin: 0; overflow-wrap: anywhere; }
.place-card > div:last-child { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 17px; }
.place-card > div:last-child a { color: var(--violet-dark); font-size: .66rem; font-weight: 760; }
.places-loading { grid-column: 1 / -1; padding: 45px; text-align: center; color: var(--muted); border: 1px dashed var(--line-strong); background: #fff; border-radius: 16px; }
.pickem-card.is-locked { opacity: .84; }.pickem-card footer { padding: 11px 17px; border-top: 1px solid var(--line); font-size: .63rem; }
.pick-correct { color: var(--success); font-weight: 760; }.pick-wrong { color: var(--danger); font-weight: 760; }

/* Timed aim trainer */
.aim-trainer{display:grid;gap:18px}.aim-trainer-toolbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.aim-trainer-toolbar>div,.aim-trainer-summary>div{padding:14px;border:1px solid var(--line,#dce1eb);border-radius:14px;background:#fff}.aim-trainer-toolbar small,.aim-trainer-summary small{display:block;color:#697386;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}.aim-trainer-toolbar strong{display:block;margin-top:5px;font-size:1.15rem;color:#111827}.aim-trainer-board{position:relative;display:block;width:100%;min-height:440px;overflow:hidden;border:1px solid #cfd6e4;border-radius:22px;background:radial-gradient(circle at 20% 15%,rgba(91,74,245,.12),transparent 28%),linear-gradient(135deg,#f8f9ff,#e9eef9);cursor:crosshair;touch-action:manipulation}.aim-trainer-board:focus-visible{outline:3px solid #6c5ce7;outline-offset:3px}.aim-trainer-message{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);padding:13px 18px;border-radius:999px;background:#111827;color:#fff;font-weight:700;white-space:nowrap}.aim-target{position:absolute;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#fff 0 17%,#ff315c 18% 44%,#111827 45% 52%,#18c8ff 53% 100%);box-shadow:0 10px 28px rgba(17,24,39,.25);pointer-events:auto}.aim-trainer-summary{display:flex;flex-wrap:wrap;gap:10px}.aim-trainer-summary>p{margin:0;color:#566176}.aim-trainer-summary>div{min-width:130px;flex:1}.aim-trainer-summary strong{display:block;margin-top:4px;font-size:1.25rem}.aim-trainer-summary span{font-size:.8rem;color:#697386}@media(max-width:700px){.aim-trainer-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}.aim-trainer-board{min-height:360px}.aim-trainer-message{white-space:normal;text-align:center;width:min(85%,320px)}}

/* 2PVP V10 platform layers */
.platform-hero{padding:clamp(3.2rem,7vw,7rem) 0;background:radial-gradient(circle at 85% 15%,rgba(74,222,128,.16),transparent 35%),linear-gradient(135deg,#08111f,#101d31 65%,#13243e);color:#fff;overflow:hidden}.platform-hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:clamp(2rem,5vw,5rem);align-items:center}.platform-hero h1{max-width:900px;margin:.7rem 0 1rem;font-size:clamp(2.35rem,5vw,5.35rem);line-height:.98;letter-spacing:-.055em;color:#fff}.platform-hero p{max-width:760px;font-size:clamp(1rem,1.5vw,1.25rem);line-height:1.7;color:#cbd5e1}.platform-hero-image{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:28px;box-shadow:0 30px 80px rgba(0,0,0,.38);border:1px solid rgba(255,255,255,.15)}.platform-scorecard{padding:2rem;border:1px solid rgba(255,255,255,.18);border-radius:28px;background:rgba(255,255,255,.08);backdrop-filter:blur(14px);box-shadow:0 28px 80px rgba(0,0,0,.25)}.platform-scorecard>span{display:block;text-transform:uppercase;letter-spacing:.14em;font-weight:800;font-size:.75rem;color:#86efac}.platform-scorecard>strong{display:block;margin:.25rem 0;font-size:clamp(3.5rem,8vw,6.5rem);line-height:1;color:#fff}.platform-scorecard>p{margin:0 0 1.2rem;font-size:.95rem}.platform-scorecard ul{display:grid;gap:.65rem;margin:0;padding:0;list-style:none}.platform-scorecard li{display:flex;gap:.6rem;align-items:center;color:#e2e8f0;font-weight:700}.platform-scorecard li svg{width:18px;color:#4ade80}.platform-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}.platform-card{display:flex;flex-direction:column;min-height:100%;overflow:hidden;border:1px solid #dbe3ee;border-radius:24px;background:#fff;color:inherit;text-decoration:none;box-shadow:0 15px 40px rgba(15,23,42,.07);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.platform-card:hover{transform:translateY(-4px);border-color:#86efac;box-shadow:0 24px 55px rgba(15,23,42,.12)}.platform-card img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#dfe7f0}.platform-card>div{display:flex;flex:1;flex-direction:column;padding:1.4rem}.platform-card span{font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;font-weight:900;color:#167344}.platform-card h2{margin:.4rem 0 .65rem;font-size:1.35rem;line-height:1.18}.platform-card p{margin:0 0 1rem;color:#526175;line-height:1.65}.platform-card small{margin-top:auto;color:#64748b}.platform-card strong{display:flex;align-items:center;gap:.4rem;margin-top:auto;padding-top:1rem;color:#0f6d42}.platform-card strong svg{width:18px}.compact-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.compact-grid .platform-card h2{font-size:1.05rem}.editorial-note{max-width:880px}.editorial-note h2{font-size:clamp(1.8rem,4vw,3.3rem);letter-spacing:-.035em}.editorial-note p{font-size:1.08rem;line-height:1.75;color:#475569}.review-line{margin-top:1rem!important;font-size:.85rem!important;color:#94a3b8!important}.learning-steps{display:grid;gap:1rem;margin:0;padding:0;list-style:none}.learning-steps li{display:grid;grid-template-columns:76px 1fr;gap:1.25rem;padding:1.6rem;border:1px solid #dbe3ee;border-radius:22px;background:#fff}.learning-steps li>span{display:grid;place-items:center;width:60px;height:60px;border-radius:18px;background:#0b6d43;color:#fff;font-size:1.25rem;font-weight:900}.learning-steps h2{margin:0 0 .45rem;font-size:1.35rem}.learning-steps p{margin:0;color:#526175;line-height:1.7}.learning-steps a{display:inline-flex;align-items:center;gap:.35rem;margin-top:.8rem;color:#0b6d43;font-weight:800}.database-tags{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}.database-tags span{padding:.45rem .8rem;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(255,255,255,.1);font-size:.78rem;font-weight:800;color:inherit}.database-detail{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.5fr);gap:2rem}.database-detail article,.database-detail aside{padding:clamp(1.4rem,3vw,2.4rem);border:1px solid #dbe3ee;border-radius:24px;background:#fff}.database-detail h2{margin-top:0;font-size:1.5rem}.database-detail p{color:#526175;line-height:1.75}.database-detail aside{height:max-content;background:#f4f8f6}.database-detail aside a{display:flex;align-items:center;justify-content:space-between;margin-top:1rem;padding:.85rem 0;border-top:1px solid #d5e4dc;color:#0b6d43;font-weight:800}.data-table-wrap{overflow:auto;border:1px solid #dbe3ee;border-radius:22px;background:#fff}.data-table{width:100%;border-collapse:collapse}.data-table th,.data-table td{padding:1rem 1.1rem;border-bottom:1px solid #e8edf3;text-align:left;white-space:nowrap}.data-table th{background:#f4f7fa;font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;color:#526175}.data-table a{color:#0b6d43;font-weight:800}.community-workspace{display:grid;grid-template-columns:minmax(280px,.65fr) minmax(0,1.35fr);gap:2rem}.community-workspace>form,.community-workspace>div{padding:clamp(1.25rem,3vw,2rem);border:1px solid #dbe3ee;border-radius:24px;background:#fff}.community-workspace form{display:grid;gap:1rem;height:max-content}.community-workspace label{display:grid;gap:.45rem}.community-workspace label span{font-weight:800}.community-workspace input,.community-workspace textarea,.calculator-shell input{width:100%;padding:.85rem 1rem;border:1px solid #cad5e2;border-radius:12px;background:#fff;font:inherit}.community-workspace textarea{min-height:150px;resize:vertical}.saved-list{display:grid;gap:.8rem}.saved-list article{position:relative;padding:1rem 5rem 1rem 1rem;border:1px solid #e1e8f0;border-radius:16px;background:#f8fafc}.saved-list h3,.saved-list p{margin:.1rem 0 .45rem}.saved-list p{color:#526175}.saved-list button{position:absolute;top:1rem;right:1rem;border:0;background:transparent;color:#b42318;font-weight:800;cursor:pointer}.empty-inline{padding:1rem;border-radius:14px;background:#f1f5f9;color:#64748b}.editorial-principles{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}.editorial-principles article{padding:1.6rem;border:1px solid #dbe3ee;border-radius:22px;background:#fff}.editorial-principles h2{margin-top:0;font-size:1.3rem}.editorial-principles p{color:#526175;line-height:1.7}.calculator-shell{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(280px,1.2fr);gap:2rem;padding:clamp(1.3rem,3vw,2.4rem);border:1px solid #dbe3ee;border-radius:28px;background:#fff;box-shadow:0 18px 45px rgba(15,23,42,.07)}.calculator-shell form{display:grid;gap:1rem}.calculator-shell label{display:grid;gap:.45rem}.calculator-shell label span{font-weight:800}.calculator-result{display:flex;flex-direction:column;justify-content:center;padding:2rem;border-radius:22px;background:linear-gradient(145deg,#082118,#0c6040);color:#fff}.calculator-result span{font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;font-weight:900;color:#86efac}.calculator-result strong{margin:.55rem 0;font-size:clamp(2.2rem,5vw,4.5rem);line-height:1}.calculator-result p{margin:0;color:#d6f5e4;line-height:1.65}.global-discovery{padding-top:clamp(2rem,5vw,4rem);padding-bottom:clamp(3rem,6vw,5rem)}.discovery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem}.discovery-grid a{display:grid;grid-template-columns:1fr auto;gap:.35rem 1rem;padding:1.15rem;border:1px solid #dbe3ee;border-radius:18px;background:#fff;color:inherit;text-decoration:none}.discovery-grid strong{font-size:.95rem}.discovery-grid span{grid-column:1;color:#64748b;font-size:.84rem;line-height:1.45}.discovery-grid svg{grid-column:2;grid-row:1/3;width:20px;align-self:center;color:#0b6d43}.empty-state{padding:2rem;border:1px dashed #b9c6d5;border-radius:22px;background:#f8fafc}.search-intent{padding:.75rem 1rem;border-radius:14px;background:#edf8f2;color:#245c43}.tool-page-hero{padding:clamp(3rem,6vw,5rem) 0;background:linear-gradient(135deg,#08111f,#13243e);color:#fff}.tool-page-hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:3rem;align-items:center}.tool-page-hero h1{font-size:clamp(2.4rem,5vw,4.8rem);line-height:1;letter-spacing:-.05em;color:#fff}.tool-page-hero p{font-size:1.1rem;line-height:1.7;color:#cbd5e1}
@media(max-width:1100px){.platform-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.compact-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.discovery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.platform-hero-grid,.tool-page-hero-grid,.database-detail,.community-workspace,.calculator-shell{grid-template-columns:1fr}.platform-hero h1{font-size:clamp(2.25rem,12vw,3.7rem)}.platform-card-grid,.compact-grid,.editorial-principles,.discovery-grid{grid-template-columns:1fr}.learning-steps li{grid-template-columns:52px 1fr;padding:1.1rem}.learning-steps li>span{width:46px;height:46px;border-radius:14px;font-size:1rem}.platform-scorecard{padding:1.35rem}.platform-scorecard>strong{font-size:4rem}.data-table th,.data-table td{padding:.8rem}.tool-page-hero{padding-top:2rem}}
.site-announcement{background:#171b34;color:#fff;border-bottom:1px solid #2b3157}.site-announcement .wrap{min-height:44px;display:flex;align-items:center;justify-content:center;gap:18px;text-align:center;font-size:13px}.site-announcement a{color:#c7c6ff;font-weight:800;text-decoration:none}.site-announcement a:hover{text-decoration:underline}@media(max-width:640px){.site-announcement .wrap{padding:10px 16px;align-items:flex-start;flex-direction:column;gap:5px;text-align:left}}
/* Editorial data governance notice */
.data-verification-note{display:flex;align-items:flex-start;gap:14px;margin-top:18px;margin-bottom:18px;padding:16px 18px;border:1px solid rgba(73,197,154,.38);border-radius:16px;background:linear-gradient(135deg,rgba(25,117,91,.12),rgba(61,90,128,.08));box-shadow:0 12px 30px rgba(6,16,28,.08)}
.data-verification-mark{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:#19755b;color:#fff;font-weight:800;line-height:1}
.data-verification-note strong{display:block;margin:1px 0 4px;color:var(--text,#eef5ff)}
.data-verification-note p{margin:0;color:var(--muted,#9fb0c5);line-height:1.55}
@media(max-width:640px){.data-verification-note{margin-top:12px;margin-bottom:12px;padding:14px}.data-verification-mark{flex-basis:30px;width:30px;height:30px}}


/* V10.3 ultra experience and data refinement */
:root { --brand-browser:#08111f; --brand-primary:#5143dc; }
.button-primary, .button-primary:visited, .button-primary *, .live-cta, .live-cta *, .games-directory-hero button, .header-search button, .footer-spotlight button { color:#fff!important; -webkit-text-fill-color:#fff!important; }
.button-primary { background:#5143dc!important; border-color:#5143dc!important; }
.button-primary:hover { background:#3f34b8!important; border-color:#3f34b8!important; }
.button-ghost, .button-ghost:visited { color:#172033; -webkit-text-fill-color:#172033; }
.platform-hero .button-ghost, .widgets-hero .button-ghost, .tool-page-hero .button-ghost { color:#fff!important; -webkit-text-fill-color:#fff!important; }
button:disabled { cursor:not-allowed; opacity:.58; }
.install-app-button { display:inline-flex;align-items:center;gap:.45rem;min-height:42px;padding:.6rem .85rem;border:1px solid #d9dfeb;border-radius:12px;background:#fff;color:#172033;font:inherit;font-weight:850;cursor:pointer;white-space:nowrap; }
.install-app-button[hidden] { display:none!important; }.install-app-button svg{width:18px}.install-app-button:hover{border-color:#5143dc;color:#5143dc}
.install-dialog { width:min(92vw,480px);padding:2rem;border:0;border-radius:26px;background:#fff;color:#172033;box-shadow:0 30px 100px rgba(0,0,0,.35);text-align:center; }
.install-dialog::backdrop{background:rgba(4,9,18,.72);backdrop-filter:blur(4px)}.install-dialog-close{position:absolute;top:.8rem;right:.9rem;width:38px;height:38px;border:0;border-radius:50%;background:#eef2f7;color:#172033;font-size:1.6rem;cursor:pointer}.install-dialog-mark{display:grid;place-items:center;width:104px;height:104px;margin:0 auto 1rem;border-radius:26px;background:#08111f}.install-dialog-mark img{width:76px;height:76px;object-fit:contain}.install-dialog h2{font-size:1.8rem;margin:.4rem 0}.install-dialog p{color:#526175;line-height:1.65}.install-dialog-actions{display:flex;justify-content:center;gap:.75rem;margin-top:1.3rem}.install-dialog-actions form{display:contents}
.game-card img,.platform-card>img,.games-hero-mosaic img,.topic-game-card>img,.game-topic-hero aside>img,.platform-hero-image,.recent-card>img{object-fit:cover!important;object-position:center 35%!important}.game-topic-backdrop img,.match-detail-backdrop img{object-fit:cover;object-position:center 30%}.entity-image-logo img,.profile-photo-logo img,.team-mark img,.versus-team .entity-image img{object-fit:contain!important;object-position:center!important;padding:5%;background:#fff}.entity-image-player img,.profile-photo-player img,.profile-roster img{object-fit:cover!important;object-position:center top!important;padding:0;background:#edf1f7}.image-not-available{display:grid;place-items:center;background:#eef2f6}.image-not-available::after{content:'Image unavailable';font-size:.64rem;color:#677286;text-align:center}.team-mark-unavailable{display:grid;place-items:center;width:100%;height:100%;border-radius:inherit;background:#e8edf4;color:#667085;font-size:.72rem;font-weight:900;letter-spacing:.04em}.directory-promise{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.3rem}.directory-promise span{display:inline-flex;align-items:center;gap:.35rem;padding:.5rem .7rem;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.08);font-size:.78rem;font-weight:800}.directory-promise svg{width:16px}.directory-toolbar>span{display:none!important}
.platform-promise>h2{margin:.45rem 0 .75rem;color:#fff;font-size:clamp(1.7rem,3vw,2.35rem)}.platform-promise>p{font-size:1rem}.platform-promise>strong{display:none}
.guide-workspace{display:grid;grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);gap:1.4rem;align-items:start}.guide-workspace-form{position:sticky;top:110px;display:grid;gap:1rem;padding:1.35rem;border:1px solid #dbe3ee;border-radius:22px;background:#fff;box-shadow:0 14px 40px rgba(15,23,42,.06)}.guide-workspace-form.compact{position:sticky}.guide-workspace-form label,.topic-note{display:grid;gap:.45rem}.guide-workspace-form label>span,.topic-note>span{font-weight:850}.guide-workspace-form input,.guide-workspace-form textarea,.topic-note input,.topic-note textarea{width:100%;padding:.85rem 1rem;border:1px solid #cbd5e1;border-radius:12px;background:#fff;color:#172033;font:inherit}.guide-workspace-form textarea,.topic-note textarea{min-height:130px;resize:vertical}.guide-workspace-actions{display:flex;flex-wrap:wrap;gap:.7rem}.guide-save-status{margin:0;color:#536277;font-size:.84rem}.guide-checkable li{padding:0}.guide-checkable li>label{display:grid;grid-template-columns:auto 60px 1fr;gap:1rem;align-items:start;padding:1.4rem;cursor:pointer}.guide-checkable input{margin-top:20px;width:20px;height:20px;accent-color:#5143dc}.guide-checkable li.is-complete{border-color:#8bd3aa;background:#f1fbf5}.guide-checkable li.is-complete h2{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:#78a98d}.guide-checkable small{display:block;margin-top:.5rem;color:#64748b}.topic-checklist ol li label{display:flex;gap:.65rem;align-items:flex-start;cursor:pointer}.topic-checklist ol input{margin-top:.2rem;accent-color:#5143dc}.topic-note{margin-top:1rem}.topic-note textarea{min-height:90px}.topic-checklist .guide-workspace-actions{margin-top:1rem}
.pickem-toolbar{display:flex;gap:.7rem;flex-wrap:wrap}.pickem-feedback{margin:0 0 1rem;padding:.85rem 1rem;border-radius:12px;background:#eef5ff;color:#273b66;font-weight:800}.pickem-mini-stats{display:flex;justify-content:center;gap:1rem;margin:.55rem 0 1rem}.pickem-mini-stats span{font-size:.72rem;color:#cbd5e1}.pickem-mini-stats b{display:block;color:#fff;font-size:1rem}.pickem-card .team-mark img{width:100%;height:100%}.pickem-card footer a{display:flex;justify-content:center;align-items:center;gap:.35rem;color:#5143dc;font-weight:850}.pickem-card footer svg{width:16px}.pickem-choices button.is-picked{outline:3px solid #5143dc;background:#f0eeff;color:#241d68}.pickem-choices button.is-picked small{color:#3f34b8}.pick-correct{color:#087443!important;font-weight:850}.pick-wrong{color:#a43131!important;font-weight:850}
@media (max-width:980px){.install-app-button span{display:none}.guide-workspace{grid-template-columns:1fr}.guide-workspace-form{position:static}.guide-checkable li>label{grid-template-columns:auto 52px 1fr}}
@media (max-width:640px){.install-dialog-actions,.pickem-toolbar,.guide-workspace-actions{flex-direction:column}.install-dialog-actions>* ,.pickem-toolbar>* ,.guide-workspace-actions>*{width:100%}.guide-checkable li>label{grid-template-columns:auto 1fr}.guide-checkable li>label>span{grid-column:2}.guide-checkable li>label>div{grid-column:2}.header-cta .install-app-button{display:none!important}}

/* 2PVP V10.3 — premium competition interface */
:root{
  --ink:#f4f7ff;--ink-2:#dbe4f4;--muted:#a2aec3;--muted-2:#77849b;
  --canvas:#08111f;--surface:#111c2f;--line:#25334a;--line-strong:#34445f;
  --violet:#7b6cff;--violet-dark:#9a8fff;--violet-soft:#201d49;--cyan:#25c2ff;
  --cyan-soft:#0d3145;--lime:#b8e841;--lime-soft:#233718;--navy:#08111f;
  --shadow-sm:0 10px 34px rgba(0,0,0,.18);--shadow-md:0 22px 70px rgba(0,0,0,.34)
}
body{background:var(--canvas);color:var(--ink)}p{color:var(--muted)}::selection{color:#fff;background:#5e50dd}
.site-header{border-color:#1d2a40;background:rgba(8,17,31,.94)}.header-inner,.portal-header-inner{color:var(--ink)}
.desktop-nav a,.portal-main-nav a,.portal-main-nav summary{color:#aab6ca}.desktop-nav a:hover,.desktop-nav a[aria-current=page],.portal-main-nav a:hover,.portal-main-nav a[aria-current=page],.portal-main-nav summary:hover{color:#fff}
.header-search,.search-trigger{border-color:var(--line);background:#111c2d;color:#9aa8bf}.header-search input,.search-trigger input{color:#fff;background:transparent}.header-search input::placeholder{color:#738198}.header-search button{color:#fff;background:var(--violet)}
.menu-button,.portal-menu-button{border-color:var(--line);background:#111c2d;color:#fff}.menu-button i{background:#fff}.mobile-nav{background:rgba(8,17,31,.99)}.mobile-nav a{border-color:var(--line);color:#e7edf8}.mobile-nav h2{color:#8290a7}
.breadcrumbs{color:#8390a5}.breadcrumbs li:not(:last-child)::after{color:#3c4a61}.breadcrumbs a:hover{color:#b6adff}
.button-primary{color:#fff;background:linear-gradient(135deg,#7869ff,#5647d9)}.button-primary:hover{background:linear-gradient(135deg,#8a7dff,#6556e7)}
.button-ghost{color:#e8edfa;border-color:#40506b;background:#111c2f}.button-ghost:hover{color:#fff;border-color:#796aff;background:#18243a}.button-light{color:#101728;background:#fff}.text-link{color:#edf2fc}
input,select,textarea{color:#f4f7ff;border-color:#34435c!important;background:#0e192b!important}input::placeholder,textarea::placeholder{color:#718098}
.section-tint{background:#0b1627}.section-kicker,.eyebrow{color:#9e93ff}.schedule-note{color:#79869d}
.portal-hero{border-color:#1d2a40;background:radial-gradient(circle at 12% 4%,rgba(107,91,255,.24),transparent 30%),radial-gradient(circle at 92% 12%,rgba(0,168,232,.16),transparent 28%),linear-gradient(135deg,#091321 0%,#0d1729 58%,#111d31 100%)}
.portal-hero::after{border-color:rgba(123,108,255,.08)}.portal-hero h1{color:#fff}.portal-hero h1 em{color:#9e92ff}.portal-hero-copy>p{color:#a8b4c8}
.game-finder,.quick-rail-inner,.match-filter-panel,.event-filter-bar{border-color:var(--line);background:#101c2f;box-shadow:var(--shadow-sm)}.finder-heading small,.filter-panel-top small{color:#8491a7}
.hero-showcase>a,.showcase-count{border-color:#1e2b41;background:#111c2f;box-shadow:0 18px 50px rgba(0,0,0,.35)}.showcase-count{background:linear-gradient(135deg,#6d5eff,#3e319f)}
.quick-rail{border-color:#1d2a40;background:#0a1424}.quick-rail-inner>a{border-color:var(--line);background:#111c2f;color:#eef3fc}.quick-rail-inner small{color:#8f9cb1}
.match-card,.game-card,.event-card,.command-card,.entity-card,.friendly-empty,.empty-panel,.topic-game-card,.topic-checklist,.guide-workspace-form,.match-watch-card,.match-time-card,.event-game-promo,.ranked-dashboard,.tool-card,.article-card{border-color:var(--line);background:#111c2f;color:#eef3fc;box-shadow:var(--shadow-sm)}
.match-card:hover,.game-card:hover,.event-card:hover,.command-card:hover,.entity-card:hover{border-color:#5d55a4;box-shadow:0 20px 55px rgba(0,0,0,.28)}
.match-card-top,.match-card-foot{border-color:var(--line);background:#0d1829;color:#8f9cb1}.game-tag{color:#e9eff9}.match-card-foot a{color:#a99fff}.match-team small{color:#77859d}.team-mark,.entity-image-logo,.event-logo,.team-logo-stage{border:1px solid #d9dfeb;background:linear-gradient(145deg,#fff,#e9edf5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),0 12px 28px rgba(0,0,0,.18)}
.team-mark img,.entity-image-logo img,.event-logo img,.team-logo-stage img{object-fit:contain;filter:none}.team-slot-icon{display:grid;width:100%;height:100%;place-items:center;color:#7a879b}.team-slot-icon .icon{width:19px}.match-team-name{display:grid;min-width:0}.match-team-name strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.match-team-name small{display:flex;align-items:center;gap:5px;font-size:.62rem}.match-team.is-pending strong{color:#b9c3d3;font-weight:650}
.game-card-copy{background:#111c2f}.game-card-copy>span{color:#9e93ff}.game-card-copy h3{color:#fff}.game-card-copy p{color:#99a6bc}
.command-card{background:linear-gradient(145deg,#111c2f,#0d1728)}.command-card>span{color:#b3aaff;background:#211e49}.command-card small{color:#9e93ff}.command-card-featured{background:#0a1424}
.home-tool-station,.home-command-center,.game-discovery{background:#0b1627}.home-tool-grid>a,.topic-action-grid>a,.topic-tool-grid>a{border-color:var(--line);background:#111c2f;color:#fff}.home-tool-grid>a p,.topic-action-grid>a p,.topic-tool-grid>a p{color:#98a5bb}
.event-card-rich{grid-template-columns:96px minmax(0,1fr) auto;gap:20px;padding:18px}.event-card-rich .event-logo{display:grid;width:88px;height:88px;place-items:center;overflow:hidden;border-radius:17px}.event-card-rich .event-logo img{width:72px;height:72px;object-fit:contain}.event-card-rich .event-copy h3{margin:4px 0 5px;font-size:1.12rem}.event-card-rich .event-copy p{margin:0 0 14px}.event-card-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.event-card-facts span{display:grid;gap:2px;padding:9px 11px;border:1px solid #25344c;background:#0d1829;border-radius:10px}.event-card-facts small{color:#77869e;font-size:.56rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.event-card-facts strong{overflow:hidden;color:#e8eef9;font-size:.69rem;text-overflow:ellipsis;white-space:nowrap}.event-card-open{display:inline-flex;align-items:center;gap:7px;color:#b1a9ff;font-size:.72rem;font-weight:800}.event-card-open .icon{width:15px}
.portal-event-list,.topic-event-list{grid-template-columns:1fr!important}.event-list-page .event-card{border-color:var(--line)}
.match-center-hero,.events-hero,.directory-hero,.games-directory-hero{background:radial-gradient(circle at 10% 8%,rgba(123,108,255,.22),transparent 28%),radial-gradient(circle at 90% 12%,rgba(37,194,255,.13),transparent 30%),linear-gradient(135deg,#08111f,#111c31)}
.match-center-hero aside,.hero-match-stats>div{border-color:#2a3850;background:rgba(17,28,47,.86)}
.fact-grid>div,.match-fact-strip>div{border-color:var(--line);background:#101c2f}.fact-grid dt,.match-fact-strip span{color:#7d8ba2}.fact-grid dd,.match-fact-strip strong{color:#f0f4fb}
.match-detail-nav{border-color:#26344a;background:rgba(8,17,31,.96)}.match-detail-nav a{color:#8f9bb0}.match-detail-nav a:hover{color:#fff}
.match-command-hero{position:relative;overflow:hidden;color:#fff;background:#08111f}.match-command-backdrop{position:absolute;inset:0}.match-command-backdrop::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,17,31,.78),rgba(8,17,31,.97)),radial-gradient(circle at 50% 10%,color-mix(in srgb,var(--game-accent,#6f61ff) 32%,transparent),transparent 55%)}.match-command-backdrop img{width:100%;height:100%;object-fit:cover;filter:blur(18px);opacity:.35;transform:scale(1.1)}.match-command-inner{position:relative;padding-block:46px 52px}.match-command-topline{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:14px;color:#aab6ca;font-size:.73rem}.match-command-topline>div{display:flex;gap:8px;align-items:center}.match-command-topline a{color:#dce4f3}.match-state{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid #33445f;background:#111c2f;border-radius:999px;color:#dfe6f2;font-size:.65rem;letter-spacing:.06em;text-transform:uppercase}.match-state i{width:7px;height:7px;background:#ff5968;border-radius:50%;box-shadow:0 0 0 4px rgba(255,89,104,.14)}.match-command-hero h1{max-width:850px;margin:0 auto 8px;color:#fff;text-align:center;font-size:clamp(1.9rem,4vw,3.8rem)}.bracket-slot-note{max-width:720px;margin:0 auto 24px;color:#abb7ca;text-align:center}.match-command-board{display:grid;grid-template-columns:minmax(0,1fr) 180px minmax(0,1fr);align-items:stretch;gap:18px;margin-top:28px}.match-side{position:relative;display:grid;grid-template-columns:136px minmax(0,1fr) auto;align-items:center;gap:22px;min-height:184px;padding:22px;border:1px solid #2d3b55;background:linear-gradient(145deg,rgba(18,30,50,.96),rgba(12,23,40,.92));border-radius:24px}.match-side:nth-of-type(3){grid-template-columns:auto minmax(0,1fr) 136px;text-align:right}.match-side:nth-of-type(3) .team-logo-stage{grid-column:3}.match-side:nth-of-type(3) .match-side-copy{grid-column:2;grid-row:1}.team-logo-stage{display:grid;width:136px;height:136px;place-items:center;overflow:hidden;border-radius:24px}.team-logo-stage img{width:110px;height:110px}.bracket-slot-mark{display:grid;width:100%;height:100%;place-items:center;color:#7c899f}.bracket-slot-mark .icon{width:42px}.match-side h2{margin:4px 0 7px;color:#fff;font-size:clamp(1.35rem,2.2vw,2.3rem)}.match-side p{margin:0;color:#8f9db3;font-size:.73rem}.team-region{display:inline-flex;align-items:center;gap:7px;color:#9ca9bd;font-size:.63rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.team-region b{font-size:1rem}.match-score{font-size:2.6rem}.match-command-center{display:grid;place-items:center;align-content:center;gap:10px;text-align:center}.match-command-center>span{color:#91a0b7;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.match-command-center>b{display:grid;width:78px;height:78px;place-items:center;border:1px solid #42516a;background:#101c2f;border-radius:50%;font-size:1.05rem}.match-command-center time,.match-command-center small{color:#b8c3d4;font-size:.7rem}.match-command-actions{justify-content:center;margin-top:22px}.match-command-actions .save-action{color:#f4f7ff;border-color:#384963;background:#111d30}.match-command-actions .save-action:hover{border-color:#7469cf;background:#1a2740}
.match-dashboard-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:28px;align-items:start}.match-fact-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.match-fact-strip>div{display:grid;gap:5px;padding:16px;border-radius:14px}.match-fact-strip span{font-size:.58rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.match-fact-strip strong{font-size:.82rem}.event-route-card{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:15px;margin-top:14px;padding:14px;border:1px solid var(--line);background:#101c2f;border-radius:16px}.event-route-card>span{display:grid;width:60px;height:60px;place-items:center;overflow:hidden;border:1px solid #d7deea;background:#fff;border-radius:13px}.event-route-card>span img{width:50px;height:50px;object-fit:contain}.event-route-card small{color:#8f9cb1}.event-route-card strong{display:block;color:#fff}.event-route-card p{margin:2px 0 0;font-size:.7rem}.event-route-card>.icon{color:#9e93ff}
.match-watch-card{padding:22px;border-radius:18px}.match-watch-card.is-quiet p{margin:0}.match-watch-card a{border-color:#2b3a52;color:#cfcaff}.match-watch-card h2{color:#fff}.match-outlook-section{background:linear-gradient(180deg,#0b1627,#0a1423)}.confidence-pill{display:inline-flex;align-items:center;padding:8px 12px;border:1px solid #3a4a64;background:#111c2f;border-radius:999px;color:#b8c4d6;font-size:.68rem;font-weight:800}.outlook-grid{display:grid;grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr);gap:18px}.prediction-card{padding:24px;border:1px solid #2d3b54;background:linear-gradient(145deg,#111d31,#0e1829);border-radius:20px}.prediction-head{display:flex;justify-content:space-between;gap:15px;color:#eef3fb}.prediction-head strong{font-size:1.35rem}.prediction-bar{height:10px;margin:11px 0 18px;overflow:hidden;background:#24324a;border-radius:999px}.prediction-bar i{display:block;height:100%;background:linear-gradient(90deg,#25c2ff,#7b6cff);border-radius:inherit}.prediction-card p{margin:20px 0 0;font-size:.73rem}.outlook-factors{display:grid;gap:10px}.outlook-factors article{display:grid;grid-template-columns:42px 1fr;gap:14px;padding:17px;border:1px solid #26354d;background:#101c2f;border-radius:16px}.outlook-factors article>span{display:grid;width:42px;height:42px;place-items:center;color:#b7e533;background:#21341a;border-radius:12px}.outlook-factors h3{margin:1px 0 5px;color:#fff;font-size:1rem}.outlook-factors p{margin:0;font-size:.72rem}.related-match-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}.related-match-tabs button{padding:9px 13px;color:#9ca9bd;border:1px solid #2d3b54;background:#101c2f;border-radius:999px;cursor:pointer}.related-match-tabs button.is-active{color:#fff;border-color:#7569ff;background:#6558e6}.match-next-paths-dark{background:#070f1c}
.match-grid>[data-related-event]{min-width:0}.match-grid>[data-related-event]>.match-card{height:100%}
.global-discovery,.discovery-grid a{color:#edf2fb}.discovery-grid a{border-color:var(--line);background:#111c2f}.site-footer{border-color:#1e2b41}.footer-spotlight{background:#101b2d}.footer-grid a,.footer-bottom{color:#909db1}
.mobile-bottom-nav{border-color:#25334a;background:rgba(8,17,31,.97)}.mobile-bottom-nav a{color:#77859b}.mobile-bottom-nav a[aria-current=page]{color:#9e93ff}
@media(max-width:980px){.match-command-board{grid-template-columns:1fr 110px 1fr}.match-side{grid-template-columns:92px 1fr;gap:14px;padding:16px}.match-side:nth-of-type(3){grid-template-columns:1fr 92px}.team-logo-stage{width:92px;height:92px;border-radius:18px}.team-logo-stage img{width:76px;height:76px}.match-score{position:absolute;right:14px;bottom:8px}.match-side:nth-of-type(3) .match-score{right:auto;left:14px}.match-dashboard-grid,.outlook-grid{grid-template-columns:1fr}.match-fact-strip{grid-template-columns:repeat(2,1fr)}.event-card-rich{grid-template-columns:82px 1fr}.event-card-rich .event-logo{width:76px;height:76px}.event-card-open{grid-column:2}.event-card-facts{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.wrap{width:min(calc(100% - 28px),var(--wrap))}.portal-hero{padding-top:34px}.match-command-inner{padding-block:30px}.match-command-topline{align-items:flex-start}.match-command-topline>div{flex-wrap:wrap}.match-command-board{grid-template-columns:1fr;gap:12px}.match-command-center{grid-row:2;display:flex;justify-content:center}.match-command-center>b{width:52px;height:52px}.match-side,.match-side:nth-of-type(3){grid-template-columns:80px minmax(0,1fr);text-align:left}.match-side:nth-of-type(3) .team-logo-stage{grid-column:1}.match-side:nth-of-type(3) .match-side-copy{grid-column:2}.team-logo-stage{width:80px;height:80px}.team-logo-stage img{width:66px;height:66px}.match-side{min-height:126px}.match-side h2{font-size:1.25rem}.match-command-actions{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}.match-command-actions .save-action{flex:0 0 auto}.match-fact-strip{grid-template-columns:1fr 1fr}.event-card-rich{grid-template-columns:66px 1fr;gap:13px;padding:14px}.event-card-rich .event-logo{width:62px;height:62px}.event-card-rich .event-logo img{width:52px;height:52px}.event-card-facts{grid-template-columns:1fr 1fr}.event-card-facts span:last-child{grid-column:1/-1}.event-card-open{grid-column:1/-1;justify-content:flex-end}.outlook-grid{grid-template-columns:1fr}.prediction-card{padding:18px}.portal-event-list,.topic-event-list{grid-template-columns:1fr!important}}

/* 2PVP V10.3.1 — ultra dark competition system -------------------------- */
:root {
  color-scheme: dark;
  --ink: #f4f7fb;
  --ink-2: #d9e0ea;
  --muted: #9aa6b7;
  --muted-2: #748196;
  --canvas: #05070b;
  --surface: #0d1118;
  --line: #222a36;
  --line-strong: #323c4c;
  --violet: #8a7cff;
  --violet-dark: #a79dff;
  --violet-soft: rgba(138,124,255,.13);
  --cyan: #45c8ff;
  --cyan-soft: rgba(69,200,255,.12);
  --lime: #b9ed54;
  --lime-soft: rgba(185,237,84,.11);
  --coral: #ff5368;
  --navy: #080b11;
  --success: #40d29c;
  --warning: #f0a84b;
  --danger: #ff5f70;
  --shadow-sm: 0 1px 0 rgba(255,255,255,.025), 0 12px 34px rgba(0,0,0,.22);
  --shadow-md: 0 26px 75px rgba(0,0,0,.42);
}
html { background: #05070b; }
body.theme-ultra-dark { color: var(--ink); background: #05070b; }
.theme-ultra-dark main { min-height: 60vh; background: #05070b; }
.theme-ultra-dark p { color: var(--muted); }
.theme-ultra-dark ::selection { color: #fff; background: #5e52d7; }
.theme-ultra-dark :focus-visible { outline-color: #7ed9ff; }
.theme-ultra-dark input,
.theme-ultra-dark select,
.theme-ultra-dark textarea { color: #edf2fa; color-scheme: dark; }
.theme-ultra-dark input::placeholder,
.theme-ultra-dark textarea::placeholder { color: #6f7c90; opacity: 1; }
.theme-ultra-dark select option { color: #eef3fb; background: #0d131d; }

/* Header and navigation */
.theme-ultra-dark .portal-header { color: #f4f7fb; border-bottom: 1px solid #1c2430; background: rgba(5,7,11,.96); box-shadow: 0 10px 34px rgba(0,0,0,.28); backdrop-filter: blur(20px); }
.theme-ultra-dark .header-utility { border-bottom: 1px solid #171e29; background: #030509; }
.theme-ultra-dark .utility-inner p { color: #8995a8; }
.theme-ultra-dark .utility-inner nav { color: #7e8a9d; }
.theme-ultra-dark .header-main .brand { align-items: center; gap: 12px; color: #fff; font-size: 1.35rem; font-weight: 760; letter-spacing: -.04em; }
.theme-ultra-dark .header-main .brand img { width: 44px; height: 44px; object-fit: contain; }
.theme-ultra-dark .header-search { border-color: #253041; background: #0b111a; box-shadow: inset 0 1px 0 rgba(255,255,255,.02); }
.theme-ultra-dark .header-search:focus-within { border-color: #665dd0; background: #0e1520; box-shadow: 0 0 0 4px rgba(138,124,255,.1); }
.theme-ultra-dark .header-search .icon { color: #7f8da2; }
.theme-ultra-dark .header-search input { overflow: hidden; color: #eef3fb; text-overflow: ellipsis; white-space: nowrap; }
.theme-ultra-dark .header-search kbd { color: #8995a8; border-color: #303a49; background: #111824; }
.theme-ultra-dark .header-search button { color: #fff; background: #6f61eb; }
.theme-ultra-dark .header-search button:hover { background: #8174f7; }
.theme-ultra-dark .live-cta { border: 1px solid #252f3e; background: #0d131d; }
.theme-ultra-dark .install-app-button,
.theme-ultra-dark .portal-header .menu-button { color: #edf2fa; border-color: #263142; background: #0b111a; }
.theme-ultra-dark .portal-header .menu-button:hover,
.theme-ultra-dark .portal-header .menu-button[aria-expanded="true"] { border-color: #544bb7; background: #121827; }
.theme-ultra-dark .nav-shell { border-color: #1b2330; background: #070a0f; }
.theme-ultra-dark .portal-header .desktop-nav > a,
.theme-ultra-dark .portal-header .desktop-nav summary { color: #a4afbf; }
.theme-ultra-dark .portal-header .desktop-nav summary .icon,
.theme-ultra-dark .portal-header .desktop-nav > a .icon { color: #738096; }
.theme-ultra-dark .portal-header .desktop-nav > a:hover,
.theme-ultra-dark .portal-header .desktop-nav summary:hover,
.theme-ultra-dark .portal-header .desktop-nav [aria-current="page"],
.theme-ultra-dark .nav-mega[open] summary { color: #fff; background: #111722; }
.theme-ultra-dark .portal-header .desktop-nav [aria-current="page"] .icon { color: #9b8fff; }
.theme-ultra-dark .mega-panel { color: #edf2fa; border-color: #252e3c; background: #0b1018; box-shadow: 0 28px 75px rgba(0,0,0,.58); }
.theme-ultra-dark .mega-intro,
.theme-ultra-dark .mega-feature { border-color: #252e3c; }
.theme-ultra-dark .mega-game-grid > a:hover,
.theme-ultra-dark .mega-link-group > a:hover { border-color: #343e50; background: #141b27; }
.theme-ultra-dark .mega-links a,
.theme-ultra-dark .mega-game-grid small,
.theme-ultra-dark .mega-link-group small { color: #8996a9; }
.theme-ultra-dark .mega-links strong,
.theme-ultra-dark .mega-link-group > strong { color: #788599; }
.theme-ultra-dark .mega-icon { background: rgba(138,124,255,.12); }

/* Mobile menu: fully dark and readable */
.theme-ultra-dark .portal-header .mobile-nav { color: #f3f6fb; background: rgba(5,7,11,.995); }
.theme-ultra-dark .mobile-nav-groups { align-content: start; }
.theme-ultra-dark .mobile-nav-groups section { border-color: #242d3a; background: #0b1017; box-shadow: 0 18px 44px rgba(0,0,0,.22); }
.theme-ultra-dark .mobile-nav-groups h2 { color: #7f8ca0; }
.theme-ultra-dark .portal-header .mobile-nav-groups a { color: #eef3fb; border-color: #252e3b; }
.theme-ultra-dark .portal-header .mobile-nav-groups a:hover,
.theme-ultra-dark .portal-header .mobile-nav-groups a:focus-visible { color: #fff; background: #131a25; }
.theme-ultra-dark .mobile-nav-groups a .icon { color: #9184ff; }
.theme-ultra-dark .mobile-popular img { border: 1px solid #283343; background: #111824; }
.theme-ultra-dark .mobile-bottom-nav { border-color: #202938; background: rgba(5,8,13,.985); box-shadow: 0 -12px 40px rgba(0,0,0,.42); }
.theme-ultra-dark .mobile-bottom-nav a { color: #738096; }
.theme-ultra-dark .mobile-bottom-nav a[aria-current="page"] { color: #9d91ff; }

/* Core page surfaces */
.theme-ultra-dark .section,
.theme-ultra-dark .section-tint,
.theme-ultra-dark .section-soft,
.theme-ultra-dark .section-light { color: #eef3fb; background: #05070b; }
.theme-ultra-dark .section-tint { border-color: #171f2a; background: #080b11; }
.theme-ultra-dark .section-heading h2,
.theme-ultra-dark .centered-heading h2,
.theme-ultra-dark .split-heading h2,
.theme-ultra-dark .prose-intro h2 { color: #f4f7fb; }
.theme-ultra-dark .section-kicker,
.theme-ultra-dark .eyebrow { color: #9d91ff; }
.theme-ultra-dark .text-link { color: #f1f4fa; }
.theme-ultra-dark .text-link span,
.theme-ultra-dark .text-link .icon { color: #9d91ff; }
.theme-ultra-dark .breadcrumbs { color: #7f8b9e; }
.theme-ultra-dark .breadcrumbs li:not(:last-child)::after { color: #3a4453; }
.theme-ultra-dark .breadcrumbs a:hover { color: #a99fff; }
.theme-ultra-dark .schedule-note,
.theme-ultra-dark .filter-empty { color: #788599; }

/* Home */
.theme-ultra-dark .portal-hero { color: #f6f8fc; border-color: #171d27; background: radial-gradient(circle at 86% 4%,rgba(69,200,255,.055),transparent 25%),linear-gradient(145deg,#05070b 0%,#070a0f 58%,#090d13 100%); }
.theme-ultra-dark .portal-hero::after { border-color: rgba(138,124,255,.035); }
.theme-ultra-dark .hero-live-line { color: #8d99ab; }
.theme-ultra-dark .portal-hero h1 { color: #f8f9fc; }
.theme-ultra-dark .portal-hero h1 em { color: #9588ff; }
.theme-ultra-dark .portal-hero-copy > p { color: #a7b1c1; }
.theme-ultra-dark .game-finder { border-color: #273142; background: rgba(10,15,23,.88); box-shadow: 0 28px 70px rgba(0,0,0,.34); }
.theme-ultra-dark .finder-heading strong { color: #f4f7fb; }
.theme-ultra-dark .finder-heading small { color: #7f8ca0; }
.theme-ultra-dark .finder-fields label { border-color: #2a3444; background: #0e151f; }
.theme-ultra-dark .finder-fields label > span { color: #7b8799; }
.theme-ultra-dark .finder-fields select { color: #eef3fb; background-color: #0e151f; }
.theme-ultra-dark .finder-fields button { color: #fff; background: #7163ee; box-shadow: 0 12px 28px rgba(72,59,194,.25); }
.theme-ultra-dark .finder-fields button:hover { background: #8275f9; }
.theme-ultra-dark .hero-trending { color: #788599; }
.theme-ultra-dark .hero-trending a { color: #b8c2d1; border-color: #2b3544; background: #0c121b; }
.theme-ultra-dark .showcase-count { color: #f1f5fb; border-color: #283343; background: #0d141f; }
.theme-ultra-dark .showcase-count span { color: #8995a7; }
.theme-ultra-dark .quick-rail { border-color: #1c2531; background: #080b11; }
.theme-ultra-dark .quick-rail-inner > a { border-color: #242d3b; background: #0d121a; }
.theme-ultra-dark .quick-rail-inner > a:hover { border-color: #3d4960; background: #111823; }
.theme-ultra-dark .quick-rail-inner strong { color: #f2f5fa; }
.theme-ultra-dark .quick-rail-inner small { color: #7f8b9d; }
.theme-ultra-dark .rail-icon { background: #141b26; }

/* Buttons, filters and controls */
.theme-ultra-dark .button-primary { color: #fff; background: #7163ee; box-shadow: 0 12px 30px rgba(80,66,209,.23); }
.theme-ultra-dark .button-primary:hover { background: #8376f7; }
.theme-ultra-dark .button-ghost,
.theme-ultra-dark .save-action { color: #eef3fb; border-color: #303b4c; background: #0e151f; }
.theme-ultra-dark .button-ghost:hover,
.theme-ultra-dark .save-action:hover { color: #fff; border-color: #655bc9; background: #151d2a; }
.theme-ultra-dark .button-dark { color: #fff; background: #0b1017; }
.theme-ultra-dark .button-light { color: #0b1017; background: #f4f6fa; }
.theme-ultra-dark .match-filter-panel,
.theme-ultra-dark .event-filter-bar,
.theme-ultra-dark .directory-toolbar { border-color: #273141; background: #0b1018; box-shadow: var(--shadow-sm); }
.theme-ultra-dark .filter-panel-top,
.theme-ultra-dark .filter-panel-fields { border-color: #252f3d; }
.theme-ultra-dark .filter-panel-fields .filter-group,
.theme-ultra-dark .event-filter-bar .filter-group { border-color: #273142; background: #080d14; }
.theme-ultra-dark .filter-panel-fields .filter-group button,
.theme-ultra-dark .event-filter-bar .filter-group button { color: #8793a6; }
.theme-ultra-dark .filter-panel-fields .filter-group button.is-active,
.theme-ultra-dark .event-filter-bar .filter-group button.is-active,
.theme-ultra-dark .home-match-tabs button.is-active { color: #fff; background: #252e3c; box-shadow: none; }
.theme-ultra-dark .filter-panel-fields > label,
.theme-ultra-dark .event-filter-bar label,
.theme-ultra-dark .directory-toolbar > div,
.theme-ultra-dark .directory-toolbar label { border-color: #2a3444; background: #0e151f; }
.theme-ultra-dark .filter-panel-fields select,
.theme-ultra-dark .filter-panel-fields input,
.theme-ultra-dark .event-filter-bar select,
.theme-ultra-dark .directory-toolbar input,
.theme-ultra-dark .directory-toolbar select { color: #eef3fb; }
.theme-ultra-dark .home-match-tabs button,
.theme-ultra-dark .related-match-tabs button { color: #8f9bae; border-color: #2a3546; background: #0c121b; }
.theme-ultra-dark .home-match-tabs button:hover,
.theme-ultra-dark .related-match-tabs button:hover { color: #fff; border-color: #4a556b; }

/* Match cards and match pages */
.theme-ultra-dark .match-card { color: #eef3fb; border-color: #273244; background: #0d141f; box-shadow: 0 15px 38px rgba(0,0,0,.2); }
.theme-ultra-dark .match-card:hover { border-color: #5048a8; background: #101925; box-shadow: 0 22px 48px rgba(0,0,0,.34); }
.theme-ultra-dark .match-card-top,
.theme-ultra-dark .match-card-foot { color: #8794a8; border-color: #283343; background: #0a1018; }
.theme-ultra-dark .match-card-body { background: #0d141f; }
.theme-ultra-dark .match-team { border-color: #252f3e; }
.theme-ultra-dark .match-team-name strong { color: #f3f6fb; }
.theme-ultra-dark .match-team-name small { display: flex; align-items: center; gap: 6px; color: #7f8b9d; }
.theme-ultra-dark .match-team-name small b,
.theme-ultra-dark .entity-region b,
.theme-ultra-dark .team-region b { font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; font-size: 1rem; line-height: 1; }
.theme-ultra-dark .team-country .icon { width: 13px; height: 13px; }
.theme-ultra-dark .team-country.is-global { color: #758297; }
.theme-ultra-dark .match-team em { color: #f4f7fb; }
.theme-ultra-dark .team-mark,
.theme-ultra-dark .team-logo-stage,
.theme-ultra-dark .event-logo,
.theme-ultra-dark .event-route-card > span,
.theme-ultra-dark .entity-image-logo,
.theme-ultra-dark .profile-photo-logo { border: 1px solid #d8dee8; background: radial-gradient(circle at 32% 25%,#fff,#edf1f6); box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), 0 8px 18px rgba(0,0,0,.18); }
.theme-ultra-dark .team-mark img,
.theme-ultra-dark .team-logo-stage img,
.theme-ultra-dark .event-logo img,
.theme-ultra-dark .event-route-card > span img,
.theme-ultra-dark .entity-image-logo img,
.theme-ultra-dark .profile-photo-logo img { object-fit: contain; filter: drop-shadow(0 3px 5px rgba(10,16,26,.12)); }
.theme-ultra-dark .team-mark.image-not-available,
.theme-ultra-dark .team-logo-stage.image-not-available,
.theme-ultra-dark .event-logo.image-not-available { color: #69768a; background: #e9edf3; }
.theme-ultra-dark .match-center-hero,
.theme-ultra-dark .events-hero,
.theme-ultra-dark .directory-hero,
.theme-ultra-dark .games-directory-hero { color: #f5f7fb; background: radial-gradient(circle at 85% 10%,rgba(62,177,255,.075),transparent 28%),linear-gradient(145deg,#05070b,#080d15 65%,#0a101a); }
.theme-ultra-dark .match-center-hero h1,
.theme-ultra-dark .events-hero h1,
.theme-ultra-dark .directory-hero h1,
.theme-ultra-dark .games-directory-hero h1 { color: #f7f9fc; }
.theme-ultra-dark .match-center-hero h1 em,
.theme-ultra-dark .events-hero h1 em { color: #9488ff; }
.theme-ultra-dark .match-center-hero p,
.theme-ultra-dark .events-hero p,
.theme-ultra-dark .directory-hero p { color: #9ea9b9; }
.theme-ultra-dark .match-center-hero aside,
.theme-ultra-dark .hero-match-stats > div { border-color: #293445; background: rgba(13,20,31,.92); }
.theme-ultra-dark .match-center-hero aside h2 { color: #f4f7fb; }
.theme-ultra-dark .match-center-hero aside time { color: #a8b3c3; }
.theme-ultra-dark .match-command-hero { background: #05070b; }
.theme-ultra-dark .match-command-backdrop::after { background: linear-gradient(180deg,rgba(5,7,11,.82),rgba(5,7,11,.985)),radial-gradient(circle at 50% 8%,color-mix(in srgb,var(--game-accent,#7163ee) 18%,transparent),transparent 52%); }
.theme-ultra-dark .match-side { border-color: #293547; background: linear-gradient(145deg,rgba(15,22,33,.98),rgba(9,14,22,.98)); }
.theme-ultra-dark .match-command-center > b,
.theme-ultra-dark .match-state { border-color: #354256; background: #0d141f; }
.theme-ultra-dark .match-detail-nav { border-color: #202a38; background: rgba(5,7,11,.97); }
.theme-ultra-dark .match-fact-strip > div,
.theme-ultra-dark .fact-grid > div { border-color: #273244; background: #0d141f; }
.theme-ultra-dark .match-outlook-section { background: #070a0f; }
.theme-ultra-dark .prediction-card,
.theme-ultra-dark .outlook-factors article { border-color: #283447; background: #0d141f; }
.theme-ultra-dark .prediction-bar { background: #222c3b; }
.theme-ultra-dark .event-route-card { border-color: #283446; background: #0d141f; }
.theme-ultra-dark .match-next-paths-dark { background: #05070b; }

/* Events */
.theme-ultra-dark .event-card,
.theme-ultra-dark .event-card-rich { color: #eef3fb; border-color: #283344; background: #0d141f; box-shadow: 0 16px 40px rgba(0,0,0,.2); }
.theme-ultra-dark .event-card:hover,
.theme-ultra-dark .event-card-rich:hover { border-color: #4b55a3; background: #101925; }
.theme-ultra-dark .event-copy h3,
.theme-ultra-dark .event-card h3 { color: #f2f5fa; }
.theme-ultra-dark .event-copy p { color: #8491a4; }
.theme-ultra-dark .event-card-facts { background: #090f17; }
.theme-ultra-dark .event-card-facts span { border-color: #253041; }
.theme-ultra-dark .event-card-facts small { color: #77859a; }
.theme-ultra-dark .event-card-facts strong { color: #e9eef7; }
.theme-ultra-dark .event-card-open { color: #a99fff; }
.theme-ultra-dark .event-hero-collage a { border-color: #283344; background: #0d141f; }
.theme-ultra-dark .event-game-browser a { border-color: #273243; background: #0d141f; }

/* Team and player directories */
.theme-ultra-dark .entity-card { color: #eef3fb; border-color: #293445; background: #0d141f; box-shadow: 0 15px 38px rgba(0,0,0,.2); }
.theme-ultra-dark .entity-card:hover { border-color: #4f48a8; background: #111925; box-shadow: 0 23px 50px rgba(0,0,0,.34); }
.theme-ultra-dark .entity-card h2,
.theme-ultra-dark .entity-card h3 { color: #f3f6fb; }
.theme-ultra-dark .entity-card p { color: #8794a7; }
.theme-ultra-dark .entity-card strong { color: #a99fff; }
.theme-ultra-dark .entity-card-meta,
.theme-ultra-dark .roster-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-width: 0; }
.theme-ultra-dark .entity-card-meta > small,
.theme-ultra-dark .roster-meta > small { overflow: hidden; color: #8b98aa; text-overflow: ellipsis; white-space: nowrap; }
.theme-ultra-dark .entity-region { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; color: #aeb8c7; font-size: .58rem; font-weight: 780; letter-spacing: .04em; text-transform: uppercase; }
.theme-ultra-dark .entity-region .icon { width: 12px; height: 12px; }
.theme-ultra-dark .entity-region.is-global { color: #758297; }
.theme-ultra-dark .entity-image-player,
.theme-ultra-dark .profile-photo-player,
.theme-ultra-dark .profile-roster > a > span { border-color: #2e3949; background: #111824; }
.theme-ultra-dark .profile-hero { background: radial-gradient(circle at 88% 6%,rgba(79,69,174,.18),transparent 28%),linear-gradient(140deg,#05070b,#0a1019); }
.theme-ultra-dark .profile-nav,
.theme-ultra-dark .game-section-nav { border-color: #202938; background: rgba(5,7,11,.97); }
.theme-ultra-dark .profile-side-card,
.theme-ultra-dark .profile-roster > a { color: #eef3fb; border-color: #283344; background: #0d141f; }
.theme-ultra-dark .profile-side-card dl div { border-color: #273142; }
.theme-ultra-dark .profile-side-card dt { color: #7f8c9f; }
.theme-ultra-dark .profile-side-card dd { color: #edf2fa; }
.theme-ultra-dark .profile-roster h3 { color: #f3f6fb; }
.theme-ultra-dark .profile-roster p { color: #8794a6; }
.theme-ultra-dark .directory-visual,
.theme-ultra-dark .directory-promise span { border-color: #2a3546; background: #0d141f; }
.theme-ultra-dark .friendly-empty { color: #eaf0f8; border-color: #303b4b; background: #0b1119; }

/* Games, guides, tools and content cards */
.theme-ultra-dark .game-card,
.theme-ultra-dark .platform-card,
.theme-ultra-dark .recent-card,
.theme-ultra-dark .profile-side-card,
.theme-ultra-dark .guide-card,
.theme-ultra-dark .article-card,
.theme-ultra-dark .command-card,
.theme-ultra-dark .topic-action-grid > a,
.theme-ultra-dark .topic-tool-grid > a,
.theme-ultra-dark .hub-shortcut-grid > a,
.theme-ultra-dark .portal-guide-list a,
.theme-ultra-dark .home-tool-grid > a,
.theme-ultra-dark .discovery-grid a { color: #edf2fa; border-color: #283344; background: #0d141f; box-shadow: var(--shadow-sm); }
.theme-ultra-dark .game-card:hover,
.theme-ultra-dark .platform-card:hover,
.theme-ultra-dark .recent-card:hover,
.theme-ultra-dark .guide-card:hover,
.theme-ultra-dark .command-card:hover,
.theme-ultra-dark .topic-action-grid > a:hover,
.theme-ultra-dark .topic-tool-grid > a:hover,
.theme-ultra-dark .hub-shortcut-grid > a:hover,
.theme-ultra-dark .home-tool-grid > a:hover,
.theme-ultra-dark .discovery-grid a:hover { border-color: #4a55a0; background: #111925; }
.theme-ultra-dark .game-card h3,
.theme-ultra-dark .platform-card h2,
.theme-ultra-dark .command-card h3,
.theme-ultra-dark .home-tool-grid h3,
.theme-ultra-dark .topic-tool-grid h3 { color: #f3f6fb; }
.theme-ultra-dark .game-card p,
.theme-ultra-dark .platform-card p,
.theme-ultra-dark .command-card p,
.theme-ultra-dark .home-tool-grid p,
.theme-ultra-dark .topic-tool-grid p { color: #8794a6; }
.theme-ultra-dark .game-card-links { border-color: #283343; background: #090f17; }
.theme-ultra-dark .game-card-links a { color: #aeb8c7; border-color: #283343; }
.theme-ultra-dark .game-card-links a:hover { color: #fff; background: #141c28; }
.theme-ultra-dark .hub-shortcut-grid > a > span,
.theme-ultra-dark .topic-action-grid > a > span,
.theme-ultra-dark .topic-tool-grid > a > span,
.theme-ultra-dark .profile-side-card > span { color: #9d91ff; background: rgba(138,124,255,.12); }
.theme-ultra-dark .game-story aside,
.theme-ultra-dark .hub-watch-grid,
.theme-ultra-dark .database-detail article,
.theme-ultra-dark .database-detail aside { color: #edf2fa; border-color: #283344; background: #0d141f; }
.theme-ultra-dark .hub-watch-grid > div { border-color: #283344; }
.theme-ultra-dark .game-keywords a { color: #dfe5ee; border-color: #283344; background: #0d141f; }
.theme-ultra-dark .ranked-dashboard,
.theme-ultra-dark .game-improve { background: linear-gradient(135deg,#070a0f,#101722); }
.theme-ultra-dark .learning-steps li { color: #edf2fa; border-color: #283344; background: #0d141f; }
.theme-ultra-dark .learning-steps p,
.theme-ultra-dark .editorial-note p,
.theme-ultra-dark .database-detail p { color: #8c99ab; }
.theme-ultra-dark .aim-trainer-toolbar > div,
.theme-ultra-dark .aim-trainer-summary > div,
.theme-ultra-dark .advanced-tool-panel,
.theme-ultra-dark .toolkit-panel,
.theme-ultra-dark .calculator-card { color: #eef3fb; border-color: #283344; background: #0d141f; }
.theme-ultra-dark .aim-trainer-toolbar small,
.theme-ultra-dark .aim-trainer-summary small { color: #7f8b9e; }
.theme-ultra-dark .aim-trainer-toolbar strong { color: #f3f6fb; }
.theme-ultra-dark .aim-trainer-board { border-color: #2d394a; background: radial-gradient(circle at 20% 15%,rgba(111,97,235,.1),transparent 28%),linear-gradient(135deg,#090e16,#111925); }
.theme-ultra-dark .bracket-match { border-color: #283344; background: #0b1119; }
.theme-ultra-dark .bracket-match button { color: #edf2fa; border-color: #303b4c; background: #121925; }

/* Footer and dialogs */
.theme-ultra-dark .global-discovery { background: #05070b; }
.theme-ultra-dark .site-footer { color: #dce3ed; border-color: #202938; background: #05070b; }
.theme-ultra-dark .footer-spotlight { border-color: #232d3b; background: #0a0f17; }
.theme-ultra-dark .footer-spotlight h2 { color: #f2f5fa; }
.theme-ultra-dark .footer-spotlight form { border-color: #2a3545; background: #0e151f; }
.theme-ultra-dark .footer-spotlight input { color: #eef3fb; }
.theme-ultra-dark .footer-grid h3 { color: #e9eef6; }
.theme-ultra-dark .footer-grid a,
.theme-ultra-dark .footer-bottom,
.theme-ultra-dark .privacy-link { color: #8794a7; }
.theme-ultra-dark .footer-grid a:hover,
.theme-ultra-dark .privacy-link:hover { color: #fff; }
.theme-ultra-dark .install-dialog { color: #edf2fa; border-color: #2b3647; background: #0d141f; box-shadow: 0 34px 90px rgba(0,0,0,.65); }
.theme-ultra-dark .install-dialog h2 { color: #f3f6fb; }
.theme-ultra-dark .install-dialog-close { color: #dbe2ec; background: #151d29; }
.theme-ultra-dark .search-popover { border-color: #2b3646; background: #0b1119; box-shadow: 0 26px 70px rgba(0,0,0,.58); }
.theme-ultra-dark .search-popover a { border-color: #252f3e; }
.theme-ultra-dark .search-popover a:hover { background: #141b26; }
.theme-ultra-dark .search-popover strong { color: #eef3fb; }
.theme-ultra-dark .search-popover small { color: #7f8b9e; }

@media (max-width: 1080px) {
  .theme-ultra-dark .header-main { grid-template-columns: auto minmax(0,1fr) auto; gap: 14px; }
  .theme-ultra-dark .header-main .brand { min-width: 122px; }
  .theme-ultra-dark .header-search { min-width: 0; }
  .theme-ultra-dark .header-search button,
  .theme-ultra-dark .header-search kbd { display: none; }
  .theme-ultra-dark .header-search { grid-template-columns: 22px minmax(0,1fr); padding-right: 14px; }
}
@media (max-width: 820px) {
  .theme-ultra-dark .portal-header { min-height: 66px; }
  .theme-ultra-dark .header-main { min-height: 66px; grid-template-columns: 112px minmax(0,1fr) 52px; gap: 10px; }
  .theme-ultra-dark .header-main .brand { min-width: 0; gap: 8px; font-size: 1.17rem; }
  .theme-ultra-dark .header-main .brand img { width: 38px; height: 38px; }
  .theme-ultra-dark .header-search { min-height: 48px; padding-left: 13px; border-radius: 14px; }
  .theme-ultra-dark .header-search input { font-size: .78rem; }
  .theme-ultra-dark .portal-header .menu-button { width: 52px; height: 52px; border-radius: 14px; }
  .theme-ultra-dark .portal-header .mobile-nav { inset: 66px 0 0; }
  .theme-ultra-dark .mobile-nav-groups { grid-template-columns: 1fr; gap: 12px; padding: 16px 0 110px; }
  .theme-ultra-dark .mobile-nav-groups section { padding: 18px; }
  .theme-ultra-dark .portal-header .mobile-nav-groups a { min-height: 50px; padding: 11px 4px; font-size: .92rem; }
  .theme-ultra-dark .portal-hero { padding-top: 40px; }
}
@media (max-width: 540px) {
  .theme-ultra-dark .wrap { width: min(calc(100% - 28px),var(--wrap)); }
  .theme-ultra-dark .header-main { grid-template-columns: 106px minmax(0,1fr) 50px; gap: 8px; }
  .theme-ultra-dark .header-main .brand { font-size: 1.07rem; }
  .theme-ultra-dark .header-main .brand img { width: 36px; height: 36px; }
  .theme-ultra-dark .header-search { padding: 0 10px; }
  .theme-ultra-dark .header-search .icon { width: 21px; }
  .theme-ultra-dark .header-search input { font-size: .72rem; }
  .theme-ultra-dark .portal-header .menu-button { width: 50px; height: 50px; }
  .theme-ultra-dark .portal-hero h1 { font-size: clamp(3.2rem,16vw,4.65rem); }
  .theme-ultra-dark .finder-fields label { min-height: 76px; }
  .theme-ultra-dark .match-card { border-radius: 18px; }
  .theme-ultra-dark .match-card-top,
  .theme-ultra-dark .match-card-foot { padding-inline: 16px; }
  .theme-ultra-dark .match-card-body { padding-inline: 16px; }
  .theme-ultra-dark .match-team { grid-template-columns: 58px minmax(0,1fr) auto; }
  .theme-ultra-dark .team-mark { width: 58px; height: 58px; border-radius: 15px; }
  .theme-ultra-dark .team-mark img { width: 48px; height: 48px; }
  .theme-ultra-dark .entity-card-meta,
  .theme-ultra-dark .roster-meta { align-items: flex-start; flex-direction: column; gap: 4px; }
  .theme-ultra-dark .entity-region { font-size: .55rem; }
}
.theme-ultra-dark .prediction-card-unavailable { display: grid; grid-template-columns: 54px 1fr; align-items: start; gap: 16px; }
.theme-ultra-dark .prediction-card-unavailable > span { display: grid; width: 54px; height: 54px; place-items: center; color: #9d91ff; border: 1px solid #354157; background: #141b27; border-radius: 15px; }
.theme-ultra-dark .prediction-card-unavailable > span .icon { width: 25px; height: 25px; }
.theme-ultra-dark .prediction-card-unavailable small { color: #8390a3; font-size: .6rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.theme-ultra-dark .prediction-card-unavailable h3 { margin: 5px 0 8px; color: #f2f5fa; font-size: 1.25rem; }
.theme-ultra-dark .prediction-card-unavailable p { margin: 0; color: #929eb0; line-height: 1.65; }
@media (max-width: 540px) { .theme-ultra-dark .prediction-card-unavailable { grid-template-columns: 46px 1fr; } .theme-ultra-dark .prediction-card-unavailable > span { width: 46px; height: 46px; } }


/* V10.3.1 final contrast lock: prevents legacy cached component rules from
   producing light drawer panels or muted navigation labels. */
.theme-ultra-dark .portal-header .mobile-nav,
.theme-ultra-dark .portal-header .mobile-nav[hidden="false"] { background:#05070b!important; color:#f5f7fb!important; }
.theme-ultra-dark .portal-header .mobile-nav-groups section { background:#0a0f16!important; border-color:#252e3b!important; }
.theme-ultra-dark .portal-header .mobile-nav-groups h2 { color:#8e9bad!important; }
.theme-ultra-dark .portal-header .mobile-nav-groups a,
.theme-ultra-dark .portal-header .mobile-nav-groups a:visited { color:#f0f4fa!important; -webkit-text-fill-color:#f0f4fa!important; }
.theme-ultra-dark .portal-header .mobile-nav-groups a .icon { color:#9388ff!important; }
.theme-ultra-dark .header-search input { min-width:0; }

/* 2PVP V10.4 unified production interface
   One near-black surface system for every public page and interactive state. */
body.theme-ultra-dark {
  --ink:#f4f7fb;
  --ink-2:#dfe6f0;
  --muted:#9aa6b8;
  --muted-2:#738096;
  --canvas:#05070a;
  --surface:#0b1119;
  --surface-2:#0e1621;
  --surface-3:#121c29;
  --line:#243044;
  --line-strong:#35445b;
  --violet:#8b7dff;
  --violet-dark:#a79dff;
  --violet-soft:rgba(139,125,255,.12);
  --cyan:#52c8ff;
  --cyan-soft:rgba(82,200,255,.11);
  --lime:#b8e84a;
  --lime-soft:rgba(184,232,74,.1);
  --coral:#ff596e;
  --navy:#07101c;
  --success:#38c98d;
  --warning:#f5a524;
  --danger:#ff5a70;
  --shadow-sm:0 1px 0 rgba(255,255,255,.02),0 14px 34px rgba(0,0,0,.2);
  --shadow-md:0 24px 70px rgba(0,0,0,.38);
  color:var(--ink);
  background:var(--canvas);
}
body.theme-ultra-dark.menu-open { overflow:hidden; touch-action:none; }
body.theme-ultra-dark main { min-height:65vh; color:var(--ink); background:var(--canvas); }
body.theme-ultra-dark h1,
body.theme-ultra-dark h2,
body.theme-ultra-dark h3,
body.theme-ultra-dark h4,
body.theme-ultra-dark strong,
body.theme-ultra-dark b { color:var(--ink); }
body.theme-ultra-dark p,
body.theme-ultra-dark li,
body.theme-ultra-dark dd { color:var(--muted); }
body.theme-ultra-dark a { color:inherit; }
body.theme-ultra-dark hr { border-color:var(--line); }
body.theme-ultra-dark .section,
body.theme-ultra-dark .section-tint,
body.theme-ultra-dark .section-compact,
body.theme-ultra-dark .global-discovery { color:var(--ink); border-color:#171f2a; background:var(--canvas); }
body.theme-ultra-dark .section-tint { background:#070b11; }
body.theme-ultra-dark .section-heading h1,
body.theme-ultra-dark .section-heading h2,
body.theme-ultra-dark .section-heading h3 { color:var(--ink); }
body.theme-ultra-dark .section-heading p,
body.theme-ultra-dark .lead-copy,
body.theme-ultra-dark .prose-intro { color:var(--muted); }
body.theme-ultra-dark .eyebrow,
body.theme-ultra-dark .section-kicker { color:#a99fff; }
body.theme-ultra-dark .text-link { color:#eef3fb; }
body.theme-ultra-dark .text-link .icon,
body.theme-ultra-dark .text-link span { color:#9d91ff; }
body.theme-ultra-dark .schedule-note { color:#7f8b9e; }

/* Header, navigation and menu */
body.theme-ultra-dark .portal-header {
  position:sticky; top:0; z-index:300; color:#f4f7fb;
  border:0; border-bottom:1px solid #1c2634;
  background:rgba(5,7,10,.985); box-shadow:0 12px 36px rgba(0,0,0,.34);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}
body.theme-ultra-dark .header-utility { border-color:#151c26; background:#030507; }
body.theme-ultra-dark .utility-inner p,
body.theme-ultra-dark .utility-inner nav { color:#8491a4; }
body.theme-ultra-dark .header-main .brand,
body.theme-ultra-dark .header-main .brand > span { color:#fff; }
body.theme-ultra-dark .header-search {
  min-width:0; color:#dce3ed; border-color:#263248; background:#0a111b;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
body.theme-ultra-dark .header-search:focus-within { border-color:#7569ea; background:#0d1622; box-shadow:0 0 0 4px rgba(139,125,255,.12); }
body.theme-ultra-dark .header-search input { min-width:0; color:#eff4fb; background:transparent; }
body.theme-ultra-dark .header-search input::placeholder { color:#738096; opacity:1; }
body.theme-ultra-dark .header-search kbd { color:#8995a7; border-color:#313d50; background:#121b28; }
body.theme-ultra-dark .header-search button { color:#fff!important; background:#7365ec; }
body.theme-ultra-dark .install-app-button,
body.theme-ultra-dark .portal-header .menu-button { color:#edf2fa; border-color:#2b374a; background:#0b121c; }
body.theme-ultra-dark .portal-header .menu-button:hover,
body.theme-ultra-dark .portal-header .menu-button[aria-expanded="true"] { border-color:#655bc6; background:#121b29; }
body.theme-ultra-dark .portal-header .menu-button .icon { color:#e9eef6; }
body.theme-ultra-dark .nav-shell { border-color:#1b2431; background:#06090e; }
body.theme-ultra-dark .portal-header .desktop-nav > a,
body.theme-ultra-dark .portal-header .desktop-nav summary { color:#a6b0bf; }
body.theme-ultra-dark .portal-header .desktop-nav > a:hover,
body.theme-ultra-dark .portal-header .desktop-nav summary:hover,
body.theme-ultra-dark .portal-header .desktop-nav [aria-current="page"] { color:#fff; background:#111925; }
body.theme-ultra-dark .portal-header .desktop-nav .icon { color:#7d899c; }
body.theme-ultra-dark .mega-panel { color:#dfe6f0; border-color:#2a3548; background:#0a1018; box-shadow:0 30px 90px rgba(0,0,0,.58); }
body.theme-ultra-dark .mega-panel h2,
body.theme-ultra-dark .mega-panel strong,
body.theme-ultra-dark .mega-panel b { color:#f4f7fb; }
body.theme-ultra-dark .mega-panel p,
body.theme-ultra-dark .mega-panel small { color:#8794a7; }
body.theme-ultra-dark .mega-game-grid a,
body.theme-ultra-dark .mega-link-group a { border-color:#263143; background:#0e151f; }
body.theme-ultra-dark .mega-game-grid a:hover,
body.theme-ultra-dark .mega-link-group a:hover { border-color:#514a99; background:#131c29; }
body.theme-ultra-dark .portal-header .mobile-nav,
body.theme-ultra-dark .portal-header .mobile-nav[hidden="false"] {
  color:#f3f6fb; border-top:1px solid #1c2634; background:#05070a!important;
  overscroll-behavior:contain;
}
body.theme-ultra-dark .portal-header .mobile-nav[hidden] { display:none!important; }
body.theme-ultra-dark .mobile-nav-groups section { color:#eff3f9; border-color:#263143!important; background:#0b1119!important; box-shadow:none; }
body.theme-ultra-dark .mobile-nav-groups h2 { color:#8996a9!important; }
body.theme-ultra-dark .portal-header .mobile-nav-groups a,
body.theme-ultra-dark .portal-header .mobile-nav-groups a:visited { color:#f0f4fa!important; -webkit-text-fill-color:#f0f4fa!important; border-color:#243044; }
body.theme-ultra-dark .portal-header .mobile-nav-groups a:hover,
body.theme-ultra-dark .portal-header .mobile-nav-groups a:focus-visible { color:#fff!important; background:#121b28; }
body.theme-ultra-dark .mobile-nav-groups a .icon { color:#9388ff!important; }
body.theme-ultra-dark .mobile-popular img { border-color:#303c50; background:#151d28; }
body.theme-ultra-dark .breadcrumbs { color:#8995a7; border-color:#171f2a; background:#05070a; }
body.theme-ultra-dark .breadcrumbs a { color:#aab4c3; }
body.theme-ultra-dark .breadcrumbs span { color:#7c899c; }
body.theme-ultra-dark .site-announcement { color:#eaf0f8; border-color:#283447; background:#101722; }

/* Buttons, controls and interactive states */
body.theme-ultra-dark .button,
body.theme-ultra-dark button,
body.theme-ultra-dark [role="button"] { -webkit-text-fill-color:currentColor; }
body.theme-ultra-dark .button-primary,
body.theme-ultra-dark .button-primary:visited,
body.theme-ultra-dark .button-primary *,
body.theme-ultra-dark .finder-fields button,
body.theme-ultra-dark .games-directory-hero button,
body.theme-ultra-dark .footer-spotlight button { color:#fff!important; -webkit-text-fill-color:#fff!important; background:#7163ee; }
body.theme-ultra-dark .button-primary:hover,
body.theme-ultra-dark .finder-fields button:hover { background:#8679ff; }
body.theme-ultra-dark .button-ghost,
body.theme-ultra-dark .button-ghost:visited { color:#eef3fb!important; -webkit-text-fill-color:#eef3fb!important; border-color:#3b4960; background:#101824; }
body.theme-ultra-dark .button-ghost:hover { color:#fff!important; border-color:#766be8; background:#172235; }
body.theme-ultra-dark .button-dark,
body.theme-ultra-dark .button-dark:visited,
body.theme-ultra-dark .button-dark * { color:#fff!important; -webkit-text-fill-color:#fff!important; border-color:#334159; background:#111a27; }
body.theme-ultra-dark .button-light,
body.theme-ultra-dark .button-light:visited,
body.theme-ultra-dark .button-light * { color:#080c13!important; -webkit-text-fill-color:#080c13!important; background:#f5f7fb; }
body.theme-ultra-dark .text-danger { color:#ff7182; }
body.theme-ultra-dark input,
body.theme-ultra-dark select,
body.theme-ultra-dark textarea {
  color:#edf2fa; border-color:#344257; background:#0a111a; color-scheme:dark;
}
body.theme-ultra-dark input::placeholder,
body.theme-ultra-dark textarea::placeholder { color:#718096; opacity:1; }
body.theme-ultra-dark select option { color:#edf2fa; background:#0b1119; }
body.theme-ultra-dark input:focus,
body.theme-ultra-dark select:focus,
body.theme-ultra-dark textarea:focus { border-color:#7569ea; outline:0; box-shadow:0 0 0 4px rgba(139,125,255,.1); }
body.theme-ultra-dark .filter-group,
body.theme-ultra-dark .home-match-tabs,
body.theme-ultra-dark .related-match-tabs,
body.theme-ultra-dark .export-tabs { border-color:#334159; background:#070c12; }
body.theme-ultra-dark .filter-group button,
body.theme-ultra-dark .home-match-tabs button,
body.theme-ultra-dark .related-match-tabs button,
body.theme-ultra-dark .export-tabs button { color:#8996aa; background:#0b121c; }
body.theme-ultra-dark .filter-group button.is-active,
body.theme-ultra-dark .home-match-tabs button.is-active,
body.theme-ultra-dark .related-match-tabs button.is-active,
body.theme-ultra-dark .export-tabs button.is-active { color:#fff; background:#253248; }

/* Unified hero system */
body.theme-ultra-dark .portal-hero,
body.theme-ultra-dark .match-center-hero,
body.theme-ultra-dark .events-hero,
body.theme-ultra-dark .directory-hero,
body.theme-ultra-dark .games-directory-hero,
body.theme-ultra-dark .search-portal-hero,
body.theme-ultra-dark .tools-portal-hero,
body.theme-ultra-dark .personal-hero,
body.theme-ultra-dark .pickem-hero,
body.theme-ultra-dark .calendar-hero,
body.theme-ultra-dark .places-hero,
body.theme-ultra-dark .widgets-hero,
body.theme-ultra-dark .platform-hero,
body.theme-ultra-dark .page-hero,
body.theme-ultra-dark .static-hero,
body.theme-ultra-dark .archive-hero,
body.theme-ultra-dark .tool-page-hero,
body.theme-ultra-dark .toolkit-hero,
body.theme-ultra-dark .article-hero,
body.theme-ultra-dark .term-hero {
  color:#f4f7fb; border-color:#1e2938;
  background:
    radial-gradient(circle at 82% 10%,rgba(76,151,255,.11),transparent 31%),
    radial-gradient(circle at 10% 12%,rgba(139,125,255,.12),transparent 28%),
    linear-gradient(135deg,#05080d 0%,#08111c 55%,#060a11 100%);
}
body.theme-ultra-dark .portal-hero h1,
body.theme-ultra-dark .match-center-hero h1,
body.theme-ultra-dark .events-hero h1,
body.theme-ultra-dark .directory-hero h1,
body.theme-ultra-dark .games-directory-hero h1,
body.theme-ultra-dark .tools-portal-hero h1,
body.theme-ultra-dark .personal-hero h1,
body.theme-ultra-dark .pickem-hero h1,
body.theme-ultra-dark .calendar-hero h1,
body.theme-ultra-dark .places-hero h1,
body.theme-ultra-dark .widgets-hero h1,
body.theme-ultra-dark .platform-hero h1,
body.theme-ultra-dark .page-hero h1,
body.theme-ultra-dark .static-hero h1,
body.theme-ultra-dark .archive-hero h1,
body.theme-ultra-dark .tool-page-hero h1,
body.theme-ultra-dark .toolkit-hero h1,
body.theme-ultra-dark .article-hero h1,
body.theme-ultra-dark .term-hero h1 { color:#f7f9fc!important; text-shadow:none; }
body.theme-ultra-dark .portal-hero h1 em,
body.theme-ultra-dark .match-center-hero h1 em,
body.theme-ultra-dark .events-hero h1 em,
body.theme-ultra-dark .games-directory-hero h1 em,
body.theme-ultra-dark .tools-portal-hero h1 em,
body.theme-ultra-dark .page-hero h1 em { color:#968bff; }
body.theme-ultra-dark .portal-hero p,
body.theme-ultra-dark .match-center-hero p,
body.theme-ultra-dark .events-hero p,
body.theme-ultra-dark .directory-hero p,
body.theme-ultra-dark .games-directory-hero p,
body.theme-ultra-dark .tools-portal-hero p,
body.theme-ultra-dark .personal-hero p,
body.theme-ultra-dark .pickem-hero p,
body.theme-ultra-dark .calendar-hero p,
body.theme-ultra-dark .places-hero p,
body.theme-ultra-dark .widgets-hero p,
body.theme-ultra-dark .platform-hero p,
body.theme-ultra-dark .page-hero p,
body.theme-ultra-dark .tool-page-hero p,
body.theme-ultra-dark .toolkit-hero p { color:#9ba7b8; }
body.theme-ultra-dark .personal-hero::after,
body.theme-ultra-dark .pickem-hero::after,
body.theme-ultra-dark .calendar-hero::after,
body.theme-ultra-dark .places-hero::after,
body.theme-ultra-dark .widgets-hero::after { border-color:rgba(139,125,255,.045); }
body.theme-ultra-dark .games-directory-hero form,
body.theme-ultra-dark .game-directory-search,
body.theme-ultra-dark .big-search,
body.theme-ultra-dark .portal-big-search { color:#edf2fa; border:1px solid #344257; background:#0a111a; }
body.theme-ultra-dark .games-directory-hero form input,
body.theme-ultra-dark .game-directory-search input,
body.theme-ultra-dark .big-search input,
body.theme-ultra-dark .portal-big-search input { color:#edf2fa; background:transparent; }
body.theme-ultra-dark .games-directory-hero form input::placeholder { color:#718096; }

/* Finder and high-level panels */
body.theme-ultra-dark .game-finder,
body.theme-ultra-dark .finder-fields label,
body.theme-ultra-dark .hero-panel,
body.theme-ultra-dark .match-center-hero aside,
body.theme-ultra-dark .pickem-score,
body.theme-ultra-dark .calendar-hero aside,
body.theme-ultra-dark .places-visual,
body.theme-ultra-dark .widgets-hero aside,
body.theme-ultra-dark .directory-visual,
body.theme-ultra-dark .platform-scorecard,
body.theme-ultra-dark .archive-actions {
  color:#eef3fb; border-color:#2b384b; background:#0c141f; box-shadow:var(--shadow-md);
}
body.theme-ultra-dark .finder-heading small,
body.theme-ultra-dark .game-finder small,
body.theme-ultra-dark .match-center-hero aside small,
body.theme-ultra-dark .pickem-score small { color:#8390a4; }
body.theme-ultra-dark .finder-fields label { background:#0b131e; }
body.theme-ultra-dark .finder-fields select { color:#eef3fb; background:#0b131e; }
body.theme-ultra-dark .hero-trending { color:#8290a4; }
body.theme-ultra-dark .hero-trending a { color:#cbd4e0; }
body.theme-ultra-dark .quick-rail { border-color:#1c2634; background:#070b10; }
body.theme-ultra-dark .quick-rail a { border-color:#263143; background:#0b121b; }
body.theme-ultra-dark .quick-rail a:hover { border-color:#4e4a8e; background:#111925; }

/* Cards: one surface and contrast contract */
body.theme-ultra-dark .match-card,
body.theme-ultra-dark .event-card,
body.theme-ultra-dark .event-card-rich,
body.theme-ultra-dark .entity-card,
body.theme-ultra-dark .game-card,
body.theme-ultra-dark .tool-catalog-card,
body.theme-ultra-dark .platform-card,
body.theme-ultra-dark .guide-card,
body.theme-ultra-dark .article-card,
body.theme-ultra-dark .command-card,
body.theme-ultra-dark .pathway-card,
body.theme-ultra-dark .playbook-card,
body.theme-ultra-dark .pickem-card,
body.theme-ultra-dark .personal-panel,
body.theme-ultra-dark .profile-side-card,
body.theme-ultra-dark .recent-card,
body.theme-ultra-dark .aside-card,
body.theme-ultra-dark .toc-card,
body.theme-ultra-dark .topic-game-card,
body.theme-ultra-dark .topic-action-grid > a,
body.theme-ultra-dark .topic-tool-grid > a,
body.theme-ultra-dark .hub-shortcut-grid > a,
body.theme-ultra-dark .home-tool-grid > a,
body.theme-ultra-dark .discovery-grid > a,
body.theme-ultra-dark .tool-game-links > a,
body.theme-ultra-dark .event-game-browser .wrap > div:last-child > a,
body.theme-ultra-dark .match-game-links .wrap > div:last-child > a,
body.theme-ultra-dark .people-columns > div,
body.theme-ultra-dark .people-list a,
body.theme-ultra-dark .learning-steps li,
body.theme-ultra-dark .faq-list details,
body.theme-ultra-dark .link-stack a,
body.theme-ultra-dark .saved-list > *,
body.theme-ultra-dark .saved-grid > * {
  color:#edf2fa; border-color:#263247; background:#0b121b; box-shadow:var(--shadow-sm);
}
body.theme-ultra-dark .match-card:hover,
body.theme-ultra-dark .event-card:hover,
body.theme-ultra-dark .entity-card:hover,
body.theme-ultra-dark .game-card:hover,
body.theme-ultra-dark .tool-catalog-card:hover,
body.theme-ultra-dark .platform-card:hover,
body.theme-ultra-dark .guide-card:hover,
body.theme-ultra-dark .article-card:hover,
body.theme-ultra-dark .command-card:hover,
body.theme-ultra-dark .pathway-card:hover,
body.theme-ultra-dark .playbook-card:hover,
body.theme-ultra-dark .pickem-card:hover,
body.theme-ultra-dark .home-tool-grid > a:hover,
body.theme-ultra-dark .tool-game-links > a:hover,
body.theme-ultra-dark .people-list a:hover { border-color:#4f4a8d; background:#101925; box-shadow:0 20px 52px rgba(0,0,0,.3); }
body.theme-ultra-dark .match-card h2,
body.theme-ultra-dark .match-card h3,
body.theme-ultra-dark .event-card h3,
body.theme-ultra-dark .entity-card h2,
body.theme-ultra-dark .entity-card h3,
body.theme-ultra-dark .game-card h3,
body.theme-ultra-dark .tool-catalog-card h2,
body.theme-ultra-dark .platform-card h2,
body.theme-ultra-dark .guide-card h3,
body.theme-ultra-dark .article-card h3,
body.theme-ultra-dark .command-card h3,
body.theme-ultra-dark .pathway-card h3,
body.theme-ultra-dark .playbook-card h3,
body.theme-ultra-dark .pickem-card h3,
body.theme-ultra-dark .personal-panel h2,
body.theme-ultra-dark .personal-panel h3,
body.theme-ultra-dark .profile-side-card h3,
body.theme-ultra-dark .home-tool-grid h3 { color:#f3f6fb!important; -webkit-text-fill-color:#f3f6fb!important; }
body.theme-ultra-dark .match-card p,
body.theme-ultra-dark .event-card p,
body.theme-ultra-dark .entity-card p,
body.theme-ultra-dark .game-card p,
body.theme-ultra-dark .tool-catalog-card p,
body.theme-ultra-dark .platform-card p,
body.theme-ultra-dark .guide-card p,
body.theme-ultra-dark .article-card p,
body.theme-ultra-dark .command-card p,
body.theme-ultra-dark .pathway-card p,
body.theme-ultra-dark .playbook-card p,
body.theme-ultra-dark .pickem-card p,
body.theme-ultra-dark .personal-panel p,
body.theme-ultra-dark .profile-side-card p,
body.theme-ultra-dark .home-tool-grid p { color:#8f9caf!important; -webkit-text-fill-color:#8f9caf!important; }
body.theme-ultra-dark .match-card-top,
body.theme-ultra-dark .match-card-foot,
body.theme-ultra-dark .event-card-facts,
body.theme-ultra-dark .game-card-links,
body.theme-ultra-dark .pickem-card header,
body.theme-ultra-dark .pickem-card footer { color:#8996aa; border-color:#263247; background:#080e15; }
body.theme-ultra-dark .match-card-foot a,
body.theme-ultra-dark .event-card-open,
body.theme-ultra-dark .entity-card strong,
body.theme-ultra-dark .tool-catalog-card strong,
body.theme-ultra-dark .command-card b,
body.theme-ultra-dark .pathway-card b,
body.theme-ultra-dark .playbook-card b,
body.theme-ultra-dark .home-tool-grid b { color:#a99fff!important; -webkit-text-fill-color:#a99fff!important; }
body.theme-ultra-dark .team-mark,
body.theme-ultra-dark .entity-image,
body.theme-ultra-dark .people-avatar,
body.theme-ultra-dark .player-card-mark,
body.theme-ultra-dark .event-logo,
body.theme-ultra-dark .team-logo-stage,
body.theme-ultra-dark .profile-photo,
body.theme-ultra-dark .event-detail-hero aside {
  border-color:#39465a; background:linear-gradient(145deg,#f8fafc,#dfe6ef); box-shadow:inset 0 0 0 1px rgba(255,255,255,.8);
}
body.theme-ultra-dark .team-mark img,
body.theme-ultra-dark .entity-image img,
body.theme-ultra-dark .people-avatar img,
body.theme-ultra-dark .event-logo img,
body.theme-ultra-dark .team-logo-stage img,
body.theme-ultra-dark .profile-photo-logo img { object-fit:contain; padding:5px; }
body.theme-ultra-dark .entity-image-player img,
body.theme-ultra-dark .profile-photo-player img { object-fit:cover; object-position:center 18%; padding:0; }
body.theme-ultra-dark .team-slot-icon,
body.theme-ultra-dark .bracket-slot-mark { color:#6f7d92; }
body.theme-ultra-dark .team-country,
body.theme-ultra-dark .entity-region,
body.theme-ultra-dark .team-region,
body.theme-ultra-dark .card-country { color:#9aa7b9; }
body.theme-ultra-dark .team-country b,
body.theme-ultra-dark .entity-region b,
body.theme-ultra-dark .team-region b,
body.theme-ultra-dark .card-country b { font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; }

/* Tools and calculators */
body.theme-ultra-dark .tools-portal-hero { padding-block:64px; }
body.theme-ultra-dark .tools-hero-collage > a,
body.theme-ultra-dark .games-hero-mosaic > a,
body.theme-ultra-dark .event-hero-collage > a,
body.theme-ultra-dark .collection-hero-collage > a { border-color:#2b3749; background:#0b121b; }
body.theme-ultra-dark .tools-hero-collage > a::after,
body.theme-ultra-dark .games-hero-mosaic > a::after,
body.theme-ultra-dark .event-hero-collage > a::after { background:linear-gradient(transparent,rgba(4,7,11,.9)); }
body.theme-ultra-dark .tool-catalog-expanded .tool-catalog-card > div:last-child { background:#0b121b; }
body.theme-ultra-dark .tool-catalog-card li,
body.theme-ultra-dark .toolkit-badges span { color:#cbd4df; background:#050a10; }
body.theme-ultra-dark .tool-use-grid,
body.theme-ultra-dark .tool-use-grid ol,
body.theme-ultra-dark .tool-use-grid li,
body.theme-ultra-dark .advanced-tool-panel,
body.theme-ultra-dark .toolkit-panel,
body.theme-ultra-dark .calculator-card,
body.theme-ultra-dark .tool-panel,
body.theme-ultra-dark .tool-sidebar,
body.theme-ultra-dark .tool-more-strip,
body.theme-ultra-dark .quick-results,
body.theme-ultra-dark .result-panel,
body.theme-ultra-dark .calculator-result,
body.theme-ultra-dark .toolkit-tip-card {
  color:#edf2fa; border-color:#283549; background:#0b121b;
}
body.theme-ultra-dark .tool-use-grid li p,
body.theme-ultra-dark .tool-panel p,
body.theme-ultra-dark .tool-sidebar p,
body.theme-ultra-dark .calculator-card p,
body.theme-ultra-dark .advanced-tool-panel p { color:#8f9caf; }
body.theme-ultra-dark .aim-trainer-board,
body.theme-ultra-dark .reaction-stage,
body.theme-ultra-dark .click-stage,
body.theme-ultra-dark .crosshair-stage,
body.theme-ultra-dark .preview-scene,
body.theme-ultra-dark .fov-preview,
body.theme-ultra-dark .stick-plot,
body.theme-ultra-dark .veto-board,
body.theme-ultra-dark .bracket-output { border-color:#334159; background:#070d14; }

/* My 2PVP, community, saved content */
body.theme-ultra-dark .personal-hero { min-height:0; }
body.theme-ultra-dark .personal-summary,
body.theme-ultra-dark .personal-onboarding,
body.theme-ultra-dark .personal-data-grid,
body.theme-ultra-dark .export-card,
body.theme-ultra-dark .community-workspace { color:#edf2fa; border-color:#29364a; background:#0b121b; }
body.theme-ultra-dark .personal-summary strong,
body.theme-ultra-dark .personal-onboarding h2,
body.theme-ultra-dark .export-card h2 { color:#f4f7fb; }
body.theme-ultra-dark .personal-hero-actions .button-dark,
body.theme-ultra-dark .personal-hero-actions .install-app-button { color:#fff!important; -webkit-text-fill-color:#fff!important; }
body.theme-ultra-dark .personal-filter button { color:#8e9bad; border-color:#2c394d; background:#0a111a; }
body.theme-ultra-dark .personal-filter button.is-active { color:#fff; border-color:#655bc6; background:#1a2332; }

/* Match, event, team and player experience */
body.theme-ultra-dark .match-filter-panel,
body.theme-ultra-dark .event-filter-bar,
body.theme-ultra-dark .directory-toolbar,
body.theme-ultra-dark .calendar-toolbar { color:#edf2fa; border-color:#2b384b; background:#0b121b; }
body.theme-ultra-dark .match-filter-panel label,
body.theme-ultra-dark .event-filter-bar label,
body.theme-ultra-dark .directory-toolbar label { color:#8794a7; }
body.theme-ultra-dark .match-command-hero,
body.theme-ultra-dark .event-detail-hero,
body.theme-ultra-dark .profile-hero,
body.theme-ultra-dark .game-hub-hero,
body.theme-ultra-dark .game-topic-hero { color:#f4f7fb; background:#060a10; }
body.theme-ultra-dark .match-command-backdrop::after,
body.theme-ultra-dark .event-detail-backdrop::after,
body.theme-ultra-dark .game-hub-backdrop::after,
body.theme-ultra-dark .game-topic-backdrop::after { background:linear-gradient(90deg,rgba(5,8,13,.98),rgba(5,8,13,.86)); }
body.theme-ultra-dark .match-command-board,
body.theme-ultra-dark .match-fact-strip,
body.theme-ultra-dark .event-route-card,
body.theme-ultra-dark .match-watch-card,
body.theme-ultra-dark .prediction-card,
body.theme-ultra-dark .event-detail-overview,
body.theme-ultra-dark .profile-facts,
body.theme-ultra-dark .profile-roster > a,
body.theme-ultra-dark .game-hub-facts,
body.theme-ultra-dark .game-story aside,
body.theme-ultra-dark .hub-watch-grid,
body.theme-ultra-dark .database-detail article,
body.theme-ultra-dark .database-detail aside {
  color:#edf2fa; border-color:#29364a; background:#0b121b;
}
body.theme-ultra-dark .match-side,
body.theme-ultra-dark .match-command-center,
body.theme-ultra-dark .match-fact-strip > div,
body.theme-ultra-dark .profile-facts > div,
body.theme-ultra-dark .game-hub-facts > div { border-color:#29364a; background:#0b121b; }
body.theme-ultra-dark .match-detail-nav,
body.theme-ultra-dark .profile-nav,
body.theme-ultra-dark .game-section-nav { border-color:#202b3a; background:rgba(5,8,13,.97); }
body.theme-ultra-dark .match-detail-nav a,
body.theme-ultra-dark .profile-nav a,
body.theme-ultra-dark .game-section-nav a { color:#8e9bad; }
body.theme-ultra-dark .match-detail-nav a:hover,
body.theme-ultra-dark .profile-nav a:hover,
body.theme-ultra-dark .game-section-nav a:hover { color:#fff; }
body.theme-ultra-dark .event-list,
body.theme-ultra-dark .portal-event-list { color:#edf2fa; }
body.theme-ultra-dark .event-section { background:#070b10; }
body.theme-ultra-dark .event-intro h2,
body.theme-ultra-dark .event-intro p { color:#f2f5fa; }
body.theme-ultra-dark .event-actions > a:not(.button) { color:#a99fff; }
body.theme-ultra-dark .directory-promise span,
body.theme-ultra-dark .game-keywords a,
body.theme-ultra-dark .database-tags span { color:#cbd4df; border-color:#2c394d; background:#0b121b; }

/* Guides, editorial and readable long-form content */
body.theme-ultra-dark .article-layout,
body.theme-ultra-dark .topic-guide-layout,
body.theme-ultra-dark .database-detail,
body.theme-ultra-dark .game-story-grid { color:#edf2fa; }
body.theme-ultra-dark .article-body,
body.theme-ultra-dark .topic-article,
body.theme-ultra-dark .definition-lead { color:#dbe3ed; }
body.theme-ultra-dark .article-body p,
body.theme-ultra-dark .topic-article p,
body.theme-ultra-dark .database-detail p { color:#a0acbd; }
body.theme-ultra-dark .article-body h2,
body.theme-ultra-dark .article-body h3,
body.theme-ultra-dark .topic-article h2,
body.theme-ultra-dark .topic-article h3 { color:#f1f5fa; }
body.theme-ultra-dark .topic-checklist,
body.theme-ultra-dark .guide-workspace,
body.theme-ultra-dark .editorial-note,
body.theme-ultra-dark .article-review-box,
body.theme-ultra-dark .source-links { color:#edf2fa; border-color:#2a374a; background:#0b121b; }
body.theme-ultra-dark .faq-list summary { color:#edf2fa; }
body.theme-ultra-dark .faq-list details[open] { border-color:#4b4787; }

/* Footer, dialogs and bottom navigation */
body.theme-ultra-dark .site-footer { color:#dfe6ef; border-color:#1b2533; background:#040609; }
body.theme-ultra-dark .footer-spotlight { border-color:#232f40; background:#0a1018; }
body.theme-ultra-dark .footer-spotlight h2 { color:#f4f7fb; }
body.theme-ultra-dark .footer-spotlight form { border-color:#324056; background:#0d151f; }
body.theme-ultra-dark .footer-spotlight input { color:#eef3fb; background:transparent; }
body.theme-ultra-dark .footer-grid h3 { color:#eaf0f8; }
body.theme-ultra-dark .footer-grid a,
body.theme-ultra-dark .footer-bottom,
body.theme-ultra-dark .privacy-link { color:#8996a8; }
body.theme-ultra-dark .footer-grid a:hover,
body.theme-ultra-dark .privacy-link:hover { color:#fff; }
body.theme-ultra-dark .mobile-bottom-nav { border-color:#1e2938; background:rgba(4,7,11,.985); box-shadow:0 -14px 42px rgba(0,0,0,.48); }
body.theme-ultra-dark .mobile-bottom-nav a { color:#768398; }
body.theme-ultra-dark .mobile-bottom-nav a[aria-current="page"] { color:#a498ff; }
body.theme-ultra-dark .install-dialog { color:#edf2fa; border-color:#2c394d; background:#0b121b; }
body.theme-ultra-dark .install-dialog h2 { color:#f4f7fb; }
body.theme-ultra-dark .install-dialog-close { color:#e5ebf4; background:#151f2d; }
body.theme-ultra-dark .search-popover { color:#edf2fa; border-color:#2b384b; background:#0a111a; box-shadow:0 28px 80px rgba(0,0,0,.62); }
body.theme-ultra-dark .search-popover a { border-color:#253246; }
body.theme-ultra-dark .search-popover a:hover { background:#121b28; }

/* Empty, loading and unavailable states must still look intentional. */
body.theme-ultra-dark .friendly-empty,
body.theme-ultra-dark .empty-panel,
body.theme-ultra-dark .empty-state,
body.theme-ultra-dark .panel-empty,
body.theme-ultra-dark .filter-empty,
body.theme-ultra-dark .prediction-card-unavailable,
body.theme-ultra-dark .google-search-consent,
body.theme-ultra-dark .google-search-error,
body.theme-ultra-dark .google-search-loading {
  color:#eaf0f8; border-color:#344257; background:#0b121b;
}
body.theme-ultra-dark .friendly-empty h2,
body.theme-ultra-dark .friendly-empty h3,
body.theme-ultra-dark .empty-panel h2,
body.theme-ultra-dark .empty-state h2 { color:#f3f6fb; }
body.theme-ultra-dark .friendly-empty p,
body.theme-ultra-dark .empty-panel p,
body.theme-ultra-dark .empty-state p { color:#8f9caf; }

/* Responsive stability */
@media (max-width:1080px) {
  body.theme-ultra-dark .header-utility,
  body.theme-ultra-dark .nav-shell { display:none; }
  body.theme-ultra-dark .portal-header { min-height:72px; }
  body.theme-ultra-dark .header-main { min-height:72px; grid-template-columns:auto minmax(0,1fr) 54px; gap:12px; }
  body.theme-ultra-dark .header-main .brand { min-width:116px; }
  body.theme-ultra-dark .header-cta > :not(.menu-button) { display:none!important; }
  body.theme-ultra-dark .portal-header .menu-button { display:grid; width:54px; height:54px; }
  body.theme-ultra-dark .portal-header .mobile-nav { inset:72px 0 0; padding:0 0 calc(110px + env(safe-area-inset-bottom)); }
  body.theme-ultra-dark .mobile-nav-groups { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:16px 0; }
  body.theme-ultra-dark .header-search { min-height:50px; grid-template-columns:23px minmax(0,1fr); padding:0 14px; }
  body.theme-ultra-dark .header-search button,
  body.theme-ultra-dark .header-search kbd { display:none; }
}
@media (max-width:720px) {
  body.theme-ultra-dark .wrap { width:min(calc(100% - 28px),var(--wrap)); }
  body.theme-ultra-dark .header-main { grid-template-columns:108px minmax(0,1fr) 50px; gap:8px; }
  body.theme-ultra-dark .header-main .brand { min-width:0; gap:8px; font-size:1.08rem; }
  body.theme-ultra-dark .header-main .brand img { width:38px; height:38px; }
  body.theme-ultra-dark .header-search { min-height:48px; padding:0 11px; border-radius:14px; }
  body.theme-ultra-dark .header-search input { font-size:.78rem; }
  body.theme-ultra-dark .portal-header .menu-button { width:50px; height:50px; border-radius:14px; }
  body.theme-ultra-dark .portal-header .mobile-nav { inset:72px 0 0; }
  body.theme-ultra-dark .mobile-nav-groups { grid-template-columns:1fr; gap:10px; padding:14px 0; }
  body.theme-ultra-dark .mobile-nav-groups section { padding:16px; border-radius:16px; }
  body.theme-ultra-dark .portal-header .mobile-nav-groups a { min-height:48px; padding:10px 4px; font-size:.92rem; }
  body.theme-ultra-dark .portal-hero,
  body.theme-ultra-dark .tools-portal-hero,
  body.theme-ultra-dark .personal-hero,
  body.theme-ultra-dark .pickem-hero,
  body.theme-ultra-dark .games-directory-hero,
  body.theme-ultra-dark .match-center-hero,
  body.theme-ultra-dark .events-hero,
  body.theme-ultra-dark .directory-hero { padding-block:42px; }
  body.theme-ultra-dark .tool-catalog-expanded .tool-catalog-card { border-radius:18px; }
  body.theme-ultra-dark .tool-card-visual { height:180px; }
  body.theme-ultra-dark .match-team { grid-template-columns:54px minmax(0,1fr) auto; }
  body.theme-ultra-dark .team-mark { width:54px; height:54px; }
  body.theme-ultra-dark .team-mark img { width:46px; height:46px; }
  body.theme-ultra-dark .personal-hero-actions { display:grid; grid-template-columns:1fr; }
  body.theme-ultra-dark .personal-hero-actions .button { width:100%; }
}
@media (max-width:430px) {
  body.theme-ultra-dark .header-main { grid-template-columns:100px minmax(0,1fr) 48px; }
  body.theme-ultra-dark .header-main .brand > span { font-size:1rem; }
  body.theme-ultra-dark .header-main .brand img { width:35px; height:35px; }
  body.theme-ultra-dark .header-search { padding-inline:10px; }
  body.theme-ultra-dark .header-search .icon { width:20px; }
  body.theme-ultra-dark .header-search input { font-size:.72rem; }
  body.theme-ultra-dark .portal-header .menu-button { width:48px; height:48px; }
  body.theme-ultra-dark .games-directory-hero form { grid-template-columns:20px minmax(0,1fr); padding:10px 14px; }
  body.theme-ultra-dark .games-directory-hero form button { grid-column:1/-1; width:100%; min-height:42px; }
  body.theme-ultra-dark .home-match-tabs,
  body.theme-ultra-dark .filter-group { overflow-x:auto; justify-content:flex-start; scrollbar-width:none; }
  body.theme-ultra-dark .home-match-tabs button,
  body.theme-ultra-dark .filter-group button { flex:0 0 auto; min-width:92px; }
}


/* V10.4 viewport and media integrity locks */
body.theme-ultra-dark.menu-open .portal-header {
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
body.theme-ultra-dark .image-not-available {
  position:relative;
  overflow:hidden;
  background:#111a26!important;
}
body.theme-ultra-dark .image-not-available::after {
  content:"Image unavailable";
  display:grid;
  position:absolute;
  inset:0;
  place-items:center;
  padding:10px;
  color:#8d99aa;
  font-size:.62rem;
  font-weight:750;
  letter-spacing:.04em;
  text-align:center;
  text-transform:uppercase;
}
body.theme-ultra-dark .image-not-available > img { display:none!important; }

/* ======================================================================
   2PVP V10.5 — FINAL COMPONENT NORMALIZATION
   One dark surface system for search, directories, tools and future cards.
   ====================================================================== */

:root {
  --v105-bg: #05070a;
  --v105-bg-soft: #080c12;
  --v105-panel: #0b111a;
  --v105-panel-2: #0e1622;
  --v105-panel-3: #121c29;
  --v105-line: #273548;
  --v105-line-strong: #3b4b64;
  --v105-text: #f4f7fb;
  --v105-copy: #c2ccda;
  --v105-muted: #8997aa;
  --v105-accent: #9687ff;
  --v105-accent-strong: #7867ff;
  --v105-success: #61d9a4;
  --v105-danger: #ff5f7d;
}

html { color-scheme: dark; background: var(--v105-bg); }
body.theme-ultra-dark {
  color: var(--v105-text);
  background: var(--v105-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.theme-ultra-dark main { background: var(--v105-bg); }
body.theme-ultra-dark a { text-underline-offset: .18em; }
body.theme-ultra-dark h1,
body.theme-ultra-dark h2,
body.theme-ultra-dark h3,
body.theme-ultra-dark h4,
body.theme-ultra-dark strong { color: var(--v105-text); }
body.theme-ultra-dark p,
body.theme-ultra-dark li { color: var(--v105-copy); }
body.theme-ultra-dark small,
body.theme-ultra-dark .meta,
body.theme-ultra-dark .muted { color: var(--v105-muted); }

/* Header: prevent the page below from appearing through the sticky chrome. */
body.theme-ultra-dark .portal-header {
  isolation: isolate;
  border-bottom: 1px solid #1e2a3a;
  background: rgba(5,7,10,.985);
  box-shadow: 0 12px 34px rgba(0,0,0,.28);
}
body.theme-ultra-dark .header-main,
body.theme-ultra-dark .header-utility { background: transparent; }
body.theme-ultra-dark .header-search {
  border-color: #29384c;
  background: #0b1320;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
body.theme-ultra-dark .header-search input { color: #f4f7fb; caret-color: var(--v105-accent); }
body.theme-ultra-dark .header-search input::placeholder { color: #718096; opacity: 1; }
body.theme-ultra-dark .portal-header .menu-button { color: #eff4fa; border-color: #2a394d; background: #0b1320; }
body.theme-ultra-dark .portal-header .mobile-nav {
  color: var(--v105-text);
  background: #05070a;
  box-shadow: inset 0 1px 0 #1e2938;
}
body.theme-ultra-dark .mobile-nav-groups section {
  color: var(--v105-text);
  border: 1px solid #2a3749;
  background: #0b111a;
  box-shadow: 0 18px 44px rgba(0,0,0,.24);
}
body.theme-ultra-dark .mobile-nav-groups h2 { color: #99a7ba; }
body.theme-ultra-dark .portal-header .mobile-nav-groups a {
  color: #edf2f8;
  border-color: #263447;
  background: transparent;
}
body.theme-ultra-dark .portal-header .mobile-nav-groups a:hover,
body.theme-ultra-dark .portal-header .mobile-nav-groups a:focus-visible {
  color: #fff;
  background: #121b28;
}

/* Search page: remove all inherited light cards and keep the form below header. */
body.theme-ultra-dark .search-portal-hero {
  padding-block: 54px 40px;
  color: var(--v105-text);
  text-align: left;
  background:
    radial-gradient(circle at 86% 10%, rgba(120,103,255,.12), transparent 30%),
    linear-gradient(180deg,#080d14 0%,#05070a 100%);
  border-bottom: 1px solid #1f2b3b;
}
body.theme-ultra-dark .search-portal-hero.has-query { padding-block: 34px 32px; }
body.theme-ultra-dark .search-portal-hero .narrow { max-width: 980px; }
body.theme-ultra-dark .search-portal-hero .eyebrow { color: #a99fff; }
body.theme-ultra-dark .search-portal-hero h1 {
  margin: 12px 0 10px;
  color: #fff;
  font-size: clamp(2.2rem,5vw,4.5rem);
  line-height: .98;
}
body.theme-ultra-dark .search-portal-hero > .wrap > p { max-width: 720px; color: #aab5c5; }
body.theme-ultra-dark .portal-big-search {
  display: grid;
  grid-template-columns: 24px minmax(0,1fr) auto;
  align-items: center;
  width: 100%;
  max-width: 820px;
  min-height: 62px;
  margin: 24px 0 0;
  padding: 6px 7px 6px 17px;
  gap: 12px;
  color: var(--v105-text);
  border: 1px solid #35445a;
  border-radius: 17px;
  background: #0b1320;
  box-shadow: 0 18px 46px rgba(0,0,0,.24);
}
body.theme-ultra-dark .portal-big-search .icon { color: #8998ad; }
body.theme-ultra-dark .portal-big-search input {
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0;
  color: #f5f7fb;
  border: 0;
  outline: 0;
  background: transparent;
}
body.theme-ultra-dark .portal-big-search input::placeholder { color: #6f7d90; opacity: 1; }
body.theme-ultra-dark .portal-big-search button {
  min-width: 112px;
  min-height: 48px;
  color: #fff;
  border: 1px solid #8e80ff;
  border-radius: 13px;
  background: #7867ff;
  box-shadow: 0 10px 24px rgba(120,103,255,.2);
}
body.theme-ultra-dark .portal-big-search button:hover { background: #8979ff; }
body.theme-ultra-dark .search-popular { justify-content: flex-start; color: #8190a4; }
body.theme-ultra-dark .search-popular a {
  color: #cbd4e0;
  border-color: #2d3c51;
  background: #0c141f;
}
body.theme-ultra-dark .search-popular a:hover { color: #fff; border-color: #6257ae; background: #121a29; }
body.theme-ultra-dark .search-results { padding-top: 44px; padding-bottom: 80px; }
body.theme-ultra-dark .result-heading { margin-bottom: 24px; }
body.theme-ultra-dark .result-heading > span { color: #a99fff; }
body.theme-ultra-dark .result-heading h2 { margin-top: 8px; color: #fff; }
body.theme-ultra-dark .search-result-filters {
  display: flex;
  gap: 8px;
  margin: 0 0 22px;
  overflow-x: auto;
  padding: 2px 0 7px;
  scrollbar-width: none;
}
body.theme-ultra-dark .search-result-filters::-webkit-scrollbar { display:none; }
body.theme-ultra-dark .search-result-filters button {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 14px;
  color: #aab5c5;
  border: 1px solid #2b394c;
  border-radius: 999px;
  background: #0a111a;
}
body.theme-ultra-dark .search-result-filters button b { color: #d8dfe9; font-size: .72em; }
body.theme-ultra-dark .search-result-filters button.is-active,
body.theme-ultra-dark .search-result-filters button:hover {
  color: #fff;
  border-color: #7569d6;
  background: #1b1b33;
}
body.theme-ultra-dark .portal-result-list {
  display: grid;
  max-width: 980px;
  gap: 12px;
}
body.theme-ultra-dark .result-list a,
body.theme-ultra-dark .portal-result-list > a {
  display: grid;
  grid-template-columns: 58px minmax(0,1fr) 22px;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 17px 18px;
  color: var(--v105-text);
  border: 1px solid #28374a;
  border-radius: 18px;
  background: #0b111a;
  box-shadow: 0 12px 30px rgba(0,0,0,.17);
}
body.theme-ultra-dark .portal-result-list > a:hover,
body.theme-ultra-dark .portal-result-list > a:focus-visible {
  border-color: #5f56aa;
  background: #101824;
  transform: translateY(-1px);
}
body.theme-ultra-dark .portal-result-list > a > .result-media {
  display: grid;
  width: 58px;
  height: 58px;
  overflow: hidden;
  place-items: center;
  color: #a79cff;
  border: 1px solid #303e53;
  border-radius: 15px;
  background: #121b29;
}
body.theme-ultra-dark .portal-result-list > a > .result-media.has-image { background: #eef1f5; }
body.theme-ultra-dark .portal-result-list > a > .result-media img { width: 100%; height: 100%; object-fit: contain; padding: 7px; }
body.theme-ultra-dark .portal-result-list > a > .result-media.has-image img { background: transparent; }
body.theme-ultra-dark .portal-result-list > a > .result-copy { min-width: 0; }
body.theme-ultra-dark .portal-result-list .result-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 12px;
  margin-bottom: 3px;
}
body.theme-ultra-dark .portal-result-list .result-meta small {
  color: #9f95ff;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
body.theme-ultra-dark .portal-result-list .result-region {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #94a1b3;
  font-size: .66rem;
}
body.theme-ultra-dark .portal-result-list h3 {
  margin: 2px 0 5px;
  overflow: hidden;
  color: #f4f7fb;
  font-size: 1.02rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.theme-ultra-dark .portal-result-list p {
  margin: 0;
  overflow: hidden;
  color: #9ba8b9;
  font-size: .77rem;
  line-height: 1.48;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.theme-ultra-dark .portal-result-list > a > .icon { width: 18px; color: #75839a; }
body.theme-ultra-dark .search-start-grid > a {
  color: var(--v105-text);
  border-color: #29384b;
  background: #0b111a;
}
body.theme-ultra-dark .search-start-grid > a:hover { border-color:#5f56aa; background:#101824; }
body.theme-ultra-dark .search-start-grid h2 { color:#f4f7fb; }
body.theme-ultra-dark .search-start-grid p { color:#98a5b6; }
body.theme-ultra-dark .google-search-section { background:#070a0f; }
body.theme-ultra-dark .google-search-badge,
body.theme-ultra-dark .google-search-consent,
body.theme-ultra-dark .google-search-loading,
body.theme-ultra-dark .google-search-error { color:#eaf0f8; border-color:#2b394d; background:#0b121b; }

/* Country and competition-region markers. */
body.theme-ultra-dark .country-flags {
  display: inline-flex;
  align-items: center;
  min-width: 1.2em;
  color: inherit;
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  font-size: 1.06em;
  font-weight: 400;
  letter-spacing: -.1em;
  line-height: 1;
}
body.theme-ultra-dark .team-country,
body.theme-ultra-dark .entity-region,
body.theme-ultra-dark .event-region,
body.theme-ultra-dark .card-country,
body.theme-ultra-dark .result-region,
body.theme-ultra-dark .team-region {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: #8f9db0;
}
body.theme-ultra-dark .team-country .icon,
body.theme-ultra-dark .entity-region .icon { width: 15px; }

/* One dark card language across legacy and future components. */
body.theme-ultra-dark :is(
  .watch-grid div,
  .guide-list a,
  .next-actions > a,
  .check-list li,
  .tool-catalog-card,
  .tool-panel,
  .crosshair-stage,
  .crosshair-controls,
  .export-card,
  .glossary-grid > a,
  .academy-pillars div,
  .rank-feature,
  .roster-list a,
  .fact-grid,
  .status-list,
  .comparison-grid a,
  .not-found-links a,
  .search-suggestions a,
  .event-filter-bar,
  .directory-toolbar,
  .game-genre-filter,
  .people-columns > div,
  .playbook-card,
  .session-map ol,
  .hub-shortcut-grid > a,
  .game-story aside,
  .hub-watch-grid,
  .portal-guide-list a,
  .topic-checklist,
  .topic-tools,
  .topic-side-card,
  .faq-list details,
  .profile-roster > a,
  .match-time-card,
  .match-next-paths > a,
  .event-game-promo,
  .home-tool-station,
  .tool-use-grid ol,
  .toolkit-panel,
  .quick-results > div,
  .tool-feedback,
  .reaction-results > div,
  .routine-output,
  .gamepad-status,
  .toolkit-tip-card,
  .toolkit-related,
  .tool-more-strip a,
  .personal-summary article,
  .personal-profile-form,
  .personal-panel,
  .saved-card,
  .pickem-card,
  .pickem-choices button,
  .calendar-list > article,
  .place-card,
  .widget-preview-shell,
  .advanced-tool-panel,
  .timezone-results article,
  .bracket-match,
  .veto-step,
  .veto-map-list button,
  .recent-card,
  .aim-trainer-toolbar > div,
  .aim-trainer-summary > div,
  .platform-card,
  .learning-steps li,
  .database-detail article,
  .database-detail aside,
  .data-table-wrap,
  .result-list a
) {
  color: var(--v105-text);
  border-color: var(--v105-line);
  background: var(--v105-panel);
  box-shadow: none;
}
body.theme-ultra-dark :is(
  .watch-grid div,
  .guide-list a,
  .next-actions > a,
  .glossary-grid > a,
  .comparison-grid a,
  .search-suggestions a,
  .hub-shortcut-grid > a,
  .portal-guide-list a,
  .profile-roster > a,
  .match-next-paths > a,
  .tool-more-strip a,
  .saved-card,
  .place-card,
  .recent-card,
  .platform-card
):hover { border-color:#5c55a1; background:#101824; }
body.theme-ultra-dark :is(
  .tool-catalog-card,
  .tool-panel,
  .personal-panel,
  .saved-card,
  .pickem-card,
  .calendar-list > article,
  .place-card,
  .platform-card,
  .learning-steps li,
  .database-detail article,
  .database-detail aside
) :is(h2,h3,h4,strong) { color:#f4f7fb; }
body.theme-ultra-dark :is(
  .tool-catalog-card,
  .tool-panel,
  .personal-panel,
  .saved-card,
  .pickem-card,
  .calendar-list > article,
  .place-card,
  .platform-card,
  .learning-steps li,
  .database-detail article,
  .database-detail aside
) :is(p,small) { color:#98a6b8; }
body.theme-ultra-dark :is(input,select,textarea) {
  color:#edf2f8;
  border-color:#34445a;
  background:#0a121d;
}
body.theme-ultra-dark :is(input,textarea)::placeholder { color:#6f7e92; opacity:1; }
body.theme-ultra-dark select option { color:#eef3f9; background:#0b111a; }
body.theme-ultra-dark .table-scroll,
body.theme-ultra-dark .data-table-wrap { overflow:auto; border:1px solid var(--v105-line); border-radius:16px; }
body.theme-ultra-dark table { color:#dfe6ef; background:#0b111a; }
body.theme-ultra-dark th { color:#aeb9c7; border-color:#273548; background:#101925; }
body.theme-ultra-dark td { color:#d2dae5; border-color:#223044; }

/* Preserve bright, neutral stages where transparent team/event marks need contrast. */
body.theme-ultra-dark :is(
  .team-mark,
  .event-logo,
  .entity-image-logo,
  .team-logo-stage,
  .profile-photo-logo,
  .people-avatar,
  .result-media.has-image
) {
  border-color:#dce2ea;
  background:#f1f3f6;
}
body.theme-ultra-dark :is(.team-mark,.event-logo,.entity-image-logo,.team-logo-stage,.profile-photo-logo) img { object-fit:contain; }

/* Buttons must never lose their label. */
body.theme-ultra-dark :is(.button,button,[role="button"]) { font-weight:700; }
body.theme-ultra-dark .button-primary,
body.theme-ultra-dark .primary-action {
  color:#fff!important;
  border-color:#8e80ff!important;
  background:#7867ff!important;
}
body.theme-ultra-dark .button-primary:hover,
body.theme-ultra-dark .primary-action:hover { background:#8979ff!important; }
body.theme-ultra-dark .button-ghost,
body.theme-ultra-dark .button-secondary {
  color:#e8edf5!important;
  border-color:#35445a!important;
  background:#0c141f!important;
}
body.theme-ultra-dark :is(button,.button)[disabled],
body.theme-ultra-dark :is(button,.button)[aria-disabled="true"] {
  color:#707d8f!important;
  border-color:#222e3f!important;
  background:#0a1018!important;
  opacity:.72;
}

/* Mobile layout integrity and no horizontal clipping. */
@media (max-width:720px) {
  body.theme-ultra-dark .search-portal-hero { padding-block:36px 30px; }
  body.theme-ultra-dark .search-portal-hero.has-query { padding-block:28px 26px; }
  body.theme-ultra-dark .search-portal-hero h1 { font-size:clamp(2rem,12vw,3rem); }
  body.theme-ultra-dark .portal-big-search {
    grid-template-columns:22px minmax(0,1fr);
    padding:10px 12px;
    border-radius:16px;
  }
  body.theme-ultra-dark .portal-big-search button {
    grid-column:1/-1;
    width:100%;
    min-height:45px;
  }
  body.theme-ultra-dark .search-popular {
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:5px;
    scrollbar-width:none;
  }
  body.theme-ultra-dark .search-popular::-webkit-scrollbar { display:none; }
  body.theme-ultra-dark .search-popular > * { flex:0 0 auto; }
  body.theme-ultra-dark .search-results { padding-top:34px; }
  body.theme-ultra-dark .result-list a,
  body.theme-ultra-dark .portal-result-list > a {
    grid-template-columns:52px minmax(0,1fr) 18px;
    gap:12px;
    padding:14px;
    border-radius:16px;
  }
  body.theme-ultra-dark .portal-result-list > a > .result-media { width:52px; height:52px; border-radius:13px; }
  body.theme-ultra-dark .portal-result-list h3 { font-size:.94rem; }
  body.theme-ultra-dark .portal-result-list p { font-size:.7rem; }
  body.theme-ultra-dark .search-start-grid { grid-template-columns:1fr; }
  body.theme-ultra-dark .search-start-grid > a { padding:18px; }
  body.theme-ultra-dark .search-start-grid > a > span { margin-bottom:18px; }
}
@media (max-width:430px) {
  body.theme-ultra-dark .result-list a,
  body.theme-ultra-dark .portal-result-list > a { grid-template-columns:48px minmax(0,1fr) 16px; padding:13px; }
  body.theme-ultra-dark .portal-result-list > a > .result-media { width:48px; height:48px; }
  body.theme-ultra-dark .portal-result-list .result-meta { gap:5px 8px; }
  body.theme-ultra-dark .portal-result-list .result-region { font-size:.61rem; }
}

/* Guardrails for future components: common semantic cards inherit the platform surface. */
body.theme-ultra-dark :is(article,section,aside,div)[class*="-card"]:not(.team-mark):not(.event-logo):not(.game-mosaic-card):not(.home-game-card) {
  --card-text: var(--v105-text);
}
body.theme-ultra-dark :is(.section-tint,.section-soft,.page-surface) { background:#070a0f; }

/* My 2PVP profile card was a remaining legacy light component. */
body.theme-ultra-dark .player-card {
  color: var(--v105-text);
  border: 1px solid #2b394d;
  background: #0b121b;
  box-shadow: none;
}
body.theme-ultra-dark .player-card h3 { color:#f4f7fb; }
body.theme-ultra-dark .player-card p { color:#98a6b8; }
body.theme-ultra-dark .player-card small { color:#a99fff; }
body.theme-ultra-dark .player-card > a { color:#b2a8ff; }
body.theme-ultra-dark .player-card-mark { border-color:#2f3e52; background:#101925; }

/* Final accessibility contrast pass. */
body.theme-ultra-dark {
  --violet: #a99fff;
  --primary-action-bg: #6c58ed;
}
body.theme-ultra-dark :is(
  .button-primary,
  .primary-action,
  .portal-big-search button,
  .games-directory-hero form button,
  .hero-finder button,
  .home-finder button,
  .footer-spotlight button,
  .tool-primary-action
) {
  color:#fff!important;
  border-color:#8777ff!important;
  background:#6c58ed!important;
}
body.theme-ultra-dark :is(
  .button-primary,
  .primary-action,
  .portal-big-search button,
  .games-directory-hero form button,
  .hero-finder button,
  .home-finder button,
  .footer-spotlight button,
  .tool-primary-action
):hover { color:#fff!important; background:#604bdd!important; }
body.theme-ultra-dark :is(.game-genre-filter,.calendar-tabs,.calendar-filter-tabs,.filter-switcher) button {
  color:#c5cfdb;
  border:1px solid #304057;
  background:#0b131e;
}
body.theme-ultra-dark :is(.game-genre-filter,.calendar-tabs,.calendar-filter-tabs,.filter-switcher) button:hover,
body.theme-ultra-dark :is(.game-genre-filter,.calendar-tabs,.calendar-filter-tabs,.filter-switcher) button.is-active,
body.theme-ultra-dark :is(.game-genre-filter,.calendar-tabs,.calendar-filter-tabs,.filter-switcher) button[aria-pressed="true"] {
  color:#fff;
  border-color:#7569d6;
  background:#242044;
}
body.theme-ultra-dark .inline-links a,
body.theme-ultra-dark .section-heading a { color:#b9b1ff; }
body.theme-ultra-dark .lead-copy { color:#c4cedb; }
body.theme-ultra-dark .skip-link:focus {
  color:#fff;
  background:#151e2b;
  outline:3px solid #8f82ff;
}

/* Remaining instructional and directory cards normalized after full-page scan. */
body.theme-ultra-dark .match-how > div:last-child > article,
body.theme-ultra-dark .event-how > div:last-child > article,
body.theme-ultra-dark .directory-paths .wrap > div:last-child > article,
body.theme-ultra-dark .games-directory-how .wrap > div:last-child > a,
body.theme-ultra-dark .status-feature-grid > a,
body.theme-ultra-dark .status-game-grid > a {
  color:var(--v105-text);
  border:1px solid var(--v105-line);
  background:var(--v105-panel);
  box-shadow:none;
}
body.theme-ultra-dark .match-how > div:last-child > article :is(h3,strong),
body.theme-ultra-dark .event-how > div:last-child > article :is(h3,strong),
body.theme-ultra-dark .directory-paths .wrap > div:last-child > article :is(h3,strong),
body.theme-ultra-dark .games-directory-how .wrap > div:last-child > a :is(h3,strong),
body.theme-ultra-dark .status-feature-grid > a :is(h2,h3,strong),
body.theme-ultra-dark .status-game-grid > a :is(h2,h3,strong) { color:#f4f7fb; }
body.theme-ultra-dark .match-how > div:last-child > article p,
body.theme-ultra-dark .event-how > div:last-child > article p,
body.theme-ultra-dark .directory-paths .wrap > div:last-child > article p,
body.theme-ultra-dark .games-directory-how .wrap > div:last-child > a small,
body.theme-ultra-dark .status-feature-grid > a p,
body.theme-ultra-dark .status-game-grid > a small { color:#99a7b8; }
body.theme-ultra-dark .games-directory-how .wrap > div:last-child > a:hover,
body.theme-ultra-dark .status-feature-grid > a:hover,
body.theme-ultra-dark .status-game-grid > a:hover { border-color:#5e56a5; background:#101824; }
body.theme-ultra-dark .calendar-toolbar > div[role="group"] button {
  color:#c6d0dc;
  border:1px solid #304057;
  background:#0b131e;
}
body.theme-ultra-dark .calendar-toolbar > div[role="group"] button.is-active,
body.theme-ultra-dark .calendar-toolbar > div[role="group"] button:hover {
  color:#fff;
  border-color:#7569d6;
  background:#242044;
}
body.theme-ultra-dark .match-how > div:last-child,
body.theme-ultra-dark .event-how > div:last-child,
body.theme-ultra-dark .directory-paths .wrap > div:last-child {
  background:transparent;
  box-shadow:none;
}


/* V10.7 responsive media and Google Programmable Search finalization -------- */
.game-hub-hero-grid {
  grid-template-columns: minmax(280px, 410px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 58px);
  min-height: 0;
  padding-block: clamp(42px, 6vw, 76px);
}
.game-hub-art {
  width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 9;
  align-self: center;
  transform: rotate(-1deg);
}
.game-hub-art img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
}
.game-hub-heading { min-width: 0; }
.game-hub-heading h1 { font-size: clamp(2.7rem, 5vw, 5rem); text-wrap: balance; }
.game-hub-facts {
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
}
.game-story aside img,
.game-topic-hero aside img,
.topic-game-card img,
.event-game-promo img,
.toolkit-hero figure img,
.visual-guide-list > a > img,
.article-hero-rich figure img {
  height: auto;
}

.google-search-section {
  overflow: hidden;
  border-block: 1px solid #1c2735;
  background: #05070a;
}
.google-search-heading { align-items: center; }
.google-search-heading h2 { color: #f3f6fb; }
.google-search-heading > div > p { max-width: 720px; color: #98a6b9; }
.google-search-badge,
.google-search-consent,
.google-search-loading,
.google-search-error,
.google-search-noscript {
  color: #eef3fa;
  border: 1px solid #263548;
  background: #0a1018;
  box-shadow: none;
}
.google-search-badge { color: #dce7f5; }
.google-search-consent { grid-template-columns: 48px minmax(0, 1fr) auto; }
.google-search-consent p,
.google-search-error p { color: #9ba9bb; }
.google-search-loading {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pse-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid #34445a;
  border-top-color: #8b7cff;
  border-radius: 50%;
  animation: pse-spin .8s linear infinite;
}
@keyframes pse-spin { to { transform: rotate(360deg); } }
.google-search-shell {
  overflow: hidden;
  border: 1px solid #263548;
  background: #080d14;
  border-radius: 16px;
}
.google-search-results {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
}
.google-search-section[data-pse-state="ready"] .google-search-shell { min-height: 0; }
.google-search-results .gsc-control-cse,
.google-search-results .gsc-control-cse-en {
  width: 100% !important;
  padding: 18px !important;
  border: 0 !important;
  background: #080d14 !important;
  font-family: inherit !important;
}
.google-search-results .gsc-results,
.google-search-results .gsc-resultsbox-visible,
.google-search-results .gsc-resultsRoot,
.google-search-results .gsc-webResult.gsc-result,
.google-search-results .gsc-imageResult,
.google-search-results .gsc-expansionArea {
  background: transparent !important;
}
.google-search-results .gsc-webResult.gsc-result {
  margin: 0 0 10px !important;
  padding: 16px !important;
  border: 1px solid #243347 !important;
  border-radius: 13px !important;
}
.google-search-results .gsc-webResult.gsc-result:hover {
  border-color: #5d55a7 !important;
  background: #0d1520 !important;
}
.google-search-results .gs-title,
.google-search-results .gs-title * {
  color: #b7adff !important;
  text-decoration: none !important;
}
.google-search-results .gs-snippet,
.google-search-results .gsc-result-info,
.google-search-results .gsc-orderby-label,
.google-search-results .gsc-cursor-page {
  color: #a8b4c5 !important;
}
.google-search-results .gs-visibleUrl,
.google-search-results .gs-visibleUrl-short,
.google-search-results .gs-visibleUrl-long {
  color: #6fd7b0 !important;
}
.google-search-results .gsc-cursor-page {
  display: inline-grid !important;
  min-width: 34px;
  min-height: 34px;
  place-items: center;
  margin: 4px !important;
  border: 1px solid #263548;
  background: #0c131d;
  border-radius: 8px;
}
.google-search-results .gsc-cursor-current-page {
  color: #fff !important;
  border-color: #7568f5;
  background: #5b4ce8;
}
.google-search-results .gsc-adBlock,
.google-search-results .gsc-adBlockVertical {
  overflow: hidden;
  margin: 0 0 14px !important;
  border-radius: 12px;
}
.google-search-error { display: grid; gap: 8px; padding: 18px; }
.google-search-error strong { font-size: .83rem; }
.google-search-error .button { width: fit-content; }
.google-search-noscript { padding: 14px; border-radius: 12px; color: #9ba9bb; }

@media (min-width: 821px) and (max-width: 1180px) {
  .game-hub-hero-grid {
    grid-template-columns: minmax(250px, 36vw) minmax(0, 1fr);
    gap: 30px;
    padding-block: 46px;
  }
  .game-hub-heading h1 { font-size: clamp(2.65rem, 5.2vw, 4rem); }
  .game-hub-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .game-story-grid { grid-template-columns: minmax(0, 1fr) minmax(280px, 36vw); gap: 34px; }
}

@media (max-width: 820px) {
  .game-hub-hero-grid { grid-template-columns: 1fr; gap: 26px; }
  .game-hub-art { max-width: 680px; justify-self: stretch; transform: none; }
  .game-hub-heading h1 { font-size: clamp(2.55rem, 9vw, 4rem); }
  .game-hub-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .google-search-heading { align-items: flex-start; }
  .google-search-consent { grid-template-columns: 42px minmax(0, 1fr); }
  .google-search-consent .button { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 580px) {
  .game-hub-hero-grid { padding-block: 30px; }
  .game-hub-art { border-width: 3px; border-radius: 14px; }
  .game-hub-facts { grid-template-columns: 1fr 1fr; }
  .google-search-results .gsc-control-cse,
  .google-search-results .gsc-control-cse-en { padding: 10px !important; }
  .google-search-results .gsc-webResult.gsc-result { padding: 13px !important; }
  .google-search-error .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .pse-spinner { animation: none; }
}

/* V10.8 Widget Studio and professional embed system */
body.widgets-studio-page { --widget-studio-panel:#0b121b; --widget-studio-panel-2:#101925; --widget-studio-line:#29374a; }
body.widgets-studio-page .breadcrumbs { background:#05070a; }
.widget-studio-hero { position:relative; overflow:hidden; padding:78px 0 72px; border-bottom:1px solid #1e2938; background:radial-gradient(circle at 78% 18%,rgba(139,125,255,.14),transparent 31%),radial-gradient(circle at 10% 10%,rgba(0,191,232,.08),transparent 27%),linear-gradient(145deg,#05070a,#07101a 62%,#05070a); }
.widget-studio-hero::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.2; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom,#000,transparent 90%); }
.widget-studio-hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,.86fr); align-items:center; gap:64px; }
.widget-studio-hero h1 { max-width:850px; margin:17px 0 20px; color:#f7f9fc; font-size:clamp(3.1rem,6.3vw,6rem); line-height:.98; letter-spacing:-.055em; }
.widget-studio-hero p { max-width:720px; color:#a2afc0; font-size:1.02rem; line-height:1.75; }
.widget-studio-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:29px; }
.widget-trust-row { display:flex; flex-wrap:wrap; gap:10px 20px; margin-top:27px; color:#8695a9; font-size:.68rem; }
.widget-trust-row span { display:inline-flex; align-items:center; gap:6px; }
.widget-trust-row .icon { width:15px; color:#8b7dff; }
.widget-hero-demo { position:relative; padding:18px; border:1px solid #2b394d; background:rgba(8,13,20,.82); border-radius:28px; box-shadow:0 35px 100px rgba(0,0,0,.45); }
.widget-hero-demo::before { content:"Live preview"; display:block; margin:0 0 11px 4px; color:#728096; font-size:.58rem; font-weight:850; letter-spacing:.13em; text-transform:uppercase; }
.widget-preset-section { padding-top:78px; }
.widget-preset-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.widget-preset-grid button { display:grid; min-height:230px; align-content:start; justify-items:start; padding:25px; color:#eef3fb; text-align:left; border:1px solid #263448; background:linear-gradient(145deg,#0b121b,#0d1622); border-radius:19px; cursor:pointer; transition:transform .18s ease,border-color .18s ease,background .18s ease; }
.widget-preset-grid button:hover { transform:translateY(-4px); border-color:#5c55a1; background:#111a27; }
.widget-preset-grid button>span { display:grid; width:44px; height:44px; place-items:center; color:#9d93ff; background:rgba(139,125,255,.1); border:1px solid rgba(139,125,255,.2); border-radius:12px; }
.widget-preset-grid button>span .icon { width:21px; }
.widget-preset-grid strong { margin:26px 0 8px; font-size:1.18rem; }
.widget-preset-grid small { color:#8d9bae; font-size:.76rem; line-height:1.65; }
.widget-preset-grid b { margin-top:auto; padding-top:20px; color:#bcb5ff; font-size:.68rem; }
.widget-builder-section { border-block:1px solid #1d2938; background:#070b10!important; }
.widget-builder-grid { display:grid; grid-template-columns:minmax(290px,.62fr) minmax(0,1.38fr); align-items:start; gap:18px; }
.widget-builder-panel,.widget-builder-preview,.widget-code-panel { border:1px solid var(--widget-studio-line); background:var(--widget-studio-panel); border-radius:22px; }
.widget-builder-panel { position:sticky; top:112px; overflow:hidden; }
.widget-builder-head { display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid var(--widget-studio-line); background:#0d1621; }
.widget-builder-head>span { display:grid; width:40px; height:40px; place-items:center; color:#978cff; background:rgba(139,125,255,.1); border-radius:11px; }
.widget-builder-head .icon { width:20px; }
.widget-builder-head strong,.widget-builder-head small { display:block; }
.widget-builder-head strong { color:#f1f5fa; font-size:.87rem; }
.widget-builder-head small { margin-top:3px; color:#7d8ca1; font-size:.6rem; }
.widget-builder-fields { display:grid; grid-template-columns:1fr 1fr; gap:13px; padding:18px; }
.widget-builder-fields>label { display:grid; align-content:start; gap:7px; min-width:0; }
.widget-builder-fields>label>span:first-child { color:#8795a8; font-size:.58rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.widget-builder-fields input:not([type="checkbox"]),.widget-builder-fields select { width:100%; min-height:46px; padding:9px 11px; color:#edf2f9; border:1px solid #344258; background:#080e16; border-radius:10px; }
.widget-builder-fields input[type="color"] { padding:5px; cursor:pointer; }
.widget-builder-fields input:focus,.widget-builder-fields select:focus { border-color:#7569ea; outline:0; box-shadow:0 0 0 4px rgba(139,125,255,.1); }
.widget-builder-check { grid-column:1/-1; grid-template-columns:auto 1fr!important; align-items:start!important; padding:13px; border:1px solid #29374a; background:#0a111a; border-radius:12px; cursor:pointer; }
.widget-builder-check input { margin-top:3px; accent-color:#8b7dff; }
.widget-builder-check>span { text-transform:none!important; letter-spacing:0!important; }
.widget-builder-check strong,.widget-builder-check small { display:block; }
.widget-builder-check strong { color:#dce3ed; font-size:.72rem; }
.widget-builder-check small { margin-top:3px; color:#76859a; font-size:.6rem; line-height:1.45; }
.widget-builder-preview { overflow:hidden; }
.widget-preview-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:58px; padding:0 18px; border-bottom:1px solid var(--widget-studio-line); background:#0d1621; }
.widget-preview-toolbar span { display:inline-flex; align-items:center; gap:7px; color:#dce4ef; font-size:.7rem; font-weight:780; }
.widget-preview-toolbar i { width:8px; height:8px; background:#38d996; border-radius:50%; box-shadow:0 0 0 5px rgba(56,217,150,.08); }
.widget-preview-toolbar small { color:#76859a; font-size:.58rem; }
.widget-preview-stage { min-height:620px; padding:34px; background:radial-gradient(circle at 50% 0,rgba(139,125,255,.07),transparent 35%),#05080c; }
.widget-preview-stage>[data-widget-preview] { width:min(100%,760px); margin:auto; }
.widget-code-panel { margin-top:18px; overflow:hidden; }
.widget-code-head { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 22px; border-bottom:1px solid var(--widget-studio-line); }
.widget-code-head h3 { margin:5px 0 0; color:#f1f5fa; font-size:1.02rem; }
.widget-code-panel pre { margin:0; padding:24px; overflow:auto; color:#d5deeb; background:#05090e; font-size:.72rem; line-height:1.8; white-space:pre-wrap; word-break:break-word; }
.widget-code-panel .is-copied { background:#257d59!important; }
.widget-capability-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.widget-capability-grid article { min-height:220px; padding:24px; border:1px solid #263448; background:#0b121b; border-radius:18px; }
.widget-capability-grid article>span { display:grid; width:42px; height:42px; place-items:center; color:#968bff; background:rgba(139,125,255,.09); border-radius:11px; }
.widget-capability-grid .icon { width:20px; }
.widget-capability-grid h3 { margin:28px 0 9px; color:#edf3fb; font-size:1.08rem; }
.widget-capability-grid p { margin:0; color:#8493a7; font-size:.73rem; line-height:1.7; }
.widget-publish-section { background:#070b10!important; border-top:1px solid #1d2938; }
.widget-publish-links { display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:25px; }
.widget-publish-links a { display:inline-flex; align-items:center; gap:6px; color:#bbb4ff; font-size:.72rem; font-weight:780; }
.widget-publish-links .icon { width:15px; }
.widget-legacy-note { display:flex; gap:14px; padding:25px; color:#dce4ef; border:1px solid #2c3a4f; background:#0b131e; border-radius:18px; }
.widget-legacy-note>span { display:grid; width:42px; height:42px; flex:none; place-items:center; color:#42d89a; background:rgba(66,216,154,.09); border-radius:50%; }
.widget-legacy-note .icon { width:20px; }
.widget-legacy-note strong { display:block; margin:2px 0 7px; }
.widget-legacy-note p { margin:0; color:#8392a6; font-size:.72rem; line-height:1.65; }
.widget-legacy-note code { color:#c9c3ff; }
@media (max-width:1080px) {
  .widget-studio-hero-grid { grid-template-columns:1fr; gap:38px; }.widget-hero-demo { max-width:760px; }.widget-preset-grid,.widget-capability-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.widget-builder-grid { grid-template-columns:1fr; }.widget-builder-panel { position:static; }.widget-builder-fields { grid-template-columns:repeat(3,minmax(0,1fr)); }.widget-builder-check { grid-column:span 3; }
}
@media (max-width:720px) {
  .widget-studio-hero { padding:48px 0; }.widget-studio-hero h1 { font-size:3.05rem; }.widget-studio-hero-grid { gap:28px; }.widget-hero-demo { margin-inline:-6px; padding:10px; border-radius:20px; }.widget-trust-row { display:grid; grid-template-columns:1fr 1fr; }
  .widget-preset-grid,.widget-capability-grid { grid-template-columns:1fr; }.widget-preset-grid button { min-height:200px; }.widget-builder-fields { grid-template-columns:1fr 1fr; }.widget-builder-check { grid-column:span 2; }.widget-preview-stage { min-height:520px; padding:16px 10px; }.widget-code-head { align-items:flex-start; flex-direction:column; }.widget-code-head .button { width:100%; }.widget-code-panel pre { font-size:.63rem; }
}
@media (max-width:480px) {
  .widget-studio-hero h1 { font-size:2.55rem; }.widget-studio-actions>* { flex:1; }.widget-trust-row { grid-template-columns:1fr; }.widget-builder-fields { grid-template-columns:1fr; }.widget-builder-check { grid-column:auto; }.widget-preview-toolbar small { display:none; }
}