/* ==========================================================================
   DarkopLOL Network — "Signal" theme
   Deep-space navy, cyan/blue transmission glow, glass cards.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&family=JetBrains+Mono:wght@500;700&display=swap');

:root{
  --void:        #050914;
  --bg-1:        #060c1c;
  --bg-2:        #0a1530;
  --card:        rgba(13, 23, 48, 0.72);
  --card-solid:  #0d1730;
  --card-border: rgba(94, 149, 255, 0.14);
  --input-bg:    rgba(6, 12, 28, 0.85);

  --cyan:        #29e0ff;
  --cyan-soft:   #7be6ff;
  --blue:        #3b6dff;
  --violet:      #7b5bff;

  --text-hi:     #eef4ff;
  --text-mid:    #a9b8d8;
  --text-low:    #6a7898;

  --glow-cyan:   rgba(41, 224, 255, 0.35);
  --glow-blue:   rgba(59, 109, 255, 0.30);

  --radius-lg: 1.75rem;
  --radius-md: 1rem;
}

html.dark{ color-scheme: dark; }
html:not(.dark){
  --void:        #eef3fb;
  --bg-1:        #eef3fb;
  --bg-2:        #dbe6f7;
  --card:        rgba(255, 255, 255, 0.75);
  --card-solid:  #ffffff;
  --card-border: rgba(59, 109, 255, 0.18);
  --input-bg:    rgba(255, 255, 255, 0.9);
  --text-hi:     #0b132b;
  --text-mid:    #3c4a6b;
  --text-low:    #7b88a8;
}

*{ scrollbar-width: thin; scrollbar-color: var(--cyan) transparent; }
::-webkit-scrollbar{ width: 8px; height: 8px; }
::-webkit-scrollbar-thumb{ background: linear-gradient(var(--cyan), var(--blue)); border-radius: 99px; }
::-webkit-scrollbar-track{ background: transparent; }

html, body{
  background: var(--void);
  color: var(--text-hi);
  font-family: 'Tajawal', 'Segoe UI', sans-serif;
  min-height: 100%;
}

body{
  position: relative;
  background-image:
    radial-gradient(60rem 40rem at 15% -10%, var(--glow-blue), transparent 60%),
    radial-gradient(50rem 35rem at 110% 10%, var(--glow-cyan), transparent 55%),
    radial-gradient(70rem 50rem at 50% 120%, rgba(123, 91, 255, 0.18), transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-2) 45%, var(--bg-1));
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* subtle signal-grid overlay for depth, non-interactive */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .35;
  background-image:
    linear-gradient(rgba(94,149,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94,149,255,.05) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(80% 60% at 50% 0%, black, transparent 75%);
}

.text-inherit{ color: var(--text-hi); }
.dir-ltr{ direction: ltr; unicode-bidi: isolate; }

/* -------------------------------------------------- surfaces -------------------------------------------------- */
.bg-card{
  background: var(--card);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-color: var(--card-border) !important;
  position: relative;
  overflow: hidden;
  transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.bg-card::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(41,224,255,.06), transparent 40%);
  opacity:0; transition: opacity .4s ease;
  pointer-events:none;
}
.bg-card:hover{
  box-shadow: 0 0 0 1px var(--glow-cyan), 0 20px 50px -20px rgba(41,224,255,.25);
  transform: translateY(-2px);
}
.bg-card:hover::after{ opacity:1; }

.bg-input{
  background: var(--input-bg) !important;
}

/* status dot / server pulse — signature "transmission" motif */
#statusDot{
  box-shadow: 0 0 0 0 var(--glow-cyan);
  animation: pulse-ring 2.2s cubic-bezier(.4,0,.6,1) infinite;
  background: linear-gradient(135deg, var(--cyan), var(--blue)) !important;
}
@keyframes pulse-ring{
  0%   { box-shadow: 0 0 0 0 rgba(41,224,255,.55); }
  70%  { box-shadow: 0 0 0 12px rgba(41,224,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(41,224,255,0); }
}

#serverStatusText{
  background: linear-gradient(135deg, rgba(41,224,255,.18), rgba(59,109,255,.18)) !important;
  color: var(--cyan-soft) !important;
  border: 1px solid rgba(41,224,255,.35);
}

#onlineCount{
  background: linear-gradient(135deg, var(--cyan), var(--blue) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 40px var(--glow-cyan);
}

/* headline accents wherever the old green scheme is used ? shift to signal palette */
.text-green-500, .text-green-400, .text-green-600{ color: var(--cyan-soft) !important; }
.bg-green-500\/20, .dark\:bg-green-900\/30{ background: rgba(41,224,255,.14) !important; }
.hover\:border-green-500\/50:hover, .hover\:border-green-500:hover{ border-color: var(--cyan) !important; }
.hover\:text-green-500:hover{ color: var(--cyan) !important; }
.hover\:border-blue-500:hover, .hover\:border-blue-500\/50:hover{ border-color: var(--blue) !important; }
.bg-blue-500\/20{ background: rgba(59,109,255,.16) !important; }
.text-blue-400, .text-blue-500{ color: #7fa4ff !important; }
.hover\:text-blue-500:hover{ color: var(--blue) !important; }

/* IP / mono fields */
.font-mono{ font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .02em; }

/* buttons */
button, .btn{ transition: all .25s ease; }
.bg-green-600{
  background: linear-gradient(135deg, var(--cyan), var(--blue)) !important;
  box-shadow: 0 10px 30px -10px var(--glow-blue);
}
.hover\:bg-green-500:hover{
  filter: brightness(1.12);
  box-shadow: 0 0 24px var(--glow-cyan);
}

/* -------------------------------------------------- leaderboard -------------------------------------------------- */
#leaderboardList > *{
  background: var(--input-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  transition: border-color .3s ease, transform .3s ease;
}
#leaderboardList > *:hover{
  border-color: rgba(251,191,36,.45);
  transform: translateX(-3px);
}
.text-yellow-500{ color: #ffcc4d !important; text-shadow: 0 0 20px rgba(255,204,77,.35); }

/* -------------------------------------------------- chat -------------------------------------------------- */
#publicChatBox{
  background:
    radial-gradient(30rem 20rem at 50% -10%, rgba(41,224,255,.08), transparent 60%);
}
#chatInput{ font-family: 'Tajawal', sans-serif; }
#chatInput::placeholder{ color: var(--text-low); }

/* -------------------------------------------------- news -------------------------------------------------- */
#newsList > *{
  background: var(--card);
  backdrop-filter: blur(18px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
}

/* -------------------------------------------------- generic text -------------------------------------------------- */
.text-gray-400{ color: var(--text-mid) !important; }
.border-gray-700, .border-gray-600{ border-color: var(--card-border) !important; }

/* -------------------------------------------------- modal -------------------------------------------------- */
#newsModal .bg-card{ box-shadow: 0 30px 80px -20px rgba(0,0,0,.6), 0 0 0 1px var(--glow-cyan); }

/* -------------------------------------------------- minestore page compatibility -------------------------------------------------- */
.ms-hero{
  background: linear-gradient(135deg, rgba(10,21,48,.95), rgba(41,224,255,.14) 60%, rgba(123,91,255,.18));
  border-color: var(--card-border) !important;
}
.ms-hero::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(40rem 25rem at 80% 0%, var(--glow-cyan), transparent 60%);
  pointer-events:none;
}
.ms-card-mini{
  background: var(--card);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(14px);
}
.ms-scroll-row{ scroll-behavior: smooth; }

/* -------------------------------------------------- ambient floating orbs (added via markup) -------------------------------------------------- */
.signal-orb{
  position: fixed;
  border-radius: 50%;
  filter: blur(70px);
  z-index: 0;
  pointer-events: none;
  opacity: .55;
  animation: drift 16s ease-in-out infinite alternate;
}
.signal-orb.o1{ width: 26rem; height: 26rem; top: -6rem; right: -6rem; background: var(--cyan); }
.signal-orb.o2{ width: 22rem; height: 22rem; bottom: -8rem; left: -6rem; background: var(--violet); animation-delay: -6s; }
.signal-orb.o3{ width: 18rem; height: 18rem; top: 40%; left: 45%; background: var(--blue); opacity:.25; animation-delay: -3s; }
@keyframes drift{
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(-20px, 25px) scale(1.08); }
}
@media (prefers-reduced-motion: reduce){
  .signal-orb, #statusDot{ animation: none; }
}

main, header, footer, #headerContainer, #footerContainer{ position: relative; z-index: 1; }

/* -------------------------------------------------- headings -------------------------------------------------- */
h1, h2, h3{ font-weight: 800; letter-spacing: -.01em; }

/* focus visibility, accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}