:root {
  --bg0: #020617;
  --bg1: #0f172afa;
  --bg2: #030a1afa;
  --card: #0f172aeb;
  --card2: #0f172aff;
  --glass: #0206178c;
  --bweak: #94a3b838;
  --bmid: #3b82f666;
  --bstrong: #38bdf89e;
  --t1: #e2e8f0f5;
  --t2: #bfdbfeeb;
  --t3: #94a3b8eb;
  --tdim: #91a8c8bf;
  --green: #22c55e;
  --cyan: #38bdf8;
  --blue: #3b82f6;
  --amber: #f59e0b;
  --rose: #fb7185;
  --purple: #a855f7;
  --orange: #fb923c;
  --glow-green: #22c55e73;
  --glow-cyan: #38bdf866;
  --glow-blue: #3b82f659;
  --glow-amber: #f59e0b59;
  --g-edge: linear-gradient(90deg, var(--green), var(--blue), var(--amber));
  --g-hero: radial-gradient(circle at 0 0, #38bdf82e, transparent 55%), radial-gradient(circle at 100% 100%, #22c55e1f, transparent 55%), var(--bg1);
  --mono: "JetBrains Mono", "Fira Code", "SF Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --radius: 18px;
  --maxw: 520px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body.landing-app {
  margin: 0;
  min-height: 100vh;
  background: var(--bg0);
  color: var(--t1);
  font-family: var(--mono);
  font-size: 14px;
  display: grid;
  place-items: center;
  padding: 8px;
  overflow-x: hidden;
}
.site-shell { width: 100%; max-width: var(--maxw); position: relative; z-index: 1; }
.app-root {
  width: 100%;
  min-height: min(820px, 100vh - 16px);
  background: var(--g-hero);
  border-radius: var(--radius);
  box-shadow: 0 32px 80px #0f172ad9, 0 0 0 1px #0f172aff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}
.app-safe-top { height: env(safe-area-inset-top, 0px); flex-shrink: 0; }
.app-safe-bottom { height: calc(env(safe-area-inset-bottom, 0px) + 4px); flex-shrink: 0; }
.app-main { flex: 1 1 auto; overflow-y: auto; scroll-behavior: smooth; padding-bottom: 8px; }

/* Gate */
.gate {
  position: fixed; inset: 0; z-index: 999;
  display: grid; place-items: center;
  background: var(--bg0); padding: 20px;
}
.gate-card {
  max-width: 440px; width: 100%;
  max-height: min(92vh, 900px);
  overflow-y: auto;
  background: var(--g-hero);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px #000000e6, 0 0 0 1px #0f172aff;
  padding: 28px 22px; text-align: center;
}
.gate-dots { justify-content: center; margin-bottom: 16px; }
.gate-card .eyebrow { color: var(--cyan); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 8px; }
.gate-card h1 { font-size: 1.3rem; letter-spacing: .08em; margin-bottom: 12px; color: var(--t1); }
.gate-card > p#auth-description { font-size: .82rem; color: var(--t3); line-height: 1.55; margin-bottom: 14px; }
.welcome-promo {
  text-align: left;
  border: 1px solid var(--bmid);
  border-radius: 14px;
  background: #020617cc;
  padding: 12px 12px 10px;
  margin-bottom: 16px;
  box-shadow: inset 0 0 0 1px #22c55e22;
}
.welcome-lang {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-bottom: 10px;
}
.welcome-lang-btn {
  border: 1px solid var(--bweak);
  border-radius: 10px;
  background: var(--bg2);
  color: var(--t3);
  padding: 6px 4px;
  font: .68rem var(--mono);
  cursor: pointer;
}
.welcome-lang-btn.active {
  border-color: var(--cyan);
  color: var(--t1);
  box-shadow: 0 0 10px var(--glow-cyan);
}
.welcome-lead {
  font-size: .78rem;
  color: var(--t1);
  line-height: 1.45;
  margin: 0 0 6px;
  font-weight: 600;
}
.welcome-hook {
  font-size: .72rem;
  color: var(--cyan);
  line-height: 1.4;
  margin: 0 0 8px;
}
.welcome-note {
  font-size: .7rem;
  color: var(--t2);
  line-height: 1.4;
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--bweak);
  background: #0b1220;
}
.welcome-list {
  margin: 0 0 8px;
  padding-left: 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--t2);
  font-size: .68rem;
  line-height: 1.4;
}
.welcome-list li::marker { color: var(--green); }
.welcome-tag {
  margin: 0;
  font-size: .7rem;
  font-weight: 700;
  color: var(--green);
  letter-spacing: .02em;
  line-height: 1.35;
}
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 16px; }
.auth-tab { border: 1px solid var(--bweak); border-radius: 12px; background: var(--bg2); color: var(--t3); padding: 8px; font: .72rem var(--mono); cursor: pointer; }
.auth-tab.active { border-color: var(--green); color: var(--t1); box-shadow: 0 0 10px var(--glow-green); }
.auth-form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.auth-form label { display: flex; flex-direction: column; gap: 5px; color: var(--t2); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.auth-form input { border: 1px solid var(--bmid); border-radius: 10px; background: var(--bg2); color: var(--t1); padding: 10px 12px; font: .8rem var(--mono); outline: none; }
.auth-form input:focus { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--glow-cyan); }
.auth-form .age-confirm { flex-direction: row; align-items: flex-start; gap: 8px; text-transform: none; letter-spacing: 0; line-height: 1.4; }
.auth-form .age-confirm input { margin-top: 2px; }
.account-email { max-width: 120px; overflow: hidden; text-overflow: ellipsis; color: var(--t3); font-size: .62rem; }
.small.muted { font-size: .68rem; color: var(--tdim); margin-top: 12px; min-height: 1.2em; }

/* Buttons */
.btn-neon-primary {
  width: 100%;
  border-radius: 30px;
  border: 1px solid var(--green);
  background: radial-gradient(circle at top, var(--green), #014034);
  color: #00110b;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 12px 14px;
  cursor: pointer;
  box-shadow: 0 10px 26px #000c;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn-neon-primary:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 14px 32px #000000e6; }
.btn-neon-primary:active { transform: translateY(1px) scale(.98); }
.btn-neon-primary:disabled { opacity: .4; cursor: not-allowed; filter: grayscale(.5); transform: none; }
.btn-ghost {
  width: 100%;
  border-radius: 30px;
  border: 1px solid var(--bmid);
  background: transparent;
  color: var(--t1);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 10px 14px;
  cursor: pointer;
  transition: border-color .18s ease;
}
.btn-ghost:hover { border-color: var(--bstrong); }
.btn-ghost:disabled { opacity: .3; cursor: not-allowed; }
.btn-ghost-small {
  border: 1px solid var(--bweak);
  background: var(--bg2);
  color: var(--t2);
  font-size: .68rem;
  letter-spacing: .08em;
  padding: 5px 14px;
  border-radius: 12px;
  cursor: pointer;
  font-family: var(--mono);
  transition: border-color .18s ease;
}
.btn-ghost-small:hover { border-color: var(--cyan); color: var(--t1); }
.btn-ghost-small:disabled { opacity: .35; cursor: not-allowed; }

/* Dots */
.console-dots, .window-dots { display: flex; align-items: center; gap: 6px; }
.dot { width: 9px; height: 9px; border-radius: 50%; }
.dot-red { background: #ff5f56; }
.dot-yellow { background: #ffbd2e; }
.dot-green { background: #27c93f; }

/* Topbar */
.app-header-v2 {
  flex-shrink: 0;
  padding: .7rem .9rem .85rem;
  background: var(--g-hero);
  border-bottom: 1px solid var(--bweak);
}
.app-header-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .55rem;
}
.header-brand { display: flex; align-items: center; gap: 8px; }
.brand-icon {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--green);
  color: #00110b;
  font-weight: 900;
  font-size: .85rem;
  letter-spacing: -.04em;
}
.brand-title { font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--t1); font-weight: 700; }
.brand-soft { color: var(--green); }
.topbar-actions { display: inline-flex; align-items: center; gap: .4rem; }
.lang-btn {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: 3px 10px; border-radius: 15px;
  border: 1px solid var(--bweak);
  background: radial-gradient(circle at 0 0, #38bdf833, transparent 70%);
  color: var(--t1); font-size: .7rem; cursor: pointer;
  font-family: var(--mono);
}
.lang-btn:hover { border-color: var(--cyan); }
.lang-flag { font-size: 1rem; }
.lang-short { font-weight: 600; letter-spacing: .08em; }

/* Hero */
.hero-header-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .35rem; }
.hero-status-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: 3px 10px; border-radius: 15px;
  font-size: .7rem;
  border: 1px solid #22c55e47;
  background: radial-gradient(circle at 0 50%, #22c55e80, transparent 70%);
  color: #dcfce7fa;
}
.hero-status-dot {
  width: 9px; height: 9px; border-radius: 15px;
  background: radial-gradient(circle at center, #86efacff, transparent 65%);
  box-shadow: 0 0 10px var(--glow-green);
}
.hero-mode-chip {
  font-size: .68rem; padding: 3px 10px; border-radius: 15px;
  letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid #50ffa38c;
  color: #6dffb1;
  background: #2ed5731f;
}
.hero-title {
  margin: 0; font-size: 1.35rem; letter-spacing: .12em; text-transform: uppercase; color: var(--t1);
}
.hero-title span.highlight {
  background: linear-gradient(120deg, #22c55eff, #38bdf8ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-flow {
  font-size: .7rem; color: #e2e8f0db;
  display: inline-flex; flex-wrap: wrap; gap: 3px; align-items: center;
  margin-bottom: .5rem;
}
.hero-flow .dim { opacity: .5; font-size: .6rem; }

/* Stats Grid */
.hero-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .4rem;
}
.stat-tile {
  position: relative;
  border-radius: 12px;
  padding: .5rem .6rem .55rem;
  background: radial-gradient(circle at 0 0, #38bdf824, transparent 70%), var(--card2);
  border: 1px solid #3b82f68c;
  box-shadow: 0 0 0 1px #020617a6, 0 10px 22px #0f172ad9;
  overflow: hidden;
}
.stat-tile::before {
  content: ""; position: absolute; inset: 0; inset-block-start: 0;
  height: 2px; background: var(--g-edge); opacity: .9;
}
.stat-tile::after {
  content: ""; position: absolute; right: -14px; top: -14px;
  width: 36px; height: 36px; border-radius: 15px;
  background: radial-gradient(circle at center, #38bdf859, transparent 65%); opacity: .45;
}
.stat-label { font-size: .6rem; text-transform: uppercase; letter-spacing: .16em; color: #93c5fde0; margin-bottom: 2px; }
.stat-value { font-size: 1.15rem; font-family: var(--mono); color: #e5f5fffa; line-height: 1.15; }
.stat-unit { font-size: .62rem; color: #86efaceb; margin-top: 2px; }

/* App Sections */
.app-section {
  background: var(--card);
  border-radius: 16px;
  border: 1px solid var(--bmid);
  padding: .75rem .8rem;
  margin: .9rem;
  overflow: hidden;
}
.app-section-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: .4rem; margin-bottom: .45rem;
}
.app-section-title { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--t2); }
.app-section-tag { font-size: .62rem; color: #93c5fde6; text-transform: uppercase; letter-spacing: .12em; }

/* Console */
.console-section { padding-top: .35rem; }
.console-card {
  border-radius: 14px;
  overflow: hidden;
  background: radial-gradient(circle at 0 0, #3b82f62e, transparent 60%), var(--bg2);
  border: 1px solid #62aaff8c;
}
.console-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .38rem .7rem;
  border-bottom: 1px solid #5c96e68c;
  font-size: .7rem; color: #cbe9ffeb;
}
.console-title { font-size: .68rem; letter-spacing: .08em; color: #cbe9ff; }
.console-tag { font-size: .6rem; padding: 1px 7px; border-radius: 8px; border: 1px solid #38bdf84d; color: #7cc5fb; }
.console-body { padding: .5rem .7rem .55rem; font-size: .7rem; color: #d5ffe5eb; font-family: var(--mono); line-height: 1.55; max-height: 220px; overflow-y: auto; }
.term-line { white-space: normal; overflow-wrap: anywhere; }
.term-prompt { color: #6efcfff5; }
.term-dim { color: var(--tdim); }
.term-cmd { color: #57f2b8f5; }
.term-log-green { color: #9fe3a0f5; }
.term-log-yellow { color: #ffe28af5; }
.term-log-red { color: #fda4af; }
.scan-controls { padding: .55rem .7rem .65rem; border-top: 1px solid #5c96e64d; background: #020617a6; }
.scan-step-label { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: #93c5fde6; margin-bottom: .4rem; }
.scan-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.scan-choice-grid-compact { margin-top: .4rem; }
.scan-choice {
  border: 1px solid color-mix(in srgb, var(--tag, #38bdf8) 45%, #334155);
  background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--tag, #38bdf8) 22%, transparent), transparent 70%), #0b1224;
  color: var(--t1); border-radius: 10px; padding: .45rem .5rem; text-align: left; cursor: pointer; font-family: var(--mono);
}
.scan-choice span { display: block; font-size: .72rem; font-weight: 700; }
.scan-choice small { display: block; margin-top: 2px; color: var(--t3); font-size: .58rem; }
.scan-choice:hover { border-color: var(--cyan); transform: translateY(-1px); }
.scan-deposit-row { display: flex; gap: .4rem; align-items: center; }
.scan-deposit-input {
  flex: 1 1 auto; display: flex; align-items: center; gap: .35rem; border: 1px solid var(--bmid);
  border-radius: 10px; background: #020617; color: var(--t2); padding: 0 .6rem; font-size: .72rem;
}
.scan-deposit-input input {
  width: 100%; border: 0; outline: 0; background: transparent; color: var(--t1);
  font: .8rem var(--mono); padding: .55rem 0;
}
.scan-next { width: auto; min-width: 110px; padding: .7rem .9rem; }
.scan-busy-wrap { display: flex; flex-direction: column; gap: .35rem; }
.scan-busy { color: #fde68a; font-size: .72rem; letter-spacing: .08em; }
.scan-progress { height: 6px; border-radius: 999px; background: #0b1224; border: 1px solid #334155; overflow: hidden; }
.scan-progress i { display: block; height: 100%; width: 10%; background: linear-gradient(90deg, #22c55e, #38bdf8); box-shadow: 0 0 10px #22c55e88; transition: width .25s ease; }
.scan-help { margin-top: .4rem; font-size: .62rem; color: var(--t3); line-height: 1.4; }
.scan-done-actions { display: flex; flex-direction: column; gap: .4rem; }
.btn-vip {
  width: 100%;
  border-radius: 30px;
  border: 1px solid #f59e0b;
  background: radial-gradient(circle at top, #fbbf24, #78350f);
  color: #1c1003;
  font-weight: 800;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 12px 14px;
  cursor: pointer;
  box-shadow: 0 10px 26px #000c, 0 0 18px #f59e0b55;
}
.btn-vip:hover { filter: brightness(1.08); transform: translateY(-1px); }
.vip-modal-card { max-width: 460px; }
.vip-plans { display: grid; grid-template-columns: 1fr; gap: .35rem; margin-bottom: .7rem; }
.vip-plan {
  display: grid; grid-template-columns: 1fr auto; gap: .1rem .5rem; align-items: center;
  text-align: left; border: 1px solid #f59e0b55; background: #1c1408; color: #fde68a;
  border-radius: 12px; padding: .55rem .65rem; cursor: pointer; font-family: var(--mono);
}
.vip-plan small { grid-column: 1 / -1; color: #fbbf24aa; font-size: .6rem; }
.vip-plan.active { border-color: #fbbf24; box-shadow: 0 0 0 1px #f59e0b66, 0 0 16px #f59e0b33; background: #2a1a05; }
.vip-card-row { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.scan-summary {
  display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-bottom: .55rem;
}
.scan-summary > div {
  border: 1px solid var(--bweak); border-radius: 10px; background: var(--bg2); padding: .45rem .55rem;
}
.scan-k { display: block; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--t3); margin-bottom: 2px; }
.scan-picks { display: flex; flex-direction: column; gap: .4rem; }
.scan-pick {
  display: grid; grid-template-columns: 72px 1fr; gap: .5rem; border: 1px solid var(--bweak);
  border-radius: 12px; background: var(--bg2); padding: .4rem; overflow: hidden;
}
.scan-pick-art { position: relative; height: 72px; border-radius: 8px; overflow: hidden; background: #071224; }
.scan-pick-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-pick-art .provider-tag { position: absolute; left: 4px; top: 4px; max-width: calc(100% - 8px); }
.scan-pick-top { display: flex; align-items: center; gap: .35rem; margin-bottom: .2rem; }
.scan-rank { font-size: .62rem; color: var(--cyan); letter-spacing: .08em; }
.scan-pick-metrics { display: flex; flex-wrap: wrap; gap: .3rem .55rem; font-size: .62rem; color: var(--t3); }
.scan-pick-metrics b { color: var(--t1); }
.scan-pola { display: flex; flex-direction: column; gap: .12rem; margin-top: .25rem; }
.scan-pola code { font-size: .6rem; color: #c4f1ff; letter-spacing: .02em; }
.scan-pick-tip { margin-top: .25rem; font-size: .62rem; color: #bbf7d0d9; }
.scan-advice { margin-top: .55rem; border-top: 1px dashed var(--bweak); padding-top: .45rem; }
.scan-advice h3 { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--t2); margin-bottom: .3rem; }
.scan-advice ul { margin: 0; padding-left: 1rem; display: flex; flex-direction: column; gap: .2rem; }
.scan-advice li { font-size: .68rem; color: var(--t3); line-height: 1.4; }
.live-stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .35rem; margin-bottom: .55rem; }
.live-stat { border: 1px solid var(--bweak); border-radius: 10px; background: var(--bg2); padding: .4rem .5rem; }
.live-stat span { display: block; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--t3); }
.live-stat strong { font-size: .9rem; color: var(--t1); }
.live-jackpots { display: grid; grid-template-columns: 1fr; gap: .35rem; margin-bottom: .55rem; }
.live-jack {
  display: grid; grid-template-columns: auto 1fr; gap: .1rem .45rem; align-items: center;
  border: 1px solid #f59e0b66; border-radius: 12px; background: radial-gradient(circle at 0 0, #f59e0b22, transparent 60%), #1a1205;
  padding: .45rem .55rem;
}
.live-jack strong { color: #fde68a; font-size: .95rem; }
.live-jack span, .live-jack small { color: #fbbf24cc; font-size: .66rem; }
.live-jack small { grid-column: 2; }
.live-tx-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .28rem; max-height: 280px; overflow-y: auto; }
.live-tx {
  display: grid; grid-template-columns: auto 1fr auto; gap: .4rem; align-items: center;
  border: 1px solid var(--bweak); border-radius: 10px; background: var(--bg2); padding: .35rem .45rem;
}
.live-tx-main { display: flex; flex-direction: column; gap: .08rem; min-width: 0; }
.live-tx-main strong { color: var(--t1); font-size: .8rem; }
.live-tx-main span { color: var(--t3); font-size: .62rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-tx time { color: var(--tdim); font-size: .6rem; font-family: var(--mono); }
.live-badge {
  font-size: .54rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  padding: 2px 6px; border-radius: 999px; border: 1px solid;
}
.live-badge.deposit { color: #86efac; border-color: #22c55e66; background: #14532d55; }
.live-badge.withdraw { color: #93c5fd; border-color: #38bdf866; background: #0c4a6e55; }
.live-badge.jack, .live-badge.jackpot { color: #fde68a; border-color: #f59e0b88; background: #78350f66; }
.live-tx.deposit { border-color: #22c55e33; }
.live-tx.withdraw { border-color: #38bdf833; }
.play-game-btn { margin-top: .45rem; width: 100%; padding: .55rem .8rem; font-size: .7rem; }
.play-modal {
  position: fixed; inset: 0; z-index: 1200;
  display: grid; place-items: center;
  background: #020617d9; padding: 16px;
  backdrop-filter: blur(5px);
}
.play-modal[hidden] { display: none !important; }
.play-modal-card {
  width: min(420px, 100%);
  background: var(--g-hero);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px #000000e6, 0 0 0 1px #0f172aff;
  padding: 24px 20px;
  text-align: center;
}
.play-modal-card h2 { font-size: 1.1rem; letter-spacing: .08em; margin: .2rem 0 .45rem; }
.play-modal-game { color: var(--cyan); font-size: .78rem; margin-bottom: .85rem; }
.play-modal-card .auth-form { text-align: left; }
.play-note {
  margin: .15rem 0 .2rem;
  padding: .45rem .55rem;
  border-radius: 8px;
  border: 1px solid #f59e0b55;
  background: #f59e0b14;
  color: #fde68a;
  font-size: .68rem;
  line-height: 1.4;
}
.console-footer {
  padding: .35rem .7rem .4rem;
  border-top: 1px dashed #6296e68c;
  display: flex; align-items: center; justify-content: space-between;
  font-size: .66rem; color: #b9daffe6;
}
.console-status { display: inline-flex; align-items: center; gap: .3rem; }
.console-status-dot {
  width: 7px; height: 7px; border-radius: 15px;
  background: radial-gradient(circle at center, #7afff1f5, transparent 65%);
  box-shadow: 0 0 10px var(--glow-cyan);
}

/* Snapshot list */
.snapshot-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.snapshot-item {
  padding: .35rem .4rem;
  border-top: 1px dashed #3b82f659;
  display: flex; align-items: center; justify-content: space-between; gap: .4rem;
}
.snapshot-item:first-child { border-top: none; }
.snapshot-left { display: grid; grid-template-columns: 40px 1fr; align-items: center; column-gap: .45rem; }
.snapshot-art { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; border: 1px solid var(--bweak); }
.snapshot-copy { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.provider-tag {
  display: inline-flex; align-self: flex-start;
  font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--tag, #38bdf8) 70%, transparent);
  color: var(--tag, #38bdf8);
  background: color-mix(in srgb, var(--tag, #38bdf8) 16%, #020617);
}
.snapshot-name { font-size: .76rem; color: #e5edfffa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snapshot-right { text-align: right; display: flex; flex-direction: column; gap: .08rem; }
.snapshot-score { font-size: .85rem; color: #bbf7d0f5; font-family: var(--mono); font-weight: 700; }
.snapshot-meta { font-size: .6rem; color: #b4d7ffe0; font-family: var(--mono); }
.snapshot-actions {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin-top: .45rem; padding-top: .35rem;
  border-top: 1px solid var(--bweak);
}
.snapshot-page { font-size: .64rem; color: var(--t3); font-family: var(--mono); }

/* Filters */
.filter-row {
  display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .5rem;
}
.filter-label {
  display: flex; align-items: center; gap: .35rem;
  background: var(--bg2);
  border: 1px solid var(--bweak);
  border-radius: 12px;
  padding: 6px 10px;
  flex: 1 1 auto; min-width: 100px;
  font-size: .7rem; color: var(--t3);
}
.filter-label input, .filter-label select {
  background: transparent; border: none; outline: none;
  color: var(--t1); font-family: var(--mono); font-size: .7rem;
  width: 100%;
}
.filter-label input::placeholder { color: var(--tdim); }
.filter-label select { cursor: pointer; }
.filter-label:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 1px #38bdf840; }

/* Cards Grid */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .4rem;
}
.game-card {
  background: radial-gradient(circle at 0 0, #38bdf818, transparent 60%), var(--bg2);
  border: 1px solid var(--bweak);
  border-radius: 12px;
  padding: .55rem .5rem;
  cursor: pointer;
  transition: border-color .15s ease, transform .12s ease;
  display: flex; flex-direction: column; gap: .25rem;
}
.game-card:hover { border-color: var(--cyan); transform: translateY(-1px); }
.game-card .card-art { position: relative; height: 92px; border-radius: 9px; overflow: hidden; border: 1px solid var(--bweak); background: radial-gradient(circle at 30% 20%, #38bdf840, transparent 60%), #071224; display: grid; place-items: center; }
.game-card .card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.game-card .card-art-fallback span { color: var(--cyan); font-size: 1.7rem; font-weight: 700; }
.game-card .card-art .provider-tag { position: absolute; left: 6px; top: 6px; z-index: 2; box-shadow: 0 4px 12px #0009; max-width: calc(100% - 12px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-card .card-meta { display: flex; align-items: center; justify-content: space-between; gap: .35rem; margin-top: auto; }
.game-card .card-provider {
  font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  padding: 2px 6px; border-radius: 999px; border: 1px solid; max-width: 70%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.game-card .card-name { font-size: .72rem; color: var(--t1); line-height: 1.2; }
.game-card .card-winrate { font-size: .9rem; font-family: var(--mono); font-weight: 700; }
.game-card .card-pattern { font-size: .58rem; color: var(--tdim); }
.winrate-high { color: #86efac; }
.winrate-mid { color: #fcd34d; }
.winrate-low { color: #fca5a5; }
.empty { text-align: center; color: var(--t3); font-size: .74rem; padding: 20px 0; }

/* Provider bars */
.provider-bar-row {
  display: flex; align-items: center; gap: .5rem;
  padding: .25rem 0;
}
.provider-bar-label {
  font-size: .66rem; color: var(--t3); width: 80px; flex-shrink: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.provider-bar-track {
  flex: 1 1 auto; height: 6px; border-radius: 10px;
  background: var(--bg0); overflow: hidden; border: 1px solid var(--bmid);
}
.provider-bar-fill {
  height: 100%; border-radius: inherit;
  transition: width .4s ease;
}
.provider-bar-count { font-size: .62rem; color: var(--tdim); font-family: var(--mono); width: 40px; text-align: right; }

/* Trust grid */
.trust-section { padding-bottom: 1rem; }
.trust-grid { display: flex; flex-direction: column; gap: .5rem; }
.trust-grid article {
  padding: .45rem .5rem;
  border-radius: 10px;
  background: var(--bg2);
  border: 1px solid var(--bweak);
}
.trust-grid article h3 { font-size: .7rem; color: var(--t2); margin-bottom: 3px; display: flex; align-items: center; gap: 6px; }
.trust-grid article p { font-size: .64rem; color: var(--t3); line-height: 1.45; }
.trust-icon { color: var(--green); font-size: .75rem; width: 16px; }

/* Footer */
.app-footer {
  flex-shrink: 0;
  padding: .5rem .8rem .6rem;
  border-top: 1px solid var(--bweak);
  text-align: center;
}
.app-footer p { font-size: .62rem; color: var(--tdim); margin-bottom: 4px; }
.app-footer nav { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.app-footer nav a { font-size: .6rem; color: var(--t3); text-decoration: none; }
.app-footer nav a:hover { color: var(--cyan); }

/* scanline */
.scanline {
  pointer-events: none; position: fixed; inset: 0; z-index: 99;
  background-image: linear-gradient(#fff0 0%, #ffffff03 50%, #fff0 100%);
  background-size: 100% 2px; opacity: .03;
}

/* matrix canvas */
#matrixCanvas {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  mix-blend-mode: screen; opacity: .35;
}

/* top loader */
#topLoader { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 999; pointer-events: none; }
#topLoader .bar { height: 100%; width: 1%; background: linear-gradient(90deg, var(--green), var(--cyan)); transition: width .32s linear; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

@media (max-width: 400px) {
  .cards-grid { grid-template-columns: 1fr 1fr; }
  .filter-row { flex-direction: column; }
}