/* ==========================================================================
   Charmi Layouts — streamers page (dark product page)
   ========================================================================== */
@property --con { syntax: "<color>"; inherits: true; initial-value: #3ee6a8; }
@property --ov-acc { syntax: "<color>"; inherits: true; initial-value: #3ee6a8; }
@property --ov-acc2 { syntax: "<color>"; inherits: true; initial-value: #ffd479; }
@property --ov-ink { syntax: "<color>"; inherits: true; initial-value: #eafff6; }
@property --ov-mute { syntax: "<color>"; inherits: true; initial-value: #8cc3ac; }
@property --ov-panel { syntax: "<color>"; inherits: true; initial-value: rgba(7, 38, 28, .8); }
@property --ov-line { syntax: "<color>"; inherits: true; initial-value: rgba(62, 230, 168, .26); }
@property --ov-chip { syntax: "<color>"; inherits: true; initial-value: rgba(62, 230, 168, .12); }
@property --acc { syntax: "<color>"; inherits: true; initial-value: #ff7257; }
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }

.page-streamers {
  --sx-bg: #07080f;
  --sx-line: rgba(255, 255, 255, .08);
  --sx-line-2: rgba(255, 255, 255, .14);
  --sx-ink: #f4f2fb;
  --sx-mute: #9ba1bd;
  --sx-dim: #6c7290;
  --mint: #3ee6a8;
  --sky: #4fd1ff;
  --gold: #ffd479;
  --lilac: #b49cff;
  background: var(--sx-bg);
  color: var(--sx-ink);
}
.page-streamers ::selection { background: rgba(255, 114, 87, .35); color: #fff; }
[data-theme="dark"] .page-streamers h1 em, [data-theme="dark"] .page-streamers h2 em { color: var(--coral-300); }

/* Nav on a dark page */
[data-theme="dark"] .page-streamers .nav { background: rgba(7, 8, 15, .72); }
[data-theme="dark"] .page-streamers .nav.is-scrolled { border-bottom-color: var(--sx-line); }
[data-theme="dark"] .page-streamers .brand { color: #fff; }
[data-theme="dark"] .page-streamers .brand-avatar { box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
[data-theme="dark"] .page-streamers .nav-links a { color: var(--sx-mute); }
[data-theme="dark"] .page-streamers .nav-links a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
[data-theme="dark"] .page-streamers .nav-links a.nav-new { color: #fff; }
[data-theme="dark"] .page-streamers .nav-links a.is-current { background: rgba(255, 114, 87, .14); color: #ffb3a3; }
[data-theme="dark"] .page-streamers .lang { color: var(--sx-mute); border-color: var(--sx-line-2); }
[data-theme="dark"] .page-streamers .lang:hover { color: #fff; border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .06); }
[data-theme="dark"] .page-streamers .btn-quiet { color: var(--sx-mute); }
[data-theme="dark"] .page-streamers .btn-quiet:hover { color: #fff; background: rgba(255, 255, 255, .06); }
[data-theme="dark"] .page-streamers .menu-btn { color: #fff; }
[data-theme="dark"] .page-streamers .menu-btn:hover { background: rgba(255, 255, 255, .08); }
[data-theme="dark"] .page-streamers .skip { background: var(--coral); color: var(--ink); }
.page-streamers :focus-visible { outline-color: var(--coral-300); }

/* Buttons */
.btn-coral { position: relative; overflow: hidden; isolation: isolate; background: var(--coral); color: var(--ink); box-shadow: 0 10px 30px -10px rgba(255, 114, 87, .75), inset 0 1px 0 rgba(255, 255, 255, .35); }
.btn-coral::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--ease); }
.btn-coral:hover { background: #ff866f; transform: translateY(-1px); }
.btn-coral:hover::after { transform: translateX(120%); }
.btn-glass { background: rgba(255, 255, 255, .07); color: #fff; border: 1px solid rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn-glass:hover { background: rgba(255, 255, 255, .12); transform: translateY(-1px); }
.btn-light-glass { background: rgba(255, 255, 255, .94); color: var(--ink); }
.btn-light-glass:hover { background: #fff; transform: translateY(-1px); }
.btn-tag { margin-left: 2px; padding: 3px 9px; border-radius: 999px; background: rgba(20, 24, 43, .14); font-size: 12.5px; font-weight: 650; }

/* ==========================================================================
   Hero
   ========================================================================== */
.sx-hero { --con: #3ee6a8; position: relative; isolation: isolate; overflow: hidden; padding: 80px 0 72px; transition: --con .9s ease; }
.sx-hero[data-console="gbc"] { --con: #7fd8ff; }
.sx-hero[data-console="gba"] { --con: #3ee6a8; }
.sx-hero[data-console="ds"] { --con: #a9b8ff; }
.sx-hero[data-console="gc"] { --con: #c58bff; }
.sx-hero-fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.sx-glow { position: absolute; left: 50%; border-radius: 50%; filter: blur(80px); }
.sx-glow.g1 { width: 760px; height: 460px; top: -250px; translate: -50% 0; background: radial-gradient(closest-side, rgba(255, 114, 87, .55), transparent); animation: sxglow 12s ease-in-out infinite alternate; }
.sx-glow.g2 { width: 1200px; height: 760px; top: 520px; translate: -50% 0; background: radial-gradient(closest-side, color-mix(in srgb, var(--con) 34%, transparent), transparent); }
@keyframes sxglow { from { transform: translateX(-80px) scale(1); } to { transform: translateX(80px) scale(1.12); } }
.sx-floor { position: absolute; left: -40%; right: -40%; top: 520px; height: 900px; transform: perspective(520px) rotateX(64deg); transform-origin: 50% 0;
  background-image: linear-gradient(color-mix(in srgb, var(--con) 22%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--con) 22%, transparent) 1px, transparent 1px);
  background-size: 72px 72px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 45%, transparent 80%); mask-image: linear-gradient(180deg, transparent, #000 18%, #000 45%, transparent 80%); animation: sxfloor 3.5s linear infinite; opacity: .7; }
@keyframes sxfloor { to { background-position: 0 72px, 0 0; } }
.sx-stars { position: absolute; inset: 0 0 40% 0; background-image: radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 62%, #fff, transparent), radial-gradient(1.5px 1.5px at 44% 12%, #fff, transparent), radial-gradient(1px 1px at 61% 40%, #fff, transparent), radial-gradient(1.5px 1.5px at 78% 22%, #fff, transparent), radial-gradient(1px 1px at 90% 58%, #fff, transparent), radial-gradient(1px 1px at 6% 76%, #fff, transparent), radial-gradient(1.5px 1.5px at 70% 78%, #fff, transparent); opacity: .35; animation: twinkle 5s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .15; } to { opacity: .45; } }

.sx-hero-copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sx-pill { display: inline-flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .13); font-size: 13.5px; color: rgba(255, 255, 255, .82); transition: background .25s, border-color .25s; }
.sx-pill:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); }
.sx-pill .i { width: 15px; height: 15px; color: var(--coral-300); }
.sx-pill-tag { padding: 3px 9px; border-radius: 999px; background: var(--coral); color: var(--ink); font-weight: 650; font-size: 12px; }
.sx-hero h1 { margin-top: 26px; font-size: clamp(2.75rem, 7.2vw, 5.9rem); font-weight: 650; letter-spacing: -0.055em; line-height: .96; max-width: 13ch; color: #fff; }
.sx-hero h1 em { display: inline-block; padding: 0 .08em .04em 0; background: linear-gradient(100deg, #ffb3a3 0%, #ffd8a8 30%, #ff7257 55%, var(--con) 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 8s ease-in-out infinite; }
.sx-sub { margin-top: 26px; max-width: 640px; font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--sx-mute); }
.sx-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 34px; }
.sx-facts { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; font-size: 14px; color: var(--sx-dim); }
.sx-facts b { color: #fff; font-weight: 600; }

/* ==========================================================================
   Stage: console switcher + live layout + memory feed
   ========================================================================== */
.sx-stage-wrap { width: 100%; max-width: 1340px; margin: 64px auto 0; padding: 0 var(--gutter); perspective: 2400px; }
.sx-stage {
  position: relative; padding: 12px; border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .02));
  border: 1px solid var(--sx-line-2);
  box-shadow: 0 90px 160px -70px color-mix(in srgb, var(--con) 55%, transparent), 0 40px 100px -40px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .08);
  transform-origin: 50% 0; transform: rotateX(calc(var(--tilt, 0) * 18deg)) scale(calc(1 - var(--tilt, 0) * .06));
  animation: stagein 1.2s var(--ease) .25s both; will-change: transform;
}
@keyframes stagein { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }

.sx-stage-top { display: flex; align-items: center; gap: 10px; padding: 2px 2px 12px; }
.sx-consoles { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 16px; background: rgba(0, 0, 0, .35); border: 1px solid var(--sx-line); }
.sx-con { position: relative; display: flex; align-items: center; gap: 11px; min-width: 0; padding: 9px 12px; border-radius: 12px; text-align: left; color: var(--sx-mute); transition: background .3s, color .3s, box-shadow .3s; overflow: hidden; }
.sx-con > span { min-width: 0; }
.sx-con .i { width: 28px; height: 28px; stroke-width: 1.45; transition: color .3s, transform .4s var(--ease); }
.sx-con b { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-con small { display: block; font-size: 12px; color: var(--sx-dim); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-con:hover { color: #fff; background: rgba(255, 255, 255, .04); }
.sx-con:hover .i { transform: rotate(-8deg) scale(1.08); }
.sx-con.is-on { color: #fff; background: rgba(255, 255, 255, .09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 10px 24px -14px rgba(0, 0, 0, .7); }
.sx-con.is-on .i { color: var(--con); }
.sx-con-bar { position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--con); transform-origin: 0 50%; transform: scaleX(0); opacity: 0; }
.sx-con.is-on.is-auto .sx-con-bar { opacity: .9; animation: conbar var(--dur, 20s) linear forwards; }
@keyframes conbar { to { transform: scaleX(1); } }
.sx-price { display: flex; align-items: center; gap: 10px; flex: none; min-width: 168px; padding: 0 8px 0 14px; }
.sx-price b { font-size: 36px; font-weight: 700; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; }
.sx-price span { font-size: 12px; color: var(--sx-mute); line-height: 1.3; }
.sx-price.flip b { animation: pricein .6s var(--ease); }
@keyframes pricein { from { opacity: 0; transform: translateY(10px) scale(.9); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

.sx-stage-body { display: grid; grid-template-columns: minmax(0, 1fr) 286px; gap: 12px; }
.ov-wrap { position: relative; container-type: inline-size; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.sx-stage-note { margin: 12px 8px 2px; font-size: 13px; color: var(--sx-dim); text-align: center; text-wrap: balance; }

/* ---------- The overlay (designed on a 1600 × 900 canvas) ---------- */
.ov {
  --u: calc(100cqw / 1600);
  --ov-ease: cubic-bezier(.7, 0, .2, 1);
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  font-family: var(--font); line-height: 1.15; color: var(--ov-ink);
  transition: --ov-acc .8s, --ov-acc2 .8s, --ov-ink .8s, --ov-mute .8s, --ov-panel .8s, --ov-line .8s, --ov-chip .8s;
}
.ov[data-console="gbc"] { --ov-ink: #eaf6ff; --ov-mute: #8fb3cc; --ov-acc: #7fd8ff; --ov-acc2: #c6b6ff; --ov-panel: rgba(12, 34, 58, .8); --ov-line: rgba(127, 216, 255, .28); --ov-chip: rgba(127, 216, 255, .13); }
.ov[data-console="gba"] { --ov-ink: #eafff6; --ov-mute: #8cc3ac; --ov-acc: #3ee6a8; --ov-acc2: #ffd479; --ov-panel: rgba(7, 38, 28, .82); --ov-line: rgba(62, 230, 168, .28); --ov-chip: rgba(62, 230, 168, .13); }
.ov[data-console="ds"] { --ov-ink: #f5f7fb; --ov-mute: #9aa3b5; --ov-acc: #4fd1ff; --ov-acc2: #ffffff; --ov-panel: rgba(16, 18, 26, .88); --ov-line: rgba(255, 255, 255, .17); --ov-chip: rgba(255, 255, 255, .09); }
.ov[data-console="gc"] { --ov-ink: #fff3ea; --ov-mute: #c9a6b8; --ov-acc: #ff9a4d; --ov-acc2: #c58bff; --ov-panel: rgba(36, 16, 46, .82); --ov-line: rgba(255, 154, 77, .32); --ov-chip: rgba(255, 154, 77, .13); }

.ov-bg, .ov-bg i { position: absolute; inset: 0; }
.ov-bg i { opacity: 0; transition: opacity .9s ease; }
.ov[data-console="gbc"] .ov-bg i[data-t="gbc"], .ov[data-console="gba"] .ov-bg i[data-t="gba"], .ov[data-console="ds"] .ov-bg i[data-t="ds"], .ov[data-console="gc"] .ov-bg i[data-t="gc"] { opacity: 1; }
.ov-bg i[data-t="gbc"] { background: conic-gradient(from 210deg at 72% 26%, rgba(127, 216, 255, .14), transparent 22%, rgba(198, 182, 255, .12) 48%, transparent 70%, rgba(127, 216, 255, .08)), linear-gradient(140deg, #0d2744, #0a1a31 50%, #121a3a); }
.ov-bg i[data-t="gba"] { background: radial-gradient(ellipse 60% 70% at 88% 6%, rgba(62, 230, 168, .22), transparent 70%), radial-gradient(ellipse 50% 60% at 0% 100%, rgba(255, 212, 121, .12), transparent 70%), linear-gradient(160deg, #0c2e23, #061811 70%); }
.ov-bg i[data-t="ds"] { background: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / calc(40 * var(--u)) calc(40 * var(--u)), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / calc(40 * var(--u)) calc(40 * var(--u)), radial-gradient(ellipse 55% 60% at 50% 0%, rgba(79, 209, 255, .18), transparent 70%), linear-gradient(180deg, #12141b, #06070b); }
.ov-bg i[data-t="gc"] { background: radial-gradient(ellipse 70% 50% at 50% 118%, rgba(255, 154, 77, .4), transparent 70%), radial-gradient(ellipse 45% 50% at 92% 0%, rgba(197, 139, 255, .3), transparent 70%), linear-gradient(180deg, #1f1030, #3b1b3d 60%, #5c2c2b); }
.ov-bg::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .07) calc(1.3 * var(--u)), transparent calc(1.6 * var(--u))); background-size: calc(26 * var(--u)) calc(26 * var(--u)); -webkit-mask-image: linear-gradient(115deg, #000, transparent 60%); mask-image: linear-gradient(115deg, #000, transparent 60%); }

/* Top bar */
.ov-top { position: absolute; z-index: 2; left: calc(24 * var(--u)); right: calc(24 * var(--u)); top: calc(22 * var(--u)); height: calc(58 * var(--u)); display: flex; align-items: center; gap: calc(12 * var(--u)); }
.ov-brand { display: flex; align-items: center; gap: calc(12 * var(--u)); margin-right: auto; min-width: 0; }
.ov-brand img { width: calc(48 * var(--u)); height: calc(48 * var(--u)); border-radius: 50%; box-shadow: 0 0 0 calc(3 * var(--u)) var(--ov-acc); }
.ov-brand b { display: block; font-size: calc(21 * var(--u)); font-weight: 800; letter-spacing: .05em; }
.ov-brand span { display: block; margin-top: calc(4 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 550; color: var(--ov-mute); white-space: nowrap; }
.ov-chips { display: flex; gap: calc(10 * var(--u)); }
.ov-chip { display: inline-flex; align-items: center; gap: calc(9 * var(--u)); height: calc(46 * var(--u)); padding: 0 calc(17 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--ov-panel); box-shadow: 0 0 0 calc(1.5 * var(--u)) var(--ov-line); font-size: calc(18 * var(--u)); font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ov-chip .i { width: calc(21 * var(--u)); height: calc(21 * var(--u)); color: var(--ov-acc); stroke-width: 2.2; }
.ov-chip.flash { animation: chipflash 1s var(--ease); }
@keyframes chipflash { 0% { background: var(--ov-panel); } 18% { background: color-mix(in srgb, var(--ov-acc) 35%, var(--ov-panel)); box-shadow: 0 0 0 calc(2 * var(--u)) var(--ov-acc), 0 0 calc(30 * var(--u)) color-mix(in srgb, var(--ov-acc) 55%, transparent); transform: scale(1.06); } 100% { background: var(--ov-panel); } }
.ov-live, .ov-preview { display: inline-flex; align-items: center; gap: calc(9 * var(--u)); height: calc(46 * var(--u)); padding: 0 calc(16 * var(--u)); border-radius: calc(12 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 800; letter-spacing: .08em; }
.ov-live { background: #e5243b; color: #fff; box-shadow: 0 0 calc(24 * var(--u)) rgba(229, 36, 59, .45); }
.ov-live i { width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: 50%; background: #fff; animation: blinkdot 1.4s ease-in-out infinite; }
.ov-preview { display: none; background: var(--ov-chip); color: var(--ov-acc); box-shadow: 0 0 0 calc(1.5 * var(--u)) var(--ov-line); text-transform: uppercase; }
.ov[data-console="gc"] .ov-preview { display: inline-flex; }

/* Morphing boxes */
.ov-el {
  position: absolute; z-index: 1;
  left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u));
  transition: left .85s var(--ov-ease), top .85s var(--ov-ease), width .85s var(--ov-ease), height .85s var(--ov-ease), opacity .5s ease, transform .6s var(--ov-ease);
}
/* Game Boy Advance: 3:2 game, cam + team column */
.ov[data-console="gba"] { --sp: 64; --fn: 20; --fs: 14; --hb: 9; --bp: 600; --tx: 567; }
.ov[data-console="gba"] .ov-s1, .ov[data-console="gba"] .ov-s2 { --x: 24; --y: 96; --w: 1086; --h: 724; }
.ov[data-console="gba"] .ov-cam, .ov[data-console="gba"] .ov-tcard { --x: 1126; --y: 96; --w: 450; --h: 230; }
.ov[data-console="gba"] .mon { --x: 1126; --w: 450; --h: 72; --y: calc(342 + var(--i) * 81.2); }
.ov[data-console="gba"] .ov-badges { --x: 24; --y: 836; --w: 560; --h: 44; }
/* Game Boy Color: square-ish game, big cam, 3 × 2 team */
.ov[data-console="gbc"] { --sp: 84; --fn: 19; --fs: 14; --hb: 9; --bp: 600; --tx: 426; }
.ov[data-console="gbc"] .ov-s1, .ov[data-console="gbc"] .ov-s2 { --x: 24; --y: 96; --w: 804; --h: 724; }
.ov[data-console="gbc"] .ov-cam, .ov[data-console="gbc"] .ov-tcard { --x: 844; --y: 96; --w: 732; --h: 412; }
.ov[data-console="gbc"] .mon { --w: 236; --h: 142; }
.ov[data-console="gbc"] .mon:nth-child(1) { --x: 844; --y: 524; }
.ov[data-console="gbc"] .mon:nth-child(2) { --x: 1092; --y: 524; }
.ov[data-console="gbc"] .mon:nth-child(3) { --x: 1340; --y: 524; }
.ov[data-console="gbc"] .mon:nth-child(4) { --x: 844; --y: 678; }
.ov[data-console="gbc"] .mon:nth-child(5) { --x: 1092; --y: 678; }
.ov[data-console="gbc"] .mon:nth-child(6) { --x: 1340; --y: 678; }
.ov[data-console="gbc"] .ov-badges { --x: 24; --y: 836; --w: 560; --h: 44; }
/* Nintendo DS: both screens stacked in the middle, cam + trainer card on top */
.ov[data-console="ds"] { --sp: 104; --fn: 24; --fs: 16; --hb: 11; --bp: 18; --tx: 800; }
.ov[data-console="ds"] .ov-s1 { --x: 562; --y: 96; --w: 476; --h: 357; }
.ov[data-console="ds"] .ov-s2 { --x: 562; --y: 463; --w: 476; --h: 357; }
.ov[data-console="ds"] .ov-cam { --x: 24; --y: 96; --w: 522; --h: 294; }
.ov[data-console="ds"] .ov-tcard { --x: 1054; --y: 96; --w: 522; --h: 294; }
.ov[data-console="ds"] .mon { --w: 522; --h: 130; }
.ov[data-console="ds"] .mon:nth-child(1) { --x: 24; --y: 406; }
.ov[data-console="ds"] .mon:nth-child(2) { --x: 24; --y: 548; }
.ov[data-console="ds"] .mon:nth-child(3) { --x: 24; --y: 690; }
.ov[data-console="ds"] .mon:nth-child(4) { --x: 1054; --y: 406; }
.ov[data-console="ds"] .mon:nth-child(5) { --x: 1054; --y: 548; }
.ov[data-console="ds"] .mon:nth-child(6) { --x: 1054; --y: 690; }
.ov[data-console="ds"] .ov-badges { --x: 1072; --y: 296; --w: 486; --h: 74; }
/* GameCube: 4:3 game, cam + 2 × 3 team */
.ov[data-console="gc"] { --sp: 76; --fn: 18; --fs: 13; --hb: 8; --bp: 560; --tx: 506; }
.ov[data-console="gc"] .ov-s1, .ov[data-console="gc"] .ov-s2 { --x: 24; --y: 96; --w: 965; --h: 724; }
.ov[data-console="gc"] .ov-cam, .ov[data-console="gc"] .ov-tcard { --x: 1005; --y: 96; --w: 571; --h: 321; }
.ov[data-console="gc"] .mon { --w: 279; --h: 121; }
.ov[data-console="gc"] .mon:nth-child(1) { --x: 1005; --y: 433; }
.ov[data-console="gc"] .mon:nth-child(2) { --x: 1297; --y: 433; }
.ov[data-console="gc"] .mon:nth-child(3) { --x: 1005; --y: 566; }
.ov[data-console="gc"] .mon:nth-child(4) { --x: 1297; --y: 566; }
.ov[data-console="gc"] .mon:nth-child(5) { --x: 1005; --y: 699; }
.ov[data-console="gc"] .mon:nth-child(6) { --x: 1297; --y: 699; }
.ov[data-console="gc"] .ov-badges { --x: 24; --y: 836; --w: 520; --h: 44; }

/* Game screens */
.ov-s1, .ov-s2 { overflow: hidden; background: #000; border-radius: calc(14 * var(--u)); box-shadow: 0 0 0 calc(3 * var(--u)) var(--ov-line), 0 calc(24 * var(--u)) calc(60 * var(--u)) rgba(0, 0, 0, .5); }
.ov-s1 > img, .ov-s2 > img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; transition: opacity .3s ease, filter .3s ease; }
.ov[data-console="gc"] .ov-s1 > img { image-rendering: auto; }
.ov-s2 { opacity: 0; }
.ov[data-console="ds"] .ov-s2 { opacity: 1; z-index: 2; }
.ov-s1.is-travel > img, .ov-s2.is-travel > img { opacity: 0; filter: brightness(0); }
.ov-scan { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 calc(90 * var(--u)) rgba(0, 0, 0, .38); background: linear-gradient(180deg, transparent 40%, rgba(255, 255, 255, .06) 50%, transparent 60%) 0 0 / 100% 300%; animation: ovsweep 7s linear infinite; }
@keyframes ovsweep { from { background-position: 0 100%; } to { background-position: 0 -200%; } }

/* Webcam slot */
.ov-cam { overflow: hidden; border-radius: calc(14 * var(--u)); background: radial-gradient(ellipse 80% 90% at 50% 105%, color-mix(in srgb, var(--ov-acc) 24%, #1a1d2b), #0c0e17 72%); box-shadow: 0 0 0 calc(3 * var(--u)) var(--ov-line); }
.ov-cam-sil { position: absolute; left: 50%; bottom: 0; height: 86%; width: auto; translate: -50% 0; fill: rgba(255, 255, 255, .1); transform-origin: 50% 100%; animation: breathe 5s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.025); } }
.ov-cam-tag { position: absolute; left: calc(14 * var(--u)); top: calc(14 * var(--u)); display: inline-flex; align-items: center; gap: calc(7 * var(--u)); padding: calc(6 * var(--u)) calc(10 * var(--u)); border-radius: calc(8 * var(--u)); background: rgba(0, 0, 0, .4); font-size: calc(14 * var(--u)); font-weight: 750; letter-spacing: .12em; color: rgba(255, 255, 255, .8); }
.ov-cam-tag i { width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; background: #ff3b30; animation: blinkdot 1.4s ease-in-out infinite; }

/* DS trainer card */
.ov-tcard { opacity: 0; transform: scale(.94); overflow: hidden; padding: calc(20 * var(--u)) calc(24 * var(--u)); border-radius: calc(14 * var(--u)); background: linear-gradient(135deg, color-mix(in srgb, var(--ov-acc) 18%, transparent), transparent 55%), var(--ov-panel); box-shadow: 0 0 0 calc(3 * var(--u)) var(--ov-line); }
.ov[data-console="ds"] .ov-tcard { opacity: 1; transform: none; }
.tc-h { display: flex; justify-content: space-between; font-size: calc(15 * var(--u)); letter-spacing: .14em; color: var(--ov-mute); white-space: nowrap; }
.tc-h b { color: var(--ov-acc); font-weight: 800; }
.tc-name { margin-top: calc(26 * var(--u)); font-size: calc(36 * var(--u)); font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.tc-name small { display: block; margin-top: calc(30 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 750; letter-spacing: .14em; text-transform: uppercase; color: var(--ov-mute); }

/* Team cards */
.ov-team { list-style: none; margin: 0; padding: 0; }
.mon { z-index: 2; display: grid; grid-template-columns: calc(var(--sp) * var(--u)) minmax(0, 1fr); align-items: center; column-gap: calc(12 * var(--u)); padding: 0 calc(16 * var(--u)) 0 calc(8 * var(--u)); border-radius: calc(14 * var(--u)); background: var(--ov-panel); box-shadow: 0 0 0 calc(1.5 * var(--u)) var(--ov-line); overflow: hidden; transition-delay: calc(var(--i) * 40ms); }
.mon::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; }
.mon-sp { position: relative; width: calc(var(--sp) * var(--u)); height: calc(var(--sp) * var(--u)); }
.mon-sp img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 calc(4 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, .4)); transition: filter .4s ease, opacity .25s ease; }
.mon-tx { display: grid; gap: calc(6 * var(--u)); min-width: 0; }
.mon-l1 { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); min-width: 0; }
.mon-n { min-width: 0; font-size: calc(var(--fn) * var(--u)); font-weight: 750; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s; }
.mon-lv { flex: none; padding: calc(4 * var(--u)) calc(8 * var(--u)); border-radius: calc(7 * var(--u)); background: var(--ov-chip); font: 700 calc(13 * var(--u))/1 var(--mono); color: var(--ov-mute); white-space: nowrap; }
.mon-lv em { margin-left: calc(3 * var(--u)); font: 700 calc(16 * var(--u))/1 var(--mono); font-style: normal; color: var(--ov-ink); letter-spacing: 0; }
.mon-hp { position: relative; height: calc(var(--hb) * var(--u)); border-radius: 99px; background: rgba(0, 0, 0, .5); overflow: hidden; box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(255, 255, 255, .06); }
.mon-hp s, .mon-hp i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--hp, 100%); border-radius: inherit; }
.mon-hp s { background: rgba(255, 255, 255, .6); transition: width .8s ease .45s; }
.mon-hp i { background: linear-gradient(180deg, #7dffb0, #2fd27a); transition: width .5s var(--ease), background .4s; }
.mon-hp.mid i { background: linear-gradient(180deg, #ffe17a, #f2b51f); }
.mon-hp.low i { background: linear-gradient(180deg, #ff8a8a, #ef3b4b); }
.mon-l3 { display: flex; align-items: center; gap: calc(8 * var(--u)); min-width: 0; }
.mon-hpt { font: 600 calc(var(--fs) * var(--u))/1 var(--mono); color: var(--ov-mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mon-ty { display: flex; gap: calc(5 * var(--u)); margin-left: auto; }
.mon-ty u { text-decoration: none; padding: calc(4 * var(--u)) calc(8 * var(--u)); border-radius: calc(6 * var(--u)); background: var(--t, #777); font-size: calc(11.5 * var(--u)); font-weight: 800; letter-spacing: .06em; line-height: 1; text-transform: uppercase; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .3); white-space: nowrap; }
.mon-tag { display: none; margin-left: auto; padding: calc(4 * var(--u)) calc(8 * var(--u)); border-radius: calc(6 * var(--u)); font-size: calc(11.5 * var(--u)); font-weight: 800; letter-spacing: .08em; line-height: 1; white-space: nowrap; }
.mon-tag.fnt, .mon-tag.shadow, .mon-tag.pure { display: inline-block; }
.mon-tag.fnt { background: #ef3b4b; color: #fff; }
.mon-tag.shadow { background: #5b2a86; color: #e7c9ff; box-shadow: 0 0 calc(12 * var(--u)) rgba(155, 80, 255, .5); }
.mon-tag.pure { background: rgba(255, 255, 255, .14); color: #fff; }
.mon-tag:not(:empty) ~ .mon-ty, .mon-ty:has(~ .mon-tag:not(:empty)) { display: none; }
.ov[data-console="gbc"] .mon-ty, .ov[data-console="gc"] .mon-ty { display: none; }
.ov[data-console="gbc"] .mon { padding-right: calc(14 * var(--u)); column-gap: calc(10 * var(--u)); }
.ov[data-console="gbc"] .mon-l1 { flex-direction: column; align-items: flex-start; gap: calc(5 * var(--u)); }
.ov[data-console="gc"] .mon { padding-right: calc(14 * var(--u)); column-gap: calc(10 * var(--u)); }
.ov[data-console="ds"] .mon-lv { font-size: calc(15 * var(--u)); }
.ov[data-console="ds"] .mon-lv em { font-size: calc(19 * var(--u)); }

/* Card moments */
.mon.is-hit { animation: monhit .5s ease; }
.mon.is-hit::after { background: rgba(255, 64, 88, .32); animation: monflash .6s ease forwards; }
@keyframes monhit { 0%, 100% { translate: 0 0; } 20% { translate: calc(-7 * var(--u)) 0; } 40% { translate: calc(6 * var(--u)) 0; } 60% { translate: calc(-4 * var(--u)) 0; } 80% { translate: calc(2 * var(--u)) 0; } }
@keyframes monflash { 0% { opacity: 1; } 100% { opacity: 0; } }
.mon.is-up { animation: monup 1s var(--ease); }
@keyframes monup { 0% { box-shadow: 0 0 0 calc(1.5 * var(--u)) var(--ov-line); } 25% { box-shadow: 0 0 0 calc(3 * var(--u)) var(--ov-acc), 0 0 calc(40 * var(--u)) color-mix(in srgb, var(--ov-acc) 55%, transparent); } 100% { box-shadow: 0 0 0 calc(1.5 * var(--u)) var(--ov-line); } }
.mon.is-up .mon-lv { animation: lvpop .7s var(--ease); }
@keyframes lvpop { 30% { transform: scale(1.3); background: var(--ov-acc); color: #0b0d18; } }
.mon.is-heal::after { background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--mint) 35%, transparent) 50%, transparent 80%); background-size: 250% 100%; animation: heal .9s ease forwards; }
@keyframes heal { 0% { opacity: 1; background-position: 120% 0; } 100% { opacity: 0; background-position: -20% 0; } }
.mon.is-evo { animation: monup 1.6s var(--ease); }
.mon.is-evo .mon-sp img { animation: evoflash 1.3s ease; }
@keyframes evoflash { 0% { filter: none; transform: scale(1); } 30%, 60% { filter: brightness(0) invert(1) drop-shadow(0 0 calc(14 * var(--u)) #fff); transform: scale(1.12); } 100% { filter: none; transform: scale(1); } }
.mon.is-fnt .mon-sp img { filter: grayscale(1) brightness(.55); }
.mon.is-fnt .mon-n { color: var(--ov-mute); text-decoration: line-through; text-decoration-thickness: calc(2 * var(--u)); }

/* Toast (follows the main screen) */
.ov-toast {
  position: absolute; z-index: 5; left: calc(var(--tx) * var(--u)); top: calc(120 * var(--u));
  display: flex; align-items: center; gap: calc(12 * var(--u)); max-width: calc(760 * var(--u));
  padding: calc(9 * var(--u)) calc(24 * var(--u)) calc(9 * var(--u)) calc(9 * var(--u)); border-radius: 999px;
  background: rgba(8, 10, 18, .86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 0 0 calc(2 * var(--u)) var(--tone, var(--ov-acc)), 0 calc(14 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, .5), 0 0 calc(40 * var(--u)) color-mix(in srgb, var(--tone, var(--ov-acc)) 40%, transparent);
  font-size: calc(21 * var(--u)); font-weight: 750; white-space: nowrap; color: #fff;
  opacity: 0; transform: translate(-50%, calc(-150 * var(--u))) scale(.9);
  transition: left .85s var(--ov-ease), transform .55s cubic-bezier(.2, 1.4, .4, 1), opacity .3s ease;
}
.ov-toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.ov-toast[data-tone="hit"] { --tone: #ff5a6e; }
.ov-toast[data-tone="bad"] { --tone: #ef3b4b; }
.ov-toast[data-tone="gold"] { --tone: #ffd479; }
.ov-toast[data-tone="sky"] { --tone: #4fd1ff; }
.ov-toast[data-tone="violet"] { --tone: #c58bff; }
.ov-toast[data-tone="up"] { --tone: #3ee6a8; }
.ov-toast-ico { width: calc(40 * var(--u)); height: calc(40 * var(--u)); flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--tone, var(--ov-acc)); color: #0b0d18; font-size: calc(19 * var(--u)); font-weight: 800; }
.ov-toast-sp { width: calc(52 * var(--u)); height: calc(52 * var(--u)); flex: none; margin: calc(-8 * var(--u)) 0; object-fit: contain; image-rendering: pixelated; }
.ov-toast-ico[hidden], .ov-toast-sp[hidden] { display: none; }

/* Badges (or Shadow Pokémon counters on GameCube) */
.ov-badges { z-index: 3; display: flex; align-items: center; gap: calc(14 * var(--u)); padding: 0 calc(18 * var(--u)); }
.bdg-gems { display: flex; align-items: center; gap: calc(9 * var(--u)); }
.bdg-gems i { --g: #fff; position: relative; width: calc(27 * var(--u)); height: calc(27 * var(--u)); clip-path: polygon(50% 0, 100% 36%, 82% 100%, 18% 100%, 0 36%); background: rgba(255, 255, 255, .13); transition: background .4s, width .85s var(--ov-ease), height .85s var(--ov-ease); }
.bdg-gems i:nth-child(1) { --g: #ff7a7a; } .bdg-gems i:nth-child(2) { --g: #ffb84d; } .bdg-gems i:nth-child(3) { --g: #ffe066; } .bdg-gems i:nth-child(4) { --g: #7be08c; }
.bdg-gems i:nth-child(5) { --g: #4fd1ff; } .bdg-gems i:nth-child(6) { --g: #7f9cff; } .bdg-gems i:nth-child(7) { --g: #c58bff; } .bdg-gems i:nth-child(8) { --g: #ff8ad8; }
.bdg-gems i.on { background: linear-gradient(160deg, rgba(255, 255, 255, .7), transparent 50%), var(--g); }
.bdg-gems i.pop { animation: gempop .9s var(--ease); }
@keyframes gempop { 0% { transform: scale(.4) rotate(-30deg); filter: brightness(3); } 45% { transform: scale(1.5) rotate(8deg); filter: brightness(1.8); } 100% { transform: none; filter: none; } }
.bdg-n { font-size: calc(17 * var(--u)); font-weight: 700; color: var(--ov-mute); white-space: nowrap; }
.bdg-n b { color: var(--ov-ink); font-variant-numeric: tabular-nums; }
.bdg-shadow { display: none; align-items: baseline; gap: calc(8 * var(--u)); font-size: calc(16 * var(--u)); color: var(--ov-mute); font-weight: 650; white-space: nowrap; }
.bdg-shadow span { margin-right: calc(6 * var(--u)); color: var(--ov-acc2); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: calc(14 * var(--u)); }
.bdg-shadow b { font-size: calc(20 * var(--u)); color: var(--ov-ink); font-variant-numeric: tabular-nums; display: inline-block; }
.bdg-shadow small { font-size: inherit; margin-right: calc(8 * var(--u)); }
.bdg-shadow b.pop { animation: lvpop .7s var(--ease); }
.ov[data-console="gc"] .bdg-gems, .ov[data-console="gc"] .bdg-n { display: none; }
.ov[data-console="gc"] .bdg-shadow { display: flex; }
.ov[data-console="ds"] .ov-badges { padding: 0; justify-content: space-between; }
.ov[data-console="ds"] .bdg-gems { gap: calc(16 * var(--u)); }
.ov[data-console="ds"] .bdg-gems i { width: calc(44 * var(--u)); height: calc(44 * var(--u)); }
.ov[data-console="ds"] .bdg-n { font-size: calc(20 * var(--u)); }

/* Bottom bar */
.ov-bot { position: absolute; z-index: 2; left: calc(24 * var(--u)); right: calc(24 * var(--u)); top: calc(836 * var(--u)); height: calc(44 * var(--u)); display: flex; align-items: center; gap: calc(26 * var(--u)); padding: 0 calc(18 * var(--u)) 0 calc(var(--bp, 600) * var(--u)); border-radius: calc(12 * var(--u)); background: var(--ov-panel); box-shadow: 0 0 0 calc(1.5 * var(--u)) var(--ov-line); font-size: calc(16 * var(--u)); font-weight: 600; color: var(--ov-mute); white-space: nowrap; transition: padding-left .85s var(--ov-ease); }
.ov-bot b { color: var(--ov-ink); font-variant-numeric: tabular-nums; }
.ov-bot .i { width: calc(19 * var(--u)); height: calc(19 * var(--u)); color: var(--ov-acc); stroke-width: 2.2; }
.ov-dex, .ov-alive { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); }
.ov-dex .sep { opacity: .5; }
.ov[data-console="gc"] .ov-dex { display: none; }
.ov-sync { margin-left: auto; display: inline-flex; align-items: center; gap: calc(9 * var(--u)); font-size: calc(14.5 * var(--u)); }
.ov-sync i { position: relative; width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: 50%; background: var(--ov-acc); }
.ov-sync.ping i { animation: syncping .9s ease-out; }
@keyframes syncping { 0% { box-shadow: 0 0 0 0 var(--ov-acc); } 100% { box-shadow: 0 0 0 calc(14 * var(--u)) transparent; } }

/* Content swap while the layout morphs */
.mon > *, .ov-s1 > img, .ov-s2 > img, .ov-chips, #ovGame, .ov-badges > *, .ov-bot > * { transition-property: opacity, filter; transition-duration: .28s; }
.ov.is-swapping .mon > *, .ov.is-swapping .ov-s1 > img, .ov.is-swapping .ov-s2 > img, .ov.is-swapping .ov-chips, .ov.is-swapping #ovGame, .ov.is-swapping .ov-badges > *, .ov.is-swapping .ov-bot > * { opacity: 0; filter: blur(calc(6 * var(--u))); }
.ov-s1 > img, .ov-s2 > img { transition-property: opacity, filter; }

/* Particles */
.ov-burst { position: absolute; z-index: 6; width: 0; height: 0; pointer-events: none; }
.ov-burst i { position: absolute; left: 0; top: 0; border-radius: 2px; background: var(--c); box-shadow: 0 0 8px var(--c); animation: burst .95s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes burst { from { transform: translate(-50%, -50%) rotate(0) scale(1); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r)) scale(.3); opacity: 0; } }

/* Type colors */
.t-normal { --t: #9a9a72; } .t-fire { --t: #e8772a; } .t-water { --t: #4f7fe6; } .t-electric { --t: #d9b414; } .t-grass { --t: #5fae3a; }
.t-ice { --t: #59bdb8; } .t-fighting { --t: #b82b25; } .t-poison { --t: #973a95; } .t-ground { --t: #c9a246; } .t-flying { --t: #8b72e0; }
.t-psychic { --t: #ee4c7d; } .t-bug { --t: #92a51a; } .t-rock { --t: #a6922f; } .t-dark { --t: #5d4a3c; }

/* ---------- Memory feed ---------- */
.sx-feed { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; border-radius: 14px; background: rgba(3, 4, 9, .72); border: 1px solid var(--sx-line); }
.sx-feed-h { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--sx-line); font-size: 12px; }
.sx-feed-h b { font-weight: 600; font-size: 13px; color: #fff; white-space: nowrap; }
.sx-feed-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--con); box-shadow: 0 0 10px var(--con); animation: blinkdot 1.4s ease-in-out infinite; }
.sx-feed-emu { margin-left: auto; min-width: 0; color: var(--sx-dim); font: 500 11px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-feed-list { list-style: none; margin: 0; padding: 8px 0; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; font: 500 11.5px/1.45 var(--mono); -webkit-mask-image: linear-gradient(180deg, transparent, #000 35%); mask-image: linear-gradient(180deg, transparent, #000 35%); }
.sx-feed-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; padding: 4px 14px; color: var(--sx-mute); animation: feedin .45s var(--ease); }
.sx-feed-list time { color: var(--sx-dim); font-variant-numeric: tabular-nums; }
.sx-feed-list code { color: var(--con); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-feed-list .v { grid-column: 2; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-feed-list .v s { color: var(--sx-dim); text-decoration: none; }
.sx-feed-list .v b { font-weight: 600; color: #fff; }
.sx-feed-list .v .ok { margin-left: 6px; color: var(--mint); font-size: 10.5px; }
.sx-feed-list li.sep { display: block; padding: 8px 14px 6px; color: var(--sx-dim); font-size: 10.5px; letter-spacing: .04em; }
.sx-feed-list li.sep span { color: #fff; }
.sx-feed-list li:last-child { background: linear-gradient(90deg, color-mix(in srgb, var(--con) 14%, transparent), transparent 80%); }
@keyframes feedin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sx-feed-f { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--sx-line); font-size: 11px; color: var(--sx-dim); white-space: nowrap; overflow: hidden; }
.sx-feed-f .i { width: 12px; height: 12px; flex: none; color: var(--con); }

/* ==========================================================================
   Shared section bits
   ========================================================================== */
.sx-section { position: relative; padding: 88px 0; }
.sx-head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.sx-head.left { text-align: left; margin-left: 0; }
.sx-head.reveal { filter: blur(6px); transition: opacity .8s var(--ease) var(--d, 0ms), transform .8s var(--ease) var(--d, 0ms), filter .8s var(--ease) var(--d, 0ms); }
.sx-head.reveal.is-in { filter: none; }
.sx-kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--coral-300); }
.sx-kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 12px var(--coral); }
.sx-head h2 { font-size: clamp(2.2rem, 4.8vw, 3.7rem); letter-spacing: -0.05em; line-height: 1.02; color: #fff; }
.sx-lede { margin-top: 18px; font-size: 1.12rem; line-height: 1.6; color: var(--sx-mute); }
.sx-lede .link { color: var(--coral-300); }
.sx-lede .link:hover { color: #fff; }
.sx-fine { margin-top: 18px; font-size: 13px; text-align: center; color: var(--sx-dim); }
.is-off *, .is-off *::before, .is-off *::after { animation-play-state: paused !important; }

/* ==========================================================================
   The old way
   ========================================================================== */
.sx-chores-sec { padding-top: 80px; }
.sx-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.sx-mini-stats { display: flex; flex-wrap: wrap; gap: 20px 40px; margin: 36px 0 0; }
.sx-mini-stats div { min-width: 0; }
.sx-mini-stats dt { font-size: 13px; color: var(--sx-dim); }
.sx-mini-stats dd { margin: 4px 0 0; font-size: 44px; font-weight: 650; letter-spacing: -0.05em; line-height: 1; color: #fff; }
.chores { position: relative; padding: 24px; border-radius: 26px; background: linear-gradient(180deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .02)); border: 1px solid var(--sx-line-2); box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .9); }
.chores-h { display: flex; align-items: center; gap: 14px; padding: 2px 4px 18px; border-bottom: 1px dashed var(--sx-line-2); }
.chores-h img { width: 60px; height: 60px; flex: none; padding: 2px; border-radius: 16px; background: rgba(62, 230, 168, .12); image-rendering: pixelated; }
.chores-h span { display: block; font-size: 13px; font-weight: 600; color: var(--mint); }
.chores-h b { display: block; margin-top: 2px; font-size: 17px; font-weight: 600; color: #fff; }
.chores-list { list-style: none; margin: 12px 0 14px; padding: 0; display: grid; gap: 2px; }
.chores-list li { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; font-size: 15.5px; color: #e3e5f1; transition: color .4s, background .4s; transition-delay: calc(var(--n) * 240ms + 250ms); }
.chores-list li::before { content: ""; position: absolute; left: 44px; right: 72px; top: 50%; height: 1.5px; background: var(--coral-300); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease); transition-delay: inherit; }
.chores-list .ck { position: relative; width: 20px; height: 20px; flex: none; border-radius: 6px; border: 1.5px solid rgba(255, 255, 255, .25); transition: background .3s, border-color .3s; transition-delay: inherit; }
.chores-list .ck::after { content: ""; position: absolute; left: 5.5px; top: 1.5px; width: 5px; height: 10px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .3s var(--ease); transition-delay: inherit; }
.chores-list u { margin-left: auto; padding: 5px 8px; border-radius: 6px; background: rgba(62, 230, 168, .14); font: 600 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--mint); opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .3s var(--ease); transition-delay: inherit; }
.chores.is-play li { color: var(--sx-dim); }
.chores.is-play li::before { transform: scaleX(1); }
.chores.is-play .ck { background: var(--mint); border-color: var(--mint); }
.chores.is-play .ck::after { transform: rotate(45deg) scale(1); }
.chores.is-play u { opacity: 1; transform: none; }
.chores-f { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 16px; background: rgba(255, 114, 87, .08); border: 1px solid rgba(255, 114, 87, .2); opacity: .45; transition: opacity .5s ease, background .5s ease, border-color .5s ease, box-shadow .5s ease; }
.chores.is-play .chores-f { opacity: 1; background: rgba(255, 114, 87, .14); border-color: rgba(255, 114, 87, .45); box-shadow: 0 20px 50px -24px rgba(255, 114, 87, .6); transition-delay: 2.1s; }
.chores-f .i { width: 24px; height: 24px; flex: none; padding: 4px; border-radius: 50%; background: var(--coral); color: var(--ink); stroke-width: 3; }
.chores-f p { font-size: 15px; color: #f3dcd6; }
.chores-f b { color: #fff; }

/* ==========================================================================
   Bento: what updates
   ========================================================================== */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(260px, auto); gap: 16px;
  grid-template-areas: "party party evo badges" "party party loc money" "alerts dex nuz brand"; }
.bx-party { grid-area: party; } .bx-evo { grid-area: evo; } .bx-badges { grid-area: badges; } .bx-loc { grid-area: loc; } .bx-money { grid-area: money; }
.bx-alerts { grid-area: alerts; } .bx-dex { grid-area: dex; } .bx-nuz { grid-area: nuz; } .bx-brand { grid-area: brand; }
.bx { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 22px; border-radius: 22px; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018)); border: 1px solid var(--sx-line); transition: border-color .3s, box-shadow .3s; }
.bx:hover { border-color: var(--sx-line-2); box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .9); }
.bx-viz { position: relative; flex: 1; display: grid; place-items: center; min-height: 128px; }
.bx-copy { position: relative; margin-top: 18px; }
.bx-ico { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-bottom: 12px; border-radius: 10px; background: rgba(255, 114, 87, .12); border: 1px solid rgba(255, 114, 87, .25); color: var(--coral-300); }
.bx-ico .i { width: 17px; height: 17px; }
.bx h3 { font-size: 17px; letter-spacing: -0.02em; color: #fff; }
.bx p { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--sx-mute); }
.bx.spot::after { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 114, 87, .09), transparent 60%); }

/* Party & HP */
.bx-party .bx-copy { max-width: 420px; }
.pv { width: 100%; display: grid; gap: 12px; align-content: center; place-items: stretch; padding: 6px 0; }
.pv-row { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 16px; padding: 12px 18px 12px 10px; border-radius: 18px; background: rgba(62, 230, 168, .05); border: 1px solid rgba(62, 230, 168, .14); transition: border-color .3s, background .3s; }
.pv-row.is-hit { animation: monhit .5s ease; border-color: rgba(255, 90, 110, .5); }
.pv-row img { width: 72px; height: 72px; image-rendering: pixelated; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .45)); }
.pv-l1 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pv-l1 b { font-size: 16px; font-weight: 650; color: #fff; }
.pv-l1 span { font: 500 12.5px var(--mono); color: var(--sx-mute); }
.pv-bar { position: relative; height: 10px; margin: 9px 0 7px; border-radius: 99px; overflow: hidden; background: rgba(0, 0, 0, .5); }
.pv-bar s, .pv-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--hp, 100%); border-radius: inherit; }
.pv-bar s { background: rgba(255, 255, 255, .55); transition: width .8s ease .4s; }
.pv-bar i { background: linear-gradient(180deg, #7dffb0, #2fd27a); transition: width .5s var(--ease), background .4s; }
.pv-bar.mid i { background: linear-gradient(180deg, #ffe17a, #f2b51f); }
.pv-bar.low i { background: linear-gradient(180deg, #ff8a8a, #ef3b4b); }
.pv-l3 { display: flex; justify-content: space-between; align-items: center; font: 500 12.5px var(--mono); color: var(--sx-mute); font-variant-numeric: tabular-nums; }
.pv-st { padding: 3px 7px; border-radius: 5px; font: 750 10.5px/1 var(--font); letter-spacing: .08em; opacity: 0; transition: opacity .3s; }
.pv-st.on { opacity: 1; }
.pv-st.psn { background: #973a95; color: #fff; } .pv-st.par { background: #d9b414; color: var(--ink); } .pv-st.slp { background: #7c829c; color: #fff; }
.pv-dmg { position: absolute; right: 20px; top: 2px; font: 750 19px var(--font); font-style: normal; color: #ff6b7a; opacity: 0; pointer-events: none; }
.pv-dmg.heal { color: var(--mint); }
.pv-dmg.show { animation: dmg 1.1s var(--ease) forwards; }
@keyframes dmg { 0% { opacity: 0; transform: translateY(10px) scale(.7); } 20% { opacity: 1; transform: translateY(0) scale(1.15); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-16px); } }

/* Evolutions */
.ev { width: 100%; }
.ev-ring { position: absolute; left: 50%; top: 44%; width: 136px; height: 136px; translate: -50% -50%; border-radius: 50%; border: 1.5px dashed rgba(255, 212, 121, .35); animation: spin 14s linear infinite; }
.ev img { position: absolute; left: 50%; top: 44%; width: 112px; height: 112px; translate: -50% -50%; image-rendering: pixelated; opacity: 0; animation: evo3 7.5s infinite; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); }
.ev .ev-b { animation-delay: 2.5s; } .ev .ev-c { animation-delay: 5s; }
@keyframes evo3 {
  0% { opacity: 0; filter: brightness(0) invert(1); transform: scale(.8); }
  4% { opacity: 1; filter: brightness(0) invert(1) drop-shadow(0 0 16px #fff); transform: scale(1.1); }
  11% { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); transform: scale(1); }
  29% { opacity: 1; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); transform: scale(1); }
  33% { opacity: 1; filter: brightness(0) invert(1) drop-shadow(0 0 16px #fff); transform: scale(1.06); }
  35%, 100% { opacity: 0; filter: brightness(0) invert(1); }
}
.ev-flash { position: absolute; left: 50%; top: 44%; width: 170px; height: 170px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .85), rgba(255, 212, 121, .3) 55%, transparent); opacity: 0; animation: evoflash2 2.5s ease-out infinite; }
@keyframes evoflash2 { 0% { opacity: .9; transform: scale(.3); } 25% { opacity: 0; transform: scale(1.3); } 100% { opacity: 0; } }
.ev-cap { position: absolute; left: 0; right: 0; bottom: -4px; height: 20px; text-align: center; font: 500 13px var(--mono); color: var(--sx-mute); }
.ev-cap span { position: absolute; inset: 0; opacity: 0; animation: evocap 7.5s infinite; }
.ev-cap .ev-cb { animation-delay: 2.5s; } .ev-cap .ev-cc { animation-delay: 5s; }
@keyframes evocap { 0%, 3% { opacity: 0; transform: translateY(5px); } 7%, 29% { opacity: 1; transform: none; } 33%, 100% { opacity: 0; } }

/* Badges */
.bd { align-content: center; gap: 16px; }
.bd-gems { display: grid; grid-template-columns: repeat(4, 40px); gap: 14px 16px; }
.bd-gems i { --g: #fff; width: 40px; height: 40px; clip-path: polygon(50% 0, 100% 36%, 82% 100%, 18% 100%, 0 36%); background: rgba(255, 255, 255, .08); transition: background .4s; }
.bd-gems i:nth-child(1) { --g: #ff7a7a; } .bd-gems i:nth-child(2) { --g: #ffb84d; } .bd-gems i:nth-child(3) { --g: #ffe066; } .bd-gems i:nth-child(4) { --g: #7be08c; }
.bd-gems i:nth-child(5) { --g: #4fd1ff; } .bd-gems i:nth-child(6) { --g: #7f9cff; } .bd-gems i:nth-child(7) { --g: #c58bff; } .bd-gems i:nth-child(8) { --g: #ff8ad8; }
.bd-gems i.on { background: linear-gradient(160deg, rgba(255, 255, 255, .7), transparent 50%), var(--g); }
.bd-gems i.pop { animation: gempop .8s var(--ease); }
.bd-n { text-align: center; font-size: 13px; color: var(--sx-mute); }
.bd-count { margin-right: 4px; font: 650 30px var(--font); letter-spacing: -0.04em; color: #fff; font-variant-numeric: tabular-nums; }

/* Location */
.lc { align-content: center; gap: 12px; }
.lc-pin { width: 36px; height: 36px; color: var(--coral); stroke-width: 1.8; animation: pinbob 2.4s ease-in-out infinite; filter: drop-shadow(0 6px 12px rgba(255, 114, 87, .5)); }
@keyframes pinbob { 50% { transform: translateY(-6px); } }
.lc-win { height: 46px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); }
.lc-list { list-style: none; margin: 0; padding: 0; animation: lcroll 10s cubic-bezier(.7, 0, .2, 1) infinite; }
.lc-list li { height: 46px; display: grid; place-items: center; font-size: 23px; font-weight: 650; letter-spacing: -0.03em; color: #fff; white-space: nowrap; }
@keyframes lcroll { 0%, 20% { transform: translateY(0); } 25%, 45% { transform: translateY(-46px); } 50%, 70% { transform: translateY(-92px); } 75%, 95% { transform: translateY(-138px); } 100% { transform: translateY(-184px); } }

/* Money & time */
.mt { justify-items: start; align-content: center; gap: 14px; }
.mt-row { position: relative; display: flex; align-items: center; gap: 12px; }
.mt-row .i { width: 22px; height: 22px; color: var(--gold); }
.mt-row b { font: 600 28px var(--mono); letter-spacing: -0.04em; color: #fff; font-variant-numeric: tabular-nums; }
.mt-row em { position: absolute; left: 34px; top: -18px; font: 600 13px var(--mono); font-style: normal; color: var(--mint); opacity: 0; }
.mt-row em.show { animation: dmg 1.4s var(--ease) forwards; }

/* Alerts */
.al { width: 100%; display: grid; gap: 9px; align-content: center; place-items: stretch; }
.al-t { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 7px 14px 7px 7px; border-radius: 999px; background: rgba(8, 10, 18, .85); border: 1.5px solid var(--tone, var(--gold)); box-shadow: 0 0 18px color-mix(in srgb, var(--tone, var(--gold)) 22%, transparent); font-size: 13px; font-weight: 650; color: #fff; white-space: nowrap; opacity: 0; animation: alin 7.2s var(--ease) infinite; animation-delay: calc(var(--n) * .9s); }
.al-t span:last-child { overflow: hidden; text-overflow: ellipsis; }
.al-t:nth-child(2) { --tone: var(--sky); } .al-t:nth-child(3) { --tone: var(--mint); }
.al-t img { width: 34px; height: 34px; flex: none; margin: -6px -2px; image-rendering: pixelated; }
.al-i { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--tone, var(--gold)); color: var(--ink); font-size: 13px; }
@keyframes alin { 0% { opacity: 0; transform: translateY(14px) scale(.95); } 7%, 72% { opacity: 1; transform: none; } 82%, 100% { opacity: 0; transform: translateY(-8px); } }

/* Pokédex */
.dx { grid-auto-flow: column; justify-content: center; align-items: center; gap: 22px; }
.dx-ring { --p: .32; width: 124px; height: 124px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(closest-side, #10121f 79%, transparent 80% 100%), conic-gradient(var(--lilac) calc(var(--p) * 1turn), rgba(255, 255, 255, .08) 0); transition: --p 1s var(--ease); }
.dx-ring b { font: 650 32px/1 var(--font); letter-spacing: -0.04em; color: #fff; font-variant-numeric: tabular-nums; }
.dx-ring small { margin-top: 4px; font-size: 11.5px; color: var(--sx-mute); }
.dx dl { margin: 0; display: grid; gap: 12px; }
.dx dt { font-size: 12px; color: var(--sx-dim); }
.dx dd { margin: 0; font: 600 21px var(--mono); color: #fff; font-variant-numeric: tabular-nums; }

/* Nuzlocke */
.nz { width: 100%; display: grid; gap: 12px; align-content: center; place-items: stretch; }
.nz-card { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 14px 10px 8px; border-radius: 16px; background: rgba(255, 255, 255, .045); border: 1px solid var(--sx-line); }
.nz-card img { width: 52px; height: 52px; image-rendering: pixelated; animation: nzgray 6s infinite; }
.nz-card b { font-size: 14.5px; font-weight: 650; color: #fff; }
.nz-bar { display: block; height: 8px; margin-top: 8px; border-radius: 9px; overflow: hidden; background: rgba(0, 0, 0, .5); }
.nz-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(180deg, #ff8a8a, #ef3b4b); animation: nzhp 6s infinite; }
@keyframes nzhp { 0%, 12% { width: 22%; } 30%, 100% { width: 0; } }
@keyframes nzgray { 0%, 30% { filter: none; } 36%, 100% { filter: grayscale(1) brightness(.55); } }
.nz-stamp { position: absolute; right: 12px; top: 50%; translate: 0 -50%; rotate: -8deg; padding: 3px 7px; border: 2px solid #ff6b7a; border-radius: 6px; font: 800 11.5px var(--font); letter-spacing: .12em; text-transform: uppercase; color: #ff6b7a; opacity: 0; animation: nzstamp 6s infinite; }
@keyframes nzstamp { 0%, 33% { opacity: 0; scale: 1.7; } 39%, 92% { opacity: 1; scale: 1; } 100% { opacity: 0; } }
.nz-yard { display: flex; align-items: center; gap: 2px; padding: 6px 12px 6px 6px; border-radius: 14px; background: rgba(0, 0, 0, .3); border: 1px solid var(--sx-line); }
.nz-yard img { width: 38px; height: 38px; image-rendering: pixelated; filter: grayscale(1) brightness(.6); }
.nz-yard .nz-new { opacity: 0; animation: nznew 6s infinite; }
@keyframes nznew { 0%, 44% { opacity: 0; transform: translateY(-10px); } 52%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.nz-count { margin-left: auto; font-size: 12.5px; color: var(--sx-mute); white-space: nowrap; }
.nz-num { display: inline-grid; margin-left: 4px; }
.nz-num b { grid-area: 1 / 1; font: 650 17px var(--mono); color: #fff; }
.nz-a { animation: nza 6s infinite; } .nz-b { opacity: 0; color: #ff6b7a !important; animation: nzb 6s infinite; }
@keyframes nza { 0%, 48% { opacity: 1; } 52%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes nzb { 0%, 48% { opacity: 0; transform: translateY(6px); } 54%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Your brand */
.br { gap: 18px; align-content: center; }
.br-mini { --acc: #ff7257; position: relative; width: 210px; max-width: 100%; aspect-ratio: 16 / 9; display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 10px 1fr 8px; gap: 6px; padding: 8px; border-radius: 12px; background: color-mix(in srgb, var(--acc) 12%, #0d0f1a); border: 1px solid color-mix(in srgb, var(--acc) 45%, transparent); box-shadow: 0 20px 40px -20px color-mix(in srgb, var(--acc) 60%, transparent); animation: brand 8s infinite; }
.br-top { grid-column: 1 / -1; display: flex; gap: 4px; }
.br-top i { flex: 0 0 26%; border-radius: 3px; background: var(--acc); }
.br-top i:last-child { flex-basis: 12%; margin-left: auto; opacity: .55; }
.br-game { border-radius: 6px; background: linear-gradient(135deg, #2a3350, #151a2c); box-shadow: 0 0 0 1.5px var(--acc); }
.br-side { display: grid; gap: 4px; }
.br-side i { border-radius: 4px; background: color-mix(in srgb, var(--acc) 32%, #1a1e30); }
.br-bot { grid-column: 1 / -1; border-radius: 3px; background: color-mix(in srgb, var(--acc) 26%, #1a1e30); }
@keyframes brand { 0%, 21% { --acc: #ff7257; } 25%, 46% { --acc: #3ee6a8; } 50%, 71% { --acc: #b49cff; } 75%, 96% { --acc: #ffd479; } 100% { --acc: #ff7257; } }
.br-sw { display: flex; justify-content: center; gap: 10px; }
.br-sw i { width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 2px transparent; animation: swon 8s infinite; }
.br-sw i:nth-child(1) { background: #ff7257; } .br-sw i:nth-child(2) { background: #3ee6a8; animation-delay: 2s; } .br-sw i:nth-child(3) { background: #b49cff; animation-delay: 4s; } .br-sw i:nth-child(4) { background: #ffd479; animation-delay: 6s; }
@keyframes swon { 0%, 22% { box-shadow: 0 0 0 2px var(--sx-bg), 0 0 0 4px #fff; transform: scale(1.1); } 25%, 100% { box-shadow: 0 0 0 2px transparent; transform: none; } }

/* ==========================================================================
   How it works: pipeline + steps
   ========================================================================== */
.pipe { display: flex; align-items: center; padding: 34px 30px; border-radius: 26px; background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)); border: 1px solid var(--sx-line); }
.pipe-node { flex: none; width: 168px; display: grid; justify-items: center; gap: 3px; text-align: center; }
.pn-ico { width: 66px; height: 66px; margin-bottom: 12px; display: grid; place-items: center; border-radius: 20px; background: rgba(255, 255, 255, .06); border: 1px solid var(--sx-line-2); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .7); }
.pn-ico .i { width: 30px; height: 30px; color: #fff; stroke-width: 1.5; }
.pn-ico img { width: 42px; height: 42px; border-radius: 50%; }
.pipe-node.is-core .pn-ico { background: radial-gradient(circle at 50% 30%, rgba(255, 114, 87, .38), rgba(255, 114, 87, .08)); border-color: rgba(255, 114, 87, .5); animation: corepulse 2.6s ease-in-out infinite; }
@keyframes corepulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 114, 87, .35), 0 0 30px rgba(255, 114, 87, .25); } 50% { box-shadow: 0 0 0 10px rgba(255, 114, 87, 0), 0 0 50px rgba(255, 114, 87, .45); } }
.pipe-node b { font-size: 15px; font-weight: 600; color: #fff; }
.pipe-node small { font-size: 12.5px; color: var(--sx-mute); }
.pipe-link { position: relative; flex: 1; min-width: 40px; height: 2px; margin: 0 2px 50px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .2) 0 6px, transparent 6px 12px); }
.pipe-link i { position: absolute; left: 0; top: 50%; translate: -50% -50%; padding: 3px 8px; border-radius: 999px; background: var(--coral); color: var(--ink); font: 650 10.5px/1.2 var(--mono); font-style: normal; white-space: nowrap; box-shadow: 0 0 16px rgba(255, 114, 87, .6); opacity: 0; animation: packet 3s linear infinite; animation-delay: calc(var(--n) * 1s); }
@keyframes packet { 0% { left: 0; opacity: 0; } 12%, 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

.steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.step { position: relative; padding: 18px 18px 26px; border-radius: 22px; background: rgba(255, 255, 255, .03); border: 1px solid var(--sx-line); }
.step-viz { position: relative; height: 158px; margin-bottom: 22px; display: grid; place-items: center; overflow: hidden; border-radius: 14px; background: radial-gradient(ellipse 80% 90% at 50% 120%, rgba(255, 114, 87, .14), transparent 70%), rgba(0, 0, 0, .28); border: 1px solid var(--sx-line); }
.step-n { padding: 0 6px; font: 600 12px var(--mono); letter-spacing: .08em; color: var(--coral-300); }
.step h3 { margin-top: 6px; padding: 0 6px; font-size: 18.5px; letter-spacing: -0.02em; color: #fff; }
.step p { margin-top: 8px; padding: 0 6px; font-size: 14.5px; color: var(--sx-mute); }
.brief { width: 84%; display: grid; gap: 6px; }
.brief span { display: flex; justify-content: space-between; gap: 10px; padding: 7px 11px; border-radius: 9px; background: rgba(255, 255, 255, .05); border: 1px solid var(--sx-line); font-size: 12.5px; color: #fff; white-space: nowrap; opacity: 0; animation: briefin 7s var(--ease) infinite; }
.brief span:nth-child(2) { animation-delay: .35s; } .brief span:nth-child(3) { animation-delay: .7s; } .brief span:nth-child(4) { animation-delay: 1.05s; }
.brief i { font-style: normal; color: var(--sx-dim); }
@keyframes briefin { 0% { opacity: 0; transform: translateY(8px); } 6%, 85% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; } }
.build { position: relative; width: 78%; aspect-ratio: 16 / 9; border-radius: 8px; border: 1px dashed rgba(255, 255, 255, .18); }
.build span { position: absolute; border-radius: 5px; background: rgba(255, 114, 87, .16); border: 1px solid rgba(255, 114, 87, .55); opacity: 0; animation: buildin 7s var(--ease) infinite; }
.build-a { left: 4%; top: 6%; width: 92%; height: 11%; }
.build-b { left: 4%; top: 23%; width: 60%; height: 70%; animation-delay: .5s !important; }
.build-c { left: 67%; top: 23%; width: 29%; height: 32%; animation-delay: 1s !important; }
.build-d { left: 67%; top: 60%; width: 29%; height: 33%; animation-delay: 1.5s !important; }
@keyframes buildin { 0% { opacity: 0; transform: scale(.6); } 8%, 85% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; } }
.build-cursor { width: 16px; height: 18px; border: 0 !important; border-radius: 0 !important; background: #fff !important; clip-path: polygon(0 0, 0 100%, 30% 74%, 52% 100%, 66% 92%, 44% 66%, 82% 66%); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); opacity: 1 !important; animation: cursor 7s ease-in-out infinite !important; }
@keyframes cursor { 0% { left: 90%; top: 90%; } 12% { left: 50%; top: 10%; } 22% { left: 30%; top: 55%; } 34% { left: 80%; top: 35%; } 46% { left: 82%; top: 75%; } 70%, 100% { left: 90%; top: 90%; } }
.obs { width: 86%; overflow: hidden; border-radius: 10px; background: #1b1d29; border: 1px solid rgba(255, 255, 255, .1); font-size: 12.5px; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .8); }
.obs-h { padding: 7px 12px; font-size: 11px; font-weight: 600; color: var(--sx-mute); background: #232637; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.obs-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; color: #c9ccd9; border-bottom: 1px solid rgba(255, 255, 255, .05); white-space: nowrap; }
.obs-row:last-child { border-bottom: 0; }
.obs-row .i { width: 14px; height: 14px; }
.obs-eye { margin-left: auto; opacity: .5; }
.obs-row.is-on { color: #fff; background: rgba(255, 114, 87, .16); box-shadow: inset 2px 0 0 var(--coral); animation: obsglow 3s ease-in-out infinite; }
@keyframes obsglow { 50% { background: rgba(255, 114, 87, .28); } }

/* ==========================================================================
   Gallery marquee
   ========================================================================== */
.sx-gallery .sx-head { margin-bottom: 48px; }
.marquee { display: grid; gap: 18px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.mq-row { overflow: hidden; }
.mq-track { display: flex; gap: 18px; width: max-content; padding-right: 18px; animation: mq 70s linear infinite; }
.mq-rev .mq-track { animation-direction: reverse; animation-duration: 80s; }
.marquee:hover .mq-track { animation-play-state: paused; }
.mq-track figure { position: relative; flex: none; width: 480px; margin: 0; overflow: hidden; border-radius: 16px; background: #000; border: 1px solid var(--sx-line-2); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); transition: transform .45s var(--ease), border-color .3s; }
.mq-track figure:hover { transform: translateY(-4px) scale(1.02); border-color: rgba(255, 255, 255, .3); }
.mq-track img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.mq-track figcaption { position: absolute; left: 12px; bottom: 12px; padding: 6px 10px; border-radius: 8px; background: rgba(7, 8, 15, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 12.5px; font-weight: 600; color: #fff; }
@keyframes mq { to { transform: translateX(-50%); } }

/* ==========================================================================
   Pricing
   ========================================================================== */
.tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; max-width: 1000px; margin: 0 auto; }
.tier { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 26px; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); border: 1px solid var(--sx-line-2); transition: transform .45s var(--ease), box-shadow .45s; }
.tier:hover { transform: translateY(-4px); box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .9); }
.tier.spot::after { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 114, 87, .08), transparent 60%); }
.tier-art { position: relative; height: 210px; overflow: hidden; border-bottom: 1px solid var(--sx-line); background: radial-gradient(ellipse 60% 75% at 50% 100%, rgba(255, 255, 255, .09), transparent 70%), repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 14px); }
.tier-hot .tier-art { background: radial-gradient(ellipse 60% 75% at 50% 100%, rgba(255, 114, 87, .22), transparent 70%), repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 14px); }
.tier-soon .tier-art { background: radial-gradient(ellipse 60% 75% at 50% 100%, rgba(197, 139, 255, .2), transparent 70%), repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 14px); }
.tier-body { display: flex; flex-direction: column; flex: 1; padding: 26px 26px 22px; }
.tier-plat { font-size: 12.5px; font-weight: 500; color: var(--sx-dim); }
.tier h3 { margin-top: 8px; font-size: 25px; letter-spacing: -0.03em; color: #fff; }
.tier-price { display: flex; align-items: flex-start; gap: 3px; margin: 18px 0 24px; color: #fff; }
.tier-price .cur { margin-top: 9px; font-size: 26px; font-weight: 600; }
.tier-price b { font-size: 72px; font-weight: 700; letter-spacing: -0.065em; line-height: .9; font-variant-numeric: tabular-nums; }
.tier-price .per { margin: 10px 0 0 10px; font-size: 12.5px; line-height: 1.35; color: var(--sx-mute); }
.tier-price .tbd { font-size: 60px; background: linear-gradient(90deg, #d9b8ff, #ff9a4d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tier-list { flex: 1; list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 11px; align-content: start; }
.tier-list li { position: relative; padding-left: 29px; font-size: 14.5px; color: #dadded; }
.tier-list li::before { content: ""; position: absolute; left: 0; top: 2px; width: 19px; height: 19px; border-radius: 50%; background: rgba(62, 230, 168, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233ee6a8' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.tier-soon .tier-list li::before { background-color: rgba(197, 139, 255, .14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d9b8ff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.tier .btn .i { width: 17px; height: 17px; }
.tier-foot { margin-top: 14px; font-size: 12.5px; text-align: center; color: var(--sx-dim); }
.tier-flag { position: absolute; z-index: 3; top: 16px; right: 16px; padding: 5px 11px; border-radius: 999px; background: var(--coral); color: var(--ink); font-size: 12px; font-weight: 700; box-shadow: 0 8px 20px -8px rgba(255, 114, 87, .8); }
.tier-flag.soon { background: rgba(197, 139, 255, .16); color: #e2c9ff; border: 1px solid rgba(197, 139, 255, .45); box-shadow: none; }
.tier-hot { border-color: transparent; box-shadow: 0 50px 110px -60px rgba(255, 114, 87, .7); }
.tier-hot::before { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; padding: 1px; border-radius: inherit; background: conic-gradient(from var(--ang), rgba(255, 114, 87, .35), rgba(255, 114, 87, .35) 55%, #ff7257 70%, #ffd479 80%, rgba(255, 114, 87, .35) 92%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: angspin 5s linear infinite; }
@keyframes angspin { to { --ang: 360deg; } }

/* Cartridges */
.cart, .disc { position: absolute; left: 50%; top: 50%; translate: -50% -50%; transition: transform .6s var(--ease); }
.cart { box-shadow: 0 26px 40px -18px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 0 rgba(0, 0, 0, .25); }
.cart-label { position: absolute; overflow: hidden; border-radius: 4px; background: #111; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4); }
.cart-label img { width: 100%; height: 100%; object-fit: cover; }
.cart-label::after { content: ""; position: absolute; inset: 0; background: linear-gradient(125deg, rgba(255, 255, 255, .38), transparent 42%); }
.cart-ridge { position: absolute; left: 14%; right: 14%; top: 6%; height: 13%; border-radius: 2px; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .2) 0 2px, transparent 2px 5px); }
.cart-gb { width: 114px; height: 130px; border-radius: 6px; background: linear-gradient(160deg, #e2e0ea, #a8a6b6); clip-path: polygon(0 0, 87% 0, 100% 10%, 100% 100%, 0 100%); transform: translate(-56px, 4px) rotate(-11deg); }
.cart-gb .cart-label { left: 11%; right: 11%; top: 27%; bottom: 13%; }
.cart-gba { width: 156px; height: 98px; border-radius: 18px 18px 8px 8px; background: linear-gradient(170deg, #5e5f73, #30313d); transform: translate(46px, 22px) rotate(7deg); }
.cart-gba .cart-label { left: 9%; right: 9%; top: 13%; bottom: 22%; }
.cart-gba::after { content: ""; position: absolute; left: 32%; right: 32%; bottom: 8%; height: 4px; border-radius: 4px; background: rgba(0, 0, 0, .35); }
.cart-ds, .cart-3ds { width: 96px; height: 108px; border-radius: 6px; clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%, 0 12%); }
.cart-ds { background: linear-gradient(160deg, #42465a, #1e2029); transform: translate(42px, 14px) rotate(8deg); }
.cart-3ds { background: linear-gradient(160deg, #f0f0f6, #b6b7c6); transform: translate(-48px, 2px) rotate(-10deg); }
.cart-ds .cart-label, .cart-3ds .cart-label { left: 11%; right: 11%; top: 25%; bottom: 10%; }
.cart-sw { width: 86px; height: 106px; border-radius: 9px; background: linear-gradient(160deg, #3d3f4d, #1d1e27); transform: translate(52px, 16px) rotate(8deg); }
.cart-sw::before { content: ""; position: absolute; left: 50%; top: 0; width: 32%; height: 6%; translate: -50% 0; border-radius: 0 0 6px 6px; background: #121319; }
.cart-sw .cart-label { left: 10%; right: 10%; top: 14%; bottom: 9%; }
.disc { width: 132px; height: 132px; border-radius: 50%; transform: translate(-46px, -2px) rotate(-8deg);
  background: radial-gradient(circle, #0b0c14 0 9%, #d6daea 9.5% 14%, rgba(255, 255, 255, .0) 14.5%), conic-gradient(from 30deg, #cdd3ea, #f3c6e6, #bfe9f5, #f6efc0, #cdd3ea, #e0c8f5, #cdd3ea);
  box-shadow: 0 26px 40px -18px rgba(0, 0, 0, .85), inset 0 0 0 6px rgba(255, 255, 255, .28); }
.disc span { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(130deg, rgba(255, 255, 255, .55), transparent 40%); }
.tier:hover .cart-gb { transform: translate(-70px, -6px) rotate(-16deg); }
.tier:hover .cart-gba { transform: translate(56px, 14px) rotate(11deg); }
.tier:hover .cart-3ds { transform: translate(-62px, -8px) rotate(-15deg); }
.tier:hover .cart-ds { transform: translate(52px, 6px) rotate(12deg); }
.tier:hover .disc { transform: translate(-58px, -8px) rotate(-130deg); }
.tier:hover .cart-sw { transform: translate(62px, 8px) rotate(12deg); }

.includes { list-style: none; margin: 30px 0 0; padding: 18px 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px; border-radius: 18px; background: rgba(255, 255, 255, .025); border: 1px solid var(--sx-line); }
.includes li { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; color: #dfe2ef; }
.includes .i { color: var(--coral-300); }

/* ==========================================================================
   FAQ, final CTA and footer on dark
   ========================================================================== */
.faq .sx-head { margin-bottom: 0; position: sticky; top: 110px; }
[data-theme="dark"] .page-streamers .faq-list { border-top-color: var(--sx-line); }
[data-theme="dark"] .page-streamers .faq-list details { border-bottom-color: var(--sx-line); }
[data-theme="dark"] .page-streamers .faq-list summary { color: #fff; }
[data-theme="dark"] .page-streamers .faq-list summary .i { color: var(--sx-dim); }
[data-theme="dark"] .page-streamers .faq-list summary:hover .i { color: #fff; }
[data-theme="dark"] .page-streamers .faq-list details[open] summary .i { color: var(--coral); }
[data-theme="dark"] .page-streamers .faq-list details p { color: var(--sx-mute); }

#company.sx-final { padding-bottom: 96px; }
.sx-cta-card { position: relative; overflow: hidden; isolation: isolate; padding: 72px 32px 80px; border-radius: 32px; text-align: center; background: radial-gradient(ellipse 60% 85% at 50% 0%, rgba(255, 114, 87, .4), transparent 70%), linear-gradient(180deg, #161a2c, #0b0d18); border: 1px solid rgba(255, 114, 87, .3); box-shadow: 0 60px 140px -70px rgba(255, 114, 87, .6); }
.sx-cta-fx { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 100%, #000, transparent 75%); mask-image: radial-gradient(ellipse 70% 70% at 50% 100%, #000, transparent 75%); }
.sx-parade { display: flex; justify-content: center; align-items: flex-end; gap: 10px; height: 86px; margin-bottom: 26px; }
.sx-parade img { height: 76px; width: auto; image-rendering: pixelated; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .5)); animation: hop 2.6s ease-in-out infinite; }
.sx-parade img:nth-child(2) { animation-delay: .15s; } .sx-parade img:nth-child(3) { animation-delay: .3s; } .sx-parade img:nth-child(4) { animation-delay: .45s; } .sx-parade img:nth-child(5) { animation-delay: .6s; } .sx-parade img:nth-child(6) { animation-delay: .75s; }
@keyframes hop { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-12px); } }
.sx-cta-card h2 { max-width: 20ch; margin: 0 auto; font-size: clamp(2.1rem, 4.8vw, 3.6rem); letter-spacing: -0.05em; line-height: 1.04; color: #fff; }
.sx-cta-card p { margin-top: 16px; font-size: 1.12rem; color: var(--sx-mute); }

[data-theme="dark"] .page-streamers .footer { background: #05060b; border-top-color: var(--sx-line); }
[data-theme="dark"] .page-streamers .footer-brand p { color: var(--sx-mute); }
[data-theme="dark"] .page-streamers .footer-col h4 { color: #fff; }
[data-theme="dark"] .page-streamers .footer-col a { color: var(--sx-mute); }
[data-theme="dark"] .page-streamers .footer-col a:hover { color: #fff; }
[data-theme="dark"] .page-streamers .footer-bottom { border-top-color: var(--sx-line); color: var(--sx-dim); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
  .sx-stage-body { grid-template-columns: minmax(0, 1fr) 248px; }
  .sx-con { gap: 9px; padding: 9px 10px; }
  .sx-con .i { width: 24px; height: 24px; }
  .pipe-node { width: 140px; }
}
@media (max-width: 1040px) {
  [data-theme="dark"] .page-streamers .mobile-menu { background: #0b0c16; border-bottom-color: var(--sx-line); }
  [data-theme="dark"] .page-streamers .mobile-menu a:not(.btn) { color: var(--sx-mute); border-bottom-color: var(--sx-line); }
  [data-theme="dark"] .page-streamers .nav.menu-open { background: #0b0c16; border-bottom-color: var(--sx-line); }
  .sx-stage-body { grid-template-columns: 1fr; }
  .sx-feed { height: 212px; }
  .sx-split { grid-template-columns: 1fr; gap: 48px; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "party party" "evo badges" "loc money" "alerts dex" "nuz brand"; }
  .tiers { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .faq .sx-head { position: static; }
}
@media (max-width: 860px) {
  .sx-stage-top { flex-wrap: wrap; }
  .sx-consoles { flex-basis: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-price { min-width: 0; padding-left: 4px; }
  .pipe { flex-direction: column; align-items: stretch; padding: 28px 22px; }
  .pipe-node { width: auto; }
  .pipe-link { flex: none; width: 2px; height: 64px; min-width: 0; margin: 10px auto; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .2) 0 6px, transparent 6px 12px); }
  .pipe-link i { left: 50%; animation-name: packetv; }
  @keyframes packetv { 0% { top: 0; opacity: 0; } 12%, 88% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
  .steps { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
  .mq-track figure { width: 360px; }
}
@media (max-width: 640px) {
  .sx-hero { padding: 52px 0 56px; }
  .sx-hero h1 { font-size: clamp(2.5rem, 12vw, 3.4rem); }
  .sx-cta { flex-direction: column; width: 100%; }
  .sx-cta .btn { width: 100%; }
  .sx-facts { gap: 6px 18px; font-size: 13px; }
  .sx-stage-wrap { margin-top: 44px; }
  .sx-stage { padding: 8px; border-radius: 20px; }
  .sx-con { padding: 8px; gap: 8px; }
  .sx-con .i { width: 22px; height: 22px; }
  .sx-con b { font-size: 12.5px; }
  .sx-con small { font-size: 11px; }
  .sx-price b { font-size: 28px; }
  .ov-wrap { border-radius: 10px; }
  .sx-feed { height: 196px; }
  .sx-section { padding: 64px 0; }
  .sx-head { margin-bottom: 40px; }
  .sx-mini-stats { gap: 16px 28px; }
  .sx-mini-stats dd { font-size: 36px; }
  .chores { padding: 18px; }
  .chores-list li { font-size: 14.5px; padding: 9px 8px; gap: 10px; }
  .chores-list li::before { left: 38px; right: 64px; }
  .bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "party" "evo" "badges" "loc" "money" "alerts" "dex" "nuz" "brand"; grid-auto-rows: auto; }
  .bx { padding: 18px; }
  .bx-viz { min-height: 150px; }
  .pv-row { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 10px 14px 10px 8px; }
  .pv-row img { width: 56px; height: 56px; }
  .tier-price b { font-size: 64px; }
  .mq-track figure { width: 280px; }
  .sx-cta-card { padding: 52px 20px 56px; border-radius: 24px; }
  .sx-parade { gap: 4px; height: 64px; }
  .sx-parade img { height: 54px; }
  .sx-final .cta-actions { flex-direction: column; }
  .sx-final .cta-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .sx-stage { transform: none !important; }
  .ev .ev-c, .ev-cap .ev-cc, .al-t, .nz-stamp, .nz-yard .nz-new, .nz-b, .brief span, .build span { opacity: 1; }
  .nz-a { opacity: 0; }
  .ev .ev-c { filter: none; }
  .nz-card img { filter: grayscale(1) brightness(.55); }
  .nz-bar i { width: 0; }
  .mq-track { animation: none; }
  .marquee { overflow-x: auto; }
  .pipe-link i { opacity: 0; }
}

/* ==========================================================================
   Polish
   ========================================================================== */
.sx-hero-fx::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 260px; background: linear-gradient(180deg, transparent, var(--sx-bg)); }
.bx-party .bx-viz { place-items: start stretch; align-content: start; }
.pv-h { display: flex; align-items: center; gap: 10px; padding: 0 4px 2px; font-size: 13px; color: var(--sx-dim); }
.pv-h b { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mint); }
.pv-h em { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font: 500 12px var(--mono); font-style: normal; color: var(--sx-mute); }
.pv-h em i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--mint); animation: blinkdot 1.4s ease-in-out infinite; }
.pv-dmg { right: 84px; top: 8px; }
.pipe-link i { animation-duration: 3.2s; animation-delay: calc(var(--n) * 1.6s); }
.step-viz { height: 176px; }
.brief span { padding: 6px 11px; }
.sx-gallery { padding-top: 64px; }
.tier-foot { min-height: 38px; }
.cart-label-art { display: grid; place-items: center; background: linear-gradient(150deg, #ff7257, #c58bff 60%, #4fd1ff); }
.cart-label-art b { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.sx-hero { padding-top: 60px; }
.sx-hero h1 { margin-top: 22px; }
.sx-sub { margin-top: 22px; }
.sx-cta { margin-top: 30px; }
.sx-stage-wrap { margin-top: 52px; }
@media (max-width: 1040px) {
  .sx-feed-list li { grid-template-columns: auto auto minmax(0, 1fr); }
  .sx-feed-list .v { grid-column: 3; }
}
@media (max-width: 640px) {
  .sx-hero { padding-top: 44px; }
  .sx-gallery { padding-top: 48px; }
  #company.sx-final { padding-bottom: 64px; }
  .sx-feed-list li { grid-template-columns: auto minmax(0, 1fr); }
  .sx-feed-list .v { grid-column: 2; }
}
@media (max-width: 640px) {
  .sx-con b { white-space: normal; }
}
@media (max-width: 420px) {
  .sx-pill-more { display: none; }
}
.sx-hero-fx::after { height: 380px; }
.pipe { align-items: flex-start; }
.pipe-link { margin: 33px 2px 0; }
.tier-foot { min-height: 40px; }
@media (max-width: 860px) {
  .pipe { align-items: stretch; }
  .pipe-link { margin: 10px auto; }
}

/* ==========================================================================
   Waitlist plans (GameCube, Nintendo Switch)
   ========================================================================== */
.soon-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 1000px; margin: 18px auto 0; }
.soon-card { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "art body" "side side"; align-items: center; gap: 18px 20px; padding: 22px; border-radius: 24px; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .018)); border: 1px solid var(--sx-line-2); transition: transform .45s var(--ease), box-shadow .45s; }
.soon-card:hover { transform: translateY(-3px); box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .8); }
.soon-art { grid-area: art; position: relative; width: 96px; height: 96px; border-radius: 18px; background: radial-gradient(ellipse 70% 70% at 50% 100%, rgba(197, 139, 255, .22), transparent 70%), repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 12px); }
.soon-art .disc { transform: rotate(-8deg) scale(.58); }
.soon-art .cart-sw { transform: rotate(7deg) scale(.76); }
.soon-card:hover .soon-art .disc { transform: rotate(-130deg) scale(.62); }
.soon-card:hover .soon-art .cart-sw { transform: rotate(-4deg) scale(.82); }
.soon-body { grid-area: body; min-width: 0; }
.soon-body h3 { margin-top: 4px; font-size: 22px; letter-spacing: -0.03em; color: var(--sx-ink); }
.soon-body p:not(.tier-plat) { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--sx-mute); }
.soon-side { grid-area: side; display: flex; align-items: center; gap: 12px; min-width: 0; padding-top: 16px; border-top: 1px solid var(--sx-line); }
.soon-card .tier-flag { position: static; box-shadow: none; }
.soon-card .tbd { font-size: 28px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; background: linear-gradient(90deg, #d9b8ff, #ff9a4d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.soon-card .btn { width: auto; height: 40px; margin-left: auto; padding: 0 18px; font-size: 14px; }
@media (max-width: 1040px) { .soon-row { grid-template-columns: 1fr; max-width: 560px; } }
@media (max-width: 420px) {
  .soon-card { grid-template-columns: 72px minmax(0, 1fr); padding: 18px; }
  .soon-art { width: 72px; height: 72px; }
  .soon-art .disc { transform: rotate(-8deg) scale(.44); }
  .soon-art .cart-sw { transform: rotate(7deg) scale(.58); }
  .soon-card .tier-flag { display: none; }
}

/* ==========================================================================
   Theme toggle
   ========================================================================== */
.theme-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-right: 2px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); transition: color .2s, border-color .2s, background .2s, transform .4s var(--ease); }
.theme-btn:hover { color: var(--ink); background: var(--paper); transform: rotate(-14deg); }
.theme-btn .i { grid-area: 1 / 1; width: 17px; height: 17px; transition: transform .5s var(--ease), opacity .3s; }
[data-theme="dark"] .theme-btn { border-color: var(--sx-line-2); color: var(--sx-mute); }
[data-theme="dark"] .theme-btn:hover { color: #fff; background: rgba(255, 255, 255, .06); }
[data-theme="dark"] .theme-btn .i-moon, [data-theme="light"] .theme-btn .i-sun { opacity: 0; transform: rotate(-90deg) scale(.4); }
.theme-anim *, .theme-anim *::before, .theme-anim *::after { transition: background-color .45s ease, border-color .45s ease, color .45s ease, box-shadow .45s ease, opacity .45s ease !important; }

/* ==========================================================================
   Light theme
   ========================================================================== */
[data-theme="light"] .page-streamers {
  --sx-bg: #fbf8f6;
  --sx-line: rgba(20, 24, 43, .08);
  --sx-line-2: rgba(20, 24, 43, .14);
  --sx-ink: #14182b;
  --sx-mute: #4a5068;
  --sx-dim: #7f849b;
}
[data-theme="light"] .page-streamers h1 em, [data-theme="light"] .page-streamers h2 em { color: var(--coral-600); }
[data-theme="light"] .page-streamers ::selection { background: var(--coral-100); color: var(--ink); }
/* islands that stay dark in both themes: the live layout, memory feed, OBS mock, alerts and final call to action */
[data-theme="light"] .sx-feed, [data-theme="light"] .obs, [data-theme="light"] .sx-cta-card, [data-theme="light"] .al {
  --sx-line: rgba(255, 255, 255, .08); --sx-line-2: rgba(255, 255, 255, .14); --sx-ink: #f4f2fb; --sx-mute: #9ba1bd; --sx-dim: #6c7290;
}

/* hero */
[data-theme="light"] .sx-hero[data-console="gbc"] { --con-ink: #1683b8; }
[data-theme="light"] .sx-hero[data-console="gba"] { --con-ink: #0f9a69; }
[data-theme="light"] .sx-hero[data-console="ds"] { --con-ink: #4f5fd6; }
[data-theme="light"] .sx-hero[data-console="gc"] { --con-ink: #8a4fd8; }
[data-theme="light"] .sx-glow.g1 { background: radial-gradient(closest-side, rgba(255, 114, 87, .3), transparent); }
[data-theme="light"] .sx-glow.g2 { background: radial-gradient(closest-side, color-mix(in srgb, var(--con) 28%, transparent), transparent); }
[data-theme="light"] .sx-floor { opacity: .5; }
[data-theme="light"] .sx-stars { display: none; }
[data-theme="light"] .sx-pill { background: #fff; border-color: var(--line-2); color: var(--ink-2); box-shadow: var(--sh-xs); }
[data-theme="light"] .sx-pill:hover { background: #fff; border-color: #cfc6be; }
[data-theme="light"] .sx-pill .i { color: var(--coral-600); }
[data-theme="light"] .sx-hero h1 { color: var(--ink); }
[data-theme="light"] .sx-hero h1 em { background-image: linear-gradient(100deg, #ec5a3f 0%, #ff7257 35%, #c4432c 62%, var(--con-ink, #0f9a69) 100%); }
[data-theme="light"] .sx-facts b { color: var(--ink); }
[data-theme="light"] .sx-cta .btn-glass { background: #fff; color: var(--ink); border-color: var(--line-2); box-shadow: var(--sh-xs); -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-theme="light"] .sx-cta .btn-glass:hover { border-color: #cfc6be; }
[data-theme="light"] .btn-tag { background: rgba(20, 24, 43, .1); }

/* stage */
[data-theme="light"] .sx-stage { background: #fff; border-color: var(--line); box-shadow: 0 90px 160px -90px color-mix(in srgb, var(--con) 55%, transparent), 0 30px 80px -40px rgba(20, 24, 43, .28); }
[data-theme="light"] .sx-consoles { background: var(--paper-2); border-color: var(--line); }
[data-theme="light"] .sx-con { color: var(--ink-2); }
[data-theme="light"] .sx-con small { color: var(--ink-3); }
[data-theme="light"] .sx-con:hover { color: var(--ink); background: rgba(255, 255, 255, .7); }
[data-theme="light"] .sx-con.is-on { color: var(--ink); background: #fff; box-shadow: var(--sh-sm); }
[data-theme="light"] .sx-con.is-on .i { color: var(--con-ink); }
[data-theme="light"] .sx-con-bar { background: var(--con-ink); }
[data-theme="light"] .sx-price b { color: var(--ink); }
[data-theme="light"] .sx-price span { color: var(--ink-3); }
[data-theme="light"] .ov-wrap { box-shadow: 0 0 0 1px rgba(20, 24, 43, .14), 0 20px 50px -30px rgba(20, 24, 43, .5); }
[data-theme="light"] .sx-feed { background: #0d0f1b; border-color: #0d0f1b; }

/* sections */
[data-theme="light"] .sx-head h2 { color: var(--ink); }
[data-theme="light"] .sx-kicker { color: var(--coral-700); }
[data-theme="light"] .sx-lede .link { color: var(--coral-700); }
[data-theme="light"] .sx-lede .link:hover { color: var(--ink); }

/* the old way */
[data-theme="light"] .sx-mini-stats dd { color: var(--ink); }
[data-theme="light"] .chores { background: #fff; border-color: var(--line); box-shadow: var(--sh-lg); }
[data-theme="light"] .chores-h { border-bottom-color: var(--line-2); }
[data-theme="light"] .chores-h img { background: var(--green-50); }
[data-theme="light"] .chores-h span { color: var(--green); }
[data-theme="light"] .chores-h b { color: var(--ink); }
[data-theme="light"] .chores-list li { color: var(--ink); }
[data-theme="light"] .chores-list li::before { background: var(--coral-600); }
[data-theme="light"] .chores-list .ck { border-color: rgba(20, 24, 43, .25); }
[data-theme="light"] .chores-list .ck::after { border-color: #fff; }
[data-theme="light"] .chores-list u { background: var(--green-50); color: var(--green); }
[data-theme="light"] .chores.is-play li { color: var(--ink-3); }
[data-theme="light"] .chores.is-play .ck { background: var(--green); border-color: var(--green); }
[data-theme="light"] .chores-f { background: var(--coral-50); border-color: var(--coral-100); }
[data-theme="light"] .chores.is-play .chores-f { background: var(--coral-50); border-color: var(--coral-300); box-shadow: 0 20px 50px -24px rgba(255, 114, 87, .45); }
[data-theme="light"] .chores-f p { color: var(--ink-2); }
[data-theme="light"] .chores-f b { color: var(--ink); }

/* bento */
[data-theme="light"] .bx { background: #fff; border-color: var(--line); box-shadow: var(--sh-sm); }
[data-theme="light"] .bx:hover { border-color: var(--line-2); box-shadow: var(--sh-md); }
[data-theme="light"] .bx h3 { color: var(--ink); }
[data-theme="light"] .bx-ico { background: var(--coral-50); border-color: var(--coral-100); color: var(--coral-600); }
[data-theme="light"] .pv-h b { color: var(--green); }
[data-theme="light"] .pv-h em i { background: var(--green); box-shadow: none; }
[data-theme="light"] .pv-row { background: #f4fbf8; border-color: #d4eee2; }
[data-theme="light"] .pv-row img { filter: drop-shadow(0 6px 6px rgba(20, 24, 43, .2)); }
[data-theme="light"] .pv-l1 b { color: var(--ink); }
[data-theme="light"] .pv-bar { background: rgba(20, 24, 43, .1); }
[data-theme="light"] .pv-bar s { background: rgba(20, 24, 43, .22); }
[data-theme="light"] .pv-dmg.heal { color: var(--green); }
[data-theme="light"] .ev-ring { border-color: rgba(183, 134, 26, .45); }
[data-theme="light"] .ev-flash { background: radial-gradient(closest-side, rgba(255, 212, 121, .8), rgba(255, 212, 121, .25) 55%, transparent); }
[data-theme="light"] .bd-count { color: var(--ink); }
[data-theme="light"] .lc-list li { color: var(--ink); }
[data-theme="light"] .mt-row b { color: var(--ink); }
[data-theme="light"] .mt-row .i { color: #b7861a; }
[data-theme="light"] .mt-row em { color: var(--green); }
[data-theme="light"] .dx-ring { background: radial-gradient(closest-side, #fff 79%, transparent 80% 100%), conic-gradient(#7a5ce0 calc(var(--p) * 1turn), rgba(20, 24, 43, .08) 0); }
[data-theme="light"] .dx-ring b, [data-theme="light"] .dx dd { color: var(--ink); }
[data-theme="light"] .nz-card { background: var(--paper); border-color: var(--line); }
[data-theme="light"] .nz-card b { color: var(--ink); }
[data-theme="light"] .nz-bar { background: rgba(20, 24, 43, .1); }
[data-theme="light"] .nz-yard { background: var(--paper-2); border-color: var(--line); }
[data-theme="light"] .nz-num b { color: var(--ink); }
[data-theme="light"] .nz-b { color: #e5243b !important; }
[data-theme="light"] .nz-stamp { color: #e5243b; border-color: #e5243b; }

/* how it works */
[data-theme="light"] .pipe { background: #fff; border-color: var(--line); box-shadow: var(--sh-sm); }
[data-theme="light"] .pn-ico { background: var(--paper-2); border-color: var(--line-2); box-shadow: none; }
[data-theme="light"] .pn-ico .i { color: var(--ink); }
[data-theme="light"] .pipe-node b { color: var(--ink); }
[data-theme="light"] .pipe-link { background: repeating-linear-gradient(90deg, rgba(20, 24, 43, .25) 0 6px, transparent 6px 12px); }
[data-theme="light"] .step { background: #fff; border-color: var(--line); box-shadow: var(--sh-sm); }
[data-theme="light"] .step h3 { color: var(--ink); }
[data-theme="light"] .step-n { color: var(--coral-700); }
[data-theme="light"] .step-viz { background: radial-gradient(ellipse 80% 90% at 50% 120%, rgba(255, 114, 87, .12), transparent 70%), var(--paper); border-color: var(--line); }
[data-theme="light"] .brief span { background: #fff; border-color: var(--line); color: var(--ink); box-shadow: var(--sh-xs); }
[data-theme="light"] .brief i { color: var(--ink-3); }
[data-theme="light"] .build { border-color: rgba(20, 24, 43, .22); }
[data-theme="light"] .build-cursor { background: var(--ink) !important; }

/* gallery */
[data-theme="light"] .mq-track figure { border-color: var(--line-2); box-shadow: 0 30px 60px -34px rgba(20, 24, 43, .45); }

/* pricing */
[data-theme="light"] .tier, [data-theme="light"] .soon-card { background: #fff; border-color: var(--line); box-shadow: var(--sh-md); }
[data-theme="light"] .tier:hover, [data-theme="light"] .soon-card:hover { box-shadow: var(--sh-lg); }
[data-theme="light"] .tier-hot { border-color: transparent; box-shadow: 0 50px 110px -60px rgba(255, 114, 87, .65), var(--sh-md); }
[data-theme="light"] .tier-art { background: radial-gradient(ellipse 60% 75% at 50% 100%, rgba(20, 24, 43, .07), transparent 70%), repeating-linear-gradient(135deg, rgba(20, 24, 43, .035) 0 2px, transparent 2px 14px), var(--paper); border-bottom-color: var(--line); }
[data-theme="light"] .tier-hot .tier-art { background: radial-gradient(ellipse 60% 75% at 50% 100%, rgba(255, 114, 87, .2), transparent 70%), repeating-linear-gradient(135deg, rgba(20, 24, 43, .035) 0 2px, transparent 2px 14px), var(--paper); }
[data-theme="light"] .soon-art { background: radial-gradient(ellipse 70% 70% at 50% 100%, rgba(138, 79, 216, .16), transparent 70%), repeating-linear-gradient(135deg, rgba(20, 24, 43, .035) 0 2px, transparent 2px 12px), var(--paper); }
[data-theme="light"] .tier h3, [data-theme="light"] .tier-price { color: var(--ink); }
[data-theme="light"] .tier-list li { color: var(--ink-2); }
[data-theme="light"] .tier-list li::before { background-color: var(--green-50); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23138a5e' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
[data-theme="light"] .btn-light-glass { background: var(--ink); color: #fff; }
[data-theme="light"] .btn-light-glass:hover { background: #262b45; }
[data-theme="light"] .tier-flag.soon { background: var(--violet-50); color: var(--violet); border-color: rgba(107, 78, 230, .3); }
[data-theme="light"] .soon-card .tbd, [data-theme="light"] .tier-price .tbd { background-image: linear-gradient(90deg, #7a4fd8, #e2731f); }
[data-theme="light"] .includes { background: #fff; border-color: var(--line); }
[data-theme="light"] .includes li { color: var(--ink-2); }
[data-theme="light"] .includes .i { color: var(--coral-600); }

/* final call to action stays a dark block */
[data-theme="light"] .sx-cta-card h2 em { color: var(--coral-300); }
[data-theme="light"] .sx-cta-card { box-shadow: 0 60px 140px -70px rgba(255, 114, 87, .55), var(--sh-lg); }
@media (max-width: 860px) {
  [data-theme="light"] .pipe-link { background: repeating-linear-gradient(180deg, rgba(20, 24, 43, .25) 0 6px, transparent 6px 12px); }
}
[data-theme="light"] .ev-ring { background: radial-gradient(circle, #1d2136 0 58%, #11142a 100%); border: 2px dashed rgba(183, 134, 26, .55); box-shadow: 0 18px 40px -18px rgba(20, 24, 43, .55); }
[data-theme="light"] .ev-cap { color: var(--ink-3); }
@media (max-width: 420px) {
  .page-streamers .nav-actions > .btn-coral { display: none; }
}

/* ==========================================================================
   Badge tiles: Johto from the Charmi Figma kit, Hoenn and Unova drawn to match
   ========================================================================== */
.bdg-gems i, .bd-gems i { display: grid; place-items: center; clip-path: none; background: #e9e9d9; opacity: .38; transition: opacity .35s, background .35s, box-shadow .35s; }
.bdg-gems i img, .bd-gems i img { width: 74%; height: 74%; filter: grayscale(1) contrast(.85); transition: filter .35s; }
.bdg-gems i.on, .bd-gems i.on { background: #fffbea; opacity: 1; }
.bdg-gems i.on img, .bd-gems i.on img { filter: none; }
.bdg-gems i { width: calc(30 * var(--u)); height: calc(30 * var(--u)); box-shadow: inset 0 0 0 calc(1.3 * var(--u)) #667087; }
.bdg-gems i.on { box-shadow: inset 0 0 0 calc(1.3 * var(--u)) #d4b365, calc(2.5 * var(--u)) calc(2.5 * var(--u)) 0 #d4b365; }
.ov[data-console="ds"] .bdg-gems i { width: calc(46 * var(--u)); height: calc(46 * var(--u)); }
.bdg-gems { gap: calc(10 * var(--u)); }
.bd-gems { grid-template-columns: repeat(4, 46px); gap: 14px; }
.bd-gems i { width: 46px; height: 46px; box-shadow: inset 0 0 0 1.5px #667087; }
.bd-gems i.on { box-shadow: inset 0 0 0 1.5px #d4b365, 3px 3px 0 #d4b365; }

/* DS trainer card: badge count lives next to the "Badges" label so the row never overflows */
.ov[data-console="ds"] .bdg-n { display: none; }
.ov[data-console="ds"] .bdg-gems { gap: calc(12 * var(--u)); }
.tc-name small b { margin-left: calc(6 * var(--u)); color: var(--ov-ink); font-variant-numeric: tabular-nums; }

/* language pill and theme toggle share one size */
.page-streamers .lang { width: 36px; min-width: 36px; height: 36px; padding: 0; border-radius: 999px; margin-right: 2px; }
.theme-btn { width: 36px; height: 36px; }
[data-theme="dark"] .page-streamers .footer-legal a, [data-theme="dark"] .page-streamers .footer-legal .footer-link { color: var(--sx-dim); }
[data-theme="dark"] .page-streamers .footer-legal a:hover, [data-theme="dark"] .page-streamers .footer-legal .footer-link:hover { color: #fff; }