:root {
  --bg: #4d3cc2;
  --bg-deep: #30258c;
  --ink: #201a52;
  --cream: #fff8df;
  --pink: #ff4f8c;
  --pink-dark: #db2c6d;
  --yellow: #ffbd28;
  --yellow-light: #ffd96a;
  --cyan: #4bdad7;
  --shadow: 0 28px 70px rgba(25, 17, 78, .35);
}

* { box-sizing: border-box; }

html { min-height: 100%; }

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--cream);
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.12), transparent 34%),
    linear-gradient(155deg, #5947d2 0%, var(--bg) 48%, var(--bg-deep) 100%);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

.background-orb {
  position: fixed;
  border-radius: 999px;
  filter: blur(5px);
  pointer-events: none;
  opacity: .23;
}

.orb-one {
  width: 430px;
  height: 430px;
  top: -190px;
  left: -160px;
  background: #65eee6;
}

.orb-two {
  width: 360px;
  height: 360px;
  right: -120px;
  bottom: -180px;
  background: #ff6aa5;
}

.app-shell {
  position: relative;
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 20px 0 34px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 4px 0 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  color: #6d3a00;
  background: linear-gradient(145deg, #ffe779, #ffb51f);
  box-shadow: 0 9px 0 #d56c25, 0 16px 25px rgba(29, 20, 93, .26);
  font-size: 22px;
  transform: rotate(-6deg);
}

.brand strong,
.brand small { display: block; }
.brand strong { font-family: "Baloo 2", cursive; font-size: 19px; letter-spacing: .04em; line-height: 1; }
.brand small { margin-top: 4px; color: rgba(255,255,255,.72); font-size: 11px; letter-spacing: .11em; text-transform: uppercase; }

.stats {
  display: flex;
  gap: 8px;
}

.stats div {
  min-width: 73px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  background: rgba(255,255,255,.09);
  box-shadow: inset 0 1px rgba(255,255,255,.12);
  text-align: center;
  backdrop-filter: blur(12px);
}

.stats span,
.stats small { display: block; }
.stats span { font-family: "Baloo 2", cursive; font-size: 20px; font-weight: 800; line-height: 1; }
.stats small { margin-top: 2px; color: rgba(255,255,255,.65); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }

.hero-copy {
  max-width: 580px;
  margin: 10px auto 4px;
  text-align: center;
}

.eyebrow {
  margin: 0 0 6px;
  color: #ffe271;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .19em;
  text-transform: uppercase;
}

.hero-copy h1 {
  margin: 0;
  font-family: "Baloo 2", cursive;
  font-size: clamp(31px, 5vw, 52px);
  font-weight: 800;
  line-height: .98;
  text-shadow: 0 5px 0 rgba(39, 28, 113, .22);
}

.hero-copy > p:last-child {
  max-width: 470px;
  margin: 10px auto 0;
  color: rgba(255,255,255,.74);
  font-size: 13px;
  line-height: 1.55;
}

.game-stage {
  position: relative;
  display: grid;
  justify-items: center;
  min-height: 660px;
  padding-top: 26px;
}

.spotlight {
  position: absolute;
  top: 86px;
  width: 680px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.14), rgba(255,255,255,.04) 45%, transparent 70%);
  pointer-events: none;
}

.machine-wrap {
  position: relative;
  z-index: 2;
  width: 510px;
  height: 565px;
  filter: drop-shadow(0 34px 30px rgba(26, 18, 86, .34));
  transform-origin: 50% 82%;
}

.machine {
  position: absolute;
  left: 50px;
  top: 0;
  width: 392px;
  transform-origin: 50% 80%;
}

.machine-top {
  position: relative;
  z-index: 5;
  width: 365px;
  height: 64px;
  margin: 0 auto -12px;
  padding-top: 10px;
  border: 7px solid #e32f70;
  border-radius: 28px 28px 18px 18px;
  background: linear-gradient(#ff6aa1, #ff4c8a);
  box-shadow: inset 0 6px rgba(255,255,255,.22), 0 9px 0 #ad235f;
}

.light-row {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 12px;
}

.light-row i {
  position: relative;
  width: 23px;
  height: 23px;
  border: 4px solid #dd7530;
  border-radius: 50%;
  background: #ffd840;
  box-shadow: inset -3px -3px rgba(255,140,0,.18), 0 0 12px rgba(255,220,75,.45);
}

.light-row i::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 7px;
  top: 2px;
  left: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  transform: rotate(28deg);
}

.machine-logo {
  position: absolute;
  left: 50%;
  bottom: -17px;
  z-index: 4;
  min-width: 178px;
  padding: 7px 16px 5px;
  border: 4px solid #bd235f;
  border-radius: 999px;
  color: #7a2255;
  background: #fff1c8;
  font-family: "Baloo 2", cursive;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .03em;
  text-align: center;
  transform: translateX(-50%);
  box-shadow: 0 5px 0 rgba(117,30,83,.2);
}

.machine-logo span { color: var(--pink); }

.glass-chamber {
  position: relative;
  z-index: 2;
  width: 332px;
  height: 292px;
  margin: 0 auto -9px;
  overflow: hidden;
  border: 9px solid #e7f7ff;
  border-top-width: 13px;
  border-bottom-width: 11px;
  border-radius: 0 0 50px 50px / 0 0 24px 24px;
  background:
    linear-gradient(110deg, rgba(255,255,255,.53) 0 15%, transparent 15% 68%, rgba(255,255,255,.34) 68% 74%, transparent 74%),
    linear-gradient(#eff9ff, #d9f3fb 65%, #b9e6ef);
  box-shadow: inset 0 -30px 50px rgba(88,175,207,.2), 0 9px 0 #bed9e2;
  clip-path: polygon(3% 0, 97% 0, 92% 100%, 8% 100%);
}

.glass-chamber::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(90deg, rgba(255,255,255,.2), transparent 32% 70%, rgba(255,255,255,.18));
  pointer-events: none;
}

.glass-shine {
  position: absolute;
  z-index: 4;
  left: 36px;
  top: 12px;
  width: 22px;
  height: 200px;
  border-radius: 999px;
  background: linear-gradient(rgba(255,255,255,.72), rgba(255,255,255,0));
  opacity: .7;
  transform: rotate(-3deg);
}

.capsule-bed {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.capsule {
  --x: 0px;
  --y: 0px;
  --r: 0deg;
  --c1: #ff508b;
  --c2: #fff2f6;
  position: absolute;
  left: var(--left);
  bottom: var(--bottom);
  width: var(--size);
  aspect-ratio: 1;
  border: max(1px, calc(var(--size) * .055)) solid rgba(75,72,124,.18);
  border-radius: 50%;
  background: linear-gradient(to bottom, var(--c1) 0 48%, #fff 49% 53%, var(--c2) 54% 100%);
  box-shadow:
    inset calc(var(--size) * -.1) calc(var(--size) * -.13) rgba(33,34,91,.08),
    inset calc(var(--size) * .08) calc(var(--size) * .1) rgba(255,255,255,.26),
    0 max(1px, calc(var(--size) * .1)) max(2px, calc(var(--size) * .12)) rgba(40,71,106,.18);
  transform: translate(var(--x), var(--y)) rotate(var(--r));
  transition: transform .2s cubic-bezier(.2,.8,.25,1), left .2s, bottom .2s;
}

.capsule.is-waiting {
  visibility: hidden;
  opacity: 0;
}

.capsule.is-physics {
  margin: 0;
  visibility: visible;
  opacity: 1;
  transition: opacity .16s ease;
  will-change: left, top, transform;
}

.capsule.is-dropping-in {
  animation: capsule-enter .24s ease-out both;
}

.capsule::before {
  content: "★";
  position: absolute;
  left: 50%;
  top: 56%;
  color: #ffc33c;
  font-size: calc(var(--size) * .32);
  line-height: 1;
  text-shadow: -1px -1px #fff, 1px -1px #fff, -1px 1px #fff, 1px 1px #fff;
  transform: translate(-50%, -50%);
}

.capsule::after {
  content: "";
  position: absolute;
  left: 21%;
  top: 14%;
  width: 16%;
  height: 12%;
  border-radius: 50%;
  background: rgba(255,255,255,.72);
  transform: rotate(-30deg);
}

.machine-body {
  position: relative;
  z-index: 3;
  width: 392px;
  height: 220px;
  overflow: visible;
  border: 8px solid #e6931f;
  border-radius: 30px 30px 24px 24px;
  background: linear-gradient(100deg, #ffc441 0 42%, #ffb624 42% 100%);
  box-shadow: inset 0 6px rgba(255,255,255,.18), inset 0 -7px rgba(222,115,18,.13), 0 12px 0 #c86d1d;
}

.body-highlight {
  position: absolute;
  left: 18px;
  top: 15px;
  width: 116px;
  height: 174px;
  border-radius: 18px 18px 45px 18px;
  background: linear-gradient(90deg, rgba(255,255,255,.18), transparent);
}

.coin-panel {
  position: absolute;
  left: 24px;
  top: 24px;
  width: 86px;
  text-align: center;
}

.coin-label,
.chute-label {
  color: #8c4c26;
  font-family: "Baloo 2", cursive;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}

.coin-slot {
  position: relative;
  width: 55px;
  height: 72px;
  margin: 6px auto 7px;
  border: 5px solid #fff3cf;
  border-radius: 18px;
  background: #e9edf3;
  box-shadow: inset 0 7px #c9d1dc, 0 6px 0 rgba(178,95,19,.24);
}

.coin-slot span {
  position: absolute;
  left: 50%;
  top: 16px;
  width: 10px;
  height: 38px;
  border-radius: 999px;
  background: #899aaa;
  transform: translateX(-50%);
  box-shadow: inset 3px 0 rgba(255,255,255,.25);
}

.coin-note { color: rgba(123,67,31,.65); font-size: 9px; font-weight: 800; text-transform: uppercase; }

.dial-panel {
  position: absolute;
  left: 124px;
  top: 43px;
  width: 108px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
}

.dial-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  margin: auto;
  border: 8px solid #fff8de;
  border-radius: 50%;
  background: linear-gradient(145deg, #eff3f7, #cbd7e1);
  box-shadow: inset -7px -8px rgba(85,104,127,.12), 0 7px 0 rgba(178,95,19,.24), 0 0 0 0 rgba(255,255,255,0);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.dial-ring::after {
  content: "";
  position: absolute;
  inset: -13px;
  border: 3px dashed rgba(129,72,23,.25);
  border-radius: 50%;
  pointer-events: none;
}

.dial-handle {
  display: block;
  width: 72px;
  height: 24px;
  border: 4px solid #7895aa;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, #aac3d3 0 13px, #d8e4eb 13px 18px);
  transform: rotate(-38deg);
  box-shadow: 0 5px 0 rgba(73,92,109,.2);
  will-change: transform;
}

.dial-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 10px;
  padding: 5px 8px 4px;
  border-radius: 999px;
  color: #875221;
  background: rgba(255,248,222,.55);
  font-family: "Baloo 2", cursive;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
}

.dial-copy b {
  color: #e62f70;
  font-size: 14px;
  line-height: .7;
}

.dial-panel:hover .dial-ring,
.dial-panel:focus-visible .dial-ring {
  filter: brightness(1.06);
  transform: translateY(-2px) scale(1.035);
  box-shadow: inset -7px -8px rgba(85,104,127,.12), 0 9px 0 rgba(178,95,19,.24), 0 0 0 6px rgba(255,255,255,.16);
}

.dial-panel:active .dial-ring { transform: translateY(3px) scale(.98); }
.dial-panel:focus-visible { outline: none; }
.dial-panel:disabled { cursor: default; }
.dial-panel:disabled .dial-ring { filter: none; }

.chute-panel {
  position: absolute;
  right: 21px;
  top: 20px;
  width: 126px;
  text-align: center;
}

.chute-mouth {
  position: relative;
  height: 151px;
  margin-top: 5px;
  overflow: hidden;
  border: 9px solid #ff6b9c;
  border-radius: 25px;
  background: #ee3676;
  box-shadow: inset 0 11px #c72a65, inset 0 -6px rgba(157,22,80,.18), 0 7px 0 rgba(178,95,19,.24);
}

.chute-mouth::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 15px;
  height: 34px;
  border-radius: 12px 12px 5px 5px;
  background: #b6255b;
  box-shadow: inset 0 -8px rgba(255,255,255,.06);
}

.chute-shadow {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 11px;
  height: 16px;
  border-radius: 50%;
  background: rgba(85,16,65,.25);
  filter: blur(3px);
}

.mini-capsule {
  --mini-top: #55d7d1;
  position: absolute;
  left: 50%;
  bottom: -70px;
  width: 64px;
  height: 64px;
  border: 4px solid rgba(91,23,91,.22);
  border-radius: 50%;
  background: linear-gradient(to bottom, var(--mini-top) 0 47%, white 48% 54%, #fff1e2 55%);
  transform: translateX(-50%) rotate(0);
  box-shadow: inset -7px -8px rgba(57,29,86,.11), 0 8px 10px rgba(76,18,76,.25);
  opacity: 0;
}

.machine-foot {
  position: absolute;
  bottom: -14px;
  width: 78px;
  height: 23px;
  border-radius: 0 0 17px 17px;
  background: #b55d1b;
}
.foot-left { left: 31px; }
.foot-right { right: 31px; }


.status-card {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "dot title" "dot text";
  column-gap: 10px;
  align-items: center;
  min-width: 300px;
  margin-top: 7px;
  padding: 10px 17px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 17px;
  background: rgba(31,24,96,.35);
  box-shadow: inset 0 1px rgba(255,255,255,.11), 0 16px 38px rgba(28,19,86,.18);
  backdrop-filter: blur(14px);
}

.status-dot {
  grid-area: dot;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #67efc5;
  box-shadow: 0 0 0 5px rgba(103,239,197,.12), 0 0 17px rgba(103,239,197,.7);
}

.status-card strong { grid-area: title; font-family: "Baloo 2", cursive; font-size: 13px; line-height: 1.1; }
.status-card > span:last-child { grid-area: text; color: rgba(255,255,255,.61); font-size: 10px; }

.keyboard-hint {
  margin: -8px 0 0;
  color: rgba(255,255,255,.47);
  font-size: 10px;
  text-align: center;
}

kbd {
  padding: 2px 6px;
  border: 1px solid rgba(255,255,255,.24);
  border-bottom-width: 2px;
  border-radius: 5px;
  color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.1);
  font: inherit;
}

/* Machine interaction states */
.machine-wrap.is-turning .dial-handle { animation: handle-turn .72s cubic-bezier(.18,.82,.24,1) both; }
.machine-wrap.is-turning .dial-ring { animation: handle-bump .72s ease both; }
.machine-wrap.is-mixing .machine { animation: machine-rattle .24s linear infinite; }
.machine-wrap.is-mixing .light-row i { animation: light-flash .35s linear infinite alternate; }
.machine-wrap.is-mixing .light-row i:nth-child(even) { animation-delay: -.18s; }
.machine-wrap.is-dispensing .mini-capsule { animation: mini-drop 1s cubic-bezier(.2,.8,.3,1.2) forwards; }

/* Reveal */
.reveal-layer {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transition: opacity .32s ease, visibility .32s;
}

.reveal-layer.is-visible { visibility: visible; opacity: 1; }

.reveal-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(104,84,226,.83), rgba(25,17,85,.95) 72%);
  backdrop-filter: blur(9px);
}

.magic-ring {
  position: absolute;
  width: min(60vw, 520px);
  aspect-ratio: 1;
  border: 2px solid rgba(255,255,255,.17);
  border-radius: 50%;
  box-shadow: 0 0 45px rgba(255,224,85,.12), inset 0 0 45px rgba(255,255,255,.08);
  opacity: 0;
}

.reveal-layer.is-arriving .magic-ring { animation: ring-expand 1.2s ease-out .15s both; }
.reveal-layer.is-arriving .ring-two { animation-delay: .37s; }

.capsule-open-stage {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 188px;
  height: 188px;
}

.big-capsule {
  --reveal-color: #55d7d1;
  position: relative;
  z-index: 3;
  width: 188px;
  height: 188px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: inherit;
  background: transparent;
  appearance: none;
  filter: drop-shadow(0 22px 25px rgba(17,13,56,.37));
  opacity: 0;
  transform: translateY(-65px) scale(.35) rotate(-20deg);
  cursor: default;
  touch-action: manipulation;
}

.big-capsule:disabled {
  cursor: default;
}

.big-capsule.is-ready-to-open {
  cursor: pointer;
  animation: capsule-ready-float 1.35s ease-in-out infinite;
}

.big-capsule.is-ready-to-open:hover {
  filter:
    drop-shadow(0 22px 25px rgba(17,13,56,.37))
    drop-shadow(0 0 24px rgba(255, 231, 113, .78));
}

.big-capsule.is-ready-to-open:focus-visible {
  outline: 4px solid rgba(255, 239, 150, .95);
  outline-offset: 12px;
}

.open-capsule-prompt {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 25px);
  z-index: 6;
  padding: 10px 18px 8px;
  border: 1px solid rgba(255, 235, 151, .72);
  border-radius: 999px;
  color: #fff8ce;
  background: rgba(34, 0, 10, .72);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, .35),
    0 0 24px rgba(255, 195, 54, .22),
    inset 0 1px rgba(255,255,255,.12);
  font-family: "Baloo 2", sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px) scale(.9);
  transition: opacity .22s ease, transform .22s ease;
  backdrop-filter: blur(10px);
}

.open-capsule-prompt::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 12px;
  height: 12px;
  border-right: 1px solid rgba(255, 235, 151, .72);
  border-bottom: 1px solid rgba(255, 235, 151, .72);
  background: rgba(34, 0, 10, .72);
  transform: translate(-50%, -6px) rotate(45deg);
}

.open-capsule-prompt.is-visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  animation: open-prompt-hover 1.15s ease-in-out infinite;
}

.reveal-layer.is-arriving .big-capsule { animation: capsule-arrive .9s cubic-bezier(.2,.9,.25,1.25) .1s forwards; }

.capsule-half {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  overflow: hidden;
  transition: transform .8s cubic-bezier(.17,.87,.23,1.2), opacity .5s ease .45s;
}

.capsule-half::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 200%;
  left: 0;
  border: 7px solid rgba(69,40,98,.19);
  border-radius: 50%;
  box-sizing: border-box;
  box-shadow: inset -18px -22px rgba(38,27,91,.12), inset 12px 14px rgba(255,255,255,.22);
}

.capsule-top { top: 0; }
.capsule-top::before { top: 0; background: var(--reveal-color); }
.capsule-bottom { bottom: 0; }
.capsule-bottom::before { bottom: 0; background: #fff0dd; }

.capsule-half span {
  position: absolute;
  z-index: 2;
  border-radius: 50%;
  background: rgba(255,255,255,.62);
}
.capsule-top span { width: 22px; height: 14px; left: 39px; top: 31px; transform: rotate(-28deg); }
.capsule-bottom span { width: 15px; height: 9px; left: 40px; bottom: 24px; opacity: .5; transform: rotate(-20deg); }

.capsule-seam {
  position: absolute;
  left: -2%;
  top: calc(50% - 8px);
  z-index: 4;
  width: 104%;
  height: 17px;
  border: 4px solid rgba(62,39,94,.18);
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 -4px rgba(117,95,143,.11);
  transition: opacity .3s ease .3s, transform .5s ease;
}

.big-capsule.is-opening {
  animation: capsule-pop .5s ease-out both;
}
.big-capsule.is-opening .capsule-top { transform: translate(-30px, -115px) rotate(-24deg); opacity: 0; }
.big-capsule.is-opening .capsule-bottom { transform: translate(28px, 112px) rotate(19deg); opacity: 0; }
.big-capsule.is-opening .capsule-seam { opacity: 0; transform: scale(1.8); }

.spark-field {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  z-index: 2;
  pointer-events: none;
}

.spark {
  --angle: 0deg;
  --distance: 180px;
  --delay: 0s;
  --size: 8px;
  position: absolute;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: #fff7a8;
  box-shadow: 0 0 11px #ffdb4a;
  opacity: 0;
  transform: rotate(var(--angle)) translateX(0) scale(.2);
}

.spark.is-live { animation: spark-burst 1s ease-out var(--delay) forwards; }

.result-card {
  position: absolute;
  z-index: 5;
  width: min(390px, calc(100% - 38px));
  padding: 29px 28px 25px;
  border: 2px solid rgba(255,255,255,.3);
  border-radius: 31px;
  color: var(--ink);
  background: linear-gradient(160deg, #fffdf3, #ffedbd);
  box-shadow: 0 28px 70px rgba(14,9,52,.48), inset 0 2px rgba(255,255,255,.8);
  text-align: center;
  opacity: 0;
  transform: translateY(30px) scale(.78);
  pointer-events: none;
}

.result-card.is-visible {
  animation: result-in .7s cubic-bezier(.15,.9,.2,1.18) forwards;
  pointer-events: auto;
}

.result-card.is-lose {
  background: linear-gradient(160deg, #fffdf6, #e8e4ff);
}

.result-icon {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  margin: -66px auto 12px;
  border: 7px solid #fff9e3;
  border-radius: 50%;
  color: #804900;
  background: linear-gradient(145deg, #ffe268, #ffb81d);
  box-shadow: 0 8px 0 #d36b21, 0 15px 30px rgba(116,68,23,.26);
  font-size: 34px;
}

.result-card.is-lose .result-icon {
  color: #4a426c;
  background: linear-gradient(145deg, #e9e6ff, #bbb5e9);
  box-shadow: 0 8px 0 #7f75bb, 0 15px 30px rgba(51,42,100,.22);
}

.result-kicker {
  margin: 0;
  color: #9b6881;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.result-card h2 {
  margin: 4px 0 2px;
  color: #e72f70;
  font-family: "Baloo 2", cursive;
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
}

.result-card.is-lose h2 { color: #665da1; }

.result-card > p:not(.result-kicker) {
  margin: 5px auto 16px;
  color: #665675;
  font-size: 13px;
  line-height: 1.5;
}

.prize-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 165px;
  min-height: 36px;
  padding: 8px 16px;
  border: 2px solid #ffcc48;
  border-radius: 999px;
  color: #82540b;
  background: #fff4bd;
  font-family: "Baloo 2", cursive;
  font-weight: 800;
}

.result-card.is-lose .prize-pill { border-color: #cac3ef; color: #625a8e; background: #efedff; }

.play-again {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 13px 20px 11px;
  border: 0;
  border-radius: 16px;
  color: white;
  background: linear-gradient(#ff5c97, #e82e70);
  box-shadow: 0 7px 0 #aa245d, 0 12px 20px rgba(178,31,96,.2);
  font-family: "Baloo 2", cursive;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease;
}

.play-again:hover { transform: translateY(-2px); box-shadow: 0 9px 0 #aa245d, 0 15px 25px rgba(178,31,96,.25); }
.play-again:active { transform: translateY(5px); box-shadow: 0 2px 0 #aa245d; }
.play-again:focus-visible { outline: 4px solid #6658c2; outline-offset: 3px; }

.confetti-layer {
  position: fixed;
  inset: 0;
  z-index: 70;
  overflow: hidden;
  pointer-events: none;
}

.confetti {
  --x: 0px;
  --fall: 100vh;
  --rot: 500deg;
  --delay: 0s;
  position: absolute;
  top: -22px;
  left: var(--x);
  width: 10px;
  height: 17px;
  border-radius: 2px;
  background: var(--confetti-color);
  opacity: 0;
  animation: confetti-fall 2.8s cubic-bezier(.13,.71,.34,1) var(--delay) forwards;
}

@keyframes capsule-enter {
  from { opacity: 0; filter: brightness(1.45); }
  to { opacity: 1; filter: brightness(1); }
}

@keyframes machine-rattle {
  0%,100% { transform: translate(0,0) rotate(0); }
  25% { transform: translate(-3px,1px) rotate(-.7deg); }
  50% { transform: translate(2px,-2px) rotate(.5deg); }
  75% { transform: translate(3px,2px) rotate(.8deg); }
}
@keyframes light-flash { from { filter: brightness(.65); } to { filter: brightness(1.5); box-shadow: 0 0 19px #ffe76c; } }
@keyframes handle-turn {
  0% { transform: rotate(-38deg); }
  100% { transform: rotate(322deg); }
}
@keyframes handle-bump {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(.94); }
  72% { transform: scale(1.04); }
}
@keyframes mini-drop {
  0% { bottom: 82px; opacity: 0; transform: translateX(-50%) rotate(-120deg) scale(.5); }
  45% { opacity: 1; }
  72% { bottom: 18px; transform: translateX(-50%) rotate(22deg) scale(1); }
  86% { bottom: 10px; transform: translateX(-50%) rotate(-10deg) scale(1); }
  100% { bottom: 13px; opacity: 1; transform: translateX(-50%) rotate(0) scale(1); }
}
@keyframes ring-expand { 0% { opacity: 0; transform: scale(.15); } 35% { opacity: .9; } 100% { opacity: 0; transform: scale(1.45); } }
@keyframes capsule-arrive {
  0% { opacity: 0; transform: translateY(-80px) scale(.25) rotate(-32deg); }
  68% { opacity: 1; transform: translateY(9px) scale(1.08) rotate(7deg); }
  82% { transform: translateY(-5px) scale(.98) rotate(-3deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes capsule-ready-float {
  0%, 100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
  50% { opacity: 1; transform: translateY(-9px) scale(1.035) rotate(2deg); }
}

@keyframes open-prompt-hover {
  0%, 100% { transform: translate(-50%, 0) scale(1); }
  50% { transform: translate(-50%, -7px) scale(1.025); }
}

@keyframes capsule-pop {
  0% { filter: drop-shadow(0 22px 25px rgba(17,13,56,.37)); }
  25% { transform: scale(.9); }
  55% { filter: drop-shadow(0 0 35px #fff) drop-shadow(0 0 80px #ffe457); transform: scale(1.16); }
  100% { filter: drop-shadow(0 0 65px #fff) drop-shadow(0 0 110px #ffe457); transform: scale(1); }
}
@keyframes spark-burst {
  0% { opacity: 0; transform: rotate(var(--angle)) translateX(0) scale(.2); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--angle)) translateX(var(--distance)) scale(1.3); }
}
@keyframes result-in {
  0% { opacity: 0; transform: translateY(35px) scale(.72) rotate(-2deg); }
  72% { opacity: 1; transform: translateY(-5px) scale(1.03) rotate(.5deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes confetti-fall {
  0% { opacity: 1; transform: translate3d(0,-20px,0) rotate(0); }
  100% { opacity: 0; transform: translate3d(calc((var(--x) - 50vw) * -.16), var(--fall), 0) rotate(var(--rot)); }
}

@media (max-width: 700px) {
  .app-shell { width: min(100% - 20px, 590px); padding-top: 12px; }
  .topbar { padding-bottom: 14px; }
  .brand-mark { width: 39px; height: 39px; border-radius: 13px; }
  .brand strong { font-size: 16px; }
  .stats div { min-width: 58px; padding: 7px 8px; }
  .hero-copy { margin-top: 3px; }
  .hero-copy > p:last-child { font-size: 12px; }
  .game-stage { min-height: 586px; padding-top: 20px; }
  .machine-wrap { width: 430px; height: 494px; transform: scale(.86); transform-origin: top center; margin-bottom: -68px; }
  .machine { left: 22px; }
  .status-card { margin-top: 0; }
}

@media (max-width: 430px) {
  .brand small { display: none; }
  .stats div:first-child { display: none; }
  .hero-copy h1 { font-size: 34px; }
  .hero-copy > p:last-child { max-width: 340px; }
  .game-stage { min-height: 535px; }
  .machine-wrap { transform: scale(.73); margin-bottom: -135px; }
  .status-card { min-width: 286px; }
  .keyboard-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* ========================================================================== 
   GASHAPON casino UI layer
   ========================================================================== */
:root {
  --casino-black: #090004;
  --casino-red: #9d001f;
  --casino-red-bright: #ef1747;
  --casino-gold: #ffc733;
  --casino-gold-deep: #b96505;
  --casino-cream: #fff4d4;
  --casino-panel: rgba(25, 2, 10, .82);
}

body {
  min-height: 100svh;
  color: var(--casino-cream);
  background:
    radial-gradient(circle at 50% 42%, rgba(190, 9, 46, .38), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(255, 157, 0, .14), transparent 42%),
    linear-gradient(180deg, #170007 0%, #080003 58%, #020001 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .18;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.casino-scene {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.casino-rays {
  position: absolute;
  left: 50%;
  top: 51%;
  width: max(145vw, 145vh);
  aspect-ratio: 1;
  opacity: .42;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(220, 13, 54, .45) 0deg 8deg,
    rgba(255, 182, 28, .055) 8deg 16deg
  );
  mask-image: radial-gradient(circle, #000 0 19%, rgba(0,0,0,.92) 36%, transparent 72%);
  transform: translate(-50%, -50%);
  animation: casino-ray-spin 42s linear infinite;
}

.casino-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 43%, transparent 0 28%, rgba(5,0,2,.35) 66%, rgba(0,0,0,.88) 100%),
    linear-gradient(90deg, rgba(0,0,0,.45), transparent 22% 78%, rgba(0,0,0,.45));
}

.casino-grid {
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: -31vh;
  height: 62vh;
  opacity: .24;
  background-image:
    linear-gradient(rgba(255, 198, 54, .27) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 198, 54, .25) 1px, transparent 1px);
  background-size: 55px 55px;
  transform: perspective(440px) rotateX(67deg);
  transform-origin: center top;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 55%, transparent 94%);
}

.ambient-sparkles {
  position: absolute;
  inset: 0;
  opacity: .46;
  background-image:
    radial-gradient(circle, #fff6bb 0 1px, transparent 2px),
    radial-gradient(circle, #ffc733 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.9) 0 1px, transparent 1.8px);
  background-position: 18px 29px, 71px 87px, 131px 18px;
  background-size: 143px 151px, 197px 181px, 229px 207px;
  animation: sparkle-drift 18s linear infinite;
}

.coin-rain {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.falling-coin {
  --coin-left: 50%;
  --coin-size: 34px;
  --coin-duration: 12s;
  --coin-delay: 0s;
  --coin-drift: 0px;
  --coin-spin: 900deg;
  position: absolute;
  left: var(--coin-left);
  top: -12vh;
  display: grid;
  place-items: center;
  width: var(--coin-size);
  aspect-ratio: 1;
  border: max(2px, calc(var(--coin-size) * .08)) solid #ffdd68;
  border-radius: 50%;
  color: #7b3500;
  background:
    radial-gradient(circle at 35% 28%, #fff5a4 0 7%, transparent 8%),
    linear-gradient(145deg, #ffe86c, #ffad12 67%, #c76a00);
  box-shadow:
    inset 0 0 0 max(2px, calc(var(--coin-size) * .07)) rgba(173,79,0,.34),
    0 0 18px rgba(255, 187, 37, .3);
  font-family: "Baloo 2", sans-serif;
  font-size: calc(var(--coin-size) * .42);
  font-style: normal;
  font-weight: 800;
  opacity: 0;
  animation: coin-fall var(--coin-duration) linear var(--coin-delay) infinite;
}

.site-nav {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: 12px clamp(18px, 4vw, 56px);
  border-bottom: 1px solid rgba(255, 201, 58, .24);
  background:
    linear-gradient(180deg, rgba(31, 2, 11, .95), rgba(14, 0, 5, .82)),
    repeating-linear-gradient(90deg, transparent 0 26px, rgba(255,255,255,.018) 26px 27px);
  box-shadow: 0 12px 50px rgba(0,0,0,.34), inset 0 -1px rgba(255,255,255,.04);
  backdrop-filter: blur(18px) saturate(1.25);
}

.site-nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #ffbd25 18%, #f02d4e 50%, #ffbd25 82%, transparent);
  box-shadow: 0 0 16px rgba(255, 188, 36, .46);
}

.brand {
  gap: 11px;
  min-width: 0;
}

.brand-token {
  position: relative;
  display: grid;
  place-items: center;
  width: 47px;
  height: 47px;
  flex: 0 0 auto;
  border: 2px solid #ffe384;
  border-radius: 50%;
  color: #721023;
  background: linear-gradient(145deg, #fff0a3, #ffb213 58%, #bd5900);
  box-shadow: inset 0 0 0 4px rgba(159,70,0,.25), 0 5px 0 #6e170c, 0 0 24px rgba(255, 195, 50, .23);
  font-family: "Baloo 2", sans-serif;
  font-size: 22px;
  font-weight: 800;
  transform: rotate(-8deg);
}

.brand-token::after {
  content: "★";
  position: absolute;
  right: -4px;
  top: -6px;
  color: #fff4a1;
  font-size: 13px;
  text-shadow: 0 0 8px #ffcd3d;
}

.brand-copy { min-width: 0; }
.brand-copy strong,
.brand-copy small { display: block; }
.brand-copy strong {
  color: #fff7dc;
  font-family: "Baloo 2", sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: .92;
  text-shadow: 0 2px 0 #8d1026, 0 0 17px rgba(255, 53, 89, .32);
}
.brand-copy small {
  margin-top: 5px;
  color: #f6bd41;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  white-space: nowrap;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.stats {
  display: flex;
  gap: 7px;
}

.stats div {
  min-width: 62px;
  padding: 6px 11px 5px;
  border: 1px solid rgba(255, 201, 61, .18);
  border-radius: 12px;
  background: rgba(255, 214, 91, .045);
  box-shadow: inset 0 1px rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
}

.stats span {
  color: #fff5cf;
  font-size: 18px;
}

.stats small {
  color: rgba(255, 204, 74, .66);
  font-size: 8px;
}

.wallet-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 164px;
  min-height: 45px;
  padding: 10px 17px 9px;
  border: 1px solid #ffe07d;
  border-radius: 13px;
  color: #3f1104;
  background: linear-gradient(180deg, #ffe27a, #ffb51d 70%, #d47400);
  box-shadow: inset 0 2px rgba(255,255,255,.55), 0 5px 0 #751710, 0 10px 25px rgba(0,0,0,.28), 0 0 24px rgba(255, 186, 30, .12);
  font-family: "Baloo 2", sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .07em;
  cursor: pointer;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}

.wallet-button:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: inset 0 2px rgba(255,255,255,.6), 0 7px 0 #751710, 0 14px 30px rgba(0,0,0,.3), 0 0 28px rgba(255, 186, 30, .2);
}

.wallet-button:active {
  transform: translateY(4px);
  box-shadow: inset 0 2px rgba(255,255,255,.45), 0 1px 0 #751710, 0 5px 12px rgba(0,0,0,.2);
}

.wallet-button:focus-visible {
  outline: 3px solid white;
  outline-offset: 4px;
}

.wallet-led {
  width: 9px;
  height: 9px;
  border: 2px solid rgba(79,31,0,.35);
  border-radius: 50%;
  background: #9d5410;
  box-shadow: inset 0 1px rgba(255,255,255,.2);
}

.wallet-button.is-connected {
  color: #eafff8;
  border-color: #5ff0ba;
  background: linear-gradient(180deg, #186b52, #0d4938);
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 5px 0 #052b20, 0 0 24px rgba(65, 235, 173, .18);
}
.wallet-button.is-connected .wallet-led {
  border-color: #d9fff1;
  background: #67f2bd;
  box-shadow: 0 0 12px #67f2bd;
}
.wallet-button.needs-attention { animation: wallet-attention .62s ease both; }

.app-shell {
  width: 100%;
  min-height: 100svh;
  margin: 0;
  padding: 76px 0 0;
}

.game-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: calc(100svh - 76px);
  padding: 50px 20px 42px;
  overflow: hidden;
}

.stage-title {
  position: absolute;
  left: 50%;
  top: clamp(20px, 4vh, 46px);
  z-index: 0;
  width: min(930px, 94vw);
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
}

.stage-title span {
  display: block;
  margin-bottom: -7px;
  color: rgba(255, 207, 75, .72);
  font-size: clamp(8px, 1vw, 12px);
  font-weight: 800;
  letter-spacing: .55em;
  text-indent: .55em;
}

.stage-title strong {
  display: block;
  color: rgba(255, 245, 210, .075);
  font-family: "Baloo 2", sans-serif;
  font-size: clamp(64px, 12vw, 154px);
  font-weight: 800;
  letter-spacing: .07em;
  line-height: .82;
  text-indent: .07em;
  -webkit-text-stroke: 1px rgba(255, 205, 70, .12);
  text-shadow: 0 0 50px rgba(239, 18, 61, .24);
}

.spotlight {
  top: 50%;
  left: 50%;
  width: min(780px, 95vw);
  height: min(680px, 90vh);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 225, 132, .18) 0, rgba(226, 27, 65, .12) 38%, transparent 71%);
  filter: blur(2px);
  transform: translate(-50%, -48%);
}

.stage-platform {
  position: absolute;
  left: 50%;
  top: calc(50% + 245px);
  z-index: 1;
  width: min(600px, 90vw);
  height: 82px;
  border: 1px solid rgba(255, 196, 45, .22);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 188, 29, .22), rgba(190, 13, 45, .12) 44%, transparent 72%);
  box-shadow: 0 0 45px rgba(255, 173, 20, .12);
  transform: translateX(-50%);
  filter: blur(2px);
}

.machine-wrap {
  z-index: 3;
  width: 510px;
  height: 565px;
  margin: 0;
  filter:
    drop-shadow(0 35px 25px rgba(0,0,0,.54))
    drop-shadow(0 0 26px rgba(255, 194, 50, .12));
}

.machine-top {
  border-color: #f3b429;
  background: linear-gradient(#f02d59, #b6002e);
  box-shadow: inset 0 6px rgba(255,255,255,.18), 0 9px 0 #65061c, 0 0 26px rgba(255, 45, 89, .2);
}

.light-row i {
  border-color: #9b3e08;
  background: #ffe15e;
  box-shadow: inset -3px -3px rgba(255,140,0,.18), 0 0 15px rgba(255,220,75,.65);
}

.machine-logo {
  border-color: #9a061f;
  color: #6f071a;
  background: linear-gradient(180deg, #fff6c8, #ffc83e);
  box-shadow: 0 5px 0 rgba(95,0,22,.45), 0 0 18px rgba(255, 214, 69, .28);
  letter-spacing: .08em;
}
.machine-logo span { color: #c90032; }

.dial-copy {
  color: #74142a;
  background: rgba(255,248,222,.72);
}

.dial-panel:not(:disabled) .dial-ring {
  animation: dial-idle-glow 2.2s ease-in-out infinite;
}

.play-prompt {
  position: absolute;
  left: 50%;
  bottom: clamp(12px, 2.2vh, 27px);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 35px;
  padding: 7px 15px 6px;
  border: 1px solid rgba(255, 208, 82, .26);
  border-radius: 999px;
  color: rgba(255, 236, 181, .86);
  background: rgba(22, 1, 8, .68);
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 10px 28px rgba(0,0,0,.24);
  font-family: "Baloo 2", sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  transform: translateX(-50%);
  backdrop-filter: blur(12px);
}

.play-prompt[data-mode="locked"] .prompt-lock {
  color: #ffbd2f;
  animation: prompt-pulse 1.7s ease-in-out infinite;
}
.play-prompt[data-mode="ready"] {
  border-color: rgba(88, 241, 185, .34);
  color: #baffdf;
}
.play-prompt[data-mode="ready"] .prompt-lock { color: #59efb9; }
.play-prompt[data-mode="active"] {
  color: #fff0a2;
  border-color: rgba(255, 211, 76, .48);
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 0 24px rgba(255, 181, 30, .12);
}

.reveal-backdrop {
  background:
    radial-gradient(circle at center, rgba(225, 23, 61, .78), rgba(71, 0, 19, .96) 54%, rgba(8,0,3,.98) 82%);
}

.magic-ring {
  border-color: rgba(255, 220, 111, .28);
  box-shadow: 0 0 55px rgba(255, 198, 56, .2), inset 0 0 55px rgba(255, 55, 91, .12);
}

.result-card {
  border-color: rgba(255, 214, 92, .58);
  color: #3d0a16;
  background:
    linear-gradient(160deg, rgba(255,255,255,.82), transparent 30%),
    linear-gradient(160deg, #fff9df, #ffd86b);
  box-shadow: 0 28px 80px rgba(0,0,0,.56), 0 0 55px rgba(255, 190, 40, .16), inset 0 2px rgba(255,255,255,.9);
}
.result-card.is-lose {
  background: linear-gradient(160deg, #fff6e6, #e9c6c7);
}
.result-card h2 { color: #c50032; }
.result-card.is-lose h2 { color: #5e2836; }

.play-again {
  background: linear-gradient(#ed3158, #a7002b);
  box-shadow: 0 7px 0 #5f0019, 0 12px 20px rgba(117,0,30,.25);
}
.play-again:hover { box-shadow: 0 9px 0 #5f0019, 0 15px 25px rgba(117,0,30,.3); }
.play-again:active { box-shadow: 0 2px 0 #5f0019; }

/* Wallet modal */
.modal-layer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 18px;
  visibility: hidden;
  opacity: 0;
  transition: opacity .25s ease, visibility .25s;
}

.modal-layer.is-visible {
  visibility: visible;
  opacity: 1;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(4, 0, 2, .76);
  backdrop-filter: blur(11px);
  cursor: default;
}

.wallet-modal {
  position: relative;
  z-index: 1;
  width: min(438px, 100%);
  max-height: min(720px, calc(100svh - 36px));
  overflow-y: auto;
  padding: 31px 27px 23px;
  border: 1px solid rgba(255, 215, 99, .4);
  border-radius: 26px;
  color: #fff4d7;
  background:
    radial-gradient(circle at 50% -5%, rgba(255, 67, 96, .18), transparent 34%),
    linear-gradient(160deg, rgba(49, 3, 16, .98), rgba(14, 0, 5, .99));
  box-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 5px rgba(255, 200, 55, .045), inset 0 1px rgba(255,255,255,.08);
  text-align: center;
  transform: translateY(22px) scale(.96);
  transition: transform .28s cubic-bezier(.2,.85,.25,1.12);
}

.modal-layer.is-visible .wallet-modal { transform: translateY(0) scale(1); }

.wallet-modal::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 202, 55, .09);
  border-radius: 19px;
  pointer-events: none;
}

.modal-close {
  position: absolute;
  right: 15px;
  top: 14px;
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.055);
  font-size: 23px;
  line-height: 1;
  cursor: pointer;
}
.modal-close:hover { color: white; background: rgba(255,255,255,.1); }
.modal-close:focus-visible { outline: 3px solid #ffcf48; outline-offset: 2px; }

.modal-emblem {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 13px;
  border: 3px solid #ffe17e;
  border-radius: 50%;
  color: #721023;
  background: linear-gradient(145deg, #fff1a7, #ffb313 65%, #b95500);
  box-shadow: inset 0 0 0 5px rgba(133,52,0,.25), 0 8px 0 #6c0d18, 0 0 30px rgba(255, 194, 44, .2);
  font-family: "Baloo 2", sans-serif;
  font-size: 29px;
  font-weight: 800;
}

.modal-kicker {
  margin: 0;
  color: #f6bd41;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .24em;
}

.wallet-modal h2 {
  margin: 4px 0 5px;
  color: #fff8df;
  font-family: "Baloo 2", sans-serif;
  font-size: 29px;
  line-height: 1.1;
}

.modal-copy {
  max-width: 350px;
  margin: 0 auto 17px;
  color: rgba(255, 239, 215, .61);
  font-size: 12px;
  line-height: 1.55;
}

.wallet-notice {
  margin: 0 0 13px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 194, 43, .28);
  border-radius: 12px;
  color: #ffe69a;
  background: rgba(255, 184, 29, .075);
  font-size: 11px;
  line-height: 1.45;
  text-align: left;
}

.wallet-list {
  display: grid;
  gap: 9px;
}

.wallet-option {
  position: relative;
  display: grid;
  grid-template-columns: 43px 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 61px;
  padding: 9px 13px;
  border: 1px solid rgba(255, 214, 99, .15);
  border-radius: 15px;
  color: #fff4db;
  background: linear-gradient(90deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.wallet-option:hover {
  border-color: rgba(255, 207, 71, .52);
  background: linear-gradient(90deg, rgba(255, 194, 50, .12), rgba(255, 38, 78, .07));
  transform: translateY(-2px);
}
.wallet-option:focus-visible { outline: 3px solid #ffcf48; outline-offset: 2px; }
.wallet-option:disabled { cursor: wait; opacity: .55; transform: none; }

.wallet-option img,
.wallet-fallback-icon {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background: linear-gradient(145deg, #ffe27a, #f02e58);
  object-fit: cover;
}

.wallet-fallback-icon {
  color: #3f0714;
  font-family: "Baloo 2", sans-serif;
  font-size: 21px;
  font-weight: 800;
}

.wallet-option-copy strong,
.wallet-option-copy small { display: block; }
.wallet-option-copy strong { font-family: "Baloo 2", sans-serif; font-size: 15px; line-height: 1.1; }
.wallet-option-copy small { margin-top: 4px; color: rgba(255, 235, 211, .46); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.wallet-option-arrow { color: #f4be40; font-size: 25px; }

.wallet-option.is-loading::after {
  content: "";
  position: absolute;
  right: 16px;
  width: 17px;
  height: 17px;
  border: 2px solid rgba(255,255,255,.18);
  border-top-color: #ffd459;
  border-radius: 50%;
  animation: modal-spinner .7s linear infinite;
}
.wallet-option.is-loading .wallet-option-arrow { opacity: 0; }

.wallet-empty {
  padding: 17px 14px;
  border: 1px dashed rgba(255, 215, 94, .2);
  border-radius: 15px;
  color: rgba(255, 239, 216, .56);
  background: rgba(255,255,255,.025);
}
.wallet-empty strong,
.wallet-empty span { display: block; }
.wallet-empty strong { color: #fff1c8; font-family: "Baloo 2", sans-serif; font-size: 14px; }
.wallet-empty span { margin-top: 3px; font-size: 10px; line-height: 1.5; }

.retry-wallets {
  margin-top: 12px;
  padding: 7px 11px;
  border: 0;
  color: #f5c553;
  background: transparent;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.wallet-footnote {
  margin: 12px 0 0;
  color: rgba(255, 239, 218, .39);
  font-size: 9px;
  line-height: 1.4;
}

.connected-wallet {
  display: grid;
  grid-template-columns: 41px 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 13px;
  border: 1px solid rgba(91, 239, 183, .31);
  border-radius: 16px;
  background: rgba(62, 232, 168, .07);
  text-align: left;
}

.connected-check {
  display: grid;
  place-items: center;
  width: 41px;
  height: 41px;
  border-radius: 50%;
  color: #072a1e;
  background: #5ce9b5;
  box-shadow: 0 0 20px rgba(92, 233, 181, .2);
  font-weight: 900;
}
.connected-wallet small,
.connected-wallet strong,
.connected-wallet code { display: block; }
.connected-wallet small { color: #75e9bd; font-size: 8px; letter-spacing: .1em; }
.connected-wallet strong { margin-top: 2px; font-family: "Baloo 2", sans-serif; font-size: 15px; }
.connected-wallet code { margin-top: 1px; color: rgba(230,255,246,.58); font-size: 10px; }
.connected-wallet button {
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 9px;
  color: #ffd6da;
  background: rgba(255, 52, 85, .1);
  font-size: 9px;
  cursor: pointer;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 130;
  max-width: min(430px, calc(100% - 32px));
  padding: 11px 16px;
  border: 1px solid rgba(255, 215, 105, .25);
  border-radius: 13px;
  color: #fff2d3;
  background: rgba(30, 2, 10, .94);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  font-size: 11px;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 18px);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  backdrop-filter: blur(15px);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast[data-type="success"] { border-color: rgba(88, 236, 181, .4); color: #c7ffe9; }
.toast[data-type="error"] { border-color: rgba(255, 73, 103, .48); color: #ffd7de; }

@keyframes casino-ray-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes sparkle-drift {
  to { background-position: 161px 180px, -126px 268px, 360px -189px; }
}
@keyframes coin-fall {
  0% { opacity: 0; transform: translate3d(0, -12vh, 0) rotateY(0deg) rotateZ(0deg); }
  8% { opacity: .72; }
  88% { opacity: .56; }
  100% { opacity: 0; transform: translate3d(var(--coin-drift), 124vh, 0) rotateY(var(--coin-spin)) rotateZ(380deg); }
}
@keyframes wallet-attention {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
@keyframes prompt-pulse {
  0%, 100% { opacity: .55; transform: scale(.86); }
  50% { opacity: 1; transform: scale(1.15); text-shadow: 0 0 12px #ffbd2f; }
}
@keyframes dial-idle-glow {
  0%, 100% { box-shadow: inset -7px -8px rgba(85,104,127,.12), 0 7px 0 rgba(178,95,19,.24), 0 0 0 rgba(255, 208, 67, 0); }
  50% { box-shadow: inset -7px -8px rgba(85,104,127,.12), 0 7px 0 rgba(178,95,19,.24), 0 0 24px rgba(255, 208, 67, .38); }
}
@keyframes modal-spinner { to { transform: rotate(360deg); } }

@media (max-width: 700px) {
  .site-nav { min-height: 68px; padding: 10px 13px; }
  .brand-token { width: 41px; height: 41px; font-size: 19px; }
  .brand-copy strong { font-size: 19px; }
  .brand-copy small { font-size: 7px; letter-spacing: .08em; }
  .nav-actions { gap: 8px; }
  .stats { display: none; }
  .wallet-button { min-width: 142px; min-height: 41px; padding: 8px 12px 7px; font-size: 10px; }

  .app-shell { padding-top: 68px; }
  .game-stage { min-height: calc(100svh - 68px); padding: 50px 8px 44px; }
  .stage-title { top: 25px; }
  .stage-title strong { font-size: clamp(59px, 19vw, 98px); }
  .machine-wrap {
    width: 430px;
    height: 494px;
    margin-bottom: -68px;
    transform: scale(.86);
    transform-origin: center center;
  }
  .machine { left: 22px; }
  .stage-platform { top: calc(50% + 220px); }
  .play-prompt { bottom: 13px; }
}

@media (max-width: 450px) {
  .brand-copy small { display: none; }
  .brand-token { width: 38px; height: 38px; }
  .wallet-button { min-width: 126px; font-size: 9px; letter-spacing: .045em; }
  .wallet-led { width: 8px; height: 8px; }
  .game-stage { padding-top: 34px; }
  .stage-title span { display: none; }
  .stage-title strong { font-size: 22vw; }
  .machine-wrap { transform: scale(.73); margin-bottom: -135px; }
  .stage-platform { top: calc(50% + 190px); }
  .play-prompt { width: max-content; max-width: calc(100% - 26px); font-size: 8px; }
  .wallet-modal { padding: 28px 17px 20px; border-radius: 22px; }
  .wallet-modal h2 { font-size: 25px; }
  .wallet-option { grid-template-columns: 39px 1fr auto; padding: 8px 10px; }
  .wallet-option img, .wallet-fallback-icon { width: 39px; height: 39px; }
  .connected-wallet { grid-template-columns: 38px 1fr; }
  .connected-wallet button { grid-column: 1 / -1; width: 100%; }
}

@media (max-height: 720px) and (min-width: 701px) {
  .game-stage { padding-top: 32px; }
  .machine-wrap { transform: scale(.88); margin-top: -18px; margin-bottom: -68px; }
  .stage-title { top: 16px; }
  .play-prompt { bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* UI refinements: navigation, title alignment, and game guide */
[hidden] { display: none !important; }

.nav-primary {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 34px);
  min-width: 0;
}

.nav-menu-button {
  position: relative;
  padding: 10px 3px 8px;
  border: 0;
  color: rgba(255, 240, 202, .78);
  background: transparent;
  font-family: "Baloo 2", sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .09em;
  cursor: pointer;
  transition: color .18s ease, transform .18s ease;
}

.nav-menu-button::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 3px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f02d4e, #ffdc69);
  box-shadow: 0 0 10px rgba(255, 195, 52, .42);
  transition: left .2s ease, right .2s ease;
}

.nav-menu-button:hover { color: #fff5d3; transform: translateY(-1px); }
.nav-menu-button:hover::after,
.nav-menu-button:focus-visible::after { left: 0; right: 0; }
.nav-menu-button:focus-visible { outline: 2px solid #ffcf48; outline-offset: 5px; border-radius: 5px; }

.stage-title {
  width: min(1120px, calc(100vw - 16px));
}

.stage-title strong {
  width: 100%;
  white-space: nowrap;
  text-align: center;
}

.connected-wallet[hidden] { display: none !important; }

.howto-modal {
  position: relative;
  z-index: 1;
  width: min(480px, 100%);
  max-height: min(760px, calc(100svh - 36px));
  overflow-y: auto;
  padding: 31px 27px 25px;
  border: 1px solid rgba(255, 215, 99, .4);
  border-radius: 26px;
  color: #fff4d7;
  background:
    radial-gradient(circle at 50% -5%, rgba(255, 67, 96, .2), transparent 35%),
    linear-gradient(160deg, rgba(49, 3, 16, .985), rgba(14, 0, 5, .995));
  box-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 5px rgba(255, 200, 55, .045), inset 0 1px rgba(255,255,255,.08);
  text-align: center;
  transform: translateY(24px) scale(.94) rotateX(5deg);
  opacity: 0;
  transition: transform .32s cubic-bezier(.2,.85,.25,1.12), opacity .22s ease;
}

.modal-layer.is-visible .howto-modal {
  transform: translateY(0) scale(1) rotateX(0);
  opacity: 1;
}

.howto-modal::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 202, 55, .09);
  border-radius: 19px;
  pointer-events: none;
}

.howto-modal h2 {
  margin: 4px 0 5px;
  color: #fff8df;
  font-family: "Baloo 2", sans-serif;
  font-size: 31px;
  line-height: 1.1;
}

.howto-emblem {
  animation: howto-emblem-float 2.4s ease-in-out infinite;
}

.howto-steps {
  display: grid;
  gap: 10px;
  margin: 18px 0 14px;
  padding: 0;
  list-style: none;
  text-align: left;
}

.howto-steps li {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 13px;
  border: 1px solid rgba(255, 214, 99, .14);
  border-radius: 15px;
  background: linear-gradient(90deg, rgba(255, 194, 50, .085), rgba(255, 38, 78, .035));
  opacity: 0;
  transform: translateY(10px);
}

.modal-layer.is-visible .howto-steps li {
  animation: howto-step-in .38s ease forwards;
}
.modal-layer.is-visible .howto-steps li:nth-child(1) { animation-delay: .08s; }
.modal-layer.is-visible .howto-steps li:nth-child(2) { animation-delay: .15s; }
.modal-layer.is-visible .howto-steps li:nth-child(3) { animation-delay: .22s; }

.step-number {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 2px solid #ffe287;
  border-radius: 50%;
  color: #4f0a17;
  background: linear-gradient(145deg, #fff0a3, #ffb213 64%, #bd5900);
  box-shadow: inset 0 0 0 3px rgba(159,70,0,.2), 0 4px 0 #751710;
  font-family: "Baloo 2", sans-serif;
  font-size: 17px;
  font-weight: 800;
}

.howto-steps strong,
.howto-steps small { display: block; }
.howto-steps strong { color: #fff4d7; font-family: "Baloo 2", sans-serif; font-size: 15px; line-height: 1.15; }
.howto-steps small { margin-top: 3px; color: rgba(255, 239, 215, .56); font-size: 10px; line-height: 1.45; }

.howto-tip {
  margin: 0 0 15px;
  padding: 9px 11px;
  border: 1px solid rgba(255, 198, 55, .19);
  border-radius: 11px;
  color: rgba(255, 229, 157, .8);
  background: rgba(255, 190, 42, .055);
  font-size: 10px;
}
.howto-tip span { color: #ffd559; text-shadow: 0 0 8px rgba(255, 206, 62, .6); }

.howto-ready {
  width: 100%;
  min-height: 45px;
  padding: 10px 16px;
  border: 1px solid #ffe07d;
  border-radius: 12px;
  color: #3f1104;
  background: linear-gradient(180deg, #ffe27a, #ffb51d 70%, #d47400);
  box-shadow: inset 0 2px rgba(255,255,255,.55), 0 5px 0 #751710, 0 10px 25px rgba(0,0,0,.24);
  font-family: "Baloo 2", sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  cursor: pointer;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.howto-ready:hover { filter: brightness(1.08); transform: translateY(-2px); }
.howto-ready:active { transform: translateY(4px); box-shadow: inset 0 2px rgba(255,255,255,.45), 0 1px 0 #751710; }
.howto-ready:focus-visible { outline: 3px solid white; outline-offset: 3px; }

@keyframes howto-step-in {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes howto-emblem-float {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-5px) rotate(3deg); }
}

@media (max-width: 760px) {
  .nav-primary { gap: 12px; }
  .nav-menu-button { font-size: 10px; letter-spacing: .06em; }
  .stage-title { width: calc(100vw - 10px); }
  .stage-title strong { font-size: clamp(54px, 17vw, 98px); letter-spacing: .035em; text-indent: .035em; }
}

@media (max-width: 570px) {
  .brand-copy small { display: none; }
  .nav-primary { gap: 9px; }
  .nav-menu-button { max-width: 62px; padding-inline: 1px; font-size: 9px; line-height: 1.05; }
}

@media (max-width: 430px) {
  .stage-title strong { font-size: clamp(46px, 16.5vw, 72px); letter-spacing: .02em; text-indent: .02em; }
  .howto-modal { padding: 28px 18px 20px; }
  .howto-steps li { grid-template-columns: 38px 1fr; gap: 10px; padding: 10px; }
  .step-number { width: 38px; height: 38px; }
}

@media (max-width: 380px) {
  .site-nav { padding-inline: 8px; }
  .brand { gap: 7px; }
  .brand-token { width: 34px; height: 34px; font-size: 17px; }
  .brand-copy strong { font-size: 16px; letter-spacing: .045em; }
  .nav-primary { gap: 6px; }
  .nav-menu-button { max-width: 54px; font-size: 8px; }
  .wallet-button { min-width: 110px; padding-inline: 8px; }
}


@media (prefers-reduced-motion: reduce) {
  .big-capsule.is-ready-to-open,
  .open-capsule-prompt.is-visible {
    animation: none;
  }
}


/* ==========================================================================
   GASHAPON STOCK LANDING PAGE
   ========================================================================== */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  overflow-x: hidden;
}

.landing-main {
  position: relative;
  z-index: 1;
  padding-top: 76px;
}

.landing-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
  align-items: center;
  gap: clamp(30px, 6vw, 90px);
  width: min(1240px, calc(100% - 42px));
  min-height: calc(100svh - 76px);
  margin: 0 auto;
  padding: clamp(72px, 9vw, 120px) 0 76px;
}

.landing-hero::before {
  content: "";
  position: absolute;
  left: -8%;
  top: 17%;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 45, 78, .16), transparent 68%);
  filter: blur(12px);
  pointer-events: none;
}

.landing-hero-copy {
  position: relative;
  z-index: 3;
  max-width: 660px;
}

.hero-kicker,
.section-heading > p,
.section-heading-split > div > p,
.game-section-heading > p,
.prototype-panel > div:first-child > p {
  margin: 0 0 18px;
  color: #ffc94b;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.hero-live-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffcb40;
  box-shadow: 0 0 15px rgba(255, 203, 64, .75);
}

.hero-live-dot::before {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(255, 203, 64, .55);
  border-radius: 50%;
  animation: hero-live-ping 1.7s ease-out infinite;
}

.landing-hero h1 {
  max-width: 760px;
  margin: 0;
  color: #fff7df;
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: clamp(58px, 7.4vw, 112px);
  font-weight: 900;
  letter-spacing: -.055em;
  line-height: .83;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow: 0 9px 0 rgba(111, 4, 30, .58), 0 0 50px rgba(239, 44, 79, .18);
}

.landing-hero h1 span {
  display: block;
  color: transparent;
  background: linear-gradient(180deg, #fff5ac 0%, #ffc130 53%, #e77b00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 7px 0 rgba(108, 28, 0, .7));
}

.hero-summary {
  max-width: 615px;
  margin: 28px 0 0;
  color: rgba(255, 239, 211, .63);
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.72;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 34px;
}

.hero-primary-button,
.hero-secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 13px 24px 11px;
  border-radius: 14px;
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .09em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.hero-primary-button {
  border: 1px solid #ffe18b;
  color: #431000;
  background: linear-gradient(180deg, #fff09c, #ffc02c 68%, #d86e00);
  box-shadow: inset 0 2px rgba(255,255,255,.62), 0 6px 0 #76170c, 0 16px 34px rgba(0,0,0,.28);
}

.hero-secondary-button {
  border: 1px solid rgba(255, 220, 123, .25);
  color: #fff2d1;
  background: rgba(43, 3, 14, .68);
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 14px 30px rgba(0,0,0,.22);
  backdrop-filter: blur(12px);
}

.hero-primary-button:hover,
.hero-secondary-button:hover {
  transform: translateY(-3px);
  filter: brightness(1.08);
}

.hero-primary-button:active,
.hero-secondary-button:active {
  transform: translateY(2px);
}

.hero-secondary-button.is-connected {
  border-color: rgba(90, 241, 187, .55);
  color: #c9ffea;
  background: rgba(10, 79, 57, .72);
}

.hero-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 38px;
}

.hero-metrics div {
  min-width: 128px;
  padding: 13px 15px 11px;
  border: 1px solid rgba(255, 211, 91, .13);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 207, 68, .07), rgba(255, 35, 77, .025));
  box-shadow: inset 0 1px rgba(255,255,255,.05);
}

.hero-metrics strong,
.hero-metrics span {
  display: block;
}

.hero-metrics strong {
  color: #fff5d3;
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: 25px;
  line-height: 1;
}

.hero-metrics span {
  margin-top: 4px;
  color: rgba(255, 213, 108, .5);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .14em;
}

.landing-hero-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 640px;
  isolation: isolate;
  perspective: 1300px;
}

.hero-market-glow {
  position: absolute;
  width: min(610px, 94%);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 209, 70, .2), rgba(232, 32, 71, .12) 38%, transparent 68%);
  filter: blur(4px);
  animation: hero-glow-breathe 4.8s ease-in-out infinite;
}

.hero-orbit {
  position: absolute;
  width: 500px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 215, 96, .14);
  border-radius: 50%;
  box-shadow: inset 0 0 45px rgba(255, 207, 65, .025);
  transform: rotateX(68deg) rotateZ(-12deg);
}

.hero-orbit::before,
.hero-orbit::after {
  content: "";
  position: absolute;
  width: 10px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffd75a;
  box-shadow: 0 0 18px #ffc62d;
}

.hero-orbit::before {
  left: 11%;
  top: 20%;
}

.hero-orbit::after {
  right: 4%;
  bottom: 27%;
}

.orbit-one {
  animation: hero-orbit-spin 18s linear infinite;
}

.orbit-two {
  width: 390px;
  opacity: .6;
  transform: rotateX(72deg) rotateZ(34deg);
  animation: hero-orbit-spin-reverse 13s linear infinite;
}

.hero-capsule {
  position: relative;
  z-index: 4;
  width: clamp(245px, 25vw, 350px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: drop-shadow(0 44px 38px rgba(0,0,0,.48)) drop-shadow(0 0 35px rgba(255, 199, 56, .18));
  transform: rotate(-8deg);
  animation: hero-capsule-float 4s ease-in-out infinite;
}

.hero-capsule-top,
.hero-capsule-bottom {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  overflow: hidden;
}

.hero-capsule-top {
  top: 0;
  border-radius: 999px 999px 0 0;
  background:
    radial-gradient(circle at 31% 24%, rgba(255,255,255,.9) 0 4%, transparent 5%),
    linear-gradient(145deg, #ff6389, #e80c47 55%, #85021f);
  box-shadow: inset -24px -26px rgba(65, 0, 18, .18), inset 16px 19px rgba(255,255,255,.16);
}

.hero-capsule-bottom {
  bottom: 0;
  display: grid;
  place-items: center;
  border-radius: 0 0 999px 999px;
  color: #59101d;
  background:
    radial-gradient(circle at 29% 26%, rgba(255,255,255,.74) 0 4%, transparent 5%),
    linear-gradient(145deg, #fff9e6, #f5d990 66%, #bd8a36);
  box-shadow: inset -22px -25px rgba(75, 34, 0, .13), inset 14px 18px rgba(255,255,255,.45);
}

.hero-capsule-top strong {
  position: absolute;
  left: 50%;
  top: 52%;
  color: #ffe36f;
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: 82px;
  line-height: 1;
  transform: translate(-50%, -50%);
  text-shadow: 0 5px 0 #811029, 0 0 24px rgba(255, 224, 92, .42);
}

.hero-capsule-bottom span {
  margin-top: -22%;
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .17em;
}

.hero-capsule-seam {
  position: absolute;
  left: -2%;
  top: calc(50% - 11px);
  z-index: 4;
  width: 104%;
  height: 23px;
  border: 5px solid rgba(92, 31, 42, .2);
  border-radius: 999px;
  background: linear-gradient(#fffef6, #ead28f);
  box-shadow: inset 0 -5px rgba(120, 75, 18, .12), 0 5px 10px rgba(67,0,15,.2);
}

.hero-capsule-shine {
  position: absolute;
  left: 23%;
  top: 20%;
  width: 17%;
  height: 11%;
  border-radius: 50%;
  background: rgba(255,255,255,.75);
  transform: rotate(-29deg);
}

.hero-stock-chip {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 13px 8px 8px;
  border: 1px solid rgba(255, 221, 126, .17);
  border-radius: 999px;
  color: #fff1d4;
  background: rgba(35, 2, 12, .76);
  box-shadow: 0 15px 34px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.06);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .08em;
  backdrop-filter: blur(14px);
  animation: stock-chip-float 3.3s ease-in-out infinite;
}

.hero-stock-chip b {
  display: grid;
  place-items: center;
  width: 35px;
  aspect-ratio: 1;
  border-radius: 11px;
  color: #5b1704;
  background: linear-gradient(145deg, #fff1a0, #ffb51e);
  box-shadow: inset 0 1px rgba(255,255,255,.6);
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: 16px;
}

.chip-nvda { left: 2%; top: 19%; }
.chip-aapl { right: 1%; top: 15%; animation-delay: -.7s; }
.chip-tsla { left: 1%; bottom: 19%; animation-delay: -1.3s; }
.chip-coin { right: -1%; bottom: 20%; animation-delay: -2s; }
.chip-spcx { right: 10%; top: 50%; animation-delay: -2.5s; }

.hero-visual-badge {
  position: absolute;
  left: 50%;
  bottom: 4%;
  z-index: 8;
  min-width: 185px;
  padding: 12px 20px 10px;
  border: 1px solid rgba(255, 224, 132, .28);
  border-radius: 16px;
  text-align: center;
  background: linear-gradient(180deg, rgba(53,3,17,.92), rgba(21,0,7,.9));
  box-shadow: 0 18px 40px rgba(0,0,0,.38), 0 0 24px rgba(255, 193, 51, .1);
  transform: translateX(-50%) rotate(2deg);
  backdrop-filter: blur(16px);
}

.hero-visual-badge small,
.hero-visual-badge strong {
  display: block;
}

.hero-visual-badge small {
  color: rgba(255, 215, 103, .6);
  font-size: 8px;
  letter-spacing: .17em;
}

.hero-visual-badge strong {
  margin-top: 3px;
  color: #fff0bd;
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: 18px;
  letter-spacing: .08em;
}

.ticker-marquee {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding: 14px 0 12px;
  border-top: 1px solid rgba(255, 209, 84, .13);
  border-bottom: 1px solid rgba(255, 209, 84, .13);
  background: rgba(18, 0, 6, .72);
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}

.ticker-marquee::before,
.ticker-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 12vw;
  pointer-events: none;
}

.ticker-marquee::before {
  left: 0;
  background: linear-gradient(90deg, #0b0003, transparent);
}

.ticker-marquee::after {
  right: 0;
  background: linear-gradient(-90deg, #0b0003, transparent);
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 35s linear infinite;
}

.ticker-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 18px;
  padding-right: 18px;
}

.ticker-group span {
  color: rgba(255, 242, 214, .72);
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .09em;
}

.ticker-group i {
  color: rgba(255, 192, 45, .42);
  font-style: normal;
  font-size: 9px;
}

.landing-section {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 42px));
  margin: 0 auto;
  padding: clamp(88px, 10vw, 138px) 0;
  scroll-margin-top: 88px;
}

.section-heading {
  max-width: 760px;
  margin-bottom: 48px;
}

.section-heading h2,
.game-section-heading h2,
.prototype-panel h2 {
  margin: 0;
  color: #fff4d3;
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: clamp(38px, 5vw, 67px);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: .98;
  text-wrap: balance;
}

.section-heading > span,
.section-heading-split > span,
.game-section-heading > span {
  display: block;
  margin-top: 20px;
  color: rgba(255, 237, 207, .56);
  font-size: 15px;
  line-height: 1.75;
}

.section-heading-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .65fr);
  align-items: end;
  gap: 50px;
  max-width: none;
}

.section-heading-split > span {
  margin: 0 0 5px;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.project-card {
  position: relative;
  min-height: 310px;
  padding: 28px 26px 25px;
  overflow: hidden;
  border: 1px solid rgba(255, 214, 92, .14);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0, rgba(255, 198, 54, .09), transparent 42%),
    linear-gradient(155deg, rgba(47, 3, 16, .86), rgba(15, 0, 5, .78));
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 28px 70px rgba(0,0,0,.18);
}

.project-card::after {
  content: "";
  position: absolute;
  right: -66px;
  bottom: -66px;
  width: 150px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 203, 63, .13);
  border-radius: 50%;
}

.project-card-featured {
  border-color: rgba(255, 214, 92, .27);
  background:
    radial-gradient(circle at 72% 12%, rgba(255, 214, 77, .16), transparent 33%),
    linear-gradient(145deg, rgba(91, 4, 28, .92), rgba(27, 0, 9, .86));
}

.project-card-number {
  position: absolute;
  right: 20px;
  top: 18px;
  color: rgba(255, 227, 154, .17);
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: 50px;
  font-weight: 900;
}

.project-card-icon,
.flow-icon {
  display: grid;
  place-items: center;
  width: 54px;
  aspect-ratio: 1;
  border: 1px solid #ffe38c;
  border-radius: 18px;
  color: #591007;
  background: linear-gradient(145deg, #fff0a3, #ffb213 64%, #bd5900);
  box-shadow: inset 0 0 0 3px rgba(159,70,0,.2), 0 6px 0 #70180e;
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: 22px;
  font-weight: 900;
}

.project-card h3,
.flow-grid h3 {
  margin: 32px 0 10px;
  color: #fff4d5;
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: 23px;
  line-height: 1.1;
}

.project-card p,
.flow-grid p {
  margin: 0;
  color: rgba(255, 238, 212, .54);
  font-size: 13px;
  line-height: 1.7;
}

.flow-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.flow-grid li {
  position: relative;
  min-height: 320px;
  padding: 25px 22px 22px;
  border: 1px solid rgba(255, 213, 91, .12);
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(43, 2, 14, .78), rgba(13,0,4,.74));
  box-shadow: inset 0 1px rgba(255,255,255,.04);
}

.flow-grid li::after {
  content: "→";
  position: absolute;
  right: -15px;
  top: 50%;
  z-index: 3;
  color: rgba(255, 207, 75, .42);
  font-size: 23px;
  transform: translateY(-50%);
}

.flow-grid li:last-child::after {
  display: none;
}

.flow-number {
  position: absolute;
  right: 18px;
  top: 17px;
  color: rgba(255, 225, 150, .2);
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: 35px;
  font-weight: 900;
}

.flow-grid h3 {
  margin-top: 28px;
}

.flow-grid small {
  display: inline-block;
  margin-top: 18px;
  padding: 6px 9px 5px;
  border: 1px solid rgba(255, 206, 65, .22);
  border-radius: 999px;
  color: #ffd965;
  background: rgba(255, 197, 46, .06);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .12em;
}

.stock-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 11px;
}

.stock-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 92px;
  padding: 15px;
  overflow: hidden;
  border: 1px solid rgba(255, 220, 117, .13);
  border-radius: 17px;
  background:
    radial-gradient(circle at 100% 0, hsl(calc(344 + var(--stock-index) * 13) 78% 45% / .1), transparent 48%),
    rgba(31, 1, 10, .72);
  box-shadow: inset 0 1px rgba(255,255,255,.045);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.stock-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 220, 117, .3);
  background:
    radial-gradient(circle at 100% 0, hsl(calc(344 + var(--stock-index) * 13) 78% 45% / .17), transparent 52%),
    rgba(43, 2, 14, .84);
}

.stock-card-mark {
  display: grid;
  place-items: center;
  width: 46px;
  aspect-ratio: 1;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 238, 184, .5);
  border-radius: 14px;
  color: #4b0d02;
  background: linear-gradient(145deg, #fff3af, #ffb51d);
  box-shadow: inset 0 1px rgba(255,255,255,.65), 0 6px 14px rgba(0,0,0,.18);
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: 20px;
  font-weight: 900;
}

.stock-card strong,
.stock-card small {
  display: block;
}

.stock-card strong {
  color: #fff2d1;
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: 17px;
  letter-spacing: .06em;
}

.stock-card small {
  margin-top: 3px;
  color: rgba(255, 208, 88, .42);
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .12em;
}

.game-section {
  position: relative;
  z-index: 2;
  width: min(1260px, calc(100% - 26px));
  margin: 0 auto;
  padding: 72px 0 40px;
  scroll-margin-top: 84px;
}

.game-section-heading {
  width: min(760px, calc(100% - 28px));
  margin: 0 auto 34px;
  text-align: center;
}

.game-section-heading > span {
  max-width: 610px;
  margin-right: auto;
  margin-left: auto;
}

.game-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 212, 84, .17);
  border-radius: 34px;
  background:
    radial-gradient(circle at 50% 45%, rgba(179, 5, 43, .2), transparent 42%),
    linear-gradient(180deg, rgba(33, 1, 11, .78), rgba(7,0,2,.88));
  box-shadow: 0 45px 110px rgba(0,0,0,.4), inset 0 1px rgba(255,255,255,.05);
}

.game-frame::before {
  content: "";
  position: absolute;
  inset: 11px;
  z-index: 0;
  border: 1px solid rgba(255, 207, 68, .055);
  border-radius: 25px;
  pointer-events: none;
}

.game-frame .game-stage {
  min-height: 790px;
  padding-top: 76px;
  padding-bottom: 55px;
}

.game-frame .stage-title {
  top: 35px;
}

.jackpot-pot {
  position: absolute;
  right: clamp(18px, 6vw, 82px);
  top: 175px;
  z-index: 9;
  width: 205px;
  padding: 19px 18px 16px;
  border: 1px solid rgba(255, 224, 127, .42);
  border-radius: 24px;
  color: #fff2c9;
  background:
    radial-gradient(circle at 50% -20%, rgba(255, 221, 92, .28), transparent 48%),
    linear-gradient(155deg, rgba(86, 5, 27, .96), rgba(23, 0, 8, .95));
  box-shadow:
    0 25px 55px rgba(0,0,0,.42),
    0 0 0 5px rgba(255, 197, 45, .035),
    0 0 35px rgba(255, 187, 28, .14),
    inset 0 1px rgba(255,255,255,.1);
  text-align: center;
  animation: jackpot-float 3.6s ease-in-out infinite;
  backdrop-filter: blur(18px);
}

.jackpot-pot::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px dashed rgba(255, 213, 89, .14);
  border-radius: 17px;
  pointer-events: none;
}

.jackpot-pot-glow {
  position: absolute;
  inset: -28px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 201, 47, .2), transparent 66%);
  animation: jackpot-glow 2.4s ease-in-out infinite;
}

.jackpot-crown {
  width: 48px;
  margin: -44px auto 5px;
  color: #ffe379;
  font-size: 44px;
  line-height: 1;
  text-shadow: 0 0 18px rgba(255, 206, 61, .6);
  transform: rotate(-4deg);
}

.jackpot-label,
.jackpot-pot strong,
.jackpot-pot small {
  display: block;
}

.jackpot-label {
  color: #ffc93f;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .2em;
}

.jackpot-pot strong {
  margin-top: 5px;
  color: #fff8d7;
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: 31px;
  line-height: 1;
  text-shadow: 0 3px 0 #6c0a20;
}

.jackpot-pot small {
  margin-top: 6px;
  color: rgba(255, 225, 145, .46);
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .13em;
}

.jackpot-meter {
  height: 6px;
  margin-top: 13px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.4);
}

.jackpot-meter i {
  display: block;
  width: 68%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #e53556, #ffc631, #fff3a9);
  box-shadow: 0 0 13px rgba(255, 198, 47, .5);
  animation: jackpot-meter-pulse 2s ease-in-out infinite;
}

.jackpot-orbit {
  position: absolute;
  display: grid;
  place-items: center;
  width: 31px;
  aspect-ratio: 1;
  border: 1px solid #ffe594;
  border-radius: 50%;
  color: #6d2800;
  background: linear-gradient(145deg, #fff09e, #ffad12);
  box-shadow: 0 0 18px rgba(255, 192, 42, .3);
  font-style: normal;
  font-weight: 900;
}

.orbit-a {
  left: -18px;
  top: 28px;
  animation: jackpot-coin-a 4s ease-in-out infinite;
}

.orbit-b {
  right: -15px;
  bottom: 22px;
  animation: jackpot-coin-b 3.3s ease-in-out infinite;
}

.prototype-section {
  padding-top: 70px;
}

.prototype-panel {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(340px, 1.1fr);
  gap: clamp(30px, 6vw, 82px);
  padding: clamp(32px, 5vw, 60px);
  border: 1px solid rgba(255, 214, 86, .18);
  border-radius: 30px;
  background:
    linear-gradient(120deg, rgba(98, 6, 31, .72), rgba(22,0,7,.86)),
    radial-gradient(circle at 0 0, rgba(255, 207, 58, .12), transparent 35%);
  box-shadow: 0 32px 90px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.05);
}

.prototype-panel h2 {
  font-size: clamp(34px, 4.2vw, 57px);
}

.prototype-copy {
  display: grid;
  align-content: center;
  gap: 14px;
}

.prototype-copy p {
  margin: 0;
  color: rgba(255, 238, 211, .58);
  font-size: 14px;
  line-height: 1.75;
}

.site-footer {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 48px 20px 56px;
  border-top: 1px solid rgba(255, 207, 71, .11);
  text-align: center;
  background: rgba(5, 0, 2, .48);
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff4d2;
  text-decoration: none;
}

.footer-brand span {
  display: grid;
  place-items: center;
  width: 35px;
  aspect-ratio: 1;
  border-radius: 50%;
  color: #5d1004;
  background: linear-gradient(145deg, #fff1a0, #ffb41d);
  font-family: "Baloo 2", Inter, sans-serif;
  font-weight: 900;
}

.footer-brand strong {
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: 18px;
  letter-spacing: .1em;
}

.site-footer p {
  margin: 4px 0 0;
  color: #ffc948;
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: 15px;
  font-weight: 800;
}

.site-footer small {
  color: rgba(255, 236, 205, .35);
  font-size: 9px;
  letter-spacing: .05em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.5vw, 22px);
}

.nav-links a,
.nav-links .nav-menu-button {
  position: relative;
  padding: 10px 1px 8px;
  border: 0;
  color: rgba(255, 239, 205, .62);
  background: transparent;
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color .18s ease, transform .18s ease;
}

.nav-links a:hover,
.nav-links .nav-menu-button:hover {
  color: #fff4d4;
  transform: translateY(-1px);
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 4px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f02d4e, #ffdc69);
  transition: left .18s ease, right .18s ease;
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after {
  left: 0;
  right: 0;
}

.nav-links .nav-menu-button {
  font-size: 10px;
}

.nav-play-link {
  color: #ffd45b !important;
}

@keyframes hero-live-ping {
  0% { opacity: .8; transform: scale(.4); }
  100% { opacity: 0; transform: scale(1.8); }
}

@keyframes hero-glow-breathe {
  0%, 100% { opacity: .72; transform: scale(.95); }
  50% { opacity: 1; transform: scale(1.04); }
}

@keyframes hero-orbit-spin {
  to { transform: rotateX(68deg) rotateZ(348deg); }
}

@keyframes hero-orbit-spin-reverse {
  to { transform: rotateX(72deg) rotateZ(-326deg); }
}

@keyframes hero-capsule-float {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-16px) rotate(-3deg); }
}

@keyframes stock-chip-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-9px) rotate(2deg); }
}

@keyframes ticker-scroll {
  to { transform: translateX(-50%); }
}

@keyframes jackpot-float {
  0%, 100% { transform: translateY(0) rotate(1.5deg); }
  50% { transform: translateY(-13px) rotate(-1.5deg); }
}

@keyframes jackpot-glow {
  0%, 100% { opacity: .55; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes jackpot-meter-pulse {
  0%, 100% { filter: brightness(.9); }
  50% { filter: brightness(1.3); }
}

@keyframes jackpot-coin-a {
  0%, 100% { transform: translate(0, 0) rotate(-8deg); }
  50% { transform: translate(-8px, -12px) rotate(16deg); }
}

@keyframes jackpot-coin-b {
  0%, 100% { transform: translate(0, 0) rotate(7deg); }
  50% { transform: translate(9px, -10px) rotate(-12deg); }
}

@media (max-width: 1120px) {
  .landing-hero {
    grid-template-columns: minmax(0, 1fr) minmax(380px, .86fr);
  }

  .nav-links a:nth-child(2),
  .nav-links a:nth-child(3) {
    display: none;
  }

  .stock-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .jackpot-pot {
    right: 28px;
    top: 135px;
    transform: scale(.88);
  }
}

@media (max-width: 900px) {
  .landing-main {
    padding-top: 68px;
  }

  .landing-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 82px;
    text-align: center;
  }

  .landing-hero-copy {
    max-width: 760px;
    margin: 0 auto;
  }

  .hero-summary {
    margin-right: auto;
    margin-left: auto;
  }

  .hero-actions,
  .hero-metrics {
    justify-content: center;
  }

  .landing-hero-visual {
    width: min(700px, 100%);
    min-height: 570px;
    margin: -5px auto 0;
  }

  .section-heading-split,
  .prototype-panel {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .section-heading-split > span {
    max-width: 680px;
  }

  .project-grid {
    grid-template-columns: 1fr;
  }

  .project-card {
    min-height: 230px;
  }

  .flow-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .flow-grid li::after {
    display: none;
  }

  .stock-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .game-frame .game-stage {
    min-height: 730px;
  }

  .jackpot-pot {
    top: 116px;
    right: 24px;
    width: 178px;
    padding-inline: 14px;
  }

  .jackpot-pot strong {
    font-size: 26px;
  }
}

@media (max-width: 700px) {
  html {
    scroll-padding-top: 75px;
  }

  .landing-main {
    padding-top: 68px;
  }

  .landing-hero,
  .landing-section {
    width: min(100% - 24px, 650px);
  }

  .landing-hero {
    padding-top: 64px;
    padding-bottom: 56px;
  }

  .landing-hero h1 {
    font-size: clamp(51px, 16vw, 80px);
  }

  .hero-summary {
    font-size: 14px;
  }

  .landing-hero-visual {
    min-height: 485px;
  }

  .hero-orbit {
    width: 390px;
  }

  .orbit-two {
    width: 300px;
  }

  .hero-capsule {
    width: 235px;
  }

  .hero-stock-chip {
    padding: 6px 10px 6px 6px;
    font-size: 9px;
  }

  .hero-stock-chip b {
    width: 29px;
    border-radius: 9px;
    font-size: 13px;
  }

  .chip-nvda { left: 0; top: 18%; }
  .chip-aapl { right: 0; top: 16%; }
  .chip-tsla { left: 0; bottom: 18%; }
  .chip-coin { right: 0; bottom: 19%; }
  .chip-spcx { right: 3%; top: 49%; }

  .section-heading {
    margin-bottom: 34px;
  }

  .section-heading h2,
  .game-section-heading h2 {
    font-size: clamp(35px, 11vw, 52px);
  }

  .flow-grid {
    grid-template-columns: 1fr;
  }

  .flow-grid li {
    min-height: 230px;
  }

  .stock-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stock-card {
    min-height: 82px;
    padding: 11px;
  }

  .stock-card-mark {
    width: 40px;
  }

  .stock-card strong {
    font-size: 14px;
  }

  .game-section {
    width: calc(100% - 12px);
  }

  .game-frame {
    border-radius: 24px;
  }

  .game-frame .game-stage {
    min-height: 650px;
    padding-top: 80px;
  }

  .game-frame .stage-title {
    top: 28px;
  }

  .jackpot-pot {
    top: 92px;
    right: 10px;
    width: 145px;
    padding: 16px 10px 12px;
    border-radius: 18px;
  }

  .jackpot-crown {
    width: 38px;
    margin-top: -35px;
    font-size: 34px;
  }

  .jackpot-label {
    font-size: 7px;
  }

  .jackpot-pot strong {
    font-size: 21px;
  }

  .jackpot-pot small {
    font-size: 6px;
  }

  .nav-links a {
    display: none;
  }

  .nav-links {
    gap: 0;
  }

  .nav-links .nav-menu-button {
    max-width: 68px;
    font-size: 8px;
    line-height: 1.05;
  }
}

@media (max-width: 470px) {
  .landing-hero h1 {
    font-size: clamp(44px, 15.5vw, 65px);
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hero-primary-button,
  .hero-secondary-button {
    width: 100%;
  }

  .hero-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
  }

  .hero-metrics div {
    min-width: 0;
    padding-inline: 8px;
  }

  .hero-metrics strong {
    font-size: 21px;
  }

  .hero-metrics span {
    font-size: 6px;
    letter-spacing: .08em;
  }

  .landing-hero-visual {
    min-height: 420px;
  }

  .hero-orbit {
    width: 315px;
  }

  .orbit-two {
    width: 245px;
  }

  .hero-capsule {
    width: 195px;
  }

  .hero-capsule-top strong {
    font-size: 62px;
  }

  .hero-capsule-bottom span {
    font-size: 10px;
  }

  .chip-spcx {
    display: none;
  }

  .hero-stock-chip {
    transform: scale(.9);
  }

  .project-card {
    padding: 23px 20px;
  }

  .stock-grid {
    gap: 8px;
  }

  .stock-card {
    gap: 8px;
  }

  .stock-card-mark {
    width: 34px;
    border-radius: 10px;
    font-size: 16px;
  }

  .stock-card strong {
    font-size: 12px;
  }

  .stock-card small {
    font-size: 6px;
  }

  .game-frame .game-stage {
    min-height: 590px;
    padding-top: 68px;
  }

  .jackpot-pot {
    top: 78px;
    right: 7px;
    width: 126px;
    animation-duration: 4.2s;
  }

  .jackpot-meter {
    margin-top: 9px;
  }

  .prototype-panel {
    padding: 27px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .ticker-track,
  .hero-live-dot::before,
  .hero-market-glow,
  .hero-orbit,
  .hero-capsule,
  .hero-stock-chip,
  .jackpot-pot,
  .jackpot-pot-glow,
  .jackpot-meter i,
  .jackpot-orbit {
    animation: none !important;
  }
}


/* ==========================================================================
   HERO MACHINE LAYOUT — 2026 REFINEMENT
   ========================================================================== */

body {
  background:
    radial-gradient(circle at 50% -12%, rgba(122, 15, 43, .22), transparent 36%),
    linear-gradient(180deg, #130006 0%, #090003 44%, #120208 100%);
}

.landing-main {
  overflow: hidden;
  background:
    linear-gradient(180deg, transparent 0 34%, rgba(33, 3, 14, .42) 34% 100%);
}

/* The animated scene is now scoped to the hero only. */
.landing-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  grid-template-columns: minmax(0, .88fr) minmax(510px, 1.12fr);
  gap: clamp(18px, 3vw, 52px);
  width: 100%;
  max-width: none;
  min-height: calc(100svh - 76px);
  margin: 0;
  padding:
    clamp(74px, 8vw, 116px)
    max(24px, calc((100vw - 1240px) / 2))
    54px;
  border-bottom: 1px solid rgba(255, 206, 73, .15);
  background:
    radial-gradient(circle at 18% 42%, rgba(127, 7, 38, .34), transparent 34%),
    linear-gradient(120deg, rgba(24, 0, 8, .62), rgba(8, 0, 3, .28));
}

.landing-hero::before {
  left: 3%;
  top: 20%;
  z-index: 1;
  width: 580px;
  height: 580px;
  opacity: .72;
}

.landing-hero-copy,
.landing-hero-machine {
  position: relative;
  z-index: 3;
}

.landing-hero-copy {
  justify-self: end;
  width: min(100%, 625px);
}

.landing-hero .casino-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.landing-hero .casino-rays {
  left: 74%;
  top: 51%;
  width: max(128vw, 128vh);
  opacity: .48;
  mask-image: radial-gradient(
    circle,
    #000 0 15%,
    rgba(0,0,0,.96) 30%,
    rgba(0,0,0,.56) 52%,
    transparent 73%
  );
}

.landing-hero .casino-vignette {
  background:
    radial-gradient(circle at 74% 51%, transparent 0 20%, rgba(10,0,3,.2) 51%, rgba(5,0,2,.74) 100%),
    linear-gradient(90deg, rgba(6,0,2,.62), transparent 31% 78%, rgba(4,0,1,.35));
}

.landing-hero .casino-grid {
  bottom: -35vh;
  opacity: .18;
}

.landing-hero .ambient-sparkles {
  opacity: .36;
}

.landing-hero-machine {
  display: grid;
  place-items: center;
  align-self: stretch;
  min-width: 0;
}

.landing-hero-machine::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 51%;
  z-index: -1;
  width: min(690px, 112%);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 224, 116, .2), rgba(221, 19, 59, .14) 41%, transparent 69%);
  filter: blur(3px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.landing-hero-machine .game-stage {
  min-height: 690px;
  padding: 48px 0 48px;
  overflow: visible;
}

.landing-hero-machine .spotlight {
  width: 650px;
  height: 610px;
  opacity: .56;
}

.landing-hero-machine .machine-wrap {
  transform: scale(.96);
  transform-origin: center center;
}

.landing-hero-machine .stage-platform {
  top: calc(50% + 237px);
  width: min(520px, 92%);
}

.landing-hero-machine .play-prompt {
  bottom: 16px;
}

.landing-hero-machine .jackpot-pot {
  right: -18px;
  top: 128px;
}

.hero-summary {
  max-width: 570px;
}

.hero-metrics {
  max-width: 590px;
}

.hero-metrics div {
  background:
    linear-gradient(145deg, rgba(255, 214, 84, .09), rgba(82, 3, 25, .2));
}

/* Static palette for all sections below the hero. */
.ticker-marquee {
  z-index: 3;
  background:
    linear-gradient(90deg, #170008, #25000c 50%, #170008);
}

.stock-section {
  width: min(1180px, calc(100% - 42px));
  margin-top: clamp(72px, 9vw, 124px);
  margin-bottom: clamp(72px, 9vw, 124px);
  padding: clamp(42px, 6vw, 72px);
  overflow: hidden;
  border: 1px solid rgba(255, 216, 100, .17);
  border-radius: 32px;
  background:
    radial-gradient(circle at 7% 3%, rgba(255, 192, 44, .13), transparent 30%),
    radial-gradient(circle at 100% 100%, rgba(215, 22, 68, .15), transparent 34%),
    linear-gradient(145deg, #2c0614 0%, #160109 54%, #25030e 100%);
  box-shadow:
    0 38px 100px rgba(0,0,0,.25),
    inset 0 1px rgba(255,255,255,.05);
}

.stock-section::before {
  content: "";
  position: absolute;
  inset: 13px;
  border: 1px solid rgba(255, 213, 88, .055);
  border-radius: 23px;
  pointer-events: none;
}

.stock-section .section-heading,
.stock-section .stock-grid {
  position: relative;
  z-index: 1;
}

.stock-card {
  background:
    radial-gradient(circle at 100% 0, hsl(calc(344 + var(--stock-index) * 13) 78% 45% / .11), transparent 48%),
    linear-gradient(145deg, rgba(48, 2, 16, .88), rgba(20, 0, 7, .9));
}

.site-footer {
  background:
    radial-gradient(circle at 50% 0, rgba(126, 12, 42, .18), transparent 55%),
    linear-gradient(180deg, #100005, #060002);
}

/* Remove unused visual-section selectors from the active layout. */
.project-section,
.how-section,
.prototype-section,
.game-section,
.landing-hero-visual {
  display: none !important;
}

@media (max-width: 1120px) {
  .landing-hero {
    grid-template-columns: minmax(0, .82fr) minmax(470px, 1.18fr);
    padding-right: 18px;
    padding-left: 28px;
  }

  .landing-hero h1 {
    font-size: clamp(55px, 7.8vw, 90px);
  }

  .landing-hero-machine .machine-wrap {
    transform: scale(.9);
  }

  .landing-hero-machine .jackpot-pot {
    right: 8px;
    top: 118px;
    transform: scale(.84);
  }
}

@media (max-width: 900px) {
  .landing-hero {
    grid-template-columns: 1fr;
    gap: 18px;
    min-height: auto;
    padding: 82px 20px 32px;
    text-align: center;
  }

  .landing-hero-copy {
    justify-self: center;
    width: min(100%, 760px);
  }

  .landing-hero .casino-rays {
    left: 50%;
    top: 72%;
    width: max(170vw, 150vh);
  }

  .landing-hero .casino-vignette {
    background:
      radial-gradient(circle at 50% 72%, transparent 0 17%, rgba(9,0,3,.17) 46%, rgba(5,0,2,.73) 100%);
  }

  .landing-hero-machine {
    width: min(100%, 720px);
    margin: -10px auto 0;
  }

  .landing-hero-machine .game-stage {
    min-height: 675px;
  }

  .landing-hero-machine .machine-wrap {
    transform: scale(.94);
  }

  .landing-hero-machine .jackpot-pot {
    right: 24px;
    top: 118px;
    transform: scale(.86);
  }

  .stock-section {
    padding: 44px 30px;
  }
}

@media (max-width: 700px) {
  .landing-hero {
    padding: 66px 10px 25px;
  }

  .landing-hero h1 {
    font-size: clamp(48px, 15vw, 76px);
  }

  .landing-hero-machine .game-stage {
    min-height: 600px;
    padding-top: 24px;
    padding-bottom: 38px;
  }

  .landing-hero-machine .machine-wrap {
    width: 430px;
    height: 494px;
    margin-bottom: -68px;
    transform: scale(.82);
  }

  .landing-hero-machine .stage-platform {
    top: calc(50% + 204px);
  }

  .landing-hero-machine .play-prompt {
    bottom: 12px;
  }

  .landing-hero-machine .jackpot-pot {
    top: 86px;
    right: 8px;
    width: 148px;
    transform: scale(.82);
    transform-origin: top right;
  }

  .stock-section {
    width: calc(100% - 18px);
    margin-top: 65px;
    margin-bottom: 65px;
    padding: 36px 18px;
    border-radius: 24px;
  }
}

@media (max-width: 470px) {
  .landing-hero {
    padding-right: 4px;
    padding-left: 4px;
  }

  .landing-hero-copy {
    padding: 0 9px;
  }

  .landing-hero-machine .game-stage {
    min-height: 525px;
    padding-top: 2px;
  }

  .landing-hero-machine .machine-wrap {
    transform: scale(.67);
    margin-bottom: -150px;
  }

  .landing-hero-machine .stage-platform {
    top: calc(50% + 155px);
    width: 90%;
  }

  .landing-hero-machine .play-prompt {
    bottom: 8px;
    max-width: calc(100% - 24px);
  }

  .landing-hero-machine .jackpot-pot {
    top: 55px;
    right: -2px;
    width: 129px;
    transform: scale(.72);
  }

  .stock-section {
    padding: 30px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-hero .casino-rays,
  .landing-hero .ambient-sparkles,
  .landing-hero .falling-coin {
    animation: none !important;
  }
}


/* ==========================================================================
   STOCKLOOT — EXACT HERO RAY CENTER + MECHANICS SECTION
   ========================================================================== */

.landing-hero {
  --ray-center-x: 74%;
  --ray-center-y: 51%;
}

/* JavaScript updates these variables from the actual transformed .machine
   bounding box, keeping the ray origin exact at every responsive size. */
.landing-hero .casino-rays {
  left: var(--ray-center-x) !important;
  top: var(--ray-center-y) !important;
}

.landing-hero .casino-vignette {
  background:
    radial-gradient(
      circle at var(--ray-center-x) var(--ray-center-y),
      transparent 0 20%,
      rgba(10,0,3,.18) 48%,
      rgba(5,0,2,.76) 100%
    ),
    linear-gradient(90deg, rgba(6,0,2,.62), transparent 31% 78%, rgba(4,0,1,.35)) !important;
}

.machine-logo {
  min-width: 194px;
  font-size: 13px;
  letter-spacing: .055em;
}

.brand-copy strong {
  letter-spacing: .075em;
}

.mechanics-section {
  width: min(1180px, calc(100% - 42px));
  margin-top: clamp(76px, 9vw, 126px);
  margin-bottom: 0;
  padding: clamp(45px, 6vw, 76px);
  overflow: hidden;
  border: 1px solid rgba(255, 215, 98, .17);
  border-radius: 32px;
  background:
    radial-gradient(circle at 0 0, rgba(255, 194, 45, .14), transparent 30%),
    radial-gradient(circle at 100% 100%, rgba(219, 27, 72, .13), transparent 34%),
    linear-gradient(145deg, #310817 0%, #18020b 50%, #25030f 100%);
  box-shadow:
    0 38px 100px rgba(0,0,0,.24),
    inset 0 1px rgba(255,255,255,.055);
}

.mechanics-section::before {
  content: "";
  position: absolute;
  inset: 13px;
  border: 1px solid rgba(255, 214, 92, .055);
  border-radius: 23px;
  pointer-events: none;
}

.mechanics-section > * {
  position: relative;
  z-index: 1;
}

.mechanics-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, .72fr);
  align-items: end;
  gap: clamp(28px, 6vw, 74px);
  margin-bottom: 42px;
}

.mechanics-heading > div > p {
  margin: 0 0 17px;
  color: #ffc94b;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .23em;
}

.mechanics-heading h2 {
  max-width: 760px;
  margin: 0;
  color: #fff4d4;
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: clamp(40px, 5vw, 66px);
  font-weight: 900;
  letter-spacing: -.038em;
  line-height: .98;
  text-wrap: balance;
}

.mechanics-intro {
  margin: 0 0 4px;
  color: rgba(255, 238, 211, .59);
  font-size: 14px;
  line-height: 1.78;
}

.mechanics-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 11px;
  margin-bottom: 22px;
  padding: 14px;
  border: 1px solid rgba(255, 218, 106, .11);
  border-radius: 20px;
  background: rgba(15, 0, 5, .38);
}

.mechanics-flow > div {
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-areas:
    "number title"
    "number note";
  column-gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 10px;
}

.mechanics-flow > div > span {
  grid-area: number;
  display: grid;
  place-items: center;
  width: 34px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 229, 151, .55);
  border-radius: 11px;
  color: #591005;
  background: linear-gradient(145deg, #fff0a1, #ffb317);
  font-family: "Baloo 2", Inter, sans-serif;
  font-weight: 900;
  box-shadow: inset 0 1px rgba(255,255,255,.64);
}

.mechanics-flow strong {
  grid-area: title;
  color: #fff1cd;
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: 13px;
  line-height: 1.1;
}

.mechanics-flow small {
  grid-area: note;
  margin-top: 3px;
  overflow: hidden;
  color: rgba(255, 228, 180, .43);
  font-size: 8px;
  line-height: 1.3;
  text-overflow: ellipsis;
}

.mechanics-flow > i {
  color: rgba(255, 207, 70, .35);
  font-style: normal;
  font-size: 17px;
}

.roll-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.roll-card {
  position: relative;
  min-height: 390px;
  padding: 25px 24px 23px;
  overflow: hidden;
  border: 1px solid rgba(255, 216, 99, .14);
  border-radius: 23px;
  background:
    radial-gradient(circle at 100% 0, rgba(255, 202, 49, .08), transparent 39%),
    linear-gradient(155deg, rgba(49, 2, 17, .88), rgba(16, 0, 6, .87));
  box-shadow: inset 0 1px rgba(255,255,255,.045);
}

.roll-card::after {
  content: "";
  position: absolute;
  right: -88px;
  bottom: -100px;
  width: 210px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 207, 65, .08);
  border-radius: 50%;
  pointer-events: none;
}

.roll-card > * {
  position: relative;
  z-index: 1;
}

.roll-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 218, 111, .09);
}

.roll-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: rgba(255, 211, 91, .55);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .15em;
}

.roll-card h3 {
  margin: 0;
  color: #fff4d4;
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: 28px;
  line-height: 1;
}

.roll-card h3 b {
  color: #ffc536;
  font-size: 36px;
}

.roll-stock-count {
  flex: 0 0 auto;
  padding: 7px 9px 6px;
  border: 1px solid rgba(255, 218, 107, .2);
  border-radius: 999px;
  color: #ffdf82;
  background: rgba(255, 197, 43, .055);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .11em;
}

.roll-card > p {
  margin: 19px 0 0;
  color: rgba(255, 238, 212, .56);
  font-size: 13px;
  line-height: 1.7;
}

.roll-card > p strong {
  color: #fff0ba;
}

.roll-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  margin: 18px 0 0;
}

.roll-facts div {
  padding: 12px;
  border: 1px solid rgba(255, 219, 108, .09);
  border-radius: 13px;
  background: rgba(8, 0, 3, .22);
}

.roll-facts dt,
.roll-facts dd {
  margin: 0;
}

.roll-facts dt {
  color: rgba(255, 211, 91, .43);
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.roll-facts dd {
  margin-top: 4px;
  color: #fff0cd;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
}

.probability-block {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 17px;
}

.probability-block div {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 9px;
  min-height: 53px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 215, 94, .1);
  border-radius: 13px;
  background: rgba(10, 0, 4, .27);
}

.probability-block span {
  color: #ffc736;
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: 18px;
  font-weight: 900;
}

.probability-block strong {
  color: rgba(255, 239, 213, .75);
  font-size: 9px;
  line-height: 1.3;
}

.probability-four {
  grid-template-columns: repeat(2, 1fr);
}

.roll-card .roll-adjustment {
  margin-top: 16px;
  padding: 12px 13px;
  border-left: 3px solid #e93256;
  border-radius: 0 10px 10px 0;
  color: rgba(255, 232, 202, .49);
  background: rgba(154, 8, 44, .09);
  font-size: 10px;
  line-height: 1.62;
}

.full-pool-visual {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 20px;
}

.full-pool-visual span {
  padding: 7px 9px 6px;
  border: 1px solid rgba(255, 218, 103, .15);
  border-radius: 9px;
  color: #ffe4a0;
  background: linear-gradient(145deg, rgba(108, 8, 35, .62), rgba(27,0,9,.7));
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .06em;
}

.economy-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin-top: 15px;
}

.economy-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  min-height: 218px;
  padding: 25px;
  border: 1px solid rgba(255, 219, 108, .15);
  border-radius: 23px;
  background:
    linear-gradient(145deg, rgba(68, 4, 23, .86), rgba(19, 0, 7, .9));
  box-shadow: inset 0 1px rgba(255,255,255,.045);
}

.economy-icon {
  display: grid;
  place-items: center;
  width: 69px;
  aspect-ratio: 1;
  border: 1px solid #ffe594;
  border-radius: 21px;
  color: #5a1105;
  background: linear-gradient(145deg, #fff3ae, #ffb51a);
  box-shadow: inset 0 1px rgba(255,255,255,.68), 0 7px 0 #71150c;
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: 22px;
  font-weight: 900;
}

.economy-card span {
  color: #ffc943;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .16em;
}

.economy-card h3 {
  margin: 6px 0 9px;
  color: #fff2cf;
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: 21px;
  line-height: 1.12;
}

.economy-card p {
  margin: 0;
  color: rgba(255, 236, 207, .52);
  font-size: 11px;
  line-height: 1.7;
}

.jackpot-card {
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 203, 49, .13), transparent 34%),
    linear-gradient(145deg, rgba(82, 5, 27, .9), rgba(20, 0, 7, .91));
}

.mechanics-note {
  margin: 16px 0 0;
  padding: 14px 17px;
  border: 1px dashed rgba(255, 215, 94, .17);
  border-radius: 14px;
  color: rgba(255, 229, 183, .48);
  background: rgba(11, 0, 4, .25);
  font-size: 10px;
  line-height: 1.62;
  text-align: center;
}

.stock-section {
  margin-top: 22px;
}

@media (max-width: 1040px) {
  .mechanics-flow {
    grid-template-columns: repeat(4, 1fr);
  }

  .mechanics-flow > i {
    display: none;
  }

  .mechanics-flow > div {
    grid-template-columns: 30px 1fr;
    padding: 8px;
  }
}

@media (max-width: 900px) {
  .mechanics-heading {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .mechanics-intro {
    max-width: 720px;
  }

  .economy-card {
    grid-template-columns: 58px 1fr;
  }

  .economy-icon {
    width: 58px;
    border-radius: 17px;
    font-size: 18px;
  }
}

@media (max-width: 760px) {
  .mechanics-section {
    width: calc(100% - 18px);
    padding: 36px 18px;
    border-radius: 24px;
  }

  .mechanics-heading h2 {
    font-size: clamp(36px, 11vw, 52px);
  }

  .mechanics-flow {
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
  }

  .roll-grid,
  .economy-grid {
    grid-template-columns: 1fr;
  }

  .roll-card {
    min-height: auto;
  }
}

@media (max-width: 500px) {
  .mechanics-section {
    padding: 30px 12px;
  }

  .mechanics-flow {
    grid-template-columns: 1fr;
  }

  .mechanics-flow > div {
    min-height: 63px;
  }

  .roll-card {
    padding: 21px 17px 19px;
  }

  .roll-card header {
    display: grid;
  }

  .roll-stock-count {
    justify-self: start;
  }

  .roll-facts,
  .probability-block,
  .probability-four {
    grid-template-columns: 1fr;
  }

  .economy-card {
    grid-template-columns: 1fr;
    padding: 21px 18px;
  }

  .economy-icon {
    width: 58px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-hero .casino-rays {
    animation: none !important;
  }
}


/* ==========================================================================
   STOCKLOOT — ROLL COMPARISON TABLE + STOCK LOGOS
   ========================================================================== */

.roll-table-wrap {
  position: relative;
  z-index: 1;
  overflow-x: auto;
  margin-top: 4px;
  border: 1px solid rgba(255, 216, 99, .16);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0, rgba(255, 201, 48, .07), transparent 32%),
    linear-gradient(145deg, rgba(45, 2, 16, .91), rgba(15, 0, 5, .91));
  box-shadow:
    inset 0 1px rgba(255,255,255,.045),
    0 24px 60px rgba(0,0,0,.16);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 198, 50, .45) rgba(22, 0, 7, .8);
}

.roll-table {
  width: 100%;
  min-width: 930px;
  border-collapse: collapse;
  color: #fff0cf;
}

.roll-table th,
.roll-table td {
  padding: 20px 18px;
  border-right: 1px solid rgba(255, 219, 108, .08);
  border-bottom: 1px solid rgba(255, 219, 108, .09);
  vertical-align: top;
  text-align: left;
}

.roll-table th:last-child,
.roll-table td:last-child {
  border-right: 0;
}

.roll-table tbody tr:last-child th,
.roll-table tbody tr:last-child td {
  border-bottom: 0;
}

.roll-table thead th {
  padding-top: 14px;
  padding-bottom: 12px;
  color: rgba(255, 213, 91, .6);
  background: rgba(9, 0, 3, .38);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
}

.roll-table tbody tr {
  transition: background .18s ease;
}

.roll-table tbody tr:hover {
  background: rgba(255, 205, 56, .035);
}

.roll-table tbody th {
  width: 125px;
  background: rgba(111, 7, 36, .09);
}

.table-roll-price {
  display: block;
  color: #ffc536;
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: 31px;
  font-weight: 900;
  line-height: 1;
}

.roll-table tbody th small {
  display: block;
  margin-top: 5px;
  color: rgba(255, 229, 184, .45);
  font-size: 8px;
  line-height: 1.35;
  text-transform: uppercase;
}

.roll-table td > strong {
  color: #fff1cf;
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: 13px;
  line-height: 1.35;
}

.table-probabilities {
  display: grid;
  gap: 6px;
  min-width: 220px;
}

.table-probabilities span {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 8px;
  align-items: center;
  color: rgba(255, 238, 211, .58);
  font-size: 9px;
  line-height: 1.35;
}

.table-probabilities b {
  color: #ffc738;
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: 12px;
}

.table-probabilities.full-list span {
  display: block;
  max-width: 210px;
  padding: 10px 11px;
  border: 1px solid rgba(255, 215, 95, .12);
  border-radius: 11px;
  color: #ffe6a5;
  background: rgba(255, 201, 44, .045);
}

.table-status,
.table-jackpot {
  display: inline-flex;
  padding: 7px 9px 6px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 850;
  line-height: 1.2;
  white-space: nowrap;
}

.table-status {
  border: 1px solid rgba(255, 214, 91, .16);
  color: #ffe092;
  background: rgba(255, 197, 43, .055);
}

.table-jackpot {
  border: 1px solid rgba(255, 101, 132, .22);
  color: #ffbfcb;
  background: rgba(220, 22, 65, .09);
}

/* The old card-specific rules remain harmless, but the active layout is table-based. */
.roll-grid,
.roll-card,
.roll-adjustment,
.mechanics-note {
  display: none !important;
}

.stock-card-mark {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: #fff;
}

.stock-card-mark img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  padding: 4px;
  background: #fff;
  opacity: 0;
  transition: opacity .18s ease;
}

.stock-card-mark.has-logo img {
  opacity: 1;
}

.stock-logo-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #4b0d02;
  background: linear-gradient(145deg, #fff3af, #ffb51d);
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: 20px;
  font-weight: 900;
}

.stock-card-mark.has-logo .stock-logo-fallback {
  opacity: 0;
}

.stock-card-mark.logo-failed .stock-logo-fallback {
  opacity: 1;
}

@media (max-width: 760px) {
  .roll-table-wrap {
    margin-right: -4px;
    margin-left: -4px;
    border-radius: 16px;
  }

  .roll-table th,
  .roll-table td {
    padding: 17px 14px;
  }
}


/* ==========================================================================
   STOCKLOOT — LIME CASINO THEME + SIMPLIFIED MECHANICS
   ========================================================================== */

:root {
  --loot-lime: #baff35;
  --loot-lime-bright: #dcff72;
  --loot-lime-soft: #8fe83e;
  --loot-emerald: #1d8d45;
  --loot-green-deep: #062713;
  --loot-green-black: #020b05;
  --loot-gold: #f4d35e;
  --loot-cream: #f5ffe5;
}

body {
  color: var(--loot-cream);
  background:
    radial-gradient(circle at 50% -12%, rgba(111, 255, 67, .18), transparent 38%),
    linear-gradient(180deg, #041509 0%, #020b05 44%, #06150a 100%) !important;
}

.landing-main {
  background:
    linear-gradient(180deg, transparent 0 34%, rgba(7, 44, 20, .35) 34% 100%) !important;
}

/* Navigation */
.site-nav {
  border-color: rgba(186, 255, 53, .18) !important;
  background:
    linear-gradient(180deg, rgba(4, 28, 12, .94), rgba(2, 14, 6, .88)) !important;
  box-shadow:
    0 14px 45px rgba(0,0,0,.36),
    inset 0 1px rgba(220,255,114,.08) !important;
}

.brand-token,
.footer-brand span {
  color: #113306 !important;
  background: linear-gradient(145deg, #e6ff8e, #9df22f 66%, #45aa28) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.72),
    0 0 22px rgba(160, 255, 53, .2) !important;
}

.brand-copy small {
  color: rgba(199, 255, 143, .55) !important;
}

.nav-links a,
.nav-links .nav-menu-button {
  color: rgba(226, 255, 193, .62) !important;
}

.nav-links a:hover,
.nav-links .nav-menu-button:hover,
.nav-play-link {
  color: var(--loot-lime-bright) !important;
}

.nav-links a::after {
  background: linear-gradient(90deg, #55c936, #d7ff62) !important;
}

.wallet-button {
  border-color: rgba(186, 255, 53, .35) !important;
  color: #eaffc7 !important;
  background:
    linear-gradient(180deg, rgba(35, 107, 44, .92), rgba(11, 57, 25, .95)) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.13),
    0 0 24px rgba(121, 255, 59, .12) !important;
}

.wallet-led {
  background: var(--loot-lime) !important;
  box-shadow: 0 0 0 4px rgba(186,255,53,.12), 0 0 16px rgba(186,255,53,.68) !important;
}

/* Hero */
.landing-hero {
  border-color: rgba(186, 255, 53, .16) !important;
  background:
    radial-gradient(circle at 18% 42%, rgba(39, 151, 52, .28), transparent 35%),
    linear-gradient(120deg, rgba(3, 31, 12, .68), rgba(2, 10, 5, .3)) !important;
}

.landing-hero::before {
  background: radial-gradient(circle, rgba(126, 255, 55, .2), transparent 68%) !important;
}

.landing-hero .casino-rays {
  background: repeating-conic-gradient(
    from 0deg,
    rgba(83, 210, 54, .48) 0deg 8deg,
    rgba(220, 255, 93, .06) 8deg 16deg
  ) !important;
}

.landing-hero .casino-vignette {
  background:
    radial-gradient(
      circle at var(--ray-center-x) var(--ray-center-y),
      transparent 0 20%,
      rgba(2, 25, 9, .18) 49%,
      rgba(1, 8, 3, .78) 100%
    ),
    linear-gradient(90deg, rgba(1,10,4,.66), transparent 31% 78%, rgba(1,8,3,.4)) !important;
}

.landing-hero-machine::before {
  background:
    radial-gradient(circle, rgba(200, 255, 94, .22), rgba(44, 188, 67, .14) 41%, transparent 69%) !important;
}

.hero-kicker,
.mechanics-heading > div > p,
.section-heading > p,
.site-footer p {
  color: var(--loot-lime) !important;
}

.hero-live-dot {
  background: var(--loot-lime) !important;
  box-shadow: 0 0 15px rgba(186, 255, 53, .8) !important;
}

.hero-live-dot::before {
  border-color: rgba(186, 255, 53, .58) !important;
}

.landing-hero h1 {
  color: #f2ffe3 !important;
  text-shadow:
    0 9px 0 rgba(4, 60, 19, .68),
    0 0 50px rgba(91, 255, 63, .15) !important;
}

.landing-hero h1 span {
  background: linear-gradient(180deg, #efffc5 0%, #baff35 52%, #4cae2b 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  filter: drop-shadow(0 7px 0 rgba(11, 62, 17, .75)) !important;
}

.hero-summary {
  color: rgba(226, 255, 202, .64) !important;
}

.hero-primary-button {
  border-color: #e2ff8b !important;
  color: #0e3508 !important;
  background: linear-gradient(180deg, #efffb6, #b9fb3b 68%, #55b52d) !important;
  box-shadow:
    inset 0 2px rgba(255,255,255,.64),
    0 6px 0 #1b641d,
    0 16px 34px rgba(0,0,0,.28) !important;
}

.hero-secondary-button {
  border-color: rgba(186, 255, 53, .27) !important;
  color: #e8ffc9 !important;
  background: rgba(4, 41, 15, .7) !important;
}

.hero-metrics div {
  border-color: rgba(186, 255, 53, .14) !important;
  background:
    linear-gradient(145deg, rgba(173, 255, 72, .09), rgba(4, 61, 22, .2)) !important;
}

.hero-metrics strong {
  color: #efffd9 !important;
}

.hero-metrics span {
  color: rgba(190, 255, 111, .55) !important;
}

/* Machine recolor */
.machine-top {
  border-color: #2a8e3f !important;
  background: linear-gradient(#a9ee43, #62c63b) !important;
  box-shadow:
    inset 0 6px rgba(255,255,255,.24),
    0 9px 0 #176a31 !important;
}

.machine-logo {
  border-color: #287e3c !important;
  color: #164f25 !important;
  background: #efffc9 !important;
}

.machine-logo span {
  color: #4ead2e !important;
}

.machine-body {
  border-color: #2c873b !important;
  background: linear-gradient(100deg, #baf342 0 42%, #8dd936 42% 100%) !important;
  box-shadow:
    inset 0 6px rgba(255,255,255,.2),
    inset 0 -7px rgba(17,104,43,.13),
    0 12px 0 #1a6932 !important;
}

.coin-label,
.chute-label,
.dial-copy {
  color: #20572a !important;
}

.coin-note {
  color: rgba(24, 82, 35, .65) !important;
}

.chute-mouth {
  border-color: #58c440 !important;
  background: #238c44 !important;
  box-shadow:
    inset 0 11px #136c35,
    inset 0 -6px rgba(4,50,20,.2),
    0 7px 0 rgba(23,93,42,.28) !important;
}

.chute-mouth::before {
  background: #0f6030 !important;
}

.dial-ring {
  border-color: #efffc9 !important;
  box-shadow:
    inset -7px -8px rgba(45,92,58,.12),
    0 7px 0 rgba(22,90,38,.27),
    0 0 0 0 rgba(255,255,255,0) !important;
}

.machine-foot {
  background: #17672f !important;
}

.play-prompt {
  border-color: rgba(186,255,53,.28) !important;
  color: #eaffca !important;
  background: rgba(4, 42, 15, .8) !important;
  box-shadow:
    0 16px 38px rgba(0,0,0,.25),
    inset 0 1px rgba(255,255,255,.07) !important;
}

/* Jackpot pot */
.jackpot-pot {
  border-color: rgba(211, 255, 117, .48) !important;
  color: #f0ffd7 !important;
  background:
    radial-gradient(circle at 50% -20%, rgba(210, 255, 102, .28), transparent 48%),
    linear-gradient(155deg, rgba(22, 91, 38, .96), rgba(3, 34, 12, .96)) !important;
  box-shadow:
    0 25px 55px rgba(0,0,0,.42),
    0 0 0 5px rgba(160,255,56,.04),
    0 0 35px rgba(130,255,46,.16),
    inset 0 1px rgba(255,255,255,.1) !important;
}

.jackpot-pot::before {
  border-color: rgba(206, 255, 104, .16) !important;
}

.jackpot-pot-glow {
  background: radial-gradient(circle, rgba(166, 255, 54, .23), transparent 66%) !important;
}

.jackpot-crown,
.jackpot-label {
  color: var(--loot-lime-bright) !important;
}

.jackpot-pot strong {
  color: #f3ffdc !important;
  text-shadow: 0 3px 0 #155421 !important;
}

.jackpot-pot small {
  color: rgba(213, 255, 149, .5) !important;
}

.jackpot-meter i {
  background: linear-gradient(90deg, #2a9e43, #aaff39, #efffa8) !important;
  box-shadow: 0 0 13px rgba(153, 255, 51, .52) !important;
}

.jackpot-orbit {
  border-color: #e4ffa0 !important;
  color: #17440d !important;
  background: linear-gradient(145deg, #efffa8, #96e934) !important;
}

/* Stock ticker */
.ticker-marquee {
  border-color: rgba(186,255,53,.14) !important;
  background:
    linear-gradient(90deg, #031307, #082612 50%, #031307) !important;
}

.ticker-marquee::before {
  background: linear-gradient(90deg, #020c04, transparent) !important;
}

.ticker-marquee::after {
  background: linear-gradient(-90deg, #020c04, transparent) !important;
}

.ticker-group span {
  color: rgba(232, 255, 211, .74) !important;
}

.ticker-group i {
  color: rgba(186, 255, 53, .46) !important;
}

/* Redesigned mechanics */
.mechanics-section {
  border-color: rgba(186, 255, 53, .18) !important;
  background:
    radial-gradient(circle at 0 0, rgba(169, 255, 61, .13), transparent 31%),
    radial-gradient(circle at 100% 100%, rgba(48, 176, 67, .14), transparent 35%),
    linear-gradient(145deg, #0a3418 0%, #04190b 52%, #082813 100%) !important;
}

.mechanics-section::before {
  border-color: rgba(186, 255, 53, .06) !important;
}

.mechanics-heading h2,
.roll-table-intro h3,
.jackpot-explainer h3,
.stock-section .section-heading h2 {
  color: #f1ffdf !important;
}

.mechanics-intro,
.roll-table-intro p,
.jackpot-explainer p,
.stock-section .section-heading > span {
  color: rgba(224, 255, 199, .58) !important;
}

.simple-mechanics-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 34px;
  padding: 0;
  list-style: none;
}

.simple-mechanics-flow li {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 13px;
  min-height: 106px;
  padding: 17px;
  border: 1px solid rgba(186, 255, 53, .13);
  border-radius: 17px;
  background:
    linear-gradient(145deg, rgba(40, 111, 49, .24), rgba(2, 20, 8, .38));
  box-shadow: inset 0 1px rgba(255,255,255,.04);
}

.simple-mechanics-flow li > span {
  display: grid;
  place-items: center;
  width: 48px;
  aspect-ratio: 1;
  border: 1px solid #dfff8f;
  border-radius: 15px;
  color: #153c0c;
  background: linear-gradient(145deg, #efffb1, #9ded35);
  box-shadow:
    inset 0 1px rgba(255,255,255,.7),
    0 5px 0 #236b28;
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: 15px;
  font-weight: 900;
}

.simple-mechanics-flow strong,
.simple-mechanics-flow small {
  display: block;
}

.simple-mechanics-flow strong {
  color: #efffd7;
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: 16px;
  line-height: 1.1;
}

.simple-mechanics-flow small {
  margin-top: 4px;
  color: rgba(219, 255, 190, .48);
  font-size: 9px;
  line-height: 1.45;
}

.roll-table-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .58fr);
  align-items: end;
  gap: 30px;
  margin: 0 0 17px;
}

.roll-table-intro span,
.jackpot-explainer > div > span {
  color: var(--loot-lime) !important;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .17em;
}

.roll-table-intro h3 {
  margin: 5px 0 0;
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: clamp(25px, 3vw, 37px);
  line-height: 1.02;
}

.roll-table-intro p {
  margin: 0;
  font-size: 11px;
  line-height: 1.65;
}

.roll-table-wrap {
  border-color: rgba(186, 255, 53, .17) !important;
  background:
    radial-gradient(circle at 100% 0, rgba(176, 255, 58, .07), transparent 33%),
    linear-gradient(145deg, rgba(8, 49, 20, .93), rgba(2, 18, 7, .94)) !important;
  scrollbar-color: rgba(155, 246, 48, .46) rgba(2, 20, 8, .8) !important;
}

.roll-table {
  min-width: 720px !important;
  color: #eeffd7 !important;
}

.roll-table th,
.roll-table td {
  border-color: rgba(186, 255, 53, .09) !important;
}

.roll-table thead th {
  color: rgba(193, 255, 113, .65) !important;
  background: rgba(1, 16, 5, .46) !important;
}

.roll-table tbody tr:hover {
  background: rgba(166, 255, 54, .04) !important;
}

.roll-table tbody th {
  background: rgba(68, 151, 49, .08) !important;
}

.table-roll-price {
  color: var(--loot-lime) !important;
}

.roll-table tbody th small,
.table-detail {
  color: rgba(218, 255, 184, .46) !important;
}

.roll-table td > strong {
  color: #efffd9 !important;
}

.table-detail {
  display: block;
  margin-top: 5px;
  font-size: 8px;
  line-height: 1.4;
}

.table-jackpot {
  border-color: rgba(186, 255, 53, .22) !important;
  color: #dcff9a !important;
  background: rgba(137, 226, 46, .08) !important;
}

.jackpot-explainer {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: center;
  margin-top: 16px;
  padding: 24px;
  border: 1px solid rgba(186, 255, 53, .18);
  border-radius: 21px;
  background:
    radial-gradient(circle at 100% 0, rgba(190, 255, 66, .12), transparent 37%),
    linear-gradient(145deg, rgba(20, 88, 34, .82), rgba(3, 29, 11, .9));
  box-shadow: inset 0 1px rgba(255,255,255,.045);
}

.jackpot-explainer-icon {
  display: grid;
  place-items: center;
  width: 72px;
  aspect-ratio: 1;
  border: 1px solid #e5ffa0;
  border-radius: 22px;
  color: #153d0b;
  background: linear-gradient(145deg, #efffb0, #9ced35);
  box-shadow:
    inset 0 1px rgba(255,255,255,.7),
    0 7px 0 #236c28;
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: 22px;
  font-weight: 900;
}

.jackpot-explainer h3 {
  margin: 5px 0 7px;
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: 23px;
  line-height: 1.08;
}

.jackpot-explainer p {
  margin: 0;
  font-size: 11px;
  line-height: 1.7;
}

/* Remove old mechanics components that no longer exist. */
.mechanics-flow,
.economy-grid,
.economy-card,
.fee-card,
.table-probabilities,
.table-status {
  display: none !important;
}

/* Stock section */
.stock-section {
  border-color: rgba(186, 255, 53, .18) !important;
  background:
    radial-gradient(circle at 7% 3%, rgba(183, 255, 61, .13), transparent 30%),
    radial-gradient(circle at 100% 100%, rgba(42, 171, 60, .15), transparent 35%),
    linear-gradient(145deg, #0b3619 0%, #04180a 54%, #082b14 100%) !important;
}

.stock-section::before {
  border-color: rgba(186, 255, 53, .06) !important;
}

.stock-card {
  border-color: rgba(186, 255, 53, .14) !important;
  background:
    radial-gradient(circle at 100% 0, rgba(160, 255, 62, .09), transparent 49%),
    linear-gradient(145deg, rgba(9, 53, 21, .9), rgba(2, 19, 7, .92)) !important;
}

.stock-card:hover {
  border-color: rgba(186, 255, 53, .34) !important;
  background:
    radial-gradient(circle at 100% 0, rgba(171, 255, 65, .16), transparent 52%),
    linear-gradient(145deg, rgba(13, 72, 28, .94), rgba(3, 27, 10, .94)) !important;
}

.stock-card strong {
  color: #efffd9 !important;
}

.stock-card small {
  color: rgba(184, 255, 91, .48) !important;
}

/* Falling stock-logo coins */
.falling-stock-coin {
  overflow: hidden;
  border-color: #cfff75 !important;
  color: #173d0f !important;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.85) 0 7%, transparent 8%),
    linear-gradient(145deg, #efffa8, #95e934 67%, #3b9d28) !important;
  box-shadow:
    inset 0 0 0 max(2px, calc(var(--coin-size) * .07)) rgba(33, 116, 39, .32),
    0 0 20px rgba(138, 255, 52, .28) !important;
}

.falling-stock-coin img {
  position: absolute;
  inset: 13%;
  width: 74%;
  height: 74%;
  display: block;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
  opacity: 0;
}

.falling-stock-coin span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  color: #16430e;
  background: rgba(239, 255, 177, .82);
  font-size: calc(var(--coin-size) * .24);
  font-weight: 900;
}

.falling-stock-coin.has-stock-logo img {
  opacity: 1;
}

.falling-stock-coin.has-stock-logo span {
  opacity: 0;
}

/* Modals and result surfaces */
.wallet-modal,
.howto-modal {
  border-color: rgba(186, 255, 53, .24) !important;
  background:
    radial-gradient(circle at 50% 0, rgba(166,255,56,.12), transparent 35%),
    linear-gradient(160deg, #0b3619, #031409) !important;
}

.modal-emblem,
.howto-emblem {
  color: #173f0d !important;
  background: linear-gradient(145deg, #efffb0, #9ced34) !important;
}

.modal-kicker {
  color: var(--loot-lime) !important;
}

.wallet-option,
.connected-wallet,
.wallet-notice,
.howto-steps li,
.howto-tip {
  border-color: rgba(186, 255, 53, .14) !important;
  background: rgba(12, 65, 26, .28) !important;
}

.wallet-fallback-icon,
.step-number {
  color: #173e0e !important;
  background: linear-gradient(145deg, #efffa9, #9be934) !important;
}

/* Footer */
.site-footer {
  border-color: rgba(186, 255, 53, .12) !important;
  background:
    radial-gradient(circle at 50% 0, rgba(72, 191, 60, .18), transparent 56%),
    linear-gradient(180deg, #031006, #010602) !important;
}

.site-footer small {
  color: rgba(215, 255, 180, .38) !important;
}

@media (max-width: 800px) {
  .simple-mechanics-flow {
    grid-template-columns: 1fr;
  }

  .simple-mechanics-flow li {
    min-height: 88px;
  }

  .roll-table-intro {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (max-width: 560px) {
  .jackpot-explainer {
    grid-template-columns: 1fr;
    padding: 20px 17px;
  }

  .jackpot-explainer-icon {
    width: 62px;
    border-radius: 18px;
  }
}


/* ==========================================================================
   STOCKLOOT — GREEN REVEAL + LEADERBOARDS MODAL
   ========================================================================== */

/* Reveal overlay now matches the lime-green casino palette. */
.reveal-backdrop {
  background:
    radial-gradient(
      circle at center,
      rgba(77, 174, 66, .88) 0%,
      rgba(9, 67, 29, .95) 42%,
      rgba(1, 17, 7, .985) 78%
    ) !important;
  backdrop-filter: blur(11px) saturate(1.08) !important;
}

.reveal-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .45;
  background:
    repeating-conic-gradient(
      from 0deg at 50% 50%,
      rgba(193, 255, 95, .11) 0deg 7deg,
      transparent 7deg 16deg
    );
  mask-image: radial-gradient(circle, #000 0 18%, rgba(0,0,0,.55) 49%, transparent 76%);
  animation: reveal-green-rays 28s linear infinite;
}

.magic-ring {
  border-color: rgba(211, 255, 140, .28) !important;
  box-shadow:
    0 0 48px rgba(164, 255, 67, .2),
    inset 0 0 45px rgba(224, 255, 177, .1) !important;
}

.big-capsule.is-ready-to-open:hover {
  filter:
    drop-shadow(0 22px 25px rgba(1, 20, 7, .45))
    drop-shadow(0 0 28px rgba(178, 255, 73, .82)) !important;
}

.open-capsule-prompt {
  border-color: rgba(211, 255, 139, .76) !important;
  color: #efffd4 !important;
  background: rgba(4, 43, 16, .84) !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,.38),
    0 0 27px rgba(151, 255, 58, .24),
    inset 0 1px rgba(255,255,255,.11) !important;
}

.open-capsule-prompt::after {
  border-color: rgba(211, 255, 139, .76) !important;
  background: rgba(4, 43, 16, .84) !important;
}

.result-card {
  border-color: rgba(212, 255, 142, .54) !important;
  color: #12360e !important;
  background:
    radial-gradient(circle at 50% 0, rgba(255,255,255,.74), transparent 35%),
    linear-gradient(160deg, #f7ffe9, #d7ff8c) !important;
  box-shadow:
    0 28px 76px rgba(0, 20, 7, .56),
    0 0 45px rgba(153, 255, 53, .15),
    inset 0 2px rgba(255,255,255,.82) !important;
}

.result-card.is-lose {
  color: #173724 !important;
  background:
    radial-gradient(circle at 50% 0, rgba(255,255,255,.68), transparent 35%),
    linear-gradient(160deg, #f5fff1, #cbe9d0) !important;
}

.result-icon {
  border-color: #f0ffd0 !important;
  color: #173e0c !important;
  background: linear-gradient(145deg, #efffa9, #9bea35) !important;
  box-shadow:
    0 8px 0 #28762d,
    0 15px 30px rgba(24, 91, 34, .3) !important;
}

.result-card.is-lose .result-icon {
  color: #e9fff0 !important;
  background: linear-gradient(145deg, #56896a, #24563b) !important;
  box-shadow:
    0 8px 0 #123523,
    0 15px 30px rgba(2, 31, 13, .32) !important;
}

.prize-pill {
  border-color: #8fda32 !important;
  color: #19490d !important;
  background: #eaffab !important;
}

.spark {
  background: #eaff9a !important;
  box-shadow: 0 0 12px #aaff38 !important;
}

/* Leaderboards */
.leaderboard-modal {
  width: min(940px, 100%) !important;
  max-height: min(820px, calc(100svh - 28px)) !important;
  padding: 28px !important;
  color: #efffdc !important;
  background:
    radial-gradient(circle at 10% 0, rgba(178, 255, 67, .13), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(36, 167, 62, .14), transparent 36%),
    linear-gradient(155deg, rgba(8, 55, 22, .99), rgba(2, 21, 8, .995)) !important;
  text-align: left !important;
}

.leaderboard-heading {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 17px;
  padding-right: 43px;
}

.leaderboard-heading .modal-emblem {
  width: 62px;
  height: 62px;
  margin: 0 !important;
  flex: 0 0 auto;
  border-radius: 19px !important;
  font-size: 27px !important;
}

.leaderboard-heading .modal-kicker {
  margin: 0 0 5px !important;
}

.leaderboard-heading h2 {
  margin: 0;
  color: #f2ffdf;
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: clamp(34px, 5vw, 49px);
  line-height: .95;
}

.leaderboard-heading .modal-copy {
  max-width: 670px;
  margin: 9px 0 0 !important;
  color: rgba(224, 255, 200, .56) !important;
  font-size: 11px;
  line-height: 1.58;
}

.leaderboard-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 23px 0 18px;
}

.leaderboard-summary > div {
  padding: 13px 15px 12px;
  border: 1px solid rgba(186, 255, 53, .13);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(77, 153, 52, .16), rgba(1, 19, 7, .34));
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}

.leaderboard-summary span,
.leaderboard-summary strong {
  display: block;
}

.leaderboard-summary span {
  color: rgba(190, 255, 106, .5);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .14em;
}

.leaderboard-summary strong {
  margin-top: 4px;
  color: #efffd8;
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: 23px;
  line-height: 1;
}

.leaderboard-list-heading {
  display: grid;
  grid-template-columns: 34px 145px 88px minmax(270px, 1fr) 72px;
  gap: 11px;
  padding: 0 13px 8px;
  color: rgba(190, 255, 105, .42);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .13em;
}

.leaderboard-list {
  display: grid;
  gap: 8px;
  max-height: 390px;
  margin: 0;
  padding: 0 3px 2px 0;
  overflow-y: auto;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(166, 255, 62, .42) rgba(2, 20, 8, .55);
}

.leaderboard-entry {
  display: grid;
  grid-template-columns: 34px 145px 88px minmax(270px, 1fr) 72px;
  align-items: center;
  gap: 11px;
  min-height: 68px;
  padding: 10px 13px;
  border: 1px solid rgba(186, 255, 53, .11);
  border-radius: 15px;
  background:
    radial-gradient(circle at 100% 0, rgba(164,255,55,.055), transparent 36%),
    rgba(3, 28, 11, .55);
  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease;
}

.leaderboard-entry:hover {
  transform: translateY(-1px);
  border-color: rgba(186, 255, 53, .24);
  background:
    radial-gradient(circle at 100% 0, rgba(164,255,55,.1), transparent 40%),
    rgba(5, 39, 15, .7);
}

.leaderboard-rank {
  color: rgba(204, 255, 133, .34);
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: 13px;
  font-weight: 900;
}

.leaderboard-wallet {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.wallet-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  aspect-ratio: 1;
  flex: 0 0 auto;
  border: 1px solid rgba(222, 255, 166, .5);
  border-radius: 11px;
  color: #17410d;
  background: linear-gradient(145deg, #efffaa, #9bea34);
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: 13px;
  font-weight: 900;
}

.leaderboard-wallet strong,
.leaderboard-wallet small {
  display: block;
}

.leaderboard-wallet strong {
  overflow: hidden;
  color: #efffda;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-wallet small {
  margin-top: 2px;
  color: rgba(191, 255, 109, .35);
  font-size: 6px;
  font-weight: 900;
  letter-spacing: .13em;
}

.opened-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  justify-self: start;
  padding: 6px 8px 5px;
  border: 1px solid rgba(186, 255, 53, .17);
  border-radius: 999px;
  color: #dfff9f;
  background: rgba(128, 213, 49, .07);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .09em;
  white-space: nowrap;
}

.opened-status i {
  width: 5px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #baff35;
  box-shadow: 0 0 8px rgba(186,255,53,.72);
}

.leaderboard-rewards {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.leaderboard-stock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 29px;
  padding: 3px 7px 3px 3px;
  border: 1px solid rgba(186, 255, 53, .13);
  border-radius: 999px;
  background: rgba(133, 208, 56, .055);
}

.leaderboard-stock-logo {
  position: relative;
  display: grid;
  place-items: center;
  width: 22px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(145deg, #efffaa, #9bea34);
}

.leaderboard-stock-logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 2px;
  background: #fff;
  opacity: 0;
}

.leaderboard-stock-logo b {
  color: #17410d;
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: 9px;
}

.leaderboard-stock-logo.has-logo img {
  opacity: 1;
}

.leaderboard-stock-logo.has-logo b {
  opacity: 0;
}

.leaderboard-stock strong {
  color: #eaffc9;
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: 8px;
  letter-spacing: .04em;
}

.leaderboard-entry time {
  color: rgba(215, 255, 177, .38);
  font-size: 7px;
  text-align: right;
  white-space: nowrap;
}

.leaderboard-disclaimer {
  margin: 13px 0 0;
  color: rgba(209, 255, 169, .34);
  font-size: 7px;
  line-height: 1.5;
  text-align: center;
}

.leaderboard-close {
  display: flex !important;
  width: min(260px, 100%);
  margin: 15px auto 0 !important;
  color: #153e0c !important;
  background: linear-gradient(180deg, #eaff9c, #9bea35) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.72),
    0 5px 0 #256e29 !important;
}

@keyframes reveal-green-rays {
  to { transform: rotate(360deg); }
}

@media (max-width: 800px) {
  .leaderboard-modal {
    padding: 23px 18px !important;
  }

  .leaderboard-list-heading {
    display: none;
  }

  .leaderboard-entry {
    grid-template-columns: 30px minmax(125px, .8fr) auto;
    grid-template-areas:
      "rank wallet action"
      "rank rewards rewards"
      "rank time time";
    align-items: center;
    gap: 8px 10px;
  }

  .leaderboard-rank { grid-area: rank; }
  .leaderboard-wallet { grid-area: wallet; }
  .opened-status { grid-area: action; justify-self: end; }
  .leaderboard-rewards { grid-area: rewards; }
  .leaderboard-entry time {
    grid-area: time;
    text-align: left;
  }
}

@media (max-width: 520px) {
  .leaderboard-modal {
    padding: 21px 13px 17px !important;
  }

  .leaderboard-heading {
    grid-template-columns: 50px 1fr;
    gap: 11px;
    padding-right: 32px;
  }

  .leaderboard-heading .modal-emblem {
    width: 50px;
    height: 50px;
    border-radius: 15px !important;
    font-size: 22px !important;
  }

  .leaderboard-heading h2 {
    font-size: 32px;
  }

  .leaderboard-heading .modal-copy {
    font-size: 9px;
  }

  .leaderboard-summary {
    gap: 6px;
  }

  .leaderboard-summary > div {
    padding: 10px 8px 9px;
  }

  .leaderboard-summary span {
    font-size: 5.5px;
    letter-spacing: .08em;
  }

  .leaderboard-summary strong {
    font-size: 19px;
  }

  .leaderboard-list {
    max-height: 410px;
  }

  .leaderboard-entry {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    padding: 9px 8px;
  }

  .wallet-avatar {
    width: 29px;
    border-radius: 9px;
  }

  .leaderboard-wallet strong {
    font-size: 9px;
  }

  .leaderboard-stock {
    gap: 4px;
    padding-right: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-layer::before {
    animation: none !important;
  }
}


/* ==========================================================================
   STOCKLOOT — LEADERBOARD V2 + SEAMLESS REVEAL RAYS
   ========================================================================== */

/* Oversize and center the rotating reveal rays. The previous full-screen square
   exposed its corners while rotating on wide displays. */
.reveal-layer::before {
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  width: 180vmax !important;
  height: 180vmax !important;
  border-radius: 50%;
  background:
    repeating-conic-gradient(
      from 0deg at 50% 50%,
      rgba(193, 255, 95, .11) 0deg 7deg,
      transparent 7deg 16deg
    ) !important;
  -webkit-mask-image:
    radial-gradient(circle, #000 0 18%, rgba(0,0,0,.58) 49%, transparent 76%);
  mask-image:
    radial-gradient(circle, #000 0 18%, rgba(0,0,0,.58) 49%, transparent 76%) !important;
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: 50% 50%;
}

@keyframes reveal-green-rays {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Ten mock entries are included. The modal scrolls as a whole on short screens,
   while wide screens can display the full activity list comfortably. */
.leaderboard-modal {
  width: min(1020px, 100%) !important;
  max-height: calc(100svh - 20px) !important;
  overflow-y: auto !important;
}

.leaderboard-list-heading {
  grid-template-columns: 34px 178px 92px minmax(320px, 1fr) 74px !important;
}

.leaderboard-list {
  max-height: none !important;
  gap: 6px !important;
  overflow: visible !important;
}

.leaderboard-entry {
  grid-template-columns: 34px 178px 92px minmax(320px, 1fr) 74px !important;
  min-height: 58px !important;
  gap: 10px !important;
  padding: 8px 12px !important;
}

.leaderboard-wallet {
  display: block !important;
  min-width: 0;
}

.leaderboard-wallet > div {
  min-width: 0;
}

.leaderboard-wallet strong {
  font-size: 12px !important;
  letter-spacing: .015em;
}

.leaderboard-wallet small {
  margin-top: 3px !important;
  font-size: 6.5px !important;
}

/* The avatar has been removed from the HTML. Keep this rule as a safeguard. */
.wallet-avatar {
  display: none !important;
}

.leaderboard-stock {
  min-height: 31px !important;
  padding: 3px 8px 3px 3px !important;
}

.leaderboard-stock-logo {
  width: 24px !important;
  border: 1px solid rgba(212, 255, 147, .3);
  background: #fff !important;
}

.leaderboard-stock-logo img {
  z-index: 2;
  padding: 2px !important;
  object-fit: contain !important;
  background: #fff !important;
  opacity: 1 !important;
}

.leaderboard-stock-logo b {
  position: relative;
  z-index: 1;
}

.leaderboard-stock-logo.logo-failed img {
  display: none;
}

.leaderboard-stock-logo.has-logo b {
  opacity: 0;
}

/* Glowing jackpot opening. */
.jackpot-entry {
  position: relative;
  isolation: isolate;
  border-color: rgba(220, 255, 105, .5) !important;
  background:
    radial-gradient(circle at 68% 50%, rgba(210, 255, 82, .17), transparent 34%),
    linear-gradient(105deg, rgba(23, 101, 38, .93), rgba(5, 44, 16, .92)) !important;
  box-shadow:
    0 0 0 1px rgba(216, 255, 105, .08),
    0 0 30px rgba(177, 255, 58, .2),
    inset 0 1px rgba(255,255,255,.08);
  animation: leaderboard-jackpot-glow 1.8s ease-in-out infinite;
}

.jackpot-entry::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(232, 255, 151, .28),
      transparent
    );
  opacity: .5;
  transform: translateX(-55%);
  animation: leaderboard-jackpot-sweep 2.5s ease-in-out infinite;
  pointer-events: none;
}

.jackpot-status {
  border-color: rgba(230, 255, 153, .5) !important;
  color: #f0ffc8 !important;
  background: rgba(202, 255, 83, .13) !important;
  box-shadow: 0 0 15px rgba(186,255,53,.16);
}

.jackpot-status i {
  background: #eeff9f !important;
  box-shadow:
    0 0 5px #fff,
    0 0 15px rgba(213, 255, 89, .9) !important;
}

.jackpot-reward {
  display: inline-flex !important;
  align-items: center;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  width: fit-content;
  min-width: 230px;
  padding: 7px 13px 7px 8px;
  border: 1px solid rgba(229, 255, 152, .42);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(221,255,115,.16), rgba(83,167,43,.09));
  box-shadow:
    inset 0 1px rgba(255,255,255,.08),
    0 0 20px rgba(177,255,58,.1);
}

.jackpot-reward-crown {
  display: grid;
  place-items: center;
  width: 36px;
  aspect-ratio: 1;
  flex: 0 0 auto;
  border: 1px solid #efffb0;
  border-radius: 11px;
  color: #19470d;
  background: linear-gradient(145deg, #f4ffc0, #a7ee3c);
  box-shadow:
    inset 0 1px rgba(255,255,255,.75),
    0 0 16px rgba(199,255,75,.34);
  font-size: 19px;
}

.jackpot-reward-copy small,
.jackpot-reward-copy strong {
  display: block;
}

.jackpot-reward-copy small {
  color: rgba(225, 255, 169, .56);
  font-size: 6px;
  font-weight: 900;
  letter-spacing: .14em;
}

.jackpot-reward-copy strong {
  margin-top: 2px;
  color: #f3ffd7;
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: 16px;
  line-height: 1;
  text-shadow: 0 0 12px rgba(218,255,103,.28);
}

/* Ensure button text is visually centered. */
.leaderboard-close {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 46px;
  padding: 12px 18px 10px !important;
  text-align: center !important;
  line-height: 1 !important;
}

@keyframes leaderboard-jackpot-glow {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(216, 255, 105, .08),
      0 0 22px rgba(177, 255, 58, .14),
      inset 0 1px rgba(255,255,255,.08);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(230, 255, 139, .2),
      0 0 42px rgba(177, 255, 58, .32),
      inset 0 1px rgba(255,255,255,.1);
  }
}

@keyframes leaderboard-jackpot-sweep {
  0%, 20% { opacity: 0; transform: translateX(-70%); }
  50% { opacity: .7; }
  80%, 100% { opacity: 0; transform: translateX(70%); }
}

@media (max-width: 860px) {
  .leaderboard-entry {
    grid-template-columns: 30px minmax(145px, .9fr) auto !important;
  }

  .leaderboard-wallet strong {
    font-size: 11px !important;
  }

  .jackpot-reward {
    min-width: min(100%, 230px);
  }
}

@media (max-width: 520px) {
  .leaderboard-wallet strong {
    font-size: 10px !important;
  }

  .jackpot-reward {
    width: 100%;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jackpot-entry,
  .jackpot-entry::before {
    animation: none !important;
  }
}


/* ==========================================================================
   STOCKLOOT — PHP LEADERBOARD STATES
   ========================================================================== */

.leaderboard-state {
  display: grid;
  place-items: center;
  min-height: 118px;
  padding: 24px;
  border: 1px dashed rgba(186, 255, 53, .2);
  border-radius: 15px;
  color: rgba(224, 255, 197, .58);
  background: rgba(3, 29, 11, .48);
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
}

.leaderboard-error {
  border-color: rgba(255, 218, 100, .25);
  color: #f0ffc9;
}

.stock-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1120px) {
  .stock-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .stock-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .stock-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ==========================================================================
   STOCKLOOT — ROLL AMOUNT SELECTOR
   ========================================================================== */

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.coin-note {
  margin-top: 2px;
  color: rgba(24, 82, 35, .72) !important;
  font-size: 8px !important;
  letter-spacing: .08em;
}

.roll-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  width: 86px;
  margin: 6px auto 0;
  padding: 3px;
  border: 1px solid rgba(33, 104, 42, .28);
  border-radius: 10px;
  background: rgba(237, 255, 201, .5);
  box-shadow:
    inset 0 1px rgba(255,255,255,.52),
    0 4px 0 rgba(23, 103, 47, .16);
}

.roll-selector label {
  position: relative;
  display: block;
  min-width: 0;
  cursor: pointer;
}

.roll-selector input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.roll-selector label > span {
  display: grid;
  place-items: center;
  min-height: 25px;
  padding: 3px 1px 2px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #285a2d;
  background: rgba(255,255,255,.36);
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  transition:
    color .16s ease,
    background .16s ease,
    border-color .16s ease,
    transform .16s ease,
    box-shadow .16s ease;
}

.roll-selector label:hover > span {
  color: #153d16;
  background: rgba(255,255,255,.68);
}

.roll-selector input:checked + span {
  border-color: #e8ff9e;
  color: #123b0d;
  background: linear-gradient(180deg, #edffad, #a8ed39);
  box-shadow:
    inset 0 1px rgba(255,255,255,.78),
    0 3px 0 #347b30,
    0 0 11px rgba(150, 245, 50, .26);
  transform: translateY(-1px);
}

.roll-selector input:focus-visible + span {
  outline: 2px solid #236e33;
  outline-offset: 2px;
}

.roll-selector.is-disabled {
  opacity: .55;
  filter: saturate(.65);
}

.roll-selector.is-disabled label {
  cursor: default;
}

.roll-selector.is-disabled input {
  cursor: default;
}

.prize-pill {
  max-width: min(720px, calc(100vw - 54px));
  flex-wrap: wrap;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

@media (max-width: 470px) {
  .roll-selector {
    transform: scale(1.04);
    transform-origin: top center;
  }
}


/* ==========================================================================
   STOCKLOOT — BRAND LOGO + HERO METRIC UPDATE
   ========================================================================== */

.brand {
  display: flex;
  align-items: center;
  width: clamp(148px, 15vw, 198px);
  height: 52px;
  padding: 0;
  overflow: hidden;
  border-radius: 13px;
  line-height: 0;
}

.brand-logo-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  object-position: center;
  border-radius: inherit;
}

.hero-metrics {
  grid-template-columns: repeat(2, minmax(128px, 1fr));
  max-width: 390px;
}

.hero-metrics div {
  min-width: 0;
}

@media (max-width: 700px) {
  .brand {
    width: 142px;
    height: 43px;
    border-radius: 11px;
  }
}

@media (max-width: 470px) {
  .brand {
    width: 116px;
    height: 38px;
    border-radius: 9px;
  }

  .hero-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 100%;
  }
}


/* ==========================================================================
   STOCKLOOT — ON-CHAIN CAPSULE OPENING
   ========================================================================== */

.open-capsule-prompt[data-mode="pending"] {
  border-color: rgba(184, 255, 90, .58) !important;
  color: #ecffd1 !important;
  background: rgba(5, 44, 17, .94) !important;
  animation: transaction-status-pulse 1.2s ease-in-out infinite !important;
}

.open-capsule-prompt[data-mode="wallet"] {
  border-color: rgba(237, 255, 165, .72) !important;
  color: #f5ffd8 !important;
  background:
    linear-gradient(145deg, rgba(65, 128, 39, .96), rgba(10, 55, 21, .96)) !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,.4),
    0 0 32px rgba(190,255,70,.3),
    inset 0 1px rgba(255,255,255,.12) !important;
}

.open-capsule-prompt[data-mode="error"] {
  border-color: rgba(255, 223, 117, .72) !important;
  color: #fff3c0 !important;
  background: rgba(77, 54, 4, .94) !important;
}

.result-card {
  width: min(760px, calc(100% - 28px)) !important;
  max-height: calc(100svh - 42px);
  overflow-y: auto;
  padding-right: clamp(18px, 4vw, 34px) !important;
  padding-left: clamp(18px, 4vw, 34px) !important;
}

.result-stock-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
  gap: 10px;
  width: 100%;
  margin: 20px auto 0;
}

.result-stock-card {
  display: grid;
  justify-items: center;
  min-width: 0;
  padding: 14px 9px 11px;
  border: 1px solid rgba(47, 129, 43, .22);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 0, rgba(255,255,255,.72), transparent 42%),
    linear-gradient(160deg, rgba(240,255,216,.98), rgba(184,240,112,.9));
  box-shadow:
    inset 0 1px rgba(255,255,255,.82),
    0 8px 18px rgba(34, 101, 35, .12);
}

.result-stock-logo {
  position: relative;
  display: grid;
  place-items: center;
  width: 55px;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(47, 126, 43, .24);
  border-radius: 15px;
  color: #1a4b12;
  background: linear-gradient(145deg, #efffac, #9bea36);
  box-shadow:
    inset 0 1px rgba(255,255,255,.72),
    0 6px 14px rgba(24,83,28,.13);
}

.result-stock-logo img {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 5px;
  object-fit: contain;
  background: #fff;
  opacity: 0;
}

.result-stock-logo b {
  position: relative;
  z-index: 1;
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: 22px;
}

.result-stock-logo.has-logo img {
  opacity: 1;
}

.result-stock-logo.has-logo b {
  opacity: 0;
}

.result-stock-card > strong {
  margin-top: 8px;
  color: #153d10;
  font-family: "Baloo 2", Inter, sans-serif;
  font-size: 16px;
  line-height: 1;
}

.result-stock-card > small {
  margin-top: 4px;
  color: rgba(31, 86, 25, .52);
  font-size: 6px;
  font-weight: 900;
  letter-spacing: .11em;
}

.result-transaction {
  width: fit-content;
  max-width: 100%;
  margin: 13px auto 0;
  padding: 7px 11px 6px;
  overflow: hidden;
  border: 1px solid rgba(45, 122, 41, .18);
  border-radius: 999px;
  color: rgba(25, 77, 20, .68);
  background: rgba(235, 255, 207, .62);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 8px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-transaction[hidden] {
  display: none !important;
}

@keyframes transaction-status-pulse {
  0%, 100% {
    transform: translate(-50%, 0) scale(1);
    filter: brightness(.92);
  }
  50% {
    transform: translate(-50%, -4px) scale(1.025);
    filter: brightness(1.15);
  }
}

@media (max-width: 620px) {
  .result-stock-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .result-stock-card {
    padding: 11px 6px 9px;
  }

  .result-stock-logo {
    width: 46px;
    border-radius: 12px;
  }

  .result-stock-card > strong {
    font-size: 14px;
  }
}

@media (max-width: 390px) {
  .result-stock-grid {
    gap: 7px;
  }

  .result-stock-card {
    border-radius: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .open-capsule-prompt[data-mode="pending"] {
    animation: none !important;
  }
}


/* ==========================================================================
   STOCKLOOT — TEST-DEPOSIT MODE
   ========================================================================== */

.test-mode .roll-selector {
  position: relative;
  opacity: .64;
  filter: saturate(.55);
  pointer-events: none;
}

.test-mode .roll-selector::after {
  content: "TEST: 1 USDG";
  position: absolute;
  left: 50%;
  top: calc(100% + 5px);
  z-index: 2;
  width: max-content;
  padding: 3px 6px 2px;
  border: 1px solid rgba(36, 112, 43, .24);
  border-radius: 999px;
  color: #194d1d;
  background: rgba(236, 255, 204, .92);
  font-size: 6px;
  font-weight: 900;
  letter-spacing: .09em;
  line-height: 1;
  transform: translateX(-50%);
}

.test-mode .coin-panel {
  overflow: visible;
}


/* ==========================================================================
   STOCKLOOT — LIVE CLAIMABLE USDG AMOUNT
   ========================================================================== */

.jackpot-pot #jackpotAmount {
  display: block;
  min-width: 128px;
  transition:
    opacity .2s ease,
    filter .2s ease,
    text-shadow .2s ease;
}

.jackpot-pot.is-checking-amount #jackpotAmount {
  opacity: .58;
  filter: blur(.3px);
}

.jackpot-pot.has-live-amount #jackpotAmount {
  color: #f4ffdb !important;
  text-shadow:
    0 3px 0 #155421,
    0 0 19px rgba(190, 255, 72, .34) !important;
}

.jackpot-pot.has-live-amount .jackpot-meter i {
  width: 100% !important;
  animation: live-jackpot-meter 2.2s ease-in-out infinite;
}

.jackpot-pot.amount-hidden #jackpotAmount {
  letter-spacing: .04em;
}

@keyframes live-jackpot-meter {
  0%, 100% {
    opacity: .74;
    filter: brightness(.92);
  }
  50% {
    opacity: 1;
    filter: brightness(1.22);
  }
}

@media (prefers-reduced-motion: reduce) {
  .jackpot-pot.has-live-amount .jackpot-meter i {
    animation: none !important;
  }
}