/* ==========================================================================
   KIBO DOCES & SABORES - TEMA CLARO, FOTO OFICIAL KIBO 258 E 3 ESTRELAS
   Design Alegre, Trilha Conectada por Mocambique e HUD com Estrelas
   ========================================================================== */

:root {
    --candy-gold: #FFB300;
    --candy-orange: #FF7043;
    --candy-red: #FF5252;
    --candy-green: #4CAF50;
    --candy-purple: #AB47BC;
    --candy-blue: #29B6F6;
    --candy-teal: #26A69A;
    --earth-red: #C0392B;
    --earth-sand: #F39C12;

    --bg-sky: linear-gradient(180deg, #E1F5FE 0%, #FFF8E1 50%, #E8F5E9 100%);
    --bg-board: #FFFFFF;
    --card-light: #FFFFFF;
    --card-shadow: 0 10px 25px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.04);

    --text-dark: #2C3E50;
    --text-muted: #7F8C8D;
    --text-highlight: #D35400;

    --font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-full: 9999px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

body {
    background: radial-gradient(circle at top, #B3E5FC 0%, #E1F5FE 60%, #BBDEFB 100%);
    font-family: var(--font-family);
    color: var(--text-dark);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
    padding: 8px;
}

/* Simulador de Telemovel */
.phone-simulator-container {
    width: 100%;
    max-width: 460px;
    height: 95vh;
    max-height: 880px;
    background: #FFFFFF;
    border-radius: 40px;
    border: 6px solid #FFFFFF;
    box-shadow: 0 20px 50px rgba(41, 128, 185, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}



/* Ecras do Jogo */
.game-screen {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    position: relative;
    background: var(--bg-sky);
}

.game-screen.hidden {
    display: none !important;
}

/* ==========================================================================
   1. ECRA INICIAL (HOME) - TITULO LIMPO E FOTO OFICIAL DO KIBO 258
   ========================================================================== */
.home-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    text-align: center;
    padding: 20px 20px 24px 20px;
    background: radial-gradient(circle at center top, #FFFFFF 0%, #E1F5FE 100%);
}

.home-clean-title {
    font-size: 28px;
    font-weight: 900;
    color: #D35400;
    text-shadow: 0 2px 0 #FFF, 0 4px 12px rgba(211, 84, 0, 0.18);
    letter-spacing: 0.5px;
    margin-top: 4px;
    line-height: 1.15;
}

.home-hero-illustration {
    width: 100%;
    max-width: 260px;
    height: 250px;
    margin: 4px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.home-kibo-hero-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.15));
    transition: transform 0.3s ease;
}

.home-kibo-hero-img:hover {
    transform: scale(1.04);
}

.home-menu-buttons {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 320px;
}

.btn-candy-play {
    background: linear-gradient(180deg, #FFB300 0%, #F57C00 100%);
    color: #FFFFFF;
    font-weight: 900;
    font-size: 20px;
    padding: 14px 28px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    box-shadow: 0 6px 0 #E65100, 0 12px 20px rgba(245, 124, 0, 0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.btn-candy-play:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #E65100, 0 6px 10px rgba(245, 124, 0, 0.3);
}

.btn-candy-options {
    background: linear-gradient(180deg, #29B6F6 0%, #0288D1 100%);
    color: #FFFFFF;
    font-weight: 800;
    font-size: 16px;
    padding: 11px 24px;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    box-shadow: 0 5px 0 #01579B, 0 8px 16px rgba(2, 136, 209, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.btn-candy-options:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #01579B;
}

.btn-candy-exit {
    background: linear-gradient(180deg, #FF7043 0%, #D84315 100%);
    color: #FFFFFF;
    font-weight: 800;
    font-size: 15px;
    padding: 11px 24px;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    box-shadow: 0 4px 0 #BF360C, 0 6px 14px rgba(216, 67, 21, 0.3);
    text-transform: uppercase;
    transition: transform 0.1s ease;
}

.btn-candy-exit:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #BF360C;
}

/* ==========================================================================
   2. MAPA DE TRILHA CONECTADA
   ========================================================================== */
.map-screen-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.map-top-header {
    background: #FFFFFF;
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    z-index: 20;
}

.btn-map-nav {
    background: #ECEFF1;
    border: none;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    font-weight: 800;
    font-size: 12px;
    color: #37474F;
    cursor: pointer;
}

.map-stars-badge {
    background: linear-gradient(135deg, #FFF8E1, #FFECB3);
    border: 2px solid #FFD54F;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-weight: 900;
    font-size: 13px;
    color: #F57F17;
    box-shadow: 0 2px 6px rgba(245, 127, 23, 0.2);
}

.map-trail-scroll-area {
    flex: 1;
    overflow-y: auto;
    padding: 30px 20px 100px 20px;
    position: relative;
    background: linear-gradient(180deg, #E0F7FA 0%, #FFFDE7 25%, #FFF3E0 50%, #E8F5E9 75%, #E1F5FE 100%);
}

.map-trail-svg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.trail-steps-container {
    display: flex;
    flex-direction: column-reverse;
    gap: 48px;
    position: relative;
    z-index: 5;
    padding: 20px 0;
}

.trail-step-row {
    display: flex;
    align-items: center;
    position: relative;
}

.trail-step-row.pos-left { justify-content: flex-start; padding-left: 30px; }
.trail-step-row.pos-center { justify-content: center; }
.trail-step-row.pos-right { justify-content: flex-end; padding-right: 30px; }

.level-pin-button {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
    border: 4px solid #FFFFFF;
    transition: transform 0.15s ease;
    z-index: 6;
}

.level-pin-button.unlocked {
    background: linear-gradient(180deg, #FFB300 0%, #F57C00 100%);
    box-shadow: 0 6px 0 #E65100, 0 10px 18px rgba(245, 124, 0, 0.4);
    color: #FFFFFF;
}

.level-pin-button.unlocked:active {
    transform: scale(0.92) translateY(4px);
    box-shadow: 0 2px 0 #E65100;
}

.level-pin-button.current {
    background: linear-gradient(180deg, #4CAF50 0%, #2E7D32 100%);
    box-shadow: 0 6px 0 #1B5E20, 0 10px 20px rgba(76, 175, 80, 0.5);
    animation: pinPulse 1.8s infinite ease-in-out;
}

.level-pin-button.locked {
    background: linear-gradient(180deg, #CFD8DC 0%, #90A4AE 100%);
    box-shadow: 0 5px 0 #607D8B;
    color: #ECEFF1;
    cursor: not-allowed;
    filter: grayscale(0.6);
}

.level-pin-num {
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
}

.level-pin-stars {
    display: flex;
    gap: 1px;
    font-size: 10px;
    margin-top: 2px;
}

.level-pin-stars span.filled { color: #FFEB3B; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.level-pin-stars span.empty { color: rgba(255, 255, 255, 0.35); }

.province-milestone-tag {
    position: absolute;
    top: -26px;
    background: #FFFFFF;
    border: 2px solid var(--candy-teal);
    color: var(--candy-teal);
    padding: 3px 12px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 800;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
    white-space: nowrap;
    z-index: 10;
}

.kibo-trail-marker {
    position: absolute;
    top: -38px;
    background: #D35400;
    color: #FFF;
    font-size: 9px;
    font-weight: 900;
    padding: 2px 10px 2px 4px;
    border-radius: var(--radius-full);
    box-shadow: 0 4px 10px rgba(211, 84, 0, 0.45);
    border: 2px solid #FFF;
    animation: markerBounce 1.2s infinite ease-in-out;
    z-index: 12;
    display: flex;
    align-items: center;
    gap: 4px;
}

.kibo-avatar-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    background: #FFF;
}

/* ==========================================================================
   3. INTERFACE DE JOGO (HUD ULTRA-ESTREITO & MEDIDOR DE 3 ESTRELAS)
   ========================================================================== */
.game-play-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 8px 12px;
    background: radial-gradient(circle at center, #FFFFFF 0%, #F1F8E9 100%);
}

.slim-hud-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #FFFFFF;
    border-radius: 18px;
    padding: 6px 12px;
    box-shadow: var(--card-shadow);
    margin-bottom: 6px;
    gap: 8px;
}

.hud-moves-badge {
    background: linear-gradient(135deg, #FF7043, #D84315);
    color: #FFFFFF;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(216, 67, 21, 0.35);
    flex-shrink: 0;
}

.hud-moves-badge span {
    font-size: 7px;
    font-weight: 800;
    text-transform: uppercase;
}

.hud-moves-badge strong {
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
}

.hud-goal-capsule {
    flex: 1;
    background: #FFF8E1;
    border: 1px solid #FFE082;
    border-radius: var(--radius-full);
    padding: 4px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
}

.hud-goal-capsule strong {
    color: #E65100;
    font-weight: 900;
}

.hud-goal-capsule span {
    color: #795548;
    font-weight: 700;
}

.btn-hud-pause {
    background: #ECEFF1;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-weight: 900;
    color: #455A64;
    cursor: pointer;
    font-size: 11px;
}

/* Medidor de 3 Estrelas no HUD */
.hud-stars-meter-card {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 4px 8px;
    margin-bottom: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.hud-stars-track {
    position: relative;
    width: 100%;
    height: 8px;
    background: #ECEFF1;
    border-radius: 9999px;
    overflow: visible;
}

.hud-stars-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #FFCA28, #FF9800);
    border-radius: 9999px;
    transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.hud-star-notch {
    position: absolute;
    top: -6px;
    font-size: 13px;
    color: #CFD8DC;
    transform: translateX(-50%);
    transition: color 0.2s ease, transform 0.2s ease;
}

.hud-star-notch.achieved {
    color: #FFC107;
    text-shadow: 0 0 6px rgba(255, 193, 7, 0.7);
    transform: translateX(-50%) scale(1.2);
}

.hud-star-notch.notch-1 { left: 33%; }
.hud-star-notch.notch-2 { left: 66%; }
.hud-star-notch.notch-3 { left: 98%; }

.slim-sub-hud {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4px;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 800;
    color: #546E7A;
}

.sub-hud-score {
    color: #2E7D32;
}

/* Painel de Soletração Destacado no HUD */
.hud-spelling-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #E0F2F1, #B2DFDB);
    border: 1.5px solid #4DB6AC;
    border-radius: 14px;
    padding: 5px 12px;
    margin-bottom: 6px;
    box-shadow: 0 2px 8px rgba(0, 150, 136, 0.15);
}

.spelling-panel-label {
    font-size: 10px;
    font-weight: 900;
    color: #00695C;
    letter-spacing: 0.8px;
}

.hud-spelling-word-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

.hud-letter-pill {
    width: 24px;
    height: 24px;
    background: #FFFFFF;
    color: #90A4AE;
    border: 2px solid #CFD8DC;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 900;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hud-letter-pill.filled {
    background: linear-gradient(135deg, #00897B, #004D40);
    color: #FFFFFF;
    border-color: #004D40;
    box-shadow: 0 0 10px rgba(0, 137, 123, 0.6);
    transform: scale(1.15);
}

/* Banner Flutuante de Missão de Soletração no Início */
.spelling-mission-banner {
    position: absolute;
    top: 65px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 380px;
    background: linear-gradient(135deg, #00838F, #004D40);
    color: #FFFFFF;
    border-radius: 20px;
    padding: 14px 18px;
    text-align: center;
    box-shadow: 0 12px 30px rgba(0, 77, 64, 0.45);
    border: 3px solid #80CBC4;
    z-index: 90;
    animation: bannerDropIn 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.spelling-mission-banner.hidden,
.preview-spelling-box.hidden,
.hud-spelling-panel.hidden {
    display: none !important;
}

.mission-banner-badge {
    background: #FFD54F;
    color: #E65100;
    font-size: 10px;
    font-weight: 900;
    padding: 2px 10px;
    border-radius: 9999px;
    display: inline-block;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.spelling-mission-banner p {
    font-size: 12px;
    color: #E0F2F1;
    margin: 2px 0;
}

.spelling-mission-banner h3 {
    font-size: 26px;
    font-weight: 900;
    color: #FFF;
    letter-spacing: 2px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    margin: 4px 0;
}

.spelling-mission-banner small {
    font-size: 10px;
    color: #B2DFDB;
    font-weight: 700;
}

/* Tabuleiro Match-3 */
.board-container-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #FFFFFF;
    border-radius: 22px;
    padding: 6px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08), inset 0 2px 6px rgba(0, 0, 0, 0.03);
    border: 3px solid #E0E0E0;
    overflow: hidden;
    margin-top: auto;
    margin-bottom: auto;
}

.board-grid {
    display: grid;
    width: 100%;
    height: 100%;
    gap: 6px;
}

.board-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 15;
}

.board-tile {
    position: relative;
    border-radius: 12px;
    background: #F8F9FA;
    border: 1px solid #ECEFF1;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.04);
}

.tile-selected {
    background: #FFF9C4 !important;
    border: 2px solid #FBC02D !important;
    box-shadow: 0 0 12px rgba(251, 192, 45, 0.7);
    transform: scale(1.06);
    z-index: 8;
}

.tile-hint-pulse {
    animation: hintPulse 1.2s infinite ease-in-out;
    border: 2px solid #29B6F6 !important;
    z-index: 7;
}

.tile-svg {
    width: 80%;
    height: 80%;
}

.tile-price-tag {
    position: absolute;
    bottom: 2px;
    right: 2px;
    background: rgba(44, 62, 80, 0.75);
    color: #FFEB3B;
    font-size: 8px;
    font-weight: 900;
    padding: 1px 3px;
    border-radius: 4px;
}

/* Emblema Circular Luminoso de Letra no Doce */
.tile-letter-badge {
    position: absolute;
    top: -2px;
    left: -2px;
    background: linear-gradient(135deg, #00ACC1, #006064);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 900;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #FFFFFF;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
    z-index: 10;
    animation: letterBadgePulse 1.8s infinite ease-in-out;
}

/* Caixa de Desafio de Soletração na Prévia */
.preview-spelling-box {
    background: #E0F7FA;
    border: 1.5px solid #4DD0E1;
    border-radius: 14px;
    padding: 10px 12px;
    margin-bottom: 12px;
    text-align: center;
    color: #006064;
}

.spelling-box-title {
    font-size: 10px;
    font-weight: 900;
    background: #00838F;
    color: #FFF;
    padding: 2px 10px;
    border-radius: 9999px;
    display: inline-block;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.preview-spelling-box p {
    font-size: 13px;
    margin: 3px 0;
    color: #004D40;
}

.preview-spelling-box strong {
    color: #D35400;
    letter-spacing: 1px;
    font-size: 15px;
}

.preview-spelling-box small {
    font-size: 11px;
    color: #00695C;
    display: block;
}

.special-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--candy-red);
    color: #FFF;
    font-size: 7px;
    font-weight: 900;
    padding: 1px 3px;
    border-radius: 3px;
}

.slim-bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
}

.btn-booster-snack {
    background: linear-gradient(180deg, #FFB300, #F57C00);
    border: none;
    color: #FFF;
    font-weight: 800;
    font-size: 12px;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(245, 124, 0, 0.35);
}

/* ==========================================================================
   4. MODAIS
   ========================================================================== */
.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(44, 62, 80, 0.55);
    backdrop-filter: blur(6px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    z-index: 100;
}

.modal-overlay.hidden {
    display: none !important;
}

.modal-box-candy {
    width: 100%;
    max-width: 380px;
    background: #FFFFFF;
    border-radius: 28px;
    padding: 22px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
    border: 4px solid #FFFFFF;
}

.victory-kibo-wrapper {
    width: 100%;
    height: 110px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 6px;
}

.victory-kibo-img {
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.15));
}

.modal-title-candy {
    font-size: 22px;
    font-weight: 900;
    color: #D35400;
    margin-bottom: 6px;
}

.modal-stars-row {
    font-size: 34px;
    margin: 8px 0;
}

.modal-stars-row span.filled { color: #FFC107; text-shadow: 0 2px 6px rgba(255, 193, 7, 0.5); }
.modal-stars-row span.empty { color: #CFD8DC; }

.modal-summary-box {
    background: #F8F9FA;
    border-radius: 16px;
    padding: 12px;
    margin: 10px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.modal-summary-box span {
    font-size: 10px;
    color: #78909C;
    font-weight: 800;
    text-transform: uppercase;
    display: block;
}

.modal-summary-box strong {
    font-size: 18px;
    color: #2C3E50;
    font-weight: 900;
}

.preview-star-hint-box {
    background: #FFF8E1;
    border: 1px solid #FFE082;
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 11px;
    color: #795548;
    margin-bottom: 12px;
    text-align: left;
}

.star-hint-label {
    font-weight: 900;
    color: #E65100;
    display: block;
    margin-bottom: 2px;
}

.victory-bonus-note {
    background: #E8F5E9;
    border: 1px solid #A5D6A7;
    color: #2E7D32;
    font-size: 11px;
    font-weight: 800;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    margin-bottom: 10px;
}

.modal-btn-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.options-setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #ECEFF1;
    font-size: 13px;
    font-weight: 700;
}

.btn-toggle-switch {
    background: #4CAF50;
    color: #FFF;
    border: none;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-weight: 800;
    font-size: 11px;
    cursor: pointer;
}

.btn-toggle-switch.off {
    background: #B0BEC5;
}

.floating-praise-toast {
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #FFB300, #FF5252);
    color: #FFFFFF;
    font-weight: 900;
    font-size: 19px;
    padding: 10px 24px;
    border-radius: var(--radius-full);
    box-shadow: 0 8px 24px rgba(255, 82, 82, 0.4);
    z-index: 200;
    animation: toastPop 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    pointer-events: none;
}