@font-face {
    font-family: 'LocalCuteFont';
    src: url('font.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'LocalCuteFont', 'Noto Sans TC', sans-serif;
    background-color: #fce7f3; /* Pink-100 */
}
.font-cute {
    font-family: 'LocalCuteFont', 'Fredoka', sans-serif;
}
/* Custom Ruby Styling */
ruby {
    display: inline-flex;
    flex-direction: row;
    align-items: center; /* Vertically center char and zhuyin group */
    line-height: 1;
    white-space: nowrap;
}
rt {
    position: relative;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    margin-left: 0.2em;
}
.zhuyin-chars {
    display: inline-block;
    writing-mode: vertical-rl;
    text-orientation: upright;
    color: #ec4899;
    font-weight: 600;
    font-size: 1em;
    letter-spacing: -0.1em; /* Tighten vertical Zhuyin */
}
.tone-mark {
    color: #ec4899;
    font-weight: 600;
    font-size: 1em;
}
.tone-other {
    margin-left: 0.1em;
}
.tone-dot {
    position: absolute;
    top: -1em; /* Position dot above */
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8em;
}

/* Speaking Animation */
.highlightable-char {
    padding: 0 0.15em;
    border-radius: 4px;
    background-color: transparent; /* Transparent by default */
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
.speaking {
    /* Keep original text color */
    background-color: #fde047 !important; /* yellow-300 */
}
/* Zhuyin should revert to its default color */
@keyframes gradient-text {
    to {
        background-position: 200% center;
    }
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #fbcfe8; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #ec4899; border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #db2777; }

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

/* Animations */
@keyframes bounce-slow {
    0%, 100% { transform: translateY(-3%); }
    50% { transform: translateY(3%); }
}
.animate-bounce-slow {
    animation: bounce-slow 3s infinite ease-in-out;
}

/* PRINT STYLES */
@media print {
    @page { size: portrait; margin: 0.5cm; }
    body {
        height: auto !important;
        overflow: visible !important;
        background: white !important;
        padding: 0 !important;
    }
    header, #headerActions, .no-print, #listHeaderControls button { display: none !important; }

    /* Strict View Control based on Body Class */
    body.view-list #detailView { display: none !important; }
    body.view-list #listView { position: static !important; display: block !important; overflow: visible !important; }

    body.view-detail #listView { display: none !important; }
    body.view-detail #detailView {
        position: static !important;
        display: block !important;
        overflow: visible !important;
        padding: 0 !important;
    }
    body.view-detail #detailView.hidden { display: block !important; }

    /* List Layout Adjustments */
    #pokemonGrid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.5rem;
        padding-bottom: 0 !important;
    }
    .shadow-xl, .shadow-md, .shadow-sm { box-shadow: none !important; border: 1px solid #ccc; }

    /* Detail View Print */
    #detailLayout { display: block !important; overflow: visible !important; }
    #detailVisuals, #detailInfo { width: 100% !important; page-break-inside: avoid; height: auto !important; overflow: visible !important;}
    .bg-pink-50, .bg-yellow-100, .bg-purple-100 { background-color: white !important; border: 1px solid #eee !important; }

    /* Grayscale for Coloring */
    img { filter: grayscale(100%) contrast(120%); }

    /* Text Colors for Print */
    .text-white { color: black !important; }

    /* Hide print buttons during print */
    button, .print\:hidden { display: none !important; }
}