/* Dynamic viewport height: fix iPhone Chrome toolbar overlapping bottom content */
:root {
    --vh: 1vh;
}
@media (max-width: 767px) {
    html {
        height: 100%;
    }
    body {
        min-height: 100dvh; /* dynamic viewport: excludes browser UI (Chrome toolbar etc.) */
        min-height: calc(var(--vh, 1vh) * 100);
        height: calc(var(--vh, 1vh) * 100);
    }
}

/* Force Material Symbols icon font so icons render (not overridden by Tailwind/body font) */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined', sans-serif !important;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* Story scroll: overflow-y controlled by JS. No overflow = no scrollbar; overflow = dark-themed scrollbar (no white). */
#story-scroll-container {
    overflow-y: hidden;
    overflow-anchor: none;
}
#story-scroll-container.scrollbar-visible {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    -ms-overflow-style: auto;
}
#story-scroll-container.scrollbar-visible::-webkit-scrollbar {
    width: 6px;
}
#story-scroll-container.scrollbar-visible::-webkit-scrollbar-track {
    background: transparent;
}
#story-scroll-container.scrollbar-visible::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 3px;
}
#story-scroll-container.scrollbar-visible::-webkit-scrollbar-thumb:hover,
#story-scroll-container.scrollbar-visible::-webkit-scrollbar-thumb:active {
    background: transparent;
}
/* Legacy class for other scroll areas (e.g. story status panel) */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    transition: background 0.2s ease;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.15);
}
.custom-scrollbar::-webkit-scrollbar-thumb:active {
    background: rgba(212, 175, 55, 0.25);
}
.glass-panel {
    background: rgba(11, 16, 33, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-left: 1px solid rgba(212, 175, 55, 0.15);
    box-shadow: -10px 0 30px rgba(0,0,0,0.5);
}
@keyframes heartbeat {
    0% { transform: scale(1); }
    15% { transform: scale(1.15); }
    30% { transform: scale(1); }
    45% { transform: scale(1.15); }
    60% { transform: scale(1); }
}
.heart-pulse {
    animation: heartbeat 3s infinite ease-in-out;
}
.text-shadow-gold {
    text-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
}
.text-shadow-subtle {
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
/* Prevent horizontal overflow on narrow screens (e.g. iPhone SE) */
#story-content,
#story-content p,
#footer-content {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}
#story-content {
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
#story-content::-webkit-scrollbar {
    width: 6px;
}
#story-content::-webkit-scrollbar-track {
    background: transparent;
}
#story-content::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 3px;
}
#story-content::-webkit-scrollbar-thumb:hover,
#story-content::-webkit-scrollbar-thumb:active {
    background: transparent;
}
/* Markdown bold/italic inside story (no attributes to avoid sanitizer issues) */
#story-content b {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
}
#story-content i {
    font-style: italic;
    color: rgba(226, 232, 240, 0.95);
}
.slide-panel {
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.4s ease;
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}
.group:hover .slide-panel,
#story-status-container.story-status-open .slide-panel {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}
/* Story Status panel must sit above mobile hint bar and overlay */
#story-status-container,
.story-status-container {
    z-index: 9999 !important;
}
#story-status-container.story-status-open {
    width: 400px;
}
/* Keep CLICK TO CONTINUE bar below Story Status */
#mobile-next-hint-bar {
    z-index: 40;
}
/* When Story Status panel is open, hide CLICK TO CONTINUE so it never shows on top */
body.story-status-panel-open #mobile-next-hint-bar {
    visibility: hidden !important;
    pointer-events: none !important;
}
.btn-glow-border {
    position: relative;
}
.btn-glow-border::after {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: -1;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.4), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.btn-glow-border:hover::after {
    opacity: 1;
}
.fade-in {
    animation: fadeIn 0.6s ease-in;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.text-message {
    font-style: italic;
    color: rgba(212, 175, 55, 0.9);
}
.clickable-content {
    cursor: pointer;
    transition: opacity 0.3s ease;
}
.clickable-content:hover {
    opacity: 0.9;
}
.click-hint {
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}
.glass-panel-modal {
    background: rgba(11, 16, 33, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(212, 175, 55, 0.15);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.gold-gradient-text {
    background: linear-gradient(to bottom, #F4D03F, #D4AF37);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
@keyframes shine {
    0% { transform: translateX(-100%) skewX(-15deg); }
    100% { transform: translateX(200%) skewX(-15deg); }
}
.shine-effect {
    position: relative;
    overflow: hidden;
}
.shine-effect::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent);
    transform: skewX(-15deg) translateX(-150%);
    animation: shine 3s infinite;
}
@keyframes modalFadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}
.modal-show {
    animation: modalFadeIn 0.3s ease-out;
}

/* Footer bottom padding: ensure buttons stay above Chrome toolbar + safe area on iPhone */
.safe-area-pb {
    padding-bottom: max(2rem, env(safe-area-inset-bottom, 0px));
}
@media (max-width: 767px) {
    #footer-content,
    #footer-content.safe-area-pb,
    #mobile-next-hint-bar {
        padding-bottom: max(7rem, calc(env(safe-area-inset-bottom, 0px) + 5.5rem));
    }
    .safe-area-pb:not(#footer-content):not(#mobile-next-hint-bar) {
        padding-bottom: max(4rem, calc(env(safe-area-inset-bottom, 0px) + 3rem));
    }
}
@media (min-width: 768px) {
    .safe-area-pb {
        padding-bottom: max(3.5rem, env(safe-area-inset-bottom, 0px));
    }
}

/* Mobile overlay bottom buttons: larger touch targets (min 48px) for easier tap on mobile */
.mobile-overlay-tap-target {
    min-height: 48px;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.15);
    touch-action: manipulation;
}
.mobile-overlay-tap-target:active {
    opacity: 0.9;
}
/* Nav row (Previous/Next): own stacking context, extend hit area downward for iOS Safari */
.mobile-overlay-nav-row {
    position: relative;
    z-index: 5;
}
#mobile-overlay-prev,
#mobile-overlay-next {
    min-height: 56px;
    padding-bottom: 0.75rem;
}
/* Bottom row (Current Chapter / Story Status): above nav row so tap lands on correct button on iOS Safari */
.mobile-overlay-button-row {
    position: relative;
    z-index: 10;
}
/* Extend hit area downward so visible button aligns with actual tap target on iOS Safari */
#mobile-overlay-chapter,
#mobile-overlay-story-status {
    min-height: 56px;
    padding-bottom: 0.75rem;
}

/* Mobile-only overlay and next-page hint bar: hide on desktop */
@media (min-width: 768px) {
    #mobile-overlay,
    #mobile-next-hint-bar {
        display: none !important;
    }
}

/* Mobile bottom hint: extra top spacing so it doesn't overlap story content (iPhone Chrome, Safari) */
#mobile-next-hint-bar {
    padding-bottom: 0;
    padding-top: 2rem;
}
#mobile-next-hint-click-zone {
    -webkit-tap-highlight-color: transparent;
}
/* On mobile, add bottom padding so last line doesn't overlap CLICK TO CONTINUE (iPhone Chrome etc.) */
@media (max-width: 767px) {
    #story-content {
        padding-bottom: 7rem;
        padding-bottom: calc(7rem + env(safe-area-inset-bottom, 0px));
    }
}