/* Enhanced Game Canvas for PixiJS Integration */

@font-face {
  font-family: "Staatliches";
  src: url("./assets/fonts/Staatliches-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Rubik";
  src: url("./assets/fonts/Rubik-Regular.ttf") format("truetype");
}

* {
  /* font-family: "Staatliches", "sans-serif"; */
}

.game-canvas {
  flex: 1;
  position: relative;
  background-image: url("./assets/images/fantasybackground-2.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: hidden;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: all 0.5s ease-out;
}

/* PixiJS Canvas Integration */
.game-canvas canvas {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 10 !important;
  border-radius: inherit;
}

/* Enhanced illusion effects for PixiJS */
.game-canvas.illusion-active {
  background-position: center 5%;
  background-size: 110%;
  animation: canvasIllusionPixi 4s ease-in-out infinite alternate;
  filter: brightness(1.15) contrast(1.1);
}

.game-canvas.illusion-active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 191, 255, 0.08) 15%,
      rgba(255, 255, 255, 0.15) 35%,
      rgba(0, 255, 255, 0.12) 55%,
      rgba(255, 20, 147, 0.08) 75%,
      transparent 100%
    ),
    radial-gradient(
      circle at 75% 25%,
      rgba(0, 191, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.06) 35%,
      transparent 65%
    );
  pointer-events: none;
  z-index: 5; /* Below PixiJS canvas */
  animation: illusionOverlayPixi 3s ease-in-out infinite alternate;
}

.game-canvas.illusion-active::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
      ellipse at 80% 20%,
      rgba(0, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0.05) 40%,
      transparent 70%
    ),
    linear-gradient(
      45deg,
      transparent 0%,
      rgba(255, 20, 147, 0.05) 25%,
      transparent 50%,
      rgba(0, 191, 255, 0.06) 75%,
      transparent 100%
    );
  pointer-events: none;
  z-index: 4; /* Below PixiJS canvas */
  animation: radialIllusionPixi 5s ease-in-out infinite alternate;
}

.loader-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* space between diamond and logo */
}

.logo-img {
  height: 80px; /* adjust size */
  width: auto; /* keep aspect ratio */
}
.logo-text {
  height: 40px; /* adjust size */
  width: auto; /* keep aspect ratio */
}

@keyframes canvasIllusionPixi {
  from {
    background-position: center 5%;
    background-size: 110%;
    filter: brightness(1.15) contrast(1.1);
  }
  to {
    background-position: center 0%;
    background-size: 115%;
    filter: brightness(1.25) contrast(1.15) saturate(1.1);
  }
}

@keyframes illusionOverlayPixi {
  from {
    opacity: 0.6;
    transform: translateY(0px);
  }
  to {
    opacity: 0.8;
    transform: translateY(-5px);
  }
}

@keyframes radialIllusionPixi {
  from {
    opacity: 0.7;
    transform: scale(1) rotate(0deg);
  }
  to {
    opacity: 0.9;
    transform: scale(1.03) rotate(1deg);
  }
}

/* Legacy DOM Elements (Hidden when PixiJS is active) */
.rocket[style*="display: none"],
.trail-container[style*="display: none"] {
  display: none !important;
}

/* Fallback styles for when PixiJS fails */
.pixijs-fallback .rocket {
  display: block !important;
}

.pixijs-fallback .trail-container {
  display: block !important;
}

/* Enhanced Multiplier Display */
.multiplier-display {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 5rem;
  font-weight: bold;
  color: #ffffff;
  z-index: 15; /* Above PixiJS canvas */
  transition: all 0.3s ease;
  font-family: "Staatliches", "sans-serif";
  display: none;

  pointer-events: none;
}

/* 
  to {
    
  }
} */

.multiplier-display.show {
  display: block;
}

.multiplier-display.crashed {
  color: #ff0000;
  

  animation: shakePixi 0.5s ease-in-out;
}

@keyframes shakePixi {
  0%,
  100% {
    transform: translate(-50%, -50%);
  }
  25% {
    transform: translate(-52%, -48%);
  }
  50% {
    transform: translate(-48%, -52%);
  }
  75% {
    transform: translate(-52%, -50%);
  }
}

/* Game Logo */
.game-logo {
  background-image: url(./assets/images/FlyHigh.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  min-width: 200px;
  padding-top: calc(49 / 87 * 50%);
  margin-bottom: 20px;
  z-index: 12; /* Above PixiJS canvas */
  position: relative;
}

/* Enhanced Countdown Loader */
.countdown-container {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  text-align: center;
  z-index: 20; /* Above everything */
  padding: 15px 20px;
  border-radius: 12px;
  /* background: rgba(0, 0, 0, 0.3); */
  /* backdrop-filter: blur(5px); */
  /* border: 1px solid rgba(0, 191, 255, 0.2); */
}

/*
 * New styles to ensure the "flew away" message is small.
 * The !important flag is used to forcefully override existing styles.
 */

/* Wrapper class for context and to override main multiplier display */
.flew-away-message.crashed {
    /* You may need to adjust z-index or other positioning here if it's still being blocked */
    z-index: 100;
}

/* Content wrapper for the flew-away message */
.flew-away-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    max-width: 90vw;
    margin: 0 auto;
    gap: 0.4rem;
}

/* Style for "FLEW AWAY!" text (the smaller of the two lines) */
/*
 * New styles to ensure the "flew away" message is BIG.
 */

/* Style for "FLEW AWAY!" text (the heading) */
.flew-away-message .small-text {
    /* Significantly larger: min: 2rem, preferred: 5vw, max: 4rem */
    font-size: clamp(2rem, 5vw, 4rem) !important;
    margin-bottom: 0.5rem !important; /* Increased spacing */
}

/* Style for the Multiplier (X) text (the main value) */
.flew-away-message .smaller-multiplier {
    /* Huge size: min: 5rem, preferred: 10vw, max: 8rem */
    font-size: clamp(5rem, 10vw, 8rem) !important; 
    color: #FBA814 !important;
    /* Optional: Make it bold for emphasis */
    font-weight: bold !important; 
}


/* Extra small screens tweaks */
@media (max-width: 480px) {
  .flew-away-content { 
    gap: 0.3rem;
  }
  .flew-away-message .small-text {
    letter-spacing: 1px;
  }
}

.countdown-text {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
  /*  */
  animation: pulsePixi 2s ease-in-out infinite;
  display: none;
}

@keyframes pulsePixi {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.countdown-bar-container {
  width: 100%;
  height: 8px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 215, 0, 0.5);
  position: relative;
}

.countdown-bar {
  height: 100%;
  background: #FBA814;
  background-size: 200% 100%;
  border-radius: 4px;
  transition: width 0.5s ease-out;
  width: 100%;
  animation: shimmerPixi 2s ease-in-out infinite;
}

@keyframes shimmerPixi {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.countdown-container.hidden {
  display: none;
}

/* History Trail inside game canvas */
.history-trail-ingame {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  background: #353535;
  backdrop-filter: blur(10px);
  padding: 8px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 25; /* Above everything */
  transition: all 0.3s ease;
  border-radius: 4px;
}

.history-trail-ingame.expanded {
  background: rgba(0, 0, 0, 0.9);
  padding: 15px;
  max-height: 200px;
  overflow-y: auto;
}

/* Game Status */
.game-status {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  padding: 8px 16px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: bold;
  z-index: 30; /* Above everything */
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.game-status.pause {
  color: #ffd700;
  border-color: #ffd700;
  background: rgba(255, 215, 0, 0.1);
}

.game-status.started {
  color: #00ff00;
  border-color: #00ff00;
  background: rgba(0, 255, 0, 0.1);
}

.game-status.crashed {
  color: #ff0000;
  border-color: #ff0000;
  background: rgba(255, 0, 0, 0.1);
}

/* Performance Optimizations for PixiJS */
.game-canvas * {
  will-change: auto;
}

.game-canvas canvas {
  will-change: transform, opacity;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Smooth transitions for PixiJS integration */
.multiplier-display,
.game-logo,
.countdown-container {
  will-change: transform, opacity;
}

/* Base styles (keeping all existing styles intact) */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Staatliches", "sans-serif";
  background: #000000;
  height: 100vh;
  color: white;
  overflow: hidden;
  font-weight: none;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative;
}

/* Header */
.header {
  /* background: linear-gradient(to right, #CF0000 0%, #CF0000 70%, #00236A 100%); */
  backdrop-filter: blur(10px);
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
}

/* Settings Sidebar */
.settings-sidebar {
  position: fixed;
  top: 0;
  left: -300px;
  width: 300px;
  height: 100vh;
  background: #111111;
  z-index: 2000;
  transition: left 0.3s ease;
  display: flex;
  flex-direction: column;
}

.settings-sidebar.visible {
  left: 0;
}

.settings-header {
   /* background: linear-gradient(to right, #CF0000 0%, #CF0000 70%, #00236A 100%); */
  background: #0752DE;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-details {
  flex: 1;
}

.user-details .user-name {
  color: #fff;
  font-weight: bold;
  font-size: 16px;
}

.change-avatar-btn {
  background: transparent;
  border: 1px solid #ffffff;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s ease;
}

.change-avatar-btn:hover {
  background: rgba(0, 255, 255, 0.1);
}

.settings-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.settings-section {
  margin-bottom: 20px;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  /* border-bottom: 1px solid rgba(255, 255, 255, 0.1); */
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-label {
  color: #fff;
  font-size: 14px;
}

.toggle-switch {
  width: 50px;
  height: 24px;
  background: #333;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  transition: background 0.3s ease;
  border: 2px solid #ffffff;
}

.toggle-switch.active {
  background: #0752DE;
  border: 2px solid #0752DE;
}

.toggle-slider {
  width: 17px;
  height: 17px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.3s ease;
}

.toggle-switch.active .toggle-slider {
  transform: translateX(26px);
}

.settings-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  margin: 20px 0;
}

.setting-link {
  color: #fff;
  padding: 12px 0;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.3s ease;
  border-radius: 4px;
  padding-left: 10px;
}

.setting-link:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* .setting-link.active {
  background: #2c2c4a;
} */

/* Game Rules Modal */
.game-rules-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
}

.game-rules-modal.visible {
  display: flex;
}

.game-rules-content {
  background: #111111;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.game-rules-header {
  background: #0752DE;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.game-rules-title {
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  margin: 0;
}

.close-btn {
  background: #052267;
  border: none;
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}

.close-btn:hover {
  background: #2c2c4a;
}

.game-rules-body {
  padding: 30px;
  color: #fff;
  max-height: calc(90vh - 80px);
  overflow-y: auto;
}

.game-intro {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 30px;
}

.how-to-play-title {
  color: #fff;
  font-size: 20px;
  margin-bottom: 20px;
}

.game-video-placeholder {
  width: 100%;
  height: 200px;
  background: #000;
  border-radius: 8px;
  margin-bottom: 30px;
}

.steps-intro {
  font-size: 18px;
  margin-bottom: 30px;
}

.steps-container {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.step-item {
  flex: 1;
  min-width: 200px;
  text-align: center;
}

.step-number {
  width: 50px;
  height: 50px;
  background: #0752DE;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  margin: 0 auto 15px;
}

.step-video-placeholder {
  width: 100%;
  height: 120px;
  background: #000;
  border-radius: 8px;
  margin-bottom: 15px;
}

.step-text {
  font-size: 14px;
  line-height: 1.4;
}

.game-conclusion {
  font-size: 16px;
  line-height: 1.6;
  margin-top: 30px;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .settings-sidebar {
    width: 280px;
    left: -280px;
  }

  .game-rules-content {
    width: 95%;
    margin: 20px;
  }

  .steps-container {
    flex-direction: column;
  }

  .step-item {
    min-width: auto;
  }
}

/* My Bet History Modal */
.bet-history-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
  padding: 10px;
}

.bet-history-modal.visible {
  display: flex;
}

.bet-history-content {
  background: black;
  width: 100%;
  max-width: 800px;
  max-height: 90vh;
  border-radius: 0;
  overflow: hidden;
  position: relative;
}

.bet-history-header {
   background: linear-gradient(to right, #CF0000 0%, #CF0000 70%, #00236A 100%);
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bet-history-title {
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}

.bet-history-body {
  padding: 20px;
  color: #fff;
  max-height: calc(90vh - 80px);
  overflow-y: auto;
  background-color: #052267;
}

.bet-history-table {
  width: 100%;
}

.bet-history-headers {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 15px;
  padding: 0 0 20px 0;
  font-weight: 500;
  font-size: 14px;
  color: #ccc;
}

.bet-history-entries {
  max-height: 400px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bet-entry {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 15px;
  padding: 15px;
  background: #181948;
  border-radius: 12px;
  transition: all 0.3s ease;
  align-items: center;
}

.bet-entry.selected {
  border: 2px solid #fd055c;
  background: #1f1f1f;
}

.bet-date {
  font-size: 14px;
  color: #fff;
  font-weight: 500;
}

.bet-amount {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.bet-value {
  font-size: 14px;
  color: #fff;
  font-weight: 500;
}

.multiplier-badge {
  background: #CF0101;
  color: #000000;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
}

.cashout-amount {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: #fff;
  font-weight: 500;
  flex-wrap: wrap;
  gap: 8px;
}

.bet-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}

.action-icon {
  width: 20px;
  height: 20px;
  cursor: pointer;
  transition: opacity 0.3s ease;
  border-radius: 50%;
  flex-shrink: 0;
}

.action-icon:hover {
  opacity: 0.7;
}

.shield-icon {
  background-image: url("./assets/images/shieldIcon.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 12px;
  height: 14px;
}

.chat-icon {
  background-image: url("./assets/images/chatIcon.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 13px;
  height: 13px;
}

/* Tablet Styles */
@media (max-width: 768px) {
  .bet-history-modal {
    padding: 5px;
  }

  .bet-history-content {
    width: 100%;
    max-height: 95vh;
  }

  .bet-history-header {
    padding: 12px 15px;
  }

  .bet-history-title {
    font-size: 16px;
  }

  .bet-history-body {
    padding: 15px;
    max-height: calc(95vh - 60px);
  }

  .bet-history-headers {
    font-size: 13px;
    gap: 10px;
  }

  .bet-entry {
    padding: 12px;
    gap: 10px;
  }

  .bet-date,
  .bet-value,
  .cashout-amount {
    font-size: 13px;
  }

  .multiplier-badge {
    font-size: 11px;
    padding: 3px 6px;
  }

  .action-icon {
    width: 18px;
    height: 18px;
  }

  .bet-actions {
    gap: 4px;
  }
}

/* Mobile Styles */
@media (max-width: 480px) {
  .bet-history-modal {
    padding: 0;
  }

  .bet-history-content {
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }

  .bet-history-header {
    padding: 10px 12px;
  }

  .bet-history-title {
    font-size: 14px;
  }

  .bet-history-body {
    padding: 10px;
    max-height: calc(100vh - 50px);
  }

  .bet-history-headers {
    display: none;
  }

  .bet-entry {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    align-items: flex-start;
  }

  .bet-entry > * {
    width: 100%;
  }

  .bet-amount {
    justify-content: space-between;
    width: 100%;
  }

  .cashout-amount {
    justify-content: space-between;
    width: 100%;
  }

  .bet-actions {
    justify-content: center;
    width: 100%;
    margin-top: 5px;
  }

  .bet-date,
  .bet-value,
  .cashout-amount {
    font-size: 12px;
  }

  .multiplier-badge {
    font-size: 10px;
    padding: 2px 5px;
  }

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

  .bet-date::before {
    content: "Date: ";
    color: #ccc;
    font-weight: 400;
  }

  .bet-value::before {
    content: "Amount: ";
    color: #ccc;
    font-weight: 400;
  }
}

/* Very small mobile devices */
@media (max-width: 320px) {
  .bet-history-entries {
    max-height: 350px;
  }

  .bet-entry {
    padding: 8px;
  }

  .bet-date,
  .bet-value,
  .cashout-amount {
    font-size: 11px;
  }

  .multiplier-badge {
    font-size: 9px;
  }
}

/* Avatar Selection Modal */
.avatar-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
}

.avatar-modal.visible {
  display: flex;
}

.avatar-content {
  background: #052267;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.avatar-header {
  background: #fd055c;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.avatar-title {
  color: #000;
  font-size: 24px;
  font-weight: bold;
  margin: 0;
}

.avatar-grid {
  padding: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 20px;
  max-height: calc(80vh - 80px);
  overflow-y: auto;
}

.avatar-option {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid transparent;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #333;
  overflow: hidden;
}

.avatar-option:hover {
  border-color: #fd055c;
  transform: scale(1.05);
}

.avatar-option.selected {
  border-color: #39ff14;
  transform: scale(1.1);
}

.avatar-option img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Black Overlay */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: none;
}

.menu-overlay.visible {
  display: block;
}

/* Make user avatar clickable */
.user-avatar {
  cursor: pointer;
  transition: transform 0.3s ease;
}

.user-avatar:hover {
  transform: scale(1.05);
}

.left-header {
  display: flex;
  align-items: center;
  gap: 20px;
}

.menu-toggle {
  background-image: url("./assets/images/menuIcon.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.logo {
  background-image: url(./assets/images/FlyHigh.png);
  background-size: contain;
  background-repeat: no-repeat;

  background-position: center;
  min-width: 110px;
  padding-top: calc(49 / 87 * 100%);
  display: block;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.user-name {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.user-name:hover {
  opacity: 0.8;
}

.user-avatar-small {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.user-avatar-small:hover {
  transform: scale(1.1);
}

.user-avatar-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#userNameDisplay {
  font-family: "Staatliches", "sans-serif";
  color: #fff;
}

.balance {
  /* background: linear-gradient(45deg, #fd055c, #1e90ff); */
  color: #ffffff;
  padding: 8px 10px;
  /* border-radius: 20px; */
  font-weight: bold;
  font-size: 14px;
}

.user-name {
  font-size: 14px;
  color: #ccc;
}

.how-to-play {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  border: none;
  padding: 6px 10px;
  border-radius: 5px;
  transition: all 0.3s ease;
  background: #1f1f1f;
  font-family: "Staatliches", "sans-serif";
}

.how-to-play:hover {
  /* background: #fd055c;
    color: #000; */
}

.history-items {
  display: flex;
  gap: 8px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  align-items: center;
  transition: all 0.3s ease;
}

.history-items::-webkit-scrollbar {
  display: none;
}

.history-items-compact {
  display: flex;
  gap: 6px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  align-items: center;
  flex-wrap: nowrap;
  transition: all 0.3s ease;
}

.history-items-compact::-webkit-scrollbar {
  display: none;
}

.history-trail-ingame.expanded .history-items-compact {
  flex-wrap: wrap;
  max-height: 150px;
  overflow-y: auto;
  gap: 8px;
}

.history-expand-btn {
  background:#0A0D28;
  border: none;
  color: #fff;
  padding: 4px 4px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  transition: all 0.3s ease;
  min-width: 73px;
  justify-content: center;
  font-family: "Staatliches", sans-serif;
}

.history-expand-btn:hover {
  /* background: rgba(0, 191, 255, 0.2);
    transform: scale(1.05); */
}

.history-item {
  background: #2a2a3e;
  padding: 4px 4px;
  border-radius: 4px;
  font-size: 12px;
  font-family: "Staatliches", "sans-serif";
  min-width: 60px;
  text-align: center;
  animation: slideIn 0.3s ease;
  /* border: 1px solid rgba(255, 255, 255, 0.1); */
  color: #FFFFFF;
  white-space: nowrap;
}

.history-item.high {
  background: #07DBA3;
}

.history-item.medium {
  background: #A77BEE;
}

.history-item.low {
  background: #FF3059;
}

/* Main Content */
.main-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.border {

  padding: 20px;
  border-radius: 15px;
}

/* Sidebar */
.sidebar {
  /* max-width: 400px; */
  width: 350px;
  margin: 0 auto;
  /* background-color: #191A49; */
  border-radius: 12px;
  overflow: hidden;
  /* // */
  padding: 20px;
  /* padding-top: 0px; */
}

.content-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  /* background-color: #052267; */
  background: #111111;
  border: 1px solid #353535;
}

.sidebar.hidden {
  transform: translateX(-100%);
}

.sidebar-title {
  background: linear-gradient(45deg, #fd055c, #fd055c);
  color: #ffffff;
  padding: 12px;
  border-radius: 7px;
  margin-bottom: 15px;
  text-align: center;

  font-size: 14px;
  text-align: left;
  letter-spacing: 2px;
  font-family: "Staatliches", sans-serif;
}

.sidebar-heading {
  position: relative;
  display: flex;
  list-style: none;
  text-align: center;
  padding: 4px;
  gap: 4px;
  text-align: center;
  border-radius: 5px;
  /* border-width: 1px; */
  /* background-color: #99182D; */
  border: 1px solid #353535;
}

.sidebar-heading li {
  flex: 1;
  border-radius: 3px;
  padding: 4px 0;
  cursor: pointer;
}

.sidebar-heading li.active {
  background: #0752DE;
}



.bet-headers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 8px 0;
  /* border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 10px; */
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  justify-items: center;
  padding: 10px;
  letter-spacing: 1px;
}

.bet-headers > div:first-child {
  justify-self: start;
}

.bet-headers > div:last-child {
  justify-self: end;
}

/* .bet-list { */
.tab-content {
  flex: 1;
  overflow-y: auto;
  display: none;
}
.tab-content.active {
  display: block;
  overflow: hidden;
}

.bet-item {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  padding: 8px 0;
  margin: 3px 0;
  /* background: rgba(255, 255, 255, 0.03); */
  border-radius: 6px;
  font-size: 11px;
  text-align: center;
  padding: 10px;
}

.bet-item.bg {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  padding: 8px 0;
  margin: 3px 0;
  border-radius: 6px;
  font-size: 11px;
  text-align: center;
  padding: 10px;

  /* background: linear-gradient(
    90deg,
    rgba(53, 60, 107, 1) 0%,
    rgba(3, 6, 9, 1) 100%
  ); */
}

.bet-item > div:first-child {
  justify-self: start;
  align-self: center;
}

.bet-item > div:last-child {
  justify-self: end;
  align-self: center;
}

.bet-item.loss {
  background: #191A49;

  /* border-left: 3px solid rgba(255, 255, 255, 0.3); */
}

.bet-amount {
  font-family: "Staatliches", "sans-serif";
  color: white;
}

.bet-multiplier {
  background: #0752DE;
  color: #fefcfc;
  font-family: "Staatliches", "sans-serif";
  border-radius: 4px;
  padding: 4px 12px; /* balanced padding */

  display: flex; /* enable flexbox */
  align-items: center; /* vertical center */
  justify-content: center; /* horizontal center */
  text-align: center; /* fallback */
}

.bet-multiplier.crashed {
  /* color: #e74c3c; */
}

/* .bet-win {
  font-weight: bold;
} */

.bet-win.profit {
  color: #fff;
}

.bet-win.loss {
  color: #fff;
}

/* Game Area */
.game-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* Legacy Rocket Styles (for fallback) */
.rocket {
  position: absolute;
  width: 146px;
  height: 146px;
  z-index: 5;
  display: none;
  transition: filter 0.3s ease;
  transform-origin: center center;
  left: 40px;
  top: calc(100% - 140px);
}

.rocket.show {
  display: block;
}

.rocket-image {
  width: 100%;
  height: 100%;
  object-fit: contain;

  transition: filter 0.3s ease;
}

.rocket-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.6));
  transition: filter 0.3s ease;
}

.rocket.show .rocket-image {
  filter: drop-shadow(0 0 20px rgba(0, 191, 255, 0.7));
}

@keyframes rocketGlow {
  from {
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.6));
  }
  to {
    filter: drop-shadow(0 0 25px rgba(0, 191, 255, 0.8))
      drop-shadow(0 0 35px rgba(255, 255, 255, 0.4));
  }
}
/* Legacy Trail System (for fallback) */
.trail-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}

.trail-segment {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 20, 147, 0.8) 0%,
    rgba(255, 20, 147, 0.4) 50%,
    transparent 100%
  );
  animation: trailFade 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes trailFade {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.5);
  }
}

.game-Add {
  width: 100%;
  padding: 0 15px;
  margin: 0 auto;
}

.game-Add img {
  width: 100%;
  height: auto;
  display: block;
}

/* Tablet */
@media (min-width: 768px) {
  .game-Add {
    max-width: 720px;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .game-Add {
    max-width: 960px;
  }
}

/* Large Desktop */
@media (min-width: 1440px) {
  .game-Add {
    max-width: 1200px;
  }
}

/* Control Panel - Enhanced Design */
.control-panel {
  /* background: #191a49; */
  backdrop-filter: blur(15px);
  padding: 16px 20px;
  display: flex;
  gap: 20px;
  justify-content: space-evenly;
  align-items: stretch;
  min-height: 140px;
  max-width: 100%;
  /* border-top: 1px solid rgba(0, 191, 255, 0.2); */
  /* margin-top: 100px; */
}

.bet-section {
  /* background: linear-gradient(to right, #00236AB2 10%, #CF0000); */
  background: #1F1F1F;
  border-radius: 8px;
  padding: 16px;
  flex: 1;
  max-width: 450px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  transition: all 0.3s ease;
}

/* Black divider line between sections */
.bet-options {
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  padding-bottom: 12px;
  margin-bottom: 12px;
}

/* Min/Max labels for bet amount */
.bet-amount-display {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}



/* .bet-section:hover {
  background: rgba(255, 255, 255, 0.08);
  /* border-color: rgba(255, 255, 255, 0.6); */
*/

.bet-spot {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  height: 100%;
}

.bet-options {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.bet-mode-toggle {
  display: flex;
  /* background: rgba(0, 0, 0, 0.5); */
  border-radius: 6px;
  padding: 2px;
  border: 1px solid #353535;
  width: 136px;
  gap: 2px;
}

.bet-mode-option {
  flex: 1;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.bet-mode-option input[type="radio"] {
  display: none;
}

.bet-mode-option span {
  padding: 2px 12px;
  color: white;
  font-size: 14px;
  border-radius: 4px;
  transition: all 0.3s ease;
  width: 100%;
  text-align: center;
  letter-spacing: 1px;
  font-family: "Staatliches", sans-serif;
}

.bet-mode-option input[type="radio"]:checked + span {
  /* background: linear-gradient(to right, #00236A, #221D59, #58143D, #CF0000); */
  background: #111111;
  border: 1px solid #0752DE;
  color: #0752DE;
  font-family: "Staatliches", "sans-serif";
}

.auto-cashout-section {
  display: none;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.3);
  padding: 6px 8px;
  border-radius: 4px;
  /* border: 1px solid rgba(0, 191, 255, 0.2); */
  font-size: 10px;
  flex: 1;
}

.auto-cashout-section.show {
  display: flex;
}




/* .auto-cashout-section.enabled {
  background: rgba(0, 255, 0, 0.1);
  border-color: rgba(0, 255, 0, 0.3);
} */

.auto-cashout-section label {
  color: #fd055c;
  font-weight: bold;
  white-space: nowrap;
}

.auto-cashout-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.auto-cashout-checkbox input[type="checkbox"] {
  margin-right: 8px;
  transform: scale(1.2);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #0752DE;
  border-radius: 50%;
  background: transparent;
  position: relative;
  transition: all 0.3s ease;
}

.auto-cashout-checkbox input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: #0752DE;
  border-radius: 50%;
}

.auto-cashout-checkbox label {
  color: #ffffff;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}

.auto-cashout-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.auto-cashout-input-group label {
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
}

.auto-cashout-input {
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid #333333;
  color: white;
  padding: 4px 6px;
  border-radius: 4px;
  width: 50px;
  text-align: center;
  font-size: 10px;
  transition: all 0.3s ease;
}

.auto-cashout-input:focus {
  border-color: #fd055c;

  outline: none;
}

.auto-cashout-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bet-controls {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
  flex-wrap: nowrap;
}

.bet-amount-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.bet-amount-display {
  display: flex;
  align-items: center;
  /* background: rgba(0, 0, 0, 0.5); */
  background: #111111;
  border-radius: 6px;
  padding: 2px;
  border: 1px solid #353535;
  width: 100%;
  transition: all 0.3s ease;
}

/* .bet-amount-display:focus-within {
  border-color: #fd055c;
} */

.bet-adjust-btn {
  /* Shape and Size */
  width: 30px; 
  height: 30px;
  border-radius: 50%; 
  
  /* Appearance */
  background: transparent; 
  border: 2px solid white; 
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  color: #ffffff; 
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  padding: 0; 
  transition: all 0.3s ease;
  flex-shrink: 0;
  margin: 8px;
  position: relative;
}

.bet-adjust-btn:active {
  transform: scale(0.95);
}

button.bet-adjust-btn:disabled,
button.bet-adjust-btn.disabled,
.bet-adjust-btn:disabled,
.bet-adjust-btn.disabled {
  background: #222 !important;
  color: #444 !important;
  cursor: not-allowed !important;
  transform: none !important;
  opacity: 0.3 !important;
  filter: grayscale(100%) brightness(0.5) !important;
  border: 1px solid #333 !important;

  pointer-events: none !important;
}

button.bet-adjust-btn:disabled:hover,
button.bet-adjust-btn.disabled:hover,
.bet-adjust-btn:disabled:hover,
.bet-adjust-btn.disabled:hover {
  background: #222 !important;
  color: #444 !important;
  transform: none !important;

  filter: grayscale(100%) brightness(0.5) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.bet-amount-input {
  background: transparent;
  border: none;
  color: white;
  font-size: 16px;
  text-align: center;
  padding: 10px 8px;
  flex: 1;
  outline: none;
  min-width: 60px;
  font-family: "Staatliches", "sans-serif";
}

input.bet-amount-input:disabled,
input.bet-amount-input.disabled,
.bet-amount-input:disabled,
.bet-amount-input.disabled {
  color: #d50d0d !important;
  cursor: not-allowed !important;
  opacity: 0.3 !important;
  filter: grayscale(100%) brightness(0.5) !important;
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid #222 !important;

  pointer-events: none !important;
}

/* Additional disabled state styles for maximum visibility */
.bet-adjust-btn.disabled,
.preset-btn.disabled,
.bet-amount-input.disabled {
  position: relative;
}

.bet-adjust-btn.disabled::after,
.preset-btn.disabled::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  border-radius: inherit;
  pointer-events: none;
}

/* Ensure disabled styles override any other states */
button:disabled,
button.disabled,
input:disabled,
input.disabled {
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Game Launch Loading Screen */
.game-loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: url('./assets/images/fantasybackground-2.png');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.game-loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
}

.loader-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  animation: logoFadeIn 1.5s ease-out;
}

/* .logo-diamond {
  /* font-size: 40px; */
/* color: #FF1493;
     */
/* background-image: url("./assets/images/diamondIcon.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 61.48px;
  height: 55.02px; */

/* .logo-text {
  font-size: clamp(36px, 5vw, 65px);
  font-weight: bolder;
  color: #ff1493;
  font-family: "Arial", sans-serif;
  letter-spacing: 2px;
} */

.loader-progress-container {
  width: 300px;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.loader-progress-bar {
  width: 100%;
  height: 100%;
  position: relative;
}

.loader-progress-fill {
  height: 100%;
  background: #FBA814;
  border-radius: 4px;
  width: 0%;
  animation: progressFill 3s ease-out forwards;
}

@keyframes logoFadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes progressFill {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

.bet-presets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
  width: 100%;
}

.preset-btn {
  padding: 6px 2px;
  border: 1px solid #353535;
  border-radius: 4px;
  background: #111111;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 9px;
  font-family: "Staatliches", "sans-serif";
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}

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

button.preset-btn:disabled,
button.preset-btn.disabled,
.preset-btn:disabled,
.preset-btn.disabled {
  background: rgba(0, 0, 0, 0.8) !important;
  color: #333 !important;
  border-color: #222 !important;
  cursor: not-allowed !important;
  transform: none !important;
  opacity: 0.25 !important;
  filter: grayscale(100%) brightness(0.4) !important;

  pointer-events: none !important;
}

button.preset-btn:disabled:hover,
button.preset-btn.disabled:hover,
.preset-btn:disabled:hover,
.preset-btn.disabled:hover {
  background: rgba(0, 0, 0, 0.8) !important;
  color: #333 !important;
  border-color: #222 !important;
  transform: none !important;

  filter: grayscale(100%) brightness(0.4) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  opacity: 0.25 !important;
}

.bet-btn {
  width: 120px;
  height: 100px;
  flex-shrink: 0;
}

/* Enhanced Action Buttons */
.main-action-button {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.main-action-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s ease;
}

.main-action-button.bet-state {
  background: #0752DE;
  color: #ffffff;

  font-weight: bold;
}

.main-action-button.bet-state:disabled {
  background: #444 !important;
  cursor: not-allowed !important;
  transform: none !important;
  border-color: #333 !important;
  opacity: 0.4 !important;

  filter: grayscale(100%) brightness(0.5) !important;
  pointer-events: none !important;
}

/* Disabled styles for all main action button states */
.main-action-button:disabled,
.main-action-button.disabled {
  background: #444 !important;
  color: #666 !important;
  cursor: not-allowed !important;
  transform: none !important;
  border-color: #333 !important;
  opacity: 0.4 !important;

  filter: grayscale(100%) brightness(0.5) !important;
  pointer-events: none !important;
}

.main-action-button:disabled:hover,
.main-action-button.disabled:hover {
  background: #444 !important;
  color: #666 !important;
  transform: none !important;

  filter: grayscale(100%) brightness(0.5) !important;
}

.main-action-button.cashout-state {
  background: #FBA814;
  color: #ffffff;
 

  font-weight: bold;
}

@keyframes cashoutPulse {
  0%,
  100% {
  }
  50% {
  }
}

.main-action-button.cancel-state {
  background: linear-gradient(45deg, #c0392b, #c0392b);
  color: white;
  /* border: 2px solid #e74c3c; */
}

.button-label {
  font-size: 22px;
  font-weight: 100;
  opacity: 0.95;
  line-height: 1;
  z-index: 1;
  font-family: "Staatliches", "sans-serif";
  letter-spacing: 2px;
}

.button-amount {
  font-size: 15px;
  font-family: "Staatliches", "sans-serif";
  line-height: 1;
  margin-top: 2px;
  z-index: 1;
}

/* Enhanced Toast Messages */
.toast {
  position: fixed;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  background: #353535;
  color: white;
  padding: 15px 30px;
  font-size: 17px;

  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 300px;
  justify-content: space-between;

  border-radius: 7px;
  font-family: "Staatliches", "sans-serif";
  letter-spacing: 1px;
}

/* .toast.error {
  background: #fd055c;
  color: white;
}

.toast.success {
  background: #fd055c;
  color: white;
}

.toast.info {
  background: #fd055c;
  color: white;
} */

.toast.show {
  opacity: 1;
}

.toast .toast-content {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.toast .toast-close {
  background: rgba(0, 0, 0, 0.3);
  border: none;
  color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}

.toast .toast-close:hover {
  background: rgba(0, 0, 0, 0.5);
}

/* Enhanced Multiplier Display for Crashed State */
.multiplier-display.crashed {
  color: #ffffff !important;

  font-size: 2.5rem;
  z-index: 1500 !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* gap: 15px; */
  /* position: fixed; */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-height: auto;
  animation: flewAwayPulse 0.5s ease-in-out;
  text-align: center;
  /* font-weight: bold; */
  text-transform: uppercase;
  letter-spacing: 2px;
}

@keyframes flewAwayFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) scale(0.8) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) scale(1) translateY(0);
  }
}

@keyframes flewAwayPulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Black Blanket Overlay */
.blanket-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 15000;
  display: none;
}

.blanket-overlay.visible {
  display: block;
}

/* Free Bets Management Modal */
.free-bets-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.free-bets-modal.visible {
  opacity: 1;
}

.free-bets-content {
  background: #052267;
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.free-bets-modal.visible .free-bets-content {
  transform: scale(1);
}

.free-bets-header {
  background: #fd055c;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.free-bets-header h3 {
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  margin: 0;
}

.free-bets-body {
  padding: 30px;
  color: #fff;
  max-height: calc(80vh - 80px);
  overflow-y: auto;
}

.active-free-bets-section {
  margin-top: 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h4 {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}

.archive-btn {
  background: transparent;
  border: 1px solid rgba(0, 191, 255, 0.5);
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
  filter: grayscale(1);
}

.archive-btn:hover {
  background: rgba(0, 191, 255, 0.1);
  border-color: #fd055c;
}

.archive-icon {
  font-size: 14px;
}

.free-bets-list {
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-state {
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

/* Change Room Modal */
.change-room-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.change-room-modal.visible {
  opacity: 1;
}

.change-room-content {
  background: #052267;
  width: 90%;
  max-width: 450px;
  max-height: 80vh; 
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.change-room-modal.visible .change-room-content {
  transform: scale(1);
}

.change-room-header {
  background: #fd055c;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.change-room-header h3 {
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  margin: 0;
}

.change-room-body {
  padding: 30px;
  color: #fff;
  text-align: center;
}

.warning-message {
  margin-bottom: 30px;
}

.warning-message p {
  color: #fff;
  font-size: 16px;
  margin: 8px 0;
  line-height: 1.4;
}

.room-selection {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-bottom: 30px;
}

.room-option {
  flex: 1;
  max-width: 150px;
  padding: 15px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.room-option.selected {
  border-color: #fd055c;
  background: rgba(0, 191, 255, 0.1);
}

.room-option input[type="radio"] {
  display: none;
}

/* .room-option label {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.room-option label::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid #fd055c;
  border-radius: 50%;
  display: inline-block;
  position: relative;
}

.room-option.selected label::before {
  background: #fd055c;
  border-color: #fd055c;
}

.room-option.selected label::after {
  content: "";
  width: 6px;
  height: 6px;
  background: #172a43;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-left: -8px;
  margin-top: -8px;
} */

.room-option label {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.room-option label::before {
  content: "";
  width: 20px;
  height: 20px;
  border: 2px solid #555;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  background: #172a43;
}

.room-option.selected label::before {
  border: 2px solid #fd055c;

  background: #fd055c;
}

.room-option.selected label::after {
  content: "";
  width: 6px;
  height: 6px;
  background: #172a43;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-left: -10px;
  margin-top: -10px;
}

.change-room-actions {
  margin-top: 20px;
}

.change-btn {
  background: linear-gradient(45deg, #fd055c);
  color: #fff;
  border: none;
  padding: 12px 30px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.change-btn:hover {
  transform: translateY(-2px);
}

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

/* Enhanced Animations */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Responsive Design - Enhanced for PixiJS */

@media (max-width: 1200px) {
  .bet-btn {
    width: 110px;
    height: 100px;
  }

  .preset-btn {
    font-size: 10px;
    padding: 6px 6px;
  }
}

@media (max-width: 995px) {
  .control-panel {
    padding: 12px 16px;
    gap: 12px;
    scale: 0.8;
    left: -60px;
    position: relative;
  }

  .bet-btn {
    width: 100px;
  }
}

@media (max-width: 850px) {
  .control-panel {
    scale: 0.75;
    left: -40px;
    padding: 10px 14px;
    gap: 10px;
    transform-origin: center;
  }

  .bet-section {
    padding: 8px 10px;
    gap: 8px;
    max-width: 320px;
  }

  .main-action-button {
    height: 85px;
    font-size: 12px;
  }

  .bet-btn {
    width: 90px;
  }

  .bet-amount-input {
    font-size: 12px;
    padding: 6px 8px;
  }

  .preset-btn {
    font-size: 10px;
    padding: 4px 6px;
  }
}
/* Base mobile styles (max-width: 768px) */
@media (max-width: 768px) {
  body {
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* Mobile Rocket Size */
  .rocket {
    width: 86px;
    height: 86px;
  }

  .logo {
    display: none;
  }

  .main-content {
    flex-direction: column;
    /* min-height: 100vh; */
    min-height: calc(100vh - 50px);
  }

  .game-area {
    flex: 1;
    order: 1;
    display: flex;
    position: relative;
    min-height: 300px;
  }

  .game-canvas {
    flex: 1;
  }

  .menu-toggle {
    display: block;
  }

  .history-trail-mobile {
    display: flex;
  }

  .sidebar {
    width: 100%;
    min-height: 350px;
    position: relative;
    z-index: 999;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: #181948;
    border-top: 1px solid rgba(0, 191, 255, 0.2);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
  }

  .sidebar.visible {
    max-height: 450px;
    overflow-y: auto;
  }

  .bet-list {
    max-height: 260px;
    overflow-y: auto;
    flex: 1;
  }

  .sidebar-title {
    flex-shrink: 0;
    padding: 10px 15px;
  }

  .bet-headers {
    flex-shrink: 0;
    padding: 0 15px;
  }

  .game-logo {
    min-width: 150px;
    padding-top: calc(49 / 87 * 35%);
  }
  #blanketOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 1000;
  }

  #blanketOverlay.visible {
    opacity: 1;
    visibility: visible;
  }
  .multiplier-display {
    font-size: 3.5rem;
  }

  #multiplierDisplay.crashed {
    position: absolute;
    font-size: 2.5rem;
    font-weight: bold;
    color: #fff;
    text-align: center;
    top: 390px;
    pointer-events: none;
  }

  #multiplierDisplay.crashed.show {
    opacity: 1;
    visibility: visible;
  }
  .countdown-container {
    width: 250px;
    padding: 12px 16px;
    top: 65%;
  }

  .countdown-text {
    font-size: 14px;
    margin-bottom: 10px;
  }

  .countdown-bar-container {
    height: 6px;
  }
}

/* Mobile Portrait Orientation (default mobile behavior) */
@media (max-width: 768px) and (orientation: portrait) {
  .game-area {
    flex-direction: column;
    padding: 0;
  }

  .control-panel {
    order: 2;
    flex-direction: column;
    gap: 10px;
    padding: 10px 12px;
    min-height: 120px;
    align-items: center;
    scale: none;
    left: 0;
    flex-shrink: 0;
    width: 100%;
    max-width: none;
  }

  .bet-section {
    padding: 12px;
    gap: 10px;
    max-width: none;
    width: 100%;
  }

  .main-action-button {
    height: 100px;
    font-size: 13px;
  }

  .bet-btn {
    width: 120px;
  }

  /* Mobile multiplier display font sizes */
  .multiplier-display {
    font-size: 2.5rem !important;
  }

  .multiplier-display span {
    font-size: 3.5rem !important;
  }
}

/* Mobile Landscape Orientation - 50/50 Split with Dynamic Scaling
   Space distribution:
   - Game canvas: 50% of viewport width
   - Control panel: 50% of viewport width
   - Dynamic scaling based on available height/width
*/
@media (max-width: 768px) and (orientation: landscape) {
  .game-area {
    flex-direction: row;
    padding: 0;
    height: calc(100vh - 120px); /* Account for header + history */
    min-height: 200px;
    max-height: 100vh;
    overflow: hidden;
  }

  .control-panel {
    order: 2;
    flex-direction: column;
    gap: min(1vh, 6px);
    padding: min(1vh, 6px) min(1vw, 8px);
    height: 100%;
    overflow-y: auto;
    align-items: stretch;
    scale: none;
    left: 0;
    flex-shrink: 0;
    width: 50vw;
    max-width: 50%;
    border-left: 1px solid rgba(0, 191, 255, 0.2);
    box-sizing: border-box;
  }

  .bet-section {
    padding: min(1vh, 6px);
    gap: min(0.5vh, 4px);
    max-width: none;
    width: 100%;
    flex-shrink: 0;
    height: auto;
    box-sizing: border-box;
  }

  .bet-controls {
    flex-wrap: nowrap;
    gap: min(0.5vw, 4px);
    align-items: flex-end;
    width: 100%;
    height: auto;
  }

  .bet-amount-container {
    flex: 1;
    min-width: 0;
    max-width: calc(100% - min(20vw, 90px));
  }

  .bet-amount-display {
    padding: 1px;
    min-height: max(6vh, 35px);
  }

  .bet-adjust-btn {
    width: max(3vh, 18px);
    height: max(3vh, 18px);
    margin: min(0.5vh, 4px);
    font-size: max(1.5vh, 10px);
    padding: min(1vh, 6px);
  }

  .bet-btn {
    width: min(18vw, 85px);
    height: max(12vh, 65px);
    flex-shrink: 0;
  }

  .main-action-button {
    height: 100%;
    font-size: max(1.8vh, 9px);
    line-height: 1.2;
  }

  .button-label {
    font-size: max(1.5vh, 8px);
  }

  .button-amount {
    font-size: max(1.6vh, 9px);
  }

  .bet-presets {
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    height: auto;
  }

  .preset-btn {
    font-size: max(1.2vh, 7px);
    padding: min(0.5vh, 3px) 1px;
    min-height: max(4vh, 20px);
  }

  .bet-amount-input {
    font-size: max(1.8vh, 10px);
    padding: min(0.8vh, 4px) min(0.4vw, 2px);
    min-width: min(8vw, 35px);
    min-height: max(4vh, 25px);
  }

  .game-canvas {
    flex: 1;
    order: 1;
    width: 50vw;
    max-width: 50%;
    height: 100%;
    box-sizing: border-box;
  }
}

/* Ultra-small mobile devices - Portrait */
@media (max-width: 480px) and (orientation: portrait) {
  .control-panel {
    padding: 8px 10px;
    gap: 8px;
    min-height: 110px;
  }

  .bet-section {
    padding: 10px;
    gap: 8px;
  }

  .main-action-button {
    height: 100px;
    font-size: 12px;
  }

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

  .button-amount {
    font-size: 11px;
  }

  .bet-btn {
    width: 100px;
  }

  .game-logo {
    min-width: 120px;
    padding-top: calc(49 / 87 * 30%);
  }

  .multiplier-display {
    font-size: 2.5rem;
  }

  .balance {
    font-size: 12px;
    padding: 4px 8px;
  }

  .countdown-container {
    width: 80%;
    max-width: 250px;
  }

  .countdown-text {
    font-size: 12px;
  }
}

/* Ultra-small mobile devices - Landscape (50/50 Split with Aggressive Scaling) */
@media (max-width: 480px) and (orientation: landscape) {
  .game-area {
    height: calc(100vh - 100px); /* Tighter header space */
    min-height: 180px;
    overflow: hidden;
  }

  .control-panel {
    width: 50vw;
    max-width: 50%;
    padding: min(0.8vh, 4px) min(0.8vw, 6px);
    gap: min(0.8vh, 4px);
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
  }

  .bet-section {
    padding: min(0.8vh, 4px);
    gap: min(0.4vh, 3px);
    height: auto;
    box-sizing: border-box;
  }

  .bet-controls {
    flex-wrap: nowrap;
    gap: min(0.4vw, 3px);
    align-items: flex-end;
    height: auto;
  }

  .bet-amount-container {
    flex: 1;
    min-width: 0;
    max-width: calc(100% - min(16vw, 75px));
  }

  .bet-amount-display {
    padding: 1px;
    min-height: max(5vh, 30px);
  }

  .bet-adjust-btn {
    width: max(2.5vh, 16px);
    height: max(2.5vh, 16px);
    margin: min(0.4vh, 3px);
    font-size: max(1.2vh, 8px);
    padding: min(0.8vh, 4px);
  }

  .bet-btn {
    width: min(15vw, 70px);
    height: max(10vh, 55px);
    flex-shrink: 0;
  }

  .main-action-button {
    height: 100%;
    font-size: max(1.4vh, 8px);
    line-height: 1.1;
  }

  .button-label {
    font-size: max(1.2vh, 7px);
  }

  .button-amount {
    font-size: max(1.3vh, 8px);
  }

  .preset-btn {
    font-size: max(1vh, 6px);
    padding: min(0.4vh, 2px) 1px;
    min-height: max(3.5vh, 18px);
  }

  .bet-amount-input {
    font-size: max(1.4vh, 9px);
    padding: min(0.6vh, 3px) min(0.3vw, 1px);
    min-width: min(7vw, 30px);
    min-height: max(3.5vh, 22px);
  }

  .game-canvas {
    width: 50vw;
    max-width: 50%;
    height: 100%;
    box-sizing: border-box;
  }

  .multiplier-display {
    font-size: 2.5rem !important;
  }

  .multiplier-display span {
    font-size: 3.5rem !important;
  }
}

/* Fallback for devices without orientation support or very short screens */
@media (max-width: 480px) and (max-height: 600px) {
  .game-area {
    flex-direction: row;
    height: calc(100vh - 90px);
    min-height: 160px;
    overflow: hidden;
  }

  .control-panel {
    width: 50vw;
    max-width: 50%;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
  }

  .game-canvas {
    width: 50vw;
    max-width: 50%;
    height: 100%;
    box-sizing: border-box;
  }
}

/* Tablet Portrait (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
  .control-panel {
    scale: 0.9;
    gap: 12px;
    padding: 12px 16px;
  }

  .bet-section {
    max-width: 400px;
    padding: 14px;
  }

  .main-action-button {
    height: 110px;
    font-size: 14px;
  }

  .bet-btn {
    width: 130px;
  }
}

/* Tablet Landscape (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
  .control-panel {
    scale: 0.85;
    gap: 14px;
    padding: 14px 18px;
  }

  .bet-section {
    max-width: 280px;
    padding: 16px;
  }
}

/* Large Mobile Landscape (481px - 768px) - 50/50 Split */
@media (min-width: 481px) and (max-width: 768px) and (orientation: landscape) {
  .game-area {
    height: calc(100vh - 110px); /* Account for header + history */
    min-height: 220px;
    overflow: hidden;
  }

  .control-panel {
    width: 50vw;
    max-width: 50%;
    padding: min(1.2vh, 8px) min(1.2vw, 10px);
    gap: min(1vh, 6px);
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
  }

  .bet-section {
    padding: min(1.2vh, 8px);
    gap: min(0.8vh, 6px);
    height: auto;
    box-sizing: border-box;
  }

  .bet-controls {
    flex-wrap: nowrap;
    gap: min(0.6vw, 5px);
    align-items: flex-end;
    height: auto;
  }

  .bet-amount-container {
    flex: 1;
    min-width: 0;
    max-width: calc(100% - min(18vw, 95px));
  }

  .bet-amount-display {
    padding: 2px;
    min-height: max(7vh, 40px);
  }

  .bet-adjust-btn {
    width: max(3.5vh, 20px);
    height: max(3.5vh, 20px);
    margin: min(0.8vh, 5px);
    font-size: max(1.8vh, 11px);
    padding: min(1.2vh, 7px);
  }

  .bet-btn {
    width: min(16vw, 90px);
    height: max(13vh, 70px);
    flex-shrink: 0;
  }

  .main-action-button {
    height: 100%;
    font-size: max(1.8vh, 10px);
    line-height: 1.2;
  }

  .button-label {
    font-size: max(1.6vh, 14px);
    letter-spacing: 2px;
  }

  .button-amount {
    font-size: max(1.7vh, 15px);
  }

  .preset-btn {
    font-size: max(1.3vh, 8px);
    padding: min(0.6vh, 4px) min(0.3vw, 2px);
    min-height: max(4.5vh, 25px);
  }

  .bet-amount-input {
    font-size: max(2vh, 11px);
    padding: min(0.8vh, 5px) min(0.5vw, 3px);
    min-width: min(9vw, 40px);
    min-height: max(5vh, 30px);
  }

  .game-canvas {
    width: 50vw;
    max-width: 50%;
    height: 100%;
    box-sizing: border-box;
  }

  /* Mobile multiplier display font sizes */
  .multiplier-display {
    font-size: 2.5rem !important;
  }

  .multiplier-display span {
    font-size: 3.5rem !important;
  }
}

/* Mobile responsive styles for new modals */
@media (max-width: 768px) {
  .free-bets-content,
  .change-room-content {
    width: 95%;
    margin: 20px;
    max-height: 85vh;
  }

  .free-bets-body,
  .change-room-body {
    padding: 20px;
  }

  .room-selection {
    flex-direction: column;
    gap: 10px;
  }

  .room-option {
    max-width: none;
  }

  .change-btn {
    width: 100%;
    padding: 15px;
  }
}

@media (max-width: 480px) {
  .free-bets-header,
  .change-room-header {
    padding: 15px;
  }

  .free-bets-header h3,
  .change-room-header h3 {
    font-size: 18px;
  }

  .free-bets-body,
  .change-room-body {
    padding: 15px;
  }

  .warning-message p {
    font-size: 14px;
  }

  .radio-option,
  .room-option {
    padding: 12px;
  }

  .radio-option label,
  .room-option label {
    font-size: 14px;
  }
}

.play-with-cash-section {
  margin-bottom: 30px;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.radio-option.selected {
  border-color: #fd055c;
  /* background: rgba(0, 191, 255, 0.1); */
}

.radio-option input[type="radio"] {
}

.radio-option label {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  margin: 0;
}

/* Auto-cashout section for Free Bets modal - uses same styles as main game */
.play-with-cash-section .auto-cashout-section {
  margin-top: 10px;
  font-size: 12px;
}

.play-with-cash-section .auto-cashout-section.show {
  display: flex;
}

.play-with-cash-section .auto-cashout-section.enabled {
  background: rgba(0, 255, 0, 0.1);
  border-color: rgba(0, 255, 0, 0.3);
}

/* Mobile Bet History Modal */
.mobile-bet-history-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0a0a1a;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-bet-history-modal.visible {
  opacity: 1;
}

.mobile-bet-history-content {
  background: #0a0a1a;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Status bar */
.mobile-bet-history-status-bar {
  height: 4px;
  background: #fd055c;
  flex-shrink: 0;
}

.mobile-bet-history-header {
  background: #0a0a1a;
  padding: 12px 16px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-bet-history-header .close-btn {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.3s ease;
}

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

/* Title section */
.mobile-bet-history-title {
  background: #0a0a1a;
  padding: 8px 16px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-bet-history-title h3 {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  margin: 0;
}

.mobile-bet-history-body {
  flex: 1;
  padding: 12px 16px;
  color: #fff;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Main Tabs */
.main-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 0;
  align-items: center;
  flex: 1;
}

.tab-btn {
  flex: 1;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 8px 12px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
  transition: all 0.3s ease;
  text-align: center;
}

.tab-btn.active {
  background: #fd055c;
  color: #000;
  border-color: #fd055c;
}

/* Win Filters */
.win-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 0;
  display: flex;
  justify-content: space-around;
  border-radius: 4px;
  padding: 4px;
}

.filter-btn-border {
  border: 1px solid #fd055c;
}

.filter-btn {
  background: transparent;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.filter-btn.active {
  border-color: #fd055c;
  color: #fd055c;
  background: transparent;
}

/* Date Filters */
.date-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 0;
  display: flex;
  justify-content: space-around;
  border-radius: 4px;
  padding: 6px;
  background: #1e2240;
}

.date-filters .filter-btn.active {
  background: #343b6a;
  color: #000;
  border-color: #343b6a;
}

/* Bet Records Container */
.bet-records-container {
  flex: 1;
  overflow-y: auto;
  margin-top: 8px;
}

.bet-records-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Bet Record Card */
.bet-record-card {
  background: #0e0e7d;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  gap: 16px;
  transition: all 0.3s ease;
}

.bet-record-card:hover {
  background: #1e1e3a;
  border-color: rgba(0, 191, 255, 0.15);
}

.record-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  width: 60px;
}

/* .user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: #2ecc71;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
} */

/* .user-avatar img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: brightness(0) invert(1);
} */

.username {
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
}

.record-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bet-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bet-amount {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.bet-amount-label {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}

.bet-amount-value {
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}

.cashout-info {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.cashout-label {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}

.cashout-multiplier {
  background: #fd055c;
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
}

.win-info {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  position: relative;
}

.win-label {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}

.win-amount {
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}

.target-icon {
  width: 16px;
  height: 16px;
  background: #fd055c;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  margin-left: 8px;
}

.target-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: #000;
  border-radius: 50%;
}

.record-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: 8px;
}

.record-date {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}

.round-info {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  margin-left: 16px;
}

.record-actions {
  display: flex;
  gap: 12px;
}

.action-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.3s ease;
  font-size: 14px;
}

.action-icon:hover {
  opacity: 0.7;
}

.check-icon {
  color: #00ff7f;
  font-weight: bold;
  background: rgba(0, 255, 127, 0.1);
  border-radius: 50%;
  width: 24px;
  height: 24px;
}

.chat-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#chatList {
  flex: 1;
  overflow: auto;
}

.chat-row {
  position: relative;
  display: flex;
  width: 100%;
  font-family: 'Rubik';
  gap: 4px;
  font-size: 12px;
  margin: 10px 0;
}

.chat-row .time {
  color: #5E5D5D;
}
.chat-row .user {
  color: #0752DE;
}

.chat-input {
  color: white;
  background: transparent;
  border: solid 1px #353535;
  border-radius: 5px;
  width: 100%;
  height: 30px;
  padding: 5px;
}

#playerList table {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}
#playerList table td {
  padding: 5px 0;
}

#playerList table tr.winner {
  color: #34C759;
  background-color: #181948;
}

#playerList table tr.winner td {
  border-top: solid 1px #353535;
  border-bottom: solid 1px #353535;
}

#playerList table tr.winner td:first-child {
  border-left: solid 1px #353535;
}

#playerList table tr.winner td:last-child {
  border-right: solid 1px #353535;
}

#exitButton {
  width: 30px;
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}

/* Mobile responsive adjustments */
@media (max-width: 480px) {
  .mobile-bet-history-header {
    padding: 8px 12px 6px;
  }

  .mobile-bet-history-title {
    padding: 6px 12px;
  }

  .mobile-bet-history-title h3 {
    font-size: 14px;
  }

  .mobile-bet-history-body {
    padding: 8px 12px;
    gap: 8px;
  }

  .main-tabs {
    gap: 4px;
  }

  .tab-btn {
    padding: 6px 8px;
    font-size: 11px;
  }

  .win-filters,
  .date-filters {
    gap: 4px;
  }

  .filter-btn {
    padding: 4px 6px;
    font-size: 9px;
  }

  .bet-record-card {
    padding: 12px;
    gap: 12px;
  }

  .record-left {
    width: 50px;
  }

  .user-avatar {
    width: 36px;
    height: 36px;
  }

  .user-avatar img {
    width: 20px;
    height: 20px;
  }

  .username {
    font-size: 12px;
  }

  .bet-amount-label,
  .cashout-label,
  .win-label {
    font-size: 10px;
  }

  .bet-amount-value,
  .win-amount {
    font-size: 12px;
  }

  .cashout-multiplier {
    font-size: 10px;
    padding: 3px 6px;
  }

  .record-date,
  .round-info {
    font-size: 10px;
  }

  .target-icon {
    width: 14px;
    height: 14px;
    margin-left: 6px;
  }

  .target-icon::before {
    width: 6px;
    height: 6px;
  }

  .action-icon {
    width: 16px;
    height: 16px;
    font-size: 11px;
  }

  .check-icon {
    width: 20px;
    height: 20px;
  }
}

/* Additional Responsive Enhancements */

/* Global Responsive Font Scaling */
@media screen and (max-width: 1200px) {
  html {
    font-size: 95%;
  }
}

@media screen and (max-width: 992px) {
  html {
    font-size: 90%;
  }
}

@media screen and (max-width: 768px) {
  html {
    font-size: 85%;
  }
}

/* Header Responsive Fixes */
@media screen and (max-width: 480px) {
  .header {
    padding: 8px 12px;
    height: 50px;
  }

  .balance {
    font-size: 12px;
    padding: 4px 8px;
  }

  .user-info {
    gap: 8px;
  }
}

/* Game Area Responsive Height */
@media screen and (max-height: 600px) {
  .game-canvas {
    min-height: 250px;
  }

  .multiplier-display {
    font-size: 2rem;
  }

  .game-logo {
    min-width: 100px;
    padding-top: calc(49 / 87 * 25%);
  }
}

/* Control Panel Height Adjustments */
@media screen and (max-height: 700px) and (orientation: landscape) {
  .control-panel {
    min-height: 100px;
    padding: 8px 12px;
  }

  .bet-section {
    padding: 8px;
  }

  .bet-presets {
    gap: 2px;
  }
}

/* Toast Responsive Positioning */
@media screen and (max-width: 768px) {
  .toast {
    width: 90%;
    min-width: auto;
    font-size: 14px;
    padding: 12px 20px;
  }
}

/* Modal Responsive Improvements */
@media screen and (max-width: 480px) {
  .game-rules-content,
  .free-bets-content,
  .change-room-content,
  .avatar-content {
    width: 100%;
    height: 100%;
    border-radius: 0;
    margin: 0;
  }

  .game-rules-header,
  .free-bets-header,
  .change-room-header,
  .avatar-header {
    padding: 12px 16px;
  }

  .game-rules-body,
  .free-bets-body,
  .change-room-body,
  .avatar-grid {
    padding: 16px;
  }
}

/* Settings Sidebar Responsive */
@media screen and (max-width: 480px) {
  .settings-sidebar {
    width: 100%;
    left: -100%;
  }

  .settings-content {
    padding: 16px;
  }

  .setting-item {
    padding: 12px 0;
  }
}

/* History Trail Responsive */
@media screen and (max-width: 768px) {
  .history-trail-ingame {
    top: 4px;
    left: 4px;
    right: 4px;
    padding: 6px 10px;
  }

  .history-item {
    font-size: 10px;
    min-width: 50px;
  }

  .history-expand-btn {
    font-size: 10px;
    min-width: 60px;
  }
}

/* Game Status Responsive */
@media screen and (max-width: 768px) {
  .game-status {
    top: 10px;
    font-size: 11px;
    padding: 6px 12px;
  }
}

/* Countdown Container Responsive */
@media screen and (max-width: 480px) {
  .countdown-container {
    width: 80%;
    max-width: 250px;
  }

  .countdown-text {
    font-size: 12px;
  }
}

/* Bet History Mobile Specific */
@media screen and (max-width: 360px) {
  .bet-record-card {
    padding: 8px;
    gap: 8px;
  }

  .record-left {
    width: 40px;
  }

  .user-avatar {
    width: 32px;
    height: 32px;
  }

  .bet-info {
    gap: 4px;
  }

  .record-bottom {
    padding-top: 8px;
    margin-top: 6px;
  }
}

/* Additional Touch Device Optimizations */
@media (hover: none) {
  .bet-adjust-btn,
  .preset-btn,
  .main-action-button {
    -webkit-tap-highlight-color: transparent;
  }

  .main-action-button:active {
    transform: scale(0.98);
  }
}

/* Prevent Text Selection on Interactive Elements */
@media (max-width: 768px) {
  .button-label,
  .preset-btn,
  .bet-amount-input,
  .filter-btn,
  .tab-btn {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
}

/* Fix for iOS Input Zoom */
@media screen and (max-width: 768px) {
  input[type="text"],
  input[type="number"] {
    font-size: 16px !important;
  }
}

/* Fix for Notch Devices */
@supports (padding-top: env(safe-area-inset-top)) {
  .header {
    padding-top: calc(env(safe-area-inset-top) + 12px);
    height: calc(60px + env(safe-area-inset-top));
  }

  .mobile-bet-history-modal {
    padding-top: env(safe-area-inset-top);
  }
}