:root {
  color-scheme: dark;
  --bg: #090b19;
  --bg-soft: #0f1225;
  --panel: #11152b;
  --panel-2: #171b35;
  --line: rgba(158, 171, 226, .14);
  --muted: #9298b6;
  --text: #f5f5ff;
  --purple: #8a5cff;
  --pink: #ff45bd;
  --cyan: #39e5d2;
  --gold: #ffca62;
  --red: #ff737f;
  --font-body: 'Segoe UI', Arial, sans-serif;
  --font-display: 'Segoe UI', Arial, sans-serif;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(ellipse at 78% 9%, rgba(78, 50, 168, .18), transparent 34rem), radial-gradient(ellipse at 4% 56%, rgba(20, 131, 150, .075), transparent 28rem), var(--bg); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
.hidden { display: none !important; }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; transform: translateY(-180%); padding: 10px 14px; background: var(--cyan); color: #051212; border-radius: 8px; font-weight: 700; }
.skip-link:focus { transform: none; }
.app-shell { width: min(1240px, calc(100% - 52px)); margin: 0 auto; }
.topbar { height: 86px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(167, 177, 232, .1); }
.brand { display: inline-flex; gap: 11px; align-items: center; min-width: 178px; }
.brand-mark { width: 39px; height: 39px; border: 1.5px solid rgba(123, 104, 255, .8); border-radius: 12px; display: grid; place-items: center; position: relative; background: linear-gradient(145deg, rgba(126, 86, 255, .21), rgba(25, 209, 213, .08)); box-shadow: 0 0 22px rgba(112, 89, 255, .18); transform: rotate(-4deg); }
.brand-mark span { font: 700 21px var(--font-display); background: linear-gradient(130deg, #fff, #ba9eff 65%, #52ead8); -webkit-background-clip: text; color: transparent; transform: rotate(4deg); }
.brand-mark i { position: absolute; width: 5px; height: 5px; right: -2px; top: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 9px var(--cyan); }
.brand-copy { display: flex; flex-direction: column; line-height: 1; }
.brand-copy strong { font: 700 18px var(--font-display); letter-spacing: -.7px; }
.brand-copy strong span { color: var(--pink); }
.brand-copy small { margin-top: 5px; font-size: 8px; letter-spacing: 2.4px; color: #a3a8c5; font-weight: 700; }
.top-nav { height: 100%; display: flex; align-items: center; gap: 28px; }
.nav-link { position: relative; height: 100%; border: 0; padding: 0 3px; background: none; color: #a5aac2; font-size: 12px; cursor: pointer; transition: color .18s; }
.nav-link::after { content: ''; position: absolute; height: 2px; bottom: 0; left: 0; right: 0; transform: scaleX(0); background: linear-gradient(90deg, var(--pink), var(--purple)); transition: transform .18s; }
.nav-link:hover, .nav-link.active { color: #fff; }
.nav-link.active::after { transform: scaleX(1); }
.account-actions { min-width: 178px; display: flex; justify-content: flex-end; align-items: center; gap: 9px; }
.connection-dot, .pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px rgba(255, 202, 98, .65); display: inline-block; flex: 0 0 auto; }
.connection-label { color: var(--muted); font-size: 10px; margin-right: 8px; }
.connection-dot.online { background: var(--cyan); box-shadow: 0 0 9px rgba(57, 229, 210, .7); }
.connection-dot.offline { background: var(--red); box-shadow: 0 0 9px rgba(255, 115, 127, .55); }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 12px; min-height: 44px; padding: 0 19px; border-radius: 9px; border: 1px solid transparent; font-weight: 700; font-size: 12px; cursor: pointer; transition: .18s ease; }
.button:disabled { opacity: .5; cursor: not-allowed; }
.button-primary { color: #fff; background: linear-gradient(112deg, #7b53f2, #a43de3 58%, #d341bb); box-shadow: 0 7px 22px rgba(129, 68, 218, .24), inset 0 1px rgba(255,255,255,.18); }
.button-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(161, 65, 220, .33); }
.button-primary span { font-size: 17px; line-height: 0; }
.button-outline { background: rgba(255,255,255,.025); border-color: rgba(175, 185, 238, .2); color: #e1e3f3; }
.button-outline:hover { border-color: rgba(188, 155, 255, .68); background: rgba(130, 93, 237, .08); }
.button-quiet { background: rgba(255,255,255,.025); color: #c1c5d9; border-color: rgba(175, 185, 238, .11); }
.button-quiet:hover { background: rgba(255,255,255,.07); color: white; }
.button-small { min-height: 35px; padding: 0 13px; font-size: 11px; }
.button-full { width: 100%; }
.icon-button { display: grid; place-items: center; width: 33px; height: 33px; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.035); font-size: 20px; cursor: pointer; color: #adb2cc; }
.icon-button:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.notice-bar { position: relative; width: 100%; min-width: 0; margin: 14px 0 -3px; padding: 11px 45px 11px 13px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(255, 202, 98, .2); border-radius: 10px; background: rgba(255, 202, 98, .07); color: #d7c79f; font-size: 12px; line-height: 1.5; }
.notice-bar #notice-text { display: block; flex: 1 1 0%; width: 0; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.notice-bar.error { border-color: rgba(255, 115, 127, .25); background: rgba(255, 115, 127, .07); color: #ffc2c7; }
.notice-icon { display: grid; place-items: center; flex: 0 0 19px; width: 19px; height: 19px; border-radius: 50%; background: rgba(255,202,98,.15); color: var(--gold); font-weight: 700; font-size: 11px; }
.notice-bar.error .notice-icon { color: var(--red); background: rgba(255,115,127,.16); }
.notice-close { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; }
main { min-height: 70vh; }
.view { display: none; padding-bottom: 64px; animation: view-in .3s ease both; }
.view.active { display: block; }
@keyframes view-in { from { opacity: .45; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.hero-grid { min-height: 460px; display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: 26px; padding: 30px 0 9px; overflow: hidden; }
.hero-copy { position: relative; z-index: 2; padding: 0 0 17px 5px; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: #a99be6; font-size: 9px; font-weight: 700; letter-spacing: 2px; line-height: 1.4; }
.eyebrow .pulse-dot { width: 6px; height: 6px; background: var(--pink); box-shadow: 0 0 10px rgba(255,69,189,.8); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-display); }
.hero-copy h1 { margin: 17px 0 17px; font-size: clamp(54px, 6.2vw, 78px); line-height: .96; letter-spacing: -5px; }
.hero-copy h1 em { font-style: normal; color: transparent; background: linear-gradient(100deg, #c99bff, #8b73ff 44%, #40ddd2 95%); -webkit-background-clip: text; background-clip: text; }
.hero-lede { max-width: 390px; margin-bottom: 23px; color: #a4a9c3; font-size: 14px; line-height: 1.75; }
.hero-actions { display: flex; gap: 10px; align-items: center; }
.proof-row { display: flex; gap: 11px; align-items: center; margin-top: 30px; color: #d9dbee; }
.proof-icon { display: grid; place-items: center; width: 36px; height: 36px; color: var(--cyan); border-radius: 11px; background: rgba(57,229,210,.075); border: 1px solid rgba(57,229,210,.12); font-size: 21px; }
.proof-row div:last-child { display: flex; flex-direction: column; gap: 4px; }
.proof-row strong { font-size: 11px; }
.proof-row span { color: #858ba8; font-size: 10px; }
.hero-art { position: relative; height: 440px; display: grid; place-items: center; isolation: isolate; }
.hero-art::before { content: ''; position: absolute; width: 430px; height: 390px; background: radial-gradient(ellipse, rgba(113, 69, 231, .22), rgba(26, 54, 115, .08) 43%, transparent 69%); z-index: -2; }
.orbit { position: absolute; border: 1px solid rgba(149, 131, 236, .11); border-radius: 50%; transform: rotate(-19deg); }
.orbit-one { width: 475px; height: 220px; }
.orbit-two { width: 410px; height: 186px; transform: rotate(46deg); border-color: rgba(63, 220, 208, .1); }
.wheel-glow { position: absolute; width: 300px; height: 300px; border-radius: 50%; background: rgba(115, 58, 211, .16); filter: blur(46px); }
.mini-wheel { position: relative; width: 274px; height: 274px; border: 2px solid rgba(194, 180, 255, .54); border-radius: 50%; background: conic-gradient(from 0deg, #4930a1 0 32deg, #20244c 32deg 34deg, #ae3d97 34deg 66deg, #20244c 66deg 68deg, #1a7e86 68deg 100deg, #20244c 100deg 102deg, #693bc0 102deg 134deg, #20244c 134deg 136deg, #a63b8b 136deg 168deg, #20244c 168deg 170deg, #207e81 170deg 202deg, #20244c 202deg 204deg, #4930a1 204deg 236deg, #20244c 236deg 238deg, #ae3d97 238deg 270deg, #20244c 270deg 272deg, #1a7e86 272deg 304deg, #20244c 304deg 306deg, #693bc0 306deg 338deg, #20244c 338deg 340deg, #a63b8b 340deg); box-shadow: 0 0 0 12px rgba(116, 91, 230, .055), 0 0 45px rgba(117, 71, 229, .26), inset 0 0 25px rgba(5, 6, 20, .42); animation: wheel-float 7s ease-in-out infinite; }
.mini-wheel::before { content: ''; position: absolute; inset: 9px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; }
.wheel-center { position: absolute; width: 94px; height: 94px; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: radial-gradient(circle at 35% 25%, #2d315c, #101326 70%); box-shadow: 0 0 25px rgba(6,7,18,.8), 0 0 0 6px rgba(9,10,26,.45); }
.wheel-center span { font: 700 27px var(--font-display); color: var(--gold); }
.wheel-center small { color: #a4a9c3; font-size: 7px; letter-spacing: 1.3px; }
.wheel-number { position: absolute; color: rgba(255,255,255,.88); font: 700 10px var(--font-display); text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.n1 { left: 131px; top: 20px; }.n2 { right: 72px; top: 30px; }.n3 { right: 30px; top: 81px; }.n4 { right: 21px; top: 141px; }.n5 { right: 51px; bottom: 45px; }.n6 { right: 105px; bottom: 18px; }.n7 { left: 94px; bottom: 21px; }.n8 { left: 42px; bottom: 56px; }.n9 { left: 19px; top: 125px; }.n10 { left: 48px; top: 57px; }
.wheel-pointer { position: absolute; top: -22px; left: calc(50% - 9px); color: var(--gold); filter: drop-shadow(0 0 8px rgba(255,202,98,.7)); font-size: 19px; }
@keyframes wheel-float { 50% { transform: translateY(-6px) rotate(3deg); } }
.floating-chip { position: absolute; display: flex; align-items: center; gap: 8px; padding: 10px 13px; border-radius: 10px; border: 1px solid rgba(180, 190, 239, .16); background: rgba(17, 20, 43, .86); backdrop-filter: blur(12px); box-shadow: 0 12px 30px rgba(0,0,0,.23); font-size: 8px; font-weight: 700; letter-spacing: .6px; color: #dfe2f6; }
.floating-chip .pulse-dot { width: 6px; height: 6px; background: var(--cyan); box-shadow: 0 0 9px var(--cyan); }
.chip-live { top: 98px; left: 1%; }.chip-proof { right: 1%; bottom: 88px; color: #bfefe9; }
.chip-check { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 5px; background: rgba(57,229,210,.14); color: var(--cyan); }
.spark { position: absolute; color: var(--cyan); text-shadow: 0 0 15px rgba(57,229,210,.7); }.spark-a { top: 92px; right: 20%; font-size: 18px; }.spark-b { bottom: 98px; left: 11%; color: var(--pink); font-size: 24px; }.spark-c { top: 48px; left: 30%; color: var(--gold); font-size: 13px; }
.content-section { padding: 35px 0 30px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 17px; }
.section-heading .eyebrow { margin-bottom: 8px; }
.section-heading h2 { margin: 0; font-size: 25px; letter-spacing: -.8px; }
.section-heading .button { gap: 8px; }
.filter-row { display: flex; align-items: center; gap: 7px; margin-bottom: 17px; }
.filter-chip { padding: 7px 12px; color: #9ea4bd; font-size: 10px; border-radius: 7px; border: 1px solid rgba(155, 165, 217, .12); background: rgba(255,255,255,.02); cursor: pointer; }
.filter-chip:hover, .filter-chip.active { color: #e7e1ff; border-color: rgba(156, 127, 251, .4); background: rgba(134, 97, 239, .14); }
.results-count { margin-left: auto; color: #767d9b; font-size: 10px; }
.raffle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; min-height: 104px; }
.raffle-card { overflow: hidden; position: relative; display: flex; flex-direction: column; min-height: 255px; padding: 17px; border: 1px solid rgba(161, 171, 232, .13); border-radius: 14px; background: linear-gradient(145deg, rgba(23, 27, 54, .93), rgba(14, 17, 36, .93)); transition: .2s ease; }
.raffle-card:hover { border-color: rgba(165, 130, 255, .45); transform: translateY(-3px); box-shadow: 0 14px 35px rgba(0,0,0,.18); }
.raffle-card::after { content: ''; position: absolute; width: 100px; height: 100px; right: -44px; top: -43px; border-radius: 50%; background: rgba(126, 86, 255, .1); filter: blur(3px); }
.raffle-card-top { display: flex; justify-content: space-between; align-items: center; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 5px 8px; border: 1px solid rgba(57,229,210,.17); border-radius: 6px; background: rgba(57,229,210,.075); color: #91e7dc; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .65px; }
.status-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); }
.status-pill.status-drawing { color: #d0b5ff; background: rgba(138,92,255,.1); border-color: rgba(138,92,255,.24); }.status-pill.status-drawing::before { background: var(--purple); }
.status-pill.status-complete { color: #ffde9c; background: rgba(255,202,98,.08); border-color: rgba(255,202,98,.18); }.status-pill.status-complete::before { background: var(--gold); }
.raffle-card-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(145deg, rgba(145,91,248,.22), rgba(255,69,189,.12)); border: 1px solid rgba(181,144,255,.15); font-size: 17px; color: #d1b8ff; }
.raffle-prize-label { margin: 18px 0 4px; color: #9299b5; text-transform: uppercase; font-size: 8px; font-weight: 700; letter-spacing: 1.5px; }
.raffle-card h3 { margin: 0; font-size: 18px; letter-spacing: -.4px; }
.raffle-group { margin: 5px 0 17px; color: #9197b2; font-size: 10px; }
.raffle-stats { display: flex; gap: 15px; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(160, 169, 222, .09); }
.raffle-stat { display: flex; flex-direction: column; gap: 4px; min-width: 50px; }.raffle-stat span { color: #7e85a3; font-size: 8px; }.raffle-stat strong { color: #d9dbee; font-size: 11px; }
.progress-wrap { display: flex; align-items: center; gap: 7px; margin-top: 12px; }.progress-track { height: 4px; flex: 1; overflow: hidden; border-radius: 9px; background: rgba(177,185,234,.1); }.progress-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--purple), var(--pink)); border-radius: inherit; }.progress-wrap small { color: #969cb6; font-size: 8px; white-space: nowrap; }
.progress-track .pct-0 { width: 0; }.progress-track .pct-10 { width: 10%; }.progress-track .pct-20 { width: 20%; }.progress-track .pct-30 { width: 30%; }.progress-track .pct-40 { width: 40%; }.progress-track .pct-50 { width: 50%; }.progress-track .pct-60 { width: 60%; }.progress-track .pct-70 { width: 70%; }.progress-track .pct-80 { width: 80%; }.progress-track .pct-90 { width: 90%; }.progress-track .pct-100 { width: 100%; }
.card-open { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; cursor: pointer; }
.card-open:focus-visible { outline: 2px solid var(--cyan); outline-offset: -3px; border-radius: inherit; }
.empty-state, .error-state, .loading-card { min-height: 120px; grid-column: 1 / -1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 9px; padding: 24px; border: 1px dashed rgba(158,171,226,.19); border-radius: 13px; background: rgba(255,255,255,.016); text-align: center; }
.empty-icon { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 3px; color: #a28be7; border-radius: 12px; background: rgba(138,92,255,.1); font-size: 18px; }.empty-state strong, .error-state strong { font-size: 13px; }.empty-state p, .error-state p { max-width: 380px; margin: 0; color: #8d93ad; font-size: 11px; line-height: 1.6; }
.loading-card { flex-direction: row; min-height: 94px; color: #9ba2bd; font-size: 11px; }
.loader { width: 17px; height: 17px; border: 2px solid rgba(156, 172, 220, .2); border-top-color: var(--cyan); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.trust-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 37px; padding: 18px 20px; border: 1px solid rgba(160, 170, 227, .1); border-radius: 12px; background: rgba(255,255,255,.018); }
.trust-strip > div { display: flex; align-items: center; gap: 11px; }.trust-icon { flex: 0 0 auto; width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 10px; font: 700 11px var(--font-display); }.trust-icon.turquoise { color: var(--cyan); background: rgba(57,229,210,.06); }.trust-icon.pink { color: var(--pink); background: rgba(255,69,189,.055); }.trust-icon.gold { color: var(--gold); background: rgba(255,202,98,.055); }.trust-strip p { display: flex; flex-direction: column; gap: 4px; margin: 0; }.trust-strip strong { font-size: 10px; }.trust-strip small { color: #7e85a2; font-size: 9px; line-height: 1.4; }
.site-footer { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid rgba(167,177,232,.1); color: #7f86a3; }
.brand-small { transform: scale(.85); transform-origin: left center; min-width: 145px; }.site-footer p, .site-footer a:last-child { margin: 0; font-size: 9px; }.site-footer p span { margin-left: 11px; color: #676e8a; }.site-footer a:last-child:hover { color: var(--cyan); }
.mobile-nav { display: none; }
.page-heading { padding: 42px 0 25px; }.page-heading h1 { margin: 8px 0 7px; font-size: 40px; letter-spacing: -1.8px; }.page-heading p { margin: 0; color: #969cb5; font-size: 12px; }.admin-heading { display: flex; justify-content: space-between; align-items: center; }.role-badge { padding: 7px 11px; color: #f2c2ff; border: 1px solid rgba(203,120,236,.24); border-radius: 7px; background: rgba(203,120,236,.08); font-size: 9px; font-weight: 700; letter-spacing: 1.4px; }
.back-link { margin: 29px 0 10px; padding: 0; border: 0; background: none; color: #a8a0d9; font-size: 11px; cursor: pointer; }.back-link:hover { color: white; }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(290px, .8fr); gap: 18px; padding: 14px 0 35px; align-items: start; }
.detail-main, .detail-side, .panel, .leaderboard-panel { border: 1px solid rgba(161,171,232,.13); border-radius: 14px; background: linear-gradient(150deg, rgba(21,25,50,.93), rgba(13,16,34,.93)); }
.detail-main { padding: 24px; }.detail-side { padding: 18px; position: sticky; top: 20px; }.detail-title-row { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }.detail-title-row h1 { margin: 10px 0 5px; font-size: 30px; letter-spacing: -1px; }.detail-subtitle { margin: 0; color: #959bb5; font-size: 11px; }.detail-description { margin: 18px 0 21px; color: #b1b6cc; font-size: 12px; line-height: 1.7; }
.detail-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 20px 0; }.metric-box { padding: 12px; border: 1px solid rgba(161,171,232,.1); border-radius: 9px; background: rgba(255,255,255,.02); }.metric-box small, .metric-box strong { display: block; }.metric-box small { margin-bottom: 6px; color: #8087a3; font-size: 8px; }.metric-box strong { font: 600 15px var(--font-display); }.metric-box .gold-text { color: var(--gold); }
.detail-side h3 { margin: 0 0 4px; font-size: 14px; }.detail-side > p { margin-bottom: 15px; color: #858ba7; font-size: 10px; line-height: 1.6; }
.slot-heading { display: flex; justify-content: space-between; align-items: center; margin: 24px 0 10px; }.slot-heading h2 { margin: 0; font-size: 15px; }.slot-heading span { color: #828aa8; font-size: 9px; }
.slot-grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 8px; }.slot { min-height: 58px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px solid rgba(158,171,226,.16); border-radius: 9px; background: rgba(255,255,255,.025); }.slot strong { font: 700 13px var(--font-display); }.slot small { max-width: 92%; overflow: hidden; color: #858ba6; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }.slot.available { border-color: rgba(57,229,210,.24); background: rgba(57,229,210,.045); color: #8ce1d9; }.slot.available .slot-select { position: absolute; inset: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }.slot.available:hover { background: rgba(57,229,210,.11); box-shadow: 0 0 0 1px rgba(57,229,210,.25); }.slot.occupied { color: #aeb2c5; border-color: rgba(158,171,226,.13); background: rgba(255,255,255,.018); }.slot.mine { color: #dfc5ff; border-color: rgba(174,123,255,.45); background: rgba(138,92,255,.1); }.slot.neutral { border-style: dashed; color: var(--gold); background: rgba(255,202,98,.045); border-color: rgba(255,202,98,.28); grid-column: span 2; }.slot.neutral small { color: #b79b68; }
.draw-panel { padding: 16px; border: 1px solid rgba(138,92,255,.18); border-radius: 11px; background: linear-gradient(135deg, rgba(138,92,255,.08), rgba(57,229,210,.035)); }.draw-panel h3 { margin-bottom: 5px; }.draw-panel p { margin: 0; color: #8d94ae; font-size: 10px; line-height: 1.6; }.draw-sequence { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 13px; }.draw-step { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(156,165,222,.13); border-radius: 7px; color: #939ab5; background: rgba(255,255,255,.025); font: 600 9px var(--font-display); }.draw-step.current { color: #fff; border-color: rgba(255,69,189,.48); background: rgba(255,69,189,.13); box-shadow: 0 0 14px rgba(255,69,189,.15); }.draw-step.eliminated { color: #59607b; background: rgba(0,0,0,.12); text-decoration: line-through; opacity: .7; }.winner-reveal { margin-top: 11px; padding: 12px; border-radius: 9px; border: 1px solid rgba(255,202,98,.24); background: rgba(255,202,98,.07); }.winner-reveal small { display: block; margin-bottom: 4px; color: #c5a75e; font-size: 8px; letter-spacing: 1.2px; }.winner-reveal strong { color: #ffe3a1; font-size: 14px; }
.seat-select-note { margin: 11px 0 0; color: #787f9d; font-size: 9px; }.selected-seat { color: var(--cyan); font-weight: 700; }
.panel-list { display: flex; flex-direction: column; gap: 10px; }.history-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 18px; padding: 16px; border: 1px solid rgba(161,171,232,.13); border-radius: 12px; background: rgba(18,21,43,.8); }.history-row h3 { margin: 0 0 4px; font-size: 14px; }.history-row p { margin: 0; color: #888eaa; font-size: 10px; }.history-meta { display: flex; flex-direction: column; gap: 4px; text-align: right; }.history-meta small { color: #777f9a; font-size: 8px; }.history-meta strong { font-size: 11px; }.leaderboard-panel { overflow: hidden; max-width: 780px; }.leaderboard-head, .leader-row { display: grid; grid-template-columns: 54px 1fr 120px 100px; align-items: center; gap: 12px; padding: 13px 18px; }.leaderboard-head { border-bottom: 1px solid var(--line); color: #7f86a2; font-size: 8px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; }.leader-row { border-bottom: 1px solid rgba(161,171,232,.07); font-size: 11px; }.leader-row:last-child { border: 0; }.leader-position { color: #858ca8; font: 700 12px var(--font-display); }.leader-row:nth-child(2) .leader-position { color: var(--gold); }.leader-user { display: flex; align-items: center; gap: 10px; }.avatar { width: 30px; height: 30px; display: grid; place-items: center; color: #c9b7ff; border-radius: 10px; border: 1px solid rgba(164,132,250,.22); background: rgba(138,92,255,.1); font-weight: 700; font-size: 10px; }.leader-points { color: var(--cyan); font-weight: 700; text-align: right; }.leader-plays { color: #9aa0b8; text-align: right; }
.profile-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px,.7fr); gap: 14px; }.profile-card { padding: 21px; border: 1px solid rgba(161,171,232,.13); border-radius: 13px; background: rgba(18,21,43,.84); }.profile-user { display: flex; align-items: center; gap: 14px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }.profile-avatar { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(145deg, rgba(137,92,255,.33), rgba(57,229,210,.16)); border: 1px solid rgba(167,144,255,.25); font: 700 19px var(--font-display); color: #e3d9ff; }.profile-user h2 { margin: 0 0 4px; font-size: 16px; }.profile-user p { margin: 0; color: #8e95af; font-size: 10px; }.profile-data { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 16px; }.profile-data span { display: block; margin-bottom: 5px; color: #8188a4; font-size: 8px; }.profile-data strong { font-size: 11px; }.profile-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }.summary-tile { padding: 15px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.018); }.summary-tile small { display: block; margin-bottom: 8px; color: #858ba7; font-size: 9px; }.summary-tile strong { font: 700 23px var(--font-display); color: #d4c5ff; }
.admin-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }.admin-stat { padding: 15px; border: 1px solid rgba(161,171,232,.13); border-radius: 11px; background: rgba(18,21,43,.84); }.admin-stat small { display: block; margin-bottom: 9px; color: #888fa9; font-size: 9px; }.admin-stat strong { font: 700 23px var(--font-display); }.admin-section { margin-top: 15px; padding: 18px; border: 1px solid rgba(161,171,232,.13); border-radius: 13px; background: rgba(18,21,43,.84); }.admin-section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }.admin-section h2 { margin: 0; font-size: 15px; }.admin-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 10px; }.admin-table th { color: #8087a3; text-transform: uppercase; font-size: 8px; letter-spacing: .7px; }.admin-table td, .admin-table th { padding: 11px 8px; border-bottom: 1px solid rgba(161,171,232,.09); }.admin-table tr:last-child td { border: 0; }.admin-table td { color: #c3c7d9; }.admin-table .button { min-height: 29px; padding: 0 9px; font-size: 9px; }.admin-actions { display: flex; flex-wrap: wrap; gap: 5px; }.admin-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.admin-form-grid .form-field:last-of-type { grid-column: 1 / -1; }.admin-tabs { display: flex; gap: 7px; margin: 18px 0 13px; }.admin-tabs button { padding: 7px 11px; background: transparent; color: #9ca2ba; border: 1px solid var(--line); border-radius: 7px; font-size: 10px; cursor: pointer; }.admin-tabs button.active { color: #e2d8ff; border-color: rgba(138,92,255,.38); background: rgba(138,92,255,.1); }
.modal { position: fixed; width: min(100% - 28px, 430px); max-height: min(90vh, 760px); overflow-y: auto; padding: 27px; border: 1px solid rgba(163,176,234,.21); border-radius: 16px; color: var(--text); background: linear-gradient(145deg, #171b38, #101327 70%); box-shadow: 0 25px 100px rgba(0,0,0,.65), 0 0 60px rgba(108,75,209,.12); }
.modal::backdrop { background: rgba(4,5,14,.78); backdrop-filter: blur(7px); }.modal-medium { width: min(100% - 28px, 490px); }.modal-dismiss { position: absolute; top: 12px; right: 12px; }.modal-dismiss button { font-size: 20px; border: 0; background: transparent; }.modal-head { margin: 4px 0 18px; }.modal-head h2 { margin: 7px 0 6px; font-size: 24px; letter-spacing: -.7px; }.modal-head p { margin: 0; color: #969db7; font-size: 11px; line-height: 1.6; }.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 16px; background: rgba(0,0,0,.19); border-radius: 9px; }.auth-tabs button { padding: 9px; border: 0; border-radius: 6px; background: transparent; color: #959bb3; font-size: 10px; cursor: pointer; }.auth-tabs button.active { color: #f0eaff; background: rgba(138,92,255,.16); box-shadow: inset 0 0 0 1px rgba(155,121,250,.16); }
.stack-form { display: flex; flex-direction: column; gap: 12px; }.form-field { display: flex; flex-direction: column; gap: 7px; color: #c4c8d9; font-size: 10px; font-weight: 600; }.form-field input { width: 100%; height: 42px; padding: 0 12px; outline: none; color: #f4f4fd; border: 1px solid rgba(162,173,225,.17); border-radius: 8px; background: rgba(5,7,18,.38); font-size: 11px; transition: border-color .17s, box-shadow .17s; }.form-field input::placeholder { color: #646b86; }.form-field input:focus { border-color: rgba(138,92,255,.67); box-shadow: 0 0 0 3px rgba(138,92,255,.1); }.fine-print { margin: 0; color: #727a97; font-size: 9px; line-height: 1.55; text-align: center; }.form-error { margin: -2px 0 0; padding: 9px 10px; color: #ffc0c5; border-radius: 7px; background: rgba(255,115,127,.09); font-size: 10px; line-height: 1.5; }.yape-instructions { display: flex; flex-direction: column; gap: 7px; margin-bottom: 15px; padding: 13px; border: 1px solid rgba(255,69,189,.2); border-radius: 10px; background: rgba(255,69,189,.055); color: #dad3e5; font-size: 10px; line-height: 1.45; }.yape-logo { width: fit-content; padding: 4px 7px; border-radius: 5px; background: #7c39a7; color: white; font-size: 10px; font-weight: 700; letter-spacing: .5px; }.yape-instructions small { color: #9690a4; font-size: 9px; }
.how-steps { list-style: none; margin: 18px 0 22px; padding: 0; display: flex; flex-direction: column; gap: 13px; }.how-steps li { display: flex; align-items: flex-start; gap: 11px; }.how-steps li > b { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto; border-radius: 8px; border: 1px solid rgba(150,118,248,.23); background: rgba(138,92,255,.1); color: #bca4ff; font: 700 10px var(--font-display); }.how-steps li span { display: flex; flex-direction: column; gap: 4px; }.how-steps strong { font-size: 11px; }.how-steps small { color: #8f96b0; font-size: 9px; line-height: 1.5; }
.export-card { padding: 18px; overflow: hidden; position: relative; border: 1px solid rgba(198,179,255,.32); border-radius: 13px; background: radial-gradient(ellipse at 88% 16%, rgba(87,65,171,.38), transparent 55%), linear-gradient(130deg, #15182e, #0e1224); box-shadow: inset 0 0 32px rgba(109,77,190,.08); }.export-card::before { content: ''; position: absolute; width: 220px; height: 220px; left: -120px; bottom: -160px; border: 1px solid rgba(57,229,210,.16); border-radius: 50%; box-shadow: 0 0 0 18px rgba(57,229,210,.025), 0 0 0 38px rgba(57,229,210,.02); }.export-card-top, .export-card-foot { display: flex; justify-content: space-between; align-items: center; }.export-brand { font: 700 10px var(--font-display); letter-spacing: .8px; }.export-brand span { color: var(--pink); }.export-stamp { color: #c3a3ff; font-size: 7px; font-weight: 700; letter-spacing: 1.2px; }.export-card-content { position: relative; padding: 22px 0 13px; }.export-card-content > small, .export-winner small, .export-meta small { display: block; color: #8c92ad; font-size: 7px; letter-spacing: 1.15px; }.export-card-content h3 { margin: 5px 0 17px; font-size: 21px; }.export-winner { display: flex; align-items: center; gap: 11px; }.export-winner-icon { display: grid; place-items: center; width: 39px; height: 39px; color: var(--gold); border-radius: 11px; border: 1px solid rgba(255,202,98,.25); background: rgba(255,202,98,.08); font-size: 20px; }.export-winner div { display: flex; flex-direction: column; gap: 5px; }.export-winner strong { font: 700 15px var(--font-display); color: #f4e5ff; }.export-meta { display: flex; gap: 25px; margin-top: 17px; }.export-meta span { display: flex; flex-direction: column; gap: 5px; }.export-meta strong { font-size: 9px; }.export-qr { position: absolute; right: 0; bottom: 14px; width: 65px; height: 65px; display: grid; place-items: center; padding: 4px; border-radius: 6px; background: white; color: #24223d; font-size: 9px; }.export-qr img, .export-qr canvas { width: 100% !important; height: 100% !important; }.export-card-foot { position: relative; padding-top: 11px; border-top: 1px solid rgba(177,184,225,.12); color: #858ba4; font-size: 8px; }.card-actions { display: flex; gap: 8px; margin-top: 13px; }.card-actions > * { flex: 1; padding: 0 8px; font-size: 10px; }
.verify-card { max-width: 600px; margin: 80px auto; padding: 30px; text-align: center; border: 1px solid var(--line); border-radius: 15px; background: rgba(18,21,43,.83); }.verify-card h1 { margin: 13px 0 6px; font-size: 24px; }.verify-card p { color: #989eb7; font-size: 11px; line-height: 1.6; }.verify-mark { margin: 0 auto 13px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; color: var(--cyan); background: rgba(57,229,210,.09); border: 1px solid rgba(57,229,210,.24); font-size: 22px; }
.toast-region { position: fixed; z-index: 20; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }.toast { max-width: min(370px, calc(100vw - 32px)); padding: 12px 15px; border: 1px solid rgba(57,229,210,.23); border-radius: 10px; background: rgba(17,22,43,.96); color: #d2f5f0; box-shadow: 0 12px 36px rgba(0,0,0,.35); font-size: 11px; line-height: 1.4; animation: view-in .2s ease; }.toast.error { border-color: rgba(255,115,127,.25); color: #ffd1d4; }
.account-chip { display: flex; align-items: center; gap: 7px; padding: 3px 7px 3px 3px; border: 1px solid rgba(161,171,232,.13); border-radius: 9px; background: rgba(255,255,255,.025); cursor: pointer; }.account-chip strong { max-width: 90px; overflow: hidden; color: #d8daeb; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.account-chip .avatar { width: 25px; height: 25px; border-radius: 7px; font-size: 8px; }.logout-button { width: 32px; height: 32px; }
.register-fields { display: flex; flex-direction: column; gap: 10px; }.phone-input { display: flex; align-items: center; height: 42px; overflow: hidden; border: 1px solid rgba(162,173,225,.17); border-radius: 8px; background: rgba(5,7,18,.38); }.phone-input:focus-within { border-color: rgba(138,92,255,.67); box-shadow: 0 0 0 3px rgba(138,92,255,.1); }.phone-input > span { align-self: stretch; display: grid; place-items: center; padding: 0 10px; border-right: 1px solid rgba(162,173,225,.14); color: #c8c9d9; white-space: nowrap; font-size: 10px; }.phone-input input { height: 100%; flex: 1; min-width: 0; border: 0; box-shadow: none !important; background: transparent; }.form-field > small { color: #79809c; font-size: 9px; font-weight: 400; }.otp-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }.otp-row .button { min-height: 42px; }.otp-status { margin: -4px 0 0; color: #9299b3; font-size: 9px; }.otp-status.success { color: #7ee2d4; }.game-account-box { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid rgba(157,138,224,.17); border-radius: 10px; background: rgba(138,92,255,.045); }.game-account-box > p { margin: 0; color: #9299b2; font-size: 9px; line-height: 1.55; }.account-state-line { display: flex; flex-wrap: wrap; gap: 5px; }.state-tag { padding: 4px 6px; border-radius: 5px; font-size: 7px; font-weight: 700; letter-spacing: .6px; }.state-pending { border: 1px solid rgba(255,202,98,.18); color: #e5c984; background: rgba(255,202,98,.06); }.account-id-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.attestation { display: flex; align-items: flex-start; gap: 8px; color: #b8bdd0; font-size: 9px; line-height: 1.5; cursor: pointer; }.attestation input { accent-color: var(--purple); flex: 0 0 auto; margin: 2px 0 0; }.attestation input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }.payment-mini { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 12px; border: 1px solid rgba(255,69,189,.17); border-radius: 9px; background: rgba(255,69,189,.045); }.payment-mini p { margin: 0; color: #9992a9; font-size: 9px; line-height: 1.55; }.privacy-note, .money-disabled, .account-disclaimer { margin-top: 12px; padding: 10px; border-radius: 8px; color: #9399b0; background: rgba(255,255,255,.025); font-size: 9px; line-height: 1.55; }.privacy-note { display: flex; gap: 7px; }.privacy-note span { color: var(--cyan); }.money-disabled { border: 1px solid rgba(255,202,98,.17); color: #dac28e; background: rgba(255,202,98,.045); }.winner-hidden { margin: 10px 0 0 !important; padding: 8px 10px; border-left: 2px solid var(--purple); color: #a7aac1 !important; background: rgba(138,92,255,.05); }.winner-actions { margin-top: 9px; }.winner-reveal .button { min-height: 32px; }.account-disclaimer { margin-bottom: 0; }.small-strong { font: 600 12px var(--font-body) !important; }.qr-unavailable { padding: 4px; color: #3b3658; font-size: 7px; text-align: center; }.selected { outline: 1px solid var(--cyan); outline-offset: 1px; }
@media (max-width: 920px) { .app-shell { width: min(100% - 36px, 720px); }.topbar { height: 72px; }.top-nav { gap: 16px; }.top-nav .nav-link { font-size: 10px; }.brand { min-width: unset; }.connection-label { display: none; }.account-actions { min-width: unset; }.hero-grid { min-height: 400px; grid-template-columns: .95fr 1fr; gap: 0; }.hero-copy h1 { font-size: 62px; }.hero-art { transform: scale(.85); margin: 0 -35px; }.raffle-grid { grid-template-columns: repeat(2, 1fr); }.detail-layout { grid-template-columns: 1fr; }.detail-side { position: static; }.profile-layout { grid-template-columns: 1fr; }.trust-strip { gap: 12px; padding: 15px; }.trust-strip small { font-size: 8px; } }
@media (max-width: 680px) {
  body { padding-bottom: calc(63px + env(safe-area-inset-bottom)); }.app-shell { width: calc(100% - 32px); }.topbar { height: 66px; }.brand-mark { width: 34px; height: 34px; border-radius: 10px; }.brand-copy strong { font-size: 16px; }.top-nav { display: none; }.account-actions { gap: 5px; }.connection-dot { width: 6px; height: 6px; }.account-actions .button { min-height: 35px; padding: 0 12px; font-size: 10px; }.hero-grid { min-height: unset; grid-template-columns: 1fr; gap: 0; padding: 34px 0 9px; }.hero-copy { padding-left: 0; }.eyebrow { font-size: 8px; letter-spacing: 1.6px; }.hero-copy h1 { margin: 13px 0; font-size: clamp(54px, 16vw, 70px); letter-spacing: -4px; }.hero-lede { max-width: 390px; margin-bottom: 18px; font-size: 12px; line-height: 1.7; }.hero-actions { gap: 8px; }.button { min-height: 42px; padding: 0 14px; font-size: 10px; }.proof-row { margin-top: 21px; }.hero-art { height: 305px; margin: -3px -15px -10px; transform: none; }.mini-wheel { width: 220px; height: 220px; }.wheel-center { width: 75px; height: 75px; }.wheel-center span { font-size: 22px; }.wheel-center small { font-size: 6px; }.wheel-number { font-size: 8px; }.n1 { left: 105px; top: 17px; }.n2 { right: 57px; top: 26px; }.n3 { right: 25px; top: 66px; }.n4 { right: 16px; top: 113px; }.n5 { right: 42px; bottom: 36px; }.n6 { right: 84px; bottom: 16px; }.n7 { left: 74px; bottom: 18px; }.n8 { left: 34px; bottom: 46px; }.n9 { left: 16px; top: 100px; }.n10 { left: 39px; top: 48px; }.orbit-one { width: 350px; height: 165px; }.orbit-two { width: 340px; height: 155px; }.hero-art::before { width: 330px; height: 290px; }.chip-live { top: 29px; left: 2%; }.chip-proof { right: 2%; bottom: 33px; }.floating-chip { padding: 8px 10px; font-size: 7px; }.spark-a { top: 18px; right: 21%; }.spark-b { bottom: 28px; left: 5%; }.content-section { padding: 26px 0; }.section-heading h2 { font-size: 22px; }.section-heading .button span { display: none; }.filter-chip { padding: 7px 10px; }.raffle-grid { grid-template-columns: 1fr; gap: 10px; }.raffle-card { min-height: 230px; padding: 15px; }.trust-strip { grid-template-columns: 1fr; gap: 12px; margin-top: 10px; padding: 14px; }.trust-strip small { font-size: 9px; }.site-footer { min-height: 77px; flex-wrap: wrap; gap: 0 10px; padding: 12px 0; }.site-footer p { font-size: 8px; }.site-footer p span { display: block; margin: 4px 0 0; }.site-footer a:last-child { font-size: 8px; }.brand-small { min-width: 120px; transform: scale(.75); }.mobile-nav { position: fixed; z-index: 12; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(4,1fr); padding: 8px 9px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(164,175,231,.14); background: rgba(9,11,25,.93); backdrop-filter: blur(16px); }.mobile-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 2px; border: 0; background: transparent; color: #737b98; font-size: 8px; cursor: pointer; }.mobile-nav-item span { font-size: 17px; line-height: 1.1; }.mobile-nav-item.active { color: #d5c5ff; }.mobile-nav-item.active span { color: var(--cyan); }
  .page-heading { padding: 30px 0 20px; }.page-heading h1 { font-size: 32px; }.page-heading p { font-size: 11px; }.history-row { grid-template-columns: 1fr auto; gap: 9px; padding: 13px; }.history-row .status-pill { grid-column: 2; grid-row: 1 / span 2; }.history-meta { text-align: left; }.leaderboard-head, .leader-row { grid-template-columns: 35px 1fr 65px; gap: 8px; padding: 12px; }.leaderboard-head span:nth-child(3), .leader-plays { display: none; }.leader-points { font-size: 10px; }.profile-summary { grid-template-columns: 1fr 1fr; }.admin-grid { grid-template-columns: repeat(2,1fr); }.admin-section { padding: 13px; overflow-x: auto; }.admin-table { min-width: 500px; }.admin-form-grid { grid-template-columns: 1fr; }.admin-form-grid .form-field:last-of-type { grid-column: auto; }.detail-layout { gap: 10px; padding-top: 8px; }.detail-main { padding: 15px; }.detail-side { padding: 15px; }.detail-title-row h1 { font-size: 24px; }.detail-metrics { gap: 5px; }.metric-box { padding: 9px; }.metric-box strong { font-size: 12px; }.slot-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }.slot { min-height: 54px; }.slot.neutral { grid-column: span 2; }.modal { padding: 23px 18px; }.modal-head h2 { font-size: 21px; }.export-card { padding: 13px; }.export-card-content h3 { font-size: 18px; }.card-actions { flex-direction: column; }.toast-region { right: 10px; bottom: calc(72px + env(safe-area-inset-bottom)); left: 10px; align-items: stretch; }.toast { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
.leaderboard-head, .leader-row { grid-template-columns: 35px minmax(120px,1.2fr) minmax(120px,1fr) 112px 80px; }.winner-prize { color: #d9dbeb; font-size: 10px; }.winner-prize small { display: block; margin-top: 4px; color: #7f86a2; font-size: 8px; }.winner-date { color: #969cb5; font-size: 9px; }.leaderboard-head span:last-child, .leader-points { text-align: right; }.leader-points { color: var(--gold); }.leaderboard-filters { margin-bottom: 13px; }.balance-strip { display: flex; align-items: center; gap: 20px; margin: 0 0 18px; padding: 15px 18px; border: 1px solid rgba(57,229,210,.14); border-radius: 12px; background: rgba(57,229,210,.035); }.balance-strip > div { display: flex; flex-direction: column; gap: 5px; }.balance-strip small { color: #8290a5; font-size: 8px; letter-spacing: .8px; }.balance-strip strong { font: 700 18px var(--font-display); }.balance-strip strong span { color: #9aa0b8; font: 500 10px var(--font-body); }.balance-strip button { margin-left: auto; }.history-section { margin: 22px 0; }.history-section h2 { margin: 0 0 10px; font-size: 16px; }.history-section .empty-state { min-height: 85px; }.points-field { margin: 13px 0 10px; }.points-field input { height: 44px; }.my-slot-note { padding: 10px; border: 1px solid rgba(57,229,210,.17); border-radius: 8px; color: #9bcebF; background: rgba(57,229,210,.05); font-size: 10px; }.my-slot-note strong { color: var(--cyan); font: 700 15px var(--font-display); margin-left: 4px; }.topup-button { margin-top: 8px; }.playback-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }.playback-controls > span { color: #7f86a3; font-size: 8px; }.sound-toggle { padding: 7px 9px; color: #a8a0cf; border: 1px solid rgba(161,171,232,.13); border-radius: 7px; background: rgba(255,255,255,.025); font-size: 9px; cursor: pointer; }.sound-toggle[aria-pressed="true"] { color: #baf3eb; border-color: rgba(57,229,210,.25); background: rgba(57,229,210,.07); }.admin-search { display: flex; gap: 8px; margin: 0 0 14px; }.admin-search input { flex: 1; min-width: 0; height: 36px; padding: 0 10px; color: #f4f4fd; border: 1px solid rgba(162,173,225,.17); border-radius: 8px; outline: 0; background: rgba(5,7,18,.38); font-size: 10px; }.admin-search input:focus { border-color: rgba(138,92,255,.6); }.admin-private-note { color: #888fa8; font-size: 9px; }.admin-section-head .admin-private-note { max-width: 260px; text-align: right; }.table-subline { display: block; margin-top: 4px; color: #7d849f; font-size: 8px; font-weight: 400; }.participant-detail { margin-top: 9px; min-width: 470px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: rgba(0,0,0,.13); }.participant-table th, .participant-table td { padding: 7px 5px; font-size: 8px; }.centered { justify-content: center; }
@media (max-width: 680px) { .leaderboard-head, .leader-row { grid-template-columns: 26px minmax(100px,1fr) 80px 50px; gap: 6px; padding: 10px; }.leaderboard-head span:nth-child(3), .winner-prize { display: none; }.leaderboard-head span:nth-child(4), .winner-date { display: none; }.balance-strip { flex-wrap: wrap; gap: 13px; padding: 12px; }.balance-strip button { margin-left: 0; }.history-section h2 { font-size: 14px; }.playback-controls { gap: 6px; }.playback-controls > span { flex-basis: 100%; }.admin-section-head { align-items: flex-start; gap: 8px; }.admin-section-head .admin-private-note { max-width: 130px; }.admin-search .button { padding: 0 10px; }.profile-data { gap: 11px; } }
@media (max-width: 680px) { .notice-bar { display: grid; grid-template-columns: 19px minmax(0, 1fr); align-items: start; width: calc(100vw - 64px); max-width: 320px; margin-inline: 0; padding: 10px 38px 10px 10px; }.notice-bar #notice-text { width: auto; flex: initial; min-width: 0; }.notice-close { top: 5px; right: 5px; transform: none; } }
@media (max-width: 360px) { .hero-copy { min-width: 0; }.hero-copy h1 { font-size: 48px; letter-spacing: -3.5px; }.hero-lede { max-width: 100%; font-size: 11px; } }

/* Refined responsive layout and vector wheel */
html { scroll-behavior: smooth; }
body { overflow-x: clip; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.app-shell { width: min(1280px, calc(100% - 56px)); min-width: 0; }
.topbar { gap: clamp(12px, 2vw, 28px); }
.top-nav { gap: clamp(14px, 2vw, 28px); }
.nav-link { font-size: 12px; white-space: nowrap; }
.account-actions { flex-shrink: 0; }
.hero-grid { min-height: 520px; grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); gap: clamp(20px, 4vw, 58px); padding: clamp(34px, 5vw, 62px) 0 26px; overflow: visible; }
.hero-copy { min-width: 0; max-width: 580px; padding: 0 0 12px; }
.hero-copy h1 { max-width: 620px; font-size: clamp(58px, 6.3vw, 84px); line-height: .98; letter-spacing: -.075em; }
.hero-lede { max-width: 430px; font-size: 15px; }
.hero-art { height: auto; min-height: 0; margin: 0; transform: none; display: grid; place-items: center; }
.hero-art::before { width: min(100%, 500px); height: auto; aspect-ratio: 1; background: radial-gradient(ellipse, rgba(113,69,231,.28), rgba(26,54,115,.1) 48%, transparent 72%); }
.wheel-stage { position: relative; width: min(100%, 440px); aspect-ratio: 1; isolation: isolate; filter: drop-shadow(0 25px 36px rgba(0,0,0,.3)); animation: wheel-drift 8s ease-in-out infinite; }
.hero-wheel { display: block; width: 100%; height: 100%; overflow: visible; }
.wheel-labels { fill: rgba(255,255,255,.94); font: 700 16px var(--font-display); letter-spacing: .5px; paint-order: stroke; stroke: rgba(17,19,38,.25); stroke-width: 1px; }
.wheel-hub-mark { fill: #f7f6ff; font: 700 44px var(--font-display); letter-spacing: -4px; }
.wheel-hub-label { fill: #a5acc6; font: 700 7px var(--font-body); letter-spacing: 1.5px; }
.wheel-pointer { position: absolute; z-index: 2; top: -6.5%; left: 50%; width: 9%; line-height: 0; transform: translateX(-50%); filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)); }
.wheel-pointer svg { display: block; width: 100%; height: auto; overflow: visible; }
@keyframes wheel-drift { 0%, 100% { transform: translateY(0) rotate(-.4deg); } 50% { transform: translateY(-7px) rotate(.4deg); } }
.section-heading { gap: 18px; }
.section-heading > div, .hero-grid > * { min-width: 0; }
.raffle-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.detail-layout { grid-template-columns: minmax(0, 1.5fr) minmax(280px, .72fr); gap: 22px; }
.profile-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px; }
.leaderboard-panel, .admin-section { max-width: 100%; }
.admin-section { overflow-x: auto; }
.site-footer { gap: 16px; }

@media (max-width: 1024px) {
  .app-shell { width: calc(100% - 48px); }
  .topbar { gap: 14px; }
  .brand { min-width: 145px; }
  .top-nav { gap: 14px; }
  .top-nav .nav-link { font-size: 10px; }
  .account-actions { min-width: 0; }
  .hero-grid { min-height: 440px; gap: 22px; }
  .hero-copy h1 { font-size: clamp(54px, 6.7vw, 72px); }
  .wheel-stage { width: min(100%, 400px); }
  .raffle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-layout { grid-template-columns: minmax(0, 1fr); }
  .detail-side { position: static; }
  .profile-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 800px) {
  .app-shell { width: min(100% - 40px, 700px); }
  .hero-grid { min-height: 0; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 42px 0 18px; }
  .hero-copy { max-width: 650px; }
  .hero-copy h1 { max-width: 680px; font-size: clamp(60px, 9vw, 78px); }
  .hero-art { margin: 5px 0 0; }
  .wheel-stage { width: min(78vw, 390px); }
  .raffle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-layout, .profile-layout { grid-template-columns: minmax(0, 1fr); }
  .trust-strip { gap: 14px; }
}

@media (max-width: 680px) {
  .app-shell { width: calc(100% - 32px); }
  .topbar { height: 66px; gap: 8px; }
  .brand { min-width: 0; }
  .account-actions { gap: 7px; }
  .hero-grid { gap: 0; padding: 34px 0 10px; }
  .hero-copy { padding: 0; }
  .hero-copy h1 { margin: 14px 0; font-size: clamp(48px, 14vw, 68px); letter-spacing: -.075em; }
  .hero-lede { max-width: 39rem; margin-bottom: 18px; font-size: 14px; line-height: 1.7; }
  .hero-actions { flex-wrap: wrap; gap: 9px; }
  .hero-actions .button { min-height: 44px; padding-inline: 15px; font-size: 11px; }
  .proof-row { margin-top: 20px; }
  .proof-row strong { font-size: 11px; }
  .proof-row span { font-size: 10px; line-height: 1.5; }
  .hero-art { margin: 14px 0 6px; }
  .wheel-stage { width: min(100%, 350px); }
  .wheel-labels { font-size: 18px; }
  .raffle-grid { grid-template-columns: minmax(0, 1fr); }
  .section-heading { align-items: end; }
  .section-heading h2 { font-size: clamp(20px, 6vw, 24px); }
  .filter-row { max-width: 100%; overflow-x: auto; padding-bottom: 3px; }
  .trust-strip { grid-template-columns: minmax(0, 1fr); }
  .detail-layout { grid-template-columns: minmax(0, 1fr); }
  .detail-main, .detail-side { min-width: 0; }
  .site-footer { justify-content: flex-start; }
}

@media (max-width: 380px) {
  .app-shell { width: calc(100% - 28px); }
  .hero-copy h1 { font-size: clamp(44px, 13.8vw, 52px); letter-spacing: -.08em; }
  .eyebrow { letter-spacing: 1.2px; }
  .wheel-stage { width: min(100%, 310px); }
  .wheel-labels { font-size: 19px; }
  .proof-row { align-items: flex-start; }
  .proof-row span { max-width: 230px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wheel-stage { animation: none; }
}

/* Light theme */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --bg-soft: #f7f8fc;
  --panel: #ffffff;
  --panel-2: #f5f4fb;
  --line: rgba(40, 43, 76, .12);
  --muted: #687087;
  --text: #20223a;
  --purple: #7048d8;
  --pink: #d73196;
  --cyan: #087c83;
  --gold: #98620a;
  --red: #c43d4c;
}

body { background: #fff; color: var(--text); }
.skip-link { background: #087c83; color: #fff; }
.topbar { border-color: #e9eaf1; }
.brand-mark { background: linear-gradient(145deg, #f0eaff, #e8fbf8); box-shadow: 0 5px 18px rgba(100,75,190,.12); }
.brand-mark span { background: linear-gradient(130deg, #6246bc, #8050d8 65%, #087c83); -webkit-background-clip: text; background-clip: text; }
.brand-mark i { background: #10a39a; box-shadow: 0 0 8px rgba(16,163,154,.5); }
.brand-copy small { color: #70758a; }
.nav-link { color: #666c83; }
.nav-link:hover, .nav-link.active { color: #24243b; }
.nav-link::after { background: linear-gradient(90deg, #d73196, #7048d8); }
.connection-label { color: #747a90; }
.connection-dot { background: #bd7b13; box-shadow: 0 0 8px rgba(189,123,19,.25); }
.connection-dot.online { background: #0a9184; box-shadow: 0 0 8px rgba(10,145,132,.25); }
.connection-dot.offline { background: #c43d4c; box-shadow: 0 0 8px rgba(196,61,76,.2); }
.button-outline { background: #fff; border-color: #d9dbe7; color: #34364f; }
.button-outline:hover { border-color: #ac91ef; background: #f6f2ff; color: #5339a5; }
.button-quiet { background: #f7f7fa; color: #525870; border-color: #e4e5ec; }
.button-quiet:hover { background: #ededf4; color: #25273f; }
.icon-button { background: #fff; color: #626880; border-color: #e2e4ec; }
.icon-button:hover { color: #292b45; border-color: #c8cada; }
.notice-bar { border-color: #f0d9a6; background: #fff9e9; color: #72530e; }
.notice-icon { background: #fff0c6; color: #8f5d0a; }
.notice-bar.error { border-color: #f0cbd0; background: #fff4f5; color: #8f2e3a; }
.notice-bar.error .notice-icon { color: #a62f3e; background: #ffe2e5; }
.eyebrow { color: #70579f; }
.eyebrow .pulse-dot { background: #d73196; box-shadow: 0 0 8px rgba(215,49,150,.28); }
.hero-copy h1, .page-heading h1, .section-heading h2, .detail-title-row h1 { color: #202139; }
.hero-copy h1 em { background-image: linear-gradient(100deg, #7444d7, #c33ca8 58%, #078c87); }
.hero-lede { color: #5e647a; }
.proof-row { color: #32364e; }
.proof-row span { color: #747a90; }
.proof-icon { color: #087c83; background: #e9f8f7; border-color: #cbeae8; }
.hero-art::before { background: radial-gradient(ellipse, rgba(138,102,232,.12), rgba(70,184,181,.08) 45%, transparent 72%); }
.wheel-stage { filter: drop-shadow(0 26px 34px rgba(48,38,91,.2)); }
.wheel-hub-label { fill: #d0cee2; }
.wheel-labels { fill: #fff; stroke: rgba(24,20,46,.3); stroke-width: 1.4px; }
.wheel-labels .wheel-neutral { fill: #352707; stroke: rgba(255,255,255,.15); }
.wheel-pointer { filter: drop-shadow(0 4px 5px rgba(89,63,16,.3)); }
.filter-chip { color: #626981; border-color: #e3e5ed; background: #fff; }
.filter-chip:hover, .filter-chip.active { color: #5738a6; border-color: #c8b8f2; background: #f1edff; }
.results-count { color: #747a90; }
.raffle-card { border-color: #e5e6ee; background: linear-gradient(145deg, #fff, #fafaff); box-shadow: 0 7px 22px rgba(37,37,69,.045); }
.raffle-card:hover { border-color: #c9b8f3; box-shadow: 0 15px 32px rgba(57,45,107,.1); }
.raffle-card::after { background: rgba(126,86,255,.08); }
.raffle-prize-label { color: #737991; }
.raffle-card h3 { color: #252640; }
.raffle-group { color: #70768d; }
.raffle-stats { border-color: #ececf2; }
.raffle-stat span, .progress-wrap small { color: #727890; }
.raffle-stat strong { color: #30324b; }
.progress-track { background: #ececf4; }
.status-pill { color: #08796c; background: #e8f8f4; border-color: #c9ece3; }
.status-pill.status-drawing { color: #5c3ba9; background: #f1edff; border-color: #ddd1fa; }
.status-pill.status-complete { color: #80550b; background: #fff5da; border-color: #f1dfa9; }
.raffle-card-icon { color: #6a48bd; background: linear-gradient(145deg, #f0eaff, #ffedf7); border-color: #e7dafa; }
.empty-state, .error-state, .loading-card { border-color: #e0e2eb; background: #fbfbfe; color: #454a62; }
.empty-state p, .error-state p { color: #697087; }
.empty-icon { color: #684bb1; background: #f0ebff; }
.loader { border-color: #e4e5ee; border-top-color: #087c83; }
.trust-strip { border-color: #e6e7ef; background: #fafaff; }
.trust-strip strong { color: #30324a; }
.trust-strip small { color: #70768b; }
.trust-icon.turquoise { color: #087d78; background: #e8f8f5; }
.trust-icon.pink { color: #b62c7f; background: #fff0f7; }
.trust-icon.gold { color: #875b0c; background: #fff7e5; }
.site-footer { color: #626980; border-color: #e9eaf1; }
.site-footer p span { color: #71778d; }
.site-footer a { color: #5c4a98; }
.site-footer a:last-child:hover { color: #31244f; }
.page-heading p { color: #697087; }
.role-badge { color: #70449c; border-color: #e5d5f0; background: #f9f1ff; }
.back-link { color: #6551a4; }
.back-link:hover { color: #3e2b77; }
.detail-main, .detail-side, .panel, .leaderboard-panel { border-color: #e4e6ee; background: #fff; box-shadow: 0 8px 24px rgba(38,39,72,.045); }
.detail-subtitle, .detail-description, .detail-side > p { color: #626981; }
.metric-box { border-color: #e8e9f0; background: #fafaff; }
.metric-box small, .slot-heading span { color: #6f758b; }
.slot { color: #30334b; border-color: #e1e4ec; background: #fafbfe; }
.slot small { color: #6e748a; }
.slot.available { color: #096d70; border-color: #bfe6e1; background: #effaf8; }
.slot.available:hover { background: #e3f7f4; box-shadow: 0 0 0 1px rgba(8,124,131,.18); }
.slot.occupied { color: #74798e; border-color: #e6e7ee; background: #f6f7fa; }
.slot.mine { color: #5d3ba5; border-color: #cbb8f2; background: #f2edff; }
.slot.neutral { color: #815707; border-color: #e9d28e; background: #fff9e9; }
.slot.neutral small { color: #826a37; }
.draw-panel { border-color: #e3dbf7; background: linear-gradient(135deg, #f5f1ff, #effafa); }
.draw-panel p, .seat-select-note { color: #626a82; }
.draw-step { border-color: #e0e2ec; color: #687087; background: #f7f8fc; }
.draw-step.current { color: #fff; border-color: #d73196; background: #c73895; box-shadow: 0 4px 12px rgba(199,56,149,.18); }
.draw-step.eliminated { color: #858a9c; background: #f0f1f5; }
.winner-reveal { border-color: #edd58e; background: #fff9e8; }
.winner-reveal small { color: #805b10; }
.winner-reveal strong { color: #352b15; }
.history-row { border-color: #e4e6ee; background: #fff; box-shadow: 0 5px 16px rgba(38,39,72,.035); }
.history-row p, .history-meta small { color: #6d7389; }
.leaderboard-head { color: #6d7389; }
.leader-row { color: #33354e; border-color: #ececf2; }
.leader-position { color: #5c43a2; }
.avatar { color: #5c43a2; border-color: #dfd3fb; background: #f2edff; }
.leader-points { color: #805b10; }
.leader-plays { color: #6e7489; }
.winner-prize { color: #41445b; }
.winner-prize small, .winner-date { color: #6f758a; }
.profile-card, .admin-stat, .admin-section { border-color: #e4e6ee; background: #fff; box-shadow: 0 6px 20px rgba(38,39,72,.035); }
.profile-user { border-color: #e8e9f0; }
.profile-user p, .profile-data span { color: #6d7388; }
.profile-avatar { color: #5b438f; }
.summary-tile { background: #fafaff; }
.summary-tile small, .admin-stat small { color: #6c7288; }
.summary-tile strong { color: #6544c1; }
.admin-section h2 { color: #282a43; }
.admin-table th { color: #697087; }
.admin-table td { color: #3f435a; }
.admin-table td, .admin-table th { border-color: #ececf2; }
.admin-tabs button { color: #61677f; }
.admin-tabs button.active { color: #5737a5; border-color: #d3c4f5; background: #f3efff; }
.balance-strip { border-color: #cfe8e5; background: #f1faf8; }
.balance-strip small, .balance-strip strong span { color: #66788a; }
.my-slot-note { border-color: #cce9e5; color: #496e70; background: #f1faf8; }
.my-slot-note strong { color: #087c83; }
.playback-controls > span { color: #6e748a; }
.sound-toggle { color: #594894; border-color: #dfdced; background: #faf9ff; }
.sound-toggle[aria-pressed="true"] { color: #076b68; border-color: #b9e5df; background: #eefaf7; }
.modal { color: #272942; border-color: #e0e1ea; background: #fff; box-shadow: 0 24px 80px rgba(31,31,60,.22); }
.modal::backdrop { background: rgba(35,35,57,.32); backdrop-filter: blur(5px); }
.modal-head p { color: #697087; }
.modal-dismiss button { color: #5e647a; }
.auth-tabs { background: #f1f2f7; }
.auth-tabs button { color: #636981; }
.auth-tabs button.active { color: #5737a5; background: #fff; box-shadow: 0 1px 4px rgba(44,40,76,.1); }
.form-field { color: #41455d; }
.form-field input, .phone-input, .admin-search input { color: #24263f; border-color: #dfe1ea; background: #fff; }
.form-field input::placeholder { color: #9297a8; }
.form-field input:focus, .phone-input:focus-within, .admin-search input:focus { border-color: #8968dc; box-shadow: 0 0 0 3px rgba(112,72,216,.1); }
.form-field > small, .fine-print, .admin-private-note, .table-subline { color: #6d7389; }
.form-error { color: #982f3a; background: #fff0f1; }
.yape-instructions { border-color: #f0d5e5; background: #fff5fa; color: #4d4050; }
.yape-instructions small { color: #716578; }
.otp-status { color: #687087; }
.otp-status.success { color: #08756a; }
.game-account-box { border-color: #e3d9f5; background: #f8f5ff; }
.game-account-box > p, .payment-mini p { color: #646b81; }
.state-pending { color: #79540b; border-color: #eddda9; background: #fff8e4; }
.attestation { color: #4e536a; }
.payment-mini { border-color: #f0d6e4; background: #fff7fb; }
.privacy-note, .account-disclaimer { color: #636981; background: #f5f6fa; }
.money-disabled { border-color: #eedca9; color: #755411; background: #fff9e9; }
.winner-hidden { color: #5d6179 !important; background: #f4f1fc; }
.verify-card { border-color: #e4e6ee; background: #fff; box-shadow: 0 10px 30px rgba(38,39,72,.06); }
.verify-card p { color: #626981; }
.verify-mark { color: #087c83; background: #eaf8f6; border-color: #c7e9e5; }
.toast { border-color: #c7e6e0; background: #fff; color: #245851; box-shadow: 0 12px 36px rgba(37,44,67,.16); }
.toast.error { border-color: #f0cbd0; color: #8e303b; }
.account-chip { border-color: #e1e3ec; background: #f8f8fc; }
.account-chip strong { color: #34364f; }
.phone-input > span { border-color: #e1e3ec; color: #4f556c; }
.admin-private-note { color: #6d7389; }
.participant-detail { border-color: #e3e5ed; background: #f8f9fc; }
.admin-search input { outline: none; }
.mobile-nav { border-color: #e5e6ed; background: rgba(255,255,255,.95); box-shadow: 0 -8px 26px rgba(33,34,61,.08); }
.mobile-nav-item { color: #666c83; }
.mobile-nav-item.active { color: #6848bc; }
.mobile-nav-item.active span { color: #087c83; }