:root {
  --bg-overlay: rgba(0, 22, 28, 0.55);
  --glass: rgba(6, 29, 38, 0.55);
  --line: rgba(255, 255, 255, 0.06);
  --text: #e8f7ff;
  --muted: #8eb3c1;
  --accent: #29e0b2;
  --danger: #ff5d5d;
  --success: #35c26b;
  --chip: #0ec2a8;
  --brand: #b6fffb;
  --shadow: 0 8px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
  --radius: 16px;
}

/* Loading Screen */
.loading {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(58.41% 58.41% at 50% 50%, rgba(0, 88, 110, 0.7) 7.69%, rgba(0, 0, 0, 0.7) 100%);
  /* background: rgba(5, 15, 20, 0.96); */
  /* Deep dark teal/black */
  backdrop-filter: blur(8px);
  z-index: 99999;
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90%;
  max-width: 320px;
}

.loading-logo {
  width: 180px;
  height: auto;
  margin-bottom: 60px;
  /* Space between logo and text/bar */
  filter: drop-shadow(0 0 20px rgba(41, 224, 178, 0.3));
}

.loading-text {
  font-family: 'Orbitron', 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 1px;
  text-transform: capitalize;
  margin-bottom: 12px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.loading-bar-container {
  position: relative;
  width: 100%;
  height: 10px;
  display: flex;
  align-items: center;
}

.loading-bar-track {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  /* Gradient from yellow-lime to cyan */
  background: linear-gradient(90deg, #CFE867 0%, #87EFAC 50%, #68E4F1 100%);
  box-shadow: 0 0 15px rgba(104, 228, 241, 0.4);
}

.loading-thumb {
  position: absolute;
  top: 50%;
  /* left is set by JS */
  transform: translate(-50%, -50%);
  height: 28px;
  /* Appears small in the screenshot */
  width: auto;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
  transition: left 0.1s linear;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  color: var(--text);
  font: 500 16px ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  background: #00627A;
  /* align to reference theme */
  position: relative;
}

/* full-bleed background */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .35)),
    var(--bg-image);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -2;
}

/* subtle teal fog */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(60% 60% at 50% 75%, rgba(0, 255, 224, .15), transparent 60%);
  z-index: -1;
}

.app {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 300px 1fr 300px;
  grid-template-areas:
    "header header header"
    "left stage right"
    "betbar betbar betbar";
  gap: 20px;
  padding: 20px;
  width: 100%;
}

/* header */
.header {
  grid-area: header;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  background: rgba(40, 87, 173, 0.75);
  height: 78px;
  width: 100%;
  max-width: 1450px;
  margin-inline: auto;
  border-radius: 10px;
}

.phase-chip {
  width: 220px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff3c6a, #b70f2c);
  /* closed state pill */
  color: #fff;
  box-shadow: var(--shadow);
  letter-spacing: .3px;
}

.phase-chip.open {
  background: rgba(43, 157, 6, 0.75);
  border: 1px solid rgba(0, 191, 22, 1);
  /* open state pill (green) */
}

.phase-chip.locked {
  background: rgba(27, 82, 216, 1);
  border: 1px solid rgba(42, 118, 255, 1);
  /* locked state pill (blue) */
}

.phase-chip.validating {
  background: rgba(27, 82, 216, 1);
  border: 1px solid rgba(42, 118, 255, 1);
  /* validating state pill (yellow) -> now blue like locked */
}

.phase-chip.payout {
  background: rgba(229, 204, 57, 1);
  border: 1px solid rgba(245, 235, 176, 1);
  /* payout state pill (gray) */
}

.header-right-group {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  right: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  z-index: 50;
}

/* Hide clock elements */
.phase-icon {
  display: none !important;
}

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



.hamburger-header-btn {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}

.hamburger-header-btn:hover {
  opacity: 0.9;
}

.hamburger-header-btn:active {
  transform: translateY(-50%) scale(0.95);
}

.hamburger-header-btn img {
  width: 28px;
  height: auto;
  display: block;
}

.header-balance {
  font-family: 'Space Mono', monospace;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 100%;
  color: rgba(223, 238, 255, 1);
  letter-spacing: 0.07em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  margin-top: 4px;
}

/* Game Title & Live Icon */
.game-title-container {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 30px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.game-title {
  font-family: 'Space Mono', monospace;
  font-weight: 600;
  font-style: normal;
  font-size: 16px;
  line-height: 100%;
  color: #fff;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: none;
}

.live-icon {
  position: relative;
  width: 48px;
  height: 48px;
}

.live-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Blinking Animation: Swap opacity */
.icon-1 {
  animation: blink-1 1s infinite step-end;
}

.icon-2 {
  animation: blink-2 1s infinite step-end;
}

@keyframes blink-1 {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

@keyframes blink-2 {

  0%,
  100% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}

/* Consolidate or clear previous partial block if desired, 
     but for now we will just ensure the main block covers it. 
     We can empty this redundant block or leave it if it has other styles. 
     The user didn't ask to clean up refactoring, just fix the css. 
     I will comment it out to avoid confusion or just leave it blank-ish. */

/* compact header layout for mobile */
@media (max-width: 1023px) {
  .header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "title phase right-group";
    align-items: center;
    gap: 10px;
    height: auto;
    min-height: 80px;
    margin-top: 0;
    padding: 0 16px;
    width: 100%;
  }

  /* place chips into the grid rather than absolute and control positions */
  .phase-chip {
    grid-area: phase;
    justify-self: center;
    padding: 6px 12px;
    /* Remove fixed grid columns if they break layout, or keep adaptive */
    display: flex;
    gap: 8px;
  }

  .header-right-group {
    grid-area: right-group;
    justify-self: end;
    position: static;
    transform: none;
    margin-right: 0;
    /* Ensure right text doesn't overflow */
    align-items: flex-end;
    margin-top: -5px;
  }

  .header-balance {
    font-size: 16px;
    white-space: nowrap;
    margin-top: 0;
  }

  .game-title-container {
    grid-area: title;
    justify-self: start;
    position: static;
    transform: none;
    gap: 8px;
  }

  .game-title {
    font-size: 16px;
  }

  .live-icon {
    width: 32px;
    height: 32px;
  }

  .header-stats-row {
    margin-top: 6px;
  }

  .stat-box {
    margin-top: 0;
  }

  .phase-chip .timer {
    font-size: 14px;
  }

  .phase-label {
    font-size: 12px;
  }


  .status-chip .status-label {
    font-size: 10px;
  }

  .chip {
    font-size: 14px;
  }
}

@media (max-width: 725px) {
  .phase-chip {
    width: 170px;
  }
}

@media (max-width: 500px) {
  .title-group {
    gap: 20px;
  }

  .live-icon {
    width: 36px;
    height: 36px;
  }

  .stat-box {
    width: 24px;
    height: 24px;
    border-radius: 6px;
  }

  .stat-icon {
    width: 12px;
  }

  .stat-box img[alt="Game"] {
    width: 18px;
  }

  .info-circle {
    width: 14px;
    height: 14px;
    font-size: 9px;
  }
}

@keyframes status-ring {
  0% {
    transform: scale(1);
    opacity: .6;
  }

  70% {
    transform: scale(2.4);
    opacity: 0;
  }

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

.phase-icon {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  position: relative;
  display: inline-block;
  border: 2px solid rgba(255, 255, 255, .95);
  background: rgba(255, 255, 255, .12);
}

.phase-icon::before {
  /* hour hand */
  content: "";
  position: absolute;
  left: 50%;
  top: 3px;
  width: 2px;
  height: 6px;
  background: rgba(255, 255, 255, .95);
  transform: translateX(-50%) rotate(25deg);
  transform-origin: center 100%;
  border-radius: 2px;
}

.phase-icon::after {
  /* minute hand */
  content: "";
  position: absolute;
  left: 50%;
  top: 1px;
  width: 2px;
  height: 8px;
  background: rgba(255, 255, 255, .95);
  transform: translateX(-50%) rotate(140deg);
  transform-origin: center 100%;
  border-radius: 2px;
}

.phase-content {
  display: grid;
  align-items: center;
  justify-items: center;
  text-align: center;
}

.phase-label {
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
  text-align: center;
}

.phase-chip .timer {
  font-weight: 900;
  padding: 0;
  border-radius: 0;
  font-size: 18px;
  line-height: 1.1;
  text-align: center;
  background: transparent;
}

/* rails */
.rail {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px;
  overflow: visible;
  min-width: 0;
  height: auto;
  align-self: start;
}

.rail--left {
  grid-area: left;
}

.rail--right {
  grid-area: right;
}

.brand {
  margin: 0 0 8px;
  font-weight: 900;
  color: var(--brand);
  letter-spacing: .08em;
}

.stock-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  max-height: none;
  overflow: visible;
}

.stock-list {
  scrollbar-width: none;
}

.stock-list::-webkit-scrollbar {
  display: none;
}

.rail-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.6fr);
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px 8px;
  min-width: 0;
}

.meta {
  min-width: 0;
  overflow: hidden;
}

.meta .name {
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.meta .sub {
  font-size: 12px;
  color: var(--muted);
  opacity: .9;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(56px, 1fr));
  gap: 6px;
  justify-content: stretch;
  min-width: 0;
  margin-inline: 0;
  width: 100%;
}

.stock-list {
  scrollbar-gutter: stable;
}

.rail {
  contain: layout paint;
}

.chip {
  font-size: 12px;
}

.btn {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 800;
  letter-spacing: .3px;
  cursor: pointer;
  background: rgba(255, 255, 255, .08);
  color: var(--text);
  transition: transform .12s ease, filter .15s ease, background .15s ease;
}

.btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.btn:active {
  transform: translateY(0);
  filter: brightness(.95);
}

.btn--down,
.btn--up {
  appearance: none;
  border: 2px solid transparent;
  cursor: pointer;
  height: 24px;
  padding: 0 6px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-weight: 800;
  color: #fff;
  letter-spacing: .3px;
  box-shadow: 0 4px 4px #00000040;
  transition: transform .12s ease, opacity .15s ease, filter .15s ease;
  transform: skewX(-12deg);
  position: relative;
  z-index: 40;
  max-width: 80px;
  min-width: 56px;
}

.btn--down .btn-label,
.btn--up .btn-label {
  transform: skewX(12deg);
  font-size: 10px;
  white-space: nowrap;
}

.btn--down:hover,
.btn--up:hover {
  transform: skewX(-12deg) translateY(-1px) scale(1.03);
}

.btn--down:active,
.btn--up:active {
  transform: skewX(-12deg) translateY(0) scale(0.96);
  filter: brightness(.95);
}

.btn--down[disabled],
.btn--up[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

.btn--up {
  background: linear-gradient(0deg, #b0ff2a 0%, #3e8100 100%);
}

.btn--down {
  background: linear-gradient(0deg, #b80033 0%, #c42c65 100%);
}

@media (min-width: 768px) {

  .btn--down .btn-label,
  .btn--up .btn-label {
    font-size: 14px;
  }
}

/* square button (plus/minus) */
.btn--square {
  border-radius: 10px;
  width: 32px;
  height: 32px;
  font-size: 18px;
  display: grid;
  place-items: center;
  background: #008DC2;
  color: #fff;
}

/* stage */
.stage {
  grid-area: stage;
  position: relative;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 4px;
}

.lady-wrap {
  display: grid;
  place-items: center;
  pointer-events: none;
}

.lady {
  width: clamp(100px, 35vw, 220px);
  height: auto;
  mix-blend-mode: normal;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .5));
  transform: translateY(10%);
  position: relative;
  z-index: 2;
  top: 15px;
}


.table-wrap {
  position: relative;
  width: min(1200px, 94%);
  display: grid;
  grid-template-areas: "stack";
  place-items: center;
  margin-top: -20px;
  contain: layout;
  overflow: visible;
}

.table-wrap>* {
  grid-area: stack;
}

.table {
  width: 100%;
  height: auto;
  transform: scaleY(1.15);
  filter: drop-shadow(0 24px 50px rgba(0, 0, 0, .6));
  position: relative;
  z-index: 1;
}

/* svg chip badges */
.chip-badge {
  position: absolute;
  top: 0%;
  display: grid;
  justify-items: center;
  gap: 6px;
  margin-top: -38px;
  z-index: 0;
}

.chip-badge--low {
  left: 15%;
  justify-self: start;
}

.chip-badge--high {
  right: 15%;
  justify-self: end;
}

.chip-img {
  width: clamp(52px, 18vw, 96px);
  height: auto;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .5));
}

.chip-sub {
  display: none !important;
  /* Force hide text */
}

.selected-cards-container {
  position: relative;
  grid-area: stack;
  align-self: center;
  justify-self: center;
  width: 70%;
  height: 40%;
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  z-index: 45;
  overflow: hidden;
  margin-bottom: 12%;
  /* backdrop-filter: blur(4px); */
  /* Removed blur */
  border-radius: 12px;
}

.selected-cards-section {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  transition: flex 0.3s ease;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  border-radius: 8px 8px 0 0;
  margin-bottom: 2px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.down-header {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
}

.up-header {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
}

.section-count {
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
}

.selected-cards {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  /* flex-wrap: wrap; */
  padding: 4px;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  /* Allow horizontal scroll if cards exceed width */
  overflow-y: hidden;
  scrollbar-width: none;
  /* Hide scrollbar for cleaner look */
}

.selected-cards::-webkit-scrollbar {
  display: none;
}

.selected-cards.limit {
  outline: 2px solid #ef4444;
  outline-offset: 4px;
  border-radius: 12px;
  animation: sel-limit-pulse .7s ease;
}

@keyframes sel-limit-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, .6);
  }

  60% {
    box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

.sel-card {
  width: 88px;
  min-width: 88px;
  max-width: 88px;
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .9);
  color: #08313f;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  display: grid;
  gap: 4px;
  /* Increased back slightly */
  justify-items: center;
  border: 2px solid #0b6b86;

  /* Realistic table tilt */
  transform: perspective(800px) rotateX(25deg);
  transform-origin: bottom center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}


.sel-card .sc-name {
  font-weight: 900;
  font-family: 'Orbitron', ui-sans-serif, system-ui;
  font-size: 12px;
  color: #0b6b86;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.sel-card .sc-amt {
  margin-top: 1px;
  padding: 2px 10px;
  background: #0b6b86;
  color: #fff;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
}

.sel-card .sc-arrow {
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.sel-card.up .sc-arrow {
  color: #22c55e;
}

/* green ▲ */
.sel-card.down .sc-arrow {
  color: #ef4444;
}

/* red ▼ */
.sel-card .sc-price {
  font-size: 12px;
  font-weight: 800;
}

.sel-card.up .sc-price {
  color: #22c55e;
}

.sel-card.down .sc-price {
  color: #ef4444;
}

/* Responsive tweaks for selected cards */
@media (max-width: 1023px) {


  .selected-cards-container {
    gap: 8px;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    width: 90%;
    height: 55%;
  }

  .selected-cards-section {
    flex: 1 1 auto;
    max-width: 100%;
    min-width: 0;
  }

  .selected-cards {
    gap: 4px;
    width: 100%;
    height: 100%;
    justify-content: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px;
    scrollbar-width: none;
  }

  .sel-card {
    width: 70px;
    min-width: 70px;
    max-width: 70px;
    flex: 0 0 auto;
    padding: 4px 4px;
    border-radius: 6px;
  }

  .sel-card .sc-name {
    font-size: 8px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
  }

  .sel-card .sc-price {
    font-size: 9px;
  }

  .sel-card .sc-arrow {
    font-size: 14px;
  }

  .sel-card .sc-amt {
    font-size: 9px;
    padding: 1px 6px;
  }
}

@media (max-width: 768px) {
  .lady {
    width: clamp(90px, 28vw, 180px);
    top: 15px !important;
  }

  .chip-badge {
    top: -2%;
    margin-top: -20px;
  }

  .presets {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-width: 280px;
  }

  .presets .chip {
    height: 61px;
  }

  /* Compact cards for mobile portrait */
  .sel-card {
    width: 64px;
    min-width: 64px;
    max-width: 64px;
    padding: 4px 4px;
    border-radius: 6px;
    transform: perspective(800px) rotateX(25deg);
    transform-origin: bottom center;
  }

  .sel-card .sc-name {
    font-size: 8px;
  }

  .sel-card .sc-price {
    font-size: 9px;
  }

  .sel-card .sc-arrow {
    font-size: 14px;
  }

  .sel-card .sc-amt {
    font-size: 9px;
    padding: 1px 6px;
  }
}

/* Extra small mobile - even more compact */
@media (max-width: 480px) {
  .chip-badge {
    top: -2%;
    margin-top: -16px;
  }

  .selected-cards {
    gap: 2px;
    padding: 2px;
  }

  .sel-card {
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    padding: 3px 3px;
  }

  .sel-card .sc-name {
    font-size: 7px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
  }

  .sel-card .sc-price {
    font-size: 8px;
  }

  .sel-card .sc-arrow {
    font-size: 12px;
  }

  .sel-card .sc-amt {
    font-size: 8px;
    padding: 1px 4px;
  }
}

/* bet bar */
.betbar {
  grid-area: betbar;
  position: sticky;
  bottom: 0;
  z-index: 50;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px 16px;
  backdrop-filter: blur(8px);
  contain: paint;
}

/* New layout: chips in 2 rows, then balance/total below */
.betbar-container {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  justify-content: center;
}

.betbar-left {
  min-width: 0;
}

.betbar-right {
  /* display: contents;  */
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 15px;
  /* Children participate in parent grid */
}

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

.chip {
  height: 32px;
  padding: 0;
  font-weight: 900;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  box-shadow: none;
  transform: none;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
  max-width: 33vw;
  white-space: nowrap;
}

.chip .btn-label {
  transform: skewX(-14deg);
}

.chip:hover {
  transform: translateY(-2px) scale(1.05);
  filter: brightness(1.15) drop-shadow(0 4px 12px rgba(0, 200, 180, 0.4));
}

.chip:active {
  transform: translateY(0) scale(0.98);
  filter: brightness(0.95);
}

.bet-input {
  display: flex;
  gap: 8px;
  align-items: center;
  background: #002C3E;
  border: 2px solid #39A0C7;
  border-radius: 8px;
  padding: 4px 6px;
  transform: skewX(-20deg);
}

.bet-input>* {
  transform: skewX(14deg);
}

#minus,
#plus {
  transform: skewX(14deg) !important;
  display: grid;
  place-items: center;
  line-height: 1;
}

#bet {
  width: 120px;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text);
  font-weight: 800;
  text-align: center;
  font-size: 16px;
}

/* Hide default number input spinner arrows */
#bet::-webkit-outer-spin-button,
#bet::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#bet[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.total {
  /* margin-left: auto;  */
  display: flex;
  align-items: center;
  gap: 12px;
  background: #008DC2;
  border: 2px solid #39A0C7;
  border-radius: 8px;
  padding: 6px 12px;
  transform: skewX(-18deg);
}

.total>* {
  transform: skewX(14deg);
}

.total .label {
  color: #ffffffcc;
  font-weight: 800;
  letter-spacing: .08em;
  font-family: 'Orbitron', ui-sans-serif, system-ui;
  font-size: 12px;
}

.total .value {
  font-weight: 900;
  font-size: 18px;
  font-family: 'Orbitron', ui-sans-serif, system-ui;
}

/* Last Round Winners - Hidden by default, shown on mobile */
.last-round-winners-section {
  display: none;
}

/* responsive tweaks */
@media (max-width: 1279px) {
  .app {
    grid-template-columns: 260px 1fr 260px;
  }

  /* Compact cards for medium screens */
  .sel-card {
    width: 72px;
    min-width: 72px;
    max-width: 72px;
    padding: 4px 6px;
    gap: 2px;
    transform: perspective(800px) rotateX(25deg);
    transform-origin: bottom center;
  }

  .sel-card .sc-name {
    font-size: 10px;
  }

  .sel-card .sc-price,
  .sel-card .sc-amt {
    font-size: 10px;
  }

  .sel-card .sc-arrow {
    font-size: 14px;
  }
}

@media (max-width: 1023px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "stage"
      "betbar"
      "left"
      "winners";
    padding: 8px;
    gap: 8px;
    height: 100dvh;
    padding-bottom: 80px;
    /* Space for scroll */
    max-width: 100vw;
    width: 100%;
  }

  /* Last Round Winners (Mobile Only) */
  .last-round-winners-section {
    grid-area: winners;
    display: flex;
    flex-direction: column;
    background: #004E64;
    border: 1px solid #7DE2FF75;
    backdrop-filter: blur(5.5px);
    border-radius: 16px;
    padding: 12px;
    margin-bottom: 20px;
    gap: 10px;
  }

  .lrw-header {
    background: linear-gradient(180deg, #00A3E0 0%, #0077A3 100%);
    color: #fff;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    text-align: center;
    padding: 8px;
    border-radius: 999px;
    text-transform: capitalize;
    font-size: 14px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  }

  .lrw-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .lrw-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    text-align: center;
    padding: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12px;
    color: #e0f2fe;
  }

  .lrw-head {
    background: transparent;
    font-weight: 700;
    color: #fff;
    font-size: 14px;
    padding-bottom: 4px;
  }

  .lrw-win-low {
    color: #FF5D5D;
    font-weight: 700;
  }

  .lrw-win-high {
    color: #29e0b2;
    font-weight: 700;
  }

  .presets .chip {
    height: 61px;
  }

  .rail--right {
    display: none;
  }

  .rail {
    max-height: none;
    overflow: visible;
    background: #004E64;
    border: 1px solid #7DE2FF75;
    backdrop-filter: blur(5.5px)
  }

  .rail-item {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
  }

  .meta .name {
    font-size: 12px;
  }

  .meta .sub {
    font-size: 10px;
  }

  .actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-inline: 0;
  }

  /* iPad/Tablet landscape - Larger cards */
  .sel-card {
    width: 80px;
    min-width: 80px;
    max-width: 80px;
    padding: 10px 10px;
    border-radius: 12px;
    transform: perspective(800px) rotateX(25deg);
    transform-origin: bottom center;
  }

  .sel-card .sc-name {
    font-size: 11px;
  }

  .sel-card .sc-price {
    font-size: 11px;
  }

  .sel-card .sc-arrow {
    font-size: 16px;
  }

  .sel-card .sc-amt {
    font-size: 10px;
    padding: 4px 6px;
    /* Taller chip */
  }

  .btn--down,
  .btn--up {
    width: auto;
    min-width: 60px;
    height: 26px;
    padding: 0 8px;
  }

  .badge {
    top: 2%;
  }

  .stage {
    gap: 0;
  }

  .lady {
    width: clamp(100px, 30vw, 200px);
    transform: translateY(10%);
    top: 10px;
  }

  .table-wrap {
    width: min(1000px, 94%);
    margin-top: -20px;
  }

  .chip-badge {
    top: 6%;
    margin-top: -36px;
  }

  .chip-badge--low {
    left: 25%;
    top: -10%;
  }

  .chip-badge--high {
    right: 25%;
    top: -10%;
  }

  .chip-img {
    width: clamp(48px, 16vw, 88px);
  }

  .chip-sub {
    display: none !important;
  }

  .betbar {
    position: static;
    bottom: auto;
    padding: 8px 10px;
  }

  .betbar-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }

  .betbar-left {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
  }

  .betbar-right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-width: 140px;
    width: 140px;
  }

  .presets {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    max-width: 300px;
  }

  .presets .chip {
    width: 100%;
    max-width: none;
    min-width: 0;
    aspect-ratio: 1 / 1;
    padding: 0;
    margin: -4px;
  }

  .bet-input {
    width: 100%;
    gap: 6px;
    padding: 2px 4px;
    border-radius: 6px;
    min-width: 0;
    justify-content: center;
  }

  .bet-input .btn--square {
    width: 24px;
    height: 24px;
    font-size: 16px;
  }

  .total {
    width: 100%;
    margin-left: 0;
    justify-content: center;
  }

  .chip {
    height: 30px;
    padding: 0 12px;
    max-width: none;
  }

  #bet {
    width: clamp(56px, 18vw, 90px);
    font-size: 12px;
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .lady {
    width: clamp(80px, 25vw, 160px);
  }

  /* Very compact cards for small mobile landscape/portrait */
  .sel-card {
    width: 52px;
    min-width: 52px;
    max-width: 52px;
    padding: 5px 2px;
    border-radius: 6px;
    transform: perspective(800px) rotateX(25deg);
    transform-origin: bottom center;
  }

  .sel-card .sc-name {
    font-size: 7px;
  }

  .sel-card .sc-price {
    font-size: 8px;
  }

  .sel-card .sc-arrow {
    font-size: 10px;
  }

  .sel-card .sc-amt {
    font-size: 8px;
    padding: 2px 4px;
    /* Reduced padding */
  }

  .chip-badge--low {
    top: -14% !important;
  }

  .chip-badge--high {
    top: -14% !important;
  }

  .chip-badge {
    top: 4.5%;
    margin-top: -18px;
  }

  .lady-wrap {
    margin-top: -40px
  }

  .table-wrap {
    margin-top: 5px;
  }

  .betbar {
    padding: 6px 8px;
  }

  .betbar-container {
    gap: 1px;
  }

  .betbar-right {
    min-width: 120px;
    width: 120px;
    gap: 20px;
  }

  .presets {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    max-width: 280px;
  }

  .chip {
    height: 28px;
    padding: 0 10px;
  }

  .presets .chip {
    height: auto;
    padding: 0;
    aspect-ratio: 1 / 1;
    margin: -6px;
  }

  .bet-input {
    padding: 2px 4px;
  }

  .bet-input .btn--square {
    width: 22px;
    height: 22px;
    font-size: 14px;
  }

  #bet {
    width: clamp(50px, 20vw, 80px);
    font-size: 11px;
  }

  .total {
    padding: 4px 8px;
  }

  .chip-img {
    width: 55px;
  }
}

.chip-badge--low {
  left: 15%;
  top: -10%;
}

.chip-badge--high {
  right: 15%;
  top: -10%;
}

@media (max-width: 380px) {
  .total .label {
    display: none;
  }

  .chip-img {
    width: 40px;
  }

  .chip-badge--low {
    left: 20%;
    top: -10%;
  }

  .chip-badge--high {
    right: 20%;
    top: -10%;
  }
}


:focus-visible {
  outline: 2px solid #7fffe1;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* Typography to match reference */
.brand {
  font-family: 'Audiowide', ui-sans-serif, system-ui;
}

.meta .name {
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.meta .sub {
  font-family: 'Space Grotesk', ui-sans-serif, system-ui;
}

.btn,
.btn--down,
.btn--up,
.chip {
  font-family: 'Rajdhani', ui-sans-serif, system-ui;
  font-weight: 800;
}

.phase-label {
  font-family: 'Orbitron', ui-sans-serif, system-ui;
}

.total .label,
.total .value {
  font-family: 'Orbitron', ui-sans-serif, system-ui;
}

/* mock panel */
/* .mock-panel{
  position: fixed; bottom: 10px; left: 10px; z-index: 80;
  background: #091f28cc; color: #bce9ff; border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 10px; box-shadow: var(--shadow);
  font: 600 12px ui-sans-serif, system-ui;
}
.mock-panel .title{ font-weight: 900; letter-spacing: .06em; margin-bottom: 4px; color: #7fffe1; }
.mock-panel .row{ display: flex; gap: 6px; align-items: baseline; } */

/* Chip section styling for 2 rows of 3 chips */
.chip-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.chip-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
}

.chip-oval {
  min-width: 80px;
  height: 36px;
  border-radius: 18px;
  padding: 0 16px;
  font-weight: 700;
  font-size: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}

.chip-oval:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}

.chip-oval:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Info section styling */
.info-section {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.balance-display {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(0, 141, 194, 0.8), rgba(0, 141, 194, 0.6));
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 8px 16px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.balance-display .balance-value {
  font-weight: 900;
  font-size: 16px;
  font-family: 'Orbitron', ui-sans-serif, system-ui;
  color: #fff;
}

.balance-display .balance-icon {
  font-size: 16px;
}

.total-bet-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, rgba(0, 141, 194, 0.8), rgba(0, 141, 194, 0.6));
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 8px 16px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.total-bet-display .total-label {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
  font-size: 12px;
  font-family: 'Orbitron', ui-sans-serif, system-ui;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.total-bet-display .total-value {
  font-weight: 900;
  font-size: 16px;
  font-family: 'Orbitron', ui-sans-serif, system-ui;
  color: #fff;
}

.hamburger-menu-container {
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 1000;
}

.hamburger-btn {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #3b82f6, #1e40af);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
  transition: transform 0.2s, box-shadow 0.2s;
}

.hamburger-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.5);
}

.hamburger-icon {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hamburger-icon span {
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 1px;
  transition: all 0.3s ease;
}

.hamburger-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(42, 150, 176, 0.4) 0%, rgba(0, 88, 110, 0.4) 54.74%, rgba(0, 0, 0, 0.4) 100%);
  backdrop-filter: blur(10px);
  z-index: 9998;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* Moved to top */
  padding-top: 20px;
}

.hamburger-modal-content {
  background: transparent;
  backdrop-filter: none;
  border-radius: 0;
  padding: 20px;
  width: 100%;
  max-width: 800px;
  position: relative;
  box-shadow: none;
  border: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* Align content to top */
}

.hamburger-close-btn {
  display: none;
}

.accordion-container {
  margin-bottom: 40px;
}

.accordion-item {
  margin-bottom: 16px;
  background: linear-gradient(180deg, rgba(88, 185, 212, 0.4) 0%, rgba(88, 185, 212, 0.2) 100%);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s, box-shadow 0.2s;
}

.accordion-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.6);
}

.accordion-item.active {
  background: #74F5FF80;
  box-shadow: 0px 0px 6px 5px #04D9FF;
  border-color: #ffffff;
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  cursor: pointer;
  transition: background 0.2s;
  background: #B9FAFF80;
  backdrop-filter: blur(15px)
}

.accordion-header:hover {
  /* background: rgba(255, 255, 255, 0.1); */
  background: #B9FAFF80;
}

.accordion-text {
  color: #C7F4FF;
  font-family: 'Orbitron', sans-serif;
  /* Techno feel */
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.05em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.result-table-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;
}

.result-table-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: rgba(0, 126, 159, 0.6);
  border-radius: 24px;
  padding: 12px 16px;
  margin-bottom: 8px;
  gap: 40px;
  align-items: center;
}

.header-cell {
  font-family: 'Orbitron', sans-serif;
  font-weight: 300;
  font-size: 10px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.accordion-arrow {
  color: #fff;
  font-size: 12px;
  transition: transform 0.3s;
}

.accordion-arrow.expanded {
  transform: rotate(180deg);
}

.accordion-content {
  padding: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.bet-history-container {
  padding: 15px;
  background: transparent;
  border-radius: 8px;
  margin: 10px;
}

/* Old Bet History Table - Hidden for Card Layout */
.bet-history-header {
  display: none;
}

/*
.bet-history-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr 1fr 1fr 1fr;
  gap: 8px;
  padding: 8px 0;
  background: #3d7887;
  border-radius: 23px;
  margin-bottom: 8px;
}
*/

.bet-history-header .bet-col {
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  text-align: center;
}

.bet-history-rows {
  max-height: 450px;
  /* Increased height for cards */
  overflow-y: auto;
  padding: 4px;
}

/* NEW CARD STYLES */
.bet-history-card {
  background: rgba(18, 59, 70, 0.4);
  /* Dark teal shade */
  border: 1px solid rgba(88, 185, 212, 0.4);
  border-radius: 16px;
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5px);
}

.bet-card-header {
  background: rgba(0, 78, 100, 0.6);
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(88, 185, 212, 0.2);
}

.bet-date,
.bet-day {
  font-family: 'Orbitron', sans-serif;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.bet-card-body {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bet-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bet-info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.bet-info-item.right-align {
  justify-content: flex-end;
}

.bet-label {
  font-family: 'Space Grotesk', sans-serif;
  color: #a5f3fc;
  /* Light cyan */
  font-size: 13px;
  font-weight: 400;
}

.bet-value {
  font-family: 'Space Grotesk', sans-serif;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

/* Old row styles - hidden effectively by logic change but kept for ref */
.bet-history-row {
  display: none;
}

.bet-history-row:last-child {
  border-bottom: none;
}

.bet-history-row .bet-col {
  color: #C2F2FF;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  text-align: center;
  font-weight: 500;
}

/* Static content styling */
.static-content {
  padding: 15px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  margin: 10px;
  max-height: 300px;
  overflow-y: auto;
}

.static-content h3 {
  color: #93c5fd;
  font-size: 14px;
  font-weight: 600;
  margin: 15px 0 8px 0;
  font-family: 'Space Grotesk', sans-serif;
}

.static-content h3:first-child {
  margin-top: 0;
}

.static-content p {
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  margin: 8px 0;
  font-family: 'Space Grotesk', sans-serif;
}

.static-content ul,
.static-content ol {
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  margin: 8px 0;
  padding-left: 20px;
  font-family: 'Space Grotesk', sans-serif;
}

.static-content li {
  margin: 4px 0;
}

.static-content strong {
  color: #93c5fd;
  font-weight: 600;
}

/* Game history container */
.game-history-container {
  padding: 15px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  margin: 10px;
}

.loading-message {
  color: #93c5fd;
  text-align: center;
  padding: 20px;
  font-style: italic;
  font-family: 'Space Grotesk', sans-serif;
}

/* Result Badges */
.result-badge {
  display: inline-block;
  padding: 4px 16px;
  border-radius: 4px;
  transform: skewX(-10deg);
  font-family: 'Space Grotesk', sans-serif;
  /* Keep table font or use Orbitron if preferred for badges */
  font-weight: 700;
  font-size: 11px;
  text-transform: capitalize;
  color: #fff;
  min-width: 60px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Unskew text inside badge if needed, but simple text usually looks okay slightly skewed or we can add span. 
   User images show text is somewhat straight/bold. Let's unskew for cleaner look. */
/* Wait, I added <span> inside JS? No, just result text. Let's add unskew to text itself? No, text-skew is fine usually.
   Let's check user request "woh aise lgnnge" - images show buttons. */

.result-badge--win {
  background: linear-gradient(180deg, #82e600 0%, #4c8a00 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.result-badge--loss {
  background: linear-gradient(180deg, #d61e56 0%, #a0123d 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.result-badge--draw {
  background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
}

.result-badge--bet {
  background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  min-width: 80px;
}

.result-badge-fixed {
  width: 100px;
  /* Fixed width as requested */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  padding: 4px 10px;
  /* Reset horizontal padding */
  transform: skewX(0);
}

.bet-badge-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.bet-symbol {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  text-align: left;
  font-weight: 700;
  margin-right: 5px;
}

.bet-dir {
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 500;
  opacity: 0.9;
}

.result-badge--up {
  background: linear-gradient(180deg, #82e600 0%, #4c8a00 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  min-width: 80px;
}

.result-badge--down {
  background: linear-gradient(180deg, #d61e56 0%, #a0123d 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  min-width: 80px;
}

.modal-buttons {
  position: fixed;
  bottom: 40px;
  left: 0;
  width: 100%;
  padding: 0 40px;
  display: flex;
  justify-content: center;
  gap: 500px;
  pointer-events: none;
  /* Let clicks pass through gap */
}

@media (max-width: 1024px) {
  .modal-buttons {
    gap: 20px;
    padding: 0 16px;
    bottom: 20px;
    justify-content: space-between;
  }

  .modal-btn {
    min-width: 0;
    flex: 1;
    font-size: 16px;
    padding: 12px 0;
  }
}

.modal-btn {
  pointer-events: auto;
  padding: 12px 40px;
  border: none;
  border-radius: 8px;
  font-family: 'Orbitron', 'Rajdhani', sans-serif;
  font-weight: 800;
  font-size: 18px;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 140px;
  transform: skewX(-10deg);
  /* Reduced tilt */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.modal-btn span {
  display: block;
  transform: skewX(10deg);
  /* Unskew text */
}

.modal-btn:hover {
  transform: skewX(-10deg) translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.back-btn {
  background: linear-gradient(180deg, #d61e56 0%, #a0123d 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transform: skewX(10deg);
  /* Reduced tilt */
}

.back-btn span {
  transform: skewX(-10deg);
  /* Unskew text for back button */
}

.back-btn:hover {
  transform: skewX(10deg) translateY(-2px);
}

.play-btn {
  background: linear-gradient(180deg, #82e600 0%, #4c8a00 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.play-btn:hover {
  background: linear-gradient(180deg, #95ff00 0%, #5ba600 100%);
}

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

.mobile-live-icon {
  display: none;
}

/* Mobile positioning - top right corner */
@media (max-width: 1023px) {
  .game-title-container {
    top: 8px;
    left: 10px;
  }

  .desktop-live-icon {
    display: none;
  }

  .mobile-live-icon {
    display: block;
    width: 60px;
    height: 60px;
  }

  .hamburger-menu-container {
    top: 3px;
    right: 5px;
    bottom: auto;
  }

  .hamburger-modal-content {
    width: 95%;
    /* max-width: 350px; */
    padding: 30px 25px;
  }

  .accordion-text {
    font-size: 15px;
  }

  .modal-btn {
    padding: 10px 25px;
    font-size: 15px;
    min-width: 90px;
  }

  /* Mobile responsive table */
  .bet-history-header {
    grid-template-columns: 0.8fr 0.8fr 1.2fr 0.8fr 0.8fr 1fr;
    gap: 4px;
    padding: 6px 0;
  }

  .bet-history-row {
    grid-template-columns: 0.8fr 0.8fr 1.2fr 0.8fr 0.8fr 1fr;
    gap: 4px;
    padding: 8px 0;
  }

  .bet-history-header .bet-col {
    font-size: 10px;
  }

  .bet-history-row .bet-col {
    font-size: 10px;
  }

  .static-content {
    padding: 12px;
    margin: 8px;
    max-height: 250px;
  }

  .static-content h3 {
    font-size: 12px;
  }

  .static-content p,
  .static-content ul,
  .static-content ol {
    font-size: 11px;
  }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
  .bet-history-header {
    grid-template-columns: 1fr 1fr 1.5fr 1fr 1fr 1fr;
    gap: 2px;
  }

  .title-group {
    gap: 24px;
  }

  .live-icon {
    width: 42px;
    height: 42px;
  }

  .bet-history-row {
    grid-template-columns: 1fr 1fr 1.5fr 1fr 1fr 1fr;
    gap: 2px;
  }

  .bet-history-header .bet-col {
    font-size: 8px;
    padding: 0 2px;
  }

  .bet-history-row .bet-col {
    font-size: 8px;
    padding: 0 2px;
  }

  .bet-history-container,
  .game-history-container {
    padding: 0px;
    margin: 5px;
  }

  .bet-history-rows {
    max-height: 300px;
  }
}

/* 500px Breakpoint */
@media (max-width: 500px) {

  /* Add your styles here */
  .mobile-live-icon {
    width: 50px;
    height: 50px;
  }

  .hamburger-header-btn img {
    width: 30px;
  }

  .header-balance {
    font-size: 12px;
    margin-top: -5px;
  }

  .phase-chip {
    width: auto;
    min-width: 0;
    gap: 6px;
  }

  .phase-label {
    font-size: 10px;
  }

  .phase-chip .timer {
    font-size: 12px;
  }

  .phase-icon {
    width: 16px;
    height: 16px;
  }

  .phase-icon::before {
    top: 2px;
    height: 4px;
    width: 1.5px;
    left: 50%;
  }

  .phase-icon::after {
    top: 1px;
    height: 5px;
    width: 1.5px;
    left: 50%;
  }

  /* Compact cards for 500px */
  .sel-card {
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    padding: 4px 2px;
    border-radius: 6px;
    transform: perspective(800px) rotateX(25deg);
    transform-origin: bottom center;
  }

  .sel-card .sc-name {
    font-size: 6px;
  }

  .sel-card .sc-price {
    font-size: 7px;
  }

  .sel-card .sc-arrow {
    font-size: 10px;
  }

  .sel-card .sc-amt {
    font-size: 7px;
    padding: 1px 3px;
  }
}

/* 390px Breakpoint */
@media (max-width: 390px) {

  /* Add your styles here */
  .hamburger-header-btn img {
    width: 23px;
  }

  .stat-box {
    width: 22px;
    height: 22px;
    border-radius: 5px;
  }

  .stat-icon {
    width: 10px;
  }

  .stat-box img[alt="Game"] {
    width: 16px;
  }

  .info-circle {
    width: 12px;
    height: 12px;
    font-size: 8px;
  }

  .mobile-live-icon {
    width: 40px;
    height: 40px;
  }

  /* Ultra compact cards for 390px */
  .sel-card {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    padding: 7px 1px;
    border-radius: 4px;
    border-width: 1px;
    transform: perspective(800px) rotateX(25deg);
    transform-origin: bottom center;
  }

  .total .label {
    font-size: 10px !important;
  }

  .total .value {
    font-size: 14px !important;
  }

  .sel-card .sc-name {
    font-size: 4px;
  }

  .sel-card .sc-price {
    font-size: 5px;
  }

  .sel-card .sc-arrow {
    font-size: 8px;
  }

  .sel-card .sc-amt {
    font-size: 6px;
    padding: 1px 2px;
    border-radius: 4px;
  }

  .header-balance {
    font-size: 10px;
    margin-top: -8px;
  }

  .header {
    min-height: 60px;
    padding: 0 12px;
  }

  .phase-chip {
    padding: 6px 6px;
    gap: 4px;
  }

  .phase-label {
    font-size: 10px;
  }

  .phase-chip .timer {
    font-size: 13px;
  }

  .phase-icon {
    width: 14px;
    height: 14px;
  }

  .phase-icon::before {
    top: 2px;
    height: 3px;
  }

  .phase-icon::after {
    top: 1px;
    height: 4px;
  }

  .game-title {
    font-size: 14px;
  }
}

#result-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  background-image: url('./stars.png');
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}


#result-component {
  width: 600px;
  height: 420px;
  position: relative;
  z-index: 1;
  border-radius: 40px;
  box-shadow: 0px 0px 16.1px 0px rgba(81, 197, 205, 1);
  animation: result-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: none;
  background: transparent;
  padding: 6px;
  /* Reduced to 5px to increase overlap to 2px */
  display: flex;
  flex-direction: column;
}

#result-component::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 40px;
  padding: 7px;
  /* VISUAL Border thickness remains 7px */
  background: linear-gradient(#88DCEE 30%, #50D8F2 10%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  z-index: -1;
  pointer-events: none;
}


.result-component-inner {
  background: linear-gradient(180deg, rgba(116, 245, 255, 0.6) 20%, rgba(0, 150, 162, 0.6) 90%);
  width: 100%;
  flex: 1;
  border-radius: 35px;
  /* Adjusted for 5px padding (40-5=35) */
  backdrop-filter: blur(20.1px);
  display: flex;
  flex-direction: column;
  padding: 24px;
  color: #fff;
  font-family: 'Rajdhani', sans-serif;
}

@keyframes result-pop {
  from {
    transform: scale(0.8);
    opacity: 0;
  }

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


/* Result Wrapper to stack Heading and Box */
.result-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* External Heading Style */
.result-header {
  font-family: 'Audiowide', cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 26px;
  line-height: 150%;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 1);
  text-shadow: 0 0 10px rgba(0, 150, 162, 0.8);
  /* Optional glow for aesthetic match */
}

/* Result Top Bar (Round & Time) */
.result-top-bar {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 16px;
  align-items: center;
}

.result-info-group {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.info-label {
  font-family: 'Orbitron', sans-serif;
  color: rgba(0, 88, 110, 1);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
}

.info-value {
  font-family: 'Space Grotesk', sans-serif;
  color: rgba(255, 255, 255, 1);
  font-weight: 600;
  font-size: 14px;
}

.result-footer {
  text-align: center;
  margin-top: auto;
  font-family: 'Audiowide', cursive;
  color: rgba(255, 255, 255, 1);
  font-size: 20px;
  padding-top: 10px;
}

/* Next Round Text (Bottom External) */
.result-next-round {
  font-family: 'Orbitron', sans-serif;
  font-weight: 400;
  font-size: 24px;
  color: rgba(134, 235, 255, 1);
  text-align: center;
  margin-top: 15px;
  letter-spacing: 1px;
}

/* Action Buttons Container */
.result-actions {
  display: flex;
  gap: 50px;
  margin-top: 10px;
}

/* Base Button Style */
.result-btn {
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 40px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  text-transform: capitalize;
  border-radius: 8px;
  transform: skewX(-10deg);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s, filter 0.2s;
  min-width: 140px;
}

.result-btn span {
  display: block;
  transform: skewX(10deg);
}

.result-btn:hover {
  filter: brightness(1.1);
  transform: skewX(-10deg) translateY(-2px);
}

.result-btn:active {
  transform: skewX(-10deg) translateY(1px);
}


.quit-btn {
  background:
    linear-gradient(180deg, #C42C65 0%, #B80033 100%) padding-box,
    linear-gradient(83.75deg, #E63074 8.4%, #FF98B5 96.34%) border-box;
  border: 1px solid transparent;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  transform: skewX(10deg);
}

.quit-btn span {
  transform: skewX(-10deg);
}

.quit-btn:hover {
  transform: skewX(10deg) translateY(-2px);
}

.quit-btn:active {
  transform: skewX(15deg) translateY(1px);
}


.play-btn {
  background:
    linear-gradient(180deg, #B0FF2A 0%, #3E8100 100%) padding-box,
    linear-gradient(83.75deg, #A0ED24 8.4%, #D0FE82 96.34%) border-box;
  border: 1px solid transparent;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  text-shadow: none;
}

.play-btn:hover {
  background:
    linear-gradient(180deg, #C2FF4D 0%, #4FA300 100%) padding-box,
    linear-gradient(83.75deg, #A0ED24 8.4%, #D0FE82 96.34%) border-box;
  filter: none;
  transform: skewX(-10deg) translateY(-2px);
}

.result-wrapper {
  transform: none;
}

@media (max-width: 500px) {
  #result-component {
    width: 90vw;
    height: auto;
    min-height: 380px;
    padding: 5px;
    /* Restored tight border spacing */
  }

  .result-header {
    font-size: 20px;
  }

  /* Info Group (Round/Time) */
  .info-label,
  .info-value {
    font-size: 12px;
  }

  .result-table-header,
  .result-table-row {
    font-size: 11px;
    padding: 6px 8px !important;
    /* Reduce horizontal padding */
    gap: 4px !important;
    /* Reduce grid gap */
  }

  .header-cell {
    font-size: 9px !important;
    letter-spacing: 0;
    /* Tighten text */
  }

  /* Next Round Text */
  .result-next-round {
    font-size: 16px;
    margin-top: 10px;
  }

  /* Footer (Net Result) */
  .result-footer {
    font-size: 16px;
  }

  .result-actions {
    gap: 15px;
    /* Tighter gap */
  }

  .result-btn {
    padding: 8px 12px;
    /* Smaller padding */
    font-size: 14px;
    min-width: 80px;
  }

  #result-overlay {
    background-size: cover;
  }
}

/* How to Play Video Styles */
.how-to-play-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  padding: 10px;
}

.video-wrapper {
  width: 80%;
  max-width: 600px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.1);
  background: black;
  aspect-ratio: 16/9;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.how-to-play-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.language-controls {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.lang-btn {
  flex: 1;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  /* Slightly rounded */
  font-family: 'Orbitron', 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  /* Match game style if needed, image showed Capitalized */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  background-size: 200% auto;
  transition: transform 0.2s, filter 0.2s;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  /* Skew to match game aesthetic? */
  transform: skewX(-12deg);
}

/* Un-skew text inside */
.lang-btn {
  display: flex;
  /* aligns text center */
  align-items: center;
  justify-content: center;
}

.lang-btn:hover {
  transform: skewX(-12deg) translateY(-2px);
  filter: brightness(1.1);
}

.lang-btn:active {
  transform: skewX(-12deg) translateY(0);
  filter: brightness(0.95);
}

/* Specific gradients matching the UP/DOWN buttons but adapted */
.lang-btn--en {
  /* Greenish */
  background: linear-gradient(0deg, #b0ff2a 0%, #3e8100 100%);
}

.lang-btn--hi {
  /* Reddish */
  background: linear-gradient(0deg, #b80033 0%, #c42c65 100%);
  transform: skewX(12deg);
}


.lang-btn--hi:hover {
  transform: skewX(12deg) translateY(-2px);
}

.lang-btn--hi:active {
  transform: skewX(12deg) translateY(0);
}

/* Ensure text remains straight (vertical) for both buttons */
.lang-btn span {
  display: block;
  transform: skewX(12deg);
  /* Un-skews the default -12deg of .lang-btn */
}

.lang-btn--hi span {
  transform: skewX(-12deg);
  /* Un-skews the 12deg of .lang-btn--hi */
}

/* Title group wrapper for stacking Title and Balance */
.title-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.header-stats-row {
  display: flex;
  gap: 6px;
}

.stat-box {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background-color: rgba(0, 140, 179, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  margin-top: -2px;
}

.stat-icon {
  width: 16px;
  height: auto;
  display: block;
}

.stat-box img[alt="Game"] {
  width: 24px;
}

.stat-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 8px;
  line-height: 1;
  color: #fff;
  font-weight: 700;
}

.info-circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  margin-top: -2px;
  /* Align with other icons */
}

@media (max-width: 480px) {
  .title-group {
    gap: 15px;
  }

  .live-icon {
    width: 42px;
    height: 42px;
  }
}

@media (max-width: 390px) {
  .stat-box {
    width: 20px;
    height: 20px;
    border-radius: 5px;
  }

  .stat-icon {
    width: 9px;
  }

  .stat-box img[alt="Game"] {
    width: 14px;
  }

  .info-circle {
    width: 10px;
    height: 10px;
    font-size: 7px;
  }

  .header-stats-row {
    margin-top: -5px;
  }
}

/* Toast Notification Styles */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.toast-notification {
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(12px);
  border: 1.5px solid rgba(239, 68, 68, 0.6);
  border-radius: 12px;
  padding: 14px 18px;
  min-width: 280px;
  max-width: 400px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(239, 68, 68, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: #ef4444;
  font-family: 'Space Grotesk', 'Rajdhani', sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  transform: translateX(120%);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
  position: relative;
  overflow: hidden;
}

.toast-notification::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom, #ef4444, #dc2626);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

.toast-notification.toast-enter {
  transform: translateX(0);
  opacity: 1;
}

.toast-notification.toast-exit {
  transform: translateX(120%);
  opacity: 0;
}

.toast-title {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 4px;
  color: #ef4444;
  letter-spacing: 0.3px;
}

.toast-message {
  font-weight: 500;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
}

/* Responsive styles for smaller devices */
@media (max-width: 768px) {
  .toast-container {
    top: 12px;
    right: 12px;
    left: 12px;
    align-items: stretch;
  }

  .toast-notification {
    min-width: unset;
    max-width: unset;
    width: 100%;
    font-size: 14px;
    padding: 12px 16px;
  }
}

@media (max-width: 480px) {
  .toast-container {
    top: 10px;
    right: 10px;
    left: auto;
    gap: 8px;
    align-items: flex-end;
  }

  .toast-notification {
    font-size: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    min-width: unset;
    max-width: 240px;
    width: auto;
    word-wrap: break-word;
  }

  .toast-title {
    font-size: 13px;
    margin-bottom: 3px;
    word-wrap: break-word;
  }

  .toast-message {
    font-size: 11px;
    line-height: 1.4;
    word-wrap: break-word;
  }
}

/* ===================================================================
   SMALL MOBILE FIX (≤420px): Prevent horizontal overflow
   This MUST be the last block so it overrides all earlier breakpoints.
   =================================================================== */
@media (max-width: 420px) {

  /* --- Betbar: stack vertically instead of side-by-side --- */
  .betbar-container {
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
  }

  .betbar-left {
    width: 100%;
    justify-content: center;
  }

  .presets {
    max-width: 195px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .presets .chip {
    aspect-ratio: 1 / 1;
    height: auto;
    padding: 0;
    margin: -6px;
  }

  .betbar-right {
    /* width: 100%; */
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

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

  .total {
    flex: 1;
    min-width: 0;
  }

  /* --- Header: let phase chip shrink to content --- */
  .phase-chip {
    width: auto;
    min-width: 0;
    padding: 6px 8px;
  }

  .header {
    padding: 0 8px;
    gap: 4px;
  }

  /* --- Stock rail items: constrain to viewport --- */
  .rail-item {
    grid-template-columns: 1fr auto;
    min-width: 0;
  }

  .actions {
    gap: 4px;
  }

  .btn--down,
  .btn--up {
    min-width: 44px;
    padding: 0 4px;
  }
}