/* -----------------------------------------------------------
   Dragon Ball World — Dokkan-style dark theme (CLEAN)
   Mobile drawer fixed: solid black, clear buttons, overlay
----------------------------------------------------------- */

/* Google fonts */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:wght@300;400;600;700&display=swap');

/* ====== Variables ====== */
:root{
  --bg:#090d16;
  --bg2:#0d1220;
  --panel:#10172a;
  --glass:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.12);

  --txt:#e8edf5;
  --muted:#a3aec0;

  --accent-1:#00e0ff;
  --accent-2:#7a5cff;
  --accent-3:#ff9b00;
  --accent-4:#ffe169;

  --radius-lg:18px;
  --radius-md:14px;
  --radius-sm:10px;

  --shadow-1:0 12px 34px rgba(0,0,0,.50);
  --shadow-2:0 8px 24px rgba(0,0,0,.40);

  --grad-accent:linear-gradient(135deg, var(--accent-1), var(--accent-2));
  --grad-cta:linear-gradient(135deg, var(--accent-3), var(--accent-1));
  --grad-hero:radial-gradient(900px 600px at 85% -10%, rgba(0,224,255,.12), transparent 60%),
              radial-gradient(700px 500px at -10% 30%, rgba(122,92,255,.14), transparent 60%),
              linear-gradient(180deg, var(--bg), var(--bg2));

  --topbar-h:72px; /* header height */
}

/* ====== Base ====== */
*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0; min-height:100%;
  color:var(--txt);
  font:15px/1.6 "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: var(--grad-hero);
  background-image:
    radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,.18) 50%, transparent 51%),
    radial-gradient(1px 1px at 50% 70%, rgba(255,255,255,.12) 50%, transparent 51%),
    radial-gradient(1px 1px at 80% 20%, rgba(255,255,255,.12) 50%, transparent 51%),
    var(--grad-hero);
  background-repeat: repeat, repeat, repeat, no-repeat;
  background-size: 140px 140px, 160px 160px, 180px 180px, cover;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a{ color: var(--accent-1); text-decoration:none; }
a:hover{ text-decoration:underline; }
.hidden{ display:none !important; }

/* ====== Topbar ====== */
.topbar{
  position:fixed; inset:0 0 auto 0; height:var(--topbar-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px;
  background: linear-gradient(180deg, rgba(16,23,42,.96), rgba(16,23,42,.88));
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(0,0,0,.45);
  z-index: 5000; /* virš overlay */
}
.topbar.scrolled{ box-shadow: 0 10px 30px rgba(0,0,0,.55); }
.logo{
  display:flex; align-items:center; gap:12px;
  font-family:"Bebas Neue", system-ui;
  letter-spacing:1px; font-size:26px; line-height:1;
}
.logo::before{
  content:""; width:26px; height:26px; border-radius:50%;
  background: radial-gradient(circle at 40% 40%, #fff 0%, #fff0 45%), var(--grad-cta);
  box-shadow: 0 0 14px rgba(255,155,0,.8), 0 0 22px rgba(0,224,255,.3) inset;
}

/* ====== Nav / Hamburger ====== */
.hamburger{
  all:unset;
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:12px;
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  cursor:pointer;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  z-index: 6000; /* virš visų */
}
.hamburger:hover{ transform: translateY(-1px); box-shadow: var(--shadow-2); }
.nav-links{ display:flex; align-items:center; gap:10px; }
.nav-link{
  display:inline-flex; align-items:center; justify-content:center;
  height:42px; padding:0 16px; border-radius:999px;
  color:var(--txt); border:1px solid transparent;
  background: rgba(255,255,255,.06);
  transition: background .2s ease, box-shadow .2s ease, color .2s ease;
}
.nav-link:hover{ background: rgba(255,255,255,.09); }
.nav-link.active{
  color:#0a0f18; background: var(--grad-accent);
  box-shadow: 0 0 0 4px rgba(0,224,255,.18);
}

/* Desktop: hide hamburger */
@media (min-width: 861px){
  .hamburger{ display:none !important; }
}

/* ====== OVERLAY (true overlay element: #drawerShade) ====== */
#drawerShade{
  position: fixed;
  left:0; right:0; top: var(--topbar-h); bottom:0;
  background:#000;
  opacity:0; pointer-events:none;
  transition: opacity .18s ease;
  z-index: 3000;          /* žemiau menu ir hamburger */
}
#drawerShade.show{ opacity:.72; pointer-events:auto; }

/* ====== Mobile Drawer (final) ====== */
@media (max-width: 860px){
  /* drawer container */
  .nav-links{
    position: fixed !important;
    top: var(--topbar-h) !important;
    right:0; bottom:0;
    width: 86%; max-width: 420px;
    padding: 22px 16px !important;
    background: #000000 !important;     /* solid black */
    border-left: 1px solid #1e2638 !important;
    transform: translateX(100%) !important;
    transition: transform .22s ease !important;
    box-shadow: -18px 0 40px rgba(0,0,0,.85) !important;
    z-index: 4000 !important;           /* virš overlay */
    flex-direction: column; align-items: stretch;
    gap: 0;
  }
  .nav-links.open{ transform: translateX(0) !important; }

  /* big, clear buttons */
  .nav-links .nav-link{
    height:56px !important; margin:10px 0 !important; padding:0 16px !important;
    font-size:19px !important; font-weight:800 !important; letter-spacing:.3px !important;
    color:#ffffff !important; text-shadow:none !important;
    background:#172038 !important; border:1px solid #2b3656 !important;
    border-radius:16px !important; box-shadow:none !important;
  }
  .nav-links .nav-link:hover{
    background:#1f2c52 !important; border-color:#3a4874 !important;
  }
  .nav-links .nav-link.active{
    background: linear-gradient(135deg, #ffd166, #00e0ff) !important;
    color:#0a0f18 !important; border-color:transparent !important;
    box-shadow: 0 0 0 3px rgba(0,224,255,.32) !important;
  }

  /* hide hamburger when open */
  .menu-open .hamburger{ visibility:hidden !important; pointer-events:none !important; }
}

/* ====== Content ====== */
#main-content{ padding-top: calc(var(--topbar-h) + 24px); padding-bottom: 64px; }

.tab{
  width:100%; max-width: 1100px; margin:0 auto 24px auto; padding: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1); position:relative; overflow:hidden;
}
.tab::after{
  content:""; position:absolute; top:-40px; right:-60px;
  width:220px; height:140px; transform: rotate(35deg);
  background: linear-gradient(90deg, rgba(0,224,255,.28), rgba(122,92,255,.18));
  filter: blur(14px);
}

#home{
  padding: clamp(20px, 3.5vw, 36px);
  background:
    radial-gradient(600px 260px at 20% 0%, rgba(255,155,0,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
}
#home h1{
  margin:0 0 10px 0;
  font-family:"Bebas Neue", system-ui;
  font-size: clamp(34px, 7.5vw, 64px);
  letter-spacing:1.2px; line-height:1;
  color:#fff;
  text-shadow: 0 4px 0 rgba(0,0,0,.35), 0 0 28px rgba(0,224,255,.35);
}
#home ul{ list-style:none; padding:0; margin:14px 0 0 0; display:grid; gap:10px; }
#home li{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:14px;
  background: rgba(255,255,255,.04);
  border:1px solid var(--line);
}
#home li::before{
  content:""; width:16px; height:16px; border-radius:50%;
  background: radial-gradient(circle at 40% 40%, #fff 0%, #fff0 45%), var(--grad-accent);
  box-shadow: 0 0 12px rgba(0,224,255,.6);
}
.message{
  margin-top:16px; padding:12px 14px; border-radius:12px;
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(0,224,255,.12), rgba(0,224,255,.06));
  color:#def8ff;
}

/* Buttons */
button, .btn{
  height:48px; padding:0 18px; border-radius:14px;
  border:1px solid transparent; font-weight:700; letter-spacing:.4px;
  background: var(--grad-cta); color:#0a0f18; cursor:pointer;
  box-shadow: 0 10px 28px rgba(255,155,0,.25);
  transition: transform .12s ease, box-shadow .2s ease, filter .16s ease;
}
button:hover, .btn:hover{ transform: translateY(-2px); filter: brightness(1.05); }
button:active, .btn:active{ transform: translateY(0); box-shadow:none; }
a.btn-link{
  display:inline-flex; align-items:center; justify-content:center;
  height:48px; padding:0 18px; border-radius:14px;
  color:#0a0f18; background: var(--grad-accent);
  box-shadow: 0 8px 24px rgba(0,224,255,.22);
}

/* News */
#news{ padding: 22px; }
#news h2{
  margin:0 0 12px 0; font-family:"Bebas Neue";
  font-size: clamp(24px, 4.5vw, 40px); letter-spacing:1px;
  color:#fff; text-shadow: 0 0 24px rgba(122,92,255,.25);
}
.news-list{
  list-style:none; padding:0; margin:0;
  display:grid; gap:16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.news-list li{
  position:relative; padding:14px 14px 16px 14px;
  border-radius:16px; border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow-2); overflow:hidden;
}
.news-list li::before{
  content:""; position:absolute; top:-36px; left:-60px;
  width:220px; height:120px; transform: rotate(-28deg);
  background: linear-gradient(90deg, rgba(255,155,0,.25), rgba(0,224,255,.22), rgba(122,92,255,.22));
  filter: blur(10px);
}
.news-list strong{ display:block; font-size:17px; margin:0 0 6px 0; }
.news-list small{
  display:inline-block; font-size:12px; color:var(--muted);
  padding:2px 8px; border-radius:999px;
  border:1px solid var(--line); background: rgba(255,255,255,.04);
  margin-bottom:8px;
}
.news-list p{ margin:0; color:#dde4f3; }

/* Forms */
form{ display:grid; gap:12px; max-width:520px; }
input[type="text"], input[type="email"], input[type="password"]{
  width:100%; height:48px; padding:0 14px;
  border-radius:14px; border:1px solid var(--line);
  background: rgba(255,255,255,.05); color:var(--txt);
  outline:none; transition: border-color .2s, box-shadow .2s, background .2s;
}
input::placeholder{ color: rgba(255,255,255,.48); }
input:focus{
  border-color: rgba(0,224,255,.55);
  box-shadow: 0 0 0 4px rgba(0,224,255,.18);
  background: rgba(255,255,255,.07);
}
.g-recaptcha{ margin-top:4px; }

/* Cookie */
#cookie-consent{
  position: fixed; inset:auto 14px 14px 14px;
  display:none; align-items:center; justify-content:center;
  z-index:1100;
}
#cookie-consent .cookie-box{
  width:min(100%, 980px); display:flex; gap:14px; align-items:center; justify-content:space-between;
  padding:14px 16px; border-radius:16px;
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(16,23,42,.96), rgba(16,23,42,.90));
  box-shadow: var(--shadow-2);
}
#cookie-consent p{ margin:0; color:#d9e2f2; }
.cookie-buttons{ display:flex; gap:10px; }
.cookie-btn{
  height:42px; padding:0 14px; border-radius:12px;
  border:1px solid var(--line); background: rgba(255,255,255,.04);
  color:var(--txt); cursor:pointer; transition: border-color .2s, background .2s;
}
.cookie-btn:hover{ border-color: rgba(255,255,255,.22); }
.cookie-btn.manage{ background: rgba(255,255,255,.08); }
.cookie-btn#acceptCookies{
  border:none; color:#0a0f18; background: var(--grad-cta);
  box-shadow: 0 0 0 4px rgba(0,224,255,.14);
}

/* Footer */
footer{
  margin: 26px auto 0; padding:16px; max-width:1100px;
  color:var(--muted); text-align:center;
  border-top:1px solid var(--line); opacity:.95;
}

/* Scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
  border:1px solid var(--line); border-radius:999px;
}
::-webkit-scrollbar-track{ background: transparent; }

/* Focus */
:focus-visible{ outline: 3px solid rgba(0,224,255,.35); outline-offset: 2px; border-radius:8px; }

/* Responsive tweaks */
@media (max-width: 560px){
  .tab{ padding:16px; }
  #cookie-consent .cookie-box{ flex-direction:column; align-items:flex-start; }
  .cookie-buttons{ width:100%; }
  .cookie-btn{ flex:1; text-align:center; }
}