/* Triple Chance Timer Pro - World-Class Arcade Cabinet Theme */
:root {
  --bg-dark: #07090e;
  --bg-cabinet: #12070a;
  --curtain-red: #3b0a11;
  --gold-primary: #e6b800;
  --gold-light: #fff275;
  --gold-dark: #806000;
  --gold-border: #d4af37;
  --gold-gradient: linear-gradient(180deg, #fff799 0%, #ffd700 45%, #e6b800 70%, #997300 100%);
  --gold-frame-gradient: linear-gradient(135deg, #fff275 0%, #ffd700 25%, #b8860b 50%, #ffd700 75%, #664d00 100%);
  --gold-button-gradient: linear-gradient(180deg, #58b688 0%, #206d4e 100%);
  --cyan-tile: #18b5a6;
  --red-tile: #d9383a;
  --purple-tile: #7c4dff;
  --text-white: #ffffff;
  --font-arcade: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

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

body {
  background: radial-gradient(ellipse at 50% 25%, #5a0c1a 0%, #2a0309 50%, #0c0103 100%);
  color: var(--text-white);
  font-family: var(--font-arcade);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow-x: hidden;
  position: relative;
}

/* Velvet Stage Drapes Visual Accent */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.45) 0px,
    rgba(255, 255, 255, 0.03) 30px,
    rgba(0, 0, 0, 0.5) 60px
  );
  pointer-events: none;
  z-index: 1;
}

/* Master Cabinet Screen Wrapper */
.arcade-cabinet-screen {
  width: 100%;
  max-width: 1440px;
  background: #000;
  border: 4px solid #ffd700;
  border-radius: 12px;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.95), 0 0 20px rgba(255, 215, 0, 0.35), inset 0 0 25px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
  margin: 10px auto;
}

/* Top System Header Bar */
.arcade-header {
  background: linear-gradient(180deg, #1e2638 0%, #0d121c 100%);
  border-bottom: 2px solid #486581;
  padding: 6px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
}

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

.btn-lobby {
  background: linear-gradient(180deg, #243b53 0%, #102a43 100%);
  border: 1px solid #486581;
  color: #d9e2ec;
  font-weight: 800;
  font-size: 0.75rem;
  padding: 5px 12px;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
  transition: all 0.15s ease;
}

.btn-lobby:hover {
  filter: brightness(1.2);
  border-color: #ffd700;
}

.game-tab-badge {
  background: linear-gradient(180deg, #193859 0%, #0b1f33 100%);
  border: 1px solid #334e68;
  color: #fff;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.2);
}

.game-tab-badge .btn-close-tab {
  color: #f03e3e;
  font-weight: 900;
  cursor: pointer;
}

.game-id-badge {
  color: #51cf66;
  font-size: 0.8rem;
  font-weight: 900;
  font-family: monospace;
  text-shadow: 0 0 6px rgba(81, 207, 102, 0.6);
}

.header-center-group {
  display: flex;
  align-items: center;
  gap: 16px;
}

.amusement-only {
  color: #829ab1;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.8px;
}

.user-welcome {
  background: #102a43;
  border: 1px solid #334e68;
  color: #f0f4f8;
  padding: 4px 14px;
  border-radius: 4px;
  font-weight: 800;
  font-size: 0.8rem;
}

.header-right-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.point-balance-box {
  background: #102a43;
  border: 1px solid #334e68;
  border-radius: 4px;
  padding: 2px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.point-balance-box .label {
  color: #bcccdc;
  font-size: 0.8rem;
  font-weight: 700;
}

.point-balance-box .balance-gold-pill {
  background: var(--gold-gradient);
  color: #000;
  font-weight: 900;
  padding: 3px 12px;
  border-radius: 3px;
  font-size: 0.95rem;
  min-width: 100px;
  text-align: right;
  box-shadow: 0 2px 4px rgba(0,0,0,0.6), inset 0 1px 1px #fff;
}

.btn-header-action {
  background: #102a43;
  border: 1px solid #334e68;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.8rem;
}

.btn-header-action.exit {
  background: #e03131;
  border-color: #c92a2a;
}

/* Main Playing Canvas Area */
.playfield-container {
  background: radial-gradient(ellipse at 50% 35%, #590916 0%, #260207 65%, #0e0103 100%);
  padding: 10px 14px;
  display: grid;
  grid-template-columns: 1fr 390px 1fr;
  gap: 12px;
  position: relative;
}

@media (max-width: 1100px) {
  .playfield-container {
    grid-template-columns: 1fr;
  }
}

/* Cabinet Section Cards with 3D Rounded Golden Bevel */
.cabinet-card {
  background: rgba(10, 2, 4, 0.9);
  border: 3px solid #ffd700;
  border-radius: 18px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.9), 0 0 10px rgba(255, 215, 0, 0.3), inset 0 0 12px rgba(184, 134, 11, 0.4);
  padding: 8px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.gold-title-header {
  background: var(--gold-gradient);
  color: #000;
  font-size: 0.95rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
  padding: 4px 12px;
  border-radius: 10px;
  margin-bottom: 6px;
  box-shadow: inset 0 2px 2px #fff, 0 2px 6px rgba(0,0,0,0.9);
  border: 1px solid #664d00;
}

/* ========================================================= */
/* DOUBLES & TRIPLES 10x10 GRIDS                             */
/* ========================================================= */
.doubles-matrix {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
  background: #050102;
  padding: 4px;
  border-radius: 8px;
  border: 1.5px solid #664d00;
}

.matrix-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.08s ease, filter 0.08s ease;
  border: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0,0,0,0.7);
}

.matrix-cell:hover {
  filter: brightness(1.25);
  transform: scale(1.06);
  z-index: 5;
}

.matrix-cell .cell-val {
  font-size: 0.75rem;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 1px 1px 2px #000;
  line-height: 1;
}

.matrix-cell.tile-cyan {
  background: linear-gradient(180deg, #20c997 0%, #0ca678 100%);
}

.matrix-cell.tile-red {
  background: linear-gradient(180deg, #ff6b6b 0%, #e03131 100%);
}

.matrix-cell.tile-purple {
  background: linear-gradient(180deg, #b197fc 0%, #7950f2 100%);
}

/* Gold Dome Bet Badge */
.chip-dome-badge {
  width: 15px;
  height: 9px;
  background: radial-gradient(ellipse at 50% 20%, #fff799, #ffd700 60%, #806000 100%);
  border-radius: 8px 8px 0 0;
  border: 1px solid #ffe066;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  font-weight: 900;
  color: #000;
  margin-top: 1px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Green Starburst Winning Badge Overlay */
.starburst-win-badge {
  background: radial-gradient(circle, #51cf66 0%, #2f9e44 60%, #1f5e2b 100%) !important;
  border: 2px solid #ffd700 !important;
  box-shadow: 0 0 18px #51cf66, inset 0 0 5px #fff !important;
  animation: pulseStarburst 0.5s infinite alternate !important;
  z-index: 10;
}

.starburst-win-badge .cell-val,
.starburst-win-badge .num {
  color: #fff !important;
  font-size: 0.95rem !important;
  font-weight: 900 !important;
  text-shadow: 0 0 4px #000 !important;
}

@keyframes pulseStarburst {
  from { transform: scale(1); filter: brightness(1); }
  to { transform: scale(1.15); filter: brightness(1.35); }
}

/* Random Pick & Quick Chip Strip below grids */
.matrix-bottom-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-top: 6px;
}

.btn-random-pick {
  background: linear-gradient(180deg, #ffd43b 0%, #f59f00 100%);
  color: #000;
  font-weight: 900;
  font-size: 0.65rem;
  border: 1px solid #d9480f;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5), inset 0 1px 1px #fff;
}

.quick-pink-tokens {
  display: flex;
  gap: 3px;
  align-items: center;
}

.pink-token {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff8787, #e03131 70%, #9b111e 100%);
  border: 1.5px dashed #fff;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), inset 0 1px 1px rgba(255,255,255,0.6);
  transition: transform 0.1s ease;
}

.pink-token:hover {
  transform: scale(1.12);
}

/* ========================================================= */
/* CENTER COLUMN: ORNATE WHEEL + SINGLES + CHIPS             */
/* ========================================================= */
.center-wheel-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.seconds-left-banner {
  text-align: center;
  margin-bottom: 2px;
}

.seconds-left-banner .title {
  font-family: 'Brush Script MT', cursive, sans-serif;
  font-size: 1.4rem;
  color: #ff8787;
  text-shadow: 0 0 8px rgba(255, 107, 107, 0.8);
}

.seconds-left-banner .countdown-num {
  font-family: 'Courier New', Courier, monospace;
  font-size: 2.4rem;
  font-weight: 900;
  color: #ff3838;
  text-shadow: 0 0 15px #ff0000, 0 0 30px #ff0000;
  line-height: 1;
}

/* Concentric Wheel Outer Baroque Gold Frame */
.wheel-gold-frame {
  position: relative;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, #38070e 50%, #150205 70%);
  border: 8px double #ffd700;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.95), 0 0 15px rgba(255, 215, 0, 0.5), inset 0 0 20px rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

#wheelCanvas {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
}

/* Singles Bar (Directly below wheel) */
.singles-cabinet-box {
  width: 100%;
  background: rgba(10, 2, 4, 0.9);
  border: 2px solid #ffd700;
  border-radius: 8px;
  padding: 4px;
  margin-top: 4px;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.8);
}

.singles-green-badge {
  background: linear-gradient(180deg, #2b8a3e 0%, #1b4d24 100%);
  color: #ffd700;
  font-weight: 900;
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  text-align: center;
  padding: 2px 10px;
  border-radius: 4px;
  border: 1px solid #ffd700;
  width: 100px;
  margin: 0 auto 4px auto;
  box-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.singles-tiles-row {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 3px;
}

.single-tile-btn {
  background: linear-gradient(180deg, #e03131 0%, #991b1b 100%);
  border: 1px solid #ffd700;
  border-radius: 4px;
  aspect-ratio: 1 / 1.1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  box-shadow: inset 0 1px 1px #ffc9c9, 0 2px 4px rgba(0,0,0,0.7);
}

.single-tile-btn .num {
  font-size: 1.05rem;
  font-weight: 900;
  color: #fff;
}

.single-tile-btn .bet-amt-box {
  font-size: 0.55rem;
  font-weight: 800;
  color: #ffe066;
  line-height: 1;
}

/* Chip Tray (2, 5, 10, 20, 50, 100, 500, 1000) */
.chip-tray-cabinet {
  background: linear-gradient(180deg, #1f2738 0%, #0d121c 100%);
  border: 2px solid #ffd700;
  border-radius: 20px;
  padding: 4px 10px;
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  width: 100%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.8), inset 0 1px 1px rgba(255,255,255,0.2);
}

.casino-chip {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 900;
  color: #000;
  cursor: pointer;
  border: 2px dashed #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), inset 0 1px 2px rgba(255, 255, 255, 0.7);
  transition: transform 0.15s ease;
}

.casino-chip:hover {
  transform: translateY(-3px) scale(1.1);
}

.casino-chip.selected {
  transform: translateY(-5px) scale(1.2);
  box-shadow: 0 0 12px #ffd700, 0 4px 8px rgba(0,0,0,0.8);
  border-color: #ffd700;
}

.c-1 { background: radial-gradient(circle, #74c0fc, #1971c2); color: #fff; }
.c-2 { background: radial-gradient(circle, #63e6be, #0ca678); color: #fff; }
.c-5 { background: radial-gradient(circle, #ff8787, #c92a2a); color: #fff; }
.c-10 { background: radial-gradient(circle, #ffd43b, #f08c00); color: #000; }
.c-20 { background: radial-gradient(circle, #da77f2, #862e9c); color: #fff; }
.c-50 { background: radial-gradient(circle, #a9e34b, #5c940d); color: #000; }
.c-100 { background: radial-gradient(circle, #ffa94d, #d9480f); color: #fff; }
.c-500 { background: radial-gradient(circle, #20c997, #087f5b); color: #fff; }
.c-1000 { background: radial-gradient(circle, #ffd700, #b8860b); color: #000; border-color: #fff; }

.amusement-footer-text {
  font-size: 0.65rem;
  color: #868e96;
  text-align: center;
  margin-top: 2px;
  font-weight: 700;
}

/* ========================================================= */
/* TRIPLES RANGE TABS                                        */
/* ========================================================= */
.triples-tab-bar {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}

.triples-tab-btn {
  background: #1e2638;
  border: 1px solid #486581;
  color: #69db7c;
  font-size: 0.6rem;
  font-weight: 900;
  padding: 3px 0;
  border-radius: 3px;
  cursor: pointer;
  text-align: center;
}

.triples-tab-btn.active {
  background: linear-gradient(180deg, #51cf66 0%, #2b8a3e 100%);
  color: #fff;
  border-color: #ffd700;
  box-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* ========================================================= */
/* BOTTOM SCORECARD, PLAY/WIN BOXES & 4 ACTION BUTTONS       */
/* ========================================================= */
.bottom-dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 390px 1fr;
  gap: 12px;
  background: #0e0205;
  border-top: 3px solid #ffd700;
  padding: 8px 14px;
  align-items: center;
}

@media (max-width: 1100px) {
  .bottom-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

.history-scorecard {
  background: #110306;
  border: 2px solid #ffd700;
  border-radius: 8px;
  padding: 4px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.scorecard-row {
  display: flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 800;
}

.scorecard-row .row-label {
  width: 54px;
  color: #ffd700;
  text-transform: uppercase;
}

.scorecard-values {
  display: flex;
  gap: 10px;
  flex: 1;
  overflow-x: hidden;
}

.scorecard-val {
  font-family: monospace;
  font-size: 0.85rem;
  color: #ffffff;
}

/* Play & Win Total Boxes matching Screenshot */
.play-win-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 4px;
}

.play-box {
  background: #000;
  border: 2px solid #ffd700;
  border-radius: 4px;
  padding: 4px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  font-weight: 900;
  color: #ffd700;
}

.win-box {
  background: #000;
  border: 2px solid #51cf66;
  border-radius: 4px;
  padding: 4px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  font-weight: 900;
  color: #51cf66;
  text-shadow: 0 0 8px #51cf66;
}

/* 4 Big Arcade Action Buttons */
.arcade-action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.btn-arcade {
  background: linear-gradient(180deg, #1098ad 0%, #0c6370 100%);
  border: 2px solid #ffd700;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 10px 0;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8), inset 0 2px 2px rgba(255, 255, 255, 0.4);
  transition: all 0.1s ease;
}

.btn-arcade:hover {
  filter: brightness(1.2);
  transform: translateY(-2px);
}

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

/* Modal for Game Info */
.info-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.info-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.info-card {
  background: #140407;
  border: 3px solid #ffd700;
  border-radius: 12px;
  padding: 24px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
}