:root {
  --gold-deep: #7a5a00;
  --gold-mid: #c9920a;
  --gold: #e8b020;
  --gold-bright: #ffd84d;
  --gold-shine: #fff4c2;
  --gdk: #060f06;
  --red: #cc1111;
  --red-bright: #ff3333;
  --cream: #f5ead0;
  --cream-dim: #c8b896;
  --blue-mid: #8888ff;
  --blue-dim: #ccccff;
  --teal: #00ffaa;
  --teal-mid: #00cc77;
  --kraft-hi: #d4a050;
  --kraft-mid: #b07830;
  --kraft-lo: #7a5018;
  --kraft-ink: #1a0d03;
}

html {
  font-size: clamp(15px, 2.65vmin, 22px);
  width: 100%;
  height: 100%;
  overflow: hidden;
}

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: #040404;
  font-family: "Lato", sans-serif;
  color: var(--cream);
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.shell-stage {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  overflow: hidden;
  padding: 0;
}

.shell-fit {
  position: relative;
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
}

.phone {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  transform: none;
  border-radius: clamp(0rem, 1.4vmin, 1.25rem);
  overflow: hidden;
  box-shadow: inset 0 0 0 .0625rem rgba(201,146,10,.52), inset 0 .0625rem 0 rgba(232,176,32,.07);
}

.corner {
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  border-color: rgba(201,146,10,.5);
  border-style: solid;
  z-index: 200;
  pointer-events: none;
}

.c-tl { top: .75rem; left: .75rem; border-width: .125rem 0 0 .125rem; border-radius: .25rem 0 0 0; }
.c-tr { top: .75rem; right: .75rem; border-width: .125rem .125rem 0 0; border-radius: 0 .25rem 0 0; }
.c-bl { bottom: .75rem; left: .75rem; border-width: 0 0 .125rem .125rem; border-radius: 0 0 0 .25rem; }
.c-br { bottom: .75rem; right: .75rem; border-width: 0 .125rem .125rem 0; border-radius: 0 0 .25rem 0; }

.felt {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 85% 75% at 50% 35%, #0d280d 0%, #061406 50%, #030803 100%),
    repeating-linear-gradient(45deg, transparent 0, transparent .4375rem, rgba(255,255,255,.006) .4375rem, rgba(255,255,255,.006) .5rem),
    repeating-linear-gradient(-45deg, transparent 0, transparent .4375rem, rgba(255,255,255,.006) .4375rem, rgba(255,255,255,.006) .5rem);
}

.felt::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 22rem;
  height: 26rem;
  background: radial-gradient(ellipse 55% 100% at 50% 0%, rgba(255,220,80,.09) 0%, rgba(201,146,10,.03) 40%, transparent 65%);
}

.game-ui {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  z-index: 10;
}

.hud {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) .75rem max(1rem, env(safe-area-inset-left));
  background: linear-gradient(180deg, rgba(0,0,0,.82), transparent);
}

.p-chip {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: rgba(5,12,5,.88);
  border: .0625rem solid rgba(201,146,10,.32);
  border-radius: 2rem;
  padding: .3125rem .75rem .3125rem .375rem;
}

.p-av, .lb-av {
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cinzel", serif;
  font-size: .5625rem;
  font-weight: 700;
}

.p-av {
  background: linear-gradient(135deg, var(--gold-deep), var(--gold-mid));
  border: .09375rem solid var(--gold);
  color: #060f06;
  flex-shrink: 0;
  box-shadow: 0 0 .5rem rgba(201,146,10,.45);
}

.p-name, .st-title, .badge, .prog-label, .btn-swap, .ready-eyebrow, .ready-title, .ready-btn, .lb-title, .lb-pool-val, .lb-pool-lbl, .lb-prize {
  font-family: "Cinzel", serif;
}

.p-name { font-size: .6875rem; font-weight: 700; color: var(--cream); line-height: 1.2; }
.p-stake { font-size: .5rem; color: var(--gold-mid); }
.mute-btn {
  position: absolute;
  top: max(1.35rem, env(safe-area-inset-top));
  right: max(4.5rem, calc(env(safe-area-inset-right) + 4.5rem));
  z-index: 120;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: .0625rem solid rgba(201,146,10,.35);
  border-radius: 50%;
  background: rgba(5,12,5,.88);
  color: var(--gold-bright);
  font-size: .9rem;
  cursor: pointer;
  box-shadow: 0 0 .75rem rgba(201,146,10,.12);
  transition: border-color .2s ease, background .2s ease, transform .15s ease;
}
.mute-btn:hover { border-color: rgba(255,216,77,.7); }
.mute-btn:active { transform: scale(.94); }
.mute-btn.is-muted { background: rgba(35,5,5,.9); border-color: rgba(204,17,17,.45); color: #ff7777; }
.t-ghost { width: 3rem; height: 3rem; }
.t-wrap { display: flex; flex-direction: column; align-items: center; gap: .1875rem; }
.t-ring { position: relative; width: 3rem; height: 3rem; }
.t-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.t-trk { fill: none; stroke: rgba(255,255,255,.07); stroke-width: 3; }
.t-prg { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: 0; transition: none; }
.t-prg.gold { stroke: var(--gold); }
.t-prg.blue { stroke: var(--blue-mid); }
.t-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1; font-family: "Cinzel", serif; font-size: .8125rem; font-weight: 700; }
.t-num.gold { color: var(--gold-bright); }
.t-num.blue { color: var(--blue-dim); }
.t-lbl { font-size: .4375rem; color: rgba(255,255,255,.28); letter-spacing: .15em; text-transform: uppercase; }

.gdiv {
  width: 88%;
  height: .0625rem;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, var(--gold-mid), var(--gold-bright), var(--gold-mid), transparent);
}

.badge-row {
  display: flex;
  justify-content: center;
  padding-top: .4375rem;
  flex-shrink: 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  padding: .3125rem .875rem;
  border-radius: 2rem;
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.b-dist { background: rgba(5,20,5,.95); border: .0625rem solid rgba(201,146,10,.52); color: var(--gold-bright); box-shadow: 0 0 .75rem rgba(201,146,10,.18); }
.b-swap { background: rgba(22,12,0,.96); border: .0625rem solid rgba(232,176,32,.62); color: var(--gold-bright); box-shadow: 0 0 .875rem rgba(232,176,32,.25); }
.b-wait { background: rgba(5,5,20,.96); border: .0625rem solid rgba(100,100,220,.55); color: var(--blue-dim); box-shadow: 0 0 .75rem rgba(100,100,200,.15); }
.b-found { background: rgba(0,14,8,.96); border: .0625rem solid rgba(0,170,100,.55); color: var(--teal); box-shadow: 0 0 .75rem rgba(0,170,100,.15); }
.b-none { background: rgba(20,0,0,.96); border: .0625rem solid rgba(200,17,17,.55); color: var(--red-bright); box-shadow: 0 0 .75rem rgba(200,17,17,.15); }

.arena {
  position: relative;
  flex: 1;
  overflow: hidden;
  contain: layout;
}

.stage-glow {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,176,32,.18) 0%, rgba(232,176,32,.06) 50%, transparent 70%);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
  z-index: 1;
}

.stage-glow.on { opacity: 1; }

.yb-label {
  position: absolute;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%);
  font-weight: 700;
  padding: .125rem .4375rem;
  border: .0625rem solid rgba(255,216,77,.45);
  border-radius: .25rem;
  background: rgba(0,0,0,.72);
  color: var(--gold-bright);
  font-family: "Cinzel", serif;
  font-size: .4375rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 0 .5rem rgba(255,216,77,.85);
  transition: opacity .3s ease;
}

.yb-label.on { opacity: 1; }

.session-ctr {
  position: absolute;
  bottom: .625rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .375rem;
  align-items: center;
  font-family: "Cinzel", serif;
  font-size: .375rem;
  color: rgba(255,255,255,.18);
  letter-spacing: .15em;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 2;
}

.sc-dot {
  width: .25rem;
  height: .25rem;
  border-radius: 50%;
  background: var(--gold-mid);
  opacity: .45;
  animation: scPulse 2s ease-in-out infinite;
}

@keyframes scPulse { 0%,100%{opacity:.3} 50%{opacity:.8} }

.carousel-vp {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-54%);
  height: clamp(16rem, 40vh, 28rem);
  overflow: hidden;
  pointer-events: none;
  z-index: 15;
}

.carousel-track {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 5.375rem;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
}

.carousel-dots {
  position: absolute;
  z-index: 16;
  bottom: 4.5rem;
  left: 50%;
  display: flex;
  gap: .3125rem;
  transform: translateX(-50%);
  pointer-events: none;
  transition: opacity .3s ease;
}

.carousel-dots.off { opacity: 0; }
.carousel-dots.on { opacity: 1; }
.cdot { width: .3125rem; height: .3125rem; border-radius: 50%; background: rgba(201,146,10,.25); transition: background .3s ease, transform .3s ease; }
.cdot.active { background: var(--gold-bright); transform: scale(1.4); }

.ctn-card {
  width: clamp(13.625rem, 46vw, 30rem);
  height: clamp(10rem, 28vh, 18rem);
  flex-shrink: 0;
  border-radius: .875rem;
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, #0a220a 0%, #071507 50%, #050f05 100%);
  border: .09375rem solid rgba(201,146,10,.35);
  box-shadow: 0 0 0 .0625rem rgba(201,146,10,.12), 0 .5rem 2rem rgba(0,0,0,.8), inset 0 .0625rem 0 rgba(255,216,77,.08);
  transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}

.ctn-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0, transparent 3.375rem, rgba(255,255,255,.018) 3.375rem, rgba(255,255,255,.018) 3.4375rem);
  pointer-events: none;
}

.ctn-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: .0625rem;
  background: linear-gradient(90deg, transparent, rgba(201,146,10,.3), rgba(255,216,77,.5), rgba(201,146,10,.3), transparent);
}

.ctn-card.selected { border-color: var(--gold-mid); box-shadow: 0 0 0 .0625rem rgba(201,146,10,.45), 0 .5rem 2.5rem rgba(0,0,0,.85), 0 0 2rem rgba(201,146,10,.25), inset 0 .0625rem 0 rgba(255,216,77,.15); transform: scale(1.04); }
.ctn-card.passed { opacity: .32; transform: scale(.92); }

.ctn-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: .625rem .875rem .375rem;
  border-bottom: .0625rem solid rgba(201,146,10,.12);
}

.ctn-id { font-family: "Cinzel Decorative", cursive; font-size: .5rem; font-weight: 700; letter-spacing: .2em; color: rgba(201,146,10,.55); text-transform: uppercase; }
.ctn-range { font-family: "Black Ops One", system-ui; font-size: 1rem; font-weight: 400; line-height: 1; color: var(--cream); margin-top: .125rem; letter-spacing: .02em; }
.ctn-count { font-family: "Cinzel", serif; font-size: .375rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.25); text-align: right; margin-top: .25rem; }
.ctn-badge { font-family: "Cinzel", serif; font-size: .3125rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(201,146,10,.5); background: rgba(201,146,10,.1); border: .0625rem solid rgba(201,146,10,.2); border-radius: .25rem; padding: .09375rem .3125rem; }
.ctn-grid { padding: .375rem .625rem .5rem; display: flex; flex-wrap: wrap; gap: .3125rem; align-content: flex-start; }

.ctn-box, .lb-cbox, .player-box {
  background: linear-gradient(150deg, var(--kraft-hi), var(--kraft-mid), var(--kraft-lo));
}

.ctn-box, .lb-cbox {
  position: relative;
  overflow: hidden;
}

.ctn-box {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: .1875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: .0625rem solid rgba(120,80,20,.55);
  box-shadow: inset -.125rem -.1875rem .375rem rgba(0,0,0,.5), inset .0625rem .0625rem .1875rem rgba(220,170,80,.22);
  opacity: 0;
  transform: scale(0);
  transition: opacity .22s ease, transform .22s cubic-bezier(.34,1.56,.64,1);
  flex-shrink: 0;
}

.ctn-box::before {
  content: "";
  position: absolute;
  top: 27%;
  left: 0;
  right: 0;
  height: .0625rem;
  background: rgba(0,0,0,.3);
}

.ctn-box::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 25%;
  background: linear-gradient(180deg, rgba(215,175,95,.28) 0%, rgba(195,155,75,.22) 100%);
  border-left: .0625rem solid rgba(185,145,65,.28);
  border-right: .0625rem solid rgba(185,145,65,.28);
}

.ctn-box.shown { opacity: 1; transform: scale(1); }
.ctn-box.peek.shown { opacity: .62; transform: scale(.94); }
.ctn-box.is-player.shown { background: linear-gradient(150deg, #2a5c14, #1a3a0a, #142a08); border-color: var(--gold-bright); box-shadow: inset -.125rem -.1875rem .375rem rgba(0,0,0,.5), 0 0 0 .09375rem rgba(255,216,77,.6); }
.ctn-box.is-player.shown .ctn-box-num { color: var(--gold-bright); text-shadow: 0 0 .375rem rgba(255,216,77,.9); }
.ctn-box.is-player.shown::before { background: linear-gradient(180deg, rgba(255,216,77,.28) 0%, rgba(200,160,40,.18) 100%); animation: haloFade 1.2s ease-in-out infinite; }
.ctn-box-num, .lb-cbox-num, .box-num { font-family: "Black Ops One", system-ui; color: var(--kraft-ink); }
.ctn-box-num { font-size: .5rem; font-weight: 400; z-index: 2; line-height: 1; }

@keyframes haloFade { 0%,100%{opacity:.55} 50%{opacity:1} }

.player-box {
  position: absolute;
  width: clamp(6rem, 15vmin, 9rem);
  height: clamp(6rem, 15vmin, 9rem);
  border-radius: .25rem;
  overflow: hidden;
  z-index: 20;
  background: linear-gradient(150deg, var(--kraft-hi) 0%, var(--kraft-mid) 42%, #9a6828 68%, var(--kraft-lo) 100%);
  box-shadow: inset -.1875rem -.25rem .5rem rgba(0,0,0,.52), inset .09375rem .125rem .3rem rgba(220,170,80,.28), 0 .25rem .875rem rgba(0,0,0,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  will-change: transform;
}

.player-box::before {
  content: "";
  position: absolute;
  top: 28%;
  left: 0;
  right: 0;
  height: .0625rem;
  background: rgba(0,0,0,.35);
  pointer-events: none;
}

.player-box::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 26%;
  background: linear-gradient(180deg, rgba(215,175,95,.3) 0%, rgba(195,155,75,.24) 100%);
  border-left: .0625rem solid rgba(185,145,65,.32);
  border-right: .0625rem solid rgba(185,145,65,.32);
  pointer-events: none;
}

.box-num {
  font-family: "Black Ops One", system-ui;
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1;
  z-index: 2;
  color: var(--kraft-ink);
  text-shadow: 0 .0625rem 0 rgba(220,175,80,.4);
  user-select: none;
}

.box-halo {
  position: absolute;
  inset: -.75rem;
  border-radius: .75rem;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  will-change: opacity;
}

.box-lock {
  position: absolute;
  bottom: .45rem;
  left: 50%;
  transform: translateX(-50%) translateY(.25rem);
  padding: .125rem .35rem;
  border-radius: .75rem;
  border: .0625rem solid rgba(255,216,77,.42);
  background: rgba(0,0,0,.62);
  font-family: "Cinzel", serif;
  font-size: .4rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--gold-bright);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 3;
  pointer-events: none;
}

.player-box.stage-idle {
  box-shadow: inset -.1875rem -.25rem .5rem rgba(0,0,0,.52), inset .09375rem .125rem .3rem rgba(220,170,80,.28), 0 0 0 .125rem rgba(255,216,77,.38), 0 .5rem 1.5rem rgba(0,0,0,.8);
}

.player-box.stage-idle .box-halo {
  box-shadow: 0 0 2rem rgba(232,176,32,.85), 0 0 5rem rgba(232,176,32,.3);
  animation: haloPulse 2.5s ease-in-out infinite;
}

.player-box.waiting {
  background: linear-gradient(150deg, #1a1a3e 0%, #101030 50%, #0a0a26 100%);
  box-shadow: inset -.1875rem -.25rem .5rem rgba(0,0,0,.6), 0 0 0 .09375rem rgba(100,100,220,.35);
}

.player-box.waiting::before { background: rgba(100,100,220,.22); }

.player-box.waiting::after {
  background: linear-gradient(180deg, rgba(100,100,220,.22) 0%, rgba(80,80,180,.16) 100%);
  border-color: rgba(100,100,220,.22);
}

.player-box.waiting .box-num {
  color: var(--blue-dim);
  text-shadow: 0 0 .75rem rgba(100,100,220,.85);
}

.player-box.waiting .box-halo {
  box-shadow: 0 0 1.5rem rgba(100,100,200,.9), 0 0 3rem rgba(100,100,200,.45);
  animation: haloPulse 1.4s ease-in-out infinite;
}

.player-box.locked {
  background: linear-gradient(150deg, #2c2204 0%, #181204 52%, #0f0b03 100%);
  box-shadow: inset -.1875rem -.25rem .5rem rgba(0,0,0,.6), 0 0 0 .125rem rgba(255,216,77,.52), 0 .5rem 1.5rem rgba(0,0,0,.85);
}

.player-box.locked::before { background: rgba(255,216,77,.32); }

.player-box.locked::after {
  background: linear-gradient(180deg, rgba(255,216,77,.22) 0%, rgba(170,130,30,.18) 100%);
  border-color: rgba(255,216,77,.28);
}

.player-box.locked .box-num {
  color: var(--gold-bright);
  text-shadow: 0 0 .875rem rgba(255,216,77,.8);
}

.player-box.locked .box-halo {
  box-shadow: 0 0 1.5rem rgba(232,176,32,.55);
  opacity: .8;
}

.player-box.locked .box-lock {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.player-box.lock-in { animation: lockIn .55s cubic-bezier(.22,1,.36,1) both; }
.player-box.shake { animation: boxShake .55s cubic-bezier(.36,.07,.19,.97) both; }
.player-box.no-match-flash { animation: noMatchFlash .4s ease-in-out 4; }

@keyframes haloPulse { 0%,100%{opacity:.55} 50%{opacity:1} }
@keyframes lockIn { 0%{transform:scale(1) rotate(0deg)} 45%{transform:scale(1.08) rotate(-1deg)} 100%{transform:scale(1) rotate(0deg)} }
@keyframes boxShake { 0%,100%{transform:translateX(0) rotate(0deg)} 10%{transform:translateX(-.35rem) rotate(-2deg)} 20%{transform:translateX(.35rem) rotate(2deg)} 30%{transform:translateX(-.28rem) rotate(-1.5deg)} 40%{transform:translateX(.28rem) rotate(1.5deg)} 50%{transform:translateX(-.2rem) rotate(-1deg)} 60%{transform:translateX(.2rem) rotate(1deg)} 70%{transform:translateX(-.1rem) rotate(-.5deg)} 80%{transform:translateX(.1rem) rotate(.5deg)} 90%{transform:translateX(-.05rem)} }
@keyframes noMatchFlash { 0%,100%{opacity:1} 50%{opacity:.45} }

.track-wrap { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 3; }
.track-svg { display: block; width: 100%; height: clamp(6.875rem, 18vh, 11rem); overflow: visible; }

.status-area { padding: 0 1.25rem .375rem; text-align: center; }
.st-title { font-size: 1.0625rem; font-weight: 700; letter-spacing: .04em; line-height: 1.3; background: linear-gradient(135deg, var(--gold-bright), var(--gold), var(--gold-mid)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 .125rem .5rem rgba(0,0,0,.85)); }
.st-sub { font-size: .6875rem; line-height: 1.5; color: rgba(255,255,255,.4); letter-spacing: .04em; margin-top: .25rem; }

.action-bar {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  align-items: center;
  padding: .625rem max(1.25rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
  background: linear-gradient(0deg, rgba(0,0,0,.93) 55%, transparent);
}

.prog-wrap { width: min(100%, 56rem); display: flex; flex-direction: column; gap: .375rem; }
.prog-track { width: 100%; height: .25rem; border-radius: .25rem; overflow: hidden; background: rgba(255,255,255,.06); }
.prog-fill { height: 100%; width: 0; border-radius: .25rem; background: linear-gradient(90deg, var(--gold-mid), var(--gold-bright)); box-shadow: 0 0 .5rem var(--gold-mid); transition: width .35s ease; }
.prog-label { font-size: .5625rem; color: var(--cream-dim); letter-spacing: .1em; }

.swap-actions { width: min(100%, 56rem); display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; }
.swap-actions.solo { grid-template-columns: 1fr; }

.btn-swap, .btn-next, .ready-btn {
  border: 0;
  border-radius: .875rem;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .12em;
  min-height: 2.75rem;
}

.btn-swap {
  width: 100%;
  padding: .9375rem;
  position: relative;
  overflow: hidden;
  font-size: .875rem;
  font-weight: 700;
  transition: transform .15s, box-shadow .15s, background .3s, color .3s;
}

.btn-swap.btn-keep.active {
  background: linear-gradient(135deg, rgba(255,216,77,.18), rgba(201,146,10,.24));
  border: .0625rem solid rgba(255,216,77,.38);
  color: var(--gold-bright);
  box-shadow: 0 .25rem 1.25rem rgba(201,146,10,.18), inset 0 .0625rem 0 rgba(255,255,255,.08);
}

.btn-swap.btn-swap-main.active {
  background: linear-gradient(135deg, #c9920a 0%, #e8b020 35%, #ffd84d 55%, #e8b020 75%, #c9920a 100%);
  background-size: 200%;
  color: #030c03;
  font-weight: 900;
  box-shadow: 0 .25rem 1.5rem rgba(201,146,10,.65), 0 0 0 .0625rem rgba(255,216,77,.25);
  animation: shimmer 2.5s linear infinite;
}

.btn-swap.active:hover { transform: translateY(-.125rem); }
.btn-swap.active:active { transform: translateY(.0625rem); }

.btn-swap.btn-swap-main.active::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  animation: sweep 2.8s ease-in-out infinite;
}

.btn-swap.waiting {
  background: rgba(38,38,80,.55);
  border: .0625rem solid rgba(100,100,200,.6);
  color: var(--blue-dim);
  cursor: default;
  animation: pulseBlue 2s ease-in-out infinite;
}

.btn-swap.disabled {
  background: rgba(255,255,255,.035);
  border: .0625rem solid rgba(255,255,255,.06);
  color: rgba(255,255,255,.15);
  cursor: not-allowed;
  box-shadow: none;
  animation: none;
}
.dots { display: inline-flex; gap: .25rem; margin-left: .375rem; vertical-align: middle; }
.dots span { width: .3125rem; height: .3125rem; border-radius: 50%; background: var(--blue-mid); animation: blink 1.2s ease-in-out infinite; display: inline-block; }
.dots span:nth-child(2) { animation-delay: .2s; }
.dots span:nth-child(3) { animation-delay: .4s; }

.btn-note { font-size: .5rem; color: rgba(255,255,255,.2); letter-spacing: .06em; text-align: center; }

.r-pill {
  width: 100%;
  display: flex;
  gap: .75rem;
  align-items: center;
  padding: .875rem 1rem;
  border-radius: .875rem;
}

.rp-keep { background: rgba(40,28,0,.96); border: .0625rem solid rgba(232,176,32,.45); box-shadow: 0 0 1.5rem rgba(232,176,32,.12); }
.rp-found { background: rgba(0,22,12,.96); border: .0625rem solid rgba(0,175,105,.45); box-shadow: 0 0 1.5rem rgba(0,175,105,.1); }
.rp-none { background: rgba(30,0,0,.96); border: .0625rem solid rgba(200,17,17,.45); box-shadow: 0 0 1.5rem rgba(200,17,17,.1); }
.rp-icon { font-size: 2rem; flex-shrink: 0; }
.rp-title { font-family: "Cinzel", serif; font-size: .875rem; font-weight: 700; letter-spacing: .05em; }
.rp-keep .rp-title { color: var(--gold-bright); }
.rp-found .rp-title { color: var(--teal); }
.rp-none .rp-title { color: var(--red-bright); }
.rp-desc { font-size: .625rem; color: rgba(255,255,255,.35); line-height: 1.4; margin-top: .125rem; }

.ol {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .42s ease;
  z-index: 50;
}

.ol.on {
  opacity: 1;
  pointer-events: all;
}

.ol-ready { background: radial-gradient(ellipse 95% 95% at 50% 50%, rgba(12,31,12,.96), rgba(3,8,3,1) 100%); justify-content: center; }
.ready-card {
  width: min(88%, 42rem);
  display: flex;
  flex-direction: column;
  gap: .875rem;
  padding: 1.5rem;
  border-radius: 1.25rem;
  background: linear-gradient(160deg, rgba(7,20,7,.96), rgba(3,8,3,.98));
  border: .0625rem solid rgba(201,146,10,.38);
  box-shadow: 0 1rem 3rem rgba(0,0,0,.5);
  text-align: center;
}

.ready-eyebrow { font-size: .5rem; letter-spacing: .18em; color: rgba(255,216,77,.6); text-transform: uppercase; }
.ready-title { font-family: "Cinzel Decorative", cursive; font-size: 1rem; color: var(--gold-bright); }
.ready-copy, .ready-hint { font-size: .6rem; line-height: 1.5; color: rgba(255,255,255,.45); }
.ready-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.ready-stat { display: flex; flex-direction: column; gap: .25rem; padding: .625rem; border-radius: .75rem; background: rgba(255,255,255,.04); }
.ready-stat span { font-size: .45rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.22); }
.ready-stat strong { font-family: "Cinzel", serif; color: var(--cream); }
.ready-btn { padding: .95rem; font-size: .85rem; font-weight: 800; background: linear-gradient(135deg, #c9920a, #ffd84d); color: #051005; }
.ready-btn:disabled { background: rgba(255,255,255,.05); color: rgba(255,255,255,.22); cursor: not-allowed; }

.ol-loading { background: radial-gradient(ellipse 90% 90% at 50% 50%, #0c1f0c 0%, #060e06 55%, #030803 100%); justify-content: center; gap: 0; }
.ls-orb {
  width: 7rem;
  height: 7rem;
  position: relative;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  display: flex;
  border-radius: 50%;
}

.ls-orb::before {
  content: "";
  position: absolute;
  inset: -.375rem;
  border: .1875rem solid transparent;
  border-radius: 50%;
  border-top-color: var(--gold-bright);
  border-right-color: var(--gold);
  animation: spin 1.4s linear infinite;
  box-shadow: 0 0 1.25rem rgba(232,176,32,.45);
}

.ls-orb::after {
  content: "";
  position: absolute;
  inset: .625rem;
  border-radius: 50%;
  border: .0625rem solid rgba(232,176,32,.2);
  background: radial-gradient(circle, rgba(232,176,32,.14) 0%, transparent 70%);
  animation: glowPulse 1.6s ease-in-out infinite;
}

.ls-icon {
  font-size: 3rem;
  z-index: 1;
  animation: iconBounce 1.6s ease-in-out infinite;
}

.ls-title {
  font-family: "Cinzel Decorative", cursive;
  font-size: 1.125rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold), var(--gold-mid));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: .1em;
  margin-bottom: .5rem;
  text-align: center;
  animation: titleGlow 1.8s ease-in-out infinite;
}

.ls-sub { font-family: "Cinzel", serif; font-size: .625rem; color: rgba(255,255,255,.32); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 2.5rem; }
.ls-segs { width: 70%; display: flex; gap: .25rem; }
.ls-seg { flex: 1; height: .25rem; background: rgba(255,255,255,.07); border-radius: .25rem; overflow: hidden; }
.ls-seg-fill { width: 0; height: 100%; border-radius: .25rem; background: linear-gradient(90deg, var(--gold-mid), var(--gold-bright)); box-shadow: 0 0 .5rem var(--gold); }
.ls-dots { display: flex; gap: .625rem; margin-top: 1.25rem; }
.ls-dot { width: .5rem; height: .5rem; border-radius: 50%; background: rgba(255,255,255,.1); animation: dotLight 1.2s ease-in-out infinite; }
.ls-dot:nth-child(1) { animation-delay: 0s; }
.ls-dot:nth-child(2) { animation-delay: .15s; }
.ls-dot:nth-child(3) { animation-delay: .3s; }
.ls-dot:nth-child(4) { animation-delay: .45s; }
.ls-dot:nth-child(5) { animation-delay: .6s; }
.ls-await { margin-top: .875rem; opacity: 0; font-family: "Cinzel", serif; font-size: .5rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.22); transition: opacity .6s ease; }
.ls-await.on { opacity: 1; }

.ol-win { background: linear-gradient(170deg, #021002 0%, #051405 45%, #030c03 100%); }
.ol-lose { background: linear-gradient(170deg, #120000 0%, #0d0100 45%, #100100 100%); }

.result-header {
  width: 100%;
  padding: 2.75rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .625rem;
  flex-shrink: 0;
  position: relative;
  text-align: center;
}

.result-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 7rem;
  pointer-events: none;
}

.ol-win .result-header::before { background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(201,146,10,.14) 0%, transparent 70%); }
.ol-lose .result-header::before { background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(180,17,17,.1) 0%, transparent 70%); }

.rh-icon {
  font-size: 4.5rem;
  line-height: 1;
  display: block;
  position: relative;
  z-index: 1;
}

.ol-win .rh-icon { animation: iconBounce 1.6s ease-in-out infinite; }

.rh-eyebrow {
  font-family: "Cinzel Decorative", cursive;
  font-size: .625rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

.ol-win .rh-eyebrow { color: var(--gold); }
.ol-lose .rh-eyebrow { color: var(--red); }
.prize-card {
  width: min(87%, 40rem);
  border-radius: 1.375rem;
  z-index: 2;
  position: relative;
  padding: 1.5rem 1.375rem 1.25rem;
  text-align: center;
  overflow: hidden;
  flex-shrink: 0;
}

.pc-win { background: linear-gradient(160deg, #152600, #0c1a00, #152600); border: .0625rem solid rgba(201,146,10,.72); box-shadow: 0 0 0 .0625rem rgba(201,146,10,.15), 0 1.25rem 3.75rem rgba(0,0,0,.88), 0 -.125rem 1.75rem rgba(201,146,10,.1); }
.pc-lose { background: linear-gradient(160deg, #1f0300, #140200, #1f0300); border: .0625rem solid rgba(140,14,14,.65); box-shadow: 0 0 0 .0625rem rgba(140,14,14,.1), 0 1.25rem 3.75rem rgba(0,0,0,.88); }
.pc-win::before { content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: .0625rem; background: linear-gradient(90deg, transparent, var(--gold-bright), transparent); }
.pc-lose::before { content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: .0625rem; background: linear-gradient(90deg, transparent, var(--red), transparent); }
.pc-eyebrow { font-family: "Cinzel", serif; font-size: .5625rem; letter-spacing: .2em; text-transform: uppercase; margin-bottom: .75rem; }
.pc-win .pc-eyebrow { color: var(--gold-mid); }
.pc-lose .pc-eyebrow { color: rgba(160,55,55,.65); }
.pc-emoji { display: block; margin-bottom: .5rem; font-size: 2.25rem; }
.pc-amount { font-family: "Cinzel Decorative", cursive; font-size: 2.875rem; font-weight: 900; line-height: 1; margin-bottom: .5rem; }
.pc-win .pc-amount { background: linear-gradient(135deg, var(--gold-bright), var(--gold), var(--gold-shine), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 1.25rem rgba(232,176,32,.5)); animation: prizeIn .7s cubic-bezier(.34,1.56,.64,1) both; }
.pc-lose .pc-amount { background: linear-gradient(135deg, #7a3535, #aa4444); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 2.25rem; }
.pc-detail { font-size: .6875rem; color: rgba(255,255,255,.22); letter-spacing: .05em; }
.pc-lose-note { margin-top: .625rem; padding: .5rem .875rem; border-radius: .625rem; background: rgba(140,17,17,.18); border: .0625rem solid rgba(140,17,17,.3); font-size: .5625rem; color: rgba(255,100,100,.6); letter-spacing: .05em; line-height: 1.5; }
.btn-next { width: min(87%, 40rem); padding: .9375rem; font-size: .8125rem; font-weight: 700; margin-top: .875rem; transition: transform .15s; flex-shrink: 0; position: relative; overflow: hidden; }
.ol-win .btn-next { background: linear-gradient(135deg, #7a5a00, #c9920a, #e8b020); color: #040c04; box-shadow: 0 .25rem 1.25rem rgba(201,146,10,.35); }
.ol-lose .btn-next { background: linear-gradient(135deg, #5a0000, #aa0e0e, #cc1111); color: var(--cream); box-shadow: 0 .25rem 1.25rem rgba(180,17,17,.35); }
.btn-next:hover { transform: translateY(-.125rem); }
.btn-next::after { content: ""; position: absolute; top: 0; left: -80%; width: 55%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); animation: sweep 2.5s ease-in-out infinite; }
.cd-note { margin-top: .5rem; font-family: "Cinzel", serif; font-size: .625rem; color: rgba(255,255,255,.45); letter-spacing: .1em; flex-shrink: 0; }

@keyframes prizeIn { from{transform:scale(.3);opacity:0} to{transform:scale(1);opacity:1} }

.conf-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 60; }
.cp { position: absolute; top: -.75rem; opacity: 0; animation: cpFall linear forwards; }

.ol-lb {
  background: linear-gradient(168deg, #071007 0%, #050d05 55%, #060e06 100%);
  justify-content: flex-start;
}

.lb-header { width: 100%; padding: 1.25rem 1.25rem 0; text-align: center; flex-shrink: 0; }
.lb-title { font-family: "Cinzel Decorative", cursive; font-size: 1.0625rem; font-weight: 900; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: .12em; margin: .625rem 0 .1875rem; }
.lb-meta { font-size: .5rem; color: rgba(255,255,255,.22); letter-spacing: .15em; text-transform: uppercase; margin-bottom: .75rem; }
.lb-divider-line { width: 100%; height: .0625rem; background: linear-gradient(90deg, transparent, var(--gold-mid), var(--gold-bright), var(--gold-mid), transparent); }
.lb-list {
  width: 100%;
  flex: 1;
  overflow-y: auto;
  padding: .375rem .875rem .5rem;
  display: flex;
  flex-direction: column;
  gap: .4375rem;
  min-height: 0;
}

.lb-list::-webkit-scrollbar { width: .1875rem; }
.lb-list::-webkit-scrollbar-thumb { background: rgba(201,146,10,.28); border-radius: .25rem; }

.lb-row {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5625rem .75rem;
  border-radius: .75rem;
  opacity: 0;
  animation: rowUp .35s ease forwards;
}

@keyframes rowUp { from{opacity:0;transform:translateY(.75rem)} to{opacity:1;transform:translateY(0)} }

.lb-row.w { background: linear-gradient(135deg, rgba(20,40,0,.97), rgba(11,26,0,.97)); border: .0625rem solid rgba(201,146,10,.3); }
.lb-row.l { background: rgba(255,255,255,.02); border: .0625rem solid rgba(255,255,255,.045); }
.lb-row.you { border-color: var(--gold)!important; box-shadow: 0 0 .75rem rgba(201,146,10,.2); }
.lb-av { border: .09375rem solid rgba(255,255,255,.08); }
.lb-row.w .lb-av { background: linear-gradient(135deg, var(--gold-deep), var(--gold-mid)); border: .09375rem solid var(--gold); color: #060f06; }
.lb-row.l .lb-av { background: rgba(255,255,255,.04); border: .09375rem solid rgba(255,255,255,.08); color: rgba(255,255,255,.28); }
.lb-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.lb-name-row { display: flex; gap: .25rem; align-items: center; justify-content: flex-start; width: 100%; min-width: 0; overflow: hidden; }
.lb-nm { display: block; flex: 0 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: "Cinzel", serif; font-size: .6875rem; font-weight: 700; }
.lb-row.w .lb-nm { color: var(--cream); }
.lb-row.l .lb-nm { color: rgba(255,255,255,.26); }
.lb-you-tag { font-size: .375rem; color: var(--gold-mid); letter-spacing: .06em; flex-shrink: 0; }
.lb-boxes { display: flex; align-items: center; gap: .25rem; margin-top: .125rem; max-width: 100%; }
.lb-cbox { width: 1.25rem; height: 1.25rem; border-radius: .125rem; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; box-shadow: inset -.09375rem -.125rem .25rem rgba(0,0,0,.5), inset .0625rem .0625rem .125rem rgba(220,170,80,.22); }
.lb-cbox::before { content: ""; position: absolute; top: 28%; left: 0; right: 0; height: .0625rem; background: rgba(0,0,0,.3); }
.lb-cbox::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 26%; background: rgba(195,155,75,.25); border-left: .0625rem solid rgba(185,145,65,.28); border-right: .0625rem solid rgba(185,145,65,.28); }
.lb-cbox.old { opacity: .28; filter: grayscale(.4); }
.lb-cbox.old.was-prize { opacity: .28; filter: grayscale(.3) sepia(.5); background: linear-gradient(150deg, #a04040, #7a2020, #5a1010); }
.lb-row.l .lb-cbox { background: linear-gradient(150deg, #2a2a2a, #1a1a1a, #111); box-shadow: inset -.09375rem -.125rem .25rem rgba(0,0,0,.5); }
.lb-row.l .lb-cbox::after { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.05); }
.lb-row.l .lb-cbox-num { color: rgba(255,255,255,.28); }
.lb-swap-arrow { font-size: .4375rem; color: rgba(255,255,255,.22); flex-shrink: 0; }
.lb-prize { font-size: .75rem; font-weight: 700; font-family: "Cinzel", serif; text-align: right; flex-shrink: 0; }
.lb-row.w .lb-prize { color: var(--gold-bright); }
.lb-row.l .lb-prize { color: rgba(255,255,255,.14); }
.lb-footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .75rem 1.125rem 1.375rem;
  border-top: .0625rem solid rgba(255,255,255,.04);
  background: linear-gradient(0deg, rgba(0,0,0,.5), transparent);
}

.lb-pool-lbl { font-size: .4375rem; color: rgba(255,255,255,.22); letter-spacing: .15em; text-transform: uppercase; }
.lb-pool-val { font-size: 1rem; font-weight: 700; color: var(--gold-bright); margin-top: .125rem; }
.lb-session { font-size: .4375rem; color: rgba(255,255,255,.18); line-height: 1.5; text-align: right; letter-spacing: .04em; font-family: "Lato", sans-serif; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes glowPulse { 0%,100%{opacity:.5} 50%{opacity:1} }
@keyframes iconBounce { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }
@keyframes titleGlow { 0%,100%{filter:drop-shadow(0 0 .5rem rgba(232,176,32,.3))} 50%{filter:drop-shadow(0 0 1.25rem rgba(232,176,32,.7))} }
@keyframes blink { 0%,80%,100%{opacity:.15} 40%{opacity:1} }
@keyframes dotLight { 0%,80%,100%{background:rgba(255,255,255,.1)} 40%{background:var(--gold-bright);box-shadow:0 0 .5rem var(--gold)} }
@keyframes shimmer { from{background-position:200% 0} to{background-position:-200% 0} }
@keyframes sweep { 0%{left:-80%} 100%{left:160%} }
@keyframes pulseBlue { 0%,100%{box-shadow:0 0 .75rem rgba(100,100,200,.15)} 50%{box-shadow:0 0 1.75rem rgba(100,100,200,.5)} }
@keyframes cpFall { 0%{opacity:1;transform:translateY(0) rotate(0deg)} 85%{opacity:.7} 100%{opacity:0;transform:translateY(52rem) rotate(540deg)} }

@media (orientation: landscape) and (max-height: 600px) {
  html { font-size: clamp(13px, 2.25vmin, 16px); }
  .hud { padding-top: .625rem; padding-bottom: .4rem; }
  .badge-row { padding-top: .25rem; }
  .status-area { padding-bottom: .2rem; }
  .action-bar { gap: .3rem; padding-top: .35rem; padding-bottom: max(.6rem, env(safe-area-inset-bottom)); }
  .carousel-vp { height: min(42vh, 18rem); }
  .ctn-card { height: min(32vh, 12rem); }
}