/* ══════════════════════════════════════════════════════════════
   NEXUS — Game Interface Styles v4.0
   Premium fintech-grade game UIs
   Crash · Mines · Dice · Roulette · Tower · Keno · Wheel
   HiLo · Scratch · Baccarat · Blackjack · Slots · Plinko · Limbo
   ══════════════════════════════════════════════════════════════ */

/* ── Shared Game Layout ─────────────────────────────────────── */
.game-display {
   display: flex;
   flex-direction: column;
   gap: var(--space-lg);
}

.bet-controls {
   display: flex;
   flex-direction: column;
   gap: var(--space-md);
}

.bet-row {
   display: flex;
   flex-direction: column;
   gap: 6px;
}

.bet-label {
   font-size: 11px;
   font-weight: 700;
   color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.4px;
}

.bet-input-group {
   display: flex;
   gap: 6px;
   align-items: center;
}

.bet-input {
   flex: 1;
   padding: 12px 14px;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-xs);
   color: var(--text);
   font-family: var(--font-mono);
   font-size: 15px;
   font-weight: 600;
   -webkit-appearance: none;
   text-align: center;
   transition: all var(--duration) var(--ease);
}

.bet-input:focus {
   border-color: var(--primary);
   box-shadow: 0 0 0 3px var(--primary-dim);
}

.bet-btn {
   padding: 10px 14px;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-xs);
   color: var(--text-secondary);
   font-family: var(--font-mono);
   font-size: 13px;
   font-weight: 700;
   cursor: pointer;
   transition: all var(--duration) var(--ease);
}

.bet-btn:active {
   background: var(--primary-dim);
   border-color: var(--primary);
   color: var(--primary);
   transform: scale(0.9);
}

.multiplier {
   font-family: var(--font-mono);
   font-weight: 700;
   color: var(--accent);
}

.label {
   font-size: 10px;
   color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.5px;
}

/* ── CRASH ───────────────────────────────────────────────────── */
.crash-game {
   position: relative;
}

.crash-canvas-wrap {
   position: relative;
   width: 100%;
   height: 210px;
   background: rgba(8, 8, 20, 0.9);
   border-radius: var(--radius-lg);
   overflow: hidden;
   border: 1px solid var(--border);
   box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.4);
}

.crash-canvas {
   width: 100%;
   height: 100%;
   display: block;
}

.crash-multiplier-overlay {
   position: absolute;
   inset: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   pointer-events: none;
}

.crash-mult-text {
   font-family: var(--font-display);
   font-size: 38px;
   font-weight: 700;
   color: var(--accent);
   text-shadow: 0 0 40px rgba(0, 229, 255, 0.4);
   transition: color 0.3s, text-shadow 0.3s;
}

.crash-mult-text.crashed {
   color: var(--danger);
   text-shadow: 0 0 40px rgba(255, 56, 96, 0.5);
}

.crash-mult-text.cashed {
   color: var(--success);
   text-shadow: 0 0 40px rgba(0, 220, 130, 0.5);
}

.crash-status-label {
   font-size: 11px;
   color: var(--text-muted);
   margin-top: 4px;
   text-transform: uppercase;
   letter-spacing: 1px;
}

.crash-history {
   display: flex;
   gap: 5px;
   overflow-x: auto;
   padding: 2px 0;
}

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

.crash-history .pill,
.crash-history .chip {
   padding: 5px 10px;
   border-radius: 6px;
   font-family: var(--font-mono);
   font-size: 11px;
   font-weight: 700;
   white-space: nowrap;
   animation: fadeIn 0.3s var(--ease);
}

.crash-canvas-wrap.shake {
   animation: shakeX 0.4s ease;
}

/* ── MINES ───────────────────────────────────────────────────── */
.mines-game {
   position: relative;
}

.mines-info-bar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 12px 16px;
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
}

.mines-multiplier-display,
.mines-next-display {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 2px;
}

.mines-mult-value {
   font-size: 20px;
}

.mines-next-value {
   font-size: 14px;
   color: var(--text-secondary);
   font-family: var(--font-mono);
   font-weight: 600;
}

.mines-grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 6px;
   padding: 12px;
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius);
}

.mine-tile {
   aspect-ratio: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
   cursor: pointer;
   transition: all 150ms var(--ease);
}

.mine-tile:active:not(.revealed) {
   transform: scale(0.88);
   border-color: var(--primary);
   box-shadow: var(--shadow-glow-primary);
}

.mine-tile.revealed.safe {
   background: rgba(0, 220, 130, 0.08);
   border-color: rgba(0, 220, 130, 0.3);
   animation: tileReveal 0.35s var(--ease-spring);
}

.mine-tile.revealed.bomb {
   background: rgba(255, 56, 96, 0.08);
   border-color: rgba(255, 56, 96, 0.3);
   animation: tileReveal 0.35s var(--ease-spring);
}

.mine-tile.loading {
   animation: tilePulse 0.6s ease infinite;
}

.mines-action-btn {
   width: 100%;
}

/* ── DICE ────────────────────────────────────────────────────── */
.dice-game {
   position: relative;
}

.dice-result-display {
   text-align: center;
   padding: 28px;
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.3);
}

.dice-result-number {
   font-family: var(--font-display);
   font-size: 52px;
   font-weight: 700;
   color: var(--text);
   transition: all 0.3s var(--ease);
   text-shadow: 0 0 20px rgba(0, 229, 255, 0.15);
}

.dice-result-number.win {
   color: var(--success);
   text-shadow: 0 0 30px rgba(0, 220, 130, 0.4);
}

.dice-result-number.lose {
   color: var(--danger);
   text-shadow: 0 0 30px rgba(255, 56, 96, 0.4);
}

.dice-slider-wrap {
   position: relative;
   padding: 20px 0;
}

.dice-slider-bar {
   position: relative;
   height: 8px;
   background: var(--surface);
   border-radius: 4px;
   overflow: hidden;
}

.dice-win-zone {
   position: absolute;
   top: 0;
   height: 100%;
   background: rgba(0, 220, 130, 0.2);
   border-radius: 4px;
   transition: all 0.15s;
}

.dice-lose-zone {
   position: absolute;
   top: 0;
   height: 100%;
   background: rgba(255, 56, 96, 0.12);
   border-radius: 4px;
   transition: all 0.15s;
}

.dice-slider {
   position: absolute;
   top: 14px;
   left: 0;
   width: 100%;
   -webkit-appearance: none;
   appearance: none;
   background: transparent;
   cursor: pointer;
   z-index: 2;
}

.dice-slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   width: 24px;
   height: 24px;
   border-radius: 50%;
   background: var(--accent);
   border: 3px solid var(--bg);
   box-shadow: 0 0 12px rgba(0, 229, 255, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
   cursor: pointer;
   transition: transform 0.15s;
}

.dice-slider::-webkit-slider-thumb:active {
   transform: scale(1.2);
}

.dice-slider-labels {
   display: flex;
   justify-content: space-between;
   margin-top: 8px;
   font-size: 10px;
   color: var(--text-muted);
   font-family: var(--font-mono);
}

.dice-target-label {
   color: var(--accent);
   font-weight: 700;
}

.dice-info-row {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 8px;
}

.dice-info-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 4px;
   padding: 12px 8px;
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
}

.dice-direction-toggle {
   display: flex;
   gap: 4px;
}

.dice-dir-btn {
   padding: 6px 12px;
   border-radius: 6px;
   font-size: 11px;
   font-weight: 700;
   background: var(--surface);
   border: 1px solid var(--border);
   color: var(--text-muted);
   cursor: pointer;
   transition: all var(--duration) var(--ease);
}

.dice-dir-btn.active {
   background: var(--accent-dim);
   border-color: var(--accent);
   color: var(--accent);
}

.dice-chance-value {
   font-family: var(--font-mono);
   font-size: 14px;
   font-weight: 700;
   color: var(--text);
}

.dice-mult-value {
   font-size: 14px;
}

/* ── ROULETTE ────────────────────────────────────────────────── */
.roulette-game {
   position: relative;
}

.roulette-result {
   text-align: center;
   padding: 20px;
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   margin-bottom: 10px;
}

.roulette-result-number {
   font-family: var(--font-display);
   font-size: 44px;
   font-weight: 700;
}

.roulette-result-number.red {
   color: #f43f5e;
   text-shadow: 0 0 20px rgba(244, 63, 94, 0.4);
}

.roulette-result-number.black {
   color: #fff;
}

.roulette-result-number.green {
   color: var(--success);
   text-shadow: 0 0 20px rgba(0, 220, 130, 0.4);
}

.roulette-bets {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 8px;
}

.roulette-bet-btn {
   padding: 16px 8px;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
   text-align: center;
   cursor: pointer;
   transition: all var(--duration) var(--ease);
}

.roulette-bet-btn:active {
   transform: scale(0.94);
}

.roulette-bet-btn.selected {
   border-color: var(--accent);
   box-shadow: var(--shadow-glow-accent);
}

.roulette-bet-btn.red-bet.selected {
   background: rgba(244, 63, 94, 0.1);
   border-color: #f43f5e;
}

.roulette-bet-btn.green-bet.selected {
   background: var(--success-dim);
   border-color: var(--success);
}

.roulette-bet-btn.black-bet.selected {
   background: rgba(255, 255, 255, 0.04);
   border-color: #fff;
}

.roulette-bet-label {
   font-size: 12px;
   font-weight: 700;
   color: var(--text);
}

.roulette-bet-mult {
   font-size: 10px;
   color: var(--text-muted);
   font-family: var(--font-mono);
   margin-top: 2px;
}

/* ── TOWER ───────────────────────────────────────────────────── */
.tower-game {
   position: relative;
}

.tower-grid {
   display: flex;
   flex-direction: column-reverse;
   gap: 4px;
   padding: 12px;
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   max-height: 320px;
   overflow-y: auto;
}

.tower-floor {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 4px;
   position: relative;
}

.tower-floor.hard {
   grid-template-columns: repeat(4, 1fr);
}

.tower-tile {
   aspect-ratio: 2/1;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-xs);
   cursor: pointer;
   font-size: 16px;
   transition: all 150ms var(--ease);
}

.tower-tile:active:not(.revealed) {
   transform: scale(0.88);
}

.tower-tile.revealed.safe {
   background: rgba(0, 220, 130, 0.1);
   border-color: rgba(0, 220, 130, 0.3);
   animation: tileReveal 0.3s var(--ease-spring);
}

.tower-tile.revealed.trap {
   background: var(--danger-dim);
   border-color: rgba(255, 56, 96, 0.3);
   animation: tileReveal 0.3s var(--ease-spring);
}

.tower-tile.current-floor {
   border-color: var(--accent);
   box-shadow: var(--shadow-glow-accent);
}

.tower-info {
   display: flex;
   justify-content: space-between;
   padding: 12px 16px;
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
}

.tower-info-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 2px;
}

/* ── KENO ────────────────────────────────────────────────────── */
.keno-game {
   position: relative;
}

.keno-grid {
   display: grid;
   grid-template-columns: repeat(8, 1fr);
   gap: 4px;
   padding: 10px;
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius);
}

.keno-tile {
   aspect-ratio: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-xs);
   font-family: var(--font-mono);
   font-size: 12px;
   font-weight: 700;
   color: var(--text-secondary);
   cursor: pointer;
   transition: all 150ms var(--ease);
}

.keno-tile:active {
   transform: scale(0.88);
}

.keno-tile.selected {
   background: var(--primary-dim);
   border-color: var(--primary);
   color: var(--primary);
   box-shadow: 0 0 8px var(--primary-glow);
}

.keno-tile.hit {
   background: var(--success-dim);
   border-color: var(--success);
   color: var(--success);
   animation: tileReveal 0.3s var(--ease-spring);
}

.keno-tile.miss {
   background: var(--danger-dim);
   border-color: rgba(255, 56, 96, 0.15);
   color: var(--danger);
   opacity: 0.5;
}

.keno-info {
   display: flex;
   justify-content: space-between;
   padding: 12px;
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
   font-size: 12px;
}

.keno-picks {
   font-family: var(--font-mono);
   color: var(--accent);
   font-weight: 700;
}

/* ── WHEEL / FORTUNE ─────────────────────────────────────────── */
.wheel-game {
   position: relative;
}

.wheel-container {
   position: relative;
   width: 260px;
   height: 260px;
   margin: 0 auto;
}

.wheel-canvas {
   width: 100%;
   height: 100%;
   filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.2));
}

.wheel-pointer {
   position: absolute;
   top: -8px;
   left: 50%;
   transform: translateX(-50%);
   width: 0;
   height: 0;
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
   border-top: 20px solid var(--gold);
   filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
   z-index: 2;
}

.wheel-center {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 52px;
   height: 52px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--primary), var(--accent));
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 0 24px var(--primary-glow);
   font-family: var(--font-display);
   font-size: 10px;
   color: #fff;
   font-weight: 700;
   letter-spacing: 1px;
}

.wheel-result {
   text-align: center;
   margin-top: 14px;
   font-family: var(--font-display);
   font-size: 20px;
   color: var(--gold);
   min-height: 28px;
}

/* ── HI-LO ───────────────────────────────────────────────────── */
.hilo-game {
   position: relative;
}

.hilo-cards {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 16px;
   padding: 24px;
}

.hilo-card {
   width: 80px;
   height: 120px;
   background: var(--card);
   border: 2px solid var(--border);
   border-radius: var(--radius-sm);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: 28px;
   font-weight: 900;
   font-family: var(--font-mono);
   transition: all 0.4s var(--ease-spring);
   box-shadow: var(--shadow-md);
}

.hilo-card.face-down {
   background: linear-gradient(135deg, var(--primary), var(--accent));
   border-color: var(--primary);
}

.hilo-card.red {
   color: #f43f5e;
}

.hilo-card.black {
   color: #fff;
}

.hilo-card .card-suit {
   font-size: 16px;
   margin-top: 4px;
}

.hilo-buttons {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
}

.hilo-btn {
   padding: 16px;
   border-radius: var(--radius-sm);
   font-size: 14px;
   font-weight: 700;
   cursor: pointer;
   transition: all var(--duration) var(--ease);
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
}

.hilo-btn.higher {
   background: var(--success-dim);
   border: 1px solid rgba(0, 220, 130, 0.3);
   color: var(--success);
}

.hilo-btn.lower {
   background: var(--danger-dim);
   border: 1px solid rgba(255, 56, 96, 0.3);
   color: var(--danger);
}

.hilo-btn:active {
   transform: scale(0.94);
}

.hilo-streak {
   text-align: center;
   font-family: var(--font-mono);
   font-size: 14px;
   color: var(--accent);
   padding: 10px;
}

/* ── SCRATCH CARD ────────────────────────────────────────────── */
.scratch-game {
   position: relative;
}

.scratch-card-wrap {
   position: relative;
   width: 100%;
   max-width: 300px;
   margin: 0 auto;
   aspect-ratio: 1.6/1;
   border-radius: var(--radius-lg);
   overflow: hidden;
   border: 2px solid var(--border);
   box-shadow: var(--shadow-md);
}

.scratch-canvas {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   cursor: crosshair;
   z-index: 2;
}

.scratch-prize {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   gap: 8px;
   background: var(--card);
}

.scratch-prize-amount {
   font-family: var(--font-display);
   font-size: 32px;
   font-weight: 700;
   color: var(--gold);
   text-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

.scratch-prize-label {
   font-size: 12px;
   color: var(--text-muted);
}

/* ── BACCARAT ────────────────────────────────────────────────── */
.baccarat-game {
   position: relative;
}

.baccarat-table {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
   padding: 20px;
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
}

.baccarat-hand {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
}

.baccarat-hand-label {
   font-size: 11px;
   font-weight: 700;
   color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 1px;
}

.baccarat-hand-cards {
   display: flex;
   gap: 6px;
   min-height: 80px;
   align-items: center;
}

.baccarat-card {
   width: 50px;
   height: 74px;
   background: #fff;
   border-radius: 8px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: 16px;
   font-weight: 900;
   position: relative;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
   animation: cardDeal 0.3s var(--ease-spring);
}

.baccarat-card.red {
   color: #dc2626;
}

.baccarat-card.black {
   color: #1a1a2e;
}

.baccarat-card .card-suit {
   font-size: 12px;
}

.baccarat-score {
   font-family: var(--font-display);
   font-size: 24px;
   font-weight: 700;
   color: var(--accent);
   margin-top: 4px;
}

.baccarat-bets {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 8px;
}

.baccarat-bet-btn {
   padding: 16px 8px;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
   text-align: center;
   cursor: pointer;
   transition: all var(--duration) var(--ease);
}

.baccarat-bet-btn.selected {
   border-color: var(--accent);
   background: var(--accent-dim);
   box-shadow: var(--shadow-glow-accent);
}

.baccarat-bet-btn:active {
   transform: scale(0.94);
}

.baccarat-bet-name {
   font-size: 12px;
   font-weight: 700;
   color: var(--text);
}

.baccarat-bet-odds {
   font-size: 10px;
   color: var(--text-muted);
   font-family: var(--font-mono);
   margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════════
   GAME KEYFRAMES
   ══════════════════════════════════════════════════════════════ */
@keyframes tileReveal {
   from {
      transform: scale(0.7) rotateY(90deg);
      opacity: 0;
   }

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

@keyframes tilePulse {

   0%,
   100% {
      opacity: 1;
   }

   50% {
      opacity: 0.5;
   }
}

@keyframes shakeX {

   0%,
   100% {
      transform: translateX(0);
   }

   20% {
      transform: translateX(-6px);
   }

   40% {
      transform: translateX(6px);
   }

   60% {
      transform: translateX(-4px);
   }

   80% {
      transform: translateX(4px);
   }
}

@keyframes cardDeal {
   from {
      transform: translateY(-20px) scale(0.8) rotateZ(-5deg);
      opacity: 0;
   }

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