/* =====================================================
   GUIA DE VISITAÇÃO — CSS PRINCIPAL
   Unificado (landscape + portrait) com media queries
   ===================================================== */

@font-face {
    font-family: 'ComicStory';
    src: url('../assets/fontes/pooh.ttf') format('truetype');
}

/* ===== BASE ===== */
*, *::before, *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'ComicStory', sans-serif;
    background: #1a1a2e;
    overflow: hidden;
}

/* ===== HUD — barra de progresso fixa no topo ===== */
#hud-top {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 52px;
    background: rgba(255, 183, 0, 0.93);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: 3px solid #a1853d;
    display: flex;
    align-items: center;
    padding: 0 10px;
    gap: 10px;
    z-index: 500;
}

#hud-logo {
    height: 38px;
    width: auto;
    flex-shrink: 0;
}

#progress-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

#progress-text {
    font-family: 'ComicStory', sans-serif;
    font-size: 13px;
    color: #fff;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.35);
    white-space: nowrap;
}

#progress-bar-track {
    width: 100%;
    max-width: 280px;
    height: 11px;
    background: rgba(255,255,255,0.4);
    border-radius: 20px;
    border: 2px solid rgba(255,255,255,0.65);
    overflow: hidden;
}

#progress-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #4a8c00, #80c000);
    border-radius: 20px;
    transition: width 0.6s cubic-bezier(.4,0,.2,1);
}

#hud-fivo-link { flex-shrink: 0; }

#hud-fivo {
    height: 36px;
    width: auto;
}

/* ===== MAPA ===== */
#img_mapa {
    position: absolute;
    top: 0; left: 0;
    z-index: 0;
}

#img_mapa_cent {
    position: absolute;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    background-repeat: no-repeat;
}

/* ===== ÍCONES DO MAPA ===== */
#images img {
    position: absolute;
    background: none;
    border: none;
    outline: none;
    overflow: hidden;
    z-index: 1;
    transition: transform 0.25s ease, filter 0.4s ease;
}

/* Ícone já visitado — brilho verde suave */
#images img.visited {
    filter: drop-shadow(0 0 6px rgba(80, 200, 80, 0.85)) brightness(1.08);
}

/* Próximo ícone a encontrar — pulsa em dourado */
#images img.proxima-pista {
    animation: pulse-proxima 1.6s ease-in-out infinite;
    z-index: 20 !important;
}

@keyframes pulse-proxima {
    0%, 100% {
        filter: drop-shadow(0 0 5px rgba(255, 220, 0, 0.5)) brightness(1.05);
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 18px rgba(255, 220, 0, 1.0)) brightness(1.22);
        transform: scale(1.08);
    }
}

/* Posicionamento landscape */
#entrada    { top: 70vh; left:  2vw; width: 13%; height: 26%; }
#horta      { top: 21vh; left: 32vw; width: 13%; height: 23%; z-index: 2; }
#estatua    { top: 56vh; left: 12vw; width:  5%; height: 25%; z-index: 4; }
#biblioteca { top: 45vh; left: 52vw; width: 20%; height: 40%; }
#horto      { top: 56px; left: 84vw; width: 15%; height: 30%; }
#museu      { top: 26vh; left:  2vw; width:  8%; height: 16%; z-index: 4; }
#central    { top: 29vh; left:  4vw; width: 25%; height: 27%; z-index: 3; }
#novo       { top: 30vh; left: 50vw; width: 20%; height: 20%; z-index: 1; }
#essa       { top: 25vh; left: 70vw; width: 25%; height: 20%; z-index: 2; }
#galeria    { top: 24vh; left: 21vw; width:  8%; height: 16%; z-index: 3; }
#clinica    { top: 64vh; left: 36vw; width: 15%; height: 30%; z-index: 3; }
#musica     { top: 44vh; left: 31vw; width: 18%; height: 22%; z-index: 2; }
#oficina    { top: 65vh; left: 18vw; width: 15%; height: 30%; }
#parque     { top: 44vh; left: 73vw; width: 15%; height: 25%; z-index: 2; }
#etsa       { top: calc(7vh + 52px); left: 61vw; width: 20%; height: 20%; z-index: 1; }

/* ===== HINT DE SCROLL (mobile) ===== */
#scroll-hint {
    position: fixed;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-family: 'ComicStory', sans-serif;
    font-size: 13px;
    padding: 6px 16px;
    border-radius: 20px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s;
    z-index: 600;
    white-space: nowrap;
}
#scroll-hint.visible { opacity: 1; }

/* ===== OVERLAYS GENÉRICOS ===== */
.game-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.62);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 800;
    padding: 16px;
    overflow-y: auto;
}

.game-overlay.hidden {
    display: none;
}

/* ===== CARD BASE ===== */
.overlay-card {
    background: #ffb700;
    border: 4px solid #a1853d;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.38);
    padding: 24px 28px;
    font-family: 'ComicStory', sans-serif;
    color: #fff;
    max-height: 92vh;
    overflow-y: auto;
    width: 100%;
    max-width: min(680px, 94vw);
    position: relative;
    text-align: center;
}

/* ===== BOAS-VINDAS ===== */
.welcome-logo {
    width: 72px;
    height: auto;
    border-radius: 50%;
    border: 3px solid #fff;
    margin-bottom: 6px;
}

.welcome-card h2 {
    margin: 4px 0 12px;
    font-size: 1.45rem;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

.welcome-card p {
    font-size: 0.92rem;
    margin: 8px 0;
    text-align: left;
    line-height: 1.55;
}

.welcome-dica {
    background: rgba(255,255,255,0.2);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 0.88rem !important;
}

/* ===== MODAL DE LOCAL ===== */
.modal-card {
    text-align: left;
    max-width: min(720px, 96vw);
}

.modal-card h2 {
    margin: 0 0 12px;
    font-size: 1.35rem;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.25);
    padding-right: 30px;
}

.modal-foto {
    display: block;
    width: 100%;
    max-height: 280px;
    object-fit: cover;
    border-radius: 12px;
    border: 3px solid #fff;
    margin-bottom: 12px;
}

.modal-descricao {
    margin: 0 0 10px;
    font-size: 1rem;
    line-height: 1.55;
    color: #fff;
}

.modal-descricao-completa {
    background: rgba(255,255,255,0.18);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
}

.modal-descricao-completa p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #fff;
}

/* ===== PISTA ===== */
.pista-reveal {
    background: rgba(255,255,255,0.22);
    border-left: 4px solid #fff;
    border-radius: 10px;
    padding: 10px 12px;
    margin-top: 10px;
    animation: fadeIn 0.4s ease;
}

.pista-header {
    font-weight: bold;
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.pista-texto {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== AÇÕES DO MODAL ===== */
#modal-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.btn-action {
    font-family: 'ComicStory', sans-serif;
    font-size: 0.88rem;
    padding: 7px 14px;
    border-radius: 10px;
    border: 2px solid;
    cursor: pointer;
    font-weight: bold;
    transition: opacity 0.2s, transform 0.15s;
    flex: 1;
    min-width: 110px;
}

.btn-action:hover { opacity: 0.85; transform: scale(1.03); }

.btn-saiba-mais {
    background: #0077ae;
    border-color: #005580;
    color: #fff;
}

.btn-pista {
    background: #1aae00;
    border-color: #0a8000;
    color: #fff;
}

.btn-tesouro {
    background: #c47c00 !important;
    border-color: #8a5600 !important;
    animation: pulse-gold 1.2s ease-in-out infinite;
}

@keyframes pulse-gold {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,200,0,0.6); }
    50%       { box-shadow: 0 0 0 8px rgba(255,200,0,0); }
}

.btn-modal-close {
    position: absolute;
    top: 10px; right: 12px;
    background: rgba(208,48,30,0.85);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 30px; height: 30px;
    font-size: 14px;
    font-family: 'ComicStory', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 10;
    padding: 0;
}
.btn-modal-close:hover { background: #fe7c7a; }

/* ===== BOTÃO PRIMÁRIO ===== */
.btn-primary-game {
    font-family: 'ComicStory', sans-serif;
    background: #0077ae;
    border: 3px solid #005580;
    color: #fff;
    font-size: 1rem;
    padding: 10px 28px;
    border-radius: 14px;
    cursor: pointer;
    margin-top: 14px;
    font-weight: bold;
    transition: opacity 0.2s, transform 0.15s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.btn-primary-game:hover { opacity: 0.88; transform: scale(1.04); }

/* ===== VITÓRIA ===== */
.victory-card { max-width: 480px; }

.victory-card h2 {
    margin: 12px 0 8px;
    font-size: 1.25rem;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

.victory-card p {
    font-size: 0.92rem;
    line-height: 1.5;
}

#victory-parabens {
    width: 70%;
    max-width: 220px;
    height: auto;
    display: block;
    margin: 0 auto 4px;
}

#victory-medalha {
    width: 80px;
    height: auto;
    display: block;
    margin: 0 auto 8px;
    animation: float 2s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-10px); }
}

#victory-stars {
    font-size: 2rem;
    letter-spacing: 6px;
    margin: 8px 0;
    animation: fadeIn 0.8s ease;
}

/* ===== HIDDEN ===== */
.hidden { display: none !important; }

/* ============================================================
   PORTRAIT / MOBILE — mapa scrollável horizontalmente
   ============================================================ */
@media (orientation: portrait) {
    body {
        overflow-x: auto;
        overflow-y: hidden;
    }

    #img_mapa_cent {
        width: 400vw;
        height: 100vh;
    }

    /* HUD reduzido no mobile */
    #hud-top     { height: 46px; gap: 7px; padding: 0 8px; }
    #hud-logo    { height: 30px; }
    #hud-fivo    { height: 26px; }
    #progress-text    { font-size: 11px; }
    #progress-bar-track { height: 9px; }

    /* Reposicionamento dos ícones no portrait */
    #entrada    { top: 70vh; left:   5vw; width: 52%; height: 26%; }
    #estatua    { top: 56vh; left:  46vw; width: 20%; height: 25%; z-index: 4; }
    #horta      { top: 22vh; left: 124vw; width: 46%; height: 23%; z-index: 2; }
    #biblioteca { top: 45vh; left: 207vw; width: 80%; height: 40%; }
    #horto      { top: 50px; left: 343vw; width: 50%; height: 30%; }
    #museu      { top: 26vh; left:  15vw; width: 32%; height: 16%; z-index: 4; }
    #central    { top: 29vh; left:  24vw; width: 90%; height: 27%; z-index: 3; }
    #novo       { top: 30vh; left: 188vw; width: 90%; height: 20%; z-index: 1; }
    #essa       { top: 24vh; left: 277vw; width: 95%; height: 20%; z-index: 2; }
    #galeria    { top: 24vh; left:  84vw; width: 32%; height: 16%; z-index: 3; }
    #clinica    { top: 64vh; left: 144vw; width: 50%; height: 30%; z-index: 3; }
    #musica     { top: 44vh; left: 117vw; width: 70%; height: 22%; z-index: 2; }
    #oficina    { top: 65vh; left:  72vw; width: 60%; height: 30%; }
    #parque     { top: 44vh; left: 292vw; width: 60%; height: 25%; z-index: 2; }
    #etsa       { top: calc(7vh + 46px); left: 244vw; width: 80%; height: 20%; z-index: 1; }

    /* Modal vira bottom-sheet */
    #location-modal.game-overlay {
        align-items: flex-end;
        padding: 0;
    }
    #location-modal .overlay-card {
        max-width: 100%;
        width: 100%;
        border-radius: 20px 20px 0 0;
        max-height: 85vh;
        border-bottom: none;
        padding: 18px 18px 24px;
    }

    .modal-foto    { max-height: 200px; }
    .welcome-card  { padding: 16px 16px 20px; }
    .welcome-card h2 { font-size: 1.2rem; }
    .welcome-logo  { width: 54px; }
}

/* ============================================================
   LANDSCAPE PEQUENO (celular deitado)
   ============================================================ */
@media (orientation: landscape) and (max-height: 500px) {
    #hud-top       { height: 40px; }
    #hud-logo      { height: 26px; }
    #hud-fivo      { height: 22px; }
    #progress-text { font-size: 11px; }

    .overlay-card   { padding: 12px 16px; }
    .modal-foto     { max-height: 130px; }
    .modal-card h2  { font-size: 1.05rem; }
    .modal-descricao { font-size: 0.88rem; }
    .btn-action     { font-size: 0.82rem; padding: 5px 10px; }
}