/**
 * Modern Design System
 * Oniichan.wtf — loaded AFTER tailwindcss so these rules win the cascade
 * Version: 2.1.0
 */

/* =============================================
   DESIGN TOKENS
   ============================================= */
:root {
  --c-bg: #0d1117;
  --c-surface: rgba(22, 32, 48, 0.65);
  --c-border: rgba(255, 255, 255, 0.07);
  --c-border-accent: rgba(59, 130, 246, 0.42);
  --c-accent: #3b82f6;
  --c-accent-glow: rgba(59, 130, 246, 0.22);

  --r-sm: 0.5rem;
  --r-md: 0.875rem;
  --r-lg: 1.25rem;

  --shadow-card: 0 2px 14px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.25);
  --shadow-card-hover: 0 10px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(59, 130, 246, 0.22);
  --shadow-btn: 0 2px 10px rgba(29, 78, 216, 0.38);
  --shadow-btn-hover: 0 4px 22px rgba(29, 78, 216, 0.58);

  --t-fast: 0.15s ease;
  --t-base: 0.25s ease;
  --t-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =============================================
   SCROLLBAR
   ============================================= */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* =============================================
   SELECTION
   ============================================= */
::selection {
  background: rgba(59, 130, 246, 0.3);
  color: #fff;
}

/* =============================================
   BODY — ambient gradient background
   ============================================= */
body {
  background-color: var(--c-bg) !important;
  background-image:
    radial-gradient(ellipse 90% 60% at 10% 35%, rgba(59, 130, 246, 0.045) 0%, transparent 55%),
    radial-gradient(ellipse 70% 55% at 88% 15%, rgba(124, 58, 237, 0.04) 0%, transparent 55%);
  background-attachment: fixed;
}

/* =============================================
   NAVBAR — sticky glassmorphism
   ============================================= */
nav {
  background: rgba(13, 17, 23, 0.82) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--c-border) !important;
  position: sticky;
  top: 0;
  z-index: 50;
}

nav a {
  transition: color var(--t-fast);
}

/* =============================================
   CARDS (skins + songs pages)
   Targets bg-gray-800 + overflow-hidden (the media cards)
   ============================================= */
div.bg-gray-800.rounded-lg.overflow-hidden,
div.bg-gray-800.rounded-xl.overflow-hidden {
  background: var(--c-surface) !important;
  border-radius: var(--r-lg) !important;
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-card);
  transition:
    transform var(--t-slow),
    box-shadow var(--t-slow),
    border-color var(--t-slow);
}
div.bg-gray-800.rounded-lg.overflow-hidden:hover,
div.bg-gray-800.rounded-xl.overflow-hidden:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--c-border-accent);
}

/* Card inner padding area */
div.bg-gray-800.rounded-lg.overflow-hidden > .p-4,
div.bg-gray-800.rounded-xl.overflow-hidden > .p-4 {
  padding: 1.125rem 1.25rem 1.25rem;
}

/* Card title */
div.bg-gray-800.rounded-lg.overflow-hidden h3,
div.bg-gray-800.rounded-xl.overflow-hidden h3 {
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
}

/* =============================================
   WARNING / INFO BOXES
   bg-gray-800 + border + p-4 (not overflow-hidden cards)
   ============================================= */
div.bg-gray-800.p-4.rounded-lg.border,
div.bg-gray-800.p-4.rounded-lg.border-gray-700 {
  background: rgba(100, 40, 5, 0.14) !important;
  border-color: rgba(245, 158, 11, 0.28) !important;
  border-radius: var(--r-md) !important;
}

/* =============================================
   SECTION INFO CARDS
   bg-gray-900 + border + rounded-lg (FAQ items, mode cards, setup boxes)
   ============================================= */
div.bg-gray-900.border.rounded-lg {
  background: rgba(10, 16, 28, 0.55) !important;
  border-radius: var(--r-md) !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
  transition:
    border-color var(--t-fast),
    background var(--t-fast);
}
div.bg-gray-900.border.rounded-lg:hover {
  border-color: rgba(59, 130, 246, 0.28) !important;
  background: rgba(16, 24, 40, 0.72) !important;
}

/* =============================================
   TABLES
   ============================================= */
.overflow-x-auto table {
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-md);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

table thead {
  background: rgba(12, 18, 30, 0.9) !important;
}

table thead th {
  border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.055em;
}

table tbody tr {
  transition: background var(--t-fast);
}

table tbody tr.bg-gray-900 {
  background: rgba(13, 17, 23, 0.35) !important;
}

table tbody tr:nth-child(even).bg-gray-900 {
  background: rgba(18, 24, 36, 0.5) !important;
}

table tbody td,
table tbody th {
  border-bottom-color: rgba(255, 255, 255, 0.045) !important;
}

table tbody tr:last-child td,
table tbody tr:last-child th {
  border-bottom: none !important;
}

/* =============================================
   DOWNLOAD / ACTION BUTTONS
   ============================================= */
a.bg-blue-500 {
  background: linear-gradient(145deg, #1d4ed8, #3b82f6) !important;
  border-radius: 0.5rem !important;
  font-weight: 500;
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-btn);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition:
    box-shadow var(--t-base),
    transform var(--t-base) !important;
}
a.bg-blue-500:hover {
  background: linear-gradient(145deg, #2563eb, #60a5fa) !important;
  box-shadow: var(--shadow-btn-hover) !important;
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.18) !important;
}
a.bg-blue-500:active {
  transform: translateY(0);
}

/* =============================================
   SECTION HEADINGS — accent left bar
   ============================================= */
section h2.font-bold {
  position: relative;
  padding-left: 0.9rem;
  margin-bottom: 1.5rem !important;
}
section h2.font-bold::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  height: 0.82em;
  width: 3px;
  background: linear-gradient(to bottom, #3b82f6, #8b5cf6);
  border-radius: 2px;
}

/* Sub-headings (h3 blue) */
section h3.text-blue-400 {
  letter-spacing: 0.01em;
}

/* =============================================
   SECTION SEPARATORS
   ============================================= */
section.border-t {
  border-top-color: rgba(255, 255, 255, 0.065) !important;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

/* =============================================
   TABLE OF CONTENTS
   ============================================= */
.container.mx-auto.px-4.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 0.75rem;
}

/* =============================================
   INLINE CODE & PRE BLOCKS
   ============================================= */
code.bg-gray-800 {
  background: rgba(10, 16, 28, 0.85) !important;
  border: 1px solid var(--c-border);
  padding: 0.1em 0.42em;
  border-radius: 0.28rem;
  font-size: 0.875em;
}
pre.bg-gray-800 {
  background: rgba(10, 16, 28, 0.92) !important;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
}

/* =============================================
   BACK-TO-TOP BUTTON
   ============================================= */
.back-to-top {
  background: linear-gradient(145deg, #1d4ed8, #3b82f6) !important;
  box-shadow: 0 4px 14px rgba(29, 78, 216, 0.45) !important;
  transition: all var(--t-base) !important;
}
.back-to-top:hover {
  box-shadow: 0 6px 24px rgba(29, 78, 216, 0.65) !important;
  transform: translateY(-2px);
}

/* =============================================
   NAVBAR LAYOUT — all breakpoints
   ============================================= */
nav > div.flex {
  align-items: center;
}

nav img {
  flex-shrink: 0;
}

nav .space-x-4 {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.1rem 0.5rem;
}

/* Tailwind space-x-4 adds margin-left — override so our gap handles spacing */
nav .space-x-4 > * {
  margin-left: 0 !important;
  margin-top: 0 !important;
}

/* Ensure all nav links stay vertically centred regardless of icon/text size */
nav a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3em;
  white-space: nowrap;
}

@media (max-width: 480px) {
  nav {
    padding: 0.625rem 0.875rem !important;
  }

  nav > div.flex {
    gap: 0.5rem;
  }

  nav .space-x-4 {
    gap: 0.1rem 0.375rem;
  }

  nav a {
    font-size: 0.8125rem !important;
    padding: 0.25rem 0.25rem !important;
  }
}

/* =============================================
   VIDEO.JS BIG PLAY BUTTON — centre fix
   Video.js uses negative margins to centre the button which can leave it
   slightly off. Override with transform so it's always pixel-perfect.
   ============================================= */
.video-js .vjs-big-play-button {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
}

/* =============================================
   VIDEO THUMBNAIL area polish
   ============================================= */
div.bg-black {
  background: #000 !important;
  position: relative;
}

/* slight rounded corners on video wrapper inside a card */
div.bg-gray-800.rounded-lg.overflow-hidden > div.bg-black,
div.bg-gray-800.rounded-xl.overflow-hidden > div.bg-black {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* =============================================
   TOC LINK HOVER
   ============================================= */
.text-blue-400.hover\:underline {
  transition:
    color var(--t-fast),
    text-decoration-color var(--t-fast);
  text-underline-offset: 2px;
}

/* =============================================
   SONG CARD image area
   ============================================= */
div.w-full.h-40.bg-black {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* =============================================
   SKIP LINK accessibility
   ============================================= */
.skip-to-content:focus {
  background: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
}