/* === TEMA DA INTERFACE (tinta e pergaminho) === */
/* =====================================================================================
   SHINOBI FOLHA — tema "tinta e pergaminho"
   Superfícies de tinta (quase preto com um toque de roxo), molduras finas em bronze, pergaminho creme
   para destaques, laranja-Konoha como acento e vermelho-Folha nos detalhes. Chapado, sem brilhos pesados.
   Tudo em rem: a raiz escala com a largura da janela (13px em 720p, ~14px em 1080p, ~17px em 1440p).
   ===================================================================================== */
:root{
  --bg:#0f0d12; --panel:#1b1720; --panel2:#262029; --panel3:#322a36; --line:#09070b; --edge:#54452f; --edge2:#8a7147; --hi:#3d343f;
  --txt:#efe7d6; --dim:#b4a78f; --mute:#9a8f7e;
  --or:#ff8a1e; --or2:#d8560f; --gold:#f3c969; --red:#e5483a; --green:#5fe08a; --blue:#6ab4ff;
  --parch:#eadbb3; --parch-d:#c7b17f; --konoha:#c0322b;
  --ui:'Segoe UI','Trebuchet MS',Tahoma,system-ui,sans-serif;
  --disp:'Trebuchet MS','Segoe UI',system-ui,sans-serif;
  --leaf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5C6 5.5 3.6 11 5.6 16.2c1.5 3.6 5 5.6 6.4 6.3 1.4-.7 4.9-2.7 6.4-6.3C20.4 11 18 5.5 12 1.5z' fill='%23ff8a1e' stroke='%231a0e08' stroke-width='1.2'/%3E%3Cpath d='M12 7.5a4.5 4.5 0 1 0 4.5 4.5c0-2.4-1.9-3.6-3.6-3.6-1.8 0-3 1.2-3 3 0 1.5 1.1 2.4 2.3 2.2' fill='none' stroke='%231a0e08' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --lock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='11' width='14' height='10' rx='2' fill='%23d9d0bc'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3' fill='none' stroke='%23d9d0bc' stroke-width='2.4'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:#5a4a33 #0f0c12}
*::-webkit-scrollbar{width:.55rem;height:.55rem}
*::-webkit-scrollbar-track{background:#0f0c12}
*::-webkit-scrollbar-thumb{background:#4d3f2b;border:1px solid #0f0c12;border-radius:2px}
*::-webkit-scrollbar-thumb:hover{background:#6d5a3c}
html{font-size:clamp(13px,calc(.52vw + 4.6px),22px)}
html,body{margin:0;height:100%;overflow:hidden;background:#000;color:var(--txt);font-family:var(--ui);font-size:1rem;user-select:none;-webkit-user-select:none;-webkit-font-smoothing:antialiased}
canvas{image-rendering:pixelated}
.hidden{display:none!important}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--or);outline-offset:1px}
::selection{background:#ff8a1e55}
kbd{font-family:inherit}

/* ---------- layout do cliente ---------- */
#app{display:flex;height:100vh;width:100vw;background:#000}
#left{flex:1;display:flex;flex-direction:column;min-width:0}
#gamewrap{flex:1;position:relative;min-height:0;background:#000;overflow:hidden}
#game{position:absolute;left:0;top:0;width:100%;height:100%;display:block;image-rendering:pixelated}

/* ---------- console / chat ---------- */
#console{height:11.4rem;background:#0c0a0f;border-top:2px solid var(--edge);box-shadow:inset 0 1px 0 #000;display:flex;flex-direction:column}
#tabs{display:flex;gap:.2rem;padding:.3rem .5rem 0;background:#120f16;border-bottom:1px solid #000}
.tab{padding:.28rem 1rem;background:#1c1720;color:var(--dim);border:1px solid #000;border-bottom:none;border-radius:3px 3px 0 0;cursor:pointer;font-size:.8rem;font-weight:600;letter-spacing:.03em}
.tab:hover{color:var(--txt);background:#241d29}
.tab.sel{background:#0c0a0f;color:var(--or);box-shadow:inset 0 2px 0 var(--or)}
#chat{flex:1;overflow-y:auto;padding:.3rem .7rem .4rem;font-size:.88rem;line-height:1.42;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 .9rem);mask-image:linear-gradient(to bottom,transparent 0,#000 .9rem)}
#chat .ln{white-space:pre-wrap;word-break:break-word;padding-left:.45rem;border-left:2px solid transparent}
#chat .ln[data-ch=chat]{border-left-color:#3c5d88}
#chat .ln .tm{color:#6f6556;font-size:.72rem;margin-right:.5rem;font-variant-numeric:tabular-nums}
#chatIn{flex:none;margin:0;border:0;border-top:1px solid #2a2230;background:#15111a;color:#fff;padding:.5rem .8rem;font-size:.92rem;font-family:inherit;outline:none;user-select:text;-webkit-user-select:text}
#chatIn:focus{background:#1c1622;box-shadow:inset 0 2px 0 var(--or)}
#chatIn::placeholder{color:#7a6f60}

/* ---------- barra lateral ---------- */
#side{width:23.6rem;flex:none;background:#120f16;border-left:2px solid var(--edge);box-shadow:inset 1px 0 0 #000;overflow-y:auto;padding:.5rem;display:flex;flex-direction:column;gap:.5rem}
.panel{background:var(--panel);border:1px solid var(--edge);border-radius:3px;box-shadow:inset 0 0 0 1px #000,0 2px 0 #0008}
.ph{display:flex;align-items:center;gap:.5rem;height:1.95rem;padding:0 .7rem;background:linear-gradient(#2b2431,#221c28);border-bottom:1px solid #000;box-shadow:inset 0 1px 0 #ffffff12;font-size:.74rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--parch);border-radius:2px 2px 0 0}
.ph::before{content:'';flex:none;width:1.05rem;height:1.05rem;background:var(--leaf) center/contain no-repeat}
.ph>span:first-child{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph em{font-style:normal;font-weight:500;color:var(--dim);font-size:.7rem;letter-spacing:.02em;text-transform:none;white-space:nowrap}
.panel .bd{padding:.55rem}
#side .panel.collapsed .bd{display:none}
#side .panel:not(#pMini):not(#pStat) .ph::after{content:'';flex:none;width:.5rem;height:.5rem;border-right:2px solid var(--dim);border-bottom:2px solid var(--dim);transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s}
#side .panel.collapsed:not(#pMini):not(#pStat) .ph::after{transform:rotate(-45deg)}
#side .panel:not(#pMini):not(#pStat) .ph:hover{color:#fff}
#side .panel:not(#pMini):not(#pStat) .bd{animation:unfold .18s ease-out}
@keyframes unfold{from{opacity:0;transform:translateY(-4px)}}

/* minimapa com moldura */
#pMini .ph{background:linear-gradient(#3a1f1c,#2a1714);border-bottom-color:#000}
#pMini #mapName{color:var(--parch)}
#coords{font-variant-numeric:tabular-nums}
.bd.mini{position:relative;display:flex;justify-content:center;padding:.5rem;background:#0c0a0e}
.mmframe{position:relative;width:100%;max-width:15.6rem;aspect-ratio:1;padding:.22rem;background:linear-gradient(135deg,#8a7147,#3f3120 45%,#8a7147);border-radius:3px;box-shadow:0 0 0 1px #000,0 3px 8px #000a}
#minimap{display:block;width:100%;height:100%;background:#000;border:1px solid #000;image-rendering:pixelated;border-radius:1px}
.compass{position:absolute;right:.1rem;top:.1rem;width:2.3rem;height:2.3rem;pointer-events:none;filter:drop-shadow(0 1px 1px #000)}

/* cartão do personagem */
#pStat .bd{padding:.6rem}
.charcard{display:flex;gap:.7rem;align-items:center;margin-bottom:.55rem}
.portrait{position:relative;flex:none;width:4.3rem;height:4.3rem;border:2px solid var(--edge2);border-radius:3px;background:radial-gradient(circle at 50% 35%,#46364a,#17111c 75%);box-shadow:0 0 0 1px #000,inset 0 0 10px #000a}
.portrait canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.lvbadge{position:absolute;right:-.45rem;bottom:-.45rem;min-width:1.55rem;height:1.55rem;padding:0 .25rem;display:flex;align-items:center;justify-content:center;border-radius:1rem;background:var(--or2);color:#fff;border:2px solid #1a0e08;font-size:.74rem;font-weight:800;box-shadow:0 1px 3px #000a}
.cinfo{flex:1;min-width:0}
#plateName{font-size:1.1rem;font-weight:800;color:#fff;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 0 #000}
#plateSub{font-size:.76rem;color:var(--parch-d);letter-spacing:.04em;margin-top:.1rem}
.barrow{display:flex;align-items:center;gap:.45rem;margin:.32rem 0}
.bic{flex:none;width:1.15rem;height:1.15rem;background-position:center;background-repeat:no-repeat;background-size:contain}
.bic.hp{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7-4.6-9-9.2C1.6 8 4 5 7 5c2 0 3.5 1 5 3 1.5-2 3-3 5-3 3 0 5.4 3 4 6.8-2 4.6-9 9.2-9 9.2z' fill='%23e5483a' stroke='%23200808' stroke-width='1.4'/%3E%3C/svg%3E")}
.bic.mp{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='%231d4fd0' stroke='%2306122e' stroke-width='1.4'/%3E%3Cpath d='M12 6.3a5.7 5.7 0 1 0 5.7 5.7c0-3-2.3-4.5-4.4-4.5-2.2 0-3.7 1.5-3.7 3.6 0 1.8 1.4 3 2.9 2.7' fill='none' stroke='%23d9e8ff' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E")}
.bic.xp{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6 6.6.8-4.9 4.5 1.4 6.5L12 17l-6 3.3 1.4-6.5L2.5 9.3l6.6-.8L12 2.5z' fill='%23f3c969' stroke='%23261b05' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E")}
.bic.fire{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c1 4 6 6 6 12a6 6 0 0 1-12 0c0-3 2-4.5 2.5-7C10 8 11 5 12 2z' fill='%23ff8a1e' stroke='%23300c02' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M12 12c.8 2 2.6 2.8 2.6 4.8a2.6 2.6 0 0 1-5.2 0c0-1.6 1.5-2.4 2.6-4.8z' fill='%23ffe28a'/%3E%3C/svg%3E")}
.bar{position:relative;flex:1;height:1.18rem;background:#07050a;border:1px solid #000;border-radius:2px;box-shadow:0 0 0 1px #4a3c2a;overflow:hidden}
.bar>i{position:absolute;left:0;top:0;bottom:0;width:100%;background:#00b800;transition:width .14s;z-index:1}
.bar>i::after{content:'';position:absolute;left:0;right:0;top:0;height:38%;background:rgba(255,255,255,.15)}
.bar>b.chip{position:absolute;left:0;top:0;bottom:0;width:100%;background:#f5e6c0;opacity:.85;transition:width .7s ease-out .25s;z-index:0}
.bar>span{position:absolute;inset:0;z-index:2;text-align:center;font-size:.72rem;font-weight:700;line-height:1.1rem;color:#fff;letter-spacing:.02em;font-variant-numeric:tabular-nums;text-shadow:0 0 2px #000,1px 1px 0 #000,-1px -1px 0 #000}
.bar.mp>i{background:linear-gradient(#3b7bff,#1b47c2)}
.bar.xp>i{background:linear-gradient(#e8c24a,#a07d1c)}
.bar.fire>i{background:linear-gradient(#ffb03a,#d8430a)}

/* botões do menu lateral: grade de ícones */
#menubtns{display:grid;grid-template-columns:repeat(4,1fr);gap:.3rem}
.mb{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.14rem;min-height:3.35rem;padding:.3rem .1rem .2rem;background:var(--panel2);border:1px solid var(--edge);border-radius:3px;box-shadow:inset 0 0 0 1px #000;color:var(--txt);font-size:.66rem;font-weight:700;letter-spacing:.03em;cursor:pointer;line-height:1.05;transition:background .12s,border-color .12s,transform .08s}
.mb svg{width:1.3rem;height:1.3rem;fill:none;stroke:var(--parch);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mb kbd{display:block;font-size:.58rem;font-weight:600;color:var(--mute);letter-spacing:.06em}
.mb:hover{background:var(--panel3);border-color:var(--edge2)}
.mb:hover svg{stroke:#fff}
.mb:active{transform:translateY(1px)}
.mb.alert{border-color:var(--green);color:var(--green);animation:pulse 1.1s infinite}
.mb.alert svg{stroke:var(--green)}
@keyframes pulse{50%{background:#26422f}}
.mb.gm{color:#ffd24a;background:#3b2a08;border-color:#7a5a16}

/* vontade do fogo / grupo / jogadores / missões / batalha */
.firebuff{margin-top:.35rem;font-size:.72rem;color:var(--dim)}
.firebuff.on{color:#ffb060;font-weight:700}
.fireinv{margin-top:.3rem;font-size:.78rem;font-weight:800;color:#ff6a4a;letter-spacing:.03em}
.fireinv:empty{display:none}
#pFire .bar{height:1.3rem}
.prow{display:flex;align-items:center;gap:.45rem;padding:.25rem .45rem;background:#15111a;border:1px solid #000;border-radius:2px;cursor:pointer;margin-bottom:.2rem}
.prow:hover{background:#221b27}
.prow .nm{flex:1;font-size:.8rem;color:#7dffb0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.prow .lv{font-size:.7rem;color:var(--dim)}
.prow .hb{width:4.4rem;height:.42rem;background:#000;box-shadow:0 0 0 1px #4a3c2a;border-radius:1px}
.prow .hb i{display:block;height:100%}
#partyLeave{cursor:pointer;color:#ff9a7a;text-decoration:underline;font-size:.7rem}
#onlineList{display:flex;flex-direction:column;gap:.15rem;max-height:10rem;overflow-y:auto}
.orow{display:flex;gap:.45rem;align-items:baseline;padding:.22rem .45rem;background:#15111a;border:1px solid #000;border-radius:2px;cursor:pointer;font-size:.78rem}
.orow:hover{background:#221b27}
.orow .nm{flex:1;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.orow.me .nm{color:var(--gold)}
.orow .lv{color:var(--dim);font-size:.7rem}
.orow .mp{color:#7ab8ff;font-size:.68rem;max-width:5.4rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#questTrack{font-size:.82rem;line-height:1.45;color:var(--txt)}
#questTrack b{color:var(--or)}
#battle{min-height:2rem;display:flex;flex-direction:column;gap:.22rem}
.brow{position:relative;display:flex;align-items:center;gap:.5rem;padding:.22rem .5rem .22rem .6rem;background:#15111a;border:1px solid #000;border-radius:2px;cursor:pointer;overflow:hidden}
.brow:hover{background:#221b27}
.brow.tgt{box-shadow:inset 0 0 0 1px var(--red);background:#2a1618}
.brow .thr{position:absolute;left:0;top:0;bottom:0;width:.26rem;background:#3a3a3a}
.brow .thr.t0{background:#5a6168}.brow .thr.t1{background:#4cc46a}.brow .thr.t2{background:#e8d23a}.brow .thr.t3{background:#ff8a1e}.brow .thr.t4{background:#ee3b34}
.brow canvas{width:1.75rem;height:1.75rem;flex:none;image-rendering:pixelated}
.brow .nm{font-size:.78rem;color:var(--txt);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.brow .hb{width:4.6rem;height:.5rem;background:#000;box-shadow:0 0 0 1px #4a3c2a;border-radius:1px}
.brow .hb i{display:block;height:100%;transition:width .12s}
.bempty{color:var(--mute);font-size:.78rem;padding:.3rem .2rem;font-style:italic}

/* ---------- slots (mochila / equipamento / loja) ---------- */
.slot{position:relative;width:2.5rem;height:2.5rem;background:#120f15;border:1px solid #000;border-radius:2px;box-shadow:inset 0 0 0 1px #2c2532;cursor:pointer;transition:box-shadow .1s}
.slot canvas{position:absolute;left:50%;top:50%;width:2.1rem;height:2.1rem;transform:translate(-50%,-50%);image-rendering:pixelated}
.slot:hover{box-shadow:inset 0 0 0 1px var(--gold)}
.slot.sel{box-shadow:inset 0 0 0 1px var(--or),0 0 .6rem #ff8a1e66}
.slot .key{position:absolute;left:.12rem;top:.02rem;font-size:.62rem;font-style:normal;color:#ffd98a;text-shadow:1px 1px 0 #000,-1px 0 0 #000,0 -1px 0 #000;font-weight:800}
.slot .cost{position:absolute;right:.15rem;bottom:0;font-size:.64rem;color:#8fc4ff;text-shadow:1px 1px 0 #000,-1px 0 0 #000;font-weight:800}
.slot .qty{position:absolute;right:.15rem;bottom:0;font-size:.66rem;color:#fff;text-shadow:1px 1px 0 #000,-1px 0 0 #000,0 1px 0 #000;font-weight:800;font-variant-numeric:tabular-nums}
.slot.r-magic{box-shadow:inset 0 0 0 1px #3f73b8,inset 0 0 .45rem #3f73b855}
.slot.r-exc{box-shadow:inset 0 0 0 1px #34a862,inset 0 0 .5rem #34a86266}
.slot.r-anc{box-shadow:inset 0 0 0 1px #d6ab3c,inset 0 0 .6rem #d6ab3c88}
.slot.r-magic:hover,.slot.r-exc:hover,.slot.r-anc:hover{box-shadow:inset 0 0 0 1px var(--gold),inset 0 0 .5rem #ffffff33}
.eq{display:grid;grid-template-columns:repeat(3,3.6rem);grid-template-rows:repeat(2,3.6rem);gap:.5rem;justify-content:center;padding:.15rem 0}
.eq .slot{width:3.6rem;height:3.6rem;background:#0f0c13;box-shadow:inset 0 0 0 1px #3a3040}
.eq .slot canvas{width:2.7rem;height:2.7rem}
.eq .slot::before{content:attr(data-label);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.6rem;letter-spacing:.06em;color:#4f4658;text-transform:uppercase;text-align:center;padding:.2rem;font-weight:700}
.eq .slot.has::before{display:none}
.bag{display:grid;grid-template-columns:repeat(8,2.5rem);gap:.14rem;justify-content:center;padding:.1rem 0}
.bag .slot:not(.has){background:#0e0b12;box-shadow:inset 0 0 0 1px #221c27}
.shopgrid{display:grid;grid-template-columns:repeat(8,2.5rem);gap:.14rem;justify-content:center}

/* ---------- HUD de ações: orbes + barra ---------- */
#bar{position:absolute;left:50%;bottom:.55rem;transform:translateX(-50%);display:flex;align-items:flex-end;gap:.7rem;pointer-events:none}
#bar>*{pointer-events:auto}
.orb{position:relative;flex:none;width:5.2rem;height:5.2rem;border-radius:50%;background:#0a070c;border:3px solid #1d140b;box-shadow:0 0 0 2px var(--edge2),0 4px 10px #000b,inset 0 0 14px #000d;overflow:hidden;cursor:default}
.orb .lq{position:absolute;left:0;right:0;bottom:0;height:100%;transition:height .18s}
.orb.hp .lq{background:linear-gradient(#e0383e,#8a1016)}
.orb.mp .lq{background:linear-gradient(#3d86ff,#173a9e)}
.orb .lq::before{content:'';position:absolute;left:-15%;right:-15%;top:-.42rem;height:.9rem;border-radius:50%;background:inherit;filter:brightness(1.3);animation:orbwave 2.6s ease-in-out infinite alternate}
@keyframes orbwave{from{transform:translateX(-6%)}to{transform:translateX(6%)}}
.orb::after{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.16),transparent 38%);pointer-events:none}
.orb span{position:absolute;left:0;right:0;bottom:.5rem;text-align:center;z-index:2;font-size:.72rem;font-weight:800;color:#fff;text-shadow:0 0 3px #000,1px 1px 0 #000,-1px -1px 0 #000;font-variant-numeric:tabular-nums}
.orb i.ol{position:absolute;left:0;right:0;top:.55rem;text-align:center;z-index:2;font-style:normal;font-size:.56rem;letter-spacing:.14em;font-weight:800;color:#ffffffaa;text-shadow:1px 1px 0 #000}
.bslots{display:flex;align-items:flex-end;gap:.32rem;padding:.42rem .55rem;background:linear-gradient(#1f1924f2,#120f16f2);border:1px solid var(--edge);border-radius:5px;box-shadow:0 4px 14px #000b,inset 0 0 0 1px #000,inset 0 1px 0 #ffffff14}
.bslots .sep{align-self:stretch;width:1px;margin:.2rem .2rem;background:linear-gradient(transparent,var(--edge2),transparent)}
#bar .slot{width:3.6rem;height:3.6rem;background:#0f0c13;border:2px solid #3b2f24;border-radius:3px;box-shadow:inset 0 0 0 1px #000,inset 0 0 .5rem #000c}
#bar .slot.pot{width:3rem;height:3rem}
#bar .slot canvas{left:.2rem;top:.2rem;width:calc(100% - .4rem);height:calc(100% - .4rem);transform:none;image-rendering:auto}
#bar .slot:hover{border-color:var(--gold);box-shadow:inset 0 0 0 1px #000,0 0 .7rem #f3c96955}
#bar .slot.sel{border-color:var(--or);box-shadow:inset 0 0 0 1px #000,0 0 .8rem #ff8a1e88}
#bar .slot .key{left:-.05rem;top:-.05rem;padding:0 .3rem;background:#000d;border:1px solid var(--edge);border-radius:2px;color:var(--gold);font-size:.62rem;line-height:.95rem;z-index:3}
#bar .slot .cost{right:.2rem;bottom:.08rem;font-size:.72rem;z-index:3}
#bar .slot.pot .cost{color:#fff}
#bar .slot .cd{position:absolute;inset:2px;background:conic-gradient(rgba(6,4,10,.78) calc(var(--p,0)*360deg),transparent 0);pointer-events:none;z-index:2;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:800;color:#fff;text-shadow:0 0 3px #000,1px 1px 0 #000}
#bar .slot .cd::after{content:attr(data-t)}
#bar .slot.locked canvas{opacity:.3;filter:grayscale(.6)}
#bar .slot.locked::after{content:attr(data-lock);position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:.25rem;font-size:.66rem;font-weight:800;color:#d9d0bc;text-shadow:1px 1px 0 #000;background:var(--lock) center 22%/42% no-repeat;z-index:3}

/* ---------- avisos e faixas sobre o jogo ---------- */
#notice{position:absolute;left:0;right:0;top:28%;display:flex;justify-content:center;pointer-events:none;opacity:0;z-index:8}
#notice.show{animation:noticeIn .32s ease-out forwards}
@keyframes noticeIn{from{opacity:0;transform:translateY(-10px) scaleY(.85)}to{opacity:1;transform:none}}
#notice span{display:block;padding:.5rem 4rem;font-weight:700;font-size:1.05rem;letter-spacing:.03em;color:var(--parch);text-align:center;text-shadow:0 1px 0 #000;background:linear-gradient(90deg,transparent,rgba(14,10,18,.92) 15%,rgba(14,10,18,.92) 85%,transparent);border-top:1px solid #8a714777;border-bottom:1px solid #8a714777}
#notice.big span{padding:.75rem 5rem;font-size:1.9rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#ffb347;text-shadow:0 0 .7rem #ff8a1e88,0 .18rem 0 #000;border-top:2px solid #c9a040;border-bottom:2px solid #c9a040}
#recallbar{position:absolute;left:50%;top:58%;width:9rem;height:.75rem;margin-left:-4.5rem;background:#07050a;border:1px solid #000;border-radius:2px;box-shadow:0 0 0 1px #4a3c2a;overflow:hidden;z-index:6}
#recallbar div{height:100%;width:0;background:linear-gradient(#8fe0ff,#3b9ad0)}
#recallbar::after{content:'Hiraishin';position:absolute;left:0;right:0;top:-1.2rem;text-align:center;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#bfeaff;text-shadow:1px 1px 0 #000}
#reconn{position:absolute;left:50%;top:2.9rem;transform:translateX(-50%);z-index:6;padding:.4rem 1.1rem;background:rgba(72,44,8,.95);border:1px solid #b8801c;border-radius:3px;color:#ffd98a;font-weight:700;font-size:.82rem;white-space:nowrap;animation:autopulse 1.2s infinite}
#duelBar{position:absolute;left:50%;top:3rem;transform:translateX(-50%);z-index:6;padding:.35rem 1.3rem;background:linear-gradient(#5a1818,#3c0f10);border:1px solid #c04040;border-radius:3px;color:#ffc9c9;font-weight:800;font-size:.85rem;letter-spacing:.08em;white-space:nowrap;box-shadow:0 2px 8px #000a}
#invites{position:absolute;right:.7rem;top:3.4rem;z-index:7;display:flex;flex-direction:column;gap:.45rem;align-items:flex-end}
.inv{display:flex;align-items:center;gap:.6rem;padding:.55rem .75rem;background:linear-gradient(#221b27f5,#15111af5);border:1px solid var(--edge2);border-left:4px solid var(--or);border-radius:3px;font-size:.85rem;box-shadow:0 4px 14px #000a;animation:slideIn .25s ease-out;max-width:26rem}
@keyframes slideIn{from{opacity:0;transform:translateX(14px)}}
.inv .btn{padding:.28rem .7rem;font-size:.75rem}
#pmenu{position:fixed;z-index:90;min-width:12.5rem;background:#16121b;border:1px solid var(--edge2);border-radius:3px;box-shadow:0 8px 24px #000c;font-size:.88rem;overflow:hidden}
#pmenu .mh{padding:.4rem .8rem;background:linear-gradient(#2b2431,#221c28);font-weight:800;color:#fff;border-bottom:1px solid #000;letter-spacing:.03em}
#pmenu .mi{padding:.42rem .8rem;cursor:pointer;color:var(--txt)}
#pmenu .mi:hover{background:#3a2c1e;color:#ffd98a}

/* botão de upar sozinho + status */
#autoBtn{position:absolute;right:.6rem;top:.6rem;z-index:5;display:flex;align-items:center;gap:.5rem;padding:.42rem .9rem;background:linear-gradient(#2e2016,#21160e);border:2px solid #c9a040;border-radius:3px;color:#ffd98a;font:800 .82rem var(--ui);letter-spacing:.08em;cursor:pointer;box-shadow:0 2px 0 #000,0 0 0 1px #000;transition:background .12s,transform .08s}
#autoBtn:hover{background:linear-gradient(#3e2b1b,#2c1d12);color:#fff2c4}
#autoBtn:active{transform:translateY(1px)}
#autoBtn kbd{display:inline-block;padding:0 .35rem;background:#000;border:1px solid #6b5630;border-radius:2px;color:#c9a040;font-size:.68rem;font-weight:800}
#autoBtn.on{background:linear-gradient(#1c4424,#123018);border-color:#3fbf55;color:#b6ffc3;animation:autopulse 1.6s infinite}
#autoBtn.on kbd{border-color:#2f7a3a;color:#7be38f}
#autoStatus{position:absolute;left:50%;top:.6rem;transform:translateX(-50%);z-index:5;padding:.42rem 1rem;background:rgba(14,36,20,.92);border:1px solid #2f7a3a;border-radius:3px;color:#a7ffb8;font-weight:700;font-size:.74rem;letter-spacing:.03em;cursor:pointer;white-space:nowrap;max-width:calc(100% - 25rem);overflow:hidden;text-overflow:ellipsis;animation:autopulse 1.8s infinite;box-shadow:0 2px 6px #0008}
@keyframes autopulse{50%{filter:brightness(1.25)}}

/* ---------- janelas flutuantes ---------- */
.win{position:fixed;background:var(--panel);border:1px solid var(--edge2);border-radius:4px;box-shadow:inset 0 0 0 1px #000,0 12px 34px #000d;z-index:20;animation:winIn .16s ease-out}
.win::after{content:'';position:absolute;inset:.22rem;border:1px solid #ffffff0b;border-radius:2px;pointer-events:none}
@keyframes winIn{from{opacity:0;transform:translateY(8px) scale(.985)}}
.win .hd{display:flex;align-items:center;gap:.55rem;padding:0 .5rem 0 .75rem;height:2.25rem;background:linear-gradient(#302736,#231c29);border-bottom:2px solid #8a2a22;box-shadow:inset 0 1px 0 #ffffff14;border-radius:3px 3px 0 0;cursor:grab}
.win .hd:active{cursor:grabbing}
.win .hd .emb{flex:none;width:1.25rem;height:1.25rem;background:var(--leaf) center/contain no-repeat}
.win .hd .ttl{flex:1;min-width:0;font-weight:800;font-size:.86rem;letter-spacing:.1em;text-transform:uppercase;color:var(--parch);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win .hd .x{flex:none;display:flex;align-items:center;justify-content:center;width:1.45rem;height:1.45rem;border-radius:3px;background:#1a1420;border:1px solid #000;color:var(--dim);cursor:pointer;font-size:.78rem;line-height:1;box-shadow:inset 0 0 0 1px #ffffff10}
.win .hd .x:hover{background:#7a2620;color:#fff}
.win .bd{padding:.85rem;font-size:.92rem}
#winChar{left:1rem;top:3rem;width:23.5rem}
#winShop{left:1rem;top:3rem;width:27.6rem;max-height:calc(100vh - 13rem)}
#winShop .bd{overflow:auto;max-height:calc(100vh - 17rem)}
#winDlg{left:calc(50% - 16rem);top:14%;width:32rem}
#winMenu{left:calc(50% - 12rem);top:16%;width:24rem}
#winAuto{left:1rem;top:3rem;width:28rem}
#winSquad{left:1rem;top:3rem;width:28rem}
#winPets{left:1rem;top:3rem;width:30rem;max-height:calc(100vh - 12rem)}
#winPets .bd{overflow:auto;max-height:calc(100vh - 17rem)}
body #winQuests{left:1rem;top:2.6rem;width:40rem;max-width:calc(100vw - 26rem)}
body #winQuests .bd{max-height:calc(100vh - 14rem)}
body #winMerit{left:calc(50% - 14rem);top:12%;width:28rem}
.sec{display:flex;align-items:center;gap:.6rem;color:var(--or);font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin:1rem 0 .55rem}
.sec::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,#8a714788,transparent)}
.sec:first-child{margin-top:0}
.hint{color:var(--dim);font-size:.78rem;margin-top:.55rem;line-height:1.5}
.hint b{color:var(--txt)}
.small{font-size:.76rem;color:var(--dim)}
.stat{display:flex;align-items:center;justify-content:space-between;padding:.28rem 0;border-bottom:1px solid #ffffff0d;font-size:.9rem}
.stat span{color:var(--dim)}
.stat b{color:var(--gold);font-weight:800;font-variant-numeric:tabular-nums}
.stat .btns{display:flex;gap:.45rem;align-items:center}
.stat .btns b{min-width:2.4rem;text-align:right}
.stat .plus{width:1.55rem;height:1.55rem;background:#5a4418;border:1px solid #000;border-radius:3px;color:var(--gold);cursor:pointer;font-size:1rem;line-height:1;padding:0;font-weight:800;box-shadow:inset 0 0 0 1px #ffffff1c}
.stat .plus:hover{background:#7d6022}
.stat .plus:disabled{opacity:.28;cursor:default}

/* botões e campos */
.btn{background:var(--panel2);border:1px solid #000;border-radius:3px;box-shadow:inset 0 0 0 1px var(--edge),inset 0 1px 0 #ffffff14;color:var(--txt);padding:.55rem 1rem;cursor:pointer;font-size:.82rem;font-weight:700;letter-spacing:.03em;transition:background .12s,transform .08s}
.btn:hover{background:var(--panel3);box-shadow:inset 0 0 0 1px var(--edge2),inset 0 1px 0 #ffffff1c}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(#e0621a,#b8420c);color:#fff;box-shadow:inset 0 0 0 1px #ffa35a,inset 0 1px 0 #ffffff33;text-shadow:0 1px 0 #6a2606}
.btn.primary:hover{background:linear-gradient(#ee6f24,#c84b10)}
.btn.block{display:block;width:100%;margin-top:.45rem}
.btn:disabled{opacity:.4;cursor:default}
select,input[type=text],input:not([type]),input[type=password]{background:#100d14;color:var(--txt);border:1px solid #000;border-radius:3px;box-shadow:inset 0 0 0 1px #3a3040;padding:.32rem .5rem;font-family:inherit;font-size:.8rem}
select:focus,input:focus{box-shadow:inset 0 0 0 1px var(--or)}
input[type=checkbox]{accent-color:var(--or);width:1rem;height:1rem}
.arow{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.25rem 0;font-size:.82rem}
.arow>span{color:var(--dim)}
.arow select,#winAuto select{max-width:15rem}
.chk{display:flex;align-items:center;gap:.5rem;padding:.25rem 0;font-size:.82rem;cursor:pointer;color:var(--txt)}
.chk input{margin:0}
.dlgtext{font-size:.95rem;line-height:1.6}
.dlgtext .q{display:block;color:var(--or);font-size:1.05rem;font-weight:800;margin-bottom:.35rem;letter-spacing:.02em}
.reward{margin-top:.6rem;padding:.5rem .7rem;color:var(--green);background:#13221a;border-left:3px solid var(--green);border-radius:2px;font-size:.85rem}
#winSquad input{user-select:text;-webkit-user-select:text}
.petrow{display:flex;gap:.7rem;align-items:flex-start;padding:.55rem;border:1px solid #000;border-radius:3px;background:#15111a;margin-bottom:.45rem;box-shadow:inset 0 0 0 1px #2a2230}
.petrow.act{background:#2a2015;box-shadow:inset 0 0 0 1px #c08a2a}
.petrow canvas{width:3.6rem;height:3.6rem;image-rendering:pixelated;flex:none;background:#0d0a11;border-radius:3px;box-shadow:inset 0 0 0 1px #2a2230}
.petrow .pi{flex:1;min-width:0;font-size:.88rem}
.petrow .pi .small{margin:.2rem 0}
.petrow .bar{margin-top:.35rem;height:.95rem}
.petrow .bar span{line-height:.9rem;font-size:.62rem}
.petrow .btn{padding:.3rem .65rem;font-size:.75rem;flex:none}

/* quests.js (classes qz-*): mesmo tema */
body .qz-top{font-size:.8rem;gap:.9rem}
body .qz-tabs{margin:0 -.85rem .7rem;padding:0 .85rem;gap:.2rem;border-bottom:1px solid #000}
body .qz-tab{padding:.35rem 1rem;background:#1c1720;border:1px solid #000;border-bottom:none;border-radius:3px 3px 0 0;font-size:.8rem;font-weight:600}
body .qz-tab.sel{background:var(--panel);color:var(--or);box-shadow:inset 0 2px 0 var(--or)}
body .qz-card{background:#15111a;border:1px solid #000;border-radius:3px;box-shadow:inset 0 0 0 1px #2a2230;padding:.5rem .65rem;margin:.4rem 0}
body .qz-ttl{font-size:1.02rem;font-weight:800}
body .qz-sub{font-size:.78rem}
body .qz-step{font-size:.86rem}
body .qz-rw{font-size:.8rem}
body .qz-bar{height:.8rem;background:#07050a;box-shadow:0 0 0 1px #4a3c2a;border-radius:2px;overflow:hidden}
body .qz-bar span{font-size:.62rem;line-height:.78rem}
body .qz-ch{font-size:.78rem}
body .btn.qz-sm{padding:.28rem .75rem;font-size:.75rem}
body #questTrack .qt{margin:0 0 .5rem;padding:0 0 .45rem;border-bottom:1px solid #ffffff14}
body #questTrack .qt-h{font-size:.64rem;letter-spacing:.1em;color:var(--parch-d)}

/* ---------- tooltip / item na mão ---------- */
#tip{position:fixed;z-index:60;max-width:19rem;min-width:11rem;background:#0f0c13f7;border:1px solid var(--edge2);border-top:3px solid #6b5a42;border-radius:3px;padding:.55rem .8rem .6rem;font-size:.82rem;line-height:1.5;pointer-events:none;box-shadow:0 8px 22px #000d}
#tip[data-r="1"]{border-top-color:#3f73b8}
#tip[data-r="2"]{border-top-color:#34a862}
#tip[data-r="3"]{border-top-color:#d6ab3c}
#tip .nm{font-weight:800;font-size:.95rem;margin-bottom:.25rem;line-height:1.3}
#tip .bad{color:#ff6a6a}
#tip .opt{color:#7ab8ff}
#tip .xo{color:#5fe08a}
#tip .dim{color:var(--dim)}
#held{position:fixed;z-index:70;pointer-events:none;width:2.3rem;height:2.3rem;opacity:.92}
#held canvas{width:100%;height:100%;image-rendering:pixelated}

/* ---------- transição / morte / desconexão ---------- */
#fade{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .3s;z-index:80}
#fade.on{opacity:1}
#death{position:fixed;inset:0;z-index:50;background:radial-gradient(ellipse at center,rgba(40,0,4,.55) 10%,rgba(90,0,8,.82) 62%,rgba(6,0,2,.96) 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;animation:deathIn .8s ease-out}
@keyframes deathIn{from{opacity:0}}
#death h1{font-family:var(--disp);font-size:clamp(2.6rem,5.2vw,5.4rem);font-weight:900;color:#e5483a;margin:0;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 0 .4rem #ff0000aa,0 .25rem 0 #000,-2px -2px 0 #000,2px -2px 0 #000;animation:deathShake 4s ease-in-out infinite}
@keyframes deathShake{0%,92%,100%{transform:none}94%{transform:translateX(-3px)}96%{transform:translateX(3px)}98%{transform:translateX(-2px)}}
#death::before{content:'';width:min(24rem,60vw);height:2px;background:linear-gradient(90deg,transparent,#e5483a,transparent);order:2}
#death p{color:#e8c8c0;margin:0 0 .6rem;font-size:1.05rem;order:3}
#death .btn{order:4;padding:.8rem 2rem;font-size:.95rem}
#disc{position:fixed;inset:0;z-index:90;background:rgba(8,8,16,.72);display:flex;align-items:center;justify-content:center}
#disc .dcard{width:min(32rem,92vw);padding:1.6rem 1.8rem;background:linear-gradient(#241d2b,#16121b);border:1px solid var(--edge2);border-top:4px solid var(--or);border-radius:4px;box-shadow:0 14px 44px #000e;text-align:center}
#disc h1{font-family:var(--disp);font-size:1.5rem;color:var(--parch);margin:0 0 .7rem;letter-spacing:.06em;text-transform:uppercase}
#disc h1::before{content:'';display:block;width:2.6rem;height:2.6rem;margin:0 auto .6rem;background:var(--leaf) center/contain no-repeat;filter:grayscale(.7) brightness(.8)}
#disc p{color:var(--txt);margin:0 0 .55rem;font-size:.95rem}
#disc .dhint{color:var(--dim);font-size:.8rem;margin-bottom:1.1rem;line-height:1.5}

/* ---------- tela inicial ---------- */
#start{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;background:radial-gradient(ellipse at 50% 0%,#5a2a0a 0%,#241208 40%,#0b0a0d 100%)}
#startbg{position:fixed;inset:0;width:100%;height:100%;image-rendering:pixelated;z-index:0}
#start::after{content:'';position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 45%,rgba(4,2,8,.72) 100%)}
.startbox{position:relative;z-index:2;width:min(60rem,94vw);text-align:center;padding:.6rem .6rem 1.2rem;margin:auto}
#logocv{display:block;margin:0 auto;width:min(31rem,86vw);height:auto;image-rendering:pixelated;filter:drop-shadow(0 .4rem .9rem rgba(0,0,0,.6))}
.srOnly{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tag{display:inline-block;color:#efe0c2;margin:.3rem auto .9rem;max-width:34rem;padding:.45rem 1.1rem;background:rgba(10,6,14,.62);border-radius:4px;font-size:.92rem;line-height:1.45;text-shadow:0 1px 3px #000}
#classes{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin-bottom:.9rem}
.card{position:relative;background:linear-gradient(#1d1622e6,#120d16ea);border:1px solid #3d2e22;border-radius:5px;padding:.8rem .8rem .8rem;cursor:pointer;transition:border-color .18s,transform .18s,box-shadow .18s,background .18s;box-shadow:0 6px 18px #0009}
.card:hover{border-color:#b8701c;transform:translateY(-4px);box-shadow:0 12px 26px #000b,0 0 1.2rem #ff8a1e22}
.card.sel{border-color:var(--or);background:linear-gradient(#2c1b12f0,#1a100cf0);box-shadow:0 10px 28px #000b,0 0 1.6rem #ff8a1e44}
.card.sel::before{content:'ESCOLHIDO';position:absolute;left:50%;top:-.65rem;transform:translateX(-50%);padding:.12rem .7rem;background:var(--or2);border:2px solid #1a0e08;border-radius:2px;color:#fff;font-size:.62rem;font-weight:800;letter-spacing:.16em}
.card canvas{width:min(10rem,100%);aspect-ratio:192/224;height:auto;display:block;margin:0 auto .2rem;image-rendering:pixelated;background:radial-gradient(ellipse at 50% 80%,#ffffff12,transparent 62%)}
.card h3{margin:0;font-family:var(--disp);color:#ffa23a;font-size:1.35rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 2px 0 #000}
.card .sh{color:#eadbb3;font-size:.8rem;margin-top:.15rem;letter-spacing:.04em}
.card p{margin:.55rem 0 0;font-size:.82rem;color:#c6b79f;line-height:1.5}
.card .sk{display:flex;flex-wrap:wrap;gap:.3rem;justify-content:center;margin-top:.7rem}
.card .sk i{font-style:normal;padding:.14rem .55rem;background:#0008;border:1px solid #5a3a1c;border-radius:1rem;color:#f0d3a0;font-size:.68rem;font-weight:600}
.row{display:flex;gap:.7rem;justify-content:center;margin:.55rem 0;flex-wrap:wrap}
.modes{display:inline-flex;margin:.2rem 0 .7rem;border:1px solid #4a3522;border-radius:4px;overflow:hidden;background:#0008}
.mode{padding:.55rem 1.6rem;background:transparent;color:#b5a385;cursor:pointer;font-weight:700;font-size:.85rem;letter-spacing:.03em}
.mode:hover{color:#fff}
.mode.sel{background:linear-gradient(#e0621a,#b8420c);color:#fff;text-shadow:0 1px 0 #6a2606}
#boxOnline,#boxSolo{max-width:38rem;margin:0 auto;padding:.7rem 1rem .3rem;background:#0b080ecc;border:1px solid #3d2e22;border-radius:5px}
.row:first-child{margin-top:0}
#nameInput,#accName,#accPass,#srvInput{background:#0b080d;border:1px solid #5a3a1c;border-radius:3px;box-shadow:inset 0 2px 6px #000a;color:var(--txt);padding:.65rem .9rem;font-size:1rem;width:15rem;outline:none;text-align:center;font-family:inherit;user-select:text;-webkit-user-select:text}
#srvInput{width:21rem}
#nameInput:focus,#accName:focus,#accPass:focus,#srvInput:focus{border-color:var(--or);box-shadow:inset 0 2px 6px #000a,0 0 0 2px #ff8a1e44}
#start .btn{padding:.7rem 1.5rem;font-size:.92rem}
.authmsg{min-height:1.3rem;margin:.3rem 0 0;font-size:.85rem;color:#ff8a7a}
.authmsg.ok{color:#8fdc8f}
.foot{margin-top:.9rem;font-size:.74rem;color:#a39278;line-height:1.9}
.foot kbd{display:inline-block;padding:0 .4rem;background:#0008;border:1px solid #5a4630;border-radius:3px;color:#e8d6b0;font-size:.72rem;font-weight:700}
.foot.fan{margin-top:.4rem;font-size:.68rem;color:#6d604d}
@media(max-width:860px){#classes{grid-template-columns:1fr}.card canvas{width:7rem}}
@media(max-height:820px){   /* telas baixas (720p): tudo da tela inicial cabe sem rolar */
  .startbox{padding-top:.3rem}
  #logocv{width:min(21rem,70vw)}
  .tag{display:none}
  .card{padding:.55rem .6rem}
  .card canvas{width:6.4rem}
  .card p{display:none}
  .card .sk{margin-top:.4rem}
  #classes{margin:.5rem 0 .6rem}
  .foot{margin-top:.5rem}
  .foot.fan{display:none}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

#startbg{object-fit:cover}
@media(max-height:820px){   /* telas baixas: lateral mais compacta para a Mochila caber quase inteira */
  .mmframe{max-width:7.6rem}
  .portrait,#pStat .portrait{width:3.2rem;height:3.2rem}
  .mb{min-height:2.5rem}.mb kbd{display:none}
  .bag{grid-template-columns:repeat(8,2.3rem)}
  .bag .slot{width:2.3rem;height:2.3rem}.bag .slot canvas{width:1.95rem;height:1.95rem}
  #side{gap:.3rem}
}
.win .bd{max-height:calc(100vh - 7rem);overflow-y:auto}
#winAuto{max-height:calc(100vh - 8rem)}
/* ---------- ordem e compactação da barra lateral (Mochila e equipamento sempre à vista) ---------- */
#pMini{order:1}#pStat{order:2}#pParty{order:3}#menubtns{order:4}#pBattle{order:5}#pEq{order:6}#pBag{order:7}#pFire{order:8}#pQuest{order:9}#pOnline{order:10}
#side>.panel[id^="pSys_"]{order:11}   /* painéis dos sistemas (caçada, loot, bênçãos, hoje no mundo): abaixo do essencial, para minimapa, menu e mochila ficarem à vista em 1080p */
.panel .bd{padding:.45rem .5rem}
.mmframe{max-width:10.4rem}
.bd.mini{padding:.35rem}
#side{gap:.4rem;padding:.4rem}
.ph{height:1.8rem}
#bar .slot.locked .cost{display:none}
.compass{width:1.9rem;height:1.9rem}
.portrait,#pStat .portrait{width:3.7rem;height:3.7rem}
.charcard{margin-bottom:.4rem;gap:.6rem}
#plateName{font-size:1.02rem}
.barrow{margin:.24rem 0}
.bar{height:1.08rem}
.bar>span{line-height:1rem}
.mb{min-height:2.95rem}
#battle{max-height:9.6rem;overflow-y:auto}
#questTrack{max-height:11rem;overflow-y:auto}
.eq{grid-template-columns:repeat(6,1fr);grid-template-rows:auto;gap:.3rem;padding:0}
.eq .slot{width:100%;height:auto;aspect-ratio:1}
.eq .slot canvas{width:76%;height:76%}
.eq .slot::before{font-size:.5rem;letter-spacing:.02em}
.sitem{display:flex;flex-direction:column;align-items:center;gap:.18rem}
.sitem .slot{width:3rem;height:3rem}
.sitem .slot canvas{width:2.5rem;height:2.5rem}
.sitem .price{font-size:.68rem;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums}
.shopgrid{display:flex;flex-wrap:wrap;gap:.45rem .5rem;justify-content:flex-start}
/* ---------- complementos ---------- */
.chead{display:flex;gap:.8rem;align-items:center;margin-bottom:.6rem;padding-bottom:.7rem;border-bottom:1px solid #ffffff12}
.chead .portrait{width:4.6rem;height:4.6rem}
.cmeta{flex:1;min-width:0}
.cmeta .cn{font-size:1.15rem;font-weight:800;color:#fff;text-shadow:0 1px 0 #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmeta .cs{font-size:.78rem;color:var(--parch-d);letter-spacing:.04em;margin-top:.1rem}
.ptsbadge{display:inline-block;min-width:1.7rem;padding:.05rem .5rem;border-radius:1rem;text-align:center;background:#2a2230;color:var(--dim);font-weight:800}
.ptsbadge.on{background:#1f5a34;color:#9cffc0;box-shadow:0 0 .6rem #5fe08a55}
.shopzen{display:flex;justify-content:space-between;align-items:center;padding:.45rem .7rem;margin-bottom:.5rem;background:#15111a;border:1px solid #000;border-radius:3px;box-shadow:inset 0 0 0 1px #3a3040}
.shopzen span{color:var(--dim);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.shopzen b{color:var(--gold);font-size:1.05rem;font-variant-numeric:tabular-nums}
.togrow{display:flex;gap:.45rem}
.togrow .btn{flex:1;margin-top:.45rem}
.btn.tog{display:flex;justify-content:space-between;align-items:center;gap:.6rem;text-align:left}
.btn.tog b{font-weight:800;color:var(--mute);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}
.btn.tog.on b{color:var(--green)}
.btn.danger{color:#ff8a7a}
.btn.danger:hover{background:#4a1e1c}
.brow .nm small{color:var(--mute);font-weight:500;font-size:.68rem}
.orb.low{animation:lowpulse 1s ease-in-out infinite}
@keyframes lowpulse{50%{box-shadow:0 0 0 2px #e5483a,0 0 1.2rem #e5483acc,inset 0 0 14px #000d}}
#notice{transition:opacity .35s}
#notice.show{opacity:1}
#menubtns .mb.gm{grid-column:1/-1;flex-direction:row;min-height:2.1rem;font-size:.74rem;letter-spacing:.08em;background:#3b2a08;border-color:#7a5a16;color:#ffd24a}
#menubtns .mb.gm:hover{background:#5a3f0b}
body #winGm{right:auto;left:1rem;top:3rem;width:30rem;max-height:calc(100vh - 12rem)}
body #winGm .hd{background:linear-gradient(#6b4d12,#3f2c08);border-bottom-color:#c79a2a}
body #winGm .hd .ttl{color:#ffe08a}
body #winGm .bd{overflow:auto;max-height:calc(100vh - 17rem);padding:.75rem}
body .gmhead{padding:.45rem .7rem;font-size:.8rem;border-radius:3px}
body .gb{padding:.3rem .65rem;font-size:.72rem;border-radius:3px;margin:.12rem}
body .gb.mini{padding:.15rem .45rem;font-size:.66rem}
body .gmrow{padding:.4rem .55rem;font-size:.82rem;border-radius:3px}
body #gmBanner{font-size:1.05rem;top:3rem}
body #gmInd{left:.6rem;top:.6rem}
body #gmInd span{font-size:.72rem;padding:.15rem .55rem}
/* === /TEMA === */

/* === ADMIN === (sistema de administracao / GM: painel, anuncios, indicadores; js/admin.js) */
.mb.gm{color:#ffd24a;background:#3b2a08;border-color:#7a5a16}
.mb.gm:hover{background:#5a3f0b}
#winGm{right:312px;top:40px;width:410px;max-height:calc(100vh - 120px)}
#winGm .hd{background:linear-gradient(#6b4d12,#3f2c08);color:#ffe08a}
#winGm .bd{overflow:auto;max-height:calc(100vh - 170px);padding:8px}
#winGm .sec{color:#ffcf4a;margin:8px 0 4px}
#winGm input[type=text],#winGm select{background:#14110f;color:var(--txt);border:1px solid #000;box-shadow:inset 1px 1px 0 #000;padding:4px 6px;font-family:inherit;font-size:11px;user-select:text;-webkit-user-select:text}
.gmhead{padding:5px 8px;background:#2b2008;border:1px solid #7a5a16;color:#ffe08a;font-size:11px}
.gmhead b{color:#ffd24a}
.gb{background:#3a352d;border:1px solid #000;box-shadow:inset 1px 1px 0 var(--hi);color:var(--txt);padding:4px 8px;font-size:10px;font-weight:700;cursor:pointer;margin:1px}
.gb:hover{background:#544c3e}
.gb.on{background:#8a6410;color:#fff2b0;box-shadow:inset 1px 1px 0 #ffd24a}
.gb.warn{color:#ff9a7a}
.gb.mini{padding:2px 5px;font-size:9px}
.gb:disabled{opacity:.35;cursor:default}
.gmrow{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;padding:4px 6px;background:#1f1d1a;border:1px solid #0b0a09;margin-bottom:3px;font-size:11px}
.gmrow .nm{flex:1 1 120px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;font-weight:700}
.gmrow .nm.gm{color:#ffd24a}
.gmrow .lv{color:var(--dim);font-size:10px;white-space:nowrap}
.gmrow .ac{flex:1 0 100%;display:flex;flex-wrap:wrap;justify-content:flex-start}
.orow .nm.gm{color:#ffd24a;font-weight:700}
#gmBanner{position:absolute;left:50%;top:40px;transform:translateX(-50%);z-index:6;max-width:88%;padding:8px 22px;text-align:center;font-weight:700;font-size:15px;color:#3a1c00;background:linear-gradient(#fff0a0,#ffc73a 55%,#c4730c);border:2px solid #1a0f00;box-shadow:0 0 0 2px #ffcf4a,0 6px 24px rgba(0,0,0,.6);pointer-events:none;opacity:0;transition:opacity .4s}
#gmBanner.show{opacity:1}
#gmBanner small{display:block;font-size:10px;letter-spacing:.6px;color:#6b3a00}
#gmInd{position:absolute;left:8px;top:8px;z-index:5;display:flex;gap:4px;pointer-events:none}
#gmInd span{padding:2px 7px;background:rgba(58,40,8,.92);border:1px solid #c79a2a;color:#ffe08a;font-size:10px;font-weight:700}

/* === ALIADOS === (janela de Aliados Shinobi; js/allies.js - reaproveita .petrow/.bar/.btn do tema) */
#winAllies{left:1rem;top:3rem;width:36rem;max-height:calc(100vh - 8rem)}
#winAllies .bd{overflow:auto;max-height:calc(100vh - 13rem)}
.alrow canvas{width:3.6rem;height:3.9rem;image-rendering:pixelated}
.alrow canvas.lock{opacity:.6}
.alrow.lockedrow{opacity:.92}
.alchips{display:flex;flex-wrap:wrap;gap:.25rem;margin:.35rem 0}
.alchip{font-size:.68rem;padding:.12rem .45rem;border-radius:.7rem;background:#241c2a;color:#ffe2a8;border:1px solid #000;box-shadow:inset 0 0 0 1px #5a4a3a;cursor:help}
.alchip.lk{opacity:.5;color:#a89aa8;box-shadow:inset 0 0 0 1px #3a3040}
.alreq{display:flex;align-items:center;gap:.5rem;font-size:.74rem;margin:.2rem 0}
.alreq>span:first-child{flex:0 0 11.5rem;color:#d8ccb4}
.alreq .bar{flex:1;height:.9rem}
.alreq .bar span{line-height:.85rem;font-size:.62rem}
.alnext{padding:.55rem;border:1px solid #000;border-radius:3px;background:#1d1620;box-shadow:inset 0 0 0 1px #c08a2a}
/* === /ALIADOS === */

/* === JUKEBOX (trilha do YouTube) === */
#jkW{position:absolute;left:.6rem;top:.6rem;z-index:5;width:200px;background:#120e17;border:1px solid var(--edge2,#54452f);border-radius:4px;box-shadow:0 4px 14px #000b;overflow:hidden}
#jkW .jk-h{display:flex;align-items:center;gap:.4rem;padding:.2rem .35rem .2rem .5rem;font-size:.7rem;font-weight:700;color:#ffd98a;letter-spacing:.02em;background:#1b1520}
#jkW .jk-h span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#jkW .jk-h button{flex:none;width:1.4rem;height:1.2rem;padding:0;line-height:1;background:#0000;border:1px solid #54452f;border-radius:3px;color:#ffd98a;cursor:pointer}
#jkW .jk-v{width:200px;height:200px;background:#000}
#jkW.fold{width:15rem}
#jkW.fold .jk-v{position:fixed;left:-400px;top:0}
#jkW iframe{display:block;width:200px;height:200px;border:0}
.jk-now{font-size:.8rem;color:#ffd98a;margin:.1rem 0 .35rem;line-height:1.2}
.jk-in{width:100%;box-sizing:border-box;margin:.3rem 0;padding:.4rem .5rem;background:#0b090e;border:1px solid #54452f;border-radius:3px;color:#eadbb3;font:inherit;font-size:.8rem}
.jk-in:focus{outline:1px solid #ffb02e}
/* === MOBILE === (modo celular: js/mobile.js; tudo abaixo só vale com body.mobile — o desktop não muda) */
:root{--sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px);--st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px)}
#mbCtl,#mbBack,#mbSend,#mbDrawerHd,.mobonly{display:none}
html.mobile{font-size:clamp(14px,4vmin,17px)}   /* a regra html,body{font-size:1rem} do topo fixa a raiz em 16px; no celular a escala acompanha a menor dimensão */
body.mobile #sysHB{display:none!important}   /* barra de atalhos livre (sys_spells): larga demais para o celular; o Grimório abre pelo botão da gaveta */
body.mobile .pv-chip{left:50%;top:calc(var(--st) + 6px)}
body.mobile.drawer .pv-chip,body.mobile.chatopen .pv-chip,body.mobile.winopen .pv-chip{display:none!important}   /* o aviso é um elemento solto no body (z-index alto): cobriria o botão Enviar do chat, a gaveta e as janelas */   /* aviso de modo seguro/zona PvP: centro do topo, entre o HUD e os botões */
html.mobile,body.mobile{overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;touch-action:pan-x pan-y;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body.mobile{position:fixed;inset:0;width:100%;height:100%}
body.mobile input,body.mobile select,body.mobile textarea{font-size:16px!important}   /* o iOS dá zoom em campo com fonte < 16px */
body.mobile #game{touch-action:none;image-rendering:auto}
body.mobile .win canvas{touch-action:none}
body.mobile .mobonly{display:block}
body.mobile .foot:not(.fan):not(.mobonly){display:none}

/* ---- layout: jogo em tela cheia; console vira sobreposição; barra lateral vira gaveta ---- */
body.mobile #app{position:fixed;inset:0;width:auto;height:auto;display:block}
body.mobile #left{position:absolute;inset:0;display:block}
body.mobile #gamewrap{position:absolute;inset:0}
body.mobile #console{position:absolute;left:calc(var(--sl) + 8px);bottom:calc(var(--sb) + 8px);width:min(40vw,24rem);height:auto;background:none;border:0;box-shadow:none;pointer-events:none;z-index:6}
body.mobile #tabs,body.mobile #chatIn,body.mobile #mbSend{display:none}
body.mobile #chat{flex:none;max-height:5.6rem;overflow:hidden;padding:0 .3rem;font-size:.74rem;line-height:1.3;text-shadow:0 1px 2px #000,0 0 3px #000;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 45%);mask-image:linear-gradient(to bottom,transparent 0,#000 45%)}
body.mobile #chat .ln .tm{display:none}
body.mobile.chatopen #console{pointer-events:auto;left:calc(var(--sl) + 8px);top:calc(var(--st) + 8px);bottom:auto;width:min(72vw,34rem);max-height:calc(100% - 16px - var(--st) - var(--sb));background:rgba(10,7,14,.95);border:1px solid var(--edge2);border-radius:8px;overflow:hidden;z-index:48;display:flex;flex-direction:column;box-shadow:0 10px 30px #000d}
body.mobile.chatopen #tabs{display:flex;order:1}
body.mobile.chatopen #chatIn{display:block;order:0;padding:.75rem 3.4rem .75rem .9rem;border-top:0;border-bottom:1px solid #2a2230}
body.mobile.chatopen #chat{order:2;max-height:min(11rem,38vh);overflow-y:auto;padding:.3rem .6rem;font-size:.84rem;-webkit-mask-image:none;mask-image:none;touch-action:pan-y}
body.mobile.chatopen #chat .ln .tm{display:inline}
body.mobile.chatopen #mbSend{display:flex;position:absolute;right:6px;top:5px;width:40px;height:40px;z-index:3}
body.mobile #side{position:fixed;top:0;right:0;bottom:0;width:min(88vw,25rem);flex:none;z-index:44;transform:translateX(105%);transition:transform .22s ease;padding:calc(var(--st) + 6px) calc(var(--sr) + 8px) calc(var(--sb) + 14px) 8px;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;box-shadow:-10px 0 28px #000d}
body.mobile.drawer #side{transform:none}
body.mobile #mbBack{display:none}
body.mobile.drawer #mbBack{display:block;position:fixed;inset:0;background:rgba(0,0,0,.52);z-index:43}
body.mobile #mbDrawerHd{display:flex;order:0;align-items:center;justify-content:space-between;gap:.6rem;flex:none;padding:.1rem .2rem .3rem;color:var(--parch);font-weight:800;font-size:.9rem;letter-spacing:.1em;text-transform:uppercase}
body.mobile #mbDrawerHd button{width:44px;height:40px;border-radius:6px;border:1px solid #000;background:var(--panel2);box-shadow:inset 0 0 0 1px var(--edge);color:var(--txt);font-size:1.1rem}

/* ---- HUD compacto ---- */
body.mobile #mbCtl{display:block;position:absolute;inset:0;pointer-events:none;z-index:9}
#mbCtl button,#mbHud,#mbMini,#mbRot,#mbHeld{pointer-events:auto}
#mbHud{position:absolute;left:calc(var(--sl) + 8px);top:calc(var(--st) + 6px);width:min(36vw,196px);padding:5px 8px 7px;background:rgba(10,7,14,.64);border:1px solid #54452f;border-radius:7px}
#mbHud .who{display:flex;align-items:baseline;gap:6px;margin-bottom:2px;font-size:12px;font-weight:800;color:#fff;text-shadow:0 1px 0 #000;white-space:nowrap;overflow:hidden}
#mbHud .who b{overflow:hidden;text-overflow:ellipsis}
#mbHud .who em{font-style:normal;color:var(--gold);font-size:11px;flex:none}
.mbb{position:relative;height:12px;margin-top:3px;background:#07050a;border:1px solid #000;border-radius:2px;box-shadow:0 0 0 1px #4a3c2a;overflow:hidden}
.mbb i{position:absolute;left:0;top:0;bottom:0;width:100%;background:#00b800;transition:width .14s}
.mbb.mp i{background:linear-gradient(#3b7bff,#1b47c2)}
.mbb.xp{height:6px}.mbb.xp i{background:linear-gradient(#e8c24a,#a07d1c)}
.mbb span{position:absolute;inset:0;text-align:center;font-size:9px;line-height:11px;font-weight:800;color:#fff;text-shadow:0 0 2px #000,1px 1px 0 #000;font-variant-numeric:tabular-nums}
#mbMini{position:absolute;right:calc(var(--sr) + 8px);top:calc(var(--st) + 6px);width:84px;height:84px;background:#000;border:2px solid #8a7147;border-radius:7px;image-rendering:pixelated;box-shadow:0 2px 8px #000a}
#mbTop{position:absolute;right:calc(var(--sr) + 100px);top:calc(var(--st) + 6px);display:flex;gap:7px;pointer-events:none}
.mbc{pointer-events:auto;width:46px;height:46px;border-radius:50%;border:2px solid #8a7147;background:rgba(22,16,28,.85);color:var(--parch);display:flex;align-items:center;justify-content:center;flex-direction:column;padding:0;box-shadow:0 2px 8px #000a;font-family:inherit}
.mbc svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mbc:active,.mbc.on{background:#5a2f10;border-color:var(--or);color:#fff}
.mbc.big{width:56px;height:56px}
.mbc.big svg{width:30px;height:30px}
#mbTarget{position:absolute;right:calc(var(--sr) + 6px + 146px);bottom:calc(var(--sb) + 6px + 4px)}
#mbPick{position:absolute;right:calc(var(--sr) + 6px + 146px);bottom:calc(var(--sb) + 6px + 70px);width:56px;height:56px;border-color:#5fe08a;color:#9cffc0;animation:autopulse 1.2s infinite}
#mbPick span{font-size:9px;font-weight:800;margin-top:-1px}
#mbPick svg{width:22px;height:22px}
#mbSend svg{width:22px;height:22px}
#mbJoy{position:absolute;width:110px;height:110px;margin:-55px 0 0 -55px;border-radius:50%;border:2px solid rgba(255,255,255,.38);background:rgba(255,255,255,.09);pointer-events:none}
#mbJoy i{position:absolute;left:50%;top:50%;width:48px;height:48px;border-radius:50%;background:rgba(255,138,30,.6);border:2px solid #ffd98a;transform:translate(-50%,-50%);box-shadow:0 0 14px #ff8a1e88}
#mbJoyHint{position:absolute;left:calc(var(--sl) + 16%);bottom:calc(var(--sb) + 20%);width:96px;height:96px;margin-left:-48px;border-radius:50%;border:2px dashed rgba(255,255,255,.3);pointer-events:none;animation:mbHint 2.4s ease-in-out infinite}
#mbJoyHint i{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:rgba(255,255,255,.14)}
@keyframes mbHint{50%{opacity:.35}}
#mbRot{position:absolute;left:50%;top:calc(var(--st) + 56px);transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;background:rgba(72,44,8,.96);border:1px solid #b8801c;border-radius:8px;color:#ffd98a;font-weight:700;font-size:13px;white-space:nowrap;max-width:94vw}
#mbRot button{width:34px;height:34px;border-radius:6px;border:1px solid #000;background:#2a1c08;color:#ffd98a;font-size:14px}
#mbHeld{position:absolute;left:50%;top:calc(var(--st) + 100px);transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;background:rgba(20,40,24,.96);border:1px solid #2f7a3a;border-radius:8px;color:#b6ffc3;font-weight:700;font-size:12px;max-width:min(92vw,34rem);z-index:47}
#mbHeld button{flex:none;min-height:36px;padding:0 12px;border-radius:6px;border:1px solid #000;background:#16301c;color:#b6ffc3;font-weight:800;font-size:12px}
body.mobile #held{z-index:70}

/* ---- barra de jutsus em arco (reaproveita #bar: recarga, custo, bloqueio por nível) ---- */
body.mobile #bar{left:auto;right:calc(var(--sr) + 6px);bottom:calc(var(--sb) + 6px);transform:none;display:block;width:204px;height:200px;gap:0;z-index:9}
body.mobile #bar .orb{display:none}
body.mobile .bslots{position:absolute;inset:0;display:block;padding:0;background:none;border:0;box-shadow:none;gap:0}
body.mobile .bslots .sep{display:none}
body.mobile #bar .slot{position:absolute;width:60px;height:60px;border-radius:50%;background:rgba(15,12,19,.9);border:2px solid #6b5630;box-shadow:0 2px 8px #000a,inset 0 0 .5rem #000c}
body.mobile #bar .slot canvas{left:5px;top:5px;width:calc(100% - 10px);height:calc(100% - 10px);border-radius:50%}
body.mobile #bar .slot .key{display:none}
body.mobile #bar .slot .cost{right:50%;transform:translateX(50%);bottom:-2px;font-size:11px;background:#000c;border-radius:6px;padding:0 4px;line-height:14px}
body.mobile #bar .slot .cd{border-radius:50%;font-size:16px}
body.mobile #bar .slot:nth-child(1){width:70px;height:70px;right:0;bottom:0}
body.mobile #bar .slot:nth-child(2){right:78px;bottom:2px}
body.mobile #bar .slot:nth-child(3){right:70px;bottom:76px}
body.mobile #bar .slot:nth-child(4){right:2px;bottom:82px}
body.mobile #bar .slot.pot{width:46px;height:46px}
body.mobile #bar .slot:nth-child(6){right:4px;bottom:152px}
body.mobile #bar .slot:nth-child(7){right:58px;bottom:152px}
body.mobile #bar .slot:nth-child(8){right:112px;bottom:152px}
body.mobile #bar .slot.pot .cost{font-size:10px}
body.mobile #bar .slot:hover{border-color:#6b5630;box-shadow:0 2px 8px #000a,inset 0 0 .5rem #000c}
body.mobile #bar .slot:active{border-color:var(--or)}

/* ---- botão de upar sozinho e avisos ---- */
body.mobile #autoBtn{left:calc(var(--sl) + 8px);right:auto;top:calc(var(--st) + 76px);min-height:36px;padding:.3rem .8rem;font-size:.7rem;z-index:9}
body.mobile #autoBtn kbd{display:none}
body.mobile #autoStatus{top:calc(var(--st) + 50px);max-width:calc(100% - 420px);font-size:.66rem;padding:.3rem .7rem;z-index:9}
body.mobile #notice{top:22%}
body.mobile #notice span{padding:.4rem 2rem;font-size:.9rem}
body.mobile #notice.big span{padding:.5rem 2.5rem;font-size:1.3rem}
body.mobile #recallbar{top:52%}
body.mobile #reconn{top:calc(var(--st) + 58px)}
body.mobile #duelBar{top:calc(var(--st) + 56px)}
body.mobile #invites{right:calc(var(--sr) + 100px);top:calc(var(--st) + 60px)}
body.mobile .inv{font-size:.8rem;max-width:min(24rem,60vw)}
body.mobile .inv .btn{min-height:40px}
body.mobile #pmenu{min-width:14rem;font-size:1rem}
body.mobile #pmenu .mi{padding:.75rem .9rem}
body.mobile #tip{max-width:min(20rem,70vw);font-size:.8rem}

/* ---- janelas: folhas de tela cheia, roláveis ---- */
body.mobile .win{position:fixed!important;inset:0!important;left:0!important;top:0!important;right:0!important;bottom:0!important;width:auto!important;height:auto!important;max-width:none!important;max-height:none!important;border-radius:0;border:0;z-index:46!important;animation:none;padding:var(--st) var(--sr) var(--sb) var(--sl)}
body.mobile .win:not(.hidden){display:flex;flex-direction:column}
body.mobile .win::after{display:none}
body.mobile .win .hd{flex:none;height:3.1rem;cursor:default;border-radius:0}
body.mobile .win .hd .ttl{font-size:.95rem}
body.mobile .win .hd .x{width:52px;height:44px;font-size:1.15rem}
body.mobile .win .bd{flex:1 1 auto;min-height:0;max-height:none!important;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;font-size:1rem;padding-bottom:calc(1.6rem + var(--sb))}
body.mobile #winShop .bd,body.mobile #winPets .bd,body.mobile #winQuests .bd,body.mobile #winAllies .bd,body.mobile #winGm .bd{max-height:none!important}
body.mobile .btn{min-height:44px;padding:.6rem 1.1rem;font-size:.92rem}
body.mobile .btn.qz-sm,body.mobile .btn.primary{min-height:44px}
body.mobile .tab,body.mobile .qz-tab,body.mobile .systabs .tab{padding:.65rem 1rem}
body.mobile .stat .plus{width:2.6rem;height:2.6rem;font-size:1.3rem}
body.mobile .chk{padding:.5rem 0;font-size:.95rem}
body.mobile input[type=checkbox]{width:1.5rem;height:1.5rem}
body.mobile select,body.mobile input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]){min-height:44px}
body.mobile .slot.sm{width:44px;height:44px}
body.mobile .slot.sm canvas{width:36px;height:36px}
body.mobile .arow{padding:.4rem 0;font-size:.95rem}
body.mobile .arow select,body.mobile #winAuto select{max-width:60%}
body.mobile .petrow .btn{min-height:44px}
body.mobile .slot{cursor:pointer}
body.mobile .sysgrid{grid-template-columns:repeat(auto-fill,minmax(46px,1fr))!important}
body.mobile .sysgrid .slot{width:100%;height:auto;aspect-ratio:1}
body.mobile .sitem .slot{width:3.6rem;height:3.6rem}
body.mobile .sitem .slot canvas{width:3rem;height:3rem}
body.mobile .shopgrid{gap:.6rem}

/* ---- gaveta: botões de menu, mochila e equipamento com alvos de toque grandes ---- */
body.mobile #menubtns{order:1;grid-template-columns:repeat(5,1fr);gap:.35rem}   /* gaveta: menu de ícones primeiro (em paisagem o minimapa grande empurrava o menu para fora da tela) */
body.mobile #pStat{order:2}body.mobile #pParty{order:3}body.mobile #pBag{order:4}body.mobile #pEq{order:5}body.mobile #pBattle{order:6}body.mobile #pQuest{order:7}body.mobile #pMini{order:8}body.mobile #pFire{order:9}
body.mobile .mb{min-height:3.7rem;font-size:.7rem}
body.mobile .mb kbd{display:none}
body.mobile .bag{grid-template-columns:repeat(6,1fr);gap:.3rem}
body.mobile .bag .slot{width:100%;height:auto;aspect-ratio:1}
body.mobile .bag .slot canvas{width:82%;height:82%}
body.mobile .eq{gap:.3rem}
body.mobile .panel .ph{height:2.4rem}
body.mobile .brow{padding:.5rem .6rem .5rem .7rem}
body.mobile .orow,body.mobile .prow{padding:.55rem .6rem}
body.mobile #battle,body.mobile #questTrack{max-height:none}

/* ---- tela inicial (login, criação de conta, escolha de clã) ---- */
body.mobile #start{height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;touch-action:pan-y;align-items:flex-start}
body.mobile .startbox{width:100%;padding:calc(var(--st) + .3rem) calc(var(--sr) + .7rem) calc(var(--sb) + 1.2rem) calc(var(--sl) + .7rem)}
body.mobile #logocv{width:min(17rem,60vw)}
body.mobile .tag{display:none}
body.mobile #classes{display:flex;overflow-x:auto;gap:.7rem;padding:.8rem .3rem .5rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;touch-action:pan-x;margin:.3rem 0 .6rem}
body.mobile .card{flex:0 0 11rem;scroll-snap-align:center;padding:.6rem .6rem .7rem}
body.mobile .card:hover{transform:none}
body.mobile .card canvas{width:6.6rem}
body.mobile .card p{display:none}
body.mobile .card .sk i{font-size:.62rem}
body.mobile .mode{padding:.75rem 1.3rem;font-size:.95rem}
body.mobile #boxOnline,body.mobile #boxSolo{padding:.6rem .6rem .2rem}
body.mobile #nameInput,body.mobile #accName,body.mobile #accPass,body.mobile #srvInput{width:min(100%,19rem);padding:.8rem .9rem}
body.mobile #start .btn{min-height:48px;padding:.75rem 1.4rem;font-size:1rem}
body.mobile .authmsg{font-size:.95rem}
body.mobile .foot.fan{display:block}
body.mobile .foot.mobonly{margin-top:.6rem;font-size:.82rem;line-height:1.7}
body.mobile #death .btn,body.mobile #disc .btn{min-height:50px}
@media (orientation:portrait){
  body.mobile .card{flex-basis:10.4rem}
  body.mobile #mbHud{width:min(52vw,196px)}
  body.mobile #mbTop{right:calc(var(--sr) + 8px);top:calc(var(--st) + 98px)}
  body.mobile #autoBtn{top:calc(var(--st) + 76px)}
  body.mobile #autoStatus{display:none}
  body.mobile #console{width:min(62vw,24rem);bottom:calc(var(--sb) + 232px)}
  body.mobile #invites{right:calc(var(--sr) + 8px);top:calc(var(--st) + 150px)}
  body.mobile .pv-chip{top:calc(var(--st) + 150px)}   /* em retrato o centro do topo é ocupado pelo HUD e pelo minimapa */
  body.mobile #mbRot,body.mobile #mbHeld{top:calc(var(--st) + 206px)}
}
body.mobile #jkW{left:calc(var(--sl) + 8px);top:calc(var(--st) + 118px);z-index:8}   /* cartão da trilha sonora: abaixo do HUD e do botão de upar sozinho */
body.mobile #jkW,body.mobile #jkW.fold{width:min(15rem,44vw)}
body.mobile #jkW .jk-v{position:fixed;left:-400px;top:0}   /* no celular o vídeo fica sempre fora da tela (só o áudio toca): o cartão desdobrado de 200 px cobre a zona do joystick e engole o toque */
/* janelas dos sistemas com tamanho próprio (retrato, 390 px): o mapa tem min-width:460px, o loot tem botões segmentados e os talentos têm canvas fixo de 600 px */
body.mobile .win{min-width:0!important;min-height:0!important;resize:none!important}
body.mobile #winSys_map .bd{height:auto!important}
body.mobile .lcSeg{flex-wrap:wrap}
@media (orientation:portrait){
  body.mobile .tl-main{flex-direction:column}
  body.mobile .tl-cv{width:100%!important}   /* o canvas segue com 600 px, vira uma "janela" que se arrasta (o próprio plugin já pan-eia por arrasto) */
}
/* === /MOBILE === */