/* ───────────────────────────────────────────────────────────
   Graphitact — Global Styles
   Fully updated incl. ARK grid/cards with image banners
──────────────────────────────────────────────────────────── */

:root{
  --bg:#050608;
  --card-bg:#101218;
  --fg:#f9fafb;
  --muted:#aeb6c9;
  --accent:#d4d4d4;      /* silver */
  --accent-hov:#f5f5f5;  /* brighter silver */
  --glass:rgba(10,10,13,0.9);
  --radius:10px;
  --shadow:0 6px 18px rgba(0,0,0,.55);
  --trans-fast:.18s ease;
  font-size:16px;
  font-family:'AzoSans',Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  color:var(--fg);
  background:
    radial-gradient(circle at top, #101218 0, #050608 48%, #050608 100%);
  background-repeat: no-repeat;
  background-size: 160% 160%;
  background-position: center top;
  line-height:1.55;
  animation: bg-pan 40s ease-in-out infinite alternate;
}

@keyframes bg-pan{
  0%   { background-position: 50% 0%;   }
  50%  { background-position: 48% 4%;  }
  100% { background-position: 52% 0%;  }
}

/* Subtle moving light sweep over the dark BG, now with a bit more color */
body::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 0% 0%,   rgba(94,234,212,0.25), transparent 55%),
    radial-gradient(circle at 100% 80%, rgba(129,140,248,0.22), transparent 60%);
  background-size: 140% 140%, 180% 180%;
  mix-blend-mode:screen;
  opacity:0.32;
  animation:bgSweep 40s ease-in-out infinite alternate;
}

@keyframes bgSweep{
  0%{
    background-position: -30% -20%, 130% 150%;
    opacity:0.26;
  }
  50%{
    background-position: 50% 50%, 50% 50%;
    opacity:0.36;
  }
  100%{
    background-position: 120% 120%, -20% -40%;
    opacity:0.28;
  }
}

/* STREAMING MODE (auto-toggled via JS) */
body.streaming #live{display:block;}

/* HERO (Three.js) */
#hero{
  position:relative;
  height:100vh;
  overflow:hidden;
  /* More contrast + gentle color to make cubes visible */
  background:radial-gradient(circle at top,#1f2937 0,#020617 50%,#020617 100%);
}
#hero-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

/* keep dust-canvas support if needed later */
#dust-canvas{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  pointer-events:none;
}

/* Slightly less opaque overlay so cubes show through more */
.hero-overlay{
  position:relative;
  z-index:1;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:3rem 1.5rem 4rem;
  text-align:center;
  background:linear-gradient(
    to top,
    rgba(2,6,23,0.85) 0,
    rgba(2,6,23,0.55) 32%,
    rgba(2,6,23,0.20) 65%,
    rgba(2,6,23,0.00) 100%
  );
}
.headline{
  font-size:clamp(2.7rem,6vw,4.2rem);
  margin:0;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.subhead{
  font-size:1.25rem;
  margin:.5em 0 1.7em;
  opacity:.95;
}
.cta{
  display:inline-block;
  background:linear-gradient(180deg,#e5e5e5,#b5b5b5);
  padding:.75em 1.6em;
  border-radius:9999px;
  color:#111827;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  transition:background var(--trans-fast),transform .12s ease,box-shadow .12s ease;
  box-shadow:0 12px 28px rgba(0,0,0,.7);
}
.cta:hover{
  background:linear-gradient(180deg,#f5f5f5,#d4d4d4);
  transform:translateY(-1px);
  box-shadow:0 16px 32px rgba(0,0,0,.85);
}

/* NAVBAR */
header{position:sticky;top:0;z-index:50;}

/* --- NAV: button-style tabs --- */
#navbar{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  margin:0;
  padding:.65rem 1rem;
  list-style:none;
  background:linear-gradient(90deg,rgba(2,6,23,0.96),rgba(15,23,42,0.96));
  backdrop-filter:blur(16px);
  border-bottom:1px solid #18181b;
  box-shadow:0 6px 18px rgba(0,0,0,.65);
}
#navbar li{ display:flex; }

#navbar a{
  --btn-bg: #171717;   /* dark charcoal, no blue */
  --btn-fg: #e5e7eb;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.55rem .95rem;
  border-radius:10px;
  border:1px solid #27272f;
  background:linear-gradient(180deg,#262626,#0b0b0b);
  color:var(--btn-fg);
  text-decoration:none;
  font-weight:600;
  letter-spacing:.2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition:
    transform .06s ease,
    box-shadow .15s ease,
    border-color .15s ease,
    background .15s ease;
}
#navbar a:hover{
  border-color:#3f3f46;
  box-shadow: 0 6px 18px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  transform: translateY(-1px);
}

/* current page */
#navbar a[aria-current="page"],
#navbar a.is-active{
  background: linear-gradient(180deg,#404040,#18181b);
  border-color:#52525b;
  box-shadow: 0 8px 22px rgba(0,0,0,.9);
}

/* small badge if used */
#navbar .badge{
  font-size:.68rem;
  font-weight:700;
  line-height:1;
  padding:.2rem .38rem;
  border-radius:999px;
  background:#e5e5e5;
  color:#111827;
  border:1px solid #9ca3af;
  box-shadow:0 0 0 1px rgba(0,0,0,.25) inset;
}

/* LIVE SECTION */
#live{padding:3rem 1rem 4rem;display:none;}
#live video{
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  max-width:100%;
  height:auto;
  background:#000;
}

/* SERVICES */
#services{padding:4rem 1rem 5rem;}
.section-intro{
  opacity:.8;
  max-width:40rem;
  margin:.5rem auto 2.5rem;
  text-align:center;
}
.service-grid{
  display:grid;
  gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.service{
  background:var(--card-bg);
  border-radius:var(--radius);
  padding:2rem 1.5rem;
  text-align:center;
  box-shadow:var(--shadow);
  transition:transform var(--trans-fast),box-shadow var(--trans-fast),border-color var(--trans-fast);
  border:1px solid rgba(148,163,184,0.3);
}
.service:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 24px rgba(0,0,0,.6);
  border-color:rgba(212,212,212,0.9); /* silver instead of blue */
}
.service h3{margin:.25rem 0 .75rem;}
.service p{opacity:.85;}

/* CONTACT & FOOTER */
#contact{
  text-align:center;
  padding:3rem 1rem 4rem;
}
#contact a{
  color:var(--accent);
  text-decoration:none;
}
footer{
  background:#020617;
  text-align:center;
  padding:1.25rem;
  font-size:.875rem;
  border-top:1px solid #111827;
}

/* CHAT WIDGET (fixed scroll + layout) */
#chat-widget{
  position:fixed;
  bottom:1.25rem;
  right:1.25rem;
  z-index:1004;
  width:320px;
  max-height:72vh;
  min-height:300px;
  display:flex;
  flex-direction:column;
  background:var(--glass);
  backdrop-filter:blur(8px);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transform:translateY(120%);
  opacity:0;
  pointer-events:none;
  transition:transform .25s ease,opacity .25s ease;
}
#chat-widget.open{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}
#chat-header{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:0.75rem 1rem;
  border-bottom:1px solid #2d2d2d;
}
#chat-header h3{
  flex:1;
  margin:0;
  font-size:1rem;
}
#close-chat{
  background:none;
  border:none;
  color:var(--fg);
  font-size:1.25rem;
  line-height:1;
  cursor:pointer;
  opacity:.7;
  transition:opacity .2s;
}
#close-chat:hover{opacity:1;}
#chat-content{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
}
#message-area{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding:1rem;
  scroll-behavior:smooth;
}
.message{margin-bottom:.75rem;}
.message p{
  display:inline-block;
  padding:.55rem .9rem;
  border-radius:6px;
  max-width:90%;
  font-size:.9rem;
  line-height:1.4;
  word-break:break-word;
}
.message.user p{
  background:#e5e5e5;
  color:#111827;
}
.message.bot  p{
  background:#333;
  color:#f9fafb;
}
#typing-indicator{
  font-size:.85rem;
  opacity:.8;
  margin:0 .2rem .6rem;
}
.dot-dot-dot::after{
  content:'…';
  animation:blink 1.2s infinite steps(1,end);
}
@keyframes blink{50%{opacity:.35;}}
#message-form{
  flex:0 0 auto;
  display:flex;
  gap:.6rem;
  padding:.75rem 1rem;
  background:inherit;
  border-top:1px solid #2d2d2d;
}
#message-input{
  flex:1 1 auto;
  background:rgba(0,0,0,.35);
  border:1px solid #444;
  border-radius:6px;
  padding:.6rem .9rem;
  color:#fff;
  font-size:.95rem;
  min-width:0;
}
#message-input::placeholder{
  color:#bbb;
  font-style:italic;
}
#send-button{
  flex:0 0 auto;
  padding:.6rem 1.4rem;
  border:none;
  border-radius:6px;
  background:var(--accent);
  color:#111827;
  cursor:pointer;
  transition:background var(--trans-fast);
}
#send-button:hover{background:var(--accent-hov);}
#toggle-chat{
  position:fixed;
  bottom:1.25rem;
  right:1.25rem;
  z-index:1005;
  width:56px;
  height:56px;
  border-radius:50%;
  border:none;
  background:var(--accent);
  color:#111827;
  font-size:1.55rem;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:background var(--trans-fast),transform .25s ease;
}
#toggle-chat:hover{
  background:var(--accent-hov);
  transform:scale(1.05);
}
#toggle-chat.hidden{display:none;}

/* VIEWER CHAT PANEL (right of video) */
#live-area{
  display:grid;
  gap:1.2rem;
  align-items:stretch;
}
@media(min-width:900px){
  #live-area{grid-template-columns:1fr 330px;}
}
@media(max-width:899px){
  #live-area{grid-template-columns:1fr;}
}
#viewer-chat{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
  background:rgba(20,20,20,.75);
  backdrop-filter:blur(6px);
  border-radius:8px;
  padding:12px;
  color:#e0e0e0;
  overflow:hidden;
}
#vc-messages{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  margin-bottom:8px;
}
.vc-msg{margin:4px 0;word-wrap:break-word;}
.vc-msg span{
  font-weight:600;
  margin-right:.25em;
}
#vc-input{
  display:flex;
  gap:6px;
}
#vc-input input{
  flex:1 1 auto;
  min-width:0;
  border:1px solid #444;
  background:#1e1e1e;
  color:#fff;
  border-radius:4px;
  padding:6px 8px;
}
#vc-input button{
  flex:0 0 auto;
  padding:6px 14px;
  border:none;
  border-radius:4px;
  background:#444;
  color:#fff;
  cursor:pointer;
}

/* ALIAS OVERLAY */
#alias-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.85);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999;
}
#alias-box{
  background:#222;
  padding:32px;
  border-radius:8px;
  text-align:center;
  width:280px;
  box-shadow:0 4px 12px rgba(0,0,0,.5);
}
#alias-box h2{
  color:#e0e0e0;
  margin-bottom:14px;
}
#alias-box input{
  width:100%;
  padding:10px;
  border:1px solid #555;
  border-radius:4px;
  background:#111;
  color:#eee;
}
#alias-box button{
  margin-top:18px;
  padding:10px 24px;
  border:none;
  border-radius:4px;
  background:#555;
  color:#eee;
  cursor:pointer;
}

/* UTILS */
.glass{
  background:var(--glass);
  backdrop-filter:blur(8px);
}
[hidden]{display:none!important;}
@font-face{
  font-family:'AzoSans';
  src:url("/fonts/AzoSans-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* ─────────────────────────────────────────────
   ARK SERVER GRID + CARDS (with image banners)
───────────────────────────────────────────── */

.ark-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:20px;
  max-width:1200px;
  margin:24px auto;
  padding:0 16px;
}

.ark-card{
  background:var(--glass);
  backdrop-filter:blur(8px);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
  display:flex;
  flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;
  min-height: 420px;
}
.ark-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 24px rgba(0,0,0,.45);
}

/* Image banner */
.ark-hero{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:10px;
  margin:.5rem 0 1rem;
  background:#0b0e14;
}
.ark-hero img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Status row */
.ark-status{
  display:flex;
  align-items:center;
  gap:10px;
  margin:.5rem 0 1rem;
}

.ark-led{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#ff5d6c;
  display:inline-block;
}

/* Details grid */
.ark-details{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:6px 12px;
}

/* Join button anchored to bottom */
.ark-join{
  display:inline-block;
  margin-top:auto;
}

/* MOBILE — chat nearly full-screen */
@media (max-width:600px){
  #chat-widget,#toggle-chat{right:1rem;left:1rem;}
  #chat-widget{
    width:auto;
    height:calc(100% - 4rem);
    max-height:none;
    min-height:55vh;
    border-radius:16px;
  }
}

/* responsive nav tweak */
@media (max-width:720px){
  #navbar{
    gap:.5rem;
    padding:.6rem .8rem;
  }
  #navbar a{
    padding:.5rem .8rem;
    border-radius:9px;
    font-weight:600;
  }
}

/* ─────────────────────────────────────────────
   SCOREBUG DEMO LAYOUT
───────────────────────────────────────────── */

.scorebug-demo-main{
  padding:2.5rem 1rem 3rem;
}

.scorebug-demo-header{
  max-width:1700px;
  margin:0 auto 1.8rem;
  text-align:left;
}
.scorebug-demo-header h1{
  margin-bottom:.4rem;
}
.scorebug-demo-header p{
  opacity:.8;
}

/* DESKTOP / LARGE: side by side */
.scorebug-frame-grid{
  width:100%;
  max-width:1700px;
  margin:0 auto 3rem;
  display:flex;
  gap:1.25rem;
  flex-wrap:nowrap;              /* keep in one row on desktop */
}

.frame-card{
  background:var(--glass);
  backdrop-filter:blur(10px);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1rem;
  display:flex;
  flex-direction:column;
  min-width:0;
}

/* Left narrower, right wider */
.scorebug-frame-grid .frame-card:first-child{
  flex:0 0 30%;
}
.scorebug-frame-grid .frame-card:last-child{
  flex:1 1 70%;
}

.frame-card h2{
  margin:.25rem 0 .75rem;
  font-size:1rem;
  opacity:.9;
}

/* Big iframes on desktop */
.scorebug-frame{
  flex:1 1 auto;
  border:none;
  width:100%;
  height:70vh;
  min-height:520px;
  border-radius:8px;
  background:#000;
}

/* ── MOBILE: stack, each ≈ 50% of viewport ───────────────── */
@media (max-width:900px){
  .scorebug-demo-main{
    padding:1rem 0.5rem 1.5rem;
  }

  .scorebug-frame-grid{
    max-width:none;
    margin:0;
    flex-direction:column;       /* force vertical stacking */
    flex-wrap:nowrap;
    gap:0.75rem;
  }

  .scorebug-frame-grid .frame-card{
    flex:0 0 auto;
    padding:0.5rem;
  }

  .scorebug-frame-grid .frame-card:first-child,
  .scorebug-frame-grid .frame-card:last-child{
    flex:0 0 auto;               /* no width split on mobile */
  }

  /* Each iframe ≈ half the screen height */
  .scorebug-frame{
    height:48vh;                 /* ~50% of viewport */
    min-height:0;
  }

  .frame-card h2{
    font-size:0.9rem;
    margin-bottom:0.35rem;
  }
}

/* Make the whole content area sit on the dark canvas */
main{
  background:#080d16;
}

/* Sections keep the dark vibe, no stray white */
#services,
#ark-servers,
#contact{
  background:transparent;
}

/* Optional: ensure the body gradient gently covers the full page */
html, body{
  min-height:100%;
}

body{
  margin:0;
  color:var(--fg);
  background:
    radial-gradient(circle at 15% 0%, #111827 0, #050608 55%, #020308 100%);
  background-repeat:no-repeat;
  background-size:160% 160%;
  background-position:50% 0%;
  line-height:1.55;
  animation:bg-pan 40s ease-in-out infinite alternate;
}

@keyframes bg-pan{
  0%   { background-position:50% 0%;  }
  50%  { background-position:48% 4%; }
  100% { background-position52% 0%;  }
}