/* PokeBALL — Cinematic / 3D-first design layer
   One accent (crimson). Gold reserved for win moments only.
   Scene is the hero; UI is minimal frosted-glass HUD. */

:root{
  --line: rgba(255,255,255,.08);
  --line-soft: rgba(255,255,255,.05);
  --bg: #050507;
  --crimson: #ff2f43;
  --gold: #ffcf5c;
  --mute: #8b8f99;
}

html, body{
  scroll-behavior:smooth;
  overflow-x:hidden;
  max-width:100%;
}
body{ background:var(--bg); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#1b1c22; border-radius:999px; border:2px solid var(--bg); }
::-webkit-scrollbar-track{ background:transparent; }

/* ---------- glass system ---------- */
.glass{
  background: rgba(18,19,24,.55);
  border: 1px solid var(--line);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}
.glass-panel{
  position:relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 30%),
    rgba(12,13,17,.6);
  border:1px solid var(--line);
  border-radius:18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* header scrolled state */
#head.scrolled{ background:rgba(5,5,7,.7); backdrop-filter:blur(16px); }

/* ---------- nav pill ---------- */
.nav-pill{
  position:relative; align-items:center; gap:2px; padding:5px;
  border-radius:999px; border:1px solid var(--line);
  background:rgba(14,15,19,.55); backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.nav-item{
  position:relative; z-index:2; padding:7px 16px; border-radius:999px;
  font-size:13px; font-weight:500; color:#9a9ea8; transition:color .25s;
}
.nav-item:hover{ color:#fff; }
.nav-item.active{ color:#fff; }
.nav-ink{
  position:absolute; z-index:1; top:5px; bottom:5px; left:5px; width:0;
  border-radius:999px; background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:transform .35s cubic-bezier(.4,.8,.3,1), width .35s cubic-bezier(.4,.8,.3,1), opacity .25s;
  opacity:0;
}
@media (max-width: 768px) {
  .nav-pill {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255,255,255,0.05);
    background: rgba(10, 11, 16, 0.85);
    width: max-content;
    max-width: 95vw;
    gap: 1px;
    padding: 4px;
  }
  .nav-item {
    padding: 5px 9px;
    font-size: 11px;
  }
}

/* ---------- drop queue (vertical) ---------- */
.qcard{
  position:relative; display:flex; align-items:center; gap:13px;
  padding:10px; border-radius:15px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0)),rgba(12,13,17,.55);
  border:1px solid var(--line); backdrop-filter:blur(10px);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s, opacity .35s;
}
.qcard:hover{ transform:translateX(-8px) scale(1.03); border-color:rgba(255,255,255,.2); box-shadow:0 16px 44px -18px rgba(0,0,0,.8); }
/* topmost card reads larger / closer to the ball */
#vault-queue .qcard:first-child{ transform:translateX(-10px) scale(1.06); }
#vault-queue .qcard:first-child:hover{ transform:translateX(-14px) scale(1.09); }
.qcard .qthumb{ width:54px; height:68px; border-radius:9px; overflow:hidden; background:#0a0b10; border:1px solid var(--line-soft); flex:0 0 auto; position:relative; }
.qcard .qthumb img{ width:100%; height:100%; object-fit:cover; }
.qcard .qmeta{ min-width:0; flex:1; }
.qcard .qmeta h6{ font-weight:600; font-size:14.5px; line-height:1.2; }
.qcard .qmeta p{ font-size:11px; color:var(--mute); font-family:'JetBrains Mono',monospace; margin-top:3px; }
.qcard .qnum{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--mute); padding-right:4px; }
.qcard .qnext{ font:600 8px/1 'JetBrains Mono',monospace; letter-spacing:.18em; color:#fff; background:var(--crimson); padding:4px 6px; border-radius:5px; box-shadow:0 0 14px -3px var(--crimson); }
.qcard.is-next{ border-color:var(--crimson); box-shadow:0 0 0 1px var(--crimson),0 12px 36px -16px rgba(255,47,67,.6); }
.qcard.is-next .qthumb::after{ content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.25) 50%,transparent 60%); animation:foil 2.6s linear infinite; }
@keyframes foil{ 0%{transform:translateX(-120%);} 100%{transform:translateX(120%);} }
/* gradient mask: queue fades downward (importance top-to-bottom) */
#vault-queue .qcard:nth-child(n+4){ opacity:.6; }
#vault-queue .qcard:nth-child(n+5){ opacity:.4; }
#recent-draws .qcard:nth-child(n+4){ opacity:.6; }
#recent-draws .qcard:nth-child(n+5){ opacity:.4; }

/* ---------- recent draws (left) ---------- */
/* clickable wallet address → Solscan */
.waddr{ color:inherit; text-decoration:none; border-bottom:1px dotted rgba(255,255,255,.25); transition:color .2s, border-color .2s; cursor:pointer; }
.waddr:hover{ color:var(--crimson); border-bottom-color:var(--crimson); }

/* truncating title — single line, right-edge fade, scrolls on hover (JS) */
.ttl{ display:block; max-width:100%; overflow:hidden; white-space:nowrap;
  -webkit-mask:linear-gradient(90deg,#000 86%,transparent 100%);
          mask:linear-gradient(90deg,#000 86%,transparent 100%); }
.ttl-i{ display:inline-block; will-change:transform; }
/* cards carrying a scrolling title hint interactivity */
.qcard, .nft-card, .history-item{ cursor:pointer; }

/* NFT image load failure → neutral placeholder */
.img-fail{ width:100%; height:100%; min-height:48px; background:
  radial-gradient(120% 120% at 30% 20%, rgba(255,47,67,.18), transparent 60%),
  linear-gradient(135deg,#15161c,#0a0b10); display:block; }
img.img-fail{ object-fit:cover; }
/* pending (prize not yet transferred) */
.txlink.is-pending{ color:#8a8e98; border-style:dashed; cursor:default; }
.txlink.is-pending:hover{ color:#8a8e98; border-color:var(--line); background:rgba(255,255,255,.03); }

.dcard .qago{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--mute); padding-right:2px; white-space:nowrap; }
.dcard .qmeta p{ color:#cfd2d9; }
/* latest winner = gold accent */
#recent-draws .qcard.is-latest{ border-color:rgba(255,207,92,.55); box-shadow:0 0 0 1px rgba(255,207,92,.4),0 12px 36px -16px rgba(255,207,92,.45); transform:translateX(10px) scale(1.06); }
#recent-draws .qcard.is-latest:hover{ transform:translateX(14px) scale(1.09); }
#recent-draws .qcard.is-latest .qthumb::after{ content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 40%,rgba(255,207,92,.3) 50%,transparent 60%); animation:foil 2.6s linear infinite; }
#recent-draws .qcard.is-latest .qago{ color:var(--gold); }
/* mirror the queue hover direction (cards live on the left of the ball) */
#recent-draws .qcard{ transform:translateX(8px); }
#recent-draws .qcard:hover{ transform:translateX(12px) scale(1.03); }
.dcard .qmeta h6{ font-size:13.5px; }
.dcard .dwallet{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.dcard .dshare{ font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--gold); background:rgba(255,207,92,.1); border:1px solid rgba(255,207,92,.25); padding:1px 5px; border-radius:5px; }
.dcard .dmeta{ display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex:0 0 auto; }
.dcard .txlink{ display:inline-flex; align-items:center; gap:3px; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.06em; color:#9a9ea8; padding:3px 7px; border-radius:6px; border:1px solid var(--line); background:rgba(255,255,255,.03); transition:color .2s, border-color .2s, background .2s; }
.dcard .txlink:hover{ color:#fff; border-color:rgba(255,255,255,.25); background:rgba(255,255,255,.08); }
.dcard .txlink i, .dcard .txlink svg{ width:11px; height:11px; }
/* newest card animates in from the top */
#recent-draws .qcard.enter{ animation: drawIn .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes drawIn{ 0%{ opacity:0; transform:translateY(-16px) translateX(8px) scale(.9); } 100%{ opacity:1; transform:translateX(10px) scale(1.06); } }

/* ---------- draw reel (slot machine) ---------- */
.reel{
  position:relative; width:min(92vw,520px); height:192px; margin-inline:auto;
  border-radius:14px; overflow:hidden;
  background:rgba(10,11,16,.6); border:1px solid var(--line);
  box-shadow:inset 0 0 40px rgba(0,0,0,.6), 0 0 50px -10px rgba(255,47,67,.3);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
}
.reel::before{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); border-radius:inherit; }
.reel-inner{ position:absolute; inset:0; will-change:transform; }
.reel-row{ height:64px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:0 clamp(20px,6vw,42px); font-family:'JetBrains Mono',monospace; }
.reel-row .rw-wallet{ font-size:19px; letter-spacing:.04em; color:#cfd2d9; }
.reel-row .rw-share{ font-size:14px; color:var(--mute); }
.reel-row.win .rw-wallet{ color:#fff; }
.reel-row.win .rw-share{ color:var(--gold); }
.reel.locked{ border-color:var(--gold); box-shadow:inset 0 0 30px rgba(255,207,92,.12), 0 0 60px -8px rgba(255,207,92,.5); }
.reel.locked .reel-row.win{ color:var(--gold); text-shadow:0 0 24px rgba(255,207,92,.6); }
/* center indicator line */
.reel-mark{ position:absolute; z-index:3; left:0; right:0; top:50%; height:64px; transform:translateY(-50%); border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); pointer-events:none; }

.winner-tag{
  display:inline-flex; align-items:center; gap:.5em; margin-top:4px; opacity:0; transform:translateY(8px);
  font:600 10px/1 'JetBrains Mono',monospace; letter-spacing:.25em;
  color:var(--gold); border:1px solid rgba(255,207,92,.35);
  padding:7px 12px; border-radius:999px; background:rgba(255,207,92,.06);
}
.winner-tag::before{ content:""; width:6px; height:6px; border-radius:999px; background:var(--gold); box-shadow:0 0 10px var(--gold); }

/* ---------- winner result panel ---------- */
.wbox{ width:min(92vw,540px); padding:8px; }
.wresult{
  margin-top:24px; display:flex; flex-direction:column; align-items:center; gap:11px;
  opacity:0; transform:translateY(18px) scale(.96); pointer-events:none;
  transition:opacity .55s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}
.wresult.show{ opacity:1; transform:none; }
.wprize-art{
  width:172px; aspect-ratio:3/4; border-radius:15px; overflow:hidden; position:relative;
  background:#0a0b10; border:1px solid rgba(255,207,92,.5);
  box-shadow:0 0 0 1px rgba(255,207,92,.25), 0 26px 80px -22px rgba(255,207,92,.6), inset 0 0 34px rgba(255,207,92,.08);
  animation:wfloat 4.2s ease-in-out infinite;
  will-change: transform;
}
.wprize-art img{ width:100%; height:100%; object-fit:cover; display:block; }
.wprize-art::after{ content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.2) 48%,rgba(255,207,92,.24) 52%,transparent 68%); transform:translateX(-130%); animation:foil 2.8s linear infinite; }
@keyframes wfloat{ 50%{ transform:translateY(-8px); } }
.wprize-name{ font-weight:800; font-size:clamp(18px,4.2vw,25px); line-height:1.15; color:#fff; text-shadow:0 0 28px rgba(255,207,92,.45); max-width:92%; letter-spacing:-.01em; }
.wprize-coll{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.16em; color:var(--mute); text-transform:uppercase; margin-top:-2px; }
.wwinner{ display:flex; align-items:center; gap:12px; margin-top:6px; font-family:'JetBrains Mono',monospace; font-size:14px; }
.wwinner .wwin-wallet{ color:#fff; }
.wwinner .wwin-wallet .waddr{ color:#fff; border-bottom-color:rgba(255,255,255,.35); }
.wwinner .wwin-share{ color:var(--gold); }
/* footer: closing countdown + close button */
.wfoot{ margin-top:22px; display:flex; flex-direction:column; align-items:center; gap:12px; opacity:0; transition:opacity .5s ease; pointer-events:none; }
.wfoot.show{ opacity:1; pointer-events:auto; }
.wclose-msg{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.12em; color:var(--mute); }
.wclose-msg b{ color:#fff; min-width:1.4em; display:inline-block; }
.wclose-btn{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:#cfd2d9; padding:9px 20px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.04); cursor:pointer; transition:color .2s, border-color .2s, background .2s; }
.wclose-btn:hover{ color:#fff; border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.1); }

/* ---------- typographic bits ---------- */
.kicker{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:'JetBrains Mono',monospace; font-size:10px;
  letter-spacing:.28em; text-transform:uppercase; color:#cdd0d7;
}
.kicker::before{ content:""; width:6px; height:6px; border-radius:999px; background:var(--crimson); box-shadow:0 0 12px var(--crimson); }

.dot{ display:inline-block; width:6px; height:6px; border-radius:999px; background:var(--crimson); box-shadow:0 0 10px var(--crimson); animation:beat 1.8s infinite; }
@keyframes beat{ 50%{ opacity:.4; } }

.hud-line{ display:flex; align-items:center; gap:.5rem; color:#cdd0d7; }
.hud-line .dot{ background:#3df0b8; box-shadow:0 0 10px #3df0b8; }

/* ---------- pokeball marks ---------- */
.pokeball-mark{
  position:relative; display:inline-block; width:22px; height:22px; border-radius:999px;
  background:linear-gradient(180deg, var(--crimson) 0 50%, #f2f3f6 50% 100%);
  box-shadow: inset 0 0 0 1.5px #050507, 0 0 16px -4px var(--crimson);
}
.pokeball-mark::before{ content:""; position:absolute; inset:0; top:50%; height:2px; transform:translateY(-50%); background:#050507; }
.pokeball-mark::after{ content:""; position:absolute; left:50%; top:50%; width:6px; height:6px; transform:translate(-50%,-50%); border-radius:999px; background:#fff; box-shadow:0 0 0 2px #050507; }

/* animated header logo — idle bob + periodic “about-to-open” shake, glow pulse, hover spin */
.logo-mark {
  transform-origin: center;
  animation: logoIdle 6s ease-in-out infinite, logoGlow 2.6s ease-in-out infinite;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.logo-mark::after {
  animation: logoCore 2.6s ease-in-out infinite;
  width: 8px;
  height: 8px;
}
.group:hover .logo-mark{ animation: logoSpin .9s cubic-bezier(.3,.1,.2,1) 1, logoGlow 1.2s ease-in-out infinite; }
@keyframes logoIdle{
  0%,38%{ transform:translateY(0) rotate(0); }
  20%{ transform:translateY(-2px) rotate(0); }
  82%{ transform:translateY(0) rotate(0); }
  85%{ transform:rotate(-13deg); } 89%{ transform:rotate(11deg); } 93%{ transform:rotate(-6deg); } 97%,100%{ transform:rotate(0); }
}
@keyframes logoGlow{ 0%,100%{ box-shadow: inset 0 0 0 1.5px #050507, 0 0 10px -3px var(--crimson); } 50%{ box-shadow: inset 0 0 0 1.5px #050507, 0 0 22px 0 var(--crimson); } }
@keyframes logoCore{ 0%,100%{ box-shadow:0 0 0 2px #050507, 0 0 0 0 rgba(255,255,255,0);} 50%{ box-shadow:0 0 0 2px #050507, 0 0 10px 1px rgba(255,255,255,.6);} }
@keyframes logoSpin{ to{ transform:rotate(360deg);} }
@media (prefers-reduced-motion: reduce){ .logo-mark, .logo-mark::after{ animation:none!important; } }

.pokeball-spin{
  width:46px; height:46px; border-radius:999px;
  background:linear-gradient(180deg, var(--crimson) 0 50%, #f2f3f6 50% 100%);
  box-shadow: inset 0 0 0 3px #050507; position:relative;
  animation:spin 1s linear infinite;
}
.pokeball-spin::after{ content:""; position:absolute; left:50%; top:50%; width:14px; height:14px; transform:translate(-50%,-50%); border-radius:999px; background:#fff; box-shadow:0 0 0 4px #050507; }
@keyframes spin{ to{ transform:rotate(360deg);} }

/* ---------- timer ---------- */
.tcell{ display:flex; align-items:baseline; }
.tcell b{ font-size:30px; font-weight:600; color:#fff; letter-spacing:.02em; }
.tcell i{ font-style:normal; font-size:11px; color:var(--mute); margin-left:3px; }
.colon{ font-size:26px; color:var(--mute); transform:translateY(-2px); }

.timeline-rail {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
  overflow: visible;
}
.timeline-fill {
  position: absolute;
  left: 0;
  top: -1px;
  bottom: -1px;
  background: linear-gradient(90deg, var(--crimson), var(--gold));
  border-radius: 999px;
  box-shadow: 0 0 12px var(--crimson);
  transition: width 1s linear;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  will-change: width;
}
.timeline-fill::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 8px #fff, 0 0 12px var(--crimson);
  flex-shrink: 0;
  transform: translateX(5px);
  border: 1.5px solid var(--crimson);
}
/* timeline-ticks removed */

.hud-stat em{ display:block; font-style:normal; font-size:9px; letter-spacing:.2em; color:var(--mute); }
.hud-stat b{ font-size:18px; font-weight:600; color:#fff; }

/* ---------- skeleton ---------- */
.skeleton{ background:linear-gradient(90deg,#14151a 0%,#1d1f27 50%,#14151a 100%); background-size:200% 100%; animation:shim 1.4s linear infinite; border-radius:inherit; }
.skel-text{ position:relative; }
.is-loading .skel-text::after{ content:""; position:absolute; inset:2px 0; border-radius:4px; background:linear-gradient(90deg,#14151a,#1d1f27,#14151a); background-size:200% 100%; animation:shim 1.4s linear infinite; }
@keyframes shim{ 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }

/* ---------- vault ---------- */
.vault-marquee{ position:relative; overflow:hidden; border:1px solid var(--line); border-radius:22px; padding:20px; background:linear-gradient(180deg,rgba(255,255,255,.02),transparent); }
.vault-marquee::before,.vault-marquee::after{ content:""; position:absolute; top:0; bottom:0; width:90px; z-index:3; pointer-events:none; }
.vault-marquee::before{ left:0; background:linear-gradient(90deg,#050507,transparent); }
.vault-marquee::after{ right:0; background:linear-gradient(-90deg,#050507,transparent); }
.vault-track{ display:flex; gap:16px; will-change:transform; cursor:grab; }
.vault-track:active{ cursor:grabbing; }

.nft-card{
  flex:0 0 auto; width:210px; border-radius:16px; padding:11px;
  background:linear-gradient(180deg,#15171f,#0c0d12);
  border:1px solid var(--line); position:relative;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s;
}
.nft-card:hover{ transform:translateY(-6px); border-color:rgba(255,47,67,.4); box-shadow:0 18px 50px -16px rgba(255,47,67,.4); }
.nft-card .art{ aspect-ratio:3/4; border-radius:11px; overflow:hidden; position:relative; background:#0a0b10; border:1px solid var(--line-soft); }
.nft-card .art img{ width:100%; height:100%; object-fit:cover; display:block; }
/* holo foil sweep */
.nft-card .art::after{ content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.12) 48%,rgba(255,207,92,.1) 52%,transparent 70%); transform:translateX(-120%); transition:transform .7s; }
.nft-card:hover .art::after{ transform:translateX(120%); }
.nft-card .rank{ position:absolute; top:8px; left:8px; z-index:2; font:500 9px/1 'JetBrains Mono',monospace; letter-spacing:.18em; padding:4px 6px; border-radius:5px; background:rgba(0,0,0,.55); border:1px solid var(--line); color:var(--gold); }
.nft-card .idx{ position:absolute; bottom:8px; right:8px; z-index:2; font:500 10px/1 'JetBrains Mono',monospace; padding:3px 6px; border-radius:5px; background:rgba(0,0,0,.55); border:1px solid var(--line); color:#fff; }
.nft-card .meta{ padding:11px 4px 3px; }
.nft-card .meta h5{ font-weight:600; font-size:14px; }
.nft-card .meta p{ font-size:11px; color:var(--mute); font-family:'JetBrains Mono',monospace; margin-top:2px; }
.nft-card.is-next{ border-color:var(--crimson); box-shadow:0 0 0 1px var(--crimson),0 18px 50px -18px rgba(255,47,67,.5); }
.nft-card.is-next .art::before{ content:"NEXT"; position:absolute; z-index:3; top:8px; right:8px; font:600 9px/1 'JetBrains Mono',monospace; letter-spacing:.22em; background:var(--crimson); color:#fff; padding:4px 6px; border-radius:5px; }

/* ---------- holders / history ---------- */
.share-bar{ height:6px; border-radius:999px; background:rgba(255,255,255,.06); overflow:hidden; }
.share-bar > span{ display:block; height:100%; background:linear-gradient(90deg,var(--crimson),var(--gold)); border-radius:999px; }
.history-item{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.02); border:1px solid var(--line-soft); transition:background .2s; }
.history-item:hover{ background:rgba(255,255,255,.05); }
.history-item .thumb{ width:42px; height:42px; border-radius:9px; overflow:hidden; background:#0a0b10; border:1px solid var(--line-soft); flex:0 0 auto; }
.history-item .thumb img{ width:100%; height:100%; object-fit:cover; }
.history-item .who{ font-family:'JetBrains Mono',monospace; font-size:12px; }
.history-item .ago{ margin-left:auto; font-size:11px; color:var(--mute); font-family:'JetBrains Mono',monospace; }

.step{ display:inline-grid; place-items:center; width:38px; height:38px; border-radius:10px; background:linear-gradient(180deg,#1a1c24,#0f1015); border:1px solid var(--line); font-family:'JetBrains Mono',monospace; font-weight:500; color:var(--crimson); }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(24px); }

/* ---------- winner overlay ---------- */
#winner-overlay{ background:radial-gradient(60% 60% at 50% 42%,rgba(8,8,12,.82),rgba(3,3,5,.94)); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:opacity .5s ease; overflow-y:auto; padding:24px 0; }
#winner-overlay.on{ pointer-events:auto; }

@media (max-width:768px){ .tcell b{ font-size:24px; } }
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms!important; } .reveal{ opacity:1; transform:none; } }

/* ---------- mobile drawers ---------- */
#drawer-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 768px) {
  .mobile-drawer {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    z-index: 60 !important;
    width: 290px !important;
    padding: 24px 20px !important;
    background: rgba(10, 11, 16, 0.94) !important;
    border: none !important;
    border-radius: 0 !important;
    backdrop-filter: blur(20px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(120%) !important;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.6) !important;
    overflow-y: auto !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    flex-direction: column;
    margin: 0 !important;
    opacity: 1 !important;
    will-change: transform !important;
  }
  
  .mobile-drawer-left {
    left: 0 !important;
    border-right: 1px solid var(--line) !important;
    transform: translateX(-100%) !important;
  }
  
  .mobile-drawer-left.active {
    transform: translateX(0) !important;
  }
  
  .mobile-drawer-right {
    right: 0 !important;
    border-left: 1px solid var(--line) !important;
    transform: translateX(100%) !important;
  }
  
  .mobile-drawer-right.active {
    transform: translateX(0) !important;
  }

  .mobile-drawer #recent-draws, 
  .mobile-drawer #vault-queue {
    margin-top: 12px;
  }
}

/* Status styling for draw transaction links */
.dcard .txlink.is-success {
  color: #10b981 !important;
  border-color: rgba(16,185,129,0.3) !important;
  background: rgba(16,185,129,0.05) !important;
}
.dcard .txlink.is-success:hover {
  color: #34d399 !important;
  border-color: rgba(16,185,129,0.5) !important;
  background: rgba(16,185,129,0.1) !important;
}
.dcard .txlink.is-pending {
  color: #ffcf5c !important;
  border-color: rgba(255,207,92,0.4) !important;
  background: rgba(255,207,92,0.05) !important;
  border-style: dashed !important;
}