:root {
  --bg: #0d0d10;
  --bg-header: #121215;
  --text: #f2f2f2;
  --text-muted: #9a9aa3;
  --accent: #a00000;
  --brand-red: #870000;
  --brand-red-light: #b3001b;
  --accent-popular-rank: #a00000;
  --accent-idols: #008600;
  --accent-groups: #8000b3;
  --border: #232328;

  /* VIP gold palette (matches shorts.css) */
  --gold-light: #f6d98a;
  --gold: #e3ad3c;
  --gold-deep: #a97a22;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, sans-serif;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* Pushes the footer to the bottom of the viewport on short pages instead of
   letting it sit right under the content. Pages without a .site-footer are unaffected. */
body > main {
  flex: 1 0 auto;
}

body > .site-footer {
  flex-shrink: 0;
}

/* ---------- Header ---------- */

.site-header {
  background: var(--bg-header);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 32px;
  position: relative;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  font-size: 1.2rem;
  white-space: nowrap;
}

/* A blinking "recording" dot instead of the old ◆ glyph — the span is left
   empty in HTML and this circle is drawn purely in CSS. Sized to the same
   height as the "K" it sits next to, and vertically centered via the
   .logo flex container's align-items: center. */
.logo-mark {
  display: inline-block;
  position: relative;
  top: 2px; /* the flex box centers on line-height, which sits a bit higher than the text's visual cap-height */
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent);
  animation: logo-rec-blink 1.4s steps(1, end) infinite;
}

@keyframes logo-rec-blink {
  0%, 45% { opacity: 1; }
  50%, 95% { opacity: 0.25; }
  100% { opacity: 1; }
}

/* One-time entrance for the wordmark when the page first loads */
.logo-text {
  display: inline-block;
  animation: logo-text-intro 0.6s ease-out;
}

@keyframes logo-text-intro {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-mark { animation: none; }
  .logo-text { animation: none; }
}

.main-nav {
  display: flex;
  gap: 22px;
  flex: 1;
}

.main-nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: color 0.15s;
}

.main-nav a:hover {
  color: var(--text);
}

.main-nav .nav-vip {
  color: var(--accent);
  font-weight: 600;
}

.main-nav .nav-premium {
  color: var(--gold);
  font-weight: 600;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.search-box {
  position: relative;
}

.search-box input {
  background: #1a1a1f;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 34px 8px 14px;
  color: var(--text);
  font-size: 0.9rem;
  width: 220px;
  outline: none;
}

.search-box input:focus {
  border-color: var(--accent);
}

.search-box input::placeholder {
  color: var(--text-muted);
}

.search-submit-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.15s;
}

.search-submit-btn:hover {
  color: var(--text);
}

.lang-switch {
  background: #1a1a1f;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 7px 10px;
  font-size: 0.85rem;
  cursor: pointer;
}

.btn-enter {
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  padding: 9px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
  font-size: 1.3rem;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
}

.icon-burger {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.icon-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
}

.icon-close {
  display: none;
}

.menu-toggle.is-active .icon-burger {
  display: none;
}

.menu-toggle.is-active .icon-close {
  display: block;
}

.search-icon-btn {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.search-icon-btn.is-active {
  color: var(--accent);
}

.lang-switch-mobile {
  display: none;
}

/* Phase 1: VIP system not launched yet. Hidden, not removed —
   re-enable by deleting this rule when accounts/payments go live. */
.nav-fancams,
.nav-vip,
.btn-enter {
  display: none;
}

@media (max-width: 900px) {
  .menu-toggle {
    display: flex;
    order: 1;
  }

  .logo {
    order: 2;
  }

  .header-actions {
    order: 3;
    margin-left: auto;
    gap: 10px;
  }

  .search-box {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 10px 16px;
    background: var(--bg-header);
    border-bottom: 1px solid var(--border);
  }

  .search-box.is-open {
    display: flex;
  }

  .search-box input {
    width: 100%;
  }

  .lang-switch-desktop { display: none; }
  .search-icon-btn { display: flex; }

  .main-nav {
    order: 4;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--bg-header);
    border-bottom: 1px solid var(--border);
    padding: 12px 24px;
    gap: 14px;
  }

  .main-nav.is-open {
    display: flex;
  }

  .lang-switch-mobile {
    display: block;
    margin-top: 6px;
    width: fit-content;
  }
}

/* ---------- Floating "back to top" button ---------- */
/* Hidden until the visitor scrolls down (js/main.js toggles .is-visible) */

.scroll-top-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #35353d;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s, border-color 0.15s, color 0.15s, background 0.15s;
}

.scroll-top-fab.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-top-fab:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.scroll-top-fab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Site-wide side ads (desktop only) ---------- */
/* Sit in the gutter beside the centered 1400px content, on every page.
   js/main.js creates them and removes each one if its ad fails to fill —
   see the shared loadAd() in js/ads.js. */

.side-ad-slot {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 160px;
  height: 600px;
  max-height: 80vh;
  z-index: 40;
  border-radius: 10px;
  overflow: hidden;
}

.side-ad-slot:empty {
  display: none;
}

.side-ad-left {
  left: calc(50vw - 880px);
}

.side-ad-right {
  left: calc(50vw + 720px);
}

.side-ad-slot ins.adsbygoogle {
  width: 100%;
  height: 100%;
}

/* Below this width the slots would either overlap the centered content or
   have nowhere to go */
@media (max-width: 1800px) {
  .side-ad-slot {
    display: none;
  }
}