:root{
  --bg-1:#020617;
  --bg-2:#0a0f2c;
  --panel-1:#0b1023;
  --panel-2:#101935;
  --panel-soft:rgba(0,255,255,.06);
  --line:rgba(0,255,255,.14);
  --line-strong:rgba(0,255,255,.2);
  --cyan:#00f7ff;
  --cyan-soft:#7efcff;
  --magenta:#ff00ff;
  --text:#fff;
  --text-soft:#e6faff;
  --shadow-soft:0 8px 24px rgba(0,0,0,.2);
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  min-height:100vh;
  font-family:Orbitron,sans-serif;
  color:var(--text);
  position:relative;
  overflow-x:hidden;
  background:
    radial-gradient(circle at top,rgba(0,255,255,.1),transparent 32%),
    radial-gradient(circle at bottom,rgba(255,0,255,.08),transparent 30%),
    linear-gradient(180deg,var(--bg-1),var(--bg-2) 60%,var(--bg-1));
  background-attachment:fixed
}

body::before,body::after{
  content:"";
  position:fixed;
  top:0;
  bottom:0;
  width:max(0px,calc((100vw - 1400px)/2));
  pointer-events:none;
  z-index:0
}

body::before{
  left:0;
  background:
    linear-gradient(90deg,rgba(0,247,255,.04) 0%,transparent 100%),
    radial-gradient(ellipse 80% 50% at 10% 50%,rgba(0,247,255,.12) 0%,transparent 70%),
    radial-gradient(ellipse 60% 40% at 5% 30%,rgba(255,0,255,.08) 0%,transparent 60%),
    radial-gradient(ellipse 50% 60% at 15% 70%,rgba(0,247,255,.06) 0%,transparent 70%),
    linear-gradient(0deg,rgba(0,247,255,.03) 0%,transparent 50%,rgba(255,0,255,.02) 100%);
  border-right:1px solid rgba(0,247,255,.08);
  box-shadow:inset -40px 0 80px rgba(0,247,255,.05),inset 20px 0 40px rgba(255,0,255,.03)
}

body::after{
  right:0;
  background:
    linear-gradient(-90deg,rgba(255,0,255,.04) 0%,transparent 100%),
    radial-gradient(ellipse 80% 50% at 90% 50%,rgba(255,0,255,.12) 0%,transparent 70%),
    radial-gradient(ellipse 60% 40% at 95% 30%,rgba(0,247,255,.08) 0%,transparent 60%),
    radial-gradient(ellipse 50% 60% at 85% 70%,rgba(255,0,255,.06) 0%,transparent 70%),
    linear-gradient(0deg,rgba(255,0,255,.03) 0%,transparent 50%,rgba(0,247,255,.02) 100%);
  border-left:1px solid rgba(255,0,255,.08);
  box-shadow:inset 40px 0 80px rgba(255,0,255,.05),inset -20px 0 40px rgba(0,247,255,.03)
}

.side-stars{
  position:fixed;
  top:0;
  bottom:0;
  width:max(0px,calc((100vw - 1400px)/2));
  pointer-events:none;
  z-index:1;
  overflow:hidden
}

.side-stars-left,.side-stars-right{
  pointer-events:auto
}

.side-stars-left{
  left:0;
  background:linear-gradient(90deg,rgba(0,247,255,.06) 0%,transparent 80%)
}

.side-stars-right{
  right:0;
  background:linear-gradient(-90deg,rgba(255,0,255,.06) 0%,transparent 80%)
}

.side-star{
  position:absolute;
  border-radius:50%;
  background:#fff;
  animation:starTwinkle 3s ease-in-out infinite
}

.side-star.small{width:2px;height:2px;box-shadow:0 0 4px rgba(255,255,255,.6)}
.side-star.medium{width:3px;height:3px;box-shadow:0 0 6px rgba(0,247,255,.8),0 0 10px rgba(0,247,255,.4)}
.side-star.large{width:4px;height:4px;box-shadow:0 0 8px rgba(0,247,255,1),0 0 15px rgba(0,247,255,.6),0 0 20px rgba(255,0,255,.3)}

.side-star.cyan{background:#7efcff;box-shadow:0 0 6px #7efcff,0 0 12px rgba(126,252,255,.5)}
.side-star.magenta{background:#ff6bff;box-shadow:0 0 6px #ff6bff,0 0 12px rgba(255,107,255,.5)}

.side-mouse-stars{
  position:absolute;
  inset:0;
  pointer-events:auto;
  overflow:hidden
}

.side-mouse-star{
  position:absolute;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 4px rgba(255,255,255,.8),0 0 8px rgba(0,247,255,.4);
  animation:fade .8s ease-out forwards;
  pointer-events:none
}

.side-stars-right .side-mouse-star{
  box-shadow:0 0 4px rgba(255,255,255,.8),0 0 8px rgba(255,0,255,.4)
}

.side-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(0,247,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,247,255,.06) 1px,transparent 1px);
  background-size:30px 30px;
  mask-image:linear-gradient(90deg,#fff 0%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,#fff 0%,transparent 100%)
}

.side-stars-right .side-grid{
  background-image:
    linear-gradient(rgba(255,0,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,0,255,.06) 1px,transparent 1px);
  mask-image:linear-gradient(-90deg,#fff 0%,transparent 100%);
  -webkit-mask-image:linear-gradient(-90deg,#fff 0%,transparent 100%)
}

.side-glow{
  position:absolute;
  width:200px;
  height:200px;
  border-radius:50%;
  filter:blur(60px);
  animation:pulseGlow 4s ease-in-out infinite
}

.side-glow-1{
  top:20%;
  left:10%;
  background:rgba(0,247,255,.15)
}

.side-glow-2{
  top:60%;
  left:30%;
  background:rgba(255,0,255,.12)
}

.side-glow-3{
  top:40%;
  right:20%;
  background:rgba(255,0,255,.15)
}

.side-glow-4{
  bottom:30%;
  right:15%;
  background:rgba(0,247,255,.12)
}

.side-line{
  position:absolute;
  width:1px;
  height:100px;
  background:linear-gradient(to bottom,transparent,rgba(0,247,255,.4),transparent);
  animation:linePulse 2s ease-in-out infinite
}

.side-line-1{top:15%;left:25%}
.side-line-2{top:45%;left:45%}
.side-line-3{top:75%;left:30%}
.side-line-4{top:25%;right:30%}
.side-line-5{top:55%;right:45%}
.side-line-6{top:85%;right:25%}

@keyframes starTwinkle{
  0%,100%{opacity:.5;transform:scale(1)}
  50%{opacity:1;transform:scale(1.2)}
}

@keyframes pulseGlow{
  0%,100%{opacity:.5;transform:scale(1)}
  50%{opacity:.8;transform:scale(1.1)}
}

@keyframes linePulse{
  0%,100%{opacity:.3;height:100px}
  50%{opacity:.7;height:120px}
}

@media(max-width:1400px){
  .side-stars,.side-stars-left,.side-stars-right{width:0!important}
}

.padre{
  width:min(1400px,100%);
  margin:0 auto;
  min-height:100vh;
  display:grid;
  grid-template:
    "header header header" 158px
    "nav nav nav" 70px
    "content content aside" 1fr
    "stats stats stats" 72px
    "footer footer footer" 80px
    /1fr 1fr 260px
}

.padre:fullscreen{
  width:100%;
  height:100vh;
  max-width:none;
  margin:0;
  padding:12px;
  overflow:hidden;
  background:
    radial-gradient(circle at top,rgba(0,255,255,.08),transparent 26%),
    radial-gradient(circle at bottom,rgba(255,0,255,.06),transparent 24%),
    linear-gradient(180deg,#030714,#081224 58%,#020617)
}

.padre:fullscreen{
  grid-template:
    "content" minmax(0,1fr)
    "stats" auto
    /minmax(0,1fr)
}

.padre:fullscreen #header,
.padre:fullscreen #nav,
.padre:fullscreen #aside,
.padre:fullscreen #footer{
  display:none
}

.item{
  min-width:0;
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
  position:relative;
  z-index:1
}

#header,#footer,#nav,#stats{background:linear-gradient(135deg,var(--panel-1),var(--panel-2),var(--panel-1))}

#header{
  grid-area:header;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  text-align:center
}

#header::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.16;
  background:
    radial-gradient(circle at 20% 30%,rgba(0,255,255,.18),transparent 18%),
    radial-gradient(circle at 80% 40%,rgba(255,0,255,.12),transparent 20%)
}

.site-title{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:min(1040px,98%);
  margin:0 auto
}

.site-title img{
  display:block;
  width:100%;
  height:auto;
  max-height:175px;
  object-fit:contain;
  filter:drop-shadow(0 0 24px rgba(0,247,255,.35)) drop-shadow(0 12px 16px rgba(0,0,0,.28))
}

.sparkle-layer,.mouse-stars{
  position:absolute;
  inset:0;
  pointer-events:none
}

.sparkle{
  position:absolute;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#fff;
  opacity:.45;
  box-shadow:0 0 4px rgba(255,255,255,.9),0 0 6px rgba(0,247,255,.28);
  animation:twinkle 3s infinite ease-in-out
}

.sparkle.s1{top:20%;left:18%}
.sparkle.s2{top:30%;left:30%}
.sparkle.s3{top:22%;right:22%}
.sparkle.s4{top:60%;right:15%}

.mouse-star{
  position:absolute;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 4px rgba(255,255,255,.8),0 0 8px rgba(0,247,255,.4);
  animation:fade .8s ease-out forwards
}

#nav{
  grid-area:nav;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:14px;
  position:relative;
  z-index:20
}

.nav-cluster{ 
  display:flex; 
  flex-wrap:wrap; 
  justify-content:center; 
  align-items:center; 
  gap:14px; 
  padding:0; 
  border:0; 
  border-radius:0; 
  background:none; 
  box-shadow:none 
} 

.nav-items{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:14px
}

.hamburger-btn{
  display:none;
  align-items:center;
  justify-content:center;
  min-width:58px;
  min-height:54px;
  padding:10px 14px;
  border:1px solid rgba(0,247,255,.24);
  border-radius:14px;
  color:var(--text);
  background:linear-gradient(135deg,rgba(0,247,255,.12),rgba(16,25,53,.28));
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease,color .2s ease
}

.hamburger-btn::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,0) 45%,rgba(0,247,255,.12));
  opacity:.75;
  pointer-events:none
}

.hamburger-btn i{
  position:relative;
  z-index:1;
  font-size:1.3rem;
  color:var(--cyan-soft)
}

.hamburger-btn:hover{
  transform:translateY(-2px);
  background:linear-gradient(135deg,rgba(0,247,255,.22),rgba(16,25,53,.36));
  box-shadow:0 6px 14px rgba(0,247,255,.16)
}

.nav-cluster.open .hamburger-btn i{color:#fff}

.discord-btn,.drop-btn,.auth-btn{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 18px;
  border-radius:14px;
  color:var(--text);
  text-decoration:none;
  font-weight:700;
  border:1px solid rgba(88,101,242,.35);
  background:rgba(88,101,242,.15);
  transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease,color .2s ease;
  cursor:pointer;
  position:relative;
  overflow:hidden
}

.fullscreen-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:58px;
  min-height:54px;
  padding:10px 14px;
  border:1px solid rgba(0,247,255,.24);
  border-radius:14px;
  color:var(--text);
  background:linear-gradient(135deg,rgba(0,247,255,.12),rgba(16,25,53,.28));
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease,color .2s ease
}

.fullscreen-btn::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,0) 45%,rgba(0,247,255,.12));
  pointer-events:none
}

.fullscreen-btn i{
  position:relative;
  z-index:1;
  font-size:1.15rem;
  color:var(--cyan-soft)
}

.fullscreen-btn:hover{
  transform:translateY(-2px);
  background:linear-gradient(135deg,rgba(0,247,255,.22),rgba(16,25,53,.36));
  box-shadow:0 6px 14px rgba(0,247,255,.16)
}

.fullscreen-btn:hover i,.fullscreen-btn.active i{color:#fff}

.fullscreen-btn.active{
  background:linear-gradient(135deg,rgba(0,247,255,.28),rgba(26,188,156,.24));
  box-shadow:0 8px 18px rgba(0,247,255,.18)
}

.discord-btn::before,.drop-btn::before,.auth-btn::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,0) 45%,rgba(0,247,255,.12));
  opacity:.75;
  pointer-events:none
}

.discord-btn i,.drop-btn i,.auth-btn i{font-size:1.2rem;color:#5865F2}

.discord-btn{
  min-width:220px;
  justify-content:space-between;
  border-color:rgba(88,101,242,.28);
  background:linear-gradient(135deg,rgba(88,101,242,.2),rgba(39,49,122,.24))
}

.discord-btn .menu-label,
.auth-btn .menu-label{
  display:flex;
  align-items:center;
  gap:10px
}

.discord-btn .menu-text,
.auth-btn .menu-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.1
}

.discord-btn .menu-text strong,
.auth-btn .menu-text strong{
  font-size:.92rem;
  letter-spacing:1px
}

.discord-btn .menu-text small,
.auth-btn .menu-text small{
  font-family:"Segoe UI",sans-serif;
  font-size:.68rem;
  letter-spacing:.08em;
  color:#c7ceff;
  opacity:.9
}

.discord-btn .menu-arrow{
  font-size:.88rem;
  color:#aeb7ff;
  transition:transform .2s ease,color .2s ease
}

.discord-btn:hover,.drop-btn:hover,.auth-btn:hover{
  background:#5865F2;
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(88,101,242,.28)
}

.discord-btn:hover i,.drop-btn:hover i,.auth-btn:hover i{color:#fff}

.discord-btn:hover .menu-arrow{
  color:#fff;
  transform:translateX(3px)
}

/* DROPDOWN */
.dropdown{
  position:relative;
  display:flex;
  align-items:center
}

.drop-btn{
  font-family:inherit;
  font-size:.95rem;
  min-width:178px;
  justify-content:space-between
}

.drop-btn .menu-label{
  display:flex;
  align-items:center;
  gap:10px
}

.drop-btn .menu-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.1
}

.drop-btn .menu-text strong{
  font-size:.92rem;
  letter-spacing:1px
}

.drop-btn .menu-text small{
  font-family:"Segoe UI",sans-serif;
  font-size:.68rem;
  letter-spacing:.08em;
  color:#b8c4ff;
  opacity:.9
}

.drop-btn .menu-caret{
  font-size:.78rem;
  transition:transform .2s ease
}

.dropdown.open .drop-btn,
.dropdown:hover .drop-btn,
.dropdown:focus-within .drop-btn{
  background:linear-gradient(135deg,rgba(88,101,242,.3),rgba(50,65,210,.34));
  box-shadow:0 8px 18px rgba(88,101,242,.24)
}

.dropdown.open .menu-caret,
.dropdown:hover .menu-caret,
.dropdown:focus-within .menu-caret{
  transform:rotate(180deg)
}

.dropdown::after{
  content:"";
  position:absolute;
  left:0;
  top:100%;
  width:100%;
  height:12px
}

.dropdown-menu{
  position:absolute;
  top:100%;
  left:0;
  min-width:280px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--line-strong);
  border-radius:16px;
  background:
    radial-gradient(circle at top right,rgba(0,247,255,.08),transparent 38%),
    linear-gradient(180deg,var(--panel-2),var(--panel-1));
  box-shadow:0 16px 34px rgba(0,0,0,.34);
  margin-top:8px;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px) scale(.98);
  transform-origin:top left;
  transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
  pointer-events:none
}

.dropdown.open .dropdown-menu,
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
  pointer-events:auto
}

.dropdown-menu a{
  padding:14px 16px;
  color:var(--text-soft);
  text-decoration:none;
  font-size:.9rem;
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background-color .2s ease,padding-left .2s ease,color .2s ease;
  display:flex;
  align-items:center;
  gap:12px
}

.dropdown-menu a:last-child{border-bottom:0}

.dropdown-menu a:hover{
  background:rgba(88,101,242,.22);
  color:#fff;
  padding-left:18px
}

.menu-entry-icon{
  width:32px;
  height:32px;
  border-radius:10px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(135deg,rgba(88,101,242,.22),rgba(0,247,255,.12))
}

.menu-entry-copy{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0
}

.menu-entry-copy strong{
  font-size:.86rem;
  color:#fff;
  letter-spacing:.04em
}

.menu-entry-copy span{
  font-family:"Segoe UI",sans-serif;
  font-size:.72rem;
  color:#b7c5eb;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.menu-entry-arrow{
  margin-left:auto;
  color:rgba(255,255,255,.5);
  transition:transform .2s ease,color .2s ease
}

.dropdown-menu a:hover .menu-entry-arrow{
  transform:translateX(3px);
  color:#fff
}

.auth-panel{
  display:flex;
  align-items:center;
  gap:10px;
  position:relative
}

.auth-btn{
  min-width:190px;
  justify-content:flex-start;
  border-color:rgba(0,247,255,.28);
  background:linear-gradient(135deg,rgba(0,247,255,.14),rgba(39,49,122,.24));
  font-family:inherit;
  font-size:.95rem
}

.auth-btn.signed-in{
  border-color:rgba(52,211,153,.34);
  background:linear-gradient(135deg,rgba(52,211,153,.18),rgba(0,247,255,.16))
}

.auth-btn.signed-in i{color:#34d399}

.auth-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:190px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  z-index:30;
  border:1px solid var(--line-strong);
  border-radius:8px;
  background:
    radial-gradient(circle at top right,rgba(0,247,255,.08),transparent 38%),
    linear-gradient(180deg,var(--panel-2),var(--panel-1));
  box-shadow:0 16px 34px rgba(0,0,0,.34)
}

.auth-menu[hidden]{
  display:none
}

.auth-menu-coins{
  min-height:42px;
  padding:10px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff8d7;
  background:linear-gradient(135deg,rgba(250,204,21,.12),rgba(0,247,255,.06));
  font-size:.78rem
}

.auth-menu-coins i{
  color:#facc15;
  filter:drop-shadow(0 0 8px rgba(250,204,21,.36))
}

.auth-menu-item{
  min-height:46px;
  padding:12px 14px;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.06);
  color:var(--text-soft);
  background:transparent;
  font-family:inherit;
  font-size:.82rem;
  font-weight:700;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
  text-align:left;
  transition:background-color .18s ease,color .18s ease
}

.auth-menu-item:last-child{
  border-bottom:0
}

.auth-menu-item:hover{
  color:#fff;
  background:rgba(88,101,242,.22)
}

.auth-menu-item.danger:hover{
  background:rgba(251,113,133,.18)
}

.auth-menu-item.admin-only{
  display:none;
  border:1px solid rgba(250,204,21,.3);
  background:rgba(250,204,21,.1)
}

.auth-menu-item.admin-only i{
  color:#fbbf24
}

.auth-menu-item.admin-only:hover{
  background:rgba(250,204,21,.2)
}

.auth-menu-item.admin-only.visible{
  display:flex
}

.auth-menu-item i{
  color:var(--cyan-soft)
}

.auth-logout-btn{
  min-height:48px;
  padding:10px 14px;
  border:1px solid rgba(251,113,133,.3);
  border-radius:10px;
  color:#fff;
  font-family:inherit;
  font-weight:700;
  background:rgba(251,113,133,.14);
  cursor:pointer;
  transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease
}

.auth-logout-btn:hover{
  transform:translateY(-2px);
  background:rgba(251,113,133,.24);
  box-shadow:0 6px 14px rgba(251,113,133,.16)
}

.auth-modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(2,6,23,.72);
  backdrop-filter:blur(10px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease,visibility .2s ease
}

.auth-modal.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto
}

.auth-dialog{
  width:min(440px,100%);
  position:relative;
  padding:26px;
  border:1px solid var(--line-strong);
  border-radius:8px;
  background:
    radial-gradient(circle at top right,rgba(0,247,255,.12),transparent 34%),
    linear-gradient(180deg,var(--panel-2),var(--panel-1));
  box-shadow:0 22px 56px rgba(0,0,0,.46)
}

.auth-close{
  position:absolute;
  top:12px;
  right:12px;
  width:38px;
  height:38px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  color:#fff;
  background:rgba(255,255,255,.06);
  cursor:pointer
}

.auth-copy{
  padding-right:42px
}

.auth-kicker{
  display:inline-block;
  margin-bottom:8px;
  color:var(--cyan-soft);
  font-size:.7rem;
  letter-spacing:1px;
  text-transform:uppercase
}

.auth-copy h2{
  font-size:1.35rem;
  line-height:1.25;
  margin-bottom:10px
}

.auth-copy p{
  font-family:"Segoe UI",sans-serif;
  color:#c7d2fe;
  line-height:1.5;
  font-size:.95rem
}

.auth-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:22px 0 18px
}

.auth-tab{
  padding:11px 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  color:#dffcff;
  background:rgba(255,255,255,.05);
  font-family:inherit;
  font-weight:700;
  cursor:pointer
}

.auth-tab.active{
  color:#fff;
  border-color:rgba(0,247,255,.34);
  background:rgba(0,247,255,.14)
}

.auth-form{
  display:flex;
  flex-direction:column;
  gap:14px
}

.auth-field{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:.75rem;
  letter-spacing:1px;
  color:var(--cyan-soft)
}

.auth-field input{
  width:100%;
  min-height:46px;
  padding:11px 12px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:8px;
  color:#fff;
  background:rgba(2,6,23,.72);
  font:600 .95rem "Segoe UI",sans-serif;
  outline:none
}

.auth-field input:focus{
  border-color:rgba(0,247,255,.55);
  box-shadow:0 0 0 3px rgba(0,247,255,.1)
}

.auth-remember{
  display:flex;
  align-items:center;
  gap:10px;
  color:#dffcff;
  font:600 .9rem "Segoe UI",sans-serif
}

.auth-remember input{
  width:18px;
  height:18px;
  accent-color:#00f7ff
}

.auth-message{
  min-height:20px;
  color:#fca5a5;
  font:600 .88rem "Segoe UI",sans-serif
}

.auth-message.success{
  color:#86efac
}

.auth-submit{
  min-height:48px;
  border:1px solid rgba(0,247,255,.35);
  border-radius:8px;
  color:#fff;
  background:linear-gradient(135deg,rgba(0,247,255,.3),rgba(88,101,242,.45));
  font-family:inherit;
  font-weight:900;
  cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease
}

.auth-submit:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(0,247,255,.16)
}

.auth-submit:disabled{
  opacity:.62;
  cursor:wait;
  transform:none
}

.skin-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:20px
}

.skin-option{
  min-height:104px;
  padding:10px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  color:#e6faff;
  background:rgba(255,255,255,.04);
  font-family:inherit;
  font-size:.78rem;
  font-weight:700;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  transition:transform .18s ease,border-color .18s ease,background-color .18s ease,box-shadow .18s ease
}

.skin-option:hover{
  transform:translateY(-2px);
  border-color:rgba(0,247,255,.32);
  background:rgba(0,247,255,.08)
}

.skin-option.active{
  border-color:rgba(0,247,255,.5);
  background:rgba(0,247,255,.12);
  box-shadow:0 0 14px rgba(0,247,255,.08)
}

.skin-option:disabled,
.skin-option[aria-disabled="true"]{
  opacity:.42;
  box-shadow:none
}

.skin-option[aria-disabled="true"]:hover{
  border-color:rgba(251,113,133,.24);
  background:rgba(251,113,133,.08)
}

.skin-option.locked{
  opacity:.52
}

.skin-copy{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  text-align:center
}

.skin-copy strong{
  font-size:.78rem;
  color:#fff
}

.skin-copy small{
  font-family:"Segoe UI",sans-serif;
  font-size:.68rem;
  color:#b7c5eb;
  line-height:1.25
}

.skin-preview{
  width:100%;
  height:58px;
  border-radius:8px;
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 0 18px rgba(0,0,0,.28),0 0 12px rgba(255,255,255,.08);
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 70% 18%,rgba(255,255,255,.24),transparent 8px),
    linear-gradient(180deg,#081224,#030713)
}

.skin-preview::before{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  top:9px;
  height:20px;
  border-radius:5px;
  background:
    linear-gradient(90deg,transparent 0 32%,rgba(255,255,255,.18) 32% 34%,transparent 34% 65%,rgba(255,255,255,.18) 65% 67%,transparent 67%),
    linear-gradient(var(--skin-brick-1),var(--skin-brick-2));
  box-shadow:0 0 12px var(--skin-glow)
}

.skin-preview::after{
  content:"";
  position:absolute;
  width:12px;
  height:12px;
  border-radius:50%;
  right:26%;
  top:32px;
  background:var(--skin-ball);
  box-shadow:0 0 14px var(--skin-glow)
}

.skin-paddle{
  position:absolute;
  left:24%;
  right:24%;
  bottom:8px;
  height:8px;
  border-radius:8px;
  background:linear-gradient(90deg,var(--skin-paddle-1),var(--skin-paddle-2),var(--skin-paddle-3));
  box-shadow:0 0 14px var(--skin-glow)
}

.skin-preview.classic{
  --skin-brick-1:#22d3ee;--skin-brick-2:#2563eb;--skin-ball:#fff;--skin-glow:rgba(34,211,238,.46);
  --skin-paddle-1:#22d3ee;--skin-paddle-2:#60a5fa;--skin-paddle-3:#d946ef
}
.skin-preview.ember{
  --skin-brick-1:#fb7185;--skin-brick-2:#b91c1c;--skin-ball:#fff1c2;--skin-glow:rgba(249,115,22,.52);
  --skin-paddle-1:#fb7185;--skin-paddle-2:#f97316;--skin-paddle-3:#facc15
}
.skin-preview.mint{
  --skin-brick-1:#34d399;--skin-brick-2:#0f766e;--skin-ball:#dcfff4;--skin-glow:rgba(45,212,191,.48);
  --skin-paddle-1:#34d399;--skin-paddle-2:#2dd4bf;--skin-paddle-3:#7dd3fc
}
.skin-preview.gold{
  --skin-brick-1:#fef3c7;--skin-brick-2:#b45309;--skin-ball:#fff7d6;--skin-glow:rgba(250,204,21,.52);
  --skin-paddle-1:#fef3c7;--skin-paddle-2:#facc15;--skin-paddle-3:#f59e0b
}
.skin-preview.void{
  --skin-brick-1:#a78bfa;--skin-brick-2:#312e81;--skin-ball:#ede9fe;--skin-glow:rgba(167,139,250,.52);
  --skin-paddle-1:#a78bfa;--skin-paddle-2:#6366f1;--skin-paddle-3:#0f172a
}
.skin-preview.galaxy{
  --skin-brick-1:#ec4899;--skin-brick-2:#4338ca;--skin-ball:#fdf4ff;--skin-glow:rgba(217,70,239,.52);
  --skin-paddle-1:#ec4899;--skin-paddle-2:#8b5cf6;--skin-paddle-3:#22d3ee
}
.skin-preview.ruby{
  --skin-brick-1:#ff8a8a;--skin-brick-2:#9f1239;--skin-ball:#fff0f0;--skin-glow:rgba(225,29,72,.55);
  --skin-paddle-1:#ff8a8a;--skin-paddle-2:#e11d48;--skin-paddle-3:#3b0712
}
.skin-preview.prism{
  --skin-brick-1:#22d3ee;--skin-brick-2:#7c3aed;--skin-ball:#fff;--skin-glow:rgba(167,139,250,.58);
  --skin-paddle-1:#22d3ee;--skin-paddle-2:#a78bfa;--skin-paddle-3:#facc15
}

.shop-dialog{
  max-width:760px
}

.achievements-dialog{
  max-width:800px;
  max-height:90vh;
  overflow:hidden;
  display:flex;
  flex-direction:column
}

.achievements-progress{
  display:flex;
  align-items:center;
  gap:14px;
  margin:16px 0;
  padding:14px;
  border-radius:12px;
  background:rgba(251,191,36,.08);
  border:1px solid rgba(251,191,36,.2)
}

.achievements-progress-bar{
  flex:1;
  height:12px;
  border-radius:6px;
  background:rgba(255,255,255,.08);
  overflow:hidden
}

.achievements-progress-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#fbbf24,#f97316);
  border-radius:6px;
  transition:width .4s ease
}

.achievements-progress-text{
  font-family:Orbitron,sans-serif;
  font-size:.85rem;
  font-weight:700;
  color:#fbbf24;
  white-space:nowrap
}

.achievements-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:12px;
  overflow-y:auto;
  padding-right:8px;
  max-height:calc(90vh - 200px)
}

.achievement-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:16px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  text-align:center;
  transition:all .2s ease;
  cursor:default;
  min-height:130px
}

.achievement-card.unlocked{
  border-color:rgba(251,191,36,.4);
  background:linear-gradient(135deg,rgba(251,191,36,.12),rgba(249,115,22,.08));
  box-shadow:0 0 20px rgba(251,191,36,.1)
}

.achievement-card.locked{
  opacity:.5
}

.achievement-card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 20px rgba(0,0,0,.2)
}

.achievement-icon{
  font-size:2rem;
  line-height:1;
  filter:drop-shadow(0 0 8px rgba(251,191,36,.4))
}

.achievement-card.locked .achievement-icon{
  filter:grayscale(1) opacity(.4)
}

.achievement-name{
  font-family:Orbitron,sans-serif;
  font-size:.75rem;
  font-weight:700;
  color:#fff;
  letter-spacing:.5px
}

.achievement-desc{
  font-family:"Segoe UI",sans-serif;
  font-size:.68rem;
  color:#b7c5eb;
  line-height:1.3
}

.achievement-card.unlocked .achievement-name{
  color:#fbbf24
}

.achievement-notify{
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:1000;
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 20px;
  border-radius:14px;
  border:1px solid rgba(251,191,36,.4);
  background:linear-gradient(135deg,rgba(15,23,42,.96),rgba(30,41,59,.96));
  box-shadow:0 10px 40px rgba(251,191,36,.2),0 0 30px rgba(251,191,36,.1);
  animation:slideInAchievement .5s ease forwards;
  max-width:340px
}

@keyframes slideInAchievement{
  from{transform:translateX(120%);opacity:0}
  to{transform:translateX(0);opacity:1}
}

.achievement-notify-icon{
  font-size:2.5rem;
  line-height:1
}

.achievement-notify-content{
  display:flex;
  flex-direction:column;
  gap:4px
}

.achievement-notify-title{
  font-family:Orbitron,sans-serif;
  font-size:.75rem;
  font-weight:700;
  color:#fbbf24;
  letter-spacing:.5px
}

.achievement-notify-name{
  font-family:Orbitron,sans-serif;
  font-size:1rem;
  font-weight:900;
  color:#fff
}

.levels-dialog{
  max-width:600px
}

.levels-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
  margin-top:20px;
  max-height:calc(90vh - 200px);
  overflow-y:auto;
  padding-right:8px
}

.level-select-btn{
  min-height:80px;
  padding:12px 8px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  color:#e6faff;
  background:rgba(255,255,255,.04);
  font-family:inherit;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-align:center;
  transition:all .18s ease
}

.level-select-btn:hover{
  transform:translateY(-2px);
  border-color:rgba(0,247,255,.4);
  background:rgba(0,247,255,.1);
  box-shadow:0 4px 16px rgba(0,247,255,.15)
}

.level-select-btn.boss{
  border-color:rgba(251,191,36,.4);
  background:linear-gradient(135deg,rgba(251,191,36,.1),rgba(239,68,68,.05))
}

.level-select-btn.boss:hover{
  border-color:rgba(251,191,36,.6);
  background:linear-gradient(135deg,rgba(251,191,36,.15),rgba(239,68,68,.1));
  box-shadow:0 4px 16px rgba(251,191,36,.2)
}

.level-select-btn .level-num{
  font-size:1.4rem;
  font-weight:900;
  color:#fff
}

.level-select-btn.boss .level-num{
  color:#fbbf24
}

.level-select-btn .level-label{
  font-size:.65rem;
  color:rgba(255,255,255,.6);
  text-transform:uppercase;
  letter-spacing:.5px
}

.shop-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-top:20px
}

.shop-card{
  min-height:154px;
  padding:10px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  color:#e6faff;
  background:rgba(255,255,255,.04);
  font-family:inherit;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  text-align:center;
  transition:transform .18s ease,border-color .18s ease,background-color .18s ease,box-shadow .18s ease
}

.shop-card:hover{
  transform:translateY(-2px);
  border-color:rgba(0,247,255,.32);
  background:rgba(0,247,255,.08)
}

.shop-card.active{
  border-color:rgba(52,211,153,.5);
  box-shadow:0 0 18px rgba(52,211,153,.12)
}

.shop-card.locked{
  opacity:.62
}

.shop-preview{
  width:100%;
  height:52px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 0 18px rgba(0,0,0,.28),0 0 12px rgba(255,255,255,.08)
}

.shop-card strong{
  font-size:.78rem;
  color:#fff
}

.shop-card small{
  min-height:30px;
  font-family:"Segoe UI",sans-serif;
  font-size:.68rem;
  color:#b7c5eb;
  line-height:1.25
}

.shop-action{
  margin-top:auto;
  width:100%;
  padding:7px 8px;
  border-radius:8px;
  color:#fff8d7;
  background:rgba(250,204,21,.12);
  border:1px solid rgba(250,204,21,.22);
  font-size:.66rem
}

.shop-card.active .shop-action{
  color:#d1fae5;
  background:rgba(52,211,153,.14);
  border-color:rgba(52,211,153,.28)
}

.shop-card.ruby .shop-preview{background:linear-gradient(135deg,#ff8a8a,#e11d48,#3b0712)}
.shop-card.prism .shop-preview{background:linear-gradient(135deg,#22d3ee,#a78bfa,#f472b6,#facc15)}
.shop-card.comet .shop-preview{background:radial-gradient(circle at 74% 32%,#fff 0 7px,transparent 8px),linear-gradient(120deg,transparent 0 32%,rgba(125,211,252,.8) 33%,transparent 68%),#071022}
.shop-card.plasma .shop-preview{background:radial-gradient(circle,#fff 0 8px,#a78bfa 9px 14px,transparent 15px),radial-gradient(circle at 20% 70%,rgba(34,211,238,.35),transparent 24px),#090b2a}
.shop-card.confetti .shop-preview{background:radial-gradient(circle at 20% 30%,#facc15 0 3px,transparent 4px),radial-gradient(circle at 70% 26%,#22d3ee 0 3px,transparent 4px),radial-gradient(circle at 52% 70%,#f472b6 0 3px,transparent 4px),#071022}
.shop-card.sparks .shop-preview{background:linear-gradient(45deg,transparent 0 44%,#facc15 45% 48%,transparent 49%),linear-gradient(-35deg,transparent 0 48%,#fb7185 49% 52%,transparent 53%),#140b16}
.shop-card.aurora .shop-preview{background:linear-gradient(120deg,rgba(34,211,238,.25),transparent 30%),linear-gradient(60deg,transparent 20%,rgba(52,211,153,.65),rgba(244,114,182,.45),transparent 80%),#06111f}
.shop-card.grid .shop-preview{background:linear-gradient(rgba(34,211,238,.24) 1px,transparent 1px),linear-gradient(90deg,rgba(34,211,238,.24) 1px,transparent 1px),#06111f;background-size:12px 12px}

/* CONTENT */
#content{
  grid-area:content;
  padding:18px;
  overflow:auto;
  background:
    radial-gradient(circle at 15% 20%,rgba(0,255,255,.08),transparent 25%),
    radial-gradient(circle at 85% 75%,rgba(255,0,255,.08),transparent 25%),
    linear-gradient(180deg,#081224,#050816)
}

/* NUEVO LAYOUT INTERNO DEL CONTENT */
.content-layout{ 
  display:grid; 
  grid-template-columns:minmax(0,1fr); 
  grid-template-areas:"game"; 
  gap:18px; 
  align-items:start; 
  width:100%; 
  height:100% 
} 

.content-layout.has-extras{ 
  grid-template-columns:140px minmax(0,1fr); 
  grid-template-areas:"extras game" 
} 
 
/* PUBLICIDAD IZQUIERDA */  
.extras-aside{  
  grid-area:extras; 
  display:flex;  
  flex-direction:column;  
  gap:14px;  
  padding:10px; 
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(16,25,53,.92),rgba(11,16,35,.92));
  box-shadow:inset 0 0 10px rgba(0,255,255,.05)
}

.extras-title{ 
  text-align:center; 
  font-size:.8rem; 
  letter-spacing:1px; 
  color:var(--cyan-soft);
  text-shadow:0 0 6px rgba(0,247,255,.4)
}

.promo-card{ 
  min-height:120px; 
  padding:12px; 
  border-radius:10px; 
  border:1px solid rgba(255,255,255,.08);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  gap:8px;
  background:linear-gradient(135deg,rgba(255,0,255,.18),rgba(0,247,255,.16));
  box-shadow:0 4px 10px rgba(0,0,0,.14);
  transition:transform .2s ease,box-shadow .2s ease
}

a.promo-card{ 
  color:inherit; 
  text-decoration:none 
} 
 
.promo-card:hover{ 
  transform:translateY(-2px); 
  box-shadow:0 6px 14px rgba(0,247,255,.12) 
} 
 
.promo-card i{ 
  font-size:1.4rem; 
  color:#fff 
} 
 
.promo-card strong{ 
  font-size:.78rem; 
  color:#fff 
} 
 
.promo-card span{ 
  font-size:.65rem; 
  line-height:1.4; 
  color:#dffcff 
} 
 
/* Iconos elaborados para cada publicidad */ 
.promo-card .promo-icon{ 
  position:relative; 
  width:56px; 
  height:56px; 
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  margin-bottom:4px
}
.promo-card .promo-icon i{ 
  position:absolute; 
  font-size:1.5rem 
} 
.promo-card .promo-icon i:first-child{ 
  font-size:2rem; 
  z-index:2 
} 
.promo-card .promo-icon i:last-child{ 
  font-size:.9rem; 
  z-index:3; 
  opacity:.85 
} 
 
/* VPN - Escudo + Wifi */ 
.promo-card.promo-vpn{ 
  background:linear-gradient(135deg,rgba(34,211,238,.15),rgba(52,211,153,.12)); 
  border-color:rgba(34,211,238,.25) 
} 
.promo-card.promo-vpn .promo-icon{ 
  background:linear-gradient(135deg,rgba(34,211,238,.25),rgba(34,211,238,.1)); 
  border:2px solid rgba(34,211,238,.4) 
} 
.promo-card.promo-vpn .promo-icon i:first-child{ 
  color:#22d3ee; 
  text-shadow:0 0 12px rgba(34,211,238,.7) 
} 
.promo-card.promo-vpn .promo-icon i:last-child{ 
  color:#a7f3d0; 
  top:8px; 
  right:8px 
} 
.promo-card.promo-vpn strong{ 
  color:#67e8f9 
} 
.promo-card.promo-vpn:hover{ 
  background:linear-gradient(135deg,rgba(34,211,238,.22),rgba(52,211,153,.18)); 
  box-shadow:0 6px 20px rgba(34,211,238,.3),inset 0 0 20px rgba(34,211,238,.1) 
} 
 
/* Fuken 3D - Cubo 3D */ 
.promo-card.promo-fuken{ 
  background:linear-gradient(135deg,rgba(167,139,250,.15),rgba(139,92,246,.12)); 
  border-color:rgba(167,139,250,.25) 
} 
.promo-card.promo-fuken .promo-icon{ 
  background:linear-gradient(135deg,rgba(167,139,250,.25),rgba(167,139,250,.1)); 
  border:2px solid rgba(167,139,250,.4) 
} 
.promo-card.promo-fuken .promo-icon i:first-child{ 
  color:#a78bfa; 
  text-shadow:0 0 12px rgba(167,139,250,.7) 
} 
.promo-card.promo-fuken .promo-icon i:last-child{ 
  color:#c4b5fd; 
  bottom:6px; 
  left:8px 
} 
.promo-card.promo-fuken strong{ 
  color:#c4b5fd 
} 
.promo-card.promo-fuken:hover{ 
  background:linear-gradient(135deg,rgba(167,139,250,.22),rgba(139,92,246,.18)); 
  box-shadow:0 6px 20px rgba(167,139,250,.3),inset 0 0 20px rgba(167,139,250,.1) 
} 
 
/* Premium Pass - Gema + Estrellas */ 
.promo-card.promo-premium{ 
  background:linear-gradient(135deg,rgba(250,204,21,.2),rgba(251,191,36,.15)); 
  border-color:rgba(250,204,21,.35) 
} 
.promo-card.promo-premium .promo-icon{ 
  background:linear-gradient(135deg,rgba(250,204,21,.3),rgba(250,204,21,.1)); 
  border:2px solid rgba(250,204,21,.5) 
} 
.promo-card.promo-premium .promo-icon i:first-child{ 
  color:#facc15; 
  text-shadow:0 0 15px rgba(250,204,21,.8),0 0 30px rgba(250,204,21,.4) 
} 
.promo-card.promo-premium .promo-icon i:last-child{ 
  color:#fef08a; 
  top:4px; 
  right:6px; 
  animation:adGemSparkle 1.5s ease-in-out infinite 
} 
.promo-card.promo-premium strong{ 
  color:#fde047 
} 
.promo-card.promo-premium:hover{ 
  background:linear-gradient(135deg,rgba(250,204,21,.28),rgba(251,191,36,.22)); 
  box-shadow:0 6px 20px rgba(250,204,21,.35),inset 0 0 20px rgba(250,204,21,.15) 
} 
 
/* Estilos del marquee */ 
.promo-card .promo-marquee{ 
  display:block; 
  width:100%; 
  overflow:hidden; 
  font-size:.65rem;
  line-height:1.4;
  color:#dffcff;
  background:rgba(0,0,0,.2);
  border-radius:4px;
  padding:2px 4px
}
.promo-card .promo-marquee marquee{ 
  direction:ltr 
} 

@keyframes adGemSparkle{
  0%,100%{opacity:.85;transform:scale(1)}
  50%{opacity:1;transform:scale(1.15)}
}

/* ZONA DEL JUEGO */
.game-wrap{ 
  grid-area:game;
  display:flex; 
  justify-content:center; 
  align-items:center; 
  width:100%; 
  min-width:0; 
  padding:10px 12px; 
  border:1px solid var(--line); 
  border-radius:16px; 
  background:linear-gradient(180deg,rgba(7,16,34,.94),rgba(3,8,22,.94)) 
} 
 
#gameArea{ 
  width:100%; 
  display:grid; 
  place-items:center; 
  min-height:380px 
} 

/* Fallback de centrado: si Cloudflare altera el timing del JS o el <style> inyectado,
   estas reglas mantienen el juego centrado dentro de #gameArea. */
#gameArea .nb-hud,
#gameArea .nb-canvas-wrap,
#gameArea .nb-message-row,
#gameArea .nb-mobile-controls{
  margin-left:auto;
  margin-right:auto
}

#gameArea .nb-canvas{
  margin-left:auto;
  margin-right:auto
}

.padre:fullscreen #content{
  padding:0;
  overflow:hidden
}

.padre:fullscreen .content-layout{
  grid-template-columns:minmax(0,1fr);
  gap:0;
  height:100%;
  min-height:0
}

.padre:fullscreen .extras-aside{ 
  display:none 
} 

.padre:fullscreen .game-wrap{
  min-height:100%;
  height:100%;
  align-items:center;
  padding:10px 18px;
  border-radius:8px;
  box-shadow:inset 0 0 16px rgba(0,247,255,.05)
}

.padre:fullscreen #gameArea{
  min-height:0;
  height:100%;
  align-items:center
}

.padre:fullscreen .nb-wrapper{
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center
}

.padre:fullscreen .nb-hud{
  display:none
}

.padre:fullscreen .nb-canvas-wrap{
  max-height:calc(100vh - 170px)
}

.padre:fullscreen .nb-canvas{
  max-height:calc(100vh - 170px);
  width:auto;
  max-width:100%;
  margin:0 auto
}

.padre:fullscreen #stats{
  padding:10px 12px;
  flex-wrap:nowrap;
  overflow:hidden;
  min-height:74px;
  border-radius:8px
}

.padre:fullscreen .stat-box{
  min-width:112px;
  flex:1 1 0
}

/* ASIDE DERECHO */
#aside{
  grid-area:aside;
  padding:22px;
  color:var(--text-soft);
  background:linear-gradient(180deg,#2a0f0f,#020617);
  display:flex;
  flex-direction:column;
  gap:12px
}

.aside-author{
  text-align:center;
  padding:14px 0
}

.aside-logo{
  width:120px;
  height:auto;
  filter:drop-shadow(0 0 12px rgba(0,247,255,.3));
  margin-bottom:10px
}

.aside-name{
  font-family:Orbitron,sans-serif;
  font-size:1rem;
  font-weight:700;
  color:#fff;
  margin:0;
  letter-spacing:.5px
}

.aside-role{
  font-size:.8rem;
  color:var(--cyan-soft);
  margin:4px 0 0;
  letter-spacing:.5px
}

.aside-divider{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,247,255,.3),transparent);
  margin:6px 0
}

.aside-desc{
  font-size:.75rem;
  color:var(--cyan-soft);
  text-align:center;
  letter-spacing:.5px;
  margin:0
}

.aside-bio{
  font-family:"Segoe UI",sans-serif;
  font-size:.82rem;
  line-height:1.5;
  color:#b7c5eb;
  margin:0
}

.aside-links{
  display:flex;
  flex-direction:column;
  gap:8px
}

.aside-social{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(0,247,255,.15);
  background:rgba(0,247,255,.05);
  color:#dffcff;
  text-decoration:none;
  font-size:.82rem;
  transition:all .2s ease
}

.aside-social:hover{
  background:rgba(0,247,255,.12);
  border-color:rgba(0,247,255,.35);
  transform:translateX(4px)
}

.aside-social i{
  font-size:1.1rem;
  color:var(--cyan-soft)
}

.aside-section-title{
  font-family:Orbitron,sans-serif;
  font-size:.7rem;
  letter-spacing:1px;
  color:var(--cyan-soft);
  margin:0
}

.aside-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px;
  border-radius:12px;
  border:1px solid rgba(255,0,255,.25);
  background:linear-gradient(135deg,rgba(255,0,255,.12),rgba(0,247,255,.08));
  color:#fff;
  text-decoration:none;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.5px;
  transition:all .2s ease
}

.aside-cta:hover{
  background:linear-gradient(135deg,rgba(255,0,255,.2),rgba(0,247,255,.15));
  border-color:rgba(255,0,255,.4);
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(255,0,255,.15)
}

.aside-cta i{
  font-size:1rem;
  color:#ff6bff
}

/* NUEVA BARRA DE ESTADÍSTICAS */
#stats{
  grid-area:stats;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  padding:10px 18px
}

.stat-box{
  min-width:120px;
  padding:10px 14px;
  border:1px solid var(--line-strong);
  border-radius:10px;
  background:var(--panel-soft);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-shadow:inset 0 0 8px rgba(0,255,255,.04)
}

.stat-label{
  font-size:.65rem;
  letter-spacing:1px;
  color:var(--cyan-soft);
  text-shadow:0 0 4px rgba(0,247,255,.3)
}

.stat-value{
  font-size:1.05rem;
  font-weight:700;
  color:#fff;
  text-shadow:0 0 6px rgba(0,247,255,.35)
}

#footer{
  grid-area:footer;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  font-size:1rem;
  letter-spacing:1px;
  text-shadow:0 0 4px rgba(0,247,255,.4)
}

.footer-logo{
  height:40px;
  width:auto;
  filter:drop-shadow(0 0 8px rgba(0,247,255,.3));
  opacity:.85;
  transition:opacity .2s,filter .2s
}

.footer-logo:hover{
  opacity:1;
  filter:drop-shadow(0 0 12px rgba(0,247,255,.5))
}

.key-a,.key-d{color:#00f7ff}
.key-w{color:#08d746}
.key-space{color:#ff00ff}

@keyframes twinkle{50%{opacity:1;transform:scale(1.2)}}
@keyframes fade{to{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.3)}}

@media (min-width:901px){
  .site-title{animation:flotar 5s ease-in-out infinite}
  @keyframes flotar{50%{transform:translateY(-4px)}}
}

@media (max-width:1100px){
  .padre{
    grid-template:
      "header header" 146px
      "nav nav" auto
      "content aside" 1fr
      "stats stats" auto
      "footer footer" auto
      /minmax(0,1fr) 260px
  }

  #stats{
    flex-wrap:wrap;
    padding:14px
  }
}

@media (max-width:900px){ 
  body{background-attachment:scroll}

  body::before,body::after{
    display:none
  }

  .padre{
    grid-template:
      "header" auto
      "nav" auto
      "content" auto
      "aside" auto
      "stats" auto
      "footer" auto
      /1fr
  }

  #nav{ 
    padding:12px; 
    justify-content:center 
  } 

  .hamburger-btn{
    display:flex
  }

  .nav-cluster{
    width:100%;
    flex-direction:column;
    align-items:stretch
  }

  .nav-items{
    width:100%;
    display:none;
    flex-direction:column;
    align-items:stretch
  }

  .nav-cluster.open .nav-items{
    display:flex
  }

  .site-title{ 
    width:min(760px,98%) 
  } 

  #content,#aside{padding:16px} 

  .content-layout{
    grid-template-columns:1fr;
  }

  .extras-aside{ 
    order:2 
  } 

  .game-wrap{
    order:1
  }

  #aside{
    font-size:.95rem
  }

  #gameArea{
    min-height:280px
  }
}

@media (max-width:560px){
  .discord-btn,.drop-btn,.auth-btn{
    width:100%;
    justify-content:center
  }

  .fullscreen-btn{
    width:100%
  }

  .nav-cluster{
    width:100%
  }

  .discord-btn{
    justify-content:space-between
  }

  .auth-panel{
    width:100%;
    flex-direction:column
  }

  .auth-btn,.auth-logout-btn{
    width:100%
  }

  .auth-menu{
    position:static;
    width:100%;
    min-width:0
  }

  .skin-grid{
    grid-template-columns:1fr
  }

  .shop-grid{
    grid-template-columns:1fr
  }

  .dropdown{
    width:100%
  }

  .dropdown-menu{
    width:100%;
    min-width:0
  }

  .drop-btn .menu-text small,
  .menu-entry-copy span{
    white-space:normal
  }

  .stat-box{
    min-width:calc(50% - 8px)
  }

  #footer{
    text-align:center;
    padding:14px;
    font-size:.85rem
  }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }

  .sparkle-layer,.mouse-stars{
    display:none
  }
}