/**
 * Raeel Theme - Design System
 * Custom Styles for Tailwind CSS
 * Based on Stitch UI Designs
 */

/* ==========================================
   1. ANIMATED ISLAMIC GEOMETRIC BACKGROUND
   ========================================== */

/* Main geometric pattern - Authentic 8-pointed star Girih */
.islamic-pattern-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.islamic-pattern-layer {
    position: absolute;
    inset: 0;
    /* Option B: Moroccan Star & Arc — 4-pointed stars with curved corner arcs */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23E5B13A' stroke-width='0.7'%3E%3Cpath d='M50,0 L62,38 L100,50 L62,62 L50,100 L38,62 L0,50 L38,38 Z' stroke-opacity='0.08'/%3E%3Crect x='30' y='30' width='40' height='40' transform='rotate(45 50 50)' stroke-opacity='0.06'/%3E%3Cpath d='M0,20 Q20,20 20,0' stroke-opacity='0.08'/%3E%3Cpath d='M80,0 Q80,20 100,20' stroke-opacity='0.08'/%3E%3Cpath d='M100,80 Q80,80 80,100' stroke-opacity='0.08'/%3E%3Cpath d='M20,100 Q20,80 0,80' stroke-opacity='0.08'/%3E%3C/g%3E%3C/svg%3E");
    /* Option C: Octagon & Square Lattice — uncomment to swap */
    /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23E5B13A' stroke-width='0.6'%3E%3Cpolygon points='30,15 50,15 65,30 65,50 50,65 30,65 15,50 15,30' stroke-opacity='0.08'/%3E%3Cpath d='M30,0 L30,15 M50,0 L50,15 M30,65 L30,80 M50,65 L50,80' stroke-opacity='0.08'/%3E%3Cpath d='M0,30 L15,30 M0,50 L15,50 M65,30 L80,30 M65,50 L80,50' stroke-opacity='0.08'/%3E%3Cline x1='15' y1='30' x2='0' y2='15' stroke-opacity='0.08'/%3E%3Cline x1='30' y1='15' x2='15' y2='0' stroke-opacity='0.08'/%3E%3Cline x1='50' y1='15' x2='65' y2='0' stroke-opacity='0.08'/%3E%3Cline x1='65' y1='30' x2='80' y2='15' stroke-opacity='0.08'/%3E%3Cline x1='65' y1='50' x2='80' y2='65' stroke-opacity='0.08'/%3E%3Cline x1='50' y1='65' x2='65' y2='80' stroke-opacity='0.08'/%3E%3Cline x1='30' y1='65' x2='15' y2='80' stroke-opacity='0.08'/%3E%3Cline x1='15' y1='50' x2='0' y2='65' stroke-opacity='0.08'/%3E%3C/g%3E%3C/svg%3E"); */
    background-size: 80px 80px;
    animation: patternDrift 120s linear infinite;
}

.islamic-pattern-layer-2 {
    position: absolute;
    inset: 0;
    /* User-provided Authentic Islamic Star Pattern (Back Layer, Smaller) */
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath fill='none' stroke='%23E5B13A' stroke-width='3' stroke-opacity='0.1' d='M488.842,243.599l-60.624-60.898V96.582c0-5.141-5.262-8.145-10.403-8.145h-86.119l-60.897-61.478 c-3.636-3.634-9.529-3.343-13.166,0.291l-60.897,61.188h-86.122c-5.141,0-8.215,3.004-8.215,8.145v86.12l-61.443,60.897 c-1.745,1.747-3,4.114-3,6.583s1.391,4.836,3.136,6.583l61.307,60.897v86.12c0,5.141,3.074,10.473,8.215,10.473h86.122 l60.897,60.314c1.818,1.818,4.2,2.436,6.583,2.436c2.383,0,4.765-0.473,6.583-2.291l60.895-60.459h86.12 c5.141,0,10.403-5.332,10.403-10.473v-86.12l60.351-60.897C492.204,253.128,492.477,247.235,488.842,243.599z M102.4,291.33 l-41.149-41.148l41.149-41.149V291.33z M264.216,47.287l41.149,41.149h-82.298L264.216,47.287z M121.018,107.055h57.1l-57.1,57.03 V107.055z M121.018,395.636v-59.357l57.1,59.357H121.018z M264.216,455.402l-41.148-41.148h82.295L264.216,455.402z M409.6,395.636h-59.287l59.287-59.357V395.636z M409.6,309.95l-85.618,85.686H204.449l-83.431-85.689V190.415l83.431-83.36 h119.534l85.617,83.359V309.95z M409.6,164.083l-59.286-57.028H409.6V164.083z M428.218,291.332v-82.3l41.15,41.15 L428.218,291.332z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-size: 120px 120px;
    animation: patternDrift 180s linear infinite reverse;
}

/*
*.islamic-pattern-layer-2 {
*    position: absolute;
*    inset: 0;
*    /* User-provided Authentic Islamic Star Pattern (Back Layer, Smaller) 
*    background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath fill='none' stroke='%23E5B13A' stroke-width='3' stroke-opacity='0.1' d='M488.842,243.599l-60.624-60.898V96.582c0-5.141-5.262-8.145-10.403-8.145h-86.119l-60.897-61.478 c-3.636-3.634-9.529-3.343-13.166,0.291l-60.897,61.188h-86.122c-5.141,0-8.215,3.004-8.215,8.145v86.12l-61.443,60.897 c-1.745,1.747-3,4.114-3,6.583s1.391,4.836,3.136,6.583l61.307,60.897v86.12c0,5.141,3.074,10.473,8.215,10.473h86.122 l60.897,60.314c1.818,1.818,4.2,2.436,6.583,2.436c2.383,0,4.765-0.473,6.583-2.291l60.895-60.459h86.12 c5.141,0,10.403-5.332,10.403-10.473v-86.12l60.351-60.897C492.204,253.128,492.477,247.235,488.842,243.599z M102.4,291.33 l-41.149-41.148l41.149-41.149V291.33z M264.216,47.287l41.149,41.149h-82.298L264.216,47.287z M121.018,107.055h57.1l-57.1,57.03 V107.055z M121.018,395.636v-59.357l57.1,59.357H121.018z M264.216,455.402l-41.148-41.148h82.295L264.216,455.402z M409.6,395.636h-59.287l59.287-59.357V395.636z M409.6,309.95l-85.618,85.686H204.449l-83.431-85.689V190.415l83.431-83.36 h119.534l85.617,83.359V309.95z M409.6,164.083l-59.286-57.028H409.6V164.083z M428.218,291.332v-82.3l41.15,41.15 L428.218,291.332z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
*    background-size: 80px 80px;
*    animation: patternDrift 180s linear infinite reverse;
*}
*/

@keyframes patternDrift {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 1000px 1000px;
    }
}

/* Girih pattern layers (legacy - keeping for backward compat if needed, but hiding) */
.girih-layer-1,
.girih-layer-2 {
    display: none;
}

/* ==========================================
   SUGGESTIONS DROPDOWN (Classic/Poem Search)
   ========================================== */

#suggestions {
    background: rgba(28, 46, 38, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
}

#suggestions .suggestion-item {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 1rem;
    transition: all 0.2s;
}

#suggestions .suggestion-item:hover,
#suggestions .suggestion-item.active {
    background: rgba(17, 212, 98, 0.15);
}

#suggestions .suggestion-item .suggestion-name {
    color: #fff;
    font-weight: 500;
}

#suggestions .suggestion-item:last-child {
    border-bottom: none;
}

/* ==========================================
   GAME FADE STATE (Victory Show)
   ========================================== */

.game-faded main,
.game-faded .fixed.bottom-0 {
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.game-faded #victory-panel {
    opacity: 1;
    pointer-events: auto;
}

/* ==========================================
   2. GLASS PANEL EFFECTS
   ========================================== */
.glass-panel {
    background: rgba(4, 25, 20, 0.96);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(229, 177, 58, 0.15);
    box-shadow: 0 12px 60px 0 rgba(0, 0, 0, 0.8);
}

.glass-panel-light {
    background: rgba(10, 47, 34, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ==========================================
   3. GOLD EFFECTS
   ========================================== */
.gold-border-glow {
    box-shadow: 0 0 50px rgba(229, 177, 58, 0.08), inset 0 0 20px rgba(229, 177, 58, 0.02);
}

.gold-button-glow {
    box-shadow: 0 0 30px rgba(229, 177, 58, 0.2), 0 4px 20px rgba(0, 0, 0, 0.5);
}

.gold-text-glow {
    text-shadow: 0 0 12px rgba(229, 177, 58, 0.3);
}

.vibrant-gold-gradient {
    background: linear-gradient(135deg, #B8860B 0%, #E5B13A 50%, #FFD700 100%);
}

.vibrant-gold-text {
    background: linear-gradient(to bottom, #FFD700, #E5B13A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ==========================================
   4. GAME MODE CARD STYLES
   ========================================== */
.mode-card {
    position: relative;
    overflow: hidden;
    border-radius: 2.8rem;
    padding: 0.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.mode-card:hover {
    transform: translateY(-8px);
}

.mode-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(229, 177, 58, 0.1), transparent, transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.mode-card:hover::before {
    opacity: 1;
}

/* ==========================================
   5. SCROLLBAR STYLING
   ========================================== */
.custom-scrollbar::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ==========================================
   6. COMPARISON TABLE (CLASSIC MODE)
   ========================================== */
.guess-cell {
    display: flex;
    height: 5rem;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
}

.guess-cell.correct {
    background-color: #10b981;
    color: #000;
}

.guess-cell.partial {
    background-color: #f59e0b;
    color: #000;
}

.guess-cell.incorrect {
    background-color: rgba(239, 68, 68, 0.9);
    color: #fff;
}

/* ==========================================
   7. HADITH MODE LETTER TILES
   ========================================== */
.letter-tile {
    width: 2.5rem;
    height: 3rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
    .letter-tile {
        width: 3rem;
        height: 3.5rem;
        font-size: 1.5rem;
    }
}

.letter-tile.filled {
    background-color: #10b981;
    color: #fff;
    border-bottom: 4px solid #059669;
}

.letter-tile.hint {
    background-color: #fbbf24;
    color: #1e293b;
    border-bottom: 4px solid #d97706;
}

.letter-tile.empty {
    background-color: rgba(30, 41, 59, 0.5);
    border: 1px solid #475569;
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
}

/* ==========================================
   8. POETRY MODE ORNATE CORNERS
   ========================================== */
.ornate-corner {
    position: absolute;
    width: 60px;
    height: 60px;
    color: #f4c025;
    pointer-events: none;
}

.corner-tl {
    top: -4px;
    left: -4px;
}

.corner-tr {
    top: -4px;
    right: -4px;
    transform: rotate(90deg);
}

.corner-bl {
    bottom: -4px;
    left: -4px;
    transform: rotate(-90deg);
}

.corner-br {
    bottom: -4px;
    right: -4px;
    transform: rotate(180deg);
}

/* ==========================================
   9. ANIMATIONS
   ========================================== */
@keyframes pulse-gold {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

.animate-pulse-gold {
    animation: pulse-gold 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ==========================================
   10. UTILITY OVERRIDES
   ========================================== */
.nav-link:hover .material-symbols-outlined {
    transform: translateY(-2px);
}

/* Input focus states */
input:focus {
    outline: none;
}

/* RTL adjustments */
[dir="rtl"] .material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ==========================================
   11. UNIFIED PAGE LAYOUT
   ========================================== */
.page-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #102218;
    position: relative;
    overflow-x: hidden;
}

.page-header {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid rgba(40, 57, 47, 1);
    background: rgba(17, 24, 20, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.page-main {
    flex: 1;
    position: relative;
}

/* ==========================================
   12. ICON BORDERS (Old background style)
   ========================================== */
.icon-border-classic {
    background: rgba(17, 24, 20, 0.6);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

/* ==========================================
   13. LEGACY COMPATIBILITY STYLES
   ========================================== */
.hint-buttons-container {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 1rem;
}

/* Arrow indicators for comparison cells */
.comparison-cell.arrow-up .cell-content::after,
.comparison-cell.arrow-down .cell-content::after {
    font-family: 'Material Symbols Outlined';
    font-size: 1rem;
    margin-top: 0.25rem;
}

.comparison-cell.arrow-up .cell-content::after {
    content: 'arrow_upward';
}

.comparison-cell.arrow-down .cell-content::after {
    content: 'arrow_downward';
}

/* Hint Buttons Styling */
.hint-button {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #10b981;
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 80px;
}

.hint-button:hover:not(:disabled) {
    background: rgba(16, 185, 129, 0.2);
    transform: translateY(-2px);
}

.hint-button.disabled,
.hint-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #9ca3af;
}

.hint-number {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 0.25rem;
}

.hint-text {
    font-size: 0.8rem;
}

/* Classic Mode Content Text */
.content-text {
    color: #e2e8f0;
    line-height: 1.6;
    font-size: 1.1rem;
}

.content-text h5 {
    color: #fbbf24;
    font-weight: bold;
    border-bottom: 1px solid rgba(251, 191, 36, 0.2);
    padding-bottom: 0.5rem;
}

/* ==========================================
   14. STITCH HINT CARDS (Classic Mode)
   ========================================== */
.hint-card {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.hint-card-icon {
    display: flex;
    width: 3rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    flex-shrink: 0;
}

.hint-card-icon .material-symbols-outlined {
    font-size: 1.5rem;
}

.hint-card-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.hint-card-label {
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hint-card-text {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0;
}

/* Locked State */
.hint-card-locked {
    background: rgba(28, 46, 38, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: not-allowed;
}

.hint-card-locked .hint-card-icon {
    background: rgba(40, 57, 47, 1);
    color: rgba(251, 191, 36, 0.5);
}

.hint-card-locked .hint-card-label {
    color: rgba(251, 191, 36, 0.7);
}

.hint-card-locked .hint-card-text {
    color: #9ca3af;
}

/* Available State (Gold Glow) */
.hint-card-available {
    background: #fbbf24;
    border: 2px solid rgba(251, 191, 36, 0.6);
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
    transform: scale(1.02);
    opacity: 1;
}

.hint-card-available .hint-card-icon {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    animation: pulse-gold 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.hint-card-available .hint-card-label {
    color: rgba(16, 34, 24, 0.8);
}

.hint-card-available .hint-card-text {
    color: #102218;
}

.hint-card-available:hover {
    transform: scale(1.04);
    box-shadow: 0 0 30px rgba(251, 191, 36, 0.5);
}

/* Revealed State (Green Info) */
.hint-card-revealed {
    background: rgba(28, 46, 38, 1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 1;
    cursor: default;
}

.hint-card-revealed .hint-card-icon {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.hint-card-revealed .hint-card-label {
    color: #10b981;
}

.hint-card-revealed .hint-card-text {
    color: #fff;
}

/* ==========================================
   HADITH LETTER TILES
   ========================================== */

/* Reset hadith-blank container to remove legacy styles */
.hadith-blank {
    display: inline;
    border: none !important;
    background: transparent !important;
    padding: 0;
    margin: 0;
}

/* Hadith text with increased line spacing */
#hadith-text {
    line-height: 2.3 !important;
    /* 15% increase from default */
}

/* Base Letter Tile - 20% smaller */
.letter-tile {
    width: 32px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 6px;
    margin: 1px;
    transition: all 0.3s ease;
    cursor: pointer;
    user-select: none;
    outline: none;
}

/* Empty state */
.letter-tile.empty {
    background: rgba(17, 24, 20, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.3);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Focused state */
.letter-tile.focused {
    border-color: #D4AF37;
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.5);
}

/* Correct - green (letter is right AND in correct position) */
.letter-tile.correct {
    background: #11d462;
    border: 2px solid #0fa855;
    color: #102218;
    box-shadow: 0 4px 0 #0a7a3d, 0 0 15px rgba(17, 212, 98, 0.4);
}

/* Misplaced - yellow (letter exists but wrong position) */
.letter-tile.misplaced {
    background: #f59e0b;
    border: 2px solid #d97706;
    color: #102218;
    box-shadow: 0 4px 0 #b45309, 0 0 15px rgba(245, 158, 11, 0.4);
}

/* Wrong - red (letter not in word, fades out) */
.letter-tile.wrong {
    background: #ef4444;
    border: 2px solid #dc2626;
    color: #fff;
    box-shadow: 0 4px 0 #b91c1c;
    animation: fadeOutTile 2s ease forwards;
}

@keyframes fadeOutTile {

    0%,
    60% {
        opacity: 1;
        background: #ef4444;
    }

    100% {
        opacity: 0.5;
        background: rgba(17, 24, 20, 0.8);
        border-color: rgba(255, 255, 255, 0.15);
        color: transparent;
    }
}

/* Hint - gold with shine animation, glass morphism, and gradient overlay */
.letter-tile.hint {
    background: rgba(212, 175, 55, 0.95);
    border: 2px solid #D4AF37;
    color: #102219;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.5),
        0 0 40px rgba(212, 175, 55, 0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: relative;
    animation: goldShine 2s ease-in-out infinite;
}

/* Gradient shine overlay for hint tiles */
.letter-tile.hint::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 50%);
    pointer-events: none;
}

@keyframes goldShine {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.5),
            0 0 40px rgba(212, 175, 55, 0.3),
            inset 0 2px 4px rgba(255, 255, 255, 0.3);
    }

    50% {
        box-shadow: 0 0 30px rgba(212, 175, 55, 0.7),
            0 0 60px rgba(212, 175, 55, 0.5),
            inset 0 2px 4px rgba(255, 255, 255, 0.4);
    }
}

/* Letter tile container (inline with hadith text) */
.hadith-blank-tiles {
    display: inline-flex;
    flex-direction: row;
    /* Normal row - Arabic RTL is handled by parent */
    gap: 2px;
    margin: 0 6px;
    vertical-align: baseline;
    position: relative;
    top: -0.15em;
    /* Move up to align with text */
}

/* Bottom input bar for hadith */
.hadith-input-bar {
    background: rgba(10, 47, 34, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 12px;
    display: flex;
    gap: 12px;
    align-items: center;
    backdrop-filter: blur(10px);
}

.hadith-input-bar input {
    flex: 1;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.25rem;
    text-align: center;
    outline: none;
}

.hadith-input-bar input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* Responsive adjustments */
@media (min-width: 768px) {
    .letter-tile {
        width: 38px;
        height: 45px;
        font-size: 1.125rem;
    }
}

/* ==========================================
   UNIFIED STICKY BOTTOM BAR (Stitch Style)
   ========================================== */

.hadith-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 12px 16px;
    background: linear-gradient(to top, rgba(10, 30, 22, 0.98) 0%, rgba(10, 30, 22, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.4);
}

.hadith-bar-container {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    /* Default: 2 rows for mobile */
    gap: 12px;
    background: rgba(17, 24, 20, 0.95);
    border-radius: 16px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.hadith-nav-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
}

.hadith-actions-row {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
}

/* Desktop: Switch to single row */
@media (min-width: 768px) {
    .hadith-bar-container {
        flex-direction: row;
        padding: 8px 12px;
        gap: 8px;
    }

    .hadith-nav-row {
        width: auto;
        gap: 8px;
    }

    .hadith-actions-row {
        width: auto;
        flex: 1;
    }
}

.hadith-bar-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: #fff;
    font-size: 16px;
    /* Prevent iOS zoom */
    font-weight: 500;
    text-align: center;
    padding: 10px 12px;
    border-radius: 12px;
    direction: rtl;
    min-width: 0;
}

.hadith-bar-input:focus {
    border-color: #fbbf24;
    background: rgba(255, 255, 255, 0.12);
}

.hadith-bar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    color: #fff;
    flex-shrink: 0;
}

.hadith-bar-btn:active {
    transform: scale(0.95);
}

/* Navigation buttons */
.hadith-bar-btn-nav {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

.hadith-bar-btn-nav:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.3);
}

/* Blank Indicator */
.hadith-bar-indicator {
    font-family: 'Amiri', serif;
    font-size: 1.1rem;
    color: #fbbf24;
    font-weight: 700;
    padding: 0 4px;
    min-width: 40px;
    text-align: center;
}

.hadith-bar-btn-add {
    background: rgba(251, 191, 36, 0.2);
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: #fbbf24;
}

.hadith-bar-btn-add:hover {
    background: #fbbf24;
    color: #102218;
}

.hadith-bar-btn-check {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #10b981;
}

.hadith-bar-btn-check:hover {
    background: #10b981;
    color: #fff;
}

.hadith-bar-btn-clear {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.hadith-bar-btn-clear:hover {
    background: #ef4444;
    color: #fff;
}

.hadith-bar-divider {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 4px;
}

/* Selected blank highlight */
.hadith-blank-tiles.selected {
    position: relative;
    z-index: 10;
}

.hadith-blank-tiles.selected::after {
    content: '';
    position: absolute;
    inset: -6px -8px;
    border: 2px solid #fbbf24;
    border-radius: 8px;
    background: rgba(251, 191, 36, 0.05);
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.2);
    pointer-events: none;
    animation: pulse-gold-border 2s infinite;
    z-index: -1;
}

@keyframes pulse-gold-border {

    0%,
    100% {
        border-color: rgba(251, 191, 36, 0.8);
        box-shadow: 0 0 15px rgba(251, 191, 36, 0.2);
    }

    50% {
        border-color: rgba(251, 191, 36, 0.4);
        box-shadow: 0 0 5px rgba(251, 191, 36, 0.1);
    }
}

/* Mobile hidden input */
#mobile-keyboard-input {
    position: fixed;
    top: -1000px;
    left: -1000px;
    opacity: 0;
    pointer-events: none;
    font-size: 16px;
    /* Prevent zoom */
}

/* ==========================================
   TOAST NOTIFICATIONS
   ========================================== */

.toast-container {
    position: fixed;
    bottom: 90px;
    /* Above the sticky bar */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.toast {
    background: rgba(17, 24, 20, 0.95);
    color: #fff;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 500;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    animation: toastIn 0.3s ease, toastOut 0.3s ease 5.7s forwards;
    pointer-events: auto;
}

.toast.success {
    border-color: rgba(39, 174, 96, 0.4);
    background: rgba(39, 174, 96, 0.15);
}

.toast.warning {
    border-color: rgba(212, 175, 55, 0.4);
    background: rgba(212, 175, 55, 0.15);
}

.toast.error {
    border-color: rgba(231, 76, 60, 0.4);
    background: rgba(231, 76, 60, 0.15);
}

.toast.info {
    border-color: rgba(52, 152, 219, 0.4);
    background: rgba(52, 152, 219, 0.15);
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes toastOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* ==========================================
   VICTORY SCREEN STYLES
   ========================================== */

/* Overlay backdrop */
/* Overlay backdrop */
.victory-overlay {
    position: fixed;
    inset: 0;
    z-index: 19;
    /* Below header (z-20) */
    display: none;
    align-items: flex-start;
    /* Changed from center to allow scrolling */
    justify-content: center;
    background: transparent;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    animation: victoryFadeIn 0.4s ease;
    padding: 5rem 1rem 2rem 1rem;
    /* Added top padding for navbar clearance */
    overflow-y: auto;
    /* Enable vertical scrolling */
}

@keyframes victoryFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Main victory card */
/* Main victory card */
.victory-card {
    background: #102218;
    /* Solid background color (no transparency) to prevent glitches */
    border: 1px solid rgba(229, 177, 58, 0.2);
    border-radius: 2rem;
    box-shadow: 0 12px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(229, 177, 58, 0.1);
    width: 100%;
    max-width: 480px;
    padding: 2rem;
    animation: victorySlideUp 0.5s ease;
    position: relative;
    overflow: hidden;
    margin: auto;
    /* Center vertically if space allows */
}

/* Force Input Colors */
#guess-input,
#quick-word-input,
#bonus-input {
    color: #ffffff !important;
    background-color: #1c2e26 !important;
    -webkit-text-fill-color: #ffffff !important;
    /* For some webkit browsers */
}

#guess-input::placeholder,
#quick-word-input::placeholder,
#bonus-input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.5) !important;
}

@keyframes victorySlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Decorative particles */
.victory-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(16, 185, 129, 0.4);
    border-radius: 50%;
}

/* Victory header */
.victory-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.victory-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: rgba(16, 185, 129, 0.15);
    border-radius: 50%;
    margin-bottom: 1rem;
    position: relative;
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.2);
}

.victory-icon-wrapper .material-symbols-outlined {
    font-size: 2.5rem;
    color: #10B981;
}

.victory-icon-sparkle {
    position: absolute;
    top: -4px;
    right: -4px;
    color: #fbbf24;
    font-size: 1.25rem;
    animation: sparkle 2s ease infinite;
}

@keyframes sparkle {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.2);
    }
}

.victory-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.5rem 0;
}

.victory-subtitle {
    color: rgba(16, 185, 129, 0.8);
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
}

/* Answer reveal box */
.victory-answer {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1rem;
    padding: 1rem;
    text-align: center;
    margin-bottom: 1.5rem;
}

.victory-answer-label {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-bottom: 0.25rem;
}

.victory-answer-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: #10B981;
    margin: 0;
}

/* Stats grid */
.victory-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.victory-stat-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1rem;
    padding: 1rem;
    text-align: center;
    transition: all 0.2s;
}

.victory-stat-card:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: scale(1.02);
}

.victory-stat-card .material-symbols-outlined {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.victory-stat-card.gold .material-symbols-outlined {
    color: #fbbf24;
}

.victory-stat-card.green .material-symbols-outlined {
    color: #10B981;
}

.victory-stat-card.blue .material-symbols-outlined {
    color: #3b82f6;
}

.victory-stat-label {
    font-size: 0.75rem;
    color: #9ca3af;
    display: block;
}

.victory-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin-top: 0.25rem;
}

/* Attempt grid (Classic mode) */
.victory-attempt-grid {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.victory-attempt-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.victory-attempt-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #d1d5db;
}

.victory-attempt-toggle {
    font-size: 0.75rem;
    color: #10B981;
    background: none;
    border: none;
    cursor: pointer;
}

.victory-attempt-rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}

.victory-attempt-row {
    display: flex;
    gap: 0.5rem;
}

.victory-attempt-dot {
    width: 14px;
    height: 14px;
    border-radius: 3px;
}

.victory-attempt-dot.correct {
    background-color: #10B981;
}

.victory-attempt-dot.partial {
    background-color: #F59E0B;
}

.victory-attempt-dot.incorrect {
    background-color: #374151;
}

.victory-attempt-dot.wrong {
    background-color: #EF4444;
}

/* Leaderboard section */
.victory-leaderboard {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.victory-leaderboard-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #d1d5db;
    margin-bottom: 1rem;
}

.victory-leaderboard-header .material-symbols-outlined {
    color: #fbbf24;
    font-size: 1rem;
}

.victory-leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.victory-leaderboard-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.victory-leaderboard-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.victory-leaderboard-rank {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}

.victory-leaderboard-rank.first {
    background: rgba(16, 185, 129, 0.2);
    color: #10B981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.victory-leaderboard-rank.other {
    background: #1e293b;
    color: #9ca3af;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.victory-leaderboard-rank.current {
    background: rgba(16, 185, 129, 0.2);
    color: #10B981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.victory-leaderboard-name {
    font-size: 0.875rem;
    color: #fff;
}

.victory-leaderboard-name.current {
    color: #10B981;
    font-weight: 700;
}

.victory-leaderboard-points {
    font-size: 0.75rem;
    font-weight: 700;
}

.victory-leaderboard-points.first {
    color: #fbbf24;
}

.victory-leaderboard-points.other {
    color: #9ca3af;
}

.victory-leaderboard-points.current {
    color: #10B981;
}

.victory-leaderboard-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
    margin: 0.5rem 0;
}

/* Action buttons */
.victory-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.victory-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: 1rem;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.victory-btn-primary {
    background: #10B981;
    color: #fff;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.victory-btn-primary:hover {
    background: #059669;
    transform: translateY(-2px);
}

.victory-btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.victory-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
}

.victory-btn-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

/* Countdown timer */
.victory-countdown {
    text-align: center;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.victory-countdown-label {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-bottom: 0.75rem;
}

.victory-countdown-timer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.victory-countdown-digit {
    background: rgba(0, 0, 0, 0.4);
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: #fbbf24;
}

.victory-countdown-separator {
    color: #4b5563;
    font-size: 1rem;
}

/* SCORING DISPLAY - Score badge and bonuses */
.victory-score-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 1rem;
}

.victory-score-badge {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.victory-score-rank {
    font-size: 1.25rem;
    font-weight: 800;
}

.victory-score-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.victory-score-value {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.victory-score-label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.15rem;
}

.victory-bonuses {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(229, 177, 58, 0.08);
    border: 1px solid rgba(229, 177, 58, 0.2);
    border-radius: 0.75rem;
}

.victory-bonuses-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #E5B13A;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.victory-bonuses-header .material-symbols-outlined {
    font-size: 1rem;
}

.victory-bonuses-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.victory-bonus-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
}

.victory-bonus-points {
    color: #10b981;
    font-weight: 700;
    min-width: 2rem;
}

.victory-athar-multiplier {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 0.75rem;
    font-size: 0.85rem;
    color: #10b981;
    font-weight: 600;
}

.victory-athar-multiplier .material-symbols-outlined {
    font-size: 1.1rem;
}

/* POEM MODE - Ornate frame */
.victory-poet-frame {
    position: relative;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, rgba(0, 0, 0, 0.2) 100%);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 1.5rem;
    padding: 2rem;
    margin-bottom: 1.5rem;
}

.victory-poet-corner {
    position: absolute;
    width: 40px;
    height: 40px;
    border: 2px solid #D4AF37;
}

.victory-poet-corner.tl {
    top: -1px;
    left: -1px;
    border-right: none;
    border-bottom: none;
    border-radius: 1rem 0 0 0;
}

.victory-poet-corner.tr {
    top: -1px;
    right: -1px;
    border-left: none;
    border-bottom: none;
    border-radius: 0 1rem 0 0;
}

.victory-poet-corner.bl {
    bottom: -1px;
    left: -1px;
    border-right: none;
    border-top: none;
    border-radius: 0 0 0 1rem;
}

.victory-poet-corner.br {
    bottom: -1px;
    right: -1px;
    border-left: none;
    border-top: none;
    border-radius: 0 0 1rem 0;
}

.victory-poet-badge {
    display: inline-block;
    background: rgba(212, 175, 55, 0.1);
    color: #D4AF37;
    padding: 0.25rem 1rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid rgba(212, 175, 55, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
}

.victory-poet-name {
    font-size: 2.5rem;
    font-weight: 700;
    color: #D4AF37;
    margin: 0 0 0.75rem 0;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

.victory-poet-divider {
    width: 6rem;
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(212, 175, 55, 0.5), transparent);
    margin: 0 auto 1rem auto;
}

.victory-poet-description {
    color: rgba(203, 188, 144, 0.9);
    font-size: 1rem;
    line-height: 1.6;
    font-style: italic;
    margin: 0;
}

/* Circular progress stats for Poem mode */
.victory-circular-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.victory-circular-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    background: rgba(6, 78, 59, 0.2);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 1rem;
    padding: 1.25rem 0.75rem;
}

.victory-circular-ring {
    position: relative;
    width: 72px;
    height: 72px;
}

.victory-circular-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.victory-circular-ring circle {
    fill: none;
    stroke-width: 3;
}

.victory-circular-ring .bg {
    stroke: rgba(212, 175, 55, 0.1);
}

.victory-circular-ring .progress {
    stroke: #D4AF37;
    stroke-linecap: round;
}

.victory-circular-value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
}

.victory-circular-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #fff;
    text-align: center;
}

.victory-circular-sublabel {
    font-size: 0.75rem;
    color: #10B981;
    text-align: center;
}

/* HADITH MODE - Quote reveal */
.victory-quote-container {
    position: relative;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, rgba(0, 0, 0, 0.2) 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1.5rem;
    padding: 2.5rem 2rem;
    margin-bottom: 1.5rem;
}

.victory-quote-container::before,
.victory-quote-container::after {
    content: '"';
    position: absolute;
    font-family: 'Amiri', serif;
    font-size: 6rem;
    opacity: 0.1;
    color: #D4AF37;
    line-height: 1;
}

.victory-quote-container::before {
    top: -10px;
    right: 15px;
}

.victory-quote-container::after {
    bottom: -40px;
    left: 15px;
}

.victory-quote-text {
    font-family: 'Amiri', serif;
    font-size: 1.5rem;
    text-align: center;
    line-height: 1.8;
    color: #fff;
    margin: 0;
}

.victory-quote-attribution {
    margin-top: 1.5rem;
    text-align: center;
}

.victory-quote-divider {
    width: 6rem;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(212, 175, 55, 0.5), transparent);
    margin: 0 auto 1rem auto;
}

.victory-quote-author {
    color: rgba(212, 175, 55, 0.8);
    font-size: 1rem;
}

/* 4-column stats for Hadith mode */
.victory-stats-4col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 480px) {
    .victory-stats-4col {
        grid-template-columns: repeat(2, 1fr);
    }
}

.victory-stat-mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    padding: 1rem 0.5rem;
    transition: all 0.2s;
}

.victory-stat-mini:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: scale(1.03);
}

.victory-stat-mini.highlight {
    border-color: rgba(212, 175, 55, 0.4);
    background: rgba(212, 175, 55, 0.05);
}

.victory-stat-mini-label {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.25rem;
    text-align: center;
}

.victory-stat-mini-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
}

.victory-stat-mini.highlight .victory-stat-mini-value {
    color: #D4AF37;
}

/* Two-column layout for Hadith with sidebar */
.victory-layout-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 900px) {
    .victory-layout-split {
        grid-template-columns: 2fr 1fr;
    }

    .victory-card.hadith-layout {
        max-width: 900px;
    }
}