/* Shared Streaky refresh — loaded after each page's local styles. */
:root { color-scheme: dark; }
html { -webkit-text-size-adjust: 100%; }
body { min-width: 320px; overflow-x: hidden; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button, .btn-primary, .btn-ghost, .difficulty-btn, .game-card { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #4de3ff; outline-offset: 3px; }

/* Landing page */
.game-card { position: relative; isolation: isolate; overflow: hidden; border-radius: 18px !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 10px 26px rgba(0,0,0,.18); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important; }
.game-card::after { content: ""; position: absolute; z-index: -1; inset: auto -22% -55% auto; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, currentColor 35%, transparent), transparent 67%); opacity: .75; }
.game-card:hover { transform: translateY(-5px); border-color: rgba(77,227,255,.55) !important; box-shadow: 0 18px 34px rgba(0,0,0,.28); }
.game-card .game-thumb { border-radius: 14px; background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.015)); }
.game-card .game-name { letter-spacing: -.02em; }
.challenge-band, .panel, .price-card { border-radius: 22px !important; }

/* Game pages: keeps controls comfortably tappable and fields within small screens. */
@media (max-width: 680px) {
  body { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .topbar, .header, header { padding-left: 16px !important; padding-right: 16px !important; }
  .game-shell, .game-wrap, main, .page { width: min(100% - 24px, 680px) !important; margin-left: auto !important; margin-right: auto !important; }
  .game-card:hover { transform: none; }
  button, .btn-primary, .btn-ghost, .difficulty-btn { min-height: 44px; }
  .btn-primary, .btn-ghost { padding-left: 16px !important; padding-right: 16px !important; }
  h1 { font-size: clamp(28px, 9vw, 42px) !important; line-height: 1.03 !important; }
  .game-sub, .subtitle { line-height: 1.5 !important; }
  .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  .game-card { min-height: 150px; }
  .game-card .game-thumb { height: 66px !important; }
  .section { padding-left: 16px !important; padding-right: 16px !important; }
  .pricing, .split { grid-template-columns: 1fr !important; }
  .modal-card { width: calc(100vw - 28px) !important; max-height: calc(100dvh - 28px); overflow-y: auto; }
}
@media (max-width: 390px) {
  .game-grid { gap: 10px !important; }
  .game-card { min-height: 0; padding: 12px !important; padding-top: 34px !important; }
  .game-card .game-thumb { margin-bottom: 10px; }
  .game-card .game-name { font-size: 14px; }
  .game-card .game-cat { font-size: 10px; }
}

/* Game card artwork (assets/games/*.svg, 16:9) */
.game-card .game-thumb.has-art { height: auto !important; aspect-ratio: 16 / 9; background-color: #0A0A12; background-size: cover; background-position: center; background-repeat: no-repeat; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); transition: filter .25s ease; }
.game-card .game-thumb.has-art svg { display: none; }
.game-card:hover .game-thumb.has-art { filter: brightness(1.12) saturate(1.1); }
@media (max-width: 680px) { .game-card .game-thumb.has-art { height: auto !important; } }


/* ---------- iPhone ---------- */
html { touch-action: manipulation; }
body { min-height: 100vh; min-height: 100dvh; }
/* Sticky landing-page nav clears the notch / Dynamic Island when saved to the Home Screen */
body > header:has(> nav) { padding-top: env(safe-area-inset-top); }
/* Landscape on notched iPhones: keep content out from under the notch */
@media (orientation: landscape) and (max-height: 520px) {
  header, main, .wrap { padding-left: max(20px, env(safe-area-inset-left)) !important; padding-right: max(20px, env(safe-area-inset-right)) !important; }
}
/* Inputs at 16px so iOS Safari doesn't zoom in when a field is focused */
input, select, textarea, .field-input { font-size: 16px !important; }
.modal, .modal-card { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* Touch screens: hover effects stick after a tap on iOS, so use press feedback instead */
@media (hover: none) {
  .game-card:hover { transform: none !important; box-shadow: 0 10px 26px rgba(0,0,0,.18); border-color: rgba(255,255,255,.10) !important; }
  .game-card:hover .game-thumb.has-art { filter: none; }
  .game-card:active { transform: scale(.97) !important; transition-duration: .08s !important; }
  button:active, .btn-primary:active, .btn-ghost:active, .play-btn:active, .diff-btn:active { transform: scale(.97); }
}
/* Game pages: no text selection, callouts or rubber-banding while playing */
.is-game body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; }
.is-game canvas { touch-action: none; }

/* "New" tag on landing-page cards */
.game-card .new-tag { position: absolute; top: 12px; left: 12px; z-index: 2; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: linear-gradient(100deg, #FFB020, #FF3D71); color: #0A0A12; }
@media (max-width: 390px) { .game-card .new-tag { top: 8px; left: 8px; } }

/* Small iPhones: keep headers on one line */
@media (max-width: 430px) {
  nav { padding-left: 16px !important; padding-right: 16px !important; }
  nav .logo { font-size: 19px; }
  nav > div[style*="flex"] { gap: 8px !important; }
  .cta-small { white-space: nowrap; padding: 9px 13px !important; font-size: 13px !important; }
  /* Game HUD: compact, never wraps; the Vault link steps aside while a round is running */
  header .hud { gap: 10px !important; font-size: 12px !important; white-space: nowrap; }
  header .hud span { white-space: nowrap; }
  header .back { white-space: nowrap; }
  header:has(.hud:not([style*="none"])) > a[href="vault.html"] { display: none; }
}
@media (max-width: 360px) { header .hud { gap: 7px !important; font-size: 11px !important; } }

/* Short iPhones (SE, mini): give the play area the room while a round is on */
@media (max-height: 740px) and (max-width: 500px) {
  main:has(#grid:not(.hidden)) > .sub, main:has(#grid:not(.hidden)) > .eyebrow { display: none; }
  main:has(#grid:not(.hidden)) > h1 { font-size: 24px !important; margin-bottom: 8px; }
  #stage.stage { height: min(340px, 44dvh); }
}

/* Phones: one gutter (16px) instead of wrap + section padding stacking up */
@media (max-width: 680px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .wrap > .section { padding-left: 0 !important; padding-right: 0 !important; }
}

/* =====================================================================
   STREAKY UI v3 — shared design system (prefix: sx-)
   Domains get their own color so the site reads at a glance:
   play = electric cyan · progression/streak = flame amber · achievements = medal gold
   cosmetics = violet · premium = gold foil
   ===================================================================== */
:root {
  --sx-bg: #0A0A12;
  --sx-s1: #111119;          /* page sections */
  --sx-s2: #171722;          /* cards */
  --sx-s3: #20202E;          /* raised / inputs */
  --sx-line: rgba(255,255,255,.09);
  --sx-line-strong: rgba(255,255,255,.16);
  --sx-text: #F5F5FA;
  --sx-muted: #A6A6BA;       /* 7:1 on --sx-bg */
  --sx-faint: #72728A;
  --sx-play: #4DE3FF;
  --sx-flame: #FFB020;
  --sx-flame-2: #FF6A3D;
  --sx-hot: #FF3D71;
  --sx-medal: #FFD166;
  --sx-cosmetic: #BE78FF;
  --sx-good: #3DFFA3;
  --sx-bad: #FF5A7A;
  --sx-premium-grad: linear-gradient(120deg, #FFE29A 0%, #FFB020 38%, #FF8A3D 62%, #FFE29A 100%);
  --sx-flame-grad: linear-gradient(135deg, #FFD166 0%, #FFB020 35%, #FF6A3D 70%, #FF3D71 100%);
  --r-common: #A6A6BA; --r-rare: #4DE3FF; --r-epic: #BE78FF; --r-legendary: #FFB020; --r-premium: #FFD166;
  --sx-radius-s: 10px; --sx-radius: 16px; --sx-radius-l: 22px;
  --sx-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 12px 32px -12px rgba(0,0,0,.6);
  --sx-focus: 0 0 0 3px #0A0A12, 0 0 0 5px #4DE3FF;
  --sx-font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --sx-font-body: 'Inter', system-ui, sans-serif;
  --sx-font-mono: 'JetBrains Mono', ui-monospace, monospace;
}
.sx-icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
:where(a, button, [role="button"], input, select, textarea, summary, [tabindex]):focus-visible { outline: none !important; box-shadow: var(--sx-focus) !important; border-radius: 10px; }

/* Layout */
.sx-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
.sx-section { margin-top: clamp(28px, 5vw, 48px); }
.sx-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.sx-eyebrow { font: 700 11.5px/1 var(--sx-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sx-muted); display: inline-flex; align-items: center; gap: 8px; }
.sx-h1 { font: 800 clamp(30px, 6vw, 52px)/1.02 var(--sx-font-display); letter-spacing: -.025em; }
.sx-h2 { font: 800 clamp(20px, 3.2vw, 26px)/1.15 var(--sx-font-display); letter-spacing: -.015em; }
.sx-h3 { font: 700 16px/1.25 var(--sx-font-display); }
.sx-sub { color: var(--sx-muted); font-size: 15px; line-height: 1.55; }
.sx-grid { display: grid; gap: 14px; }
@media (min-width: 720px) { .sx-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sx-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sx-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Surfaces */
.sx-card { background: var(--sx-s2); border: 1px solid var(--sx-line); border-radius: var(--sx-radius); padding: 18px; box-shadow: var(--sx-shadow); }
.sx-card-flat { background: var(--sx-s1); border: 1px solid var(--sx-line); border-radius: var(--sx-radius); padding: 16px; }
.sx-divider { height: 1px; background: var(--sx-line); border: 0; margin: 14px 0; }

/* Buttons — one solid primary, calmer secondaries, gold only for Premium */
.sx-btn { --b: var(--sx-s3); display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--sx-line-strong); background: var(--b); color: var(--sx-text); font: 700 14.5px/1 var(--sx-font-body); text-decoration: none; cursor: pointer; transition: transform .12s ease, background .15s ease, border-color .15s ease; touch-action: manipulation; white-space: nowrap; }
.sx-btn:hover { border-color: rgba(255,255,255,.28); }
.sx-btn:active { transform: scale(.97); }
.sx-btn[disabled], .sx-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.sx-btn-primary { background: var(--sx-flame); border-color: transparent; color: #140B00; }
.sx-btn-primary:hover { background: #FFC24D; }
.sx-btn-play { background: var(--sx-play); border-color: transparent; color: #001419; }
.sx-btn-ghost { background: transparent; }
.sx-btn-premium { background: var(--sx-premium-grad); background-size: 200% 100%; border-color: transparent; color: #1A0F00; animation: sx-sheen 6s linear infinite; }
.sx-btn-sm { min-height: 36px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.sx-btn-lg { min-height: 52px; padding: 0 26px; font-size: 16px; border-radius: 14px; }
.sx-btn-block { width: 100%; }
@keyframes sx-sheen { to { background-position: -200% 0; } }

/* Chips & segmented tabs */
.sx-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--sx-s3); border: 1px solid var(--sx-line); color: var(--sx-muted); font: 700 11.5px/1 var(--sx-font-mono); letter-spacing: .03em; white-space: nowrap; }
.sx-tabs { display: flex; gap: 4px; padding: 4px; background: var(--sx-s1); border: 1px solid var(--sx-line); border-radius: 14px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.sx-tabs::-webkit-scrollbar { display: none; }
.sx-tab { flex: 1 0 auto; min-height: 40px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: var(--sx-muted); font: 700 13.5px/1 var(--sx-font-body); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; scroll-snap-align: start; white-space: nowrap; }
.sx-tab[aria-selected="true"], .sx-tab.is-active { background: var(--sx-s3); color: var(--sx-text); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset; }
.sx-tab .sx-count { font: 700 11px/1 var(--sx-font-mono); color: var(--sx-faint); }

/* Progress */
.sx-progress { height: 8px; border-radius: 99px; background: var(--sx-s3); overflow: hidden; }
.sx-progress > i { display: block; height: 100%; border-radius: inherit; background: var(--sx-flame-grad); width: var(--p, 0%); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.sx-progress.is-play > i { background: linear-gradient(90deg, #4DE3FF, #7AF0FF); }
.sx-progress.is-medal > i { background: linear-gradient(90deg, #FFD166, #FFB020); }
.sx-ring { --p: 0; --c: var(--sx-flame); width: var(--size, 64px); height: var(--size, 64px); border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--sx-s3) 0); display: grid; place-items: center; }
.sx-ring > * { width: calc(100% - 10px); height: calc(100% - 10px); border-radius: 50%; background: var(--sx-s2); display: grid; place-items: center; font: 800 15px/1 var(--sx-font-display); }

/* Stats */
.sx-stat { display: flex; flex-direction: column; gap: 6px; }
.sx-stat-v { font: 800 clamp(22px, 3.4vw, 30px)/1 var(--sx-font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sx-stat-l { font: 700 11px/1.2 var(--sx-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sx-muted); }

/* THE STREAK — the site-wide motif */
.sx-streak { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 10px; border-radius: 999px; background: rgba(255,106,61,.12); border: 1px solid rgba(255,176,32,.35); color: #FFD9A0; font: 800 14px/1 var(--sx-font-display); white-space: nowrap; }
.sx-streak .sx-flame { width: 20px; height: 20px; color: var(--sx-flame); filter: drop-shadow(0 0 6px rgba(255,140,40,.7)); animation: sx-flicker 1.6s ease-in-out infinite; transform-origin: 50% 90%; }
.sx-streak.is-cold { background: var(--sx-s3); border-color: var(--sx-line); color: var(--sx-muted); }
.sx-streak.is-cold .sx-flame { color: var(--sx-faint); filter: none; animation: none; }
.sx-streak-big { height: auto; padding: 14px 18px; border-radius: 18px; gap: 12px; }
.sx-streak-big .sx-flame { width: 34px; height: 34px; }
.sx-streak-big b { font-size: 30px; }
@keyframes sx-flicker { 0%,100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.08) rotate(2deg); } }

/* Rarity */
.sx-rarity { --rc: var(--r-common); }
.sx-rarity[data-rarity="rare"] { --rc: var(--r-rare); }
.sx-rarity[data-rarity="epic"] { --rc: var(--r-epic); }
.sx-rarity[data-rarity="legendary"] { --rc: var(--r-legendary); }
.sx-rarity[data-rarity="premium"] { --rc: var(--r-premium); }
.sx-rarity-label { font: 800 10px/1 var(--sx-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--rc); }

/* States */
.sx-empty { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 26px 18px; border: 1px dashed var(--sx-line-strong); border-radius: var(--sx-radius); color: var(--sx-muted); }
.sx-empty .sx-icon { width: 34px; height: 34px; color: var(--sx-faint); }
.sx-skeleton { border-radius: 10px; background: linear-gradient(90deg, var(--sx-s2) 0%, var(--sx-s3) 50%, var(--sx-s2) 100%); background-size: 200% 100%; animation: sx-sheen 1.3s linear infinite; min-height: 16px; }
.sx-badge-new { font: 800 10px/1 var(--sx-font-mono); letter-spacing: .06em; text-transform: uppercase; padding: 4px 7px; border-radius: 6px; background: var(--sx-hot); color: #fff; }

/* Shared page header (profile / badges / vault) */
.sx-topbar { position: sticky; top: 0; z-index: 30; background: rgba(10,10,18,.8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--sx-line); padding-top: env(safe-area-inset-top); }
.sx-topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; }
.sx-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--sx-muted); text-decoration: none; font-weight: 700; font-size: 14px; }
.sx-back:hover { color: var(--sx-text); }
.sx-nav { display: flex; gap: 4px; }
.sx-nav a { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 12px; border-radius: 10px; color: var(--sx-muted); text-decoration: none; font-weight: 700; font-size: 13.5px; }
.sx-nav a[aria-current="page"] { background: var(--sx-s3); color: var(--sx-text); }
@media (max-width: 560px) { .sx-nav a span { display: none; } .sx-nav a { padding: 0 10px; } }
/* Leaderboards (gold trophy) and Cosmetics (violet) stand out in every page's top nav */
.sx-nav a { white-space: nowrap; transition: color .15s, background .15s; }
.sx-nav a:hover { color: var(--sx-text); background: rgba(255,255,255,.05); }
.sx-nav a.sx-nav-lb .sx-icon { color: var(--sx-medal); }
.sx-nav a.sx-nav-lb[aria-current="page"] { background: rgba(255,176,32,.12); color: #FFE29A; }
.sx-nav a.sx-nav-cos { color: #E4D2FF; background: linear-gradient(135deg, rgba(138,77,255,.22), rgba(224,91,216,.14)); box-shadow: inset 0 0 0 1px rgba(190,120,255,.4); }
.sx-nav a.sx-nav-cos .sx-icon { color: #C79BFF; }
.sx-nav a.sx-nav-cos:hover { background: linear-gradient(135deg, rgba(138,77,255,.32), rgba(224,91,216,.2)); color: #fff; }
.sx-nav a.sx-nav-cos[aria-current="page"] { background: linear-gradient(135deg, #8A4DFF, #B45CFF 55%, #E05BD8); color: #fff; box-shadow: 0 6px 18px -8px rgba(170,90,255,.9); }
.sx-nav a.sx-nav-cos[aria-current="page"] .sx-icon { color: #fff !important; }
@media (min-width: 561px) and (max-width: 900px) { .sx-nav a { padding: 0 10px; gap: 6px; } }

@media (prefers-reduced-motion: reduce) {
  .sx-streak .sx-flame, .sx-btn-premium, .sx-skeleton { animation: none !important; }
  .sx-progress > i { transition: none; }
}

/* Avatar button in game headers: step aside on small phones while a round is running */
@media (max-width: 430px) {
  header:has(.hud:not([style*="none"])) .sk-me-slot { display: none; }
}

/* ===== Game info (about / how to play / related games) under every game page =====
   Hidden while a round is running so play areas keep their no-scroll layout. */
.sx-gameinfo{ position:relative; z-index:1; width:100%; padding:28px 16px calc(36px + env(safe-area-inset-bottom)); border-top:1px solid rgba(255,255,255,.08); background:#0A0A12; color:#C9C9D4; font-family:Inter, system-ui, sans-serif; text-align:left; -webkit-user-select:text; user-select:text; }
.sx-gameinfo-in{ max-width:960px; margin:0 auto; }
.sx-gameinfo h2{ font:800 24px/1.15 "Bricolage Grotesque", system-ui, sans-serif; color:#F5F5FA; margin:10px 0 10px; letter-spacing:-.01em; }
.sx-gameinfo h3{ font:700 16px/1.3 "Bricolage Grotesque", system-ui, sans-serif; color:#F5F5FA; margin:18px 0 8px; }
.sx-gameinfo p, .sx-gameinfo li{ font-size:15px; line-height:1.65; margin:0 0 10px; }
.sx-gameinfo ul{ padding-left:20px; margin:0 0 6px; }
.sx-gameinfo a{ color:#4DE3FF; }
.sx-gameinfo-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:0 32px; }
@media (min-width:760px){ .sx-gameinfo-grid{ grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); } }
.sx-crumbs ol{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:0; font-size:13px; color:#8A8A9A; }
.sx-crumbs li{ margin:0; font-size:13px; line-height:1.4; }
.sx-crumbs li + li::before{ content:"›"; margin-right:6px; color:#5A5A6E; }
.sx-crumbs a{ color:#A6A6BA; text-decoration:none; }
.sx-crumbs a:hover{ color:#F5F5FA; }
.sx-related{ list-style:none; padding:0 !important; display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
@media (min-width:640px){ .sx-related{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.sx-related li{ margin:0; }
.sx-related a{ display:flex; align-items:center; gap:12px; min-height:64px; padding:8px; border-radius:14px; border:1px solid rgba(255,255,255,.1); background:#14141F; color:#F5F5FA; text-decoration:none; }
.sx-related a:hover{ border-color:rgba(77,227,255,.5); }
.sx-related img{ width:96px; height:54px; border-radius:9px; object-fit:cover; flex:none; }
.sx-related b{ display:block; font-size:15px; }
.sx-related small{ display:block; font-size:12.5px; color:#8A8A9A; margin-top:2px; }
.sx-gameinfo-foot{ margin-top:16px !important; font-size:14px !important; color:#8A8A9A; }
body.playing .sx-gameinfo,
body:has(header .hud:not([style*="none"])) .sx-gameinfo{ display:none; }

/* Narrow phones: keep the profile circle fully on screen next to the nav. */
@media (max-width: 430px){
  .topnav .nav-right .sk-me-slot ~ #loginBtn, .topnav .nav-right #loginBtn{ display:none; }
  .sx-topbar-in{ gap:6px; }
  .sx-back{ font-size:0; gap:0; min-width:40px; justify-content:center; }
  .sx-back .sx-icon{ width:20px; height:20px; }
  .sx-nav{ gap:2px; }
  .sx-topbar .sx-nav a{ padding:0 9px; min-width:40px; justify-content:center; }
  .sk-me-slot{ margin-left:4px; }
}
@media (max-width: 360px){
  .sx-topbar .sx-nav a{ padding:0 6px; min-width:36px; }
  .sx-back{ min-width:32px; }
  .sx-topbar .sk-me-slot .sk-me, .topnav .sk-me{ width:38px; height:38px; }
}

/* ==========================================================================
   PLAYER IDENTITY (.sp-*) — rendered by StreakyData.renderPlayer / avatarHTML /
   nameHTML / titleHTML / flameSVG / flameChip. Same look everywhere a player shows.
   ========================================================================== */
.sp{ display:inline-flex; align-items:center; gap:10px; min-width:0; max-width:100%; vertical-align:middle; }
.sp-id{ display:flex; flex-direction:column; justify-content:center; gap:4px; min-width:0; }
.sp-l1{ display:flex; align-items:baseline; gap:6px; min-width:0; }
.sp-l2{ display:flex; align-items:center; gap:6px; min-width:0; flex-wrap:wrap; }
.sp-sub{ font:600 11.5px/1.2 var(--sx-font-body); color:var(--sx-muted); }
.sp-vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.sp-xs{ gap:7px; } .sp-xs .sp-nm{ font-size:13px; } .sp-xs .sp-tt, .sp-xs .sp-lv{ display:none; }
.sp-sm .sp-nm{ font-size:14.5px; }
.sp-md{ gap:12px; } .sp-md .sp-nm{ font-size:16.5px; }
.sp-lg{ gap:14px; } .sp-lg .sp-nm{ font-size:21px; } .sp-lg .sp-id{ gap:7px; }
.sp-sm .sp-l2 .sp-tt{ font-size:9.5px; height:18px; padding:0 7px 0 5px; }

/* Avatar disc: line icon on a dark disc, ring in the item's rarity color */
.sp-avw{ --sz:36px; position:relative; flex:none; display:inline-grid; width:var(--sz); height:var(--sz); }
.sp-av{ --rc:#8C8CA6; --rg:rgba(166,166,186,.0); width:100%; height:100%; border-radius:50%; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--rc) 26%, #22222F) 0%, #15151F 62%, #101017 100%);
  box-shadow:inset 0 0 0 max(1.5px, calc(var(--sz) * .045)) var(--rc), inset 0 0 0 max(2.5px, calc(var(--sz) * .075)) rgba(10,10,18,.85), 0 0 calc(var(--sz) * .42) -4px var(--rg); }
.sp-av[data-r="rare"]{ --rc:#4DE3FF; --rg:rgba(77,227,255,.35); }
.sp-av[data-r="epic"]{ --rc:#B77AFF; --rg:rgba(190,120,255,.4); }
.sp-av[data-r="legendary"]{ --rc:#FFC94D; --rg:rgba(255,190,60,.5); }
.sp-av[data-prem]{ background:radial-gradient(circle at 50% 28%, #3A2C10 0%, #17130C 62%, #0F0D09 100%);
  box-shadow:inset 0 0 0 max(2px, calc(var(--sz) * .055)) #FFD166, inset 0 0 0 max(3px, calc(var(--sz) * .085)) rgba(10,10,18,.85), 0 0 calc(var(--sz) * .5) -4px rgba(255,190,60,.55); }
.sp-av .sp-ic{ width:56%; height:56%; overflow:visible; }
.sp-mono{ font:800 calc(var(--sz) * .44)/1 var(--sx-font-display); color:#F2F2F8; letter-spacing:-.02em; }
.sp-av{ position:relative; isolation:isolate; }
.sp-av .sp-ic-fill{ width:62%; height:62%; position:relative; z-index:1; filter:drop-shadow(0 calc(var(--sz) * .02) 0 rgba(0,0,0,.5)) drop-shadow(0 0 calc(var(--sz) * .07) var(--rg)); }
/* epic: a soft light sweeps around the rim; legendary: a gold sheen turns around the disc + a glint (looks only) */
.sp-av[data-r="epic"]::before, .sp-av[data-r="legendary"]::before{ content:''; position:absolute; inset:-25%; z-index:0; pointer-events:none; border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 62%, color-mix(in srgb, var(--rc) 55%, transparent) 74%, transparent 86%); animation:sp-av-turn 7s linear infinite;
  -webkit-mask:radial-gradient(circle closest-side, transparent 52%, #000 57%, #000 67%, transparent 70%); mask:radial-gradient(circle closest-side, transparent 52%, #000 57%, #000 67%, transparent 70%); }
.sp-av[data-r="legendary"]::before{ background:conic-gradient(from 0deg, transparent 0 55%, rgba(255,226,140,.55) 70%, rgba(255,255,255,.65) 74%, rgba(255,190,60,.35) 80%, transparent 90%); animation-duration:4.5s; }
.sp-av[data-r="legendary"]::after{ content:''; position:absolute; z-index:2; pointer-events:none; width:22%; height:22%; left:66%; top:12%;
  background:radial-gradient(closest-side, #fff, rgba(255,240,190,.6) 40%, transparent); clip-path:polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation:sp-av-glint 2.6s ease-in-out infinite; }
@keyframes sp-av-turn{ to{ transform:rotate(360deg); } }
@keyframes sp-av-glint{ 0%, 60%, 100%{ opacity:0; transform:scale(.4); } 75%{ opacity:1; transform:scale(1); } }
@media (prefers-reduced-motion: reduce){ .sp-av::before, .sp-av::after{ animation:none !important; } .sp-av[data-r="legendary"]::after{ opacity:.8; } }
/* Level progress ring (header circle, big avatars) */
.sp-ring{ --p:0; --lc:#FFB020; width:100%; height:100%; border-radius:50%; padding:max(2.5px, calc(var(--sz) * .07)); box-sizing:border-box;
  background:conic-gradient(var(--lc) calc(var(--p) * 1%), rgba(255,255,255,.12) 0); }
.sp-lv{ position:absolute; right:calc(var(--sz) * -.12); bottom:calc(var(--sz) * -.08); min-width:max(15px, calc(var(--sz) * .36)); height:max(13px, calc(var(--sz) * .3)); padding:0 3px; box-sizing:border-box;
  border-radius:99px; background:#FFB020; color:#140B00; font:800 max(8.5px, calc(var(--sz) * .2))/max(13px, calc(var(--sz) * .3)) var(--sx-font-mono); text-align:center; box-shadow:0 0 0 2px #0A0A12; font-variant-numeric:tabular-nums; }

/* Name colors: gradient text; legendary ones shimmer */
.sp-nm{ font:800 15px/1.2 var(--sx-font-display); letter-spacing:-.01em; color:#F5F5FA; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.sp-nm:not(.spn-white){ -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; padding-right:.06em; }
.spn-ice{ background-image:linear-gradient(100deg, #FFFFFF 10%, #CFF7FF 45%, #7DEBFF 100%); }
.spn-toxic{ background-image:linear-gradient(100deg, #F2FF7A 0%, #A8FF4D 45%, #2EE88A 100%); }
.spn-flame{ background-image:linear-gradient(100deg, #FFD166 0%, #FF8A3D 50%, #FF4D7A 100%); }
.spn-electric{ background-image:linear-gradient(100deg, #A6F4FF 0%, #4DE3FF 40%, #4D8BFF 100%); }
.spn-sunset{ background-image:linear-gradient(100deg, #FF6FB0 0%, #FF8A3D 50%, #FFD166 100%); }
.spn-royal{ background-image:linear-gradient(100deg, #E0C7FF 0%, #A77BFF 45%, #5C8DFF 100%); }
.spn-aurora{ background-image:linear-gradient(100deg, #5CFFB0, #4DE3FF, #C08CFF, #4DE3FF, #5CFFB0); background-size:300% 100%; animation:spn-flow 7s ease-in-out infinite alternate; }
.spn-chrome{ background-image:linear-gradient(180deg, #FFFFFF 0%, #E6E8F0 38%, #8E93A6 52%, #D9DCE6 70%, #FFFFFF 100%); filter:drop-shadow(0 1px 0 rgba(0,0,0,.35)); }
.spn-gold{ background-image:linear-gradient(100deg, #E0A526 0%, #FFD166 30%, #FFF8DC 45%, #FFD166 58%, #E6A22B 80%, #FFE29A 100%); background-size:220% 100%; animation:spn-shine 3.4s linear infinite; filter:drop-shadow(0 0 6px rgba(255,190,60,.35)); }
.spn-holo{ background-image:linear-gradient(100deg, #FF8AD8, #FFD166, #7CFFB2, #4DE3FF, #B28CFF, #FF8AD8); background-size:250% 100%; animation:spn-shine 5s linear infinite; filter:drop-shadow(0 0 6px rgba(178,140,255,.35)); }
@keyframes spn-shine{ from{ background-position:120% 0; } to{ background-position:-120% 0; } }
@keyframes spn-flow{ from{ background-position:0% 0; } to{ background-position:100% 0; } }

/* Title chip */
.sp-tt{ --tc:#B4B4C8; display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 9px 0 7px; border-radius:999px; box-sizing:border-box; max-width:100%; flex:none;
  font:800 10.5px/1 var(--sx-font-mono); letter-spacing:.07em; text-transform:uppercase; white-space:nowrap; color:var(--tc);
  background:color-mix(in srgb, var(--tc) 12%, #14141D); border:1px solid color-mix(in srgb, var(--tc) 42%, transparent); }
.sp-tt svg{ width:1.25em; height:1.25em; flex:none; }
.sp-tt[data-r="rare"]{ --tc:#6FEAFF; }
.sp-tt[data-r="epic"]{ --tc:#CF9BFF; }
.sp-tt[data-r="legendary"]{ color:#2A1A00; border-color:transparent; background:linear-gradient(110deg, #FFE7A3 0%, #FFC94D 40%, #FFF3C9 52%, #F0A12A 100%); box-shadow:0 0 12px -3px rgba(255,190,60,.6); }

/* Flame + streak chip in the player's flame */
.sp-fl{ width:1em; height:1em; flex:none; overflow:visible; transform-origin:50% 92%; animation:sp-flick 1.9s ease-in-out infinite; }
.sp-fl[data-fl="rainbow"]{ animation:sp-flick 1.9s ease-in-out infinite, sp-hue 6s linear infinite; }
@keyframes sp-flick{ 0%,100%{ transform:scale(1) rotate(-2deg); } 50%{ transform:scale(1.05,1.09) rotate(2deg); } }
@keyframes sp-hue{ to{ filter:hue-rotate(360deg); } }
.sp-fc{ --fc:#FFB020; display:inline-flex; align-items:center; gap:3px; flex:none; height:24px; padding:0 9px 0 6px; border-radius:999px; box-sizing:border-box;
  background:color-mix(in srgb, var(--fc) 13%, #13131B); border:1px solid color-mix(in srgb, var(--fc) 40%, transparent);
  color:color-mix(in srgb, var(--fc) 45%, #FFFFFF); font:800 12.5px/1 var(--sx-font-display); font-variant-numeric:tabular-nums; }
.sp-fc .sp-fl{ width:15px; height:15px; filter:drop-shadow(0 0 4px color-mix(in srgb, var(--fc) 70%, transparent)); }
.sp-fc.is-cold{ opacity:.8; }
.sp-fc.is-cold .sp-fl{ animation:none; }
.sx-streak .sp-fl{ width:20px; height:20px; filter:drop-shadow(0 0 6px color-mix(in srgb, var(--fc, #FFB020) 70%, transparent)); }
.sx-streak.is-cold .sp-fl{ filter:grayscale(1) opacity(.45); animation:none; }

@media (prefers-reduced-motion: reduce){
  .sp-fl, .sp-fl[data-fl="rainbow"], .spn-gold, .spn-holo, .spn-aurora{ animation:none !important; }
}
/* A streak pill drawn in the player's equipped flame color (set --fc + .has-fc) */
.sx-streak.has-fc:not(.is-cold){ background:color-mix(in srgb, var(--fc) 12%, #14141C); border-color:color-mix(in srgb, var(--fc) 40%, transparent); color:color-mix(in srgb, var(--fc) 35%, #FFFFFF); }

/* ==========================================================================
   VAULT PREVIEW ART (.v-art) — rendered by StreakyData.itemArt(item). Shared by
   vault.html and the in-game Vault panel (streaky-kit.js).
   ========================================================================== */
.v-art{ position:relative; aspect-ratio:16 / 11; border-radius:11px; overflow:hidden; display:grid; place-items:center;
  background:radial-gradient(120% 90% at 50% 0%, #20202F 0%, #13131C 70%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); }
.v-art > svg{ width:100%; height:100%; display:block; }
.v-art .glyph{ font-size:38px; }
.v-art-flame{ background:radial-gradient(55% 55% at 50% 80%, color-mix(in srgb, var(--fc) 28%, transparent), transparent 70%), radial-gradient(120% 90% at 50% 0%, #20202F, #13131C 70%); }
.v-fl{ display:grid; place-items:center; height:70%; aspect-ratio:1; }
.v-fl .sp-fl{ width:100%; height:100%; filter:drop-shadow(0 0 12px color-mix(in srgb, var(--fc) 60%, transparent)); }
.v-fl-chip{ position:absolute; right:8px; bottom:8px; transform:scale(.9); transform-origin:100% 100%; }
.v-art-name .v-nm{ font-size:clamp(20px, 5.4vw, 26px); max-width:100%; }
.v-art .nm{ font:800 clamp(22px, 5.5vw, 28px)/1 var(--sx-font-display); letter-spacing:-.02em; padding:0 6px; }
.v-art .nm-plain{ color:#F5F5FA; }
.v-art .nm-grad{ -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 2px 10px rgba(0,0,0,.4)); }
.v-art .nm-wrap{ display:grid; justify-items:center; gap:8px; max-width:92%; min-width:0; }
.v-art .nm-wrap i{ display:block; width:44px; height:3px; border-radius:2px; background-color:#F5F5FA; opacity:.85; }
.v-art .nm-wrap i.spn-white{ background:#F5F5FA; }
.tok{ --tk:60px; width:var(--tk); height:var(--tk); border-radius:50%; padding:3px; background:conic-gradient(from 200deg, var(--ring1), var(--ring2), var(--ring1)); box-shadow:0 6px 20px -4px var(--ring1); flex:none; }
.tok > span{ width:100%; height:100%; border-radius:50%; background:radial-gradient(circle at 35% 28%, #2E2E44, #15151F 70%); display:grid; place-items:center; color:#fff; font-size:calc(var(--tk) * .42); box-shadow:inset 0 0 0 2px rgba(10,10,18,.8); }
.tok .sx-icon{ width:46%; height:46%; }
.tp-wrap{ display:grid; justify-items:center; gap:8px; }
.tp-wrap small{ font:800 14px/1 var(--sx-font-display); color:#F5F5FA; }
.tp{ display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:6px 11px; border-radius:999px; border:1px solid color-mix(in srgb, var(--tc) 55%, transparent); background:color-mix(in srgb, var(--tc) 14%, #13131C); color:var(--tc); font:800 11.5px/1 var(--sx-font-mono); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.tp .sx-icon{ width:13px; height:13px; }
.v-art .pulse{ transform-origin:center; transform-box:fill-box; animation:v-beat 1.2s ease-out infinite; }
@keyframes v-beat{ 0%{ transform:scale(.6); opacity:1; } 100%{ transform:scale(1.25); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .v-art .pulse{ animation:none !important; } }

/* Collector rank frame (badges earned): a ring in the rank colour around your avatar; diamond/platinum shimmer. Looks only. */
.cr-frame .sp-avw{ border-radius:50%; box-shadow:0 0 0 max(2px, calc(var(--sz) * .06)) var(--crc, transparent), 0 0 calc(var(--sz) * .35) -2px var(--crc, transparent); }
.cr-frame.cr-platinum .sp-avw, .cr-frame.cr-diamond .sp-avw{ animation:cr-pulse 3s ease-in-out infinite; }
@keyframes cr-pulse{ 50%{ box-shadow:0 0 0 max(2px, calc(var(--sz) * .06)) var(--crc), 0 0 calc(var(--sz) * .6) 0 var(--crc); } }
@media (prefers-reduced-motion: reduce){ .cr-frame .sp-avw{ animation:none !important; } }
.cr-chip{ display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 9px 0 6px; border-radius:99px; font:800 10.5px/1 var(--sx-font-mono); letter-spacing:.06em; text-transform:uppercase;
  color:var(--crc); background:color-mix(in srgb, var(--crc) 14%, transparent); border:1px solid color-mix(in srgb, var(--crc) 50%, transparent); white-space:nowrap; }
.cr-chip svg{ width:14px; height:14px; }