/* EspaceJeeux — static site styles */
:root {
  --radius: 0.9rem;
  --ink: #f2fbff;
  --ink-dim: rgba(242,251,255,0.72);
  --ink-mute: rgba(242,251,255,0.55);
  --ink-faint: rgba(242,251,255,0.4);
  --line: rgba(255,255,255,0.1);
  --line-soft: rgba(255,255,255,0.05);
  --surface: rgba(255,255,255,0.05);
  --surface-2: rgba(255,255,255,0.08);
  --ink-on-neon: #0a1520;
  --shell: #0a1520;
  --gradient-hero:
    radial-gradient(1200px 600px at 15% 10%, rgba(0,180,180,0.35), transparent 60%),
    radial-gradient(900px 500px at 90% 15%, rgba(255,180,80,0.18), transparent 60%),
    radial-gradient(700px 500px at 50% 100%, rgba(160,90,220,0.22), transparent 65%),
    linear-gradient(180deg, #0a1520 0%, #0f3b4a 60%, #0a1a25 100%);
  --gradient-card: linear-gradient(150deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  --gradient-gold: linear-gradient(135deg, #ffd166 0%, #ff9f45 100%);
  --gradient-neon: linear-gradient(135deg, #00d4c8 0%, #48b7ff 100%);
  --shadow-glow: 0 0 40px rgba(0,212,200,0.4);
  --shadow-gold: 0 0 40px rgba(255,209,102,0.4);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100vh;
  background: var(--gradient-hero);
  background-attachment: fixed;
  color: var(--ink);
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 { font-family: "Sora", system-ui, sans-serif; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img { display: block; max-width: 100%; }

/* Animations */
@keyframes float-bubble {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 0.55; }
  90% { opacity: 0.35; }
  100% { transform: translateY(-110vh) translateX(30px); opacity: 0; }
}
@keyframes orbit {
  from { transform: rotate(0deg) translateX(var(--orbit-r, 140px)) rotate(0deg); }
  to { transform: rotate(360deg) translateX(var(--orbit-r, 140px)) rotate(-360deg); }
}
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes pulse-glow {
  0%,100% { box-shadow: 0 0 20px rgba(0,212,200,0.4); }
  50% { box-shadow: 0 0 48px rgba(0,212,200,0.8); }
}
@keyframes bounce-slow { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.animate-float-bubble { animation: float-bubble linear infinite; }
.animate-orbit { animation: orbit linear infinite; }
.animate-spin-slow { animation: spin-slow 14s linear infinite; }
.animate-pulse-glow { animation: pulse-glow 2.4s ease-in-out infinite; }
.animate-bounce-slow { animation: bounce-slow 3s ease-in-out infinite; }
.fade-up { animation: fade-up .7s ease both; }

/* Layout */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: 1rem; }
.container.narrow { max-width: 960px; }
.container.tight { max-width: 720px; }
.container.wide { max-width: 1280px; }
@media (min-width: 640px) { .container { padding-inline: 1.5rem; } }
.section { position: relative; padding-block: 4rem; }
@media (min-width: 768px) { .section { padding-block: 5rem; } }

.eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  background: var(--gradient-neon); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow.gold { background: var(--gradient-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }

.h1, .h2 { color: var(--ink); font-weight: 800; line-height: 1.05; }
.h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
.h2 { font-size: clamp(2rem, 4.5vw, 3rem); }
.lead { color: var(--ink-dim); margin-top: .75rem; max-width: 40rem; line-height: 1.6; }
.muted { color: var(--ink-mute); }
.center { text-align: center; }
.stack { display: flex; flex-direction: column; gap: 1rem; }

.gold, .neon { -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; }
.gold { background: var(--gradient-gold);-webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800;  }
.neon { background: var(--gradient-neon); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; }

/* Panels */
.panel { background: var(--gradient-card); backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 1.5rem; padding: 1.5rem; }
@media (min-width: 640px) { .panel { padding: 2rem; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  height: 2.75rem; padding-inline: 1.25rem; border-radius: 999px;
  font-weight: 700; font-size: .9rem; cursor: pointer; border: 0;
  transition: transform .15s, opacity .15s, background .2s;
  color: var(--ink); background: transparent; white-space: nowrap; }
.btn:hover { opacity: .92; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.lg { height: 3rem; padding-inline: 1.5rem; }
.btn.block { width: 100%; }
.btn.neon { background: var(--gradient-neon); color: var(--ink-on-neon); box-shadow: var(--shadow-glow); }
.btn.gold { background: var(--gradient-gold); color: var(--ink-on-neon); box-shadow: var(--shadow-gold); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: rgba(255,255,255,0.06); }
.btn.outline { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.btn.outline:hover { background: rgba(255,255,255,0.08); }
.btn.icon { width: 2.5rem; height: 2.5rem; padding: 0; }
.arrow::after { content: "→"; margin-left: .35rem; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line-soft);
  backdrop-filter: blur(20px); background: rgba(10,21,32,0.8); }
.site-header .row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .75rem; }
.site-header .logo { height: 2.25rem; width: auto; }
.site-nav { display: none; gap: .25rem; }
.site-nav a { padding: .5rem 1rem; border-radius: 999px; font-size: .875rem; font-weight: 500; color: var(--ink-dim); transition: background .15s, color .15s; }
.site-nav a:hover { background: rgba(255,255,255,0.06); color: var(--ink); }
.site-nav a.active { background: rgba(255,255,255,0.1); color: var(--ink); }
@media (min-width: 768px) { .site-nav { display: flex; } .menu-toggle { display: none !important; } }
.site-header .auth-row { display: none; align-items: center; gap: .5rem; }
.site-header .auth-row .user { font-size: .75rem; color: var(--ink-mute); max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 640px) { .site-header .auth-row { display: flex; } }
.menu-toggle { background: transparent; border: 0; color: var(--ink); padding: .5rem; cursor: pointer; border-radius: 999px; font-size: 1.5rem; line-height: 1; }
.menu-toggle:hover { background: rgba(255,255,255,0.06); }
.mobile-menu { display: none; border-top: 1px solid var(--line-soft); padding: 1rem; }
.mobile-menu.open { display: block; }
.mobile-menu a { display: block; padding: .5rem .75rem; border-radius: .5rem; color: var(--ink-dim); font-size: .875rem; font-weight: 500; }
.mobile-menu a:hover { background: rgba(255,255,255,0.06); color: var(--ink); }
.mobile-menu .actions { display: flex; gap: .5rem; padding-top: .75rem; }
.mobile-menu .actions > * { flex: 1;text-align: center; align-content: center; }
@media (min-width: 768px) { .mobile-menu { display: none !important; } }

/* Footer */
.site-footer { margin-top: 6rem; border-top: 1px solid var(--line-soft); background: rgba(8,17,28,0.8); backdrop-filter: blur(20px); }
.site-footer .inner { max-width: 1100px; margin: 0 auto; padding: 3.5rem 1rem; }
@media (min-width: 640px) { .site-footer .inner { padding-inline: 1.5rem; } }
.responsibility { text-align: center; padding: 1.5rem; border-radius: 1rem; border: 1px solid var(--line); background: rgba(255,255,255,0.03); }
.responsibility strong { display: block; font-family: "Sora", sans-serif; font-size: 1.15rem; color: var(--ink); font-weight: 700; }
.responsibility p { margin-top: .5rem; color: var(--ink-dim); font-size: .875rem; }
.responsibility a { color: #5eead4; font-weight: 600; }
.responsibility a:hover { color: #99f6e4; }
.trust-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; margin-top: 2.5rem; }
@media (min-width: 640px) { .trust-grid { grid-template-columns: repeat(4,1fr); } }
.trust { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-radius: .85rem; border: 1px solid var(--line); background: rgba(255,255,255,0.03); }
.trust .badge { display: inline-flex; align-items: center; justify-content: center; height: 2.25rem; width: 2.25rem; border-radius: 999px; background: var(--gradient-neon); color: var(--ink-on-neon); flex-shrink: 0; font-weight: 800; }
.trust h4 { font-size: .875rem; font-weight: 600; color: var(--ink); margin: 0; }
.trust p { font-size: .75rem; color: var(--ink-mute); margin: 0; }
.disclaimer { max-width: 48rem; margin: 2.5rem auto 0; text-align: center; font-size: .75rem; color: var(--ink-mute); line-height: 1.65; }
.age-warning { margin-top: 1.5rem; text-align: center; font-size: .875rem; font-weight: 600; color: #fca5a5; }
.foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem .5rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: .875rem; color: var(--ink-dim); }
.foot-nav a { padding-inline: .75rem; }
.foot-nav a:hover { color: var(--ink); }
.foot-nav .sep { color: rgba(255,255,255,0.2); }
.brand-row { display: flex; flex-direction: column; align-items: center; gap: .75rem; margin-top: 2rem; }
.brand-row .copyright { font-size: .75rem; color: var(--ink-faint); text-align: center; }
.brand-row .stamp { font-size: .68rem; color: rgba(242,251,255,0.3); text-align: center; }

/* Hero */
.hero { position: relative; overflow: hidden; }
.hero .grid { max-width: 1280px; margin: 0 auto; padding: 4rem 1rem; display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 640px) { .hero .grid { padding-inline: 1.5rem; } }
@media (min-width: 768px) { .hero .grid { padding-block: 6rem; } }
@media (min-width: 1024px) { .hero .grid { grid-template-columns: 1fr 1fr; } }
.hero .copy { position: relative; z-index: 10; }
.hero .pulse-dot { display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 500; color: var(--ink-dim); padding: .35rem 1rem; border-radius: 999px; background: var(--gradient-card); border: 1px solid var(--line); backdrop-filter: blur(14px); }
.hero .pulse-dot::before { content: ""; width: .5rem; height: .5rem; border-radius: 999px; background: #34d399; animation: pulse-glow 2s ease infinite; }
.hero h1 { margin-top: 1.25rem; font-weight: 900; font-size: clamp(2.75rem, 7vw, 5rem); line-height: 1.05; color: var(--ink); }
.hero p.intro { margin-top: 1.25rem; max-width: 36rem; color: var(--ink-dim); font-size: 1.05rem; line-height: 1.6; }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.hero .stats { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; max-width: 28rem; }
.hero .visual { position: relative; display: flex; justify-content: center; }
.stat { padding: .85rem 1rem; border-radius: 1rem; background: var(--gradient-card); border: 1px solid var(--line); backdrop-filter: blur(14px); }
.stat .val { font-family: "Sora", sans-serif; font-size: 1.35rem; font-weight: 900; color: var(--ink); }
.stat .val.gold { background: var(--gradient-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat .val.neon { background: var(--gradient-neon); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat .lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .18em; color: var(--ink-mute); margin-top: .35rem; }

/* Bubble field */
.bubbles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.bubbles span { position: absolute; bottom: -60px; border-radius: 999px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8), rgba(0,212,200,0.3) 60%, transparent 70%); animation: float-bubble linear infinite; }

/* Marquee */
.marquee { border-block: 1px solid var(--line-soft); background: rgba(8,17,28,0.6); padding-block: .75rem; overflow: hidden; }
.marquee .track { display: flex; gap: 2.5rem; white-space: nowrap; animation: ticker 30s linear infinite; }
.marquee .track span { font-size: .875rem; color: var(--ink-mute); }

/* Head row */
.head-row { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: 2.5rem; }
.head-row .more { font-size: .875rem; color: var(--ink-dim); display: inline-flex; align-items: center; gap: .25rem; }
.head-row .more:hover { color: var(--ink); }

/* Draw cards */
.draws-grid { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .draws-grid { grid-template-columns: repeat(3,1fr); } }
.draw-card { position: relative; overflow: hidden; border-radius: 1.5rem; padding: 1.5rem; background: var(--gradient-card); border: 1px solid var(--line); backdrop-filter: blur(14px); transition: transform .2s; }
.draw-card:hover { transform: translateY(-6px); }
.draw-card .top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; }
.draw-card .icon-tile { display: inline-flex; align-items: center; justify-content: center; height: 3.5rem; width: 3.5rem; border-radius: 1rem; font-family: "Sora", sans-serif; font-size: 1.5rem; font-weight: 900; color: var(--ink-on-neon); }
.draw-card .tag { border-radius: 999px; padding: .25rem .75rem; font-size: .625rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; background: linear-gradient(150deg,rgba(255,255,255,0.97),rgba(255,255,255,0.88)); color: #0f2333; border: 1px solid rgba(255,255,255,0.6); }
.draw-card h3 { font-size: 1.5rem; font-weight: 700; color: var(--ink); margin: 0; }
.draw-card .tagline { margin-top: .25rem; font-size: .875rem; color: var(--ink-mute); }
.draw-card .balls { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.draw-card .facts { margin-top: 1.25rem; display: flex; flex-direction: column; gap: .5rem; font-size: .875rem; }
.draw-card .facts .row { display: flex; justify-content: space-between; color: var(--ink-dim); }
.draw-card .facts .row strong { color: var(--ink); font-weight: 600; }
.draw-card .actions { margin-top: 1.5rem; display: flex; gap: .5rem; }
.draw-card .actions > *:first-child { flex: 1; }

/* Balls */
.ball { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-family: "Sora", sans-serif; font-weight: 800; color: #0a1520;
  background: radial-gradient(circle at 30% 30%, #fff, hsl(var(--h, 190) 90% 60%) 55%, hsl(var(--h, 190) 80% 40%));
  box-shadow: inset 0 -6px 10px rgba(0,0,0,0.25), 0 4px 10px rgba(0,0,0,0.25);
  width: 2.25rem; height: 2.25rem; font-size: .8rem; }
.ball.sm { width: 1.5rem; height: 1.5rem; font-size: .65rem; }
.ball.lg { width: 3rem; height: 3rem; font-size: 1rem; }

/* Steps */
.steps { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(4,1fr); } }
.step { position: relative; border-radius: 1rem; padding: 1.5rem; }
.step .num { position: absolute; top: -1rem; right: -1rem; display: inline-flex; align-items: center; justify-content: center; height: 2.5rem; width: 2.5rem; border-radius: 999px; background: var(--gradient-neon); font-family: "Sora", sans-serif; font-weight: 700; color: var(--ink-on-neon); }
.step h3 { font-size: 1.05rem; font-weight: 700; margin-top: .75rem; }
.step p { margin-top: .25rem; font-size: .875rem; }
.step.light { background: linear-gradient(150deg,rgba(255,255,255,0.97),rgba(255,255,255,0.88)); color: #0f2333; border: 1px solid rgba(255,255,255,0.6); }
.step.light h3 { color: #0f2333; }
.step.light p { color: rgba(15,35,51,0.7); }
.step .step-icon { font-size: 1.5rem; }

/* Winners */
.winners-strip { overflow: hidden; border-radius: 1.5rem; background: var(--gradient-card); border: 1px solid var(--line); backdrop-filter: blur(14px); }
.winners-strip .track { display: flex; gap: 1rem; padding-block: 1.25rem; white-space: nowrap; animation: ticker 30s linear infinite; }
.winner-chip { display: inline-flex; align-items: center; gap: .75rem; padding: .75rem 1.25rem; border-radius: 1rem; background: rgba(255,255,255,0.05); border: 1px solid var(--line); min-width: max-content; }
.winner-chip .who { font-size: .875rem; font-weight: 600; color: var(--ink); }
.winner-chip .meta { font-size: .75rem; color: var(--ink-mute); }

.winners-list { display: flex; flex-direction: column; gap: .75rem; margin-top: 2.5rem; }
.winners-list .item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem; border-radius: 1rem; background: var(--gradient-card); border: 1px solid var(--line); backdrop-filter: blur(14px); }
.winners-list .item .left { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.winners-list .item .name { font-weight: 600; color: var(--ink); }
.winners-list .item .sub { font-size: .75rem; color: var(--ink-mute); margin-top: .15rem; }
.winners-list .item .prize { font-family: "Sora", sans-serif; font-size: 1.4rem; font-weight: 900; background: var(--gradient-gold); -webkit-background-clip: text; background-clip: text; color: transparent; text-align: right; }

/* Trust grid home */
.trust-home { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .trust-home { grid-template-columns: repeat(4,1fr); } }
.trust-home .item { padding: 1.5rem; border-radius: 1rem; background: var(--gradient-card); border: 1px solid var(--line); backdrop-filter: blur(14px); }
.trust-home .item .step-icon { color: #5eead4; font-size: 1.6rem; }
.trust-home .item h3 { margin-top: .75rem; color: var(--ink); font-weight: 700; }
.trust-home .item p { margin-top: .25rem; font-size: .875rem; color: var(--ink-mute); }

/* FAQ */
.faq { border-radius: 1.5rem; padding: .5rem; background: var(--gradient-card); border: 1px solid var(--line); backdrop-filter: blur(14px); }
@media (min-width: 768px) { .faq { padding: 1rem; } }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 0; }
.faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.25rem;
  background: transparent; border: 0; color: var(--ink); font-weight: 600; text-align: left; cursor: pointer; font-size: 1rem; }
.faq-q .chev { transition: transform .2s; color: var(--ink-mute); }
.faq-item.open .faq-q .chev { transform: rotate(180deg); color: var(--ink); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s ease; color: var(--ink-dim); padding: 0 1.25rem; font-size: .95rem; line-height: 1.6; }
.faq-item.open .faq-a { max-height: 500px; padding: 0 1.25rem 1.25rem; }

/* CTA block */
.cta { position: relative; overflow: hidden; border-radius: 1.5rem; padding: 2.5rem 1.5rem; text-align: center; background: var(--gradient-card); border: 1px solid var(--line); backdrop-filter: blur(14px); }
@media (min-width: 768px) { .cta { padding: 3.5rem; } }
.cta .veil { position: absolute; inset: 0; background: var(--gradient-neon); opacity: .1; }
.cta .inner { position: relative; }
.cta p { margin: 1rem auto 0; max-width: 36rem; color: var(--ink-dim); }
.cta .actions { margin-top: 2rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }

/* Draw detail */
.draw-detail { display: grid; gap: 1.5rem; align-items: start; margin-top: 1rem; }
@media (min-width: 1024px) { .draw-detail { grid-template-columns: 1fr 1.2fr; gap: 2rem; } }
.back-link { display: inline-flex; align-items: center; gap: .25rem; font-size: .875rem; color: var(--ink-mute); }
.back-link:hover { color: var(--ink); }
.meta-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: .75rem; margin-top: 1.5rem; }
.meta-cell { padding: .75rem; border-radius: .75rem; background: rgba(255,255,255,0.05); border: 1px solid var(--line); }
.meta-cell .lbl { font-size: .625rem; text-transform: uppercase; letter-spacing: .18em; color: var(--ink-mute); }
.meta-cell .val { margin-top: .25rem; font-weight: 700; color: var(--ink); }
.meta-cell .val.gold { background: var(--gradient-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Number picker */
.picker { border-radius: 1.5rem; padding: 1.5rem; background: var(--gradient-card); border: 1px solid var(--line); backdrop-filter: blur(14px); }
@media (min-width: 768px) { .picker { padding: 2rem; } }
.picker .head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.5rem; }
.picker .head h3 { font-size: 1.25rem; font-weight: 700; color: var(--ink); margin: 0; }
.picker .head p { font-size: .875rem; color: var(--ink-mute); margin: .25rem 0 0; }
.picker .head .tools { display: flex; gap: .5rem; }
.picker .tray { margin-bottom: 1.5rem; min-height: 4rem; border-radius: 1rem; border: 1px dashed rgba(255,255,255,0.15); padding: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.picker .tray .placeholder { font-size: .875rem; color: var(--ink-faint); }
.picker .cells { display: grid; grid-template-columns: repeat(7,1fr); gap: .5rem; }
@media (min-width: 768px) { .picker .cells { grid-template-columns: repeat(10,1fr); } }
.picker .cell { aspect-ratio: 1/1; border-radius: 999px; font-size: .875rem; font-weight: 700;
  background: rgba(255,255,255,0.05); color: var(--ink-dim); border: 1px solid var(--line);
  cursor: pointer; transition: transform .15s, background .15s; font-family: "Sora", sans-serif; }
.picker .cell:hover { background: rgba(255,255,255,0.1); color: var(--ink); }
.picker .cell.on { transform: scale(1.05); border: 0; color: #0a1520;
  background: radial-gradient(circle at 30% 30%, #fff, hsl(var(--h,190) 90% 60%) 55%, hsl(var(--h,190) 80% 40%));
  box-shadow: inset 0 -6px 10px rgba(0,0,0,0.25); }
.picker .submit { margin-top: 2rem; }

/* Cart inline */
.cart-inline { border-radius: 1.5rem; padding: 1.5rem; background: var(--gradient-card); border: 1px solid var(--line); backdrop-filter: blur(14px); }
.cart-inline .head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.cart-inline .head h2 { font-size: 1.25rem; font-weight: 700; color: var(--ink); margin: 0; }
.cart-inline .head .count { font-size: .75rem; color: var(--ink-mute); }
.cart-inline .empty { margin-top: 1rem; font-size: .875rem; color: var(--ink-mute); }
.cart-inline .rows { margin-top: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.cart-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1rem; border-radius: 1rem; background: rgba(255,255,255,0.05); border: 1px solid var(--line); }
.cart-row .info .name { font-size: .8rem; font-weight: 600; color: var(--ink); }
.cart-row .info .balls { margin-top: .5rem; display: flex; flex-wrap: wrap; gap: .25rem; }
.cart-row .side { display: flex; align-items: center; gap: .5rem; }
.cart-row .price { background: var(--gradient-gold); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; font-size: .875rem; }
.cart-total { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.cart-total .grand { display: flex; justify-content: space-between; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.cart-total .grand .lbl { color: var(--ink); font-weight: 600; }
.cart-total .grand .val { font-family: "Sora", sans-serif; font-size: 1.5rem; font-weight: 900; background: var(--gradient-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cart-total .note { margin-top: .75rem; text-align: center; font-size: .75rem; color: var(--ink-mute); }

/* Auth */
.auth { position: relative; min-height: calc(100vh - 64px); overflow: hidden; }
.auth .layout { max-width: 1100px; margin: 0 auto; padding: 4rem 1rem; display: grid; gap: 2.5rem; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 768px) { .auth .layout { grid-template-columns: 1fr 1fr; padding-block: 6rem; } }
.auth .side { display: none; }
@media (min-width: 768px) { .auth .side { display: block; } }
.auth .side .halo { position: relative; height: 24rem; display: flex; align-items: center; justify-content: center; }
.auth .side .halo::before { content: ""; position: absolute; inset: 0; background: var(--gradient-neon); opacity: .2; filter: blur(60px); border-radius: 999px; }
.auth .side .cluster { position: relative; display: flex; flex-wrap: wrap; gap: .75rem; max-width: 18rem; justify-content: center; animation: spin-slow 20s linear infinite; }
.auth .side .cluster > * { animation: bounce-slow 3s ease-in-out infinite; }
.auth .side .tag { margin-top: 2rem; text-align: center; font-size: .875rem; color: var(--ink-mute); max-width: 22rem; margin-inline: auto; }
.auth .panel { position: relative; border-radius: 1.5rem; padding: 2rem; background: var(--gradient-card); border: 1px solid var(--line); backdrop-filter: blur(14px); }
@media (min-width: 768px) { .auth .panel { padding: 2.5rem; } }
.auth .panel h1 { font-size: 1.85rem; font-weight: 700; color: var(--ink); margin: .5rem 0 0; }
.auth .panel .sub { margin-top: .5rem; font-size: .875rem; color: var(--ink-mute); margin-bottom: .5rem;}
.auth .panel .body { margin-top: 1.5rem; }
.auth .panel .foot { margin-top: 1.5rem; text-align: center; font-size: .875rem; color: var(--ink-mute); }
.auth .panel .foot a { font-weight: 600; background: var(--gradient-neon); -webkit-background-clip: text; background-clip: text; color: transparent; }

.field { display: flex; flex-direction: column; gap: .35rem; }
.field label { font-size: .68rem; text-transform: uppercase; letter-spacing: .18em; color: var(--ink-dim); }
.field input { height: 2.75rem; padding: 0 1rem; border-radius: .75rem; background: rgba(255,255,255,0.05); border: 1px solid var(--line); color: var(--ink); font-family: inherit; font-size: .95rem; }
.field input:focus { outline: 0; border-color: #48b7ff; box-shadow: 0 0 0 3px rgba(72,183,255,0.2); }
.forgot { display: flex; justify-content: flex-end; }
.forgot a { font-size: .75rem; color: var(--ink-mute); }
.forgot a:hover { color: var(--ink); }

.stepper { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.25rem; }
.stepper > span { height: .35rem; flex: 1; border-radius: 999px; background: rgba(255,255,255,0.1); }
.stepper > span.done { background: var(--gradient-neon); }

.otp-form { display: flex; flex-direction: column; gap: 1rem; }
.otp-form .row { display: flex; justify-content: center; gap: .5rem; }
.otp-form input.slot { width: 2.75rem; height: 3.25rem; text-align: center; font-size: 1.25rem; font-weight: 700; border-radius: .75rem; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: var(--ink); font-family: "Sora", sans-serif; }
.otp-form input.slot:focus { outline: 0; border-color: #48b7ff; box-shadow: 0 0 0 3px rgba(72,183,255,0.25); }
.otp-form .resend { background: transparent; border: 0; color: var(--ink-mute); font-size: .75rem; cursor: pointer; text-align: center; }
.otp-form .resend:hover { color: var(--ink); }

/* Toast */
.toast-host { position: fixed; bottom: 1rem; right: 1rem; z-index: 200; display: flex; flex-direction: column; gap: .5rem; }
.toast { padding: .75rem 1rem; border-radius: .75rem; background: rgba(15,35,51,0.95); border: 1px solid var(--line); color: var(--ink); font-size: .875rem; box-shadow: 0 10px 30px rgba(0,0,0,0.35); animation: fade-up .25s ease; max-width: 22rem; }
.toast.err { border-color: #f87171; }
.toast.ok { border-color: #34d399; }

/* Orbits */
.orbits { position: relative; height: 440px; width: 100%; max-width: 440px; }
.orbits .core { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; align-items: center; justify-content: center; height: 8rem; width: 8rem; border-radius: 999px; background: var(--shell); border: 1px solid var(--line); box-shadow: 0 20px 40px rgba(0,0,0,0.5); }
.orbits .core::before { content: ""; position: absolute; inset: -1.5rem; border-radius: 999px; background: var(--gradient-neon); opacity: .3; filter: blur(30px); animation: pulse-glow 2.4s ease-in-out infinite; z-index: -1; }
.orbits .core span { font-family: "Sora", sans-serif; font-size: 2.25rem; font-weight: 900; background: var(--gradient-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.orbits .ring { position: absolute; left: 50%; top: 50%; border-radius: 999px; border: 1px solid var(--line-soft); transform: translate(-50%,-50%); }
.orbits .orbiter { position: absolute; left: 50%; top: 50%; margin-left: -1.125rem; margin-top: -1.125rem; animation: orbit linear infinite; }