/* Pré-registro do alfa. Mesma linguagem do site (pixel do jogo --u, fontes e livro Fieri Heros), com bem menos coisa. */
@font-face{font-family:Grimorio;src:url(../assets/fonts/GrimorioPixel-Regular.ttf);font-display:swap}
@font-face{font-family:Grimorio;font-weight:700;src:url(../assets/fonts/GrimorioPixel-Bold.ttf);font-display:swap}
@font-face{font-family:"Pixel Operator 8";src:url(../assets/fonts/PixelOperator8.ttf);font-display:swap}
@font-face{font-family:"Pixel Operator 8";font-weight:700;src:url(../assets/fonts/PixelOperator8-Bold.ttf);font-display:swap}
@font-face{font-family:"Cinzel Decorative";src:url(../assets/fonts/CinzelDecorative-Regular.ttf);font-display:swap}
@font-face{font-family:"Pixel Operator HB";src:url(../assets/fonts/PixelOperatorHB.ttf);font-display:swap}

:root{--u:2px;--text-light:#f6e7c1;--text-dark:#3b2a1c;--text-muted:#5f4a36;--gold:#ffd96b;--success:#27604f;--danger:#8b2a1a;--outline:#1a0f07;--grass:#5d8c3a;
  --title:Grimorio,serif;--logo:"Cinzel Decorative",Grimorio,serif;--read:"Pixel Operator 8",monospace;--page:"Pixel Operator HB","Pixel Operator 8",monospace;--tx:1}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{background:var(--grass);color:var(--text-light);font:calc(8*var(--u))/1.25 var(--read);image-rendering:pixelated;-webkit-font-smoothing:none}
img{image-rendering:pixelated;display:block}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:focus-visible{outline:max(2px,var(--u)) solid var(--gold);outline-offset:max(1px,var(--u))}
.hint,.count,.music{
  --o:max(1px,calc(1*var(--u)));
  text-shadow:var(--o) 0 var(--outline),calc(-1*var(--o)) 0 var(--outline),0 var(--o) var(--outline),0 calc(-1*var(--o)) var(--outline),
              var(--o) var(--o) var(--outline),calc(-1*var(--o)) var(--o) var(--outline),var(--o) calc(-1*var(--o)) var(--outline),calc(-1*var(--o)) calc(-1*var(--o)) var(--outline)}

/* Fundo: a Vila Inicial, escurecida; câmera lenta só se a pessoa aceita movimento. */
.world{--m:max(var(--u),2px);position:fixed;inset:0;overflow:hidden}
.world-pan{position:absolute;left:50%;top:50%;width:calc(3072*var(--m));height:calc(2560*var(--m));transform:translate(calc(-1400*var(--m)),calc(-1180*var(--m)))}
.world-map{width:100%;height:100%;filter:saturate(.7) brightness(.62) contrast(.95)}
.world::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,transparent 30%,rgba(10,16,8,.6))}
@media (prefers-reduced-motion:no-preference){
  .world-pan{animation:camera 90s ease-in-out infinite alternate}
  @keyframes camera{to{transform:translate(calc(-1620*var(--m)),calc(-1060*var(--m)))}}
}

.stage{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(2*var(--u))}

/* O livro: folha 4x3 de quadros 272x272; quadro 11 = fechado, 0 = aberto. */
.tome{--c:3;--r:2;position:relative;width:calc(272*var(--u));height:calc(272*var(--u));margin-top:calc(-30*var(--u));flex:none}
.mb{position:absolute;inset:0;image-rendering:pixelated;
  background:url(../assets/magic-book/Close_book_fieri_heros.png) calc(var(--c)*-272*var(--u)) calc(var(--r)*-272*var(--u))/calc(1088*var(--u)) calc(816*var(--u)) no-repeat;
  transform:translateX(calc(-62*var(--u)));transition:transform 770ms steps(11,end)}
/* Fechado, a capa fica à direita do quadro: o livro é deslocado para o centro da tela e assenta ao abrir. */
.tome.is-open .mb,.tome.is-opening .mb{transform:none}
.tome.is-closing .mb{transform:translateX(calc(-62*var(--u)))}
@media (prefers-reduced-motion:reduce){.mb{transition:none}}
@media (prefers-reduced-motion:no-preference){
  .tome:not(.is-open,.is-opening,.is-closing){animation:float 2.4s steps(2,end) infinite}
  @keyframes float{50%{transform:translateY(calc(-3*var(--u)))}}
}
.tome-cover{position:absolute;inset:0;cursor:pointer;background:none}
.tome-cover:focus-visible{outline-offset:calc(-4*var(--u))}
.tome.is-open .tome-cover,.tome.is-opening .tome-cover,.tome.is-closing .tome-cover{display:none}
/* Capa aprovada: fumaça e olhos no hover/foco (atlas 8x8 de 128 px, 24 FPS). */
.cover-fx{position:absolute;left:calc(75*var(--u));top:calc(72*var(--u));width:calc(122*var(--u));height:calc(195*var(--u));pointer-events:none}
.cover-fx::after{content:"";position:absolute;left:calc(-3*var(--u));top:calc(2*var(--u));width:calc(128*var(--u));height:calc(128*var(--u));display:none;
  background:url(../assets/magic-book/dragon_cover_fx.png) 0 0/calc(1024*var(--u)) calc(1024*var(--u)) no-repeat}
.tome:has(.tome-cover:hover):not(.is-open,.is-opening,.is-closing) .cover-fx::after,
.tome:has(.tome-cover:focus-visible):not(.is-open,.is-opening,.is-closing) .cover-fx::after{
  display:block;animation:fx-col calc(8s/24) steps(8,end) infinite,fx-row calc(64s/24) steps(8,end) infinite}
@keyframes fx-col{to{background-position-x:calc(-1024*var(--u))}}
@keyframes fx-row{to{background-position-y:calc(-1024*var(--u))}}
@media (prefers-reduced-motion:reduce){.cover-fx::after{animation:none!important;background-position:0 calc(-896*var(--u))}}

.tome-pages{position:absolute;inset:0}
.tome-pages[hidden]{display:none}
.tome-turn{position:absolute;left:0;top:calc(48*var(--u))}
.tome-page{position:absolute;top:calc(92*var(--u));width:calc(96*var(--u));height:calc(150*var(--u));color:var(--text-dark);font:calc(7*var(--u)*var(--tx))/1.3 var(--page)}
.tome-page.left{left:calc(28*var(--u))}
.tome-page.right{left:calc(148*var(--u))}
/* Celular: uma página por vez, na largura das duas, dentro do mesmo livro. */
.single{--tx:1.15}
.single .tome-page.left{left:calc(28*var(--u));width:calc(216*var(--u))}
.single .tome-page.right{display:none}
.sheet{width:100%;height:100%;display:flex;flex-direction:column;gap:calc(3*var(--u));padding:0 calc(2*var(--u))}
.sheet h2{margin:0;font:700 calc(10*var(--u)) var(--title);text-align:center}
.sheet p{margin:0}
.sheet .lead{text-align:center}
.sheet .art{align-self:center;width:calc(26*var(--u));height:calc(26*var(--u));object-fit:contain}
/* Título em escrita de grimório (não pixel): suavizado, com brilho dourado discreto. */
.sheet h2.logo{font:calc(13*var(--u))/1.1 var(--logo);color:#5a1d12;-webkit-font-smoothing:antialiased;letter-spacing:.02em;
  text-shadow:0 0 calc(2*var(--u)) rgba(255,200,90,.55),0 calc(.5*var(--u)) 0 rgba(255,236,190,.8)}
.sheet .monster{align-self:center;width:calc(80*var(--u));height:calc(100*var(--u));object-fit:contain;margin:calc(-4*var(--u)) 0}
.sheet button.link{align-self:center;color:var(--text-muted);text-decoration:underline;font:inherit}
.sheet button.link:hover{color:var(--text-dark)}

.form{display:flex;flex-direction:column;gap:calc(3*var(--u));flex:1}
.field{display:flex;flex-direction:column;gap:calc(1*var(--u));font:700 calc(7*var(--u)) var(--title)}
.field input{width:100%;height:calc(12*var(--u));padding:0 calc(3*var(--u));border:0;color:var(--text-dark);font:calc(7*var(--u)) var(--read);
  background:url(../assets/game-hud/ui/book/adventure/field.png) 0 0/100% 100%}
.field input:focus-visible{outline-offset:0}
.consent{display:flex;gap:calc(3*var(--u));align-items:flex-start;font-size:calc(6*var(--u)*var(--tx));line-height:1.3}
.consent input{flex:none;width:calc(8*var(--u));height:calc(8*var(--u));margin:0;accent-color:var(--success);cursor:pointer}
.consent a{color:var(--success)}
.btn{border-image:url(../assets/game-hud/ui/rpgui/button_green.png) 4 fill/calc(4*var(--u));border-style:solid;border-width:calc(4*var(--u));min-height:calc(14*var(--u));
  padding:0 calc(2*var(--u));font:700 calc(7*var(--u)) var(--title);color:var(--text-light);text-shadow:0 calc(1*var(--u)) var(--outline)}
.btn:hover{filter:brightness(1.12)}
.btn[disabled]{filter:grayscale(.6);cursor:wait}
.status{margin:0;min-height:calc(8*var(--u));font-size:calc(6*var(--u)*var(--tx));line-height:1.25;color:var(--danger)}
.status.ok{color:var(--success)}
.form[hidden],.done[hidden]{display:none}
.done{display:flex;flex-direction:column;gap:calc(4*var(--u));flex:1;justify-content:center;text-align:center}
.done .status{font-size:calc(7*var(--u)*var(--tx));min-height:0}

/* Dica e controles ficam fora do livro, abaixo dele. */
.hint{margin:0;font:calc(8*var(--u)) var(--title);color:var(--text-light);height:calc(14*var(--u));animation:blink 1.6s steps(2,end) infinite}
@keyframes blink{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.hint{animation:none}}
.hint[hidden],.bar[hidden]{display:none}
.bar{display:flex;align-items:center;justify-content:space-between;gap:calc(4*var(--u));width:calc(232*var(--u));height:calc(14*var(--u))}
.count{font:calc(7*var(--u)) var(--title);color:var(--text-light)}
.gbtn{min-width:calc(16*var(--u));height:calc(13*var(--u));padding:0 calc(4*var(--u));font:calc(6*var(--u)) var(--title);color:var(--text-dark);
  border-image:url(../assets/game-hud/ui/rpgui/button_beige.png) 3 4 4 fill/calc(3*var(--u)) calc(4*var(--u)) calc(4*var(--u));border-style:solid;border-width:calc(3*var(--u)) calc(4*var(--u)) calc(4*var(--u))}
.gbtn:hover:not([disabled]){filter:brightness(1.1)}
.gbtn[disabled]{opacity:.45;cursor:default}

.music{position:fixed;left:calc(8*var(--u));top:calc(8*var(--u));z-index:3;padding:calc(1*var(--u)) calc(4*var(--u));color:var(--text-light);font:calc(6*var(--u)) var(--title);
  border-image:url(../assets/game-hud/ui/rpgui/panel_brown.png) 5 fill/calc(3*var(--u));border-style:solid;border-width:calc(2*var(--u))}
.music:hover{color:var(--gold)}

@media (max-width:600px){
  .tome{margin-top:calc(-24*var(--u))}
  .bar{width:calc(256*var(--u))}
}