/* ISSO NÃO EXISTE
   Visual de caderno de artista: papel, tinta preta grossa, adesivo, fita e post-it. */

:root {
  --papel: #f6efe0;
  --papel-2: #ece2cc;
  --mesa: #e2d6bd;
  --branco: #fffdf7;
  --tinta: #231f1c;
  --tinta-2: #5b534b;
  --vermelho: #ef5b4c;
  --vermelho-escuro: #c93a2e;
  --mostarda: #f7c244;
  --menta: #86d4b4;
  --verde: #2f8f6b;
  --azul: #7db7e8;
  --lilas: #b8a5f0;
  --rosa: #f59fc0;

  --f-titulo: 'Lilita One', 'Arial Black', system-ui, sans-serif;
  --f-corpo: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mao: 'Patrick Hand', 'Comic Sans MS', cursive;
  --f-memo: 'Special Elite', 'Courier New', monospace;

  --borda: 2.5px solid var(--tinta);
  --sombra: 4px 4px 0 var(--tinta);
  --sombra-p: 2.5px 2.5px 0 var(--tinta);
  --torto: 16px 22px 14px 24px / 22px 14px 24px 16px;
  --torto-2: 24px 14px 22px 16px / 14px 24px 16px 22px;
  --mola: cubic-bezier(.3, 1.5, .5, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--f-corpo);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.45;
  color: var(--tinta);
  background-color: var(--papel);
  background-image:
    radial-gradient(circle, rgba(35, 31, 28, .16) 1.2px, transparent 1.6px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .14 0 0 0 0 .12 0 0 0 0 .1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 26px 26px, 240px 240px;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
body.com-modal, body.modo-editor { overflow: hidden; }
body.modo-editor { position: fixed; inset: 0; overscroll-behavior: none; }

h1, h2, h3, p, figure, dl, dd, ol, ul, blockquote, fieldset { margin: 0; padding: 0; }
ol, ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; touch-action: manipulation; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid #2d5bd1; outline-offset: 3px; border-radius: 8px; }
:focus:not(:focus-visible) { outline: none; }

.ic { width: 1.4em; height: 1.4em; flex: none; }
.doodle { overflow: visible; filter: url(#tremido); }

/* ------------------------------------------------------------ botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 50px; padding: .55em 1.25em;
  font-family: var(--f-titulo); font-size: 1.12rem; letter-spacing: .02em; text-transform: uppercase; line-height: 1.1;
  color: var(--tinta); background: var(--branco);
  border: var(--borda); border-radius: var(--torto); box-shadow: var(--sombra);
  transition: transform .12s, box-shadow .12s, background .15s;
  user-select: none; -webkit-user-select: none;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--tinta); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--tinta); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: var(--sombra-p); }
.btn-primario { background: var(--mostarda); }
.btn-secundario { background: var(--branco); }
.btn-fantasma { background: transparent; box-shadow: none; border-style: dashed; }
.btn-fantasma:hover, .btn-fantasma:active { box-shadow: none; background: rgba(35, 31, 28, .06); }
.btn-perigo { background: var(--vermelho); color: #fff; text-shadow: 1px 1px 0 rgba(0, 0, 0, .35); }
.btn-arthur { background: var(--rosa); }
.btn-grande { min-height: 60px; font-size: 1.35rem; padding: .6em 1.6em; border-radius: var(--torto-2); }
.btn-mini { min-height: 40px; font-size: .9rem; padding: .3em .8em; box-shadow: var(--sombra-p); }
.btn.ocupado { position: relative; color: transparent; text-shadow: none; }
.btn.ocupado::after {
  content: ''; position: absolute; width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid var(--tinta); border-right-color: transparent; animation: gira .7s linear infinite;
}

.btn-ic {
  display: inline-grid; place-items: center; width: 46px; height: 46px; flex: none;
  background: var(--branco); border: var(--borda); border-radius: 14px 17px 13px 18px / 17px 13px 18px 14px;
  box-shadow: var(--sombra-p); transition: transform .12s, box-shadow .12s, background .15s;
}
.btn-ic:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--tinta); }
.btn-ic:disabled { opacity: .35; cursor: not-allowed; }
.btn-ic[aria-pressed="true"] { background: var(--mostarda); }
.btn-ic-perigo { color: var(--vermelho-escuro); }
.btn-p { width: 40px; height: 40px; box-shadow: none; border-width: 2px; }

@keyframes gira { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------ estrutura das telas */
.tela { min-height: 100dvh; padding: max(12px, env(safe-area-inset-top)) 16px calc(40px + env(safe-area-inset-bottom)); }
.tela.entrando > * { animation: entra .35s ease both; }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } }

.topo { display: flex; align-items: center; gap: 12px; max-width: 1080px; margin: 0 auto 18px; min-height: 46px; }
.miolo { max-width: 680px; margin: 0 auto; }
.miolo-largo { max-width: 1080px; }
.miolo-duplo { max-width: 920px; display: grid; gap: 22px; }

.titulo-tela { font-family: var(--f-titulo); font-weight: 400; font-size: clamp(1.7rem, 6.4vw, 2.5rem); line-height: 1.08; letter-spacing: .01em; text-wrap: balance; }
.sub-tela { font-family: var(--f-mao); font-size: 1.3rem; color: var(--tinta-2); margin-top: 6px; }

/* trilha de etapas: bolinhas ligadas por um tracejado de caneta */
.trilha { flex: 1; display: flex; justify-content: space-between; position: relative; max-width: 460px; margin-left: auto; }
.trilha::before { content: ''; position: absolute; left: 12px; right: 12px; top: 11px; border-top: 2.5px dashed rgba(35, 31, 28, .35); }
.trilha li { position: relative; display: grid; justify-items: center; gap: 2px; width: 24px; }
.trilha li i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--papel); border: var(--borda); }
.trilha li i .ic { width: 14px; height: 14px; stroke-width: 3.5; }
.trilha li span { font-family: var(--f-mao); font-size: .85rem; line-height: 1; white-space: nowrap; opacity: 0; position: absolute; top: 27px; }
.trilha li.feita i { background: var(--menta); }
.trilha li.atual i { background: var(--mostarda); transform: scale(1.25) rotate(-6deg); box-shadow: 2px 2px 0 var(--tinta); }
.trilha li.atual span { opacity: 1; }
.trilha li:last-child span { right: 0; }
.trilha li:first-child span { left: 0; }

/* ------------------------------------------------------------ home */
.home { position: relative; min-height: calc(100dvh - 60px); display: grid; place-items: center; text-align: center; }
.home-miolo { position: relative; z-index: 1; display: grid; justify-items: center; gap: 10px; padding: 30px 0 104px; max-width: 560px; }
.home-selo { font-family: var(--f-mao); font-size: 1.15rem; background: var(--branco); border: 2px solid var(--tinta); padding: 1px 14px; border-radius: 99px; transform: rotate(-2deg); }
.logo {
  font-family: var(--f-titulo); font-weight: 400; line-height: .88; letter-spacing: .01em;
  font-size: clamp(3.6rem, 19vw, 7rem); display: grid; justify-items: center; margin: 6px 0 2px;
  text-shadow: 4px 4px 0 var(--mostarda);
}
.logo span { display: block; }
.logo span:first-child { transform: rotate(-3deg) translateX(-6%); }
.logo span:last-child { transform: rotate(1.5deg) translateX(3%); }
.logo-nao {
  color: var(--branco); background: var(--vermelho); padding: .02em .22em .06em; margin: .04em 0;
  border: 3px solid var(--tinta); border-radius: var(--torto); box-shadow: 5px 5px 0 var(--tinta);
  transform: rotate(3deg); text-shadow: 3px 3px 0 var(--tinta);
}
.home-stickers { display: flex; gap: 14px; margin: 8px 0 2px; }
.stk { width: 64px; height: 64px; background: var(--branco); border-radius: 50%; padding: 9px; border: 2.5px solid var(--tinta); box-shadow: var(--sombra-p); filter: none; }
.stk1 { transform: rotate(-8deg); } .stk2 { transform: rotate(4deg) translateY(-6px); } .stk3 { transform: rotate(9deg); }
.home-frase { font-family: var(--f-mao); font-size: clamp(1.45rem, 5.6vw, 1.9rem); line-height: 1.15; text-wrap: balance; }
.home-sub { font-size: .98rem; color: var(--tinta-2); }
.home-botoes { display: grid; gap: 14px; margin-top: 14px; width: min(100%, 340px); }
.home-rodape { font-family: var(--f-mao); font-size: 1.02rem; color: var(--tinta-2); margin-top: 18px; max-width: 30ch; }
.link-instalar { display: inline-flex; gap: 6px; align-items: center; font-family: var(--f-mao); font-size: 1.15rem; text-decoration: underline wavy; text-underline-offset: 4px; min-height: 44px; }

.home-doodles { position: absolute; inset: 0; pointer-events: none; }
.dd { position: absolute; width: 56px; height: 56px; animation: boia 6s ease-in-out infinite; }
.dd1 { top: 3%; left: 2%; width: 50px; --r: -12deg; }
.dd2 { top: 9%; right: 3%; width: 66px; height: 66px; --r: 14deg; animation-delay: -2s; }
.dd4 { bottom: 25%; left: 1%; width: 46px; --r: -10deg; animation-delay: -4s; }
.dd6 { bottom: 1%; right: 4%; width: 62px; height: 62px; --r: 8deg; animation-delay: -1s; }
.dd8 { top: 40%; right: 0; width: 34px; --r: 0deg; animation-delay: -3s; }
.dd9 { bottom: 2%; left: 38%; width: 90px; opacity: .5; --r: -4deg; }
.dd10 { top: 25%; left: 7%; width: 28px; --r: 10deg; animation-delay: -5s; }
.fantasma-btn { position: absolute; bottom: 1%; left: 5%; width: 66px; height: 66px; z-index: 2; border-radius: 50%; }
.fantasma-btn .dd { position: static; width: 100%; height: 100%; --r: -6deg; }
.fantasma-btn.susto { animation: susto .5s var(--mola); }
@keyframes boia { 0%, 100% { transform: rotate(var(--r, 0deg)) translateY(0); } 50% { transform: rotate(calc(var(--r, 0deg) + 4deg)) translateY(-8px); } }
@keyframes susto { 30% { transform: scale(1.35) rotate(-14deg); } 60% { transform: scale(.9) rotate(8deg); } }

/* ------------------------------------------------------------ tipo de obra */
.tipos { display: grid; gap: 18px; margin-top: 22px; }
.tipo-carta {
  position: relative; display: grid; grid-template-columns: 72px 1fr; column-gap: 14px; align-items: center; text-align: left;
  padding: 18px; background: var(--branco); border: var(--borda); border-radius: var(--torto); box-shadow: var(--sombra);
  transition: transform .25s var(--mola), box-shadow .2s, opacity .3s;
}
.tipo-carta:nth-child(1) { transform: rotate(-1.2deg); background: #e6f1fb; }
.tipo-carta:nth-child(2) { transform: rotate(.9deg); background: #e2f5ec; }
.tipo-carta:nth-child(3) { transform: rotate(-.6deg); background: #fde6ef; }
.tipo-carta:hover { transform: rotate(0) translateY(-3px); box-shadow: 6px 7px 0 var(--tinta); }
.tipo-carta:active { transform: scale(.98); }
.tipo-doodle { grid-row: span 2; width: 72px; height: 72px; }
.tipo-carta strong { font-family: var(--f-titulo); font-weight: 400; font-size: 1.55rem; line-height: 1.05; text-transform: uppercase; align-self: end; }
.tipo-carta span { font-family: var(--f-mao); font-size: 1.18rem; line-height: 1.2; color: var(--tinta-2); align-self: start; }
.fita-especial {
  position: absolute; top: -13px; right: 14px; font: 400 1rem var(--f-mao); background: var(--mostarda); padding: 0 12px;
  border: 2px solid var(--tinta); transform: rotate(3deg);
}
.tipo-carta.escolhida { transform: scale(1.04) rotate(0); box-shadow: 8px 9px 0 var(--tinta); z-index: 2; }
.tipo-carta.descartada { opacity: 0; transform: translateY(24px) rotate(5deg); }

/* ------------------------------------------------------------ cartas que viram */
.carta-flip { perspective: 900px; aspect-ratio: 5 / 5.8; width: 100%; }
.carta-dentro { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .6s var(--mola); }
.carta-flip.virada .carta-dentro { transform: rotateY(180deg); }
.carta-flip.tremendo .carta-dentro { animation: treme .12s linear infinite; }
@keyframes treme { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
.carta-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: var(--borda); border-radius: var(--torto); box-shadow: var(--sombra);
  display: grid; place-items: center; text-align: center; padding: 12px; overflow: hidden;
}
.carta-verso {
  background-color: var(--tinta); color: var(--papel);
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .07) 0 6px, transparent 6px 12px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, .07) 0 6px, transparent 6px 12px);
  font: 400 2.6rem var(--f-titulo);
}
.carta-verso::after { content: ''; position: absolute; inset: 8px; border: 2px dashed rgba(246, 239, 224, .45); border-radius: 12px; }
.carta-verso .ic { width: 46px; height: 46px; }
.carta-frente { transform: rotateY(180deg); background: var(--branco); align-content: center; gap: 8px; }
.carta-frente::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 34px; background: var(--cor-kind, var(--mostarda)); border-bottom: var(--borda); }
.carta-rot { position: absolute; top: 0; left: 0; right: 0; height: 34px; display: grid; place-items: center; padding: 0 6px; font: 800 .72rem/1.05 var(--f-corpo); text-transform: uppercase; letter-spacing: .06em; }
.carta-frente p { font-family: var(--f-titulo); font-size: clamp(1.1rem, 5.4vw, 1.5rem); line-height: 1.08; margin-top: 30px; hyphens: auto; overflow-wrap: anywhere; text-wrap: balance; }
[data-kind="genero"] { --cor-kind: var(--vermelho); }
[data-kind="protagonista"], [data-kind="personagemB"] { --cor-kind: var(--lilas); }
[data-kind="personagemA"] { --cor-kind: var(--rosa); }
[data-kind="cenario"] { --cor-kind: var(--menta); }
[data-kind="objeto"] { --cor-kind: var(--mostarda); }
[data-kind="twist"] { --cor-kind: var(--vermelho); }

/* ------------------------------------------------------------ sorteio */
.maquina {
  margin-top: 18px; padding: 18px 14px 20px; background: var(--papel-2); border: var(--borda); border-radius: var(--torto-2);
  box-shadow: var(--sombra); display: grid; gap: 18px; justify-items: center; position: relative;
}
.maquina::before, .maquina::after { content: ''; position: absolute; top: -14px; width: 84px; height: 28px; background: rgba(134, 212, 180, .8); border-left: 2px dashed rgba(35, 31, 28, .25); border-right: 2px dashed rgba(35, 31, 28, .25); }
.maquina::before { left: 8%; transform: rotate(-5deg); }
.maquina::after { right: 8%; transform: rotate(4deg); background: rgba(245, 159, 192, .8); }
.cartas { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: 100%; max-width: 380px; }
.cartas .carta-flip:nth-child(odd) { transform: rotate(-1.4deg); }
.cartas .carta-flip:nth-child(even) { transform: rotate(1.2deg); }
.mais-romance { position: absolute; left: 50%; top: 25%; transform: translate(-50%, -50%); z-index: 3; width: 40px; height: 40px; display: grid; place-items: center; font: 400 1.8rem var(--f-titulo); background: var(--rosa); border: var(--borda); border-radius: 50%; }
.btn-sortear { width: min(100%, 360px); }
.missao { margin-top: 24px; display: grid; gap: 16px; justify-items: center; animation: entra .4s ease both; }
.postit {
  background: #ffe97a; padding: 18px 22px 22px; max-width: 420px; text-align: center; transform: rotate(-1.5deg);
  box-shadow: 3px 5px 0 rgba(35, 31, 28, .25); position: relative; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}
.postit::after { content: ''; position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; background: #d9c24f; }
.postit h2 { font: 400 1.5rem var(--f-titulo); text-transform: uppercase; }
.postit p { font: 400 1.4rem/1.2 var(--f-mao); margin-top: 4px; }
.eggs { display: grid; gap: 2px; text-align: center; }
.eggs span { font: 400 1.1rem var(--f-mao); color: var(--tinta-2); font-style: italic; }
.missao-botoes { display: grid; gap: 12px; width: min(100%, 360px); }
.covarde { font: 400 1.25rem var(--f-mao); color: var(--vermelho-escuro); min-height: 1.4em; transform: rotate(-1deg); }

/* ------------------------------------------------------------ formulários */
.campo {
  width: 100%; padding: 14px 16px; font-size: 1.15rem; font-weight: 800; background: var(--branco);
  border: var(--borda); border-radius: var(--torto); box-shadow: inset 2px 2px 0 rgba(35, 31, 28, .1);
}
.campo::placeholder { color: #a39a8e; font-weight: 600; }
.campo:focus { outline: 3px solid var(--mostarda); outline-offset: 0; }
.campo-titulo { font-family: var(--f-titulo); font-weight: 400; font-size: 1.5rem; margin-top: 14px; }
.campo-sinopse {
  font-family: var(--f-mao); font-weight: 400; font-size: 1.3rem; line-height: 32px; resize: vertical; min-height: 200px;
  background-image: repeating-linear-gradient(transparent 0 31px, rgba(125, 183, 232, .55) 31px 32px); background-attachment: local; padding-top: 8px;
}
.rotulo { display: block; font-weight: 800; text-transform: uppercase; font-size: .8rem; letter-spacing: .08em; margin: 16px 0 6px; }
.contador { font: 400 1.1rem var(--f-mao); color: var(--tinta-2); margin-top: 6px; min-height: 1.5em; text-align: right; }
.contador.ok { color: var(--verde); } .contador.ruim { color: var(--vermelho-escuro); }
.form-botoes { display: grid; gap: 12px; margin-top: 14px; }
.aviso-estudio { display: flex; gap: 10px; align-items: center; margin-top: 14px; padding: 10px 14px; background: #ffe1dc; border: var(--borda); border-radius: var(--torto); font-weight: 800; transform: rotate(-.6deg); }
.aviso-estudio .ic { color: var(--vermelho-escuro); }
.aviso-leve { background: #fff3cf; }
.previa { position: relative; width: min(54%, 230px); margin: 8px auto 0; transform: rotate(-2deg); }
.previa img, .arte-grande img { width: 100%; border: 3px solid var(--tinta); box-shadow: 6px 6px 0 var(--tinta); background: #fff; }
.previa figcaption { font: 400 1.1rem var(--f-mao); text-align: center; margin-top: 10px; }
.fita { position: absolute; top: -13px; left: 50%; width: 92px; height: 26px; transform: translateX(-50%) rotate(-4deg); background: rgba(247, 194, 68, .82); border-left: 2px dashed rgba(35, 31, 28, .2); border-right: 2px dashed rgba(35, 31, 28, .2); }

/* ------------------------------------------------------------ checklist */
.prancheta { position: relative; background: var(--branco); border: var(--borda); border-radius: 12px; box-shadow: var(--sombra); padding: 40px 18px 24px; margin-top: 18px; display: grid; gap: 8px; }
.prancheta-clipe { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); width: 110px; height: 36px; background: #9aa0a6; border: var(--borda); border-radius: 10px 10px 4px 4px; }
.prancheta-clipe::after { content: ''; position: absolute; left: 50%; top: 7px; transform: translateX(-50%); width: 34px; height: 12px; border-radius: 8px; background: var(--papel); border: 2px solid var(--tinta); }
.prancheta .titulo-tela { font-size: clamp(1.4rem, 5.4vw, 2rem); text-transform: uppercase; }
.perguntas { display: grid; gap: 20px; margin: 16px 0 22px; counter-reset: q; }
.pergunta { counter-increment: q; padding-top: 16px; border-top: 2px dashed rgba(35, 31, 28, .25); }
.pergunta.surgindo { animation: entra .35s ease both; }
.pergunta legend { font-weight: 800; font-size: 1.08rem; line-height: 1.3; padding: 0; }
.pergunta legend::before { content: counter(q) '. '; font-family: var(--f-titulo); font-weight: 400; color: var(--vermelho-escuro); }
.opcoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.opcao { position: relative; }
.opcao input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
.opcao span { display: inline-flex; align-items: center; min-height: 46px; padding: 6px 16px; font: 400 1.22rem var(--f-mao); background: var(--papel); border: var(--borda); border-radius: var(--torto); transition: transform .2s var(--mola), background .15s; }
.opcao input:checked + span { background: var(--mostarda); transform: rotate(-2deg) scale(1.05); box-shadow: var(--sombra-p); }
.opcao input:focus-visible + span { outline: 3px solid #2d5bd1; outline-offset: 3px; }

/* ------------------------------------------------------------ resultado */
.analise { display: grid; justify-items: center; gap: 14px; padding: 12vh 0; text-align: center; }
.analise-doodle { width: 110px; animation: boia 1.6s ease-in-out infinite; }
.analise-msg { font: 400 1.6rem/1.2 var(--f-mao); min-height: 2.4em; max-width: 22ch; }
.esqueleto { display: grid; gap: 10px; width: min(100%, 300px); }
.esqueleto i { height: 16px; border-radius: 8px; background: linear-gradient(90deg, rgba(35, 31, 28, .08) 25%, rgba(35, 31, 28, .18) 50%, rgba(35, 31, 28, .08) 75%); background-size: 200% 100%; animation: brilho 1.2s linear infinite; }
.esqueleto i:nth-child(2) { width: 80%; } .esqueleto i:nth-child(3) { width: 55%; }
@keyframes brilho { to { background-position: -200% 0; } }

.resultado { display: grid; justify-items: center; gap: 18px; text-align: center; padding-top: 10px; }
.selo {
  width: 210px; height: 210px; border-radius: 50%; display: grid; place-content: center; gap: 0; padding: 20px;
  border: 7px solid currentColor; outline: 3px dashed currentColor; outline-offset: -20px; background: var(--branco);
  transform: rotate(-9deg); animation: carimba .5s var(--mola) both; box-shadow: 0 0 0 6px var(--papel);
}
.selo-ok { color: #d9622b; } .selo-ok.selo-top { color: var(--verde); } .selo-ruim { color: var(--vermelho-escuro); }
.selo-num { font: 400 4.2rem/1 var(--f-titulo); }
.selo span { font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; max-width: 13ch; margin: 0 auto; line-height: 1.15; }
@keyframes carimba { from { transform: rotate(-30deg) scale(2.4); opacity: 0; } }
.veredito { font: 400 clamp(1.7rem, 6.6vw, 2.4rem)/1.1 var(--f-titulo); text-wrap: balance; }
.placar { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; text-align: left; }
.placar div { background: var(--branco); border: var(--borda); border-radius: var(--torto); padding: 10px 14px; }
.placar div:nth-child(odd) { transform: rotate(-.7deg); } .placar div:nth-child(even) { transform: rotate(.7deg); }
.placar dt { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-2); line-height: 1.2; }
.placar dd { font: 400 1.35rem/1.15 var(--f-titulo); margin-top: 4px; }
.comentario { font: 400 1.55rem/1.2 var(--f-mao); max-width: 26ch; }
.comentario cite { display: block; font-size: 1.05rem; color: var(--tinta-2); font-style: normal; margin-top: 4px; }
.comentario cite::before { content: '~ '; }
.egg-resultado { font: 400 1.2rem var(--f-mao); background: var(--tinta); color: var(--papel); padding: 4px 16px; border-radius: 99px; transform: rotate(-1.5deg); }

/* ------------------------------------------------------------ ficha */
.ficha-wrap { display: grid; gap: 30px; margin-top: 26px; }
.arte-grande { position: relative; width: min(100%, 420px); margin: 0 auto; transform: rotate(-1.2deg); }
.ficha {
  position: relative; background: var(--branco); border: var(--borda); box-shadow: var(--sombra); padding: 22px 18px 74px;
  font-family: var(--f-memo); border-radius: 4px; overflow: hidden;
}
.ficha header { text-align: center; border-bottom: 3px double var(--tinta); padding-bottom: 12px; margin-bottom: 14px; }
.ficha-org { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.ficha h2 { font: 400 1.6rem var(--f-titulo); text-transform: uppercase; margin: 4px 0; }
.ficha-reg { font-size: .85rem; color: var(--tinta-2); }
.ficha dl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.ficha dl div { border-bottom: 1.5px dotted rgba(35, 31, 28, .5); padding-bottom: 6px; min-width: 0; }
.ficha .f-larga { grid-column: 1 / -1; }
.ficha dt { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); }
.ficha dd { font-size: 1.02rem; line-height: 1.35; overflow-wrap: anywhere; }
.ficha .f-titulo { font: 400 1.6rem/1.1 var(--f-titulo); }
.ficha .f-sinopse { font: 400 1.22rem/1.3 var(--f-mao); white-space: pre-wrap; }
.ficha .f-nota { font: 400 1.5rem var(--f-titulo); margin-right: 6px; }
.ficha dd em { display: block; font: 400 1.15rem var(--f-mao); color: var(--tinta-2); }
.ficha-carimbo {
  position: absolute; bottom: 16px; right: 10px; transform: rotate(-8deg); font: 400 1.25rem var(--f-titulo); text-transform: uppercase; letter-spacing: .08em;
  padding: 2px 14px; border: 4px solid currentColor; border-radius: 8px; opacity: .78; mix-blend-mode: multiply;
}
.ficha-carimbo.ok { color: var(--verde); } .ficha-carimbo.ruim { color: var(--vermelho-escuro); }
.acoes-finais { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 26px; }
.acoes-finais .btn { font-size: .98rem; padding-inline: .6em; }
.julgamento { position: relative; margin-top: 44px; padding: 26px 18px 28px; text-align: center; background: var(--tinta); color: var(--papel); border-radius: var(--torto-2); display: grid; gap: 10px; justify-items: center; transform: rotate(-.5deg); }
.julgamento h2 { font: 400 1.9rem var(--f-titulo); text-transform: uppercase; color: var(--mostarda); }
.julgamento p { font: 400 1.35rem/1.2 var(--f-mao); max-width: 26ch; }
.julgamento .btn { margin-top: 8px; box-shadow: 4px 4px 0 var(--mostarda); }
.julgamento-seta { position: absolute; top: -34px; left: 10%; width: 60px; height: 60px; transform: rotate(70deg); }

/* ------------------------------------------------------------ galeria */
.galeria-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 26px 18px; margin-top: 26px; }
.capa { display: grid; gap: 3px; text-align: left; align-content: start; transform: rotate(var(--giro, 0deg)); transition: transform .25s var(--mola); }
.capa:hover { transform: rotate(0) translateY(-4px); }
.capa-img { position: relative; display: block; border: var(--borda); box-shadow: var(--sombra); background: #fff; aspect-ratio: 2 / 3; overflow: hidden; margin-bottom: 8px; }
.capa-img img { width: 100%; height: 100%; object-fit: cover; }
.capa-nota { position: absolute; right: 6px; bottom: 6px; font: 400 1rem var(--f-titulo); background: var(--branco); border: 2px solid currentColor; padding: 0 8px; border-radius: 99px; transform: rotate(-6deg); font-style: normal; }
.capa-nota.ok { color: var(--verde); } .capa-nota.ruim { color: var(--vermelho-escuro); }
.capa strong { font: 400 1.12rem/1.1 var(--f-titulo); overflow-wrap: anywhere; }
.capa small { font: 400 1rem/1.15 var(--f-mao); color: var(--tinta-2); }
.capa-esqueleto i { display: block; aspect-ratio: 2 / 3; border: var(--borda); margin-bottom: 8px; }
.capa-esqueleto i, .capa-esqueleto b { background: linear-gradient(90deg, rgba(35, 31, 28, .06) 25%, rgba(35, 31, 28, .14) 50%, rgba(35, 31, 28, .06) 75%); background-size: 200% 100%; animation: brilho 1.2s linear infinite; }
.capa-esqueleto b { display: block; height: 14px; border-radius: 7px; width: 80%; }
.capa-esqueleto b:last-child { width: 50%; }

.vazio { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 8vh 0; }
.vazio .doodle { width: 120px; height: 120px; animation: boia 4s ease-in-out infinite; }
.vazio h2 { font: 400 1.7rem var(--f-titulo); }
.vazio p { font: 400 1.3rem/1.25 var(--f-mao); color: var(--tinta-2); max-width: 28ch; margin-bottom: 10px; }

.carregando { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; font: 400 1.5rem var(--f-mao); }
.carregando-lapis { width: 84px; animation: rabisca 1s ease-in-out infinite; }
@keyframes rabisca { 0%, 100% { transform: translate(-12px, 0) rotate(-8deg); } 50% { transform: translate(12px, -6px) rotate(6deg); } }

/* ------------------------------------------------------------ toast, modal, confete */
.toast {
  position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 300; transform: translate(-50%, 30px) rotate(-1deg); opacity: 0;
  width: max-content; max-width: min(92vw, 440px); padding: 10px 18px; text-align: center; pointer-events: none;
  font: 400 1.2rem/1.2 var(--f-mao); background: var(--tinta); color: var(--papel); border-radius: var(--torto); box-shadow: 3px 3px 0 var(--mostarda);
  transition: transform .3s var(--mola), opacity .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0) rotate(-1deg); }
body.modo-editor .toast { bottom: auto; top: calc(122px + env(safe-area-inset-top)); }

.modal-wrap { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(35, 31, 28, .55); opacity: 0; transition: opacity .16s; overflow-y: auto; }
.modal-wrap.aberto { opacity: 1; } .modal-wrap.saindo { opacity: 0; }
.modal {
  position: relative; width: min(100%, 440px); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 26px 20px 22px;
  background: var(--papel); border: var(--borda); border-radius: var(--torto-2); box-shadow: 7px 7px 0 var(--tinta);
  transform: translateY(16px) rotate(-1deg) scale(.96); transition: transform .3s var(--mola);
}
.modal-wrap.aberto .modal { transform: none; }
.modal-x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; }
.modal-titulo { font: 400 1.6rem/1.1 var(--f-titulo); padding-right: 34px; text-wrap: balance; }
.modal-texto { font: 400 1.3rem/1.25 var(--f-mao); margin-top: 8px; color: var(--tinta-2); }
.modal-acoes { display: grid; gap: 10px; margin-top: 20px; }
.modal .campo { margin-top: 14px; }
.retomar { text-align: center; } .retomar .modal-titulo { padding: 0; }
.retomar-doodle { width: 86px; height: 86px; margin: 0 auto 6px; display: block; }

.modal-drama .modal { background: transparent; border: 0; box-shadow: none; overflow: visible; padding: 0; width: min(100%, 320px); }
.modal-drama { background: rgba(20, 16, 14, .86); }
.drama { display: grid; justify-items: center; gap: 18px; text-align: center; color: var(--papel); }
.drama-aviso { font: 400 1.5rem var(--f-mao); animation: pisca .7s steps(2) infinite; }
.drama .carta-flip { width: min(74vw, 270px); }
.drama .carta-frente p { font-size: 1.45rem; color: var(--tinta); }
.drama .carta-frente .carta-rot { color: var(--tinta); }
.drama-fim { font: 400 1.35rem/1.15 var(--f-titulo); color: var(--mostarda); letter-spacing: .03em; }
.drama-fim, .drama .btn, .drama .modal-x { opacity: 0; transform: translateY(8px); transition: .4s ease; }
.drama.revelado .drama-fim, .drama.revelado .btn { opacity: 1; transform: none; }
.drama.revelado .drama-aviso { animation: none; opacity: .6; }
@keyframes pisca { 50% { opacity: .25; } }

.modal-memo .modal { background: var(--branco); border-radius: 3px; transform-origin: top center; font-family: var(--f-memo); }
.memo { display: grid; gap: 12px; position: relative; }
.memo-cab { font-size: .85rem; letter-spacing: .08em; border-bottom: 3px double var(--tinta); padding-bottom: 10px; padding-right: 40px; }
.memo-cab small { letter-spacing: 0; color: var(--tinta-2); }
.memo-rot { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--tinta-2); }
.memo-txt { font-size: 1.35rem; line-height: 1.3; }
.memo-carimbo { justify-self: end; font: 400 1.3rem var(--f-titulo); color: var(--vermelho-escuro); border: 4px solid currentColor; border-radius: 8px; padding: 0 12px; transform: rotate(-8deg); opacity: .8; letter-spacing: .08em; animation: carimba .45s var(--mola) .25s both; }

.modal-texto .campo-texto { font-size: 1.6rem; text-align: center; min-height: 92px; resize: none; line-height: 1.1; }
.fontes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.fonte { min-height: 48px; padding: 2px 4px; background: var(--branco); border: 2px solid var(--tinta); border-radius: 12px; line-height: 1; overflow: hidden; }
.fonte[aria-checked="true"] { background: var(--mostarda); box-shadow: var(--sombra-p); }
.check { display: flex; gap: 10px; align-items: center; margin-top: 14px; font: 400 1.12rem/1.2 var(--f-mao); min-height: 44px; }
.check input { width: 24px; height: 24px; accent-color: var(--tinta); flex: none; }

.confete { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 400; }

/* ------------------------------------------------------------ paleta */
.paleta { display: flex; gap: 8px; }
.cor { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--cor); border: 2.5px solid var(--tinta); position: relative; transition: transform .2s var(--mola); }
.cor::after { content: ''; position: absolute; inset: -7px; } /* área de toque maior que a bolinha */
.cor.ativa { transform: scale(1.18); box-shadow: 0 0 0 3px var(--papel), 0 0 0 5.5px var(--tinta); }
.paleta-grande, .paleta-texto { flex-wrap: wrap; gap: 12px; }
.paleta-texto { margin-top: 14px; justify-content: center; }
.paleta-grande .cor, .paleta-texto .cor { width: 38px; height: 38px; }

/* ------------------------------------------------------------ EDITOR (mobile primeiro) */
#tela-editor { position: fixed; inset: 0; z-index: 10; }
.editor {
  position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--papel);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.ed-top { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 10px 6px; }
.ed-top .btn-ic { width: 44px; height: 44px; }
.ed-briefbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 11px; font: 400 1.02rem var(--f-titulo); text-transform: uppercase; background: var(--menta); border: var(--borda); border-radius: var(--torto); box-shadow: var(--sombra-p); }
.ed-salvo { flex: 1; min-width: 0; text-align: right; font: 400 .92rem var(--f-mao); color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-pronto { min-height: 44px; font-size: 1.02rem; padding: 0 11px; gap: .3em; box-shadow: var(--sombra-p); }

.ed-strip { flex: none; display: flex; gap: 8px; padding: 2px 10px 8px; overflow-x: auto; scrollbar-width: none; }
.ed-strip::-webkit-scrollbar { display: none; }
.ed-strip > * { flex: 1 0 auto; max-width: 100%; }
.btn-twist, .btn-demand { min-height: 44px; font-size: .98rem; padding: 0 14px; box-shadow: var(--sombra-p); gap: 8px; }
.btn-twist { background: var(--vermelho); color: #fff; text-shadow: 1px 1px 0 rgba(0, 0, 0, .3); }
.btn-demand { background: var(--azul); }
.btn-twist small, .btn-demand small { font: 400 .95rem var(--f-mao); text-transform: none; text-shadow: none; opacity: .9; }
.btn.travado { background: var(--papel-2); color: var(--tinta-2); text-shadow: none; border-style: dashed; box-shadow: none; }
.btn.pulsa { animation: pulsa 1.6s ease-in-out infinite; }
@keyframes pulsa { 0%, 100% { transform: rotate(-.6deg); } 50% { transform: rotate(.8deg) scale(1.025); } }
.mini-carta {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left;
  min-height: 44px; padding: 3px 12px; border: var(--borda); border-radius: var(--torto); box-shadow: var(--sombra-p); min-width: 0; flex: 1 1 0 !important;
}
.mini-carta .ic { grid-row: span 2; }
.mini-twist { background: #ffd9d3; } .mini-demand { background: #dcecfa; }
.mc-rot { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; line-height: 1; }
.mc-txt { font: 400 1rem/1.1 var(--f-mao); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.ed-main { flex: 1; min-height: 0; position: relative; }
.ed-vp {
  position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: crosshair; outline-offset: -3px;
  background-color: var(--mesa); background-image: radial-gradient(circle, rgba(35, 31, 28, .2) 1px, transparent 1.4px); background-size: 18px 18px;
  border-block: var(--borda);
}
.ed-vp[data-tool="mao"], .ed-vp.pode-pan { cursor: grab; } .ed-vp.panning { cursor: grabbing; }
.ed-vp[data-tool="texto"] { cursor: text; } .ed-vp[data-tool="balde"] { cursor: cell; }
.ed-stagebox { position: absolute; transform-origin: 0 0; box-shadow: 0 0 0 2.5px var(--tinta), 6px 6px 0 2.5px rgba(35, 31, 28, .85); background: #fff; will-change: transform; }
.ed-bg, .ed-layers-stack, .ed-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ed-textbox { position: absolute; border: 2px dashed #2d5bd1; pointer-events: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .8); }
.ed-handle { position: absolute; right: 0; bottom: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--mostarda); border: 3px solid var(--tinta); pointer-events: auto; touch-action: none; cursor: nwse-resize; }
.ed-handle::after { content: ''; position: absolute; inset: -9px; }
.ed-cursor { position: absolute; left: 0; top: 0; border-radius: 50%; border: 1.5px solid rgba(20, 20, 20, .85); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85); pointer-events: none; will-change: transform; }
.ed-zoomtag { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); padding: 4px 14px; min-height: 36px; font: 400 1.05rem var(--f-mao); background: var(--tinta); color: var(--papel); border-radius: 99px; }

.ed-right { display: contents; }
.ed-textprops { flex: none; display: flex; gap: 6px; padding: 8px 10px 0; overflow-x: auto; scrollbar-width: none; justify-content: safe center; }
.ed-textprops .btn-ic { width: 44px; height: 44px; }
.ed-tools { flex: none; position: relative; padding: 8px 8px 8px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.tool-row { display: flex; align-items: center; gap: 6px; }
.tools-sub .btn-ic { width: 44px; height: 44px; }
.btn-cor, .btn-tam { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: var(--borda); border-radius: 50%; background: var(--branco); box-shadow: var(--sombra-p); }
.btn-cor i { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--tinta); background: var(--tinta); }
.btn-tam i, .tam-preview i { display: block; border-radius: 50%; background: var(--tinta); box-shadow: 0 0 0 1px rgba(35, 31, 28, .4); }
.paleta-rapida { flex: 1; min-width: 0; overflow-x: auto; padding: 8px 6px; margin: -4px 0; scrollbar-width: none; mask-image: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 14px), transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 14px), transparent); }
.paleta-rapida::-webkit-scrollbar { display: none; }
.tools-main { gap: 4px; }
.btn-tool { flex: 1 1 0; min-width: 0; height: 50px; display: grid; place-items: center; border: var(--borda); border-radius: 13px 16px 12px 17px / 16px 12px 17px 13px; background: var(--branco); transition: transform .2s var(--mola), background .15s; }
.btn-tool .ic { width: 25px; height: 25px; }
.btn-tool span { display: none; }
.btn-tool[aria-pressed="true"] { background: var(--mostarda); transform: translateY(-5px) rotate(-3deg); box-shadow: var(--sombra-p); }
.btn-tool:disabled { opacity: .35; }
.btn-hist { background: var(--papel-2); }
.tool-sep { width: 2px; height: 30px; flex: none; background: rgba(35, 31, 28, .25); border-radius: 2px; margin: 0 1px; }

.pop {
  display: none; position: absolute; left: 8px; right: 8px; bottom: calc(100% + 4px); z-index: 30; padding: 14px 16px 16px;
  background: var(--papel); border: var(--borda); border-radius: var(--torto-2); box-shadow: var(--sombra);
}
.editor[data-pop="cor"] .pop-cor, .editor[data-pop="tam"] .pop-tam, .editor[data-pop="mais"] .pop-mais { display: block; animation: sobe .22s var(--mola) both; }
@keyframes sobe { from { opacity: 0; transform: translateY(12px); } }
.ed-h3 { font: 800 .74rem var(--f-corpo); text-transform: uppercase; letter-spacing: .1em; color: var(--tinta-2); margin-bottom: 10px; }
.cor-custom { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; font: 400 1.2rem var(--f-mao); min-height: 46px; cursor: pointer; }
input[type="color"] { -webkit-appearance: none; appearance: none; width: 46px; height: 46px; padding: 0; border: var(--borda); border-radius: 50%; overflow: hidden; background: none; cursor: pointer; }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; } input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
input[type="color"]::-moz-color-swatch { border: 0; border-radius: 50%; }
.tam-linha { display: flex; align-items: center; gap: 14px; }
.tam-preview { flex: none; width: 70px; height: 70px; display: grid; place-items: center; background: var(--branco); border: 2px dashed rgba(35, 31, 28, .4); border-radius: 50%; overflow: hidden; }
.mais-grade { display: flex; flex-wrap: wrap; gap: 10px; }
.dica { font: 400 1.05rem var(--f-mao); color: var(--tinta-2); margin-top: 10px; }

input[type="range"] { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; width: 100%; height: 44px; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 10px; border-radius: 8px; background: var(--branco); border: 2px solid var(--tinta); }
input[type="range"]::-moz-range-track { height: 8px; border-radius: 8px; background: var(--branco); border: 2px solid var(--tinta); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -12px; border-radius: 50%; background: var(--mostarda); border: 3px solid var(--tinta); }
input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--mostarda); border: 3px solid var(--tinta); }

/* gavetas de baixo (briefing e camadas) */
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; max-height: 78dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: 8px 16px calc(22px + env(safe-area-inset-bottom)); background: var(--papel); border-top: var(--borda); border-radius: 26px 22px 0 0;
  box-shadow: 0 -5px 0 rgba(35, 31, 28, .18); transform: translateY(105%); transition: transform .32s cubic-bezier(.3, 1.15, .5, 1); visibility: hidden;
}
.editor[data-sheet-aberta="brief"] .ed-brief, .editor[data-sheet-aberta="layers"] .ed-layers { transform: none; visibility: visible; }
.sheet-pega { width: 100%; height: 30px; display: grid; place-items: center; cursor: pointer; }
.sheet-pega::after { content: ''; width: 54px; height: 6px; border-radius: 4px; background: rgba(35, 31, 28, .35); }
.sheet-fundo { position: fixed; inset: 0; z-index: 50; background: rgba(35, 31, 28, .45); opacity: 0; pointer-events: none; transition: opacity .2s; }
.editor[data-sheet-aberta] .sheet-fundo { opacity: 1; pointer-events: auto; }
.ed-h { font: 400 1.5rem var(--f-titulo); text-transform: uppercase; }
.ed-sub { font: 400 1.15rem/1.2 var(--f-mao); color: var(--tinta-2); margin: 2px 0 14px; }

.brief-lista { display: grid; gap: 10px; }
.brief-item { display: grid; gap: 1px; padding: 8px 14px 9px; background: var(--branco); border: var(--borda); border-left: 12px solid var(--cor-kind); border-radius: 6px 16px 14px 6px / 6px 14px 16px 6px; }
.brief-item:nth-child(odd) { transform: rotate(-.5deg); } .brief-item:nth-child(even) { transform: rotate(.5deg); }
.brief-rot { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-2); }
.brief-item strong { font: 400 1.22rem/1.12 var(--f-titulo); }
.ed-brief .twist-zona { display: grid; gap: 10px; margin-top: 16px; }
.ed-brief .mini-carta { padding: 9px 12px; }
.ed-brief .mc-txt { white-space: normal; font-size: 1.15rem; }
.ed-brief .btn { flex-wrap: wrap; padding-block: 6px; }

.layers-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.layer-opac { display: flex; align-items: center; gap: 10px; margin: 8px 0 10px; font: 400 1.1rem var(--f-mao); }
.layer-opac output { width: 3.2em; text-align: right; }
.layers-lista { display: grid; gap: 8px; }
.layer { display: flex; align-items: center; gap: 6px; padding: 5px; background: var(--branco); border: 2px solid var(--tinta); border-radius: 14px; min-width: 0; }
.layer.ativa { background: #fff1c4; box-shadow: var(--sombra-p); }
.layer-corpo { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 48px; text-align: left; }
.layer-thumb { flex: none; width: 32px; height: auto; border: 2px solid var(--tinta); border-radius: 3px; }
.layer-nome { font-weight: 800; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.layer-botoes { display: flex; gap: 3px; flex: none; }
.layer.ativa { flex-wrap: wrap; }
.layer.ativa .layer-botoes { flex-basis: 100%; justify-content: flex-end; gap: 8px; padding: 0 2px 2px; }
.layer:not(.ativa) .layer-botoes [data-lact="renomear"], .layer:not(.ativa) .layer-botoes [data-lact="apagar"] { display: none; }
.btn-olho { width: 42px; height: 42px; box-shadow: none; border-width: 2px; }
.btn-olho[aria-pressed="false"] { background: var(--papel-2); color: var(--tinta-2); }
.layer-fundo { padding: 8px 10px; gap: 12px; background: var(--papel-2); border-style: dashed; }
.layer-fundo small { font: 400 1rem var(--f-mao); color: var(--tinta-2); margin-left: auto; }
.fundo-cor { position: relative; width: 42px; height: 42px; flex: none; cursor: pointer; }
.fundo-cor input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.fundo-cor i { display: block; width: 100%; height: 100%; border-radius: 50%; border: var(--borda); }
.so-mobile { display: block; }

/* ------------------------------------------------------------ telas um pouco maiores */
@media (min-width: 400px) {
  .btn-tool { height: 52px; }
  .acoes-finais .btn { font-size: 1.05rem; }
}
@media (max-width: 350px) {
  body { font-size: 16px; }
  .ed-briefbtn span { display: none; }
  .btn-tool .ic { width: 22px; height: 22px; }
  .tools-main { gap: 3px; } .tool-sep { display: none; }
  .acoes-finais { grid-template-columns: 1fr; }
  .tipo-carta { grid-template-columns: 56px 1fr; } .tipo-doodle { width: 56px; height: 56px; }
}

@media (min-width: 720px) {
  .tela { padding-inline: 28px; }
  .cartas { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 760px; gap: 18px; }
  .mais-romance { left: 25%; top: 50%; }
  .maquina { padding: 30px 26px; }
  .tipos { grid-template-columns: 1fr 1fr; }
  .tipo-carta { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 26px 20px; row-gap: 8px; }
  .tipo-doodle { grid-row: auto; width: 96px; height: 96px; }
  .tipo-especial { grid-column: 1 / -1; }
  .miolo-duplo { grid-template-columns: 300px 1fr; align-items: start; gap: 44px; }
  .previa { width: 100%; margin-top: 12px; }
  .form-botoes { grid-template-columns: repeat(auto-fit, minmax(200px, max-content)); }
  .prancheta { padding: 46px 40px 34px; }
  .ficha-wrap { grid-template-columns: minmax(260px, 380px) 1fr; align-items: start; max-width: 980px; }
  .tela-final .miolo, .tela-detalhe .miolo { max-width: 980px; }
  .ficha { padding: 28px 30px 78px; }
  .acoes-finais { grid-template-columns: repeat(4, 1fr); }
  .dd { width: 84px; height: 84px; }
  .dd1 { left: 9%; top: 9%; } .dd2 { right: 10%; top: 12%; width: 100px; height: 100px; } .dd4 { left: 12%; bottom: 30%; }
  .dd6 { right: 12%; bottom: 14%; width: 96px; height: 96px; } .dd8 { right: 18%; top: 44%; width: 48px; } .dd10 { left: 20%; top: 30%; width: 40px; }
  .fantasma-btn { left: 16%; bottom: 10%; width: 92px; height: 92px; }
  .trilha li span { opacity: .55; position: static; } .trilha li { width: auto; min-width: 52px; }
  .trilha::before { left: 26px; right: 26px; }
  .trilha li.atual span { opacity: 1; font-weight: 700; }
}

/* ------------------------------------------------------------ EDITOR no desktop: três colunas de verdade */
@media (min-width: 1000px) {
  .editor { display: grid; grid-template-columns: 300px minmax(0, 1fr) 330px; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: 'top top top' 'brief main right'; }
  .ed-top { grid-area: top; padding: 12px 18px; border-bottom: var(--borda); }
  .ed-briefbtn, .ed-strip, .sheet-pega, .sheet-fundo, .tools-sub, .so-mobile { display: none !important; }
  .ed-salvo { text-align: left; padding-left: 10px; font-size: 1.15rem; }
  .btn-pronto { min-height: 48px; font-size: 1.15rem; padding: 0 22px; }

  .sheet { position: static; transform: none; visibility: visible; max-height: none; border: 0; border-radius: 0; box-shadow: none; padding: 20px 18px; background: transparent; transition: none; }
  .ed-brief { grid-area: brief; border-right: var(--borda); overflow-y: auto; }
  .ed-main { grid-area: main; }
  .ed-vp { border-block: 0; }
  .ed-right { grid-area: right; display: flex; flex-direction: column; border-left: var(--borda); overflow-y: auto; overscroll-behavior: contain; }
  .ed-tools { order: 1; padding: 18px; gap: 18px; }
  .ed-textprops { order: 2; flex-wrap: wrap; justify-content: flex-start; padding: 0 18px 14px; }
  .ed-layers { order: 3; border-top: 2.5px dashed rgba(35, 31, 28, .3); }
  .tools-main { order: -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .tool-sep { display: none; }
  .btn-tool { height: 66px; align-content: center; gap: 1px; }
  .btn-tool span { display: block; font: 400 .95rem/1 var(--f-mao); }
  .btn-tool[aria-pressed="true"] { transform: rotate(-2.5deg) scale(1.04); }
  .pop { display: block !important; position: static; padding: 0; border: 0; box-shadow: none; background: none; animation: none !important; }
  .paleta-grande { gap: 10px; }
  .paleta-grande .cor { width: 34px; height: 34px; }
  .layer-botoes .btn-p { width: 34px; height: 34px; }
  .btn-olho { width: 38px; height: 38px; }
  body.modo-editor .toast { top: auto; bottom: 26px; }
}

@media (min-width: 1000px) and (max-height: 760px) {
  .btn-tool { height: 56px; }
  .ed-tools { gap: 12px; padding: 12px 18px; }
}

/* celular deitado: ferramentas vão pro lado pra sobrar altura pro desenho */
@media (max-width: 999px) and (orientation: landscape) and (max-height: 520px) {
  .editor { display: grid; grid-template-columns: minmax(0, 1fr) 236px; grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: 'top top' 'main strip' 'main tools'; }
  .ed-top { grid-area: top; padding-block: 4px; }
  .ed-strip { grid-area: strip; flex-wrap: wrap; padding-top: 6px; }
  .ed-main { grid-area: main; } .ed-vp { border-right: var(--borda); border-bottom: 0; }
  .ed-tools { grid-area: tools; align-content: end; overflow-y: auto; }
  .ed-textprops { grid-area: tools; align-self: start; z-index: 2; flex-wrap: wrap; background: var(--papel); }
  .tools-main { display: grid; grid-template-columns: repeat(4, 1fr); } .tool-sep { display: none; }
  .tools-sub { flex-wrap: wrap; } .paleta-rapida { flex-basis: 100%; order: 5; }
  .pop { left: auto; right: 8px; width: 300px; bottom: 8px; position: fixed; }
}

/* ------------------------------------------------------------ menos movimento pra quem pediu */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .doodle { filter: none; }
}