[hidden]{display:none!important} /* 01/11: #npc{display:grid} vencia o .panel[hidden] e o X da janela do NPC não fechava */
/* Drakhen 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:#d9b56d;--ink:#171714;--bg:#141310;--panel:#1b1914;--panel2:#221f19;--line:#3f3526;--line2:#5e4d32;--txt:#e8dfcc;--mute:#a99c82;--L:236px;--M:64px;--R:244px}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#0b0c0b;color:#eee;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:#12110e;border-right:1px solid #2b251b;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:#4b3f2c #12110e}
/* 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:#4b3f2c;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 #2b251b}
#left .brand{font:700 15px Georgia,serif;letter-spacing:2px;color:var(--gold);padding:6px 8px 2px;text-shadow:0 2px 1px #000}
#left .brand small{display:block;font:9px/1.6 system-ui;color:#9c8b6c;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(#2a251c,#1e1b15);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:#d8c8a2}
.win header button{width:20px;height:18px;padding:0;line-height:16px;background:#2c281f;border:1px solid #4b3f2c;color:#cbb991;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:#bfb39b}#statusList dd{margin:0;text-align:right;color:#f1e8d4;font-variant-numeric:tabular-nums}
#statusList .sep{grid-column:1/-1;height:1px;background:#2f281d;margin:4px 0}
#statusList .xpb{grid-column:1/-1;height:4px;background:#0d0c0a;border:1px solid #2f281d;margin:1px 0 3px}#statusList .xpb i{display:block;height:100%;background:linear-gradient(#f1d27a,#b88a2a)}
#statusList dd.good{color:#9fe0a0}#statusList dd.warn{color:#ffb19a}#statusList dd.gold{color:#ffd76a}
#spellsList .sp{display:grid;grid-template-columns:28px 1fr auto;gap:2px 7px;align-items:center;padding:3px 0;border-bottom:1px solid #26211a}
#spellsList img{width:28px;height:28px;image-rendering:pixelated;grid-row:span 2;border:1px solid #4b3f2c;border-radius:2px}
#spellsList b{font-weight:600;color:#eadfca;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:#100f0c;border-right:1px solid #2b251b;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(#2c281f,#1a1813);border:1px solid #5e4d32;border-radius:4px;display:flex;align-items:center;justify-content:center}
#menu button:hover,#menu button.on{border-color:#e5c07a;background:linear-gradient(#3a3428,#221f19)}
#menu button[hidden]{display:none}
#menu .dot{position:absolute;right:-3px;top:-3px;width:10px;height:10px;border-radius:50%;background:#ffd76a;box-shadow:0 0 6px #ffd76a}
.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 #4b3f2c;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 #000}
.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 #000,-1px -1px #000}
.health span{background:linear-gradient(#7bdd6a,#267a2d)}.mana span{background:linear-gradient(#67b8ee,#2464ae)}.xp span{background:linear-gradient(#f1d27a,#b88a2a)}
.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:#bfb39b;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 #6b5636;box-shadow:0 0 0 2px #120f0a,0 6px 18px #000a;background:#0a0c0a;margin:0 auto}
#minimapBox button{position:absolute;top:126px;width:22px;height:22px;border-radius:50%;background:#2c281f;border:1px solid #88704e;color:#e6d4a8;padding:0;line-height:18px}
#mmMinus{left:2px}#mmPlus{right:2px}
#onlineBadge{position:absolute;top:0;right:0;background:#141310e6;border:1px solid #4b3f2c;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 #2f281d;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:#f0d38a;text-shadow:0 2px 3px #000;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 #5e4d32;border-radius:5px;box-shadow:0 6px 20px #0009}
.slot{position:relative;width:52px;height:52px;padding:0;background:#0d0c0a;border:2px solid #6b5636;border-radius:4px;overflow:hidden;color:#fff}
.slot img{display:block;width:100%;height:100%;image-rendering:pixelated}
.slot.ready{border-color:#c9a45c}.slot:hover{border-color:#ffd98a}
.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:#fff;text-shadow:1px 1px 0 #000,-1px -1px 0 #000}
.slot em{position:absolute;right:3px;top:1px;font:bold 9px system-ui;font-style:normal;color:#8fd0ff;text-shadow:1px 1px 0 #000,-1px -1px 0 #000}
.slot b{position:absolute;left:0;right:0;bottom:1px;font:600 7px/1 system-ui;text-align:center;color:#f4e0b8;text-shadow:1px 1px 0 #000,-1px -1px 0 #000;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:#e6c171}
.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:#fff;text-shadow:1px 1px 0 #000,-1px -1px 0 #000}
#log{background:#1a1916de;border:1px solid var(--line);border-radius:4px;padding:5px 10px;color:#ccc;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 #2f281d;overflow:hidden;display:flex;flex-direction:column;padding:0;pointer-events:auto;transition:height .12s}
#chat .line{font-size:11px;color:#e8dfcc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#chat .line time{color:#7d715e;margin-right:6px}
#chat .k-warn{color:#ffb19a}#chat .k-gold{color:#ffd76a}#chat .k-level{color:#b9f37a}#chat .k-server{color:#7fd6ff;font-weight:700}
#chat .k-loot-common{color:#e8e4da}#chat .k-loot-epic{color:#c48bff;font-weight:600}#chat .k-loot-rare{color:#6fb4ff}#chat .k-loot-legendary{color:#ffc845;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:#8c7d5c;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:#0f0e0c;border:1px solid #3a3124;border-radius:3px;padding:0}
.cell small{font-size:8px;color:#6f6553;text-transform:uppercase}
.cell.sel{border-color:#ffd76a;box-shadow:0 0 0 1px #ffd76a inset}.cell:hover{border-color:#8a7350}
.doll .cell{width:52px;height:52px}
.money{display:flex;justify-content:space-between;margin-top:6px;padding:4px 6px;background:#0f0e0c;border:1px solid #2f281d;border-radius:3px;font-size:12px}.money b{color:#ffd76a}
.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:#4b3f2c 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 #ffc845)}
.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:#e8b04a}.idur.bad{color:#ff6b6b}
.icow .plus{position:absolute;left:-3px;top:-5px;font:bold 9px system-ui;font-style:normal;color:#ffd76a;text-shadow:1px 1px 0 #000,-1px -1px 0 #000}
.icow .qty{position:absolute;right:-3px;bottom:-4px;font:bold 9px system-ui;font-style:normal;color:#fff;text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000}
.detail{border-top:1px solid #2f281d;margin-top:6px;padding-top:6px;min-height:54px;font-size:12px}
.iname{font:700 13px Georgia,serif}.irar{color:#a99c82;font-size:11px;margin-bottom:3px}.stat{color:#9fe0a0}.ireq{color:#c9b98e}.ireq.bad{color:#ff8a7a}.iprice{color:#d8bf7a;margin-top:2px}
.detail .btns{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.hint{color:#a49880;font-size:11px;margin:5px 0}
.wbody button,.panel button{background:#2c281f;border:1px solid #88704e;color:#e6d4a8;border-radius:3px;padding:4px 8px;font-size:12px}
.wbody button:hover:not(:disabled),.panel button:hover:not(:disabled){border-color:#e5c07a;color:#fff3d4}
.wbody button:disabled,.panel button:disabled{opacity:.4;cursor:default}
button.main{background:#846222!important;border-color:#d4a84e!important;color:#fff1d2!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:#4b3f2c transparent;position:absolute;z-index:4;background:#1b1914f6;border:1px solid #9c7f4a;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:#f0d38a}
.panel header .gold{color:#ffd76a;font-weight:700}.panel header small{color:#bba98a}
.panel .x{margin-left:auto;background:none!important;border:0!important;color:#d8c8a2;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 #3a3226;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 #3f3526;border-radius:3px;background:#0a0c0a}
#mapPanel .legend{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11px;color:#bfb39b;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:#8c826f}
#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:#141210;border:1px solid #3f3526;border-radius:5px;padding:8px 10px;line-height:1.55;color:#eadfca;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:#0f0e0c}
.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:#846222;border-color:#d4a84e;color:#fff1d2}
.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:#14120f}
.shop .row.dim{opacity:.5}.shop .nm,.trow .nm{flex:1;min-width:0}.shop .nm small,.trow .nm small{display:block;color:#a99c82;font-size:10px}
.shop .pr{color:#ffd76a;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:#a99c82;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:#151410;color:#eee;border:1px solid #675940;border-radius:3px;padding:4px 6px}
.chk{display:block;margin:4px 0;color:#c2b9a9;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:#2f2a20;border:1px solid #5b4b32}.pips i.on{background:#e5b853;border-color:#ffd98a}
.panel h3{font:700 13px Georgia,serif;color:#f0d38a;margin:10px 0 5px}
table.lt{width:100%;border-collapse:collapse;font-size:12px}table.lt th{text-align:left;color:#c9a45c;font-weight:600;border-bottom:1px solid #3f3526;padding:3px 4px}table.lt td{padding:3px 4px;border-bottom:1px solid #24201a}
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:#bfb39b}
/* 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:#24211d;border:1px solid #99804d;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:#e9cd82;letter-spacing:3px;margin:4px 0}
#login p{color:#c2b9a9;margin:10px 0 16px;font-size:13px}
#login input{display:block;width:100%;padding:11px;background:#151410;border:1px solid #675940;border-radius:4px;color:#eee;font:14px system-ui}
.choices{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}
.choice{background:#24282b;border:2px solid #4c4e49;border-radius:7px;color:#eee;padding:8px}.choice.selected{border-color:#e5b853;background:#343126}
.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:#b8afa0;font-size:10px}
#enter{width:100%;background:#846222;color:#fff1d2;border:1px solid #d4a84e;border-radius:4px;padding:12px;font-weight:700}
#login>small{display:block;color:#aaa;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:#c2b9a9;margin:0 0 10px}
label.test select{background:#151410;color:#eee;border:1px solid #675940;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 #b08e52;border-radius:8px;padding:14px 16px 12px;box-shadow:0 10px 30px #000a;color:#e9e1cf}
.tut-card small{color:#c9a45c;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:#f0d38a;text-wrap:balance}
.tut-card p{margin:0 0 12px;font-size:13px;line-height:1.55;color:#ddd3bf}
.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 #88704e;background:#2c281f;color:#d8c8a2}
.tut-actions #tutNext{background:#846222;border-color:#d4a84e;color:#fff1d2}
button:focus-visible{outline:2px solid #f0d38a;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 #000}
.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 #88704e;color:#e6d4a8;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 #88704e;color:#e6d4a8;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:#4b3f2c}
.slot.drop{border-color:#ffd98a;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 #2f281d;padding-top:6px}
.hotcfg h3{margin:0 0 2px;font:700 12px system-ui;letter-spacing:1px;text-transform:uppercase;color:#d8c8a2}
.hotrow{display:grid;grid-template-columns:52px 96px 1fr;gap:6px;align-items:center;margin:3px 0}
.hotrow .hn{color:#bfb39b;font-size:11px}.hotrow select{min-width:0;background:#0f0e0c;color:#e8dfcc;border:1px solid #4b3f2c;border-radius:3px;padding:3px}
.panel .keycap{font:700 11px system-ui;padding:3px 6px}.panel .keycap.wait{border-color:#ffd76a;color:#ffd76a}
#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 #9c7f4a;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:#1a1814;border:1px solid #4b3f2c;color:#cbb991;border-radius:4px;padding:7px}.authtabs button.on{border-color:#e5b853;color:#fff1d2;background:#343126}
#login .tab input,#charsel input{margin-bottom:8px}
#login small.warn{display:block;color:#f0c27a;font-size:11px;margin:2px 0 10px;text-align:left}
button.big{width:100%;background:#846222;color:#fff1d2;border:1px solid #d4a84e;border-radius:4px;padding:12px;font-weight:700}
#charsel{background:#24211d;border:1px solid #99804d;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:#c2b9a9;font-size:12px;margin:6px 0 14px}
#charsel input{display:block;width:100%;padding:11px;background:#151410;border:1px solid #675940;border-radius:4px;color:#eee;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:#1a1814;border:1px solid #4b3f2c;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:#f1e8d4}.charrow small{color:#a99c82}
.charrow button{background:#2c281f;border:1px solid #88704e;color:#e6d4a8;border-radius:4px;padding:6px 12px}.charrow button.play{background:#846222;border-color:#d4a84e;color:#fff1d2;font-weight:700}
#newChar{text-align:left;margin:6px 0 12px}#newChar summary{cursor:pointer;color:#e6c171;font-weight:600;margin-bottom:8px}
#charsel .row2{display:flex;justify-content:center}#charsel .row2 button{background:#2c281f;border:1px solid #88704e;color:#e6d4a8;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 #26211a}
.trow.locked{opacity:.55}.trow .nm small.desc{color:#cfc2a6;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:#15130f;border:1px solid #4b3f2c;border-radius:4px;color:var(--txt);cursor:pointer;font:inherit}
.vars .var b{font-size:11px;color:#e5c77e;font-weight:600}.vars .var small{font-size:10px;color:#a99c82}
.vars .var:not(:disabled):hover{border-color:#ffd98a;background:#221d14}
.vars .var:disabled{cursor:default}.vars.wait .var{opacity:.45}
.vars .var.on{border-color:#ffd98a;background:#2a2312;box-shadow:inset 0 0 0 1px #ffd98a55;opacity:1}.vars .var.on b{color:#ffe7a8}
.vars .var.off{opacity:.35}
#spellsList .sp.locked img{filter:grayscale(1) brightness(.7)}#spellsList .sp.locked b{color:#8d826c}
#spellsList .vtag{font-style:normal;font-size:9px;color:#ffd98a;font-weight:700}
.slot .chg{position:absolute;right:3px;bottom:9px;font:bold 11px system-ui;font-style:normal;color:#ffe7a8;text-shadow:1px 1px 0 #000,-1px -1px 0 #000}
.touch .vars{margin-left:0}

/* DUEL 11: conjunto, origem do drop, corpo com loot */
.iset{color:#c9a2ff;font-size:11px}.isrc{color:#9c8f77;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 #2f281d;margin-top:6px;padding-top:6px}.forgebox h3{margin:8px 0 4px;font:700 11px system-ui;letter-spacing:1px;text-transform:uppercase;color:#d8c8a2}
.forgebox .row{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:4px 0;border-bottom:1px solid #26211a}.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:#ffc845}
.row.task .nm input{display:block;width:100%;margin-top:3px}.row.task .nm small{display:inline}
.tbar{height:6px;background:#0d0c0a;border:1px solid #3a3124;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 #26211a;background:#16140f}
#chat .ctabs{display:flex;gap:2px;flex-shrink:0}#chat .ctabs button{position:relative;background:#1f1c16;border:1px solid #3a3124;color:#bfb39b;border-radius:3px 3px 0 0;padding:2px 8px;font-size:11px}
#chat .ctabs button.on{background:#2e291f;color:#fff1d2;border-color:#88704e}#chat .ctabs button.new{color:#ffd76a}#chat .ctabs i{font-style:normal;font-size:9px;background:#b33;color:#fff;border-radius:6px;padding:0 4px;margin-left:4px}
#chatIn{flex:1;min-width:120px;background:#0d0c0a;border:1px solid #3a3124;border-radius:3px;color:#eee;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:#ffcf6a}#chat .c-trade .who{color:#8fe3a0}#chat .c-party .who{color:#7fd6ff}#chat .c-pm .who{color:#e39cff}#chat .c-local .who{color:#ffe9b8}
#pmenu{position:fixed;z-index:40;background:#1b1914f8;border:1px solid #9c7f4a;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:#f0d38a;margin:0 2px 3px}#pmenu button{text-align:left;background:#2c281f;border:1px solid #4b3f2c;color:#e6d4a8;border-radius:3px;padding:4px 8px;font-size:12px}#pmenu button:hover{border-color:#e5c07a}
#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 #d4a84e;border-radius:6px;padding:10px 14px;color:#f3e6c8;font-size:13px;box-shadow:0 8px 24px #000c}.toast .row2{display:flex;gap:6px;margin-top:8px}.toast button{background:#2c281f;border:1px solid #88704e;color:#e6d4a8;border-radius:3px;padding:4px 12px}.toast button.main{background:#846222;color:#fff1d2}
#pframe{position:absolute;left:8px;top:96px;z-index:3;width:178px;background:#15130fe0;border:1px solid #5e4d32;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:#f0d38a}#pframe header button{background:#2c281f;border:1px solid #4b3f2c;color:#cbb991;border-radius:3px;font-size:10px;padding:1px 6px}
#pframe .pm{margin:4px 0}#pframe .pm .nm{display:block;color:#eadfca;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#pframe .pm small{color:#a99c82}#pframe .pm.dead{opacity:.5}
#pframe .bar{display:block;height:4px;background:#0d0c0a;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:#d8c8a2}
.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:#ffd76a}.tok{color:#a99c82;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:#0f0e0c;border:1px solid #4b3f2c;color:#eee;border-radius:3px;margin-bottom:6px}
#stallWin .row,.svc .row{display:flex;gap:6px;align-items:center}#stallWin input[type=number]{background:#0f0e0c;border:1px solid #4b3f2c;color:#eee;border-radius:3px;padding:2px 4px}
.svc input[type=search]{width:100%;padding:6px;background:#0f0e0c;border:1px solid #4b3f2c;color:#eee;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:#16140f;border:1px solid #2e281d;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:#cdbb92;letter-spacing:.2px;white-space:nowrap;text-shadow:0 1px 0 #000}
#menu button:hover .ml,#menu button.on .ml{color:#ffe2a0}
/* 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:#e5b853;color:#1a1610;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:#15130f;border:1px dashed #5e4d32;border-radius:4px;box-sizing:border-box}
.idesc{color:#cfc2a6;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:#4b3f2c 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:#a99c82}

/* 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:#a99c82;border-radius:4px}.detail .detx:hover{color:#f3e7cf;border-color:#5a4c36}

/* 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%,#f4e2b8,#a8875a 70%,#6b5636);border:2px solid #2a2217;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:#c9a45c}
.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:#ffe28c;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:#ffe45c;white-space:normal;overflow-wrap:anywhere;text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000}
#chat .line time{color:#a89878}#chat .c-local .who{color:#fff3b0}
.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:#0d0c0a;border:1px solid #3a3124;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:#e6c171}#farmWin details{margin-top:10px}#farmWin details input{width:100px;padding:4px;background:#0f0e0c;border:1px solid #4b3f2c;color:#eee;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:#ffe28c;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 */
/* Drakhen (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(--txt)}
#portalwin .pw-lv.warn{color:#ff7a5a}#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:#ff7a5a}
#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:#846222;border-color:#d4a84e;color:#fff;min-width:96px}
#portalwin .pw-btns .primary:disabled{background:#1d1b16;border-color:#675940;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}