*{box-sizing:border-box}
body{margin:0;background:#07060f;color:#e9e6ff;font-family:'Trebuchet MS','Segoe UI',sans-serif;min-height:100vh}
#app{max-width:1180px;margin:0 auto;padding:14px 16px 28px}
h1{margin:4px 0 10px;font:800 16px 'Trebuchet MS',Arial,sans-serif;letter-spacing:4px;color:#eef}
h1 small{font:600 11px 'Trebuchet MS',sans-serif;color:#6d6f96;letter-spacing:1px;margin-left:12px}
#stage{position:relative;width:100%;display:flex;flex-direction:column;background:#000;border:1px solid #2a2a48;border-radius:10px;overflow:hidden}
canvas#c{display:block;width:100%;height:auto}
/* ---------- HUD de RPG: placas com retrato, nome, HP e chakra numericos ---------- */
.roleN .hud{flex-direction:row-reverse}
.hud{position:relative;order:-1;display:flex;justify-content:space-between;gap:10px;padding:6px 10px;pointer-events:none;align-items:center;background:#0c0c18;border-bottom:1px solid #2a2a48} /* faixa propria acima do cenario: nao cobre os personagens */
.pl{width:42%;display:flex;gap:8px;align-items:center;padding:0}
.pl.r{flex-direction:row-reverse;text-align:right}
.pt{width:clamp(40px,5.4vw,60px);height:clamp(40px,5.4vw,60px);border-radius:6px;border:2px solid #cfd2ea;background:#000;flex:none;image-rendering:pixelated}
.pl.r .pt{border-color:#e9a25a}
.inf{flex:1;min-width:0}
.pl b{display:block;font:800 clamp(9px,1.1vw,12px) 'Trebuchet MS',Arial,sans-serif;letter-spacing:1.5px;color:#eef;margin-bottom:3px}
.row{display:flex;align-items:center;gap:5px;margin-top:2px}.pl.r .row{flex-direction:row-reverse}
.row label{font:700 8px 'Trebuchet MS',Arial,sans-serif;color:#8d90b8;letter-spacing:.5px;width:20px;flex:none;text-align:center}
.bar{position:relative;flex:1;height:12px;background:#181830;border-radius:3px;overflow:hidden}
.bar.ck{height:5px}
.bar.sm{height:6px}
.bar i{position:absolute;left:0;top:0;bottom:0;transition:width .35s}
.bar i.ghost{background:#ffd23a;transition:width .9s .5s}
.hp i.v{background:#4cc35a}
.ck i.v{background:#3f8cff}
.sm i.v{background:#e0902a}
.bar .num{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font:800 9px 'Trebuchet MS',Arial,sans-serif;color:#fff;text-shadow:0 1px 1px #000,0 0 2px #000}
.bar.ck .num{display:none}
.pl.r .bar i{left:auto;right:0}
.roleN .pl .bar i{left:auto;right:0}.roleN .pl.r .bar i{left:0;right:auto}
.roleN .pl{flex-direction:row-reverse;text-align:right}.roleN .pl .row{flex-direction:row-reverse}
.roleN .pl.r{flex-direction:row;text-align:left}.roleN .pl.r .row{flex-direction:row}
.sumrow{display:none}.sumrow.on{display:flex}.sumrow label{color:#ffb347}
.vs{font:800 12px 'Trebuchet MS',Arial,sans-serif;letter-spacing:2px;color:#6d6f96}
#banner{position:absolute;left:0;top:26%;width:100%;pointer-events:none;opacity:0;padding-left:5%}
#banner.on{animation:ban 1.7s cubic-bezier(.2,.9,.2,1) forwards}
#banner .jp{font:900 clamp(40px,9vw,112px)/1 'Yu Mincho','MS Mincho','Noto Serif JP',serif;color:#fff;text-shadow:0 0 14px var(--bc),0 0 34px var(--bc),4px 4px 0 #000;transform:skewX(-8deg);display:inline-block}
#banner .nm{font:900 italic clamp(16px,3vw,36px) 'Arial Black',Impact,sans-serif;letter-spacing:4px;color:var(--bc);text-shadow:0 3px 0 #000,0 0 12px var(--bc);margin-top:2px;padding-left:6px}
#banner .sb{font:700 clamp(10px,1.4vw,16px) 'Trebuchet MS',sans-serif;color:#cfd6ff;letter-spacing:3px;text-transform:uppercase;padding-left:8px;text-shadow:0 2px 0 #000}
@keyframes ban{0%{opacity:0;transform:translateX(-80px)}12%{opacity:1;transform:translateX(0)}78%{opacity:1;transform:translateX(18px)}100%{opacity:0;transform:translateX(70px)}}
#dmg{position:absolute;left:70%;top:34%;font:900 italic clamp(30px,6vw,80px) 'Arial Black',Impact,sans-serif;color:#fff35a;-webkit-text-stroke:3px #000;paint-order:stroke fill;text-shadow:0 5px 0 #b02a00;opacity:0;pointer-events:none}
#dmg.on{animation:dm 1.3s ease-out forwards}
@keyframes dm{0%{opacity:0;transform:scale(2.4) translateY(10px)}12%{opacity:1;transform:scale(1) translateY(0)}70%{opacity:1;transform:translateY(-28px)}100%{opacity:0;transform:translateY(-48px)}}
#ko{position:absolute;left:0;right:0;top:30%;text-align:center;pointer-events:none;opacity:0}
#ko.on{animation:koa 3.2s ease-out forwards}
#ko b{display:block;font:900 italic clamp(60px,14vw,170px)/1 'Arial Black',Impact,sans-serif;color:#ff3b2e;-webkit-text-stroke:5px #000;paint-order:stroke fill;text-shadow:0 8px 0 #7a0a00,0 0 40px #ff3b2e}
#ko span{display:block;font:900 italic clamp(14px,3vw,34px) 'Arial Black',sans-serif;letter-spacing:6px;color:#fff;text-shadow:0 3px 0 #000,0 0 14px #7fd4ff;margin-top:6px}
@keyframes koa{0%{opacity:0;transform:scale(2.6)}10%{opacity:1;transform:scale(1)}16%{transform:scale(1.06)}22%{transform:scale(1)}85%{opacity:1}100%{opacity:.0;transform:scale(1)}}
#toast{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);background:#000c;border:1px solid #6a5fb0;padding:6px 14px;border-radius:20px;font-size:13px;opacity:0;transition:opacity .25s;pointer-events:none}
#toast.on{opacity:1}
#speech{position:absolute;left:31%;top:18%;transform:translate(-50%,6px) scale(.8);background:#fff;color:#111;border:3px solid #000;border-radius:14px;padding:8px 16px;font:900 italic clamp(12px,2vw,24px) 'Arial Black',sans-serif;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:6;white-space:normal;width:max-content;max-width:64%;text-align:center;line-height:1.12}
#speech:after{content:'';position:absolute;left:var(--tl,34px);margin-left:-9px;bottom:-15px;border:9px solid transparent;border-top:12px solid #000;border-bottom:0}
#speech.on{opacity:1;transform:translate(-50%,0) scale(1)}
/* ---------- painel de comandos de RPG ---------- */
#panel{margin-top:12px;background:#0c0c18;border:1px solid #2a2a48;border-radius:10px;overflow:hidden}
#cmdhead{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid #2a2a48;font:800 12px 'Trebuchet MS',Arial,sans-serif;letter-spacing:2px;color:#eef;text-transform:uppercase}
#cmdhead span{margin-left:auto;font:600 11px 'Trebuchet MS',sans-serif;letter-spacing:.5px;color:#7d80a8;text-transform:none}
#cmdhead .back{pointer-events:auto;cursor:pointer;background:#232346;color:#fff;border:1px solid #5a5a9a;border-radius:6px;padding:5px 12px;font:800 12px 'Trebuchet MS',Arial,sans-serif;letter-spacing:.5px}
#cmdhead .back:hover{background:#34346a}
#cmdhead .back small{opacity:.6;font-weight:600;margin-left:4px}
#hand{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px;padding:10px}
#hand .cmd{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;min-width:0;background:#15152a;border:1px solid #2a2a48;border-left:4px solid var(--cc,#7fd4ff);border-radius:7px;padding:8px 10px;cursor:pointer;transition:background .12s,border-color .12s;user-select:none;color:#eae6ff;text-align:left}
#hand .cmd:hover:not(:disabled){background:#1f1f3c;border-color:var(--cc,#7fd4ff)}
#hand .cmd:disabled{opacity:.38;cursor:default}
#hand .cmd .ic{width:24px;height:24px;border-radius:5px;background:#0a0a16;color:var(--cc,#7fd4ff);display:grid;place-items:center;font:800 12px 'Trebuchet MS',Arial,sans-serif}
#hand .cmd .tx{min-width:0}
#hand .cmd .tx b{display:block;font:800 13px 'Trebuchet MS',Arial,sans-serif;color:#fff;line-height:1.2}
#hand .cmd .tx small{display:block;margin-top:2px;font:400 11px/1.3 system-ui,sans-serif;color:#8f93bd}
#hand .cmd .cost{border-radius:5px;padding:2px 7px;background:#12284e;font:800 12px 'Trebuchet MS',Arial,sans-serif;color:#cfe8ff;text-align:center;line-height:1.1}
#hand .cmd .cost em{display:block;font:700 8px 'Trebuchet MS',sans-serif;letter-spacing:1px;color:#7fb4ff;font-style:normal}
.ctl{display:flex;justify-content:center;gap:10px;margin-top:16px;font-size:13px}
.ctl button{background:#1a1536;color:#cfc9ff;border:1px solid #5a4fa0;border-radius:6px;padding:6px 14px;cursor:pointer;font:inherit}
.ctl button:hover{background:#2a2350}
.note{text-align:center;color:#7d78a8;font-size:12px;margin-top:10px}
.kaw{display:none;margin-left:6px;padding:0 5px;font:800 9px 'Trebuchet MS',sans-serif;font-style:normal;letter-spacing:.5px;color:#2a1a08;background:#c9b27a;border-radius:3px;vertical-align:middle;text-shadow:none}
.kaw.on{display:inline-block}

#hand .cmd .tx b .el{font-style:normal;font:700 9px 'Trebuchet MS',Arial,sans-serif;letter-spacing:.5px;margin-left:8px;padding:1px 6px;border-radius:9px;color:var(--ec);border:1px solid var(--ec);vertical-align:middle;text-transform:uppercase}
/* ---------- arvore de habilidades (estilo RPG: medalhoes, linhas de energia, moldura dourada) ---------- */
#tree{position:fixed;inset:0;z-index:50;background:radial-gradient(#0a0a1acc,#020208f2);display:flex;align-items:center;justify-content:center;padding:12px}
#tree[hidden]{display:none}
#tree .tbox{width:min(1320px,96vw);height:min(840px,94vh);display:flex;flex-direction:column;background:radial-gradient(ellipse at 40% 30%,#1a1634,#0b0a18 70%);border:3px solid #b8924a;border-radius:14px;box-shadow:0 0 0 2px #2a1d08,0 0 0 5px #6e5424,0 0 50px #000;overflow:hidden}
#tree .thead{display:flex;align-items:center;gap:18px;padding:10px 16px;background:linear-gradient(#2a2140,#14102a);border-bottom:2px solid #6e5424;flex-wrap:wrap}
#tree .tabs{display:flex;gap:6px}
#tree .tab{background:#1a1630;color:#b9a97a;border:1px solid #6e5424;border-radius:4px;padding:6px 16px;font:700 13px Georgia,'Times New Roman',serif;cursor:pointer;letter-spacing:1px}
#tree .tab.on{background:linear-gradient(#6e5424,#3f300f);color:#ffe9b0;border-color:#e0b860}
#tree .lvl{display:flex;flex-direction:column;gap:3px;min-width:160px}
#tree .lvl b{font:700 15px Georgia,serif;color:#ffe9b0}
#tree .xp{height:8px;background:#0a0814;border:1px solid #6e5424;border-radius:4px;overflow:hidden}
#tree .xp i{display:block;height:100%;background:linear-gradient(#ffd97a,#c8801e)}
#tree .lvl small,#tree .pts small{color:#a89a78;font:600 10px Georgia,serif}
#tree .pts{text-align:center}#tree .pts b{display:block;font:700 24px Georgia,serif;color:#9ff0b8;line-height:1;text-shadow:0 0 10px #3fd070}
#tree .x{margin-left:auto;background:#2a1d08;color:#ffe9b0;border:1px solid #b8924a;border-radius:4px;padding:6px 12px;font:700 12px Georgia,serif;cursor:pointer}
#tree .tmain{display:flex;flex:1;min-height:0}#tree .tscroll{overflow:auto;flex:1;min-width:0}
#tree .tcanvas{position:relative;margin:0 auto}
#tree svg{position:absolute;left:0;top:0;pointer-events:none}
#tree svg path{fill:none;stroke:#3a3452;stroke-width:4;stroke-linecap:round}
#tree svg path.open{stroke:#b8924a;stroke-dasharray:2 7}
#tree svg path.on{stroke:#ffd97a;filter:drop-shadow(0 0 4px #ffb400)}
#tree .bh{position:absolute;top:14px;text-align:center;font:700 13px Georgia,serif;letter-spacing:3px;color:#b8924a;text-transform:uppercase}
#tree .bh:after{content:'';display:block;margin:6px auto 0;width:40px;height:2px;background:linear-gradient(90deg,transparent,#b8924a,transparent)}
#tree .nd{position:absolute;display:flex;flex-direction:column;align-items:center;gap:5px;background:none;border:0;padding:0;cursor:pointer;color:#e8e0c8}
#tree .nd b{font:700 12px Georgia,serif;text-align:center;line-height:1.15;max-width:118px;text-shadow:0 1px 3px #000}
#tree .orb{position:relative;width:70px;height:70px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--ec) 55%,#fff 10%),color-mix(in srgb,var(--ec) 40%,#0a0814) 60%,#0a0814);border:4px solid #6e5424;box-shadow:inset 0 0 14px #000,0 4px 10px #000;transition:transform .12s}
#tree .nd:hover .orb{transform:scale(1.08)}
#tree .gl{font:700 30px 'Yu Mincho','MS Mincho','Noto Serif JP',serif;color:#fff;text-shadow:0 0 8px var(--ec),0 2px 0 #000}
#tree .lv{position:absolute;right:-4px;bottom:-4px;min-width:22px;height:22px;border-radius:11px;background:#14102a;border:2px solid #6e5424;color:#ffe9b0;font:700 11px Georgia,serif;display:grid;place-items:center;font-style:normal}
#tree .nd.got .orb{border-color:#ffd97a;box-shadow:inset 0 0 14px #000,0 0 14px #ffb400aa}
#tree .nd.can .orb{border-color:#ffd97a;animation:orbp 1.4s ease-in-out infinite}
#tree .nd.can .lv{border-color:#ffd97a;background:#4a3508}
#tree .nd.lock .orb{filter:grayscale(.85) brightness(.5)}
#tree .nd.lock b{opacity:.55}
#tree .nd.sel .orb{outline:3px solid #fff;outline-offset:3px}
@keyframes orbp{0%,100%{box-shadow:inset 0 0 14px #000,0 0 6px #ffb40066}50%{box-shadow:inset 0 0 14px #000,0 0 22px #ffb400}}
#tree .tdev{display:flex;gap:8px;padding:6px 14px;background:#0a0814;justify-content:flex-end}
#tree .tdev button{background:transparent;color:#6d6f96;border:1px dashed #3a3a60;border-radius:4px;padding:3px 9px;font:600 10px Georgia,serif;cursor:pointer}
#tree .tside{width:400px;flex:none;overflow:auto;padding:16px 18px;border-left:2px solid #6e5424;background:linear-gradient(#1c1736,#100c22)}
#tree .pv{position:relative;border:2px solid #6e5424;border-radius:8px;background:#000;overflow:hidden;aspect-ratio:16/9}
#tree .pv canvas{display:block;width:100%;height:100%}
#tree .pvmsg{display:grid;place-items:center;height:100%;color:#a89a78;font:600 12px Georgia,serif;text-align:center;padding:10px}
#tree .pvtag{position:absolute;left:8px;top:6px;font:700 9px Georgia,serif;letter-spacing:2px;color:#ffe9b0;background:#000a;padding:2px 6px;border-radius:3px}
#tree .tside h3{margin:14px 0 6px;font:700 22px Georgia,serif;color:#ffe9b0}
#tree .chips{display:flex;gap:6px;margin-bottom:10px}#tree .chips .el{margin:0}
#tree .desc{margin:0 0 6px;font:400 14px/1.45 Georgia,serif;color:#e0d8c0}
#tree .tipo{margin:0 0 12px;font:italic 12px Georgia,serif;color:#a89a78}
#tree .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px}
#tree .stats div{background:#0a0814;border:1px solid #3a2f14;border-radius:6px;padding:6px 4px;text-align:center}
#tree .stats small{display:block;font:600 9px Georgia,serif;color:#a89a78;text-transform:uppercase;letter-spacing:.5px}
#tree .stats b{font:700 15px Georgia,serif;color:#ffe9b0}
#tree .elx{display:flex;flex-direction:column;gap:3px;margin-bottom:10px;font:600 12px Georgia,serif;color:#a89a78}
#tree .elx .g{color:#9ff0b8}#tree .elx .r{color:#ff9a8a}
#tree .req small{font:600 10px Georgia,serif;color:#a89a78;text-transform:uppercase;letter-spacing:1px}
#tree .req ul{list-style:none;margin:4px 0 14px;padding:0;font:600 12px Georgia,serif}
#tree .req li:before{content:'● ';font-size:9px}#tree .req li.y{color:#9ff0b8}#tree .req li.n{color:#ff9a8a}
#tree .act{margin-top:4px}
#tree .tdev .lg{margin-right:auto;font:600 10px Georgia,serif;color:#a89a78;display:flex;align-items:center;gap:6px}
#tree .tdev .lg i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-left:8px}
#tree .tdev .lg .a{background:#ffd97a}#tree .tdev .lg .b{background:#3fd070}#tree .tdev .lg .c{background:#444}

/* ---------- equipamentos e mochila ---------- */
#inv{position:fixed;inset:0;z-index:50;background:radial-gradient(#0a0a1acc,#020208f2);display:flex;align-items:center;justify-content:center;padding:12px}
#inv[hidden]{display:none}
#inv .ibox{width:min(1180px,96vw);height:min(760px,94vh);display:flex;flex-direction:column;background:radial-gradient(ellipse at 40% 30%,#1a1634,#0b0a18 70%);border:3px solid #b8924a;border-radius:14px;box-shadow:0 0 0 2px #2a1d08,0 0 0 5px #6e5424,0 0 50px #000;overflow:hidden}
#inv .thead{display:flex;align-items:center;gap:18px;padding:10px 16px;background:linear-gradient(#2a2140,#14102a);border-bottom:2px solid #6e5424}
#inv .tabs{display:flex;gap:6px}
#inv .tab{background:#1a1630;color:#b9a97a;border:1px solid #6e5424;border-radius:4px;padding:6px 16px;font:700 13px Georgia,serif;cursor:pointer;letter-spacing:1px}
#inv .tab.on{background:linear-gradient(#6e5424,#3f300f);color:#ffe9b0;border-color:#e0b860}
#inv .ryo{text-align:center;margin-left:12px}#inv .ryo b{display:block;font:700 22px Georgia,serif;color:#ffd97a;line-height:1}#inv .ryo small{color:#a89a78;font:600 10px Georgia,serif}
#inv .x{margin-left:auto;background:#2a1d08;color:#ffe9b0;border:1px solid #b8924a;border-radius:4px;padding:6px 12px;font:700 12px Georgia,serif;cursor:pointer}
#inv .imain{display:flex;flex:1;min-height:0}
#inv .ileft{width:430px;flex:none;padding:16px 18px;border-right:2px solid #6e5424;overflow:auto;background:linear-gradient(#1c1736,#100c22)}
#inv .who{display:flex;align-items:center;gap:14px;margin-bottom:14px}
#inv .who canvas{width:84px;height:84px;border:3px solid #b8924a;border-radius:8px;image-rendering:pixelated;background:#000}
#inv .who h3{margin:0;font:700 20px Georgia,serif;color:#ffe9b0}#inv .who small{color:#a89a78;font:600 12px Georgia,serif}
#inv .slots{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
#inv .slot{position:relative;display:flex;align-items:center;gap:12px;text-align:left;background:#0e0c1e;border:2px solid var(--rc);border-radius:8px;padding:8px 12px;cursor:pointer;color:#e8e0c8}
#inv .slot:hover{background:#171432}
#inv .slot .si{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#3a3050,#0a0814);border:2px solid var(--rc);font:700 24px 'Yu Mincho','MS Mincho',serif;color:#fff}
#inv .slot:not(.full) .si{color:#6e5424;font-size:22px}
#inv .slot small{display:block;font:600 10px Georgia,serif;color:#a89a78;text-transform:uppercase;letter-spacing:1px}
#inv .slot b{display:block;font:700 14px Georgia,serif;color:#fff}#inv .slot em{display:block;font:italic 11px Georgia,serif;color:#9ff0b8;font-style:normal}
#inv .slot .rm{position:absolute;right:10px;top:8px;color:#a89a78;font-style:normal;font-size:12px}
#inv .sum{background:#0a0814;border:1px solid #3a2f14;border-radius:8px;padding:10px 14px}
#inv h5{margin:0 0 8px;font:700 11px Georgia,serif;color:#b8924a;text-transform:uppercase;letter-spacing:2px}
#inv .sum .row{display:flex;justify-content:space-between;padding:3px 0;font:600 13px Georgia,serif;color:#cfc6a8;border-bottom:1px solid #1c1730}
#inv .sum .row b{color:#ffe9b0}#inv .sum .row i{font-style:normal;font-weight:700}#inv .up{color:#9ff0b8}#inv .dn{color:#ff9a8a}
#inv .iright{flex:1;min-width:0;display:flex;flex-direction:column;padding:16px 18px}
#inv .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;overflow:auto;flex:1;align-content:start}
#inv .it{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;background:#0e0c1e;border:2px solid var(--rc);border-radius:10px;padding:12px 6px 8px;cursor:pointer;color:#e8e0c8}
#inv .it:hover{background:#171432}#inv .it.sel{outline:3px solid #fff;outline-offset:2px}#inv .it.no{opacity:.4}
#inv .it .gi{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#3a3050,#0a0814);border:2px solid var(--rc);font:700 26px 'Yu Mincho','MS Mincho',serif;color:#fff;margin-bottom:3px}
#inv .it b{font:700 12px Georgia,serif;text-align:center;line-height:1.15}#inv .it small{font:600 10px Georgia,serif;color:#a89a78}
#inv .it .qt{position:absolute;right:8px;top:6px;font:700 12px Georgia,serif;color:#ffd97a;font-style:normal}
#inv .idet{display:flex;align-items:center;gap:14px;border-top:2px solid #6e5424;margin-top:12px;padding-top:12px;min-height:100px}
#inv .idet h4{margin:0 0 2px;font:700 17px Georgia,serif}#inv .idet small,#inv .hint{color:#a89a78;font:600 11px Georgia,serif;margin:0}
#inv .idet p{margin:5px 0 0;font:400 13px Georgia,serif;color:#cfc6a8}#inv .idet .eff{color:#9ff0b8;font-weight:600}
#inv .dtx{flex:1}
#inv .learn{background:linear-gradient(#e0b860,#9a6e1e);color:#241606;border:2px solid #ffe9b0;border-radius:6px;padding:9px 18px;font:700 14px Georgia,serif;cursor:pointer}
#inv .why{color:#e8b050;font:700 12px Georgia,serif}#inv .why.lock{margin:10px 0 0}
#inv .tdev{display:flex;gap:8px;padding:6px 14px;background:#0a0814;justify-content:flex-end}
#inv .tdev button{background:transparent;color:#6d6f96;border:1px dashed #3a3a60;border-radius:4px;padding:3px 9px;font:600 10px Georgia,serif;cursor:pointer}

/* ---------- mapa da campanha ---------- */
#map{position:fixed;inset:0;z-index:60;background:radial-gradient(#0a0a1acc,#020208f2);display:flex;align-items:center;justify-content:center;padding:12px}
#map[hidden]{display:none}
#map .mbox{width:min(1380px,98vw);height:min(800px,96vh);display:flex;flex-direction:column;background:#0b0a18;border:3px solid #b8924a;border-radius:14px;box-shadow:0 0 0 2px #2a1d08,0 0 0 5px #6e5424,0 0 50px #000;overflow:hidden}
#map .thead{display:flex;align-items:center;gap:20px;padding:10px 16px;background:linear-gradient(#2a2140,#14102a);border-bottom:2px solid #6e5424}
#map .thead h2{margin:0;font:700 18px Georgia,serif;color:#ffe9b0;letter-spacing:2px}
#map .ryo{text-align:center}#map .ryo b{display:block;font:700 20px Georgia,serif;color:#ffd97a;line-height:1}#map .ryo small{color:#a89a78;font:600 10px Georgia,serif}
#map .ptl{display:flex;gap:16px;font:600 13px Georgia,serif;color:#cfc6a8}#map .ptl b{color:#ffe9b0}#map .ptl i{font-style:normal;color:#9ff0b8}
#map .x{margin-left:auto;background:#2a1d08;color:#ffe9b0;border:1px solid #b8924a;border-radius:4px;padding:6px 12px;font:700 12px Georgia,serif;cursor:pointer}
#map .mmain{display:flex;flex:1;min-height:0}
#map .mwrap{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;background:#06101e}
#map canvas{width:100%;height:auto;max-height:100%;display:block}
#map .mside{width:380px;flex:none;padding:16px 18px;border-left:2px solid #6e5424;background:linear-gradient(#1c1736,#100c22);overflow:auto}
#map .mside h3{margin:0 0 6px;font:700 24px Georgia,serif;color:#ffe9b0}
#map .tag{display:inline-block;font:700 10px Georgia,serif;letter-spacing:2px;text-transform:uppercase;padding:2px 9px;border-radius:10px;margin-bottom:10px;border:1px solid}
#map .tag.cleared{color:#9ff0b8;border-color:#2c8a4c}#map .tag.open{color:#ffd97a;border-color:#b8924a}#map .tag.locked{color:#a8a8b8;border-color:#555}
#map .desc{margin:0 0 12px;font:400 14px/1.45 Georgia,serif;color:#e0d8c0}
#map .enc{background:#0a0814;border:1px solid #3a2f14;border-radius:8px;padding:10px 14px;margin-bottom:12px}
#map .enc small,#map .lab{font:600 10px Georgia,serif;color:#a89a78;text-transform:uppercase;letter-spacing:1px}
#map .enc h4{margin:2px 0 6px;font:700 17px Georgia,serif;color:#fff}#map .enc .lvl{font:600 11px Georgia,serif;color:#ffd97a;margin-left:6px}
#map .chips{display:flex;gap:6px;margin-bottom:8px}
#map .el{font-style:normal;font:700 9px Georgia,serif;padding:1px 7px;border-radius:9px;color:var(--ec);border:1px solid var(--ec);text-transform:uppercase}
#map .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:8px}
#map .stats div{background:#14102a;border-radius:6px;padding:5px 2px;text-align:center}#map .stats small{display:block;font:600 9px Georgia,serif;color:#a89a78}#map .stats b{font:700 14px Georgia,serif;color:#ffe9b0}
#map .tip{margin:0;font:italic 12px Georgia,serif;color:#9ff0b8}
#map .party{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:6px 0 14px}
#map .hero{background:#0e0c1e;border:2px solid #3a2f14;border-radius:8px;padding:8px;text-align:left;color:#e8e0c8;font-family:Georgia,serif;cursor:pointer}
#map .hero b{display:block;font-size:14px}#map .hero small{color:#a89a78;font-size:11px}
#map .hero.on{border-color:#ffd97a;background:#2a2108}#map .hero.empty{opacity:.4;cursor:default;border-style:dashed}
#map .act{display:flex;flex-direction:column;gap:8px}
#map .learn{background:linear-gradient(#e0b860,#9a6e1e);color:#241606;border:2px solid #ffe9b0;border-radius:6px;padding:10px 18px;font:700 14px Georgia,serif;cursor:pointer}
#map .learn.alt{background:linear-gradient(#5a5a9a,#34346a);color:#fff;border-color:#9a9ad0}
#map .why{color:#e8b050;font:700 12px Georgia,serif}#map .hint{color:#a89a78;font:600 12px Georgia,serif}
#map .tdev{display:flex;gap:8px;padding:6px 14px;background:#0a0814;justify-content:flex-end}
#map .tdev .lg{margin-right:auto;font:600 10px Georgia,serif;color:#a89a78;display:flex;align-items:center;gap:6px}
#map .tdev .lg i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-left:8px}#map .tdev .lg .a{background:#ffd97a}#map .tdev .lg .b{background:#fff2c0}#map .tdev .lg .c{background:#444}
#map .tdev button{background:transparent;color:#6d6f96;border:1px dashed #3a3a60;border-radius:4px;padding:3px 9px;font:600 10px Georgia,serif;cursor:pointer}

/* raridade na arvore: anel do medalhao na cor da raridade */
#tree .orb{border-color:var(--rc,#6e5424)}
#tree .nd.got .orb{border-color:var(--rc);box-shadow:inset 0 0 14px #000,0 0 14px var(--rc)}
#tree .nd.can .orb{border-color:var(--rc)}
#tree .nd .rr{font:700 10px Georgia,serif;color:var(--rc);letter-spacing:.5px}

#map .stats{grid-template-columns:repeat(3,1fr)}
/* ---------- layout de PC em tela cheia: o cenario ocupa o maximo da tela e os comandos ficam numa coluna a direita ---------- */
html,body{height:100%}
body{overflow:hidden}
#app{max-width:none;height:100vh;margin:0;padding:8px 12px;display:grid;grid-template-columns:auto minmax(320px,380px);grid-template-rows:auto minmax(0,1fr) auto;gap:8px 12px;justify-content:center;align-content:start}
#app>h1{grid-column:1/-1;margin:0}
#stage{grid-column:1;grid-row:2;align-self:start;width:min(calc(100vw - 440px),calc((100vh - 190px)*16/9))}
canvas#c{width:100%;height:auto}
#app>.ctl{flex-wrap:wrap}
#panel{grid-column:2;grid-row:2;margin-top:0;display:flex;flex-direction:column;min-height:0;max-height:calc(100vh - 110px)}
#hand{grid-template-columns:1fr;overflow:auto;flex:1;min-height:0}
#app>.ctl{grid-column:1/-1;grid-row:3;margin-top:0}
#app>.note{display:none}
#tree .tbox,#inv .ibox,#map .mbox{width:calc(100vw - 24px);height:calc(100vh - 24px)}
#map .mside,#tree .tside{width:420px}
.crar{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--rc);border:1px solid var(--rc);border-radius:4px;padding:0 5px;margin-left:4px;vertical-align:middle;background:rgba(0,0,0,.3)}
#map .hero .crar{display:inline-block;margin:3px 0 0}

/* invocacao (gacha) */
#gacha{position:fixed;inset:0;z-index:62;background:radial-gradient(#0a0a1acc,#020208f2);display:flex;align-items:center;justify-content:center;padding:12px}
#gacha[hidden]{display:none}
#gacha .gbox{width:min(1100px,98vw);height:min(680px,96vh);display:flex;flex-direction:column;background:#0b0a18;border:3px solid #b8924a;border-radius:14px;box-shadow:0 0 0 2px #2a1d08,0 0 0 5px #6e5424,0 0 50px #000;overflow:hidden}
#gacha .thead{display:flex;align-items:center;gap:20px;padding:10px 16px;background:linear-gradient(#2a2140,#14102a);border-bottom:2px solid #6e5424}
#gacha .thead h2{margin:0;font:700 18px Georgia,serif;color:#ffe9b0;letter-spacing:2px;flex:1}
#gacha .gscr{text-align:center;color:#ffe9b0}#gacha .gscr b{font:700 22px Georgia,serif;display:block}#gacha .gscr small{color:#a89868}
#gacha .x{background:#2a1d08;color:#ffe9b0;border:1px solid #6e5424;border-radius:8px;padding:6px 12px;cursor:pointer}
#gacha .gmain{flex:1;display:flex;gap:14px;padding:14px;min-height:0;flex-wrap:wrap;overflow:auto}
#gacha .gleft{flex:2 1 420px;display:flex;flex-direction:column;gap:12px;min-width:0}
#gacha .gres{flex:1;display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start;justify-content:center;padding:10px;background:#100e20;border:1px solid #3a2f14;border-radius:10px;min-height:200px}
#gacha .gc{width:104px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;background:#171430;border:2px solid var(--rc);border-radius:10px;box-shadow:0 0 14px var(--rc);animation:gcin .45s both;animation-delay:var(--d)}
#gacha .gc.new{background:#241c10}#gacha .gc b{color:#fff;font-size:13px}#gacha .gc em{font-style:normal;font-size:11px}#gacha .gc small{color:#c8c0a0;font-size:10px}
@keyframes gcin{from{opacity:0;transform:scale(.4) rotate(-8deg)}to{opacity:1;transform:none}}
#gacha .gpt{width:64px;height:64px;image-rendering:pixelated;background:#0a0818;border-radius:8px}
#gacha .gact{display:flex;gap:10px}#gacha .gact button{flex:1}#gacha .gact small{display:block;opacity:.7;font-size:11px}
#gacha .gact button:disabled{opacity:.4;cursor:not-allowed}
#gacha .gside{flex:1 1 280px;min-width:0;color:#d8d0b8}#gacha .gside h4{margin:4px 0 6px;color:#ffe9b0;font-family:Georgia,serif}
#gacha .pity{margin-bottom:8px}#gacha .pity small{color:#a89868}#gacha .pity b{display:block;color:#fff}
#gacha .bar{height:8px;background:#201a30;border-radius:5px;overflow:hidden;margin-top:3px}#gacha .bar i{display:block;height:100%;background:#4aa8ff}#gacha .bar.leg i{background:#ffa43a}
#gacha .hint{color:#a89f84;font-size:12px;line-height:1.4}
#gacha .glist{display:flex;flex-wrap:wrap;gap:8px}
#gacha .gr{width:96px;display:flex;flex-direction:column;align-items:center;padding:6px 3px;background:#14112a;border:1px solid var(--rc);border-radius:8px;font-size:11px;text-align:center}
#gacha .gr.lk{opacity:.5;filter:grayscale(.7)}#gacha .gr b{color:#fff}#gacha .gr em{font-style:normal}#gacha .gr small{color:#c8c0a0}

/* fases em duelos */
#map .foes{display:flex;flex-direction:column;gap:6px;margin:8px 0}
#map .foe{display:flex;align-items:center;gap:8px;background:#0e0c1e;border:1px solid #3a2f14;border-radius:8px;padding:6px 8px}
#map .foe .fi{flex:1;min-width:0}#map .foe .fi b{display:block;color:#fff;font-size:13px}#map .foe .fi small{color:#a89a78;font-size:11px}
#map .foe select{background:#1a1530;color:#ffe9b0;border:1px solid #6e5424;border-radius:6px;padding:4px;font-size:12px}
#map .foe .learn{padding:5px 10px;font-size:12px}
#map .foe.done{opacity:.5}#map .foe .ok{color:#7ad070;font-size:12px}
#map .tm{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:6px 0 12px}
#map .tu{background:#0e0c1e;border:1px solid #3a2f14;border-radius:8px;padding:6px 8px}#map .tu b{color:#fff;font-size:13px;display:block}#map .tu small{color:#a89a78;font-size:11px}
#map .tu .bar{height:6px;background:#201a30;border-radius:4px;overflow:hidden;margin-top:3px}#map .tu .bar i{display:block;height:100%;background:#7ad070}
#map .tu.dead{opacity:.45;filter:grayscale(1)}

/* icones de itens */
.ico{image-rendering:pixelated;width:100%;height:100%;object-fit:contain;display:block}
.ico.sm{width:28px;height:28px;display:inline-block;vertical-align:middle}.ico.big{width:64px;height:64px;float:left;margin:0 12px 6px 0;background:radial-gradient(circle at 35% 30%,#3a3050,#0a0814);border:2px solid #6e5424;border-radius:10px;padding:4px}
#inv .slot .si,#inv .it .gi{border-radius:10px;padding:5px;box-shadow:0 0 10px -2px var(--rc),inset 0 0 8px #000;font-size:22px}
#inv .slot .si{width:50px;height:50px}#inv .it .gi{width:58px;height:58px}
#map .lt{display:inline-flex;align-items:center;margin-left:6px;color:#ffd97a}

/* confirmacao e efeito de invocacao */
#gcf{position:absolute;inset:0;z-index:5;background:#000a;display:flex;align-items:center;justify-content:center}
#gcf .gcfbox{background:linear-gradient(#241c3a,#120e22);border:2px solid #b8924a;border-radius:12px;padding:22px 28px;max-width:380px;text-align:center;color:#e8e0c8;box-shadow:0 0 0 3px #2a1d08,0 10px 40px #000;animation:gcin .25s both}
#gcf h3{margin:0 0 10px;font:700 22px Georgia,serif;color:#ffe9b0}#gcf p{margin:6px 0;font-size:14px}#gcf .sm{font-size:12px;color:#a89f84}#gcf b{color:#ffd97a}
#gcf .gcfact{display:flex;gap:10px;margin-top:16px}#gcf .gcfact button{flex:1}
#gsum{position:absolute;inset:0;z-index:6;cursor:pointer;transition:opacity .4s}#gsum.out{opacity:0;pointer-events:none}#gsum canvas{width:100%;height:100%;display:block}
#gsum button{position:absolute;right:18px;bottom:16px;background:#1a1530cc;color:#ffe9b0;border:1px solid #6e5424;border-radius:8px;padding:6px 14px;cursor:pointer}
#gacha .gc{position:relative;overflow:visible}
#gacha .gc .gb{position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(circle,var(--rc),transparent 65%);opacity:0;pointer-events:none;animation:gcburst .9s ease-out both;animation-delay:var(--d);z-index:-1}
@keyframes gcburst{0%{opacity:0;transform:scale(.3)}25%{opacity:.9}100%{opacity:0;transform:scale(1.9)}}
#gacha .gc.r4{box-shadow:0 0 22px var(--rc),0 0 6px var(--rc) inset}#gacha .gc.r5{box-shadow:0 0 34px var(--rc),0 0 10px var(--rc) inset;animation:gcin .45s both,gcglow 1.4s ease-in-out infinite;animation-delay:var(--d),calc(var(--d) + .5s)}
@keyframes gcglow{50%{filter:brightness(1.35)}}
#gacha .gc.new small{color:#ffd97a;font-weight:700;animation:gcpulse 1s ease-in-out infinite}
@keyframes gcpulse{50%{transform:scale(1.15)}}
#gacha .learn{background:linear-gradient(#e0b860,#9a6e1e);color:#241606;border:2px solid #ffe9b0;border-radius:6px;padding:12px 18px;font:700 15px Georgia,serif;cursor:pointer;transition:transform .12s,filter .12s}
#gacha .learn:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.12)}
#gacha .learn.alt{background:linear-gradient(#5a5a9a,#34346a);color:#fff;border-color:#9a9ad0}
/* ===== acabamento do HUD: tema pergaminho dourado, igual aos paineis (mapa, mochila, arvore, invocacao) ===== */
h1{font:700 18px Georgia,'Times New Roman',serif;letter-spacing:6px;color:#ffe9b0;text-shadow:0 0 12px #b8924a66,0 2px 0 #000;border-bottom:1px solid #6e5424;padding-bottom:8px}
h1 small{font:600 11px Georgia,serif;color:#a89a78;letter-spacing:2px}
#stage{border:3px solid #b8924a;border-radius:12px;box-shadow:0 0 0 2px #2a1d08,0 0 0 5px #6e5424,0 8px 30px #000}
.hud{background:linear-gradient(#2a2140,#14102a);border-bottom:2px solid #6e5424;padding:8px 12px}
.pt{border:2px solid #e0b860;border-radius:8px;box-shadow:0 0 0 2px #2a1d08,0 0 12px #b8924a55}
.pl.r .pt{border-color:#e08a4a;box-shadow:0 0 0 2px #2a1d08,0 0 12px #e08a4a66}
.pl b{font:700 clamp(10px,1.2vw,13px) Georgia,serif;letter-spacing:2px;color:#ffe9b0;text-shadow:0 1px 0 #000}
.bar{height:13px;background:#0a0814;border:1px solid #6e5424;border-radius:4px;box-shadow:inset 0 2px 4px #000a}
.bar.ck,.bar.sm{height:7px}
.bar i.v{background-image:linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,0) 55%,rgba(0,0,0,.25))}
.row label{color:#b8924a;font-family:Georgia,serif}
.vs{font:700 14px Georgia,serif;color:#e0b860;text-shadow:0 0 8px #b8924a88}
#panel{border:2px solid #b8924a;border-radius:12px;background:linear-gradient(#171230,#0d0b1c);box-shadow:0 0 0 2px #2a1d08,0 0 0 4px #6e5424}
#cmdhead{background:linear-gradient(#2a2140,#14102a);border-bottom:2px solid #6e5424;font:700 13px Georgia,serif;color:#ffe9b0;letter-spacing:3px}
#cmdhead span{color:#a89a78;font-family:Georgia,serif}
#cmdhead .back{background:#2a1d08;border-color:#b8924a;color:#ffe9b0;font-family:Georgia,serif}
#hand .cmd{background:linear-gradient(90deg,#1c1738,#14112a);border:1px solid #3a2f14;border-left:4px solid var(--cc,#e0b860)}
#hand .cmd:hover:not(:disabled){background:linear-gradient(90deg,#2a2250,#1c1738);border-color:var(--cc,#e0b860);box-shadow:0 0 14px -4px var(--cc,#e0b860)}
#hand .cmd .ic{background:radial-gradient(circle at 35% 30%,#3a3050,#0a0814);border:1px solid #6e5424;color:#ffe9b0;font-family:Georgia,serif;border-radius:50%;width:26px;height:26px}
#hand .cmd .tx b{font-family:Georgia,serif;letter-spacing:.5px}
#hand .cmd .cost{background:linear-gradient(#1a3a78,#12284e);border:1px solid #3a6ac0}
.ctl button{background:linear-gradient(#2a2140,#14102a);color:#ffe9b0;border:1px solid #b8924a;border-radius:6px;font-family:Georgia,serif;letter-spacing:.5px}
.ctl button:hover{background:linear-gradient(#3a2e5a,#1e1838);box-shadow:0 0 10px #b8924a55}
#toast{background:linear-gradient(#241c3a,#120e22);border:1px solid #b8924a;color:#ffe9b0;font-family:Georgia,serif;box-shadow:0 4px 18px #000}
/* palco estreito: as duas placas do HUD ficam uma sobre a outra, com as barras legiveis */
#stage{container-type:inline-size}
@container (max-width:460px){.hud,.roleN .hud{flex-direction:column;align-items:stretch;gap:6px}.pl,.roleN .pl,.roleN .pl.r,.pl.r{width:100%}.vs{display:none}.pt{width:34px;height:34px}.pl b{margin-bottom:1px}}

/* ===== leitura melhorada: HUD de batalha, comandos e invocacao em tamanhos maiores ===== */
:root{--cw:clamp(380px,28vw,540px)}
#app{grid-template-columns:auto var(--cw)}
#stage{width:min(calc(100vw - var(--cw) - 52px),calc((100vh - 190px)*16/9))}
/* HUD: placas grandes com retrato, nome, vida e chakra numericos */
.hud{padding:clamp(8px,1cqw,16px) clamp(10px,1.4cqw,22px);gap:clamp(10px,1.6cqw,24px)}
.pl{gap:clamp(8px,1.2cqw,18px)}
.pt{width:clamp(48px,7cqw,96px);height:clamp(48px,7cqw,96px);border-radius:10px;border-width:3px}
.pl b{font-size:clamp(13px,1.9cqw,26px);letter-spacing:.14em;margin-bottom:clamp(3px,.5cqw,8px)}
.row{gap:clamp(5px,.8cqw,12px);margin-top:clamp(3px,.45cqw,7px)}
.row label{font-size:clamp(10px,1.25cqw,17px);width:clamp(22px,2.6cqw,36px);font-weight:700;letter-spacing:.06em}
.bar{height:clamp(16px,2.3cqw,32px);border-radius:6px}
.bar.ck,.bar.sm{height:clamp(11px,1.5cqw,22px)}
.bar .num,.bar.ck .num{display:block;font-size:clamp(10px,1.35cqw,19px);font-weight:800}
.bar.ck .num,.bar.sm .num{font-size:clamp(8px,1.05cqw,14px)}
.vs{font-size:clamp(16px,2.4cqw,34px)}
/* painel de comandos: fontes bem maiores */
#cmdhead{padding:clamp(10px,.9vw,16px) clamp(14px,1.2vw,22px);font-size:clamp(14px,1.1vw,19px)}
#cmdhead span{font-size:clamp(12px,.9vw,15px)}
#cmdhead .back{font-size:clamp(13px,.95vw,16px);padding:6px 14px}
#hand{gap:clamp(8px,.7vw,12px);padding:clamp(10px,.8vw,14px)}
#hand .cmd{grid-template-columns:clamp(30px,2.3vw,40px) 1fr auto;gap:clamp(10px,.9vw,16px);padding:clamp(10px,.8vw,15px) clamp(12px,1vw,18px);border-radius:10px}
#hand .cmd .ic{width:clamp(30px,2.3vw,40px);height:clamp(30px,2.3vw,40px);font-size:clamp(14px,1.1vw,19px)}
#hand .cmd .tx b{font-size:clamp(16px,1.3vw,22px);line-height:1.25}
#hand .cmd .tx small{font-size:clamp(12.5px,.98vw,16px);line-height:1.4;margin-top:4px;color:#b4b8dc}
#hand .cmd .cost{font-size:clamp(15px,1.2vw,20px);padding:4px 10px;border-radius:7px}
#hand .cmd .cost em{font-size:clamp(9px,.7vw,12px)}
#hand .cmd .tx b .el{font-size:clamp(10px,.75vw,13px);padding:2px 8px}
.ctl{gap:12px}.ctl button{font-size:clamp(13px,1vw,17px);padding:8px 18px}
#toast{font-size:clamp(13px,1.05vw,17px);padding:8px 18px}
/* invocacao */
#gacha .gbox{width:min(1400px,97vw);height:min(860px,96vh)}
#gacha .thead h2{font-size:clamp(22px,2vw,30px)}
#gacha .gscr b{font-size:clamp(26px,2.2vw,36px)}#gacha .gscr small{font-size:clamp(12px,1vw,15px)}
#gacha .x{font-size:clamp(14px,1.1vw,17px);padding:8px 16px}
#gacha .hint{font-size:clamp(14px,1.15vw,18px);line-height:1.55}
#gacha .gside h4{font-size:clamp(18px,1.5vw,24px)}
#gacha .pity small{font-size:clamp(13px,1vw,16px)}#gacha .pity b{font-size:clamp(17px,1.35vw,22px)}
#gacha .bar{height:12px}
#gacha .gc{width:clamp(120px,10vw,160px);padding:12px 6px}
#gacha .gc b{font-size:clamp(15px,1.2vw,20px)}#gacha .gc em{font-size:clamp(12px,.95vw,15px)}#gacha .gc small{font-size:clamp(11px,.85vw,14px)}
#gacha .gpt{width:clamp(72px,6vw,104px);height:clamp(72px,6vw,104px)}
#gacha .gr{width:clamp(110px,9vw,150px);font-size:clamp(12px,.95vw,15px);padding:8px 4px}
#gacha .gr b{font-size:clamp(14px,1.1vw,18px)}
#gacha .learn{font-size:clamp(16px,1.3vw,21px);padding:14px 20px}#gacha .gact small{font-size:clamp(12px,.95vw,15px)}
#gcf .gcfbox{max-width:min(520px,92vw);padding:28px 36px}#gcf h3{font-size:clamp(24px,2vw,32px)}#gcf p{font-size:clamp(15px,1.2vw,19px)}#gcf .sm{font-size:clamp(13px,1vw,16px)}
body.hub #cmdhead span{display:none}
#map #mprs{background:linear-gradient(#b0303a,#7a1a22);color:#fff;border:2px solid #ff8a8a;border-radius:6px;padding:8px 18px;font:700 14px Georgia,serif;cursor:pointer}#map #mprs:hover{filter:brightness(1.2)}
#hand{align-content:start}
/* vila: so o cenario de Konoha, com o nome do lugar */
body.hub #stage::after{content:'KONOHA';position:absolute;left:0;right:0;top:42%;text-align:center;font:700 clamp(28px,6cqw,84px) Georgia,serif;letter-spacing:.3em;color:#ffe9b0;text-shadow:0 0 24px #b8924a,0 4px 0 #000;pointer-events:none}

/* painel lateral do mapa maior e com vantagem elemental */
#map .mside,#tree .tside{width:clamp(430px,27vw,600px)}
#map .mside h3{font-size:clamp(24px,1.9vw,34px)}
#map .desc{font-size:clamp(15px,1.15vw,19px);line-height:1.5}
#map .enc small,#map .lab{font-size:clamp(11px,.85vw,14px)}
#map .stats small{font-size:clamp(11px,.85vw,14px)}#map .stats b{font-size:clamp(18px,1.4vw,24px)}
#map .foe{padding:10px 12px;gap:12px;flex-wrap:wrap}
#map .foe .fi b{font-size:clamp(16px,1.25vw,21px)}
#map .foe .fi small{font-size:clamp(12px,.95vw,15px);display:flex;align-items:center;gap:6px;margin:3px 0;color:#c8b98e;text-transform:uppercase;letter-spacing:.04em}
#map .foe select{font-size:clamp(14px,1.05vw,17px);padding:6px 8px}
#map .foe .learn{font-size:clamp(14px,1.05vw,17px);padding:7px 14px}
#map .foe .el{font-style:normal;font-size:clamp(11px,.85vw,14px);padding:1px 8px;border-radius:10px;color:var(--ec);border:1px solid var(--ec);margin:0}
#map .adv{display:block;font-size:clamp(12px,.95vw,15px);margin-top:3px;color:#a89a78;text-transform:none;letter-spacing:0}
#map .adv.up{color:#7ae08a}#map .adv.up b{color:#b8ffc4}#map .adv.dn{color:#ff9a8a}
#map .tip{font-size:clamp(13px,1vw,16px);line-height:1.5;color:#a8e8b8}
#map .chart{margin:10px 0 4px;background:#0e0c1e;border:1px solid #3a2f14;border-radius:8px;padding:8px 12px}
#map .chart small{display:block;margin-bottom:6px;font-size:clamp(11px,.85vw,14px);color:#a89a78;text-transform:uppercase;letter-spacing:.05em}
#map .chart .cc{display:inline-block;margin:2px 10px 2px 0;font-size:clamp(12px,.95vw,15px);color:#d8d0b8}
#map .chart .el{font-style:normal;font-size:clamp(11px,.85vw,14px);padding:1px 8px;border-radius:10px;color:var(--ec);border:1px solid var(--ec)}
#map #ph-sug{width:100%;margin:6px 0 4px;font-size:clamp(14px,1.05vw,17px);padding:9px 12px}
#map .party{gap:8px}#map .hero{padding:10px 12px}
#map .hero b{font-size:clamp(15px,1.2vw,20px)}#map .hero small{display:block;font-size:clamp(12px,.95vw,15px)}
#map .hero .crar{display:block;width:max-content;margin-top:5px;font-size:clamp(10px,.8vw,13px)}
#map .act .learn{font-size:clamp(15px,1.2vw,19px);padding:12px 18px;width:100%}
#map .tm .tu b{font-size:clamp(14px,1.1vw,18px)}#map .tm .tu small{font-size:clamp(12px,.95vw,15px)}
#map .foe .fi .adv b{display:inline;font-size:inherit}

/* resultado do duelo */
#resbox{position:fixed;inset:0;z-index:55;display:flex;align-items:center;justify-content:center;background:radial-gradient(#0008,#000c);animation:rbin .35s both}
@keyframes rbin{from{opacity:0}to{opacity:1}}
#resbox .rb{background:linear-gradient(#241c3a,#120e22);border:3px solid #b8924a;border-radius:14px;padding:clamp(18px,2.4vw,40px) clamp(24px,4vw,64px);text-align:center;max-width:90%;box-shadow:0 0 0 2px #2a1d08,0 0 0 5px #6e5424,0 12px 60px #000}
#resbox.bad .rb{border-color:#c84a4a}
#resbox h3{margin:0 0 8px;font:900 clamp(26px,4.6vw,64px) Georgia,serif;letter-spacing:.16em;color:#ffe9b0;text-shadow:0 0 20px #b8924a,0 3px 0 #000}
#resbox.bad h3{color:#ff9a8a;text-shadow:0 0 20px #c84a4a,0 3px 0 #000}
#resbox p{margin:0 0 18px;font:clamp(14px,1.6vw,22px)/1.5 Georgia,serif;color:#d8d0b8}
#resbox .ra{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
#resbox .learn{background:linear-gradient(#e0b860,#9a6e1e);color:#241606;border:2px solid #ffe9b0;border-radius:8px;padding:clamp(10px,1.2vw,18px) clamp(16px,2.2vw,34px);font:700 clamp(15px,1.7vw,24px) Georgia,serif;cursor:pointer;pointer-events:auto}
#resbox .learn.alt{background:linear-gradient(#5a5a9a,#34346a);color:#fff;border-color:#9a9ad0}
#resbox .learn:hover{filter:brightness(1.15)}
body.hub #resbox{display:none}
#hand .cmd .tx b .dmgc{font-style:normal;font:800 clamp(11px,.85vw,14px) 'Trebuchet MS',Arial,sans-serif;margin-left:8px;padding:2px 8px;border-radius:9px;color:#ffd0a0;background:#4a1c14;border:1px solid #c8603a;vertical-align:middle;white-space:nowrap}

/* painel de resultado completo: nota, recompensas e registro */
#resbox .rb.big{width:min(1200px,94vw)}
#resbox .rg{display:grid;grid-template-columns:minmax(150px,.8fr) 1.2fr 1.5fr;gap:clamp(12px,1.6vw,26px);text-align:left;margin:6px 0 20px}
@media (max-width:900px){#resbox .rg{grid-template-columns:1fr}}
#resbox .grade{text-align:center;border:3px solid var(--gc);border-radius:14px;padding:12px 8px;background:radial-gradient(circle at 50% 30%,#241c3a,#0d0b1c);box-shadow:0 0 28px -4px var(--gc)}
#resbox .grade small{font:700 clamp(11px,.9vw,14px) Georgia,serif;letter-spacing:.3em;color:#a89a78}
#resbox .grade b{display:block;font:900 clamp(64px,8vw,130px)/1 Georgia,serif;color:var(--gc);text-shadow:0 0 30px var(--gc),0 4px 0 #000}
#resbox .grade span{font:600 clamp(12px,1vw,15px) Georgia,serif;color:#d8d0b8}
#resbox .gbr{margin-top:10px;display:flex;flex-direction:column;gap:4px;font:clamp(12px,1vw,15px) Georgia,serif;color:#c8c0a8}
#resbox .gbr b{color:#ffe9b0}#resbox .gnote{margin:6px 0 0;font:clamp(11px,.9vw,14px)/1.4 Georgia,serif;color:#a89f84}
#resbox h4{margin:0 0 6px;font:700 clamp(14px,1.2vw,19px) Georgia,serif;color:#ffe9b0;letter-spacing:.08em;text-transform:uppercase}
#resbox ul{list-style:none;margin:0 0 12px;padding:0}
#resbox .rw li{padding:4px 0;border-bottom:1px solid #2a2240;font:clamp(14px,1.15vw,18px) Georgia,serif;color:#e8e0c8}
#resbox .rw b{color:#ffe9b0}#resbox i.up{font-style:normal;color:#7ae08a;font-size:.85em}#resbox i.dn{font-style:normal;color:#ff9a8a;font-size:.85em}
#resbox .rw li.it{display:flex;align-items:center;gap:8px;border-left:4px solid var(--rc);padding-left:8px}
#resbox .blog{max-height:min(34vh,330px);overflow:auto;padding-right:6px}
#resbox .blog li{padding:6px 8px;margin-bottom:5px;background:#0e0c1e;border-left:4px solid #3a2f14;border-radius:6px;font:clamp(13px,1.05vw,17px)/1.35 Georgia,serif;color:#d8d0b8}
#resbox .blog li.w{border-left-color:#4cc35a}#resbox .blog li.l{border-left-color:#e05a4a}
#resbox .blog li b{color:#fff}#resbox .blog small{display:block;color:#a89f84;font-size:.85em;margin-top:2px}
#resbox .rg1{text-align:left;margin:0 0 14px}
#resbox .rb{max-height:94vh;overflow:auto}

/* vila: titulo discreto e predios clicaveis */
body.hub #stage::after{content:'KONOHAGAKURE · VILA DA FOLHA';top:3%;font:700 clamp(12px,1.6cqw,22px) Georgia,serif;letter-spacing:.34em;color:#fff6d8;text-shadow:0 2px 0 #3a1c10,0 0 12px #b8924a}
.konhot{position:absolute;transform:translate(-50%,-50%);z-index:6;background:linear-gradient(#2a2140ee,#14102aee);color:#ffe9b0;border:2px solid #b8924a;border-radius:10px;padding:clamp(4px,.6cqw,9px) clamp(8px,1.1cqw,16px);cursor:pointer;text-align:center;box-shadow:0 4px 16px #0009;transition:transform .12s,box-shadow .12s;pointer-events:auto}
.konhot b{display:block;font:700 clamp(11px,1.35cqw,19px) Georgia,serif;white-space:nowrap}
.konhot small{display:block;font:600 clamp(9px,.95cqw,13px) Georgia,serif;color:#c8b98e;white-space:nowrap}
.konhot:hover{transform:translate(-50%,-56%) scale(1.07);box-shadow:0 8px 24px #000a,0 0 18px #b8924a88}
body.hub #stage{pointer-events:auto}
@container (max-width:460px){.konhot{padding:3px 6px}.konhot small{display:none}}

/* loja do armeiro e ichiraku */
#shop,#ramen{position:fixed;inset:0;z-index:58;background:radial-gradient(#0a0a1acc,#020208f2);display:flex;align-items:center;justify-content:center;padding:12px}
#shop[hidden],#ramen[hidden]{display:none}
.sbox{width:min(1250px,97vw);height:min(780px,95vh);display:flex;flex-direction:column;background:radial-gradient(ellipse at 40% 20%,#1a1634,#0b0a18 70%);border:3px solid #b8924a;border-radius:14px;box-shadow:0 0 0 2px #2a1d08,0 0 0 5px #6e5424,0 0 50px #000;overflow:hidden;color:#e8e0c8}
.sbox.rbox{height:auto;max-height:95vh}
.sbox .thead{display:flex;align-items:center;gap:16px;padding:10px 16px;background:linear-gradient(#2a2140,#14102a);border-bottom:2px solid #6e5424;flex-wrap:wrap}
.sbox .thead h2{margin:0;font:700 clamp(18px,1.6vw,26px) Georgia,serif;color:#ffe9b0;letter-spacing:2px;flex:1}
.sbox .tabs{display:flex;gap:6px}.sbox .tab{background:#1a1630;color:#b9a97a;border:1px solid #6e5424;border-radius:4px;padding:6px 16px;font:700 clamp(13px,1vw,16px) Georgia,serif;cursor:pointer}.sbox .tab.on{background:linear-gradient(#6e5424,#3f300f);color:#ffe9b0;border-color:#e0b860}
.sbox .ryo{text-align:center;color:#ffe9b0}.sbox .ryo b{font:700 clamp(20px,1.8vw,28px) Georgia,serif;display:block}.sbox .ryo small{color:#a89868}
.sbox .x{background:#2a1d08;color:#ffe9b0;border:1px solid #b8924a;border-radius:6px;padding:7px 14px;font:700 clamp(12px,.95vw,15px) Georgia,serif;cursor:pointer}
.sbox .smain{flex:1;display:flex;gap:14px;padding:14px;min-height:0;flex-wrap:wrap;overflow:auto}
.sbox .slist{flex:2 1 460px;min-width:0;display:flex;flex-direction:column;gap:10px}
.sbox .sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px}
.sbox .sit{display:flex;align-items:center;gap:10px;background:#0e0c1e;border:2px solid var(--rc);border-radius:10px;padding:8px 10px;cursor:pointer;color:#e8e0c8;text-align:left}
.sbox .sit:hover{background:#171432}.sbox .sit.sel{outline:3px solid #fff;outline-offset:2px}
.sbox .gi{width:54px;height:54px;border-radius:10px;padding:5px;background:radial-gradient(circle at 35% 30%,#3a3050,#0a0814);border:2px solid var(--rc);flex:none}
.sbox .sn{flex:1;min-width:0}.sbox .sn b{display:block;font:700 clamp(14px,1.1vw,18px) Georgia,serif}.sbox .sn small{font:600 clamp(11px,.85vw,14px) Georgia,serif;color:#a89a78}
.sbox .sp{font:700 clamp(16px,1.3vw,22px) Georgia,serif;color:#ffd97a;text-align:right}.sbox .sp em{display:block;font:600 10px Georgia,serif;color:#a89868;font-style:normal}
.sbox .sside{flex:1 1 300px;min-width:0}.sbox .sdet h4{margin:0 0 4px;font:700 clamp(18px,1.5vw,24px) Georgia,serif}.sbox .sdet small{color:#a89a78;font:600 clamp(12px,.95vw,15px) Georgia,serif}
.sbox .sdet p{font:clamp(14px,1.1vw,18px)/1.5 Georgia,serif}.sbox .eff{color:#9ff0b8}
.sbox .hint{color:#a89f84;font:clamp(13px,1vw,16px)/1.5 Georgia,serif;margin:0}
.sbox .learn{background:linear-gradient(#e0b860,#9a6e1e);color:#241606;border:2px solid #ffe9b0;border-radius:8px;padding:11px 18px;font:700 clamp(14px,1.15vw,18px) Georgia,serif;cursor:pointer;width:100%;margin-top:10px}.sbox .learn.off{opacity:.45;cursor:not-allowed}
.sbox .rmain{padding:16px 20px;overflow:auto}.sbox .rcur{margin:10px 0 14px;padding:10px 14px;background:#0e2a18;border:1px solid #3a8a58;border-radius:8px;font:clamp(14px,1.1vw,18px) Georgia,serif;color:#b8ffd0}.sbox .rcur.none{background:#0e0c1e;border-color:#3a2f14;color:#a89a78}
.sbox .rgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.sbox .rc{background:#0e0c1e;border:2px solid #6e5424;border-radius:12px;padding:14px;text-align:center}.sbox .rc h4{margin:6px 0 2px;font:700 clamp(16px,1.3vw,21px) Georgia,serif;color:#ffe9b0}.sbox .rc small{color:#a89a78;font:clamp(12px,.95vw,15px) Georgia,serif}
.sbox .rc .ico.big{float:none;margin:0 auto;width:72px;height:72px;display:block}

.sbox .fup{font-style:normal;font-size:.8em;color:#ffd97a;background:#3a2a08;border:1px solid #b8924a;border-radius:8px;padding:0 6px;margin-left:4px}
.sbox .dbar{height:10px;background:#201a30;border:1px solid #6e5424;border-radius:5px;overflow:hidden;margin:6px 0 10px}.sbox .dbar i{display:block;height:100%;background:linear-gradient(#ffd97a,#c8801e)}
.sbox .sdet h5{margin:12px 0 4px;font:700 clamp(13px,1vw,16px) Georgia,serif;color:#ffe9b0;letter-spacing:.08em;text-transform:uppercase}
.sbox .learn.alt{background:linear-gradient(#5a5a9a,#34346a);color:#fff;border-color:#9a9ad0}
#dojo{position:fixed;inset:0;z-index:58;background:radial-gradient(#0a0a1acc,#020208f2);display:flex;align-items:center;justify-content:center;padding:12px}#dojo[hidden]{display:none}
#inv .fup{font-style:normal;font-size:.8em;color:#ffd97a;background:#3a2a08;border:1px solid #b8924a;border-radius:8px;padding:0 6px;margin-left:4px}