/* ==========================================================
   DigiClicks UX / Visual System v1
   Cohesion layer: digital + low-poly, no gameplay changes.
   ========================================================== */

:root{
  --dc-bg:#06111a;
  --dc-panel:rgba(7,20,30,.9);
  --dc-panel-2:rgba(10,29,42,.94);
  --dc-cyan:#6cf7ff;
  --dc-blue:#4da8ff;
  --dc-violet:#9b83ff;
  --dc-green:#64f7b2;
  --dc-gold:#ffd76a;
  --dc-red:#ff6f95;
  --dc-text:#e9fdff;
  --dc-muted:#8eb9c4;
  --dc-line:rgba(108,247,255,.24);
  --dc-shadow:0 14px 36px rgba(0,0,0,.34),0 0 24px rgba(47,213,255,.08);
}

/* ---------- Side menus: low-poly digital tiles ---------- */
#sideMenuLeft,
#sideMenuRight{
  width:clamp(150px,18vw,210px);
  padding:10px 8px;
  gap:7px !important;
  border:1px solid rgba(108,247,255,.18);
  background:linear-gradient(160deg,rgba(3,16,26,.96),rgba(8,26,40,.84));
  box-shadow:var(--dc-shadow),inset 0 0 20px rgba(91,216,255,.035);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-radius:18px;
  overflow:hidden;
}
#sideMenuLeft:before,
#sideMenuRight:before{
  display:block;
  padding:2px 8px 7px;
  color:var(--dc-muted);
  font-size:8px;
  letter-spacing:2.4px;
  font-weight:800;
  text-align:center;
  border-bottom:1px solid rgba(108,247,255,.1);
}
#sideMenuLeft:before{content:'MUNDO';}
#sideMenuRight:before{content:'ACCIÓN';}

#sideMenuLeft button,
#sideMenuRight button{
  width:100% !important;
  min-width:0 !important;
  height:54px !important;
  margin:0 !important;
  position:relative !important;
  display:grid !important;
  grid-template-columns:42px 1fr auto;
  align-items:center;
  gap:8px;
  padding:7px 10px !important;
  border:1px solid rgba(108,247,255,.12) !important;
  border-radius:11px !important;
  background:linear-gradient(145deg,rgba(13,41,56,.95),rgba(7,23,35,.96)) !important;
  color:var(--dc-text) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 4px 10px rgba(0,0,0,.22) !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));
  overflow:hidden;
  transition:transform .16s ease, filter .16s ease, border-color .16s ease, background .16s ease;
}
#sideMenuLeft button:before,
#sideMenuRight button:before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(108,247,255,.10),transparent 42%,rgba(155,131,255,.06));
  opacity:.75;
}
#sideMenuLeft button:hover,
#sideMenuRight button:hover{
  transform:translateX(2px) translateY(-1px);
  border-color:rgba(108,247,255,.45) !important;
  filter:brightness(1.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 8px 18px rgba(0,0,0,.28),0 0 18px rgba(73,222,255,.12) !important;
}
#sideMenuRight button:hover{transform:translateX(-2px) translateY(-1px);}
#sideMenuLeft button:active,
#sideMenuRight button:active{transform:translateY(1px) scale(.985);}
#sideMenuLeft button img,
#sideMenuRight button img{display:none !important;}

.dc-side-icon{
  position:relative;
  z-index:2;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid rgba(108,247,255,.16);
  background:linear-gradient(145deg,rgba(23,62,81,.9),rgba(8,27,39,.96));
  clip-path:polygon(18% 0,82% 0,100% 28%,100% 72%,82% 100%,18% 100%,0 72%,0 28%);
  color:var(--dc-cyan);
  box-shadow:inset 0 0 12px rgba(108,247,255,.06),0 0 10px rgba(108,247,255,.06);
}
.dc-side-icon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.dc-side-label{position:relative;z-index:2;text-align:left;font:800 9px/1.15 'Orbitron',sans-serif;letter-spacing:1px;color:#ecfeff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dc-side-sub{position:relative;z-index:2;font:500 7px/1.15 'Orbitron',sans-serif;color:#79aab7;letter-spacing:.6px;text-align:right;white-space:nowrap;}

#sideMenuLeft button.dc-active .dc-side-icon,
#sideMenuRight button.dc-active .dc-side-icon{
  color:#fff;
  border-color:rgba(108,247,255,.5);
  background:linear-gradient(145deg,rgba(16,76,96,.95),rgba(12,30,44,.96));
  box-shadow:0 0 18px rgba(108,247,255,.14),inset 0 0 12px rgba(108,247,255,.09);
}
#sideMenuLeft button.dc-disabled,
#sideMenuRight button.dc-disabled{opacity:.45;}

/* ---------- Toggle handles ---------- */
#toggleMenuLeftBtn,
#toggleMenuRightBtn{
  width:48px !important;
  height:48px !important;
  border:1px solid rgba(108,247,255,.28) !important;
  background:linear-gradient(145deg,rgba(6,24,36,.94),rgba(9,34,48,.88)) !important;
  color:var(--dc-cyan) !important;
  clip-path:polygon(18% 0,82% 0,100% 28%,100% 72%,82% 100%,18% 100%,0 72%,0 28%);
  box-shadow:0 8px 18px rgba(0,0,0,.25),0 0 16px rgba(108,247,255,.1) !important;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}
#toggleMenuRightBtn{color:#d1c8ff !important;border-color:rgba(155,131,255,.3) !important;}
#toggleMenuLeftBtn img,
#toggleMenuRightBtn img{display:none !important;}
#toggleMenuLeftBtn:after,
#toggleMenuRightBtn:after{font:900 20px/1 Arial,sans-serif;}
#toggleMenuLeftBtn:after{content:'›';}
#toggleMenuRightBtn:after{content:'‹';}
#toggleMenuLeftBtn:hover,#toggleMenuRightBtn:hover{filter:brightness(1.12);box-shadow:0 10px 24px rgba(0,0,0,.3),0 0 22px rgba(108,247,255,.16) !important;}

/* ---------- Main game action buttons ---------- */
#actionButtons button{
  position:relative;
  min-height:42px;
  padding:10px 12px !important;
  border:1px solid rgba(108,247,255,.2) !important;
  border-radius:10px !important;
  background:linear-gradient(145deg,rgba(13,38,52,.9),rgba(7,22,33,.96)) !important;
  box-shadow:0 5px 0 rgba(2,10,16,.75),0 10px 18px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.05) !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));
  font-size:.66rem !important;
  letter-spacing:1px;
}
#actionButtons button:hover{filter:brightness(1.08);transform:translateY(-1px);}
#actionButtons button:active{transform:translateY(2px);}

/* ---------- Utility buttons (bottom/right) ---------- */
.dc-utility-btn{
  display:grid !important;
  place-items:center;
  gap:2px;
  padding:5px !important;
  background:linear-gradient(145deg,rgba(8,29,41,.9),rgba(3,15,24,.95)) !important;
  border:1px solid rgba(108,247,255,.2) !important;
  color:#c9fbff !important;
  border-radius:10px !important;
  box-shadow:0 6px 14px rgba(0,0,0,.24),inset 0 0 12px rgba(108,247,255,.04) !important;
  backdrop-filter:blur(8px);
}
.dc-utility-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.dc-utility-btn .dc-util-label{font:800 6px/1 'Orbitron',sans-serif;letter-spacing:.7px;}

/* ---------- Digi Hub ---------- */
#digiHubFab{
  position:absolute;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  z-index:10020;
  width:72px;
  height:48px;
  padding:0;
  border:1px solid rgba(108,247,255,.38);
  color:var(--dc-cyan);
  background:linear-gradient(145deg,rgba(8,31,45,.96),rgba(6,17,27,.94));
  clip-path:polygon(14% 0,86% 0,100% 28%,100% 72%,86% 100%,14% 100%,0 72%,0 28%);
  box-shadow:0 10px 24px rgba(0,0,0,.28),0 0 18px rgba(108,247,255,.12),inset 0 0 16px rgba(108,247,255,.05);
  cursor:pointer;
  font-family:'Orbitron',sans-serif;
  transition:transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
#digiHubFab:hover{filter:brightness(1.12);transform:translateX(-50%) translateY(-1px);box-shadow:0 12px 28px rgba(0,0,0,.3),0 0 28px rgba(108,247,255,.18),inset 0 0 18px rgba(108,247,255,.06);}
#digiHubFab:active{transform:translateX(-50%) translateY(2px) scale(.98);}
#digiHubFab .dc-hub-sigil{font-size:18px;line-height:1;font-weight:900;}
#digiHubFab .dc-hub-label{display:block;margin-top:2px;font-size:7px;font-weight:900;letter-spacing:2px;}
#digiHubFab .dc-hub-dot{position:absolute;top:7px;right:10px;width:5px;height:5px;border-radius:50%;background:var(--dc-green);box-shadow:0 0 8px var(--dc-green);animation:dcHubPulse 1.8s ease-in-out infinite;}
@keyframes dcHubPulse{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1.2)}}

#digiHubPanel{
  position:absolute;
  top:78px;
  left:50%;
  transform:translateX(-50%) translateY(-8px) scale(.985);
  width:min(720px,calc(100vw - 24px));
  max-height:min(66vh,520px);
  overflow:auto;
  z-index:10019;
  padding:14px;
  border:1px solid rgba(108,247,255,.24);
  border-radius:16px;
  background:linear-gradient(150deg,rgba(4,16,26,.97),rgba(8,27,40,.94));
  box-shadow:0 18px 50px rgba(0,0,0,.42),0 0 32px rgba(71,218,255,.08),inset 0 0 22px rgba(108,247,255,.035);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
#digiHubPanel.is-open{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0) scale(1);}
.dc-hub-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 2px 11px;border-bottom:1px solid rgba(108,247,255,.11);}
.dc-hub-title{font-size:12px;font-weight:900;letter-spacing:2px;color:#eaffff;text-shadow:0 0 12px rgba(108,247,255,.24);}
.dc-hub-subtitle{margin-top:3px;font-size:8px;color:#7faeb9;letter-spacing:.7px;}
.dc-hub-close{width:30px;height:30px;padding:0;border:1px solid rgba(108,247,255,.18);background:rgba(7,28,40,.82);color:#dffcff;clip-path:polygon(18% 0,82% 0,100% 28%,100% 72%,82% 100%,18% 100%,0 72%,0 28%);cursor:pointer;font:900 16px/1 Arial,sans-serif;}
.dc-hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px;}
.dc-hub-card{min-width:0;padding:12px;border:1px solid rgba(108,247,255,.12);background:linear-gradient(145deg,rgba(11,39,53,.76),rgba(5,20,30,.84));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));}
.dc-hub-card .kicker{font-size:7px;color:#69c7d5;letter-spacing:1.5px;font-weight:800;}
.dc-hub-card h3{margin:6px 0 4px;font-size:10px;line-height:1.3;color:#ecffff;}
.dc-hub-card p{margin:0;color:#82adb8;font-size:8px;line-height:1.45;min-height:34px;}
.dc-hub-card strong{display:block;margin-top:7px;color:#bffbff;font-size:9px;}
.dc-hub-card button{width:100%;margin-top:9px;padding:8px 7px;border:1px solid rgba(108,247,255,.24);background:rgba(0,190,230,.10);color:#dffcff;clip-path:polygon(0 5px,5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px));cursor:pointer;font:800 7px/1 'Orbitron',sans-serif;letter-spacing:1px;}
.dc-hub-card button:hover{background:rgba(0,220,255,.18);border-color:rgba(108,247,255,.46);}
.dc-hub-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:11px;padding:8px 10px;border-top:1px solid rgba(108,247,255,.1);color:#6f9aa7;font-size:7px;}
.dc-hub-footer b{color:#a7eaf2;letter-spacing:.6px;}

/* Small pulse marker for menu actions */
.dc-menu-dot{width:5px;height:5px;border-radius:50%;background:var(--dc-green);box-shadow:0 0 8px var(--dc-green);justify-self:end;animation:dcHubPulse 1.8s ease-in-out infinite;}

@media(max-width:800px){
  #sideMenuLeft,#sideMenuRight{width:150px;padding:8px 7px;}
  #sideMenuLeft button,#sideMenuRight button{height:50px !important;grid-template-columns:36px 1fr auto;padding:6px 8px !important;}
  .dc-side-icon{width:30px;height:30px}.dc-side-label{font-size:8px}.dc-side-sub{font-size:6px}
  #digiHubFab{top:14px;width:66px;height:44px}.dc-hub-grid{grid-template-columns:1fr;}.dc-hub-card p{min-height:0;}.dc-hub-footer{flex-direction:column;align-items:flex-start;}
}

@media(max-width:520px){
  #sideMenuLeft,#sideMenuRight{width:142px;}
  #sideMenuLeft:before,#sideMenuRight:before{font-size:7px;}
  #sideMenuLeft button,#sideMenuRight button{height:47px !important;grid-template-columns:31px 1fr;}
  .dc-side-sub{display:none;}
  .dc-side-icon{width:27px;height:27px}.dc-side-icon svg{width:15px;height:15px}
  #digiHubPanel{top:66px;max-height:72vh;padding:11px;border-radius:13px;}
  .dc-hub-title{font-size:10px}.dc-hub-subtitle{font-size:7px}
}

/* Main game atmosphere remains unchanged here to avoid touching gameplay layering. */
#hudContainer > div{
  border:1px solid rgba(108,247,255,.13) !important;
  background:linear-gradient(145deg,rgba(5,25,37,.82),rgba(4,15,24,.72)) !important;
  box-shadow:inset 0 0 10px rgba(108,247,255,.03),0 5px 15px rgba(0,0,0,.16) !important;
}
#btnPerfil{filter:drop-shadow(0 0 12px rgba(108,247,255,.18));}