/* =========================================================================
       🧭 BẢN ĐỒ TRA CỨU CSS DESIGN SYSTEM (MASTER CSS NAVIGATION INDEX)
       -------------------------------------------------------------------------
       Mẹo tra cứu nhanh: Nhấn Ctrl + F và nhập đúng Mã CSS (ví dụ: [FEAT-CSS-01])
       -------------------------------------------------------------------------
       [FEAT-CSS-01] : Theme CSS Variables, Reset & Base Typography
       [FEAT-CSS-02] : Master 16:9 Stage Shell & Ambient Theater Backdrop
       [FEAT-CSS-03] : Global Top Header Bar & Status Controls
       [FEAT-CSS-04] : Intro Screen & Story Prologue Layout
       [FEAT-CSS-05] : Basecamp Home Screen & Hero Duo Artworks
       [FEAT-CSS-06] : Mountain Journey Map (3 Stations, SVG Route Path)
       [FEAT-CSS-07] : Gameplay Screen, Question Cards & 3D Companion Balloons
       [FEAT-CSS-08] : Summit Result Screen, Badges & Celebration Fanfare
       [FEAT-CSS-09] : Gamified Inventory Dialog & 2-Column Responsive Layout
       [FEAT-CSS-10] : Modal Dialogs Framework, Animations & Backdrops
       [FEAT-CSS-11] : Lesson Scope & Teacher Workshop Panels
       [FEAT-CSS-12] : Responsive Breakpoints, Mobile & Reduced Motion
       ========================================================================= */

    /* [FEAT-CSS-01] 🎨 THEME CSS VARIABLES, RESET & BASE TYPOGRAPHY */
    /* =========================================================================
       MASTER 16:9 THEME & LAYOUT (EXACT REPLICA OF THE SPECIFIED UI DESIGN)
       ========================================================================= */
    :root {
      --primary-dark-teal: #134e4a;
      --primary-teal: #0f766e;
      --primary-emerald: #10b981;
      --accent-amber: #f59e0b;
      --ink: #0f172a;
      --slate-subtle: #475569;
      --muted: #64748b;
      --border-soft: #e2e8f0;
      --border-dark: #cbd5e1;
      --surface-white: rgba(255, 255, 255, 0.96);
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 20px;
      --radius-pill: 9999px;
      --shadow-card: 0 16px 40px rgba(0, 0, 0, 0.14);
      --shadow-pill: 0 4px 14px rgba(0, 0, 0, 0.08);

      /* Typography dynamic */
      --q-font-size: 26px;
      --a-font-size: 20px;
      --furi-scale: 52%;
      --furi-offset: -0.075em;
    }

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

    /* Strictly constrain body to 100vw x 100vh with zero outer page scroll */
    html, body {
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      background: #090d16;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: ui-rounded, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
      color: var(--ink);
      user-select: none;
      -webkit-font-smoothing: antialiased;
    }

    /* Ambient Theater Backdrop (Dynamic blurred scenery behind 16:9 canvas) */
    #ambient-backdrop {
      position: fixed;
      inset: -30px;
      background-image: url('../images/backgrounds/mountain_fuji_basecamp.jpg');
      background-size: cover;
      background-position: center;
      filter: blur(35px) brightness(0.52) saturate(1.35);
      transform: scale(1.1);
      z-index: 1;
      pointer-events: none;
      transition: background-image 0.8s ease;
    }

    /* [FEAT-CSS-02] 🖥️ MASTER 16:9 STAGE SHELL & AMBIENT THEATER BACKDROP */
    /* MASTER 16:9 GAME CANVAS */
    #game-stage {
      position: relative;
      z-index: 10;
      width: 100vw;
      height: 100vh;
      max-width: calc(100vh * (16 / 9));
      max-height: calc(100vw * (9 / 16));
      aspect-ratio: 16 / 9;
      background-color: #0f172a;
      background-image: url('../images/backgrounds/mountain_fuji_basecamp.jpg');
      background-size: cover;
      background-position: center bottom;
      border-radius: 16px;
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.16);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: background-image 0.6s ease;
    }

    /* Full-Bleed Adaptive Canvas: On laptop displays near 16:9 (ratio 1.55 - 1.85), seamlessly eliminate black bars */
    @media (min-aspect-ratio: 155/100) and (max-aspect-ratio: 185/100) {
      html:not(.device-layout) #game-stage {
        max-width: 100%;
        max-height: 100%;
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        border-radius: 0;
        box-shadow: none;
      }
    }

    #game-stage:fullscreen,
    #game-stage:-webkit-full-screen {
      width: 100vw;
      height: 100vh;
      max-width: calc(100vh * (16 / 9));
      max-height: calc(100vw * (9 / 16));
      border-radius: 0;
    }

    button, input, textarea, select { font: inherit; }
    button { cursor: pointer; border: none; outline: none; transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.2s ease; }
    button:active { transform: scale(0.97); }

    /* Custom internal scrollbars */
    ::-webkit-scrollbar { width: 7px; height: 7px; }
    ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); border-radius: 4px; }
    ::-webkit-scrollbar-thumb { background: rgba(16, 185, 129, 0.4); border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(16, 185, 129, 0.7); }

    /* [FEAT-CSS-03] 🧭 GLOBAL TOP HEADER BAR & STATUS CONTROLS */
    /* =========================================================================
       1. TOP BAR (THM Studio · Chinh phục Nihongo · Actions)
       ========================================================================= */
    .thm-top-bar {
      margin: 12px 24px 0;
      padding: 8px 20px;
      background: rgba(255, 255, 255, 0.94);
      backdrop-filter: blur(14px);
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: var(--shadow-pill);
      border: 1px solid rgba(255, 255, 255, 0.85);
      flex-shrink: 0;
      z-index: 30;
    }
    .brand-title-badge {
      font-size: 1.15rem;
      font-weight: 900;
      color: var(--ink);
      letter-spacing: -0.3px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .brand-badge-logo {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .brand-logo-img {
      width: 26px;
      height: 26px;
      object-fit: contain;
      border-radius: 4px;
      display: inline-block;
      vertical-align: middle;
    }
    .brand-logo-emoji {
      font-size: 1.25rem;
      line-height: 1;
      display: inline-flex;
      align-items: center;
    }
    .top-center-subtitle {
      font-size: 1.05rem;
      font-weight: 800;
      color: #1e293b;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
      text-align: center;
    }
    .top-actions-group {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .top-action-btn {
      padding: 6px 16px;
      border-radius: var(--radius-sm);
      font-size: 0.85rem;
      font-weight: 700;
      background: #ffffff;
      color: var(--ink);
      border: 1.5px solid var(--border-dark);
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    .top-action-btn:hover {
      background: #f8fafc;
      border-color: #94a3b8;
    }
    .top-icon-btn {
      width: 34px;
      height: 34px;
      border-radius: var(--radius-pill);
      display: grid;
      place-items: center;
      background: #ffffff;
      color: var(--ink);
      font-size: 0.95rem;
      font-weight: 800;
      border: 1.5px solid var(--border-dark);
      cursor: pointer;
      transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      user-select: none;
    }
    .top-icon-btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
      transform: translateY(-1px);
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    }
    .top-icon-btn:active {
      transform: translateY(1px);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    /* [FEAT-CSS-07] 🏔️ GAMEPLAY SCREEN, QUESTION CARDS & 3D COMPANION BALLOONS */
    /* =========================================================================
       2. MAIN GAMEPLAY ROW (Left: Character on Ground | Center: Question Hero Card)
       ========================================================================= */
    .gameplay-main-stage {
      flex: 1;
      display: flex;
      align-items: center; /* Vertically centered */
      justify-content: center; /* Căn giữa tuyệt đối khung trắc nghiệm trên màn hình */
      padding: 6px 36px 10px;
      position: relative;
      z-index: 20;
      min-height: 0;
    }

    /* Left Character Area: Grounded precisely on the stone pavement with ample card clearance */
    .companion-ground-wrapper {
      position: absolute;
      left: clamp(14px, 2.2vw, 36px);
      bottom: 8px; /* Chân nhân vật chạm sàn đá chính xác */
      width: clamp(230px, 18vw, 300px);
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      z-index: 22;
      user-select: none;
    }
    .companion-ground-wrapper .character-standing-sprite {
      height: clamp(270px, 34vh, 340px);
    }
    .companion-ground-wrapper .character-standing-sprite.char-ren {
      height: clamp(270px, 34vh, 340px);
    }
    .companion-ground-wrapper .character-standing-sprite.char-kai {
      height: clamp(275px, 34.6vh, 346px);
    }

    /* Speech Bubble above Character - Manga/Game 3D Speech Balloon (Shifted left to NEVER collide with question card) */
    .char-speech-bubble {
      white-space: pre-line;
      position: absolute;
      bottom: calc(100% + 10px);
      left: clamp(-10px, -1vw, 10px);
      right: auto;
      transform: translateY(6px);
      background: #ffffff;
      padding: 10px 18px;
      border-radius: 18px;
      font-size: 0.88rem;
      font-weight: 800;
      color: #0f172a;
      box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.22), 0 3px 0 #cbd5e1;
      border: 2.5px solid #334155;
      white-space: normal;
      text-align: center;
      line-height: 1.4;
      max-width: 250px;
      min-width: 150px;
      width: max-content;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
      z-index: 30;
      word-break: break-word;
    }
    .char-speech-bubble.show {
      opacity: 1;
      transform: translateY(0);
    }
    .char-speech-bubble::after {
      content: "";
      position: absolute;
      bottom: -10px;
      right: 32px;
      left: auto;
      width: 0; height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-top: 10px solid #334155;
    }
    .char-speech-bubble::before {
      content: "";
      position: absolute;
      bottom: -7px;
      right: 33px;
      left: auto;
      width: 0; height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 8px solid #ffffff;
      z-index: 1;
    }

    .character-standing-sprite {
      height: clamp(310px, 44vh, 410px);
      width: auto;
      max-width: 480px;
      object-fit: contain;
      object-position: bottom center;
      display: block;
      vertical-align: bottom;
      margin: 0 auto;
      filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.45));
      transform-origin: bottom center; /* Pinned firmly to the ground: zero hovering */
      animation: charIdle 3.8s ease-in-out infinite;
      cursor: pointer;
      transition: transform 0.2s ease;
    }
    /* Precise height synchronization (x2 scale): Ren (915px body in 916px frame) & Kai (1000px body in 1024px frame) */
    .character-standing-sprite.char-ren {
      height: clamp(310px, 44vh, 410px);
    }
    .character-standing-sprite.char-kai {
      height: clamp(316px, 44.8vh, 418px);
    }
    .character-standing-sprite:hover {
      transform: scale(1.025);
    }
    @keyframes charIdle {
      0%, 100% { transform: scaleY(1); }
      50% { transform: scaleY(1.018); }
    }

    /* Center Question Column: Căn giữa cân đối, cách xa bóng thoại nhân vật ít nhất 60px */
    .question-column-wrapper {
      width: 100%;
      max-width: 720px;
      display: flex;
      flex-direction: column;
      align-self: center; /* Vertically centered between Top Bar & Status Pill */
      margin: -6px auto 0;
      z-index: 20;
      position: relative;
    }

    /* SLEEK GAMEPLAY HUD BAR (NO YAPPING, LEVEL, HEARTS, LIVE TIMER & PROGRESS) */
    .gameplay-stage-mission-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      background: rgba(255, 255, 255, 0.97);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-radius: 12px;
      border: 1.5px solid #cbd5e1;
      padding: 10px 20px;
      margin-bottom: 20px;
      box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
    }
    .gp-hud-left {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
    }
    .gp-diff-badge {
      font-size: 0.95rem;
      font-weight: 800;
      padding: 6px 14px;
      border-radius: 8px;
      min-width: 90px;
      text-align: center;
      justify-content: center;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      letter-spacing: 0.2px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }
    .gp-diff-badge.diff-easy {
      background: #ecfdf5;
      color: #047857;
      border: 1.5px solid #a7f3d0;
    }
    .gp-diff-badge.diff-medium {
      background: #fffbeb;
      color: #b45309;
      border: 1.5px solid #fde68a;
    }
    .gp-diff-badge.diff-hard {
      background: #fef2f2;
      color: #b91c1c;
      border: 1.5px solid #fecaca;
    }
    .gp-hearts-cluster {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 1.18rem;
      user-select: none;
    }
    .hud-heart {
      transition: all 0.25s ease;
      display: inline-block;
    }
    .hud-heart.lost {
      filter: grayscale(1) opacity(0.35);
      transform: scale(0.85);
    }

    .gp-hud-center {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .gp-timer-pill {
      font-size: 0.9rem;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      padding: 6px 16px;
      border-radius: 8px;
      background: #f1f5f9;
      color: #334155;
      border: 1.5px solid #cbd5e1;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s ease;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }
    .gp-timer-pill.urgent {
      background: #fff1f2;
      color: #e11d48;
      border-color: #fda4af;
      font-weight: 900;
    }
    .gp-timer-pill.critical, .gp-timer-pill.panic-pulse {
      background: #dc2626 !important;
      color: #ffffff !important;
      border-color: #991b1b !important;
      animation: timerCriticalPulse 0.5s infinite alternate ease-in-out;
      box-shadow: 0 0 16px rgba(220, 38, 38, 0.6) !important;
    }
    @keyframes timerCriticalPulse {
      0% { transform: scale(1); box-shadow: 0 0 0 rgba(220, 38, 38, 0); }
      50% { transform: scale(1.08); box-shadow: 0 0 16px rgba(220, 38, 38, 0.6); }
      100% { transform: scale(1); box-shadow: 0 0 0 rgba(220, 38, 38, 0); }
    }
    .gp-timer-pill.free {
      background: #f0fdf4;
      color: #166534;
      border-color: #bbf7d0;
    }
    .gp-bonus-pill {
      font-size: 0.85rem;
      font-weight: 800;
      padding: 6px 12px;
      border-radius: 8px;
      background: #f8fafc;
      color: #64748b;
      border: 1.5px solid #cbd5e1;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      transition: all 0.2s ease;
    }
    .gp-bonus-pill.bonus-boost {
      background: #eff6ff;
      color: #1d4ed8;
      border-color: #bfdbfe;
    }
    .gp-bonus-pill.bonus-fire, .gp-bonus-pill.streak-hot {
      background: linear-gradient(135deg, #ea580c, #dc2626) !important;
      color: #ffffff !important;
      border-color: #fca5a5 !important;
      box-shadow: 0 2px 10px rgba(234, 88, 12, 0.45) !important;
      animation: streakFlamePulse 0.8s infinite alternate ease-in-out;
    }
    .gp-bonus-pill.streak-godlike {
      background: linear-gradient(135deg, #7c3aed, #db2777) !important;
      color: #ffffff !important;
      border-color: #f472b6 !important;
      box-shadow: 0 2px 16px rgba(219, 39, 119, 0.6) !important;
      animation: streakFlamePulse 0.5s infinite alternate ease-in-out;
    }
    @keyframes streakFlamePulse {
      from { transform: scale(1); }
      to { transform: scale(1.06); }
    }
    #screen-gameplay.timer-panic-vignette {
      box-shadow: inset 0 0 50px rgba(220, 38, 38, 0.38);
      transition: box-shadow 0.2s ease;
    }

    .gp-hud-right {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .gp-progress-info {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 4px;
      min-width: 100px;
    }
    .gp-progress-label {
      font-size: 0.84rem;
      font-weight: 800;
      color: #0f172a;
    }
    .gp-progress-bar-track {
      width: 120px;
      height: 8px;
      background: #e2e8f0;
      border-radius: 6px;
      overflow: hidden;
    }
    .gp-progress-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, #10b981, #06b6d4);
      border-radius: 6px;
      transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* MAIN QUESTION HERO CARD */
    .question-hero-card {
      background: var(--surface-white);
      backdrop-filter: blur(16px);
      border-radius: var(--radius-lg);
      border: 2px solid var(--border-soft);
      padding: 20px 26px 18px;
      box-shadow: var(--shadow-card);
      position: relative;
    }

    .card-meta-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--muted);
      margin-bottom: 8px;
    }
    .card-divider-line {
      height: 1px;
      background: #e2e8f0;
      margin-bottom: 18px;
    }

    /* Question Sentence with Orange Accent Bar - Generous Vertical Spacing */
    .question-statement-box {
      border-left: 5px solid var(--accent-amber);
      border-radius: 2px;
      padding: 6px 0 6px 18px;
      margin: 4px 0 12px;
      min-height: 52px;
      display: flex;
      align-items: center;
    }
    .question-statement-text {
      white-space: pre-line;
      font-size: var(--q-font-size);
      font-weight: 900;
      color: var(--ink);
      line-height: 1.6; /* Giãn dòng thoải mái cho ký tự tiếng Nhật và tiếng Việt */
      letter-spacing: 0.2px;
    }
    ruby { ruby-position: over; }
    rt {
      font-size: var(--furi-scale);
      color: #047857;
      font-weight: 700;
      transform: translateY(var(--furi-offset));
    }

    /* Options 2x2 Grid */
    .hero-options-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
      margin-bottom: 18px;
    }
    .hero-option-btn {
      background: #ffffff;
      border: 1.5px solid var(--border-dark);
      border-radius: var(--radius-md);
      padding: 12px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      text-align: left;
      transition: all 0.15s ease;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    .hero-option-btn:hover:not(:disabled) {
      border-color: var(--primary-emerald);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.18);
    }
    .hero-option-btn:disabled { cursor: default; }

    .opt-letter-box {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      background: #f1f5f9;
      color: #475569;
      font-weight: 800;
      font-size: 0.85rem;
      display: grid;
      place-items: center;
      flex-shrink: 0;
      border: 1px solid #cbd5e1;
      transition: background 0.15s;
    }
    .opt-sentence-text {
      font-size: var(--a-font-size);
      font-weight: 800;
      color: #0f172a;
      line-height: 1.3;
      flex: 1;
    }

    /* Option States */
    .hero-option-btn.correct {
      background: #ecfdf5 !important;
      border-color: #10b981 !important;
      box-shadow: 0 0 0 2px #10b981, 0 8px 18px rgba(16, 185, 129, 0.25) !important;
    }
    .hero-option-btn.correct .opt-letter-box {
      background: #10b981 !important;
      color: #ffffff !important;
      border-color: #059669 !important;
    }
    .hero-option-btn.wrong {
      background: #fef2f2 !important;
      border-color: #ef4444 !important;
      box-shadow: 0 0 0 2px #ef4444, 0 8px 18px rgba(239, 68, 68, 0.22) !important;
      animation: shakeWrong 0.35s ease;
    }
    .hero-option-btn.wrong .opt-letter-box {
      background: #ef4444 !important;
      color: #ffffff !important;
      border-color: #dc2626 !important;
    }
    @keyframes shakeWrong {
      0%, 100% { transform: translateX(0); }
      20%, 60% { transform: translateX(-5px); }
      40%, 80% { transform: translateX(5px); }
    }

    /* Card Footer: Lifelines & Action Button */
    .card-bottom-actions-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    .lifelines-group {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      flex-wrap: nowrap;
    }
    .btn-lifeline {
      padding: 6px 12px;
      border-radius: var(--radius-sm);
      background: #f1f5f9;
      border: 1px solid var(--border-dark);
      font-size: 0.78rem;
      font-weight: 700;
      color: #334155;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap !important;
      flex-shrink: 0;
      line-height: 1;
      transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .btn-lifeline:hover:not(:disabled) {
      background: #e2e8f0;
      color: #0f172a;
      transform: translateY(-1px);
    }
    .btn-lifeline:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }
    .btn-lifeline-asset-icon {
      width: 22px;
      height: 22px;
      object-fit: contain;
      flex-shrink: 0;
      vertical-align: middle;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
      transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .btn-lifeline:hover:not(:disabled) .btn-lifeline-asset-icon {
      transform: scale(1.18) rotate(-4deg);
    }
    .btn-lifeline-time {
      background: #f0fdfa;
      border-color: #99f6e4;
      color: #0f766e;
    }
    .btn-lifeline-time:hover:not(:disabled) {
      background: #ccfbf1;
      border-color: #5eead4;
      color: #115e59;
    }
    .btn-lifeline-5050 {
      background: #fffbeb;
      border-color: #fde68a;
      color: #b45309;
    }
    .btn-lifeline-5050:hover:not(:disabled) {
      background: #fef3c7;
      border-color: #fcd34d;
      color: #92400e;
    }

    .btn-card-primary-action {
      padding: 8px 20px;
      border-radius: var(--radius-sm);
      font-size: 0.88rem;
      font-weight: 800;
      background: #cbd5e1;
      color: #475569;
      border: none;
      transition: all 0.2s ease;
      white-space: nowrap !important;
      flex-shrink: 0;
      line-height: 1.2;
    }
    .btn-card-primary-action.ready {
      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
      color: #ffffff;
      box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
    }
    .btn-card-primary-action.ready:hover {
      transform: translateY(-2px);
    }

    /* Pedagogical Explanation Drawer inside Card */
    .explanation-inside-card {
      margin-top: 10px;
      padding: 10px 14px;
      border-radius: var(--radius-sm);
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      font-size: 0.82rem;
      line-height: 1.45;
      color: #334155;
      display: none;
    }
    .explanation-inside-card.active { display: block; animation: fadeIn 0.2s ease; }

    /* =========================================================================
       3. FLOATING STATUS PILL BAR (Đúng liên tiếp · Tỉ lệ đúng · Đã trả lời)
       ========================================================================= */
    .bottom-status-floating-pill {
      margin: 0 auto 6px;
      padding: 6px 36px;
      background: rgba(255, 255, 255, 0.94);
      backdrop-filter: blur(14px);
      border-radius: var(--radius-pill);
      display: flex;
      align-items: center;
      gap: 40px;
      box-shadow: var(--shadow-pill);
      border: 1px solid #e2e8f0;
      font-size: 0.82rem;
      font-weight: 700;
      color: #334155;
      flex-shrink: 0;
      z-index: 25;
    }
    .status-stat-unit b {
      color: #0f172a;
      font-weight: 900;
    }

    /* =========================================================================
       4. FOOTER BAR (THM日本語教材 · Bản chạy offline · Giảm chuyển động)
       ========================================================================= */
    .thm-footer-bar {
      margin: 0 auto 6px;
      padding: 4px 12px;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.75rem;
      color: rgba(255, 255, 255, 0.88) !important;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.6);
      flex-shrink: 0;
      z-index: 25;
      pointer-events: none;
    }
    .footer-btn-link {
      padding: 3px 10px;
      border-radius: var(--radius-sm);
      background: #ffffff;
      border: 1px solid var(--border-dark);
      font-size: 0.72rem;
      font-weight: 700;
      color: #334155;
    }
    .footer-btn-link:hover { background: #f1f5f9; }

    /* =========================================================================
       SCREEN CONTAINER ARCHITECTURE (ANTI-OVERWRITE ENGINE)
       ========================================================================= */
    .game-screen {
      display: none;
      width: 100%;
      height: 100%;
      flex-direction: column;
      justify-content: space-between;
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 0.35s ease;
      pointer-events: none;
      z-index: 10;
    }
    .game-screen.active {
      display: flex;
      opacity: 1;
      pointer-events: auto;
    }

    /* [FEAT-CSS-04] 📜 INTRO SCREEN & STORY PROLOGUE LAYOUT */
    /* =========================================================================
       SCREEN 0: TRANG DẪN NHẬP & CỐT TRUYỆN (PROLOGUE SCREEN)
       ========================================================================= */
    /* [FEAT-CSS-04] 🎨 DIE-CUT STICKER OUTLINE & 3D BUBBLE TYPOGRAPHY (CHINH PHỤC TIẾNG NHẬT) */
    #screen-intro {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding-top: 1vh;
      padding-bottom: 6vh;
      background: transparent;
      overflow: hidden;
    }
    .intro-actions-minimal {
      position: absolute;
      top: 18px;
      right: 24px;
      display: flex;
      align-items: center;
      gap: 10px;
      z-index: 30;
    }
    .top-icon-btn.transparent {
      background: rgba(15, 23, 42, 0.45);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid rgba(255, 255, 255, 0.25);
      color: #ffffff;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.05rem;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .top-icon-btn.transparent:hover {
      background: rgba(255, 255, 255, 0.25);
      border-color: rgba(255, 255, 255, 0.5);
      transform: translateY(-2px);
    }

    /* Brand Stamp Badge */
    .intro-brand-stamp {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 22px;
      border-radius: 9999px;
      background: rgba(15, 23, 42, 0.75);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1.5px solid rgba(253, 224, 71, 0.75);
      color: #fef08a;
      font-family: 'Baloo 2', 'Fredoka', 'Nunito', sans-serif;
      font-size: 0.85rem;
      font-weight: 800;
      letter-spacing: 1.5px;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
      margin-bottom: 6px;
      z-index: 20;
      animation: stampFloat 4s ease-in-out infinite;
    }
    @keyframes stampFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-3px); }
    }

    /* Baloo 2 license is kept here as well as OFL-Baloo2.txt
       so every standalone student HTML redistributes the notice in plain text.

Copyright 2019 The Baloo 2 Project Authors (https://github.com/EkType/Baloo2)

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL

-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------

PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.

The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.

DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.

"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).

"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).

"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.

"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.

PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:

1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.

2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.

3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.

4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.

5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.

TERMINATION
This license becomes null and void if any of the above conditions are
not met.

DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.
    */
    @font-face {
      font-family: 'Baloo 2';
      src: url('../fonts/baloo2-vf.ttf') format('truetype');
      font-style: normal;
      font-weight: 400 800;
      font-display: swap;
    }

    /* Master 3D Bubble Sticker Component */
    .bubble-sticker-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      user-select: none;
      animation: logoGentleHover 4.5s ease-in-out infinite;
      max-width: calc(100% - 48px);
      filter: drop-shadow(0 8px 14px rgba(15, 23, 42, 0.24));
    }
    @keyframes logoGentleHover {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-6px); }
    }

    .bubble-sticker-svg {
      width: clamp(410px, 53vw, 750px);
      max-width: 100%;
      height: auto;
      overflow: visible;
    }
    .intro-logo-artwork { display: none; width: min(70vw, 880px); height: auto; max-width: 100%; max-height: 55vh; object-fit: contain; }
    .artwork-logo .intro-logo-artwork { display: block; }
    .artwork-logo .intro-logo-artwork[hidden] { display: none; }
    .artwork-logo .bubble-sticker-svg, .artwork-logo .tagline-scroll-banner { display: none; }

    /* Banner / Ribbon: Master Từ Vựng */
    .tagline-scroll-banner {
      position: relative;
      margin-top: -14px;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .scroll-banner-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 30px;
      max-width: 100%;
      border-radius: 9999px;
      background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 40%, #fde68a 100%);
      border: 3px solid #78350f;
      box-shadow:
        0 4px 0 #451a03,
        0 10px 22px rgba(0, 0, 0, 0.4),
        inset 0 2px 0 rgba(255, 255, 255, 0.9),
        inset 0 -2px 0 rgba(180, 83, 9, 0.25);
    }
    .scroll-banner-text {
      font-family: 'Baloo 2', 'Fredoka', 'Nunito', sans-serif;
      font-size: clamp(1.1rem, 1.8vw, 1.6rem);
      font-weight: 800;
      color: #542308;
      letter-spacing: 0.5px;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
      white-space: normal;
      text-align: center;
      overflow-wrap: anywhere;
    }

    /* 3D Action Button: BẮT ĐẦU */
    .intro-launch-stage {
      margin-top: 20px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 20;
    }
    .btn-3d-bubble {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 13px 48px;
      border-radius: 9999px;
      background: linear-gradient(180deg, #34d399 0%, #10b981 35%, #059669 85%, #047857 100%);
      border: 3.5px solid #a7f3d0;
      box-shadow:
        0 8px 0 #064e3b,
        0 20px 36px rgba(0, 0, 0, 0.45),
        inset 0 3px 0 rgba(255, 255, 255, 0.75),
        inset 0 -3px 0 rgba(0, 0, 0, 0.25);
      cursor: pointer;
      position: relative;
      transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1);
      animation: buttonPulseGlow 2.5s infinite ease-in-out;
      outline: none;
      text-decoration: none;
    }
    @keyframes buttonPulseGlow {
      0%, 100% {
        box-shadow: 0 8px 0 #064e3b, 0 20px 36px rgba(0, 0, 0, 0.45), inset 0 3px 0 rgba(255, 255, 255, 0.75);
        transform: scale(1);
      }
      50% {
        box-shadow: 0 8px 0 #064e3b, 0 26px 44px rgba(16, 185, 129, 0.65), inset 0 3px 0 rgba(255, 255, 255, 0.9);
        transform: scale(1.03);
      }
    }
    .btn-3d-bubble:hover {
      transform: translateY(-3px) scale(1.04);
      background: linear-gradient(180deg, #4ade80 0%, #22c55e 35%, #16a34a 85%, #15803d 100%);
      border-color: #dcfce7;
      box-shadow: 0 11px 0 #064e3b, 0 28px 48px rgba(16, 185, 129, 0.7), inset 0 3px 0 rgba(255, 255, 255, 0.85);
    }
    .btn-3d-bubble:active {
      transform: translateY(6px) scale(0.98);
      box-shadow: 0 2px 0 #064e3b, 0 8px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }
    .btn-3d-bubble .btn-icon {
      font-size: 1.55rem;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
    }
    .btn-3d-bubble .btn-label {
      font-family: 'Baloo 2', 'Fredoka', 'Nunito', sans-serif;
      font-size: clamp(1.25rem, 1.8vw, 1.55rem);
      font-weight: 900;
      color: #ffffff;
      letter-spacing: 2px;
      text-transform: uppercase;
      text-shadow:
        0 2px 0 #065f46,
        0 3px 6px rgba(0, 0, 0, 0.5);
    }
    .btn-3d-bubble .btn-arrow {
      font-size: 1.35rem;
      color: #ffffff;
      text-shadow: 0 2px 0 #065f46;
      transition: transform 0.2s ease;
    }
    .btn-3d-bubble:hover .btn-arrow {
      transform: translateX(6px);
    }

    /* [FEAT-CSS-05] 🏕️ BASECAMP HOME SCREEN & HERO DUO ARTWORKS */
    /* =========================================================================
       SCREEN 1: TRANG TRUNG TÂM BASECAMP (BASECAMP HUB)
       ========================================================================= */
    .home-main-stage {
      flex: 1;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: clamp(24px, 3.5vw, 40px);
      padding: 6px clamp(100px, 8vw, 150px) 4px clamp(20px, 2vw, 40px);
      position: relative;
      z-index: 20;
      min-height: 0;
    }

    /* FRAME 1 (LEFT / AUXILIARY): COMPANION & EXPEDITION PROFILE (X2 SCALE) */
    .home-companion-area {
      width: clamp(290px, 24vw, 380px);
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      align-self: flex-end;
      position: relative;
      margin-bottom: 2px;
      user-select: none;
      gap: 4px;
    }
    .companion-mini-profile-card {
      width: auto;
      max-width: 280px;
      background: rgba(255, 255, 255, 0.94);
      backdrop-filter: blur(14px);
      border-radius: 9999px;
      border: 2px solid rgba(255, 255, 255, 0.95);
      padding: 6px 14px;
      box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.22), 0 3px 0 #cbd5e1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      z-index: 25;
      cursor: pointer;
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    .companion-mini-profile-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 24px -4px rgba(15, 23, 42, 0.28), 0 3px 0 #94a3b8;
    }
    .companion-profile-info {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .companion-badge-crest {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      object-fit: cover;
      border: 1.5px solid #f59e0b;
      box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35);
    }
    .companion-profile-texts {
      display: flex;
      flex-direction: column;
    }
    .companion-profile-name {
      font-size: 0.8rem;
      font-weight: 900;
      color: #0f172a;
      line-height: 1.2;
    }
    .companion-profile-sub {
      font-size: 0.68rem;
      font-weight: 700;
      color: #0f766e;
    }
    .btn-switch-companion {
      padding: 3px 9px;
      border-radius: 9999px;
      font-size: 0.7rem;
      font-weight: 800;
      background: #f1f5f9;
      color: #334155;
      border: 1px solid #cbd5e1;
      cursor: pointer;
      transition: all 0.12s;
    }
    .btn-switch-companion:hover {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
    }

    /* FRAME 2 (RIGHT / PRIMARY): EXPEDITION QUEST COMMAND HUB */
    .home-terminal-card {
      width: clamp(330px, 28vw, 385px);
      max-width: 96%;
      align-self: center;
      margin-bottom: 0;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px);
      border-radius: 20px;
      border: 2.5px solid rgba(255, 255, 255, 0.95);
      padding: clamp(14px, 2.4vh, 20px) clamp(16px, 1.8vw, 20px) clamp(12px, 2vh, 16px);
      box-shadow:
        0 18px 40px -10px rgba(15, 23, 42, 0.2),
        0 6px 0 rgba(203, 213, 225, 0.85),
        0 0 0 1px rgba(255, 255, 255, 0.9) inset;
      position: relative;
      display: flex;
      flex-direction: column;
      gap: clamp(8px, 1.4vh, 12px);
    }

    .home-terminal-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 4px;
      margin-bottom: 0;
    }

    .home-terminal-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 2px 10px;
      border-radius: 9999px;
      background: #ecfdf5;
      color: #047857;
      font-size: 0.7rem;
      font-weight: 800;
      width: fit-content;
      border: 1.5px solid #a7f3d0;
      box-shadow: 0 2px 6px rgba(4, 120, 87, 0.12);
      letter-spacing: 0.4px;
    }
    .home-terminal-title {
      font-family: 'Nunito', ui-rounded, 'Arial Rounded MT Bold', -apple-system, system-ui, sans-serif;
      font-size: clamp(1.3rem, 2vw, 1.65rem);
      font-weight: 900;
      color: #0f172a;
      letter-spacing: -0.4px;
      margin: 0;
      line-height: 1.15;
      text-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    }
    .home-terminal-desc {
      font-family: 'Nunito', ui-rounded, -apple-system, system-ui, sans-serif;
      font-size: clamp(0.78rem, 1.1vw, 0.86rem);
      color: #475569;
      line-height: 1.25;
      margin: 0;
      font-weight: 800;
      letter-spacing: 0.1px;
    }

    /* CURRENT MISSION STAGE BANNER (ĐI ĐẾN ĐÂU ĐÁNH DẤU ĐẾN ĐÓ) */
    .home-mission-status-card {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 14px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.03) inset;
    }
    .mission-status-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .mission-status-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: #e0f2fe;
      display: grid;
      place-items: center;
      font-size: 1.2rem;
    }
    .mission-status-details {
      display: flex;
      flex-direction: column;
    }
    .mission-status-label {
      font-size: 0.68rem;
      font-weight: 800;
      color: #64748b;
      letter-spacing: 0.3px;
    }
    .mission-status-name {
      font-size: 0.86rem;
      font-weight: 900;
      color: #0f172a;
    }
    .mission-status-badge {
      font-size: 0.72rem;
      font-weight: 800;
      color: #047857;
      background: #ecfdf5;
      padding: 3px 10px;
      border-radius: 8px;
      border: 1px solid #a7f3d0;
    }

    /* =========================================================================
       RPG 5-BUTTON VERTICAL MENU (SENSEI SUITE HARMONIZED DESIGN)
       ========================================================================= */
    .home-rpg-menu-stack {
      display: flex;
      flex-direction: column;
      gap: clamp(6px, 1vh, 8px);
      width: 100%;
      margin-top: 2px;
    }

    /* 1. HERO BUTTON (VIBRANT JAPANESE CRIMSON / TORII SUNRISE) */
    .btn-rpg-menu-hero {
      width: 100%;
      height: clamp(40px, 5.8vh, 48px);
      display: flex;
      align-items: center;
      padding: 0 16px;
      border-radius: 9999px;
      background: linear-gradient(135deg, #f43f5e 0%, #e11d48 45%, #be123c 100%);
      border: 2px solid #fcd34d;
      box-shadow:
        0 4px 16px rgba(225, 29, 72, 0.35),
        0 3px 0 #9f1239,
        inset 0 1px 2px rgba(255, 255, 255, 0.45);
      color: #ffffff;
      cursor: pointer;
      position: relative;
      transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1);
      user-select: none;
    }
    .btn-rpg-menu-hero:hover {
      transform: translateX(5px) scale(1.01);
      background: linear-gradient(135deg, #fb7185 0%, #e11d48 40%, #9f1239 100%);
      box-shadow:
        0 8px 24px rgba(225, 29, 72, 0.45),
        0 3px 0 #881337,
        inset 0 1px 3px rgba(255, 255, 255, 0.6);
      border-color: #fef08a;
    }
    .btn-rpg-menu-hero:active {
      transform: translateX(3px) translateY(2px);
      box-shadow: 0 2px 6px rgba(225, 29, 72, 0.3), 0 1px 0 #9f1239;
    }
    .rpg-hero-fuji-icon {
      flex-shrink: 0;
      width: 28px;
      height: 18px;
      margin-right: 10px;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
    }
    .btn-rpg-menu-hero .rpg-btn-label {
      flex: 1;
      text-align: left;
      font-size: clamp(1.02rem, 1.4vw, 1.14rem);
      font-weight: 900;
      color: #ffffff;
      letter-spacing: 0.3px;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    }
    .btn-rpg-menu-hero .rpg-btn-arrow {
      margin-left: auto;
      font-size: 1.35rem;
      font-weight: 900;
      color: #ffffff;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
      transition: transform 0.16s ease;
    }
    .btn-rpg-menu-hero:hover .rpg-btn-arrow {
      transform: translateX(4px);
    }

    /* 2. FOUR SECONDARY CARDS (CLEAN PEARL WHITE / HARMONIZED BASECAMP) */
    .btn-rpg-menu-card {
      width: 100%;
      height: clamp(36px, 5vh, 42px);
      display: flex;
      align-items: center;
      padding: 0 14px 0 10px;
      border-radius: 9999px;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      box-shadow:
        0 2px 6px rgba(15, 23, 42, 0.04),
        0 2px 0 #e2e8f0;
      color: #0f172a;
      cursor: pointer;
      position: relative;
      transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1);
      user-select: none;
    }
    .btn-rpg-menu-card:hover {
      transform: translateX(5px);
      background: #f8fafc;
      box-shadow:
        0 6px 16px rgba(15, 23, 42, 0.08),
        0 2px 0 #cbd5e1;
    }
    .btn-rpg-menu-card:active {
      transform: translateX(2px) translateY(1px);
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 0 #cbd5e1;
    }

    /* Themed hover border accents */
    .btn-rpg-menu-card.btn-card-continue:hover { border-color: #10b981; }
    .btn-rpg-menu-card.btn-card-inventory:hover { border-color: #f59e0b; }
    .btn-rpg-menu-card.btn-card-tutorial:hover { border-color: #0284c7; }
    .btn-rpg-menu-card.btn-card-studio:hover { border-color: #8b5cf6; }

    /* Themed Pastel Icon Badges */
    .rpg-icon-badge {
      width: 28px;
      height: 28px;
      border-radius: 9999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.95rem;
      margin-right: 10px;
      flex-shrink: 0;
      transition: transform 0.16s ease;
    }
    .btn-rpg-menu-card:hover .rpg-icon-badge {
      transform: scale(1.08);
    }
    .rpg-icon-badge.badge-emerald {
      background: #ecfdf5;
      border: 1px solid #a7f3d0;
      color: #059669;
    }
    .rpg-icon-badge.badge-amber {
      background: #fef3c7;
      border: 1px solid #fde68a;
      color: #d97706;
      font-size: 1.05rem;
    }
    .rpg-icon-badge.badge-sky {
      background: #e0f2fe;
      border: 1px solid #bae6fd;
      color: #0284c7;
      font-size: 1.05rem;
    }
    .rpg-icon-badge.badge-purple {
      background: #f3e8ff;
      border: 1px solid #ddd6fe;
      color: #7c3aed;
      font-size: 1.05rem;
    }

    .btn-rpg-menu-card .rpg-btn-label {
      flex: 1;
      text-align: left;
      font-size: 1.0rem;
      font-weight: 800;
      color: #0f172a;
      letter-spacing: 0.2px;
    }
    .btn-rpg-menu-card .rpg-btn-arrow {
      margin-left: auto;
      font-size: 1.35rem;
      font-weight: 900;
      color: #94a3b8;
      transition: transform 0.16s ease, color 0.16s ease;
    }
    .btn-rpg-menu-card:hover .rpg-btn-arrow {
      transform: translateX(4px);
      color: #0f172a;
    }

    .home-bottom-link-row {
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .home-bottom-link {
      background: transparent;
      border: none;
      color: #0284c7;
      font-size: 0.78rem;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 10px;
      border-radius: 8px;
      transition: all 0.15s ease;
    }
    .home-bottom-link:hover {
      background: #e0f2fe;
      color: #0369a1;
      transform: translateY(-1px);
    }

    /* [FEAT-CSS-06] 🗺️ EXPEDITION MAP: 3 DIFFICULTY REALMS (DỄ - TRUNG BÌNH - KHÓ) */
    /* =========================================================================
       SCREEN MAP: 3 ẢI THỬ THÁCH THEO ĐỘ KHÓ (TỰ DO LỰA CHỌN, SPOTLIGHT CAO)
       ========================================================================= */
    #screen-map {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      background-image: url('../images/backgrounds/world_map_stage_trail.jpg');
      background-size: cover;
      background-position: center top;
      overflow: hidden;
      z-index: 10;
    }
    /* Atmospheric Scrim Veil: Làm mờ nhẹ nền bản đồ (blur 8px) để tránh chiếm spotlight các thẻ nội dung */
    #screen-map::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(15, 23, 42, 0.42);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      z-index: 2;
      pointer-events: none;
    }

    .map-main-stage {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px 28px;
      position: relative;
      z-index: 10;
      gap: 20px;
      min-height: 0;
    }

    .map-header-banner {
      background: rgba(15, 23, 42, 0.88);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-radius: 9999px;
      border: 1.5px solid rgba(255, 255, 255, 0.22);
      padding: 10px 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
      z-index: 10;
      margin: 0 auto;
    }
    .map-header-inner {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }
    .map-compass-img {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid #f59e0b;
      box-shadow: 0 4px 12px rgba(245, 158, 11, 0.45);
      flex-shrink: 0;
    }
    .map-title-text {
      font-size: 1.15rem;
      font-weight: 950;
      color: #ffffff;
      margin: 0;
      line-height: 1.25;
      letter-spacing: 0.5px;
    }
    .map-subtitle-text {
      font-size: 0.78rem;
      color: #cbd5e1;
      margin: 2px 0 0;
      font-weight: 600;
      line-height: 1.35;
      text-align: center;
    }

    /* 3 BENTO DIFFICULTY REALM CARDS (TINH GỌN, KHÔNG YAPPING) */
    .journey-realms-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      width: 100%;
      max-width: 1000px;
      align-items: stretch;
      position: relative;
      z-index: 10;
    }

    .realm-card {
      background: rgba(255, 255, 255, 0.96);
      backdrop-filter: blur(16px);
      border-radius: 18px;
      overflow: visible;
      display: flex;
      flex-direction: column;
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.9) inset;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      cursor: pointer;
      position: relative;
      border: 2px solid transparent;
      z-index: 1;
    }
    .realm-card:hover,
    .realm-card:focus-within {
      z-index: 50;
      transform: translateY(-6px);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.38);
    }

    /* Difficulty theme borders & glows */
    .realm-card.realm-card-easy {
      border-color: #10b981;
    }
    .realm-card.realm-card-easy:hover {
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.35), 0 20px 40px rgba(16, 185, 129, 0.22);
    }
    .realm-card.realm-card-medium {
      border-color: #f59e0b;
    }
    .realm-card.realm-card-medium:hover {
      box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.35), 0 20px 40px rgba(245, 158, 11, 0.22);
    }
    .realm-card.realm-card-hard {
      border-color: #e11d48;
    }
    .realm-card.realm-card-hard:hover {
      box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.35), 0 20px 40px rgba(225, 29, 72, 0.22);
    }

    /* Scenic Banner Art (Hiển thị rõ sàn nền đá và toàn cảnh Ải, không bị đẩy góc nhìn lên mây trời) */
    .realm-art-banner {
      height: 142px;
      background-size: cover;
      background-position: center bottom;
      position: relative;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: 30px 12px 10px;
      border-bottom: 1.5px solid rgba(0, 0, 0, 0.08);
      border-top-left-radius: 16px;
      border-top-right-radius: 16px;
      overflow: hidden;
    }
    .realm-difficulty-tag {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 6px 24px;
      border-radius: 9999px;
      font-size: 0.98rem;
      font-weight: 900;
      letter-spacing: 0.6px;
      white-space: nowrap;
      user-select: none;
      backdrop-filter: blur(10px);
      box-shadow: 0 3px 12px rgba(0,0,0,0.24);
    }
    .realm-difficulty-tag.tag-easy {
      background: #ecfdf5;
      color: #047857;
      border: 1.5px solid #a7f3d0;
    }
    .realm-difficulty-tag.tag-medium {
      background: #fef3c7;
      color: #b45309;
      border: 1.5px solid #fde68a;
    }
    .realm-difficulty-tag.tag-hard {
      background: #ffe4e6;
      color: #be123c;
      border: 1.5px solid #fecdd3;
    }

    /* Content Body (Thoáng đãng, cỡ chữ rõ ràng, không bó hẹp, chuẩn Game UI) */
    .realm-content {
      padding: 16px 20px 18px;
      display: flex;
      flex-direction: column;
      flex: 1;
      justify-content: space-between;
      align-items: center;
      text-align: center;
      gap: 10px;
      background: #ffffff;
      border-bottom-left-radius: 16px;
      border-bottom-right-radius: 16px;
      overflow: visible;
    }

    .realm-title {
      font-size: 1.25rem;
      font-weight: 950;
      color: #0f172a;
      margin: 0;
      line-height: 1.3;
      text-align: center;
      letter-spacing: -0.2px;
    }
    .realm-meta-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      font-size: 0.82rem;
      font-weight: 800;
      color: #475569;
      padding: 6px 12px;
      background: #f8fafc;
      border-radius: 9999px;
      border: 1px solid #e2e8f0;
      width: fit-content;
      margin: 0 auto;
    }

    /* Realm Action CTAs */
    .btn-realm-cta {
      width: 100%;
      height: 42px;
      border-radius: 9999px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.92rem;
      font-weight: 900;
      letter-spacing: 0.3px;
      color: #ffffff;
      cursor: pointer;
      border: none;
      transition: all 0.16s ease;
      margin-top: 3px;
    }
    .btn-realm-cta.cta-easy {
      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35), 0 2px 0 #047857;
    }
    .btn-realm-cta.cta-easy:hover {
      background: linear-gradient(135deg, #34d399 0%, #059669 100%);
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(16, 185, 129, 0.45);
    }
    .btn-realm-cta.cta-medium {
      background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
      box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35), 0 2px 0 #b45309;
    }
    .btn-realm-cta.cta-medium:hover {
      background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(245, 158, 11, 0.45);
    }
    .btn-realm-cta.cta-hard {
      background: linear-gradient(135deg, #f43f5e 0%, #be123c 100%);
      box-shadow: 0 4px 12px rgba(225, 29, 72, 0.35), 0 2px 0 #9f1239;
    }
    .btn-realm-cta.cta-hard:hover {
      background: linear-gradient(135deg, #fb7185 0%, #be123c 100%);
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(225, 29, 72, 0.45);
    }

    /* OPTION MODAL STYLES */
    .option-row-card {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
    }
    .option-row-info {
      flex: 1;
    }
    .option-row-title {
      font-size: 0.85rem;
      font-weight: 800;
      color: #0f172a;
    }
    .option-row-desc {
      font-size: 0.74rem;
      color: #64748b;
      margin-top: 2px;
    }
    .btn-3d-toggle {
      padding: 6px 14px;
      border-radius: 10px;
      font-size: 0.76rem;
      font-weight: 800;
      border: 1.5px solid #cbd5e1;
      background: #ffffff;
      color: #64748b;
      box-shadow: 0 3px 0 #94a3b8;
      cursor: pointer;
      transition: all 0.12s ease;
      min-width: 90px;
      text-align: center;
    }
    .btn-3d-toggle.active {
      background: #10b981;
      color: #ffffff;
      border-color: #047857;
      box-shadow: 0 3px 0 #047857;
    }
    .btn-3d-toggle:active {
      transform: translateY(2px);
      box-shadow: 0 1px 0 #94a3b8;
    }
    .option-segmented-group {
      display: flex;
      gap: 4px;
    }
    .btn-opt-seg {
      padding: 5px 10px;
      border-radius: 8px;
      font-size: 0.74rem;
      font-weight: 800;
      background: #ffffff;
      color: #475569;
      border: 1.5px solid #cbd5e1;
      cursor: pointer;
      box-shadow: 0 2px 0 #cbd5e1;
    }
    .btn-opt-seg.active {
      background: #6366f1;
      color: #ffffff;
      border-color: #4338ca;
      box-shadow: 0 2px 0 #3730a3;
    }

    /* [FEAT-CSS-08] 🏆 SUMMIT RESULT SCREEN, BADGES & CELEBRATION FANFARE */
    /* =========================================================================
       SCREEN 3: TRANG KẾT THÚC (SUMMIT VICTORY SCREEN)
       ========================================================================= */
    .result-main-stage {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 44px;
      padding: 10px 48px;
      position: relative;
      z-index: 20;
      min-height: 0;
    }
    .result-hero-card {
      width: 620px;
      max-width: 100%;
      background: var(--surface-white);
      backdrop-filter: blur(16px);
      border-radius: var(--radius-lg);
      border: 2px solid var(--border-soft);
      padding: 24px 28px;
      box-shadow: var(--shadow-card);
      text-align: center;
      position: relative;
    }
    .result-chest-img {
      width: 84px;
      height: 84px;
      object-fit: contain;
      filter: drop-shadow(0 8px 18px rgba(245, 158, 11, 0.45));
      animation: chestGlow 2.5s ease-in-out infinite;
    }
    @keyframes chestGlow {
      0%, 100% { transform: scale(1); filter: drop-shadow(0 8px 18px rgba(245, 158, 11, 0.45)); }
      50% { transform: scale(1.05); filter: drop-shadow(0 12px 24px rgba(245, 158, 11, 0.7)); }
    }
    .result-title {
      font-size: 1.45rem;
      font-weight: 900;
      color: var(--ink);
      margin: 6px 0 2px;
    }
    .result-rank-badge {
      font-size: 0.88rem;
      color: #0f766e;
      font-weight: 800;
      background: #ecfdf5;
      padding: 3px 14px;
      border-radius: var(--radius-pill);
      display: inline-block;
      margin-bottom: 12px;
      border: 1px solid #a7f3d0;
    }
    .result-stat-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin: 12px 0 18px;
    }
    .result-stat-card {
      background: #f8fafc;
      padding: 10px 6px;
      border-radius: var(--radius-sm);
      border: 1px solid #e2e8f0;
    }
    .result-stat-card-val {
      font-size: 1.35rem;
      font-weight: 900;
      color: #0f172a;
    }
    .result-stat-card-lbl {
      font-size: 0.72rem;
      color: var(--muted);
      font-weight: 700;
      margin-top: 2px;
    }
    .result-actions-row {
      display: flex;
      gap: 10px;
      justify-content: center;
      flex-wrap: wrap;
    }

    /* [FEAT-CSS-10] 🪟 MODAL DIALOGS FRAMEWORK, ANIMATIONS & BACKDROPS */
    /* =========================================================================
       MODALS (WORKSHOP, TUTORIAL, SCOPE SELECTOR, RESULT)
       ========================================================================= */
    .modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(15, 23, 42, 0.72);
      backdrop-filter: blur(8px);
      z-index: 100;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .modal-backdrop.active { display: flex; }
    .modal-dialog {
      background: #ffffff;
      border-radius: var(--radius-lg);
      width: 100%;
      max-width: 680px;
      box-shadow: 0 25px 60px rgba(0,0,0,0.3);
      border: 1px solid #e2e8f0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      max-height: 90%;
      animation: modalPop 0.22s ease-out;
    }
    @keyframes modalPop {
      from { transform: scale(0.92); opacity: 0; }
      to { transform: scale(1); opacity: 1; }
    }
    .modal-header {
      padding: 14px 22px;
      border-bottom: 1px solid #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #f8fafc;
    }
    .modal-header h3 { font-size: 1.15rem; font-weight: 800; color: var(--ink); }
    .modal-body { padding: 18px 22px; overflow-y: auto; flex: 1; }
    .modal-footer {
      padding: 12px 22px;
      border-top: 1px solid #e2e8f0;
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      background: #f8fafc;
    }

    /* =========================================================================
       CENTERED APP ALERT MODAL (FAST, LIGHTWEIGHT, BLURRED BACKDROP, ZERO YAPPING)
       ========================================================================= */
    .app-alert-backdrop {
      z-index: 10000 !important;
      background: rgba(15, 23, 42, 0.72) !important;
      backdrop-filter: blur(12px) !important;
      -webkit-backdrop-filter: blur(12px) !important;
    }
    .app-alert-dialog {
      max-width: 420px !important;
      width: 90% !important;
      border-radius: 20px !important;
      padding: 24px 22px 20px !important;
      text-align: center !important;
      position: relative !important;
      box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.45) !important;
      border: 1.5px solid #e2e8f0 !important;
      background: #ffffff !important;
      animation: modalPop 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
      overflow: visible !important;
    }
    .app-alert-close-btn {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f1f5f9;
      color: #64748b;
      font-size: 0.95rem;
      font-weight: 700;
      cursor: pointer;
      border: 1px solid #e2e8f0;
      transition: all 0.15s ease;
      padding: 0;
      line-height: 1;
      z-index: 2;
    }
    .app-alert-close-btn:hover {
      background: #e2e8f0;
      color: #0f172a;
      transform: scale(1.08);
      border-color: #cbd5e1;
    }
    .app-alert-close-btn:active {
      transform: scale(0.96);
    }
    .app-alert-icon-box {
      width: 52px;
      height: 52px;
      border-radius: 16px;
      margin: 0 auto 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.7rem;
      background: #ecfdf5;
      border: 1.5px solid #a7f3d0;
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
    }

    /* =========================================================================
       [FEAT-CSS-PAUSE] ⏸️ MINIMALIST PAUSE DIALOG (TẠM DỪNG CHUẨN USER REFERENCE)
       - Card bo góc tròn 32px chuẩn Game EdTech tươi sáng
       - Huy hiệu squircle mint pastel kèm tia sáng sparkle xung quanh
       - Nút TIẾP TỤC cực đại với hiệu ứng 3D bevel xúc giác
       - Hàng phụ 2 nút dạng viên thuốc Chơi lại (icon xanh) & Thoát ván (icon cửa cam)
       ========================================================================= */
    .pause-modal-dialog {
      background: #ffffff !important;
      border-radius: 32px !important;
      width: min(460px, 92vw) !important;
      max-width: 460px !important;
      min-height: 310px !important;
      box-shadow: 0 25px 60px -12px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.7) !important;
      padding: 34px 32px 28px !important;
      box-sizing: border-box !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      position: relative !important;
      text-align: center !important;
      overflow: visible !important;
      animation: modalPop 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    .pause-sparkle-badge-wrap {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      margin-bottom: 8px !important;
      flex-shrink: 0 !important;
    }
    .pause-title {
      font-size: 2.1rem !important;
      font-weight: 900 !important;
      color: #0f274a !important;
      margin: 6px 0 4px 0 !important;
      letter-spacing: -0.4px !important;
      line-height: 1.15 !important;
    }
    .pause-subtitle {
      font-size: 1.05rem !important;
      font-weight: 800 !important;
      color: #475569 !important;
      margin: 0 0 22px 0 !important;
      letter-spacing: -0.1px !important;
    }
    .pause-hero-resume-btn {
      width: 100% !important;
      height: 60px !important;
      min-height: 60px !important;
      border-radius: 20px !important;
      border: none !important;
      background: linear-gradient(180deg, #10b981 0%, #059669 100%) !important;
      color: #ffffff !important;
      font-family: inherit !important;
      font-size: 1.25rem !important;
      font-weight: 900 !important;
      letter-spacing: 0.3px !important;
      cursor: pointer !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 12px !important;
      box-shadow: 0 5px 0 #047857, 0 12px 24px rgba(16, 185, 129, 0.38) !important;
      transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
      margin-bottom: 14px !important;
      padding: 0 20px !important;
    }
    .pause-hero-resume-btn:hover {
      transform: translateY(-2px) !important;
      box-shadow: 0 7px 0 #047857, 0 16px 28px rgba(16, 185, 129, 0.45) !important;
      background: linear-gradient(180deg, #14c58b 0%, #04865d 100%) !important;
    }
    .pause-hero-resume-btn:active {
      transform: translateY(3px) !important;
      box-shadow: 0 2px 0 #047857, 0 6px 14px rgba(16, 185, 129, 0.35) !important;
    }
    .pause-secondary-row {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 12px !important;
      width: 100% !important;
    }
    .pause-pill-btn {
      height: 54px !important;
      min-height: 54px !important;
      border-radius: 18px !important;
      border: 1.5px solid #dbeafe !important;
      background: #f0f7ff !important;
      color: #0f274a !important;
      font-family: inherit !important;
      font-size: 1.02rem !important;
      font-weight: 850 !important;
      cursor: pointer !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 10px !important;
      transition: all 0.15s ease !important;
      box-shadow: 0 2px 6px rgba(37, 99, 235, 0.04) !important;
      padding: 0 16px !important;
    }
    .pause-pill-btn:hover {
      background: #e0f0fe !important;
      border-color: #bfdbfe !important;
      transform: translateY(-1px) !important;
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08) !important;
    }
    .pause-pill-btn:active {
      transform: translateY(1px) !important;
    }

    /* =========================================================================
       TUTORIAL MODAL BENTO GRID (4 CORE PILLARS)
       ========================================================================= */
    .tutorial-modal-dialog {
      max-width: 680px !important;
      width: 95% !important;
      max-height: 88vh !important;
    }

    /* TUTORIAL ON-DEMAND TAB SWITCHER */
    .tut-tabs-bar {
      display: flex;
      gap: 6px;
      background: #f1f5f9;
      padding: 4px;
      border-radius: 10px;
      border: 1px solid #e2e8f0;
      flex-shrink: 0;
    }
    .tut-tab-btn {
      flex: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 8px 10px;
      font-size: 0.82rem;
      font-weight: 700;
      color: #475569;
      background: transparent;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
      white-space: nowrap;
      user-select: none;
    }
    .tut-tab-btn:hover {
      color: #0f172a;
      background: rgba(255, 255, 255, 0.85);
    }
    .tut-tab-btn.active {
      color: #ffffff;
      background: #0284c7;
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35);
    }
    .tut-tab-icon {
      font-size: 0.95rem;
      line-height: 1;
    }

    /* TUTORIAL PANELS */
    .tut-tab-panel {
      display: none;
      flex-direction: column;
      gap: 10px;
    }
    .tut-tab-panel.active {
      display: flex;
      animation: tutPanelFade 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }
    @keyframes tutPanelFade {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .tut-lead-text {
      font-size: 0.77rem;
      color: #64748b;
      font-weight: 600;
      line-height: 1.4;
      padding: 0 2px;
    }

    /* TAB 1: REALMS STACK */
    .tut-realms-stack {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .tut-level-row {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 10px 14px;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 10px;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    .tut-level-row:hover {
      border-color: #cbd5e1;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }
    .tut-level-badge-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-width: 82px;
      gap: 2px;
      flex-shrink: 0;
    }
    .tut-level-pill {
      font-size: 0.74rem;
      font-weight: 800;
      padding: 3px 8px;
      border-radius: 6px;
      text-transform: uppercase;
      letter-spacing: 0.2px;
      white-space: nowrap;
    }
    .tut-level-pill.easy { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
    .tut-level-pill.medium { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }
    .tut-level-pill.hard { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
    .tut-level-sub {
      font-size: 0.68rem;
      color: #64748b;
      font-weight: 600;
    }
    .tut-level-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .tut-pill-cluster {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .tut-stat-pill {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 0.72rem;
      font-weight: 800;
      padding: 2px 7px;
      border-radius: 5px;
      background: #f1f5f9;
      color: #334155;
      border: 1px solid #e2e8f0;
      white-space: nowrap;
    }
    .tut-stat-pill.heart { background: #fff1f2; color: #e11d48; border-color: #fecdd3; }
    .tut-stat-pill.timer { background: #f0fdf4; color: #16a34a; border-color: #bbf7d0; }
    .tut-stat-pill.timer.danger { background: #fff7ed; color: #ea580c; border-color: #ffedd5; }
    .tut-stat-pill.score { background: #eff6ff; color: #2563eb; border-color: #bfdbfe; }
    .tut-stat-pill.score.highlight { background: #fefce8; color: #ca8a04; border-color: #fef08a; }
    .tut-level-desc {
      font-size: 0.76rem;
      color: #475569;
      line-height: 1.35;
    }

    /* TAB 2: CHARMS GRID */
    .tut-charms-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
    }
    .tut-item-box {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      transition: border-color 0.15s ease;
    }
    .tut-item-box:hover {
      border-color: #cbd5e1;
    }
    .tut-item-header {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .tut-item-icon {
      font-size: 1.1rem;
      line-height: 1;
    }
    .tut-item-title {
      font-size: 0.82rem;
      font-weight: 800;
      color: #0f172a;
      flex: 1;
    }
    .tut-item-tag {
      font-size: 0.64rem;
      font-weight: 800;
      padding: 1px 6px;
      border-radius: 4px;
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }
    .tut-item-tag.green { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
    .tut-item-tag.pink { background: #fdf2f8; color: #be185d; border: 1px solid #fbcfe8; }
    .tut-item-tag.amber { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }
    .tut-item-tag.indigo { background: #e0e7ff; color: #4338ca; border: 1px solid #c7d2fe; }
    .tut-item-desc {
      font-size: 0.74rem;
      color: #475569;
      line-height: 1.35;
    }

    /* TAB 3: CARDS STACK */
    .tut-cards-stack {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .tut-card-row {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 10px 14px;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 10px;
      transition: border-color 0.15s ease;
    }
    .tut-card-row:hover {
      border-color: #cbd5e1;
    }
    .tut-card-art {
      width: 44px;
      height: 44px;
      object-fit: contain;
      flex-shrink: 0;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
    }
    .tut-card-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .tut-card-heading {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .tut-card-name {
      font-size: 0.85rem;
      font-weight: 800;
      color: #0f172a;
    }
    .tut-hotkey-badge {
      font-size: 0.7rem;
      color: #64748b;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .tut-card-effect {
      font-size: 0.76rem;
      color: #475569;
      line-height: 1.35;
    }

    /* TAB 4: KEYS TABLE */
    .tut-keys-table {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
    }
    .tut-key-item {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 8px 12px;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
    }
    .tut-key-combo {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-wrap: wrap;
    }
    .tut-key-purpose {
      font-size: 0.74rem;
      color: #475569;
      line-height: 1.3;
      font-weight: 500;
    }

    /* KBD TAG & TIP BANNER */
    .tut-kbd, .tutorial-kbd {
      display: inline-block;
      padding: 2px 6px;
      font-size: 0.72rem;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-weight: 800;
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-bottom: 2px solid #94a3b8;
      border-radius: 4px;
      color: #0f172a;
      line-height: 1.2;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
      white-space: nowrap;
    }
    .tut-tip-banner {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      border-radius: 8px;
      font-size: 0.74rem;
      color: #166534;
      line-height: 1.35;
      margin-top: 2px;
    }
    .tut-tip-icon {
      font-size: 1rem;
      line-height: 1;
      flex-shrink: 0;
    }

    @media (max-width: 640px) {
      .tut-tabs-bar {
        overflow-x: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
      }
      .tut-tab-btn {
        font-size: 0.75rem;
        padding: 6px 10px;
      }
      .tut-charms-grid, .tut-keys-table {
        grid-template-columns: 1fr;
      }
    }

    /* SCOPE SELECTOR 5-COL GRID & VOLUME SECTIONS */
    .scope-dialog-2col {
      display: grid;
      grid-template-columns: 220px 1fr;
      gap: 16px;
      max-height: 380px;
    }
    .scope-sidebar {
      background: #f8fafc;
      border-radius: var(--radius-md);
      padding: 12px;
      border: 1px solid #e2e8f0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .scope-volume-section {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 12px;
    }
    .scope-volume-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      padding-bottom: 6px;
      border-bottom: 1px solid #e2e8f0;
      flex-wrap: wrap;
      gap: 6px;
    }
    .scope-volume-title {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 0.85rem;
      font-weight: 850;
      color: #1e293b;
    }
    .scope-volume-badge {
      background: #dbeafe;
      color: #1e40af;
      padding: 2px 7px;
      border-radius: 6px;
      font-size: 0.72rem;
      font-weight: 850;
      letter-spacing: 0.4px;
    }
    .scope-volume-badge.secondary {
      background: #e0e7ff;
      color: #3730a3;
    }
    .scope-volume-actions {
      display: flex;
      gap: 6px;
    }
    .scope-mini-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 2px 8px;
      font-size: 0.72rem;
      font-weight: 700;
      color: #475569;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .scope-mini-btn:hover {
      background: #f1f5f9;
      color: #0f172a;
      border-color: #94a3b8;
    }
    .scope-grid-5col {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 6px;
    }
    .scope-station-item {
      font-family: inherit;
      text-align: left;
      min-height: 44px;
      padding: 7px 9px;
      border-radius: 8px;
      border: 1.5px solid #e2e8f0;
      background: #ffffff;
      display: flex;
      align-items: center;
      gap: 5px;
      cursor: pointer;
      font-size: 0.8rem;
      font-weight: 700;
      color: #334155;
      transition: all 0.15s ease;
      user-select: none;
      justify-content: flex-start;
      white-space: nowrap;
    }
    .scope-station-item:hover {
      border-color: #94a3b8;
      background: #f8fafc;
    }
    .scope-station-item:focus-visible {
      outline: 3px solid #0369a1;
      outline-offset: 1px;
    }
    .scope-station-item.active {
      background: #ecfdf5;
      border-color: #10b981;
      color: #047857;
      font-weight: 800;
      box-shadow: 0 1px 3px rgba(16, 185, 129, 0.15);
    }
    .scope-item-check {
      font-size: 0.92rem;
      line-height: 1;
    }
    .scope-item-title {
      display: inline-flex;
      align-items: baseline;
      gap: 3px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .scope-item-count {
      font-size: 0.72rem;
      font-weight: 600;
      color: #64748b;
    }
    .scope-station-item.active .scope-item-count {
      color: #059669;
    }
    .scope-station-item.locked {
      cursor: not-allowed !important;
      opacity: 0.88;
    }
    .scope-station-item.locked:hover {
      border-color: #e2e8f0 !important;
      background: #ffffff !important;
      transform: none !important;
    }
    .scope-station-item.active.locked {
      background: #f0fdf4 !important;
      border-color: #86efac !important;
      color: #166534 !important;
    }
    .scope-station-item.inactive.locked {
      background: #f8fafc !important;
      border-color: #e2e8f0 !important;
      color: #94a3b8 !important;
      opacity: 0.45 !important;
    }
    @media (max-width: 900px) {
      .scope-grid-5col {
        grid-template-columns: repeat(3, 1fr);
      }
    }
    @media (max-width: 600px) {
      .scope-grid-5col {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* INVENTORY & ACHIEVEMENTS MODAL STYLES (PIXEL-PERFECT CONSTRAINED) */
    .inventory-item-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 14px;
      transition: all 0.2s ease;
      min-height: 82px;
    }
    .inventory-item-card:hover {
      background: #ffffff;
      border-color: #cbd5e1;
      box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    }
    .inv-icon-frame {
      width: 52px;
      height: 52px;
      min-width: 52px;
      max-width: 52px;
      border-radius: 12px;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
    }
    /* [FEAT-CSS-09] 🎒 GAMIFIED INVENTORY DIALOG & 2-COLUMN RESPONSIVE LAYOUT */
    /* =========================================================================
       BỘ THÔNG SỐ THIẾT KẾ KHO VẬT PHẨM (EXACT MEASURED LAYOUT CONSTANTS)
       Đo đạc chuẩn theo màn hình học tập 16:9 (1280x720 & 1920x1080)
       - Shell: max-w 960px, h 570px, pad-y 14px, pad-x 22px, gap 6px
       - Top Nav: h 38px | Tabs: h 34px | Ticket Strip: h 30px
       - Body Split: h 420px | Left Grid: 1.15fr | Right Inspector: 1fr | Gap: 16px
       - Grid: 3 cols (138px x 120px), Gap 10px, Icon 48px
       - Inspector: pad 10px 14px, hero icon 54px, card-h 42px, btn-h 34px, slots-h 40px
       ========================================================================= */
    :root {
      --inv-shell-max-w: 960px;
      --inv-shell-h: 570px;
      --inv-shell-pad-y: 14px;
      --inv-shell-pad-x: 22px;
      --inv-shell-gap: 6px;
      --inv-nav-h: 38px;
      --inv-tabs-h: 34px;
      --inv-ticket-h: 30px;
      --inv-body-h: 420px;
      --inv-body-gap: 16px;
      --inv-grid-cols: repeat(3, 1fr);
      --inv-tile-min-h: 120px;
      --inv-tile-gap: 10px;
      --inv-hero-size: 54px;
      --inv-spec-card-min-h: 42px;
      --inv-btn-h: 34px;
      --inv-slots-strip-h: 40px;
      --inv-slot-card-size: 32px;
    }

    .inventory-dialog-shell {
      max-width: var(--inv-shell-max-w) !important;
      width: 94% !important;
      height: var(--inv-shell-h) !important;
      max-height: 86vh !important;
      background: rgba(255, 255, 255, 0.97) !important;
      backdrop-filter: blur(28px) !important;
      border-radius: 24px !important;
      box-shadow: 0 30px 80px rgba(15, 23, 42, 0.45) !important;
      border: 2px solid rgba(255, 255, 255, 0.95) !important;
      padding: var(--inv-shell-pad-y) var(--inv-shell-pad-x) !important;
      display: flex !important;
      flex-direction: column !important;
      gap: var(--inv-shell-gap) !important;
      overflow: hidden !important;
      box-sizing: border-box !important;
    }
    .inv-top-nav-bar {
      display: flex;
      align-items: center;
      gap: 12px;
      height: var(--inv-nav-h);
      flex-shrink: 0;
    }
    .inv-nav-pill-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 16px;
      border-radius: 9999px;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      font-size: 0.88rem;
      font-weight: 800;
      color: #0f172a;
      cursor: pointer;
      transition: all 0.15s ease;
      height: 36px;
      box-sizing: border-box;
    }
    .inv-nav-pill-btn:hover {
      background: #f8fafc;
      border-color: #cbd5e1;
      transform: translateY(-1px);
    }
    .inv-tabs-row {
      display: flex;
      gap: 10px;
      height: var(--inv-tabs-h);
      flex-shrink: 0;
    }
    .inv-tab-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 18px;
      border-radius: 9999px;
      font-size: 0.88rem;
      font-weight: 800;
      cursor: pointer;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      color: #334155;
      transition: all 0.18s ease;
      user-select: none;
      height: 34px;
      box-sizing: border-box;
    }
    .inv-tab-pill:hover {
      background: #f8fafc;
      border-color: #cbd5e1;
    }
    .inv-tab-pill.active {
      background: #10b981;
      border-color: #10b981;
      color: #ffffff;
      box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
    }

    .inv-ticket-summary-bar {
      height: var(--inv-ticket-h);
      min-height: var(--inv-ticket-h);
      margin: 0;
      padding: 0 12px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.76rem;
      box-sizing: border-box;
      flex-shrink: 0;
    }
    .inv-ticket-thumb {
      width: 18px;
      height: 18px;
      object-fit: contain;
      flex-shrink: 0;
      vertical-align: middle;
      filter: drop-shadow(0 1px 3px rgba(0,0,0,0.12));
    }
    .inv-ticket-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 8px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      font-weight: 700;
      color: #334155;
    }

    .inv-body-split {
      display: grid;
      grid-template-columns: 1.15fr 1fr;
      gap: var(--inv-body-gap);
      height: var(--inv-body-h);
      min-height: 0;
      flex: 1;
      overflow: hidden;
    }
    .inv-tiles-grid {
      display: grid;
      grid-template-columns: var(--inv-grid-cols);
      gap: var(--inv-tile-gap);
      overflow-y: auto;
      padding: 2px;
      align-content: start;
      max-height: 100%;
    }
    .inv-tile-cell {
      min-height: var(--inv-tile-min-h);
      border-radius: 16px;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      cursor: pointer;
      transition: all 0.15s ease;
      padding: 6px 8px;
      gap: 3px;
      box-sizing: border-box;
    }
    .inv-tile-cell:hover {
      transform: translateY(-2px);
      border-color: #cbd5e1;
      box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
    }
    .inv-tile-cell.selected {
      border-color: #10b981;
      background: #f0fdf4;
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
    }
    .inv-tile-cell.equipped-mark::after {
      content: "✓";
      position: absolute;
      top: 6px;
      right: 6px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #10b981;
      color: #ffffff;
      font-size: 0.72rem;
      font-weight: 900;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4);
    }
    /* =========================================================================
       JOURNEY PREFLIGHT CONTROL BAR (SENSEI SUITE HARMONIZED)
       ========================================================================= */
    .journey-preflight {
      width: 100%;
      max-width: 1000px;
      background: rgba(15, 23, 42, 0.85);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1.5px solid rgba(255, 255, 255, 0.18);
      border-radius: 22px;
      padding: 14px 24px;
      color: #f8fafc;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
      display: flex;
      flex-direction: column;
      gap: 10px;
      position: relative;
      z-index: 10;
      transition: all 0.2s ease;
    }
    .journey-preflight:hover {
      border-color: rgba(245, 158, 11, 0.38);
      box-shadow: 0 14px 36px rgba(0, 0, 0, 0.38);
    }
    .preflight-main-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      min-height: 42px;
    }
    .preflight-scope-cluster {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }
    .preflight-scope-badge {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.18);
      padding: 8px 18px;
      border-radius: 9999px;
      font-size: 0.88rem;
      font-family: inherit;
      color: #f1f5f9;
      cursor: pointer;
      transition: all 0.18s ease;
      user-select: none;
      outline: none;
    }
    .preflight-scope-badge:hover {
      background: rgba(255, 255, 255, 0.16);
      border-color: rgba(56, 189, 248, 0.55);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
    .preflight-scope-badge .scope-name {
      font-weight: 800;
      color: #fde68a;
      letter-spacing: 0.2px;
    }
    .preflight-scope-badge .scope-count {
      font-weight: 700;
      color: #94a3b8;
    }
    .preflight-scope-badge .scope-count b {
      color: #38bdf8;
    }
    .preflight-scope-badge .scope-order-pill {
      font-size: 0.74rem;
      font-weight: 800;
      padding: 2px 8px;
      border-radius: 999px;
      background: rgba(56, 189, 248, 0.18);
      color: #7dd3fc;
      border: 1px solid rgba(56, 189, 248, 0.35);
      margin-left: 2px;
      display: inline-flex;
      align-items: center;
      gap: 3px;
    }
    .preflight-scope-badge .scope-order-pill.is-seq {
      background: rgba(245, 158, 11, 0.18);
      color: #fde68a;
      border-color: rgba(245, 158, 11, 0.35);
    }
    /* Scope Modal Setup Panel */
    .scope-setup-panel {
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }
    .scope-pill-btn {
      padding: 5px 12px;
      border-radius: 9999px;
      font-size: 0.78rem;
      font-weight: 750;
      border: 1.5px solid #cbd5e1;
      background: #ffffff;
      color: #334155;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      transition: all 0.16s ease;
      user-select: none;
    }
    .scope-pill-btn:hover {
      border-color: #0284c7;
      color: #0284c7;
      background: #f0f9ff;
      transform: translateY(-1px);
    }
    .scope-pill-btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
      font-weight: 850;
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.32);
    }
    .scope-order-btn.active {
      background: #0369a1;
      border-color: #0369a1;
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(3, 105, 161, 0.35);
    }
    .preflight-btn-group {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .btn-preflight-sub {
      padding: 8px 16px;
      border-radius: 9999px;
      font-size: 0.82rem;
      font-weight: 700;
      background: rgba(255, 255, 255, 0.1);
      color: #e2e8f0;
      border: 1px solid rgba(255, 255, 255, 0.22);
      cursor: pointer;
      transition: all 0.16s ease;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      user-select: none;
    }
    .btn-preflight-sub:hover {
      background: rgba(255, 255, 255, 0.22);
      color: #ffffff;
      border-color: #f59e0b;
      transform: translateY(-1px);
    }
    .preflight-modes-cluster {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }
    /* Keep desktop controls on one row even for an assigned student scope.
       Only the scope name may shorten; actions/count/order remain visible. */
    @media (min-width: 1000px) {
      html:not(.phone-layout) .preflight-main-row {
        flex-wrap: nowrap;
        gap: 12px;
      }
      html:not(.phone-layout) .preflight-scope-cluster {
        flex-wrap: nowrap;
        flex: 1;
        min-width: 0;
        gap: 10px;
      }
      html:not(.phone-layout) .preflight-scope-badge { min-width: 0; }
      html:not(.phone-layout) .preflight-scope-badge .scope-name {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      html:not(.phone-layout) .preflight-scope-badge > :not(.scope-name),
      html:not(.phone-layout) .preflight-btn-group { flex-shrink: 0; white-space: nowrap; }
      html:not(.phone-layout) .preflight-modes-cluster { flex-wrap: nowrap; flex-shrink: 0; gap: 10px; }
    }
    .btn-preflight-mode {
      padding: 8px 18px;
      border-radius: 9999px;
      font-size: 0.86rem;
      font-weight: 800;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.16s ease;
      user-select: none;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    }
    .btn-preflight-mode.mode-practice {
      background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(5, 150, 105, 0.35));
      border: 1.5px solid #10b981;
      color: #6ee7b7;
    }
    .btn-preflight-mode.mode-practice:hover {
      background: linear-gradient(135deg, #10b981, #059669);
      color: #ffffff;
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
    }
    .btn-preflight-mode.mode-missions {
      background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(217, 119, 6, 0.35));
      border: 1.5px solid #f59e0b;
      color: #fde68a;
      position: relative;
    }
    .btn-preflight-mode.mode-missions:hover {
      background: linear-gradient(135deg, #f59e0b, #d97706);
      color: #ffffff;
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(245, 158, 11, 0.4);
    }
    .badge-pending-count {
      background: #ef4444;
      color: #ffffff;
      font-size: 0.68rem;
      font-weight: 900;
      padding: 2px 7px;
      border-radius: 9999px;
      margin-left: 4px;
      box-shadow: 0 2px 6px rgba(239, 68, 68, 0.5);
    }
    .preflight-tip-row {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.78rem;
      color: #94a3b8;
      font-weight: 600;
      padding-top: 6px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    .preflight-tip-row .tip-icon {
      font-size: 0.88rem;
    }
    .preflight-tip-row b {
      color: #e2e8f0;
    }
    .realm-loadout-chip {
      display: none !important;
    }
    .realm-loadout-tag {
      font-size: 0.74rem;
      font-weight: 850;
      color: #854d0e;
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: 3px;
    }
    .realm-charms-group {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      justify-content: center;
    }
    .realm-charm-badge {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 40px;
      background: #ffffff;
      border: 1.5px solid #fde047;
      border-radius: 8px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.06);
      cursor: help;
      transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
      flex-shrink: 0;
    }
    .realm-charm-badge:hover {
      border-color: #ca8a04;
      background: #fffbeb;
      transform: translateY(-2px) scale(1.08);
      box-shadow: 0 4px 10px rgba(202, 138, 4, 0.28);
    }
    .realm-charm-badge-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }
    .realm-charm-badge-icon svg {
      vertical-align: middle;
      display: inline-block;
    }

    /* PURE CSS MICRO-TOOLTIP (300ms) */
    .realm-charm-badge::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%) translateY(4px);
      background: #0f172a;
      color: #f8fafc;
      padding: 6px 10px;
      border-radius: 8px;
      font-size: 0.72rem;
      font-weight: 700;
      white-space: normal;
      width: max-content;
      max-width: 210px;
      text-align: center;
      line-height: 1.35;
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
      z-index: 9999;
    }
    .realm-charm-badge::before {
      content: '';
      position: absolute;
      bottom: calc(100% + 2px);
      left: 50%;
      transform: translateX(-50%) translateY(4px);
      border: 5px solid transparent;
      border-top-color: #0f172a;
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      z-index: 9999;
    }
    .realm-charm-badge:hover::after,
    .realm-charm-badge:hover::before,
    .realm-charm-badge:focus::after,
    .realm-charm-badge:focus::before {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }

    .realm-loadout { display: none; }
    .inv-tile-cell { flex-direction:column; padding:8px; gap:4px; }
    .inv-tile-cell > svg { flex-shrink:1; max-height:64px; }
    .inv-tile-name { font-size:.76rem; font-weight:800; text-align:center; }
    .inv-tile-function { font-size:.67rem; line-height:1.3; text-align:center; color:#475569; }
    .journey-loadout-tools { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:4px; color:#334155; font-size:.76rem; }
    .journey-loadout-tools[hidden] { display:none; }
    .journey-loadout-tools select { border:1px solid #cbd5e1; background:white; color:#0f172a; padding:3px 6px; border-radius:7px; font:inherit; font-size:.76rem; }
    .journey-loadout-tools #loadoutRecommendation { flex-basis:100%; font-size:0.73rem; color:#475569; margin-top:1px; }
    @media (min-width:900px) and (max-height:850px) {
      #modal-inventory .inv-inspector-pane { padding:10px 12px; gap:8px; justify-content:flex-start; }
      #modal-inventory .inv-hero-art-wrapper { width:62px; height:62px; min-height:62px; margin:0; }
      #modal-inventory .inv-hero-art-svg,
      #modal-inventory #invHeroArtContainer img { width:56px !important; height:60px !important; max-width:56px !important; max-height:60px !important; }
      #modal-inventory .inv-item-hero-title { font-size:0.95rem; }
      #modal-inventory .inv-item-status-badge { font-size:.66rem; padding:2px 8px; }
      #modal-inventory .inv-specs-panel { padding:8px 10px; gap:8px; }
      #modal-inventory .inv-spec-label { font-size: 0.78rem; }
      #modal-inventory .inv-spec-val { font-size: 0.92rem; line-height: 1.45; }
      #modal-inventory .inv-item-desc-text { font-size:.68rem; }
      #modal-inventory .inv-equip-action-btn { padding:6px 10px; font-size:.76rem; }
      #modal-inventory .btn-quest-shortcut { padding:5px 8px; font-size:.73rem; }
      #modal-inventory .inv-equipped-slots-strip { padding-top:2px; }
      #modal-inventory .inv-equip-slot-card { width:32px; height:32px; }
    }
    /* =========================================================================
       JOURNEY NOTICE TOAST (SENSEI FLOATING NOTIFICATION)
       ========================================================================= */
    #journeyNotice {
      position: fixed;
      left: 50%;
      top: 76px;
      transform: translateX(-50%) translateY(-15px);
      z-index: 10000;
      max-width: min(540px, 90vw);
      padding: 9px 22px;
      border-radius: 9999px;
      background: rgba(15, 23, 42, 0.94);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1.5px solid rgba(245, 158, 11, 0.5);
      color: #fef3c7;
      font-size: 0.84rem;
      font-weight: 700;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
      display: flex;
      align-items: center;
      gap: 8px;
      opacity: 0;
      pointer-events: none;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    #journeyNotice.visible {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }
    #journeyNotice:empty { display: none !important; }

    /* =========================================================================
       JOURNEY MISSIONS & NOTEBOOK MODAL (SENSEI SUITE HARMONIZED)
       ========================================================================= */
    .journey-dialog-shell {
      width: min(740px, 94vw);
      max-height: calc(100vh - 40px);
      background: #ffffff;
      border-radius: 20px;
      box-shadow: 0 25px 70px rgba(0, 0, 0, 0.4);
      border: 1.5px solid rgba(245, 158, 11, 0.35);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      animation: modalPop 0.22s ease-out;
    }
    .journey-dialog-shell .modal-header {
      flex-shrink: 0;
      padding: 12px 20px;
      background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
      border-bottom: 2px solid #f59e0b;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .journey-modal-brand {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .journey-modal-brand .brand-icon-box {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: linear-gradient(135deg, #f59e0b, #d97706);
      display: grid;
      place-items: center;
      font-size: 1.1rem;
      color: #ffffff;
      box-shadow: 0 3px 8px rgba(245, 158, 11, 0.35);
    }
    .journey-modal-brand h3 {
      font-size: 1.05rem;
      font-weight: 900;
      color: #ffffff;
      margin: 0;
      letter-spacing: 0.2px;
    }
    .journey-modal-brand p {
      font-size: 0.72rem;
      color: #cbd5e1;
      margin: 1px 0 0;
      font-weight: 600;
    }
    .journey-dialog-shell .modal-body {
      padding: 14px 18px;
      overflow-y: auto;
      flex: 1 1 auto;
      min-height: 0;
      background: #f8fafc;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    /* Backpack Overview Box */
    .missions-backpack-box {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 14px;
      padding: 10px 14px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .missions-backpack-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding-bottom: 6px;
      border-bottom: 1px dashed #e2e8f0;
    }
    .missions-backpack-title {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .missions-backpack-title .backpack-icon {
      font-size: 1.15rem;
      line-height: 1;
    }
    .missions-backpack-title h4 {
      font-size: 0.86rem;
      font-weight: 850;
      color: #0f172a;
      margin: 0;
    }
    .backpack-count-pill {
      font-size: 0.7rem;
      font-weight: 800;
      color: #0284c7;
      background: #f0f9ff;
      border: 1px solid #bae6fd;
      padding: 2px 8px;
      border-radius: 9999px;
      margin-left: 4px;
    }
    .backpack-tip-badge {
      font-size: 0.7rem;
      font-weight: 700;
      color: #64748b;
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      padding: 2px 8px;
      border-radius: 9999px;
      white-space: nowrap;
    }

    /* 6-Column Unified Backpack Shelf Row */
    .backpack-shelf-row {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 10px;
    }
    @media (max-width: 680px) {
      .backpack-shelf-row {
        grid-template-columns: repeat(3, 1fr);
      }
    }
    .backpack-item-pill {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 8px 12px;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      cursor: help;
      transition: all 0.15s ease;
      user-select: none;
    }
    .backpack-item-pill:hover {
      border-color: #cbd5e1;
      background: #ffffff;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
      transform: translateY(-1px);
    }
    .backpack-item-pill.active {
      border-color: #fde68a;
      background: #fffbeb;
    }
    .backpack-item-pill .pill-icon {
      font-size: 1.25rem;
      line-height: 1;
      flex-shrink: 0;
    }
    .backpack-mini-asset {
      width: 24px;
      height: 24px;
      object-fit: contain;
      flex-shrink: 0;
      filter: drop-shadow(0 1px 3px rgba(0,0,0,0.12));
    }
    .backpack-item-pill .pill-qty {
      font-size: 0.74rem;
      font-weight: 900;
      padding: 2px 8px;
      border-radius: 9999px;
      background: #e2e8f0;
      color: #64748b;
      flex-shrink: 0;
    }
    .backpack-item-pill .pill-qty.qty-active {
      background: #10b981;
      color: #ffffff;
    }
    .backpack-item-pill .pill-qty.qty-active {
      background: #10b981;
      color: #ffffff;
    }
    .reward-mini-asset {
      width: 18px;
      height: 18px;
      object-fit: contain;
      vertical-align: middle;
      margin-right: 4px;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
    }
    .tutorial-inline-asset {
      width: 22px;
      height: 22px;
      object-fit: contain;
      vertical-align: middle;
      margin-right: 5px;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.12));
    }

    /* Compact 1-Row Mission Cards */
    .compact-mission-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 14px;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
      transition: all 0.16s ease;
      cursor: help;
    }
    .compact-mission-row:hover {
      border-color: #cbd5e1;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    }
    .compact-mission-row.card-notebook {
      border-left: 4px solid #f59e0b;
    }
    .compact-mission-row.card-lesson {
      border-left: 4px solid #10b981;
    }
    .compact-mission-row.card-rewards {
      border-left: 4px solid #ec4899;
      background: #fff5f7;
      border-color: #fce7f3;
      flex-direction: column;
      align-items: stretch;
      cursor: default;
    }
    .compact-mission-row .mission-info-left {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      flex: 1;
    }
    .compact-mission-row .mission-card-icon {
      font-size: 1.25rem;
      line-height: 1;
      flex-shrink: 0;
    }
    .compact-mission-row .mission-title-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .compact-mission-row .mission-card-title {
      font-size: 0.88rem;
      font-weight: 850;
      color: #0f172a;
      margin: 0;
      white-space: nowrap;
    }
    .compact-mission-row .mission-action-right {
      flex-shrink: 0;
    }
    .compact-mission-row .btn-mission-primary {
      padding: 6px 14px;
      font-size: 0.78rem;
    }
    .mission-status-pill {
      padding: 2px 8px;
      border-radius: 9999px;
      font-size: 0.7rem;
      font-weight: 800;
      white-space: nowrap;
    }
    .pill-orange {
      background: #fef3c7;
      color: #b45309;
      border: 1px solid #fde68a;
    }
    .pill-green {
      background: #ecfdf5;
      color: #047857;
      border: 1px solid #a7f3d0;
    }
    .pill-pink {
      background: #fdf2f8;
      color: #be185d;
      border: 1px solid #fbcfe8;
    }
    .btn-mission-primary {
      border-radius: 8px;
      font-weight: 800;
      cursor: pointer;
      border: none;
      color: #ffffff;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.16s ease;
      user-select: none;
    }
    .btn-mission-primary.btn-notebook {
      background: linear-gradient(135deg, #f59e0b, #d97706);
      box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35);
    }
    .btn-mission-primary.btn-notebook:hover:not(:disabled) {
      background: linear-gradient(135deg, #fbbf24, #d97706);
      transform: translateY(-1px);
      box-shadow: 0 4px 10px rgba(245, 158, 11, 0.45);
    }
    .btn-mission-primary.btn-lesson {
      background: linear-gradient(135deg, #10b981, #059669);
      box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
    }
    .btn-mission-primary.btn-lesson:hover:not(:disabled) {
      background: linear-gradient(135deg, #34d399, #059669);
      transform: translateY(-1px);
      box-shadow: 0 4px 10px rgba(16, 185, 129, 0.45);
    }
    .btn-mission-primary:disabled {
      background: #cbd5e1;
      color: #94a3b8;
      cursor: not-allowed;
      box-shadow: none;
      transform: none;
    }
    .btn-claim-reward {
      padding: 5px 12px;
      border-radius: 9999px;
      font-size: 0.74rem;
      font-weight: 800;
      cursor: pointer;
      border: 1.5px solid transparent;
      transition: all 0.15s ease;
      user-select: none;
    }
    .btn-claim-reward.claim-charm {
      background: #fdf2f8;
      color: #be185d;
      border-color: #fbcfe8;
    }
    .btn-claim-reward.claim-charm:hover:not(:disabled) {
      background: #db2777;
      color: #ffffff;
      transform: translateY(-1px);
    }
    .btn-claim-reward.claim-time {
      background: #f0fdf4;
      color: #15803d;
      border-color: #86efac;
    }
    .btn-claim-reward.claim-time:hover:not(:disabled) {
      background: #16a34a;
      color: #ffffff;
      transform: translateY(-1px);
    }
    .btn-claim-reward.claim-fifty {
      background: #eff6ff;
      color: #1d4ed8;
      border-color: #93c5fd;
    }
    .btn-claim-reward.claim-fifty:hover:not(:disabled) {
      background: #2563eb;
      color: #ffffff;
      transform: translateY(-1px);
    }
    .btn-claim-reward:disabled {
      background: #f1f5f9;
      color: #94a3b8;
      border-color: #e2e8f0;
      cursor: not-allowed;
      transform: none;
    }

    /* MISSION MODAL DYNAMIC CHALLENGE CARDS */
    .compact-mission-row.card-streak {
      border-left: 4px solid #3b82f6;
    }
    .compact-mission-row.card-accuracy {
      border-left: 4px solid #8b5cf6;
    }
    .compact-mission-row.card-flawless {
      border-left: 4px solid #eab308;
    }
    .compact-mission-row.card-completed {
      border-left: 4px solid #059669;
      background: #f0fdf4;
      border-color: #bbf7d0;
    }
    .pill-blue {
      background: #eff6ff;
      color: #1d4ed8;
      border: 1px solid #bfdbfe;
    }
    .pill-purple {
      background: #f5f3ff;
      color: #6d28d9;
      border: 1px solid #ddd6fe;
    }
    .pill-gold {
      background: #fefce8;
      color: #a16207;
      border: 1px solid #fef08a;
    }
    .btn-mission-primary.btn-streak {
      background: linear-gradient(135deg, #3b82f6, #1d4ed8);
      box-shadow: 0 2px 6px rgba(59, 130, 246, 0.35);
    }
    .btn-mission-primary.btn-streak:hover:not(:disabled) {
      background: linear-gradient(135deg, #60a5fa, #1d4ed8);
      transform: translateY(-1px);
    }
    .btn-mission-primary.btn-accuracy {
      background: linear-gradient(135deg, #8b5cf6, #6d28d9);
      box-shadow: 0 2px 6px rgba(139, 92, 246, 0.35);
    }
    .btn-mission-primary.btn-accuracy:hover:not(:disabled) {
      background: linear-gradient(135deg, #a78bfa, #6d28d9);
      transform: translateY(-1px);
    }
    .btn-mission-primary.btn-flawless {
      background: linear-gradient(135deg, #eab308, #b45309);
      box-shadow: 0 2px 6px rgba(234, 179, 8, 0.35);
    }
    .btn-mission-primary.btn-flawless:hover:not(:disabled) {
      background: linear-gradient(135deg, #facc15, #b45309);
      transform: translateY(-1px);
    }

    /* MISSION MODAL TABS BAR */
    .mission-tabs-bar {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
      background: #e2e8f0;
      padding: 4px;
      border-radius: 12px;
    }
    .mission-tab-btn {
      flex: 1;
      padding: 8px 12px;
      font-size: 0.84rem;
      font-weight: 850;
      border-radius: 8px;
      border: none;
      background: transparent;
      color: #475569;
      cursor: pointer;
      transition: all 0.15s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .mission-tab-btn:hover {
      color: #0f172a;
    }
    .mission-tab-btn.active {
      background: #ffffff;
      color: #0f172a;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }

    /* ACHIEVEMENTS SHELF (KHO THÀNH TÍCH) */
    .achieve-summary-shelf {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-bottom: 12px;
    }
    .achieve-stat-box {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 12px;
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 2px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }
    .achieve-stat-val {
      font-size: 1.25rem;
      font-weight: 900;
      color: #0f172a;
      line-height: 1.2;
    }
    .achieve-stat-lbl {
      font-size: 0.72rem;
      font-weight: 700;
      color: #64748b;
    }
    .achieve-list-wrap {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .client-data-vault-shelf {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 14px;
      padding: 12px 14px;
      margin-top: 14px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
    }
    .vault-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 8px;
    }
    .vault-header .vault-icon {
      font-size: 1.4rem;
      line-height: 1;
    }
    .vault-header h5 {
      font-size: 0.86rem;
      font-weight: 850;
      color: #0f172a;
      margin: 0 0 2px;
    }
    .vault-header p {
      font-size: 0.74rem;
      color: #64748b;
      margin: 0;
      line-height: 1.35;
    }
    .vault-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }
    .btn-vault-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 7px 14px;
      font-size: 0.78rem;
      font-weight: 800;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s ease;
      user-select: none;
      border: 1.5px solid #cbd5e1;
      background: #f8fafc;
      color: #0f172a;
    }
    .btn-vault-action:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }

    .journey-dialog-shell .modal-footer {
      flex-shrink: 0;
      padding: 10px 18px;
      background: #f1f5f9;
      border-top: 1px solid #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    .inv-tile-thumb {
      width: 58px;
      height: 58px;
      object-fit: contain;
      filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.14));
      transition: transform 0.15s ease;
    }
    .inv-tile-cell:hover .inv-tile-thumb {
      transform: scale(1.08);
    }
    .inv-qty-pill {
      position: absolute;
      bottom: 4px;
      right: 4px;
      background: rgba(15, 23, 42, 0.85);
      color: #ffffff;
      font-size: 0.68rem;
      font-weight: 900;
      padding: 1px 7px;
      border-radius: 9999px;
      border: 1px solid rgba(255, 255, 255, 0.4);
      pointer-events: none;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .inv-inspector-pane {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 20px;
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 5px;
      justify-content: flex-start;
      overflow-y: hidden;
      box-sizing: border-box;
      height: 100%;
    }
    .inv-hero-art-wrapper {
      position: relative;
      width: var(--inv-hero-size);
      height: var(--inv-hero-size);
      min-height: var(--inv-hero-size);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 2px;
      flex-shrink: 0;
    }
    .inv-hero-art-glow {
      position: absolute;
      inset: -8px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(16, 185, 129, 0.22) 0%, rgba(16, 185, 129, 0) 70%);
      pointer-events: none;
    }
    .inv-hero-art-svg {
      position: relative;
      z-index: 2;
      width: 50px;
      height: 54px;
      max-width: 50px;
      max-height: 54px;
      object-fit: contain;
      filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.18));
      animation: floatHero 3.4s ease-in-out infinite;
    }
    .inv-hero-art-wrapper img,
    #invHeroArtContainer img {
      width: 48px !important;
      height: 52px !important;
      max-width: 48px !important;
      max-height: 52px !important;
      object-fit: contain !important;
      border-radius: 12px;
    }
    .inv-tile-thumb,
    .inv-tile-cell img {
      width: 48px !important;
      height: 48px !important;
      max-width: 48px !important;
      max-height: 48px !important;
      object-fit: contain !important;
    }
    @keyframes floatHero {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-3px); }
    }
    .inv-item-hero-title {
      font-size: 1.05rem;
      font-weight: 900;
      color: #0f172a;
      margin: 0;
      line-height: 1.2;
    }
    .inv-item-status-badge {
      padding: 2px 10px;
      border-radius: 9999px;
      font-size: 0.68rem;
      font-weight: 800;
      letter-spacing: 0.3px;
    }
    .inv-item-status-badge.equipped {
      background: #dcfce7;
      color: #15803d;
      border: 1px solid #bbf7d0;
    }
    .inv-item-status-badge.unequipped {
      background: #f1f5f9;
      color: #64748b;
      border: 1px solid #e2e8f0;
    }
    .inv-item-status-badge.locked {
      background: #fee2e2;
      color: #b91c1c;
      border: 1px solid #fecaca;
    }
    .inv-item-status-badge.depleted {
      background: #fee2e2;
      color: #b91c1c;
      border: 1px solid #f87171;
      font-weight: 900;
    }
    .inv-specs-panel {
      width: 100%;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      box-sizing: border-box;
      box-shadow: 0 1px 3px rgba(0,0,0,0.02);
      text-align: left;
    }
    .inv-spec-row {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .inv-spec-row#invHeroQtyRow {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 8px;
      border-bottom: 1px solid #f1f5f9;
    }
    .inv-spec-row.inv-spec-card-feature {
      flex-direction: row !important;
      align-items: flex-start !important;
      gap: 10px !important;
    }
    .inv-spec-row#invHeroBuffCard {
      padding-bottom: 8px;
      border-bottom: 1px solid #f1f5f9;
    }
    .inv-spec-icon-badge {
      font-size: 1.15rem;
      line-height: 1.2;
      padding: 3px 6px;
      border-radius: 8px;
      flex-shrink: 0;
      user-select: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .inv-spec-icon-badge.buff {
      background: #eff6ff;
      border: 1px solid #bfdbfe;
    }
    .inv-spec-icon-badge.recommend {
      background: #fefce8;
      border: 1px solid #fef08a;
    }
    .inv-spec-label {
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 0.3px;
      color: #64748b;
    }
    .inv-spec-label.buff-label {
      color: #0369a1;
    }
    .inv-spec-label.recommend-label {
      color: #b45309;
    }
    .inv-spec-val {
      font-size: 0.92rem !important;
      font-weight: 650;
      line-height: 1.45;
      color: #0f172a;
      flex: 1;
    }
    .inv-hero-qty-num {
      font-size: 0.95rem;
      font-weight: 900;
      color: #0f172a;
    }
    .inv-hero-qty-tag {
      font-size: 0.68rem;
      font-weight: 800;
      padding: 2px 7px;
      border-radius: 6px;
      background: #f1f5f9;
      color: #475569;
      border: 1px solid #e2e8f0;
    }
    .inv-hero-qty-tag.in-stock {
      background: #f0fdf4;
      color: #15803d;
      border-color: #bbf7d0;
    }
    .inv-hero-qty-tag.depleted {
      background: #fef2f2;
      color: #b91c1c;
      border-color: #fecaca;
    }
    .inv-buff-spec-box {
      background: #f0f9ff;
      border: 1.5px solid #bae6fd;
      border-radius: 14px;
      padding: 8px 16px;
      width: 100%;
      font-size: 0.92rem;
      font-weight: 800;
      color: #0284c7;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    .inv-item-desc-text {
      font-size: 0.74rem;
      color: #64748b;
      line-height: 1.35;
      margin: 0;
      max-width: 320px;
    }
    .btn-quest-shortcut {
      width: 100%;
      padding: 9px 12px;
      border-radius: 12px;
      background: linear-gradient(135deg, #f59e0b, #d97706);
      color: #ffffff;
      font-size: 0.86rem;
      font-weight: 900;
      border: 1.5px solid #fef08a;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
      transition: all 0.15s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .btn-quest-shortcut:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 16px rgba(245, 158, 11, 0.45);
    }
    .inv-tile-cell.depleted {
      border: 1.5px dashed #cbd5e1 !important;
      background: #f8fafc !important;
    }
    .inv-tile-cell.depleted:hover {
      border-color: #f87171 !important;
    }
    .inv-tile-cell.depleted .inv-tile-thumb {
      filter: grayscale(0.85);
      opacity: 0.65;
    }
    .inv-tile-stock-badge {
      position: absolute;
      top: 6px;
      right: 6px;
      font-size: 0.7rem;
      font-weight: 900;
      padding: 2px 7px;
      border-radius: 9999px;
      line-height: 1.1;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12);
      z-index: 5;
    }
    .inv-tile-stock-badge.in-stock {
      background: #047857;
      color: #ffffff;
    }
    .inv-tile-stock-badge.out-of-stock {
      background: #b91c1c;
      color: #ffffff;
    }
    .inv-tile-cell.equipped-mark .inv-tile-stock-badge {
      right: auto;
      left: 6px;
    }
    .inv-tile-depleted-tag {
      font-size: 0.64rem;
      font-weight: 800;
      color: #991b1b;
      background: #fee2e2;
      padding: 1px 6px;
      border-radius: 4px;
      margin-top: 2px;
    }
    @keyframes charmShatterFX {
      0% { transform: scale(1) rotate(0deg); filter: brightness(1.2); box-shadow: 0 0 15px #10b981; }
      30% { transform: scale(1.4) rotate(-15deg); filter: brightness(2) drop-shadow(0 0 20px #10b981); }
      60% { transform: scale(1.1) rotate(20deg); filter: grayscale(0.8) opacity(0.8); }
      100% { transform: scale(0.2) rotate(45deg); opacity: 0; filter: grayscale(1); }
    }
    .charm-shatter {
      animation: charmShatterFX 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
      pointer-events: none;
    }
    @keyframes screenShieldBarrier {
      0% { box-shadow: inset 0 0 0px rgba(16, 185, 129, 0); }
      35% { box-shadow: inset 0 0 70px rgba(16, 185, 129, 0.55); }
      100% { box-shadow: inset 0 0 0px rgba(16, 185, 129, 0); }
    }
    .barrier-pulse {
      animation: screenShieldBarrier 0.85s ease-out;
    }
    .inv-equip-action-btn {
      width: 100%;
      height: var(--inv-btn-h);
      padding: 5px 12px;
      border-radius: 10px;
      font-size: 0.78rem;
      font-weight: 800;
      cursor: pointer;
      border: none;
      transition: all 0.15s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
    }
    .inv-equip-action-btn.equip {
      background: linear-gradient(135deg, #10b981, #059669);
      color: #ffffff;
      box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
    }
    .inv-equip-action-btn.unequip {
      background: linear-gradient(135deg, #f59e0b, #d97706);
      color: #ffffff;
      box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
    }
    .inv-equip-action-btn:disabled {
      background: #e2e8f0;
      color: #94a3b8;
      box-shadow: none;
      cursor: not-allowed;
    }
    .inv-equipped-slots-strip {
      width: 100%;
      height: var(--inv-slots-strip-h);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 4px;
      border-top: 1.5px dashed #cbd5e1;
      margin-top: auto;
      box-sizing: border-box;
    }
    .inv-slots-pack {
      display: flex;
      gap: 6px;
    }
    .inv-equip-slot-card {
      width: var(--inv-slot-card-size);
      height: var(--inv-slot-card-size);
      border-radius: 8px;
      border: 1.5px dashed #cbd5e1;
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.15s ease;
      position: relative;
    }
    .inv-equip-slot-card.filled {
      border-style: solid;
      border-color: #10b981;
      background: #f0fdf4;
      box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
    }
    .inv-equip-slot-card.filled:hover {
      border-color: #ef4444;
      background: #fef2f2;
    }

    /* [FEAT-CSS-11] 📚 LESSON SCOPE & TEACHER WORKSHOP PANELS */
    /* =========================================================================
       MODERN LESSON SHOWCASE MODAL (BÀI HỌC - 100% STYLE REFERENCE 1)
       ========================================================================= */
    .lessons-dialog-shell {
      max-width: 980px !important;
      width: 94% !important;
      max-height: 88vh !important;
      background: rgba(255, 255, 255, 0.97) !important;
      backdrop-filter: blur(28px) !important;
      border-radius: 28px !important;
      box-shadow: 0 30px 80px rgba(15, 23, 42, 0.45) !important;
      border: 2px solid rgba(255, 255, 255, 0.95) !important;
      padding: 20px 26px !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 14px !important;
      overflow-y: auto !important;
    }
    .lesson-modal-top-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .lesson-title-area {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .lesson-brand-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 3px 12px;
      border-radius: 9999px;
      background: #ecfdf5;
      color: #047857;
      font-size: 0.76rem;
      font-weight: 800;
      width: fit-content;
      border: 1px solid #a7f3d0;
    }
    .lesson-showcase-title {
      font-size: 1.85rem;
      font-weight: 900;
      color: #0f172a;
      margin: 0;
      letter-spacing: -0.5px;
      line-height: 1.15;
    }
    .lesson-progress-capsule {
      display: flex;
      align-items: center;
      gap: 12px;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 18px;
      padding: 8px 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }
    .lesson-progress-capsule-info {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .lesson-capsule-label {
      font-size: 0.78rem;
      font-weight: 800;
      color: #0f172a;
    }
    .lesson-capsule-track {
      width: 140px;
      height: 8px;
      border-radius: 9999px;
      background: #e2e8f0;
      overflow: hidden;
    }
    .lesson-capsule-fill {
      height: 100%;
      background: linear-gradient(90deg, #10b981, #059669);
      border-radius: 9999px;
      transition: width 0.3s ease;
    }

    .lesson-filter-tabs-row {
      display: flex;
      gap: 10px;
      align-items: center;
    }
    .lesson-filter-pill-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 18px;
      border-radius: 9999px;
      font-size: 0.92rem;
      font-weight: 800;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      color: #334155;
      cursor: pointer;
      transition: all 0.15s ease;
      user-select: none;
    }
    .lesson-filter-pill-btn:hover {
      background: #f8fafc;
      border-color: #cbd5e1;
    }
    .lesson-filter-pill-btn.active {
      background: #10b981;
      border-color: #10b981;
      color: #ffffff;
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    }

    .lesson-showcase-3cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    .lesson-stage-banner-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 20px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
      transition: all 0.2s ease;
    }
    .lesson-stage-banner-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
      border-color: #cbd5e1;
    }
    .lesson-card-visual-header {
      width: 100%;
      height: 140px;
      background-size: cover;
      background-position: center;
      position: relative;
    }
    .lesson-card-details-box {
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .lesson-card-name-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      font-size: 1.05rem;
      font-weight: 900;
      color: #0f172a;
    }
    .lesson-card-slider-track {
      width: 100%;
      height: 7px;
      border-radius: 9999px;
      background: #e2e8f0;
      overflow: hidden;
    }
    .lesson-card-slider-fill {
      height: 100%;
      border-radius: 9999px;
    }
    .lesson-card-cta-btn {
      width: 100%;
      padding: 10px;
      border-radius: 12px;
      font-size: 0.95rem;
      font-weight: 900;
      color: #ffffff;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: all 0.15s ease;
    }
    .lesson-card-cta-btn.green {
      background: linear-gradient(135deg, #10b981, #059669);
      box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
    }
    .lesson-card-cta-btn.blue {
      background: linear-gradient(135deg, #0284c7, #0369a1);
      box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4);
    }
    .lesson-card-cta-btn.purple {
      background: linear-gradient(135deg, #8b5cf6, #7c3aed);
      box-shadow: 0 4px 14px rgba(139, 92, 246, 0.4);
    }

    /* [FEAT-CSS-12] 📱 RESPONSIVE BREAKPOINTS, MOBILE & REDUCED MOTION */
    /* Responsive Screen Scaling */
    @media (max-width: 1320px) {
      .companion-ground-wrapper {
        width: clamp(190px, 15vw, 240px);
        left: 16px;
      }
      .question-column-wrapper {
        max-width: 680px;
      }
    }

    /* =========================================================================
       [FEAT-CSS-STUDIO-BENTO] 🍱 STUDIO GIÁO VIÊN BENTO CARDS & XUẤT BẢN A4
       - Style 100% chuẩn Bento Nhật Bản tối giản như ảnh người dùng cung cấp
       ========================================================================= */
    .studio-modal-dialog {
      width: min(1060px, 95vw) !important;
      max-width: 1060px !important;
      max-height: 94vh !important;
      display: flex !important;
      flex-direction: column !important;
      border-radius: 22px !important;
      box-shadow: 0 25px 70px rgba(15, 23, 42, 0.3) !important;
      padding: 16px 24px !important;
      box-sizing: border-box !important;
      background: #ffffff !important;
    }
    .studio-modal-dialog .modal-header {
      padding: 0 0 10px 0 !important;
      border-bottom: 1.5px solid #e2e8f0 !important;
      flex-shrink: 0 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
    }
    .studio-modal-dialog .modal-header h3 {
      font-size: 1.2rem !important;
      font-weight: 900 !important;
      color: #0f172a !important;
      margin: 0 !important;
      display: flex !important;
      align-items: center !important;
      gap: 10px !important;
    }
    .studio-modal-close-btn {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      border: 1.5px solid #e2e8f0;
      background: #f8fafc;
      color: #64748b;
      font-size: 1.1rem;
      font-weight: 800;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s ease;
    }
    .studio-modal-close-btn:hover {
      background: #fee2e2;
      color: #dc2626;
      border-color: #fca5a5;
    }
    .studio-modal-dialog .modal-body {
      flex: 1 1 auto !important;
      overflow-y: auto !important;
      padding: 12px 0 0 0 !important;
      min-height: 0 !important;
    }
    .studio-modal-dialog .modal-footer {
      display: none !important;
    }
    .studio-tabs-bar {
      display: flex;
      gap: 10px;
      margin-bottom: 14px;
      padding-bottom: 10px;
      border-bottom: 1.5px solid #e2e8f0;
      flex-wrap: wrap;
    }
    .studio-tab-btn {
      height: 40px;
      padding: 0 20px;
      border-radius: 10px;
      font-size: 0.9rem;
      font-weight: 850;
      border: 1.5px solid #e2e8f0;
      background: #ffffff;
      color: #475569;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: all 0.16s ease;
    }
    .studio-tab-btn:hover {
      background: #f8fafc;
      border-color: #cbd5e1;
      color: #0f172a;
    }
    .studio-tab-btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 4px 14px rgba(2, 132, 199, 0.32);
    }

    /* [FEAT-CSS-STUDIO-SETTINGS] 🎨 COMPACT BENTO SETTINGS & BRAND DESIGN SYSTEM */
    .studio-settings-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-bottom: 12px;
    }
    .studio-settings-card {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 16px;
      padding: 12px 16px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
      display: flex;
      flex-direction: column;
      gap: 9px;
    }
    .studio-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 7px;
      border-bottom: 1.5px solid #f1f5f9;
      min-height: 32px;
      gap: 8px;
    }
    .studio-card-title {
      font-size: 0.88rem;
      font-weight: 900;
      color: #0f172a;
      letter-spacing: -0.01em;
      flex-shrink: 0;
    }
    .brand-preview-inline {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 9999px;
      padding: 3px 10px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.82rem;
      font-weight: 850;
      color: #0f172a;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
      max-width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .brand-preview-inline .brand-logo-img {
      width: 18px;
      height: 18px;
      object-fit: contain;
      flex-shrink: 0;
    }
    .title-preview-inline {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 9999px;
      padding: 2px 7px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
      max-width: min(360px, calc(100% - 135px));
      min-width: 0;
      overflow: hidden;
      white-space: nowrap;
    }
    .preview-title-l1 {
      font-family: 'Baloo 2', sans-serif;
      font-weight: 900;
      color: #ea580c;
      font-size: 0.81rem;
      line-height: 1;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .preview-title-l2 {
      font-family: 'Baloo 2', sans-serif;
      font-weight: 900;
      color: #0284c7;
      font-size: 0.81rem;
      line-height: 1;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .preview-title-badge {
      background: #fef3c7;
      border: 1px solid #d97706;
      color: #78350f;
      font-size: 0.66rem;
      font-weight: 800;
      padding: 1px 5px;
      border-radius: 9999px;
      line-height: 1.2;
      letter-spacing: -0.01em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 140px;
      flex-shrink: 1;
    }
    .setting-field {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .setting-label {
      font-size: 0.76rem;
      font-weight: 800;
      color: #475569;
    }
    .brand-logo-control-row {
      display: flex;
      align-items: center;
      gap: 5px;
      flex-wrap: wrap;
    }
    .btn-upload-logo {
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 0.78rem;
      font-weight: 800;
      padding: 5px 10px;
      height: 32px;
      box-sizing: border-box;
      background: #eff6ff;
      color: #1d4ed8;
      border: 1.5px solid #bfdbfe;
      border-radius: 7px;
      transition: all 0.15s ease;
      flex-shrink: 0;
    }
    .btn-upload-logo:hover {
      background: #dbeafe;
    }
    .btn-reset-logo {
      font-size: 0.78rem;
      font-weight: 800;
      padding: 5px 9px;
      height: 32px;
      box-sizing: border-box;
      background: #f8fafc;
      color: #64748b;
      border: 1.5px solid #cbd5e1;
      border-radius: 7px;
      cursor: pointer;
      flex-shrink: 0;
    }
    .btn-reset-logo:hover {
      background: #f1f5f9;
      color: #0f172a;
    }
    .brand-emoji-strip {
      display: flex;
      gap: 3px;
      align-items: center;
      flex-wrap: wrap;
    }
    .btn-emoji-pick {
      width: 28px;
      height: 32px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      border: 1.5px solid #e2e8f0;
      background: #ffffff;
      font-size: 0.9rem;
      cursor: pointer;
      transition: all 0.15s ease;
      flex-shrink: 0;
    }
    .btn-emoji-pick:hover {
      border-color: #0284c7;
      transform: translateY(-1px);
      background: #f0f9ff;
    }
    .setting-presets-row {
      display: flex;
      align-items: center;
      gap: 5px;
      flex-wrap: wrap;
      padding-top: 6px;
      border-top: 1px dashed #e2e8f0;
    }
    .preset-label {
      font-size: 0.74rem;
      font-weight: 800;
      color: #94a3b8;
    }
    .preset-pill-btn {
      font-size: 0.74rem;
      font-weight: 800;
      padding: 3px 8px;
      border-radius: 6px;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      color: #475569;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .preset-pill-btn:hover {
      background: #eff6ff;
      border-color: #93c5fd;
      color: #1d4ed8;
    }
    .setting-field-grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .studio-bottom-bar {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 14px;
      padding: 10px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }
    .bottom-settings-fields {
      display: flex;
      align-items: center;
      gap: 12px;
      flex: 1;
      min-width: 300px;
    }
    .bottom-setting-item {
      display: flex;
      flex-direction: column;
      gap: 3px;
      flex: 1;
    }
    .bottom-setting-item .bento-input,
    .bottom-setting-item .bento-select {
      height: 36px !important;
      font-size: 0.84rem !important;
      padding: 0 10px !important;
    }
    .bottom-actions-group {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .bottom-actions-group .top-action-btn {
      height: 38px !important;
      padding: 0 16px !important;
      font-size: 0.84rem !important;
      font-weight: 850 !important;
      border-radius: 9px !important;
    }
    .btn-primary-save {
      background: #0284c7 !important;
      color: #ffffff !important;
      border-color: #0284c7 !important;
      box-shadow: 0 3px 10px rgba(2, 132, 199, 0.28) !important;
    }
    .btn-primary-save:hover {
      background: #0369a1 !important;
      border-color: #0369a1 !important;
    }
    @media (max-width: 820px) {
      .studio-settings-grid {
        grid-template-columns: 1fr;
      }
      .studio-bottom-bar {
        flex-direction: column;
        align-items: stretch;
      }
      .bottom-settings-fields {
        flex-direction: column;
        min-width: 0;
      }
    }
    /* MASTER-DETAIL SPLIT LAYOUT (LEFT: CHI TIẾT SỬA - RIGHT: DANH SÁCH CÂU) */
    .bank-split-layout {
      display: grid;
      grid-template-columns: 440px 1fr;
      gap: 14px;
      height: 410px;
      max-height: calc(88vh - 220px);
      min-height: 360px;
      align-items: stretch;
    }
    @media (max-width: 960px) {
      .bank-split-layout {
        grid-template-columns: 1fr;
        height: auto;
        max-height: none;
      }
    }

    /* LEFT PANE: CHI TIẾT CÂU ĐỂ SỬA */
    .bank-detail-pane {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 16px;
      padding: 10px 14px;
      box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
      display: flex;
      flex-direction: column;
      gap: 7px;
      overflow-y: auto;
      overflow-x: hidden;
    }
    .bank-detail-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 6px;
      border-bottom: 1.5px solid #f1f5f9;
    }
    .bank-detail-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 0.75rem;
      font-weight: 850;
      color: #0f766e;
      background: #ecfdf5;
      padding: 2px 8px;
      border-radius: 6px;
      border: 1px solid #a7f3d0;
    }
    .bank-editor-section {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .bank-editor-label {
      font-size: 0.72rem;
      font-weight: 800;
      color: #475569;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .bank-editor-textarea {
      width: 100%;
      min-height: 52px;
      height: 52px;
      font-family: inherit;
      font-size: 0.88rem;
      font-weight: 700;
      line-height: 1.35;
      color: #0f172a;
      background: #f8fafc;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 10px;
      box-sizing: border-box;
      resize: vertical;
      transition: all 0.15s ease;
    }
    .bank-editor-textarea:focus {
      background: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
      outline: none;
    }
    .bank-opt-row {
      display: flex;
      align-items: center;
      gap: 6px;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
      padding: 4px 8px;
      transition: all 0.15s ease;
    }
    .bank-opt-row:focus-within {
      background: #ffffff;
      border-color: #0284c7;
    }
    .bank-opt-row.is-correct {
      background: #f0fdf4;
      border-color: #86efac;
    }
    .bank-opt-radio {
      cursor: pointer;
      width: 15px;
      height: 15px;
      accent-color: #16a34a;
    }
    .bank-opt-letter {
      font-size: 0.78rem;
      font-weight: 850;
      color: #64748b;
      min-width: 16px;
    }
    .bank-opt-row.is-correct .bank-opt-letter {
      color: #15803d;
    }
    .bank-opt-input {
      flex: 1;
      border: none;
      outline: none;
      background: transparent;
      font-family: inherit;
      font-size: 0.82rem;
      font-weight: 650;
      color: #0f172a;
    }
    .bank-editor-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 4px;
      padding-top: 6px;
      border-top: 1.5px solid #f1f5f9;
    }

    /* RIGHT PANE: DANH SÁCH CÂU HỎI */
    .bank-cards-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      overflow-y: auto;
      overflow-x: hidden;
      padding-right: 6px;
    }
    .bank-list-item {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 14px;
      cursor: pointer;
      transition: all 0.15s ease;
      display: flex;
      flex-direction: column;
      gap: 6px;
      border-left: 4px solid transparent;
      position: relative;
    }
    .bank-list-item:hover {
      border-color: #94a3b8;
      background: #f8fafc;
      transform: translateX(2px);
    }
    .bank-list-item.selected {
      background: #f0fdf4;
      border-color: #10b981;
      border-left: 4px solid #059669;
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.12);
    }
    .bank-item-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.76rem;
      color: #64748b;
      font-weight: 800;
    }
    .bank-item-title {
      font-size: 0.9rem;
      font-weight: 750;
      color: #0f172a;
      line-height: 1.4;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .bank-item-correct {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 0.74rem;
      font-weight: 750;
      color: #047857;
      background: #dcfce7;
      padding: 2px 8px;
      border-radius: 5px;
      border: 1px solid #86efac;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* CARD ACTION BUTTONS (LEGACY / SHARED) */
    .bank-card-action-btn {
      font-size: 0.8rem;
      font-weight: 800;
      padding: 6px 12px;
      border-radius: 8px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #334155;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.15s ease;
    }
    .bank-card-action-btn:hover {
      background: #f1f5f9;
      color: #0284c7;
      border-color: #94a3b8;
    }
    .bank-card-action-btn.edit-save-btn {
      background: #059669;
      color: #ffffff;
      border-color: #059669;
    }
    .bank-card-action-btn.edit-save-btn:hover {
      background: #047857;
    }

    /* SCOPE BOX (HARMONIZED & BREATHABLE) */
    .studio-scope-bar {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 16px;
      padding: 12px 18px;
      margin-bottom: 14px;
      box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02);
    }
    .studio-scope-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      flex-wrap: wrap;
      gap: 10px;
    }
    .studio-scope-title {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .studio-scope-icon-wrap {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: #e0f2fe;
      color: #0284c7;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.05rem;
      flex-shrink: 0;
    }
    .studio-scope-main-title {
      font-size: 0.94rem;
      font-weight: 900;
      color: #0f172a;
      letter-spacing: -0.2px;
    }
    .studio-scope-sub-title {
      display: none !important;
    }
    .studio-scope-pill-summary {
      font-size: 0.82rem;
      font-weight: 850;
      color: #065f46;
      background: #ecfdf5;
      padding: 5px 14px;
      border-radius: 9999px;
      border: 1.5px solid #a7f3d0;
      box-shadow: 0 2px 6px rgba(16, 185, 129, 0.1);
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .studio-scope-controls-row {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
    }
    .studio-scope-presets {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .studio-scope-btn {
      height: 36px;
      padding: 0 14px;
      border-radius: 8px;
      font-size: 0.84rem;
      font-weight: 850;
      border: 1.5px solid #cbd5e1;
      background: #ffffff;
      color: #334155;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.15s ease;
    }
    .studio-scope-btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
      color: #0f172a;
    }
    .studio-scope-btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 3px 10px rgba(2, 132, 199, 0.28);
    }
    .studio-scope-range-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 10px;
      padding: 3px 10px;
      flex-wrap: wrap;
    }
    .studio-range-label {
      font-size: 0.82rem;
      font-weight: 850;
      color: #0f172a;
    }
    .studio-range-pickers {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .studio-range-text {
      font-size: 0.8rem;
      font-weight: 800;
      color: #64748b;
    }
    .studio-range-select {
      height: 32px;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      font-size: 0.84rem;
      font-weight: 800;
      color: #0f172a;
      background: #f8fafc;
      padding: 0 8px;
      cursor: pointer;
      outline: none;
    }
    .studio-range-select:focus {
      border-color: #0284c7;
      background: #ffffff;
    }
    .studio-drawer-toggle-btn {
      height: 32px;
      padding: 0 12px;
      border-radius: 8px;
      border: 1.5px solid #cbd5e1;
      background: #f1f5f9;
      font-size: 0.82rem;
      font-weight: 850;
      color: #334155;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .studio-drawer-toggle-btn:hover {
      background: #e2e8f0;
      color: #0f172a;
    }
    .studio-lesson-drawer {
      margin-top: 12px;
      padding-top: 10px;
      border-top: 1.5px dashed #cbd5e1;
      max-height: 160px;
      overflow-y: auto;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
      gap: 8px;
      padding-right: 4px;
    }

    /* BENTO PUBLISH SECTION */
    /* BENTO PUBLISH SECTION (STREAMLINED & ZERO OVERFLOW) */
    .studio-export-headline {
      display: none !important;
    }
    .studio-bento-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      margin-bottom: 2px;
    }
    @media (max-width: 768px) {
      .studio-bento-grid {
        grid-template-columns: 1fr;
      }
    }
    .bento-publish-card {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 18px;
      padding: 16px 20px;
      box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 250px;
      box-sizing: border-box;
      transition: border-color 0.18s ease, box-shadow 0.18s ease;
    }
    .bento-publish-card:hover {
      border-color: #cbd5e1;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
    }
    .bento-card-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 8px;
    }
    .bento-icon-badge {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1.15rem;
      flex-shrink: 0;
    }
    .bento-icon-print {
      background: #f1f5f9;
      color: #334155;
    }
    .bento-icon-student {
      background: #fee2e2;
      color: #dc2626;
    }
    .bento-card-title {
      font-size: 1.06rem;
      font-weight: 900;
      color: #0f172a;
      margin: 0;
      letter-spacing: -0.2px;
    }
    .bento-card-badge {
      font-size: 0.7rem;
      font-weight: 850;
      padding: 2px 8px;
      border-radius: 6px;
      background: #f1f5f9;
      color: #475569;
      border: 1px solid #e2e8f0;
      display: inline-block;
      margin-top: 2px;
    }
    .bento-badge-student {
      background: #ecfdf5;
      color: #059669;
      border-color: #a7f3d0;
    }
    .bento-card-desc {
      display: none !important;
    }
    .bento-form-row {
      margin-top: 6px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .bento-form-label {
      font-size: 0.82rem;
      font-weight: 800;
      color: #334155;
      margin-bottom: 0;
      min-width: 90px;
      display: block;
    }
    .bento-select, .bento-input {
      width: 100%;
      height: 34px;
      border-radius: 8px;
      border: 1.5px solid #cbd5e1;
      padding: 0 10px;
      font-size: 0.82rem;
      font-weight: 750;
      color: #0f172a;
      background: #f8fafc;
      outline: none;
      box-sizing: border-box;
      transition: border-color 0.15s ease, background 0.15s ease;
    }
    .bento-select:focus, .bento-input:focus {
      border-color: #0284c7;
      background: #ffffff;
      box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12);
    }
    .bento-input-unit-wrap {
      position: relative;
      display: flex;
      align-items: center;
      flex: 1;
    }
    .bento-unit-label {
      position: absolute;
      right: 10px;
      font-size: 0.76rem;
      font-weight: 700;
      color: #64748b;
      pointer-events: none;
    }
    .bento-action-btns-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 10px;
    }
    .btn-bento-print {
      height: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      border-radius: 8px;
      font-size: 0.82rem;
      font-weight: 850;
      cursor: pointer;
      border: none;
      transition: all 0.16s ease;
      box-sizing: border-box;
    }
    .btn-bento-print.btn-print-sheet {
      background: #ea580c;
      color: #ffffff;
      box-shadow: 0 3px 8px rgba(234, 88, 12, 0.25);
    }
    .btn-bento-print.btn-print-sheet:hover {
      background: #c2410c;
      transform: translateY(-1px);
    }
    .btn-bento-print.btn-print-answers {
      background: #4f46e5;
      color: #ffffff;
      box-shadow: 0 3px 8px rgba(79, 70, 229, 0.25);
    }
    .btn-bento-print.btn-print-answers:hover {
      background: #4338ca;
      transform: translateY(-1px);
    }
    .btn-bento-print.btn-print-print {
      background: #0284c7;
      color: #ffffff;
      box-shadow: 0 3px 8px rgba(2, 132, 199, 0.25);
    }
    .btn-bento-print.btn-print-print:hover {
      background: #0369a1;
      transform: translateY(-1px);
    }
    .btn-bento-print.btn-print-refresh {
      background: #f8fafc;
      color: #334155;
      border: 1.5px solid #cbd5e1;
    }
    .btn-bento-print.btn-print-refresh:hover {
      background: #e2e8f0;
      color: #0f172a;
    }
    .bento-mini-features {
      margin: 8px 0 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 14px;
    }
    .bento-feature-item {
      font-size: 0.82rem;
      line-height: 1.45;
      color: #334155;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .bento-scope-summary-line {
      display: none !important;
    }
    .bento-export-action-wrap {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 10px;
    }
    .btn-bento-export-student {
      width: 100%;
      height: 40px;
      border-radius: 8px;
      background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
      color: #ffffff;
      border: none;
      font-size: 0.88rem;
      font-weight: 900;
      cursor: pointer;
      box-shadow: 0 3px 10px rgba(245, 158, 11, 0.25);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.16s ease;
    }
    .btn-bento-export-student:hover {
      background: linear-gradient(135deg, #fbbf24 0%, #b45309 100%);
      transform: translateY(-1px);
    }
    .btn-bento-export-student:active {
      transform: translateY(1px);
    }
    .btn-bento-export-student.btn-copy-link {
      background: #0284c7;
      border-color: #0369a1;
      box-shadow: 0 3px 10px rgba(2, 132, 199, 0.25);
    }
    .btn-bento-export-student.btn-copy-link:hover {
      background: #0369a1;
      transform: translateY(-1px);
    }
    .bento-export-hint {
      display: none !important;
    }

    /* SCREEN-MAP MILD ATMOSPHERIC VEIL ENHANCEMENT */
    #screen-map::before {
      background: rgba(15, 23, 42, 0.28) !important;
      backdrop-filter: blur(2px) !important;
      -webkit-backdrop-filter: blur(2px) !important;
    }

    /* DEDICATED A4 PRINT SHEET (HIDDEN ON SCREEN, ACTIVE IN PRINT) */
    #printable-exam-sheet {
      display: none;
    }
    .exercise-export-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .exercise-export-actions button:disabled { opacity: .6; cursor: wait; }
    .exercise-export-status { color: #475569; font-size: .75rem; line-height: 1.4; overflow-wrap: anywhere; }
    .studio-save-status { color: #475569; font-size: .78rem; line-height: 1.45; overflow-wrap: anywhere; margin: 6px 0; }

    /* Print Formats A4 - 100% Chuẩn Sư Phạm Trắc Nghiệm Như Ảnh 3 */
    @media print {
      @page {
        size: A4 portrait;
        margin: 15mm 15mm 15mm 15mm;
      }
      *, *::before, *::after {
        box-shadow: none !important;
        text-shadow: none !important;
      }
      html, body {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        display: block !important;
        position: static !important;
        background: #ffffff !important;
        color: #000000 !important;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 11pt !important;
        line-height: 1.4 !important;
      }
      body > :not(#printable-exam-sheet) { display: none !important; }
      /* Hide all web interface components */
      #ambient-backdrop,
      #game-stage,
      .modal-backdrop,
      .bottom-status-floating-pill,
      .pacer-hud-pill,
      .thm-top-bar,
      .thm-footer-bar {
        display: none !important;
      }
      /* Display exclusively the printable exam sheet */
      #printable-exam-sheet {
        display: block !important;
        width: 100% !important;
        background: #ffffff !important;
        color: #000000 !important;
        padding: 0 !important;
        margin: 0 !important;
      }
      .a4-exam-sheet {
        width: 100% !important;
        max-width: 100% !important;
      }
      .a4-exam-header {
        text-align: center !important;
        margin-bottom: 8px !important;
      }
      .a4-title {
        font-size: 15pt !important;
        font-weight: 800 !important;
        color: #0f172a !important;
        margin: 0 0 4px !important;
        letter-spacing: 0.3px !important;
      }
      .a4-meta {
        font-size: 9.5pt !important;
        color: #334155 !important;
        margin-bottom: 8px !important;
      }
      .a4-student-info {
        display: flex !important;
        justify-content: space-between !important;
        font-size: 9.5pt !important;
        color: #0f172a !important;
        padding: 4px 0 !important;
      }
      .a4-header-line {
        border-bottom: 1.5px solid #0f172a !important;
        margin: 6px 0 14px 0 !important;
      }
      .a4-questions-list {
        display: block !important;
      }
      .a4-question-item {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        margin-bottom: 14px !important;
        overflow-wrap: anywhere;
      }
      .a4-question-prompt {
        font-size: 10.5pt !important;
        font-weight: 600 !important;
        color: #0f172a !important;
        margin-bottom: 4px !important;
        line-height: 1.35 !important;
      }
      .a4-options-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 3px 20px !important;
        font-size: 10pt !important;
        color: #1e293b !important;
        padding-left: 14px !important;
      }
      .a4-opt-item {
        line-height: 1.35 !important;
      }
      .a4-opt-letter {
        font-weight: 700 !important;
        margin-right: 4px !important;
      }
      .a4-page-break {
        page-break-before: always !important;
        break-before: page !important;
        height: 0 !important;
      }
      .a4-answers-page {
        break-before: page !important;
        page-break-before: always !important;
        padding-top: 10px !important;
      }
      .a4-options-table, .a4-answers-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
      .a4-question-prompt, .a4-options-table td { white-space: pre-line; }
      .a4-options-table td { width: 50%; padding: 2px 8px 2px 12px; vertical-align: top; font-size: 10pt; overflow-wrap: anywhere; }
      .a4-answers-table tr { break-inside: avoid; }
      .a4-answers-table td { border-bottom: 1px solid #ddd; padding: 5px; overflow-wrap: anywhere; }
      .a4-answers-table td:first-child { width: 22%; }
      .a4-answer-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px 12px !important;
        font-size: 9.5pt !important;
      }
      .a4-ans-cell {
        border: 1px solid #cbd5e1 !important;
        padding: 4px 8px !important;
        border-radius: 4px !important;
        background: #f8fafc !important;
      }
      .a4-ans-val {
        color: #b91c1c !important;
        font-weight: 800 !important;
      }
    }
    #screen-intro:not(.active) { display: none; }
    :focus-visible { outline: 3px solid #075985 !important; outline-offset: 3px; }
    .inv-tab-pill.active { background: #047857; }
    .inv-tile-cell.locked > div { opacity: 1 !important; }
    .inv-tile-cell.locked span { color: #475569 !important; }
    /* Smart Proportional Scaling on compact / low-height viewports (height <= 640px) */
    @media screen and (max-height: 640px) {
      .home-companion-area .character-standing-sprite,
      .home-companion-area .character-standing-sprite.char-ren {
        height: clamp(245px, 42vh, 270px);
      }
      .home-companion-area .character-standing-sprite.char-kai {
        height: clamp(250px, 43vh, 275px);
      }
      .home-companion-area .char-speech-bubble {
        font-size: 0.78rem;
        padding: 4px 10px;
        line-height: 1.25;
        margin-bottom: 2px;
        max-width: 220px;
      }
      .home-companion-area {
        width: clamp(230px, 24vw, 300px);
        gap: 2px;
        transform: translateY(18px);
      }
      .home-companion-area .companion-mini-profile-card {
        padding: 4px 12px;
        font-size: 0.75rem;
      }
      .home-terminal-card {
        width: clamp(320px, 28vw, 360px);
        padding: 14px 16px 12px;
        gap: 8px;
        border-radius: 18px;
      }
      .home-terminal-title {
        font-size: 1.35rem;
      }
      .home-terminal-desc {
        font-size: 0.8rem;
      }
      .home-rpg-menu-stack {
        gap: 6px;
      }
      .btn-rpg-menu-hero {
        height: 42px;
      }
      .btn-rpg-menu-card {
        height: 38px;
      }
    }

    /* Small desktop windows still contain a 16:9 stage. Keep every realm
       action reachable rather than clipping the cards below that stage. */
    @media screen and (max-width: 1000px), screen and (max-height: 640px) {
      html:not(.device-layout) .map-main-stage { overflow-y: auto; justify-content: flex-start; }
      html:not(.device-layout) .map-main-stage > * { flex-shrink: 0; }
      html:not(.device-layout) .modal-dialog { max-height: calc(100% - 16px) !important; min-height: 0; overflow-y: auto; }
      html:not(.device-layout) .scope-content-scroll { display: block; flex: 1; min-height: 0; overflow-y: auto; }
      html:not(.device-layout) .lesson-modal-top-bar,
      html:not(.device-layout) .scope-dialog-actions { flex-shrink: 0; }
      html:not(.device-layout) .inv-inspector-pane { display: block; min-height: 0; overflow-y: auto; }
      html:not(.device-layout) .companion-ground-wrapper,
      html:not(.device-layout) .bottom-status-floating-pill { display: none; }
      html:not(.device-layout) .gameplay-main-stage { align-items: stretch; overflow: hidden; }
      html:not(.device-layout) .question-column-wrapper { min-height: 0; align-self: stretch; justify-content: center; }
      html:not(.device-layout) .gameplay-stage-mission-bar { flex-shrink: 0; }
      html:not(.device-layout) .question-hero-card { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; overflow: hidden; }
      html:not(.device-layout) .question-scroll-body { display: block; flex: 0 1 auto; min-height: 0; overflow-y: auto; }
      html:not(.device-layout) .card-bottom-actions-row { flex-shrink: 0; }
      html:not(.device-layout) #modal-game-over .modal-dialog { display: block; }
      html:not(.device-layout) .explanation-inside-card.active { max-height: 96px; overflow-y: auto; flex-shrink: 0; }
      html:not(.device-layout) .result-main-stage { display: block; overflow-y: auto; min-height: 0; }
      html:not(.device-layout) .result-main-stage .home-companion-area { display: none; }
    }

    /* Smart Compact Top Bar on narrow viewports (width <= 900px) */
    @media screen and (max-width: 900px) {
      .top-center-subtitle {
        font-size: 0.88rem;
      }
      .brand-title-badge {
        font-size: 0.95rem;
        gap: 6px;
      }
      .thm-top-bar {
        padding: 5px 14px;
        margin: 6px 14px 0;
        gap: 10px;
      }
    }

    /* Preserving Master 16:9 Canvas: Phone styles are handled cleanly by .phone-layout */
    @media screen and (max-width: 480px) {
      .hero-options-grid, .journey-realms-grid { grid-template-columns: 1fr; }
      .result-actions-row, .inv-tabs-row { flex-wrap: wrap; }
      .studio-modal-dialog [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
      .studio-modal-dialog input, .studio-modal-dialog select { min-width: 0 !important; max-width: 100%; }
      .question-statement-text { overflow-wrap: anywhere; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    }

    /* Desktop keeps its original flow; phones use explicit scroll regions. */
    .question-scroll-body, .scope-content-scroll { display: contents; }
    #phoneRotateNotice[hidden] { display: none !important; }
    #phoneRotateNotice {
      position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center;
      padding: 24px; background: #0f172a; color: #f8fafc; overflow-y: auto;
    }
    .phone-rotate-card { max-width: 360px; text-align: center; }
    .phone-rotate-icon { font-size: 56px; margin-bottom: 20px; }
    .phone-rotate-card h1 { font-size: 26px; margin-bottom: 16px; }
    .phone-rotate-card p { line-height: 1.6; font-size: 17px; margin-bottom: 16px; }
    .phone-rotate-card .phone-rotate-help { color: #cbd5e1; font-size: 15px; }
    #phoneRotateProgress { color: #a7f3d0; font-size: 14px; }

    html.phone-layout {
      --phone-safe-top: env(safe-area-inset-top, 0px);
      --phone-safe-right: env(safe-area-inset-right, 0px);
      --phone-safe-bottom: env(safe-area-inset-bottom, 0px);
      --phone-safe-left: env(safe-area-inset-left, 0px);
      --phone-screen-height: calc(100dvh - var(--phone-safe-top) - var(--phone-safe-bottom));
      width: 100%; height: 100%; overflow: hidden;
    }
    .phone-layout body { width: 100%; height: 100%; min-height: 0; overflow: hidden; display: block; }
    .phone-layout #game-stage {
      width: 100%; height: 100vh; height: 100dvh; min-height: 0; max-width: none;
      max-height: none; aspect-ratio: auto; border-radius: 0; overflow: hidden;
    }
    .phone-layout #game-stage .game-screen.active {
      position: absolute; inset: var(--phone-safe-top) var(--phone-safe-right) var(--phone-safe-bottom) var(--phone-safe-left);
      width: auto; height: auto; min-height: 0; overflow: hidden; justify-content: flex-start;
    }
    .phone-layout .thm-top-bar {
      margin: 4px 8px; padding: 0 6px; gap: 8px; min-height: 44px; flex-wrap: nowrap;
      border-radius: 10px; backdrop-filter: none;
    }
    .phone-layout .thm-top-bar .brand-title-badge,
    .phone-layout .thm-footer-bar { display: none !important; }
    .phone-layout .top-center-subtitle { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
    .phone-layout .top-actions-group { flex-shrink: 0; gap: 4px; }
    .phone-layout button, .phone-layout [role="button"] { touch-action: manipulation; }
    .phone-layout button, .phone-layout [role="button"] { min-height: 44px; }
    .phone-layout .top-icon-btn { width: 44px; height: 44px; }
    .phone-layout.fullscreen-unavailable button[onclick*="toggleFullscreen"] { display: none; }
    .phone-layout #ambient-backdrop { display: none; }
    .phone-layout .character-standing-sprite { animation: none; }
    .phone-layout .home-main-stage {
      flex-direction: row; align-items: center; justify-content: center; padding: 4px 12px 8px;
      gap: 16px; min-height: 0; overflow-y: auto;
    }
    .phone-layout .home-companion-area { width: 120px; min-width: 120px; height: auto; align-self: flex-end; margin-bottom: 4px; }
    .phone-layout .home-companion-area .character-standing-sprite { height: 130px !important; max-height: 130px; max-width: 120px; }
    .phone-layout .home-companion-area .char-speech-bubble { display: none; }
    .phone-layout .home-terminal-card { width: auto; flex: 1; max-width: 650px; min-width: 0; padding: 12px; gap: 8px; }
    .phone-layout .home-terminal-header { padding: 0; }
    .phone-layout .home-terminal-title { font-size: 22px; line-height: 1.2; margin: 4px 0; }
    .phone-layout .home-terminal-desc { font-size: 14px; }
    .phone-layout .home-terminal-badge { font-size: 11px; padding: 3px 8px; }
    .phone-layout .home-rpg-menu-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .phone-layout .btn-rpg-menu-hero, .phone-layout .btn-rpg-menu-card { padding: 6px 10px; min-height: 44px; font-size: 15px; }
    .phone-layout .rpg-icon-badge { width: 26px; height: 26px; font-size: 16px; }
    .phone-layout #screen-intro { padding: 8px; gap: 4px; }
    .phone-layout .intro-brand-stamp { font-size: 11px; padding: 4px 12px; margin: 0; }
    .phone-layout .bubble-sticker-wrapper { max-width: calc(100% - 32px); flex-shrink: 1; min-height: 0; }
    .phone-layout .bubble-sticker-svg { width: min(58vw, 420px); max-height: 36dvh; }
    .phone-layout .intro-logo-artwork { width: auto; max-width: min(70vw, 500px); height: 54dvh; max-height: 100%; }
    .phone-layout .tagline-scroll-banner { max-width: 100%; }
    .phone-layout .scroll-banner-pill { padding: 3px 16px; }
    .phone-layout .scroll-banner-text { font-size: 17px; line-height: 1.2; }
    .phone-layout .intro-launch-stage { margin: 4px 0; }
    .phone-layout .map-main-stage { justify-content: flex-start; padding: 2px 8px 8px; gap: 6px; min-height: 0; overflow-y: auto; }
    .phone-layout .map-header-banner { display: none; }
    .phone-layout .journey-preflight { padding: 6px 10px; gap: 4px; flex-shrink: 0; border-radius: 10px; backdrop-filter: none; }
    .phone-layout .preflight-main-row, .phone-layout .preflight-scope-cluster { gap: 6px; }
    /* The scope badge already opens the same settings; avoid a duplicate CTA. */
    .phone-layout .preflight-btn-group button[onclick="openLessonScopeModal()"] { display: none !important; }
    .phone-layout .preflight-scope-badge::after { content: '⚙️'; }
    .phone-layout .preflight-scope-badge .scope-name { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .phone-layout .preflight-tip-row { display: none; }
    .phone-layout .journey-realms-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; flex-shrink: 0; }
    .phone-layout .realm-card { min-width: 0; backdrop-filter: none; }
    .phone-layout .realm-card:hover, .phone-layout .realm-card:focus-within { transform: none; }
    .phone-layout .realm-art-banner { height: 48px; padding: 4px; }
    .phone-layout .realm-difficulty-tag { font-size: 12px; padding: 3px 8px; }
    .phone-layout .realm-content { padding: 6px; gap: 6px; }
    .phone-layout .realm-title { font-size: 17px; }
    .phone-layout .realm-meta-row { padding: 4px; gap: 6px; flex-wrap: wrap; font-size: 12px; }
    .phone-layout .realm-loadout-chip { padding: 4px; min-height: 30px; font-size: 12px; }
    .phone-layout .btn-realm-cta { padding: 6px; font-size: 13px; width: 100%; white-space: normal; }
    .phone-layout .gameplay-main-stage { display: flex; padding: 6px clamp(20px, 4vw, 40px) 14px; align-items: stretch; min-height: 0; overflow: hidden; }
    .phone-layout .companion-ground-wrapper, .phone-layout .bottom-status-floating-pill { display: none; }
    .phone-layout .question-column-wrapper { display: flex; width: 100%; max-width: 880px; min-height: 0; margin: 0 auto; align-self: stretch; justify-content: center; }
    .phone-layout .gameplay-stage-mission-bar { flex-shrink: 0; flex-wrap: nowrap; padding: 4px 8px; margin: 0 0 4px; gap: 8px; min-height: 34px; backdrop-filter: none; }
    .phone-layout .gp-hud-left, .phone-layout .gp-hud-center, .phone-layout .gp-hud-right { gap: 6px; flex-wrap: nowrap; }
    .phone-layout .gp-diff-badge { padding: 3px 8px; font-size: 13px; min-width: 0; }
    .phone-layout .gp-timer-pill, .phone-layout .gp-bonus-pill { padding: 3px 8px; font-size: 14px; }
    .phone-layout .gp-progress-bar-track { width: 80px; height: 4px; }
    .phone-layout .gp-progress-info { min-width: 0; gap: 2px; }
    /* Fit short questions to their content; shrink only the reading area on long ones. */
    .phone-layout .question-hero-card { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; padding: 10px 14px; border-radius: 14px; backdrop-filter: none; overflow: hidden; }
    .phone-layout .question-scroll-body { display: block; flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
    .phone-layout .question-statement-box { min-height: 38px; margin: 0 0 8px; padding: 2px 0 2px 10px; }
    .phone-layout .question-statement-text { font-size: clamp(24px, calc(var(--q-font-size) * 1.12), 36px); line-height: 1.3; overflow-wrap: anywhere; }
    .phone-layout .hero-options-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 4px; }
    .phone-layout .hero-option-btn { padding: 8px 10px; gap: 10px; min-height: clamp(48px, 14dvh, 60px); }
    .phone-layout .opt-sentence-text { font-size: clamp(20px, calc(var(--a-font-size) * 1.3), 30px); line-height: 1.3; overflow-wrap: anywhere; min-width: 0; }
    .phone-layout .opt-letter-box { width: 28px; height: 28px; font-size: 15px; }
    .phone-layout .card-bottom-actions-row { order: 3; flex-shrink: 0; flex-direction: row; align-items: center; gap: 8px; padding-top: 8px; }
    .phone-layout .lifelines-group { flex-wrap: nowrap; gap: 6px; overflow-x: auto; }
    .phone-layout .btn-lifeline { padding: 6px 8px; font-size: 13px; }
    .phone-layout #btnCardAction { flex-shrink: 0; min-width: 160px; font-size: 15px; padding: 6px 12px; }
    .phone-layout .explanation-inside-card.active { order: 2; max-height: min(24dvh, 96px); flex-shrink: 0; overflow-y: auto; margin: 4px 0 0; padding: 6px 8px; }
    .phone-layout #gameplayEquippedBuffs { display: none !important; }
    .phone-layout .result-main-stage { display: block; padding: 8px 12px; overflow-y: auto; min-height: 0; }
    .phone-layout .result-main-stage .home-companion-area { display: none; }
    .phone-layout .result-hero-card { width: 100%; max-width: none; padding: 10px 12px; }
    .phone-layout .result-hero-card > div:first-child img { width: 40px !important; height: 40px !important; animation: none; }
    .phone-layout .result-title { font-size: 22px; }
    .phone-layout .result-rank-badge { margin-bottom: 4px; }
    .phone-layout .result-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 6px 0; }
    .phone-layout .result-stat-card { padding: 6px; }
    .phone-layout .result-actions-row { flex-wrap: wrap; gap: 6px; }
    .phone-layout .modal-backdrop {
      position: fixed; inset: 0; padding: calc(var(--phone-safe-top) + 6px) calc(var(--phone-safe-right) + 8px) calc(var(--phone-safe-bottom) + 6px) calc(var(--phone-safe-left) + 8px);
      backdrop-filter: none; background: rgba(15,23,42,.88);
    }
    .phone-layout .modal-dialog {
      width: 100% !important; max-width: 900px !important; max-height: calc(var(--phone-screen-height) - 12px) !important;
      min-height: 0; padding: 0 !important; border-radius: 14px !important; overflow-y: auto;
    }
    .phone-layout .modal-header, .phone-layout .modal-footer { padding: 6px 12px !important; flex-shrink: 0; }
    .phone-layout .modal-body { padding: 8px 12px !important; min-height: 0; flex: 1 1 auto; overflow-y: auto; }
    .phone-layout .lessons-dialog-shell { height: calc(var(--phone-screen-height) - 12px); gap: 4px; padding: 6px 12px !important; overflow: hidden !important; }
    .phone-layout .lesson-modal-top-bar { flex-shrink: 0; padding-bottom: 4px !important; }
    .phone-layout .lesson-showcase-title { font-size: 16px !important; }
    .phone-layout .lesson-brand-pill { font-size: 11px; }
    .phone-layout .scope-content-scroll { display: block; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
    .phone-layout .scope-dialog-actions { flex-shrink: 0; padding-top: 4px !important; margin-top: 0 !important; }
    .phone-layout .scope-grid-scroll-full { max-height: none !important; overflow: visible !important; }
    .phone-layout .scope-pill-btn { font-size: 14px; min-width: 44px; }
    .phone-layout .inventory-dialog-shell { height: calc(var(--phone-screen-height) - 12px) !important; padding: 6px 12px !important; gap: 4px; overflow: hidden !important; }
    .phone-layout .inv-top-nav-bar, .phone-layout .inv-tabs-row { height: 44px; min-height: 44px; flex-shrink: 0; gap: 6px; }
    .phone-layout .inv-tab-pill, .phone-layout .inv-nav-pill-btn { height: 44px; padding: 6px 12px; font-size: 14px; }
    .phone-layout .inv-ticket-summary-bar { height: 44px; min-height: 44px; padding: 4px 8px; }
    .phone-layout .inv-body-split { grid-template-columns: 1fr 1fr; height: auto; flex: 1; min-height: 0; overflow: hidden; gap: 8px; }
    .phone-layout .inv-tiles-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); overflow-y: auto; gap: 6px; }
    .phone-layout .inv-tile-cell { min-height: 106px; }
    .phone-layout .inv-inspector-pane { display: block; min-height: 0; overflow-y: auto; padding: 8px; }
    .phone-layout .inv-inspector-pane > * { margin-bottom: 6px; }
    .phone-layout .inv-hero-art-wrapper { width: 48px; height: 48px; min-height: 48px; margin: 0 auto 6px; }
    .phone-layout .inv-specs-panel { padding: 6px 8px; }
    .phone-layout .inv-equipped-slots-strip { flex-wrap: wrap; }
    .phone-layout #modal-pause .modal-dialog {
      max-width: min(420px, 94vw) !important;
      min-height: 0 !important;
      max-height: calc(var(--phone-screen-height) - 16px) !important;
      padding: 16px 20px 14px !important;
      border-radius: 24px !important;
      overflow-y: auto !important;
    }
    .phone-layout .pause-sparkle-badge-wrap { margin-bottom: 2px !important; transform: scale(0.88); }
    .phone-layout .pause-title { font-size: 1.6rem !important; margin: 2px 0 2px 0 !important; }
    .phone-layout .pause-subtitle { font-size: 0.88rem !important; margin: 0 0 10px 0 !important; }
    .phone-layout .pause-hero-resume-btn { height: 48px !important; min-height: 48px !important; font-size: 1.1rem !important; margin-bottom: 10px !important; border-radius: 16px !important; }
    .phone-layout .pause-secondary-row { gap: 10px !important; }
    .phone-layout .pause-pill-btn { height: 46px !important; min-height: 46px !important; font-size: 0.92rem !important; border-radius: 14px !important; }
    .phone-layout .pause-close-btn { width: 44px !important; min-width: 44px !important; height: 44px !important; top: 8px !important; right: 8px !important; }
    .phone-layout .pause-header-badge { width: 44px !important; height: 44px !important; margin-bottom: 6px !important; }
    .phone-layout .pause-circle-btn { width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; }
    .phone-layout #modal-game-over .modal-dialog { max-width: 600px !important; padding: 10px 16px !important; }
    .phone-layout #journeyNotice { top: calc(var(--phone-safe-top) + 4px); max-width: 80%; font-size: 13px; border-radius: 10px; }

    .compact-gameplay .companion-ground-wrapper { display: none; }
    .device-layout .companion-ground-wrapper .character-standing-sprite {
      max-width: 100%; object-fit: contain; object-position: center bottom;
    }

    /* Touch devices contain the game in a safe 16:9 frame. Never scale the
       whole DOM: text and touch targets keep their readable, usable sizes. */
    html.device-layout {
      --phone-safe-top: env(safe-area-inset-top, 0px);
      --phone-safe-right: env(safe-area-inset-right, 0px);
      --phone-safe-bottom: env(safe-area-inset-bottom, 0px);
      --phone-safe-left: env(safe-area-inset-left, 0px);
      --device-gutter: clamp(8px, 1.5vmin, 20px);
      --device-available-width: calc(100vw - var(--phone-safe-left) - var(--phone-safe-right) - 2 * var(--device-gutter));
      --device-available-height: calc(100dvh - var(--phone-safe-top) - var(--phone-safe-bottom) - 2 * var(--device-gutter));
      --device-stage-width: min(var(--device-available-width), calc(var(--device-available-height) * 16 / 9));
      --device-stage-height: calc(var(--device-stage-width) * 9 / 16);
      --phone-screen-height: var(--device-stage-height);
      display: block; width: 100%; height: 100dvh; min-height: 0; overflow: clip;
    }
    .device-layout body {
      width: 100%; height: 100%; min-height: 0; overflow: clip; contain: paint;
      display: flex; align-items: center; justify-content: center;
      padding: calc(var(--phone-safe-top) + var(--device-gutter)) calc(var(--phone-safe-right) + var(--device-gutter)) calc(var(--phone-safe-bottom) + var(--device-gutter)) calc(var(--phone-safe-left) + var(--device-gutter));
    }
    .device-layout #game-stage {
      width: var(--device-stage-width); height: var(--device-stage-height);
      min-height: 0; max-width: none; max-height: none; flex-shrink: 0;
      aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden;
    }
    .device-layout #game-stage .game-screen.active {
      position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; overflow: hidden;
    }
    .device-layout .thm-top-bar { flex-wrap: nowrap; min-width: 0; }
    .device-layout .brand-title-badge { white-space: nowrap; flex-shrink: 0; }
    .device-layout .top-center-subtitle { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .device-layout .top-actions-group { flex-shrink: 0; }
    .device-layout button, .device-layout [role="button"] { min-height: 44px; touch-action: manipulation; }
    .device-layout .top-icon-btn { width: 44px; height: 44px; }
    .device-layout .btn-3d-bubble { animation: none; }
    .device-layout .hero-option-btn:hover:not(:disabled) { transform: none; }
    .device-layout .home-main-stage { align-items: flex-start; overflow-y: auto; }
    .device-layout .home-main-stage > * { margin-block: auto; }
    .device-layout .modal-backdrop { position: absolute; inset: 0; padding: 8px; }
    .device-layout .modal-dialog { max-height: calc(var(--device-stage-height) - 16px) !important; min-height: 0; }
    .device-layout .lessons-dialog-shell,
    .device-layout .inventory-dialog-shell { height: calc(var(--device-stage-height) - 16px) !important; }
    .device-layout #journeyNotice { top: 8px; }
    .mission-training-note { font-size: 13px; line-height: 1.5; color: #475569; margin: 8px 0; }
    .phone-layout .intro-logo-artwork { height: calc(var(--phone-screen-height) * .5); }
    .phone-layout .bubble-sticker-svg { max-height: calc(var(--phone-screen-height) * .34); }
    .phone-layout .hero-option-btn { min-height: clamp(48px, calc(var(--phone-screen-height) * .14), 60px); }
    .phone-layout .explanation-inside-card.active { max-height: min(calc(var(--phone-screen-height) * .24), 96px); }
    .phone-layout .companion-mini-profile-card { max-width: 100%; padding: 4px 6px; gap: 4px; }
    .phone-layout .companion-profile-info { gap: 4px; }
    .phone-layout .companion-badge-crest { width: 20px; height: 20px; }
    .tablet-layout.phone-layout .thm-top-bar .brand-title-badge { display: block !important; font-size: 16px; }
    .tablet-layout.phone-layout .home-main-stage { gap: 24px; padding: 12px 24px 20px; }
    .tablet-layout.phone-layout .home-companion-area { width: 30%; min-width: 160px; max-width: 320px; }
    .tablet-layout.phone-layout .home-companion-area .character-standing-sprite {
      height: clamp(150px, calc(var(--device-stage-height) * .52), 340px) !important;
      max-height: none; max-width: 100%;
    }
    .tablet-layout.phone-layout .home-terminal-card { max-width: 440px; padding: 16px; gap: 12px; }
    .tablet-layout.phone-layout .home-terminal-title { font-size: 28px; }
    .tablet-layout.phone-layout .home-rpg-menu-stack { grid-template-columns: 1fr; }