/* Vexoria — amigos/mensagem privada, diárias, chefe mundial e placar de PK (Claude, 18/10) */
#menu-hotbar .menu-pixel-icon{width:30px;height:24px;image-rendering:pixelated}
#mobile-dock .menu-pixel-icon{width:28px;height:23px;image-rendering:pixelated}
.dl-dot{position:absolute;right:-3px;top:-3px;width:11px;height:11px;background:#e0283f;border:2px solid #1a1126;animation:blink 1s infinite}
#dailies-open,#friends-open{position:relative}

/* chat: mensagens privadas e avisos de amigos */
#chatlog .pm-line{color:#f2c6ff}#chatlog .pm-line .n{color:#d58cff}
#chatlog .pm-out{color:#c9b3d6}#chatlog .pm-out .n{color:#a98bc4}
#chatlog .pm-sys{color:#ff9b9b;font-style:italic}
#chatlog .friend-presence{color:#8fd1b8}
#chat-preview .cp-pm{border-color:#6a3a86}#chat-preview .cp-pm b{color:#d58cff}

/* painel de amigos */
.friends-window .game-window{max-width:520px}
.friends-window h3,.dailies-window h3{margin:12px 0 6px;font:16px Pix,monospace;color:#f7d77a;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.friends-window h3 small,.dailies-window h3 small{font:12px Pix,monospace;color:#a99bb6}
.fr-add{display:flex;gap:8px}.fr-add input{flex:1;min-width:0;background:#0b0712;color:#e3dcef;border:2px solid #3d2c56;padding:6px 8px;font:15px inherit}
.fr-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:260px;overflow:auto}
.fr-list li{display:flex;align-items:center;gap:8px;padding:5px 8px;background:#1a1226;border:2px solid #2c2040}
.fr-list li>div{flex:1;min-width:0;display:flex;flex-direction:column}.fr-list li small{color:#a99bb6;font-size:12px}
.fr-list li.off{opacity:.6}
.fr-list li span{display:flex;gap:4px}.fr-list li button{padding:3px 8px;min-width:30px}
.fr-dot{width:9px;height:9px;flex:none;background:#5a5266;border:2px solid #1a1126}.fr-list li.on .fr-dot{background:#6fe08a;box-shadow:0 0 6px #6fe08a}
.fr-empty,.fr-help,.dl-help{color:#a99bb6;font-size:13px;margin:6px 0}.fr-help b{color:#e3dcef;font-weight:normal}

/* painel de diárias */
.dailies-window .game-window{max-width:620px}
.dl-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.dl-list li{display:flex;gap:10px;align-items:center;padding:7px 9px;background:#1a1226;border:2px solid #2c2040}
.dl-list li.done{border-color:#93b46a;box-shadow:inset 0 0 12px #93b46a33}
.dl-list li.claimed{opacity:.55}
.dl-text{flex:1;min-width:0}.dl-text b{font-weight:normal;color:#e3dcef}
.dl-bar{position:relative;height:14px;margin-top:4px;background:#0b0712;border:2px solid #2c2040}
.dl-bar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(#b6d47c,#6f9a42)}
.dl-bar span{position:relative;display:block;text-align:center;font:11px/12px Pix,monospace;color:#fff;text-shadow:1px 1px 0 #000}
.dl-rew{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none}.dl-rew small{color:#f7d77a;font-size:12px}
.dl-rew em,.dl-bonus em{color:#93b46a;font-style:normal;font-size:13px}
.dl-bonus{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:6px 0 2px;padding:6px 9px;border:2px dashed #6a5530;color:#f7d77a;font-size:13px}
.dl-bonus.claimed{opacity:.55}

/* faixa do chefe mundial */
#world-boss{position:absolute;left:50%;top:90px;transform:translateX(-50%);z-index:25;pointer-events:none;text-align:center;font:14px Pix,monospace;color:#f2e6d0;text-shadow:1px 1px 0 #07040c}
#world-boss.hidden{display:none}
#world-boss.wb-wait{padding:5px 12px;background:#1a0d14e6;border:2px solid #7a1c2a}
#world-boss.wb-wait span{color:#ffb36b}
#world-boss.wb-live{width:min(460px,80vw);padding:6px 10px 5px;background:#14080ce8;border:2px solid #ff4b4b;box-shadow:0 0 14px #ff4b4b55}
.wb-title{color:#ff8a8a;letter-spacing:1px}.wb-title small{color:#e3dcef;letter-spacing:0}
.wb-bar{position:relative;height:16px;margin:4px 0 2px;background:#0b0306;border:2px solid #3a0f1a}
.wb-bar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(#ff5b5b,#a8162f);transition:width .4s}
.wb-bar span{position:relative;font:11px/14px Pix,monospace;color:#fff}
.wb-time{color:#c4bccf;font-size:11px}

/* PK: abas e placar */
.pk-tabs{display:flex;gap:0;margin:-2px 0 10px}
.pk-tabs button{margin-right:-2px;padding:5px 12px}
.pk-tabs button.on{color:#f7d77a;border-color:#d69a34;background:#2a1f38}
.pk-rank-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.pk-rank-grid{grid-template-columns:1fr}}
.pk-rank{margin:0;padding-left:24px;display:flex;flex-direction:column;gap:3px}
.pk-rank li{padding:3px 6px;background:#1a1226}.pk-rank li b{font-weight:normal}
.pk-rank li span{float:right;color:#f7d77a}
.pk-rank li:first-child{border-left:3px solid #f7d34a}
.pk-rank-empty{list-style:none;color:#a99bb6;background:none!important}
.pk-rank-me,.pk-rank-reset,.pk-rank-last{color:#a99bb6;font-size:13px;margin:6px 0}
.pk-rank-last{color:#d9c3a0}

/* Desafios diários/semanais dentro do Diário [J] (o H foi removido) — Claude, 18/10 */
#journal-open,#mobile-dock [data-mobile=quests],#quest-journal .journal-tabs button{position:relative}
#quest-journal .journal-challenges{flex:1;min-height:0;overflow:auto;padding-right:4px}
#quest-journal .journal-challenges h3{margin:10px 0 6px;font:16px Pix,monospace;color:#f7d77a;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
#quest-journal .journal-challenges h3:first-child{margin-top:2px}
#quest-journal .journal-challenges h3 small{font:12px Pix,monospace;color:#a99bb6}
/* profissões (client/src/professions.js) */
#prof-open,#mobile-dock [data-mobile=prof]{position:relative}
.prof-window .game-window{max-width:640px}
.pf-skills{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
.pf-skill{padding:6px 9px;background:#1a1226;border:2px solid #2c2040;display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 8px}
.pf-skill b{font:16px Pix,monospace;color:#f7d77a;font-weight:normal}.pf-skill span{color:#c4bccf;font-size:13px}
.pf-xp{position:relative;flex-basis:100%;height:14px;background:#0b0712;border:2px solid #2c2040}
.pf-xp i{position:absolute;inset:0 auto 0 0;background:linear-gradient(#f7d77a,#d69a34)}
.pf-xp small{position:relative;display:block;text-align:center;font:11px/12px Pix,monospace;color:#fff;text-shadow:1px 1px 0 #000}
.pf-buffs{list-style:none;margin:4px 0;padding:6px 9px;background:#140d1c;border:2px dashed #3d2c56;font-size:13px}
.pf-buffs b{font-weight:normal}
.pf-help{color:#a99bb6;font-size:13px;margin:6px 0}.pf-help b{color:#e3dcef;font-weight:normal}
.pf-warn{color:#f7d77a;font-size:13px;margin:4px 0}
.pf-tabs{display:flex;margin:8px 0 6px}.pf-tabs button{margin-right:-2px;padding:5px 12px}.pf-tabs button.on{color:#f7d77a;border-color:#d69a34;background:#2a1f38}
.pf-recipes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;max-height:330px;overflow:auto}
.pf-recipes li{display:flex;gap:10px;align-items:center;padding:6px 9px;background:#1a1226;border:2px solid #2c2040}
.pf-recipes li.locked{opacity:.55}
.pf-recipes li>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pf-recipes li>div>b{font-weight:normal;color:#e3dcef}.pf-recipes small{color:#a99bb6;font-size:12px}
.pf-out{width:32px;height:32px;image-rendering:pixelated;flex:none}
.pf-in{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px;color:#c9e3b0}
.pf-in img{width:16px;height:16px;image-rendering:pixelated;vertical-align:-3px;margin-right:2px}
.pf-in .bad,.pf-recipes .bad{color:#ff8a8a}
.pf-btns{display:flex;gap:4px;flex:none}.pf-btns button{padding:4px 9px}
@media(max-width:560px){.pf-skills{grid-template-columns:1fr}}
#gather-bar{position:absolute;left:50%;bottom:calc(var(--dock-height,70px) + var(--dock-bottom,12px) + 70px);transform:translateX(-50%);width:220px;padding:4px 8px 6px;background:#140d1ce8;border:2px solid #6f9a42;text-align:center;font:13px Pix,monospace;color:#e3dcef;z-index:26;pointer-events:none}
#gather-bar.hidden{display:none}
#gather-bar i{display:block;height:8px;margin-top:4px;width:0;background:linear-gradient(#b6d47c,#6f9a42)}

/* bancada animada das profissões (client/src/craft-stage.js) */
.cs-stage{position:relative;height:190px;margin:0 0 10px;overflow:hidden;border:2px solid #0c0812;box-shadow:inset 0 0 0 2px #3e2238,inset 0 -40px 60px #0008;
  background:radial-gradient(ellipse at 50% 85%,#4a1a1a 0%,#1e1018 45%,#0f0a14 80%)}
.cs-stage[data-mode=herb]{background:radial-gradient(ellipse at 50% 85%,#1d3a26 0%,#14181e 45%,#0d0a14 80%)}
.cs-fx{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.cs-title{position:absolute;left:10px;top:6px;font:13px Pix,monospace;color:#d9c3a0;opacity:.85}
.cs-hammer{position:absolute;left:calc(50% + 104px);top:calc(55% - 52px);width:36px;height:36px;image-rendering:pixelated;transform-origin:70% 90%;transform:rotate(35deg);opacity:0;pointer-events:none}
.cs-stage[data-mode=mining].charging .cs-hammer{opacity:1}
.cs-hammer.hit{animation:cs-hit .34s cubic-bezier(.5,0,.8,.4)}
.cs-ing{position:absolute;width:24px;height:24px;margin:-12px 0 0 -12px;image-rendering:pixelated;pointer-events:none;z-index:3;animation:cs-fly .6s cubic-bezier(.3,.1,.5,1) forwards;filter:drop-shadow(0 0 4px #f7d77a)}
.cs-result{position:absolute;left:50%;top:58%;width:48px;height:48px;margin:-24px 0 0 -24px;opacity:0;pointer-events:none;z-index:4}
.cs-result img{width:48px;height:48px;image-rendering:pixelated}
.cs-stage.ok .cs-result{animation:cs-jump 1.2s cubic-bezier(.2,1.4,.4,1) forwards}
.cs-stage.ok .cs-result img{animation:cs-shine 1.2s ease-out}
.cs-flash{position:absolute;inset:0;opacity:0;pointer-events:none;mix-blend-mode:screen}
.cs-flash.go{animation:rf-flash .7s ease-out}
.cs-pop{position:absolute;left:0;right:0;top:14%;text-align:center;font:24px Pix,monospace;opacity:0;z-index:6;pointer-events:none;text-shadow:0 0 12px currentColor,2px 2px 0 #0c0812}
.cs-pop.show{animation:rf-popup 1.4s cubic-bezier(.2,1.6,.4,1) forwards}
.cs-stage.jolt{animation:rf-jolt .12s linear}
.cs-stage.fail{animation:rf-quake .5s linear}
@keyframes cs-fly{0%{transform:translate(var(--sx),var(--sy)) scale(1) rotate(0);opacity:0}15%{opacity:1}70%{transform:translate(0,-30px) scale(1.1) rotate(200deg)}100%{transform:translate(0,4px) scale(.3) rotate(360deg);opacity:0}}
@keyframes cs-hit{0%{transform:rotate(35deg)}45%{transform:rotate(-40deg) translate(-6px,-4px)}55%{transform:rotate(60deg) translate(-26px,14px)}100%{transform:rotate(35deg)}}
@keyframes cs-jump{0%{opacity:0;transform:translateY(10px) scale(.3)}18%{opacity:1;transform:translateY(-70px) scale(1.4) rotate(-10deg)}35%{transform:translateY(-50px) scale(1.1) rotate(8deg)}55%{transform:translateY(-58px) scale(1.2) rotate(0)}85%{opacity:1;transform:translateY(-56px) scale(1.15)}100%{opacity:0;transform:translateY(-62px) scale(1.1)}}
@keyframes cs-shine{0%{filter:brightness(4) drop-shadow(0 0 20px #fff)}50%{filter:brightness(1.6) drop-shadow(0 0 16px var(--gc)) drop-shadow(0 0 30px var(--gc))}100%{filter:drop-shadow(0 0 8px var(--gc))}}
@media(max-width:560px){.cs-stage{height:130px}}

/* menus recolhíveis na barra de baixo (client/src/hotbar-toggle.js) — só no computador; técnicas e poções sempre visíveis */
#hotbar-toggle{pointer-events:auto;flex:none;align-self:center;width:22px;height:44px;padding:0;margin:0;display:grid;place-items:center;cursor:pointer;
  background:#1a1126;border:2px solid #6e576a;box-shadow:0 0 0 2px #130c1c}
#hotbar-toggle i{width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:7px solid #f7d77a}
html.hotbar-hidden #hotbar-toggle i{border-right:0;border-left:7px solid #f7d77a}
#hotbar-toggle:hover{background:#2a1f38;border-color:#d69a34}
html.touch-device #hotbar-toggle{display:none}

/* espaço do traje no equipamento (client/src/hud.js buildSlots) */
html #eqright .eq-costume{margin-top:12px;border-style:dashed;cursor:pointer}
html #eqright .eq-costume.owned{border-style:solid}
html #eqright .eq-costume img{filter:drop-shadow(0 0 4px #8fffd8aa)}
/* transição ao mostrar/esconder os menus da barra de baixo (Claude, 19/10): desliza, e os botões entram um a um */
html #menu-hotbar{max-width:var(--mw,1200px);clip-path:inset(-24px 0 -24px 0);
  transition:max-width .38s cubic-bezier(.2,.8,.2,1),opacity .25s ease,padding .38s ease,margin .38s ease,border-color .3s}
html.hotbar-hidden #menu-hotbar{display:flex;max-width:0;opacity:0;padding-left:0!important;padding-right:0!important;margin-left:-6px!important;margin-right:0!important;border-color:transparent!important;pointer-events:none}
html #menu-hotbar>*{transition:transform .32s cubic-bezier(.3,1.5,.5,1),opacity .22s ease}
html.hotbar-hidden #menu-hotbar>*{transform:translateX(-18px) scale(.55);opacity:0;transition-delay:0s!important}
html:not(.hotbar-hidden) #menu-hotbar>*:nth-child(1){transition-delay:.03s}
html:not(.hotbar-hidden) #menu-hotbar>*:nth-child(2){transition-delay:.06s}
html:not(.hotbar-hidden) #menu-hotbar>*:nth-child(3){transition-delay:.09s}
html:not(.hotbar-hidden) #menu-hotbar>*:nth-child(4){transition-delay:.12s}
html:not(.hotbar-hidden) #menu-hotbar>*:nth-child(5){transition-delay:.15s}
html:not(.hotbar-hidden) #menu-hotbar>*:nth-child(6){transition-delay:.18s}
html:not(.hotbar-hidden) #menu-hotbar>*:nth-child(7){transition-delay:.21s}
html:not(.hotbar-hidden) #menu-hotbar>*:nth-child(8){transition-delay:.24s}
html:not(.hotbar-hidden) #menu-hotbar>*:nth-child(9){transition-delay:.27s}
html:not(.hotbar-hidden) #menu-hotbar>*:nth-child(10){transition-delay:.30s}
html:not(.hotbar-hidden) #menu-hotbar>*:nth-child(n+11){transition-delay:.33s}
#hotbar-toggle i{transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
html.hotbar-hidden #hotbar-toggle i{border-left:0;border-right:7px solid #f7d77a;transform:rotate(180deg)}
#hotbar-toggle:active i{transform:scale(.8)}

/* mochila grande (Ampliador da Loja Cash, até 80 espaços): mostra 6 linhas e rola o resto (Claude, 20/10) */
html #inv #bag{max-height:calc(var(--cell,40px)*6 + 2px);overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#d69a34 #1a1226}
html #inv #bag::-webkit-scrollbar{width:8px}html #inv #bag::-webkit-scrollbar-track{background:#1a1226}html #inv #bag::-webkit-scrollbar-thumb{background:#d69a34;border:2px solid #1a1226}
