/* CSS FILE HEADER #
*
* File: [grimorio.css]
* Author(s): ['Pedro H.F Matias']
* Date: ['06.10.2026']
* Version: ['0.4.0']
* Description: ['Grimório FAC as a living book: 3D leather grimoires resting on a shelf, the open book with papyrus (or mana-bathed) pages turned like real paper, ribbon bookmarks, wax-seal costs and a glass tube of flowing mana.']
*/
/* ---------- leather colors of the cover ---------- */
:root {
--couro: #6b4426;
--g-couro: url('../../comum/img/couro.webp');
--g-papiro: url('../../comum/img/grao.webp') 0 0 / 256px, url('../../comum/img/papiro.webp') 0 0 / 1600px;
--latao: linear-gradient(135deg, #fff0bf 0%, #e2b955 22%, #9a6d22 55%, #c99a3a 78%, #4d330b 100%);
}
[data-tom="escuro"] .pagina { --g-papiro: url('../../comum/img/papiro-mana.webp'); }
[data-folha="velino"] .pagina, .livro-fechado[data-folha="velino"] { --g-papiro: url('../../comum/img/grao.webp') 0 0 / 256px, url('../../comum/img/papiro-velino.webp') 0 0 / 1600px; }
[data-folha="antigo"] .pagina, .livro-fechado[data-folha="antigo"] { --g-papiro: url('../../comum/img/grao.webp') 0 0 / 256px, url('../../comum/img/papiro-antigo.webp') 0 0 / 1600px; }
[data-folha="pergaminho"] .pagina, .livro-fechado[data-folha="pergaminho"] { --g-papiro: url('../../comum/img/grao.webp') 0 0 / 256px, url('../../comum/img/papiro-pergaminho.webp') 0 0 / 1600px; }
[data-folha="geada"] .pagina, .livro-fechado[data-folha="geada"] { --g-papiro: url('../../comum/img/grao.webp') 0 0 / 256px, url('../../comum/img/papiro-geada.webp') 0 0 / 1600px; }
[data-folha="herbario"] .pagina, .livro-fechado[data-folha="herbario"] { --g-papiro: url('../../comum/img/grao.webp') 0 0 / 256px, url('../../comum/img/papiro-herbario.webp') 0 0 / 1600px; }
[data-folha="gelo"] .pagina { --g-papiro: url('../../comum/img/papiro-gelo.webp'); }
[data-folha="fogo"] .pagina { --g-papiro: url('../../comum/img/papiro-fogo.webp'); }
[data-folha="raio"] .pagina { --g-papiro: url('../../comum/img/papiro-raio.webp'); }
[data-folha="sangue"] .pagina { --g-papiro: url('../../comum/img/papiro-sangue.webp'); }
[data-folha="necrose"] .pagina { --g-papiro: url('../../comum/img/papiro-necrose.webp'); }
[data-folha="abissal"] .pagina { --g-papiro: url('../../comum/img/papiro-abissal.webp'); }
[data-folha="keda"] .pagina { --g-papiro: url('../../comum/img/papiro-necrose.webp'); }
[data-folha="tres"] .pagina { --g-papiro: url('../../comum/img/papiro-raio.webp'); }
[data-folha="noria"] .pagina, .livro-fechado[data-folha="noria"] { --g-papiro: url('../../comum/img/grao.webp') 0 0 / 256px, url('../../comum/img/papiro-velino.webp') 0 0 / 1600px; }
[data-capa="castanho"] { --couro: #6b4426; }
[data-capa="negro"] { --couro: #2c221d; }
[data-capa="vinho"] { --couro: #5e1d26; }
[data-capa="musgo"] { --couro: #364628; }
[data-capa="anil"] { --couro: #23345a; }
.dica { color: var(--texto-3); font: italic 500 1em var(--serif); letter-spacing: 0; text-transform: none; }
label .dica { font-size: 1.25em; }
.campo { display: flex; flex-direction: column; gap: .4em; margin-bottom: 1.15em; }
.linha-botoes { display: flex; flex-wrap: wrap; gap: .5em; }
.btn-largo { width: 100%; }
body { overflow-x: hidden; }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes tinta-surge { from { opacity: 0; filter: blur(3px); transform: translateY(6px); } to { opacity: 1; filter: none; transform: none; } }
/* =====================================================================
THE DESK: living mana, candle glow and the light that follows the hand
===================================================================== */
.fundo-vivo { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }
[data-animacao="leve"] .fundo-vivo, [data-animacao="desligado"] .fundo-vivo { display: none; }
.camada-efeitos { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 900; pointer-events: none; }
.ambiente { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ambiente-vela {
position: absolute; left: 50%; top: -42vh; width: 150vw; height: 100vh; margin-left: -75vw;
background: radial-gradient(closest-side, rgba(255, 176, 88, .2), rgba(255, 140, 60, .07) 55%, transparent);
animation: vela 6s ease-in-out infinite alternate; will-change: opacity, transform;
}
@keyframes vela {
0% { opacity: .78; transform: scale(1); }
22% { opacity: .95; }
41% { opacity: .82; transform: scale(1.025); }
63% { opacity: 1; }
100% { opacity: .86; transform: scale(.985); }
}
.ambiente-lanterna {
position: absolute; left: 0; top: 0; width: 820px; height: 820px; margin: -410px 0 0 -410px; border-radius: 50%;
background: radial-gradient(closest-side, rgba(255, 214, 150, .11), rgba(170, 130, 255, .05) 48%, transparent 72%);
opacity: 0; transition: opacity .8s; will-change: transform;
}
body:has(#app.oculto) .ambiente-lanterna.acesa { opacity: 1; }
/* ---------- avatar ---------- */
.avatar {
flex: none; width: 52px; height: 52px; border-radius: 50%; padding: 0; cursor: pointer;
border: 0; background: #1a120b center/cover no-repeat;
color: #f3d98e; font: 700 1.1em var(--titulo);
display: grid; place-items: center;
box-shadow: 0 0 0 2px #c79a3c, 0 0 0 4px #2a1a0c, 0 0 0 5px #8c6a24, 0 6px 14px rgba(0, 0, 0, .45);
}
.avatar-g { width: 84px; height: 84px; font-size: 1.6em; }
.avatar.morto { filter: grayscale(1) brightness(.75); }
.avatar:hover { box-shadow: 0 0 0 2px #f3d98e, 0 0 0 4px #2a1a0c, 0 0 0 5px #c79a3c, 0 0 22px rgba(155, 107, 255, .55); }
/* =====================================================================
CHARACTER SELECT: 3D grimoires resting on a shelf
===================================================================== */
.tela-personagens { position: relative; z-index: 1; min-height: 100vh; display: grid; place-items: start center; padding: 42px 24px 48px; }
.tp-caixa { width: min(1200px, 100%); display: flex; flex-direction: column; gap: 22px; }
.tp-cabeca { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tp-marca { display: flex; align-items: center; gap: 16px; font: 600 .76em var(--titulo); letter-spacing: .5em; color: var(--ouro); text-transform: uppercase; }
.tp-marca::before, .tp-marca::after { content: ''; width: 70px; height: 1px; background: linear-gradient(90deg, transparent, var(--ouro)); }
.tp-marca::after { transform: scaleX(-1); }
.tp-titulo, .tp-titulo .letra {
background: linear-gradient(180deg, #fff6d8 0%, #f5dc96 34%, #c8963a 60%, #f3d790 82%, #b98a34 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.tp-titulo { font: 700 3.25em/1.12 var(--titulo); letter-spacing: .045em; margin-top: 6px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .7)) drop-shadow(0 0 24px rgba(255, 186, 96, .28)); }
.tp-sub { margin: 0; color: var(--texto-2); font-style: italic; font-size: 1.12em; }
.tela-personagens .faixa-pasta { max-width: 860px; width: 100%; margin: 0 auto; }
/* saved in the cloud: one quiet line under the motto, not a banner (27/10) */
.tela-personagens .faixa-pasta.conectada { width: auto; justify-content: center; gap: .45em; padding: 0; border: 0; background: none; color: var(--texto-3); }
.tela-personagens .faixa-pasta.conectada .ponto { width: .5em; height: .5em; box-shadow: none; }
.tela-personagens .faixa-pasta.conectada .texto { flex: none; min-width: 0; font-size: 0; color: inherit; }
.tela-personagens .faixa-pasta.conectada .texto strong:first-of-type { font: italic .9rem var(--serif); color: var(--texto-2); }
.tela-personagens .faixa-pasta.conectada .texto strong:first-of-type::before { content: 'salvando em '; color: var(--texto-3); }
.tela-personagens .faixa-pasta.conectada .texto strong ~ strong { display: none; }
/* ornamental flourish (also drawn on entry) */
.floreio { display: block; width: 360px; max-width: 70%; height: auto; color: var(--ouro); overflow: visible; }
.tp-floreio { margin: 2px auto 2px; width: 380px; filter: drop-shadow(0 0 6px rgba(240, 200, 110, .35)); }
/* the shelf: a wooden plank under each row of books */
.lista-personagens { position: relative; display: flex; flex-direction: column; gap: 26px; }
.prateleira {
--lw: 196px; --lh: 276px; --ld: 40px; --vao: 96px;
position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--vao) 44px; padding: 36px 30px 34px;
}
.prateleira::before {
content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: linear-gradient(180deg,
transparent calc(36px + var(--lh) - 9px),
#8b5c33 calc(36px + var(--lh) - 9px), #6a4223 calc(36px + var(--lh) + 5px),
#f0cf7c calc(36px + var(--lh) + 5px), #9a7430 calc(36px + var(--lh) + 7px),
#43271a calc(36px + var(--lh) + 7px), #23130b calc(36px + var(--lh) + 25px),
rgba(0, 0, 0, .55) calc(36px + var(--lh) + 25px), transparent calc(36px + var(--lh) + 64px))
0 0 / 100% calc(var(--lh) + 30px + var(--vao)) repeat-y;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
/* wood grain over the plank face */
.prateleira::after {
content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
background: linear-gradient(180deg, transparent calc(36px + var(--lh) - 9px), #000 calc(36px + var(--lh) - 9px), #000 calc(36px + var(--lh) + 25px), transparent calc(36px + var(--lh) + 25px)) 0 0 / 100% calc(var(--lh) + 30px + var(--vao)) repeat-y;
-webkit-mask-image: repeating-linear-gradient(180deg, transparent 0 2px, rgba(0, 0, 0, .55) 2px 3px, transparent 3px 7px, rgba(0, 0, 0, .3) 7px 8px, transparent 8px 11px);
mask-image: repeating-linear-gradient(180deg, transparent 0 2px, rgba(0, 0, 0, .55) 2px 3px, transparent 3px 7px, rgba(0, 0, 0, .3) 7px 8px, transparent 8px 11px);
mix-blend-mode: multiply;
}
.livro-slot { position: relative; z-index: 1; width: calc(var(--lw) + 28px); height: calc(var(--lh) + 30px); display: flex; justify-content: center; }
.livro-acoes {
position: absolute; left: 50%; top: calc(var(--lh) + 40px); z-index: 2; display: flex; gap: 4px; white-space: nowrap;
opacity: 0; transform: translate(-50%, -6px); transition: opacity .25s, transform .25s;
}
.livro-slot:hover .livro-acoes, .livro-slot:focus-within .livro-acoes { opacity: 1; transform: translate(-50%, 0); }
.livro-acoes .btn { color: var(--texto-2); }
.tp-vazio { color: var(--texto-3); padding: 1.4em; border: 1px dashed var(--borda); border-radius: var(--raio); text-align: center; width: min(560px, 100%); margin: 30px auto; font-style: italic; }
.arquivados { width: 100%; text-align: center; }
.arquivados summary {
display: inline-flex; align-items: center; gap: .6em; cursor: pointer; list-style: none;
color: var(--texto-2); font: 600 .82em var(--titulo); letter-spacing: .28em; text-transform: uppercase;
padding: .45em 1.2em; border: 1px solid var(--borda-forte); border-radius: 3px;
background: linear-gradient(180deg, rgba(60, 40, 22, .55), rgba(25, 16, 9, .7)); box-shadow: inset 0 1px 0 rgba(255, 230, 170, .08), 0 6px 14px rgba(0, 0, 0, .35);
transition: color .2s, border-color .2s;
}
.arquivados summary::-webkit-details-marker { display: none; }
.arquivados summary::before { content: '◆'; font-size: .7em; color: var(--ouro-escuro); transition: transform .3s; }
.arquivados[open] summary::before { transform: rotate(45deg); color: var(--ouro); }
.arquivados summary:hover { color: var(--ouro-2); border-color: var(--ouro-escuro); }
.lista-arquivados.prateleira { --lw: 140px; --lh: 197px; --ld: 28px; --vao: 70px; gap: var(--vao) 30px; padding-top: 30px; }
.lista-arquivados .prateleira::before { opacity: .8; }
/* ---------- the closed book, a real 3D box ---------- */
.livro-fechado {
position: relative; width: var(--lw); height: var(--lh); padding: 0; border: 0; background: none; cursor: pointer; outline: none;
color: inherit; font: inherit; font-size: calc(var(--lw) * .0816); text-align: center;
perspective: 1100px; perspective-origin: 50% -25%;
}
.livro-corpo { position: absolute; inset: 0; display: block; transform-style: preserve-3d; transform: rotateX(-3deg) rotateY(-26deg); }
.livro-corpo > * { position: absolute; display: block; }
.livro-sombra {
position: absolute; left: 4%; right: -10%; bottom: -15px; height: 30px; pointer-events: none; display: block;
background: radial-gradient(closest-side, rgba(0, 0, 0, .78), rgba(0, 0, 0, .35) 55%, transparent); filter: blur(3px);
}
/* leather faces */
.capa .frente, .contracapa, .lombada, .fecho-aba, .fecho-volta {
background-color: var(--couro);
}
.lombada {
left: calc(var(--ld) / -2); top: 0; width: var(--ld); height: 100%; border-radius: 6px; transform: rotateY(-90deg);
background:
linear-gradient(180deg, transparent 12%, rgba(255, 228, 160, .3) 12.5%, rgba(0, 0, 0, .5) 14.5%, transparent 15%, transparent 30%, rgba(255, 228, 160, .3) 30.5%, rgba(0, 0, 0, .5) 32.5%, transparent 33%,
transparent 67%, rgba(255, 228, 160, .3) 67.5%, rgba(0, 0, 0, .5) 69.5%, transparent 70%, transparent 85%, rgba(255, 228, 160, .3) 85.5%, rgba(0, 0, 0, .5) 87.5%, transparent 88%),
linear-gradient(90deg, rgba(0, 0, 0, .6), rgba(255, 255, 255, .08) 45%, rgba(0, 0, 0, .55)),
var(--g-couro), var(--couro);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5);
}
.contracapa {
inset: 0; border-radius: 10px 3px 3px 10px; transform: translateZ(calc(var(--ld) / -2)) rotateY(180deg);
background: linear-gradient(90deg, rgba(0, 0, 0, .5), transparent 30%), var(--g-couro), color-mix(in srgb, var(--couro) 75%, #000);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6);
}
/* gilt page edges seen from the side */
.corte {
--folha-a: #f6dd94; --folha-b: #a97a26;
background:
repeating-linear-gradient(90deg, rgba(80, 52, 10, .38) 0 1px, transparent 1px 2.5px),
linear-gradient(180deg, var(--folha-a), var(--folha-b) 48%, var(--folha-a));
}
.livro-fechado[data-tom="escuro"] .corte { --folha-a: var(--miolo-a, #b892ff); --folha-b: var(--miolo-b, #3c2466); }
.corte { top: .35em; bottom: .35em; left: calc(var(--lw) - var(--ld) / 2 - 3px); width: calc(var(--ld) - 6px); transform: rotateY(90deg); box-shadow: inset 0 0 6px rgba(0, 0, 0, .45); }
/* first page, revealed when the cover swings */
.miolo { inset: .35em .2em .35em .55em; border-radius: 0 4px 4px 0; transform: translateZ(calc(var(--ld) / 2 - 2px)); box-shadow: inset 0 0 0 1px rgba(60, 35, 10, .35); background: var(--miolo-fundo, #e7d7ad); }
.miolo-pagina {
position: absolute; inset: 0; border-radius: inherit; overflow: hidden; display: block;
background: var(--g-papiro), linear-gradient(90deg, rgba(var(--dobra, 70, 40, 10), .4), transparent 20%), var(--miolo-fundo, #e7d7ad);
}
.miolo-pagina::before {
content: ''; position: absolute; inset: 18% 10%; background: url('../img/circulo-tinta.webp') center/contain no-repeat; opacity: .55; filter: hue-rotate(var(--matiz, 0deg));
}
.miolo-pagina::after {
content: ''; position: absolute; inset: 0; opacity: var(--brilho-pagina, 0);
background: radial-gradient(circle at 50% 45%, rgba(246, 236, 255, .98), rgba(170, 125, 255, .6) 32%, rgba(120, 70, 230, .15) 60%, transparent 75%);
}
.livro-fechado[data-tom="escuro"] .miolo-pagina { background: radial-gradient(circle at 50% 45%, rgba(var(--luz-clara, 170, 130, 255), .35), transparent 70%), linear-gradient(90deg, rgba(0, 0, 0, .45), transparent 18%), var(--miolo-fundo, #2e1a4c); }
.livro-fechado[data-tom="escuro"] .miolo-pagina::before { background-image: url('../img/circulo-mana.webp'); opacity: .75; }
/* the cover: front (tooled leather) and back (endpaper) */
.capa { inset: 0; transform-origin: left center; transform-style: preserve-3d; transform: translateZ(calc(var(--ld) / 2)); }
.capa .frente, .capa .verso { position: absolute; inset: 0; display: block; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 3px 10px 10px 3px; overflow: hidden; }
.capa .frente {
background:
radial-gradient(9em 9em at var(--lx, 72%) var(--ly, 18%), rgba(255, 238, 205, .2), transparent 70%),
linear-gradient(90deg, rgba(0, 0, 0, .58) 0, rgba(255, 255, 255, .12) .6em, rgba(0, 0, 0, .42) 1.05em, transparent 1.25em),
var(--g-couro),
radial-gradient(120% 90% at 35% 20%, color-mix(in srgb, var(--couro) 70%, #fff 18%), var(--couro) 55%, color-mix(in srgb, var(--couro) 58%, #000) 100%);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55), inset 0 0 1.4em rgba(0, 0, 0, .62), inset 0 1px 0 rgba(255, 255, 255, .14);
}
/* the cover darkens as it turns away from the light */
.capa .frente::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .2)); opacity: var(--sombra-capa, 0); pointer-events: none; }
.capa .verso {
transform: rotateY(180deg);
background: var(--g-papiro), radial-gradient(circle at 60% 40%, #d8c393, #b99d68);
box-shadow: inset 0 0 0 .45em var(--couro), inset 0 0 0 .52em rgba(0, 0, 0, .4), inset 0 0 1.5em rgba(60, 35, 10, .45);
}
.capa .ornamento {
position: absolute; inset: 0; width: 100%; height: 100%; color: #e2c070; overflow: visible;
filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .75)) drop-shadow(0 -.5px 0 rgba(255, 240, 200, .3));
transition: color .4s, filter .4s;
}
.livro-fechado:hover .capa .ornamento, .livro-fechado:focus-visible .capa .ornamento { color: #f6dd96; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .75)) drop-shadow(0 0 4px rgba(255, 214, 130, .55)); }
.livro-fechado:focus-visible .frente { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55), inset 0 0 1.4em rgba(0, 0, 0, .62), 0 0 0 2px var(--mana-2); }
.capa .medalhao-capa { position: absolute; left: 53.5%; top: 40%; width: 8.2em; height: 8.2em; margin: -4.1em 0 0 -4.1em; display: grid; place-items: center; }
.capa .medalhao-capa::before {
content: ''; position: absolute; inset: 0; background: url('../img/circulo-mana.webp') center/contain no-repeat;
filter: sepia(1) saturate(2.4) brightness(.95) drop-shadow(0 1px 0 rgba(0, 0, 0, .7)); opacity: .85;
animation: girar 140s linear infinite;
}
.livro-fechado:hover .medalhao-capa::before { filter: sepia(1) saturate(2.4) brightness(1.12) drop-shadow(0 0 6px rgba(190, 150, 255, .9)); }
.capa .medalhao-capa .avatar { position: relative; width: 4.3em; height: 4.3em; font-size: 1.15em; cursor: inherit; }
.capa .placa { position: absolute; left: 21%; right: 12%; top: 68.6%; height: 14.3%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 .4em; }
.capa .cp-nome {
font: 700 1.02em/1.08 var(--titulo); color: #efd38c; letter-spacing: .05em;
text-shadow: 0 1px 0 rgba(0, 0, 0, .8), 0 -1px 0 rgba(255, 236, 190, .18), 0 0 12px rgba(240, 200, 110, .25);
overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.livro-etiqueta {
position: absolute; left: 50%; top: calc(var(--lh) + 7px); z-index: 2; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
padding: 0 .7em; border-radius: 2px; font: italic .8em/1.45 var(--serif); color: #2a1a06; text-shadow: 0 1px 0 rgba(255, 245, 210, .5);
/* dark ink on a brass plate (>= 7:1); the solid colour under the gradient is what contrast tools read */
background: linear-gradient(180deg, #fbe7a6, #d6aa48 55%, #a07424) #d6aa48; box-shadow: 0 0 0 1px rgba(60, 35, 5, .6), 0 2px 3px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 250, 220, .7);
}
.livro-etiqueta::before, .livro-etiqueta::after { content: ''; position: absolute; top: 50%; width: 3px; height: 3px; margin-top: -1.5px; border-radius: 50%; background: #5a3d0e; box-shadow: inset 0 0 0 .5px rgba(255, 240, 200, .4); }
.livro-etiqueta::before { left: 3px; }
.livro-etiqueta::after { right: 3px; }
.lista-arquivados .livro-etiqueta { font-size: .66em; top: calc(var(--lh) + 5px); }
.selo-morto { display: inline-block; margin-top: .15em; font: 600 .62em var(--titulo); letter-spacing: .15em; color: #f3c9c4; border: 1px solid rgba(243, 201, 196, .5); border-radius: 2px; padding: .05em .5em; text-transform: uppercase; }
/* clasp: a leather strap from the back cover, around the fore-edge, snapped on the front */
.fecho { right: -3px; top: 50%; width: 4em; height: 2.5em; margin-top: -1.25em; transform-style: preserve-3d; transform-origin: 100% 50%; transform: translateZ(calc(var(--ld) / -2)); }
.fecho-aba {
position: absolute; inset: 0; display: block; border-radius: 1.25em .15em .15em 1.25em; transform: translateZ(calc(var(--ld) + 1px));
background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(0, 0, 0, .3)), var(--g-couro), color-mix(in srgb, var(--couro) 88%, #000);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55), -2px 3px 5px rgba(0, 0, 0, .45);
}
.fecho-aba::before { content: ''; position: absolute; inset: .28em .28em .28em .5em; border: 1px dashed rgba(236, 206, 150, .45); border-radius: 1em .1em .1em 1em; }
/* brass snap */
.fecho-aba::after {
content: ''; position: absolute; left: .55em; top: 50%; width: 1.25em; height: 1.25em; margin-top: -.625em; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #fff4c8, #dcae48 42%, #7a5214 80%, #4d330b);
box-shadow: 0 0 0 .14em rgba(60, 35, 5, .65), 0 2px 3px rgba(0, 0, 0, .55), inset 0 -1px 2px rgba(0, 0, 0, .4);
}
.fecho-volta {
position: absolute; top: 0; height: 100%; width: calc(var(--ld) + 2px); left: calc(100% - var(--ld) / 2 - 1px); display: block; transform: translateZ(calc(var(--ld) / 2)) rotateY(90deg);
background: linear-gradient(90deg, rgba(0, 0, 0, .4), rgba(255, 255, 255, .06) 50%, rgba(0, 0, 0, .4)), var(--g-couro), color-mix(in srgb, var(--couro) 80%, #000);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5);
}
/* dead and archived: color drained, on the leaf faces only (a filter on a 3D group flattens it) */
.livro-fechado.morto :is(.frente, .verso, .lombada, .contracapa, .corte, .miolo, .fecho-aba, .fecho-volta) { filter: grayscale(.85) brightness(.7); }
.lista-arquivados .livro-fechado :is(.frente, .lombada, .contracapa, .corte, .fecho-aba, .fecho-volta) { filter: saturate(.55) brightness(.8); }
/* ---------- new grimoire ---------- */
.novo-personagem { display: flex; gap: 10px; width: min(640px, 100%); margin: 8px auto 0; }
.novo-campo { flex: 1; position: relative; display: block; font: inherit; letter-spacing: 0; text-transform: none; color: var(--ouro); }
.novo-campo .ic { position: absolute; left: .85em; top: 50%; margin-top: -.58em; pointer-events: none; }
.novo-campo input {
height: 100%; padding-left: 2.5em; border-color: rgba(214, 170, 92, .32);
background: linear-gradient(180deg, rgba(10, 6, 3, .7), rgba(30, 20, 12, .6)); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .55);
}
.tp-rodape { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .95em; width: min(860px, 100%); margin: 0 auto; }
.tp-outros { display: flex; gap: 22px; flex-wrap: wrap; }
/* ---------- the opening stage: the chosen book flies to the light ---------- */
.palco-livro { position: fixed; inset: 0; z-index: 950; pointer-events: none; overflow: hidden; }
.palco-cortina { position: absolute; inset: 0; opacity: 0; pointer-events: auto; background: radial-gradient(ellipse 70% 70% at 50% 46%, rgba(30, 14, 50, .55), rgba(6, 3, 2, .93) 72%); }
.palco-luz {
position: absolute; inset: 0; opacity: 0;
background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(250, 244, 255, .95), rgba(190, 150, 255, .65) 18%, rgba(110, 60, 220, .25) 42%, transparent 70%);
}
.palco-livro .livro-fechado { position: absolute; left: 0; top: 0; margin: 0; transform-origin: 0 0; cursor: default; }
.palco-livro .livro-acoes { display: none; }
/* =====================================================================
THE OPEN BOOK
===================================================================== */
.app { position: relative; z-index: 1; width: min(1240px, calc(100% - 48px)); margin: 0 auto; padding: 72px 0 80px; }
.livro {
position: relative; padding: 22px 24px 30px 36px; border-radius: 10px 16px 16px 10px;
background:
linear-gradient(90deg, rgba(0, 0, 0, .58), rgba(255, 255, 255, .08) 14px, rgba(0, 0, 0, .32) 26px, transparent 30px),
var(--g-couro),
radial-gradient(130% 100% at 30% 10%, color-mix(in srgb, var(--couro) 75%, #fff 15%), var(--couro) 50%, color-mix(in srgb, var(--couro) 55%, #000) 100%);
box-shadow:
0 50px 90px rgba(0, 0, 0, .72), 0 0 0 1px rgba(0, 0, 0, .6),
inset 0 0 0 8px transparent, inset 0 0 0 9px rgba(226, 190, 106, .42), inset 0 0 0 11px transparent, inset 0 0 0 12px rgba(226, 190, 106, .18),
inset 0 0 34px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .12);
transition: box-shadow .6s;
}
.livro.aceso {
box-shadow:
0 50px 90px rgba(0, 0, 0, .72), 0 0 70px rgba(var(--luz, 155, 107, 255), .45), 0 0 0 1px rgba(0, 0, 0, .6),
inset 0 0 0 9px rgba(226, 190, 106, .55), inset 0 0 34px rgba(0, 0, 0, .6);
}
/* stitching and raised spine bands */
.livro::before { content: ''; position: absolute; inset: 5px; z-index: 0; pointer-events: none; border-radius: 7px 12px 12px 7px; border: 1.5px dashed rgba(236, 206, 150, .4); }
.livro::after {
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 30px; z-index: 0; pointer-events: none;
background: repeating-linear-gradient(180deg, transparent 0 150px, rgba(255, 230, 170, .24) 150px 151.5px, rgba(0, 0, 0, .52) 151.5px 156px, transparent 156px 170px);
}
/* brass filigree corners */
.cantoneira { position: absolute; z-index: 2; width: 92px; height: 92px; pointer-events: none; filter: drop-shadow(1px 3px 2px rgba(0, 0, 0, .6)); }
.cantoneira svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cantoneira.c1 { left: -3px; top: -3px; }
.cantoneira.c2 { right: -3px; top: -3px; transform: rotate(90deg); }
.cantoneira.c3 { right: -3px; bottom: -3px; transform: rotate(180deg); }
.cantoneira.c4 { left: -3px; bottom: -3px; transform: rotate(270deg); }
/* loose clasp hanging from the fore-edge */
.fecho-pendente {
position: absolute; right: -40px; top: 24%; z-index: 3; width: 78px; height: 46px; pointer-events: none;
border-radius: 4px 23px 23px 4px; transform-origin: 6px 50%;
background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(0, 0, 0, .3)), var(--g-couro), color-mix(in srgb, var(--couro) 85%, #000);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5), 4px 8px 12px rgba(0, 0, 0, .55);
animation: fecho-balanca 7s ease-in-out infinite alternate;
}
.fecho-pendente::before { content: ''; position: absolute; inset: 5px 30px 5px 5px; border: 1px dashed rgba(236, 206, 150, .45); border-radius: 3px; }
.fecho-fivela {
position: absolute; right: 9px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #fff4c8, #dcae48 42%, #7a5214 80%, #4d330b);
box-shadow: 0 0 0 2px rgba(60, 35, 5, .65), 0 2px 4px rgba(0, 0, 0, .6), inset 0 -1px 2px rgba(0, 0, 0, .4);
}
.fecho-fivela::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; border: 1px solid rgba(80, 50, 8, .6); box-shadow: inset 0 1px 1px rgba(255, 245, 210, .5); }
@keyframes fecho-balanca { from { transform: rotate(-5deg); } to { transform: rotate(3deg); } }
/* ---------- ribbon bookmarks (tabs) ---------- */
.abas { position: absolute; top: -40px; right: 70px; z-index: 3; display: flex; gap: 14px; filter: drop-shadow(0 5px 4px rgba(0, 0, 0, .5)); }
.aba {
--fita: #7d1f24;
position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 116px;
padding: 46px 14px 30px; border: 0; cursor: pointer; color: #fff6e2;
font: 700 .74em var(--titulo); letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 1px 1px rgba(0, 0, 0, .65);
background:
linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .26) 48%, transparent 58%) -100% 0 / 260% 100% no-repeat,
linear-gradient(90deg, rgba(0, 0, 0, .4), rgba(255, 255, 255, .16) 28%, rgba(255, 255, 255, .03) 55%, rgba(0, 0, 0, .34)),
repeating-linear-gradient(0deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 3px),
var(--fita);
clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 15px), 0 100%);
transform-origin: top center; transition: padding .45s cubic-bezier(.2, .8, .2, 1), filter .3s;
}
/* embroidered edges */
.aba::before { content: ''; position: absolute; top: 0; bottom: 12px; left: 7px; right: 7px; border-left: 1px dashed rgba(255, 226, 150, .45); border-right: 1px dashed rgba(255, 226, 150, .45); pointer-events: none; }
/* one silk per chapter name (tema.css --fita-*): alone (data-aba), inside the sheet (data-grim-aba) and the sheet's own ribbons.
The bathed sheets still dye their third ribbon (below) */
.aba[data-aba="personagem"], .aba[data-grim-aba="personagem"] { --fita: var(--fita-personagem); }
.aba[data-aba="pericias"] { --fita: var(--fita-pericias); }
.aba[data-aba="evolucao"] { --fita: var(--fita-evolucao); }
.aba[data-aba="magia"] { --fita: var(--fita-prestigios); }
.aba[data-aba="notas"] { --fita: var(--fita-notas); }
.aba[data-aba="grimorio"], .aba[data-grim-aba="grimorio"] { --fita: var(--fita-grimorio); }
.aba[data-aba="editor"], .aba[data-grim-aba="editor"] { --fita: var(--fita-editor); }
.aba[data-aba="banco"], .aba[data-grim-aba="banco"] { --fita: var(--fita-banco); }
.aba[data-aba="registro"], .aba[data-grim-aba="registro"] { --fita: var(--fita-registro); }
.aba[data-aba="configuracoes"], .aba[data-grim-aba="configuracoes"] { --fita: var(--fita-configuracoes); }
/* the grimoire's page of essences (data-aba personagem, labelled Essências) has its own silk; the Ficha ribbon wears the
silk of the page it opens (the sheet's Personagem), so wine always means "the sheet" */
.aba.aba-essencias { --fita: var(--fita-essencias); }
.aba.aba-ir-ficha { --fita: var(--fita-ficha); }
/* keyboard: a pale ring sewn inside the silk, dark under it so it reads on every colour (clip-path would cut an outline) */
.abas .aba:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #fff6e2, inset 0 0 0 4px rgba(20, 10, 4, .7); filter: brightness(1.18); }
[data-tom="escuro"] .aba:nth-child(3) { --fita: var(--fita-3, #9468dc); }
[data-folha="noria"] .aba:nth-child(3) { --fita: var(--fita-3); }
.aba .ic { width: 1.65em; height: 1.65em; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); }
.aba:hover { padding-bottom: 36px; filter: brightness(1.15); animation: seda 1.1s ease-out, balanco 1.4s ease-out; }
.aba.balanca { animation: seda 1.1s ease-out, balanco 1.4s ease-out; }
.aba.ativa { padding-bottom: 44px; filter: brightness(1.14) saturate(1.1); }
.aba.ativa::after { content: ''; position: absolute; left: 50%; bottom: 24px; width: 6px; height: 6px; margin-left: -3px; transform: rotate(45deg); background: #f3d98e; box-shadow: 0 0 8px #f3d98e; }
.aba .cont { display: inline-block; min-width: 1.8em; padding: 0 .45em; border-radius: 99px; background: rgba(0, 0, 0, .32); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4); font: 600 1em var(--serif); letter-spacing: 0; }
@keyframes seda { from { background-position: -100% 0, 0 0, 0 0, 0 0; } to { background-position: 200% 0, 0 0, 0 0, 0 0; } }
/* silk ribbons sway on their pin */
@keyframes balanco { 0% { transform: rotate(0); } 22% { transform: rotate(2.6deg); } 48% { transform: rotate(-1.7deg); } 72% { transform: rotate(.8deg); } 100% { transform: rotate(0); } }
/* ---------- the page ---------- */
.livro > .folha {
position: relative; z-index: 1; min-height: calc(100vh - 170px); padding: 42px 56px 60px 70px; border-radius: 2px 5px 5px 2px;
background:
linear-gradient(90deg, rgba(var(--dobra, 70, 40, 10), .4), rgba(var(--dobra, 70, 40, 10), .09) 5%, transparent 9%),
radial-gradient(ellipse at center, transparent 58%, rgba(var(--vinheta, 120, 75, 20), .3) 100%),
radial-gradient(900px 500px at 70% -10%, rgba(255, 236, 190, .18), transparent 70%),
var(--g-papiro),
var(--papel);
box-shadow:
1px 1px 0 var(--aresta-escura, #cbb688), 2px 2px 0 var(--aresta-clara, #ebdcb6), 3px 3px 0 var(--aresta-escura, #c4ad7b), 4px 4px 0 var(--aresta-clara, #e6d6ab), 5px 5px 0 var(--aresta-escura, #bca470), 6px 6px 0 var(--aresta-clara, #ddcb9c),
7px 7px 12px rgba(0, 0, 0, .45), 0 0 0 1px rgba(60, 35, 10, .3);
}
[data-tom="escuro"] .livro > .folha, [data-tom="escuro"] .virada .folha {
background:
linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .12) 5%, transparent 9%),
var(--banho, radial-gradient(ellipse at center, transparent 50%, rgba(var(--breu, 8, 0, 22), .55) 100%)),
var(--g-papiro),
var(--papel);
box-shadow:
var(--banho-borda, 0 0 0 0 transparent),
1px 1px 0 var(--aresta-clara, #6d4ca3), 2px 2px 0 var(--aresta-escura, #3a2160), 3px 3px 0 var(--aresta-clara, #6a4a9e), 4px 4px 0 var(--aresta-escura, #331c56), 5px 5px 0 var(--aresta-clara, #5f4291), 6px 6px 0 var(--aresta-escura, #2c184b),
7px 7px 12px rgba(0, 0, 0, .5), 0 0 0 1px rgba(var(--breu, 10, 0, 30), .5), 0 0 44px rgba(var(--luz, 155, 107, 255), .2);
}
/* each element bathes the sheet its own way: --banho = light/shade layers, --banho-borda = inset glow of the edges
* (mana defines none and keeps the plain vignette) */
[data-folha="gelo"] {
--banho:
radial-gradient(1000px 520px at 50% -6%, rgba(120, 190, 255, .18), transparent 70%),
radial-gradient(ellipse at center, transparent 50%, rgba(170, 220, 255, .08) 80%, rgba(225, 245, 255, .2) 100%);
--banho-borda: inset 0 0 0 1px rgba(225, 245, 255, .4), inset 0 0 24px rgba(200, 235, 255, .34), inset 0 0 110px rgba(110, 180, 255, .16);
}
[data-folha="fogo"] {
--banho:
radial-gradient(1200px 640px at 50% 105%, rgba(255, 90, 10, .16), transparent 70%),
radial-gradient(ellipse at center, rgba(8, 2, 0, .35) 30%, transparent 60%, rgba(255, 80, 10, .1) 85%, rgba(255, 150, 40, .18) 100%);
--banho-borda: inset 0 0 0 1px rgba(255, 180, 70, .55), inset 0 0 5px 2px rgba(12, 2, 0, .9), inset 0 0 34px rgba(255, 100, 20, .42), inset 0 0 130px rgba(255, 70, 0, .14);
}
[data-folha="raio"] {
--banho:
radial-gradient(820px 420px at 76% -4%, rgba(255, 240, 170, .11), transparent 70%),
radial-gradient(900px 600px at 14% 28%, rgba(90, 110, 255, .15), transparent 70%),
radial-gradient(ellipse at center, transparent 45%, rgba(3, 3, 16, .62) 100%);
--banho-borda: inset 0 0 0 1px rgba(255, 240, 160, .45), inset 0 0 18px rgba(140, 160, 255, .36), inset 0 0 90px rgba(4, 4, 22, .6);
}
[data-folha="sangue"] {
--banho:
radial-gradient(1000px 640px at 50% 32%, rgba(150, 10, 25, .3), transparent 70%),
radial-gradient(ellipse at center, transparent 40%, rgba(6, 0, 1, .72) 100%);
--banho-borda: inset 0 0 0 1px rgba(210, 30, 50, .42), inset 0 0 14px rgba(190, 15, 35, .42), inset 0 0 80px rgba(0, 0, 0, .78);
}
[data-folha="necrose"] {
--banho:
radial-gradient(820px 520px at 24% 78%, rgba(90, 200, 60, .12), transparent 70%),
radial-gradient(700px 420px at 80% 18%, rgba(160, 200, 40, .07), transparent 70%),
radial-gradient(ellipse at center, transparent 45%, rgba(0, 6, 1, .74) 100%);
--banho-borda: inset 0 0 0 1px rgba(140, 255, 90, .3), inset 0 0 22px rgba(110, 230, 70, .26), inset 0 0 100px rgba(0, 0, 0, .66);
}
[data-folha="abissal"] {
--banho:
radial-gradient(1300px 520px at 50% -10%, rgba(70, 220, 230, .2), transparent 70%),
radial-gradient(ellipse at center, transparent 45%, rgba(0, 4, 8, .7) 100%);
--banho-borda: inset 0 0 0 1px rgba(90, 255, 235, .32), inset 0 0 26px rgba(60, 220, 210, .26), inset 0 0 110px rgba(0, 4, 10, .6);
}
/* the Sisters. Laza: moonlight from above, the crescent at the fore-edge corner, small stars at the others */
[data-folha="laza"] {
--banho:
url('../../comum/img/irmas-lua.webp') right 18px top 112px / 112px no-repeat,
url('../../comum/img/irmas-estrela.webp') left 18px top 18px / 34px no-repeat,
url('../../comum/img/irmas-estrela.webp') left 18px bottom 22px / 26px no-repeat,
url('../../comum/img/irmas-estrela.webp') right 22px bottom 26px / 30px no-repeat,
radial-gradient(1100px 560px at 78% -8%, rgba(196, 208, 255, .2), transparent 70%),
radial-gradient(760px 460px at 14% 62%, rgba(130, 100, 220, .1), transparent 70%),
radial-gradient(ellipse at center, transparent 45%, rgba(2, 3, 14, .66) 100%);
--banho-borda: inset 0 0 0 1px rgba(214, 222, 255, .4), inset 0 0 0 7px transparent, inset 0 0 0 8px rgba(200, 208, 255, .14), inset 0 0 24px rgba(170, 180, 255, .22), inset 0 0 110px rgba(2, 3, 14, .6);
}
[data-folha="laza"] .folha.pagina::before {
background:
radial-gradient(640px 300px at 76% 12%, rgba(var(--luz), .12), transparent 70%),
radial-gradient(520px 380px at 20% 70%, rgba(var(--luz-funda), .1), transparent 70%);
}
/* Nória: dawn vellum framed by her stained glass, the sun rising over the top of the page */
[data-folha="noria"] .livro > .folha, [data-folha="noria"] .virada .folha {
background:
url('../../comum/img/irmas-sol.webp') left 2px top 2px / 76px no-repeat,
url('../../comum/img/irmas-sol.webp') right 2px top 2px / 76px no-repeat,
url('../../comum/img/irmas-sol.webp') left 2px bottom 2px / 76px no-repeat,
url('../../comum/img/irmas-sol.webp') right 2px bottom 2px / 76px no-repeat,
url('../../comum/img/irmas-vitral-v.webp') left 12px top 0 / 34px auto repeat-y,
url('../../comum/img/irmas-vitral-v.webp') right 12px top 0 / 34px auto repeat-y,
url('../../comum/img/irmas-vitral-h.webp') left 0 top 8px / auto 34px repeat-x,
url('../../comum/img/irmas-vitral-h.webp') left 0 bottom 8px / auto 34px repeat-x,
linear-gradient(90deg, rgba(var(--dobra), .3), rgba(var(--dobra), .06) 5%, transparent 9%),
radial-gradient(1300px 720px at 50% -16%, rgba(255, 214, 110, .78), rgba(255, 176, 60, .3) 46%, transparent 76%),
radial-gradient(500px 260px at 50% -4%, rgba(255, 246, 210, .7), transparent 72%),
radial-gradient(ellipse at center, transparent 58%, rgba(var(--vinheta), .24) 100%),
var(--g-papiro),
var(--papel);
box-shadow:
inset 0 0 70px rgba(255, 196, 90, .28),
1px 1px 0 var(--aresta-escura), 2px 2px 0 var(--aresta-clara), 3px 3px 0 var(--aresta-escura), 4px 4px 0 var(--aresta-clara), 5px 5px 0 var(--aresta-escura), 6px 6px 0 var(--aresta-clara),
7px 7px 12px rgba(0, 0, 0, .45), 0 0 0 1px rgba(90, 45, 5, .35), 0 0 54px rgba(255, 190, 70, .28);
}
[data-folha="noria"] .folha.pagina::before {
opacity: .9;
background:
radial-gradient(700px 320px at 50% 4%, rgba(255, 236, 170, .3), transparent 70%),
radial-gradient(460px 340px at 12% 70%, rgba(179, 38, 58, .05), transparent 70%),
radial-gradient(460px 340px at 88% 64%, rgba(29, 107, 69, .05), transparent 70%);
}
/* Keda: the full moon that sang over her lemon tree at the fore-edge corner, the rose she held at the foot,
* a garden vine climbing both side edges, moonlight from above and the garden breathing from below */
[data-folha="keda"] {
--banho:
url('../../comum/img/irmas-limoeiro.webp') right 0 top 100px / 150px no-repeat,
url('../../comum/img/irmas-rosa.webp') left 6px bottom 8px / 118px no-repeat,
url('../../comum/img/irmas-vinha-v.webp') left 14px top 0 / 30px auto repeat-y,
url('../../comum/img/irmas-vinha-v.webp') right 14px top 130px / 30px auto repeat-y,
radial-gradient(1100px 560px at 84% -6%, rgba(214, 236, 170, .17), transparent 70%),
radial-gradient(1000px 420px at 30% 104%, rgba(60, 140, 84, .16), transparent 70%),
radial-gradient(ellipse at center, transparent 46%, rgba(2, 10, 6, .66) 100%);
--banho-borda: inset 0 0 0 1px rgba(222, 240, 196, .36), inset 0 0 0 7px transparent, inset 0 0 0 8px rgba(214, 236, 170, .1), inset 0 0 26px rgba(160, 214, 140, .18), inset 0 0 110px rgba(2, 10, 6, .6);
}
[data-folha="keda"] .folha.pagina::before {
background:
radial-gradient(620px 300px at 80% 12%, rgba(var(--luz), .1), transparent 70%),
radial-gradient(560px 360px at 18% 82%, rgba(var(--luz-funda), .1), transparent 70%);
}
/* the Three: the temple window around the page (Keda's garden glass on the left wall, Laza's night glass on the right,
* Nória's glass above and below), their moons at the corners, the three lights under the ribbons,
* the sun from above meeting green and indigo moonlight from the sides */
[data-folha="tres"] {
--banho:
url('../../comum/img/irmas-roda-keda.webp') left 2px top 2px / 76px no-repeat,
url('../../comum/img/irmas-roda-laza.webp') right 2px top 2px / 76px no-repeat,
url('../../comum/img/irmas-roda-keda.webp') left 2px bottom 2px / 76px no-repeat,
url('../../comum/img/irmas-roda-laza.webp') right 2px bottom 2px / 76px no-repeat,
url('../../comum/img/irmas-tres.webp') right 58px top 110px / 116px no-repeat,
url('../../comum/img/irmas-vitral-keda-v.webp') left 12px top 0 / 34px auto repeat-y,
url('../../comum/img/irmas-vitral-laza-v.webp') right 12px top 0 / 34px auto repeat-y,
url('../../comum/img/irmas-vitral-h.webp') left 0 top 8px / auto 34px repeat-x,
url('../../comum/img/irmas-vitral-h.webp') left 0 bottom 8px / auto 34px repeat-x,
radial-gradient(1300px 620px at 50% -14%, rgba(255, 196, 110, .34), rgba(220, 120, 70, .12) 46%, transparent 76%),
linear-gradient(180deg, rgba(255, 168, 90, .14), rgba(200, 96, 90, .05) 260px, transparent 520px),
radial-gradient(760px 900px at -8% 56%, rgba(60, 150, 96, .26), transparent 70%),
radial-gradient(760px 900px at 108% 56%, rgba(96, 92, 230, .28), transparent 70%),
radial-gradient(ellipse at center, transparent 50%, rgba(8, 4, 16, .6) 100%);
--banho-borda: inset 0 0 0 1px rgba(255, 226, 170, .4), inset 0 0 34px rgba(255, 196, 120, .14), inset 0 0 110px rgba(8, 4, 16, .55);
}
[data-folha="tres"] .folha.pagina::before {
background:
radial-gradient(700px 300px at 50% 4%, rgba(var(--luz), .1), transparent 70%),
radial-gradient(460px 420px at 10% 60%, rgba(90, 190, 130, .07), transparent 70%),
radial-gradient(460px 420px at 90% 60%, rgba(var(--luz-funda), .09), transparent 70%);
}
/* the closed book: the sun rising on the first page */
.livro-fechado[data-folha="noria"] .miolo-pagina { background: url('../../comum/img/irmas-sol.webp') center 5% / 24% no-repeat, radial-gradient(circle at 50% 30%, rgba(255, 226, 140, .7), transparent 62%), var(--g-papiro), var(--miolo-fundo); }
.livro-fechado[data-folha="laza"] .miolo-pagina { background: url('../../comum/img/irmas-lua.webp') right 4% top 3% / 34% no-repeat, radial-gradient(circle at 50% 45%, rgba(var(--luz-clara), .3), transparent 70%), linear-gradient(90deg, rgba(0, 0, 0, .45), transparent 18%), var(--miolo-fundo); }
.livro-fechado[data-folha="noria"] .corte { --folha-a: #fff0b8; --folha-b: #c0861c; }
.livro-fechado[data-folha="keda"] .miolo-pagina { background: url('../../comum/img/irmas-limoeiro.webp') right 0 top 3% / 46% no-repeat, url('../../comum/img/irmas-rosa.webp') left 0 bottom 0 / 36% no-repeat, radial-gradient(circle at 62% 26%, rgba(var(--luz-clara), .2), transparent 62%), linear-gradient(90deg, rgba(0, 0, 0, .45), transparent 18%), var(--miolo-fundo); }
.livro-fechado[data-folha="tres"] .miolo-pagina { background: url('../../comum/img/irmas-tres.webp') center 4% / 40% no-repeat, url('../../comum/img/irmas-vitral-keda-v.webp') left 0 top 0 / 9% auto repeat-y, url('../../comum/img/irmas-vitral-laza-v.webp') right 0 top 0 / 9% auto repeat-y, radial-gradient(circle at 50% 12%, rgba(255, 206, 120, .32), transparent 58%), radial-gradient(circle at 0 70%, rgba(60, 150, 96, .2), transparent 50%), radial-gradient(circle at 100% 70%, rgba(96, 92, 230, .24), transparent 50%), linear-gradient(90deg, rgba(0, 0, 0, .45), transparent 18%), var(--miolo-fundo); }
.livro-fechado[data-folha="tres"] .miolo-pagina::before { inset: 26% 16% 20%; }
/* motto of the sheet on the first page (FOLHAS, 6th field) */
.miolo-pagina .lema { position: absolute; left: 12%; right: 12%; bottom: 7%; font: italic 500 .58em/1.25 var(--serif); letter-spacing: .02em; color: rgba(var(--luz-clara, 255, 240, 208), .82); text-shadow: 0 0 .5em rgba(var(--luz, 255, 212, 136), .45); }
.grupo-irmas > .dica { color: var(--ouro); }
/* mana drifting inside the sheet */
.folha.pagina::before {
content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5; border-radius: inherit;
background:
radial-gradient(520px 260px at 18% 22%, rgba(var(--luz, 155, 107, 255), .1), transparent 70%),
radial-gradient(460px 340px at 82% 68%, rgba(var(--luz-funda, 120, 80, 230), .08), transparent 70%);
animation: aurora 16s ease-in-out infinite alternate;
}
[data-tom="escuro"] .folha.pagina::before {
opacity: 1;
background:
radial-gradient(620px 300px at 18% 22%, rgba(var(--luz, 178, 132, 255), .22), transparent 70%),
radial-gradient(520px 380px at 82% 68%, rgba(var(--luz-funda, 120, 80, 255), .2), transparent 70%),
radial-gradient(380px 220px at 60% 10%, rgba(var(--luz-clara, 220, 190, 255), .12), transparent 70%);
}
/* the bathed sheets glow softer inside: their element lives at the edges (and in atmosfera.js) */
[data-folha="fogo"] .folha.pagina::before {
background:
radial-gradient(620px 300px at 18% 22%, rgba(255, 120, 30, .07), transparent 70%),
radial-gradient(520px 380px at 82% 68%, rgba(230, 60, 10, .08), transparent 70%);
}
@keyframes aurora {
0% { transform: translate(0, 0) scale(1); opacity: .55; }
50% { opacity: 1; }
100% { transform: translate(2%, 3%) scale(1.05); opacity: .7; }
}
/* a dog-eared lower corner */
.folha.pagina::after {
content: ''; position: absolute; right: 0; bottom: 0; width: 34px; height: 34px; pointer-events: none;
background:
linear-gradient(315deg, color-mix(in srgb, var(--couro) 60%, #000) 0 47%, transparent 47.5%),
linear-gradient(315deg, transparent 47%, rgba(0, 0, 0, .25) 47.5%, var(--aresta-clara, #f1e4c0) 52%, var(--aresta-escura, #cbb688) 100%);
filter: drop-shadow(-2px -2px 2px rgba(0, 0, 0, .18));
}
.livro > .folha > *, .grimorio-raiz > * { position: relative; }
/* WebGL atmosphere of the bathed sheets (atmosfera.js): a box over the whole sheet, under all of its content
* (z -1 inside the sheet's stacking context), holding a window-sized canvas that sticks to the view while scrolling;
* overflow: clip (not hidden) keeps sticky working and the canvas inside the sheet */
.livro > .folha > .atmosfera { position: absolute; inset: 0; z-index: -1; overflow: clip; pointer-events: none; border-radius: inherit; }
.atmosfera-tela { position: sticky; top: 0; display: block; }
[data-animacao="leve"] .atmosfera, [data-animacao="desligado"] .atmosfera { display: none; }
/* ---------- page turn: the old sheet curls off its hinge, strip by strip ---------- */
/* clipped only on the hinge side: past the spine the sheet lies on a page we do not see */
.virada { position: fixed; z-index: 880; pointer-events: none; perspective: 2600px; clip-path: inset(-25% -25% -25% 0); }
.virada.voltar { clip-path: inset(-25% 0 -25% -25%); }
/* frozen copies: a running animation would repaint every strip each frame */
.virada * { animation: none !important; transition: none !important; }
.virada-chao { position: absolute; inset: 0; overflow: hidden; }
.virada-sombra { position: absolute; top: 0; bottom: 0; left: 0; opacity: 0; transform-origin: left center; will-change: transform, opacity; background: linear-gradient(90deg, rgba(40, 20, 0, .5), rgba(40, 20, 0, .2) 30%, transparent); }
.virada.voltar .virada-sombra { left: auto; right: 0; transform-origin: right center; background: linear-gradient(270deg, rgba(40, 20, 0, .5), rgba(40, 20, 0, .2) 30%, transparent); }
[data-tom="escuro"] .virada-sombra { background: linear-gradient(90deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .25) 30%, transparent); }
[data-tom="escuro"] .virada.voltar .virada-sombra { background: linear-gradient(270deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .25) 30%, transparent); }
.virada-lombada { position: absolute; top: 0; bottom: 0; left: 0; width: 16%; opacity: 0; will-change: opacity; background: linear-gradient(90deg, rgba(40, 20, 0, .4), rgba(40, 20, 0, .1) 45%, transparent); }
.virada.voltar .virada-lombada { left: auto; right: 0; background: linear-gradient(270deg, rgba(40, 20, 0, .4), rgba(40, 20, 0, .1) 45%, transparent); }
[data-tom="escuro"] .virada-lombada { background: linear-gradient(90deg, rgba(0, 0, 0, .65), rgba(0, 0, 0, .18) 45%, transparent); }
[data-tom="escuro"] .virada.voltar .virada-lombada { background: linear-gradient(270deg, rgba(0, 0, 0, .65), rgba(0, 0, 0, .18) 45%, transparent); }
.virada-faixa { position: absolute; top: 0; transform-style: preserve-3d; transform-origin: left center; will-change: transform; }
.virada.voltar .virada-faixa { transform-origin: right center; }
.virada-frente, .virada-verso, .virada-tom { position: absolute; inset: 0; backface-visibility: hidden; pointer-events: none; }
.virada-frente { overflow: hidden; }
/* overflow: a tall unclipped copy loses whole tiles inside the 3D strips */
.virada-frente > .folha { position: absolute; margin: 0; padding: 42px 56px 60px 70px; border-radius: 2px 5px 5px 2px; overflow: hidden; }
/* back of the sheet: the same paper, a shade darker, no ink */
.virada-verso { transform: rotateY(180deg); background: linear-gradient(rgba(70, 40, 10, .12), rgba(70, 40, 10, .12)), var(--g-papiro), var(--papel); }
/* bathed sheets: the back keeps a little of the glow the front has, so it does not read as a black slab */
[data-tom="escuro"] .virada-verso { background: linear-gradient(rgba(var(--luz, 155, 107, 255), .08), rgba(var(--breu, 8, 0, 22), .14)), var(--g-papiro), var(--papel); }
.virada-tom { transform: translateZ(.5px); }
.virada-tom.verso { transform: rotateY(180deg) translateZ(.5px); }
.virada .folha {
background:
linear-gradient(90deg, rgba(var(--dobra, 70, 40, 10), .4), rgba(var(--dobra, 70, 40, 10), .09) 5%, transparent 9%),
radial-gradient(ellipse at center, transparent 58%, rgba(var(--vinheta, 120, 75, 20), .3) 100%),
radial-gradient(900px 500px at 70% -10%, rgba(255, 236, 190, .18), transparent 70%),
var(--g-papiro),
var(--papel);
}
.virada .folha > *, .virada .grimorio-raiz > * { position: relative; }
/* ---------- header ---------- */
.topo { display: flex; align-items: center; gap: 32px; padding-right: 440px; min-height: 126px; }
/* the book alone hangs seven ribbons across the top: the header starts under their tails, never behind them */
body.grimorio-sozinho .topo { padding-right: 0; padding-top: 76px; }
.medalhao { position: relative; flex: none; width: 114px; height: 114px; display: grid; place-items: center; }
.medalhao-circulo { position: absolute; inset: -28px; background: url('../img/circulo-tinta.webp') center/contain no-repeat; opacity: .5; animation: girar 120s linear infinite; filter: hue-rotate(var(--matiz, 0deg)); }
[data-tom="escuro"] .medalhao-circulo { background-image: url('../img/circulo-mana.webp'); opacity: .78; filter: hue-rotate(var(--matiz, 0deg)) drop-shadow(0 0 4px rgba(var(--luz, 170, 120, 255), .8)); }
.medalhao-aro { position: absolute; inset: 6px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ouro) 65%, transparent); box-shadow: 0 0 0 5px transparent, 0 0 0 6px color-mix(in srgb, var(--ouro) 28%, transparent); pointer-events: none; }
.livro.aceso .medalhao-circulo { opacity: .95; }
.topo-nome { flex: 1; min-width: 0; }
.topo-marca { font: italic 500 1.05em var(--serif); color: var(--texto-3); }
/* the name in the book face of the site, never blackletter: a proper name in it reads "Jlo" for "Ilo" (27/10) */
.topo-nome h1 { font: 400 2.6em/1.1 var(--e-fonte-texto); letter-spacing: .01em; color: var(--texto); margin: 2px 0 0; }
.topo-nome h1::first-letter { color: var(--ouro); font-size: 1.25em; text-shadow: 0 0 1px rgba(0, 0, 0, .25); }
[data-tom="escuro"] .topo-nome h1 { text-shadow: 0 0 18px rgba(var(--luz-clara, 190, 150, 255), .45); }
.topo-floreio { width: 290px; margin: 0 0 4px -54px; color: var(--ouro); opacity: .85; }
.topo-acoes { display: flex; gap: 4px; margin-left: -.7em; flex-wrap: wrap; }
/* the book alone: Fechar and Livro sit at the right end of the name line, the header is as tall as the medallion (27/10) */
body.grimorio-sozinho .topo { position: relative; }
body.grimorio-sozinho .topo-acoes { position: absolute; right: 0; bottom: 4px; margin-left: 0; }
/* the Livro menu of the book alone, a slip of paper under its button like the sheet's (ficha.css .menu-livro; app.js ligarMenuLivro).
Scoped to the book alone: inside the sheet the menu is the sheet's own */
body.grimorio-sozinho .livro-menu { position: relative; }
body.grimorio-sozinho #btnLivroMenu[aria-expanded="true"] { background: var(--painel-2); border-color: var(--borda-forte); }
body.grimorio-sozinho .menu-livro {
position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 230px; padding: 6px;
display: flex; flex-direction: column; color: var(--texto);
border: 1px solid var(--papel-borda); border-radius: 6px; box-shadow: 0 10px 24px rgba(30, 16, 4, .4), inset 0 0 22px rgba(90, 55, 15, .14);
background: var(--g-papiro, none), var(--papel, #e9dab3);
}
body.grimorio-sozinho .menu-livro[hidden] { display: none; }
body.grimorio-sozinho .menu-livro .menu-item {
display: flex; align-items: center; gap: .6em; width: 100%; min-height: 36px; padding: .35em .75em; text-align: left;
border: 0; border-radius: 4px; background: none; color: inherit; font: 1.02em/1.2 var(--serif); cursor: pointer;
}
body.grimorio-sozinho .menu-livro .menu-item .ic { flex: none; width: 1.15em; height: 1.15em; }
body.grimorio-sozinho .menu-livro .menu-item:hover { background: var(--painel-2); }
body.grimorio-sozinho .menu-livro .menu-item:focus-visible { outline: none; background: var(--painel-2); box-shadow: inset 0 0 0 2px var(--ouro-escuro); }
body.grimorio-sozinho .menu-livro .menu-perigo { color: var(--perigo); }
body.grimorio-sozinho .menu-livro .menu-perigo:hover, body.grimorio-sozinho .menu-livro .menu-perigo:focus-visible { background: color-mix(in srgb, var(--perigo) 12%, transparent); }
body.grimorio-sozinho .menu-livro .menu-sep { height: 0; margin: 5px 8px; border-top: 1px solid var(--borda); }
.livro > .folha > .faixa-pasta { margin: 14px 0 6px; font-size: .9em; padding: .35em .9em; }
/* saved in the cloud: a small mark in the top right of the page, like the sheet's (a wide banner only when it needs the player) */
body.grimorio-sozinho .livro > .folha > .faixa-pasta.conectada {
position: absolute; top: 122px; right: 56px; z-index: 2; margin: 0; padding: 0; gap: .45em; flex-wrap: nowrap;
border: 0; background: none; font: italic .82em var(--serif); color: var(--texto-3);
}
body.grimorio-sozinho .livro > .folha > .faixa-pasta.conectada .ponto { width: .5em; height: .5em; box-shadow: none; }
body.grimorio-sozinho .livro > .folha > .faixa-pasta.conectada .texto { flex: none; min-width: 0; font-size: 0; color: inherit; }
body.grimorio-sozinho .livro > .folha > .faixa-pasta.conectada .texto strong:first-of-type { font: italic 1rem var(--serif); font-size: .82rem; color: var(--texto-2); }
body.grimorio-sozinho .livro > .folha > .faixa-pasta.conectada .texto strong:first-of-type::before { content: 'salvando em '; color: var(--texto-3); }
body.grimorio-sozinho .livro > .folha > .faixa-pasta.conectada .texto strong ~ strong { display: none; }
body.grimorio-sozinho .livro > .folha > .faixa-pasta.conectada .btn { min-height: 24px; padding: 0 .4em; border: 0; background: none; box-shadow: none; font: inherit; color: var(--texto-3); text-decoration: underline dotted; text-underline-offset: .2em; }
/* ---------- mana: a glass tube of living mana ---------- */
/* one line: the count, the tube and its actions; a second line: the target of the attacks, the last spend, the confirmation */
.painel-mana { display: grid; gap: 8px; padding: 8px 0 2px; margin-top: 4px; }
.mana-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.mana-numeros { flex: none; display: flex; align-items: baseline; gap: .3em; }
.mana-rotulo { display: inline-flex; align-items: center; gap: .35em; font: .85em var(--titulo); letter-spacing: .22em; color: var(--mana-2); margin-right: .45em; text-transform: uppercase; }
.mana-atual { display: inline-block; font: 600 2.3em/1 var(--e-fonte-num); color: var(--mana); text-shadow: 0 0 20px color-mix(in srgb, var(--mana) 45%, transparent); font-variant-numeric: tabular-nums lining-nums; }
.mana-sep, .mana-total { font: 600 1.3em var(--e-fonte-num); color: var(--texto-2); font-variant-numeric: lining-nums; }
.mana-bonus { color: var(--texto-3); font-style: italic; font-size: .92em; }
.mana-linha > .mana-tubo { flex: 1 1 220px; min-width: 180px; }
.mana-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding-top: 6px; border-top: 1px dashed var(--borda); }
.mana-tubo {
position: relative; padding: 6px 26px; border-radius: 99px;
background: linear-gradient(180deg, rgba(40, 22, 8, .62), rgba(40, 22, 8, .26));
box-shadow: inset 0 2px 6px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 250, 230, .35);
}
/* brass end caps */
.mana-tubo::before, .mana-tubo::after {
content: ''; position: absolute; top: 50%; z-index: 2; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%;
background: radial-gradient(circle at 50% 50%, transparent 38%, rgba(60, 35, 5, .55) 40%, transparent 46%), radial-gradient(circle at 35% 30%, #fff4c8, #d6aa48 40%, #8a5f1c 75%, #4d330b);
box-shadow: 0 0 0 2px rgba(40, 22, 5, .6), 0 3px 5px rgba(0, 0, 0, .5), inset 0 -2px 3px rgba(0, 0, 0, .35);
}
.mana-tubo::before { left: -8px; }
.mana-tubo::after { right: -8px; }
.mana-barra {
position: relative; height: 22px; border-radius: 99px; overflow: hidden; isolation: isolate;
background: radial-gradient(120% 200% at 50% 120%, rgba(90, 50, 170, .35), transparent 60%), linear-gradient(180deg, rgba(10, 2, 26, .9), rgba(36, 16, 74, .78));
box-shadow: inset 0 2px 4px rgba(0, 0, 0, .85), inset 0 -1px 0 rgba(255, 255, 255, .07);
}
.mana-barra-cheia {
position: relative; height: 100%; width: 0; border-radius: 99px 8px 8px 99px; overflow: hidden;
background: linear-gradient(180deg, #c9a8ff 0%, #8a5cf6 26%, #5b2bd0 62%, #2f107e 100%);
box-shadow: 0 0 18px rgba(155, 107, 255, .8), inset 0 -3px 6px rgba(20, 0, 60, .55);
}
/* mana swirling inside: layers flowing at different speeds */
.mana-correnteza {
position: absolute; top: 0; bottom: 0; left: -240px; right: -240px; will-change: transform;
background:
radial-gradient(ellipse 42px 5px at 30% 38%, rgba(255, 255, 255, .55), transparent 70%) 0 0 / 120px 100%,
radial-gradient(ellipse 30px 4px at 70% 70%, rgba(236, 220, 255, .45), transparent 70%) 0 0 / 80px 100%,
repeating-linear-gradient(105deg, rgba(255, 255, 255, 0) 0 16px, rgba(255, 255, 255, .1) 16px 26px, rgba(255, 255, 255, 0) 26px 48px) 0 0 / 240px 100%;
animation: correnteza 3.6s linear infinite;
}
@keyframes correnteza { to { transform: translateX(240px); } }
.mana-bolhas { position: absolute; inset: 0; }
.mana-bolhas i { position: absolute; bottom: -4px; width: 3px; height: 3px; border-radius: 50%; background: rgba(245, 236, 255, .85); box-shadow: 0 0 4px rgba(220, 200, 255, .9); animation: bolha 3.2s linear infinite; opacity: 0; }
.mana-bolhas i:nth-child(1) { left: 8%; animation-delay: -.4s; }
.mana-bolhas i:nth-child(2) { left: 22%; animation-delay: -1.9s; width: 2px; height: 2px; }
.mana-bolhas i:nth-child(3) { left: 37%; animation-delay: -1.1s; }
.mana-bolhas i:nth-child(4) { left: 51%; animation-delay: -2.6s; width: 4px; height: 4px; }
.mana-bolhas i:nth-child(5) { left: 66%; animation-delay: -.8s; width: 2px; height: 2px; }
.mana-bolhas i:nth-child(6) { left: 79%; animation-delay: -2.2s; }
.mana-bolhas i:nth-child(7) { left: 91%; animation-delay: -1.5s; width: 2px; height: 2px; }
@keyframes bolha { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translate(26px, -26px); opacity: 0; } }
/* meniscus: the bright curved surface at the end of the liquid */
.mana-brilho {
position: absolute; right: -2px; top: -1px; bottom: -1px; width: 12px; border-radius: 50%; transform-origin: 100% 50%;
background: radial-gradient(ellipse at 45% 50%, rgba(255, 255, 255, .98), rgba(220, 198, 255, .7) 38%, transparent 72%);
animation: menisco 1.8s ease-in-out infinite;
}
@keyframes menisco { 0%, 100% { opacity: .7; transform: scaleY(.88); } 50% { opacity: 1; transform: scaleY(1.08); } }
.mana-marcas { position: absolute; left: 0; right: 0; top: 0; height: 6px; z-index: 1; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(255, 255, 255, .22) calc(10% - 1px) 10%); }
.mana-vidro {
position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
background: linear-gradient(180deg, rgba(255, 255, 255, .5) 0, rgba(255, 255, 255, .2) 16%, transparent 38%, transparent 76%, rgba(255, 255, 255, .1) 90%, transparent);
}
.mana-barra.baixa .mana-barra-cheia { filter: saturate(.75) brightness(.85); animation: mana-baixa 2.4s ease-in-out infinite; }
@keyframes mana-baixa { 50% { box-shadow: 0 0 6px rgba(155, 107, 255, .4), inset 0 -3px 6px rgba(20, 0, 60, .55); } }
/* mana color picked in Configurações: the liquid and its glass are rebuilt from one color (--cor-barra on body) */
body[data-mana-cor] .mana-barra {
background: radial-gradient(120% 200% at 50% 120%, color-mix(in srgb, var(--cor-barra) 35%, transparent), transparent 60%), linear-gradient(180deg, rgba(10, 2, 26, .9), color-mix(in srgb, var(--cor-barra) 28%, rgba(8, 4, 18, .85)));
}
body[data-mana-cor] .mana-barra-cheia {
background: linear-gradient(180deg, color-mix(in srgb, var(--cor-barra) 45%, #fff) 0%, var(--cor-barra) 26%, color-mix(in srgb, var(--cor-barra) 68%, #000) 62%, color-mix(in srgb, var(--cor-barra) 36%, #000) 100%);
box-shadow: 0 0 18px color-mix(in srgb, var(--cor-barra) 80%, transparent), inset 0 -3px 6px color-mix(in srgb, var(--cor-barra) 22%, #000);
}
body[data-mana-cor] .mana-barra.baixa .mana-barra-cheia { animation-name: mana-baixa-cor; }
@keyframes mana-baixa-cor { 50% { box-shadow: 0 0 6px color-mix(in srgb, var(--cor-barra) 40%, transparent), inset 0 -3px 6px color-mix(in srgb, var(--cor-barra) 22%, #000); } }
/* the mana count follows the picked color (darker on light paper, so it stays readable) */
body[data-mana-cor] { --mana-texto: var(--cor-barra); --mana-texto-2: color-mix(in srgb, var(--cor-barra) 65%, #fff); }
body[data-mana-cor][data-tom="claro"] { --mana-texto: color-mix(in srgb, var(--cor-barra) 70%, #000); --mana-texto-2: color-mix(in srgb, var(--cor-barra) 55%, #000); }
body[data-mana-cor] .mana-atual { color: var(--mana-texto); text-shadow: 0 0 20px color-mix(in srgb, var(--cor-barra) 45%, transparent); }
body[data-mana-cor] .mana-rotulo { color: var(--mana-texto-2); }
body[data-mana-cor] .mf-valor { color: var(--mana-texto-2); text-shadow: 0 0 12px var(--cor-barra); }
body[data-mana-cor] .mf-gota { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--cor-barra) 60%, #fff), color-mix(in srgb, var(--cor-barra) 70%, #000) 60%, color-mix(in srgb, var(--cor-barra) 35%, #000)); box-shadow: 0 0 12px color-mix(in srgb, var(--cor-barra) 70%, transparent), inset 0 -2px 3px rgba(0, 0, 0, .35); }
.mana-acoes { flex: none; display: flex; gap: .4em; flex-wrap: wrap; align-items: center; }
.interruptor { flex: none; display: inline-flex; align-items: center; gap: .4em; cursor: pointer; margin-left: auto; color: var(--texto-2); font: italic 500 .95em var(--serif); letter-spacing: 0; text-transform: none; }
.interruptor input { accent-color: var(--mana); width: 1.05em; height: 1.05em; }
.ultimo-gasto { flex: 1 1 160px; min-width: 0; color: var(--texto-3); font-style: italic; font-size: .92em; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ---------- spells in effect: turn tracker under the mana bar ---------- */
.efeitos-ativos {
margin-top: 6px; padding: 10px 14px 12px; border: 1px solid var(--borda); border-radius: 4px;
background: linear-gradient(180deg, color-mix(in srgb, var(--mana) 9%, transparent), transparent), var(--painel);
box-shadow: inset 0 0 0 3px transparent, inset 0 0 0 4px color-mix(in srgb, var(--mana) 10%, transparent);
}
.efeitos-cabeca { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.efeitos-cabeca .btn { margin-left: auto; }
.efeitos-rotulo { display: inline-flex; align-items: center; gap: .35em; font: 600 .8em var(--titulo); letter-spacing: .14em; text-transform: uppercase; color: var(--ouro-2); }
.efeitos-rotulo .ic { width: 1.25em; height: 1.25em; }
.efeitos-ativos.virou .efeitos-rotulo .ic { animation: ampulheta-vira .7s cubic-bezier(.2, .8, .2, 1); }
@keyframes ampulheta-vira { from { transform: rotate(0); } to { transform: rotate(180deg); } }
.efeitos-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.efeitos-lista .efeito {
--cor: #d4af37;
display: inline-flex; align-items: center; gap: .5em; padding: .3em .3em .3em .4em; border-radius: 99px 4px 4px 99px;
border: 1px solid color-mix(in srgb, var(--cor) 50%, var(--borda)); background: linear-gradient(90deg, color-mix(in srgb, var(--cor) 16%, transparent), color-mix(in srgb, var(--cor) 6%, var(--painel)));
color: var(--texto); font-size: .95em; transition: opacity .7s, transform .7s, filter .7s;
}
.efeito-selo {
flex: none; width: 18px; height: 18px; border-radius: 50% 46% 52% 48% / 48% 52% 47% 53%;
background: radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--cor) 55%, #fff), var(--cor) 50%, color-mix(in srgb, var(--cor) 55%, #000));
box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .35);
}
.efeito-nome { font-weight: 600; }
.efeito-pips { display: inline-flex; gap: 3px; }
.efeito-pips i { width: 8px; height: 8px; transform: rotate(45deg); border: 1px solid color-mix(in srgb, var(--cor) 70%, var(--texto-3)); transition: background .4s, box-shadow .4s, transform .4s; }
.efeito-pips i.cheio { background: var(--cor); box-shadow: 0 0 5px color-mix(in srgb, var(--cor) 70%, transparent); }
.efeito-infinito { color: color-mix(in srgb, var(--cor) 70%, var(--texto)); font-weight: 700; font-size: 1.15em; line-height: 1; }
.efeito-resta { color: var(--texto-3); font-size: .92em; font-style: italic; white-space: nowrap; }
.efeito-fim { padding: 0 .3em; border: 0; background: none; color: var(--texto-3); font-size: 1.2em; line-height: 1; cursor: pointer; }
.efeito-fim:hover { color: var(--perigo); }
.efeitos-lista .efeito.ultimo { animation: efeito-ultimo 1.6s ease-in-out infinite; }
@keyframes efeito-ultimo { 50% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--cor) 55%, transparent), 0 0 16px color-mix(in srgb, var(--cor) 45%, transparent); } }
.efeitos-lista .efeito.surgindo { animation: efeito-surge .9s cubic-bezier(.2, .8, .2, 1); }
@keyframes efeito-surge { from { opacity: 0; transform: translateY(-8px) scale(.85); filter: brightness(1.9); } to { opacity: 1; transform: none; filter: none; } }
.efeitos-lista .efeito.acabando { opacity: 0; transform: translateY(6px) scale(.9); filter: blur(2px) grayscale(1); animation: none; }
[data-animacao="leve"] .efeitos-lista .efeito.ultimo { animation: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--cor) 55%, transparent); }
/* ---------- summary chips ---------- */
/* a quiet line of links to Essências: words, the factors only in the tooltip (27/10) */
.resumo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 0; margin: 2px 0 10px; }
.resumo::before, .resumo::after { content: ''; flex: 1 1 40px; height: 1px; margin: 0 14px; background: linear-gradient(90deg, transparent, var(--borda-forte) 70%); }
.resumo::after { background: linear-gradient(270deg, transparent, var(--borda-forte) 70%); }
.chip-resumo {
display: inline-flex; align-items: baseline; gap: .35em; min-height: 26px; padding: .1em .6em; border-radius: 3px;
border: 1px solid transparent; background: none; color: var(--texto-2); font: italic .95em var(--serif); cursor: pointer;
transition: border-color .2s, color .2s, background-color .2s;
}
.chip-resumo:not(.oculto) ~ .chip-resumo:not(.oculto)::before { content: '·'; margin: 0 .35em 0 -.6em; color: var(--texto-3); font-style: normal; }
.chip-resumo strong { color: var(--ouro-2); font: 1em var(--titulo); font-style: normal; letter-spacing: .02em; }
.chip-resumo span:empty { display: none; }
.chip-resumo:hover { border-color: var(--borda); background: var(--painel); color: var(--texto); }
.chip-resumo:focus-visible { outline: none; border-color: var(--mana); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mana) 30%, transparent); }
/* ornamental divider */
.vinheta { display: grid; place-items: center; height: 30px; margin: 6px 0 8px; background: linear-gradient(90deg, transparent, var(--borda-forte) 15%, var(--borda-forte) 38%, transparent 44%, transparent 56%, var(--borda-forte) 62%, var(--borda-forte) 85%, transparent) center / 100% 1px no-repeat; }
.vinheta .floreio { width: 260px; color: var(--ouro); }
/* ---------- search fields ---------- */
.busca { position: relative; display: block; font: inherit; letter-spacing: 0; text-transform: none; color: var(--texto-3); }
.busca .ic { position: absolute; left: .75em; top: 50%; margin-top: -.55em; width: 1.1em; height: 1.1em; pointer-events: none; transition: color .2s, transform .3s; }
.busca input { padding-left: 2.35em; }
.busca:focus-within .ic { color: var(--mana); transform: scale(1.12); }
/* ---------- spell list ---------- */
.filtros { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin-bottom: 12px; }
.lista-magias { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 22px; }
.vazio { grid-column: 1 / -1; text-align: center; padding: 3em 1em; color: var(--texto-3); border: 1px dashed var(--borda-forte); border-radius: var(--raio); font-style: italic; }
.vazio .grande .ic { width: 3em; height: 3em; color: var(--ouro); stroke-width: 1.1; }
.magia {
--cor: #d4af37;
--canto: color-mix(in srgb, var(--ouro) 80%, transparent);
position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0;
padding: 22px 22px 12px; border-radius: 4px; border: 1px solid var(--borda);
background:
linear-gradient(var(--canto), var(--canto)) left 6px top 6px / 20px 1.5px no-repeat,
linear-gradient(var(--canto), var(--canto)) left 6px top 6px / 1.5px 20px no-repeat,
linear-gradient(var(--canto), var(--canto)) right 6px top 6px / 20px 1.5px no-repeat,
linear-gradient(var(--canto), var(--canto)) right 6px top 6px / 1.5px 20px no-repeat,
linear-gradient(var(--canto), var(--canto)) left 6px bottom 6px / 20px 1.5px no-repeat,
linear-gradient(var(--canto), var(--canto)) left 6px bottom 6px / 1.5px 20px no-repeat,
linear-gradient(var(--canto), var(--canto)) right 6px bottom 6px / 20px 1.5px no-repeat,
linear-gradient(var(--canto), var(--canto)) right 6px bottom 6px / 1.5px 20px no-repeat,
radial-gradient(circle, var(--canto) 0 1.8px, transparent 2.4px) left 10px top 10px / 6px 6px no-repeat,
radial-gradient(circle, var(--canto) 0 1.8px, transparent 2.4px) right 10px top 10px / 6px 6px no-repeat,
radial-gradient(circle, var(--canto) 0 1.8px, transparent 2.4px) left 10px bottom 10px / 6px 6px no-repeat,
radial-gradient(circle, var(--canto) 0 1.8px, transparent 2.4px) right 10px bottom 10px / 6px 6px no-repeat,
linear-gradient(180deg, color-mix(in srgb, var(--cor) 14%, transparent), transparent 120px),
var(--painel);
box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 2px 8px rgba(60, 35, 10, .08);
transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, border-color .35s;
}
/* light of the hand: follows the cursor over the card */
.magia::after {
content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; border-radius: inherit;
background: radial-gradient(280px 220px at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--cor) 22%, transparent), transparent 70%);
transition: opacity .35s;
}
.magia:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--cor) 55%, var(--borda)); box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 16px 30px rgba(60, 35, 10, .22), 0 0 0 1px color-mix(in srgb, var(--cor) 25%, transparent); }
.magia:hover::after { opacity: 1; }
[data-tom="escuro"] .magia { box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
[data-tom="escuro"] .magia:hover { box-shadow: 0 16px 34px rgba(0, 0, 0, .42), 0 0 28px color-mix(in srgb, var(--cor) 35%, transparent); }
[data-tom="escuro"] .magia::after { background: radial-gradient(280px 220px at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--cor) 30%, transparent), transparent 70%); }
.lista-magias .magia.conjurando { animation: magia-acende 1.6s ease-out; }
@keyframes magia-acende {
0% { box-shadow: 0 0 0 0 transparent; }
18% { box-shadow: 0 0 0 2px var(--cor), 0 0 54px 8px color-mix(in srgb, var(--cor) 60%, #9b6bff); }
100% { box-shadow: 0 0 0 0 transparent; }
}
.magia.conjurando .magia-custo { animation: selo-pulso 1.1s cubic-bezier(.2, .8, .2, 1); }
@keyframes selo-pulso { 0% { transform: rotate(-8deg) scale(1); } 25% { transform: rotate(4deg) scale(1.3); filter: brightness(1.5) drop-shadow(0 0 12px var(--cor)); } 100% { transform: rotate(-8deg) scale(1); } }
.magia-cabeca { display: flex; align-items: flex-start; gap: 14px; }
.magia-nome { flex: 1; font: 600 1.2em/1.25 var(--titulo); color: var(--texto); padding-top: 6px; }
.magia-nome::first-letter { font-size: 1.6em; color: color-mix(in srgb, var(--cor) 78%, var(--texto)); text-shadow: 0 0 1px rgba(0, 0, 0, .2); }
[data-tom="escuro"] .magia-nome::first-letter { color: color-mix(in srgb, var(--cor) 70%, #fff); text-shadow: 0 0 10px var(--cor); }
/* wax seal with the mana cost */
.magia-custo {
position: relative; flex: none; width: 66px; height: 66px; margin: -6px -4px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
border-radius: 50% 46% 52% 48% / 48% 52% 47% 53%; transform: rotate(-8deg);
background:
radial-gradient(circle at var(--sx, 34%) var(--sy, 26%), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 24%),
radial-gradient(circle, transparent 54%, rgba(0, 0, 0, .2) 57%, rgba(255, 255, 255, .16) 61%, transparent 65%),
radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--cor) 55%, #fff), var(--cor) 46%, color-mix(in srgb, var(--cor) 52%, #000) 100%);
box-shadow: inset 0 -4px 7px rgba(0, 0, 0, .32), inset 0 2px 3px rgba(255, 255, 255, .22), 0 4px 8px rgba(40, 20, 5, .38), 0 1px 1px rgba(0, 0, 0, .3);
color: #fffaf0; text-shadow: 0 1px 1px rgba(0, 0, 0, .55), 0 -1px 0 rgba(255, 255, 255, .15);
transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}
.magia:hover .magia-custo { transform: rotate(-3deg) scale(1.06); }
/* drips of wax around the seal */
.magia-custo::before {
content: ''; position: absolute; inset: -5px; z-index: -1; border-radius: inherit;
background:
radial-gradient(circle at 12% 70%, var(--cor) 0 5px, transparent 5.5px),
radial-gradient(circle at 88% 22%, var(--cor) 0 4px, transparent 4.5px),
radial-gradient(circle at 70% 92%, var(--cor) 0 3.5px, transparent 4px),
radial-gradient(circle at 30% 6%, var(--cor) 0 2.5px, transparent 3px);
filter: brightness(.8);
}
.magia-custo strong { display: block; font: 700 1.38em/1 var(--titulo); }
/* the "MP" under the cost: never under 11px (it was 9.3px), the seal still holds it */
.magia-custo span { font: 600 max(11px, .65em)/1.1 var(--titulo); letter-spacing: .12em; }
.lacre-claro .magia-custo { color: #2b1a08; text-shadow: 0 1px 0 rgba(255, 255, 255, .45); }
.magia-desc { color: var(--texto); white-space: pre-line; font-size: 1.02em; }
.magia-desc .bloco-nome { color: var(--ouro-2); font-weight: 600; }
.magia-desc details { margin-top: .3em; }
.magia-desc summary { cursor: pointer; color: var(--ouro-2); font-weight: 600; }
.magia-desc details p { margin: .3em 0 0; color: var(--texto-2); white-space: pre-line; }
.magia-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tag { font-size: .86em; padding: .08em .6em; border-radius: 3px; background: var(--painel-2); border: 1px solid var(--borda); color: var(--texto-2); white-space: normal; }
.tag b { color: var(--texto); font-weight: 700; }
.tag.dano { border-color: color-mix(in srgb, var(--perigo) 40%, transparent); color: var(--perigo); background: color-mix(in srgb, var(--perigo) 7%, transparent); }
.tag.dano b, .tag.cura b { color: inherit; }
.tag.cura { border-color: color-mix(in srgb, var(--ok) 40%, transparent); color: var(--ok); background: color-mix(in srgb, var(--ok) 8%, transparent); }
.magia-calculo { font-size: .92em; color: var(--texto-2); }
.magia-calculo summary { cursor: pointer; color: var(--texto-3); font-style: italic; }
.passos { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: .4em; font-variant-numeric: tabular-nums lining-nums; }
.passos span { white-space: nowrap; }
.passos span b { color: var(--texto); font-weight: 700; }
.aplicadas { margin-top: .35em; color: var(--ouro-2); }
.alerta-regra { font-size: .92em; color: var(--aviso); background: color-mix(in srgb, var(--aviso) 9%, transparent); border: 1px solid color-mix(in srgb, var(--aviso) 40%, transparent); border-radius: var(--raio-p); padding: .35em .6em; }
.magia-pe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--borda); }
.magia-pe .data { margin-left: auto; color: var(--texto-3); font-size: .85em; font-style: italic; }
/* last roll kept on the card */
.magia-resultado {
display: inline-flex; align-items: baseline; gap: .35em; padding: .2em .7em; border-radius: 99px; cursor: pointer;
border: 1px solid var(--borda-forte); background: linear-gradient(180deg, color-mix(in srgb, var(--cor) 10%, transparent), var(--painel-2)); color: var(--texto); font: 600 .92em var(--serif);
animation: tinta-surge .5s backwards;
}
.magia-resultado b { font: 700 1.1em var(--titulo); color: var(--cor-res, var(--ouro-2)); text-shadow: 0 0 1px rgba(0, 0, 0, .3); }
.magia-resultado:hover { border-color: var(--ouro); }
/* ---------- not enough mana: faded card, cracked dull seal ---------- */
.magia.sem-mana { border-style: dashed; }
.magia.sem-mana .magia-nome, .magia.sem-mana .magia-desc, .magia.sem-mana .magia-tags { opacity: .55; filter: saturate(.4); transition: opacity .4s, filter .4s; }
.magia.sem-mana:hover .magia-nome, .magia.sem-mana:hover .magia-desc, .magia.sem-mana:hover .magia-tags { opacity: .85; }
.magia.sem-mana .magia-custo { filter: saturate(.35) brightness(.8); }
.magia.sem-mana [data-acao="conjurar"] { filter: grayscale(.8); opacity: .8; }
.magia.negado { animation: negado .5s; }
@keyframes negado { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
/* ---------- pinned spells: a ribbon in the seal color ---------- */
.magia.fixada::before {
content: ''; position: absolute; top: -6px; left: 30px; z-index: 1; width: 14px; height: 26px; pointer-events: none;
background: linear-gradient(90deg, rgba(0, 0, 0, .28), rgba(255, 255, 255, .22) 40%, rgba(0, 0, 0, .22)), var(--cor);
clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%);
filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .3));
}
/* ---------- performance of the spell list (looks the same) ----------
* Cards away from the screen skip style, layout and paint: showing 90 cards at once cost ~0.5 s of layerization and layout.
* A skipped card keeps the size it had when last drawn (auto); 320px (a typical card) only until app.js medirCartas
* draws each one once in idle time (.medindo).
* Containment clips what a card draws outside itself: the pinned ribbon, the cast and the effect layers keep it off. */
.lista-magias > .magia { content-visibility: auto; contain-intrinsic-block-size: auto 320px; }
.lista-magias > .magia.medindo, .lista-magias > .magia.fixada, .lista-magias > .magia.conjurando, .lista-magias > .magia:has(> .fx-camada) { content-visibility: visible; }
/* the copies of the page inside a turn are bent in 3D: auto would recheck every card of every strip on every frame */
.virada .lista-magias > .magia { content-visibility: visible; }
/* the gem sheen of Conjurar (tema.css brilho-gema) rests on cards scrolled away (app.js vigiarGemas) */
.magia.gema-quieta .btn-mana::after { animation-play-state: paused; }
/* graphics level baixo: no moving sheen, a still veil with its mean light (a .45 band 40% wide crossing in 30% of 4.5 s = ~1.5% white) */
[data-qualidade="baixo"] .magia .btn-mana::after { animation: none; inset: 0; width: auto; transform: none; background: rgba(255, 255, 255, .015); }
.btn-fixar.ativo { color: var(--ouro-2); }
.btn-fixar.ativo .ic { fill: color-mix(in srgb, var(--ouro) 45%, transparent); }
/* ---------- spell groups ---------- */
.filtro-grupos { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; }
.grupos-sugeridos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.grupos-sugeridos:empty { display: none; }
.chip-grupo {
display: inline-flex; align-items: center; gap: .35em; padding: .22em .85em; border-radius: 99px;
border: 1px solid var(--borda); background: var(--painel); color: var(--texto-2); font: italic 500 .95em var(--serif); cursor: pointer;
transition: border-color .2s, color .2s, background .2s, transform .2s, box-shadow .2s;
}
.chip-grupo span { color: var(--texto-3); font: 600 .8em var(--titulo); }
.chip-grupo .ic { width: 1em; height: 1em; }
.chip-grupo:hover { border-color: var(--ouro); color: var(--texto); transform: translateY(-1px); }
.chip-grupo.ativo { border-color: #b0832a; background: linear-gradient(180deg, #f6e09a, #d6ac4a 50%, #b0832a); color: #2a1a06; font-style: normal; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 250, 220, .7), 0 3px 10px rgba(176, 131, 42, .35); }
.chip-grupo.ativo span { color: #4a3210; }
.tag.grupo { border-style: dashed; color: var(--ouro-2); font-style: italic; }
.tag.categoria { font-weight: 600; color: var(--texto); }
.tag.cat-combate { border-color: color-mix(in srgb, var(--perigo) 45%, transparent); }
.tag.cat-cura { border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.tag.cat-suporte { border-color: color-mix(in srgb, var(--ouro) 60%, transparent); }
.tag.cat-invocacao { border-color: color-mix(in srgb, #7a5a3a 60%, transparent); }
.tag.cat-utilidade { border-color: color-mix(in srgb, #3f6f8a 50%, transparent); }
.magia-categorias { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; min-height: 1.6em; }
/* ---------- editor ---------- */
.editor { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 30px; align-items: start; }
.editor-col { padding: 4px 0; }
.editor-titulo { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid var(--borda); }
.editor-titulo h2 { color: var(--ouro-2); font-size: 1.55em; }
.editor-titulo h2::before { content: '❧ '; color: var(--ouro); }
.linha-nome { display: grid; grid-template-columns: 1fr 104px; gap: 12px; }
.campo-cor input { height: 2.5em; padding: .2em; cursor: pointer; }
.campo-cor .lacre-auto { display: flex; align-items: center; gap: .3em; font: italic .95em var(--serif); letter-spacing: 0; text-transform: none; white-space: nowrap; color: var(--texto-2); cursor: pointer; }
.campo-cor .lacre-auto input { height: auto; width: auto; margin: 0; }
input[type=color] { width: 100%; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--fundo-2); }
.paleta-essencias { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.paleta-grupo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.paleta-grupo .rotulo-hemi { width: 112px; color: var(--texto-2); font-weight: 600; flex: none; }
.chip-essencia {
position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; padding: .32em .8em; border-radius: 3px;
border: 1px solid var(--borda-forte); background: var(--painel); color: var(--texto); cursor: pointer; font: inherit; line-height: 1.2;
transition: border-color .2s, box-shadow .2s, transform .2s;
}
.chip-essencia:hover:not(:disabled) { border-color: var(--mana); box-shadow: 0 0 14px color-mix(in srgb, var(--mana) 35%, transparent); transform: translateY(-2px); }
.chip-essencia:disabled { opacity: .35; cursor: not-allowed; }
.chip-essencia b { font: 600 .92em var(--titulo); }
.chip-essencia small { color: var(--texto-2); font-size: .86em; font-style: italic; font-weight: 600; }
.chip-essencia.achada { border-color: var(--mana); box-shadow: 0 0 0 1px var(--mana), 0 0 14px color-mix(in srgb, var(--mana) 40%, transparent); }
.sem-essencias { color: var(--texto-3); font-style: italic; }
.essencias-escolhidas { display: flex; flex-direction: column; gap: 6px; }
.escolhida {
display: flex; align-items: center; gap: 10px; padding: .45em .7em; border-radius: 3px;
background: linear-gradient(90deg, color-mix(in srgb, var(--mana) 10%, transparent), transparent 40%), var(--painel); border: 1px solid var(--borda); border-left: 3px solid var(--mana);
}
.escolhida .ess { font: 600 .98em var(--titulo); color: var(--mana); min-width: 4.8em; }
.escolhida .prop { flex: 1; color: var(--texto-2); }
.escolhida .prop b { color: var(--texto); font-weight: 700; }
.escolhida .preco { color: var(--mana-2); white-space: nowrap; font-style: italic; }
.vaga { padding: .45em .7em; border-radius: 3px; border: 1px dashed var(--borda-forte); color: var(--texto-2); font-style: italic; }
/* ghost of an essence flying from the palette into the spell */
.essencia-voando { position: fixed; z-index: 960; pointer-events: none; margin: 0; }
.grade-mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(176px, 100%), 1fr)); gap: 10px; }
.grade-mods > div { display: flex; flex-direction: column; gap: .3em; }
.ajuda { display: inline-grid; place-items: center; width: 1.35em; height: 1.35em; border-radius: 50%; background: var(--painel-2); border: 1px solid var(--borda-forte); font-size: .9em; cursor: help; }
.editor-custo { position: sticky; top: 18px; }
.custo-caixa {
position: relative; overflow: hidden; padding: 26px 18px 18px; text-align: center; display: flex; flex-direction: column; gap: 8px;
border: 1px solid var(--borda-forte); border-radius: 4px;
background: radial-gradient(circle at 50% 120px, color-mix(in srgb, var(--mana) 12%, transparent), transparent 60%), var(--painel);
box-shadow: inset 0 0 0 4px transparent, inset 0 0 0 5px var(--borda), 0 10px 26px rgba(60, 35, 10, .12);
}
.custo-circulo {
position: absolute; left: 50%; top: 34px; width: 184px; height: 184px; margin-left: -92px; pointer-events: none;
background: url('../img/circulo-tinta.webp') center/contain no-repeat; opacity: .3; filter: hue-rotate(var(--matiz, 0deg));
}
[data-tom="escuro"] .custo-circulo { background-image: url('../img/circulo-mana.webp'); opacity: .55; filter: hue-rotate(var(--matiz, 0deg)) drop-shadow(0 0 5px rgba(var(--luz, 170, 120, 255), .9)); }
.custo-aura { position: absolute; left: 50%; top: 126px; width: 140px; height: 140px; margin: -70px 0 0 -70px; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(closest-side, color-mix(in srgb, var(--mana) 55%, transparent), transparent); }
.custo-caixa > *:not(.custo-circulo):not(.custo-aura) { position: relative; }
.custo-rotulo { font: 600 .74em var(--titulo); letter-spacing: .25em; color: var(--mana-2); text-transform: uppercase; }
.custo-valor { font: 600 3.9em/1 var(--e-fonte-num); color: var(--mana); text-shadow: 0 0 22px color-mix(in srgb, var(--mana) 50%, transparent); margin: 48px 0 4px; font-variant-numeric: tabular-nums lining-nums; }
.custo-unidade { color: var(--texto-3); font: 600 .75em var(--titulo); letter-spacing: .3em; margin-top: -6px; margin-bottom: 60px; }
.custo-passos { text-align: left; font-size: .95em; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font-variant-numeric: tabular-nums lining-nums; color: var(--texto-2); }
.custo-passos b { color: var(--texto); text-align: right; }
.custo-passos .total { border-top: 1px solid var(--borda); padding-top: 4px; margin-top: 2px; }
.custo-aplicadas { text-align: left; font-size: .95em; font-weight: 600; color: var(--ouro-2); display: flex; flex-direction: column; gap: 2px; }
.custo-erros { text-align: left; display: flex; flex-direction: column; gap: 6px; }
/* property chooser */
.lista-props { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; }
.opcao-prop { display: flex; gap: 10px; align-items: flex-start; padding: .5em .7em; border: 1px solid var(--borda); border-radius: 3px; cursor: pointer; background: var(--painel); font: inherit; letter-spacing: 0; text-transform: none; color: var(--texto); transition: border-color .2s, background .2s; }
.opcao-prop:hover { border-color: var(--mana); }
.opcao-prop:has(input:checked) { border-color: var(--mana); background: color-mix(in srgb, var(--mana) 9%, var(--painel)); }
.opcao-prop input { margin-top: .3em; accent-color: var(--mana); }
.opcao-prop .tipo { font: 600 .7em var(--titulo); color: var(--texto-3); text-transform: uppercase; letter-spacing: .12em; }
.opcao-prop .nome { font-weight: 700; }
.opcao-prop .expl { color: var(--texto-2); font-size: .95em; margin-top: .15em; }
.segundo-ambiente { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--borda); }
/* ---------- character sheet ---------- */
.aba-ficha { display: flex; flex-direction: column; gap: 18px; }
.aba-ficha.oculto { display: none; }
.secao {
padding: 20px 22px; border: 1px solid var(--borda); border-radius: 4px; background: var(--painel);
box-shadow: inset 0 0 0 4px transparent, inset 0 0 0 5px color-mix(in srgb, var(--ouro) 9%, transparent);
}
.secao h2 { display: flex; align-items: center; gap: .6em; font-size: 1.15em; color: var(--ouro-2); margin-bottom: 14px; flex-wrap: wrap; }
.secao h2::before { content: '❦'; color: var(--ouro); font-size: 1.1em; }
.secao h2::after { content: ''; flex: 1 1 60px; height: 1px; background: linear-gradient(90deg, var(--borda-forte), transparent); }
.secao h2 .dica { font-size: .72em; }
.secao.destaque { animation: destaque 1.4s ease-out; }
@keyframes destaque { 0% { box-shadow: 0 0 0 2px var(--mana), 0 0 30px color-mix(in srgb, var(--mana) 40%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
.encadernacao { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 40px; align-items: start; }
.encadernacao .campo { margin-bottom: 0; grid-column: 1; }
/* live preview of the cover: same 3D book as the shelf, turning slowly */
.previa-livro {
--lw: 132px; --lh: 186px; --ld: 26px;
grid-column: 2; grid-row: 1 / span 4; align-self: center; position: relative; width: 200px; height: 236px;
display: grid; place-items: center; border-radius: 4px;
background: radial-gradient(ellipse 60% 22% at 50% 88%, rgba(40, 22, 8, .35), transparent 70%);
}
.previa-livro .livro-fechado { cursor: default; }
.previa-livro .livro-corpo { animation: previa-gira 9s ease-in-out infinite alternate; }
.previa-livro .capa { transition: transform .9s cubic-bezier(.3, .8, .25, 1); }
.previa-livro:hover .capa { transform: translateZ(calc(var(--ld) / 2)) rotateY(-62deg); }
.previa-livro:hover .livro-corpo { animation-play-state: paused; }
@keyframes previa-gira { from { transform: rotateX(-4deg) rotateY(-38deg); } to { transform: rotateX(-2deg) rotateY(-8deg); } }
[data-animacao="leve"] .previa-livro .livro-corpo { animation: none; transform: rotateX(-3deg) rotateY(-24deg); }
.segmentos { display: inline-flex; border: 1px solid var(--borda-forte); border-radius: 3px; overflow: hidden; flex-wrap: wrap; align-self: flex-start; }
.segmentos button { padding: .45em .9em; border: 0; border-right: 1px solid var(--borda); background: var(--fundo-2); color: var(--texto-2); font: 600 .95em var(--serif); cursor: pointer; transition: background .2s, color .2s; }
.segmentos button:last-child { border-right: 0; }
.segmentos button:hover { color: var(--texto); background: var(--painel-2); }
.segmentos button.ativo { background: linear-gradient(180deg, #f6e09a, #d6ac4a 50%, #b0832a); color: #2a1a06; font-weight: 700; box-shadow: inset 0 1px 0 rgba(255, 250, 220, .7); }
.segmentos button small { display: block; font-size: .8em; opacity: .85; }
.amostras { display: flex; gap: 8px; flex-wrap: wrap; }
.amostra {
width: 50px; height: 40px; border-radius: 3px 7px 7px 3px; cursor: pointer; border: 0; padding: 0;
background: linear-gradient(90deg, rgba(0, 0, 0, .5), transparent 8px), var(--g-couro), radial-gradient(circle at 35% 25%, color-mix(in srgb, var(--couro) 70%, #fff 18%), var(--couro) 60%, color-mix(in srgb, var(--couro) 60%, #000));
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5), inset 0 0 0 4px transparent, inset 0 0 0 5px rgba(226, 190, 106, .35), 0 2px 4px rgba(0, 0, 0, .3); transition: transform .2s, box-shadow .2s;
}
.amostra:hover { transform: translateY(-3px) rotate(-2deg); }
.amostra.ativo { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5), inset 0 0 0 4px transparent, inset 0 0 0 5px rgba(226, 190, 106, .6), 0 0 0 2px var(--papel), 0 0 0 4px var(--ouro); }
/* custom leather: the native picker sits invisible over the swatch */
.amostra-cor { position: relative; display: grid; place-items: center; }
.amostra-cor input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.amostra-cor span { font: 700 1.3em var(--titulo); color: #fff3dc; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); pointer-events: none; }
/* mana color: little vials of liquid instead of leather */
.linha-cor { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.amostra-mana {
width: 64px; height: 24px; border-radius: 99px;
background: linear-gradient(180deg, rgba(255, 255, 255, .45), transparent 40%), linear-gradient(180deg, color-mix(in srgb, var(--cor-barra) 45%, #fff), var(--cor-barra) 30%, color-mix(in srgb, var(--cor-barra) 40%, #000));
}
.amostra-mana:hover { transform: translateY(-2px); }
.amostra-mana.original { --cor-barra: #8a5cf6; background: linear-gradient(180deg, rgba(255, 255, 255, .45), transparent 40%), linear-gradient(180deg, #c9a8ff 0%, #8a5cf6 26%, #5b2bd0 62%, #2f107e 100%); }
.grupos-folhas { display: flex; flex-direction: column; gap: .5em; }
.grupo-folhas { display: flex; align-items: center; gap: .8em; }
.grupo-folhas > .dica { min-width: 6.5em; }
.folha-amostra { display: inline-block; width: .85em; height: .85em; margin-right: .45em; vertical-align: -.05em; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .25); }
.grade-hemisferios { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.hemisferio { border: 1px solid var(--borda); border-radius: 3px; padding: 10px 12px; background: var(--fundo-2); }
.hemisferio h3 { font-size: .95em; margin-bottom: 8px; color: var(--texto); padding-bottom: 6px; border-bottom: 1px solid var(--borda); }
.marcar { display: flex; align-items: center; gap: .55em; padding: .25em .3em; cursor: pointer; border-radius: 3px; font: 500 1em var(--serif); letter-spacing: 0; text-transform: none; color: var(--texto); transition: background .2s; }
.marcar:hover { background: var(--painel-2); }
.marcar:has(input:checked) b { color: var(--mana); }
.marcar input { accent-color: var(--mana); width: 1.05em; height: 1.05em; flex: none; }
.marcar .info { color: var(--texto-3); font-size: .9em; margin-left: auto; text-align: right; }
.lista-pericias { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 10px; }
.pericia { border: 1px solid var(--borda); border-radius: 3px; padding: 10px 12px; background: var(--fundo-2); display: flex; flex-direction: column; gap: 8px; }
.pericia-cabeca { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pericia-cabeca h3 { font-size: 1em; }
.pericia .segmentos button { padding: .25em .75em; }
.pericia .nivel-atual { color: var(--texto-2); min-height: 2.6em; }
.pericia .nivel-atual b { color: var(--ouro-2); }
.lista-devocoes { display: flex; flex-direction: column; gap: 14px; }
.nivel-devocao h3 { font-size: .95em; margin-bottom: 6px; color: var(--texto); }
.nivel-devocao h3 small { color: var(--texto-3); font: italic 500 1em var(--serif); }
.grade-devocoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 6px; }
.devocao { display: flex; gap: .55em; align-items: flex-start; padding: .45em .6em; border: 1px solid var(--borda); border-radius: 3px; background: var(--fundo-2); cursor: pointer; font: 500 1em var(--serif); letter-spacing: 0; text-transform: none; color: var(--texto); transition: border-color .2s, box-shadow .2s; }
.devocao:hover { border-color: var(--ouro); }
.devocao.ativa { border-color: var(--mana); box-shadow: 0 0 0 1px var(--mana), 0 0 14px color-mix(in srgb, var(--mana) 25%, transparent); }
.devocao input { accent-color: var(--mana); margin-top: .25em; flex: none; }
.devocao .nome { font-weight: 700; }
.devocao .desc { color: var(--texto-2); font-size: .94em; }
.devocao .efeito { color: var(--mana-2); font-size: .88em; font-style: italic; }
.grade-familiar { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 6px; margin-top: 10px; }
/* ---------- cast log: a ledger ---------- */
.registro-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid var(--borda); }
.registro-topo h2 { color: var(--ouro-2); font-size: 1.55em; }
.registro-topo h2::before { content: '❧ '; color: var(--ouro); }
.lista-registro { display: grid; gap: 24px; }
.registro-dia h3 { display: flex; align-items: baseline; gap: .5em; flex-wrap: wrap; margin: 0 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--borda-forte); color: var(--texto); font: 600 1.05em var(--titulo); }
.registro-dia h3::first-letter { text-transform: uppercase; }
.registro-dia h3 small { color: var(--texto-3); font: italic 500 .85em var(--serif); }
.registro-dia ol { margin: 0; padding: 0; list-style: none; }
.reg {
position: relative; display: grid; grid-template-columns: 3.4em 1.7em 1fr; align-items: baseline; gap: 6px; padding: 6px 6px 6px 12px;
border-left: 3px solid var(--cor, var(--mana)); border-bottom: 1px dotted var(--borda);
background: linear-gradient(90deg, color-mix(in srgb, var(--cor, var(--mana)) 8%, transparent), transparent 35%);
}
.reg time { color: var(--texto-3); font-variant-numeric: tabular-nums lining-nums; }
.reg-custo { color: color-mix(in srgb, var(--mana) 80%, var(--texto)); font-weight: 600; }
.reg-rolagem { color: var(--texto-2); }
.reg-mana { margin-left: .4em; color: var(--texto-3); font-size: .9em; font-style: italic; white-space: nowrap; }
/* ---------- dice result ---------- */
.rolagem-linha { display: flex; align-items: center; gap: 10px; padding: .55em 0; border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
.rolagem-linha .nome { min-width: 120px; font-weight: 700; }
.dados { display: flex; gap: 5px; flex-wrap: wrap; flex: 1; }
.dado {
min-width: 2em; text-align: center; padding: .12em .38em; border-radius: 5px; background: var(--fundo-2); border: 1px solid var(--borda-forte);
box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12), 0 2px 3px rgba(0, 0, 0, .12); font-variant-numeric: tabular-nums lining-nums;
animation: dado-cai .55s cubic-bezier(.2, .8, .2, 1.3) both;
}
.dado:nth-child(2) { animation-delay: .06s; } .dado:nth-child(3) { animation-delay: .12s; } .dado:nth-child(4) { animation-delay: .18s; } .dado:nth-child(n+5) { animation-delay: .24s; }
@keyframes dado-cai { from { opacity: 0; transform: translateY(-18px) rotate(-120deg) scale(.6); } to { opacity: 1; transform: none; } }
.dado.max { border-color: var(--ouro); color: var(--ouro-2); box-shadow: 0 0 10px color-mix(in srgb, var(--ouro) 55%, transparent); }
.dado.min { border-color: var(--perigo); color: var(--perigo); }
.rolagem-total { font: 700 1.6em var(--titulo); color: var(--ouro-2); }
.rolagem-geral { text-align: right; margin-top: .6em; font-size: 1.1em; }
/* ---------- casting: stamped circle, ink trail, cracked seal ---------- */
.carimbo {
position: fixed; z-index: 901; pointer-events: none; opacity: 0;
filter: drop-shadow(0 0 6px rgba(155, 107, 255, .95)) drop-shadow(0 0 18px rgba(155, 107, 255, .6));
animation: carimbo 1.3s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes carimbo {
0% { opacity: 0; transform: scale(.25) rotate(-40deg); }
30% { opacity: 1; transform: scale(.95) rotate(0deg); }
100% { opacity: 0; transform: scale(1.35) rotate(50deg); }
}
.rastro-tinta { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 899; pointer-events: none; overflow: visible; }
.rastro-tinta path { fill: none; stroke-linecap: round; }
[data-tom="escuro"] .carimbo { filter: hue-rotate(var(--matiz, 0deg)) drop-shadow(0 0 6px rgba(var(--luz, 155, 107, 255), .95)) drop-shadow(0 0 18px rgba(var(--luz, 155, 107, 255), .6)); }
.carimbo.tinta { mix-blend-mode: multiply; filter: brightness(.38) saturate(3.2) drop-shadow(0 0 2px rgba(90, 50, 200, .5)); }
.magia-custo::after {
content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none;
background: url("data:image/svg+xml;utf8,") center / 100% no-repeat;
filter: drop-shadow(0 0 3px #b48cff) drop-shadow(0 0 6px #8b5cf6);
}
.lista-magias .magia.conjurando .magia-custo::after { animation: selo-trinca 1.6s ease-out; }
@keyframes selo-trinca { 0% { opacity: 0; } 15% { opacity: 1; } 55% { opacity: .9; } 100% { opacity: 0; } }
.lista-magias .magia.sem-mana .magia-custo::after {
opacity: .95; filter: none; animation: none;
background-image: url("data:image/svg+xml;utf8,");
}
.fx-filtro { position: absolute; width: 0; height: 0; overflow: hidden; }
/* ---------- hover descriptions: a slip of papyrus unfolding ---------- */
[data-dica] { cursor: help; }
button[data-dica], label[data-dica], .chip-essencia[data-dica] { cursor: pointer; }
.dica-flutuante {
position: fixed; z-index: 1100; max-width: 360px; padding: .65em .9em; border-radius: 3px; pointer-events: none;
background: var(--g-papiro), var(--papel); border: 1px solid var(--papel-borda); color: var(--texto);
box-shadow: 0 14px 30px rgba(0, 0, 0, .45), inset 0 0 18px rgba(90, 55, 15, .15); font-size: .95em; line-height: 1.38; white-space: pre-line;
opacity: 0; transform: translateY(5px) scale(.98); clip-path: inset(0 0 100% 0 round 3px);
transition: opacity .18s, transform .25s cubic-bezier(.2, .8, .2, 1), clip-path .3s cubic-bezier(.2, .8, .2, 1);
}
.dica-flutuante.visivel { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 3px); }
.dica-flutuante .dica-titulo { display: block; font: 600 .78em var(--titulo); letter-spacing: .1em; text-transform: uppercase; color: var(--ouro-2); margin-bottom: .25em; }
.dica-flutuante .dica-item { display: block; margin-top: .35em; }
.dica-flutuante .dica-item b { color: var(--mana-2); }
[data-tom="escuro"] .dica-flutuante { box-shadow: 0 14px 30px rgba(0, 0, 0, .55), 0 0 18px rgba(var(--luz, 155, 107, 255), .3); }
.modo-dica { color: var(--texto-2); font-style: italic; font-size: .95em; margin-top: .3em; white-space: pre-line; }
/* ---------- floating mana vial (shown when the mana panel scrolls away) ---------- */
.mana-flutuante {
position: fixed; top: 12px; left: 50%; z-index: 800; display: flex; align-items: center; gap: 10px;
padding: 7px 16px 7px 8px; border-radius: 99px; pointer-events: none;
background: radial-gradient(120% 140% at 20% 0%, rgba(255, 230, 170, .1), transparent 50%), var(--g-couro), linear-gradient(180deg, #3a2618, #1d130c);
border: 1px solid rgba(222, 184, 98, .55);
box-shadow: 0 12px 28px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 230, 170, .18), inset 0 0 0 3px rgba(0, 0, 0, .2), inset 0 0 0 4px rgba(222, 184, 98, .18);
transform: translate(-50%, -150%) scale(.9); opacity: 0; transition: transform .5s cubic-bezier(.16, 1, .3, 1), opacity .3s;
}
.mana-flutuante.visivel { transform: translate(-50%, 0); opacity: 1; }
/* reduced motion: the mana stands still in its glass and the ink circle stops turning (27/10) */
@media (prefers-reduced-motion: reduce) {
.mana-correnteza, .mana-bolhas i, .mana-brilho, .mana-barra.baixa .mana-barra-cheia, .medalhao-circulo { animation: none; }
.mana-bolhas { display: none; }
}
.mana-flutuante:not(.visivel) .mana-correnteza, .mana-flutuante:not(.visivel) .mana-brilho { animation-play-state: paused; }
.mf-gota { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #b48cff, #5b2bd0 60%, #2a0f75); box-shadow: 0 0 12px rgba(155, 107, 255, .7), inset 0 -2px 3px rgba(0, 0, 0, .35); }
.mana-flutuante .ic { color: #f1e8ff; width: 1.15em; height: 1.15em; }
.mf-valor { font: 600 1.35em/1 var(--e-fonte-num); color: var(--mana-2); text-shadow: 0 0 12px var(--mana); min-width: 1.6em; text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.mf-total { font: 600 .95em var(--e-fonte-num); color: var(--texto-2); }
.mana-flutuante .mana-barra { width: 230px; height: 12px; }
.mana-flutuante .mana-brilho { width: 8px; }
/* next turn from the floating vial */
.mf-turno {
pointer-events: auto; display: grid; place-items: center; width: 30px; height: 30px; margin-left: 2px; padding: 0;
border-radius: 50%; border: 1px solid rgba(222, 184, 98, .55); background: rgba(0, 0, 0, .3); cursor: pointer; transition: background .2s, transform .2s;
}
.mf-turno:hover { background: rgba(222, 184, 98, .22); transform: scale(1.08); }
.mana-flutuante .mf-turno .ic { width: 1em; height: 1em; color: #f3d98e; }
/* ---------- light animation level: no continuous loops ---------- */
[data-animacao="leve"] .mana-correnteza, [data-animacao="leve"] .mana-bolhas, [data-animacao="leve"] .mana-brilho, [data-animacao="leve"] .folha.pagina::before,
[data-animacao="leve"] .medalhao-circulo, [data-animacao="leve"] .custo-circulo, [data-animacao="leve"] .medalhao-capa::before,
[data-animacao="leve"] .ambiente-vela, [data-animacao="leve"] .mana-barra.baixa .mana-barra-cheia { animation: none; }
[data-animacao="leve"] .mana-bolhas, [data-animacao="leve"] .ambiente-lanterna { display: none; }
[data-animacao="leve"] .fecho-pendente { animation: none; transform: rotate(-3deg); }
@media (max-width: 1180px) {
.topo { padding-right: 0; padding-top: 70px; }
}
@media (max-width: 900px) {
.editor { grid-template-columns: 1fr; }
.editor-custo { position: static; order: -1; }
.livro > .folha { padding: 34px 22px 40px 34px; }
.abas { right: 24px; }
.aba { min-width: 0; }
}
/* ---------- the bank of spells of the campaign (Etapa 4b, 17/10): the same cards, signed by who published them ---------- */
.banco-topo { flex-direction: column; align-items: flex-start; }
.banco-topo .dica { margin: 0; color: var(--texto-3); font-style: italic; }
.banco-filtros { grid-template-columns: 2fr 1fr 1fr; align-items: end; }
.banco-filtro { display: flex; flex-direction: column; gap: 3px; font-size: .85em; color: var(--texto-3); }
.banco-autor { margin-top: -4px; font-size: .9em; font-style: italic; color: var(--texto-2); }
.banco-autor b { font-style: normal; color: var(--texto); }
.banco-magia .magia-desc { max-height: 10em; overflow: auto; scrollbar-width: thin; }
.banco-magia:hover { transform: none; }
/* the two sections of the bank (23/10): the master's (hidden from the players until he releases each spell) and the players' */
.banco-secao { grid-column: 1 / -1; margin: 6px 0 -8px; padding-bottom: 4px; border-bottom: 1px solid var(--borda-forte); font-size: 1.15em; color: var(--texto); }
.banco-secao small { margin-left: 8px; font-size: .72em; font-weight: 400; font-style: italic; color: var(--texto-3); }
.banco-secao-vazia { grid-column: 1 / -1; margin: 0; padding: .6em 0; color: var(--texto-3); font-style: italic; }
.banco-selo { display: inline-block; margin-right: 8px; padding: 0 7px; border-radius: 999px; font-size: .85em; font-style: normal; border: 1px solid currentColor; }
.banco-selo.escondida { color: var(--texto-3); }
.banco-selo.liberada { color: var(--ouro); }
/* ---------- the master's grimoire (25/10): a lean book, only spells (no mana, no cast, no character pages) ---------- */
body.grimorio-mestre .painel-mana, body.grimorio-mestre .resumo, body.grimorio-mestre #manaFlutuante,
body.grimorio-mestre .aba[data-aba="personagem"], body.grimorio-mestre .aba[data-aba="registro"],
body.grimorio-mestre #circuloGrimorio, body.grimorio-mestre #manaCorGrimorio { display: none !important; }
body.grimorio-mestre .campo:has(> #circuloGrimorio), body.grimorio-mestre .campo:has(> #manaCorGrimorio) { display: none; }
body.grimorio-mestre .topo-marca { letter-spacing: .08em; }
.mestre-estado { margin-top: -4px; }
.mestre-selo { display: inline-block; padding: 0 8px; border-radius: 999px; font-size: .82em; font-style: italic; border: 1px dashed var(--borda-forte); color: var(--texto-3); }
.mestre-selo.escondida { border-style: solid; color: var(--texto-2); }
.mestre-selo.liberada { border-style: solid; color: var(--ouro); border-color: color-mix(in srgb, var(--ouro) 60%, transparent); }
.magia-pe-mestre { row-gap: 8px; }
.magia-pe-mestre .mestre-pe-icones { display: inline-flex; gap: 4px; }
.magia-mestre .magia-custo { cursor: help; }
/* ---------- a scroll of the sheet (25/10): a rolled parchment with a wax seal among the spells ---------- */
.magia.pergaminho-magia {
border-style: dashed;
background:
radial-gradient(circle at 92% 14%, #b3261e 0 7px, #7d1712 8px, transparent 9.5px),
linear-gradient(180deg, color-mix(in srgb, #e6cf98 22%, transparent), transparent 140px),
var(--painel);
}
.magia.pergaminho-magia .magia-cabeca { padding-right: 18px; }
.tag.tag-pergaminho { border-style: dashed; font-style: italic; }
.magia.pergaminho-magia.lido { opacity: .82; }
.magia.pergaminho-magia.lido .magia-nome { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--texto) 45%, transparent); }
/* several targets in the campaign combat (26/10): a spell of Número de Alvos (at most n) or of Área (everyone inside) */
.luta-escolha-tit { margin: 0 0 .4em; font-weight: 600; }
.luta-escolha { display: grid; gap: 8px; }
.luta-escolha-grupo { display: grid; gap: 4px; margin: 0; padding: 6px 12px 8px; border: 1px solid color-mix(in srgb, currentColor 25%, transparent); border-radius: 4px; }
.luta-escolha-grupo legend { padding: 0 .3em; font: italic .95em var(--serif, serif); }
.luta-escolha-grupo label { display: flex; align-items: center; gap: 8px; cursor: pointer; text-transform: none; letter-spacing: 0; }
.luta-escolha-conta { margin: 0; font: italic .9em var(--serif, serif); opacity: .8; }
.luta-escolha-conta.aviso { color: var(--aviso, #a33); opacity: 1; }