:root {
  --bg-gradient: radial-gradient(circle at 50% 35%, #184594 0%, #0d2766 50%, #061338 100%);
  --navy-panel: #0d2252;
  --navy-panel-border: #235cb5;
  --gold-text: #ffd53d;
  --blue-text: #8dbaff;
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #030a1c;
  font-family: var(--font-family);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobile Screen Container - Perfectly Centered and Compact */
#game-wrapper {
  width: 100vw;
  max-width: 430px;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-gradient);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: max(14px, env(safe-area-inset-top, 14px)) 10px 16px 10px;
  box-shadow: 0 0 50px rgba(0,0,0,0.9);
}

/* Starry Background */
.starry-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 55%;
  background-image: 
    radial-gradient(1.5px 1.5px at 30px 40px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 120px 70px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 200px 30px, #ffe680, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 310px 80px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 380px 40px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 70px 180px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 360px 190px, #ffe680, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 180px 240px, #ffffff, rgba(0,0,0,0));
  background-size: 400px 300px;
  opacity: 0.8;
  pointer-events: none;
  z-index: 1;
}

/* Distant City Skyline Silhouette */
.city-skyline {
  position: absolute;
  top: 290px;
  left: 0;
  width: 100%;
  height: 90px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 200' preserveAspectRatio='none'%3E%3Cpath fill='%23061436' fill-opacity='0.65' d='M0,200 L0,120 L30,120 L30,85 L70,85 L70,135 L100,135 L100,60 L150,60 L150,110 L190,110 L190,45 L230,45 L230,130 L270,130 L270,80 L320,80 L320,140 L370,140 L370,55 L420,55 L420,105 L460,105 L460,35 L500,35 L500,125 L550,125 L550,70 L600,70 L600,130 L650,130 L650,50 L700,50 L700,115 L750,115 L750,40 L800,40 L800,135 L850,135 L850,75 L900,75 L900,120 L950,120 L950,60 L1000,60 L1000,200 Z'/%3E%3C/svg%3E") no-repeat bottom center;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 1;
}

/* ================= 1. TOP HEADER ================= */
.top-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 38px;
  flex-shrink: 0;
}

.left-coin-group {
  display: flex;
  align-items: center;
  gap: 5px;
}

.coin-pill {
  display: flex;
  align-items: center;
  background: rgba(4, 15, 45, 0.9);
  border: 1.5px solid rgba(255, 215, 0, 0.45);
  border-radius: 18px;
  padding: 2px 5px 2px 3px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.6);
}

.gold-coin-svg {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff275 0%, #f5b000 60%, #ba7a00 100%);
  border: 1.5px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  color: #5c3500;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

.balance-val {
  font-size: 14.5px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 5px 0 4px;
  letter-spacing: 0.3px;
}

.btn-add-coin {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff785 0%, #ffbb00 60%, #cc8000 100%);
  border: 1.5px solid #ffffff;
  color: #4a2400;
  font-size: 14px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.btn-info-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff8cc;
  border: 1.5px solid #d49800;
  color: #543100;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.right-action-icons {
  display: flex;
  align-items: center;
  gap: 4px;
}

.header-action-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(8, 25, 66, 0.85);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.4);
  transition: transform 0.1s;
}

.header-action-circle:active {
  transform: scale(0.9);
}

/* Floating Corner Trophy & Chest */
.floating-trophy {
  position: absolute;
  top: 42px;
  left: 6px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.floating-trophy img {
  width: 38px;
  height: 38px;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.6));
}

.trophy-pill-count {
  background: rgba(0, 0, 0, 0.85);
  color: #ffffff;
  border: 1px solid #ffd700;
  font-size: 9px;
  font-weight: 900;
  padding: 0 4px;
  border-radius: 8px;
  margin-top: -5px;
}

.floating-chest {
  position: absolute;
  top: 42px;
  right: 6px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.floating-chest img {
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.6));
}

/* ================= 2. FERRIS WHEEL MAIN ARENA ================= */
.ferris-arena {
  position: relative;
  width: 100%;
  height: 330px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  margin: 0 auto;
}

.wheel-stage {
  position: relative;
  width: 320px;
  height: 330px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ferris A-Frame Stand */
.ferris-stand {
  position: absolute;
  bottom: 0px;
  left: 110px;
  width: 100px;
  height: 155px;
  background: linear-gradient(180deg, #8a4128 0%, #3e170a 100%);
  clip-path: polygon(32% 0%, 68% 0%, 100% 100%, 0% 100%);
  z-index: 2;
  opacity: 0.9;
}

/* 8 Radiating Wooden Spokes */
.spokes-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 320px;
  height: 320px;
  z-index: 3;
  pointer-events: none;
}

/* Floating Side Fruit & Pizza Badges */
.side-badge-fruit {
  position: absolute;
  top: 246px;
  left: 8px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.side-badge-fruit img {
  width: 38px;
  height: 26px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}

.side-badge-tag {
  background: linear-gradient(180deg, #7ee6ff 0%, #0096e6 100%);
  color: #032b47;
  font-size: 9.5px;
  font-weight: 900;
  padding: 1px 9px;
  border-radius: 10px;
  border: 1.5px solid #ffffff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

.side-badge-pizza {
  position: absolute;
  top: 246px;
  right: 8px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.side-badge-pizza img {
  width: 38px;
  height: 26px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}

/* Center Bear Hub with 24H Daily Round Countdown & 30s Bet Timer */
.center-bear-hub {
  position: absolute;
  top: 106px;
  left: 106px;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: #ff6823;
  border: 3.5px solid #ffba42;
  box-shadow: 0 0 16px rgba(255, 120, 0, 0.75), inset 0 2px 6px rgba(255, 255, 255, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  z-index: 8;
  overflow: visible;
}

.bear-avatar-container {
  position: absolute;
  top: -24px;
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.bear-avatar {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.35));
  animation: bearBob 2.5s infinite ease-in-out;
}

.hub-timer-box {
  width: 100%;
  padding-bottom: 4px;
  text-align: center;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 24-Hour Daily Round Refresh Timer (10:00 PM Daily Reset) */
.daily-round-timer-badge {
  font-size: 9px;
  font-weight: 900;
  color: #fff9c4;
  background: rgba(0, 0, 0, 0.55);
  padding: 1px 6px;
  border-radius: 6px;
  line-height: 1.1;
  margin-bottom: 1px;
  border: 0.5px solid rgba(255, 215, 0, 0.6);
}

.bet-time-label {
  font-size: 11px;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  line-height: 1;
}

.bet-timer-count {
  font-size: 22px;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 2px 5px rgba(0,0,0,0.8);
  line-height: 1;
  font-family: 'Arial Black', Impact, sans-serif;
}

/* --- 8 FOOD CARDS (Symmetric Octagon in 320x340 stage) --- */
.item-card {
  position: absolute;
  width: 68px;
  height: 74px;
  background: linear-gradient(180deg, #fff7c2 0%, #ffde59 65%, #fca800 100%);
  border: 2px solid #ff9d00;
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), inset 0 2px 2px #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 3px 2px 2px 2px;
  cursor: pointer;
  z-index: 6;
  transition: transform 0.15s ease, border-color 0.2s, box-shadow 0.2s;
}

.item-card:active {
  transform: scale(0.94);
}

.item-card.highlighted {
  border-color: #ffffff;
  background: linear-gradient(180deg, #ffffff 0%, #ffe875 100%);
  box-shadow: 0 0 22px #ffe600, inset 0 0 8px #ffe600;
  transform: scale(1.12);
  z-index: 12;
}

.item-card.winner-card {
  border-color: #ffffff;
  background: linear-gradient(180deg, #ffffff 0%, #ffc800 100%);
  box-shadow: 0 0 30px #ff5100, inset 0 0 12px #ffea00;
  transform: scale(1.18);
  z-index: 15;
  animation: winnerCardPulse 0.5s infinite alternate;
}

.item-img-wrap {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.item-img-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.35));
}

.item-mult-tag {
  font-size: 13px;
  font-weight: 900;
  color: #3b1900;
  text-shadow: 0 1px 0 #fff;
  line-height: 1;
  padding-bottom: 2px;
}

/* Placed Chips Cloud on Item */
.placed-chips-cloud {
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  pointer-events: none;
  display: none;
  z-index: 7;
}

.placed-chips-cloud.active {
  display: block;
}

.chip-mini-badge {
  position: absolute;
  font-size: 9px;
  font-weight: 900;
  color: #fff;
  background: #ff3b30;
  border: 1px solid #fff;
  border-radius: 8px;
  padding: 1px 4px;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.6);
  white-space: nowrap;
}

/* 100% Perfect Symmetric Coordinates inside 320x340 stage */
.slot-pos-0 { top: 0px; left: 126px; }         /* Top Center 12:00 (Apple x5) */
.slot-pos-1 { top: 32px; left: 216px; }       /* Top Right 1:30 (Lemon x5) */
.slot-pos-2 { top: 122px; left: 250px; }      /* Right 3:00 (Strawberry x5) */
.slot-pos-3 { top: 212px; left: 216px; }      /* Bottom Right 4:30 (Mango x5) */
.slot-pos-4 { top: 244px; left: 126px; }      /* Bottom Center 6:00 (Fish/Item x10) */
.slot-pos-5 { top: 212px; left: 36px; }       /* Bottom Left 7:30 (Burger x15) */
.slot-pos-6 { top: 122px; left: 2px; }        /* Left 9:00 (Pizza Slice x25) */
.slot-pos-7 { top: 32px; left: 36px; }        /* Top Left 10:30 (Roast Chicken x45) */

/* ================= 3. BOTTOM CONTROLS PANEL (ALIGNED TO USER'S MARKED YELLOW LINE) ================= */
.bottom-controls-panel {
  width: 100%;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 4.5px;
  z-index: 10;
}

.todays-win-bar {
  width: 94%;
  margin: 0 auto;
  background: radial-gradient(ellipse at center, rgba(16, 45, 112, 0.95) 0%, rgba(6, 20, 56, 0.98) 100%);
  border: 1.5px solid rgba(255, 215, 0, 0.45);
  border-radius: 16px;
  padding: 5px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

.today-win-label {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--blue-text);
  letter-spacing: 0.5px;
}

.today-win-amount {
  font-size: 16.5px;
  font-weight: 900;
  color: var(--gold-text);
  letter-spacing: 0.5px;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

.wager-prompt-pill {
  width: 90%;
  margin: 0 auto;
  background: #11347a;
  border: 1px solid #1f58c7;
  border-radius: 10px;
  padding: 3px 8px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: #c9e0ff;
}

/* ================= 4. CASINO CHIPS TRAY ================= */
.chip-tray-card {
  width: 98%;
  margin: 0 auto;
  background: linear-gradient(180deg, #17387a 0%, #0d2354 100%);
  border: 1.5px solid var(--navy-panel-border);
  border-radius: 16px;
  padding: 5px 8px;
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.1), 0 3px 8px rgba(0,0,0,0.5);
}

.chips-scroll-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
}

.casino-chip {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.casino-chip:hover {
  transform: translateY(-2px);
}

.casino-chip.selected {
  transform: translateY(-4px) scale(1.08);
  filter: drop-shadow(0 0 6px #7aff7a);
}

.casino-chip.selected::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border: 2px solid #63ff63;
  border-radius: 50%;
  animation: chipPulseRing 1.2s infinite ease-in-out;
}

.chip-inner-disc {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: #0d214a;
  border: 1.5px dashed rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 1px 2px #000;
}

/* Exact Chip Color Schemes from Screenshot */
.chip-cyan { background: radial-gradient(circle, #2ce8f5 0%, #089bb3 100%); border: 2px dashed #ffffff; }
.chip-green { background: radial-gradient(circle, #4df076 0%, #159c3a 100%); border: 2px dashed #ffffff; }
.chip-blue { background: radial-gradient(circle, #3895ff 0%, #1352bd 100%); border: 2px dashed #ffffff; }
.chip-orange { background: radial-gradient(circle, #ff9b38 0%, #cc5500 100%); border: 2px dashed #ffffff; }
.chip-red { background: radial-gradient(circle, #ff4747 0%, #bd1515 100%); border: 2px dashed #ffffff; }
.chip-purple { background: radial-gradient(circle, #d047ff 0%, #8713bd 100%); border: 2px dashed #ffffff; }

/* ================= 5. PROGRESSION CHESTS ================= */
.milestones-card {
  width: 98%;
  margin: 0 auto;
  background: linear-gradient(180deg, #17387a 0%, #0d2354 100%);
  border: 1.5px solid var(--navy-panel-border);
  border-radius: 14px;
  padding: 4px 10px;
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.1), 0 2px 6px rgba(0,0,0,0.5);
}

.milestones-track {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.track-line {
  position: absolute;
  top: 14px;
  left: 8px;
  right: 8px;
  height: 3px;
  background: #091738;
  border-radius: 2px;
  z-index: 1;
}

.track-line-progress {
  position: absolute;
  top: 14px;
  left: 8px;
  width: 32%;
  height: 3px;
  background: linear-gradient(90deg, #ffc800 0%, #ff8800 100%);
  border-radius: 2px;
  z-index: 2;
}

.chest-step-item {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.chest-step-img {
  width: 28px;
  height: 26px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
}

.chest-step-label {
  font-size: 9.5px;
  font-weight: 800;
  color: #c9e0ff;
  margin-top: 1px;
}

/* ================= 6. BOTTOM HISTORY ROW ================= */
.history-bottom-card {
  width: 98%;
  margin: 0 auto;
  background: linear-gradient(180deg, #17387a 0%, #0d2354 100%);
  border: 1.5px solid var(--navy-panel-border);
  border-radius: 12px;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.history-bottom-card::-webkit-scrollbar {
  display: none;
}

.history-badge-item {
  position: relative;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #6fd0ff 0%, #208bcc 100%);
  border: 1.5px solid #ffffff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

.history-badge-item img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.new-tag {
  position: absolute;
  top: -5px;
  left: -3px;
  background: #ffe600;
  color: #4a2d00;
  font-size: 8px;
  font-weight: 900;
  padding: 1px 4px;
  border-radius: 4px;
  border: 1px solid #ffffff;
  box-shadow: 0 2px 3px rgba(0,0,0,0.4);
}

/* Flying Chip Particle */
.flying-chip {
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  z-index: 100;
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 0 4px 8px rgba(0,0,0,0.6);
}

/* Modals */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.modal-overlay.active .modal-card {
  transform: scale(1);
}

/* ================= EXACT RESULT OF ROUND WINNER MODAL (FROM SCREENSHOT) ================= */
.round-result-modal-card {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  width: 100%;
  max-width: 430px;
  background: linear-gradient(180deg, #e30022 0%, #b80018 45%, #7a000e 100%);
  border-radius: 28px 28px 0 0;
  border-top: 2px solid #ff4d66;
  box-shadow: 0 -10px 40px rgba(220, 0, 35, 0.7);
  padding: 16px 16px 24px 16px;
  text-align: center;
  z-index: 1000;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-overlay.active .round-result-modal-card {
  transform: translateX(-50%) translateY(0);
}

.round-result-close-btn {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #ffffff;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
}

/* Floating Item Emblem at Top Center */
.round-result-emblem-wrap {
  position: absolute;
  top: -44px;
  left: 50%;
  transform: translateX(-50%);
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #5aff78 0%, #00b32d 65%, #005a17 100%);
  border: 3px solid #ffffff;
  box-shadow: 0 0 25px rgba(0, 255, 100, 0.8), inset 0 2px 4px rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.emblem-img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.5));
}

.round-result-title {
  font-size: 23px;
  font-weight: 900;
  color: #ffffff;
  font-family: Impact, -apple-system, sans-serif;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
  margin-top: 38px;
  line-height: 1.1;
}

.round-result-subtitle {
  font-size: 13.5px;
  font-weight: 600;
  color: #ffdde3;
  margin-top: 4px;
}

.round-result-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 16px 0 14px 0;
}

.divider-line {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
}

.divider-text {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.3px;
}

/* 3 Biggest Winners Row */
.biggest-winners-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  gap: 6px;
  padding: 0 6px 6px 6px;
}

.round-winner-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.round-winner-avatar-wrap {
  position: relative;
  width: 52px;
  height: 52px;
}

.round-winner-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  object-fit: cover;
  box-shadow: 0 3px 8px rgba(0,0,0,0.4);
}

.rank-circle-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  border: 1.5px solid #ffffff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.rank-1-badge {
  background: radial-gradient(circle, #ffcc00 0%, #ff9400 100%);
  color: #3b1900;
}

.rank-2-badge {
  background: radial-gradient(circle, #7ee6ff 0%, #00a2e8 100%);
  color: #002244;
}

.rank-3-badge {
  background: radial-gradient(circle, #ff9999 0%, #d43b3b 100%);
  color: #ffffff;
}

.round-winner-name {
  font-size: 11.5px;
  font-weight: 800;
  color: #ffffff;
  margin-top: 5px;
  max-width: 90px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.round-winner-coins {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
}

.gold-coin-mini {
  font-size: 12px;
}

.coin-amount-val {
  font-size: 13.5px;
  font-weight: 900;
  color: #ffd700;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

.podium-medal {
  font-size: 14px;
  margin-bottom: 2px;
}

.podium-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid #ffd700;
  object-fit: cover;
  margin-bottom: 3px;
}

.podium-name {
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  max-width: 60px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.podium-diamond {
  font-size: 10.5px;
  font-weight: 900;
  color: #ffe600;
}

/* ================= 24H AUTO-REFRESHING TOP 10 LEADERBOARD ================= */
.leaderboard-card {
  max-width: 360px;
  max-height: 85vh;
  padding: 16px 12px;
}

.leaderboard-scroll-list {
  max-height: 55vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 2px;
}

.leaderboard-row-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(8, 25, 68, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 6px 10px;
}

.leaderboard-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rank-badge {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  background: #1f3b73;
}

.rank-badge-1 { background: radial-gradient(circle, #ffd700, #b8860b); color: #4a2d00; border: 1px solid #fff; }
.rank-badge-2 { background: radial-gradient(circle, #e0e0e0, #808080); color: #000; border: 1px solid #fff; }
.rank-badge-3 { background: radial-gradient(circle, #cd7f32, #8b4513); color: #fff; border: 1px solid #fff; }

.leaderboard-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 215, 0, 0.6);
  object-fit: cover;
}

.leaderboard-name {
  font-size: 12.5px;
  font-weight: 800;
  color: #fff;
}

.leaderboard-diamond-text {
  font-size: 13px;
  font-weight: 900;
  color: #ffd700;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}