/* ============================================================
   Alpine Festival Square — Games CSS
   ============================================================ */

.game-page { min-height: 100vh; padding-top: 68px; background: var(--bg-page); }
.game-page-header { background: linear-gradient(135deg,var(--green-800),var(--green-700)); padding: var(--space-8) 0; }
.game-page-header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.game-page-title { display: flex; align-items: center; gap: var(--space-3); }
.game-page-title h1 { font-size: 1.75rem; color: #fff; }
.game-page-title .game-emoji { font-size: 2rem; }
.balance-display { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-full); }
.balance-icon { font-size: 1.25rem; }
.balance-info { display: flex; flex-direction: column; line-height: 1.2; }
.balance-label { font-size: .65rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.balance-amount { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--gold-300); }
.game-arena { max-width: 900px; margin: 0 auto; padding: var(--space-8) var(--space-6); }
.back-to-games { display: inline-flex; align-items: center; gap: var(--space-2); color: rgba(255,255,255,.7); font-size: .875rem; font-weight: 500; transition: color var(--transition-fast); }
.back-to-games:hover { color: #fff; }

/* Slots */
.slots-machine { background: var(--bg-card); border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-xl); border: 1px solid var(--neutral-200); }
.slots-top { background: linear-gradient(135deg,var(--green-800),var(--green-700)); padding: var(--space-6); text-align: center; }
.slots-marquee { font-family: var(--font-display); font-size: .875rem; font-weight: 600; color: var(--gold-300); letter-spacing: .2em; text-transform: uppercase; animation: marquee-glow 2s ease-in-out infinite; }
@keyframes marquee-glow { 0%,100% { opacity:1; } 50% { opacity:.6; } }
.slots-reels-frame { padding: var(--space-8); background: #0d2416; display: flex; justify-content: center; align-items: center; gap: var(--space-4); }
.reel-window { width: 120px; height: 140px; background: #060e09; border-radius: var(--radius-lg); border: 3px solid var(--gold-600); overflow: hidden; position: relative; box-shadow: inset 0 0 20px rgba(0,0,0,.8),0 0 15px rgba(212,160,23,.3); }
.reel-track { display: flex; flex-direction: column; }
.reel-symbol { width: 120px; height: 140px; display: flex; align-items: center; justify-content: center; font-size: 3.5rem; user-select: none; }
.reel-shine { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,.6) 0%,transparent 25%,transparent 75%,rgba(0,0,0,.6) 100%); pointer-events: none; z-index: 1; }
.reel-separator { width: 4px; height: 140px; background: linear-gradient(180deg,var(--gold-700),var(--gold-500),var(--gold-700)); border-radius: 2px; box-shadow: 0 0 8px rgba(232,181,32,.5); }
.slots-controls { padding: var(--space-6) var(--space-8); display: flex; flex-direction: column; gap: var(--space-5); }
.bet-control { display: flex; align-items: center; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }
.bet-label { font-size: .875rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; }
.bet-buttons { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; }
.bet-btn { padding: var(--space-2) var(--space-4); background: var(--neutral-100); border: 2px solid var(--neutral-200); border-radius: var(--radius-full); font-size: .875rem; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast); }
.bet-btn:hover, .bet-btn.active { background: var(--green-600); border-color: var(--green-600); color: #fff; }
.spin-area { display: flex; justify-content: center; }
.spin-btn { padding: var(--space-4) var(--space-12); font-size: 1.125rem; font-weight: 700; background: linear-gradient(135deg,var(--gold-500),var(--gold-400)); color: var(--text-on-gold); border: none; border-radius: var(--radius-full); cursor: pointer; transition: all var(--transition-fast); box-shadow: var(--shadow-gold); letter-spacing: .05em; text-transform: uppercase; }
.spin-btn:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(212,160,23,.5); }
.spin-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.slots-result { min-height: 48px; display: flex; align-items: center; justify-content: center; padding: var(--space-3) var(--space-6); background: var(--neutral-50); border-radius: var(--radius-lg); font-weight: 600; font-size: 1rem; color: var(--text-muted); text-align: center; transition: all var(--transition-base); }
.slots-result.win  { background: var(--green-50); color: var(--green-700); border: 1px solid var(--green-200); }
.slots-result.loss { background: #fff5f5; color: #c53030; border: 1px solid #fed7d7; }
.paytable-toggle { text-align: center; margin-top: var(--space-2); }
.paytable-toggle button { font-size: .8125rem; color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.paytable { display: none; padding: var(--space-5) var(--space-8) var(--space-6); background: var(--neutral-50); border-top: 1px solid var(--neutral-200); }
.paytable.open { display: block; }
.paytable-title { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); margin-bottom: var(--space-3); }
.paytable-rows { display: flex; flex-direction: column; gap: var(--space-2); }
.paytable-row { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-3); background: var(--bg-card); border-radius: var(--radius-md); border: 1px solid var(--neutral-200); }
.paytable-combo { font-size: 1.125rem; }
.paytable-payout { font-size: .8125rem; font-weight: 600; color: var(--green-700); }

/* Blackjack */
.blackjack-table { background: #0a2617; border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-xl); border: 1px solid var(--green-900); min-height: 560px; }
.table-felt { background: radial-gradient(ellipse at center,#1a4d2b 0%,#0d2e18 100%); padding: var(--space-8); min-height: 400px; }
.dealer-zone, .player-zone { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.zone-label { font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.card-area { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; min-height: 90px; align-items: center; }
.playing-card { width: 62px; height: 90px; background: #fff; border-radius: var(--radius-md); border: 1px solid #e0e0e0; display: flex; flex-direction: column; justify-content: space-between; padding: 4px; font-size: .875rem; font-weight: 700; box-shadow: var(--shadow-md); animation: card-flip .3s ease forwards; }
@keyframes card-flip { from { transform:rotateY(90deg) scale(.8); opacity:0; } to { transform:rotateY(0deg) scale(1); opacity:1; } }
.playing-card.red { color: #e53e3e; }
.playing-card.black { color: #1a202c; }
.playing-card.face-down { background: linear-gradient(135deg,var(--green-800),var(--green-700)); }
.card-rank, .card-suit { line-height: 1; }
.card-suit { font-size: 1rem; }
.card-center { font-size: 1.5rem; text-align: center; }
.card-face-down-pattern { width: 100%; height: 100%; background: repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0px,rgba(255,255,255,.05) 2px,transparent 2px,transparent 8px); border-radius: var(--radius-sm); }
.score-badge { display: inline-flex; padding: var(--space-1) var(--space-3); background: rgba(0,0,0,.35); border-radius: var(--radius-full); font-size: .875rem; font-weight: 700; color: rgba(255,255,255,.85); min-width: 40px; justify-content: center; }
.score-badge.bust { background: rgba(239,68,68,.5); }
.score-badge.blackjack { background: rgba(212,160,23,.5); }
.table-divider { border: none; border-top: 1px solid rgba(255,255,255,.08); margin: var(--space-8) 0; }
.bj-controls { padding: var(--space-5) var(--space-8); background: rgba(0,0,0,.3); display: flex; flex-direction: column; gap: var(--space-4); }
.bj-bet-row { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; justify-content: center; }
.bj-bet-label { font-size: .875rem; font-weight: 600; color: rgba(255,255,255,.6); }
.bj-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; }
.chip { width: 44px; height: 44px; border-radius: 50%; border: 3px solid rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center; font-size: .8125rem; font-weight: 700; cursor: pointer; transition: all var(--transition-fast); box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.chip:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,.5); }
.chip:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.chip-5   { background: #e53e3e; color: #fff; }
.chip-10  { background: #3182ce; color: #fff; }
.chip-25  { background: #38a169; color: #fff; }
.chip-50  { background: #744210; color: #fef3c7; }
.chip-100 { background: #1a1a2e; color: #fbbf24; }
.current-bet-display { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: rgba(255,255,255,.08); border-radius: var(--radius-full); font-size: .875rem; font-weight: 600; color: rgba(255,255,255,.8); }
.bj-action-row { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.bj-btn { padding: var(--space-3) var(--space-6); border-radius: var(--radius-full); font-size: .9rem; font-weight: 600; cursor: pointer; transition: all var(--transition-fast); border: 2px solid transparent; }
.bj-btn:disabled { opacity: .4; cursor: not-allowed; transform: none !important; }
.bj-btn-deal  { background: var(--gold-400); color: var(--text-on-gold); border-color: var(--gold-400); }
.bj-btn-deal:hover:not(:disabled)  { background: var(--gold-300); transform: translateY(-2px); }
.bj-btn-hit   { background: var(--green-600); color: #fff; }
.bj-btn-hit:hover:not(:disabled)   { background: var(--green-500); transform: translateY(-2px); }
.bj-btn-stand { background: var(--blue-700); color: #fff; }
.bj-btn-stand:hover:not(:disabled) { background: var(--blue-600); transform: translateY(-2px); }
.bj-btn-clear { background: transparent; color: rgba(255,255,255,.6); border-color: rgba(255,255,255,.2); }
.bj-btn-clear:hover:not(:disabled) { background: rgba(255,255,255,.08); color: rgba(255,255,255,.9); }
.bj-message { text-align: center; min-height: 40px; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 600; color: rgba(255,255,255,.7); padding: var(--space-2) var(--space-4); border-radius: var(--radius-lg); transition: all var(--transition-base); }
.bj-message.win  { background: rgba(34,197,94,.15); color: #6ee7b7; border: 1px solid rgba(34,197,94,.3); }
.bj-message.lose { background: rgba(239,68,68,.12); color: #fca5a5; border: 1px solid rgba(239,68,68,.25); }
.bj-message.push { background: rgba(232,181,32,.1); color: var(--gold-300); border: 1px solid rgba(232,181,32,.2); }

/* Dice */
.dice-arena { background: var(--bg-card); border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-xl); border: 1px solid var(--neutral-200); }
.dice-top { background: linear-gradient(135deg,var(--green-800),var(--green-700)); padding: var(--space-8); text-align: center; }
.dice-display { display: flex; gap: var(--space-4); justify-content: center; align-items: center; margin-bottom: var(--space-6); }
.die { width: 90px; height: 90px; background: #fff; border-radius: var(--radius-xl); display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr); padding: 10px; gap: 4px; box-shadow: var(--shadow-lg),inset 0 2px 4px rgba(0,0,0,.1); transition: transform .15s ease; }
.die.rolling { animation: dice-roll .5s ease-in-out; }
@keyframes dice-roll { 0% { transform:rotate(0deg) scale(1); } 25% { transform:rotate(-15deg) scale(.9); } 50% { transform:rotate(15deg) scale(1.1); } 75% { transform:rotate(-8deg) scale(.95); } 100% { transform:rotate(0deg) scale(1); } }
.dot { width: 100%; height: 100%; border-radius: 50%; background: var(--neutral-900); }
.dot.hidden { opacity: 0; }
.dice-vs { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--gold-300); }
.dice-total-display { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--gold-300); min-height: 2.5rem; }
.dice-controls-panel { padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-6); }
.dice-bet-type { display: flex; flex-direction: column; gap: var(--space-3); }
.dice-bet-type label { font-size: .875rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; }
.dice-options { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-2); }
.dice-option { padding: var(--space-3) var(--space-2); background: var(--neutral-100); border: 2px solid var(--neutral-200); border-radius: var(--radius-lg); text-align: center; cursor: pointer; transition: all var(--transition-fast); }
.dice-option:hover { border-color: var(--green-400); background: var(--green-50); }
.dice-option.selected { background: var(--green-600); border-color: var(--green-600); color: #fff; }
.dice-option-value { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; }
.dice-option-label { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; opacity: .7; margin-top: 2px; }
.dice-bet-row { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.dice-bet-input { flex: 1; padding: var(--space-3) var(--space-4); background: var(--neutral-50); border: 2px solid var(--neutral-300); border-radius: var(--radius-lg); font-size: 1rem; font-weight: 600; color: var(--text-primary); min-width: 80px; transition: border-color var(--transition-fast); }
.dice-bet-input:focus { outline: none; border-color: var(--green-500); }
.dice-roll-btn { padding: var(--space-4) var(--space-8); background: linear-gradient(135deg,var(--gold-500),var(--gold-400)); color: var(--text-on-gold); border: none; border-radius: var(--radius-full); font-size: 1rem; font-weight: 700; cursor: pointer; transition: all var(--transition-fast); text-transform: uppercase; letter-spacing: .05em; box-shadow: var(--shadow-gold); white-space: nowrap; }
.dice-roll-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(212,160,23,.45); }
.dice-roll-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.dice-result-message { min-height: 52px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 1.0625rem; font-weight: 600; color: var(--text-muted); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--neutral-50); transition: all var(--transition-base); }
.dice-result-message.win  { background: var(--green-50); color: var(--green-700); border: 1px solid var(--green-200); }
.dice-result-message.loss { background: #fff5f5; color: #c53030; border: 1px solid #fed7d7; }
.dice-history { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-2); }
.dice-history-item { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .8125rem; font-weight: 700; flex-shrink: 0; border: 2px solid transparent; }
.dice-history-item.win  { background: var(--green-100); color: var(--green-800); border-color: var(--green-300); }
.dice-history-item.loss { background: #fed7d7; color: #c53030; border-color: #fca5a5; }

/* Shared game elements */
.game-stats-bar { display: flex; gap: var(--space-6); padding: var(--space-4) var(--space-8); background: var(--neutral-50); border-top: 1px solid var(--neutral-200); flex-wrap: wrap; }
.game-stat-label { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); }
.game-stat-value { font-size: .9375rem; font-weight: 700; color: var(--text-primary); }
.game-disclaimer { max-width: 900px; margin: 0 auto; padding: 0 var(--space-6) var(--space-8); }
.game-disclaimer-box { background: var(--gold-50); border: 1px solid var(--gold-200); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); display: flex; gap: var(--space-3); align-items: flex-start; }
.game-disclaimer-icon { font-size: 1.25rem; flex-shrink: 0; }
.game-disclaimer-text { font-size: .8125rem; color: var(--gold-800); line-height: 1.55; }
.game-disclaimer-text strong { color: var(--gold-900); }

@media (max-width: 640px) {
  .reel-window { width: 90px; height: 110px; }
  .reel-symbol { width: 90px; height: 110px; font-size: 2.75rem; }
  .die { width: 70px; height: 70px; padding: 8px; }
  .dice-options { grid-template-columns: repeat(2,1fr); }
  .bj-chips { flex-wrap: wrap; justify-content: center; }
}