*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#101710;color:#f8f5df;font-family:system-ui,Segoe UI,sans-serif}canvas#game{width:100%;height:100%;display:block;image-rendering:pixelated}.panel{display:none;position:fixed;inset:0;z-index:20;align-items:center;justify-content:center;padding:12px;background:radial-gradient(circle,#294322dd,#080d08f2)}.panel.show{display:flex}.box{width:min(430px,95vw);max-height:94vh;overflow:auto;padding:22px;text-align:center;background:#142012f5;border:2px solid #7b9b50;border-radius:18px;box-shadow:0 20px 70px #000}.wide{width:min(700px,96vw)}h1{font-size:clamp(38px,8vw,68px);margin:0;color:#f5c64d;text-shadow:0 5px #75440d}h2{color:#f5c64d}button,input,select{width:100%;padding:12px;margin:5px 0;border-radius:9px;border:1px solid #78925a;background:#263a20;color:#fff;font:inherit;font-weight:700}button:hover{filter:brightness(1.2)}#hud{position:fixed;inset:0;z-index:5;pointer-events:none}.hidden{display:none!important}#top,#mission,#ability{position:absolute;padding:8px 11px;background:#081008ce;border-radius:9px}#top{top:8px;left:50%;transform:translateX(-50%)}#mission{right:10px;top:52px;max-width:430px;text-align:right;font-size:12px}#ability{right:10px;top:116px;color:#ffd75e}#bars{position:absolute;left:10px;top:52px;width:min(270px,52vw)}.bar{height:19px;margin:4px;background:#111c;border:1px solid #ffffff55;border-radius:5px;overflow:hidden;position:relative}.bar span{position:absolute;z-index:2;font-size:10px;left:5px}.bar i{display:block;height:100%}#toast{position:fixed;z-index:40;left:50%;bottom:22%;transform:translateX(-50%);background:#080b08ee;padding:10px 15px;border-radius:9px;opacity:0;transition:.2s}#toast.on{opacity:1}#attrs .a{display:grid;grid-template-columns:1fr 55px 40px;gap:5px;align-items:center;border-bottom:1px solid #ffffff22}.a button{padding:5px}.pad{position:fixed;bottom:12px;left:12px;width:156px;z-index:9}.pad button{width:49px;height:49px;padding:0}.pad>button{margin-left:52px}.pad div{display:flex}.acts{position:fixed;right:10px;bottom:10px;width:190px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;z-index:9}.acts button{height:50px;padding:2px;margin:0}#map{width:100%;background:#101a10;border:2px solid #78925a}@media(pointer:fine){#mobile{display:none!important}}@media(max-width:700px){#top{font-size:11px;white-space:nowrap}#mission{max-width:45vw;font-size:9px;top:45px}#ability{top:102px;font-size:9px}.bar{height:15px;margin:2px}.box{padding:15px}}
/* HUD RPG profissional */
#top{top:10px;right:12px;left:auto;transform:none;display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:flex-end;max-width:min(720px,94vw);border:1px solid #ffffff20;box-shadow:0 4px 18px #0008}
#bars{left:16px;top:auto;bottom:16px;width:min(560px,94vw);display:grid;grid-template-columns:82px 150px 1fr;gap:10px;align-items:end;background:#071007d9;border:1px solid #8ba66666;padding:10px;border-radius:14px;box-shadow:0 6px 22px #0009}
.portrait{text-align:center}.portrait .avatar{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;margin:auto;background:linear-gradient(#6d934b,#283c21);border:3px solid #e3c46a;font-size:31px}.portrait b,.portrait small{display:block;font-size:10px}.combatSlots{display:grid;grid-template-columns:1fr 1fr;gap:7px}.combatSlots>div{height:68px;border:2px solid #8b9b70;background:#192518;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.combatSlots b{font-size:23px}.combatSlots span{position:absolute;right:3px;top:3px;background:#000b;border-radius:4px;padding:1px 3px;font-size:9px}.combatSlots small{font-size:8px;max-width:68px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.barStack .bar{height:17px;margin:3px}.barStack .bar span{line-height:15px}.barStack .bar i{transition:width .18s}#mission{top:62px;right:12px;background:#091109e8;border-left:3px solid #e7c85e}#ability{top:116px;right:12px}.pixel-icon{image-rendering:pixelated}
@media(max-width:700px){#top{top:5px;right:5px;gap:5px;font-size:9px;max-width:63vw}#bars{left:6px;bottom:116px;width:calc(100vw - 12px);grid-template-columns:58px 115px 1fr;padding:6px;gap:5px}.portrait .avatar{width:44px;height:44px;font-size:24px}.combatSlots>div{height:55px}.combatSlots b{font-size:18px}#mission{top:57px;right:5px;max-width:56vw}.barStack .bar{height:13px}}