/* Shared design tokens for LOL Gamers website variations */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Plus+Jakarta+Sans:wght@500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  /* Brand palette extracted from icon */
  --brand-blue: #4DA3FF;
  --brand-blue-deep: #2A6FDB;
  --brand-blue-soft: #DCEAFE;
  --brand-yellow: #F5C842;
  --brand-yellow-deep: #E0A82E;
  --brand-yellow-soft: #FFF5D1;

  /* Neutrals - warm whites */
  --bg: #FAFBFD;
  --bg-card: #FFFFFF;
  --ink: #0F1A2E;
  --ink-2: #3D4A63;
  --ink-3: #6B7891;
  --line: #E6EBF2;
  --line-2: #F0F3F8;

  /* Status */
  --online: #22C55E;
  --pop: #FF6B9D;
}

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

.lol-root {
  font-family: 'Noto Sans JP', 'Plus Jakarta Sans', -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
.lol-root h1, .lol-root h2, .lol-root h3, .lol-root h4 {
  font-family: 'Plus Jakarta Sans', 'Noto Sans JP', sans-serif;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  font-weight: 800;
}
.lol-root .ja-display {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  letter-spacing: -0.01em;
}
.lol-root .mono { font-family: 'JetBrains Mono', monospace; }
.lol-root button { font-family: inherit; cursor: pointer; border: none; }
.lol-root a { color: inherit; text-decoration: none; }

/* placeholder image */
.ph {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(77,163,255,0.08) 0 8px,
      rgba(77,163,255,0.02) 8px 16px
    ),
    var(--brand-blue-soft);
  border: 1px dashed rgba(77,163,255,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-blue-deep);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  border-radius: 12px;
}

/* common pill */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--online); display: inline-block; }
.dot.live { animation: pulse 1.6s infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
  50% { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}

/* fade-up scroll reveal */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fade-up.in {
  opacity: 1;
  transform: none;
}

/* number count animation helper */
.num-count { font-variant-numeric: tabular-nums; }