/* ============================================
   FOR ALYONA - Main Stylesheet
   ============================================ */

/* Fonts */
@font-face {
    font-family: 'Lalezar';
    src: url('../fonts/Lalezar/Lalezar-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Crafty Girls';
    src: url('../fonts/Crafty_Girls/CraftyGirls-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* ============================================
   CSS Variables
   ============================================ */
:root {
    --color-pink-bg: #FBC6DD;
    --color-pink-light: #FFE9F2;
    --color-text: #303030;
    --color-text-muted: #8E8E8E;
    --color-white: #FFFFFF;
    --color-dot-inactive: #888888;
    --color-dot-active: #FFD500;
    --color-waveform: #D9D9D9;
    --color-waveform-active: #BCBBBB;
    
    --font-header: 'Lalezar', cursive;
    --font-subhead: 'Crafty Girls', cursive;
    --font-body: 'Times New Roman', Times, serif;
    
    --container-max-width: 402px;
    --container-padding: 14px;
}

/* ============================================
   Reset & Base
   ============================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background-color: var(--color-pink-bg);
    width: 100%;
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 19px;
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
}

body.menu-open {
    overflow: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    font-family: inherit;
    cursor: pointer;
}

img {
    max-width: 100%;
    height: auto;
}

/* ============================================
   Typography
   ============================================ */
h1, .heading {
    font-family: var(--font-header);
    font-weight: 400;
    font-size: 55px;
    line-height: 58px;
    color: var(--color-text);
    margin: 0;
    text-align: center;
}

h2, .subheading {
    font-family: var(--font-subhead);
    font-weight: 400;
    font-size: 32px;
    line-height: 34px;
    color: var(--color-text);
    margin: 0;
    text-align: center;
}

h3, .name-heading {
    font-family: var(--font-header);
    font-weight: 400;
    font-size: 35px;
    line-height: 58px;
    color: var(--color-text);
    margin: 0;
    text-align: center;
}

p, .body-text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: var(--color-text);
    margin: 0;
}

/* ============================================
   Main Container
   ============================================ */
.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    flex: 1;
    background: var(--color-pink-bg);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* Hide scrollbar but keep functionality */
.container::-webkit-scrollbar {
    display: none;
}
.container {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ============================================
   Menu Button (Three Dots)
   ============================================ */
.menu-btn {
    position: fixed;
    top: 4px;
    right: calc(50% - var(--container-max-width) / 2 + 22px);
    width: 45px;
    height: 58px;
    background: none;
    border: none;
    font-family: var(--font-header);
    font-size: 55px;
    line-height: 58px;
    color: var(--color-text);
    z-index: 100;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Adjust for smaller screens */
@media (max-width: 430px) {
    .menu-btn {
        right: 22px;
    }
}

/* ============================================
   Menu Overlay
   ============================================ */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-pink-bg);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.menu-close {
    position: absolute;
    top: 20px;
    right: 30px;
    background: none;
    border: none;
    font-size: 40px;
    color: var(--color-text);
    padding: 10px;
}

.menu-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

.menu-nav a {
    font-family: var(--font-header);
    font-size: 40px;
    line-height: 1.2;
    color: var(--color-text);
    transition: opacity 0.2s ease;
}

.menu-nav a:hover {
    opacity: 0.7;
}

.menu-nav a.menu-locked {
    opacity: 0.5;
}

/* ============================================
   Page Header
   ============================================ */
.page-header {
    text-align: center;
    padding-top: 60px;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    margin-bottom: 30px;
}

.page-header h1 {
    margin-bottom: 0;
}

.page-header .subheading {
    margin-top: 0;
}

/* ============================================
   Content Cards (Pink containers)
   ============================================ */
.card {
    background: var(--color-pink-light);
    border-radius: 13px;
    margin-left: var(--container-padding);
    margin-right: var(--container-padding);
}

.card-large {
    padding: 20px;
}

/* ============================================
   Leopard Circle Badge
   ============================================ */
.leopard-badge {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-image: url('../images/footer.png');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
}

.leopard-badge-number {
    font-family: var(--font-header);
    font-size: 55px;
    line-height: 58px;
    color: var(--color-white);
}

/* ============================================
   Footer
   ============================================ */
.footer {
    width: 100%;
    height: 80px;
    margin-top: auto;
    position: relative;
    background-image: url('../images/footer.png');
    background-size: cover;
    background-position: center;
}

.footer-year {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-header);
    font-size: 40px;
    line-height: 42px;
    color: var(--color-white);
    pointer-events: none;
    text-align: center;
}

/* ============================================
   Audio Page Styles
   ============================================ */
.audio-list {
    padding-bottom: 20px;
}

.audio-item {
    margin-bottom: 32px;
}

.audio-name {
    font-family: var(--font-header);
    font-size: 35px;
    line-height: 58px;
    color: var(--color-text);
    text-align: center;
    margin-bottom: -10px;
}

.audio-subtitle {
    font-family: var(--font-subhead);
    font-size: 14px;
    line-height: 1.2;
    color: var(--color-text);
    text-align: center;
    margin: 0 0 12px 0;
    opacity: 0.8;
}

.audio-card {
    background: var(--color-pink-light);
    border-radius: 13px;
    height: 81px;
    margin-left: var(--container-padding);
    margin-right: var(--container-padding);
    display: flex;
    align-items: center;
    padding: 0 15px;
    position: relative;
    z-index: 2;
}

/* Play/Pause Button */
.audio-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: none;
    padding: 0;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.25);
}

.audio-btn-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.audio-btn-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Play triangle */
.audio-btn .icon-play {
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 20px solid var(--color-white);
    margin-left: 4px; /* Optical center adjustment */
}

/* Pause bars */
.audio-btn .icon-pause {
    display: none;
    width: 23px;
    height: 29px;
}

.audio-btn .icon-pause::before,
.audio-btn .icon-pause::after {
    content: '';
    position: absolute;
    width: 9px;
    height: 29px;
    background: var(--color-white);
    top: 50%;
    transform: translateY(-50%);
}

.audio-btn .icon-pause::before {
    left: calc(50% - 12px);
}

.audio-btn .icon-pause::after {
    left: calc(50% + 3px);
}

.audio-btn.playing .icon-play {
    display: none;
}

.audio-btn.playing .icon-pause {
    display: block;
}

/* Waveform */
.audio-waveform {
    flex: 1;
    height: 38px;
    display: flex;
    align-items: center;
    gap: 3px;
    margin-left: 15px;
    margin-right: 45px;
    overflow: hidden;
}

.wave-bar {
    width: 5px;
    min-width: 5px;
    border-radius: 3px;
    background: var(--color-waveform);
    transition: background-color 0.15s ease;
}

.wave-bar.active {
    background: var(--color-waveform-active);
}

/* Time display */
.audio-time {
    position: absolute;
    right: 15px;
    bottom: 12px;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 19px;
    color: var(--color-text-muted);
}

/* Otter runner track */
.otter-track {
    position: absolute;
    bottom: 2px;
    left: 79px; /* Start after the play button */
    right: 15px;
    height: 25px;
    overflow: hidden;
    pointer-events: none;
}

.otter-runner {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 22px;
    width: auto;
    transition: left 0.1s linear;
    opacity: 0;
}

.otter-runner.running {
    opacity: 1;
}

/* ============================================
   Today's Plan Page Styles
   ============================================ */
.todo-hint {
    font-family: var(--font-subhead);
    font-size: 16px;
    color: var(--color-text);
    text-align: center;
    margin: 0 0 30px 0;
    opacity: 0.7;
}

.todo-list {
    padding-bottom: 20px;
}

.todo-item {
    margin-bottom: 20px;
}

.todo-card {
    background: var(--color-pink-light);
    border-radius: 13px;
    min-height: 86px;
    margin-left: var(--container-padding);
    margin-right: var(--container-padding);
    display: flex;
    align-items: center;
    padding: 15px;
    position: relative;
    z-index: 2;
}

.todo-badge {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
    border: none;
    padding: 6px;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.todo-badge:hover {
    transform: scale(1.05);
    box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.35);
}

.todo-badge:active {
    transform: scale(0.95);
}

.todo-badge.done {
    box-shadow: 0 0 0 3px var(--color-dot-active);
}

.todo-badge-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

/* Pink tint for Taylor Swift image to match the aesthetic (non-done state only) */
.todo-badge-img[src$="taylor-singing.png"] {
    filter: sepia(20%) saturate(150%) hue-rotate(310deg) brightness(1.05);
    background: var(--color-pink-light);
}

/* Done state should show the halftone image without filter */
.todo-badge-img[src$="taylor-singing-done.png"] {
    filter: none;
    background: var(--color-pink-light);
}

.todo-text {
    flex: 1;
    padding-left: 20px;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.3;
    color: var(--color-text);
    transition: opacity 0.2s ease;
}

.todo-text.done {
    opacity: 0.5;
}

.todo-text a {
    color: var(--color-text);
    text-decoration: underline;
}

.todo-card.done {
    position: relative;
}

.todo-card.done::after {
    content: '✓';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 28px;
    color: var(--color-dot-active);
    font-weight: bold;
}

/* ============================================
   Little Things Page Styles
   ============================================ */
.little-things-list {
    padding-bottom: 20px;
}

.little-thing-item {
    margin-bottom: 42px;
}

.little-thing-card {
    background: var(--color-pink-light);
    border-radius: 13px;
    height: 86px;
    margin-left: var(--container-padding);
    margin-right: var(--container-padding);
    display: flex;
    align-items: center;
    padding: 0 15px;
    position: relative;
    z-index: 2;
}

.little-thing-card-reverse {
    flex-direction: row-reverse;
}

.little-thing-badge {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-image: url('../images/footer.png');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
}

.little-thing-number {
    font-family: var(--font-header);
    font-size: 40px;
    line-height: 1;
    color: var(--color-white);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.little-thing-text {
    flex: 1;
    padding-left: 20px;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 19px;
    color: var(--color-text);
}

/* Giraffe background image */
.giraffe-bg {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 280px;
    width: 70%;
    pointer-events: none;
    z-index: 0;
    opacity: 1;
    mix-blend-mode: overlay;
}

@media (max-width: 430px) {
    .giraffe-bg {
        bottom: 90px;
        width: 60%;
        max-width: 240px;
    }
}

/* Otter background image (same style as giraffe) */
.otter-bg {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 280px;
    width: 70%;
    pointer-events: none;
    z-index: 0;
    opacity: 1;
    mix-blend-mode: overlay;
}

@media (max-width: 430px) {
    .otter-bg {
        bottom: 90px;
        width: 60%;
        max-width: 240px;
    }
}

/* Otter with headphones background (audio page) */
.otter-headphones-bg {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 280px;
    width: 70%;
    pointer-events: none;
    z-index: 0;
    opacity: 1;
    mix-blend-mode: overlay;
}

@media (max-width: 430px) {
    .otter-headphones-bg {
        bottom: 90px;
        width: 60%;
        max-width: 240px;
    }
}

/* ============================================
   Rewind Page Styles
   ============================================ */
.rewind-page {
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    height: 100vh; /* No footer on rewind page */
    overflow: hidden;
}

/* Fixed header for rewind */
.rewind-page .rewind-header {
    flex-shrink: 0;
    padding-top: 60px;
    padding-bottom: 15px;
    margin-bottom: 0;
}

/* Scrollable container */
.rewind-scroll-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.rewind-scroll-container::-webkit-scrollbar {
    display: none;
}

/* Each section snaps */
.rewind-section {
    min-height: calc(100vh - 140px); /* viewport - header */
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 20px var(--container-padding) 25px;
    padding-top: 10px;
}

/* Intro sections */
.intro-section .rewind-card {
    background: var(--color-pink-light);
    border-radius: 13px;
    width: 100%;
    max-width: 374px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.intro-photo-wrapper {
    width: 100%;
    max-width: 300px;
}

.intro-photo-wrapper img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Pink card behind polaroid */
.rewind-card {
    background: var(--color-pink-light);
    border-radius: 13px;
    width: 100%;
    max-width: 374px;
    padding: 25px 15px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

/* === HORIZONTAL PHOTO GALLERY === */
.photo-gallery {
    width: calc(100% + 20px);
    max-width: 340px;
    overflow: hidden;
    position: relative;
    margin: 0 -10px;
}

.gallery-track {
    display: flex;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    width: 100%;
}

.gallery-photo {
    flex: 0 0 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

/* Polaroid frame */
.polaroid {
    background: var(--color-white);
    padding: 10px 10px 40px 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-width: 280px;
    width: 100%;
}

.polaroid img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    background: #D9D9D9;
    display: block;
}

/* Horizontal gallery dots */
.gallery-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 15px;
}

.gallery-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-dot-inactive);
    transition: background-color 0.2s ease, transform 0.2s ease;
    cursor: pointer;
}

.gallery-dot.active {
    background: var(--color-dot-active);
    transform: scale(1.15);
}

/* Description below polaroid */
.rewind-description {
    font-family: var(--font-subhead);
    font-size: 28px;
    line-height: 34px;
    color: var(--color-text);
    text-align: center;
    margin-top: 15px;
    padding: 0 10px;
}

/* Swipe indicator */
.swipe-indicator {
    margin-top: 25px;
    padding-bottom: 10px;
    text-align: center;
    cursor: pointer;
}

.swipe-arrow {
    width: 20px;
    height: 20px;
    border-right: 2px solid var(--color-text);
    border-bottom: 2px solid var(--color-text);
    transform: rotate(45deg);
    margin: 0 auto 6px;
    transition: transform 0.3s ease;
}

.swipe-text {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-text);
}

/* Bounce animation for swipe indicator */
.swipe-indicator.bounce .swipe-arrow {
    animation: arrowBounce 0.6s ease;
}

@keyframes arrowBounce {
    0%, 100% { transform: rotate(45deg) translateY(0); }
    50% { transform: rotate(45deg) translateY(8px); }
}

/* === FINAL SECTION === */
.rewind-final {
    justify-content: center;
}

.final-content {
    text-align: center;
    padding: 20px;
}

.final-heart {
    font-size: 48px;
    color: #e74c3c;
    margin-bottom: 20px;
    animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

.final-text {
    font-family: var(--font-subhead);
    font-size: 26px;
    line-height: 32px;
    color: var(--color-text);
    margin-bottom: 30px;
    max-width: 320px;
}

/* Vertical dots indicator */
.rewind-dots {
    position: fixed;
    right: calc(50% - var(--container-max-width) / 2 + 20px);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 3px;
    z-index: 50;
}

@media (max-width: 430px) {
    .rewind-dots {
        right: 3px;
    }
    
    .rewind-description {
        font-size: 24px;
        line-height: 30px;
    }
    
    .final-text {
        font-size: 22px;
        line-height: 28px;
    }
    
    .rewind-section {
        min-height: calc(100vh - 140px);
        padding: 15px 20px 20px 14px; /* Extra right padding for dots */
    }
    
    .rewind-card {
        max-width: 340px; /* Slightly narrower to avoid dot overlap */
    }
}

.rewind-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-dot-inactive);
    transition: background-color 0.2s ease;
    cursor: pointer;
}

.rewind-dot.active {
    background: var(--color-dot-active);
}

/* ============================================
   Welcome Page Styles
   ============================================ */
.welcome-intro {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 19px;
    color: var(--color-text);
    padding: 0 34px;
    margin-bottom: 30px;
}

.welcome-photos {
    position: relative;
    min-height: 900px;
    margin-bottom: 40px;
}

.welcome-polaroid {
    position: absolute;
    background: var(--color-white);
    padding: 10px 10px 40px 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    width: 200px;
}

.welcome-polaroid img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}

.welcome-polaroid:nth-child(1) {
    left: 11px;
    top: 0;
    transform: rotate(-10.56deg);
}

.welcome-polaroid:nth-child(2) {
    left: 120px;
    top: 180px;
    transform: rotate(21.77deg);
}

.welcome-polaroid:nth-child(3) {
    left: 21px;
    top: 400px;
    transform: rotate(-9.83deg);
}

.welcome-polaroid:nth-child(4) {
    left: 120px;
    top: 580px;
    transform: rotate(21.77deg);
}

.welcome-polaroid:nth-child(5) {
    left: 21px;
    top: 760px;
    transform: rotate(-9.83deg);
}

.welcome-cta-text {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 19px;
    color: var(--color-text);
    text-align: center;
    margin-bottom: 20px;
}

/* CTA Button */
.welcome-btn {
    display: block;
    margin: 0 auto 40px;
    background-image: url('../images/footer.png');
    background-size: cover;
    background-position: center;
    border: none;
    border-radius: 18px;
    padding: 0;
    box-shadow: 2px 2px 7.3px #C497AB;
    overflow: hidden;
}

.welcome-btn-inner {
    background: rgba(79, 69, 60, 0.85);
    border-radius: 18px;
    padding: 8px 25px;
}

.welcome-btn-text {
    font-family: var(--font-header);
    font-size: 28px;
    line-height: 43px;
    color: var(--color-white);
}

/* ============================================
   404 Page Styles
   ============================================ */
.container-404 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    text-align: center;
    padding: 20px var(--container-padding);
    position: relative;
    z-index: 1;
}

/* Hide any background otter images on 404 page */
body:has(.container-404) .otter-bg,
body:has(.container-404) .otter-headphones-bg,
body:has(.container-404) img[class*="otter"]:not(.otter-img) {
    display: none !important;
}

.otter-img {
    width: 200px;
    height: 200px;
    margin-bottom: 20px;
    border-radius: 50%;
    border: 5px solid var(--color-pink-light);
    object-fit: cover;
    clip-path: circle(50%);
    position: relative;
    z-index: 1;
}

/* Ensure no background otter on 404 page */
.container-404::before,
.container-404::after,
.container-404 .otter-bg,
.container-404 ~ .otter-bg {
    display: none !important;
}

.quote-404 {
    font-family: var(--font-body);
    font-size: 20px;
    font-style: italic;
    margin-bottom: 40px;
    color: var(--color-text);
    max-width: 300px;
}

.game-card {
    background: var(--color-pink-light);
    border-radius: 13px;
    padding: 20px;
    width: 90%;
    max-width: 340px;
    margin: 0 auto;
}

.game-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.game-btn {
    background: var(--color-white);
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--color-text);
    cursor: pointer;
    transition: background 0.2s ease;
    text-align: center;
}

.game-btn:active, .game-btn:hover {
    background: var(--color-pink-bg);
}

.next-btn {
    margin-top: 15px;
    background: var(--color-text);
    color: var(--color-white);
    font-family: var(--font-header);
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 18px;
    cursor: pointer;
}

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

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
   Presents Page Styles
   ============================================ */
.presents-page {
    padding-bottom: 40px;
}

.presents-header {
    position: relative;
    text-align: center;
    padding-top: 60px;
    margin-bottom: 20px;
}

.presents-sparks {
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    max-width: 413px;
    height: auto;
    pointer-events: none;
    z-index: 1;
}

.presents-title {
    font-family: var(--font-subhead);
    font-size: 40px;
    line-height: 43px;
    color: var(--color-text);
    margin: 0;
    position: relative;
    z-index: 2;
}

.presents-intro {
    padding: 0 34px;
    margin-bottom: 30px;
}

.presents-intro p {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 19px;
    color: var(--color-text);
}

.presents-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 var(--container-padding);
}

.present-item {
    margin-bottom: 0;
}

.present-item .audio-name {
    margin-bottom: -10px;
}

.present-item .audio-subtitle {
    margin-bottom: 12px;
}

/* Hide title and description until revealed */
.present-title,
.present-description {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    transition: opacity 0.5s ease, max-height 0.5s ease, margin 0.3s ease;
}

.present-title.visible {
    opacity: 1;
    max-height: 60px;
    margin-bottom: -10px;
}

.present-description.visible {
    opacity: 1;
    max-height: 80px;
    margin-bottom: 12px;
    transition-delay: 0.1s;
}

/* Individual present card */
.present-card {
    position: relative;
    display: flex;
    justify-content: center;
}

/* Specific heights for each present */
.present-card-wine {
    min-height: 300px;
}

.present-card-disney {
    min-height: 200px;
}

.present-card-bag {
    min-height: 230px;
}

.present-card-kindle {
    min-height: 240px;
}

/* Blacked out state */
.present-blacked {
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.6s ease;
    transform: rotate(var(--rotation, 0deg));
    filter: drop-shadow(4px 7px 8.6px #E2AFC5);
}

.present-blacked:hover {
    transform: rotate(var(--rotation, 0deg)) scale(1.02);
}

.present-blacked:active {
    transform: rotate(var(--rotation, 0deg)) scale(0.98);
}

.present-blacked img {
    max-width: 320px;
    width: 100%;
    height: auto;
    display: block;
}

.present-blacked .tap-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 19px;
    color: var(--color-white);
    pointer-events: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.present-blacked.revealing {
    opacity: 0;
    transform: rotate(var(--rotation, 0deg)) scale(1.1);
}

.present-blacked.hidden {
    display: none;
}

/* Revealed state */
.present-revealed {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) rotate(var(--rotation, 0deg)) scale(0.8);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
    filter: drop-shadow(4px 7px 8.6px #E2AFC5);
    pointer-events: none;
}

.present-revealed img {
    max-width: 320px;
    width: 100%;
    height: auto;
    display: block;
}

.present-revealed.visible {
    opacity: 1;
    transform: translateX(-50%) rotate(var(--rotation, 0deg)) scale(1);
}

/* Glitter container */
.glitter-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 10;
}

/* Glitter particles */
.glitter-particle {
    position: absolute;
    background: radial-gradient(circle, #fff 0%, #FFD700 30%, #FFA500 60%, transparent 70%);
    border-radius: 50%;
    box-shadow: 
        0 0 6px #FFD700,
        0 0 12px #FFA500,
        0 0 18px rgba(255, 215, 0, 0.5);
    opacity: 0;
}

@keyframes glitterFly {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0);
    }
    20% {
        opacity: 1;
        transform: translate(calc(var(--end-x) * 0.2), calc(var(--end-y) * 0.2)) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--end-x), var(--end-y)) scale(0.5);
    }
}

/* Additional sparkle variations */
.glitter-particle:nth-child(odd) {
    background: radial-gradient(circle, #fff 0%, #FF69B4 30%, #FF1493 60%, transparent 70%);
    box-shadow: 
        0 0 6px #FF69B4,
        0 0 12px #FF1493,
        0 0 18px rgba(255, 105, 180, 0.5);
}

.glitter-particle:nth-child(3n) {
    background: radial-gradient(circle, #fff 0%, #E0FFFF 30%, #87CEEB 60%, transparent 70%);
    box-shadow: 
        0 0 6px #E0FFFF,
        0 0 12px #87CEEB,
        0 0 18px rgba(135, 206, 235, 0.5);
}

/* Starburst effect on reveal */
.glitter-container.active::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.8) 0%,
        rgba(255, 215, 0, 0.4) 20%,
        rgba(255, 182, 193, 0.2) 40%,
        transparent 70%
    );
    animation: starburst 0.8s ease-out forwards;
    border-radius: 50%;
}

@keyframes starburst {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2);
    }
}

/* ============================================
   Action Button (Leopard texture style)
   ============================================ */
.action-btn {
    display: block;
    margin: 0 auto;
    background-image: url('../images/footer.png');
    background-size: cover;
    background-position: center;
    border: none;
    border-radius: 18px;
    padding: 0;
    box-shadow: 2px 2px 7.3px #C497AB;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.action-btn:hover {
    transform: scale(1.02);
    box-shadow: 2px 4px 10px #C497AB;
}

.action-btn:active {
    transform: scale(0.98);
}

.action-btn-inner {
    background: rgba(79, 69, 60, 0.85);
    border-radius: 18px;
    padding: 4px 18px;
}

.action-btn-text {
    font-family: var(--font-header);
    font-size: 24px;
    line-height: 43px;
    color: var(--color-white);
}

.action-btn.completed {
    opacity: 0.6;
    pointer-events: none;
}

.action-btn.completed .action-btn-text::after {
    content: ' ✓';
}

.action-btn-small {
    margin-top: 20px;
}

.action-btn-small .action-btn-inner {
    padding: 2px 14px;
}

.action-btn-small .action-btn-text {
    font-size: 20px;
    line-height: 36px;
}

/* ============================================
   Today's Plan Page Link Styles
   ============================================ */
.card label a {
    color: #881799;
    text-decoration: underline;
}

/* ============================================
   Today's Plan Presents Section
   ============================================ */
.todo-presents-section {
    margin: 40px 0;
    text-align: center;
}

.presents-locked {
    display: inline-block;
    position: relative;
    margin: 0 auto;
    background-image: url('../images/footer.png');
    background-size: cover;
    background-position: center;
    border: none;
    border-radius: 18px;
    padding: 0;
    box-shadow: 2px 2px 7.3px #C497AB;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.5;
    filter: grayscale(50%);
}

.presents-locked-inner {
    background: rgba(79, 69, 60, 0.85);
    border-radius: 18px;
    padding: 4px 18px;
}

.presents-locked-text {
    font-family: var(--font-header);
    font-size: 24px;
    line-height: 43px;
    color: var(--color-white);
}

.presents-glitter {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    animation: glitter 2s infinite;
}

@keyframes glitter {
    0% {
        left: -100%;
    }
    50%, 100% {
        left: 150%;
    }
}

/* Toast notification */
.toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--color-text);
    color: var(--color-white);
    padding: 12px 24px;
    border-radius: 25px;
    font-family: var(--font-header);
    font-size: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    z-index: 1001;
}

.toast.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.toast.menu-toast {
    z-index: 1100;
}