/* ==========================================================================
   CENAS — fundo full-bleed + camada de hotspots
   (o case.json posiciona os hotspots em % 0–100 relativo a #game-scene;
    hotspot.js também aceita px se algum valor passar de 100)
   ========================================================================== */

/* Fundo da cena: cobre toda a área do jogo. O background-color é o fallback
   visível enquanto o PNG carrega — ou se o asset faltar (nunca mais tela
   preta "fantasma" durante o carregamento). */
.scene-background {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #171310;
    animation: sceneFadeIn 0.5s ease-out;
}

@keyframes sceneFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Vinheta (chiaroscuro do moodboard): escurece as bordas da cena para puxar o
   olhar ao centro iluminado. Fica DENTRO do fundo (z-index 0), portanto atrás
   da camada de hotspots (z-index 1) — não bloqueia nem escurece os cliques. */
.scene-background::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0) 42%,
        rgba(0, 0, 0, 0.35) 78%,
        rgba(0, 0, 0, 0.6) 100%
    );
}

/* Camada de hotspots acima do fundo. position/left/width/height vêm aplicados
   inline pelo hotspot.js a partir do `rect` do case.json. Toda a aparência
   (borda, halo, rótulo) vive aqui — âmbar de lampião, sem cores de debug. */
.hotspot {
    position: absolute;
    z-index: 1;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

/* Hover/foco: filete âmbar + halo suave (o "feedback de hotspot" do moodboard). */
.hotspot:hover,
.hotspot--hover {
    border-color: rgba(217, 183, 91, 0.75);
    background-color: rgba(217, 183, 91, 0.06);
    box-shadow: 0 0 14px rgba(217, 183, 91, 0.28);
}

.hotspot:focus-visible {
    outline: 2px solid var(--brass-bright, #d9b75b);
    outline-offset: 2px;
}

/* Pulso curto ao clicar. */
.hotspot--active {
    border-color: var(--brass-bright, #d9b75b) !important;
    box-shadow: 0 0 20px rgba(217, 183, 91, 0.55) !important;
}

/* Hotspot esgotado/bloqueado por stateCondition: inerte e esmaecido. */
.hotspot.disabled {
    cursor: not-allowed;
    opacity: 0.45;
    filter: grayscale(0.45);
}

/* Cursor por TIPO de interação (§42): dá a "linguagem" do point-and-click —
   olho = examinar, alvo = usar, setas = saída, mão = interagir. */
.hotspot[data-cursor="eye"] { cursor: zoom-in; }
.hotspot[data-cursor="use"] { cursor: crosshair; }
.hotspot[data-cursor="move"] { cursor: move; }
.hotspot[data-cursor="interact"] { cursor: pointer; }

/* SAÍDAS SEM PORTA NA ARTE: seta/chevron de borda padronizado. A direção vem
   do dataset (left | right | forward), calculado pela posição do hotspot. Fica
   sempre visível em opacidade baixa e acende no hover/foco. */
.hotspot--exit::after {
    content: '›';
    position: absolute;
    top: 50%;
    right: 5px;
    width: 1.35rem;
    height: 1.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.55rem;
    line-height: 1;
    color: rgba(217, 183, 91, 0.85);
    background: rgba(13, 11, 9, 0.48);
    border: 1px solid rgba(217, 183, 91, 0.28);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.65);
    pointer-events: none;
    opacity: 0.55;
    transition: opacity 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
}

.hotspot--exit[data-exit-dir="left"]::after {
    content: '‹';
    right: auto;
    left: 5px;
}

.hotspot--exit[data-exit-dir="forward"]::after {
    content: '→';
    font-size: 1.15rem;
}

.hotspot--exit:hover::after,
.hotspot--exit.hotspot--hover::after,
.hotspot--exit:focus-visible::after {
    opacity: 1;
    background: rgba(13, 11, 9, 0.78);
    transform: translateY(-50%) scale(1.08);
}

.hotspot--exit.disabled::after {
    opacity: 0.18;
}

.hotspot.disabled:hover,
.hotspot.disabled.hotspot--hover {
    border-color: transparent;
    background-color: transparent;
    box-shadow: none;
}

/* Rótulo do hotspot: oculto por padrão, revelado no hover/foco (estilo MYST). */
.hotspot-label {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 5px;
    padding: 0.2rem 0.55rem;
    font-family: 'Crimson Pro', serif;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    white-space: nowrap;
    color: var(--parchment, #f8f4e3);
    background: rgba(13, 11, 9, 0.92);
    border: 1px solid var(--brass, #8c6f3f);
    border-radius: 3px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.hotspot:hover .hotspot-label,
.hotspot--hover .hotspot-label,
.hotspot:focus-visible .hotspot-label {
    opacity: 1;
    transform: translateY(0);
}

.hotspot.disabled .hotspot-label {
    color: var(--muted, #6b6b6b);
    border-color: var(--clue-line, #3a322a);
}

@media (prefers-reduced-motion: reduce) {
    .hotspot,
    .hotspot-label,
    .hotspot--exit::after {
        transition: none;
    }
}