/* ==========================================================
   Byte Battle — FULL STYLESHEET (dark tab visibility + popover fix)
   ========================================================== */

/* ===== Theme tokens ===== */
:root{
  /* Dark theme (default) */
  --bg-0:#0a0716;
  --bg-1:#120b2b;
  --card:#17122b;
  --text:#f6f3ff;
  --text-strong:#ffffff;
  --muted:#b8a9da;
  --line:rgba(255,255,255,.08);
  --shadow:0 18px 50px rgba(0,0,0,.45);

  --primary:#8b5cf6;
  --accent:#f59e0b;
  --link:#22d3ee;

  --grad-primary: linear-gradient(135deg, #7c3aed 0%, #5b21b6 52%, #4338ca 100%);
  --grad-accent:  linear-gradient(135deg, #f59e0b 0%, #d97706 55%, #fb923c 100%);

  /* Fluid background controls */
  --mx: 0; --my: 0; --blob-opacity: .28;
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  color:var(--text);
  background:
    radial-gradient(1400px 800px at 15% -10%, #6d28d9 0%, transparent 55%),
    radial-gradient(1400px 800px at 110% 10%, #7c3aed 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.65;
  overflow-x:hidden;
}
.wrap{max-width:1150px;margin:0 auto;padding:0 20px}
.section{padding:4.5rem 0}
h1,h2,h3{line-height:1.15;margin:0 0 .6rem}
h1{font-size:clamp(2.2rem, 4.8vw, 4rem);font-weight:800;letter-spacing:.02em}
h2{font-size:clamp(1.6rem,3.2vw,2.2rem);font-weight:700}
h3{font-size:1.125rem;font-weight:700}
p{margin:.4rem 0 1rem}
.subhead{color:var(--muted)}
a{color:var(--link);text-decoration:none}

/* ===== Ambient texture layers ===== */
.bg{position:fixed;inset:0;pointer-events:none;z-index:-1}
.fx-grid{
  background:
    radial-gradient(circle at 30% 10%, #8b5cf61f 0 40%, transparent 41%),
    radial-gradient(circle at 70% 90%, #22d3ee0f 0 45%, transparent 46%),
    radial-gradient(circle at 10% 80%, #f59e0b14 0 30%, transparent 31%);
  mask: linear-gradient(#000, transparent 65%);
}
.fx-grid::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(#ffffff12 1px, transparent 1px);
  background-size:22px 22px;opacity:.35;
}
.fx-noise{
  background-image:url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'>\
  <filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/></filter>\
  <rect width='100%' height='100%' filter='url(%23n)' opacity='0.035'/></svg>");
  mix-blend-mode:soft-light; opacity:.7;
}
.fx-bokeh{
  background:
    radial-gradient(80px 80px at 12% 24%, #7c3aed33, transparent 70%),
    radial-gradient(120px 120px at 86% 32%, #22d3ee33, transparent 70%),
    radial-gradient(140px 140px at 74% 78%, #f59e0b2b, transparent 70%);
  filter: blur(20px);
}

/* ===== Fluid floating background ===== */
.fx-fluid{
  transform: translate3d(calc(var(--mx)*18px), calc(var(--my)*18px), 0);
  transition: transform .08s linear;
  filter: saturate(120%);
}
.fx-fluid .blob{
  position:absolute; width:46vmax; height:46vmax; border-radius:50%;
  opacity:var(--blob-opacity); mix-blend-mode:screen; will-change:transform, opacity;
  filter: blur(24px);
  animation: blob-drift var(--t, 40s) linear infinite,
             blob-breathe var(--p, 14s) ease-in-out infinite alternate;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.22) 0 22%, transparent 40%),
    radial-gradient(closest-side, var(--c1) 0 55%, transparent 70%);
}
.fx-fluid .b1{ --c1: var(--primary); top:-12%; left:-10%; --t: 38s; --p: 14s; transform-origin:20% 30%;}
.fx-fluid .b2{ --c1: #22d3ee;        top:60%;  left:-8%;  --t: 44s; --p: 18s; transform-origin:10% 80%;}
.fx-fluid .b3{ --c1: var(--accent);   top:8%;   right:-12%;--t: 50s; --p: 16s; transform-origin:80% 20%;}
.fx-fluid .b4{ --c1: #a78bfa;         bottom:-14%; right:12%; --t: 56s; --p: 20s; transform-origin:70% 86%;}

@keyframes blob-drift{
  0%{transform:translate3d(0,0,0) rotate(0deg) scale(1.02)}
  25%{transform:translate3d(3%,-2%,0) rotate(90deg) scale(1.05)}
  50%{transform:translate3d(5%,1%,0) rotate(180deg) scale(1)}
  75%{transform:translate3d(2%,3%,0) rotate(270deg) scale(1.06)}
  100%{transform:translate3d(0,0,0) rotate(360deg) scale(1.02)}
}
@keyframes blob-breathe{
  from{opacity:calc(var(--blob-opacity)*.9); filter:blur(22px)}
  to{opacity:calc(var(--blob-opacity)*1.15); filter:blur(28px)}
}
body.light .fx-fluid .blob{ mix-blend-mode:multiply; opacity:.22; filter:blur(26px) saturate(110%) }

/* ===== Header / Nav ===== */
.site-header{
  position:sticky;top:0;z-index:40;
  backdrop-filter:saturate(180%) blur(12px);
  background:linear-gradient(180deg, rgba(11,7,22,.78), rgba(11,7,22,.35));
  border-bottom:1px solid var(--line);
}
.navbar{padding-top:0;padding-bottom:0}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;color:var(--text-strong)}
.brand-mark{width:38px;height:38px;object-fit:contain}
.brand-name{font-size:1.1rem}

.site-header .nav-link{
  position:relative;color:var(--text-strong);opacity:.9;padding:.5rem .1rem;transition:opacity .2s ease;
}
.site-header .nav-link::after{
  content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;border-radius:2px;
  background:linear-gradient(90deg, #22d3ee, #8b5cf6, #f59e0b);
  transition:right .34s cubic-bezier(.22,.9,.23,.99);
  box-shadow:0 0 12px #8b5cf680;
}
.site-header .nav-link:hover{opacity:1;filter:drop-shadow(0 2px 8px rgba(139,92,246,.45))}
.site-header .nav-link:hover::after{right:0}
.icon-btn{background:transparent;border:1px solid var(--line);color:var(--text-strong);border-radius:12px;padding:.55rem .7rem;cursor:pointer}
.navbar-dark .navbar-toggler{border-color:var(--line)}
.navbar-dark .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255,255,255,.85)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}

/* Mobile menu panel (glassy) */
@media (max-width: 991.98px){
  .site-header .navbar{background:transparent !important}
  #mainNav,.site-header .navbar-collapse{
    background:linear-gradient(180deg, rgba(18,11,43,.92), rgba(10,7,22,.72));
    backdrop-filter:saturate(180%) blur(14px);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    border:1px solid var(--line);border-radius:16px;margin:.5rem 0;padding:.6rem 1rem;
    box-shadow:0 18px 50px rgba(0,0,0,.35)
  }
  .site-header .navbar-nav .nav-link{color:var(--text-strong) !important;padding:.5rem 0}
  .site-header .navbar .btn{width:100%}
}
body.light #mainNav, body.light .site-header .navbar-collapse{
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88));
  border-color:var(--line); box-shadow:0 18px 40px rgba(19,3,55,.1)
}

/* ===== Hero ===== */
.hero{padding:5.5rem 0 3rem}
.tagline{font-weight:600;color:#ffffffcc;letter-spacing:.08em;text-transform:uppercase}
.tagline span{opacity:.5;margin:0 .3rem}
.hero-facts{margin:1rem 0 0}
.hero-facts li{background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));border:1px solid var(--line);padding:.45rem .7rem;border-radius:12px}
.hero-art{position:relative}
.hero-art img{width:100%;border-radius:24px;box-shadow:var(--shadow);border:1px solid var(--line)}
.burst{
  position:absolute;top:10%;left:-10%;
  background:radial-gradient(circle at 30% 30%, #fff6 0, #fff0 55%), var(--accent);
  color:#220a00;font-weight:800;padding:.8rem 1rem;border-radius:50%;
  width:110px;height:110px;display:grid;place-items:center;text-align:center;line-height:1.1;
  box-shadow:0 10px 25px rgba(0,0,0,.35);transform:rotate(-12deg)
}

/* Countdown */
.hero-counters .counter{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid var(--line);border-radius:16px;padding:.6rem .9rem;text-align:center;
  transition:transform .25s ease, box-shadow .25s ease;
}
.hero-counters .counter:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(139,92,246,.25)}
.count{font-size:1.6rem;font-weight:800}
.label{font-size:.72rem;color:var(--muted)}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.88rem 1.2rem;border-radius:14px;font-weight:700;cursor:pointer;
  color:#fff !important;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 24px rgba(0,0,0,.28);
  transition:transform .15s ease, filter .2s ease, box-shadow .2s ease;
  background-clip:padding-box;
}
.btn:hover{transform:translateY(-1px);filter:saturate(1.05) brightness(1.03)}
.btn:active{transform:translateY(0);box-shadow:0 6px 16px rgba(0,0,0,.25)}
.btn:focus-visible{outline:2px solid #22d3ee;outline-offset:2px}
.btn-primary{background:var(--grad-primary);border-color:rgba(124,58,237,.35)}
.btn-accent{background:var(--grad-accent);border-color:rgba(245,158,11,.35)}
.btn-ghost{background:transparent;color:var(--text-strong) !important;border:1px solid var(--line)}
.btn-ghost:hover{background:rgba(255,255,255,.06)}

/* ===== Cards ===== */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--line);border-radius:18px;padding:1.1rem 1.1rem 1.2rem;box-shadow:var(--shadow);
}
.hover-raise{position:relative;transition:transform .25s ease, box-shadow .25s ease}
.hover-raise::after{
  content:"";position:absolute;inset:-1px;border-radius:19px;
  background:linear-gradient(120deg, #22d3ee33, #8b5cf633, transparent 60%);opacity:0;transition:opacity .25s ease
}
.hover-raise:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.hover-raise:hover::after{opacity:1}

/* ===== About tabs ===== */
.about-tabs.nav-tabs{border-bottom:1px solid var(--line)}
.about-tabs .nav-link{
  color:var(--text-strong) !important;
  opacity:.9;border:0;background:transparent !important;
  position:relative;padding:.6rem .75rem;transition:opacity .2s ease;
}
.about-tabs .nav-link::after{
  content:"";position:absolute;left:.5rem;right:calc(100% - .5rem);bottom:-2px;height:2px;border-radius:2px;
  background:linear-gradient(90deg, #22d3ee, #8b5cf6, #f59e0b);box-shadow:0 0 12px #8b5cf680;
  transition:right .34s cubic-bezier(.22,.9,.23,.99);
}
.about-tabs .nav-link:hover{opacity:1}
.about-tabs .nav-link.active{color:#fff !important}
.about-tabs .nav-link.active::after{right:.5rem}

/* Ensure tab content cards are readable in DARK */
.tab-card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--line);border-radius:16px;
}
.tab-card .card{
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  border-color:var(--line);
}
.tab-card .card h3,
.tab-card .card p{ color:var(--text); }

/* ===== Themes grid ===== */
.themes{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem; overflow:visible;}
.theme{
  position:relative;
  /* IMPORTANT: allow popover to flow out of tile */
  overflow:visible;

  display:flex;align-items:center;gap:.65rem;
  padding:.95rem;border-radius:14px;border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  transition:transform .25s ease, box-shadow .25s ease, background-size .25s ease, border-color .2s ease;
  background-image:linear-gradient(90deg, #22d3ee33, #8b5cf633, #f59e0b33);
  background-size:0% 2px;background-repeat:no-repeat;background-position:0 100%;
  cursor:default; outline: none;
}
.theme span{font-size:1.25rem}
.theme strong{font-weight:700}
.theme .th-pop{
  position:absolute;left:10px;right:10px;bottom:10px;
  padding:.65rem .75rem;border-radius:12px;
  background:linear-gradient(180deg, rgba(17,13,33,.95), rgba(14,9,28,.9));
  border:1px solid var(--line); color:#eae2ff; font-size:.92rem; line-height:1.35;
  box-shadow:0 16px 36px rgba(0,0,0,.45);
  opacity:0; transform:translateY(8px) scale(.98);
  transition:opacity .2s ease, transform .2s ease;
  pointer-events:none;
  z-index:10; /* float above neighbors */
}
.theme:hover, .theme:focus-within{
  transform:translateY(-4px);
  background-size:100% 2px;
  box-shadow:0 18px 44px rgba(124,58,237,.35);
  border-color:#8b5cf666;
}
.theme:hover .th-pop, .theme:focus-within .th-pop{
  opacity:1; transform:translateY(0) scale(1);
}

/* Light mode pop & hover boost */
body.light .theme{
  background:#ffffff; border-color:var(--line);
  box-shadow:0 8px 20px rgba(19,3,55,.06);
}
body.light .theme:hover, body.light .theme:focus-within{
  box-shadow:0 28px 60px rgba(19,3,55,.18); border-color:#8b5cf680;
}
body.light .theme .th-pop{
  background:#ffffff; color:#1b1036; border:1px solid #e6defa;
  box-shadow:0 24px 60px rgba(19,3,55,.18);
}

@media (max-width: 960px){ .themes{grid-template-columns:1fr 1fr} }
@media (max-width: 560px){ .themes{grid-template-columns:1fr} }

/* ===== Gallery ===== */
.about-logo{max-height:96px;filter:drop-shadow(0 6px 16px rgba(0,0,0,.25))}
.gallery-grid .g-thumb{
  display:block;border-radius:14px;border:1px solid var(--line);overflow:hidden;position:relative;box-shadow:var(--shadow);
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.gallery-grid .g-thumb img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block;filter:saturate(1.05) contrast(1.02)}
.gallery-grid .g-thumb::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 100% at 15% 10%, rgba(34,211,238,.18), transparent 40%),
             radial-gradient(120% 100% at 80% 90%, rgba(139,92,246,.18), transparent 40%);
  opacity:0;transition:opacity .25s ease;
}
.gallery-grid .g-thumb:hover{transform:translateY(-4px);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.gallery-grid .g-thumb:hover::after{opacity:1}
.gallery-modal{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
}
.gallery-modal img{width:100%;height:auto;display:block;max-height:76vh;object-fit:contain;background:#0000}

/* ===== Timeline ===== */
.timeline{border-left:2px dashed var(--line);margin:1rem 0 0;padding-left:1rem}
.t-item{position:relative;margin:.9rem 0 1.1rem}
.t-item::before{content:"";position:absolute;left:-12px;top:.25rem;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.t-time{font-weight:700}
.note{margin-top:.8rem;color:var(--muted)}

/* ===== Venue / FAQ ===== */
.address{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));border:1px solid var(--line);border-radius:14px;padding:.9rem}
.map-embed iframe{width:100%;height:320px;border:0;border-radius:16px;box-shadow:var(--shadow)}
.faq{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));border:1px solid var(--line);border-radius:14px;padding:.8rem;margin:.6rem 0}
.faq summary{cursor:pointer;font-weight:700}

/* ===== Footer & Top ===== */
.site-footer{border-top:1px solid var(--line);padding:2rem 0;color:#eae2ff}
.credit img{height:36px;margin-bottom:.3rem}
.foot-links .nav-link{color:var(--text-strong)}
.site-footer .credit-line{color:#eae2ff}
.to-top{
  position:fixed;right:14px;bottom:14px;padding:.6rem .8rem;border-radius:999px;border:1px solid var(--line);
  background:rgba(255,255,255,.06);color:#fff;cursor:pointer;display:none
}

/* ===== Light theme overrides ===== */
body.light{
  --bg-0:#fafaff; --bg-1:#f3f0ff; --card:#ffffff;
  --text:#1b1036; --text-strong:#1b1036; --muted:#5e4b86; --line:#e6defa;
  --shadow:0 12px 32px rgba(28,8,55,.08);
  --grad-primary: linear-gradient(135deg, #7c3aed 0%, #5b21b6 52%, #4338ca 100%);
  --grad-accent:  linear-gradient(135deg, #f59e0b 0%, #d97706 55%, #fb923c 100%);
}
body.light .site-header{background:rgba(255,255,255,.92);border-bottom-color:var(--line)}
body.light .brand, body.light .navbar .nav-link, body.light .icon-btn{color:var(--text-strong)}
body.light a{color:#4338ca}
body.light .site-header .nav-link::after{box-shadow:0 0 8px #8b5cf650;opacity:.9}

body.light .hero-facts li,
body.light .hero-counters .counter,
body.light .card,
body.light .address,
body.light .faq,
body.light .tab-card,
body.light .gallery-modal{
  background:#fff;border-color:var(--line);box-shadow:0 8px 20px rgba(19,3,55,.06)
}
body.light .btn{border-color:rgba(16,8,40,.08);box-shadow:0 10px 24px rgba(19,3,55,.12)}
body.light .btn-ghost{color:var(--text-strong) !important;background:transparent}
body.light .btn-ghost:hover{background:rgba(67,56,202,.06)}
body.light .to-top{color:var(--text);background:#fff;border-color:var(--line)}
body.light .site-footer .credit-line{color:var(--text)}
/* Make hero tagline readable in light */
body.light .tagline{color:var(--text-strong) !important}
body.light .tagline span{color:var(--text-strong);opacity:.65}

/* About tabs light */
body.light .about-tabs .nav-link{color:var(--text-strong) !important}
body.light .about-tabs .nav-link.active{color:var(--text-strong) !important}

/* ===== Responsive ===== */
@media (max-width: 960px){
  .hero{padding:4rem 0 2rem}
}
@media (max-width: 560px){
  .burst{left:-6%;top:6%;width:90px;height:90px}
}


/* === Brand name visibility + weight (both themes) === */
.site-header .navbar-brand{
  color: var(--text-strong) !important;     /* overrides Bootstrap's navbar-dark tint */
  font-weight: 800;                          /* make "Byte Battle" bold */
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
}
.site-header .navbar-brand:hover,
.site-header .navbar-brand:focus{
  color: var(--text-strong) !important;      /* prevent fade/blue on hover */
  opacity: 1;
}

.brand-name{
  font-size: 1.1rem;
  font-weight: 800;                          /* ensure bold even if other styles apply */
  color: inherit;                            /* use the same color as .navbar-brand */
}

/* Light theme explicit (keeps it dark, not light-blue) */
body.light .site-header .navbar-brand{
  color: var(--text-strong) !important;
}



/* === Fix: ensure ALL card text uses themed color (dark & light) === */
.tab-card .card{
  color: var(--text) !important;     /* makes ul/li/strong/small inherit correctly */
}

/* Keep links readable against the card background */
.tab-card .card a{
  color: var(--link);
}

/* Optional: if any muted text inside cards */
.tab-card .card .muted, 
.tab-card .card small{
  color: var(--muted);
}