/* Página inicial: a vila de Bigorna ocupa a tela inteira; marca + HUD no topo, hotbar e chat flutuando no rodapé.
   Página autônoma de propósito: não carrega base.css (nada do codex aparece aqui). */
:root{
  --ink:#17121c; --sea:#14283a; --line:#2c2434; --bone:#ede6d8; --muted:#b3a7bc;
  --verdigris:#3e8c7a; --brass:#a88a4e; --tip-bg:#100a16; --tip-edge:#3b1d6b; --err:#e0715f; --warn:#f0d36a;
  --font-display:'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-mono:'Space Mono', ui-monospace, Consolas, monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden}
body{background:var(--sea);color:var(--bone);font:14px/1.6 var(--font-mono)}
[hidden]{display:none!important}
kbd{font:700 11px var(--font-mono);border:1px solid var(--line);border-bottom-width:2px;padding:0 5px;color:var(--bone);background:#221b29}
button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--verdigris);outline-offset:2px}

/* links reais pro Google e leitores de tela; aparecem na tela só sem JavaScript */
.seo-nav{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.seo-nav h1{font:italic 700 28px/1.2 var(--font-display);margin:0 0 12px}
.seo-nav a{color:var(--bone)}

.stage{position:fixed;inset:0;overflow:hidden;background:var(--sea)}
.stage canvas{display:block;width:100%;height:100%;touch-action:none}
.top{position:absolute;left:0;right:0;top:0;padding:calc(14px + env(safe-area-inset-top,0px)) 16px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;pointer-events:none}
.top > *{pointer-events:auto}
.mark{display:grid;gap:8px;min-width:0}
.brand{font:italic 700 28px/1 var(--font-display);color:var(--bone);text-shadow:0 2px 0 rgba(0,0,0,.45)}
.brand em{color:var(--brass)}
.hud{display:flex;flex-wrap:wrap;gap:6px}
.hud > *{font:12px var(--font-mono);background:rgba(13,10,17,.72);border:1px solid rgba(74,68,82,.7);color:var(--bone);padding:5px 9px}
.hud button{cursor:pointer;color:var(--muted)}
.hud button:hover{color:var(--bone)}
.top-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;margin-left:auto}
.skip,.tbtn{font:700 12px var(--font-mono);border:0;padding:7px 11px;cursor:pointer}
.skip{background:var(--bone);color:var(--ink)}
.skip:hover{background:#fff}
.tbtn{background:rgba(13,10,17,.72);color:var(--bone);border:1px solid rgba(74,68,82,.7)}
.tbtn:hover{border-color:var(--bone)}

/* card = tooltip de item do Minecraft (fundo roxo-escuro, borda roxa) */
.card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(400px,calc(100% - 32px));max-height:calc(100% - 180px);overflow:auto;
  background:var(--tip-bg);border:2px solid var(--tip-edge);outline:2px solid #05020a;padding:16px 18px;display:grid;gap:8px;z-index:5}
@media (min-width:760px){ .card.side{left:auto;right:48px;transform:translateY(-50%)} }
.card .k{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.card h3{font:italic 700 26px/1.1 var(--font-display);margin:0;text-wrap:balance}
.card p{margin:0;color:#d6cbdc}
.card .path{color:var(--brass);font-size:12px}
.card .hint{margin:0;font-size:12px;color:var(--brass)}
.card canvas{display:block;width:100%;height:auto;cursor:pointer;border:1px solid var(--line)}
.card .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.card .acts button,.card .acts a{font:700 12px var(--font-mono);padding:8px 12px;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--bone);text-decoration:none}
.card .acts .pri{background:var(--verdigris);border-color:var(--verdigris);color:#08130f}
.maplist{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.maplist .g{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);padding:8px 0 2px}
.maplist a{display:grid;grid-template-columns:12px 1fr auto;gap:10px;align-items:center;border-bottom:1px solid #21162e;color:var(--bone);padding:7px 2px;font:13px var(--font-mono);text-decoration:none}
.maplist a:hover{background:#1c1226}
.maplist i{width:10px;height:10px;display:block}
.maplist span{color:var(--muted);font-size:11px}

.dpad{position:absolute;right:16px;bottom:calc(104px + env(safe-area-inset-bottom,0px));display:none;grid-template-columns:repeat(3,50px);grid-template-rows:repeat(3,50px);gap:4px;touch-action:none;user-select:none;-webkit-user-select:none;z-index:4}
.dpad button{background:rgba(13,10,17,.75);border:1px solid #4a4452;color:var(--bone);font:700 18px var(--font-mono);padding:0;touch-action:none}
.dpad button.on{background:var(--bone);color:var(--ink)}
.dpad .act{font-size:14px;background:rgba(62,140,122,.85);border-color:var(--verdigris)}
.dpad [data-k="arrowup"]{grid-area:1/2}.dpad [data-k="arrowleft"]{grid-area:2/1}.dpad .act{grid-area:2/2}.dpad [data-k="arrowright"]{grid-area:2/3}.dpad [data-k="arrowdown"]{grid-area:3/2}
@media (hover:none) and (pointer:coarse){ .dpad{display:grid} }

/* hotbar no estilo do jogo */
.dock{position:fixed;left:0;right:0;bottom:0;padding:8px 16px calc(12px + env(safe-area-inset-bottom,0px));display:grid;justify-items:center;gap:6px;pointer-events:none;z-index:20}
.item-name{font:700 13px var(--font-mono);color:var(--bone);text-shadow:2px 2px 0 #000;opacity:0;transition:opacity .5s;min-height:1.3em;text-align:center}
.item-name.show{opacity:1}
.item-name span{color:var(--brass)}
.dock-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:end;gap:8px;pointer-events:auto}
.hotbar{display:flex;background:rgba(10,8,13,.9);border:2px solid #000;outline:2px solid #4a4452;padding:2px;gap:2px}
.slot{width:clamp(32px,9vw,46px);aspect-ratio:1;border:2px solid #2b2731;background:#1b1820;display:grid;place-items:center;position:relative;cursor:pointer;padding:0}
.slot img{width:62%;image-rendering:pixelated}
.slot .n{position:absolute;right:2px;bottom:-1px;font:10px var(--font-mono);color:#8c8296}
.slot.sel{border-color:var(--bone);background:#2a2530}
.slot:hover{background:#26212c}
.chat-btn{font:12px var(--font-mono);background:rgba(10,8,13,.9);border:2px solid #000;outline:2px solid #4a4452;color:var(--muted);padding:6px 9px;cursor:pointer}
.chat-btn:hover{color:var(--bone)}

.chat{position:fixed;left:16px;bottom:calc(96px + env(safe-area-inset-bottom,0px));width:min(520px,calc(100% - 32px));z-index:30;display:grid;gap:2px;pointer-events:none}
.log{display:grid;gap:1px}
.log div{background:rgba(0,0,0,.6);padding:2px 8px;font-size:13px;transition:opacity .8s;overflow-wrap:anywhere}
.log div.old{opacity:0}
.chat.open .log div{opacity:1}
.chat.open{pointer-events:auto}
.log .ok{color:#8fe0c8}.log .err{color:var(--err)}.log .warn{color:var(--warn)}.log .sys{color:#cfc4d6}.log .me{color:var(--bone)}
.sugg{background:rgba(8,6,10,.96);border:1px solid var(--line);display:grid}
.sugg div{padding:3px 8px;color:#9d93a6;display:flex;justify-content:space-between;gap:12px;font-size:13px}
.sugg div.on{color:var(--warn)}
.sugg small{color:#6f6678}
#chatIn{font:14px var(--font-mono);background:rgba(0,0,0,.78);color:var(--bone);border:0;padding:8px;width:100%}
@media (prefers-reduced-motion: reduce){ .item-name,.log div{transition:none} }

/* troca entre páginas animada (View Transitions entre documentos; navegador sem suporte só troca de página) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.3s ease-in both vt-out}
::view-transition-new(root){animation:.55s cubic-bezier(.2,.7,.2,1) both vt-in}
@keyframes vt-in{from{opacity:0;transform:scale(1.035)}}
@keyframes vt-out{to{opacity:0}}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* pesca: peixe/garrafa no card e caderno */
.card .fishimg{width:72px;height:72px;image-rendering:pixelated;display:block;margin:4px 0}
.book{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.book li{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;border-bottom:1px solid #21162e;padding:4px 2px;font-size:13px}
.book img{width:32px;height:32px;image-rendering:pixelated}
.book span{color:var(--muted);font-size:11px}

/* conquistas */
.conq{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.conq li{display:grid;grid-template-columns:18px 1fr;column-gap:8px;border-bottom:1px solid #21162e;padding:5px 2px;color:#6f6678}
.conq li i{font-style:normal;grid-row:span 2;color:#4a4452}
.conq li b{font-size:13px}
.conq li span{font-size:11px}
.conq li.ok{color:var(--bone)}
.conq li.ok i{color:var(--verdigris)}
.conq li.ok span{color:var(--muted)}

/* ranking e registro no ranking */
.rank li i{color:var(--brass)}
.reg{display:grid;gap:6px;margin:4px 0}
.reg label{font-size:12px;color:var(--muted)}
.reg input{font:14px var(--font-mono);background:#07050a;color:var(--bone);border:1px solid var(--line);padding:8px}
/* visitantes ao vivo: contador + emotes no HUD */
#salaHud button{font:11px var(--font-mono);background:transparent;border:1px solid var(--line);color:var(--bone);padding:1px 6px;margin-left:4px;cursor:pointer}
#salaHud button:hover{border-color:var(--bone)}
#tocandoHud{display:inline-flex;align-items:center;gap:4px}
#tocandoHud[hidden]{display:none}
#tocandoHud button{font:13px/1 var(--font-mono);background:transparent;border:1px solid var(--line);color:var(--bone);padding:2px 7px;cursor:pointer}
#tocandoHud button:hover,#tocandoHud button:focus-visible{border-color:var(--bone)}

/* telas estreitas: topo mais compacto */
@media (max-width:600px){
  .brand{font-size:22px}
  .mark{gap:6px}
  .hud > *,.skip,.tbtn{font-size:11px;padding:4px 7px}
}
/* celular (toque): sem dica de teclado, sem botão de chat (não há teclado), log ao lado do direcional */
@media (hover:none) and (pointer:coarse){
  .hud .hint-teclado{display:none}
  .chat-btn{display:none}
  .chat{width:calc(100% - 222px);bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}

/* mural: projetos em blocos clicáveis e novidades agrupadas por dia, com etiqueta colorida */
.projetos{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.proj{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:3px;align-content:start;padding:8px 10px;border:1px solid var(--line);border-left:3px solid var(--c);background:rgba(255,255,255,.02)}
.proj:hover{background:rgba(255,255,255,.06)}
.proj:focus-visible{outline:2px solid var(--c);outline-offset:2px}
.proj b{font-size:12px;color:var(--c)}
.proj span{font-size:11px;line-height:1.35;color:#bdb1c4}
.mural-dia{display:flex;align-items:center;gap:8px;margin:8px 0 4px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--brass)}
.mural-dia::after{content:'';flex:1;height:1px;background:var(--line)}
.notas{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.nota{border-left:3px solid var(--c);padding:6px 10px;background:rgba(255,255,255,.03);font-size:13px;line-height:1.4;color:var(--bone)}
.nota .tag{display:flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--c);margin-bottom:2px}
.nota .tag em{font-style:normal;background:#f0c43c;color:#17121c;padding:0 5px;letter-spacing:.06em}
.antigas summary{cursor:pointer;font-size:12px;color:var(--muted);margin-top:8px}

/* piano da vila: painel no rodapé com o teclado de 61 teclas do Virtual Piano (mesma moldura do card) */
.piano{position:absolute;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(980px,calc(100% - 24px));z-index:6;
  background:var(--tip-bg);border:2px solid var(--tip-edge);outline:2px solid #05020a;padding:12px 14px;display:grid;gap:10px}
.piano-cab{display:flex;align-items:baseline;gap:12px}
.piano-cab b{font:italic 700 22px/1 var(--font-display);white-space:nowrap}
.piano-estado{flex:1;min-width:0;font-size:12px;color:var(--brass);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.piano-x,.piano-ctl button,.piano-ctl a,.piano-ctl select{font:700 12px var(--font-mono);padding:7px 11px;border:1px solid var(--line);background:transparent;color:var(--bone);cursor:pointer;text-decoration:none}
.piano-ctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.piano-ctl select{flex:1 1 220px;min-width:0;max-width:360px;background:#1a1222}
.piano-ctl .pri{background:var(--verdigris);border-color:var(--verdigris);color:#08130f}
.piano .hint{margin:0;font-size:12px;color:var(--muted)}
.piano-moldura{overflow-x:auto}
.piano-teclado{display:flex;min-width:720px;height:120px;gap:2px;background:#05020a;padding:6px;user-select:none;touch-action:manipulation}
.piano-teclado .tb{position:relative;flex:1;background:var(--bone);display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px;cursor:pointer;border-radius:0 0 3px 3px}
.piano-teclado .tp{position:absolute;z-index:2;top:0;right:-32%;width:62%;height:60%;background:var(--ink);display:flex;align-items:flex-end;justify-content:center;padding-bottom:3px;border-radius:0 0 3px 3px;cursor:pointer}
.piano-teclado span{font:700 11px var(--font-mono);color:#5a4e66;pointer-events:none}
.piano-teclado .tp span{color:var(--muted);font-size:9px}
.piano-teclado .tb.on{background:#f0c43c}
.piano-teclado .tp.on{background:var(--err)}
.piano-teclado .tb:last-child .tp{display:none}
.piano-ctl .piano-amb.on{background:#3a2450;border-color:#b07ae0;color:#ede6d8}
/* cartão de perfis: mais largo pra caber os quatro perfis em duas colunas */
.card[data-kind="perfis"]{width:min(860px,calc(100% - 32px))}
/* guarda-roupa: prévia em cima, grupos de botões embaixo (apagado = ainda não liberado por conquista) */
/* modo foto: some a interface; só a barrinha (HTML, fora da imagem salva) fica */
body.foto .top,body.foto .dock,body.foto .chat,body.foto .dpad{display:none!important}
.foto-barra{position:absolute;left:0;right:0;margin:0 auto;width:fit-content;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:30;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;
  max-width:calc(100% - 24px);padding:8px 10px;background:rgba(13,10,17,.78);border:1px solid rgba(74,68,82,.7);font:12px var(--font-mono);color:var(--bone)}
.foto-barra[hidden]{display:none}
.foto-barra button{white-space:nowrap;font:700 12px var(--font-mono);padding:6px 10px;border:1px solid var(--line);background:transparent;color:var(--bone);cursor:pointer}
.foto-barra button[data-a="salvar"]{background:var(--verdigris);border-color:var(--verdigris);color:#08130f}
.foto-flash{position:absolute;inset:0;z-index:29;background:#fff;pointer-events:none;animation:fotoFlash .4s ease-out forwards}
@keyframes fotoFlash{from{opacity:.65}to{opacity:0}}
@media (prefers-reduced-motion:reduce){.foto-flash{display:none}}
.card[data-kind="visual"]{width:min(520px,calc(100% - 32px))}
.vis canvas{display:block;width:100%;height:230px;background:radial-gradient(circle at 50% 70%,#2a1d3a,#140d1c 70%);border:1px solid #21162e}
.vis fieldset{border:0;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.vis legend{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;padding:0}
.vis button{font:700 12px var(--font-mono);padding:6px 9px;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--bone)}
.vis button.on{border-color:var(--verdigris);background:rgba(62,140,122,.22)}
.vis button:disabled{opacity:.38;border-style:dashed;cursor:not-allowed}
.vis button.cor{padding:4px}
.vis button.cor i{display:block;width:20px;height:20px}
/* com cartão ou piano aberto, as mensagens do chat não ficam por cima (o chat aberto continua aparecendo) */
body:has(#card:not([hidden])) .chat:not(.open) .log,body:has(.piano:not([hidden])) .chat:not(.open) .log{visibility:hidden}
/* piano no toque: sem direcional e sem a dica do teclado do computador */
body:has(.piano:not([hidden])) .dpad{display:none!important}
@media (hover:none) and (pointer:coarse){ .piano .hint{display:none} }