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

      :root {
        --primary: #FFC800;
        --primary-dark: #E0A800;
        --primary-light: #FFF3B0;
        --bg: #ffffff;
        --surface: #ffffff;
        --text: #1a1a2e;
        --text-muted: #6b7280;
        --success: #22c55e;
        --error: #ef4444;
        --teal: #4ecdc4;
        --border: #e5e7eb;
        --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
        --radius: 16px;
        --radius-sm: 10px;
        --safe-top: env(safe-area-inset-top, 0px);
        --safe-bottom: env(safe-area-inset-bottom, 0px);
      }

      html,
      body {
        height: 100%;
        overflow: hidden;
        background: var(--bg);
        font-family: "Plus Jakarta Sans", sans-serif;
        color: var(--text);
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        user-select: none;
      }

      #app {
        width: 100%;
        max-width: 430px;
        height: 100%;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
        background: var(--bg);
      }

      .screen {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding-top: var(--safe-top);
        padding-bottom: var(--safe-bottom);
      }

      .screen.hidden {
        display: none !important;
      }

      /* Typography */
      h1 {
        font-size: 28px;
        font-weight: 800;
        line-height: 1.2;
      }
      h2 {
        font-size: 22px;
        font-weight: 700;
      }
      h3 {
        font-size: 18px;
        font-weight: 600;
      }
      p {
        font-size: 15px;
        line-height: 1.6;
        color: var(--text-muted);
      }

      .baybayin-text,
      .map-greeting-baybayin,
      .reveal-baybayin,
      .char-breakdown-baybayin,
      .celebration-baybayin,
      .home-name-baybayin,
      .match-card.baybayin-card,
      .modal-example-baybayin,
      .modal-char-large,
      .recognition-char,
      .fill-char,
      .trace-char-display,
      .tracing-target-char {
        font-family: "Noto Sans Tagalog", "Segoe UI", sans-serif;
      }

      /* Buttons */
      .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 16px 24px;
        border-radius: var(--radius);
        font-family: "Plus Jakarta Sans", sans-serif;
        font-size: 16px;
        font-weight: 700;
        border: none;
        cursor: pointer;
        transition: all 0.15s ease;
        -webkit-tap-highlight-color: transparent;
        outline: none;
        width: 100%;
      }

      .btn:active {
        transform: scale(0.97);
      }

      .btn-primary {
        background: var(--primary);
        color: #1A1A00;
        border-bottom: 5px solid var(--primary-dark);
      }
      .btn-primary:active {
        border-bottom-width: 2px;
        transform: translateY(3px);
      }

      .btn-secondary {
        background: var(--surface);
        color: var(--text);
        border: 2px solid var(--border);
      }

      .btn-success {
        background: var(--primary);
        color: #1A1A00;
        border-bottom: 5px solid #D4A000;
      }
      .btn-success:active {
        border-bottom-width: 2px;
        transform: translateY(3px);
      }

      .btn-ghost {
        background: transparent;
        color: var(--text-muted);
        font-weight: 500;
      }

      /* Input */
      .input-field {
        width: 100%;
        padding: 16px 24px;
        border: 2px solid var(--border);
        border-radius: 100px;
        font-family: "Plus Jakarta Sans", sans-serif;
        font-size: 18px;
        font-weight: 600;
        background: var(--surface);
        color: var(--text);
        outline: none;
        transition: border-color 0.2s, box-shadow 0.2s;
        text-align: center;
        min-height: 56px;
        box-shadow: var(--shadow);
      }
      .input-field:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.2);
      }

      /* Disabled button */
      .btn:disabled,
      .btn[disabled] {
        opacity: 0.42;
        pointer-events: none;
        cursor: not-allowed;
        box-shadow: none;
      }

      /* Cards */
      .card {
        background: var(--surface);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        padding: 20px;
      }

      /* Animations */
      @keyframes shake {
        0%,
        100% {
          transform: translateX(0);
        }
        25% {
          transform: translateX(-8px);
        }
        75% {
          transform: translateX(8px);
        }
      }
      @keyframes bounce {
        0%,
        100% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.15);
        }
      }
      @keyframes fadeInUp {
        from {
          opacity: 0;
          transform: translateY(16px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      @keyframes pop {
        0% {
          transform: scale(0.5);
          opacity: 0;
        }
        70% {
          transform: scale(1.1);
        }
        100% {
          transform: scale(1);
          opacity: 1;
        }
      }
      @keyframes celebrate {
        0%,
        100% {
          transform: rotate(0);
        }
        25% {
          transform: rotate(-5deg);
        }
        75% {
          transform: rotate(5deg);
        }
      }
      @keyframes revealChar {
        from {
          opacity: 0;
          transform: scale(0.3);
        }
        to {
          opacity: 1;
          transform: scale(1);
        }
      }
      @keyframes progressFill {
        from {
          width: 0;
        }
        to {
          width: var(--target-width);
        }
      }
      @keyframes spin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
      @keyframes pulse {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.5;
        }
      }

      /* Mascot animations */
      @keyframes mascotBounce {
        0% { transform: translateY(0); }
        40% { transform: translateY(-3px); }
        100% { transform: translateY(0); }
      }
      @keyframes mascotCelebrate {
        0% { transform: translateY(0); }
        20% { transform: translateY(-5px); }
        40% { transform: translateY(0); }
        60% { transform: translateY(-5px); }
        100% { transform: translateY(0); }
      }
      @keyframes mascotFeedback {
        0% { opacity: 0; transform: scale(0.7); }
        15% { opacity: 1; transform: scale(1); }
        75% { opacity: 1; transform: scale(1); }
        100% { opacity: 0; transform: scale(0.8); }
      }
      .mascot-idle { animation: none; }
      .mascot-happy { animation: mascotBounce 0.2s ease 1; }
      .mascot-celebrating { animation: mascotCelebrate 0.6s ease 1; }
      .mascot-encouraging { animation: none; }
      .mascot-waving { animation: none; }
      .mascot-feedback { animation: mascotFeedback 2s ease forwards; pointer-events: none; }

      /* ---- LIVES & MAP STYLES ---- */
      @keyframes heartShake {
        0%   { transform: scale(1) rotate(0deg); }
        20%  { transform: scale(1.3) rotate(-12deg); }
        40%  { transform: scale(1.1) rotate(10deg); }
        60%  { transform: scale(1.2) rotate(-8deg); }
        80%  { transform: scale(1.05) rotate(5deg); }
        100% { transform: scale(1) rotate(0deg); }
      }
      @keyframes sparkleFloat {
        0% { transform: translate(0,0) scale(1.1); opacity: 1; }
        100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
      }
      @keyframes nodeUnlock {
        0% { transform: scale(0.5); opacity: 0; }
        70% { transform: scale(1.12); opacity: 1; }
        100% { transform: scale(1); opacity: 1; }
      }
      .heart-shake { animation: heartShake 0.45s ease; }
      .map-node-unlocking { animation: nodeUnlock 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards; }

      /* Status bar */
      .lives-bar {
        display: flex;
        align-items: center;
        gap: 0;
        padding: 10px 18px;
        background: #ffffff;
        border-bottom: 1px solid #F0F0F0;
        flex-shrink: 0;
      }
      .sb-stat {
        display: flex;
        align-items: center;
        gap: 4px;
      }
      .sb-num {
        font-family: "Plus Jakarta Sans", "DM Sans", sans-serif;
        font-size: 16px;
        font-weight: 700;
        color: #1A1A00;
        line-height: 1;
        font-variant-numeric: tabular-nums;
      }
      .sb-gap { width: 12px; flex-shrink: 0; }
      .lives-regen-timer {
        font-size: 11px;
        color: var(--text-muted);
        font-variant-numeric: tabular-nums;
        margin-left: 4px;
      }

      /* Progression map screen */
      .map-screen {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
        background: #ffffff;
      }
      .map-scroll-area {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        position: relative;
      }

      /* Greeting */
      .map-greeting {
        padding: 28px 20px 20px;
      }
      .map-greeting-name {
        font-size: 20px;
        font-weight: 700;
        color: var(--text);
        margin-bottom: 4px;
      }
      .map-greeting-baybayin {
        font-size: 14px;
        color: #B8900A;
        letter-spacing: 2px;
      }

      /* Section card — sticky: scrolls with content, locks to top of scroll area once reached */
      .map-section-card-sticky-wrap {
        position: sticky;
        top: 0;
        z-index: 100;
        background: #ffffff;
        padding: 0 0 8px;
        margin-top: -8px; /* collapse the visual gap when in normal flow */
      }
      .map-section-card {
        margin: 0 16px 0;
        background: #D4A000;
        border-radius: 16px;
        padding-bottom: 3px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
      }
      .map-section-card-inner {
        background: #FFC800;
        border-radius: 14px;
        padding: 16px;
        transition: transform 0.2s ease-out;
        overflow: hidden;
      }
      .map-section-card:active .map-section-card-inner {
        transform: translateY(2px);
        transition: transform 0.1s ease-out;
      }
      .map-section-card-top-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 4px;
      }
      .map-section-name {
        font-size: 11px;
        font-weight: 700;
        color: rgba(26,26,0,0.5);
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }
      .map-section-chevron {
        width: 8px;
        height: 14px;
        flex-shrink: 0;
        opacity: 0.5;
      }
      .map-section-lesson {
        font-size: 19px;
        font-weight: 800;
        color: #1A1A00;
        margin-bottom: 14px;
        line-height: 1.2;
      }
      .map-section-bar-track {
        width: 100%;
        height: 8px;
        background: rgba(180,130,0,0.35);
        border-radius: 4px;
        overflow: hidden;
        margin-bottom: 7px;
      }
      .map-section-bar-fill {
        height: 100%;
        background: #FFFFFF;
        border-radius: 4px;
        transition: width 0.4s ease;
      }
      .map-section-progress-text {
        font-size: 12px;
        font-weight: 600;
        color: rgba(26,26,0,0.5);
      }

      /* Lesson overview bottom sheet */
      @keyframes sheetSlideUp {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
      }
      .lesson-overview-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.45);
        z-index: 300;
        display: flex;
        align-items: flex-end;
      }
      .lesson-overview-sheet {
        width: 100%;
        max-height: 72vh;
        background: #ffffff;
        border-radius: 20px 20px 0 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        animation: sheetSlideUp 0.3s ease-out;
      }
      .lesson-overview-handle {
        width: 40px;
        height: 4px;
        background: #D0D0D0;
        border-radius: 2px;
        margin: 12px auto 4px;
        flex-shrink: 0;
      }
      .lesson-overview-header {
        padding: 12px 20px 16px;
        border-bottom: 1px solid #F0F0F0;
        flex-shrink: 0;
      }
      .lesson-overview-title {
        font-size: 22px;
        font-weight: 800;
        color: var(--text);
        margin-bottom: 12px;
      }
      .lesson-overview-pb-track {
        width: 100%;
        height: 8px;
        background: #F0F0F0;
        border-radius: 4px;
        overflow: hidden;
        margin-bottom: 6px;
      }
      .lesson-overview-pb-fill {
        height: 100%;
        background: #FFC800;
        border-radius: 4px;
      }
      .lesson-overview-progress-text {
        font-size: 12px;
        font-weight: 600;
        color: var(--text-muted);
      }
      .lesson-overview-list {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex: 1;
        padding-bottom: env(safe-area-inset-bottom, 8px);
      }
      .lesson-overview-row {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 13px 20px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
      }
      .lesson-overview-row.locked {
        opacity: 0.5;
        cursor: default;
      }
      .lesson-overview-dot {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .lesson-overview-dot.completed  { background: #FFC800; }
      .lesson-overview-dot.current    { background: #FFC800; }
      .lesson-overview-dot.locked     { background: #E8E8E8; }
      .lesson-overview-dot.review.completed { background: #A855F7; }
      .lesson-overview-dot.review.current   { background: #A855F7; }
      .lesson-overview-row-info {
        flex: 1;
        min-width: 0;
      }
      .lesson-overview-row-title {
        font-size: 15px;
        font-weight: 700;
        color: var(--text);
        line-height: 1.2;
      }
      .lesson-overview-row-chars {
        font-size: 13px;
        color: var(--text-muted);
        margin-top: 2px;
        font-family: "Noto Sans Tagalog", sans-serif;
        letter-spacing: 0.05em;
      }
      .lesson-overview-redo {
        font-size: 13px;
        font-weight: 600;
        color: #9CA3AF;
        flex-shrink: 0;
        padding: 4px 0 4px 8px;
      }

      /* Nodes area */
      .map-inner {
        position: relative;
        width: 100%;
        height: 2530px;
        background: #ffffff;
      }

      /* Single-SVG node for current lesson/review — ring and circle share one coordinate space */
      .map-node-svg {
        display: block;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: transform 0.1s ease;
      }
      .map-node-svg:active {
        transform: translateY(2px);
      }
      .map-node-wrap {
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        transform: translate(-50%, -50%);
        z-index: 2;
      }

      /* Face circle — layout and interaction */
      .map-node {
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        cursor: pointer;
        position: relative;
        -webkit-tap-highlight-color: transparent;
        transition: transform 0.1s ease;
      }

      /* Base layer: same-size darker circle, barely peeking below face */
      .map-node::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 0;
        width: inherit;
        height: inherit;
        border-radius: 50%;
        z-index: -1;
        transition: bottom 0.1s ease;
      }

      /* Curved arc highlight — thick rounded stroke following circle curvature */
      .map-node::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M8 25 A25 25 0 0 1 21 9' fill='none' stroke='white' stroke-width='8' stroke-linecap='round' opacity='0.22'/></svg>");
        background-size: 100% 100%;
        pointer-events: none;
        z-index: 1;
        filter: blur(0.6px);
      }
      .map-node.locked::before {
        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M8 25 A25 25 0 0 1 21 9' fill='none' stroke='white' stroke-width='8' stroke-linecap='round' opacity='0.15'/></svg>");
      }

      /* Completed — yellow face, dark-yellow base */
      .map-node.completed {
        width: 64px; height: 64px;
        background: #FFC800;
      }
      .map-node.completed::after { background: #D4A000; }
      .map-node.completed:active { transform: translateY(2px); }
      .map-node.completed:active::after { bottom: -1px; }

      /* Current — identical to completed */
      .map-node.current {
        width: 64px; height: 64px;
        background: #FFC800;
      }
      .map-node.current::after { background: #D4A000; }
      .map-node.current:active { transform: translateY(2px); }
      .map-node.current:active::after { bottom: -1px; }

      /* Locked — gray face, darker gray base */
      .map-node.locked {
        width: 60px; height: 60px;
        background: #E8E8E8;
        cursor: default;
      }
      .map-node.locked::after { background: #CCCCCC; }
      .map-node.locked:active { transform: translateY(2px); }
      .map-node.locked:active::after { bottom: -1px; }

      /* Review nodes — purple */
      .map-node.review-node { clip-path: none; border-radius: 50%; }
      .map-node.review-node.completed,
      .map-node.review-node.current { background: #A855F7; }
      .map-node.review-node.completed::after,
      .map-node.review-node.current::after { background: #8B3FD4; }
      .map-node.review-node.locked { background: #E8E8E8; }
      .map-node.review-node.locked::after { background: #CCCCCC; }
      .map-node.review-node.completed:active,
      .map-node.review-node.current:active { transform: translateY(2px); }
      .map-node.review-node.completed:active::after,
      .map-node.review-node.current:active::after { bottom: -1px; }

      .map-node-chars {
        font-family: "Noto Sans Tagalog", "Segoe UI", sans-serif;
        font-size: 13px;
        color: rgba(26,26,0,0.82);
        line-height: 1.1;
        font-weight: 700;
        text-align: center;
        letter-spacing: 0.05em;
      }
      .map-node-label {
        font-size: 15px;
        font-weight: 700;
        color: #6B7280;
        text-align: center;
        max-width: 100px;
        line-height: 1.3;
        white-space: normal;
        word-break: keep-all;
      }
      .map-mascot-marker {
        position: absolute;
        top: -50px;
        left: 50%;
        transform: translateX(-50%);
        line-height: 0;
        pointer-events: none;
        z-index: 3;
      }
      .map-locked-tip {
        position: fixed;
        background: rgba(30,30,40,0.88);
        color: white;
        font-size: 12px;
        font-weight: 600;
        padding: 8px 14px;
        border-radius: 10px;
        pointer-events: none;
        z-index: 150;
        white-space: nowrap;
        animation: fadeInUp 0.2s ease forwards;
        transform-origin: bottom center;
      }
      .map-sparkle {
        position: fixed;
        pointer-events: none;
        z-index: 100;
        animation: sparkleFloat 0.85s ease-out forwards;
        font-size: 16px;
        line-height: 1;
        color: #E0A800;
      }

      /* Action bar at bottom of map */
      .map-action-bar {
        flex-shrink: 0;
        padding: 14px 20px;
        padding-bottom: calc(14px + var(--safe-bottom));
        background: #ffffff;
        border-top: 1px solid #F0F0F0;
      }
      .map-start-btn {
        display: block;
        width: 100%;
        padding: 18px 24px;
        background: #FFC800;
        color: #1A1A00;
        border: none;
        border-bottom: 5px solid #D4A000;
        border-radius: 14px;
        font-family: "Plus Jakarta Sans", sans-serif;
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
        text-align: center;
        transition: transform 0.1s ease, border-bottom-width 0.1s ease;
        -webkit-tap-highlight-color: transparent;
        outline: none;
        letter-spacing: 0.02em;
      }
      .map-start-btn:active {
        transform: translateY(3px);
        border-bottom-width: 2px;
      }

      /* Zero lives overlay */
      .zero-lives-overlay {
        position: fixed;
        inset: 0;
        background: rgba(10,10,20,0.65);
        z-index: 200;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        backdrop-filter: blur(2px);
      }
      .zero-lives-card {
        background: #ffffff;
        border-radius: 24px;
        padding: 32px 24px;
        text-align: center;
        max-width: 340px;
        width: 100%;
        box-shadow: 0 24px 64px rgba(0,0,0,0.28);
      }
      .shield-saved-toast {
        position: fixed;
        top: 44%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #6D28D9;
        color: white;
        padding: 13px 22px;
        border-radius: 16px;
        font-weight: 700;
        font-size: 15px;
        z-index: 300;
        pointer-events: none;
        animation: mascotFeedback 2s ease forwards;
        box-shadow: 0 8px 24px rgba(109,40,217,0.45);
      }

      .animate-fadeInUp {
        animation: fadeInUp 0.4s ease forwards;
      }
      .animate-pop {
        animation: pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
      }
      .animate-bounce {
        animation: bounce 0.4s ease;
      }
      .animate-shake {
        animation: shake 0.4s ease;
      }
      .animate-celebrate {
        animation: celebrate 0.6s ease infinite;
      }

      /* ==================== ONBOARDING ==================== */
      #screen-onboarding {
        background: var(--bg);
      }

      .onboarding-inner {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 28px 24px 32px;
        min-height: 100%;
      }

      .onboarding-title {
        font-size: 34px;
        font-weight: 800;
        text-align: center;
        line-height: 1.25;
        color: var(--text);
      }

      .onboarding-subtitle {
        font-size: 16px;
        text-align: center;
        color: var(--text-muted);
        margin-bottom: 40px;
      }

      /* Step 1 watermark character */
      .onboarding-watermark {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -55%);
        font-size: 210px;
        color: var(--text);
        opacity: 0.04;
        pointer-events: none;
        line-height: 1;
        user-select: none;
      }

      /* Celebration star (replaces emoji) */
      .celebration-star {
        font-size: 64px;
        color: var(--primary);
        animation: celebrate 0.6s ease infinite;
        display: block;
        margin-bottom: 12px;
        line-height: 1;
      }

      /* Lesson complete star display */
      .lc-star-display {
        font-size: 44px;
        color: var(--primary);
        letter-spacing: 10px;
        margin-bottom: 16px;
        animation: celebrate 0.7s ease infinite;
      }

      .step-dots {
        display: flex;
        gap: 8px;
        margin-bottom: 32px;
      }

      .step-dot {
        width: 32px;
        height: 6px;
        border-radius: 3px;
        background: var(--border);
        transition: background 0.3s;
      }
      .step-dot.active {
        background: var(--primary);
      }
      .step-dot.done {
        background: var(--primary);
      }

      /* Step 2 - Reveal */
      .reveal-name-latin {
        font-size: 32px;
        font-weight: 800;
        text-align: center;
        margin-bottom: 8px;
      }

      .reveal-arrow {
        font-size: 24px;
        margin-bottom: 12px;
        color: var(--text-muted);
      }

      .reveal-baybayin {
        font-size: 56px;
        letter-spacing: 8px;
        text-align: center;
        min-height: 72px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 2px;
        margin-bottom: 24px;
        color: var(--text);
      }

      .reveal-char {
        display: inline-block;
        opacity: 0;
      }
      .reveal-char.shown {
        animation: revealChar 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
      }

      .char-breakdown {
        width: 100%;
        border-radius: var(--radius);
        overflow: hidden;
        border: 1px solid var(--border);
        margin-bottom: 24px;
      }

      .char-breakdown-row {
        display: flex;
        align-items: center;
        padding: 12px 16px;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        animation: fadeInUp 0.3s ease forwards;
        opacity: 0;
      }
      .char-breakdown-row:last-child {
        border-bottom: none;
      }

      .char-breakdown-baybayin {
        font-size: 28px;
        width: 40px;
        text-align: center;
        margin-right: 16px;
        color: var(--text);
      }

      .char-breakdown-latin {
        flex: 1;
        font-size: 16px;
        font-weight: 600;
        color: var(--text);
      }

      .char-breakdown-type {
        font-size: 12px;
        color: var(--text-muted);
        background: var(--bg);
        padding: 3px 8px;
        border-radius: 20px;
      }

      /* Step 3 - Trace onboarding */
      .trace-progress-text {
        font-size: 14px;
        color: var(--text-muted);
        margin-bottom: 16px;
        text-align: center;
      }

      .trace-char-display {
        font-size: 80px;
        text-align: center;
        margin-bottom: 4px;
        color: var(--text);
        line-height: 1;
      }

      .trace-char-label {
        font-size: 18px;
        font-weight: 600;
        text-align: center;
        color: var(--text-muted);
        margin-bottom: 16px;
      }

      .canvas-wrap {
        width: 100%;
        max-width: 280px;
        aspect-ratio: 1;
        position: relative;
        margin: 0 auto 16px;
      }

      .trace-canvas {
        width: 100%;
        height: 100%;
        border-radius: var(--radius);
        border: 2px solid var(--border);
        background: var(--surface);
        touch-action: none;
        display: block;
      }

      .canvas-controls {
        display: flex;
        gap: 12px;
        justify-content: center;
        margin-bottom: 16px;
      }

      .canvas-controls .btn {
        width: auto;
        padding: 10px 20px;
        font-size: 14px;
      }

      .trace-hint {
        font-size: 13px;
        text-align: center;
        color: var(--text-muted);
        margin-bottom: 16px;
      }

      /* Celebration */
      .celebration-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 32px 24px;
        text-align: center;
      }

      .celebration-emoji {
        font-size: 64px;
        margin-bottom: 16px;
        animation: celebrate 0.6s ease infinite;
        display: block;
      }

      .celebration-baybayin {
        font-size: 48px;
        margin: 16px 0;
        color: var(--text);
        letter-spacing: 4px;
      }

      /* ==================== HOME DASHBOARD ==================== */
      #screen-home {
        background: var(--bg);
      }

      .home-header {
        background: var(--surface);
        padding: 20px 20px 16px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        position: sticky;
        top: 0;
        z-index: 10;
      }

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

      .home-greeting {
        font-size: 13px;
        color: var(--text-muted);
        font-weight: 500;
      }

      .home-name-baybayin {
        font-size: 26px;
        font-weight: 700;
        color: var(--text);
        letter-spacing: 2px;
        line-height: 1.2;
      }

      .home-actions {
        display: flex;
        gap: 8px;
      }

      .icon-btn {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--bg);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 18px;
        transition: all 0.15s;
        -webkit-tap-highlight-color: transparent;
      }
      .icon-btn:active {
        transform: scale(0.9);
        background: var(--border);
      }

      .progress-bar-wrap {
        background: var(--border);
        border-radius: 6px;
        height: 10px;
        overflow: hidden;
      }

      .progress-bar-fill {
        height: 100%;
        background: linear-gradient(90deg, var(--primary), #ffa500);
        border-radius: 6px;
        transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        animation: progressFill 1s ease forwards;
      }

      .progress-label {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        margin-top: 4px;
      }

      .progress-label-left {
        color: var(--text-muted);
        font-weight: 500;
      }
      .progress-label-right {
        color: var(--primary-dark);
        font-weight: 700;
      }

      .lessons-list {
        padding: 20px 20px 32px;
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .lesson-card {
        background: var(--surface);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        padding: 18px 20px;
        display: flex;
        align-items: center;
        gap: 16px;
        cursor: pointer;
        transition: all 0.15s ease;
        border: 2px solid transparent;
        position: relative;
        overflow: hidden;
      }

      .lesson-card:active {
        transform: scale(0.98);
      }

      .lesson-card.available {
        border-color: var(--primary);
      }
      .lesson-card.available::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--primary);
      }

      .lesson-card.completed {
        border-color: var(--primary);
        background: #FFFBEB;
      }
      .lesson-card.completed::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--primary);
      }

      .lesson-card.locked {
        opacity: 0.55;
        cursor: not-allowed;
      }
      .lesson-card.locked:active {
        transform: none;
      }

      .lesson-icon {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        flex-shrink: 0;
        font-family: "Noto Sans Tagalog", "Segoe UI", sans-serif;
        font-weight: 700;
      }

      .lesson-card.locked .lesson-icon {
        background: #f3f4f6;
        color: var(--text-muted);
      }
      .lesson-card.available .lesson-icon {
        background: var(--primary-light);
        color: var(--text);
      }
      .lesson-card.completed .lesson-icon {
        background: var(--primary-light);
        color: #1A1A00;
      }

      .lesson-info {
        flex: 1;
        min-width: 0;
      }

      .lesson-title {
        font-size: 15px;
        font-weight: 700;
        color: var(--text);
        margin-bottom: 4px;
      }

      .lesson-chars {
        font-size: 18px;
        color: var(--text-muted);
        letter-spacing: 3px;
      }

      .lesson-badge {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        flex-shrink: 0;
      }

      .lesson-card.locked .lesson-badge {
        background: #f3f4f6;
      }
      .lesson-card.available .lesson-badge {
        background: var(--primary);
      }
      .lesson-card.completed .lesson-badge {
        background: var(--primary);
      }

      /* ==================== EXERCISE SCREEN ==================== */
      #screen-exercise {
        background: var(--bg);
      }

      .exercise-header {
        display: flex;
        align-items: center;
        padding: 16px 20px;
        gap: 16px;
        background: var(--surface);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        position: sticky;
        top: 0;
        z-index: 10;
      }

      .ex-back-btn {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--bg);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 18px;
        -webkit-tap-highlight-color: transparent;
        flex-shrink: 0;
      }

      .ex-progress-wrap {
        flex: 1;
        display: flex;
        gap: 6px;
        align-items: center;
      }

      .ex-dot {
        flex: 1;
        height: 8px;
        border-radius: 4px;
        background: var(--border);
        transition: background 0.3s;
      }
      .ex-dot.done {
        background: var(--primary);
      }
      .ex-dot.current {
        background: var(--primary);
        animation: pulse 1s ease infinite;
      }

      .ex-lesson-title {
        font-size: 13px;
        font-weight: 600;
        color: var(--text-muted);
        flex-shrink: 0;
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .exercise-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 24px 20px;
      }

      /* Recognition */
      .recognition-prompt {
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--surface);
        border-radius: 24px;
        box-shadow: var(--shadow);
        margin-bottom: 24px;
        padding: 32px;
        min-height: 180px;
      }

      .recognition-char {
        font-size: 100px;
        line-height: 1;
        color: var(--text);
      }

      .recognition-question {
        font-size: 18px;
        font-weight: 700;
        color: #1A1A00;
        text-align: center;
        margin-bottom: 20px;
      }

      /* L2 exercise prompt: illustration + speech bubble side-by-side */
      .l2-prompt {
        flex-direction: row !important;
        gap: 0 !important;
        padding: 14px 16px !important;
        min-height: 110px !important;
        align-items: center;
      }
      .l2-ill-wrap {
        flex: 0 0 80px;
        width: 80px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .l2-ill-wrap svg {
        width: 80px;
        height: 80px;
        display: block;
        flex-shrink: 0;
      }
      .l2-bubble {
        flex: 1;
        margin-left: 12px;
        background: white;
        border: 1.5px solid #E8E8E8;
        border-radius: 12px;
        padding: 12px 14px;
        position: relative;
      }
      /* Speech bubble tail (pointing left toward illustration) */
      .l2-bubble::after {
        content: '';
        position: absolute;
        right: 100%;
        top: 50%;
        transform: translateY(-50%);
        border: 9px solid transparent;
        border-right-color: #E8E8E8;
      }
      .l2-bubble::before {
        content: '';
        position: absolute;
        right: 100%;
        top: 50%;
        transform: translate(3px, -50%);
        border: 7px solid transparent;
        border-right-color: white;
        z-index: 1;
      }
      .l2-word {
        font-size: 18px;
        font-weight: 800;
        color: var(--text);
        line-height: 1.3;
        display: block;
      }

      .options-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
      }

      /* ── Universal answer button ── */
      .answer-btn {
        background: #FFFFFF;
        border: none;
        border-radius: 12px;
        padding: 16px;
        min-height: 56px;
        font-size: 16px;
        font-weight: 700;
        color: #1A1A00;
        border-bottom: 4px solid #E0E0E0;
        cursor: pointer;
        transition: transform 0.1s;
        width: 100%;
        text-align: center;
        font-family: "Plus Jakarta Sans", sans-serif;
        -webkit-tap-highlight-color: transparent;
        outline: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1.3;
      }
      .answer-btn:active:not(:disabled) {
        transform: translateY(2px);
        border-bottom-width: 2px;
      }
      .answer-btn:disabled { cursor: not-allowed; opacity: 0.6; }
      .answer-btn-correct { background: #FFF9E6 !important; border-bottom-color: #D4A000 !important; }
      .answer-btn-wrong { background: #F8D7DA !important; border-bottom-color: #E8A0A8 !important; animation: shake 0.4s ease; }
      .answer-btn-selected { background: var(--primary-light) !important; border-bottom-color: var(--primary) !important; }
      .answer-btn-matched { background: #D4EDDA !important; border-bottom-color: #A3D9A5 !important; opacity: 0.7; pointer-events: none; }
      /* Baybayin font variant */
      .answer-btn-bay { font-family: "Noto Sans Tagalog", "Segoe UI", sans-serif; font-size: 32px; }
      /* Tile variant (sentence builder - natural width) */
      .answer-btn-tile { width: auto; padding: 10px 14px; font-family: "Noto Sans Tagalog", "Segoe UI", sans-serif; font-size: 18px; min-height: 48px; }
      .answer-btn-placed { background: #FFF3B0 !important; border-bottom-color: #D4A800 !important; }

      .feedback-banner {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 18px;
        border-radius: var(--radius);
        margin-top: 16px;
        font-weight: 700;
        font-size: 16px;
        animation: fadeInUp 0.3s ease forwards;
      }
      .feedback-banner.correct {
        background: #FFF9E6;
        color: #B8900A;
      }
      .feedback-banner.wrong {
        background: #fee2e2;
        color: #dc2626;
      }

      /* Matching */
      .matching-instruction {
        font-size: 15px;
        font-weight: 600;
        text-align: center;
        color: var(--text-muted);
        margin-bottom: 20px;
      }

      .matching-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        flex: 1;
      }

      /* .match-card is an alias for answer-btn */
      .match-card.baybayin-card { font-family: "Noto Sans Tagalog", "Segoe UI", sans-serif; font-size: 34px; }
      .match-card.latin-card { font-size: 16px; }
      .match-card.hidden-card {
        visibility: hidden;
      }

      /* Fill in Blank */
      .fill-word-display {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        background: var(--surface);
        border-radius: 24px;
        box-shadow: var(--shadow);
        padding: 28px 20px;
        margin-bottom: 12px;
        min-height: 140px;
        flex-wrap: wrap;
      }

      .fill-char {
        font-size: 60px;
        line-height: 1;
        color: var(--text);
      }

      .fill-placeholder {
        width: 60px;
        height: 72px;
        border-radius: 10px;
        border: 3px dashed var(--primary);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 36px;
        color: var(--primary);
        background: var(--primary-light);
      }

      .fill-latin-display {
        font-size: 16px;
        font-weight: 600;
        text-align: center;
        color: var(--text-muted);
        margin-bottom: 20px;
        letter-spacing: 2px;
      }

      .fill-options-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
      }

      /* fill-option-btn replaced by answer-btn */

      /* Tracing Exercise */
      .tracing-target {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
        background: var(--surface);
        border-radius: 24px;
        box-shadow: var(--shadow);
        margin-bottom: 20px;
      }

      .tracing-target-char {
        font-size: 72px;
        line-height: 1;
        color: var(--text);
        margin-bottom: 4px;
      }

      .tracing-target-label {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-muted);
        margin-bottom: 12px;
      }

      .show-me-btn {
        padding: 8px 18px;
        border-radius: 20px;
        background: var(--primary-light);
        border: 2px solid var(--primary);
        font-family: "Plus Jakarta Sans", sans-serif;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        color: var(--text);
        -webkit-tap-highlight-color: transparent;
        transition: all 0.15s;
      }
      .show-me-btn:active {
        transform: scale(0.95);
      }

      .tracing-canvas-wrap {
        width: 100%;
        max-width: 280px;
        aspect-ratio: 1;
        position: relative;
        margin: 0 auto 12px;
      }

      .tracing-canvas {
        width: 100%;
        height: 100%;
        border-radius: var(--radius);
        border: 2.5px solid var(--border);
        background: var(--surface);
        touch-action: none;
        display: block;
      }

      .tracing-hint {
        font-size: 13px;
        text-align: center;
        color: var(--text-muted);
        margin-bottom: 12px;
      }

      .tracing-controls {
        display: flex;
        gap: 10px;
        justify-content: center;
        margin-bottom: 12px;
      }
      .tracing-controls .btn {
        width: auto;
        padding: 10px 20px;
        font-size: 14px;
      }

      /* Lesson Complete */
      .lesson-complete-wrap {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 32px 24px;
        text-align: center;
      }

      .lc-emoji {
        font-size: 72px;
        display: block;
        margin-bottom: 20px;
        animation: celebrate 0.7s ease infinite;
      }

      .lc-title {
        font-size: 28px;
        font-weight: 800;
        margin-bottom: 8px;
      }

      .lc-subtitle {
        font-size: 16px;
        color: var(--text-muted);
        margin-bottom: 28px;
      }

      .lc-chars-learned {
        display: flex;
        gap: 10px;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 28px;
      }

      .lc-char-badge {
        background: var(--surface);
        border: 2px solid var(--primary);
        border-radius: 12px;
        padding: 10px 16px;
        font-size: 30px;
        color: var(--text);
        box-shadow: var(--shadow);
        animation: pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        opacity: 0;
      }

      .lc-stars {
        display: flex;
        gap: 8px;
        justify-content: center;
        margin-bottom: 24px;
        font-size: 36px;
      }

      /* ==================== REFERENCE SCREEN ==================== */
      #screen-reference {
        background: var(--bg);
      }

      .ref-header {
        display: flex;
        align-items: center;
        padding: 16px 20px;
        gap: 16px;
        background: var(--surface);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        position: sticky;
        top: 0;
        z-index: 10;
      }

      .ref-title {
        flex: 1;
        font-size: 18px;
        font-weight: 700;
      }

      .ref-section-title {
        font-size: 13px;
        font-weight: 700;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 1px;
        padding: 20px 20px 10px;
      }

      .ref-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        padding: 0 20px;
        margin-bottom: 20px;
      }

      .ref-char-card {
        background: var(--surface);
        border-radius: 14px;
        box-shadow: var(--shadow);
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 12px 8px;
        cursor: pointer;
        transition: all 0.15s;
        border: 2px solid transparent;
        -webkit-tap-highlight-color: transparent;
      }

      .ref-char-card:active {
        transform: scale(0.95);
      }
      .ref-char-card.locked-char {
        filter: blur(3px) grayscale(1);
        cursor: not-allowed;
        pointer-events: none;
      }
      .ref-char-card:not(.locked-char) {
        border-color: var(--primary);
      }

      .ref-char-glyph {
        font-size: 32px;
        color: var(--text);
        margin-bottom: 4px;
        line-height: 1;
      }

      .ref-char-latin {
        font-size: 11px;
        font-weight: 700;
        color: var(--text-muted);
        text-align: center;
      }

      /* Modal */
      .modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 100;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        animation: fadeInUp 0.2s ease;
      }

      .modal-overlay.hidden {
        display: none;
      }

      .modal-sheet {
        background: var(--surface);
        border-radius: 24px 24px 0 0;
        padding: 28px 28px calc(28px + var(--safe-bottom));
        width: 100%;
        max-width: 430px;
        animation: fadeInUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        text-align: center;
      }

      .modal-handle {
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: var(--border);
        margin: 0 auto 24px;
      }

      .modal-char-large {
        font-size: 96px;
        color: var(--text);
        margin-bottom: 8px;
        line-height: 1;
      }

      .modal-char-latin {
        font-size: 24px;
        font-weight: 800;
        margin-bottom: 20px;
        color: var(--text);
      }

      .modal-example {
        background: var(--bg);
        border-radius: var(--radius);
        padding: 16px;
        margin-bottom: 20px;
      }

      .modal-example-baybayin {
        font-size: 36px;
        color: var(--text);
        margin-bottom: 4px;
      }

      .modal-example-latin {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-muted);
      }

      .modal-example-meaning {
        font-size: 13px;
        color: var(--text-muted);
        margin-top: 2px;
      }

      /* ==================== TEACHING PHASE ==================== */
      .phase-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 11px;
        font-weight: 700;
        padding: 4px 10px;
        border-radius: 20px;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        white-space: nowrap;
      }
      .phase-badge.learning {
        background: #FFF3CD;
        color: #1A1A00;
      }
      .phase-badge.practicing {
        background: var(--primary-light);
        color: #92400E;
      }
      .teaching-header {
        display: flex;
        align-items: center;
        padding: 12px 16px;
        gap: 12px;
        background: #ffffff;
        border-bottom: 1px solid #F0F0F0;
        flex-shrink: 0;
        position: relative;
      }
      .teaching-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 24px 20px 0;
        display: flex;
        flex-direction: column;
      }
      .teaching-footer {
        padding: 16px 20px;
        padding-bottom: calc(16px + var(--safe-bottom));
        background: #ffffff;
        border-top: 1px solid #F0F0F0;
        flex-shrink: 0;
      }
      .teaching-step-title {
        font-size: 26px;
        font-weight: 800;
        color: var(--text);
        margin-bottom: 12px;
        line-height: 1.2;
      }
      .teaching-explanation {
        font-size: 15px;
        line-height: 1.65;
        color: var(--text-muted);
        margin-bottom: 20px;
      }
      .kudlit-demo-box {
        background: var(--surface);
        border-radius: 20px;
        box-shadow: var(--shadow);
        padding: 24px 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        margin-bottom: 20px;
      }
      .kudlit-demo-char {
        font-family: "Noto Sans Tagalog", "Segoe UI", sans-serif;
        font-size: 68px;
        line-height: 1;
        color: var(--text);
        text-align: center;
      }
      .kudlit-demo-label {
        font-size: 12px;
        font-weight: 600;
        color: var(--text-muted);
        margin-top: 4px;
        text-align: center;
      }
      .kudlit-demo-arrow {
        font-size: 26px;
        color: var(--text-muted);
        flex-shrink: 0;
      }
      .kudlit-demo-result-char {
        font-family: "Noto Sans Tagalog", "Segoe UI", sans-serif;
        font-size: 68px;
        line-height: 1;
        color: var(--primary-dark);
        text-align: center;
        animation: fadeInUp 0.4s ease forwards;
      }
      .kudlit-demo-result-label {
        font-size: 12px;
        font-weight: 700;
        color: var(--primary-dark);
        margin-top: 4px;
        text-align: center;
      }
      .kudlit-examples-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 20px;
      }
      .kudlit-example-row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        background: #F9FAFB;
        border-radius: 12px;
      }
      .kudlit-example-base {
        font-family: "Noto Sans Tagalog", "Segoe UI", sans-serif;
        font-size: 26px;
        color: var(--text-muted);
        width: 34px;
        text-align: center;
        line-height: 1;
      }
      .kudlit-example-mid {
        font-size: 13px;
        color: var(--text-muted);
      }
      .kudlit-example-result {
        font-family: "Noto Sans Tagalog", "Segoe UI", sans-serif;
        font-size: 26px;
        color: var(--text);
        width: 40px;
        text-align: center;
        line-height: 1;
      }
      .kudlit-example-label {
        font-size: 13px;
        color: var(--text-muted);
        font-weight: 600;
      }
      .teaching-practice-prompt {
        font-size: 18px;
        font-weight: 700;
        color: var(--text);
        text-align: center;
        margin-bottom: 6px;
      }
      .teaching-practice-char {
        font-family: "Noto Sans Tagalog", "Segoe UI", sans-serif;
        font-size: 80px;
        line-height: 1;
        text-align: center;
        margin: 12px 0 24px;
        color: var(--text);
      }
      .teaching-practice-btns {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
      }
      /* teaching-choice-btn replaced by answer-btn */
      .virama-word-display {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        gap: 8px;
        flex-wrap: wrap;
      }
      .virama-word-display.example {
        background: #F9FAFB;
        border-radius: 14px;
        padding: 14px 16px;
        margin-bottom: 10px;
      }
      .virama-char-group {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
      }
      .virama-char-bay {
        font-family: "Noto Sans Tagalog", "Segoe UI", sans-serif;
        font-size: 34px;
        line-height: 1;
        color: var(--text);
      }
      .virama-char-bay.highlighted { color: var(--primary-dark); }
      .virama-char-roman {
        font-size: 11px;
        font-weight: 600;
        color: var(--text-muted);
      }
      /* virama-tap-btn replaced by answer-btn */
      .teaching-feedback-banner {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        border-radius: 12px;
        font-weight: 700;
        font-size: 14px;
        margin-top: 14px;
        animation: fadeInUp 0.25s ease forwards;
        width: 100%;
      }
      .teaching-feedback-banner.correct { background: #FFF9E6; color: #B8900A; }
      .teaching-feedback-banner.wrong { background: #FEF3C7; color: #92400E; }
      .teaching-progress-dots {
        display: flex;
        gap: 4px;
        justify-content: center;
      }
      .teaching-progress-dot {
        height: 6px;
        border-radius: 3px;
        background: var(--border);
        transition: all 0.3s;
        width: 6px;
      }
      .teaching-progress-dot.done { background: var(--primary); }
      .teaching-progress-dot.current { background: var(--primary); width: 18px; }

      /* Loading state */
      .loading-spinner {
        width: 40px;
        height: 40px;
        border: 4px solid var(--border);
        border-top-color: var(--primary);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
        margin: 40px auto;
      }

      /* Confetti canvas */
      #confetti-canvas {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
        z-index: 200;
      }

      /* ==================== SECTION CARD SLIDE ANIMATION ==================== */
      @keyframes secSlideUpOut   { from { opacity:1; transform:translateY(0)    } to { opacity:0; transform:translateY(-18px) } }
      @keyframes secSlideUpIn    { from { opacity:0; transform:translateY(18px)  } to { opacity:1; transform:translateY(0)    } }
      @keyframes secSlideDownOut { from { opacity:1; transform:translateY(0)    } to { opacity:0; transform:translateY(18px)  } }
      @keyframes secSlideDownIn  { from { opacity:0; transform:translateY(-18px) } to { opacity:1; transform:translateY(0)    } }
      .sec-slide-up-out   { animation: secSlideUpOut   0.25s ease-out both; }
      .sec-slide-up-in    { animation: secSlideUpIn    0.25s ease-out both; }
      .sec-slide-down-out { animation: secSlideDownOut 0.25s ease-out both; }
      .sec-slide-down-in  { animation: secSlideDownIn  0.25s ease-out both; }

      /* ==================== CHALLENGE NUDGE CARD ==================== */
      @keyframes nudgeSlideUp { from { opacity:0; transform:translateX(-50%) translateY(72px) } to { opacity:1; transform:translateX(-50%) translateY(0) } }
      #challenge-nudge {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 398px; /* 430 - 32px margins */
        bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 8px);
        z-index: 90;
        padding: 0 16px;
        box-sizing: border-box;
        animation: nudgeSlideUp 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) both;
      }
      #challenge-nudge.nudge-dismiss {
        animation: nudgeSlideUp 0.18s ease-in reverse both;
      }

      /* ==================== STREAK POPOVER ==================== */
      @keyframes popoverIn { from { opacity:0; transform:scale(0.9) translateY(-4px) } to { opacity:1; transform:scale(1) translateY(0) } }
      .streak-popover {
        position: fixed;
        background: #ffffff;
        border-radius: 14px;
        box-shadow: 0 4px 24px rgba(0,0,0,0.15), 0 1px 4px rgba(0,0,0,0.08);
        width: 210px;
        z-index: 300;
        overflow: hidden;
        animation: popoverIn 0.15s ease-out both;
        transform-origin: top left;
      }

      /* ==================== BOTTOM NAV BAR ==================== */
      .bottom-nav {
        position: fixed;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 430px;
        height: 56px;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: #ffffff;
        border-top: 1px solid #F0F0F0;
        display: flex;
        align-items: stretch;
        z-index: 100;
        transition: transform 0.3s ease;
        box-sizing: content-box;
      }
      .bottom-nav.nav-hidden {
        transform: translate(-50%, 100%);
      }
      .nav-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        padding: 8px 4px;
        position: relative;
        border: none;
        background: transparent;
        outline: none;
      }
      .nav-tab-icon-wrap {
        width: 24px;
        height: 24px;
        position: relative;
        flex-shrink: 0;
      }
      .nav-tab-label {
        font-size: 11px;
        font-family: "Plus Jakarta Sans", sans-serif;
        font-weight: 500;
        color: #999999;
        line-height: 1;
      }
      .nav-tab.active .nav-tab-label {
        font-weight: 700;
        color: #FFC800;
      }
      .nav-notification-dot {
        position: absolute;
        top: -1px;
        right: -3px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #FFC800;
        border: 2px solid #ffffff;
      }
      /* Adjust map screen bottom padding for nav bar */
      .map-screen {
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
      }

      /* ==================== DAILY CHALLENGE ==================== */
      .challenge-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.45);
        z-index: 300;
        display: flex;
        align-items: flex-end;
      }
      .challenge-sheet {
        width: 100%;
        max-height: 85vh;
        background: #ffffff;
        border-radius: 20px 20px 0 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        animation: sheetSlideUp 0.3s ease-out;
        padding-bottom: env(safe-area-inset-bottom, 8px);
      }
      .challenge-no-lives-note {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 12px;
        font-weight: 600;
        padding: 6px 14px;
        border-radius: 20px;
        background: #FFF3CD;
        color: #92400E;
      }
      .challenge-countdown {
        font-size: 30px;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
        color: var(--text);
      }

      /* ==================== STREAK ==================== */
      .streak-display {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 17px;
        font-weight: 800;
        color: var(--text);
        font-variant-numeric: tabular-nums;
        line-height: 1;
      }
      .streak-flame-svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
      }
      .streak-milestone-overlay {
        position: fixed;
        inset: 0;
        background: rgba(10,10,20,0.85);
        z-index: 500;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
      }
      .streak-milestone-card {
        background: #ffffff;
        border-radius: 28px;
        padding: 40px 28px;
        text-align: center;
        max-width: 340px;
        width: 100%;
        box-shadow: 0 24px 64px rgba(0,0,0,0.28);
        animation: pop 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards;
      }
      .streak-milestone-number {
        font-size: 96px;
        font-weight: 800;
        color: #FF8C00;
        line-height: 1;
        margin-bottom: 4px;
      }
      .streak-milestone-label {
        font-size: 22px;
        font-weight: 700;
        color: var(--text);
        margin-bottom: 12px;
      }
      .streak-milestone-msg {
        font-size: 15px;
        color: var(--text-muted);
        margin-bottom: 28px;
        line-height: 1.5;
      }
      .streak-shield-toast {
        position: fixed;
        top: 44%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #6D28D9;
        color: white;
        padding: 13px 22px;
        border-radius: 16px;
        font-weight: 700;
        font-size: 14px;
        z-index: 300;
        pointer-events: none;
        animation: mascotFeedback 2.5s ease forwards;
        box-shadow: 0 8px 24px rgba(109,40,217,0.45);
        text-align: center;
      }

      /* ==================== LEVEL 2 LOCKED BANNER ==================== */
      .level2-locked-banner {
        position: absolute;
        left: 16px;
        right: 16px;
        background: #F9FAFB;
        border-radius: 16px;
        border: 2px dashed #D1D5DB;
        padding: 20px 16px;
        text-align: center;
        z-index: 1;
      }
      .level2-locked-title {
        font-size: 15px;
        font-weight: 700;
        color: var(--text);
        margin-bottom: 6px;
      }
      .level2-locked-subtitle {
        font-size: 13px;
        color: var(--text-muted);
        line-height: 1.5;
      }
      .level2-section-label {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        background: #E5E7EB;
        color: #6B7280;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        padding: 4px 14px;
        border-radius: 20px;
        white-space: nowrap;
      }

      /* ==================== WORD-BANK EXERCISE ==================== */
      .wordbank-prompt-text {
        font-size: 18px;
        font-weight: 700;
        color: var(--text);
        text-align: center;
        margin-bottom: 4px;
      }
      .wordbank-prompt-latin {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-muted);
        text-align: center;
        margin-bottom: 16px;
      }
      .wordbank-answer-area {
        min-height: 64px;
        background: #F9FAFB;
        border: 2px dashed #D1D5DB;
        border-radius: 16px;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 12px;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
        transition: border-color 0.2s, background 0.2s;
      }
      .wordbank-answer-area.wb-correct {
        border-color: var(--success);
        background: #DCFCE7;
      }
      .wordbank-answer-area.wb-wrong {
        border-color: var(--error);
        background: #FEE2E2;
        animation: shake 0.4s ease;
      }
      .wordbank-tile-bank {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        margin-bottom: 16px;
      }
      /* wordbank tiles use answer-btn-tile and answer-btn-placed */
      .wordbank-tile.used { opacity: 0.15; pointer-events: none; }
      .wb-check-btn {
        width: 100%;
        padding: 16px 24px;
        background: #FFC800;
        color: #1A1A00;
        border: none;
        border-bottom: 5px solid #D4A000;
        border-radius: 14px;
        font-family: "Plus Jakarta Sans", sans-serif;
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        outline: none;
        transition: all 0.1s ease;
      }
      .wb-check-btn:active { transform: translateY(3px); border-bottom-width: 2px; }
      .wb-check-btn:disabled { opacity: 0.42; pointer-events: none; }

      /* ==================== DICTIONARY MODAL ==================== */
      .dict-modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.45);
        z-index: 300;
        display: flex;
        align-items: flex-end;
      }
      .dict-modal-sheet {
        width: 100%;
        max-height: 88vh;
        background: #ffffff;
        border-radius: 20px 20px 0 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        animation: sheetSlideUp 0.3s ease-out;
      }
    
/* ==================== AUTH SCREENS ==================== */
.signin-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 32px 48px;
  min-height: 100%;
  text-align: center;
}
.signin-mascot { margin-bottom: 24px; }
.signin-title { font-size: 40px; font-weight: 800; color: var(--text); margin-bottom: 8px; }
.signin-subtitle { font-size: 15px; color: var(--text-muted); margin-bottom: 48px; line-height: 1.5; }
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 320px;
  padding: 16px 24px;
  background: #ffffff;
  border: 1px solid #E0E0E0;
  border-bottom: 4px solid #CCCCCC;
  border-radius: 12px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #1a1a2e;
  cursor: pointer;
  margin-bottom: 16px;
  -webkit-tap-highlight-color: transparent;
}
.btn-google:active { transform: translateY(2px); border-bottom-width: 2px; }
.signin-free-text { font-size: 13px; color: var(--text-muted); }

.username-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 32px;
  min-height: 100%;
  text-align: center;
}
.username-title { font-size: 26px; font-weight: 800; margin-bottom: 24px; }
.username-preview { font-size: 15px; color: var(--text-muted); margin: 8px 0 24px; font-weight: 600; }

/* ==================== PROFILE & FRIENDS ==================== */
.profile-screen { overflow-y: auto; flex: 1; padding-bottom: 80px; }
.profile-header { padding: 32px 24px 20px; background: var(--primary-light); }
.profile-name { font-size: 28px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.profile-code-row { display: flex; align-items: center; gap: 10px; }
.profile-friend-code { font-size: 16px; font-weight: 600; color: var(--text-muted); }
.btn-copy-code {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary-dark);
  background: none;
  border: 1px solid var(--primary-dark);
  border-radius: 20px;
  padding: 3px 10px;
  cursor: pointer;
}
.profile-stats-row { display: flex; gap: 0; padding: 16px 24px; border-bottom: 1px solid var(--border); }
.profile-stat { display: flex; align-items: center; gap: 6px; margin-right: 20px; }
.profile-stat-icon { font-size: 18px; }
.profile-stat-num { font-size: 20px; font-weight: 800; color: var(--text); }
.profile-stat-label { font-size: 13px; color: var(--text-muted); }
.profile-section-title { font-size: 13px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; padding: 20px 24px 8px; }

.friend-row {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  border-bottom: 1px solid var(--border);
}
.friend-name { flex: 1; font-size: 16px; font-weight: 600; color: var(--text); }
.friend-streak { display: flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 700; color: var(--text); margin-right: 12px; }
.btn-remove-friend { font-size: 12px; color: var(--text-muted); background: none; border: none; cursor: pointer; padding: 4px 8px; }

.leaderboard-row {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  border-bottom: 1px solid var(--border);
}
.leaderboard-row.me { background: #FFFBE6; }
.lb-rank { width: 28px; font-size: 15px; font-weight: 800; color: var(--text-muted); }
.lb-name { flex: 1; font-size: 15px; font-weight: 600; color: var(--text); }
.lb-streak { display: flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 700; color: var(--text); }

.friends-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

/* ==================== MODAL CARD ==================== */
.modal-card {
  background: white;
  border-radius: 20px;
  padding: 24px;
  width: calc(100% - 40px);
  max-width: 390px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.18);
}
.modal-card h3 { font-size: 18px; font-weight: 800; margin-bottom: 4px; }

/* ==================== OFFLINE INDICATOR ==================== */
.offline-indicator {
  position: fixed;
  top: calc(var(--safe-top) + 4px);
  right: 12px;
  background: #9CA3AF;
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 10px;
  z-index: 999;
  pointer-events: none;
}