:root {
    --primary: #ff5722;        /* Dragon Ball Vibrant Orange */
    --primary-dark: #d84315;
    --primary-light: #ff7d47;
    --secondary: #0072ff;      /* Super Saiyan Blue / Goku Blue */
    --secondary-dark: #0052d4;
    --accent: #ffd700;         /* Dragon Ball Golden Stars */
    --accent-glow: #ffab00;
    --dark: #07090e;           /* Deep Cosmic Saiyan Space */
    --card-bg: rgba(14, 20, 32, 0.85);
    --card-border: rgba(255, 87, 34, 0.45);
    --card-border-hover: rgba(255, 215, 0, 0.85);
    --text-main: #ffffff;
    --text-light: #cfd8dc;
    --white: #FFFFFF;
    --success: #00e676;
    --warning: #ff9100;

    --scouter-green: #00ff66;  /* Scouter HUD Green */
    --scouter-cyan: #00e5ff;   /* Scouter HUD Cyan */
    --scouter-red: #ff1744;    /* Scouter HUD Warning Red */
    --scouter-bg: rgba(0, 255, 102, 0.05);

    --shadow: 0 10px 30px rgba(255, 87, 34, 0.35);
    --shadow-hover: 0 15px 45px rgba(255, 215, 0, 0.6);
    --radius: 22px;

    --font-ar: 'Cairo', sans-serif;
    --font-en: 'Fredoka', 'Cairo', sans-serif;
    --font-digital: 'Orbitron', 'Courier New', monospace;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-ar);
    background-color: var(--dark);
    color: var(--text-main);
    line-height: 1.6;
    background-image: 
        radial-gradient(circle at 15% 20%, rgba(255, 87, 34, 0.28) 0%, transparent 45%),
        radial-gradient(circle at 85% 75%, rgba(0, 114, 255, 0.28) 0%, transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.14) 0%, transparent 60%),
        linear-gradient(135deg, #040609 0%, #0a0f19 50%, #040609 100%);
    background-attachment: fixed;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Scouter Digital HUD Bar */
.scouter-hud-bar {
    width: 95%;
    max-width: 1200px;
    margin: 10px auto 0 auto;
    background: rgba(4, 18, 12, 0.85);
    border: 2px solid var(--scouter-green);
    border-radius: 18px;
    padding: 8px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 0 20px rgba(0, 255, 102, 0.25), inset 0 0 15px rgba(0, 255, 102, 0.15);
    backdrop-filter: blur(12px);
    position: relative;
    overflow: hidden;
}

.scouter-hud-bar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 255, 102, 0.08) 50%, transparent 100%);
    animation: scouterScanLine 3s infinite linear;
    pointer-events: none;
}

@keyframes scouterScanLine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.scouter-readout {
    display: flex;
    align-items: center;
    gap: 15px;
    font-family: var(--font-digital);
    color: var(--scouter-green);
    font-size: 1.05rem;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(0, 255, 102, 0.8);
}

.scouter-power-badge {
    background: rgba(0, 255, 102, 0.15);
    border: 1.5px solid var(--scouter-green);
    padding: 4px 14px;
    border-radius: 12px;
    color: #ffffff;
    font-weight: 900;
    letter-spacing: 1px;
    animation: powerPulse 1.5s infinite ease-in-out alternate;
}

@keyframes powerPulse {
    0% { text-shadow: 0 0 5px var(--scouter-green); border-color: var(--scouter-green); }
    100% { text-shadow: 0 0 18px var(--scouter-cyan), 0 0 30px var(--accent); border-color: var(--accent); color: var(--accent); }
}

.scouter-scan-btn {
    background: linear-gradient(135deg, rgba(0, 255, 102, 0.2), rgba(0, 229, 255, 0.2));
    border: 1.5px solid var(--scouter-green);
    color: var(--scouter-green) !important;
    padding: 6px 16px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 0 10px rgba(0, 255, 102, 0.2);
}

.scouter-scan-btn:hover {
    background: var(--scouter-green);
    color: #000000 !important;
    box-shadow: 0 0 20px var(--scouter-green);
    transform: scale(1.05);
}

/* Typography */
.en-text {
    font-family: var(--font-en);
    direction: ltr;
    display: inline-block;
    font-size: 0.95em;
    color: var(--accent);
    letter-spacing: 0.5px;
}

/* Header / Navbar */
.app-header {
    background: rgba(10, 14, 24, 0.9);
    border: 2px solid rgba(255, 87, 34, 0.6);
    border-radius: 25px;
    padding: 0.7rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 8px 32px rgba(255, 87, 34, 0.35), inset 0 0 15px rgba(255, 215, 0, 0.15);
    position: sticky;
    top: 10px;
    width: 95%;
    margin: 10px auto 20px auto;
    z-index: 100;
    backdrop-filter: blur(20px);
    transition: all 0.3s ease;
}

.logo {
    font-family: var(--font-ar);
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--text-main);
    text-shadow: 0 0 12px rgba(255, 87, 34, 0.6);
    letter-spacing: 0;
    display: flex;
    align-items: center;
}

.logo span {
    color: var(--accent);
    font-weight: 900;
    margin-right: 6px;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
}

button {
    cursor: pointer;
    font-family: inherit;
    border: none;
    outline: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.home-btn,
.back-btn {
    background: linear-gradient(135deg, rgba(255, 87, 34, 0.25), rgba(0, 114, 255, 0.25));
    color: var(--accent) !important;
    padding: 0.6rem 1.5rem;
    border-radius: 18px;
    font-weight: 800;
    font-size: 1rem;
    border: 2px solid var(--accent);
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.2);
    font-family: var(--font-ar);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.home-btn:hover,
.back-btn:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.6);
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #ffffff !important;
    border-color: #ffffff;
}

/* Unified Coordinated Header Navigation Buttons */
.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}

.header-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    border-radius: 22px;
    font-weight: 800;
    font-size: 0.95rem;
    font-family: var(--font-ar);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.header-nav-btn i {
    font-size: 1.1rem;
}

.dragon-game-btn {
    background: linear-gradient(135deg, rgba(255, 87, 34, 0.28), rgba(255, 215, 0, 0.28));
    color: #ffd700 !important;
    border: 2px solid #ffd700;
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.35);
}

.dragon-game-btn:hover {
    transform: translateY(-2px) scale(1.04);
    background: linear-gradient(135deg, #ff5722, #ffd700);
    color: #000000 !important;
    border-color: #ffffff;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.8), 0 0 15px rgba(255, 87, 34, 0.6);
}

.back-to-main {
    background: linear-gradient(135deg, rgba(0, 114, 255, 0.28), rgba(0, 229, 255, 0.28));
    color: #00e5ff !important;
    border: 2px solid #00e5ff;
    box-shadow: 0 0 16px rgba(0, 229, 255, 0.35);
}

.back-to-main:hover {
    transform: translateY(-2px) scale(1.04);
    background: linear-gradient(135deg, #0072ff, #00e5ff);
    color: #000000 !important;
    border-color: #ffffff;
    box-shadow: 0 0 25px rgba(0, 229, 255, 0.8), 0 0 15px rgba(0, 114, 255, 0.6);
}

@media (max-width: 900px) {
    .app-header {
        padding: 0.6rem 1.2rem;
    }
    .logo {
        font-size: 1.3rem;
    }
    .header-nav-btn {
        height: 40px;
        padding: 0 14px;
        font-size: 0.88rem;
        gap: 6px;
    }
}

@media (max-width: 650px) {
    .app-header {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 0.8rem 1rem;
    }
    .header-actions {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
    }
    .header-nav-btn {
        flex: 1;
        min-width: 140px;
        height: 38px;
        padding: 0 10px;
        font-size: 0.82rem;
        text-align: center;
    }
}

main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

/* Views */
.view {
    display: none;
    animation: saiyanFadeIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.view.active {
    display: block;
}

.hidden {
    display: none !important;
}

/* View Header */
.view-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 2rem;
    background: var(--card-bg);
    padding: 16px 26px;
    border-radius: 24px;
    border: 2px solid var(--primary);
    backdrop-filter: blur(18px);
    box-shadow: var(--shadow);
    position: relative;
}

.view-header h2 {
    font-size: 1.95rem;
    color: var(--accent);
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
    font-weight: 900;
}

/* Titles */
.main-title {
    text-align: center;
    font-size: 3.1rem;
    color: #ffffff;
    margin-bottom: 0.5rem;
    text-shadow: 0 0 25px rgba(255, 87, 34, 0.9), 0 0 45px rgba(255, 215, 0, 0.6);
    font-weight: 900;
    letter-spacing: 1px;
}

.subtitle {
    text-align: center;
    font-size: 1.38rem;
    color: var(--text-light);
    margin-bottom: 2.5rem;
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

/* Scouter Reticle Corner Brackets */
.scouter-corner-card {
    position: relative;
}

.scouter-corner-card::before,
.scouter-corner-card::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid var(--scouter-green);
    pointer-events: none;
    transition: all 0.3s ease;
    opacity: 0.7;
}

.scouter-corner-card::before {
    top: 8px; right: 8px;
    border-bottom: none; border-left: none;
}

.scouter-corner-card::after {
    bottom: 8px; left: 8px;
    border-top: none; border-right: none;
}

.scouter-corner-card:hover::before,
.scouter-corner-card:hover::after {
    border-color: var(--accent);
    width: 20px; height: 20px;
    opacity: 1;
}

/* Dashboard Cards (Book Selection) */
.book-selection-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 35px;
    max-width: 950px;
    margin: 0 auto;
}

.book-card {
    background: var(--card-bg);
    border: 3px solid var(--primary);
    border-radius: 28px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 30px rgba(255, 87, 34, 0.35);
    backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
}

/* Super Saiyan Ki Flame Hover Effect */
.book-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 28px;
    box-shadow: inset 0 0 25px rgba(255, 215, 0, 0.4), 0 0 35px rgba(255, 87, 34, 0.6);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.book-card:hover {
    transform: translateY(-10px) scale(1.04);
    border-color: var(--accent);
    box-shadow: 0 15px 45px rgba(255, 215, 0, 0.7), 0 0 30px rgba(255, 87, 34, 0.9);
}

.book-card:hover::after {
    opacity: 1;
}

.book-card h2 {
    font-size: 2.1rem;
    color: var(--accent);
    margin-top: 15px;
    font-weight: 900;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
}

.book-card p {
    font-size: 1.25rem;
    color: var(--text-light);
    margin-top: 6px;
    font-weight: bold;
}

/* Units & Lessons Container & Cards */
.units-container,
.lessons-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 28px;
    margin-top: 15px;
}

.unit-card,
.lesson-car-btn {
    background: var(--card-bg);
    border: 3px solid var(--secondary);
    border-radius: 25px;
    padding: 25px 20px;
    cursor: pointer;
    transition: all 0.35s ease;
    box-shadow: 0 8px 25px rgba(0, 114, 255, 0.35);
    backdrop-filter: blur(16px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}

.unit-card:hover,
.lesson-car-btn:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: var(--accent);
    background: rgba(22, 30, 48, 0.92);
    box-shadow: 0 12px 35px rgba(255, 215, 0, 0.55);
}

.unit-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.unit-card-title {
    font-size: 1.45rem;
    color: #ffffff;
    font-weight: 900;
}

.unit-badge {
    background: linear-gradient(90deg, var(--primary), var(--accent));
    color: #000000;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 900;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
}

/* Kamehameha Energy Divider */
.kamehameha-divider {
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, transparent, var(--secondary), var(--accent), var(--primary), transparent);
    box-shadow: 0 0 15px var(--accent);
    margin: 20px 0;
    border-radius: 2px;
}

/* Lesson Sections & Card Containers */
.lesson-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.section-box {
    background: var(--card-bg);
    border: 2px solid var(--primary);
    border-radius: 26px;
    padding: 28px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
}

.section-title {
    font-size: 1.8rem;
    color: var(--accent);
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 2px dashed rgba(255, 87, 34, 0.5);
    padding-bottom: 14px;
    font-weight: 900;
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
}

.section-description {
    color: var(--text-light);
    font-size: 1.2rem;
    margin-bottom: 22px;
    font-weight: bold;
}

/* Dialogue Cards */
.characters-grid {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.char-card {
    background: rgba(15, 20, 32, 0.85);
    border: 2px solid var(--secondary);
    border-radius: 22px;
    padding: 22px;
    display: flex;
    gap: 22px;
    align-items: center;
    box-shadow: 0 6px 20px rgba(0, 114, 255, 0.25);
    backdrop-filter: blur(16px);
}

.char-avatar {
    flex-shrink: 0;
}

.char-bubble {
    flex: 1;
    background: rgba(25, 34, 52, 0.9);
    border: 1.5px solid var(--accent);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.15);
}

.char-text, .clickable-text {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--accent) !important;
    line-height: 1.65;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
    font-family: var(--font-en);
    cursor: pointer;
    transition: color 0.2s ease;
}

.char-text:hover, .clickable-text:hover {
    color: var(--primary) !important;
}

.inline-ar-trans {
    color: #ffffff !important;
    font-size: 1.18rem !important;
    font-weight: 900 !important;
    margin-top: 10px !important;
    text-shadow: none;
    font-family: var(--font-ar);
}

/* Vocab Grid */
.vocab-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 22px;
}

.vocab-card, .vocab-item {
    background: rgba(20, 26, 42, 0.85);
    border: 2px solid var(--primary);
    border-radius: 20px;
    padding: 20px 14px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(255, 87, 34, 0.2);
    position: relative;
}

.vocab-card:hover, .vocab-item:hover {
    transform: translateY(-5px) scale(1.03);
    border-color: var(--accent);
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.5);
    background: rgba(30, 40, 65, 0.9);
}

.vocab-word-en {
    font-size: 1.45rem;
    font-weight: 900;
    color: var(--accent);
    margin-bottom: 6px;
    font-family: var(--font-en);
}

.vocab-word-ar {
    font-size: 1.15rem;
    color: #ffffff;
    font-weight: bold;
}

/* Grammar Box & Tables */
.grammar-rule-card {
    background: rgba(18, 24, 38, 0.85);
    border: 2px solid var(--secondary);
    border-radius: 22px;
    padding: 22px;
    margin-bottom: 18px;
    box-shadow: 0 6px 20px rgba(0, 114, 255, 0.25);
}

.grammar-rule-title {
    font-size: 1.4rem;
    color: var(--accent);
    font-weight: 900;
    margin-bottom: 12px;
}

.grammar-example {
    background: rgba(28, 38, 58, 0.9);
    border: 1.5px solid var(--primary);
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 14px;
    color: #ffffff;
    font-weight: bold;
}

.grammar-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 22px;
    background: rgba(18, 24, 38, 0.9);
    border-radius: 18px;
    overflow: hidden;
    border: 2px solid var(--primary);
}

.grammar-table th {
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    color: white;
    padding: 16px;
    font-weight: 900;
    font-size: 1.2rem;
}

.grammar-table td {
    padding: 16px;
    border-bottom: 1px solid rgba(255, 87, 34, 0.2);
    color: var(--text-light);
    font-size: 1.1rem;
}

/* Quiz Box & Buttons */
.quiz-question {
    background: rgba(18, 24, 38, 0.85);
    border: 2px solid var(--primary);
    border-radius: 22px;
    padding: 22px;
    margin-bottom: 22px;
}

.q-text {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--accent);
    margin-bottom: 18px;
}

.q-option, .quiz-option-btn {
    background: rgba(26, 35, 54, 0.9);
    border: 2px solid var(--secondary);
    color: #ffffff !important;
    padding: 15px 22px;
    border-radius: 16px;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.25s ease;
    margin: 8px 0;
    width: 100%;
    text-align: right;
}

.q-option:hover, .quiz-option-btn:hover {
    border-color: var(--accent);
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
}

/* Dragon Ball Play & Learn Button */
.butterfly-play-learn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 18px 42px;
    background: linear-gradient(135deg, #ff5722 0%, #ff9100 50%, #ffd700 100%);
    color: #000000 !important;
    font-size: 1.7rem;
    font-weight: 900;
    font-family: var(--font-ar);
    border: 3px solid #ffffff;
    border-radius: 50px;
    box-shadow: 0 10px 35px rgba(255, 87, 34, 0.6), 0 0 20px rgba(255, 215, 0, 0.8);
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    position: relative;
    overflow: hidden;
}

.butterfly-play-learn-btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(60deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: rotate(30deg);
    transition: all 0.6s ease;
}

.butterfly-play-learn-btn:hover {
    transform: translateY(-6px) scale(1.07);
    box-shadow: 0 15px 45px rgba(255, 215, 0, 0.9), 0 0 35px rgba(255, 87, 34, 0.9);
    border-color: var(--accent);
}

.butterfly-play-learn-btn:hover::before {
    left: 100%;
}

.quiz-option-btn.correct {
    background: linear-gradient(135deg, #00e676, #00b0ff) !important;
    border-color: #76ff03 !important;
    color: #000000 !important;
}

.quiz-option-btn.wrong {
    background: linear-gradient(135deg, #ff1744, #d50000) !important;
    border-color: #ff5252 !important;
    color: #ffffff !important;
}

/* Dragon Ball Radar Translator Bot UI */
#translator-bot-container {
    position: fixed;
    bottom: 25px;
    left: 25px;
    z-index: 1000;
}

#translator-fab {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border: 3.5px solid var(--accent);
    box-shadow: 0 8px 30px rgba(255, 87, 34, 0.6), 0 0 20px rgba(255, 215, 0, 0.7);
    color: white;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

#translator-fab:hover {
    transform: scale(1.12) rotate(12deg);
    box-shadow: 0 12px 40px rgba(255, 215, 0, 0.9), 0 0 30px rgba(0, 114, 255, 0.8);
}

#translator-chat-window {
    position: fixed;
    bottom: 105px;
    left: 25px;
    width: 360px;
    max-width: 90vw;
    height: 500px;
    background: rgba(12, 17, 28, 0.92);
    border: 3px solid var(--primary);
    border-radius: 28px;
    box-shadow: 0 12px 40px rgba(255, 87, 34, 0.5), 0 0 20px rgba(255, 215, 0, 0.3);
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chat-header {
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    padding: 16px;
    color: white;
    font-weight: 900;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--accent);
}

.chat-body {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: transparent;
}

.chat-message {
    padding: 12px 16px;
    border-radius: 18px;
    max-width: 85%;
    font-size: 1rem;
    line-height: 1.45;
}

.bot-message {
    background: rgba(24, 34, 52, 0.9);
    border: 1px solid var(--primary);
    color: #ffffff;
    align-self: flex-start;
}

.user-message {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    align-self: flex-end;
    font-weight: bold;
}

.chat-input-area {
    padding: 14px;
    background: rgba(15, 20, 32, 0.95);
    display: flex;
    gap: 10px;
    border-top: 1px solid rgba(255, 87, 34, 0.3);
}

.chat-input-area input {
    flex: 1;
    background: rgba(28, 38, 58, 0.9);
    border: 1.5px solid var(--primary);
    border-radius: 14px;
    padding: 12px;
    color: #ffffff;
    outline: none;
    font-size: 1rem;
}

.chat-input-area button {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #000;
    font-weight: bold;
    border-radius: 14px;
    padding: 10px 18px;
}

/* Toast */
.toast {
    position: fixed;
    top: 105px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    padding: 14px 35px;
    border-radius: 30px;
    font-weight: 900;
    font-size: 1.25rem;
    box-shadow: 0 10px 35px rgba(255, 87, 34, 0.6), 0 0 20px rgba(255, 215, 0, 0.8);
    border: 2px solid var(--accent);
    z-index: 2000;
    animation: saiyanSlideDown 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Story Maker & Challenges */
.story-maker-container {
    background: var(--card-bg);
    border: 3px solid var(--primary);
    border-radius: 28px;
    padding: 28px;
    text-align: center;
    box-shadow: var(--shadow);
    margin-top: 22px;
}

.story-toggle-btn {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    font-weight: 900;
    font-size: 1.35rem;
    padding: 16px 32px;
    border-radius: 22px;
    border: 2px solid var(--accent);
    box-shadow: 0 8px 25px rgba(255, 87, 34, 0.4);
}

.story-toggle-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 35px rgba(255, 215, 0, 0.6);
}

.story-output {
    background: rgba(22, 30, 48, 0.9);
    border: 2px solid var(--accent);
    border-radius: 22px;
    padding: 22px;
    margin-top: 22px;
    color: #ffffff;
    font-size: 1.25rem;
    line-height: 1.85;
}

/* Games Grid */
.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 22px;
}

.game-card {
    background: var(--card-bg);
    border: 2.5px solid var(--secondary);
    border-radius: 22px;
    padding: 22px;
    text-align: center;
    cursor: pointer;
    transition: all 0.35s ease;
    box-shadow: 0 8px 25px rgba(0, 114, 255, 0.25);
}

.game-card:hover {
    transform: translateY(-7px) scale(1.04);
    border-color: var(--accent);
    box-shadow: 0 12px 35px rgba(255, 215, 0, 0.5);
    background: rgba(26, 36, 56, 0.9);
}

.game-card .icon {
    font-size: 3.2rem;
    margin-bottom: 12px;
    filter: drop-shadow(0 0 12px #ffd700);
}

/* Dragon Ball Game Play Canvas & Mechanics */
.game-area {
    background: var(--card-bg);
    border: 3px solid var(--primary);
    border-radius: 28px;
    padding: 28px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    margin-top: 15px;
}

.game-hud {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 12px 20px;
    background: rgba(24, 34, 52, 0.9);
    border: 2px solid var(--accent);
    border-radius: 22px;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.2);
}

.game-hearts {
    font-size: 1.6rem;
    filter: drop-shadow(0 0 10px #00e5ff) drop-shadow(0 0 5px #ffd700);
}

.game-diamonds {
    font-size: 1.6rem;
    filter: drop-shadow(0 0 10px #ff5722) drop-shadow(0 0 5px #ffd700);
}

.game-question {
    font-size: 1.65rem;
    font-weight: 900;
    color: var(--accent);
    text-align: center;
    margin: 16px 0;
    cursor: pointer;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
    line-height: 1.5;
}

.question-translation {
    font-size: 1.2rem;
    color: var(--text-light);
    margin-top: 8px;
    font-family: var(--font-ar);
    font-weight: bold;
}

.action-btn-go {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #000000 !important;
    border: 2px solid #ffffff;
    border-radius: 28px;
    padding: 15px 38px;
    font-size: 1.35rem;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 8px 30px rgba(255, 87, 34, 0.5);
    transition: all 0.25s ease;
    margin-top: 15px;
}

.action-btn-go:hover {
    transform: scale(1.07);
    box-shadow: 0 12px 40px rgba(255, 215, 0, 0.8);
    border-color: var(--accent);
}

.timing-bar {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: 55px;
    background: rgba(22, 30, 48, 0.9);
    border: 2.5px solid var(--primary);
    border-radius: 25px;
    display: flex;
    overflow: hidden;
    margin: 15px 0;
}

.timing-zone {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 1.1rem;
    border-right: 1px dashed rgba(255, 87, 34, 0.4);
}

.timing-needle {
    position: absolute;
    top: 0;
    width: 10px;
    height: 100%;
    background: #ffd700;
    box-shadow: 0 0 20px #ffd700;
    border-radius: 5px;
}

.striking-game {
    position: relative;
    width: 100%;
    max-width: 500px;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.goals-row {
    display: flex;
    justify-content: space-around;
    width: 100%;
    gap: 10px;
}

.strike-goal {
    background: rgba(24, 34, 52, 0.9);
    border: 2px solid var(--secondary);
    border-radius: 20px;
    padding: 16px 20px;
    color: white;
    font-weight: bold;
    font-size: 1.25rem;
    flex: 1;
    text-align: center;
}

.crosshair {
    position: relative;
    font-size: 2.7rem;
    filter: drop-shadow(0 0 15px #ffd700);
    margin: 20px 0;
}

.bouncing-game {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: radial-gradient(circle at center, rgba(35, 15, 5, 0.95), rgba(10, 5, 0, 0.98));
    border-radius: 24px;
    border: 2.5px solid var(--primary);
}

.bouncing-ball {
    position: absolute;
    bottom: 10px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border: 2px solid #ffffff;
    color: #000;
    padding: 14px 26px;
    border-radius: 28px;
    font-weight: 900;
    font-size: 1.25rem;
    cursor: pointer;
    box-shadow: 0 8px 30px rgba(255, 87, 34, 0.5);
    animation: saiyanBounce 2.2s infinite ease-in-out alternate;
}

@keyframes saiyanBounce {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-130px) scale(1.1); }
    100% { transform: translateY(0) scale(1); }
}

/* Dodge Game Animation (Dragon Ball Ki Rush) */
.dodge-game {
    position: relative;
    width: 100%;
    max-width: 520px;
    min-height: 240px;
    background: radial-gradient(circle at center, rgba(15, 25, 45, 0.95), rgba(5, 10, 20, 0.98));
    border: 3px solid var(--primary);
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 20px 15px;
}

.scrolling-road {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(0deg, transparent, transparent 20px, rgba(255, 87, 34, 0.3) 20px, rgba(255, 87, 34, 0.3) 40px);
    animation: saiyanRoad 0.8s infinite linear;
    pointer-events: none;
}

@keyframes saiyanRoad {
    from { background-position: 0 0; }
    to { background-position: 0 40px; }
}

.enemies-row {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-around;
    width: 100%;
    gap: 12px;
    margin-top: 10px;
}

.enemy-obstacle {
    background: rgba(24, 34, 52, 0.9);
    border: 2.5px solid var(--accent);
    border-radius: 20px;
    padding: 15px 20px;
    color: white;
    font-weight: 900;
    font-size: 1.25rem;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(255, 87, 34, 0.3);
    animation: saiyanFloat 2s infinite ease-in-out alternate;
    transition: transform 0.2s ease, border-color 0.2s ease;
    text-align: center;
    flex: 1;
}

.enemy-obstacle:nth-child(2) {
    animation-delay: 0.6s;
}

.enemy-obstacle:nth-child(3) {
    animation-delay: 1.2s;
}

@keyframes saiyanFloat {
    0% { transform: translateY(0px) scale(1); filter: drop-shadow(0 0 8px #ff5722); }
    50% { transform: translateY(-40px) scale(1.1); filter: drop-shadow(0 0 20px #ffd700); }
    100% { transform: translateY(0px) scale(1); filter: drop-shadow(0 0 8px #ff5722); }
}

.enemy-obstacle:hover {
    transform: scale(1.12) !important;
    border-color: #ffffff;
    box-shadow: 0 10px 35px rgba(255, 215, 0, 0.7);
}

.smash-game {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.smash-crate {
    background: rgba(24, 34, 52, 0.9);
    border: 2.5px solid var(--primary);
    border-radius: 22px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.15s ease;
    min-width: 135px;
    box-shadow: 0 8px 25px rgba(255, 87, 34, 0.3);
}

.crate-box {
    font-size: 3rem;
    margin-top: 10px;
    filter: drop-shadow(0 0 12px #ffd700);
}

.crate-label {
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
}

.drag-drop-game {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    width: 100%;
}

.drag-items {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

.drag-item {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border: 2px solid var(--accent);
    color: white;
    padding: 14px 24px;
    border-radius: 22px;
    font-weight: bold;
    font-size: 1.2rem;
    cursor: grab;
    box-shadow: 0 8px 25px rgba(255, 87, 34, 0.4);
}

.drop-zone {
    width: 100%;
    max-width: 460px;
    padding: 32px;
    border: 3px dashed var(--accent);
    border-radius: 28px;
    background: rgba(22, 30, 48, 0.9);
    color: var(--accent);
    font-weight: 900;
    font-size: 1.35rem;
    text-align: center;
    box-shadow: 0 8px 30px rgba(255, 215, 0, 0.3);
}

@keyframes saiyanFadeIn {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes saiyanSlideDown {
    from { transform: translate(-50%, -25px); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}

/* Saiyan Crown Badge Animation */
.butterfly-crown-badge {
    animation: saiyanPulse 2s infinite ease-in-out;
    cursor: pointer;
    filter: drop-shadow(0 0 18px #ff5722);
    transition: transform 0.2s;
}

.butterfly-crown-badge:active {
    transform: scale(0.92);
}

@keyframes saiyanPulse {
    0% { transform: scale(1); filter: drop-shadow(0 0 15px #ff5722); }
    50% { transform: scale(1.08); filter: drop-shadow(0 0 35px #ffd700); }
    100% { transform: scale(1); filter: drop-shadow(0 0 15px #ff5722); }
}

/* Dragon Ki Beams & Flash (For Special Power Sound Event) */
@keyframes discoBeamsRotate {
    0% { transform: translate(-50%, -50%) rotate(0deg) scale(1.2); }
    50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.6); }
    100% { transform: translate(-50%, -50%) rotate(360deg) scale(1.2); }
}

@keyframes discoFlashBg {
    0%, 100% { filter: hue-rotate(0deg) brightness(1.3); }
    25% { filter: hue-rotate(45deg) brightness(1.6); }
    50% { filter: hue-rotate(180deg) brightness(1.4); }
    75% { filter: hue-rotate(240deg) brightness(1.7); }
}

.butterfly-disco-beams {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 250vw;
    height: 250vh;
    pointer-events: none;
    z-index: 99999;
    background: conic-gradient(
        from 0deg at 50% 50%,
        rgba(255, 87, 34, 0.75) 0deg 15deg,
        transparent 15deg 30deg,
        rgba(255, 215, 0, 0.85) 30deg 45deg,
        transparent 45deg 60deg,
        rgba(0, 114, 255, 0.85) 60deg 75deg,
        transparent 75deg 90deg,
        rgba(255, 87, 34, 0.75) 90deg 105deg,
        transparent 105deg 120deg,
        rgba(255, 215, 0, 0.85) 120deg 135deg,
        transparent 135deg 150deg,
        rgba(0, 229, 255, 0.85) 150deg 165deg,
        transparent 165deg 180deg,
        rgba(255, 87, 34, 0.75) 180deg 195deg,
        transparent 195deg 210deg,
        rgba(255, 215, 0, 0.85) 210deg 225deg,
        transparent 225deg 240deg,
        rgba(0, 114, 255, 0.85) 240deg 255deg,
        transparent 255deg 270deg,
        rgba(255, 87, 34, 0.75) 270deg 285deg,
        transparent 285deg 300deg,
        rgba(255, 215, 0, 0.85) 300deg 315deg,
        transparent 315deg 330deg,
        rgba(0, 229, 255, 0.75) 330deg 345deg,
        transparent 345deg 360deg
    );
    animation: discoBeamsRotate 1.2s infinite linear;
    mix-blend-mode: color-dodge;
    opacity: 0.92;
}

.butterfly-disco-active {
    animation: discoFlashBg 0.5s infinite ease-in-out !important;
}