/* ============================================================
   BERMAIN DENGAN CAHAYA — Viewport-Locked Game Theme
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Fredoka+One&display=swap');

:root {
    --primary:        #FF6B35;
    --secondary:      #4ECDC4;
    --secondary-dark: #3ab5ac;
    --accent:         #FFE66D;
    --purple:         #9B59B6;
    --green:          #2ECC71;
    --pink:           #FF6B9D;
    --blue:           #3498DB;
    --dark:           #2C3E50;
    --text:           #34495E;
    --radius:         16px;
    --radius-sm:      10px;
    --shadow:         0 8px 25px rgba(0,0,0,0.15);

    --header-h: 60px;
}

/* ============================================================
   BASE — no scroll anywhere
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;       /* NO SCROLL EVER */
    font-family: 'Nunito', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text);
}

/* ============================================================
   SCENE BACKGROUND
   ============================================================ */
.app-body {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background:
        radial-gradient(ellipse 110px 45px at 14% 16%, rgba(255,255,255,0.85) 0%, transparent 70%),
        radial-gradient(ellipse 70px  30px at 11% 19%, rgba(255,255,255,0.7)  0%, transparent 70%),
        radial-gradient(ellipse 130px 50px at 68% 11%, rgba(255,255,255,0.85) 0%, transparent 70%),
        radial-gradient(ellipse 80px  35px at 64% 14%, rgba(255,255,255,0.7)  0%, transparent 70%),
        radial-gradient(ellipse 90px  40px at 43% 7%,  rgba(255,255,255,0.8)  0%, transparent 70%),
        linear-gradient(180deg,
            #5BB8F5 0%,
            #87CEEB 50%,
            #B8E4F9 65%,
            #C8E6C9 70%,
            #66BB6A 74%,
            #4CAF50 80%,
            #388E3C 100%
        );
    position: relative;
}

/* Sun */
.app-body::before {
    content: '';
    position: fixed;
    top: 22px; right: 70px;
    width: clamp(45px, 6vw, 70px);
    height: clamp(45px, 6vw, 70px);
    background: radial-gradient(circle, #FFE066 40%, #FFD700 65%, transparent 80%);
    border-radius: 50%;
    box-shadow: 0 0 35px 12px rgba(255,220,50,0.45);
    animation: sunPulse 4s ease-in-out infinite;
    z-index: 0;
    pointer-events: none;
}
@keyframes sunPulse {
    0%,100% { box-shadow: 0 0 35px 12px rgba(255,220,50,0.4); }
    50%      { box-shadow: 0 0 55px 22px rgba(255,220,50,0.6); }
}

/* Ground depth shading (rolling hill feel) */
.app-body::after {
    content: '';
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 20vh;
    background:
        radial-gradient(ellipse 55% 100% at 12% 100%, rgba(255,255,255,0.12) 0%, transparent 65%),
        radial-gradient(ellipse 45% 100% at 90% 100%, rgba(0,0,0,0.08) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}


/* ============================================================
   HEADER
   ============================================================ */
.landing-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(10px, 3vw, 24px);
    z-index: 100;
    pointer-events: none;
}
.landing-logo-container,
.landing-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: all;
}

.circle-btn {
    width: clamp(40px, 5vw, 48px);
    height: clamp(40px, 5vw, 48px);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.22);
    flex-shrink: 0;
}
.circle-btn:hover  { transform: scale(1.12); }
.circle-btn svg    { flex-shrink: 0; }
.btn-back  { background: #27AE60; color: white; }
.btn-audio { background: #FFB347; color: white; }
.btn-exit  { background: #E74C3C; color: white; }

.landing-logo {
    width: clamp(38px, 5vw, 46px);
    height: clamp(38px, 5vw, 46px);
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
    color: var(--dark);
    text-align: center;
    line-height: 1.2;
}
.user-badge {
    background: rgba(255,255,255,0.92);
    border-radius: 50px;
    padding: 5px 13px;
    font-weight: 700;
    font-size: clamp(0.72rem, 1.5vw, 0.88rem);
    color: var(--dark);
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

/* ============================================================
   APP WRAPPER — fills remaining viewport, NO SCROLL
   ============================================================ */
.app-wrapper {
    position: relative;
    z-index: 1;
    height: calc(100vh - var(--header-h));
    width: 100vw;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(6px, 1.5vh, 14px) clamp(8px, 2vw, 18px);
}


/* ============================================================
   SCENE PANEL (Home / Menu pages) — bright glass floating in the scene
   ============================================================ */
.landing-board {
    background: linear-gradient(160deg, #1E2A5E 0%, #2C3E82 45%, #2E5B9E 100%);
    border: none;
    border-radius: clamp(16px, 2.5vw, 26px);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.12) inset,
        0 20px 55px rgba(0,0,0,0.35),
        0 0 60px rgba(78,205,196,0.18);
    padding: clamp(14px, 2.5vh, 26px) clamp(16px, 3vw, 40px);
    max-width: min(640px, calc(100vw - 20px));
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* Subtle sparkle texture */
.landing-board::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 8% 12%, rgba(255,255,255,0.05) 0%, transparent 3%),
        radial-gradient(circle at 92% 20%, rgba(255,255,255,0.05) 0%, transparent 3%),
        radial-gradient(circle at 85% 85%, rgba(255,255,255,0.04) 0%, transparent 3%);
    pointer-events: none;
}

/* Light-beam accent rail */
.board-rail {
    position: absolute;
    bottom: -3px; left: 50%;
    transform: translateX(-50%);
    width: 55%;
    height: 6px;
    background: linear-gradient(90deg, transparent, var(--accent), var(--secondary), var(--primary), transparent);
    border-radius: 4px;
    box-shadow: 0 0 12px rgba(255,230,109,0.55);
}

/* ============================================================
   MASCOT + SPEECH BUBBLE
   ============================================================ */
.mascot-wrap {
    display: flex;
    align-items: flex-end;
    gap: clamp(8px, 1.5vw, 14px);
    flex-shrink: 0;
}
.mascot-char {
    font-size: clamp(2.1rem, 5vw, 3rem);
    line-height: 1;
    display: inline-block;
    animation: mascotBob 2.6s ease-in-out infinite;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,0.3));
    flex-shrink: 0;
}
@keyframes mascotBob {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50%      { transform: translateY(-6px) rotate(4deg); }
}
.speech-bubble {
    position: relative;
    background: rgba(255,255,255,0.96);
    color: var(--dark);
    border-radius: 14px;
    padding: clamp(7px, 1.1vh, 11px) clamp(11px, 1.8vw, 15px);
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: clamp(0.66rem, 1.2vw, 0.8rem);
    line-height: 1.35;
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
    max-width: 240px;
}
.speech-bubble::after {
    content: '';
    position: absolute;
    left: -7px; bottom: 12px;
    width: 0; height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 9px solid rgba(255,255,255,0.96);
}
.speech-bubble strong { color: var(--primary); font-family: 'Fredoka One', cursive; font-weight: 400; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.title-main {
    font-family: 'Fredoka One', cursive;
    color: white;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.3), 0 0 18px rgba(255,230,109,0.5);
    letter-spacing: 1px;
    line-height: 1.1;
}
.title-sub {
    font-family: 'Fredoka One', cursive;
    color: #FFE66D;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.35);
}

/* ============================================================
   ICON TILE GRID (home menu, belajar/bermain lists, materi links)
   ============================================================ */
.icon-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(92px, 22vw, 128px), 1fr));
    gap: clamp(8px, 1.6vw, 16px);
}
.icon-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(4px, 0.8vh, 8px);
    min-height: clamp(96px, 16vh, 138px);
    border-radius: clamp(14px, 2vw, 20px);
    padding: clamp(10px, 1.6vh, 16px) clamp(8px, 1.2vw, 12px);
    text-decoration: none;
    color: white;
    font-family: 'Fredoka One', cursive;
    text-align: center;
    box-shadow: 0 5px 0 rgba(0,0,0,0.2), 0 9px 20px rgba(0,0,0,0.22);
    transition: transform 0.18s ease, box-shadow 0.18s;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: none;
}
.icon-tile::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 42%;
    background: rgba(255,255,255,0.16);
    border-radius: clamp(14px, 2vw, 20px) clamp(14px, 2vw, 20px) 50% 50%;
    pointer-events: none;
}
.icon-tile:hover  { transform: translateY(-4px) scale(1.04); color: white; }
.icon-tile:active { transform: translateY(2px); }

.tile-icon  { font-size: clamp(1.6rem, 3.4vw, 2.3rem); display: block; line-height: 1; }
.tile-label {
    font-size: clamp(0.76rem, 1.35vw, 0.92rem);
    font-family: 'Fredoka One', cursive;
    line-height: 1.2; margin: 0;
}
.tile-sub {
    font-family: 'Nunito', sans-serif;
    font-size: clamp(0.58rem, 1.05vw, 0.68rem);
    opacity: 0.9; font-weight: 700; line-height: 1.25; margin: 0;
}
.tile-badge {
    background: rgba(255,255,255,0.22);
    border-radius: 50px;
    padding: 2px 10px;
    font-size: clamp(0.56rem, 1vw, 0.66rem);
    font-weight: 700;
    font-family: 'Nunito', sans-serif;
}
.menu-belajar   { background: linear-gradient(160deg, #3498DB, #2980B9); }
.menu-bermain   { background: linear-gradient(160deg, #2ECC71, #27AE60); }
.menu-pengaturan{ background: linear-gradient(160deg, #9B59B6, #8E44AD); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-anak {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: clamp(9px, 1.5vh, 13px) clamp(18px, 3vw, 28px);
    border-radius: 50px;
    font-family: 'Fredoka One', cursive;
    font-size: clamp(0.85rem, 1.4vw, 1rem);
    border: none; cursor: pointer;
    transition: transform 0.18s, box-shadow 0.18s;
    text-decoration: none;
    box-shadow: 0 4px 0 rgba(0,0,0,0.18), 0 7px 18px rgba(0,0,0,0.14);
    white-space: nowrap;
}
.btn-anak:hover  { transform: translateY(-2px); }
.btn-anak:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,0.18); }

.btn-primary-anak   { background: linear-gradient(160deg,#FF6B35,#FF9A5C); color: white; }
.btn-secondary-anak { background: linear-gradient(160deg,#4ECDC4,#76E4DC); color: white; }
.btn-accent-anak    { background: linear-gradient(160deg,#FFE66D,#FFD93D); color: var(--dark); }
.btn-green-anak     { background: linear-gradient(160deg,#2ECC71,#82E0AA); color: white; }
.btn-purple-anak    { background: linear-gradient(160deg,#9B59B6,#C39BD3); color: white; }
.btn-red-anak       { background: linear-gradient(160deg,#E74C3C,#F1948A); color: white; }

/* ============================================================
   BOOK FRAME — viewport-locked, NO SCROLL
   ============================================================ */
.book-outer {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.book-frame {
    background: #fefcf3;
    border-radius: clamp(10px, 1.5vw, 16px);
    border: clamp(2px, 0.4vw, 3px) solid #d4a84b;
    box-shadow:
        -5px 0 0 #c4913b,
        0 10px 35px rgba(0,0,0,0.3),
        inset 0 0 0 1px rgba(255,255,255,0.7);
    width: min(720px, calc(100vw - 16px));
    /* KEY: fill exactly the available height */
    height: 100%;
    max-height: calc(100vh - var(--header-h) - clamp(38px, 7vh, 60px));
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.book-spine {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: clamp(8px, 1.2vw, 12px);
    background: linear-gradient(180deg,#c4913b,#8B6914,#c4913b);
    border-radius: 4px 0 0 4px;
    z-index: 10;
}

/* ---- BOOK HEADER ---- */
.book-header {
    background: linear-gradient(135deg, var(--primary), #FF9A5C);
    padding: clamp(10px, 1.5vh, 15px) clamp(14px, 2vw, 22px) clamp(10px, 1.5vh, 15px) clamp(20px, 3vw, 30px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
    overflow: hidden;
}
.book-header-title {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1.5vw, 12px);
    font-family: 'Fredoka One', cursive;
    font-size: clamp(0.95rem, 2vw, 1.35rem);
    color: white;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
    min-width: 0;
    overflow: hidden;
}
.book-header-title span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.book-emoji   { font-size: clamp(1.2rem, 2.5vw, 1.7rem); flex-shrink: 0; }
.book-page-badge {
    background: rgba(255,255,255,0.22);
    color: white;
    border-radius: 50px;
    padding: 3px 11px;
    font-weight: 700;
    font-size: clamp(0.65rem, 1.2vw, 0.82rem);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ---- BOOK PAGE SHADOW ---- */
.book-page-shadow {
    position: absolute;
    top: 0; bottom: 0;
    width: 22px;
    z-index: 5;
    pointer-events: none;
}
.book-page-shadow.left  { left: clamp(8px,1.2vw,12px); background: linear-gradient(90deg,rgba(0,0,0,0.07),transparent); }
.book-page-shadow.right { right: 0; background: linear-gradient(-90deg,rgba(0,0,0,0.04),transparent); }

/* ---- PAGES CONTAINER ---- */
.book-pages-container {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 0;
}

/* ---- INDIVIDUAL PAGE — NO SCROLL ---- */
.book-page {
    position: absolute;
    inset: 0;
    padding: clamp(10px, 1.8vh, 18px) clamp(14px, 2.5vw, 24px) clamp(8px, 1.4vh, 14px) clamp(20px, 3.5vw, 32px);
    overflow: hidden;          /* STRICT: no scroll */
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.32s ease, transform 0.32s ease;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1vh, 10px);
}
.book-page.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: all;
}

/* ---- PAGE COMPONENTS ---- */
.book-page-heading {
    font-family: 'Fredoka One', cursive;
    font-size: clamp(0.9rem, 1.8vw, 1.2rem);
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    line-height: 1.2;
}
.heading-icon {
    width: clamp(26px, 3.5vw, 32px);
    height: clamp(26px, 3.5vw, 32px);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #FF9A5C);
    display: flex; align-items: center; justify-content: center;
    font-size: clamp(0.85rem, 1.6vw, 1.05rem);
    flex-shrink: 0;
}
.book-page-intro {
    font-size: clamp(0.78rem, 1.4vw, 0.95rem);
    line-height: 1.55;
    color: #444;
    flex-shrink: 0;
}

.book-goal-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 0.7vh, 7px);
    flex-shrink: 0;
}
.book-goal-list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: clamp(5px, 0.8vh, 8px) clamp(9px, 1.5vw, 12px);
    background: #f8f9fa;
    border-radius: 9px;
    font-size: clamp(0.73rem, 1.3vw, 0.88rem);
    color: #444;
    line-height: 1.4;
}
.goal-num {
    width: clamp(20px, 2.8vw, 26px);
    height: clamp(20px, 2.8vw, 26px);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #FF9A5C);
    color: white;
    font-weight: 800;
    font-size: clamp(0.62rem, 1vw, 0.75rem);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* Info cards grid — fills remaining space */
.book-info-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(5px, 1vw, 10px);
    flex: 1;
    min-height: 0;
}
.book-info-card {
    background: white;
    border-radius: clamp(8px, 1.2vw, 12px);
    padding: clamp(8px, 1.2vh, 13px) clamp(8px, 1.2vw, 12px);
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    border: 1.5px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    overflow: hidden;
}
.book-info-card.full { grid-column: 1 / -1; text-align: left; flex-direction: row; gap: 12px; }
.card-icon  { font-size: clamp(1.2rem, 2.5vw, 1.8rem); }
.card-title { font-weight: 800; font-size: clamp(0.7rem, 1.2vw, 0.85rem); color: var(--dark); }
.card-desc  { font-size: clamp(0.62rem, 1.1vw, 0.75rem); color: #666; line-height: 1.4; }

.book-fact-box {
    background: linear-gradient(135deg,#FFF9E6,#FFFDF0);
    border: 1.5px solid #FFE66D;
    border-radius: clamp(8px, 1.2vw, 12px);
    padding: clamp(8px, 1.2vh, 12px) clamp(10px, 1.5vw, 14px);
    display: flex;
    gap: 10px;
    align-items: flex-start;
    flex-shrink: 0;
    overflow: hidden;
}
.fact-icon    { font-size: clamp(1.2rem, 2.5vw, 1.6rem); flex-shrink: 0; }
.fact-content { font-size: clamp(0.7rem, 1.2vw, 0.85rem); color: #444; line-height: 1.5; }
.fact-content strong { color: var(--primary); }

/* CTA page */
.book-cta-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 1.5vh, 14px);
    text-align: center;
    overflow: hidden;
}
.book-cta-emoji { font-size: clamp(2.5rem, 6vw, 4rem); flex-shrink: 0; }
.book-cta-title {
    font-family: 'Fredoka One', cursive;
    font-size: clamp(1.1rem, 2.5vw, 1.6rem);
    color: var(--dark);
    flex-shrink: 0;
}
.book-cta-text {
    font-size: clamp(0.75rem, 1.3vw, 0.9rem);
    color: #555;
    max-width: 360px;
    line-height: 1.5;
    flex-shrink: 0;
}
.book-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: clamp(10px, 1.5vh, 14px) clamp(20px, 3vw, 32px);
    border-radius: 50px;
    text-decoration: none;
    color: white;
    font-family: 'Fredoka One', cursive;
    font-size: clamp(0.85rem, 1.5vw, 1rem);
    background: linear-gradient(160deg, var(--primary), #FF9A5C);
    box-shadow: 0 4px 0 rgba(0,0,0,0.18), 0 7px 18px rgba(0,0,0,0.14);
    transition: transform 0.18s;
}
.book-cta-btn:hover { transform: translateY(-3px); color: white; }

/* ---- BOOK FOOTER ---- */
.book-footer {
    background: #f5f2e8;
    border-top: 1.5px solid #e4dcc8;
    padding: clamp(8px, 1.3vh, 12px) clamp(12px, 2vw, 20px) clamp(8px, 1.3vh, 12px) clamp(18px, 3vw, 28px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
    overflow: hidden;
}
.book-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
}
.book-dot {
    width: clamp(7px, 1.2vw, 10px);
    height: clamp(7px, 1.2vw, 10px);
    border-radius: 50%;
    background: #ccc;
    cursor: pointer;
    transition: all 0.2s;
    border: none; padding: 0;
    flex-shrink: 0;
}
.book-dot.active { background: var(--primary); transform: scale(1.3); }

.book-nav-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: clamp(7px, 1.2vh, 10px) clamp(14px, 2.5vw, 20px);
    border-radius: 50px;
    border: none;
    font-family: 'Fredoka One', cursive;
    font-size: clamp(0.78rem, 1.4vw, 0.92rem);
    cursor: pointer;
    transition: transform 0.18s, box-shadow 0.18s;
    box-shadow: 0 3px 0 rgba(0,0,0,0.15);
    text-decoration: none;
    color: white;
    white-space: nowrap;
    flex-shrink: 0;
}
.book-nav-btn:hover  { transform: translateY(-2px); color: white; }
.book-nav-btn:active { transform: translateY(1px); }
.prev-btn { background: linear-gradient(135deg,#95A5A6,#7F8C8D); }
.next-btn { background: linear-gradient(135deg,var(--primary),#FF9A5C); }

/* ---- TABLE (compact, no overflow) ---- */
.table-anak {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    font-size: clamp(0.65rem, 1.2vw, 0.82rem);
    flex-shrink: 0;
}
.table-anak thead tr { background: linear-gradient(135deg,var(--primary),var(--secondary)); color: white; }
.table-anak th { padding: clamp(6px, 1vh, 10px) clamp(8px, 1.2vw, 13px); font-family: 'Fredoka One', cursive; font-weight: 400; font-size: clamp(0.68rem, 1.2vw, 0.85rem); }
.table-anak td { padding: clamp(5px, 0.8vh, 9px) clamp(7px, 1vw, 12px); border-bottom: 1px solid #f0f0f0; }
.table-anak tbody tr:last-child td { border-bottom: none; }
.table-anak tbody tr:nth-child(even) { background: #f9fafb; }

/* ============================================================
   QUIZ / GAME (tebak-sumber, etc.)
   ============================================================ */
.quiz-container {
    background: rgba(255,255,255,0.97);
    border-radius: var(--radius);
    padding: clamp(16px, 2.5vh, 28px) clamp(18px, 3vw, 32px);
    width: min(660px, calc(100vw - 20px));
    height: 100%;
    max-height: calc(100vh - var(--header-h) - clamp(40px, 7vh, 65px));
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1vh, 10px);
    overflow: hidden;
}
.quiz-progress {
    height: 9px; background: #ECF0F1; border-radius: 50px; overflow: hidden; flex-shrink: 0;
}
.quiz-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 50px;
    transition: width 0.5s;
}
.quiz-question {
    font-family: 'Fredoka One', cursive;
    font-size: clamp(0.92rem, 1.8vw, 1.25rem);
    color: var(--dark);
    text-align: center;
    line-height: 1.3;
    flex-shrink: 0;
}
.quiz-emoji-wrap { text-align: center; flex-shrink: 0; }
.quiz-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(8px, 1.2vw, 14px);
    flex-shrink: 0;
}
.quiz-btn {
    padding: clamp(10px, 1.5vh, 16px) clamp(10px, 1.5vw, 16px);
    border-radius: var(--radius-sm);
    border: 2.5px solid transparent;
    font-family: 'Fredoka One', cursive;
    font-size: clamp(0.82rem, 1.4vw, 1rem);
    cursor: pointer;
    transition: all 0.22s;
    background: white;
    box-shadow: 0 3px 10px rgba(0,0,0,0.07);
    color: var(--dark);
}
.quiz-btn:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--primary); background: #FEF0E7; }
.quiz-btn.benar { background: linear-gradient(135deg,#2ECC71,#82E0AA); color: white; border-color: #27AE60; }
.quiz-btn.salah { background: linear-gradient(135deg,#E74C3C,#F1948A); color: white; border-color: #C0392B; }

.feedback-box {
    padding: clamp(8px, 1.2vh, 12px) clamp(12px, 1.8vw, 18px);
    border-radius: var(--radius-sm);
    text-align: center;
    font-size: clamp(0.8rem, 1.4vw, 0.95rem);
    font-weight: 700;
    display: none;
    flex-shrink: 0;
}
.feedback-box.show  { display: block; }
.feedback-box.benar { background: #EAFAF1; color: #27AE60; border: 1.5px solid #2ECC71; }
.feedback-box.salah { background: #FDEDEC; color: #C0392B; border: 1.5px solid #E74C3C; }

.score-display { text-align: center; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(6px, 1vh, 12px); overflow: hidden; }
.score-number  { font-family: 'Fredoka One', cursive; font-size: clamp(3.5rem, 8vw, 5.5rem); color: var(--primary); line-height: 1; }
.score-stars   { font-size: clamp(1.8rem, 4vw, 2.8rem); }

/* ============================================================
   CANVAS GAME
   ============================================================ */
.canvas-game-wrap {
    width: min(720px, calc(100vw - 20px));
    height: 100%;
    max-height: calc(100vh - var(--header-h) - clamp(40px, 7vh, 65px));
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1vh, 10px);
    overflow: hidden;
}
.canvas-outer-card {
    background: rgba(255,255,255,0.97);
    border-radius: var(--radius);
    padding: clamp(14px, 2vh, 22px) clamp(16px, 2.5vw, 28px);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1vh, 10px);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.canvas-wrapper {
    background: #1a1a2e;
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: 0 0 30px rgba(78,205,196,0.25);
    flex: 1;
    min-height: 0;
}
canvas { display: block; width: 100%; height: 100%; }
.canvas-controls {
    background: #f8f9fa;
    border-radius: var(--radius-sm);
    padding: clamp(8px, 1.2vh, 12px) clamp(12px, 2vw, 18px);
    display: flex;
    align-items: center;
    gap: clamp(8px, 1.5vw, 14px);
    flex-wrap: wrap;
    flex-shrink: 0;
    overflow: hidden;
}
.slider-label { font-weight: 700; font-size: clamp(0.75rem, 1.3vw, 0.9rem); color: var(--dark); white-space: nowrap; }
.slider-anak  { flex: 1; min-width: 80px; accent-color: var(--primary); height: 6px; cursor: pointer; }

/* ============================================================
   CONTENT CARD + INFO BOX (pengaturan, riwayat)
   ============================================================ */
.content-glass {
    background: #253d0c;
    border-radius: clamp(10px, 1.5vw, 16px);
    border: clamp(5px, 0.8vw, 8px) solid #8B4513;
    box-shadow: 0 0 0 2px #6B3410, 0 0 0 4px #A0522D, 0 16px 45px rgba(0,0,0,0.35), inset 0 0 30px rgba(0,0,0,0.25);
    padding: clamp(16px, 2.5vh, 26px) clamp(18px, 3vw, 32px);
    color: white;
    position: relative;
    overflow: hidden;
    max-width: min(680px, calc(100vw - 20px));
    width: 100%;
}
.content-glass::before {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 26px, rgba(255,255,255,0.015) 26px, rgba(255,255,255,0.015) 27px);
    pointer-events: none;
}

.content-card {
    background: rgba(255,255,255,0.97);
    border-radius: var(--radius);
    padding: clamp(14px, 2.2vh, 24px) clamp(16px, 2.5vw, 28px);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.info-box { border-radius: var(--radius-sm); padding: clamp(8px, 1.2vh, 13px) clamp(10px, 1.5vw, 16px); border-left: 4px solid; font-size: clamp(0.75rem, 1.3vw, 0.9rem); }
.info-box.info-blue   { background: #E8F4FD; border-color: #3498DB; }
.info-box.info-yellow { background: #FEFDE8; border-color: #FFE66D; }
.info-box.info-green  { background: #EAFAF1; border-color: #2ECC71; }
.info-box.info-orange { background: #FEF0E7; border-color: var(--primary); }
.info-box strong { display: block; margin-bottom: 3px; }

.badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 50px; font-size: 0.75rem; font-weight: 700; }
.badge-primary   { background: #FEE4D8; color: var(--primary); }
.badge-secondary { background: #D5F5F2; color: var(--secondary-dark); }

.level-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: linear-gradient(135deg, var(--accent), #FFD93D);
    color: var(--dark); padding: 4px 12px; border-radius: 50px;
    font-weight: 800; font-size: clamp(0.72rem, 1.2vw, 0.85rem);
    box-shadow: 0 3px 8px rgba(255,230,109,0.4);
}

/* ============================================================
   CONFETTI
   ============================================================ */
.confetti-container { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.confetti-piece     { position: absolute; top: -20px; border-radius: 3px; animation: confettiFall linear forwards; }
@keyframes confettiFall { to { transform: translateY(110vh) rotate(720deg); opacity: 0; } }

/* ============================================================
   UTILITIES
   ============================================================ */
.text-center { text-align: center; }
.flex-center { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 1.5vw, 14px); flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: clamp(10px, 2vw, 20px); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: clamp(10px, 2vw, 18px); }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp   { from { opacity: 0; transform: translateY(20px);  } to { opacity: 1; transform: translateY(0); } }
@keyframes float      { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.anim-float  { animation: float 3s ease-in-out infinite; display: inline-block; }
.anim-fadein { animation: fadeInDown 0.6s ease; }