/* =========================================================
   MEU BAIRRO — LAYOUT 1:1 COM A REFERÊNCIA
   ========================================================= */
html,body{width:100%;height:100%;margin:0!important;overflow:hidden!important;background:#02070d!important}
body{font-family:Rajdhani,system-ui,sans-serif}

.topbar{min-height:64px!important;box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:space-between!important;background:linear-gradient(180deg,#061722 0%,#020b13 100%)!important;border-bottom:2px solid #0c5277!important;box-shadow:0 3px 18px #0008!important}
.logo{display:flex!important;align-items:center!important;gap:12px!important;color:#f3f7f7!important;font-family:Oxanium,Rajdhani,sans-serif!important;font-weight:900!important;letter-spacing:.08em!important;font-size:22px!important;text-transform:uppercase}
.logo-dot{width:15px;height:15px;border-radius:50%;background:#20ff4f;box-shadow:0 0 10px #20ff4f55;display:inline-block}
.logo-house{font-size:24px;line-height:1}
.logo-title{white-space:nowrap}
.top-actions{display:flex!important;align-items:center!important}
.top-actions button{border:1px solid #15547b!important;border-radius:13px!important;background:linear-gradient(180deg,#102b3d,#07141f)!important;color:#f2f5f3!important;font:800 16px Rajdhani,system-ui,sans-serif;box-shadow:inset 0 1px #ffffff0d,0 2px 6px #0005!important;white-space:nowrap}
.top-actions button:hover{border-color:#20a9e8!important;background:#0d2636!important}
.top-actions #admin{min-width:110px}
.top-actions #logout{min-width:96px}

.game{display:block!important;margin:0!important;padding:0!important;overflow:hidden!important;background:#02070d!important}
.stage,#stage,.game>.stage{position:absolute!important;inset:0!important;margin:0!important;padding:0!important;overflow:hidden!important;background:#02070d!important;border:0!important;border-radius:0;box-shadow:none!important}
#map{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important;image-rendering:pixelated!important;image-rendering:crisp-edges!important}

/* Sidebar permanece sobreposta, mas não reduz o mapa. */
#sideBar,.game>.side{position:absolute!important;left:0!important;top:0!important;bottom:0!important;width:242px!important;min-width:242px!important;height:100%!important;z-index:7000!important;background:linear-gradient(180deg,#06131ef7,#02070df7)!important;border-right:1px solid #15547b66!important;box-shadow:10px 0 30px #0008!important;transition:width .22s ease,min-width .22s ease!important}
#sideBar .side-content{width:242px!important;height:100%!important;padding:16px!important;box-sizing:border-box!important;overflow:auto}
#sideToggle{position:absolute!important;right:-17px!important;top:50%!important;transform:translateY(-50%)!important;width:35px!important;height:56px!important;border:1px solid #15547b!important;border-left:0!important;border-radius:0 12px 12px 0!important;background:#06131ef7!important;color:#dcecf1!important}
.game.side-collapsed #sideBar,.game.side-collapsed>.side{width:0!important;min-width:0!important;border:0;box-shadow:none!important;background:transparent!important}
.game.side-collapsed #sideBar .side-content{opacity:0!important;pointer-events:none!important}
.game.side-collapsed #sideToggle{right:auto!important;left:10px!important;width:38px!important;height:38px!important;border:1px solid #15547b!important;border-radius:50%!important}

/* HUD superior */
.stage>.hud{position:absolute!important;width:auto!important;display:flex!important;justify-content:space-between!important;align-items:flex-start!important;pointer-events:none!important}
.stage>.hud .card{pointer-events:auto!important;margin:0!important;background:#02101ae8!important;border:1px solid #15547b!important;border-radius:15px!important;box-shadow:0 8px 22px #0009!important;color:#f2f5f3!important}
.hud-neighborhood{padding:10px 14px!important;display:flex!important;align-items:center!important;gap:13px!important;box-sizing:border-box}
.hud-icon{display:flex;align-items:center;justify-content:center;border-radius:12px;background:#071c2a;border:1px solid #15547b}
.hud-copy{display:flex;flex-direction:column;gap:3px}
.hud-copy strong{font:900 20px Rajdhani,system-ui,sans-serif;line-height:1}
.hud-copy small{font:700 13px Rajdhani,system-ui,sans-serif;color:#d7e5e9}
.hud-copy small i{width:8px;height:8px;border-radius:50%;display:inline-block;background:#20ff4f;box-shadow:0 0 8px #20ff4f99}
.hud-online{padding:0 13px!important;display:flex!important;align-items:center!important;gap:9px!important;box-sizing:border-box}
.online-icon{width:31px;height:31px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#f2f5f3;color:#07121c;font-size:12px}
.hud-online strong{font:900 18px Rajdhani,system-ui,sans-serif}
.online-arrow{margin-left:auto;font-size:32px;color:#c9dbe1;line-height:1}

/* Placas desenhadas pelo canvas ficam no mesmo peso visual */
.stage .bubble{z-index:8000!important;max-width:230px!important;padding:7px 10px!important;border:2px solid #C9932B!important;border-radius:11px!important;background:#f2f5f3!important;color:#07121c!important;font:900 13px Rajdhani,system-ui,sans-serif;box-shadow:0 6px 18px #0009!important}
.interaction,.interaction-menu,.profile-peek{z-index:8500!important}

/* =========================================================
   BARRA INFERIOR DA REFERÊNCIA
   ========================================================= */



.chat-input-bar{display:flex;align-items:center;gap:10px;padding:7px 11px 7px 17px;border:1px solid #15547b;background:#03131feF;box-shadow:0 8px 24px #0009}
.chat-input-bar.hidden{display:flex!important}
.chat-prefix{font-size:21px;opacity:.95}
.chat-input-bar #chatInput{height:48px;flex:1;min-width:0;padding:0;border:0;outline:0;background:transparent;color:#f2f5f3;font:600 17px Rajdhani,system-ui,sans-serif}
.chat-input-bar #chatInput::placeholder{opacity:1}
.chat-input-bar #send{width:38px;height:38px;min-width:38px;padding:0;border:0;border-radius:50%;background:transparent;color:#e4edf0;font-size:25px;line-height:1}
.chat-input-bar #send:hover{background:#ffffff12}
.chat-help{display:none}


.bottom-item{padding:8px 4px 7px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:1px solid #15547b;background:linear-gradient(180deg,#071b29f5,#03111cf5);color:#d9e6ea;box-shadow:0 7px 20px #0008;font:700 13px Rajdhani,system-ui,sans-serif}
.bottom-item.active{box-shadow:0 0 0 1px #11a9ff55,0 7px 22px #0009;background:linear-gradient(180deg,#0b2638f7,#061520f7)}
.bottom-icon{font-size:24px;line-height:1}
.bottom-item span:last-child{font-weight:800}

.clock-card{display:flex;align-items:center;gap:11px;padding:8px 13px;border:1px solid #15547b;background:#03131feF;box-shadow:0 8px 24px #0009;color:#f2f5f3}
.clock-sun{font-size:31px;color:#ffd83d;line-height:1}
.clock-card div{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto}
.clock-card strong{font:900 17px Rajdhani,system-ui,sans-serif}
.clock-card small{font:600 14px Rajdhani,system-ui,sans-serif;color:#aebdc3}

/* Esconde o antigo dock que criava a coluna/painel de chat. */


@media(max-width:1100px){
  .chat-input-bar{width:390px!important}
  .bottom-item{width:75px!important}
  .clock-card{right:10px!important;width:150px!important}
}
@media(max-width:800px){
  .topbar{padding:0 10px!important}
  .top-actions button{min-width:42px!important;width:42px!important;padding:0!important;font-size:0!important}
  .top-actions button .ic{display:none!important}
  .top-actions button:first-child:before{content:'';display:inline-block;width:20px;height:20px;background:url('../assets/icons/home.png') center/contain no-repeat;vertical-align:middle;image-rendering:pixelated}
  .top-actions button:nth-child(2):before{content:'';display:inline-block;width:20px;height:20px;background:url('../assets/icons/profile.png') center/contain no-repeat;vertical-align:middle;image-rendering:pixelated}
  .top-actions #admin:before{content:'';display:inline-block;width:20px;height:20px;background:url('../assets/icons/settings.png') center/contain no-repeat;vertical-align:middle;image-rendering:pixelated}
  .top-actions #logout:before{content:'↪';font-size:19px!important}
  .logo{font-size:17px!important}
  .logo-title{font-size:17px!important}
  .hud-neighborhood{width:245px!important}
  .hud-online{width:150px!important}
  .chat-input-bar{left:9px!important;width:calc(100% - 18px)!important}
  .bottom-menu{display:none!important}
  .clock-card{display:none!important}
}

/* =========================================================
   AJUSTE FINAL — ESPECIFICAÇÃO JSON DA REFERÊNCIA
   ========================================================= */
:root{--mb-bg:#02070d;--mb-panel:#06131e;--mb-panel-2:#071b29;--mb-blue:#15547b;--mb-blue-hi:#11a9ff;--mb-green:#20ff4f;--mb-white:#f2f5f3;--mb-muted:#9eafb7}

/* Topo: exatamente uma única faixa, sem elementos flutuando por cima dela. */
.topbar{position:fixed!important;inset:0 0 auto 0;width:100%;height:64px!important;padding:0 24px!important;z-index:10000!important}
.top-actions{gap:9px!important}
.top-actions button{height:44px!important;min-width:0!important;padding:0 17px!important;font-size:15px!important;letter-spacing:.01em}
#settings{display:inline-flex}

/* A área jogável começa exatamente abaixo do topo. */
.game{position:fixed!important;left:0;right:0;top:64px;bottom:0;width:auto!important;height:auto!important}
.stage,#stage,.game>.stage{top:0!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;height:100%!important}

/* HUD de referência: dois painéis, sem barra lateral. */
.stage>.hud{top:18px!important;left:17px!important;right:17px!important}
.hud-neighborhood{width:297px!important;height:76px!important;border-radius:15px}
.hud-icon{width:50px!important;height:50px!important;font-size:24px!important}
.hud-online{width:198px!important;height:62px!important;border-radius:15px}
.hud-online strong{color:var(--mb-green)!important}

/* Placas do mapa ficam acima do mapa, mas abaixo do HUD. */
.stage canvas{z-index:1}
.stage>.hud{z-index:100!important}
.stage>.interaction,
.stage>.interaction-menu,
.stage>.profile-peek{z-index:300}
.bubble{z-index:400}

/* Sidebar: retrátil, sobreposta, sem empurrar o mapa. */
#sideBar{z-index:500!important}
#sideToggle{z-index:510!important}

/* Barra inferior exatamente em três regiões: chat / menu / relógio. */

.chat-input-bar{border-radius:14px!important}

.bottom-item{width:91px!important;height:76px!important;border-radius:14px!important}
.bottom-item.active{border-color:var(--mb-blue-hi)!important}
.clock-card{border-radius:14px!important}

/* O campo é sempre visível; não usar o antigo chat-dock sobre o mapa. */
#chatDock,.chat-dock,.game>.chatbox{display:none}
#chatInputBar{display:flex}

/* Texto e controles com leitura forte, como na referência. */
.chat-input-bar #chatInput::placeholder{color:#8d9ba3!important}
.bottom-item span:last-child{font-size:13px}

@media(max-width:1200px){
  .topbar{padding:0 14px!important}
  .top-actions button{padding:0 11px!important;font-size:14px!important}
  .chat-input-bar{width:400px!important}
  .bottom-item{width:78px!important}
  .clock-card{width:150px!important}
}

@media(max-width:900px){
  .top-actions button{font-size:0!important;width:42px!important;padding:0!important}
  .top-actions button::first-letter{font-size:18px!important}
  .chat-input-bar{width:calc(100vw - 18px)!important;left:9px!important}
  .bottom-menu{display:none!important}
  .clock-card{display:none!important}
  .hud-neighborhood{width:245px!important}
  .hud-online{width:150px!important}
}

/* =========================================================
   CORREÇÃO FINAL — CHAT NÃO PODE COBRIR O MENU INFERIOR
   ========================================================= */
.bottom-ui{overflow:visible;z-index:9000!important}

/* O chat ocupa somente a faixa esquerda. */
.chat-input-bar{left:17px!important;bottom:0!important;z-index:3}

/*
   O menu começa depois do chat, em vez de ficar centralizado
   sobre ele. Em 1536px isso coloca o primeiro botão em ~525px,
   exatamente como na referência.
*/
.bottom-menu{left:calc(min(488px,32vw) + 37px)!important;bottom:0!important;z-index:4;white-space:nowrap}

/* Relógio fica independente no canto direito. */
.clock-card{right:17px!important;bottom:0!important;z-index:5}

/* Nunca permitir que um item da navegação seja coberto pelo chat. */
.bottom-item{position:relative;z-index:6}

@media(max-width:1200px){
  .chat-input-bar{
    width:32vw!important;
    min-width:330px!important;
  }
  .bottom-menu{
    left:calc(32vw + 37px)!important;
  }
  .bottom-item{
    width:75px!important;
  }
  .clock-card{
    width:145px!important;
  }
}

/* Quando já não houver espaço físico para as três regiões,
   o menu passa para uma linha própria em vez de sobrepor o chat. */
@media(max-width:1000px){
  .bottom-ui{
    height:auto!important;
    min-height:140px!important;
    bottom:8px!important;
  }
  .chat-input-bar{
    left:9px!important;
    bottom:78px!important;
    width:calc(100% - 18px)!important;
    min-width:0!important;
  }
  .bottom-menu{
    left:9px!important;
    right:9px!important;
    bottom:0!important;
    transform:none!important;
    justify-content:center!important;
  }
  .clock-card{
    display:none!important;
  }
}

@media(max-width:650px){
  .bottom-ui{
    min-height:112px!important;
  }
  .chat-input-bar{
    bottom:64px!important;
    height:48px!important;
  }
  .chat-input-bar #chatInput{
    height:38px!important;
    font-size:15px!important;
  }
  .bottom-menu{
    height:58px!important;
    gap:3px!important;
  }
  .bottom-item{
    width:calc((100vw - 27px)/6)!important;
    max-width:72px!important;
    height:58px!important;
    padding:4px 2px!important;
  }
  .bottom-icon{
    font-size:19px!important;
  }
  .bottom-item span:last-child{
    font-size:10px!important;
  }
}


/* =========================================================
   AJUSTE DEFINITIVO — BARRA INFERIOR SEM SOBREPOSIÇÃO
   ========================================================= */
.bottom-ui{position:absolute!important;left:17px!important;right:17px!important;bottom:9px!important;height:76px!important;display:grid!important;grid-template-columns:488px minmax(0,1fr) 168px;align-items:stretch;column-gap:16px;box-sizing:border-box;pointer-events:none!important}
.bottom-ui>*{pointer-events:auto!important}
.chat-input-bar{position:static!important;width:100%!important;height:64px!important;align-self:end;box-sizing:border-box!important}
.bottom-menu{position:static!important;transform:none!important;width:100%;height:76px!important;display:flex!important;justify-content:center;align-items:stretch!important;gap:4px!important;box-sizing:border-box}
.clock-card{position:static!important;width:100%!important;height:64px!important;align-self:end;box-sizing:border-box!important}
@media(max-width:1200px){
  .bottom-ui{
    left:10px!important;right:10px!important;
    grid-template-columns:390px minmax(0,1fr) 150px!important;
    column-gap:10px!important;
  }
  .chat-input-bar{width:100%!important}
  .bottom-item{width:75px!important}
}
@media(max-width:900px){
  .bottom-ui{
    left:9px!important;right:9px!important;
    height:auto!important;
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
  }
  .chat-input-bar{order:1!important;width:100%!important;height:58px!important}
  .bottom-menu{order:2!important;display:none!important}
  .clock-card{order:3!important;display:none!important}
}


/* =========================================================
   V25 — BARRA INFERIOR DEFINITIVA
   Nunca posicionar o campo de conversa sobre o mapa.
   Estrutura: CHAT 34% | MENU CENTRO | DATA/HORA
   ========================================================= */

#bottomUI.bottom-ui{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;height:82px;min-height:82px;box-sizing:border-box;display:grid;grid-template-columns:minmax(300px,34%) minmax(0,1fr) 150px;align-items:center;gap:14px;padding:9px 14px;margin:0;background:rgba(6,17,27,.97);border-top:1px solid rgba(18,65,92,.85);box-shadow:0 -8px 25px rgba(0,0,0,.35);z-index:99999;pointer-events:none}

#bottomUI.bottom-ui > *{pointer-events:auto}

/* CHAT: SEMPRE à esquerda da barra inferior */
#bottomUI #chatInputBar.chat-input-bar{position:static;left:auto;right:auto;top:auto;bottom:auto;transform:none;width:100%;height:64px;min-height:64px;max-width:none;box-sizing:border-box;margin:0;display:flex;align-items:center;gap:9px;padding:7px 8px 7px 13px;border-radius:14px;background:#071722;border:2px solid #075080;box-shadow:inset 0 0 12px rgba(0,80,130,.08);backdrop-filter:none}

#bottomUI #chatInputBar #chatInput{flex:1 1 auto;width:auto;min-width:0;height:38px;padding:4px 2px;background:transparent;border:0;outline:0;box-shadow:none;color:#fff;font-size:14px}

#bottomUI #chatInputBar #chatInput::placeholder{color:#aab8c5}

#bottomUI #chatInputBar .chat-prefix{flex:0 0 28px;width:28px;font-size:28px;line-height:1}

#bottomUI #chatInputBar #send{flex:0 0 auto;min-width:38px;width:38px;min-height:38px;height:38px;padding:0;border-radius:9px}

/* MENU: CENTRO, nunca sobre o chat */
#bottomUI .bottom-menu{position:static;left:auto;right:auto;top:auto;bottom:auto;transform:none;width:100%;height:64px;min-width:0;display:flex;align-items:stretch;justify-content:center;gap:8px;box-sizing:border-box;margin:0;padding:0;white-space:normal;overflow:hidden}

#bottomUI .bottom-item{position:static;width:88px;min-width:88px;max-width:88px;height:64px;min-height:64px;flex:0 0 88px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:4px 2px;background:#081a27;border:1px solid #12415c;border-radius:12px;color:#e4eaf0}

#bottomUI .bottom-item.active{border-color:#1685c5;box-shadow:
    0 0 8px rgba(22,133,197,.35),
    inset 0 0 10px rgba(22,133,197,.08)}

/* RELÓGIO: sempre à direita */
#bottomUI .clock-card{position:static;left:auto;right:auto;top:auto;bottom:auto;transform:none;width:150px;min-width:150px;max-width:150px;height:64px;min-height:64px;box-sizing:border-box;margin:0}

/* Não permitir que o painel antigo de chat reapareça */
.game > .chatbox,
.game > .chat-dock,
#chatDock{display:none !important}

/* =========================================================
   RESPONSIVO
   ========================================================= */

@media(max-width:1200px){
  #bottomUI.bottom-ui{
    grid-template-columns:minmax(280px,32%) minmax(0,1fr) 145px !important;
    gap:9px !important;
    padding-left:10px !important;
    padding-right:10px !important;
  }

  #bottomUI .bottom-menu{
    gap:4px !important;
  }

  #bottomUI .bottom-item{
    width:75px !important;
    min-width:75px !important;
    max-width:75px !important;
    flex-basis:75px !important;
  }

  #bottomUI .clock-card{
    width:145px !important;
    min-width:145px !important;
    max-width:145px !important;
  }
}

@media(max-width:900px){
  #bottomUI.bottom-ui{
    height:76px !important;
    min-height:76px !important;
    grid-template-columns:minmax(260px,34%) minmax(0,1fr) 0 !important;
    gap:7px !important;
    padding:6px 8px !important;
  }

  #bottomUI .clock-card{
    display:none !important;
  }

  #bottomUI .bottom-menu{
    overflow-x:auto !important;
    overflow-y:hidden !important;
    justify-content:flex-start !important;
    scrollbar-width:none !important;
  }

  #bottomUI .bottom-menu::-webkit-scrollbar{
    display:none !important;
  }

  #bottomUI .bottom-item{
    flex:0 0 70px !important;
    width:70px !important;
    min-width:70px !important;
    max-width:70px !important;
    height:64px !important;
  }
}

@media(max-width:600px){
  #bottomUI.bottom-ui{
    height:72px !important;
    min-height:72px !important;
    grid-template-columns:minmax(0,42%) minmax(0,58%) !important;
    gap:6px !important;
    padding:5px 7px !important;
  }

  #bottomUI #chatInputBar.chat-input-bar{
    height:60px !important;
    min-height:60px !important;
    padding-left:8px !important;
  }

  #bottomUI #chatInputBar .chat-prefix{
    font-size:22px !important;
    flex-basis:23px !important;
    width:23px !important;
  }

  #bottomUI .bottom-menu{
    height:60px !important;
  }

  #bottomUI .bottom-item{
    flex-basis:62px !important;
    width:62px !important;
    min-width:62px !important;
    max-width:62px !important;
    height:60px !important;
  }
}

/* =========================================================
   RESTAURAÇÃO — barra inferior no layout original:
   chat à esquerda, menu centralizado, relógio à direita.
   As camadas "correção final" / "ajuste definitivo" e a regra
   #chatInputBar do jogo-final.css deslocaram o menu para a
   esquerda e centralizaram o chat, abrindo um vão abaixo
   dele por onde os rótulos do mapa ("SAÍDA") vazavam.
   ========================================================= */
@media(min-width:1001px){
  #bottomUI{
    left:0!important;
    right:0!important;
    bottom:9px!important;
    height:76px!important;
    min-height:0!important;
    display:block!important;
    grid-template-columns:none!important;
    column-gap:0!important;
    gap:0!important;
    padding:0!important;
    overflow:visible!important;
    z-index:9000!important;
    pointer-events:none!important;
  }
  #bottomUI>*{pointer-events:auto!important}
  #bottomUI #chatInputBar.chat-input-bar{
    position:absolute!important;
    left:17px!important;
    right:auto!important;
    top:auto!important;
    bottom:0!important;
    transform:none!important;
    width:488px!important;
    min-width:0!important;
    max-width:none!important;
    height:64px!important;
    min-height:0!important;
    margin:0!important;
    padding:7px 8px 7px 13px!important;
    align-self:auto!important;
    justify-self:auto!important;
    z-index:6000!important;
  }
  #bottomUI .bottom-menu{
    position:absolute!important;
    left:50%!important;
    right:auto!important;
    top:auto!important;
    bottom:0!important;
    transform:translateX(-50%)!important;
    display:flex!important;
    justify-content:center!important;
    align-items:stretch!important;
    gap:4px!important;
    width:auto!important;
    max-width:calc(100% - 36px)!important;
    height:76px!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
    overflow:visible!important;
    z-index:4!important;
    white-space:nowrap!important;
    justify-self:auto!important;
  }
  #bottomUI .bottom-item{
    position:relative!important;
    flex:0 0 auto!important;
    width:91px!important;
    min-width:91px!important;
    max-width:91px!important;
    height:76px!important;
    min-height:76px!important;
    z-index:6!important;
  }
  #bottomUI .clock-card{
    position:absolute!important;
    left:auto!important;
    right:17px!important;
    top:auto!important;
    bottom:0!important;
    width:168px!important;
    min-width:0!important;
    max-width:none!important;
    height:64px!important;
    min-height:0!important;
    margin:0!important;
    align-self:auto!important;
    justify-self:auto!important;
    box-sizing:border-box!important;
  }
}

/* Em telas menores o layout empilhado já previsto continua
   valendo; aqui só se neutraliza a regra #chatInputBar do
   jogo-final.css, que centralizava o chat por cima do menu. */
@media(max-width:1000px){
  #bottomUI #chatInputBar.chat-input-bar{
    position:absolute!important;
    left:9px!important;
    right:9px!important;
    top:auto!important;
    bottom:78px!important;
    transform:none!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:64px!important;
    min-height:0!important;
    margin:0!important;
    z-index:6000!important;
  }
}
@media(max-width:650px){
  #bottomUI #chatInputBar.chat-input-bar{
    bottom:64px!important;
    height:48px!important;
  }
}


/* =========================================================
   HUD V6 DELICADA — integrada ao jogo.html em 02/10/2026
   Mantém a lógica do jogo e usa assets/icons/*.png via icons.css
   ========================================================= */
@media(min-width:901px){
  .topbar{
    height:58px!important;min-height:58px!important;
    padding:0 22px!important;
    background:rgba(3,22,35,.96)!important;
    border-bottom:1px solid #0b91cf!important;
    box-shadow:0 3px 12px #0006,0 0 8px #00bfff22!important
  }
  .game{top:58px!important}
  .logo{gap:10px!important;font-size:20px!important}
  .logo-dot{width:12px!important;height:12px!important}
  .logo-house{font-size:22px!important}
  .top-actions{gap:7px!important}
  .top-actions button{
    height:38px!important;min-height:38px!important;
    padding:0 14px!important;border-width:1px!important;
    border-radius:11px!important;font-size:14px!important;
    box-shadow:0 2px 7px #0004!important
  }

  /* A caixa antiga "Bairro aberto" sai da HUD nova. */
  .stage>.hud{display:none!important}

  /* Sem faixa grossa cobrindo toda a parte inferior. */
  #bottomUI.bottom-ui{
    position:fixed!important;left:18px!important;right:18px!important;
    bottom:10px!important;top:auto!important;width:auto!important;
    height:58px!important;min-height:58px!important;
    display:grid!important;
    grid-template-columns:minmax(360px,34vw) minmax(420px,1fr) minmax(260px,330px)!important;
    align-items:end!important;gap:12px!important;padding:0!important;
    background:transparent!important;border:0!important;box-shadow:none!important;
    z-index:99999!important;pointer-events:none!important
  }
  #bottomUI.bottom-ui>*{pointer-events:auto!important}

  #bottomUI #chatInputBar.chat-input-bar{
    position:static!important;transform:none!important;width:100%!important;
    height:54px!important;min-height:54px!important;margin:0!important;
    padding:5px 7px 5px 9px!important;gap:7px!important;
    border:1px solid #078bc7!important;border-radius:13px!important;
    background:rgba(3,25,40,.95)!important;
    box-shadow:0 5px 14px #0006,0 0 7px #00bfff22!important
  }
  #bottomUI #chatInputBar .chat-prefix{width:25px!important;flex-basis:25px!important;font-size:22px!important}
  #bottomUI #chatInputBar #chatInput{height:36px!important;font-size:14px!important}
  #bottomUI #chatInputBar #send,
  #bottomUI #chatInputBar #micBtn{
    width:36px!important;min-width:36px!important;height:36px!important;min-height:36px!important;
    border-radius:9px!important
  }

  #bottomUI .bottom-menu{
    position:static!important;transform:none!important;width:100%!important;
    height:58px!important;display:flex!important;justify-content:center!important;
    align-items:stretch!important;gap:3px!important;overflow:hidden!important
  }
  /* Inventário continua acessível pela lateral; HUD principal fica com 5 itens. */
  #bottomUI #bottomInventory{display:none!important}
  #bottomUI .bottom-item{
    position:relative!important;flex:1 1 0!important;width:auto!important;
    min-width:66px!important;max-width:92px!important;height:58px!important;min-height:58px!important;
    padding:3px 3px!important;gap:2px!important;
    border:1px solid #0d5478!important;border-radius:11px!important;
    background:rgba(3,25,40,.95)!important;
    box-shadow:0 4px 12px #0005!important
  }
  #bottomUI .bottom-item.active{border-color:#09b9ff!important;box-shadow:0 0 7px #00bfff33!important}
  #bottomUI .bottom-icon{font-size:21px!important}
  #bottomUI .bottom-item span:last-child{font-size:10px!important}

  #bottomUI .clock-card{
    position:static!important;width:100%!important;min-width:0!important;max-width:none!important;
    height:54px!important;min-height:54px!important;margin:0!important;
    padding:5px 10px!important;gap:9px!important;
    border:1px solid #078bc7!important;border-radius:13px!important;
    background:rgba(3,25,40,.95)!important;
    box-shadow:0 5px 14px #0006,0 0 7px #00bfff22!important
  }
  .clock-sun{font-size:27px!important}
  .clock-copy{min-width:70px!important}
  .clock-card strong{font-size:17px!important}
  .clock-card small{font-size:11px!important}
  .clock-online{
    margin-left:auto;padding-left:9px;border-left:1px solid #15547b;
    display:flex;align-items:center;gap:5px;white-space:nowrap;color:#eaf7fb
  }
  .clock-online .ic{font-size:15px}
  .clock-online strong{font:800 11px Rajdhani,system-ui,sans-serif!important}
}

/* Largura intermediária: chat sobe antes de tocar o menu. */
@media(min-width:901px) and (max-width:1180px){
  #bottomUI.bottom-ui{
    height:118px!important;
    grid-template-columns:minmax(0,1fr) minmax(390px,520px) 250px!important
  }
  #bottomUI #chatInputBar.chat-input-bar{
    position:absolute!important;left:50%!important;bottom:64px!important;
    width:min(440px,calc(100vw - 36px))!important;transform:translateX(-50%)!important
  }
}

/* Mobile dedicado: chat em cima e navegação embaixo, sem sobreposição. */
@media(max-width:900px){
  .topbar{height:52px!important;min-height:52px!important}
  .game{top:52px!important}
  .stage>.hud{display:none!important}
  #bottomUI.bottom-ui{
    position:fixed!important;left:7px!important;right:7px!important;bottom:7px!important;
    width:auto!important;height:112px!important;min-height:112px!important;
    display:flex!important;flex-direction:column!important;gap:5px!important;
    padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important
  }
  #bottomUI #chatInputBar.chat-input-bar{
    position:static!important;width:100%!important;height:50px!important;min-height:50px!important;
    transform:none!important;border-width:1px!important
  }
  #bottomUI .bottom-menu{
    display:flex!important;width:100%!important;height:57px!important;gap:3px!important;
    overflow:hidden!important;justify-content:stretch!important
  }
  #bottomUI #bottomInventory{display:none!important}
  #bottomUI .bottom-item{
    flex:1 1 20%!important;width:auto!important;min-width:0!important;max-width:none!important;
    height:57px!important;min-height:57px!important;padding:3px 1px!important
  }
  #bottomUI .bottom-icon{font-size:19px!important}
  #bottomUI .bottom-item span:last-child{font-size:9px!important}
  #bottomUI .clock-card{display:none!important}
}


/* HUD V7 — posições invertidas + ícones evidentes + ciclo sol/lua */
@media(min-width:901px){
  #bottomUI.bottom-ui{
    grid-template-columns:minmax(430px,1fr) minmax(360px,34vw) minmax(260px,330px)!important;
  }
  /* MENU agora ocupa a posição esquerda que era do chat */
  #bottomUI .bottom-menu{grid-column:1!important;grid-row:1!important;justify-content:flex-start!important}
  /* CHAT agora ocupa a posição central que era do menu */
  #bottomUI #chatInputBar.chat-input-bar{grid-column:2!important;grid-row:1!important}
  #bottomUI .clock-card{grid-column:3!important;grid-row:1!important}

  /* ícones maiores e texto secundário: o desenho vira o foco */
  #bottomUI .bottom-item{
    max-width:86px!important;min-width:72px!important;
    gap:1px!important;padding:2px 4px!important
  }
  #bottomUI .bottom-icon{font-size:29px!important;line-height:1!important}
  #bottomUI .bottom-icon .ic{width:1.15em!important;height:1.15em!important}
  #bottomUI .bottom-item>span:last-child{font-size:9px!important;opacity:.72!important}

  /* seta de enviar menor */
  #bottomUI #send .ic{width:18px!important;height:18px!important}
  #bottomUI #chatInputBar #send{
    width:30px!important;min-width:30px!important;height:30px!important;min-height:30px!important;
    padding:5px!important;border-radius:8px!important
  }

  /* sol diurno laranja / lua noturna */
  #clockSky.clock-sun{font-size:27px!important;text-shadow:0 0 8px currentColor}
  #clockSky.is-day{color:#ff9d22!important}
  #clockSky.is-night{color:#e9f2ff!important}
}
@media(min-width:901px) and (max-width:1180px){
  #bottomUI.bottom-ui{
    height:118px!important;
    grid-template-columns:minmax(390px,1fr) minmax(350px,440px) 230px!important
  }
  #bottomUI #chatInputBar.chat-input-bar{
    position:static!important;left:auto!important;bottom:auto!important;
    width:100%!important;transform:none!important
  }
}
@media(max-width:900px){
  /* mobile: conversa acima, menu abaixo; sem cruzar elementos */
  #bottomUI #chatInputBar.chat-input-bar{order:1!important}
  #bottomUI .bottom-menu{order:2!important}
  #bottomUI .bottom-icon{font-size:25px!important}
  #bottomUI .bottom-item>span:last-child{font-size:8px!important;opacity:.72!important}
  #bottomUI #send .ic{width:17px!important;height:17px!important}
  #bottomUI #chatInputBar #send{width:30px!important;min-width:30px!important;height:30px!important;min-height:30px!important}
}


/* HUD V8 — ícones principais maiores */
@media(min-width:901px){
  #bottomUI .bottom-icon{font-size:36px!important;line-height:1!important}
  #bottomUI .bottom-icon .ic{width:1.18em!important;height:1.18em!important}
  #bottomUI .bottom-item>span:last-child{font-size:8px!important;opacity:.68!important}
}
@media(max-width:900px){
  #bottomUI .bottom-icon{font-size:31px!important;line-height:1!important}
  #bottomUI .bottom-icon .ic{width:1.14em!important;height:1.14em!important}
}


/* HUD V9 — ícones realmente grandes dentro dos botões */
@media(min-width:901px){
  #bottomUI .bottom-item{
    justify-content:center!important;
    gap:0!important;
    padding:2px!important;
  }
  #bottomUI .bottom-icon{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:44px!important;
    height:40px!important;
    font-size:44px!important;
    line-height:1!important;
  }
  #bottomUI .bottom-icon .ic{
    display:block!important;
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
    background-size:contain!important;
  }
  #bottomUI .bottom-item>span:last-child{
    margin-top:-1px!important;
    font-size:8px!important;
    line-height:10px!important;
  }
}
@media(max-width:900px){
  #bottomUI .bottom-icon{
    display:flex!important;align-items:center!important;justify-content:center!important;
    width:38px!important;height:35px!important
  }
  #bottomUI .bottom-icon .ic{
    width:33px!important;height:33px!important;min-width:33px!important;min-height:33px!important
  }
}


/* HUD V10 — corrige Loja e botão enviar */
@media(min-width:901px){
  /* sprite da loja segue exatamente a mesma caixa dos demais */
  #bottomUI #bottomShop .bottom-icon,
  #bottomUI #bottomShop .bottom-icon .ic{
    transform:none!important;
    margin:0!important;
  }

  /* enviar: botão e sprite perfeitamente centralizados */
  #bottomUI #chatInputBar #send{
    flex:0 0 34px!important;
    width:34px!important;min-width:34px!important;
    height:34px!important;min-height:34px!important;
    padding:0!important;margin:0!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    align-self:center!important;
    border:1px solid #0b6d99!important;
    border-radius:8px!important;
    line-height:0!important;
    overflow:hidden!important;
  }
  #bottomUI #chatInputBar #send .ic{
    display:block!important;
    width:22px!important;height:22px!important;
    min-width:22px!important;min-height:22px!important;
    margin:0!important;padding:0!important;
    vertical-align:middle!important;
    background-position:center!important;
    background-size:contain!important;
    transform:none!important;
  }
}