/* =====================================================================
   Oyunlar — ortak cila: tema renkli simgeler, "i" bilgi penceresi, Dice / Mines / Rulet renk + biçim düzeni
   Kural: yüzey = beyaz alfa, vurgu = --primary, kazanç/kayıp = --success-color/--danger-color (sabit hex yok)
   ===================================================================== */

/* — SVG sprite simgeleri — */
.gi {
    display: block;
    width: 1em;
    height: 1em;
    flex: none;
}

.gi-q {
    color: rgba(255, 255, 255, 0.3);
}

/* — üst çubuk "i" düğmesi — */
.game-head__info {
    flex: none;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
    .game-head__info:hover {
        color: #fff;
        border-color: rgba(var(--primary), 0.45);
        background: rgba(var(--primary), 0.12);
    }
}

/* — bilgi penceresi — */
.game-info[hidden] {
    display: none;
}

.game-info {
    position: fixed;
    inset: 0;
    z-index: 2700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.game-info__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(var(--bg-rgb, 5, 8, 20), 0.74);
}

.game-info__panel {
    position: relative;
    width: min(460px, 100%);
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(var(--stroke-rgb, 140, 200, 255), 0.16);
    border-radius: 16px;
    background: linear-gradient(180deg, rgb(var(--surface-700-rgb, 30, 58, 115)), rgb(var(--surface-rgb, 17, 35, 74)));
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.75);
    animation: game-info-in 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.game-info__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.game-info__head h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
}

.game-info__close {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
}

.game-info__body {
    padding: 14px 16px 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.game-info__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.game-info__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.game-info__list li span {
    flex: none;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: rgba(var(--primary), 0.16);
    color: rgb(var(--primary-text, var(--primary)));
    font-size: 11px;
    font-weight: 800;
}

.game-info__list li p {
    margin: 2px 0 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
}

.game-info__limits {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.game-info__limits div {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
}

.game-info__limits small {
    display: block;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.35);
}

.game-info__limits b {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

body.game-info-open {
    overflow: hidden;
}

@keyframes game-info-in {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 520px) {
    .game-info {
        align-items: flex-end;
        padding: 0;
    }

    .game-info__panel {
        width: 100%;
        max-height: 86vh;
        border-radius: 18px 18px 0 0;
        border-bottom: 0;
    }
}

/* ======================= MINES ======================= */
.mines-cell {
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.045);
    box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
    .mines-cell:not(.revealed):hover {
        transform: translateY(-2px);
        border-color: rgba(var(--primary), 0.55);
        background: rgba(var(--primary), 0.1);
        box-shadow: 0 10px 20px -14px rgba(var(--primary), 0.9);
    }
}

.mines-cell-mark-overlay-dark {
    display: none;
}

.mines-cell-mark-img {
    width: 46%;
    height: 46%;
}

.mines-cell-inner .gi {
    width: 62%;
    height: 62%;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45));
}

.mines-cell.revealed {
    border-color: rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.3);
    box-shadow: none;
}

.mines-cell.revealed .mines-cell-inner .gi {
    opacity: 1;
    transform: scale(1);
}

.mines-cell.dimmed .mines-cell-inner .gi {
    opacity: 0.55;
}

.mines-grid-wrapper {
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.22);
    box-shadow: none;
}

.mines-stat-icon {
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
}

.mines-stat-icon .gi {
    width: 26px;
    height: 26px;
}

.mines-stat-pulse {
    display: none;
}

.mines-stat-label {
    color: rgba(255, 255, 255, 0.4);
}

.mines-input-icon .gi {
    width: 22px;
    height: 22px;
}

.mines-input-icon-pulse {
    display: none;
}

.mines-bomb-button-item {
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.85);
}

.mines-bomb-button-icon .gi {
    width: 16px;
    height: 16px;
}

@media (hover: hover) and (pointer: fine) {
    .mines-bomb-button-item:hover {
        border-color: rgba(var(--primary), 0.5);
        background: rgba(var(--primary), 0.12);
        color: #fff;
    }
}

.mines-mode-toggle {
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
}

/* ======================= ORTAK GİRİŞ KUTULARI (Dice / Mines / Rulet) ======================= */
.dice-input-field,
.dice-win-amount-display-wrapper,
.mines-input-field,
.rulet-bet-input-group {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
}

.dice-input-field:focus-within,
.mines-input-field:focus-within,
.rulet-bet-input-group:focus-within {
    border-color: rgba(var(--primary), 0.55);
    box-shadow: 0 0 0 3px rgba(var(--primary), 0.12);
}

.dice-input-label,
.mines-input-label,
.rulet-bet-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(255, 255, 255, 0.6);
}

.dice-input-button,
.mines-input-button {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.75);
}

@media (hover: hover) and (pointer: fine) {
    .dice-input-button:hover,
    .mines-input-button:hover {
        border-color: rgba(var(--primary), 0.45);
        background: rgba(var(--primary), 0.12);
        color: #fff;
    }
}

/* ======================= DICE ======================= */
.dice-win-amount-display {
    color: var(--success-color, #22c55e);
}

.dice-value-number {
    font-family: inherit;
    font-size: 64px;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-shadow: none;
}

.dice-value-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.4);
}

.dice-slider-track {
    height: 10px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--danger-color, #ef4444) 62%, transparent);
    box-shadow: none;
}

.dice-slider-background {
    border-radius: 10px;
    background: var(--success-color, #22c55e);
    box-shadow: none;
}

.dice-slider-handle {
    width: 26px;
    height: 34px;
    border: 3px solid #fff;
    border-radius: 9px;
    background: rgb(var(--primary));
    box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.6), 0 0 0 4px rgba(var(--primary), 0.22);
}

.dice-slider-tooltip {
    top: -46px;
    padding: 5px 11px;
    border-radius: 8px;
    background: rgb(var(--primary));
    color: var(--text-on-accent, #fff);
    font-size: 13px;
    font-weight: 800;
}

.dice-slider-tooltip::after {
    border-color: rgb(var(--primary)) transparent transparent transparent;
}

.dice-slider-labels-desktop {
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
}

.dice-bottom-controls {
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: none;
}

.dice-multiplier-input-field,
.dice-win-chance-input-field,
.dice-direction-buttons-desktop {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
}

.dice-direction-button {
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
}

.dice-direction-button.active {
    background: linear-gradient(180deg, color-mix(in srgb, rgb(var(--primary)) 78%, #fff), color-mix(in srgb, rgb(var(--primary)) 90%, #000));
    color: var(--text-on-accent, #fff);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.dice-mode-toggle button.active,
.mines-mode-toggle button.active {
    background: rgba(255, 255, 255, 0.09);
    color: #fff;
    box-shadow: none;
}

.dice-stats-tour-value.wins,
.mines-stats-tour-value.wins,
.dice-stats-summary-value.wins {
    color: var(--success-color, #22c55e);
}

/* ======================= RULET ======================= */
.rulet-bet-input-group {
    padding: 4px 6px;
}

.rulet-bet-icon .game-coin-ico,
.mines-input-icon .game-coin-ico,
.dice-input-icon .game-coin-ico {
    width: 20px;
    height: 20px;
}

/* renk bahisleri: aynı oyun renkleri, daha sakin tonlarda */
.rulet-color-bet-btn.red,
.rulet-track-cell.red,
.rulet-recent-item.red {
    background: linear-gradient(180deg, #ef5350 0%, #c62828 100%);
}

.rulet-color-bet-btn.green,
.rulet-track-cell.green,
.rulet-recent-item.green {
    background: linear-gradient(180deg, #2fd27a 0%, #129655 100%);
}

.rulet-color-bet-btn.yellow,
.rulet-track-cell.yellow,
.rulet-recent-item.yellow {
    background: linear-gradient(180deg, #f6c343 0%, #e08a12 100%);
}

.rulet-color-bet-btn.black,
.rulet-track-cell.black,
.rulet-recent-item.black {
    background: linear-gradient(180deg, #3b4150 0%, #1f2430 100%);
}

.rulet-color-bet-btn {
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* İstatistikler düğmesi: oyna düğmesinden ayrık, tam genişlikte sakin düğme */
.dice-stats-button-wrapper,
.mines-stats-button-wrapper {
    display: block;
    margin: 12px 0 0;
}

#dice-stats-icon-btn,
#mines-stats-icon-btn {
    width: 100%;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.65);
    font-size: 16px;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.game-stats-label {
    font-size: 13px;
    font-weight: 700;
}

@media (hover: hover) and (pointer: fine) {
    #dice-stats-icon-btn:hover,
    #mines-stats-icon-btn:hover {
        color: #fff;
        border-color: rgba(var(--primary), 0.45);
        background: rgba(var(--primary), 0.1);
    }
}

/* boş "adım" kapsayıcıları flex boşluğu yiyip kutuları kaydırıyordu */
.mines-step-1:empty,
.mines-step-2-desktop:empty,
.dice-step-1:empty {
    display: none;
}

.dice-stats-button-wrapper,
.mines-stats-button-wrapper {
    margin-top: 14px;
}

/* ana yapının 3D ikonları (bomba / elmas / çarpan) */
.gi-img {
    object-fit: contain;
}

.mines-cell-inner .gi-img {
    width: 66%;
    height: 66%;
    filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.5));
}

.mines-stat-icon .gi-img,
.mines-bomb-button-icon .gi-img,
.mines-input-icon .gi-img {
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
}