/* ==========================================================
   DigiClicks UX v1.2 — GAME HUD / SIDE NAV REFINEMENT
   Keeps existing gameplay handlers. Visual + navigation-state layer only.
   ========================================================== */

/* ---- SIDE MENUS: compact RPG controls ---- */
#sideMenuLeft, #sideMenuRight{
  position:fixed !important;
  top:24% !important;
  width:116px !important;
  padding:5px !important;
  gap:4px !important;
  box-sizing:border-box !important;
  border-radius:9px !important;
  background:linear-gradient(180deg,rgba(4,19,30,.97),rgba(3,11,19,.94)) !important;
  border:1px solid rgba(108,247,255,.16) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.36),inset 0 0 16px rgba(108,247,255,.025) !important;
  backdrop-filter:blur(9px) !important;
  -webkit-backdrop-filter:blur(9px) !important;
}
#sideMenuLeft{left:5px !important;right:auto !important;}
#sideMenuRight{right:5px !important;left:auto !important;}

#sideMenuLeft button, #sideMenuRight button{
  width:100% !important;
  height:34px !important;
  min-height:34px !important;
  box-sizing:border-box !important;
  display:grid !important;
  grid-template-columns:22px minmax(0,1fr) !important;
  align-items:center !important;
  gap:6px !important;
  padding:3px 6px !important;
  margin:0 !important;
  border:1px solid rgba(108,247,255,.11) !important;
  border-radius:6px !important;
  background:linear-gradient(145deg,rgba(13,43,58,.98),rgba(5,20,31,.98)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 2px 5px rgba(0,0,0,.28) !important;
  clip-path:polygon(0 4px,4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px)) !important;
  overflow:hidden !important;
  text-align:left !important;
}
#sideMenuLeft button:hover, #sideMenuRight button:hover{
  transform:translateY(-1px) !important;
  filter:brightness(1.1) !important;
  border-color:rgba(108,247,255,.36) !important;
}
#sideMenuLeft button:active, #sideMenuRight button:active{transform:translateY(1px) scale(.985) !important;}
.dc-side-icon{
  width:20px !important;height:20px !important;
  border:1px solid rgba(108,247,255,.14) !important;
  border-radius:5px !important;
  background:linear-gradient(145deg,rgba(23,65,82,.92),rgba(6,25,37,.96)) !important;
  box-shadow:inset 0 0 7px rgba(108,247,255,.05) !important;
}
.dc-side-icon svg{width:12px !important;height:12px !important;stroke-width:1.8 !important;}
.dc-side-label{
  min-width:0 !important;
  font-size:6.8px !important;
  line-height:1 !important;
  letter-spacing:.55px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
.dc-side-sub{display:none !important;}

/* ---- SIDE TOGGLES: remain present and clickable ---- */
#toggleMenuLeftBtn, #toggleMenuRightBtn{
  position:fixed !important;
  top:38% !important;
  width:20px !important;
  height:58px !important;
  min-width:20px !important;
  min-height:58px !important;
  padding:0 !important;
  margin:0 !important;
  transform:translateY(-50%) !important;
  display:grid !important;
  place-items:center !important;
  box-sizing:border-box !important;
  border:1px solid rgba(108,247,255,.25) !important;
  background:linear-gradient(180deg,rgba(7,31,44,.98),rgba(4,15,24,.95)) !important;
  color:#6cf7ff !important;
  box-shadow:0 7px 16px rgba(0,0,0,.32),0 0 12px rgba(108,247,255,.08) !important;
  z-index:10001 !important;
  cursor:pointer !important;
}
#toggleMenuLeftBtn{left:0 !important;right:auto !important;border-radius:0 6px 6px 0 !important;}
#toggleMenuRightBtn{right:0 !important;left:auto !important;border-radius:6px 0 0 6px !important;color:#b9aaff !important;border-color:rgba(155,131,255,.27) !important;}
#toggleMenuLeftBtn img,#toggleMenuRightBtn img{display:none !important;}
#toggleMenuLeftBtn:after,#toggleMenuRightBtn:after{
  content:'‹' !important;
  font:900 13px/1 Arial,sans-serif !important;
  text-shadow:0 0 8px currentColor !important;
  transition:transform .16s ease !important;
}
#toggleMenuLeftBtn:after{content:'›' !important;}
#toggleMenuRightBtn:after{content:'‹' !important;}
#toggleMenuLeftBtn.dc-menu-open:after{transform:rotate(180deg) !important;}
#toggleMenuRightBtn.dc-menu-open:after{transform:rotate(180deg) !important;}
#toggleMenuLeftBtn:hover,#toggleMenuRightBtn:hover{filter:brightness(1.14) !important;}

/* ---- UPPER HUD: one clean horizontal rail ---- */
#hudContainer{
  position:absolute !important;
  top:16px !important;
  right:14px !important;
  left:74px !important;
  width:auto !important;
  max-width:none !important;
  height:44px !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:6px !important;
  box-sizing:border-box !important;
  z-index:10020 !important;
  pointer-events:none !important;
}
#hudContainer > *{pointer-events:auto !important;flex:0 0 auto !important;}
#hudContainer > div{
  height:38px !important;
  min-width:70px !important;
  box-sizing:border-box !important;
  padding:3px 8px !important;
  gap:4px !important;
  border-radius:8px !important;
}
#hudContainer > div img{max-width:24px !important;max-height:24px !important;}
#hudContainer > div span{font-size:.72em !important;}

/* Daily + Hub are peers in the same rail. No absolute positioning. */
#btnDailyLogin.dc-utility-btn, #digiHubFab{
  position:relative !important;
  top:auto !important;right:auto !important;left:auto !important;bottom:auto !important;
  transform:none !important;
  width:42px !important;
  min-width:42px !important;
  max-width:42px !important;
  height:38px !important;
  min-height:38px !important;
  flex:0 0 42px !important;
  margin:0 !important;
  padding:3px !important;
  box-sizing:border-box !important;
  border-radius:7px !important;
}
#btnDailyLogin.dc-utility-btn svg,#digiHubFab .dc-hub-sigil svg{width:15px !important;height:15px !important;}
#btnDailyLogin.dc-utility-btn .dc-util-label,#digiHubFab .dc-hub-label{
  display:block !important;
  font-size:4.5px !important;
  line-height:1 !important;
  letter-spacing:.45px !important;
  margin:0 !important;
  max-width:100% !important;
  overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;
}
#digiHubFab{
  display:grid !important;
  place-items:center !important;
  gap:0 !important;
  color:var(--dc-cyan) !important;
  background:linear-gradient(145deg,rgba(9,38,52,.98),rgba(4,18,28,.98)) !important;
  border:1px solid rgba(108,247,255,.30) !important;
  box-shadow:inset 0 0 9px rgba(108,247,255,.045),0 4px 10px rgba(0,0,0,.25) !important;
}
#digiHubFab:hover{transform:translateY(-1px) !important;}
#digiHubFab .dc-hub-dot{width:4px !important;height:4px !important;top:4px !important;right:4px !important;}
#digiHubPanel{top:68px !important;right:12px !important;left:auto !important;transform:translateY(-7px) scale(.985) !important;}
#digiHubPanel.is-open{transform:translateY(0) scale(1) !important;}

/* ---- NAME EDIT ---- */
#editPetNameBtn.dc-name-edit-btn{
  right:8px !important;
  top:50% !important;
  width:26px !important;height:26px !important;
  min-width:26px !important;min-height:26px !important;
  display:grid !important;place-items:center !important;
  box-sizing:border-box !important;
  padding:0 !important;
  border-radius:6px !important;
}
#editPetNameBtn.dc-name-edit-btn svg{width:12px !important;height:12px !important;}
#petNameContainer #titulo{padding-right:40px !important;}

/* ---- MOBILE ---- */
@media(max-width:700px){
  #sideMenuLeft,#sideMenuRight{width:108px !important;top:25% !important;}
  #sideMenuLeft button,#sideMenuRight button{height:32px !important;min-height:32px !important;grid-template-columns:20px minmax(0,1fr) !important;gap:5px !important;padding:3px 5px !important;}
  .dc-side-icon{width:18px !important;height:18px !important;}
  .dc-side-icon svg{width:11px !important;height:11px !important;}
  .dc-side-label{font-size:6.2px !important;letter-spacing:.4px !important;}
  #toggleMenuLeftBtn,#toggleMenuRightBtn{width:18px !important;min-width:18px !important;height:52px !important;min-height:52px !important;}
  #hudContainer{left:64px !important;right:8px !important;top:10px !important;gap:4px !important;height:42px !important;}
  #hudContainer > div{min-width:58px !important;height:34px !important;padding:2px 6px !important;}
  #hudContainer > div img{max-width:21px !important;max-height:21px !important;}
  #hudContainer > div span{font-size:.65em !important;}
  #btnDailyLogin.dc-utility-btn,#digiHubFab{width:38px !important;min-width:38px !important;height:34px !important;min-height:34px !important;flex-basis:38px !important;}
  #digiHubPanel{top:58px !important;right:8px !important;width:calc(100vw - 16px) !important;}
}

@media(max-width:420px){
  #hudContainer{left:58px !important;right:5px !important;gap:3px !important;}
  #hudContainer > div{min-width:50px !important;padding:2px 4px !important;}
  #hudContainer > div img{max-width:18px !important;max-height:18px !important;}
  #hudContainer > div span{font-size:.58em !important;}
  #btnDailyLogin.dc-utility-btn,#digiHubFab{width:34px !important;min-width:34px !important;flex-basis:34px !important;}
}