@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
:root {
  --bg: #090b14;
  --text: #f5f7ff;
  --text-secondary: #b7bfd8;
  --muted: #7d87a6;
  --panel: rgba(13, 18, 34, .76);
  --panel-strong: rgba(15, 18, 36, .9);
  --panel-soft: rgba(255,255,255,.05);
  --panel-border: rgba(255,255,255,.12);
  --accent: #9b6bff;
  --accent-2: #3dd9ff;
  --accent-3: #ffd166;
  --accent-glow: rgba(155, 107, 255, .38);
  --success: #42d392;
  --danger: #ff6b81;
  --radius: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow: 0 24px 55px rgba(0,0,0,.35);
  --backdrop-url: url('../assets/backgrounds/premium.svg');
}
body {
  margin: 0;
  min-height: 100dvh;
  padding: 20px 16px 26px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body::before,
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  transition: all .55s ease;
}
body::before {
  z-index: 0;
  background-image:
    radial-gradient(circle at 18% 14%, color-mix(in srgb, var(--accent) 34%, transparent) 0%, transparent 32%),
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--accent-2) 26%, transparent) 0%, transparent 28%),
    radial-gradient(circle at 50% 88%, color-mix(in srgb, var(--accent-3) 20%, transparent) 0%, transparent 22%),
    linear-gradient(180deg, rgba(4,6,12,.58), rgba(6,8,16,.82)),
    var(--backdrop-url);
  background-size: auto, auto, auto, auto, cover;
  background-position: center;
  filter: saturate(1.1) brightness(.98);
}
body::after {
  z-index: 1;
  background:
    linear-gradient(135deg, rgba(255,255,255,.03) 0%, transparent 20%, transparent 80%, rgba(255,255,255,.02) 100%),
    radial-gradient(circle at 50% 50%, transparent 55%, rgba(255,255,255,.03) 100%);
}
body[data-theme='premium'] { --accent:#8f6dff; --accent-2:#4fd1ff; --accent-3:#ffc95a; --panel:rgba(14,19,40,.74); --panel-strong:rgba(12,16,36,.92); --backdrop-url:url('../assets/backgrounds/premium.svg'); }
body[data-theme='crash'] { --accent:#ff7b4a; --accent-2:#ffbf47; --accent-3:#ff5e7a; --panel:rgba(28,16,20,.74); --panel-strong:rgba(26,15,19,.92); --backdrop-url:url('../assets/backgrounds/crash.svg'); }
body[data-theme='ice'] { --accent:#44d7ff; --accent-2:#8ceaff; --accent-3:#7a8cff; --panel:rgba(9,25,42,.74); --panel-strong:rgba(11,24,44,.92); --backdrop-url:url('../assets/backgrounds/ice.svg'); }
body[data-theme='jackpot'] { --accent:#ff58b0; --accent-2:#ff8d3b; --accent-3:#ffd45c; --panel:rgba(28,12,29,.74); --panel-strong:rgba(30,13,32,.92); --backdrop-url:url('../assets/backgrounds/jackpot.svg'); }
body[data-theme='vault'] { --accent:#56d5b4; --accent-2:#41b4ff; --accent-3:#d9ff72; --panel:rgba(10,24,29,.74); --panel-strong:rgba(10,24,29,.92); --backdrop-url:url('../assets/backgrounds/vault.svg'); }
body[data-theme='result'] { --accent:#ab7bff; --accent-2:#ffd166; --accent-3:#54ddff; --panel:rgba(18,16,37,.74); --panel-strong:rgba(16,15,34,.92); --backdrop-url:url('../assets/backgrounds/result.svg'); }

.bg-symbols { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.bg-symbol { position: absolute; opacity: .1; filter: drop-shadow(0 10px 28px rgba(0,0,0,.25)); user-select:none; animation: floatY 11s ease-in-out infinite alternate; }
.sym-cherries { width: 82px; top: 8%; left: 4%; }
.sym-diamond { width: 78px; top: 10%; right: 5%; animation-duration: 12s; }
.sym-seven { width: 68px; top: 40%; right: 6%; animation-duration: 10s; }
.sym-bell { width: 62px; bottom: 18%; left: 7%; animation-duration: 9.5s; }
.sym-crown { width: 74px; bottom: 10%; right: 18%; }
.sym-grapes { width: 72px; top: 62%; left: 4%; animation-duration: 13s; }
.sym-slot { width: 94px; bottom: 7%; right: 3%; opacity:.09; animation-duration: 14s; }
.sym-strawberry { width: 68px; top: 24%; left: 14%; }
.sym-clover { width: 70px; top: 18%; left: 46%; opacity:.07; }
.sym-coins { width: 76px; top: 56%; right: 4%; }
.sym-horseshoe { width: 68px; bottom: 31%; right: 9%; }
.sym-dice { width: 62px; bottom: 28%; left: 22%; }
.sym-bar { width: 64px; top: 74%; left: 52%; }
@keyframes floatY { 0% { transform: translate3d(0,0,0) rotate(-6deg) scale(1); } 100% { transform: translate3d(-8px,12px,0) rotate(6deg) scale(1.04);} }

.quiz-wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 640px;
  min-height: calc(100dvh - 50px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.screen { display: none; width: 100%; animation: screenIn .36s ease both; }
.screen.active { display: flex; flex-direction: column; gap: 22px; }
@keyframes screenIn { from { opacity: 0; transform: translateY(14px) scale(.985);} to { opacity:1; transform:none; } }

#screen-intro,
#screen-result,
.screen:not(#screen-intro):not(#screen-result) {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)), var(--panel);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  border-radius: var(--radius-lg);
}
#screen-intro,
#screen-result { padding: 34px 28px; }
.screen:not(#screen-intro):not(#screen-result) { padding: 28px 24px 24px; }
#screen-intro::before,
#screen-result::before,
.screen:not(#screen-intro):not(#screen-result)::before {
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:
    linear-gradient(130deg, rgba(255,255,255,.08) 0%, transparent 28%, transparent 72%, rgba(255,255,255,.05) 100%),
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 22%, transparent), transparent 34%),
    radial-gradient(circle at bottom left, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 30%);
  opacity: .95;
}
#screen-intro > *, #screen-result > *, .screen:not(#screen-intro):not(#screen-result) > * { position: relative; z-index: 1; }

#screen-intro { align-items:center; text-align:center; }
.intro-badge {
  display:inline-flex; align-items:center; gap:8px; align-self:center;
  padding:10px 16px; border-radius:999px; font-weight:800; letter-spacing:.02em;
  color:var(--text); border:1px solid rgba(255,255,255,.14);
  background: color-mix(in srgb, var(--accent) 18%, rgba(255,255,255,.04));
  box-shadow: 0 12px 24px rgba(0,0,0,.2);
}
.intro-title { font-size: clamp(1.95rem, 4vw, 2.55rem); line-height:1.12; font-weight:900; letter-spacing:-.03em; }
.intro-desc { max-width: 520px; font-size:1rem; color:var(--text-secondary); }
.bonus-box {
  width:100%; max-width:520px; padding:16px 18px; border-radius:18px; color:var(--text);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, rgba(255,255,255,.03)), color-mix(in srgb, var(--accent-2) 15%, rgba(255,255,255,.03)));
  border:1px solid rgba(255,255,255,.11);
}
.bonus-box strong { color:#fff; }

.progress-wrap { display:flex; align-items:center; gap:14px; }
.progress-bar { flex:1; height:12px; background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.08); border-radius:999px; overflow:hidden; }
.progress-fill { height:100%; border-radius:inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2) 72%, var(--accent-3)); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 38%, transparent); }
.progress-label { font-size:.95rem; font-weight:700; color:var(--text-secondary); min-width:68px; text-align:right; }
.question-title { font-size: clamp(1.28rem, 3.1vw, 1.75rem); line-height:1.28; font-weight:800; letter-spacing:-.02em; }
.options { list-style:none; display:grid; gap:12px; margin:0; padding:0; }
.option-item {
  position:relative; padding:15px 16px 15px 56px; border-radius:18px; cursor:pointer;
  background: rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.1);
  color: var(--text); transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.option-item::before {
  content: attr(data-letter); position:absolute; left:15px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:.88rem;
  color:#fff; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 75%, white 4%), color-mix(in srgb, var(--accent-2) 82%, white 4%));
  box-shadow: 0 8px 16px color-mix(in srgb, var(--accent) 22%, transparent);
}
.option-item:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 44%, rgba(255,255,255,.14)); background: rgba(255,255,255,.085); }
.option-item.selected {
  border-color: color-mix(in srgb, var(--accent) 72%, white 3%);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, rgba(255,255,255,.05)), color-mix(in srgb, var(--accent-2) 12%, rgba(255,255,255,.03)));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 16px 30px rgba(0,0,0,.18);
}
.nav-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top: 2px; }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px; cursor:pointer; text-decoration:none;
  border-radius: 16px; padding: 14px 18px; font-weight:800; font-size: .98rem; transition: transform .18s ease, filter .18s ease, opacity .18s ease, border-color .18s ease;
  border:1px solid transparent; min-height:54px;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.04); }
.btn-primary {
  color:#fff; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent-2) 88%, white 8%));
  box-shadow: 0 16px 34px color-mix(in srgb, var(--accent) 28%, transparent);
}
.btn-outline {
  color:var(--text); background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1);
}
.btn-install { width: 100%; }
.result-heading { font-size: clamp(1.7rem, 3.8vw, 2.35rem); line-height:1.16; font-weight:900; letter-spacing:-.03em; }
.result-card {
  display:flex; flex-direction:column; gap:14px; padding:20px; border-radius:22px; border:1px solid rgba(255,255,255,.1);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}
.result-verdict { font-weight:800; font-size:1.08rem; }
.result-body, .result-cta-hint { color: var(--text-secondary); }
.result-body strong { color:#fff; }
.result-bonus-note {
  display:flex; align-items:center; justify-content:center; text-align:center; font-weight:900; font-size:1.15rem;
  padding:16px 18px; border-radius:20px; color:#1f1600;
  background: linear-gradient(135deg, #ffd166, #fff0a3 45%, #ffbe0b 100%);
  box-shadow: 0 16px 30px rgba(255, 184, 0, .24);
}
.footer-spacer { height: 28px; }
.site-footer { position: relative; z-index:2; width:100%; max-width: 640px; margin: 0 auto; }
.footer-card {
  padding:18px 18px 20px; border-radius:22px; background: rgba(11,14,28,.72); border:1px solid rgba(255,255,255,.08); box-shadow: 0 20px 44px rgba(0,0,0,.28);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.footer-brand { font-size:1.05rem; font-weight:900; margin-bottom:14px; letter-spacing:.02em; }
.footer-grid { display:grid; gap:14px; }
.footer-item { display:grid; gap:4px; }
.footer-label { font-size:.77rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.footer-item, .footer-item a, .footer-item span { color: var(--text-secondary); word-break: break-word; }
.footer-item a { text-decoration:none; }
.footer-item a:hover { color:#fff; }
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 18px); z-index: 30; opacity: 0;
  background: rgba(16,18,34,.94); color:#fff; border:1px solid rgba(255,255,255,.12); padding: 12px 16px; border-radius: 14px;
  box-shadow: 0 12px 34px rgba(0,0,0,.28); transition: all .22s ease;
}
.toast.show { opacity:1; transform: translate(-50%, 0); }
.shake { animation: shake .32s ease; }
@keyframes shake { 0%,100% { transform: translateX(0);} 25% { transform: translateX(-4px);} 50% { transform: translateX(4px);} 75% { transform: translateX(-3px);} }
@media (max-width: 640px) {
  body { padding: 14px 12px 22px; }
  #screen-intro, #screen-result { padding: 28px 20px; }
  .screen:not(#screen-intro):not(#screen-result) { padding: 22px 18px 18px; }
  .intro-title { font-size: 1.82rem; }
  .question-title { font-size: 1.25rem; }
  .nav-row { flex-direction: column-reverse; }
  .nav-row .btn { width: 100%; }
  .progress-wrap { gap: 10px; }
  .progress-label { min-width: 62px; font-size: .88rem; }
}