/* Fullscreen stage for movement games */
.game-stage{position:relative;margin:0 auto;width:100%;}
.game-stage canvas{display:block;width:100%;height:auto;max-width:100%;}
.fs-btn{min-width:auto;padding:8px 12px;}
body.bb-fs{overflow:hidden;}
body.bb-fs .navbar,
body.bb-fs footer,
body.bb-fs .mobile-drawer{display:none!important;}
.game-stage:fullscreen,
.game-stage:-webkit-full-screen{
    background:#0c0707;
    width:100vw;height:100vh;max-width:none;
    display:flex;align-items:center;justify-content:center;
    padding:12px;box-sizing:border-box;
}
.game-stage:fullscreen canvas,
.game-stage:-webkit-full-screen canvas{
    width:auto;height:auto;
    max-width:100%;max-height:100%;
    object-fit:contain;
}
.game-stage:fullscreen .fs-hint,
.game-stage:-webkit-full-screen .fs-hint,
.game-stage:fullscreen #debugInfo,
.game-stage:-webkit-full-screen #debugInfo,
.game-stage:fullscreen #mobileHint,
.game-stage:-webkit-full-screen #mobileHint{display:none;}
.joystick-base,.dpad-btn,.bomb-btn{touch-action:none;}

/* BoredBusters Game Premium v3.1 - Flicker Free + Beautiful */

/* Premium Lobby */
.lobby-container {
    animation: pageIn 0.4s var(--ease-spring);
}
@keyframes pageIn {
    from { opacity:0; transform: translateY(8px); }
    to { opacity:1; transform: translateY(0); }
}

/* Premium Game Area */
.game-area {
    background: linear-gradient(180deg, #15151f 0%, #12121a 100%) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.02) inset !important;
}
.game-area::before {
    content:'';
    position:absolute;
    top:0; left:0; right:0;
    height:1px;
    background: linear-gradient(90deg, transparent, rgba(231,76,60,0.3), transparent);
    pointer-events:none;
}

/* Premium Buttons in games */
.diff-btn.active, .best-btn.active, .mode-btn.active {
    background: rgba(231,76,60,0.15) !important;
    border-color: rgba(231,76,60,0.4) !important;
    color: var(--primary-light) !important;
    box-shadow: 0 0 16px rgba(231,76,60,0.15);
}

/* TTT Premium */
.ttt-grid {
    gap: 10px !important;
    background: rgba(0,0,0,0.2);
    padding: 12px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.04);
}
.ttt-cell {
    background: linear-gradient(180deg, #1a1a28 0%, #12121a 100%) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.02) inset !important;
    font-weight: 900 !important;
    transition: transform 0.15s var(--ease-spring), border-color 0.2s, background 0.2s, box-shadow 0.2s !important;
}
.ttt-cell:hover {
    border-color: rgba(231,76,60,0.35) !important;
    background: linear-gradient(180deg, #1e1e32 0%, #15151f 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.3), 0 0 20px rgba(231,76,60,0.1) !important;
}
.ttt-cell.x {
    color: #06ffa5 !important;
    text-shadow: 0 0 16px rgba(6,255,165,0.4) !important;
}
.ttt-cell.o {
    color: #ff6b5a !important;
    text-shadow: 0 0 16px rgba(231,76,60,0.4) !important;
}
.ttt-cell.win {
    background: linear-gradient(135deg, rgba(6,255,165,0.15), rgba(231,76,60,0.15)) !important;
    border-color: #06ffa5 !important;
    box-shadow: 0 0 24px rgba(6,255,165,0.3) !important;
}

/* Connect4 Premium */
.c4-board {
    background: linear-gradient(180deg, #1e3a8a 0%, #162a5a 100%) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05) inset !important;
    padding: 14px !important;
    border-radius: 20px !important;
}
.c4-cell {
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.6), inset 0 -1px 2px rgba(255,255,255,0.05) !important;
}

/* RPS Premium */
.rps-btn {
    background: linear-gradient(180deg, #1a1a28 0%, #12121a 100%) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 18px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}
.rps-btn:hover {
    border-color: rgba(231,76,60,0.35) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
}
.rps-btn.selected {
    border-color: #06ffa5 !important;
    background: rgba(6,255,165,0.1) !important;
    box-shadow: 0 0 24px rgba(6,255,165,0.25) !important;
}

/* Round & Score Premium */
.round-badge {
    background: linear-gradient(135deg, rgba(231,76,60,0.12), rgba(192,57,43,0.08)) !important;
    border: 1px solid rgba(231,76,60,0.2) !important;
    padding: 6px 14px !important;
    border-radius: 100px !important;
    font-family: 'JetBrains Mono' !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
}
.score-bar {
    display: flex !important;
    gap: 8px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    margin: 14px 0 !important;
}
.score-item {
    padding: 6px 14px !important;
    border-radius: 100px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    font-family: 'JetBrains Mono' !important;
}
.score-item.leading {
    border-color: #06ffa5 !important;
    box-shadow: 0 0 16px rgba(6,255,165,0.2) !important;
    background: rgba(6,255,165,0.08) !important;
}

/* Canvas Premium - Flicker Free */
canvas:not(.swift7-interactive-background):not(#swift7-interactive-background) {
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.35) !important;
    background: #0a0a0f !important;
}

/* Chat Premium */
.chat-box {
    background: rgba(0,0,0,0.25) !important;
    border: 1px solid rgba(255,255,255,0.04) !important;
    border-radius: 12px !important;
}
.chat-msg {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.03) !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
}

/* Panels Premium */
.panel {
    background: linear-gradient(180deg, #15151f 0%, #12121a 100%) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
}

/* Room Cards Premium */
.room-card {
    background: #15151f !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 14px !important;
    transition: all 0.25s var(--ease-spring) !important;
}
.room-card:hover {
    border-color: rgba(231,76,60,0.25) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25) !important;
}

/* Inputs Premium */
input, textarea {
    background: rgba(0,0,0,0.25) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 10px !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}
input:focus, textarea:focus {
    border-color: rgba(231,76,60,0.35) !important;
    box-shadow: 0 0 0 3px rgba(231,76,60,0.1) !important;
}

/* Mobile Controls Premium */
.mobile-controls {
    background: linear-gradient(to top, rgba(7,7,11,0.97) 0%, rgba(7,7,11,0.9) 50%, transparent 100%) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-top: 1px solid rgba(255,255,255,0.04) !important;
    padding-top: 12px !important;
}

/* Game Status Toast Premium */
#gameStatus {
    background: rgba(18,18,26,0.96) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.4) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

/* Fix flicker on PC - disable transforms that cause layer thrashing */
@media (hover: hover) and (pointer: fine) {
    .ttt-cell:hover, .c4-cell:hover, .rps-btn:hover {
        transform: translateY(-1px) !important;
    }
    .game-card, .room-card, canvas {
        transform: none !important;
    }
    .game-card:hover {
        transform: translateY(-4px) !important;
    }
}