:root {
  --mesa: #1a0f0c; --couro: #7a1a1c; --couro-escuro: #4a0c0e; --couro-claro: #a0282a;
  --ouro: #d8b45a; --ouro-escuro: #8a6a2a; --prata: #d9dde3; --papel: #e9d9b0; --papel-escuro: #cdb88a; --tinta: #2a1c12; --tinta-fraca: #6a5438;
  --vermelho: #8a1e22; --brasa: #c0502a;
  --serif: 'IM Fell English', Georgia, serif; --titulo: 'MedievalSharp', 'IM Fell English', serif; --pix: 'Pixelify Sans', monospace;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: var(--mesa); color: var(--tinta); font-family: var(--serif); }
body { background:
  radial-gradient(ellipse 80% 60% at 50% 40%, rgba(120,70,30,.25), transparent 70%),
  repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 2px, transparent 2px 38px),
  linear-gradient(#2a1810, #140b08); }
#mesa { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px 12px 28px; perspective: 1800px; }

/* ----- o livro (fechado: capa por cima; aberto: capa vira para a esquerda) */
#livro { position: relative; width: min(92vw, 480px); aspect-ratio: 3 / 4.3; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition: transform 1.4s cubic-bezier(.4,.1,.2,1); }
#livro.fechado { transform: translateX(0) rotateY(0); }
#livro.aberto { transform: translateX(min(6vw, 36px)); }
.lombada { position: absolute; left: -14px; top: 6px; bottom: 6px; width: 20px; border-radius: 8px 0 0 8px;
  background: linear-gradient(90deg, #2a0607, var(--couro-escuro) 40%, var(--couro) 70%, #5a1012); box-shadow: -3px 0 8px rgba(0,0,0,.6); }
.miolo { position: absolute; inset: 0; border-radius: 3px 10px 10px 3px; background: var(--papel-escuro); box-shadow: 0 18px 40px rgba(0,0,0,.7), 0 2px 0 #b89e72; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
.bordas { position: absolute; top: 4px; right: -9px; bottom: 2px; width: 12px; border-radius: 0 6px 6px 0;
  background: repeating-linear-gradient(180deg, #efe3bf 0 2px, #cbb588 2px 3px, #e2d2a6 3px 5px); box-shadow: inset -3px 0 4px rgba(0,0,0,.35); }
.miolo::after { content: ''; position: absolute; left: 6px; right: 6px; bottom: -8px; height: 10px; border-radius: 0 0 8px 8px;
  background: repeating-linear-gradient(90deg, #efe3bf 0 2px, #cbb588 2px 3px, #e2d2a6 3px 5px); box-shadow: 0 3px 4px rgba(0,0,0,.4); }

.pagina, .folha .face { position: absolute; inset: 0; border-radius: 3px 10px 10px 3px; overflow: hidden; background:
  radial-gradient(ellipse 60% 40% at 30% 20%, rgba(255,255,255,.18), transparent 60%),
  radial-gradient(ellipse 50% 50% at 90% 95%, rgba(120,80,30,.25), transparent 60%),
  linear-gradient(90deg, #cdb88a 0, #e6d5aa 4%, var(--papel) 10%, var(--papel) 92%, #dfcc9e); }
.textura { position: absolute; inset: 0; background: url(/arte/tex_papel.png) repeat; background-size: 128px; pointer-events: none; }
.conteudo { position: absolute; inset: 0; padding: 22px 20px 18px 26px; overflow-y: auto; overscroll-behavior: contain; font-size: 16px; line-height: 1.42; }
.conteudo::-webkit-scrollbar { width: 6px; } .conteudo::-webkit-scrollbar-thumb { background: #b89e72; border-radius: 3px; }

/* folha que vira */
.folha { position: absolute; inset: 0; transform-origin: left center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.45,.05,.3,1); pointer-events: none; opacity: 0; transform: translateZ(1px) rotateY(0); }
.folha.virando { opacity: 1; transform: translateZ(1px) rotateY(-180deg); }
.folha .face { -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 0 0 30px rgba(0,0,0,.35); }
.folha .verso { transform: rotateY(180deg); }

/* capa */
.capa { position: absolute; inset: 0; transform-origin: left center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition: transform 1.5s cubic-bezier(.5,.05,.2,1); z-index: 3; transform: translateZ(2px) rotateY(0); }
#livro.aberto .capa { transform: translateZ(2px) rotateY(-178deg); }
.capa .face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 4px 12px 12px 4px; overflow: hidden; }
.capa .frente { background: radial-gradient(ellipse 70% 60% at 40% 30%, var(--couro-claro), var(--couro) 50%, var(--couro-escuro) 100%);
  box-shadow: 0 20px 50px rgba(0,0,0,.75), inset 0 0 40px rgba(0,0,0,.45), inset 2px 2px 0 rgba(255,160,140,.25); }
.capa .verso { transform: rotateY(180deg); background: radial-gradient(ellipse 70% 60% at 60% 30%, var(--couro), var(--couro-escuro)); }
.couro { position: absolute; inset: 0; background: url(/arte/tex_couro.png) repeat; background-size: 96px; }
.guarda { position: absolute; inset: 14px; border-radius: 4px; background: linear-gradient(135deg, #d9c69a, #c4ad7c); box-shadow: inset 0 0 20px rgba(0,0,0,.25); }
.moldura { position: absolute; inset: 16px; border: 3px double var(--ouro); border-radius: 6px; box-shadow: inset 0 0 0 6px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.4); opacity: .9; }
.moldura::before, .moldura::after { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(216,180,90,.55); border-radius: 4px; }
.prego { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 32%, #fff, var(--prata) 30%, #8e959e 65%, #4a5058 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,.7), inset 0 -2px 3px rgba(0,0,0,.4); }
.prego::after { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #7a8088, #2a2e34); }
.p1 { top: 8px; left: 8px; } .p2 { top: 8px; right: 8px; } .p3 { bottom: 8px; left: 8px; } .p4 { bottom: 8px; right: 8px; }
.fecho { position: absolute; right: -6px; top: 46%; width: 30px; height: 44px; border-radius: 6px 4px 4px 6px;
  background: linear-gradient(90deg, #9a7a30, var(--ouro) 40%, #b8923a 70%, #6a5020); box-shadow: 0 3px 6px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.4); }
.fecho::after { content: ''; position: absolute; left: 9px; top: 15px; width: 10px; height: 14px; border-radius: 3px; background: #3a2a10; box-shadow: inset 0 1px 2px rgba(0,0,0,.8); }
.titulo-capa { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; color: var(--ouro); }
.titulo-capa h1 { font-family: var(--titulo); font-weight: 400; font-size: clamp(26px, 7.5vw, 40px); line-height: 1.05; letter-spacing: 2px; margin: 14px 0 8px;
  text-shadow: 0 1px 0 #f6e4a0, 0 -1px 0 #5a3c10, 0 3px 6px rgba(0,0,0,.7); }
.titulo-capa h1 span { font-size: 1.45em; display: block; color: #f0d070; }
.titulo-capa p { font-family: var(--serif); font-style: italic; font-size: 18px; margin: 0; color: #e8cf8a; text-shadow: 0 2px 3px rgba(0,0,0,.6); }
.titulo-capa small { margin-top: 8px; font-family: var(--pix); font-size: 12px; letter-spacing: 1px; color: #d9b36a; opacity: .85; }
.brasao { width: 86px; height: 98px; image-rendering: pixelated; filter: drop-shadow(0 3px 4px rgba(0,0,0,.7)); }
.brasao canvas { width: 100%; height: 100%; image-rendering: pixelated; }

/* ----- tipografia das páginas */
h2 { font-family: var(--titulo); font-weight: 400; font-size: 26px; margin: 0 0 4px; color: var(--vermelho); letter-spacing: 1px; }
h3 { font-family: var(--titulo); font-weight: 400; font-size: 17px; margin: 18px 0 6px; color: var(--tinta); border-bottom: 1px solid rgba(42,28,18,.3); padding-bottom: 3px; }
.sub { font-style: italic; color: var(--tinta-fraca); font-size: 14px; margin: 0 0 10px; }
.capitular::first-letter { font-family: var(--titulo); font-size: 2.6em; float: left; line-height: .85; margin: 4px 6px 0 0; color: var(--vermelho); }
.ig { color: #3a5a8a; text-decoration: none; font-family: var(--pix); font-size: 14px; }
.nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; padding-top: 10px; border-top: 1px solid rgba(42,28,18,.3); font-family: var(--pix); font-size: 14px; }
.nav a, .nav button { color: var(--vermelho); background: none; border: 0; font-family: var(--pix); font-size: 14px; cursor: pointer; padding: 6px 0; text-decoration: none; }
.carregando { font-style: italic; color: var(--tinta-fraca); text-align: center; margin-top: 40%; }

/* sumário */
.indice { list-style: none; margin: 0; padding: 0; }
.indice li { display: flex; align-items: center; gap: 8px; padding: 5px 0; cursor: pointer; border-bottom: 1px dotted rgba(42,28,18,.25); }
.indice li:active { background: rgba(138,30,34,.08); }
.indice canvas { width: 26px; height: 30px; image-rendering: pixelated; flex: none; }
.indice .nome { font-family: var(--titulo); font-size: 16px; color: var(--tinta); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.indice .nome small { font-family: var(--serif); font-style: italic; color: var(--tinta-fraca); font-size: 12px; margin-left: 6px; }
.indice .pg { font-family: var(--pix); font-size: 13px; color: var(--tinta-fraca); flex: none; }
.indice li.em-breve .nome { color: var(--tinta-fraca); }
.resumo-reino { font-family: var(--pix); font-size: 13px; color: var(--tinta-fraca); margin: 0 0 8px; }

/* página do morador */
.retrato { float: right; width: 42%; max-width: 190px; margin: 0 0 10px 12px; aspect-ratio: 3 / 4; border: 4px solid #b8923a; outline: 2px solid #5a3c10; box-shadow: 0 4px 10px rgba(0,0,0,.35), inset 0 0 20px rgba(0,0,0,.25);
  background: radial-gradient(ellipse at 50% 35%, #4a3a30, #2a2024 70%); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.retrato img, .retrato canvas { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.ficha { font-size: 15px; }
.ficha b { font-family: var(--titulo); font-weight: 400; color: var(--vermelho); }
.cap { margin: 8px 0; }
.cap .quando { font-family: var(--pix); font-size: 12px; color: var(--tinta-fraca); }
.sug { margin: 6px 0; padding: 8px 10px; border-left: 3px solid var(--ouro-escuro); background: rgba(0,0,0,.04); font-size: 14px; }
.sug .status { font-family: var(--pix); font-size: 12px; color: var(--vermelho); }
form.sugestao { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
form.sugestao input, form.sugestao textarea { font-family: var(--serif); font-size: 15px; padding: 8px 10px; border: 1px solid #a88a5a; background: rgba(255,255,255,.35); color: var(--tinta); border-radius: 2px; }
form.sugestao textarea { min-height: 84px; resize: vertical; }
form.sugestao button { align-self: flex-start; font-family: var(--pix); font-size: 15px; color: #fff3d0; background: var(--vermelho); border: 2px solid #4a0c0e; padding: 8px 14px; box-shadow: 2px 2px 0 #2a0607; cursor: pointer; }
form.sugestao button:disabled { opacity: .6; }
.aviso { font-family: var(--pix); font-size: 13px; color: var(--vermelho); }

#rodape { margin-top: 26px; font-family: var(--pix); font-size: 13px; color: #b89e72; text-align: center; opacity: 0; transition: opacity 1s 1.6s; }
#rodape a { color: var(--ouro); }
#mesa.pronto #rodape { opacity: 1; }

@media (min-width: 900px) { #livro { width: 520px; } .conteudo { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { .capa, .folha, #livro { transition: none; } }