/* Skill-Games platform */

:root {
    --sg-accent: #7c5cff;
    --sg-gold: #f5c542;
}

body {
    min-height: 100vh;
    background: radial-gradient(ellipse at top, #1e1b3a 0%, var(--bs-body-bg) 60%);
}

.btn-primary {
    --bs-btn-bg: var(--sg-accent);
    --bs-btn-border-color: var(--sg-accent);
    --bs-btn-hover-bg: #6a4af0;
    --bs-btn-hover-border-color: #6a4af0;
    --bs-btn-active-bg: #5b3de0;
}

.coin-badge {
    background: rgba(245, 197, 66, .15);
    color: var(--sg-gold);
    border: 1px solid rgba(245, 197, 66, .4);
    font-size: .9rem;
}

.game-card {
    transition: transform .15s, border-color .15s;
}
.game-card:hover {
    transform: translateY(-2px);
    border-color: var(--sg-accent);
}

.real-money-hint {
    color: var(--sg-gold);
}

/* ===== Play page ===== */

.play-timer {
    font-variant-numeric: tabular-nums;
    font-size: 1.75rem;
    font-weight: 700;
}
.play-timer.low {
    color: var(--bs-danger);
}

.game-frame {
    display: block;
    width: 100%;
    height: 480px;
    border: 0;
    background: transparent;
}

.result {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

/* ===== Layout ===== */

body {
    display: flex;
    flex-direction: column;
}

.coin-badge.play-money {
    background: rgba(173, 181, 189, .15);
    color: var(--bs-secondary-color);
    border-color: rgba(173, 181, 189, .4);
}

/* ===== Start page ===== */

.hero h1 {
    background: linear-gradient(90deg, #fff 0%, #b9a8ff 60%, var(--sg-gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.stat-tile {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    padding: 1rem;
    text-align: center;
    height: 100%;
}
.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.stat-value.gold {
    color: var(--sg-gold);
}
.stat-label {
    font-size: .85rem;
    color: var(--bs-secondary-color);
}

.live-dot {
    display: inline-block;
    width: .6rem;
    height: .6rem;
    margin-right: .4rem;
    border-radius: 50%;
    background: #3ddc84;
    vertical-align: middle;
    animation: pulse 1.6s infinite;
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, .6); }
    70% { box-shadow: 0 0 0 .5rem rgba(61, 220, 132, 0); }
    100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); }
}

.how-it-works .step {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--sg-accent);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .75rem;
}

/* ===== Legal pages ===== */

.legal {
    max-width: 820px;
}
.legal h2 {
    margin-top: 1.75rem;
}
.placeholder-text {
    background: rgba(255, 193, 7, .25);
    color: inherit;
    padding: 0 .2rem;
}

/* Game icons (icon.svg of each package) */
.game-icon {
    flex-shrink: 0;
    border-radius: 22%;
    vertical-align: middle;
}

/* Running games in the header */
.running-badge {
    background: rgba(255, 193, 7, .18);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, .5);
    font-size: .85rem;
}
.running-badge:hover {
    background: rgba(255, 193, 7, .3);
}

/* Game in fullscreen (button on the play page): header row with timer + game fill the screen */
#play-area:fullscreen {
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    background: #1b1930;
}
#play-area:fullscreen .game-frame {
    flex: 1;
    height: auto !important;
    min-height: 0;
}

.girocode svg { display: block; width: 240px; height: 240px; }

/* Online status next to a player's name */
.online-dot { display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: #2ecc71;
              box-shadow: 0 0 0 2px rgba(46, 204, 113, .25); vertical-align: middle; margin-left: .2em; }

/* Live match: the two players with their clocks, the one to move highlighted */
.live-player { padding: .2rem .6rem; border-radius: .5rem; border: 1px solid var(--bs-border-color); white-space: nowrap; }
.live-player.active { border-color: var(--bs-success); box-shadow: 0 0 0 2px rgba(46, 204, 113, .35); }
.live-player .clock { font-variant-numeric: tabular-nums; margin-left: .3rem; }