/* Skill-Games platform */

/* Colours, fonts and shapes per theme: see themes.css */

body {
    min-height: 100vh;
    background: var(--sg-page-bg);
}

.btn-primary {
    --bs-btn-bg: var(--sg-accent);
    --bs-btn-border-color: var(--sg-accent);
    --bs-btn-hover-bg: var(--sg-accent-hover);
    --bs-btn-hover-border-color: var(--sg-accent-hover);
    --bs-btn-active-bg: var(--sg-accent-active);
    --bs-btn-active-border-color: var(--sg-accent-active);
    --bs-btn-disabled-bg: var(--sg-accent);
    --bs-btn-disabled-border-color: var(--sg-accent);
}

.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: var(--sg-hero-text);
    -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: var(--bs-border-radius-lg);
    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: var(--sg-warn-text);
    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: var(--sg-fullscreen-bg);
}
#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; }

/* Live: pause between the two games of a match, over the play area */
#play-area { position: relative; }
.round-break { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .45); z-index: 20; cursor: pointer; padding: 1rem; }
.round-break .card { max-width: 28rem; width: 100%; }

/* Players: avatars, names, chat */
.avatar-sm { border-radius: 50%; vertical-align: middle; margin-right: .25rem; }
.avatar-lg { border-radius: 50%; }
.player-name { text-decoration: none; color: inherit; }
.player-name:hover { text-decoration: underline; }
.avatar-picker { display: flex; flex-wrap: wrap; gap: .35rem; }
.avatar-choice { border: 2px solid transparent; border-radius: 50%; padding: 1px; background: none; }
.avatar-choice.chosen, .avatar-choice:hover { border-color: var(--bs-primary); }
.chat-box { height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: .4rem; }
.chat-msg { max-width: 80%; }
.chat-msg.mine { align-self: flex-end; text-align: right; }
.chat-bubble { display: inline-block; padding: .4rem .7rem; border-radius: 1rem; background: var(--bs-secondary-bg); white-space: pre-wrap; word-break: break-word; text-align: left; }
.chat-msg.mine .chat-bubble { background: var(--bs-primary); color: #fff; }
.chat-meta { font-size: .7rem; color: var(--bs-secondary-color); }

/* Live: quick messages */
.live-player { position: relative; }
.emote-bubble { position: absolute; left: 50%; bottom: 115%; transform: translateX(-50%); white-space: nowrap; z-index: 30;
    background: var(--bs-body-bg); color: var(--bs-body-color); border: 1px solid var(--bs-border-color); border-radius: 1rem;
    padding: .2rem .6rem; font-size: .9rem; box-shadow: 0 .25rem .75rem rgba(0,0,0,.25); animation: emote-pop .2s ease-out; }
@keyframes emote-pop { from { transform: translateX(-50%) scale(.6); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
.emote-bar .btn { padding: .1rem .45rem; }

/* Result over the game (also in fullscreen and on phones) */
.result-overlay { position: fixed; inset: 0; z-index: 1050; display: flex; align-items: center; justify-content: center;
    padding: 1rem; background: rgba(0, 0, 0, .55); }
.result-overlay .result { margin: 0 !important; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; position: relative; }
.result-close { position: absolute; top: .75rem; right: .75rem; z-index: 1; }
/* After closing the result: always reachable again, also in fullscreen */
.result-reopen { position: fixed; bottom: max(1rem, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 1049; }

/* Tournament opened from the start page (/Tournaments#t-ID): scrolled to and briefly highlighted */
.tournament-row { scroll-margin-top: 5rem; }
.tournament-row:target { animation: tournament-flash 2.5s ease-out; border-radius: .5rem; }
@keyframes tournament-flash { 0%, 40% { background: rgba(var(--bs-warning-rgb), .35); } 100% { background: transparent; } }

/* Game ideas from players */
.idea-hero { border: 1px solid rgba(var(--bs-warning-rgb), .5); background: linear-gradient(135deg, rgba(var(--bs-warning-rgb), .12), transparent 60%); }
.idea-badge { background: rgba(var(--bs-warning-rgb), .2); color: var(--bs-body-color); border: 1px solid rgba(var(--bs-warning-rgb), .5); font-weight: 500; }
.idea-example dt { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--bs-secondary-color); margin-top: .5rem; }
.idea-example dd { margin-bottom: .25rem; }

/* Small ⓘ that opens an explanation (works on touch, unlike a tooltip) */
.info-toggle { font-size: 1em; line-height: 1; color: var(--bs-info); }

/* Lobby: jump targets stay clear of the top bar */
#open-challenges, #games, #my-challenges { scroll-margin-top: 4.5rem; }

/* Game opened from the start page (/Lobby#game-KEY): scrolled to and briefly highlighted */
.game-target { scroll-margin-top: 5rem; }
.game-target:target > .game-card { animation: game-flash 2.5s ease-out; }
@keyframes game-flash { 0%, 40% { box-shadow: 0 0 0 3px rgba(var(--bs-warning-rgb), .9); } 100% { box-shadow: none; } }

/* Back to the top */
.to-top { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 1040;
    width: 2.75rem; height: 2.75rem; border-radius: 50% !important; padding: 0 !important; line-height: 1;
    display: flex; align-items: center; justify-content: center; /* the arrow exactly in the middle, in every theme */
    opacity: 0; pointer-events: none; transform: translateY(.5rem); transition: opacity .2s, transform .2s; }
.to-top.show { opacity: .9; pointer-events: auto; transform: none; }

/* The bell's list: readable width, long names wrap */
.bell-list { min-width: 16rem; max-width: 22rem; }
.bell-list .dropdown-item { white-space: normal; }
.bell-count { font-size: .65rem; }