:root {
      /* ── Core palette ─────────────────────────────────────── */
      --bg:           #0a0e1a;
      --bg-deep:      #0b1329;
      --bg-panel:     #0e1525;
      --panel-bg:     rgba(12, 18, 40, 0.85);
      --panel-border: #3a5a8a;

      /* ── Gold (primary accent) ────────────────────────────── */
      --gold:         #ffd700;
      --gold-dark:    #b8860b;
      --gold-light:   #fcd34d;

      /* ── Blue scale ───────────────────────────────────────── */
      --blue-dark:    #2a4a7a;   /* borders, secondary frames  */
      --blue:         #60a5fa;   /* interactive elements       */
      --blue-light:   #93c5fd;   /* highlights                 */

      /* ── Purple scale (boss / epic) ──────────────────────── */
      --purple-dark:  #7c3aed;
      --purple:       #c084fc;
      --purple-light: #a78bfa;

      /* ── Semantic ─────────────────────────────────────────── */
      --txt:          #e8efff;
      --txt-dim:      #8a9cc0;
      --ok:           #34d399;
      --bad:          #fb7185;
      --overlay:      rgba(0, 0, 0, 0.75);

      /* ── Parchment / wood (tavern UI) ────────────────────── */
      --parchment:      #d4c4a0;
      --parchment-dark: #b8a67a;
      --wood-dark:      #2a1a0a;
      --wood-mid:       #4a3018;
      --wood-light:     #6a4828;

      /* ── Typography scale ─────────────────────────────────── */
      --text-2xs: 0.62rem;
      --text-xs:  0.72rem;
      --text-sm:  0.82rem;
      --text-base: 0.88rem;
      --text-md:  1rem;
      --text-lg:  1.2rem;
      --text-xl:  1.5rem;
      --text-2xl: 2rem;

      /* ── Spacing scale ────────────────────────────────────── */
      --space-1: 4px;
      --space-2: 8px;
      --space-3: 12px;
      --space-4: 16px;
      --space-5: 20px;
      --space-6: 24px;

      /* ── Border-radius scale ──────────────────────────────── */
      --radius-sm:   6px;
      --radius-md:   10px;
      --radius-lg:   14px;
      --radius-xl:   20px;
      --radius-full: 9999px;

      /* ── Z-index scale (centralizado — nunca use valores ad-hoc) ─ */
      --z-bg:           0;     /* .bg-layer, .bg-overlay, .particles */
      --z-app:          10;    /* .app principal */
      --z-dropdown:     100;   /* tooltips, dropdowns */
      --z-sticky:       200;   /* headers fixos */
      --z-overlay:      500;   /* overlays leves (study page) */
      --z-modal-low:    8000;  /* painel de pagamento, admin */
      --z-modal:        8500;  /* modals padrão */
      --z-modal-high:   9000;  /* confirmações, dialogs */
      --z-panel:        9500;  /* painéis flutuantes */
      --z-nav:          9600;  /* drawer mobile, navegação */
      --z-notify:       9800;  /* banners de notificação */
      --z-mentor:       9900;  /* identity overlay, mentor modal */
      --z-toast:        9950;  /* toasts e notificações */
      --z-critical:     9999;  /* overlays críticos */
      --z-top:          99999; /* máxima prioridade (toast UI, controls) */
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      color: var(--txt);
      font-family: 'Philosopher', 'Georgia', serif;
      background: var(--bg);
      overflow-x: hidden;
      position: relative;
    }
    /* Background Layer */
    .bg-layer {
      position: fixed; inset: 0; z-index: 0;
      background: url('assets/nefroquest_background.jpg') center/cover no-repeat;
      filter: brightness(0.55) saturate(1.2);
    }
    .bg-overlay {
      position: fixed; inset: 0; z-index: 1;
      background: radial-gradient(ellipse at center, transparent 30%, rgba(5,8,20,0.7) 100%);
    }
    /* Floating particles */
    @keyframes float { 0%,100%{transform:translateY(0) scale(1);opacity:0.3} 50%{transform:translateY(-30px) scale(1.3);opacity:0.7} }
    @keyframes fadeInUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
    @keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
    .particles { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
    .particle {
      position: absolute; width: 4px; height: 4px; border-radius: 50%;
      background: var(--gold); opacity: 0.3;
      animation: float 4s ease-in-out infinite;
      will-change: transform, opacity;
    }

    /* MAIN LAYOUT */
    .app {
      position: relative; z-index: var(--z-app);
      max-width: 1460px; margin: 0 auto; padding: 8px;
      display: grid; grid-template-columns: 380px 1fr 80px; gap: 8px;
      align-content: start;
      min-height: 100dvh; /* garante que o fundo não aparece abaixo quando o conteúdo é menor que a viewport */
    }
    .app.hidden { display: none; }

    /* TITLE */
    .game-title {
      grid-column: 1 / -1; text-align: center; padding: 8px 0 4px; position: relative;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
    }

    .game-title h1 {
      font-family: 'Cinzel Decorative', 'Cinzel', serif;
      font-size: 1.36rem; letter-spacing: 3px;
      background: linear-gradient(180deg, #fff8dc 0%, #ffd700 30%, #daa520 60%, #b8860b 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 2px 8px rgba(255,215,0,0.5));
    }
    .game-title .subtitle {
      font-family: 'Cinzel', serif; font-size: 0.7rem; letter-spacing: 6px;
      color: var(--gold); opacity: 0.7; text-transform: uppercase;
    }

    /* PANELS - Wood/Parchment Frame */
    .panel {
      background: linear-gradient(180deg, #1a1228 0%, #12192e 50%, #0e1525 100%);
      border: 2px solid var(--blue-dark);
      border-radius: 12px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 0 30px rgba(30,60,120,0.3), inset 0 0 60px rgba(0,0,0,0.3);
    }
    .panel::before {
      content: ''; position: absolute; inset: 3px;
      border: 1px solid rgba(100,140,200,0.15); border-radius: 10px;
      pointer-events: none; z-index: 1;
    }
    /* Corner ornaments */
    .panel::after {
      content: '✦'; position: absolute; top: 6px; right: 10px;
      color: var(--gold); opacity: 0.3; font-size: 0.7rem;
    }

    .left { padding: 14px; align-self: start; }
    .right { padding: 16px; align-self: start; }

    /* HERO SECTION */
    .hero {
      background: linear-gradient(135deg, rgba(20,15,40,0.9), rgba(15,25,50,0.9));
      border: 1px solid var(--blue-dark); border-radius: 10px;
      padding: 12px; margin-bottom: 10px;
      position: relative;
    }
    .hero-wrap { display: flex; gap: 12px; align-items: center; }
    .portrait-frame {
      position: relative; width: 88px; height: 88px; flex-shrink: 0;
    }
    .portrait {
      width: 88px; height: 88px; border-radius: 12px;
      object-fit: cover; object-position: center 25%;
      border: 3px solid var(--gold-dark);
      background: #070d1d; transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
      box-shadow: 0 0 15px rgba(255,215,0,0.2);
    }
    .portrait.l5 { border-color: #ffd700; box-shadow: 0 0 25px rgba(255,215,0,0.6), 0 0 50px rgba(255,215,0,0.2); }
    .portrait.l4 { border-color: var(--purple); box-shadow: 0 0 22px rgba(192,132,252,0.5); }
    .portrait.l3 { border-color: #34d399; box-shadow: 0 0 18px rgba(52,211,153,0.4); }
    .portrait.l2 { border-color: var(--blue); box-shadow: 0 0 16px rgba(96,165,250,0.4); }
    .hero-info { flex: 1; }
    .class {
      font-family: 'Cinzel', serif; font-weight: 700;
      color: var(--gold); font-size: 0.85rem;
    }
    .hero-title {
      font-size: 0.72rem; color: #93b4e8;
      font-style: italic; margin-top: 2px; opacity: 0.85;
    }
    .hero-name {
      font-size: 0.75rem; color: var(--txt-dim); margin-top: 3px;
    }
    .xp-bar {
      height: 8px; border-radius: 99px; overflow: hidden;
      border: 1px solid var(--blue-dark); background: #0b1329; margin-top: 8px;
    }
    .xp-bar > div {
      height: 100%; width: 0; border-radius: 99px;
      background: linear-gradient(90deg, #2563eb, #7c3aed, var(--purple));
      transition: width 0.4s ease;
      box-shadow: 0 0 6px rgba(124,58,237,0.5);
    }
    .xp-text { font-size: 0.65rem; color: var(--txt-dim); margin-top: 3px; }

    /* STORY */
    .story {
      background: linear-gradient(135deg, rgba(20,15,40,0.8), rgba(15,25,50,0.8));
      border: 1px solid var(--blue-dark); border-radius: 10px;
      padding: 10px; margin-bottom: 10px;
    }
    .story h3 {
      font-family: 'Cinzel', serif; font-size: 0.82rem;
      color: var(--gold); margin-bottom: 6px;
    }
    .story p { font-size: 0.78rem; color: #c8d8f0; line-height: 1.5; margin-bottom: 4px; }

    /* HUD TILES */
    .hud {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 6px; margin-bottom: 10px;
    }
    .tile {
      background: linear-gradient(180deg, rgba(15,20,40,0.9), rgba(10,15,30,0.9));
      border: 1px solid var(--blue-dark); border-radius: 8px;
      padding: 6px; text-align: center;
    }
    .tile span { display: block; color: var(--txt-dim); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 1px; }
    .tile strong { font-size: 1rem; color: var(--txt); display: block; margin-top: 2px; }
    #lives { display: flex; justify-content: center; gap: 2px; font-size: 1.1rem; white-space: nowrap; }
    .tile:nth-child(5) strong { color: var(--gold); } /* Ouro */

    /* EQUIPMENT */
    .equip {
      background: linear-gradient(135deg, rgba(20,15,40,0.8), rgba(15,25,50,0.8));
      border: 1px solid var(--blue-dark); border-radius: 10px;
      padding: 10px; margin-bottom: 10px;
    }
    .equip h3 {
      font-family: 'Cinzel', serif; font-size: 0.82rem;
      color: var(--gold); margin-bottom: 8px;
    }
    .slot {
      display: flex; align-items: center; gap: 8px;
      padding: 6px 8px; border: 1px solid #1e3a5e; border-radius: 8px;
      background: rgba(10,15,30,0.8); margin-bottom: 5px;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .slot:hover { border-color: #3a6a9a; }
    .slot-icon {
      width: 36px; height: 36px; border-radius: 6px;
      border: 1px solid var(--blue-dark); object-fit: cover;
      background: #0a0e1a;
      /* Unifica o estilo visual entre JPEGs (assets/items) e PNGs (assets/images) */
      filter: saturate(1.25) contrast(1.05) brightness(1.0);
    }
    .slot-info { flex: 1; }
    .slot-name { font-size: 0.78rem; font-weight: 600; }
    .slot-stats { font-size: 0.62rem; color: var(--txt-dim); margin-top: 1px; display:flex; gap:6px; flex-wrap:wrap; }
    .stat-badge { position:relative; cursor:help; padding:1px 4px; border-radius:3px; background:rgba(42,74,122,0.3); transition:background 0.2s, color 0.2s; display:inline-block; }
    .stat-badge:hover { background:rgba(42,74,122,0.6); color:#fff; z-index: var(--z-modal-high); }
    .stat-badge .stat-tip { display:none; position:fixed; background:linear-gradient(180deg,#1a2a4a,#0e1830); border:1px solid var(--gold); border-radius:8px; padding:10px 14px; font-size:0.75rem; color:#d5e2ff; white-space:nowrap; z-index: var(--z-critical); box-shadow:0 6px 24px rgba(0,0,0,0.8); pointer-events:none; max-width:300px; white-space:normal; line-height:1.4; }
    .stat-badge:hover .stat-tip { display:block; }
    .stat-tip strong { color:var(--gold); display:block; margin-bottom:4px; font-size:0.82rem; }
    /* Tooltip de item */
    .item-with-tooltip { cursor:help; position:relative; }
    .item-tooltip { display:none; position:fixed; background:linear-gradient(180deg,#1a2a4a,#0e1830); border:2px solid var(--gold); border-radius:10px; padding:12px 16px; font-size:0.8rem; color:#d5e2ff; z-index: var(--z-critical); box-shadow:0 8px 32px rgba(0,0,0,0.9); pointer-events:none; max-width:280px; line-height:1.5; }
    .item-tooltip strong { color:var(--gold); display:block; margin-bottom:6px; font-size:0.9rem; font-family:'Cinzel',serif; }
    /* Botão desabilitado */
    .btn.disabled { opacity:0.4; cursor:not-allowed; filter:grayscale(0.6); pointer-events:none; }
    /* Popup de forja */
    .forge-popup { position:fixed; inset:0; z-index: var(--z-critical); display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.7); animation:fadeIn 0.3s; padding:32px 16px; }
    .forge-card { background:linear-gradient(135deg,#1a1040,#0e1830); border:2px solid var(--gold); border-radius:16px; padding:24px; text-align:center; max-width:340px; max-height:88vh; overflow-y:auto; box-shadow:0 0 40px rgba(255,215,0,0.2); animation:scaleIn 0.4s; }
    /* Equipment comparison popup */
    .equip-compare-overlay {
      position: fixed; inset: 0; z-index: var(--z-critical);
      display: flex; align-items: center; justify-content: center;
      background: rgba(0,0,0,0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
      animation: fadeIn 0.25s; padding: 16px;
    }
    .equip-compare-card {
      background: linear-gradient(135deg, #0e1830, #1a1040);
      border: 2px solid var(--gold, #ffd700); border-radius: 16px;
      padding: 20px; max-width: 600px; width: 100%;
      box-shadow: 0 0 50px rgba(255,215,0,0.18);
      animation: scaleIn 0.3s;
    }
    .equip-compare-title {
      color: var(--gold, #ffd700); font-family: 'Cinzel', serif;
      font-size: 0.9rem; letter-spacing: 1px; text-align: center;
      margin-bottom: 16px;
    }
    .equip-compare-body {
      display: flex; flex-direction: row; align-items: center; gap: 12px;
    }
    .equip-compare-slot {
      flex: 1; background: rgba(255,255,255,0.04);
      border: 1px solid rgba(99,102,241,0.3); border-radius: 12px;
      padding: 14px 12px; text-align: center;
    }
    .equip-compare-slot img {
      width: 72px; height: 72px; object-fit: cover; border-radius: 8px;
      border: 2px solid rgba(255,255,255,0.12); margin-bottom: 8px;
      filter: saturate(1.25) contrast(1.05);
    }
    .equip-compare-slot .ecp-name {
      color: #e2e8f0; font-weight: 700; font-size: 0.8rem;
      margin-bottom: 4px; line-height: 1.3;
    }
    .equip-compare-slot .ecp-rar {
      font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
      padding: 2px 8px; border-radius: 20px; color: #fff; display: inline-block;
      margin-bottom: 8px;
    }
    .equip-compare-slot .ecp-stats {
      display: flex; flex-direction: column; gap: 3px; font-size: 0.72rem; color: #94a3b8;
    }
    .equip-compare-slot .ecp-stats span { display: flex; justify-content: space-between; gap: 8px; }
    .equip-compare-slot .ecp-stats .pos { color: #6ee7b7; }
    .equip-compare-slot .ecp-stats .neg { color: #fb7185; }
    .equip-compare-arrow {
      color: var(--gold, #ffd700); font-size: 1.6rem; flex-shrink: 0; line-height: 1;
    }
    .equip-compare-label {
      font-size: 0.62rem; color: #64748b; text-transform: uppercase;
      letter-spacing: 1px; margin-bottom: 6px;
    }
    .equip-compare-actions {
      display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap;
    }
    .equip-compare-actions button { flex: 1; min-width: 120px; padding: 10px 14px;
      border-radius: 8px; font-size: 0.82rem; font-weight: 700;
      cursor: pointer; font-family: 'Cinzel', serif; border: none;
    }
    .equip-compare-replace {
      background: linear-gradient(135deg, #1a4080, #2a5fa0); color: #e0f0ff;
    }
    .equip-compare-keep {
      background: rgba(255,255,255,0.06); color: #94a3b8;
      border: 1px solid rgba(255,255,255,0.15) !important;
    }
    @media (max-width: 640px) {
      .equip-compare-body { flex-direction: column; gap: 8px; }
      .equip-compare-arrow { transform: rotate(90deg); }
      .equip-compare-slot img { width: 56px; height: 56px; }
    }
    /* Rarity colors for compare */
    .ecp-rar.common { background: rgba(100,116,139,0.5); }
    .ecp-rar.uncommon { background: rgba(34,197,94,0.35); color: #86efac; }
    .ecp-rar.rare { background: rgba(99,102,241,0.4); }
    .ecp-rar.epic { background: rgba(168,85,247,0.4); }
    .ecp-rar.legendary { background: linear-gradient(135deg,rgba(255,215,0,0.4),rgba(255,140,0,0.4)); color: #ffd700; }
    /* ===== DIFFICULTY SELECTOR ===== */
    .diff-selector-overlay {
      position: fixed; inset: 0; z-index: var(--z-panel); display: flex; align-items: flex-start;
      justify-content: center; background: rgba(0,0,0,0.85); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
      padding: 20px 16px; animation: fadeIn 0.25s; overflow-y: auto;
    }
    .diff-selector-card {
      background: linear-gradient(160deg, #0d1428, #12192e, #0e1022);
      border: 2px solid var(--gold, #ffd700); border-radius: 20px;
      padding: 24px; max-width: 520px; width: 100%;
      box-shadow: 0 0 60px rgba(255,215,0,0.15); animation: scaleIn 0.3s;
      margin: auto 0;
    }
    .diff-selector-title {
      color: var(--gold); font-family: 'Cinzel', serif; font-size: 1.05rem;
      letter-spacing: 1.5px; text-align: center; margin-bottom: 18px;
    }
    .diff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
    @media (max-width: 500px) { .diff-grid { grid-template-columns: 1fr; } }
    .diff-card {
      background: rgba(255,255,255,0.04); border: 2px solid rgba(99,102,241,0.25);
      border-radius: 12px; padding: 14px 12px; cursor: pointer; text-align: center;
      transition: border-color 0.2s, background 0.2s, transform 0.15s;
    }
    .diff-card:hover { border-color: rgba(255,215,0,0.5); background: rgba(255,215,0,0.07); transform: translateY(-2px); }
    .diff-card.selected { border-color: var(--gold); background: rgba(255,215,0,0.12); box-shadow: 0 0 16px rgba(255,215,0,0.2); }
    .diff-card.hardcore { border-color: rgba(239,68,68,0.35); }
    .diff-card.hardcore:hover { border-color: rgba(239,68,68,0.7); background: rgba(239,68,68,0.07); }
    .diff-card.hardcore.selected { border-color: #ef4444; background: rgba(239,68,68,0.12); box-shadow: 0 0 16px rgba(239,68,68,0.25); }
    .diff-icon { font-size: 1.8rem; margin-bottom: 4px; }
    .diff-name { color: #e2e8f0; font-family: 'Cinzel', serif; font-weight: 700; font-size: 0.9rem; margin-bottom: 4px; }
    .diff-lives { font-size: 0.85rem; margin-bottom: 6px; }
    .diff-desc { color: #94a3b8; font-size: 0.68rem; line-height: 1.4; }
    .diff-hardcore-badge { display: inline-block; background: linear-gradient(135deg,rgba(239,68,68,0.3),rgba(180,0,0,0.3)); border: 1px solid rgba(239,68,68,0.5); color: #fca5a5; font-size: 0.62rem; border-radius: 20px; padding: 2px 8px; margin-top: 4px; font-weight: 700; letter-spacing: 0.5px; }
    .diff-confirm-btn {
      width: 100%; padding: 12px; border-radius: 10px; border: none; cursor: pointer;
      background: linear-gradient(135deg, #1a4080, #2a5fa0); color: #e0f0ff;
      font-family: 'Cinzel', serif; font-size: 0.88rem; font-weight: 700; letter-spacing: 1px;
      transition: opacity 0.2s;
    }
    .diff-confirm-btn:disabled { opacity: 0.4; cursor: not-allowed; }
    .diff-cancel-btn {
      width: 100%; padding: 9px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.15);
      background: rgba(255,255,255,0.05); color: #708090; cursor: pointer;
      font-size: 0.8rem; margin-top: 6px; transition: background 0.15s;
    }
    .diff-cancel-btn:hover { background: rgba(255,255,255,0.1); color: #c8d8f0; }

    /* ===== LEGENDARY GLOW ANIMATIONS ===== */
    @keyframes legendaryPulse {
      0%   { box-shadow: 0 0 6px 2px rgba(255,215,0,0.5),  0 0 14px 4px rgba(255,165,0,0.25); }
      50%  { box-shadow: 0 0 14px 5px rgba(255,215,0,0.8), 0 0 28px 8px rgba(255,165,0,0.4); }
      100% { box-shadow: 0 0 6px 2px rgba(255,215,0,0.5),  0 0 14px 4px rgba(255,165,0,0.25); }
    }
    @keyframes legendaryPassiveGlow {
      0%   { box-shadow: 0 0 4px 1px rgba(255,215,0,0.3); }
      50%  { box-shadow: 0 0 8px 3px rgba(255,215,0,0.5); }
      100% { box-shadow: 0 0 4px 1px rgba(255,215,0,0.3); }
    }
    .slot-icon.legendary-active {
      border: 2px solid var(--gold) !important; border-radius: 8px;
      animation: legendaryPulse 2s ease-in-out infinite;
    }
    .slot-icon.legendary-passive {
      border: 2px solid rgba(255,215,0,0.5) !important; border-radius: 8px;
      animation: legendaryPassiveGlow 3s ease-in-out infinite;
    }
    .slot-icon.legendary-used {
      border: 2px solid rgba(255,215,0,0.2) !important; border-radius: 8px;
      filter: saturate(0.35) brightness(0.65) contrast(1.05);
    }
    /* Ability label badge on item */
    .slot.has-active-ability .slot-name::after {
      content: " ✨"; color: var(--gold); font-size: 0.8em;
    }
    .slot.has-used-ability .slot-name::after {
      content: " (usada)"; color: #64748b; font-size: 0.68em;
    }

    /* ===== PULAR QUESTÃO BUTTON ===== */
    .skip-question-btn {
      display: none; background: rgba(255,215,0,0.08); border: 1px solid rgba(255,215,0,0.35);
      color: #ffd700; border-radius: 8px; padding: 6px 14px; cursor: pointer;
      font-size: 0.75rem; font-family: 'Cinzel', serif; letter-spacing: 0.5px;
      transition: background 0.15s; margin-top: 8px; white-space: nowrap;
    }
    .skip-question-btn:hover { background: rgba(255,215,0,0.15); }
    .skip-question-btn.visible { display: inline-block; }

    /* ===== MINIGAME POPUP ===== */
    .minigame-overlay {
      position: fixed; inset: 0; z-index: var(--z-notify); display: flex; align-items: center;
      justify-content: center; background: rgba(0,0,0,0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
      animation: fadeIn 0.3s; padding: 16px;
    }
    .minigame-card {
      background: linear-gradient(135deg, #0a1220, #12192e, #0e1022);
      border: 2px solid #4ade80; border-radius: 18px; padding: 22px 20px;
      max-width: 420px; width: 100%; text-align: center; animation: scaleIn 0.35s;
      position: relative;
    }
    .minigame-title { color: #4ade80; font-family: 'Cinzel', serif; font-size: 0.95rem; margin-bottom: 4px; }
    .minigame-subtitle { color: #94a3b8; font-size: 0.75rem; margin-bottom: 16px; }
    .minigame-stmt {
      background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.25);
      border-radius: 10px; padding: 14px 12px; font-size: 0.85rem; color: #e2e8f0;
      line-height: 1.5; margin-bottom: 12px; min-height: 70px;
      display: flex; align-items: center; justify-content: center;
    }
    .minigame-tf-btns { display: flex; gap: 10px; margin-bottom: 10px; }
    .minigame-tf-btns button { flex: 1; padding: 12px; border-radius: 10px; border: none; cursor: pointer; font-size: 0.9rem; font-weight: 700; transition: transform 0.1s; }
    .minigame-tf-btns button:active { transform: scale(0.96); }
    .minigame-true-btn { background: linear-gradient(135deg, #065f46, #059669); color: #ecfdf5; }
    .minigame-false-btn { background: linear-gradient(135deg, #7f1d1d, #dc2626); color: #fef2f2; }
    .minigame-timer {
      height: 4px; background: rgba(74,222,128,0.15); border-radius: 2px; overflow: hidden;
      margin-bottom: 14px;
    }
    .minigame-timer-fill { height: 100%; background: #4ade80; transition: width 0.1s linear; }
    .minigame-progress { color: #64748b; font-size: 0.72rem; margin-bottom: 8px; }
    .minigame-result { font-size: 1.1rem; margin-bottom: 6px; }
    .minigame-reward { color: #ffd700; font-size: 0.85rem; font-weight: 700; margin-bottom: 14px; }


    .forge-card img { width:80px; height:80px; border-radius:10px; border:2px solid var(--gold); margin-bottom:12px; object-fit:cover; background:#0a0e1a; filter:saturate(1.25) contrast(1.05); }
    .forge-card h3 { color:var(--gold); font-family:'Cinzel',serif; margin-bottom:6px; }
    .forge-card p { color:#b0c4e8; font-size:0.85rem; margin-bottom:4px; }
    .forge-card .forge-stats { color:var(--txt-dim); font-size:0.8rem; margin:8px 0; }
    .forge-card button { margin-top:12px; }
    @keyframes scaleIn { from{transform:scale(0.5);opacity:0} to{transform:scale(1);opacity:1} }
    @keyframes fadeIn { from{opacity:0} to{opacity:1} }
    /* Popup de narrativa */
    .narrative-popup { position:fixed; inset:0; z-index: var(--z-critical); display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.8); animation:fadeIn 0.4s; padding:32px 16px; }
    .narrative-card { background:linear-gradient(135deg,#0e1830 0%,#1a1040 40%,#2a1050 100%); border:2px solid var(--gold); border-radius:16px; padding:28px 24px; text-align:center; max-width:420px; width:100%; max-height:calc(100vh - 64px); overflow-y:auto; box-shadow:0 0 60px rgba(255,215,0,0.15), inset 0 0 40px rgba(255,215,0,0.03); animation:scaleIn 0.5s; }
    .narrative-card .narr-chapter { color:var(--gold); font-family:'Cinzel',serif; font-size:0.75rem; letter-spacing:3px; text-transform:uppercase; margin-bottom:8px; opacity:0.8; }
    .narrative-card h3 { color:var(--gold); font-family:'Cinzel',serif; font-size:1.2rem; margin-bottom:14px; text-shadow:0 0 12px rgba(255,215,0,0.3); }
    .narrative-card .narr-text { color:#c8d8f0; font-size:0.88rem; line-height:1.65; margin-bottom:16px; font-family:'Philosopher',serif; font-style:italic; }
    .narrative-card .narr-progress { color:var(--txt-dim); font-size:0.72rem; margin-bottom:14px; }
    .narrative-card .narr-progress strong { color:var(--gold); }
    .narrative-card button { margin-top:6px; }
    .rar-common { color: #8a9cc0; }
    .rar-rare { color: var(--blue); }
    .rar-epic { color: var(--purple); }
    .rar-legendary { color: var(--gold); text-shadow: 0 0 8px rgba(255,215,0,0.4); }

    /* LOG */
    .log {
      background: linear-gradient(135deg, rgba(20,15,40,0.8), rgba(15,25,50,0.8));
      border: 1px solid var(--blue-dark); border-radius: 10px;
      padding: 8px 10px; max-height: 140px; overflow-y: auto;
    }
    .log h3 { font-family: 'Cinzel', serif; font-size: 0.82rem; color: var(--gold); margin-bottom: 6px; }
    .log p { font-size: 0.72rem; color: #8a9cc0; margin-bottom: 3px; border-bottom: 1px solid rgba(42,74,122,0.2); padding-bottom: 3px; }

    /* RIGHT PANEL - QUESTION */
    .qbox {
      background: linear-gradient(135deg, rgba(30,22,50,0.9), rgba(20,30,55,0.9));
      border: 1px solid #3a5a8a; border-radius: 12px;
      padding: 18px; min-height: 100px; margin-bottom: 12px;
      position: relative;
    }
    .flag-btn {
      position: absolute; bottom: 6px; right: 8px; top: auto; left: auto;
      background: none; border: none; cursor: pointer;
      font-size: 0.9rem; opacity: 0.3;
      padding: 0; width: 44px; height: 44px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 6px; transition: opacity 0.2s, transform 0.15s;
      line-height: 1; z-index: 2;
    }
    .flag-btn:hover { opacity: 0.8; transform: scale(1.15); }
    .flag-btn[title]:hover::after {
      content: attr(title);
      position: absolute; right: 110%; bottom: 0; top: auto; left: auto; transform: none;
      background: rgba(10,15,30,0.95); border: 1px solid rgba(180,160,100,0.4);
      color: #d5e2ff; font-size: 0.7rem; white-space: nowrap;
      padding: 3px 8px; border-radius: 5px; pointer-events: none;
      font-family: 'Philosopher', serif; font-weight: 400; letter-spacing: 0;
    }
    .qbox::before {
      content: '?'; position: absolute; top: -8px; right: 14px; left: auto; transform: none;
      width: 28px; height: 28px; border-radius: 50%;
      background: linear-gradient(180deg, #7c3aed, #4c1d95);
      color: #fff; font-family: 'Cinzel', serif; font-weight: 900;
      font-size: 0.9rem; display: flex; align-items: center; justify-content: center;
      border: 2px solid #a78bfa;
      box-shadow: 0 0 12px rgba(124,58,237,0.5);
    }
    #question {
      margin: 0; line-height: 1.6; font-size: 0.95rem;
      color: #d5e2ff; padding-top: 4px;
    }

    /* CRONÔMETRO */
    #timerWidget {
      position: absolute;
      top: -10px;
      left: 10px;
      display: flex;
      align-items: center;
      gap: 5px;
      background: linear-gradient(135deg, rgba(15,20,40,0.95), rgba(20,28,55,0.95));
      border: 1px solid rgba(99,102,241,0.45);
      border-radius: 20px;
      padding: 3px 8px 3px 6px;
      box-shadow: 0 0 10px rgba(99,102,241,0.2), 0 2px 6px rgba(0,0,0,0.4);
      z-index: 3;
      user-select: none;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    #timerWidget:hover {
      border-color: rgba(139,92,246,0.7);
      box-shadow: 0 0 14px rgba(139,92,246,0.35), 0 2px 8px rgba(0,0,0,0.5);
    }
    #timerDisplay {
      font-family: 'Courier New', monospace;
      font-size: 0.78rem;
      font-weight: 700;
      color: #a5b4fc;
      letter-spacing: 0.08em;
      min-width: 34px;
      text-align: center;
      line-height: 1;
    }
    #timerWidget.running #timerDisplay {
      color: #c4b5fd;
    }
    #timerPlayPause {
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      width: 18px;
      height: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0.75;
      transition: opacity 0.15s, transform 0.15s;
      flex-shrink: 0;
    }
    #timerPlayPause:hover { opacity: 1; transform: scale(1.15); }
    #timerPlayPause svg { width: 14px; height: 14px; fill: #a5b4fc; }
    #timerWidget.running #timerPlayPause svg { fill: #c4b5fd; }

    /* OPTIONS */
    .options { display: grid; gap: 8px; }
    .option {
      padding: 12px 16px;
      border: 2px solid var(--blue-dark);
      border-radius: 10px;
      background: linear-gradient(180deg, rgba(20,30,55,0.95), rgba(12,20,40,0.95));
      color: #c8d8f0;
      text-align: left; cursor: pointer;
      font-family: 'Philosopher', sans-serif; font-size: 0.9rem;
      box-shadow: 0 2px 0 #0a1020, 0 4px 8px rgba(0,0,0,0.3);
      transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
      position: relative;
    }
    .option::before {
      content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
      background: linear-gradient(180deg, #3a5a8a, var(--blue-dark));
      border-radius: 10px 0 0 10px;
    }
    .option:hover:not(:disabled) {
      border-color: var(--gold); transform: translateX(4px);
      box-shadow: 0 2px 0 #0a1020, 0 4px 12px rgba(255,215,0,0.15);
    }
    .option:hover:not(:disabled)::before { background: linear-gradient(180deg, var(--gold), var(--gold-dark)); }
    .option.correct {
      border-color: var(--ok);
      background: linear-gradient(180deg, rgba(16,50,40,0.95), rgba(10,35,28,0.95));
      box-shadow: 0 0 15px rgba(52,211,153,0.3);
    }
    .option.correct::before { background: var(--ok); }
    .option.wrong {
      border-color: var(--bad);
      background: linear-gradient(180deg, rgba(55,20,30,0.95), rgba(40,15,22,0.95));
      box-shadow: 0 0 15px rgba(251,113,133,0.3);
    }
    .option.wrong::before { background: var(--bad); }

    /* FEEDBACK */
    .feedback {
      background: linear-gradient(135deg, rgba(20,15,40,0.85), rgba(15,25,50,0.85));
      border: 1px solid var(--blue-dark); border-radius: 10px;
      padding: 12px; min-height: 60px; margin-top: 10px;
      font-size: 0.85rem; line-height: 1.5; color: #b0c4e8;
    }
    .feedback.good { border-color: #1f7b63; background: linear-gradient(135deg, rgba(10,40,30,0.85), rgba(8,30,22,0.85)); }
    .feedback.bad { border-color: #9f3f54; background: linear-gradient(135deg, rgba(45,15,25,0.85), rgba(35,10,18,0.85)); }

    /* REFS */
    .refs {
      margin-top: 10px;
      font-size: 0.78rem;
    }
    .refs-header {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 8px;
      color: var(--txt-dim);
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-weight: 600;
    }
    .refs-header::before {
      content: '';
      display: inline-block;
      width: 3px;
      height: 12px;
      background: linear-gradient(180deg, #6366f1, #10b981);
      border-radius: 2px;
    }
    .refs-header::after {
      content: '';
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, rgba(99,102,241,0.3), transparent);
    }
    .ref-cards {
      display: flex;
      flex-direction: column;
      gap: 7px;
    }
    .ref-card {
      background: linear-gradient(135deg, rgba(15,23,42,0.95) 0%, rgba(20,30,55,0.9) 100%);
      border: 1px solid rgba(99,102,241,0.25);
      border-left: 3px solid var(--ref-accent, #6366f1);
      border-radius: 8px;
      padding: 9px 12px 30px;
      text-decoration: none;
      display: block;
      transition: border-color 0.2s, background 0.2s;
      position: relative;
      overflow: hidden;
    }
    .ref-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--ref-accent, #6366f1), transparent);
      opacity: 0.4;
    }
    .ref-card:hover {
      border-color: var(--ref-accent, #6366f1);
      background: linear-gradient(135deg, rgba(20,30,60,0.98) 0%, rgba(30,45,80,0.95) 100%);
      transform: translateX(2px);
      text-decoration: none;
    }
    .ref-card-top {
      display: flex;
      align-items: center;
      gap: 7px;
      margin-bottom: 5px;
    }
    .ref-icon {
      font-size: 1rem;
      flex-shrink: 0;
      line-height: 1;
    }
    .ref-title {
      color: #e2e8f0;
      font-weight: 700;
      font-size: 0.82rem;
      flex: 1;
      line-height: 1.3;
    }
    .ref-badge {
      font-size: 0.62rem;
      font-weight: 900;
      padding: 2px 7px;
      border-radius: 20px;
      letter-spacing: 0.06em;
      flex-shrink: 0;
      color: #fff;
    }
    .ref-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 5px;
      flex-wrap: wrap;
    }
    .ref-journal {
      color: #94a3b8;
      font-size: 0.72rem;
      font-style: italic;
      flex: 1;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .ref-year {
      color: var(--ref-accent, #6366f1);
      font-size: 0.72rem;
      font-weight: 700;
      flex-shrink: 0;
    }
    .ref-tipo {
      color: #64748b;
      font-size: 0.68rem;
      flex-shrink: 0;
    }
    .ref-impacto {
      color: #a5b4fc;
      font-size: 0.73rem;
      line-height: 1.4;
      padding-top: 4px;
      border-top: 1px solid rgba(99,102,241,0.15);
    }
    .ref-impacto.green { color: #6ee7b7; }
    .ref-impacto.amber { color: #fcd34d; }
    .ref-copy-btn {
      position: absolute;
      bottom: 7px;
      right: 10px;
      background: none;
      border: 1px solid rgba(99,102,241,0.35);
      border-radius: 5px;
      color: #8b9ccc;
      font-size: 0.62rem;
      padding: 2px 7px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: border-color 0.15s, color 0.15s;
    }
    .ref-copy-btn:hover { border-color: #6366f1; color: #a5b4fc; }

    /* CONTROL BUTTONS */
    .ctrl {
      padding: 10px 0; margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap;
    }
    .btn {
      border: 2px solid var(--blue-dark);
      background: linear-gradient(180deg, #1e3a5e 0%, #152a48 50%, #0e1e38 100%);
      color: #c8d8f0; border-radius: 8px;
      padding: 10px 16px; font-weight: 700;
      font-family: 'Cinzel', serif; font-size: 0.75rem;
      cursor: pointer; text-transform: uppercase; letter-spacing: 1px;
      box-shadow: 0 3px 0 #0a1020, 0 4px 10px rgba(0,0,0,0.4);
      transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s, background 0.2s;
    }
    .btn:hover {
      border-color: #4a7aaa; transform: translateY(-1px);
      box-shadow: 0 4px 0 #0a1020, 0 6px 14px rgba(0,0,0,0.5);
    }
    .btn:active { transform: translateY(1px); box-shadow: 0 1px 0 #0a1020; }
    .btn:focus-visible, button:focus-visible, [role="button"]:focus-visible {
      outline: 2px solid #60a5fa; outline-offset: 3px;
    }
    .btn.sec {
      background: linear-gradient(180deg, #2d3748, #1a202c);
      border-color: #374151;
    }
    .btn.gold {
      background: linear-gradient(180deg, #ffd700 0%, #daa520 50%, #b8860b 100%);
      border: 2px solid #8b6914; color: #1a0e00;
      text-shadow: 0 1px 0 rgba(255,255,255,0.3);
      box-shadow: 0 3px 0 #7a5a00, 0 4px 10px rgba(218,165,32,0.4);
    }
    .btn.gold:hover { box-shadow: 0 4px 0 #7a5a00, 0 6px 16px rgba(255,215,0,0.5); }
    .btn.gold:disabled { background: #374151; color: #6b7280; border-color: #4b5563; cursor: not-allowed; box-shadow: none; }

    /* ── ACTION DOCK ── */
    /* ══════════════════════════════════════════
       ACTION DOCK — Painel lateral premium
       ══════════════════════════════════════════ */
    @keyframes dockGlow {
      0%,100% { box-shadow: 0 0 18px rgba(255,215,0,0.08), 0 8px 40px rgba(0,0,0,0.7); }
      50%      { box-shadow: 0 0 28px rgba(255,215,0,0.16), 0 8px 40px rgba(0,0,0,0.7); }
    }
    @keyframes dockBtnPulse {
      0%,100% { opacity: 1; }
      50%      { opacity: 0.82; }
    }

    .action-dock {
      /* Terceira coluna do grid — estático no grid */
      grid-column: 3;
      grid-row: 2 / 3;
      align-self: start;
      z-index: var(--z-app);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      /* Sem box: fundo, borda e sombra removidos */
      background: transparent;
      border: none;
      border-radius: 0;
      padding: 0 0 8px;
      -webkit-backdrop-filter: none; backdrop-filter: none;
      -webkit-backdrop-filter: none;
      box-shadow: none;
      animation: none;
    }
    .action-dock.hidden { display: none; }

    /* Ornamentos removidos (sem box) */
    .action-dock::before,
    .action-dock::after { display: none; }

    /* Separador entre grupos - oculto */
    .dock-divider { display: none; }

    /* Botão base */
    .dock-btn {
      position: relative;
      width: 84px;
      height: 100px;
      border-radius: 14px;
      border: 2px solid rgba(255,255,255,0.18);
      background: linear-gradient(180deg, rgba(20,28,55,0.95) 0%, rgba(10,16,38,0.98) 100%);
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding-top: 18px;
      gap: 0;
      margin: 0;
      transition: transform 0.18s cubic-bezier(.34,1.56,.64,1),
                  background 0.18s,
                  border-color 0.18s,
                  box-shadow 0.18s;
      overflow: visible;
      will-change: transform;
      box-shadow: 0 4px 16px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.08);
    }
    .dock-btn:hover {
      transform: scale(1.08);
      background: linear-gradient(180deg, rgba(28,40,78,0.97) 0%, rgba(16,24,54,0.99) 100%);
      border-color: rgba(255,215,0,0.55);
      box-shadow: 0 6px 24px rgba(0,0,0,0.75), 0 0 14px rgba(255,215,0,0.18);
      z-index: 1;
    }
    .dock-btn:active { transform: scale(0.94); }
    .dock-btn.disabled {
      opacity: 0.3;
      cursor: not-allowed;
      pointer-events: none;
    }

    /* Ícone SVG */
    .dock-btn svg {
      width: 44px;
      height: 44px;
      flex-shrink: 0;
      transition: filter 0.2s;
    }

    /* Label — banda colorida na base do botão */
    .dock-btn .dock-label {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 26px;
      border-radius: 0 0 12px 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Cinzel', serif;
      font-size: 0.46rem;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      line-height: 1;
      white-space: nowrap;
      border-top: 1px solid rgba(255,255,255,0.12);
      background: rgba(0,0,0,0.45);
    }

    /* Tooltip — aparece à esquerda */
    .dock-btn::after {
      content: attr(data-tip);
      position: absolute;
      right: calc(100% + 14px);
      top: 50%;
      transform: translateY(-50%);
      background: linear-gradient(135deg, rgba(18,26,52,0.98), rgba(10,16,36,0.98));
      border: 1px solid rgba(255,215,0,0.4);
      border-radius: 8px;
      padding: 7px 12px;
      font-family: 'Philosopher', serif;
      font-size: 0.75rem;
      color: #e8efff;
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.15s;
      box-shadow: 0 4px 20px rgba(0,0,0,0.8),
                  0 0 0 1px rgba(255,215,0,0.1) inset;
      z-index: var(--z-critical);
    }
    /* Seta do tooltip */
    .dock-btn:hover::after { opacity: 1; }

    /* ── Variantes de cor por função ── */

    /* Forja — laranja brasa (combina forjar item + lendário) */
    .dock-btn.forge-btn { border-color: rgba(245,158,90,0.4); }
    .dock-btn.forge-btn svg { color: #fb923c; filter: drop-shadow(0 0 7px rgba(251,146,60,0.9)); }
    .dock-btn.forge-btn .dock-label { color: #fb923c; background: rgba(251,146,60,0.3); }
    .dock-btn.forge-btn:hover {
      border-color: rgba(251,146,60,0.75);
      box-shadow: 0 4px 20px rgba(0,0,0,0.7), 0 0 18px rgba(251,146,60,0.35);
    }

    /* Forjar Item — bronze/cobre (legado) */
    .dock-btn.forge-item { border-color: rgba(245,158,90,0.3); }
    .dock-btn.forge-item svg { color: #fb923c; filter: drop-shadow(0 0 6px rgba(251,146,60,0.8)); }
    .dock-btn.forge-item .dock-label { color: #fb923c; background: rgba(251,146,60,0.28); }
    .dock-btn.forge-item:hover {
      border-color: rgba(251,146,60,0.7);
      box-shadow: 0 4px 20px rgba(0,0,0,0.7), 0 0 16px rgba(251,146,60,0.3);
    }

    /* Forjar Lendário — roxo épico (legado) */
    .dock-btn.forge-legendary { border-color: rgba(192,132,252,0.3); }
    .dock-btn.forge-legendary svg { color: #d8b4fe; filter: drop-shadow(0 0 7px rgba(216,180,254,0.9)); }
    .dock-btn.forge-legendary .dock-label { color: #d8b4fe; background: rgba(192,132,252,0.25); }
    .dock-btn.forge-legendary:hover {
      border-color: rgba(216,180,254,0.7);
      box-shadow: 0 4px 20px rgba(0,0,0,0.7), 0 0 18px rgba(192,132,252,0.4);
    }

    /* Abrir Baú — dourado */
    .dock-btn.open-chest { border-color: rgba(255,215,0,0.3); }
    .dock-btn.open-chest svg { color: #ffd700; filter: drop-shadow(0 0 8px rgba(255,215,0,1)); }
    .dock-btn.open-chest .dock-label { color: #fcd34d; background: rgba(255,215,0,0.22); }
    .dock-btn.open-chest:hover {
      border-color: rgba(255,215,0,0.7);
      box-shadow: 0 4px 20px rgba(0,0,0,0.7), 0 0 22px rgba(255,215,0,0.45);
    }

    /* Leaderboard — azul safira */
    .dock-btn.leaderboard { border-color: rgba(96,165,250,0.3); }
    .dock-btn.leaderboard svg { color: #93c5fd; filter: drop-shadow(0 0 6px rgba(147,197,253,0.8)); }
    .dock-btn.leaderboard .dock-label { color: #93c5fd; background: rgba(96,165,250,0.22); }
    .dock-btn.leaderboard:hover {
      border-color: rgba(96,165,250,0.5);
      box-shadow: 0 0 16px rgba(96,165,250,0.25), inset 0 0 12px rgba(96,165,250,0.06);
    }

    /* Stats — ciano */
    .dock-btn.stats-btn { border-color: rgba(34,211,238,0.3); }
    .dock-btn.stats-btn svg { color: #67e8f9; filter: drop-shadow(0 0 6px rgba(103,232,249,0.9)); }
    .dock-btn.stats-btn .dock-label { color: #67e8f9; background: rgba(34,211,238,0.2); }
    .dock-btn.stats-btn:hover {
      border-color: rgba(103,232,249,0.7);
      box-shadow: 0 4px 20px rgba(0,0,0,0.7), 0 0 16px rgba(34,211,238,0.35);
    }

    /* Conquistas — dourado troféu */
    .dock-btn.achievements-btn { border-color: rgba(255,215,0,0.3); }
    .dock-btn.achievements-btn svg { color: #ffd700; filter: drop-shadow(0 0 8px rgba(255,215,0,1)); }
    .dock-btn.achievements-btn .dock-label { color: #fcd34d; background: rgba(255,215,0,0.22); }
    .dock-btn.achievements-btn:hover {
      border-color: rgba(255,215,0,0.7);
      box-shadow: 0 4px 20px rgba(0,0,0,0.7), 0 0 22px rgba(255,215,0,0.45);
    }

    /* Próxima Pergunta — verde esmeralda */
    .dock-btn.next-question-dock { border-color: rgba(74,222,128,0.45); }
    .dock-btn.next-question-dock svg { color: #4ade80; filter: drop-shadow(0 0 8px rgba(74,222,128,0.9)); }
    .dock-btn.next-question-dock .dock-label { color: #4ade80; background: rgba(74,222,128,0.22); }
    .dock-btn.next-question-dock:hover {
      border-color: rgba(74,222,128,0.75);
      box-shadow: 0 4px 20px rgba(0,0,0,0.7), 0 0 20px rgba(74,222,128,0.4);
    }
    @keyframes dockNextPulse {
      0%   { box-shadow: 0 4px 16px rgba(0,0,0,0.7), 0 0 0 0 rgba(74,222,128,0.7); }
      60%  { box-shadow: 0 4px 16px rgba(0,0,0,0.7), 0 0 0 10px rgba(74,222,128,0); }
      100% { box-shadow: 0 4px 16px rgba(0,0,0,0.7), 0 0 0 0 rgba(74,222,128,0); }
    }
    .dock-btn.next-question-dock.dock-next-ready {
      animation: dockNextPulse 0.6s ease-out;
    }

    /* Badge de custo */
    .dock-cost {
      position: absolute;
      top: -8px;
      right: -10px;
      background: linear-gradient(135deg, #ffd700, #b8860b);
      color: #1a0e00;
      font-family: 'Cinzel', serif;
      font-size: 0.42rem;
      font-weight: 900;
      padding: 2px 6px;
      border-radius: 7px;
      border: 1px solid rgba(255,215,0,0.4);
      white-space: nowrap;
      box-shadow: 0 2px 8px rgba(0,0,0,0.6);
      pointer-events: none;
      line-height: 1.3;
      z-index: 2;
    }
    .dock-cost.purple {
      background: linear-gradient(135deg, var(--purple), #7c3aed);
      color: #fff;
      border-color: rgba(192,132,252,0.5);
    }
    /* Botão Próxima Carta e Novo Jogo — mantidos no ctrl normal */
    .ctrl-top {
      padding: 10px 0 0; display: flex; gap: 8px; flex-wrap: wrap;
    }

    .hidden { display: none; }

    /* MODALS */
    .modalWrap {
      position: fixed; inset: 0; background: rgba(0,0,0,0.7);
      display: grid; place-items: center; z-index: var(--z-panel);
      -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    }
    .modalWrap.hidden { display: none !important; }
    .modal {
      width: min(700px, 92vw);
      background: linear-gradient(180deg, #12192e, #0b1428);
      border: 2px solid var(--blue-dark); border-radius: 14px; padding: 16px;
      box-shadow: 0 0 40px rgba(30,60,120,0.4);
    }
    /* Garante que nenhum modal-content estoure a viewport */
    .modal-content {
      max-height: 88vh;
      overflow-y: auto;
      box-sizing: border-box;
    }
    /* Wrapper de modal dinâmico: scroll quando conteúdo excede viewport */
    [style*="position:fixed"][style*="align-items:center"] > .modal-content,
    [style*="position:fixed"][style*="align-items: center"] > .modal-content {
      max-height: 88vh;
      overflow-y: auto;
    }
    table { width: 100%; border-collapse: collapse; margin-top: 8px; }
    th, td { border-bottom: 1px solid #1e3a5e; padding: 6px; text-align: left; font-size: 0.8rem; }
    th { color: var(--gold); font-family: 'Cinzel', serif; font-size: 0.7rem; text-transform: uppercase; }

    /* CHEST MODAL */
    .chest-modal {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,0.8); z-index: var(--z-panel);
      align-items: center; justify-content: center;
      -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
      padding: 32px 16px;
    }
    .chest-modal.show { display: flex; }
    .chest-content {
      background: linear-gradient(180deg, #1a2744, #0d1426);
      border: 2px solid var(--gold); border-radius: 16px;
      max-width: 600px; width: 90%; padding: 24px;
      box-shadow: 0 0 60px rgba(255,215,0,0.15);
      animation: modalIn 0.4s ease-out;
      max-height: 90vh; overflow-y: auto;
    }
    @keyframes modalIn {
      from { transform: scale(0.9) translateY(20px); opacity: 0; }
      to { transform: scale(1) translateY(0); opacity: 1; }
    }
    .chest-content h2 {
      margin: 0 0 16px; font-size: 1.4rem;
      font-family: 'Cinzel', serif;
      background: linear-gradient(90deg, var(--gold), #fff8dc);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    }
    .article-card {
      background: rgba(10,15,30,0.8); border: 1px solid var(--blue-dark);
      border-radius: 10px; padding: 16px; margin-bottom: 12px;
    }
    .article-card h3 { margin: 0 0 8px; color: var(--gold); font-size: 1rem; }
    .article-card p { margin: 6px 0; line-height: 1.5; font-size: 0.85rem; }
    .article-card .label { color: var(--txt-dim); font-size: 0.78rem; font-weight: 600; }
    .close-chest {
      width: 100%; padding: 10px; margin-top: 16px;
      background: linear-gradient(180deg, #ffd700, #b8860b);
      border: 2px solid #8b6914; border-radius: 8px; color: #1a0e00;
      font-weight: 700; font-size: 0.9rem; cursor: pointer;
      font-family: 'Cinzel', serif; text-transform: uppercase;
      transition: box-shadow 0.2s, background 0.2s;
    }
    .close-chest:hover { box-shadow: 0 0 20px rgba(255,215,0,0.4); }

    /* PAYWALL MODAL */
    #paywallModal {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,0.88); z-index: var(--z-critical);
      align-items: center; justify-content: center;
      -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 16px;
    }
    #paywallModal.show { display: flex; }
    .paywall-content {
      background: linear-gradient(160deg, #0f1e08, #0e1830, #1e1000);
      border: 2px solid #ffd700; border-radius: 20px;
      max-width: 440px; width: 100%; padding: 32px 28px;
      box-shadow: 0 0 60px rgba(255,215,0,0.18);
      text-align: center; animation: scaleIn 0.35s ease-out;
    }
    .paywall-content h2 {
      color: #ffd700; font-family: 'Cinzel', serif;
      font-size: 1.15rem; margin: 0 0 12px; letter-spacing: 1px;
    }
    .paywall-content p {
      color: #c8d8f0; font-size: 0.88rem;
      line-height: 1.65; margin-bottom: 20px;
    }
    .paywall-price {
      background: rgba(255,215,0,0.08);
      border: 1px solid rgba(255,215,0,0.45);
      border-radius: 12px; padding: 14px 20px; margin-bottom: 22px;
    }
    .price-amount {
      color: #ffd700; font-size: 1.7rem;
      font-family: 'Cinzel', serif; font-weight: 700;
    }
    .price-desc { color: #a0b8d0; font-size: 0.78rem; margin-top: 4px; }

    /* CHARACTER SELECT */
    .char-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 12px; margin-top: 12px;
    }
    .char-card {
      background: linear-gradient(180deg, rgba(15,20,40,0.95), rgba(10,15,30,0.95));
      border: 2px solid var(--blue-dark); border-radius: 12px;
      padding: 14px; text-align: center; cursor: pointer;
      transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
    }
    .char-card:hover {
      border-color: var(--gold); transform: translateY(-3px);
      box-shadow: 0 0 25px rgba(255,215,0,0.2);
    }
    .char-card img {
      width: 80px; height: 80px; border-radius: 50%;
      border: 3px solid #3a5a8a; margin-bottom: 8px;
      object-fit: cover; object-position: center 25%;
      transition: border-color 0.3s, box-shadow 0.3s; background: #070d1d;
    }
    .char-card:hover img { border-color: var(--gold); box-shadow: 0 0 15px rgba(255,215,0,0.3); }
    .char-card h3 {
      margin: 6px 0 2px; color: var(--gold);
      font-family: 'Cinzel', serif; font-size: 0.9rem;
    }
    .char-subtitle { color: var(--txt-dim); font-size: 0.72rem; font-style: italic; margin: 2px 0 8px; }
    .char-desc { color: #8a9cc0; font-size: 0.7rem; line-height: 1.4; }

    /* NAME MODAL */
    .name-input-box {
      background: rgba(10,15,30,0.8); border: 1px solid var(--gold);
      border-radius: 10px; padding: 14px; margin: 16px 0;
    }
    .name-input-box input {
      width: 100%; padding: 10px; font-size: 1rem;
      background: #0e1525; border: 1px solid var(--blue-dark);
      border-radius: 6px; color: var(--txt); font-family: inherit;
    }
    .name-input-box input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 10px rgba(255,215,0,0.2); }
    .name-input-box label { display: block; margin-bottom: 6px; color: var(--gold); font-weight: 600; font-size: 0.85rem; }
    .btn-group { display: flex; gap: 10px; margin-top: 12px; }
    .btn-group button { flex: 1; }

    /* WELCOME SCREEN */
    .welcome-screen {
      position: fixed; inset: 0; z-index: var(--z-overlay);
      /* background aplicado via #welcomeScreen no bloco de redesign (bg-hall.jpg) */
      display: flex; align-items: flex-start; justify-content: center;
      animation: fadeIn 0.8s;
      overflow-y: auto;
      scrollbar-width: none;
      padding-top: clamp(24px, 5vh, 60px);
      padding-bottom: 24px;
    }
    .welcome-screen::-webkit-scrollbar { display: none; }
    .welcome-screen.hidden { display: none; }

    /* Botões de som na welcome screen — PC only, canto superior direito */
    .welcome-sound-controls {
      display: none; /* oculto por padrão; PC ativa via media query */
    }
    @media (min-width: 769px) {
      .welcome-sound-controls .sound-toggle {
        width: 30px; height: 30px; min-width: 30px; min-height: 30px;
        font-size: 0.78rem;
      }
      .welcome-sound-controls {
        display: flex;
        flex-direction: row;
        gap: 4px;
        align-items: center;
        position: absolute;
        top: 14px;
        right: 14px;
        z-index: var(--z-top);
      }
    }

    /* Botões de som fixos no topo direito — MOBILE ONLY */
    .mobile-sound-controls {
      display: none; /* oculto por padrão; mobile ativa via media query */
    }

    /* Fundo sem imagem — apenas gradiente e efeitos */
    .welcome-bg {
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(100,60,180,0.18) 0%, transparent 70%),
        radial-gradient(ellipse 60% 40% at 20% 80%, rgba(30,80,160,0.12) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 80%, rgba(30,80,160,0.10) 0%, transparent 60%);
      pointer-events: none;
    }

    /* Grade sutil no fundo — estilo mapa medieval */
    .welcome-bg::before {
      content: '';
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(60,100,180,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(60,100,180,0.04) 1px, transparent 1px);
      background-size: 60px 60px;
      mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
    }

    /* Linha decorativa horizontal removida */

    /* Partículas — pontos de luz flutuantes discretos */
    .welcome-particles {
      position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1;
    }
    .wp {
      position: absolute;
      border-radius: 50%;
      animation: wpFloat linear infinite;
      opacity: 0;
      will-change: transform, opacity;
    }
    .wp.gold  { background: radial-gradient(circle, rgba(255,215,0,0.9) 0%, rgba(255,215,0,0) 70%); }
    .wp.blue  { background: radial-gradient(circle, rgba(96,168,255,0.8) 0%, rgba(96,168,255,0) 70%); }
    .wp.white { background: radial-gradient(circle, rgba(220,230,255,0.7) 0%, rgba(220,230,255,0) 70%); }
    @keyframes wpFloat {
      0%   { transform: translateY(0) translateX(0); opacity: 0; }
      8%   { opacity: 0.7; }
      85%  { opacity: 0.3; }
      100% { transform: translateY(-100vh) translateX(var(--drift)); opacity: 0; }
    }

    /* Brilho central suave pulsante */
    .welcome-glow {
      position: absolute; top: 15%; left: 50%; transform: translateX(-50%);
      width: 50%; height: 40%;
      background: radial-gradient(ellipse at 50% 40%, rgba(200,170,80,0.08) 0%, rgba(100,60,200,0.04) 50%, transparent 75%);
      animation: glowPulse 4s ease-in-out infinite alternate;
      pointer-events: none; z-index: 1;
      will-change: transform, opacity;
    }
    @keyframes glowPulse {
      0%   { opacity: 0.5; transform: translateX(-50%) scale(0.95); }
      100% { opacity: 1;   transform: translateX(-50%) scale(1.05); }
    }

    /* Cristais removidos — sem elemento .welcome-crystal */

    /* TÍTULO PRINCIPAL */
    .welcome-content {
      position: relative; z-index: 2;
      text-align: center;
      max-width: 560px; width: 94%;
      padding: 0 20px;
      display: flex; flex-direction: column; align-items: center; gap: 0;
      flex-shrink: 0;
    }

    /* Ornamento superior */
    .welcome-ornament {
      display: flex; align-items: center; gap: 12px;
      margin-bottom: 10px; opacity: 0.7;
    }
    .welcome-ornament::before,
    .welcome-ornament::after {
      content: '';
      flex: 1; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(180,150,60,0.6), transparent);
      min-width: 40px;
    }
    .welcome-ornament span {
      color: rgba(180,150,60,0.8); font-size: 0.7rem;
      font-family: 'Cinzel', serif; letter-spacing: 4px; text-transform: uppercase;
    }

    /* Título NefroQuest */
    .welcome-content h1 {
      display: block;
      font-family: 'Cinzel Decorative', 'Cinzel', serif;
      font-size: clamp(1.96rem, 5.6vw, 3.85rem);
      font-weight: 900;
      line-height: 1;
      margin: 0 0 4px;
      letter-spacing: 0.02em;
      background: linear-gradient(180deg,
        #fff8dc 0%,
        #ffd700 20%,
        #daa520 45%,
        #b8860b 65%,
        #ffd700 80%,
        #fff8dc 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: drop-shadow(0 1px 3px rgba(0,0,0,0.35));
      animation: titleAppear 1s ease-out;
      position: relative;
    }
@keyframes titleAppear {
      0%   { opacity: 0; transform: translateY(-12px) scale(0.96); }
      100% { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* Subtítulo Ascension */
    .welcome-content .welcome-credit {
      font-size: 0.65rem; color: rgba(200,180,120,0.55);
      margin: 4px 0 14px 0; letter-spacing: 0.5px;
    }
    .welcome-credit a { color: inherit; text-decoration: none; }
    .welcome-credit a:hover { color: rgba(255,215,0,0.7); }
    .welcome-sub {
      display: block;
      font-family: 'Cinzel', serif;
      font-size: clamp(0.75rem, 2.2vw, 1.05rem);
      letter-spacing: 0.55em;
      text-transform: uppercase;
      color: rgba(200,180,120,0.75);
      margin: 8px 0 20px;
      animation: titleAppear 1.2s ease-out;
    }

    .welcome-content .welcome-desc { display: none; }
    .welcome-stats {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
      margin: 0 0 12px 0;
    }
    .welcome-stat {
      background: rgba(10,15,30,0.85); border: 1px solid rgba(180,160,100,0.4); border-radius: 10px;
      padding: 10px 6px;
      -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    }
    .welcome-stat .ws-val { font-size: 1.2rem; font-weight: 700; color: var(--gold); display: block; }
    .welcome-stat .ws-lbl { font-size: 0.62rem; color: var(--txt-dim); text-transform: uppercase; letter-spacing: 1px; }
    .welcome-saved-info {
      width: 100%;
      max-width: 340px;
      margin-left: auto !important;
      margin-right: auto !important;
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid rgba(60,80,120,0.3) !important;
    }
    /* Faixa superior — label + tempo */
    .wsaved-top {
      background: linear-gradient(90deg, rgba(20,10,40,0.95) 0%, rgba(10,6,25,0.95) 100%);
      border-bottom: 1px solid rgba(100,70,180,0.2);
      padding: 7px 14px;
      display: flex; align-items: center; justify-content: space-between;
    }
    .wsaved-label {
      font-family: 'Cinzel', serif; font-size: 0.58rem;
      letter-spacing: 2.5px; text-transform: uppercase;
      color: rgba(185,160,240,0.85);
    }
    .wsaved-time-lbl {
      font-size: 0.62rem; color: rgba(170,190,220,0.75); font-style: italic;
    }
    /* Linha inferior — nome + stats */
    .wsaved-bottom {
      background: rgba(10,15,30,0.7);
      padding: 10px 24px 10px 14px;
      display: flex; align-items: center; gap: 14px;
    }
    .wsaved-charname {
      font-family: 'Cinzel', serif; font-size: 0.88rem;
      color: #d0c0f0; font-weight: 700; flex: 1;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .wsaved-stats {
      display: flex; gap: 22px; align-items: flex-end;
    }
    .wsaved-stat {
      text-align: center; display: flex; flex-direction: column;
      align-items: center; gap: 3px;
    }
    .wsaved-stat .ws-v {
      font-size: 0.92rem; font-weight: 700;
      display: flex; align-items: center; min-height: 1.25rem;
    }
    .wsaved-stat .ws-l {
      font-size: 0.52rem; color: rgba(155,175,210,0.75);
      text-transform: uppercase; letter-spacing: 1px; line-height: 1;
    }
    /* Botões primários (Nova Jornada + Continuar) — entre o quadro e os secundários */
    .welcome-primary-btns {
      display: flex;
      flex-direction: row;
      gap: 8px;
      justify-content: center;
      width: 100%;
      max-width: 340px;
      margin: 8px auto 0;
    }
    .welcome-primary-btns .btn {
      font-family: 'Cinzel', serif;
      font-size: 0.72rem; padding: 12px 20px;
      letter-spacing: 1.5px; text-transform: uppercase;
      flex: 1; border-radius: 10px; font-weight: 700; cursor: pointer;
      transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, color 0.2s;
      background: rgba(15,22,45,0.8);
      border: 1px solid rgba(180,150,60,0.4);
      color: rgba(220,195,120,0.85);
      box-shadow: inset 0 1px 0 rgba(255,215,0,0.06), 0 2px 8px rgba(0,0,0,0.5);
      -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    }
    .welcome-primary-btns .btn:hover {
      border-color: rgba(255,215,0,0.7); color: #ffd700;
      background: rgba(20,30,60,0.9);
      box-shadow: inset 0 1px 0 rgba(255,215,0,0.1), 0 0 16px rgba(255,215,0,0.12), 0 4px 12px rgba(0,0,0,0.5);
    }
    .welcome-primary-btns .btn:active { transform: translateY(1px); }
    .welcome-primary-btns .btn.gold {
      border-color: rgba(180,150,60,0.4) !important;
      color: rgba(220,195,120,0.85) !important;
      background: rgba(15,22,45,0.8) !important;
      box-shadow: inset 0 1px 0 rgba(255,215,0,0.06), 0 2px 8px rgba(0,0,0,0.5) !important;
    }
    .welcome-primary-btns .btn.gold:hover {
      border-color: rgba(255,215,0,0.7) !important; color: #ffd700 !important;
      background: rgba(20,30,60,0.9) !important;
      box-shadow: inset 0 1px 0 rgba(255,215,0,0.1), 0 0 16px rgba(255,215,0,0.12), 0 4px 12px rgba(0,0,0,0.5) !important;
    }
    .welcome-primary-btns .btn.continue-btn {
      border-color: rgba(52,200,120,0.45);
      color: rgba(100,235,170,0.9);
    }
    .welcome-primary-btns .btn.continue-btn:hover {
      border-color: rgba(52,211,153,0.8); color: #6ee7b7;
      box-shadow: inset 0 1px 0 rgba(52,211,153,0.06), 0 0 16px rgba(52,211,153,0.15), 0 4px 12px rgba(0,0,0,0.5);
    }
    /* Botões da welcome screen — estilo consistente com tela de perguntas */
    .welcome-buttons {
      display: flex; flex-direction: row; gap: 8px;
      margin-top: 12px; justify-content: center; flex-wrap: wrap;
      width: 88%; margin-left: auto; margin-right: auto;
      padding-top: 10px;
      border-top: 1px solid rgba(60,80,120,0.25);
    }
    .welcome-buttons .btn {
      font-family: 'Cinzel', serif;
      font-size: 0.65rem; padding: 10px 8px;
      letter-spacing: 1.5px; text-transform: uppercase;
      border-radius: 10px; font-weight: 700; cursor: pointer;
      transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, color 0.2s;
      background: rgba(15,22,45,0.8);
      border: 1px solid rgba(60,90,140,0.45);
      color: rgba(130,160,200,0.75);
      box-shadow: inset 0 1px 0 rgba(100,140,220,0.04), 0 2px 8px rgba(0,0,0,0.5);
      -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
      flex: 1 1 calc(50% - 8px); max-width: calc(50% - 8px);
    }
    .welcome-buttons .btn:hover {
      border-color: rgba(100,140,220,0.6); color: #a0c0e8;
      background: rgba(18,28,55,0.9);
      box-shadow: 0 0 12px rgba(80,120,220,0.1), 0 4px 12px rgba(0,0,0,0.5);
    }
    .welcome-buttons .btn:active { transform: translateY(1px); }

    /* Continuar / Nova (fallback se aparecerem aqui) */
    .welcome-buttons .btn.continue-btn {
      border-color: rgba(52,200,120,0.45) !important;
      color: rgba(100,235,170,0.9) !important;
    }
    .welcome-buttons .btn.gold {
      border-color: rgba(180,150,60,0.4) !important;
      color: rgba(220,195,120,0.85) !important;
    }

    /* Botões secundários */
    .welcome-buttons .btn.sec {
      border-color: rgba(60,90,140,0.45) !important;
      color: rgba(130,160,200,0.75) !important;
      background: rgba(15,22,45,0.8) !important;
      box-shadow: inset 0 1px 0 rgba(100,140,220,0.04), 0 2px 8px rgba(0,0,0,0.5) !important;
    }
    .welcome-buttons .btn.sec:hover {
      border-color: rgba(100,140,220,0.6) !important; color: #a0c0e8 !important;
      box-shadow: 0 0 12px rgba(80,120,220,0.1), 0 4px 12px rgba(0,0,0,0.5) !important;
    }

    @media (max-width: 500px) {
      .welcome-primary-btns { flex-direction: column; }
      .welcome-primary-btns .btn { width: 100%; flex: 1 1 100%; }
      .welcome-buttons { flex-direction: column; }
      .welcome-buttons .btn { min-width: unset; width: 100%; flex: 1 1 100%; max-width: 100%; }
    }

    /* Botão MODOS DE JOGO — sempre visível, grupo individual escondido */
    .btn-game-modes { display: block; }
    .game-mode-btns-group { display: none !important; }

    /* Overlay do popup MODOS DE JOGO */
    .game-modes-overlay {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,0.82); z-index: var(--z-nav);
      align-items: center; justify-content: center;
      -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    }
    .game-modes-overlay.show { display: flex; }
    .game-modes-box {
      background: linear-gradient(180deg, #1a2744, #0d1426);
      border: 2px solid var(--gold); border-radius: 16px;
      max-width: 340px; width: 92%; padding: 28px 20px 22px;
      box-shadow: 0 0 60px rgba(255,215,0,0.18);
      animation: modalIn 0.35s ease-out;
      position: relative;
    }
    .game-modes-box h3 {
      text-align: center; font-family: 'Cinzel', serif;
      color: var(--gold); font-size: 1.05rem; letter-spacing: 0.06em;
      margin: 0 0 18px; text-shadow: 0 0 12px rgba(255,215,0,0.35);
    }
    .game-modes-box .gm-btn {
      display: flex; align-items: center; gap: 12px;
      width: 100%; background: rgba(255,255,255,0.04);
      border: 1px solid var(--blue-dark); border-radius: 10px;
      padding: 13px 16px; margin-bottom: 10px;
      cursor: pointer; color: #c8d8f0; font-size: 0.88rem;
      font-family: 'Philosopher', serif; transition: background 0.2s, border-color 0.2s;
      text-align: left;
    }
    .game-modes-box .gm-btn:last-of-type { margin-bottom: 0; }
    .game-modes-box .gm-btn:hover { background: rgba(255,215,0,0.08); border-color: var(--gold); }
    .game-modes-box .gm-btn .gm-icon { font-size: 1.3rem; flex-shrink: 0; }
    .game-modes-box .gm-btn .gm-label { display: flex; flex-direction: column; gap: 2px; }
    .game-modes-box .gm-btn .gm-title { font-weight: bold; font-size: 0.92rem; }
    .game-modes-box .gm-btn .gm-desc { font-size: 0.72rem; color: var(--txt-dim); }
    .game-modes-box .gm-btn.weak-btn { border-color: rgba(251,113,133,0.35); }
    .game-modes-box .gm-btn.weak-btn .gm-title { color: #fb7185; }
    .game-modes-box .gm-btn.weak-btn:hover { background: rgba(251,113,133,0.1); border-color: #fb7185; }
    .game-modes-close {
      position: absolute; top: 10px; right: 12px;
      background: none; border: none; color: var(--txt-dim);
      font-size: 1.3rem; cursor: pointer; line-height: 1;
      padding: 4px; transition: color 0.2s;
    }
    .game-modes-close:hover { color: var(--gold); }

    /* ── IDENTITY CHOOSER — primeira abertura ───────────────────────────── */
    @keyframes identityIn {
      from { opacity: 0; transform: translateY(24px) scale(0.97); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    .identity-overlay {
      position: fixed; inset: 0; z-index: var(--z-mentor);
      background: rgba(5, 8, 20, 0.88);
      -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
      display: flex; align-items: center; justify-content: center;
      padding: var(--space-5);
      opacity: 0; transition: opacity 0.3s ease;
      pointer-events: none;
    }
    .identity-overlay.visible { opacity: 1; pointer-events: all; }
    .identity-modal {
      background: linear-gradient(180deg, #141f3a 0%, #0c1428 100%);
      border: 2px solid rgba(255,215,0,0.3);
      border-radius: var(--radius-xl);
      padding: var(--space-6) var(--space-5);
      max-width: 480px; width: 100%;
      text-align: center;
      box-shadow: 0 0 60px rgba(0,0,0,0.7), 0 0 30px rgba(255,215,0,0.08);
      animation: identityIn 0.4s ease-out both;
    }
    .identity-ornament {
      font-family: 'Cinzel', serif;
      font-size: var(--text-xs); letter-spacing: 0.12em;
      color: rgba(255,215,0,0.55); text-transform: uppercase;
      margin-bottom: var(--space-4);
    }
    .identity-title {
      font-family: 'Cinzel Decorative', serif;
      font-size: var(--text-lg); color: var(--txt);
      margin-bottom: var(--space-2);
      background: linear-gradient(180deg, #fff8dc 0%, #ffd700 60%, #daa520 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    }
    .identity-sub {
      font-size: var(--text-xs); color: var(--txt-dim);
      margin-bottom: var(--space-6); line-height: 1.5;
    }
    .identity-paths {
      display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
    }
    .identity-path {
      background: rgba(255,255,255,0.03);
      border: 2px solid rgba(255,255,255,0.1);
      border-radius: var(--radius-lg);
      padding: var(--space-5) var(--space-4);
      cursor: pointer; text-align: center; color: var(--txt);
      transition: border-color 0.2s, background 0.2s, transform 0.15s, box-shadow 0.2s;
      display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
    }
    .identity-path:hover { transform: translateY(-3px); }
    .identity-path.study:hover {
      border-color: var(--blue); background: rgba(96,165,250,0.07);
      box-shadow: 0 6px 20px rgba(96,165,250,0.15);
    }
    .identity-path.combat:hover {
      border-color: var(--gold); background: rgba(255,215,0,0.06);
      box-shadow: 0 6px 20px rgba(255,215,0,0.15);
    }
    .identity-path-icon { font-size: 2.2rem; line-height: 1; }
    .identity-path-name {
      font-family: 'Cinzel', serif; font-size: var(--text-sm);
      font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    }
    .identity-path.study  .identity-path-name { color: var(--blue-light); }
    .identity-path.combat .identity-path-name { color: var(--gold); }
    .identity-path-desc {
      font-size: var(--text-2xs); color: var(--txt-dim); line-height: 1.4;
    }
    .identity-path:active { transform: translateY(0); }
    @media (max-width: 400px) {
      .identity-paths { grid-template-columns: 1fr; }
    }

    /* ── GHOST BUTTON variant ────────────────────────────────────────────── */
    .btn.ghost {
      background: transparent;
      border-color: rgba(255,255,255,0.18);
      color: var(--txt-dim);
      box-shadow: none;
    }
    .btn.ghost:hover {
      background: rgba(255,255,255,0.05);
      border-color: rgba(255,255,255,0.35);
      color: var(--txt);
      box-shadow: none;
    }

    /* SOUND CONTROLS — estático dentro do game-title no PC */
    .sound-controls {
      display: none; /* oculto por padrão; o PC mostra via media query */
    }
    .sound-toggle {
      background: rgba(15,20,40,1); border: 2px solid var(--blue-dark); border-radius: 8px;
      min-width: 44px; min-height: 44px; cursor: pointer; color: var(--txt-dim); font-size: 0.85rem;
      transition: border-color 0.2s, color 0.2s, opacity 0.2s;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    }
    .sound-toggle:hover { border-color: var(--gold); color: var(--gold); }
    .sound-toggle.muted { opacity: 0.5; }

    /* ===== TOAST NOTIFICATIONS ===== */
    .nq-toast {
      position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px);
      background: #0e1830; border: 1px solid rgba(96,165,250,0.4);
      color: #d5e2ff; padding: 11px 20px; border-radius: 10px;
      font-size: 0.85rem; z-index: var(--z-top); max-width: 340px; width: 90%;
      text-align: center; box-shadow: 0 6px 24px rgba(0,0,0,0.6);
      animation: toastIn 0.25s ease forwards;
      pointer-events: none;
    }
    .nq-toast.success { border-color: rgba(52,211,153,0.5); color: #a7f3d0; }
    .nq-toast.error   { border-color: rgba(251,113,133,0.5); color: #fca5a5; }
    .nq-toast.warning { border-color: rgba(251,191,36,0.5);  color: #fde68a; }
    .nq-toast.out     { animation: toastOut 0.25s ease forwards; }
    @keyframes toastIn  { from { opacity:0; transform:translateX(-50%) translateY(20px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
    @keyframes toastOut { from { opacity:1; transform:translateX(-50%) translateY(0); } to { opacity:0; transform:translateX(-50%) translateY(10px); } }

    /* ===== LANDING SCREEN ===== */
    #landingScreen {
      position: fixed; inset: 0; z-index: var(--z-modal-high);
      /* background aplicado via #landingScreen no bloco de redesign (bg-hall.jpg) */
      display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
      gap: 0;
      overflow-y: auto;
      padding: 28px 16px;
    }
    #landingScreen.hidden { display: none; }
    .landing-bg {
      position: absolute; inset: 0; pointer-events: none;
      background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(90,50,160,0.14) 0%, transparent 70%),
        radial-gradient(ellipse 60% 40% at 20% 90%, rgba(30,70,150,0.13) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 90%, rgba(30,70,150,0.10) 0%, transparent 60%);
    }
    .landing-bg::before {
      content: '';
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(60,100,180,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(60,100,180,0.04) 1px, transparent 1px);
      background-size: 60px 60px;
      mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
    }
    .landing-content {
      position: relative; z-index: 2;
      display: flex; flex-direction: column; align-items: center; gap: 8px;
      width: 100%; max-width: 390px; padding: 34px 26px 24px;
      margin: auto 0;
      background: linear-gradient(180deg, rgba(2,8,30,0.95), rgba(2,6,24,0.97));
      border: 2px solid rgba(209,157,76,0.9);
      border-radius: 20px;
      box-shadow: 0 22px 60px rgba(0,0,0,0.72), 0 0 0 1px rgba(255,215,130,0.2) inset;
    }
    .landing-content::before {
      content: '';
      position: absolute;
      inset: 8px;
      border: 1px solid rgba(255,215,130,0.45);
      border-radius: 14px;
      pointer-events: none;
    }
    .landing-ornament {
      font-size: 0.68rem; color: var(--gold); letter-spacing: 3px;
      text-transform: uppercase; opacity: 0.8; margin-bottom: 2px;
    }
    .landing-title {
      font-family: 'Cinzel Decorative', 'Cinzel', serif;
      font-size: clamp(1.8rem, 7vw, 2.6rem);
      color: var(--gold, #ffd700); margin: 0;
      text-shadow: 0 0 30px rgba(255,215,0,0.35), 0 2px 4px rgba(0,0,0,0.8);
      letter-spacing: 2px;
    }
    .landing-sub {
      font-family: var(--font-title, 'Cinzel', serif);
      font-size: 0.85rem; color: rgba(255,215,0,0.55);
      letter-spacing: 6px; text-transform: uppercase; margin-bottom: 4px;
    }
    .landing-tagline {
      font-size: 0.78rem; color: var(--txt-dim, #7e9ec8);
      text-align: center; letter-spacing: 0.5px; margin-bottom: 6px;
      line-height: 1.4;
    }
    .landing-divider {
      width: 100%; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,215,0,0.25), transparent);
      margin: 2px 0 8px;
    }
    .landing-btn-google {
      width: 100%; padding: 12px 20px;
      background: #fff; color: #1a1a2e;
      border: none; border-radius: 10px;
      font-size: 0.95rem; font-weight: 700;
      cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px;
      transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
      box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    }
    .landing-btn-google:hover { background: #f0f0f0; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,0.5); }
    .landing-btn-google:active { transform: translateY(0); }
    .landing-btn-email {
      width: 100%; padding: 11px 20px;
      background: rgba(42,74,122,0.35); color: #90b4e0;
      border: 2px solid rgba(42,74,122,0.6); border-radius: 10px;
      font-size: 0.9rem; font-weight: 600;
      cursor: pointer; transition: border-color 0.2s, background 0.2s, transform 0.1s;
    }
    .landing-btn-email:hover { border-color: rgba(96,165,250,0.7); background: rgba(42,74,122,0.5); transform: translateY(-1px); }
    .landing-guest-link {
      font-size: 0.78rem; color: rgba(126,158,200,0.6);
      cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
      transition: color 0.2s; margin-top: 4px;
      background: none; border: none; padding: 0;
    }
    .landing-guest-link:hover { color: rgba(126,158,200,0.9); }
    .landing-msg {
      font-size: 0.8rem; color: #fb7185; text-align: center; display: none;
      background: rgba(251,113,133,0.1); border: 1px solid rgba(251,113,133,0.3);
      border-radius: 8px; padding: 8px 12px; width: 100%;
    }

    /* ── Desktop landing: card centralizado, sem scrollbar interno ── */
    @media (min-width: 769px) {
      #landingScreen { padding: 40px 20px; }
      .landing-content {
        max-width: 560px;
        padding: 50px 56px 42px;
        gap: 10px;
      }
      .landing-title { font-size: 2.5rem; }
      .landing-tagline { font-size: 0.84rem; margin-bottom: 10px; }
      .landing-btn-google { padding: 14px 20px; font-size: 1rem; }
      .landing-btn-email  { padding: 12px 20px; font-size: 0.95rem; }
      .landing-stats-section {
        border-top: 1px solid rgba(255,215,0,0.1) !important;
        padding-top: 14px !important;
        margin-top: 10px !important;
      }
    }

    /* ===== PROFILE ICON + POPUP ===== */
    .profile-btn {
      background: rgba(15,20,40,1); border: 2px solid var(--blue-dark); border-radius: 8px;
      width: 30px; height: 30px; cursor: pointer; color: var(--txt-dim); font-size: 0.85rem;
      transition: border-color 0.2s, color 0.2s;
      display: none; align-items: center; justify-content: center;
      box-shadow: 0 2px 10px rgba(0,0,0,0.5);
      position: relative;
    }
    .profile-btn.visible { display: flex; border-color: var(--blue); color: var(--blue); }
    .profile-btn:hover { border-color: var(--gold); color: var(--gold); }
    .profile-popup {
      position: absolute; top: calc(100% + 8px); right: 0;
      background: rgba(10,15,35,0.98); border: 1px solid rgba(42,74,122,0.8);
      border-radius: 10px; padding: 12px 14px; min-width: 200px;
      box-shadow: 0 8px 30px rgba(0,0,0,0.7);
      display: none; flex-direction: column; gap: 10px;
      z-index: var(--z-top);
    }
    .profile-popup.open { display: flex; }
    .profile-popup-email {
      font-size: 0.78rem; color: #a8c4e8;
      word-break: break-all; padding-bottom: 8px;
      border-bottom: 1px solid rgba(42,74,122,0.5);
    }
    .profile-popup-email strong { display: block; color: var(--txt-dim); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 3px; }
    .profile-popup-logout {
      background: rgba(251,113,133,0.12); color: #fb7185;
      border: 1px solid rgba(251,113,133,0.35); border-radius: 7px;
      padding: 7px 12px; font-size: 0.82rem; font-weight: 600;
      cursor: pointer; transition: background 0.2s;
      text-align: center; min-height: 44px;
      display: flex; align-items: center; justify-content: center;
    }
    .profile-popup-logout:hover { background: rgba(251,113,133,0.22); }
    .profile-popup-item {
      background: rgba(255,255,255,0.04); color: #c8d8f0;
      border: 1px solid rgba(42,74,122,0.45); border-radius: 7px;
      padding: 7px 12px; font-size: 0.82rem; cursor: pointer;
      transition: background 0.2s; text-align: left; width: 100%;
      min-height: 44px; display: flex; align-items: center;
    }
    .profile-popup-item:hover { background: rgba(255,255,255,0.09); }
    .profile-popup-item.admin-item {
      background: rgba(255,215,0,0.06); border-color: rgba(255,215,0,0.25);
      color: #ffd700; display: none;
    }
    .profile-popup-item.admin-item.visible { display: block; }
    .profile-popup-divider {
      border: none; border-top: 1px solid rgba(42,74,122,0.4); margin: 2px 0;
    }

    /* PRICING MODAL */
    #pricingModal {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,0.92); z-index: var(--z-critical);
      align-items: center; justify-content: center;
      -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 16px; overflow-y: auto;
    }
    #pricingModal.show { display: flex; }
    .pricing-wrap {
      max-width: 880px; width: 100%; text-align: center;
      animation: scaleIn 0.35s ease-out;
    }
    .pricing-ornament { color: #a08040; font-size: 0.7rem; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 8px; }
    .pricing-wrap h2 {
      color: #ffd700; font-family: 'Cinzel Decorative', 'Cinzel', serif;
      font-size: clamp(1.4rem, 4vw, 2rem); margin-bottom: 2px; letter-spacing: 1px;
    }
    .pricing-sub-title { color: #6080a0; font-size: 0.7rem; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 8px; }
    .pricing-wrap > p {
      color: #a0b8d0; font-size: 0.88rem; margin-bottom: 18px;
    }
    .pricing-stats-row {
      display: flex; justify-content: center; gap: 24px;
      margin-bottom: 24px; flex-wrap: wrap;
    }
    .pricing-stat-pill {
      background: rgba(255,215,0,0.07); border: 1px solid rgba(255,215,0,0.2);
      border-radius: 20px; padding: 6px 16px; font-size: 0.78rem; color: #d4af60;
    }
    .pricing-stat-pill strong { color: #ffd700; }
    .pricing-cards {
      display: grid; grid-template-columns: 1fr 1fr 1fr;
      gap: 16px; margin-bottom: 20px;
    }
    @media (max-width: 640px) { .pricing-cards { grid-template-columns: 1fr; } }
    .pricing-card {
      background: linear-gradient(160deg,#0f1e30,#0b1428);
      border: 1px solid var(--blue-dark); border-radius: 20px;
      padding: 26px 20px 20px; cursor: pointer;
      transition: transform 0.2s, border-color 0.25s, box-shadow 0.25s;
      position: relative; text-align: center;
    }
    .pricing-card:hover { transform: translateY(-3px); }
    .pricing-card:hover { border-color: var(--blue); box-shadow: 0 0 20px rgba(96,165,250,0.12); }
    .pricing-card.featured {
      border-color: #ffd700;
      box-shadow: 0 0 32px rgba(255,215,0,0.14);
    }
    .pricing-card.featured:hover { box-shadow: 0 0 44px rgba(255,215,0,0.22); }
    .pricing-badge {
      position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
      background: #ffd700; color: #1a0e00;
      font-size: 0.62rem; font-weight: 900; padding: 3px 14px;
      border-radius: 20px; white-space: nowrap; font-family: 'Cinzel', serif; letter-spacing: 1px;
    }
    .pricing-icon { font-size: 2.2rem; margin-bottom: 12px; }
    .pricing-card h3 {
      color: #e0f0ff; font-family: 'Cinzel', serif;
      font-size: 0.82rem; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px;
    }
    .pricing-amount {
      color: #ffd700; font-size: clamp(1.6rem, 5vw, 2.1rem);
      font-family: 'Cinzel', serif; font-weight: 900; line-height: 1;
      margin-bottom: 3px;
    }
    .pricing-period { color: #708090; font-size: 0.72rem; margin-bottom: 14px; }
    .pricing-divider { border: none; border-top: 1px solid rgba(42,74,122,0.4); margin-bottom: 14px; }
    .pricing-features { list-style: none; padding: 0; margin: 0 0 16px; text-align: left; display: flex; flex-direction: column; gap: 6px; }
    .pricing-features li {
      color: #a0c0e0; font-size: 0.78rem; display: flex; align-items: flex-start; gap: 7px;
    }
    .pricing-features li::before { content: '✓'; color: #4ade80; font-weight: 700; flex-shrink: 0; }
    .pricing-features li.pf-no { color: #506070; }
    .pricing-features li.pf-no::before { content: '✕'; color: #506070; }
    .pricing-choose-btn {
      width: 100%; padding: 11px;
      border-radius: 10px; font-size: 0.8rem; font-weight: 700;
      cursor: pointer; transition: opacity 0.2s;
      font-family: 'Cinzel', serif; text-transform: uppercase; letter-spacing: 1px;
    }
    .pricing-choose-btn:hover { opacity: 0.85; }
    .btn-free { background: rgba(96,165,250,0.1); color: var(--blue); border: 2px solid rgba(96,165,250,0.45) !important; }
    .btn-monthly { background: rgba(168,85,247,0.15); color: var(--purple); border: 2px solid rgba(168,85,247,0.4) !important; }
    .btn-lifetime { background: linear-gradient(135deg,#b8860b,#ffd700); color: #1a0e00; border: none !important; }
    .pricing-twa-notice { margin-top: 12px; font-size: 0.8rem; color: #6080a0; text-align: center; line-height: 1.5; padding: 10px; background: rgba(96,165,250,0.06); border-radius: 8px; border: 1px solid rgba(96,165,250,0.15); }
    .pricing-login-link {
      color: #506070; font-size: 0.8rem; cursor: pointer;
      text-decoration: underline; background: none; border: none;
    }
    .pricing-login-link:hover { color: #90b4e0; }
    .pricing-close-btn {
      position: absolute; top: 14px; right: 18px;
      background: none; border: none; color: #4a6088;
      font-size: 1.4rem; cursor: pointer; line-height: 1;
    }
    .pricing-close-btn:hover { color: #90b4e0; }
    /* Banner promocional a cada 10 questões */
    .promo-banner-overlay {
      position: fixed; inset: 0; z-index: var(--z-critical);
      display: flex; align-items: flex-end; justify-content: center;
      padding: 0 16px 24px; pointer-events: none;
    }
    .promo-banner {
      background: linear-gradient(135deg,#0f1e30,#0b1428);
      border: 1px solid rgba(255,215,0,0.4); border-radius: 16px;
      padding: 16px 20px; max-width: 520px; width: 100%;
      display: flex; align-items: center; gap: 14px;
      box-shadow: 0 8px 40px rgba(0,0,0,0.8), 0 0 20px rgba(255,215,0,0.08);
      animation: slideUpBanner 0.4s ease-out; pointer-events: all;
    }
    @keyframes slideUpBanner { from{transform:translateY(40px);opacity:0} to{transform:translateY(0);opacity:1} }
    .promo-banner-icon { font-size: 2rem; flex-shrink: 0; }
    .promo-banner-body { flex: 1; text-align: left; }
    .promo-banner-title { color: #ffd700; font-family: 'Cinzel',serif; font-size: 0.85rem; font-weight: 700; margin-bottom: 3px; }
    .promo-banner-text { color: #8090b0; font-size: 0.74rem; line-height: 1.4; }
    .promo-banner-cta { background: linear-gradient(135deg,#b8860b,#ffd700); color: #1a0e00; border: none; border-radius: 8px; padding: 8px 14px; font-family: 'Cinzel',serif; font-size: 0.72rem; font-weight: 700; cursor: pointer; white-space: nowrap; flex-shrink: 0; letter-spacing: 0.5px; }
    .promo-banner-close { background: none; border: none; color: #4a6088; font-size: 1.1rem; cursor: pointer; padding: 0 0 0 8px; flex-shrink: 0; }
    .promo-banner-close:hover { color: #90b4e0; }

    /* ACCOUNT MODAL */
    #accountModal, #planModal, #adminModal {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,0.88); z-index: var(--z-critical);
      align-items: center; justify-content: center;
      -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 16px;
    }
    #accountModal.show, #planModal.show, #adminModal.show { display: flex; }
    .modal-panel {
      background: linear-gradient(160deg, #0d1428, #12192e);
      border: 2px solid var(--blue-dark); border-radius: 20px;
      max-width: 420px; width: 100%; padding: 28px 24px;
      max-height: calc(100vh - 64px); overflow-y: auto;
      box-shadow: 0 0 40px rgba(30,60,120,0.4);
      animation: scaleIn 0.3s ease-out;
      position: relative;
    }
    .modal-panel-x {
      position: sticky; top: -28px; float: right;
      margin: -20px -16px 4px 0;
      background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
      border-radius: 50%; width: 28px; height: 28px;
      display: flex; align-items: center; justify-content: center;
      color: #a0b8d0; font-size: 1.1rem; cursor: pointer;
      transition: background 0.15s, color 0.15s; z-index: 10;
      flex-shrink: 0; line-height: 1;
    }
    .modal-panel-x:hover { background: rgba(255,80,80,0.2); color: #fff; border-color: rgba(255,80,80,0.4); }
    .modal-panel h2 {
      color: #ffd700; font-family: 'Cinzel', serif;
      font-size: 1.05rem; letter-spacing: 1px;
      margin: 0 0 18px; text-align: center;
    }
    .modal-panel .form-group { margin-bottom: 12px; }
    .modal-panel label { display: block; color: #708090; font-size: 0.75rem; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
    .modal-panel input, .modal-panel select {
      width: 100%; box-sizing: border-box;
      background: rgba(255,255,255,0.06); border: 1px solid var(--blue-dark);
      border-radius: 8px; padding: 9px 12px; color: #e0f0ff;
      font-size: 0.85rem; outline: none;
    }
    .modal-panel input:focus, .modal-panel select:focus { border-color: var(--blue); }
    .modal-panel .modal-actions { display: flex; gap: 10px; margin-top: 18px; }
    .modal-panel .modal-actions button { flex: 1; padding: 10px; border-radius: 8px; font-size: 0.85rem; font-weight: 700; cursor: pointer; font-family: 'Cinzel', serif; }
    .plan-badge {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 10px 18px; border-radius: 12px;
      font-family: 'Cinzel', serif; font-size: 0.95rem;
      margin: 0 auto 20px; font-weight: 700;
    }
    .plan-badge.free { background: rgba(96,165,250,0.12); color: var(--blue); border: 2px solid rgba(96,165,250,0.4); }
    .plan-badge.premium { background: rgba(255,215,0,0.1); color: #ffd700; border: 2px solid rgba(255,215,0,0.4); }
    .plan-badge.admin { background: rgba(167,139,250,0.12); color: #a78bfa; border: 2px solid rgba(167,139,250,0.4); }
    .plan-stat { color: #a0b8d0; font-size: 0.85rem; margin-bottom: 8px; text-align: center; }
    .plan-bar-wrap { background: rgba(255,255,255,0.08); border-radius: 6px; height: 8px; margin: 10px 0 20px; overflow: hidden; }
    .plan-bar { height: 100%; border-radius: 6px; background: linear-gradient(90deg,var(--blue),#a78bfa); transition: width 0.5s; }
    .whitelist-input-row { display: flex; gap: 8px; margin-bottom: 14px; }
    .whitelist-input-row input { flex: 1; }
    .whitelist-list { max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
    .whitelist-item {
      display: flex; align-items: center; justify-content: space-between;
      background: rgba(255,255,255,0.04); border: 1px solid var(--blue-dark);
      border-radius: 8px; padding: 7px 12px; font-size: 0.8rem; color: #90b4e0;
    }
    .whitelist-item button { background: rgba(251,113,133,0.15); color: #fb7185; border: 1px solid rgba(251,113,133,0.3); border-radius: 5px; padding: 3px 8px; font-size: 0.75rem; cursor: pointer; }
    .whitelist-empty { color: #708090; font-size: 0.82rem; text-align: center; padding: 16px; }

    /* STREAK MULTIPLIER VISUAL */
    .tile-streak { position: relative; }
    .streak-fire { font-size: 0.7rem; display: block; margin-top: 2px; }
    .streak-mult { 
      display: inline-block; font-size: 0.6rem; font-weight: 700; padding: 1px 5px; 
      border-radius: 4px; margin-top: 2px; 
    }
    .streak-x2 .streak-mult { background: rgba(234,179,8,0.3); color: #fbbf24; border: 1px solid rgba(234,179,8,0.5); }
    .streak-x3 .streak-mult { background: rgba(239,68,68,0.3); color: #f87171; border: 1px solid rgba(239,68,68,0.5); }
    .streak-x4 .streak-mult { background: rgba(168,85,247,0.3); color: var(--purple); border: 1px solid rgba(168,85,247,0.5); }
    .streak-x5 .streak-mult { background: rgba(255,215,0,0.3); color: #ffd700; border: 1px solid rgba(255,215,0,0.5); text-shadow: 0 0 6px rgba(255,215,0,0.5); }

    /* BADGES DE PROGRESSÃO */
    .badges-container {
      margin-top: 10px; padding: 8px; background: rgba(10,15,30,0.6);
      border: 1px solid var(--blue-dark); border-radius: 8px;
    }
    .badges-title {
      font-size: 0.7rem; color: var(--gold); text-transform: uppercase;
      letter-spacing: 1px; margin-bottom: 6px; text-align: center;
    }
    .badges-grid {
      display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
    }
    .badge-slot {
      aspect-ratio: 1; border-radius: 6px; overflow: hidden;
      border: 2px solid var(--blue-dark); background: rgba(0,0,0,0.5);
      position: relative; transition: border-color 0.3s, box-shadow 0.3s;
    }
    .badge-slot.unlocked {
      border-color: var(--gold); box-shadow: 0 0 10px rgba(255,215,0,0.3);
    }
    .badge-slot img {
      width: 100%; height: 100%; object-fit: cover;
      filter: grayscale(60%) brightness(0.7) saturate(0.6);
      opacity: 0.7;
      transition: filter 0.3s, opacity 0.3s;
    }
    .badge-slot.unlocked img {
      filter: grayscale(0%) brightness(1) saturate(1);
      opacity: 1;
    }
    .badge-slot .badge-lock {
      position: absolute; inset: 0; display: flex; align-items: center;
      justify-content: center; font-size: 1.3rem;
      color: rgba(255,255,255,0.85);
      text-shadow: 0 1px 6px rgba(0,0,0,0.9), 0 0 10px rgba(0,0,0,0.7);
      background: rgba(0,0,0,0.15);
    }
    .badge-slot.unlocked .badge-lock { display: none; }

    /* FOOTER */
    .game-footer {
      grid-column: 1 / -1;
      text-align: center;
      padding: 8px 0 4px;
      font-size: 0.72rem;
      color: var(--txt-dim);
      opacity: 0.7;
    }
    .game-footer a {
      color: var(--gold); text-decoration: none; opacity: 0.7;
      transition: opacity 0.2s;
    }
    .game-footer a:hover { opacity: 1; }

    /* SCROLLBAR */
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--blue-dark); border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: #3a6a9a; }

    /* ============ PC ONLY (min-width: 769px) ============ */
    @media (min-width: 769px) {
      /* Sound controls: estático no canto direito do game-title */
      .sound-controls {
        display: flex;
        flex-direction: row;
        gap: 4px;
        align-items: center;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        z-index: var(--z-top);
      }
      .sound-controls .sound-toggle {
        width: 30px; height: 30px; min-width: 30px; min-height: 30px;
        font-size: 0.78rem;
      }
    }

    /* ============ MOBILE RESPONSIVO ============ */
    @media (max-width: 768px) {
      /* Scroll mobile: body é o container de scroll principal */
      html { background: var(--bg); overflow-x: hidden; touch-action: pan-y; }
      body {
        background: var(--bg);
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); /* espaço para dock + home indicator */
        touch-action: pan-y; /* permite swipe horizontal via JS */
      }

      /* Layout principal: cresce conforme o conteúdo */
      .app {
        grid-template-columns: 1fr;
        padding: 8px;
        gap: 8px;
        min-height: auto;
        height: auto;
        overflow: visible;
        align-content: start;
        background: transparent;
      }

      /* Painel esquerdo: drawer deslizante */
      .panel.left {
        position: fixed;
        top: 0; left: 0;
        width: 100vw;
        height: 100vh; height: 100dvh;
        z-index: var(--z-modal);
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
        overflow-y: auto;
        border-radius: 0;
        box-shadow: 4px 0 30px rgba(0,0,0,0.8);
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: max(80px, calc(80px + env(safe-area-inset-bottom, 0px)));
        background: linear-gradient(180deg, #0c1e35 0%, #091626 50%, #060f1e 100%) !important;
        border: 2px solid var(--blue-dark);
        isolation: isolate;
      }
      .panel.left.mobile-open {
        transform: translateX(0);
      }

      /* Modal de lore do personagem */
      .hero-lore-modal {
        position: fixed;
        inset: 0;
        z-index: var(--z-nav);
        background: rgba(0,0,0,0.82);
        display: flex;
        align-items: center;
        justify-content: center;
        animation: fadeIn 0.25s ease;
        padding: 20px;
      }
      .hero-lore-card {
        background: linear-gradient(160deg, #0f1d3a 0%, #0a1428 60%, #0d1535 100%);
        border: 2px solid rgba(255,215,0,0.4);
        border-radius: 18px;
        padding: 24px 20px 20px;
        max-width: 340px;
        width: 100%;
        text-align: center;
        box-shadow: 0 0 40px rgba(255,215,0,0.12), 0 8px 32px rgba(0,0,0,0.8);
        animation: scaleIn 0.3s ease;
      }
      .hero-lore-card .lore-portrait {
        width: 80px; height: 80px;
        border-radius: 50%;
        border: 3px solid var(--gold);
        box-shadow: 0 0 18px rgba(255,215,0,0.4);
        object-fit: cover;
        margin-bottom: 10px;
      }
      .hero-lore-card .lore-name {
        font-family: 'Cinzel', serif;
        font-size: 1rem;
        font-weight: 700;
        color: var(--gold);
        margin-bottom: 2px;
      }
      .hero-lore-card .lore-title {
        font-family: 'Philosopher', serif;
        font-size: 0.75rem;
        color: #94a3b8;
        margin-bottom: 14px;
        font-style: italic;
      }
      .hero-lore-card .lore-text {
        font-family: 'Philosopher', serif;
        font-size: 0.82rem;
        color: #c8d8f0;
        line-height: 1.65;
        text-align: left;
        margin-bottom: 16px;
      }
      .hero-lore-card .lore-text p { margin-bottom: 10px; }
      .hero-lore-card .lore-text p:last-child { margin-bottom: 0; }
      .hero-lore-card .lore-close {
        background: linear-gradient(135deg, #d97706, #b45309);
        color: #fff;
        border: none;
        border-radius: 10px;
        padding: 9px 28px;
        font-family: 'Cinzel', serif;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.5px;
        cursor: pointer;
        box-shadow: 0 2px 10px rgba(217,119,6,0.4);
      }
      .portrait-frame { cursor: pointer; }

      /* Overlay escuro quando drawer aberto */
      .mobile-overlay {
        display: none;
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.65);
        z-index: var(--z-modal);
      }
      .mobile-overlay.active { display: block; }
      .drawer-close-btn {
        display: inline-flex; align-items: center; justify-content: center; gap: 5px;
        width: auto; margin: 12px 16px 20px;
        padding: 7px 18px;
        background: rgba(255,215,0,0.10);
        border: 1px solid rgba(255,215,0,0.30);
        border-radius: 8px;
        color: #ffd700; font-family: 'Cinzel', serif;
        font-size: 0.65rem; letter-spacing: 1px; font-weight: 700;
        cursor: pointer; text-align: left; text-transform: uppercase;
        box-shadow: none;
        align-self: flex-start;
      }
      .drawer-close-btn:hover { background: linear-gradient(180deg, #ffe44d 0%, #f0b800 50%, #c8930a 100%); }

      /* Atributos Totais: logo abaixo do herói no mobile */
      #equipTotalMobile {
        display: block;
        margin: 6px 10px 0;
        padding: 6px 10px;
        background: rgba(42,74,122,0.2);
        border-radius: 8px;
        border: 1px solid rgba(42,74,122,0.4);
        font-size: 0.75rem;
        color: #b0c4e8;
        text-align: center;
      }

      /* Painel direito: tela cheia, scroll próprio como fallback */
      .panel.right {
        padding: 12px;
        padding-right: 12px;
        min-height: auto;
        overflow-y: visible; /* deixa o .app controlar o scroll */
        touch-action: pan-y; /* permite swipe horizontal via JS */
      }

      /* Título menor — padding-top para não ficar sob os botões fixos do topo */
      .game-title { padding: 16px 0 2px; }
      .game-title h1 { font-size: 1.58rem; letter-spacing: 2px; }
      .game-title .subtitle { font-size: 0.6rem; letter-spacing: 4px; }

      /* Questão: texto menor */
      .question-text { font-size: 0.9rem; line-height: 1.5; }
      .option { font-size: 0.82rem; padding: 10px 12px; }
      /* Botão ? centralizado na qbox no mobile */
      .qbox::before {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        top: -14px;
      }

      /* Correção 4: Capítulo da Narrativa vai abaixo dos equipamentos no mobile */
      .panel.left { display: flex; flex-direction: column; }
      .panel.left .story { order: 10; }
      .panel.left .hud { order: 5; }
      .panel.left .equip { order: 8; }
      .panel.left .log { order: 12; }
      .panel.left .badges-container { order: 3; }

      /* Log/Jornada: tamanho moderado no mobile */
      .log {
        max-height: 130px;
        padding: 8px 10px;
      }
      .log h3 { font-size: 0.75rem; margin-bottom: 5px; }
      .log p { font-size: 0.68rem; margin-bottom: 3px; padding-bottom: 3px; }

      /* Dock lateral: oculto no mobile */
      .action-dock {
        display: none !important;
        grid-column: unset;
        grid-row: unset;
      }

      /* Barra de status mobile (ouro/streak/vidas) acima do dock */
      .mobile-status-bar {
        display: none;
      }
      @media (max-width: 768px) {
        .mobile-status-bar {
          display: none;
          position: fixed;
          bottom: calc(72px + env(safe-area-inset-bottom, 0px)); /* logo acima do bottom dock */
          left: 0; right: 0;
          z-index: var(--z-modal-low);
          background: linear-gradient(0deg, rgba(8,14,30,0.97) 0%, rgba(12,20,42,0.92) 100%);
          border-top: 1px solid rgba(255,215,0,0.15);
          padding: 5px 12px;
          gap: 0;
          align-items: center;
          justify-content: space-around;
          box-shadow: 0 -2px 12px rgba(0,0,0,0.5);
        }
        .mobile-status-bar .msb-item {
          display: flex;
          flex-direction: row;
          align-items: center;
          gap: 5px;
          flex: 1;
          justify-content: center;
        }
        .mobile-status-bar .msb-item:not(:last-child) {
          border-right: 1px solid rgba(255,255,255,0.08);
        }
        .mobile-status-bar .msb-icon {
          font-size: 0.95rem;
          line-height: 1;
        }
        .mobile-status-bar .msb-value {
          font-family: 'Cinzel', serif;
          font-size: 0.78rem;
          font-weight: 700;
          color: #e2e8f0;
          line-height: 1;
        }
        .mobile-status-bar .msb-gold .msb-value { color: #ffd700; }
        .mobile-status-bar .msb-streak .msb-value { color: #fb923c; }
        .mobile-status-bar .msb-lives .msb-value { color: #ef4444; }
        .mobile-status-bar.active { display: flex !important; }
        /* Ajustar padding-bottom do conteúdo para acomodar barra + dock */
        body { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important; }
      }

      /* Bottom dock mobile */
      .mobile-bottom-dock {
        display: none;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: var(--z-modal-low);
        background: linear-gradient(0deg, rgba(8,14,30,0.98) 0%, rgba(12,20,42,0.95) 100%);
        border-top: 1px solid rgba(255,215,0,0.2);
        padding: 8px 2px calc(8px + env(safe-area-inset-bottom, 0px));
        gap: 2px;
        align-items: center;
        justify-content: space-evenly;
        overflow-x: hidden;
        overflow-y: hidden;
        scrollbar-width: none;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.6);
      }
      .mobile-bottom-dock::-webkit-scrollbar { display: none; }

      .mobile-bottom-dock .mdock-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 10px;
        padding: 7px 4px 5px;
        cursor: pointer;
        flex: 1 1 0;
        min-width: 0;
        max-width: 70px;
        transition: background 0.2s, border-color 0.2s;
        -webkit-tap-highlight-color: transparent;
      }
      .mobile-bottom-dock .mdock-btn:active {
        background: rgba(255,255,255,0.1);
        transform: scale(0.95);
      }
      .mobile-bottom-dock .mdock-btn svg {
        width: 22px; height: 22px;
      }
      .mobile-bottom-dock .mdock-btn .mdock-label {
        font-size: 0.48rem;
        font-family: 'Cinzel', serif;
        letter-spacing: 0.2px;
        text-transform: uppercase;
        opacity: 0.8;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 56px;
        display: block;
        text-align: center;
      }
      .mobile-bottom-dock .mdock-btn.forge-item svg { color: #f59e5a; }
      .mobile-bottom-dock .mdock-btn.forge-item .mdock-label { color: #f59e5a; }
      .mobile-bottom-dock .mdock-btn.forge-legendary svg { color: var(--purple); }
      .mobile-bottom-dock .mdock-btn.forge-legendary .mdock-label { color: var(--purple); }
      .mobile-bottom-dock .mdock-btn.open-chest svg { color: #fbbf24; }
      .mobile-bottom-dock .mdock-btn.open-chest .mdock-label { color: #fbbf24; }
      .mobile-bottom-dock .mdock-btn.ranking svg { color: #34d399; }
      .mobile-bottom-dock .mdock-btn.ranking .mdock-label { color: #34d399; }
      .mobile-bottom-dock .mdock-btn.stats svg { color: var(--blue); }
      .mobile-bottom-dock .mdock-btn.stats .mdock-label { color: var(--blue); }
      .mobile-bottom-dock .mdock-btn.conquistas svg { color: #ffd700; }
      .mobile-bottom-dock .mdock-btn.conquistas .mdock-label { color: #ffd700; }
      .mobile-bottom-dock .mdock-btn.personagem svg { color: #a78bfa; }
      .mobile-bottom-dock .mdock-btn.personagem .mdock-label { color: #a78bfa; }
      .mobile-bottom-dock .mdock-btn.menu svg { color: #94a3b8; }
      .mobile-bottom-dock .mdock-btn.menu .mdock-label { color: #94a3b8; }
      /* Popup do menu abre para CIMA no dock mobile */
      /* Popup do menu mobile — fixo, fora do dock */
      .mobile-dock-popup {
        position: fixed !important;
        top: auto !important;
        bottom: 72px;
        right: 8px;
        left: auto;
        z-index: var(--z-top);
      }
      .mobile-bottom-dock .mdock-btn.musica { color: #a78bfa; }
      .mobile-bottom-dock .mdock-btn.musica .mdock-label { color: #a78bfa; }

      /* Badge ! de disponibilidade nos botões de forja/baú */
      .mobile-bottom-dock .mdock-btn { position: relative; }
      .mdock-available-badge {
        position: absolute;
        top: 2px; right: 2px;
        width: 14px; height: 14px;
        background: #ffd700;
        color: #0a0f1e;
        border-radius: 50%;
        font-size: 0.55rem;
        font-weight: 900;
        display: flex; align-items: center; justify-content: center;
        line-height: 1;
        box-shadow: 0 0 6px rgba(255,215,0,0.8);
        pointer-events: none;
        z-index: 2;
        animation: mdock-badge-pulse 1.5s ease-in-out infinite;
      }
      @keyframes mdock-badge-pulse {
        0%, 100% { transform: scale(1); box-shadow: 0 0 6px rgba(255,215,0,0.8); }
        50% { transform: scale(1.15); box-shadow: 0 0 10px rgba(255,215,0,1); }
      }



      /* Estado desabilitado nos botões mobile */
      .mobile-bottom-dock .mdock-btn.mdock-disabled {
        opacity: 0.35;
        pointer-events: none;
      }

      /* Botão hambúrguer: removido por ora */
      .mobile-menu-btn { display: none !important; }

      /* Controles de som: ocultos no mobile */
      .sound-controls { display: none !important; }

      /* HUD tiles menores */
      .hud { grid-template-columns: repeat(3, 1fr); gap: 4px; }
      /* No mobile, ocultar tiles de Vidas, Ouro e Streak (já exibidos na barra de status) */
      .tile:nth-child(3),  /* Vidas */
      .tile:nth-child(5),  /* Ouro */
      .tile:nth-child(6)   /* Streak */
      { display: none !important; }
      /* Ajustar grid para 3 tiles visíveis: Nível, Pontos, Recorde */
      .hud { grid-template-columns: repeat(3, 1fr); }
      .tile-val { font-size: 1rem; }
      .tile-lbl { font-size: 0.55rem; }

      /* Referências: card mais compacto */
      .ref-card { padding: 10px 12px 30px; }
      .ref-title { font-size: 0.82rem; }
      .ref-meta { font-size: 0.7rem; }

      /* Welcome screen: mobile — sem padding-top extra, compacto */
      .welcome-screen { align-items: flex-start; overflow-y: auto; padding-top: 0 !important; padding-bottom: 0 !important; }
      .welcome-content { padding: 54px 12px 10px; gap: 0; width: 100%; max-width: 100%; }
      .welcome-ornament { margin-bottom: 4px; }
      .welcome-ornament span { font-size: 0.6rem; letter-spacing: 2px; }
      .welcome-screen h1 { font-size: 2.2rem !important; }
      .welcome-sub { font-size: 0.65rem !important; letter-spacing: 4px !important; margin-bottom: 4px !important; }
      .welcome-credit { font-size: 0.62rem; margin: 2px 0 10px; }
      .welcome-stats { gap: 6px; margin: 8px 0 6px; }
      .welcome-stat { padding: 6px 8px; }
      .ws-val { font-size: 1.1rem !important; }
      .ws-lbl { font-size: 0.58rem !important; }
      .welcome-primary-btns { max-width: 100%; margin: 6px auto 0; flex-direction: column; gap: 8px; }
      .welcome-primary-btns .btn { padding: 12px 16px; font-size: 0.72rem; width: 100%; flex: 1 1 100%; }
      .welcome-buttons { margin-top: 8px; gap: 8px; flex-direction: column; width: 100%; }
      .welcome-buttons .btn { padding: 12px 16px; font-size: 0.72rem; min-width: unset; width: 100%; flex: 1 1 100%; max-width: 100%; }

      /* Box da jornada — mobile */
      .welcome-saved-info { max-width: 100%; margin: 6px 0 8px; }
      .wsaved-top { padding: 6px 12px; }
      .wsaved-label { font-size: 0.55rem; letter-spacing: 2px; }
      .wsaved-time-lbl { font-size: 0.58rem; }
      .wsaved-bottom { padding: 8px 12px; gap: 10px; }
      .wsaved-charname { font-size: 0.78rem; }
      .wsaved-stats { gap: 14px; }
      .wsaved-stat .ws-v { font-size: 0.82rem; }
      .wsaved-stat .ws-l { font-size: 0.48rem; }

      /* Footer no mobile: bloco centralizado no final */
      .game-footer { display: block; text-align: center; padding: 8px 0 4px; font-size: 0.72rem; }

      /* Botões de som fixos no topo direito — mobile only */
      .mobile-sound-controls .sound-toggle {
        width: 30px; height: 30px; min-width: 30px; min-height: 30px;
        font-size: 0.78rem;
        background: rgba(10,15,30,0.72);
        border: 1px solid rgba(42,74,122,0.55);
        box-shadow: none;
      }
      .mobile-sound-controls {
        display: flex;
        flex-direction: row;
        gap: 4px;
        align-items: center;
        position: fixed;
        top: max(8px, calc(8px + env(safe-area-inset-top, 0px)));
        right: max(8px, calc(8px + env(safe-area-inset-right, 0px)));
        z-index: var(--z-panel); /* abaixo de modais (9999) para não sobrepor popups */
      }
      /* Botão herói no canto superior esquerdo (mobile) */
      .mobile-hero-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        position: fixed;
        top: 8px;
        left: 8px;
        z-index: var(--z-modal-high);
        background: rgba(139,92,246,0.22);
        border: 2px solid rgba(139,92,246,0.72);
        border-radius: 10px;
        padding: 6px 10px 4px;
        cursor: pointer;
        color: var(--purple);
        box-shadow: 0 0 10px rgba(139,92,246,0.25);
        -webkit-tap-highlight-color: transparent;
      }
      .mobile-hero-btn:active { background: rgba(139,92,246,0.38); transform: scale(0.95); }
      .mobile-hero-btn svg { width: 20px; height: 20px; }
      .mobile-hero-btn .hero-btn-label {
        font-size: 0.42rem;
        font-family: 'Cinzel', serif;
        letter-spacing: 0.3px;
        text-transform: uppercase;
        opacity: 0.85;
        white-space: nowrap;
      }

      /* Ocultar botão de música da barra inferior no mobile */
      #mobileMusToggle { display: none !important; }
    
      /* Compactar modal de seleção de personagem no mobile */
      #charSelectModal .chest-content { padding: 12px; }
      #charSelectModal .chest-content h2 { font-size: 1.0rem; margin-bottom: 8px; }
      /* Seleção de personagens: uma coluna no mobile (um acima do outro) */
      #charSelectModal .char-grid { gap: 6px; margin-top: 6px; grid-template-columns: 1fr; }
      .char-grid { grid-template-columns: 1fr; }
      #charSelectModal .char-card { padding: 8px; }
      #charSelectModal .char-card img { width: 56px; height: 56px; margin-bottom: 5px; }
      #charSelectModal .char-card h3 { font-size: 0.85rem; margin: 0 0 2px; }
      #charSelectModal .char-subtitle { font-size: 0.72rem; margin: 0 0 3px; }
      #charSelectModal .char-desc { font-size: 0.72rem; margin: 0; }
    }

    /* === POPUP DE CONFIRMAÇÃO (global - visível em todas as telas) ===*/
    /* Popup de confirmação de ação mobile */
    .mobile-action-confirm {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: var(--z-panel);
      background: linear-gradient(160deg, #0f1d3a 0%, #0a1428 100%);
      border: 1px solid rgba(255,215,0,0.35);
      border-radius: 16px;
      padding: 16px 20px;
      min-width: 280px;
      max-width: 340px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.8), 0 0 20px rgba(255,215,0,0.1);
      animation: confirmPopupIn 0.2s ease-out;
    }
    @keyframes confirmPopupIn {
      from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); }
      to   { opacity: 1; transform: translate(-50%, -50%); }
    }
    @media (max-width: 768px) {
      .mobile-action-confirm {
        top: auto;
        bottom: 140px;
        transform: translateX(-50%);
        animation: confirmPopupInMobile 0.2s ease-out;
      }
      @keyframes confirmPopupInMobile {
        from { opacity: 0; transform: translateX(-50%) translateY(12px); }
        to   { opacity: 1; transform: translateX(-50%) translateY(0); }
      }
    }
    .mobile-action-confirm .mac-title {
      font-family: 'Cinzel', serif;
      font-size: 0.85rem;
      font-weight: 700;
      color: #ffd700;
      text-align: center;
      margin-bottom: 6px;
      letter-spacing: 0.5px;
    }
    .mobile-action-confirm .mac-desc {
      font-size: 0.75rem;
      color: #94a3b8;
      text-align: center;
      margin-bottom: 12px;
      line-height: 1.4;
    }
    .mobile-action-confirm .mac-cost {
      font-family: 'Cinzel', serif;
      font-size: 1rem;
      font-weight: 700;
      text-align: center;
      margin-bottom: 14px;
    }
    .mobile-action-confirm .mac-gold-avail {
      font-size: 0.72rem;
      color: #64748b;
      text-align: center;
      margin-bottom: 14px;
    }
    .mobile-action-confirm .mac-btns {
      display: flex;
      gap: 10px;
    }
    .mobile-action-confirm .mac-btn {
      flex: 1;
      padding: 9px 0;
      border-radius: 10px;
      border: none;
      font-family: 'Cinzel', serif;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.5px;
      cursor: pointer;
      transition: opacity 0.15s;
      -webkit-tap-highlight-color: transparent;
    }
    .mobile-action-confirm .mac-btn:active { opacity: 0.7; }
    .mobile-action-confirm .mac-btn.mac-cancel {
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.12);
      color: #94a3b8;
    }
    .mobile-action-confirm .mac-btn.mac-confirm {
      background: linear-gradient(135deg, #d97706, #b45309);
      color: #fff;
      box-shadow: 0 2px 10px rgba(217,119,6,0.4);
    }
    .mobile-action-confirm .mac-btn.mac-confirm.legendary {
      background: linear-gradient(135deg, #7c3aed, #5b21b6);
      box-shadow: 0 2px 10px rgba(124,58,237,0.5);
    }
    .mobile-action-confirm .mac-btn.mac-confirm.chest {
      background: linear-gradient(135deg, #ca8a04, #92400e);
      box-shadow: 0 2px 10px rgba(202,138,4,0.5);
    }
    /* Elementos mobile ocultos no desktop */
    .mobile-bottom-dock { display: none; }
    .mobile-menu-btn { display: none; }
    .mobile-overlay { display: none; }

    /* === LEADERBOARD PREMIUM === */
    .board-modal { max-width: 720px; width: 95vw; padding: 0; overflow: hidden; background: linear-gradient(160deg, #0d1b2a 0%, #1a2a3a 60%, #0d1b2a 100%); border: 1px solid rgba(255,215,0,0.3); }
    .board-header { padding: 24px 28px 16px; background: linear-gradient(135deg, rgba(255,215,0,0.08) 0%, transparent 60%); border-bottom: 1px solid rgba(255,215,0,0.15); }
    .board-title-wrap { display: flex; align-items: center; gap: 10px; justify-content: center; }
    .board-title { margin: 0; color: var(--gold); font-family: 'Cinzel', serif; font-size: 1.5rem; letter-spacing: 2px; text-shadow: 0 0 20px rgba(255,215,0,0.5); }
    .board-subtitle { margin: 6px 0 0; text-align: center; color: rgba(180,200,220,0.7); font-size: 0.82rem; font-style: italic; letter-spacing: 1px; }
    .board-loading { display: flex; align-items: center; gap: 12px; padding: 20px 28px; color: rgba(180,200,220,0.7); font-size: 0.9rem; }
    .board-loading.hidden { display: none; }
    .board-filters { display: flex; gap: var(--space-2); padding: 10px 16px 6px; align-items: center; }
    .board-search-input {
      flex: 1; background: rgba(255,255,255,0.04); border: 1px solid var(--blue-dark);
      border-radius: var(--radius-md); color: var(--txt); padding: 8px 12px;
      font-size: var(--text-sm); font-family: inherit;
      transition: border-color 0.2s;
    }
    .board-search-input::placeholder { color: var(--txt-dim); }
    .board-search-input:focus { outline: none; border-color: var(--blue); }
    .board-filters .btn.ghost { font-size: var(--text-2xs); padding: 8px 12px; white-space: nowrap; }
    .board-spinner { width: 20px; height: 20px; border: 2px solid rgba(255,215,0,0.2); border-top-color: var(--gold); border-radius: 50%; animation: spin 0.8s linear infinite; flex-shrink: 0; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .board-table-wrap { max-height: 380px; overflow-y: auto; padding: 0 4px; scrollbar-width: thin; scrollbar-color: rgba(255,215,0,0.3) transparent; }
    .board-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
    .board-table thead th { padding: 10px 12px; text-align: left; color: rgba(255,215,0,0.7); font-size: 0.72rem; letter-spacing: 1.5px; text-transform: uppercase; border-bottom: 1px solid rgba(255,215,0,0.15); position: sticky; top: 0; background: #0d1b2a; z-index: 1; }
    .board-table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.04); transition: background 0.15s; }
    .board-table tbody tr:hover { background: rgba(255,215,0,0.04); }
    .board-table tbody tr.rank-1 { background: linear-gradient(90deg, rgba(255,215,0,0.12) 0%, transparent 100%); }
    .board-table tbody tr.rank-2 { background: linear-gradient(90deg, rgba(192,192,192,0.08) 0%, transparent 100%); }
    .board-table tbody tr.rank-3 { background: linear-gradient(90deg, rgba(205,127,50,0.08) 0%, transparent 100%); }
    .board-table tbody tr.rank-me { background: linear-gradient(90deg, rgba(100,180,255,0.1) 0%, transparent 100%); outline: 1px solid rgba(100,180,255,0.2); }
    .board-table td { padding: 10px 12px; color: rgba(220,235,250,0.9); vertical-align: middle; }
    .rank-badge { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; font-weight: 700; font-size: 0.8rem; }
    .rank-badge.r1 { background: linear-gradient(135deg, #ffd700, #ffaa00); color: #1a0e00; box-shadow: 0 0 8px rgba(255,215,0,0.5); }
    .rank-badge.r2 { background: linear-gradient(135deg, #c0c0c0, #909090); color: #1a1a1a; }
    .rank-badge.r3 { background: linear-gradient(135deg, #cd7f32, #8b4513); color: #fff; }
    .rank-badge.rn { background: rgba(255,255,255,0.08); color: rgba(200,220,240,0.7); }
    .player-cell { display: flex; align-items: center; gap: 8px; }
    .player-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,215,0,0.2); flex-shrink: 0; }
    .player-name-text { font-weight: 600; color: #e8f4ff; }
    .champion-badge { font-size: 0.65rem; background: linear-gradient(135deg, #ffd700, #ff8c00); color: #1a0e00; padding: 1px 6px; border-radius: 10px; font-weight: 700; letter-spacing: 0.5px; margin-left: 4px; }
    .score-cell { font-weight: 700; color: var(--gold); font-family: 'Cinzel', serif; }
    .level-cell { color: #7ec8e3; font-weight: 600; }
    .chests-cell { color: #a78bfa; }
    .date-cell { color: rgba(180,200,220,0.5); font-size: 0.78rem; }
    .board-empty { text-align: center; padding: 40px 20px; color: rgba(180,200,220,0.5); font-style: italic; }
    .board-footer { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid rgba(255,215,0,0.1); justify-content: flex-end; flex-wrap: wrap; }
    .board-update-time { color: rgba(180,200,220,0.4); font-size: 0.75rem; margin-right: auto; }
    .btn-board-refresh { display: flex; align-items: center; gap: 6px; background: rgba(255,215,0,0.08); border: 1px solid rgba(255,215,0,0.2); color: rgba(255,215,0,0.8); padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 0.8rem; transition: background 0.2s, color 0.2s; }
    .btn-board-refresh:hover { background: rgba(255,215,0,0.15); color: var(--gold); }
    .col-rank { width: 40px; text-align: center; }
    .col-player { text-align: left; }
    .col-score { text-align: right; }
    .col-level, .col-chests { text-align: center; }
    .crystal-corner { position: absolute; font-size: 1.4rem; opacity: 0.5; pointer-events: none; }
    .crystal-corner.left  { left: 10px; top: 10px; }
    .crystal-corner.right { right: 10px; top: 10px; }
    @media (max-width: 600px) {
      .col-char, .col-chests, .col-date { display: none; }
      .board-table-wrap { max-height: 300px; }
    }

    /* ===================================================
       CONFRONTO FINAL — BOSS BATTLE MODE (last 10 questions)
       Ativa quando correctTotal >= 90
       =================================================== */

    /* Background preto no modo boss */
    .boss-battle-mode .bg-layer {
      opacity: 0;
      transition: opacity 1.2s ease;
    }
    body.boss-battle-mode {
      background: #000 !important;
    }
    body.boss-battle-mode .bg-overlay {
      display: none;
    }
    body.boss-battle-mode .particles {
      display: none;
    }
    body.boss-battle-mode .mobile-status-bar,
    body.boss-battle-mode #mobileStatusBar {
      display: none !important;
    }

    /* ---- Barra de título do confronto ---- */
    #bossTitleBar {
      display: none;
      font-family: 'Cinzel', serif;
      font-size: clamp(0.95rem, 2.4vw, 1.45rem);
      font-weight: 900;
      color: #ffd700;
      letter-spacing: 5px;
      text-transform: uppercase;
      text-align: center;
      text-shadow:
        0 0 20px rgba(255,215,0,0.9),
        0 0 40px rgba(255,150,0,0.6),
        0 0 80px rgba(200,80,255,0.3);
      padding: 6px 0 4px;
      animation: bossTitleGlow 2.2s ease-in-out infinite alternate;
      grid-column: 1 / -1;
    }
    @keyframes bossTitleGlow {
      from { text-shadow: 0 0 15px rgba(255,215,0,0.7), 0 0 30px rgba(255,100,0,0.4); color: #ffd700; }
      to   { text-shadow: 0 0 30px rgba(255,230,0,1), 0 0 60px rgba(255,180,0,0.8), 0 0 100px rgba(200,80,255,0.4); color: #ffe566; }
    }
    .boss-battle-mode #bossTitleBar { display: none !important; }
    .boss-battle-mode .game-title h1,
    .boss-battle-mode .game-title .subtitle { display: block !important; }
    .boss-battle-mode .game-title { padding: 4px 0 0; }

    /* ---- HP Bar do boss ---- */
    #bossHpContainer {
      margin-bottom: 10px;
      background: linear-gradient(180deg, rgba(30,5,60,0.97), rgba(15,2,30,0.99));
      border: 2px solid #ffd700;
      border-radius: 10px;
      padding: 10px 14px 12px;
      box-shadow:
        0 0 30px rgba(124,58,237,0.5),
        0 0 15px rgba(255,215,0,0.25),
        0 0 60px rgba(100,0,0,0.15),
        inset 0 0 25px rgba(0,0,0,0.6);
      position: relative;
    }
    /* Linha dourada pulsante no topo da HP bar */
    #bossHpContainer::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg, transparent, #ffd700, #ff4500, #ffd700, transparent);
      animation: hpTopLine 2s ease-in-out infinite alternate;
      border-radius: 10px 10px 0 0;
    }
    @keyframes hpTopLine {
      from { opacity: 0.5; }
      to   { opacity: 1; box-shadow: 0 0 10px rgba(255,200,0,0.7); }
    }
    #bossHpLabel {
      font-family: 'Cinzel', serif;
      font-size: 0.78rem;
      color: #e9d5ff;
      letter-spacing: 3px;
      text-transform: uppercase;
      text-align: center;
      margin-bottom: 8px;
      text-shadow: 0 0 12px rgba(220,180,255,0.8), 0 0 25px rgba(168,85,247,0.5);
      font-weight: 700;
    }
    #bossHpTrack {
      height: 24px;
      background: rgba(5,0,15,0.9);
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid rgba(88,28,135,0.7);
      box-shadow: inset 0 2px 8px rgba(0,0,0,0.8), 0 0 8px rgba(80,0,120,0.3);
      position: relative;
    }
    #bossHpFill {
      height: 100%;
      background: linear-gradient(90deg, #4c1d95, #7c3aed, #a855f7, var(--purple));
      border-radius: 10px;
      transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 0 16px rgba(168,85,247,0.9), 0 0 30px rgba(168,85,247,0.4);
      position: relative;
      overflow: hidden;
    }
    #bossHpFill::after {
      content: '';
      position: absolute;
      top: 0; left: -100%; width: 60%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
      animation: hpShimmer 2s ease-in-out infinite;
    }
    @keyframes hpShimmer {
      0%   { left: -60%; }
      100% { left: 120%; }
    }

    /* ---- Contador de questão final ---- */
    #bossQuestionNum {
      font-family: 'Cinzel', serif;
      font-size: 0.72rem;
      color: #ffd700;
      letter-spacing: 3px;
      text-transform: uppercase;
      text-align: center;
      padding: 5px 0 7px;
      border-bottom: 1px solid rgba(255,215,0,0.2);
      margin-bottom: 8px;
      text-shadow: 0 0 10px rgba(255,215,0,0.6), 0 0 20px rgba(255,180,0,0.3);
    }

    /* (bossBattleImage substituído por #bossBattleScene — ver seção REDESIGN ÉPICO) */

    /* ---- Painel do boss (right panel) ---- */
    .boss-battle-mode .panel.right {
      border-color: #ffd700;
      background: linear-gradient(160deg, rgba(20,5,45,0.93), rgba(10,3,28,0.97));
      box-shadow: 0 0 35px rgba(124,58,237,0.35), 0 0 15px rgba(255,215,0,0.15), inset 0 0 50px rgba(88,28,135,0.12);
      position: relative;
      overflow: hidden;
    }

    /* Colunas rúnicas — decoração lateral esquerda e direita do painel */
    #runeColLeft, #runeColRight {
      display: none;
      position: absolute;
      top: 0;
      bottom: 0;
      width: 22px;
      z-index: 1;
      overflow: hidden;
      pointer-events: none;
    }
    #runeColLeft  { left: 0; }
    #runeColRight { right: 0; }
    .boss-battle-mode #runeColLeft,
    .boss-battle-mode #runeColRight { display: block; }

    .rune-track {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      padding: 8px 0;
      animation: runeScroll 12s linear infinite;
    }
    #runeColRight .rune-track { animation-direction: reverse; }
    @keyframes runeScroll {
      0%   { transform: translateY(0); }
      100% { transform: translateY(-50%); }
    }
    .rune-glyph {
      font-size: 0.85rem;
      color: rgba(168,85,247,0.55);
      text-shadow: 0 0 6px rgba(168,85,247,0.5);
      line-height: 1;
      user-select: none;
    }
    .rune-glyph.bright {
      color: rgba(220,180,255,0.8);
      text-shadow: 0 0 10px rgba(192,132,252,0.8);
    }

    /* Garantir que o conteúdo do painel fique acima das colunas */
    .boss-battle-mode .panel.right > *:not(#runeColLeft):not(#runeColRight) {
      position: relative;
      z-index: 2;
    }

    /* ---- Opções no modo boss ---- */
    .boss-battle-mode .option {
      background: linear-gradient(135deg, rgba(35,10,70,0.92), rgba(18,5,40,0.96));
      border: 2px solid #6d28d9;
      border-radius: 10px;
      color: #e9d5ff;
      padding: 11px 12px 11px 50px;
      position: relative;
      font-size: 0.82rem;
      letter-spacing: 0.3px;
      text-shadow: 0 0 6px rgba(192,132,252,0.2);
      transition: all 0.2s ease;
      text-align: left;
    }
    .boss-battle-mode .option .boss-letter-badge {
      position: absolute;
      left: 8px;
      top: 50%;
      transform: translateY(-50%);
      width: 30px;
      height: 30px;
      background: radial-gradient(circle at 40% 35%, #9333ea, #4c1d95);
      border-radius: 50%;
      border: 2px solid #ffd700;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Cinzel', serif;
      font-size: 0.78rem;
      font-weight: 900;
      color: #ffd700;
      box-shadow: 0 0 8px rgba(168,85,247,0.5), 0 0 5px rgba(255,215,0,0.4), inset 0 1px 2px rgba(255,255,255,0.1);
      text-shadow: 0 0 6px rgba(255,215,0,0.5);
    }
    .boss-battle-mode .option:hover:not(:disabled) {
      background: linear-gradient(135deg, rgba(70,20,120,0.93), rgba(45,10,80,0.97));
      border-color: #a855f7;
      box-shadow: 0 0 18px rgba(168,85,247,0.35), inset 0 0 8px rgba(168,85,247,0.08);
      transform: translateX(3px);
    }
    .boss-battle-mode .option.correct {
      background: linear-gradient(135deg, rgba(5,45,25,0.92), rgba(3,30,18,0.96));
      border-color: #34d399;
    }
    .boss-battle-mode .option.wrong {
      background: linear-gradient(135deg, rgba(60,5,15,0.92), rgba(40,3,10,0.96));
      border-color: #fb7185;
    }

    /* ---- Botão Golpe Final ---- */
    .boss-battle-mode #nextBtn:not(.hidden) {
      background: linear-gradient(180deg, #d4a017 0%, #b8860b 40%, #8b6510 100%);
      border: 3px solid #ffd700;
      border-radius: 14px;
      color: #1a0a00;
      font-family: 'Cinzel', serif;
      font-size: 0.95rem;
      font-weight: 900;
      letter-spacing: 3px;
      text-transform: uppercase;
      padding: 13px 28px;
      box-shadow: 0 0 25px rgba(255,215,0,0.5), 0 5px 15px rgba(0,0,0,0.6),
                  inset 0 1px 2px rgba(255,255,255,0.2);
      animation: golpeGlow 1.8s ease-in-out infinite alternate;
      text-shadow: 0 1px 1px rgba(255,255,255,0.3);
      width: 100%;
      position: relative;
    }
    .boss-battle-mode #nextBtn:not(.hidden)::after {
      content: 'CONFIRMAR RESPOSTA';
      display: block;
      font-size: 0.55rem;
      letter-spacing: 3px;
      color: rgba(30,10,0,0.75);
      margin-top: 2px;
      font-weight: 700;
    }
    @keyframes golpeGlow {
      from { box-shadow: 0 0 20px rgba(255,215,0,0.45), 0 5px 12px rgba(0,0,0,0.6); }
      to   { box-shadow: 0 0 40px rgba(255,215,0,0.75), 0 5px 20px rgba(0,0,0,0.6), 0 0 60px rgba(255,180,0,0.25); }
    }

    /* Hint embaixo do botão */
    #golpeFinalHint {
      font-family: 'Cinzel', serif;
      font-size: 0.58rem;
      color: #7c6aa0;
      letter-spacing: 2px;
      text-transform: uppercase;
      text-align: center;
      margin-top: 5px;
    }

    /* ---- Medidor de Finalização ---- */
    #finalMeterContainer {
      margin-top: 12px;
      padding: 10px 14px 12px;
      background: linear-gradient(180deg, rgba(20,5,40,0.94), rgba(10,2,22,0.97));
      border: 1px solid rgba(88,28,135,0.6);
      border-top: 2px solid rgba(124,58,237,0.5);
      border-radius: 0 0 10px 10px;
      box-shadow: 0 0 20px rgba(88,28,135,0.25), inset 0 0 15px rgba(0,0,0,0.4);
    }
    #finalMeterLabel {
      font-family: 'Cinzel', serif;
      font-size: 0.6rem;
      color: #9d79c4;
      letter-spacing: 3px;
      text-transform: uppercase;
      text-align: center;
      margin-bottom: 9px;
      opacity: 0.9;
    }
    #finalMeterStars {
      display: flex;
      justify-content: center;
      gap: 5px;
      align-items: center;
    }
    .final-star {
      font-size: 1.3rem;
      color: #2e1254;
      line-height: 1;
      transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
      filter: drop-shadow(0 0 3px rgba(88,28,135,0.4));
    }
    .final-star.filled {
      color: #a855f7;
      filter: drop-shadow(0 0 8px rgba(168,85,247,0.9)) drop-shadow(0 0 15px rgba(168,85,247,0.5));
    }
    .final-star.star-last-gold {
      color: #ffd700;
      filter: drop-shadow(0 0 8px rgba(255,215,0,0.9)) drop-shadow(0 0 16px rgba(255,180,0,0.5));
    }
    .final-star.pop {
      animation: starPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    @keyframes starPop {
      0%   { transform: scale(1); }
      50%  { transform: scale(1.7) rotate(-10deg); }
      100% { transform: scale(1); }
    }
    #finalMeterFooter {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-top: 8px;
      gap: 8px;
    }
    #finalMeterHint {
      font-size: 0.55rem;
      color: #5c4a80;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      flex: 1;
      line-height: 1.4;
    }
    #finalMeterResult {
      font-size: 0.6rem;
      color: #ffd700;
      letter-spacing: 2px;
      text-transform: uppercase;
      font-family: 'Cinzel', serif;
      text-align: right;
      text-shadow: 0 0 8px rgba(255,215,0,0.5);
      flex-shrink: 0;
    }

    /* ============================================================
       BOSS BATTLE — REDESIGN ÉPICO v2
       ============================================================ */

    /* Painel esquerdo: tema vulcânico/infernal no boss mode */
    .boss-battle-mode .panel.left {
      background: linear-gradient(180deg, #1a0505 0%, #0d0303 50%, #080101 100%) !important;
      border-color: #8b0000 !important;
      box-shadow: 0 0 35px rgba(200,0,0,0.35), inset 0 0 50px rgba(120,0,0,0.18) !important;
    }

    /* Ocultar elementos normais do painel esquerdo em boss mode */
    .boss-battle-mode .panel.left .story,
    .boss-battle-mode .panel.left .log {
      display: none !important;
    }
    /* Mostrar herói e equip em boss mode (continuidade natural) */
    .boss-battle-mode .panel.left .hero { display: block !important; }
    .boss-battle-mode .panel.left .equip { display: block !important; }
    /* Mostrar elementos exclusivos do boss mode */
    .boss-battle-mode #bossNarrativeBox { display: block !important; }
    .boss-battle-mode #bossLogSection { display: block !important; }
    /* Ocultar bossPartyPanel — não é mais usado */
    .boss-battle-mode #bossPartyPanel { display: none !important; }

    /* Boss narrative box */
    #bossNarrativeBox {
      background: linear-gradient(135deg, rgba(40,10,60,.85), rgba(20,5,40,.85));
      border: 1px solid rgba(168,85,247,.4); border-radius: 10px;
      padding: 10px; margin-bottom: 10px;
    }
    #bossNarrativeBox h3 {
      font-family: 'Cinzel', serif; font-size: .78rem; color: var(--purple);
      margin-bottom: 6px; letter-spacing: 1px;
    }
    #bossNarrativeBox p { font-size: .78rem; color: #c4b5fd; line-height: 1.55; font-style: italic; }

    /* Boss battle log */
    #bossLogSection {
      background: linear-gradient(135deg, rgba(20,15,40,.8), rgba(15,25,50,.8));
      border: 1px solid rgba(168,85,247,.3); border-radius: 10px;
      padding: 10px; max-height: 200px; overflow-y: auto;
    }
    .boss-log-entry { font-size: .72rem; padding: 3px 0; border-bottom: 1px solid rgba(168,85,247,.1); color: #8a9cc0; }
    .boss-log-entry.hit  { color: #5db89c; }
    .boss-log-entry.miss { color: #d07070; }
    .boss-log-entry.lore { color: #c4b5fd; font-style: italic; }

    /* === PAINEL DE PARTY (left panel) === */
    #bossPartyPanel {
      display: none;
      flex-direction: column;
      align-items: center;
      padding: 14px 10px 12px;
      background: linear-gradient(180deg, rgba(50,5,5,0.97), rgba(15,2,2,0.99));
      border-radius: 12px;
      border: 2px solid rgba(200,0,0,0.5);
      margin-bottom: 10px;
      box-shadow: 0 0 25px rgba(200,0,0,0.25), inset 0 0 20px rgba(0,0,0,0.6);
      position: relative;
      overflow: hidden;
    }
    /* Brilho de fogo no topo do painel */
    #bossPartyPanel::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, transparent, #ff4500, #ffd700, #ff4500, transparent);
      animation: panelFireLine 2s ease-in-out infinite alternate;
    }
    @keyframes panelFireLine {
      from { opacity: 0.5; }
      to   { opacity: 1; box-shadow: 0 0 12px rgba(255,100,0,0.8); }
    }
    .boss-party-banner {
      font-family: 'Cinzel', serif;
      font-size: 0.68rem;
      font-weight: 900;
      color: #ffd700;
      letter-spacing: 3px;
      text-transform: uppercase;
      text-align: center;
      text-shadow: 0 0 15px rgba(255,215,0,0.8), 0 0 30px rgba(255,150,0,0.4);
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(255,215,0,0.3);
      width: 100%;
      animation: bannerGlow 2.5s ease-in-out infinite alternate;
    }
    @keyframes bannerGlow {
      from { text-shadow: 0 0 10px rgba(255,215,0,0.6); color: #ffd700; }
      to   { text-shadow: 0 0 25px rgba(255,215,0,1), 0 0 50px rgba(255,180,0,0.5); color: #ffe566; }
    }
    .boss-party-heroes {
      display: flex;
      gap: 8px;
      justify-content: center;
      width: 100%;
      margin-bottom: 10px;
    }
    .boss-party-hero {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      flex: 1;
    }
    .boss-party-hero img {
      width: 72px;
      height: 72px;
      border-radius: 8px;
      border: 2px solid rgba(255,150,50,0.7);
      object-fit: cover;
      object-position: top;
      box-shadow: 0 0 12px rgba(255,100,0,0.4), 0 2px 8px rgba(0,0,0,0.7);
      animation: heroPartyGlow 2.8s ease-in-out infinite alternate;
      transition: border-color 0.3s, box-shadow 0.3s;
    }
    .boss-party-hero img.hero-selected {
      border-color: #a855f7 !important;
      box-shadow: 0 0 20px rgba(168,85,247,0.9), 0 0 40px rgba(168,85,247,0.45) !important;
      animation: selectedHeroPartyGlow 2s ease-in-out infinite alternate !important;
    }
    @keyframes heroPartyGlow {
      from { box-shadow: 0 0 8px rgba(255,100,0,0.3), 0 2px 6px rgba(0,0,0,0.6); }
      to   { box-shadow: 0 0 18px rgba(255,150,0,0.6), 0 2px 10px rgba(0,0,0,0.7); }
    }
    @keyframes selectedHeroPartyGlow {
      from { box-shadow: 0 0 15px rgba(168,85,247,0.65), 0 0 25px rgba(100,50,180,0.3); }
      to   { box-shadow: 0 0 30px rgba(192,132,252,0.95), 0 0 55px rgba(168,85,247,0.5); }
    }
    .boss-party-hero-name {
      font-family: 'Cinzel', serif;
      font-size: 0.52rem;
      color: var(--purple);
      letter-spacing: 0.5px;
      text-align: center;
      text-shadow: 0 0 6px rgba(192,132,252,0.5);
      line-height: 1.2;
    }
    .boss-party-motto {
      font-family: 'Philosopher', serif;
      font-size: 0.72rem;
      color: #ffd700;
      font-style: italic;
      text-align: center;
      letter-spacing: 1px;
      opacity: 0.85;
      animation: mottoFade 3s ease-in-out infinite alternate;
    }
    @keyframes mottoFade {
      from { opacity: 0.6; color: #ffd700; }
      to   { opacity: 1; color: #ffe566; text-shadow: 0 0 8px rgba(255,215,0,0.4); }
    }

    /* === CENA DE BATALHA ÉPICA (painel direito) === */
    #bossBattleScene {
      display: none;
      position: relative;
      width: 100%;
      height: 190px;
      overflow: hidden;
      border-radius: 12px;
      margin-bottom: 12px;
      background:
        radial-gradient(ellipse at 75% 50%, rgba(90,5,5,0.95) 0%, rgba(30,3,3,0.99) 55%, rgba(5,0,15,1) 100%);
      border: 2px solid rgba(180,0,0,0.55);
      box-shadow:
        0 0 40px rgba(180,0,0,0.3),
        0 0 80px rgba(100,0,0,0.12),
        inset 0 0 40px rgba(0,0,0,0.7);
    }
    .boss-battle-mode #bossBattleScene { display: flex; align-items: center; }

    /* Chão de lava */
    #bossBattleScene::before {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0; height: 28px;
      background: linear-gradient(180deg, transparent, rgba(220,60,0,0.18));
      pointer-events: none;
      z-index: 0;
    }
    /* Brasa animada no background */
    #bossBattleScene::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(1.5px 1.5px at 18% 25%, rgba(255,160,0,0.7), transparent),
        radial-gradient(1px 1px   at 32% 70%, rgba(255,220,0,0.6), transparent),
        radial-gradient(2px 2px   at 55% 18%, rgba(255,110,0,0.65), transparent),
        radial-gradient(1px 1px   at 72% 55%, rgba(255,180,0,0.5), transparent),
        radial-gradient(1.5px 1.5px at 85% 30%, rgba(255,90,0,0.7), transparent),
        radial-gradient(1px 1px   at 10% 80%, rgba(255,200,0,0.5), transparent);
      animation: embersFlicker 3.5s ease-in-out infinite alternate;
      pointer-events: none;
      z-index: 0;
    }
    @keyframes embersFlicker {
      0%   { opacity: 0.3; transform: translateY(0); }
      50%  { opacity: 0.85; transform: translateY(-4px); }
      100% { opacity: 0.4; transform: translateY(-7px); }
    }

    /* Lado dos heróis (esquerda da cena) */
    .battle-heroes-side {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 14px 6px 14px 12px;
      z-index: 2;
      position: relative;
      flex-shrink: 0;
    }
    .battle-hero-mini {
      width: 44px;
      height: 44px;
      border-radius: 6px;
      border: 1.5px solid rgba(255,180,50,0.7);
      object-fit: cover;
      object-position: top;
      box-shadow: 0 0 8px rgba(255,150,0,0.45), 0 2px 6px rgba(0,0,0,0.7);
      animation: heroAttackAnim 3s ease-in-out infinite;
    }
    .battle-hero-mini:nth-child(2) { animation-delay: 0.6s; }
    .battle-hero-mini:nth-child(3) { animation-delay: 1.2s; }
    .battle-hero-mini.hero-selected {
      border-color: #a855f7 !important;
      box-shadow: 0 0 14px rgba(168,85,247,0.85), 0 2px 6px rgba(0,0,0,0.7) !important;
    }
    @keyframes heroAttackAnim {
      0%, 75%, 100% { transform: translateX(0) scale(1); }
      85%           { transform: translateX(10px) scale(1.07); }
    }

    /* Centro de colisão (raios/feitiços) */
    .battle-clash-center {
      flex: 1;
      position: relative;
      align-self: stretch;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      z-index: 2;
    }
    /* Raio central */
    .battle-clash-center::before,
    .battle-clash-center::after {
      content: '';
      position: absolute;
      top: 10%; bottom: 10%;
      width: 3px;
      border-radius: 2px;
      animation: lightningBolt 1.8s ease-in-out infinite;
    }
    .battle-clash-center::before {
      left: 38%;
      background: linear-gradient(180deg,
        transparent 0%, rgba(168,85,247,0.9) 30%,
        rgba(255,215,0,1) 50%, rgba(168,85,247,0.9) 70%, transparent 100%);
      filter: blur(1px);
      animation-delay: 0s;
    }
    .battle-clash-center::after {
      left: 55%;
      background: linear-gradient(180deg,
        transparent 0%, rgba(100,200,255,0.8) 30%,
        rgba(255,255,255,0.95) 50%, rgba(100,200,255,0.8) 70%, transparent 100%);
      filter: blur(0.5px);
      opacity: 0.8;
      animation-delay: 0.55s;
    }
    @keyframes lightningBolt {
      0%, 100% { opacity: 0.2; height: 40%; top: 30%; }
      45%, 55% { opacity: 1; height: 80%; top: 10%; filter: blur(0); }
      50%      { width: 4px; }
    }
    /* Orbe de colisão */
    .battle-clash-orb {
      width: 36px; height: 36px;
      border-radius: 50%;
      background: radial-gradient(circle at 40% 35%,
        rgba(255,255,180,0.95) 0%, rgba(255,200,0,0.8) 30%,
        rgba(200,80,250,0.6) 65%, transparent 100%);
      box-shadow:
        0 0 20px rgba(255,215,0,0.8),
        0 0 40px rgba(168,85,247,0.6),
        0 0 60px rgba(255,200,0,0.3);
      animation: orbPulse 1.5s ease-in-out infinite;
      position: relative;
      z-index: 3;
    }
    @keyframes orbPulse {
      0%, 100% { transform: scale(0.85); box-shadow: 0 0 15px rgba(255,215,0,0.7), 0 0 30px rgba(168,85,247,0.5); }
      50%      { transform: scale(1.2); box-shadow: 0 0 35px rgba(255,215,0,1), 0 0 60px rgba(168,85,247,0.8), 0 0 90px rgba(255,200,0,0.4); }
    }

    /* Lado do boss (direita da cena) */
    .battle-boss-side {
      position: relative;
      width: 148px;
      flex-shrink: 0;
      align-self: stretch;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      overflow: hidden;
      z-index: 2;
    }
    .battle-boss-side img {
      height: 188px;
      width: auto;
      max-width: 148px;
      object-fit: contain;
      object-position: top center;
      filter:
        drop-shadow(0 0 18px rgba(168,85,247,0.85))
        drop-shadow(0 0 40px rgba(120,0,180,0.55))
        brightness(1.08) contrast(1.1);
      animation: bossFloat 3.5s ease-in-out infinite;
      position: relative;
      z-index: 2;
    }
    @keyframes bossFloat {
      0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 18px rgba(168,85,247,0.8)) drop-shadow(0 0 40px rgba(120,0,180,0.5)) brightness(1.08); }
      50%       { transform: translateY(-10px) scale(1.03); filter: drop-shadow(0 0 28px rgba(200,100,255,1)) drop-shadow(0 0 60px rgba(150,0,200,0.7)) brightness(1.15); }
    }
    /* Aura do boss */
    .battle-boss-side::before {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0; top: 20%;
      background: radial-gradient(ellipse at 50% 90%, rgba(140,0,200,0.65) 0%, rgba(90,0,140,0.3) 45%, transparent 70%);
      z-index: 1;
      animation: bossAuraPulse 3.5s ease-in-out infinite alternate;
    }
    @keyframes bossAuraPulse {
      from { opacity: 0.5; }
      to   { opacity: 1; }
    }

    /* Boss em estado crítico (HP ≤ 30%) — tremor */
    .boss-hp-critical .battle-boss-side img {
      animation: bossFloat 1.2s ease-in-out infinite, bossDamage 0.25s ease-in-out infinite alternate !important;
      filter: drop-shadow(0 0 25px rgba(255,50,50,0.95)) drop-shadow(0 0 50px rgba(200,0,0,0.7)) brightness(1.2) !important;
    }
    @keyframes bossDamage {
      from { transform: translateX(-3px) rotate(-1.5deg); }
      to   { transform: translateX(3px) rotate(1.5deg); }
    }

    /* HUD em boss mode — tema vermelho/infernal */
    .boss-battle-mode .panel.left .hud .tile {
      background: linear-gradient(135deg, rgba(40,5,5,0.9), rgba(25,2,2,0.95));
      border-color: rgba(180,0,0,0.4);
    }
    .boss-battle-mode .panel.left .hud .tile span {
      color: rgba(255,150,100,0.8);
    }
    .boss-battle-mode .panel.left .hud .tile strong {
      color: #ffd700;
    }

    /* ---- Botão de preview (welcome screen) ---- */
    .btn-boss-preview {
      background: linear-gradient(160deg, rgba(60,10,100,0.85), rgba(30,5,60,0.9));
      border: 2px solid #7c3aed;
      color: #e9d5ff;
      font-size: 0.8rem;
      letter-spacing: 1px;
      padding: 8px 14px;
      border-radius: 10px;
      cursor: pointer;
      font-family: 'Cinzel', serif;
      text-transform: uppercase;
      transition: all 0.2s ease;
      box-shadow: 0 0 12px rgba(124,58,237,0.3);
      width: 100%;
      margin-top: 6px;
    }
    .btn-boss-preview:hover {
      background: linear-gradient(160deg, rgba(88,28,135,0.9), rgba(50,10,90,0.95));
      border-color: #a855f7;
      box-shadow: 0 0 20px rgba(168,85,247,0.5);
      transform: translateY(-1px);
    }

    /* ============================================================
       BOSS BATTLE — REDESIGN ÉPICO v3 (layout épico corrigido)
       ============================================================ */

    /* 1. Options: grade 2×2 em vez de lista vertical */
    .boss-battle-mode #options {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .boss-battle-mode .option {
      min-height: 74px;
      display: flex;
      align-items: center;
      padding: 11px 12px 11px 48px;
    }

    /* 2. Cena de batalha: muito mais alta e atmosférica */
    #bossBattleScene {
      height: 270px;
      background:
        radial-gradient(ellipse at 12% 60%, rgba(220,50,0,0.45) 0%, transparent 45%),
        radial-gradient(ellipse at 88% 50%, rgba(100,0,180,0.55) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 100%, rgba(180,40,0,0.35) 0%, transparent 40%),
        linear-gradient(180deg, rgba(4,0,12,1) 0%, rgba(18,2,4,0.98) 100%);
    }

    /* 3. Ocultar heróis e centro de colisão — só o Nefromante */
    .boss-battle-mode .battle-heroes-side,
    .boss-battle-mode .battle-clash-center {
      display: none !important;
    }

    /* 4. Boss: ocupa toda a cena centralizado e imponente */
    .battle-boss-side {
      width: 100%;
      justify-content: center;
    }
    .battle-boss-side img {
      height: 268px;
      max-width: 260px;
    }

    /* 5. Texto da questão: cor igual às alternativas, sem brilho */
    .boss-battle-mode .qbox p#question,
    .arqui-nefromante-final .qbox p#question {
      font-family: 'Philosopher', Georgia, serif !important;
      font-weight: 700;
      color: #e9d5ff !important;
      font-size: 0.87rem;
      letter-spacing: 0.2px;
      line-height: 1.65;
      text-transform: none !important;
      text-shadow: none !important;
    }

    /* 6. qbox: painel de cristal sombrio */
    .boss-battle-mode .qbox {
      background: linear-gradient(180deg, rgba(14,3,38,0.97), rgba(7,2,18,0.99));
      border: 1px solid rgba(168,85,247,0.55);
      border-top: 2px solid rgba(255,215,0,0.25);
      border-radius: 10px;
      padding: 10px 14px;
      margin-bottom: 10px;
      box-shadow:
        0 0 20px rgba(88,28,135,0.22),
        inset 0 0 18px rgba(0,0,0,0.55);
    }

    /* 7. Temporizador no boss mode: styling sutil */
    .boss-battle-mode #timerWidget {
      opacity: 0.7;
    }

    /* 8. Feedback no boss mode: texto roxo-ouro */
    .boss-battle-mode #feedback.good {
      color: #34d399;
      text-shadow: 0 0 10px rgba(52,211,153,0.5);
    }
    .boss-battle-mode #feedback.bad {
      color: #fb7185;
      text-shadow: 0 0 10px rgba(251,113,133,0.5);
    }

    /* 9. finalMeterContainer: visível em boss mode */
    .boss-battle-mode #finalMeterContainer {
      display: block !important;
    }

    /* 10. Área ctrl em boss mode: separação limpa */
    .boss-battle-mode .ctrl {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-top: 8px;
    }
    .boss-battle-mode .ctrl #newBtn {
      display: none !important;
    }
    .boss-battle-mode .ctrl #bonusBtn {
      display: none !important;
    }

    /* 11. Badge de letra: padding ajustado para grade 2×2 */
    .boss-battle-mode .option .boss-letter-badge {
      left: 9px;
      width: 28px;
      height: 28px;
      font-size: 0.72rem;
    }

    /* 12. Sombra no painel direito em boss mode: mais dramática */
    .boss-battle-mode .panel.right {
      border-width: 2px;
    }

    /* ============================================================
       ARQUI-NEFROMANTE FINAL — REDESIGN COMPLETO (questões 91-100)
       Ativa quando body tem a classe arqui-nefromante-final
       ============================================================ */

    /* === DESKTOP: Layout de 2 colunas — Heróis | Questão === */

    /* 1. Background: preto sólido no arqui-nefromante-final */
    .arqui-nefromante-final .bg-layer {
      opacity: 0;
      transition: opacity 1.5s ease;
    }

    /* ================================================================
       2. DESKTOP — Layout grid boss: 2 colunas centralizadas, sem dock
       ================================================================ */

    /* Grid boss: remove 3ª coluna vazia, centraliza as 2 colunas */
    .arqui-nefromante-final.boss-battle-mode.app,
    body.arqui-nefromante-final .app {
      grid-template-columns: minmax(260px, 360px) minmax(300px, 900px);
      justify-content: center;
      max-width: 1300px;
    }

    /* Ocultar action dock no boss mode */
    .arqui-nefromante-final #actionDock {
      display: none;
    }

    /* Painel esquerdo: fundo preto sólido */
    .boss-battle-mode.arqui-nefromante-final .panel.left,
    .arqui-nefromante-final .panel.left {
      background: #0a0a0a !important;
      border-color: rgba(100,60,160,0.4) !important;
      box-shadow: none !important;
    }

    /* HUD tiles: roxo */
    .arqui-nefromante-final .panel.left .hud .tile {
      background: linear-gradient(135deg, rgba(18,4,45,0.95), rgba(10,2,28,0.98));
      border-color: rgba(124,58,237,0.4);
    }
    .arqui-nefromante-final .panel.left .hud .tile span { color: rgba(192,132,252,0.8); }
    .arqui-nefromante-final .panel.left .hud .tile strong { color: #e9d5ff; }

    /* Party panel: redesenhado — heróis grandes */
    .arqui-nefromante-final #bossPartyPanel {
      background: linear-gradient(180deg,
        rgba(20,4,55,0.99) 0%,
        rgba(10,2,32,1) 100%);
      border: 2px solid rgba(168,85,247,0.65);
      border-radius: 14px;
      box-shadow:
        0 0 35px rgba(124,58,237,0.35),
        0 0 70px rgba(88,28,135,0.15),
        inset 0 0 30px rgba(0,0,0,0.7);
      padding: 16px 12px 14px;
      position: relative;
      overflow: hidden;
    }
    /* Linha de cristal no topo do painel */
    .arqui-nefromante-final #bossPartyPanel::before {
      background: linear-gradient(90deg,
        transparent, rgba(168,85,247,0.6), rgba(216,180,254,0.9),
        rgba(168,85,247,0.6), transparent);
      animation: arquiPanelLine 2.2s ease-in-out infinite alternate;
    }
    @keyframes arquiPanelLine {
      from { opacity: 0.4; }
      to   { opacity: 1; box-shadow: 0 0 16px rgba(192,132,252,0.9); }
    }

    /* Banner: "BATALHÃO DA RESISTÊNCIA" */
    .arqui-nefromante-final .boss-party-banner {
      font-size: 0.65rem;
      color: #e9d5ff;
      letter-spacing: 2.5px;
      text-shadow:
        0 0 12px rgba(216,180,254,0.9),
        0 0 25px rgba(168,85,247,0.6);
      border-bottom: 1px solid rgba(168,85,247,0.35);
      margin-bottom: 14px;
      padding-bottom: 10px;
      animation: arquiBannerGlow 2.8s ease-in-out infinite alternate;
    }
    @keyframes arquiBannerGlow {
      from { color: var(--purple); text-shadow: 0 0 10px rgba(192,132,252,0.7); }
      to   { color: #f3e8ff; text-shadow: 0 0 22px rgba(216,180,254,1), 0 0 45px rgba(168,85,247,0.5); }
    }

    /* Grid de heróis: 3 em linha, maiores */
    .arqui-nefromante-final .boss-party-heroes {
      gap: 10px;
      margin-bottom: 12px;
    }
    .arqui-nefromante-final .boss-party-hero {
      gap: 7px;
    }
    .arqui-nefromante-final .boss-party-hero img {
      width: 88px;
      height: 100px;
      border-radius: 10px;
      border: 2px solid rgba(168,85,247,0.85);
      object-fit: cover;
      object-position: top;
      box-shadow:
        0 0 18px rgba(168,85,247,0.6),
        0 0 35px rgba(124,58,237,0.25),
        0 4px 12px rgba(0,0,0,0.8);
      animation: arquiHeroGlow 3s ease-in-out infinite alternate;
      transition: none;
    }
    .arqui-nefromante-final .boss-party-hero img.hero-selected {
      border-color: #ffd700 !important;
      box-shadow:
        0 0 25px rgba(255,215,0,0.8),
        0 0 50px rgba(255,180,0,0.4),
        0 4px 12px rgba(0,0,0,0.8) !important;
      animation: arquiHeroSelectedGlow 2s ease-in-out infinite alternate !important;
    }
    @keyframes arquiHeroGlow {
      from { box-shadow: 0 0 12px rgba(168,85,247,0.5), 0 4px 10px rgba(0,0,0,0.7); }
      to   { box-shadow: 0 0 28px rgba(192,132,252,0.9), 0 0 50px rgba(168,85,247,0.3), 0 4px 14px rgba(0,0,0,0.8); }
    }
    @keyframes arquiHeroSelectedGlow {
      from { box-shadow: 0 0 20px rgba(255,215,0,0.7), 0 4px 10px rgba(0,0,0,0.7); }
      to   { box-shadow: 0 0 40px rgba(255,215,0,1), 0 0 70px rgba(255,180,0,0.5), 0 4px 14px rgba(0,0,0,0.8); }
    }
    .arqui-nefromante-final .boss-party-hero-name {
      font-size: 0.58rem;
      color: var(--purple);
      text-shadow: 0 0 8px rgba(192,132,252,0.6);
      letter-spacing: 0.8px;
    }

    /* Motto: "A vitória é nossa!" */
    .arqui-nefromante-final .boss-party-motto {
      font-size: 0.78rem;
      color: var(--purple);
      font-style: italic;
      animation: arquiMottoGlow 3.5s ease-in-out infinite alternate;
    }
    @keyframes arquiMottoGlow {
      from { opacity: 0.65; color: #a855f7; }
      to   { opacity: 1; color: #e9d5ff; text-shadow: 0 0 12px rgba(192,132,252,0.5); }
    }

    /* ================================================================
       3. DESKTOP — Painel direito: questão com cristais roxos
       ================================================================ */

    /* Painel direito: fundo preto sólido */
    .arqui-nefromante-final .panel.right {
      border-color: rgba(100,60,160,0.4);
      background: #0a0a0a;
      box-shadow: none;
    }

    /* AJUSTE 2 DESKTOP: Logo visível no topo (mostrar h1 e subtitle, ocultar bossTitleBar no game-title) */
    .arqui-nefromante-final.boss-battle-mode .game-title h1,
    .arqui-nefromante-final.boss-battle-mode .game-title .subtitle {
      display: block;
    }
    .arqui-nefromante-final.boss-battle-mode .game-title #bossTitleBar {
      display: none;
    }

    /* AJUSTE 2 DESKTOP: Título do boss movido para acima da HP bar (via #arquiBossTitleDesktop) */
    #arquiBossTitleDesktop {
      display: none;
      font-family: 'Cinzel', serif;
      font-size: clamp(0.85rem, 2vw, 1.25rem);
      font-weight: 900;
      color: #e9d5ff;
      letter-spacing: 4px;
      text-transform: uppercase;
      text-align: center;
      text-shadow:
        0 0 20px rgba(216,180,254,0.95),
        0 0 40px rgba(168,85,247,0.7),
        0 0 80px rgba(124,58,237,0.4);
      animation: arquiTitleGlow 2.5s ease-in-out infinite alternate;
      padding: 6px 0 8px;
      border-bottom: 1px solid rgba(168,85,247,0.3);
      margin-bottom: 8px;
    }
    .arqui-nefromante-final #arquiBossTitleDesktop {
      display: none;
    }

    /* AJUSTE 2 DESKTOP: Estrelas abaixo da HP bar — REMOVIDAS conforme solicitado */
    #arquiStarsDesktop {
      display: none;
    }
    .arqui-nefromante-final #arquiStarsDesktop {
      display: none;
    }
    .arqui-nefromante-final #arquiStarsDesktop .final-star {
      font-size: 1.1rem;
    }

    /* AJUSTE 2 DESKTOP: Imagem do boss retangular acima da questão (via #arquiBossImageDesktop) */
    #arquiBossImageDesktop {
      display: none;
      width: 100%;
      height: 110px;
      border-radius: 14px;
      overflow: hidden;
      margin-bottom: 10px;
      border: 2px solid rgba(168,85,247,0.55);
      box-shadow: 0 0 25px rgba(124,58,237,0.4), inset 0 0 20px rgba(0,0,0,0.5);
      position: relative;
    }
    .arqui-nefromante-final #arquiBossImageDesktop {
      display: block;
      animation: none;
      border-color: rgba(100,60,160,0.4);
      box-shadow: none;
    }
    @keyframes bossFramePulse {
      0%, 100% { border-color: rgba(168,85,247,0.55); }
      50%       { border-color: rgba(216,180,254,0.9); }
    }
    #arquiBossImageDesktop .boss-img-wrap {
      width: 100%;
      height: 100%;
      border-radius: 10px;
      overflow: hidden;
      position: relative;
    }
    #arquiBossImageDesktop img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 30%;
      border-radius: 10px;
      animation: none;
      transform: none;
      display: block;
    }
    @keyframes bossImgFloat {
      0%, 100% { transform: scale(1.02) translateY(0px); }
      50%       { transform: scale(1.05) translateY(-4px); }
    }
    /* Overlay de véu mágico sobre a imagem */
    #arquiBossImageDesktop .boss-img-wrap::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        180deg,
        transparent 40%,
        rgba(88,28,135,0.35) 80%,
        rgba(30,5,60,0.7) 100%
      );
      pointer-events: none;
    }
    /* Scanlines de energia */
    #arquiBossImageDesktop .boss-img-wrap::before {
      content: '';
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(168,85,247,0.04) 3px,
        rgba(168,85,247,0.04) 4px
      );
      animation: bossEnergyScan 8s linear infinite;
      pointer-events: none;
      z-index: 1;
    }
    @keyframes bossEnergyScan {
      0%   { background-position: 0 0; }
      100% { background-position: 0 200px; }
    }
    /* Sparkles gerados via pseudo-elementos no container */
    .boss-sparkle {
      position: absolute;
      pointer-events: none;
      z-index: 10;
      font-size: 1rem;
      color: #e9d5ff;
      text-shadow: 0 0 6px rgba(168,85,247,0.9), 0 0 12px rgba(168,85,247,0.5);
      animation: sparkleFloat linear infinite;
      opacity: 0;
    }
    @keyframes sparkleFloat {
      0%   { opacity: 0;   transform: translateY(0)    scale(0.5) rotate(0deg); }
      15%  { opacity: 0.9; }
      85%  { opacity: 0.7; }
      100% { opacity: 0;   transform: translateY(-60px) scale(1.2) rotate(180deg); }
    }
    /* Raios de canto */
    .boss-corner-ray {
      position: absolute;
      width: 2px;
      background: linear-gradient(180deg, rgba(216,180,254,0.9), transparent);
      transform-origin: top center;
      animation: rayFlicker 2s ease-in-out infinite;
      pointer-events: none;
      z-index: 10;
      border-radius: 2px;
    }
    @keyframes rayFlicker {
      0%, 100% { opacity: 0.15; height: 20px; }
      30%       { opacity: 0.9;  height: 35px; }
      60%       { opacity: 0.4;  height: 15px; }
      80%       { opacity: 1;    height: 40px; }
    }
    /* Orbe de energia pulsante nos cantos */
    .boss-corner-orb {
      position: absolute;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: radial-gradient(circle, #e9d5ff, #a855f7);
      box-shadow: 0 0 8px rgba(168,85,247,0.9), 0 0 16px rgba(168,85,247,0.5);
      animation: orbPulse 2.5s ease-in-out infinite;
      pointer-events: none;
      z-index: 11;
    }
    @keyframes orbPulse {
      0%, 100% { transform: scale(1);   opacity: 0.6; box-shadow: 0 0 8px rgba(168,85,247,0.9); }
      50%       { transform: scale(1.6); opacity: 1;   box-shadow: 0 0 16px rgba(216,180,254,1), 0 0 30px rgba(168,85,247,0.6); }
    }

    /* Título do boss: "CONFRONTO FINAL: ARQUI-NEFROMANTE" (mantido para boss mode normal) */
    /* Boss title bar oculto — só mostra logo NefroQuest Ascension */
    .arqui-nefromante-final #bossTitleBar {
      display: none;
    }
    @keyframes arquiTitleGlow {
      from { color: var(--purple); text-shadow: 0 0 15px rgba(192,132,252,0.8), 0 0 30px rgba(168,85,247,0.5); }
      to   { color: #f3e8ff; text-shadow: 0 0 30px rgba(216,180,254,1), 0 0 60px rgba(192,132,252,0.8), 0 0 100px rgba(124,58,237,0.4); }
    }

    /* HP bar: compacta no modo arqui */
    .arqui-nefromante-final #bossHpContainer {
      background: transparent;
      border: none;
      box-shadow: none;
      padding: 0 0 4px;
      margin-bottom: 4px;
    }
    /* Remove top glowing line from HP bar */
    .arqui-nefromante-final #bossHpContainer::before {
      display: none;
    }

    /* Hide rune columns completely */
    .arqui-nefromante-final #runeColLeft,
    .arqui-nefromante-final #runeColRight {
      display: none;
    }

    /* Black background in boss mode */
    body.arqui-nefromante-final {
      background: #000;
    }

    /* ================================================================
       4. CENA DE BATALHA — Ocultar, substituir por imagem do boss
          com heróis no painel esquerdo (já redesenhado acima)
       ================================================================ */

    /* Ocultar a cena de batalha no desktop — os heróis ficam no painel esquerdo */
    .arqui-nefromante-final #bossBattleScene {
      display: none;
    }

    /* Hide decorative sparkles, orbs and rays in boss mode */
    .arqui-nefromante-final .boss-sparkle,
    .arqui-nefromante-final .boss-corner-orb,
    .arqui-nefromante-final .boss-corner-ray {
      display: none;
    }

    /* Remove glow/pulse animations from boss image container */
    .arqui-nefromante-final #arquiBossImageDesktop {
      animation: none;
      box-shadow: none;
      border-color: rgba(100,50,180,0.5);
    }

    /* ================================================================
       5. PAINEL DE QUESTÃO — qbox, opções, botão
       ================================================================ */

    /* qbox: fundo escuro com borda de cristal */
    .arqui-nefromante-final .qbox {
      background: #0d0d0d;
      border: 1px solid rgba(100,60,160,0.35);
      border-top: 1px solid rgba(100,60,160,0.35);
      border-radius: 10px;
      box-shadow: none;
    }

    /* Texto da questão: capitalização normal no PC (sobrescreve boss-battle-mode) */
    .arqui-nefromante-final .qbox p#question {
      text-transform: none !important;
    }

    /* Botão de sinalizar (flag): oculto no modo boss */
    .arqui-nefromante-final #flagBtn,
    .boss-battle-mode #flagBtn {
      display: none;
    }

    /* Cronômetro: oculto nas últimas 10 questões (PC) */
    .arqui-nefromante-final #timerWidget {
      display: none;
    }

    /* Contador de questão: visível no desktop */
    .arqui-nefromante-final #bossQuestionNum {
      display: block;
      font-family: 'Cinzel', serif;
      font-size: 0.68rem;
      color: #9f7aea;
      letter-spacing: 2px;
      text-align: center;
      margin-bottom: 8px;
    }

    /* HP Label: nome à esq + % à dir */
    .arqui-nefromante-final #bossHpContainer {
      position: relative;
    }
    .arqui-nefromante-final #bossHpLabel {
      position: absolute;
      left: 14px; right: 14px;
      bottom: 12px;
      height: 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0;
      z-index: 3;
      pointer-events: none;
      padding: 0 8px;
    }
    .arqui-nefromante-final #bossHpName {
      font-family: 'Cinzel', serif;
      font-size: 0.7rem;
      color: #fff;
      letter-spacing: 1px;
      text-shadow: 0 0 6px #000, 0 1px 3px #000;
    }
    .arqui-nefromante-final #bossHpPct {
      font-size: 0.7rem;
      color: #fde68a;
      text-shadow: 0 0 6px #000, 0 1px 3px #000;
      font-weight: 700;
    }

    /* HP fill bar: visível, barra normal */
    .arqui-nefromante-final #bossHpFill {
      display: block;
    }
    .arqui-nefromante-final #bossHpTrack {
      height: 24px;
      width: 100%;
      margin: 0;
      overflow: hidden;
      background: #0b1020;
      border: 2px solid rgba(168,85,247,0.9);
      border-radius: 12px;
      box-shadow: 0 0 10px rgba(168,85,247,0.5), inset 0 0 6px rgba(0,0,0,0.5);
      display: block;
      padding: 0;
    }
    .arqui-nefromante-final #bossHpTrack::before {
      content: none;
    }
    #arquiHpStarsDesktop {
      display: none;
    }
    .arqui-nefromante-final #arquiHpStarsDesktop {
      display: none;
    }
    .arqui-hp-star {
      font-size: 0.75rem;
      color: rgba(255,255,255,0.2);
      text-shadow: none;
      transition: all 0.5s cubic-bezier(0.34,1.56,0.64,1);
      position: relative;
      z-index: 1;
      line-height: 1;
    }
    .arqui-hp-star.filled {
      color: #fbbf24;
      text-shadow:
        0 0 6px rgba(251,191,36,1),
        0 0 12px rgba(251,191,36,0.7);
      filter: drop-shadow(0 0 3px rgba(251,191,36,0.9));
      transform: scale(1.2);
    }
    .arqui-hp-star.filled.last-filled {
      animation: starPop 0.6s cubic-bezier(0.34,1.56,0.64,1);
    }
    @keyframes starPop {
      0%   { transform: scale(0.5) rotate(-20deg); opacity: 0.3; }
      60%  { transform: scale(1.45) rotate(5deg); }
      100% { transform: scale(1.25) rotate(0deg); opacity: 1; }
    }

    /* Opções: coluna única, borda de cristal */
    .arqui-nefromante-final #options {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
    }
    .arqui-nefromante-final .option {
      background: linear-gradient(135deg,
        rgba(22,5,55,0.95) 0%,
        rgba(12,2,35,0.98) 100%);
      border: 2px solid rgba(124,58,237,0.6);
      border-radius: 10px;
      color: #e9d5ff;
      padding: 12px 16px;
      min-height: auto;
      display: flex;
      align-items: center;
      font-size: 0.82rem;
      letter-spacing: 0.3px;
      text-shadow: 0 0 5px rgba(192,132,252,0.15);
      transition: all 0.2s ease;
      position: relative;
    }
    .arqui-nefromante-final .option:hover:not(:disabled) {
      background: linear-gradient(135deg,
        rgba(55,15,110,0.95) 0%,
        rgba(35,8,80,0.98) 100%);
      border-color: rgba(192,132,252,0.85);
      box-shadow:
        0 0 20px rgba(168,85,247,0.35),
        inset 0 0 10px rgba(168,85,247,0.08);
      transform: translateX(3px);
    }
    .arqui-nefromante-final .option.correct {
      background: linear-gradient(135deg, rgba(5,45,25,0.95), rgba(3,28,18,0.98));
      border-color: #34d399;
    }
    .arqui-nefromante-final .option.wrong {
      background: linear-gradient(135deg, rgba(55,5,15,0.95), rgba(38,3,10,0.98));
      border-color: #fb7185;
    }

    /* Badge de letra (A/B/C/D): oculto no modo boss */
    .arqui-nefromante-final .option .boss-letter-badge,
    .arqui-nefromante-final .boss-letter-badge {
      display: none;
    }

    /* Botão Atacar/Golpe Final: dourado discreto */
    .arqui-nefromante-final #nextBtn:not(.hidden) {
      background: linear-gradient(180deg,
        #b8860b 0%, #8a6508 50%, #5a4004 100%);
      border: 2px solid rgba(255,215,0,0.7);
      border-radius: 10px;
      color: #fff8dc;
      font-family: 'Cinzel', serif;
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      padding: 9px 20px;
      text-shadow: 0 1px 2px rgba(0,0,0,0.5);
      box-shadow:
        0 0 14px rgba(255,215,0,0.3),
        0 3px 10px rgba(0,0,0,0.5);
      animation: arquiGolpeGlow 2.5s ease-in-out infinite alternate;
    }
    @keyframes arquiGolpeGlow {
      from { box-shadow: 0 0 10px rgba(255,215,0,0.25), 0 3px 8px rgba(0,0,0,0.5); }
      to   { box-shadow: 0 0 22px rgba(255,215,0,0.55), 0 3px 12px rgba(0,0,0,0.55); }
    }
    .arqui-nefromante-final #nextBtn:not(.hidden)::after {
      content: none;
    }

    /* Hint do botão */
    .arqui-nefromante-final #golpeFinalHint {
      color: rgba(192,132,252,0.7);
    }
    .arqui-nefromante-final #golpeFinalHint[style*='color: rgb(255, 215, 0)'] {
      color: #ffd700;
    }

    /* AJUSTE 1 DESKTOP: Ocultar hint e medidor de finalização abaixo do botão */
    .arqui-nefromante-final #golpeFinalHint {
      display: none;
    }
    .arqui-nefromante-final #finalMeterContainer {
      display: none !important;
    }

    /* Medidor de estrelas: roxo vibrante */
    .arqui-nefromante-final .final-star.filled {
      color: var(--purple);
      filter:
        drop-shadow(0 0 10px rgba(192,132,252,1))
        drop-shadow(0 0 20px rgba(168,85,247,0.7));
    }
    .arqui-nefromante-final #finalMeterContainer {
      background: linear-gradient(180deg,
        rgba(12,2,35,0.97) 0%,
        rgba(7,1,20,0.99) 100%);
      border-color: rgba(168,85,247,0.6);
      border-top-color: rgba(192,132,252,0.5);
    }
    .arqui-nefromante-final #finalMeterLabel {
      color: rgba(192,132,252,0.8);
    }

    /* Botões no modo boss: ATACAR + NOVO JOGO lado a lado */
    .arqui-nefromante-final .ctrl {
      flex-direction: row;
      gap: 8px;
    }
    .arqui-nefromante-final .ctrl #newBtn {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
    }
    .arqui-nefromante-final .ctrl #nextBtn:not(.hidden) {
      flex: 1;
    }

    /* Remove glow animation from ATACAR button — solid colors only */
    .arqui-nefromante-final #nextBtn:not(.hidden) {
      animation: none;
    }

    /* Estado crítico de HP: boss tremendo */
    .arqui-nefromante-final.boss-hp-critical .battle-boss-side img {
      filter:
        drop-shadow(0 0 30px rgba(255,50,255,1))
        drop-shadow(0 0 60px rgba(200,0,200,0.8))
        brightness(1.3) !important;
    }

    /* ================================================================
       6. MOBILE — Layout vertical compacto (max-width: 768px)
       ================================================================ */
    @media (max-width: 768px) {

      /* Forçar grid de 1 coluna no boss mode mobile (sobrescreve regra desktop de 2 colunas) */
      body.arqui-nefromante-final .app {
        grid-template-columns: 1fr;
      }

      /* Painel esquerdo: drawer com tema roxo */
      .arqui-nefromante-final .panel.left {
        background: linear-gradient(180deg,
          rgba(12,3,32,0.99) 0%,
          rgba(6,1,18,1) 100%) !important;
        border-color: rgba(168,85,247,0.5) !important;
      }

      /* Party panel no drawer mobile: heróis em linha */
      .arqui-nefromante-final #bossPartyPanel {
        padding: 14px 10px 12px;
      }
      .arqui-nefromante-final .boss-party-hero img {
        width: 72px;
        height: 82px;
      }

      /* Painel direito: ocupa a tela toda */
      .arqui-nefromante-final .panel.right {
        border-color: rgba(168,85,247,0.55);
        background: linear-gradient(180deg,
          rgba(10,2,28,0.98) 0%,
          rgba(5,1,15,0.99) 100%);
      }

      /* Título: menor no mobile */
      .arqui-nefromante-final #bossTitleBar {
        font-size: clamp(0.75rem, 3.5vw, 1rem);
        letter-spacing: 2px;
      }

      /* Ocultar cena de batalha no mobile também */
      .arqui-nefromante-final #bossBattleScene {
        display: none;
      }

      /* Opções: coluna única no mobile */
      .arqui-nefromante-final #options {
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .arqui-nefromante-final .option {
        min-height: auto;
        padding: 10px 14px;
        font-size: 0.8rem;
      }
      .arqui-nefromante-final .option .boss-letter-badge,
      .arqui-nefromante-final .boss-letter-badge {
        display: none;
      }

      /* Texto da questão: menor */
      .arqui-nefromante-final .qbox p#question {
        font-size: 0.78rem;
        line-height: 1.55;
      }

      /* Botão Golpe Final: compacto no mobile */
      .arqui-nefromante-final #nextBtn:not(.hidden) {
        font-size: 0.88rem;
        padding: 12px 20px;
        letter-spacing: 3px;
      }
      /* CORREÇÃO 1: Remover o subtítulo "CONFIRMAR RESPOSTA" no mobile (parecia 2 botões) */
      .arqui-nefromante-final #nextBtn:not(.hidden)::after {
        display: none;
      }

      /* CORREÇÃO 2: Logo NefroQuest visível no topo mobile; título vai para dentro do painel */
      .arqui-nefromante-final .game-title h1,
      .arqui-nefromante-final .game-title .subtitle {
        display: block;
      }
      .arqui-nefromante-final .game-title h1 {
        font-size: 1.1rem;
        letter-spacing: 2px;
        color: var(--purple);
        text-shadow: 0 0 15px rgba(192,132,252,0.8), 0 0 30px rgba(168,85,247,0.5);
      }
      .arqui-nefromante-final .game-title .subtitle {
        font-size: 0.55rem;
        color: rgba(192,132,252,0.6);
        letter-spacing: 4px;
      }
      /* Título "CONFRONTO FINAL" sai do game-title e vai acima da HP bar */
      .arqui-nefromante-final #bossTitleBar {
        display: none; /* ocultado no topo — será mostrado dentro do painel right */
      }
      /* Ocultar título desktop no mobile (evita duplicação) */
      .arqui-nefromante-final #arquiBossTitleDesktop {
        display: none;
      }
      /* Título inline acima da HP bar (mobile) */
      .arqui-nefromante-final #arquiBossTitleMobile {
        display: block;
        font-family: 'Cinzel', serif;
        font-size: clamp(0.7rem, 3.2vw, 0.95rem);
        font-weight: 900;
        letter-spacing: 3px;
        text-align: center;
        color: #e9d5ff;
        text-shadow: 0 0 20px rgba(216,180,254,0.95), 0 0 40px rgba(168,85,247,0.7);
        animation: arquiTitleGlow 2.5s ease-in-out infinite alternate;
        margin-bottom: 6px;
        text-transform: uppercase;
        padding: 0 4px;
      }
      /* Estrelas top: ocultar no mobile (usamos o container mobile dedicado) */
      .arqui-nefromante-final #finalMeterStarsTop {
        display: none;
      }
      /* Estrelas mobile: agora ficam dentro da HP bar, ocultar container abaixo */
      .arqui-nefromante-final #arquiStarsMobile {
        display: none;
      }
      /* HP bar mobile: largura total, altura maior, stars dentro */
      .arqui-nefromante-final #bossHpTrack {
        width: 100%;
        height: 28px;
      }
      .arqui-nefromante-final #arquiHpStarsDesktop {
        display: contents !important;
      }

      /* CORREÇÃO 3: Colunas rúnicas menores no mobile para não sobrepor botões */
      .arqui-nefromante-final #runeColLeft,
      .arqui-nefromante-final #runeColRight {
        width: 12px;
      }
      .arqui-nefromante-final .rune-glyph {
        font-size: 0.55rem;
      }

      /* Zoom no rosto do Nefromante: gerenciado pelo .arqui-strip-boss-thumb (overflow:hidden) */

      /* Medidor de estrelas: menor gap */
      .arqui-nefromante-final #finalMeterStars {
        gap: 3px;
      }
      .arqui-nefromante-final .final-star {
        font-size: 1.1rem;
      }

      /* REMOVER no mobile: hint "ATIVADO APÓS SELECIONAR..." e bloco "MEDIDOR DE FINALIZAÇÃO" */
      .arqui-nefromante-final #golpeFinalHint {
        display: none;
      }
      .arqui-nefromante-final #finalMeterContainer {
        display: none !important;
      }

      /* AJUSTE 1: Espaçamento entre botão herói e o quadro abaixo */
      .arqui-nefromante-final .panel.right {
        margin-top: 14px;
      }

      /* AJUSTE 3: Ocultar cronômetro no mobile durante as últimas 10 questões */
      .arqui-nefromante-final #timerWidget {
        display: none;
      }

      /* AJUSTE 4: Questões em capitalização normal (não caixa alta) */
      .arqui-nefromante-final .qbox p#question {
        text-transform: none !important;
        font-family: 'Philosopher', serif !important;
        font-weight: 600;
        font-size: 0.88rem;
        letter-spacing: 0.2px;
      }
    }

    /* ================================================================
       7. MOBILE — Banner de heróis no topo da tela (fora do drawer)
          Aparece acima do painel direito quando o drawer está fechado
       ================================================================ */

    /* Faixa de heróis no topo do painel direito (mobile) */
    #arquiHeroStrip {
      display: none;
    }
    @media (max-width: 768px) {
      .arqui-nefromante-final #arquiHeroStrip {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 8px 12px;
        background: linear-gradient(180deg,
          rgba(20,4,55,0.98) 0%,
          rgba(10,2,32,0.99) 100%);
        border: 1px solid rgba(168,85,247,0.5);
        border-radius: 10px;
        margin-bottom: 8px;
        position: relative;
        overflow: hidden;
      }
      .arqui-nefromante-final #arquiHeroStrip::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; height: 2px;
        background: linear-gradient(90deg,
          transparent, rgba(168,85,247,0.7), rgba(216,180,254,1),
          rgba(168,85,247,0.7), transparent);
        animation: arquiPanelLine 2.2s ease-in-out infinite alternate;
      }
      .arqui-hero-strip-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
      }
      .arqui-hero-strip-item img {
        width: 54px;
        height: 62px;
        border-radius: 8px;
        border: 2px solid rgba(168,85,247,0.8);
        object-fit: cover;
        object-position: top;
        box-shadow: 0 0 12px rgba(168,85,247,0.5), 0 2px 8px rgba(0,0,0,0.7);
      }
      .arqui-hero-strip-item img.hero-selected {
        border-color: #ffd700;
        box-shadow: 0 0 18px rgba(255,215,0,0.8), 0 2px 8px rgba(0,0,0,0.7);
      }
      .arqui-hero-strip-name {
        font-family: 'Cinzel', serif;
        font-size: 0.48rem;
        color: var(--purple);
        letter-spacing: 0.5px;
        text-align: center;
        text-shadow: 0 0 5px rgba(192,132,252,0.5);
      }
      .arqui-strip-vs {
        font-family: 'Cinzel', serif;
        font-size: 0.6rem;
        color: rgba(216,180,254,0.5);
        letter-spacing: 2px;
        align-self: center;
      }
      .arqui-strip-boss {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
      }
      /* Container do thumb do boss: overflow hidden para conter o zoom */
      .arqui-strip-boss-thumb {
        width: 54px;
        height: 62px;
        border-radius: 8px;
        border: 2px solid rgba(168,85,247,0.85);
        box-shadow: 0 0 14px rgba(168,85,247,0.7), 0 0 28px rgba(88,28,135,0.5);
        overflow: hidden;
        flex-shrink: 0;
      }
      .arqui-strip-boss img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
        display: block;
      }
      .arqui-strip-boss-name {
        font-family: 'Cinzel', serif;
        font-size: 0.48rem;
        color: rgba(216,180,254,0.7);
        letter-spacing: 0.5px;
        text-align: center;
      }
    }

    /* ========== AUTH MODAL ========== */
    .auth-modal-overlay {
      display: none; position: fixed; inset: 0; z-index: var(--z-top);
      background: rgba(0,0,0,0.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
      align-items: flex-start; justify-content: center;
      padding: 24px 16px 40px;
      overflow-y: auto;
    }
    .auth-modal-overlay.show { display: flex; }
    .auth-box {
      background: linear-gradient(180deg, #0f1a2e, #080d1a);
      border: 2px solid rgba(58,90,138,0.8); border-radius: 16px;
      padding: 32px 28px; width: 100%; max-width: 400px;
      overflow-y: visible; margin: auto 0;
      box-shadow: 0 0 60px rgba(0,80,160,0.3); position: relative;
    }
    .auth-title { font-family: 'Cinzel', serif; color: var(--gold); text-align: center; font-size: 1.2rem; margin-bottom: 4px; }
    .auth-subtitle { color: var(--txt-dim); text-align: center; font-size: 0.82rem; margin-bottom: 24px; }
    .auth-tabs { display: flex; gap: 4px; margin-bottom: 20px; background: rgba(255,255,255,0.05); border-radius: 8px; padding: 3px; }
    .auth-tab {
      flex: 1; padding: 8px; border: none; background: transparent;
      color: var(--txt-dim); font-family: 'Philosopher', serif; font-size: 0.9rem;
      border-radius: 6px; cursor: pointer; transition: all 0.2s;
    }
    .auth-tab.active { background: rgba(58,90,138,0.5); color: var(--txt); }
    .auth-google-btn {
      display: flex; align-items: center; justify-content: center; gap: 10px;
      width: 100%; padding: 12px; background: #fff; color: #333;
      border: none; border-radius: 10px; font-size: 0.95rem; font-weight: 600;
      cursor: pointer; transition: opacity 0.2s; margin-bottom: 16px;
    }
    .auth-google-btn:hover { opacity: 0.9; }
    .auth-divider { display: flex; align-items: center; gap: 10px; color: var(--txt-dim); font-size: 0.8rem; margin-bottom: 16px; }
    .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.1); }
    .auth-field { margin-bottom: 14px; }
    .auth-field label { display: block; color: var(--txt-dim); font-size: 0.8rem; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.8px; }
    .auth-field input {
      width: 100%; background: rgba(255,255,255,0.07); border: 1px solid rgba(58,90,138,0.6);
      border-radius: 8px; padding: 10px 12px; color: var(--txt);
      font-family: 'Philosopher', serif; font-size: 1rem; outline: none; transition: border-color 0.2s;
    }
    .auth-field input:focus { border-color: var(--gold); }
    .auth-submit-btn {
      width: 100%; padding: 12px; background: linear-gradient(135deg, #1a3a6a, #0d2040);
      border: 1px solid rgba(58,90,138,0.7); border-radius: 10px; color: var(--gold);
      font-family: 'Cinzel', serif; font-size: 0.95rem; cursor: pointer; transition: all 0.2s; margin-bottom: 12px;
    }
    .auth-submit-btn:hover { background: linear-gradient(135deg, #1e4a80, #122a50); border-color: var(--gold); }
    .auth-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
    .auth-guest-link { text-align: center; color: var(--txt-dim); font-size: 0.82rem; cursor: pointer; text-decoration: underline; }
    .auth-guest-link:hover { color: var(--txt); }
    .auth-msg {
      border-radius: 8px; padding: 8px 12px; font-size: 0.82rem; margin-bottom: 12px; display: none;
    }
    .auth-msg.error { background: rgba(251,113,133,0.15); border: 1px solid rgba(251,113,133,0.3); color: #fb7185; }
    .auth-msg.success { background: rgba(52,211,153,0.15); border: 1px solid rgba(52,211,153,0.3); color: #34d399; }
    .auth-close-btn { position: absolute; top: 12px; right: 16px; background: none; border: none; color: var(--txt-dim); font-size: 1.2rem; cursor: pointer; }
    /* Welcome user badge */
    .welcome-user-badge {
      display: none; align-items: center; gap: 10px;
      background: rgba(10,15,30,0.9); border: 1px solid rgba(52,211,153,0.4);
      border-radius: 10px; padding: 8px 14px; margin: 10px 0;
    }
    .welcome-user-badge img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
    .welcome-user-avatar-placeholder { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg,#1a3a6a,#0d2040); border: 1px solid rgba(58,90,138,0.6); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; color: var(--gold); flex-shrink: 0; }
    .welcome-user-name { color: #34d399; font-weight: 700; flex: 1; font-size: 0.85rem; }
    .welcome-logout-btn { background: none; border: 1px solid rgba(251,113,133,0.4); border-radius: 6px; color: #fb7185; padding: 3px 8px; font-size: 0.75rem; cursor: pointer; font-family: 'Philosopher', serif; }
    .landing-title, .welcome-content h1, .game-title h1 { opacity: 1; }
          @keyframes golpeFinalFloat { 0%,100%{transform:scale(1) translateY(0);filter:brightness(1) drop-shadow(0 0 18px rgba(168,85,247,0.7));} 50%{transform:scale(1.03) translateY(-6px);filter:brightness(1.1) drop-shadow(0 0 32px rgba(168,85,247,1));} }
          @keyframes golpeFinalTextPulse { 0%,100%{text-shadow:0 0 20px rgba(216,180,254,0.8),0 0 40px rgba(168,85,247,0.5);} 50%{text-shadow:0 0 35px rgba(216,180,254,1),0 0 70px rgba(168,85,247,0.9),0 0 100px rgba(88,28,135,0.5);} }
          @keyframes golpeFinalEnter { from{opacity:0;transform:scale(0.88);} to{opacity:1;transform:scale(1);} }
          #arquiQ9PopupInner { animation: golpeFinalEnter 0.4s cubic-bezier(0.34,1.56,0.64,1) both; }
          #arquiQ9PopupImg { animation: golpeFinalFloat 3s ease-in-out infinite; }
          #arquiQ9PopupTitle { animation: golpeFinalTextPulse 2s ease-in-out infinite; }


/* ── Boss Battle Q9 Popup animations (extracted from inline body style) ── */
@keyframes golpeFinalFloat { 0%,100%{transform:scale(1) translateY(0);filter:brightness(1) drop-shadow(0 0 18px rgba(168,85,247,0.7));} 50%{transform:scale(1.03) translateY(-6px);filter:brightness(1.1) drop-shadow(0 0 32px rgba(168,85,247,1));} }
@keyframes golpeFinalTextPulse { 0%,100%{text-shadow:0 0 20px rgba(216,180,254,0.8),0 0 40px rgba(168,85,247,0.5);} 50%{text-shadow:0 0 35px rgba(216,180,254,1),0 0 70px rgba(168,85,247,0.9),0 0 100px rgba(88,28,135,0.5);} }
@keyframes golpeFinalEnter { from{opacity:0;transform:scale(0.88);} to{opacity:1;transform:scale(1);} }
#arquiQ9PopupInner { animation: golpeFinalEnter 0.4s cubic-bezier(0.34,1.56,0.64,1) both; }
#arquiQ9PopupImg { animation: golpeFinalFloat 3s ease-in-out infinite; }
#arquiQ9PopupTitle { animation: golpeFinalTextPulse 2s ease-in-out infinite; }

/* ── Mentor Modal ──────────────────────────────────────────────────────────── */
.mentor-overlay {
  position: fixed; inset: 0; z-index: var(--z-toast);
  background: rgba(5, 8, 20, 0.85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity 0.28s ease; pointer-events: none;
}
.mentor-overlay.visible { opacity: 1; pointer-events: all; }

.mentor-modal {
  background: linear-gradient(180deg, #131d35, #0b1325);
  border: 1px solid rgba(255, 215, 0, 0.22);
  border-bottom: none;
  border-radius: 18px 18px 0 0;
  width: 100%; max-width: 640px;
  max-height: 82vh;
  display: flex; flex-direction: column;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.6);
  transform: translateY(20px);
  transition: transform 0.28s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.mentor-overlay.visible .mentor-modal { transform: translateY(0); }

.mentor-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  font-weight: 700; font-size: 0.95rem; color: var(--gold);
}
.mentor-close-btn {
  background: none; border: none; color: var(--txt-dim); font-size: 1.1rem;
  cursor: pointer; padding: 2px 6px; border-radius: 6px; line-height: 1;
}
.mentor-close-btn:hover { color: var(--txt); background: rgba(255,255,255,0.08); }

.mentor-context {
  padding: 10px 18px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.mentor-context-label { font-size: 0.68rem; color: var(--txt-dim); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 3px; }
.mentor-context-text { font-size: 0.82rem; color: var(--txt); line-height: 1.4; }

.mentor-chat {
  flex: 1; overflow-y: auto; padding: 12px 18px; display: flex; flex-direction: column; gap: 10px;
  min-height: 60px; max-height: 300px;
}

.mentor-msg { font-size: 0.86rem; line-height: 1.55; padding: 10px 14px; border-radius: 10px; max-width: 92%; }
.mentor-msg-user   { background: rgba(96,165,250,0.12); border: 1px solid rgba(96,165,250,0.25); align-self: flex-end; color: var(--blue-light, #93c5fd); }
.mentor-msg-assistant { background: rgba(168,85,247,0.1); border: 1px solid rgba(168,85,247,0.22); align-self: flex-start; color: var(--txt); }
.mentor-msg-system { background: rgba(251,113,133,0.1); border: 1px solid rgba(251,113,133,0.25); align-self: center; color: #fb7185; font-size: 0.78rem; text-align: center; }
.mentor-thinking { color: var(--txt-dim); font-style: italic; }

.mentor-quota-bar { font-size: 0.7rem; color: var(--txt-dim); text-align: right; padding: 2px 18px 6px; }

.mentor-input-row {
  display: flex; gap: 8px; align-items: flex-end;
  padding: 10px 18px max(16px, calc(16px + env(safe-area-inset-bottom, 0px)));
  border-top: 1px solid rgba(255,255,255,0.07);
}
.mentor-textarea {
  flex: 1; resize: none;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px; color: var(--txt); font-size: 1rem; padding: 9px 12px;
  font-family: inherit; line-height: 1.45;
  transition: border-color 0.2s;
}
.mentor-textarea:focus { outline: none; border-color: rgba(168,85,247,0.5); }
.mentor-send-btn { flex-shrink: 0; padding: 9px 18px; font-size: 0.84rem; }

/* ── AI Diagnosis Card ─────────────────────────────────────────────────────── */
.ai-diagnosis-card {
  background: linear-gradient(135deg, rgba(168,85,247,0.08), rgba(96,165,250,0.05));
  border: 1px solid rgba(168,85,247,0.3);
  border-radius: 12px; padding: 18px; margin-top: 4px; text-align: left;
}
.ai-diagnosis-loading { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px; }
.ai-diagnosis-header { font-weight: 700; font-size: 0.9rem; color: #c4b5fd; margin-bottom: 10px; }
.ai-diagnosis-loading .ai-diagnosis-header { margin-bottom: 0; }
.ai-diagnosis-body { font-size: 0.86rem; color: var(--txt); line-height: 1.65; }
.ai-diagnosis-spinner {
  width: 28px; height: 28px; border: 3px solid rgba(168,85,247,0.2);
  border-top-color: #a855f7; border-radius: 50%;
  animation: diagSpin 0.8s linear infinite;
}
@keyframes diagSpin { to { transform: rotate(360deg); } }

/* ── Reinforcement button ──────────────────────────────────────────────────── */
.reinforcement-btn {
  background: linear-gradient(135deg, rgba(168,85,247,0.18), rgba(96,165,250,0.1));
  border: 1.5px solid rgba(168,85,247,0.45);
  color: #c4b5fd;
  font-size: 0.84rem;
  padding: 10px 20px;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.reinforcement-btn:hover {
  background: linear-gradient(135deg, rgba(168,85,247,0.28), rgba(96,165,250,0.15));
  border-color: rgba(168,85,247,0.7);
  transform: translateY(-1px);
}

/* Utilitários de overlay — base compartilhada para modais criados por JS */
.nq-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 32px 16px;
  box-sizing: border-box;
}
.nq-overlay--col    { flex-direction: column; }
.nq-overlay--top    { align-items: flex-start; }
.nq-overlay--hidden { display: none; }

/* C4: Estilos estáticos movidos do JS para CSS */
.ref-copy-btn--copied { color: #6ee7b7; border-color: rgba(110,231,183,0.4); }

.flag-chip {
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent;
  color: var(--txt-dim);
  font-size: 0.75rem;
  cursor: pointer;
}
.flag-chip.selected {
  background: rgba(251,113,133,0.15);
  border-color: rgba(251,113,133,0.6);
  color: #fca5a5;
}

.flag-status {
  min-height: 20px;
  margin-top: 8px;
  font-size: 0.78rem;
  text-align: center;
}
.flag-status--pending { color: #93b4e8; }
.flag-status--success { color: #4ade80; }
.flag-status--error   { color: #f87171; }

.boss-hp-fill--high { background: linear-gradient(90deg,#4c1d95,#7c3aed,#a855f7,var(--purple)); }
.boss-hp-fill--med  { background: linear-gradient(90deg,#831843,#be185d,#ec4899); }
.boss-hp-fill--low  { background: linear-gradient(90deg,#7f1d1d,#dc2626,#f87171); }

.boss-hint--critical  { color: #ffd700; }
.meter-result--active { color: #ffd700; }

.minigame-fb--correct { color: #4ade80; }
.minigame-fb--wrong   { color: #fb7185; }

/* Acessibilidade: desativa animações para quem prefere movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Partículas e elementos puramente decorativos — ocultados */
  .particle,
  .particles,
  .welcome-particles {
    display: none !important;
  }

  /* Boss: remove o float e a aura pulsante */
  .arqui-boss-img-wrap,
  .boss-aura {
    animation: none !important;
  }

  /* Scrolls e fogo do painel de batalha */
  .rune-scroll,
  .fire-embers,
  .panel-fire-line {
    animation: none !important;
    opacity: 0.4;
  }

  /* HP shimmer — deixa estático */
  .hp-bar-fill::after {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   REDESIGN FASE 0 — Fundação CSS
   Adicionado sem remover nada existente. Classes novas convivem com
   as antigas durante a transição tela-a-tela.
   ═══════════════════════════════════════════════════════════════════ */

/* ── F0-1: Paleta expandida (mockups RPG épico) ─────────────────── */
:root {
  --rd-bg-deep:      #060810;
  --rd-bg-surface:   #0d1225;
  --rd-bg-panel:     #0f1830;
  --rd-bg-card:      #111a30;

  --rd-gold-bright:  #f0c040;
  --rd-gold-mid:     #d4a820;
  --rd-gold-dim:     #8a6010;
  --rd-gold-glow:    rgba(240,192,64,0.35);

  --rd-purple-vivid: #7c3aed;
  --rd-purple-dim:   #3d1d6e;
  --rd-purple-glow:  rgba(124,58,237,0.4);

  --rd-blue-crystal: #4a9eff;
  --rd-blue-dim:     #1e3a6e;

  --rd-red-hp:       #cc2222;
  --rd-green-ok:     #22c55e;

  --rd-parchment:    #e8d498;
  --rd-parchment-bg: #1a1408;

  --rd-txt-primary:  #d0e4f8;
  --rd-txt-dim:      #6a8aaa;
  --rd-txt-gold:     #e0c060;
}

/* ── F0-2: Frames ornamentais ───────────────────────────────────── */

/* Frame dourado — painéis principais */
.rd-frame {
  background: linear-gradient(160deg, var(--rd-bg-surface) 0%, var(--rd-bg-panel) 100%);
  border: 2px solid var(--rd-gold-dim);
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(240,192,64,0.08) inset,
    0 4px 32px rgba(0,0,0,0.6),
    0 0 20px rgba(240,192,64,0.06);
  position: relative;
}
.rd-frame::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(240,192,64,0.1);
  border-radius: 10px;
  pointer-events: none;
}
/* Ornamentos nos cantos */
.rd-frame::after {
  content: '✦';
  position: absolute;
  top: 8px; right: 12px;
  color: var(--rd-gold-dim);
  font-size: 0.65rem;
  opacity: 0.6;
  pointer-events: none;
}

/* Frame dourado brilhante — destaques, selecionados */
.rd-frame-bright {
  border-color: var(--rd-gold-bright);
  box-shadow:
    0 0 0 1px rgba(240,192,64,0.15) inset,
    0 0 30px rgba(240,192,64,0.18),
    0 4px 32px rgba(0,0,0,0.6);
}

/* Frame pergaminho — cards de questão e evidência */
.rd-frame-parchment {
  background: linear-gradient(160deg, #16120a 0%, #1a1610 100%);
  border: 2px solid var(--rd-gold-dim);
  border-radius: 10px;
  box-shadow:
    inset 0 0 40px rgba(0,0,0,0.5),
    0 4px 24px rgba(0,0,0,0.5);
}

/* Frame roxo — boss, XP, acentos épicos */
.rd-frame-purple {
  background: linear-gradient(160deg, #130d2a 0%, #0e1225 100%);
  border: 2px solid rgba(124,58,237,0.5);
  border-radius: 12px;
  box-shadow:
    0 0 20px rgba(124,58,237,0.15),
    0 4px 24px rgba(0,0,0,0.5);
}

/* ── F0-3: Botões base redesenhados ─────────────────────────────── */

/* Botão primário dourado — ações principais */
.rd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border: none;
  border-radius: 10px;
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
  text-transform: uppercase;
  white-space: nowrap;
}
.rd-btn:active { transform: translateY(1px); }

.rd-btn-gold {
  background: linear-gradient(135deg, #a07010 0%, #d4a820 40%, #f0c040 60%, #a07010 100%);
  color: #0a0800;
  box-shadow: 0 2px 12px rgba(240,192,64,0.3), 0 1px 0 rgba(255,255,255,0.15) inset;
}
.rd-btn-gold:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 20px rgba(240,192,64,0.45);
  transform: translateY(-1px);
}

.rd-btn-teal {
  background: linear-gradient(135deg, #0a3a3a 0%, #0d5a4a 100%);
  color: #60e0c0;
  border: 1px solid rgba(96,224,192,0.3);
  box-shadow: 0 2px 12px rgba(13,90,74,0.4);
}
.rd-btn-teal:hover {
  border-color: rgba(96,224,192,0.6);
  box-shadow: 0 4px 20px rgba(13,90,74,0.6);
  transform: translateY(-1px);
}

.rd-btn-ghost {
  background: rgba(255,255,255,0.04);
  color: var(--rd-txt-dim);
  border: 1px solid rgba(255,255,255,0.1);
}
.rd-btn-ghost:hover {
  background: rgba(255,255,255,0.08);
  color: var(--rd-txt-primary);
  border-color: rgba(255,255,255,0.2);
}

.rd-btn-parchment {
  background: linear-gradient(135deg, #f5f0e0, #ede0c0);
  color: #1a1408;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.rd-btn-parchment:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

/* ── F0-4: Fundo global aprimorado ─────────────────────────────── */

/* ── Fundo da landing/welcome: bg-hall.jpg escopado às telas de entrada ─── */
/* .bg-layer global não é sobrescrito aqui — mantém nefroquest_background.jpg
   na tela de perguntas. Apenas #landingScreen e #welcomeScreen usam bg-hall.jpg */

/* ── Landing screen: mesma imagem, overlay mais escuro para legibilidade ── */
#landingScreen {
  background:
    url('assets/bg-hall.jpg') center/cover no-repeat,
    #060810;
}
/* Overlay escuro uniforme — sem gradiente radial que cria banding */
#landingScreen::before {
  content: '';
  position: fixed; /* fixed para cobrir toda a tela mesmo com scroll */
  inset: 0;
  background: rgba(4, 6, 18, 0.48);
  pointer-events: none;
  z-index: 0;
}
/* Garante que o conteúdo do landing fique acima do overlay */
#landingScreen > * { position: relative; z-index: 1; }

/* ── Welcome screen (seleção de personagem): mesma imagem ─────────────────── */
#welcomeScreen {
  background:
    url('assets/bg-hall.jpg') center/cover no-repeat,
    #060810;
}
#welcomeScreen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 18, 0.68);
  pointer-events: none;
  z-index: 0;
}
/* Garante que o conteúdo do welcome fique acima do overlay */
#welcomeScreen > .welcome-content { position: relative; z-index: 1; }

/* Partículas mais variadas */
.particle:nth-child(3n) { background: var(--rd-purple-vivid); width: 3px; height: 3px; }
.particle:nth-child(5n) { background: var(--rd-blue-crystal); width: 2px; height: 2px; opacity: 0.2; }

/* ── F0-5: Scrollbar temática ───────────────────────────────────── */
.rd-scroll::-webkit-scrollbar { width: 5px; }
.rd-scroll::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); border-radius: 3px; }
.rd-scroll::-webkit-scrollbar-thumb { background: var(--rd-gold-dim); border-radius: 3px; }
.rd-scroll::-webkit-scrollbar-thumb:hover { background: var(--rd-gold-mid); }

/* ── F0-6: Divisores e ornamentos ──────────────────────────────── */
.rd-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rd-gold-dim), transparent);
  margin: 8px 0;
}

.rd-eyebrow {
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--rd-gold-mid);
  opacity: 0.8;
}

.rd-diamond {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--rd-blue-crystal);
  transform: rotate(45deg);
  box-shadow: 0 0 6px var(--rd-blue-crystal);
  flex-shrink: 0;
}
.rd-diamond-gold {
  background: var(--rd-gold-mid);
  box-shadow: 0 0 6px var(--rd-gold-glow);
}

/* ── F0-7: Labels de HUD ────────────────────────────────────────── */
.rd-hud-label {
  font-family: 'Cinzel', serif;
  font-size: 0.58rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--rd-txt-dim);
}
.rd-hud-value {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--rd-txt-primary);
}
.rd-hud-value-gold { color: var(--rd-gold-bright); }
.rd-hud-value-purple { color: #c084fc; }

/* ── F0-8: Badge de rank/nível ──────────────────────────────────── */
.rd-level-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border: 2px solid var(--rd-gold-dim);
  border-radius: 50%;
  background: radial-gradient(circle, #1a1408 0%, #0d0e1a 100%);
  box-shadow: 0 0 12px rgba(240,192,64,0.2), inset 0 0 12px rgba(0,0,0,0.5);
}
.rd-level-badge .rd-lvl-text {
  font-family: 'Cinzel', serif;
  font-size: 0.5rem;
  letter-spacing: 2px;
  color: var(--rd-gold-dim);
  text-transform: uppercase;
}
.rd-level-badge .rd-lvl-num {
  font-family: 'Cinzel', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--rd-gold-bright);
  line-height: 1;
}

/* ── F0-9: Barra de progresso temática ──────────────────────────── */
.rd-bar {
  height: 8px;
  border-radius: 99px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
}
.rd-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.4s ease;
}
.rd-bar-fill-xp {
  background: linear-gradient(90deg, var(--rd-purple-vivid), #a855f7);
  box-shadow: 0 0 8px var(--rd-purple-glow);
}
.rd-bar-fill-hp {
  background: linear-gradient(90deg, #991b1b, var(--rd-red-hp));
  box-shadow: 0 0 6px rgba(204,34,34,0.5);
}
.rd-bar-fill-gold-narrow {
  background: linear-gradient(90deg, var(--rd-gold-dim), var(--rd-gold-mid));
}

/* ── F0-10: Glow utilities ──────────────────────────────────────── */
.rd-glow-gold   { filter: drop-shadow(0 0 8px rgba(240,192,64,0.5)); }
.rd-glow-purple { filter: drop-shadow(0 0 8px rgba(124,58,237,0.6)); }
.rd-glow-blue   { filter: drop-shadow(0 0 8px rgba(74,158,255,0.5)); }

/* ── F0-11: Keyframes novos ─────────────────────────────────────── */
@keyframes rd-fade-in     { from{opacity:0} to{opacity:1} }
@keyframes rd-slide-up    { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes rd-scale-in    { from{opacity:0;transform:scale(0.92)} to{opacity:1;transform:scale(1)} }
@keyframes rd-glow-pulse  { 0%,100%{box-shadow:0 0 10px rgba(240,192,64,0.2)} 50%{box-shadow:0 0 24px rgba(240,192,64,0.5)} }
@keyframes rd-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

.rd-anim-fade-in  { animation: rd-fade-in  0.3s ease both; }
.rd-anim-slide-up { animation: rd-slide-up 0.35s ease both; }
.rd-anim-scale-in { animation: rd-scale-in 0.3s ease both; }
.rd-anim-glow     { animation: rd-glow-pulse 2s ease infinite; }
/* ═══════════════════════════════════════════════════════════════════
   FIM FASE 0
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   FASE 1 — Telas de Entrada
   T1: Landing/Login · T2: Welcome+CharSelect · T3: Dificuldade · T_MODOS
   ═══════════════════════════════════════════════════════════════════ */

/* ── T1: Landing / Login ─────────────────────────────────────────── */

/* Card principal: rd-frame-bright palette */
.landing-content {
  background: linear-gradient(160deg, var(--rd-bg-surface) 0%, #0a0f22 100%);
  border-color: var(--rd-gold-bright);
  box-shadow:
    0 0 0 1px rgba(240,192,64,0.15) inset,
    0 0 40px rgba(240,192,64,0.12),
    0 22px 60px rgba(0,0,0,0.8);
}
.landing-content::before {
  border-color: rgba(240,192,64,0.28);
}

.landing-ornament {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  color: var(--rd-gold-mid);
  letter-spacing: 4px;
  opacity: 1;
}
.landing-title {
  color: var(--rd-gold-bright);
  text-shadow: 0 0 32px rgba(240,192,64,0.28), 0 2px 4px rgba(0,0,0,0.8);
}
.landing-sub {
  color: rgba(240,192,64,0.48);
  letter-spacing: 8px;
}
.landing-tagline {
  color: var(--rd-txt-dim);
  font-family: 'Philosopher', serif;
  font-size: 0.82rem;
}
.landing-divider {
  background: linear-gradient(90deg, transparent, var(--rd-gold-dim), transparent);
}

/* Google button: parchment style */
.landing-btn-google {
  background: linear-gradient(135deg, #f5f0e0, #ede0c0);
  color: #1a1208;
  border: none;
  box-shadow: 0 2px 14px rgba(0,0,0,0.45);
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.3px;
}
.landing-btn-google:hover {
  background: linear-gradient(135deg, #f8f3e8, #f0e8cc);
  filter: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.55);
}

/* Email button: blue crystal style */
.landing-btn-email {
  background: rgba(20,40,90,0.3);
  color: var(--rd-blue-crystal);
  border: 2px solid rgba(74,158,255,0.3);
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.3px;
}
.landing-btn-email:hover {
  background: rgba(20,40,90,0.5);
  border-color: var(--rd-blue-crystal);
  color: #90ccff;
  transform: translateY(-1px);
}

/* Guest button: ghost style */
.landing-btn-guest {
  display: block;
  width: 100%;
  padding: 10px 20px;
  margin-top: 2px;
  background: rgba(255,255,255,0.04);
  color: var(--rd-txt-dim);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  font-family: 'Philosopher', serif;
  text-align: center;
}
.landing-btn-guest:hover {
  background: rgba(255,255,255,0.07);
  color: var(--rd-txt-primary);
  border-color: rgba(255,255,255,0.18);
}

/* ── T2: Welcome Screen ──────────────────────────────────────────── */

/* Welcome content: subtle card backdrop */
.welcome-content {
  background: rgba(6,8,16,0.65);
  border: 1px solid rgba(240,192,64,0.07);
  border-radius: 20px;
  padding: 28px 24px 24px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 48px rgba(0,0,0,0.7);
}

/* Ornament: rd gold */
.welcome-ornament span {
  color: var(--rd-gold-mid);
  opacity: 0.9;
}
.welcome-ornament::before,
.welcome-ornament::after {
  background: linear-gradient(90deg, transparent, rgba(212,168,32,0.5), transparent);
}

/* Title */
.welcome-content h1 { color: var(--rd-gold-bright); }
.welcome-sub { color: rgba(240,192,64,0.48); letter-spacing: 8px; }

/* Stats */
.welcome-stat .ws-val {
  color: var(--rd-gold-bright);
  font-family: 'Cinzel', serif;
}
.welcome-stat .ws-lbl {
  color: var(--rd-txt-dim);
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 1.5px;
}

/* Nova Jornada button: gold style */
#welcomeScreen .btn.gold {
  background: linear-gradient(135deg, #a07010 0%, #d4a820 40%, #f0c040 60%, #a07010 100%);
  color: #0a0800;
  border: none;
  box-shadow: 0 2px 12px rgba(240,192,64,0.3), 0 1px 0 rgba(255,255,255,0.15) inset;
  font-family: 'Cinzel', serif;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: filter 0.15s, transform 0.15s, box-shadow 0.15s;
}
#welcomeScreen .btn.gold:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 20px rgba(240,192,64,0.45);
  transform: translateY(-1px);
}

/* Secondary buttons */
#welcomeScreen .btn.sec {
  background: rgba(240,192,64,0.04);
  border: 1px solid rgba(138,96,16,0.3);
  color: var(--rd-txt-primary);
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  letter-spacing: 0.5px;
  transition: background 0.2s, border-color 0.2s, transform 0.1s;
}
#welcomeScreen .btn.sec:hover {
  background: rgba(240,192,64,0.08);
  border-color: var(--rd-gold-dim);
  transform: translateY(-1px);
}

/* Ponto Fraco: red accent preserved */
#weakPointBtn {
  background: rgba(204,34,34,0.1) !important;
  border-color: rgba(204,34,34,0.35) !important;
  color: #ff8080 !important;
}
#weakPointBtn:hover {
  background: rgba(204,34,34,0.18) !important;
  border-color: var(--rd-red-hp) !important;
}

/* Continue button */
#welcomeScreen .continue-btn {
  background: linear-gradient(135deg, #1a3a6a 0%, #2a5fa0 100%);
  color: #90c8ff;
  border: 1px solid rgba(74,158,255,0.35);
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  transition: filter 0.15s, transform 0.15s;
}
#welcomeScreen .continue-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

/* ── T2: Seleção de Classe (charSelectModal) ────────────────────── */

/* Char cards: blue-gold style with purple glow on hover */
.char-card {
  background: linear-gradient(160deg, var(--rd-bg-surface) 0%, var(--rd-bg-panel) 100%);
  border-color: rgba(74,158,255,0.2);
}
.char-card:hover {
  border-color: var(--rd-gold-mid);
  transform: translateY(-3px);
  box-shadow: 0 0 28px var(--rd-purple-glow);
}
.char-card img {
  border-color: rgba(30,58,110,0.6);
}
.char-card:hover img {
  border-color: var(--rd-gold-dim);
  box-shadow: 0 0 14px var(--rd-gold-glow);
}
.char-card h3 {
  color: var(--rd-gold-bright);
  font-family: 'Cinzel', serif;
}
.char-subtitle {
  color: var(--rd-txt-dim);
  font-family: 'Philosopher', serif;
}
.char-desc {
  color: var(--rd-txt-dim);
  font-family: 'Philosopher', serif;
}

/* ── T3: Seleção de Dificuldade ─────────────────────────────────── */

.diff-selector-overlay {
  background: rgba(0,0,0,0.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.diff-selector-card {
  background: linear-gradient(160deg, var(--rd-bg-surface) 0%, var(--rd-bg-panel) 100%);
  border-color: var(--rd-gold-bright);
  box-shadow:
    0 0 0 1px rgba(240,192,64,0.1) inset,
    0 0 60px rgba(240,192,64,0.14),
    0 20px 60px rgba(0,0,0,0.75);
}
.diff-selector-title {
  color: var(--rd-gold-bright);
  font-size: 1.05rem;
  letter-spacing: 2px;
  text-shadow: 0 0 20px rgba(240,192,64,0.3);
}
.diff-card {
  background: rgba(240,192,64,0.03);
  border-color: rgba(138,96,16,0.25);
}
.diff-card:hover {
  background: rgba(240,192,64,0.07);
  border-color: var(--rd-gold-mid);
}
.diff-card.selected {
  border-color: var(--rd-gold-bright);
  background: rgba(240,192,64,0.1);
  box-shadow: 0 0 20px rgba(240,192,64,0.18);
}
.diff-card.hardcore {
  border-color: rgba(204,34,34,0.3);
}
.diff-card.hardcore:hover {
  border-color: var(--rd-red-hp);
  background: rgba(204,34,34,0.08);
}
.diff-card.hardcore.selected {
  border-color: var(--rd-red-hp);
  background: rgba(204,34,34,0.12);
  box-shadow: 0 0 20px rgba(204,34,34,0.2);
}
.diff-name {
  color: var(--rd-txt-primary);
  font-family: 'Cinzel', serif;
}
.diff-desc {
  color: var(--rd-txt-dim);
  font-family: 'Philosopher', serif;
}
/* Confirm button: teal style */
.diff-confirm-btn {
  background: linear-gradient(135deg, #0a3a3a 0%, #0d5a4a 100%);
  color: #60e0c0;
  border: 1px solid rgba(96,224,192,0.3);
  box-shadow: 0 2px 12px rgba(13,90,74,0.4);
  font-family: 'Cinzel', serif;
  letter-spacing: 1px;
}
.diff-confirm-btn:not(:disabled):hover {
  border-color: rgba(96,224,192,0.6);
  box-shadow: 0 4px 20px rgba(13,90,74,0.6);
  filter: brightness(1.08);
}

/* ── T_MODOS: Modos de Jogo popup ───────────────────────────────── */

.game-modes-box {
  background: linear-gradient(160deg, var(--rd-bg-surface) 0%, var(--rd-bg-panel) 100%);
  border-color: var(--rd-gold-bright);
  box-shadow:
    0 0 0 1px rgba(240,192,64,0.1) inset,
    0 0 60px rgba(240,192,64,0.14),
    0 20px 60px rgba(0,0,0,0.75);
}
.game-modes-box h3 {
  color: var(--rd-gold-bright);
  letter-spacing: 2px;
  text-shadow: 0 0 20px rgba(240,192,64,0.3);
}
.game-modes-box .gm-btn {
  background: rgba(240,192,64,0.03);
  border-color: rgba(138,96,16,0.25);
  color: var(--rd-txt-primary);
  font-family: 'Philosopher', serif;
}
.game-modes-box .gm-btn:hover {
  background: rgba(240,192,64,0.08);
  border-color: var(--rd-gold-dim);
}
.game-modes-box .gm-btn .gm-title {
  color: var(--rd-txt-primary);
  font-family: 'Cinzel', serif;
  font-size: 0.88rem;
}
.game-modes-box .gm-btn .gm-desc {
  color: var(--rd-txt-dim);
  font-family: 'Philosopher', serif;
}
.game-modes-box .gm-btn.weak-btn {
  background: rgba(204,34,34,0.07);
  border-color: rgba(204,34,34,0.3);
}
.game-modes-box .gm-btn.weak-btn .gm-title {
  color: #ff8080;
}
.game-modes-box .gm-btn.weak-btn:hover {
  background: rgba(204,34,34,0.14);
  border-color: var(--rd-red-hp);
}
.game-modes-close {
  background: rgba(240,192,64,0.07);
  border: 1px solid rgba(240,192,64,0.2);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rd-gold-mid);
  top: 10px;
  right: 10px;
}
.game-modes-close:hover {
  background: rgba(240,192,64,0.15);
  border-color: var(--rd-gold-mid);
  color: var(--rd-gold-bright);
}

/* ═══════════════════════════════════════════════════════════════════
   FIM FASE 1
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   FASE 2 — Game Screen
   T4: Questão ativa · T5: Resposta correta · T6: Resposta errada
   ═══════════════════════════════════════════════════════════════════ */

/* ── Left panel ─────────────────────────────────────────────────── */
.panel.left {
  background: linear-gradient(170deg, var(--rd-bg-surface) 0%, var(--rd-bg-panel) 100%);
  border-right: 1px solid rgba(240,192,64,0.1);
}

.portrait-frame {
  border: 2px solid var(--rd-gold-dim);
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(240,192,64,0.12), 0 4px 20px rgba(0,0,0,0.55);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.portrait-frame:hover {
  border-color: var(--rd-gold-bright);
  box-shadow: 0 0 32px rgba(240,192,64,0.28), 0 0 60px rgba(240,192,64,0.08);
}
.portrait { border-radius: 10px; }

.xp-bar {
  background: rgba(124,58,237,0.12);
  border: 1px solid rgba(124,58,237,0.22);
  border-radius: 6px;
}
.xp-bar > div {
  background: linear-gradient(90deg, var(--rd-purple-vivid), #9333ea);
  box-shadow: 0 0 10px rgba(124,58,237,0.55);
}

.story {
  background: rgba(240,192,64,0.03);
  border: 1px solid rgba(240,192,64,0.1);
  border-radius: 8px;
  padding: 10px 12px;
}
.story h3 {
  color: var(--rd-gold-bright);
  font-size: 0.66rem;
  letter-spacing: 1.5px;
}

.hud {
  background: linear-gradient(160deg, rgba(13,18,37,0.75), rgba(15,24,48,0.75));
  border: 1px solid rgba(240,192,64,0.08);
  border-radius: 10px;
  padding: 10px 8px;
}
.tile {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.055);
  border-radius: 7px;
  padding: 6px 4px;
  transition: border-color 0.2s;
}
.tile:hover { border-color: rgba(240,192,64,0.18); }
.tile span { color: var(--rd-txt-dim); }
.tile strong { font-family: 'Cinzel', serif; color: var(--rd-txt-primary); }
.tile:nth-child(5) strong { color: var(--rd-gold-bright); }
.tile:nth-child(6) strong { color: var(--rd-purple-vivid); }

/* ── Question box (T4) ──────────────────────────────────────────── */
.qbox {
  background: linear-gradient(160deg, rgba(13,18,37,0.96) 0%, rgba(15,24,48,0.96) 100%);
  border: 1px solid rgba(240,192,64,0.18);
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(240,192,64,0.05) inset, 0 6px 28px rgba(0,0,0,0.5);
}
#question {
  color: var(--rd-txt-primary);
  font-family: 'Philosopher', serif;
  font-size: 0.97rem;
  line-height: 1.66;
}

/* ── Answer options (T4) ────────────────────────────────────────── */
.option {
  background: linear-gradient(160deg, rgba(13,18,37,0.96), rgba(15,24,48,0.96));
  border: 1.5px solid rgba(74,158,255,0.18);
  border-radius: 10px;
  padding: 0;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  text-align: left;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.15s;
}
.option::before { display: none; }

.opt-key {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  flex-shrink: 0;
  background: rgba(240,192,64,0.07);
  border-right: 1px solid rgba(240,192,64,0.13);
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--rd-gold-mid);
  padding: 13px 0;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.opt-body {
  padding: 13px 14px;
  font-family: 'Philosopher', serif;
  font-size: 0.9rem;
  color: var(--rd-txt-primary);
  line-height: 1.46;
}

.option:hover:not(:disabled) {
  border-color: var(--rd-gold-mid);
  box-shadow: 0 0 18px rgba(240,192,64,0.1), 0 2px 8px rgba(0,0,0,0.35);
  transform: translateX(3px);
}
.option:hover:not(:disabled) .opt-key {
  background: rgba(240,192,64,0.14);
  color: var(--rd-gold-bright);
  border-right-color: rgba(240,192,64,0.25);
}

/* T5 — Correct answer */
.option.correct {
  border-color: rgba(34,197,94,0.55);
  background: linear-gradient(160deg, rgba(8,32,18,0.97), rgba(6,24,14,0.97));
  box-shadow: 0 0 22px rgba(34,197,94,0.18);
  transform: none;
}
.option.correct .opt-key {
  background: rgba(34,197,94,0.18);
  border-right-color: rgba(34,197,94,0.28);
  color: #4ade80;
}
.option.correct .opt-body { color: #a7f3d0; }

/* T6 — Wrong answer + shake */
@keyframes rd-shake {
  0%, 100% { transform: translateX(0); }
  18%       { transform: translateX(-7px); }
  36%       { transform: translateX(6px); }
  54%       { transform: translateX(-4px); }
  72%       { transform: translateX(3px); }
}
.option.wrong {
  border-color: rgba(220,38,38,0.55);
  background: linear-gradient(160deg, rgba(36,8,12,0.97), rgba(28,6,10,0.97));
  box-shadow: 0 0 20px rgba(220,38,38,0.18);
  animation: rd-shake 0.42s ease;
}
.option.wrong .opt-key {
  background: rgba(220,38,38,0.18);
  border-right-color: rgba(220,38,38,0.28);
  color: #f87171;
}
.option.wrong .opt-body { color: #fca5a5; }

/* ── Feedback card ──────────────────────────────────────────────── */
.feedback {
  background: linear-gradient(160deg, rgba(13,18,37,0.9), rgba(15,24,48,0.9));
  border-color: rgba(74,158,255,0.18);
  border-radius: 10px;
}
.feedback.good {
  border-color: rgba(34,197,94,0.3);
  background: linear-gradient(160deg, rgba(7,26,16,0.93), rgba(5,20,12,0.93));
}
.feedback.bad {
  border-color: rgba(220,38,38,0.3);
  background: linear-gradient(160deg, rgba(28,7,10,0.93), rgba(22,5,8,0.93));
}
.fb-more-btn {
  background: none !important;
  border: none !important;
  color: var(--rd-blue-crystal) !important;
  cursor: pointer;
  font-size: 0.8rem !important;
  padding: 0 0 0 4px !important;
  font-family: 'Philosopher', serif;
  opacity: 0.85;
  transition: opacity 0.15s;
}
.fb-more-btn:hover { opacity: 1; }

/* ── Refs / Evidence card ───────────────────────────────────────── */
.refs-header {
  color: var(--rd-gold-bright);
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.ref-card {
  background: linear-gradient(160deg, rgba(13,18,37,0.95), rgba(15,24,48,0.95));
  border-radius: 10px;
  border: 1px solid rgba(240,192,64,0.12);
  box-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.ref-card:hover { border-color: rgba(240,192,64,0.22); }

/* ── Ctrl buttons ───────────────────────────────────────────────── */
#nextBtn {
  background: linear-gradient(135deg, #083838 0%, #0a5040 100%);
  color: #5cd9b8;
  border: 1px solid rgba(92,217,184,0.3);
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 0.8px;
  transition: background 0.2s, box-shadow 0.2s, border-color 0.2s;
}
#nextBtn:hover {
  background: linear-gradient(135deg, #0c4848 0%, #0e6050 100%);
  border-color: rgba(92,217,184,0.5);
  box-shadow: 0 0 22px rgba(92,217,184,0.18);
}

/* ── Right panel (center question area) ─────────────────────────── */
.panel.right {
  background: linear-gradient(170deg, rgba(6,8,16,0.6) 0%, rgba(9,13,26,0.6) 100%);
}

/* ═══════════════════════════════════════════════════════════════════
   FIM FASE 2
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   FASE 3 — Modais principais
   M5: Mentor IA · M1: Baú · M2: Forja · M4: Conquista desbloqueada
   ═══════════════════════════════════════════════════════════════════ */

/* ── M5 — Mentor IA (Oráculo dos Néfrons) ──────────────────────── */
.mentor-modal {
  background: linear-gradient(170deg, var(--rd-bg-surface) 0%, var(--rd-bg-deep) 100%);
  border-color: rgba(168,85,247,0.3);
  box-shadow: 0 -14px 60px rgba(124,58,237,0.18), 0 -4px 24px rgba(0,0,0,0.55);
}
.mentor-context {
  background: rgba(168,85,247,0.04);
  border-bottom-color: rgba(168,85,247,0.1);
}
.mentor-context-label { color: rgba(168,85,247,0.65); }
.mentor-context-text  { color: var(--rd-txt-primary); font-family: 'Philosopher', serif; }
.mentor-chat { scrollbar-color: rgba(168,85,247,0.25) transparent; }
.mentor-msg-user {
  background: rgba(74,158,255,0.1);
  border-color: rgba(74,158,255,0.2);
  color: var(--rd-blue-crystal);
}
.mentor-msg-assistant {
  background: rgba(124,58,237,0.08);
  border-color: rgba(168,85,247,0.18);
  color: var(--rd-txt-primary);
}
.mentor-textarea {
  background: rgba(13,18,37,0.85);
  border-color: rgba(168,85,247,0.22);
  color: var(--rd-txt-primary);
}
.mentor-textarea:focus { border-color: rgba(168,85,247,0.55); }
.mentor-input-row  { border-top-color: rgba(168,85,247,0.1); }
.mentor-quota-bar  { color: var(--rd-txt-dim); }

/* ── M1 — Baú / Chest ───────────────────────────────────────────── */
.chest-content {
  background: linear-gradient(160deg, var(--rd-bg-surface) 0%, var(--rd-bg-panel) 100%);
  border: 1px solid rgba(240,192,64,0.28);
  border-radius: 18px;
  box-shadow: 0 0 60px rgba(240,192,64,0.08), 0 14px 50px rgba(0,0,0,0.7);
  padding: 28px 24px 24px;
}
.chest-content h2 {
  color: var(--rd-gold-bright);
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  text-shadow: 0 0 22px rgba(240,192,64,0.35);
  margin-bottom: 16px;
}
.article-card {
  background: rgba(255,255,255,0.022);
  border: 1px solid rgba(240,192,64,0.1);
  border-radius: 12px;
  padding: 16px;
}
.article-card h3 { color: var(--rd-gold-bright); }
.close-chest {
  background: rgba(240,192,64,0.06);
  border: 1px solid rgba(240,192,64,0.28);
  color: var(--rd-gold-mid);
  font-family: 'Cinzel', serif;
  letter-spacing: 0.8px;
  border-radius: 10px;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.close-chest:hover {
  background: rgba(240,192,64,0.13);
  border-color: var(--rd-gold-bright);
  box-shadow: 0 0 20px rgba(240,192,64,0.18);
}

/* ── M2 — Forja ─────────────────────────────────────────────────── */
#forjaModal > div {
  background: linear-gradient(160deg, var(--rd-bg-surface) 0%, var(--rd-bg-panel) 100%) !important;
  border-color: rgba(240,192,64,0.28) !important;
  box-shadow: 0 14px 60px rgba(0,0,0,0.85), 0 0 0 1px rgba(240,192,64,0.06) inset !important;
}

/* ── M4 — Conquista desbloqueada ─────────────────────────────────── */
.ach-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  background: linear-gradient(160deg, var(--rd-bg-surface) 0%, var(--rd-bg-panel) 100%);
  border: 2px solid var(--rd-gold-bright);
  border-radius: 14px;
  padding: 22px 20px;
  max-width: 330px;
  z-index: 20000;
  box-shadow: 0 0 40px rgba(240,192,64,0.22), 0 14px 44px rgba(0,0,0,0.65);
  animation: slideInRight 0.5s ease-out, achGlow 2.5s ease-in-out 0.5s infinite;
}
@keyframes achGlow {
  0%, 100% { box-shadow: 0 0 40px rgba(240,192,64,0.22), 0 14px 44px rgba(0,0,0,0.65); }
  50%       { box-shadow: 0 0 58px rgba(240,192,64,0.42), 0 14px 44px rgba(0,0,0,0.65); }
}
.ach-notification-img {
  width: 72px; height: 72px;
  object-fit: contain;
  margin-bottom: 10px;
  animation: bounce 1s ease-in-out infinite;
  filter: drop-shadow(0 0 14px rgba(240,192,64,0.7));
}
.ach-notification-icon {
  font-size: 2.8rem;
  margin-bottom: 10px;
  animation: bounce 1s ease-in-out infinite;
  display: block;
}
.ach-notification-title {
  color: var(--rd-gold-bright);
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 8px;
  text-shadow: 0 0 14px rgba(240,192,64,0.4);
}
.ach-notification-name {
  color: var(--rd-txt-primary);
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 0.88rem;
  margin-bottom: 5px;
}
.ach-notification-desc {
  color: var(--rd-txt-dim);
  font-family: 'Philosopher', serif;
  font-size: 0.82rem;
  line-height: 1.45;
}

/* ═══════════════════════════════════════════════════════════════════
   FIM FASE 3
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   FASE 4 — Telas de conteúdo
   T10: Leaderboard · T11: Modo Estudo · T12: Simulado
   T13: Julgamento Rápido · T14: Stats · T15: Conquistas
   ═══════════════════════════════════════════════════════════════════ */

/* ── T10 — Leaderboard ──────────────────────────────────────────── */
.board-modal {
  background: linear-gradient(160deg, var(--rd-bg-surface) 0%, var(--rd-bg-panel) 100%);
  border-color: rgba(240,192,64,0.28);
  box-shadow: 0 0 0 1px rgba(240,192,64,0.06) inset, 0 16px 60px rgba(0,0,0,0.75);
}
.board-header {
  background: linear-gradient(135deg, rgba(240,192,64,0.06) 0%, transparent 60%);
  border-bottom-color: rgba(240,192,64,0.14);
  padding: 22px 24px 14px;
}
.board-title {
  color: var(--rd-gold-bright);
  text-shadow: 0 0 26px rgba(240,192,64,0.4);
}
.board-subtitle { color: var(--rd-txt-dim); }

.board-search-input {
  background: rgba(13,18,37,0.85);
  border-color: rgba(240,192,64,0.18);
  color: var(--rd-txt-primary);
}
.board-search-input:focus { border-color: var(--rd-gold-mid); }
.board-search-input::placeholder { color: var(--rd-txt-dim); }

.board-table thead th {
  background: var(--rd-bg-surface);
  color: rgba(240,192,64,0.6);
  border-bottom-color: rgba(240,192,64,0.12);
}
.board-table-wrap { scrollbar-color: rgba(240,192,64,0.25) transparent; }
.board-table tbody tr:hover { background: rgba(240,192,64,0.04); }
.board-table tbody tr.rank-1 { background: linear-gradient(90deg, rgba(240,192,64,0.12) 0%, transparent 100%); }
.board-table tbody tr.rank-2 { background: linear-gradient(90deg, rgba(192,192,192,0.08) 0%, transparent 100%); }
.board-table tbody tr.rank-3 { background: linear-gradient(90deg, rgba(205,127,50,0.08) 0%, transparent 100%); }

.board-footer { border-top-color: rgba(240,192,64,0.1); }
.btn-board-refresh {
  background: rgba(240,192,64,0.07);
  border-color: rgba(240,192,64,0.2);
  color: rgba(240,192,64,0.75);
}
.btn-board-refresh:hover { background: rgba(240,192,64,0.14); color: var(--rd-gold-bright); }

/* ── T11 — Modo de Estudo ───────────────────────────────────────── */
#studyModePage {
  background: linear-gradient(170deg, var(--rd-bg-deep) 0%, var(--rd-bg-surface) 100%) !important;
}
#studyQuestionArea {
  background: linear-gradient(160deg, var(--rd-bg-surface), var(--rd-bg-panel)) !important;
  border: 1px solid rgba(240,192,64,0.18) !important;
  box-shadow: 0 0 32px rgba(0,0,0,0.5) !important;
}
.study-option-btn {
  background: linear-gradient(160deg, rgba(13,18,37,0.97), rgba(15,24,48,0.97)) !important;
  border: 1.5px solid rgba(74,158,255,0.2) !important;
  color: var(--rd-txt-primary) !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
}
.study-option-btn:hover {
  border-color: var(--rd-gold-mid) !important;
  background: linear-gradient(160deg, rgba(18,24,48,0.98), rgba(20,30,58,0.98)) !important;
  box-shadow: 0 0 14px rgba(240,192,64,0.1) !important;
}

/* ── T12 — Prova Simulada ───────────────────────────────────────── */
.exam-overlay {
  background: var(--rd-bg-deep) !important;
}

/* ── T13 — Julgamento Rápido ────────────────────────────────────── */
#rapidQuizOverlay {
  background: var(--rd-bg-deep) !important;
}

/* ── T14 — Estatísticas ─────────────────────────────────────────── */
.stats-popup .modal-content {
  background: linear-gradient(170deg, var(--rd-bg-surface) 0%, var(--rd-bg-panel) 100%) !important;
  border: 1px solid rgba(240,192,64,0.22) !important;
  box-shadow: 0 0 50px rgba(0,0,0,0.7) !important;
}

/* ── T15 — Conquistas ───────────────────────────────────────────── */
.achievements-popup .modal-content {
  background: linear-gradient(170deg, var(--rd-bg-surface) 0%, var(--rd-bg-panel) 100%) !important;
  border: 1px solid rgba(240,192,64,0.22) !important;
  box-shadow: 0 0 50px rgba(0,0,0,0.7) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   FIM FASE 4
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   FASE 5 — Modais de sistema
   M7: Auth · M8: Pricing · M9: Profile popup · M10: Account
   M11: Flag questão · M14: Changelog · M16: Toast
   ═══════════════════════════════════════════════════════════════════ */

/* ── M7 — Auth (login / cadastro) ───────────────────────────────── */
.auth-box {
  background: linear-gradient(170deg, var(--rd-bg-surface) 0%, var(--rd-bg-deep) 100%);
  border: 1px solid rgba(240,192,64,0.25);
  box-shadow: 0 0 60px rgba(240,192,64,0.08), 0 16px 60px rgba(0,0,0,0.75);
}
.auth-title  { color: var(--rd-gold-bright); }
.auth-subtitle { color: var(--rd-txt-dim); }

.auth-tabs { background: rgba(255,255,255,0.04); }
.auth-tab  { color: var(--rd-txt-dim); font-family: 'Philosopher', serif; }
.auth-tab.active {
  background: rgba(240,192,64,0.12);
  color: var(--rd-gold-bright);
  border-radius: 6px;
}

.auth-field label { color: var(--rd-txt-dim); }
.auth-field input {
  background: rgba(13,18,37,0.85);
  border-color: rgba(74,158,255,0.2);
  color: var(--rd-txt-primary);
}
.auth-field input:focus { border-color: var(--rd-gold-mid); }

.auth-divider { color: var(--rd-txt-dim); }
.auth-divider::before,
.auth-divider::after { background: rgba(240,192,64,0.1); }

/* ── M8 — Pricing / Paywall ─────────────────────────────────────── */
.pricing-card {
  background: linear-gradient(160deg, var(--rd-bg-surface) 0%, var(--rd-bg-panel) 100%);
  border-color: rgba(74,158,255,0.2);
}
.pricing-card:hover {
  border-color: var(--rd-gold-mid);
  box-shadow: 0 0 24px rgba(240,192,64,0.1);
}
.pricing-card.featured {
  border-color: var(--rd-gold-bright);
  box-shadow: 0 0 36px rgba(240,192,64,0.16);
}
.pricing-card.featured:hover { box-shadow: 0 0 50px rgba(240,192,64,0.26); }
.pricing-ornament   { color: var(--rd-gold-dim); }
.pricing-sub-title  { color: var(--rd-txt-dim); }
.pricing-stat-pill  {
  background: rgba(240,192,64,0.06);
  border-color: rgba(240,192,64,0.18);
  color: var(--rd-gold-mid);
}
.pricing-stat-pill strong { color: var(--rd-gold-bright); }

/* ── M9 — Profile popup ─────────────────────────────────────────── */
.profile-popup {
  background: rgba(10,14,30,0.98);
  border: 1px solid rgba(240,192,64,0.2);
  box-shadow: 0 10px 36px rgba(0,0,0,0.75), 0 0 0 1px rgba(240,192,64,0.06) inset;
}
.profile-popup-email {
  color: var(--rd-txt-primary);
  border-bottom-color: rgba(240,192,64,0.12);
}
.profile-popup-email strong { color: var(--rd-txt-dim); }
.profile-popup-item {
  background: rgba(255,255,255,0.03);
  border-color: rgba(240,192,64,0.1);
  color: var(--rd-txt-primary);
}
.profile-popup-item:hover {
  background: rgba(240,192,64,0.07);
  border-color: rgba(240,192,64,0.2);
}

/* ── M10 — Conta / Account (+ Plan + Admin) ─────────────────────── */
.modal-panel {
  background: linear-gradient(160deg, var(--rd-bg-surface) 0%, var(--rd-bg-panel) 100%);
  border: 1px solid rgba(240,192,64,0.22);
  box-shadow: 0 0 50px rgba(0,0,0,0.7), 0 0 0 1px rgba(240,192,64,0.05) inset;
}

/* ── M11 — Reportar questão (flag) ──────────────────────────────── */
#flagPopup > div {
  background: linear-gradient(160deg, var(--rd-bg-surface) 0%, var(--rd-bg-panel) 100%) !important;
  border-color: rgba(99,102,241,0.5) !important;
  box-shadow: 0 0 40px rgba(99,102,241,0.2) !important;
}
.flag-chip {
  background: rgba(99,102,241,0.1);
  border: 1px solid rgba(99,102,241,0.3);
  color: #a5b4fc;
  border-radius: 16px;
  padding: 4px 12px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
}
.flag-chip:hover    { background: rgba(99,102,241,0.2); border-color: rgba(99,102,241,0.55); }
.flag-chip.selected { background: rgba(99,102,241,0.28); border-color: #818cf8; color: #e0e7ff; }

/* ── M14 — Changelog ────────────────────────────────────────────── */
.changelog-popup .modal-content {
  background: linear-gradient(170deg, var(--rd-bg-surface) 0%, var(--rd-bg-panel) 100%) !important;
  border: 1px solid rgba(240,192,64,0.22) !important;
  box-shadow: 0 0 50px rgba(0,0,0,0.7) !important;
}

/* ── M16 — Toast notifications ──────────────────────────────────── */
.nq-toast {
  background: var(--rd-bg-surface);
  border-color: rgba(74,158,255,0.35);
  color: var(--rd-txt-primary);
  box-shadow: 0 8px 28px rgba(0,0,0,0.65);
  border-radius: 10px;
}
.nq-toast.success { border-color: rgba(34,197,94,0.45);  color: #a7f3d0; }
.nq-toast.error   { border-color: rgba(220,38,38,0.45);  color: #fca5a5; }
.nq-toast.warning { border-color: rgba(251,191,36,0.45); color: #fde68a; }

/* ═══════════════════════════════════════════════════════════════════
   FIM FASE 5
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   FASE 6 — Boss & correções de layout
   T7: Confronto Final — strip de heróis removida, layout profissional
   Fix: achievements popup gap preto na base
   ═══════════════════════════════════════════════════════════════════ */

/* ── Fix — Achievements popup: sem gap preto abaixo do botão ─────── */
.achievements-popup {
  padding-bottom: 12px !important;
}
.achievements-popup .modal-content {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 88px) !important;
}

/* ── T7 — Boss: remover strip de 3 personagens (mobile e desktop) ── */
#arquiHeroStrip,
.arqui-nefromante-final #arquiHeroStrip {
  display: none !important;
}

/* Ocultar também o painel party lateral (desktop) */
#bossPartyPanel,
.arqui-nefromante-final #bossPartyPanel {
  display: none !important;
}

/* ── T7 — Confronto Final: header mais profissional ─────────────── */

/* Título mobile: espaçamento e impacto visual melhorado (SOMENTE mobile) */
@media (max-width: 768px) {
  .arqui-nefromante-final #arquiBossTitleMobile {
    padding: 16px 16px 10px;
    font-size: clamp(1rem, 4.2vw, 1.2rem) !important;
    letter-spacing: 4px;
    color: #ede9fe;
    text-shadow:
      0 0 20px rgba(168,85,247,0.9),
      0 0 50px rgba(124,58,237,0.45),
      0 2px 4px rgba(0,0,0,0.9);
    border-bottom: 1px solid rgba(168,85,247,0.22);
    margin-bottom: 4px;
  }
}

/* HP bar: respiro extra no topo após a remoção do strip */
.arqui-nefromante-final #bossHpContainer {
  margin-top: 6px !important;
}

/* Boss image desktop: leve aumento de altura para preencher espaço extra */
.arqui-nefromante-final #arquiBossImageDesktop {
  min-height: 168px;
}

/* ── T9 — Victory Modal ──────────────────────────────────────────── */
.victory-wrap {
  max-width: 600px;
  width: 100%;
  text-align: center;
  position: relative;
}
.victory-img {
  width: 100%;
  border-radius: 16px;
  border: 3px solid var(--rd-gold-bright);
  box-shadow: 0 0 50px rgba(240,192,64,0.4), 0 0 100px rgba(240,192,64,0.12);
  margin-bottom: 20px;
  display: block;
}
.victory-card {
  background: linear-gradient(170deg, var(--rd-bg-surface) 0%, var(--rd-bg-deep) 100%);
  border: 2px solid var(--rd-gold-bright);
  border-radius: 16px;
  padding: 28px 24px 24px;
  margin-top: -30px;
  position: relative;
  z-index: 2;
  box-shadow: 0 0 60px rgba(240,192,64,0.12), 0 20px 60px rgba(0,0,0,0.85);
}
.victory-title {
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  color: var(--rd-gold-bright);
  font-size: clamp(1.4rem, 5vw, 2rem);
  margin-bottom: 8px;
  text-shadow: 0 0 30px rgba(240,192,64,0.6), 0 0 60px rgba(240,192,64,0.2);
}
.victory-sub {
  color: #e2c97e;
  font-size: 0.95rem;
  margin-bottom: 18px;
}
.victory-stats {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.victory-stat {
  background: rgba(240,192,64,0.1);
  border: 1px solid rgba(240,192,64,0.3);
  border-radius: 12px;
  padding: 12px 16px;
  min-width: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.victory-stat-val {
  font-family: 'Cinzel', serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--rd-gold-bright);
}
.victory-stat-lbl {
  font-size: 0.62rem;
  color: var(--rd-txt-dim);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
.victory-champion-msg {
  color: var(--rd-txt-dim);
  font-size: 0.85rem;
  margin-bottom: 20px;
}
.victory-champion-msg strong { color: var(--rd-gold-bright); }
.victory-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.victory-btns > * { flex: 1; min-width: 120px; }
.btn.victory-share {
  background: linear-gradient(180deg, #3b82f6, #2563eb);
  border-color: #1d4ed8;
  color: #fff;
}

/* ── T8 — Game Over state ────────────────────────────────────────── */
body.rd-game-over .qbox {
  border-color: rgba(220,38,38,0.35) !important;
  box-shadow: 0 0 30px rgba(220,38,38,0.1), inset 0 0 20px rgba(220,38,38,0.04) !important;
}
body.rd-game-over #question {
  color: rgba(208,228,248,0.45);
  font-style: italic;
}
body.rd-game-over #feedback {
  background: rgba(220,38,38,0.08);
  border: 1px solid rgba(220,38,38,0.28);
  border-radius: 10px;
  color: #fca5a5;
  padding: 12px 14px;
}

/* ═══════════════════════════════════════════════════════════════════
   FIM FASE 6
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   FASE 6B — Confronto Final redesign premium
   Escopo: body.arqui-nefromante-final (últimas 10 questões)
   Vem APÓS o bloco FIM FASE 6 — não remove regras antigas,
   apenas sobrescreve com seletores iguais ou mais específicos.
   ═══════════════════════════════════════════════════════════════════ */

/* ── ATMOSPHERE — app background & panel ──────────────────────────── */

/* App-level dark blueish-purple atmosphere */
body.arqui-nefromante-final .app,
body.arqui-nefromante-final #mainApp {
  background: #04010e;
}

/* Right panel: deep dark with subtle radial purple glow */
body.arqui-nefromante-final .panel.right {
  background: radial-gradient(ellipse 80% 60% at 50% 0%,
    rgba(88,28,135,0.18) 0%, rgba(10,4,26,0.98) 55%) !important;
  border: 1px solid rgba(109,40,217,0.3) !important;
  box-shadow: 0 0 60px rgba(88,28,135,0.12), inset 0 0 40px rgba(4,1,14,0.6) !important;
}

/* ── HP BAR — cinematographic ─────────────────────────────────────── */

body.arqui-nefromante-final #bossHpContainer {
  padding: 8px 12px 10px !important;
  background: rgba(8,2,22,0.85) !important;
  border: 1px solid rgba(88,28,135,0.4) !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.5), inset 0 0 20px rgba(0,0,0,0.4) !important;
  margin-top: 6px !important;
  margin-bottom: 6px !important;
}

body.arqui-nefromante-final #bossHpLabel {
  position: static !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 5px !important;
  height: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  padding: 0 !important;
}

body.arqui-nefromante-final #bossHpName {
  font-family: 'Cinzel', serif !important;
  font-size: 0.72rem !important;
  color: #d8b4fe !important;
  letter-spacing: 2px !important;
  text-shadow: 0 0 8px rgba(216,180,254,0.5) !important;
}

body.arqui-nefromante-final #bossHpPct {
  font-size: 0.7rem !important;
  color: #a78bfa !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

body.arqui-nefromante-final #bossHpTrack {
  height: 18px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(168,85,247,0.5) !important;
  background: rgba(4,1,14,0.9) !important;
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.7), 0 0 6px rgba(88,28,135,0.2) !important;
  overflow: hidden !important;
  position: relative !important;
  display: block !important;
  padding: 0 !important;
}

body.arqui-nefromante-final #bossHpFill {
  height: 100% !important;
  border-radius: inherit !important;
  transition: width 0.5s cubic-bezier(0.4,0,0.2,1) !important;
}

/* HP fill color states */
body.arqui-nefromante-final #bossHpFill.boss-hp-fill--high {
  background: linear-gradient(90deg, #6d28d9, #7c3aed, #8b5cf6) !important;
  box-shadow: 0 0 12px rgba(124,58,237,0.5) !important;
}

body.arqui-nefromante-final #bossHpFill.boss-hp-fill--med {
  background: linear-gradient(90deg, #92400e, #b45309, #d97706) !important;
  box-shadow: 0 0 12px rgba(217,119,6,0.4) !important;
}

body.arqui-nefromante-final #bossHpFill.boss-hp-fill--low {
  background: linear-gradient(90deg, #991b1b, #dc2626, #ef4444) !important;
  box-shadow: 0 0 12px rgba(239,68,68,0.4) !important;
  animation: boss-hp-pulse 1.2s ease-in-out infinite !important;
}

@keyframes boss-hp-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.75; }
}

/* ── BOSS IMAGE — cinematic container ─────────────────────────────── */

body.arqui-nefromante-final #arquiBossImageDesktop {
  height: clamp(160px, 22vw, 240px) !important;
  min-height: clamp(160px, 22vw, 240px) !important;
  border: 1px solid rgba(168,85,247,0.5) !important;
  border-radius: 12px !important;
  box-shadow:
    0 0 40px rgba(124,58,237,0.3),
    0 0 80px rgba(88,28,135,0.2) !important;
  overflow: hidden !important;
  position: relative !important;
  background: #0a0118 !important;
  animation: none !important;
  margin-bottom: 8px !important;
}

body.arqui-nefromante-final #arquiBossImgEl {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 15% !important;
  display: block !important;
  border-radius: 0 !important;
  animation: none !important;
  transform: none !important;
}

/* Vignette overlay on boss image container */
body.arqui-nefromante-final #arquiBossImageDesktop .boss-img-wrap::after {
  background: radial-gradient(ellipse at 50% 50%,
    transparent 30%,
    rgba(4,1,14,0.45) 70%,
    rgba(4,1,14,0.75) 100%) !important;
}

/* Keep the scanlines from existing CSS (boss-img-wrap::before) — no override needed */

/* ── QUESTION COUNTER ─────────────────────────────────────────────── */

body.arqui-nefromante-final #bossQuestionNum {
  font-family: 'Cinzel', serif !important;
  font-size: 0.75rem !important;
  letter-spacing: 3px !important;
  color: #a78bfa !important;
  text-align: center !important;
  padding: 8px 0 4px !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid rgba(168,85,247,0.2) !important;
  margin-bottom: 8px !important;
  text-shadow: none !important;
  display: block !important;
}

/* ── QUESTION CARD (.qbox) ────────────────────────────────────────── */

body.arqui-nefromante-final .qbox {
  background: linear-gradient(170deg,
    rgba(20,10,45,0.95) 0%,
    rgba(10,4,26,0.98) 100%) !important;
  border: 1px solid rgba(168,85,247,0.35) !important;
  border-top: 1px solid rgba(168,85,247,0.35) !important;
  border-radius: 12px !important;
  box-shadow:
    inset 0 0 20px rgba(88,28,135,0.15),
    0 4px 20px rgba(0,0,0,0.5) !important;
  padding: 16px 18px !important;
}

body.arqui-nefromante-final #question {
  color: #e9d5ff !important;
  font-size: clamp(0.82rem, 1.5vw, 0.95rem) !important;
  line-height: 1.65 !important;
  text-transform: none !important;
  text-shadow: none !important;
}

/* ── OPTIONS — combat cards ───────────────────────────────────────── */

body.arqui-nefromante-final .option {
  background: rgba(20,10,45,0.9) !important;
  border: 1px solid rgba(109,40,217,0.4) !important;
  border-radius: 10px !important;
  color: #ddd6fe !important;
  transition: all 0.18s ease !important;
  padding: 10px 14px !important;
  min-height: auto !important;
  font-size: 0.82rem !important;
  text-shadow: none !important;
}

body.arqui-nefromante-final .option:hover:not(:disabled):not(.wrong):not(.correct) {
  background: rgba(109,40,217,0.15) !important;
  border-color: rgba(139,92,246,0.7) !important;
  transform: translateX(3px) !important;
  box-shadow: -3px 0 12px rgba(139,92,246,0.3) !important;
}

/* Preserve correct/wrong states */
body.arqui-nefromante-final .option.correct {
  background: linear-gradient(135deg, rgba(5,45,25,0.95), rgba(3,28,18,0.98)) !important;
  border-color: #34d399 !important;
}

body.arqui-nefromante-final .option.wrong {
  background: linear-gradient(135deg, rgba(55,5,15,0.95), rgba(38,3,10,0.98)) !important;
  border-color: #fb7185 !important;
}

/* opt-key letter badge in boss mode */
body.arqui-nefromante-final .opt-key {
  background: rgba(109,40,217,0.4) !important;
  border-color: rgba(139,92,246,0.6) !important;
  color: #c4b5fd !important;
}

/* Desktop 2-column grid for options */
@media (min-width: 1200px) {
  body.arqui-nefromante-final #options {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
}

/* ── NEXT BUTTON — attack button ──────────────────────────────────── */

body.arqui-nefromante-final #nextBtn:not(.hidden) {
  background: linear-gradient(180deg, #4c1d95, #3b0764) !important;
  border: 1px solid #7c3aed !important;
  color: #e9d5ff !important;
  font-family: 'Cinzel', serif !important;
  letter-spacing: 2px !important;
  font-size: 0.85rem !important;
  box-shadow: 0 0 20px rgba(124,58,237,0.3) !important;
  width: 100% !important;
  padding: 14px !important;
  border-radius: 10px !important;
  text-shadow: none !important;
  animation: none !important;
}

body.arqui-nefromante-final #nextBtn:not(.hidden)::after {
  content: none !important;
  display: none !important;
}

body.arqui-nefromante-final #nextBtn:not(.hidden):hover {
  background: linear-gradient(180deg, #5b21b6, #4c1d95) !important;
  box-shadow: 0 0 30px rgba(124,58,237,0.5) !important;
  transform: translateY(-1px) !important;
}

/* ctrl row: stack vertically in boss mode (nextBtn full width) */
body.arqui-nefromante-final .ctrl {
  flex-direction: column !important;
  gap: 6px !important;
}

body.arqui-nefromante-final .ctrl #nextBtn:not(.hidden) {
  flex: none !important;
}

/* ── FEEDBACK ─────────────────────────────────────────────────────── */

body.arqui-nefromante-final #feedback {
  border-radius: 8px !important;
  padding: 10px 14px !important;
}

/* ── PROGRESS: hide redundant bottom meter on desktop ─────────────── */
/* The HP bar (with stars inside bossHpTrack) is the primary indicator.
   The bottom meter is hidden on both desktop and mobile (already done
   by earlier rules). This reinforces that with higher specificity. */
body.arqui-nefromante-final #finalMeterContainer {
  display: none !important;
}

body.arqui-nefromante-final #golpeFinalHint {
  display: none !important;
}

/* arquiStarsDesktop also hidden — HP bar is the single progress indicator */
body.arqui-nefromante-final #arquiStarsDesktop {
  display: none !important;
}

/* ── MOBILE ADJUSTMENTS (≤768px) ─────────────────────────────────── */

@media (max-width: 768px) {
  body.arqui-nefromante-final .panel.right {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  body.arqui-nefromante-final #arquiBossImageDesktop {
    max-height: 130px !important;
    min-height: 0 !important;
    height: 130px !important;
  }

  body.arqui-nefromante-final #options {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body.arqui-nefromante-final #nextBtn:not(.hidden) {
    font-size: 0.8rem !important;
    padding: 12px !important;
  }
}

/* ── PREFERS-REDUCED-MOTION ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  body.arqui-nefromante-final #bossHpFill.boss-hp-fill--low {
    animation: none !important;
  }

  body.arqui-nefromante-final .boss-corner-orb,
  body.arqui-nefromante-final .boss-corner-ray,
  body.arqui-nefromante-final .boss-sparkle,
  body.arqui-nefromante-final .rune-track {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   FIM FASE 6B
   ═══════════════════════════════════════════════════════════════════ */

/* ── FASE 6B DESKTOP: coluna esquerda do boss battle ─────────────────── */
@media (min-width: 769px) {
  body.arqui-nefromante-final .panel.left {
    background: linear-gradient(180deg, #080212 0%, #04010e 100%) !important;
    border: 1px solid rgba(109,40,217,0.4) !important;
    box-shadow: 0 0 40px rgba(88,28,135,0.15), inset 0 0 30px rgba(4,1,14,0.6) !important;
  }
  body.arqui-nefromante-final .portrait-frame {
    border-color: rgba(139,92,246,0.75) !important;
    box-shadow: 0 0 22px rgba(139,92,246,0.45), 0 0 48px rgba(88,28,135,0.22) !important;
  }
  body.arqui-nefromante-final .xp-bar {
    background: rgba(88,28,135,0.28) !important;
    border: 1px solid rgba(139,92,246,0.35) !important;
  }
  body.arqui-nefromante-final #xpFill {
    background: linear-gradient(90deg, #6d28d9, #8b5cf6, #c084fc) !important;
    box-shadow: 0 0 8px rgba(192,132,252,0.5) !important;
  }
  body.arqui-nefromante-final .class {
    color: #c084fc !important;
    text-shadow: 0 0 8px rgba(192,132,252,0.5) !important;
  }
  body.arqui-nefromante-final .hero-title {
    color: #a78bfa !important;
  }
  /* Ocultar badges no confronto final — sem distrações */
  body.arqui-nefromante-final .badges-container {
    display: none !important;
  }
  /* Log de batalha: atmosfera roxa */
  body.arqui-nefromante-final .panel.left .log {
    background: rgba(8,2,22,0.82) !important;
    border-color: rgba(109,40,217,0.35) !important;
  }
  body.arqui-nefromante-final .panel.left .log h3 {
    color: #c084fc !important;
    letter-spacing: 1.5px;
  }
  body.arqui-nefromante-final .panel.left .story {
    background: rgba(8,2,22,0.7) !important;
    border-color: rgba(109,40,217,0.28) !important;
  }
  body.arqui-nefromante-final .panel.left .story h3 {
    color: #a78bfa !important;
  }
}

/* ── MOBILE WELCOME SCREEN OVERRIDES (após regras globais do redesign) ── */
@media (max-width: 768px) {
  /* Padding-top maior para descolar botões música/sfx da logo */
  .welcome-content {
    padding-top: 60px;
  }
  /* "Reino dos Néfrons": mais destaque no mobile */
  .welcome-ornament span {
    color: var(--rd-gold-bright);
    opacity: 1;
  }
  /* "Ascension": mais legível no mobile */
  .welcome-sub {
    color: rgba(240,192,64,0.78) !important;
  }
  /* Botões música/sfx: estilo mais discreto no mobile */
  .mobile-sound-controls .sound-toggle {
    background: rgba(10,15,30,0.72);
    border: 1px solid rgba(42,74,122,0.55);
    box-shadow: none;
  }
}