: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); }
/* a mesa: madeira vista de cima, escurecida 30% (mais uma vinheta leve nas bordas) */
body { background:
  radial-gradient(ellipse 75% 65% at 50% 45%, transparent 55%, rgba(0,0,0,.35)),
  linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)),
  url(/arte/tex_mesa.jpg) center / 1200px auto repeat, #2a170d; background-attachment: fixed; }
body.travado { overflow: hidden; }
#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; 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; }
.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 { z-index: 1; }
.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 16px 26px; overflow: hidden; font-size: 15px; line-height: 1.38; }
.medidor { visibility: hidden; pointer-events: none; padding-bottom: 66px; }
.conteudo::-webkit-scrollbar { width: 6px; } .conteudo::-webkit-scrollbar-thumb { background: #b89e72; border-radius: 3px; }

/* folha que vira */
.folha { position: absolute; inset: 0; z-index: 2; 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: rotateY(0); }
.folha.virando { opacity: 1; transform: 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: rotateY(0); }
#livro.aberto .capa { transform: rotateY(-178deg); }
/* depois de aberta, a capa vira um elemento plano (o Safari some com o texto da página se houver 3D por perto) */
#livro.plano .capa { transform: none; left: auto; right: 100%; width: 100%; -webkit-transform-style: flat; transform-style: flat; }
#livro.plano .capa .frente { display: none; }
#livro.plano .capa .verso { transform: none; }
.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; }
.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; } }
.busca { width: 100%; margin: 4px 0 10px; font-family: var(--serif); font-size: 16px; padding: 8px 10px; border: 1px solid #a88a5a; background: rgba(255,255,255,.35); color: var(--tinta); border-radius: 2px; }
.nav.setas { align-items: center; }
.nav.setas button[aria-label] { font-size: 22px; padding: 4px 14px; }
.nav { position: absolute; left: 26px; right: 20px; bottom: 12px; margin: 0; }
.nav .num { font-family: var(--pix); font-size: 12px; color: var(--tinta-fraca); }
.cont { font-family: var(--pix); font-size: 12px; color: var(--tinta-fraca); margin: 0 0 6px; }
.ficha.nota { font-size: 13px; color: var(--tinta-fraca); }
.cap .t { font-family: var(--titulo); font-weight: 400; color: var(--vermelho); }
.indice li .mini { width: 26px; height: 30px; flex: none; }
.indice li .mini canvas { width: 26px; height: 30px; image-rendering: pixelated; }
.oculto { display: none !important; }
#busca-caixa { position: relative; width: min(92vw, 480px); margin-top: 22px; opacity: 0; transition: opacity .8s 1.4s; }
#mesa.pronto #busca-caixa { opacity: 1; }
#busca { width: 100%; font-family: var(--serif); font-size: 17px; padding: 12px 14px; color: var(--tinta); background: var(--papel); border: 3px solid var(--ouro-escuro); border-radius: 3px; box-shadow: 0 4px 0 #2a0607, 0 8px 20px rgba(0,0,0,.6); outline: none; }
#busca::placeholder { color: var(--tinta-fraca); font-style: italic; }
#busca-lista { list-style: none; margin: 6px 0 0; padding: 4px 0; background: var(--papel); border: 3px solid var(--ouro-escuro); border-radius: 3px; box-shadow: 0 8px 20px rgba(0,0,0,.6); max-height: 50vh; overflow: auto; }
#busca-lista li { display: flex; align-items: center; gap: 10px; padding: 7px 12px; cursor: pointer; border-bottom: 1px dotted rgba(42,28,18,.25); color: var(--tinta); }
#busca-lista li .nome { font-family: var(--titulo); flex: 1; }
#busca-lista li .mini canvas { width: 24px; height: 28px; image-rendering: pixelated; }
#busca-lista li.nada { font-style: italic; color: var(--tinta-fraca); cursor: default; }
#rodape { margin-top: 14px; }

/* ----- a mesa: pergaminho que pede o @ */
#entrada { width: min(92vw, 400px); }
.pergaminho { position: relative; padding: 30px 26px 26px; text-align: center; color: var(--tinta); border-radius: 3px;
  background: radial-gradient(ellipse 70% 50% at 40% 25%, rgba(255,255,255,.2), transparent 60%), linear-gradient(90deg, #d8c393, var(--papel) 8%, var(--papel) 92%, #d8c393);
  box-shadow: 0 2px 0 #b89e72, 0 22px 50px rgba(0,0,0,.65); animation: assenta .7s cubic-bezier(.3,.1,.2,1) both; }
.pergaminho > *:not(.textura) { position: relative; }
.selo { width: 58px; height: 66px; margin: -4px auto 6px; image-rendering: pixelated; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.selo canvas { width: 100%; height: 100%; image-rendering: pixelated; }
.pergaminho h1 { font-family: var(--titulo); font-weight: 400; font-size: 30px; letter-spacing: 1px; color: var(--vermelho); margin: 0 0 16px; }
.anuncio { font-family: var(--titulo); font-size: 22px; color: var(--vermelho); margin: 4px 0 6px; }
@keyframes assenta { from { opacity: 0; transform: translateY(14px) rotate(-1.5deg); } to { opacity: 1; transform: none; } }

.form { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.form label { font-family: var(--titulo); color: var(--vermelho); font-size: 16px; margin-top: 4px; }
.form input:not([type=file]), .form textarea { width: 100%; font-family: var(--serif); font-size: 17px; line-height: 1.35; padding: 9px 11px; color: var(--tinta);
  background: rgba(255,255,255,.42); border: 1px solid #a88a5a; border-radius: 2px; outline: none; }
.form textarea { resize: vertical; }
.form input:focus-visible, .form textarea:focus-visible { border-color: var(--vermelho); box-shadow: 0 0 0 2px rgba(138,30,34,.25); }
.arroba { display: flex; align-items: stretch; }
.arroba span { display: flex; align-items: center; font-family: var(--pix); font-size: 18px; color: var(--tinta-fraca); padding: 0 2px 0 10px; background: rgba(255,255,255,.42); border: 1px solid #a88a5a; border-right: 0; }
.arroba input { border-left: 0 !important; padding-left: 2px !important; }
.form .botao { margin-top: 6px; }
.form .aviso:empty { display: none; }
.form button.link, button.link { align-self: center; background: none; border: 0; padding: 6px 0; font-family: var(--pix); font-size: 13px; color: var(--tinta-fraca); cursor: pointer; text-decoration: underline; }
.pergaminho .sub a { color: #3a5a8a; }
.botao:focus-visible, button.link:focus-visible, #rodape button:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }

#rodape button { background: none; border: 0; padding: 0; font: inherit; color: var(--ouro); text-decoration: underline; cursor: pointer; }

/* ----- página do morador */
.editar-link { margin: 8px 0 0; }
.editar-link .botao { font-size: 14px; padding: 6px 12px; }
.fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0; }
.fotos a { display: block; aspect-ratio: 4 / 3; overflow: hidden; border: 3px solid #b8923a; outline: 1px solid #5a3c10; background: #2a2024; }
.fotos img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ----- janela de edição */
#janela { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 14px; }
.janela-fundo { position: absolute; inset: 0; background: rgba(10,5,3,.74); }
.janela-caixa { position: relative; width: min(100%, 520px); max-height: calc(100dvh - 28px); overflow: auto; overscroll-behavior: contain; padding: 24px 20px 20px; color: var(--tinta);
  background: var(--papel); border: 3px solid var(--ouro-escuro); border-radius: 3px; box-shadow: 0 4px 0 #2a0607, 0 16px 40px rgba(0,0,0,.7); font-size: 15px; line-height: 1.4; }
#janela-corpo { position: relative; }
.janela-x { position: absolute; top: 4px; right: 8px; z-index: 1; background: none; border: 0; font-size: 28px; line-height: 1; padding: 4px 8px; color: var(--tinta-fraca); cursor: pointer; }
.regras { font-family: var(--pix); font-size: 12px; color: var(--tinta-fraca); margin: 0; }
/* contador de letras embaixo dos campos do livro (08/11/2026) */
.conta-letras { text-align: right; margin: -2px 0 6px; }
.conta-letras.cheio { color: var(--vermelho); }
.botao { display: inline-block; 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; text-decoration: none; }
.botao:disabled { opacity: .6; cursor: wait; }
.botao.claro { color: var(--tinta); background: var(--ouro); border-color: var(--ouro-escuro); }
.botoes { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 4px; }
.fotos-editor { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 4px 0 10px; }
.fotos-editor figure { position: relative; margin: 0; aspect-ratio: 1; border: 2px solid #b8923a; background: #2a2024; overflow: hidden; }
.fotos-editor img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fotos-editor button { position: absolute; top: 3px; right: 3px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(20,10,6,.8); color: #fff3d0; font-size: 18px; line-height: 1; cursor: pointer; }
.subir { cursor: pointer; margin-bottom: 4px; }
#janela .aviso:empty { display: none; }

@media (prefers-reduced-motion: reduce) { .pergaminho { animation: none; } }

/* ----- 06/11/2026: a entrada mora na primeira página do livro (capa → @ → abre ou cadastro) */
#livro.fechado .capa { cursor: pointer; }
.capa:focus-visible { outline: 3px solid var(--ouro); outline-offset: 4px; }
#dica { margin: 22px 0 0; font-family: var(--pix); font-size: 14px; letter-spacing: .5px; color: #e8cf8a; text-shadow: 0 2px 3px rgba(0,0,0,.7); animation: pisca 2.4s ease-in-out infinite; }
#mesa.pronto #dica { display: none; }
@keyframes pisca { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
#livro.fechado .fecho { animation: brilha 2.4s ease-in-out infinite; }
@keyframes brilha { 0%, 100% { filter: none; } 50% { filter: brightness(1.35) drop-shadow(0 0 6px rgba(246,216,96,.6)); } }

/* páginas da entrada são formulários: podem rolar dentro da folha */
.conteudo.rola { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: 20px; }
.entrada-pg { min-height: 100%; display: flex; flex-direction: column; justify-content: center; }
.entrada-pg .centro { text-align: center; }
.entrada-pg .selo-pg { width: 52px; height: 60px; margin: 0 auto 6px; image-rendering: pixelated; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
.entrada-pg .selo-pg canvas { width: 100%; height: 100%; image-rendering: pixelated; }
.entrada-pg .anuncio { margin-top: 0; }
.entrada-pg .form label { font-size: 15px; }
.entrada-pg .form input:not([type=file]), .entrada-pg .form textarea { font-size: 16px; padding: 8px 10px; }
.entrada-pg .ficha { margin: 6px 0; }
.passo { font-family: var(--pix); font-size: 12px; color: var(--tinta-fraca); margin: 0 0 2px; }
.nav-entrada { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; }
.nav-entrada .botao { margin-top: 0; align-self: auto; }
.nav-entrada .link:disabled { opacity: .4; }
.isca { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#rodape #sair-caixa { white-space: nowrap; }

/* morador ainda sem retrato em pixel art (cadastrou-se pelo livro) */
.retrato.vazio { align-items: center; justify-content: center; text-align: center; }
.retrato.vazio span { font-family: var(--pix); font-size: 11px; line-height: 1.35; color: #d9c69a; padding: 10px; }
.ficha.fraquezas b { font-family: var(--titulo); font-weight: 400; color: var(--vermelho); }

/* trava de edição: 30 min para terminar, 3 dias até a próxima */
.trava { font-size: 14px; line-height: 1.35; margin: 6px 0 10px; padding: 8px 10px; border-left: 3px solid var(--vermelho); background: rgba(138,30,34,.07); color: var(--tinta); }
.trava b { font-family: var(--titulo); font-weight: 400; color: var(--vermelho); }
.botao.trancado, .botao:disabled.trancado { opacity: .55; cursor: not-allowed; }
.editar-link + .regras { margin-top: 4px; }
label.botao.trancado { pointer-events: none; }

/* ----- 06/11/2026 (tarde): retratos em folhas, aviso flutuante, foto por cima do botão, navegador do Instagram */
.foto-pg { margin: 6px 0 0; }
.foto-pg a { display: block; width: 100%; aspect-ratio: 4 / 5; max-height: 330px; border: 4px solid #b8923a; outline: 2px solid #5a3c10; background: #2a2024;
  box-shadow: 0 4px 10px rgba(0,0,0,.35); overflow: hidden; }
.foto-pg img { width: 100%; height: 100%; object-fit: contain; display: block; }
.foto-pg figcaption { font-family: var(--pix); font-size: 12px; color: var(--tinta-fraca); text-align: center; margin-top: 6px; }
.ir-retratos { margin: 4px 0 0; }
.ir-retratos .link { padding: 4px 0; font-size: 13px; color: var(--vermelho); }
.subir { position: relative; overflow: hidden; }
.subir input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 100px; }
.subir input[type=file]:disabled { cursor: not-allowed; }
.recuperado { font-size: 14px; margin: 4px 0 10px; padding: 8px 10px; border-left: 3px solid var(--ouro-escuro); background: rgba(216,180,90,.18); }
.recuperado .link { display: inline; padding: 0; font-size: 12px; }
.app-aviso { margin: 12px 0 4px; padding: 10px 12px; border: 2px dashed var(--ouro-escuro); background: rgba(216,180,90,.15); font-size: 14px; }
.app-aviso p { margin: 0 0 8px; }
.toast { position: fixed; left: 50%; bottom: 26px; z-index: 30; transform: translate(-50%, 30px); opacity: 0; pointer-events: none;
  font-family: var(--pix); font-size: 16px; color: #fff3d0; background: #1e140e; border: 2px solid var(--ouro); padding: 10px 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.6); transition: opacity .25s, transform .25s; white-space: nowrap; }
.toast.mostra { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 900px) { .foto-pg a { max-height: 470px; } }
.campo-livre { margin-top: 16px; }
/* a folha de retrato nunca passa da altura da página (celulares baixos) */
.pagina { container-type: size; }
@supports (height: 1cqh) {
  .foto-pg a { max-height: min(330px, calc(100cqh - 180px)); }
  @media (min-width: 900px) { .foto-pg a { max-height: min(470px, calc(100cqh - 180px)); } }
}
/* aprovação da Coroa (07/11/2026): quem já tem página mas ainda espera o rei */
#aviso-coroa { margin: 16px auto 0; max-width: 520px; padding: 10px 14px; border-radius: 8px; background: #2a1810; border: 1px solid var(--ouro-escuro);
  color: #f0d8a8; font-family: var(--pix); font-size: 13px; line-height: 1.4; text-align: center; }