/* DigiClicks UX v1.4 — precise game HUD / menu controls / no emoji iconography */

/* ---------- SIDE MENUS ---------- */
#sideMenuLeft,#sideMenuRight{
  width:150px !important;
  padding:6px !important;
  gap:6px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  overflow:visible !important;
}
#sideMenuLeft{left:38px !important;right:auto !important;}
#sideMenuRight{right:38px !important;left:auto !important;}
#sideMenuLeft button,#sideMenuRight button{
  width:100% !important;
  height:46px !important;
  min-height:46px !important;
  display:grid !important;
  grid-template-columns:42px minmax(0,1fr) !important;
  align-items:center !important;
  gap:9px !important;
  padding:4px 9px !important;
  margin:0 !important;
  box-sizing:border-box !important;
  position:relative !important;
  overflow:hidden !important;
  border:1px solid rgba(108,247,255,.26) !important;
  background:linear-gradient(145deg,rgba(7,34,49,.80),rgba(2,14,24,.76)) !important;
  backdrop-filter:blur(11px) saturate(135%) !important;
  -webkit-backdrop-filter:blur(11px) saturate(135%) !important;
  border-radius:9px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 3px 10px rgba(0,0,0,.28),0 0 12px rgba(108,247,255,.055) !important;
  clip-path:polygon(0 6px,6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px)) !important;
}
#sideMenuRight button{border-color:rgba(161,140,255,.28) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 3px 10px rgba(0,0,0,.28),0 0 12px rgba(161,140,255,.06) !important;}
#sideMenuLeft button::after,#sideMenuRight button::after{
  content:'' !important;
  position:absolute !important;
  inset:1px !important;
  pointer-events:none !important;
  clip-path:inherit !important;
  border-radius:8px !important;
  box-shadow:0 0 8px rgba(105,245,255,.25),0 0 18px rgba(105,245,255,.08),inset 0 0 8px rgba(105,245,255,.05) !important;
  opacity:.16 !important;
  animation:dcSideGlow14 2.35s ease-in-out infinite !important;
}
#sideMenuRight button::after{box-shadow:0 0 8px rgba(161,140,255,.26),0 0 18px rgba(161,140,255,.08),inset 0 0 8px rgba(161,140,255,.05) !important;}
@keyframes dcSideGlow14{0%,100%{opacity:.10;filter:brightness(.95)}50%{opacity:.44;filter:brightness(1.14)}}
.dc-side-icon{
  width:36px !important;height:36px !important;
  min-width:36px !important;min-height:36px !important;
  display:grid !important;place-items:center !important;
  border:0 !important;
  background:transparent !important;
  color:#70f6ff !important;
  box-shadow:none !important;
  clip-path:none !important;
}
#sideMenuRight .dc-side-icon{color:#b39dff !important;}
.dc-side-icon svg{width:31px !important;height:31px !important;stroke-width:1.55 !important;filter:drop-shadow(0 0 6px currentColor) !important;}
.dc-side-label{font-size:8.6px !important;line-height:1 !important;letter-spacing:.72px !important;font-weight:800 !important;color:#eaffff !important;text-transform:uppercase !important;min-width:0 !important;overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;text-shadow:0 0 8px rgba(105,245,255,.16) !important;}
#sideMenuRight .dc-side-label{text-shadow:0 0 8px rgba(161,140,255,.18) !important;}

/* ---------- SIDE TOGGLE BUTTONS ---------- */
#toggleMenuLeftBtn,#toggleMenuRightBtn{
  top:38% !important;
  width:28px !important;height:66px !important;
  min-width:28px !important;min-height:66px !important;
  padding:0 !important;margin:0 !important;
  background:linear-gradient(180deg,rgba(7,32,46,.92),rgba(2,14,24,.88)) !important;
  border:1px solid rgba(105,245,255,.38) !important;
  box-shadow:0 5px 18px rgba(0,0,0,.32),0 0 15px rgba(105,245,255,.13),inset 0 0 10px rgba(105,245,255,.05) !important;
  backdrop-filter:blur(9px) !important;
  -webkit-backdrop-filter:blur(9px) !important;
  border-radius:0 9px 9px 0 !important;
}
#toggleMenuRightBtn{border-radius:9px 0 0 9px !important;border-color:rgba(161,140,255,.38) !important;color:#b7a5ff !important;}
#toggleMenuLeftBtn::after,#toggleMenuRightBtn::after{font-size:19px !important;line-height:1 !important;text-shadow:0 0 8px currentColor,0 0 18px currentColor !important;}

/* ---------- UPPER HUD: profile-aligned ---------- */
#hudContainer{
  top:20px !important;
  left:92px !important;
  right:20px !important;
  height:55px !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) 55px 55px !important;
  gap:10px !important;
  align-items:center !important;
  box-sizing:border-box !important;
  padding:0 !important;
}
#hudContainer > *{min-width:0 !important;}
#hudContainer > .dc-hud-stat{
  width:auto !important;height:55px !important;
  min-width:0 !important;
  display:flex !important;align-items:center !important;justify-content:center !important;gap:8px !important;
  padding:0 12px !important;margin:0 !important;
  border:0 !important;background:transparent !important;
  box-shadow:none !important;border-radius:0 !important;
}
#hudContainer > .dc-hud-stat img{
  width:34px !important;height:34px !important;max-width:34px !important;max-height:34px !important;
  object-fit:contain !important;
  filter:drop-shadow(0 0 8px rgba(105,245,255,.28)) !important;
}
#hudContainer > .dc-hud-stat:nth-child(2) img{filter:drop-shadow(0 0 8px rgba(255,215,106,.26)) !important;}
#hudContainer > .dc-hud-stat span{font-size:1.02em !important;font-weight:900 !important;line-height:1 !important;text-shadow:0 0 8px currentColor !important;}
#btnDailyLogin.dc-utility-btn,#digiHubFab{
  width:55px !important;height:55px !important;min-width:55px !important;min-height:55px !important;max-width:55px !important;
  flex:none !important;margin:0 !important;padding:5px !important;
  box-sizing:border-box !important;border-radius:9px !important;
  display:grid !important;grid-template-rows:31px 10px !important;place-items:center !important;gap:2px !important;
  position:relative !important;inset:auto !important;transform:none !important;
  clip-path:polygon(0 6px,6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px)) !important;
}
#btnDailyLogin.dc-utility-btn{background:linear-gradient(145deg,rgba(67,51,12,.88),rgba(18,15,7,.94)) !important;border:1px solid rgba(255,215,106,.46) !important;color:#ffd76a !important;box-shadow:0 0 14px rgba(255,215,106,.13),inset 0 0 12px rgba(255,215,106,.05) !important;}
#digiHubFab{background:linear-gradient(145deg,rgba(8,43,57,.92),rgba(3,17,27,.96)) !important;border:1px solid rgba(105,245,255,.40) !important;color:#69f5ff !important;box-shadow:0 0 14px rgba(105,245,255,.13),inset 0 0 12px rgba(105,245,255,.05) !important;}
#btnDailyLogin.dc-utility-btn svg,#digiHubFab .dc-hub-sigil svg{width:26px !important;height:26px !important;stroke-width:1.55 !important;filter:drop-shadow(0 0 6px currentColor) !important;}
#btnDailyLogin.dc-utility-btn .dc-util-label,#digiHubFab .dc-hub-label{font-size:6.2px !important;font-weight:900 !important;letter-spacing:.9px !important;line-height:1 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
#digiHubFab.dc-pending{animation:dcHubNeon14 1.2s ease-in-out infinite !important;}
@keyframes dcHubNeon14{0%,100%{box-shadow:0 0 9px rgba(105,245,255,.18),inset 0 0 10px rgba(105,245,255,.05)}50%{box-shadow:0 0 24px rgba(105,245,255,.78),0 0 42px rgba(161,140,255,.22),inset 0 0 13px rgba(105,245,255,.1)}}
#digiHubPanel{top:84px !important;right:20px !important;width:min(460px,calc(100vw - 40px)) !important;}

/* ---------- BOTTOM HUD: centered full rail ---------- */
#dcBottomDock{
  position:absolute !important;left:20px !important;right:20px !important;bottom:12px !important;
  width:auto !important;height:60px !important;
  display:grid !important;grid-template-columns:repeat(5,minmax(0,1fr)) !important;gap:10px !important;
  align-items:stretch !important;box-sizing:border-box !important;
  z-index:10020 !important;pointer-events:none !important;
}
#dcBottomDock .dc-utility-btn{
  position:relative !important;left:auto !important;right:auto !important;top:auto !important;bottom:auto !important;
  width:100% !important;height:60px !important;min-width:0 !important;min-height:60px !important;
  margin:0 !important;padding:5px 4px !important;box-sizing:border-box !important;
  display:grid !important;grid-template-rows:31px 11px !important;place-items:center !important;gap:2px !important;
  border-radius:10px !important;pointer-events:auto !important;
  background:linear-gradient(145deg,rgba(7,34,48,.92),rgba(2,14,23,.96)) !important;
  border:1px solid rgba(105,245,255,.22) !important;
  box-shadow:inset 0 0 12px rgba(105,245,255,.035),0 5px 16px rgba(0,0,0,.30),0 0 10px rgba(105,245,255,.04) !important;
  clip-path:polygon(0 7px,7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px)) !important;
}
#dcBottomDock .dc-utility-btn svg{width:27px !important;height:27px !important;stroke-width:1.55 !important;filter:drop-shadow(0 0 5px currentColor) !important;}
#dcBottomDock .dc-util-label{font-size:6.7px !important;font-weight:900 !important;letter-spacing:.55px !important;line-height:1 !important;max-width:100% !important;overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;}

/* ---------- NAME EDIT ---------- */
#editPetNameBtn.dc-name-edit-btn{width:32px !important;height:32px !important;min-width:32px !important;min-height:32px !important;border-radius:7px !important;right:6px !important;display:grid !important;place-items:center !important;}
#editPetNameBtn.dc-name-edit-btn svg{width:17px !important;height:17px !important;stroke-width:1.75 !important;}
#petNameContainer #titulo{padding-right:45px !important;}

@media(max-width:700px){
  #sideMenuLeft,#sideMenuRight{width:142px !important;}
  #sideMenuLeft{left:32px !important;}#sideMenuRight{right:32px !important;}
  #sideMenuLeft button,#sideMenuRight button{height:43px !important;min-height:43px !important;grid-template-columns:36px minmax(0,1fr) !important;gap:8px !important;padding:4px 8px !important;}
  .dc-side-icon{width:32px !important;height:32px !important}.dc-side-icon svg{width:27px !important;height:27px !important}.dc-side-label{font-size:7.9px !important;}
  #toggleMenuLeftBtn,#toggleMenuRightBtn{width:24px !important;height:60px !important;min-width:24px !important;min-height:60px !important;}
  #hudContainer{top:17px !important;left:76px !important;right:17px !important;height:50px !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 50px 50px !important;gap:7px !important;}
  #hudContainer > .dc-hud-stat{height:50px !important;padding:0 6px !important;gap:6px !important;}.dc-hud-stat img{width:30px !important;height:30px !important;max-width:30px !important;max-height:30px !important}.dc-hud-stat span{font-size:.88em !important;}
  #btnDailyLogin.dc-utility-btn,#digiHubFab{width:50px !important;height:50px !important;min-width:50px !important;min-height:50px !important;}
  #dcBottomDock{left:17px !important;right:17px !important;bottom:9px !important;height:56px !important;gap:7px !important;}
  #dcBottomDock .dc-utility-btn{height:56px !important;min-height:56px !important;grid-template-rows:29px 10px !important;}.dcBottomDock .dc-util-label{font-size:6px !important}
}
@media(max-width:430px){
  #sideMenuLeft,#sideMenuRight{width:128px !important;}.dc-side-label{font-size:7.2px !important;}
  #hudContainer{left:70px !important;right:10px !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 46px 46px !important;gap:5px !important;}
  #hudContainer > .dc-hud-stat img{width:28px !important;height:28px !important;max-width:28px !important;max-height:28px !important}.dc-hud-stat span{font-size:.80em !important;}
  #btnDailyLogin.dc-utility-btn,#digiHubFab{width:46px !important;height:50px !important;min-width:46px !important;min-height:50px !important;}
  #dcBottomDock{left:10px !important;right:10px !important;gap:5px !important;}#dcBottomDock .dc-utility-btn{height:53px !important;min-height:53px !important;padding:5px 2px !important;}#dcBottomDock .dc-utility-btn svg{width:24px !important;height:24px !important}.dc-util-label{font-size:5.7px !important;}
}

/* ==========================================================
   DigiClicks UX v1.5 — final HUD / reactive evolution / story immersion
   ========================================================== */

/* Side menus: visual game controls, transparent scene behind them. */
#sideMenuLeft,#sideMenuRight{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  padding:7px !important;
  gap:7px !important;
}
#sideMenuLeft button,#sideMenuRight button{
  height:49px !important;
  min-height:49px !important;
  grid-template-columns:44px minmax(0,1fr) !important;
  gap:8px !important;
  padding:4px 9px !important;
  background:linear-gradient(145deg,rgba(8,32,46,.62),rgba(3,15,25,.54)) !important;
  border-color:rgba(105,245,255,.28) !important;
  box-shadow:inset 0 0 16px rgba(105,245,255,.035),0 4px 12px rgba(0,0,0,.22),0 0 13px rgba(105,245,255,.08) !important;
}
#sideMenuRight button{border-color:rgba(161,140,255,.30) !important;box-shadow:inset 0 0 16px rgba(161,140,255,.035),0 4px 12px rgba(0,0,0,.22),0 0 13px rgba(161,140,255,.08) !important;}
#sideMenuLeft button::after,#sideMenuRight button::after{opacity:.28 !important;animation:dcSideGlow15 1.8s ease-in-out infinite !important;}
@keyframes dcSideGlow15{0%,100%{opacity:.14;filter:brightness(.96)}50%{opacity:.72;filter:brightness(1.2)}}
.dc-side-icon{width:39px !important;height:39px !important;}
.dc-side-icon svg{width:34px !important;height:34px !important;stroke-width:1.45 !important;}
.dc-side-label{font-size:8.8px !important;letter-spacing:.8px !important;}

/* Toggle handles: visible when closed and still reachable when open. */
#toggleMenuLeftBtn,#toggleMenuRightBtn{
  width:30px !important;height:68px !important;min-width:30px !important;min-height:68px !important;
  z-index:100010 !important;
  background:linear-gradient(180deg,rgba(7,35,49,.72),rgba(2,15,25,.58)) !important;
  backdrop-filter:blur(10px) !important;-webkit-backdrop-filter:blur(10px) !important;
  box-shadow:0 5px 18px rgba(0,0,0,.30),0 0 18px rgba(105,245,255,.20),inset 0 0 12px rgba(105,245,255,.06) !important;
}
#toggleMenuRightBtn{box-shadow:0 5px 18px rgba(0,0,0,.30),0 0 18px rgba(161,140,255,.20),inset 0 0 12px rgba(161,140,255,.06) !important;}
#toggleMenuLeftBtn::after,#toggleMenuRightBtn::after{font-size:21px !important;}

/* UPPER HUD: same 55px visual rhythm as profile, evenly distributed. */
#hudContainer{
  top:20px !important;left:92px !important;right:20px !important;height:55px !important;
  display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 55px 55px !important;
  gap:10px !important;align-items:center !important;padding:0 !important;
}
#hudContainer > .dc-hud-stat{height:55px !important;padding:0 10px !important;gap:9px !important;}
#hudContainer > .dc-hud-stat img{width:39px !important;height:39px !important;max-width:39px !important;max-height:39px !important;}
#hudContainer > .dc-hud-stat span{font-size:1.08em !important;}
#hudContainer > .dc-hud-stat{border:0 !important;background:transparent !important;box-shadow:none !important;}

/* Bottom HUD: mathematically centered, never dependent on the original button offsets. */
#dcBottomDock{
  position:absolute !important;
  left:50% !important;right:auto !important;bottom:12px !important;
  width:calc(100% - 40px) !important;max-width:none !important;
  height:64px !important;
  transform:translateX(-50%) !important;
  display:grid !important;grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:10px !important;padding:0 !important;margin:0 !important;
  align-items:stretch !important;justify-items:stretch !important;
  z-index:10020 !important;pointer-events:none !important;
}
#dcBottomDock .dc-utility-btn{
  width:100% !important;height:64px !important;min-width:0 !important;min-height:64px !important;
  position:relative !important;left:auto !important;right:auto !important;top:auto !important;bottom:auto !important;
  margin:0 !important;padding:5px 4px !important;
  grid-template-rows:33px 12px !important;place-items:center !important;
  background:linear-gradient(145deg,rgba(8,34,48,.58),rgba(2,14,23,.48)) !important;
  border:1px solid rgba(105,245,255,.20) !important;
  backdrop-filter:blur(13px) saturate(145%) !important;-webkit-backdrop-filter:blur(13px) saturate(145%) !important;
  box-shadow:inset 0 0 18px rgba(105,245,255,.045),0 5px 16px rgba(0,0,0,.24),0 0 12px rgba(105,245,255,.06) !important;
}
#dcBottomDock .dc-utility-btn svg{width:29px !important;height:29px !important;stroke-width:1.45 !important;}
#dcBottomDock .dc-util-label{font-size:6.8px !important;}

/* Story/evolution popups use their actual biome/legendary background, not a neutral frame. */
.popup-overlay > .dc-popup-frame.dc-popup-story-frame{
  width:min(450px,92vw) !important;
  max-height:min(82vh,650px) !important;
  padding:0 !important;
  overflow:hidden !important;
  background:transparent !important;
  border:1px solid rgba(105,245,255,.30) !important;
  box-shadow:0 24px 70px rgba(0,0,0,.58),0 0 35px rgba(105,245,255,.13) !important;
}
.dc-popup-story-frame .dc-popup-icon{display:none !important;}
.dc-popup-story-frame .dc-popup-message{margin:0 !important;padding:0 !important;max-height:none !important;overflow:visible !important;}
.dc-popup-story-frame .dc-popup-actions{position:relative !important;z-index:5 !important;margin:0 !important;padding:9px 12px 12px !important;background:linear-gradient(180deg,rgba(2,12,19,.20),rgba(2,10,17,.82)) !important;}
.dc-popup-story-frame .dc-popup-actions button{min-height:38px !important;}
.dc-popup-story-frame .dc-popup-close{z-index:10 !important;background:rgba(3,15,23,.70) !important;backdrop-filter:blur(7px) !important;-webkit-backdrop-filter:blur(7px) !important;}
.dc-story-card,.dc-evolution-card{width:100% !important;min-height:320px !important;position:relative !important;overflow:auto !important;background-position:center !important;background-size:cover !important;background-repeat:no-repeat !important;}
.dc-story-card::before,.dc-evolution-card::before{content:'' !important;position:absolute !important;inset:0 !important;background:linear-gradient(180deg,rgba(2,10,16,.18),rgba(2,10,16,.70) 72%,rgba(2,10,16,.90)) !important;pointer-events:none !important;}
.dc-story-content{position:relative !important;z-index:1 !important;}

@media(max-width:700px){
  #hudContainer{left:76px !important;right:17px !important;top:17px !important;height:50px !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 50px 50px !important;gap:7px !important;}
  #hudContainer > .dc-hud-stat{height:50px !important;padding:0 5px !important;gap:6px !important;}
  #hudContainer > .dc-hud-stat img{width:31px !important;height:31px !important;max-width:31px !important;max-height:31px !important;}
  #hudContainer > .dc-hud-stat span{font-size:.86em !important;}
  #btnDailyLogin.dc-utility-btn,#digiHubFab{width:50px !important;height:50px !important;min-width:50px !important;min-height:50px !important;}
  #dcBottomDock{left:50% !important;right:auto !important;width:calc(100% - 34px) !important;bottom:9px !important;height:58px !important;gap:6px !important;transform:translateX(-50%) !important;}
  #dcBottomDock .dc-utility-btn{height:58px !important;min-height:58px !important;grid-template-rows:30px 11px !important;}
  #dcBottomDock .dc-utility-btn svg{width:26px !important;height:26px !important;}
  #sideMenuLeft,#sideMenuRight{width:142px !important;}
  #sideMenuLeft button,#sideMenuRight button{height:44px !important;min-height:44px !important;grid-template-columns:38px minmax(0,1fr) !important;}
  .dc-side-icon{width:34px !important;height:34px !important;}.dc-side-icon svg{width:29px !important;height:29px !important;}
}
@media(max-width:430px){
  #hudContainer{left:70px !important;right:10px !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 46px 46px !important;gap:5px !important;}
  #hudContainer > .dc-hud-stat img{width:27px !important;height:27px !important;max-width:27px !important;max-height:27px !important;}
  #btnDailyLogin.dc-utility-btn,#digiHubFab{width:46px !important;height:50px !important;min-width:46px !important;min-height:50px !important;}
  #dcBottomDock{width:calc(100% - 24px) !important;gap:4px !important;}
  #dcBottomDock .dc-utility-btn{height:54px !important;min-height:54px !important;padding:4px 2px !important;}
}