/* ==========================================================================
   skins/caderno.css — tema CADERNO do launcher (v3, síntese da rodada de essência)
   Fantasia: a mesa de estudo do próprio artista. REGRA DO MUNDO: todo elemento
   é um objeto nomeável da mesa (folha, fita, ficha, adesivo, flyer, bilhete) e
   recebe SÓ a física desse objeto. Papel não emite luz. Nada é idêntico ao
   vizinho. Só se move o que uma mão moveria — e uma vez só.
   Ativa por html[data-skin="caderno"]. Par com skins/caderno.js (fitas por
   folha + arte por app). Nenhuma regra vaza pra outros temas.
   ========================================================================== */

/* ─── 1. paleta (dia = papel · noite = kraft) ─── */
html[data-skin="caderno"] {
  --cream:#F6EFDE; --cream-soft:#FAF5E8; --paper:#FFFDF4;
  --ink:#2B2520; --ink-soft:#5A5248; --muted:#6E634F; /* lápis 2B: passa AA no rodapé */
  --border:#DDD2B8; --pink-soft:#FFE7EE;
  --shadow-sm:0 1px 0 rgba(90,70,40,.05), 0 5px 14px rgba(90,70,40,.10);
  --shadow-md:0 6px 16px rgba(90,70,40,.13), 0 14px 34px rgba(90,70,40,.10);
}
/* noite na MESMA paleta do site (família do #161413 do Clássico) — o
   marrom-kraft destoava da marca; o caderno de noite é a mesma mesa com a
   luz apagada, não outro material */
html[data-skin="caderno"].dark {
  --cream:#151312; --cream-soft:#1C1A18; --paper:#221F1C;
  --ink:#F0EDE5; --ink-soft:#B8B3A8; --muted:#8F897D;
  --border:#2D2925; --pink-soft:#3A1822;
  --shadow-sm:0 2px 8px rgba(0,0,0,.35);
  --shadow-md:0 10px 26px rgba(0,0,0,.5);
}

/* ─── 2. a página: quadriculado grafite + grão + margem + espiral ─── */
html[data-skin="caderno"] body.grid-paper {
  background-color:var(--cream);
  background-image:
    linear-gradient(rgba(96,78,52,.095) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96,78,52,.095) 1px, transparent 1px);
  background-size:26px 26px;
  background-position:-1px -1px;
  transition:background-color .28s ease;
}
html[data-skin="caderno"].dark body.grid-paper {
  background-image:
    linear-gradient(rgba(241,234,218,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(241,234,218,.05) 1px, transparent 1px);
}
/* grão de papel (quebra a perfeição da grade — papel impresso, não SVG) */
html[data-skin="caderno"] #skin-fx {
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='.055'/></feComponentTransfer></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}
/* (espiral e linha de margem na esquerda saíram — o Lucas não curtiu;
   o caderno fica no quadriculado + grão + objetos da mesa) */

/* ─── 3. hero: o dono escreve o título, passa o marcador, anota embaixo ─── */
html[data-skin="caderno"] .hero { position:relative; padding-top:1.5rem; }
html[data-skin="caderno"] .hero-title {
  position:relative; display:block; width:fit-content; margin:0 auto;
  transform:rotate(-1.2deg);
  font-size:clamp(3.6rem, 11.5vw, 6.9rem);
  animation:cadTitle .32s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes cadTitle { from { opacity:0; transform:rotate(-2.4deg) translateY(8px); } }
html[data-skin="caderno"] .hero-title::after {
  content:''; display:block; height:12px; margin:4px auto 0; width:78%;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8C30 2 55 11 85 6S150 3 198 7' fill='none' stroke='%23FF2D6E' stroke-width='5' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;
  transform-origin:left center;
  animation:cadUnderline .24s cubic-bezier(.4,0,.2,1) .26s both;
}
@keyframes cadUnderline { from { transform:scaleX(0); } }
/* caneta não emite luz: sem glow; rosa-escuro pra passar contraste AA sobre o papel */
html[data-skin="caderno"] .hero-sub {
  transform:rotate(-1deg); text-shadow:none; color:#D11857;
  animation:cadSub .24s ease-out .38s both;
}
html[data-skin="caderno"].dark .hero-sub { color:#FF5C8D; }
@keyframes cadSub { from { opacity:0; transform:rotate(-1deg) translateY(4px); } }

/* ─── 4. topbar: papelaria na beirada da mesa ─── */
html[data-skin="caderno"] .tbtn, html[data-skin="caderno"] .waffle-btn {
  background:var(--paper); border:1.6px solid var(--ink); color:var(--ink-soft);
  border-radius:9px 11px 9px 12px / 11px 9px 12px 9px;
  box-shadow:2px 2px 0 rgba(43,37,32,.22);
  transition:background-color .28s ease, border-color .18s ease, color .18s ease;
}
html[data-skin="caderno"].dark .tbtn, html[data-skin="caderno"].dark .waffle-btn {
  box-shadow:2px 2px 0 rgba(0,0,0,.4);
}
html[data-skin="caderno"] .tbtn:hover, html[data-skin="caderno"] .waffle-btn:hover {
  border-color:var(--pink); color:var(--pink);
}
/* papelaria real não empilha reta — cada chip da topbar cai do seu jeito
   (rotação no BOTÃO, não no wrapper, pra não entortar os menus) */
html[data-skin="caderno"] .waffle-btn { transform:rotate(-.3deg); }
html[data-skin="caderno"] #aura-rank-btn { transform:rotate(-.4deg); }
html[data-skin="caderno"] #btn-skin { transform:rotate(.35deg); }
html[data-skin="caderno"] #btn-sound { transform:rotate(-.3deg); }
html[data-skin="caderno"] #btn-theme { transform:rotate(.4deg); }
/* etiqueta de nome do caderno — colada, nunca reta */
html[data-skin="caderno"] .kit-badge {
  font-family:'Angela Notes','Caveat',cursive; font-size:1.04rem; letter-spacing:.05em;
  border-radius:8px 10px 8px 11px / 10px 8px 11px 8px;
  box-shadow:2px 3px 0 var(--ink);
  transform:rotate(-1.5deg);
}
/* etiqueta de dono ("este caderno pertence a...") — o chip de perfil */
html[data-skin="caderno"] .aup-chip {
  background:var(--paper); border:1.6px solid var(--ink);
  border-radius:9px 11px 9px 12px / 11px 9px 12px 9px;
  box-shadow:2px 2px 0 rgba(43,37,32,.22);
}
html[data-skin="caderno"].dark .aup-chip { box-shadow:2px 2px 0 rgba(0,0,0,.4); }
html[data-skin="caderno"] .aup-nm {
  font-family:'Angela Notes','Caveat',cursive; font-size:1.02rem; letter-spacing:.04em;
}
/* folhinhas de bloco de notas que abrem por cima da página (dropdowns) */
html[data-skin="caderno"] .skin-menu,
html[data-skin="caderno"] #aura-launcher,
html[data-skin="caderno"] .aup-menu {
  background:var(--paper); border:1.8px solid var(--ink);
  border-radius:4px 14px 12px 16px / 14px 6px 16px 12px;
  box-shadow:4px 5px 0 rgba(43,37,32,.16);
}
html[data-skin="caderno"].dark .skin-menu,
html[data-skin="caderno"].dark #aura-launcher,
html[data-skin="caderno"].dark .aup-menu {
  box-shadow:4px 5px 0 rgba(0,0,0,.4);
}

/* ─── 5. a ficha de estudo: onde o artista anota o placar (aura/chama) ─── */
html[data-skin="caderno"] .aura-hud {
  position:relative; background:var(--paper); border:1.5px solid var(--ink);
  border-radius:8px 12px 8px 14px / 12px 8px 14px 8px;
  box-shadow:3px 4px 0 rgba(43,37,32,.14);
  transform:rotate(-.4deg);
  background-image:repeating-linear-gradient(transparent 0 23px, rgba(43,37,32,.06) 23px 24.5px);
  transition:background-color .28s ease, border-color .28s ease;
}
html[data-skin="caderno"].dark .aura-hud {
  box-shadow:3px 4px 0 rgba(0,0,0,.35);
  background-image:repeating-linear-gradient(transparent 0 23px, rgba(241,234,218,.055) 23px 24.5px);
}
/* a linha vermelha da ficha pautada (bem no alto, pra não riscar os contadores) */
html[data-skin="caderno"] .aura-hud::before {
  content:''; position:absolute; left:0; right:0; top:7px; height:1.5px;
  background:rgba(255,45,110,.3); pointer-events:none;
}
html[data-skin="caderno"].dark .aura-hud::before { background:rgba(255,45,110,.24); }
@media (max-width:520px) { html[data-skin="caderno"] .aura-hud { transform:none; } }
/* o placar é ESCRITO na ficha, não pílulas de UI flutuando dentro dela */
html[data-skin="caderno"] .aura-hud .aw-card {
  background:transparent; border:none; box-shadow:none;
}
html[data-skin="caderno"] .aura-hud .aw-v {
  font-family:'Angela Notes','Caveat',cursive; color:var(--ink); letter-spacing:.03em;
}
html[data-skin="caderno"] .aura-hud .aw-l { color:var(--muted); }
/* etiquetas de papel dentro da ficha (Desafio · Loja) */
html[data-skin="caderno"] .aura-shop-cta.aura-ghost {
  background:var(--paper); border:1.6px solid var(--ink); color:var(--ink);
  border-radius:10px 13px 10px 12px / 12px 10px 13px 10px;
  box-shadow:2px 2px 0 rgba(43,37,32,.18);
}
html[data-skin="caderno"].dark .aura-shop-cta.aura-ghost { box-shadow:2px 2px 0 rgba(0,0,0,.4); }
html[data-skin="caderno"] .aura-shop-cta.aura-ghost:hover { border-color:var(--pink); color:var(--pink); }
/* lembrete discreto de salvar (não é a próxima ação — sem rosa, certo pela marca) */
html[data-skin="caderno"] .aa-btn {
  background:var(--paper); border:1.6px solid var(--ink);
  border-radius:9px 11px 9px 12px / 11px 9px 12px 9px;
  transform:rotate(.4deg);
  box-shadow:2px 2px 0 rgba(43,37,32,.18);
}
html[data-skin="caderno"].dark .aa-btn { box-shadow:2px 2px 0 rgba(0,0,0,.4); }

/* ─── 6. as folhas da mesa: NENHUMA igual à outra ───
   Cada card carrega a própria história em vars: recorte (--cut), inclinação
   (--tilt), ângulo de chegada (--tilt-from), tom do papel (--sheet), pincelada
   do marcador (--hatch), resíduo de giro no hover (--hrot) e rotações de
   adesivo/selo/botão. */
html[data-skin="caderno"] .card[data-app="sketch"] {
  /* a folha mais usada — arrancada e recolada, fita dupla, o maior tilt */
  --cut:225px 18px 250px 15px / 16px 240px 15px 230px;
  --tilt:-.8deg; --tilt-from:-2.2deg; --hatch:-45deg; --hrot:-.5deg;
  --icorot:-3deg; --chiprot:-2deg; --ctarot:-.6deg;
  --sheet:#FFFDF4;
}
html[data-skin="caderno"] .card[data-app="vision"] {
  /* folha nova de outro bloco, colada com capricho, uma fita rosa */
  --cut:16px 235px 18px 250px / 245px 16px 230px 18px;
  --tilt:.4deg; --tilt-from:1.8deg; --hatch:42deg; --hrot:.3deg;
  --icorot:2deg; --chiprot:3deg; --ctarot:.5deg;
  --sheet:#FDF9EC;
}
html[data-skin="caderno"] .card[data-app="line"] {
  /* a folha surrada: canto dobrado, fita kraft improvisada */
  --cut:250px 15px 235px 20px / 15px 225px 18px 245px;
  --tilt:-.35deg; --tilt-from:-1.4deg; --hatch:-63deg; --hrot:0deg;
  --icorot:-2deg; --chiprot:-4deg; --ctarot:-.4deg;
  --sheet:#FFFCEF;
}
html[data-skin="caderno"] .card[data-app="canvas"] {
  /* a folha grande do bloco A4 — presa pelas duas pontas, levanta menos */
  --cut:20px 250px 16px 240px / 235px 18px 250px 15px;
  --tilt:.65deg; --tilt-from:2deg; --hatch:33deg; --hrot:.25deg; --lift:-4px;
  --icorot:3deg; --chiprot:2deg; --ctarot:.6deg;
  --sheet:#FCF7E8;
  --sheet-shadow:0 2px 0 rgba(90,70,40,.06), 0 8px 20px rgba(90,70,40,.13);
}
html[data-skin="caderno"] .saga-card {
  /* NÃO é folha: é o flyer da comunidade — corte reto de impressora (canto
     quase vivo), papel mais claro, bem colado (sombra rasa), fita de mural.
     Impressão não roda em relação à folha: botão sem torto (--ctarot:0). */
  --cut:4px 6px 5px 4px / 5px 4px 6px 5px;
  --tilt:-.5deg; --tilt-from:-1.8deg; --ctarot:0deg;
  --sheet:#FFF9EC;
  --sheet-shadow:0 1px 0 rgba(90,70,40,.05), 0 3px 9px rgba(90,70,40,.09);
}
html[data-skin="caderno"].dark .card[data-app="sketch"] { --sheet:#221F1C; }
html[data-skin="caderno"].dark .card[data-app="vision"] { --sheet:#242019; }
html[data-skin="caderno"].dark .card[data-app="line"]   { --sheet:#201E1C; }
html[data-skin="caderno"].dark .card[data-app="canvas"] { --sheet:#25221E; --sheet-shadow:0 12px 30px rgba(0,0,0,.55); }
html[data-skin="caderno"].dark .saga-card { --sheet:#272420; --sheet-shadow:0 4px 12px rgba(0,0,0,.4); }

/* a folha em si: papel é OBJETO, não desenho de folha — canto de papel,
   não contorno de tinta (tinta fica no que está ESCRITO nela).
   overflow:visible: a fita PRECISA cruzar a borda da folha (fita presa só
   por dentro não prende nada); quem recorta o topo é o próprio header.
   position:relative: a fita não pode depender do transform pra ancorar
   (no reduced-motion o transform some e ela voava pro topo da página). */
html[data-skin="caderno"] .card, html[data-skin="caderno"] .saga-card {
  position:relative; overflow:visible;
  background:var(--sheet, var(--paper));
  border:1px solid rgba(120,98,62,.32);
  border-radius:var(--cut, 255px 15px 225px 15px / 15px 225px 15px 255px);
  box-shadow:var(--sheet-shadow, var(--shadow-sm));
  transform:rotate(var(--tilt, 0deg));
  animation:cadSettle .5s cubic-bezier(.3,1.18,.36,1) both;
  transition:transform .26s cubic-bezier(.34,1.3,.4,1), box-shadow .26s ease,
             background-color .28s ease, border-color .28s ease;
}
html[data-skin="caderno"].dark .card, html[data-skin="caderno"].dark .saga-card {
  border-color:rgba(0,0,0,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045), var(--sheet-shadow, var(--shadow-sm));
}
/* entrada: cada folha cai do próprio ângulo e assenta (from-only: o to{}
   preenchido matava o hover — mesma armadilha já documentada no index) */
@keyframes cadSettle { from { opacity:0; transform:translateY(-10px) rotate(var(--tilt-from, 0deg)); } }
html[data-skin="caderno"] .cards > *:nth-child(1) { animation-delay:.12s; }
html[data-skin="caderno"] .cards > *:nth-child(2) { animation-delay:.28s; }
html[data-skin="caderno"] .cards > *:nth-child(3) { animation-delay:.38s; }
html[data-skin="caderno"] .cards > *:nth-child(4) { animation-delay:.55s; }
html[data-skin="caderno"] .cards > *:nth-child(5) { animation-delay:.64s; }
/* pegar a folha: sobe rápido e quase endireita; soltar: reassenta mais lento
   (a duração declarada aqui vale na entrada do hover; a do estado base, na saída) */
html[data-skin="caderno"] .card.live:hover {
  transform:translateY(var(--lift, -6px)) rotate(var(--hrot, 0deg));
  box-shadow:var(--shadow-md);
  border-color:rgba(120,98,62,.32); /* papel erguido não muda a cor da beirada (mata o rosa do base) */
  transition-duration:.16s, .16s, .28s, .28s;
}
html[data-skin="caderno"].dark .card.live:hover { border-color:rgba(0,0,0,.55); }
html[data-skin="caderno"] .card.live:active {
  transform:translateY(-2px) rotate(var(--hrot, 0deg));
  transition-duration:.07s, .07s, .28s, .28s;
}
/* foco de teclado = contorno de lápis em volta da folha erguida */
html[data-skin="caderno"] .card.live:focus-visible {
  transform:translateY(var(--lift, -6px)) rotate(var(--hrot, 0deg));
  box-shadow:var(--shadow-md);
  outline:2.5px dashed var(--pink); outline-offset:5px;
}
html[data-skin="caderno"] .card-cta:focus-visible,
html[data-skin="caderno"] .saga-cta:focus-visible {
  outline:2.5px dashed var(--pink); outline-offset:3px;
}

/* ─── 7. as fitas (injetadas pelo caderno.js, uma história por folha) ───
   Fita de verdade: translúcida (multiply de dia), ponta rasgada (clip-path),
   quase plana (sombra de contato, não flutuação). */
/* O recorte rasgado mora num ::before e a sombra no pai: clip-path e
   drop-shadow no MESMO nó se anulam (o clip corta a sombra — provado por
   diff de pixel). Assim a sombra de contato segue o rasgado de verdade. */
html[data-skin="caderno"] .cad-tape {
  position:absolute; top:-9px; height:26px; left:var(--x, 50%); width:var(--w, 80px);
  transform:translateX(-50%) rotate(var(--rot, 0deg));
  filter:drop-shadow(0 1px 2px rgba(90,70,40,.3));
  z-index:2; pointer-events:none;
}
html[data-skin="caderno"] .cad-tape::before {
  content:''; position:absolute; inset:0;
  clip-path:polygon(2% 0, 98% 4%, 100% 12%, 97% 100%, 3% 96%, 0 88%, 1% 10%);
}
/* a segunda fita de um par rasga do outro lado (nenhum rasgo é carimbo) */
html[data-skin="caderno"] .cad-tape.tp-b::before { transform:scaleX(-1); }
html[data-skin="caderno"].dark .cad-tape {
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
/* fita quase OPACA (translúcida demais parecia vidro) e sem listras na
   kraft (parecia régua). De noite o pigmento escurece, não a opacidade. */
html[data-skin="caderno"] .cad-tape.t-yellow::before { background-color:rgba(255,214,110,.96); }
html[data-skin="caderno"] .cad-tape.t-yellow.dim::before { background-color:rgba(250,205,100,.88); }
html[data-skin="caderno"] .cad-tape.t-white::before { background-color:rgba(255,253,244,.8); }
html[data-skin="caderno"] .cad-tape.t-kraft::before { background-color:rgba(186,144,96,.96); }
html[data-skin="caderno"].dark .cad-tape.t-yellow::before { background-color:rgba(255,196,70,.97); }
html[data-skin="caderno"].dark .cad-tape.t-yellow.dim::before { background-color:rgba(238,178,56,.92); }
html[data-skin="caderno"].dark .cad-tape.t-white::before { background-color:rgba(243,238,228,.85); }
html[data-skin="caderno"].dark .cad-tape.t-kraft::before { background-color:rgba(203,166,118,.95); }
/* pregou a flag "você parou aqui"? a mão tirou a fita que estava ali */
html[data-skin="caderno"] .card:has(.last-tag) .cad-tape.tp-b { display:none; }

/* canto dobrado de tanto folhear — só a folha do Line */
html[data-skin="caderno"] .card[data-app="line"]::after {
  content:''; position:absolute; right:1px; bottom:1px; width:28px; height:28px;
  background:linear-gradient(135deg, transparent 49.5%, rgba(43,37,32,.10) 50%, var(--cream-soft) 52%);
  box-shadow:-2px -2px 3px rgba(90,70,40,.10);
  border-bottom-right-radius:14px;
  pointer-events:none;
}
html[data-skin="caderno"].dark .card[data-app="line"]::after {
  background:linear-gradient(135deg, transparent 49.5%, rgba(0,0,0,.35) 50%, #1B1917 52%);
  box-shadow:none;
}

/* ─── 8. cabeçalho: bloco pintado a MARCADOR (a régua de tinta embaixo) ───
   Marcador sobre papel respira (não é tinta de impressora); cada folha foi
   pintada num dia — o ângulo da pincelada muda por card. */
html[data-skin="caderno"] .card-head {
  height:128px;
  background-color:#FF447B;
  background-image:repeating-linear-gradient(var(--hatch, -45deg), rgba(0,0,0,.05) 0 3px, transparent 3px 11px);
  border-bottom:2px solid var(--ink);
  /* com o overflow da folha aberto (fitas cruzam a borda!), o recorte
     do topo passa a ser do próprio header */
  border-radius:var(--cut, 255px 15px 225px 15px / 15px 225px 15px 255px);
  border-bottom-left-radius:0; border-bottom-right-radius:0;
}
html[data-skin="caderno"].dark .card-head { background-color:#DC2A60; }
/* o flyer da Saga é IMPRESSO: rosa chapado, sem pincelada */
html[data-skin="caderno"] .saga-head {
  height:128px; background:var(--pink); background-image:none;
  border-bottom:2px solid var(--ink);
  border-radius:var(--cut, 14px);
  border-bottom-left-radius:0; border-bottom-right-radius:0;
}
/* adesivo do Discord colado no flyer: sombra de contato dura, meio torto */
html[data-skin="caderno"] .saga-head-logo {
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.25));
  transform:rotate(-2deg);
}

/* ─── 9. o que está escrito/colado NA folha ─── */
/* adesivo impresso da marca: anel die-cut branco, nunca colado reto */
html[data-skin="caderno"] .card-ico {
  position:absolute; left:10px; top:10px; width:34px; height:34px;
  border:2px solid var(--ink); border-radius:10px 12px 10px 13px / 12px 10px 13px 10px;
  box-shadow:0 0 0 3px #FFFDF4, 2px 3px 0 rgba(0,0,0,.22);
  transform:rotate(var(--icorot, -3deg));
  transition:none;
}
html[data-skin="caderno"].dark .card-ico { box-shadow:0 0 0 3px rgba(241,234,218,.9), 2px 3px 0 rgba(0,0,0,.35); }
html[data-skin="caderno"] .card-ico b { font-size:1.15rem; }
html[data-skin="caderno"] .card.live:hover .card-ico { transform:rotate(var(--icorot, -3deg)); }
/* selo de categoria: anotação à mão com moldura de tracinhos — escrita não flutua */
html[data-skin="caderno"] .card-chip {
  background:var(--sheet, var(--paper)); color:var(--ink);
  border:1.6px dashed rgba(43,37,32,.72);
  border-radius:10px 12px 10px 13px / 12px 10px 13px 10px;
  box-shadow:none;
  font-family:'Angela Notes','Caveat',cursive; font-weight:600; font-size:1.02rem; letter-spacing:.04em;
  padding:3px 11px 2px;
  transform:rotate(var(--chiprot, -3deg));
}
html[data-skin="caderno"].dark .card-chip { border-color:rgba(241,234,218,.6); }
html[data-skin="caderno"] .saga-badge {
  background:var(--sheet, var(--paper)); color:var(--ink);
  border:1.6px dashed rgba(43,37,32,.72); box-shadow:none;
}
html[data-skin="caderno"].dark .saga-badge { border-color:rgba(241,234,218,.6); }

/* tinta sobre papel */
html[data-skin="caderno"] .card-name { color:var(--ink); }
html[data-skin="caderno"] .card-desc { color:var(--ink-soft); }
html[data-skin="caderno"] .saga-ttl { color:var(--ink); }
html[data-skin="caderno"] .saga-sub { color:var(--ink-soft); }
html[data-skin="caderno"] .saga-status { color:var(--ink-soft); }
html[data-skin="caderno"] .saga-status b { color:var(--ink); }
html[data-skin="caderno"] .saga-unlink { color:var(--muted); }
/* status é ponto de marcador verde, não LED */
html[data-skin="caderno"] .saga-status .dot { box-shadow:none; background:#3FA968; }
html[data-skin="caderno"].dark .saga-status .dot { background:#4ADE80; }

/* adesivo vinílico rosa = o ÚNICO rosa-cheio da folha (próxima ação).
   pink-deep #D11857: branco em cima passa AA (o #FF2D6E cheio media 3.6:1)
   — e separa "tinta de marcador" (header) de "botão de ação". */
html[data-skin="caderno"] .card-cta, html[data-skin="caderno"] .saga-cta {
  background:#D11857;
  border-radius:12px 14px 12px 15px / 14px 12px 14px 12px;
  transform:rotate(var(--ctarot, -.6deg));
  box-shadow:3px 4px 0 #8E1140;
}
html[data-skin="caderno"] .card.live:active .card-cta {
  transform:rotate(var(--ctarot, -.6deg)) translateY(3px);
  box-shadow:1px 1px 0 #8E1140;
}
html[data-skin="caderno"] .saga-cta:active {
  transform:rotate(var(--ctarot, 0deg)) translateY(3px);
  box-shadow:1px 1px 0 #8E1140;
}
/* o "aura"/"saga" manuscrito: mesma caneta do subtítulo (o rosa puro
   reprovava contraste em cima do papel) */
html[data-skin="caderno"] .card-name .sub { color:#D11857; }
html[data-skin="caderno"].dark .card-name .sub { color:#FF5C8D; }

/* ─── 10. arte desenhada por app (injetada pelo caderno.js) ───
   Tinta seca na folha: viaja JUNTO com a folha (sem dança própria no hover). */
html[data-skin="caderno"] .cad-art {
  position:absolute; left:50%; top:50%; width:92px; height:92px;
  transform:translate(-50%,-52%); pointer-events:none;
}
html[data-skin="caderno"] .cad-art path, html[data-skin="caderno"] .cad-art circle {
  fill:none; stroke:#FFFDF4; stroke-width:4; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:100; stroke-dashoffset:100;
  animation:cadDraw .55s ease-out forwards;
}
/* guia tracejada de exercício (o Line é literalmente "traço sobre a guia") */
html[data-skin="caderno"] .cad-art .gd {
  stroke:#161413; stroke-width:2.4; opacity:.5;
  stroke-dasharray:4.5 4.5; stroke-dashoffset:0; animation:none;
}
/* o traço do aluno por cima da guia: mais grosso, confiante */
html[data-skin="caderno"] .cad-art .bw { stroke-width:5.5; }
@keyframes cadDraw { to { stroke-dashoffset:0; } }
html[data-skin="caderno"] .cad-art .mkf {
  fill:#161413; stroke:none; stroke-dasharray:none; stroke-dashoffset:0;
  opacity:0; animation:cadInkIn .22s ease-out forwards;
}
html[data-skin="caderno"] .cad-art .wf {
  fill:#FFFDF4; stroke:none; stroke-dasharray:none; stroke-dashoffset:0;
  opacity:0; animation:cadInkIn .22s ease-out forwards;
}
@keyframes cadInkIn { to { opacity:.9; } }
html[data-skin="caderno"] .cad-art .dk { stroke:#161413; }
html[data-skin="caderno"] .cad-art .hx { stroke-width:2.4; opacity:.55; }
/* o traço aparece depois que a folha assenta; a tinta preenche depois do traço */
html[data-skin="caderno"] .cards > *:nth-child(1) .cad-art path, html[data-skin="caderno"] .cards > *:nth-child(1) .cad-art circle { animation-delay:.52s; }
html[data-skin="caderno"] .cards > *:nth-child(2) .cad-art path, html[data-skin="caderno"] .cards > *:nth-child(2) .cad-art circle { animation-delay:.68s; }
html[data-skin="caderno"] .cards > *:nth-child(3) .cad-art path, html[data-skin="caderno"] .cards > *:nth-child(3) .cad-art circle { animation-delay:.78s; }
html[data-skin="caderno"] .cards > *:nth-child(4) .cad-art path, html[data-skin="caderno"] .cards > *:nth-child(4) .cad-art circle { animation-delay:.95s; }
html[data-skin="caderno"] .cards > *:nth-child(1) .cad-art .mkf, html[data-skin="caderno"] .cards > *:nth-child(1) .cad-art .wf { animation-delay:.9s; }
html[data-skin="caderno"] .cards > *:nth-child(2) .cad-art .mkf, html[data-skin="caderno"] .cards > *:nth-child(2) .cad-art .wf { animation-delay:1.06s; }
html[data-skin="caderno"] .cards > *:nth-child(3) .cad-art .mkf, html[data-skin="caderno"] .cards > *:nth-child(3) .cad-art .wf { animation-delay:1.16s; }
html[data-skin="caderno"] .cards > *:nth-child(4) .cad-art .mkf, html[data-skin="caderno"] .cards > *:nth-child(4) .cad-art .wf { animation-delay:1.33s; }

/* ─── 11. miudezas do mundo ─── */
/* flag de marcar página — no canto oposto ao adesivo da marca (colidiam) */
html[data-skin="caderno"] .last-tag {
  left:auto; right:12px; top:9px; transform:rotate(4deg); z-index:3;
  border-radius:2px 10px 4px 12px;
  box-shadow:2px 3px 0 rgba(43,37,32,.3);
}
/* bilhetinho deixado na mesa (toast de aviso) */
html[data-skin="caderno"] .saga-toast {
  background:var(--paper); color:var(--ink); border:1.6px solid var(--ink);
  border-left:4px solid var(--pink);
  border-radius:3px 12px 10px 14px / 12px 6px 14px 8px;
  box-shadow:4px 5px 0 rgba(43,37,32,.2);
}
html[data-skin="caderno"].dark .saga-toast { box-shadow:4px 5px 0 rgba(0,0,0,.45); }
html[data-skin="caderno"] .saga-toast.in { transform:translateX(-50%) translateY(0) rotate(-.5deg); }
/* adesivo de reportar bug: não é a próxima ação — sai do rosa-cheio */
html[data-skin="caderno"] .abr-fab {
  background:var(--paper) !important; color:var(--ink-soft) !important;
  border:1.6px solid var(--ink) !important;
  border-radius:12px 14px 12px 15px / 14px 12px 15px 12px;
  box-shadow:2px 3px 0 rgba(43,37,32,.2) !important;
}
html[data-skin="caderno"] .abr-fab:hover { color:var(--pink) !important; border-color:var(--pink) !important; }
html[data-skin="caderno"].dark .abr-fab { box-shadow:2px 3px 0 rgba(0,0,0,.4) !important; }
/* rodapé fica na fonte normal do site (a letra de mão ali ficou bizarra) */

/* ─── 12. celular: pilha de folhas, tilts pela metade, fita única na larga ─── */
@media (max-width:720px) {
  html[data-skin="caderno"] .card-head, html[data-skin="caderno"] .saga-head { height:112px; }
  html[data-skin="caderno"] .cad-art { width:78px; height:78px; }
  html[data-skin="caderno"] .cards > *:nth-child(1) { animation-delay:.10s; }
  html[data-skin="caderno"] .cards > *:nth-child(2) { animation-delay:.16s; }
  html[data-skin="caderno"] .cards > *:nth-child(3) { animation-delay:.22s; }
  html[data-skin="caderno"] .cards > *:nth-child(4) { animation-delay:.28s; }
  html[data-skin="caderno"] .cards > *:nth-child(5) { animation-delay:.34s; }
}
@media (max-width:470px) {
  html[data-skin="caderno"] body.grid-paper { background-size:24px 24px; }
  /* ficha mais compacta: Desafio e Loja dividem a linha, a 1ª folha entra na dobra */
  html[data-skin="caderno"] .aura-hud { padding:10px; gap:10px; }
  /* basis fixo em px: o percentual resolvia contra a caixa com padding e
     estourava a linha por 16px, empilhando os dois botões */
  html[data-skin="caderno"] .aura-hud .aura-shop-cta { width:auto; flex:1 1 130px; }
  html[data-skin="caderno"] .card[data-app="sketch"] { --tilt:-.4deg; }
  html[data-skin="caderno"] .card[data-app="vision"] { --tilt:.2deg; }
  html[data-skin="caderno"] .card[data-app="line"]   { --tilt:-.2deg; }
  html[data-skin="caderno"] .card[data-app="canvas"] { --tilt:.3deg; }
  html[data-skin="caderno"] .saga-card { --tilt:-.25deg; }
  /* folha larga no celular não precisa de duas fitas */
  html[data-skin="caderno"] .card[data-app="canvas"] .cad-tape.tp-b { display:none; }
  html[data-skin="caderno"] .card[data-app="canvas"] .cad-tape.tp-a { --x:24% !important; --w:60px !important; }
}

/* ─── 13. menos movimento: o caderno já estava aberto e terminado ─── */
@media (prefers-reduced-motion: reduce) {
  html[data-skin="caderno"] .hero-title,
  html[data-skin="caderno"] .hero-title::after,
  html[data-skin="caderno"] .hero-sub,
  html[data-skin="caderno"] .card,
  html[data-skin="caderno"] .saga-card { animation:none; }
  /* inclinação NÃO é movimento: as folhas continuam tortas, só não se mexem */
  html[data-skin="caderno"] .card.live { transition:box-shadow .1s ease, border-color .1s ease; }
  html[data-skin="caderno"] .card.live:hover,
  html[data-skin="caderno"] .card.live:active,
  html[data-skin="caderno"] .card.live:focus-visible { transform:rotate(var(--tilt, 0deg)); }
  html[data-skin="caderno"] .cad-art path,
  html[data-skin="caderno"] .cad-art circle {
    animation:none; stroke-dasharray:none; stroke-dashoffset:0;
  }
  html[data-skin="caderno"] .cad-art .mkf,
  html[data-skin="caderno"] .cad-art .wf { animation:none; opacity:.9; }
}