/* ===================== TOKENS (design/tokens.json): tema papel; noite segue o sistema ===================== */
:root{--papel:#efe2c4;--papel-elevado:#f7eed9;--tinta:#1d1612;--tinta-suave:#5a4a3c;--borda:#1d1612;--vermelho-cordel:#a32a1e;--sobre-vermelho:#f7eed9;
 --ocre:#8a5a0e;--verde-mata:#2f5d32;--azul-rio:#24506e;--roxo-encantado:#5b3a8a;--noite-mapa:#120d0a;
 --carimbo:3px 3px 0 #1d1612;--carimbo-sm:2px 2px 0 #1d1612;--carimbo-pressionado:0px 0px 0 #1d1612;
 --font-display:"Alfa Slab One",Rockwell,"Roboto Slab",Georgia,serif;--font-pixel:Silkscreen,"Courier New",monospace;--font-texto:"Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
 --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--radius-0:0px;--radius-1:2px;--radius-2:4px;--linha-fina:2px;--linha-grossa:3px;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--papel:#1b1511;--papel-elevado:#262019;--tinta:#f1e6cf;--tinta-suave:#c2b29a;--borda:#8a7660;--vermelho-cordel:#e0563f;--sobre-vermelho:#1b1511;
 --ocre:#e3a83a;--verde-mata:#7cc47a;--azul-rio:#7fb2d6;--roxo-encantado:#b99be8;--carimbo:3px 3px 0 #000000;--carimbo-sm:2px 2px 0 #000000;color-scheme:dark}}
/* o mapa é sempre escuro: lá dentro valem as cores do tema noite (repetidas de propósito) */
.scene{--papel:#1b1511;--papel-elevado:#262019;--tinta:#f1e6cf;--tinta-suave:#c2b29a;--borda:#8a7660;--vermelho-cordel:#e0563f;--sobre-vermelho:#1b1511;
 --ocre:#e3a83a;--verde-mata:#7cc47a;--azul-rio:#7fb2d6;--roxo-encantado:#b99be8;--carimbo-sm:2px 2px 0 #000000}

/* ===================== BASE ===================== */
*{box-sizing:border-box}body{margin:0;background:var(--papel);color:var(--tinta);font:400 15px/22px var(--font-texto)}
a{color:var(--azul-rio)}
.wrap{max-width:780px;margin:0 auto;padding:var(--space-3) var(--space-4) 40px}.disp{font-family:var(--font-display);font-weight:400}
.muted{color:var(--tinta-suave);font-size:13px;line-height:18px}
.rotulo{font:400 11px/14px var(--font-pixel);letter-spacing:.04em;text-transform:uppercase}
.ico{image-rendering:pixelated;vertical-align:-3px;flex:none}
.preco{display:inline-flex;align-items:center;gap:var(--space-1);font-family:var(--font-pixel);white-space:nowrap}.preco .ico{vertical-align:0}
.preco.moeda{color:var(--ocre)}.btn-acao .preco.moeda{color:inherit}

/* ===================== HUD (ChipRecurso) ===================== */
header{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-3)}
header h1{font-size:30px;line-height:34px;margin:0;margin-right:auto}
.nome-jogo{color:var(--tinta)}.nome-jogo span{color:var(--vermelho-cordel)}.login .nome-jogo{font-size:48px;line-height:52px;margin:0}
#vipTag{color:var(--ocre);vertical-align:middle}
.chip{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--papel-elevado);border:var(--linha-fina) solid var(--borda);box-shadow:var(--carimbo-sm);
 padding:var(--space-1) var(--space-2) var(--space-1) var(--space-1);font-weight:700;font-size:14px;line-height:20px}
.chip b{font:400 16px/20px var(--font-pixel);color:var(--tinta)}.chip .rotulo{color:var(--tinta-suave)}.chip>span:only-child{padding-left:var(--space-1)}

/* ===================== MAPA ===================== */
.scene{overflow:hidden;color:var(--tinta);border:var(--linha-grossa) solid var(--borda);box-shadow:var(--carimbo);background:var(--noite-mapa)}
.map{position:relative;width:100%;aspect-ratio:720/420}.map canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair;image-rendering:pixelated}
.mtl{position:absolute;left:var(--space-2);top:var(--space-2);background:var(--noite-mapa);border:var(--linha-fina) solid var(--borda);padding:2px var(--space-2);font-size:14px}
.mtr{position:absolute;right:var(--space-2);top:var(--space-2);background:var(--noite-mapa);border:var(--linha-fina) solid var(--borda);padding:var(--space-1) var(--space-2);width:200px;font-size:13px;line-height:18px}
.mrow{display:flex;justify-content:space-between;gap:var(--space-2);font-size:11px;line-height:14px;color:var(--tinta-suave);margin-top:2px}
.log{position:absolute;left:var(--space-2);bottom:var(--space-2);max-width:75%;font-size:12px;line-height:18px}
.log div{background:var(--noite-mapa);padding:0 var(--space-2);margin-top:2px;width:fit-content;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.log .rare{color:var(--ocre);font-weight:700}.log .sh{color:var(--roxo-encantado);font-weight:700}.log .bad{color:var(--tinta-suave)}
.evbar{position:absolute;left:50%;top:var(--space-2);transform:translateX(-50%);background:var(--papel-elevado);color:var(--tinta);border:var(--linha-fina) solid var(--borda);box-shadow:var(--carimbo-sm);
 padding:0 var(--space-2);font-size:12px;line-height:20px;font-weight:700;white-space:nowrap}
@media (max-width:560px){.log div:nth-child(n+3){display:none}.mtr{width:150px;font-size:12px}.evbar{top:auto;bottom:var(--space-2);left:var(--space-2);right:var(--space-2);transform:none;font-size:11px;overflow:hidden;text-overflow:ellipsis}}

/* ===================== BarraVida (vida e XP em blocos) ===================== */
.barra{height:12px;margin-top:var(--space-1);border:var(--linha-fina) solid var(--borda);background:var(--papel);
 background-image:repeating-linear-gradient(90deg,transparent 0 10px,var(--borda) 10px 12px)}   /* divisões de pixel a cada 12px, não é degradê */
.barra i{display:block;height:100%;width:calc(var(--v)*100%);background:var(--verde-mata)}
.barra.xp i{background:var(--azul-rio)}.barra.baixa i{background:var(--vermelho-cordel)}

/* ===================== ABAS ===================== */
nav{display:flex;gap:2px;margin:var(--space-4) 0 var(--space-3);overflow-x:auto}
nav button{flex:1 0 auto;font:700 14px/20px var(--font-texto);background:transparent;color:var(--tinta-suave);border:0;border-bottom:3px solid transparent;padding:var(--space-2) var(--space-2);cursor:pointer}
nav button[aria-selected="true"]{color:var(--tinta);border-color:var(--tinta)}

/* ===================== Moldura (todos os painéis) ===================== */
.panel,.moldura{position:relative;background:var(--papel-elevado);border:var(--linha-grossa) solid var(--borda);box-shadow:var(--carimbo);padding:var(--space-4);border-radius:var(--radius-0)}
.panel::after,.moldura::after{content:"";position:absolute;inset:5px;border:1px solid var(--borda);pointer-events:none;opacity:.55}
/* quatro cantos de tinta com miolo vermelho (camadas de cor sólida, não degradê) */
.panel::before,.moldura::before{content:"";position:absolute;inset:-6px;pointer-events:none;z-index:1;background:
 linear-gradient(var(--vermelho-cordel),var(--vermelho-cordel)) left 2px top 2px/8px 8px no-repeat,linear-gradient(var(--vermelho-cordel),var(--vermelho-cordel)) right 2px top 2px/8px 8px no-repeat,
 linear-gradient(var(--vermelho-cordel),var(--vermelho-cordel)) left 2px bottom 2px/8px 8px no-repeat,linear-gradient(var(--vermelho-cordel),var(--vermelho-cordel)) right 2px bottom 2px/8px 8px no-repeat,
 linear-gradient(var(--borda),var(--borda)) left top/12px 12px no-repeat,linear-gradient(var(--borda),var(--borda)) right top/12px 12px no-repeat,
 linear-gradient(var(--borda),var(--borda)) left bottom/12px 12px no-repeat,linear-gradient(var(--borda),var(--borda)) right bottom/12px 12px no-repeat}
.moldura{margin-bottom:var(--space-6)}
.panel h2,.moldura h2{font:400 20px/24px var(--font-display);color:var(--vermelho-cordel);margin:0 0 var(--space-2)}.panel h2:not(:first-child){margin-top:var(--space-6)}
.row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) 0;border-top:2px dashed var(--tinta-suave);flex-wrap:wrap}
.row .grow{flex:1;min-width:160px}.row>svg{width:52px;height:52px;flex:none;overflow:visible}
.row.raro{border:var(--linha-fina) solid var(--roxo-encantado);box-shadow:var(--carimbo);padding:var(--space-3);margin:var(--space-2) 0}

/* ===================== Botão ===================== */
.btn{display:inline-block;text-align:center;vertical-align:middle;font:400 15px/1 var(--font-display);letter-spacing:.02em;color:var(--tinta);background:var(--papel-elevado);
 border:var(--linha-fina) solid var(--borda);border-radius:var(--radius-0);padding:var(--space-3) var(--space-4);box-shadow:var(--carimbo);cursor:pointer;white-space:nowrap;transition:transform .05s}
.btn-acao{background:var(--vermelho-cordel);color:var(--sobre-vermelho)}
.btn:active:not(:disabled){transform:translate(3px,3px);box-shadow:var(--carimbo-pressionado)}
/* botão ligado (filtro, Pena, Selo, automático): fica apertado */
.btn.main{transform:translate(3px,3px);box-shadow:var(--carimbo-pressionado);background:var(--tinta);color:var(--papel-elevado)}
.btn:disabled{color:var(--tinta-suave);background:var(--papel);box-shadow:none;border-style:dashed;cursor:not-allowed}
button:focus-visible,.inp:focus-visible{outline:3px solid var(--azul-rio);outline-offset:3px}

/* ===================== SeloTier e tags ===================== */
.selo,.tag{font:400 11px/14px var(--font-pixel);letter-spacing:.04em;padding:2px 6px;border:var(--linha-fina) solid var(--borda);background:var(--papel-elevado);color:var(--tinta);white-space:nowrap;display:inline-block;vertical-align:middle}
.tag{border-radius:var(--radius-1)}.tag.g{color:var(--verde-mata);border-color:var(--verde-mata)}
.selo.t2{border-color:var(--verde-mata);color:var(--verde-mata)}.selo.t3{border-color:var(--azul-rio);color:var(--azul-rio)}
.selo.t4,.selo.t5{background:var(--roxo-encantado);border-color:var(--borda);color:var(--papel-elevado)}.selo.t5{box-shadow:var(--carimbo-sm)}
.selo.enc{background:var(--ocre);color:var(--papel-elevado);box-shadow:var(--carimbo-sm)}
.mtr .selo{padding:0 4px}

/* ===================== Telas ===================== */
.area{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border:var(--linha-fina) solid var(--borda);background:var(--papel-elevado);box-shadow:var(--carimbo-sm);
 margin-bottom:var(--space-3);cursor:pointer;width:100%;text-align:left;color:var(--tinta);font:inherit}
.area[aria-pressed="true"]{background:var(--tinta);color:var(--papel-elevado);box-shadow:none;transform:translate(2px,2px)}.area[aria-pressed="true"] .muted{color:inherit}
.area:disabled{color:var(--tinta-suave);background:var(--papel);box-shadow:none;border-style:dashed;cursor:not-allowed}
.forge{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:var(--space-4);align-items:center}@media (max-width:520px){.forge{grid-template-columns:1fr}}.forge .big svg{width:100%;height:auto;overflow:visible}
.tbl{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:13px;line-height:18px}td,th{text-align:left;padding:var(--space-2);border-top:2px dashed var(--tinta-suave)}
th{font:400 11px/14px var(--font-pixel);letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-suave);border-top:0}
.modal{position:fixed;inset:0;background:rgba(18,13,10,.7);display:none;align-items:center;justify-content:center;padding:var(--space-4);z-index:10}.modal.on{display:flex}.modal .panel{width:min(440px,100%)}
.starters{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);margin-top:var(--space-3)}
.starters button{background:var(--papel-elevado);border:var(--linha-fina) solid var(--borda);box-shadow:var(--carimbo-sm);padding:var(--space-2);cursor:pointer;color:var(--tinta);font:400 15px/20px var(--font-display)}
.starters button:active{transform:translate(2px,2px);box-shadow:none}.starters svg{width:100%;height:auto;overflow:visible}
.toast{position:fixed;left:50%;bottom:var(--space-4);transform:translateX(-50%);background:var(--tinta);color:var(--papel);border-radius:var(--radius-2);padding:10px var(--space-4);font-size:14px;line-height:20px;max-width:90vw;opacity:0;transition:opacity .3s;pointer-events:none;z-index:20}.toast.on{opacity:1}
.login{max-width:420px;margin:12vh auto;text-align:center;padding:var(--space-6)}.login .btn{width:100%;margin-top:var(--space-3)}
.inp{font:400 15px/22px var(--font-texto);padding:var(--space-2) 10px;border-radius:var(--radius-1);border:var(--linha-fina) solid var(--borda);background:var(--papel-elevado);color:var(--tinta);width:100%;margin-top:var(--space-2)}
.row .inp{width:auto;margin-top:0;flex:1;min-width:120px}
.captcha{margin-top:var(--space-2)}
@media (max-width:560px){.wrap{padding:var(--space-3) var(--space-3) 40px}.login{margin:8vh var(--space-4)}header h1{font-size:24px;line-height:28px}.btn{padding:10px var(--space-3)}}