/* ============================================================
   Sketch Aura — a Trilha do Esboço no CADERNO × MANGÁ (a pele da trilha
   desde 26/set, escolhida pelo Lucas depois de comparar com a cortiça;
   pedido do Lucas em 26/set: "uma paleta branca, meio de rascunho,
   mangá, em vez dessa que parece terra do Minecraft").

   Parte do mundo Caderno que já é a cara do launcher (skins/caderno.css):
   papel quadriculado com grão, folhas com recorte e inclinação próprios,
   fitas que cruzam a borda, letra de mão, tinta que não brilha, e o rosa
   vivo só no adesivo da próxima ação. O que é do Sketch é o MANGÁ, porque
   esboço é storyboard: o mapa de cada mundo é uma página de mangá (cada
   fase é um quadro), a missão é um balão de fala, a passagem é um quadro
   com linhas de velocidade, os fatos da revelação são a caixa de
   narração, e a contagem do fim é uma onomatopeia.

   Só vale com html.pele-caderno (o trilha.js liga). A cortiça continua em
   css/trilha.css por baixo: ?pele=cortica no endereço mostra ela.
   ============================================================ */

html.pele-caderno {
  color-scheme: light;
  --cad-cream: #F6EFDE; --cad-paper: #FFFDF4; --cad-white: #FFFFFF;
  --cad-ink: #2B2520; --cad-ink-soft: #5A5248; --cad-muted: #6E634F;
  --cad-edge: rgba(120, 98, 62, .32);
  --cad-pink: #D11857; --cad-pink-lip: #8E1140; --cad-hot: #FF2D6E;
  --cad-tape-y: rgba(255, 214, 110, .96); --cad-tape-w: rgba(255, 253, 244, .86); --cad-tape-k: rgba(186, 144, 96, .96); --cad-tape-p: rgba(255, 179, 203, .95);
  --cad-shadow: 0 1px 0 rgba(var(--cad-sombra-rgb), .05), 0 5px 14px rgba(var(--cad-sombra-rgb), .12);
  --cad-shadow-md: 0 6px 16px rgba(var(--cad-sombra-rgb), .14), 0 14px 34px rgba(var(--cad-sombra-rgb), .10);
  --cad-hard: 2px 3px 0 rgba(var(--cad-tinta-rgb), .22);
  --cad-cut: 225px 18px 250px 15px / 16px 240px 15px 230px;
  --cad-disp: 'DK Lemon Yellow Sun', 'Lilita One', 'Poppins', sans-serif;
  --cad-hand: 'Angela Notes', 'Caveat', cursive;
  --cad-grade: linear-gradient(rgba(96, 78, 52, .095) 1px, transparent 1px), linear-gradient(90deg, rgba(96, 78, 52, .095) 1px, transparent 1px);
  --cad-grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.055'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  /* os tokens do molde viram papel e tinta */
  --cp-edge: #2B2520; --cp-night: #F1E8D5; --cp-slab: #FFFDF4; --cp-slab-hi: #FFFFFF; --cp-slab-lo: #F3EAD8; --cp-slab-top: #FFFDF4;
  --cp-text: #2B2520; --cp-text-dim: #6E634F; --cp-sheet: #FFFFFF; --cp-graphite: #2B2520; --cp-bevel-hi: transparent;
  --cp-mat-1: #FFFFFF; --cp-mat-2: #FFFDF4; --cp-mat-3: #FFFDF4; --cp-mat-4: #2B2520;
  --cp-stone-1: #B9AE9C; --cp-stone-2: #D8CFC0; --cp-stone-3: var(--cad-estrela-off); --cp-stone-4: #9C8D7A;
  --st-papel: #FFFDF4; --st-papel-2: #F4ECDA; --st-grafite: #2B2520;
  /* as cores que eram escritas direto (o tema escuro troca elas; seção 13) */
  --cad-tinta-rgb: 43, 37, 32; --cad-sombra-rgb: 90, 70, 40; --cad-creme-rgb: 246, 239, 222;
  --cad-estrela-off: #E6DDCC; --cad-marca: #FFF6D6; --cad-marca-2: #FFF4D6; --cad-ajuda-bg: #EEF6FF; --cad-mesa: #F8F2E4;
  --cad-ouro: #9A6A00; --cad-ouro-2: #B07A00; --cad-verde: #2F8A55; --cad-laranja: #C2410C; --cad-perigo: #B42318; --cad-perigo-bg: #FFF1EF;
}
html.pele-caderno .cp {
  --cp-tx-s: none; --cp-tx-m: none; --cp-tx-l: none; --cp-tx-rosa: none; --cp-tx-rosa-m: none;
  --cp-slab-bg: var(--cad-paper);
  --cp-slab-shadow: 0 0 0 1px var(--cad-edge), var(--cad-shadow);
  --cp-well-shadow: inset 0 0 0 1.5px rgba(var(--cad-tinta-rgb), .16);
  --cp-sheet-shadow: 0 0 0 1px var(--cad-edge);
  color: var(--cad-ink);
}

/* ── 1. a página: o caderno quadriculado com grão (a cortiça sai) ── */
html.pele-caderno body, html.pele-caderno .st-tela, html.pele-caderno .st-play {
  background-color: var(--cad-cream);
  background-image: var(--cad-grao), var(--cad-grade);
  background-size: 160px 160px, 26px 26px, 26px 26px;
  background-position: 0 0, -1px -1px, -1px -1px;
}
html.pele-caderno .st-tela::before, html.pele-caderno .st-play::before, html.pele-caderno #main-screen::before { display: none; }
/* a tela do mapa rola: o papel rola junto (sem isso sobrava faixa sem pintar no pé) */
html.pele-caderno .st-tela { background-attachment: local; }
/* sem relógio correndo, a pílula fica vazia */
html.pele-caderno .st-relogio.is-livre > b { color: transparent; }
html.pele-caderno #main-screen {
  background: transparent;
  --cream: #F6EFDE; --cream-soft: #FAF5E8; --paper: #FFFDF4;
  --ink: #2B2520; --ink-soft: #5A5248; --muted: #6E634F;
  --border: #DDD2B8; --border-soft: #E9E0CC; --pink-soft: #FFE7EE;
}

/* ── 2. a home: o título escrito à mão e a folha da trilha presa com fita ── */
html.pele-caderno #main-screen .title-main {
  color: var(--cad-ink) !important; text-shadow: none !important; transform: rotate(-1.2deg);
  animation: cadTitulo .32s cubic-bezier(.2, .8, .3, 1) both;
}
/* um espaço embaixo do SKETCH: o "aura" desce e não encosta no CH. Era um risco à mão,
   mas ele terminava onde o "aura" começa e parecia linha de assinatura (o Lucas: "estranho") */
html.pele-caderno #main-screen .title-stack::after { content: ''; display: block; height: 12px; margin: 34px auto -14px; }
html.pele-caderno #main-screen .title-sub { text-shadow: none; color: var(--cad-pink); }
html.pele-caderno #main-screen .f-hand.mt-10 { color: var(--cad-ink); text-shadow: none; }
@keyframes cadTitulo { from { opacity: 0; transform: rotate(-2.4deg) translateY(8px); } }
@keyframes cadRisco { from { transform: scaleX(0); } }
/* a papelaria da beirada da mesa: waffle, perfil, som */
html.pele-caderno #main-screen .tbtn, html.pele-caderno #main-screen .waffle-btn, html.pele-caderno #profile-btn {
  background: var(--cad-paper); border: 1.6px solid var(--cad-ink); color: var(--cad-ink-soft);
  border-radius: 9px 11px 9px 12px / 11px 9px 12px 9px; box-shadow: var(--cad-hard);
}
html.pele-caderno #main-screen .waffle-btn { transform: rotate(-.3deg); }
html.pele-caderno #profile-btn { transform: rotate(.3deg); }
html.pele-caderno #profile-name { font-family: var(--cad-hand); font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; }

/* a folha da trilha: recorte e inclinação próprios, cai e assenta */
html.pele-caderno .st-story {
  background: var(--cad-paper); border-radius: var(--cad-cut); transform: rotate(-.6deg);
  box-shadow: 0 0 0 1px var(--cad-edge), var(--cad-shadow);
  padding-top: 44px; animation: cadAssenta .5s cubic-bezier(.3, 1.18, .36, 1) .1s both;
}
@keyframes cadAssenta { from { opacity: 0; transform: translateY(-10px) rotate(-2.2deg); } }
/* o título da trilha é uma fita rosa escrita à mão (a fita cruza a borda) */
html.pele-caderno .cp-ribbon { padding: 9px 26px 8px; font-family: var(--cad-disp); font-size: 22px; color: var(--cad-ink); text-shadow: none; }
html.pele-caderno .cp-ribbon::before {
  inset: 0; background: var(--cad-tape-p);
  clip-path: polygon(1% 6%, 99% 0, 100% 14%, 98% 92%, 100% 100%, 2% 96%, 0 84%, 1.5% 12%);
  filter: none; box-shadow: none;
}
html.pele-caderno .cp-ribbon::after { display: none; }
html.pele-caderno .st-story__rot { transform: translate(-50%, -58%) rotate(-2deg); filter: drop-shadow(0 1px 2px rgba(var(--cad-sombra-rgb), .3)); }
/* o emblema do mundo é um carimbo de tinta */
html.pele-caderno .cp-escudo {
  background: var(--cad-white); border-radius: 50%;
  box-shadow: 0 0 0 2px var(--cad-ink), 0 0 0 6px var(--cad-paper), 0 0 0 7.5px rgba(var(--cad-tinta-rgb), .35);
}
html.pele-caderno .cp-mundo__n { font-family: var(--cad-hand); font-size: 17px; letter-spacing: .05em; text-transform: uppercase; color: var(--cad-muted); }
html.pele-caderno .cp-mundo__tag { color: var(--cad-ink); }
/* a barra de progresso é pintada a marcador dentro de um contorno de caneta */
html.pele-caderno .cp-bar { height: 13px; background: var(--cad-white); box-shadow: 0 0 0 1.8px var(--cad-ink); border-radius: 6px 8px 6px 9px; }
html.pele-caderno .cp-bar > i { background: var(--cad-tape-y); box-shadow: 1.8px 0 0 var(--cad-ink); border-radius: 5px 0 0 6px; }
html.pele-caderno .cp-bar > i::after { display: none; }
html.pele-caderno .cp-prog__n { font-family: var(--cad-hand); font-size: 18px; color: var(--cad-ink); }
html.pele-caderno .cp-prog__st { font-family: var(--cad-hand); font-size: 18px; color: var(--cad-ouro-2); }

/* ── 3. os botões: papel com contorno de caneta; o da próxima ação é o adesivo rosa ── */
html.pele-caderno .cp-btn {
  color: var(--cad-ink); text-shadow: none; font-family: var(--cad-disp);
  background: var(--cad-paper); border-radius: 12px 14px 12px 15px / 14px 12px 14px 12px;
  box-shadow: 0 0 0 1.8px var(--cad-ink), 3px 4px 0 1.8px rgba(var(--cad-tinta-rgb), .2);
  transform: rotate(-.4deg);
}
html.pele-caderno .cp-btn:active { transform: rotate(-.4deg) translateY(3px); box-shadow: 0 0 0 1.8px var(--cad-ink), 1px 1px 0 1.8px rgba(var(--cad-tinta-rgb), .2); }
html.pele-caderno .cp-btn svg { filter: none; }
html.pele-caderno .cp-btn--go {
  color: #fff; background: var(--cad-pink);
  box-shadow: 0 0 0 1.8px var(--cad-ink), 3px 4px 0 1.8px var(--cad-pink-lip);
}
html.pele-caderno .cp-btn--go:active { box-shadow: 0 0 0 1.8px var(--cad-ink), 1px 1px 0 1.8px var(--cad-pink-lip); }
html.pele-caderno .cp-btn--ghost { box-shadow: 0 0 0 1.6px rgba(var(--cad-tinta-rgb), .45); background: transparent; color: var(--cad-ink-soft); font-family: 'Poppins', sans-serif; transform: none; }
html.pele-caderno .cp-btn--gold { background: var(--cad-tape-y); color: var(--cad-ink); }
html.pele-caderno .cp-btn:disabled { background: var(--cp-stone-3); color: var(--cad-muted); box-shadow: 0 0 0 1.6px rgba(var(--cad-tinta-rgb), .3); }
html.pele-caderno .cp-jogar__t { font-family: var(--cad-disp); text-shadow: none; }
html.pele-caderno .cp-jogar__f { text-shadow: none; }
html.pele-caderno .cp-cube {
  color: var(--cad-ink); text-shadow: none; font-family: var(--cad-hand); font-size: 15px; font-weight: 700; padding-top: 1px;
}
html.pele-caderno .cp-cube::before { clip-path: none; border-radius: 50%; inset: 2px; background: var(--cad-ink); }
html.pele-caderno .cp-cube::after { clip-path: none; border-radius: 50%; inset: 4px; background: var(--cad-white); }

/* ── 4. os modos livres: fichas de papel, cada uma cai do seu jeito ── */
html.pele-caderno .st-livres-t { font-family: var(--cad-hand); font-size: 22px; letter-spacing: .05em; text-transform: uppercase; color: var(--cad-ink); text-shadow: none; }
html.pele-caderno .st-modo {
  color: var(--cad-ink); background: var(--cad-paper);
  border-radius: 16px 250px 18px 240px / 240px 16px 230px 18px;
  box-shadow: 0 0 0 1px var(--cad-edge), var(--cad-shadow);
  transform: rotate(var(--giro, -.5deg));
  background-image: repeating-linear-gradient(transparent 0 23px, rgba(var(--cad-tinta-rgb), .055) 23px 24.5px);
  animation: cadAssenta .5s cubic-bezier(.3, 1.18, .36, 1) both;
}
html.pele-caderno .st-modo:nth-child(2) { --giro: .6deg; animation-delay: .08s; }
html.pele-caderno .st-modo:nth-child(3) { --giro: -.3deg; animation-delay: .16s; }
@media (hover: hover) { html.pele-caderno .st-modo:hover { filter: none; transform: translateY(-4px) rotate(0deg); box-shadow: 0 0 0 1px var(--cad-edge), var(--cad-shadow-md); } }
html.pele-caderno .st-modo:active { transform: translateY(0) rotate(var(--giro, -.5deg)); box-shadow: 0 0 0 1px var(--cad-edge), var(--cad-shadow); }
html.pele-caderno .st-modo__ic { background: var(--cad-white); color: var(--cad-ink); box-shadow: 0 0 0 2px var(--cad-ink), 2px 3px 0 2px rgba(var(--cad-tinta-rgb), .15); border-radius: 12px 14px 11px 15px / 14px 11px 15px 12px; transform: rotate(-3deg); }
html.pele-caderno .st-modo__nome { font-family: var(--cad-disp); color: var(--cad-ink); text-shadow: none; }
html.pele-caderno .st-modo__desc { color: var(--cad-ink-soft); }
html.pele-caderno .st-modo #mp-live-indicator { color: var(--cad-verde) !important; }
/* trilha trancada: o treino com foto é o adesivo rosa (a única ação aberta) */
html.pele-caderno.st-mural:not(.st-aberta) #btn-play.st-modo {
  color: #fff; background: var(--cad-pink); background-image: none;
  box-shadow: 0 0 0 1.8px var(--cad-ink), 3px 4px 0 1.8px var(--cad-pink-lip);
}
html.pele-caderno.st-mural:not(.st-aberta) #btn-play .st-modo__ic { background: #fff; color: var(--cad-pink); box-shadow: 0 0 0 2px var(--cad-ink); }
html.pele-caderno.st-mural:not(.st-aberta) #btn-play .st-modo__nome { color: #fff; text-shadow: none; }
html.pele-caderno.st-mural:not(.st-aberta) #btn-play .st-modo__desc { color: #FFE3EC; }

/* a trilha trancada: os mundos viram carimbos numa trilha pontilhada, a senha é uma etiqueta */
html.pele-caderno .st-tranca__x { color: var(--cad-ink); }
html.pele-caderno .st-tranca__mundos { margin-top: 34px; }
html.pele-caderno .st-tranca__mundos::before { border-top-color: rgba(var(--cad-tinta-rgb), .35); }
html.pele-caderno .st-tranca__arte { background: var(--cad-white); box-shadow: 0 0 0 2px var(--cad-ink), 0 0 0 6px var(--cad-paper), 0 0 0 7.5px rgba(var(--cad-tinta-rgb), .3); }
html.pele-caderno .st-tranca__n { color: var(--cad-muted); }
html.pele-caderno .st-tranca__nome { font-family: var(--cad-hand); font-size: 17px; letter-spacing: .03em; text-transform: uppercase; color: var(--cad-ink); text-shadow: none; }
html.pele-caderno .st-tranca__senha { background: var(--cad-white); box-shadow: none; border: 1.6px dashed rgba(var(--cad-tinta-rgb), .55); border-radius: 12px 14px 11px 15px / 14px 11px 15px 12px; }
html.pele-caderno .st-tranca__cad, html.pele-caderno .st-tranca__rot { color: var(--cad-ink-soft); }
html.pele-caderno .st-tranca__senha input { color: var(--cad-ink); background: var(--cad-paper); box-shadow: 0 0 0 1.6px var(--cad-ink); }
html.pele-caderno .st-tranca__senha input:focus { outline-color: var(--cad-hot); }
html.pele-caderno .cp-porta__erro { color: var(--cad-pink); }

/* ── 5. o MAPA: cada mundo é uma página de mangá, cada fase um quadro ── */
html.pele-caderno .st-voltar { color: var(--cad-ink-soft); font-weight: 700; }
html.pele-caderno .cp-map__t { font-family: var(--cad-disp); color: var(--cad-ink); text-shadow: none; transform: rotate(-1deg); }
html.pele-caderno .cp-map__x { color: var(--cad-ink-soft); }
/* a página: papel branco, sem inclinação (é a folha aberta na mesa) */
html.pele-caderno .cp-mundo {
  background: var(--cad-paper); border-radius: 6px 10px 8px 12px / 10px 6px 12px 8px;
  box-shadow: 0 0 0 1px var(--cad-edge), var(--cad-shadow-md);
}
html.pele-caderno .cp-mundo__nome { font-size: 23px; }
html.pele-caderno .cp-seta { color: var(--cad-ink); background: var(--cad-paper); box-shadow: 0 0 0 1.8px var(--cad-ink), 2px 3px 0 1.8px rgba(var(--cad-tinta-rgb), .2); }
html.pele-caderno .cp-seta svg { filter: none; }
html.pele-caderno .cp-seta:disabled { color: var(--cp-stone-1); background: var(--cad-paper); box-shadow: 0 0 0 1.6px rgba(var(--cad-tinta-rgb), .25); }
html.pele-caderno .cp-ponto::before { background: var(--cad-white); box-shadow: 0 0 0 1.8px var(--cad-ink); }
html.pele-caderno .cp-ponto.is-feito::before { background: var(--cad-ink); }
html.pele-caderno .cp-ponto.is-on::before { background: var(--cad-hot); box-shadow: 0 0 0 1.8px var(--cad-ink); }
html.pele-caderno .cp-mundo__sobre { background: var(--cad-white); color: var(--cad-ink-soft); box-shadow: none; border: 1.5px dashed rgba(var(--cad-tinta-rgb), .35); }
/* os quadros: tinta grossa, calha branca, tamanhos diferentes como numa página de verdade */
html.pele-caderno .cp-fases, html.pele-caderno.st-mural .cp-fases {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding: 12px;
  background: var(--cad-white); background-image: none; border-radius: 2px;
  box-shadow: 0 0 0 1px var(--cad-edge);
}
html.pele-caderno .cp-fase, html.pele-caderno.st-mural .cp-fase {
  grid-column: span 3; min-height: 168px; padding: 0; overflow: hidden; align-items: stretch; gap: 0;
  color: var(--cad-ink); background: var(--cad-white); border-radius: 2px; transform: none;
  box-shadow: inset 0 0 0 3px var(--cad-ink);
  transition: box-shadow .12s ease, transform .12s ease;
}
html.pele-caderno .cp-fase:nth-child(4n+1) { grid-column: span 4; }
html.pele-caderno .cp-fase:nth-child(4n+2) { grid-column: span 2; }
html.pele-caderno .cp-fase:last-child:nth-child(4n+1) { grid-column: span 6; min-height: 150px; }
html.pele-caderno .cp-fase::before, html.pele-caderno.st-mural .cp-fase::before { display: none; }
@media (hover: hover) { html.pele-caderno .cp-fase:hover, html.pele-caderno.st-mural .cp-fase:hover { filter: none; transform: translateY(-2px); box-shadow: inset 0 0 0 3px var(--cad-ink), 3px 4px 0 rgba(var(--cad-tinta-rgb), .18); } }
html.pele-caderno .cp-fase:active, html.pele-caderno.st-mural .cp-fase:active { transform: none; box-shadow: inset 0 0 0 3px var(--cad-ink); }
/* a caixa do título no canto (a legenda do quadro) */
html.pele-caderno .cp-fase__topo {
  position: relative; z-index: 2; width: auto; align-self: flex-start; margin: 3px; padding: 5px 9px 5px 5px;
  background: var(--cad-white); box-shadow: 1.5px 1.5px 0 var(--cad-ink), inset 0 0 0 1.5px var(--cad-ink); gap: 6px;
}
html.pele-caderno .cp-fase__topo .cp-cube { width: 28px; height: 28px; font-size: 13px; padding-top: 0; }
html.pele-caderno .cp-fase__nome, html.pele-caderno.st-mural .cp-fase__nome { font-family: var(--cad-hand); font-size: 15px; letter-spacing: .03em; text-transform: uppercase; color: var(--cad-ink); line-height: 1.05; }
/* a arte ocupa o quadro (a fase feita mostra o desenho DELA) */
html.pele-caderno .cp-fase__art, html.pele-caderno.st-mural .cp-fase__art {
  position: absolute; inset: 3px; width: auto; padding: 0; border-radius: 0; background: var(--cad-white); box-shadow: none;
  display: grid; place-items: center; opacity: .9;
}
html.pele-caderno .cp-fase__art svg { width: 70%; max-height: 80%; }
html.pele-caderno.st-mural .cp-fase__art img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0; box-shadow: none; }
html.pele-caderno .cp-fase__pe { position: relative; z-index: 2; margin: auto 3px 3px auto; padding: 3px 7px; min-height: 0; background: var(--cad-white); box-shadow: inset 0 0 0 1.5px var(--cad-ink); }
html.pele-caderno .cp-fase__pe .cp-st i, html.pele-caderno.st-mural .cp-fase__pe .cp-st i { color: var(--cad-estrela-off); text-shadow: none; -webkit-text-stroke: 1px var(--cad-ink); }
html.pele-caderno .cp-fase__pe .cp-st i.on, html.pele-caderno.st-mural .cp-fase__pe .cp-st i.on { color: var(--cad-tape-y); -webkit-text-stroke: 1px var(--cad-ink); text-shadow: none; }
/* o quadro de agora: moldura rosa e o balãozinho "agora" */
html.pele-caderno .cp-fase--agora, html.pele-caderno.st-mural .cp-fase--agora { box-shadow: inset 0 0 0 4px var(--cad-hot), 0 0 0 0 transparent; }
html.pele-caderno .cp-fase__agora, html.pele-caderno.st-mural .cp-fase__agora {
  font-family: var(--cad-hand); font-size: 15px; letter-spacing: .05em; text-transform: uppercase; color: #fff; text-shadow: none;
  background: var(--cad-pink); border-radius: 12px 14px 12px 3px; box-shadow: 0 0 0 1.5px var(--cad-ink);
}
/* fechado: hachura de nanquim (retícula em linha, nada de bolinha) */
html.pele-caderno .cp-fase--fechada, html.pele-caderno.st-mural .cp-fase--fechada {
  background: var(--cad-white) repeating-linear-gradient(-45deg, rgba(var(--cad-tinta-rgb), .09) 0 2px, transparent 2px 8px);
  box-shadow: inset 0 0 0 3px rgba(var(--cad-tinta-rgb), .45);
}
html.pele-caderno .cp-fase--fechada .cp-fase__art, html.pele-caderno.st-mural .cp-fase--fechada .cp-fase__art { background: transparent; opacity: .28; filter: grayscale(1); }
html.pele-caderno .cp-fase--fechada .cp-fase__trava, html.pele-caderno.st-mural .cp-fase--fechada .cp-fase__trava { color: var(--cad-muted); }
html.pele-caderno .cp-fase--prova:not(.cp-fase--agora), html.pele-caderno.st-mural .cp-fase--prova:not(.cp-fase--agora) { box-shadow: inset 0 0 0 3px var(--cad-ink), inset 0 0 0 6px var(--cad-white), inset 0 0 0 7.5px var(--cad-ink); }
html.pele-caderno .cp-fase--feita .cp-cube::before { background: var(--cad-ink); }
/* o quadro que acabou de ir pro mural entra carimbado */
html.pele-caderno .cp-fase.is-pregou { animation: cadCarimba .55s cubic-bezier(.3, 1.5, .5, 1) .1s both; }
html.pele-caderno .cp-fase.is-pregou::before { display: none; }
@keyframes cadCarimba { from { transform: scale(1.12) rotate(-2deg); opacity: 0; } }
html.pele-caderno .cp-habs__mt { font-family: var(--cad-disp); }
html.pele-caderno .cp-hab { background: var(--cad-white); box-shadow: 0 0 0 1px var(--cad-edge); }

/* ── 6. as janelas do molde (ficha da fase, dica): folha solta presa com fita ── */
html.pele-caderno .cp-ov { background: rgba(var(--cad-tinta-rgb), .42); }
html.pele-caderno .cp-box {
  background: var(--cad-paper); border-radius: 10px 16px 12px 18px / 16px 10px 18px 12px; overflow: visible;
  box-shadow: 0 0 0 1px var(--cad-edge), var(--cad-shadow-md); transform: rotate(-.4deg);
}
html.pele-caderno .cp-box::before {
  content: ''; position: absolute; left: 50%; top: -12px; width: 110px; height: 26px; transform: translateX(-50%) rotate(-2deg);
  background: var(--cad-tape-y); clip-path: polygon(2% 0, 98% 4%, 100% 12%, 97% 100%, 3% 96%, 0 88%, 1% 10%);
}
html.pele-caderno .cp-x { background: var(--cad-white); box-shadow: 0 0 0 1.6px var(--cad-ink); color: var(--cad-ink); }
html.pele-caderno .cp-ficha__t, html.pele-caderno .cp-dica__t { font-family: var(--cad-disp); color: var(--cad-ink); text-shadow: none; }
html.pele-caderno .cp-ficha__art, html.pele-caderno .cp-dica__art { background: var(--cad-white); border-radius: 4px; box-shadow: inset 0 0 0 2.5px var(--cad-ink); }
html.pele-caderno .cp-placar, html.pele-caderno .cp-ficha__trava { background: var(--cad-white); box-shadow: none; border: 1.5px dashed rgba(var(--cad-tinta-rgb), .4); }
html.pele-caderno .cp-prova { color: var(--cad-ink); background: var(--cad-tape-y); box-shadow: 0 0 0 1.5px var(--cad-ink); font-family: var(--cad-hand); font-size: 16px; text-transform: uppercase; }
html.pele-caderno .cp-st i { color: var(--cad-estrela-off); text-shadow: none; -webkit-text-stroke: 1px var(--cad-ink); }
html.pele-caderno .cp-st i.on { color: var(--cad-tape-y); text-shadow: none; }

/* ── 7. a MESA da fase ── */
/* o topo é uma tira de papel com a caneta embaixo */
html.pele-caderno .st-topo { background: var(--cad-paper); box-shadow: 0 2px 0 var(--cad-ink), 0 6px 14px rgba(var(--cad-sombra-rgb), .10); color: var(--cad-ink); }
html.pele-caderno .st-ic { color: var(--cad-ink-soft); background: var(--cad-white); box-shadow: 0 0 0 1.6px var(--cad-ink), var(--cad-hard); border-radius: 10px 12px 10px 13px / 12px 10px 13px 10px; }
html.pele-caderno .st-topo__nome { font-family: var(--cad-disp); color: var(--cad-ink); text-shadow: none; }
html.pele-caderno .st-rodadas li { background: var(--cad-white); box-shadow: 0 0 0 1.6px var(--cad-ink); }
html.pele-caderno .st-rodadas li.is-feita { background: var(--cad-ink); }
html.pele-caderno .st-rodadas li.is-agora { background: var(--cad-hot); }
html.pele-caderno .st-topo .cp-btn { font-size: 16px; }
/* o relógio: papel com contorno; perto do fim o marcador acende */
html.pele-caderno .st-relogio { background: var(--cad-white); box-shadow: 0 0 0 1.8px var(--cad-ink), var(--cad-hard); }
html.pele-caderno .st-relogio > b { font-family: var(--cad-disp); color: var(--cad-ink); background: transparent; box-shadow: none; }
html.pele-caderno .st-relogio__trilho { background: var(--cad-paper); box-shadow: inset 0 0 0 1.6px var(--cad-ink); }
html.pele-caderno .st-relogio__trilho > i { background: var(--cad-ink); border-radius: 99px; }
html.pele-caderno .st-relogio.is-pouco > b { background: var(--cad-tape-y); color: var(--cad-ink); text-shadow: none; }
html.pele-caderno .st-relogio.is-pouco .st-relogio__trilho > i { background: #E0A21F; }
html.pele-caderno .st-relogio.is-fim > b { background: #FF8A1F; color: #fff; text-shadow: none; box-shadow: 0 0 0 1.8px var(--cad-ink); }
html.pele-caderno .st-relogio.is-fim .st-relogio__trilho > i { background: #FF8A1F; }
html.pele-caderno .st-relogio.is-suave .st-relogio__trilho > i { background: #7FB8E6; }

/* o cartão do pedido é uma ficha pautada presa com fita amarela */
html.pele-caderno .st-pedido {
  background: var(--cad-white); color: var(--cad-ink);
  background-image: linear-gradient(rgba(255, 45, 110, .28), rgba(255, 45, 110, .28)), repeating-linear-gradient(transparent 0 25px, rgba(var(--cad-tinta-rgb), .07) 25px 26.5px);
  background-size: 100% 1.5px, 100% 100%; background-position: 0 38px, 0 30px; background-repeat: no-repeat, repeat;
  border-radius: 4px 8px 6px 10px / 8px 4px 10px 6px; box-shadow: 0 0 0 1px var(--cad-edge), var(--cad-shadow);
}
html.pele-caderno .st-pedido::before { background: var(--cad-tape-y); clip-path: polygon(2% 0, 98% 4%, 100% 12%, 97% 100%, 3% 96%, 0 88%, 1% 10%); box-shadow: none; }
html.pele-caderno .st-pedido__rot { color: var(--cad-muted); }
html.pele-caderno .st-pedido__x { color: var(--cad-ink-soft); }
html.pele-caderno .st-pedido__foto { background: var(--cad-white); padding: 5px 5px 0; box-shadow: 0 0 0 1px var(--cad-edge), 0 3px 8px rgba(var(--cad-sombra-rgb), .15); transform: rotate(1.2deg); }
html.pele-caderno .st-regras li { color: var(--cad-ink-soft); background: var(--cad-white); box-shadow: none; border: 1.4px dashed rgba(var(--cad-tinta-rgb), .4); font-family: var(--cad-hand); font-size: 14px; letter-spacing: .03em; text-transform: uppercase; }
html.pele-caderno .st-link--escuro { color: var(--cad-ink); background: var(--cad-white); box-shadow: 0 0 0 1.5px var(--cad-ink), 2px 2px 0 1.5px rgba(var(--cad-tinta-rgb), .15); }
html.pele-caderno .st-link { color: var(--cad-ink); }
html.pele-caderno .st-ajuda { background: var(--cad-ajuda-bg); box-shadow: none; border: 1.5px dashed #7FB8E6; }

/* a mesa em volta do papel é o caderno quadriculado; o rosa da casa entra nas fitas dos cantos */
html.pele-caderno .vf-board {
  background-color: var(--cad-mesa); background-image: var(--cad-grade); background-size: 26px 26px; background-position: -1px -1px;
  border-radius: 6px 10px 8px 12px / 10px 6px 12px 8px;
  box-shadow: 0 0 0 1px var(--cad-edge), var(--cad-shadow-md);
}
html.pele-caderno .st-quadro__papel::before, html.pele-caderno .st-quadro__papel::after {
  content: ''; position: absolute; z-index: 9; width: 88px; height: 24px; pointer-events: none;
  background: var(--cad-tape-p); clip-path: polygon(2% 0, 98% 4%, 100% 12%, 97% 100%, 3% 96%, 0 88%, 1% 10%);
  filter: drop-shadow(0 1px 2px rgba(var(--cad-sombra-rgb), .3));
}
html.pele-caderno .st-quadro__papel::before { left: -8px; top: 12px; transform: rotate(-38deg); }
html.pele-caderno .st-quadro__papel::after { right: -8px; bottom: 16px; transform: rotate(-38deg); }
/* as ferramentas moram num estojo de papel; a escolhida fica pintada de tinta */
html.pele-caderno .vf { --vf-plate: 0 0 0 1.8px var(--cad-ink), 3px 4px 0 1.8px rgba(var(--cad-tinta-rgb), .16); --vf-hover: rgba(var(--cad-tinta-rgb), .06); }
html.pele-caderno .vf-tools, html.pele-caderno .vf-gmenu, html.pele-caderno .vf-nav, html.pele-caderno .vf-tools__mais {
  background: var(--cad-paper); box-shadow: 0 0 0 1.8px var(--cad-ink), 3px 4px 0 1.8px rgba(var(--cad-tinta-rgb), .16);
  border-radius: 12px 16px 12px 18px / 16px 12px 18px 12px;
}
html.pele-caderno .vf-tool { color: var(--cad-ink-soft); }
html.pele-caderno .vf-tool:hover { color: var(--cad-ink); }
html.pele-caderno .vf-tool.is-on { color: var(--cad-paper); background: var(--cad-ink); box-shadow: 2px 2px 0 rgba(var(--cad-tinta-rgb), .25); border-radius: 10px 12px 9px 13px / 12px 9px 13px 10px; }
html.pele-caderno .vf-tool.is-on svg { filter: none; }
html.pele-caderno .vf-tool--sm { color: var(--cad-ink); }
html.pele-caderno .vf-tools__sep { background: rgba(var(--cad-tinta-rgb), .18); }
html.pele-caderno .vf-tools__dot i { box-shadow: 0 0 0 1.5px var(--cad-ink); }
html.pele-caderno .vf-gmenu { color: var(--cad-ink); }
html.pele-caderno .vf-gmenu__txt b { font-family: var(--cad-disp); text-shadow: none; }
html.pele-caderno .vf-gmenu__txt span, html.pele-caderno .vf-gmenu__est-x { color: var(--cad-ink-soft); }
html.pele-caderno .vf-gmenu__ic { background: var(--cad-white); box-shadow: 0 0 0 1.5px rgba(var(--cad-tinta-rgb), .35); color: var(--cad-ink-soft); }
html.pele-caderno .vf-gmenu__op.is-on .vf-gmenu__ic { background: var(--cad-ink); color: var(--cad-paper); box-shadow: none; }
html.pele-caderno .vf-gmenu__k { color: var(--cad-ink-soft); background: var(--cad-white); box-shadow: inset 0 0 0 1.2px rgba(var(--cad-tinta-rgb), .3); }
html.pele-caderno .vf-gmenu__est { border-top-color: rgba(var(--cad-tinta-rgb), .12); }
html.pele-caderno .vf-gmenu__est-t b { font-family: var(--cad-disp); text-shadow: none; }
html.pele-caderno .vf-gmenu__nivel { background: var(--cad-white); box-shadow: inset 0 0 0 1.2px rgba(var(--cad-tinta-rgb), .25); }
html.pele-caderno .vf-gmenu__nivel i { background: var(--cad-ink-soft); }
html.pele-caderno .vf-gmenu__nivel.is-on { background: var(--cad-ink); box-shadow: none; }
html.pele-caderno .vf-gmenu__nivel.is-on i { background: var(--cad-paper); }
html.pele-caderno .vf-nav__b { color: var(--cad-ink); }
html.pele-caderno .vf-nav__b--n { color: var(--cad-muted); }
html.pele-caderno .vf-nav__lupa { color: var(--cad-ink-soft); }
html.pele-caderno .vf-conta { color: var(--cad-ink); background: var(--cad-tape-y); box-shadow: 0 0 0 1.5px var(--cad-ink); }
/* a MISSÃO é um balão de fala de mangá (o rabinho aponta pro papel) */
html.pele-caderno .vf-hint {
  color: var(--cad-ink); background: var(--cad-white); padding: 16px 24px 16px;
  border-radius: 40px / 30px; box-shadow: 0 0 0 2.5px var(--cad-ink), 3px 4px 0 2.5px rgba(var(--cad-tinta-rgb), .14);
  font: 600 14px/1.4 'Poppins', sans-serif;
}
html.pele-caderno .vf-hint::before {
  content: 'Missão'; top: -12px; left: 22px; padding: 3px 10px 2px; border-radius: 3px;
  font: 400 15px/1 var(--cad-hand); letter-spacing: .06em; text-transform: uppercase; color: var(--cad-paper); text-shadow: none;
  background: var(--cad-ink); box-shadow: none; transform: rotate(-2deg);
}
html.pele-caderno .vf-hint::after {
  content: ''; position: absolute; left: 44px; bottom: -11px; width: 18px; height: 18px; background: var(--cad-white);
  box-shadow: 2.5px 2.5px 0 var(--cad-ink); transform: rotate(38deg) skew(12deg, 12deg);
}
html.pele-caderno .vf-hint__x { color: var(--cad-ink); background: var(--cad-paper); box-shadow: 0 0 0 1.6px var(--cad-ink); left: auto; right: 16px; transform: none; bottom: -12px; }
html.pele-caderno .vf.is-missao-off .vf-dica-mini, html.pele-caderno .vf.is-dica-min .vf-dica-mini {
  color: var(--cad-ink); background: var(--cad-white); text-shadow: none; box-shadow: 0 0 0 2px var(--cad-ink), 2px 3px 0 2px rgba(var(--cad-tinta-rgb), .14);
  border-radius: 22px / 18px; font-family: var(--cad-hand); letter-spacing: .04em; text-transform: uppercase;
}
html.pele-caderno .vf-dica-mini svg { filter: none; }
/* as ações: o desfazer é papel, o seguir é o adesivo rosa; sem a placa de madeira atrás */
html.pele-caderno .vf-acts { background: transparent; box-shadow: none; padding: 6px; }
@media (max-width: 760px) { html.pele-caderno .vf-tools { box-shadow: 0 0 0 1.8px var(--cad-ink), 3px 4px 0 1.8px rgba(var(--cad-tinta-rgb), .16); } }

/* a passagem é um quadro de mangá com linhas de velocidade saindo do centro */
html.pele-caderno .st-flash { background-color: rgba(var(--cad-creme-rgb), .92); background-image: none; }
/* as linhas de velocidade: finas, de tamanhos diferentes, e só nas bordas (o miolo fica limpo pro quadro) */
html.pele-caderno .st-flash::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-conic-gradient(from 3deg at 50% 50%, rgba(var(--cad-tinta-rgb), .5) 0deg .35deg, transparent .35deg 4.7deg),
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(var(--cad-tinta-rgb), .32) 0deg .6deg, transparent .6deg 7.3deg);
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, transparent 46%, #000 78%);
  mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, transparent 46%, #000 78%);
  animation: cadVelocidade .35s ease-out both;
}
html.pele-caderno .st-flash > * { position: relative; z-index: 1; }
@keyframes cadVelocidade { from { opacity: 0; transform: scale(1.08); } }
html.pele-caderno .st-flash__papel {
  background: var(--cad-white); color: var(--cad-ink); border-radius: 2px; transform: rotate(-1deg);
  box-shadow: 0 0 0 3px var(--cad-ink), 8px 10px 0 3px rgba(var(--cad-tinta-rgb), .12);
}
html.pele-caderno .st-flash__t { font-family: var(--cad-hand); color: var(--cad-ink); }
html.pele-caderno .st-flash__n { color: var(--cad-muted); }
html.pele-caderno .st-flash__x { color: var(--cad-ink-soft); }
html.pele-caderno .st-flash__tosco { border-top-color: rgba(var(--cad-tinta-rgb), .2); }
@keyframes stEntra { from { transform: rotate(-4deg) scale(.9); opacity: 0; } to { transform: rotate(-1deg); opacity: 1; } }
/* a revelação é a caixa de narração do quadro */
html.pele-caderno .st-revela {
  border-radius: 1px; background: var(--cad-white); color: var(--cad-ink);
  box-shadow: 0 0 0 2.5px var(--cad-ink), 5px 6px 0 2.5px rgba(var(--cad-tinta-rgb), .14); transform: translateX(-50%) rotate(-.6deg);
}
@keyframes stEntraR { from { transform: translateX(-50%) translateY(14px) rotate(-3deg); opacity: 0; } to { transform: translateX(-50%) rotate(-.6deg); opacity: 1; } }
/* a contagem final é onomatopeia: letra de mangá, contorno de tinta, volume rosa */
html.pele-caderno .st-contagem {
  font-family: var(--cad-disp); color: var(--cad-white); opacity: 1;
  -webkit-text-stroke: 4px var(--cad-ink); paint-order: stroke fill; text-shadow: 6px 6px 0 var(--cad-hot);
  transform: rotate(-8deg);
}
@keyframes stContagem { 0% { transform: rotate(-8deg) scale(1.7); opacity: 0; } 25% { transform: rotate(-8deg) scale(1); opacity: 1; } 100% { transform: rotate(-8deg) scale(.94); opacity: .9; } }
html.pele-caderno .st-tempo { height: 6px; background: rgba(var(--cad-tinta-rgb), .08); }
html.pele-caderno .st-tempo > i { background: rgba(var(--cad-tinta-rgb), .6); }
/* o aviso é um bilhete deixado na mesa */
html.pele-caderno .st-aviso { color: var(--cad-ink); background: var(--cad-white); border-left: 4px solid var(--cad-hot); box-shadow: 0 0 0 1.6px var(--cad-ink), 4px 5px 0 1.6px rgba(var(--cad-tinta-rgb), .16); border-radius: 3px 12px 10px 14px / 12px 6px 14px 8px; }
html.pele-caderno .st-ganhou { color: var(--cad-ink); background: var(--cad-tape-y); box-shadow: 0 0 0 1.6px var(--cad-ink); }

/* olhar a foto, escolher, as cartas: a mesa de papel com as coisas coladas */
html.pele-caderno .st-escolha { background-color: rgba(var(--cad-creme-rgb), .97); background-image: var(--cad-grade); background-size: 26px 26px; }
html.pele-caderno .st-escolha__t { font-family: var(--cad-disp); color: var(--cad-ink); text-shadow: none; }
html.pele-caderno .st-escolha__x { color: var(--cad-ink-soft); }
html.pele-caderno .st-olhar img { border: 6px solid var(--cad-white); border-bottom-width: 18px; border-radius: 1px; box-shadow: 0 0 0 1px var(--cad-edge), 0 8px 18px rgba(var(--cad-sombra-rgb), .22); }
html.pele-caderno .st-olhar__foto:nth-child(odd) img { transform: rotate(-1.4deg); }
html.pele-caderno .st-olhar__foto:nth-child(even) img { transform: rotate(1.2deg); }
html.pele-caderno .st-olhar figcaption { color: var(--cad-ink-soft); }
html.pele-caderno .st-olhar figcaption b { color: var(--cad-ink); }
html.pele-caderno .st-carta { color: var(--cad-ink); background: var(--cad-white); box-shadow: 0 0 0 2px var(--cad-ink), 3px 4px 0 2px rgba(var(--cad-tinta-rgb), .15); }
html.pele-caderno .st-dados { color: var(--cad-ink); }
html.pele-caderno .st-carta.is-lembra { box-shadow: 0 0 0 2px var(--cad-ink), 0 0 0 6px var(--cad-tape-y), 3px 4px 0 6px rgba(var(--cad-tinta-rgb), .15); }
html.pele-caderno .st-carta.is-sel { box-shadow: 0 0 0 4px var(--cad-ink), 3px 4px 0 4px rgba(var(--cad-tinta-rgb), .2); }
html.pele-caderno .st-escolha__op { background: var(--cad-white); box-shadow: 0 0 0 1px var(--cad-edge), 0 6px 12px rgba(var(--cad-sombra-rgb), .18); }
html.pele-caderno .st-escolha__op span { color: var(--cad-ink-soft); }
html.pele-caderno .st-escolha__op.is-sel { box-shadow: 0 0 0 4px var(--cad-ink), 0 10px 20px rgba(var(--cad-sombra-rgb), .25); }
html.pele-caderno .st-papelmode { background: var(--cad-white); color: var(--cad-ink); }

/* ── 8. a FOLHA do fim: o caderno aberto com tudo que saiu ── */
html.pele-caderno .st-folha { background-color: var(--cad-cream); background-image: var(--cad-grao), var(--cad-grade); background-size: 160px 160px, 26px 26px, 26px 26px; }
html.pele-caderno .st-folha__t { font-family: var(--cad-disp); color: var(--cad-ink); text-shadow: none; transform: rotate(-1deg); }
html.pele-caderno .st-folha__conta { color: var(--cad-ink); }
html.pele-caderno .st-folha__conta b { color: var(--cad-pink); font-family: var(--cad-hand); font-size: 1.35em; letter-spacing: .03em; text-transform: uppercase; }
html.pele-caderno .st-folha__x, html.pele-caderno .st-folha__apagar { color: var(--cad-ink-soft); }
html.pele-caderno .st-folha__papel { background: var(--cad-white); border-radius: 4px 10px 6px 12px / 10px 4px 12px 6px; box-shadow: 0 0 0 1px var(--cad-edge), var(--cad-shadow); }
html.pele-caderno .st-folha__item img { box-shadow: 0 0 0 1px rgba(var(--cad-tinta-rgb), .2); }
html.pele-caderno .st-confere { background: var(--cad-white); color: var(--cad-ink); box-shadow: 0 0 0 1px var(--cad-edge), var(--cad-shadow); border-radius: 4px 10px 6px 12px / 10px 4px 12px 6px; background-image: repeating-linear-gradient(transparent 0 31px, rgba(var(--cad-tinta-rgb), .06) 31px 32.5px); }
html.pele-caderno .st-confere__t { font-family: var(--cad-disp); color: var(--cad-ink); text-shadow: none; }
html.pele-caderno .st-confere__x { color: var(--cad-ink-soft); }
html.pele-caderno .st-item { color: var(--cad-ink); background: transparent; box-shadow: none; border-radius: 0; border-bottom: 1.4px dashed rgba(var(--cad-tinta-rgb), .22); }
html.pele-caderno .st-item:last-of-type { border-bottom: 0; }
html.pele-caderno .st-item__caixa { background: var(--cad-white); box-shadow: inset 0 0 0 2px var(--cad-ink); border-radius: 3px 5px 3px 6px; }
html.pele-caderno .st-item input:checked + .st-item__caixa { background: var(--cad-white); color: var(--cad-pink); }
html.pele-caderno .st-confere__st i { color: var(--cad-estrela-off); -webkit-text-stroke: 1px var(--cad-ink); text-shadow: none; }
html.pele-caderno .st-confere__st i.on { color: var(--cad-tape-y); }
html.pele-caderno .st-resultado__t { font-family: var(--cad-disp); color: var(--cad-ink); text-shadow: none; }
html.pele-caderno .st-resultado__x { color: var(--cad-ink-soft); }
html.pele-caderno .cp-fim__st i { color: var(--cad-estrela-off); -webkit-text-stroke: 1.5px var(--cad-ink); text-shadow: none; }
html.pele-caderno .cp-fim__st i.on { color: var(--cad-tape-y); text-shadow: none; }
html.pele-caderno .cp-premio, html.pele-caderno .cp-painel { background: var(--cad-white); box-shadow: 0 0 0 1px var(--cad-edge), var(--cad-shadow); }
html.pele-caderno .cp-premio { box-shadow: 0 0 0 2px var(--cad-ink), 3px 4px 0 2px rgba(var(--cad-tinta-rgb), .14); }
html.pele-caderno .cp-premio__ic { background: var(--cad-tape-y) !important; box-shadow: 0 0 0 2px var(--cad-ink) !important; color: var(--cad-ink) !important; }
html.pele-caderno .cp-premio .cp-premio__rot { color: var(--cad-ouro); }
html.pele-caderno .cp-premio b, html.pele-caderno .cp-painel__t { font-family: var(--cad-disp); color: var(--cad-ink); text-shadow: none; }
html.pele-caderno .cp-premio span, html.pele-caderno .cp-painel__rot { color: var(--cad-ink-soft); }
html.pele-caderno .cp-painel p { color: var(--cad-ink); }
html.pele-caderno .st-amanha { background: var(--cad-white); color: var(--cad-ink); box-shadow: 0 0 0 1.5px var(--cad-ink); }
html.pele-caderno .st-caderno { background: var(--cad-white); box-shadow: 0 0 0 1px var(--cad-edge), var(--cad-shadow); }
html.pele-caderno .st-caderno__t { font-family: var(--cad-disp); color: var(--cad-ink); text-shadow: none; }
html.pele-caderno .st-caderno__minis img { box-shadow: 0 0 0 2px var(--cad-ink); }
html.pele-caderno .st-caderno__minis figcaption { color: var(--cad-ink-soft); }
html.pele-caderno .st-caderno__x { color: var(--cad-pink); }
html.pele-caderno .st-folha__acoes { background: linear-gradient(180deg, transparent, rgba(var(--cad-creme-rgb), .96) 38%); }
html.pele-caderno .st-compara__fato { color: var(--cad-ink); }
html.pele-caderno .st-folha__pergunta, html.pele-caderno .st-amanha b { font-family: var(--cad-disp); color: var(--cad-ink); text-shadow: none; }
html.pele-caderno .st-amanha__rot { color: var(--cad-muted); }
html.pele-caderno .st-chip { color: var(--cad-ink); background: var(--cad-white); box-shadow: 0 0 0 1.5px var(--cad-ink); }
html.pele-caderno .st-chip.is-sel { color: #fff; background: var(--cad-ink); }

/* ── 9. o modo configuração das referências também no papel ── */
html.pele-caderno .st-refs { background-color: var(--cad-cream); background-image: var(--cad-grade); background-size: 26px 26px; color: var(--cad-ink); }
html.pele-caderno .st-refs__topo { background: var(--cad-paper); box-shadow: 0 2px 0 var(--cad-ink); }
html.pele-caderno .st-refs__t { font-family: var(--cad-disp); text-shadow: none; }
html.pele-caderno .st-refs__x, html.pele-caderno .st-refs__conta { color: var(--cad-ink-soft); }
html.pele-caderno .st-refs__lista { background: var(--cad-white); box-shadow: 0 0 0 1px var(--cad-edge); }
html.pele-caderno .st-refs__lista input { color: var(--cad-ink); background: var(--cad-paper); box-shadow: 0 0 0 1.5px var(--cad-ink); }
html.pele-caderno .st-refs__g { color: var(--cad-muted); }
html.pele-caderno .st-refs__li { color: var(--cad-ink); }
html.pele-caderno .st-refs__li small { color: var(--cad-muted); }
html.pele-caderno .st-refs__li:hover { background: rgba(var(--cad-tinta-rgb), .05); }
html.pele-caderno .st-refs__li.is-sel { background: var(--cad-marca-2); }

/* ── 10. celular: tilts pela metade, fita menor ── */
@media (max-width: 760px) {
  html.pele-caderno .st-story { transform: rotate(-.3deg); }
  html.pele-caderno .cp-fases, html.pele-caderno.st-mural .cp-fases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px; }
  /* no celular a página tem duas colunas; com número ímpar de fases, a prova fecha a página inteira */
  html.pele-caderno .cp-fase, html.pele-caderno.st-mural .cp-fase, html.pele-caderno .cp-fase:nth-child(4n+1), html.pele-caderno .cp-fase:nth-child(4n+2),
  html.pele-caderno .cp-fase:last-child:nth-child(4n+1) { grid-column: span 1; min-height: 150px; }
  html.pele-caderno.st-mural .cp-fase:last-child:nth-child(odd) { grid-column: span 2; }
  html.pele-caderno .st-quadro__papel::before, html.pele-caderno .st-quadro__papel::after { width: 64px; height: 20px; }
  /* a segunda fita sobe pro canto de cima (embaixo mora o botão de seguir) */
  html.pele-caderno .st-quadro__papel::after { bottom: auto; top: 12px; right: -8px; transform: rotate(38deg); }
  html.pele-caderno .vf-hint { padding: 13px 16px; border-radius: 26px / 20px; font-size: 12.5px; }
  html.pele-caderno .vf-hint::after { left: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  html.pele-caderno #main-screen .title-main, html.pele-caderno #main-screen .title-stack::after, html.pele-caderno .st-story,
  html.pele-caderno .st-modo, html.pele-caderno .cp-fase.is-pregou { animation: none; }
}

/* ============================================================
   11. SEGUNDA RODADA (retorno do Lucas, 26/set): "muito texto, os ícones
   apagados, a fita apagadinha; no mapa não dá pra entender o que está
   selecionado e que são fases". Menos texto, tinta mais forte, a fita
   rosa de verdade e o quadro da vez que salta da página.
   ============================================================ */
/* a fita do título: rosa-escuro cheio, letra branca (o rosa da casa como volume) */
html.pele-caderno .cp-ribbon { color: #fff; font-size: 24px; padding: 10px 28px 9px; }
html.pele-caderno .cp-ribbon::before { background: var(--cad-pink); }
html.pele-caderno .st-story__rot { filter: drop-shadow(2px 3px 0 rgba(var(--cad-tinta-rgb), .25)); }
/* os rabiscos pequenos ganham tinta: traço mais grosso e nada de cinza */
html.pele-caderno .st-tranca__arte svg path, html.pele-caderno .cp-escudo svg path { stroke-width: 4.2px; }
html.pele-caderno .st-tranca__arte svg path[opacity], html.pele-caderno .cp-escudo svg path[opacity] { opacity: 1; }

/* TRANCADA: sem o parágrafo; os 4 mundos grandes, o número num carimbo, o nome em letra de mão */
html.pele-caderno .st-tranca__x { display: none; }
html.pele-caderno .st-tranca__mundos { margin-top: 18px; gap: 6px; }
html.pele-caderno .st-tranca__mundos::before { top: 42px; border-top: 3px dashed rgba(var(--cad-tinta-rgb), .5); }
html.pele-caderno .st-tranca__arte { width: 84px; height: 84px; box-shadow: 0 0 0 3px var(--cad-ink), 4px 5px 0 3px rgba(var(--cad-tinta-rgb), .16); }
html.pele-caderno .st-tranca__arte svg { width: 60px; height: 60px; opacity: 1; }
html.pele-caderno .st-tranca__mundos li:not(:first-child) .st-tranca__arte svg { opacity: 1; filter: none; }
/* o mundo 1 é por onde começa: moldura rosa */
html.pele-caderno .st-tranca__mundos li:first-child .st-tranca__arte { box-shadow: 0 0 0 3.5px var(--cad-hot), 4px 5px 0 3.5px rgba(209, 24, 87, .25); }
html.pele-caderno .st-tranca__mundos li { position: relative; }
html.pele-caderno .st-tranca__n {
  position: absolute; top: -6px; left: calc(50% + 24px); z-index: 2; margin: 0; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font: 400 17px/1 var(--cad-disp); letter-spacing: 0; color: var(--cad-paper); background: var(--cad-ink);
  box-shadow: 0 0 0 2.5px var(--cad-paper);
}
html.pele-caderno .st-tranca__n i { display: none; }
html.pele-caderno .st-tranca__mundos li:first-child .st-tranca__n { background: var(--cad-pink); }
html.pele-caderno .st-tranca__nome { margin-top: 8px; font: 400 20px/1.05 var(--cad-disp); letter-spacing: .01em; text-transform: none; }
html.pele-caderno .st-tranca__senha { margin-top: 18px; }

/* os modos livres: o ícone ganha tinta e tamanho */
html.pele-caderno .st-modo__ic { box-shadow: 0 0 0 2.5px var(--cad-ink), 3px 4px 0 2.5px rgba(var(--cad-tinta-rgb), .16); }
html.pele-caderno .st-modo__ic svg { stroke-width: 2.8px; }
html.pele-caderno .st-modo__nome { font-size: 22px; }

/* O MAPA: menos texto em cima; o mundo e as fases falam por si */
html.pele-caderno .cp-map__x, html.pele-caderno .cp-map__aviso { display: none; }
/* cada quadro diz "fase N" com um carimbo grande de número */
html.pele-caderno .cp-fase__topo { margin: 6px; padding: 6px 12px 6px 6px; gap: 8px; box-shadow: 2px 2px 0 var(--cad-ink), inset 0 0 0 2px var(--cad-ink); }
html.pele-caderno .cp-fase__topo .cp-cube { width: 36px; height: 36px; font: 400 16px/1 var(--cad-disp); }
html.pele-caderno .cp-fase__nome, html.pele-caderno.st-mural .cp-fase__nome { font: 400 17px/1.05 var(--cad-disp); letter-spacing: .01em; text-transform: none; }
/* a arte com tinta de verdade */
html.pele-caderno .cp-fase__art svg path { stroke-width: 3.4px; }
/* FECHADA: a arte segue visível (clarinha, sem sumir) e o cadeado fica no meio, grande */
html.pele-caderno .cp-fase--fechada, html.pele-caderno.st-mural .cp-fase--fechada {
  background: var(--cad-white) repeating-linear-gradient(-45deg, rgba(var(--cad-tinta-rgb), .06) 0 2px, transparent 2px 9px);
  box-shadow: inset 0 0 0 3px rgba(var(--cad-tinta-rgb), .55);
}
html.pele-caderno .cp-fase--fechada .cp-fase__art, html.pele-caderno.st-mural .cp-fase--fechada .cp-fase__art { opacity: .5; filter: grayscale(1); }
html.pele-caderno .cp-fase--fechada .cp-fase__topo { opacity: .75; }
html.pele-caderno .cp-fase--fechada .cp-fase__pe { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -30%); margin: 0; padding: 8px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(var(--cad-tinta-rgb), .55); }
html.pele-caderno .cp-fase--fechada .cp-fase__trava svg { width: 22px; height: 22px; }
/* A DA VEZ: moldura rosa grossa, sobe da página, e o adesivo "comece aqui" no canto */
html.pele-caderno .cp-fase--agora, html.pele-caderno.st-mural .cp-fase--agora {
  z-index: 2; overflow: visible; transform: rotate(-.8deg) translateY(-3px);
  box-shadow: inset 0 0 0 5px var(--cad-hot), 5px 6px 0 rgba(209, 24, 87, .28);
}
html.pele-caderno .cp-fase--agora .cp-fase__pe { position: absolute; right: -10px; top: -14px; margin: 0; padding: 0; background: none; box-shadow: none; }
html.pele-caderno .cp-fase__agora, html.pele-caderno.st-mural .cp-fase__agora {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 6px 12px; border-radius: 12px 14px 12px 4px;
  font: 400 19px/1 var(--cad-disp); letter-spacing: .02em; text-transform: uppercase; color: #fff;
  background: var(--cad-pink); box-shadow: 0 0 0 2px var(--cad-ink), 3px 4px 0 2px var(--cad-pink-lip); transform: rotate(4deg);
  animation: cadAgora 1.6s ease-in-out infinite;
}
html.pele-caderno .cp-fase__agora::before { content: ''; width: 0; height: 0; border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
@keyframes cadAgora { 0%, 100% { transform: rotate(4deg) scale(1); } 50% { transform: rotate(4deg) scale(1.06); } }
/* feita: o carimbo da fase fica cheio de tinta */
html.pele-caderno .cp-fase--feita .cp-cube { color: var(--cad-paper); }
html.pele-caderno .cp-fase--feita .cp-cube::after { background: var(--cad-ink); }
@media (prefers-reduced-motion: reduce) { html.pele-caderno .cp-fase__agora { animation: none; } }
@media (max-width: 560px) {
  html.pele-caderno .st-tranca__arte { width: 64px; height: 64px; }
  html.pele-caderno .st-tranca__arte svg { width: 46px; height: 46px; }
  html.pele-caderno .st-tranca__mundos::before { top: 32px; }
  html.pele-caderno .st-tranca__n { width: 24px; height: 24px; font-size: 14px; left: calc(50% + 16px); }
  html.pele-caderno .st-tranca__nome { font-size: 15px; }
  html.pele-caderno .cp-fase__nome, html.pele-caderno.st-mural .cp-fase__nome { font-size: 13.5px; }
  html.pele-caderno .cp-fase__topo { margin: 4px; padding: 4px 8px 4px 4px; gap: 5px; max-width: calc(100% - 8px); }
  html.pele-caderno .cp-fase__topo .cp-cube { width: 26px; height: 26px; font-size: 12.5px; }
  html.pele-caderno .cp-fase__agora, html.pele-caderno.st-mural .cp-fase__agora { font-size: 16px; padding: 6px 11px 5px 10px; }
}

/* ============================================================
   12. O RESTO DO SKETCH no caderno (pedido do Lucas, 26/set: "pode
   fazer" o Caderno no treino com foto, nas janelas, na galeria e no
   online). As mesmas peças da trilha: papel com contorno de caneta,
   fita, letra de mão, sombra dura, e o rosa só no adesivo da próxima
   ação (Iniciar, Concluí, Próximo, Criar sala). O online muda só de
   pele (as cores vêm das mesmas variáveis; nada do jogo muda).
   O botão de tema troca pro caderno de noite (seção 13).
   ============================================================ */
html.pele-caderno {
  color-scheme: light;
  --cream: #F6EFDE; --cream-soft: #FAF5E8; --paper: #FFFDF4;
  --ink: #2B2520; --ink-soft: #5A5248; --muted: #6E634F;
  --border: #DDD2B8; --border-soft: #E9E0CC; --pink-soft: #FFE7EE;
  --shadow-sm: 0 1px 0 rgba(var(--cad-sombra-rgb), .05), 0 5px 14px rgba(var(--cad-sombra-rgb), .12);
  --shadow-md: 0 6px 16px rgba(var(--cad-sombra-rgb), .14), 0 14px 34px rgba(var(--cad-sombra-rgb), .10);
}
/* as telas deixam aparecer o caderno do fundo */
html.pele-caderno .screen.grid-paper { background: transparent; }
html.pele-caderno .overlay, html.pele-caderno.dark .overlay { background: rgba(var(--cad-tinta-rgb), .42); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }

/* botões: o da próxima ação é o adesivo rosa; o resto é papel com contorno de caneta */
html.pele-caderno .btn-p, html.pele-caderno .btn-start, html.pele-caderno .tbtn.pink {
  color: #fff; background: var(--cad-pink); border: 0; filter: none;
  border-radius: 12px 14px 12px 15px / 14px 12px 14px 12px;
  box-shadow: 0 0 0 1.8px var(--cad-ink), 3px 4px 0 1.8px var(--cad-pink-lip);
  font-family: var(--cad-disp); font-weight: 400; letter-spacing: .04em; text-shadow: none;
  transform: rotate(-.4deg);
}
html.pele-caderno .btn-p:hover, html.pele-caderno .btn-start:hover { filter: none; transform: rotate(-.4deg) translateY(-2px); box-shadow: 0 0 0 1.8px var(--cad-ink), 4px 6px 0 1.8px var(--cad-pink-lip); }
html.pele-caderno .btn-p:active, html.pele-caderno .btn-start:active { transform: rotate(-.4deg) translateY(2px); box-shadow: 0 0 0 1.8px var(--cad-ink), 1px 1px 0 1.8px var(--cad-pink-lip); }
html.pele-caderno .btn-s {
  color: var(--cad-ink); background: var(--cad-paper); border: 0;
  border-radius: 12px 14px 12px 15px / 14px 12px 14px 12px;
  box-shadow: 0 0 0 1.6px var(--cad-ink), 2px 3px 0 1.6px rgba(var(--cad-tinta-rgb), .16);
}
html.pele-caderno .btn-s:hover { transform: translateY(-1px); box-shadow: 0 0 0 1.6px var(--cad-ink), 3px 4px 0 1.6px rgba(var(--cad-tinta-rgb), .2); }
html.pele-caderno .btn-s.danger, html.pele-caderno .game-action.danger { color: var(--cad-perigo); }
html.pele-caderno .tbtn, html.pele-caderno .mp-back {
  color: var(--cad-ink); background: var(--cad-white); border: 0;
  border-radius: 11px 13px 10px 14px / 13px 10px 14px 11px;
  box-shadow: 0 0 0 1.6px var(--cad-ink), 2px 3px 0 1.6px rgba(var(--cad-tinta-rgb), .16);
}
html.pele-caderno .tbtn:hover, html.pele-caderno .mp-back:hover { transform: translateY(-1px); }

/* folhas grandes: papel solto com a borda do caderno; a de ajustes vem presa com fita */
html.pele-caderno .card {
  background: var(--cad-paper); border: 0;
  border-radius: 10px 16px 12px 18px / 16px 10px 18px 12px;
  box-shadow: 0 0 0 1px var(--cad-edge), var(--cad-shadow);
}
html.pele-caderno .settings-card { box-shadow: 0 0 0 1px var(--cad-edge), var(--cad-shadow-md); }
html.pele-caderno .settings-card::before {
  content: ''; position: absolute; left: 50%; top: -12px; width: 118px; height: 26px; transform: translateX(-50%) rotate(-2deg); pointer-events: none;
  background: var(--cad-tape-y); clip-path: polygon(2% 0, 98% 4%, 100% 12%, 97% 100%, 3% 96%, 0 88%, 1% 10%);
}
html.pele-caderno .settings-title { color: var(--cad-ink); text-shadow: none; transform: rotate(-1deg); }
/* o risco à mão no lugar da linha reta */
html.pele-caderno .settings-divider {
  height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8C30 2 55 11 85 6S150 3 198 7' fill='none' stroke='%232B2520' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  width: 62%;
}
html.pele-caderno .settings-divider-thin { opacity: .35; }
html.pele-caderno .settings-label { font-family: var(--cad-hand); font-size: 1.12rem; font-weight: 700; letter-spacing: .06em; color: var(--cad-ink); }
html.pele-caderno .settings-check input[type="checkbox"] { accent-color: var(--cad-ink); }

/* as opções: fichas com contorno; a escolhida ganha tinta forte e marca-texto amarelo (o rosa fica pro Iniciar) */
html.pele-caderno .radio-card {
  background: var(--cad-white); border: 0;
  border-radius: 12px 16px 13px 17px / 16px 12px 17px 13px;
  box-shadow: 0 0 0 1.6px rgba(var(--cad-tinta-rgb), .4);
}
html.pele-caderno .radio-card:hover:not(.sel) { box-shadow: 0 0 0 1.6px var(--cad-ink); }
html.pele-caderno .radio-card.sel { background: var(--cad-marca); box-shadow: 0 0 0 2.4px var(--cad-ink), 3px 4px 0 2.4px rgba(var(--cad-tinta-rgb), .14); }
html.pele-caderno .radio-card-icon, html.pele-caderno .radio-card.sel .radio-card-icon { color: var(--cad-ink); }
html.pele-caderno .radio-dot { border-color: rgba(var(--cad-tinta-rgb), .5); background: var(--cad-white); }
html.pele-caderno .radio-card.sel .radio-dot { border-color: var(--cad-ink); }
html.pele-caderno .radio-card.sel .radio-dot::after { background: var(--cad-ink); }
html.pele-caderno .time-row { background: var(--cad-white); border: 0; box-shadow: 0 0 0 1.6px var(--cad-ink); border-radius: 12px 14px 11px 15px / 14px 11px 15px 12px; }
html.pele-caderno .time-row:focus-within { box-shadow: 0 0 0 2.4px var(--cad-ink); }
html.pele-caderno .time-row .time-icon { color: var(--cad-ink); }
html.pele-caderno .upload-zone { background: var(--cad-white); border-color: rgba(var(--cad-tinta-rgb), .45); color: var(--cad-ink-soft); }
html.pele-caderno .upload-zone:hover, html.pele-caderno .upload-zone.has-files { border-color: var(--cad-ink); color: var(--cad-ink); }
html.pele-caderno .btn-start { font-size: 1.8rem; margin: .9rem 0 1rem; }

/* o TREINO: a barra de cima em botões de papel, o relógio numa etiqueta, a foto presa com fita */
html.pele-caderno .timer-big {
  color: var(--cad-ink); background: var(--cad-white); border: 0;
  border-radius: 16px 20px 15px 22px / 20px 15px 22px 16px;
  box-shadow: 0 0 0 2px var(--cad-ink), 3px 4px 0 2px rgba(var(--cad-tinta-rgb), .16);
}
html.pele-caderno .timer-big.warn { color: var(--cad-laranja); }
html.pele-caderno .timer-big.critical { color: var(--cad-pink); }
html.pele-caderno .game-action, html.pele-caderno .dock-btn {
  color: var(--cad-ink); background: var(--cad-white); border: 0;
  box-shadow: 0 0 0 1.6px var(--cad-ink), 2px 3px 0 1.6px rgba(var(--cad-tinta-rgb), .16);
}
html.pele-caderno .game-action:hover, html.pele-caderno .dock-btn:hover { border: 0; color: var(--cad-ink); transform: translateY(-2px); }
html.pele-caderno .game-action.danger:hover { background: var(--cad-perigo-bg); }
/* Concluí é a próxima ação: o adesivo rosa */
html.pele-caderno .game-action.done { color: #fff; background: var(--cad-pink); box-shadow: 0 0 0 1.8px var(--cad-ink), 2px 3px 0 1.8px var(--cad-pink-lip); }
html.pele-caderno .game-action.done:hover { color: #fff; background: var(--cad-pink); }
/* ligado/desligado (salvar sozinho, quadro, moldura): ligado é tinta cheia, não rosa */
html.pele-caderno .dock-btn.active { color: var(--cad-paper); background: var(--cad-ink); box-shadow: 0 0 0 1.6px var(--cad-ink), 2px 3px 0 1.6px rgba(var(--cad-tinta-rgb), .2); }
html.pele-caderno .ref-frame, html.pele-caderno #canvas-col {
  background: var(--cad-white); border: 0;
  border-radius: 6px 10px 8px 12px / 10px 6px 12px 8px;
  box-shadow: 0 0 0 1px var(--cad-edge), var(--cad-shadow);
}
html.pele-caderno .ref-frame::before {
  content: ''; position: absolute; left: -14px; top: 10px; width: 78px; height: 22px; z-index: 5; transform: rotate(-38deg); pointer-events: none;
  background: var(--cad-tape-y); clip-path: polygon(2% 0, 98% 4%, 100% 12%, 97% 100%, 3% 96%, 0 88%, 1% 10%);
}
/* o lembrete do objetivo vira balão de fala (lê bem em cima de qualquer foto) */
html.pele-caderno .ref-hint {
  color: var(--cad-ink); background: var(--cad-white); backdrop-filter: none; -webkit-backdrop-filter: none;
  border-radius: 22px / 18px; box-shadow: 0 0 0 2px var(--cad-ink), 3px 4px 0 2px rgba(var(--cad-tinta-rgb), .16);
}
html.pele-caderno #game-screen[data-canvas="on"] #game-divider { background: transparent; border-color: transparent; }
html.pele-caderno #game-screen[data-canvas="on"] #game-divider::after { background: var(--cad-ink); opacity: .45; }
html.pele-caderno #game-screen[data-canvas="on"] #game-divider:hover { background: rgba(var(--cad-tinta-rgb), .05); }
html.pele-caderno #game-screen[data-canvas="on"] #game-divider:hover::after { opacity: .8; }

/* as janelas: folha solta com uma tira de fita no alto (dentro da folha: a janela rola) */
html.pele-caderno .modal-box {
  background: var(--cad-paper) linear-gradient(var(--cad-tape-y), var(--cad-tape-y)) 50% 0 / 118px 12px no-repeat;
  border-radius: 10px 16px 12px 18px / 16px 10px 18px 12px;
  box-shadow: 0 0 0 1px var(--cad-edge), var(--cad-shadow-md);
}
html.pele-caderno .modal-box h2 { color: var(--cad-ink); text-shadow: none; }
html.pele-caderno .fmt-card {
  background: var(--cad-white); border: 0;
  border-radius: 12px 16px 13px 17px / 16px 12px 17px 13px;
  box-shadow: 0 0 0 1.6px rgba(var(--cad-tinta-rgb), .4), var(--cad-shadow);
  transform: rotate(-.6deg); transition: transform .15s, box-shadow .15s;
}
html.pele-caderno .fmt-card + .fmt-card { transform: rotate(.6deg); }
html.pele-caderno .fmt-card:hover { transform: translateY(-3px) rotate(0); box-shadow: 0 0 0 2.4px var(--cad-ink), 4px 5px 0 2.4px rgba(var(--cad-tinta-rgb), .16); }

/* a GALERIA: cada desenho vira uma polaroide colada torta */
html.pele-caderno #gallery-grid { gap: 1.2rem !important; padding-top: 1.6rem !important; }
html.pele-caderno .gal-img {
  border: 0; border-radius: 3px; padding: 7px 7px 22px; background: var(--cad-white);
  box-shadow: 0 0 0 1px var(--cad-edge), var(--cad-shadow); transform: rotate(-1.2deg);
}
html.pele-caderno #gallery-grid > div:nth-child(even) .gal-img { transform: rotate(1deg); }
html.pele-caderno #gallery-grid > div:nth-child(3n) .gal-img { transform: rotate(-.4deg); }
html.pele-caderno .gal-img:hover { border: 0; transform: translateY(-3px) rotate(0); box-shadow: 0 0 0 1px var(--cad-edge), var(--cad-shadow-md); }

/* o ONLINE: o mesmo papel; Criar sala é o adesivo rosa, Entrar é tinta (uma ação rosa por vez) */
html.pele-caderno .mp-top .mp-title, html.pele-caderno .mp-card h3 { font-family: var(--cad-disp); font-weight: 400; letter-spacing: .01em; color: var(--cad-ink); }
html.pele-caderno .mp-code { font-family: var(--cad-disp); font-weight: 400; color: var(--cad-ink); }
html.pele-caderno #mp-join { background: var(--cad-ink); box-shadow: 0 0 0 1.8px var(--cad-ink), 3px 4px 0 1.8px rgba(var(--cad-tinta-rgb), .3); }
html.pele-caderno #mp-join:hover { box-shadow: 0 0 0 1.8px var(--cad-ink), 4px 6px 0 1.8px rgba(var(--cad-tinta-rgb), .3); }
html.pele-caderno .mp-ident-bar, html.pele-caderno .mp-ident-editor, html.pele-caderno .mp-player {
  background: var(--cad-white); border: 0; box-shadow: 0 0 0 1px var(--cad-edge), var(--cad-shadow);
}
html.pele-caderno .mp-ident-edit, html.pele-caderno .mp-refsrc-chip, html.pele-caderno .mp-lock-btn { border-color: rgba(var(--cad-tinta-rgb), .45); color: var(--cad-ink); }
html.pele-caderno .mp-screen input[type="text"], html.pele-caderno .mp-screen input:not([type]) { background: var(--cad-white); border: 0; box-shadow: 0 0 0 1.6px var(--cad-ink); }

@media (max-width: 760px) {
  html.pele-caderno .btn-p, html.pele-caderno .btn-start, html.pele-caderno .settings-title { transform: none; }
  html.pele-caderno .gal-img, html.pele-caderno #gallery-grid > div:nth-child(even) .gal-img { transform: rotate(-.6deg); }
}
@media (prefers-reduced-motion: reduce) {
  html.pele-caderno .gal-img:hover, html.pele-caderno .fmt-card:hover { transform: none; }
}

/* ============================================================
   13. NOITE: o caderno no tema escuro, ainda mangá (pedido do Lucas,
   26/set: "um tema escuro que ainda pareça de mangá"). É a página de
   mangá em cena de noite: papel preto com retícula (os pontinhos que
   mais fortes nas bordas), a tinta vira branca, e três coisas NÃO
   escurecem, porque no mangá elas são sempre brancas:
     · os balões de fala e a caixa de narração (Missão, lembrete, fatos);
     · o papel onde ela desenha (o traço de grafite precisa aparecer);
     · os desenhos colados (fotos, polaroides, o tosco de exemplo).
   A arte das fases vira negativo (linha branca no preto), e o rosa da
   próxima ação acende com brilho, que no escuro é o que chama o olho.
   Liga com html.dark (o botão de tema, a mesma chave aura_theme do Kit).
   ============================================================ */
html.pele-caderno.dark {
  color-scheme: dark;
  --cad-cream: #131011; --cad-paper: #1C1818; --cad-white: #231E1E;
  --cad-ink: #F3ECDF; --cad-ink-soft: #CBC1B1; --cad-muted: #9A8F7E;
  --cad-edge: rgba(243, 236, 223, .2);
  --cad-pink: #D11857; --cad-pink-lip: #6E0C30; --cad-hot: #FF2D6E;
  --cad-tape-y: rgba(255, 204, 86, .9); --cad-tape-w: rgba(243, 236, 223, .2); --cad-tape-k: rgba(186, 144, 96, .9); --cad-tape-p: rgba(240, 92, 146, .92);
  --cad-tinta-rgb: 243, 236, 223; --cad-sombra-rgb: 0, 0, 0; --cad-creme-rgb: 19, 16, 17;
  --cad-shadow: 0 1px 0 rgba(0, 0, 0, .4), 0 8px 20px rgba(0, 0, 0, .45);
  --cad-shadow-md: 0 8px 20px rgba(0, 0, 0, .5), 0 18px 40px rgba(0, 0, 0, .4);
  --cad-hard: 2px 3px 0 rgba(243, 236, 223, .16);
  --cad-grade: linear-gradient(rgba(243, 236, 223, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(243, 236, 223, .05) 1px, transparent 1px);
  --cad-estrela-off: #3A3331; --cad-marca: rgba(255, 204, 86, .14); --cad-marca-2: rgba(255, 204, 86, .14); --cad-ajuda-bg: rgba(127, 184, 230, .12); --cad-mesa: #1A1617;
  --cad-ouro: #F0BE55; --cad-ouro-2: #F0BE55; --cad-verde: #5BD08A; --cad-laranja: #FF9A4D; --cad-perigo: #FF7A6B; --cad-perigo-bg: rgba(255, 122, 107, .12);
  /* os tokens do molde e do Sketch viram noite */
  --cp-edge: #F3ECDF; --cp-night: #131011; --cp-slab: #1C1818; --cp-slab-hi: #231E1E; --cp-slab-lo: #181415; --cp-slab-top: #1C1818;
  --cp-text: #F3ECDF; --cp-text-dim: #9A8F7E; --cp-graphite: #F3ECDF;
  --cp-mat-1: #231E1E; --cp-mat-2: #1C1818; --cp-mat-3: #1C1818; --cp-mat-4: #F3ECDF;
  --cp-stone-1: #5A514C; --cp-stone-2: #3A3331; --cp-stone-3: #2E2828; --cp-stone-4: #6E655E;
  --st-papel: #1C1818; --st-papel-2: #181415; --st-grafite: #F3ECDF;
  --cream: #131011; --cream-soft: #1A1617; --paper: #1C1818;
  --ink: #F3ECDF; --ink-soft: #CBC1B1; --muted: #9A8F7E;
  --border: #3A3331; --border-soft: #2A2425; --pink-soft: #3A1822;
  --shadow-sm: 0 1px 0 rgba(0, 0, 0, .4), 0 6px 16px rgba(0, 0, 0, .4);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, .5), 0 18px 40px rgba(0, 0, 0, .4);
}
html.pele-caderno.dark #main-screen {
  --cream: #131011; --cream-soft: #1A1617; --paper: #1C1818;
  --ink: #F3ECDF; --ink-soft: #CBC1B1; --muted: #9A8F7E;
  --border: #3A3331; --border-soft: #2A2425; --pink-soft: #3A1822;
}

/* a página: papel preto com retícula; os pontos somem no meio e apertam nas bordas */
html.pele-caderno.dark body, html.pele-caderno.dark .st-tela, html.pele-caderno.dark .st-play, html.pele-caderno.dark .st-folha {
  background-color: #131011;
  background-image:
    radial-gradient(ellipse 78% 62% at 50% 36%, #131011 34%, rgba(19, 16, 17, 0) 100%),
    radial-gradient(circle at center, rgba(243, 236, 223, .17) 0 1.25px, transparent 1.85px),
    var(--cad-grao);
  background-size: 100% 100%, 8px 8px, 160px 160px;
  background-position: 0 0, 0 0, 0 0;
}
html.pele-caderno.dark .st-escolha, html.pele-caderno.dark .st-refs { background-color: rgba(19, 16, 17, .97); background-image: radial-gradient(circle at center, rgba(243, 236, 223, .1) 0 1.2px, transparent 1.8px); background-size: 8px 8px; }

html.pele-caderno.dark #main-screen .title-sub { color: var(--cad-hot); text-shadow: 0 0 22px rgba(255, 45, 110, .55); }

/* a arte das fases e dos mundos vira NEGATIVO: linha branca no preto (o rosa continua rosa) */
html.pele-caderno.dark .cp-fase__art svg, html.pele-caderno.dark .st-tranca__arte svg, html.pele-caderno.dark .cp-escudo svg,
html.pele-caderno.dark .st-carta__art svg, html.pele-caderno.dark .cp-hab svg { filter: invert(1) hue-rotate(180deg); }
html.pele-caderno.dark .cp-fase--fechada .cp-fase__art, html.pele-caderno.dark.st-mural .cp-fase--fechada .cp-fase__art { filter: grayscale(1) brightness(.8); }
/* a página do mapa: calha preta, quadros com moldura branca */
html.pele-caderno.dark .cp-fases, html.pele-caderno.dark.st-mural .cp-fases { background: #0D0B0B; box-shadow: 0 0 0 1px var(--cad-edge); }
html.pele-caderno.dark .cp-mundo { box-shadow: 0 0 0 1px var(--cad-edge), var(--cad-shadow-md); }

/* o que continua BRANCO: os desenhos colados (exemplo tosco, polaroides, fotos) */
html.pele-caderno.dark .st-pedido__ex, html.pele-caderno.dark .cp-ficha__art, html.pele-caderno.dark .cp-dica__art {
  background: #FFFDF4; border-radius: 4px; padding: 8px; color: #2B2520;
}
html.pele-caderno.dark .st-pedido__ex { border-top: 0; margin-top: 14px; }
html.pele-caderno.dark .st-pedido__ex span { color: #1F6FB5; }
html.pele-caderno.dark .gal-img { background: #F3ECDF; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 8px 20px rgba(0, 0, 0, .5); }
html.pele-caderno.dark .st-olhar img, html.pele-caderno.dark .st-pedido__foto { border-color: #F3ECDF; background: #F3ECDF; }

/* os BALÕES e a caixa de narração ficam brancos com tinta preta, como no mangá */
html.pele-caderno.dark .vf-hint, html.pele-caderno.dark .vf.is-missao-off .vf-dica-mini, html.pele-caderno.dark .vf.is-dica-min .vf-dica-mini,
html.pele-caderno.dark .ref-hint, html.pele-caderno.dark .st-revela, html.pele-caderno.dark .st-aviso {
  color: #2B2520; background: #FFFDF4;
}
html.pele-caderno.dark .vf-hint { box-shadow: 0 0 0 2.5px #2B2520, 0 10px 26px rgba(0, 0, 0, .5); }
html.pele-caderno.dark .vf-hint::before { color: #FFFDF4; background: #2B2520; }
html.pele-caderno.dark .vf-hint::after { background: #FFFDF4; box-shadow: 2.5px 2.5px 0 #2B2520; }
html.pele-caderno.dark .vf-hint__x { color: #2B2520; background: #FFFDF4; box-shadow: 0 0 0 1.6px #2B2520; }
html.pele-caderno.dark .vf.is-missao-off .vf-dica-mini, html.pele-caderno.dark .vf.is-dica-min .vf-dica-mini { box-shadow: 0 0 0 2px #2B2520, 0 8px 18px rgba(0, 0, 0, .45); }
html.pele-caderno.dark .ref-hint { box-shadow: 0 0 0 2px #2B2520, 0 8px 18px rgba(0, 0, 0, .45); }
html.pele-caderno.dark .st-revela { box-shadow: 0 0 0 2.5px #2B2520, 0 0 0 5px #FFFDF4, 0 14px 30px rgba(0, 0, 0, .55); }
html.pele-caderno.dark .st-aviso { box-shadow: 0 0 0 1.6px #2B2520, 0 10px 22px rgba(0, 0, 0, .5); }

/* a passagem: quadro branco estourando do preto, linhas de velocidade brancas */
html.pele-caderno.dark .st-flash { background-color: rgba(10, 8, 9, .93); }
html.pele-caderno.dark .st-flash::before {
  background-image:
    repeating-conic-gradient(from 3deg at 50% 50%, rgba(243, 236, 223, .55) 0deg .35deg, transparent .35deg 4.7deg),
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(243, 236, 223, .3) 0deg .6deg, transparent .6deg 7.3deg);
}
html.pele-caderno.dark .st-flash__papel { background: #FFFDF4; color: #2B2520; box-shadow: 0 0 0 3px #2B2520, 0 0 0 6px #FFFDF4, 0 20px 50px rgba(0, 0, 0, .6); }
html.pele-caderno.dark .st-flash__t { color: #2B2520; }
html.pele-caderno.dark .st-flash__n { color: #6E634F; }
html.pele-caderno.dark .st-flash__x { color: #5A5248; }
html.pele-caderno.dark .st-flash__tosco { border-top-color: rgba(43, 37, 32, .2); }
html.pele-caderno.dark .st-flash .cp-btn:not(.cp-btn--go), html.pele-caderno.dark .st-flash .st-link { color: #2B2520; }
/* a onomatopeia do fim: letra preta com contorno branco e volume rosa */
html.pele-caderno.dark .st-contagem { color: #131011; -webkit-text-stroke: 4px #F3ECDF; text-shadow: 6px 6px 0 var(--cad-hot), 0 0 30px rgba(255, 45, 110, .5); }

/* a mesa: o papel de desenhar fica branco em cima da mesa escura pontilhada */
html.pele-caderno.dark .vf-board {
  background-color: #1A1617; background-image: radial-gradient(circle at center, rgba(243, 236, 223, .09) 0 1.1px, transparent 1.7px);
  background-size: 9px 9px; box-shadow: 0 0 0 1px var(--cad-edge), var(--cad-shadow-md);
}
html.pele-caderno.dark .st-tempo { background: rgba(243, 236, 223, .1); }
html.pele-caderno.dark .st-tempo > i { background: rgba(243, 236, 223, .7); }

/* o rosa da próxima ação acende no escuro */
html.pele-caderno.dark .cp-btn--go, html.pele-caderno.dark .btn-p, html.pele-caderno.dark .btn-start, html.pele-caderno.dark .game-action.done,
html.pele-caderno.dark.st-mural:not(.st-aberta) #btn-play.st-modo {
  box-shadow: 0 0 0 1.8px #F3ECDF, 3px 4px 0 1.8px var(--cad-pink-lip), 0 0 12px rgba(255, 45, 110, .22);
}
html.pele-caderno.dark .cp-fase--agora, html.pele-caderno.dark.st-mural .cp-fase--agora { box-shadow: inset 0 0 0 4px var(--cad-hot), 0 0 14px rgba(255, 45, 110, .22); }
html.pele-caderno.dark .cp-fase__agora, html.pele-caderno.dark.st-mural .cp-fase__agora { box-shadow: 0 0 0 2px #F3ECDF, 3px 4px 0 2px var(--cad-pink-lip); }
html.pele-caderno.dark .st-tranca__mundos li:first-child .st-tranca__arte { box-shadow: 0 0 0 3px var(--cad-hot), 0 0 12px rgba(255, 45, 110, .25); }
html.pele-caderno.dark .cp-ribbon { filter: drop-shadow(0 0 14px rgba(255, 45, 110, .35)); }
html.pele-caderno.dark.st-mural:not(.st-aberta) #btn-play .st-modo__ic { box-shadow: 0 0 0 2px #F3ECDF; }

/* detalhes que eram tinta escura desenhada */
html.pele-caderno.dark .settings-divider {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8C30 2 55 11 85 6S150 3 198 7' fill='none' stroke='%23F3ECDF' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
html.pele-caderno.dark .st-item input:checked + .st-item__caixa { color: var(--cad-hot); }
html.pele-caderno.dark .st-chip.is-sel { color: #131011; }
html.pele-caderno.dark .cp-premio .cp-premio__ic { color: #2B2520 !important; }
html.pele-caderno.dark .st-link--escuro { box-shadow: 0 0 0 1.5px var(--cad-ink); }
html.pele-caderno.dark .st-ajuda { border-color: rgba(127, 184, 230, .6); color: var(--cad-ink); }
html.pele-caderno.dark .st-pedido {
  background-image: linear-gradient(rgba(255, 45, 110, .45), rgba(255, 45, 110, .45)), repeating-linear-gradient(transparent 0 25px, rgba(243, 236, 223, .07) 25px 26.5px);
}
html.pele-caderno.dark .overlay, html.pele-caderno.dark .cp-ov { background: rgba(0, 0, 0, .62); }
/* o botão de tema volta pra home (a cortiça escondia; o caderno tem noite) */
html.pele-caderno.st-mural #btn-theme { display: flex; }
/* os mundos do cartão trancado também em negativo (a regra do claro tirava o filtro deles) */
html.pele-caderno.dark .st-tranca__mundos li .st-tranca__arte svg { filter: invert(1) hue-rotate(180deg); opacity: 1; }
/* Entrar (online): tinta clara com letra escura */
html.pele-caderno.dark #mp-join { color: #131011; background: #F3ECDF; box-shadow: 0 0 0 1.8px #F3ECDF, 3px 4px 0 1.8px rgba(243, 236, 223, .25); }
/* o que é marcador amarelo (relógio no fim, contador, prova, habilidades) leva letra escura */
html.pele-caderno.dark .st-relogio.is-pouco > b, html.pele-caderno.dark .cp-prova, html.pele-caderno.dark .vf-conta, html.pele-caderno.dark .st-ganhou, html.pele-caderno.dark .cp-btn--gold { color: #2B2520; }
html.pele-caderno.dark .vf-conta, html.pele-caderno.dark .cp-prova, html.pele-caderno.dark .st-ganhou { box-shadow: 0 0 0 1.5px #2B2520; }

/* ============================================================
   14. A HOME NO LUGAR (os dois temas; o Lucas, 26/set: "mal posicionado").
   Em tela grande o conteúdo ficava grudado em cima com meia tela vazia
   embaixo, e a coluna dos modos livres começava 39 px abaixo da trilha.
   ============================================================ */
/* centra na altura quando sobra espaço; quando não sobra, os espaçadores somem e a página rola */
html.pele-caderno #main-screen > .flex-grow::before, html.pele-caderno #main-screen > .flex-grow::after { content: ''; flex: 1 1 0; min-height: 0; }
@media (min-width: 901px) {
  /* as duas colunas começam na mesma linha; os títulos delas ficam por cima, fora da conta */
  html.pele-caderno.st-aberta .st-home-grid { margin-top: 58px; }
  html.pele-caderno.st-aberta .st-livres { position: relative; }
  html.pele-caderno.st-aberta .st-livres-t { position: absolute; left: 4px; bottom: 100%; margin: 0 0 12px; }
}

/* ============================================================
   15. NOITE COM CORAGEM (o Lucas, 26/set: "gostei da proposta, mas tá
   meio tímido"). A retícula vira retícula de verdade (os pontos crescem
   nos cantos, como a de mangá), o título ganha volume, as linhas de
   impacto aparecem, e cartão vira QUADRO: borda branca grossa, canto
   reto, sombra dura. As legendas são caixa de narração (branca, letra
   preta), como no mangá.
   ============================================================ */
/* a retícula: bolinhas borradas x um mapa de claro/escuro, e o contraste corta em pontos de tamanho variável */
html.pele-caderno.dark body { background-image: var(--cad-grao); background-size: 160px 160px; }
html.pele-caderno.dark body::before {
  content: ''; position: fixed; inset: -12px; z-index: 0; pointer-events: none;
  background-color: #000;
  background-image:
    radial-gradient(closest-side, #fff, #000),
    radial-gradient(ellipse 58% 62% at 0% 100%, #fff 0, #000 100%),
    radial-gradient(ellipse 52% 48% at 100% 0%, #fff 0, #000 100%),
    radial-gradient(ellipse 30% 26% at 100% 100%, #aaa 0, #000 100%);
  background-size: 12px 12px, 100% 100%, 100% 100%, 100% 100%;
  background-blend-mode: multiply, lighten, lighten, normal;
  filter: contrast(24);
  mix-blend-mode: screen; opacity: .2;
}
/* as telas da trilha deixam a retícula aparecer */
html.pele-caderno.dark .st-tela, html.pele-caderno.dark .st-play { background: transparent; }
html.pele-caderno.dark .st-folha { background-image: radial-gradient(circle at center, rgba(243, 236, 223, .08) 0 1.2px, transparent 1.8px), var(--cad-grao); background-size: 9px 9px, 160px 160px; }

/* o título: letra branca com volume rosa; o "aura" acende */
html.pele-caderno.dark #main-screen .title-sub { color: var(--cad-hot); }
html.pele-caderno.dark #main-screen .title-main { color: #F3ECDF !important; text-shadow: 3px 3px 0 var(--cad-pink) !important; }
html.pele-caderno.dark #main-screen .title-sub { text-shadow: 0 0 16px rgba(255, 45, 110, .4); }
/* o lema é uma caixa de narração */
html.pele-caderno.dark #main-screen .f-hand.mt-10 {
  color: #131011 !important; background: #F3ECDF; padding: 4px 12px 2px; transform: rotate(-1.5deg);
  box-shadow: 3px 4px 0 rgba(0, 0, 0, .6);
}

/* os cartões viram QUADROS de mangá */
html.pele-caderno.dark .st-story, html.pele-caderno.dark .cp-mundo, html.pele-caderno.dark .cp-box, html.pele-caderno.dark .modal-box, html.pele-caderno.dark .card {
  border-radius: 3px; background-color: #171314;
  box-shadow: 0 0 0 2px rgba(243, 236, 223, .85), 5px 6px 0 2px rgba(0, 0, 0, .6);
}
html.pele-caderno.dark .st-modo {
  border-radius: 3px; background-color: #171314; background-image: none;
  box-shadow: 0 0 0 2px rgba(243, 236, 223, .85), 4px 5px 0 2px rgba(0, 0, 0, .6);
}
@media (hover: hover) { html.pele-caderno.dark .st-modo:hover { box-shadow: 0 0 0 2px #F3ECDF, 6px 8px 0 2px rgba(0, 0, 0, .6); } }
html.pele-caderno.dark .st-modo:active { box-shadow: 0 0 0 2px #F3ECDF, 1px 1px 0 2px rgba(0, 0, 0, .6); }
/* o ícone do modo é um quadradinho branco com o desenho em tinta preta */
html.pele-caderno.dark .st-modo__ic { color: #131011; background: #F3ECDF; box-shadow: none; }
/* trilha trancada: o treino com foto é o adesivo rosa, com borda branca */
html.pele-caderno.dark.st-mural:not(.st-aberta) #btn-play.st-modo { box-shadow: 0 0 0 2px #F3ECDF, 4px 5px 0 2px var(--cad-pink-lip), 0 0 14px rgba(255, 45, 110, .25); }
html.pele-caderno.dark.st-mural:not(.st-aberta) #btn-play .st-modo__ic { color: var(--cad-pink); background: #fff; box-shadow: 0 0 0 2.5px var(--cad-pink-lip); }
/* os títulos das colunas: a fita rosa com borda branca, e "Modos livres" em caixa de narração */
html.pele-caderno.dark .cp-ribbon { filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, .6)); }
html.pele-caderno.dark .st-livres-t {
  width: fit-content; color: #131011; background: #F3ECDF; padding: 4px 10px 2px;
  transform: rotate(-1.5deg); box-shadow: 3px 4px 0 rgba(0, 0, 0, .6);
}
/* o JOGAR brilha mais */
html.pele-caderno.dark .cp-jogar.cp-btn--go, html.pele-caderno.dark .st-story .cp-btn--go {
  box-shadow: 0 0 0 2px #F3ECDF, 4px 5px 0 2px var(--cad-pink-lip), 0 0 14px rgba(255, 45, 110, .25);
}
/* o emblema do mundo: carimbo branco com o bicho em tinta */
html.pele-caderno.dark .st-story .cp-escudo { background: #F3ECDF; box-shadow: 0 0 0 2px #131011, 0 0 0 3.5px rgba(243, 236, 223, .7); }
html.pele-caderno.dark .st-story .cp-escudo svg { filter: none; }
/* a página do mapa: a moldura da página é o quadro grande */
html.pele-caderno.dark .cp-map__t { color: #F3ECDF; text-shadow: 2px 2px 0 var(--cad-pink); }
/* com o lema em caixa, a trilha desce um pouco (senão a fita encosta na caixa) */
@media (max-width: 900px) { html.pele-caderno.dark .st-home-grid { margin-top: 50px; } html.pele-caderno.dark .st-livres-t { margin-bottom: 4px; } }
/* as LINHAS DE IMPACTO (img/impacto.svg, cunhas que afinam até a ponta, cada uma parando num
   lugar): moram na tela inteira, fora da parte que rola, pra nada cortar elas no meio (o Lucas,
   26/set: "as linhas de ação tão cortadas"). O centro delas segue o título: o trilha.js põe
   --imp-x e --imp-y. Ao abrir a home elas chegam com um tranco, como impacto de quadro. */
html.pele-caderno.dark #main-screen::before {
  display: block; content: ''; position: absolute; inset: auto; z-index: 0; pointer-events: none;
  left: var(--imp-x, 50%); top: var(--imp-y, 26%); width: min(1400px, 150vw); aspect-ratio: 16 / 10; opacity: .5;
  transform: translate(-50%, -50%); background: url(../img/impacto.svg) center / 100% 100% no-repeat;
  animation: cadImpacto .5s cubic-bezier(.2, .9, .3, 1) .05s both;
}
@keyframes cadImpacto { from { opacity: 0; transform: translate(-50%, -50%) scale(1.1); } }
html.pele-caderno.dark #main-screen > :first-child { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { html.pele-caderno.dark #main-screen::before { animation: none; } }