/* ============================================================
   Vision Aura — a MESA DE LUZ (a pele da Trilha do Olhar).

   Escolha do Lucas (25/set/2026): o Line virou lousa; o Vision vira a
   mesa de luz do desenhista, a caixa de luz onde a gente põe a foto
   por baixo do papel pra decalcar. Grafite escuro em volta, a foto
   num painel que brilha, a folha creme do lado.

   Usa o molde do Box (shared/campanha.css) com as cores daqui. As
   regras de sempre: rosa = a única próxima ação, ouro = o que ganhou,
   azul-gelo (a luz da mesa) = o que está disponível, papel só pro
   desenho.

   A mesa de luz (html.vt-luz vt-trilha) é o visual do Vision pra todo
   mundo desde 26/set/2026; sem a senha, o cartão da trilha é só a porta.
   ============================================================ */

:root {
  --cp-edge:     #0C0B0A;
  --cp-night:    #151311;
  --cp-slab:     #2A2622;
  --cp-slab-hi:  #3B352F;
  --cp-slab-lo:  #1C1916;
  --cp-slab-top: #342F29;
  --cp-text:     #F6F2E9;
  --cp-text-dim: #C7BDAC;
  --cp-bevel-hi: rgba(255, 240, 205, .16);
  --cp-mat-1: #D8F1FF; --cp-mat-2: #7CCBEF; --cp-mat-3: #3A93BE; --cp-mat-4: #1B5577;
  --cp-stone-1: #8A8378; --cp-stone-2: #635D55; --cp-stone-3: #45403A; --cp-stone-4: #2E2A26;

  /* a luz da mesa */
  --vt-luz-1: #FFFDF7; --vt-luz-2: #FFF1D2;
  --vt-luz-glow: rgba(255, 222, 150, .30);

  /* o fantasma dos decalques na mesa (quase apagado): cantos de corte,
     a moldura tracejada, as três formas e a linha em pé com o ângulo */
  --vt-fant-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 300' fill='none' stroke='rgba(255,244,220,0.07)' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M24 58 V24 H58 M302 24 H336 V58 M24 242 V276 H58 M336 242 V276 H302'/%3E%3Crect x='70' y='64' width='220' height='172' stroke-dasharray='9 11' stroke-width='2'/%3E%3Ccircle cx='214' cy='120' r='7'/%3E%3C/svg%3E");
  --vt-fant-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 320' fill='none' stroke='rgba(255,244,220,0.07)' stroke-width='3' stroke-linejoin='round'%3E%3Cellipse cx='150' cy='186' rx='110' ry='84'/%3E%3Crect x='190' y='54' width='120' height='112' stroke-dasharray='8 10' stroke-width='2'/%3E%3Cpolygon points='330,150 388,262 272,262'/%3E%3C/svg%3E");
  --vt-fant-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 330' fill='none' stroke='rgba(255,244,220,0.07)' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M90 20 V310' stroke-dasharray='8 10' stroke-width='2'/%3E%3Cpath d='M90 300 L250 40'/%3E%3Cpath d='M90 232 A68 68 0 0 1 125.6 242'/%3E%3Cpath d='M330 60 V290 M318 60 H342 M318 137 H342 M318 213 H342 M318 290 H342'/%3E%3C/svg%3E");
  --vt-mesa: var(--vt-fant-a), var(--vt-fant-b), var(--vt-fant-c),
    radial-gradient(70% 48% at 50% 14%, rgba(255, 232, 186, .13), transparent 72%),
    linear-gradient(180deg, #1C1916 0%, #151311 58%, #100E0C 100%);
}

.vt-story[hidden], .vt-livres__t[hidden], .vt-nota[hidden], .cp-porta__erro[hidden], .cp-ov[hidden],
#home-card-formas[hidden] { display: none !important; }

/* ============================================================
   A MESA (o fundo) — na home com a trilha, no mapa e na fase
   ============================================================ */
html.vt-luz {
  color-scheme: dark;
  /* os tokens do Vision viram grafite: o chip de perfil, o waffle e as
     outras telas acompanham a mesa */
  --cream: #151311; --cream-soft: #1C1916; --paper: #2A2622;
  --ink: #F6F2E9; --ink-soft: #C7BDAC; --muted: #8A8378;
  --border: #3B352F; --border-soft: #2E2A26; --pink-soft: rgba(255, 45, 110, .18);
}
html.vt-luz body, .vt-tela, .vt-play {
  background-color: var(--cp-night);
  background-image: var(--vt-mesa);
  background-repeat: no-repeat;
  background-position: left -40px top 70px, right -110px top 36%, left -40px bottom -30px, 0 0, 0 0;
  background-size: 360px auto, 400px auto, 380px auto, 100% 100%, 100% 100%;
}
html.vt-luz body { background-attachment: fixed; }
html.vt-luz #home-screen { background: transparent; }
@media (max-width: 560px) {
  html.vt-luz body, .vt-tela, .vt-play {
    background-size: 250px auto, 280px auto, 270px auto, 100% 100%, 100% 100%;
    background-position: left -60px top 60px, right -130px top 44%, left -60px bottom -40px, 0 0, 0 0;
  }
}

/* ============================================================
   A HOME (com a trilha ou sem ela)
   ============================================================ */
html.vt-luz #home-screen .f-display { font-family: 'Lilita One', 'Poppins', sans-serif; letter-spacing: .01em; }
html.vt-luz .home-title { color: var(--cp-text); text-shadow: var(--cp-tx-rosa); }
html.vt-luz .home-title .v { color: var(--cp-pink-1); }
html.vt-luz .home-sub { color: var(--cp-text-dim); }
html.vt-luz .home-tag { color: var(--cp-text-dim); margin-bottom: 0; }
html.vt-luz #home-theme { display: none; }
html.vt-luz .home-wrap { max-width: 760px; padding: 64px 0 28px; }
html.vt-luz #home-screen.screen-center { justify-content: flex-start; }

/* o cartão da trilha */
.vt-story { position: relative; margin: 44px 0 30px; padding: 40px 20px 20px; border-radius: 24px; text-align: left; background: var(--cp-slab-bg); box-shadow: var(--cp-slab-shadow); }
.vt-story__rot { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); font-size: 22px; }
.vt-story__corpo { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; align-items: center; }
.vt-story .cp-jogar { width: 100%; margin-top: 20px; }
.vt-story__mais { display: flex; justify-content: center; gap: 12px; margin-top: 16px; }
.vt-story__fim { margin-top: 18px; padding: 12px 14px; border-radius: 14px; background: var(--cp-night); box-shadow: var(--cp-well-shadow); font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--cp-text-dim); text-align: center; }
.vt-story__porta { font-size: 14.5px; line-height: 1.55; color: var(--cp-text); margin: 0 0 14px; text-align: center; }
.vt-story .cp-porta { justify-content: center; }

/* os modos de hoje viram os modos livres */
.vt-livres__t { margin: 0 0 12px; padding-left: 4px; text-align: left; font: 400 18px/1 'Lilita One', 'Poppins', sans-serif; color: var(--cp-text-dim); text-shadow: var(--cp-tx-s); }
html.vt-luz .home-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 26px; }
html.vt-luz .mode-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 16px 16px 17px; border: 0; border-radius: 18px; color: var(--cp-text);
  background: linear-gradient(180deg, var(--cp-slab-hi) 0, var(--cp-slab) 100%);
  box-shadow: inset 0 1.5px 0 var(--cp-bevel-hi), 0 0 0 2.5px var(--cp-edge), 0 6px 0 2.5px var(--cp-edge), 0 14px 24px rgba(0, 0, 0, .3);
  transition: transform 70ms ease-out, box-shadow 70ms ease-out, filter 120ms ease-out;
}
html.vt-luz .mode-card:hover { transform: none; filter: brightness(1.08); box-shadow: inset 0 1.5px 0 var(--cp-bevel-hi), 0 0 0 2.5px var(--cp-edge), 0 6px 0 2.5px var(--cp-edge), 0 14px 24px rgba(0, 0, 0, .3); }
html.vt-luz .mode-card:active { transform: translateY(4px); box-shadow: inset 0 1.5px 0 var(--cp-bevel-hi), 0 0 0 2.5px var(--cp-edge), 0 2px 0 2.5px var(--cp-edge); }
html.vt-luz .mode-card:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
html.vt-luz .mode-name { font-size: 20px; line-height: 1.05; margin: 0; text-shadow: var(--cp-tx-s); }
html.vt-luz .mode-desc { font-size: 12.5px; font-weight: 600; color: var(--cp-text-dim); }
html.vt-luz .mode-badge { margin-top: 2px; color: var(--cp-pink-1); background: rgba(255, 45, 110, .14); border-color: rgba(255, 45, 110, .5); }
/* sem emoji: o ícone de cada modo vira desenho de traço */
html.vt-luz .mode-ico {
  width: 50px; height: 50px; margin: 0 0 4px; border-radius: 14px; font-size: 0; color: var(--cp-text);
  background: var(--cp-night); box-shadow: var(--cp-well-shadow); position: relative;
}
html.vt-luz .mode-ico::before {
  content: ''; position: absolute; inset: 9px; background: currentColor;
  -webkit-mask: var(--vt-ic) center / contain no-repeat; mask: var(--vt-ic) center / contain no-repeat;
}
#home-card-obs { --vt-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 16 C8 8 24 8 29 16 C24 24 8 24 3 16 Z'/%3E%3Ccircle cx='16' cy='16' r='4.6'/%3E%3C/svg%3E"); }
#home-card-cego { --vt-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13 C8 21 24 21 29 13'/%3E%3Cpath d='M9 18.5 L7 22.5 M16 20 V24.5 M23 18.5 L25 22.5'/%3E%3Cpath d='M20 5 A5 5 0 1 0 25 10' stroke-width='2'/%3E%3C/svg%3E"); }
#home-card-coop { --vt-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='4.4'/%3E%3Ccircle cx='22.5' cy='12.5' r='3.6'/%3E%3Cpath d='M3.5 26 C4.5 20 17.5 20 18.5 26'/%3E%3Cpath d='M19 21.5 C22 19 28 20 28.5 25'/%3E%3C/svg%3E"); }
/* o Formas (em breve, fora da trilha): o desenho das três formas fica no lugar do ícone */
html.vt-luz .mode-ico--svg { font-size: inherit; }
html.vt-luz .mode-ico--svg::before { display: none; }
html.vt-luz .mode-ico--svg svg { position: absolute; inset: 8px 6px; width: calc(100% - 12px); height: calc(100% - 16px); }
html.vt-luz .home-check { color: var(--cp-text-dim); }
html.vt-luz #home-btn-gallery { background: transparent; }

/* ============================================================
   O MAPA (tela própria)
   ============================================================ */
.vt-tela { overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; display: none; }
.vt-tela.active { display: block; }
.vt-mapa__topo { max-width: 820px; margin: 0 auto; padding: 16px 16px 0; display: flex; align-items: center; }
.vt-mapa__topo .cp-btn { min-height: 42px; padding: 0 16px 0 10px; font-size: 16px; }
.vt-mapa__topo .cp-btn svg { width: 20px; height: 20px; }

/* ============================================================
   A FASE DO MEDIR: a foto na mesa de luz, a folha do lado
   ============================================================ */
.vt-play__hd {
  position: relative; z-index: 2; flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top, 0px));
  background: linear-gradient(180deg, var(--cp-slab-top), var(--cp-slab));
  box-shadow: inset 0 -4px 0 var(--cp-pink-3), 0 3px 0 var(--cp-edge), 0 10px 20px rgba(0, 0, 0, .28);
}
.vt-sair { width: 46px; min-height: 46px; padding: 0; flex: 0 0 auto; }
.vt-sair svg { width: 22px; height: 22px; }
.vt-play__t { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; }
.vt-play__t .cp-cube { width: 38px; height: 42px; font-size: 13px; }
.vt-play__nome { min-width: 0; font: 400 21px/1.1 'Lilita One', 'Poppins', sans-serif; color: var(--cp-text); text-shadow: var(--cp-tx-rosa-m); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-dots { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; }
.vt-dots i { width: 22px; height: 22px; display: grid; place-items: center; }
.vt-dots i::before {
  content: ''; width: 11px; height: 11px; border-radius: 3px; transform: rotate(45deg);
  background: var(--cp-night); box-shadow: 0 0 0 2px var(--cp-edge), inset 0 2px 0 rgba(0, 0, 0, .5);
  transition: transform .18s ease, background .18s ease;
}
.vt-dots i.agora::before {
  background: linear-gradient(135deg, var(--cp-pink-1) 0 32%, var(--cp-pink-2) 32% 66%, var(--cp-pink-3) 66%);
  transform: rotate(45deg) scale(1.3); box-shadow: 0 0 0 2px var(--cp-edge), 0 0 12px var(--cp-pink-glow);
}
.vt-dots i.bom::before { background: var(--cp-leaf); box-shadow: 0 0 0 2px var(--cp-edge); }
.vt-dots i.meio::before { background: var(--cp-warn); box-shadow: 0 0 0 2px var(--cp-edge); }
.vt-dots i.baixo::before { background: var(--cp-ruby); box-shadow: 0 0 0 2px var(--cp-edge); }

.vt-missao {
  flex: 0 0 auto; align-self: center; display: flex; align-items: center; gap: 10px;
  max-width: min(720px, calc(100% - 28px)); margin: 16px 14px 0; padding: 8px 14px 9px 8px; border-radius: 14px;
  background: var(--cp-slab-bg); box-shadow: 0 0 0 2.5px var(--cp-edge), 0 4px 0 2.5px var(--cp-edge);
  font: 600 14px/1.4 'Poppins', sans-serif; color: var(--cp-text);
}
.vt-missao__rot, .vt-papel__rot {
  flex: 0 0 auto; padding: 4px 9px 5px; border-radius: 8px; font: 400 13px/1 'Lilita One', 'Poppins', sans-serif; color: #fff; text-shadow: var(--cp-tx-s);
  background: linear-gradient(180deg, var(--cp-marca-1) 0 40%, var(--cp-marca-2) 40%); box-shadow: 0 0 0 2px var(--cp-edge);
}

.vt-mesa { flex: 1 1 auto; min-height: 0; display: flex; gap: 22px; padding: 26px 18px max(16px, env(safe-area-inset-bottom, 0px)); }
/* a caixa de luz: o painel que brilha, com a foto em cima. O vidro da
   mesa é num tom de areia (não branco): foto de fundo branco se perdia
   nele e a borda da imagem virava a "delimitação" (achado do Lucas). A
   foto tem moldura escura própria, desenhada no SVG. */
.vt-caixaluz {
  position: relative; flex: 1 1 0; min-width: 0; min-height: 0; border-radius: 16px;
  background: radial-gradient(90% 80% at 50% 45%, #E9DFC8, #C9B994);
  box-shadow: inset 0 0 30px rgba(255, 226, 160, .55), 0 0 0 3px var(--cp-edge), 0 0 0 8px var(--cp-slab-hi), 0 0 0 10.5px var(--cp-edge),
              0 0 46px var(--vt-luz-glow), 0 14px 32px rgba(0, 0, 0, .45);
}
.vt-ref { position: absolute; inset: 14px; display: block; width: calc(100% - 28px); height: calc(100% - 28px); filter: drop-shadow(0 6px 10px rgba(42, 30, 10, .28)); }
/* mundo 3: a foto some depois do relance */
.vt-caixaluz.is-coberta .vt-ref { visibility: hidden; }
.vt-relance, .vt-coberta { position: absolute; z-index: 3; }
.vt-relance[hidden], .vt-coberta[hidden] { display: none !important; }
.vt-relance {
  /* no meio da folha (parada enquanto a foto está na tela): a foto fica inteira à vista */
  left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 12px;
  padding: 8px 8px 8px 10px; border-radius: 18px; max-width: calc(100% - 24px); width: max-content;
  background: var(--cp-slab-bg); color: var(--cp-text);
  box-shadow: 0 0 0 2.5px var(--cp-edge), 0 4px 0 2.5px var(--cp-edge), 0 10px 20px rgba(0, 0, 0, .3);
}
/* o número dentro de um anel que esvazia com o tempo (--p vai de 1 a 0) */
.vt-relance__n {
  --p: 1; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font: 400 21px/1 'Lilita One', 'Poppins', sans-serif; color: #fff; text-shadow: var(--cp-tx-s);
  background: radial-gradient(closest-side, var(--cp-slab) 76%, transparent 78% 100%),
              conic-gradient(var(--cp-pink-2) calc(var(--p) * 360deg), rgba(255, 255, 255, .14) 0);
}
.vt-relance__t { font: 700 13px/1.3 'Poppins', sans-serif; }
.vt-relance__ok { min-height: 38px; padding: 0 12px; font-size: 14px; flex: 0 0 auto; }
.vt-coberta {
  inset: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 16px; border-radius: 10px; text-align: center; color: var(--cp-graphite);
  background: repeating-linear-gradient(135deg, rgba(42, 39, 36, .045) 0 10px, transparent 10px 20px), #F3EBDA;
  box-shadow: inset 0 0 0 2.5px rgba(42, 39, 36, .5);
}
.vt-coberta svg { width: 56px; height: 38px; color: var(--cp-graphite); }
.vt-coberta b { font: 400 22px/1 'Lilita One', 'Poppins', sans-serif; }
.vt-coberta span { font: 600 13.5px/1.4 'Poppins', sans-serif; max-width: 260px; }
.vt-coberta .vt-coberta__espiar { margin-top: 6px; color: var(--cp-graphite); box-shadow: inset 0 0 0 2px rgba(42, 39, 36, .45); }
.vt-coberta .vt-coberta__espiar[hidden] { display: none; }
/* enquanto a foto está na tela a folha espera (o tempo é pra olhar) */
.vt-folha.is-trava #vt-canvas { opacity: .3; }
.vt-alvo { transform-box: fill-box; transform-origin: center; animation: vtAlvo 1.3s ease-in-out infinite; }
@keyframes vtAlvo { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: .55; } }
/* a folha dela */
.vt-folha {
  position: relative; flex: 1.12 1 0; min-width: 0; min-height: 0; border-radius: 16px; background: var(--cp-sheet);
  box-shadow: inset 0 3px 0 rgba(42, 39, 36, .08), 0 0 0 3px var(--cp-edge), 0 0 0 8px var(--cp-marca-2), 0 0 0 10.5px var(--cp-edge),
              0 14px 32px rgba(0, 0, 0, .45);
}
/* as etiquetas: de quem é cada lado */
.vt-caixaluz::after, .vt-folha::after {
  position: absolute; top: -12px; left: 16px; z-index: 2; padding: 3px 10px 4px; border-radius: 8px;
  font: 400 13px/1 'Lilita One', 'Poppins', sans-serif; color: var(--cp-text); text-shadow: var(--cp-tx-s);
  background: var(--cp-slab); box-shadow: 0 0 0 2px var(--cp-edge); pointer-events: none;
}
.vt-caixaluz::after { content: 'O modelo'; }
.vt-folha::after { content: 'Tua folha'; }
/* sem overflow na folha (a etiqueta sai pra fora dela): quem arredonda é o canvas */
#vt-canvas { position: absolute; left: 0; top: 0; display: block; border-radius: 16px; touch-action: none; cursor: crosshair; -webkit-user-select: none; user-select: none; }

.vt-nota {
  position: absolute; z-index: 3; left: 50%; top: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 5px; border-radius: 13px; white-space: nowrap; pointer-events: none;
  background: var(--cp-slab-bg); color: var(--cp-text);
  box-shadow: 0 0 0 2.5px var(--cp-edge), 0 4px 0 2.5px var(--cp-edge), 0 10px 18px rgba(0, 0, 0, .22);
  animation: vtNota .3s cubic-bezier(.3, 1.5, .5, 1);
}
.vt-nota b {
  min-width: 42px; padding: 5px 7px 6px; border-radius: 9px; text-align: center;
  font: 400 22px/1 'Lilita One', 'Poppins', sans-serif; color: var(--cp-edge); font-variant-numeric: tabular-nums;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 0 0 2px var(--cp-edge);
}
.vt-nota span { font: 700 13.5px/1 'Poppins', sans-serif; }
.vt-nota.bom b { background: var(--cp-leaf); }
.vt-nota.meio b { background: var(--cp-warn); }
.vt-nota.baixo b { background: var(--cp-ruby); }
@keyframes vtNota { from { transform: translateX(-50%) scale(.6); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }

/* ============================================================
   NO PAPEL
   ============================================================ */
.vt-papel { width: min(640px, 100%); }
.vt-papel__folha { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px; margin: 4px 0 12px; }
.vt-papel__fig { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.vt-papel__fig svg { display: block; width: 100%; height: auto; max-height: 300px; border-radius: 8px; background: #fff; }
.vt-papel__fig figcaption { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; line-height: 1.4; color: var(--cp-graphite); }
.vt-papel__folha .vt-resp { display: none; }
.vt-papel__folha.com-resposta .vt-resp { display: inline; }
.vt-papel__como { font-size: 13px; line-height: 1.5; color: var(--cp-text-dim); margin-bottom: 14px; }
.vt-papel__acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.vt-papel__acoes .cp-btn--ghost { flex: 1 1 150px; }
.vt-papel__acoes .cp-btn--go { flex: 1 1 100%; }
@media print {
  html.vt-luz body { background: #fff !important; }
  body * { visibility: hidden !important; }
  #vt-papel-folha, #vt-papel-folha * { visibility: visible !important; }
  #vt-papel-folha { position: fixed; left: 0; top: 0; width: 100%; margin: 0; padding: 0; background: #fff; box-shadow: none; }
}

/* ============================================================
   CELULAR: a foto em cima, a folha embaixo
   ============================================================ */
@media (max-width: 760px) {
  html.vt-luz .home-modes { grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
  html.vt-luz .mode-card { padding: 12px; }
  html.vt-luz .mode-name { font-size: 17px; }
}
@media (max-width: 700px) {
  .vt-mesa { flex-direction: column; gap: 22px; padding: 22px 12px max(12px, env(safe-area-inset-bottom, 0px)); }
  .vt-caixaluz { flex: 0 0 38%; }
  .vt-ref { inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); }
  .vt-coberta { inset: 8px; gap: 5px; padding: 10px; }
  .vt-coberta svg { width: 42px; height: 28px; }
  .vt-coberta b { font-size: 18px; }
  .vt-coberta span { font-size: 12.5px; }
  .vt-relance { gap: 8px; }
  .vt-relance__t { font-size: 12px; max-width: 130px; }
  .vt-folha { flex: 1 1 auto; }
}
@media (max-width: 560px) {
  html.vt-luz .home-wrap { padding-top: 58px; }
  .vt-story { padding: 36px 14px 16px; margin-top: 36px; }
  .vt-story__corpo { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
  .vt-story .cp-escudo { width: 68px; height: 68px; }
  .vt-story .cp-escudo svg { width: 46px; height: 46px; }
  html.vt-luz .home-modes { grid-template-columns: 1fr; }
  html.vt-luz .mode-card { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 12px; row-gap: 3px; align-items: center; }
  html.vt-luz .mode-ico { grid-row: span 3; width: 46px; height: 46px; margin: 0; }
  html.vt-luz .mode-badge { justify-self: start; }
  .vt-play__hd { gap: 8px; padding-left: 10px; padding-right: 10px; }
  .vt-sair { width: 42px; min-height: 42px; }
  .vt-play__t .cp-cube { display: none; }
  .vt-play__nome { font-size: 17px; }
  .vt-dots i { width: 16px; height: 16px; }
  .vt-dots i::before { width: 8px; height: 8px; border-radius: 2px; }
  .vt-missao { font-size: 13px; margin-top: 12px; }
  .vt-papel__folha { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .vt-alvo, .vt-nota { animation: none; }
}

/* ============================================================
   A LIÇÃO DO MUNDO 1 (licao.js): a folha do Box, a foto do lado
   (na observação) e a conferência num painel grande. No decalque a
   foto sai (ela está por baixo da folha); conferindo, a foto também
   sai e o painel entra no lugar dela.
   ============================================================ */
.vl-mesa { flex: 1 1 auto; min-height: 0; display: flex; gap: 24px; padding: 24px 18px max(16px, env(safe-area-inset-bottom, 0px)); }
.vl-mesa .vl-foto { flex: 0.8 1 0; }
.vl-folha { flex: 1.3 1 0; min-width: 0; min-height: 0; display: flex; }
.vl-mesa.is-decalque .vl-foto, .vl-mesa.is-confere .vl-foto { display: none; }

.vl-confere {
  position: relative; flex: 0 0 360px; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px;
  padding: 18px 18px 18px; border-radius: 22px; color: var(--cp-text);
  background: radial-gradient(90% 26% at 50% 0%, rgba(255, 45, 110, .18) 0, transparent 100%), var(--cp-slab-bg);
  box-shadow: var(--cp-slab-shadow);
  animation: vlEntra .28s cubic-bezier(.2, .9, .3, 1.1);
}
.vl-confere[hidden] { display: none; }
@keyframes vlEntra { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
/* a etiqueta fica DENTRO do painel (ele rola; pendurada pra fora, era cortada) */
.vl-confere__rot {
  align-self: flex-start; padding: 4px 10px 5px; border-radius: 8px; font: 400 14px/1 'Lilita One', 'Poppins', sans-serif; color: #fff; text-shadow: var(--cp-tx-s);
  background: linear-gradient(180deg, var(--cp-marca-1) 0 40%, var(--cp-marca-2) 40%); box-shadow: 0 0 0 2px var(--cp-edge), 0 2px 0 2px var(--cp-edge);
}
.vl-confere__t { margin: 0; font: 400 22px/1.1 'Lilita One', 'Poppins', sans-serif; text-shadow: var(--cp-tx-rosa-m); }
.vl-confere__x { margin: 0; font: 600 13px/1.5 'Poppins', sans-serif; color: var(--cp-text-dim); }
/* o que aparece por cima: cada camada liga e desliga */
.vl-camadas { display: flex; flex-wrap: wrap; gap: 6px; }
.vl-cam {
  min-height: 34px; padding: 0 12px; border: 0; border-radius: 999px; cursor: pointer;
  font: 700 12.5px/1 'Poppins', sans-serif; color: var(--cp-text-dim);
  background: rgba(255, 240, 205, .06); box-shadow: inset 0 0 0 2px rgba(255, 240, 205, .22);
}
.vl-cam.is-on { color: var(--cp-edge); background: var(--cp-text); box-shadow: 0 0 0 2px var(--cp-edge); }
.vl-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 700 12px/1 'Poppins', sans-serif; color: var(--cp-text-dim); }
.vl-leg { display: inline-flex; align-items: center; gap: 6px; }
.vl-leg i { width: 18px; height: 4px; border-radius: 2px; background: var(--c); box-shadow: 0 0 0 1px rgba(255, 255, 255, .2); }
.vl-leg--esc i { background: repeating-linear-gradient(90deg, var(--cp-text-dim) 0 5px, transparent 5px 9px); box-shadow: none; }
.vl-leg--num i { display: none; }
/* os três itens: botões grandes de marcar */
.vl-itens { display: grid; gap: 10px; }
.vl-item {
  display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; border: 0; border-radius: 16px; cursor: pointer; text-align: left;
  font: 700 14px/1.35 'Poppins', sans-serif; color: var(--cp-text);
  background: var(--cp-night); box-shadow: var(--cp-well-shadow);
  transition: transform .08s ease, background .15s ease;
}
.vl-item:hover { background: var(--cp-slab-lo); }
.vl-item:active { transform: translateY(2px); }
.vl-item__ic {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: transparent;
  background: rgba(255, 240, 205, .07); box-shadow: inset 0 0 0 2.5px rgba(255, 240, 205, .35);
}
.vl-item__ic svg { width: 22px; height: 22px; }
.vl-item.is-on { background: linear-gradient(180deg, rgba(52, 208, 127, .22), rgba(52, 208, 127, .12)); box-shadow: inset 0 0 0 2.5px var(--cp-leaf), 0 0 0 2px var(--cp-edge); }
.vl-item.is-on .vl-item__ic { color: var(--cp-edge); background: var(--cp-leaf); box-shadow: 0 0 0 2px var(--cp-edge); }
.vl-acoes { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-top: auto; padding-top: 6px; }
.vl-acoes .cp-btn--go { width: 100%; }

/* as janelas da lição: a teoria e a escolha da imagem */
.vl-ov .cp-box { width: min(560px, 100%); display: flex; flex-direction: column; gap: 12px; align-items: stretch; text-align: left; }
.vl-teoria { padding-top: 34px; position: relative; }
.vl-teoria__rot { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); }
.vl-teoria__arte { padding: 10px; }
.vl-teoria__arte svg { display: block; width: 100%; height: auto; max-height: 170px; color: var(--cp-graphite); }
.vl-teoria__arte .fm-arte__rot { fill: #6E634F; font: 700 12px 'Caveat', cursive; }
.vl-teoria__arte .fm-arte__num { fill: #fff; font: 800 11px 'Poppins', sans-serif; }
.vl-teoria__chave { margin: 0; font: 700 22px/1.2 'Caveat', cursive; color: var(--cp-gold-2); }
.vl-escolha__n { margin: 0; font: 700 12px/1 'Poppins', sans-serif; color: var(--cp-text-dim); text-transform: uppercase; letter-spacing: .08em; }
.vl-escolha__ops { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vl-escolha__ops--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vl-op {
  display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 0; border-radius: 16px; cursor: pointer;
  font: inherit; color: var(--cp-text); background: var(--cp-night); box-shadow: var(--cp-well-shadow);
  transition: transform .1s ease, box-shadow .15s ease;
}
.vl-op:hover, .vl-op:focus-visible { transform: translateY(-2px); box-shadow: inset 0 0 0 2.5px var(--cp-pink-2), 0 0 18px var(--cp-pink-glow); outline: none; }
.vl-op__img { display: block; aspect-ratio: 1; border-radius: 10px; background: #fff; overflow: hidden; }
.vl-op__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.vl-op__nome { font: 400 16px/1.1 'Lilita One', 'Poppins', sans-serif; text-shadow: var(--cp-tx-s); }
.vl-ov [data-voltar] { align-self: center; }

@media (max-width: 760px) {
  .vl-mesa { flex-direction: column; gap: 16px; padding: 18px 10px max(10px, env(safe-area-inset-bottom, 0px)); }
  .vl-mesa .vl-foto { flex: 0 0 32%; }
  .vl-confere { flex: 0 1 auto; max-height: 55%; padding: 14px 14px 14px; gap: 10px; animation-name: vlSobe; }
  .vl-confere__t { font-size: 19px; }
  .vl-confere__x { display: none; }
  .vl-item { padding: 10px 12px; font-size: 13px; }
  .vl-acoes { position: sticky; bottom: -14px; margin: 0 -14px -14px; padding: 10px 14px 14px; background: linear-gradient(180deg, transparent 0, var(--cp-slab) 30%); }
}
@keyframes vlSobe { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .vl-confere { animation: none; } }
/* o botão do modo configuração no topo do mapa (só com ?config) mora na direita */
.vt-mapa__topo { gap: 10px; }
.vt-mapa__config { order: 2; margin-left: auto; }
.vt-mapa__config[hidden] { display: none; }

/* ============================================================
   O MUNDO 4 NA LIÇÃO (licao.js): o relógio, a moldura da imagem na
   folha, os vazios e o "virar o desenho"
   ============================================================ */
/* o relógio (só avisa, não trava): fica no topo, do lado das rodadas */
.vl-tempo {
  flex: 0 0 auto; min-width: 64px; padding: 5px 10px 6px; border-radius: 10px; text-align: center;
  font: 400 18px/1 'Lilita One', 'Poppins', sans-serif; color: var(--cp-text); font-variant-numeric: tabular-nums;
  background: var(--cp-night); box-shadow: var(--cp-well-shadow);
}
.vl-tempo[hidden] { display: none; }
.vl-tempo.is-fim { color: var(--cp-edge); background: var(--cp-warn); box-shadow: 0 0 0 2px var(--cp-edge); }
/* observação: a moldura da imagem na folha (o papel tem o formato da foto),
   pra imagem por baixo, no fim, cair em cima do desenho. --vk é o zoom. */
.vl-moldura {
  position: absolute; inset: 0; pointer-events: none; border-radius: calc(3px / var(--vk, 1));
  box-shadow: 0 0 0 calc(2px / var(--vk, 1)) rgba(42, 39, 36, .38), 0 0 0 9999px rgba(42, 39, 36, .07);
}
.vl-leg--vazio i { height: 10px; background: repeating-linear-gradient(135deg, #E03A76 0 2px, transparent 2px 5px); box-shadow: 0 0 0 1.5px #E03A76; }
.vl-leg--caixa i { width: 14px; height: 11px; background: none; border: 2px dashed var(--cp-text); border-radius: 2px; box-shadow: none; }
.vl-virar { align-self: flex-start; }

/* ============================================================
   O DESENHO DOS MUNDOS 2 E 3 (pratica.js): a figura na mesa de luz,
   a folha do Box, as partes do desenho no topo e os desenhos da fase
   ============================================================ */
.vp-passos { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.vp-passos li {
  display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px;
  font: 700 12.5px/1 'Poppins', sans-serif; color: var(--cp-text-dim);
  background: var(--cp-night); box-shadow: var(--cp-well-shadow);
}
.vp-passos i {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal;
  font: 400 14px/1 'Lilita One', 'Poppins', sans-serif; color: var(--cp-text-dim); background: rgba(255, 240, 205, .08);
}
.vp-passos li.is-agora { color: var(--cp-text); box-shadow: inset 0 0 0 2px var(--cp-pink-2), 0 0 14px var(--cp-pink-glow); }
.vp-passos li.is-agora i { color: #fff; background: linear-gradient(180deg, var(--cp-marca-1) 0 40%, var(--cp-marca-2) 40%); box-shadow: 0 0 0 2px var(--cp-edge); }
.vp-passos li.is-feito i { color: var(--cp-edge); background: var(--cp-leaf); box-shadow: 0 0 0 2px var(--cp-edge); }
.vp-folhawrap { position: relative; }
.vp-missao[hidden] { display: none; }
/* a faixa da missão empurra a mesa: o respiro de cima fica menor */
.vp-missao:not([hidden]) + .vp-mesa { padding-top: 18px; }
.vp-folhawrap .vt-relance { z-index: 9; }
.vp-folhawrap .vt-nota { z-index: 9; top: auto; bottom: 100px; }
.vp-passos[hidden], .vt-dots[hidden] { display: none; }
/* a missão desta tela mora na faixa de cima: a da folha (e o botãozinho dela) não aparece */
#vp-folha .vf-hint, #vp-folha .vf-dica-mini { display: none !important; }
.vf-cena > img.vp-foto { right: auto; bottom: auto; opacity: .45; }
.vf-cena > img.vp-foto[hidden] { display: none; }
.vf-cena > svg.vp-guias { overflow: visible; }

.vp-escolha__x { margin: -4px 0 0; font: 600 13.5px/1.5 'Poppins', sans-serif; color: var(--cp-text-dim); }
.vp-escolha__ops { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vp-escolha__mais { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
/* a ponte depois do aquecimento: "agora desenha", com a figura */
.vp-ponte { width: min(460px, 100%); display: flex; flex-direction: column; gap: 12px; text-align: left; }
.vp-ponte__fig { align-self: center; width: min(200px, 60%); aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 0 0 2.5px var(--cp-edge), 0 4px 0 2.5px var(--cp-edge); }
.vp-ponte__fig img { width: 100%; height: 100%; object-fit: contain; display: block; }
.vp-ponte__como { margin: 0; font: 700 13px/1.4 'Poppins', sans-serif; color: var(--cp-gold-2); }

.vp-resumo { display: flex; align-items: center; gap: 12px; font: 600 13.5px/1.4 'Poppins', sans-serif; color: var(--cp-text-dim); }
.vp-media {
  flex: 0 0 auto; min-width: 58px; padding: 8px 10px 9px; border-radius: 14px; text-align: center;
  font: 400 30px/1 'Lilita One', 'Poppins', sans-serif; color: var(--cp-edge); font-variant-numeric: tabular-nums;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 0 0 2.5px var(--cp-edge), 0 3px 0 2.5px var(--cp-edge);
}
.vp-notas { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.vp-nota-l {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 't n' 'd n'; column-gap: 12px; row-gap: 2px; align-items: center;
  padding: 10px 12px; border-radius: 14px; background: var(--cp-night); box-shadow: var(--cp-well-shadow);
}
.vp-nota-l__t { grid-area: t; font: 700 13.5px/1.3 'Poppins', sans-serif; color: var(--cp-text); }
.vp-nota-l__d { grid-area: d; font: 600 12px/1.3 'Poppins', sans-serif; color: var(--cp-text-dim); }
.vp-pill {
  grid-area: n; min-width: 40px; padding: 5px 7px 6px; border-radius: 9px; text-align: center;
  font: 400 19px/1 'Lilita One', 'Poppins', sans-serif; color: var(--cp-edge); font-variant-numeric: tabular-nums;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 0 0 2px var(--cp-edge);
}
.vp-media.bom, .vp-pill.bom { background: var(--cp-leaf); }
.vp-media.meio, .vp-pill.meio { background: var(--cp-warn); }
.vp-media.baixo, .vp-pill.baixo { background: var(--cp-ruby); }

@media (max-width: 760px) {
  .vp-passos li { padding: 3px; }
  .vp-passos li span { display: none; }
  .vp-passos li.is-agora { padding-right: 10px; }
  .vp-passos li.is-agora span { display: inline; }
  .vp-notas { gap: 6px; }
  .vp-nota-l { padding: 8px 10px; }
  .vp-media { min-width: 50px; font-size: 26px; }
  .vp-folhawrap .vt-nota { bottom: 76px; }
  /* no celular o topo aperta: as partes mostram só o número (a de agora, com o nome) */
  .vt-play__hd #vp-dots i { width: 14px; }
}
@media (max-width: 560px) {
  .vl-tempo { min-width: 54px; font-size: 16px; padding: 4px 8px 5px; }
  .vp-escolha__ops { gap: 8px; }
  .vp-escolha .vl-op { padding: 6px; }
  .vp-escolha .vl-op__nome { font-size: 13.5px; }
}