/**
 * Cassinax Softwares - Orb Survivor
 * Estilos especificos do jogo
 */

.orb-page {
    max-width: 1240px !important;
}

.orb-breadcrumb span {
    color: var(--cinza-400);
}

.orb-game-shell {
    max-width: min(100%, 1200px);
    margin: 0 auto 2rem;
    position: relative;
}

.orb-toolbar {
    display: flex;
    justify-content: flex-start;
    gap: 0.4rem;
    flex-wrap: nowrap;
    margin: 0;
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    z-index: 30;
    pointer-events: none;
}

.orb-toolbar .orb-tool-btn {
    pointer-events: auto;
}

.orb-tool-btn {
    width: var(--orb-btn-w, clamp(48px, 5vw, 76px));
    min-width: 0;
    border: 1px solid var(--preto);
    background: var(--preto);
    color: var(--branco);
    border-radius: 8px;
    padding: var(--orb-btn-pad-y, 0.26rem) var(--orb-btn-pad-x, 0.34rem);
    font: 700 var(--orb-btn-font, clamp(0.5rem, 0.72vw, 0.68rem))/1 var(--fonte-corpo);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.orb-tool-btn:hover {
    background: var(--branco);
    color: var(--preto);
    transform: translateY(-1px);
}

.orb-game-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 78vh;
    min-height: 0;
    background: #0a0a0a;
    border-radius: 8px;
    overflow: hidden;
    border: 3px solid #000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    cursor: none;
    touch-action: none;
    user-select: none;
}

.orb-game-container.orb-cursor-visible,
.orb-game-container.orb-cursor-visible .orb-canvas {
    cursor: default;
}

.orb-canvas {
    width: 100%;
    height: 100%;
    display: block;
    background: #0f0f1a;
    cursor: none;
    touch-action: none;
}

.orb-game-container:fullscreen,
.orb-game-container:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    border: 0;
    border-radius: 0;
    background: #050510;
}

.orb-game-container.orb-fullscreen-active .orb-toolbar,
.orb-game-container:fullscreen .orb-toolbar,
.orb-game-container:-webkit-full-screen .orb-toolbar {
    position: absolute;
    top: max(0.5rem, env(safe-area-inset-top));
    left: max(0.5rem, env(safe-area-inset-left));
    z-index: 30;
    display: flex;
    gap: 0.4rem;
}

.orb-game-container.orb-fullscreen-active .orb-tool-btn,
.orb-game-container:fullscreen .orb-tool-btn,
.orb-game-container:-webkit-full-screen .orb-tool-btn {
    width: var(--orb-btn-w, clamp(48px, 5vw, 72px));
    font-size: var(--orb-btn-font, 0.54rem);
    padding: var(--orb-btn-pad-y, 0.24rem) var(--orb-btn-pad-x, 0.32rem);
}

.orb-game-container:fullscreen .orb-canvas,
.orb-game-container:-webkit-full-screen .orb-canvas {
    width: 100%;
    height: 100%;
}

.orb-game-info {
    text-align: center;
    margin-top: 12px;
}

.orb-save-note {
    text-align: center;
    font-size: 0.74rem;
    color: var(--cinza-500);
    margin-top: 0.5rem;
}

.orb-dica {
    font-size: 0.8rem;
    color: var(--cinza-500);
    font-family: var(--fonte-corpo);
    margin: 4px 0;
}

.orb-stats-area {
    max-width: 900px;
    margin: 2rem auto 0;
    padding: 1.35rem;
    background: var(--cinza-100);
    border-radius: 8px;
    border: 1px solid var(--cinza-200);
}

.orb-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.orb-stat-card {
    text-align: center;
    min-width: 0;
}

.orb-stat-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--cinza-500);
    margin-bottom: 0.35rem;
}

.orb-stat-value {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    font-family: var(--fonte-titulo);
    color: var(--preto);
}

.orb-save-note {
    text-align: center;
    font-size: 0.78rem;
    color: var(--cinza-500);
    margin-top: 0.5rem;
}

.orb-reset-btn {
    background: none;
    border: 1px solid var(--cinza-400);
    color: var(--cinza-600);
    font-size: 0.75rem;
    padding: 0.55rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--fonte-corpo);
    transition: all 0.2s ease;
}

.orb-reset-btn:hover {
    background: var(--preto);
    color: var(--branco);
    border-color: var(--preto);
}

.orb-como-jogar {
    max-width: 900px;
    margin: 2rem auto;
    text-align: center;
}

.orb-como-jogar h3 {
    font-family: var(--fonte-titulo);
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: var(--preto);
}

.orb-como-jogar ul {
    display: inline-block;
    text-align: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.orb-como-jogar li {
    font-size: 0.82rem;
    color: var(--cinza-600);
    padding: 0.3rem 0;
}

.orb-game-container .orb-toolbar {
    top: 0.55rem;
    left: 0.55rem;
}

.orb-game-container .orb-tool-btn {
    width: var(--orb-btn-w, clamp(48px, 5vw, 76px));
    padding: var(--orb-btn-pad-y, 0.26rem) var(--orb-btn-pad-x, 0.34rem);
}

.orb-requisitos {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--cinza-200);
}

.orb-requisitos h3 {
    font-size: 0.875rem;
    color: var(--cinza-500);
    margin-bottom: 0.5rem;
}

.orb-requisitos p {
    font-size: 0.75rem;
    color: var(--cinza-400);
}

@media (max-width: 768px) {
    .orb-game-shell {
        margin-left: -0.75rem;
        margin-right: -0.75rem;
    }

    .orb-game-container {
        aspect-ratio: 16 / 9;
        max-height: 78vh;
        min-height: 0;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }

    .orb-stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .orb-stat-value {
        font-size: 1.15rem;
    }

    .orb-save-note,
    .orb-dica {
        font-size: 0.68rem;
    }
}

@media (max-width: 480px) {
    .orb-tool-btn {
        flex: 0 0 auto;
    }

    .orb-game-container {
        max-height: 78vh;
        min-height: 0;
    }

    .orb-dica {
        padding: 0 0.75rem;
    }

    .orb-reset-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (orientation: landscape) and (max-width: 1024px) {
    .orb-game-shell {
        width: 100vw;
        max-width: 100vw;
        margin: 0;
    }

    .orb-game-container.orb-fullscreen-active,
    .orb-game-container:fullscreen,
    .orb-game-container:-webkit-full-screen {
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        min-height: 100vh;
        border-radius: 0;
    }

    .orb-toolbar {
        top: max(0.5rem, env(safe-area-inset-top));
        left: max(0.5rem, env(safe-area-inset-left));
    }

    .orb-game-info {
        position: absolute;
        left: 0;
        right: 0;
        bottom: max(0.75rem, env(safe-area-inset-bottom));
        z-index: 6;
        margin: 0;
        padding: 0 1rem;
        pointer-events: none;
    }

    .orb-save-note {
        position: absolute;
        left: 0;
        right: 0;
        bottom: calc(max(2.6rem, env(safe-area-inset-bottom)) + 1.5rem);
        z-index: 6;
        margin: 0;
        padding: 0 1rem;
        pointer-events: none;
    }

    .orb-como-jogar,
    .orb-requisitos,
    .orb-stats-area {
        display: none;
    }

    .orb-game-container .orb-tool-btn {
        width: var(--orb-btn-w, clamp(46px, 5vw, 70px));
        font-size: var(--orb-btn-font, 0.52rem);
    }
}

@media (orientation: landscape) and (max-width: 1024px) and (max-height: 600px) {
    .orb-game-container.orb-fullscreen-active .orb-toolbar,
    .orb-game-container:fullscreen .orb-toolbar,
    .orb-game-container:-webkit-full-screen .orb-toolbar {
        top: max(0.35rem, env(safe-area-inset-top));
        left: max(0.35rem, env(safe-area-inset-left));
    }
}