/* ==========================================================
   DigiClicks UX v1.3 — GAME HUD / LOW-POLY / STORY SYSTEM
   Visual + UX refinement. Existing gameplay handlers preserved.
   ========================================================== */

:root{
  --dc-bg:#06111a;
  --dc-panel:rgba(6,18,29,.96);
  --dc-cyan:#69f5ff;
  --dc-blue:#4da8ff;
  --dc-violet:#a18cff;
  --dc-green:#63f7b3;
  --dc-gold:#ffd76a;
  --dc-text:#ecfeff;
  --dc-muted:#83adb7;
}

/* ---------- SIDE MENU TOGGLES: compact game controls ---------- */
#toggleMenuLeftBtn,
#toggleMenuRightBtn{
  position:fixed !important;
  top:39% !important;
  width:34px !important;
  height:74px !important;
  min-width:34px !important;
  min-height:74px !important;
  padding:0 !important;
  margin:0 !important;
  transform:translateY(-50%) !important;
  display:grid !important;
  place-items:center !important;
  box-sizing:border-box !important;
  background:linear-gradient(155deg,rgba(12,49,66,.98),rgba(3,15,25,.99)) !important;
  border:1px solid rgba(105,245,255,.42) !important;
  color:var(--dc-cyan) !important;
  box-shadow:0 7px 18px rgba(0,0,0,.38),0 0 16px rgba(105,245,255,.10),inset 0 0 10px rgba(105,245,255,.04) !important;
  z-index:10001 !important;
  cursor:pointer !important;
  clip-path:polygon(0 7px,7px 0,100% 0,100% 100%,7px 100%,0 calc(100% - 7px)) !important;
}
#toggleMenuRightBtn{
  color:var(--dc-violet) !important;
  border-color:rgba(161,140,255,.42) !important;
  box-shadow:0 7px 18px rgba(0,0,0,.38),0 0 16px rgba(161,140,255,.10),inset 0 0 10px rgba(161,140,255,.04) !important;
  clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%) !important;
}
#toggleMenuLeftBtn{left:0 !important;right:auto !important;}
#toggleMenuRightBtn{right:0 !important;left:auto !important;}
#toggleMenuLeftBtn img,#toggleMenuRightBtn img{display:none !important;}
#toggleMenuLeftBtn::after,#toggleMenuRightBtn::after{
  content:'›' !important;
  font:900 22px/1 Arial,sans-serif !important;
  text-shadow:0 0 8px currentColor,0 0 18px currentColor !important;
  transition:transform .16s ease !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.12) !important;}

/* ---------- SIDE MENUS ---------- */
#sideMenuLeft,#sideMenuRight{
  width:146px !important;
  padding:8px !important;
  gap:6px !important;
  border-radius:12px !important;
  border:1px solid rgba(105,245,255,.22) !important;
  background:linear-gradient(165deg,rgba(3,16,27,.97),rgba(6,26,39,.90)) !important;
  box-shadow:0 18px 40px rgba(0,0,0,.42),inset 0 0 18px rgba(105,245,255,.025) !important;
}
#sideMenuLeft button,#sideMenuRight button{
  height:44px !important;
  min-height:44px !important;
  padding:4px 7px !important;
  gap:7px !important;
  border-radius:8px !important;
  grid-template-columns:27px minmax(0,1fr) !important;
  border:1px solid rgba(105,245,255,.16) !important;
  background:linear-gradient(145deg,rgba(12,47,62,.98),rgba(5,21,32,.99)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 3px 8px rgba(0,0,0,.30) !important;
}
#sideMenuLeft button::after,#sideMenuRight button::after{
  content:'' !important;
  position:absolute !important;
  inset:1px !important;
  border-radius:7px !important;
  pointer-events:none !important;
  opacity:.18 !important;
  box-shadow:0 0 7px rgba(105,245,255,.85),0 0 16px rgba(105,245,255,.38),inset 0 0 8px rgba(105,245,255,.18) !important;
  animation:dcMenuNeon 2.2s ease-in-out infinite !important;
}
#sideMenuRight button::after{box-shadow:0 0 7px rgba(161,140,255,.85),0 0 16px rgba(161,140,255,.38),inset 0 0 8px rgba(161,140,255,.18) !important;}
@keyframes dcMenuNeon{0%,100%{opacity:.12}50%{opacity:.52}}
.dc-side-icon{
  width:24px !important;height:24px !important;
  border:1px solid rgba(105,245,255,.30) !important;
  color:var(--dc-cyan) !important;
  background:linear-gradient(145deg,rgba(31,83,105,.90),rgba(5,27,40,.98)) !important;
  clip-path:polygon(20% 0,80% 0,100% 24%,100% 76%,80% 100%,20% 100%,0 76%,0 24%) !important;
  box-shadow:inset 0 0 8px rgba(105,245,255,.08),0 0 8px rgba(105,245,255,.05) !important;
}
.dc-side-icon svg{width:17px !important;height:17px !important;fill:none !important;stroke:currentColor !important;stroke-width:1.65 !important;stroke-linecap:round !important;stroke-linejoin:round !important;}
.dc-side-label{font-size:7.6px !important;line-height:1 !important;letter-spacing:.65px !important;}
.dc-side-sub{display:none !important;}

/* ---------- UPPER HUD: profile-aligned, full rail ---------- */
#hudContainer{
  position:absolute !important;
  top:20px !important;
  left:90px !important;
  right:20px !important;
  width:auto !important;
  max-width:none !important;
  height:55px !important;
  display:flex !important;
  align-items:stretch !important;
  justify-content:stretch !important;
  gap:8px !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{
  flex:1 1 0 !important;
  min-width:0 !important;
  height:55px !important;
  padding:7px 10px !important;
  gap:7px !important;
  box-sizing:border-box !important;
  border-radius:10px !important;
  justify-content:center !important;
  border:1px solid rgba(105,245,255,.18) !important;
  background:linear-gradient(145deg,rgba(6,27,40,.90),rgba(3,15,24,.82)) !important;
  box-shadow:inset 0 0 12px rgba(105,245,255,.025),0 5px 16px rgba(0,0,0,.18) !important;
}
#hudContainer > div img{max-width:30px !important;max-height:30px !important;}
#hudContainer > div span{font-size:.90em !important;}
#btnDailyLogin.dc-utility-btn,#digiHubFab{
  position:relative !important;
  inset:auto !important;
  top:auto !important;right:auto !important;left:auto !important;bottom:auto !important;
  width:55px !important;
  min-width:55px !important;
  max-width:55px !important;
  height:55px !important;
  min-height:55px !important;
  flex:0 0 55px !important;
  margin:0 !important;
  padding:4px !important;
  box-sizing:border-box !important;
  border-radius:10px !important;
}
#btnDailyLogin.dc-utility-btn{display:grid !important;grid-template-rows:26px 9px !important;place-items:center !important;}
#btnDailyLogin.dc-utility-btn svg{width:21px !important;height:21px !important;}
#btnDailyLogin.dc-utility-btn .dc-util-label{font-size:5.8px !important;letter-spacing:.65px !important;}
#digiHubFab{display:grid !important;grid-template-rows:26px 9px !important;place-items:center !important;gap:0 !important;color:var(--dc-cyan) !important;background:linear-gradient(145deg,rgba(8,42,56,.96),rgba(3,18,27,.99)) !important;border:1px solid rgba(105,245,255,.34) !important;}
#digiHubFab .dc-hub-sigil svg{width:21px !important;height:21px !important;fill:none !important;stroke:currentColor !important;stroke-width:1.6 !important;stroke-linecap:round !important;stroke-linejoin:round !important;}
#digiHubFab .dc-hub-label{font-size:5.8px !important;letter-spacing:1px !important;}
#digiHubFab .dc-hub-dot{width:6px !important;height:6px !important;top:5px !important;right:6px !important;}
#digiHubFab.dc-pending{animation:dcHubNeon 1.25s ease-in-out infinite !important;}
@keyframes dcHubNeon{0%,100%{box-shadow:inset 0 0 10px rgba(105,245,255,.04),0 0 7px rgba(105,245,255,.18)}50%{box-shadow:inset 0 0 14px rgba(105,245,255,.12),0 0 22px rgba(105,245,255,.72),0 0 40px rgba(161,140,255,.22)}}
#digiHubPanel{top:82px !important;right:20px !important;left:auto !important;width:min(440px,calc(100vw - 40px)) !important;}

/* ---------- PROFILE REFERENCE ---------- */
#btnPerfil{width:70px !important;height:70px !important;top:12px !important;left:12px !important;pointer-events:auto !important;touch-action:manipulation !important;z-index:2147483000 !important;}
#btnPerfil img{width:55px !important;height:55px !important;pointer-events:none !important;}

/* ---------- BOTTOM HUD: same lateral frame, larger controls ---------- */
#dcBottomDock{
  position:absolute !important;
  left:20px !important;
  right:20px !important;
  bottom:10px !important;
  width:auto !important;
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:8px !important;
  align-items:end !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;bottom:auto !important;top:auto !important;
  width:100% !important;
  min-width:0 !important;
  height:54px !important;
  min-height:54px !important;
  margin:0 !important;
  padding:6px 5px !important;
  border-radius:10px !important;
  box-sizing:border-box !important;
  display:grid !important;
  grid-template-rows:29px 10px !important;
  place-items:center !important;
  background:linear-gradient(145deg,rgba(8,34,47,.96),rgba(3,17,27,.99)) !important;
  border:1px solid rgba(105,245,255,.20) !important;
  box-shadow:inset 0 0 12px rgba(105,245,255,.035),0 5px 13px rgba(0,0,0,.25) !important;
  pointer-events:auto !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::after{content:'';position:absolute;inset:1px;clip-path:inherit;pointer-events:none;box-shadow:inset 0 0 10px rgba(105,245,255,.04);}
#dcBottomDock .dc-utility-btn svg{width:23px !important;height:23px !important;fill:none !important;stroke:currentColor !important;stroke-width:1.65 !important;stroke-linecap:round !important;stroke-linejoin:round !important;}
#dcBottomDock .dc-util-label{font-size:6px !important;line-height:1 !important;letter-spacing:.55px !important;max-width:100% !important;overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;}

/* ---------- NAME EDIT ---------- */
#editPetNameBtn.dc-name-edit-btn{
  right:7px !important;top:50% !important;transform:translateY(-50%) !important;
  width:31px !important;height:31px !important;min-width:31px !important;min-height:31px !important;
  padding:0 !important;margin:0 !important;display:grid !important;place-items:center !important;
  border-radius:7px !important;border:1px solid rgba(255,215,106,.42) !important;
  background:linear-gradient(145deg,rgba(41,38,22,.96),rgba(13,14,12,.98)) !important;
  color:var(--dc-gold) !important;box-shadow:0 0 12px rgba(255,215,106,.11),inset 0 0 8px rgba(255,215,106,.05) !important;
  clip-path:polygon(18% 0,82% 0,100% 22%,100% 78%,82% 100%,18% 100%,0 78%,0 22%) !important;
}
#editPetNameBtn.dc-name-edit-btn svg{width:14px !important;height:14px !important;fill:none !important;stroke:currentColor !important;stroke-width:1.9 !important;stroke-linecap:round !important;stroke-linejoin:round !important;}
#petNameContainer #titulo{padding-right:46px !important;}

/* ---------- UNLOCK MINI POPUPS ---------- */
.dc-unlock-popup .dc-popup-frame{border-color:rgba(255,215,106,.36) !important;box-shadow:0 20px 54px rgba(0,0,0,.48),0 0 26px rgba(255,215,106,.13),inset 0 0 18px rgba(255,215,106,.025) !important;}
.dc-unlock-mark{width:42px;height:42px;margin:0 auto 5px;display:grid;place-items:center;color:var(--dc-gold);background:linear-gradient(145deg,rgba(90,74,22,.90),rgba(32,27,9,.96));border:1px solid rgba(255,215,106,.35);clip-path:polygon(20% 0,80% 0,100% 25%,100% 75%,80% 100%,20% 100%,0 75%,0 25%);box-shadow:0 0 16px rgba(255,215,106,.15),inset 0 0 8px rgba(255,215,106,.06);}
.dc-unlock-mark svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}

/* ---------- STORY / EVOLUTION SINGLE VISUAL LANGUAGE ---------- */
.dc-story-card,.dc-evolution-card{font-family:'Orbitron',sans-serif !important;}
.dc-story-card > div[style],.dc-evolution-card > div[style]{border:1px solid rgba(105,245,255,.24) !important;box-shadow:0 0 24px rgba(105,245,255,.08) !important;}
.dc-story-card h2,.dc-evolution-card h2{color:#eaffff !important;text-shadow:0 0 12px rgba(105,245,255,.34) !important;font-size:12px !important;letter-spacing:1px !important;}
.dialogo-historia,.dialogo-evo{display:grid !important;grid-template-columns:26px minmax(0,1fr) !important;align-items:center !important;gap:6px !important;min-width:0 !important;}
.dialogo-historia > span:last-child,.dialogo-evo > span:last-child{min-width:0 !important;overflow-wrap:anywhere !important;}
.dc-story-badge{width:24px;height:24px;display:grid;place-items:center;position:relative;color:var(--dc-cyan);background:linear-gradient(145deg,rgba(31,83,105,.88),rgba(6,25,37,.96));border:1px solid rgba(105,245,255,.22);clip-path:polygon(22% 0,78% 0,100% 24%,100% 76%,78% 100%,22% 100%,0 76%,0 24%);box-shadow:0 0 9px rgba(105,245,255,.08),inset 0 0 8px rgba(105,245,255,.05);}
.dc-story-badge::before{content:'';width:9px;height:9px;background:currentColor;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);filter:drop-shadow(0 0 5px currentColor);}
.dc-story-badge--player{color:var(--dc-violet)}
.dc-story-badge--pet{color:var(--dc-green)}
.dc-story-badge--energy{color:var(--dc-gold)}
.dc-story-badge--world{color:var(--dc-cyan)}
.dc-story-badge--rare{color:#c8d5ff}

/* Three.js evolution overlay */
#dcEvolution3DOverlay{position:fixed;inset:0;z-index:100500;pointer-events:none;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(circle at center,rgba(100,245,255,.08),rgba(2,8,14,.28) 55%,rgba(0,0,0,0) 100%);}
#dcEvolution3DCanvas{width:100%;height:100%;display:block;}
.dc-evo-caption{position:absolute;left:50%;bottom:12%;transform:translateX(-50%);padding:8px 14px;border:1px solid rgba(105,245,255,.24);background:rgba(3,15,24,.70);color:#dffcff;border-radius:7px;font:800 8px/1 'Orbitron',sans-serif;letter-spacing:1.5px;text-shadow:0 0 10px rgba(105,245,255,.32);opacity:0;animation:dcEvoCaption 2.6s ease forwards;}
@keyframes dcEvoCaption{10%{opacity:0}25%{opacity:1}80%{opacity:1}100%{opacity:0}}

@media(max-width:700px){
  #toggleMenuLeftBtn,#toggleMenuRightBtn{width:30px !important;height:66px !important;min-width:30px !important;min-height:66px !important;}
  #sideMenuLeft,#sideMenuRight{width:132px !important;}
  #sideMenuLeft button,#sideMenuRight button{height:41px !important;min-height:41px !important;grid-template-columns:24px minmax(0,1fr) !important;}
  .dc-side-icon{width:21px !important;height:21px !important}.dc-side-icon svg{width:15px !important;height:15px !important}.dc-side-label{font-size:7px !important;}
  #btnPerfil,#btnPerfil img{width:50px !important;height:50px !important;}
  #btnPerfil{top:17px !important;left:17px !important;}
  #hudContainer{left:76px !important;right:17px !important;top:17px !important;height:50px !important;gap:6px !important;}
  #hudContainer > div{height:50px !important;padding:5px 7px !important;}
  #hudContainer > div img{max-width:25px !important;max-height:25px !important}#hudContainer > div span{font-size:.76em !important;}
  #btnDailyLogin.dc-utility-btn,#digiHubFab{width:50px !important;min-width:50px !important;height:50px !important;min-height:50px !important;flex-basis:50px !important;}
  #dcBottomDock{left:17px !important;right:17px !important;gap:6px !important;}
  #dcBottomDock .dc-utility-btn{height:49px !important;min-height:49px !important;}#dcBottomDock .dc-util-label{font-size:5.5px !important;}
  #digiHubPanel{top:74px !important;right:17px !important;width:calc(100vw - 34px) !important;}
}
@media(max-width:440px){
  #hudContainer{left:72px !important;right:12px !important;gap:4px !important;}
  #hudContainer > div{padding:4px 5px !important;}#hudContainer > div img{max-width:22px !important;max-height:22px !important}#hudContainer > div span{font-size:.68em !important;}
  #btnDailyLogin.dc-utility-btn,#digiHubFab{width:46px !important;min-width:46px !important;flex-basis:46px !important;height:50px !important;}
  #dcBottomDock{left:12px !important;right:12px !important;gap:4px !important;}
  #dcBottomDock .dc-utility-btn{height:46px !important;min-height:46px !important;padding:5px 3px !important;}#dcBottomDock .dc-utility-btn svg{width:20px !important;height:20px !important}#dcBottomDock .dc-util-label{font-size:5px !important;}
}

.dc-story-content{position:relative;z-index:1;padding:12px !important;}
.dc-story-rule{width:74px;height:2px;margin:7px auto 10px;background:linear-gradient(90deg,transparent,var(--story-accent,#69f5ff),transparent);box-shadow:0 0 10px var(--story-accent,#69f5ff);}
.dc-story-characters{display:flex;align-items:flex-start;justify-content:center;gap:22px;margin:8px 0 11px;}
.dc-story-characters>div{text-align:center;min-width:70px;max-width:100px;}
.dc-story-characters img{width:72px !important;height:82px !important;object-fit:contain;filter:drop-shadow(0 0 12px rgba(105,245,255,.18));}
.dc-story-characters small{display:block;margin-top:4px;color:#a9dbe3;font:700 7px/1.2 'Orbitron',sans-serif;letter-spacing:.6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dc-story-eggs{display:grid !important;grid-template-columns:repeat(4,28px);justify-content:center;gap:3px;max-width:130px !important;}
.dc-story-eggs img{width:28px !important;height:28px !important;}
.dc-story-eggs small{grid-column:1/-1;}
.dc-story-dialogues{display:flex;flex-direction:column;gap:5px;}
.dialogo-historia,.dialogo-evo{margin:0 !important;padding:7px 8px !important;background:linear-gradient(145deg,rgba(5,24,34,.78),rgba(2,13,21,.72)) !important;border:1px solid rgba(105,245,255,.10) !important;border-radius:8px !important;opacity:0;transform:translateY(8px);transition:opacity .22s ease,transform .22s ease,border-color .22s ease !important;}
.dialogo-historia.is-visible,.dialogo-evo.is-visible{opacity:1;transform:translateY(0);}
.dialogo-historia>span:last-child,.dialogo-evo>span:last-child{font:700 8px/1.45 'Orbitron',sans-serif !important;color:#dffcff !important;}
@keyframes dcEvoFallback{0%{opacity:0;transform:scale(.92)}18%{opacity:1;transform:scale(1)}60%{opacity:.65}100%{opacity:0;transform:scale(1.08)}}

.dc-popup-icon::before{content:'' !important;width:18px;height:18px;display:block;margin:auto;background:linear-gradient(145deg,#69f5ff,#a18cff);clip-path:polygon(50% 0,66% 34%,100% 50%,66% 66%,50% 100%,34% 66%,0 50%,34% 34%);filter:drop-shadow(0 0 7px rgba(105,245,255,.45));}