/*   CSS FILE HEADER #
 *
 *   File:         [tema.css]
 *   Author(s):    ['Pedro H.F Matias']
 *   Date:         ['06.10.2026']
 *   Version:      ['0.3.0']
 *   Description:  ['Shared Eydron theme: grimoire look (candle-lit table, leather, papyrus, ink, violet mana), fonts, buttons, dialogs (scrolls that unroll), wax-sealed toasts and the data-folder banner.']
 */

/* ---------- fonts (OFL, stored locally so it works offline) ---------- */
@font-face { font-family: 'Cinzel'; src: url('fontes/cinzel-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Cinzel'; src: url('fontes/cinzel-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Cinzel'; src: url('fontes/cinzel-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('fontes/cormorant-garamond-latin-500-normal.woff2') format('woff2'); font-weight: 400 500; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('fontes/cormorant-garamond-latin-500-italic.woff2') format('woff2'); font-weight: 400 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('fontes/cormorant-garamond-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('fontes/cormorant-garamond-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
/* the faces of the sheet and the Mesa: one type for the whole site (27/10) */
@font-face { font-family: 'IM Fell English'; src: url('fontes/im-fell-english-latin-400-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'IM Fell English'; src: url('fontes/im-fell-english-latin-400-italic.woff2') format('woff2'); font-style: italic; font-display: swap; }
@font-face { font-family: 'IM Fell English SC'; src: url('fontes/im-fell-english-sc-latin-400-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Dalingia'; src: url('fontes/dalingia.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Pirata One'; src: url('fontes/pirata-one-latin-400-normal.woff2') format('woff2'); font-display: swap; }

/* ---------- tokens: the dark table (outside the book) ---------- */
:root {
    --fundo: #0d0907;
    --fundo-2: #17110c;
    --painel: rgba(36, 26, 18, .88);
    --painel-2: #2b2016;
    --borda: rgba(214, 170, 92, .18);
    --borda-forte: rgba(214, 170, 92, .38);
    --texto: #f1e6cf;
    --texto-2: #c9b48f;
    --texto-3: #8f7b5e;
    --ouro: #d9b25a;
    --ouro-2: #f3d98e;
    --ouro-escuro: #8c6a24;
    --mana: #9b6bff;
    --mana-2: #c9adff;
    --mana-brilho: #e6d6ff;
    --perigo: #c8463c;
    --ok: #5fae74;
    --aviso: #d9952f;
    --sombra: 0 18px 40px rgba(0, 0, 0, .55);
    --raio: 8px;
    --raio-p: 5px;

    /* type, the one set of the site (27/10): the --e-* names are those of the sheet (apps/ficha/css/tokens.css) and the Mesa
       (apps/mesa/css/mesa.css --e-texto/--e-sc/--e-uncial/--e-nome/--e-num); --serif and --titulo, which the grimoire and the
       shared pieces use, are the same faces. Blackletter (Dalingia, Pirata One) only for short display words: in it "I" reads "J" */
    --e-fonte-texto: 'IM Fell English', 'Palatino Linotype', Georgia, serif;
    --e-fonte-fita: 'IM Fell English SC', 'IM Fell English', Georgia, serif;
    --e-fonte-titulo: 'Dalingia', 'IM Fell English', serif;
    --e-fonte-nome: 'Pirata One', 'IM Fell English', serif;
    --e-fonte-num: 'Cormorant Garamond', Georgia, serif;
    --serif: var(--e-fonte-texto);
    --titulo: var(--e-fonte-fita);
    --sans: var(--serif);

    /* textures: tiles pre-rendered from SVG noise (url() resolves against the stylesheet that uses the var) */
    --tex-madeira: url('img/madeira.webp');
    --tex-couro: url('img/couro.webp');
    --tex-papiro: url('img/grao.webp') 0 0 / 256px, url('img/papiro.webp') 0 0 / 1600px;
    color-scheme: dark;

    /* silk of the ribbons, one per chapter name: the same ribbon has the same colour in the sheet and in the grimoire
       (Personagem, Grimório). All deep enough for the pale ribbon text (#fff6e2, >= 4.5:1 under the sheen) */
    --fita-personagem: #7d1f24;     /* wine */
    --fita-pericias: #1d473e;       /* moss */
    --fita-evolucao: #3f4714;       /* olive */
    --fita-prestigios: #5c2347;     /* plum */
    --fita-notas: #5c3f18;          /* chestnut */
    --fita-grimorio: #23345a;       /* indigo */
    --fita-editor: #1d473e;         /* moss: Nova magia */
    --fita-banco: #4a2a7c;          /* violet: the mana of the campaign */
    --fita-registro: #5c3f18;       /* chestnut, like Notas */
    --fita-configuracoes: #3b4250;  /* slate */
    --fita-essencias: #15505a;      /* petrol: the grimoire's essences, devotions and magic skills */
    --fita-ficha: var(--fita-personagem); /* the way back to the sheet wears the silk of its Personagem page */
}

/* ---------- tokens: a papyrus page (the open book, dialogs, toasts) ---------- */
.pagina, dialog, .toast {
    --fundo: #eadcb6;
    --fundo-2: rgba(255, 250, 233, .55);
    --painel: rgba(255, 248, 226, .38);
    --painel-2: rgba(120, 86, 40, .1);
    --borda: rgba(92, 62, 28, .26);
    --borda-forte: rgba(92, 62, 28, .48);
    --texto: #2f2013;
    --texto-2: #47331d;
    --texto-3: #5c4629;
    --ouro: #a47a22;
    --ouro-2: #7c5813;
    --ouro-escuro: #6d4f17;
    --mana: #6a3fd6;
    --mana-2: #5130a8;
    --perigo: #9c2b22;
    --ok: #2d6a3c;
    --aviso: #85520f;
    --papel: #e9dab3;
    --papel-borda: #b99a64;
    color-scheme: light;
    color: var(--texto);
}

/* pages bathed in mana: violet sheets, pale glowing ink */
[data-folha="mana"] .pagina, [data-folha="mana"] dialog, [data-folha="mana"] .toast {
    --fundo: #2b1846;
    --fundo-2: rgba(20, 8, 38, .45);
    --painel: rgba(78, 46, 128, .28);
    --painel-2: rgba(190, 150, 255, .1);
    --borda: rgba(204, 176, 255, .22);
    --borda-forte: rgba(214, 190, 255, .42);
    --texto: #f1e9ff;
    --texto-2: #cdbbef;
    --texto-3: #9a86c2;
    --ouro: #e3c46e;
    --ouro-2: #f2da93;
    --ouro-escuro: #b18e3a;
    --mana: #c7a4ff;
    --mana-2: #ddc8ff;
    --perigo: #ff9488;
    --ok: #8fe0a6;
    --aviso: #f3c06a;
    --papel: #2f1a4d;
    --papel-borda: #7a55b8;
    --tex-papiro: url('img/papiro-mana.webp');
    color-scheme: dark;
}

/* ---------- other sheet treatments ----------
 * body carries data-folha (theme) and data-tom (claro | escuro). Dark sheets reuse the mana
 * rules through data-tom; each theme only swaps the glow (--luz*, rgb triplets), the page
 * edges, the closed-book page block, the hue of the ink circles (--matiz) and the tokens.
 * Papiro and mana define none of these: every var() falls back to their original values. */

/* plain papyri: same ink as papiro, other paper */
/* vellum: pale cream calfskin, crisp dark ink */
[data-folha="velino"] {
    --dobra: 80, 60, 30; --vinheta: 140, 110, 60; --aresta-escura: #d6c7a4; --aresta-clara: #f5ecd8;
    --miolo-a: #f2e9d3; --miolo-b: #cdbb94; --miolo-fundo: #efe5cb;
}
[data-folha="velino"] .pagina, [data-folha="velino"] dialog, [data-folha="velino"] .toast {
    --fundo: #efe5cb;
    --papel: #f1e7cf;
    --papel-borda: #c7b28a;
    --tex-papiro: url('img/grao.webp') 0 0 / 256px, url('img/papiro-velino.webp') 0 0 / 1600px;
}

/* old papyrus: darkened by age, amber stains */
[data-folha="antigo"] {
    --dobra: 70, 35, 5; --vinheta: 100, 55, 10; --aresta-escura: #b08f55; --aresta-clara: #dcc28c;
    --miolo-a: #dcc38e; --miolo-b: #a8854a; --miolo-fundo: #d4b678;
}
[data-folha="antigo"] .pagina, [data-folha="antigo"] dialog, [data-folha="antigo"] .toast {
    --fundo: #d6b97c;
    --papel: #d6b97c;
    --papel-borda: #9c7a3e;
    --texto: #2a1a0b;
    --tex-papiro: url('img/grao.webp') 0 0 / 256px, url('img/papiro-antigo.webp') 0 0 / 1600px;
}

/* parchment: goat skin with a rosy tint */
[data-folha="pergaminho"] {
    --dobra: 70, 45, 30; --vinheta: 120, 80, 60; --aresta-escura: #c5ad96; --aresta-clara: #efe2d4;
    --miolo-a: #ebdccd; --miolo-b: #c2a68c; --miolo-fundo: #e4d2bf;
}
[data-folha="pergaminho"] .pagina, [data-folha="pergaminho"] dialog, [data-folha="pergaminho"] .toast {
    --fundo: #e6d5c3;
    --papel: #e6d5c3;
    --papel-borda: #b39478;
    --tex-papiro: url('img/grao.webp') 0 0 / 256px, url('img/papiro-pergaminho.webp') 0 0 / 1600px;
}

/* frost-bound pages: pale blue vellum, cold ink */
[data-folha="geada"] {
    --luz: 110, 175, 230; --luz-funda: 70, 130, 200; --luz-clara: 200, 230, 255;
    --dobra: 30, 55, 85; --vinheta: 60, 100, 140; --aresta-escura: #a9bccb; --aresta-clara: #e3edf3;
    --miolo-a: #e4edf2; --miolo-b: #a7bccb; --miolo-fundo: #dde8ee; --matiz: 180deg;
}
[data-folha="geada"] .pagina, [data-folha="geada"] dialog, [data-folha="geada"] .toast {
    --fundo: #dfe8ee;
    --fundo-2: rgba(250, 253, 255, .55);
    --painel: rgba(245, 250, 255, .4);
    --painel-2: rgba(40, 80, 120, .1);
    --borda: rgba(30, 60, 95, .26);
    --borda-forte: rgba(30, 60, 95, .48);
    --texto: #17283a;
    --texto-2: #26405a;
    --texto-3: #3d5872;
    --ouro: #3f6f96;
    --ouro-2: #2b5578;
    --ouro-escuro: #24496a;
    --papel: #dde7ee;
    --papel-borda: #93abc0;
    --tex-papiro: url('img/grao.webp') 0 0 / 256px, url('img/papiro-geada.webp') 0 0 / 1600px;
}

/* herbarium: leaves pressed into the pages, druid green ink */
[data-folha="herbario"] {
    --luz: 120, 180, 80; --luz-funda: 70, 130, 50; --luz-clara: 200, 235, 160;
    --dobra: 40, 55, 15; --vinheta: 70, 90, 25; --aresta-escura: #b3b98a; --aresta-clara: #e3e6c4;
    --miolo-a: #e3e5c2; --miolo-b: #aeb57f; --miolo-fundo: #dde0b8; --matiz: 70deg;
}
[data-folha="herbario"] .pagina, [data-folha="herbario"] dialog, [data-folha="herbario"] .toast {
    --fundo: #dfe2bd;
    --fundo-2: rgba(252, 253, 238, .55);
    --painel: rgba(250, 252, 230, .38);
    --painel-2: rgba(60, 90, 20, .1);
    --borda: rgba(50, 70, 20, .26);
    --borda-forte: rgba(50, 70, 20, .48);
    --texto: #1f2a12;
    --texto-2: #33441d;
    --texto-3: #4a5a2c;
    --ouro: #7a6f17;
    --ouro-2: #5d5410;
    --ouro-escuro: #4c4510;
    --papel: #dfe2bb;
    --papel-borda: #9fa96c;
    --tex-papiro: url('img/grao.webp') 0 0 / 256px, url('img/papiro-herbario.webp') 0 0 / 1600px;
}

/* sheets bathed in an element: shared tokens (mana keeps its own block above) */
[data-folha="gelo"] .pagina, [data-folha="gelo"] dialog, [data-folha="gelo"] .toast,
[data-folha="fogo"] .pagina, [data-folha="fogo"] dialog, [data-folha="fogo"] .toast,
[data-folha="raio"] .pagina, [data-folha="raio"] dialog, [data-folha="raio"] .toast,
[data-folha="sangue"] .pagina, [data-folha="sangue"] dialog, [data-folha="sangue"] .toast,
[data-folha="necrose"] .pagina, [data-folha="necrose"] dialog, [data-folha="necrose"] .toast,
[data-folha="abissal"] .pagina, [data-folha="abissal"] dialog, [data-folha="abissal"] .toast {
    --ouro: #e3c46e;
    --ouro-2: #f2da93;
    --ouro-escuro: #b18e3a;
    --mana: #c7a4ff;
    --mana-2: #ddc8ff;
    --perigo: #ff9488;
    --ok: #8fe0a6;
    --aviso: #f3c06a;
    color-scheme: dark;
}

/* bathed in ice: frozen deep-blue sheets, frost glow */
[data-folha="gelo"] {
    --luz: 120, 200, 255; --luz-funda: 60, 130, 230; --luz-clara: 210, 240, 255; --breu: 0, 6, 20;
    --aresta-clara: #2f5f8f; --aresta-escura: #0b1c33; --miolo-a: #3a6ea3; --miolo-b: #0d2340; --miolo-fundo: #10263f;
    --fita-3: #3f7fc0; --matiz: -66deg;
}
[data-folha="gelo"] .pagina, [data-folha="gelo"] dialog, [data-folha="gelo"] .toast {
    --fundo: #0a1f3a;
    --fundo-2: rgba(0, 6, 20, .45);
    --painel: rgba(50, 120, 200, .2);
    --painel-2: rgba(210, 240, 255, .1);
    --borda: rgba(180, 225, 255, .22);
    --borda-forte: rgba(180, 225, 255, .42);
    --texto: #eaf6ff;
    --texto-2: #bcd9f0;
    --texto-3: #87a9c6;
    --papel: #0a1f3a;
    --papel-borda: #6fa6d8;
    --tex-papiro: url('img/papiro-gelo.webp');
}

/* bathed in fire: scorched crimson-orange sheets, ember glow */
[data-folha="fogo"] {
    --luz: 255, 120, 30; --luz-funda: 230, 60, 10; --luz-clara: 255, 200, 120; --breu: 25, 4, 0;
    --aresta-clara: #b0461a; --aresta-escura: #1a0603; --miolo-a: #9a4418; --miolo-b: #331005; --miolo-fundo: #3a1408;
    --fita-3: #c4501c; --matiz: 124deg;
}
[data-folha="fogo"] .pagina, [data-folha="fogo"] dialog, [data-folha="fogo"] .toast {
    --fundo: #1f0b05;
    --fundo-2: rgba(12, 2, 0, .5);
    --painel: rgba(110, 30, 8, .3);
    --painel-2: rgba(255, 170, 80, .08);
    --borda: rgba(255, 150, 70, .26);
    --borda-forte: rgba(255, 160, 80, .48);
    --texto: #fff0e2;
    --texto-2: #f5caa2;
    --texto-3: #c98f68;
    --papel: #1f0b05;
    --papel-borda: #c2501c;
    --tex-papiro: url('img/papiro-fogo.webp');
}

/* bathed in lightning: storm-indigo sheets, electric yellow glow */
[data-folha="raio"] {
    --luz: 255, 225, 70; --luz-funda: 110, 140, 255; --luz-clara: 255, 245, 190; --breu: 4, 4, 20;
    --aresta-clara: #4b4f8f; --aresta-escura: #0f1230; --miolo-a: #5a5fa3; --miolo-b: #12153a; --miolo-fundo: #161a3a;
    --fita-3: #8f7410; --matiz: 149deg;
}
[data-folha="raio"] .pagina, [data-folha="raio"] dialog, [data-folha="raio"] .toast {
    --fundo: #0e1030;
    --fundo-2: rgba(4, 4, 20, .45);
    --painel: rgba(70, 80, 190, .22);
    --painel-2: rgba(255, 245, 190, .1);
    --borda: rgba(210, 215, 255, .24);
    --borda-forte: rgba(220, 220, 255, .42);
    --texto: #f6f6ff;
    --texto-2: #cfd2f2;
    --texto-3: #9a9ec8;
    --papel: #0e1030;
    --papel-borda: #7a80d8;
    --tex-papiro: url('img/papiro-raio.webp');
}

/* bathed in blood: crimson sheets of the occultist */
[data-folha="sangue"] {
    --luz: 235, 40, 60; --luz-funda: 170, 10, 30; --luz-clara: 255, 150, 160; --breu: 22, 0, 4;
    --aresta-clara: #8a1a2a; --aresta-escura: #160205; --miolo-a: #8a2030; --miolo-b: #30070d; --miolo-fundo: #34080f;
    --fita-3: #b02a3c; --matiz: 94deg;
}
[data-folha="sangue"] .pagina, [data-folha="sangue"] dialog, [data-folha="sangue"] .toast {
    --fundo: #26040a;
    --fundo-2: rgba(12, 0, 2, .5);
    --painel: rgba(120, 10, 28, .3);
    --painel-2: rgba(255, 150, 160, .1);
    --borda: rgba(255, 170, 180, .22);
    --borda-forte: rgba(255, 170, 180, .42);
    --texto: #fdeaec;
    --texto-2: #efbdc3;
    --texto-3: #c08b92;
    --perigo: #ffb0a6;
    --papel: #26040a;
    --papel-borda: #b0283c;
    --tex-papiro: url('img/papiro-sangue.webp');
}

/* bathed in necrosis: grave-green sheets, sickly glow */
[data-folha="necrose"] {
    --luz: 90, 230, 120; --luz-funda: 40, 150, 70; --luz-clara: 190, 255, 200; --breu: 0, 10, 3;
    --aresta-clara: #2f6a36; --aresta-escura: #030a04; --miolo-a: #336b3f; --miolo-b: #0a1a0e; --miolo-fundo: #0f1d13;
    --fita-3: #2f8a4a; --matiz: -131deg;
}
[data-folha="necrose"] .pagina, [data-folha="necrose"] dialog, [data-folha="necrose"] .toast {
    --fundo: #08130b;
    --fundo-2: rgba(0, 6, 1, .5);
    --painel: rgba(40, 100, 40, .22);
    --painel-2: rgba(190, 255, 200, .1);
    --borda: rgba(170, 250, 190, .22);
    --borda-forte: rgba(170, 250, 190, .42);
    --texto: #ecfbef;
    --texto-2: #bfe3c6;
    --texto-3: #86ae8e;
    --papel: #08130b;
    --papel-borda: #4a9a50;
    --tex-papiro: url('img/papiro-necrose.webp');
}

/* abyssal ink: deep-sea sheets with bioluminescent writing */
[data-folha="abissal"] {
    --luz: 60, 215, 205; --luz-funda: 20, 150, 170; --luz-clara: 170, 245, 240; --breu: 0, 10, 14;
    --aresta-clara: #1f5a60; --aresta-escura: #082228; --miolo-a: #23646a; --miolo-b: #08262b; --miolo-fundo: #0c252a;
    --fita-3: #1f8a8a; --matiz: -90deg;
}
[data-folha="abissal"] .pagina, [data-folha="abissal"] dialog, [data-folha="abissal"] .toast {
    --fundo: #05212a;
    --fundo-2: rgba(0, 10, 14, .45);
    --painel: rgba(20, 100, 120, .24);
    --painel-2: rgba(170, 245, 240, .1);
    --borda: rgba(160, 240, 235, .22);
    --borda-forte: rgba(160, 240, 235, .42);
    --texto: #e6fbf9;
    --texto-2: #b4e3df;
    --texto-3: #7fb1ad;
    --papel: #05212a;
    --papel-borda: #2f8f96;
    --tex-papiro: url('img/papiro-abissal.webp');
}

/* ---------- the Three Sisters (optional sheets of their devotees) ---------- */
/* Nória, the Sun: dawn-gold vellum, warm umber ink, crimson jewel and emerald as accents */
[data-folha="noria"] {
    --luz: 255, 186, 60; --luz-funda: 190, 30, 50; --luz-clara: 255, 238, 180;
    --dobra: 110, 60, 10; --vinheta: 196, 112, 24; --aresta-escura: #d7b26c; --aresta-clara: #fcefcf;
    --miolo-a: #fbefd0; --miolo-b: #d9ad5c; --miolo-fundo: #f7e3b2; --fita-3: #b3263a; --matiz: -24deg;
}
[data-folha="noria"] .pagina, [data-folha="noria"] dialog, [data-folha="noria"] .toast {
    --fundo: #f7e5b8;
    --fundo-2: rgba(255, 251, 236, .58);
    --painel: rgba(255, 248, 226, .5);
    --painel-2: rgba(179, 38, 58, .07);
    --borda: rgba(128, 66, 12, .3);
    --borda-forte: rgba(128, 66, 12, .52);
    --texto: #2c1806;
    --texto-2: #4c2c0e;
    --texto-3: #6f4a1f;
    --ouro: #9c6a0e;
    --ouro-2: #7c5208;
    --ouro-escuro: #5f3e06;
    --perigo: #a3172b;
    --ok: #1d6b45;
    --papel: #f6e3b4;
    --papel-borda: #c99b4a;
    --tex-papiro: url('img/grao.webp') 0 0 / 256px, url('img/papiro-velino.webp') 0 0 / 1600px;
}

/* Laza, the Moon: midnight-indigo sheets of the old library, silver ink, lilac moonlight */
[data-folha="laza"] {
    --luz: 196, 208, 255; --luz-funda: 140, 112, 228; --luz-clara: 236, 240, 255; --breu: 2, 3, 14;
    --aresta-clara: #4d5390; --aresta-escura: #0a0c22; --miolo-a: #c9cff5; --miolo-b: #2a2f66; --miolo-fundo: #11143a;
    --fita-3: #5f56b0; --matiz: -28deg;
}
[data-folha="laza"] .pagina, [data-folha="laza"] dialog, [data-folha="laza"] .toast {
    --fundo: #0d1030;
    --fundo-2: rgba(2, 3, 14, .5);
    --painel: rgba(78, 88, 170, .18);
    --painel-2: rgba(220, 226, 255, .08);
    --borda: rgba(200, 206, 245, .22);
    --borda-forte: rgba(214, 220, 255, .44);
    --texto: #eef0ff;
    --texto-2: #c8cdee;
    --texto-3: #9298c6;
    --ouro: #d6dcf6;
    --ouro-2: #f1f3ff;
    --ouro-escuro: #8c94c2;
    --mana: #c7a4ff;
    --mana-2: #ddc8ff;
    --perigo: #ff9aa6;
    --ok: #9be3c0;
    --aviso: #f3d48a;
    --papel: #0c0f2e;
    --papel-borda: #6a70b8;
    --tex-papiro: url('img/papiro-mana.webp');
    color-scheme: dark;
}

/* Keda, the quiet one: her garden under the moon that sang, moss-green night, cream ink, lemon gold and a dark rose */
[data-folha="keda"] {
    --luz: 214, 236, 170; --luz-funda: 74, 150, 100; --luz-clara: 242, 248, 214; --breu: 2, 10, 6;
    --aresta-clara: #44704f; --aresta-escura: #08170e; --miolo-a: #e8ecc6; --miolo-b: #23472f; --miolo-fundo: #10241a;
    --fita-3: #5f7d2a; --matiz: -160deg;
}
[data-folha="keda"] .pagina, [data-folha="keda"] dialog, [data-folha="keda"] .toast {
    --fundo: #0e2018;
    --fundo-2: rgba(2, 10, 6, .5);
    --painel: rgba(70, 130, 90, .17);
    --painel-2: rgba(240, 246, 210, .08);
    --borda: rgba(222, 236, 200, .22);
    --borda-forte: rgba(232, 242, 208, .44);
    --texto: #f6f4e4;
    --texto-2: #d8dec0;
    --texto-3: #a6b192;
    --ouro: #e9d47c;
    --ouro-2: #f7eaaa;
    --ouro-escuro: #a99a4c;
    --perigo: #ffa29c;
    --ok: #aee8b6;
    --aviso: #f1d77e;
    --papel: #0d1f16;
    --papel-borda: #5f9064;
    --tex-papiro: url('img/papiro-necrose.webp');
    color-scheme: dark;
}

/* the Three together: the sky of the hour they meet, gold from above fading into Keda's green and Laza's indigo */
[data-folha="tres"] {
    --luz: 255, 212, 136; --luz-funda: 150, 112, 214; --luz-clara: 255, 240, 208; --breu: 8, 4, 16;
    --aresta-clara: #6a4c78; --aresta-escura: #120a1c; --miolo-a: #f4dca2; --miolo-b: #3a2552; --miolo-fundo: #1a1228;
    --fita-3: linear-gradient(90deg, #2f6b46 0 33%, #a3263a 33% 67%, #3b3f92 67%); --matiz: 140deg;
}
[data-folha="tres"] .pagina, [data-folha="tres"] dialog, [data-folha="tres"] .toast {
    --fundo: #181126;
    --fundo-2: rgba(8, 4, 16, .5);
    --painel: rgba(120, 92, 170, .16);
    --painel-2: rgba(255, 236, 200, .08);
    --borda: rgba(240, 222, 200, .22);
    --borda-forte: rgba(250, 232, 206, .44);
    --texto: #fcf4e6;
    --texto-2: #e4d6c2;
    --texto-3: #b6a8a4;
    --ouro: #f1ca6c;
    --ouro-2: #ffe4a2;
    --ouro-escuro: #a9843c;
    --perigo: #ffa0a8;
    --ok: #a8e4ba;
    --aviso: #f3d48a;
    --papel: #171024;
    --papel-borda: #9c7cb8;
    --tex-papiro: url('img/papiro-raio.webp');
    color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body { background: #0d0907; }
body::before {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(1100px 700px at 50% -8%, rgba(255, 176, 92, .16), transparent 62%),
        radial-gradient(700px 500px at 8% 105%, rgba(155, 107, 255, .1), transparent 60%),
        radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, .7) 100%),
        linear-gradient(180deg, rgba(14, 9, 6, .36), rgba(8, 5, 3, .52)),
        var(--tex-madeira),
        linear-gradient(180deg, #1a120c, #0d0907);
    /* walnut tabletop tiles at 1:1 (ferramentas/gerarMadeira.py); the dim layer keeps it behind the book */
    background-size: auto, auto, auto, auto, 1024px 1024px, auto;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat;
    background-position: 0 0, 0 0, 0 0, 0 0, center top, 0 0;
}
body {
    color: var(--texto);
    font-family: var(--serif);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.45;
    min-height: 100vh;
    font-variant-numeric: lining-nums;
}

h1, h2, h3, h4 { font-family: var(--titulo); font-weight: 600; letter-spacing: .03em; margin: 0; }

a { color: var(--ouro-2); }

.oculto { display: none !important; }

.ic { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }

::selection { background: rgba(155, 107, 255, .35); }

/* ---------- buttons and inputs ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45em;
    padding: .5em 1em; border-radius: var(--raio-p);
    border: 1px solid var(--borda-forte); background: var(--painel-2); color: var(--texto);
    font: 600 1em var(--serif); letter-spacing: .02em; cursor: pointer; white-space: nowrap;
    transition: background .2s, border-color .2s, box-shadow .2s, transform .08s, color .2s;
}
.btn:hover { border-color: var(--ouro); box-shadow: 0 0 0 1px rgba(217, 178, 90, .25), 0 3px 10px rgba(0, 0, 0, .15); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }

/* gold leaf */
.btn-ouro {
    background: linear-gradient(180deg, #f4dc8f 0%, #d6ac4a 45%, #b0832a 100%); color: #2a1a06; border-color: #8a6420;
    text-shadow: 0 1px 0 rgba(255, 240, 200, .5); box-shadow: inset 0 1px 0 rgba(255, 250, 220, .7), 0 2px 6px rgba(60, 35, 5, .25);
}
.btn-ouro:hover { background: linear-gradient(180deg, #fbe7a6 0%, #e0b955 45%, #bb8e31 100%); border-color: #6f4f15; box-shadow: inset 0 1px 0 rgba(255, 250, 220, .7), 0 0 14px rgba(240, 200, 100, .45); }

/* violet mana gem */
.btn-mana {
    position: relative; overflow: hidden;
    background: radial-gradient(120% 140% at 30% 0%, #b48cff 0%, #7442e0 45%, #3d1b8f 100%); color: #fbf7ff; border-color: #2e1470;
    text-shadow: 0 0 8px rgba(230, 210, 255, .7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 rgba(155, 107, 255, 0);
}
.btn-mana::after {
    content: ''; position: absolute; inset: -40% auto -40% 0; width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-18deg);
    animation: brilho-gema 4.5s ease-in-out infinite;
}
.btn-mana:hover { border-color: #c9adff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 18px rgba(155, 107, 255, .65); }
@keyframes brilho-gema { 0%, 70% { transform: translateX(-160%) skewX(-18deg); } 100% { transform: translateX(330%) skewX(-18deg); } }

.btn-perigo { color: var(--perigo); border-color: color-mix(in srgb, var(--perigo) 45%, transparent); background: transparent; }
.btn-perigo:hover { background: color-mix(in srgb, var(--perigo) 12%, transparent); border-color: var(--perigo); }
.btn-fantasma { background: transparent; border-color: transparent; color: var(--texto-2); }
.btn-fantasma:hover { background: var(--painel-2); border-color: var(--borda); color: var(--texto); box-shadow: none; }
.btn-icone { padding: .4em .55em; min-width: 2.2em; }
.btn-p { padding: .3em .7em; font-size: .92em; }

input[type=text], input[type=number], input[type=search], select, textarea {
    width: 100%; padding: .5em .7em; border-radius: var(--raio-p);
    border: 1px solid var(--borda); background: var(--fundo-2); color: var(--texto);
    font: 500 1.02em var(--serif);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .12);
    transition: border-color .2s, box-shadow .2s;
}
input::placeholder, textarea::placeholder { color: var(--texto-3); font-style: italic; }
input:focus, select:focus, textarea:focus, .btn:focus-visible {
    outline: none; border-color: var(--mana);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 3px color-mix(in srgb, var(--mana) 25%, transparent);
}
textarea { min-height: 7em; resize: vertical; line-height: 1.45; }
label { color: var(--texto); font: 700 .8em var(--titulo); letter-spacing: .09em; text-transform: uppercase; }

/* ---------- dialogs: a papyrus scroll that unrolls from its middle ---------- */
@property --desenrolar { syntax: '<number>'; inherits: true; initial-value: 1; }
dialog, .dialogo-fantasma {
    border: 1px solid var(--papel-borda); border-radius: 4px;
    background: var(--tex-papiro), radial-gradient(ellipse at center, transparent 55%, rgba(90, 55, 15, .22) 100%), var(--papel);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .65), inset 0 0 40px rgba(90, 55, 15, .18); padding: 0;
    width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
}
dialog { animation: desenrolar .6s cubic-bezier(.2, .85, .25, 1); }
[data-tom="escuro"] dialog, [data-tom="escuro"] .dialogo-fantasma { background: var(--tex-papiro), radial-gradient(ellipse at center, rgba(var(--luz, 155, 107, 255), .12), rgba(var(--breu, 10, 0, 25), .4) 100%), var(--papel); box-shadow: 0 30px 70px rgba(0, 0, 0, .7), 0 0 50px rgba(var(--luz, 155, 107, 255), .25); }
dialog::backdrop { background: radial-gradient(ellipse at center, rgba(20, 10, 30, .55), rgba(8, 5, 3, .8)); backdrop-filter: blur(3px); animation: fundo-entra .45s ease-out; }
/* the rolled ends of the scroll ride the opening edges */
dialog::before, dialog::after, .dialogo-fantasma::before, .dialogo-fantasma::after {
    content: ''; position: absolute; left: 0; right: 0; z-index: 3; height: 13px; border-radius: 7px; pointer-events: none;
    background: linear-gradient(180deg, color-mix(in srgb, var(--papel) 40%, #000) 0%, color-mix(in srgb, var(--papel) 78%, #fff) 36%, var(--papel) 58%, color-mix(in srgb, var(--papel) 45%, #000) 100%);
    box-shadow: 0 3px 6px rgba(0, 0, 0, .28);
}
dialog::before, .dialogo-fantasma::before { top: calc((1 - var(--desenrolar)) * 50% - 2px); }
dialog::after, .dialogo-fantasma::after { bottom: calc((1 - var(--desenrolar)) * 50% - 2px); }
/* the clip lives only in the keyframes, so tooltips inside an open dialog are never cut */
@keyframes desenrolar {
    0% { --desenrolar: 0; clip-path: inset(50% -60px); opacity: .2; transform: translateY(10px) scaleX(.9); }
    35% { opacity: 1; transform: translateY(0) scaleX(1.01); }
    100% { --desenrolar: 1; clip-path: inset(-60px -60px); opacity: 1; transform: none; }
}
@keyframes enrolar {
    0% { --desenrolar: 1; clip-path: inset(-60px -60px); opacity: 1; }
    100% { --desenrolar: 0; clip-path: inset(50% -60px); opacity: 0; transform: translateY(8px) scaleX(.92); }
}
@keyframes fundo-entra { from { opacity: 0; } to { opacity: 1; } }
.dialogo-fantasma { position: fixed; z-index: 1050; margin: 0; display: flex; flex-direction: column; overflow: hidden; pointer-events: none; color: var(--texto); animation: enrolar .42s cubic-bezier(.5, 0, .75, .3) forwards; }
.dialogo-cabeca { display: flex; align-items: center; justify-content: center; gap: 1em; padding: 1.3em 1.3em .7em; position: relative; flex: none; }
.dialogo-cabeca h2 { font-size: 1.22em; color: var(--ouro-2); text-align: center; }
.dialogo-cabeca::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--borda-forte), transparent); }
.dialogo-cabeca::before { content: '❦'; position: absolute; left: 50%; bottom: -.62em; z-index: 1; width: 1.6em; margin-left: -.8em; text-align: center; font-size: .9em; line-height: 1.2; color: var(--ouro); background: var(--papel); border-radius: 50%; }
.dialogo-corpo { padding: 1.2em 1.4em; overflow: auto; flex: 1 1 auto; min-height: 0; }
dialog[open] { display: flex; flex-direction: column; overflow: hidden; }
.dialogo-pe { display: flex; justify-content: flex-end; gap: .6em; padding: .9em 1.3em 1.3em; flex: none; }

/* ---------- toasts: torn papyrus notes closed with a wax seal ---------- */
#toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; z-index: 1000; max-width: min(420px, calc(100vw - 32px)); filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .5)); }
.toast {
    --selo: radial-gradient(circle at 35% 30%, #f6df98, var(--ouro) 55%, #6d4f17);
    position: relative; padding: .8em 1.15em .8em 3.1em; white-space: pre-line;
    background: var(--tex-papiro), radial-gradient(ellipse at 30% 40%, transparent 50%, rgba(90, 55, 15, .2) 100%), var(--papel);
    clip-path: polygon(0 3px, 2% 0, 30% 2px, 55% 0, 80% 3px, 100% 0, 100% 100%, 75% calc(100% - 2px), 45% 100%, 20% calc(100% - 3px), 0 100%, 1.4% 82%, 0 64%, 1.2% 46%, 0 28%, 1.5% 12%);
    transform-origin: 100% 60%;
    animation: toast-entra .6s cubic-bezier(.16, 1, .3, 1) both;
}
/* the wax seal stamped on the note */
.toast::before {
    content: ''; position: absolute; left: .8em; top: 50%; width: 1.55em; height: 1.55em; margin-top: -.78em;
    border-radius: 50% 46% 52% 48% / 48% 52% 47% 53%;
    background: radial-gradient(circle, transparent 50%, rgba(0, 0, 0, .22) 55%, rgba(255, 255, 255, .2) 60%, transparent 65%), var(--selo);
    box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .35), 0 2px 3px rgba(0, 0, 0, .3);
    animation: selo-carimba .55s .18s cubic-bezier(.16, 1, .3, 1) both;
}
.toast.erro { --selo: radial-gradient(circle at 35% 30%, #f3a197, #a8322a 55%, #5b120d); }
.toast.ok { --selo: radial-gradient(circle at 35% 30%, #b6ebc2, #3d7a4b 55%, #1c3d24); }
.toast.mana { --selo: radial-gradient(circle at 35% 30%, #efe3ff, #8b5cf6 52%, #3b1a8c); }
.toast.mana::before { box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .35), 0 0 12px rgba(155, 107, 255, .9); }
.toast.saindo { animation: toast-sai .42s cubic-bezier(.5, 0, .75, .3) forwards; }
@keyframes toast-entra { from { opacity: 0; transform: translateX(70px) rotate(5deg) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes toast-sai { to { opacity: 0; transform: translate(50px, 6px) rotate(-4deg) scale(.94); } }
@keyframes selo-carimba { 0% { opacity: 0; transform: scale(2.3) rotate(-35deg); } 50% { opacity: 1; } 100% { opacity: 1; transform: scale(1) rotate(-6deg); } }

/* ---------- data folder banner ---------- */
.faixa-pasta {
    display: flex; align-items: center; gap: .8em; flex-wrap: wrap;
    padding: .5em 1em; border-radius: var(--raio-p); font-size: .95em;
    border: 1px solid var(--borda); background: var(--painel);
}
.faixa-pasta .ponto { width: .6em; height: .6em; border-radius: 50%; background: var(--texto-3); flex: none; }
.faixa-pasta.conectada .ponto { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.faixa-pasta.alerta { border-color: color-mix(in srgb, var(--aviso) 55%, transparent); background: color-mix(in srgb, var(--aviso) 10%, transparent); }
.faixa-pasta.alerta .ponto { background: var(--aviso); box-shadow: 0 0 8px var(--aviso); }
.faixa-pasta .texto { flex: 1; min-width: 200px; color: var(--texto-2); }
.faixa-pasta strong { color: var(--texto); }

/* ---------- reduced motion: scrolls and notes simply appear ---------- */
@media (prefers-reduced-motion: reduce) {
    dialog, dialog::backdrop, .toast, .toast::before, .toast.saindo { animation: none; }
    /* the gleams that loop forever stop too */
    .btn-mana::after { animation: none; opacity: 0; }
}

/* ---------- animation levels (set by the app on <body>) ---------- */
[data-animacao="leve"] .btn-mana::after { animation: none; }
[data-animacao="desligado"] *, [data-animacao="desligado"] *::before, [data-animacao="desligado"] *::after {
    animation: none !important; transition: none !important;
}

@media (max-width: 640px) {
    body { font-size: 16px; }
    .dialogo-corpo { padding: 1em; }
}

/* ---------- framing a portrait (UI.ajustarRetrato, 23/10) ---------- */
.enq { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.enq-moldura {
    position: relative; width: min(300px, 70vw); aspect-ratio: 1; overflow: hidden; cursor: grab; touch-action: none; user-select: none;
    border-radius: 6px; background: #1a120b; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 8px 22px rgba(0, 0, 0, .45);
}
.enq-moldura:active { cursor: grabbing; }
.enq-moldura:focus-visible { outline: 3px solid #c79a3c; outline-offset: 3px; }
.enq-foto { position: absolute; inset: 0; background-repeat: no-repeat; }
/* the round crop of the avatars; the square around it is what the sheet's photo frame shows */
.enq-circulo { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 999px rgba(10, 6, 3, .45), inset 0 0 0 2px rgba(243, 217, 142, .85); }
.enq-controles { display: flex; align-items: center; gap: 14px; width: min(300px, 70vw); }
.enq-zoom { display: flex; align-items: center; gap: 8px; flex: 1; margin: 0; }
.enq-zoom input { flex: 1; accent-color: #8c6a24; }
.enq-dica { margin: 0; font-size: .85em; font-style: italic; opacity: .8; text-align: center; }