/* Game client layers — sits on top of face.css (base face layer styles live there) */

:root {
    --overlay-accent: #4dd8ff;
}

/* ---------- base layers (face OR remote video — never both visible) ---------- */
.base {
    position: fixed;
    inset: 0;
    z-index: 1;
}

.base.hidden {
    display: none;
}

.base-video {
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.base-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- overlay layer (independent of base) ---------- */
.overlay {
    position: fixed;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}

/* ---------- illegal-move blocker ---------- */
.blocker {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(7, 11, 18, 0.82);
    backdrop-filter: blur(3px);
    pointer-events: auto; /* blocks all interaction until board is fixed */
}

.blocker.hidden {
    display: none;
}

.blocker-card {
    text-align: center;
    color: #dfe9f3;
    max-width: 70vmin;
    padding: 4vmin 5vmin;
    border: 1px solid rgba(255, 90, 90, 0.5);
    border-radius: 16px;
    background: rgba(20, 12, 14, 0.85);
}

.blocker-title {
    color: var(--warn, #ff5a5a);
    font-size: 4vmin;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin-bottom: 1.6vmin;
}

.blocker-reason {
    font-size: 3vmin;
    margin-bottom: 2vmin;
}

.blocker-hint {
    font-size: 2vmin;
    opacity: 0.65;
}

/* ---------- turn indicators ---------- */
.turn-chip {
    position: absolute;
    top: 3vmin;
    left: 50%;
    transform: translateX(-50%);
    padding: 1vmin 3vmin;
    border-radius: 999px;
    font-size: 2.4vmin;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
}

.turn-chip.hidden,
.turn-glow.hidden {
    display: none;
}

.turn-chip.mine {
    background: rgba(90, 255, 138, 0.2);
    border: 1px solid var(--win, #5aff8a);
    color: var(--win, #5aff8a);
    animation: chip-pulse 1.6s infinite ease-in-out;
}

.turn-chip.theirs {
    background: rgba(7, 11, 18, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #9fb4c8;
}

@keyframes chip-pulse {
    0%,
    100% {
        box-shadow: 0 0 0.5vmin rgba(90, 255, 138, 0.3);
    }

    50% {
        box-shadow: 0 0 3vmin rgba(90, 255, 138, 0.8);
    }
}

/* glowing frame around the whole screen while it is your turn */
.turn-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    animation: turn-frame 1.6s infinite ease-in-out;
}

@keyframes turn-frame {
    0%,
    100% {
        box-shadow: inset 0 0 4vmin rgba(90, 255, 138, 0.25);
    }

    50% {
        box-shadow: inset 0 0 10vmin rgba(90, 255, 138, 0.55);
    }
}

/* ---------- coin flip ---------- */
.coinflip {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2vmin;
    background: rgba(7, 11, 18, 0.75);
    backdrop-filter: blur(3px);
    pointer-events: auto;
}

.coinflip.hidden {
    display: none;
}

.coin {
    font-size: 14vmin;
    filter: drop-shadow(0 0 3vmin rgba(77, 216, 255, 0.5));
}

.coin.spinning {
    animation: coin-spin 0.45s linear infinite;
}

@keyframes coin-spin {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(360deg);
    }
}

.coinflip-text {
    color: #dfe9f3;
    font-size: 3.4vmin;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* ---------- game-over prompt (face stays visible behind it) ---------- */
.gameover {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5vmin;
}

.gameover.hidden {
    display: none;
}

/* big centered result with a colored aura */
.gameover-result {
    font-size: 11vmin;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    animation: result-pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1);
}

.gameover-result.win {
    color: var(--win, #5aff8a);
    text-shadow:
        0 0 2vmin rgba(90, 255, 138, 0.9),
        0 0 8vmin rgba(90, 255, 138, 0.55),
        0 0 18vmin rgba(90, 255, 138, 0.35);
}

.gameover-result.lose {
    color: var(--warn, #ff5a5a);
    text-shadow:
        0 0 2vmin rgba(255, 90, 90, 0.9),
        0 0 8vmin rgba(255, 90, 90, 0.55),
        0 0 18vmin rgba(255, 90, 90, 0.35);
}

@keyframes result-pop {
    0% {
        transform: scale(0.4);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.gameover-hint {
    color: #dfe9f3;
    font-size: 2.4vmin;
    letter-spacing: 0.1em;
    text-shadow: 0 0 8px rgba(7, 11, 18, 0.9);
}

.gameover-players {
    display: flex;
    align-items: center;
    gap: 3vmin;
}

.gp-player {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6vmin;
}

.gp-icon {
    font-size: 8vmin;
    background: rgba(22, 32, 46, 0.85);
    border: 1px solid #2c3e55;
    border-radius: 50%;
    padding: 1.5vmin;
    line-height: 1;
}

.gp-name {
    color: #9fb4c8;
    font-size: 1.7vmin;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.gp-badge {
    position: absolute;
    top: -1.8vmin;
    right: -1.2vmin;
    font-size: 3.5vmin;
    z-index: 1;
    text-shadow: 0 0 6px rgba(7, 11, 18, 0.9);
}

.gp-badge.hidden {
    display: none;
}

.gp-vs {
    color: #9fb4c8;
    font-size: 2.4vmin;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.gameover-actions button {
    font-size: 2.2vmin;
    padding: 1.2vmin 2.8vmin;
    margin: 0 0.8vmin;
    background: rgba(22, 32, 46, 0.85);
    color: #cfe8ff;
    border: 1px solid #2c3e55;
    border-radius: 999px;
    cursor: pointer;
    pointer-events: auto;
    backdrop-filter: blur(4px);
}

.gameover-actions button:hover {
    background: rgba(31, 45, 64, 0.95);
}

.gameover-actions button:disabled {
    opacity: 0.5;
    cursor: default;
}

/* ---------- lobby ---------- */
.lobby {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(7, 11, 18, 0.9);
    backdrop-filter: blur(4px);
    pointer-events: auto;
}

.lobby.hidden {
    display: none;
}

.lobby-card {
    text-align: center;
    color: #dfe9f3;
    min-width: 40vmin;
    padding: 4vmin 5vmin;
    border: 1px solid rgba(77, 216, 255, 0.35);
    border-radius: 16px;
    background: rgba(12, 18, 28, 0.9);
}

.lobby-title {
    color: var(--overlay-accent);
    font-size: 4.5vmin;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-bottom: 1.5vmin;
}

.lobby-status {
    font-size: 2.2vmin;
    opacity: 0.85;
    min-height: 3vmin;
    margin-bottom: 2.5vmin;
}

.lobby-actions button,
.lobby-join input {
    font-size: 2.2vmin;
    padding: 1.2vmin 2.4vmin;
    margin: 0.6vmin;
    background: #16202e;
    color: #cfe8ff;
    border: 1px solid #2c3e55;
    border-radius: 8px;
    cursor: pointer;
}

.lobby-actions button:hover {
    background: #1f2d40;
}

.lobby-join {
    margin-top: 1.2vmin;
}

.lobby-join input {
    width: 9ch;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.3em;
    cursor: text;
}

/* ---------- leave-room button ---------- */
.leave-room {
    position: absolute;
    top: 3vmin;
    right: 3vmin;
    padding: 0.8vmin 1.8vmin;
    border-radius: 999px;
    background: rgba(7, 11, 18, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #dfe9f3;
    font-size: 1.8vmin;
    letter-spacing: 0.08em;
    cursor: pointer;
    pointer-events: auto;
    backdrop-filter: blur(4px);
}

.leave-room:hover {
    background: rgba(40, 20, 24, 0.85);
    border-color: var(--warn, #ff5a5a);
}

.leave-room.hidden {
    display: none;
}

/* ---------- connection status pill ---------- */
.conn-status {
    position: absolute;
    top: 3vmin;
    left: 3vmin;
    display: flex;
    align-items: center;
    gap: 1vmin;
    padding: 0.8vmin 1.8vmin;
    border-radius: 999px;
    background: rgba(7, 11, 18, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #cfe3f5;
    font-size: 1.8vmin;
    letter-spacing: 0.08em;
    backdrop-filter: blur(4px);
}

.conn-dot {
    width: 1.4vmin;
    height: 1.4vmin;
    border-radius: 50%;
    background: currentColor;
}

.conn-status.ok {
    color: var(--win, #5aff8a);
}

.conn-status.warn {
    color: #ffd75a;
}

.conn-status.bad {
    color: var(--warn, #ff5a5a);
}

.conn-status span:last-child {
    color: #dfe9f3;
}

/* ---------- emotion emoji badges ---------- */
.emotion-layer {
    position: absolute;
    right: 4vmin;
    bottom: 18vmin;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 1vmin;
}

.emotion-badge {
    font-size: 7vmin;
    animation: emote-float 3s ease-out forwards;
    filter: drop-shadow(0 0 12px rgba(77, 216, 255, 0.45));
}

.emotion-badge.local {
    filter: drop-shadow(0 0 12px rgba(90, 255, 138, 0.45));
    opacity: 0.85;
}

@keyframes emote-float {
    0% {
        transform: translateY(2vmin) scale(0.4);
        opacity: 0;
    }

    15% {
        transform: translateY(0) scale(1.15);
        opacity: 1;
    }

    30% {
        transform: scale(1);
    }

    75% {
        opacity: 1;
    }

    100% {
        transform: translateY(-6vmin) scale(0.9);
        opacity: 0;
    }
}

/* ---------- local video picture-in-picture ---------- */
.pip {
    position: absolute;
    left: 3vmin;
    bottom: 3vmin;
    width: 22vmin;
    height: 16vmin;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: #000;
    transform: scaleX(-1);
}

.pip.hidden {
    display: none;
}

/* ---------- dev panel extras ---------- */
.dev-status {
    font-size: 12px;
    margin: 6px 3px;
    opacity: 0.85;
}

.dev-section {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}