:root,:host{color-scheme:dark;--ink:#0d131c;--paper:#f8f0dc;--gold:#ffcf67;--ice:#96dccf;--muted:#b4bfc9;--mono:ui-monospace,SFMono-Regular,Consolas,monospace;--display:Impact,Haettenschweiler,"Arial Narrow",sans-serif;font-family:Arial,Helvetica,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--ink);color:var(--paper)}h1,h2,h3,p,ol,dl,dd{margin:0}button,a{touch-action:manipulation}button{font:inherit;color:inherit}a{color:inherit}button:not(:disabled),a[href]{cursor:pointer}:focus-visible{outline:3px solid #fff2a2;outline-offset:4px}.wrap{width:min(1160px,calc(100% - 92px));margin-inline:auto}.sr-only,.skip:not(:focus){position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}.skip:focus{position:absolute;z-index:99;top:12px;left:10px;padding:10px;background:#122832}

.poster{position:relative;width:256px;padding:8px;transform:rotate(4deg);background:repeating-linear-gradient(3deg,#9075480a 0 1px,transparent 1px 4px),radial-gradient(ellipse at 40% 45%,#ffebbd 18%,#d0ac72 100%);color:#35291c;box-shadow:0 7px 0 #0d171ba8,5px 12px 24px #060a0ec0}.poster:after{position:absolute;content:"";height:12px;width:45px;top:-5px;left:calc(50% - 20px);transform:rotate(-6deg);background:linear-gradient(110deg,#d4bc8fcc,#ac9d74d9);border-inline:1px dashed #784b2d}.poster-inner{border:1px solid #785d34;outline:1px solid #9e8050;outline-offset:-4px;text-align:center;padding:9px 9px 8px}.poster-over{font-size:7px;letter-spacing:1.5px}.poster h2{font:900 44px/.96 Georgia,serif;letter-spacing:1px;border-bottom:2px solid #634c2a;padding:2px 0 4px}.portrait{position:relative;overflow:hidden;height:171px;background:repeating-radial-gradient(ellipse at 50% 75%,transparent 0 12px,#9c713729 12px 13px);border-bottom:2px solid #634c2a}.portrait img{display:block;position:relative;height:100%;width:100%;object-fit:contain;filter:drop-shadow(1px 3px 2px #76573588)}.caption{padding-top:4px}.caption small{display:block;font-size:7px;letter-spacing:2px}.caption strong{font:900 23px/1.15 Georgia,serif}.roster{display:flex;gap:5px;justify-content:center;margin-top:15px}.roster button{background:transparent;border:1px solid #667477;color:#b8c8c8;border-radius:4px;min-width:40px;min-height:30px;font:700 11px var(--mono)}.roster button[aria-pressed=true]{background:#e9cb86;border-color:#e9cb86;color:#2b2924}.roster button:hover{border-color:var(--gold)}

.jackpots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:23px}.jackpot{--accent:#9ee7ba;--hue:#2c5143;--base:#17281f;border:1px solid color-mix(in srgb,var(--accent) 42%,#21242e);position:relative;isolation:isolate;overflow:hidden;border-radius:7px;background:radial-gradient(ellipse at 100% 10%,var(--hue),transparent 65%),var(--base);padding:19px 21px 0}.jackpot.billy{--accent:#ffe186;--hue:#67502b;--base:#312c21}.jackpot.pico{--accent:#ffc193;--hue:#694535;--base:#322723}.jackpot:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--accent),transparent 110%)}.ticket-label{font-size:9px;letter-spacing:1.5px;color:var(--accent)}.ticket-label>span{opacity:.85}.medal{width:90px;height:90px;display:grid;place-items:center;position:absolute;top:10px;right:13px;z-index:-1}.medal:before{content:"";position:absolute;inset:-9px;border:1px dashed color-mix(in srgb,var(--accent) 30%,transparent);border-radius:50%}.medal img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 2px #0007);transform:rotate(6deg)}.ganja .medal img{border-radius:50%;width:90%;height:90%;transform:rotate(-7deg)}
.jackpot h3{margin-top:17px}.jackpot .token{display:block;color:var(--accent);font:bold 18px/1 var(--mono);letter-spacing:1px}.jackpot strong{display:block;font:900 clamp(39px,3.7vw,57px)/1.08 var(--display);letter-spacing:-.018em;color:#fff5db;margin-top:10px;text-shadow:0 2px 2px #16191c}.odds{display:flex;align-items:center;gap:12px;font:600 13px var(--mono);margin-top:12px;padding:11px 0 12px;border-top:1px dashed color-mix(in srgb,var(--accent) 34%,transparent)}.odds span{font-size:9px;color:var(--accent);letter-spacing:1.3px}
dialog{border:1px solid #65777b;padding:0;background:#0b101a;color:var(--paper);width:min(1170px,96vw);height:min(850px,94dvh);max-height:94dvh;border-radius:12px;box-shadow:0 28px 100px #000b}dialog[open]{display:flex;flex-direction:column}dialog::backdrop{background:#05080ee0}body:has(dialog[open]){overflow:hidden}.dialog-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 16px;border-bottom:1px solid #343f4d;background:#19232e}.dialog-bar small{font:8px var(--mono);letter-spacing:1.6px;color:var(--gold)}.dialog-bar h2{margin:2px 0;font:24px/1 var(--display)}.close{background:#27313b;border:1px solid #56636b;border-radius:5px;min-height:42px;padding:0 13px;color:#f8eddb;font-size:13px}.close b{margin-left:8px;font-size:18px}#game-host{flex:1;min-height:0}#game-host iframe{display:block;border:0;width:100%;height:100%}


/* The outer homepage gives all sections mobile gutters. The banner sets its own. */
:host {
  display: block;
  padding: 0 !important;
  margin: 0;
  width: 100%;
  background: var(--ink);
  color: var(--paper);
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
}
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-block: 1px solid #b088556b;
  background: #191917;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,#080c11cc, #090c1080 31%, transparent 60%),
              linear-gradient(0deg,#11101570,transparent 28%),
              url("assets/home/vault-entrance.webp") center 52% / cover no-repeat;
}
.hero-grid {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: center;
  gap: 10px;
  min-height: clamp(490px,34vw,620px);
  padding: 42px 32px 32px;
}
.hero-copy {
  width: min(100%,520px);
  container-type: inline-size;
  padding: 12px 0 28px;
}
.hero h1 {
  margin: 0 0 23px;
  color: #fff4dc;
  font: italic 1000 clamp(42px,17cqw,90px)/.9 "Arial Black",Impact,Arial,sans-serif;
  letter-spacing: -4px;
  transform: skewX(-3deg);
  text-shadow: 1px 1px #cfb99f, 2px 3px #a08769, 4px 7px #483021, 6px 10px #100704, 0 16px 26px #0009;
}
.hero h1 em {
  display: block;
  width: max-content;
  margin-top: 7px;
  font-size: 9.5cqw;
  letter-spacing: -.25cqw;
  background: linear-gradient(#ffe4a5 2%, #ffc168 36%, #f49b42 68%, #dd622e);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(1px 2px #ab502e) drop-shadow(2px 3px #58231f);
  text-shadow: none;
}
.tag { color: #fff3e1; font: 700 clamp(17px,1.45vw,22px)/1.35 Arial,sans-serif; }
.tag b { color: #a5e1d7; }
.pitch { max-width: 435px; margin: 9px 0 24px; color: #efddc7; font-size: 17px; line-height: 1.5; }
.play-note { margin: 17px 0 0; font: 400 12px/1.5 Arial,sans-serif; color: #e2d0b9; }
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 18px 32px;
  border: 2px solid #ffd45e;
  border-radius: 999px;
  background: linear-gradient(135deg,rgba(5,10,23,.96),rgba(18,27,49,.94));
  color: #fff1b5;
  font: 900 clamp(16px,1.45vw,24px)/1 Arial,sans-serif;
  letter-spacing: .16em;
  text-decoration: none;
  text-shadow: 0 2px 3px rgba(0,0,0,.95);
  box-shadow: 0 5px 0 #0006,0 10px 28px #000b,inset 0 0 16px #ffcd511f;
  animation: whack-play-pulse 1.8s ease-in-out infinite;
}
.cta:hover { border-color: #ffedb1; color: #fff8d8; }
@keyframes whack-play-pulse {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.045); }
}
@media(prefers-reduced-motion:reduce) { .cta { animation: none; } }
.showcase {
  display: grid;
  justify-items: center;
  align-content: center;
  justify-self: center;
  padding-block: 12px;
  min-width: 0;
}
.poster { width: clamp(245px,19vw,320px); }
.portrait { height: clamp(165px,12vw,208px); }
.roster button { background-color: #152023ec; min-height: 34px; }

.kicker, .ticket-label, .poster-over, .caption small {
  font: 700 10px/1.4 var(--mono);
  letter-spacing: 1.6px;
}
.poster-over, .caption small { font-size: 7px; }
.caption small { letter-spacing: 2px; }
.kicker { display: flex; align-items: center; gap: 10px; color: var(--ice); }
.kicker.warm { color: var(--gold); }
.kicker > span { width: 24px; height: 2px; background: currentColor; }
.vault-chamber {
  background-color: #14191c;
  background-image: linear-gradient(90deg,#0d101540 0%,#0d10157d 21%,#10151bd4 39%,#10151bb8 63%,#0d10156b 80%,#0d101525),
                    url("assets/home/vault-interior.webp");
  background-size: cover;
  background-position: center;
}
.vault-chamber .wrap { width: min(1060px, calc(100% - 88px)); }
.fund { padding-block: 48px 26px; }
.fund-intro { display: flex; justify-content: space-between; align-items: end; gap: 26px; }
.fund h2, .how h2 { margin-top: 8px; font: 800 clamp(36px,3.8vw,58px)/1.04 var(--display); letter-spacing: -.035em; text-shadow: 0 2px 12px #080706; }
.fund h2 > span { color: var(--gold); }
.fund-intro > p, .fund-note, .tier-note, .steps p { color: #e0ddd7; text-shadow: 0 1px 4px #100d0b, 0 1px 12px #060708; }
.fund-intro > p { font-size: 14px; line-height: 1.5; }
.fund-intro > p strong { color: var(--paper); }
.fund-note, .tier-note { margin-top: 12px; font-size: 13px; line-height: 1.55; }
.prize-tiers { margin-top: 30px; }
.prize-tiers h3 { font-size: 21px; color: var(--paper); text-shadow: 0 2px 8px #101014; }
.tier-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 14px 0 0;
}
.tier-cards > div {
  --tint: #a9bdd4;
  --shade: #17212d;
  position: relative;
  flex: 0 0 calc((100% - 36px)/4);
  padding: 18px 8px 15px;
  overflow: hidden;
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--tint) 49%, #161a22);
  border-radius: 16px;
  background: linear-gradient(180deg,var(--shade),#0e1119f5);
  box-shadow: 0 3px 12px #0505096b;
}
.tier-cards > div::before {
  content: ""; position: absolute; top: 0; inset-inline: 14px; height: 2px;
  border-radius: 2px; background: var(--tint); opacity: .84;
}
.tier-cards dt { color: color-mix(in srgb,var(--tint) 32%,#fff); font: 800 16px/1.35 Arial,sans-serif; letter-spacing: .04em; }
.tier-cards dd { margin-top: 6px; color: var(--tint); font: 700 13px/1.4 Arial,sans-serif; letter-spacing: .06em; }
.tier-cards .tier-empty { --tint:#a7afbe; --shade:#181b23; border-style:dashed; border-color:#545861; }
.tier-cards .tier-blue { --tint:#8ecbff; --shade:#172a3e; }
.tier-cards .tier-cyan { --tint:#79f3ff; --shade:#12323e; }
.tier-cards .tier-violet { --tint:#d0adff; --shade:#37214c; }
.tier-cards .tier-gold { --tint:#ffd27a; --shade:#503b20; }
.tier-cards .tier-amber { --tint:#ffb15a; --shade:#57301e; }
.how { padding: 22px 0 52px; }
.how h2 { font-size: clamp(29px,3vw,44px); }
.steps { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; list-style: none; padding: 0; margin-top: 18px; }
.steps li { border-top: 1px solid #a6a79480; padding: 12px 16px 14px; background: #10151bd9; border-radius: 0 0 5px 5px; }
.steps h3 { font-size: 16px; }
.steps p { margin-top: 6px; font-size: 14px; line-height: 1.55; }

@media (max-width: 960px) {
  .medal { width: 69px; height: 69px; }
  .jackpot { padding-inline: 14px; }
  .vault-chamber .wrap { width: calc(100% - 48px); }
}
@media (max-width: 760px) {
  .hero-grid { grid-template-columns: 1fr; gap: 8px; padding: 36px 22px 21px; }
  .hero-copy { padding: 0; }
  .hero h1 { font-size: clamp(62px,12vw,86px); letter-spacing:-3px; margin-bottom:20px; }
  .hero h1 em { font-size:clamp(25px,7.7vw,46px); margin-top:6px; letter-spacing:-1.3px; }
  .hero::before { background-position: center, center, 64% center; }
  .tag { font-size: 19px; }
  .play-note { margin-top: 15px; font-size: 11px; }
  .pitch { font-size: 15px; margin-bottom:22px; }
  .cta {
    min-height:48px; min-width:156px; padding:12px 20px;
    font-size:14px; line-height:1.4; letter-spacing:.14em;
    box-shadow:0 4px 0 #0006,0 8px 18px #0007;
    text-shadow:none; animation:none;
  }
  .showcase { padding-top: 8px; }
  .poster { width: 180px; padding: 6px; }
  .poster-inner { padding:6px 8px; }
  .poster h2 { font-size:30px; }
  .portrait { height: 101px; }
  .caption strong { font-size: 18px; }
  .poster-over, .caption small { font-size:6px; }
  .roster { margin-top:10px; }
  .roster button { min-width:44px; min-height:36px; }
  .vault-chamber {
    background-image: linear-gradient(0deg,#11171d 0%,transparent 88%),url("assets/home/vault-interior.webp");
    background-size:100% clamp(230px,49vw,360px), 100% auto;
    background-repeat:no-repeat;
    background-position:center top;
  }
  .vault-chamber .wrap { width: calc(100% - 36px); }
  .fund { padding-block: 0 15px; }
  .fund-intro { flex-direction: column; align-items: start; gap: 9px; padding-top: clamp(115px,24vw,165px); }
  .fund-intro > p { font-size:13px; }
  .jackpots { grid-template-columns:1fr; gap:10px; margin-top:17px; }
  .jackpot { padding:13px 16px; min-height:103px; }
  .medal { width:71px; height:71px; top:50%; right:19px; transform:translateY(-50%); }
  .jackpot h3 { display:flex; flex-direction:row-reverse; justify-content:flex-end; align-items:baseline; gap:8px; margin-top:5px; }
  .jackpot .token { font-size:14px; }
  .jackpot strong { margin:0; font-size:clamp(30px,8vw,43px); }
  .odds { border:0; padding:0; margin-top:5px; }
  .tier-cards { gap:9px; }
  .tier-cards > div { flex-basis:calc((100% - 9px)/2); padding-block:15px 12px; }
  .how { padding:22px 0 30px; background:linear-gradient(#14191c 0%,#10151de0 34%,#11151bd1),url("assets/home/vault-interior.webp") center bottom/cover; }
  .steps { grid-template-columns:1fr; gap:10px; }
  .steps li { padding:10px 12px; }
  dialog { width:100%; max-width:100%; height:100dvh; max-height:100dvh; margin:0; border:0; border-radius:0; }
  .dialog-bar { padding:6px 12px; }
}
@media (max-width:350px) {
  .hero-grid { padding-inline:16px; }
  .hero h1 { font-size:56px; }
  .tag { font-size:17px; }
  .vault-chamber .wrap { width:calc(100% - 28px); }
  .medal { width:56px; height:56px; right:14px; }
}
