/* ============================================================
   Shinobi RPG Online — Database · tema v1
   Mesma família visual do site (fontes, moldura de madeira,
   faixas pintadas) mas com identidade própria: mural de
   informantes / livro bingo, não pergaminho de biblioteca (wiki)
   nem portal de conta. Fichas "presas" no mural, carimbo de ID,
   abas de pasta em vez de placas de pergaminho.
   ============================================================ */

/* ---- fontes (hospedadas no próprio site, /assets/fonts) ---- */
@font-face{font-family:"Bangers";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/bangers-400.woff2) format("woff2")}
@font-face{font-family:"Cinzel";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/cinzel-600.woff2) format("woff2")}
@font-face{font-family:"Cinzel";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/cinzel-700.woff2) format("woff2")}
@font-face{font-family:"Cinzel";font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/cinzel-800.woff2) format("woff2")}
@font-face{font-family:"Lora";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/lora-400.woff2) format("woff2")}
@font-face{font-family:"Lora";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/lora-500.woff2) format("woff2")}
@font-face{font-family:"Lora";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/lora-600.woff2) format("woff2")}
@font-face{font-family:"Lora";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/lora-400i.woff2) format("woff2")}

/* ---- tokens ---- */
:root{
  --f-disp:"Bangers","Impact",system-ui,sans-serif;
  --f-ui:"Cinzel","Trajan Pro",Georgia,serif;
  --f-body:"Lora",Georgia,"Times New Roman",serif;
  --f-mono:"JetBrains Mono","Consolas",monospace;
  --gut:clamp(14px,3.2vw,48px);
  /* papel de ficha: kraft envelhecido, mais acinzentado/frio que o pergaminho da wiki */
  --paper:#e7dcc3; --paper-2:#dccdac; --ink:#2a2117; --ink-strong:#181209; --ink-soft:#6b5f47;
  --rule:rgba(42,33,23,.32); --rule-soft:rgba(42,33,23,.16);
  --red:#b8362a; --crimson:#8c2519; --gold:#e8c073; --gold-2:#f2b24c;
  --info:#3f7d8c; --info-2:#2c5b66;
  --link:#8c2519; --link-h:#b8362a;
  --field:rgba(255,248,232,.55); --field-2:rgba(60,40,20,.14);
  --on:#3f9a3a; --off:#c23a2c;
  --pin:#8c2519;
  color-scheme:light;
}

*{box-sizing:border-box}
html{background:#0a0908}
html,body{margin:0;padding:0;min-width:320px}
body{position:relative;min-height:100vh;min-height:100dvh;color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  display:flex;flex-direction:column;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
/* mural de madeira com cartazes (mesmo motivo em todas as sub-paginas: e um unico arquivo) */
body::before{content:"";position:fixed;inset:0;z-index:-2;background:url(/assets/plates/novidades.webp) center 30%/cover no-repeat #0a0908;transform:scale(1.03)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(8,6,4,.72) 0,rgba(10,7,5,.6) 20%,rgba(8,6,4,.82) 100%),
    radial-gradient(120% 90% at 50% 38%,rgba(0,0,0,0) 50%,rgba(3,2,1,.62) 100%)}
[hidden]{display:none!important}

a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-h);text-decoration:underline;text-underline-offset:3px}
button,input,select{font:inherit}
:focus-visible{outline:3px solid var(--gold-2);outline-offset:3px;border-radius:3px}
::selection{background:#b8362a;color:#fff}
img{max-width:100%}
strong{font-weight:600;color:var(--ink-strong)}

/* ---- papel: moldura de madeira (mesma textura do resto do site) ---- */
.card,.home-card,.item-card,.monster-card,.map-detail,.stat-block{
  position:relative;isolation:isolate;--bw:16px;padding:calc(var(--bw) + 6px)}
.card::before,.home-card::before,.item-card::before,.monster-card::before,.map-detail::before,.stat-block::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border:solid transparent;border-width:var(--bw);
  border-image:url(/assets/ui/frame.webp) 44 fill/var(--bw) stretch}
.card,.home-card,.item-card,.monster-card,.stat-block{filter:drop-shadow(0 10px 14px rgba(0,0,0,.5))}
/* alfinete: cada ficha parece presa no mural (sem inclinar — só o pin marca o efeito) */
.pinned::after{content:"";position:absolute;left:50%;top:2px;width:11px;height:11px;margin-left:-5.5px;z-index:2;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#e2685a,var(--pin) 60%,#5c130b);box-shadow:0 2px 3px rgba(0,0,0,.6),0 0 0 1.5px rgba(0,0,0,.35)}

/* ---- barra superior: haste escura (mesma da home/conta) ---- */
.flux-top{display:contents}
.flux-top-inner{position:sticky;top:10px;z-index:60;display:flex;align-items:center;gap:16px;min-height:62px;width:calc(100% - 2*var(--gut) + 44px);max-width:calc(1320px - 2*var(--gut) + 44px);margin:10px auto 0;padding:0 6px;
  border:solid transparent;border-width:0 34px;border-image:url(/assets/ui/lb_dark_s.webp) 0 46 0 46 fill/0 34px 0 34px stretch;filter:drop-shadow(0 8px 10px rgba(0,0,0,.45))}
.brand{display:flex;align-items:center;gap:10px;flex:none;color:var(--paper);min-height:44px}
.brand:hover{text-decoration:none}
.brand img{height:38px;width:auto;max-width:none;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
/* selo de "arquivo": carimbo retangular, nao a plaqueta inclinada da conta */
.brand .b-tag{position:relative;font-family:var(--f-mono);font-weight:700;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:#dfe9ea;
  padding:5px 9px;border:1.5px solid rgba(180,220,220,.6);border-radius:2px;background:rgba(63,125,140,.18);transform:rotate(-2deg)}
.flux-nav{display:flex;align-items:center;gap:2px;margin-left:auto;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.flux-nav::-webkit-scrollbar{display:none}
.flux-nav a{display:inline-flex;align-items:center;min-height:42px;padding:0 12px;color:var(--paper);font-family:var(--f-ui);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;text-shadow:0 2px 0 rgba(0,0,0,.7);border-radius:3px}
.flux-nav a:hover{color:var(--gold);text-decoration:none;background:rgba(255,232,180,.09)}
.flux-nav a.active{color:#eaf6f5;text-shadow:0 2px 0 rgba(10,30,30,.85);border:solid transparent;border-width:0 22px;padding:0 2px;margin:0 -2px;border-radius:0;
  border-image:url(/assets/ui/lb_cream_s.webp) 0 46 0 46 fill/0 22px 0 22px stretch;background:none;filter:hue-rotate(150deg) saturate(1.3)}

/* ---- estrutura ---- */
.wrap{position:relative;z-index:2;width:100%;max-width:1320px;margin:0 auto;padding:26px var(--gut) 60px;flex:1 0 auto;display:flex;flex-direction:column}

/* ---- cabecalho de pagina: carimbo grande em vez de placa de pergaminho ---- */
.db-head{position:relative;margin:8px 0 22px;padding:22px 26px 20px;--bw:18px}
.db-head::before{content:"";position:absolute;inset:0;z-index:-1;border:solid transparent;border-width:var(--bw);border-image:url(/assets/ui/frame.webp) 44 fill/var(--bw) stretch;filter:drop-shadow(0 10px 16px rgba(0,0,0,.5))}
.kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-weight:700;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--info-2)}
.kicker::before{content:"";width:20px;height:2px;background:var(--red)}
.db-head h1{margin:6px 0 8px;font-family:var(--f-disp);font-weight:400;font-size:clamp(2.2rem,4.4vw,3.4rem);line-height:.98;letter-spacing:.02em;color:var(--ink-strong);text-shadow:0 2px 0 rgba(255,248,232,.4)}
.lead{max-width:760px;margin:0;font-size:1.02rem;color:var(--ink)}
.db-source{margin-top:8px;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink-soft)}

/* ---- ficha de contagem (home) ---- */
.home-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:4px}
.home-card{min-height:190px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .16s ease}
.home-card:hover{transform:translateY(-3px)}
.home-card span{font-family:var(--f-mono);color:var(--info-2);text-transform:uppercase;font-size:.68rem;letter-spacing:.14em}
.home-card strong{font-family:var(--f-disp);font-weight:400;font-size:2.6rem;line-height:1;letter-spacing:.02em;color:var(--crimson)}
.home-card small{color:var(--ink-soft);font-size:.92rem}

/* ---- barra de ferramentas: abas de pasta, nao placas ---- */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:18px 0 14px}
.toolbar .input-wrap{position:relative;flex:1 1 260px;min-width:0}
.input{width:100%;height:46px;padding:0 14px;border-radius:3px;border:2px solid #1a140c;background:linear-gradient(180deg,#e9dcbb,#f2e7cb);color:#2a2117;
  font-family:var(--f-body);font-size:15px;outline:none;box-shadow:inset 0 3px 6px rgba(50,35,15,.28)}
.input::placeholder{color:#7d6a4c;font-style:italic}
.input:focus{border-color:var(--info);box-shadow:inset 0 3px 6px rgba(50,35,15,.28),0 0 0 3px rgba(63,125,140,.35)}
select.input{appearance:none;padding-right:38px;cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232a2117' stroke-width='2'/%3E%3C/svg%3E") right 14px center/12px no-repeat,linear-gradient(180deg,#e9dcbb,#f2e7cb)}
label.chk{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;font-family:var(--f-ui);font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--paper);text-shadow:0 1px 0 rgba(0,0,0,.6);cursor:pointer;white-space:nowrap}
label.chk input{width:18px;height:18px;accent-color:var(--info)}
.btn-go{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;border:2px solid #150d09;border-radius:3px;cursor:pointer;
  font-family:var(--f-ui);font-weight:800;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:#fff2e0;background:linear-gradient(180deg,#c9483a,#8c2519);box-shadow:0 3px 0 rgba(0,0,0,.5)}
.btn-go:hover{filter:brightness(1.08)}

.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.tabs button,.tabs a{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:7px 13px;border:1.5px solid rgba(232,192,115,.4);border-bottom:none;border-radius:6px 6px 0 0;
  background:rgba(20,15,10,.55);color:var(--paper);font-family:var(--f-ui);font-weight:700;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.tabs button:hover,.tabs a:hover{color:var(--gold);text-decoration:none;background:rgba(20,15,10,.8)}
.tabs button.active,.tabs a.active{color:#2a2117;background:var(--paper);border-color:var(--paper)}
.tabs button.active .tab-n,.tabs a.active .tab-n{color:var(--crimson)}
.tab-n{font-family:var(--f-mono);color:var(--gold);font-size:.66rem}
.tabs.sub{margin-top:-16px}
.tabs.sub button,.tabs.sub a{font-size:.64rem;padding:6px 11px;background:rgba(20,15,10,.35)}

/* ---- fichas de estatistica ---- */
.stats{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.stat-block{--bw:0;display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:6px;border:1.5px solid var(--rule);background:var(--field);filter:none;box-shadow:0 3px 0 rgba(42,33,23,.25);
  color:var(--ink-soft);font-family:var(--f-ui);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}
.stat-block::before{display:none}
.stat-block strong{font-family:var(--f-mono);color:var(--crimson);font-weight:700}

/* ---- paginacao ---- */
.pagination{display:flex;align-items:center;justify-content:center;gap:16px;margin:26px 0 10px}
.page-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 20px;border:2px solid #150d09;border-radius:3px;cursor:pointer;
  font-family:var(--f-ui);font-weight:800;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:#eaf8f8;background:linear-gradient(180deg,var(--info),var(--info-2));box-shadow:0 3px 0 rgba(0,0,0,.5)}
.page-btn:hover:not(:disabled){filter:brightness(1.12)}
.page-btn:disabled{opacity:.35;cursor:not-allowed;filter:none;box-shadow:none}
.page-info{font-family:var(--f-mono);font-size:.76rem;letter-spacing:.04em;color:var(--ink-soft);min-width:112px;text-align:center}

/* ---- grade de itens: fichas presas no mural ---- */
.item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px 16px}
.item-card{display:grid;grid-template-columns:58px minmax(0,1fr);gap:12px;align-items:start;--bw:14px;transition:transform .16s ease}
.item-card img{width:52px;height:52px;object-fit:contain;image-rendering:pixelated;background:radial-gradient(circle at 40% 30%,#2c2013,#160f08);border:2px solid #150d09;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}

/* ---- grade de monstros: 2 por linha, com retrato grande ---- */
.monster-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}
.monster-card{display:flex;flex-direction:column;gap:12px;--bw:14px;transition:transform .16s ease}
.monster-card .monster-photo{position:relative;width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:14px;
  background:radial-gradient(circle at 40% 30%,#2c2013,#160f08);border:2px solid #150d09;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);overflow:hidden}
.monster-card .monster-photo img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 8px 10px rgba(0,0,0,.55))}
.monster-card .monster-photo img.ph{width:56%;height:56%;opacity:.75;filter:none}

.item-card:hover,.monster-card:hover{transform:translateY(-3px)}
.item-card:target,.monster-card:target,.hash-target{outline:2px solid var(--info);outline-offset:2px}
.item-main,.monster-main{min-width:0}
.item-card h2,.monster-card h2{margin:0 0 2px;font-family:var(--f-disp);font-weight:400;font-size:1.35rem;line-height:1.05;letter-spacing:.02em;color:var(--ink-strong);overflow-wrap:anywhere}
.meta{font-family:var(--f-mono);font-size:.72rem;color:var(--ink-soft)}
.meta .stamp-id{display:inline-block;padding:0 5px;border:1px solid rgba(140,37,25,.55);border-radius:3px;color:var(--crimson);transform:rotate(-2deg)}
.desc{margin:8px 0 0;font-size:.86rem;color:var(--ink)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 4px;border:1.5px solid rgba(42,33,23,.55);border-top:4px solid var(--chip-c, var(--info));border-radius:2px;background:rgba(255,248,232,.5);color:var(--ink);
  font-family:var(--f-ui);font-weight:700;font-size:.62rem;letter-spacing:.09em;text-transform:uppercase}
.chip.chip-red{border-top-color:var(--crimson)}

/* ---- ficha de combate (mobs) ---- */
.combat-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin-top:9px;padding:8px 9px;border:1px solid var(--rule-soft);border-radius:4px;background:rgba(20,14,9,.05)}
.cstat{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;font-family:var(--f-mono);font-size:.72rem;color:var(--ink-strong)}
.cstat b{font-family:var(--f-ui);font-weight:800;font-size:.56rem;letter-spacing:.08em;color:var(--ink-soft)}
.mvp-badge{position:absolute;top:8px;right:8px;z-index:2;padding:3px 9px;border:1.5px solid #150d09;border-radius:3px;background:linear-gradient(180deg,#e8c073,#b88a14);color:#2a1a05;font-family:var(--f-ui);font-weight:800;font-size:.62rem;letter-spacing:.1em;box-shadow:0 3px 0 rgba(0,0,0,.45)}

/* ---- como obter / drops ---- */
.obtain-block,.monster-drops{margin-top:12px;padding-top:10px;border-top:1.5px dashed var(--rule)}
.obtain-block h3,.monster-drops h3{display:flex;align-items:center;gap:7px;margin:0 0 8px;font-family:var(--f-ui);font-weight:800;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--crimson)}
.obtain-block h3 span,.monster-drops h3 span{font-family:var(--f-mono);color:var(--info-2)}
.obtain-block ul,.obtain-more ul,.drop-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.obtain-row{display:grid;grid-template-columns:52px minmax(0,1fr);gap:8px;align-items:center;min-width:0}
.obtain-kind{display:inline-flex;justify-content:center;align-items:center;padding:4px 5px;border-radius:3px;font-family:var(--f-ui);font-size:.58rem;line-height:1;font-weight:800;text-transform:uppercase}
.obtain-drop .obtain-kind{color:#3a120c;background:#e2b6a8;border:1px solid rgba(140,37,25,.5)}
.obtain-shop .obtain-kind{color:#3a2a05;background:#f0dcac;border:1px solid rgba(184,138,20,.5)}
.obtain-barter .obtain-kind{color:#0d2c31;background:#bfe0e6;border:1px solid rgba(63,125,140,.5)}
.obtain-row>a,.obtain-row>span{display:flex;justify-content:space-between;gap:10px;min-width:0;padding:7px 9px;border:1px solid var(--rule-soft);border-radius:4px;background:rgba(255,248,232,.4);font-size:.8rem}
.obtain-row>a:hover{border-color:var(--info);background:rgba(63,125,140,.1)}
.obtain-row strong{min-width:0;color:var(--ink-strong);font-weight:600;overflow-wrap:anywhere}
.obtain-row>a span,.obtain-row>span span{flex:0 0 auto;font-family:var(--f-mono);color:var(--crimson)}
.obtain-more{margin-top:6px}
.obtain-more summary{cursor:pointer;font-family:var(--f-ui);font-weight:700;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--info-2);min-height:32px;display:flex;align-items:center}
.obtain-empty{margin:0;color:var(--ink-soft);font-size:.82rem;font-style:italic}
.map-links{margin-top:9px;display:flex;flex-wrap:wrap;gap:6px}
.map-links a{display:inline-flex;align-items:center;min-height:32px;padding:0 9px;border:1.5px solid var(--rule);border-radius:4px;background:rgba(255,248,232,.4);color:var(--ink);font-family:var(--f-ui);font-size:.7rem}
.drop-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.drop-row a{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1px 8px;min-width:0;padding:7px 9px;border:1px solid var(--rule-soft);border-radius:4px;background:rgba(255,248,232,.4);font-size:.8rem;line-height:1.25}
.drop-row a:hover{border-color:var(--info)}
.drop-row span{flex:1 1 100%;min-width:0;color:var(--ink);overflow-wrap:break-word;word-break:normal;hyphens:none}
.drop-row strong{flex:0 0 auto;margin-left:auto;font-family:var(--f-mono);color:var(--crimson)}
.drop-row.drop-mvp a{border-color:rgba(184,138,20,.55);background:rgba(232,192,115,.16)}

/* ---- mapa: mundi com miniaturas, como a tela de mundo do jogo ---- */
.map-world{position:relative;margin-bottom:14px}
.compass-rose{position:absolute;top:-6px;right:-4px;width:76px;height:76px;opacity:.85;pointer-events:none;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
.map-shell{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;align-items:start}
.map-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;padding:10px;border-radius:8px;
  background:radial-gradient(circle at 30% 20%,#241a10,#0c0805 72%);box-shadow:inset 0 0 0 1.5px rgba(232,192,115,.22),inset 0 2px 10px rgba(0,0,0,.6)}
.map-cell{grid-column:var(--col);grid-row:var(--row);position:relative;aspect-ratio:1/1;overflow:hidden;border:1.5px solid rgba(20,14,9,.7);border-radius:5px;
  border-top:3px solid var(--accent,#8c2519);cursor:pointer;background:#14100a;isolation:isolate;transition:transform .12s ease,box-shadow .12s ease}
.map-cell .cell-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(.75) brightness(.72);transition:filter .15s ease,transform .3s ease}
.map-cell .cell-noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(135deg,#2a2015,#2a2015 6px,#221a10 6px,#221a10 12px);color:rgba(232,192,115,.35);font-family:var(--f-disp);font-size:1.4rem}
.map-cell .cell-label{position:absolute;left:0;right:0;bottom:0;padding:3px 5px 4px;background:linear-gradient(180deg,transparent,rgba(8,5,3,.92) 60%);color:#fff2e0}
.map-cell .cell-label strong{display:block;font-family:var(--f-ui);font-weight:700;font-size:.6rem;line-height:1.15;letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 1px rgba(0,0,0,.9)}
.map-cell .cell-label small{display:block;font-family:var(--f-mono);font-size:.56rem;color:var(--gold);opacity:.9}
.map-cell:hover,.map-cell.active{transform:translateY(-2px) scale(1.04);z-index:3;box-shadow:0 6px 14px rgba(0,0,0,.6),0 0 0 2px var(--info)}
.map-cell:hover .cell-bg,.map-cell.active .cell-bg{filter:saturate(1.05) brightness(.95);transform:scale(1.08)}
.map-detail{--bw:16px;padding:calc(var(--bw) + 8px);position:sticky;top:84px}
.map-detail .detail-thumb{width:100%;aspect-ratio:16/10;border-radius:6px;overflow:hidden;margin-bottom:10px;border:2px solid #150d09;background:#14100a}
.map-detail .detail-thumb img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(.85)}
.map-detail h2{margin:0 0 6px;font-family:var(--f-disp);font-weight:400;font-size:1.8rem;color:var(--ink-strong)}
.mob-list{display:grid;gap:8px;margin-top:12px}
.mob-row{display:flex;justify-content:space-between;gap:8px;padding:9px 10px;border:1px solid var(--rule-soft);border-radius:5px;background:rgba(255,248,232,.4);color:var(--ink)}
.mob-row:hover{border-color:var(--info)}

.empty{padding:20px 18px;border:2px dashed rgba(232,192,115,.5);border-radius:6px;background:rgba(10,8,6,.5);color:#e7dcc3;text-align:center;font-family:var(--f-ui)}

/* ---- rodape ---- */
.db-foot{position:relative;z-index:2;flex:none;margin-top:10px;background:linear-gradient(180deg,rgba(10,7,5,.7),rgba(6,4,3,.96));border-top:1.5px solid rgba(232,192,115,.24)}
.db-foot-inner{max-width:1320px;margin:0 auto;padding:20px var(--gut) 24px}
.db-foot nav{display:flex;flex-wrap:wrap;gap:6px 20px;margin-bottom:10px}
.db-foot nav a{font-family:var(--f-ui);font-weight:700;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;min-height:32px}
.db-foot nav a:hover{color:#fff}
.db-foot p{margin:0;max-width:820px;font-size:.76rem;line-height:1.5;color:#b8ab8c}

/* ---- responsivo ---- */
@media (max-width:1180px){
  .flux-nav a{padding:0 9px;font-size:.68rem;letter-spacing:.09em}
  .item-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
}
@media (max-width:980px){
  .flux-top-inner{flex-wrap:wrap;row-gap:0;padding-bottom:6px}
  .flux-nav{order:3;flex:1 0 100%;margin:0;padding-bottom:4px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent)}
  .home-grid{grid-template-columns:1fr}
  .map-shell{grid-template-columns:1fr}
  .map-detail{position:static}
  .map-grid{grid-template-columns:repeat(4,minmax(60px,1fr))}
  .map-cell{grid-column:auto;grid-row:auto}
}
@media (max-width:900px) and (min-width:641px){
  .toolbar{gap:8px}
}
@media (max-width:640px){
  .flux-top-inner{position:relative;top:0;width:auto;max-width:none;margin:8px 8px 0;border-width:0 24px;border-image-width:0 24px 0 24px;gap:10px}
  .brand img{height:32px}
  .brand .b-tag{font-size:.56rem;padding:4px 7px;letter-spacing:.14em}
  .db-head{padding:18px 18px 16px;--bw:14px}
  .db-head h1{font-size:2.1rem}
  .lead{font-size:.94rem}
  .wrap{padding-top:20px}
  .toolbar{flex-direction:column;align-items:stretch}
  .toolbar .input-wrap{flex:1 1 auto}
  label.chk{min-height:44px}
  .btn-go{width:100%}
  .item-grid,.monster-grid{grid-template-columns:1fr}
  .item-card{grid-template-columns:46px minmax(0,1fr);--bw:12px}
  .item-card img{width:42px;height:42px}
  .monster-card{--bw:12px}
  .monster-card .monster-photo{aspect-ratio:4/3}
  .item-card h2,.monster-card h2{font-size:1.2rem}
  .drop-list{grid-template-columns:1fr}
  .obtain-row{grid-template-columns:46px minmax(0,1fr)}
  .combat-stats{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px 3px;padding:7px}
  .cstat{font-size:.64rem}
  .cstat b{font-size:.5rem}
  .home-card{min-height:0;padding:calc(var(--bw) + 14px) calc(var(--bw) + 12px)}
  .home-card strong{font-size:2.1rem}
  .tabs{gap:5px}
  .tabs button,.tabs a{min-height:40px;padding:0 11px;font-size:.68rem}
  .db-foot nav{gap:4px 16px}
  .map-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .map-shell{gap:14px}
  .compass-rose{width:56px;height:56px}
  .map-cell .cell-label strong{font-size:.64rem}
  .map-cell .cell-label small{font-size:.58rem}
  .pagination{gap:10px}
  .page-btn{padding:0 14px;font-size:.66rem}
  .page-info{min-width:0;font-size:.7rem}
}
@media (max-width:380px){
  .map-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- card de monstro v2 (08/10/2026): topo 2:1 (imagem | atributos), mapas e drops embaixo ---- */
.monster-card .monster-top{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.monster-card .monster-top .monster-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.monster-card .monster-top .combat-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px}
.monster-card .monster-top .map-links{margin-top:9px}
.drop-row a{align-items:center}
.drop-row .drop-icon{flex:0 0 24px;width:24px;height:24px;image-rendering:pixelated;margin-right:4px}
.drop-row .drop-icon + span{flex:1 1 0}
@media (max-width:700px){
  .monster-card .monster-top{grid-template-columns:1fr}
}

/* 08/10/2026: 3 monstros por linha (2 em telas medias, 1 no celular) */
.monster-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1100px){.monster-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.monster-grid{grid-template-columns:1fr}}

/* ---- card de monstro v3 (08/10/2026): 3 por linha, compacto ---- */
.monster-card{gap:10px}
.monster-card .monster-head h2{margin:0}
.monster-card .monster-head .tags{margin-top:6px}
.monster-card .monster-top{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch}
.monster-card .monster-top .monster-photo{aspect-ratio:1/1;padding:10px}
.monster-card .monster-top .monster-main{display:flex}
.monster-card .monster-top .combat-stats{flex:1;margin:0;grid-template-columns:1fr;grid-auto-rows:1fr;gap:0;padding:6px 10px}
.monster-card .monster-top .cstat{flex-direction:row;justify-content:space-between;align-items:center;border-bottom:1px dotted var(--rule-soft);padding:0 2px;font-size:.78rem}
.monster-card .monster-top .cstat:last-child{border-bottom:0}
.monster-card .monster-top .cstat b{font-size:.62rem}
.monster-card .monster-bottom .map-links{margin:0 0 2px}
.monster-card .monster-drops{margin-top:8px;padding-top:8px}
.monster-card .drop-row a{flex-wrap:nowrap;padding:5px 7px;font-size:.74rem;gap:6px}
.monster-card .drop-row .drop-icon{flex:0 0 22px;width:22px;height:22px;margin:0}
.monster-card .drop-row span{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.monster-card .drop-row strong{font-size:.7rem}

/* 08/10/2026: miniatura do monstro nas fontes de drop e na lista do mapa */
.mob-thumb{flex:0 0 30px;width:30px;height:30px;object-fit:contain;image-rendering:pixelated;border-radius:4px;background:radial-gradient(circle at 40% 30%,#2c2013,#160f08)}
.obtain-row>a{align-items:center}
.obtain-row>a .mob-thumb + strong{flex:1 1 auto}
.mob-row{align-items:center}
.mob-row .mob-thumb + span{flex:1 1 auto}