:root {
  --bg: #00033D;
  /* deep indigo */
  --panel: #001A5F;
  /* panel blue */
  --text: #ffffff;
  --muted: #A3D1FF;
  /* light sky */
  --accent: #0074FF;
  /* primary blue */
  --accent-soft: #24AAFF;
  --subaccent: #AF71FF;
  /* violet for subtabs */
  --positive: #19c37d;
  --negative: #ff5d5d;
  --rail: 360px;
  --rail-gap: 32px;
  /* extra bottom gap to reduce right rail height */
  --subtab-h: 44px;
  /* mobile subtab bar height */
  --bet-gap: 12px;
  /* keep gaps consistent between chips and panels */
}

* {
  box-sizing: border-box
}

html,
body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  /* Prevent horizontal scroll causing header mismatch */
}

body {
  margin: 0;
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background-color: var(--bg);
  background-image: url('./bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.muted {
  color: var(--muted)
}

/* Document scrollbar: reserve gutter to prevent layout shift, show on scroll only */
html {
  scrollbar-gutter: stable both-edges
}

/* Default hidden (but scrollable) */
html,
body {
  scrollbar-width: none
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0
}

/* Visible while scrolling; blue themed */
html.is-scrolling,
body.is-scrolling {
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent
}

html.is-scrolling::-webkit-scrollbar,
body.is-scrolling::-webkit-scrollbar {
  width: 10px;
  height: 10px
}

html.is-scrolling::-webkit-scrollbar-track,
body.is-scrolling::-webkit-scrollbar-track {
  background: transparent
}

html.is-scrolling::-webkit-scrollbar-thumb,
body.is-scrolling::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #2a78ff, #9a66ff);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .12)
}

html.is-scrolling::-webkit-scrollbar-thumb:hover,
body.is-scrolling::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #4990ff, #b480ff)
}

/* End document scrollbar */

.app {
  min-height: 100vh;
  /* Use dynamic viewport height where supported to avoid browser UI issues */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Header */
.hdr {
  position: absolute;
  top: 0;
  z-index: 20;
  background: #004DA9;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0, 116, 255, .35);
  width: 100%;
}

.hdr-inner-desktop {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 8px 14px;
  width: 100%;
  margin: 0
}

.hdr-inner-mobile {
  display: none
}

.hdr-mobile-right {
  display: flex;
  align-items: center;
  gap: 8px
}

.hdr-left {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: start;
}

.hdr-center {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
}

.status-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 24px;
  border-radius: 24px;
  color: #fff;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  transition: background-color 0.3s ease;
  min-width: 160px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.status-pill .status-phase {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-pill .status-eta {
  font-size: 16px;
}

/* Phase Colors */
.status-pill.betting {
  background-color: #00BF16;
  /* Green */
  box-shadow: 0 0 15px rgba(0, 191, 22, 0.4);
}

.status-pill.progress {
  background-color: #1B52D8;
  /* Blue */
  box-shadow: 0 0 15px rgba(27, 82, 216, 0.4);
}

.status-pill.payout {
  background-color: #E5CC39;
  /* Yellow */
  color: #fff;
  /* Deep blue/black for contrast on yellow */
  box-shadow: 0 0 15px rgba(229, 204, 57, 0.4);
}

.hdr-desktop-right {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
}

.brand {
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase
}

.hdr-balance {
  flex: 0 0 auto;
  margin: 0 12px;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  white-space: nowrap
}

.hamb {
  width: 36px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text);
  cursor: pointer
}

.hamb:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px
}

.hamb-lines {
  display: grid;
  gap: 4px
}

.hamb-lines span {
  display: block;
  width: 18px;
  height: 2px;
  background: #fff;
  border-radius: 10px;
}

/* Reuse or redefine live-pill to be independent of status-badge */
.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  background: #D32D2F;
  box-shadow: 0 2px 8px rgba(211, 45, 47, .15);
  font-size: 11px;
  font-weight: 700;
}

.live-pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 2px #fff, 0 0 8px 2px rgba(255, 255, 255, .53);
  animation: blink 1.4s ease-in-out infinite
}

.live-pill .txt {
  color: #fff;
  letter-spacing: .08em
}

@keyframes blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .2
  }
}

/* Dropdown */
.dd {
  position: absolute;
  right: 16px;
  top: 48px;
  z-index: 50;
  background: var(--panel);
  border: 1px solid rgba(0, 116, 255, .35);
  border-radius: 10px;
  min-width: 220px;
  max-width: 92vw;
  box-shadow: 0 10px 30px rgba(0, 104, 225, .35);
  padding: 6px
}

.dd a:last-child {
  margin-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.dd[hidden] {
  display: none
}

.dd a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none
}

.dd a:hover,
.dd a:focus {
  background: rgba(255, 255, 255, .06);
  outline: none
}

/* Main layout */
.main {
  /* max-width:1280px; */
  margin: 0 auto;
  /* margin-top: var(--hdr-offset, 72px); */
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: 100%;
  /* Ensure main content fills the viewport height below the header */
  min-height: calc(100dvh - var(--hdr-offset, 72px))
}

@media (min-width:1200px) {

  /* Desktop: left section ~65%, right section ~35% */
  .main {
    grid-template-columns: 65% 35%
  }
}

/* Left column fills available height: top status, expandable stage, bottom bet row */
.left {
  display: grid;
  /* grid-template-rows: auto 1fr auto; */
  min-height: 0;
  align-content: start;
  justify-content: start
}

/* Top status and stocks */
.top-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 10px
}

@media (min-width:900px) {
  .top-row {
    grid-template-columns: 1fr
  }

  /* .chips {
    display: flex !important;
    align-items: center;
    flex-direction: column;
  } */

  .bet-row {
    display: flex !important;
  }

  .bet-controls {
    display: flex !important;
  }
}

@media (min-width:1200px) {
  .top-row {
    margin-bottom: 14px
  }
}

.status-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 12px;
  border: 2px solid var(--accent-soft);
  color: var(--muted);
  box-shadow: 0 0 9px 1px rgba(0, 116, 255, 1);
  background: #001A5F;
  font-weight: 700;
  text-transform: uppercase;
  gap: 12px;
  width: 100%;
  box-sizing: border-box
}

.status-badge .live-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  background: #D32D2F;
  box-shadow: 0 2px 8px rgba(211, 45, 47, .15)
}

.status-badge .live-pill .dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 2px #fff, 0 0 8px 2px rgba(255, 255, 255, .53);
  animation: blink 1.4s ease-in-out infinite
}

.status-badge .live-pill .txt {
  color: #fff;
  letter-spacing: .08em
}

@keyframes blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .2
  }
}

.phase-time {
  display: flex;
  align-items: center;
  gap: 10px
}

.status-phase {
  letter-spacing: .3px
}

.status-eta {
  font-variant-numeric: tabular-nums;
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace
}

.stocks {
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: auto;
  padding: 6px 8px;
  background: linear-gradient(91deg, #0E377B 1.49%, #000E38 100%);
  border-radius: 10px;
  border: 1px solid #6DC1EE
}

.stocks .divider {
  width: 1px;
  height: 32px;
  background: #6DC1EE8C
}

.stock-card {
  flex: 0 0 auto;
  min-width: 120px
}

.stock-card {
  background: transparent;
  border: 0;
  border-radius: 6px;
  padding: 6px 8px;
  display: grid;
  gap: 6px
}

.stock-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase
}

.stock-num {
  display: flex;
  align-items: center;
  gap: 6px
}

.price {
  font-variant-numeric: tabular-nums;
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: 14px
}

.delta {
  font-variant-numeric: tabular-nums;
  font-family: "Roboto Mono", ui-monospace, monospace
}

.delta.pos {
  color: var(--positive)
}

.delta.neg {
  color: var(--negative)
}

/* Board strips and boxes */
.board {
  position: relative;
  display: grid;
  gap: 6px;
  grid-template-rows: minmax(64px, auto) auto minmax(64px, auto);
  align-content: center;
  justify-content: center
}

.board-center-row {
  grid-row: 2;
  display: grid;
  place-items: center;
  position: relative;
  width: 100%;
}

.board-center-row>* {
  grid-area: 1 / 1;
}

.grid-strip {
  display: grid;
  grid-auto-flow: column;
  gap: 0;
  overflow: hidden;
  padding: 0;
  background: linear-gradient(91deg, #0E377B 1.49%, #000E38 100%);
  border: 1px solid #6DC1EE;
  border-radius: 12px;
  min-height: 64px;
  align-items: stretch
}

.grid-strip.top {
  grid-template-columns: repeat(7, minmax(0, 1fr))
}

.grid-strip.bottom {
  grid-template-columns: repeat(6, minmax(0, 1fr))
}

.stk {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: calc(4px * var(--stk-scale, 1)) calc(12px * var(--stk-scale, 1));
  height: 100%;
  margin: 0;
  align-self: stretch;
  box-sizing: border-box;
  background: transparent;
}

.stk::after {
  content: "";
  position: absolute;
  right: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background: rgba(109, 193, 238, 0.5);
}

.stk:last-child::after {
  display: none;
}

.stk .sym {
  font-weight: 700;
  font-size: calc(max(10px, 16px * var(--stk-scale, 1)));
  line-height: 1.1;
  color: #cfe6ff;
  text-transform: uppercase;
  white-space: nowrap
}

.stk .val {
  font-variant-numeric: tabular-nums;
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: calc(max(10px, 15px * var(--stk-scale, 1)));
  line-height: 1.1;
  color: #fff;
  white-space: nowrap
}

.stk .val-box {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
}

.trend-icon {
  width: 10px;
  height: 10px;
  object-fit: contain;
  margin-top: 1px;
}

.stk.up,
.stk.down {
  background: transparent !important;
  box-shadow: none !important;
}

.stk.up .val {
  color: #19c37d
}

.stk.down .val {
  color: #ff5d5d
}

.stk {
  min-width: 0
}

/* allow grid items to shrink within their tracks */
.stk .sym,
.stk .val {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%
}

.board-table {
  width: 100%;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  justify-self: center;
  align-self: start;
  display: block;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, .35))
}

/* Small rectangles overlayed in the table area (only over center row) */
.table-overlay {
  position: relative;
  display: grid;
  place-items: center;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

.to-grid {
  position: relative;
  display: block;
  gap: 0;
  padding: 0;
  max-width: 100%;
  width: 100%;
  height: 100%;
  min-height: 0;
  pointer-events: none
}

.to-cell {
  position: absolute;
  width: 72px;
  height: 32px;
  display: grid;
  align-items: center;
  justify-items: center;
  padding: calc(6px * var(--to-scale, 1));
  border-radius: calc(6px * var(--to-scale, 1));
  background: rgba(0, 0, 0, .18);
  border: 1px solid rgba(255, 255, 255, .12);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25));
  transition: left .28s cubic-bezier(.18, .88, .32, 1.28), top .28s cubic-bezier(.18, .88, .32, 1.28), background-color .2s ease, border-color .2s ease;
  animation: to-hover 3.2s ease-in-out infinite;
  will-change: transform, left, top
}

.to-cell {
  background: rgba(255, 255, 255);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 12px;
}

.to-cell {
  animation: none;
  will-change: left, top
}

.to-cell .sym {
  font-size: calc(12px * var(--to-scale, 1));
  color: #000000;
  text-transform: uppercase;
  font-weight: 500
}

.to-cell.up {
  background: rgba(255, 255, 255);
  border-color: rgba(90, 253, 20, 0.761);
  border-radius: 16px;
}

.to-cell.down {
  background: rgba(255, 255, 255);
  border-color: rgba(255, 93, 93, .65);
  border-radius: 16px;
}

@keyframes to-hover {
  0% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-2px)
  }

  100% {
    transform: translateY(0)
  }
}

/* Static labels for UP / 1:2 and 7 DOWN / 1:2 */
.to-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scale(var(--to-ui-scale, var(--to-scale, 1)));
  transform-origin: center;
  text-align: center;
  font-weight: 800;
  pointer-events: none;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .5)
}

.to-label .l1 {
  font-size: clamp(16px, 2.4vw, 24px);
  letter-spacing: .06em
}

.to-label .l2 {
  font-size: clamp(12px, 1.8vw, 18px);
  opacity: .95
}

.to-label.up {
  top: 12%;
  color: var(--text)
}

.to-label.down {
  bottom: 12%;
  color: var(--text)
}

.to-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none
}

.to-oval {
  width: min(32%, 420px);
  height: min(30%, 140px);
  border-radius: 50%;
  pointer-events: none;
  transform: scale(var(--to-ui-scale, var(--to-scale, 1)));
  transform-origin: center;
  background:
    radial-gradient(ellipse at 35% 35%, #ffe46e, #e1b427 60%, #b07d06 100%);
  border: 3px solid #f2d34a;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, .25) inset,
    inset 0 8px 22px rgba(0, 0, 0, .25),
    0 6px 20px rgba(0, 0, 0, .36);
  display: grid;
  place-items: center;
  position: relative;
  overflow: visible;
  isolation: isolate
}

/* Disable legacy CSS glow to avoid rectangle artifacts; SVG ring replaces it */
.to-oval::after {
  content: none
}

.to-oval::before {
  content: none
}

.to-oval svg.to-orbit {
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  z-index: 1;
  overflow: visible;
  pointer-events: none
}

.to-oval .orbit {
  transform-origin: 50% 50%;
  animation: spin-glow 8s linear infinite
}

.to-oval .orbit-halo,
.to-oval .orbit-core {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 12 38 12 38
}

.to-oval .orbit-halo {
  stroke: rgba(255, 220, 120, .35);
  stroke-width: 18;
  opacity: .75
}

.to-oval .orbit-core {
  stroke: rgba(255, 250, 200, .95);
  stroke-width: 8;
  opacity: .95
}

.to-oval__title {
  position: relative;
  z-index: 2
}

@keyframes spin-glow {
  0% {
    transform: rotate(0deg)
  }

  100% {
    transform: rotate(360deg)
  }
}

.to-hit {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: auto;
  background: transparent;
  z-index: 3;
  cursor: pointer
}

.to-oval .timer {
  display: none
}

.to-oval__title {
  font-weight: 900;
  letter-spacing: .04em;
  font-size: clamp(20px, 3.4vw, 28px);
  color: #000;
  text-shadow: 0 1px 1px rgba(255, 255, 255, .6);
  line-height: 1.1;
}

.to-oval__subtitle {
  font-size: 0.5em;
  margin-top: 3px;
  opacity: 0.9;
  text-align: center;
}

@media (max-width: 420px) {
  .to-oval__subtitle {
    line-height: 1;
  }

  .to-oval__title {
    line-height: 1;
    font-size: 16px;
  }
}

.to-midline {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  transform: translateY(-50%);
  background: #ff0000;
  box-shadow: 0 0 10px rgba(255, 0, 0, .85)
}

/* Simple CSS glow for betting phase (no SVG) */
/* Keep base oval clean; glow handled via ::after when .glow is present */
.to-oval.glow {
  animation: none
}

@keyframes oval-orbit {
  0% {
    /* base soft glow + slimmer bright dot at right */
    filter:
      drop-shadow(0 0 4px rgba(255, 228, 110, .35)) drop-shadow(14px 0 6px rgba(255, 228, 110, .6)) drop-shadow(14px 0 2px rgba(255, 228, 110, .85));
  }

  25% {
    /* dot moves to bottom */
    filter:
      drop-shadow(0 0 4px rgba(255, 228, 110, .35)) drop-shadow(0 14px 6px rgba(255, 228, 110, .6)) drop-shadow(0 14px 2px rgba(255, 228, 110, .85));
  }

  50% {
    /* dot moves to left */
    filter:
      drop-shadow(0 0 4px rgba(255, 228, 110, .35)) drop-shadow(-14px 0 6px rgba(255, 228, 110, .6)) drop-shadow(-14px 0 2px rgba(255, 228, 110, .85));
  }

  75% {
    /* dot moves to top */
    filter:
      drop-shadow(0 0 4px rgba(255, 228, 110, .35)) drop-shadow(0 -14px 6px rgba(255, 228, 110, .6)) drop-shadow(0 -14px 2px rgba(255, 228, 110, .85));
  }

  100% {
    filter:
      drop-shadow(0 0 4px rgba(255, 228, 110, .35)) drop-shadow(14px 0 6px rgba(255, 228, 110, .6)) drop-shadow(14px 0 2px rgba(255, 228, 110, .85));
  }
}

/* Smooth rotating ring with two opposite highlights hugging the boundary */
.to-oval.glow::after {
  content: "";
  position: absolute;
  inset: 0;
  /* match oval bounds */
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  /* behind text, on top of fill */
  background:
    conic-gradient(from 0deg,
      rgba(255, 228, 110, 0) 0deg,
      rgba(255, 228, 110, 0) 130deg,
      rgba(255, 228, 110, 0) 148deg,
      rgba(255, 228, 110, .55) 162deg,
      rgba(255, 228, 110, .95) 176deg,
      rgba(255, 228, 110, .55) 190deg,
      rgba(255, 228, 110, 0) 200deg,
      rgba(255, 228, 110, 0) 310deg,
      rgba(255, 228, 110, 0) 328deg,
      rgba(255, 228, 110, .55) 342deg,
      rgba(255, 228, 110, .95) 356deg,
      rgba(255, 228, 110, .55) 370deg,
      rgba(255, 228, 110, 0) 360deg);

  /* ultra-thin ring right at the edge of the oval */
  -webkit-mask: radial-gradient(closest-side,
      transparent calc(100% - 3px),
      #000 100%);
  mask: radial-gradient(closest-side,
      transparent calc(100% - 3px),
      #000 100%);

  filter: blur(3px);
  /* subtle border glow */
  opacity: .95;
  animation: ring-spin 4.2s linear infinite;
  transform-origin: 50% 50%;
  mix-blend-mode: screen;
}

@keyframes ring-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Base full-perimeter glow so the whole boundary is visible, not just a line */
.to-oval.glow::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  /* behind oval fill */
  background: rgba(255, 228, 110, .6);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 48px), #000 calc(100% - 8px));
  mask: radial-gradient(closest-side, transparent calc(100% - 48px), #000 calc(100% - 8px));
  filter: blur(22px) saturate(1.05);
  opacity: .5;
}

/* Center result panel over the board */
.result-panel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 9;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  border-radius: 30px;
}

.result-panel__inner {
  position: relative;
  pointer-events: auto
}

.rp-box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(80vw, 320px);
  max-width: 320px;
  border-radius: 24px;
  border: 2px solid #ff2a2a;
  padding: 14px 15px;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 15px 1px rgba(255, 215, 0, 0.6);
}

.rp-title {
  margin: 0 0 4px 0;
  text-align: center;
  font-weight: 800;
  letter-spacing: .08em;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  font-size: clamp(20px, 4vw, 26px)
}

.rp-side {
  margin: 0;
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-size: clamp(16px, 3vw, 20px)
}

.rp-sub {
  margin: 0;
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-size: clamp(16px, 3vw, 20px)
}

.rp-amt {
  margin: 6px 0 0 0;
  text-align: center;
  font-weight: 900;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: clamp(22px, 4vw, 32px);
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .35)
}

.rp-amt.win {
  color: var(--positive)
}

.rp-amt.lose {
  color: var(--negative)
}

.result-panel.up .rp-box {
  background: linear-gradient(108.92deg, #0C9E02 29.33%, #043801 114.8%);
  border-color: rgba(15, 219, 0, 1);
  box-shadow: 0px 0px 15px 1px rgba(222, 189, 0, 1);
}

.result-panel.down .rp-box {
  background: linear-gradient(108.92deg, rgba(220, 38, 38, 1) 29.33%, rgba(127, 29, 29, 1) 114.8%);
  border-color: #ff2a2a;
  box-shadow: 0 0 15px 1px rgba(222, 189, 0, 1);
}

.result-panel.draw .rp-box {
  background: #f2d34a;
  border-color: #f2d34a;
  box-shadow: 0 0 15px 1px rgba(222, 189, 0, 1);
  color: #000;
  /* Contrast for yellow bg, assuming request implied readability or I should check text color */
}

.result-panel.draw .rp-title,
.result-panel.draw .rp-side,
.result-panel.draw .rp-sub,
.result-panel.draw .rp-amt {
  color: #00205b;
  /* Dark text for contrast against yellow */
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
}

.result-panel[hidden] {
  display: none
}

.result-panel--show {
  animation: popfade .35s ease
}

@keyframes popfade {
  0% {
    transform: scale(.96);
    opacity: 0
  }

  100% {
    transform: scale(1);
    opacity: 1
  }
}

/* Emphasize stock cells when moving up/down */
.stk {
  transition: background-color .22s ease, border-color .22s ease
}

.stk.up {
  background: rgba(25, 195, 125, .12);
  border-color: rgba(25, 195, 125, .4)
}

.stk.down {
  background: rgba(255, 93, 93, .12);
  border-color: rgba(255, 93, 93, .4)
}

/* Grid strip custom scrollbar: hidden until hover, blue when visible */
.grid-strip {
  scrollbar-width: none
}

.grid-strip:hover {
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent
}

.grid-strip::-webkit-scrollbar {
  height: 0
}

.grid-strip:hover::-webkit-scrollbar {
  height: 8px
}

.grid-strip::-webkit-scrollbar-track {
  background: transparent
}

.grid-strip::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #2a78ff, #9a66ff);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .12)
}

.grid-strip::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #4990ff, #b480ff)
}



/* Bet controls */
/* Bet panel row: chips on the left, stacked controls on the right */
/* Bet controls */
/* Bet panel row: chips host and bet controls side-by-side */
.bet-row {
  display: flex;
  flex-direction: row;
  gap: var(--bet-gap);
  align-items: center;
  justify-content: center;
  margin-top: 0;
}

/* keep inner content from stretching edge-to-edge on huge screens */
/* .bet-row>* {} */
.chips-host {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Chips in a 2x3 grid (3 columns, auto rows) */
.chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(64px, auto));
  row-gap: 10px;
  column-gap: var(--bet-gap);
  justify-content: center;
  justify-items: center;
}

/* Stack bet-input (top) and total-bet (bottom) */
.bet-controls {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}

/* Keep bet controls compact instead of full-width */
.bet-input,
.total-bet {
  width: auto;
  max-width: 260px;
  justify-self: auto;
}

/* Chips styled purely in CSS (no external images) */
.chip {
  position: relative;
  height: 44px;
  min-width: 64px;
  padding: 0 16px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  user-select: none;
  color: #fff;
  font-weight: 800;
  letter-spacing: .2px;
  text-shadow: 0 0 6px rgba(0, 0, 0, .6), 0 0 2px rgba(255, 255, 255, .4);
  transform: translateZ(0);
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .22s ease, filter .22s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  will-change: transform;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02)),
    linear-gradient(90deg, #2a78ff, #9a66ff);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15), inset 0 0 0 2px rgba(0, 0, 0, .35), 0 4px 16px rgba(0, 0, 0, .35)
}

.chip:hover {
  filter: saturate(1.2);
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .35), inset 0 0 0 6px rgba(255, 255, 255, .1), 0 6px 20px rgba(0, 0, 0, .45)
}

.chip.active {
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .35), inset 0 0 0 6px rgba(255, 255, 255, .2), 0 8px 24px rgba(36, 170, 255, .45)
}

.chip:hover {
  transform: translateY(-1px) scale(1.02)
}

.chip:active {
  transform: scale(.88)
}

.chip.is-pressing {
  transform: scale(.88)
}

.chip:focus {
  outline: 0
}

.chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px
}

.chip.active {
  border: 0
}

/* Coin-only buttons (image-only) with subtle interactions */
.coin {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  width: 64px;
  height: 64px;
  min-width: 0;
  padding: 0;
  border-radius: 50%;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), filter .22s ease
}

.coin:hover {
  transform: translateY(-2px) scale(1.02)
}

.coin:active,
.coin.is-pressing {
  transform: scale(.9)
}

.coin:focus {
  outline: 0
}

.coin:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 50%
}

.coin.active {
  animation: coin-pop .28s ease
}

.coin.tap {
  animation: coin-pop .24s ease
}

@keyframes coin-pop {
  0% {
    transform: scale(.9)
  }

  60% {
    transform: scale(1.08)
  }

  100% {
    transform: scale(1)
  }
}

.bet-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(41, 92, 180, 0.25);
  border: 1px solid rgba(40, 91, 178, 1);
  border-radius: 999px;
  padding: 0 6px 0 20px;
  /* More padding left for text balance, less right for spinners */
  width: 160px;
  height: 46px;
  box-shadow: 0px 0px 2.7px 0px rgba(40, 91, 179, 1);
  position: relative;
}

.bet-input .currency-symbol {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  pointer-events: none;
}

.bet-input .bet-amt {
  background: transparent;
  border: none;
  outline: none;
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  flex: 1;
  text-align: center;
  font-family: "Poppins", sans-serif;
  letter-spacing: 0.5px;
  margin-right: 4px;
  width: 100%;
  min-width: 0;
}

.spinner-controls {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.spinner-up,
.spinner-down {
  background: transparent;
  border: none;
  color: rgba(163, 195, 255, 1);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 23px;
  transition: transform 0.1s;
}

.spinner-up svg,
.spinner-down svg {
  width: 100%;
  height: 100%;
  transform: scale(0.8);
  /* Make arrow visually larger within box */
}

.spinner-up:hover,
.spinner-down:hover {
  color: #ffffff;
}

.spinner-up:active,
.spinner-down:active {
  transform: scale(0.9);
}



.total-bet {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border: 1px solid #5667DD;
  background: linear-gradient(90deg, #161B52 0%, #27367C 100%);
  border-radius: 30px;
  box-shadow: 0 0 4.1px 0 rgba(0, 116, 255, .86);
  font-weight: 500;
  white-space: nowrap
}

.total-bet .amt {
  display: inline-block;
  min-width: 6ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: "Roboto Mono", ui-monospace, monospace
}

/* Reduce visual size of bet input and total bet on desktop while keeping touch targets */
@media (min-width:900px) {
  .bet-input {
    transform: scale(.95);
    transform-origin: center
  }

  .total-bet {
    transform: scale(.95);
    transform-origin: center
  }

  .bet-amt {
    min-width: 90px
  }
}

/* bet action buttons with coin textures */
/* Removed explicit bet actions buttons in favor of tap-to-bet on table */
.bet-actions {
  display: none
}

/* Right rail */
.rail {
  position: relative;
  padding: 0 8px 0 8px;
  overflow: visible
}

/* Make the right panel fill the available viewport height below the header */
.rail-sticky {
  position: sticky;
  top: var(--hdr-offset, 72px);
  display: flex;
  flex-direction: column;
  gap: 0;
  height: calc(100dvh - var(--hdr-offset, 72px) - var(--main-pad-b, 16px) - 4px);
}

.tabs,
.subtabs {
  display: flex;
  border-radius: 12px;
  overflow: hidden;
  font-weight: 600
}

.tabs {
  border: 2px solid var(--accent);
  background: var(--panel);
  margin-bottom: 10px
}

.subtabs {
  margin: 0 0 4px 0;
  /* border:2px solid var(--accent); */
  background: var(--panel);
  --subtab-h: 45px;
  padding: 3px;
  min-height: var(--subtab-h);
  max-width: 100%
}

.subtabs[hidden] {
  display: none;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0
}

.tabs button,
.subtabs button {
  background: var(--panel);
  color: var(--text);
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  transition: background .18s ease, color .18s ease, box-shadow .22s ease, transform .18s ease;
  font-weight: 600
}

.tabs button {
  flex: 1;
  padding: 10px 12px
}

.subtabs button {
  flex: 1;
  padding: 6px 8px
}

.tabs button:first-child,
.subtabs button:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px
}

.tabs button:last-child,
.subtabs button:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.tabs button:hover,
.subtabs button:hover {
  background: #1b2742;
  transform: translateY(-1px)
}

.tabs button:active,
.subtabs button:active {
  transform: translateY(0) scale(.995)
}

.tabs button:focus,
.subtabs button:focus {
  outline: none;
}

/* .tabs button::after,.subtabs button::after{content:"";position:absolute;left:8px;right:8px;bottom:6px;height:2px;border-radius:2px;background:linear-gradient(90deg, var(--accent) 0%, var(--subaccent) 100%);transform:scaleX(0);transform-origin:center;opacity:0;transition:transform .24s ease, opacity .24s ease} */
.tabs button[aria-selected="true"],
.subtabs button[aria-selected="true"] {
  background: linear-gradient(90deg, rgba(0, 116, 255, .18) 0%, rgba(175, 113, 255, .18) 100%);
  font-weight: 600;
  box-shadow: 0 0 18px rgba(10, 162, 255, .25), inset 0 0 10px rgba(0, 116, 255, .35);
  z-index: 2;
  border-radius: 10px;
  background-color: rgb(38 91 177);
}

/* .tabs button[aria-selected="true"]::before,.subtabs button[aria-selected="true"]::before{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;background:linear-gradient(90deg, var(--accent) 0%, var(--subaccent) 100%);mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;filter:blur(.5px)} */
.tabs button[aria-selected="true"]::after,
.subtabs button[aria-selected="true"]::after {
  transform: scaleX(1);
  opacity: 1;
  left: 0;
  right: 0;
  bottom: 0
}

.tabs button+button,
.subtabs button+button {
  border-left: 1px solid rgba(255, 255, 255, .12)
}

@media (prefers-reduced-motion: reduce) {

  .tabs button,
  .subtabs button {
    transition: none
  }

  .tabs button::after,
  .subtabs button::after {
    transition: none
  }
}

.panel {
  margin-top: 0;
  /* background:var(--panel);border:1px solid var(--accent); */
  border-radius: 18px;
  overflow: hidden;
  backdrop-filter: blur(39.5px);
  box-shadow: rgb(0, 92, 164) 0px 0px 8px 0px inset;
  background: linear-gradient(107deg, rgba(40, 88, 176, 0.9) 10.7%, rgba(29, 36, 93, 0.9) 111.17%);
  /* box-shadow:0 0 0 1px rgba(36,170,255,.45) inset, inset 0 8px 12px -10px rgba(0,0,0,.6), inset 0 -8px 12px -10px rgba(0,0,0,.6), inset 0 0 8px rgba(0,92,164,1); */
  flex: 1;
  min-height: 0;
  will-change: transform;
  scrollbar-gutter: stable both-edges;
  display: flex;
  flex-direction: column;
  padding: 12px 12px 10px 12px;
  gap: 2px
}

.panel-bets {
  margin-bottom: 0;
  flex: 1;
  max-height: none;
}

.panel-bets .panel-title {
  flex: 1;
  text-align: center;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 4px 0;
  padding: 3px;
  border-radius: 12px;
  background: var(--panel);
  min-height: 45px;
}

.panel-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: left;
}

/* Make subpanel a flex container and list the scrollable child */
.panel>#subpanel {
  display: flex;
  flex-direction: column;
  min-height: 0
}

.panel .list {
  flex: 1;
  overflow: auto
}

/* Custom thin blue scrollbar (apply to inner scrolling list) */
.panel,
.panel .list {
  scrollbar-width: thin;
  scrollbar-color: #2a78ff #1a2340
}

.panel::-webkit-scrollbar,
.panel .list::-webkit-scrollbar {
  width: 6px
}

.panel::-webkit-scrollbar-track,
.panel .list::-webkit-scrollbar-track {
  background: #10182c
}

.panel::-webkit-scrollbar-thumb,
.panel .list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #2a78ff, #9a66ff);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .12)
}

.panel::-webkit-scrollbar-thumb:hover,
.panel .list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #4990ff, #b480ff)
}

.list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px
}

.card {
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 10px;
  display: grid;
  gap: 3px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .01));
  transition: transform .12s ease, border-color .2s ease, background .2s ease;
  font-weight: 400
}

.card:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, .12);
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .015))
}

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

.mono {
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums
}

.pill {
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  font-size: 12px
}

.pill.win {
  color: var(--positive);
  border-color: var(--positive)
}

.pill.lose {
  color: var(--negative);
  border-color: var(--negative)
}

.pill.open {
  color: #a6d4ff;
  border-color: var(--accent-soft)
}

.pill.void {
  color: #aab3c2;
  border-color: rgba(255, 255, 255, .18)
}

.pill.up {
  color: #9ed5ff;
  border-color: var(--accent-soft)
}

.pill.down {
  color: #e3d0ff;
  border-color: rgba(175, 113, 255, .6)
}

.row .rgt {
  display: flex;
  align-items: center;
  gap: 8px
}

.mono.payout {
  color: var(--positive)
}

/* Tab and subtab count badges */
.count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #0d2a57;
  border: 1px solid rgba(255, 255, 255, .12);
  font-size: 12px;
  line-height: 18px;
  display: inline-grid;
  place-items: center;
  color: var(--muted);
  font-weight: 500
}

.count[data-empty="true"] {
  opacity: .55
}

/* Empty state inside lists */
.empty {
  padding: 18px 14px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed rgba(255, 255, 255, .12);
  border-radius: 10px
}

.empty-bets {
  border-style: solid;
  border-radius: 16px;
  background: linear-gradient(180deg, #001a5f, #001044);
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 20px 16px
}

.empty-bets-img {
  width: 75px;
  height: auto;
  display: block
}

.empty-bets-text {
  margin: 0;
  font-weight: 500;
  font-size: 14px;
  color: #ffffff;
  text-align: center
}

/* Last Round Results table layout */
.panel-results {
  flex: 1 1 auto;
  max-height: 300px;
}

.results-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 4px 4px 4px;
  overflow: auto;
}

.results-head {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.4fr;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 8px 4px 8px;
  text-align: center;
}

.results-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 400px;
  overflow: auto
}

.results-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.4fr;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .12);
  font-size: 13px;
  text-align: center;
}

.results-cell {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-family: "Roboto Mono", ui-monospace, monospace;
  text-align: center;
}

.results-cell.winner {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-variant-numeric: normal;
  text-align: center;
  justify-content: center;
}

.winner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff3b3b;
  box-shadow: 0 0 6px rgba(255, 59, 59, .9)
}

.winner-dot.up {
  background: var(--positive);
  box-shadow: 0 0 6px rgba(25, 195, 125, .9)
}

.winner-dot.down {
  background: var(--negative);
  box-shadow: 0 0 6px rgba(255, 93, 93, .9)
}

/* Bottom bar */
.bbar {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  background: #004DA9;
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(0, 116, 255, .35)
}

.bbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  justify-content: center
}

.home-btn {
  padding: 10px 14px;
  border-radius: 10px;
  background: #182233;
  border: 1px solid rgba(255, 255, 255, .08);
  color: var(--text);
  cursor: pointer
}

.home-btn:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px
}

.home-panel {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 64px;
  z-index: 30;
  width: min(720px, 92vw);
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5)
}

.home-panel[hidden] {
  display: none
}

/* Loading overlay */
.loading {
  --bg-color: #040029;
  --primary-purple: #753CFF;
  --secondary-glow: rgba(117, 60, 255, 0.2);
  --text-color: #FFFFFF;

  position: fixed;
  inset: 0;
  background-color: var(--bg-color);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  overflow: hidden;
}

/* Ambient Background Glow */
.loading .ambient-glow {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, var(--secondary-glow) 0%, transparent 60%);
  animation: breathe 8s ease-in-out infinite;
  pointer-events: none;
}

.loading .loader-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Single Elegant Ring */
.loading .ring-container {
  width: 140px;
  height: 140px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading .minimal-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-top: 1px solid var(--primary-purple);
  animation: ring-rotate 2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  filter: drop-shadow(0 0 5px var(--primary-purple));
}

/* Branded Logo */
.loading .logo-center {
  width: 80px;
  height: 80px;
  object-fit: contain;
  z-index: 2;
  animation: soft-pulse 4s ease-in-out infinite;
  filter: grayscale(0.1);
}

/* Tech-Minimalist Text */
.loading .loading-text {
  margin-top: 40px;
  color: var(--text-color);
  font-size: 11px;
  letter-spacing: 6px;
  text-transform: uppercase;
  font-weight: 400;
  opacity: 0.6;
  animation: fade 3s ease-in-out infinite;
}

.loading .pct {
  font-variant-numeric: tabular-nums;
  font-family: "Roboto Mono", ui-monospace, monospace;
}

/* Dynamic Dots */
.loading .dots::after {
  content: '';
  animation: dots-cycle 2s steps(4, end) infinite;
}

/* Animations */
@keyframes ring-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes soft-pulse {
  0%, 100% { 
      transform: scale(0.96); 
      filter: drop-shadow(0 0 5px var(--secondary-glow));
  }
  50% { 
      transform: scale(1.04); 
      filter: drop-shadow(0 0 15px var(--primary-purple));
  }
}

@keyframes breathe {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.1); }
}

@keyframes fade {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}

@keyframes dots-cycle {
  0%, 20% { content: ''; }
  40% { content: '.'; }
  60% { content: '..'; }
  80%, 100% { content: '...'; }
}

/* Toast notifications (bottom-right) */
.toast-host {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
  pointer-events: none
}

.toast {
  position: relative;
  min-width: 320px;
  max-width: 360px;
  padding: 22px 24px 24px 24px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: linear-gradient(145deg, #86a6ed, #86a6ed);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .65);
  color: #fff;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  pointer-events: auto;
  animation: toastSlideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}



.toast-icon {
  width: 60px;
  height: 60px;
  border-radius: 24px;
  background: radial-gradient(circle at 30% 25%, #ffeaa0, #ffbe3b 60%, #e08c00 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .45), 0 12px 26px rgba(0, 0, 0, .55);
}

.toast-medal {
  font-size: 30px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .4);
}

.toast-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.toast-title {
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 4px;
  color: #0F1E4D;
}

.toast-text {
  font-size: 13px;
  opacity: .9;
  color: #08255D;
}

.toast-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .9);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.toast.toast--hide {
  animation: toastSlideOut 0.3s cubic-bezier(0.55, 0, 1, 0.45) forwards !important;
  pointer-events: none;
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toastSlideOut {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateX(60px) scale(0.92);
  }
}

/* Responsive stacking */
@media (max-width:1199px) {
  .rail-sticky {
    position: static;
    height: auto
  }

  /* Fixed mobile panel height with contained scroll */
  .panel {
    min-height: min(45vh, 520px);
    height: min(45vh, 520px);
    max-height: min(45vh, 520px)
  }

  /* Keep subtab bar space but pull panel up to fill it when aria-hidden=true */
  .subtabs[aria-hidden="true"] {
    visibility: hidden;
    display: flex;
    height: var(--subtab-h);
    margin: 0 0 10px 0;
    border: 0
  }

  .subtabs[aria-hidden="true"]+.panel {
    margin-top: calc(-1 * (var(--subtab-h) + 10px));
    /* Expand panel height only for Last Game Results (when subtabs are aria-hidden) */
    min-height: calc(min(55vh, 520px) + var(--subtab-h) + 10px);
    height: calc(min(55vh, 520px) + var(--subtab-h) + 10px);
    max-height: calc(min(55vh, 520px) + var(--subtab-h) + 10px);
  }
}

@media (max-width:749px) {
  .stk .sym {
    font-size: calc(max(11px, 18px * var(--stk-scale, 1)));
  }

  .stk .val {
    font-size: calc(max(10px, 16px * var(--stk-scale, 1)));
  }

  .stk {
    padding: 2px 4px;
  }

  .main {
    padding: 8px;
    /* Reduce padding on mobile to save space */
    overflow-x: hidden;
  }

  /* Mobile header: hide desktop layout and show mobile layout only */
  .hdr-inner-desktop {
    display: none
  }

  .hdr-inner-mobile {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 8px 12px;
    width: 100%;
    margin: 0;
    gap: 8px;
  }

  .hdr-mobile-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Align to right */
    gap: 2px;
  }

  .hdr-mobile-right .row-top {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .hdr-mobile-right .live-pill {
    padding: 2px 6px;
    font-size: 10px;
  }

  .hdr-mobile-right .hamb {
    width: 28px;
    height: 24px;
  }

  /* Mobile Brand - Stacked */
  .hdr-inner-mobile .brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
    font-size: 14px;
    min-width: 60px;
  }

  /* Mobile Status Pill - Centered */
  .hdr-inner-mobile .status-pill {
    padding: 2px 12px;
    min-width: 100px;
    max-width: 140px;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    align-self: center;
    justify-self: center;
  }

  .hdr-inner-mobile .status-pill .status-phase {
    font-size: 12px;
  }

  .hdr-inner-mobile .status-pill .status-eta {
    font-size: 14px;
  }

  /* Mobile Balance */
  .hdr-inner-mobile .hdr-balance {
    font-size: 12px;
    margin: 0;
    margin-top: 2px;
  }

  /* Center chips on very small screens and stack controls below */
  .bet-row {
    /* grid-template-columns:1fr; */
    justify-content: center;
  }

  .chips {
    justify-content: center
  }

  /* On very small screens, let controls use full width for readability */
  .bet-input,
  .total-bet {
    max-width: 100%;
    justify-self: center;
  }

  .placed-chip {
    font-size: 8px;
  }

  .panel-header {
    min-height: 30px;
  }

  .subtabs {
    --subtab-h: 35px;
  }
}

.chip-label {
  font-weight: 700;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0px 0px 6.8px rgba(0, 0, 0, 0.7);
  margin: 0;
}

@media (max-width:393px) {
  .to-oval__title {
    font-size: clamp(15px, 3.4vw, 34px);
  }

  .to-label.down {
    bottom: 5%;
  }

  .to-label.up {
    top: 5%
  }

  .stk .sym {
    font-size: calc(max(12px, 22px * var(--stk-scale, 1)));
  }

  .stk .val {
    font-size: calc(max(11px, 19px * var(--stk-scale, 1)));
  }
}

/* ===== EXTRA SMALL SCREENS (≤420px): Prevent horizontal overflow ===== */
@media (max-width: 420px) {

  /* Prevent all elements from causing horizontal overflow */
  html,
  body {
    overflow-x: hidden;
  }

  .app,
  .main,
  .left,
  .board {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Reduce status pill min-width */
  .status-pill {
    min-width: 120px;
    padding: 3px 12px;
  }

  .hdr-inner-mobile .status-pill {
    min-width: 80px;
    max-width: 120px;
    padding: 2px 8px;
  }

  .hdr-inner-mobile .status-pill .status-phase {
    font-size: 10px;
  }

  .hdr-inner-mobile .status-pill .status-eta {
    font-size: 12px;
  }

  /* Make stock cards more compact */
  .stock-card {
    min-width: 90px;
  }

  .stocks {
    gap: 6px;
    padding: 4px 6px;
  }

  .stk .sym {
    font-size: calc(max(11px, 18px * var(--stk-scale, 1)));
  }

  .stk .val {
    font-size: calc(max(10px, 16px * var(--stk-scale, 1)));
  }

  .chip-label {
    font-size: 9px;
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.8);
  }

  /* Chips grid - reduce to 2 columns on very small screens */
  .chips {
    grid-template-columns: repeat(3, minmax(48px, 1fr));
    gap: 6px;
  }

  .coin {
    width: 48px !important;
    height: 48px !important;
  }

  /* Bet controls - make more compact */
  .bet-input {
    padding: 2px 4px;
    gap: 2px;
    height: 34px;
    width: 125px;
  }

  .bet-input button {
    width: 26px;
    height: 26px;
  }

  .bet-amt {
    min-width: 50px;
    font-size: 12px;
    padding: 0 4px;
  }

  .total-bet {
    padding: 0 10px;
    font-size: 12px;
    height: 34px;
  }

  /* Reduce bet controls gap */
  .bet-controls {
    gap: 16px;
  }

  .bet-row {
    gap: 8px;
  }

  /* Header adjustments */
  .hdr-inner-mobile {
    padding: 6px 8px;
    gap: 4px;
  }

  .hdr-inner-mobile .brand {
    font-size: 12px;
    min-width: 50px;
  }

  .hdr-mobile-right .hamb {
    width: 24px;
    height: 20px;
  }

  .hdr-mobile-right .live-pill {
    padding: 2px 4px;
    font-size: 9px;
  }

  .hdr-balance {
    font-size: 10px;
  }

  /* Board table overlay cells */
  .to-cell {
    width: 56px;
    height: 24px;
    padding: 4px;
    border-radius: 8px;
  }

  .to-cell .sym {
    font-size: 10px;
  }

  /* Result panel box */
  .rp-box {
    width: min(85vw, 280px);
    max-width: 280px;
    padding: 10px 12px;
  }

  /* Dropdown menu */
  .dd {
    min-width: 180px;
    max-width: 85vw;
  }

  /* Placed chip badges */
  .placed-chip {
    font-size: 7px;
    padding: 1px 4px;
  }
}

/* Short-height adjustments for wide screens (keep bottom chips visible, avoid overflow) */
@media (min-width:1200px) and (max-height:800px) {
  :root {
    --rail-gap: 48px
  }

  :root {
    --board-center-max: 42vh
  }

  .main {
    padding-top: 10px;
    padding-bottom: 10px
  }

  .top-row {
    margin-bottom: 8px
  }

  .grid-strip {
    min-height: 52px;
    max-height: 55px
  }

  .grid-strip {
    --stk-scale: .92 !important
  }

  .stk {
    min-height: 52px;
    padding: 3px 8px
  }

  .board {
    min-height: auto
  }

  .board {
    grid-template-rows: minmax(52px, auto) auto minmax(52px, auto);
    gap: 5px
  }

  .to-grid {
    height: 50%
  }

  .to-grid {
    --to-scale: .95
  }

  .bet-row {
    margin-top: 10px
  }

  .chips {
    gap: 10px
  }

  /* Override inline chip sizes to reduce actual layout height */
  .coin {
    width: 75px !important;
    height: 75px !important;
    transform: none
  }

  .bet-input button {
    height: 40px;
    width: 40px
  }

  .total-bet {
    padding: 8px 12px
  }
}

@media (min-width:1200px) and (max-height:740px) {
  :root {
    --rail-gap: 56px
  }

  :root {
    --board-center-max: 36vh
  }

  .grid-strip {
    min-height: 48px;
    max-height: 60px
  }

  .grid-strip {
    --stk-scale: .88 !important
  }

  .stk {
    min-height: 48px
  }

  .board {
    min-height: auto
  }

  .board {
    grid-template-rows: minmax(60px, auto) auto minmax(60px, auto);
    gap: 5px
  }

  .to-grid {
    height: 40%
  }

  .to-grid {
    --to-scale: .9
  }

  .bet-row {
    gap: 8px;
    margin-top: 8px
  }

  .chips {
    gap: 0px
  }

  .coin {
    width: 80px !important;
    height: 80px !important;
    transform: none
  }

  .bet-input button {
    height: 36px;
    width: 36px
  }

  .total-bet {
    padding: 8px 10px
  }
}

@media (min-width:1200px) and (max-height:600px) {
  :root {
    --rail-gap: 72px
  }

  :root {
    --board-center-max: 30vh
  }

  .main {
    padding-top: 8px;
    padding-bottom: 8px
  }

  .main {
    min-height: calc(100dvh - var(--hdr-offset, 72px) - 44px)
  }

  .top-row {
    margin-bottom: 6px
  }

  .grid-strip {
    min-height: 55px;
    max-height: 55px
  }

  .grid-strip {
    --stk-scale: .82 !important
  }

  .stk {
    min-height: 44px
  }

  .board {
    min-height: auto
  }

  .board {
    grid-template-rows: minmax(44px, auto) auto minmax(44px, auto);
    gap: 4px
  }

  .to-grid {
    height: 32%
  }

  .to-grid {
    --to-scale: .85
  }

  .bet-row {
    gap: 15px;
    margin-top: 6px
  }

  .chips {
    gap: 0px
  }

  /* .coin{width:100px !important;height:65px !important;transform:none} */
  .bet-input button {
    height: 34px;
    width: 34px
  }

  .total-bet {
    padding: 10px 10px
  }
}


/* Menu Modal */
.menu-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  /* User requested radial gradient */
  background: radial-gradient(55.58% 124.01% at 55.58% 46.9%, #01144C 0%, #000313 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px;
  animation: fade-in 0.2s ease-out;
}

.menu-modal-content {
  display: grid;
  grid-template-columns: 280px 1fr;
  width: 100%;
  /* "make it full width" - occupying most of the screen */
  max-width: 95vw;
  height: 90vh;
  /* Remove container bg/border to let inner parts handle it */
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  /* Needed for rotated element spilling out */
  border: none;
  gap: 40px;
}

.menu-sidebar {
  background: transparent;
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  border: none;
  /* Align sidebar content roughly with the card */
}

.menu-title {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  color: #fff;
  padding-left: 16px;
  border-left: 4px solid var(--accent);
}

.menu-nav {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.menu-tab {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  text-align: left;
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 5px;
  /* Pill shape */
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.menu-tab:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.menu-tab.active {
  background: #295CB5;
  border: 1px solid #12409D;
  box-shadow: 0px 0px 4.8px 2px #0E1537 inset, 2px 2px 2px 0px #327BB7;
  color: #fff;
}

/* Right Content Area Wrapper to hold the stack */
.menu-main {
  position: relative;
  /* Ensure we create a stacking context */
  isolation: isolate;
  height: 90%;
  display: flex;
  flex-direction: column;
  /* overflow: hidden; -- REMOVED to show rotated back card */
}

/* The Table Card (Front) */
.menu-panel-container {
  /* This actually holds the content */
  background: linear-gradient(99.12deg, #295AB2 0%, #171E57 100.75%);
  border-radius: 24px;
  padding: 32px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Keep content clipped here */
  position: relative;
  z-index: 2;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
}

/* Bull and Bear combined decoration */
.menu-deco-combined {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
  height: auto;
  max-width: 98vw;
  max-height: 90vh;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}

@media (max-width: 900px) {
  .menu-deco-combined {
    width: 100%;
    bottom: -120px;
    max-width: none;
  }
}

@media (max-width: 500px) {
  .menu-deco-combined {
    bottom: 5px;
  }
}

/* Make panels take available space */
.menu-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  /* Internal scrolling */
}

.history-table-wrap {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  background: transparent;
  border-radius: 0;
  border: none;
  padding-bottom: 8px;
  /* Clearance */
}

/* Match rightPanel dot styles */
.winner-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
}

.winner-dot.up {
  background-color: #19c37d;
  box-shadow: 0 0 8px rgba(25, 195, 125, 0.6);
}

.winner-dot.down {
  background-color: #ff5d5d;
  box-shadow: 0 0 8px rgba(255, 93, 93, 0.6);
}

/* The Back Card (Rotated) */
.menu-main::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #517ED4;
  border-radius: 24px;
  transform: rotate(357deg);
  z-index: 1;
  opacity: 0.8;
}

.btn-close {
  position: absolute;
  top: 10px;
  right: 20px;
  background: rgba(0, 0, 0, 0.2);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background 0.2s;
}

.btn-close:hover {
  background: rgba(255, 255, 255, 0.1);
}

.panel-title {
  font-size: 14px;
  /* margin: 0 0 24px 0; */
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
}

/* History Table Styles */

.history-table-wrap {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  max-height: 60vh;
  /* Explicit constraint as requested */
  background: transparent;
  border-radius: 0;
  border: none;
  padding-bottom: 8px;
  /* Clearance */
}

.history-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
  /* space between rows */
  font-size: 14px;
}

.history-table th {
  text-align: center;
  padding: 12px;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
  border: none;
  font-weight: 600;
}

.history-table td {
  padding: 16px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  text-align: center;
}

.history-table tr td:first-child {
  border-top-left-radius: 40px;
  border-bottom-left-radius: 40px;
}

.history-table tr td:last-child {
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
}

.pagination-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 32px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}

.page-btn {
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.res-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.menu-panel[hidden] {
  display: none;
}

.placeholder-text {
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
}

.rules-content p {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin-bottom: 12px;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (min-width: 1441px) {
  .panel-results {
    max-height: fit-content;
  }
}

@media (max-width: 900px) {
  .menu-modal-content {
    grid-template-columns: 1fr;
    max-width: 100%;
    height: 100%;
    padding: 0;
    gap: 0;
    display: flex;
    flex-direction: column;
  }

  .menu-sidebar {
    padding: 16px;
    flex-direction: row;
    overflow-x: auto;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    flex: 0 0 auto;
    gap: 12px;
  }

  .menu-title {
    display: none;
  }

  .menu-nav {
    flex-direction: row;
    width: 100%;
  }

  .menu-tab {
    padding: 8px 16px;
    font-size: 14px;
    white-space: nowrap;
  }

  .menu-main {
    flex: 1;
    /* padding: 16px; */
  }

  .menu-main::before {
    display: none;
    /* Simplify on mobile */
  }

  .menu-panel-container {
    padding: 7px;
    border-radius: 12px;
  }
}

/* Game Rules Modal Styling */
.rules-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Center horizontally */
  gap: 16px;
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: 20px;
}

.rules-card {
  background: rgba(0, 15, 60, 0.6);
  /* Darker inner card */
  border: 1px solid rgba(109, 193, 238, 0.3);
  /* Soft blue border */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  border-radius: 16px;
  padding: 24px;
  width: 100%;
  max-width: 580px;
  /* Constrain width as requested */
  display: flex;
  flex-direction: column;
  /* Ensure it has a max height if needed, but let's let content flow or scroll */
  max-height: 60vh;
}

.rules-scrollable {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  padding-right: 8px;
  /* Scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: var(--accent-soft) transparent;
}

.rules-scrollable::-webkit-scrollbar {
  width: 6px;
}

.rules-scrollable::-webkit-scrollbar-thumb {
  background-color: var(--accent-soft);
  border-radius: 4px;
}

.rules-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rules-heading {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  opacity: 0.9;
}

.rules-heading.highlight {
  color: #6DC1EE;
}

.rules-list,
.notes-list {
  padding-left: 18px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.rules-list li,
.notes-list li {
  margin-bottom: 4px;
}

.rules-list li::marker {
  color: var(--accent-soft);
  font-weight: 600;
}

.notes-list {
  list-style-type: none;
  padding-left: 0;
}

.notes-list li {
  position: relative;
  padding-left: 14px;
}

.notes-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--muted);
}

.winning-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 4px;
}

@media (min-width: 600px) {
  .winning-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.win-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.win-title {
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  opacity: 0.9;
}

.win-desc {
  font-size: 12px;
  color: var(--muted);
}

/* PLAY BUTTON */
.btn-play-rules {
  background: linear-gradient(180deg, #1B52D8 0%, #0036B0 100%);
  border: 1px solid #4B85FF;
  box-shadow: 0 4px 12px rgba(0, 54, 176, 0.5);
  border-radius: 24px;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  padding: 10px 48px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 10px;
  cursor: pointer;
  transition: transform 0.1s, filter 0.2s;
}

.btn-play-rules:hover {
  filter: brightness(1.2);
}

.btn-play-rules:active {
  transform: translateY(1px);
}

.rules-mascots {
  position: absolute;
  bottom: -40px;
  left: 0;
  right: 0;
  height: 140px;
  pointer-events: none;
  display: flex;
  justify-content: space-between;
  mix-blend-mode: screen;
  opacity: 0.6;
  z-index: 10;
}

.mascot {
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0) 70%);
  border-radius: 50%;
  filter: blur(25px);
}

.mascot.bull {
  background: radial-gradient(circle, rgba(25, 195, 125, 0.6) 0%, rgba(0, 0, 0, 0) 70%);
  transform: translate(-30px, 10px);
}

.mascot.bear {
  background: radial-gradient(circle, rgba(255, 93, 93, 0.6) 0%, rgba(0, 0, 0, 0) 70%);
  transform: translate(30px, 10px);
}

/* Panel Header & Language Toggle */
.panel-header {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 20px;
}

.lang-switch {
  display: flex;
  gap: 8px;
}

.lang-btn {
  background: rgba(25, 42, 86, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 6px 16px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.lang-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.lang-btn.active {
  background: #1B52D8;
  border-color: #4B85FF;
  color: #fff;
  box-shadow: 0 2px 8px rgba(27, 82, 216, 0.4);
}

/* Video Player */
.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  position: relative;
  display: flex;
  /* Centers video */
  align-items: center;
  justify-content: center;
}

.video-player {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* or contain, depending on video aspect ratio preference */
  display: block;
}

.bets-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  margin: 0 7px 6px 5px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  /* Ensure header width matches list width by accounting for scrollbar space */
  scrollbar-gutter: stable;
}

.bets-table-header>span {
  flex: 1;
  text-align: center;
}

.bet-row-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px;
  margin-bottom: 8px;
  background: rgba(41, 90, 178, 0.4);
  /* Approximate blue background */
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  backdrop-filter: blur(4px);
}

.bet-row-item:last-child {
  margin-bottom: 0;
}

.bri-cell {
  flex: 1;
  text-align: center;
  white-space: nowrap;
}

.bri-side {
  flex: 1.5;
  /* Match header flex */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.bri-side .dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}

.bri-side .side-text {
  font-weight: 600;
}

@media (max-width: 390px) {
  .stk .val {
    font-size: calc(max(8px, 12px * var(--stk-scale, 1)));
  }
}

/* --- Game History Redesign (Cards) --- */
.history-list-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  max-height: 60vh;
  /* Scrollable area */
  padding-right: 4px;
  /* Space for scrollbar */
}

.history-card {
  background: linear-gradient(180deg, rgba(30, 60, 114, 0.9) 0%, rgba(42, 82, 152, 0.9) 100%);
  border: 1px solid rgba(100, 180, 255, 0.3);
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  padding: 0;
  margin-bottom: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.history-card-header {
  background: #1A2867;
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.hc-date,
.hc-day {
  font-size: 14px;
  font-weight: 600;
  color: #E0E0FF;
  /* Light lavender-ish white */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.history-card-body {
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #2958AF;
}

.hc-label {
  font-size: 14px;
  color: #A3D1FF;
  /* Muted blue */
  font-weight: 500;
}

.hc-result {
  display: flex;
  align-items: center;
  gap: 8px;
}

.winner-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 5px currentColor;
}

.winner-dot.up {
  background-color: #19c37d;
  color: #19c37d;
  box-shadow: 0 0 8px #19c37d;
}

.winner-dot.down {
  background-color: #ff5d5d;
  color: #ff5d5d;
  box-shadow: 0 0 8px #ff5d5d;
}

.winner-dot.draw {
  background-color: #f2d34a;
  color: #f2d34a;
  box-shadow: 0 0 8px #f2d34a;
}

.winner-text {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-transform: capitalize;
}

/* Pagination Adjustments */
.pagination-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.page-btn {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.page-btn:hover:not(:disabled) {
  opacity: 1;
  text-decoration: underline;
}

.page-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.page-info {
  font-size: 13px;
  color: #A3D1FF;
}

/* Scrollbar for the list */
.history-list-wrap::-webkit-scrollbar {
  width: 6px;
}

.history-list-wrap::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}

.history-list-wrap::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

/* --- Redesigned Menu Modal Header & Tabs --- */

.menu-modal-content {
  /* Override grid layout from previous design if present, ensure flex column */
  display: flex !important;
  flex-direction: column !important;
  gap: 16px;
  grid-template-columns: none !important;
  /* Reset grid if it was grid */
  padding: 16px !important;
  max-width: 500px;
  /* Limit width more like a mobile modal/screenshot */
  width: 100%;
  margin: auto;
  border-radius: 20px;
  background: linear-gradient(180deg, #02123F 0%, #061952 100%);
  /* Deep blue bg */
  border: 1px solid rgba(100, 180, 255, 0.4);
}

.menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 8px;
}

.btn-back {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.btn-back svg {
  width: 20px;
  height: 20px;
}

.header-nav-arrows {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-arrow-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}

.nav-arrow-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Horizontal Tabs */
.menu-nav {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  /* Space for scrollbar if needed */
  border-right: none !important;
  /* Remove separation border if it existed */
  width: 100%;
}

.menu-tab {
  flex: 1;
  text-align: center;
  white-space: nowrap;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  color: #A3D1FF;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  /* Pill/rounded rect shape */
  cursor: pointer;
  transition: all 0.2s;
}

.menu-tab:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.menu-tab.active {
  background: #295CB5;
  border: 1px solid #12409D;
  color: #fff;
  box-shadow: 0px 0px 4.8px 2px #0E1537 inset 2px 2px 2px 0px #327BB7;
}

/* Hide scrollbar for nav */
.menu-nav::-webkit-scrollbar {
  display: none;
}

.menu-nav {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Override sidebar removal specific */
.menu-sidebar {
  display: none !important;
}

.menu-main {
  width: 100%;
  flex: 1;
  overflow: hidden;
  /* Prevent spill */
}

/* --- My Bets Card Specifics --- */

.bet-card-body {
  padding: 12px 14px;
  background: #2958AF;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Gap between rows if we stacking, but we use grid */
}

.bet-info-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  grid-template-rows: auto auto;
  gap: 8px 8px;
  /* row-gap col-gap */
  width: 100%;
}

.bet-row-detail {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.bet-row-detail.left {
  justify-content: flex-start;
}

.bet-row-detail.right {
  justify-content: flex-end;
  text-align: right;
}

.hc-label {
  font-size: 13px;
  white-space: nowrap;
}

.val-text {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

/* Ensure dots and text align nicely in the generic container */
.hc-result {
  display: flex;
  align-items: center;
  gap: 0px;
}

/* --- Last Round Winners --- */

.last-winners-panel {
  display: none;
  /* Hidden by default */
  margin-top: 10px;
  background: linear-gradient(180deg, #2a5ab3 0%, #153475 100%);
  border-radius: 12px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
  border: 1px solid rgba(100, 180, 255, 0.3);
  flex: 1;
  min-height: 0;
}

.last-winners-panel .panel-header {
  background: #0F1E4D;
  margin: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.last-winners-content {
  padding: 10px;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.lw-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  text-align: center;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
  opacity: 0.9;
  flex-shrink: 0;
}

.lw-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 60px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;
  /* Space for scrollbar */
}

.lw-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  background: rgba(43, 85, 173, 0.6);
  /* Slightly lighter blue pill */
  border-radius: 20px;
  padding: 8px 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
}

.lw-cell.lw-winner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.winner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.winner-dot.up {
  background: #19c37d;
  box-shadow: 0 0 4px #19c37d;
}

.winner-dot.down {
  background: #ff5d5d;
  box-shadow: 0 0 4px #ff5d5d;
}

.winner-dot.draw {
  background: #f2d34a;
  box-shadow: 0 0 4px #f2d34a;
}

/* Betting Phase: Show Last Winners, Hide My Bets (all screen sizes) */
.rail-sticky.phase-betting .last-winners-panel {
  display: flex;
  flex-direction: column;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.rail-sticky.phase-betting .panel-bets {
  display: none;
}

@media (max-width: 900px) {

  /* Default: Hide Last Winners, Show My Bets */
  .last-winners-panel {
    display: none;
  }

  .panel-bets {
    display: flex;
    flex-direction: column;
  }
}

/* Winner Text Colors */
.winner-text.up {
  color: #19c37d;
}

.winner-text.down {
  color: #ff5d5d;
}

.winner-text.draw {
  color: #f2d34a;
}

/* --- Detailed Result Popup --- */

.result-popup-detailed {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 360px;
  background: linear-gradient(180deg, #101934 0%, #173873 100%);
  border: 1px solid #4a90e2;
  border-radius: 20px;
  box-shadow: 0 0 20px rgba(0, 100, 255, 0.4);
  z-index: 1000;
  color: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: 'Roboto', sans-serif;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.6);
  /* Backdrop */
}

.rpd-header {
  text-align: center;
  padding: 15px 0;
  font-size: 24px;
  font-weight: 800;
  color: #ffca28;
  /* Gold */
  text-shadow: 0 0 10px rgba(255, 202, 40, 0.6);
  letter-spacing: 1px;
}

.rpd-body {
  padding: 0 15px 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rpd-info-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 13px;
  color: #ffd700;
  margin-bottom: 10px;
}

.rpd-table {
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 15px;
}

.rpd-table-head {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 1fr;
  background: rgba(0, 0, 0, 0.2);
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
  color: #a0c4ff;
  text-transform: uppercase;
}

.rpd-table-row {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 1fr;
  padding: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 13px;
  align-items: center;
}

.rpd-table-row:last-child {
  border-bottom: none;
}

.rpd-side {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rpd-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.rpd-dot.up {
  background: #19c37d;
  box-shadow: 0 0 4px #19c37d;
}

.rpd-dot.down {
  background: #ff5d5d;
  box-shadow: 0 0 4px #ff5d5d;
}

.rpd-dot.draw {
  background: #f2d34a;
  box-shadow: 0 0 4px #f2d34a;
}

.rpd-net-result {
  text-align: center;
  margin: 10px 0;
}

.rpd-net-label {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
}

.rpd-net-value {
  font-size: 28px;
  font-weight: 800;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.rpd-timer {
  text-align: center;
  color: #ffca28;
  font-size: 14px;
  font-weight: 700;
  margin: 10px 0 15px;
}

.rpd-timer span {
  font-size: 18px;
  display: block;
  margin-top: 4px;
}

.rpd-btn {
  background: linear-gradient(180deg, #2b55ad 0%, #1a3b80 100%);
  border: 1px solid #4a90e2;
  border-radius: 8px;
  padding: 12px 30px;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  width: 100%;
  max-width: 200px;
}

.rpd-btn:hover {
  filter: brightness(1.1);
}

.rpd-deco {
  width: 100%;
  height: auto;
  margin-top: -10px;
  opacity: 0.8;
  mask-image: linear-gradient(to top, black 40%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, black 40%, transparent 100%);
}

.result-popup-detailed {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 500px;
  min-height: 450px;
  /* Added min-height as requested */
  background: linear-gradient(180deg, #102452 0%, #1e3a75 100%);
  border: 2px solid #3c7bfd;
  border-radius: 20px;
  /* Add backdrop via shadow spread */
  box-shadow: 0 0 30px rgba(0, 50, 200, 0.6), inset 0 0 20px rgba(0, 0, 0, 0.5), 0 0 0 100vmax rgba(0, 0, 0, 0.7);
  z-index: 2000;
  color: #fff;
  display: flex;
  flex-direction: column;
  overflow: visible !important;
  /* Allow bull to stick out */
  font-family: 'Roboto', sans-serif;
}

.rpd-deco {
  position: absolute;
  bottom: -40px;
  /* Pull it down outside the box */
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  /* Make it wider than the box */
  max-width: none;
  pointer-events: none;
  z-index: 10;
  mask-image: none;
  /* Remove mask so it shows fully */
  -webkit-mask-image: none;
  opacity: 1;
}

@media (max-width: 600px) {
  .rpd-deco {
    bottom: -20px;
    width: 100%;
  }

  .result-popup-detailed {
    max-width: 380px;
  }
}

/* Error Modal */
.error-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 3, 61, 0.5);
  backdrop-filter: blur(16px);
  display: grid;
  place-items: center;
  animation: fadeIn 0.3s ease-out;
}

.error-modal-content {
  background: linear-gradient(135deg, #001A5F 0%, #001242 100%);
  border: 1px solid rgba(255, 93, 93, 0.5);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 93, 93, 0.2);
  border-radius: 24px;
  padding: 32px;
  width: 90%;
  max-width: 420px;
  text-align: center;
  color: #fff;
  transform: scale(0.95);
  animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.error-icon {
  width: 72px;
  height: 72px;
  background: rgba(255, 93, 93, 0.1);
  color: #ff5d5d;
  border-radius: 50%;
  border: 1px solid rgba(255, 93, 93, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  box-shadow: 0 0 20px rgba(255, 93, 93, 0.15);
}

.error-icon svg {
  width: 32px;
  height: 32px;
  stroke-width: 2.5;
}

.error-title {
  font-family: 'Poppins', sans-serif;
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 12px 0;
  color: #fff;
  letter-spacing: 0.5px;
}

.error-msg {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  color: #A3D1FF;
  margin-bottom: 32px;
  line-height: 1.6;
}

.error-btn {
  background: #ff5d5d;
  color: #fff;
  border: none;
  padding: 14px 40px;
  border-radius: 14px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(255, 93, 93, 0.3);
  width: 100%;
}

.error-btn:hover {
  background: #ff7676;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 93, 93, 0.4);
}

.error-btn:active {
  transform: translateY(0);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes popIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* ── Duplicate-bet toast (top-right, red-themed) ── */
.dup-bet-toast-host {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.dup-bet-toast {
  pointer-events: auto;
  min-width: 260px;
  max-width: 370px;
  background: rgba(24, 24, 30, 0.92);
  border: 1.5px solid rgba(220, 38, 38, 0.65);
  border-left: 4px solid #dc2626;
  border-radius: 10px;
  padding: 14px 18px 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  box-shadow: 0 8px 32px rgba(220, 38, 38, 0.18), 0 2px 8px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(12px);
  animation: dupToastSlideIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

.dup-bet-toast.dup-toast--hide {
  animation: dupToastSlideOut 0.25s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

@keyframes dupToastSlideIn {
  from {
    opacity: 0;
    transform: translateX(40px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes dupToastSlideOut {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateX(40px) scale(0.92);
  }
}

.dup-bet-toast__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(220, 38, 38, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.dup-bet-toast__icon svg {
  width: 16px;
  height: 16px;
  stroke: #ef4444;
}

.dup-bet-toast__body {
  flex: 1;
  min-width: 0;
}

.dup-bet-toast__title {
  font-size: 13px;
  font-weight: 700;
  color: #fca5a5;
  letter-spacing: 0.02em;
  margin-bottom: 3px;
}

.dup-bet-toast__msg {
  font-size: 12.5px;
  font-weight: 500;
  color: #ef4444;
  line-height: 1.4;
}

.dup-bet-toast__close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  font-size: 18px;
  cursor: pointer;
  padding: 0 0 0 6px;
  line-height: 1;
  transition: color 0.15s;
}

.dup-bet-toast__close:hover {
  color: #ef4444;
}

/* Compact toast for small devices (iPhone SE, etc.) */
@media (max-width: 480px) {
  .dup-bet-toast-host {
    top: 10px;
    right: 8px;
  }

  .dup-bet-toast {
    min-width: 0;
      max-width: 240px;
    padding: 10px 12px 10px 12px;
    gap: 8px;
    border-radius: 8px;
  }

  .dup-bet-toast__icon {
    width: 22px;
    height: 22px;
  }

  .dup-bet-toast__icon svg {
    width: 13px;
    height: 13px;
  }

  .dup-bet-toast__title {
    font-size: 11.5px;
    margin-bottom: 2px;
  }

  .dup-bet-toast__msg {
    font-size: 11px;
  }

  .dup-bet-toast__close {
    font-size: 16px;
    padding: 0 0 0 4px;
  }
}