:root {
  --bg: #07080d;
  --bg-2: #0d0f17;
  --panel: #12151f;
  --panel-2: #181c28;
  --line: #232838;
  --text: #eef0f6;
  --muted: #9aa1b5;
  --dim: #6b7287;
  --accent: #8b7bff;
  --accent-2: #3ee6c8;
  --grad: linear-gradient(100deg, #8b7bff 0%, #5aa8ff 50%, #3ee6c8 100%);
  --t-platinum: #dfe7f5;
  --t-gold: #f4c25b;
  --t-silver: #b8c2d6;
  --t-bronze: #d58c5c;
  --t-borked: #ff6b6b;
  --t-pending: #7c849a;
  --radius: 14px;
  --shadow: 0 20px 60px rgba(0, 0, 0, .45);
  --max: 1320px;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body {
  font: 15px/1.5 "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, .display { font-family: "Outfit", "Inter", sans-serif; letter-spacing: -0.02em; margin: 0; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 28px; }
@media (max-width: 640px) { .wrap { padding: 0 16px; } }

/* ---------- header ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50; height: 68px;
  display: flex; align-items: center;
  background: linear-gradient(180deg, rgba(7, 8, 13, .92), rgba(7, 8, 13, .55) 70%, transparent);
  backdrop-filter: blur(8px);
  transition: background .2s;
}
.nav.solid { background: rgba(7, 8, 13, .96); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 28px; width: 100%; }
.brand { display: flex; align-items: center; gap: 10px; font: 800 21px "Outfit", sans-serif; letter-spacing: -0.03em; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 9px; background: var(--grad); flex: none;
  display: grid; place-items: center; color: #07080d;
  box-shadow: 0 0 24px rgba(139, 123, 255, .5);
}
.brand-mark svg { width: 100%; height: 100%; fill: #07080d; }
.brand-mark.lg { width: 56px; height: 56px; border-radius: 16px; }
.brand-mark.xl { width: 96px; height: 96px; border-radius: 26px; box-shadow: 0 0 80px rgba(110, 140, 255, .55); }
.nav-links { display: flex; gap: 22px; color: var(--muted); font-weight: 500; }
.nav-links a:hover, .nav-links a.on { color: var(--text); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.nav-search {
  display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .08); border-radius: 999px; padding: 7px 14px; width: 240px;
}
.nav-search input { background: none; border: 0; outline: 0; width: 100%; }
.nav-search input::placeholder { color: var(--dim); }
@media (max-width: 900px) { .nav-search, .nav-links { display: none; } }
.nav-about-m { display: none; color: var(--muted); font-weight: 500; }
@media (max-width: 900px) { .nav-about-m { display: inline; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 999px; font-weight: 650; white-space: nowrap;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--grad); color: #06070c; box-shadow: 0 8px 30px rgba(110, 140, 255, .35); }
.btn-primary:hover { box-shadow: 0 10px 40px rgba(110, 140, 255, .55); transform: translateY(-1px); }
.btn-ghost { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }
.btn-ghost:hover { background: rgba(255, 255, 255, .14); }
.btn-lg { padding: 15px 28px; font-size: 17px; }
.btn-light { background: #f4f6fb; color: #06070c; border: 1px solid #f4f6fb; }
.btn-light:hover { background: #fff; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .6; pointer-events: none; }

.avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--grad); color: #07080d;
  display: grid; place-items: center; font-weight: 800;
}
.menu { position: relative; }
.menu-pop {
  position: absolute; right: 0; top: 46px; width: 240px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 8px; box-shadow: var(--shadow); display: none;
}
.menu.open .menu-pop { display: block; }
.menu-pop a, .menu-pop button { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 8px; color: var(--muted); }
.menu-pop a:hover, .menu-pop button:hover { background: var(--panel-2); color: var(--text); }
.menu-pop .who { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; font-size: 13px; color: var(--dim); }
.menu-pop .who b { display: block; color: var(--text); font-size: 14px; }

/* ---------- hero ---------- */
.hero { position: relative; height: min(88vh, 860px); min-height: 560px; overflow: hidden; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.hero-slide.on { opacity: 1; }
.hero-slide img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 8s ease; }
.hero-slide.on img.bg { transform: scale(1); }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7, 8, 13, .95) 0%, rgba(7, 8, 13, .7) 38%, rgba(7, 8, 13, .1) 70%),
    linear-gradient(0deg, var(--bg) 0%, rgba(7, 8, 13, 0) 35%);
}
.hero-content { position: absolute; z-index: 2; inset: auto 0 12%; }
.hero-kicker { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); }
.hero h1 { font-size: clamp(42px, 6.4vw, 88px); line-height: .98; font-weight: 800; margin: 16px 0 18px; max-width: 13ch; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.lede { font-size: clamp(16px, 1.5vw, 20px); color: #c9cddb; max-width: 46ch; margin: 0 0 30px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-now { position: absolute; z-index: 2; right: 28px; bottom: 12%; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.hero-now .logo { max-width: 300px; max-height: 120px; object-fit: contain; filter: drop-shadow(0 6px 30px rgba(0, 0, 0, .7)); }
.hero-dots { display: flex; gap: 8px; }
.hero-dots button { width: 34px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .25); }
.hero-dots button.on { background: var(--text); }
@media (max-width: 900px) { .hero-now { display: none; } }

/* ---------- compatibility checker ---------- */
.checker {
  position: relative; z-index: 5; margin-top: -40px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line);
  border-radius: 20px; padding: 26px; box-shadow: var(--shadow);
  display: grid; grid-template-columns: 1fr 1.3fr; gap: 26px; align-items: center;
}
.checker h2 { font-size: 26px; }
.checker p { color: var(--muted); margin: 6px 0 0; }
.checker-box { position: relative; }
.checker-input {
  display: flex; align-items: center; gap: 10px; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px 18px; font-size: 17px;
}
.checker-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(139, 123, 255, .18); }
.checker-input input { flex: 1; background: none; border: 0; outline: 0; }
.checker-results { position: absolute; left: 0; right: 0; top: calc(100% + 8px); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); z-index: 10; }
.checker-results a { display: flex; align-items: center; gap: 14px; padding: 10px 14px; }
.checker-results a:hover { background: var(--panel-2); }
.checker-results img { width: 92px; height: 43px; object-fit: cover; border-radius: 6px; }
.checker-results .nm { flex: 1; font-weight: 600; }
@media (max-width: 800px) { .checker { grid-template-columns: 1fr; } }

/* ---------- tier badge ---------- */
.tier {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
  background: rgba(0, 0, 0, .55); border: 1px solid currentColor; backdrop-filter: blur(6px);
}
.tier::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.tier.platinum { color: var(--t-platinum); }
.tier.gold { color: var(--t-gold); }
.tier.silver { color: var(--t-silver); }
.tier.bronze { color: var(--t-bronze); }
.tier.borked { color: var(--t-borked); }
.tier.pending { color: var(--t-pending); }
.tier-lg { font-size: 15px; padding: 8px 16px 8px 13px; }

/* ---------- rows ---------- */
.section { padding: 56px 0 8px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.section-head h2 { font-size: 28px; }
.section-head p { color: var(--muted); margin: 4px 0 0; }
.section-head a { color: var(--muted); font-weight: 600; white-space: nowrap; }
.section-head a:hover { color: var(--text); }
.row { display: grid; grid-auto-flow: column; grid-auto-columns: 210px; gap: 16px; overflow-x: auto; padding: 6px 2px 22px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.row > * { scroll-snap-align: start; }

.card { position: relative; display: block; border-radius: var(--radius); overflow: hidden; background: var(--panel); aspect-ratio: 2 / 3; transition: transform .2s, box-shadow .2s; }
.card:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 18px 40px rgba(0, 0, 0, .6), 0 0 0 2px rgba(139, 123, 255, .6); z-index: 2; }
.card img { width: 100%; height: 100%; object-fit: cover; }
.card .wide { position: absolute; inset: 0; display: flex; align-items: center; background: #000; }
.card .wide img { position: relative; height: auto; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); }
.card .wide img.fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(22px) brightness(.6); transform: scale(1.3); box-shadow: none; }
.card .badges { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; }
/* Instant/download pill sits top-right (tier badge is top-left) so it never collides with the always-on title bar. */
.card-instant { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px 4px 7px; border-radius: 999px; background: var(--grad); color: #07080d; font-size: 12px; font-weight: 800; box-shadow: 0 4px 16px rgba(0, 0, 0, .5); }
/* The standard game-tile title bar: a transparent bottom gradient, ALWAYS visible, name clamped to 2 lines, genres on
   one muted line. Shared treatment with .lib-body and .hero-thumb span so every tile reads the same. */
.card .meta { position: absolute; inset: auto 0 0; padding: 34px 12px 11px; background: linear-gradient(0deg, rgba(0, 0, 0, .92) 32%, rgba(0, 0, 0, .55) 68%, transparent); }
.card .meta b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; font-weight: 700; line-height: 1.25; }
.card .meta b + span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.card .meta span { font-size: 12px; color: var(--muted); }
.chip-mini { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: rgba(62, 230, 200, .15); color: var(--accent-2); margin-top: 6px; }

/* ---------- value props ---------- */
.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.value { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 24px; }
.value .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(139, 123, 255, .14); color: var(--accent); margin-bottom: 16px; }
.value h3 { font-size: 20px; margin-bottom: 6px; }
.value p { color: var(--muted); margin: 0; font-size: 14px; }
@media (max-width: 980px) { .values { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .values { grid-template-columns: 1fr; } }

/* ---------- big feature band ---------- */
.band { position: relative; border-radius: 26px; overflow: hidden; min-height: 420px; display: flex; align-items: center; margin-top: 56px; }
.band img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 8, 13, .96) 0%, rgba(7, 8, 13, .75) 45%, rgba(7, 8, 13, .15) 100%); }
.band-body { position: relative; z-index: 1; padding: 48px; max-width: 620px; }
.band h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.05; margin-bottom: 14px; }
.band p { color: #c9cddb; font-size: 17px; margin: 0 0 24px; }
.devices { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }
.device { padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); font-weight: 600; font-size: 14px; }

/* ---------- pricing ---------- */
.page { padding-top: 110px; padding-bottom: 80px; }
.page-head { text-align: center; max-width: 760px; margin: 0 auto 36px; }
.page-head h1 { font-size: clamp(36px, 5vw, 60px); line-height: 1.02; margin-bottom: 14px; }
.page-head p { color: var(--muted); font-size: 18px; margin: 0; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 440px)); justify-content: center; gap: 18px; align-items: stretch; }
.plan { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 28px; display: flex; flex-direction: column; overflow: hidden; }
.plan.featured { border-color: transparent; background: linear-gradient(var(--panel), var(--panel)) padding-box, var(--grad) border-box; border: 1.5px solid transparent; box-shadow: 0 30px 80px rgba(110, 140, 255, .18); }
.plan .art { position: absolute; inset: 0 0 auto; height: 120px; opacity: .22; }
.plan .art img { width: 100%; height: 100%; object-fit: cover; mask-image: linear-gradient(180deg, #000, transparent); }
.plan > * { position: relative; }
.plan .ribbon { position: absolute; top: 18px; right: 18px; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--grad); color: #07080d; }
.plan h3 { font-size: 30px; margin-top: 30px; }
.plan .tag { color: var(--muted); margin: 4px 0 18px; min-height: 44px; }
.plan .price { font: 800 48px "Outfit", sans-serif; letter-spacing: -0.03em; }
.plan .price small { font-size: 16px; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.plan .billed { color: var(--dim); font-size: 13px; min-height: 20px; }
.plan ul { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; gap: 11px; flex: 1; }
.plan li { display: flex; gap: 10px; color: #d3d7e3; }
.plan li::before { content: "✓"; color: var(--accent-2); font-weight: 900; }
.plan li.x { color: var(--dim); }
.plan li.x::before { content: "–"; color: var(--dim); }
@media (max-width: 960px) { .plans { grid-template-columns: 1fr; } }
.compare { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.compare .value h3 { font-size: 30px; }
@media (max-width: 860px) { .compare { grid-template-columns: 1fr; } }

/* ---------- explore ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; align-items: center; }
.chip { padding: 8px 14px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); font-weight: 600; font-size: 14px; }
.chip:hover { color: var(--text); }
.chip.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.filters .search { margin-left: auto; display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; min-width: 260px; }
.filters .search input { background: none; border: 0; outline: 0; width: 100%; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; }
.empty { text-align: center; color: var(--muted); padding: 60px 0; }

/* ---------- game page ---------- */
.ghero { position: relative; height: min(78vh, 720px); min-height: 520px; overflow: hidden; }
.ghero img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* A game with no artwork (e.g. not on Steam, no self-hosted art yet): the brand gradient. The name is carried by the
   always-visible .meta title bar (same as every other tile), so the card's own inline name text is hidden (font-size:0)
   instead of being shown big-and-centered. */
.ghero .bg.no-art, .card .no-art { position: absolute; inset: 0; background:
  radial-gradient(60% 60% at 25% 30%, rgba(139, 123, 255, .45), transparent 70%),
  radial-gradient(50% 50% at 80% 70%, rgba(62, 230, 200, .3), transparent 70%), #07080d; }
.card .no-art { font-size: 0; }
.ghero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--bg) 2%, rgba(7, 8, 13, .3) 55%, rgba(7, 8, 13, .55) 100%), linear-gradient(90deg, rgba(7, 8, 13, .85), transparent 60%); }
.ghero .wrap { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 40px; }
.ghero .logo { max-width: min(460px, 80vw); max-height: 190px; object-fit: contain; object-position: left bottom; filter: drop-shadow(0 8px 30px rgba(0, 0, 0, .8)); margin-bottom: 22px; }
.ghero h1 { font-size: clamp(40px, 6vw, 76px); line-height: 1; margin-bottom: 20px; }
.ghero .row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.ghero .sub { color: #c9cddb; margin-top: 16px; }
.gbody { display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; margin-top: 10px; }
@media (max-width: 960px) { .gbody { grid-template-columns: 1fr; } }
.gbody .blurb { font-size: 18px; color: #d3d7e3; margin: 0 0 22px; }
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.shots img { border-radius: 12px; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.side { display: grid; gap: 14px; align-content: start; }
.box { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 22px; }
.box h3 { font-size: 18px; margin-bottom: 12px; }
.facts { display: grid; gap: 12px; }
.fact { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 14px; }
.fact b { color: var(--text); font-weight: 600; text-align: right; }
.yes { color: var(--accent-2) !important; }
.warn { color: var(--t-gold) !important; }
.no { color: var(--t-borked) !important; }
.compat-box { border-color: transparent; background: linear-gradient(var(--panel), var(--panel)) padding-box, var(--grad) border-box; border: 1.5px solid transparent; }
.compat-box p { color: var(--muted); font-size: 14px; margin: 10px 0 0; }

/* ---------- auth ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth-art { position: relative; overflow: hidden; }
.auth-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.auth-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 8, 13, .2), var(--bg)), linear-gradient(0deg, rgba(7, 8, 13, .8), transparent 50%); }
.auth-art .cap { position: absolute; z-index: 1; left: 40px; bottom: 40px; max-width: 420px; }
.auth-art .cap h2 { font-size: 36px; line-height: 1.05; }
.auth-art .cap p { color: #c9cddb; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 100px 28px 40px; }
.auth-card { width: 100%; max-width: 420px; }
.auth-card h1 { font-size: 36px; margin-bottom: 8px; }
.auth-card > p { color: var(--muted); margin: 0 0 28px; }
@media (max-width: 900px) { .auth { grid-template-columns: 1fr; } .auth-art { display: none; } }
.field { display: grid; gap: 7px; margin-bottom: 16px; }
.field label { font-size: 13px; font-weight: 600; color: var(--muted); }
.input { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; outline: 0; width: 100%; }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(139, 123, 255, .18); }
.fine { color: var(--dim); font-size: 13px; margin-top: 18px; text-align: center; }
.fine a { color: var(--muted); text-decoration: underline; }
.code { display: flex; gap: 10px; margin: 6px 0 22px; }
.code input { width: 100%; aspect-ratio: 1 / 1.15; text-align: center; font: 700 28px "Outfit", sans-serif; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; outline: 0; }
.code input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(139, 123, 255, .18); }

.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- faq / footer ---------- */
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.faq details { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; }
.faq summary { cursor: pointer; font-weight: 650; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.faq summary::after { content: "+"; color: var(--muted); font-size: 20px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq p { color: var(--muted); margin: 12px 0 0; }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; } }
footer { border-top: 1px solid var(--line); margin-top: 80px; padding: 34px 0 50px; color: var(--dim); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: center; }
footer a:hover { color: var(--text); }
.toast { position: fixed; z-index: 200; left: 50%; bottom: 26px; transform: translateX(-50%); background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 18px; box-shadow: var(--shadow); animation: up .25s ease; }
@keyframes up { from { opacity: 0; transform: translate(-50%, 10px); } }
.fade { animation: fade .35s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Nuage additions ---------- */
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 6px; }
.card:focus-visible { outline-offset: 2px; border-radius: var(--radius); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--panel-2); padding: 10px 14px; border-radius: 10px; }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#app:focus { outline: 0; }
.btn-sm { padding: 8px 16px; font-size: 14px; }
.btn-xs { padding: 6px 12px; font-size: 13px; gap: 6px; }
.steam-saved { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #4ade80; font-weight: 600; }
.steam-saved .btn-xs { color: var(--muted); font-weight: 500; }
.btn.danger:hover { background: rgba(255, 107, 107, .2); border-color: rgba(255, 107, 107, .5); }
.spinner { display: inline-block; vertical-align: middle; }
.btn-primary .spinner { border-color: rgba(6, 7, 12, .25); border-top-color: #06070c; }
.small { font-size: 12.5px !important; }
.hl { color: var(--text); }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 18px; }  /* wraps on phones: a non-wrapping row made every page wider than the screen */
@media (max-width: 640px) { .nav .wrap { gap: 12px; } .nav-right { gap: 8px; } .nav-right .btn-ghost { display: none; } .brand { font-size: 19px; } }

/* instant play */
.instant { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px 5px 9px; border-radius: 999px; background: var(--grad); color: #07080d; font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.instant-lg { font-size: 15px; padding: 8px 15px 8px 12px; }
.instant-row .section-head h2 { display: flex; align-items: center; gap: 8px; }
.instant-row .section-head h2 svg { width: 24px; height: 24px; color: var(--accent-2); }
.instant-row .row { padding-top: 10px; }
.chip-instant { display: inline-flex; align-items: center; gap: 4px; }
.chip-instant svg { color: var(--accent-2); }
.chip-instant.on svg { color: var(--bg); }
.ghero-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-weight: 700; color: #dfe4f2; }
.hero-fine { color: var(--muted); font-size: 14px; margin: 14px 0 0; }
.hero-pick { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.hero-pick[hidden] { display: none; }
.hero-pick .display { font-size: 30px; }
.hero-badges { display: flex; gap: 8px; }
.no-hits { padding: 16px; color: var(--muted); }
.page-head.left { text-align: left; margin: 0 0 26px; max-width: none; }

/* game page */
.ghero .how { color: #dfe4f2; max-width: 56ch; margin: 16px 0 0; font-size: 15px; }
.ghero .how.no { color: var(--t-borked); }
.ghero .how.caveat { color: var(--t-gold); }
.caveat-box { color: var(--t-gold); font-size: 14px; }
.ghero .how.no a { color: var(--text); text-decoration: underline; margin-left: 6px; }
.box-p { color: var(--muted); font-size: 14px; margin: 10px 0 0; }
.box-p b { color: var(--text); }
.box-p .instant { margin-right: 6px; }
.box a, .compat-box a { text-decoration: underline; }
.box a.btn { text-decoration: none; }
.how-steps { margin: 0; padding: 0 0 0 4px; list-style: none; counter-reset: s; display: grid; gap: 10px; }
.how-steps li { counter-increment: s; display: flex; gap: 10px; color: #d3d7e3; font-size: 14px; align-items: baseline; }
.how-steps li::before { content: counter(s); flex: none; width: 22px; height: 22px; border-radius: 50%; background: rgba(139, 123, 255, .18); color: var(--accent); display: grid; place-items: center; font-weight: 800; font-size: 12px; }
.nf { font-size: clamp(36px, 5vw, 56px); margin-bottom: 10px; color: var(--text); }

/* login */
.dev-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--accent-2); background: rgba(62, 230, 200, .08); border: 1px dashed rgba(62, 230, 200, .45); border-radius: 12px; padding: 10px 10px 10px 14px; margin-bottom: 18px; }
.dev-note b { font: 800 18px "Outfit", sans-serif; letter-spacing: .12em; color: var(--text); margin-left: 4px; }
.form-err { color: var(--t-borked); font-size: 14px; margin: -6px 0 14px; }
.field-warn { color: var(--t-gold); font-size: 12.5px; line-height: 1.4; margin: 2px 0 0; }
.field-warn[hidden] { display: none; }
.field-warn-email { font-size: 13.5px; padding: 8px 10px; border: 1px solid var(--t-gold); border-radius: 8px; margin-top: 6px; }
.field-warn-email a { color: inherit; text-decoration: underline; }
.code { border: 0; padding: 0; min-width: 0; }
.code input { min-width: 0; }
@media (max-width: 400px) { .code { gap: 6px; } .code input { font-size: 22px; } }

/* account */
.wrap.narrow { max-width: 980px; }
.acct-head { margin-bottom: 22px; }
.acct-head h1 { font-size: clamp(34px, 4.4vw, 48px); }
.acct-grid { display: grid; grid-template-columns: 1.2fr 1.2fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .acct-grid { grid-template-columns: 1fr; } }
.acct-grid .box > .btn { margin-top: 16px; }
.acct-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.plan-line { display: flex; align-items: center; gap: 10px; }
.plan-pill { font: 800 22px "Outfit", sans-serif; padding: 4px 14px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); }
.plan-pill.pro { background: var(--grad); color: #07080d; border-color: transparent; }
.status { font-size: 12.5px; font-weight: 700; text-transform: capitalize; color: var(--accent-2); }
.status.bad { color: var(--t-borked); }
.meter-big { color: var(--muted); margin-bottom: 10px; }
.meter-big b { font: 800 34px "Outfit", sans-serif; color: var(--text); margin-right: 4px; }
.bar { height: 8px; border-radius: 8px; background: var(--bg-2); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--grad); border-radius: 8px; }
.email { color: var(--text) !important; font-weight: 600; word-break: break-all; }
.live-box { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #3ee68a; box-shadow: 0 0 10px #3ee68a; margin-right: 10px; }
.celebrate { position: relative; overflow: hidden; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 24px; margin-bottom: 26px; border-radius: 20px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(139, 123, 255, .28), transparent 60%), radial-gradient(120% 140% at 100% 100%, rgba(62, 230, 200, .22), transparent 60%), var(--panel);
  border: 1.5px solid rgba(139, 123, 255, .45); animation: fade .5s ease; }
.celebrate > div:nth-child(2) { flex: 1; min-width: 220px; }
.celebrate h2 { font-size: 28px; }
.celebrate p { color: #c9cddb; margin: 4px 0 0; }
.burst { animation: pop 1.2s ease; }
@keyframes pop { 0% { transform: scale(.4) rotate(-20deg); opacity: 0; } 60% { transform: scale(1.15) rotate(6deg); opacity: 1; } 100% { transform: none; } }

/* play: launch */
body.bare .nav { display: none; }
.launch { position: fixed; inset: 0; z-index: 100; background: #000; display: grid; place-items: center; overflow-y: auto; padding: 80px 16px 40px; }
.launch .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(22px) brightness(.42); transform: scale(1.12); }
.launch .brand-art { filter: none; transform: none; background:
  radial-gradient(60% 60% at 25% 30%, rgba(139, 123, 255, .45), transparent 70%),
  radial-gradient(50% 50% at 80% 70%, rgba(62, 230, 200, .3), transparent 70%),
  radial-gradient(40% 40% at 60% 20%, rgba(90, 168, 255, .3), transparent 70%), #07080d; animation: drift 14s ease-in-out infinite alternate; }
@keyframes drift { to { background-position: 40px -30px, -50px 30px, 20px 20px, 0 0; } }
.launch .stage { position: relative; text-align: center; width: min(560px, 100%); }
.launch .logo { max-height: 160px; max-width: 100%; margin: 0 auto 30px; object-fit: contain; filter: drop-shadow(0 8px 30px rgba(0, 0, 0, .8)); }
.launch h1 { font-size: clamp(32px, 5vw, 44px); margin-bottom: 26px; }
.launch-mark { display: grid; place-items: center; margin-bottom: 22px; }
.launch-brand { position: absolute; top: 22px; left: 24px; z-index: 2; display: flex; align-items: center; gap: 10px; font: 800 20px "Outfit", sans-serif; }
.launch-cancel { margin-top: 18px; }
.steps { display: grid; gap: 12px; text-align: left; background: rgba(10, 12, 18, .7); border: 1px solid rgba(255, 255, 255, .08); border-radius: 18px; padding: 22px; backdrop-filter: blur(10px); }
.step { display: flex; align-items: center; gap: 12px; color: var(--dim); transition: color .3s; }
.step .dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font-size: 12px; flex: none; }
.step.active { color: var(--text); font-weight: 600; }
.step.active .dot { border-color: var(--accent); border-top-color: transparent; animation: spin .8s linear infinite; }
.step.done { color: var(--muted); }
.step { flex-wrap: wrap; }
.step-bar { flex: 1 0 100%; height: 4px; margin: 2px 0 0 34px; max-width: calc(100% - 34px); border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.step-bar b { display: block; height: 100%; background: var(--grad); border-radius: 4px; transition: width .6s ease; }
.step.done .dot { border-color: var(--accent-2); background: var(--accent-2); color: #07080d; font-weight: 900; }
.launch-tip { display: flex; gap: 12px; align-items: center; text-align: left; color: #c9cddb; font-size: 14px; margin: 16px 0 0; padding: 14px 16px; border-radius: 14px; background: rgba(10, 12, 18, .55); border: 1px solid rgba(255, 255, 255, .08); }
.launch-tip svg { flex: none; color: var(--accent-2); }
.launch-tip b { color: var(--text); }
.launch-msg { background: rgba(10, 12, 18, .78); border: 1px solid rgba(255, 255, 255, .1); border-radius: 20px; padding: 28px; backdrop-filter: blur(10px); }
.launch-msg h2 { font-size: 28px; margin-bottom: 8px; }
.launch-msg p { color: #c9cddb; margin: 0 0 20px; }
.launch-msg p b { color: var(--text); }
.launch-msg.limit { border-color: rgba(139, 123, 255, .5); box-shadow: 0 30px 80px rgba(110, 140, 255, .2); }
.launch-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.launch-actions:empty { display: none; }

/* play: stream */
/* The stream owns the whole viewport: no margins, no scrollbars, no letterboxing of our own. The bar floats on top. */
html:has(body.bare), body.bare { overflow: hidden; overscroll-behavior: none; }
body.bare { min-height: 0; height: 100vh; height: 100dvh; }
.stream { position: fixed; inset: 0; z-index: 100; background: #000; width: 100vw; height: 100vh; width: 100dvw; height: 100dvh; margin: 0; padding: 0; overflow: hidden; }
.stream iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; margin: 0; padding: 0; display: block; background: #000; }
.stream:fullscreen { width: 100vw; height: 100vh; }
.hud { position: absolute; z-index: 3; top: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; background: rgba(0, 0, 0, .7); border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; padding: 6px 6px 6px 14px; backdrop-filter: blur(8px); font-size: 13.5px; transition: opacity .3s; max-width: calc(100% - 24px); }
.hud.quiet { opacity: .5; }
.hud-zone { position: absolute; top: 0; left: 0; right: 0; height: 18px; z-index: 2; }
.hud.quiet:hover, .hud.quiet:focus-within { opacity: 1; }
.hud .live { width: 8px; height: 8px; border-radius: 50%; background: #3ee68a; box-shadow: 0 0 10px #3ee68a; flex: none; }
.hud-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.hud-min { color: var(--muted); white-space: nowrap; }
@media (max-width: 560px) { .hud #fsbtn span, .hud-min { display: none; } .hud-name { max-width: 110px; } }
.stream-tip { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; align-items: center; background: rgba(0, 0, 0, .78); border: 1px solid rgba(62, 230, 200, .4); border-radius: 14px; padding: 10px 10px 10px 14px; font-size: 14px; width: max-content; max-width: calc(100% - 32px); backdrop-filter: blur(8px); }
.stream-tip svg { flex: none; color: var(--accent-2); }
/* Time running out: under the bar, never covering the middle of the game; clicks pass through around it. */
.stream-warn { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; background: rgba(0, 0, 0, .82); border: 1px solid rgba(244, 194, 91, .55); border-radius: 14px; padding: 8px 8px 8px 14px; font-size: 14px; width: max-content; max-width: calc(100% - 32px); backdrop-filter: blur(8px); }
.stream-warn .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--t-gold); flex: none; }
.stream-warn.final { border-color: rgba(255, 107, 107, .7); box-shadow: 0 10px 40px rgba(255, 107, 107, .25); }
.stream-warn.final .dot { background: var(--t-borked); animation: warn-pulse 1s ease-in-out infinite; }
@keyframes warn-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .stream-warn.final .dot { animation: none; } }
.hud-min.low { color: var(--t-gold); }
/* "Which server am I on?" — a subtle corner label, only during an active stream. Dim by default, legible on hover. */
.server-badge { position: absolute; z-index: 3; left: 12px; bottom: 12px; display: flex; align-items: center; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; padding: 4px 10px; font-size: 12px; color: var(--muted); letter-spacing: .02em; backdrop-filter: blur(8px); opacity: .55; transition: opacity .3s; pointer-events: none; white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; }
.server-badge:hover { opacity: 1; }
@media (max-width: 560px) { .server-badge { font-size: 11px; padding: 3px 8px; } }
/* Bottom-left badge row: the server badge + the controls chip (controls.js), same quiet weight. Only the chip takes
   the pointer; the row itself lets clicks through to the stream. Above the touch pad layer (.tp, z 5) on phones. */
.hud-badges { position: absolute; z-index: 6; left: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px; pointer-events: none; max-width: calc(100% - 24px); }
.hud-badges .server-badge { position: static; max-width: none; flex: 0 1 auto; min-width: 0; }
.ctl-chip { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; flex: none; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; padding: 4px 10px; font-size: 12px; line-height: 1.3; font-family: inherit; color: var(--muted); letter-spacing: .02em; backdrop-filter: blur(8px); opacity: .55; transition: opacity .3s; cursor: pointer; white-space: nowrap; }
.ctl-chip:hover, .ctl-chip:focus-visible, .ctl-chip[aria-expanded="true"] { opacity: 1; color: #fff; }
.ctl-chip[hidden] { display: none; }
.ctl-chip svg { flex: none; }
.ctl-pop { position: absolute; z-index: 7; left: 12px; bottom: 46px; width: max-content; max-width: min(340px, calc(100% - 24px)); background: rgba(12, 14, 22, .92); border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; padding: 10px; backdrop-filter: blur(10px); font-size: 13px; color: #fff; box-shadow: 0 8px 28px rgba(0, 0, 0, .45); }
.ctl-pop[hidden] { display: none; }
.ctl-h { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 2px 2px 6px; }
.ctl-group { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ctl-opt { min-height: 34px; padding: 0 12px; border-radius: 9px; color: #fff; font-size: 13px; font-weight: 600; line-height: 1; font-family: inherit; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); cursor: pointer; }
.ctl-opt[aria-pressed="true"] { background: rgba(62, 230, 138, .18); border-color: rgba(62, 230, 138, .7); }
.ctl-note { margin: 0 2px; font-size: 12px; color: var(--muted); max-width: 270px; }
@media (max-width: 560px) { .ctl-chip { font-size: 11px; padding: 3px 8px; } .ctl-opt { min-height: 40px; } }
.limit-perks { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 6px; color: #c9cddb; }
.limit-perks li::before { content: "✓"; color: var(--accent-2); font-weight: 700; margin-right: 8px; }
.limit-perks b { color: var(--text); }

/* ---------- big wow: hero games ---------- */
.hero-big { height: clamp(600px, 90vh, 920px); min-height: 600px; }
.hero-big::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(7, 8, 13, .92) 0%, rgba(7, 8, 13, .55) 38%, rgba(7, 8, 13, 0) 70%),
    linear-gradient(0deg, var(--bg) 0%, rgba(7, 8, 13, 0) 40%);
}
.hero-big .hero-content { inset: auto 0 clamp(96px, 13vh, 168px); }
.hero-game { max-width: min(640px, 100%); display: flex; flex-direction: column; align-items: flex-start; gap: clamp(13px, 1.7vw, 20px); animation: rise .6s ease both; }
.hero-game > * { margin: 0; }
.hero-game[hidden] { display: none; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero-logo { max-width: min(520px, 90%); max-height: clamp(116px, 19vw, 200px); object-fit: contain; object-position: left bottom; filter: drop-shadow(0 8px 34px rgba(0, 0, 0, .75)); }
.hero-logo.as-text { display: block; font-size: clamp(32px, 8vw, 92px); line-height: .95; font-weight: 900; max-width: 13ch; text-shadow: 0 6px 40px rgba(0, 0, 0, .7); }
.hero-instant { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 11px; border-radius: 999px; background: var(--grad); color: #07080d; font-weight: 800; font-size: clamp(13px, 1.1vw, 14.5px); box-shadow: 0 8px 30px rgba(62, 230, 200, .25); }
.hero-big p.lede { margin: 0; max-width: 48ch; }
.hero-big .hero-fine { color: var(--muted); font-size: 14px; margin: clamp(14px, 2vw, 22px) 0 0; max-width: 58ch; }
.hero-thumbs { position: absolute; z-index: 2; right: 28px; bottom: 44px; display: flex; gap: 10px; }
.hero-thumb { position: relative; width: 150px; border-radius: 10px; overflow: hidden; opacity: .55; transition: opacity .2s, transform .2s; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); text-align: left; }
.hero-thumb img { width: 100%; aspect-ratio: 460 / 215; object-fit: cover; }
.hero-thumb span { position: absolute; inset: auto 0 0; padding: 20px 8px 6px; font-size: 11.5px; font-weight: 700; line-height: 1.2; background: linear-gradient(0deg, rgba(0, 0, 0, .92), transparent); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero-thumb i { position: absolute; inset: 0; border: 2px solid transparent; border-radius: 10px; }
.hero-thumb:hover { opacity: .9; }
.hero-thumb.on { opacity: 1; transform: translateY(-4px); }
.hero-thumb.on i { border-color: var(--accent-2); }
@media (max-width: 1200px) { .hero-thumb { width: 118px; } }
@media (max-width: 900px) {
  .hero-big { height: auto; min-height: 640px; }
  .hero-big .hero-content { position: absolute; inset: auto 0 110px; }
  .hero-thumbs { left: 16px; right: 16px; bottom: 20px; overflow-x: auto; }
  .hero-thumb { width: 104px; flex: none; }
}

/* ---------- instant-play library (home) ---------- */
.instant-lib .lib-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: clamp(24px, 3.2vw, 36px); line-height: 1.05; }
.lib-count { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px 4px 11px; border-radius: 999px; background: var(--grad);
  color: #06070c; font-weight: 900; font-family: "Outfit", sans-serif; letter-spacing: -0.01em; box-shadow: 0 8px 26px rgba(62, 230, 200, .3); }
.lib-count svg { width: 20px; height: 20px; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(220px, 26vw, 280px), 1fr)); gap: clamp(12px, 1.4vw, 18px); margin-top: clamp(16px, 2vw, 24px); }
.lib-tile { position: relative; border-radius: 16px; overflow: hidden; background: var(--panel); border: 1px solid var(--line);
  display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.lib-tile:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(0, 0, 0, .55), 0 0 0 2px rgba(139, 123, 255, .5); }
.lib-art { position: relative; display: grid; place-items: center; aspect-ratio: 460 / 215; overflow: hidden; }
.lib-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.lib-tile:hover .lib-art img { transform: scale(1.04); }
.lib-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7, 8, 13, .72), rgba(7, 8, 13, 0) 60%); }
.lib-logo { position: relative; z-index: 1; max-width: 66%; max-height: 54%; object-fit: contain; filter: drop-shadow(0 6px 22px rgba(0, 0, 0, .8)); }
.lib-logo.as-text { font-size: clamp(20px, 2.2vw, 30px); font-weight: 900; text-align: center; padding: 0 14px; text-shadow: 0 4px 26px rgba(0, 0, 0, .85); max-width: none; }
.lib-badge { position: absolute; z-index: 2; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px 4px 8px;
  border-radius: 999px; background: var(--grad); color: #07080d; font-size: 12px; font-weight: 800; box-shadow: 0 4px 16px rgba(0, 0, 0, .5); }
.lib-new { position: absolute; z-index: 2; top: 10px; right: 10px; display: inline-flex; align-items: center; padding: 4px 10px;
  border-radius: 999px; background: #07080d; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .5), inset 0 0 0 1.5px rgba(139, 123, 255, .9); }
.lib-body { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; }
.lib-body b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; font-weight: 700; line-height: 1.25; }
.lib-body .btn { flex: none; }
@media (max-width: 640px) { .lib-grid { grid-template-columns: 1fr; } }

/* ---------- download (not on instant play: Steam downloads it on the box) ---------- */
.dl { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px 5px 9px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); color: #d3d7e3; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.box-p .dl { margin-right: 6px; }
.card-dl { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px 4px 7px; border-radius: 999px; background: rgba(7, 8, 13, .82); border: 1px solid rgba(255, 255, 255, .16); color: #d3d7e3; font-size: 12px; font-weight: 750; backdrop-filter: blur(6px); }
.ghero .how a { color: var(--text); text-decoration: underline; }
.dl-row .section-head h2 { display: flex; align-items: center; gap: 8px; color: #c9cddb; }
.dl-row .section-head h2 svg { width: 22px; height: 22px; }
.stream-install { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; background: rgba(0, 0, 0, .82); border: 1px solid rgba(62, 230, 200, .4); border-radius: 14px; padding: 8px 8px 8px 14px; font-size: 14px; width: max-content; max-width: calc(100% - 32px); backdrop-filter: blur(8px); }
.stream-install svg { flex: none; color: var(--accent-2); }
.stream:has(.stream-install) .stream-warn { top: 116px; }
.checker-mid { margin-top: 56px; }
.nav-resume { display: inline-flex; align-items: center; padding: 7px 14px 7px 12px; border-radius: 999px; background: rgba(62, 230, 138, .12); border: 1px solid rgba(62, 230, 138, .45); color: var(--text); font-weight: 650; font-size: 14px; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.nav-resume:hover { background: rgba(62, 230, 138, .2); }
.nav-resume .live-dot { width: 8px; height: 8px; margin-right: 8px; flex: none; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
@media (max-width: 640px) { .nav-resume { max-width: 150px; font-size: 13px; } }

/* account pages: tabs, playtime, membership, billing history, support */
.acct-tabs { display: flex; gap: 6px; margin: -6px 0 22px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.acct-tabs::-webkit-scrollbar { display: none; }
.acct-tabs a { flex: none; padding: 10px 14px; color: var(--muted); font-weight: 600; font-size: 14.5px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.acct-tabs a:hover { color: var(--text); }
.acct-tabs a.on { color: var(--text); border-bottom-color: var(--accent); }
.acct-grid.stats-3 { grid-template-columns: repeat(3, 1fr); }
.acct-grid.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .acct-grid.stats-3, .acct-grid.two { grid-template-columns: 1fr; } }
.acct-grid .box > .btn-sm { margin-top: 14px; }
.acct-section { margin: 16px 0; }
.acct-grid + .acct-grid { margin-top: 16px; }
.box h3 .sub { font: 500 13px "Inter", sans-serif; color: var(--dim); margin-left: 6px; letter-spacing: 0; }
.acct-empty { text-align: left; }
.acct-foot { margin-top: 18px; }
.acct-foot a { text-decoration: underline; }
.notice { margin-bottom: 16px; color: #d3d7e3; font-size: 14.5px; border-color: rgba(139, 123, 255, .45); }
.notice.bad { border-color: rgba(255, 107, 107, .5); }

.chart { position: relative; }
.chart-plot { position: relative; height: 150px; margin: 18px 0 0 0; padding-left: 0; }
.grid-line { position: absolute; left: 0; right: 66px; border-top: 1px dashed var(--line); pointer-events: none; }
.grid-line b { position: absolute; right: -66px; top: -8px; width: 58px; text-align: right; font-size: 11.5px; font-weight: 500; color: var(--dim); line-height: 1; }
.cols { position: absolute; inset: 0 66px 0 0; display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--line); }
.col { flex: 1; height: 100%; display: flex; align-items: flex-end; cursor: default; min-width: 0; }
.col i { display: block; width: 100%; min-height: 2px; background: var(--accent); border-radius: 4px 4px 0 0; opacity: .85; }
.col.on i { opacity: 1; background: #a89cff; }
.col.on { background: rgba(255, 255, 255, .04); }
.chart-tip { position: absolute; top: -8px; transform: translate(-50%, -100%); background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; color: var(--muted); white-space: nowrap; pointer-events: none; box-shadow: var(--shadow); z-index: 2; }
.chart-tip b { display: block; color: var(--text); font-size: 14px; }
.chart-x { display: flex; justify-content: space-between; font-size: 12px; color: var(--dim); margin: 6px 66px 0 0; }

.game-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.game-list li { display: flex; align-items: center; gap: 12px; min-width: 0; }
.thumb { flex: none; width: 92px; aspect-ratio: 460 / 215; border-radius: 8px; overflow: hidden; background: var(--panel-2); display: grid; place-items: center; color: var(--dim); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.gl-main { flex: 1; min-width: 0; }
.gl-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.box .gl-name a { text-decoration: none; }
.box .gl-name a:hover { text-decoration: underline; }
.gl-sub { display: flex; align-items: center; font-size: 12.5px; color: var(--dim); }
.gl-sub .live-dot { width: 7px; height: 7px; margin-right: 6px; }
.gl-bar { height: 4px; border-radius: 4px; background: var(--bg-2); margin: 6px 0 4px; overflow: hidden; }
.gl-bar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.gl-val { flex: none; font-size: 14px; font-variant-numeric: tabular-nums; }
@media (max-width: 400px) { .thumb { width: 64px; } }

.price-line { font: 800 32px "Outfit", sans-serif; margin: 14px 0 12px; }
.price-line small { font-size: 15px; color: var(--muted); font-weight: 500; }
.perks { margin: 0; padding: 0 0 0 18px; color: #d3d7e3; font-size: 14px; display: grid; gap: 6px; }

.inv-box { padding: 8px 22px; }
.inv { display: grid; grid-template-columns: 1.3fr 1.3fr .8fr .8fr 96px; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.inv:last-child { border-bottom: 0; }
.inv-head { color: var(--dim); font-size: 12.5px; font-weight: 600; padding: 10px 0; }
.inv-date small { display: block; color: var(--dim); font-size: 12px; }
.inv-period { color: var(--muted); }
.inv-amt { font-weight: 600; font-variant-numeric: tabular-nums; }
.inv-links { display: flex; gap: 12px; justify-content: flex-end; }
@media (max-width: 640px) {
  .inv { grid-template-columns: 1fr auto; row-gap: 4px; }
  .inv-head { display: none; }
  .inv-period { grid-column: 1; grid-row: 2; font-size: 13px; }
  .inv-amt { grid-column: 2; grid-row: 1; text-align: right; }
  .inv > :nth-child(4) { grid-column: 2; grid-row: 2; text-align: right; }
  .inv-links { grid-column: 1 / -1; justify-content: flex-start; }
}
.pill { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; text-transform: capitalize; border: 1px solid var(--line); color: var(--muted); }
.pill-paid { color: #3ee68a; border-color: rgba(62, 230, 138, .4); }
.pill-open { color: var(--t-gold); border-color: rgba(244, 194, 91, .45); }
.pill-uncollectible { color: var(--t-borked); border-color: rgba(255, 107, 107, .45); }

select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
textarea.input { resize: vertical; min-height: 120px; font: inherit; color: inherit; }
select.input { color: inherit; font: inherit; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; margin: 0 0 18px; cursor: pointer; }
.check input { margin-top: 3px; accent-color: var(--accent); width: 16px; height: 16px; flex: none; }
.check small { display: block; color: var(--dim); font-size: 12.5px; }
.check small.inline { display: inline; }
.tickets { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tickets li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.tickets li:last-child { border-bottom: 0; padding-bottom: 0; }
.tk-main { min-width: 0; }
.tk-main b { display: block; overflow-wrap: anywhere; }

/* Terms / Privacy */
.legal { max-width: 760px; line-height: 1.65; }
.legal h2 { font-size: 1.15rem; margin: 2rem 0 .6rem; }
.legal p, .legal li { color: var(--text); }
.legal ul { padding-left: 1.2rem; margin: .4rem 0 1rem; }
.legal li { margin: .35rem 0; }
.legal a { text-decoration: underline; }

/* Under Upgrade buttons: cancel anytime, how to pay. */
.pay-note { margin: 8px 0 0; font-size: 12.5px; color: var(--muted, #8a93a6); text-align: center; }

/* Steam sign-in card (stream page): small, top-right, Steam's own sign-in screen stays visible. */
.signin-card { position: absolute; top: 64px; right: 16px; width: min(340px, calc(100% - 32px)); background: rgba(10, 12, 18, .92); border: 1px solid rgba(62, 230, 200, .45); border-radius: 14px; padding: 12px 14px; font-size: 14px; line-height: 1.4; backdrop-filter: blur(8px); box-shadow: 0 10px 30px rgba(0, 0, 0, .4); z-index: 5; }
.signin-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.signin-head b { font-size: 15px; }
.signin-head span { color: var(--muted); font-size: 12px; }
.signin-head button { margin-left: auto; }
.signin-card ol { margin: 6px 0 8px; padding-left: 20px; }
.signin-card li { margin: 4px 0; }
/* Type into game + Roblox guided sign-in: same card as Steam's sign-in help. The guide sits left, the type panel right. */
.rbx-guide { right: auto; left: 16px; }
.type-panel .type-row { display: flex; gap: 8px; align-items: center; }
.type-panel input[type="password"], .type-panel input[type="text"] { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .2); background: rgba(0, 0, 0, .35); color: inherit; font: inherit; }
.type-panel .type-enter { display: flex; gap: 6px; align-items: center; margin-top: 8px; font-size: 13px; }
.signin-actions { display: flex; gap: 8px; margin: 8px 0 4px; }
.signin-actions .btn { width: 100%; justify-content: center; }
/* The phone's single lead action: full-width primary CTA at the top of the card, visually ahead of the steps. */
.signin-actions-primary { margin: 2px 0 10px; }
.signin-actions-primary .btn { width: 100%; justify-content: center; }
.signin-safe { margin: 6px 0; font-size: 12.5px; color: var(--muted); }
.signin-help summary { cursor: pointer; color: var(--accent-2); font-size: 13px; margin-top: 4px; }
.signin-help p { margin: 6px 0; font-size: 13px; }
.stream:has(.signin-card) .stream-tip { display: none; }
.signin-why { margin: 2px 0 4px; font-size: 13px; color: var(--muted); }
/* Steam Guard live countdown + "request more time": the player always sees how long they have and can extend. */
.signin-timer { margin: 4px 0 8px; font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.signin-timer #guardtimer { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent-2); }
.signin-timer #guardcap { margin: 0; }

/* ---------- Steam Guard sign-in card (in-stream): UNMISTAKABLE, centered, Steam-native. ----------
   Guard timeouts were NEVER-ACTED walk-aways — players never noticed the prompt mid-game-load (presence/attention is
   the constraint, not time). So this card is centered, high-contrast, Steam-styled (dark-blue/steel + shield motif),
   with a single obvious action and a subtle attention pulse. The countdown is deliberately de-emphasized (time isn't
   the lever). .guard-card overrides the small top-right .signin-card; the QR / save-login / Roblox cards keep that. */
.guard-card { position: absolute; top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%);
  width: min(380px, calc(100% - 32px)); box-sizing: border-box; text-align: center;
  background: linear-gradient(160deg, #1b2838 0%, #12161d 100%); border: 1px solid #3d4b5c; border-radius: 16px;
  padding: 28px 26px 22px; backdrop-filter: blur(10px); z-index: 60;
  box-shadow: 0 0 0 1px rgba(102, 192, 244, .14), 0 24px 70px rgba(0, 0, 0, .66), 0 0 64px rgba(102, 192, 244, .18);
  animation: guardpop .28s cubic-bezier(.2, .8, .3, 1.2); }
@keyframes guardpop { from { opacity: 0; transform: translate(-50%, calc(-50% + 14px)) scale(.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
/* Shield motif = focal point, with a gentle attention pulse (not gratuitous) so a distracted player notices NOW. */
.guard-shield { width: 66px; height: 66px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, rgba(102, 192, 244, .3), rgba(102, 192, 244, .04) 72%);
  animation: guardpulse 2.1s ease-in-out infinite; }
.guard-shield svg { width: 40px; height: 40px; color: #66c0f4; filter: drop-shadow(0 0 7px rgba(102, 192, 244, .55)); }
.guard-shield-phone svg { width: 36px; height: 36px; }
@keyframes guardpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(102, 192, 244, .4); } 50% { box-shadow: 0 0 0 13px rgba(102, 192, 244, 0); } }
.guard-head { margin: 0 0 5px; font-size: 20px; font-weight: 800; color: #fff; letter-spacing: .01em; }
.guard-sub { margin: 0 0 18px; font-size: 14px; color: #c6d4df; line-height: 1.45; }
.guard-sub b { color: #fff; }
/* The OTP field is the HERO: big, centered, monospace, generous tap target, impossible to miss. */
.guard-form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.guard-otp { width: 100%; box-sizing: border-box; padding: 16px 12px; text-align: center;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 30px; font-weight: 700;
  letter-spacing: .32em; text-indent: .32em; text-transform: uppercase; color: #fff; caret-color: #66c0f4;
  background: #0d1217; border: 2px solid #3d4b5c; border-radius: 10px; outline: none;
  transition: border-color .15s, box-shadow .15s; }
.guard-otp::placeholder { color: #45586a; letter-spacing: .3em; font-weight: 600; }
.guard-otp:focus { border-color: #66c0f4; box-shadow: 0 0 0 4px rgba(102, 192, 244, .22); }
/* Steam-style sign-in button (Steam's cyan->blue gradient). */
.btn-steam { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 13px 16px; border: 0; border-radius: 10px; font-size: 15px; font-weight: 700; color: #fff; cursor: pointer;
  background: linear-gradient(90deg, #47bfff 0%, #1a9fff 42%, #1a44c2 100%); box-shadow: 0 6px 18px rgba(26, 68, 194, .4);
  transition: filter .15s, transform .05s; }
.btn-steam:hover { filter: brightness(1.1); }
.btn-steam:active { transform: translateY(1px); }
.btn-steam:disabled { filter: grayscale(.45) brightness(.8); cursor: default; }
.btn-steam svg { width: 18px; height: 18px; }
.guard-card .form-err { margin: 0; text-align: center; }
/* Countdown: small, secondary, centered under the action — present but NOT the focus. */
.guard-timer { margin: 16px 0 0; font-size: 12px; color: #7a8a99; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.guard-timer #guardtimer { font-variant-numeric: tabular-nums; font-weight: 600; color: #9aa9b5; }
.guard-more { background: none; border: 0; padding: 0; color: #66c0f4; font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; }
.guard-more:hover { color: #8fd2ff; }
.guard-more:disabled { color: #566573; cursor: default; text-decoration: none; }
.guard-cap { color: #7a8a99; }
.guard-tip { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .07); font-size: 12px; color: #8a97a4; line-height: 1.45; text-align: center; }
.guard-tip b { color: #c6d4df; }
/* Managed-launch lock: covers the whole stream and EATS pointer/touch input so a click can't reach Steam Big Picture's
   Play (which would crash a proton_direct game). Only during the launch window; clears when the game is running. */
.stream-lock { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  background: rgba(6, 8, 12, .86); backdrop-filter: blur(6px); pointer-events: auto; touch-action: none; cursor: progress; }
.stream-lock-card { max-width: min(420px, calc(100% - 48px)); text-align: center; padding: 24px 28px;
  background: rgba(12, 14, 20, .9); border: 1px solid rgba(62, 230, 200, .4); border-radius: 18px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .5); }
.stream-lock-card svg { color: var(--accent-2); width: 28px; height: 28px; }
.stream-lock-card b { display: block; font-size: 18px; margin: 8px 0 4px; }
.stream-lock-card p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.45; }
.stream-lock-spin { width: 26px; height: 26px; margin: 16px auto 0; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .15); border-top-color: var(--accent-2); animation: streamlockspin 1s linear infinite; }
@keyframes streamlockspin { to { transform: rotate(360deg); } }
/* On-box QR sign-in card: the box-minted QR for the player to scan with their Steam app. */
.stream-qr-box { background: #fff; border-radius: 12px; padding: 10px; margin: 10px 0 2px; display: flex; justify-content: center; }
.stream-qr-box svg { display: block; width: 200px; height: 200px; }
.verify-qr .stream-qr-box { width: fit-content; margin: 12px auto 4px; min-width: 200px; min-height: 200px; align-items: center; }
.verify-qr-status { font-size: 14px; opacity: .85; }
.verify-options { flex-wrap: wrap; justify-content: center; }
.steam-qr-alt { width: 100%; margin-top: 10px; }
.steam-alt { margin: 10px 0 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.signin-risk { margin: 6px 0 2px; font-size: 12.5px; color: #f0c060; }
/* Phone in-stream: make it obvious the QR is NOT the phone path. */
.signin-note { margin: 6px 0; font-size: 12.5px; color: #f0c060; }
.signin-tip { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.connect-gold { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 20px; margin: 18px 0 10px; }
.connect-gold-badge { display: inline-block; font-size: 12px; font-weight: 700; color: #7fe0a0; letter-spacing: .02em; margin-bottom: 6px; }
.connect-gold h2 { margin: 2px 0 8px; }
.connect-gold-stat { margin: 0 0 10px; }
.connect-others-h { margin-top: 28px; }
.connect-others-note { color: var(--muted); margin: 4px 0 10px; font-size: 14px; }
.connect-others { color: var(--muted); font-size: 14px; padding-left: 18px; }
.connect-others li { margin: 8px 0; }
.signin-tip b { color: var(--muted); font-weight: 700; }
.steam-refusal-gold { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.steam-refusal-gold b { color: var(--muted); font-weight: 700; }
.signin-kb svg { vertical-align: -3px; margin-right: 2px; }
/* ---------- Queue / waiting-for-a-machine card: TRANSPARENT + ACTIONABLE. ----------
   Same Steam-like language as the Guard card (steel/blue, centered, clean). Shows live position + elapsed wait, an
   honest plain-words reason for the ordering, and — for a not-yet-signed-in waiter — one obvious tap to move up by
   signing in to Steam (opens the same save-login modal; they keep their place). A signed-in waiter sees the
   priority-line reassurance instead. Nothing hidden, nothing stuck. */
.queue-card { width: min(440px, calc(100% - 32px)); margin: 0 auto; box-sizing: border-box; text-align: center;
  background: linear-gradient(160deg, #1b2838 0%, #12161d 100%); border: 1px solid #3d4b5c; border-radius: 18px;
  padding: 26px 26px 20px; backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(102, 192, 244, .12), 0 24px 70px rgba(0, 0, 0, .6); }
.queue-motif { display: flex; align-items: flex-end; justify-content: center; gap: 7px; height: 30px; margin-bottom: 14px; }
.queue-motif span { width: 11px; height: 11px; border-radius: 50%; background: #45586a; }
.queue-motif span.you { width: 13px; height: 13px; background: #66c0f4; box-shadow: 0 0 10px rgba(102, 192, 244, .6);
  animation: queuepulse 2.1s ease-in-out infinite; }
@keyframes queuepulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(102, 192, 244, .45); } 50% { box-shadow: 0 0 0 9px rgba(102, 192, 244, 0); } }
.queue-head { margin: 0 0 10px; font-size: 20px; font-weight: 800; color: #fff; letter-spacing: .01em; }
.queue-num { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 0 0 4px; }
.queue-num b { font-size: 46px; font-weight: 800; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.queue-num span { font-size: 15px; color: #c6d4df; font-weight: 600; }
.queue-wait { margin: 0 0 16px; font-size: 13px; color: #8a97a4; font-variant-numeric: tabular-nums; }
.queue-why { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: #c6d4df; }
.queue-why b { color: #fff; }
.queue-ready { display: flex; align-items: center; gap: 10px; text-align: left; margin: 0 0 18px; padding: 12px 14px;
  border-radius: 12px; background: rgba(102, 192, 244, .1); border: 1px solid rgba(102, 192, 244, .28); font-size: 13.5px;
  line-height: 1.45; color: #d6e6f2; }
.queue-ready svg { flex: none; width: 22px; height: 22px; color: #66c0f4; }
.queue-ready b { color: #fff; }
.queue-actions { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; }
.queue-actions .btn { white-space: normal; max-width: 100%; line-height: 1.3; }  /* long CTAs (Go Pro) wrap on phones instead of widening the card */
.queue-pro { border-color: rgba(255, 196, 0, .35); }
.queue-actions:empty { display: none; margin: 0; }
.queue-cta-note { margin: 2px 0 0; font-size: 12px; color: #8a97a4; }
.queue-foot { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0; padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .07); font-size: 12.5px; color: #8a97a4; line-height: 1.4; }
.queue-foot .spinner { flex: none; width: 15px; height: 15px; border-width: 2px; }

/* ---------- Connect Steam ---------- */
.steam-overlay { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 20px;
  background: rgba(6, 8, 12, .72); backdrop-filter: blur(6px); animation: steamfade .15s ease; }
@keyframes steamfade { from { opacity: 0 } to { opacity: 1 } }
/* Connect Steam modal. The QR column copies Steam's own sign-in (store.steampowered.com/login, computed + source CSS,
   2026-10-17): panel #181a21 / 4px, title #fff 22px 700, subtitle #fff 16px, label #1999ff 12px 500 uppercase .02em,
   code 170px in a 15px (1.25em) white frame with .625em radius, caption/link #afafaf 12px, loading = blurred code under
   an rgba(0,0,0,.75) card with Steam's 1.1s throbber. No fades: Steam swaps the code instantly. */
.steam-modal { position: relative; width: min(420px, 100%); background: #181a21; border-radius: 4px; padding: 24px 32px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5); text-align: center; }
/* Desktop: Steam's login page layout, account name + password on the left, QR on the right */
.steam-modal.wide { width: min(780px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; }
.steam-cols { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 48px; align-items: start; margin-top: 4px; text-align: left; }
.steam-colform .steam-cred { margin-bottom: 0; }
.steam-colform .steam-guard { text-align: center; }
.steam-colqr .steam-qrcol { margin: 0; }
@media (max-width: 720px) { .steam-cols { grid-template-columns: 1fr; gap: 24px; } .steam-colqr .steam-qrcol { margin: 0 auto; } }
.steam-x { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 4px; border: 0;
  background: transparent; color: #afafaf; font-size: 15px; cursor: pointer; }
.steam-x:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.steam-head { display: flex; align-items: center; justify-content: center; gap: 9px; color: #fff; font-size: 22px; font-weight: 700; }
.steam-head svg { color: #fff; }
.steam-why { margin: 12px auto 0; max-width: 360px; color: #dcdedf; font-size: 15px; line-height: 1.45; text-align: center; }
.steam-why b { color: #fff; }
.steam-sub { margin: 8px 0 24px; color: #afafaf; font-size: 13px; text-align: center; }
.steam-qrcol { width: 200px; margin: 0 auto; text-align: left; }
.steam-qrlabel { display: block; font-size: 12px; color: #1999ff; font-weight: 500; text-transform: uppercase;
  letter-spacing: .02em; user-select: none; }
.steam-qrframe { position: relative; aspect-ratio: 1; border-radius: 2px; margin-top: 2px; margin-bottom: 8px; }
.steam-qr { box-sizing: content-box; position: relative; font-size: 12px; width: calc(200px - 2.5em); height: calc(200px - 2.5em);
  border: 1.25em solid #fff; border-radius: .625em; background: #fff; display: grid; }
.steam-qr > img, .steam-qr > svg { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.steam-qr.is-busy { filter: blur(5px); }
.steam-qr-busy { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; text-align: center; }
.steam-qr-busy[hidden] { display: none; }
.steam-qr-card { display: flex; border-radius: 3px; padding: 12px; background-color: rgba(0, 0, 0, .75); color: #fff; font-size: 16px; }
.steam-throbber { font-size: 10px; width: 3em; height: 3em; min-width: 3em; min-height: 3em; border-radius: 50%; margin: auto;
  position: relative; text-indent: -9999em; overflow: hidden; border: .3em solid hsla(0, 0%, 100%, .2); border-left-color: #fff;
  transform: translateZ(0); animation: steam-throbber 1.1s infinite linear; }
@keyframes steam-throbber { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.steam-qr-btn { background: none; border: 0; padding: 0; color: #fff; font: inherit; font-size: 16px; cursor: pointer; text-decoration: underline; }
.steam-qrcap { text-align: center; font-size: 12px; color: #afafaf; }
.steam-qrcap a { color: #afafaf; font-size: 12px; text-decoration: underline; cursor: pointer; }
.steam-qrcap a:hover { color: rgb(200.5, 200.5, 200.5); }
.steam-safe { margin: 20px 0 0; font-size: 12px; color: #afafaf; text-align: center; }
.steam-trailer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .4; z-index: 0; pointer-events: none; }
.steam-overlay > .steam-modal { z-index: 1; }
.steam-ctx { margin: 10px 0 0; color: #5fd38d; font-size: 14px; text-align: center; }
.steam-ctx b { color: #fff; }
.steam-steps { margin: 6px 0 12px; padding-left: 22px; text-align: left; font-size: 14px; color: #afafaf; line-height: 1.5; }
.steam-steps b { color: #fff; }
.steam-steps li { margin: 4px 0; }
.steam-phone-actions { display: flex; justify-content: center; margin: 16px 0 4px; }
.steam-phone-actions .btn { min-width: 160px; justify-content: center; }
.steam-sendlink { margin: 14px 0 0; text-align: left; }
/* Opt-in "Save my Steam login" form (docs/insights/stored-steam-login-design.md). 16px inputs so iOS doesn't zoom. */
.steam-saveform { text-align: left; margin: 14px 0 0; }
.steam-saveform .field { margin-bottom: 12px; }
.steam-saveform .field label { color: #c6d4df; }
.steam-saveform .input { background: #32353c; border: 1px solid #000; color: #fff; font-size: 16px; border-radius: 4px; }
.steam-saveform .btn-primary { width: 100%; justify-content: center; margin-top: 4px; }
/* Password field with a Show/Hide toggle so players can verify a pasted password (a mangled paste is a top bad_password cause). */
.pw-wrap { position: relative; display: flex; align-items: stretch; }
.pw-wrap .input { flex: 1; padding-right: 64px; width: 100%; }
.pw-reveal { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); background: transparent; border: 0; color: #9fd0ff; font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 8px; min-width: 44px; min-height: 44px; }
.pw-reveal:hover { color: #fff; text-decoration: underline; }
.steam-consent { display: flex; gap: 9px; align-items: flex-start; margin: 2px 0 14px; font-size: 12px; color: #afafaf; line-height: 1.45; cursor: pointer; }
.steam-consent input { margin-top: 2px; flex: 0 0 auto; }
.steam-savelink { margin: 14px 0 0; text-align: left; }
.steam-noapp { margin: 14px 0 0; font-size: 12px; color: #afafaf; text-align: center; }
.steam-noapp a { color: #afafaf; text-decoration: underline; }
.launch-steam { margin-top: 18px; }
.btn-steamapp { display: flex; width: 100%; justify-content: center; gap: 10px; margin: 4px 0 6px; padding: 14px 18px;
  background: linear-gradient(90deg, #06bfff, #2d73ff); color: #fff; border-radius: 4px; font-weight: 600; font-size: 16px; }
.steam-or { margin: 4px 0 14px; font-size: 12px; color: #afafaf; text-align: center; }
/* Phone sign-in: Steam's own mobile-web login form (inputs #32353c, blue first label, grey second). 16px inputs so iOS
   doesn't zoom. */
.steam-cred { display: flex; flex-direction: column; text-align: left; margin-bottom: 6px; }
.steam-cred[hidden], .steam-guard[hidden] { display: none; }
.steam-credlabel { display: block; margin-top: 12px; font-size: 12px; color: #afafaf; font-weight: 500; text-transform: uppercase;
  letter-spacing: .02em; }
.steam-in { width: 100%; margin-top: 4px; padding: 10px; background: #32353c; border: 1px solid transparent; border-radius: 2px;
  color: #fff; font: inherit; font-size: 16px; outline: none; }
.steam-in:focus { border-color: #1999ff; }
.steam-cred .btn-steamapp { margin-top: 18px; border: 0; cursor: pointer; }
.steam-cred .btn-steamapp:disabled { opacity: .6; cursor: default; }
.steam-opt { text-transform: none; letter-spacing: 0; color: #8b8e93; font-weight: 400; }
.steam-rec { margin-left: 6px; padding: 1px 6px; border-radius: 2px; background: #1999ff; color: #fff; font-size: 10px;
  letter-spacing: .04em; vertical-align: 1px; }
.steam-hint { margin: 6px 0 0; font-size: 12px; color: #8b8e93; line-height: 1.45; }
.steam-hint b { color: #afafaf; }
.steam-code.is-needed { border-color: #1999ff; }
.steam-credmsg { margin: 8px 0 0; font-size: 13px; color: #c15755; text-align: center; line-height: 1.4; }
.steam-credmsg[hidden] { display: none; }
.steam-guard { text-align: center; padding: 4px 0 8px; }
.steam-guard-ic { width: 48px; height: 48px; margin: 0 auto 8px; border-radius: 50%; background: rgba(25, 153, 255, .15);
  color: #1999ff; font-size: 22px; display: grid; place-items: center; }
.steam-guard-ic svg { width: 26px; height: 26px; }
.steam-guard h3 { margin: 0 0 6px; font-size: 18px; color: #fff; }
.steam-guard p { margin: 0 0 10px; font-size: 14px; color: #afafaf; line-height: 1.45; }
.steam-guard p b { color: #fff; }
.steam-codeform { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; }
.steam-codeform .btn-steamapp { border: 0; cursor: pointer; margin: 0; }
.steam-code { text-align: center; letter-spacing: .3em; text-transform: uppercase; font-size: 20px; }
.steam-wait { margin: 14px auto 6px; }
.steam-link { background: none; border: 0; color: #afafaf; font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; margin-top: 6px; }
.steam-done { padding: 18px 6px 6px; }
.steam-check { width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 50%; background: rgba(95, 211, 141, .15);
  color: #5fd38d; font-size: 30px; display: grid; place-items: center; }
.steam-done h3 { margin: 4px 0 6px; font-size: 20px; }
.steam-done p { color: var(--muted); font-size: 14px; line-height: 1.5; margin-bottom: 16px; }

.steam-banner { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; padding: 12px 14px;
  background: linear-gradient(90deg, rgba(102, 192, 244, .12), rgba(102, 192, 244, .04)); border: 1px solid #27455c;
  border-radius: 14px; }
.steam-banner-ic { flex: none; color: #66c0f4; display: inline-flex; }
.steam-banner-txt { flex: 1; font-size: 13.5px; line-height: 1.4; }
.steam-banner-x { flex: none; width: 28px; height: 28px; border: 0; background: transparent; color: var(--muted);
  cursor: pointer; border-radius: 7px; font-size: 13px; }
.steam-banner-x:hover { background: rgba(255, 255, 255, .06); color: #e6e8ee; }
@media (max-width: 560px) { .steam-banner { flex-wrap: wrap; } .steam-banner-txt { flex-basis: 100%; order: 2; } }

/* ---------- about page ---------- */
.about-page h2 { margin-top: 40px; }
.founder-section { display: flex; gap: 32px; align-items: flex-start; margin: 8px 0 32px; }
.founder-photo { flex: none; }
.founder-photo img { width: 180px; height: 180px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--border); }
.founder-bio { flex: 1; }
.founder-bio h2 { margin-top: 0; margin-bottom: 4px; font-size: 24px; }
.founder-role { color: var(--accent); font-weight: 600; margin-bottom: 12px; font-size: 15px; }
.founder-bio p { margin-bottom: 12px; }
.founder-links { display: flex; gap: 16px; margin-top: 16px; }
.founder-links a { color: var(--link); font-weight: 500; font-size: 14px; }
@media (max-width: 600px) {
  .founder-section { flex-direction: column; align-items: center; text-align: center; }
  .founder-photo img { width: 140px; height: 140px; }
  .founder-links { justify-content: center; }
}
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
.contact-item { padding: 16px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; }
.contact-item b { display: block; margin-bottom: 6px; font-size: 13px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px; }
.contact-item a { color: var(--link); font-weight: 500; }
@media (max-width: 480px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- /compare: one page, Nuage vs the field ---------- */
.cmp .page-head { max-width: 860px; }
.cmp-kicker { color: var(--accent-2) !important; font-size: 13px !important; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 14px !important; }
.cmp-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.cmp-art { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; margin: 8px 0 40px; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.cmp-art img { width: 100%; aspect-ratio: 460 / 215; object-fit: cover; border-radius: 8px; opacity: .85; }
.cmp-values { margin-bottom: 56px; }
.cmp-sec { margin-bottom: 56px; }
.cmp-box { padding: 26px; }

.cmp-bars { display: grid; gap: 14px; }
.cmp-bar { display: grid; grid-template-columns: 210px 1fr 110px; grid-template-areas: "name track price" ". note note"; column-gap: 16px; row-gap: 3px; align-items: center; }
.cmp-bar-name { grid-area: name; font-weight: 600; font-size: 14px; color: var(--muted); }
.cmp-bar-track { grid-area: track; height: 12px; border-radius: 99px; background: var(--panel-2); overflow: hidden; }
.cmp-bar-fill { display: block; height: 100%; border-radius: 99px; background: #3a4157; }
.cmp-bar-price { grid-area: price; font-family: "Outfit", sans-serif; font-weight: 700; font-size: 17px; text-align: right; color: var(--muted); }
.cmp-bar-note { grid-area: note; font-size: 12.5px; color: var(--dim); }
.cmp-bar.us .cmp-bar-name, .cmp-bar.us .cmp-bar-price { color: var(--text); }
.cmp-bar.us .cmp-bar-fill { background: var(--grad); }
.cmp-bar.us .cmp-bar-note { color: var(--accent-2); }

.cmp-steps { display: grid; gap: 12px; }
.cmp-step-row { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: center; padding: 12px 14px; border-radius: 12px; }
.cmp-step-row.us { background: rgba(139, 123, 255, .10); border: 1px solid rgba(139, 123, 255, .35); }
.cmp-step-name { font-weight: 700; display: flex; flex-direction: column; }
.cmp-step-name small { color: var(--dim); font-weight: 500; font-size: 12px; }
.cmp-step-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cmp-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 6px; border-radius: 99px; background: var(--panel-2); border: 1px solid var(--line); font-size: 13px; }
.cmp-chip b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--line); font-size: 11px; }
.cmp-step-row.us .cmp-chip b { background: var(--grad); color: #06070c; }
.cmp-arrow { color: var(--dim); font-size: 13px; }
.cmp-end { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; font-size: 13px; color: var(--dim); }
.cmp-step-row.us .cmp-end { color: var(--accent-2); font-weight: 700; }

.cmp-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.cmp-table { width: 100%; min-width: 980px; border-collapse: collapse; font-size: 13.5px; }
.cmp-table th, .cmp-table td { padding: 14px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: 0; }
.cmp-table thead th { font-family: "Outfit", sans-serif; font-size: 15px; color: var(--muted); }
.cmp-table thead th.us { color: var(--text); }
.cmp-table tbody th { position: sticky; left: 0; background: var(--panel); color: var(--muted); font-weight: 600; width: 150px; z-index: 1; }
.cmp-table td { color: var(--muted); }
.cmp-table td span { display: block; margin-top: 2px; line-height: 1.4; }
.cmp-table .us { background: rgba(139, 123, 255, .08); color: var(--text); }
.cmp-table thead .us { box-shadow: inset 0 3px 0 var(--accent); }
.cmp-table td.ns { color: var(--dim); }
.cmp-table i { font-style: normal; font-weight: 800; font-size: 14px; }
.cmp-y { color: #5fd38d; } .cmp-n { color: #ff7a7a; } .cmp-m { color: var(--t-gold); } .cmp-q { color: var(--dim); }
.cmp-foot { color: var(--dim); font-size: 13px; margin: 12px 4px 0; max-width: 900px; }

.cmp-fits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cmp-fit { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; }
.cmp-fit h3 { font-size: 17px; margin-bottom: 4px; }
.cmp-fit p { color: var(--muted); font-size: 14px; margin: 0; }
.cmp-fit.us { border-color: rgba(139, 123, 255, .5); background: rgba(139, 123, 255, .08); }

.cmp-final { text-align: center; padding: 48px 20px; border-radius: 22px; background: radial-gradient(120% 140% at 50% 0%, rgba(139, 123, 255, .18), transparent 70%), var(--panel); border: 1px solid var(--line); margin-bottom: 28px; }
.cmp-final h2 { font-size: clamp(26px, 3.5vw, 38px); margin-bottom: 6px; }
.cmp-final p { color: var(--muted); margin: 0 0 20px; }
.cmp-sources { color: var(--dim); font-size: 13px; }
.cmp-sources summary { cursor: pointer; color: var(--muted); }
.cmp-sources a { color: var(--muted); text-decoration: underline; }
.cmp-sources li { margin: 4px 0; }

@media (max-width: 900px) {
  .cmp-fits { grid-template-columns: 1fr 1fr; }
  .cmp-art { grid-template-columns: repeat(4, 1fr); }
  .cmp-art img:nth-child(n+5) { display: none; }
}
@media (max-width: 640px) {
  .cmp-box { padding: 18px 16px; }
  .cmp-bar { grid-template-columns: 1fr auto; grid-template-areas: "name price" "track track" "note note"; row-gap: 6px; }
  .cmp-step-row { grid-template-columns: 1fr; gap: 8px; }
  .cmp-step-name { flex-direction: row; align-items: baseline; gap: 8px; }
  .cmp-fits { grid-template-columns: 1fr; }
  .cmp-table tbody th { width: 120px; }
}

/* ---------- touch controls over the stream (phones, tablets): touchpad.js ----------
   Bottom left: left stick + D-pad. Bottom right: A/B/X/Y + right stick. Bottom centre: View/Menu, with the keyboard
   and hide icons above. Shoulders in the top corners, under the bar. Sized from the short side so landscape fits. */
.tp { position: absolute; inset: 0; pointer-events: none; z-index: 5; --tp: clamp(78px, 26vmin, 130px); --g: 16px;
  --sl: max(var(--g), env(safe-area-inset-left)); --sr: max(var(--g), env(safe-area-inset-right)); --sb: max(var(--g), env(safe-area-inset-bottom));
  user-select: none; -webkit-user-select: none; }
.tp-bar { position: absolute; left: 50%; bottom: calc(var(--sb) + 54px); transform: translateX(-50%); display: flex; gap: 10px; pointer-events: auto; }
.tp-hidden .tp-bar { bottom: var(--sb); }
.tp-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff;
  background: rgba(10, 12, 20, .45); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.tp-ic[aria-pressed="false"] { opacity: .65; }
.tp-pad { position: absolute; inset: 0; }
.tp-hidden .tp-pad { display: none; }
/* A real controller is driving the game: the on-screen pad and its hide/show toggle go away, only the chip stays. */
.tp-physical .tp-pad { display: none; }
.tp-physical #tptoggle { display: none; }
/* Controller chip: top-centre, big touch target, unobtrusive. Hidden unless a real controller is connected. */
.tp-ctrl { position: absolute; left: 50%; top: calc(env(safe-area-inset-top) + 10px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 2 * var(--g)); pointer-events: auto;
  padding: 8px 10px 8px 12px; border-radius: 14px; background: rgba(10, 12, 20, .55); border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; font: 600 13px/1.2 "Inter", sans-serif; }
.tp-ctrl[hidden] { display: none; }
.tp-ctrl-dot { width: 8px; height: 8px; border-radius: 50%; background: #8ff0a4; flex: none; }
.tp-ctrl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-ctrl-btn { flex: none; min-height: 40px; padding: 0 14px; border-radius: 10px; color: #fff; font: 700 13px/1 "Inter", sans-serif;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); }
.tp-btn, .tp-stick { pointer-events: auto; touch-action: none; -webkit-tap-highlight-color: transparent; }
.tp-btn { position: absolute; display: grid; place-items: center; color: rgba(255, 255, 255, .92); font: 700 15px/1 "Inter", sans-serif;
  background: rgba(255, 255, 255, .13); border: 1.5px solid rgba(255, 255, 255, .35); border-radius: 50%; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.tp-btn.on { background: rgba(255, 255, 255, .42); transform: scale(.94); }
.tp-stick { position: absolute; width: var(--tp); height: var(--tp); border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .08); border: 1.5px solid rgba(255, 255, 255, .28); }
.tp-stick i { width: 44%; height: 44%; border-radius: 50%; background: rgba(255, 255, 255, .32); border: 1.5px solid rgba(255, 255, 255, .5); transition: transform .05s linear; }
.tp-stick.on i { transition: none; background: rgba(255, 255, 255, .5); }
.tp-ls { left: var(--sl); bottom: var(--sb); }
.tp-dpad { position: absolute; left: calc(var(--sl) + var(--tp) + 18px); bottom: var(--sb); width: calc(var(--tp) * .85); height: calc(var(--tp) * .85); }
.tp-dpad .tp-btn { width: 34%; height: 34%; border-radius: 8px; font-size: 11px; }
.tp-dpad .tp-btn:nth-child(1) { left: 33%; top: 0; } .tp-dpad .tp-btn:nth-child(2) { left: 0; top: 33%; }
.tp-dpad .tp-btn:nth-child(3) { right: 0; top: 33%; } .tp-dpad .tp-btn:nth-child(4) { left: 33%; bottom: 0; }
.tp-face { position: absolute; right: var(--sr); bottom: var(--sb); width: var(--tp); height: var(--tp); }
.tp-face .tp-btn { width: 36%; height: 36%; }
.tp-y { left: 32%; top: 0; } .tp-x { left: 0; top: 32%; } .tp-b { right: 0; top: 32%; } .tp-a { left: 32%; bottom: 0; }
.tp-a { color: #8ff0a4; } .tp-b { color: #ff9b9b; } .tp-x { color: #8fc3ff; } .tp-y { color: #ffe08a; }
.tp-rs { right: calc(var(--sr) + var(--tp) + 18px); bottom: var(--sb); width: calc(var(--tp) * .85); height: calc(var(--tp) * .85); }
.tp-sh { width: 56px; height: 34px; border-radius: 12px; font-size: 13px; top: calc(env(safe-area-inset-top) + 64px); }
.tp-lt { left: var(--sl); } .tp-lb { left: calc(var(--sl) + 64px); }
.tp-rt { right: var(--sr); } .tp-rb { right: calc(var(--sr) + 64px); }
.tp-mid { position: absolute; left: 50%; bottom: var(--sb); transform: translateX(-50%); display: flex; gap: 14px; }
.tp-mid .tp-btn { position: static; width: 40px; height: 40px; }

/* Phones: "play on your computer or TV" (emailed link) */
.send-link { display: flex; flex-direction: column; gap: 10px; align-items: stretch; margin: 16px auto 4px; max-width: 420px; padding: 14px 16px;
  border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); text-align: left; font-size: 14px; color: var(--muted); }
.send-link > span { display: flex; gap: 10px; align-items: flex-start; }
.send-link > span > svg { flex: none; margin-top: 2px; color: var(--accent-2); }
.send-link b { color: var(--text); }
.steam-done .send-link { margin: 0 0 14px; }

/* Milestones after "ready": Steam signed in, then the game running (play screen follows these, not "ready") */
.stream-miles { position: absolute; left: 50%; top: calc(env(safe-area-inset-top) + 128px); transform: translateX(-50%); z-index: 4;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; max-width: min(92vw, 720px);
  padding: 8px 14px; border-radius: 14px; background: rgba(10, 12, 20, .72); border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 13px; color: var(--muted); transition: opacity .6s; }
.stream-miles.done { opacity: 0; }
.mile { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.mile i { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10px; border: 1.5px solid rgba(255, 255, 255, .3); }
.mile.ok { color: var(--text); } .mile.ok i { background: #5fd38d; border-color: #5fd38d; color: #06070c; }
.mile.now { color: var(--text); font-weight: 600; } .mile.now i { border-color: var(--accent-2); border-top-color: transparent; animation: steam-throbber 1s linear infinite; }
.mile em { font-style: normal; color: var(--dim); font-weight: 500; margin-left: 2px; }
.mile-arrow { color: var(--dim); }
.mile-slow { flex-basis: 100%; text-align: center; color: var(--t-gold); font-size: 12.5px; }

/* Discord: icon-only in the nav, a labelled link elsewhere */
.nav-discord, .nav-x, .nav-reddit { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--muted); flex: none; }
.nav-discord:hover { color: #fff; background: #5865f2; }
.nav-x:hover { color: #fff; background: #000; }
.nav-reddit:hover { color: #fff; background: #ff4500; }
a[data-discord] svg, .nav-x svg, .nav-reddit svg { flex: none; }
.foot-discord, .foot-x, .foot-reddit, .launch-help a, .home-discord .btn { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.home-discord { margin: 28px 0 0; text-align: center; color: var(--muted); font-size: 14px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }
.launch-msg p.launch-help { margin: 18px 0 0; font-size: 14px; color: var(--muted); }
.launch-help a { color: var(--text); font-weight: 600; }
.discord-help { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.discord-help > div:nth-child(2) { flex: 1; min-width: 220px; }
.discord-help .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #5865f2; color: #fff; flex: none; }
.discord-help .ico svg { width: 24px; height: 24px; }
.discord-help .btn { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 640px) { .nav-discord, .nav-x, .nav-reddit { width: 32px; height: 32px; } }
/* Narrow phones: keep Discord (support) in the nav; X and Reddit stay in the footer */
@media (max-width: 380px) { .nav-x, .nav-reddit { display: none; } }

/* Header: Connect Steam from any page while Steam isn't connected (Steam's own button blue) */
.nav-steam { display: inline-flex; align-items: center; gap: 7px; color: #fff; border: 0;
  background: linear-gradient(90deg, #06bfff, #2d73ff); box-shadow: 0 6px 20px rgba(29, 140, 255, .3); }
.nav-steam svg { width: 16px; height: 16px; }
.nav-steam:hover { filter: brightness(1.08); }
@media (max-width: 640px) { .nav-steam span { display: none; } .nav-steam { padding: 0 10px; } }

/* How it works page + the games list */
.hw-table-wrap { overflow-x: auto; margin: 14px 0 18px; border: 1px solid var(--line); border-radius: 12px; }
.hw-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.hw-table th, .hw-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.hw-table th { color: var(--muted); font-weight: 600; font-size: 13px; background: var(--panel); white-space: nowrap; }
.hw-table tr:last-child td { border-bottom: 0; }
.legal .hw-table a, .glist a { text-decoration: none; font-weight: 600; }
.hw-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 14px 0 18px; }
.hw-stats .value h3 { font-size: 26px; margin-bottom: 6px; }
.hw-note { text-align: center; color: var(--muted); font-size: 14px; margin-top: 18px; }
.hw-note a { text-decoration: underline; }
.view-toggle { margin-top: -10px; }
.glist-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--muted); font-size: 13px; margin-bottom: 4px; }
.glist td:first-child { min-width: 180px; }
.gst { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; white-space: nowrap; }
.gst svg { width: 13px; height: 13px; }
.glist td.nowrap { white-space: nowrap; }
.gst-instant { color: var(--accent-2); }
.gst-download { color: var(--text); }
.gst-soon { color: #f5c451; }
.gst-borked { color: #ff6b6b; }

/* /how-it-works server map (how.js serverMap): dotted land, live regions filled + pulsing, upcoming ones as rings. */
.srv-map { display: block; width: 100%; height: auto; margin: 14px 0 6px; }
.srv-map .land circle { fill: var(--dim); opacity: .45; }
@media (max-width: 640px) {  /* the 1800-unit map shrinks ~5x on a phone: bigger land dots and pins */
  .srv-map .land circle { r: 4.2px; }
  .srv-map .dot { r: 22px; }
  .srv-map .live .pulse { r: 24px; }
}
.srv-map .live .dot { fill: var(--accent-2); }
.srv-map .live .pulse { fill: var(--accent-2); opacity: .35; transform-box: fill-box; transform-origin: center; animation: srv-pulse 2.4s ease-out infinite; }
.srv-map .soon .dot { fill: none; stroke: var(--accent); stroke-width: 3.5; }
.srv-map .near .dot { stroke: var(--text); stroke-width: 4; }
@keyframes srv-pulse { from { transform: scale(1); opacity: .45; } to { transform: scale(3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .srv-map .live .pulse { animation: none; } }
.srv-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 24px; margin: 6px 0 4px; }
.srv-lists h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 8px 0 6px; }
.srv-lists ul { list-style: none; padding: 0; margin: 0; }
.srv-lists li { display: flex; align-items: center; gap: 8px; padding: 3px 0; flex-wrap: wrap; }
.srv-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.srv-dot.live { background: var(--accent-2); }
.srv-dot.soon { border: 2px solid var(--accent); }
.srv-you { font-size: 12px; font-weight: 600; color: var(--bg); background: var(--accent-2); border-radius: 999px; padding: 1px 8px; }
.srv-guess { color: var(--muted); margin-top: 8px; }

/* ---------- /partners: creator program + application form (partners.js) ---------- */
.pt .btn, .smap .btn { text-decoration: none; }
.pt-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.pt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 14px 0 8px; }
.pt-grid .value { padding: 18px 20px; }
.pt-grid .value h3 { font-size: 22px; }
.pt .value p, .pt .faq p { color: var(--muted); }
.pt code, .smap code { background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; font-size: .92em; overflow-wrap: anywhere; }
.pt-faq { margin-top: 14px; }
.pt-form { margin-top: 16px; }
.pt-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.pt-chs { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.pt-chs legend { font-size: 13px; font-weight: 600; color: var(--muted); padding: 0; margin-bottom: 7px; }
.pt-ch { display: grid; grid-template-columns: minmax(130px, 170px) 1fr auto; gap: 8px; margin-bottom: 8px; align-items: center; }
.pt-ch-rm { font-size: 18px; line-height: 1; padding: 8px 12px; }
.pt-ch-rm[hidden], #pt-add[hidden] { display: none; }
#pt-add { justify-self: start; }
.field label small { font-weight: 500; color: var(--dim); }
.pt-count { color: var(--dim); font-size: 12px; justify-self: end; }
.pt-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pt-subject { color: var(--muted); font-size: 13.5px; margin: 0 0 16px !important; }
.pt-done h3 { margin-bottom: 0; }
@media (max-width: 640px) {
  .pt-two { grid-template-columns: 1fr; }
  .pt-ch { grid-template-columns: 1fr auto; }
  .pt-ch select { grid-column: 1 / -1; }
}

/* ---------- /sitemap: every public page, grouped (SITE_PAGES in app.js) ---------- */
.smap-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.smap-groups .box h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 10px; }
.smap-groups ul { list-style: none; padding: 0; margin: 0; }
.smap-groups li { margin: 0 0 12px; }
.smap-groups li:last-child { margin-bottom: 0; }
.smap-groups li a { font-weight: 600; }
.smap-groups li > span { display: block; color: var(--muted); font-size: 14px; line-height: 1.45; }

/* Region-gated library (server/regiongate.py): a game whose machine can't run in the player's region. */
.region-na { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.2; color: #fff; background: rgba(20, 20, 28, .82);
  border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(6px); white-space: normal; }
.card-na img { filter: grayscale(.7) brightness(.75); }
.btn.region-play[disabled] { opacity: .55; pointer-events: auto; cursor: not-allowed; filter: grayscale(.6); }
.how.region-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.region-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 4px 0 14px; }
.region-bar .region-where { font-size: 15px; }
.region-bar .region-toggle { margin: 0; }
.region-bar .chip { cursor: pointer; font: inherit; }
.region-notice { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 196, 0, .12);
  border: 1px solid rgba(255, 196, 0, .4); line-height: 1.45; }

/* One-time Pro passes (2026-10-22): "1 day ₹199 · 7 days ₹299 · Monthly ₹699" under the Pro CTA (queue + plans card). */
.pass-opts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.pass-opts .pass-opt { padding: 8px 12px; font-size: 14px; white-space: nowrap; }
.pass-dot { color: #8a97a4; }
.pass-head { margin: 12px 0 6px; font-size: 13px; color: #8a97a4; text-align: center; }
.pass-active { margin: 10px 0 0; font-size: 13px; text-align: center; }

/* Monthly Pro retired (2026-10-22): passes are the offer; existing subscribers manage theirs from the account page. */
body.monthly-off [data-checkout]:not([data-manage]) { display: none !important; }

/* Turbo (owner 2026-10-22): the demand-priced "play now" — its own look, not another pass option. */
.turbo { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 6px; }
.btn-turbo { background: linear-gradient(135deg, #ffb703, #fb5607 55%, #ff006e); color: #120600; font-weight: 800;
  box-shadow: 0 8px 30px rgba(251, 86, 7, .45); border: 0; max-width: 100%; white-space: normal; }
.btn-turbo:hover { filter: brightness(1.08); }
.turbo-bolt { font-size: 1.15em; }
.turbo-note { font-size: .85rem; opacity: .85; text-align: center; margin: 0; max-width: 34rem; }

/* In-stream "Loading <game>… 38%" while the game disk is still loading (no game running yet). */
.stream-loading { padding: 10px 14px; }
.stream-loading .spinner { flex: none; }
.stream:has(.stream-loading) .stream-warn { top: 116px; }
.queue-eta { margin: 4px 0 0; font-size: .95rem; }
.load-offer { display: block; margin-top: 4px; }
/* The loading banner carries the pass offer: it must never be covered by the progress steps (phone check, 10-22). */
.stream-loading { z-index: 6; }
@media (max-width: 600px) {
  .stream-loading { font-size: 12.5px; top: calc(env(safe-area-inset-top) + 56px); }
  .stream:has(.stream-loading) .stream-miles { top: auto; bottom: calc(env(safe-area-inset-bottom) + 84px); }
}
/* Paywall: the player's own Steam games we run, pre-installed first (owner 2026-10-23). */
.lib-marquee { margin-top: 18px; }
.lib-head { margin: 0 0 8px; font-size: .95rem; }
.lib-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.lib-tile { position: relative; display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 460 / 215; background: rgba(255,255,255,.06); }
.lib-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lib-tile span { display: grid; place-items: center; height: 100%; font-size: 12px; padding: 4px; text-align: center; }
.lib-ready { position: absolute; left: 6px; bottom: 6px; font-style: normal; font-size: 11px; font-weight: 700; background: rgba(0,0,0,.72); padding: 2px 6px; border-radius: 6px; }
/* Save-login: the consent box the player missed is called out (10-24: a disabled-but-bright Save lost 35% of players). */
.steam-consent.need { outline: 2px solid var(--warn, #ffb454); outline-offset: 4px; border-radius: 8px; }
.steam-modal .btn[disabled] { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }

/* L2: "enter the code instead" escape on the approve-on-phone card */
.guard-alt { background: none; border: 0; padding: 6px 0; margin-top: 4px; color: inherit; opacity: .8;
  text-decoration: underline; font: inherit; font-size: .9em; cursor: pointer; }
.guard-alt:hover { opacity: 1; }

/* Fix 1 (2026-10-24): the EResult 5 refusal lives INSIDE the re-save form, at the top, never covered */
.steam-refusal { background: rgba(220, 53, 69, .14); border: 1px solid #e5484d; border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; color: #ffd7d9; }
.steam-refusal-title { display: block; color: #ff8a8f; margin-bottom: 4px; }
.steam-refusal p { margin: 4px 0; font-size: 14px; }
.steam-refusal-alts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.steam-refusal-alts .btn, .steam-refusal-acct .btn { min-height: 44px; }
.field-help { font-size: 13px; color: #b8c4d6; margin: 6px 0 0; }
.steam-forgot { color: #9fd0ff; }
.input.needs-check { border-color: #f5a524; box-shadow: 0 0 0 2px rgba(245, 165, 36, .35); }
.steam-overlay { overflow-y: auto; place-items: safe center; }
.steam-email-confirm { background: #24324a; border: 1px solid #f5a524; border-radius: 10px; padding: 12px; margin-top: 8px; text-align: left; }
.steam-email-confirm p { margin: 6px 0 10px; font-size: 14px; }
.steam-email-confirm .btn-primary { width: 100%; min-height: 44px; }
.steam-email-confirm .steam-email-keep { display: block; margin: 8px auto 0; font-size: 12px; min-height: 36px; }
.steam-where-acct.pulse { outline: 2px solid #f5a524; outline-offset: 2px; border-radius: 3px; }

/* Coming soon / vote-for-the-next-game (GAME_VOTING) */
.vote-propose{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0 1.25rem}
.vote-propose input{flex:1 1 12rem;min-width:0;padding:.6rem .8rem;border-radius:10px;border:1px solid var(--line,#2a2d3a);background:var(--card,#12141c);color:inherit;font:inherit}
.vote-board{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.vote-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;padding:.75rem 1rem;border:1px solid var(--line,#2a2d3a);border-radius:12px;background:var(--card,#12141c)}
.vote-rank{font-weight:800;opacity:.6;min-width:2.5rem}
.vote-main{flex:1 1 14rem;min-width:0;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.vote-name{font-weight:700}
.vote-appid{opacity:.55;font-size:.8em}
.vote-stats{opacity:.85;white-space:nowrap}
.vote-row .vote-btn{margin-left:auto}
@media(max-width:560px){.vote-stats{width:100%}.vote-row .vote-btn{margin-left:0}}
.vote-rules{margin:.25rem 0 1rem;padding:.6rem .9rem;border-radius:10px;background:var(--card,#12141c);border:1px solid var(--line,#2a2d3a)}
.vote-live{display:inline-flex;align-items:center;gap:.4rem;font-weight:700}
.vote-row.in-batch{border-color:var(--accent,#5aa8ff)}
.vote-inbatch{font-size:.7em;font-weight:700;color:var(--accent,#5aa8ff);opacity:.9}
.vote-mine{margin-top:1.25rem}
.vote-mine-list{list-style:none;margin:.5rem 0 0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.vote-mine-list li{display:flex;gap:.75rem;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--line,#2a2d3a);padding:.35rem 0}
.vote-mine-list .vm-g{font-weight:600}
.vote-mine-list .vm-at{opacity:.55;font-size:.85em;white-space:nowrap}
.pay-h{margin:0 0 .5rem}

/* Vote board — visual game grid + stepper */
.vote-search{display:flex;gap:.5rem;flex-wrap:wrap;margin:.25rem 0 1.25rem}
.vote-search input{flex:1 1 10rem;min-width:0;padding:.6rem .8rem;border-radius:10px;border:1px solid var(--line,#2a2d3a);background:var(--card,#12141c);color:inherit;font:inherit}
.vote-search #pg-amt{flex:0 1 8rem}
.vote-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1rem}
.vt{border:1px solid var(--line,#2a2d3a);border-radius:14px;overflow:hidden;background:var(--card,#12141c);display:flex;flex-direction:column}
.vt.vt-top{border-color:var(--accent,#5aa8ff);box-shadow:0 0 0 1px var(--accent,#5aa8ff) inset}
.vt.vt-active{box-shadow:0 0 0 2px var(--accent,#5aa8ff)}
.vt-art{position:relative;aspect-ratio:600/900;background:linear-gradient(145deg,#1a2238,#2a1f3a);overflow:hidden}
.vt-art img{width:100%;height:100%;object-fit:cover;display:block}
.vt-badges{position:absolute;top:.5rem;left:.5rem;display:flex;flex-direction:column;gap:.3rem;align-items:flex-start}
.vt-batch{background:var(--accent,#5aa8ff);color:#07080d;font-weight:800;font-size:.7rem;padding:.15rem .45rem;border-radius:6px}
.vt-tag{font-size:.68rem;font-weight:700;padding:.15rem .45rem;border-radius:6px;background:rgba(7,8,13,.7);backdrop-filter:blur(4px)}
.vt-tag.vt-lib{color:#3ee6c8}.vt-tag.vt-new{color:#ffd27a}
.vt-proton{position:absolute;bottom:.5rem;right:.5rem;font-size:.68rem}
.vt-body{padding:.6rem .7rem .7rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.vt-head{display:flex;gap:.4rem;align-items:baseline}
.vt-rank{font-weight:800;opacity:.5;font-size:.85rem}
.vt-name{font-weight:700;line-height:1.2}
.vt-stats{font-size:.82rem;opacity:.85}
.vt-stepper{display:flex;align-items:center;gap:.4rem;margin-top:auto}
.vt-step{width:2rem;height:2rem;border-radius:8px;border:1px solid var(--line,#2a2d3a);background:var(--bg,#0d0f16);color:inherit;font-size:1.1rem;font-weight:700;cursor:pointer;line-height:1}
.vt-plus{background:var(--accent,#5aa8ff);color:#07080d;border-color:transparent;flex:1}
.vt-count{display:flex;flex-direction:column;align-items:center;min-width:3rem}
.vt-count .vt-n{font-weight:800;font-size:1.1rem}.vt-count small{opacity:.6;font-size:.65rem}
.vt-go{width:100%}
/* ---------- home announcement banners (banners.js) : light, stacked, dismissable ---------- */
.banners { display: flex; flex-direction: column; gap: 10px; margin: 16px auto 0; }
.banners:empty { display: none; margin: 0; }
.nbanner { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02));
  border: 1px solid var(--line); font-size: 13.5px; line-height: 1.4; }
.nbanner-ic { flex: none; display: inline-flex; color: var(--muted); }
.nbanner-link { flex: 1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; color: var(--text);
  text-decoration: none; }
.nbanner-link:hover .nbanner-cta { text-decoration: underline; }
.nbanner-txt { color: var(--text); }
.nbanner-cta { flex: none; font-weight: 600; color: var(--accent-2); white-space: nowrap; }
.nbanner-x { flex: none; width: 28px; height: 28px; border: 0; background: transparent; color: var(--muted);
  cursor: pointer; border-radius: 7px; font-size: 13px; }
.nbanner-x:hover { background: rgba(255, 255, 255, .07); color: var(--text); }
/* tones: subtle accents, never marquee-loud */
.nbanner-steam { background: linear-gradient(90deg, rgba(102, 192, 244, .12), rgba(102, 192, 244, .03));
  border-color: #27455c; }
.nbanner-steam .nbanner-ic { color: #66c0f4; }
.nbanner-steam .nbanner-cta { color: #8fd0ff; }
.nbanner-vote { background: linear-gradient(90deg, rgba(139, 123, 255, .12), rgba(62, 230, 200, .05));
  border-color: #353561; }
.nbanner-vote .nbanner-ic { color: var(--accent); }
@media (max-width: 560px) {
  .nbanner { flex-wrap: wrap; align-items: flex-start; }
  .nbanner-link { flex-basis: 100%; order: 2; }
  .nbanner-ic { order: 1; }
  .nbanner-x { order: 1; margin-left: auto; }
}