/* gerado por site/build-assets.py: design/sistema/tokens.css + componentes.css */
/* Scribe Island · tokens do design system (10/11/2026). Referência visual em design/sistema/index.html.
   Duas superfícies sobre a mesma base:
   - App (Azure): a janela em volta da ilha, cartões, popover, ajustes. Limpa, tipo Granola, segue o tema claro/escuro.
   - Jogo (papel): tudo que abre por cima da cena (guarda-roupa, barqueiro, loja, revista, livro). O papel do balão do
     barqueiro; é parte do mundo, então não muda com o tema.
   Regra: nada de cor, raio, tamanho de letra ou sombra solto no CSS de tela; se faltar um token, ele entra aqui primeiro. */

:root {
  color-scheme: light;

  /* ---------- tipo ---------- */
  --f-body: "Zen Maru Gothic", system-ui, sans-serif;          /* todo texto de leitura e controle */
  --f-display: "Jersey 20", var(--f-body);                      /* logo e números grandes; nítida só em múltiplos de 34 px */
  --f-title: "Jersey 10", var(--f-body);                        /* títulos pequenos; nítida em múltiplos de 18,67 px */
  --w-regular: 400; --w-medium: 500; --w-bold: 700;             /* só os pesos carregados: 600 vira 700 no navegador */
  --t-cap: 11px;      /* legenda, nome pequeno de peça, selos */
  --t-small: 12px;    /* texto de apoio, dica, quem fala */
  --t-body: 13px;     /* texto corrido de painel */
  --t-ui: 14px;       /* linhas e botões */
  --t-lead: 16px;     /* fala do barqueiro, destaque */
  --f-talk: "M PLUS Rounded 1c", var(--f-body);                /* fala e escolha da conversa: limpa e redonda, peso 700, dentro da moldura em pixel */
  --t-talk: 18px;     /* fala em cena, na conversa (.pp-talk), e destaque de mesmo tamanho */
  --t-title-s: 18.67px; --t-title: 37.33px;                     /* Jersey 10, 1× e 2× */
  --t-display: 34px;  --t-display-l: 68px;                      /* Jersey 20, 1× e 2× */

  /* ---------- forma ---------- */
  --r-s: 8px;         /* poços de miniatura, setas, amostras quadradas */
  --r-m: 12px;        /* botões, linhas, campos */
  --r-l: 16px;        /* painéis e cartões */
  --r-full: 999px;    /* selos, contadores, amostras redondas */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --hit: 44px;        /* altura mínima de qualquer coisa clicável principal */

  /* ---------- movimento ---------- */
  --ease: cubic-bezier(.3, .1, .2, 1);
  --dur-fast: .15s; --dur: .28s;

  /* ---------- superfície App (Azure, claro) ---------- */
  --bg: #EEEEEE; --surface: #F8F8F8; --card: #FFFFFF;
  --ink: #2F241C; --ink2: #5E5044; --ink3: #776859;             /* ink3 passa de 4,5:1 no branco */
  --line: rgba(0, 0, 0, .08); --line2: rgba(0, 0, 0, .15);
  --accent: #007AFF;          /* preenchimento */
  --accent-text: #0066CC;     /* palavra em azul: o #007AFF dá só 4,0:1 */
  --accent-ink: #FFFFFF;      /* texto sobre o azul */
  --accent-soft: rgba(0, 122, 255, .10);
  --gold: #C28512;            /* moeda */
  --ok: #2E7D4F; --warn: #A36100; --no: #C0392B;                /* estado: sempre com ícone ou palavra, nunca só a cor; o aviso desceu de #B26A00 (4,2:1) para passar de 4,5:1 */
  --shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 12px 40px rgba(0, 0, 0, .10);

  /* ---------- superfície Jogo (papel; igual nos dois temas) ---------- */
  /* Vela e Sinal (10/11): linho de vela, corda marinho e o vermelho de bandeira só para o que é novo. Trocou o creme com marrom,
     que caía no visual creme-quente típico de design gerado por IA; o painel frio também se destaca dos quartos e da mina quentes */
  --paper: #F1EFEA;           /* folha do painel (linho) */
  --paper-2: #E7E4DC;         /* segunda folha: livro, área interna, figura do cartão de compra */
  --paper-well: #E0DDD4;      /* poço de miniatura e botão secundário; texto nele: paper-ink */
  --paper-well-hi: #D4D0C5;   /* botão secundário sob o mouse */
  --paper-line: #A9A49A;      /* contorno fino de poço, campo e botão fantasma (decorativo, abaixo de 3:1) */
  --paper-edge: #23324A;      /* marinho: botão forte, seleção, foco, cadeado */
  --paper-edge-hi: #30425F;   /* botão forte sob o mouse */
  --paper-ink: #1E2633;       /* texto: 13,2:1 no papel, 11,2:1 no poço */
  --paper-ink2: #59606B;      /* texto de apoio, só no papel: 5,5:1 */
  --paper-on-edge: #F3F1EC;   /* texto sobre o marinho: 11,4:1 */
  --paper-field: #FBFAF7;     /* campo de texto */
  --paper-hover: rgba(35, 50, 74, .07);
  --paper-signal: #C2412B;    /* vermelho de bandeira: só o selo "New" */
  --paper-on-signal: #FFFFFF; /* texto no vermelho: 5,1:1 */
  --paper-frame: #23324A;     /* moldura de 3 px que separa o painel da cena */
  --paper-ring: 0 0 0 3px var(--paper-frame);
  --paper-float: 0 8px 20px rgba(0, 0, 0, .3);
  --dusk: rgba(26, 17, 12, .86);   /* dica e barra de ferramentas soltas sobre a cena */

  /* ---------- balão (pp-balloon, pp-emote): o balão do barqueiro em tamanho de etiqueta ----------
     Valores escritos por extenso, iguais aos do papel, para o balão funcionar em qualquer página (jogo, app, landing)
     mesmo onde --paper foi redefinido. Claro é o padrão; .dark inverte, para fundo claro ou cena muito clara. */
  --balloon-bg: #F1EFEA;      /* = --paper */
  --balloon-soft: #E0DDD4;    /* = --paper-well: o que ainda não existe ("soon") */
  --balloon-frame: #23324A;   /* = --paper-frame */
  --balloon-ink: #1E2633;     /* = --paper-ink */
  --balloon-ink2: #59606B;    /* = --paper-ink2 */
  --balloon-dark-bg: #1E2633; /* escuro: tinta do papel como fundo */
  --balloon-dark-soft: #30425F;
  --balloon-dark-frame: #F3F1EC;
  --balloon-dark-ink: #F3F1EC;
  --balloon-dark-ink2: #B9BFC9;   /* 7,9:1 no fundo escuro */
  --balloon-heart: #D9473A;
  --balloon-float: 0 6px 14px rgba(0, 0, 0, .22);

  /* ---------- cena ---------- */
  --sea: #2C8FB3;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121212; --surface: #1A1A1A; --card: #232323;
  --ink: #F5ECE1; --ink2: #BBA997; --ink3: #9A8876;
  --line: rgba(255, 255, 255, .08); --line2: rgba(255, 255, 255, .15);
  --accent: #0A84FF; --accent-text: #6FB3FF; --accent-ink: #0B1626; --accent-soft: rgba(10, 132, 255, .16);
  --gold: #F2B544;
  --ok: #5BBF85; --warn: #E8A23A; --no: #F07A6A;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 50px rgba(0, 0, 0, .45);
  --sea: #1B4F6E;
}

/* Scribe Island · componentes do design system (10/11/2026). Só tokens de tokens.css; nada de valor solto.
   ap-* = superfície App (Azure, segue o tema). pp-* = superfície Jogo (papel, igual nos dois temas).
   Regra de forma: no App, botão e selo são pílula (--r-full); no papel, botão é retângulo arredondado (--r-m), como no balão do barqueiro.
   As telas ainda têm CSS próprio; cada uma passa para estas classes quando for revista (o guarda-roupa já usa os mesmos valores). */

/* ================= App ================= */
.ap-card { background:var(--card); border:1px solid var(--line); border-radius:var(--r-l); padding:var(--s-4); }
.ap-card[data-link]:hover { border-color:var(--line2); }
.ap-label { margin:0 0 10px; font:var(--w-bold) var(--t-cap) var(--f-body); letter-spacing:.06em; text-transform:uppercase; color:var(--ink3); }
.ap-title { margin:0; font:var(--w-regular) var(--t-display)/1 var(--f-display); -webkit-font-smoothing:none; font-synthesis:none; color:var(--ink); }

.ap-btn { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 14px; border:0; border-radius:var(--r-full); font:var(--w-bold) var(--t-small) var(--f-body); cursor:pointer;
  background:var(--accent); color:var(--accent-ink); transition:filter var(--dur-fast), background var(--dur-fast); }
.ap-btn:hover { filter:brightness(1.08); }
.ap-btn.second { background:none; color:var(--accent-text); box-shadow:inset 0 0 0 1px var(--line2); } .ap-btn.second:hover { background:var(--accent-soft); filter:none; }
.ap-btn.quiet { background:none; color:var(--ink2); } .ap-btn.quiet:hover { background:var(--line); color:var(--ink); filter:none; }
.ap-btn:disabled { opacity:.4; cursor:default; filter:none; }
.ap-btn:focus-visible, .ap-seg button:focus-visible, .ap-tile:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.ap-seg { display:inline-flex; gap:2px; padding:3px; background:var(--accent-soft); border-radius:var(--r-full); }
.ap-seg button { border:0; background:none; padding:6px var(--s-4); border-radius:var(--r-full); font:var(--w-medium) var(--t-body) var(--f-body); color:var(--ink2); cursor:pointer; }
.ap-seg button[aria-pressed="true"] { background:var(--card); color:var(--ink); box-shadow:0 1px 2px var(--line2); }

.ap-chip { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 var(--s-3); border-radius:var(--r-full); background:var(--card); border:1px solid var(--line2); font:var(--w-bold) var(--t-body) var(--f-body); font-variant-numeric:tabular-nums; color:var(--ink); }

.ap-bar { height:6px; border-radius:var(--r-full); background:var(--accent-soft); overflow:hidden; } .ap-bar i { display:block; height:100%; background:var(--accent); border-radius:inherit; }

.ap-tile { width:var(--hit); height:var(--hit); border-radius:var(--r-m); display:grid; place-items:center; border:0; background:var(--accent-soft); cursor:pointer; }
.ap-tile[aria-pressed="true"] { outline:2px solid var(--accent); outline-offset:1px; }
.ap-tile.lock { background:transparent; box-shadow:inset 0 0 0 1px var(--line2); opacity:.45; cursor:help; }

.ap-toast { display:inline-block; padding:var(--s-2) 14px; border-radius:var(--r-full); background:var(--dusk); color:var(--paper-on-edge); font:var(--w-medium) var(--t-small) var(--f-body); }

/* Ajustes e listas de opções: grupos de linhas num cartão. Cada linha tem o nome à esquerda (com uma explicação curta embaixo, se precisar) e um só controle à direita:
   chave (.ap-switch), escolha (.ap-select), botão ou estado (.ap-state, sempre com palavra). Linha de item (app, site) leva o ícone antes do nome. */
.ap-group { margin:0; padding:0; list-style:none; background:var(--card); border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden; }
.ap-row { display:flex; align-items:center; gap:var(--s-3); min-height:var(--hit); padding:var(--s-2) var(--s-4); font:var(--w-medium) var(--t-ui) var(--f-body); color:var(--ink); }
.ap-row + .ap-row { border-top:1px solid var(--line); }
.ap-row > .txt { flex:1; min-width:0; display:grid; gap:2px; } .ap-row small { font:var(--w-medium) var(--t-small)/1.35 var(--f-body); color:var(--ink3); }
.ap-row > img { flex:none; width:24px; height:24px; border-radius:6px; } .ap-row .val { color:var(--ink2); font-size:var(--t-body); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ap-row.sub { padding-left:var(--s-6); background:var(--surface); } /* linha que depende da de cima */
.ap-switch { -webkit-appearance:none; appearance:none; flex:none; position:relative; width:40px; height:24px; margin:0; border-radius:var(--r-full); background:var(--line2); cursor:pointer; transition:background var(--dur-fast); }
.ap-switch::after { content:""; position:absolute; left:2px; top:2px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0, 0, 0, .25); transition:transform var(--dur-fast) var(--ease); }
.ap-switch:checked { background:var(--accent); } .ap-switch:checked::after { transform:translateX(16px); } .ap-switch:disabled { opacity:.4; cursor:default; }
.ap-select { -webkit-appearance:none; appearance:none; flex:none; height:32px; padding:0 30px 0 var(--s-3); border:0; border-radius:var(--r-full); box-shadow:inset 0 0 0 1px var(--line2); font:var(--w-medium) var(--t-body) var(--f-body); color:var(--ink); cursor:pointer;
  background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 12px center; }
.ap-switch:focus-visible, .ap-select:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.ap-state { display:inline-flex; align-items:center; gap:6px; font:var(--w-bold) var(--t-body) var(--f-body); color:var(--ink2); } .ap-state::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--ink3); }
.ap-state.ok { color:var(--ok); } .ap-state.ok::before { background:var(--ok); } .ap-state.no { color:var(--no); } .ap-state.no::before { background:var(--no); }
/* a lista lateral de uma janela com seções (Ajustes): um item por seção, o atual com aria-current="page" */
.ap-nav { display:grid; gap:2px; margin:0; padding:0; list-style:none; } .ap-nav button { width:100%; height:36px; padding:0 var(--s-3); border:0; border-radius:var(--r-m); background:none; text-align:left; font:var(--w-medium) var(--t-ui) var(--f-body); color:var(--ink2); cursor:pointer; }
.ap-nav button:hover { background:var(--line); color:var(--ink); } .ap-nav button[aria-current="page"] { background:var(--accent-soft); color:var(--accent-text); font-weight:var(--w-bold); } .ap-nav button:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.ap-btn.danger { background:none; color:var(--no); box-shadow:inset 0 0 0 1px var(--line2); } .ap-btn.danger:hover { background:color-mix(in srgb, var(--no) 10%, transparent); filter:none; }
@media (prefers-reduced-motion:reduce) { .ap-switch, .ap-switch::after { transition:none; } }

/* ================= Jogo (papel) ================= */
.pp-panel { background:var(--paper); color:var(--paper-ink); border-radius:var(--r-l); padding:var(--s-5) var(--s-4) var(--s-4); box-shadow:var(--paper-ring), var(--paper-float); }
.pp-title { margin:0 0 var(--s-2); font:var(--w-regular) var(--t-title)/1 var(--f-title); text-transform:uppercase; -webkit-font-smoothing:none; font-synthesis:none; color:var(--paper-ink); }
.pp-who { display:block; margin-bottom:2px; font:var(--w-bold) var(--t-small) var(--f-body); color:var(--paper-ink2); }
.pp-text { margin:0; font:var(--w-medium) var(--t-lead)/1.45 var(--f-body); color:var(--paper-ink); }
.pp-note { margin:0; font:var(--w-medium) var(--t-small) var(--f-body); color:var(--paper-ink2); }

.pp-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:var(--hit); padding:0 18px; border:0; border-radius:var(--r-m); font:var(--w-bold) var(--t-ui) var(--f-body); cursor:pointer;
  background:var(--paper-edge); color:var(--paper-on-edge); transition:background var(--dur-fast); }
.pp-btn:hover { background:var(--paper-edge-hi); }
.pp-btn.second { background:var(--paper-well); color:var(--paper-ink); box-shadow:inset 0 0 0 1px var(--paper-line); } .pp-btn.second:hover { background:var(--paper-well-hi); }
.pp-btn.ghost { background:none; color:var(--paper-edge); box-shadow:inset 0 0 0 1.5px var(--paper-line); } .pp-btn.ghost:hover { background:var(--paper-hover); }
.pp-btn.quiet { min-width:var(--hit); padding:0 var(--s-2); background:none; color:var(--paper-edge); } .pp-btn.quiet:hover { background:var(--paper-hover); }
.pp-btn:disabled { opacity:.4; cursor:default; } .pp-btn:disabled:hover { background:var(--paper-edge); }
.pp-btn:focus-visible, .pp-row:focus-visible, .pp-well:focus-visible, .pp-field:focus-visible { outline:2px solid var(--paper-edge); outline-offset:2px; }

.pp-row { display:flex; align-items:center; justify-content:space-between; width:100%; height:40px; padding:0 var(--s-2) 0 var(--s-3); border:0; border-radius:var(--r-m); background:none; color:var(--paper-ink); font:var(--w-medium) var(--t-ui) var(--f-body); text-align:left; cursor:pointer; }
.pp-row:hover { background:var(--paper-hover); } .pp-row[aria-expanded="true"] { font-weight:var(--w-bold); }

.pp-well { position:relative; display:grid; place-items:center; width:60px; height:60px; padding:0; border:0; border-radius:var(--r-s); background:var(--paper-well); box-shadow:inset 0 0 0 1px var(--paper-line); cursor:pointer; }
.pp-well[aria-pressed="true"] { box-shadow:inset 0 0 0 2px var(--paper-edge); }
.pp-well.lock { opacity:.7; cursor:help; }
.pp-well.lock::before { content:""; position:absolute; right:-3px; bottom:-3px; width:22px; height:22px; border-radius:var(--r-full); background:var(--paper-edge); box-shadow:0 0 0 2px var(--paper); }
.pp-well.lock::after { content:""; position:absolute; right:1px; bottom:1px; width:14px; height:14px; background:var(--paper-on-edge);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 5V4a2 2 0 0 1 4 0v1h.5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-5A.5.5 0 0 1 3 9.5v-4a.5.5 0 0 1 .5-.5zm1 0h2V4a1 1 0 0 0-2 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 5V4a2 2 0 0 1 4 0v1h.5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-5A.5.5 0 0 1 3 9.5v-4a.5.5 0 0 1 .5-.5zm1 0h2V4a1 1 0 0 0-2 0z'/%3E%3C/svg%3E") center / contain no-repeat; }

.pp-chip { display:inline-flex; align-items:center; height:20px; padding:0 var(--s-2); border-radius:var(--r-full); background:var(--paper-edge); color:var(--paper-on-edge); font:var(--w-bold) var(--t-cap) var(--f-body); }
.pp-chip.soft { background:var(--paper-well); color:var(--paper-ink); }
.pp-chip.new { background:var(--paper-signal); color:var(--paper-on-signal); }

.pp-field { height:var(--hit); padding:0 var(--s-3); border:0; border-radius:var(--r-m); background:var(--paper-field); box-shadow:inset 0 0 0 1.5px var(--paper-line); color:var(--paper-ink); font:var(--w-medium) var(--t-ui) var(--f-body); }

.pp-bar { height:8px; border-radius:var(--r-full); background:var(--paper-well); box-shadow:inset 0 0 0 1px var(--paper-line); overflow:hidden; } .pp-bar i { display:block; height:100%; background:var(--paper-edge); border-radius:inherit; }

.pp-tip { display:inline-block; padding:var(--s-1) 9px; border-radius:var(--r-s); background:var(--dusk); color:var(--paper-on-edge); font:var(--w-bold) var(--t-small) var(--f-body); }

/* Balão (11/11): o formato do balão do barqueiro (.talk-box) em tamanho de etiqueta. Papel, moldura de 3 px, cantos --r-m e o bico
   em triângulo duplo (moldura por fora, papel por dentro). O bico pega a cor do fundo do próprio balão, então .soft e .dark não
   precisam de bico próprio. Bico embaixo e no meio por padrão; .up põe em cima, .left e .right levam o bico para 22 px da ponta (balão perto da borda). Usar para etiqueta de lugar, dica sobre a cena e emoção. */
.pp-balloon { --bb-bg:var(--balloon-bg); --bb-frame:var(--balloon-frame); --bb-ink:var(--balloon-ink); --bb-ink2:var(--balloon-ink2);
  position:relative; display:inline-flex; align-items:center; gap:6px; min-height:30px; padding:5px var(--s-3); box-sizing:border-box; border-radius:var(--r-m);
  background:var(--bb-bg); color:var(--bb-ink); box-shadow:0 0 0 3px var(--bb-frame), var(--balloon-float); font:var(--w-bold) var(--t-ui)/1.2 var(--f-body); white-space:nowrap; }
.pp-balloon::before, .pp-balloon::after { content:""; position:absolute; left:50%; transform:translateX(-50%); border:0 solid transparent; }
.pp-balloon::before { bottom:-12px; border-width:12px 10px 0 10px; border-top-color:var(--bb-frame); }
.pp-balloon::after { bottom:-7px; border-width:8px 6.5px 0 6.5px; border-top-color:var(--bb-bg); }
.pp-balloon.up::before { bottom:auto; top:-12px; border-width:0 10px 12px 10px; border-bottom-color:var(--bb-frame); }
.pp-balloon.up::after { bottom:auto; top:-7px; border-width:0 6.5px 8px 6.5px; border-bottom-color:var(--bb-bg); }
.pp-balloon.left::before, .pp-balloon.left::after { left:22px; }
.pp-balloon.right::before, .pp-balloon.right::after { left:auto; right:22px; transform:translateX(50%); }
.pp-balloon.soft { --bb-bg:var(--balloon-soft); --bb-ink:var(--balloon-ink2); }
.pp-balloon.dark { --bb-bg:var(--balloon-dark-bg); --bb-frame:var(--balloon-dark-frame); --bb-ink:var(--balloon-dark-ink); --bb-ink2:var(--balloon-dark-ink2); }
.pp-balloon.dark.soft { --bb-bg:var(--balloon-dark-soft); --bb-ink:var(--balloon-dark-ink2); }
.pp-balloon small { font:var(--w-medium) var(--t-small)/1.3 var(--f-body); color:var(--bb-ink2); }
.pp-balloon .pp-chip { height:18px; }
.pp-balloon.dark .pp-chip { background:var(--balloon-dark-ink); color:var(--balloon-dark-bg); }

/* Emoção: o mesmo balão, quadrado, com um sinal só. ? ! e … são texto em Jersey 20 (nítido em 34 px); os outros são ícones
   de traço em SVG (24 × 24, traço 2,25, cor do texto), nunca pixel art: o balão é interface, não cenário. */
.pp-say { white-space:normal; text-align:left; align-items:center; gap:var(--s-2); max-width:300px; padding:6px var(--s-3) 6px 6px; font-weight:var(--w-medium); line-height:1.3; }   /* fala curta: retrato, quem fala e a frase */
.pp-say img { flex:none; width:44px; height:44px; border-radius:var(--r-s); object-fit:cover; object-position:60% 30%; }
.pp-say small { display:block; font-weight:var(--w-bold); }
.pp-emote { width:40px; height:40px; padding:0; justify-content:center; font:var(--w-regular) var(--t-display)/1 var(--f-display); -webkit-font-smoothing:none; font-synthesis:none; }
.pp-emote svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2.25; stroke-linecap:round; stroke-linejoin:round; }
.pp-emote .fill { fill:currentColor; stroke:none; } .pp-emote .heart { fill:var(--balloon-heart); stroke:none; }

/* Conversa: a fala longa em cena (visita do barqueiro, cenas de história), no molde das caixas de fala dos jogos de bolso: moldura em sprite
   (pix/frame.png, 3 linhas de 4 px), letra limpa e redonda (--f-talk), uma seta com eco para avançar e a lista de escolhas com cursor. Ocupa a cena inteira:
   o retrato fica inteiro e a caixa, de altura constante, cobre só o peito dele. Falas curtas, letra por letra; clicar na caixa avança.
   `.tell` é a narração: sem retrato, sem rabo e sem nome. */
.pp-talk { position:absolute; inset:0; pointer-events:none; } .pp-talk-box, .pp-talk-opts { pointer-events:auto; }   /* a cena por baixo continua clicável */
.pp-talk[hidden] { display:none; }
.pp-talk-face { position:absolute; left:36px; bottom:84px; height:240px; width:auto; animation:pp-talk-up var(--dur) var(--ease); }
.pp-talk-box { position:absolute; left:var(--s-3); right:var(--s-3); bottom:var(--s-3); height:124px; box-sizing:border-box; display:flex; align-items:flex-start; padding:0 var(--s-1); border:20px solid transparent; border-image:url(pix/frame.png) 5 fill / 20px; image-rendering:pixelated;
  background:none; color:var(--paper-ink); text-align:left; cursor:pointer; filter:drop-shadow(0 4px 0 rgba(11, 18, 32, .3)); }
.pp-talk-box::before { content:""; position:absolute; left:120px; top:-32px; width:28px; height:16px; background:url(pix/tail.png) 0 0 / 28px 16px; transform:scaleY(-1); }
.pp-talk-text { flex:1; min-width:0; } .pp-talk-line { margin:0; padding-right:var(--s-5); font:var(--w-bold) var(--t-talk)/26px var(--f-talk); }
.pp-talk .pp-who { position:absolute; left:160px; top:-46px; margin:0; padding:0 var(--s-2); border:6px solid transparent; border-image:url(pix/thin.png) 3 fill / 6px; font:var(--w-regular) var(--t-title-s)/1 var(--f-title); text-transform:uppercase; -webkit-font-smoothing:none; color:var(--paper-ink); }
/* avançar: uma seta pequena. Some enquanto a fala é escrita (.typing); com a fala pronta ela cai no lugar e fica num vai e vem macio, soltando um eco que desce e apaga */
.pp-talk-next { position:absolute; right:2px; bottom:2px; width:21px; height:12px; color:transparent; font-size:0; background:url(pix/next.png) 0 0 / 21px 12px no-repeat; animation:pp-next-in .3s cubic-bezier(.2, 1.5, .4, 1) backwards, pp-next 1.3s ease-in-out .3s infinite; }
.pp-talk-next::after { content:""; position:absolute; inset:0; background:inherit; opacity:0; animation:pp-next-echo 1.3s ease-out .3s infinite; }
.pp-talk.typing .pp-talk-next { animation:none; opacity:0; } .pp-talk.typing .pp-talk-next::after { animation:none; }
.pp-talk-box:focus-visible { outline:2px solid var(--paper-on-edge); outline-offset:2px; }
.pp-talk.noface .pp-talk-face { display:none; }   /* fala de quem não tem retrato: só a placa do nome */
.pp-talk.tell .pp-talk-box { height:98px; } .pp-talk.tell .pp-talk-box::before, .pp-talk.tell .pp-talk-face, .pp-talk.tell .pp-who { display:none; }
/* escolhas da conversa: uma caixa só, à direita, logo acima da fala; o cursor marca a linha sob o mouse ou o foco */
.pp-talk-opts { position:absolute; right:var(--s-3); bottom:calc(124px + var(--s-3) + var(--s-2)); display:grid; width:min(330px, calc(100% - 2 * var(--s-3))); box-sizing:border-box; border:20px solid transparent; border-image:url(pix/frame.png) 5 fill / 20px; image-rendering:pixelated; filter:drop-shadow(0 4px 0 rgba(11, 18, 32, .3)); }
.pp-talk-opts[hidden] { display:none; } .pp-talk.tell .pp-talk-opts { bottom:calc(98px + var(--s-3) + var(--s-2)); }
.pp-talk-opt { position:relative; min-height:30px; padding:2px 0 2px 22px; border:0; background:none; color:var(--paper-ink); font:var(--w-bold) var(--t-talk)/1.25 var(--f-talk); text-align:left; cursor:pointer; }
.pp-talk-opt:hover::before, .pp-talk-opt:focus-visible::before { content:""; position:absolute; left:0; top:7px; width:12px; height:21px; background:url(pix/cursor.png) 0 0 / 12px 21px; image-rendering:pixelated; } .pp-talk-opt:focus-visible { outline:0; }
.pp-talk.asking .pp-talk-next { visibility:hidden; } .pp-talk.asking .pp-talk-box { cursor:default; }
/* o mesmo molde em pixel para o balão pequeno (etiqueta e emoção) e para o painel: moldura fina em sprite, a mesma letra da fala */
.pp-balloon.pix { min-height:0; padding:0 var(--s-1); border:6px solid transparent; border-image:url(pix/thin.png) 3 fill / 6px; border-radius:0; background:none; box-shadow:none; image-rendering:pixelated; filter:drop-shadow(0 3px 0 rgba(11, 18, 32, .3)); font:var(--w-bold) var(--t-talk)/1.2 var(--f-talk); }
.pp-balloon.pix::before { display:none; } .pp-balloon.pix::after { bottom:-12px; width:14px; height:8px; border:0; background:url(pix/tail.png) 0 0 / 14px 8px; }
.pp-emote.pix { width:45px; height:45px; padding:0; } .pp-emote.pix::selection { background:none; }
.pp-emote.pix[data-sign]::before { display:block; left:3px; top:3px; bottom:auto; width:27px; height:27px; border:0; transform:none; background:no-repeat 0 0 / 27px 27px; }   /* o sinal vai num pseudo: o miolo da moldura cobriria um fundo */
.pp-emote.pix[data-sign="dots"]::before { background-image:url(pix/emote-dots.png); } .pp-emote.pix[data-sign="exclaim"]::before { background-image:url(pix/emote-exclaim.png); } .pp-emote.pix[data-sign="question"]::before { background-image:url(pix/emote-question.png); }
.pp-emote.pix[data-sign="heart"]::before { background-image:url(pix/emote-heart.png); } .pp-emote.pix[data-sign="tired"]::before { background-image:url(pix/emote-tired.png); } .pp-emote.pix[data-sign="note"]::before { background-image:url(pix/emote-note.png); }
.pp-panel.pix { border:20px solid transparent; border-image:url(pix/frame.png) 5 fill / 20px; border-radius:0; padding:0 var(--s-1); background:none; box-shadow:none; image-rendering:pixelated; filter:drop-shadow(0 4px 0 rgba(11, 18, 32, .3)); font:var(--w-bold) var(--t-talk)/1.25 var(--f-talk); }
@keyframes pp-talk-up { from { transform:translateY(26px); opacity:0; } }
@keyframes pp-next-in { from { transform:translateY(-10px) scale(.5); opacity:0; } } @keyframes pp-next { 50% { transform:translateY(4px); } }
@keyframes pp-next-echo { 0%, 45% { transform:translateY(0); opacity:0; } 55% { opacity:.4; } 100% { transform:translateY(11px); opacity:0; } }
@media (prefers-reduced-motion:reduce) { .pp-talk-face, .pp-talk-next, .pp-talk-next::after { animation:none; } }
.pp-emote.pop { animation:emote-pop .42s cubic-bezier(.3,1.7,.5,1) both; transform-origin:50% calc(100% + 12px); }
@keyframes emote-pop { from { transform:scale(0); } }
@media (prefers-reduced-motion:reduce) { .pp-emote.pop { animation:none; } }

/* ---- A borda (pp-edge): o Pip fora da ilha, colado na borda da tela. Parado é só a lasca (.pp-edge-tip); com o mouse (.open) o painel desliza
   para fora com a cena e os números; os avisos (.note) saem da mesma borda. Sempre escuro, porque fica por cima de qualquer coisa.
   O lado vem de data-side="right" (padrão) ou "left". Interface limpa; pixel art só na cena, nos ícones de minério e na arte do aviso. ---- */
.pp-edge { --edge-w:208px; position:absolute; right:0; top:0; width:var(--edge-w); color:var(--balloon-dark-ink); font:var(--w-medium) var(--t-small) var(--f-body); }
.pp-edge[data-side="left"] { right:auto; left:0; }
.pp-edge-tip, .pp-edge-panel, .pp-edge-note { position:absolute; right:0; background:var(--dusk); color:inherit; -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); box-shadow:var(--paper-float); transition:transform var(--dur) var(--ease), visibility 0s; }
.pp-edge[data-side="left"] :is(.pp-edge-tip, .pp-edge-panel, .pp-edge-note) { right:auto; left:0; }
.pp-edge-tip { top:var(--edge-tip, 74px); display:flex; align-items:center; justify-content:center; width:14px; height:64px; padding:0; border:0; border-radius:var(--r-m) 0 0 var(--r-m); cursor:pointer; }
.pp-edge-tip::before { content:""; position:absolute; inset:calc(-1 * var(--s-3)); } /* a área do mouse é maior que a lasca */
.pp-edge-tip i { position:relative; width:3px; height:40px; border-radius:var(--r-full); background:var(--balloon-dark-soft); overflow:hidden; }
.pp-edge-tip i b { position:absolute; left:0; right:0; bottom:0; background:var(--balloon-dark-ink); } /* o progresso, de baixo para cima */
.pp-edge-tip.hit { transform:translateX(-3px); } .pp-edge[data-side="left"] .pp-edge-tip.hit { transform:translateX(3px); } /* cada golpe dá um toque na lasca */
.pp-edge:is(.open, .note) .pp-edge-tip { transform:translateX(110%); visibility:hidden; transition:transform var(--dur) var(--ease), visibility 0s var(--dur); }
.pp-edge-panel { top:0; width:var(--edge-w); border-radius:var(--r-l) 0 0 var(--r-l); overflow:hidden; transform:translateX(110%); visibility:hidden; transition:transform var(--dur) var(--ease), visibility 0s var(--dur); }
.pp-edge.open .pp-edge-panel, .pp-edge.note .pp-edge-note { transform:none; visibility:visible; transition:transform var(--dur) var(--ease), visibility 0s; }
.pp-edge-scene { position:relative; display:block; width:100%; height:172px; padding:0; border:0; overflow:hidden; background:var(--balloon-dark-bg); cursor:pointer; } /* a janela da cena; o que vai dentro é de quem usa */
.pp-edge-body { display:grid; gap:var(--s-2); padding:var(--s-3); }
.pp-edge-line > div:first-child { display:flex; justify-content:space-between; align-items:baseline; gap:var(--s-2); font-weight:var(--w-bold); }
.pp-edge-line small, .pp-edge-note small { font:var(--w-medium) var(--t-cap) var(--f-body); color:var(--balloon-dark-ink2); }
.pp-edge-meter { height:4px; margin-top:var(--s-1); border-radius:var(--r-full); background:var(--balloon-dark-soft); overflow:hidden; } .pp-edge-meter i { display:block; height:100%; border-radius:inherit; background:var(--balloon-dark-ink); }
/* os recursos: só o que já foi achado, em ordem fixa, quatro por linha, número curto (1.2k); o que acabou de entrar acende (.gain) */
.pp-edge-ores { display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--s-2) var(--s-1); padding-top:var(--s-2); border-top:1px solid var(--balloon-dark-soft); font-weight:var(--w-bold); }
.pp-edge-ores:empty { display:none; }
.pp-edge-ores span { display:flex; align-items:center; gap:2px; border-radius:var(--r-s); transition:background var(--dur) var(--ease); } .pp-edge-ores span.gain { background:var(--balloon-dark-soft); }
.pp-edge-ores i { flex:none; width:19px; height:21px; background-repeat:no-repeat; image-rendering:pixelated; }
/* o aviso: etiqueta, título e detalhe, com arte opcional; sai no lugar da lasca e, com o painel aberto, logo acima dele */
.pp-edge-note { top:calc(var(--edge-tip, 74px) - 12px); display:flex; align-items:center; gap:var(--s-3); max-width:var(--edge-w); padding:var(--s-3) var(--s-4); border:0; border-radius:var(--r-l) 0 0 var(--r-l); font:inherit; text-align:left; cursor:pointer; transform:translateX(110%); visibility:hidden; transition:transform var(--dur) var(--ease), visibility 0s var(--dur); }
.pp-edge-note img { flex:none; width:45px; height:52px; image-rendering:pixelated; } .pp-edge-note span { display:grid; gap:2px; min-width:0; }
.pp-edge-note b { font:var(--w-bold) var(--t-ui) var(--f-body); } .pp-edge-note em { font:var(--w-bold) var(--t-cap) var(--f-body); font-style:normal; color:var(--balloon-dark-ink2); text-transform:uppercase; letter-spacing:.06em; }
.pp-edge[data-side="left"] :is(.pp-edge-panel, .pp-edge-note) { border-radius:0 var(--r-l) var(--r-l) 0; transform:translateX(-110%); } .pp-edge[data-side="left"] .pp-edge-tip { border-radius:0 var(--r-m) var(--r-m) 0; }
.pp-edge[data-side="left"]:is(.open, .note) .pp-edge-tip { transform:translateX(-110%); }
.pp-edge[data-side="left"].open .pp-edge-panel, .pp-edge[data-side="left"].note .pp-edge-note { transform:none; }
:is(.pp-edge-tip, .pp-edge-scene, .pp-edge-note):focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
@media (prefers-reduced-motion:reduce) { .pp-edge-tip, .pp-edge-panel, .pp-edge-note, .pp-edge-ores span { transition:none; } .pp-edge-tip.hit { transform:none; } }
.pp-edge.open .pp-edge-note { top:var(--s-2); } /* com o painel aberto, o aviso pousa no alto da cena */