/* Nightwave Raffle v2 — Safe Zone look (v1.0)
   Loaded after raffle.css. Scoped to body.rv2 so the confetti canvas
   and lightning/rain overlays keep their own positioning. */

/* ── Tokens ─────────────────────────────────────────────────────────── */
html body.rv2{
  --bg:#0f0b09;--panel:rgba(26,19,15,.9);--panel2:#211710;--line:rgba(240,214,186,.12);--line2:rgba(240,214,186,.22);
  --text:#f3ebe2;--muted:#a69585;--faint:#7d6f62;--accent:#f2a33a;--red:#e0402f;--gold:#f6c453;
  --ok:#3dd68c;--warn:#f5a524;--bad:#ef5b61;--r:10px;
  --oswald:"Oswald","Arial Narrow",Impact,system-ui,sans-serif;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif!important;
  background:var(--bg)!important;color:var(--text)!important}
html body.rv2 *{letter-spacing:normal}

/* ── Google Fonts already loaded via HTML link (added below) ─────────── */

/* ── Background: Safe Zone compound artwork ──────────────────────────── */
html body.rv2 #bg-image{
  background-image:url('/assets/safe-zone-compound.webp')!important;
  background-size:cover!important;background-position:center top!important}
html body.rv2 #bg-overlay{
  background:linear-gradient(180deg,rgba(12,9,7,.5) 0,rgba(12,9,7,.82) 340px,rgba(10,8,6,.97) 100%)!important}

/* ── Nav ─────────────────────────────────────────────────────────────── */
html body.rv2 .site-nav{
  max-width:1200px!important;padding:10px clamp(14px,3vw,44px)!important;
  position:sticky!important;top:0!important;z-index:60!important;
  background:rgba(14,10,8,.84)!important;backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)!important;box-shadow:none!important;
  border-radius:0!important;margin:0!important}
html body.rv2 .nav-brand-text{color:var(--text)!important;font:700 20px/1 var(--oswald)!important;letter-spacing:.08em!important;background:none!important}
html body.rv2 .nav-brand-text::before{display:none!important}
html body.rv2 .nav-links a{color:var(--muted)!important;font:600 13px/1 var(--oswald)!important;letter-spacing:.06em!important;text-transform:uppercase;padding:9px 12px!important;border-radius:6px!important;background:none!important;border:0!important;box-shadow:none!important;text-shadow:none!important;transform:none!important}
html body.rv2 .nav-links a:hover{color:var(--text)!important;box-shadow:none!important;transform:none!important}
html body.rv2 .nav-links a.active{color:var(--text)!important;box-shadow:inset 0 -2px 0 var(--accent)!important;background:none!important}

/* ── Page header ─────────────────────────────────────────────────────── */
html body.rv2 header{
  max-width:1200px!important;margin:0 auto!important;padding:32px clamp(14px,3vw,44px) 0!important;
  display:block!important;text-align:left!important}
html body.rv2 .logo{
  font:700 clamp(30px,5vw,52px)/1.05 var(--oswald)!important;letter-spacing:.01em!important;
  text-transform:uppercase!important;text-shadow:none!important;background:none!important}
html body.rv2 .sparkle-text{
  background:none!important;color:var(--red)!important;-webkit-background-clip:initial!important;
  background-clip:initial!important;animation:none!important;filter:none!important}
html body.rv2 #header-middle-text{color:var(--text)!important}
html body.rv2 .site-tag{color:var(--accent)!important;background:none!important}

/* ── Main content shell ──────────────────────────────────────────────── */
html body.rv2{padding:0!important;margin:0!important;overflow-x:hidden}
html body.rv2 .raffle-main{
  max-width:1200px!important;margin:0 auto!important;
  padding:24px clamp(14px,3vw,44px) 100px!important}

/* ── Status bar: clean inline pill + meta ────────────────────────────── */
html body.rv2 .raffle-status-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;
  margin:16px 0 22px!important;padding:0!important;
  background:none!important;border:0!important;border-radius:0!important}
html body.rv2 .raffle-status-pill{
  display:inline-flex;align-items:center;gap:8px;padding:6px 14px!important;
  border-radius:99px!important;border:1px solid var(--line2)!important;
  background:rgba(0,0,0,.4)!important;font:600 12px/1 var(--oswald)!important;
  letter-spacing:.1em!important;box-shadow:none!important}
html body.rv2 .raffle-status-dot{
  width:7px!important;height:7px!important;border-radius:50%!important;
  border:0!important;background:var(--bad)!important;margin:0!important;
  animation:none!important;flex:none!important}
html body.rv2 .raffle-status-pill.live .raffle-status-dot{background:var(--ok)!important;animation:rv2PingOk 1.8s infinite!important}
@keyframes rv2PingOk{70%{box-shadow:0 0 0 9px rgba(61,214,140,0)}0%{box-shadow:0 0 0 0 rgba(61,214,140,.55)}100%{box-shadow:0 0 0 0 rgba(61,214,140,0)}}
html body.rv2 .raffle-status-pill.live{color:var(--ok)!important;border-color:rgba(61,214,140,.45)!important}
html body.rv2 .raffle-status-pill.offline{color:var(--muted)!important}
html body.rv2 #raffle-status-label{font:inherit!important;color:inherit!important;background:none!important}
html body.rv2 .raffle-meta{
  display:flex!important;flex-wrap:wrap;gap:4px 20px;
  font:500 13px/1.5 system-ui!important;color:var(--muted)!important}
html body.rv2 .raffle-meta span{white-space:nowrap}
html body.rv2 .raffle-meta b{color:var(--text)!important;font-weight:600!important}

/* ── Offline message ─────────────────────────────────────────────────── */
html body.rv2 .raffle-offline-msg{
  max-width:560px;margin:40px auto!important;padding:32px 36px!important;
  border-radius:var(--r)!important;background:var(--panel)!important;
  border:1px solid var(--line)!important;text-align:center;
  font:400 15px/1.6 system-ui!important;color:var(--muted)!important;
  box-shadow:none!important}

/* ── Main raffle layout: wheel left, sidebar right ───────────────────── */
html body.rv2 .raffle-layout{
  display:grid!important;grid-template-columns:minmax(0,1fr) 360px;
  gap:28px;align-items:start!important;padding:0!important;margin:0!important}

/* ── Wheel wrap ──────────────────────────────────────────────────────── */
html body.rv2 .wheel-wrap{
  display:flex!important;flex-direction:column;align-items:center;gap:0;
  padding:28px!important;border-radius:var(--r)!important;
  background:var(--panel)!important;border:1px solid var(--line)!important;
  position:relative;min-width:0}
html body.rv2 .wheel-pointer{
  width:0!important;height:0!important;
  border-left:14px solid transparent!important;border-right:14px solid transparent!important;
  border-top:28px solid var(--accent)!important;
  filter:drop-shadow(0 4px 8px rgba(242,163,58,.6))!important;
  margin:0 auto 8px!important;flex:none;position:relative;z-index:10}
html body.rv2 .wheel-svg-wrap{position:relative;width:100%;max-width:440px;aspect-ratio:1}
html body.rv2 #wheel-mount{width:100%;height:100%}
html body.rv2 #wheel-svg{display:block;width:100%;height:100%;filter:drop-shadow(0 12px 32px rgba(0,0,0,.6))!important}
html body.rv2 .wheel-hub{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)!important;
  width:36px!important;height:36px!important;border-radius:50%!important;
  background:radial-gradient(circle,#f6c453 0,#c4820a 60%)!important;
  border:4px solid rgba(0,0,0,.5)!important;box-shadow:0 0 16px rgba(246,196,83,.6)!important;
  z-index:10!important}

/* ── Wheel slice colors: warm earthy tones matching the Safe Zone ─────── */
/* Applied via JS WHEEL_COLORS — patch those in giveaway-v2.js */

/* ── Raffle sidebar ──────────────────────────────────────────────────── */
html body.rv2 .raffle-side{
  padding:22px 24px!important;border-radius:var(--r)!important;
  background:var(--panel)!important;border:1px solid var(--line)!important;
  min-width:0}
html body.rv2 .raffle-side>h3{
  margin:0 0 14px!important;font:600 14px/1 var(--oswald)!important;
  letter-spacing:.14em!important;text-transform:uppercase!important;
  color:var(--faint)!important;padding-bottom:12px;border-bottom:1px solid var(--line)!important}

/* Entrant rows */
html body.rv2 #entrant-list{
  display:flex;flex-direction:column;gap:0;max-height:calc(100vh - 280px);overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:rgba(242,163,58,.35) transparent}
html body.rv2 .entrant-row{
  display:grid!important;grid-template-columns:26px 36px minmax(0,1fr) 44px;
  gap:10px;align-items:center;padding:10px 0!important;
  border-bottom:1px solid var(--line)!important;margin:0!important}
html body.rv2 .entrant-row:last-child{border-bottom:0!important}
html body.rv2 .entrant-rank{
  font:700 12px/1 var(--oswald)!important;color:var(--faint)!important;
  text-align:center;letter-spacing:.04em!important}
html body.rv2 .entrant-avatar{
  width:36px!important;height:36px!important;border-radius:8px!important;
  object-fit:cover;background:#2a1f18!important;border:0!important;box-shadow:none!important;flex:none}
html body.rv2 .entrant-info{min-width:0}
html body.rv2 .entrant-name{
  font:600 14px/1.2 system-ui!important;color:var(--text)!important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body.rv2 .entrant-wagered{
  font:400 12px/1.2 system-ui!important;color:var(--faint)!important;margin-top:3px!important}
html body.rv2 .entrant-odds{
  font:600 13px/1 var(--oswald)!important;color:var(--accent)!important;
  text-align:right!important;letter-spacing:.02em!important}
html body.rv2 .raffle-empty{
  padding:32px 16px!important;text-align:center;
  font:400 14px/1.5 system-ui!important;color:var(--faint)!important;
  border:1px dashed var(--line2)!important;border-radius:8px!important;margin:4px 0!important}

/* ── Mini-podium: keep it but integrate it with the main cards ────────── */
html body.rv2 #mini-podium{
  padding:18px 0 12px!important;margin-bottom:12px!important;
  border-bottom:1px solid var(--line)!important;background:none!important;
  border-radius:0!important;box-shadow:none!important;
  display:flex!important;align-items:center;gap:12px}
html body.rv2 .mini-podium-sparkles{display:none!important}
html body.rv2 .mini-podium-avatar{
  width:42px!important;height:42px!important;border-radius:10px!important;
  object-fit:cover;flex:none;background:#2a1f18!important;
  border:2px solid var(--accent)!important;box-shadow:none!important}
html body.rv2 .mini-podium-label{
  font:600 10px/1 system-ui!important;letter-spacing:.08em!important;
  text-transform:uppercase;color:var(--accent)!important;margin-bottom:5px!important}
html body.rv2 .mini-podium-name{
  font:600 15px/1.2 system-ui!important;color:var(--text)!important}
html body.rv2 .mini-podium-amount{
  font:400 12.5px/1.2 system-ui!important;color:var(--muted)!important;margin-top:2px!important}

/* ── Winner banner ───────────────────────────────────────────────────── */
html body.rv2 .winner-banner{
  display:flex!important;align-items:center;gap:20px;
  padding:18px 24px!important;border-radius:var(--r)!important;
  background:linear-gradient(90deg,rgba(246,196,83,.12),rgba(242,163,58,.06))!important;
  border:1px solid rgba(246,196,83,.4)!important;
  margin:0 0 20px!important;max-width:none!important;
  position:static!important;animation:none!important;opacity:0;height:0;overflow:hidden;
  box-shadow:0 0 40px rgba(246,196,83,.1)!important;
  transition:opacity .4s ease,height .4s ease,margin .4s ease,padding .4s ease}
html body.rv2 .winner-banner.show{
  opacity:1!important;height:auto;overflow:visible;
  padding:18px 24px!important;margin:0 0 20px!important}
html body.rv2 #winner-avatar{
  width:52px!important;height:52px!important;border-radius:10px!important;
  object-fit:cover;flex:none;background:#2a1f18;border:2px solid var(--gold)!important;box-shadow:none!important}
html body.rv2 .winner-label{
  font:600 11px/1 system-ui!important;letter-spacing:.1em!important;
  text-transform:uppercase;color:var(--accent)!important;margin-bottom:6px!important}
html body.rv2 #winner-name{
  font:700 20px/1.15 var(--oswald)!important;color:var(--gold)!important;letter-spacing:.03em!important}
html body.rv2 #winner-wagered{
  font:400 13px/1.3 system-ui!important;color:var(--muted)!important;margin-top:4px!important}

/* ── Winner modal ────────────────────────────────────────────────────── */
html body.rv2 .winner-modal-backdrop{
  background:rgba(8,6,4,.88)!important;backdrop-filter:blur(10px);z-index:100!important}
html body.rv2 .winner-modal{
  background:linear-gradient(180deg,#211710,#150e09)!important;
  border:1px solid rgba(242,163,58,.5)!important;
  border-radius:16px!important;padding:36px 32px 28px!important;
  box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 60px rgba(242,163,58,.12)!important;
  text-align:center!important;max-width:460px!important;width:92vw!important}
html body.rv2 .winner-modal-close{
  background:rgba(255,255,255,.06)!important;border:1px solid var(--line2)!important;
  color:var(--muted)!important;border-radius:8px!important;
  width:32px!important;height:32px!important;font-size:14px!important;
  cursor:pointer;float:right;margin:-8px -8px 12px 0!important}
html body.rv2 .winner-modal-close:hover{color:var(--text)!important;background:rgba(255,255,255,.1)!important}
html body.rv2 .winner-modal-starburst{
  width:90px!important;height:90px!important;opacity:.9!important;
  filter:drop-shadow(0 0 20px rgba(246,196,83,.5))!important;margin:0 auto 10px!important;display:block!important}
html body.rv2 .winner-modal-avatar-wrap{margin:0 auto 12px!important;width:fit-content}
html body.rv2 .winner-modal-avatar{
  width:88px!important;height:88px!important;border-radius:14px!important;
  object-fit:cover;display:block;border:3px solid var(--accent)!important;box-shadow:0 0 30px rgba(242,163,58,.3)!important}
html body.rv2 .winner-modal-name{
  font:700 32px/1.1 var(--oswald)!important;color:var(--gold)!important;
  margin:0 0 10px!important;letter-spacing:.02em!important}
html body.rv2 .winner-modal-prize{
  font:600 17px/1.4 system-ui!important;color:var(--accent)!important;margin:0 0 8px!important}
html body.rv2 .winner-modal-prize img{width:36px;height:36px;object-fit:contain;vertical-align:middle;margin-right:8px;display:inline}
html body.rv2 .winner-modal-wagered{
  font:400 13px/1.4 system-ui!important;color:var(--muted)!important;margin:0!important}
html body.rv2 .winner-modal-backdrop.show{display:grid!important;place-items:center}

/* ── Maintenance overlay ──────────────────────────────────────────────── */
html body.rv2 .maintenance-overlay{
  background:rgba(8,6,4,.92)!important;backdrop-filter:blur(8px);z-index:80!important;
  display:none;place-items:center;text-align:center}
html body.rv2 .maintenance-overlay.show{display:grid!important}
html body.rv2 .maintenance-overlay h2{font:700 32px/1.1 var(--oswald)!important;color:var(--text)!important;letter-spacing:.04em!important}
html body.rv2 .maintenance-overlay p{color:var(--muted)!important;font:400 15px/1.55 system-ui!important}
html body.rv2 .maintenance-home-btn{
  display:inline-block;padding:12px 28px;margin-top:18px;border-radius:9px;
  background:linear-gradient(180deg,#f6b24c,#d9731f)!important;
  color:#1c1209!important;font:700 15px/1 var(--oswald)!important;
  letter-spacing:.06em!important;text-decoration:none;box-shadow:0 8px 24px rgba(217,115,31,.3)!important}

/* ── Site footer ─────────────────────────────────────────────────────── */
html body.rv2 .site-footer{display:none!important}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width:1040px){
  html body.rv2 .raffle-layout{grid-template-columns:1fr;gap:20px!important}}
@media (max-width:700px){
  html body.rv2 .wheel-wrap{padding:18px!important}
  html body.rv2 .raffle-side{padding:16px!important}
  html body.rv2 .raffle-main{padding:16px 12px 80px!important}
  html body.rv2 .raffle-meta{gap:4px 12px}
  html body.rv2 .winner-banner{flex-direction:column;align-items:flex-start;gap:12px;padding:14px 16px!important}
  html body.rv2 #entrant-list{max-height:320px}
}
@media (prefers-reduced-motion:reduce){
  html body.rv2 .raffle-status-dot{animation:none!important}
  html body.rv2 .winner-banner{transition:none!important}
}
html body.rv2 :focus-visible{outline:2px solid var(--accent)!important;outline-offset:2px}

/* ── Layout polish ────────────────────────────────────────────────────── */
/* Status bar: left-aligned, part of the flow */
html body.rv2 .raffle-status-bar{justify-content:flex-start!important;text-align:left!important}
html body.rv2 .raffle-meta{justify-content:flex-start!important}

/* Hero banner: shows the Safe Zone artwork behind the title */
html body.rv2 header{
  padding:0!important;margin:0!important;
  display:grid!important;
  grid-template-rows:auto auto auto;
  background:linear-gradient(90deg,rgba(15,11,9,.96) 0,rgba(15,11,9,.75) 60%,rgba(15,11,9,.9) 100%),
    url('/assets/safe-zone-compound.webp') center 30%/cover!important;
  border-bottom:2px solid rgba(224,64,47,.55)!important}
html body.rv2 header>.logo{
  max-width:1200px;width:100%;margin:0 auto;
  padding:28px clamp(14px,3vw,44px) 20px!important;
  box-sizing:border-box}
/* Move status bar and mini-podium inside the page — after the header */
html body.rv2 .raffle-main{padding-top:16px!important}

/* Mini-podium: show only when raffle is live (layout visible) */
html body.rv2 #mini-podium{
  background:var(--panel)!important;border:1px solid var(--line)!important;
  border-radius:var(--r)!important;padding:14px 18px!important;
  margin:0 0 18px!important;display:flex!important;align-items:center;gap:14px}
html body.rv2 #mini-podium[hidden]{display:none!important}

/* Winner banner: add prize line */
html body.rv2 .winner-banner .winner-label{font-size:10px!important}
html body.rv2 .winner-banner .winner-info-wrap{flex:1;min-width:0}
html body.rv2 #winner-prize-inline{
  font:600 13px/1.3 system-ui!important;color:var(--accent)!important;margin-top:5px!important;display:block}

/* Wheel: fill its container fully on desktop */
html body.rv2 .wheel-wrap{align-items:center!important;gap:6px!important}
html body.rv2 .wheel-svg-wrap{width:min(100%,480px)!important;max-width:480px!important}

/* Offline message: hide when mini-podium would float alone */
html body.rv2 #mini-podium.rv2-hide-offline{display:none!important}

/* ── Final polish ─────────────────────────────────────────────────────── */
/* Kill the old podium/ui glow ring on the empty wheel circle */
html body.rv2 #wheel-svg circle[fill="#2b2d31"]{stroke:rgba(242,163,58,.25)!important;stroke-width:2px}
/* Empty wheel: dashed amber ring instead of glowing orange */
html body.rv2 .wheel-svg-wrap{border-radius:50%;overflow:hidden}
/* Winner banner: tighter layout, prize on its own line */
html body.rv2 .winner-banner{flex-wrap:wrap}
html body.rv2 .winner-banner>div{min-width:0;flex:1}
html body.rv2 #winner-prize-inline{display:block;margin-top:4px!important;font:500 13px/1.3 system-ui!important;color:var(--accent)!important}
/* Mini-podium card: slightly wider to balance with the layout */
html body.rv2 #mini-podium{max-width:none!important;width:100%;box-sizing:border-box}
/* Wheel pointer: a bit bolder */
html body.rv2 .wheel-pointer{
  width:0!important;height:0!important;z-index:10;
  border-left:16px solid transparent!important;
  border-right:16px solid transparent!important;
  border-top:32px solid var(--gold)!important;
  filter:drop-shadow(0 4px 10px rgba(246,196,83,.7))!important;
  margin-bottom:6px!important}


/* ---- fixes: full-width bands, hidden states, ended state ---- */
html body.rv2 .site-nav{max-width:none!important;width:100%!important;box-sizing:border-box!important;
  padding-left:max(clamp(14px,3vw,44px),calc((100% - 1200px)/2 + 44px))!important;
  padding-right:max(clamp(14px,3vw,44px),calc((100% - 1200px)/2 + 44px))!important}
html body.rv2 header{max-width:none!important;width:100%!important;box-sizing:border-box!important}
html body.rv2 .raffle-layout[hidden]{display:none!important}
html body.rv2 .winner-banner:not(.show){display:none!important}
html body.rv2 .raffle-offline-msg[hidden]{display:none!important}
html body.rv2 #mini-podium[hidden]{display:none!important}
html body.rv2 #mini-podium{width:fit-content!important;min-width:min(100%,340px);max-width:100%!important;padding-right:32px!important}

/* ---------- Loading shimmer (entrant list + wheel) ---------- */
@keyframes rvShimmer{to{background-position:-220% 0}}
html body.rv2 .entrant-row.is-skel{pointer-events:none}
html body.rv2 .entrant-row.is-skel>*{display:block;border-radius:8px;background:linear-gradient(110deg,rgba(255,255,255,.05) 30%,rgba(255,255,255,.14) 50%,rgba(255,255,255,.05) 70%);background-size:220% 100%;animation:rvShimmer 1.3s linear infinite}
html body.rv2 .entrant-row.is-skel span{height:12px;width:20px;justify-self:center}
html body.rv2 .entrant-row.is-skel i{width:36px;height:36px}
html body.rv2 .entrant-row.is-skel div{background:none;animation:none;display:grid;gap:7px}
html body.rv2 .entrant-row.is-skel div b{display:block;height:11px;width:80%;border-radius:6px;background:inherit;background:linear-gradient(110deg,rgba(255,255,255,.05) 30%,rgba(255,255,255,.14) 50%,rgba(255,255,255,.05) 70%);background-size:220% 100%;animation:rvShimmer 1.3s linear infinite}
html body.rv2 .entrant-row.is-skel div b+b{width:55%;height:9px}
html body.rv2 .entrant-row.is-skel u{height:12px;width:34px;justify-self:end}
html body.rv2 #wheel-mount:empty:before{content:"";display:block;width:100%;aspect-ratio:1;border-radius:50%;background:linear-gradient(110deg,rgba(255,255,255,.04) 30%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.04) 70%);background-size:220% 100%;animation:rvShimmer 1.3s linear infinite}
@media (prefers-reduced-motion:reduce){html body.rv2 .entrant-row.is-skel>*,html body.rv2 #wheel-mount:empty:before{animation:none}}