/* Floating Decorations */
.floating-decorations {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;      /* sit behind the cards, never collide with them */
    overflow: hidden;
    opacity: 0.3;     /* ambient, not clip-art competing with the content */
}

.floating-star,
.floating-lantern,
.floating-cloud {
    position: absolute;
    font-size: 2rem;
    opacity: 0.5;
    animation: float 6s ease-in-out infinite;
}

.floating-star:nth-child(2) { animation-delay: 1s; }
.floating-star:nth-child(4) { animation-delay: 2s; }
.floating-lantern { animation-duration: 8s; }
.floating-cloud { animation-duration: 10s; }

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
}

/* Stories Hero */
.stories-hero {
    background: linear-gradient(135deg, var(--turquoise-deep) 0%, var(--turquoise) 55%, var(--teal-500) 100%);
    padding: 4rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.stories-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--girih);
    background-size: 80px 80px;
    opacity: 0.16;
    -webkit-mask-image: radial-gradient(ellipse 75% 80% at 50% 50%, #000 30%, transparent 75%);
            mask-image: radial-gradient(ellipse 75% 80% at 50% 50%, #000 30%, transparent 75%);
    pointer-events: none;
}

.stories-hero > * { position: relative; z-index: 1; }

.stories-hero h1 {
    font-family: 'Baloo 2', cursive;
    font-size: 3rem;
    font-weight: 800;
    color: white;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.stories-hero p {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.9);
}

/* Stories Grid */
.stories-grid-section {
    padding: 4rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.stories-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
    gap: 1.5rem;
}

.story-select-card {
    background: var(--card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    border: 1px solid var(--rule);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.story-select-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: var(--rule-strong);
}

/* Story Card Link Wrapper */
.story-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.story-card-link:hover .story-select-card {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: var(--rule-strong);
}

.story-card-link:hover .story-select-card.featured {
    box-shadow: 0 20px 40px rgba(192, 138, 46, 0.3);
    border-color: var(--amber-600);
}

.story-select-card.featured {
    border: 1px solid var(--gold);
    background: linear-gradient(160deg, var(--card) 0%, var(--parchment) 100%);
    position: relative;
    overflow: visible;
}

.story-select-card.featured::before {
    content: 'NEW';
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gold);
    color: #fff;
    padding: 0.22rem 0.9rem;
    border-radius: var(--radius-full);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    z-index: 10;
}

.story-select-card.featured .story-thumbnail {
    background: var(--gold-pale);
}

.story-select-card.featured:hover {
    box-shadow: 0 20px 40px rgba(192, 138, 46, 0.3);
    border-color: var(--amber-600);
}

.story-thumbnail {
    position: relative;
    background: var(--parchment-deep);
    border-bottom: 1px solid var(--rule);
    padding: 2.3rem 1rem;
    text-align: center;
    font-size: 2.4rem;
    line-height: 1;
    overflow: hidden;
}

.story-thumbnail::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--girih);
    background-size: 80px 80px;
    opacity: 0.14;
    pointer-events: none;
}

/* The emoji sits in a roundel so it reads as an illuminated initial */
.story-thumbnail::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 76px;
    height: 76px;
    transform: translate(-50%, -50%);
    border: 1px solid var(--rule-strong);
    border-radius: 50%;
    pointer-events: none;
}

.story-info {
    padding: 1.6rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.story-info p { flex-grow: 1; }

.story-info h3 {
    font-family: 'Baloo 2', cursive;
    color: var(--turquoise);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.story-info p {
    color: var(--slate-500);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.story-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.story-meta span {
    background: var(--parchment);
    color: var(--ink);
    padding: 0.4rem 0.8rem;
    border-radius: 15px;
    font-size: 0.85rem;
}

.start-story-btn {
    background: linear-gradient(135deg, var(--gold) 0%, var(--amber-600) 100%);
    color: white;
    padding: 0.8rem 2rem;
    border: none;
    border-radius: 25px;
    font-family: 'Baloo 2', cursive;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

.start-story-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 5px 15px rgba(192, 138, 46, 0.3);
}

/* Story Main Content */
.story-main {
    background: linear-gradient(135deg, var(--parchment) 0%, var(--cobalt-wash) 100%);
    min-height: 100vh;
    padding: 2rem;
    position: relative;
    z-index: 1;
}

.story-container {
    max-width: 900px;
    margin: 0 auto;
    background: white;
    border-radius: 30px;
    padding: 3rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    border: 3px solid rgba(26, 143, 128, 0.2);
}

/* Story Header */
.story-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 2px dashed var(--slate-200);
}

.story-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.story-title {
    font-family: 'Baloo 2', cursive;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--turquoise);
    margin-bottom: 1.5rem;
}

.story-controls {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.mode-btn {
    background: var(--parchment-warm);
    color: var(--slate-500);
    padding: 0.8rem 1.5rem;
    border: 2px solid var(--slate-200);
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mode-btn.active {
    background: linear-gradient(135deg, var(--emerald-500) 0%, var(--teal-500) 100%);
    color: white;
    border-color: var(--emerald-500);
}

.mode-btn:hover:not(.active) {
    background: var(--slate-200);
}

/* Progress Bar */
.progress-container {
    background: var(--parchment-warm);
    border-radius: 15px;
    padding: 0.3rem;
    margin-bottom: 2rem;
    position: relative;
}

.progress-bar {
    background: linear-gradient(135deg, var(--emerald-500) 0%, var(--gold) 100%);
    height: 10px;
    border-radius: 10px;
    width: 0%;
    transition: width 0.5s ease;
}

.progress-text {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8rem;
    color: var(--slate-500);
    font-weight: 600;
}

/* Story Scenes */
.story-scene {
    display: flex;
    gap: 2rem;
    margin-bottom: 2.5rem;
    padding: 2rem;
    background: linear-gradient(135deg, var(--parchment) 0%, var(--parchment) 100%);
    border-radius: 20px;
    border-left: 5px solid var(--emerald-500);
    animation: fadeInUp 0.5s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.scene-illustration {
    font-size: 4rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.scene-text h2 {
    color: var(--teal-500);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.scene-text p {
    color: var(--slate-700);
    font-size: 1.15rem;
    line-height: 1.8;
}

/* Mini Quiz */
.mini-quiz {
    background: linear-gradient(135deg, var(--gold-wash) 0%, var(--gold-pale) 100%);
    padding: 2rem;
    border-radius: 20px;
    margin: 2rem 0;
    text-align: center;
    border: 3px solid var(--gold);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(192, 138, 46, 0.4); }
    50% { box-shadow: 0 0 0 10px rgba(192, 138, 46, 0); }
}

.quiz-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.quiz-icon {
    font-size: 2rem;
}

.quiz-header h3 {
    color: var(--gold-ink);
    font-size: 1.5rem;
}

.quiz-question {
    color: var(--gold-ink-strong);
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.quiz-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.quiz-option {
    /* Keeps the tap target on the 44px floor when the text fits one line. */
    min-height: 44px;
    background: white;
    color: var(--slate-700);
    padding: 1rem;
    border: 2px solid var(--slate-200);
    border-radius: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.quiz-option:hover {
    background: var(--emerald-500);
    color: white;
    border-color: var(--emerald-500);
    transform: scale(1.02);
}

.quiz-option.correct {
    background: var(--emerald-500);
    color: white;
    border-color: var(--emerald-500);
    animation: correctAnswer 0.5s ease;
}

.quiz-option.incorrect {
    background: #ef4444;
    color: white;
    border-color: #ef4444;
    animation: shake 0.5s ease;
}

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

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

.quiz-feedback {
    margin-top: 1rem;
    font-weight: 600;
    font-size: 1.1rem;
}

.quiz-feedback.correct {
    color: var(--ink);
}

.quiz-feedback.incorrect {
    color: #991b1b;
}

/* Lesson Box */
.lesson-box {
    background: linear-gradient(135deg, var(--parchment-deep) 0%, var(--slate-200) 100%);
    padding: 2rem;
    border-radius: 20px;
    margin: 2rem 0;
    border-left: 5px solid var(--emerald-500);
}

.lesson-box h3 {
    color: var(--ink);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.lesson-box ul {
    list-style: none;
    padding: 0;
}

.lesson-box li {
    color: var(--turquoise-deep);
    font-size: 1.1rem;
    padding: 0.5rem 0;
}

/* Dua Box */
.dua-box {
    background: linear-gradient(135deg, var(--cobalt-wash) 0%, var(--cobalt-pale) 100%);
    padding: 2rem;
    border-radius: 20px;
    margin: 2rem 0;
    text-align: center;
    border: 3px solid var(--cobalt-mid);
}

.dua-box h3 {
    color: var(--cobalt-deep);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.arabic-text {
    font-size: 2rem;
    color: var(--ink);
    margin-bottom: 0.5rem;
    direction: rtl;
}

.dua-translation {
    color: var(--cobalt);
    font-size: 1.2rem;
    font-style: italic;
    margin-bottom: 1rem;
}

.dua-note {
    color: #3A5F9B;
    font-size: 0.95rem;
}

/* Final Quiz Section */
.final-quiz-section {
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 3px dashed var(--slate-200);
}

.quiz-intro {
    text-align: center;
    margin-bottom: 2rem;
}

.quiz-lantern {
    font-size: 4rem;
    animation: glow 2s ease-in-out infinite;
}

@keyframes glow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.3); }
}

.quiz-intro h2 {
    color: var(--emerald-500);
    font-size: 2rem;
    margin: 1rem 0;
}

.quiz-intro p {
    color: var(--slate-500);
    font-size: 1.1rem;
}

.quiz-card {
    background: white;
    padding: 2rem;
    border-radius: 20px;
    margin-bottom: 1.5rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    border: 2px solid var(--slate-200);
}

.quiz-card.hidden {
    display: none;
}

.question-number {
    background: linear-gradient(135deg, var(--emerald-500) 0%, var(--teal-500) 100%);
    color: white;
    display: inline-block;
    padding: 0.4rem 1rem;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* Quiz Results */
.quiz-results {
    text-align: center;
    padding: 3rem;
    background: linear-gradient(135deg, var(--gold-wash) 0%, var(--gold-pale) 100%);
    border-radius: 20px;
    margin-top: 2rem;
}

.quiz-results.hidden {
    display: none;
}

.results-icon {
    font-size: 5rem;
    animation: bounce 1s ease infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.results-content h2 {
    color: var(--gold-ink);
    font-size: 2rem;
    margin: 1rem 0;
}

.results-score {
    color: var(--gold-ink-strong);
    font-size: 1.3rem;
}

/* Video Section */
.video-section {
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 3px dashed var(--slate-200);
}

.video-section.hidden {
    display: none;
}

.video-unlock {
    text-align: center;
    margin-bottom: 2rem;
}

.unlock-animation {
    font-size: 3rem;
    margin-bottom: 1rem;
    animation: sparkle 1.5s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1); }
}

.video-unlock h2 {
    color: var(--emerald-500);
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.video-unlock p {
    color: var(--slate-500);
}

.video-container {
    background: linear-gradient(135deg, var(--cobalt-deep) 0%, var(--teal-500) 100%);
    border-radius: 20px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.video-container::before {
    content: '⭐ ⭐ ⭐';
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 1rem;
    animation: twinkle 2s ease-in-out infinite;
}

@keyframes twinkle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.video-frame {
    background: var(--ink);
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.video-frame iframe {
    border-radius: 15px;
    display: block;
}

.video-placeholder {
    padding: 4rem 2rem;
    text-align: center;
    color: white;
}

.play-icon {
    font-size: 4rem;
    display: block;
    margin-bottom: 1rem;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.play-icon:hover {
    transform: scale(1.2);
}

.video-placeholder p {
    margin: 0.5rem 0;
}

.video-duration {
    opacity: 0.7;
    font-size: 0.9rem;
}

.video-controls {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.video-btn {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 0.8rem 1.5rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.video-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

/* Story Navigation */
.story-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid var(--slate-200);
}

.nav-btn {
    background: linear-gradient(135deg, var(--emerald-500) 0%, var(--teal-500) 100%);
    color: white;
    padding: 1rem 2rem;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.nav-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(26, 143, 128, 0.3);
}

.nav-btn.next {
    background: linear-gradient(135deg, var(--gold) 0%, var(--amber-600) 100%);
}

/* Moral Takeaway */
.moral-takeaway {
    background: rgba(255, 255, 255, 0.1);
    padding: 1.5rem;
    border-radius: 15px;
    margin-bottom: 1rem;
}

.moral-takeaway h4 {
    color: var(--gold-pale);
    margin-bottom: 0.5rem;
}

.moral-takeaway p {
    color: white;
    font-style: italic;
}

/* Active nav link */
.nav-links a.active {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
}

/* Name Modal */
.name-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.name-modal.fade-out {
    animation: fadeOut 0.3s ease forwards;
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.name-modal-content {
    background: linear-gradient(135deg, var(--parchment) 0%, var(--parchment-deep) 100%);
    padding: 3rem;
    border-radius: 30px;
    text-align: center;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    border: 4px solid var(--emerald-500);
    animation: slideUp 0.4s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    animation: bounce 1s ease infinite;
}

.name-modal-content h2 {
    color: var(--emerald-500);
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.name-modal-content p {
    color: var(--slate-500);
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.name-input {
    width: 100%;
    padding: 1rem 1.5rem;
    font-size: 1.2rem;
    border: 3px solid var(--slate-200);
    border-radius: 20px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s ease;
    margin-bottom: 1.5rem;
}

.name-input:focus {
    outline: none;
    border-color: var(--emerald-500);
    box-shadow: 0 0 0 4px rgba(26, 143, 128, 0.2);
}

.name-submit-btn {
    background: linear-gradient(135deg, var(--gold) 0%, var(--amber-600) 100%);
    color: white;
    padding: 1rem 2.5rem;
    border: none;
    border-radius: 25px;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

.name-submit-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(192, 138, 46, 0.4);
}

/* Personal Greeting */
.personal-greeting {
    background: linear-gradient(135deg, var(--gold-wash) 0%, var(--gold-pale) 100%);
    color: var(--gold-ink);
    padding: 0.8rem 1.5rem;
    border-radius: 20px;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 1rem;
    animation: fadeInUp 0.5s ease;
}

/* Slide-based Story */
.story-slides-container {
    position: relative;
    overflow: hidden;
    touch-action: pan-x;
    min-height: 350px;
    max-height: 60vh;
    background: var(--parchment);
    border-radius: 15px;
    border: 2px solid var(--slate-200);
}

.story-slides {
    display: flex;
    transition: transform 0.4s ease-out;
    width: 100%;
    height: 100%;
}

.story-slide {
    min-width: 100%;
    width: 100%;
    flex-shrink: 0;
    padding: 1.5rem;
    box-sizing: border-box;
    overflow-y: auto;
    max-height: 60vh;
}

.story-slide .story-scene,
.story-slide .mini-quiz,
.story-slide .lesson-box,
.story-slide .dua-box {
    margin: 0;
    opacity: 1;
    transform: none;
    animation: none;
}

/* Ensure content fits nicely in slides */
.story-slide .story-scene {
    flex-direction: column;
    text-align: center;
    padding: 1.5rem;
}

.story-slide .scene-illustration {
    margin: 0 auto 1rem auto;
    width: 80px;
    height: 80px;
    font-size: 3rem;
}

.story-slide .scene-text h2 {
    font-size: 1.3rem;
    margin-bottom: 0.8rem;
}

.story-slide .scene-text p {
    font-size: 1rem;
    line-height: 1.6;
}

.story-slide .mini-quiz {
    padding: 1.5rem;
}

.story-slide .quiz-options {
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
}

.story-slide .quiz-option {
    padding: 0.8rem;
    font-size: 0.9rem;
}

/* Quiz and Video in Slide Mode */
.story-slide .quiz-intro {
    padding: 1rem;
    text-align: center;
}

.story-slide .quiz-intro .quiz-lantern {
    font-size: 3rem;
}

.story-slide .quiz-intro h2 {
    font-size: 1.4rem;
    margin: 0.5rem 0;
}

.story-slide .quiz-intro p {
    font-size: 1rem;
}

.story-slide .quiz-card {
    margin: 0;
    padding: 1.5rem;
    box-shadow: none;
    border: none;
    background: transparent;
}

.story-slide .quiz-results {
    margin: 0;
    padding: 1.5rem;
    border-radius: 15px;
}

.story-slide .quiz-results .results-icon {
    font-size: 3.5rem;
}

.story-slide .quiz-results h2 {
    font-size: 1.4rem;
}

.story-slide .video-section {
    display: block !important;
    margin: 0;
    padding: 0;
    border: none;
}

.story-slide .video-unlock {
    margin-bottom: 1rem;
}

.story-slide .video-unlock h2 {
    font-size: 1.3rem;
}

.story-slide .video-container {
    border-radius: 15px;
    padding: 1rem;
}

.story-slide .video-frame iframe {
    height: 250px;
}

/* Slide Progress Indicator */
.slide-progress {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 2rem 0;
    flex-wrap: wrap;
}

.slide-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--slate-200);
    cursor: pointer;
    transition: all 0.3s ease;
}

.slide-dot.active {
    background: linear-gradient(135deg, var(--emerald-500) 0%, var(--teal-500) 100%);
    transform: scale(1.3);
}

.slide-dot.completed {
    background: var(--emerald-500);
}

/* Slide Navigation Arrows */
.slide-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    padding: 0 1rem;
}

.slide-nav-btn {
    background: linear-gradient(135deg, var(--emerald-500) 0%, var(--teal-500) 100%);
    color: white;
    width: 60px;
    height: 60px;
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(26, 143, 128, 0.3);
}

.slide-nav-btn:hover:not(:disabled) {
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(26, 143, 128, 0.4);
}

.slide-nav-btn:disabled {
    background: var(--slate-200);
    color: var(--slate-400);
    cursor: not-allowed;
    box-shadow: none;
}

.slide-counter {
    font-weight: 600;
    color: var(--slate-500);
    font-size: 1.1rem;
}

/* Swipe Hint */
.swipe-hint {
    text-align: center;
    color: var(--slate-400);
    font-size: 0.9rem;
    margin-top: 1rem;
    animation: fadeInOut 3s ease-in-out;
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0; }
    20%, 80% { opacity: 1; }
}

.swipe-hint-icon {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 0.3rem;
    animation: swipeHint 2s ease-in-out infinite;
}

@keyframes swipeHint {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(10px); }
}

/* Responsive */
@media (max-width: 768px) {
    .story-scene {
        flex-direction: column;
        text-align: center;
    }

    .scene-illustration {
        margin: 0 auto;
    }

    .stories-container {
        grid-template-columns: 1fr;
    }

    .quiz-options {
        grid-template-columns: 1fr;
    }

    .story-title {
        font-size: 1.8rem;
    }

    .story-navigation {
        flex-direction: column;
        gap: 1rem;
    }

    .nav-btn {
        text-align: center;
    }

    /* Mobile Slide Navigation */
    .story-slides-container {
        min-height: 280px;
        max-height: 55vh;
    }

    .story-slide {
        padding: 1rem;
        max-height: 55vh;
    }

    .slide-nav-btn {
        width: 45px;
        height: 45px;
        font-size: 1rem;
    }

    .slide-progress {
        gap: 0.3rem;
        margin: 1rem 0;
    }

    .slide-dot {
        width: 8px;
        height: 8px;
    }

    .slide-navigation {
        margin-top: 1rem;
        padding: 0 0.5rem;
    }

    .slide-counter {
        font-size: 0.9rem;
    }

    .story-slide .scene-illustration {
        width: 60px;
        height: 60px;
        font-size: 2.5rem;
    }

    .story-slide .scene-text h2 {
        font-size: 1.1rem;
    }

    .story-slide .scene-text p {
        font-size: 0.95rem;
    }

    .story-slide .quiz-options {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }

    .story-slide .quiz-option {
        padding: 0.7rem;
        font-size: 0.85rem;
    }

    .name-modal-content {
        padding: 2rem;
    }

    .name-modal-content h2 {
        font-size: 1.5rem;
    }

    .modal-icon {
        font-size: 3rem;
    }

    /* Quiz and Video in Slide Mode - Mobile */
    .story-slide .quiz-intro .quiz-lantern {
        font-size: 2.5rem;
    }

    .story-slide .quiz-intro h2 {
        font-size: 1.2rem;
    }

    .story-slide .quiz-card {
        padding: 1rem;
    }

    .story-slide .quiz-results {
        padding: 1rem;
    }

    .story-slide .quiz-results .results-icon {
        font-size: 2.5rem;
    }

    .story-slide .video-frame iframe {
        height: 200px;
    }

    .story-slide .video-unlock h2 {
        font-size: 1.1rem;
    }
}

/* Small phones */
@media (max-width: 400px) {
    .story-slides-container {
        min-height: 250px;
        max-height: 50vh;
    }

    .story-slide {
        padding: 0.8rem;
        max-height: 50vh;
    }

    .story-slide .story-scene {
        padding: 1rem;
    }

    .slide-nav-btn {
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }
}

/* Touch-friendly adjustments */
@media (hover: none) and (pointer: coarse) {
    .quiz-option {
        padding: 1rem;
        font-size: 1rem;
        min-height: 48px;
    }

    .slide-nav-btn {
        min-width: 48px;
        min-height: 48px;
    }

    .slide-dot {
        min-width: 12px;
        min-height: 12px;
    }
}

/* =====================================================
   RTL (Right-to-Left) Support for Arabic
   ===================================================== */

/* Base RTL Direction */
html[lang="ar"] {
    direction: rtl;
}

html[lang="ar"] body {
    text-align: right;
}

/* Navbar RTL */
html[lang="ar"] .navbar {
    flex-direction: row-reverse;
}

html[lang="ar"] .nav-links {
    flex-direction: row-reverse;
}

html[lang="ar"] .logo {
    flex-direction: row-reverse;
}

/* Story Scene RTL */
html[lang="ar"] .story-scene {
    border-left: none;
    border-right: 5px solid var(--emerald-500);
    text-align: right;
}

/* Progress Bar RTL */
html[lang="ar"] .progress-text {
    right: auto;
    left: 10px;
}

html[lang="ar"] .progress-bar {
    background: linear-gradient(135deg, var(--gold) 0%, var(--emerald-500) 100%);
}

/* Story Navigation RTL */
html[lang="ar"] .story-navigation {
    flex-direction: row-reverse;
}

html[lang="ar"] .nav-btn {
    direction: rtl;
}

/* Lesson Box RTL */
html[lang="ar"] .lesson-box {
    border-left: none;
    border-right: 5px solid var(--emerald-500);
}

/* Fun Fact RTL */
html[lang="ar"] .fun-fact,
html[lang="ar"] .lesson-reveal {
    border-left: none;
    border-right: 4px solid var(--emerald-500);
}

/* Highlight Text RTL */
html[lang="ar"] .highlight-text {
    border-left: none;
    border-right: 4px solid var(--gold);
}

/* Modal RTL */
html[lang="ar"] .name-modal-content {
    text-align: right;
}

/* Personal Greeting RTL */
html[lang="ar"] .personal-greeting {
    direction: rtl;
}

/* Quiz Options RTL */
html[lang="ar"] .quiz-options {
    direction: rtl;
}

/* Video Container RTL */
html[lang="ar"] .video-container::before {
    right: auto;
    left: 20px;
}

/* Moral Takeaway RTL */
html[lang="ar"] .moral-takeaway {
    text-align: right;
}

/* Footer RTL */
html[lang="ar"] .footer-content {
    direction: rtl;
}

/* Floating Decorations - swap positions for RTL */
html[lang="ar"] .floating-star,
html[lang="ar"] .floating-lantern {
    /* Keep decorations as is since they're visual */
}

/* .lang-toggle-btn lives in styles.css, which every page loads. It used to be
   defined here as well, so the button looked and focused differently on story
   pages than on surah pages, and the 44px touch target only applied to one of
   them. Do not re-add it here. */
.lang-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Mobile RTL adjustments */
@media (max-width: 768px) {
    html[lang="ar"] .story-scene {
        text-align: center;
    }

    html[lang="ar"] .story-navigation {
        flex-direction: column;
    }

    html[lang="ar"] .navbar {
        flex-wrap: wrap;
    }
}

/* Slide Navigation RTL */
html[lang="ar"] .slide-navigation {
    flex-direction: row-reverse;
}

/* CRITICAL: Force slides container to LTR to prevent positioning issues */
html[lang="ar"] .story-slides-container {
    direction: ltr;
}

html[lang="ar"] .story-slides {
    direction: ltr;
}

/* But keep the slide content RTL for proper Arabic text display */
html[lang="ar"] .story-slide {
    direction: rtl;
    text-align: right;
}

/* Progress dots stay LTR for proper visual order */
html[lang="ar"] .slide-progress {
    direction: ltr;
}

/* Featured Card RTL */
html[lang="ar"] .story-select-card.featured::before {
    direction: rtl;
}

/* =====================================================
   FULLSCREEN MODE
   ===================================================== */

/* Fullscreen Toggle Button */
.fullscreen-toggle {
    position: fixed;
    top: 100px;
    right: 80px;
    background: var(--turquoise);
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 1.3rem;
    cursor: pointer;
    z-index: 100;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(99, 102, 241, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.fullscreen-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
}

/* RTL positioning */
html[lang="ar"] .fullscreen-toggle {
    right: auto;
    left: 80px;
}

/* Fullscreen Active State */
.story-container.fullscreen-active {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    z-index: 9999 !important;
    overflow-y: auto !important;
    padding: 2rem !important;
    background: linear-gradient(135deg, var(--parchment) 0%, var(--cobalt-wash) 100%) !important;
}

/* Hide header/footer in fullscreen */
body.fullscreen-mode header,
body.fullscreen-mode footer,
body.fullscreen-mode .floating-decorations {
    display: none !important;
}

body.fullscreen-mode {
    overflow: hidden;
}

body.fullscreen-mode .story-main {
    padding: 0;
    min-height: 100vh;
}

/* Fullscreen Controls */
.fullscreen-controls {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
    z-index: 10000;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.fullscreen-controls.faded {
    opacity: 0.3;
}

.fullscreen-controls:hover {
    opacity: 1;
}

.fullscreen-exit-btn {
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 25px;
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fullscreen-exit-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.05);
}

/* RTL fullscreen controls */
html[lang="ar"] .fullscreen-controls {
    right: auto;
    left: 20px;
}

/* Larger text in fullscreen */
.story-container.fullscreen-active .scene-text p {
    font-size: 1.3rem;
    line-height: 2;
}

.story-container.fullscreen-active .scene-text h2 {
    font-size: 1.8rem;
}

.story-container.fullscreen-active .scene-illustration {
    width: 120px;
    height: 120px;
    font-size: 5rem;
}

/* Mobile fullscreen adjustments */
@media (max-width: 768px) {
    .fullscreen-toggle {
        top: 80px;
        right: 60px;
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    html[lang="ar"] .fullscreen-toggle {
        right: auto;
        left: 60px;
    }

    .fullscreen-controls {
        top: 10px;
        right: 10px;
    }

    .fullscreen-exit-btn {
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
    }
}

/* =====================================================
   IMPROVED SLIDE CONTAINER DESIGN
   ===================================================== */

/* Enhanced Slide Container */
.story-slides-container {
    background: linear-gradient(145deg, #ffffff 0%, var(--parchment) 100%);
    border-radius: 25px;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(26, 143, 128, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    overflow: hidden;
    position: relative;
}

/* Decorative corner accents */
.story-slides-container::before {
    content: '✨';
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 1.2rem;
    opacity: 0.6;
    z-index: 10;
    animation: twinkle 2s ease-in-out infinite;
}

.story-slides-container::after {
    content: '🌟';
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 1.2rem;
    opacity: 0.6;
    z-index: 10;
    animation: twinkle 2s ease-in-out infinite 0.5s;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* Slide content improvements */
.story-slide {
    padding: 2rem;
}

.story-slide .story-scene {
    background: linear-gradient(145deg, #ffffff 0%, var(--parchment) 100%);
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* =====================================================
   BETTER NAVIGATION CONTROLS
   ===================================================== */

/* Larger, more colorful nav buttons */
.slide-nav-btn {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    font-size: 1.8rem;
    border: 4px solid transparent;
    position: relative;
    overflow: hidden;
}

.slide-nav-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 50%);
    border-radius: 50%;
}

.slide-nav-btn.prev-btn {
    background: linear-gradient(135deg, var(--teal-500) 0%, var(--emerald-500) 100%);
    box-shadow: 0 6px 20px rgba(26, 143, 128, 0.4);
}

.slide-nav-btn.next-btn {
    background: linear-gradient(135deg, var(--gold) 0%, var(--amber-600) 100%);
    box-shadow: 0 6px 20px rgba(192, 138, 46, 0.4);
}

.slide-nav-btn:hover:not(:disabled) {
    transform: scale(1.15);
}

.slide-nav-btn:disabled {
    background: linear-gradient(135deg, var(--rule-warm) 0%, var(--slate-400) 100%);
    box-shadow: none;
    opacity: 0.5;
}

/* Playful slide counter */
.slide-counter {
    background: linear-gradient(135deg, var(--gold-wash) 0%, var(--gold-pale) 100%);
    padding: 0.8rem 1.5rem;
    border-radius: 25px;
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--gold-ink);
    border: 3px solid var(--gold);
    box-shadow: 0 4px 15px rgba(192, 138, 46, 0.2);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.slide-counter::before {
    content: '📖';
    font-size: 1.3rem;
}

/* =====================================================
   SMOOTHER SLIDE TRANSITIONS
   ===================================================== */

.story-slides {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Slide entrance animations */
.story-slide {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.story-slide.active {
    opacity: 1;
    transform: scale(1);
}

/* =====================================================
   ANIMATED BACKGROUNDS
   ===================================================== */

/* Floating background elements for story container */
.story-container.interactive-story {
    position: relative;
    overflow: hidden;
}

.story-bg-animations {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.bg-star {
    position: absolute;
    font-size: 1rem;
    opacity: 0.3;
    animation: floatStar 8s ease-in-out infinite;
}

.bg-star:nth-child(1) { top: 10%; left: 5%; animation-delay: 0s; }
.bg-star:nth-child(2) { top: 20%; right: 8%; animation-delay: 1s; }
.bg-star:nth-child(3) { top: 50%; left: 3%; animation-delay: 2s; }
.bg-star:nth-child(4) { top: 70%; right: 5%; animation-delay: 3s; }
.bg-star:nth-child(5) { top: 85%; left: 10%; animation-delay: 4s; }

.bg-cloud {
    position: absolute;
    font-size: 2rem;
    opacity: 0.15;
    animation: floatCloud 15s ease-in-out infinite;
}

.bg-cloud:nth-child(6) { top: 15%; left: -5%; animation-delay: 0s; }
.bg-cloud:nth-child(7) { top: 45%; right: -5%; animation-delay: 5s; }
.bg-cloud:nth-child(8) { top: 75%; left: -5%; animation-delay: 10s; }

@keyframes floatStar {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.3;
    }
    50% {
        transform: translateY(-20px) rotate(180deg);
        opacity: 0.6;
    }
}

@keyframes floatCloud {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(100vw + 100%));
    }
}

/* =====================================================
   REDESIGNED PROGRESS INDICATOR
   ===================================================== */

/* Story journey path */
.slide-progress {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.3rem;
    margin: 1.5rem 0;
    padding: 1rem;
    background: linear-gradient(135deg, var(--parchment) 0%, var(--cobalt-wash) 100%);
    border-radius: 30px;
    position: relative;
}

/* Journey path line */
.slide-progress::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 4px;
    background: linear-gradient(90deg, var(--emerald-500) 0%, var(--gold) 100%);
    border-radius: 2px;
    transform: translateY(-50%);
    z-index: 0;
    opacity: 0.3;
}

/* Journey milestones (dots) */
.slide-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--slate-200);
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1;
    position: relative;
}

.slide-dot:hover {
    transform: scale(1.3);
    background: var(--teal-500);
}

.slide-dot.active {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, var(--emerald-500) 0%, var(--teal-500) 100%);
    border: 4px solid white;
    box-shadow: 0 4px 15px rgba(26, 143, 128, 0.4);
    transform: scale(1.2);
}

.slide-dot.completed {
    background: linear-gradient(135deg, var(--gold) 0%, var(--amber-600) 100%);
}

.slide-dot.completed::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 0.6rem;
    font-weight: bold;
}

/* Mobile progress adjustments */
@media (max-width: 768px) {
    .slide-nav-btn {
        width: 55px;
        height: 55px;
        font-size: 1.4rem;
    }

    .slide-counter {
        padding: 0.6rem 1rem;
        font-size: 1rem;
    }

    .slide-counter::before {
        font-size: 1rem;
    }

    .slide-dot {
        width: 12px;
        height: 12px;
    }

    .slide-dot.active {
        width: 18px;
        height: 18px;
    }

    .slide-progress {
        padding: 0.8rem;
        gap: 0.2rem;
    }
}


/* ============================================
   Memorization map on the Quran hub
   ============================================ */

.progress-strip {
    max-width: 1100px;
    margin: 0 auto 1.5rem;
    padding: 0 1.5rem;
}

.progress-strip-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    background: var(--gold-wash);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    padding: 0.9rem 1.4rem;
}

.progress-count {
    margin: 0;
    font-weight: 700;
    color: var(--gold-ink);
}

.resume-link {
    font-weight: 700;
    color: var(--turquoise-deep);
    text-decoration: none;
    border-bottom: 2px solid var(--rule-strong);
    padding-bottom: 2px;
}

.resume-link:hover {
    color: var(--gold-ink);
}

.progress-badge {
    align-self: flex-start;   /* .story-info is a flex column; do not stretch */
    width: fit-content;
    margin-bottom: 0.6rem;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    border-radius: var(--radius-full);
    padding: 0.35rem 0.85rem;
    /* 44px is the site's touch-target floor; this was 32. It matters more here
       than elsewhere: the badge sits inside the card's link, so a miss does not
       just do nothing - it navigates away to the surah. */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    border: 1px solid var(--rule);
    background: var(--card);
    color: var(--slate-500);
    transition: background 0.2s ease, color 0.2s ease;
}

.progress-badge[data-state="learning"] {
    background: var(--gold-pale);
    border-color: var(--gold);
    color: var(--gold-ink);
}

.progress-badge[data-state="memorized"] {
    background: var(--turquoise);
    border-color: var(--turquoise-deep);
    color: #fff;
}

.progress-badge:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}


/* ============================================
   Scene moods
   A scene reads differently at night, in a fire, or beside water. Each is a
   wash over the existing card, not a repaint - the manuscript ground still
   shows through, and text colour is untouched so contrast is unchanged.
   ============================================ */

.story-scene[data-mood] {
    transition: background 0.5s ease, border-color 0.5s ease;
}

/* first light, hope, a beginning */
.story-scene[data-mood="dawn"] {
    background: linear-gradient(135deg, var(--gold-wash) 0%, var(--parchment) 70%);
    border-left-color: var(--gold);
}

/* night, doubt, searching */
.story-scene[data-mood="night"] {
    background: linear-gradient(135deg, var(--cobalt-wash) 0%, var(--parchment) 70%);
    border-left-color: var(--cobalt);
}

/* water, the flood, the sea */
.story-scene[data-mood="water"] {
    background: linear-gradient(135deg, var(--cream-blue) 0%, var(--parchment) 70%);
    border-left-color: var(--turquoise);
}

/* fire, trial, heat */
.story-scene[data-mood="fire"] {
    background: linear-gradient(135deg, var(--gold-pale) 0%, var(--parchment) 70%);
    border-left-color: var(--gold-ink);
}

/* earth, building, the ordinary world */
.story-scene[data-mood="earth"] {
    background: linear-gradient(135deg, var(--parchment-warm) 0%, var(--parchment) 70%);
    border-left-color: var(--gold-ink-strong);
}

/* green, relief, safety, Jannah */
.story-scene[data-mood="garden"] {
    background: linear-gradient(135deg, var(--cream-blue) 0%, var(--parchment-warm) 70%);
    border-left-color: var(--emerald-500);
}

html[lang="ar"] .story-scene[data-mood] {
    border-left-color: transparent;
}

html[lang="ar"] .story-scene[data-mood="dawn"]   { border-right-color: var(--gold); }
html[lang="ar"] .story-scene[data-mood="night"]  { border-right-color: var(--cobalt); }
html[lang="ar"] .story-scene[data-mood="water"]  { border-right-color: var(--turquoise); }
html[lang="ar"] .story-scene[data-mood="fire"]   { border-right-color: var(--gold-ink); }
html[lang="ar"] .story-scene[data-mood="earth"]  { border-right-color: var(--gold-ink-strong); }
html[lang="ar"] .story-scene[data-mood="garden"] { border-right-color: var(--emerald-500); }

@media (prefers-reduced-motion: reduce) {
    .story-scene[data-mood] { transition: none; }
}

/* =====================================================
   SCENE PLATES
   An illuminated miniature at the head of each passage, in place of the
   100px emoji roundel. Two decorations on one card compete with each other,
   and at 100px the roundel could not have carried a picture anyway.

   Only scenes marked .has-plate change; the roundel rules below are left
   intact so any scene without art still looks the way it always did.
   The plates are generated locally — see scripts/build-illustrations.py.
   ===================================================== */

.story-scene.has-plate {
    flex-direction: column;
    gap: 1.25rem;
}

.story-scene.has-plate .scene-illustration {
    /* Beat the roundel: width/height/radius/background all come from
       .scene-illustration above, and the slide and 480px rules reset the
       box again further down. */
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    background: var(--parchment-warm);
    border: 1px solid var(--rule-warm);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
    overflow: hidden;
    font-size: 0;
}

.scene-plate {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Belt and braces. The plate carries width/height attributes so the browser
   can reserve its space before the file arrives, which also means that if
   this stylesheet ever fails to reach a browser holding a cached copy, the
   raw <img> would render at its intrinsic 960px and shove itself straight
   through the scene text. It happened once, on a cached sheet. These two
   lines are what stop it, and they are deliberately not scoped to
   .has-plate so nothing can select its way around them. The ?v= on the
   stylesheet link is the other half of the fix. */
img.scene-plate,
img.story-cover {
    max-width: 100%;
    max-height: 100%;
}

/* The plate is the same picture either way round, so RTL needs no mirror —
   but the column layout must survive the row-reverse rules above. */
html[lang="ar"] .story-scene.has-plate {
    flex-direction: column;
}

/* Slide mode re-sizes the roundel to 80px; take the box back. */
.story-slide .story-scene.has-plate .scene-illustration {
    width: 100%;
    height: auto;
    margin: 0 0 0.5rem 0;
}

@media (max-width: 768px) {
    .story-scene.has-plate .scene-illustration {
        margin: 0;
    }
}

@media (max-width: 480px) {
    .story-slide .story-scene.has-plate .scene-illustration {
        width: 100%;
        height: auto;
    }
}

/* Printing a story to read aloud: keep the plate, drop its shadow. */
@media print {
    .story-scene.has-plate .scene-illustration {
        box-shadow: none;
        break-inside: avoid;
    }
}

/* Hub cards carry the story's cover plate instead of an emoji. The girih
   wash above still shows through at its own low opacity; the roundel that
   framed the emoji is dropped, since there is no longer an emoji in it. */
.story-thumbnail.has-cover {
    padding: 0;
    font-size: 0;
    aspect-ratio: 16 / 9;
}

.story-thumbnail.has-cover::after {
    content: none;
}

.story-cover {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}