/* Speed Games em Mangá — estilo.
   Bloco 1 (base): veio do claude.ai quando a página foi exportada. NÃO REMOVER: tem a regra que faz
   o atributo hidden esconder de verdade e as margens de segurança do iPad.
   Bloco 2: o estilo do app. */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}


/* Speed Games em Mangá v2.0.1
   Duas arrumações da mesma ferramenta: mesa (computador: barra, palco, inspetor e trilho)
   e toque (iPad e celular, à moda do Procreate: ícones, balões, barra lateral e gestos).
   Paleta e tipos do design system Speed Games; o palco é sempre papel e nanquim. */
:root {
  --papel: #F3EEE4;
  --papel-2: #E4DCCB;
  --grafite: #14161F;
  --grafite-suave: #5F5A52;
  --linha: #CFC6B4;
  --turbo: #C23B38;
  --turbo-texto: #B8332F;
  --circuito: #0046F4;
  --circuito-texto: #0046F4;
  --sobre-cor: #F3EEE4;
  --palco: #DCD5C6;
  --nanquim: #14161F;
  --folha: #FBFAF6;
  --display: "Saira Condensed", "Arial Narrow", sans-serif;
  --sans: "Saira", system-ui, sans-serif;
  --r-sm: 8px;
  --r-pill: 999px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #14161F; --papel-2: #2A2E3C; --grafite: #F3EEE4; --grafite-suave: #A29C92;
    --linha: #3A3E4E; --turbo-texto: #EE6D69; --circuito-texto: #6E92FF; --palco: #0D0F16;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papel: #14161F; --papel-2: #2A2E3C; --grafite: #F3EEE4; --grafite-suave: #A29C92;
  --linha: #3A3E4E; --turbo-texto: #EE6D69; --circuito-texto: #6E92FF; --palco: #0D0F16;
  color-scheme: dark;
}
/* temas da ferramenta: creme, vermelho e azul (paleta do Estúdio de Capas). O desenho em mangá não muda. */
:root[data-tema] { color-scheme: light; }
:root[data-tema="creme"] {
  --papel: #F3EEE4; --papel-2: #E4DCCB; --grafite: #14161F; --grafite-suave: #5F5A52; --linha: #CFC6B4;
  --turbo: #DD4A47; --turbo-texto: #B8332F; --circuito-texto: #0046F4; --sobre-cor: #F3EEE4; --palco: #DCD5C6;
}
:root[data-tema="vermelho"] {
  --papel: #BB3835; --papel-2: #A93230; --grafite: #F3EEE4; --grafite-suave: #FBE3E1; --linha: #D26A66;
  --turbo: #14161F; --turbo-texto: #F3EEE4; --circuito-texto: #F3EEE4; --sobre-cor: #F3EEE4; --palco: #C23B38;
}
:root[data-tema="azul"] {
  --papel: #0046F4; --papel-2: #003CD2; --grafite: #F3EEE4; --grafite-suave: #D6E1FF; --linha: #4C7FF7;
  --turbo: #14161F; --turbo-texto: #F3EEE4; --circuito-texto: #F3EEE4; --sobre-cor: #F3EEE4; --palco: #003BCF;
}
:root[data-tema="marinho"] {
  --papel: #0D1B4D; --papel-2: #16276A; --grafite: #F3EEE4; --grafite-suave: #B7C0E2; --linha: #2C3F82;
  --turbo: #C23B38; --turbo-texto: #F08A87; --circuito-texto: #8FAAFF; --sobre-cor: #F3EEE4; --palco: #08133A;
}
/* ---------- camadas sobre o quadro: guias, anotações, comparação ---------- */
.camada { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.camada[hidden] { display: none; }
#comp-tela { position: absolute; inset: 0; width: 100%; height: 100%; cursor: default; }
.quadro.travado canvas { cursor: default; }
.trava-aviso:focus-visible { outline: 3px solid var(--circuito-texto); outline-offset: 2px; }
/* anotações presas na cena */
.nota {
  position: absolute; left: 0; top: 0; max-width: 200px;
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 4px;
  border-radius: var(--r-pill); border: 1.5px solid #14161F; background: #FBFAF6; color: #14161F;
  font: 600 12px/1.2 var(--sans); cursor: pointer; pointer-events: auto; text-align: left;
}
.nota i { flex: 0 0 auto; width: 19px; height: 19px; border-radius: 50%; background: #0046F4; color: #FBFAF6;
  display: grid; place-items: center; font: 700 11px/1 var(--sans); font-style: normal; }
.nota b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nota.escolhida { border-color: #DD4A47; box-shadow: 0 0 0 3px rgba(221, 74, 71, .32); }
.nota:focus-visible { outline: 3px solid #0046F4; outline-offset: 2px; }
.quadro.pondo-nota canvas { cursor: crosshair; }
.quadro.pondo-nota .nota { pointer-events: none; }
/* comparação lado a lado */
.comp-rot {
  position: absolute; top: 10px; padding: 5px 12px;
  border-radius: var(--r-pill); background: #FBFAF6; border: 1.5px solid #14161F; color: #14161F;
  font: 700 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* comparando, o palco é só a comparação: planta, joystick e dica saem da frente dos quadrinhos */
.palco.comparando .mapa, .palco.comparando .joy, .palco.comparando .dica { display: none; }
.escolhe select:focus-visible { outline: 3px solid var(--circuito-texto); outline-offset: 2px; }

/* ---------- boneco de escala ---------- */
.pegs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pegs[hidden] { display: none; }
.peg {
  position: absolute; left: 0; top: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%; pointer-events: auto; cursor: grab; touch-action: none;
  background: #0046F4; border: 2px solid #FBFAF6; box-shadow: 0 0 0 1.5px #14161F, 0 1px 4px rgba(0,0,0,.35);
  display: grid; place-items: center; font: 700 12px/1 var(--sans); color: #14161F;
}
.peg::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
@media (pointer: coarse) { .peg::before { inset: -9px; } }
.peg-corpo, .peg-girar { z-index: 2; }
.peg.pegando { z-index: 3; }
.peg:hover, .peg.pegando { box-shadow: 0 0 0 1.5px #14161F, 0 0 0 6px rgba(0,70,244,.25); }
.peg.pegando { cursor: grabbing; }
.peg[hidden] { display: none; }
.peg-corpo { width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 5px; background: #DD4A47; }
.peg-girar { width: 22px; height: 22px; margin: -11px 0 0 -11px; background: #FBFAF6; border-color: #DD4A47; }
.peg-quadril, .peg-tronco, .peg-pescoco { background: #14161F; }
.peg-olhar { background: #F2C230; }
#bon-poses-salvas:empty { display: none; }
.peg-sol { width: 26px; height: 26px; margin: -13px 0 0 -13px; background: #F2C230; font-size: 15px; z-index: 1; }
#grupo-boneco.inativo .deslizante, #grupo-boneco.inativo .seg { opacity: .5; }

:root { --dur: .18s; }
html, body { height: 100%; }
body {
  background: var(--papel); color: var(--grafite);
  font-family: var(--sans); font-size: 14px;
  overflow: hidden;
}
button, input, select { font: inherit; }
.i { width: 22px; height: 22px; display: block; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ================= estrutura =================
   mesa:  topo em cima; palco | inspetor | trilho
   toque: topo fino com ícones; palco cheio; o inspetor vira balão */
.app { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "topo" "palco"; }
.app[data-layout="mesa"] { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "topo topo topo" "palco insp trilho"; }
.topo { grid-area: topo; } .palco { grid-area: palco; } .inspetor { grid-area: insp; } .trilho { grid-area: trilho; }
.app[data-layout="mesa"] .so-toque, .app[data-layout="toque"] .so-mesa { display: none !important; }

/* ---------- barra do topo ---------- */
.topo {
  position: relative; z-index: 8;
  display: flex; align-items: center; gap: 6px; min-height: 56px;
  padding-block: 8px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: var(--papel); border-bottom: 1px solid var(--linha);
}
.marca { display: flex; align-items: center; margin: 0 10px 0 0; }
.marca img { display: block; height: 38px; width: auto; }
.espaco { flex: 1 1 auto; min-width: 4px; }
.sep { width: 1px; align-self: stretch; margin: 6px 4px; background: var(--linha); }

.ic {
  position: relative; display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px;
  background: transparent; color: var(--grafite); cursor: pointer;
  transition: background-color var(--dur), color var(--dur), opacity var(--dur);
}
.ic:hover { background: var(--papel-2); }
.ic[aria-pressed="true"], .ic[aria-expanded="true"] { background: var(--grafite); color: var(--papel); }
.ic:disabled { opacity: .32; cursor: default; background: transparent; }
.ic::before { content: ""; position: absolute; inset: -3px; }
.ponto {
  position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--turbo); box-shadow: 0 0 0 2px var(--papel);
  transform: scale(0); transition: transform .22s cubic-bezier(.3, 1.6, .5, 1);
}
.marcado > .ponto { transform: scale(1); }
.ic[aria-pressed="true"] > .ponto, .trilho button[aria-pressed="true"] > .ponto { box-shadow: 0 0 0 2px var(--grafite); }

.vista-bt {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; max-width: 280px; min-width: 0;
  padding: 0 12px 0 10px; border: 1.5px solid var(--grafite); border-radius: var(--r-pill);
  background: transparent; color: var(--grafite); cursor: pointer; font: 600 13px/1 var(--sans);
}
.vista-bt:hover { background: var(--papel-2); }
.vista-bt[aria-expanded="true"] { background: var(--grafite); color: var(--papel); }
.vista-bt .i { width: 18px; height: 18px; }
.vista-bt span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vista-bt small { font-weight: 500; color: inherit; opacity: .7; }

.pill-bt {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px 0 10px;
  border: 1.5px solid var(--grafite); border-radius: var(--r-pill); background: transparent; color: var(--grafite);
  cursor: pointer; font: 600 13px/1 var(--sans); white-space: nowrap;
  transition: background-color var(--dur), color var(--dur), border-color var(--dur);
}
.pill-bt:hover { background: var(--papel-2); }
.pill-bt[aria-checked="true"] { background: var(--turbo); border-color: var(--turbo); color: var(--sobre-cor); }
.pill-bt .i { width: 18px; height: 18px; }
/* cadeado: a alça desce quando trava */
.cadeado .arco { transition: transform .28s cubic-bezier(.3, 1.6, .5, 1); transform: translateY(-3px); }
[aria-checked="true"] > .cadeado .arco, [aria-checked="true"] .cadeado .arco { transform: none; }
.cadeado .corpo { fill: none; }
[aria-checked="true"] .cadeado .corpo { fill: currentColor; }

/* ---------- botões comuns ---------- */
.chip {
  font: 600 13px/1 var(--sans);
  padding: 11px 14px; border-radius: var(--r-pill);
  border: 1.5px solid var(--grafite); background: transparent; color: var(--grafite);
  cursor: pointer; white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
.chip:hover { background: var(--papel-2); }
.chip[aria-pressed="true"] { background: var(--turbo); border-color: var(--turbo); color: var(--sobre-cor); }
.chip.tracejado { border-style: dashed; }
.chip:disabled { opacity: .4; cursor: default; }
.btn {
  font: 700 13px/1 var(--sans); letter-spacing: .04em;
  height: 40px; padding: 0 18px; border-radius: var(--r-pill); border: 0;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--grafite); color: var(--papel); cursor: pointer;
}
.btn .i { width: 18px; height: 18px; }
.btn:hover { filter: brightness(1.15); }
.chip:focus-visible, .btn:focus-visible, .ic:focus-visible, .pill-bt:focus-visible, .vista-bt:focus-visible, .tirar:focus-visible,
input[type=range]:focus-visible, .mapa:focus-visible, .cartao:focus-visible, .vslider:focus-visible, .quad:focus-visible,
.trilho button:focus-visible, .item:focus-visible, label.chip:focus-within {
  outline: 3px solid var(--circuito-texto); outline-offset: 2px;
}

/* ---------- trilho de ferramentas (mesa) ---------- */
.trilho {
  display: flex; flex-direction: column; gap: 4px; overflow-y: auto;
  padding: 10px 6px; padding-right: max(6px, env(safe-area-inset-right, 0px));
  background: var(--papel); border-left: 1px solid var(--linha);
}
.trilho button {
  position: relative; width: 64px; padding: 9px 2px 8px; display: grid; justify-items: center; gap: 5px;
  border: 0; border-radius: 12px; background: transparent; color: var(--grafite-suave); cursor: pointer;
  font: 600 11px/1.1 var(--sans); transition: background-color var(--dur), color var(--dur);
}
.trilho button:hover { background: var(--papel-2); color: var(--grafite); }
.trilho button[aria-pressed="true"] { background: var(--grafite); color: var(--papel); }
.trilho .ponto { top: 6px; right: 12px; }

/* ---------- inspetor (mesa: coluna; toque: balão) ---------- */
.inspetor { display: flex; flex-direction: column; min-height: 0; background: var(--papel); }
.app[data-layout="mesa"] .inspetor { width: 320px; border-left: 1px solid var(--linha); }
.insp-topo { display: flex; align-items: center; gap: 8px; padding: 12px 8px 4px 16px; }
.insp-topo h2 { flex: 1; margin: 0; font: 800 italic 24px/1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.insp-topo .ic { width: 34px; height: 34px; }
.insp-corpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 16px 22px; }

/* balões e menus flutuantes */
.flutuante, .app[data-layout="toque"] .inspetor {
  position: fixed; z-index: 30; top: 64px; left: 8px;
  width: min(360px, calc(100vw - 16px)); max-height: 70vh;
  background: var(--papel); color: var(--grafite);
  border: 1.5px solid var(--grafite); border-radius: 16px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
}
.flutuante::before, .app[data-layout="toque"] .inspetor::before {
  content: ""; position: absolute; top: -8px; left: calc(var(--seta, 24px) - 7px);
  width: 13px; height: 13px; background: var(--papel);
  border-left: 1.5px solid var(--grafite); border-top: 1.5px solid var(--grafite);
  transform: rotate(45deg); border-top-left-radius: 3px;
}
.flutuante { display: flex; flex-direction: column; }
.pop-corpo { overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
#pop-galeria { width: min(456px, calc(100vw - 16px)); }
.abrindo { animation: surge .17s ease-out; }
@keyframes surge { from { opacity: 0; transform: translateY(-6px) scale(.985); } }

/* ---------- conteúdo das ferramentas ---------- */
.secao { display: flex; flex-direction: column; gap: 14px; }
.secao h3, .pop-corpo h3 {
  margin: 8px 0 -4px; font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--grafite-suave);
}
.secao > h3:first-child, .pop-corpo > h3:first-child { margin-top: 0; }
.bloco { display: flex; flex-direction: column; gap: 10px; }
.linha { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.rot { font-size: 12px; font-weight: 600; }
.sub { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 2px 12px; border-left: 2px solid var(--linha); }
.recado { margin: 0; font-size: 12px; line-height: 1.45; color: var(--grafite-suave); font-style: italic; }
.recado[hidden] { display: none; }
.seg { display: flex; gap: 4px; flex-wrap: wrap; }
.seg .chip { padding: 10px 12px; font-size: 12px; }
/* segmentado com marcador que desliza */
.seg.ind { position: relative; display: inline-flex; flex-wrap: nowrap; align-self: flex-start; max-width: 100%; gap: 0; padding: 3px; border-radius: var(--r-pill); background: var(--papel-2); }
.seg.ind .chip { position: relative; z-index: 1; border-color: transparent; background: transparent; }
.seg.ind .chip:hover { color: var(--grafite); }
.seg.ind .chip[aria-pressed="true"] { background: transparent; border-color: transparent; color: var(--sobre-cor); }
.seg.ind > .ind {
  position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: var(--r-pill);
  background: var(--turbo); transition: transform .24s cubic-bezier(.3, 1.25, .5, 1), width .24s cubic-bezier(.3, 1.25, .5, 1);
}
.interruptor { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 8px 0; cursor: pointer; color: var(--grafite); font: 600 12px/1 var(--sans); }
.interruptor i { position: relative; flex: 0 0 auto; width: 34px; height: 20px; border-radius: var(--r-pill); background: var(--linha); transition: background .15s; }
.interruptor i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--papel); box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .18s cubic-bezier(.3, 1.4, .5, 1); }
.interruptor[aria-checked="true"] i { background: var(--turbo); }
.interruptor[aria-checked="true"] i::after { transform: translateX(14px); }
.interruptor b { font-weight: 600; text-align: left; }
.interruptor:focus-visible { outline: 3px solid var(--circuito-texto); outline-offset: 2px; border-radius: 6px; }
.deslizante { min-height: 36px; display: grid; grid-template-columns: 92px minmax(0, 1fr) 56px; align-items: center; gap: 8px; }
.deslizante label { font-size: 12px; font-weight: 600; }
.deslizante output { font-size: 12px; color: var(--grafite-suave); font-variant-numeric: tabular-nums; text-align: right; }
input[type=range] { width: 100%; min-width: 0; height: 28px; accent-color: var(--turbo); }
input[type=range]:disabled { opacity: .4; }
#grupo-ret.inativo { display: none; }
#grupo-lente:not([data-lente="peixe"]) .so-peixe, #grupo-lente:not([data-lente="panini"]) .so-panini, #grupo-lente[data-lente="normal"] .so-lente { display: none; }
.presets { display: flex; gap: 6px; flex-wrap: wrap; }
.presets:empty::after { content: "Nenhum ainda"; font-size: 12px; color: var(--grafite-suave); }
#notas-lista:empty::after { content: "Nenhuma ainda. Toque em Nova anotação e depois no ponto da cena."; }
.form-preset { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.form-preset[hidden] { display: none; }
.form-preset input { font: 600 13px/1 var(--sans); padding: 9px 12px; border-radius: var(--r-pill); border: 1.5px solid var(--grafite); background: var(--folha); color: var(--nanquim); width: 170px; min-width: 0; flex: 1 1 140px; }
.form-preset .btn { height: 36px; }
.vista { display: inline-flex; align-items: center; max-width: 100%; min-width: 0; }
.vista .chip { border-top-right-radius: 0; border-bottom-right-radius: 0; padding-right: 10px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vista .tirar {
  font: 700 13px/1 var(--sans); padding: 9px 9px; border: 1.5px solid var(--grafite); border-left: 0;
  border-radius: 0 var(--r-pill) var(--r-pill) 0; background: transparent; color: var(--grafite-suave); cursor: pointer;
}
.vista .tirar:hover { color: var(--turbo-texto); }
.bon-acoes { display: flex; gap: 8px 14px; align-items: center; flex-wrap: wrap; }
#grupo-boneco .seg .chip { padding: 9px 10px; }
#grupo-boneco.inativo #bon-deslizantes, #grupo-boneco.inativo .so-ligado { display: none; }
#grupo-boneco::after { content: "Ligue o boneco ou toque numa pose para posar."; font-size: 12px; color: var(--grafite-suave); font-style: italic; display: none; }
#grupo-boneco.inativo::after { display: block; }
#grupo-boneco { display: flex; flex-direction: column; gap: 12px; }
#bon-deslizantes { display: flex; flex-direction: column; gap: 8px; }
.escolhe { display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: center; gap: 8px; }
.escolhe label { font-size: 12px; font-weight: 600; }
.escolhe select {
  font: 600 12px/1.2 var(--sans); padding: 8px 10px; width: 100%; min-width: 0;
  border-radius: var(--r-pill); border: 1.5px solid var(--grafite); background: var(--folha); color: var(--nanquim);
}

/* camadas */
.camadas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.camadas li { display: flex; align-items: center; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--linha); }
.camadas li:last-child { border-bottom: 0; }
.c-nome { flex: 1; min-width: 0; display: grid; gap: 2px; }
.c-nome b { font-weight: 600; font-size: 13px; }
.c-nome small { font-size: 11px; color: var(--grafite-suave); }
.camadas .ic { width: 36px; height: 36px; }
.camadas .ic .i { width: 20px; height: 20px; }
.olho .corte { display: none; }
.olho[aria-checked="false"] { color: var(--grafite-suave); }
.olho[aria-checked="false"] .corte { display: inline; }
.olho[aria-checked="false"] .pupila { display: none; }
.exp-tg { color: var(--grafite-suave); }
.exp-tg[aria-checked="true"] { background: var(--turbo); color: var(--sobre-cor); }
.exp-tg:disabled { opacity: .25; }
.vazio-ic { width: 36px; height: 36px; flex: 0 0 auto; }

/* galeria de vistas */
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 8px; }
.cartao-caixa { position: relative; min-width: 0; }
.cartao {
  position: relative; width: 100%; display: grid; gap: 6px; padding: 4px 4px 8px; text-align: left;
  border: 1.5px solid transparent; border-radius: 12px; background: transparent; color: var(--grafite);
  cursor: pointer; font: 600 12px/1.2 var(--sans);
}
.cartao:hover { background: var(--papel-2); }
.cartao[aria-pressed="true"] { border-color: var(--turbo); }
.cartao .mini { position: relative; display: block; aspect-ratio: 3 / 2; border-radius: 8px; overflow: hidden; background: var(--folha); border: 1px solid var(--linha); }
.cartao .mini:empty::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--linha) 55%, transparent) 6px 7px); }
.cartao .mini img { display: block; width: 100%; height: 100%; object-fit: cover; animation: aparece .3s ease-out; }
.cartao b { font-weight: 600; padding: 0 2px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.2; word-break: break-word; }
.cartao-caixa .tirar {
  position: absolute; top: -4px; right: -4px; width: 26px; height: 26px; display: grid; place-items: center; padding: 0;
  border-radius: 50%; border: 1.5px solid var(--grafite); background: var(--papel); color: var(--grafite);
  font: 700 14px/1 var(--sans); cursor: pointer; opacity: 0; transition: opacity .15s;
}
.cartao-caixa:hover .tirar, .cartao-caixa .tirar:focus-visible { opacity: 1; }
@media (pointer: coarse) { .cartao-caixa .tirar { opacity: 1; } }
.cartao.nova { animation: chega .6s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes chega { 0% { transform: scale(1.18) rotate(-3deg); box-shadow: 0 10px 24px rgba(0,0,0,.3); } 100% { transform: none; } }
@keyframes aparece { from { opacity: 0; } }
#vistas:empty::after { content: "Nenhum ainda. Ajuste a câmera e salve o ângulo aqui."; grid-column: 1 / -1; font-size: 12px; color: var(--grafite-suave); padding: 4px 2px; }
.pop-pe { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }

/* ações */
.acoes-topo { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 4px 0 2px; }
.acoes-topo img { width: 100%; max-width: 268px; height: auto; display: block; margin: 0 auto; }
.versao { margin-left: auto; font: 600 12px/1 var(--sans); color: var(--grafite-suave); font-variant-numeric: tabular-nums; }
.item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 10px; border: 0; border-radius: 10px;
  background: transparent; color: var(--grafite); cursor: pointer; text-align: left; font: 600 14px/1.2 var(--sans);
}
.item:hover { background: var(--papel-2); }
.item span { flex: 1; }
kbd { font: 600 11px/1 var(--sans); padding: 4px 6px; border-radius: 5px; border: 1px solid var(--linha); color: var(--grafite-suave); }
.temas { display: flex; gap: 6px; align-items: center; }
.tema-btn { width: 40px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; color: var(--cor-btn); }
.tema-btn svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tema-btn circle { fill: none; stroke: currentColor; stroke-width: 3.22; }
.tema-btn .apertado { display: none; }
.tema-btn:hover .solto, .tema-btn:focus-visible .solto, .tema-btn:active .solto { display: none; }
.tema-btn:hover .apertado, .tema-btn:focus-visible .apertado, .tema-btn:active .apertado { display: inline; }
.tema-btn:focus-visible { outline: 3px solid var(--circuito-texto); outline-offset: 2px; }
.confirma { display: grid; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--papel-2); }
.confirma[hidden] { display: none; }
.confirma p { margin: 0; font-size: 12px; line-height: 1.45; }
.atalhos { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 12px; margin: 0; font-size: 13px; }
.atalhos dt { font-weight: 700; white-space: nowrap; }
.atalhos dd { margin: 0; color: var(--grafite-suave); }

/* exportar */
.exportar { padding: 14px; gap: 8px; }
.exportar[hidden] { display: none; }
.exp-titulo { margin: 0 0 2px; font-family: var(--display); font-weight: 800; font-style: italic; font-size: 22px; text-transform: uppercase; }
.exp-rot { margin: 4px 0 0; font-weight: 700; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--grafite-suave); }
.exp-info { margin: 4px 0 0; font-size: 12px; color: var(--grafite-suave); font-variant-numeric: tabular-nums; min-height: 2.6em; }
.exp-info strong { color: var(--grafite); font-weight: 700; }
.exp-inclui { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; font-size: 12px; padding: 8px 10px; border-radius: 10px; background: var(--papel-2); }
.exp-inclui span { flex: 1; min-width: 0; }
.exp-inclui .chip { padding: 6px 10px; font-size: 12px; }
.exp-acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

/* ---------- palco ---------- */
.palco {
  position: relative; background: var(--palco);
  display: grid; place-items: center; overflow: hidden;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.palco.travado::after { content: ""; position: absolute; inset: 0; border: 3px solid var(--turbo); pointer-events: none; z-index: 2; animation: trava .45s ease-out; }
@keyframes trava { from { border-width: 10px; opacity: .2; } }
.quadro { position: relative; background: var(--folha); }
.quadro.com-borda { outline: 5px solid var(--nanquim); box-shadow: 0 0 0 14px var(--folha); }
.quadro canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.quadro canvas:active { cursor: grabbing; }
.dica {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: max(28px, calc(env(safe-area-inset-bottom, 0px) + 12px)); max-width: calc(100% - 32px);
  font-size: 12px; font-weight: 500; color: var(--grafite); pointer-events: none; text-align: center;
  background: color-mix(in srgb, var(--papel) 92%, transparent);
  padding: 5px 12px; border-radius: var(--r-pill); transition: opacity .4s;
}
.dica.some { opacity: 0; }
.dica:empty { display: none; }
.mapa {
  position: absolute; top: 12px; right: max(12px, env(safe-area-inset-right, 0px)); z-index: 3;
  background: color-mix(in srgb, var(--papel) 92%, transparent);
  border: 1px solid var(--linha); border-radius: var(--r-sm);
  padding: 6px; display: grid; gap: 4px; cursor: crosshair;
}
.mapa canvas { display: block; width: 150px; }
.mapa span { font-weight: 700; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--grafite-suave); }
.joy {
  position: absolute; z-index: 4; left: max(18px, env(safe-area-inset-left, 0px)); bottom: max(48px, calc(env(safe-area-inset-bottom, 0px) + 24px));
  width: 112px; height: 112px; border-radius: 50%;
  background: color-mix(in srgb, var(--papel) 70%, transparent);
  border: 2px solid var(--grafite); touch-action: none;
}
.app[data-layout="toque"][data-lado="esq"] .joy { left: auto; right: max(18px, env(safe-area-inset-right, 0px)); }
.joy i {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%; background: var(--turbo); border: 2px solid var(--grafite);
}
/* aviso curto no topo do palco (como o do Procreate) */
.hud {
  position: absolute; z-index: 9; top: 12px; left: 50%; max-width: calc(100% - 32px);
  transform: translate(-50%, -10px); opacity: 0; pointer-events: none;
  padding: 8px 15px; border-radius: var(--r-pill); background: var(--grafite); color: var(--papel);
  font: 600 13px/1.25 var(--sans); text-align: center; font-variant-numeric: tabular-nums;
  transition: opacity .18s, transform .22s cubic-bezier(.3, 1.4, .5, 1);
}
.hud.ver { opacity: 1; transform: translate(-50%, 0); }
.trava-aviso {
  position: absolute; z-index: 3; left: max(12px, env(safe-area-inset-left, 0px)); top: 12px; transform: none;
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px;
  border-radius: var(--r-pill); border: 1.5px solid var(--grafite); cursor: pointer;
  background: color-mix(in srgb, var(--papel) 92%, transparent); color: var(--grafite);
  font: 700 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
}
.trava-aviso:hover { background: var(--papel-2); }
.trava-aviso svg { width: 13px; height: 13px; }
.app[data-layout="toque"][data-lado="esq"] .trava-aviso { left: max(76px, calc(env(safe-area-inset-left, 0px) + 64px)); }
.anel {
  position: absolute; z-index: 6; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  border: 3px solid var(--turbo); pointer-events: none; animation: segura .4s linear forwards;
}
@keyframes segura { from { transform: scale(.35); opacity: .15; } to { transform: scale(1); opacity: 1; } }
.mostrar-ui {
  display: none; position: absolute; z-index: 9; top: 10px; right: max(10px, env(safe-area-inset-right, 0px));
  width: 40px; height: 40px; place-items: center; border-radius: 10px; border: 0; cursor: pointer;
  background: color-mix(in srgb, var(--papel) 70%, transparent); color: var(--grafite); opacity: .55;
}
.mostrar-ui:hover, .mostrar-ui:focus-visible { opacity: 1; }
.carregando { position: absolute; inset: 0; display: grid; place-items: center; background: var(--palco); z-index: 10; }
.carregando .caixa { display: grid; gap: 10px; width: min(320px, 80%); text-align: center; justify-items: center; }
.carregando .logo-carga { display: block; width: 148px; max-width: 70%; height: auto; margin-bottom: 6px; }
.carregando strong { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 28px; text-transform: uppercase; min-height: 1.2em; transition: opacity .3s; }
.carregando strong.trocando { opacity: 0; }
.barra { width: 100%; height: 6px; border-radius: var(--r-pill); background: var(--linha); overflow: hidden; }
.barra i { display: block; height: 100%; width: 0; background: var(--turbo); transition: width .2s; }
.carregando p { margin: 0; color: var(--grafite-suave); font-variant-numeric: tabular-nums; }

/* ---------- barra lateral (toque) ---------- */
.lateral {
  position: absolute; z-index: 5; top: 50%; transform: translateY(-50%);
  left: max(10px, env(safe-area-inset-left, 0px));
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 6px;
  background: color-mix(in srgb, var(--papel) 94%, transparent);
  border: 1px solid var(--linha); border-radius: 16px; box-shadow: 0 4px 16px rgba(0, 0, 0, .14);
}
.app[data-lado="dir"] .lateral { left: auto; right: max(10px, env(safe-area-inset-right, 0px)); }
.vslider { position: relative; width: 40px; height: 150px; touch-action: none; cursor: ns-resize; border-radius: 10px; outline-offset: 0; }
.vslider .trilho-v { position: absolute; left: 50%; top: 8px; bottom: 8px; width: 6px; margin-left: -3px; border-radius: 3px; background: var(--linha); overflow: hidden; }
.vslider .cheio { position: absolute; left: 0; right: 0; bottom: 0; background: var(--turbo); }
.vslider .puxador {
  position: absolute; left: 50%; top: 50%; width: 30px; height: 14px; margin: -7px 0 0 -15px; border-radius: 7px;
  background: var(--papel); border: 2px solid var(--grafite); box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform .14s, background-color .14s;
}
.vslider.pegando .puxador { transform: scale(1.15); background: var(--grafite); }
.vslider[aria-disabled="true"] { opacity: .35; }
.vslider small { position: absolute; left: 0; right: 0; bottom: -6px; text-align: center; font: 700 9px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--grafite-suave); pointer-events: none; }
.quad {
  width: 36px; height: 36px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 1.5px solid var(--grafite); border-radius: 9px; background: transparent; color: var(--grafite);
  transition: background-color var(--dur), color var(--dur);
}
.quad[aria-checked="true"] { background: var(--turbo); border-color: var(--turbo); color: var(--sobre-cor); }
.quad .i { width: 18px; height: 18px; }
.lateral .divisor { width: 24px; height: 1px; background: var(--linha); margin: 2px 0; }
.lateral .ic { width: 40px; height: 40px; }

/* ---------- toque: barra fina com ícones, como o Procreate ---------- */
.app[data-layout="toque"] .topo { min-height: 52px; padding-block: 6px; gap: 2px; }
.app[data-layout="toque"] .chip { padding: 11px 15px; }
.app[data-layout="toque"] .seg .chip { padding: 10px 13px; }
.app[data-layout="toque"] .interruptor { padding: 8px 0; }
.app[data-layout="toque"] .deslizante { min-height: 36px; }
.app[data-layout="toque"] .dica { font-size: 11px; max-width: calc(100% - 210px); bottom: 16px; }

/* ---------- interface escondida ---------- */
.app.sem-interface { grid-template-rows: 0 minmax(0, 1fr); }
.app.sem-interface .topo, .app.sem-interface .trilho, .app.sem-interface .inspetor, .app.sem-interface .lateral,
.app.sem-interface .mapa, .app.sem-interface .dica, .app.sem-interface .joy, .app.sem-interface .trava-aviso { display: none !important; }
.app.sem-interface .mostrar-ui { display: grid; }

/* ---------- telas menores ---------- */
@media (max-width: 899px) {
  .app[data-layout="mesa"] .inspetor {
    position: fixed; z-index: 20; top: 57px; bottom: 0; right: calc(77px + env(safe-area-inset-right, 0px));
    box-shadow: -10px 0 30px rgba(0, 0, 0, .2); width: min(272px, calc(100vw - 93px));
  }
  .app[data-layout="mesa"] .marca { display: none; }
}
@media (max-width: 720px) {
  .mapa canvas { width: 104px; }
  .joy { width: 96px; height: 96px; }
}
@media (max-width: 430px) {
  .app[data-layout="toque"] .topo .ic { width: 36px; }
  .app[data-layout="toque"] .topo { padding-left: max(10px, env(safe-area-inset-left, 0px)); padding-right: max(10px, env(safe-area-inset-right, 0px)); }
}
@media (max-height: 640px) { .vslider { height: 104px; } }
@media (max-height: 470px) { .vslider { height: 72px; } .lateral { gap: 4px; padding: 6px 4px; } .lateral .ic { height: 34px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}