/* OsuPompa! theme — clean, dark, soft yellow glass with gradients.
   Loaded after the Fable/halfmoon styles (see templates/assets/base.html). */

/* [data-bs-core] raises specificity above halfmoon's theme variables */
html[data-bs-theme][data-bs-core], html[data-bs-theme] {
  --op-yellow: #ffd84d;
  --op-yellow-rgb: 255, 216, 77;
  --op-yellow-strong: #ffc933;
  --op-ink: rgb(var(--op-dk-22-20-12, 22, 20, 12));
  --op-bg: rgb(var(--op-dk-18-17-9, 18, 17, 9));
  --op-glass: rgba(255, 224, 110, 0.055);
  --op-glass-hover: rgba(255, 224, 110, 0.09);
  --op-border: rgba(255, 216, 77, 0.14);
  --op-border-strong: rgba(255, 216, 77, 0.32);
  --op-text: #f3efe2;
  --op-muted: #b9b29c;
  --op-radius: 16px;

  --bs-primary: var(--op-yellow);
  --bs-primary-rgb: var(--op-yellow-rgb);
  --bs-link-color: var(--op-yellow);
  --bs-link-color-rgb: var(--op-yellow-rgb);
  --bs-link-hover-color: #ffe68a;
  --bs-link-hover-color-rgb: 255, 230, 138;
  --bs-body-bg: var(--op-bg);
  --bs-body-color: var(--op-text);
  --bs-secondary-color: var(--op-muted);
  --bs-content-bg: rgba(var(--op-dk-18-17-9, 18, 17, 9), 0.72);
  --bs-content-border-color: var(--op-border);
  --bs-border-color: var(--op-border);
  --bs-secondary-bg: var(--op-glass);
  --bs-tertiary-bg: rgba(255, 224, 110, 0.035);
  --bs-emphasis-color: #fff;
  --bs-focus-ring-color: rgba(var(--op-yellow-rgb), 0.35);
}

/* ---------- page background ---------- */
html[data-bs-theme] body {
  background-color: var(--op-bg);
  background-image:
    radial-gradient(1100px 600px at 12% -10%, rgba(var(--op-yellow-rgb), 0.16), transparent 60%),
    radial-gradient(900px 520px at 100% 0%, rgba(var(--op-orange-rgb, 255, 170, 40), 0.10), transparent 60%),
    radial-gradient(1200px 700px at 50% 110%, rgba(var(--op-yellow-rgb), 0.07), transparent 60%),
    linear-gradient(180deg, rgb(var(--op-dk-23-21-11, 23, 21, 11)) 0%, rgb(var(--op-dk-16-15-8, 16, 15, 8)) 100%);
  background-attachment: fixed;
  color: var(--op-text);
}

::selection { background: rgba(var(--op-yellow-rgb), 0.35); color: #fff; }

/* ---------- navbar ---------- */
html[data-bs-theme] .navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(var(--op-dk-20-18-9, 20, 18, 9), 0.62) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--op-border) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}
.navbar-brand img.op-logo {
  height: 46px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}
html[data-bs-theme] .navbar .nav-link {
  color: var(--op-muted);
  border-radius: 10px;
  padding-inline: 0.8rem !important;
  transition: color .15s, background-color .15s;
}
html[data-bs-theme] .navbar .nav-link:hover,
html[data-bs-theme] .navbar .nav-link.active,
html[data-bs-theme] .navbar .nav-item.active .nav-link {
  color: #fff;
  background: rgba(var(--op-yellow-rgb), 0.10);
}

/* ---------- glass surfaces ---------- */
html[data-bs-theme] .bg-secondary,
html[data-bs-theme] .card,
html[data-bs-theme] .fable-card,
html[data-bs-theme] .list-group-item,
html[data-bs-theme] .modal-content,
html[data-bs-theme] .dropdown-menu {
  background: linear-gradient(160deg, rgba(var(--op-light-rgb, 255, 224, 110), 0.085), rgba(var(--op-light-rgb, 255, 224, 110), 0.025)) !important;
  border: 1px solid var(--op-border) !important;
  color: var(--op-text) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
html[data-bs-theme] .dropdown-menu,
html[data-bs-theme] .modal-content {
  background: rgba(var(--op-dk-28-25-13, 28, 25, 13), 0.94) !important;
}
html[data-bs-theme] .card,
html[data-bs-theme] .fable-card,
html[data-bs-theme] .rounded-3 {
  border-radius: var(--op-radius) !important;
}
html[data-bs-theme] .fable-card,
html[data-bs-theme] .card {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22) !important;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
html[data-bs-theme] .fable-card:hover,
html[data-bs-theme] .card:hover {
  transform: translateY(-2px);
  border-color: var(--op-border-strong) !important;
}
html[data-bs-theme] .fable-up-card .fa-solid,
html[data-bs-theme] .stat-card .fa-solid {
  color: var(--op-yellow) !important;
  filter: drop-shadow(0 0 12px rgba(var(--op-yellow-rgb), 0.35));
}
html[data-bs-theme] .text-primary { color: var(--op-yellow) !important; }
html[data-bs-theme] .text-muted,
html[data-bs-theme] .text-body-secondary { color: var(--op-muted) !important; }

/* ---------- hero / big header ---------- */
html[data-bs-theme] video.video,
html[data-bs-theme] #video { filter: saturate(0.9) brightness(0.8); }
html[data-bs-theme] .home-badge,
html[data-bs-theme] .badge-grp .badge {
  background: rgba(var(--op-dk-20-18-9, 20, 18, 9), 0.55) !important;
  border: 1px solid var(--op-border) !important;
  border-radius: 999px !important;
  backdrop-filter: blur(6px);
}

/* ---------- buttons ---------- */
html[data-bs-theme] .btn { border-radius: 10px; font-weight: 500; }
html[data-bs-theme] .btn-primary,
html[data-bs-theme] .btn-info {
  --bs-btn-color: var(--op-ink);
  --bs-btn-hover-color: var(--op-ink);
  --bs-btn-active-color: var(--op-ink);
  background: linear-gradient(180deg, var(--op-light, #ffe27a), var(--op-yellow-strong)) !important;
  border: 1px solid rgba(var(--op-yellow-rgb), 0.8) !important;
  color: var(--op-ink) !important;
  box-shadow: 0 4px 18px rgba(var(--op-yellow-rgb), 0.22);
}
html[data-bs-theme] .btn-primary:hover,
html[data-bs-theme] .btn-info:hover {
  filter: brightness(1.06);
  box-shadow: 0 6px 24px rgba(var(--op-yellow-rgb), 0.32);
}
html[data-bs-theme] .btn-secondary,
html[data-bs-theme] .btn-dark,
html[data-bs-theme] .btn-outline-secondary {
  background: rgba(var(--op-light-rgb, 255, 224, 110), 0.07) !important;
  border: 1px solid var(--op-border) !important;
  color: var(--op-text) !important;
}
html[data-bs-theme] .btn-secondary:hover,
html[data-bs-theme] .btn-dark:hover,
html[data-bs-theme] .btn-outline-secondary:hover {
  background: rgba(var(--op-light-rgb, 255, 224, 110), 0.13) !important;
  border-color: var(--op-border-strong) !important;
}
html[data-bs-theme] .badge.bg-primary { background: var(--op-yellow) !important; color: var(--op-ink) !important; }

/* ---------- forms ---------- */
html[data-bs-theme] .form-control,
html[data-bs-theme] .form-select {
  background-color: rgba(var(--op-light-rgb, 255, 224, 110), 0.05) !important;
  border: 1px solid var(--op-border) !important;
  color: var(--op-text) !important;
  border-radius: 10px;
}
html[data-bs-theme] .form-control::placeholder { color: rgba(243, 239, 226, 0.4); }
html[data-bs-theme] .form-control:focus,
html[data-bs-theme] .form-select:focus {
  border-color: rgba(var(--op-yellow-rgb), 0.6) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--op-yellow-rgb), 0.18) !important;
}
html[data-bs-theme] .form-check-input:checked {
  background-color: var(--op-yellow);
  border-color: var(--op-yellow);
}

/* ---------- tables (leaderboards etc.) ---------- */
html[data-bs-theme] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--op-text);
  --bs-table-border-color: rgba(var(--op-yellow-rgb), 0.08);
  --bs-table-striped-bg: rgba(var(--op-light-rgb, 255, 224, 110), 0.03);
  --bs-table-hover-bg: rgba(var(--op-light-rgb, 255, 224, 110), 0.07);
}
html[data-bs-theme] .table > thead th {
  color: var(--op-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: .75rem;
  letter-spacing: .06em;
}

/* ---------- pagination / tabs ---------- */
html[data-bs-theme] .page-link,
html[data-bs-theme] .nav-tabs .nav-link,
html[data-bs-theme] .nav-pills .nav-link {
  background: transparent;
  border-color: var(--op-border);
  color: var(--op-muted);
}
html[data-bs-theme] .page-item.active .page-link,
html[data-bs-theme] .nav-pills .nav-link.active,
html[data-bs-theme] .nav-tabs .nav-link.active {
  background: rgba(var(--op-yellow-rgb), 0.16) !important;
  border-color: var(--op-border-strong) !important;
  color: #fff !important;
}

/* ---------- footer ---------- */
html[data-bs-theme] footer {
  background: linear-gradient(180deg, transparent, rgba(var(--op-yellow-rgb), 0.05)) !important;
  border-top: 1px solid var(--op-border) !important;
}
html[data-bs-theme] footer img.footer-logo {
  max-height: 90px;
  width: auto;
  object-fit: contain;
}

/* ---------- scrollbar ---------- */
html[data-bs-theme] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-bs-theme] ::-webkit-scrollbar-track { background: rgb(var(--op-dk-16-15-8, 16, 15, 8)); }
html[data-bs-theme] ::-webkit-scrollbar-thumb {
  background: rgba(var(--op-yellow-rgb), 0.22);
  border-radius: 10px;
  border: 2px solid rgb(var(--op-dk-16-15-8, 16, 15, 8));
}
html[data-bs-theme] ::-webkit-scrollbar-thumb:hover { background: rgba(var(--op-yellow-rgb), 0.38); }

/* ---------- sections: let the page gradient show through ---------- */
html[data-bs-theme] section.bg-body,
html[data-bs-theme] .bg-body,
html[data-bs-theme] .bg-body-tertiary {
  background: transparent !important;
}

/* ---------- discord button ---------- */
html[data-bs-theme] .btn-discord {
  background: rgba(88, 101, 242, 0.16) !important;
  border: 1px solid rgba(120, 132, 255, 0.45) !important;
  color: #e3e6ff !important;
}
html[data-bs-theme] .btn-discord:hover {
  background: rgba(88, 101, 242, 0.28) !important;
  color: #fff !important;
}

/* ---------- badges ---------- */
html[data-bs-theme] .badge.bg-dark {
  background: rgba(var(--op-yellow-rgb), 0.14) !important;
  border: 1px solid var(--op-border-strong);
  color: var(--op-yellow) !important;
}

/* =====================================================================
   Animated background (osupompa-bg.js)
   ===================================================================== */
.op-bg-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
}
html[data-bs-theme] { background: transparent !important; }

/* =====================================================================
   Home page (modules/home/pompa.html)
   ===================================================================== */
.op-home { --op-gap: clamp(2.5rem, 5vw, 5rem); padding-bottom: var(--op-gap); }
.op-home .container-xxl { max-width: 1600px; padding-inline: clamp(1rem, 3vw, 2.5rem); }
.op-muted { color: var(--op-muted); }
.op-link { color: var(--op-yellow); text-decoration: none; font-size: .9rem; }
.op-link:hover { color: var(--op-light, #ffe68a); }
.op-link i { transition: transform .2s; }
.op-link:hover i { transform: translateX(3px); }

/* reveal on scroll */
.op-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.op-reveal.op-in { opacity: 1; transform: none; }
.op-delay-1 { transition-delay: .12s; }
.op-delay-2 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .op-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- hero ---------- */
.op-eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .4rem .9rem; border-radius: 999px;
  background: rgba(var(--op-yellow-rgb), .08); border: 1px solid var(--op-border);
  color: var(--op-muted); font-size: .9rem; margin-bottom: 1.4rem;
}
.op-eyebrow strong { color: #fff; }
.op-live-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #4ade80; display: inline-block;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); animation: op-pulse 1.8s infinite;
}
@keyframes op-pulse {
  0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); }
  70% { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
.op-title { font-weight: 800; line-height: 1; margin-bottom: 1.6rem; letter-spacing: -.02em; }
.op-title-small {
  display: block; font-size: clamp(1rem, 1.4vw, 1.25rem); font-weight: 600;
  letter-spacing: .25em; text-transform: uppercase; color: var(--op-muted); margin-bottom: .6rem;
}
@keyframes op-shine { to { background-position: 200% center; } }
.op-lead { font-size: clamp(1.05rem, 1.3vw, 1.25rem); color: #d9d3bf; max-width: 38rem; line-height: 1.65; }
.op-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin: 2rem 0 2.2rem; }
.op-cta .btn-lg { padding: .75rem 1.3rem; font-size: 1rem; }
.op-stat {
  padding: 1rem 1.1rem; border-radius: 14px;
  background: linear-gradient(160deg, rgba(var(--op-light-rgb, 255, 224, 110), .09), rgba(var(--op-light-rgb, 255, 224, 110), .02));
  border: 1px solid var(--op-border);
}
.op-stat-num { font-size: clamp(1.4rem, 2vw, 1.9rem); font-weight: 800; color: #fff; line-height: 1.1; font-variant-numeric: tabular-nums; }
.op-stat-label { color: var(--op-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; margin-top: .25rem; }
@media (max-width: 575px) { }

/* video card */
.op-video-wrap { position: relative; padding: 1.5rem 1rem; }
.op-video-glow {
  position: absolute; inset: 8% 6%; border-radius: 40px;
  background: radial-gradient(closest-side, rgba(var(--op-yellow-rgb), .35), transparent);
  filter: blur(40px); animation: op-breathe 6s ease-in-out infinite;
}
@keyframes op-breathe { 50% { opacity: .55; transform: scale(1.04); } }
.op-video {
  position: relative; aspect-ratio: 16 / 10; border-radius: 24px; overflow: hidden;
  border: 1px solid var(--op-border-strong);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .04);
  transform: perspective(1400px) rotateY(-6deg) rotateX(2deg);
  transition: transform .6s ease;
}
.op-video:hover { transform: perspective(1400px) rotateY(0) rotateX(0); }
.op-video video { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.95) brightness(.72); }
.op-video-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--op-dk-18-17-9, 18, 17, 9), .1), rgba(var(--op-dk-18-17-9, 18, 17, 9), .55)),
              radial-gradient(circle at 50% 45%, transparent 30%, rgba(var(--op-dk-18-17-9, 18, 17, 9), .5));
}
.op-video-logo {
  position: absolute; left: 50%; top: 50%; width: 46%; max-width: 360px;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .6));
  animation: op-float 5s ease-in-out infinite;
}
@keyframes op-float { 50% { transform: translate(-50%, calc(-50% - 10px)); } }
@keyframes op-bob { 50% { transform: translateY(-8px); } }
@media (max-width: 991px) {
  .op-video { transform: none; }
}
@media (max-width: 575px) { }
@media (prefers-reduced-motion: reduce) {
  .op-gradient-text, .op-video-glow, .op-video-logo, .op-float-card, .op-live-dot { animation: none; }
}

/* ---------- sections & panels ---------- */
.op-section { padding-bottom: var(--op-gap); }
.op-section-head { text-align: center; margin-bottom: 2rem; }
.op-section-head h2, .op-connect h2 { font-weight: 800; letter-spacing: -.01em; }
.op-kicker {
  display: inline-block; color: var(--op-yellow); font-weight: 700; font-size: .78rem;
  letter-spacing: .2em; text-transform: uppercase; margin-bottom: .5rem;
}
.op-panel {
  padding: 1.4rem; border-radius: 20px;
  background: linear-gradient(165deg, rgba(var(--op-light-rgb, 255, 224, 110), .075), rgba(var(--op-light-rgb, 255, 224, 110), .018));
  border: 1px solid var(--op-border);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .25);
}
.op-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.op-panel-head h3 { font-size: 1.1rem; font-weight: 700; margin: 0; }
.op-panel-head h3 i { color: var(--op-yellow); margin-right: .45rem; }
.op-live-badge {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .12em; color: #86efac; padding: .2rem .6rem; border-radius: 999px;
  background: rgba(74, 222, 128, .08); border: 1px solid rgba(74, 222, 128, .25);
}
.op-live-badge .op-live-dot { width: 7px; height: 7px; }
.op-empty {
  display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center;
  padding: 2rem 1rem; color: var(--op-muted); border: 1px dashed var(--op-border); border-radius: 14px;
}
.op-empty i { font-size: 1.6rem; color: rgba(var(--op-yellow-rgb), .6); }

/* tabs */
.op-tabs { display: flex; gap: .35rem; padding: .3rem; border-radius: 12px; background: rgba(0, 0, 0, .25); margin-bottom: 1rem; }
.op-tab {
  flex: 1; border: 0; background: transparent; color: var(--op-muted); padding: .45rem .5rem;
  border-radius: 9px; font-size: .85rem; font-weight: 600; transition: background .2s, color .2s;
}
.op-tab:hover { color: #fff; }
.op-tab.active { background: rgba(var(--op-yellow-rgb), .16); color: #fff; box-shadow: inset 0 0 0 1px var(--op-border-strong); }
.op-tab-pane { display: none; }
.op-tab-pane.active { display: block; animation: op-fade .35s ease; }
@keyframes op-fade { from { opacity: 0; transform: translateY(4px); } }

/* players */
.op-player {
  display: flex; align-items: center; gap: .75rem; padding: .55rem .6rem; border-radius: 12px;
  color: var(--op-text); text-decoration: none; transition: background .15s;
}
.op-player:hover { background: rgba(var(--op-yellow-rgb), .07); color: #fff; }
.op-rank { width: 2.2rem; font-weight: 800; color: var(--op-muted); font-variant-numeric: tabular-nums; }
.op-rank-1 { color: var(--op-yellow); } .op-rank-2 { color: #d9dee8; } .op-rank-3 { color: #e8a36b; }
.op-avatar { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; background: rgba(255, 255, 255, .05); }
.op-player-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.op-player-pp { font-weight: 800; color: var(--op-yellow); }
.op-player-pp small, .op-pp small { font-weight: 600; color: var(--op-muted); margin-left: 2px; font-size: .7em; }
.op-flag { width: 20px; height: 14px; border-radius: 3px; object-fit: cover; vertical-align: -1px; margin-right: .25rem; }

/* scores */
.op-score {
  display: flex; align-items: center; gap: .8rem; padding: .55rem; border-radius: 14px;
  color: var(--op-text); text-decoration: none; transition: background .15s, transform .15s;
}
.op-score + .op-score { margin-top: .25rem; }
.op-score:hover { background: rgba(var(--op-yellow-rgb), .07); color: #fff; transform: translateX(2px); }
.op-score-cover { width: 64px; height: 46px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: rgba(255, 255, 255, .05); }
.op-score-body { flex: 1; min-width: 0; }
.op-score-title { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-score-meta { font-size: .8rem; color: var(--op-muted); display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin-top: .15rem; }
.op-score-player { color: #fff; font-weight: 600; }
.op-chip { font-size: .68rem; padding: .05rem .45rem; border-radius: 999px; background: rgba(var(--op-yellow-rgb), .12); color: var(--op-yellow); }
.op-score-right { text-align: right; display: grid; grid-template-columns: auto auto; column-gap: .6rem; align-items: center; }
.op-score-right .op-acc { grid-column: 2; font-size: .75rem; }
.op-pp { font-weight: 800; color: #fff; }
.op-grade { grid-row: span 2; font-weight: 900; font-size: 1.35rem; font-style: italic; width: 2rem; text-align: center; }
.op-grade-xh, .op-grade-sh { color: #e6edf5; text-shadow: 0 0 12px rgba(255, 255, 255, .5); }
.op-grade-x, .op-grade-s { color: var(--op-yellow); text-shadow: 0 0 12px rgba(var(--op-yellow-rgb), .45); }
.op-grade-a { color: #6ee7a0; } .op-grade-b { color: #60a5fa; } .op-grade-c { color: #c084fc; } .op-grade-d { color: #f87171; }

/* members */
.op-members { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.op-member {
  display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .6rem .3rem;
  border-radius: 12px; text-decoration: none; color: var(--op-text); font-size: .78rem; transition: background .15s;
}
.op-member span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-member:hover { background: rgba(var(--op-yellow-rgb), .07); color: #fff; }
.op-member .op-avatar { width: 48px; height: 48px; border-radius: 14px; }

/* features */
.op-feature {
  height: 100%; padding: 1.5rem 1.3rem; border-radius: 20px; position: relative; overflow: hidden;
  background: linear-gradient(165deg, rgba(var(--op-light-rgb, 255, 224, 110), .075), rgba(var(--op-light-rgb, 255, 224, 110), .015));
  border: 1px solid var(--op-border); transition: transform .25s, border-color .25s;
}
.op-feature::after {
  content: ""; position: absolute; inset: auto -30% -60% auto; width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--op-yellow-rgb), .18), transparent); transition: transform .4s;
}
.op-feature:hover { transform: translateY(-4px); border-color: var(--op-border-strong); }
.op-feature:hover::after { transform: scale(1.4); }
.op-feature-icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 1rem;
  background: linear-gradient(145deg, rgba(var(--op-yellow-rgb), .25), rgba(var(--op-yellow-rgb), .06));
  border: 1px solid var(--op-border-strong); color: var(--op-yellow); font-size: 1.35rem;
}
.op-feature h4 { font-size: 1.05rem; font-weight: 700; }
.op-feature p { color: var(--op-muted); font-size: .9rem; margin: 0; line-height: 1.55; }

/* connect */
.op-connect {
  padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: 26px;
  background:
    radial-gradient(600px 300px at 0% 0%, rgba(var(--op-yellow-rgb), .16), transparent 70%),
    linear-gradient(165deg, rgba(var(--op-light-rgb, 255, 224, 110), .07), rgba(var(--op-light-rgb, 255, 224, 110), .015));
  border: 1px solid var(--op-border-strong);
}
.op-step {
  height: 100%; padding: 1.2rem; border-radius: 16px; background: rgba(0, 0, 0, .22); border: 1px solid var(--op-border);
}
.op-step h5 { font-weight: 700; font-size: 1rem; margin-top: .7rem; }
.op-step p { color: var(--op-muted); font-size: .88rem; margin-bottom: .6rem; }
.op-step-num {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--op-yellow); color: var(--op-ink); font-weight: 800;
  box-shadow: 0 0 0 5px rgba(var(--op-yellow-rgb), .15);
}
.op-copy {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  padding: .5rem .7rem; border-radius: 10px; border: 1px solid var(--op-border-strong);
  background: rgba(var(--op-yellow-rgb), .08); color: var(--op-yellow); transition: background .15s;
}
.op-copy code { color: inherit; font-size: .82rem; }
.op-copy:hover { background: rgba(var(--op-yellow-rgb), .16); }
.op-copy.copied { border-color: #4ade80; color: #86efac; }
.op-copy.copied i::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; }

/* community / support cards */
.op-cta-card {
  height: 100%; display: flex; gap: 1.5rem; align-items: flex-start; padding: 2rem; border-radius: 24px;
  position: relative; overflow: hidden; border: 1px solid var(--op-border);
}
.op-cta-card h3 { font-weight: 800; }
.op-cta-card p { color: #d9d3bf; max-width: 34rem; }
.op-cta-icon { font-size: 3rem; flex-shrink: 0; }
.op-cta-discord {
  background: radial-gradient(500px 260px at 100% 0%, rgba(88, 101, 242, .35), transparent 70%),
              linear-gradient(165deg, rgba(88, 101, 242, .12), rgba(var(--op-light-rgb, 255, 224, 110), .02));
  border-color: rgba(120, 132, 255, .35);
}
.op-cta-discord .op-cta-icon { color: #8b95ff; }
.op-cta-kofi {
  background: radial-gradient(500px 260px at 100% 0%, rgba(255, 94, 91, .28), transparent 70%),
              linear-gradient(165deg, rgba(255, 94, 91, .1), rgba(var(--op-light-rgb, 255, 224, 110), .02));
  border-color: rgba(255, 120, 110, .35);
}
.op-cta-kofi .op-cta-icon { color: #ff7a73; }
html[data-bs-theme] .btn-kofi {
  background: linear-gradient(180deg, #ff6f69, #ff5e5b) !important;
  border: 1px solid rgba(255, 140, 130, .8) !important; color: #fff !important;
  box-shadow: 0 4px 18px rgba(255, 94, 91, .25);
}
html[data-bs-theme] .btn-kofi:hover { filter: brightness(1.07); }
@media (max-width: 575px) { .op-cta-card { flex-direction: column; } }

/* ---------- footer links ---------- */
html[data-bs-theme] footer .footer-heading,
html[data-bs-theme] footer h5 { color: var(--op-yellow) !important; font-weight: 700; letter-spacing: .04em; }
html[data-bs-theme] footer a { color: var(--op-muted) !important; text-decoration: none; transition: color .15s; }
html[data-bs-theme] footer a:hover { color: #fff !important; }
html[data-bs-theme] footer .rights a { color: var(--op-yellow) !important; }
.op-home { overflow-x: clip; }

/* =====================================================================
   Page headers (leaderboard etc.)
   ===================================================================== */
.op-yellow { color: var(--op-yellow) !important; }
.op-page-head { text-align: center; padding: clamp(1.5rem, 4vw, 3rem) 0 1.5rem; }
.op-page-head h1 {
  font-weight: 800; font-size: clamp(2.2rem, 4.5vw, 3.4rem); margin: 0;
  background: linear-gradient(100deg, var(--op-metal-hi, #fff6cc), var(--op-yellow) 45%, var(--op-orange));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.op-page-head p { color: var(--op-muted); margin: .4rem 0 0; }

/* =====================================================================
   Leaderboard podium
   ===================================================================== */
@media (max-width: 575px) {
}

/* leaderboard list rows */
html[data-bs-theme] .leaderboard .list-group-item {
  background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(var(--op-yellow-rgb), .07) !important;
  backdrop-filter: none; transition: background .15s;
}
html[data-bs-theme] .leaderboard .list-group-item:hover { background: rgba(var(--op-yellow-rgb), .07) !important; }
html[data-bs-theme] .leaderboard .list-group-item img[src*="a.osupompa"],
html[data-bs-theme] .leaderboard .list-group-item img[src*="/a/"] { border-radius: 10px; }
html[data-bs-theme] .pagination-button {
  border-radius: 12px !important; border: 1px solid var(--op-border) !important;
  background: rgba(var(--op-light-rgb, 255, 224, 110), .06) !important; color: var(--op-text);
}
html[data-bs-theme] .country-selector.active,
html[data-bs-theme] .sort-button.selected { box-shadow: 0 0 0 2px var(--op-yellow); border-radius: 8px; }

/* =====================================================================
   Profile
   ===================================================================== */
html[data-bs-theme] .fable-player-name { font-weight: 800 !important; letter-spacing: -.01em; text-shadow: 0 4px 24px rgba(0, 0, 0, .4); }
html[data-bs-theme] .fable-player-name.supporter {
  background: linear-gradient(100deg, var(--op-metal-hi, #fff6cc), var(--op-yellow) 45%, var(--op-orange)); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* level bar: yellow instead of blue */
html[data-bs-theme] .fable-level-bar-level { filter: drop-shadow(0 0 10px rgba(var(--op-yellow-rgb), .35)); }
html[data-bs-theme] .fable-level-bar-level .hexagon { color: var(--op-ink) !important; font-weight: 800; }
html[data-bs-theme] .fable-follower-count-icon { background: rgba(var(--op-yellow-rgb), .18) !important; color: var(--op-yellow) !important; }
html[data-bs-theme] .fable-follower-count-body { background: rgba(var(--op-light-rgb, 255, 224, 110), .06) !important; }
html[data-bs-theme] .fable-level-bar-progress-container { background: rgba(255, 255, 255, .08) !important; border-radius: 999px; overflow: hidden; }
html[data-bs-theme] .fable-level-bar-progress { background: linear-gradient(90deg, var(--op-orange), var(--op-yellow)) !important; border-radius: 999px; }
html[data-bs-theme] .fable-playtime-show { border-color: var(--op-yellow) !important; }
html[data-bs-theme] .fable-playtime-value, html[data-bs-theme] .fable-playtime-type { color: var(--op-yellow) !important; }

/* score cards */
html[data-bs-theme] .osu-score-card {
  border-radius: 16px !important; overflow: hidden; border: 1px solid var(--op-border) !important;
  transition: transform .15s, border-color .15s;
}
html[data-bs-theme] .osu-score-card:hover { transform: translateX(3px); border-color: var(--op-border-strong) !important; }
html[data-bs-theme] .osu-pp-display, html[data-bs-theme] .osu-pp-display * { color: var(--op-yellow) !important; }
html[data-bs-theme] .osu-acc-display { color: #86efac !important; }
html[data-bs-theme] .weight-badge {
  background: rgba(var(--op-yellow-rgb), .12) !important; color: var(--op-yellow) !important; border-color: var(--op-border-strong) !important;
}
html[data-bs-theme] .osu-action-btn { border-radius: 10px !important; }
html[data-bs-theme] .text-warning { color: var(--op-yellow) !important; }
.op-step a, .op-home p a { color: var(--op-yellow); }

/* Supporter banner as profile header background */

/* Supporter tab in the navbar */
html[data-bs-theme] .navbar .nav-link.op-nav-supporter { color: var(--op-yellow) !important; }
html[data-bs-theme] .navbar .nav-link.op-nav-supporter:hover,
html[data-bs-theme] .navbar .nav-link.op-nav-supporter.active { color: var(--op-metal-hi, #fff6cc) !important; }