@font-face {
  font-family: 'VT323';
  src: url(../vendor/vt323.woff2) format('woff2');
  font-display: swap;
}

/* =====================================================================
   Cores (tokens). Cada papel tem sua variável (texto, borda, sombra,
   blocos escuros...), então o tema escuro só troca valores.
   Regra da marca: verde é preenchimento ou texto sobre escuro, nunca
   texto sobre claro (para isso existe --lime-ink).
   ===================================================================== */
:root {
  color-scheme: light;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --bg: #EFE8F4;        /* fundo da página */
  --paper: #F6F2F8;     /* corpo da janela, balão */
  --surface: #FFFFFF;   /* botões, campos, cartões */
  --doc: #FFFFFF;       /* folha de documento: branca nos dois temas */
  --dot: #C9BBD6;       /* só os pontinhos do fundo */

  --ink: #2B1733;       /* texto principal */
  --muted: #5E4B6B;     /* texto secundário */

  --border: #2B1733;    /* borda de elemento clicável */
  --line: #8A76A0;      /* borda de elemento passivo / não selecionado */
  --shadow: #2B1733;    /* sombra dura */

  --block: #2B1733;     /* blocos escuros: quadrado do ícone, opção marcada */
  --on-block: #7BFF16;
  --on-block-2: #FFFFFF;
  --bar: #2B1733;       /* barra de título */

  --lime: #7BFF16;
  --on-lime: #2B1733;
  --lime-ink: #2F6B00;
  --lime-soft: #E4FFCC;

  --focus: #5B2BD9;
  --ok: #2F6B00;    --ok-bg: #E4FFCC;
  --aviso: #7A4A00; --aviso-bg: #FFF0C2;
  --erro: #B3261E;  --erro-bg: #FFE3E0;
  --halo: none;         /* contorno extra do mascote (só no escuro) */
}

:root[data-tema="escuro"] {
  color-scheme: dark;
  --bg: #150B1A;
  --paper: #1E1126;
  --surface: #2A1934;
  --dot: #2C1B36;
  --ink: #F3ECF7;
  --muted: #BBA9C9;
  --border: #CDBBDD;
  --line: #9C86B3;
  --shadow: #5A4270;
  --block: #3B2548;
  --on-block: #7BFF16;
  --on-block-2: #F3ECF7;
  --bar: #150B1A;
  --on-lime: #1A0E20;
  --lime-ink: #7BFF16;
  --lime-soft: #1F3A0A;
  --focus: #B79CFF;
  --ok: #7BFF16;    --ok-bg: #1F3A0A;
  --aviso: #FFD166; --aviso-bg: #3A2C0A;
  --erro: #FF8A7F;  --erro-bg: #3A1414;
  --halo: drop-shadow(2px 0 0 #CDBBDD) drop-shadow(-2px 0 0 #CDBBDD) drop-shadow(0 2px 0 #CDBBDD) drop-shadow(0 -2px 0 #CDBBDD);
}

/* =====================================================================
   Base
   ===================================================================== */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-padding-top: 64px; scroll-padding-bottom: 110px; /* foco não fica escondido sob as barras fixas */
}

body {
  margin: 0;
  font: 26px/1.2 'VT323', monospace;
  color: var(--ink);
  background: var(--bg) radial-gradient(var(--dot) 1.5px, transparent 1.6px) 0 0 / 18px 18px;
  min-height: 100vh;
}

button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
h2 { font: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

main { max-width: 560px; margin: 0 auto; padding: 22px 14px 40px; }

/* ---------- janela ---------- */
.win { background: var(--paper); border: 3px solid var(--border); box-shadow: 6px 6px 0 var(--shadow); }

.tb {
  display: flex; align-items: center; gap: 4px;
  background: var(--bar); color: var(--lime);
  padding: 0 6px; padding-top: env(safe-area-inset-top);
  position: sticky; top: 0; z-index: 3;
}
:root[data-tema="escuro"] .tb { border-bottom: 3px solid var(--block); }
.tb button {
  display: flex; align-items: center; gap: 10px; min-height: 52px; min-width: 0;
  background: none; border: 0; padding: 4px 10px; color: var(--lime);
  font-size: 26px; letter-spacing: 1px; text-align: left;
}
.tb button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb button.tema { margin-left: auto; min-width: 52px; justify-content: center; flex: none; }
.tb svg { width: 20px; height: 20px; flex: none; }
.tb :focus-visible { outline-color: var(--lime); outline-offset: -3px; }

.wb { padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }

/* ---------- mascote + balão ---------- */
.row { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 20px; }
.rb { flex: 0 0 96px; }
.rb > div { position: relative; filter: var(--halo); }
.rb img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.rb .b { position: absolute; left: 0; top: 0; opacity: 0; }
.happy .b { transform: translateY(-4px); }

.bubble {
  flex: 1; position: relative; margin-top: 6px;
  padding: 12px 14px; border: 3px solid var(--border); background: var(--paper);
  font-size: 28px; line-height: 1.25;
}
.bubble::before {
  content: ""; position: absolute; left: -14px; top: 18px;
  border: 8px solid transparent; border-right: 11px solid var(--border); border-left: 0;
}
.bubble::after { /* cursor: pisca 3 vezes e fica parado */
  content: ""; display: inline-block; width: 10px; height: 18px; margin-left: 6px;
  background: currentColor; vertical-align: -3px; animation: cur 1s steps(1) 3;
}
.bubble.aviso { background: var(--aviso-bg); border-color: var(--aviso); }
.bubble.erro { background: var(--erro-bg); border-color: var(--erro); }
.bubble.ok { background: var(--ok-bg); border-color: var(--ok); }
.bubble.aviso::before { border-right-color: var(--aviso); }
.bubble.erro::before { border-right-color: var(--erro); }
.bubble.ok::before { border-right-color: var(--ok); }

@keyframes cur { 50% { opacity: 0 } }

.idle .a { animation: ia 3.6s steps(1) infinite } .idle .b { animation: ib 3.6s steps(1) infinite }
.work .a { animation: wa .7s steps(1) infinite } .work .b { animation: wb .7s steps(1) infinite }
.happy .a { animation: wa .7s steps(1) 4 } .happy .b { animation: wb .7s steps(1) 4 } /* comemora e para */
@keyframes ia { 0%, 92% { opacity: 1 } 92.1%, 100% { opacity: 0 } }
@keyframes ib { 0%, 92% { opacity: 0 } 92.1%, 100% { opacity: 1 } }
@keyframes wa { 0%, 50% { opacity: 1 } 50.1%, 100% { opacity: 0 } }
@keyframes wb { 0%, 50% { opacity: 0 } 50.1%, 100% { opacity: 1 } }

/* Telas internas: mascote menor para sobrar espaço */
.interna .rb { flex-basis: 64px; }
.interna .bubble { font-size: 26px; padding: 10px 12px; }
.interna .row { margin-bottom: 16px; }

/* ---------- rótulos de seção: etiqueta, como aba de fichário ---------- */
.sec {
  display: inline-block; margin: 26px 0 12px; padding: 2px 10px;
  background: var(--block); color: var(--on-block); font-size: 24px; letter-spacing: 1px;
}
.wb > .sec:first-of-type { margin-top: 4px; }
.sec + small { display: inline-block; margin-left: 8px; font: 14px var(--sans); color: var(--muted); }

/* ---------- botões grandes (3 níveis) ---------- */
/* 1. principal (.go)  2. ação (.big)  3. navegação (.nav2, sem sombra) */
.big {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px;
  margin: 0 0 12px; padding: 8px 12px;
  border: 3px solid var(--border); background: var(--surface); color: var(--ink);
  box-shadow: 4px 4px 0 var(--shadow);
  font-size: 28px; line-height: 1.1; text-align: left; text-decoration: none;
}
.big:active { transform: translate(4px, 4px); box-shadow: none; }
@media (hover: hover) { .big:hover { background: var(--lime-soft); } }
.big:disabled, .big[aria-disabled="true"] {
  background: var(--paper); color: var(--muted); border: 3px dashed var(--line);
  box-shadow: none; cursor: not-allowed; transform: none;
}
.big:disabled > i { background: var(--line); color: var(--paper); }
.big > i {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--block); color: var(--on-block);
}
.big > i svg { width: 30px; height: 30px; }   /* ícone 10x10 em 3x: pixels iguais */
.big .t { display: flex; flex-direction: column; gap: 2px; }
.big small { font: 16px/1.3 var(--sans); color: var(--muted); margin-top: 2px; }

.big.nav2 { box-shadow: none; border-color: var(--line); min-height: 56px; font-size: 24px; background: transparent; }
.big.nav2 > i { width: 36px; height: 36px; background: transparent; color: var(--ink); }
.big.nav2 > i svg { width: 20px; height: 20px; }
.big.nav2:active { transform: none; background: var(--lime-soft); }

.big.on { position: relative; background: var(--block); color: var(--on-block); border-color: var(--border); }
.big.on small { color: var(--on-block-2); }
.big.on::after { /* selo de "marcado" no canto: não depende só da cor */
  content: ""; position: absolute; top: -12px; right: -10px; width: 28px; height: 28px; z-index: 1;
  border: 3px solid var(--border);
  background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath fill='%232B1733' d='M8 1h2v2H8zM7 2h2v2H7zM6 3h2v2H6zM5 4h2v2H5zM4 5h2v2H4zM3 6h2v2H3zM0 4h2v2H0zM1 5h2v2H1zM2 6h2v2H2z'/%3E%3C/svg%3E") center / 18px no-repeat;
}
:root[data-tema="escuro"] .big.on { border-color: var(--lime); }
.two .big:not(.on) { box-shadow: none; } /* no par de opções, só a marcada se destaca */

.big.go {
  background: var(--lime); color: var(--on-lime); border-color: var(--border);
  box-shadow: 6px 6px 0 var(--shadow); min-height: 72px; justify-content: center; text-align: center; font-size: 32px;
}
.big.go:active { transform: translate(6px, 6px); box-shadow: none; }
@media (hover: hover) { .big.go:hover { background: var(--lime); filter: brightness(1.05); } }
:root[data-tema="escuro"] .big.go { border-color: var(--lime); }
.big.go:disabled { background: var(--paper); color: var(--muted); border: 3px dashed var(--line); filter: none; font-size: 26px; }

/* botão principal fixo no rodapé, com faixa de fundo */
.rodape {
  position: sticky; bottom: 0; z-index: 2;
  margin: 8px -16px -16px; padding: 12px 16px max(12px, env(safe-area-inset-bottom));
  background: var(--paper); border-top: 3px solid var(--border);
}
.rodape .big { margin: 0; }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.two .big { margin: 0; flex-direction: column; justify-content: center; text-align: center; gap: 6px; padding: 12px 8px; }
.two .big .t { align-items: center; }

/* ---------- arquivos escolhidos ---------- */
.file {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 6px;
  background: var(--surface); border: 3px solid var(--line);
}
.file img, .file b {
  flex: none; width: 52px; height: 52px; object-fit: cover;
  display: grid; place-items: center; background: var(--block); color: var(--on-block); font-size: 24px; font-weight: 400;
}
.file span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 16px/1.3 var(--sans); }
.file span small { display: block; color: var(--muted); font-size: 14px; }
.file button {
  flex: none; width: 48px; height: 48px; display: grid; place-items: center;
  border: 3px solid var(--border); background: var(--paper); color: var(--ink); font: 24px var(--sans);
}
.file button svg { width: 20px; height: 20px; }
.file button:disabled { border-style: dashed; border-color: var(--line); color: var(--line); cursor: default; }
.file button.remover { margin-left: 8px; }

/* ---------- opções ---------- */
.lab { margin: 18px 0 10px; font-size: 26px; }
.lab small { display: block; color: var(--muted); font: 16px/1.3 var(--sans); margin: 2px 0 8px; font-variant-numeric: tabular-nums; }
.txt {
  width: 100%; min-height: 52px; margin-bottom: 14px; padding: 12px;
  border: 3px solid var(--border); background: var(--surface); color: var(--ink); font: 18px var(--sans);
}

/* ---------- resultado ---------- */
.prev {
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px; padding: 10px;
  min-height: 120px; max-height: 320px; overflow: hidden;
  border: 3px solid var(--line); background: var(--paper);
}
.prev img, .prev canvas { max-width: 100%; max-height: 296px; object-fit: contain; box-shadow: 3px 3px 0 var(--shadow); background: var(--doc); }
.prev b { padding: 18px 22px; background: var(--block); color: var(--on-block); font-weight: 400; font-size: 28px; }
.info { margin: -4px 0 16px; font: 16px var(--sans); color: var(--muted); text-align: center; }
.nome { display: flex; align-items: center; gap: 6px; margin-bottom: 18px; }
.nome .txt { margin: 0; flex: 1; min-width: 0; }
.nome span { font: 16px var(--sans); color: var(--muted); white-space: nowrap; }

.mais { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.mais .big { margin: 0; min-height: 56px; font-size: 24px; gap: 8px; padding: 6px 8px; }
.mais .big > i { width: 32px; height: 32px; }
.mais .big > i svg { width: 20px; height: 20px; }
.legal { margin: 0 0 14px; font: 14px/1.4 var(--sans); color: var(--muted); }

.hint {
  margin: 22px 0 0; padding: 12px 14px; border: 3px solid var(--line); background: var(--surface);
  font: 16px/1.4 var(--sans); color: var(--ink);
}
.hint small { display: block; margin-top: 6px; font-size: 14px; color: var(--muted); }
.carregando { font: 16px var(--sans); color: var(--muted); }

/* ---------- grade de páginas ---------- */
.pags { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; margin-bottom: 18px; }
.pag {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 3 / 4; padding: 4px; background: var(--paper); border: 3px solid var(--line);
}
.pag img { max-width: 100%; max-height: 100%; object-fit: contain; background: var(--doc); transition: transform .2s; }
.pag span {
  position: absolute; left: 4px; bottom: 4px; min-width: 28px; padding: 0 4px; text-align: center;
  background: var(--block); color: var(--on-block-2); font: 700 14px/1.5 var(--sans);
}
.pag.on { background: var(--lime); border-color: var(--border); box-shadow: 3px 3px 0 var(--shadow); }
:root[data-tema="escuro"] .pag.on { border-color: var(--lime); }
.pag.on::after {
  content: ""; position: absolute; right: 4px; top: 4px; width: 28px; height: 28px;
  background: #2B1733 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath fill='%237BFF16' d='M8 1h2v2H8zM7 2h2v2H7zM6 3h2v2H6zM5 4h2v2H5zM4 5h2v2H4zM3 6h2v2H3zM0 4h2v2H0zM1 5h2v2H1zM2 6h2v2H2z'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.pags.tirar .pag.on { background: var(--erro-bg); border-color: var(--erro); }
.pags.tirar .pag.on img { opacity: .35; }
.pags.tirar .pag.on::after {
  background: var(--erro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M1 1h2v2H1zM2 2h2v2H2zM3 3h4v4H3zM6 2h2v2H6zM7 1h2v2H7zM2 6h2v2H2zM1 7h2v2H1zM6 6h2v2H6zM7 7h2v2H7z'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.pags.girar .pag.on img { transform: rotate(var(--g)); }

/* ---------- ajustar cantos / recortar (é uma foto: cores fixas) ---------- */
/* A foto deixa rolar a tela (pan-y); só as alças capturam o dedo. */
.cantos { position: relative; width: 100%; max-height: 62vh; margin: 0 auto 16px; touch-action: pan-y; user-select: none; background: #2B1733; }
.cantos .fundo, .pagina .fundo { display: block; width: 100%; height: 100%; }
.cantos svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cantos .fora { fill: rgba(20, 10, 25, .55); fill-rule: evenodd; }      /* escurece o que vai ser cortado */
.cantos polygon { fill: none; stroke: #7BFF16; stroke-width: 3px; vector-effect: non-scaling-stroke; }
.alca {
  position: absolute; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%;
  background: rgba(43, 23, 51, .35); border: 4px solid #7BFF16; box-shadow: 0 0 0 2px #2B1733;
  touch-action: none; cursor: grab;
}
.recorte { overflow: hidden; }
.recorte .ret {
  position: absolute; box-shadow: 0 0 0 9999px rgba(20, 10, 25, .55); outline: 3px solid #7BFF16;
  touch-action: none; cursor: move;
}

/* ---------- assinatura (papel branco nos dois temas) ---------- */
.assin { position: relative; height: 220px; margin-bottom: 14px; border: 3px dashed var(--border); background: var(--doc); touch-action: none; }
.assin canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.assin span {
  position: absolute; left: 16px; right: 16px; bottom: 46px; padding-top: 4px;
  border-top: 2px solid #C9BBD6; color: #5E4B6B; font: 16px var(--sans); pointer-events: none;
}
.assin.usado span { visibility: hidden; }
.assin-prev { display: flex; justify-content: center; padding: 18px; margin-bottom: 14px; border: 3px solid var(--line); background: var(--doc); }
.assin-prev img { max-width: 100%; max-height: 140px; }
.check { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; font: 16px/1.35 var(--sans); }
.check input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--block); }
.check small { display: block; color: var(--muted); font-size: 14px; }

.pagina { position: relative; width: 100%; margin-bottom: 14px; border: 3px solid var(--line); background: var(--doc); touch-action: pan-y; user-select: none; overflow: hidden; cursor: crosshair; }
.pagina .sig { position: absolute; outline: 2px dashed #B3261E; outline-offset: 2px; cursor: grab; touch-action: none; -webkit-user-drag: none; }
.nav { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; gap: 10px; margin-bottom: 14px; }
.nav .big { margin: 0; justify-content: center; font-size: 34px; }
.nav > span { text-align: center; font: 16px var(--sans); font-variant-numeric: tabular-nums; }

/* ---------- arrastar arquivos (computador) ---------- */
body.drag .win { outline: 4px dashed var(--focus); outline-offset: -10px; }

/* ---------- celular: janela ocupa a tela toda ---------- */
@media (max-width: 560px) {
  main { padding: 0; }
  .win { border: 0; box-shadow: none; min-height: 100vh; }
}

@media (prefers-reduced-motion: reduce) {
  .bubble::after, .rb .a, .rb .b { animation: none !important; }
  .rb .b { opacity: 0 !important; }
  .rb .a { opacity: 1 !important; }
  .pag img { transition: none; }
}