/* Kuroosu "Celestial" look (design G from branding/design/preview-g.html), qw26_47.
   Loaded after osupompa-ui-v1.css (templates/assets/base.html) and only re-skins: night sky, prism (rainbow) rings
   like the Celestial rank emblem, gold buttons, Cinzel titles + Quicksand text. Nothing is hidden or removed.
   To switch it off: remove the <link> to this file in base.html. */

:root, html[data-bs-theme], html[data-bs-theme][data-bs-core] {
  --op-prism: conic-gradient(from 200deg, #ff6fd0, #b77cff, #6cb8ff, #7cf0c8, #6cb8ff, #b77cff, #ff6fd0);
  --op-prism-line: linear-gradient(90deg, #ff6fd0, #b77cff, #6cb8ff, #7cf0c8);
  --op-night: #0a0618;
  --op-night-2: #140c2b;
  --op-night-3: #1c1238;
  --op-bg: #0a0618;
  --op-card: rgba(20, 12, 43, .94);
  --op-text: #f3f0ff;
  --op-muted: #b4a9de;
  --op-gold: #f2b8ff; /* qw26_46.5.3: no yellow anywhere (owner) - 'gold' is a soft pink-lilac now */
  --op-yellow: #c59cff; --op-yellow-rgb: 197, 156, 255; --op-yellow-strong: #b07cff; --op-orange: #ff6fd0; --op-pink: #ff6fd0;
  --op-light: #eadcff; --op-light-rgb: 234, 220, 255;
  --op-glass: rgba(197, 156, 255, .05); --op-glass-hover: rgba(197, 156, 255, .09);
  --op-border: rgba(197, 156, 255, .16); --op-border-strong: rgba(197, 156, 255, .34);
  --op-ink: #170c33; --op-card-2: rgba(197, 156, 255, .045);
  --bs-link-hover-color: #eadcff; --bs-link-hover-color-rgb: 234, 220, 255; --bs-tertiary-bg: rgba(197, 156, 255, .035); --bs-content-bg: rgba(18, 10, 38, .72);
  --op-accent: linear-gradient(135deg, #ff6fd0, #b77cff);
  /* dark backgrounds of the old theme (brown there, night lilac here): var(--op-dk-R-G-B, R, G, B) in v10/ui-v1, qw26_47.1 */
  --op-dk-10-9-4: 8, 4, 18; --op-dk-10-9-5: 8, 4, 18; --op-dk-11-9-6: 8, 5, 19; --op-dk-12-10-5: 9, 5, 21; --op-dk-12-11-7: 9, 5, 21; --op-dk-13-11-5: 10, 6, 23; --op-dk-13-11-6: 10, 6, 23; --op-dk-14-12-7: 10, 6, 24; --op-dk-14-13-8: 10, 6, 24; --op-dk-15-13-7: 11, 7, 26; --op-dk-16-14-7: 12, 7, 28; --op-dk-16-15-8: 12, 7, 28; --op-dk-17-14-8: 13, 8, 30; --op-dk-18-15-8: 14, 8, 32; --op-dk-18-15-9: 14, 8, 32; --op-dk-18-16-9: 14, 8, 32; --op-dk-18-17-10: 14, 8, 32; --op-dk-18-17-9: 14, 8, 32; --op-dk-19-15-9: 14, 9, 33; --op-dk-19-16-10: 14, 9, 33; --op-dk-20-15-5: 15, 9, 35; --op-dk-20-16-6: 15, 9, 35; --op-dk-20-17-10: 15, 9, 35; --op-dk-20-17-9: 15, 9, 35; --op-dk-20-18-10: 15, 9, 35; --op-dk-20-18-11: 15, 9, 35; --op-dk-20-18-9: 15, 9, 35; --op-dk-21-17-10: 16, 9, 37; --op-dk-21-18-10: 16, 9, 37; --op-dk-21-18-11: 16, 9, 37; --op-dk-22-19-10: 16, 10, 38; --op-dk-22-19-11: 16, 10, 38; --op-dk-22-20-12: 16, 10, 38; --op-dk-23-20-11: 17, 10, 40; --op-dk-23-21-11: 17, 10, 40; --op-dk-24-20-12: 18, 11, 42; --op-dk-24-22-11: 18, 11, 42; --op-dk-26-14-14: 20, 12, 46; --op-dk-27-20-10: 20, 12, 47; --op-dk-27-20-5: 20, 12, 47; --op-dk-27-20-6: 20, 12, 47; --op-dk-27-23-12: 20, 12, 47; --op-dk-27-23-14: 20, 12, 47; --op-dk-28-24-16: 21, 13, 49; --op-dk-28-25-13: 21, 13, 49; --op-dk-29-23-10: 22, 13, 51; --op-dk-29-24-16: 22, 13, 51; --op-dk-31-26-16: 23, 14, 54; --op-dk-34-27-10: 26, 15, 60; --op-dk-34-29-17: 26, 15, 60; --op-dk-34-30-16: 26, 15, 60; --op-dk-36-28-9: 27, 16, 63; --op-dk-42-33-16: 32, 19, 74; --op-dk-43-37-13: 32, 19, 75; --op-dk-60-48-10: 45, 27, 105; --op-dk-8-6-3: 6, 4, 14; --op-dk-8-7-3: 6, 4, 14;
  --op-orange-rgb: 255, 111, 208; --op-ring: 197, 156, 255; --op-dk-56-42-14: 42, 31, 74; --op-dk-34-25-12: 26, 18, 51; --op-metal-hi: #f6eeff; --op-metal-lo: #8f5cff; --op-metal-mid: #b9a6dd;
  --op-font-display: "Cinzel", "Quicksand", Georgia, serif;
  --op-font-text: "Quicksand", "Nunito", system-ui, sans-serif;
  --bs-body-bg: #0a0618;
  --bs-body-color: #f3f0ff;
  --bs-body-font-family: var(--op-font-text);
}

/* ---------- night sky ---------- */
html, html[data-bs-theme] { background: radial-gradient(1100px 650px at 50% -15%, #3b1d6e, transparent 70%),
  radial-gradient(800px 600px at 105% 55%, rgba(90, 23, 71, .75), transparent 70%),
  radial-gradient(800px 600px at -5% 95%, #12335e, transparent 70%), #0a0618 fixed !important; min-height: 100%; }
html::before { content: ""; position: fixed; inset: 0; z-index: -4; pointer-events: none; opacity: .75;
  background-image: radial-gradient(1.2px 1.2px at 10% 20%, #fff, transparent), radial-gradient(1px 1px at 30% 70%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 55% 35%, #e9dcff, transparent), radial-gradient(1px 1px at 75% 15%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 90% 60%, #cfe3ff, transparent), radial-gradient(1px 1px at 65% 85%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 20% 50%, #ffd1f0, transparent), radial-gradient(1px 1px at 45% 90%, #fff, transparent);
  background-size: 420px 420px; }
body, html[data-bs-theme] body { background: transparent !important; font-family: var(--op-font-text) !important; font-weight: 500; color: var(--op-text); }
.op-bgfx { --orb1: 183, 124, 255; --orb2: 255, 111, 208; --orb3: 108, 184, 255; --orb4: 124, 240, 200; }
::selection { background: rgba(183, 124, 255, .45); color: #fff; }
html[data-bs-theme] ::-webkit-scrollbar-track { background: #0a0618; }
html[data-bs-theme] ::-webkit-scrollbar-thumb { background: linear-gradient(#ff6fd0, #b77cff, #6cb8ff) !important; border-radius: 999px; }
.op-bgfx::after { background: radial-gradient(at 50% 40%, transparent 40%, rgba(5, 2, 15, .55)) !important; }

/* ---------- type ---------- */
h1, h2, h3, .op-title, .op-panel-head h3, .op-set-card h2, .op-set-card h3, .op-daily-box h3, .op-hof-hero h1, .op-tn-hero h1, .op-bm-hero h1,
.op-doc-hero h1, .op-cw-hero h1, .op-page-head h1, .op-fb-hero h1, .op-section-head h2 { font-family: var(--op-font-display); letter-spacing: .03em; }
[data-op-name] { font-family: var(--op-font-text); font-weight: 700; }
.op-title-small, .op-kicker, .op-daily-kicker, .op-eyebrow { color: var(--op-gold) !important; }

/* ---------- boxes: calm night fill with a thin lilac line (rainbow only on a few accents, owner qw26_46.5.3) ---------- */
.op-panel, .op-set-card, .op-daily-box, .op-fb-card, .op-doc, .op-sub-card, .op-wk-box, .op-dl-card, .op-kings, .op-rnk-me, .op-tn-card, .op-clan-card,
.op-sup-show-card, .op-explore-card, .op-feature, .op-connect, .op-step, .op-hof-hero, .op-tn-hero, .op-cw-hero, .op-bm-hero, .op-fb-hero, .op-doc-nav,
html[data-bs-theme] .card, html[data-bs-theme] .fable-card {
  border: 1px solid rgba(183, 124, 255, .22) !important;
  background: var(--op-night-2) !important;
  box-shadow: 0 14px 40px rgba(5, 2, 15, .55) !important;
}
.op-panel::before, .op-panel::after { opacity: .35; }
html[data-bs-theme] .dropdown-menu, html[data-bs-theme] .modal-content {
  background: #140c2b !important; border: 1px solid rgba(183, 124, 255, .35) !important; border-radius: 16px !important;
}
.dropdown-item:hover, .dropdown-item:focus { background: rgba(183, 124, 255, .16) !important; }

/* ---------- navbar ---------- */
.op-nav, .op-nav.op-nav-scrolled { background: rgba(10, 6, 24, .9) !important; box-shadow: none !important; }
.op-nav-glow { background: var(--op-prism-line) !important; animation: none !important; height: 1px !important; opacity: .8 !important; }
.op-nav-links .nav-link { border-radius: 999px !important; color: #c9bff0 !important; font-family: var(--op-font-text); font-weight: 700; }
.op-nav-links .nav-link::after { display: none !important; }
.op-nav-links .nav-link:hover { background: rgba(255, 255, 255, .07) !important; color: #fff !important; }
.op-nav-links .nav-link.active { background: rgba(255, 255, 255, .08) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); color: #fff !important; }
.op-nav-links .nav-link.active i { color: #fff !important; }

/* ---------- buttons: pink-lilac pill + glass pill ---------- */
.btn { border-radius: 999px !important; font-family: var(--op-font-text); font-weight: 800 !important; }
.btn-primary, .op-btn-main {
  background: var(--op-accent) !important; border: 0 !important; color: #fff !important;
  box-shadow: 0 6px 24px rgba(255, 111, 208, .3) !important; border-radius: 999px !important;
}
.btn-primary:hover, .op-btn-main:hover { filter: brightness(1.07); }
.btn-secondary, .op-btn-ghost { background: rgba(255, 255, 255, .04) !important; border: 0 !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3) !important;
  color: #f3f0ff !important; border-radius: 999px !important; }
.btn-secondary:hover, .op-btn-ghost:hover { background: rgba(255, 255, 255, .1) !important; }
.op-btn { border-radius: 999px !important; }

/* ---------- inputs ---------- */
.op-input input, .op-input select, .op-input textarea, .form-control, .form-select, .op-fb-text, .fable-search-input {
  background: rgba(10, 6, 24, .7) !important; border: 1px solid rgba(183, 124, 255, .3) !important; color: #fff !important;
}
.op-input input:focus, .form-control:focus, .form-select:focus, .op-fb-text:focus { border-color: #ff6fd0 !important; box-shadow: 0 0 0 3px rgba(255, 111, 208, .18) !important; }

/* ---------- avatars in lists get a lilac ring ---------- */
.op-player .op-avatar, .op-lb-avatar, .op-stage-avatar, .op-member .op-avatar, .op-home-rnk-row img, .op-daily-av, .op-act-seen img, .op-rnk-row .op-daily-av {
  border-radius: 50% !important; padding: 2px; background: rgba(183, 124, 255, .55) !important; border: 0 !important; object-fit: cover;
}

/* ---------- home: banner without video, map of the day as a prism square ---------- */
.op-banner { background: radial-gradient(700px 420px at 15% 0%, rgba(183, 124, 255, .22), transparent 70%),
    radial-gradient(600px 400px at 100% 100%, rgba(255, 111, 208, .16), transparent 70%), var(--op-night-2) !important;
  border: 1.5px solid transparent !important; min-height: 0 !important; }
.op-banner { background: var(--op-night-2) !important; border: 1px solid rgba(183, 124, 255, .25) !important; }
.op-banner::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; border-radius: inherit;
  background: radial-gradient(700px 420px at 15% 0%, rgba(183, 124, 255, .22), transparent 70%), radial-gradient(600px 400px at 100% 100%, rgba(255, 111, 208, .14), transparent 70%); }
.op-banner-in, .op-banner-stats, .op-banner-day { position: relative; z-index: 1; }
.op-banner-shade, .op-banner-video { display: none !important; }
.op-banner-stats > div { border: 1px solid rgba(183, 124, 255, .3) !important; background: var(--op-night) !important; border-radius: 16px !important; }
.op-banner-stats strong { font-family: var(--op-font-display) !important; }
.op-banner-day { grid-column: 2; grid-row: 1 / 3; align-self: center; justify-self: center; width: min(400px, 100%); margin: 1.8rem 2.2rem 1.8rem 0;
  position: relative; display: block; aspect-ratio: 1; border-radius: 34px; padding: 5px; background: var(--op-prism); text-decoration: none; color: #fff;
  box-shadow: 0 0 60px rgba(255, 111, 208, .35); transition: transform .25s; }
.op-banner-day:hover { transform: translateY(-4px); color: #fff; }
.op-banner-day::before { content: ""; position: absolute; inset: -14px; border-radius: 44px; border: 2px solid rgba(255, 255, 255, .25); pointer-events: none; }
.op-banner-day-in { position: relative; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; height: 100%; border-radius: 30px; overflow: hidden;
  background: var(--img) center / cover; padding: 1.4rem 1.5rem; }
.op-banner-day-in::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 6, 24, .1) 20%, rgba(10, 6, 24, .92) 78%); }
.op-banner-day-in > * { position: relative; }
.op-banner-day small { color: var(--op-gold); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; }
.op-banner-day strong { font-family: var(--op-font-display); font-size: 1.35rem; line-height: 1.2; margin: .3rem 0 .25rem; }
.op-banner-day em { font-style: normal; color: #d9d0ff; font-size: .9rem; }
.op-banner-day .op-banner-day-go { margin-top: .8rem; align-self: flex-start; display: inline-flex; gap: .5rem; align-items: center; padding: .55rem 1.1rem; border-radius: 999px;
  background: var(--op-accent); color: #fff; font-weight: 800; font-size: .95rem; }
.op-banner-day .op-banner-day-clock { position: absolute; top: 1rem; right: 1rem; background: rgba(10, 6, 24, .85); border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px; padding: .3rem .8rem; font-weight: 800; font-variant-numeric: tabular-nums; }
@media (max-width: 1199.98px) { .op-banner-day { grid-column: 1; grid-row: auto; margin: 0 1.3rem 1.5rem; width: min(420px, calc(100% - 2.6rem)); justify-self: start; } }

/* rank ladder under the banner */
.op-ladder { display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin: 1.4rem 0 0; padding: 1.1rem 1.6rem; border-radius: 22px;
  border: 1.5px solid transparent; background: linear-gradient(var(--op-night-2), var(--op-night-2)) padding-box, var(--op-prism) border-box; text-decoration: none; }
.op-ladder > span { flex: 1; min-width: 74px; display: flex; flex-direction: column; align-items: center; gap: .25rem; color: #c9bff0; font-weight: 700; font-size: .85rem; }
.op-ladder img { width: 54px; height: 54px; transition: transform .2s; }
.op-ladder:hover img { transform: translateY(-3px); }
.op-ladder:hover { color: #fff; }

/* ---------- leaderboard ---------- */
.op-lb-row { background: rgba(20, 12, 43, .9) !important; border: 1px solid rgba(183, 124, 255, .14) !important; }
.op-lb-row:hover { border-color: rgba(255, 111, 208, .5) !important; background: rgba(28, 18, 56, .95) !important; }
.op-lb-row.op-top-1 { border: 1.5px solid transparent !important; background: linear-gradient(rgba(28, 18, 56, .97), rgba(28, 18, 56, .97)) padding-box, var(--op-prism) border-box !important; }
.op-lb-rank-emb { width: 24px; height: 24px; vertical-align: middle; margin-left: .25rem; flex-shrink: 0; }
.op-stage-pp, .op-lb-stat-pp, .op-lb-main { font-family: var(--op-font-display); }

/* ---------- small things ---------- */
.op-pf-tag, .op-chip, .op-seg { border-radius: 999px !important; }
.op-seg-btn.active { background: var(--op-accent) !important; color: #fff !important; }
footer.footer { background: rgba(10, 6, 24, .85) !important; border-top: 1px solid rgba(183, 124, 255, .25); }
.op-scrollbar { background: var(--op-accent) !important; }
@media (prefers-reduced-motion: reduce) { .op-banner-day, .op-ladder img { transition: none; } }

/* ===== qw26_46.5.1: fixes + new navbar + rainbow logo ===== */
/* the night-sky gradients repeated like tiles on long pages (visible edge) -> fixed + no repeat */
html, html[data-bs-theme] { background-attachment: fixed !important; background-repeat: no-repeat !important; }

/* spotlight (Beatmaps / News / Top plays) was still gold */
.op-spot, .op-spot-flat { border: 1.5px solid transparent !important; border-radius: 24px !important;
  background: var(--op-night-2) !important; border: 1px solid rgba(183, 124, 255, .22) !important; box-shadow: 0 14px 40px rgba(5, 2, 15, .55) !important; }
.op-spot-tabs { background: rgba(10, 6, 24, .7) !important; border: 1px solid rgba(183, 124, 255, .25) !important; border-radius: 999px !important; }
.op-spot-tabs button { border-radius: 999px !important; color: #c9bff0 !important; }
.op-spot-tabs button.active { background: var(--op-accent) !important; color: #fff !important; }
.op-spot-progress span { background: var(--op-accent) !important; }
.op-spot-map, .op-spot-news, .op-spot-play { border: 1px solid rgba(183, 124, 255, .2) !important; background-color: rgba(10, 6, 24, .55) !important; }
.op-spot-map span { color: var(--op-gold) !important; }
/* server activity bars */
.op-act-bar i { background: linear-gradient(180deg, rgba(255, 111, 208, .55), rgba(183, 124, 255, .35)) !important; }
.op-act-bar:hover i { background: linear-gradient(180deg, #ff6fd0, #b77cff) !important; }
.op-act-bar.today i { background: #ff6fd0 !important; }
.op-act-nums > div, .op-act-seen img { border-color: rgba(183, 124, 255, .25) !important; }
.op-act-nums > div { background: rgba(10, 6, 24, .55) !important; border: 1px solid rgba(183, 124, 255, .2) !important; }

/* rainbow "Kuroosu" logo (text in Pacifico, moving prism colours) */
.op-rainbow-logo { display: inline-block; font-family: "Pacifico", cursive; font-weight: 400; line-height: 1.25; letter-spacing: 0; white-space: nowrap;
  background: linear-gradient(90deg, #d9d9e3 0%, #ffffff 22%, #ff6fd0 34%, #b77cff 55%, #6cb8ff 78%, #7cf0c8); background-size: 100% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35)); animation: opu-rainbow-logo 8s linear infinite;
  /* Pacifico has long descenders (the p in Pompa): with background-clip:text only the box is painted -> room below, taken back with a negative margin */
  padding: .05em .14em .32em .08em; margin-bottom: -.32em; overflow: visible; }
@keyframes opu-rainbow-logo { to { background-position: 200% 0; } }
html[data-op-lite] .op-rainbow-logo { animation: none; }
@media (prefers-reduced-motion: reduce) { .op-rainbow-logo { animation: none; } }
.op-logo-text { font-size: 1.65rem; }
.op-footer-logo-text { font-size: 2.2rem; }
.op-title-logo-text { font-size: clamp(3.2rem, 7vw, 5.4rem); margin-top: .1rem; margin-bottom: .05em !important; }
.op-footer-logo-text { margin-bottom: 0 !important; }
.op-nav-brand:hover .op-logo-text { transform: none; filter: drop-shadow(0 0 10px rgba(255, 111, 208, .5)); }

/* ===== navbar: floating night capsule (calm: no rainbow ring/underline since qw26_46.5.3) ===== */
.op-nav, .op-nav.op-nav-scrolled {
  position: sticky !important; top: 10px !important; z-index: 1030;
  width: min(1500px, calc(100% - 24px)); margin: 10px auto 0 !important; padding: .35rem .5rem .35rem 1.1rem !important;
  border-radius: 999px; border: 1.5px solid transparent !important;
  background: rgba(16, 9, 36, .96) !important; border-color: rgba(183, 124, 255, .28) !important;
  box-shadow: 0 12px 40px rgba(5, 2, 15, .6) !important;
}
@media (min-width: 1700px) { .op-nav, .op-nav.op-nav-scrolled { width: min(2100px, calc(100vw - 5rem)); } }
.op-nav .container-fluid { max-width: none !important; padding: 0 !important; }
.op-nav-glow { display: none !important; }
.op-nav-links .nav-link { background: none !important; box-shadow: none !important; color: #c9bff0 !important; position: relative; }
.op-nav-links .nav-link:hover { color: #fff !important; background: none !important; }
.op-nav-links .nav-link.active { color: #fff !important; background: none !important; box-shadow: none !important; }
.op-nav-links .nav-link.active { background: rgba(183, 124, 255, .16) !important; border-radius: 999px !important; }
.op-nav-links .nav-link.active::after, .op-nav-links .nav-link:hover::after, .op-nav-links .nav-link::before { display: none !important; }
.op-nav-links .nav-link > span, .op-nav-links .nav-link:hover > span { background: none !important; -webkit-text-fill-color: currentColor !important; animation: none !important; }
.op-nav-links .nav-link.op-nav-supporter, .op-nav-links .nav-link.op-nav-supporter > span, .op-nav-links .nav-link.op-nav-supporter i { color: #ff8fd6 !important; }
@media (max-width: 1399.98px) {
  .op-nav, .op-nav.op-nav-scrolled { border-radius: 26px; padding: .45rem .7rem .45rem 1rem !important; }
  .op-nav .navbar-collapse { padding: .4rem 0 .2rem; }
}

/* ===== qw26_46.5.3: map of the day fills the right side of the banner (no empty middle any more) ===== */
@media (min-width: 1200px) {
  .op-banner { grid-template-columns: minmax(0, 720px) minmax(0, 1fr) !important; }
  .op-banner-day { width: auto; aspect-ratio: auto; justify-self: stretch; align-self: stretch; min-height: 420px; margin: 1.6rem 1.6rem 1.6rem 0; }
  .op-banner-day::before { display: none; }
  .op-banner-day-in { padding: 2rem 2.2rem; }
  .op-banner-day strong { font-size: clamp(1.6rem, 2vw, 2.3rem); }
  .op-banner-day em { font-size: 1.05rem; }
  .op-banner-day small { font-size: .8rem; }
}

/* ---------- Menu icons as little hit circles, like the rank emblems (qw26_52.0.2, owner: "all icons cooler, like the ranked icon") ----------
   Every Font Awesome icon in the menu bar and its drop-downs becomes a coloured circle with a white ring, a gloss and a glow.
   --ic = main colour, --ic2 = dark edge. Only here (Celestial), the Classic design keeps its plain icons. */
.op-nav .dropdown-item > i[class*="fa-"],
.op-nav-links .nav-link > i[class*="fa-"] {
  position: relative; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; font-size: .66rem; line-height: 24px; text-align: center;
  color: #fff !important; opacity: 1 !important; text-shadow: 0 1px 1px rgba(0, 0, 0, .45);
  background: radial-gradient(circle at 50% 25%, color-mix(in srgb, var(--ic) 55%, #fff) 0, var(--ic) 48%, var(--ic2) 100%);
  box-shadow: inset 0 0 0 1.6px rgba(255, 255, 255, .92), 0 0 0 1.5px color-mix(in srgb, var(--ic2) 80%, transparent), 0 0 9px color-mix(in srgb, var(--ic) 70%, transparent);
  transition: transform .3s var(--op-ease, ease), box-shadow .25s;
}
.op-nav .dropdown-item > i[class*="fa-"] { display: inline-block; margin-right: .55rem; vertical-align: middle; }
.op-nav .dropdown-item > i[class*="fa-"]::after,
.op-nav-links .nav-link > i[class*="fa-"]::after {
  content: ''; position: absolute; left: 4px; right: 4px; top: 2.5px; height: 8px; border-radius: 50% 50% 45% 45%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0)); pointer-events: none;
}
.op-nav .dropdown-item:hover > i[class*="fa-"],
.op-nav-links .nav-link:hover > i[class*="fa-"] { transform: scale(1.18) rotate(-8deg);
  box-shadow: inset 0 0 0 1.6px #fff, 0 0 0 1.5px var(--ic2), 0 0 16px var(--ic); }
/* the main links show their icons from 1920 px and in the phone menu (same rule as before, they are hidden in between) */
@media (min-width: 1920px), (max-width: 1399.98px) {
  .op-nav-links .nav-link > i[class*="fa-"] { display: inline-block; vertical-align: middle; margin-right: .1rem; }
}
.op-nav-links .nav-link i.op-nav-rank img { width: 24px; height: 24px; }
/* colours: one per kind of thing (default on the bar itself, so the rules below can change it) */
.op-nav { --ic: #b77cff; --ic2: #5b2aa8; }
.op-nav i.fa-house, .op-nav i.fa-user, .op-nav i.fa-gear { --ic: #b77cff; --ic2: #5b2aa8; }
.op-nav i.fa-newspaper, .op-nav i.fa-clock-rotate-left, .op-nav i.fa-book, .op-nav i.fa-calculator, .op-nav i.fa-code-compare, .op-nav i.fa-magnifying-glass { --ic: #6cb8ff; --ic2: #1f5fb0; }
.op-nav i.fa-ranking-star, .op-nav i.fa-chart-simple, .op-nav i.fa-people-group, .op-nav i.fa-user-group, .op-nav i.fa-upload { --ic: #5fe0b5; --ic2: #12785a; }
.op-nav i.fa-trophy, .op-nav i.fa-landmark, .op-nav i.fa-bolt, .op-nav i.fa-lightbulb { --ic: #ff9ad8; --ic2: #b0207a; }
.op-nav i.fa-music, .op-nav i.fa-dice, .op-nav i.fa-users-viewfinder, .op-nav i.fa-inbox, .op-nav i.fa-puzzle-piece { --ic: #8f9bff; --ic2: #3a3fb5; }
.op-nav i.fa-users, .op-nav i.fa-user-shield, .op-nav i.fa-shield-halved, .op-nav i.fa-scale-balanced { --ic: #5ad2ee; --ic2: #136a85; }
.op-nav i.fa-star, .op-nav i.fa-gift, .op-nav i.fa-heart { --ic: #ff6fb5; --ic2: #a81d63; }
.op-nav i.fa-bug, .op-nav i.fa-flag, .op-nav i.fa-right-from-bracket { --ic: #ff7b86; --ic2: #9c1f2c; }
.op-nav i.fa-lock { --ic: #9aa3b8; --ic2: #454c5e; }
html[data-op-lite] .op-nav .dropdown-item > i[class*="fa-"], html[data-op-lite] .op-nav-links .nav-link > i[class*="fa-"] { transition: none; }

/* ---------- "Soft" boxes (qw26_53, owner picked variant B of the "fewer boxes" previews: "ich will soft") ----------
   The outer boxes stay, but without a line around them, without a shadow and with a hardly visible fill and rounder corners.
   Little boxes inside boxes (number tiles, the rows of the maps of the day) lose their frame, so there is no box in a box.
   Single things keep their shape: map cards, the map of the day, the vote card, score rows, leaderboard rows. */
.op-panel, .op-banner, .op-ladder, .op-spot, .op-set-card, .op-daily-box, .op-daily-hero, .op-fb-card, .op-doc, .op-sub-card, .op-wk-box, .op-dl-card,
.op-kings, .op-rnk-me, .op-rnk-rewards, .op-tn-card, .op-clan-card, .op-sup-show-card, .op-explore-card, .op-feature, .op-connect, .op-step,
.op-hof-hero, .op-tn-hero, .op-cw-hero, .op-bm-hero, .op-fb-hero, .op-doc-nav, .op-pf:not(.op-pf-custom) .op-pf-section, .op-medals,
html[data-bs-theme] .card, html[data-bs-theme] .fable-card {
  border-color: transparent !important; box-shadow: none !important;
  background: rgba(255, 255, 255, .035) !important; background-image: none !important; border-radius: 28px !important;
}
.op-panel::before, .op-panel::after, .op-banner::before { display: none !important; }
.op-banner-stats > div, .op-act-nums > div, .op-side-map, .op-pf-stat, .op-pf-rank {
  border-color: transparent !important; background: transparent !important; box-shadow: none !important;
}
.op-banner-stats > div, .op-act-nums > div { padding-left: 0 !important; }
/* a card inside a soft box must not make a second box */
.op-panel .card, .op-pf-section .card, .card .card { background: transparent !important; }
/* profiles: the header keeps its cover, only the line around it goes; supporters with a profile colour keep their tinted boxes */
.op-pf:not(.op-pf-custom) .op-pf-header { border-color: transparent !important; box-shadow: none !important; }

/* ---------- "Soft" everywhere (qw26_53.0.1, owner: "mach das genau so ueberall, auch navbar") ----------
   No outline anywhere: every line around a box, row, card, input, tab bar, menu or the menu bar is gone, the faint fills stay.
   Kept on purpose: small coloured chips (role, clan, country tags, badges), avatars and their frames, rank emblems, the round menu icons,
   spinners, focus rings (so you still see where you type), and the rainbow edge of the map of the day / vote card (that is a background, not a border). */
html[data-bs-theme] body :where(div, section, aside, article, header, footer, nav, details, form, ul, li, table, tr, td, th, a, label, button,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea)
  :not(:focus):not(:focus-visible):not(.spinner-border):not(.spinner-grow):not(.badge):not([class*="-tag"]):not([class*="-chip"]):not([class*="-badge"]):not([class*="frame"]) {
  border-color: transparent !important;
}
/* shadows that only drew a box edge */
.op-nav, .op-nav.op-nav-scrolled, .op-auth, .op-cl-hero, .op-map-hero, .op-sp-hero, .op-map-diff, .op-stage-block, .footer, html[data-bs-theme] td, html[data-bs-theme] th,
.btn-secondary, .op-btn-ghost, .op-lb-row, .op-sc, .op-bm-card, .op-newscard, .op-team-card, .op-rec-card { box-shadow: none !important; }
/* menu bar: same soft area as the boxes (dark underneath so the page does not shine through while scrolling) */
.op-nav, .op-nav.op-nav-scrolled { background: linear-gradient(rgba(255, 255, 255, .045), rgba(255, 255, 255, .045)), rgba(12, 8, 28, .93) !important; }
.op-nav-glow { display: none !important; }
/* floating layers keep a soft shadow instead of a line, otherwise they melt into the page */
html[data-bs-theme] .dropdown-menu, html[data-bs-theme] .modal-content, .op-hc, .op-pop, .op-toast, .op-pp-results, .op-pf-visitors {
  border-color: transparent !important; box-shadow: 0 18px 50px rgba(3, 1, 12, .7) !important;
}
/* things that were only a line get the soft fill, so they are still there */
.op-seg, .op-spot-tabs, .op-tabs, .op-pp-search, .op-rec-stars, .op-daily-timer, .op-doc-card, .op-dl-feat, .op-hof-ms-item, .op-king-step, .op-sp-stats, .op-sp-hits,
.op-map-side, .op-map-board, .op-map-pp.op-pp, .op-ctry-row, .op-col-card, .op-lbx-side, .op-lbx-row:not(.op-lbx-head):not(.op-lbx-me), .op-sup-wall, .op-kings-nowitem { background-color: rgba(255, 255, 255, .035) !important; }
html[data-bs-theme] .form-control, html[data-bs-theme] .form-select, .op-input, .op-pp-num, .op-pp-accwrap input[type=number] { background-color: rgba(255, 255, 255, .06) !important; }