/* Dom Bosco II: interface em placas de madeira clara sobre a cena 3D. Visual único, não muda com o tema do celular. */
:root{
  --grama:#6fb43f; --grama-esc:#4f8f2c; --madeira:#7a4a24; --madeira-cl:#b97a43; --creme:#fff6e2; --creme2:#f3e4c2;
  --tinta:#3b2412; --ouro:#ffd76a; --perigo:#c9473a; --ceu:#bfe3f7; --sombra:rgba(59,36,18,.28);
  --fonte:"Fredoka","Baloo 2","Trebuchet MS",system-ui,sans-serif;
  --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px); --sl:max(12px,env(safe-area-inset-left,0px)); --sr:max(12px,env(safe-area-inset-right,0px));
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0;overflow:hidden;background:var(--ceu);color:var(--tinta);font-family:var(--fonte);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;overscroll-behavior:none}
#cena{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
button{font-family:var(--fonte);color:var(--tinta);cursor:pointer}
button:focus-visible{outline:3px solid #2a7fd4;outline-offset:2px}
.placa{background:var(--creme);border:3px solid var(--madeira);border-radius:14px;box-shadow:0 4px 0 var(--madeira),0 8px 18px var(--sombra)}
.moeda-i{display:inline-block;width:1.05em;height:1.05em;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3a8,#f2b51f 55%,#c98a0f);border:2px solid #9a6a0b;vertical-align:-.18em;margin-right:.25em}

#topo{position:fixed;top:calc(var(--st) + 10px);left:var(--sl);right:var(--sr);display:flex;justify-content:space-between;align-items:flex-start;gap:8px;pointer-events:none}
#topo .placa{pointer-events:auto}
.nome{padding:6px 12px;font-size:17px;white-space:nowrap}
.recursos{display:flex;gap:12px;align-items:center;padding:5px 12px}
.rec{display:flex;align-items:center;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.nivel{gap:6px}
.estrela{display:grid;place-items:center;width:30px;height:30px;background:var(--ouro);border:2px solid var(--madeira);border-radius:50%;font-size:15px}
.xp{position:relative;width:74px;height:14px;background:#e9d9b8;border:2px solid var(--madeira);border-radius:8px;overflow:hidden}
.xp i{display:block;height:100%;width:0;background:var(--grama)}
.xp small{position:absolute;inset:0;display:grid;place-items:center;font-size:9px;font-weight:600;color:var(--tinta)}

#barra{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:6px;padding:0 var(--sr) calc(var(--sb) + 10px) var(--sl);pointer-events:none}
#barra button{pointer-events:auto;position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:52px;padding:6px 5px 5px;background:var(--creme);border:3px solid var(--madeira);border-radius:14px;box-shadow:0 3px 0 var(--madeira);font-weight:600;font-size:12.5px}
#barra button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--madeira)}
#barra svg{width:26px;height:26px}
#barra .qt{position:absolute;top:-8px;right:-6px;min-width:20px;padding:0 5px;height:20px;border-radius:10px;background:var(--grama);color:#fff;border:2px solid var(--madeira);font-size:11px;line-height:16px}
#barra .qt:empty{display:none}

#modo,#dica{position:fixed;left:50%;transform:translateX(-50%);top:calc(var(--st) + 62px);display:flex;align-items:center;gap:10px;padding:6px 6px 6px 12px;font-size:14px;font-weight:600;max-width:calc(100vw - 24px)}
#dica{top:auto;bottom:calc(var(--sb) + 86px);font-weight:500;background:#fffbe9}
#modo small{font-weight:500;opacity:.75}
#modo .sair,#dica .fechar{flex:none;width:30px;height:30px;border-radius:50%;border:2px solid var(--madeira);background:var(--creme2);font-size:14px;font-weight:700}
.ic-p{width:26px;height:26px;vertical-align:middle}

#acoes{position:fixed;left:0;right:0;bottom:calc(var(--sb) + 84px);display:flex;justify-content:center;gap:8px;padding:0 var(--sr) 0 var(--sl)}
.btn{font-weight:600;font-size:15px;padding:9px 16px;border-radius:12px;border:3px solid var(--madeira);background:var(--grama);color:#fff;box-shadow:0 3px 0 var(--madeira);text-shadow:0 1px 0 rgba(0,0,0,.25)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--madeira)}
.btn:disabled{filter:grayscale(.8);opacity:.6}
.btn.sec{background:var(--creme);color:var(--tinta);text-shadow:none}
.btn.perigo{background:var(--perigo)}

#atualizar{position:fixed;left:50%;transform:translateX(-50%);top:calc(var(--st) + 62px);display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;font-size:14px;font-weight:600;width:max-content;max-width:calc(100vw - 24px);z-index:6;background:#eaf7d9}
#balao{position:fixed;transform:translate(-50%,-110%);padding:7px 12px;font-size:14px;pointer-events:none;min-width:120px;text-align:center}
#balao b{display:block;font-size:15px}
#balao span{font-size:13px}
.prog{display:block;margin-top:5px;height:8px;border-radius:5px;background:#e9d9b8;border:1.5px solid var(--madeira);overflow:hidden}
.prog i{display:block;height:100%;background:var(--grama)}
#aviso{position:fixed;left:50%;top:calc(var(--st) + 108px);transform:translateX(-50%);padding:9px 16px;font-weight:600;font-size:15px;max-width:calc(100vw - 32px);text-align:center;z-index:6}
#aviso.entra{animation:entra .25s ease-out}
@keyframes entra{from{transform:translate(-50%,-10px);opacity:0}}
.flut{position:fixed;transform:translate(-50%,-50%);font-weight:700;font-size:20px;color:#fff;text-shadow:0 2px 0 var(--madeira),0 0 6px rgba(0,0,0,.4);pointer-events:none;animation:sobe 1.5s ease-out forwards;display:flex;align-items:center;gap:4px;white-space:nowrap;z-index:5}
.flut img{width:34px;height:34px}
.flut small{font-size:13px;color:var(--ouro)}
@keyframes sobe{to{transform:translate(-50%,-160%);opacity:0}}

#veu{position:fixed;inset:0;background:rgba(40,25,10,.35);z-index:7}
#folha{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--sb) + 10px);width:min(560px,calc(100vw - 20px));max-height:min(78vh,calc(100% - var(--st) - 40px));display:flex;flex-direction:column;z-index:8;padding:0}
#folha .cab{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 6px 16px;border-bottom:2px dashed var(--madeira-cl)}
#folha h2{margin:0;font-size:20px;text-wrap:balance}
#folha .fechar{width:34px;height:34px;border-radius:50%;border:2px solid var(--madeira);background:var(--creme2);font-weight:700}
#folha .corpo{overflow-y:auto;padding:10px 14px 16px;-webkit-overflow-scrolling:touch;-webkit-user-select:text;user-select:text}
#folha h3{margin:16px 0 4px;font-size:16px}
.sub{margin:2px 0 10px;font-size:13.5px;line-height:1.4;opacity:.85}
.abas{display:flex;gap:6px;margin-bottom:10px;overflow-x:auto}
.abas button{flex:none;padding:6px 12px;border-radius:10px;border:2px solid var(--madeira);background:var(--creme2);font-weight:600;font-size:14px}
.abas button[aria-pressed="true"]{background:var(--ouro)}
.grade-cartas{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.carta{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 6px 8px;background:#fffdf5;border:2px solid var(--madeira-cl);border-radius:12px;font-size:12.5px;text-align:center;min-width:0}
.carta .ic{width:64px;height:64px}
.carta b{font-size:14px}
.carta .desc,.carta .rende{font-size:11.5px;opacity:.8;line-height:1.25}
.carta .preco{font-weight:700;font-size:14px}
.carta .preco.falta{color:var(--perigo)}
.carta.trava{opacity:.55}
.carta.trava em{position:absolute;top:6px;right:6px;font-style:normal;font-size:11px;font-weight:600;background:var(--madeira);color:var(--creme);padding:1px 6px;border-radius:8px}
.lista{display:flex;flex-direction:column;gap:6px}
.item{display:flex;align-items:center;gap:8px;padding:5px 6px;background:#fffdf5;border:2px solid var(--madeira-cl);border-radius:12px}
.item .ic{width:46px;height:46px;flex:none}
.item .nm{flex:1;min-width:0;display:flex;flex-direction:column}
.item .nm span{font-size:12px;opacity:.8}
.item .btn{padding:6px 9px;font-size:13px}
.linha-botoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.vazio{text-align:center;padding:10px}
.vazio .ic-g{width:80px;height:80px}
.op{display:flex;gap:10px;align-items:flex-start;padding:8px 0;font-size:13.5px;line-height:1.35}
.op input{width:22px;height:22px;flex:none;accent-color:var(--grama)}
.op b{display:block;font-size:15px}
textarea{width:100%;min-height:80px;margin-top:8px;border:2px solid var(--madeira-cl);border-radius:10px;padding:8px;font-family:ui-monospace,monospace;font-size:11px;background:#fffdf5;color:var(--tinta)}
.cred{padding-left:18px;line-height:1.5;font-size:14px}

#historia{position:fixed;inset:0;z-index:9;display:grid;place-items:center;padding:20px var(--sr) 20px var(--sl);background:radial-gradient(ellipse at center,rgba(40,25,10,.25),rgba(40,25,10,.65))}
.carta-hist{width:min(460px,100%);background:#fbf1d8;background-image:repeating-linear-gradient(transparent 0 27px,rgba(122,74,36,.12) 27px 28px);border:3px solid var(--madeira);border-radius:6px 18px 6px 18px;box-shadow:0 10px 30px rgba(0,0,0,.35);padding:20px 22px 18px;transform:rotate(-.6deg)}
.carta-hist .passo{font-size:12px;font-weight:600;opacity:.6}
.carta-hist h2{margin:4px 0 8px;font-size:24px;text-wrap:balance}
.carta-hist p{margin:0;font-size:17px;line-height:1.55;font-weight:500}
.carta-hist .linha-botoes{justify-content:flex-end}

#carga{position:fixed;inset:0;display:grid;place-items:center;background:linear-gradient(#bfe3f7,#d9f0c6);z-index:10}
#carga .placa{padding:18px 26px;text-align:center;font-size:18px}
#carga .trilho{margin:10px auto 6px;width:230px;height:12px;border-radius:8px;background:#e9d9b8;overflow:hidden;border:2px solid var(--madeira)}
#carga .trilho i{display:block;height:100%;width:0;background:var(--grama)}
#carga-txt{font-size:13px;font-weight:500}
@media (max-width:420px){ .nome{font-size:15px;padding:5px 9px} .xp{width:56px} #barra button{min-width:52px;font-size:11.5px;padding:5px 5px 4px} }
@media (prefers-reduced-motion:reduce){ .flut,#aviso.entra{animation:none} }

/* varanda em primeira pessoa */
#fp{position:fixed;inset:0;z-index:4;touch-action:none}
.fp-topo{position:absolute;top:calc(var(--st) + 10px);left:var(--sl);right:var(--sr);display:flex;gap:8px;flex-wrap:wrap}
.fp-dica{position:absolute;top:calc(var(--st) + 60px);left:var(--sl);max-width:min(330px,calc(100vw - 24px));font-size:13px;font-weight:500;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7);pointer-events:none}
#fp-joy{position:absolute;left:calc(var(--sl) + 14px);bottom:calc(var(--sb) + 26px);width:120px;height:120px;border-radius:50%;background:rgba(255,246,226,.25);border:3px solid rgba(255,246,226,.7);box-shadow:0 4px 14px rgba(0,0,0,.25);touch-action:none}
#fp-joy i{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:var(--creme);border:3px solid var(--madeira);box-shadow:0 3px 0 var(--madeira);pointer-events:none}
body.em-fp #topo,body.em-fp #barra,body.em-fp #dica,body.em-fp #modo,body.em-fp #acoes,body.em-fp #balao{display:none!important}

/* pescaria */
#pesca{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--sb) + 86px);display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 14px;font-weight:600;font-size:15px;z-index:5;width:max-content;max-width:calc(100vw - 24px)}
#p-acao{min-width:130px;font-size:17px}
#p-acao.puxa{background:#e8742a;animation:puxa .35s ease-in-out infinite alternate}
@keyframes puxa{to{transform:scale(1.08)}}
body.em-pesca #barra{display:none}

#fp-mira{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:rgba(255,246,226,.85);box-shadow:0 0 0 2px rgba(122,74,36,.6);pointer-events:none}
#visita{position:fixed;left:50%;transform:translateX(-50%);top:calc(var(--st) + 62px);display:flex;align-items:center;gap:10px;padding:6px 6px 6px 14px;font-size:14px;font-weight:600;width:max-content;max-width:calc(100vw - 24px);z-index:6;background:#e3f0fb}
body.visita #b-loja,body.visita #b-celeiro,body.visita #b-mover,body.visita #rec-gas{display:none}
label.campo{display:flex;flex-direction:column;gap:4px;font-weight:600;margin:8px 0}
label.campo input{font:inherit;font-weight:500;padding:9px 10px;border:2px solid var(--madeira);border-radius:10px;background:#fffdf6}