/* ============================================================
   한글 히어로 (HangulQuest) — Premium Design System v2 (Stitch Theme)
   Google Fonts: Jua & Gaegu & Plus Jakarta Sans & Be Vietnam Pro
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Jua&family=Gaegu:wght@400;700&family=Nanum+Pen+Script&family=Plus+Jakarta+Sans:wght@700;800&family=Be+Vietnam+Pro:wght@500&display=swap');

/* ──────────────────────────────────────────────────────────── */
/*  DESIGN TOKENS                                               */
/* ──────────────────────────────────────────────────────────── */
:root {
    /* Brand Palette - Soft warm pastels from "Hangul Tracing for Kids" */
    --c-surface:        #fdf9f3;  /* warm off-white canvas */
    --c-surface-dim:    #ece8e2;  
    --c-primary:        #636037;  /* main olive-sage character color */
    
    /* Soft containers & backgrounds */
    --c-sky:            #b5e7fe;  /* secondary container sky blue */
    --c-sky-deep:       #8cd1f2;  
    --c-mint:           #e2ffe0;  /* tertiary success green */
    --c-mint-deep:      #a2d9a0;  

    /* Accent & Action Colors */
    --c-sun:            #fff9c4;  /* primary container yellow */
    --c-sun-deep:       #fdd835;  
    --c-coral:          #ffdad6;  /* warning/reset light pink */
    --c-coral-deep:     #ff8a80;  
    --c-lavender:       #e2d5f8;  /* hint container soft purple */
    --c-lavender-deep:  #b39ddb;  
    --c-sky-btn:        #b5e7fe;  
    --c-sky-btn-deep:   #64b5f6;  
    --c-green:          #bdefbe;  
    --c-green-deep:     #81c784;  

    /* Neutrals */
    --c-white:          #ffffff;
    --c-card:           rgba(255, 255, 255, 0.95);
    --c-text:           #1c1c18;  /* main high-contrast text color */
    --c-muted:          #5c5c56;  
    --c-border:         rgba(99, 96, 55, 0.2);  
    --c-shadow-clr:     rgba(99, 96, 55, 0.08);

    /* Radii (ROUND_FULL / ROUND_LARGE style) */
    --r-xl: 32px;
    --r-lg: 24px;
    --r-md: 16px;
    --r-sm: 10px;

    /* Shadows */
    --sh-card:  0 12px 36px var(--c-shadow-clr), 0 4px 12px rgba(0,0,0,0.03);
    --sh-btn:   0 6px 18px rgba(0,0,0,0.08);
    --sh-inset: inset 0 3px 10px rgba(0,0,0,0.04);
    --sh-glow-gold:   0 0 24px rgba(255,249,196,0.65);
    --sh-glow-teal:   0 0 20px rgba(181,231,254,0.65);
    --sh-glow-purple: 0 0 20px rgba(226,213,248,0.65);
}

/* ──────────────────────────────────────────────────────────── */
/*  RESET & BASE                                                */
/* ──────────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0; padding: 0;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

body {
    font-family: 'Gaegu', cursive, sans-serif;
    font-size: 1.45rem;
    color: var(--c-text);
    background: linear-gradient(160deg,
        #fdf9f3 0%,
        #f1ede7 50%,
        #e6e2dc 100%);
    min-height: 100vh;
    overflow: hidden;
}

h1, h2, h3, h4 {
    font-family: 'Jua', sans-serif;
    font-weight: normal;
    line-height: 1.2;
}

/* ──────────────────────────────────────────────────────────── */
/*  APP SHELL                                                   */
/* ──────────────────────────────────────────────────────────── */
.app-container {
    width: 100%;
    max-width: 480px;
    height: 100vh;
    margin: 0 auto;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 24px;
    background:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E"),
        linear-gradient(180deg, #fdf9f3 0%, #ece8e2 100%);
    box-shadow: 0 0 60px rgba(99, 96, 55, 0.15);
}

/* ──────────────────────────────────────────────────────────── */
/*  LANDSCAPE BACKGROUND (clouds + hills)                       */
/* ──────────────────────────────────────────────────────────── */
.landscape-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.cloud {
    position: absolute;
    background: var(--c-white);
    border-radius: 100px;
    opacity: 0.8;
    animation: floatCloud 28s linear infinite;
    filter: drop-shadow(0 4px 8px rgba(100,160,220,0.15));
}
.cloud::before, .cloud::after {
    content: '';
    position: absolute;
    background: var(--c-white);
    border-radius: 50%;
}
.cloud.c1 { width: 130px; height: 44px; top: 8%; left: -160px; }
.cloud.c1::before { width: 58px; height: 58px; top: -28px; left: 18px; }
.cloud.c1::after  { width: 76px; height: 76px; top: -38px; right: 16px; }
.cloud.c2 {
    width: 90px; height: 32px; top: 22%; left: -120px;
    animation-delay: 10s; animation-duration: 38s; opacity: 0.55;
}
.cloud.c2::before { width: 40px; height: 40px; top: -18px; left: 12px; }
.cloud.c2::after  { width: 52px; height: 52px; top: -24px; right: 12px; }

.hill-back {
    position: absolute; bottom: 0; left: -60px; right: -60px; height: 32%;
    background: linear-gradient(160deg, hsl(150,55%,76%) 0%, hsl(150,48%,64%) 100%);
    border-radius: 55% 55% 0 0 / 90% 90% 0 0;
    transform: scaleY(0.75);
    opacity: 0.7;
}
.hill-front {
    position: absolute; bottom: -25px; left: -110px; right: -110px; height: 22%;
    background: linear-gradient(160deg, hsl(142,52%,66%) 0%, hsl(142,48%,54%) 100%);
    border-radius: 55% 55% 0 0 / 90% 90% 0 0;
}

/* ──────────────────────────────────────────────────────────── */
/*  GLASSMORPHISM PANEL                                         */
/* ──────────────────────────────────────────────────────────── */
.glass-panel {
    background: var(--c-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 2.5px solid var(--c-border);
    box-shadow: var(--sh-card);
    border-radius: var(--r-xl);
}

/* ──────────────────────────────────────────────────────────── */
/*  HEADER                                                      */
/* ──────────────────────────────────────────────────────────── */
.app-header {
    height: 80px;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 10;
    background: linear-gradient(135deg,
        rgba(255,255,255,0.85) 0%,
        rgba(240,250,255,0.75) 100%);
    backdrop-filter: blur(12px);
    border-bottom: 2px solid rgba(255,255,255,0.55);
    box-shadow: 0 2px 12px rgba(100,160,200,0.10);
}

.btn-icon-only {
    width: 52px; height: 52px;
    border-radius: 50%;
    border: 2.5px solid rgba(255,255,255,0.9);
    background: linear-gradient(135deg, #fff 0%, #e8f4fd 100%);
    color: var(--c-text);
    display: flex; justify-content: center; align-items: center;
    cursor: pointer;
    box-shadow: var(--sh-btn);
    transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.btn-icon-only:active { transform: scale(0.88); }
.btn-icon-only svg { width: 24px; height: 24px; fill: currentColor; }

.logo-title {
    font-size: 2.0rem;
    background: linear-gradient(135deg, var(--c-sun-deep) 0%, var(--c-coral) 60%, var(--c-lavender) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(1px 2px 0 rgba(255,255,255,0.8));
}

.jewel-counter {
    background: linear-gradient(135deg, #fff8e1 0%, #fff3cd 100%);
    padding: 6px 16px;
    border-radius: 24px;
    display: flex; align-items: center; gap: 5px;
    font-family: 'Jua', sans-serif;
    font-size: 1.35rem;
    border: 2.5px solid hsl(42,100%,80%);
    box-shadow: var(--sh-btn), 0 0 10px hsla(42,100%,65%,0.2);
}
.jewel-icon {
    font-size: 1.5rem;
    animation: pulseJewel 2.2s infinite ease-in-out;
}

/* ──────────────────────────────────────────────────────────── */
/*  SCREEN LAYOUTS                                              */
/* ──────────────────────────────────────────────────────────── */
.screen {
    flex: 1;
    position: relative;
    z-index: 5;
    display: none;
    flex-direction: column;
    padding: 18px;
    padding-bottom: 36px;
    overflow-y: auto;
}
.screen.active { display: flex; }

/* ══════════════════════════════════════════════════════════
   0. INITIAL MENU SCREEN
   ══════════════════════════════════════════════════════════ */
.menu-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 24px;
    text-align: center;
    gap: 0;
}

.menu-title-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.menu-logo-box {
    width: 145px; height: 145px;
    background: linear-gradient(135deg, #fffaf0 0%, #fff2d4 100%);
    border-radius: 40px; /* Snug ultra-rounded squircle */
    display: flex; justify-content: center; align-items: center;
    border: 4.5px solid rgba(255,255,255,0.95);
    box-shadow: var(--sh-card), var(--sh-glow-gold);
    margin-bottom: 16px;
    animation: floatHero 3.2s ease-in-out infinite;
}

.menu-character-img {
    width: 140px;
    height: 140px;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(133, 75, 112, 0.25));
}

.menu-title {
    font-size: 2.85rem;
    line-height: 1.15;
    text-align: center;
    background: linear-gradient(135deg,
        hsl(38,100%,48%) 0%,
        hsl(5,90%,58%) 50%,
        hsl(262,58%,65%) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(2px 3px 0 rgba(255,255,255,0.9));
    margin-bottom: 12px;
}

.menu-subtitle {
    font-size: 1.35rem;
    color: var(--c-muted);
    margin-bottom: 36px;
}

.menu-buttons-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 340px;
}

.btn-menu-select {
    padding: 20px 24px;
    border-radius: var(--r-lg);
    border: 3.5px solid rgba(255,255,255,0.85);
    font-family: 'Jua', sans-serif;
    font-size: 1.7rem;
    color: var(--c-text);
    cursor: pointer;
    box-shadow: var(--sh-btn);
    transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s;
    display: flex; justify-content: center; align-items: center; gap: 12px;
    position: relative;
    overflow: hidden;
}
.btn-menu-select::before {
    content: '';
    position: absolute; inset: 0;
    background: rgba(255,255,255,0.18);
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.2s;
}
.btn-menu-select:hover::before { opacity: 1; }
.btn-menu-select:active { transform: scale(0.94); }

.btn-consonants {
    background: linear-gradient(135deg, hsl(42,100%,72%) 0%, hsl(38,100%,58%) 100%);
    box-shadow: var(--sh-btn), 0 8px 28px hsla(42,100%,58%,0.35);
    color: hsl(30,60%,25%);
}
.btn-vowels {
    background: linear-gradient(135deg, hsl(198,90%,70%) 0%, hsl(198,85%,55%) 100%);
    box-shadow: var(--sh-btn), 0 8px 28px hsla(198,85%,55%,0.35);
    color: hsl(210,60%,20%);
}
.btn-combine {
    background: linear-gradient(135deg, hsl(262,60%,78%) 0%, hsl(262,55%,63%) 100%);
    box-shadow: var(--sh-btn), 0 8px 28px hsla(262,55%,63%,0.35);
    color: hsl(262,40%,18%);
}

/* ══════════════════════════════════════════════════════════
   A. MAIN HUB (MAP VIEW)
   ══════════════════════════════════════════════════════════ */
.map-container {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 1150px;
    padding-bottom: 60px;
}

.map-road-svg {
    position: absolute; top: 5%; left: 0;
    width: 100%; height: 90%;
    z-index: 1; pointer-events: none;
}
.road-line-back {
    stroke: hsl(30,30%,78%);
    stroke-width: 30px;
    stroke-linecap: round; stroke-linejoin: round; fill: none;
}
.road-line-front {
    stroke: hsl(42,100%,78%);
    stroke-dasharray: 10 8;
    stroke-width: 5px;
    stroke-linecap: round; stroke-linejoin: round; fill: none;
}

.stages-layer {
    position: absolute; inset: 0; z-index: 2; pointer-events: auto;
}

.stage-node {
    position: absolute;
    width: 72px; height: 72px;
    transform: translate(-50%, -50%);
    cursor: pointer;
    display: flex; justify-content: center; align-items: center;
}

.stage-btn {
    width: 64px; height: 64px;
    border-radius: 50%;
    border: 5px solid rgba(255,255,255,0.9);
    display: flex; justify-content: center; align-items: center;
    font-family: 'Jua', sans-serif;
    font-size: 1.6rem;
    color: var(--c-white);
    box-shadow: var(--sh-btn);
    transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s;
    position: relative;
}

/* Node Positions */
.node-1  { left: 50%; top: 93%; }
.node-2  { left: 28%; top: 86%; }
.node-3  { left: 50%; top: 79%; }
.node-4  { left: 72%; top: 72%; }
.node-5  { left: 50%; top: 65%; }
.node-6  { left: 28%; top: 58%; }
.node-7  { left: 50%; top: 51%; }
.node-8  { left: 72%; top: 44%; }
.node-9  { left: 50%; top: 37%; }
.node-10 { left: 28%; top: 30%; }
.node-11 { left: 50%; top: 23%; }
.node-12 { left: 72%; top: 16%; }
.node-13 { left: 50%; top: 9%;  }
.node-14 { left: 50%; top: 4%;  }

/* Completed */
.stage-node.completed .stage-btn {
    background: linear-gradient(135deg, var(--c-sun) 0%, var(--c-sun-deep) 100%);
    box-shadow: var(--sh-btn), var(--sh-glow-gold);
    animation: starPulse 2.8s infinite ease-in-out;
}
.stage-node.completed .stage-btn::after {
    content: '★';
    font-size: 1.9rem;
    color: var(--c-white);
    text-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

/* Active */
.stage-node.active-now .stage-btn {
    background: linear-gradient(135deg, var(--c-sky-btn) 0%, var(--c-sky-btn-deep) 100%);
    animation: bounceActive 1.4s infinite ease-in-out;
    border-color: hsl(42,100%,72%);
    box-shadow: var(--sh-btn), var(--sh-glow-teal);
}
.stage-node.active-now .stage-btn::after {
    content: attr(data-letter);
    font-size: 2.1rem;
    margin-top: -2px;
}

/* Locked */
.stage-node.locked { cursor: not-allowed; }
.stage-node.locked .stage-btn {
    background: linear-gradient(135deg, hsl(210,15%,78%) 0%, hsl(210,12%,68%) 100%);
    border-color: rgba(255,255,255,0.6);
    box-shadow: none;
    opacity: 0.75;
}
.stage-node.locked .stage-btn::after { content: '🔒'; font-size: 1.4rem; }

.stage-label {
    position: absolute; bottom: -32px;
    background: linear-gradient(135deg, var(--c-text) 0%, hsl(210,25%,30%) 100%);
    color: var(--c-white);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.88rem;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

/* ══════════════════════════════════════════════════════════
   B. WRITING CANVAS (LEARN SCREEN)
   ══════════════════════════════════════════════════════════ */
.learn-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.current-letter-display {
    font-family: 'Jua', sans-serif;
    font-size: 3.2rem;
    background: linear-gradient(135deg, var(--c-sun) 0%, var(--c-sun-deep) 100%);
    color: hsl(30,60%,22%);
    width: 82px; height: 82px;
    border-radius: 22px;
    display: flex; justify-content: center; align-items: center;
    border: 4px solid rgba(255,255,255,0.9);
    box-shadow: var(--sh-card), var(--sh-glow-gold);
    text-shadow: 1px 2px 0 rgba(255,255,255,0.6);
    animation: floatAsset 3.5s infinite ease-in-out;
}

.canvas-outer {
    flex: 1;
    position: relative;
    border-radius: var(--r-xl);
    background: linear-gradient(160deg, #fafcff 0%, #f0f8ff 100%);
    border: 3.5px dashed hsl(198,80%,72%);
    box-shadow: var(--sh-inset), var(--sh-card);
    display: flex; justify-content: center; align-items: center;
    overflow: hidden;
}

.canvas-guide-svg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    z-index: 1; pointer-events: none;
}
.guide-crosshair {
    stroke: hsl(210,20%,88%);
    stroke-width: 1.5;
    stroke-dasharray: 7 6;
}
.guide-letter-path {
    stroke: hsl(210,20%,93%);
    stroke-width: 58px;
    stroke-linecap: round; stroke-linejoin: round; fill: none;
}
.guide-letter-core {
    stroke: hsl(198,60%,82%);
    stroke-width: 5px;
    stroke-dasharray: 12 10;
    stroke-linecap: round; stroke-linejoin: round; fill: none;
}

#writing-canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    z-index: 2;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><circle cx="16" cy="16" r="12" fill="%23636037" fill-opacity="0.3" stroke="white" stroke-width="2"/></svg>') 16 16, auto;
}

/* Overlay for stroke guides (z-index 3 to overlay on canvas) */
.canvas-overlay-svg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    z-index: 3; pointer-events: none;
}

/* Background indicator path (Dashed stroke layout) */
.stroke-indicator-path {
    fill: none;
    stroke: hsl(262, 50%, 82%);
    stroke-width: 6px;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.95;
    stroke-dasharray: 3 8;
}

/* Active stroke drawing animation path */
.stroke-anim-path {
    fill: none;
    stroke: hsl(262, 70%, 60%);
    stroke-width: 10px;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.85;
}

/* Round pastel badges for stroke numbers */
.stroke-number-circle {
    fill: hsl(340, 95%, 72%);
    stroke: white;
    stroke-width: 2.5px;
    filter: drop-shadow(0 3px 6px rgba(255, 64, 129, 0.4));
}

.stroke-number-text {
    font-family: 'Jua', sans-serif;
    font-size: 14px;
    font-weight: bold;
    fill: white;
    text-anchor: middle;
    dominant-baseline: central;
}

.canvas-footer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 16px;
    gap: 12px;
}

.btn-action {
    flex: 1;
    padding: 13px 16px;
    border-radius: var(--r-md);
    border: none;
    font-family: 'Jua', sans-serif;
    font-size: 1.35rem;
    color: var(--c-white);
    cursor: pointer;
    box-shadow: var(--sh-btn);
    display: flex; justify-content: center; align-items: center; gap: 8px;
    transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1), filter 0.15s;
    letter-spacing: 0.02em;
}
.btn-action:active {
    transform: translateY(3px) scale(0.97);
    filter: brightness(0.93);
}
.btn-action svg { width: 20px; height: 20px; fill: currentColor; }

.btn-reset {
    background: linear-gradient(135deg, var(--c-coral) 0%, var(--c-coral-deep) 100%);
    box-shadow: var(--sh-btn), 0 4px 14px hsla(5,90%,60%,0.30);
}
.btn-hint {
    background: linear-gradient(135deg, var(--c-lavender) 0%, var(--c-lavender-deep) 100%);
    box-shadow: var(--sh-btn), 0 4px 14px hsla(262,55%,60%,0.30);
}
.btn-next {
    background: linear-gradient(135deg, var(--c-green) 0%, var(--c-green-deep) 100%);
    box-shadow: var(--sh-btn), 0 4px 14px hsla(142,50%,46%,0.30);
}

/* ══════════════════════════════════════════════════════════
   C. QUIZ (DRAG & DROP MATCHING)
   ══════════════════════════════════════════════════════════ */
.quiz-container {
    flex: 1;
    display: flex; flex-direction: column;
    justify-content: space-between; align-items: center;
}

.quiz-header { text-align: center; margin-bottom: 8px; }
.quiz-title {
    font-size: 1.55rem;
    color: var(--c-text);
    background: linear-gradient(135deg,
        rgba(255,255,255,0.88) 0%,
        rgba(240,248,255,0.75) 100%);
    padding: 7px 22px;
    border-radius: 22px;
    border: 2px solid rgba(255,255,255,0.5);
    box-shadow: var(--sh-btn);
}

.quiz-target-area {
    width: 248px; height: 248px;
    border-radius: var(--r-xl);
    background: linear-gradient(160deg, #fafdff 0%, #edf6ff 100%);
    border: 3.5px dashed hsl(198,70%,72%);
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    position: relative;
    box-shadow: var(--sh-card);
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), border-color 0.3s;
}
.quiz-target-area.drag-over {
    transform: scale(1.07);
    border-color: var(--c-green);
    background: hsl(142,55%,95%);
    box-shadow: var(--sh-card), 0 0 20px hsla(142,52%,60%,0.35);
}

.quiz-target-image {
    width: 145px; height: 145px;
    object-fit: contain;
    margin-bottom: 10px;
    animation: floatAsset 3.2s infinite ease-in-out;
}

.quiz-drop-slot {
    width: 130px; height: 58px;
    border-radius: var(--r-sm);
    background: hsl(210,15%,93%);
    border: 3px dashed hsl(210,15%,75%);
    display: flex; justify-content: center; align-items: center;
    font-family: 'Jua', sans-serif;
    font-size: 1.8rem;
    color: var(--c-muted);
    transition: all 0.3s;
}
.quiz-target-area.matched .quiz-drop-slot {
    background: linear-gradient(135deg, var(--c-green) 0%, var(--c-green-deep) 100%);
    border-color: rgba(255,255,255,0.8);
    color: var(--c-white);
    box-shadow: var(--sh-btn), 0 4px 14px hsla(142,50%,46%,0.35);
}

.quiz-options-area {
    width: 100%;
    display: flex; justify-content: space-around; gap: 12px;
    margin-top: 28px; margin-bottom: 16px;
}

.quiz-block {
    width: 92px; height: 92px;
    border-radius: var(--r-md);
    background: linear-gradient(160deg, #fff 0%, #f0f8ff 100%);
    border: 3.5px solid hsl(198,75%,68%);
    box-shadow: var(--sh-btn);
    display: flex; justify-content: center; align-items: center;
    font-family: 'Jua', sans-serif;
    font-size: 2.6rem;
    color: var(--c-text);
    cursor: grab;
    transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s;
    touch-action: none;
    position: relative; z-index: 10;
}
.quiz-block:active {
    cursor: grabbing;
    transform: scale(1.12) rotate(-3deg);
    box-shadow: 0 14px 28px rgba(0,0,0,0.16), var(--sh-glow-teal);
}
.quiz-block.dragging { opacity: 0.55; }

/* ══════════════════════════════════════════════════════════
   D. REWARD OVERLAY
   ══════════════════════════════════════════════════════════ */
.overlay-container {
    position: absolute; inset: 0; z-index: 100;
    background: rgba(20,40,60,0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: none; justify-content: center; align-items: center;
    padding: 28px;
}
.overlay-container.active { display: flex; }

.reward-popup {
    width: 100%; max-width: 380px;
    padding: 36px 28px;
    text-align: center;
    position: relative;
    animation: popupScale 0.45s cubic-bezier(0.34,1.56,0.64,1) forwards;
}

.reward-title {
    font-size: 2.3rem;
    background: linear-gradient(135deg, var(--c-sun-deep) 0%, var(--c-coral) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 14px;
    filter: drop-shadow(2px 2px 0 rgba(255,255,255,0.7));
}

.jewels-reward-display {
    display: flex; justify-content: center; gap: 16px;
    margin: 22px 0;
}
.reward-jewel {
    font-size: 3.2rem;
    animation: bounceJewel 1.4s infinite alternate ease-in-out;
    opacity: 0; transform: scale(0.4);
}
.reward-jewel:nth-child(1) { animation-delay: 0.1s; }
.reward-jewel:nth-child(2) { animation-delay: 0.3s; }
.reward-jewel:nth-child(3) { animation-delay: 0.5s; }

.reward-sticker-btn {
    width: 100%; padding: 17px;
    border-radius: var(--r-md);
    background: linear-gradient(135deg, var(--c-sun) 0%, var(--c-sun-deep) 100%);
    border: none;
    font-family: 'Jua', sans-serif;
    font-size: 1.65rem;
    color: hsl(30,60%,22%);
    cursor: pointer;
    box-shadow: var(--sh-btn), var(--sh-glow-gold);
    transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
    margin-top: 12px;
}
.reward-sticker-btn:active { transform: scale(0.95); }

/* Fireworks */
.firework {
    position: absolute;
    width: 7px; height: 7px;
    border-radius: 50%;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════
   E. STICKER BOOK OVERLAY
   ══════════════════════════════════════════════════════════ */
.sticker-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
    padding: 4px;
}

/* Mascot — permanently hidden */
.character-area { display: none !important; }

/* ══════════════════════════════════════════════════════════
   F. LETTER MAKER (COMBINE SCREEN)
   ══════════════════════════════════════════════════════════ */
.combine-container {
    flex: 1;
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    padding-bottom: 16px;
    gap: 18px;
}

.combine-board-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.combine-control-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.combine-pools-layout {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.result-display-panel {
    width: 100%; max-width: 340px;
    height: 130px;
    border-radius: var(--r-xl);
    background: linear-gradient(160deg,
        rgba(255,255,255,0.92) 0%,
        rgba(240,248,255,0.85) 100%);
    border: 3.5px dashed var(--c-lavender);
    display: flex; justify-content: center; align-items: center;
    box-shadow: var(--sh-card), var(--sh-glow-purple);
    position: relative; overflow: hidden;
}
.result-display-panel::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 50%,
        hsla(262,60%,90%,0.4) 0%, transparent 70%);
    pointer-events: none;
}

.combined-char-text {
    font-family: 'Jua', sans-serif;
    font-size: 5.5rem;
    background: linear-gradient(135deg, var(--c-lavender) 0%, var(--c-lavender-deep) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(2px 2px 0 rgba(255,255,255,0.8));
    animation: bounceActive 2.5s infinite ease-in-out;
}

.btn-tts {
    position: absolute;
    right: 14px; bottom: 14px;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, hsl(198, 90%, 62%) 0%, hsl(198, 90%, 48%) 100%);
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px hsla(198, 90%, 55%, 0.35);
    display: flex; justify-content: center; align-items: center;
    transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1);
    z-index: 10;
}
.btn-tts:active {
    transform: scale(0.88);
}
.btn-tts svg {
    width: 20px; height: 20px;
    fill: white;
}

.combined-char-text.success {
    background: linear-gradient(135deg, var(--c-coral) 0%, var(--c-lavender) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: popScale 0.45s cubic-bezier(0.34,1.56,0.64,1);
}

.combine-slots-area {
    display: flex; gap: 12px;
    margin-bottom: 4px;
    justify-content: center;
    width: 100%;
}

.combine-slot {
    width: 96px; height: 96px;
    border-radius: var(--r-lg);
    background: hsl(210,18%,95%);
    border: 3.5px dashed hsl(210,18%,78%);
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    font-family: 'Jua', sans-serif;
    font-size: 1.05rem;
    color: var(--c-muted);
    position: relative;
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), border-color 0.3s, background 0.3s;
}
.combine-slot.drag-over {
    transform: scale(1.1);
    border-color: var(--c-sky-btn);
    background: hsl(198,80%,95%);
    box-shadow: var(--sh-glow-teal);
}
.combine-slot.filled {
    background: linear-gradient(160deg, #fff 0%, #f0f8ff 100%);
    border: 3.5px solid hsl(198,80%,68%);
    font-size: 2.6rem;
    color: var(--c-text);
    box-shadow: var(--sh-card), var(--sh-glow-teal);
}

.combine-slot-label {
    position: absolute; bottom: 8px;
    font-size: 0.95rem;
    color: var(--c-muted);
    font-family: 'Gaegu', sans-serif;
}
.combine-slot.filled .combine-slot-label { display: none; }

.card-pool-container {
    width: 100%;
    background: linear-gradient(160deg,
        rgba(255,255,255,0.70) 0%,
        rgba(240,248,255,0.55) 100%);
    border-radius: var(--r-md);
    padding: 12px 12px 6px;
    border: 2px solid rgba(255,255,255,0.55);
    box-shadow: var(--sh-inset);
    margin-bottom: 4px;
}

.pool-title {
    font-family: 'Jua', sans-serif;
    font-size: 1.15rem;
    margin-bottom: 8px;
    color: var(--c-text);
    text-align: left;
}

.pool-scroll-row {
    display: flex; gap: 10px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: thin;
    scrollbar-color: hsl(198,60%,75%) transparent;
}
.pool-scroll-row::-webkit-scrollbar { height: 4px; }
.pool-scroll-row::-webkit-scrollbar-track { background: transparent; }
.pool-scroll-row::-webkit-scrollbar-thumb {
    background: hsl(198,60%,75%);
    border-radius: 4px;
}

.pool-card {
    flex: 0 0 54px; height: 54px;
    border-radius: var(--r-sm);
    background: linear-gradient(160deg, #fff 0%, #f0f8ff 100%);
    border: 3px solid hsl(198,75%,68%);
    display: flex; justify-content: center; align-items: center;
    font-family: 'Jua', sans-serif;
    font-size: 1.9rem;
    color: var(--c-text);
    cursor: grab;
    box-shadow: var(--sh-btn);
    touch-action: pan-x;
    transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1);
}
.pool-card:active {
    cursor: grabbing;
    transform: scale(1.1) rotate(-4deg);
}

.btn-clear-slots {
    margin-top: 4px;
    padding: 10px 22px;
    font-size: 1.1rem;
    border-radius: var(--r-md);
    border: none;
    background: linear-gradient(135deg, var(--c-coral) 0%, var(--c-coral-deep) 100%);
    color: var(--c-white);
    font-family: 'Jua', sans-serif;
    cursor: pointer;
    box-shadow: var(--sh-btn), 0 4px 14px hsla(5,90%,60%,0.28);
    transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1);
}
.btn-clear-slots:active { transform: scale(0.94); }

.btn-combine {
    background: linear-gradient(135deg, var(--c-lavender) 0%, var(--c-lavender-deep) 100%);
    box-shadow: var(--sh-btn), 0 8px 24px hsla(262,55%,63%,0.30);
}

/* ──────────────────────────────────────────────────────────── */
/*  SPARKLE TRAIL                                               */
/* ──────────────────────────────────────────────────────────── */
.sparkle {
    position: absolute;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle, #e0f7fa 30%, transparent 100%);
    pointer-events: none;
    box-shadow: 0 0 10px hsl(198,90%,70%), 0 0 20px hsl(198,90%,60%);
    animation: sparkleFade 0.65s forwards ease-out;
    z-index: 50;
}

/* ──────────────────────────────────────────────────────────── */
/*  KEYFRAME ANIMATIONS                                         */
/* ──────────────────────────────────────────────────────────── */
@keyframes floatCloud {
    0%   { left: -160px; }
    100% { left: 520px; }
}

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

@keyframes floatHero {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%       { transform: translateY(-10px) rotate(2deg); }
}

@keyframes pulseJewel {
    0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 2px hsla(42,100%,65%,0)); }
    50%       { transform: scale(1.18); filter: drop-shadow(0 0 8px hsla(42,100%,65%,0.85)); }
}

@keyframes starPulse {
    0%, 100% { box-shadow: var(--sh-btn), 0 0 10px hsla(42,100%,65%,0.35); }
    50%       { box-shadow: var(--sh-btn), 0 0 28px hsla(42,100%,65%,0.95); }
}

@keyframes bounceActive {
    0%, 100% { transform: translateY(0) scale(1); }
    50%       { transform: translateY(-9px) scale(1.06); }
}

@keyframes popupScale {
    0%   { transform: scale(0.5) translateY(20px); opacity: 0; }
    100% { transform: scale(1)   translateY(0);    opacity: 1; }
}

@keyframes popScale {
    0%   { transform: scale(0.5); }
    60%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}

@keyframes bounceJewel {
    0%   { transform: translateY(0)   scale(0.4); opacity: 0; }
    30%  { opacity: 1; }
    100% { transform: translateY(-18px) scale(1.15); opacity: 1; }
}

@keyframes sparkleFade {
    0%   { transform: scale(1); opacity: 0.9; }
    100% { transform: scale(0.15); opacity: 0; }
}

@keyframes bunnyDance {
    0%, 100% { transform: translateY(0) rotate(0); }
    25%       { transform: translateY(-14px) rotate(-9deg) scaleX(0.94); }
    50%       { transform: translateY(0) scaleY(0.88); }
    75%       { transform: translateY(-14px) rotate(9deg) scaleX(0.94); }
}

@keyframes bunnyCheer {
    0%   { transform: translateY(0) scale(1); }
    100% { transform: translateY(-28px) scaleY(1.12) scaleX(0.94); }
}

/* ──────────────────────────────────────────────────────────── */
/*  STICKER BOOK INLINE STYLES (injected by JS)                 */
/* ──────────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
    font-family: 'Jua', sans-serif;
    font-weight: normal;
}

/* Shimmer & Floating premium effect styles from Kids Tracing theme */
.shimmer {
    position: relative;
    overflow: hidden;
}
.shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
    background-size: 200% 100%;
    animation: shimmerAnim 2.2s infinite;
    pointer-events: none;
}
@keyframes shimmerAnim {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.floating {
    animation: floatingAnim 3s ease-in-out infinite;
}
@keyframes floatingAnim {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

/* ──────────────────────────────────────────────────────────── */
/*  RESPONSIVE TABLET & LANDSCAPE FOR MAIN MENU                 */
/* ──────────────────────────────────────────────────────────── */

/* 가로 화면 모드 대응 (Orientation: Landscape) */
@media (orientation: landscape) {
    /* 1. 일반 스마트폰 가로 모드일 때는 가로폭을 적절하게 넓힘 */
    .app-container {
        max-width: 680px;
        height: 100vh;
        margin: 0 auto;
        border-radius: 0;
        box-shadow: none;
        border: none;
    }

    /* 2. 상단 탑바 (#app-header) 는 온전히 유지 */
    .app-header {
        height: 52px;
        min-height: 52px;
        padding: 0 20px;
    }
    
    .logo-title {
        font-size: 1.4rem;
    }

    /* 3. 메인 화면의 좌우 배치 및 높이 보정 (세로가 짧으므로) */
    .menu-container {
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        gap: 24px;
        padding: 12px 30px;
        height: calc(100vh - 52px);
        overflow: hidden;
    }

    /* 4. 왼쪽: 아이콘과 타이틀 */
    .menu-title-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }

    /* 세로 해상도 한계에 맞춰 한글핑 마스코트 크기 축소 */
    .menu-logo-box {
        width: 100px; height: 100px;
        border-radius: 28px;
        border-width: 3.5px;
        margin-bottom: 6px;
    }

    .menu-character-img {
        width: 80px; height: 80px;
    }

    .menu-title {
        font-size: 2.0rem;
        line-height: 1.1;
        margin-bottom: 4px;
    }

    .menu-subtitle {
        font-size: 1.05rem;
        margin-bottom: 0;
    }

    /* 5. 오른쪽: 메뉴 버튼 */
    .menu-buttons-wrapper {
        flex: 1;
        max-width: 270px;
        margin-top: 0;
        gap: 10px;
    }

    .btn-menu-select {
        padding: 10px 16px;
        font-size: 1.2rem;
        border-radius: var(--r-md);
    }

    /* 글자 만들기 놀이 가로 화면 최적화 */
    .combine-container {
        padding: 2px 16px 8px;
        gap: 6px;
        justify-content: flex-start;
        overflow-y: auto;
    }

    .combine-board-layout {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 48px;
        width: 100%;
    }

    .result-display-panel {
        flex: 1.2;
        max-width: 280px;
        height: 110px;
    }

    .combined-char-text {
        font-size: 4.5rem;
    }

    .combine-control-panel {
        flex: 1;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        max-width: 380px;
    }

    .combine-slots-area {
        gap: 8px;
        margin-bottom: 0;
        width: auto;
    }

    .combine-slot {
        width: 76px;
        height: 76px;
        border-radius: var(--r-md);
    }

    .combine-slot.filled {
        font-size: 2.1rem;
    }

    .combine-slot-label {
        font-size: 0.8rem;
        bottom: 4px;
    }

    .btn-clear-slots {
        padding: 6px 12px;
        font-size: 1.05rem;
        margin-top: 4px;
        white-space: nowrap;
        width: 100%;
        max-width: 220px;
    }

    /* 하단 카드 스크롤 영역: 옆으로 배치하지 않고 두줄로 배치 */
    .combine-pools-layout {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .combine-pools-layout .card-pool-container {
        width: 100%;
        margin-bottom: 0;
        padding: 4px 8px 2px;
    }

    .pool-title {
        font-size: 0.85rem;
        margin-bottom: 2px;
    }

    .pool-card {
        flex: 0 0 38px;
        height: 38px;
        font-size: 1.3rem;
        border-width: 2px;
    }
}

/* 태블릿 또는 데스크톱처럼 가로가 768px 이상이면서 가로 모드인 경우 (더 넓고 쾌적한 화면) */
@media (min-width: 768px) and (orientation: landscape) {
    .app-container {
        max-width: 850px;
        height: 90vh;
        margin: 5vh auto;
        border-radius: var(--r-xl);
        box-shadow: 0 24px 70px rgba(99, 96, 55, 0.22);
        border: 4px solid rgba(255, 255, 255, 0.6);
    }
    
    .landscape-bg {
        border-radius: calc(var(--r-xl) - 4px);
    }

    .menu-container {
        height: calc(90vh - var(--touch-target-min));
        gap: 48px;
        padding: 40px;
    }

    .menu-logo-box {
        width: 135px; height: 135px;
        border-radius: 36px;
        margin-bottom: 12px;
    }

    .menu-character-img {
        width: 115px; height: 115px;
    }

    .menu-title {
        font-size: 2.6rem;
        margin-bottom: 8px;
    }

    .menu-subtitle {
        font-size: 1.25rem;
    }

    .menu-buttons-wrapper {
        max-width: 320px;
        gap: 14px;
    }

    .btn-menu-select {
        padding: 14px 22px;
        font-size: 1.45rem;
    }

    /* 태블릿 가로 글자 만들기 최적화 */
    .combine-container {
        padding: 12px 24px;
        gap: 14px;
        justify-content: flex-start;
    }

    .combine-board-layout {
        gap: 64px;
    }

    .result-display-panel {
        max-width: 320px;
        height: 130px;
    }

    .combined-char-text {
        font-size: 5.5rem;
    }

    .combine-control-panel {
        flex-direction: column;
        gap: 10px;
        width: 100%;
        max-width: 380px;
    }

    .combine-slots-area {
        gap: 12px;
    }

    .combine-slot {
        width: 86px;
        height: 86px;
        border-radius: var(--r-lg);
    }

    .combine-slot.filled {
        font-size: 2.4rem;
    }

    .btn-clear-slots {
        padding: 12px 18px;
        font-size: 1.25rem;
        margin-top: 6px;
        width: 100%;
        max-width: 250px;
    }

    /* 하단 카드 스크롤 영역: 옆으로 배치하지 않고 두 줄로 배치 */
    .combine-pools-layout {
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .combine-pools-layout .card-pool-container {
        padding: 8px 14px 6px;
    }

    .pool-title {
        font-size: 1.0rem;
        margin-bottom: 4px;
    }

    .pool-card {
        flex: 0 0 46px;
        height: 46px;
        font-size: 1.55rem;
    }
}

/* 넓은 화면 태블릿/데스크톱 세로 모드 대응 */
@media (min-width: 768px) and (orientation: portrait) {
    .app-container {
        max-width: 768px;
        height: 95vh;
        margin: 2.5vh auto;
        border-radius: var(--r-xl);
        box-shadow: 0 24px 70px rgba(99, 96, 55, 0.22);
        border: 4px solid rgba(255, 255, 255, 0.6);
    }
    
    .landscape-bg {
        border-radius: calc(var(--r-xl) - 4px);
    }

    /* 태블릿 세로 모드 상단 탑바 확대 */
    .app-header {
        height: 96px;
        padding: 0 32px;
    }
    .logo-title {
        font-size: 2.4rem;
    }
    .btn-icon-only {
        width: 60px;
        height: 60px;
    }
    .btn-icon-only svg {
        width: 28px;
        height: 28px;
    }
    .jewel-counter {
        font-size: 1.55rem;
        padding: 8px 18px;
        border-radius: 28px;
    }
    .jewel-icon {
        font-size: 1.7rem;
    }

    /* 태블릿 세로 모드에서 메인 화면(초기 메뉴) 요소 크기 최적화 */
    .menu-container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 32px;
        padding: 40px;
    }

    .menu-title-section {
        gap: 12px;
    }

    .menu-logo-box {
        width: 200px;
        height: 200px;
        border-radius: 48px;
        border-width: 5px;
        margin-bottom: 20px;
    }

    .menu-character-img {
        width: 185px;
        height: 185px;
    }

    .menu-title {
        font-size: 3.6rem;
        margin-bottom: 16px;
    }

    .menu-subtitle {
        font-size: 1.55rem;
        margin-bottom: 24px;
    }

    .menu-buttons-wrapper {
        max-width: 420px;
        gap: 20px;
    }

    .btn-menu-select {
        padding: 22px 32px;
        font-size: 2.0rem;
        border-radius: var(--r-xl);
    }
}

/* 화면 높이가 작은 스마트폰 세로 모드 대응 (예: 구형 기기 등에서 찌그러짐 방지) */
@media (max-height: 740px) and (orientation: portrait) {
    .menu-logo-box {
        width: 125px;
        height: 125px;
        margin-bottom: 10px;
    }
    .menu-character-img {
        width: 120px;
        height: 120px;
    }
    .menu-title {
        font-size: 2.4rem;
        margin-bottom: 8px;
    }
    .menu-subtitle {
        font-size: 1.15rem;
        margin-bottom: 20px;
    }
    .menu-buttons-wrapper {
        gap: 12px;
    }
    .btn-menu-select {
        padding: 16px 20px;
        font-size: 1.45rem;
    }
}