/* ===========================
   ADVENTURE.CSS - Kids Adventure Game Page
   Game theme with XP, achievements, character system
   =========================== */

/* --- Game Theme Variables --- */
.page-kids {
    --game-accent: #D4913B;
    --game-accent-light: rgba(212, 145, 59, 0.15);
    --game-bg-start: #2C2418;
    --game-bg-mid: #1F2D1E;
    --game-bg-end: #2A2318;
    --game-card-bg: rgba(255, 253, 249, 0.95);
    --game-text: #3B3228;
    --game-success: #6B8F5E;
}

.page-kids .page-content {
    background: linear-gradient(180deg, var(--game-bg-start), var(--game-bg-mid) 40%, var(--game-bg-end));
    min-height: 100vh;
}

.page-kids .page-content .card {
    background: var(--game-card-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* --- XP Bar (persistent at top) --- */
.xp-bar-container {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #2C2418, #3B3228);
    padding: 10px 14px;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-md);
    color: white;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.xp-bar-avatar {
    flex-shrink: 0;
}
.xp-bar-info {
    flex: 1;
    min-width: 0;
}
.xp-bar-top {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85em;
    margin-bottom: 4px;
}
.xp-bar-name {
    font-weight: 700;
}
.xp-bar-title {
    font-size: 0.85em;
    opacity: 0.7;
}
.xp-bar-level {
    margin-left: auto;
    font-weight: 700;
    color: var(--game-accent);
}
.xp-bar-track {
    height: 10px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.xp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #D4913B, #D4A843);
    border-radius: var(--radius-pill);
    transition: width 0.5s ease;
    box-shadow: 0 0 8px rgba(212, 145, 59, 0.5);
}
.xp-bar-bottom {
    display: flex;
    justify-content: space-between;
    font-size: 0.7em;
    opacity: 0.8;
    margin-top: 2px;
}

/* --- Character Card --- */
.character-card-inner {
    display: flex;
    align-items: center;
    gap: 16px;
}
.character-avatar {
    flex-shrink: 0;
}
.character-info {
    flex: 1;
}
.character-name {
    font-family: var(--font-display);
    font-size: 1.3em;
    color: var(--game-text);
}
.character-title {
    font-weight: 700;
    font-size: 0.95em;
    color: #666;
}
.character-rank {
    font-weight: 700;
    color: var(--game-accent);
    margin-top: 2px;
}
.character-costume {
    font-size: 0.85em;
    color: #888;
}
.character-xp {
    font-weight: 700;
    font-size: 0.9em;
    color: var(--game-accent);
    margin-top: 2px;
}

/* --- Achievement Case --- */
.achievement-count {
    font-family: var(--font-display);
    font-size: 1em;
    color: var(--game-accent);
    margin-bottom: var(--space-sm);
}
.achievement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: var(--space-sm);
}
.achievement-item {
    text-align: center;
    padding: 10px 6px;
    border-radius: var(--radius-md);
    transition: transform 0.2s;
}
.achievement-icon {
    font-size: 1.8em;
}
.achievement-name {
    font-size: 0.65em;
    font-weight: 700;
    margin-top: 2px;
    line-height: 1.2;
    color: #555;
}
.achievement-desc {
    font-size: 0.55em;
    color: #888;
    margin-top: 1px;
}
.achievement-earned {
    background: linear-gradient(135deg, #F5EEE3, #E8D5B7);
    border: 2px solid #D4913B;
    box-shadow: 0 0 8px rgba(212, 145, 59, 0.3);
}
.achievement-earned .achievement-name { color: #5C4033; }
.achievement-locked {
    background: #F0EDE7;
    border: 2px dashed #E6DFD4;
    opacity: 0.5;
}

/* --- Bingo Grid --- */
.bingo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm);
    margin: var(--space-lg) 0;
}

.bingo-cell {
    background: #F5EEE3;
    border-radius: 10px;
    padding: 12px 8px;
    text-align: center;
    font-weight: 600;
    border: 2px solid #E8D5B7;
    min-height: 75px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-user-select: none;
    user-select: none;
}

.bingo-cell:hover {
    transform: scale(1.05);
}

.bingo-cell.marked {
    background: var(--kids-green);
    border-color: #567A4B;
    color: white;
}

.bingo-emoji {
    font-size: 1.6em;
}

.bingo-text {
    font-size: 0.8em;
    margin-top: var(--space-xs);
}

/* --- Animal / Wildlife Cards --- */
.animal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--space-md);
    margin: 15px 0;
}

.animal-card {
    background: white;
    border-radius: 15px;
    padding: var(--space-md);
    text-align: center;
    border: 3px solid #E6DFD4;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-user-select: none;
    user-select: none;
}

.animal-card:hover {
    transform: scale(1.05);
    border-color: var(--game-accent, #D4913B);
}

.animal-card.spotted {
    background: #E5EEDF;
    border-color: #6B8F5E;
}

.animal-emoji {
    font-size: 2.5em;
}

.animal-name {
    font-weight: 700;
    color: #333;
    margin-top: 5px;
    font-size: 0.9em;
}

.animal-points {
    color: var(--game-accent, #D4913B);
    font-weight: 700;
    font-size: 0.85em;
}

/* --- Score Tracker --- */
.score-tracker {
    background: #F0EDE7;
    border-radius: 15px;
    padding: var(--space-lg);
    margin: var(--space-lg) 0;
    text-align: center;
}

.score-display {
    font-family: var(--font-display);
    font-size: 2em;
    color: var(--game-accent, #D4913B);
}

/* --- Joke Boxes --- */
.joke-box {
    background: #F5EEE3;
    border-radius: 15px;
    padding: var(--space-lg);
    margin: 15px 0;
    text-align: center;
}

.joke-box .question {
    font-weight: 700;
    font-size: 1.15em;
    color: #5C4033;
}

.joke-box .answer {
    margin-top: 10px;
    font-style: italic;
    color: #8B7E6A;
}

/* --- Trivia Box --- */
.trivia-box {
    background: var(--kids-gradient);
    color: white;
    border-radius: 15px;
    padding: var(--space-lg);
    margin: 15px 0;
}

.trivia-answer {
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-sm);
    padding: var(--space-md);
    margin-top: 10px;
}

/* --- Reset Button --- */
.reset-btn {
    background: var(--kids-red);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    cursor: pointer;
    margin-top: 15px;
    font-size: 0.9em;
    transition: background 0.2s;
}

.reset-btn:hover {
    background: #C44D3E;
}

/* --- Kid Page: hide itinerary edit-only controls --- */
.page-kids .block-toolbar,
.page-kids .drive-recalc-btn,
.page-kids .mission-edit-btn,
.page-kids .add-section-btn,
.page-kids .add-mission-btn,
.page-kids .add-block-mission-btn,
.page-kids .add-time-btn,
.page-kids .day-move-btns,
.page-kids .maps-link {
    display: none !important;
}

/* --- Kid Inline Missions (missions tied to a specific block) --- */
.kid-inline-missions {
    margin: 4px 0 12px;
    padding-left: 8px;
    border-left: 3px solid rgba(212, 145, 59, 0.15);
}

/* --- Kid-Friendly Block Banners --- */
.kid-drive-banner {
    background: linear-gradient(135deg, #C2703E 0%, #A0522D 100%);
    color: white;
    border-radius: 15px;
    padding: 20px;
    margin: 15px 0;
    text-align: center;
}
.kid-drive-emoji { font-size: 2.5em; }
.kid-drive-title {
    font-family: var(--font-display);
    font-size: 1.5em;
    margin: 4px 0;
}
.kid-drive-route {
    font-size: 1.15em;
    font-weight: 700;
    margin: 8px 0;
}
.kid-drive-arrow { margin: 0 8px; }
.kid-drive-time {
    font-size: 1.05em;
    background: rgba(255,255,255,0.2);
    display: inline-block;
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    margin-top: 8px;
}
.kid-drive-note {
    font-weight: 600;
    margin-top: 8px;
    font-size: 0.95em;
}

.kid-sleep-box {
    background: linear-gradient(135deg, #2C2418 0%, #1F2D1E 100%);
    color: white;
    border-radius: 15px;
    padding: 20px;
    margin: 15px 0;
    text-align: center;
}
.kid-sleep-emojis { font-size: 2em; margin-bottom: 4px; }
.kid-sleep-emojis span { margin: 0 4px; }
.kid-sleep-title {
    font-family: var(--font-display);
    font-size: 1.3em;
}
.kid-sleep-name {
    font-weight: 600;
    margin-top: 4px;
    font-size: 1.1em;
}

.kid-movie-box {
    background: linear-gradient(135deg, #7E6BA8 0%, #5C4D7A 100%);
    color: white;
    border-radius: 15px;
    padding: 20px;
    margin: 15px 0;
    text-align: center;
}
.kid-movie-title {
    font-family: var(--font-display);
    font-size: 1.3em;
    margin: 4px 0;
}
.kid-movie-name { font-size: 1.2em; font-weight: 700; }

.kid-meal-box {
    background: linear-gradient(135deg, #D4913B 0%, #C2703E 100%);
    color: white;
    border-radius: 15px;
    padding: 16px 20px;
    margin: 15px 0;
    text-align: center;
}
.kid-meal-title {
    font-family: var(--font-display);
    font-size: 1.2em;
    margin: 4px 0 8px;
}
.kid-meal-where { font-size: 0.95em; opacity: 0.85; margin-top: 4px; }

.kid-activity-list li { padding: 10px 0 10px 32px; font-size: 1.05em; }

/* --- Bounce Emoji Animation --- */
.bounce-emoji {
    display: inline-block;
    animation: emojiFloat 2s ease-in-out infinite;
}
@keyframes emojiFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* --- Kid Countdown Card --- */
.kid-countdown-card {
    background: var(--kids-gradient);
    color: white;
    text-align: center;
    padding: var(--space-xl);
}
.kid-countdown-emoji { font-size: 3em; margin-bottom: var(--space-sm); }
.kid-countdown-number {
    font-family: var(--font-display);
    font-size: clamp(3rem, 10vw, 5rem);
    line-height: 1;
}
.kid-countdown-text {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 4vw, 1.8rem);
    margin-top: var(--space-sm);
}
.kid-countdown-subtitle {
    font-weight: 700;
    font-size: 1.1em;
    color: var(--kids-yellow);
    margin-top: var(--space-xs);
}
.kid-progress-bar {
    background: rgba(255,255,255,0.2);
    border-radius: var(--radius-pill);
    height: 16px;
    margin: var(--space-md) auto 0;
    max-width: 400px;
    overflow: hidden;
}
.kid-progress-fill {
    height: 100%;
    background: var(--kids-yellow);
    border-radius: var(--radius-pill);
    transition: width 0.5s ease;
}
.kid-progress-label {
    font-weight: 700;
    font-size: 0.95em;
    margin-top: var(--space-xs);
    color: var(--kids-yellow);
}

/* --- Day Status Overlays --- */
.kid-day-today {
    border: 3px solid var(--game-accent, #D4913B) !important;
}
.kid-day-today .day-header-box {
    animation: kidPulse 2s ease-in-out infinite;
}
@keyframes kidPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(212, 145, 59, 0.3); }
    50% { box-shadow: 0 0 20px 4px rgba(212, 145, 59, 0.3); }
}
.kid-day-past { position: relative; }
.kid-day-stamp {
    position: absolute;
    top: 20px;
    right: -10px;
    background: var(--kids-green);
    color: white;
    font-family: var(--font-display);
    font-size: 0.85em;
    padding: 6px 18px;
    border-radius: var(--radius-pill);
    transform: rotate(12deg);
    z-index: 5;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    letter-spacing: 1px;
}
.kid-day-upcoming {
    text-align: center;
    font-family: var(--font-display);
    font-size: 0.9em;
    color: var(--game-accent, #D4913B);
    background: rgba(212, 145, 59, 0.06);
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    margin-bottom: var(--space-sm);
}
.kid-day-future { opacity: 0.75; }
.kid-day-future:hover { opacity: 1; }

/* --- Sticker Collection --- */
.sticker-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: var(--space-md);
}
.sticker-tab {
    flex: 1;
    padding: 10px;
    border: 2px solid #E6DFD4;
    border-radius: var(--radius-md);
    text-align: center;
    font-weight: 700;
    cursor: pointer;
    background: #F0EDE7;
    transition: all 0.2s;
}
.sticker-tab.active {
    border-color: var(--game-accent, #D4913B);
    background: rgba(212, 145, 59, 0.08);
    color: var(--game-accent, #D4913B);
}
.sticker-tab-emoji { font-size: 1.4em; display: block; margin-bottom: 2px; }
.sticker-panel { display: none; }
.sticker-panel.active { display: block; }
.sticker-count {
    font-family: var(--font-display);
    font-size: 1.1em;
    color: var(--game-accent, #D4913B);
    margin-bottom: var(--space-sm);
}
.sticker-category { margin-bottom: var(--space-md); }
.sticker-category-title {
    font-weight: 700;
    font-size: 0.85em;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--space-xs);
}
.sticker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: var(--space-sm);
}
.sticker-item {
    text-align: center;
    padding: var(--space-sm) 4px;
    border-radius: var(--radius-md);
    transition: transform 0.2s;
}
.sticker-emoji { font-size: 1.8em; }
.sticker-label {
    font-size: 0.65em;
    font-weight: 700;
    margin-top: 2px;
    color: #666;
    line-height: 1.2;
}
.sticker-earned {
    background: #F5EEE3;
    border: 2px solid #D4A843;
}
.sticker-earned .sticker-label { color: #333; }
.sticker-awarded {
    background: #E5EEDF;
    border: 2px solid #A4B494;
}
.sticker-awarded .sticker-label { color: #6B8F5E; }
.sticker-locked {
    background: #F0EDE7;
    border: 2px dashed #E6DFD4;
    opacity: 0.5;
}
@keyframes stickerWiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-8deg); }
    75% { transform: rotate(8deg); }
}
.sticker-earned .sticker-emoji,
.sticker-awarded .sticker-emoji {
    animation: stickerWiggle 0.6s ease-in-out;
}

/* --- Parent Award Sticker UI --- */
.award-sticker-btn {
    display: block;
    width: 100%;
    padding: 10px;
    margin-top: var(--space-sm);
    background: var(--kids-green);
    color: white;
    border: none;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 0.9em;
    cursor: pointer;
    transition: background 0.2s;
}
.award-sticker-btn:hover { background: #567A4B; }
.award-sheet {
    display: none;
    margin-top: var(--space-sm);
}
.award-sheet.open { display: block; }
.award-sheet-title {
    font-weight: 700;
    font-size: 0.9em;
    margin-bottom: var(--space-xs);
    color: #555;
}
.award-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: var(--space-sm);
}
.award-option {
    text-align: center;
    padding: 10px 6px;
    border: 2px solid #E6DFD4;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s;
    background: var(--game-card-bg);
}
.award-option:hover {
    border-color: var(--kids-green);
    background: #E5EEDF;
    transform: scale(1.05);
}
.award-option-emoji { font-size: 1.6em; display: block; }
.award-option-label { font-size: 0.7em; font-weight: 600; color: #555; }

/* --- Test Mode Banner --- */
.test-mode-banner {
    background: #F5EEE3;
    border: 2px solid #D4913B;
    border-radius: var(--radius-md);
    padding: 10px 16px;
    margin-bottom: var(--space-md);
    font-weight: 700;
    font-size: 0.9em;
    color: #A0522D;
    text-align: center;
}
.test-mode-banner a {
    color: #5B8FA8;
    margin-left: 8px;
}

/* --- Undo Sticker (parent) --- */
[data-undo-sticker] {
    cursor: pointer;
    position: relative;
}
[data-undo-sticker]:hover {
    opacity: 0.8;
}
.sticker-undo-hint {
    font-size: 0.55em;
    color: #999;
    margin-top: 1px;
}

/* --- Kids Headline Subtitle --- */
.kids-headline-sub {
    font-style: italic;
    font-size: 0.95em;
    color: var(--game-accent, #D4913B);
    margin: -0.3em 0 0.5em 0;
    text-align: center;
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    .bounce-emoji,
    .kid-day-today .day-header-box,
    .sticker-earned .sticker-emoji,
    .sticker-awarded .sticker-emoji {
        animation: none;
    }
    .kid-day-future { opacity: 1; }
    .xp-bar-fill { transition: none; }
    .kid-progress-fill { transition: none; }
}

/* --- Responsive: Bingo & Animal Grids --- */
@media (max-width: 600px) {
    .bingo-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .animal-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media print {
    .score-tracker,
    .reset-btn {
        display: none;
    }

    .bingo-cell,
    .animal-card {
        border: 1px solid #ccc;
    }
}