/* Biblioteca de Magia (/livros/magia.html) e o leitor dos livros dela (/livros/grimorio.html).
   Carrega depois de /biblioteca/livro.css e /livros/livros.css. A capa é a mesma para todos os livros; só a cor (--c) muda. */

/* ----------------------------------------------------------------------------- a sala */
body.sala-magia { background:
  radial-gradient(ellipse 70% 50% at 50% 18%, rgba(120,70,190,.22), transparent 70%),
  radial-gradient(ellipse 75% 65% at 50% 45%, transparent 55%, rgba(0,0,0,.45)),
  linear-gradient(rgba(0,0,0,.42), rgba(0,0,0,.42)),
  url(/arte/tex_mesa.jpg) center / 1200px auto repeat, #2a170d; background-attachment: fixed; color: var(--papel); }
.sala { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: 26px 14px 34px; }
.sala header { text-align: center; max-width: 560px; }
.sala .sigilo-g { width: 64px; height: 64px; margin: 0 auto 2px; filter: drop-shadow(0 0 10px rgba(255,90,90,.35)) drop-shadow(0 3px 4px rgba(0,0,0,.7)); }
.sigilo-g canvas, .tomo-runa canvas { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.sala h1 { font-family: var(--titulo); font-weight: 400; font-size: clamp(30px, 8vw, 44px); margin: 4px 0 6px; color: #f0d070; letter-spacing: 1px;
  text-shadow: 0 1px 0 #f6e4a0, 0 -1px 0 #5a3c10, 0 3px 8px rgba(0,0,0,.8); }
.sala header p { margin: 0; font-style: italic; font-size: 17px; color: #e8cf8a; text-shadow: 0 2px 3px rgba(0,0,0,.7); }
.autor-barra { margin: 14px 0 0; font-family: var(--pix); font-size: 13px; color: #e8d6a8; text-align: center; text-shadow: 0 1px 2px #000; }
.autor-barra b { font-family: var(--titulo); font-weight: 400; font-size: 15px; color: #f0d070; }
.autor-barra button { background: none; border: 0; padding: 0; font: inherit; color: var(--ouro); text-decoration: underline; cursor: pointer; }

/* a nota de papel (estante vazia, "deseja criar um novo livro?") */
.nota-papel { position: relative; margin: 22px 0 0; padding: 18px 18px 14px; width: min(100%, 420px); text-align: center; color: var(--tinta);
  background: var(--papel); border: 3px solid var(--ouro-escuro); box-shadow: 0 4px 0 #2a0607, 0 10px 22px rgba(0,0,0,.55); font-size: 16px; }
.nota-papel .textura { opacity: .7; }
.nota-papel p { position: relative; margin: 0 0 10px; }
.nota-papel h2 { position: relative; font-size: 22px; }
.nota-papel .botoes { position: relative; justify-content: center; margin: 4px 0 0; }

/* ----------------------------------------------------------------------------- as prateleiras */
.estante-magia { display: grid; grid-template-columns: repeat(2, minmax(0, 170px)); row-gap: 30px; margin: 28px 0 0; width: min(100%, 360px); justify-content: center; }
@media (min-width: 560px) { .estante-magia { grid-template-columns: repeat(3, 170px); width: auto; } }
@media (min-width: 860px) { .estante-magia { grid-template-columns: repeat(4, 180px); } }
@media (min-width: 1080px) { .estante-magia { grid-template-columns: repeat(5, 180px); } }
.estante-magia .vaga { --alt: 214px; position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 10px; }
@media (max-width: 380px) { .estante-magia .vaga { --alt: 190px; } }
.estante-magia .vaga::after { content: ''; position: absolute; left: 0; right: 0; top: calc(var(--alt) - 2px); height: 16px;
  background: linear-gradient(#8a5a34, #6b4428 35%, #4a2c18); box-shadow: 0 6px 10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,220,170,.3); }
.legenda { position: relative; z-index: 1; margin: 24px 0 0; max-width: 160px; text-align: center; font-family: var(--pix); font-size: 12px; line-height: 1.3; color: #d8c49a; text-shadow: 0 2px 3px rgba(0,0,0,.8); }
.legenda .rasc { color: #f0b070; }

/* ----------------------------------------------------------------------------- o livro (capa padrão, cor sorteada) */
.tomo { --c: #4a2a6a; --c1: color-mix(in srgb, var(--c) 52%, #000); --c3: color-mix(in srgb, var(--c) 72%, #fff 28%);
  position: relative; z-index: 1; display: block; width: 100%; max-width: 150px; height: var(--alt, 214px); padding: 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: center; cursor: pointer; transform-origin: bottom center; outline: none;
  transition: transform .25s cubic-bezier(.3,.7,.3,1.2), filter .25s; }
.tomo:hover, .tomo:focus-visible { transform: translateY(-10px) rotate(-1.2deg); filter: brightness(1.08); }
.tomo.puxado { transform: translateY(-26px) scale(1.06); transition-duration: .35s; }
.tomo-capa { position: absolute; inset: 0; border-radius: 3px 9px 9px 3px; overflow: hidden;
  background: radial-gradient(ellipse 80% 60% at 40% 30%, var(--c3), var(--c) 55%, var(--c1));
  box-shadow: 0 14px 22px rgba(0,0,0,.65), inset 0 0 28px rgba(0,0,0,.45), inset 2px 2px 0 rgba(255,255,255,.14); }
.tomo-capa::before { content: ''; position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: 13px; background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.1) 70%, rgba(255,255,255,.08)); }
.tomo-capa .couro { position: absolute; inset: 0; background: url(/arte/tex_couro.png) repeat; background-size: 80px; opacity: .9; }
.tomo-capa .moldura { position: absolute; inset: 9px 8px 9px 19px; border: 2px double var(--ouro); border-radius: 4px; opacity: .9; box-shadow: none; }
.tomo-capa .moldura::before, .tomo-capa .moldura::after { display: none; }
.tomo-capa .canto { position: absolute; width: 12px; height: 12px; border: 2px solid var(--ouro); background: radial-gradient(circle, #f6d860 0 2px, transparent 3px); opacity: .95; }
.tomo-capa .k1 { top: 6px; left: 16px; border-right: 0; border-bottom: 0; } .tomo-capa .k2 { top: 6px; right: 5px; border-left: 0; border-bottom: 0; }
.tomo-capa .k3 { bottom: 6px; left: 16px; border-right: 0; border-top: 0; } .tomo-capa .k4 { bottom: 6px; right: 5px; border-left: 0; border-top: 0; }
.tomo-miolo { position: absolute; inset: 14px 12px 14px 23px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 6px 2px; gap: 4px; }
.tomo-num { font-family: var(--titulo); font-size: 22px; letter-spacing: 2px; color: #f0d070; line-height: 1;
  text-shadow: 0 1px 0 #f6e4a0, 0 -1px 0 #4a3010, 0 2px 5px rgba(0,0,0,.8); }
.tomo-num::before, .tomo-num::after { content: '✦'; font-size: 10px; vertical-align: 5px; margin: 0 5px; color: #d8b45a; }
.tomo-runa { width: 40px; height: 40px; flex: none; filter: drop-shadow(0 0 6px rgba(255,90,90,.35)) drop-shadow(0 2px 3px rgba(0,0,0,.7)); }
.tomo-titulo { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 0; overflow: hidden;
  font-family: var(--titulo); font-weight: 400; font-size: 19px; line-height: 1.1; color: #f0d070; overflow-wrap: anywhere;
  text-shadow: 0 1px 0 #f6e4a0, 0 -1px 0 #4a3010, 0 2px 5px rgba(0,0,0,.8); }
.tomo-titulo.medio { font-size: 16px; } .tomo-titulo.longo { font-size: 13.5px; }
.tomo-titulo.vazio { font-family: var(--serif); font-style: italic; font-size: 14px; color: rgba(240,208,112,.6); }
.tomo-autor { font-family: var(--serif); font-style: italic; font-size: 12px; line-height: 1.15; color: #e8cf8a; text-shadow: 0 1px 2px rgba(0,0,0,.8); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tomo .fecho-e { position: absolute; right: -2px; top: 44%; width: 14px; height: 26px; border-radius: 4px 2px 2px 4px; z-index: 2;
  background: linear-gradient(90deg, #9a7a30, var(--ouro) 40%, #6a5020); box-shadow: 0 2px 4px rgba(0,0,0,.6); }
/* rascunho: fita no canto, só o autor vê */
.tomo.rascunho .tomo-capa { filter: saturate(.7) brightness(.85); }
.tomo.rascunho::after { content: 'rascunho'; position: absolute; z-index: 3; top: 18px; right: -8px; padding: 2px 10px; transform: rotate(32deg);
  font-family: var(--pix); font-size: 11px; color: #2a1c12; background: #f0b070; box-shadow: 0 2px 4px rgba(0,0,0,.6); }
/* a vaga do livro novo */
.tomo.novo .tomo-capa { background: rgba(20,10,6,.35); box-shadow: inset 0 0 0 2px rgba(216,180,90,.55); border: 2px dashed rgba(216,180,90,.7); }
.tomo.novo .tomo-capa::before { display: none; }
.tomo.novo .tomo-miolo { inset: 0; justify-content: center; }
.tomo.novo .mais { font-family: var(--titulo); font-size: 54px; line-height: 1; color: #f0d070; text-shadow: 0 2px 6px #000; }
.tomo.novo .tomo-autor { white-space: normal; font-size: 13px; }

/* ----------------------------------------------------------------------------- a janela de escrever o livro */
.janela-caixa.larga { width: min(100%, 580px); }
.ed-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-right: 26px; }
.ed-topo h2 { margin: 0; }
.selo-status { font-family: var(--pix); font-size: 12px; padding: 2px 8px; border: 1px solid; }
.selo-status.rascunho { color: #8a4a10; border-color: #c08a4a; background: rgba(240,176,112,.25); }
.selo-status.publicado { color: #1f5a30; border-color: #4a8a5a; background: rgba(120,200,140,.2); }
.ed-capa { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 12px 0 16px; }
.ed-capa .tomo { --alt: 270px; max-width: 192px; cursor: default; }
.ed-capa .tomo:hover { transform: none; filter: none; }
.ed-capa .tomo-runa { width: 48px; height: 48px; }
.ed-capa .tomo-num { font-size: 26px; }
textarea.titulo-na-capa { flex: none; width: 100%; max-height: 150px; resize: none; overflow: hidden; padding: 4px 2px; margin: 0; text-align: center;
  font-family: var(--titulo); font-size: 20px; line-height: 1.12; color: #f0d070; background: rgba(0,0,0,.12); border: 1px dashed rgba(216,180,90,.55); border-radius: 3px;
  text-shadow: 0 1px 0 #6a4a10, 0 2px 4px rgba(0,0,0,.8); outline: none; }
textarea.titulo-na-capa.medio { font-size: 17px; } textarea.titulo-na-capa.longo { font-size: 14.5px; }
textarea.titulo-na-capa::placeholder { font-family: var(--serif); font-style: italic; font-size: 15px; color: rgba(240,208,112,.65); }
textarea.titulo-na-capa:focus { border-style: solid; background: rgba(0,0,0,.2); }
.ed-capa .regras { margin: 0; text-align: center; }
.caps-ed { display: flex; flex-direction: column; gap: 14px; margin: 6px 0 10px; }
.cap-ed { position: relative; padding: 10px 10px 8px; background: rgba(255,255,255,.22); border: 1px solid rgba(138,106,42,.45); border-left: 4px solid var(--ouro-escuro); }
.cap-ed .cab { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; }
.cap-ed .cab b { flex: 1; font-family: var(--titulo); font-weight: 400; font-size: 17px; color: var(--vermelho); }
.cap-ed .cab button { background: none; border: 1px solid rgba(106,84,56,.45); border-radius: 2px; padding: 2px 8px; font-family: var(--pix); font-size: 13px; color: var(--tinta-fraca); cursor: pointer; }
.cap-ed .cab button:disabled { opacity: .35; cursor: default; }
.cap-ed .cab button.certeza { color: #fff3d0; background: var(--vermelho); border-color: #4a0c0e; }
.cap-ed .campo { font-size: 16px; }
.cap-ed input.campo { margin-bottom: 6px; font-family: var(--titulo); }
.cap-ed textarea.campo { min-height: 170px; }
.cap-ed .regras { margin: 4px 0 0; }
.ed-pe { position: sticky; bottom: 0; margin: 10px -20px -20px; padding: 10px 20px 14px; background: linear-gradient(rgba(233,217,176,.6), var(--papel) 30%); border-top: 1px solid rgba(138,106,42,.4); }
.ed-pe .botoes { margin: 6px 0 4px; }
.ed-pe .aviso { margin: 0; }
.ed-pe .aviso.bom { color: #2a6a3a; }
.ed-mais { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 0; }

/* ----------------------------------------------------------------------------- o leitor (/livros/grimorio.html) */
body.couro-tomo { --couro: var(--c, #4a2a6a); --couro-escuro: color-mix(in srgb, var(--couro) 50%, #000); --couro-claro: color-mix(in srgb, var(--couro) 76%, #fff 24%); }
body.couro-tomo .lombada { background: linear-gradient(90deg, color-mix(in srgb, var(--couro) 25%, #000), var(--couro-escuro) 40%, var(--couro) 70%, color-mix(in srgb, var(--couro) 70%, #000)); }
body.couro-tomo .capa .frente { 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,255,255,.18); }
.numeral-capa { font-family: var(--titulo); font-size: 34px; letter-spacing: 3px; color: #f0d070; text-shadow: 0 1px 0 #f6e4a0, 0 -1px 0 #4a3010, 0 3px 6px rgba(0,0,0,.7); }
.numeral-capa::before, .numeral-capa::after { content: '✦'; font-size: 14px; vertical-align: 8px; margin: 0 8px; color: #d8b45a; }
.titulo-capa .sigilo-capa { width: 72px; height: 72px; margin-top: 10px; filter: drop-shadow(0 0 10px rgba(255,90,90,.35)) drop-shadow(0 3px 4px rgba(0,0,0,.7)); }
.titulo-capa .sigilo-capa canvas { width: 100%; height: 100%; image-rendering: pixelated; }
.titulo-capa h1.tit-tomo { font-size: clamp(24px, 7vw, 36px); letter-spacing: 1px; overflow-wrap: anywhere; }
.titulo-capa h1.tit-tomo.medio { font-size: clamp(20px, 5.6vw, 29px); }
.titulo-capa h1.tit-tomo.longo { font-size: clamp(17px, 4.6vw, 23px); }
.fim-livro { margin: 18px 0 0; text-align: center; font-family: var(--titulo); font-size: 16px; color: var(--tinta-fraca); }
.rascunho-aviso { font-family: var(--pix); font-size: 12px; color: #8a4a10; background: rgba(240,176,112,.25); border: 1px solid #c08a4a; padding: 4px 8px; margin: 0 0 10px; }
@media (max-width: 480px) { .ed-pe .botao { font-size: 13px; padding: 7px 10px; } .ed-pe .botoes { gap: 8px; } }

/* ----- Biblioteca do Reino (08/11/2026): estantes por nicho, emblema na capa, comentários ----- */
.tomo-emblema { width: 40px; height: 40px; flex: none; display: grid; place-items: center; font-size: 22px; line-height: 1;
  border-radius: 50%; border: 2px solid var(--ouro); background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--nc) 70%, #fff 20%), var(--nc) 60%, color-mix(in srgb, var(--nc) 60%, #000));
  box-shadow: 0 0 0 2px rgba(0,0,0,.35), 0 2px 5px rgba(0,0,0,.7), inset 0 0 6px rgba(0,0,0,.4); }
.nichos { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 8px; margin: 18px 0 0; width: min(100%, 980px); scrollbar-width: none; }
.nichos::-webkit-scrollbar { display: none; }
.nichos button { flex: none; font-family: var(--pix); font-size: 13px; color: #e8d6a8; background: rgba(20,10,6,.55); border: 1px solid rgba(216,180,90,.45);
  border-radius: 999px; padding: 7px 12px; cursor: pointer; white-space: nowrap; }
.nichos button.sim { background: linear-gradient(#6a4a20, #3a2a12); color: #fbe6b4; border-color: var(--ouro); }
.nichos button small { opacity: .7; margin-left: 4px; }
.prateleira { width: min(100%, 980px); margin: 26px 0 0; display: flex; flex-direction: column; align-items: center; }
.prateleira > h2 { align-self: stretch; margin: 0 0 4px; padding: 6px 12px; font-family: var(--titulo); font-weight: 400; font-size: 21px; color: #f0d070;
  background: linear-gradient(90deg, transparent, rgba(60,30,12,.75) 15%, rgba(60,30,12,.75) 85%, transparent); text-align: center; text-shadow: 0 2px 4px #000; }
.prateleira > h2 small { font-family: var(--pix); font-size: 12px; color: #d8c49a; margin-left: 6px; }
.prateleira .estante-magia { margin-top: 12px; }
.leg-num { white-space: nowrap; }
/* comentários e "quem leu" no leitor */
#b-conversa { position: fixed; right: 14px; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); z-index: 30; display: flex; gap: 8px; }
#b-conversa button { font-family: var(--pix); font-size: 14px; color: #fbe6b4; background: linear-gradient(#5a3a1a, #2a1a0c); border: 1px solid var(--ouro);
  border-radius: 999px; padding: 9px 14px; box-shadow: 0 4px 14px rgba(0,0,0,.6); cursor: pointer; }
#conversa { position: fixed; inset: 0; z-index: 40; background: rgba(8,4,2,.6); display: flex; align-items: flex-end; justify-content: center; }
#conversa.oculto { display: none; }
#conversa .folha-c { position: relative; width: min(560px, 100vw); max-height: 86vh; overflow-y: auto; border-radius: 14px 14px 0 0; padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 18px);
  background: radial-gradient(130% 100% at 50% 0%, #f2e4bf 0%, #e3cf9f 70%, #cdb88a 100%); color: #2a1c12; box-shadow: 0 -10px 30px rgba(0,0,0,.6); }
#conversa h2 { font-family: var(--titulo); font-weight: 400; color: #8a1e22; margin: 0 0 6px; font-size: 22px; }
#conversa h3 { font-family: var(--titulo); font-weight: 400; color: #8a1e22; margin: 16px 0 6px; font-size: 18px; }
#conversa .x { position: absolute; right: 10px; top: 6px; background: none; border: 0; font-size: 28px; color: #6a5438; cursor: pointer; }
#conversa .com { padding: 10px 0; border-bottom: 1px solid rgba(42,28,18,.18); }
#conversa .com:last-child { border-bottom: 0; }
#conversa .com .quem { font-family: var(--pix); font-size: 13px; color: #6a5438; }
#conversa .com .quem b { color: #2a1c12; font-family: var(--serif); font-size: 15px; }
#conversa .com p { margin: 4px 0 0; font-family: var(--serif); font-size: 16px; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; }
#conversa .com .tira { background: none; border: 0; color: #8a1e22; font-family: var(--pix); font-size: 12px; cursor: pointer; padding: 0; margin-left: 6px; }
#conversa textarea { width: 100%; min-height: 84px; box-sizing: border-box; font-family: var(--serif); font-size: 16px; padding: 10px; border: 1px solid #8a6a2a; border-radius: 6px; background: #fbf3dc; color: #2a1c12; }
#conversa .enviar { margin-top: 8px; width: 100%; font-family: var(--pix); font-size: 16px; padding: 11px; border: 0; border-radius: 6px; background: #8a1e22; color: #fbefd0; cursor: pointer; }
#conversa .enviar:disabled { opacity: .5; }
#conversa .leitor { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed rgba(42,28,18,.18); font-family: var(--serif); font-size: 15px; }
#conversa .leitor small { font-family: var(--pix); font-size: 12px; color: #6a5438; white-space: nowrap; }
#conversa .vazio { font-family: var(--serif); font-style: italic; color: #6a5438; }
#conversa .aviso-c { color: #8a1e22; font-family: var(--pix); font-size: 13px; min-height: 1em; margin: 6px 0 0; }