[hidden]{display:none!important} /* 01/11: #npc{display:grid} vencia o .panel[hidden] e o X da janela do NPC não fechava */
/* Vellgrim DUEL 08 — layout do client no estilo do Sword Online: status e menu à esquerda, jogo no meio,
   inventário e mochila à direita, minimapa no canto, barra de vida/XP no topo. */
:root{--gold:#c3b7a2;--ink:#151516;--bg:#121212;--panel:#171718;--panel2:#1d1d1e;--line:#313234;--line2:#45464b;--txt:#e2dcd2;--mute:#939498;--L:236px;--M:64px;--R:244px}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#0b0b0c;color:#eeeeee;font:13px/1.45 system-ui,Segoe UI,Arial}
button{cursor:pointer;font:inherit}canvas{display:block}
#app{position:absolute;inset:0;display:grid;grid-template-columns:var(--L) var(--M) minmax(0,1fr) var(--R);background:var(--bg)}
#left,#right{background:#101010;border-right:1px solid #222224;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:4px;padding:4px;min-width:0;width:100%;scrollbar-width:thin;scrollbar-color:#3a3a3d #101010}
/* DUEL 08: tamanhos fixos — as colunas não crescem e as barras de rolagem (Windows) não empurram o conteúdo */
#left::-webkit-scrollbar,#right::-webkit-scrollbar,.bag::-webkit-scrollbar,.panel::-webkit-scrollbar{width:6px;height:6px}
#left::-webkit-scrollbar-thumb,#right::-webkit-scrollbar-thumb,.bag::-webkit-scrollbar-thumb,.panel::-webkit-scrollbar-thumb{background:#3a3a3d;border-radius:3px}
#left::-webkit-scrollbar-track,#right::-webkit-scrollbar-track,.bag::-webkit-scrollbar-track,.panel::-webkit-scrollbar-track{background:transparent}
.win{min-width:0;max-width:100%}
#right{border-right:0;border-left:1px solid #222224}
#left .brand{font:700 15px Georgia,serif;letter-spacing:2px;color:var(--gold);padding:6px 8px 2px;text-shadow:0 2px 1px #000000}
#left .brand small{display:block;font:9px/1.6 system-ui;color:#818287;letter-spacing:1px}
/* janelas laterais */
.win{background:var(--panel);border:1px solid var(--line);border-radius:3px;flex-shrink:0}
.win header{display:flex;align-items:center;gap:4px;background:linear-gradient(#222224,#19191a);border-bottom:1px solid var(--line);padding:3px 5px 3px 8px}
.win .wt{flex:1;font:700 11px system-ui;letter-spacing:1.4px;text-transform:uppercase;color:#ccc1ae}
.win header button{width:20px;height:18px;padding:0;line-height:16px;background:#252526;border:1px solid #3a3a3d;color:#c3b7a2;border-radius:2px;font-size:12px}
.win.min .wbody{display:none}.win[hidden]{display:none}
.wbody{padding:6px 8px}
#statusList{display:grid;grid-template-columns:1fr auto;gap:1px 8px;margin:0;font-size:12px}
#statusList dt{color:#c3b7a2}#statusList dd{margin:0;text-align:right;color:#e9e4dc;font-variant-numeric:tabular-nums}
#statusList .sep{grid-column:1/-1;height:1px;background:#252527;margin:4px 0}
#statusList .xpb{grid-column:1/-1;height:4px;background:#0b0b0c;border:1px solid #252527;margin:1px 0 3px}#statusList .xpb i{display:block;height:100%;background:linear-gradient(#c6baa5,#912424)}
#statusList dd.good{color:#9fe0a0}#statusList dd.warn{color:#ffb19a}#statusList dd.gold{color:#c5b9a4}
#spellsList .sp{display:grid;grid-template-columns:28px 1fr auto;gap:2px 7px;align-items:center;padding:3px 0;border-bottom:1px solid #1f2021}
#spellsList img{width:28px;height:28px;image-rendering:pixelated;grid-row:span 2;border:1px solid #3a3a3d;border-radius:2px}
#spellsList b{font-weight:600;color:#e2dcd2;font-size:12px}#spellsList small{color:var(--mute);font-size:10px;grid-column:2/4}
#spellsList .pips{justify-self:end}
/* menu de ícones */
#menu{background:#0e0e0e;border-right:1px solid #222224;display:grid;grid-template-columns:1fr;align-content:start;gap:6px;padding:8px 10px}
#menu button{position:relative;width:44px;height:44px;padding:0;background:linear-gradient(#252526,#161617);border:1px solid #45464b;border-radius:4px;display:flex;align-items:center;justify-content:center}
#menu button:hover,#menu button.on{border-color:#c3b7a2;background:linear-gradient(#303032,#1d1d1e)}
#menu button[hidden]{display:none}
#menu .dot{position:absolute;right:-3px;top:-3px;width:10px;height:10px;border-radius:50%;background:#c5b9a4;box-shadow:0 0 6px #c5b9a4}
.mi{display:block;width:32px;height:32px;background:url(items/atlas.png) no-repeat;background-size:512px auto;image-rendering:pixelated}
.mi-bag{background-position:-416px -256px}.mi-map{background-position:-192px -64px}.mi-ladder{background-position:-224px -128px}.mi-guide{background-position:-128px -64px}
.mi-gear{background-position:-224px -288px}.mi-admin{background-position:-352px -256px}.mi-exit{background-position:-128px -128px}.mi-char{background-position:-416px -64px}
.mi-tree{background:url(icons/passive_wisdom.png) center/32px no-repeat}
/* palco do jogo */
#stage{position:relative;overflow:hidden;min-width:0}
#viewer{position:absolute;inset:0}#viewer canvas{width:100%;height:100%}
#topbar{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:min(430px,62%);background:#141310e6;border:1px solid #3a3a3d;border-radius:4px;padding:5px 9px 4px;pointer-events:none;z-index:2}
.hpline,.xpline{display:flex;align-items:center;gap:6px}.heart{color:#ff4a4a;font-size:15px;line-height:1;text-shadow:0 0 4px #a00}
.bar{position:relative;flex:1;height:16px;background:#171717;border:1px solid #0d0d0d;margin:2px 0;box-shadow:inset 0 1px 2px #000000}
.bar span{display:block;height:100%;width:100%;transition:width .15s linear}
.bar b{position:absolute;left:0;right:0;text-align:center;top:0;font:bold 10px/14px system-ui;text-shadow:1px 1px #000000,-1px -1px #000000}
.health span{background:linear-gradient(#7bdd6a,#267a2d)}.mana span{background:linear-gradient(#67b8ee,#2464ae)}.xp span{background:linear-gradient(#c6baa5,#912424)}
.mana{height:9px;margin-left:21px}.mana b{font-size:8px;line-height:8px}
.xpline b#lvText{font:700 11px system-ui;color:#9fd0ff;min-width:38px}.xp{height:10px}.xp b{font-size:8px;line-height:9px}
#heroLine{color:#c3b7a2;font-size:10px;display:flex;justify-content:space-between;margin-top:1px}
#minimapBox{position:absolute;top:8px;right:8px;width:158px;height:176px;z-index:2}
#minimap{width:150px;height:150px;border-radius:50%;border:3px solid #4d4e54;box-shadow:0 0 0 2px #0e0e0e,0 6px 18px #000a;background:#0b0b0b;margin:0 auto}
#minimapBox button{position:absolute;top:126px;width:22px;height:22px;border-radius:50%;background:#252526;border:1px solid #68696e;color:#d3cabb;padding:0;line-height:18px}
#mmMinus{left:2px}#mmPlus{right:2px}
#onlineBadge{position:absolute;top:0;right:0;background:#141310e6;border:1px solid #3a3a3d;border-radius:9px;padding:0 7px;font-size:11px;color:#9dffa8}
#fpsBadge{position:absolute;left:50%;transform:translateX(-50%);bottom:0;background:#141310e6;border:1px solid #252527;border-radius:9px;padding:0 8px;font-size:10px;color:#9fe0a0;white-space:nowrap}
#regionTag{position:absolute;top:96px;left:50%;transform:translateX(-50%);z-index:1;font:700 12px Georgia,serif;color:#ccc1ae;text-shadow:0 2px 3px #000000;pointer-events:none;opacity:0;transition:opacity .6s}
#regionTag.on{opacity:1}
#bottom{position:absolute;bottom:72px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;z-index:2}
#actionbar{display:flex;gap:5px;pointer-events:auto;padding:5px;background:#15130fe6;border:1px solid #45464b;border-radius:5px;box-shadow:0 6px 20px #0009}
.slot{position:relative;width:52px;height:52px;padding:0;background:#0b0b0c;border:2px solid #4d4e54;border-radius:4px;overflow:hidden;color:#ffffff}
.slot img{display:block;width:100%;height:100%;image-rendering:pixelated}
.slot.ready{border-color:#bc2f2f}.slot:hover{border-color:#d1c8b8}
.slot .cd{position:absolute;left:0;right:0;bottom:0;height:0;background:#000b;pointer-events:none}
.slot kbd{position:absolute;left:3px;top:1px;font:bold 10px system-ui;color:#ffffff;text-shadow:1px 1px 0 #000000,-1px -1px 0 #000000}
.slot em{position:absolute;right:3px;top:1px;font:bold 9px system-ui;font-style:normal;color:#8fd0ff;text-shadow:1px 1px 0 #000000,-1px -1px 0 #000000}
.slot b{position:absolute;left:0;right:0;bottom:1px;font:600 7px/1 system-ui;text-align:center;color:#dfd8cd;text-shadow:1px 1px 0 #000000,-1px -1px 0 #000000;white-space:nowrap;overflow:hidden}
.slot .lock{display:none;position:absolute;inset:0;background:#000c;align-items:center;justify-content:center;font:bold 11px system-ui;color:#c3b7a2}
.slot.locked .lock{display:flex}.slot.locked img{filter:grayscale(1)}
.slot.nomana:not(.locked) img,.slot.nomana .potico{filter:saturate(.25) brightness(.7)}
.slot.deny{animation:deny .35s}@keyframes deny{0%,100%{transform:none}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.slot.pot .potico{display:block;width:40px;height:40px;margin:4px auto 0;background:url(items/atlas.png) no-repeat;background-size:640px auto;image-rendering:pixelated}
.slot .qty{position:absolute;right:2px;bottom:0;font:bold 9px system-ui;font-style:normal;color:#ffffff;text-shadow:1px 1px 0 #000000,-1px -1px 0 #000000}
#log{background:#1a1916de;border:1px solid var(--line);border-radius:4px;padding:5px 10px;color:#cccccc;font-size:11px;max-width:420px;pointer-events:none}
#chat{position:absolute;left:0;right:0;bottom:0;height:64px;z-index:3;background:#11100dee;border-top:1px solid #252527;overflow:hidden;display:flex;flex-direction:column;padding:0;pointer-events:auto;transition:height .12s}
#chat .line{font-size:11px;color:#e2dcd2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#chat .line time{color:#6c6c6f;margin-right:6px}
#chat .k-warn{color:#ffb19a}#chat .k-gold{color:#c5b9a4}#chat .k-level{color:#b9f37a}#chat .k-server{color:#7fd6ff;font-weight:700}
#chat .k-loot-common{color:#e8e3da}#chat .k-loot-epic{color:#c48bff;font-weight:600}#chat .k-loot-rare{color:#6fb4ff}#chat .k-loot-legendary{color:#c3b7a2;font-weight:700}#chat .k-loot-mythic{color:#ff6a3d;font-weight:700}
#chat:hover,#chat:focus-within{height:190px}
#version{position:absolute;bottom:2px;right:calc(var(--R) + 8px);color:#717277;font-size:9px;z-index:3;pointer-events:none}
/* inventário (boneco) e mochila */
.doll{display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(4,52px);gap:5px;justify-content:center}
.cell{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:#0d0d0e;border:1px solid #2e2e30;border-radius:3px;padding:0}
.cell small{font-size:8px;color:#5f6063;text-transform:uppercase}
.cell.sel{border-color:#c5b9a4;box-shadow:0 0 0 1px #c5b9a4 inset}.cell:hover{border-color:#6a6b70}
.doll .cell{width:52px;height:52px}
.money{display:flex;justify-content:space-between;margin-top:6px;padding:4px 6px;background:#0d0d0e;border:1px solid #252527;border-radius:3px;font-size:12px}.money b{color:#c5b9a4}
.bag{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;max-height:236px;overflow-y:auto;overflow-x:hidden;padding-right:3px;scrollbar-width:thin;scrollbar-color:#3a3a3d transparent}
.bag .cell{width:auto}
.icow{position:relative;display:inline-block;flex-shrink:0}.ico{display:block;background-image:url(items/atlas.png);background-repeat:no-repeat;image-rendering:pixelated}
.icow.r-epic{filter:drop-shadow(0 0 3px #b874ffdd)}.icow.r-rare{filter:drop-shadow(0 0 3px #5aa8ffcc)}.icow.r-legendary{filter:drop-shadow(0 0 4px #c3b7a2)}
.icow.r-mythic{filter:drop-shadow(0 0 5px #ff6a3d)}.icow.broken{opacity:.45;filter:grayscale(1)}.icow.broken::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 46%,#d23a44 46% 54%,transparent 54%)}
.idur{font-size:11px;color:#b9c3a0;margin-top:2px}.idur.low{color:#bc2f2f}.idur.bad{color:#ff6b6b}
.icow .plus{position:absolute;left:-3px;top:-5px;font:bold 9px system-ui;font-style:normal;color:#c5b9a4;text-shadow:1px 1px 0 #000000,-1px -1px 0 #000000}
.icow .qty{position:absolute;right:-3px;bottom:-4px;font:bold 9px system-ui;font-style:normal;color:#ffffff;text-shadow:1px 1px 0 #000000,-1px -1px 0 #000000,1px -1px 0 #000000,-1px 1px 0 #000000}
.detail{border-top:1px solid #252527;margin-top:6px;padding-top:6px;min-height:54px;font-size:12px}
.iname{font:700 13px Georgia,serif}.irar{color:#939498;font-size:11px;margin-bottom:3px}.stat{color:#9fe0a0}.ireq{color:#c3b7a2}.ireq.bad{color:#ff8a7a}.iprice{color:#c3b7a2;margin-top:2px}
.detail .btns{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.hint{color:#909194;font-size:11px;margin:5px 0}
.wbody button,.panel button{background:#252526;border:1px solid #68696e;color:#d3cabb;border-radius:3px;padding:4px 8px;font-size:12px}
.wbody button:hover:not(:disabled),.panel button:hover:not(:disabled){border-color:#c3b7a2;color:#eeebe5}
.wbody button:disabled,.panel button:disabled{opacity:.4;cursor:default}
button.main{background:#4d4f59!important;border-color:#ba2e2e!important;color:#edeae4!important}button.danger{border-color:#8a4a3a!important;color:#f0b0a0!important}
button.wide{width:100%;margin-top:7px}
/* janelas flutuantes no palco (NPC, árvore, mapa, ranking, configurações, admin) */
.panel{scrollbar-width:thin;scrollbar-color:#3a3a3d transparent;position:absolute;z-index:4;background:#1b1914f6;border:1px solid #6e7078;border-radius:6px;box-shadow:0 12px 40px #000c;color:var(--txt);padding:10px 12px 12px;font-size:12px;max-height:calc(100% - 120px);overflow:auto}
.panel[hidden]{display:none}
.panel header{display:flex;align-items:center;gap:10px;margin-bottom:8px}.panel header b{font:700 15px Georgia,serif;color:#ccc1ae}
.panel header .gold{color:#c5b9a4;font-weight:700}.panel header small{color:#c3b7a2}
.panel .x{margin-left:auto;background:none!important;border:0!important;color:#ccc1ae;font-size:20px;line-height:1;padding:0 4px!important}
/* janela dos NPCs (31/10, a alana escolheu o estilo B): conversa à esquerda, serviço à direita, listas em cards de 2 por linha */
#npc{left:50%;transform:translateX(-50%);top:12px;width:min(900px,calc(100% - 40px));max-height:calc(100% - 140px);display:grid;grid-template-columns:230px minmax(0,1fr);grid-template-rows:auto auto auto auto auto 1fr;column-gap:18px;align-content:start;font-size:13px;padding:14px 18px}
#npc>header{grid-column:1/-1}#npc>.say{grid-column:1;grid-row:2/4}#npc>.topics{grid-column:1;grid-row:4;display:flex;flex-direction:column;gap:6px;align-self:start}#npc>.topics button{text-align:left}
#npc>.tabs{grid-column:2;grid-row:2;align-self:start}#npc>.svc{grid-column:2;grid-row:3/7;min-width:0}#npc>.topics+.svc{grid-row:2/7}#npc:not(:has(>.tabs)):has(>.svc:empty){width:min(440px,calc(100% - 40px));grid-template-columns:minmax(0,1fr)}
#npc .npcface{width:56px;height:56px;background-size:224px 56px}#npc header b{font-size:18px}
#npc .svc .shop{display:grid;grid-template-columns:1fr 1fr;gap:6px}#npc .svc .shop .row{border:1px solid #2f2f31;padding:6px;align-items:flex-start}#npc .svc .shop .nm small{margin-top:3px;line-height:1.45;font-size:11px}
@media(max-width:860px){#npc{grid-template-columns:minmax(0,1fr);grid-template-rows:none}#npc>*{grid-column:1!important;grid-row:auto!important}#npc>.topics{flex-direction:row;flex-wrap:wrap}#npc .svc .shop{grid-template-columns:1fr}}
#tree{left:50%;top:60px;transform:translateX(-50%);width:min(470px,calc(100% - 24px))}
#mapPanel{left:50%;top:50%;transform:translate(-50%,-50%);width:min(680px,calc(100% - 20px));max-height:calc(100% - 20px)}
#mapPanel canvas{width:100%;height:auto;image-rendering:pixelated;border:1px solid #313234;border-radius:3px;background:#0b0b0b}
#mapPanel .legend{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11px;color:#c3b7a2;margin-top:6px}#mapPanel .legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px}
#mapPanel canvas{cursor:grab;touch-action:none}#mapPanel canvas:active{cursor:grabbing}#mapPanel .mapsp{flex:1}#mapPanel .legend .hint{margin-left:auto;color:#7c7c7f}
#ladder,#settings{left:50%;top:70px;transform:translateX(-50%);width:min(380px,calc(100% - 24px))}
#admin{left:50%;top:40px;transform:translateX(-50%);width:min(620px,calc(100% - 24px))}
.say{background:#121212;border:1px solid #313234;border-radius:5px;padding:8px 10px;line-height:1.55;color:#e2dcd2;margin:0 0 8px}
.npcface{width:40px;height:40px;background-size:160px 40px;background-position:0 0;image-rendering:pixelated;background-repeat:no-repeat;flex-shrink:0;border-radius:4px;background-color:#0d0d0e}
.topics{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.topics button{text-transform:capitalize}
.tabs{display:flex;gap:4px;margin-bottom:6px}.tabs button.on{background:#4d4f59;border-color:#ba2e2e;color:#edeae4}
.shop{display:flex;flex-direction:column;gap:3px}
.shop .row,.tlist .trow{display:flex;align-items:center;gap:7px;padding:3px 4px;border-radius:4px;background:#111112}
.shop .row.dim{opacity:.5}.shop .nm,.trow .nm{flex:1;min-width:0}.shop .nm small,.trow .nm small{display:block;color:#939498;font-size:10px}
.shop .pr{color:#c5b9a4;font-weight:700;min-width:44px;text-align:right;white-space:nowrap}
.shop .buycol{display:flex;flex-direction:column;align-items:flex-end;gap:3px}.shop .buyl{display:flex;align-items:center;gap:6px;justify-content:flex-end}
.shop .tpr{color:#cdb8ff;font-weight:700;text-align:right;white-space:nowrap;line-height:1.1}.shop .tpr small{display:block;color:#939498;font-weight:400;font-size:10px}
.shop .buyl button{min-width:118px}
.row2{display:flex;gap:6px;margin:6px 0;align-items:center}.row2 input,.row2 select,.panel input[type=text],.panel input[type=number]{flex:1;min-width:0;background:#121213;color:#eeeeee;border:1px solid #515256;border-radius:3px;padding:4px 6px}
.chk{display:block;margin:4px 0;color:#c6baa5;font-size:12px}
.tlist{display:flex;flex-direction:column;gap:4px}.trow img{width:30px;height:30px;image-rendering:pixelated;border-radius:3px}
.pips{display:flex;gap:2px}.pips i{width:8px;height:8px;border-radius:2px;background:#272728;border:1px solid #444549}.pips i.on{background:#bc2f2f;border-color:#d1c8b8}
.panel h3{font:700 13px Georgia,serif;color:#ccc1ae;margin:10px 0 5px}
table.lt{width:100%;border-collapse:collapse;font-size:12px}table.lt th{text-align:left;color:#bc2f2f;font-weight:600;border-bottom:1px solid #313234;padding:3px 4px}table.lt td{padding:3px 4px;border-bottom:1px solid #1e1f20}
table.lt tr.me td{color:#caff72}
.grid2{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 10px}.grid2 label{display:flex;flex-direction:column;gap:2px;font-size:11px;color:#c3b7a2}
/* entrada */
#overlay{position:absolute;inset:0;background:#040505d4;display:flex;align-items:center;justify-content:center;z-index:10}
#overlay.off{display:none}
#login{background:#202021;border:1px solid #6e7078;border-radius:9px;width:min(520px,94vw);padding:24px;text-align:center;box-shadow:0 14px 55px #000b;max-height:calc(100% - 20px);overflow:auto}
h1{font:700 30px Georgia;color:#c6baa5;letter-spacing:3px;margin:4px 0}
#login p{color:#c6baa5;margin:10px 0 16px;font-size:13px}
#login input{display:block;width:100%;padding:11px;background:#121213;border:1px solid #515256;border-radius:4px;color:#eeeeee;font:14px system-ui}
.choices{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}
.choice{background:#272728;border:2px solid #4b4b4c;border-radius:7px;color:#eeeeee;padding:8px}.choice.selected{border-color:#bc2f2f;background:#2c2c2e}
.choice img{display:block;width:100%;max-width:76px;height:auto;aspect-ratio:76/96;margin:auto;object-fit:contain;image-rendering:pixelated}
.choice b,.choice small{display:block}.choice small{color:#c3b7a2;font-size:10px}
#enter{width:100%;background:#4d4f59;color:#edeae4;border:1px solid #ba2e2e;border-radius:4px;padding:12px;font-weight:700}
#login>small{display:block;color:#aaaaaa;font-size:11px;margin-top:12px}#loginError{color:#ff7777;margin-top:8px;font-size:12px}
label.test{display:flex;gap:7px;align-items:center;justify-content:center;font-size:11px;color:#c6baa5;margin:0 0 10px}
label.test select{background:#121213;color:#eeeeee;border:1px solid #515256;border-radius:4px;padding:3px 6px;font:12px system-ui}
label.test{flex-wrap:wrap}label.test input{width:64px;background:#121213;color:#eeeeee;border:1px solid #515256;border-radius:4px;padding:3px 6px;font:12px system-ui;margin:0}label.test small{flex-basis:100%;text-align:center;color:#8f8676;font-size:10px}
/* tutorial */
#tutorial{position:absolute;left:50%;transform:translateX(-50%);bottom:150px;z-index:3;width:min(440px,calc(100% - 32px));pointer-events:none}
.tut-card{pointer-events:auto;background:#1d1a14f2;border:1px solid #7b7d87;border-radius:8px;padding:14px 16px 12px;box-shadow:0 10px 30px #000a;color:#e4ded4}
.tut-card small{color:#bc2f2f;font:600 10px/1 system-ui;letter-spacing:1.5px;text-transform:uppercase}
.tut-card h2{margin:6px 0 6px;font:700 17px Georgia,serif;color:#ccc1ae;text-wrap:balance}
.tut-card p{margin:0 0 12px;font-size:13px;line-height:1.55;color:#d9d1c3}
.tut-actions{display:flex;justify-content:flex-end;gap:8px}
.tut-actions button{border-radius:4px;padding:7px 14px;font-weight:600;border:1px solid #68696e;background:#252526;color:#ccc1ae}
.tut-actions #tutNext{background:#4d4f59;border-color:#ba2e2e;color:#edeae4}
button:focus-visible{outline:2px solid #ccc1ae;outline-offset:2px}
#touchMenuBtn,#touchBar{display:none}
/* telas médias: esconde a coluna de status (fica no menu) */
@media(max-width:1180px){:root{--L:0px}#left{display:none}}
/* ---------- celular / toque ---------- */
#viewer{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.touch #app{grid-template-columns:1fr}
.touch #left,.touch #right,.touch #menu{display:none;position:absolute;z-index:6;top:0;bottom:0;box-shadow:0 0 30px #000000}
.touch #menu{left:0;width:64px}.touch.drawer #menu{display:grid}
.touch.drawer #left{display:flex;left:64px;width:230px}
.touch.showinv #right{display:flex;right:0;width:min(250px,80vw)}
.touch #stage{grid-column:1}
.touch #topbar{top:calc(6px + env(safe-area-inset-top,0px));left:calc(52px + env(safe-area-inset-left,0px));transform:none;width:min(300px,55vw)}
.touch #minimapBox{transform:scale(.72);transform-origin:top right}
.touch #touchMenuBtn{display:block;position:absolute;top:calc(8px + env(safe-area-inset-top,0px));left:calc(8px + env(safe-area-inset-left,0px));z-index:5;width:38px;height:38px;background:#1a1916e6;border:1px solid #68696e;color:#d3cabb;border-radius:6px;font-size:18px}
.touch #touchBar{display:flex;flex-direction:column;gap:6px;position:absolute;top:calc(140px + env(safe-area-inset-top,0px));right:calc(8px + env(safe-area-inset-right,0px));z-index:3}
.touch #touchBar button{width:40px;height:40px;background:#1a1916e6;border:1px solid #68696e;color:#d3cabb;border-radius:6px;font-size:18px}
.touch #bottom{left:auto;transform:none;right:calc(10px + env(safe-area-inset-right,0px));bottom:calc(46px + env(safe-area-inset-bottom,0px));align-items:flex-end}
.touch #actionbar{display:grid;grid-template-columns:repeat(2,60px);gap:7px;padding:7px;background:#15130fcc}
.touch .slot{width:60px;height:60px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.touch .slot b,.touch .slot kbd{display:none}.touch .slot:active{transform:scale(.94)}
.touch #log{position:fixed;left:calc(8px + env(safe-area-inset-left,0px));bottom:calc(48px + env(safe-area-inset-bottom,0px));max-width:calc(100vw - 180px);font-size:11px}
.touch #version{display:none}
.touch .panel{left:8px!important;right:8px!important;top:calc(8px + env(safe-area-inset-top,0px))!important;transform:none!important;width:auto!important;max-height:calc(100% - 24px);font-size:13px}
.touch #tutorial{bottom:auto;top:calc(96px + env(safe-area-inset-top,0px))}
@media (orientation:landscape) and (max-height:500px){.touch #actionbar{grid-template-columns:repeat(3,54px)}.touch .slot{width:54px;height:54px}}

/* DUEL 08: barra de atalhos (1–9, Q, R) */
.slot.empty{background:#0d0c0a99;border-style:dashed;border-color:#3a3a3d}
.slot.drop{border-color:#d1c8b8;box-shadow:0 0 0 2px #ffd98a55}
.slot.itm{display:flex;align-items:center;justify-content:center}
.slot.itm .qty,.slot.pot .qty{position:absolute;right:2px;bottom:0}
#spellsList .sp[draggable=true]{cursor:grab}
.hotcfg{margin-top:8px;border-top:1px solid #252527;padding-top:6px}
.hotcfg h3{margin:0 0 2px;font:700 12px system-ui;letter-spacing:1px;text-transform:uppercase;color:#ccc1ae}
.hotrow{display:grid;grid-template-columns:52px 96px 1fr;gap:6px;align-items:center;margin:3px 0}
.hotrow .hn{color:#c3b7a2;font-size:11px}.hotrow select{min-width:0;background:#0d0d0e;color:#e2dcd2;border:1px solid #3a3a3d;border-radius:3px;padding:3px}
.panel .keycap{font:700 11px system-ui;padding:3px 6px}.panel .keycap.wait{border-color:#c5b9a4;color:#c5b9a4}
#settings{width:min(420px,calc(100% - 24px))}
@media(max-width:1500px){.slot{width:46px;height:46px}#actionbar{gap:4px}}
.touch .slot.empty{display:none}
.touch #actionbar{grid-template-columns:repeat(3,56px)}.touch .slot{width:56px;height:56px}
/* resumo do item ao passar o mouse */
#itemTip{position:fixed;z-index:30;pointer-events:none;min-width:150px;max-width:230px;background:#15130ff2;border:1px solid #6e7078;border-radius:4px;padding:6px 8px;font-size:11px;box-shadow:0 6px 18px #000b}
#itemTip[hidden]{display:none}#itemTip .iname{font-size:12px}#itemTip .iprice{display:none}

/* DUEL 09: contas e seleção de personagem */
.authtabs{display:flex;gap:4px;margin:4px 0 12px}.authtabs button{flex:1;background:#171717;border:1px solid #3a3a3d;color:#c3b7a2;border-radius:4px;padding:7px}.authtabs button.on{border-color:#bc2f2f;color:#edeae4;background:#2c2c2e}
#login .tab input,#charsel input{margin-bottom:8px}
#login small.warn{display:block;color:#c5b9a5;font-size:11px;margin:2px 0 10px;text-align:left}
button.big{width:100%;background:#4d4f59;color:#edeae4;border:1px solid #ba2e2e;border-radius:4px;padding:12px;font-weight:700}
#charsel{background:#202021;border:1px solid #6e7078;border-radius:9px;width:min(560px,94vw);padding:24px;text-align:center;box-shadow:0 14px 55px #000b;max-height:calc(100% - 20px);overflow:auto}
#charsel[hidden],#login[hidden]{display:none}
#charsel h1{margin:0;font:700 26px Georgia,serif;letter-spacing:3px;color:var(--gold)}#accLine{color:#c6baa5;font-size:12px;margin:6px 0 14px}
#charsel input{display:block;width:100%;padding:11px;background:#121213;border:1px solid #515256;border-radius:4px;color:#eeeeee;font:14px system-ui}
#charList{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.charrow{display:grid;grid-template-columns:48px 1fr auto auto;gap:10px;align-items:center;background:#171717;border:1px solid #3a3a3d;border-radius:6px;padding:6px 10px;text-align:left}
.charrow img{width:40px;height:50px;object-fit:contain;image-rendering:pixelated}.charrow b{display:block;color:#e9e4dc}.charrow small{color:#939498}
.charrow button{background:#252526;border:1px solid #68696e;color:#d3cabb;border-radius:4px;padding:6px 12px}.charrow button.play{background:#4d4f59;border-color:#ba2e2e;color:#edeae4;font-weight:700}
#newChar{text-align:left;margin:6px 0 12px}#newChar summary{cursor:pointer;color:#c3b7a2;font-weight:600;margin-bottom:8px}
#charsel .row2{display:flex;justify-content:center}#charsel .row2 button{background:#252526;border:1px solid #68696e;color:#d3cabb;border-radius:4px;padding:6px 14px}
#charError{color:#ff7777;margin-top:8px;font-size:12px}
.depot{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;margin:6px 0}.depot .cell{width:auto}
/* DUEL 10: árvore com variantes do rank 5, cargas na barra */
#tree{width:min(540px,calc(100% - 24px))}
.tskill{display:flex;flex-direction:column;gap:3px;padding-bottom:4px;border-bottom:1px solid #1f2021}
.trow.locked{opacity:.55}.trow .nm small.desc{color:#cabfab;font-size:10px;margin-top:1px}
.vars{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-left:37px}
.vars .var{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:1px;padding:4px 6px;background:#121212;border:1px solid #3a3a3d;border-radius:4px;color:var(--txt);cursor:pointer;font:inherit}
.vars .var b{font-size:11px;color:#c3b7a2;font-weight:600}.vars .var small{font-size:10px;color:#939498}
.vars .var:not(:disabled):hover{border-color:#d1c8b8;background:#1a1a1c}
.vars .var:disabled{cursor:default}.vars.wait .var{opacity:.45}
.vars .var.on{border-color:#d1c8b8;background:#1d1d1f;box-shadow:inset 0 0 0 1px #ffd98a55;opacity:1}.vars .var.on b{color:#ddd6ca}
.vars .var.off{opacity:.35}
#spellsList .sp.locked img{filter:grayscale(1) brightness(.7)}#spellsList .sp.locked b{color:#7b7b7e}
#spellsList .vtag{font-style:normal;font-size:9px;color:#d1c8b8;font-weight:700}
.slot .chg{position:absolute;right:3px;bottom:9px;font:bold 11px system-ui;font-style:normal;color:#ddd6ca;text-shadow:1px 1px 0 #000000,-1px -1px 0 #000000}
.touch .vars{margin-left:0}

/* DUEL 11: conjunto, origem do drop, corpo com loot */
.iset{color:#c9a2ff;font-size:11px}.isrc{color:#87888c;font-size:10px;margin-top:2px}

/* DUEL 12: forja, tasks e coleta */
.forgepick{display:grid;grid-template-columns:repeat(auto-fill,40px);gap:4px;margin:6px 0}.forgepick .cell{width:40px;height:40px}
.forgebox{border-top:1px solid #252527;margin-top:6px;padding-top:6px}.forgebox h3{margin:8px 0 4px;font:700 11px system-ui;letter-spacing:1px;text-transform:uppercase;color:#ccc1ae}
.forgebox .row{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:4px 0;border-bottom:1px solid #1f2021}.forgebox .nm{flex:1}.forgebox .nm em{color:#9fe0a0;font-style:normal;font-size:11px}.forgebox small{display:block}
.okm{color:#9fe0a0}.nom{color:#ff8a7a}
.iset.relic{color:#c3b7a2}
.row.task .nm input{display:block;width:100%;margin-top:3px}.row.task .nm small{display:inline}
.tbar{height:6px;background:#0b0b0c;border:1px solid #2e2e30;border-radius:3px;margin:4px 0 8px}.tbar i{display:block;height:100%;background:linear-gradient(#9fe0a0,#4a9a52)}

/* DUEL 13: chat com abas, menu do jogador, convites, party, troca, bancas */
#chat .chead{display:flex;align-items:center;gap:6px;padding:3px 8px;border-bottom:1px solid #1f2021;background:#121213}
#chat .ctabs{display:flex;gap:2px;flex-shrink:0}#chat .ctabs button{position:relative;background:#1a1a1b;border:1px solid #2e2e30;color:#c3b7a2;border-radius:3px 3px 0 0;padding:2px 8px;font-size:11px}
#chat .ctabs button.on{background:#262627;color:#edeae4;border-color:#68696e}#chat .ctabs button.new{color:#c5b9a4}#chat .ctabs i{font-style:normal;font-size:9px;background:#b33;color:#ffffff;border-radius:6px;padding:0 4px;margin-left:4px}
#chatIn{flex:1;min-width:120px;background:#0b0b0c;border:1px solid #2e2e30;border-radius:3px;color:#eeeeee;font:12px system-ui;padding:3px 8px}
#chat .cbody{flex:1;overflow-y:auto;display:flex;flex-direction:column-reverse;padding:2px 10px;scrollbar-width:thin}
#chat .line .who{cursor:pointer;font-weight:600}#chat .c-world .who{color:#c5b9a4}#chat .c-trade .who{color:#8fe3a0}#chat .c-party .who{color:#7fd6ff}#chat .c-pm .who{color:#e39cff}#chat .c-local .who{color:#e3ded4}
#pmenu{position:fixed;z-index:40;background:#1b1914f8;border:1px solid #6e7078;border-radius:5px;padding:6px;display:flex;flex-direction:column;gap:3px;min-width:160px;box-shadow:0 8px 24px #000c}
#pmenu[hidden]{display:none}#pmenu b{font-size:12px;color:#ccc1ae;margin:0 2px 3px}#pmenu button{text-align:left;background:#252526;border:1px solid #3a3a3d;color:#d3cabb;border-radius:3px;padding:4px 8px;font-size:12px}#pmenu button:hover{border-color:#c3b7a2}
#toasts{position:absolute;top:96px;left:50%;transform:translateX(-50%);z-index:5;display:flex;flex-direction:column;gap:6px}
.toast{background:#1b1914f6;border:1px solid #ba2e2e;border-radius:6px;padding:10px 14px;color:#e5dfd6;font-size:13px;box-shadow:0 8px 24px #000c}.toast .row2{display:flex;gap:6px;margin-top:8px}.toast button{background:#252526;border:1px solid #68696e;color:#d3cabb;border-radius:3px;padding:4px 12px}.toast button.main{background:#4d4f59;color:#edeae4}
#pframe{position:absolute;left:8px;top:96px;z-index:3;width:178px;background:#15130fe0;border:1px solid #45464b;border-radius:5px;padding:6px 8px;font-size:11px}
#pframe[hidden]{display:none}#pframe header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}#pframe header b{color:#ccc1ae}#pframe header button{background:#252526;border:1px solid #3a3a3d;color:#c3b7a2;border-radius:3px;font-size:10px;padding:1px 6px}
#pframe .pm{margin:4px 0}#pframe .pm .nm{display:block;color:#e2dcd2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#pframe .pm small{color:#939498}#pframe .pm.dead{opacity:.5}
#pframe .bar{display:block;height:4px;background:#0b0b0c;margin-top:2px;border-radius:2px;overflow:hidden}#pframe .bar i{display:block;height:100%}#pframe .bar.hp i{background:#4bbf5a}#pframe .bar.mp i{background:#3b7fd9}
#tradeWin{left:50%;top:80px;transform:translateX(-50%);width:min(460px,calc(100% - 24px))}.tcols{display:grid;grid-template-columns:1fr 1fr;gap:10px}.tside h3{margin:0 0 4px;font-size:12px;color:#ccc1ae}
.tgrid{display:grid;grid-template-columns:repeat(5,40px);gap:3px;min-height:44px}.tgrid .cell{width:40px;height:40px}.tgold{margin-top:4px;color:#c5b9a4}.tok{color:#939498;font-size:11px}.tok.on{color:#9fe0a0;font-weight:700}
#stallWin{left:50%;top:70px;transform:translateX(-50%);width:min(460px,calc(100% - 24px))}#stallWin input[type=text]{width:100%;padding:6px;background:#0d0d0e;border:1px solid #3a3a3d;color:#eeeeee;border-radius:3px;margin-bottom:6px}
#stallWin .row,.svc .row{display:flex;gap:6px;align-items:center}#stallWin input[type=number]{background:#0d0d0e;border:1px solid #3a3a3d;color:#eeeeee;border-radius:3px;padding:2px 4px}
.svc input[type=search]{width:100%;padding:6px;background:#0d0d0e;border:1px solid #3a3a3d;color:#eeeeee;border-radius:3px;margin-bottom:6px}
.touch #chat{height:44px}.touch #bottom{bottom:calc(56px + env(safe-area-inset-bottom,0px))}

/* DUEL 14: botão de pagar com token */
.panel button.tokbtn{background:#3a2a5c;border-color:#9b7be0;color:#efe6ff}.panel button.tokbtn:hover{border-color:#c9b2ff}

/* DUEL 15: árvore larga e mais quadrada (skills em 2 colunas + passivas ao lado), por cima das laterais */
#tree{position:fixed;left:50%;top:48px;transform:translateX(-50%);width:min(1120px,calc(100vw - 24px));max-height:calc(100vh - 64px);z-index:30}
#tree .tcols{display:grid;grid-template-columns:minmax(0,2fr) minmax(250px,1fr);gap:14px;align-items:start}
#tree .tskcols{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
#tree .tpass{background:#121213;border:1px solid #242527;border-radius:5px;padding:2px 8px 8px}
#tree h3{margin-top:4px}
#tree .hint{margin:0 0 6px}
@media (max-width:1000px){#tree .tskcols{grid-template-columns:1fr}}
@media (max-width:720px){#tree .tcols{grid-template-columns:1fr}}
.touch #tree .tcols,.touch #tree .tskcols{grid-template-columns:1fr}
/* DUEL 15: nome embaixo de cada atalho do menu */
#menu{gap:5px;padding:8px 6px;justify-items:center}
#menu button{width:52px;height:54px;flex-direction:column;gap:2px;padding-top:1px}
#menu .ml{display:block;font:600 8.5px/1 system-ui,sans-serif;color:#c3b7a2;letter-spacing:.2px;white-space:nowrap;text-shadow:0 1px 0 #000000}
#menu button:hover .ml,#menu button.on .ml{color:#dad2c5}
/* DUEL 16: abas Buy/Sell da loja do NPC */
.shoptabs{margin:2px 0 8px}.shoptabs .cnt{display:inline-block;margin-left:5px;min-width:16px;padding:0 4px;border-radius:8px;background:#bc2f2f;color:#141516;font:700 10px/16px system-ui,sans-serif;font-style:normal}
/* DUEL 16: ferramentas fixas no boneco */
.doll .cell.fixed{display:flex;align-items:center;justify-content:center;cursor:default;background:#121212;border:1px dashed #45464b;border-radius:4px;box-sizing:border-box}
.idesc{color:#cabfab;font-size:11px;max-width:230px;margin-top:3px;line-height:1.35}
.formerr{color:#ff8a7a;font-size:12px;margin:6px 0 0;min-height:0}.formerr:empty{display:none}
/* DUEL 17: baú do depot */
#depotWin{left:12px;top:12px;width:min(470px,calc(100% - 24px))}
#depotWin .dgrid{grid-template-columns:repeat(10,1fr);max-height:212px;overflow-y:auto;padding-right:3px;scrollbar-width:thin;scrollbar-color:#3a3a3d transparent}
#depotWin .dgrid .cell{height:38px;display:flex;align-items:center;justify-content:center}
#depotWin .bagg{max-height:170px}
#depotWin h3 small{font:400 10px system-ui,sans-serif;color:#939498}

/* DUEL 22: logotipo em pixel art (client/brand, gerado por tools/brand.py) */
h1.logo{margin:4px 0 2px;line-height:0}h1.logo img,#left .brand img{image-rendering:pixelated;display:block;margin:0 auto}
#left .brand img{margin:2px 0 3px}
/* DUEL 24: botão da wiki (livro do atlas) e link na entrada */
.mi-wiki{background-position:-384px -544px}
#login p a{color:var(--gold)}
.shop .row>input[type=number]{width:56px!important;flex:none}
.detail{position:relative}.panel button.detx,.detail .detx{position:absolute;top:4px;right:0;width:22px;height:22px;min-width:0;padding:0;line-height:20px;font-size:16px;background:transparent;border:1px solid transparent;color:#939498;border-radius:4px}.detail .detx:hover{color:#e8e3da;border-color:#46474a}

/* ponteiro do jogo (Options → Game cursor): dourado no jogo e nos painéis; espada sobre criatura, balão sobre NPC, brilho sobre o que dá para usar */
html.gcur,html.gcur body,html.gcur button,html.gcur a,html.gcur summary,html.gcur label,html.gcur .cell{cursor:url(cursors/point.png) 1 1,auto}
html.gcur #viewer[data-cur=attack]{cursor:url(cursors/attack.png) 1 1,crosshair}
html.gcur #viewer[data-cur=talk]{cursor:url(cursors/talk.png) 1 1,pointer}
html.gcur #viewer[data-cur=use]{cursor:url(cursors/use.png) 1 1,pointer}
html.gcur input[type=text],html.gcur input[type=search],html.gcur input[type=password],html.gcur input[type=number],html.gcur textarea{cursor:text}
html.gcur button:disabled{cursor:url(cursors/point.png) 1 1,default}

.baghead{display:flex;align-items:center;gap:6px;margin-bottom:5px}.baghead .hint{flex:1}.wbody .baghead button.mini{padding:1px 7px;font-size:11px;line-height:16px}
#bagWin.tall .bag{max-height:calc(100vh - 230px)}

/* DUEL 26: celular — joystick no canto inferior esquerdo; ataque grande no canto inferior direito com as skills em arco */
#joy{display:none}
.touch #joy{display:block;position:absolute;left:env(safe-area-inset-left,0px);bottom:calc(52px + env(safe-area-inset-bottom,0px));width:min(40vw,240px);height:min(46vh,250px);z-index:3;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#joyBase{position:absolute;left:22px;bottom:22px;width:124px;height:124px;margin:0;border-radius:50%;background:radial-gradient(circle,#0000 52%,#e6d4a81c 53%,#0000 70%),#14120e66;border:2px solid #e6d4a855;box-shadow:inset 0 0 18px #0008;pointer-events:none;transition:opacity .15s}
#joyKnob{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#dfd8cd,#7c7e86 70%,#4d4e54);border:2px solid #1f2022;box-shadow:0 3px 10px #000a;will-change:transform}
#joy:not(.on) #joyBase{opacity:.55}
.touch #log{left:50%;transform:translateX(-50%);bottom:auto;top:calc(192px + env(safe-area-inset-top,0px));max-width:min(64vw,420px);text-align:center}
.touch #bottom{right:calc(6px + env(safe-area-inset-right,0px));bottom:calc(54px + env(safe-area-inset-bottom,0px))}
.touch #actionbar.arc{display:block;position:relative;padding:0;background:none;border:0;box-shadow:none;pointer-events:none}
.touch #actionbar.arc .slot{position:absolute;border-radius:50%;pointer-events:auto;box-shadow:0 3px 10px #000a}
.touch #actionbar.arc .slot img{border-radius:50%}
.touch #actionbar.arc .slot.big{border-width:3px;border-color:#bc2f2f}
.touch #actionbar.arc .slot.small{border-width:2px}
.touch #actionbar.arc .slot.small .potico{position:absolute;left:50%;top:50%;margin:0;transform:translate(-50%,-50%) scale(.78)}
.touch #actionbar.arc .slot.small.itm>:first-child{transform:scale(.78)}
.touch #actionbar.arc .slot em{right:50%;transform:translateX(50%);top:auto;bottom:3px}
.touch #actionbar.arc .slot.big em{display:none}
.touch #actionbar.arc .slot .qty{right:50%;transform:translateX(50%);bottom:1px}
.touch #touchBar{flex-direction:row;top:calc(140px + env(safe-area-inset-top,0px))}
/* mira no celular: segurar e arrastar o botão da magia (o arrastar não vira rolagem da página) */
.touch #actionbar .slot{touch-action:none}
.touch #actionbar .slot.aiming{transform:scale(1.12);border-color:#d2c9b9;box-shadow:0 0 0 3px #ffe28c66,0 3px 10px #000a}
/* chat mais legível: letra maior, amarelo de jogo com contorno escuro, quebra de linha em vez de cortar; no celular, mais alto */
#chat{background:#0b0a08f2}
#chat .line{font:500 12.5px/1.4 system-ui;color:#c3b7a2;white-space:normal;overflow-wrap:anywhere;text-shadow:1px 1px 0 #000000,-1px -1px 0 #000000,1px -1px 0 #000000,-1px 1px 0 #000000}
#chat .line time{color:#8d8e93}#chat .c-local .who{color:#e0dacf}
.touch #chat{height:86px}.touch #chat:focus-within{height:200px}
.touch #chat .line{font-size:13px}
.touch #joy{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
.touch #bottom{bottom:calc(94px + env(safe-area-inset-bottom,0px))}
#chat .line{flex-shrink:0} /* as linhas não se espremem umas sobre as outras */
@media (orientation:landscape) and (max-height:500px){
 .touch #chat{height:64px}.touch #chat .line{font-size:12px}
 .touch #joy{bottom:calc(68px + env(safe-area-inset-bottom,0px))}.touch #bottom{bottom:calc(70px + env(safe-area-inset-bottom,0px))}
 .touch #touchBar{flex-direction:row;top:calc(8px + env(safe-area-inset-top,0px));right:auto;left:calc(64px + min(300px,55vw) + env(safe-area-inset-left,0px))}
}
.tbar{height:6px;background:#0b0b0c;border:1px solid #2e2e30;border-radius:3px;margin:4px 0 8px}.tbar i{display:block;height:100%;background:linear-gradient(#9fe0a0,#4a9a52)}
#farmWin{left:12px;top:12px;width:min(400px,calc(100% - 200px));max-height:calc(100% - 100px);overflow-y:auto}
#farmWin .row{display:flex;align-items:center;gap:8px;padding:3px 0}#farmWin .row .nm{flex:1}#farmWin .tbar.mini{width:70px;margin:0;height:5px}
#farmWin h3{margin:10px 0 4px;font-size:12px;color:#c3b7a2}#farmWin details{margin-top:10px}#farmWin details input{width:100px;padding:4px;background:#0d0d0e;border:1px solid #3a3a3d;color:#eeeeee;border-radius:3px}
.warnline{color:#ff9a7a;font-weight:600}
.touch #farmWin{left:8px!important;right:8px!important;width:auto!important}
#touchBar button[hidden]{display:none}#touchBar button.on{border-color:#d2c9b9;background:#3a3220e6}

/* celular: sem zoom do navegador ao tocar; barra de vida do topo menor ou escondida (opções) */
html.touch,html.touch body{touch-action:manipulation;-webkit-text-size-adjust:100%}
.hudsmall #topbar{transform:scale(.72);transform-origin:top left}html:not(.touch).hudsmall #topbar{transform:translateX(-50%) scale(.72);transform-origin:top center}
.hudhide #topbar{display:none}
#minimapBox[hidden]{display:none!important}
/* DUEL 27: zona de perigo (Fort Ravenmoor) */
#dangerTag{position:absolute;top:120px;left:50%;transform:translateX(-50%);z-index:2;pointer-events:none;padding:3px 10px;border-radius:4px;background:#5a1410e6;border:1px solid #ff6b5a;color:#ffd2c8;font:700 11px system-ui;letter-spacing:.06em}
.touch #dangerTag{top:calc(150px + env(safe-area-inset-top,0px))}
#dangerTag[hidden]{display:none}

/* painéis no celular: rolagem firme no iPhone, sem puxar a página junto; a tabela de jogadores do admin rola de lado */
.panel{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.touch .panel{touch-action:pan-x pan-y;max-height:calc(100% - 24px - env(safe-area-inset-top,0px))}
.touch .panel button,.touch .panel input,.touch .panel select{touch-action:manipulation}
.admtable{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.touch #admin .row2{flex-wrap:wrap}.touch #admin .row2 button{flex:1 1 auto}
.touch .panel header{padding-left:46px} /* o botão ☰ do menu fica no canto, por cima do título */
/* ---------- Vellgrim (01/11): ferro e sangue — molduras de ferro, títulos góticos, ícones do menu próprios ---------- */
@font-face{font-family:Jac;src:url(fonts/JacquardaBastarda9-Regular.ttf);font-display:swap}
@font-face{font-family:SC;src:url(fonts/AlegreyaSansSC-Bold.ttf);font-weight:700;font-display:swap}
@font-face{font-family:SC;src:url(fonts/AlegreyaSansSC-Medium.ttf);font-weight:500;font-display:swap}
:root{--iron:#3c3c44;--iron-l:#5a5a64;--iron-d:#1e1e22;--bone:#e6dccb;--blood:#b3261e;--blood-l:#ff5a3a;--blood-d:#5e1410}
/* janelas laterais: borda preta, fio de ferro por dentro e um rebite de sangue no título */
.win{background:linear-gradient(#18181b,#141416);border:1px solid #000;border-radius:2px;box-shadow:inset 0 0 0 1px var(--iron),inset 0 1px 0 1px var(--iron-l)}
.win header{background:linear-gradient(#232327,#17171a);border-bottom:1px solid #000;box-shadow:0 1px 0 var(--iron-d);padding:4px 5px 4px 9px}
.win .wt{font:700 13px SC,system-ui;letter-spacing:.12em;color:var(--bone)}
.win .wt::before{content:'';display:inline-block;width:5px;height:5px;margin:0 8px 2px 0;background:var(--blood);transform:rotate(45deg);box-shadow:0 0 4px #b3261e88}
.win header button{background:linear-gradient(#2a2a2e,#1a1a1d);border:1px solid #000;box-shadow:inset 0 0 0 1px var(--iron);color:var(--bone)}
/* janelas de NPC e painéis: moldura dupla de ferro */
.panel{background:#141416f7;border:1px solid #000;border-radius:3px;box-shadow:inset 0 0 0 1px var(--iron-l),inset 0 0 0 3px #101012,inset 0 0 0 4px var(--iron),0 14px 44px #000d}
.panel header b{font:700 20px/1 SC,Georgia,serif;letter-spacing:.04em;color:var(--bone);text-shadow:0 2px 0 #000}
.panel h3{font:700 14px SC,Georgia,serif;letter-spacing:.06em;color:var(--bone)}
.panel header img,.panel header canvas{border:1px solid #000;box-shadow:inset 0 0 0 1px var(--iron)}
/* casas (mochila, equipamento, barra de ações): fundo fundo, borda de ferro com sombra por dentro */
.cell{background:#0c0c0d;border:1px solid #000;box-shadow:inset 0 0 0 1px #2c2c32,inset 0 3px 6px #000a;border-radius:2px}
.cell:hover{box-shadow:inset 0 0 0 1px var(--bone),inset 0 3px 6px #000a}
.slot{background:#0c0c0d;border:2px solid #000;box-shadow:inset 0 0 0 1px var(--iron-l),inset 0 3px 8px #000c;border-radius:3px}
.slot:hover{border-color:#000;box-shadow:inset 0 0 0 1px var(--bone),inset 0 3px 8px #000c}
.slot.ready{border-color:#000;box-shadow:inset 0 0 0 1px var(--blood-l),inset 0 0 8px #b3261e66}
.slot.empty{background:#0c0c0d88;border:2px dashed #2c2c32;box-shadow:none}
/* botões e abas */
button.main,button.big{background:linear-gradient(#a3241c,#6e1712)!important;border:1px solid #000!important;box-shadow:inset 0 1px 0 #ff6a4a66,inset 0 0 0 1px #c9443a55;color:#fff4ee!important;text-shadow:0 1px 0 #0008}
button.main:hover,button.big:hover{filter:brightness(1.12)}
.tabs button{border-radius:2px}
.tabs button.on{background:linear-gradient(#2c1513,#1d0f0e)!important;border-color:var(--blood)!important;color:#fff!important;box-shadow:inset 0 -2px 0 var(--blood)}
/* menu: casas de ferro; o ativo ganha um fio de sangue à esquerda */
#menu button{background:linear-gradient(#222226,#151517);border:1px solid #000;box-shadow:inset 0 0 0 1px var(--iron),inset 0 1px 0 1px var(--iron-l);border-radius:3px}
#menu button:hover{border-color:#000;box-shadow:inset 0 0 0 1px var(--bone)}
#menu button.on{border-color:#000;box-shadow:inset 3px 0 0 var(--blood),inset 0 0 0 1px var(--iron-l)}
#menu .ml{font:700 10px/1 SC,system-ui;letter-spacing:.04em;color:#bdb4a5}
.mi-bag,.mi-tree,.mi-map,.mi-ladder,.mi-guide,.mi-wiki,.mi-gear,.mi-admin,.mi-char,.mi-exit{background-size:32px 32px;background-position:0 0}
.mi-bag{background-image:url(icons/menu/bag.png)}.mi-tree{background:url(icons/menu/skills.png) 0 0/32px no-repeat}.mi-map{background-image:url(icons/menu/map.png)}
.mi-ladder{background-image:url(icons/menu/ranking.png)}.mi-guide{background-image:url(icons/menu/guide.png)}.mi-wiki{background-image:url(icons/menu/wiki.png)}
.mi-gear{background-image:url(icons/menu/options.png)}.mi-admin{background-image:url(icons/menu/admin.png)}.mi-char{background-image:url(icons/menu/chars.png)}.mi-exit{background-image:url(icons/menu/logout.png)}
#left .brand small{color:#8f8a82;letter-spacing:.14em}
/* Vellgrim (01/11): janela do portal — o que tem do outro lado e o botão Enter */
#portalwin{left:50%;top:84px;transform:translateX(-50%);width:min(400px,calc(100% - 24px));z-index:40}
#portalwin .pw-lv{margin:8px 10px 4px;font-weight:600;color:var(--bone)}
#portalwin .pw-lv.warn{color:var(--blood-l)}#portalwin .pw-lv small{font-weight:400}
#portalwin .pw-info{display:grid;grid-template-columns:auto 1fr;gap:5px 10px;margin:6px 10px;font-size:12px;line-height:1.35}
#portalwin dt{color:var(--gold);font-weight:600}#portalwin dd{margin:0;color:var(--txt)}#portalwin dd.bad{color:var(--blood-l)}
#portalwin .hint{margin:8px 10px}
#portalwin .pw-btns{display:flex;justify-content:flex-end;gap:8px;margin:8px 10px 10px}
#portalwin .pw-btns .primary{background:var(--blood-d);border-color:var(--blood);color:#fff;min-width:96px}
#portalwin .pw-btns .primary:disabled{background:var(--iron-d);border-color:var(--iron);color:var(--mute)}
#regionTag.snow{color:#1c2a3c;text-shadow:0 0 4px rgba(255,255,255,.95),0 0 8px rgba(255,255,255,.7)} /* Ilha de Gelo: o nome da região escuro sobre a neve */
.pipsP{display:flex;align-items:center;gap:4px;justify-self:end}.pipsP .pex{font-size:10px;color:#8a8579;min-width:26px;text-align:right}.pipsP .pex.on{color:#e0b84a}