/* WBET Dino — cloned styles */
.dino-game-page {
    --bg-primary: var(--rb-bg, #090C1D);
    --bg-secondary: var(--rb-card-deep, #191939);
    --bg-tertiary: var(--rb-card, #191939);
    --text-primary: var(--rb-text, #fff);
    --text-secondary: var(--rb-text-soft, rgba(255,255,255,.6));
    --border-color: var(--rb-border-strong, rgba(255,255,255,.08));
    --diff-color: var(--rb-gold, #01e0a3);
    --run-color: var(--rb-gold, #01e0a3);
    font-family: 'Inter','Exo 2',system-ui,sans-serif;
    color: var(--text-primary);
    background: var(--bg-primary);
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.dino-main { flex-direction: column; flex: 1; display: flex; }
.dino-container { display: flex; flex: 1; overflow: hidden; max-width: 1180px; margin: 0 auto; width: 100%; gap: 14px; padding: 16px 0; }

.dino-sidebar {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    flex-direction: column;
    gap: 14px;
    width: 320px;
    min-width: 320px;
    padding: 16px;
    display: flex;
    overflow-y: auto;
}
.dino-game-area {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    flex-direction: column;
    flex: 1;
    display: flex;
    position: relative;
    overflow: hidden;
    padding: 12px;
}
.phaser-container { background: #fff; flex: 1; display: flex; justify-content: center; align-items: center; position: relative; border-radius: 10px; overflow: hidden; min-height: 350px; }
.phaser-container canvas { max-width: 100%; display: block; }

.form-group { margin-bottom: 12px; }
.form-label { color: var(--text-secondary); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; font-size: 11px; font-weight: 700; display: block; }

.diff-label { display: flex; justify-content: space-between; align-items: center; }
.survive-badge { background: var(--rb-surface-active, #2c3d50); color: var(--diff-color); border-radius: 8px; align-items: center; gap: 8px; padding: 6px 12px; font-size: 11px; font-weight: 700; display: flex; }
.survive-indicator { background: var(--diff-color); width: 6px; height: 6px; box-shadow: 0 0 6px var(--diff-color); border-radius: 50%; }

.difficulty-tabs { display: flex; width: 100%; background: var(--rb-bg, #090C1D); border-radius: 8px; padding: 4px; gap: 4px; }
.diff-tab { background: transparent; color: var(--text-secondary); cursor: pointer; border: none; border-radius: 6px; flex: 1; padding: 10px 0; font-size: 13px; font-weight: 600; transition: all .15s; font-family: inherit; }
.diff-tab:hover:not(.active) { color: var(--text-primary); }
.diff-tab.active { background: var(--diff-color); color: #000; font-weight: 700; }

.dino-input-row { display: flex; align-items: stretch; gap: 4px; }
.dino-input { flex: 1; min-width: 0; height: 44px; border-radius: 8px; background: var(--rb-bg, #090C1D); border: none; padding: 0 12px; font-size: 14px; font-weight: 700; color: var(--text-primary); outline: none; font-family: inherit; }
.dino-input:focus { box-shadow: 0 0 0 2px rgba(245,202,85,.3); }
.dino-half-btn { flex-shrink: 0; width: 44px; height: 44px; border-radius: 8px; background: var(--rb-bg, #090C1D); border: none; font-size: 12px; font-weight: 700; color: var(--text-secondary); cursor: pointer; }
.dino-half-btn:hover { color: var(--text-primary); }

.bet-button {
    background: var(--rb-gold, #01e0a3);
    color: #000;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    width: 100%;
    border: none;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    padding: 16px;
    font-size: 16px;
    font-weight: 700;
    transition: all .15s;
    display: flex;
    font-family: inherit;
    box-shadow: 0 4px 0 var(--rb-gold-strong, #00aa6d), 0 6px 10px #0000004d;
}
.bet-button:hover:not(:disabled) { filter: brightness(1.1); }
.bet-button:disabled { color: #a3a3a3; cursor: not-allowed; opacity: .6; background: #525252; box-shadow: none; }

.jump-decision { flex-direction: column; gap: 8px; display: none; }
.jump-decision.visible { display: flex; }
.jump-button {
    background: #5383e8 !important;
    color: #fff !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    width: 100%;
    box-shadow: 0 4px #2a488a, 0 6px 10px #0000004d;
    border: none;
    border-radius: 8px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 16px;
    font-size: 18px;
    font-weight: 800;
    transition: all .15s;
    animation: jumpPulse 1.2s infinite;
    display: flex;
    font-family: inherit;
}
.jump-button .jump-sub { opacity: .85; text-transform: none; letter-spacing: 0; font-size: 11px; font-weight: 500; }
@keyframes jumpPulse { 0%,100% { box-shadow: 0 4px #2a488a, 0 6px 10px #0000004d, 0 0 20px #5383e838; } 50% { box-shadow: 0 4px #2a488a, 0 6px 10px #0000004d, 0 0 40px #5383e873; } }

.cashout-button {
    background: var(--rb-gold-gradient, linear-gradient(180deg,#00ff8e,#01e0a3));
    color: var(--rb-gold-deep, #04241b);
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    width: 100%;
    border: none;
    border-radius: 8px;
    padding: 14px;
    font-size: 15px;
    font-weight: 800;
    transition: all .15s;
    font-family: inherit;
}

.multiplier-card { background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 10px; flex-direction: column; padding: 12px; display: flex; }
.multiplier-card.active-run { border-color: var(--rb-gold); box-shadow: 0 0 16px rgba(1,224,163,.3); }
.multiplier-header { color: var(--text-secondary); text-transform: uppercase; letter-spacing: .5px; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12px; font-weight: 600; display: flex; }
.multiplier-header .fire-icon { color: var(--rb-gold); }
.multiplier-value { color: var(--run-color); background: #0003; border: 1px solid rgba(255,255,255,.05); border-radius: 8px; justify-content: center; align-items: center; margin-bottom: 8px; padding: 12px; font-family: 'Courier New',monospace; font-size: 28px; font-weight: 800; display: flex; }
.potential-win { color: var(--text-primary); text-align: center; width: 100%; margin-top: 8px; font-size: 14px; font-weight: 700; }

.last-win-card { background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 10px; padding: 12px; }
.last-win-card.lost { background: #ff4d4f; border: none; }
.last-win-card.won { background: #00b4d8; border: none; }
.last-win-card.current { background: var(--rb-gold); border: none; }
.last-win-header { color: var(--text-secondary); text-transform: uppercase; letter-spacing: .5px; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12px; font-weight: 600; display: flex; }
.last-win-card.lost .last-win-header, .last-win-card.current .last-win-header { color: rgba(255,255,255,.95); }
.last-win-card.won .last-win-header { color: rgba(0,0,0,.7); }
.last-win-value { background: #0003; border-radius: 8px; justify-content: center; align-items: center; padding: 12px; font-family: 'Courier New',monospace; font-size: 22px; font-weight: 800; display: flex; color: #fff; }
.last-win-card.won .last-win-value { color: #000; }

.milestone-card { background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 10px; padding: 12px; }
.milestone-header { color: var(--text-secondary); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; font-size: 11px; font-weight: 600; }
.milestones-list { flex-wrap: wrap; gap: 6px; display: flex; }
.milestone-tag { background: var(--bg-tertiary); border: 1px solid var(--border-color); color: var(--text-secondary); border-radius: 6px; padding: 4px 10px; font-size: 12px; font-weight: 600; }
.milestone-tag.achieved { border-color: var(--rb-gold); color: var(--rb-gold); background: #1a2d1a; }
.milestone-tag.next { animation: nextPulse 1.5s infinite; border-color: var(--rb-gold); color: var(--rb-gold); background: #2d281a; }
@keyframes nextPulse { 0%,100% { box-shadow: 0 0 5px #ffd7004d; } 50% { box-shadow: 0 0 15px #ffd70099; } }

.bet-overlay { pointer-events: none; background: rgba(255,255,255,.95); justify-content: center; align-items: center; display: flex; position: absolute; inset: 0; z-index: 5; }
.bet-overlay-content { text-align: center; }
.dino-icon { margin-bottom: 16px; font-size: 72px; animation: bounce 2s infinite; }
@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.overlay-title { color: #535353; margin-bottom: 8px; font-size: 28px; font-weight: 800; }
.overlay-subtitle { color: #888; font-size: 14px; }

.obstacle-warning { text-align: center; z-index: 100; pointer-events: none; position: absolute; top: 14px; left: 50%; transform: translate(-50%); display: none; }
.obstacle-warning.visible { display: block; }
.warning-pulse { color: #ed4245; text-shadow: 0 0 20px #ed424599; font-size: 24px; font-weight: 800; animation: warningBlink .8s infinite; }
@keyframes warningBlink { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

.error-text { color: #ef4444; margin-top: 4px; font-size: 11px; display: none; }

@media (max-width: 900px) {
    .dino-container { flex-direction: column; }
    .dino-sidebar { width: 100%; min-width: auto; max-height: 320px; }
}