/* Kuroosu "Glass" look - the default design since qw26_59 (cookie op_design: glass or none = Glass, celestial, classic; design
   menu in the menu bar). FableRoute puts glassDesign into the templates: base.html loads this file on top of Celestial and sets
   html[data-op-glass], the home page uses modules/home/glass.html (classes gh-*) instead of the old layout.
   Look: a colourful wallpaper, light glass panes with a bright rim, system font like on Apple devices, pills, a lot of room.
   Real blur (backdrop-filter) on the menu bar, menus, windows and the panes; everything off with "Reduce effects". */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

html[data-op-glass], html[data-op-glass][data-bs-theme][data-bs-core] {
  --op-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", system-ui, sans-serif;
  --op-font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --gl-fill: linear-gradient(180deg, rgba(255, 255, 255, .105), rgba(255, 255, 255, .045));
  --gl-fill-strong: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .07));
  --gl-edge: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 0 0 1px rgba(255, 255, 255, .075);
  --gl-shadow: 0 24px 60px -28px rgba(0, 0, 0, .75);
  --gl-radius: 26px;
  --op-text: #f5f5f7;
  --op-muted: #a1a1ad;
  --op-accent: linear-gradient(135deg, #ff7ad9, #9d7bff);
}

/* ---------- wallpaper ---------- */
html[data-op-glass][data-bs-theme] {
  background:
    radial-gradient(900px 620px at 12% -8%, rgba(120, 96, 255, .42), transparent 62%) fixed no-repeat,
    radial-gradient(820px 600px at 92% 4%, rgba(255, 92, 190, .30), transparent 60%) fixed no-repeat,
    radial-gradient(900px 700px at 78% 96%, rgba(64, 156, 255, .28), transparent 62%) fixed no-repeat,
    radial-gradient(760px 620px at 6% 92%, rgba(60, 220, 190, .16), transparent 60%) fixed no-repeat,
    #08080d !important;
}
html[data-op-glass]::before { display: none !important; }                 /* star dots */
html[data-op-glass] .op-bgfx { display: none !important; }                 /* moving orbs, sparkles, shooting stars */
html[data-op-glass] body { font-family: var(--op-font-text) !important; letter-spacing: -.005em; -webkit-font-smoothing: antialiased; }
html[data-op-glass] h1, html[data-op-glass] h2, html[data-op-glass] h3, html[data-op-glass] h4, html[data-op-glass] h5,
html[data-op-glass] .op-panel-head, html[data-op-glass] .op-section-head h2, html[data-op-glass] .op-spot-title,
html[data-op-glass] .op-banner-stats strong, html[data-op-glass] .op-pf-stat strong, html[data-op-glass] .op-act-nums strong {
  font-family: var(--op-font-display) !important; letter-spacing: -.022em !important; font-weight: 700 !important; text-transform: none !important;
}
html[data-op-glass] .op-eyebrow { letter-spacing: .28em !important; font-family: var(--op-font-text) !important; font-weight: 600 !important; color: var(--op-muted) !important; }

/* ---------- glass panels ---------- */
html[data-op-glass] .op-panel, html[data-op-glass] .op-banner, html[data-op-glass] .op-ladder, html[data-op-glass] .op-spot,
html[data-op-glass] .op-set-card, html[data-op-glass] .op-daily-box, html[data-op-glass] .op-daily-hero, html[data-op-glass] .op-fb-card,
html[data-op-glass] .op-doc, html[data-op-glass] .op-sub-card, html[data-op-glass] .op-wk-box, html[data-op-glass] .op-dl-card,
html[data-op-glass] .op-kings, html[data-op-glass] .op-rnk-me, html[data-op-glass] .op-rnk-rewards, html[data-op-glass] .op-tn-card,
html[data-op-glass] .op-clan-card, html[data-op-glass] .op-sup-show-card, html[data-op-glass] .op-explore-card, html[data-op-glass] .op-feature,
html[data-op-glass] .op-connect, html[data-op-glass] .op-step, html[data-op-glass] .op-hof-hero, html[data-op-glass] .op-tn-hero,
html[data-op-glass] .op-cw-hero, html[data-op-glass] .op-bm-hero, html[data-op-glass] .op-fb-hero, html[data-op-glass] .op-doc-nav,
html[data-op-glass] .op-pf:not(.op-pf-custom) .op-pf-section, html[data-op-glass] .op-medals, html[data-op-glass] .op-auth,
html[data-op-glass] .op-lbx-side, html[data-op-glass] .op-map-side, html[data-op-glass] .op-map-board, html[data-op-glass] .op-map-pp.op-pp,
html[data-op-glass] .op-sp-stats, html[data-op-glass] .op-sp-hits, html[data-op-glass] .op-doc-card, html[data-op-glass] .op-col-card,
html[data-op-glass][data-bs-theme] .card, html[data-op-glass][data-bs-theme] .fable-card {
  background: var(--gl-fill) !important; background-image: var(--gl-fill) !important;
  box-shadow: var(--gl-edge), var(--gl-shadow) !important;
  border-radius: var(--gl-radius) !important;
}
/* no glass inside glass */
html[data-op-glass] .op-panel .card, html[data-op-glass] .op-pf-section .card, html[data-op-glass] .card .card,
html[data-op-glass] .op-panel .op-panel, html[data-op-glass] .op-connect .op-step {
  background: transparent !important; background-image: none !important; box-shadow: none !important;
}
html[data-op-glass] .op-panel, html[data-op-glass] .op-spot { padding: 1.5rem 1.6rem !important; }
html[data-op-glass] .op-panel-head { font-size: 1.06rem !important; margin-bottom: 1rem !important; }
html[data-op-glass] .op-panel-head i { opacity: .7; }

/* rows inside panels: flat, a soft pill when you point at them */
html[data-op-glass] .op-lbx-row:not(.op-lbx-head):not(.op-lbx-me), html[data-op-glass] .op-ctry-row, html[data-op-glass] .op-side-map,
html[data-op-glass] .op-hof-ms-item, html[data-op-glass] .op-kings-nowitem {
  background-color: rgba(255, 255, 255, .04) !important; border-radius: 16px !important;
}
html[data-op-glass] .op-lbx-row:not(.op-lbx-head):hover, html[data-op-glass] .op-ctry-row:hover { background-color: rgba(255, 255, 255, .09) !important; }
html[data-op-glass] .op-seg, html[data-op-glass] .op-spot-tabs, html[data-op-glass] .op-tabs, html[data-op-glass] .op-pp-search,
html[data-op-glass] .op-rec-stars, html[data-op-glass] .op-daily-timer {
  background-color: rgba(255, 255, 255, .07) !important; border-radius: 999px !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06) !important;
}

/* ---------- menu bar: a floating glass capsule with real blur ---------- */
html[data-op-glass] .op-nav, html[data-op-glass] .op-nav.op-nav-scrolled {
  background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .06)), rgba(16, 16, 24, .55) !important;
  -webkit-backdrop-filter: blur(26px) saturate(180%) !important; backdrop-filter: blur(26px) saturate(180%) !important;
  box-shadow: var(--gl-edge), 0 18px 46px -22px rgba(0, 0, 0, .8) !important;
}
html[data-op-glass][data-op-lite] .op-nav { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(20, 20, 30, .94) !important; }
html[data-op-glass] .op-nav .nav-link { font-family: var(--op-font-text) !important; font-weight: 600 !important; letter-spacing: -.01em !important; color: rgba(245, 245, 247, .82) !important; }
html[data-op-glass] .op-nav .nav-link.active, html[data-op-glass] .op-nav .nav-link:hover {
  background: rgba(255, 255, 255, .13) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2) !important;
}
/* floating layers */
html[data-op-glass][data-bs-theme] .dropdown-menu, html[data-op-glass][data-bs-theme] .modal-content, html[data-op-glass] .op-hc,
html[data-op-glass] .op-pop, html[data-op-glass] .op-toast, html[data-op-glass] .op-pp-results, html[data-op-glass] .op-pf-visitors, html[data-op-glass] .op-music {
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .07)), rgba(18, 18, 28, .72) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%) !important; backdrop-filter: blur(30px) saturate(180%) !important;
  box-shadow: var(--gl-edge), 0 30px 70px -20px rgba(0, 0, 0, .85) !important; border-radius: 20px !important;
}
html[data-op-glass][data-op-lite] .dropdown-menu, html[data-op-glass][data-op-lite] .modal-content {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(22, 22, 32, .97) !important;
}
html[data-op-glass] .dropdown-item { border-radius: 12px !important; }
html[data-op-glass] .dropdown-item:hover { background: rgba(255, 255, 255, .12) !important; }

/* ---------- buttons and fields ---------- */
html[data-op-glass] .btn, html[data-op-glass] .op-btn, html[data-op-glass] .op-cta a {
  font-family: var(--op-font-text) !important; font-weight: 600 !important; letter-spacing: -.01em !important; border-radius: 999px !important;
}
html[data-op-glass] .btn-primary, html[data-op-glass] .op-btn-main {
  background: #f5f5f7 !important; background-image: none !important; color: #0b0b10 !important;
  box-shadow: 0 10px 30px -12px rgba(255, 255, 255, .45) !important;
}
html[data-op-glass] .btn-primary:hover, html[data-op-glass] .op-btn-main:hover { background: #fff !important; transform: translateY(-1px); }
html[data-op-glass] .btn-primary i, html[data-op-glass] .op-btn-main i { color: inherit !important; }
html[data-op-glass] .btn-secondary, html[data-op-glass] .op-btn-ghost, html[data-op-glass] .btn-outline-secondary {
  background: var(--gl-fill-strong) !important; color: #f5f5f7 !important; box-shadow: var(--gl-edge) !important;
}
html[data-op-glass][data-bs-theme] .form-control, html[data-op-glass][data-bs-theme] .form-select, html[data-op-glass] .op-input,
html[data-op-glass] .op-pp-num {
  background-color: rgba(255, 255, 255, .08) !important; border-radius: 14px !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07) !important;
}

/* ---------- home page ---------- */
html[data-op-glass] .op-banner { padding: 3.2rem 3.2rem !important; }
html[data-op-glass] .op-banner p { color: rgba(245, 245, 247, .72) !important; font-size: 1.12rem !important; line-height: 1.6 !important; }
html[data-op-glass] .op-banner-stats strong { font-size: 1.9rem !important; }
html[data-op-glass] .op-banner-stats span { letter-spacing: .14em !important; color: var(--op-muted) !important; }
html[data-op-glass] .op-banner-day { border-radius: 30px !important; }
html[data-op-glass] .op-home2 .op-home-grid { gap: 2.6rem !important; }
html[data-op-glass] .op-section-head h2 { font-size: 2rem !important; }


/* ---------- stronger glass (owner: "mehr liquid glass, mehr wie Apple") ---------- */
html[data-op-glass], html[data-op-glass][data-bs-theme][data-bs-core] {
  --gl-fill: linear-gradient(160deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .055) 55%, rgba(255, 255, 255, .09));
  --gl-fill-strong: linear-gradient(160deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .1));
  --gl-edge: inset 0 1px 0 rgba(255, 255, 255, .5), inset 1px 0 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(255, 255, 255, .06), inset 0 0 0 1px rgba(255, 255, 255, .09);
  --gl-shadow: 0 30px 70px -30px rgba(0, 0, 0, .7);
  --gl-radius: 30px;
  --gl-blur: blur(34px) saturate(190%);
}
html[data-op-glass][data-bs-theme] {
  background:
    radial-gradient(1000px 700px at 8% -6%, rgba(106, 90, 255, .75), transparent 62%) fixed no-repeat,
    radial-gradient(900px 640px at 96% 0%, rgba(255, 86, 170, .6), transparent 60%) fixed no-repeat,
    radial-gradient(1000px 760px at 84% 100%, rgba(40, 150, 255, .58), transparent 62%) fixed no-repeat,
    radial-gradient(860px 680px at 0% 100%, rgba(40, 220, 190, .34), transparent 60%) fixed no-repeat,
    radial-gradient(700px 520px at 50% 46%, rgba(255, 160, 90, .16), transparent 64%) fixed no-repeat,
    #0b0b14 !important;
}
html[data-op-glass]:not([data-op-lite]) .op-panel, html[data-op-glass]:not([data-op-lite]) .op-spot, html[data-op-glass]:not([data-op-lite]) .op-lbx-side,
html[data-op-glass]:not([data-op-lite]) .op-pf-section, html[data-op-glass]:not([data-op-lite]) .op-set-card, html[data-op-glass]:not([data-op-lite]) .gh-tile,
html[data-op-glass]:not([data-op-lite]) .gh-end, html[data-op-glass]:not([data-op-lite])[data-bs-theme] .card {
  -webkit-backdrop-filter: var(--gl-blur) !important; backdrop-filter: var(--gl-blur) !important;
}
html[data-op-glass] .op-panel .card, html[data-op-glass] .card .card { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html[data-op-glass] h1, html[data-op-glass] .op-page-head h1 { font-weight: 800 !important; letter-spacing: -.035em !important; }
/* menu bar on top: slimmer, quieter, like the bar on apple.com */
html[data-op-glass] .op-nav .nav-link { font-weight: 500 !important; font-size: .9rem !important; }
html[data-op-glass] .op-nav-links .nav-link > i { display: none !important; }

/* =====================================================================================================================
   Home page (modules/home/glass.html)
   ===================================================================================================================== */
.gh { padding-bottom: 4rem; }
.gh a { text-decoration: none; color: inherit; }
.gh-hero { text-align: center; padding: 5.5rem 1.2rem 4.2rem; max-width: 980px; margin: 0 auto; }
.gh-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem 1.05rem; border-radius: 999px; font-size: .84rem; font-weight: 500; color: rgba(245, 245, 247, .82);
  background: var(--gl-fill-strong); box-shadow: var(--gl-edge); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.gh-pill b { color: #fff; }
.gh-dot { width: 8px; height: 8px; border-radius: 50%; background: #34d27b; box-shadow: 0 0 0 4px rgba(52, 210, 123, .22); }
/* the hero title is the rainbow logo (owner: "mit dem coolen Logo, dem bunten und bewegten") */
.gh-title { margin: 1.2rem 0 0 !important; line-height: 1 !important; }
.gh-title .op-rainbow-logo { font-size: clamp(3.6rem, 11vw, 8.4rem); line-height: 1.25; }
.gh-lead { margin: 1.5rem auto 0; max-width: 620px; font-size: 1.22rem; line-height: 1.5; color: rgba(245, 245, 247, .72); font-weight: 400; }
.gh-cta { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: 2.1rem; }
.gh-btn { display: inline-flex; align-items: center; gap: .55rem; padding: .78rem 1.45rem; border-radius: 999px; font-weight: 600; font-size: 1rem; color: #f5f5f7 !important;
  background: var(--gl-fill-strong); box-shadow: var(--gl-edge); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); transition: transform .16s ease, background .16s ease; }
.gh-btn:hover { transform: translateY(-2px); background: linear-gradient(160deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .16)); }
.gh-btn-main { background: #f5f5f7 !important; color: #0b0b10 !important; box-shadow: 0 14px 36px -14px rgba(255, 255, 255, .55); }
.gh-btn-main:hover { background: #fff !important; }
.gh-btn-sm { padding: .5rem 1.05rem; font-size: .9rem; }
/* owner 17.10.: "Play" instead of "How to connect", then "make the Play button nicer" twice -> variant A "rainbow glass"
   (branding/lazer/preview-v4.html): the whole button is rainbow, white text, a glass shine on the top half. The colours drift
   slowly: a twice-as-wide rainbow layer (::before) slides by transform, so nothing but transform moves. */
.gh-btn.gh-btn-play { position: relative; isolation: isolate; overflow: hidden; color: #fff !important; background: #8f5cff !important;
  font-weight: 900; font-size: 1.16rem; letter-spacing: .02em; padding: .95rem 2.5rem .95rem 2.15rem; text-shadow: 0 1px 3px rgba(30, 10, 80, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -6px 14px rgba(60, 20, 120, .22), 0 16px 40px -12px rgba(183, 124, 255, .9), 0 10px 30px -14px rgba(108, 184, 255, .9) !important;
  -webkit-backdrop-filter: none; backdrop-filter: none; }
.gh-btn.gh-btn-play::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 200%; z-index: -2; pointer-events: none;
  background: linear-gradient(100deg, #e040b0, #8f5cff 16.6%, #3f8cff 33.3%, #2fc4a0 50%, #3f8cff 66.6%, #8f5cff 83.3%, #e040b0);
  animation: opu-play-flow 9s linear infinite; }
@keyframes opu-play-flow { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.gh-btn.gh-btn-play::after { content: ""; position: absolute; top: 2px; left: 6%; right: 6%; height: 45%; z-index: -1; pointer-events: none; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0)); }
.gh-btn.gh-btn-play:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -6px 14px rgba(60, 20, 120, .22), 0 0 0 4px rgba(255, 255, 255, .12), 0 20px 48px -12px rgba(183, 124, 255, 1), 0 12px 36px -14px rgba(108, 184, 255, 1) !important; }
.gh-btn.gh-btn-play i { font-size: 1.05em; color: #fff; filter: drop-shadow(0 1px 2px rgba(30, 10, 80, .45)); }
html.op-lite .gh-btn.gh-btn-play::before, html[data-op-lite] .gh-btn.gh-btn-play::before { animation: none; }
@media (prefers-reduced-motion: reduce) { .gh-btn.gh-btn-play::before { animation: none; } }
/* launcher announcement under the hero buttons (owner 17.10.: "bold on the home page") */
.gh-launch { display: flex; align-items: center; gap: 1rem; max-width: 760px; margin: 1.6rem auto 0; padding: .9rem 1.2rem .9rem .9rem; border-radius: 22px; text-align: left; text-decoration: none !important; color: #f5f5f7 !important;
  background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), inset 0 1px 0 rgba(255, 255, 255, .3), 0 18px 44px -20px rgba(10, 10, 40, .7);
  backdrop-filter: blur(18px) saturate(1.3); transition: transform .2s ease, background .2s ease; }
.gh-launch:hover { transform: translateY(-2px); background: linear-gradient(160deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .09)); }
.gh-launch-icon { width: 58px; height: 58px; flex-shrink: 0; filter: drop-shadow(0 6px 14px rgba(120, 90, 255, .45)); }
.gh-launch-txt { display: flex; flex-direction: column; gap: .2rem; min-width: 0; flex: 1; }
.gh-launch-txt strong { font-size: 1.28rem; font-weight: 900; letter-spacing: -.01em; }
.gh-launch-txt small { font-size: .9rem; color: rgba(245, 245, 247, .74); line-height: 1.4; }
.gh-launch-go { flex-shrink: 0; font-weight: 800; font-size: .92rem; padding: .55rem 1rem; border-radius: 999px; color: #15152a; background: #f5f5f7; }
.gh-launch-go i { margin-left: .35rem; }
@media (max-width: 575px) { .gh-launch { flex-wrap: wrap; } .gh-launch-go { width: 100%; text-align: center; } .gh-launch-txt strong { font-size: 1.1rem; } }
.gh-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 2.4rem; margin-top: 2.6rem; color: rgba(245, 245, 247, .55); font-size: .95rem; }
.gh-stats b { color: #fff; font-weight: 700; font-size: 1.15rem; margin-right: .3rem; font-variant-numeric: tabular-nums; }

/* bento */
.gh-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(210px, auto); gap: 1.25rem; }
.gh-tile { position: relative; display: flex; flex-direction: column; gap: .5rem; padding: 1.5rem 1.6rem; border-radius: var(--gl-radius); overflow: hidden; min-width: 0;
  background: var(--gl-fill); box-shadow: var(--gl-edge), var(--gl-shadow); color: #f5f5f7; transition: transform .2s ease; }
a.gh-tile:hover { transform: translateY(-4px); color: #fff; }
.gh-kicker { display: inline-flex; align-items: center; gap: .45rem; font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(245, 245, 247, .62); }
.gh-kicker b { color: #fff; letter-spacing: 0; }
.gh-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.gh-tile-head a { font-size: .84rem; font-weight: 600; color: rgba(245, 245, 247, .7); white-space: nowrap; }
.gh-tile-head a:hover { color: #fff; }
.gh-tile-title { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin-top: auto; }
.gh-big { display: flex; align-items: baseline; gap: .4rem; margin-top: auto; }
.gh-big b { font-size: 3.4rem; font-weight: 800; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.gh-big small { font-size: 1.05rem; font-weight: 600; color: rgba(245, 245, 247, .6); }
.gh-sub { font-size: .9rem; color: rgba(245, 245, 247, .66); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gh-foot { margin-top: auto; padding-top: .5rem; font-size: .82rem; color: rgba(245, 245, 247, .55); }
.gh-foot b { color: #fff; }
.gh-none { display: block; padding: 1rem 0; color: rgba(245, 245, 247, .55); font-size: .92rem; }
/* picture tiles */
.gh-day, .gh-best { background: #0d0d16; }
.gh-day::before, .gh-best::before { content: ""; position: absolute; inset: 0; background: var(--img) center / cover no-repeat; }
.gh-day::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 8, 14, .5) 0%, rgba(8, 8, 14, 0) 34%, rgba(8, 8, 14, .92) 100%); }
.gh-best::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 8, 14, .62), rgba(8, 8, 14, .9)); }
.gh-day > *, .gh-best > * { position: relative; z-index: 1; }
.gh-day { grid-column: span 2; grid-row: span 2; min-height: 460px; padding: 1.7rem 1.9rem; }
.gh-day .gh-kicker { color: #fff; }
.gh-clock { position: absolute !important; top: 1.5rem; right: 1.6rem; padding: .4rem .85rem; border-radius: 999px; font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums;
  background: rgba(20, 20, 30, .55); box-shadow: var(--gl-edge); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.gh-day-text { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
.gh-day-text strong { font-size: clamp(1.7rem, 2.6vw, 2.6rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.08; }
.gh-day-text em { font-style: normal; color: rgba(245, 245, 247, .8); margin-bottom: .6rem; }
.gh-ranked, .gh-top { grid-row: span 2; }
.gh-tabs { display: flex; gap: 2px; padding: 3px !important; margin: .3rem 0 .5rem; }
.gh-tabs .op-tab { flex: 1 1 0; border: 0; background: none; color: rgba(245, 245, 247, .7); font-weight: 600; font-size: .82rem; padding: .36rem .3rem; border-radius: 999px; }
.gh-tabs .op-tab.active { background: rgba(255, 255, 255, .2); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.gh .op-tab-pane { display: none; } .gh .op-tab-pane.active { display: block; }
.gh-line { display: flex; align-items: center; gap: .7rem; padding: .5rem .55rem; margin: 0 -.55rem; border-radius: 14px; }
.gh-line:hover { background: rgba(255, 255, 255, .1); }
.gh-line > b { width: 1.3rem; text-align: center; color: rgba(245, 245, 247, .5); font-weight: 700; font-size: .9rem; }
.gh-av { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.gh-line-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.gh-line-name .op-flag { width: 20px; margin-right: .3rem; border-radius: 3px; }
.gh-emb { width: 26px; height: 26px; flex: 0 0 auto; }
.gh-line > em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.gh-line > em small { color: rgba(245, 245, 247, .55); font-weight: 600; margin-left: 1px; }
.gh-me { display: flex; align-items: center; gap: .9rem; padding: .8rem .9rem; margin-bottom: .4rem; border-radius: 18px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
.gh-me img { width: 52px; height: 52px; }
.gh-me span { display: flex; flex-direction: column; min-width: 0; }
.gh-me small { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(245, 245, 247, .6); }
.gh-me strong { font-size: 1.15rem; } .gh-me em { font-style: normal; font-size: .85rem; color: rgba(245, 245, 247, .7); }
.gh-bars { display: flex; align-items: flex-end; gap: 4px; height: 46px; margin-top: .7rem; }
.gh-bars i { flex: 1 1 0; height: var(--h); min-height: 3px; border-radius: 4px; background: rgba(255, 255, 255, .28); }
.gh-bars i.today { background: #fff; }
.gh-warline { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .95rem; }
.gh-warline:first-of-type { margin-top: auto; }
.gh-warline b { color: rgba(245, 245, 247, .55); } .gh-warline span { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gh-warline em { font-style: normal; font-variant-numeric: tabular-nums; }
.gh-vote .gh-kicker i, .gh-supp .gh-kicker i { color: #ff6fae; }
/* vote tile (qw26_79): 24 h, your next vote, two buttons; neutral like the rest of Glass */
.gh-vote-me { font-size: .88rem; font-weight: 600; color: rgba(245, 245, 247, .82); display: flex; align-items: center; gap: .45rem; }
.gh-vote-me i { color: rgba(245, 245, 247, .55); }
.gh-vote-me.ok i { color: #8ff0b5; }
.gh-vote-me b { font-variant-numeric: tabular-nums; color: #fff; }
.gh-vote-goal { font-size: .8rem; color: rgba(245, 245, 247, .55); }
.gh-vote-btns { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; margin-top: .3rem; }
.gh-vote-btns a { display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .55rem .9rem; border-radius: 999px; font-size: .86rem; font-weight: 700;
  text-decoration: none; color: #fff; background: rgba(255, 255, 255, .1); transition: background .2s; }
.gh-vote-btns a.gh-vote-go { background: rgba(255, 255, 255, .9); color: #111; }
.gh-vote-btns a:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.gh-vote-btns a.gh-vote-go:hover { background: #fff; color: #000; }
html[data-op-glass][data-op-glass] .op-vt-card { background: rgba(255, 255, 255, .055); backdrop-filter: blur(18px); }
html[data-op-glass][data-op-glass] .op-vt-hero .op-btn-main { background: rgba(255, 255, 255, .92); color: #111; }

/* rows that scroll sideways */
.gh-row { margin-top: 3.6rem; }
.gh-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.gh-row-head h2 { font-size: 1.9rem !important; font-weight: 800 !important; letter-spacing: -.035em !important; margin: 0 !important; }
.gh-row-head h2 small { font-size: 1rem; font-weight: 600; color: rgba(245, 245, 247, .5); letter-spacing: 0; margin-left: .4rem; }
.gh-row-head a { font-weight: 600; color: rgba(245, 245, 247, .7); white-space: nowrap; }
.gh-row-head a:hover { color: #fff; }
.gh-scroll { display: flex; gap: 1.1rem; overflow-x: auto; scroll-snap-type: x proximity; padding: .4rem .2rem 1.2rem; margin: 0 -.2rem; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; }
.gh-card { flex: 0 0 300px; scroll-snap-align: start; display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; min-width: 0;
  background: var(--gl-fill); box-shadow: var(--gl-edge), 0 18px 40px -26px rgba(0, 0, 0, .8); transition: transform .18s ease; }
.gh-card:hover { transform: translateY(-4px); color: #fff; }
.gh-card-img { position: relative; display: block; height: 132px; background: #14141f center / cover no-repeat; }
.gh-card-img .op-grade { position: absolute; right: 12px; bottom: -16px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; font-size: 1.1rem;
  background: rgba(20, 20, 30, .8); box-shadow: var(--gl-edge); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.gh-tag { position: absolute; left: 12px; top: 12px; padding: .25rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 700; background: rgba(20, 20, 30, .62); box-shadow: var(--gl-edge); }
.gh-card-body { display: flex; flex-direction: column; gap: .2rem; padding: .95rem 1.1rem 1.05rem; min-width: 0; }
.gh-card-body strong { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 2.6rem; }
.gh-card-map .gh-card-body strong { padding-right: 0; }
.gh-card-body small { font-size: .82rem; color: rgba(245, 245, 247, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gh-card-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .55rem; }
.gh-card-who { display: inline-flex; align-items: center; gap: .45rem; min-width: 0; font-weight: 600; font-size: .9rem; }
.gh-card-who img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.gh-card-foot b { font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.gh-card-foot b small { font-size: .75rem; margin-left: 1px; }
.gh-card-meta { font-size: .78rem; color: rgba(245, 245, 247, .55); margin-top: .25rem; }

/* people + news */
.gh-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; margin-top: 3.6rem; }
.gh-gap { margin-top: 1.4rem; }
.gh-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 1rem .5rem; margin-top: .7rem; }
.gh-people a { display: flex; flex-direction: column; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; min-width: 0; }
.gh-people img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; }
.gh-people span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gh-seen { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.gh-seen img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.gh-seen a.on img { box-shadow: 0 0 0 2px #34d27b; }
.gh-news { display: flex; align-items: flex-start; gap: .85rem; padding: .7rem .6rem; margin: 0 -.6rem; border-radius: 16px; }
.gh-news:hover { background: rgba(255, 255, 255, .1); }
.gh-news > i { flex: 0 0 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, .12); color: var(--nc, #fff); }
.gh-news span { display: flex; flex-direction: column; min-width: 0; }
.gh-news small { font-size: .74rem; color: rgba(245, 245, 247, .55); }
.gh-news strong { font-weight: 600; font-size: .95rem; line-height: 1.35; }

/* explore pills + closing band */
.gh-explore { display: flex; flex-wrap: wrap; gap: .6rem; }
.gh-explore a { display: inline-flex; align-items: center; gap: .55rem; padding: .62rem 1.1rem; border-radius: 999px; font-weight: 600; font-size: .93rem;
  background: var(--gl-fill); box-shadow: var(--gl-edge); transition: transform .16s ease, background .16s ease; }
.gh-explore a:hover { transform: translateY(-2px); background: var(--gl-fill-strong); color: #fff; }
.gh-explore i { opacity: .75; font-size: .85rem; }
.gh-end { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.6rem; margin-top: 3.6rem; padding: 2.6rem 2.8rem; border-radius: 36px;
  background: var(--gl-fill); box-shadow: var(--gl-edge), var(--gl-shadow); }
.gh-end h2 { font-size: 2rem !important; font-weight: 800 !important; letter-spacing: -.035em !important; margin: 0 0 .3rem !important; }
.gh-end p { margin: 0; color: rgba(245, 245, 247, .68); }
.gh-end .gh-cta { margin-top: 0; justify-content: flex-start; }

@media (max-width: 1399.98px) { .gh-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gh-day { grid-column: span 3; grid-row: span 1; min-height: 380px; } }
@media (max-width: 991.98px) { .gh-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gh-day { grid-column: span 2; } .gh-two { grid-template-columns: minmax(0, 1fr); } .gh-hero { padding: 3.6rem 1rem 3rem; } }
@media (max-width: 575.98px) {
  .gh-bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; } .gh-day { grid-column: auto; min-height: 320px; } .gh-ranked, .gh-top { grid-row: auto; }
  .gh-tile { padding: 1.25rem 1.2rem; } .gh-big b { font-size: 2.8rem; } .gh-card { flex-basis: 250px; } .gh-row { margin-top: 2.6rem; } .gh-row-head h2 { font-size: 1.5rem !important; }
  .gh-end { padding: 1.8rem 1.4rem; } .gh-lead { font-size: 1.05rem; } .gh-btn { padding: .68rem 1.15rem; font-size: .93rem; }
}
html[data-op-lite] .gh-tile, html[data-op-lite] .gh-btn, html[data-op-lite] .gh-pill, html[data-op-lite] .gh-clock { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* the supporter tile is a slim band over the whole width (no hole in the grid); the clan war lines sit at the bottom of their tile */
.gh-supp { grid-column: 1 / -1; min-height: 0; justify-content: space-between; padding: 1.2rem 1.8rem; flex-direction: row; align-items: center; flex-wrap: wrap; gap: .4rem 1.4rem; grid-row: auto; }
.gh-supp .gh-tile-title { margin-top: 0; font-size: 1.2rem; }
.gh-bento { grid-auto-flow: row dense; }
.gh-kicker + .gh-warline { margin-top: auto; }

/* settings menu: the system font is wider than the old one, keep the little labels inside their buttons */
html[data-op-glass] .op-lang-opt { font-size: .68rem !important; letter-spacing: -.01em; }
html[data-op-glass] .op-design-opt { font-size: .82rem !important; }
html[data-op-glass] .op-design-opt small { font-size: .64rem !important; }
.gh-title { margin-bottom: .9rem !important; }

/* =====================================================================================================================
   qw26_59.0.1 (owner: pill + numbers out of the hero, the p of the logo ran into the text, "richtig geile liquid glass
   Animation, auch beim Logo und vor allem wenn man die Seite oeffnet", new click effect on the button itself)
   ===================================================================================================================== */
.gh-svg { position: absolute; }
.gh-hero { padding-top: 4.6rem; }
/* the logo keeps its full height here: no negative margin, so the p of "Pompa" never touches the text below */
.gh-title { margin: 0 0 1.6rem !important; }
.gh-title .op-rainbow-logo { margin-bottom: 0 !important; padding-bottom: .36em !important; }

/* logo: a streak of light runs over the colours like over wet glass (both designs with the rainbow logo keep their colours) */
html[data-op-glass] .op-rainbow-logo {
  background-image: linear-gradient(105deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, 0) 58%),
                    linear-gradient(90deg, #d9d9e3 0%, #ffffff 22%, #ff6fd0 34%, #b77cff 55%, #6cb8ff 78%, #7cf0c8);
  /* Kuroosu (owner 18.10., logo variant B): the K silver-white, then the rainbow - the colours stay in place, only the light streak runs */
  background-size: 300% 100%, 100% 100%; background-repeat: no-repeat, no-repeat;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .3)) drop-shadow(0 10px 26px rgba(150, 120, 255, .35));
  animation: opu-logo-glass 7s linear infinite;
}
@keyframes opu-logo-glass {
  0% { background-position: 160% 0, 0 0; }
  38% { background-position: -60% 0, 76% 0; }
  100% { background-position: -60% 0, 200% 0; }
}
/* home: the big logo pours in like liquid, then floats a little */
html[data-op-glass]:not([data-op-lite]) .gh-title .op-rainbow-logo {
  animation: opu-logo-glass 7s linear infinite, opu-logo-pour 1.7s linear 1, opu-logo-float 7s ease-in-out 1.7s infinite;
}
@keyframes opu-logo-pour {
  0%, 99.9% { filter: url(#gh-liquid) drop-shadow(0 10px 26px rgba(150, 120, 255, .35)); }
  100% { filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .3)) drop-shadow(0 10px 26px rgba(150, 120, 255, .35)); }
}
@keyframes opu-logo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* opening a page: everything comes out of the blur, one after the other */
@keyframes opu-glass-in {
  from { opacity: 0; transform: translateY(26px) scale(.955); filter: blur(16px) saturate(1.7) brightness(1.25); }
  60% { opacity: 1; }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes opu-glass-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
html[data-op-glass]:not([data-op-lite]) .gh-hero > :not(.gh-svg), html[data-op-glass]:not([data-op-lite]) .gh-bento > .gh-tile,
html[data-op-glass]:not([data-op-lite]) .gh-row, html[data-op-glass]:not([data-op-lite]) .gh-two > *, html[data-op-glass]:not([data-op-lite]) .gh-end {
  animation: opu-glass-in .85s cubic-bezier(.2, .8, .2, 1) backwards;
}
html[data-op-glass]:not([data-op-lite]) .gh-hero > .gh-title { animation-duration: 1.1s; }
html[data-op-glass]:not([data-op-lite]) .gh-hero > .gh-lead { animation-delay: .18s; }
html[data-op-glass]:not([data-op-lite]) .gh-hero > .gh-cta { animation-delay: .3s; }
html[data-op-glass]:not([data-op-lite]) .gh-bento > .gh-tile:nth-child(1) { animation-delay: .38s; }
html[data-op-glass]:not([data-op-lite]) .gh-bento > .gh-tile:nth-child(2) { animation-delay: .46s; }
html[data-op-glass]:not([data-op-lite]) .gh-bento > .gh-tile:nth-child(3) { animation-delay: .54s; }
html[data-op-glass]:not([data-op-lite]) .gh-bento > .gh-tile:nth-child(4) { animation-delay: .62s; }
html[data-op-glass]:not([data-op-lite]) .gh-bento > .gh-tile:nth-child(5) { animation-delay: .7s; }
html[data-op-glass]:not([data-op-lite]) .gh-bento > .gh-tile:nth-child(6) { animation-delay: .78s; }
html[data-op-glass]:not([data-op-lite]) .gh-bento > .gh-tile:nth-child(7) { animation-delay: .86s; }
html[data-op-glass]:not([data-op-lite]) .gh-bento > .gh-tile:nth-child(n+8) { animation-delay: .94s; }
html[data-op-glass]:not([data-op-lite]) .gh-row, html[data-op-glass]:not([data-op-lite]) .gh-two > *, html[data-op-glass]:not([data-op-lite]) .gh-end { animation-delay: .9s; }
/* the other pages: their big parts rise in softly (no blur there: some hold fixed layers) */
html[data-op-glass]:not([data-op-lite]) .op-page-head, html[data-op-glass]:not([data-op-lite]) .op-lbx-side, html[data-op-glass]:not([data-op-lite]) .op-lbx-table,
html[data-op-glass]:not([data-op-lite]) .op-pf-header, html[data-op-glass]:not([data-op-lite]) .op-auth {
  animation: opu-glass-rise .6s cubic-bezier(.2, .8, .2, 1) backwards;
}
html[data-op-glass]:not([data-op-lite]) .op-lbx-table { animation-delay: .1s; }
@media (prefers-reduced-motion: reduce) {
  html[data-op-glass] .gh *, html[data-op-glass] .op-page-head, html[data-op-glass] .op-lbx-side, html[data-op-glass] .op-lbx-table,
  html[data-op-glass] .op-pf-header, html[data-op-glass] .op-auth, html[data-op-glass] .op-rainbow-logo { animation: none !important; }
}

/* =====================================================================================================================
   qw26_59.0.2 (owner, screenshot of the menu: "mach diese bunten Logos viel anders, dass sie zum Liquid-Glass-Design passen,
   und auch Settings, alles halt"): menu icons are little panes of tinted glass with a white sign instead of the coloured
   hit circles; the settings menu is built from the same glass (pills, cards, switches like on a phone).
   ===================================================================================================================== */
html[data-op-glass] .op-nav .dropdown-item > i[class*="fa-"] {
  width: 30px; height: 30px; line-height: 30px; border-radius: 10px; font-size: .78rem; margin-right: .7rem; text-shadow: none; color: #fff !important;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .1) 46%, rgba(255, 255, 255, .04) 100%),
    color-mix(in srgb, var(--ic) 30%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 0 0 1px rgba(255, 255, 255, .12), 0 6px 14px -8px rgba(0, 0, 0, .7) !important;
  transition: transform .25s cubic-bezier(.3, 1.5, .5, 1), background .2s;
}
html[data-op-glass] .op-nav .dropdown-item > i[class*="fa-"]::after { display: none !important; }
html[data-op-glass] .op-nav .dropdown-item:hover > i[class*="fa-"] {
  transform: scale(1.08);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .16) 46%, rgba(255, 255, 255, .08) 100%),
    color-mix(in srgb, var(--ic) 46%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 0 0 1px rgba(255, 255, 255, .18), 0 8px 18px -8px color-mix(in srgb, var(--ic) 70%, transparent) !important;
}
html[data-op-glass] .op-nav .dropdown-item { display: flex !important; align-items: center; padding: .42rem .6rem !important; font-weight: 500 !important; font-size: .93rem; }
html[data-op-glass] .op-nav .dropdown-menu { padding: .45rem !important; }
html[data-op-glass] .op-nav .dropdown-divider { border-color: rgba(255, 255, 255, .1) !important; margin: .35rem .4rem !important; opacity: 1; }
html[data-op-glass] .op-nav .dropdown-header { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(245, 245, 247, .5) !important; }

/* settings button + bell + chat + search: the same round glass */
html[data-op-glass] .op-theme-btn, html[data-op-glass] .op-bell-btn, html[data-op-glass] .op-nav-search .fable-search-input {
  background: var(--gl-fill-strong) !important; box-shadow: var(--gl-edge) !important; color: #f5f5f7 !important;
}
html[data-op-glass] .op-theme-btn:hover, html[data-op-glass] .op-bell-btn:hover { background: linear-gradient(160deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .16)) !important; }
html[data-op-glass] .op-theme-btn i, html[data-op-glass] .op-bell-btn i, html[data-op-glass] .op-nav-search > i, html[data-op-glass] .op-theme-head i { color: #f5f5f7 !important; }

/* settings menu */
html[data-op-glass] .op-theme-menu { width: 330px; max-width: calc(100vw - 24px); padding: .9rem !important; border-radius: 26px !important; }
html[data-op-glass] .op-theme-head { font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; padding: .1rem .2rem .7rem; margin-bottom: .2rem; background: none; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .1); }
html[data-op-glass] .op-theme-title { font-size: .66rem; font-weight: 700; letter-spacing: .12em; color: rgba(245, 245, 247, .5) !important; padding: .8rem .2rem .45rem; }
html[data-op-glass] .op-lang-pick { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: .4rem; margin-bottom: 0; }
html[data-op-glass] .op-lang-opt, html[data-op-glass] .op-design-opt {
  background: linear-gradient(160deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04)) !important; color: rgba(245, 245, 247, .85) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .06) !important; border-radius: 14px !important;
  font-weight: 600 !important; transition: transform .2s cubic-bezier(.3, 1.5, .5, 1), background .2s;
}
html[data-op-glass] .op-lang-opt { padding: .5rem .2rem !important; gap: .3rem; }
html[data-op-glass] .op-lang-opt img { width: 26px; height: 18px; border-radius: 5px; box-shadow: 0 2px 6px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .2); }
html[data-op-glass] .op-lang-opt:hover, html[data-op-glass] .op-design-opt:hover { transform: translateY(-2px); background: linear-gradient(160deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .09)) !important; }
html[data-op-glass] .op-lang-opt.active, html[data-op-glass] .op-design-opt.active {
  background: linear-gradient(160deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .18)) !important; color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 0 0 1px rgba(255, 255, 255, .35), 0 10px 22px -12px rgba(255, 255, 255, .5) !important;
}
html[data-op-glass] .op-design-pick { gap: .45rem; margin-bottom: 0; }
html[data-op-glass] .op-design-opt { padding: .55rem .45rem .6rem !important; }
html[data-op-glass] .op-design-sw { height: 38px; border-radius: 10px; }
html[data-op-glass] .op-design-sw-celestial, html[data-op-glass] .op-design-sw-classic { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(255, 255, 255, .16) !important; }
/* colour themes: a row of round glass drops instead of a list */
html[data-op-glass] .op-theme-menu { display: none; }
html[data-op-glass] .op-theme-menu.show { display: flex; flex-wrap: wrap; align-content: flex-start; column-gap: .4rem; }
html[data-op-glass] .op-theme-menu > * { flex: 0 0 100%; }
html[data-op-glass] .op-theme-menu > .op-theme-opt {
  flex: 1 1 0; min-width: 0; flex-direction: column; gap: .3rem; padding: .5rem .1rem !important; border-radius: 14px !important; font-size: .66rem; font-weight: 600;
  text-align: center; color: rgba(245, 245, 247, .8) !important; background: transparent !important;
}
html[data-op-glass] .op-theme-menu > .op-theme-opt span {
  width: 26px; height: 26px; box-shadow: inset 0 2px 3px rgba(255, 255, 255, .65), inset 0 -3px 5px rgba(0, 0, 0, .25), 0 4px 10px -4px rgba(0, 0, 0, .7) !important;
}
html[data-op-glass] .op-theme-menu > .op-theme-opt:hover { background: rgba(255, 255, 255, .1) !important; }
html[data-op-glass] .op-theme-menu > .op-theme-opt.active { background: rgba(255, 255, 255, .2) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4) !important; }
html[data-op-glass] .op-theme-menu > .op-theme-opt.active span { box-shadow: 0 0 0 2px #fff, inset 0 2px 3px rgba(255, 255, 255, .65) !important; }
html[data-op-glass] .op-theme-menu > .op-theme-opt:disabled::after { position: absolute; margin: 0; top: 6px; right: 6px; font-size: .55rem; color: rgba(255, 255, 255, .7); }
html[data-op-glass] .op-theme-menu > .op-theme-opt:disabled { position: relative; }
html[data-op-glass] .op-theme-lock {
  margin: .5rem 0 0 !important; padding: .55rem .7rem !important; border-radius: 14px !important; color: #f5f5f7 !important; font-weight: 600 !important;
  background: linear-gradient(160deg, rgba(255, 111, 174, .32), rgba(255, 111, 174, .12)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3) !important;
}
/* switches */
html[data-op-glass] .op-theme-lite {
  margin: .45rem 0 0 !important; padding: .65rem .75rem !important; border-radius: 16px; gap: .8rem; flex-direction: row-reverse; justify-content: space-between;
  background: linear-gradient(160deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .04)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1px rgba(255, 255, 255, .05);
  font-weight: 600 !important; font-size: .88rem !important;
}
html[data-op-glass] .op-theme-lite small { font-weight: 400 !important; color: rgba(245, 245, 247, .55) !important; margin-top: .1rem; line-height: 1.3; }
html[data-op-glass] .op-theme-lite input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; flex: 0 0 46px; width: 46px; height: 28px; margin: 0; border-radius: 999px; cursor: pointer; position: relative;
  background: rgba(255, 255, 255, .16); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .1); transition: background .25s;
}
html[data-op-glass] .op-theme-lite input[type="checkbox"]::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(180deg, #fff, #dcdce6); box-shadow: 0 2px 6px rgba(0, 0, 0, .45), inset 0 1px 0 #fff;
  transition: transform .28s cubic-bezier(.3, 1.5, .5, 1);
}
html[data-op-glass] .op-theme-lite input[type="checkbox"]:checked { background: linear-gradient(135deg, #ff7ad9, #9d7bff); }
html[data-op-glass] .op-theme-lite input[type="checkbox"]:checked::after { transform: translateX(18px); }
/* menus open with a small pop instead of the old fade: fading a pane that blurs what is behind it left it half see-through */
html[data-op-glass][data-bs-theme] .dropdown-menu.show { animation: opu-glass-pop .26s cubic-bezier(.3, 1.4, .5, 1) !important; transform-origin: top center; }
@keyframes opu-glass-pop { from { scale: .94; translate: 0 -6px; } to { scale: 1; translate: 0 0; } }
/* menus that hang from the menu bar cannot blur the page (the bar itself already blurs, Chromium stops there): make them denser instead */
html[data-op-glass][data-bs-theme] .op-nav .dropdown-menu {
  background: linear-gradient(170deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .07) 55%, rgba(255, 255, 255, .11)), rgba(24, 22, 40, .93) !important;
}

/* =====================================================================================================================
   qw26_59.0.3 (owner: "mach das Liquid Glass mehr wie Apples Liquid Glass"): the panes are clearer in the middle and
   bright at the rim like a lens - light catches the top left edge, a softer line the bottom right, a glow sits inside the
   lower edge. Less milk, more of the colours behind (less blur, more saturation and a little brightness).
   ===================================================================================================================== */
html[data-op-glass], html[data-op-glass][data-bs-theme][data-bs-core] {
  --gl-fill: linear-gradient(135deg, rgba(255, 255, 255, .15) 0%, rgba(255, 255, 255, .045) 32%, rgba(255, 255, 255, .02) 58%, rgba(255, 255, 255, .1) 100%);
  --gl-fill-strong: linear-gradient(135deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .1) 38%, rgba(255, 255, 255, .07) 62%, rgba(255, 255, 255, .2) 100%);
  --gl-edge:
    inset 0 1.5px 0 rgba(255, 255, 255, .78), inset 1.5px 0 0 rgba(255, 255, 255, .32),
    inset 0 -1px 0 rgba(255, 255, 255, .22), inset -1px 0 0 rgba(255, 255, 255, .1),
    inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 0 26px rgba(255, 255, 255, .055),
    inset 0 -18px 26px -22px rgba(255, 255, 255, .38);
  --gl-shadow: 0 1px 0 rgba(0, 0, 0, .18), 0 28px 60px -32px rgba(0, 0, 0, .75);
  --gl-radius: 32px;
  --gl-blur: blur(18px) saturate(210%) brightness(1.1);
}
html[data-op-glass] .op-nav, html[data-op-glass] .op-nav.op-nav-scrolled {
  background: linear-gradient(135deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .05) 40%, rgba(255, 255, 255, .03) 60%, rgba(255, 255, 255, .13) 100%), rgba(14, 14, 24, .3) !important;
  -webkit-backdrop-filter: blur(22px) saturate(210%) brightness(1.08) !important; backdrop-filter: blur(22px) saturate(210%) brightness(1.08) !important;
  box-shadow: var(--gl-edge), 0 20px 46px -26px rgba(0, 0, 0, .8) !important;
}
html[data-op-glass][data-op-lite] .op-nav { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(20, 20, 30, .94) !important; }
/* buttons and pills are small lenses too */
html[data-op-glass] .gh-btn:not(.gh-btn-main), html[data-op-glass] .gh-explore a, html[data-op-glass] .gh-pill, html[data-op-glass] .gh-clock {
  -webkit-backdrop-filter: blur(14px) saturate(200%) brightness(1.12); backdrop-filter: blur(14px) saturate(200%) brightness(1.12);
}
html[data-op-glass] .gh-btn-main, html[data-op-glass] .btn-primary, html[data-op-glass] .op-btn-main {
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(232, 232, 245, .9)) !important;
  box-shadow: inset 0 1.5px 0 #fff, inset 0 -8px 12px -8px rgba(120, 110, 200, .35), 0 14px 34px -14px rgba(255, 255, 255, .55) !important;
}
html[data-op-glass] .gh-card { box-shadow: var(--gl-edge), 0 20px 44px -28px rgba(0, 0, 0, .85); }
html[data-op-glass] .op-lbx-row:not(.op-lbx-head):not(.op-lbx-me) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
/* the supporter band is a slim line, not a full-height tile */
.gh-bento { grid-auto-rows: auto; }
.gh-bento > .gh-tile:not(.gh-supp) { min-height: 210px; }
.gh-bento > .gh-day { min-height: 460px; }
.gh-supp { min-height: 0 !important; }

/* =====================================================================================================================
   qw26_59.0.4 (owner: "mach alles Liquid-Glass-Design: die Profilbilder, die Chats, Profil, Settings, wirklich alles,
   Chat und Friends-Tab sollen ein neues Redesign bekommen")
   ===================================================================================================================== */
/* ---------- avatars: a rim of glass instead of the lilac ring (frames and the top-10 ring from names.css stay, they are outlines) ---------- */
html[data-op-glass] .op-player .op-avatar, html[data-op-glass] .op-lb-avatar, html[data-op-glass] .op-stage-avatar, html[data-op-glass] .op-member .op-avatar,
html[data-op-glass] .op-home-rnk-row img, html[data-op-glass] .op-daily-av, html[data-op-glass] .op-act-seen img, html[data-op-glass] .op-rnk-row .op-daily-av,
html[data-op-glass] .op-lbx-av, html[data-op-glass] .gh-av, html[data-op-glass] .gh-people img, html[data-op-glass] .gh-seen img, html[data-op-glass] .gh-card-who img,
html[data-op-glass] .op-chat-item img, html[data-op-glass] .op-chat-friend img, html[data-op-glass] .op-chat-head img, html[data-op-glass] .op-fr-av,
html[data-op-glass] .op-nav-user img, html[data-op-glass] .op-team-card img, html[data-op-glass] .op-hc img.op-hc-av {
  border-radius: 50% !important; padding: 2.5px !important; border: 0 !important; object-fit: cover; box-sizing: border-box;
  background: linear-gradient(135deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .22) 38%, rgba(255, 255, 255, .1) 62%, rgba(255, 255, 255, .6) 100%) !important;
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(255, 255, 255, .12);
}
html[data-op-glass] .op-pf:not(.op-pf-custom) .op-pf-avatar {
  border: 0 !important; padding: 4px; box-sizing: border-box; border-radius: 34px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .25) 38%, rgba(255, 255, 255, .1) 62%, rgba(255, 255, 255, .65) 100%) !important;
  box-shadow: 0 22px 46px -18px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .15) !important;
}

/* ---------- profile ---------- */
html[data-op-glass] .op-pf:not(.op-pf-custom) .op-pf-header {
  background: var(--gl-fill) !important; box-shadow: var(--gl-edge), var(--gl-shadow) !important; border-radius: 36px !important;
}
html[data-op-glass]:not([data-op-lite]) .op-pf:not(.op-pf-custom) .op-pf-header { -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); }
html[data-op-glass] .op-pf-tag, html[data-op-glass] .op-pf-follow, html[data-op-glass] .op-pf-chip, html[data-op-glass] .op-pf-views, html[data-op-glass] .op-pf-report, html[data-op-glass] .op-pf-warn {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(255, 255, 255, .07);
}
html[data-op-glass] .op-pf:not(.op-pf-custom) .op-sc { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .05); border-radius: 20px !important; }
html[data-op-glass] .op-pfa-main > *, html[data-op-glass] .op-pf-stat { border-radius: 20px; }

/* ---------- settings ---------- */
html[data-op-glass] .op-set-hero, html[data-op-glass] .op-set-nav {
  background: var(--gl-fill) !important; box-shadow: var(--gl-edge), var(--gl-shadow) !important; border-radius: 30px !important;
}
html[data-op-glass]:not([data-op-lite]) .op-set-nav { -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); }
html[data-op-glass] .op-set-nav { padding: .7rem !important; gap: .25rem !important; }
html[data-op-glass] .op-set-nav a { border-radius: 18px !important; color: rgba(245, 245, 247, .75) !important; font-weight: 600 !important; }
html[data-op-glass] .op-set-nav a i {
  border-radius: 12px !important; color: #fff !important;
  background: linear-gradient(160deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .06)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(255, 255, 255, .1);
}
html[data-op-glass] .op-set-nav a:hover { background: rgba(255, 255, 255, .1) !important; color: #fff !important; }
html[data-op-glass] .op-set-nav a.active { background: var(--gl-fill-strong) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(255, 255, 255, .12) !important; }
html[data-op-glass] .op-set-nav a.active i { background: #f5f5f7 !important; color: #0b0b10 !important; }
html[data-op-glass] .op-set-card { padding: 1.6rem 1.7rem !important; }
html[data-op-glass] .op-set-card-head > i {
  border-radius: 14px !important; color: #fff !important; background: linear-gradient(160deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .06)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(255, 255, 255, .1);
}
html[data-op-glass] .op-drop { border-radius: 22px !important; background: rgba(255, 255, 255, .06) !important; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .16) !important; }
html[data-op-glass] .op-drop:hover, html[data-op-glass] .op-drop.over { background: rgba(255, 255, 255, .12) !important; }
html[data-op-glass] .op-check input[type="checkbox"], html[data-op-glass] .form-check-input[type="checkbox"].form-switch { accent-color: #9d7bff; }

/* ---------- chat: two panes of glass, bubbles like in Messages ---------- */
html[data-op-glass] .op-chat { padding-top: 1.2rem; }
html[data-op-glass] .op-chat-grid { grid-template-columns: 340px minmax(0, 1fr) !important; gap: 1.2rem !important; height: min(78vh, 820px) !important; }
html[data-op-glass] .op-chat-side, html[data-op-glass] .op-chat-main {
  background: var(--gl-fill) !important; box-shadow: var(--gl-edge), var(--gl-shadow) !important; border-radius: 32px !important;
}
html[data-op-glass]:not([data-op-lite]) .op-chat-side, html[data-op-glass]:not([data-op-lite]) .op-chat-main { -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); }
html[data-op-glass] .op-chat-side { padding: 1.1rem .9rem !important; scrollbar-width: thin; }
html[data-op-glass] .op-chat-side-head { font-size: .68rem !important; font-weight: 700 !important; letter-spacing: .12em; text-transform: uppercase; color: rgba(245, 245, 247, .5) !important; padding: .2rem .5rem .5rem; }
html[data-op-glass] .op-chat-side-head i { opacity: .7; }
html[data-op-glass] .op-chat-item { border-radius: 18px !important; padding: .6rem .65rem !important; gap: .75rem !important; }
html[data-op-glass] .op-chat-item:hover { background: rgba(255, 255, 255, .1) !important; }
html[data-op-glass] .op-chat-item.active { background: var(--gl-fill-strong) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(255, 255, 255, .12) !important; }
html[data-op-glass] .op-chat-item img, html[data-op-glass] .op-chat-friend img { width: 44px !important; height: 44px !important; }
html[data-op-glass] .op-chat-item-txt strong { font-weight: 600 !important; font-size: .95rem !important; }
html[data-op-glass] .op-chat-unread { background: #f5f5f7 !important; color: #0b0b10 !important; border-radius: 999px; font-weight: 700; }
html[data-op-glass] .op-chat-friends { gap: .6rem !important; }
html[data-op-glass] .op-chat-notify, html[data-op-glass] .op-chat-nset, html[data-op-glass] .op-chat-newgroup {
  border-radius: 999px !important; background: var(--gl-fill-strong) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(255, 255, 255, .08) !important; color: #f5f5f7 !important;
}
html[data-op-glass] .op-chat-head { padding: 1rem 1.3rem !important; background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02)); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .1); }
html[data-op-glass] .op-chat-head img { width: 46px !important; height: 46px !important; }
html[data-op-glass] .op-chat-head a, html[data-op-glass] .op-chat-gname span { font-weight: 700 !important; letter-spacing: -.02em; }
html[data-op-glass] .op-chat-callbtn { border-radius: 999px !important; background: var(--gl-fill-strong) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 0 0 1px rgba(255, 255, 255, .1) !important; color: #fff !important; }
html[data-op-glass] .op-chat-callbtn.in-call { background: linear-gradient(180deg, #ff6b78, #e03a4c) !important; }
html[data-op-glass] .op-chat-msgs { padding: 1.3rem 1.4rem !important; gap: .5rem !important; }
html[data-op-glass] .op-chat-bubble {
  padding: .62rem 1rem !important; border-radius: 22px 22px 22px 8px !important; font-size: .97rem; line-height: 1.4; color: #f5f5f7 !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .08)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(255, 255, 255, .07), 0 8px 18px -12px rgba(0, 0, 0, .7);
}
html[data-op-glass] .op-chat-msg.mine .op-chat-bubble {
  border-radius: 22px 22px 8px 22px !important; color: #fff !important; font-weight: 500 !important;
  background: linear-gradient(135deg, #ff7ad9 0%, #9d7bff 55%, #6f8dff 100%) !important;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .55), inset 0 -10px 14px -10px rgba(40, 20, 120, .45), 0 10px 22px -12px rgba(140, 110, 255, .8);
}
html[data-op-glass] .op-chat-bubble.is-photo, html[data-op-glass] .op-chat-bubble.is-sticker { background: none !important; box-shadow: none !important; padding: 0 !important; }
html[data-op-glass] .op-chat-bubble.is-photo img { border-radius: 22px; box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .1); }
html[data-op-glass] .op-chat-sys { color: rgba(245, 245, 247, .5) !important; }
html[data-op-glass] .op-chat-form {
  margin: 0 1rem 1rem !important; padding: .45rem .5rem !important; gap: .25rem !important; border-radius: 999px; border: 0 !important;
  background: var(--gl-fill-strong) !important; box-shadow: var(--gl-edge), 0 14px 30px -18px rgba(0, 0, 0, .8) !important;
}
html[data-op-glass] .op-chat-form input[type="text"] { background: transparent !important; border: 0 !important; box-shadow: none !important; color: #fff !important; padding: 0 .6rem !important; font-size: 1rem; }
html[data-op-glass] .op-chat-form input[type="text"]::placeholder { color: rgba(245, 245, 247, .5); }
html[data-op-glass] .op-chat-tool { color: rgba(245, 245, 247, .8) !important; }
html[data-op-glass] .op-chat-tool:hover { background: rgba(255, 255, 255, .16) !important; color: #fff !important; }
html[data-op-glass] .op-chat-form .op-btn-main { width: 42px; height: 42px; padding: 0 !important; display: grid; place-items: center; border-radius: 50% !important; flex: 0 0 auto; }
html[data-op-glass] .op-chat-emojis, html[data-op-glass] .op-chat-stickers, html[data-op-glass] .op-chat-preview, html[data-op-glass] .op-react-pick {
  background: linear-gradient(170deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .07)), rgba(24, 22, 40, .92) !important;
  box-shadow: var(--gl-edge), 0 26px 60px -22px rgba(0, 0, 0, .9) !important; border-radius: 24px !important;
}
html[data-op-glass] .op-chat-welcome > i { opacity: .55; }
html[data-op-glass] .op-gmodal-box {
  background: linear-gradient(170deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .07)), rgba(24, 22, 40, .9) !important;
  box-shadow: var(--gl-edge), 0 40px 90px -30px rgba(0, 0, 0, .95) !important; border-radius: 32px !important;
}
html[data-op-glass] .op-call, html[data-op-glass] .op-callmodal-box {
  background: linear-gradient(170deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08)), rgba(24, 22, 40, .88) !important; box-shadow: var(--gl-edge), 0 30px 70px -24px rgba(0, 0, 0, .95) !important;
}
@media (max-width: 991.98px) { html[data-op-glass] .op-chat-grid { grid-template-columns: minmax(0, 1fr) !important; height: auto !important; } }
/* friends page in glass */
html[data-op-glass] .op-fr-card { background: var(--gl-fill) !important; box-shadow: var(--gl-edge), var(--gl-shadow); border-radius: 28px; }
html[data-op-glass]:not([data-op-lite]) .op-fr-card { -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); }
html[data-op-glass] .op-fr-filter { background: var(--gl-fill-strong); box-shadow: var(--gl-edge); }
html[data-op-glass] .op-fr-filter button.active { background: #f5f5f7; color: #0b0b10; }
html[data-op-glass] .op-fr-btn:not(.op-fr-btn-main) { background: var(--gl-fill-strong); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(255, 255, 255, .08); }
html[data-op-glass] .op-fr-empty { background: var(--gl-fill); box-shadow: var(--gl-edge), var(--gl-shadow); }
html[data-op-glass] .op-fr-head h1 { letter-spacing: -.035em; }
html[data-op-glass] .op-chat-nset, html[data-op-glass] .op-chat-notify { padding: .55rem .9rem !important; margin-bottom: .7rem; font-weight: 600; font-size: .85rem; display: flex; align-items: center; gap: .5rem; text-decoration: none; }

/* =====================================================================================================================
   qw26_59.0.5 (owner: "es ist immer noch alles so lila, mach das weg, vor allem bei den Profilen, und manche Icons sollen
   besser passen"): Glass is neutral now - white and silver instead of lilac and pink as the accent, graphite instead of
   night-lilac for the dark fills, a wallpaper in blue, teal and a warm light. Colours that mean something stay: the rainbow
   logo, grade letters, rank emblems, flags, and everything a player picked (name, profile colour, frames, supporter themes -
   that is why the accent is only set while no colour theme is active).
   ===================================================================================================================== */
html[data-op-glass]:not([data-op-theme]), html[data-op-glass][data-bs-theme][data-bs-core]:not([data-op-theme]) {
  --op-yellow: #f5f5f7; --op-yellow-rgb: 245, 245, 247; --op-light: #ffffff; --op-light-rgb: 255, 255, 255; --op-gold: #f5f5f7;
  --op-orange: #d9d9e3; --op-orange-rgb: 217, 217, 227;
  --op-metal-hi: #ffffff; --op-metal-mid: #d9dbe6; --op-metal-lo: #9a9cab;
  --op-accent: linear-gradient(180deg, rgba(255, 255, 255, .36), rgba(255, 255, 255, .18)); --op-ink: #0b0b10; --op-ring: 255, 255, 255; --op-pink: #f5f5f7;
}
html[data-op-glass], html[data-op-glass][data-bs-theme][data-bs-core] {
  --op-night: #0a0a0f; --op-night-2: #121218; --op-night-3: #1a1a22; --op-bg: #0a0a0f; --op-card: rgba(22, 22, 30, .6);
  --op-text: #f5f5f7; --op-muted: #a1a1ad; --op-glass: rgba(255, 255, 255, .05); --op-border: rgba(255, 255, 255, .14);
  --op-dk-10-9-4: 7, 7, 10; --op-dk-10-9-5: 7, 7, 10; --op-dk-11-9-6: 7, 7, 10; --op-dk-12-10-5: 8, 8, 11; --op-dk-12-11-7: 8, 8, 11; --op-dk-13-11-5: 9, 9, 12; --op-dk-13-11-6: 9, 9, 12; --op-dk-14-12-7: 9, 9, 12; --op-dk-14-13-8: 9, 9, 12; --op-dk-15-13-7: 10, 10, 13; --op-dk-16-14-7: 11, 11, 14; --op-dk-16-15-8: 11, 11, 14; --op-dk-17-14-8: 12, 12, 15; --op-dk-18-15-8: 12, 12, 15; --op-dk-18-15-9: 12, 12, 15; --op-dk-18-16-9: 12, 12, 15; --op-dk-18-17-10: 12, 12, 15; --op-dk-18-17-9: 12, 12, 15; --op-dk-19-15-9: 13, 13, 16; --op-dk-19-16-10: 13, 13, 16; --op-dk-20-15-5: 14, 14, 17; --op-dk-20-16-6: 14, 14, 17; --op-dk-20-17-10: 14, 14, 17; --op-dk-20-17-9: 14, 14, 17; --op-dk-20-18-10: 14, 14, 17; --op-dk-20-18-11: 14, 14, 17; --op-dk-20-18-9: 14, 14, 17; --op-dk-21-17-10: 14, 14, 17; --op-dk-21-18-10: 14, 14, 17; --op-dk-21-18-11: 14, 14, 17; --op-dk-22-19-10: 15, 15, 18; --op-dk-22-19-11: 15, 15, 18; --op-dk-22-20-12: 15, 15, 18; --op-dk-23-20-11: 15, 15, 18; --op-dk-23-21-11: 15, 15, 18; --op-dk-24-20-12: 17, 17, 20; --op-dk-24-22-11: 17, 17, 20; --op-dk-26-14-14: 18, 18, 21; --op-dk-27-20-10: 18, 18, 21; --op-dk-27-20-5: 18, 18, 21; --op-dk-27-20-6: 18, 18, 21; --op-dk-27-23-12: 18, 18, 21; --op-dk-27-23-14: 18, 18, 21; --op-dk-28-24-16: 19, 19, 22; --op-dk-28-25-13: 19, 19, 22; --op-dk-29-23-10: 20, 20, 23; --op-dk-29-24-16: 20, 20, 23; --op-dk-31-26-16: 21, 21, 24; --op-dk-34-25-12: 24, 24, 27; --op-dk-34-27-10: 23, 23, 26; --op-dk-34-29-17: 23, 23, 26; --op-dk-34-30-16: 23, 23, 26; --op-dk-36-28-9: 24, 24, 27; --op-dk-42-33-16: 29, 29, 32; --op-dk-43-37-13: 29, 29, 32; --op-dk-56-42-14: 39, 39, 42; --op-dk-60-48-10: 41, 41, 44; --op-dk-8-6-3: 6, 6, 9; --op-dk-8-7-3: 6, 6, 9;
}
html[data-op-glass][data-bs-theme] {
  background:
    radial-gradient(1100px 760px at 6% -8%, rgba(46, 124, 255, .55), transparent 62%) fixed no-repeat,
    radial-gradient(900px 640px at 98% 2%, rgba(30, 205, 200, .34), transparent 60%) fixed no-repeat,
    radial-gradient(1000px 760px at 88% 104%, rgba(255, 150, 80, .26), transparent 62%) fixed no-repeat,
    radial-gradient(900px 700px at -4% 100%, rgba(80, 110, 255, .32), transparent 60%) fixed no-repeat,
    radial-gradient(760px 560px at 50% 44%, rgba(255, 255, 255, .05), transparent 66%) fixed no-repeat,
    #0a0a10 !important;
}

/* neutral details */
html[data-op-glass]:not([data-op-theme]) .op-seg-btn.active, html[data-op-glass]:not([data-op-theme]) .op-spot-tabs button.active, html[data-op-glass]:not([data-op-theme]) .op-rnk-mode.active,
html[data-op-glass]:not([data-op-theme]) .op-pp-mode.active, html[data-op-glass]:not([data-op-theme]) .op-pp-mod.active, html[data-op-glass]:not([data-op-theme]) .op-tab.active {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(255, 255, 255, .14) !important; color: #fff !important;
}
html[data-op-glass] .op-nav .op-nav-supporter, html[data-op-glass] .op-nav .op-nav-supporter:hover { color: rgba(245, 245, 247, .82) !important; }
html[data-op-glass] .op-scrollbar, html[data-op-glass] .turbo-progress-bar { background: #f5f5f7 !important; }
html[data-op-glass] a:not(.btn):not(.op-btn):not(.gh-btn):not(.nav-link):not(.dropdown-item) { text-decoration-color: rgba(255, 255, 255, .3); }
/* chat: your own bubbles are blue like in Messages, switches turn green */
html[data-op-glass] .op-chat-msg.mine .op-chat-bubble {
  background: linear-gradient(180deg, #3d9bff 0%, #0a6dff 100%) !important;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .5), inset 0 -10px 14px -10px rgba(0, 40, 140, .5), 0 10px 22px -12px rgba(10, 110, 255, .8) !important;
}
html[data-op-glass] .op-theme-lite input[type="checkbox"]:checked { background: linear-gradient(180deg, #4cd964, #30b94d) !important; }
html[data-op-glass] .op-theme-lock { background: var(--gl-fill-strong) !important; }
html[data-op-glass] .op-theme-lock i { color: #ff6fae; }
/* section icons: small panes of glass with a white sign, like the menu icons */
html[data-op-glass] .op-panel-head h3 > i, html[data-op-glass] .op-rankgraph-head h5 > i, html[data-op-glass] .op-medals-head h5 > i, html[data-op-glass] .op-pf-section-head > i,
html[data-op-glass] .op-pf-section h5 > i:first-child, html[data-op-glass] .op-comments-title > i, html[data-op-glass] .op-lbx-side a > i, html[data-op-glass] .op-page-head h1 > i {
  display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: .55rem; border-radius: 10px; font-size: .78rem; color: #fff !important; opacity: 1 !important; vertical-align: middle;
  background: linear-gradient(160deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, .06)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 0 0 1px rgba(255, 255, 255, .11), 0 6px 14px -8px rgba(0, 0, 0, .7);
}
html[data-op-glass] .op-lbx-side a > i { width: 26px; height: 26px; border-radius: 9px; font-size: .7rem; margin-right: .3rem; }
html[data-op-glass] .op-nav-links .nav-link.op-nav-supporter > span, html[data-op-glass] .op-nav-links .nav-link.op-nav-supporter i, html[data-op-glass] .op-nav-links .nav-link.op-nav-supporter { color: rgba(245, 245, 247, .82) !important; }
html[data-op-glass]:not([data-op-theme]) .op-pf:not(.op-pf-custom) .op-pf-level-fill { background: linear-gradient(90deg, #ffffff, #c9ccda) !important; animation: op-level-grow 1.2s ease both !important; }
html[data-op-glass]:not([data-op-theme]) .op-pp-big strong { background: none !important; -webkit-text-fill-color: #fff; color: #fff !important; }

/* =====================================================================================================================
   qw26_59.0.6 (owner: profile colours of supporters and the website colour themes should tint the glass a little; better
   animations on click and when a page opens)
   ===================================================================================================================== */
/* ---------- a supporter's profile colour tints the glass of the whole profile ---------- */
html[data-op-glass] .op-pf-custom .op-pf-header, html[data-op-glass] .op-pf-custom .op-pf-section {
  background: linear-gradient(135deg, color-mix(in srgb, var(--pfc) 26%, transparent) 0%, color-mix(in srgb, var(--pfc) 8%, transparent) 36%, color-mix(in srgb, var(--pfc) 5%, transparent) 60%, color-mix(in srgb, var(--pfc) 17%, transparent) 100%),
              linear-gradient(135deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .03) 40%, rgba(255, 255, 255, .02) 60%, rgba(255, 255, 255, .08) 100%) !important;
  box-shadow: inset 0 1.5px 0 color-mix(in srgb, var(--pfc) 35%, rgba(255, 255, 255, .8)), inset 1.5px 0 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(255, 255, 255, .18),
              inset 0 0 0 1px color-mix(in srgb, var(--pfc) 30%, transparent), inset 0 -18px 26px -22px color-mix(in srgb, var(--pfc) 70%, transparent),
              0 30px 64px -34px color-mix(in srgb, var(--pfc) 55%, rgba(0, 0, 0, .8)) !important;
  border-radius: 32px !important; border-color: transparent !important;
}
html[data-op-glass]:not([data-op-lite]) .op-pf-custom .op-pf-header, html[data-op-glass]:not([data-op-lite]) .op-pf-custom .op-pf-section { -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); }
html[data-op-glass] .op-pf-custom .op-pf-header { border-radius: 36px !important; }
html[data-op-glass] .op-pf-custom .op-pf-avatar {
  border: 0 !important; padding: 4px; box-sizing: border-box; border-radius: 34px !important;
  background: linear-gradient(135deg, #fff 0%, color-mix(in srgb, var(--pfc) 70%, transparent) 40%, color-mix(in srgb, var(--pfc) 35%, transparent) 62%, rgba(255, 255, 255, .7) 100%) !important;
}
html[data-op-glass] .op-pf-custom .op-pf-section h5 > i:first-child, html[data-op-glass] .op-pf-custom .op-rankgraph-head h5 > i, html[data-op-glass] .op-pf-custom .op-comments-title > i {
  color: #fff !important; background: linear-gradient(160deg, color-mix(in srgb, var(--pfc) 60%, rgba(255, 255, 255, .3)), color-mix(in srgb, var(--pfc) 22%, transparent)) !important;
}
html[data-op-glass] .op-pf-custom .op-sc { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px color-mix(in srgb, var(--pfc) 22%, transparent); border-radius: 20px !important; }

/* ---------- a supporter's website colour theme tints the glass of every page ---------- */
html[data-op-glass][data-op-theme], html[data-op-glass][data-bs-theme][data-bs-core][data-op-theme] {
  --op-accent: linear-gradient(180deg, rgba(var(--op-yellow-rgb), .62), rgba(var(--op-yellow-rgb), .34));
  --op-metal-hi: #ffffff; --op-metal-mid: var(--op-yellow); --op-metal-lo: rgba(var(--op-yellow-rgb), .55); --op-light: #ffffff; --op-light-rgb: 255, 255, 255;
  --op-ring: var(--op-yellow-rgb); --op-ink: #0b0b10;
  --gl-fill: linear-gradient(135deg, rgba(var(--op-yellow-rgb), .2) 0%, rgba(var(--op-yellow-rgb), .06) 34%, rgba(var(--op-yellow-rgb), .035) 60%, rgba(var(--op-yellow-rgb), .14) 100%),
             linear-gradient(135deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .03) 40%, rgba(255, 255, 255, .02) 60%, rgba(255, 255, 255, .07) 100%);
  --gl-fill-strong: linear-gradient(135deg, rgba(var(--op-yellow-rgb), .34) 0%, rgba(var(--op-yellow-rgb), .14) 40%, rgba(var(--op-yellow-rgb), .1) 62%, rgba(var(--op-yellow-rgb), .26) 100%),
             linear-gradient(135deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .06));
  --gl-shadow: 0 1px 0 rgba(0, 0, 0, .18), 0 28px 60px -32px rgba(var(--op-yellow-rgb), .35), 0 28px 60px -32px rgba(0, 0, 0, .75);
}
html[data-op-glass][data-bs-theme][data-op-theme] {
  background:
    radial-gradient(1100px 760px at 6% -8%, rgba(var(--op-yellow-rgb), .5), transparent 62%) fixed no-repeat,
    radial-gradient(900px 640px at 98% 2%, rgba(30, 205, 200, .22), transparent 60%) fixed no-repeat,
    radial-gradient(1000px 760px at 88% 104%, rgba(var(--op-yellow-rgb), .3), transparent 62%) fixed no-repeat,
    radial-gradient(900px 700px at -4% 100%, rgba(80, 110, 255, .26), transparent 60%) fixed no-repeat,
    #0a0a10 !important;
}
html[data-op-glass][data-op-theme] .op-nav, html[data-op-glass][data-op-theme] .op-nav.op-nav-scrolled {
  background: linear-gradient(135deg, rgba(var(--op-yellow-rgb), .24) 0%, rgba(var(--op-yellow-rgb), .07) 40%, rgba(255, 255, 255, .03) 60%, rgba(var(--op-yellow-rgb), .16) 100%), rgba(14, 14, 24, .3) !important;
}

/* ---------- opening a page: a streak of light wipes over the glass once, the page rises out of a light haze ---------- */
html[data-op-glass]:not([data-op-lite]) body::after {
  content: ""; position: fixed; top: -20vh; bottom: -20vh; left: 0; width: 46vw; z-index: 4000; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .13) 42%, rgba(255, 255, 255, .28) 50%, rgba(255, 255, 255, .13) 58%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-60vw) skewX(-14deg); animation: opu-glass-wipe 1s cubic-bezier(.3, .6, .3, 1) .05s 1 both; mix-blend-mode: screen;
}
@keyframes opu-glass-wipe { 0% { transform: translateX(-60vw) skewX(-14deg); opacity: 0; } 18% { opacity: 1; } 100% { transform: translateX(130vw) skewX(-14deg); opacity: 0; } }
@keyframes opu-glass-page { from { opacity: 0; } to { opacity: 1; } }
html[data-op-glass]:not([data-op-lite]) .wrapper > :not(nav):not(.op-bgfx):not(.op-scrollbar) { animation: opu-glass-page .45s ease-out backwards; }
/* panes on every page come up one after the other */
html[data-op-glass]:not([data-op-lite]) .op-pfa-cols > *, html[data-op-glass]:not([data-op-lite]) .op-set-main > *, html[data-op-glass]:not([data-op-lite]) .op-set-nav,
html[data-op-glass]:not([data-op-lite]) .op-fr-card, html[data-op-glass]:not([data-op-lite]) .op-chat-side, html[data-op-glass]:not([data-op-lite]) .op-chat-main,
html[data-op-glass]:not([data-op-lite]) .op-lbx-row:not(.op-lbx-head) {
  animation: opu-glass-rise .55s cubic-bezier(.2, .8, .2, 1) backwards;
}
html[data-op-glass]:not([data-op-lite]) .op-lbx-row:nth-child(n+2) { animation-delay: calc(.1s + var(--row, 0) * 1ms); }
html[data-op-glass]:not([data-op-lite]) .op-lbx-row:nth-child(2) { animation-delay: .1s; } html[data-op-glass]:not([data-op-lite]) .op-lbx-row:nth-child(3) { animation-delay: .13s; }
html[data-op-glass]:not([data-op-lite]) .op-lbx-row:nth-child(4) { animation-delay: .16s; } html[data-op-glass]:not([data-op-lite]) .op-lbx-row:nth-child(5) { animation-delay: .19s; }
html[data-op-glass]:not([data-op-lite]) .op-lbx-row:nth-child(6) { animation-delay: .22s; } html[data-op-glass]:not([data-op-lite]) .op-lbx-row:nth-child(7) { animation-delay: .25s; }
html[data-op-glass]:not([data-op-lite]) .op-lbx-row:nth-child(8) { animation-delay: .28s; } html[data-op-glass]:not([data-op-lite]) .op-lbx-row:nth-child(9) { animation-delay: .31s; }
html[data-op-glass]:not([data-op-lite]) .op-lbx-row:nth-child(n+10) { animation-delay: .34s; }
html[data-op-glass]:not([data-op-lite]) .op-fr-card:nth-child(2) { animation-delay: .05s; } html[data-op-glass]:not([data-op-lite]) .op-fr-card:nth-child(3) { animation-delay: .1s; }
html[data-op-glass]:not([data-op-lite]) .op-fr-card:nth-child(n+4) { animation-delay: .15s; }
html[data-op-glass]:not([data-op-lite]) .op-chat-main, html[data-op-glass]:not([data-op-lite]) .op-pfa-cols > :nth-child(2) { animation-delay: .1s; }
@media (prefers-reduced-motion: reduce) {
  html[data-op-glass] body::after { display: none !important; }
  html[data-op-glass] .wrapper > *, html[data-op-glass] .op-pfa-cols > *, html[data-op-glass] .op-set-main > *, html[data-op-glass] .op-set-nav, html[data-op-glass] .op-fr-card,
  html[data-op-glass] .op-chat-side, html[data-op-glass] .op-chat-main, html[data-op-glass] .op-lbx-row { animation: none !important; }
}

/* =====================================================================================================================
   qw26_59.0.7 (owner: "boah meine Augen, und vor allem bei jedem Tab ist das so, fix das, mach nur bei den Icons was"):
   opening a page is calm again - no streak of light over the page, no fading or rising of the whole content, no blur-in.
   Only the small glass icons move: they pop in once and tip a little when you point at their row.
   (The logo on the home page still pours in, that was asked for on its own.)
   ===================================================================================================================== */
html[data-op-glass] body::after { content: none !important; display: none !important; animation: none !important; }
html[data-op-glass] .wrapper > :not(nav), html[data-op-glass] .gh-hero > :not(.gh-svg), html[data-op-glass] .gh-bento > .gh-tile, html[data-op-glass] .gh-row,
html[data-op-glass] .gh-two > *, html[data-op-glass] .gh-end, html[data-op-glass] .op-page-head, html[data-op-glass] .op-lbx-side, html[data-op-glass] .op-lbx-table,
html[data-op-glass] .op-pf-header, html[data-op-glass] .op-auth, html[data-op-glass] .op-pfa-cols > *, html[data-op-glass] .op-set-main > *, html[data-op-glass] .op-set-nav,
html[data-op-glass] .op-fr-card, html[data-op-glass] .op-chat-side, html[data-op-glass] .op-chat-main, html[data-op-glass] .op-lbx-row:not(.op-gelling),
html[data-op-glass] .op-pf, html[data-op-glass] .op-lb {
  animation: none !important;
}
/* icons: a small pop when the page (or a menu) opens */
@keyframes opu-icon-pop { 0% { transform: scale(.55) rotate(-14deg); opacity: 0; } 60% { transform: scale(1.12) rotate(4deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
html[data-op-glass]:not([data-op-lite]) .op-panel-head h3 > i, html[data-op-glass]:not([data-op-lite]) .op-rankgraph-head h5 > i, html[data-op-glass]:not([data-op-lite]) .op-medals-head h5 > i,
html[data-op-glass]:not([data-op-lite]) .op-pf-section h5 > i:first-child, html[data-op-glass]:not([data-op-lite]) .op-comments-title > i, html[data-op-glass]:not([data-op-lite]) .op-lbx-side a > i,
html[data-op-glass]:not([data-op-lite]) .op-set-nav a i, html[data-op-glass]:not([data-op-lite]) .op-set-card-head > i, html[data-op-glass]:not([data-op-lite]) .gh-kicker > i,
html[data-op-glass]:not([data-op-lite]) .gh-explore a > i, html[data-op-glass]:not([data-op-lite]) .op-nav .dropdown-menu.show .dropdown-item > i[class*="fa-"] {
  animation: opu-icon-pop .5s cubic-bezier(.3, 1.4, .5, 1) backwards; transition: transform .25s cubic-bezier(.3, 1.5, .5, 1);
}
html[data-op-glass]:not([data-op-lite]) .op-nav .dropdown-menu.show li:nth-child(2) .dropdown-item > i { animation-delay: .03s; }
html[data-op-glass]:not([data-op-lite]) .op-nav .dropdown-menu.show li:nth-child(3) .dropdown-item > i { animation-delay: .06s; }
html[data-op-glass]:not([data-op-lite]) .op-nav .dropdown-menu.show li:nth-child(4) .dropdown-item > i { animation-delay: .09s; }
html[data-op-glass]:not([data-op-lite]) .op-nav .dropdown-menu.show li:nth-child(n+5) .dropdown-item > i { animation-delay: .12s; }
/* pointing at a row tips its icon */
html[data-op-glass]:not([data-op-lite]) .op-set-nav a:hover i, html[data-op-glass]:not([data-op-lite]) .op-lbx-side a:hover > i, html[data-op-glass]:not([data-op-lite]) .gh-explore a:hover > i,
html[data-op-glass]:not([data-op-lite]) .op-panel-head:hover h3 > i, html[data-op-glass]:not([data-op-lite]) .gh-tile:hover .gh-kicker > i { transform: scale(1.14) rotate(-8deg); }
html[data-op-glass] .gh-kicker > i, html[data-op-glass] .gh-explore a > i { display: inline-block; }
@media (prefers-reduced-motion: reduce) { html[data-op-glass] i { animation: none !important; } }

/* =====================================================================================================================
   qw26_59.0.8 (owner: supporter tab cleaner; the boxes you type in on Report a player / Report a bug still had a colour;
   calmer animations - "kein Boom oder Wackeln, es soll wie Kuroosu auf der Homepage sein")
   ===================================================================================================================== */
/* ---------- everything you type into: neutral glass, a white ring on focus ---------- */
html[data-op-glass] .op-input input, html[data-op-glass] .op-input select, html[data-op-glass] .op-input textarea, html[data-op-glass][data-bs-theme] .form-control,
html[data-op-glass][data-bs-theme] .form-select, html[data-op-glass] .op-fb-text, html[data-op-glass] textarea, html[data-op-glass] .op-pp-num,
html[data-op-glass] .select2-container--default .select2-selection--single, html[data-op-glass] .wysibb, html[data-op-glass] .wysibb-text-editor {
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .05)) !important; background-color: transparent !important;
  border: 0 !important; border-radius: 16px !important; color: #f5f5f7 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .09) !important;
}
html[data-op-glass] .op-input input::placeholder, html[data-op-glass] .form-control::placeholder, html[data-op-glass] textarea::placeholder { color: rgba(245, 245, 247, .42) !important; }
html[data-op-glass] .op-input input:focus, html[data-op-glass] .op-input select:focus, html[data-op-glass] .op-input textarea:focus, html[data-op-glass][data-bs-theme] .form-control:focus,
html[data-op-glass][data-bs-theme] .form-select:focus, html[data-op-glass] .op-fb-text:focus, html[data-op-glass] textarea:focus {
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .08)) !important; outline: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(255, 255, 255, .45), 0 0 0 4px rgba(255, 255, 255, .1) !important;
}
html[data-op-glass] .op-input > i { color: rgba(245, 245, 247, .6) !important; }
html[data-op-glass] select option { background: #1a1a22; color: #f5f5f7; }
/* the choices on the report and feedback forms: glass pills, the picked one is bright glass (their own colour only as a small sign) */
html[data-op-glass] .op-rep-reason span, html[data-op-glass] .op-fb-tab span, html[data-op-glass] .op-rep-target {
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .04)) !important; border-color: transparent !important; border-radius: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .07) !important; color: rgba(245, 245, 247, .85) !important;
}
html[data-op-glass] .op-rep-reason input:checked + span, html[data-op-glass] .op-fb-tab input:checked + span {
  background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .14)) !important; color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 0 0 1px rgba(255, 255, 255, .3) !important;
}
html[data-op-glass] .op-fb-hint, html[data-op-glass] .op-fb-item, html[data-op-glass] .op-fb-reply, html[data-op-glass] .op-fb-login, html[data-op-glass] .op-rep-staff {
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .035)) !important; border-color: transparent !important; border-radius: 18px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .06) !important;
}
html[data-op-glass] .op-fb-hero-icon, html[data-op-glass] .op-rep-icon { color: #fff !important; background: linear-gradient(160deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .06)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(255, 255, 255, .1) !important; }
html[data-op-glass] .op-fb-card h3 i { color: #f5f5f7 !important; }
html[data-op-glass] .alert { border: 0 !important; border-radius: 16px !important; background: var(--gl-fill-strong) !important; color: #f5f5f7 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(255, 255, 255, .08) !important; }
html[data-op-glass] .alert-danger { background: linear-gradient(180deg, rgba(255, 90, 100, .3), rgba(255, 90, 100, .14)) !important; }
html[data-op-glass] .alert-success { background: linear-gradient(180deg, rgba(60, 210, 120, .28), rgba(60, 210, 120, .12)) !important; }

/* ---------- supporter page ---------- */
html[data-op-glass] .op-supporter-hero, html[data-op-glass] .op-supporter-hero.card, html[data-op-glass] .op-supporter .op-supporter-hero > * {
  background-image: none !important;
}
html[data-op-glass] .op-supporter-hero { background: var(--gl-fill) !important; box-shadow: var(--gl-edge), var(--gl-shadow) !important; border-radius: 40px !important; padding: 1.4rem 0 !important; }
html[data-op-glass] .op-supporter-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem) !important; letter-spacing: -.045em !important; }
html[data-op-glass] .op-supporter-hero h1 .supporter { color: #fff !important; background: none !important; -webkit-text-fill-color: #fff !important; text-shadow: none !important; }
html[data-op-glass] .op-supporter-hero .fa-heart { color: #ff6fae !important; filter: drop-shadow(0 8px 20px rgba(255, 111, 174, .5)); }
html[data-op-glass] .op-supporter-hero .lead { color: rgba(245, 245, 247, .72) !important; font-size: 1.15rem !important; }
html[data-op-glass] .btn-kofi {
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(232, 232, 245, .9)) !important; color: #0b0b10 !important; border: 0 !important;
  box-shadow: inset 0 1.5px 0 #fff, 0 14px 34px -14px rgba(255, 255, 255, .55) !important; font-weight: 600 !important;
}
html[data-op-glass] .btn-kofi i { color: #ff5e6b !important; }
html[data-op-glass] .op-sup-show { gap: 1.1rem !important; }
html[data-op-glass] .op-sup-show-card { padding: 1.1rem 1.2rem 1.3rem !important; border-radius: 28px !important; }
html[data-op-glass] .op-sup-show-card h4 { font-size: 1.02rem !important; font-weight: 700 !important; letter-spacing: -.015em; margin-top: 1rem !important; }
html[data-op-glass] .op-sup-show-card h4 i { color: #f5f5f7 !important; opacity: .85; margin-right: .35rem; }
html[data-op-glass] .op-sup-show-card p { color: rgba(245, 245, 247, .62) !important; font-size: .88rem !important; line-height: 1.45; margin-bottom: 0; }
html[data-op-glass] .op-sup-show-demo { background: rgba(0, 0, 0, .28) !important; border-radius: 18px !important; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .05) !important; }
html[data-op-glass] .op-supporter .op-yellow { color: #f5f5f7 !important; }
html[data-op-glass] .op-sup-price .display-5 { font-weight: 800 !important; letter-spacing: -.04em; }
html[data-op-glass] .op-perk-table, html[data-op-glass] .op-perk-table th, html[data-op-glass] .op-perk-table td { background: transparent !important; box-shadow: none !important; color: rgba(245, 245, 247, .86) !important; }
html[data-op-glass] .op-perk-table tbody tr:nth-child(odd) td { background: rgba(255, 255, 255, .035) !important; }
html[data-op-glass] .op-supporter .card-header { box-shadow: none !important; border: 0 !important; padding: 1.1rem 1.4rem !important; }
html[data-op-glass] .op-supporter .card-header h5 { font-size: 1.05rem; font-weight: 700; }
html[data-op-glass] .op-sup-wall { background: var(--gl-fill) !important; box-shadow: var(--gl-edge), var(--gl-shadow) !important; border-radius: 30px !important; }

/* ---------- calm motion: nothing bounces or wobbles, light flows over things like over the logo ---------- */
@keyframes opu-gel-flow { from { left: -80%; } to { left: 140%; } }
html[data-op-glass] .btn:active, html[data-op-glass] .op-btn:active, html[data-op-glass] .op-sc:active, html[data-op-glass] .op-lb-row:active, html[data-op-glass] .op-bm-card:active,
html[data-op-glass] .op-newscard:active, html[data-op-glass] .op-played:active, html[data-op-glass] .op-seg-btn:active { transform: none !important; }
/* icons: no pop, no tipping - they only brighten softly when you point at them */
html[data-op-glass] .op-panel-head h3 > i, html[data-op-glass] .op-rankgraph-head h5 > i, html[data-op-glass] .op-medals-head h5 > i, html[data-op-glass] .op-pf-section h5 > i:first-child,
html[data-op-glass] .op-comments-title > i, html[data-op-glass] .op-lbx-side a > i, html[data-op-glass] .op-set-nav a i, html[data-op-glass] .op-set-card-head > i,
html[data-op-glass] .gh-kicker > i, html[data-op-glass] .gh-explore a > i, html[data-op-glass] .op-nav .dropdown-item > i[class*="fa-"] {
  animation: none !important; transform: none !important; transition: background .35s ease, box-shadow .35s ease, filter .35s ease !important;
}
html[data-op-glass] .op-nav .dropdown-item:hover > i[class*="fa-"], html[data-op-glass] .op-set-nav a:hover i, html[data-op-glass] .op-lbx-side a:hover > i { transform: none !important; filter: brightness(1.25); }
/* menus glide open, switches and hovers move evenly (no overshoot) */
html[data-op-glass][data-bs-theme] .dropdown-menu.show { animation: opu-glass-glide .32s cubic-bezier(.2, .7, .2, 1) !important; }
@keyframes opu-glass-glide { from { opacity: .0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }
html[data-op-glass] .op-nav .dropdown-menu.show { animation-name: opu-glass-glide-solid !important; }
@keyframes opu-glass-glide-solid { from { translate: 0 -8px; } to { translate: 0 0; } }
html[data-op-glass] .op-theme-lite input[type="checkbox"]::after { transition: transform .3s ease !important; }
html[data-op-glass] .op-lang-opt, html[data-op-glass] .op-design-opt, html[data-op-glass] .gh-btn, html[data-op-glass] .gh-explore a, html[data-op-glass] .gh-tile, html[data-op-glass] .gh-card,
html[data-op-glass] .op-fr-card { transition: transform .35s ease, background .35s ease, box-shadow .35s ease !important; }
html[data-op-glass] .op-supporter .btn-kofi, html[data-op-glass] .op-supporter-hero .btn-kofi, html[data-op-glass] a.btn.btn-kofi {
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(232, 232, 245, .9)) !important; background-image: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(232, 232, 245, .9)) !important;
  color: #0b0b10 !important; opacity: 1 !important; padding: .8rem 1.6rem !important;
}
html[data-op-glass] .op-supporter-hero .fa-heart.op-yellow, html[data-op-glass] .op-supporter .op-supporter-hero i.fa-heart { color: #ff6fae !important; }

/* ===== qw26_59.0.15: login / register / recover / 2FA as one sheet of glass ===== */
html[data-op-glass] .op-auth { position: relative; border-radius: 34px; background: var(--gl-fill) !important; box-shadow: var(--gl-edge), var(--gl-shadow) !important; animation: none !important; }
html[data-op-glass]:not([data-op-lite]) .op-auth { -webkit-backdrop-filter: var(--gl-blur) !important; backdrop-filter: var(--gl-blur) !important; }
html[data-op-glass] .op-auth-side { background: transparent !important; }
html[data-op-glass] .op-auth::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; background:
    radial-gradient(60% 75% at 0% 0%, rgba(60, 130, 255, .30), transparent 64%),
    radial-gradient(55% 70% at 100% 100%, rgba(255, 110, 200, .16), transparent 64%),
    radial-gradient(45% 60% at 0% 100%, rgba(40, 210, 200, .16), transparent 64%),
    radial-gradient(40% 55% at 100% 0%, rgba(40, 200, 190, .12), transparent 64%); }
html[data-op-glass] .op-auth > * { position: relative; z-index: 1; }
html[data-op-glass] .op-auth-side::after { left: auto; top: 12%; bottom: 12%; right: 0; width: 1px; height: auto; animation: none;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .28), transparent); }
html[data-op-glass] .op-auth-main { background: transparent !important; }
html[data-op-glass] .op-auth-perks i { border-radius: 11px; color: #fff; background: linear-gradient(145deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .07));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 0 0 1px rgba(255, 255, 255, .1); }
html[data-op-glass] .op-auth-side-foot a, html[data-op-glass] .op-auth-row a, html[data-op-glass] .op-auth-switch a { color: #fff; }
html[data-op-glass] .op-auth #turnstile > div, html[data-op-glass] .op-auth #turnstile iframe { border-radius: 14px; }
@media (max-width: 767.98px) {
  html[data-op-glass] .op-auth { border-radius: 26px; }
  html[data-op-glass] .op-auth-side::after { top: auto; bottom: 0; left: 12%; right: 12%; width: auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent); }
}

/* ===== qw26_60: chat extras as glass ===== */
html[data-op-glass] .op-chat-menu, html[data-op-glass] .op-msg-menu, html[data-op-glass] .op-emoji-any, html[data-op-glass] .op-chat-plus, html[data-op-glass] .op-chat-mention,
html[data-op-glass] .op-chat-replybar, html[data-op-glass] .op-mini-win, html[data-op-glass] .op-mini-fab, html[data-op-glass] .op-chat-jump {
  background: linear-gradient(145deg, rgba(60, 62, 78, .92), rgba(26, 27, 38, .94)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 26px 60px -22px rgba(0, 0, 0, .9) !important; }
html[data-op-glass]:not([data-op-lite]) .op-mini-win, html[data-op-glass]:not([data-op-lite]) .op-mini-fab {
  background: linear-gradient(145deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .06) 40%, rgba(255, 255, 255, .1)), rgba(22, 23, 34, .72) !important;
  -webkit-backdrop-filter: var(--gl-blur) !important; backdrop-filter: var(--gl-blur) !important; }
html[data-op-glass] .op-chat-search input { background: rgba(255, 255, 255, .08) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .08) !important; color: #fff !important; }
html[data-op-glass] .op-chat-more { background: linear-gradient(145deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 0 0 1px rgba(255, 255, 255, .1) !important; }
html[data-op-glass] .op-chat-pins, html[data-op-glass] .op-chat-mutedbar { background: rgba(255, 255, 255, .06) !important; }
html[data-op-glass] .op-chat-msg.has-bub.mine .op-chat-bubble:not(.is-photo):not(.is-sticker):not(.is-deleted) {
  background: linear-gradient(160deg, color-mix(in srgb, var(--bub) 82%, #fff), var(--bub)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 24px -14px var(--bub) !important; }
html[data-op-glass] .op-chat-bubble.is-poll { padding: .8rem .9rem !important; }
html[data-op-glass] .op-chat-form .op-chat-plus .op-btn, html[data-op-glass] .op-chat-mp .op-btn-main { width: auto; height: auto; padding: .35rem .8rem !important; border-radius: 999px !important; display: inline-flex; }
html[data-op-glass] .op-mini-body.msgs > div.mine { background: linear-gradient(160deg, #4b9bff, #2f7cf6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }

/* qw26_60.0.1: voice message bubble */
html[data-op-glass] .op-chat-bubble.is-voice { padding: .5rem .9rem .5rem .5rem !important; border-radius: 999px !important; }
html[data-op-glass] .op-voice-play { background: linear-gradient(180deg, #fff, #dfe3ee); box-shadow: inset 0 1px 0 #fff, 0 8px 18px -8px rgba(0, 0, 0, .7); }

/* ===== qw26_66.0.1: slowly moving gradient behind every page (owner: "bewegter Verlauf, nicht zu viel Farbe") =====
   One big soft layer drifts with transform only; the fixed wallpaper under it is toned down so it stays calm. Off with op-lite / reduced motion. */
html[data-op-glass][data-bs-theme]:not([data-op-theme]) {
  background:
    radial-gradient(1100px 760px at 6% -8%, rgba(46, 124, 255, .26), transparent 62%) fixed no-repeat,
    radial-gradient(1000px 760px at 92% 104%, rgba(80, 110, 255, .16), transparent 62%) fixed no-repeat,
    #0a0a10 !important;
}
html[data-op-glass] .op-bgfx { display: block !important; }
html[data-op-glass] .op-bgfx > * { display: none !important; }
html[data-op-glass] .op-bgfx::before, html[data-op-glass] .op-bgfx::after { content: "" !important; display: block !important; position: absolute; inset: -30% !important; width: auto; height: auto; opacity: 1 !important; filter: none; pointer-events: none; will-change: transform; background-size: auto !important; }
html[data-op-glass] .op-bgfx::before {
  background:
    radial-gradient(38% 34% at 24% 30%, rgba(60, 130, 255, .22), transparent 70%),
    radial-gradient(34% 32% at 76% 68%, rgba(40, 200, 195, .14), transparent 70%) !important;
  animation: opu-glass-drift-a 48s ease-in-out infinite alternate !important;
}
html[data-op-glass] .op-bgfx::after {
  background:
    radial-gradient(30% 30% at 70% 26%, rgba(150, 120, 255, .13), transparent 70%),
    radial-gradient(32% 30% at 30% 74%, rgba(255, 160, 100, .09), transparent 70%) !important;
  animation: opu-glass-drift-b 64s ease-in-out infinite alternate !important;
}
html[data-op-glass][data-op-theme] .op-bgfx::before {
  background:
    radial-gradient(38% 34% at 24% 30%, rgba(var(--op-yellow-rgb), .2), transparent 70%),
    radial-gradient(34% 32% at 76% 68%, rgba(var(--op-yellow-rgb), .11), transparent 70%) !important;
}
@keyframes opu-glass-drift-a { 0% { transform: translate3d(-9%, -6%, 0) rotate(0deg); } 50% { transform: translate3d(6%, 5%, 0) rotate(8deg); } 100% { transform: translate3d(11%, -4%, 0) rotate(-6deg); } }
@keyframes opu-glass-drift-b { 0% { transform: translate3d(8%, 7%, 0) rotate(0deg); } 50% { transform: translate3d(-7%, -3%, 0) rotate(-10deg); } 100% { transform: translate3d(-12%, 6%, 0) rotate(7deg); } }
html[data-op-glass][data-op-lite] .op-bgfx::before, html[data-op-glass][data-op-lite] .op-bgfx::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) { html[data-op-glass] .op-bgfx::before, html[data-op-glass] .op-bgfx::after { animation: none !important; } }

/* qw26_66.0.2: thick flowing ribbons with loops instead of round blobs (owner: "dicke Schleifen, soll ja liquid glass sein").
   Each layer is one blurred SVG path (drawn once), only the transform moves. Themes tint the first ribbon with hue via a colour overlay. */
html[data-op-glass] .op-bgfx::before { background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 1000%22 preserveAspectRatio=%22xMidYMid slice%22%3E%3Cdefs%3E%3Cfilter id=%22b%22 x=%22-20%25%22 y=%22-20%25%22 width=%22140%25%22 height=%22140%25%22%3E%3CfeGaussianBlur stdDeviation=%2226%22/%3E%3C/filter%3E%3ClinearGradient id=%22g1%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%233c82ff%22 stop-opacity=%22.34%22/%3E%3Cstop offset=%22.55%22 stop-color=%22%2328c8c3%22 stop-opacity=%22.2%22/%3E%3Cstop offset=%221%22 stop-color=%22%235f6bff%22 stop-opacity=%22.28%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg filter=%22url(%23b)%22 fill=%22none%22 stroke-linecap=%22round%22%3E%3Cpath stroke=%22url(%23g1)%22 stroke-width=%22150%22 d=%22M-100 620 C 200 300, 520 260, 640 480 S 520 820, 380 640 S 620 200, 980 300 S 1380 700, 1180 780 S 900 520, 1220 380 S 1600 300, 1750 180%22/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat !important; }
html[data-op-glass] .op-bgfx::after { background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 1000%22 preserveAspectRatio=%22xMidYMid slice%22%3E%3Cdefs%3E%3Cfilter id=%22b%22 x=%22-20%25%22 y=%22-20%25%22 width=%22140%25%22 height=%22140%25%22%3E%3CfeGaussianBlur stdDeviation=%2226%22/%3E%3C/filter%3E%3ClinearGradient id=%22g2%22 x1=%221%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%239678ff%22 stop-opacity=%22.22%22/%3E%3Cstop offset=%22.6%22 stop-color=%22%23ffffff%22 stop-opacity=%22.07%22/%3E%3Cstop offset=%221%22 stop-color=%22%23ffa064%22 stop-opacity=%22.16%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg filter=%22url(%23b)%22 fill=%22none%22 stroke-linecap=%22round%22%3E%3Cpath stroke=%22url(%23g2)%22 stroke-width=%22120%22 d=%22M1750 760 C 1400 980, 1150 860, 1060 660 S 1260 380, 1400 560 S 1120 960, 760 820 S 300 420, 520 300 S 800 480, 520 640 S 60 620, -120 320%22/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat !important; }
html[data-op-glass] .op-bgfx::before, html[data-op-glass] .op-bgfx::after { background-size: cover !important; }
html[data-op-glass][data-op-theme] .op-bgfx { background: radial-gradient(60% 50% at 30% 30%, rgba(var(--op-yellow-rgb), .1), transparent 70%); }
@keyframes opu-glass-drift-a { 0% { transform: translate3d(-7%, -4%, 0) rotate(-4deg) scale(1.02); } 50% { transform: translate3d(5%, 4%, 0) rotate(5deg) scale(1.1); } 100% { transform: translate3d(9%, -3%, 0) rotate(-2deg) scale(1.04); } }
@keyframes opu-glass-drift-b { 0% { transform: translate3d(6%, 5%, 0) rotate(3deg) scale(1.08); } 50% { transform: translate3d(-6%, -3%, 0) rotate(-6deg) scale(1); } 100% { transform: translate3d(-10%, 5%, 0) rotate(4deg) scale(1.1); } }

/* qw26_66.0.3: iridescent flowing gradient field (owner sent a pastel "liquid" wave picture: "es soll mehr so was sein").
   Two full-screen blurred wave fields (SVG, drawn once, layer A with fine grain) slide over each other; kept dim so text stays readable. */
html[data-op-glass][data-bs-theme], html[data-op-glass][data-bs-theme][data-op-theme] { background: #08080e !important; }
html[data-op-glass] .op-bgfx { background: none !important; }
html[data-op-glass] .op-bgfx::before { background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 1000%22 preserveAspectRatio=%22xMidYMid slice%22%3E%3Cdefs%3E%3Cfilter id=%22b%22 x=%22-30%25%22 y=%22-30%25%22 width=%22160%25%22 height=%22160%25%22%3E%3CfeGaussianBlur stdDeviation=%2242%22/%3E%3C/filter%3E%3Cfilter id=%22n%22 x=%220%22 y=%220%22 width=%22100%25%22 height=%22100%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.9%22 numOctaves=%222%22 seed=%227%22/%3E%3CfeColorMatrix values=%220 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .5 -.12%22/%3E%3C/filter%3E%3C/defs%3E%3Crect width=%221600%22 height=%221000%22 fill=%22%233b2a9c%22/%3E%3Cg filter=%22url(%23b)%22 fill=%22none%22 stroke-linecap=%22round%22%3E%3Cpath stroke=%22%23ff5fa8%22 stroke-opacity=%221%22 stroke-width=%22250%22 d=%22M-300 160 C 200 20, 460 430, 800 290 S 1300 20, 1900 250%22/%3E%3Cpath stroke=%22%23ffb36b%22 stroke-opacity=%220.85%22 stroke-width=%22110%22 d=%22M-300 400 C 150 350, 420 650, 760 510 S 1250 280, 1900 500%22/%3E%3Cpath stroke=%22%23a45bff%22 stroke-opacity=%221%22 stroke-width=%22230%22 d=%22M-300 640 C 180 540, 460 880, 820 720 S 1320 500, 1900 760%22/%3E%3Cpath stroke=%22%2335cfd0%22 stroke-opacity=%220.95%22 stroke-width=%22170%22 d=%22M320 -220 C 660 120, 500 400, 900 470 S 1500 540, 1900 370%22/%3E%3Cpath stroke=%22%232f66f0%22 stroke-opacity=%221%22 stroke-width=%22280%22 d=%22M-300 920 C 240 820, 560 1100, 900 950 S 1400 820, 1900 1010%22/%3E%3Cpath stroke=%22%237ff0c8%22 stroke-opacity=%220.8%22 stroke-width=%2290%22 d=%22M700 -200 C 900 60, 1040 210, 1300 180 S 1700 60, 1900 120%22/%3E%3C/g%3E%3Crect width=%221600%22 height=%221000%22 filter=%22url(%23n)%22 opacity=%22.5%22/%3E%3C/svg%3E") center / cover no-repeat !important; opacity: .4 !important; }
html[data-op-glass] .op-bgfx::after { background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 1000%22 preserveAspectRatio=%22xMidYMid slice%22%3E%3Cdefs%3E%3Cfilter id=%22b%22 x=%22-30%25%22 y=%22-30%25%22 width=%22160%25%22 height=%22160%25%22%3E%3CfeGaussianBlur stdDeviation=%2252%22/%3E%3C/filter%3E%3C/defs%3E%3Cg filter=%22url(%23b)%22 fill=%22none%22 stroke-linecap=%22round%22%3E%3Cpath stroke=%22%23ff7ad1%22 stroke-opacity=%220.85%22 stroke-width=%22200%22 d=%22M-300 -60 C 300 250, 520 70, 880 220 S 1380 530, 1900 420%22/%3E%3Cpath stroke=%22%234f96ff%22 stroke-opacity=%220.8%22 stroke-width=%22220%22 d=%22M-300 520 C 240 710, 640 410, 960 620 S 1420 910, 1900 700%22/%3E%3Cpath stroke=%22%23c79bff%22 stroke-opacity=%220.8%22 stroke-width=%22160%22 d=%22M200 1150 C 420 820, 760 900, 1040 760 S 1480 560, 1900 900%22/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat !important; opacity: .24 !important; }

/* qw26_66.0.4: more movement, still slow (owner: "es soll sich mehr bewegen, aber langsam"): bigger layers, longer paths, stretch and turn */
html[data-op-glass] .op-bgfx::before, html[data-op-glass] .op-bgfx::after { inset: -55% !important; }
html[data-op-glass] .op-bgfx::before { animation: opu-glass-flow-a 70s ease-in-out infinite alternate !important; }
html[data-op-glass] .op-bgfx::after { animation: opu-glass-flow-b 90s ease-in-out infinite alternate !important; }
@keyframes opu-glass-flow-a {
  0% { transform: translate3d(-16%, -10%, 0) rotate(-10deg) scale(1.05, 1); }
  25% { transform: translate3d(4%, -14%, 0) rotate(6deg) scale(1.2, 1.08); }
  50% { transform: translate3d(15%, 6%, 0) rotate(16deg) scale(1.08, 1.22); }
  75% { transform: translate3d(-2%, 14%, 0) rotate(2deg) scale(1.22, 1.05); }
  100% { transform: translate3d(-14%, 8%, 0) rotate(-14deg) scale(1.1, 1.18); }
}
@keyframes opu-glass-flow-b {
  0% { transform: translate3d(14%, 12%, 0) rotate(12deg) scale(1.15, 1.05); }
  30% { transform: translate3d(-8%, 10%, 0) rotate(-8deg) scale(1.02, 1.2); }
  60% { transform: translate3d(-16%, -8%, 0) rotate(-20deg) scale(1.22, 1.08); }
  100% { transform: translate3d(10%, -14%, 0) rotate(8deg) scale(1.06, 1.24); }
}
html[data-op-glass][data-op-lite] .op-bgfx::before, html[data-op-glass][data-op-lite] .op-bgfx::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) { html[data-op-glass] .op-bgfx::before, html[data-op-glass] .op-bgfx::after { animation: none !important; } }

/* ===== qw26_66.0.5: clean flowing colours (owner: "nur Rauschen wie bei alten Fernsehern ... super clean, die FARBEN sollen sich bewegen") =====
   No grain, no picture any more: 8 separate soft colour clouds (the old children of .op-bgfx) each wander on their own slow path
   over a calm violet-blue base, so the colours themselves flow into each other. transform only; off with op-lite / reduced motion. */
html[data-op-glass] .op-bgfx { background: linear-gradient(140deg, #2a1c66, #1b2a78 55%, #17355f) !important; opacity: .74; }
html[data-op-glass] .op-bgfx::before, html[data-op-glass] .op-bgfx::after { content: none !important; display: none !important; animation: none !important; }
html[data-op-glass] .op-bgfx > i, html[data-op-glass] .op-bgfx > b, html[data-op-glass] .op-bgfx > em {
  display: block !important; position: absolute !important; right: auto !important; bottom: auto !important; margin: 0 !important; border-radius: 50% !important;
  box-shadow: none !important; filter: none !important; will-change: transform; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; animation-direction: alternate !important; animation-delay: 0s !important;
}
html[data-op-glass] .op-bgfx > i:nth-child(1) { width: 78vmax !important; height: 78vmax !important; left: -18% !important; top: -30% !important; opacity: 0.95 !important; background: radial-gradient(closest-side, rgba(255, 95, 168, .95), rgba(255, 95, 168, .55) 45%, rgba(255, 95, 168, 0) 100%) !important; animation-name: opu-glass-c1 !important; animation-duration: 34s !important; }
@keyframes opu-glass-c1 { 0% { transform: translate3d(0, 0, 0) scale(1); } 33% { transform: translate3d(38vw, 22vh, 0) scale(1.25, .9); } 66% { transform: translate3d(14vw, 58vh, 0) scale(.9, 1.2); } 100% { transform: translate3d(62vw, 34vh, 0) scale(1.15); } }
html[data-op-glass] .op-bgfx > i:nth-child(2) { width: 84vmax !important; height: 84vmax !important; left: 38% !important; top: -34% !important; opacity: 0.9 !important; background: radial-gradient(closest-side, rgba(164, 91, 255, .95), rgba(164, 91, 255, .55) 45%, rgba(164, 91, 255, 0) 100%) !important; animation-name: opu-glass-c2 !important; animation-duration: 41s !important; }
@keyframes opu-glass-c2 { 0% { transform: translate3d(0, 0, 0) scale(1.1); } 33% { transform: translate3d(-42vw, 30vh, 0) scale(.9, 1.25); } 66% { transform: translate3d(-12vw, 64vh, 0) scale(1.25, 1); } 100% { transform: translate3d(-58vw, 12vh, 0) scale(1); } }
html[data-op-glass] .op-bgfx > i:nth-child(3) { width: 90vmax !important; height: 90vmax !important; left: 52% !important; top: 30% !important; opacity: 0.95 !important; background: radial-gradient(closest-side, rgba(47, 102, 240, .95), rgba(47, 102, 240, .55) 45%, rgba(47, 102, 240, 0) 100%) !important; animation-name: opu-glass-c3 !important; animation-duration: 47s !important; }
@keyframes opu-glass-c3 { 0% { transform: translate3d(0, 0, 0) scale(1); } 33% { transform: translate3d(-36vw, -34vh, 0) scale(1.2, .95); } 66% { transform: translate3d(-66vw, 8vh, 0) scale(.95, 1.2); } 100% { transform: translate3d(-20vw, -52vh, 0) scale(1.2); } }
html[data-op-glass] .op-bgfx > i:nth-child(4) { width: 70vmax !important; height: 70vmax !important; left: -22% !important; top: 34% !important; opacity: 0.85 !important; background: radial-gradient(closest-side, rgba(53, 207, 208, .95), rgba(53, 207, 208, .55) 45%, rgba(53, 207, 208, 0) 100%) !important; animation-name: opu-glass-c4 !important; animation-duration: 38s !important; }
@keyframes opu-glass-c4 { 0% { transform: translate3d(0, 0, 0) scale(1.05); } 33% { transform: translate3d(44vw, -26vh, 0) scale(1.25, 1); } 66% { transform: translate3d(70vw, 10vh, 0) scale(.9, 1.15); } 100% { transform: translate3d(26vw, -50vh, 0) scale(1.1); } }
html[data-op-glass] .op-bgfx > b.op-p1 { width: 56vmax !important; height: 56vmax !important; left: 20% !important; top: 48% !important; opacity: 0.6 !important; background: radial-gradient(closest-side, rgba(127, 240, 200, .95), rgba(127, 240, 200, .55) 45%, rgba(127, 240, 200, 0) 100%) !important; animation-name: opu-glass-c5 !important; animation-duration: 53s !important; }
@keyframes opu-glass-c5 { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(40vw, -44vh, 0) scale(1.3, .9); } 100% { transform: translate3d(-24vw, -20vh, 0) scale(1.1, 1.25); } }
html[data-op-glass] .op-bgfx > b.op-p2 { width: 50vmax !important; height: 50vmax !important; left: 62% !important; top: -12% !important; opacity: 0.6 !important; background: radial-gradient(closest-side, rgba(255, 179, 107, .95), rgba(255, 179, 107, .55) 45%, rgba(255, 179, 107, 0) 100%) !important; animation-name: opu-glass-c6 !important; animation-duration: 44s !important; }
@keyframes opu-glass-c6 { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-50vw, 40vh, 0) scale(1.2, 1.3); } 100% { transform: translate3d(-18vw, 70vh, 0) scale(1.3, .95); } }
html[data-op-glass] .op-bgfx > em:nth-of-type(1) { width: 66vmax !important; height: 66vmax !important; left: 8% !important; top: 6% !important; opacity: 0.7 !important; background: radial-gradient(closest-side, rgba(255, 122, 209, .95), rgba(255, 122, 209, .55) 45%, rgba(255, 122, 209, 0) 100%) !important; animation-name: opu-glass-c7 !important; animation-duration: 58s !important; }
@keyframes opu-glass-c7 { 0% { transform: translate3d(0, 0, 0) scale(1.1); } 50% { transform: translate3d(48vw, 30vh, 0) scale(.9, 1.25); } 100% { transform: translate3d(22vw, -18vh, 0) scale(1.25, 1); } }
html[data-op-glass] .op-bgfx > em:nth-of-type(2) { width: 74vmax !important; height: 74vmax !important; left: -10% !important; top: 60% !important; opacity: 0.8 !important; background: radial-gradient(closest-side, rgba(79, 150, 255, .95), rgba(79, 150, 255, .55) 45%, rgba(79, 150, 255, 0) 100%) !important; animation-name: opu-glass-c8 !important; animation-duration: 36s !important; }
@keyframes opu-glass-c8 { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(56vw, -30vh, 0) scale(1.25, 1.05); } 100% { transform: translate3d(30vw, -64vh, 0) scale(1, 1.3); } }
html[data-op-glass][data-op-lite] .op-bgfx > * { animation: none !important; }
@media (prefers-reduced-motion: reduce) { html[data-op-glass] .op-bgfx > * { animation: none !important; } }

/* ===== qw26_66.0.6: clean tags and champion titles (owner, screenshot of the tag row: "mach die Banner ... auch von RX Champion viel cleaner") =====
   Every tag under the name (roles, clan, country, ranked, supporter, status), the small role tags in lists and the champion titles are
   the same plain glass pill with white text. The only colour left is the little icon (--tg). No gradients, glows, sweeps or pulsing. */
html[data-op-glass] .op-pf-tag, html[data-op-glass] .op-pf-tags .op-pf-tag, html[data-op-glass] .op-rank-title {
  --tg: #e9e9f0;
  position: relative; overflow: visible !important; display: inline-flex; align-items: center; gap: .42rem !important; min-height: 30px; padding: .22rem .8rem .22rem .32rem !important;
  border-radius: 999px !important; border: 0 !important; background: rgba(255, 255, 255, .09) !important; color: #f5f5f7 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .07) !important;
  font-family: var(--op-font-text) !important; font-size: .8rem !important; font-weight: 600 !important; letter-spacing: 0 !important; text-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; animation: none !important; transform: none !important; transition: background .2s ease;
}
html[data-op-glass] .op-pf-tag::after, html[data-op-glass] .op-pf-tags .op-pf-tag::after, html[data-op-glass] .op-rank-title::after { content: none !important; animation: none !important; }
html[data-op-glass] a.op-pf-tag:hover, html[data-op-glass] .op-pf-tags .op-pf-tag:hover { background: rgba(255, 255, 255, .15) !important; transform: none !important; color: #fff !important; }
/* the icon: a small tinted glass dot */
html[data-op-glass] .op-pf-tag > i, html[data-op-glass] .op-pf-tags .op-pf-tag > i, html[data-op-glass] .op-pf-tag > .groupEmoji, html[data-op-glass] .op-pf-tags .op-pf-tag > .groupEmoji {
  width: 22px !important; height: 22px !important; display: grid !important; place-items: center; border-radius: 50% !important; flex-shrink: 0; margin: 0 !important; font-size: .68rem !important;
  background: color-mix(in srgb, var(--tg) 24%, rgba(255, 255, 255, .06)) !important; color: var(--tg) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tg) 35%, transparent);
  animation: none !important; filter: none !important;
}
html[data-op-glass] .op-pf-tag > img:not(.op-rnk-ico) { width: 22px !important; height: 16px !important; border-radius: 4px !important; margin: 0 0 0 .2rem !important; }
html[data-op-glass] .op-pf-tag.op-pf-ranked .op-rnk-ico { width: 24px !important; height: 24px !important; margin: -1px 0 -1px -1px !important; }
html[data-op-glass] .op-pf-tag small, html[data-op-glass] .op-rank-title small { margin-left: .1rem !important; padding: 0 !important; background: none !important; color: rgba(245, 245, 247, .55) !important; font-size: .72rem !important; font-weight: 600 !important; opacity: 1 !important; }
/* one colour per kind, only for the icon */
html[data-op-glass] .op-pf-tag.op-role-owner { --tg: #f3c65a; } html[data-op-glass] .op-pf-tag.op-role-co-owner { --tg: #d59bff; }
html[data-op-glass] .op-pf-tag.op-role-admin, html[data-op-glass] .op-pf-tag.op-role-administrator { --tg: #ff7b86; }
html[data-op-glass] .op-pf-tag.op-role-moderator, html[data-op-glass] .op-pf-tag.op-role-mod { --tg: #6fc8ff; }
html[data-op-glass] .op-pf-tag.op-role-developer, html[data-op-glass] .op-pf-tag.op-role-dev { --tg: #6fe3a0; }
html[data-op-glass] .op-pf-tag.op-role-nominator, html[data-op-glass] .op-pf-tag.op-role-beatmap-nominator { --tg: #a79bff; }
html[data-op-glass] .op-pf-tag.op-role-tournament-staff { --tg: #ffb86b; }
html[data-op-glass] .op-pf-tag.op-pf-supporter { --tg: #ff86bd; } html[data-op-glass] .op-pf-tag.op-pf-clan { --tg: #e9e9f0; font-weight: 700 !important; }
html[data-op-glass] .op-pf-tag.op-pf-status { padding-left: .7rem !important; color: #f5f5f7 !important; }
html[data-op-glass] .op-pf-tag.op-pf-status .op-dot { animation: none !important; box-shadow: 0 0 0 3px rgba(58, 214, 120, .18); }
html[data-op-glass] .op-pf-tag.op-pf-status.op-web .op-dot { box-shadow: 0 0 0 3px rgba(72, 160, 255, .2); }
/* small role tags in lists (leaderboard, team, friends) */
html[data-op-glass] .op-pf-tag.op-role-sm { min-height: 24px; padding: .12rem .6rem .12rem .2rem !important; font-size: .72rem !important; gap: .32rem !important; }
html[data-op-glass] .op-pf-tag.op-role-sm > i, html[data-op-glass] .op-pf-tag.op-role-sm > .groupEmoji { width: 18px !important; height: 18px !important; font-size: .58rem !important; }
/* champion titles: same pill, a small dot in gold / silver / bronze instead of metal text and glow */
html[data-op-glass] .op-rank-title { padding: .22rem .85rem .22rem .75rem !important; font-weight: 700 !important; }
html[data-op-glass] .op-rank-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--tg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tg) 22%, transparent); }
html[data-op-glass] .op-rank-title-gold, html[data-op-glass] .op-rank-title-1 { --tg: #f3c65a; }
html[data-op-glass] .op-rank-title-silver { --tg: #d3dce8; } html[data-op-glass] .op-rank-title-bronze { --tg: #e0955a; }
html[data-op-glass] .op-rank-title-ex { --tg: #8d8d99; color: rgba(245, 245, 247, .8) !important; }
html[data-op-glass] .op-rank-titles { gap: .4rem; }
/* on banners the pills need their own dark tint to stay readable */
html[data-op-glass] .op-pf-tags .op-pf-tag, html[data-op-glass] .op-rank-titles .op-rank-title { background: rgba(20, 20, 28, .5) !important; }
html[data-op-glass] .op-pf-tags a.op-pf-tag:hover { background: rgba(40, 40, 52, .62) !important; }

/* qw26_66.0.7: no dot on the champion titles; tags and titles look like liquid glass (owner: "kein Punkt random da hin ... es soll so liquid glass sein") */
html[data-op-glass] .op-rank-title::before { content: none !important; }
html[data-op-glass] .op-pf-tag, html[data-op-glass] .op-pf-tags .op-pf-tag, html[data-op-glass] .op-rank-title, html[data-op-glass] .op-rank-titles .op-rank-title {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .08) 46%, rgba(255, 255, 255, .03) 54%, rgba(255, 255, 255, .16) 100%),
    color-mix(in srgb, var(--tint, transparent) 22%, rgba(26, 26, 36, .34)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(255, 255, 255, .22), inset 1px 0 0 rgba(255, 255, 255, .16), inset -1px 0 0 rgba(255, 255, 255, .1),
    inset 0 -7px 12px -8px rgba(255, 255, 255, .5), 0 6px 16px -8px rgba(0, 0, 0, .6) !important;
  color: #fff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .35) !important;
}
html[data-op-glass]:not([data-op-lite]) .op-pf-tags .op-pf-tag, html[data-op-glass]:not([data-op-lite]) .op-rank-titles .op-rank-title {
  -webkit-backdrop-filter: blur(10px) saturate(170%) !important; backdrop-filter: blur(10px) saturate(170%) !important;
}
html[data-op-glass] a.op-pf-tag:hover, html[data-op-glass] .op-pf-tags a.op-pf-tag:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, .44) 0%, rgba(255, 255, 255, .12) 46%, rgba(255, 255, 255, .06) 54%, rgba(255, 255, 255, .22) 100%),
    color-mix(in srgb, var(--tint, transparent) 26%, rgba(40, 40, 52, .4)) !important;
}
/* the champion titles are tinted glass: gold, silver, bronze */
html[data-op-glass] .op-rank-title { padding: .26rem .95rem !important; font-weight: 700 !important; }
html[data-op-glass] .op-rank-title-gold, html[data-op-glass] .op-rank-title-1 { --tint: #f3c65a; }
html[data-op-glass] .op-rank-title-silver { --tint: #cfd8e6; } html[data-op-glass] .op-rank-title-bronze { --tint: #e0955a; }
html[data-op-glass] .op-rank-title-ex { --tint: transparent; }
/* icon: a little glass bead */
html[data-op-glass] .op-pf-tag > i, html[data-op-glass] .op-pf-tags .op-pf-tag > i, html[data-op-glass] .op-pf-tag > .groupEmoji, html[data-op-glass] .op-pf-tags .op-pf-tag > .groupEmoji {
  background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .55), transparent 55%), color-mix(in srgb, var(--tg) 38%, rgba(255, 255, 255, .08)) !important;
  color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), 0 1px 3px rgba(0, 0, 0, .35) !important; text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
}

/* qw26_67: grade pictures on the home cards sit in a glass pill (SS is wider than a circle) */
.gh-card-img .op-grade { width: auto !important; min-width: 40px; padding: 0 .45rem; border-radius: 999px !important; }
.gh-card-img .op-grade > .op-grade-img { height: 24px; }

/* ===== qw26_67: beatmap page with a big clear cover; title, difficulty and buttons sit on a glass bar over it (owner picked idea 6) ===== */
html[data-op-glass] .op-map-hero { min-height: 520px; display: flex; align-items: flex-end; border-radius: 36px !important; box-shadow: var(--gl-edge), 0 30px 70px -30px rgba(0, 0, 0, .8) !important; background: #0b0b12 !important; }
html[data-op-glass] .op-map-cover { filter: none !important; }
html[data-op-glass] .op-map-hero::before { background: linear-gradient(180deg, rgba(8, 8, 14, 0) 30%, rgba(8, 8, 14, .55) 100%) !important; }
html[data-op-glass] .op-map-hero-inner { width: 100%; align-items: end; gap: 1.2rem !important; padding: 1.4rem !important; }
html[data-op-glass] .op-map-main, html[data-op-glass] .op-map-hero .op-map-side {
  padding: 1.4rem 1.6rem !important; border-radius: 28px !important; border: 0 !important; align-self: end;
  background: linear-gradient(180deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .05) 40%, rgba(255, 255, 255, .03) 100%), rgba(16, 16, 24, .5) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 -10px 18px -12px rgba(255, 255, 255, .3), 0 18px 40px -18px rgba(0, 0, 0, .7) !important;
}
html[data-op-glass]:not([data-op-lite]) .op-map-main, html[data-op-glass]:not([data-op-lite]) .op-map-hero .op-map-side { -webkit-backdrop-filter: blur(22px) saturate(180%) !important; backdrop-filter: blur(22px) saturate(180%) !important; }
html[data-op-glass] .op-map-title { font-size: clamp(1.6rem, 3.2vw, 2.4rem) !important; text-shadow: 0 2px 10px rgba(0, 0, 0, .45) !important; }
@media (max-width: 991.98px) { html[data-op-glass] .op-map-hero { min-height: 0; padding-top: 180px; } html[data-op-glass] .op-map-hero-inner { padding: .8rem !important; } html[data-op-glass] .op-map-main, html[data-op-glass] .op-map-hero .op-map-side { padding: 1.1rem !important; border-radius: 22px !important; } }

/* ===== qw26_68: slim glass footer ===== */
.op-gfoot-wrap { margin-top: 3.5rem; padding: 0 0 1.6rem; background: none !important; }
.op-gfoot { display: flex; align-items: center; gap: 1.4rem 2.6rem; flex-wrap: wrap; padding: 1.2rem 1.7rem; border-radius: 30px;
  background: var(--gl-fill, rgba(255, 255, 255, .08)); box-shadow: var(--gl-edge, inset 0 1px 0 rgba(255, 255, 255, .4)), 0 20px 50px -24px rgba(0, 0, 0, .8); }
html[data-op-glass]:not([data-op-lite]) .op-gfoot { -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); }
.op-gfoot-brand { text-decoration: none; flex-shrink: 0; }
.op-gfoot-brand .op-footer-logo-text { font-size: 1.9rem; }
.op-gfoot-cols { display: flex; gap: 1rem 2.6rem; flex-wrap: wrap; flex: 1 1 320px; min-width: 0; }
.op-gfoot-cols > div { display: grid; grid-template-columns: repeat(2, auto); gap: .1rem 1.4rem; align-content: start; }
.op-gfoot-cols h5 { grid-column: 1 / -1; margin: 0 0 .25rem; font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: rgba(245, 245, 247, .55); }
.op-gfoot-cols a { color: #f5f5f7; opacity: .86; text-decoration: none; font-size: .9rem; white-space: nowrap; }
.op-gfoot-cols a:hover { opacity: 1; text-decoration: underline; }
.op-gfoot-vote { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.2rem; border-radius: 999px; background: #fff; color: #14141c !important; font-weight: 800; font-size: .9rem; text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .12), 0 10px 24px -12px rgba(0, 0, 0, .8); }
.op-gfoot-vote:hover { background: #ececf2; }
.op-gfoot-small { margin: .9rem 0 0; text-align: center; font-size: .78rem; color: rgba(245, 245, 247, .5); }
@media (max-width: 767px) { .op-gfoot { padding: 1.1rem; border-radius: 24px; } .op-gfoot-cols > div { grid-template-columns: 1fr 1fr; flex: 1 1 100%; } .op-gfoot-vote { width: 100%; justify-content: center; } }
html[data-op-glass] .op-gfoot-cols a { color: #fff !important; opacity: .92; }
html[data-op-glass] a.op-gfoot-vote, html[data-op-glass] a.op-gfoot-vote i { color: #14141c !important; opacity: 1 !important; }
html[data-op-glass] .op-gfoot-wrap { border: 0 !important; box-shadow: none !important; }

/* ---------- qw26_71.0.1: flags next to names on the home page (the avatar rules above must not round them) ---------- */
html[data-op-glass][data-op-glass] img.gh-flag, img.gh-flag {
  width: 20px !important; height: 14px !important; flex: 0 0 auto; border-radius: 3px !important; padding: 0 !important; background: none !important;
  box-shadow: none !important; object-fit: cover; vertical-align: -2px; margin-right: .4rem; display: inline-block;
}
html[data-op-glass][data-op-glass] .gh-people img.gh-flag { margin-right: 0 !important; }

/* ---------- qw26_73: Ranked Play reward titles are tinted glass like the champion titles ---------- */
html[data-op-glass] .op-rank-title-legend { --tint: #b77cff; }
html[data-op-glass] .op-rank-title-celestial { --tint: #ff6fd0; }
html[data-op-glass] .op-rank-title-season { --tint: #6cb8ff; }
html[data-op-glass] .op-rnk-rw-card, html[data-op-glass] .op-rnk-rw-first, html[data-op-glass] .op-rnk-rw-mine { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16); }
/* qw26_73.0.3: the Ranked Play reward titles stay colourful and moving in Glass (the plain glass pill rules above are !important) */
html[data-op-glass] .op-rank-title.op-rank-title-rk, html[data-op-glass] .op-rank-titles .op-rank-title.op-rank-title-rk {
  background: linear-gradient(110deg, var(--c2), var(--c1), var(--c3), var(--c1), var(--c2)) !important; background-size: 300% 100% !important;
  box-shadow: 0 0 18px color-mix(in srgb, var(--c1) 60%, transparent), inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -6px 10px -7px rgba(255, 255, 255, .55) !important;
  animation: opu-rk-title 7s linear infinite !important; padding-left: .7rem !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html[data-op-glass] .op-rank-title.op-rank-title-rk.op-rank-title-celestial, html[data-op-glass] .op-rank-titles .op-rank-title.op-rank-title-rk.op-rank-title-celestial {
  background: linear-gradient(110deg, #ff6fd0, #b99cff, #7fd0ff, #9dffd0, #ffd27a, #ff6fd0) !important; background-size: 300% 100% !important; }
html[data-op-glass] .op-rank-title.op-rank-title-rk::after { content: "" !important; animation: opu-rk-sweep 4.2s ease-in-out infinite !important; }
html[data-op-glass] .op-rank-title.op-rank-title-rk small { color: rgba(255, 255, 255, .88) !important; }
html[data-op-glass][data-op-lite] .op-rank-title.op-rank-title-rk { animation: none !important; } html[data-op-glass][data-op-lite] .op-rank-title.op-rank-title-rk::after { content: none !important; }
/* qw26_73.0.4: the light sweep of the reward titles must stay inside the pill (Glass makes pills overflow: visible) */
html[data-op-glass] .op-rank-title.op-rank-title-rk, html[data-op-glass] .op-rank-titles .op-rank-title.op-rank-title-rk { overflow: hidden !important; isolation: isolate; }
/* qw26_73.0.5 (owner: "make the other badges better too, colourful and moving"): the tags under the name that have a colour of their own
   (roles, supporter, ranked rank, last season) are tinted moving glass; all tags get the light sweep. Lists keep the small quiet tags. */
html[data-op-glass] .op-pf-tags .op-pf-tag.op-pf-ranked, html[data-op-glass] .op-pf-tags .op-pf-tag.op-pf-lastrank { --tg: var(--tc, #b9c4d6); }
html[data-op-glass] .op-pf-tags .op-pf-tag.op-pf-lastrank { --tg: #9aa8ff; }
html[data-op-glass] .op-pf-tags .op-pf-tag.op-role-owner, html[data-op-glass] .op-pf-tags .op-pf-tag.op-role-co-owner, html[data-op-glass] .op-pf-tags .op-pf-tag.op-role-admin,
html[data-op-glass] .op-pf-tags .op-pf-tag.op-role-administrator, html[data-op-glass] .op-pf-tags .op-pf-tag.op-role-moderator, html[data-op-glass] .op-pf-tags .op-pf-tag.op-role-mod,
html[data-op-glass] .op-pf-tags .op-pf-tag.op-role-developer, html[data-op-glass] .op-pf-tags .op-pf-tag.op-role-dev, html[data-op-glass] .op-pf-tags .op-pf-tag.op-role-nominator,
html[data-op-glass] .op-pf-tags .op-pf-tag.op-role-beatmap-nominator, html[data-op-glass] .op-pf-tags .op-pf-tag.op-role-tournament-staff, html[data-op-glass] .op-pf-tags .op-pf-tag.op-pf-supporter,
html[data-op-glass] .op-pf-tags .op-pf-tag.op-pf-ranked, html[data-op-glass] .op-pf-tags .op-pf-tag.op-pf-lastrank {
  background: linear-gradient(110deg, color-mix(in srgb, var(--tg) 42%, #14141c), color-mix(in srgb, var(--tg) 82%, #14141c), color-mix(in srgb, var(--tg) 55%, #ffffff), color-mix(in srgb, var(--tg) 82%, #14141c), color-mix(in srgb, var(--tg) 42%, #14141c)) !important;
  background-size: 300% 100% !important; animation: opu-rk-title 9s linear infinite !important; color: #fff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .5) !important;
  box-shadow: 0 0 14px color-mix(in srgb, var(--tg) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -6px 10px -7px rgba(255, 255, 255, .45) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html[data-op-glass] .op-pf-tags .op-pf-tag[class*="op-role-"] > i, html[data-op-glass] .op-pf-tags .op-pf-tag.op-pf-supporter > i, html[data-op-glass] .op-pf-tags .op-pf-tag[class*="op-role-"] > .groupEmoji {
  background: rgba(255, 255, 255, .28) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45) !important; }
html[data-op-glass] .op-pf-tags .op-pf-tag small { color: rgba(255, 255, 255, .82) !important; }
html[data-op-glass] .op-pf-tags .op-pf-tag { overflow: hidden !important; }
html[data-op-glass] .op-pf-tags .op-pf-tag::after { content: "" !important; position: absolute; top: 0; bottom: 0; left: -45%; width: 35%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-20deg); animation: opu-rk-sweep 5.2s ease-in-out infinite !important; animation-delay: calc(var(--i, 0) * .6s) !important; pointer-events: none; }
html[data-op-glass] .op-pf-tags .op-pf-tag:nth-child(2)::after { animation-delay: .7s !important; } html[data-op-glass] .op-pf-tags .op-pf-tag:nth-child(3)::after { animation-delay: 1.4s !important; }
html[data-op-glass] .op-pf-tags .op-pf-tag:nth-child(4)::after { animation-delay: 2.1s !important; } html[data-op-glass] .op-pf-tags .op-pf-tag:nth-child(n+5)::after { animation-delay: 2.8s !important; }
html[data-op-glass] .op-rank-title.op-rank-title-rk > i { background: rgba(255, 255, 255, .28) !important; color: #fff !important; }
html[data-op-glass][data-op-lite] .op-pf-tags .op-pf-tag { animation: none !important; } html[data-op-glass][data-op-lite] .op-pf-tags .op-pf-tag::after { content: none !important; }
@media (prefers-reduced-motion: reduce) { html[data-op-glass] .op-pf-tags .op-pf-tag { animation: none !important; } html[data-op-glass] .op-pf-tags .op-pf-tag::after { content: none !important; } }

/* =====================================================================================================================
   qw26_73.0.6: profile badges redone (owner: "still almost the same"). Every tag and title under the name is a bigger
   liquid glass pill with a running rainbow rim, a sheen in its own colour and a glowing icon orb.
   ===================================================================================================================== */
html[data-op-glass][data-op-glass] .op-pf-tags .op-pf-tag { --tg: #b9c4e6; }
html[data-op-glass][data-op-glass] .op-pf-tags .op-pf-tag.op-pf-clan { --tg: #5fe0cf; }
html[data-op-glass][data-op-glass] .op-pf-tags .op-pf-tag.op-pf-country { --tg: #6fa8ff; }
html[data-op-glass][data-op-glass] .op-pf-tags .op-pf-tag.op-pf-status { --tg: #4fdc86; }
html[data-op-glass][data-op-glass] .op-pf-tags .op-pf-tag.op-pf-status.op-web { --tg: #58a6ff; }
html[data-op-glass][data-op-glass] .op-pf-tags .op-pf-tag.op-role-owner { --tg: #f3c65a; } html[data-op-glass][data-op-glass] .op-pf-tags .op-pf-tag.op-role-co-owner { --tg: #d59bff; }
html[data-op-glass][data-op-glass] .op-pf-tags .op-pf-tag.op-role-admin, html[data-op-glass][data-op-glass] .op-pf-tags .op-pf-tag.op-role-administrator { --tg: #ff7b86; }
html[data-op-glass][data-op-glass] .op-pf-tags .op-pf-tag.op-role-moderator, html[data-op-glass][data-op-glass] .op-pf-tags .op-pf-tag.op-role-mod { --tg: #6fc8ff; }
html[data-op-glass][data-op-glass] .op-pf-tags .op-pf-tag.op-role-developer, html[data-op-glass][data-op-glass] .op-pf-tags .op-pf-tag.op-role-dev { --tg: #6fe3a0; }
html[data-op-glass][data-op-glass] .op-pf-tags .op-pf-tag.op-role-nominator, html[data-op-glass][data-op-glass] .op-pf-tags .op-pf-tag.op-role-beatmap-nominator { --tg: #a79bff; }
html[data-op-glass][data-op-glass] .op-pf-tags .op-pf-tag.op-role-tournament-staff { --tg: #ffb86b; }
html[data-op-glass][data-op-glass] .op-pf-tags .op-pf-tag.op-pf-supporter { --tg: #ff86bd; }
html[data-op-glass][data-op-glass] .op-pf-tags .op-pf-tag.op-pf-ranked { --tg: var(--tc, #b9c4d6); } html[data-op-glass][data-op-glass] .op-pf-tags .op-pf-tag.op-pf-lastrank { --tg: #9aa8ff; }
html[data-op-glass][data-op-glass] .op-rank-title.op-rank-title-rk { --tg: var(--c1, #b9c4e6); }
html[data-op-glass][data-op-glass] .op-pf-tags .op-pf-tag, html[data-op-glass][data-op-glass] .op-rank-title.op-rank-title-rk, html[data-op-glass][data-op-glass] .op-rank-titles .op-rank-title.op-rank-title-rk {
  min-height: 36px; padding: .28rem 1rem .28rem .4rem !important; gap: .5rem !important; font-size: .86rem !important; font-weight: 700 !important; color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55) !important; border: 1.5px solid transparent !important; overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .07) 46%, rgba(255, 255, 255, 0) 56%, rgba(255, 255, 255, .2) 100%) padding-box,
    linear-gradient(110deg, transparent 0%, color-mix(in srgb, var(--tg) 75%, transparent) 22%, rgba(255, 255, 255, .4) 50%, color-mix(in srgb, var(--tg) 75%, transparent) 78%, transparent 100%) padding-box,
    linear-gradient(color-mix(in srgb, var(--tg) 34%, rgba(16, 15, 26, .93)), color-mix(in srgb, var(--tg) 34%, rgba(16, 15, 26, .93))) padding-box,
    linear-gradient(110deg, #ff6fd0, #b99cff, #7fd0ff, #9dffd0, #ffd27a, #ff6fd0) border-box !important;
  background-size: 100% 100%, 300% 100%, 100% 100%, 300% 100% !important; animation: opu-lg-flow 8s linear infinite !important;
  box-shadow: 0 0 16px color-mix(in srgb, var(--tg) 45%, transparent), 0 6px 16px -8px rgba(0, 0, 0, .6) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html[data-op-glass][data-op-glass] .op-rank-title.op-rank-title-rk { padding-left: .85rem !important; }
/* champion and Celestial: the whole pill is rainbow liquid glass */
html[data-op-glass][data-op-glass] .op-rank-title.op-rank-title-rk.op-rank-title-gold, html[data-op-glass][data-op-glass] .op-rank-title.op-rank-title-rk.op-rank-title-1,
html[data-op-glass][data-op-glass] .op-rank-title.op-rank-title-rk.op-rank-title-celestial {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .46) 0%, rgba(255, 255, 255, .08) 46%, rgba(255, 255, 255, 0) 56%, rgba(255, 255, 255, .22) 100%) padding-box,
    linear-gradient(110deg, rgba(255, 111, 208, .5), rgba(185, 156, 255, .5), rgba(127, 208, 255, .5), rgba(157, 255, 208, .45), rgba(255, 210, 122, .45), rgba(255, 111, 208, .5)) padding-box,
    linear-gradient(rgba(16, 14, 28, .8), rgba(16, 14, 28, .8)) padding-box,
    linear-gradient(110deg, #ff6fd0, #b99cff, #7fd0ff, #9dffd0, #ffd27a, #ff6fd0) border-box !important;
  background-size: 100% 100%, 300% 100%, 100% 100%, 300% 100% !important; animation: opu-lg-flow 6s linear infinite !important;
  box-shadow: 0 0 20px rgba(185, 156, 255, .55), 0 6px 16px -8px rgba(0, 0, 0, .6) !important; }
/* icon = a small glowing orb in the colour of the badge */
html[data-op-glass][data-op-glass] .op-pf-tags .op-pf-tag > i, html[data-op-glass][data-op-glass] .op-pf-tags .op-pf-tag > .groupEmoji, html[data-op-glass][data-op-glass] .op-rank-title.op-rank-title-rk > i {
  width: 25px !important; height: 25px !important; font-size: .72rem !important; color: #fff !important; margin: 0 !important;
  background: radial-gradient(circle at 32% 26%, #ffffff 0%, var(--tg) 42%, color-mix(in srgb, var(--tg) 55%, #000) 100%) !important;
  box-shadow: 0 0 10px color-mix(in srgb, var(--tg) 80%, transparent), inset 0 0 0 1px rgba(255, 255, 255, .5) !important; text-shadow: 0 1px 1px rgba(0, 0, 0, .4); }
html[data-op-glass][data-op-glass] .op-pf-tags .op-pf-tag > img:not(.op-rnk-ico) { width: 26px !important; height: 18px !important; margin-left: .15rem !important; box-shadow: 0 0 8px color-mix(in srgb, var(--tg) 70%, transparent); }
html[data-op-glass][data-op-glass] .op-pf-tags .op-pf-tag.op-pf-status { padding-left: .85rem !important; }
html[data-op-glass][data-op-lite] .op-pf-tags .op-pf-tag, html[data-op-glass][data-op-lite] .op-rank-title.op-rank-title-rk { animation: none !important; }
@media (prefers-reduced-motion: reduce) { html[data-op-glass][data-op-glass] .op-pf-tags .op-pf-tag, html[data-op-glass][data-op-glass] .op-rank-title.op-rank-title-rk { animation: none !important; } }

/* qw26_73.0.7 (owner: "much too thick and much too punchy, and it is not even on the leaderboard"): slimmer, calmer, and the same look for the tags in lists */
html[data-op-glass][data-op-glass] .op-pf-tag, html[data-op-glass][data-op-glass] .op-pf-tags .op-pf-tag,
html[data-op-glass][data-op-glass] .op-rank-title.op-rank-title-rk, html[data-op-glass][data-op-glass] .op-rank-titles .op-rank-title.op-rank-title-rk {
  min-height: 28px; padding: .14rem .75rem .14rem .26rem !important; gap: .4rem !important; font-size: .79rem !important; font-weight: 600 !important; color: #fff !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .4) !important; border: 1px solid transparent !important; overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, .04) 46%, rgba(255, 255, 255, 0) 56%, rgba(255, 255, 255, .1) 100%) padding-box,
    linear-gradient(110deg, transparent 0%, color-mix(in srgb, var(--tg) 38%, transparent) 25%, rgba(255, 255, 255, .16) 50%, color-mix(in srgb, var(--tg) 38%, transparent) 75%, transparent 100%) padding-box,
    linear-gradient(color-mix(in srgb, var(--tg) 16%, rgba(18, 18, 28, .92)), color-mix(in srgb, var(--tg) 16%, rgba(18, 18, 28, .92))) padding-box,
    linear-gradient(110deg, rgba(255, 111, 208, .6), rgba(185, 156, 255, .6), rgba(127, 208, 255, .6), rgba(157, 255, 208, .55), rgba(255, 210, 122, .55), rgba(255, 111, 208, .6)) border-box !important;
  background-size: 100% 100%, 300% 100%, 100% 100%, 300% 100% !important; animation: opu-lg-flow 16s linear infinite !important;
  box-shadow: 0 3px 8px -5px rgba(0, 0, 0, .6) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html[data-op-glass][data-op-glass] .op-rank-title.op-rank-title-rk { padding-left: .7rem !important; }
html[data-op-glass][data-op-glass] .op-rank-title.op-rank-title-rk.op-rank-title-gold, html[data-op-glass][data-op-glass] .op-rank-title.op-rank-title-rk.op-rank-title-1,
html[data-op-glass][data-op-glass] .op-rank-title.op-rank-title-rk.op-rank-title-celestial {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .04) 46%, rgba(255, 255, 255, 0) 56%, rgba(255, 255, 255, .1) 100%) padding-box,
    linear-gradient(110deg, rgba(255, 111, 208, .26), rgba(185, 156, 255, .26), rgba(127, 208, 255, .26), rgba(157, 255, 208, .22), rgba(255, 210, 122, .22), rgba(255, 111, 208, .26)) padding-box,
    linear-gradient(rgba(18, 16, 30, .9), rgba(18, 16, 30, .9)) padding-box,
    linear-gradient(110deg, #ff6fd0, #b99cff, #7fd0ff, #9dffd0, #ffd27a, #ff6fd0) border-box !important;
  background-size: 100% 100%, 300% 100%, 100% 100%, 300% 100% !important; animation: opu-lg-flow 12s linear infinite !important; box-shadow: 0 0 9px rgba(185, 156, 255, .25), 0 3px 8px -5px rgba(0, 0, 0, .6) !important; }
html[data-op-glass][data-op-glass] .op-pf-tag > i, html[data-op-glass][data-op-glass] .op-pf-tag > .groupEmoji, html[data-op-glass][data-op-glass] .op-pf-tags .op-pf-tag > i,
html[data-op-glass][data-op-glass] .op-pf-tags .op-pf-tag > .groupEmoji, html[data-op-glass][data-op-glass] .op-rank-title.op-rank-title-rk > i {
  width: 20px !important; height: 20px !important; font-size: .62rem !important; color: #fff !important; margin: 0 !important;
  background: radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--tg) 45%, #fff) 0%, var(--tg) 55%, color-mix(in srgb, var(--tg) 65%, #000) 100%) !important;
  box-shadow: 0 0 5px color-mix(in srgb, var(--tg) 40%, transparent), inset 0 0 0 1px rgba(255, 255, 255, .3) !important; }
html[data-op-glass][data-op-glass] .op-pf-tags .op-pf-tag > img:not(.op-rnk-ico) { width: 22px !important; height: 16px !important; box-shadow: none; }
html[data-op-glass][data-op-glass] .op-rank-title.op-rank-title-rk img { width: 18px; height: 18px; animation: none; filter: none; }
html[data-op-glass][data-op-glass] .op-pf-tags .op-pf-tag::after, html[data-op-glass][data-op-glass] .op-rank-title.op-rank-title-rk::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent) !important; animation-duration: 9s !important; }
/* lists (leaderboard, team, friends): same glass with the rainbow rim, smaller and without movement */
html[data-op-glass][data-op-glass] .op-pf-tag.op-role-sm { min-height: 22px; padding: .06rem .55rem .06rem .18rem !important; font-size: .7rem !important; gap: .3rem !important; animation: none !important; box-shadow: none !important; }
html[data-op-glass][data-op-glass] .op-pf-tag.op-role-sm > i, html[data-op-glass][data-op-glass] .op-pf-tag.op-role-sm > .groupEmoji { width: 16px !important; height: 16px !important; font-size: .52rem !important; box-shadow: none !important; }
html[data-op-glass][data-op-glass] .op-pf-tag.op-pf-status { padding-left: .7rem !important; }
html[data-op-glass][data-op-lite] .op-pf-tag, html[data-op-glass][data-op-lite] .op-rank-title.op-rank-title-rk { animation: none !important; }
@media (prefers-reduced-motion: reduce) { html[data-op-glass][data-op-glass] .op-pf-tag, html[data-op-glass][data-op-glass] .op-rank-title.op-rank-title-rk { animation: none !important; } }
/* qw26_74: room for the rainbow #1 inside the champion pill */
html[data-op-glass][data-op-glass] .op-rank-title.op-rank-title-rk.op-rank-title-gold, html[data-op-glass][data-op-glass] .op-rank-title.op-rank-title-rk.op-rank-title-1 { padding-left: .8rem !important; }

/* ===== qw26_77: fast mode really is fast (owner: "die Seite laggt auf meinem A56 und auf manchen PCs") =====
   The eight colour clouds kept moving in fast mode (their own rules were more specific). Now they stand still there, and only four
   of them are drawn, so the background is one calm picture that costs nothing while scrolling. */
html[data-op-glass][data-op-glass][data-op-lite] .op-bgfx > i, html[data-op-glass][data-op-glass][data-op-lite] .op-bgfx > b, html[data-op-glass][data-op-glass][data-op-lite] .op-bgfx > em {
  animation: none !important; will-change: auto !important; }
html[data-op-glass][data-op-glass][data-op-lite] .op-bgfx > b, html[data-op-glass][data-op-glass][data-op-lite] .op-bgfx > em { display: none !important; }
@media (prefers-reduced-motion: reduce) { html[data-op-glass][data-op-glass] .op-bgfx > i, html[data-op-glass][data-op-glass] .op-bgfx > b, html[data-op-glass][data-op-glass] .op-bgfx > em { animation: none !important; } }

/* Liquid glass micro-interactions (2026-10-15): light travels across controls
   only on hover/focus. No continuous work, layout motion or extra blur. */
html[data-op-glass][data-op-glass] :is(.gh-btn, .gh-explore a, .op-btn-main, .btn-primary) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .38s cubic-bezier(.22, .68, .25, 1) !important;
}
html[data-op-glass][data-op-glass] :is(.gh-btn, .gh-explore a, .op-btn-main, .btn-primary)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.06) 36%, rgba(255,255,255,.28) 50%, rgba(255,255,255,.06) 64%, transparent 80%);
  opacity: 0;
  transform: translateX(-110%);
}
@keyframes opu-surface-reflection {
  0% { transform: translateX(-110%); opacity: 0; }
  25% { opacity: .85; }
  75% { opacity: .65; }
  100% { transform: translateX(110%); opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  html[data-op-glass][data-op-glass]:not([data-op-lite]) :is(.gh-btn, .gh-explore a, .op-btn-main, .btn-primary):focus-visible::after {
    animation: opu-surface-reflection .9s cubic-bezier(.22, .68, .25, 1) both;
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html[data-op-glass][data-op-glass]:not([data-op-lite]) :is(.gh-btn, .gh-explore a, .op-btn-main, .btn-primary):hover::after {
    animation: opu-surface-reflection .9s cubic-bezier(.22, .68, .25, 1) both;
  }
}
/* Focus stays visible outside the clipped reflection. */
html[data-op-glass][data-op-glass] :is(.gh-btn, .gh-explore a, .op-btn-main, .btn-primary):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
html[data-op-glass][data-op-glass][data-op-lite] :is(.gh-btn, .gh-explore a, .op-btn-main, .btn-primary) {
  transition: none !important;
  transform: none !important;
}
html[data-op-glass][data-op-glass][data-op-lite] :is(.gh-btn, .gh-explore a, .op-btn-main, .btn-primary)::after {
  content: none;
}
html[data-op-glass][data-op-glass][data-op-lite] .dropdown-menu.show { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  html[data-op-glass][data-op-glass] :is(.gh-btn, .gh-explore a, .op-btn-main, .btn-primary) {
    transition: none !important;
    transform: none !important;
  }
  html[data-op-glass][data-op-glass] :is(.gh-btn, .gh-explore a, .op-btn-main, .btn-primary)::after { content: none; }
  html[data-op-glass][data-op-glass] .dropdown-menu.show { animation: none !important; }
}

/* Requested arrival/tab blur: fade a small, constant glass blur, without
   filtering the content itself (fixed dialogs keep their viewport anchor). */
html[data-op-glass] .opu-navigation-veil {
  position: fixed;
  inset: 0;
  z-index: 1090;
  pointer-events: none;
  background: rgba(255, 255, 255, .025);
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
  animation: opu-navigation-clear .42s cubic-bezier(.22, .68, .25, 1) both;
}
@keyframes opu-navigation-clear { from { opacity: 1; } to { opacity: 0; } }
html[data-op-glass][data-op-lite] .opu-navigation-veil { display: none !important; }
@media (prefers-reduced-motion: reduce) { html[data-op-glass] .opu-navigation-veil { display: none !important; } }

/* Homepage premiere: one deliberate sequence, then all temporary styles leave.
   Only the hero's individual elements and tiles move, never the page wrapper. */
@keyframes opu-home-logo-arrive {
  from { opacity: 0; transform: translateY(28px) scale(.88); }
  45% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
@keyframes opu-home-content-arrive {
  from { opacity: 0; transform: translateY(32px) scale(.96); }
  to { opacity: 1; transform: none; }
}
@keyframes opu-home-glass-bloom {
  0% { opacity: 0; transform: scale(.55); }
  35% { opacity: .7; }
  100% { opacity: 0; transform: scale(1.25); }
}
@media (prefers-reduced-motion: no-preference) {
  html[data-op-glass]:not([data-op-lite]) .opu-home-intro .gh-hero {
    position: relative;
    isolation: isolate;
  }
  html[data-op-glass]:not([data-op-lite]) .opu-home-intro .gh-hero::before {
    content: "";
    position: absolute;
    inset: 0 5%;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255,255,255,.25), rgba(255,255,255,.06) 45%, transparent 70%);
    animation: opu-home-glass-bloom 1.6s ease-out both !important;
  }
  html[data-op-glass]:not([data-op-lite]) .opu-home-intro .gh-title {
    transform-origin: 50% 65%;
    animation: opu-home-logo-arrive 1.25s cubic-bezier(.16, .72, .24, 1) both !important;
  }
  html[data-op-glass]:not([data-op-lite]) .opu-home-intro .gh-lead {
    animation: opu-home-content-arrive .9s cubic-bezier(.16, .72, .24, 1) .25s both !important;
  }
  html[data-op-glass]:not([data-op-lite]) .opu-home-intro .gh-cta > a {
    animation: opu-home-content-arrive .8s cubic-bezier(.16, .72, .24, 1) .45s both !important;
  }
  html[data-op-glass]:not([data-op-lite]) .opu-home-intro .gh-cta > a:nth-child(2) { animation-delay: .53s !important; }
  html[data-op-glass]:not([data-op-lite]) .opu-home-intro .gh-cta > a:nth-child(3) { animation-delay: .61s !important; }
  /* owner 17.10.: the launcher banner flies in too, right after the buttons */
  html[data-op-glass]:not([data-op-lite]) .opu-home-intro .gh-launch {
    animation: opu-home-content-arrive .9s cubic-bezier(.16, .72, .24, 1) .72s both !important;
  }
  html[data-op-glass]:not([data-op-lite]) .opu-home-intro .gh-bento > .gh-tile {
    animation: opu-home-content-arrive .9s cubic-bezier(.16, .72, .24, 1) .65s both !important;
  }
  html[data-op-glass]:not([data-op-lite]) .opu-home-intro .gh-bento > .gh-tile:nth-child(2) { animation-delay: .73s !important; }
  html[data-op-glass]:not([data-op-lite]) .opu-home-intro .gh-bento > .gh-tile:nth-child(3) { animation-delay: .81s !important; }
  html[data-op-glass]:not([data-op-lite]) .opu-home-intro .gh-bento > .gh-tile:nth-child(n+4) { animation-delay: .89s !important; }
  /* A keyboard user can immediately reach a fully visible control. */
  html[data-op-glass]:not([data-op-lite]) .opu-home-intro .gh-cta > a:focus-visible,
  html[data-op-glass]:not([data-op-lite]) .opu-home-intro .gh-launch:focus-visible,
  html[data-op-glass]:not([data-op-lite]) .opu-home-intro .gh-bento > .gh-tile:focus-within { animation: none !important; }
}

/* Glass polish: crisp branding, gentler rims and more balanced hero spacing. */
html[data-op-glass][data-bs-theme][data-bs-core] {
  --opu-glass-ink: 18, 19, 24;
  --gl-fill: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.035) 48%, rgba(255,255,255,.07)), rgba(var(--opu-glass-ink), .18);
  --gl-fill-strong: linear-gradient(145deg, rgba(255,255,255,.23), rgba(255,255,255,.08) 55%, rgba(255,255,255,.14));
  --gl-edge: inset 0 1px 0 rgba(255,255,255,.44), inset 0 0 0 1px rgba(255,255,255,.12), inset 0 -1px 0 rgba(255,255,255,.07);
  --gl-shadow: 0 16px 42px -26px rgba(0,0,0,.65);
}
/* The old turbulence filter made the letters look frayed. Keep their contours
   sharp and let the existing rainbow reflection move at a calmer pace. */
html[data-op-glass][data-op-glass] .op-rainbow-logo {
  filter: none !important;
  text-shadow: none !important;
  transform: none !important;
  animation: opu-logo-glass 14s linear infinite !important;
}
html[data-op-glass][data-op-glass] .gh-hero {
  padding-top: clamp(2.8rem, 5vw, 4rem);
  padding-bottom: clamp(2.8rem, 4vw, 3.6rem);
}
html[data-op-glass][data-op-glass] .gh-title { margin-bottom: 1rem !important; }
html[data-op-glass][data-op-glass] .gh-lead {
  max-width: 600px;
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
  line-height: 1.65;
  color: rgba(245,245,247,.82);
  text-wrap: pretty;
}
html[data-op-glass][data-op-glass] .gh-cta { gap: .75rem; margin-top: 1.8rem; }
html[data-op-glass][data-op-glass] .gh-btn { min-height: 44px; justify-content: center; }
html[data-op-glass][data-op-glass] :is(.gh-btn-main, .btn-primary, .op-btn-main) {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 8px 22px -14px rgba(0,0,0,.5) !important;
}
html[data-op-glass][data-op-glass] .gh-kicker { letter-spacing: .075em; color: rgba(245,245,247,.76); }
html[data-op-glass][data-op-glass] .gh-card-body { padding: 1.1rem 1.15rem 1.15rem; }
html[data-op-glass][data-op-glass] .gh-row-head { margin-bottom: 1.1rem; }
html[data-op-glass][data-op-glass][data-op-lite] .op-rainbow-logo { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  html[data-op-glass][data-op-glass] .op-rainbow-logo { animation: none !important; }
}

/* Kuroosu clean logo (owner 18.10.: "cleaner, too much, without gradient"): the wordmark is plain white, no colours, no light streak.
   On the home page it only floats a little. */
html[data-op-glass] .op-rainbow-logo { background: none !important; color: #fff; -webkit-text-fill-color: #fff; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .3)); animation: none; }
html[data-op-glass]:not([data-op-lite]) .gh-title .op-rainbow-logo { animation: opu-logo-float 7s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { html[data-op-glass]:not([data-op-lite]) .gh-title .op-rainbow-logo { animation: none; } }

/* navbar logo circle: only shown by the Rhythia look (osupompa-rhythia-v1.css) */
html[data-op-glass]:not([data-op-rh]) .op-nav .op-nav-logo, html[data-op-glass]:not([data-op-rh]) .gh-hero-logo { display: none; }