/* ===== GLOBAL THEME (shared across all pages) ===== */
:root{
  --bg:#0b0f15;
  --panel:#12161b;
  --text:#e8ecf1;
  --muted:#9aa7b2;
  --brand:#7cc2ff;
  --accent:#8ef0c2;
  --border:#1f2833;

  --navbg:#111722;
  --pill:#1b2433;
  --subbg:#141c29;
}

*{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  font:15px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
  background:var(--bg);
  color:var(--text);
}

/* adjust if your header height differs */
body{ padding-top: 74px; }

.empty[hidden]{ display:none !important; }

a{
  color:inherit;
  text-decoration:none;
}

html{ scroll-behavior:smooth; }

/* ===== HEADER ===== */
header.header{
  position:fixed;
  top:0;
  left:0;
  right:0;

  z-index:99999;
  isolation:isolate;

  background:
    linear-gradient(90deg, rgba(124,194,255,.14), rgba(142,240,194,.12)),
    var(--navbg);
  border-bottom:1px solid #13202e;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  transform:translateY(0);
  transition:transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
  will-change:transform;
}

header.header::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:linear-gradient(90deg, rgba(124,194,255,.55), rgba(142,240,194,.45));
  opacity:.35;
  pointer-events:none;
}

header.header::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;
  background:linear-gradient(90deg, rgba(124,194,255,.40), rgba(142,240,194,.35));
  opacity:.28;
  pointer-events:none;
}

header.header.is-hidden{
  transform:translateY(-110%);
  box-shadow:none;
}

@media (prefers-reduced-motion: reduce){
  header.header{transition:none}
}

.nav-wrap{
  max-width:96vw;
  margin:0 auto;
  padding:10px 16px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:16px;
  align-items:center;
  position:relative;
}

.brand{
  display:inline-flex;            /* keeps box tight */
  align-items:center;
  text-decoration:none;
  color:inherit;
  padding:.28rem .4rem;           /* SMALL clickable box */
  border-radius:12px;
  transition:
    background .18s ease,
    box-shadow .18s ease;
}

/* visual scaling only */
.brand-inner{
  display:flex;
  align-items:center;
  gap:.6rem;

  transform:scale(1.12);          /* visual size increase */
  transform-origin:left center;
  transition:transform .18s ease;
}

.brand:hover{
  background:linear-gradient(
    90deg,
    rgba(124,194,255,.12),
    rgba(142,240,194,.10)
  );
  box-shadow:
    0 6px 18px rgba(0,0,0,.25),
    0 0 0 1px rgba(124,194,255,.25) inset;
}

.brand:hover .brand-inner{
  transform:scale(1.12) translateY(-0.5px);
}

.brand:active .brand-inner{
  transform:scale(1.12);
}

.brand-title{
  font-weight:900;
  letter-spacing:.02em;
}

.profile-pic{
  width:36px;
  height:36px;
  border-radius:10px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}


.menu-bar{
  display:flex;
  gap:.25rem;
  flex-wrap:wrap;
}

.menu{
  position:relative;
}

.menu > a{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.55rem .85rem;
  border-radius:10px;
  border:1px solid rgba(var(--btn-c1), .18);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)),
    linear-gradient(90deg, rgba(var(--btn-c1), .14), rgba(var(--btn-c2), .10)),
    var(--pill);
  box-shadow:
    0 10px 22px rgba(0,0,0,.22),
    0 0 0 1px rgba(var(--btn-c2), .06) inset;
  transition:filter .18s ease, border-color .18s ease, transform .18s ease;
}

.menu > a::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  bottom:3px;
  height:4px;
  border-radius:4px;
  background:linear-gradient(90deg, rgba(var(--btn-c1),1), rgba(var(--btn-c2),1));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .18s ease;
  opacity:.95;
}

.menu > a:hover{
  filter:brightness(1.08);
  border-color:rgba(var(--btn-c1), .28);
}

.menu > a:hover::after{
  transform:scaleX(1);
}

.menu-bar > .menu{--btn-c1:124,194,255;--btn-c2:142,240,194}
.menu-bar > .menu:nth-child(1){--btn-c1:124,194,255;--btn-c2:160,215,255}
.menu-bar > .menu:nth-child(2){--btn-c1:124,194,255;--btn-c2:142,240,194}
.menu-bar > .menu:nth-child(3){--btn-c1:142,240,194;--btn-c2:170,255,210}
.menu-bar > .menu:nth-child(4){--btn-c1:180,220,255;--btn-c2:124,194,255}
.menu-bar > .menu:nth-child(5){--btn-c1:255,200,140;--btn-c2:255,170,200}
.menu-bar > .menu:nth-child(6){--btn-c1:190,255,210;--btn-c2:142,240,194}
.menu-bar > .menu:nth-child(7){--btn-c1:210,190,255;--btn-c2:170,220,255}
.menu-bar > .menu:nth-child(8){--btn-c1:255,190,220;--btn-c2:255,220,170}
.menu-bar > .menu:nth-child(9){--btn-c1:200,240,255;--btn-c2:124,194,255}

.submenu{
  position:absolute;
  left:0;
  top:calc(100% + 18px);
  background:var(--subbg);
  border:1px solid #1a2536;
  border-radius:12px;
  min-width:240px;
  display:none;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  padding:.4rem;
}

.submenu::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-18px;
  height:18px;
}

.submenu a{
  display:block;
  padding:.6rem .7rem;
  border-radius:8px;
}

.submenu a:hover{
  background:rgba(255,255,255,.05);
}

.menu:hover .submenu,
.submenu:hover{
  display:block;
}

/* ===== FOOTER ===== */
.site-footer{
  margin-top:2rem;
  border-top:1px solid #13202e;
  background:linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}

.site-footer .footer-wrap{
  max-width:96vw;
  margin:0 auto;
  padding:14px 16px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  column-gap:24px;
  align-items:stretch;
}

.site-footer .footer-col{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:74px;
}

.site-footer .footer-left{
  justify-self:start;
  text-align:left;
  align-items:center;
}

.site-footer .footer-mid{
  justify-self:center;
  text-align:center;
  align-items:center;
}

.site-footer .footer-support{
  justify-self:end;
  text-align:right;
  align-items:center;
}

.site-footer .footer-head{
  display:flex;
  flex-direction:column;
  gap:.12rem;
  margin-bottom:.45rem;
  align-items:inherit;
}

.site-footer .footer-head-title{
  font-weight:900;
  font-size:.92rem;
  margin:0;
}

.site-footer .footer-head-sub{
  font-size:.78rem;
  color:var(--muted);
  opacity:.9;
  line-height:1.15;
}

.site-footer .footer-contact-row{
  display:flex;
  align-items:center;
  gap:.7rem;
}

.site-footer .footer-links{
  display:flex;
  flex-direction:column;
  gap:.14rem;
  align-items:flex-start;
}

.site-footer .footer-actions{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  align-items:center;
}

.site-footer .footer-mid-actions{
  justify-content:center;
}

.site-footer .footer-support-actions{
  justify-content:flex-end;
}

.site-footer .footer-pill{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.48rem .78rem;
  border-radius:999px;
  border:1px solid #202d40;
  background:var(--pill);
  font-weight:650;
  line-height:1;
  white-space:nowrap;
}

.site-footer .footer-pill img{
  width:16px;
  height:16px;
  display:block;
  opacity:.9;
}

.site-footer .footer-pill:hover{
  filter:brightness(1.08);
}

.site-footer .footer-pill.youtube{border-color:rgba(255,80,80,.35)}
.site-footer .footer-pill.youtube:hover{background:rgba(255,80,80,.08)}

.site-footer .footer-pill.twitch{border-color:rgba(170,130,255,.35)}
.site-footer .footer-pill.twitch:hover{background:rgba(170,130,255,.08)}

.site-footer .footer-pill.discord{border-color:rgba(120,140,255,.35)}
.site-footer .footer-pill.discord:hover{background:rgba(120,140,255,.08)}

.site-footer .footer-pill.support{border-color:rgba(124,194,255,.32)}
.site-footer .footer-pill.support:hover{background:rgba(124,194,255,.08)}

.site-footer .footer-link{
  font-size:.83rem;
  color:var(--muted);
  text-decoration:underline;
  text-underline-offset:3px;
  opacity:.9;
  line-height:1.1;
}

.site-footer .footer-link:hover{
  opacity:1;
}

@media (max-width:860px){
  .site-footer .footer-wrap{
    grid-template-columns:1fr;
    row-gap:12px;
  }
  .site-footer .footer-left,
  .site-footer .footer-mid,
  .site-footer .footer-support{
    justify-self:start;
    text-align:left;
    align-items:flex-start;
  }
  .site-footer .footer-head{
    align-items:flex-start;
  }
  .site-footer .footer-mid-actions,
  .site-footer .footer-support-actions{
    justify-content:flex-start;
  }
}

/* =======================================================================
   IMAGE OVERVIEW TILES (scoped component)
   ======================================================================= */
.image-overview{
  display:grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.image-overview > a.tile{
  grid-column: span 4;
  display:block;
  width:100%;
  min-width:0;

  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #000;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  min-height: 190px;

  isolation: isolate;
  transform: translateZ(0);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.image-overview > a.tile:hover{
  transform: translateY(-2px);
  border-color: rgba(124,194,255,.35);
  box-shadow: 0 18px 60px rgba(0,0,0,.38);
}

.image-overview .tile-media{
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.02);
  transform: scale(1.02);
  transition: transform .35s ease;
  z-index: 0;
}

.image-overview > a.tile:hover .tile-media{ transform: scale(1.06); }

.image-overview > a.tile::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 380px at 30% 20%, rgba(124,194,255,.14), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.78));
  z-index: 1;
}

.image-overview > a.tile::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(124,194,255,.22), rgba(142,240,194,.10), transparent 55%);
  opacity: 0;
  z-index: 0;
  transition: opacity .18s ease;
  pointer-events:none;
}

.image-overview > a.tile:hover::after{ opacity: 1; }

.image-overview .tile-content{
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 16px 16px 14px;
  display:flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.image-overview .tile-title{
  margin: 0;
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.05;
  font-size: 28px;
  text-shadow: 0 2px 12px rgba(0,0,0,.65);
}

.image-overview .tile-sub{
  margin: 0;
  color: rgba(232,236,241,.86);
  font-size: 13px;
  line-height: 1.35;
  max-width: 46ch;
  text-shadow: 0 2px 12px rgba(0,0,0,.65);
}

.image-overview .tile-meta{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 2px;
}

.image-overview .tile-tag{
  display:inline-flex;
  align-items:center;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(17,23,34,.70);
  border: 1px solid rgba(31,40,51,.85);
  color: var(--text);
  backdrop-filter: blur(6px);
}

@media (max-width: 1100px){
  .image-overview > a.tile{ grid-column: span 6; }
  .image-overview .tile-title{ font-size: 26px; }
}

@media (max-width: 640px){
  .image-overview > a.tile{ grid-column: span 12; min-height: 200px; }
  .image-overview .tile-title{ font-size: 26px; }
}

/* ===== "More coming soon" enhancement ===== */
.tile.is-soon{
  background:
    linear-gradient(
      120deg,
      rgba(124,194,255,.06),
      rgba(142,240,194,.04),
      rgba(124,194,255,.06)
    );
}

.soon-visual{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
  opacity:.85;
}

.soon-icon{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background: rgba(255,255,255,.06);
  border:1px dashed rgba(124,194,255,.35);
  font-size:16px;
}

.soon-label{
  font-size:12px;
  letter-spacing:.3px;
  text-transform:uppercase;
  color: var(--muted);
}

.tile.is-soon::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 12px,
      rgba(124,194,255,.04) 12px,
      rgba(124,194,255,.04) 24px
    );
  opacity:.35;
  pointer-events:none;
  animation: soonMove 18s linear infinite;
}

@keyframes soonMove{
  from{ background-position:0 0; }
  to{ background-position:160px 160px; }
}

/* ============= Video Hub ============= */

/* ===== VIDEO HUB FRAME ===== */
.video-hub{
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  overflow:hidden;
  background:
    radial-gradient(1200px 420px at 20% -10%, rgba(124,194,255,.10), transparent 60%),
    radial-gradient(900px 360px at 95% 20%, rgba(142,240,194,.08), transparent 60%),
    rgba(255,255,255,.03);

  max-width:1280px;
  margin:0 auto;
}

/* ===== HUB HEADER ===== */
.video-hub-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px;
  align-items:flex-start;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:linear-gradient(
    90deg,
    rgba(124,194,255,.10),
    rgba(142,240,194,.08)
  );
}

.video-hub-left{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.hub-badge{
  min-width:34px;
  height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:13px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.12);
}

.hub-title{
  margin:0;
  font-size:18px;
  font-weight:900;
  margin-bottom:2px;
}

.hub-desc{
  margin-top:2px;
  margin-bottom:0;
  line-height:1.28;
  color:var(--muted);
  font-size:13px;
}

.hub-meta{
  display:flex;
  gap:8px;
  align-items:flex-start;
}

.hub-chip{
  padding:6px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.10);
  font-size:12px;
  line-height:1;
  align-self:flex-start;
}

/* ===== VIDEO HUB LAYOUT ===== */
.video-hub-body{
  padding:10px;
}

.video-hub-layout{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:14px;
  min-height:0;         /* important for overflow setups on pages that add them */
  align-items:stretch;  /* helps equal visual columns */
}

@media (max-width: 980px){
  .video-hub-layout{ grid-template-columns:1fr; }
}

/* ===== FEATURED VIDEO ===== */
.video-featured{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.18);
}

.video-embed{
  aspect-ratio:16/9;
  background:#000;
}

.video-embed iframe{
  width:100%;
  height:100%;
  border:0;
}

.video-featured-body{
  padding:6px 14px;
  border-top:1px solid rgba(255,255,255,.06);
}

.video-featured-title{
  margin:0 0 3px;
  font-weight:900;
}

.video-featured-desc{
  margin:0;
  color:var(--muted);
  line-height:1.28;
  font-size:13px;
}

/* ===== VIDEO LIST ===== */
.video-list{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.16);
  display:grid;
  grid-template-rows:auto 1fr;
  min-height:0;
  overflow:hidden; /* safe default; page-level IDs control scrolling behavior */
}

.video-list-head{
  padding:6px 10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.video-list-title{
  margin:0;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  line-height:1;
}

.video-count{
  font-size:11px;
  padding:2px 7px;
  border-radius:999px;
  background:rgba(0,0,0,.25);
  line-height:1;
}

.video-list-body{
  padding:10px;
  padding-top:8px;
  overflow:auto; /* default works for most pages */
}