/* HUD aprovado: madeira, metal dourado e duas esferas. Toda a interface continua sendo HTML acessível. */
.classic-hud{--hud-gold:#d1a354;position:absolute;z-index:21;left:50%;bottom:10px;transform:translateX(-50%);isolation:isolate;display:grid;grid-template-columns:106px minmax(0,1fr) 106px;grid-template-rows:96px 17px;column-gap:12px;width:min(970px,calc(100% - 94px));padding:0 9px 4px;pointer-events:none;color:#ffedc6;filter:drop-shadow(0 4px 5px #0008)}
.classic-hud::before{content:"";position:absolute;z-index:-2;inset:20px 4px 0;border:3px ridge #ad7c39;border-radius:7px 7px 3px 3px;background:repeating-linear-gradient(0deg,transparent 0 6px,#100b0780 7px,#a6763c2b 8px,transparent 9px 15px),linear-gradient(95deg,#322116,#5d3c21 15%,#291c14 45%,#57381f 80%,#322116);box-shadow:0 0 0 2px #1c130c,inset 0 0 0 2px #e1b56e55,inset 0 9px 10px #190f0c99}
.classic-hud::after{content:"";position:absolute;z-index:-1;left:calc(50% - 9px);top:13px;width:18px;height:18px;transform:rotate(45deg);border:2px ridge #dbb96c;background:linear-gradient(135deg,#7a5127,#372519);box-shadow:0 0 0 2px #1c140d}
.classic-vine{position:absolute;z-index:-1;bottom:-2px;width:160px;height:140px;background:url('classic-hud/ornament.svg?v=970') center bottom/contain no-repeat;pointer-events:none}
.classic-vine-left{left:-48px}.classic-vine-right{right:-48px;transform:scaleX(-1)}
.classic-hud .hud-orb{--fill:100%;position:relative;grid-row:1;align-self:end;justify-self:center;width:106px;height:106px;border:4px ridge #d4ac59;border-radius:50%;overflow:visible;background:linear-gradient(135deg,#e7c36f,#5d3918 37%,#be9144 65%,#f1d492);box-shadow:0 0 0 2px #1a130c,0 0 0 4px #ad813c,inset 0 0 0 2px #3a2312;pointer-events:auto}
.classic-hud .hp-orb{grid-column:1}.classic-hud .mana-orb{grid-column:3}
.classic-hud .hud-orb::before{inset:2px;border:1px solid #f9df9f99;box-shadow:inset 0 0 0 2px #261606;pointer-events:none}
.classic-hud .hud-orb::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px solid #d5ad5c;clip-path:polygon(0 0,45% 0,45% 25%,100% 25%,100% 75%,55% 75%,55% 100%,0 100%);pointer-events:none}
.classic-hud .orb-core{inset:6px;isolation:isolate;overflow:hidden;border-radius:50%;border:1px solid #110b08;background:#170b10;gap:4px;box-shadow:inset 0 3px 12px #0009;justify-content:center;color:#fff7e8;text-shadow:0 1px 2px #000,0 0 3px #000;pointer-events:none}
.classic-hud .mana-orb .orb-core{background:#070f20}
.classic-hud .orb-liquid{position:absolute;z-index:-2;inset:auto 0 0;height:var(--fill);background:radial-gradient(ellipse at 35% 20%,#ff8692,#cf2439 30%,#8b0c1c 70%,#40050d);box-shadow:inset 0 2px 0 #ffb1b57a;transition:height .25s ease}
.classic-hud .mana-orb .orb-liquid{background:radial-gradient(ellipse at 35% 20%,#8ddaff,#297acb 35%,#174b9e 70%,#091736);box-shadow:inset 0 2px 0 #9ed9ff99}
.classic-hud .orb-core::after{content:"";position:absolute;z-index:-1;inset:0;border-radius:50%;background:radial-gradient(ellipse at 28% 20%,#fff9 0 3%,#ffffff42 4% 8%,transparent 12%),radial-gradient(ellipse at 65% 75%,transparent 20%,#0003 78%);pointer-events:none}
.classic-hud .orb-core .orb-icon{font:20px/1 Georgia,serif;color:#fff6e6;opacity:1}
.classic-hud .orb-core small{font:700 10px/1 Arial,sans-serif;letter-spacing:1.2px;margin:0}
.classic-hud .orb-core strong{font:700 12px/1.2 Arial,sans-serif;letter-spacing:0;white-space:nowrap}
.classic-hud .orb-core strong.large-value{font-size:9px}
.classic-hud .resource-low{box-shadow:0 0 0 2px #1a130c,0 0 0 4px #ad813c,0 0 10px #c9463388}
.classic-hud>.quick-dock.compact-dock{position:relative!important;grid-column:2;grid-row:1;align-self:end;left:auto!important;right:auto!important;bottom:auto!important;top:auto!important;transform:none!important;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;width:100%!important;max-width:none!important;margin:0;padding:7px 5px 1px;height:80px;overflow:visible;border:0;border-radius:0;box-shadow:none;background:none;backdrop-filter:none;pointer-events:auto}
.classic-hud .quick-dock::before,.classic-hud .quick-dock::after{display:none!important}
.classic-hud .quick-dock button{display:grid;grid-template-columns:1fr;grid-template-rows:34px 15px 12px;align-content:center;gap:1px;min-width:0;min-height:72px;padding:2px 3px;border:1px solid #bf914b;border-radius:5px;background:linear-gradient(135deg,#74533333,transparent 30%),linear-gradient(#32271e,#1d1812);color:#f9e7bd;box-shadow:0 0 0 2px #1a120c,inset 0 0 0 2px #80603433;font-size:11px}
.classic-hud .quick-dock button .menu-art{display:block!important;grid-row:1;grid-column:1;width:34px;height:34px;justify-self:center}
.classic-hud .quick-dock button .menu-label{display:block!important;grid-row:2;grid-column:1;justify-self:center;font:700 11px/15px Georgia,serif;letter-spacing:0;white-space:nowrap}
.classic-hud .quick-dock button .menu-key{display:block!important;grid-row:3;grid-column:1;justify-self:center;border:0;border-radius:0;background:none;padding:0;color:#dbcba6;font:10px/12px Georgia,serif}
.classic-hud .quick-dock button .menu-key::before{content:"[ "}.classic-hud .quick-dock button .menu-key::after{content:" ]"}
.classic-hud .quick-dock button:hover,.classic-hud .quick-dock button.active{background:linear-gradient(#6e4d2f,#352618);border-color:#ffdc8c;box-shadow:0 0 0 2px #21160d,inset 0 0 8px #e1af4633}
.classic-hud [data-panel="cash-shop-panel"] .menu-art,.mobile-controls [data-panel="cash-shop-panel"] .menu-art{background:url('classic-hud/diamond.svg?v=970') center/contain no-repeat!important}
.classic-progression{grid-column:2;grid-row:2;align-self:center;display:flex;align-items:center;gap:8px;padding:0 5px;pointer-events:auto}
#classicLevel{flex:none;font:700 10px/15px Georgia,serif;color:#fff0bf;text-shadow:0 1px #000}
.classic-hud .hud-xp-bar{flex:1;height:12px;margin:0;border:1px solid #977337;border-radius:3px;background:#101c0e;box-shadow:0 0 0 1px #1c130a,inset 0 1px 3px #000}
.classic-hud .hud-xp-fill{background:linear-gradient(#b8d967,#739b34 45%,#52772b 55%,#b0c854)}
.classic-hud .hud-xp-bar span{font:9px/10px Arial,sans-serif;letter-spacing:.2px;text-shadow:0 1px 2px #000,0 0 2px #000;color:#fff8d8}
.classic-coords{display:none}
.canvas-wrap{padding-bottom:0;aspect-ratio:auto!important;height:clamp(420px,calc(100dvh - 180px),1000px)}
body:not(.mobile-play) .canvas-wrap>.hud-chat{bottom:142px!important;max-width:300px}
/* Reserva o rodapé do HUD para que janelas abertas nunca fiquem atrás das esferas. */
body:not(.mobile-play) .game-window-host{bottom:140px;z-index:24}
.canvas-wrap>#battleHud{z-index:22;bottom:104px!important;width:min(700px,calc(100% - 50px));gap:0;align-items:center;pointer-events:none}
#battleHud>.hud-center-pack{flex:1!important;width:100%!important;max-width:none!important;flex-direction:column-reverse;align-items:center;gap:4px;pointer-events:none}
#battleHud .hud-center-details{pointer-events:auto}
#battleHud .hud-center-frame{border-color:#ba914e;background:linear-gradient(#3b2a1af5,#221a13f5);box-shadow:0 0 0 2px #22160c,inset 0 0 0 2px #c9a25b30}
#battleHud .hud-visibility-toggle{position:relative!important;inset:auto!important;display:block!important;align-self:center!important;min-width:32px!important;width:32px;height:24px;min-height:24px;padding:0!important;margin:0!important;border:1px solid #c19b50;border-radius:7px 7px 3px 3px;background:linear-gradient(#75532a,#302115);font-size:0!important;box-shadow:0 0 0 2px #25190e;pointer-events:auto;transform:none!important;cursor:pointer}
#battleHud .hud-visibility-toggle::after{content:"⌄";font:700 19px/20px Georgia,serif;color:#f4d494}
#battleHud .hud-visibility-toggle[aria-expanded=false]::after{content:"⌃"}
.game-menu-panel{bottom:140px;max-height:calc(100% - 154px);border-color:#bf9952;background:linear-gradient(125deg,#3c2d1bf5,#1c1a12f7);box-shadow:0 8px 28px #0009,inset 0 0 0 3px #d5a34d22}
.game-menu-heading{border-color:#b28c493d}.game-menu-close{background:#322417}
.game-menu-panel .menu-entry:hover,.game-menu-panel .menu-entry.active{background:#bd954322;border-color:#b5925366}
body.gate-open .classic-hud{visibility:hidden!important;pointer-events:none!important}
body.mobile-play .classic-hud{display:none!important}
@media(min-width:671px) and (max-width:1000px){.classic-hud{grid-template-columns:90px minmax(0,1fr) 90px;grid-template-rows:84px 17px;column-gap:8px;width:calc(100% - 44px)}.classic-hud .hud-orb{width:90px;height:90px}.classic-hud .quick-dock{height:74px;gap:4px!important}.classic-hud .quick-dock button{min-height:68px;grid-template-rows:30px 15px 12px;padding:1px}.classic-hud .quick-dock button .menu-art{width:30px;height:30px}.classic-hud .quick-dock button .menu-label{font-size:10px}.classic-hud .orb-core strong{font-size:10px}.classic-hud .orb-core strong.large-value{font-size:8px}.classic-hud .orb-core .orb-icon{font-size:17px}.classic-vine{width:125px;height:110px}.classic-vine-left{left:-28px}.classic-vine-right{right:-28px}.canvas-wrap>#battleHud{bottom:92px!important}.game-menu-panel{bottom:128px}}
/* No celular, o mesmo metal e madeira em esferas pequenas; joystick e mapa continuam livres. */
body.mobile-play .mobile-status{width:132px;grid-template-columns:58px 58px;justify-content:center;gap:4px 7px;left:calc(10px + env(safe-area-inset-left));top:calc(10px + env(safe-area-inset-top));padding:5px 3px 6px;border:1px solid #b48a454d;border-radius:9px;background:linear-gradient(#38261899,#21190f66);box-shadow:inset 0 0 0 2px #e1b3650d}
body.mobile-play .mobile-status>span{grid-column:1/-1;text-align:center;font:700 10px/12px Georgia,serif;color:#f6d99a}
body.mobile-play .mobile-status .mobile-resource{--fill:100%;isolation:isolate;width:58px;height:58px;border:3px ridge #d0a358;border-radius:50%;background:#180b12;font:bold 8px/67px Arial,sans-serif;color:#fff7df;box-shadow:0 0 0 1px #28170b,inset 0 0 0 1px #f1c77780;text-shadow:0 1px 2px #000,0 0 2px #000}
body.mobile-play .mobile-status .mobile-resource.mana{background:#080f1b}
body.mobile-play .mobile-status .mobile-resource::before{inset:auto 0 0;width:100%;height:var(--fill);border-radius:0;background:radial-gradient(ellipse at 30% 15%,#e4777fdb,#a92336cc 45%,#680a1bd9);box-shadow:inset 0 1px 0 #f6b6a54d}
body.mobile-play .mobile-status .mobile-resource.mana::before{background:radial-gradient(ellipse at 30% 15%,#8cceefdb,#2856b2cc 50%,#11306cd9)}
body.mobile-play .mobile-status .mobile-resource::after{position:absolute;content:"♥ VIDA";inset:13px 0 auto;font:700 8px/10px Arial,sans-serif;letter-spacing:.3px;text-shadow:0 1px #000}
body.mobile-play .mobile-status .mobile-resource.mana::after{content:"♦ MANA"}
body.mobile-play .mobile-status .mobile-resource.large-value{font-size:6px}
body.mobile-play .mobile-controls button{border-color:#e1bd716e;box-shadow:0 2px 5px #0003,inset 0 0 0 1px #2e211538}
body.mobile-play .mobile-controls #mobileMenu{border-color:#b68c4b;background:linear-gradient(135deg,#3a2c1af5,#1a2117f7)}
body.mobile-play #mobileMenu>header{background:#322719f2;border-color:#c2a05b55}
body.mobile-play #mobileMenuItems button{border-color:#c4a25e55;background:#5c432217}
body.mobile-play .mobile-joystick{border-color:#e3c88688}.mobile-joystick .joystick-knob{border-color:#f5dca694}
@media(prefers-reduced-motion:reduce){.classic-hud .orb-liquid{transition:none}}