:root{--dock-slot:46px;--dock-menu:32px;--dock-gap:5px;--dock-height:66px;--dock-bottom:12px}
#hotbar{position:fixed;bottom:var(--dock-bottom);left:50%;transform:translateX(-50%);z-index:110;display:flex;align-items:center;gap:10px;padding:8px;box-sizing:border-box;height:var(--dock-height);width:max-content;max-width:calc(100vw - 12px);isolation:isolate;pointer-events:auto;box-shadow:0 0 0 2px #130c1c,inset 0 2px #6e576a}
#hotbar .bar-group{position:static;transform:none;display:flex;align-items:center;gap:var(--dock-gap);flex:0 0 auto}
#hotbar .bar-group+.bar-group{border-left:1px solid #81617a;padding-left:10px}
#hotbar .slot,#hotbar #skill-hotbar button{box-sizing:border-box;flex:0 0 var(--dock-slot);width:var(--dock-slot);height:var(--dock-slot);min-width:0;margin:0;padding:4px;background:#21192c;border:2px solid #83636d;box-shadow:inset 0 0 0 2px #120d1b;color:#e8d5a4;position:relative;display:grid;place-items:center;cursor:pointer}
#hotbar #menu-hotbar .slot{flex-basis:var(--dock-menu);width:var(--dock-menu);height:var(--dock-menu);font:18px Pix;padding:2px}
#hotbar img,#hotbar #skill-hotbar img{width:calc(var(--dock-slot) - 14px);height:calc(var(--dock-slot) - 14px);image-rendering:pixelated}
#hotbar #character-open{font:18px Pix;color:#efd38c}
#hotbar .key,#hotbar #skill-hotbar b{position:absolute;left:2px;top:0;font:14px Pix;color:#f7d77a;text-shadow:1px 1px #100918}
#hotbar #sndslot canvas{width:16px;height:16px;image-rendering:pixelated}#hotbar #sndslot .key{font-size:11px;top:-3px;left:0}
#hotbar .count{font-size:14px;bottom:0;right:2px}
#hotbar button:hover:not(:disabled){border-color:#d7b77b;background:#39283e}#hotbar button:focus-visible{outline:2px solid #f7d77a;outline-offset:2px}
#skill-hotbar button.queued{border-color:#f7d77a;box-shadow:inset 0 0 0 2px #9d774c}
#skill-hotbar button.queued:after{content:'…';position:absolute;bottom:0;right:3px;color:#f7d77a;font:16px Pix}
#chat{bottom:calc(var(--dock-height) + var(--dock-bottom) + 14px)}
#sndpanel{bottom:calc(var(--dock-height) + var(--dock-bottom) + 12px);max-height:calc(100dvh - var(--dock-height) - 40px);overflow:auto}
#character-menu,.game-dialog{bottom:calc(var(--dock-height) + var(--dock-bottom) + 10px);box-sizing:border-box}
#character-menu .cp-frame,.game-window{max-height:100%;box-sizing:border-box}
#inv{max-height:calc(100dvh - 172px - var(--dock-height) - var(--dock-bottom) - 10px);overflow:auto;box-sizing:border-box}
#help{top:100px;bottom:auto;max-height:calc(100dvh - 140px - var(--dock-height));overflow:auto;box-sizing:border-box}
#npc-hint{bottom:calc(var(--dock-height) + var(--dock-bottom) + 14px)}
#status-effects{position:absolute;top:0;left:calc(100% + 8px);display:flex;gap:5px;padding:2px;white-space:nowrap;pointer-events:auto}
.buff-icon{display:inline-flex;align-items:center;gap:4px;color:#e1cfa1;font:13px Pix}
.buff-icon i{display:inline-block;flex:0 0 20px;width:20px;height:20px;background-repeat:no-repeat;image-rendering:pixelated}
#party-bars .party-buffs{display:flex;gap:4px;margin-top:4px}#party-bars .buff-icon{font:11px Pix}#party-bars .buff-icon i{box-shadow:none}
@media(max-width:700px){:root{--dock-slot:36px;--dock-menu:26px;--dock-gap:3px;--dock-height:56px;--dock-bottom:6px}#hotbar{gap:6px;padding:6px}#hotbar .bar-group+.bar-group{padding-left:6px}#hotbar .key,#hotbar #skill-hotbar b,#hotbar .count{font-size:12px}#hotbar #menu-hotbar .slot,#hotbar #character-open{font-size:16px}#status-effects{left:0;top:calc(100% + 28px)}#party-bars{top:184px}}
@media(max-width:450px){:root{--dock-slot:28px;--dock-menu:22px;--dock-gap:2px;--dock-height:46px}#hotbar{gap:4px;padding:4px}#hotbar .bar-group+.bar-group{padding-left:4px}#hotbar img,#hotbar #skill-hotbar img{width:20px;height:20px}#hotbar .key,#hotbar #skill-hotbar b,#hotbar .count{font-size:10px}#hotbar #sndslot canvas{width:12px;height:12px}}

#party-bars .buff-icon i{display:inline-block;width:20px;height:20px;flex:0 0 20px;background-color:transparent}

/* Gelo temporário com saída clara e consumível acessível durante o efeito. */
#freeze-notice{position:absolute;left:50%;bottom:calc(var(--dock-height) + var(--dock-bottom) + 24px);transform:translateX(-50%);display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(100vw - 32px);padding:11px 15px;border:1px solid #7db6cb;box-shadow:0 0 0 3px #10101c,inset 0 0 0 2px #263347,0 4px 20px #0008;background:linear-gradient(110deg,#263347f7,#171324f7);color:#dbf3ff;pointer-events:none;z-index:65}
.freeze-crystal{font:32px/36px sans-serif;color:#9ce8ff;filter:drop-shadow(0 0 5px #45c6e855)}
#freeze-notice strong{display:block;font:20px/24px Pix,monospace;color:#d9f1ff}
#freeze-notice strong b{color:#8cdcf5;white-space:nowrap;margin-left:10px;font-weight:normal;font-variant-numeric:tabular-nums}
#freeze-notice small{display:block;font:12px/18px Txt,sans-serif;color:#b7c2d1}
.freeze-clock{height:4px;margin-top:7px;background:#0b0a15}
.freeze-clock i{display:block;height:100%;background:#8ad7ed}
#freeze-notice button{pointer-events:auto;flex:none;margin:0;padding:8px 10px;font:15px Pix,monospace;color:#e6f5ff;background:linear-gradient(#36516a,#22283d);border:1px solid #8bc7da;box-shadow:inset 0 0 0 2px #152031;min-height:38px}
#freeze-notice kbd{padding:1px 4px;margin-left:4px;background:#131523;border:1px solid #6e8a9c;font:13px Pix,monospace}
.buff-icon[data-buff=geloImune]{color:#b5e9f9;border-color:#507d91!important}
#hud:has(.game-dialog:not(.hidden),#character-menu:not(.hidden),#inv:not(.hidden)) #freeze-notice{display:none}
html.touch-device #freeze-notice{top:calc(var(--T,6px) + 88px);bottom:auto;max-width:90vw;gap:8px;padding:7px 10px;flex-wrap:wrap;justify-content:center}
html.touch-device #freeze-notice small{font-size:11px}
html.touch-device #freeze-notice strong{font-size:17px}
html.touch-device #freeze-notice button{min-height:40px}
@media(max-width:600px){#freeze-notice{flex-wrap:wrap;justify-content:center;gap:7px;padding:8px 10px}#freeze-notice small{font-size:11px}.freeze-crystal{font-size:26px}}

/* Aviso de congelado mais claro (Claude, 19/10): tecla F grande, botão pulsando, "GELO QUEBRADO!" ao terminar */
#freeze-notice{animation:frzIn .18s ease-out;transition:opacity .35s}
#freeze-notice.thawed{opacity:0;transition-delay:.75s;border-color:#9be37a}
#freeze-notice.thawed strong{color:#c8f5a8}
#freeze-notice.no-tea .freeze-info small{color:#d8c38d}
#freeze-notice button.freeze-tea{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;text-align:left;cursor:pointer;
  background:linear-gradient(#4b86a8,#22405c);border:2px solid #b8f1ff;box-shadow:0 0 0 2px #10101c,0 0 14px #45c6e899;animation:frzPulse .7s ease-in-out infinite alternate}
#freeze-notice button.freeze-tea:hover{filter:brightness(1.15)}
#freeze-notice button.freeze-tea kbd{display:grid;place-items:center;min-width:36px;height:36px;margin:0;padding:0 6px;font:26px/1 Pix,monospace;color:#1a1126;
  background:linear-gradient(#ffffff,#cfe9f5);border:2px solid #1a1126;box-shadow:0 3px 0 #6e8a9c}
#freeze-notice button.freeze-tea span b{display:block;font:16px/18px Pix,monospace;color:#ffffff;margin:0}
#freeze-notice button.freeze-tea span small{display:block;font:12px/16px Txt,sans-serif;color:#d9f1ff}
html.touch-device #freeze-notice button.freeze-tea kbd{font-size:13px;min-width:52px}
@keyframes frzPulse{from{transform:scale(1)}to{transform:scale(1.05);box-shadow:0 0 0 2px #10101c,0 0 22px #8cecff}}
@keyframes frzIn{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%)}}
/* masmorras geradas: aviso grande no meio da tela (onda, portão, segredo, fase do chefe) — client/src/dungeon-mech.js */
#dmech-banner{position:absolute;left:50%;top:31%;transform:translateX(-50%);text-align:center;pointer-events:none;z-index:40;text-shadow:0 2px 0 #0d0914,0 0 18px #000}
#dmech-banner b{display:block;font:34px Pix;letter-spacing:2px}#dmech-banner small{display:block;font:15px Txt;color:#efe3c7;margin-top:4px}
#dmech-banner.go{animation:dmech-in 2.6s ease-out forwards}
@keyframes dmech-in{0%{opacity:0;transform:translateX(-50%) scale(1.6)}10%{opacity:1;transform:translateX(-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-10px)}}
@media(max-width:700px){#dmech-banner b{font-size:22px}#dmech-banner small{font-size:12px}}
/* ESQUIVA no PC (26/10): espaço na barra de combate com a tecla, o ícone e a recarga (cinza girando + segundos) */
#hotbar #dodge-slot{position:relative;cursor:pointer}
#hotbar #dodge-slot img{width:26px;height:26px;image-rendering:pixelated}
#hotbar #dodge-slot .key{font-size:14px;letter-spacing:0}
#hotbar #dodge-slot::after{content:"";position:absolute;inset:3px;background:conic-gradient(#0b0712c8 calc(var(--cd,0)*360deg),transparent 0);pointer-events:none}
#hotbar #dodge-slot .dodge-cd{position:absolute;inset:0;display:grid;place-items:center;z-index:1;font:16px Pix,monospace;color:#d8f2ff;text-shadow:1px 1px 0 #1a1126,-1px -1px 0 #1a1126;pointer-events:none}
#hotbar #dodge-slot.nope{animation:dodge-nope .18s}
@keyframes dodge-nope{25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}