/* DigiClicks UX refinement V1.1 — compact game HUD, low-poly controls, unified story dialogs */
:root{
  --dc-bg:#06111a; --dc-panel:rgba(6,20,30,.96); --dc-panel2:rgba(10,29,42,.96);
  --dc-cyan:#6cf7ff; --dc-blue:#4da8ff; --dc-violet:#9b83ff; --dc-green:#64f7b2;
  --dc-gold:#ffd76a; --dc-red:#ff6f95; --dc-text:#e9fdff; --dc-muted:#83aab5;
}

/* SIDE MENUS — compact game-like tiles */
#sideMenuLeft,#sideMenuRight{
  width:128px !important; padding:4px !important; gap:4px !important;
  background:linear-gradient(180deg,rgba(3,18,29,.82),rgba(3,12,20,.48)) !important;
  border:1px solid rgba(108,247,255,.11) !important; border-radius:11px !important;
  box-shadow:0 12px 28px rgba(0,0,0,.28),inset 0 0 16px rgba(108,247,255,.025) !important;
}
#sideMenuLeft:before,#sideMenuRight:before{display:none !important;}
#sideMenuLeft button,#sideMenuRight button{
  width:100% !important; height:38px !important; min-height:38px !important;
  display:grid !important; grid-template-columns:25px minmax(0,1fr) !important; align-items:center !important;
  gap:6px !important; padding:4px 7px !important; margin:0 !important;
  border:1px solid rgba(108,247,255,.10) !important; border-radius:7px !important;
  background:linear-gradient(145deg,rgba(12,39,53,.96),rgba(5,20,30,.97)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 2px 6px rgba(0,0,0,.2) !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));
  overflow:hidden !important; text-align:left !important;
}
#sideMenuLeft button:hover,#sideMenuRight button:hover{transform:translateY(-1px) !important;filter:brightness(1.08);}
#sideMenuLeft button img,#sideMenuRight button img{display:none !important;}
.dc-side-icon{width:22px !important;height:22px !important;border:1px solid rgba(108,247,255,.15) !important;}
.dc-side-icon svg{width:13px !important;height:13px !important;stroke-width:1.7 !important;}
.dc-side-label{
  min-width:0 !important; display:block !important; overflow:hidden !important; text-overflow:ellipsis !important;
  white-space:nowrap !important; font-size:7.5px !important; line-height:1 !important; letter-spacing:.65px !important;
}
.dc-side-sub{display:none !important;}
#sideMenuLeft button:after,#sideMenuRight button:after{display:none !important;}

/* Side-menu toggles — slim edge tabs, not hamburger/web buttons */
#toggleMenuLeftBtn,#toggleMenuRightBtn{
  top:40% !important; width:24px !important; height:52px !important; padding:0 !important;
  border:1px solid rgba(108,247,255,.22) !important; background:linear-gradient(180deg,rgba(7,31,44,.94),rgba(5,16,25,.72)) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.3),0 0 10px rgba(108,247,255,.07) !important; border-radius:0 7px 7px 0 !important;
  clip-path:polygon(0 6px,6px 0,100% 0,100% 100%,6px 100%,0 calc(100% - 6px)) !important;
}
#toggleMenuRightBtn{border-radius:7px 0 0 7px !important;border-color:rgba(155,131,255,.24) !important;clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%) !important;}
#toggleMenuLeftBtn img,#toggleMenuRightBtn img{display:none !important;}
#toggleMenuLeftBtn:after,#toggleMenuRightBtn:after{font:900 14px/1 Arial,sans-serif !important;text-shadow:0 0 7px currentColor !important;}
#toggleMenuLeftBtn:after{content:'›' !important;color:var(--dc-cyan) !important;}
#toggleMenuRightBtn:after{content:'‹' !important;color:#b4a6ff !important;}

/* Bottom HUD dock */
#dcBottomDock{
  position:absolute; left:50%; bottom:9px; transform:translateX(-50%); z-index:10030;
  display:flex; align-items:center; justify-content:center; gap:5px; padding:3px;
  background:rgba(3,14,23,.38); border:1px solid rgba(108,247,255,.10);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  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));
  box-shadow:0 10px 22px rgba(0,0,0,.22);
}
#dcBottomDock .dc-utility-btn{
  position:relative !important; inset:auto !important; width:44px !important; min-width:44px !important;
  max-width:44px !important; height:44px !important; min-height:44px !important; margin:0 !important;
  padding:3px !important; border-radius:7px !important; box-sizing:border-box !important; overflow:hidden !important;
  display:grid !important; grid-template-rows:21px 8px !important; place-items:center !important;
  background:linear-gradient(145deg,rgba(9,35,48,.96),rgba(4,16,25,.98)) !important;
  border:1px solid rgba(108,247,255,.18) !important; box-shadow:inset 0 0 10px rgba(108,247,255,.035),0 3px 8px rgba(0,0,0,.22) !important;
}
#dcBottomDock .dc-utility-btn svg{width:17px !important;height:17px !important;}
#dcBottomDock .dc-util-label{display:block !important;width:100% !important;max-width:37px !important;overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;font-size:4.6px !important;line-height:1 !important;letter-spacing:.3px !important;}

/* Upper HUD and Hub */
#hudContainer{gap:6px !important;max-width:calc(100vw - 92px) !important;}
#btnDailyLogin.dc-utility-btn,#digiHubFab{
  position:relative !important; inset:auto !important; flex:0 0 43px !important; width:43px !important; min-width:43px !important;
  height:43px !important; min-height:43px !important; margin:0 !important; padding:3px !important; border-radius:8px !important; box-sizing:border-box !important;
}
#btnDailyLogin.dc-utility-btn{display:grid !important;grid-template-rows:20px 8px !important;place-items:center !important;}
#btnDailyLogin.dc-utility-btn svg{width:17px !important;height:17px !important;}
#btnDailyLogin.dc-utility-btn .dc-util-label{font-size:4.5px !important;}
#digiHubFab{display:grid !important;place-items:center !important;gap:0 !important;}
#digiHubFab .dc-hub-sigil svg{width:17px !important;height:17px !important;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
#digiHubFab .dc-hub-label{font-size:4.7px !important;letter-spacing:.7px !important;margin:0 !important;}
#digiHubFab .dc-hub-dot{width:4px !important;height:4px !important;top:5px !important;right:5px !important;}
#digiHubPanel{top:78px !important;left:auto !important;right:12px !important;transform:translateY(-8px) scale(.985) !important;width:min(430px,calc(100vw - 24px)) !important;}
#digiHubPanel.is-open{transform:translateY(0) scale(1) !important;}

/* Name editor */
#editPetNameBtn.dc-name-edit-btn{
  right:9% !important; width:30px !important; height:30px !important; padding:0 !important; margin:0 !important;
  display:grid !important; place-items:center !important; border-radius:7px !important;
  background:linear-gradient(145deg,rgba(37,40,51,.96),rgba(7,15,23,.96)) !important;
  border:1px solid rgba(255,215,106,.36) !important; color:var(--dc-gold) !important;
  clip-path:polygon(16% 0,84% 0,100% 20%,100% 80%,84% 100%,16% 100%,0 80%,0 20%) !important;
  box-shadow:0 0 11px rgba(255,215,106,.10),inset 0 0 8px rgba(255,215,106,.04) !important;
}
#editPetNameBtn.dc-name-edit-btn svg{width:14px !important;height:14px !important;fill:none !important;stroke:currentColor !important;stroke-width:1.8 !important;stroke-linecap:round !important;stroke-linejoin:round !important;}
#petNameContainer #titulo{padding-right:44px !important;overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;}

/* Unified dialogs */
.popup-overlay{padding:14px !important;background:rgba(2,9,15,.78) !important;backdrop-filter:blur(8px) !important;-webkit-backdrop-filter:blur(8px) !important;}
.popup-overlay > .dc-popup-frame{
  position:relative !important; width:min(430px,92vw) !important; max-width:430px !important; max-height:min(78vh,620px) !important;
  overflow:auto !important; box-sizing:border-box !important; padding:18px 17px 15px !important;
  border:1px solid rgba(108,247,255,.30) !important; border-radius:14px !important;
  background:linear-gradient(155deg,rgba(7,24,36,.985),rgba(3,12,20,.985)) !important;
  box-shadow:0 20px 54px rgba(0,0,0,.46),0 0 24px rgba(108,247,255,.08),inset 0 0 18px rgba(108,247,255,.022) !important;
  color:#eaffff !important; font-family:'Orbitron',sans-serif !important;
}
.dc-popup-close{position:absolute !important;top:7px !important;right:7px !important;width:26px !important;height:26px !important;display:grid !important;place-items:center !important;margin:0 !important;padding:0 !important;background:rgba(5,22,32,.86) !important;border:1px solid rgba(108,247,255,.20) !important;color:#bceff5 !important;clip-path:polygon(18% 0,82% 0,100% 25%,100% 75%,82% 100%,18% 100%,0 75%,0 25%) !important;font:900 15px/1 Arial,sans-serif !important;cursor:pointer !important;}
.dc-popup-icon{height:22px !important;margin:0 0 7px !important;font-size:0 !important;text-align:center !important;}
.dc-popup-icon::before{content:'✦';font:900 20px/22px Arial,sans-serif;color:var(--dc-cyan);text-shadow:0 0 10px rgba(108,247,255,.38);}
.dc-popup-legacy-icon{font-size:27px !important;line-height:28px !important;margin:0 0 3px !important;text-align:center !important;}
.dc-popup-title{margin:2px 34px 9px !important;font-size:12px !important;line-height:1.3 !important;letter-spacing:1px !important;color:#eaffff !important;text-align:center !important;}
.dc-popup-message{margin:7px 0 !important;font-size:9px !important;line-height:1.55 !important;color:#d4edf1 !important;text-align:center !important;white-space:pre-line !important;}
.dc-popup-html{max-height:53vh !important;overflow:auto !important;text-align:left !important;}
.dc-popup-actions{display:flex !important;gap:7px !important;margin-top:11px !important;}
.dc-popup-actions button{flex:1 !important;min-width:0 !important;min-height:36px !important;padding:8px 10px !important;margin:0 !important;border-radius:7px !important;border:1px solid rgba(108,247,255,.24) !important;background:linear-gradient(145deg,rgba(18,70,87,.96),rgba(6,29,41,.98)) !important;color:#eaffff !important;font:800 7.5px/1 'Orbitron',sans-serif !important;letter-spacing:.8px !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;cursor:pointer !important;box-shadow:0 4px 0 rgba(0,0,0,.34),0 0 9px rgba(108,247,255,.07) !important;}
.dc-popup-actions .popup-si-btn{background:linear-gradient(145deg,rgba(12,101,74,.96),rgba(7,43,34,.98)) !important;}
.dc-popup-actions .popup-no-btn{background:linear-gradient(145deg,rgba(100,35,54,.96),rgba(48,16,28,.98)) !important;}
.dc-popup-actions .popup-recompensa-btn,.dc-popup-actions .popup-epico-btn{border-color:rgba(255,215,106,.34) !important;background:linear-gradient(145deg,rgba(83,68,23,.96),rgba(47,34,8,.98)) !important;color:#ffe69a !important;}
.dc-popup-rewards{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:6px !important;margin:10px 0 !important;}
.dc-popup-rewards p{margin:0 !important;padding:8px !important;border:1px solid rgba(108,247,255,.10) !important;border-radius:7px !important;background:rgba(7,30,41,.62) !important;font-size:8px !important;line-height:1.25 !important;overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;}
.dc-popup-closing{opacity:0 !important;transition:opacity .14s ease !important;}

/* Story cards and evolution cards: same footprint, same spacing, scroll only inside content */
.dc-story-card,.dc-evolution-card{
  min-height:0 !important; max-height:none !important; overflow:visible !important; padding:0 !important; border:0 !important; border-radius:0 !important;
  background:none !important; box-shadow:none !important; color:#eaffff !important;
}
.dc-story-card > div[style],.dc-evolution-card > div[style]{min-height:0 !important;max-height:none !important;overflow:visible !important;background-size:cover !important;border-radius:10px !important;padding:10px !important;}
.dc-story-card h2,.dc-evolution-card h2{margin:0 30px 7px !important;font-size:12px !important;line-height:1.28 !important;letter-spacing:.7px !important;}
.dc-story-card .dialogo-historia,.dc-evolution-card .dialogo-evo{margin:6px 0 !important;padding:8px !important;border:1px solid rgba(108,247,255,.08) !important;border-radius:8px !important;background:rgba(1,12,20,.60) !important;line-height:1.45 !important;}
.dc-story-card .dialogo-historia span:last-child,.dc-evolution-card .dialogo-evo span:last-child{font-size:8px !important;line-height:1.45 !important;}
.dc-story-card img,.dc-evolution-card img{max-width:74px !important;max-height:84px !important;object-fit:contain !important;}
.dc-story-card p,.dc-evolution-card p{font-size:6.5px !important;}

.dc-evolution-notice-overlay{background:rgba(0,0,0,.45) !important;}
.dc-evolution-notice{max-width:min(390px,86vw) !important;padding:13px 18px !important;border:1px solid rgba(255,215,106,.38) !important;border-radius:9px !important;background:linear-gradient(145deg,rgba(30,31,43,.98),rgba(8,14,22,.98)) !important;color:#ffe39a !important;box-shadow:0 0 28px rgba(255,215,106,.14) !important;font:800 8px/1.5 'Orbitron',sans-serif !important;letter-spacing:1px !important;text-align:center !important;}

@media(max-width:700px){
  #sideMenuLeft,#sideMenuRight{width:118px !important;}
  #sideMenuLeft button,#sideMenuRight button{height:36px !important;min-height:36px !important;grid-template-columns:23px minmax(0,1fr) !important;}
  .dc-side-icon{width:20px !important;height:20px !important;}
  .dc-side-label{font-size:7px !important;}
  #dcBottomDock{gap:4px;bottom:6px;}
  #dcBottomDock .dc-utility-btn,#btnDailyLogin.dc-utility-btn,#digiHubFab{width:40px !important;min-width:40px !important;height:40px !important;min-height:40px !important;flex-basis:40px !important;}
  #dcBottomDock .dc-util-label{font-size:4.2px !important;}
  #hudContainer{gap:5px !important;right:8px !important;}
  #digiHubPanel{right:8px !important;width:calc(100vw - 16px) !important;top:67px !important;}
  .dc-popup-rewards{grid-template-columns:1fr !important;}
}