/* Kuroosu "Rhythia" look (owner 18.10.2026: "bau die ganze Website im Rhythia-Look um, alle Seiten, nichts entfernen",
   preview branding/rhythia/preview-v1.html = profile draft G from branding/profile/preview-v3.html for every page).
   Loaded after osupompa-glass-v1.css (glass stays the base, nothing is removed). Look: one calm column, box under box,
   boxes with a thin rim and a header bar separated by a 1 px line, small chips instead of big pills, quiet wallpaper,
   colour only from grades, rank stones, flags and what players picked. The page is in html[data-op-page] (= actNav).
   Switched on by html[data-op-rh] (base.html, for everyone with the Glass design since qw26_93). */

html[data-op-rh] {
  /* owner 18.10. (after it went live): "es ist nicht schwarz" -> black page, solid dark boxes, no glass shine */
  --rh-fill: #121216;
  --rh-soft: rgba(255, 255, 255, .05);
  --rh-soft2: rgba(255, 255, 255, .085);
  --rh-edge: inset 0 0 0 1px rgba(255, 255, 255, .07);
  --rh-line: rgba(255, 255, 255, .07);
  --rh-mut: #9d9daa;
  --rh-r: 22px;
  --rh-rs: 12px;
  --gl-fill: var(--rh-fill);
  --gl-edge: var(--rh-edge);
  --gl-radius: var(--rh-r);
  --gl-shadow: 0 18px 44px -30px rgba(0, 0, 0, .7);
}
/* black page (no coloured wallpaper) */
/* 4x the attribute: beats the Glass wallpaper rules for the colour themes (html[data-op-glass][data-bs-theme][data-op-theme]) */
html[data-op-rh][data-op-rh][data-op-rh][data-bs-theme], html[data-op-rh][data-bs-theme] body { background: #09090b !important; }
/* owner 18.10.: "ganz oben ist da so eine Bar, mach die weg" (the scroll progress line) */
html[data-op-rh] .op-scrollbar { display: none !important; }
html[data-op-rh] .op-bgfx { display: none !important; }

/* ---------- one column ---------- */
html[data-op-rh] .wrapper .container,
html[data-op-rh] .wrapper .container-xxl { max-width: 1040px; }
/* pages that need the width keep it: chat, admin-like tools, wrapped, compare, tournaments brackets */
html[data-op-rh][data-op-page="20"] .wrapper .container,
html[data-op-rh] .wrapper .container.op-chat,
html[data-op-rh] .wrapper .container.op-bracket { max-width: 1320px; }

/* ---------- menu bar ---------- */
html[data-op-rh] .op-nav { border-radius: 16px !important; padding: 6px 8px !important;
  background: rgba(16, 16, 20, .94) !important; box-shadow: var(--rh-edge) !important; }
html[data-op-rh] .op-nav .op-nav-brand { display: inline-flex; align-items: center; gap: 9px; }
html[data-op-rh] .op-nav .op-nav-logo { width: 32px; height: 32px; border-radius: 50%; flex: none; }
html[data-op-rh] .op-nav .op-logo-text { font-size: 1.25rem !important; }
html[data-op-rh] .op-nav .nav-link { border-radius: 9px !important; padding: 7px 11px !important; font-size: .84rem !important; font-weight: 600 !important; white-space: nowrap; }
html[data-op-rh] .op-nav .nav-link > i { display: none; }
html[data-op-rh] .op-nav .nav-link.active, html[data-op-rh] .op-nav .nav-link.show { background: var(--rh-soft2) !important; box-shadow: none !important; color: #fff !important; }
@media (max-width: 1399.98px) { html[data-op-rh] .op-nav .nav-link > i { display: inline-block; } }

/* ---------- boxes ---------- */
html[data-op-rh] .op-panel,
html[data-op-rh] .op-pf-section,
html[data-op-rh] .card:not(.modal .card),
html[data-op-rh] .op-set-card,
html[data-op-rh] .op-fr-card,
html[data-op-rh] .gh-tile {
  border-radius: var(--rh-r) !important;
  background: var(--rh-fill) !important;
  box-shadow: var(--rh-edge) !important;
  border: 0 !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-op-rh] .op-panel-head,
html[data-op-rh] .card > .card-header {
  position: relative; padding: 14px 18px !important; font-weight: 700; font-size: .95rem; background: transparent !important; border: 0 !important;
}
html[data-op-rh] .op-panel-head::after,
html[data-op-rh] .card > .card-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rh-line); }
html[data-op-rh] .op-panel-head i, html[data-op-rh] .card > .card-header i { color: var(--rh-mut); }

/* small uppercase labels like "PLAY COUNT" */
html[data-op-rh] .op-pf-stat small,
html[data-op-rh] .op-lbx-head,
html[data-op-rh] .op-kicker { font-size: .66rem !important; letter-spacing: .07em !important; text-transform: uppercase; color: var(--rh-mut) !important; font-weight: 600 !important; }

/* ---------- buttons = chips ---------- */
html[data-op-rh] .op-btn,
html[data-op-rh] .gh-btn {
  border-radius: 10px !important; min-height: 34px; padding: 0 14px !important; font-size: .84rem !important; font-weight: 700 !important;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--rh-soft) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08) !important; color: #f0f0f4 !important; transform: none !important;
}
html[data-op-rh] .op-btn:hover, html[data-op-rh] .gh-btn:hover { background: rgba(255, 255, 255, .11) !important; }
html[data-op-rh] .op-btn-main,
html[data-op-rh] .gh-btn-main { background: #f5f5f7 !important; color: #0b0b10 !important; box-shadow: none !important; }
html[data-op-rh] .op-btn-main i, html[data-op-rh] .gh-btn-main i { color: #0b0b10 !important; }
html[data-op-rh] .op-btn-main:hover, html[data-op-rh] .gh-btn-main:hover { background: #fff !important; }
/* Play button white with black text (owner 18.10.: "mach den Play-Button weiß und schwarz"), the other hero buttons are dark chips */
html[data-op-rh] .gh-btn.gh-btn-play { border-radius: 10px !important; background: #f5f5f7 !important; color: #0b0b10 !important; box-shadow: none !important; animation: none !important; }
html[data-op-rh] .gh-btn.gh-btn-play::before, html[data-op-rh] .gh-btn.gh-btn-play::after { display: none !important; }
html[data-op-rh] .gh-btn.gh-btn-play i { color: #0b0b10 !important; }
html[data-op-rh] .gh-btn.gh-btn-play:hover { background: #fff !important; }
html[data-op-rh] .gh-hero .gh-btn-main:not(.gh-btn-play) { background: var(--rh-soft) !important; color: #f0f0f4 !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08) !important; }
html[data-op-rh] .gh-hero .gh-btn-main:not(.gh-btn-play) i { color: #f0f0f4 !important; }

/* ---------- inputs ---------- */
html[data-op-rh] .op-input, html[data-op-rh] .form-control, html[data-op-rh] .form-select {
  border-radius: 10px !important; background: rgba(255, 255, 255, .045) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09) !important; border: 0 !important;
}

/* ---------- score rows (fable.js loadScorePanel, Rhythia row: grade strip + accuracy | title | tags) ---------- */
html[data-op-rh] .op-sc.op-sc-rh {
  display: flex !important; align-items: center; gap: 12px; min-height: 52px; padding: 0 10px 0 0 !important; margin: 0 0 10px !important;
  border-radius: 14px !important; background: rgba(255, 255, 255, .035) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06) !important;
  overflow: hidden; position: relative; isolation: isolate; transform: none !important;
}
html[data-op-rh] .op-sc.op-sc-rh:hover { background: rgba(255, 255, 255, .06) !important; }
html[data-op-rh] .op-sc-rh .op-sc-bg { position: absolute; inset: 0 auto 0 0; width: 46%; z-index: -1; background-size: cover; background-position: center; opacity: .13;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent); mask-image: linear-gradient(90deg, #000, transparent); filter: none !important; transform: none !important; }
html[data-op-rh] .op-sc-rh .op-sc-link { position: absolute; inset: 0; z-index: 1; }
html[data-op-rh] .op-sc-rh .rh-acc { display: flex; align-items: center; gap: 9px; width: 124px; flex: none; align-self: stretch; padding: 0 12px 0 14px; position: relative;
  font-weight: 800; font-variant-numeric: tabular-nums; font-size: .92rem; }
/* owner 29.10.2026: no coloured grade line at the left any more - the grade is the picture now */
html[data-op-rh] .op-sc-rh .rh-acc::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 1px; background: var(--rh-line); }
html[data-op-rh] .op-sc-rh .rh-g { flex: none; width: 30px; height: 30px; display: grid; place-items: center; overflow: visible; color: var(--gc, #8a8a96); }
html[data-op-rh] .op-sc-rh .rh-g img { display: block; height: 26px; width: auto; max-width: none; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .55)); }
html[data-op-rh] .op-sc-rh .rh-g i { font-size: 1rem; }
html[data-op-rh] .op-sc-rh .op-sc-info { flex: 1; min-width: 0; }
html[data-op-rh] .op-sc-rh .op-sc-title { font-size: .86rem !important; font-weight: 600 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-op-rh] .op-sc-rh .rh-sub { color: var(--rh-mut); font-size: .72rem; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-op-rh] .op-sc-rh .rh-sub i { font-size: .62rem; }
html[data-op-rh] .op-sc-rh .rh-tags { display: flex; gap: 6px; flex: none; align-items: center; }
html[data-op-rh] .op-sc-rh .rh-tag { min-width: 38px; height: 36px; padding: 0 7px; border-radius: 9px; display: grid; place-items: center; align-content: center;
  font-size: .68rem; font-weight: 700; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); line-height: 1.15; text-align: center; white-space: nowrap; }
html[data-op-rh] .op-sc-rh .rh-tag.mod { font-size: .74rem; font-weight: 800; letter-spacing: .02em; }
html[data-op-rh] .op-sc-rh .rh-tag.miss { box-shadow: inset 0 0 0 1px rgba(255, 107, 107, .45); }
html[data-op-rh] .op-sc-rh .rh-tag.miss i { color: #ff7b7b; font-size: .72rem; }
html[data-op-rh] .op-sc-rh .rh-tag.pp { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); min-width: 46px; }
html[data-op-rh] .op-sc-rh .rh-tag.pp small { font-size: .58rem; color: var(--rh-mut); font-weight: 700; display: block; }
html[data-op-rh] .op-sc-rh .rh-tag.fc { box-shadow: inset 0 0 0 1px rgba(124, 245, 176, .45); color: #9af0c2; }
html[data-op-rh] .op-sc-rh .rh-tag.lz { text-transform: none; opacity: .8; }
html[data-op-rh] .op-sc-rh .op-sc-weight, html[data-op-rh] .op-sc-rh .op-sc-views { position: static !important; font-size: .68rem; color: var(--rh-mut); white-space: nowrap; }
html[data-op-rh] .op-sc-rh .op-sc-pin, html[data-op-rh] .op-sc-rh .op-sc-replay { position: relative !important; z-index: 2; inset: auto !important; width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center; background: transparent; border: 0; color: var(--rh-mut) !important; opacity: 1 !important; transform: none !important; flex: none; }
html[data-op-rh] .op-sc-rh .op-sc-pin:hover, html[data-op-rh] .op-sc-rh .op-sc-replay:hover { background: var(--rh-soft); color: #fff !important; }
html[data-op-rh] .op-sc-rh .op-sc-pin.op-pinned { color: #fff !important; }
@media (max-width: 700px) {
  html[data-op-rh] .op-sc-rh .rh-acc { width: 108px; padding: 0 8px 0 10px; font-size: .84rem; gap: 5px; }
  html[data-op-rh] .op-sc-rh { gap: 8px; padding-right: 6px !important; }
  html[data-op-rh] .op-sc-rh .rh-tag.mod, html[data-op-rh] .op-sc-rh .rh-tag.miss, html[data-op-rh] .op-sc-rh .rh-tag.fc, html[data-op-rh] .op-sc-rh .rh-tag.lz,
  html[data-op-rh] .op-sc-rh .op-sc-weight, html[data-op-rh] .op-sc-rh .op-sc-views { display: none; }
}

/* ---------- leaderboards: filters on top as chips, rows like Rhythia ---------- */
html[data-op-rh] .op-lbx-lay { display: block !important; }
/* owner 18.10.: "was ist das für ein Salat" -> each filter group is one segmented bar with a small label; Country gets its own row and scrolls */
html[data-op-rh] .op-lbx-side { position: static !important; width: auto !important; max-height: none !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap;
  gap: 10px 18px; align-items: center; justify-content: flex-start !important;
  padding: 12px 14px !important; margin: 0 0 16px !important; border-radius: var(--rh-r) !important; background: var(--rh-fill) !important; box-shadow: var(--rh-edge) !important; }
html[data-op-rh] .op-lbx-grp { display: flex; align-items: center; gap: 10px; min-width: 0; }
html[data-op-rh] .op-lbx-grp:last-child { flex-basis: 100%; }
html[data-op-rh] .op-lbx-side h3 { margin: 0 !important; padding: 0 !important; width: 58px !important; flex: none; font-size: .66rem !important; letter-spacing: .07em; text-transform: uppercase; color: var(--rh-mut) !important; font-weight: 600 !important; }
html[data-op-rh] .op-lbx-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  min-width: 0; overflow-x: auto; scrollbar-width: none; }
html[data-op-rh] .op-lbx-seg::-webkit-scrollbar { display: none; }
html[data-op-rh] .op-lbx-side .op-lbx-opt { display: inline-flex !important; align-items: center; gap: 7px; height: 30px; padding: 0 11px !important; border-radius: 8px !important; width: auto !important; flex: none;
  background: transparent !important; box-shadow: none !important; border: 0 !important; font-size: .8rem !important; font-weight: 600 !important; color: #c9c9d3 !important; margin: 0 !important; white-space: nowrap; }
html[data-op-rh] .op-lbx-side .op-lbx-opt:hover { background: rgba(255, 255, 255, .06) !important; color: #fff !important; }
html[data-op-rh] .op-lbx-side .op-lbx-opt.active { background: #f5f5f7 !important; color: #0b0b10 !important; }
html[data-op-rh] .op-lbx-side .op-lbx-opt.active i { color: #0b0b10 !important; }
html[data-op-rh] .op-lbx-side .op-lbx-opt.active img:not(.op-lbx-flag) { filter: invert(1); }
html[data-op-rh] .op-lbx-side .op-lbx-opt:disabled { opacity: .35; }
html[data-op-rh] .op-lbx-side .op-lbx-opt img { width: 16px; height: 16px; }
html[data-op-rh] .op-lbx-side .op-lbx-opt .op-lbx-flag { width: 20px; height: 14px; border-radius: 3px; }
@media (max-width: 700px) {
  html[data-op-rh] .op-lbx-grp { flex-basis: 100%; }
  html[data-op-rh] .op-lbx-side h3 { width: 50px !important; }
}
html[data-op-rh] .op-lbx-row:not(.op-lbx-head) { border-radius: 12px !important; background: rgba(255, 255, 255, .035) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06) !important; margin-bottom: 8px !important; }
html[data-op-rh] .op-lbx-row:not(.op-lbx-head):hover { background: rgba(255, 255, 255, .06) !important; }
html[data-op-rh] .op-lbx-row.op-lbx-top1 { box-shadow: inset 3px 0 0 #ffd25e, inset 0 0 0 1px rgba(255, 255, 255, .06) !important; }
html[data-op-rh] .op-lbx-row.op-lbx-top2 { box-shadow: inset 3px 0 0 #d9dde6, inset 0 0 0 1px rgba(255, 255, 255, .06) !important; }
html[data-op-rh] .op-lbx-row.op-lbx-top3 { box-shadow: inset 3px 0 0 #e3a06b, inset 0 0 0 1px rgba(255, 255, 255, .06) !important; }
html[data-op-rh] .op-lbx-row.op-lbx-me { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3) !important; }

/* ---------- profile = draft G ---------- */
html[data-op-rh] .op-pfa-cols { display: block !important; }
html[data-op-rh] .op-pfa-col { width: auto !important; max-width: none !important; }
html[data-op-rh] .op-pf-section { padding: 0 0 6px !important; margin-bottom: 16px !important; overflow: hidden; }
html[data-op-rh] .op-pf-section > .d-flex:first-child,
html[data-op-rh] .op-pf-section > div > .d-flex:first-child { position: relative; margin: 0 0 12px !important; padding: 14px 18px !important; }
html[data-op-rh] .op-pf-section > .d-flex:first-child::after,
html[data-op-rh] .op-pf-section > div > .d-flex:first-child::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rh-line); }
html[data-op-rh] .op-pf-section h5 { color: #fff !important; text-transform: none !important; letter-spacing: 0 !important; font-size: .95rem !important; font-weight: 700 !important; }
html[data-op-rh] .op-pf-section h5 i { color: var(--rh-mut) !important; }
html[data-op-rh] .op-pf-section > .d-flex:first-child > .flex-grow-1 { visibility: hidden; }
html[data-op-rh] .op-pf-section .row { margin-left: 18px !important; margin-right: 18px !important; }
html[data-op-rh] .op-pf-section .row > * { padding-left: 0; padding-right: 0; }

html[data-op-rh] .op-pf-header { border-radius: var(--rh-r) !important; overflow: hidden; background: var(--rh-fill) !important; box-shadow: var(--rh-edge) !important; }
/* owner 18.10.: "Banner mehr runter, Profilbild und Name sollen auf dem Banner liegen" -> tall cover, picture + name sit on its lower part */
html[data-op-rh] .op-pf-cover { height: 270px !important; min-height: 0 !important; }
html[data-op-rh] .op-pf-cover::after { background: linear-gradient(180deg, rgba(18, 18, 22, 0) 30%, rgba(18, 18, 22, .55) 62%, rgba(18, 18, 22, .97) 100%) !important; }
html[data-op-rh] .op-pf-info { position: relative; z-index: 2; margin-top: -168px !important; padding: 0 18px 14px !important; align-items: flex-end !important; }
html[data-op-rh] .op-pf-id { padding-top: 0 !important; }
html[data-op-rh] .op-pf-actions { align-self: flex-end !important; padding-top: 0 !important; padding-bottom: 6px !important; }
html[data-op-rh] .op-pf-avatar-wrap { width: 118px !important; height: 118px !important; flex: none; }
html[data-op-rh] .op-pf-avatar-wrap img { border-radius: 22px !important; box-shadow: 0 0 0 4px rgba(20, 20, 28, .9) !important; }
html[data-op-rh] .op-pf-rhstrip { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 0 16px 10px 150px; position: relative; margin-top: -4px; }
html[data-op-rh] .op-pf-rhstrip::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rh-line); }
html[data-op-rh] .op-pf-rhstrip .op-mode-bar, html[data-op-rh] .op-pf-rhstrip .op-modebar { position: static !important; margin: 0 !important; transform: none !important; }
html[data-op-rh] .op-pf-bar, html[data-op-rh] .op-pf-stats { position: relative; }
html[data-op-rh] .op-pf-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rh-line); }
@media (max-width: 991.98px) {
  html[data-op-rh] .op-pf-id { flex-basis: 100% !important; }
  html[data-op-rh] .op-pf-cover { height: 230px !important; }
  html[data-op-rh] .op-pf-info { margin-top: -120px !important; align-items: flex-start !important; }
}
@media (max-width: 700px) {
  html[data-op-rh] .op-pf-info { margin-top: -110px !important; }
  html[data-op-rh] .op-pf-avatar-wrap { width: 86px !important; height: 86px !important; }
  html[data-op-rh] .op-pf-rhstrip { padding-left: 14px; }
}

/* ---------- home: the hero is a box (logo circle, name, text | chips), the tiles are boxes in two columns ---------- */
html[data-op-rh] .gh-hero { max-width: 1016px; margin: 18px auto 16px !important; padding: 22px 22px 0 !important; border-radius: var(--rh-r); background: var(--rh-fill); box-shadow: var(--rh-edge);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); display: grid !important; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-items: center; text-align: left !important; min-height: 0 !important; }
html[data-op-rh] .gh-hero > * { margin-left: 0 !important; margin-right: 0 !important; }
html[data-op-rh] .gh-hero .gh-hero-logo { grid-row: span 2; width: 104px; height: 104px; border-radius: 50%; box-shadow: 0 0 0 4px rgba(20, 20, 28, .9); }
html[data-op-rh] .gh-hero .gh-title { margin: 0 !important; line-height: 1 !important; }
html[data-op-rh] .gh-hero .gh-title .op-rainbow-logo { font-size: 2.7rem !important; padding-bottom: .25em !important; animation: none !important; transform: none !important; }
html[data-op-rh] .gh-hero .gh-lead { margin: 0 !important; max-width: 560px !important; font-size: .92rem !important; color: #c9c9d3 !important; }
html[data-op-rh] .gh-hero .gh-cta { grid-column: 1 / -1; justify-content: flex-start !important; margin: 18px -22px 0 !important; padding: 12px 22px !important; position: relative; gap: 8px !important; }
html[data-op-rh] .gh-hero .gh-cta::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rh-line); }
html[data-op-rh] .gh-hero .gh-launch { grid-column: 1 / -1; margin: 0 -22px !important; max-width: none !important; width: auto !important; border-radius: 0 0 var(--rh-r) var(--rh-r) !important;
  background: transparent !important; box-shadow: none !important; padding: 12px 22px 16px !important; position: relative; transform: none !important; animation: none !important; }
html[data-op-rh] .gh-hero .gh-launch::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rh-line); }
html[data-op-rh] .gh-bento { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; grid-auto-rows: minmax(190px, auto) !important; }
html[data-op-rh] .gh-bento > .gh-day { grid-column: 1 / -1 !important; }
html[data-op-rh] .gh-bento > * { border-radius: var(--rh-r) !important; }
html[data-op-rh] .gh-kicker { font-size: .66rem !important; letter-spacing: .07em !important; color: var(--rh-mut) !important; }
html[data-op-rh] .gh-two { gap: 16px !important; margin-top: 2.4rem !important; }
html[data-op-rh] .gh-explore a, html[data-op-rh] .gh-chips a { border-radius: 10px !important; }
@media (max-width: 760px) {
  html[data-op-rh] .gh-hero { grid-template-columns: minmax(0, 1fr); text-align: left; margin: 12px 12px 16px !important; }
  html[data-op-rh] .gh-hero .gh-hero-logo { grid-row: auto; width: 78px; height: 78px; margin-bottom: 8px !important; }
  html[data-op-rh] .gh-bento { grid-template-columns: minmax(0, 1fr) !important; }
}

/* footer in the same column */
html[data-op-rh] .op-gfoot { max-width: 1016px; margin-left: auto !important; margin-right: auto !important; border-radius: var(--rh-r) !important; }

/* ---------- black also on profiles with Supporter colours ----------
   The player's profile colour stays as an accent (name, numbers, edge line), the boxes stay black.
   The Supporter profile background only fills the top of the page and fades into the black. */
html[data-op-rh] .op-pf-custom .op-pf-header,
html[data-op-rh] .op-pf-custom .op-pf-section,
html[data-op-rh] .op-pf-custom .op-pf-bar,
html[data-op-rh] .op-pf-custom .op-pf-stats { background: var(--rh-fill) !important; background-image: none !important; }
html[data-op-rh] .op-pf-custom .op-pf-header, html[data-op-rh] .op-pf-custom .op-pf-section { box-shadow: var(--rh-edge) !important; border: 0 !important; }
html[data-op-rh] .op-pf-custom .op-pf-section .op-sc-rh { background: rgba(255, 255, 255, .035) !important; }
html[data-op-rh] .op-pfbg { position: absolute !important; inset: 0 0 auto 0 !important; height: 560px !important;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .6) 45%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .6) 45%, transparent 100%); opacity: .55; }
html[data-op-rh] .op-pf-bar, html[data-op-rh] .op-pf-stats { background: transparent !important; }

/* ---------- nothing on top of each other ---------- */
/* leaderboards have many columns: a bit wider, the player cell cuts long names/tags instead of running into the pp */
html[data-op-rh] .wrapper .container.op-lbx { max-width: 1240px; }
/* owner 18.10.: the name was cut to "r..." - the name always stays whole, extra badges at the end fade out instead */
html[data-op-rh] .op-lbx-pl { overflow: hidden !important; min-width: 0 !important;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
html[data-op-rh] .op-lbx-pl > * { flex-shrink: 0 !important; }
html[data-op-rh] .op-lbx-pl .op-lbx-name { flex-shrink: 0 !important; overflow: visible !important; white-space: nowrap; max-width: none !important; }
/* profile: the picture is as big as its place, so it never covers the name */
html[data-op-rh] .op-pf-avatar { width: 118px !important; height: 118px !important; border-radius: 22px !important; }
@media (max-width: 700px) { html[data-op-rh] .op-pf-avatar { width: 86px !important; height: 86px !important; } }

/* score rows: pp sits in the left block now (small "pp"), the right tag shows the accuracy */
html[data-op-rh] .op-sc-rh .rh-acc small { font-size: .66rem; font-weight: 700; color: var(--rh-mut); margin-left: 1px; }

/* role badges (Owner, Developer, Moderator ...) and the other profile tags: flat chips, colour only on the edge and the icon */
html[data-op-rh][data-op-rh] .op-pf-tag.op-role { --rc: #e8e8f0; background: rgba(255, 255, 255, .05) !important; background-image: none !important; color: #f0f0f4 !important; border: 0 !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 50%, transparent) !important; text-shadow: none !important; filter: none !important; animation: none !important; border-radius: 8px !important; }
html[data-op-rh][data-op-rh] .op-pf-tag.op-role::before, html[data-op-rh][data-op-rh] .op-pf-tag.op-role::after { display: none !important; }
html[data-op-rh][data-op-rh] .op-pf-tag.op-role > i { background: none !important; color: var(--rc) !important; box-shadow: none !important; width: auto !important; height: auto !important; }
html[data-op-rh] .op-role-owner { --rc: #f5c542 !important; }
html[data-op-rh] .op-role-co-owner { --rc: #c99cff !important; }
html[data-op-rh] .op-role-admin, html[data-op-rh] .op-role-administrator { --rc: #ff7b7b !important; }
html[data-op-rh] .op-role-moderator, html[data-op-rh] .op-role-mod { --rc: #6cc8ff !important; }
html[data-op-rh] .op-role-developer, html[data-op-rh] .op-role-dev { --rc: #7cf5a0 !important; }
html[data-op-rh] .op-role-nominator, html[data-op-rh] .op-role-beatmap-nominator { --rc: #ffb36b !important; }
html[data-op-rh] .op-role-helper { --rc: #9ef0c2 !important; }

/* owner 18.10.: "mach das Skill-Widget weg" (profile skills radar) */
html[data-op-rh] .op-skills-wrap { display: none !important; }

/* mode bar on the (now tall) banner: dark pills so it stays readable on light banners, active = white */
html[data-op-rh] .op-pf-cover .op-modebar .op-seg { background: rgba(10, 10, 14, .72) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 11px !important; padding: 3px !important; }
html[data-op-rh] .op-pf-cover .op-modebar .op-seg-btn { color: #d6d6de !important; opacity: 1 !important; border-radius: 8px !important; background: transparent !important; box-shadow: none !important; }
html[data-op-rh] .op-pf-cover .op-modebar .op-seg-btn.active { background: #f5f5f7 !important; color: #0b0b10 !important; }
html[data-op-rh] .op-pf-cover .op-modebar .op-seg-btn.active i { color: #0b0b10 !important; }
html[data-op-rh] .op-pf-cover .op-modebar .op-seg-btn.active img { filter: invert(1); }

/* ===== owner 18.10.2026: "kein Liquid Glass mehr, nirgendwo" ===== */
html[data-op-rh] *, html[data-op-rh] *::before, html[data-op-rh] *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html[data-op-rh][data-op-rh] .dropdown-menu,
html[data-op-rh][data-op-rh] .op-nav .dropdown-menu,
html[data-op-rh][data-op-rh] .op-theme-menu,
html[data-op-rh][data-op-rh] .modal-content,
html[data-op-rh] .popover,
html[data-op-rh] .toast,
html[data-op-rh] .op-pop,
html[data-op-rh] .op-hovercard, html[data-op-rh] .op-hc {
  background: #141418 !important; background-image: none !important; border: 0 !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 40px -18px rgba(0, 0, 0, .8) !important; border-radius: 14px !important;
}
html[data-op-rh] .dropdown-item { border-radius: 8px !important; background: transparent !important; box-shadow: none !important; }
html[data-op-rh] .dropdown-item:hover, html[data-op-rh] .dropdown-item:focus { background: rgba(255, 255, 255, .06) !important; }
html[data-op-rh] .dropdown-item > i, html[data-op-rh] .dropdown-item > .fa-solid { background: none !important; box-shadow: none !important; color: var(--rh-mut) !important; }
html[data-op-rh] .op-pf-cover .op-modebar .op-seg { background: rgba(10, 10, 14, .86) !important; }

/* profile tags (Supporter, Germany, On the website, ranked titles ...): flat chips like the rest of the site */
html[data-op-rh][data-op-rh] .op-pf-tag:not(.op-role) {
  background: rgba(255, 255, 255, .05) !important; background-image: none !important; color: #e6e6ec !important; border: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1) !important; text-shadow: none !important; filter: none !important; animation: none !important; border-radius: 8px !important;
}
html[data-op-rh][data-op-rh] .op-pf-tag:not(.op-role)::before, html[data-op-rh][data-op-rh] .op-pf-tag:not(.op-role)::after { display: none !important; }
html[data-op-rh][data-op-rh] .op-pf-tag > i, html[data-op-rh][data-op-rh] .op-pf-tag > .op-pf-tag-ic { background: none !important; box-shadow: none !important; width: auto !important; height: auto !important; }
html[data-op-rh] .op-pf-followers, html[data-op-rh] .op-pf-actions .btn, html[data-op-rh] .op-pf-actions .op-btn {
  background: rgba(255, 255, 255, .05) !important; background-image: none !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1) !important; border: 0 !important; border-radius: 10px !important; text-shadow: none !important;
}
html[data-op-rh] .op-rank-title { background-image: none !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12) !important; background-color: rgba(255, 255, 255, .05) !important; border-radius: 8px !important; }

/* owner 18.10.: profile music button gone */
html[data-op-rh] .op-pf-music { display: none !important; }

/* owner 18.10.: leaderboard filters in the middle */
html[data-op-rh] .op-lbx-side { justify-content: center !important; }
html[data-op-rh] .op-lbx-grp:last-child { flex-basis: auto; max-width: 100%; }
/* language button = just the flag */
html[data-op-rh] .op-theme-btn { background: rgba(255, 255, 255, .05) !important; background-image: none !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1) !important; border: 0 !important; border-radius: 10px !important; padding: 0 10px !important; height: 34px; }
html[data-op-rh] .op-theme-btn > i, html[data-op-rh] .op-theme-btn .op-theme-btn-label { display: none !important; }
html[data-op-rh] .op-lang-only .op-theme-menu { width: 300px !important; padding: 12px !important; }
html[data-op-rh][data-op-rh] .op-lang-opt { background: rgba(255, 255, 255, .04) !important; background-image: none !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07) !important; border: 0 !important; border-radius: 10px !important; }
html[data-op-rh][data-op-rh] .op-lang-opt.active { background: #f5f5f7 !important; color: #0b0b10 !important; }

/* ===== owner 18.10. (again): "es ist immer noch Liquid Glass" - the rest of the glass goes ===== */
html[data-op-rh], html[data-op-rh][data-bs-theme][data-bs-core] {
  --gl-fill: #121216; --gl-fill-strong: #18181d; --gl-edge: inset 0 0 0 1px rgba(255, 255, 255, .07); --gl-shadow: none; --gl-blur: none; --gl-radius: 16px;
}
/* menu bar: flag, chat and bell are only the symbol, nothing behind them */
html[data-op-rh][data-op-rh] .op-theme-btn,
html[data-op-rh][data-op-rh] .op-bell-btn {
  background: transparent !important; background-image: none !important; box-shadow: none !important; border: 0 !important; width: auto !important; min-width: 34px; height: 34px; padding: 0 6px !important; border-radius: 8px !important;
}
html[data-op-rh][data-op-rh] .op-bell-btn > i { font-size: 1.05rem; color: #d6d6de; }
html[data-op-rh][data-op-rh] .op-bell-btn:hover > i { color: #fff; }
html[data-op-rh][data-op-rh] .op-theme-btn:hover, html[data-op-rh][data-op-rh] .op-bell-btn:hover { background: rgba(255, 255, 255, .06) !important; }
html[data-op-rh] .op-theme-btn .op-theme-flag { width: 24px !important; height: 17px !important; border-radius: 3px; box-shadow: none !important; }
/* menu icons: plain grey icons instead of coloured glossy circles */
html[data-op-rh][data-op-rh] .op-nav .dropdown-item > i[class*="fa-"],
html[data-op-rh][data-op-rh] .op-nav-links .nav-link > i[class*="fa-"] {
  background: none !important; box-shadow: none !important; text-shadow: none !important; color: var(--rh-mut) !important; width: 18px !important; height: auto !important; line-height: inherit !important;
  font-size: .82rem !important; transform: none !important; border-radius: 0 !important;
}
html[data-op-rh][data-op-rh] .op-nav .dropdown-item > i[class*="fa-"]::after, html[data-op-rh][data-op-rh] .op-nav-links .nav-link > i[class*="fa-"]::after { display: none !important; }
html[data-op-rh][data-op-rh] .op-nav .dropdown-item:hover > i[class*="fa-"] { color: #fff !important; }
/* chat page */
html[data-op-rh][data-op-rh] .op-chat-side, html[data-op-rh][data-op-rh] .op-chat-main {
  background: #121216 !important; background-image: none !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07) !important; border: 0 !important; border-radius: 16px !important; animation: none !important;
}
html[data-op-rh][data-op-rh] .op-chat-side button, html[data-op-rh][data-op-rh] .op-chat-sidebtns > *, html[data-op-rh][data-op-rh] .op-chat-search,
html[data-op-rh][data-op-rh] .op-chat-notify, html[data-op-rh][data-op-rh] .op-chat-newgroup, html[data-op-rh][data-op-rh] .op-chat-tool, html[data-op-rh][data-op-rh] .op-chat-callbtn,
html[data-op-rh][data-op-rh] .op-chat-more, html[data-op-rh][data-op-rh] .op-chat-form, html[data-op-rh][data-op-rh] .op-chat-input {
  background: rgba(255, 255, 255, .04) !important; background-image: none !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08) !important; border: 0 !important; border-radius: 10px !important; text-shadow: none !important;
}
html[data-op-rh][data-op-rh] .op-chat-item { background: transparent !important; box-shadow: none !important; border-radius: 10px !important; }
html[data-op-rh][data-op-rh] .op-chat-item:hover, html[data-op-rh][data-op-rh] .op-chat-item.active { background: rgba(255, 255, 255, .06) !important; }
html[data-op-rh][data-op-rh] .op-chat-av, html[data-op-rh][data-op-rh] .op-chat-av img { box-shadow: none !important; }
/* footer */
html[data-op-rh][data-op-rh] .op-gfoot { background: #121216 !important; background-image: none !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07) !important; border: 0 !important; border-radius: 16px !important; }
/* everything with a glossy top line / inner shine: gone */
html[data-op-rh] .op-gfoot::before, html[data-op-rh] .op-gfoot::after, html[data-op-rh] .op-chat-side::before, html[data-op-rh] .op-chat-main::before { display: none !important; }
/* found by scanning every public page for white gloss gradients / bright inner top edges (18.10.) */
html[data-op-rh][data-op-rh] .form-control, html[data-op-rh][data-op-rh] .form-select, html[data-op-rh][data-op-rh] input:not([type=checkbox]):not([type=radio]):not([type=range]), html[data-op-rh][data-op-rh] textarea, html[data-op-rh][data-op-rh] select {
  background: rgba(255, 255, 255, .04) !important; background-image: none !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09) !important; border: 0 !important; border-radius: 10px !important; }
html[data-op-rh][data-op-rh] .btn:not(.btn-close), html[data-op-rh][data-op-rh] .op-btn, html[data-op-rh][data-op-rh] .gh-btn:not(.gh-btn-play), html[data-op-rh][data-op-rh] .op-seg-btn:not(.active), html[data-op-rh][data-op-rh] .op-tab:not(.active) {
  background-image: none !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08) !important; text-shadow: none !important; border: 0 !important; }
html[data-op-rh][data-op-rh] .btn:not(.btn-close):not(.op-btn-main):not(.btn-primary), html[data-op-rh][data-op-rh] .op-seg-btn:not(.active), html[data-op-rh][data-op-rh] .op-tab:not(.active) { background-color: rgba(255, 255, 255, .05) !important; }
html[data-op-rh][data-op-rh] .btn-primary, html[data-op-rh][data-op-rh] .op-seg-btn.active, html[data-op-rh][data-op-rh] .op-tab.active { background: #f5f5f7 !important; background-image: none !important; color: #0b0b10 !important; box-shadow: none !important; }
html[data-op-rh][data-op-rh] .op-seg { background: rgba(255, 255, 255, .035) !important; background-image: none !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07) !important; border: 0 !important; }
/* little icon tiles in headers (Best Scores, Pinned, rank history, pp tools ...): only the icon */
html[data-op-rh][data-op-rh] .op-pf-section h5 > i, html[data-op-rh][data-op-rh] .op-panel-head > i, html[data-op-rh][data-op-rh] .op-pp-hero-ico, html[data-op-rh][data-op-rh] .op-pp-hero-ico i,
html[data-op-rh][data-op-rh] h1 > i.fa-solid, html[data-op-rh][data-op-rh] h2 > i.fa-solid, html[data-op-rh][data-op-rh] h3 > i.fa-solid, html[data-op-rh][data-op-rh] h4 > i.fa-solid, html[data-op-rh][data-op-rh] h5 > i.fa-solid, html[data-op-rh][data-op-rh] h5 > i.fas {
  background: none !important; box-shadow: none !important; text-shadow: none !important; }
html[data-op-rh][data-op-rh] .op-rnk-mode, html[data-op-rh][data-op-rh] .op-rnk-rw-card, html[data-op-rh][data-op-rh] .op-rnk-rw-first, html[data-op-rh][data-op-rh] .op-pp-num {
  background-image: none !important; background-color: rgba(255, 255, 255, .035) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08) !important; border: 0 !important; }
html[data-op-rh][data-op-rh] .op-rnk-mode.active { background: #f5f5f7 !important; color: #0b0b10 !important; }
html[data-op-rh][data-op-rh] .op-auth i.fa-solid, html[data-op-rh][data-op-rh] .op-auth i.fa-brands, html[data-op-rh][data-op-rh] .op-auth-side i { background: none !important; box-shadow: none !important; text-shadow: none !important; }
html[data-op-rh][data-op-rh] .op-rnk-mode { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08) !important; }
html[data-op-rh][data-op-rh] .op-rnk-mode.active { box-shadow: none !important; }
/* login / register / recover card: plain dark box, no coloured glow corners */
html[data-op-rh][data-op-rh] .op-auth, html[data-op-rh][data-op-rh] .op-auth-side, html[data-op-rh][data-op-rh] .op-auth-main {
  background: #121216 !important; background-image: none !important; }
html[data-op-rh][data-op-rh] .op-auth { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07) !important; border: 0 !important; border-radius: 16px !important; }
html[data-op-rh][data-op-rh] .op-auth::before, html[data-op-rh][data-op-rh] .op-auth::after, html[data-op-rh][data-op-rh] .op-auth-side::before, html[data-op-rh][data-op-rh] .op-auth-side::after { display: none !important; }
/* search in the menu bar: the closed search is only the magnifier, like flag, chat and bell */
html[data-op-rh][data-op-rh] .op-nav-search .fable-search-input:not(:focus):placeholder-shown { background: transparent !important; box-shadow: none !important; }
html[data-op-rh][data-op-rh] .op-nav-search > button, html[data-op-rh][data-op-rh] .op-nav-search .btn, html[data-op-rh][data-op-rh] .op-nav-search-btn { background: transparent !important; box-shadow: none !important; }

/* owner 18.10.: "Mode, Country, Sort by weg, die sind ja nicht dumm" - no labels in the leaderboard filters */
html[data-op-rh] .op-lbx-side h3 { display: none !important; }
/* owner 18.10.: "da sind immer noch Icons, die du nicht gemacht hast" - no icon tiles anywhere: every icon is only the symbol */
html[data-op-rh][data-op-rh] i[class*="fa-"] { background: none !important; background-image: none !important; box-shadow: none !important; text-shadow: none !important; }
html[data-op-rh][data-op-rh] i[class*="fa-"]::after { background: none !important; }
html[data-op-rh][data-op-rh] .op-set-nav { background: #121216 !important; background-image: none !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07) !important; border-radius: 16px !important; }
html[data-op-rh][data-op-rh] .op-set-nav a { border-radius: 10px !important; }
html[data-op-rh][data-op-rh] .op-set-nav a i { color: var(--rh-mut) !important; width: 22px !important; }
html[data-op-rh][data-op-rh] .op-set-nav a.active { background: rgba(255, 255, 255, .07) !important; background-image: none !important; box-shadow: none !important; }
html[data-op-rh][data-op-rh] .op-set-nav a.active i { color: #fff !important; background: none !important; }
html[data-op-rh][data-op-rh] .op-set-hero, html[data-op-rh][data-op-rh] .op-set-card { background: #121216 !important; background-image: none !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07) !important; border-radius: 16px !important; }

/* ===== new logo (owner 29.10.2026: "ich mag 12 Pixel" = draft 12 in branding/kuroosu/logo3-preview-v6.html) =====
   KUROOSU in the pixel font Silkscreen + a white underscore cursor that blinks calmly (still with op-lite / reduced motion).
   The templates keep kuro<i class="op-wm-osu">osu</i>; upper case comes from CSS. Icon = black square, pixel K, mint cursor.
   In the menu bar only the name shows (like the preview). Before: k tile + Outfit "kuro" bold / "osu" thin. */
html[data-op-rh][data-op-rh] .op-rainbow-logo { font-family: "Silkscreen", monospace !important; font-weight: 700 !important; letter-spacing: .02em !important; text-transform: uppercase;
  color: #f5f5f7 !important; -webkit-text-fill-color: #f5f5f7 !important; background: none !important; filter: none !important; padding: 0 !important; margin-bottom: 0 !important; line-height: 1 !important;
  display: inline-flex !important; align-items: center; white-space: nowrap; animation: none !important; transform: none !important; }
html[data-op-rh][data-op-rh] .op-rainbow-logo .op-wm-osu { font-style: normal; font-weight: 700; color: inherit; -webkit-text-fill-color: currentColor; }
/* cursor = a lying underscore on the baseline, like the K_ icon (owner 29.10.: "nach unten und nicht aufrecht") */
html[data-op-rh][data-op-rh] .op-rainbow-logo::after { content: ""; display: inline-block; flex: none; width: .62em; height: .14em; margin-left: .12em; align-self: flex-end; margin-bottom: .1em; background: currentColor; animation: opu-logo-blink 1.1s steps(1) infinite; }
@keyframes opu-logo-blink { 50% { opacity: 0; } }
html[data-op-rh][data-op-lite] .op-rainbow-logo::after { animation: none; }
@media (prefers-reduced-motion: reduce) { html[data-op-rh] .op-rainbow-logo::after { animation: none !important; } }
html[data-op-rh][data-op-rh] .op-nav .op-nav-logo { display: none !important; }
/* home head: only the big name, no icon over the video (owner 29.10.: the small square there "sieht komisch aus") */
html[data-op-rh][data-op-rh] .gh-hero2-logo { display: none !important; }
html[data-op-rh] .op-nav .op-logo-text { font-size: 1.2rem !important; }
html[data-op-rh] .gh-hero .gh-hero-logo { grid-row: span 2; width: 104px; height: 104px; border-radius: 50%; box-shadow: 0 0 0 4px rgba(20, 20, 28, .9); }
html[data-op-rh] .gh-hero .gh-title { margin: 0 !important; line-height: 1 !important; }
html[data-op-rh] .gh-hero .gh-title .op-rainbow-logo { font-size: 2.7rem !important; padding-bottom: .25em !important; animation: none !important; transform: none !important; }
html[data-op-rh] .gh-hero .gh-lead { margin: 0 !important; max-width: 560px !important; font-size: .92rem !important; color: #c9c9d3 !important; }
html[data-op-rh] .gh-hero .gh-cta { grid-column: 1 / -1; justify-content: flex-start !important; margin: 18px -22px 0 !important; padding: 12px 22px !important; position: relative; gap: 8px !important; }
html[data-op-rh] .gh-hero .gh-cta::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rh-line); }
html[data-op-rh] .gh-hero .gh-launch { grid-column: 1 / -1; margin: 0 -22px !important; max-width: none !important; width: auto !important; border-radius: 0 0 var(--rh-r) var(--rh-r) !important;
  background: transparent !important; box-shadow: none !important; padding: 12px 22px 16px !important; position: relative; transform: none !important; animation: none !important; }
html[data-op-rh] .gh-hero .gh-launch::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rh-line); }
html[data-op-rh] .gh-bento { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; grid-auto-rows: minmax(190px, auto) !important; }
html[data-op-rh] .gh-bento > .gh-day { grid-column: 1 / -1 !important; }
html[data-op-rh] .gh-bento > * { border-radius: var(--rh-r) !important; }
html[data-op-rh] .gh-kicker { font-size: .66rem !important; letter-spacing: .07em !important; color: var(--rh-mut) !important; }
html[data-op-rh] .gh-two { gap: 16px !important; margin-top: 2.4rem !important; }
html[data-op-rh] .gh-explore a, html[data-op-rh] .gh-chips a { border-radius: 10px !important; }
@media (max-width: 760px) {
  html[data-op-rh] .gh-hero { grid-template-columns: minmax(0, 1fr); text-align: left; margin: 12px 12px 16px !important; }
  html[data-op-rh] .gh-hero .gh-hero-logo { grid-row: auto; width: 78px; height: 78px; margin-bottom: 8px !important; }
  html[data-op-rh] .gh-bento { grid-template-columns: minmax(0, 1fr) !important; }
}

/* footer in the same column */
html[data-op-rh] .op-gfoot { max-width: 1016px; margin-left: auto !important; margin-right: auto !important; border-radius: var(--rh-r) !important; }

/* ---------- black also on profiles with Supporter colours ----------
   The player's profile colour stays as an accent (name, numbers, edge line), the boxes stay black.
   The Supporter profile background only fills the top of the page and fades into the black. */
html[data-op-rh] .op-pf-custom .op-pf-header,
html[data-op-rh] .op-pf-custom .op-pf-section,
html[data-op-rh] .op-pf-custom .op-pf-bar,
html[data-op-rh] .op-pf-custom .op-pf-stats { background: var(--rh-fill) !important; background-image: none !important; }
html[data-op-rh] .op-pf-custom .op-pf-header, html[data-op-rh] .op-pf-custom .op-pf-section { box-shadow: var(--rh-edge) !important; border: 0 !important; }
html[data-op-rh] .op-pf-custom .op-pf-section .op-sc-rh { background: rgba(255, 255, 255, .035) !important; }
html[data-op-rh] .op-pfbg { position: absolute !important; inset: 0 0 auto 0 !important; height: 560px !important;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .6) 45%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .6) 45%, transparent 100%); opacity: .55; }
html[data-op-rh] .op-pf-bar, html[data-op-rh] .op-pf-stats { background: transparent !important; }

/* ---------- nothing on top of each other ---------- */
/* leaderboards have many columns: a bit wider, the player cell cuts long names/tags instead of running into the pp */
html[data-op-rh] .wrapper .container.op-lbx { max-width: 1240px; }
/* owner 18.10.: the name was cut to "r..." - the name always stays whole, extra badges at the end fade out instead */
html[data-op-rh] .op-lbx-pl { overflow: hidden !important; min-width: 0 !important;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
html[data-op-rh] .op-lbx-pl > * { flex-shrink: 0 !important; }
html[data-op-rh] .op-lbx-pl .op-lbx-name { flex-shrink: 0 !important; overflow: visible !important; white-space: nowrap; max-width: none !important; }
/* profile: the picture is as big as its place, so it never covers the name */
html[data-op-rh] .op-pf-avatar { width: 118px !important; height: 118px !important; border-radius: 22px !important; }
@media (max-width: 700px) { html[data-op-rh] .op-pf-avatar { width: 86px !important; height: 86px !important; } }

/* score rows: pp sits in the left block now (small "pp"), the right tag shows the accuracy */
html[data-op-rh] .op-sc-rh .rh-acc small { font-size: .66rem; font-weight: 700; color: var(--rh-mut); margin-left: 1px; }

/* role badges (Owner, Developer, Moderator ...) and the other profile tags: flat chips, colour only on the edge and the icon */
html[data-op-rh][data-op-rh] .op-pf-tag.op-role { --rc: #e8e8f0; background: rgba(255, 255, 255, .05) !important; background-image: none !important; color: #f0f0f4 !important; border: 0 !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 50%, transparent) !important; text-shadow: none !important; filter: none !important; animation: none !important; border-radius: 8px !important; }
html[data-op-rh][data-op-rh] .op-pf-tag.op-role::before, html[data-op-rh][data-op-rh] .op-pf-tag.op-role::after { display: none !important; }
html[data-op-rh][data-op-rh] .op-pf-tag.op-role > i { background: none !important; color: var(--rc) !important; box-shadow: none !important; width: auto !important; height: auto !important; }
html[data-op-rh] .op-role-owner { --rc: #f5c542 !important; }
html[data-op-rh] .op-role-co-owner { --rc: #c99cff !important; }
html[data-op-rh] .op-role-admin, html[data-op-rh] .op-role-administrator { --rc: #ff7b7b !important; }
html[data-op-rh] .op-role-moderator, html[data-op-rh] .op-role-mod { --rc: #6cc8ff !important; }
html[data-op-rh] .op-role-developer, html[data-op-rh] .op-role-dev { --rc: #7cf5a0 !important; }
html[data-op-rh] .op-role-nominator, html[data-op-rh] .op-role-beatmap-nominator { --rc: #ffb36b !important; }
html[data-op-rh] .op-role-helper { --rc: #9ef0c2 !important; }

/* owner 18.10.: "mach das Skill-Widget weg" (profile skills radar) */
html[data-op-rh] .op-skills-wrap { display: none !important; }

/* mode bar on the (now tall) banner: dark pills so it stays readable on light banners, active = white */
html[data-op-rh] .op-pf-cover .op-modebar .op-seg { background: rgba(10, 10, 14, .72) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 11px !important; padding: 3px !important; }
html[data-op-rh] .op-pf-cover .op-modebar .op-seg-btn { color: #d6d6de !important; opacity: 1 !important; border-radius: 8px !important; background: transparent !important; box-shadow: none !important; }
html[data-op-rh] .op-pf-cover .op-modebar .op-seg-btn.active { background: #f5f5f7 !important; color: #0b0b10 !important; }
html[data-op-rh] .op-pf-cover .op-modebar .op-seg-btn.active i { color: #0b0b10 !important; }
html[data-op-rh] .op-pf-cover .op-modebar .op-seg-btn.active img { filter: invert(1); }

/* ===== owner 18.10.2026: "kein Liquid Glass mehr, nirgendwo" ===== */
html[data-op-rh] *, html[data-op-rh] *::before, html[data-op-rh] *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html[data-op-rh][data-op-rh] .dropdown-menu,
html[data-op-rh][data-op-rh] .op-nav .dropdown-menu,
html[data-op-rh][data-op-rh] .op-theme-menu,
html[data-op-rh][data-op-rh] .modal-content,
html[data-op-rh] .popover,
html[data-op-rh] .toast,
html[data-op-rh] .op-pop,
html[data-op-rh] .op-hovercard, html[data-op-rh] .op-hc {
  background: #141418 !important; background-image: none !important; border: 0 !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 40px -18px rgba(0, 0, 0, .8) !important; border-radius: 14px !important;
}
html[data-op-rh] .dropdown-item { border-radius: 8px !important; background: transparent !important; box-shadow: none !important; }
html[data-op-rh] .dropdown-item:hover, html[data-op-rh] .dropdown-item:focus { background: rgba(255, 255, 255, .06) !important; }
html[data-op-rh] .dropdown-item > i, html[data-op-rh] .dropdown-item > .fa-solid { background: none !important; box-shadow: none !important; color: var(--rh-mut) !important; }
html[data-op-rh] .op-pf-cover .op-modebar .op-seg { background: rgba(10, 10, 14, .86) !important; }

/* profile tags (Supporter, Germany, On the website, ranked titles ...): flat chips like the rest of the site */
html[data-op-rh][data-op-rh] .op-pf-tag:not(.op-role) {
  background: rgba(255, 255, 255, .05) !important; background-image: none !important; color: #e6e6ec !important; border: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1) !important; text-shadow: none !important; filter: none !important; animation: none !important; border-radius: 8px !important;
}
html[data-op-rh][data-op-rh] .op-pf-tag:not(.op-role)::before, html[data-op-rh][data-op-rh] .op-pf-tag:not(.op-role)::after { display: none !important; }
html[data-op-rh][data-op-rh] .op-pf-tag > i, html[data-op-rh][data-op-rh] .op-pf-tag > .op-pf-tag-ic { background: none !important; box-shadow: none !important; width: auto !important; height: auto !important; }
html[data-op-rh] .op-pf-followers, html[data-op-rh] .op-pf-actions .btn, html[data-op-rh] .op-pf-actions .op-btn {
  background: rgba(255, 255, 255, .05) !important; background-image: none !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1) !important; border: 0 !important; border-radius: 10px !important; text-shadow: none !important;
}
html[data-op-rh] .op-rank-title { background-image: none !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12) !important; background-color: rgba(255, 255, 255, .05) !important; border-radius: 8px !important; }

/* owner 18.10.: profile music button gone */
html[data-op-rh] .op-pf-music { display: none !important; }

/* owner 18.10.: leaderboard filters in the middle */
html[data-op-rh] .op-lbx-side { justify-content: center !important; }
html[data-op-rh] .op-lbx-grp:last-child { flex-basis: auto; max-width: 100%; }
/* language button = just the flag */
html[data-op-rh] .op-theme-btn { background: rgba(255, 255, 255, .05) !important; background-image: none !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1) !important; border: 0 !important; border-radius: 10px !important; padding: 0 10px !important; height: 34px; }
html[data-op-rh] .op-theme-btn > i, html[data-op-rh] .op-theme-btn .op-theme-btn-label { display: none !important; }
html[data-op-rh] .op-lang-only .op-theme-menu { width: 300px !important; padding: 12px !important; }
html[data-op-rh][data-op-rh] .op-lang-opt { background: rgba(255, 255, 255, .04) !important; background-image: none !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07) !important; border: 0 !important; border-radius: 10px !important; }
html[data-op-rh][data-op-rh] .op-lang-opt.active { background: #f5f5f7 !important; color: #0b0b10 !important; }

/* ===== owner 18.10. (again): "es ist immer noch Liquid Glass" - the rest of the glass goes ===== */
html[data-op-rh], html[data-op-rh][data-bs-theme][data-bs-core] {
  --gl-fill: #121216; --gl-fill-strong: #18181d; --gl-edge: inset 0 0 0 1px rgba(255, 255, 255, .07); --gl-shadow: none; --gl-blur: none; --gl-radius: 16px;
}
/* menu bar: flag, chat and bell are only the symbol, nothing behind them */
html[data-op-rh][data-op-rh] .op-theme-btn,
html[data-op-rh][data-op-rh] .op-bell-btn {
  background: transparent !important; background-image: none !important; box-shadow: none !important; border: 0 !important; width: auto !important; min-width: 34px; height: 34px; padding: 0 6px !important; border-radius: 8px !important;
}
html[data-op-rh][data-op-rh] .op-bell-btn > i { font-size: 1.05rem; color: #d6d6de; }
html[data-op-rh][data-op-rh] .op-bell-btn:hover > i { color: #fff; }
html[data-op-rh][data-op-rh] .op-theme-btn:hover, html[data-op-rh][data-op-rh] .op-bell-btn:hover { background: rgba(255, 255, 255, .06) !important; }
html[data-op-rh] .op-theme-btn .op-theme-flag { width: 24px !important; height: 17px !important; border-radius: 3px; box-shadow: none !important; }
/* menu icons: plain grey icons instead of coloured glossy circles */
html[data-op-rh][data-op-rh] .op-nav .dropdown-item > i[class*="fa-"],
html[data-op-rh][data-op-rh] .op-nav-links .nav-link > i[class*="fa-"] {
  background: none !important; box-shadow: none !important; text-shadow: none !important; color: var(--rh-mut) !important; width: 18px !important; height: auto !important; line-height: inherit !important;
  font-size: .82rem !important; transform: none !important; border-radius: 0 !important;
}
html[data-op-rh][data-op-rh] .op-nav .dropdown-item > i[class*="fa-"]::after, html[data-op-rh][data-op-rh] .op-nav-links .nav-link > i[class*="fa-"]::after { display: none !important; }
html[data-op-rh][data-op-rh] .op-nav .dropdown-item:hover > i[class*="fa-"] { color: #fff !important; }
/* chat page */
html[data-op-rh][data-op-rh] .op-chat-side, html[data-op-rh][data-op-rh] .op-chat-main {
  background: #121216 !important; background-image: none !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07) !important; border: 0 !important; border-radius: 16px !important; animation: none !important;
}
html[data-op-rh][data-op-rh] .op-chat-side button, html[data-op-rh][data-op-rh] .op-chat-sidebtns > *, html[data-op-rh][data-op-rh] .op-chat-search,
html[data-op-rh][data-op-rh] .op-chat-notify, html[data-op-rh][data-op-rh] .op-chat-newgroup, html[data-op-rh][data-op-rh] .op-chat-tool, html[data-op-rh][data-op-rh] .op-chat-callbtn,
html[data-op-rh][data-op-rh] .op-chat-more, html[data-op-rh][data-op-rh] .op-chat-form, html[data-op-rh][data-op-rh] .op-chat-input {
  background: rgba(255, 255, 255, .04) !important; background-image: none !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08) !important; border: 0 !important; border-radius: 10px !important; text-shadow: none !important;
}
html[data-op-rh][data-op-rh] .op-chat-item { background: transparent !important; box-shadow: none !important; border-radius: 10px !important; }
html[data-op-rh][data-op-rh] .op-chat-item:hover, html[data-op-rh][data-op-rh] .op-chat-item.active { background: rgba(255, 255, 255, .06) !important; }
html[data-op-rh][data-op-rh] .op-chat-av, html[data-op-rh][data-op-rh] .op-chat-av img { box-shadow: none !important; }
/* footer */
html[data-op-rh][data-op-rh] .op-gfoot { background: #121216 !important; background-image: none !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07) !important; border: 0 !important; border-radius: 16px !important; }
/* everything with a glossy top line / inner shine: gone */
html[data-op-rh] .op-gfoot::before, html[data-op-rh] .op-gfoot::after, html[data-op-rh] .op-chat-side::before, html[data-op-rh] .op-chat-main::before { display: none !important; }
/* found by scanning every public page for white gloss gradients / bright inner top edges (18.10.) */
html[data-op-rh][data-op-rh] .form-control, html[data-op-rh][data-op-rh] .form-select, html[data-op-rh][data-op-rh] input:not([type=checkbox]):not([type=radio]):not([type=range]), html[data-op-rh][data-op-rh] textarea, html[data-op-rh][data-op-rh] select {
  background: rgba(255, 255, 255, .04) !important; background-image: none !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09) !important; border: 0 !important; border-radius: 10px !important; }
html[data-op-rh][data-op-rh] .btn:not(.btn-close), html[data-op-rh][data-op-rh] .op-btn, html[data-op-rh][data-op-rh] .gh-btn:not(.gh-btn-play), html[data-op-rh][data-op-rh] .op-seg-btn:not(.active), html[data-op-rh][data-op-rh] .op-tab:not(.active) {
  background-image: none !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08) !important; text-shadow: none !important; border: 0 !important; }
html[data-op-rh][data-op-rh] .btn:not(.btn-close):not(.op-btn-main):not(.btn-primary), html[data-op-rh][data-op-rh] .op-seg-btn:not(.active), html[data-op-rh][data-op-rh] .op-tab:not(.active) { background-color: rgba(255, 255, 255, .05) !important; }
html[data-op-rh][data-op-rh] .btn-primary, html[data-op-rh][data-op-rh] .op-seg-btn.active, html[data-op-rh][data-op-rh] .op-tab.active { background: #f5f5f7 !important; background-image: none !important; color: #0b0b10 !important; box-shadow: none !important; }
html[data-op-rh][data-op-rh] .op-seg { background: rgba(255, 255, 255, .035) !important; background-image: none !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07) !important; border: 0 !important; }
/* little icon tiles in headers (Best Scores, Pinned, rank history, pp tools ...): only the icon */
html[data-op-rh][data-op-rh] .op-pf-section h5 > i, html[data-op-rh][data-op-rh] .op-panel-head > i, html[data-op-rh][data-op-rh] .op-pp-hero-ico, html[data-op-rh][data-op-rh] .op-pp-hero-ico i,
html[data-op-rh][data-op-rh] h1 > i.fa-solid, html[data-op-rh][data-op-rh] h2 > i.fa-solid, html[data-op-rh][data-op-rh] h3 > i.fa-solid, html[data-op-rh][data-op-rh] h4 > i.fa-solid, html[data-op-rh][data-op-rh] h5 > i.fa-solid, html[data-op-rh][data-op-rh] h5 > i.fas {
  background: none !important; box-shadow: none !important; text-shadow: none !important; }
html[data-op-rh][data-op-rh] .op-rnk-mode, html[data-op-rh][data-op-rh] .op-rnk-rw-card, html[data-op-rh][data-op-rh] .op-rnk-rw-first, html[data-op-rh][data-op-rh] .op-pp-num {
  background-image: none !important; background-color: rgba(255, 255, 255, .035) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08) !important; border: 0 !important; }
html[data-op-rh][data-op-rh] .op-rnk-mode.active { background: #f5f5f7 !important; color: #0b0b10 !important; }
html[data-op-rh][data-op-rh] .op-auth i.fa-solid, html[data-op-rh][data-op-rh] .op-auth i.fa-brands, html[data-op-rh][data-op-rh] .op-auth-side i { background: none !important; box-shadow: none !important; text-shadow: none !important; }
html[data-op-rh][data-op-rh] .op-rnk-mode { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08) !important; }
html[data-op-rh][data-op-rh] .op-rnk-mode.active { box-shadow: none !important; }
/* login / register / recover card: plain dark box, no coloured glow corners */
html[data-op-rh][data-op-rh] .op-auth, html[data-op-rh][data-op-rh] .op-auth-side, html[data-op-rh][data-op-rh] .op-auth-main {
  background: #121216 !important; background-image: none !important; }
html[data-op-rh][data-op-rh] .op-auth { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07) !important; border: 0 !important; border-radius: 16px !important; }
html[data-op-rh][data-op-rh] .op-auth::before, html[data-op-rh][data-op-rh] .op-auth::after, html[data-op-rh][data-op-rh] .op-auth-side::before, html[data-op-rh][data-op-rh] .op-auth-side::after { display: none !important; }
/* search in the menu bar: the closed search is only the magnifier, like flag, chat and bell */
html[data-op-rh][data-op-rh] .op-nav-search .fable-search-input:not(:focus):placeholder-shown { background: transparent !important; box-shadow: none !important; }
html[data-op-rh][data-op-rh] .op-nav-search > button, html[data-op-rh][data-op-rh] .op-nav-search .btn, html[data-op-rh][data-op-rh] .op-nav-search-btn { background: transparent !important; box-shadow: none !important; }

/* owner 18.10.: "Mode, Country, Sort by weg, die sind ja nicht dumm" - no labels in the leaderboard filters */
html[data-op-rh] .op-lbx-side h3 { display: none !important; }
/* owner 18.10.: "da sind immer noch Icons, die du nicht gemacht hast" - no icon tiles anywhere: every icon is only the symbol */
html[data-op-rh][data-op-rh] i[class*="fa-"] { background: none !important; background-image: none !important; box-shadow: none !important; text-shadow: none !important; }
html[data-op-rh][data-op-rh] i[class*="fa-"]::after { background: none !important; }
html[data-op-rh][data-op-rh] .op-set-nav { background: #121216 !important; background-image: none !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07) !important; border-radius: 16px !important; }
html[data-op-rh][data-op-rh] .op-set-nav a { border-radius: 10px !important; }
html[data-op-rh][data-op-rh] .op-set-nav a i { color: var(--rh-mut) !important; width: 22px !important; }
html[data-op-rh][data-op-rh] .op-set-nav a.active { background: rgba(255, 255, 255, .07) !important; background-image: none !important; box-shadow: none !important; }
html[data-op-rh][data-op-rh] .op-set-nav a.active i { color: #fff !important; background: none !important; }
html[data-op-rh][data-op-rh] .op-set-hero, html[data-op-rh][data-op-rh] .op-set-card { background: #121216 !important; background-image: none !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07) !important; border-radius: 16px !important; }

html[data-op-rh] .gh-hero .gh-hero-logo { border-radius: 0 !important; box-shadow: none !important; }
html[data-op-rh] .gh-hero .gh-title .op-rainbow-logo { font-size: clamp(1.9rem, 9vw, 3rem) !important; }
html[data-op-rh][data-op-rh] .gh-launch-icon, html[data-op-rh][data-op-rh] .op-dl-icon { box-shadow: none !important; filter: none !important; border-radius: 40% !important; animation: none !important; }
html[data-op-rh][data-op-rh] .gh-btn, html[data-op-rh][data-op-rh] .gh-btn i { text-shadow: none !important; }

/* ===== home like rhythia.com (owner 18.10.2026, variant B of branding/rhythia/home-preview-v1.html) ===== */
html[data-op-rh] .gh-hero2 { position: relative; min-height: 460px; display: grid; place-items: center; text-align: center; overflow: hidden; margin: -8px 0 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06); }
html[data-op-rh] .gh-hero2-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; pointer-events: none; }
html[data-op-rh] .gh-hero2::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9, 9, 11, .35), rgba(9, 9, 11, .6) 60%, #09090b); pointer-events: none; }
html[data-op-rh] .gh-hero2-in { position: relative; z-index: 1; padding: 46px 16px 40px; }
html[data-op-rh] .gh-hero2-logo { width: 78px; height: 78px; border-radius: 32px; margin: 0 auto 16px; display: block; }
html[data-op-rh] .gh-hero2-title { margin: 0; line-height: 1; }
html[data-op-rh][data-op-rh] .gh-hero2-title .op-rainbow-logo { font-size: clamp(1.9rem, 9vw, 3.4rem) !important; }
html[data-op-rh] .gh-hero2-lead { font-size: 1.15rem; font-weight: 600; color: #d6d6de; margin: 14px 0 0; }
html[data-op-rh] .gh-hero2-cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 24px; }
html[data-op-rh][data-op-rh] .gh-hero2-cta .gh-btn { min-height: 44px; padding: 0 20px !important; font-size: .92rem !important; }
html[data-op-rh] .gh-hero2-note { display: inline-block; margin-top: 14px; font-size: .8rem; color: #9d9daa; }
html[data-op-rh] .gh-hero2-note:hover { color: #fff; }
html[data-op-rh] .gh-rh { padding-top: 6px; }
html[data-op-rh] .gh-sec { font-size: 1.05rem; font-weight: 700; margin: 28px 0 12px; display: flex; align-items: baseline; gap: 8px; }
html[data-op-rh] .gh-sec small { font-size: .74rem; font-weight: 600; color: #7c7c88; }
html[data-op-rh] .gh-box { background: #121216; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); border-radius: 14px; display: block; color: inherit; text-decoration: none; }
html[data-op-rh] a.gh-box:hover { background: #17171c; }
html[data-op-rh] .gh-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
html[data-op-rh] .gh-about .gh-box { padding: 16px 18px; font-size: .88rem; line-height: 1.6; color: #d6d6de; display: flex; align-items: center; gap: 14px; }
html[data-op-rh] .gh-about .gh-box p { flex: 1; margin: 0; }
html[data-op-rh] .gh-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
html[data-op-rh] .gh-maps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
html[data-op-rh] .gh-map { overflow: hidden; }
html[data-op-rh] .gh-map-cv { position: relative; display: block; height: 118px; background-size: cover; background-position: center; }
html[data-op-rh] .gh-map-cv::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 18, 22, .15), rgba(18, 18, 22, .92)); }
html[data-op-rh] .gh-map-tr { position: absolute; right: 10px; top: 10px; z-index: 1; display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
html[data-op-rh] .gh-bdg { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 7px; font-size: .68rem; font-weight: 800; background: rgba(10, 10, 14, .75); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: #fff; }
html[data-op-rh] .gh-map-tt { position: absolute; left: 12px; right: 76px; bottom: 10px; z-index: 1; font-weight: 700; font-size: .95rem; line-height: 1.25; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html[data-op-rh] .gh-map-ft { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; font-size: .76rem; color: #9d9daa; border-top: 1px solid rgba(255, 255, 255, .06); }
html[data-op-rh] .gh-map-ft span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-op-rh] .gh-map-ft span:last-child { flex: none; }
html[data-op-rh] .gh-more { display: flex; justify-content: space-between; align-items: center; padding: 13px 16px; margin-top: 14px; font-size: .85rem; font-weight: 600; color: #d6d6de; }
html[data-op-rh] .gh-side .gh-box { padding: 14px 16px; }
html[data-op-rh] .gh-dls { display: block; }
html[data-op-rh] .gh-dl { display: flex; align-items: baseline; gap: 8px; font-size: .84rem; padding: 4px 0; color: #c9c9d3; }
html[data-op-rh] .gh-dl i { flex: 1; border-bottom: 1px dotted rgba(255, 255, 255, .18); transform: translateY(-3px); }
html[data-op-rh] .gh-dl b { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
html[data-op-rh] .gh-top3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; }
html[data-op-rh] .gh-top3 > a { color: inherit; text-decoration: none; min-width: 0; display: block; }
html[data-op-rh] .gh-top3-av { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--c); margin: 4px auto 8px; display: block; background: #222; }
html[data-op-rh] .gh-top3-pl { display: block; font-weight: 800; font-size: 1.05rem; color: var(--c); margin: 2px 0 4px; } /* place instead of avatar (owner 18.10.) */
html[data-op-rh] .gh-top3-tag { display: grid; place-items: center; font-weight: 800; font-size: .74rem; color: #fff; background: #1b1b21; overflow: hidden; padding: 0 4px; }
html[data-op-rh] .gh-top3-n { display: block; font-size: .82rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-op-rh] .gh-top3-n .gh-flag { width: 16px; height: 11px; border-radius: 2px; vertical-align: -1px; margin-right: 4px; }
html[data-op-rh] .gh-top3-p { display: block; font-size: .76rem; color: #9d9daa; margin-top: 2px; }
html[data-op-rh] .gh-sidemore { display: block; text-align: center; font-size: .78rem; color: #9d9daa; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .06); }
html[data-op-rh] .gh-sidemore:hover { color: #fff; }
html[data-op-rh] .gh-online { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
html[data-op-rh] .gh-online > a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: .8rem; font-weight: 600; white-space: nowrap; overflow: hidden; }
html[data-op-rh] .gh-online .gh-flag { width: 18px; height: 12px; border-radius: 2px; flex: none; }
html[data-op-rh] .gh-muted { color: #7c7c88; font-size: .76rem; margin-top: 8px; }
html[data-op-rh] .gh-none { color: #9d9daa; font-size: .86rem; padding: 12px 14px; }
@media (max-width: 860px) {
  html[data-op-rh] .gh-about, html[data-op-rh] .gh-cols, html[data-op-rh] .gh-maps { grid-template-columns: minmax(0, 1fr); }
  html[data-op-rh] .gh-online { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-op-rh][data-op-rh] .gh-hero2-title .op-rainbow-logo { font-size: 2.6rem !important; }
  html[data-op-rh] .gh-hero2 { min-height: 400px; }
}

/* ===== owner 18.10.: "mach es wie beim ersten" - exactly like branding/rhythia/home-preview-v1.html (B) ===== */
/* content column 1100 px like the preview */
html[data-op-rh] .wrapper .container, html[data-op-rh] .wrapper .container-xxl { max-width: 1100px; }
/* menu bar: a plain dark bar over the full width, content in the same 1100 px column, no box */
html[data-op-rh][data-op-rh] .op-nav, html[data-op-rh][data-op-rh] .op-nav.op-nav-scrolled {
  margin: 0 !important; max-width: none !important; border-radius: 0 !important; padding: 0 !important; min-height: 54px;
  background: rgba(9, 9, 11, .96) !important; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06) !important; border: 0 !important; top: 0 !important; }
html[data-op-rh][data-op-rh] .op-nav, html[data-op-rh][data-op-rh] .op-nav.op-nav-scrolled { width: auto !important; }
html[data-op-rh][data-op-rh] .op-nav > .container-fluid { max-width: 1100px !important; margin: 0 auto !important; padding: 0 16px !important; min-height: 54px; }
/* the video starts right under the menu bar */
html[data-op-rh] .pt-4:has(> .gh) { padding-top: 0 !important; }
/* home column */
html[data-op-rh] .gh-rh { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
html[data-op-rh] .gh-hero2 { margin-top: 0 !important; min-height: 440px; }
html[data-op-rh] .gh-hero2-in { padding: 40px 16px; }
html[data-op-rh] .gh-hero2-logo { width: 76px; height: 76px; border-radius: 30px; }
html[data-op-rh][data-op-rh] .gh-hero2-title .op-rainbow-logo { font-size: 3.4rem !important; }
html[data-op-rh] .gh-hero2-lead { font-size: 1.15rem; margin-top: 12px; }
html[data-op-rh] .gh-map-tl { position: absolute; left: 10px; top: 10px; z-index: 1; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; max-width: 55%; }
html[data-op-rh] .gh-bdg-v { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; line-height: 22px; }
html[data-op-rh] .gh-bdg i { font-size: .66rem; }
html[data-op-rh] .gh-map-tt { right: 70px; }
html[data-op-rh] .gh-map-ft b { color: #fff; font-weight: 600; }
html[data-op-rh] .gh-dl i { display: block; min-width: 12px; height: 1px; border-bottom: 1px dotted rgba(255, 255, 255, .22); }
html[data-op-rh] .gh-mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
html[data-op-rh] .gh-mini > .gh-box { padding: 14px 16px; min-width: 0; }
html[data-op-rh] .gh-mk { display: block; font-size: .64rem; letter-spacing: .07em; text-transform: uppercase; color: #7c7c88; font-weight: 600; }
html[data-op-rh] .gh-mv { display: block; font-size: 1.25rem; font-weight: 800; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
html[data-op-rh] .gh-ms { display: block; font-size: .76rem; color: #9d9daa; margin-top: 3px; }
html[data-op-rh] .gh-ms b { font-weight: 500; color: #9d9daa; }
@media (max-width: 860px) { html[data-op-rh] .gh-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* footer like the preview */
html[data-op-rh] .op-rfoot { margin-top: 44px; border-top: 1px solid rgba(255, 255, 255, .07); padding: 30px 0 34px; }
html[data-op-rh] .op-rfoot-in { max-width: 1100px; margin: 0 auto; padding: 0 16px; display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 18px; }
html[data-op-rh] .op-rfoot-brand .op-rainbow-logo { font-size: 1.3rem !important; }
html[data-op-rh] .op-rfoot-brand p { font-size: .8rem; color: #9d9daa; margin: 8px 0 12px; }
html[data-op-rh] .op-rfoot-dc { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 10px; font-size: .84rem; font-weight: 700; color: #f0f0f4;
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); text-decoration: none; }
html[data-op-rh] .op-rfoot-dc:hover { background: rgba(255, 255, 255, .09); color: #fff; }
html[data-op-rh] .op-rfoot-col a { display: block; font-size: .82rem; color: #c9c9d3; padding: 3px 0; text-decoration: none; }
html[data-op-rh] .op-rfoot-col a:hover { color: #fff; }
html[data-op-rh] .op-rfoot-copy { max-width: 1068px; margin: 22px auto 0; padding: 14px 0 0; border-top: 1px solid rgba(255, 255, 255, .06); font-size: .74rem; color: #7c7c88; }
@media (max-width: 860px) {
  html[data-op-rh] .op-rfoot-in { grid-template-columns: 1fr 1fr; }
  html[data-op-rh] .op-rfoot-brand { grid-column: 1 / -1; }
  html[data-op-rh] .op-rfoot-copy { margin-left: 16px; margin-right: 16px; }
}

/* (18.10.: the zoom for big screens was taken back again - owner: "die Seite ist mega fett, geh zurück") */


/* owner 18.10.: "das Video soll kleiner sein" - a lower video head */
html[data-op-rh] .gh-hero2 { min-height: 300px !important; }
html[data-op-rh] .gh-hero2-in { padding: 26px 16px 28px !important; }
html[data-op-rh] .gh-hero2-logo { width: 58px !important; height: 58px !important; border-radius: 0 !important; margin-bottom: 14px !important; }
html[data-op-rh][data-op-rh] .gh-hero2-title .op-rainbow-logo { font-size: clamp(1.8rem, 8.5vw, 2.6rem) !important; }
html[data-op-rh] .gh-hero2-lead { font-size: 1rem !important; margin-top: 8px !important; }
html[data-op-rh] .gh-hero2-cta { margin-top: 18px !important; }

/* owner 18.10. (screenshot with the area marked): "da soll das Video sein" - the video is a box in the page column
   (same width as About and the maps), not over the whole screen width; a bit clearer so you see it */
html[data-op-rh][data-op-rh] .gh-hero2 { max-width: 1068px; margin: 16px auto 0 !important; border-radius: 16px; border-bottom: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); isolation: isolate; }
html[data-op-rh][data-op-rh] .gh-hero2-vid { opacity: .7; z-index: -1; border-radius: 16px; }
html[data-op-rh][data-op-rh] .gh-hero2::after { z-index: 0; border-radius: 16px; background: linear-gradient(180deg, rgba(9, 9, 11, .25), rgba(9, 9, 11, .55)); }
@media (max-width: 1100px) { html[data-op-rh][data-op-rh] .gh-hero2 { margin: 12px 16px 0 !important; } }

/* owner 18.10.2026: "mach es weg, wenn man durch Seiten klickt, dass es so blurry wird" - no page entrance effects at all:
   no light streak, no fade of the page, no rising panes / rows, no home intro (blur, bloom, flying tiles), no navigation veil */
html[data-op-rh][data-op-rh] body::after { content: none !important; animation: none !important; display: none !important; }
html[data-op-rh][data-op-rh] .wrapper > *, html[data-op-rh][data-op-rh] .op-pfa-cols > *, html[data-op-rh][data-op-rh] .op-set-main > *,
html[data-op-rh][data-op-rh] .op-set-nav, html[data-op-rh][data-op-rh] .op-fr-card, html[data-op-rh][data-op-rh] .op-chat-side, html[data-op-rh][data-op-rh] .op-chat-main,
html[data-op-rh][data-op-rh] .op-lbx-row, html[data-op-rh][data-op-rh] .gh-hero > *, html[data-op-rh][data-op-rh] .gh-hero::before, html[data-op-rh][data-op-rh] .gh-bento > .gh-tile,
html[data-op-rh][data-op-rh] .gh-row, html[data-op-rh][data-op-rh] .gh-two > *, html[data-op-rh][data-op-rh] .gh-end, html[data-op-rh][data-op-rh] .gh-launch,
html[data-op-rh][data-op-rh] .gh-cta > a, html[data-op-rh][data-op-rh] .gh-title, html[data-op-rh][data-op-rh] .gh-lead {
  animation: none !important;
}
html[data-op-rh] .opu-navigation-veil { display: none !important; }

/* owner 18.10.2026: profile picture without the white frame, no round online dot on it ("On the website" chip stays), no thin line in the profile */
html[data-op-rh][data-op-rh] .op-pf-avatar { padding: 0 !important; background: none !important; box-shadow: none !important; outline: none !important; border: 0 !important; }
html[data-op-rh][data-op-rh] .op-pf-online { display: none !important; }
html[data-op-rh][data-op-rh] .op-pf-bar::before, html[data-op-rh][data-op-rh] .op-pf-bar::after { content: none !important; display: none !important; }
html[data-op-rh][data-op-rh] .op-pf-bar { border-top: 0 !important; box-shadow: none !important; }

/* owner 18.10.2026: "Supporter-Badges besser, sieht alles gleich aus" - every tier its own icon (template) and edge colour, still a slim chip */
html[data-op-rh][data-op-rh][data-op-rh] .op-pf-tag.op-pf-supporter { --st: 255, 143, 200; box-shadow: inset 0 0 0 1px rgba(var(--st), .45) !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-pf-tag.op-pf-supporter > i { color: rgb(var(--st)) !important; text-shadow: none !important; filter: none !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-pf-tag.op-pf-supporter small { color: rgba(var(--st), .9) !important; margin-left: .35rem !important; font-weight: 600 !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-pf-tag.op-sup-tier-0 { --st: var(--op-sup-t1, 255, 143, 200); } /* owner 29.10.2026: new supporters (0 days) pink too, not grey */
html[data-op-rh][data-op-rh][data-op-rh] .op-pf-tag.op-sup-tier-1 { --st: var(--op-sup-t1, 255, 143, 200); }
html[data-op-rh][data-op-rh][data-op-rh] .op-pf-tag.op-sup-tier-2 { --st: var(--op-sup-t2, 255, 112, 112); }
html[data-op-rh][data-op-rh][data-op-rh] .op-pf-tag.op-sup-tier-3 { --st: var(--op-sup-t3, 110, 200, 255); }
html[data-op-rh][data-op-rh][data-op-rh] .op-pf-tag.op-sup-tier-4 { --st: var(--op-sup-t4, 243, 198, 90); background: rgba(var(--st), .07) !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-pf-tag.op-pf-supporter > i { background: none !important; box-shadow: none !important; width: auto !important; height: auto !important; border-radius: 0 !important; font-size: .8rem !important; }
/* supporter page (draft A) is a narrow centred column */
html[data-op-rh][data-op-rh] .wrapper .container.op-supa, html[data-op-rh][data-op-rh] .container.op-supa { max-width: 680px !important; }

/* ===== owner 18.10.2026: profile draft A "Offen" (branding/profile/preview-v5.html) - sections without boxes, just a title and the content;
   numbers: one row with the 6 main stats, the rest as one small grey line ===== */
html[data-op-rh][data-op-rh][data-op-rh] .op-pf-section { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; margin-bottom: 26px !important; overflow: visible !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-pf-section > .d-flex:first-child,
html[data-op-rh][data-op-rh][data-op-rh] .op-pf-section > div > .d-flex:first-child { padding: 0 2px !important; margin-bottom: 10px !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-pf-section > .d-flex:first-child::after,
html[data-op-rh][data-op-rh][data-op-rh] .op-pf-section > div > .d-flex:first-child::after { display: none !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-pf-section .row { margin-left: 0 !important; margin-right: 0 !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-pfa-main { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 0 !important; padding: 14px 20px 6px !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-pfa-main .op-pf-stat strong { font-size: 1.05rem !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-pfa-main .op-pf-stat small { font-size: .62rem !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-pfa-extra { display: flex !important; flex-wrap: wrap; gap: 4px 18px !important; padding: 2px 20px 16px !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-pfa-extra .op-pf-stat { display: inline-flex !important; gap: 6px; align-items: baseline; padding: 0 !important; background: none !important; box-shadow: none !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-pfa-extra .op-pf-stat small,
html[data-op-rh][data-op-rh][data-op-rh] .op-pfa-extra .op-pf-stat strong { font-size: .76rem !important; color: #8d8d99 !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; margin: 0 !important; }
@media (max-width: 700px) { html[data-op-rh][data-op-rh][data-op-rh] .op-pfa-main { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; row-gap: 10px !important; } }
html[data-op-rh][data-op-rh][data-op-rh] .op-pf-section .op-medals { background: transparent !important; box-shadow: none !important; border: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }

/* owner 18.10.2026: country without the chip around it (just flag + name); the name sits higher so letters like p, g, y
   never touch the badges under it */
html[data-op-rh][data-op-rh][data-op-rh] .op-pf-tag.op-pf-country { background: none !important; box-shadow: none !important; border: 0 !important; padding-left: 2px !important; padding-right: 4px !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-pf-name { line-height: 1.22 !important; margin-bottom: 8px !important; padding-bottom: 0 !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-pf-name > span { line-height: inherit !important; }

/* owner 18.10.2026: staff roles and Supporter on the profile only as the symbol (name in the tooltip), no chip behind it */
html[data-op-rh][data-op-rh][data-op-rh] .op-pf-tags .op-pf-tag.op-role-ico,
html[data-op-rh][data-op-rh][data-op-rh] .op-pf-tags .op-pf-tag.op-pf-supporter { background: none !important; background-image: none !important; box-shadow: none !important; border: 0 !important; padding: 0 5px !important; min-width: 0 !important; gap: 0 !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-pf-tags .op-pf-tag.op-role-ico > i, html[data-op-rh][data-op-rh][data-op-rh] .op-pf-tags .op-pf-tag.op-pf-supporter > i { font-size: 1rem !important; margin: 0 !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-pf-tags .op-pf-tag.op-role-ico .groupEmoji { font-size: 1rem; }
html[data-op-rh][data-op-rh][data-op-rh] .op-pf-tags .op-pf-verified > i { color: #3ad678 !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-pf-tags .op-pf-tag.op-role-ico > i { background: none !important; box-shadow: none !important; filter: none !important; text-shadow: none !important; width: auto !important; height: auto !important; border-radius: 0 !important; }

/* ===== owner 18.10.2026: clan page "fix clans, mit den Badges, kein Gelb mehr" - neutral white/grey like the rest,
   the badges as calm tiles: icon in the badge colour, no filled glowing circles ===== */
html[data-op-rh][data-op-rh][data-op-rh] .op-cl-tag { background: none !important; color: #d6d6de !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16) !important; font-weight: 700 !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-cl-h span { background: rgba(255, 255, 255, .06) !important; color: var(--rh-mut) !important; font-weight: 600 !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-cl-lvl-num { background: none !important; background-image: none !important; color: #fff !important; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .22) !important; text-shadow: none !important; width: 64px !important; height: 64px !important; font-size: 1.6rem !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-cl-lvl-bar { height: 6px !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-cl-lvl-bar i { background: #f5f5f7 !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-cl-days span { background: rgba(245, 245, 247, .55) !important; opacity: 1 !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-cl-line polyline { stroke: #f5f5f7 !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-cl-statbox em.up { color: #3ad678 !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-cl-badges { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)) !important; gap: 8px !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-cl-badge { background: rgba(255, 255, 255, .03) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07) !important; border-radius: 12px !important; padding: 12px 6px !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-cl-badge span { width: auto !important; height: auto !important; background: none !important; box-shadow: none !important; color: var(--bc) !important; font-size: 1.25rem !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-cl-badge b { font-weight: 600 !important; color: #e6e6ec; }
html[data-op-rh][data-op-rh][data-op-rh] .op-cl-badge-off { opacity: 1 !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-cl-badge-off span { color: rgba(255, 255, 255, .22) !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-cl-badge-off b { color: rgba(255, 255, 255, .35) !important; }
/* owner rule: no small profile pictures in lists (the flag is already there) */
html[data-op-rh][data-op-rh][data-op-rh] .op-cl-mem-av { display: none !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-cl-ownerlabel { background: none !important; color: var(--rh-mut) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16) !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-cl-h > i, html[data-op-rh][data-op-rh][data-op-rh] .op-cl-section h3 > i { color: var(--rh-mut) !important; }
@media (min-width: 900px) { html[data-op-rh][data-op-rh][data-op-rh] .op-cl-badges { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; } }

/* ===== owner 31.10.2026: chat look C "Weich mit Kuro" (branding/chat/preview-v1.html, replaces draft A "Zeilen" of 18.10.): two soft boxes of the same height,
   the open chat and your own messages are white, supporters' message colour fills the bubble. Flags stay instead of small profile pictures. ===== */
html[data-op-rh] .wrapper .container.op-chat.op-chat { max-width: 1100px; margin-top: 1rem; margin-bottom: 1.5rem; padding-top: 0; }
html[data-op-rh][data-op-rh] .op-chat-grid { grid-template-columns: 312px minmax(0, 1fr) !important; gap: 12px !important; height: clamp(520px, calc(100dvh - 120px), 860px) !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-chat-side, html[data-op-rh][data-op-rh][data-op-rh] .op-chat-main { padding: 0 !important; overflow: hidden; background: #121216 !important; box-shadow: none !important; }
html[data-op-rh] .op-chat-top { display: flex; align-items: center; gap: 2px; padding: 14px 12px 8px 18px; }
html[data-op-rh] .op-chat-top h1 { flex: 1; margin: 0; color: #fff; font: 700 1.15rem/1.3 Inter, system-ui, sans-serif; letter-spacing: -.01em; }
html[data-op-rh][data-op-rh][data-op-rh] .op-chat-iconbtn, html[data-op-rh][data-op-rh][data-op-rh] .op-chat-more, html[data-op-rh][data-op-rh][data-op-rh] .op-chat-back, html[data-op-rh][data-op-rh][data-op-rh] .op-chat-tool {
  display: flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; margin: 0; padding: 0; border-radius: 50% !important; background: transparent !important; box-shadow: none !important; color: #b9b9c3; font-size: .95rem; text-decoration: none; transition: background .15s, color .15s; }
html[data-op-rh][data-op-rh][data-op-rh] .op-chat-iconbtn:hover, html[data-op-rh][data-op-rh][data-op-rh] .op-chat-more:hover, html[data-op-rh][data-op-rh][data-op-rh] .op-chat-back:hover, html[data-op-rh][data-op-rh][data-op-rh] .op-chat-tool:hover { background: rgba(255, 255, 255, .07) !important; color: #fff; }
html[data-op-rh] .op-chat-iconbtn svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
html[data-op-rh][data-op-rh][data-op-rh] .op-chat-back { display: none; }
html[data-op-rh][data-op-rh][data-op-rh] .op-chat-notify { display: block !important; flex: none; width: auto; margin: 0 12px 10px; padding: 9px 12px !important; border-radius: 12px !important; background: #1b1b21 !important; box-shadow: none !important; color: #fff; font-size: .8rem; font-weight: 600; line-height: 1.3; text-align: left; }
html[data-op-rh][data-op-rh][data-op-rh] .op-chat-notify[hidden] { display: none !important; }
html[data-op-rh] .op-chat-notify i { margin-right: 3px; }
html[data-op-rh][data-op-rh] .op-chat-notify small { margin-top: 1px; color: var(--rh-mut); font-size: .74rem; font-weight: 400; }
html[data-op-rh][data-op-rh][data-op-rh] .op-chat-search { flex: none; height: 38px; margin: 0 12px 8px; padding: 0; border-radius: 10px !important; background: #1b1b21 !important; box-shadow: none !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-chat-search input[data-op-chat-search][data-op-chat-search] { padding: 0 12px 0 34px; border-radius: 10px; background: none !important; box-shadow: none !important; font-size: .88rem; }
html[data-op-rh] .op-chat-results { flex: none; margin: 0 12px 8px; }
html[data-op-rh] .op-chat-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 8px 10px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .12) transparent; }
html[data-op-rh] .op-chat-list, html[data-op-rh][data-op-rh] .op-chat-friends { display: flex; flex-direction: column; gap: 0 !important; }
html[data-op-rh][data-op-rh] .op-chat-side-head { margin: 14px 0 4px; padding: 0 10px !important; color: #6f6f7a !important; font-size: .74rem !important; font-weight: 600 !important; letter-spacing: 0; text-transform: none; }
html[data-op-rh][data-op-rh][data-op-rh] .op-chat-item, html[data-op-rh][data-op-rh][data-op-rh] .op-chat-friend { gap: 11px !important; padding: 10px !important; border-radius: 12px !important; transition: background .15s; }
html[data-op-rh][data-op-rh][data-op-rh] .op-chat-item:hover, html[data-op-rh][data-op-rh][data-op-rh] .op-chat-friend:hover { background: rgba(255, 255, 255, .04) !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-chat-item.active, html[data-op-rh][data-op-rh][data-op-rh] .op-chat-item.active:hover { background: #fff !important; box-shadow: none !important; color: #0a0a0c; }
html[data-op-rh][data-op-rh] .op-chat-item-txt strong { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; font-size: .92rem !important; font-weight: 600 !important; line-height: 1.3; }
html[data-op-rh] .op-chat-item-txt strong > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html[data-op-rh] .op-chat-item-txt em { flex: none; color: #6f6f7a; font-size: .74rem; font-style: normal; font-weight: 500; }
html[data-op-rh][data-op-rh] .op-chat-item-txt small { color: var(--rh-mut); font-size: .8rem; line-height: 1.35; }
html[data-op-rh][data-op-rh] .op-chat-item.active .op-chat-item-txt small, html[data-op-rh][data-op-rh] .op-chat-item.active .op-chat-item-txt em { color: #55555f; }
html[data-op-rh][data-op-rh] .op-chat-unread { min-width: 18px; height: 18px; padding: 0 5px; background: #fff !important; color: #0a0a0c !important; font: 700 11px/18px Inter, system-ui, sans-serif; }
html[data-op-rh][data-op-rh] .op-chat-item.active .op-chat-unread { background: #0a0a0c !important; color: #fff !important; }
html[data-op-rh][data-op-rh] .op-chat-friend { font-size: .92rem; font-weight: 600; }
html[data-op-rh] .op-chat-keep { margin: 14px 10px 0; color: #6f6f7a; font-size: .74rem; }
/* chat draft A: flags instead of small profile pictures */
html[data-op-rh][data-op-rh] .op-chat-av-flag img { width: 26px !important; height: 18px !important; padding: 0 !important; border-radius: 3px !important; object-fit: cover; background: none !important; box-shadow: none !important; outline: 0 !important; }
html[data-op-rh][data-op-rh] .op-chat-item.active .op-chat-av-flag img { box-shadow: 0 0 0 1px rgba(0, 0, 0, .14) !important; }
html[data-op-rh][data-op-rh] .op-chat-av-flag { width: 26px; justify-content: center; align-items: center; }
html[data-op-rh][data-op-rh] .op-chat-av-flag .op-web-dot { width: 8px !important; height: 8px !important; right: -4px !important; bottom: -4px !important; }
/* head */
html[data-op-rh][data-op-rh][data-op-rh] .op-chat-head { flex: none; gap: 11px; height: 64px; padding: 0 10px 0 20px !important; border: 0; background: none !important; box-shadow: none !important; }
html[data-op-rh] .op-chat-headtxt { flex: 1; min-width: 0; }
html[data-op-rh][data-op-rh] .op-chat-head .op-chat-headtxt a { display: block; overflow: hidden; color: #fff; font: 600 .98rem/1.25 Inter, system-ui, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
html[data-op-rh][data-op-rh] .op-chat-head .op-chat-headtxt small { display: block; margin: 0; color: var(--rh-mut); font-size: .78rem; line-height: 1.25; }
html[data-op-rh][data-op-rh] .op-chat-head .op-chat-headtxt small[hidden] { display: none; }
html[data-op-rh] .op-chat-keepline { flex: none; color: #6f6f7a; }
html[data-op-rh][data-op-rh][data-op-rh] .op-chat-pins, html[data-op-rh][data-op-rh][data-op-rh] .op-chat-mutedbar { flex: none; margin: 0 14px 4px; border: 0; border-radius: 10px; background: #1b1b21 !important; box-shadow: none; }
/* messages */
html[data-op-rh][data-op-rh][data-op-rh] .op-chat-msgs { gap: 3px !important; padding: 12px 22px 16px !important; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .12) transparent; }
html[data-op-rh][data-op-rh] .op-chat-msg { position: relative; max-width: 68%; margin: 0; }
html[data-op-rh][data-op-rh] .op-chat-msg.op-chat-first { margin-top: 12px; }
html[data-op-rh] .op-chat:not([data-group]) .op-chat-rowhead { display: none; }
html[data-op-rh] .op-chat-rowhead { display: flex; align-items: baseline; gap: 8px; margin: 0 4px 2px; }
html[data-op-rh] .op-chat-rowhead a { color: #fff; font-size: .84rem; font-weight: 600; text-decoration: none; }
html[data-op-rh][data-op-rh] .op-chat-rowhead small { margin: 0; color: #6f6f7a; }
html[data-op-rh][data-op-rh][data-op-rh] .op-chat-msg .op-chat-bubble { max-width: 100%; padding: 8px 13px !important; border-radius: 15px !important; background: #1b1b21 !important; background-image: none !important; box-shadow: none !important; color: #f4f4f6 !important; font-size: .92rem; font-weight: 400 !important; line-height: 1.42; }
html[data-op-rh][data-op-rh][data-op-rh] .op-chat-msg.mine .op-chat-bubble { background: #f4f4f6 !important; color: #0a0a0c !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-chat-msg.has-bub .op-chat-bubble:not(.is-photo):not(.is-sticker):not(.is-deleted):not(.is-voice):not(.is-poll) { background: var(--bub) !important; color: #fff !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-chat-msg .op-chat-bubble:is(.is-voice, .is-poll) { background: #1b1b21 !important; color: #f4f4f6 !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-chat-msg .op-chat-bubble.is-photo { padding: 0 !important; background: none !important; }
html[data-op-rh][data-op-rh] .op-chat-msg .op-chat-bubble.is-photo img { border-radius: 12px; box-shadow: none; }
html[data-op-rh][data-op-rh][data-op-rh] .op-chat-msg .op-chat-bubble.is-deleted { background: none !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09) !important; color: #8b8b96 !important; }
html[data-op-rh] .op-chat-msg .op-chat-quote { border-radius: 8px; }
html[data-op-rh][data-op-rh] .op-chat-msg.mine .op-chat-card a { background: #1b1b21; }
html[data-op-rh][data-op-rh] .op-chat-msg.mine .op-chat-mp .op-btn-main { background: #0a0a0c !important; color: #fff !important; }
/* time + read ticks only under the last message of a block; an edited message keeps its note */
html[data-op-rh][data-op-rh] .op-chat-msg > small { display: none; margin: 2px 4px 0; color: #6f6f7a; font-size: .7rem; }
html[data-op-rh][data-op-rh] .op-chat-msg:not(:has(+ .op-chat-msg:not(.op-chat-first))) > small, html[data-op-rh][data-op-rh] .op-chat-msg:has(> small .op-chat-edited) > small { display: block; }
/* react / reply / more: next to the bubble on hover, under it on touch screens */
html[data-op-rh][data-op-rh] .op-chat-acts { z-index: 5; padding: 2px; border-radius: 10px; background: #18181d; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); }
@media (hover: none) {
  html[data-op-rh][data-op-rh] .op-chat-acts { display: none; }
  html[data-op-rh][data-op-rh] .op-chat-msg:hover .op-chat-acts, html[data-op-rh][data-op-rh] .op-chat-msg:focus-within .op-chat-acts { display: flex; top: calc(100% + 4px); left: 0; right: auto; transform: none; opacity: 1; }
  html[data-op-rh][data-op-rh] .op-chat-msg.mine:hover .op-chat-acts, html[data-op-rh][data-op-rh] .op-chat-msg.mine:focus-within .op-chat-acts { left: auto; right: 0; }
}
/* writing */
html[data-op-rh][data-op-rh][data-op-rh] .op-chat-form { flex: none; flex-wrap: wrap; align-items: center; gap: 2px !important; min-height: 46px; margin: 6px 14px 14px !important; padding: 6px 6px 6px 8px !important; border: 0 !important; border-radius: 23px !important; background: #1b1b21 !important; box-shadow: none !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-chat-form > input[type="text"] { flex: 1; min-width: 0; height: 34px; margin: 0 8px; padding: 0 !important; border: 0; border-radius: 0; background: none !important; box-shadow: none !important; color: #fff; font-size: .92rem !important; }
html[data-op-rh][data-op-rh] .op-chat-form > input[type="text"]::placeholder { color: #6f6f7a; }
html[data-op-rh][data-op-rh][data-op-rh] .op-chat-form > .op-btn { display: flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; padding: 0 !important; border: 0; border-radius: 50% !important; background: #fff !important; background-image: none !important; box-shadow: none !important; color: #0a0a0c !important; }
html[data-op-rh] .op-chat-form > .op-chat-replybar { flex: 0 0 100%; }
html[data-op-rh][data-op-rh][data-op-rh] .op-chat-emojis, html[data-op-rh][data-op-rh][data-op-rh] .op-chat-plus, html[data-op-rh][data-op-rh][data-op-rh] .op-chat-preview, html[data-op-rh][data-op-rh][data-op-rh] .op-chat-mention,
html[data-op-rh][data-op-rh][data-op-rh] .op-chat-menu, html[data-op-rh][data-op-rh][data-op-rh] .op-react-pick, html[data-op-rh][data-op-rh][data-op-rh] .op-msg-menu { border: 0; border-radius: 12px !important; background: #18181d !important; background-image: none !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 14px 32px rgba(0, 0, 0, .5) !important; }
/* nothing open: Kuro sleeps */
html[data-op-rh][data-op-rh] .op-chat-welcome { display: flex; flex-direction: column; align-items: center; margin: auto; padding: 24px; }
html[data-op-rh] .op-chat-welcome .op-kuro-pet { display: block; padding: 0; border: 0; background: none; }
html[data-op-rh][data-op-rh] .op-chat-welcome .op-kuro { --s: 96px; }
html[data-op-rh][data-op-rh] .op-chat-welcome h2 { margin: 10px 0 2px; color: #fff; font: 600 1.1rem/1.3 Inter, system-ui, sans-serif; }
html[data-op-rh][data-op-rh] .op-chat-welcome p { max-width: 340px; margin: 0; color: var(--rh-mut); font-size: .88rem; }
/* phone: either the list or the open chat, the arrow goes back */
@media (max-width: 767.98px) {
  html[data-op-rh][data-op-rh] .op-chat-grid { grid-template-columns: minmax(0, 1fr) !important; height: calc(100dvh - 92px) !important; min-height: 460px; }
  html[data-op-rh][data-op-rh] .op-chat-grid.is-open .op-chat-side, html[data-op-rh][data-op-rh] .op-chat-grid:not(.is-open) .op-chat-main { display: none; }
  html[data-op-rh][data-op-rh][data-op-rh] .op-chat-side { max-height: none; }
  html[data-op-rh][data-op-rh][data-op-rh] .op-chat-main { height: auto; }
  html[data-op-rh][data-op-rh][data-op-rh] .op-chat-head { padding-left: 6px; }
  html[data-op-rh][data-op-rh][data-op-rh] .op-chat-back { display: flex; }
  html[data-op-rh][data-op-rh][data-op-rh] .op-chat-msgs { padding: 10px 14px 14px !important; }
  html[data-op-rh][data-op-rh] .op-chat-msg { max-width: 84%; }
  html[data-op-rh][data-op-rh][data-op-rh] .op-chat-form { margin: 4px 10px 10px !important; }
}
/* navbar Discord logo (owner 18.10.2026) - just the symbol like chat and bell */
html[data-op-rh] .op-nav-discord { display: inline-grid; place-items: center; text-decoration: none; margin-right: 2px; }
html[data-op-rh] .op-nav-discord i { font-size: 1.15rem; }
html[data-op-rh] .op-nav-discord:hover i { color: #fff; }

/* score page opening (owner 29.10.2026: "mach die Animation schöner, wenn man Score aufmacht") - calm and flowing, no bounce, no blur, no ring:
   the grade fades in while settling from a bit bigger, then pp, the stats and the hit numbers follow one after another */
@keyframes opu-sp-grade-in { from { opacity: 0; transform: scale(1.35); } to { opacity: 1; transform: none; } }
@keyframes opu-sp-fade { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
html[data-op-rh][data-op-rh] .op-sp-grade, html[data-op-rh][data-op-rh] .op-sp-grade.op-stamp img { animation: none !important; }
html[data-op-rh][data-op-rh] .op-sp-grade.op-stamp::after { content: none !important; }
html[data-op-rh][data-op-rh] .op-sp-grade.op-stamp > img { animation: opu-sp-grade-in .9s cubic-bezier(.16, 1, .3, 1) both .1s !important; }
html[data-op-rh][data-op-rh] .op-sp-main, html[data-op-rh][data-op-rh] .op-sp-pp { animation: opu-sp-fade .7s cubic-bezier(.16, 1, .3, 1) both .3s !important; }
html[data-op-rh][data-op-rh] .op-sp-pp { animation-delay: .45s !important; }
html[data-op-rh][data-op-rh] .op-sp-stats > .op-pf-stat,
html[data-op-rh][data-op-rh] .op-sp-hitgrid > div { animation: opu-sp-fade .6s cubic-bezier(.16, 1, .3, 1) both !important; animation-delay: calc(.55s + var(--i, 0) * 60ms) !important; }
html[data-op-rh][data-op-rh] .op-sp-hits { animation: none !important; }
html[data-op-rh][data-op-rh] .op-sp-hero { animation: opu-sp-fade .6s cubic-bezier(.16, 1, .3, 1) both !important; }
@media (prefers-reduced-motion: reduce) {
  html[data-op-rh][data-op-rh] .op-sp-grade.op-stamp > img, html[data-op-rh][data-op-rh] .op-sp-hero, html[data-op-rh][data-op-rh] .op-sp-main, html[data-op-rh][data-op-rh] .op-sp-pp,
  html[data-op-rh][data-op-rh] .op-sp-stats > .op-pf-stat, html[data-op-rh][data-op-rh] .op-sp-hitgrid > div { animation: none !important; }
}
html[data-op-rh][data-op-rh] .op-sp-hits { display: flex; flex-direction: column; justify-content: center; }

/* beatmap page (owner 29.10.2026: "Liquid Glass weg, kleiner, dass es zur Seite passt" - pp calculator and everything else stays):
   flat black box like the rest - a short clear cover strip on top, title/difficulties/buttons and the facts side by side below it, no glass, no blur */
html[data-op-rh][data-op-rh] .op-map-hero { min-height: 0 !important; display: block !important; padding-top: 150px !important; border-radius: var(--rh-r) !important; border: 0 !important;
  background: var(--rh-fill) !important; box-shadow: var(--rh-edge) !important; animation: none !important; }
html[data-op-rh][data-op-rh] .op-map-hero .op-map-cover { position: absolute !important; inset: 0 0 auto 0 !important; height: 150px !important; z-index: 0 !important; filter: none !important; transform: none !important; opacity: 1 !important;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
html[data-op-rh][data-op-rh] .op-map-hero::before { content: none !important; }
html[data-op-rh][data-op-rh] .op-map-hero-inner { position: relative; z-index: 1; display: grid !important; grid-template-columns: minmax(0, 1fr) 290px !important; gap: 22px !important; align-items: start !important; padding: 0 22px 22px !important; margin-top: -34px; }
html[data-op-rh][data-op-rh] .op-map-main, html[data-op-rh][data-op-rh] .op-map-hero .op-map-side {
  background: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; align-self: start !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html[data-op-rh][data-op-rh] .op-map-hero .op-map-side { margin-top: 34px; padding: 14px 16px !important; border-radius: 16px !important; background: rgba(255, 255, 255, .035) !important; box-shadow: var(--rh-edge) !important; }
html[data-op-rh][data-op-rh] .op-map-title { font-size: clamp(1.3rem, 2.4vw, 1.75rem) !important; text-shadow: 0 2px 12px rgba(0, 0, 0, .6) !important; margin-top: 8px !important; }
html[data-op-rh][data-op-rh] .op-map-artist { font-size: .95rem !important; }
html[data-op-rh][data-op-rh] .op-map-mapper { font-size: .8rem !important; }
html[data-op-rh][data-op-rh] .op-map-diffs { margin: 12px 0 8px !important; }
html[data-op-rh][data-op-rh] .op-map-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px !important; }
html[data-op-rh][data-op-rh] .op-map-buttons .btn, html[data-op-rh][data-op-rh] .op-map-fav { padding: 6px 12px !important; font-size: .8rem !important; border-radius: 10px !important; }
html[data-op-rh][data-op-rh] .op-map-buttons form { display: inline-flex !important; }
html[data-op-rh][data-op-rh] .op-map-pp.op-pp, html[data-op-rh][data-op-rh] .op-map-board { margin-top: 16px !important; }
@media (max-width: 991.98px) {
  html[data-op-rh][data-op-rh] .op-map-hero { padding-top: 120px !important; }
  html[data-op-rh][data-op-rh] .op-map-hero .op-map-cover { height: 120px !important; }
  html[data-op-rh][data-op-rh] .op-map-hero-inner { grid-template-columns: minmax(0, 1fr) !important; padding: 0 14px 14px !important; gap: 12px !important; margin-top: -26px; }
  html[data-op-rh][data-op-rh] .op-map-hero .op-map-side { margin-top: 0; }
}
/* leaderboard Supporter heart (owner 29.10.2026) - small and calm, pink, next to the name */
html[data-op-rh][data-op-rh] .op-lbx-pl .op-supporter-heart { width: 18px; height: 18px; margin-left: 6px; flex: none; background: rgba(255, 94, 168, .14) !important; color: #ff5ea8 !important; font-size: .6rem; filter: none !important; }
html[data-op-rh][data-op-rh] .op-lbx-pl .op-supporter-heart i { animation: none !important; color: #ff5ea8 !important; }
/* footer: copyright left, "Powered by fable · made by n3vada_3" right (owner 29.10.2026); under each other on phones */
html[data-op-rh] .op-rfoot-copy { display: flex; justify-content: space-between; align-items: center; gap: 8px 24px; flex-wrap: wrap; }
html[data-op-rh] .op-rfoot-made b { color: #b4b4c0; font-weight: 600; }

/* ===== custom beatmaps (owner 29.10.2026, layout B of branding/custommaps/preview-v1.html): /beatmaps/upload, /beatmaps/custom ===== */
.op-cust { max-width: 1040px; }
.op-cust-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin: 8px 0 18px; }
.op-cust-top h1 { font-size: 1.7rem; font-weight: 700; margin: 0; }
.op-cust-top p { color: var(--rh-mut, #9d9daa); margin: 4px 0 0; font-size: .9rem; max-width: 640px; }
.op-cust-box { background: var(--rh-fill, #121216); box-shadow: var(--rh-edge, inset 0 0 0 1px rgba(255, 255, 255, .07)); border-radius: 18px; min-width: 0; }
.op-cust-head { padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 10px; position: relative; flex-wrap: wrap; }
.op-cust-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rh-line, rgba(255, 255, 255, .07)); }
.op-cust-head h2 { margin: 0; font-size: .95rem; font-weight: 700; }
.op-cust-head small { color: var(--rh-mut, #9d9daa); font-size: .8rem; }
.op-cust-body { padding: 18px 20px; }
.op-cust-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; align-items: start; }
@media (max-width: 860px) { .op-cust-grid { grid-template-columns: minmax(0, 1fr); } }
.op-cust-mine { margin-top: 16px; }
.op-cust-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 10px; padding: 9px 16px; font-weight: 700; font-size: .86rem; cursor: pointer; text-decoration: none;
  background: rgba(255, 255, 255, .05); color: #f5f5f7 !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); white-space: nowrap; }
.op-cust-btn:hover { background: rgba(255, 255, 255, .09); }
.op-cust-btn.op-cust-main { background: #f5f5f7; color: #0b0b10 !important; box-shadow: none; }
.op-cust-btn.op-cust-main:hover { background: #fff; }
.op-cust-btn.op-cust-sm { padding: 6px 11px; font-size: .78rem; }
.op-cust-btn:disabled { opacity: .7; cursor: progress; }
.op-cust-link { border: 0; background: none; padding: 0; color: var(--rh-mut, #9d9daa); text-decoration: underline; font-size: .85rem; cursor: pointer; }
.op-cust-alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: 12px; margin-bottom: 14px; font-size: .88rem;
  background: rgba(124, 245, 160, .06); box-shadow: inset 0 0 0 1px rgba(124, 245, 160, .25); }
.op-cust-alert i { margin-top: 3px; }
.op-cust-alert-err { background: rgba(255, 123, 123, .06); box-shadow: inset 0 0 0 1px rgba(255, 123, 123, .3); }
.op-cust-alert-upd { background: rgba(108, 200, 255, .06); box-shadow: inset 0 0 0 1px rgba(108, 200, 255, .3); }
.op-cust-alert a { color: inherit; text-decoration: underline; margin-left: 6px; }
.op-cust-drop { position: relative; display: grid; place-items: center; text-align: center; padding: 26px 16px; border-radius: 14px; cursor: pointer; color: var(--rh-mut, #9d9daa);
  background: rgba(255, 255, 255, .025); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); transition: background .15s; margin: 0; }
.op-cust-drop:hover, .op-cust-drop.op-cust-over { background: rgba(255, 255, 255, .05); }
.op-cust-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.op-cust-drop i { display: block; font-size: 1.4rem; margin-bottom: 8px; color: #f5f5f7; }
.op-cust-drop b { display: block; color: #f5f5f7; font-size: 1rem; margin-bottom: 2px; overflow-wrap: anywhere; }
.op-cust-drop span { font-size: .8rem; }
.op-cust-drop-done { box-shadow: inset 0 0 0 1px rgba(124, 245, 160, .35); }
.op-cust-drop-done i { color: var(--rh-ok, #7cf5a0); }
.op-cust-label { display: block; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: #6f6f7c; font-weight: 700; margin: 16px 0 6px; }
.op-cust textarea { width: 100%; min-height: 74px; resize: vertical; border: 0; border-radius: 10px; padding: 10px 12px; color: #f5f5f7; font: inherit; font-size: .9rem;
  background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); margin-bottom: 14px; }
.op-cust-rules { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: .82rem; color: var(--rh-mut, #9d9daa); }
.op-cust-rules li::before { content: "\2713"; color: #7cf5a0; margin-right: 8px; font-weight: 700; }
.op-cust-mut { color: var(--rh-mut, #9d9daa); }
.op-cust-small { font-size: .78rem; margin: 12px 0 0; }
.op-cust-notep { font-size: .82rem; margin: 12px 0 0; overflow-wrap: anywhere; }
.op-cust-found { margin-bottom: 14px; min-width: 0; }
.op-cust-found strong { display: block; font-size: 1.05rem; overflow-wrap: anywhere; }
.op-cust-found small { color: var(--rh-mut, #9d9daa); font-size: .82rem; }
.op-cust-diffs { display: grid; gap: 6px; }
.op-cust-diff { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 9px 12px; border-radius: 10px; background: rgba(255, 255, 255, .03); font-size: .88rem; }
.op-cust-dot { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--sr, #6cc8ff); }
.op-cust-dn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-cust-dn small { display: block; color: #6f6f7c; font-size: .74rem; }
.op-cust-sr { font-weight: 700; color: var(--sr, #6cc8ff); font-variant-numeric: tabular-nums; }
html[data-op-rh] .op-cust-diff[style*="#18158e"] .op-cust-sr, html[data-op-rh] .op-cust-diff[style*="#000000"] .op-cust-sr { color: #c9c9ff; }
.op-cust-attr { font-size: .78rem; }
@media (max-width: 520px) { .op-cust-attr { display: none; } .op-cust-diff { grid-template-columns: 16px minmax(0, 1fr) auto; } }
.op-cust-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.op-cust-row form { margin: 0; }
.op-cust-empty { color: var(--rh-mut, #9d9daa); font-size: .88rem; padding: 18px 4px; text-align: center; }
.op-cust-empty i { display: block; font-size: 1.3rem; margin-bottom: 8px; color: #6f6f7c; }
.op-cust-empty a { color: #f5f5f7; }
.op-cust-chip { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 8px; font-size: .74rem; font-weight: 700; white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(var(--cc, 200, 200, 210), .45); color: rgb(var(--cc, 210, 210, 220)); }
.op-cust-review { --cc: 255, 210, 94; } .op-cust-ranked { --cc: 108, 200, 255; } .op-cust-loved { --cc: 255, 143, 200; } .op-cust-work { --cc: 255, 123, 123; } .op-cust-custom { --cc: 200, 200, 210; }
.op-cust-mrow { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .03); }
.op-cust-mrow + .op-cust-mrow { margin-top: 6px; }
.op-cust-thumb { width: 72px; height: 46px; border-radius: 8px; background: linear-gradient(135deg, #2c2c38, #16161c) center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.op-cust-mtxt { min-width: 0; }
.op-cust-mtxt a { color: inherit; text-decoration: none; }
.op-cust-mtxt strong { display: block; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-cust-mtxt small { display: block; color: var(--rh-mut, #9d9daa); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-cust-mtxt small a:hover { color: #fff; }
.op-cust-staffnote { color: #ffb3b3 !important; white-space: normal !important; }
.op-cust-mside { display: flex; align-items: center; gap: 8px; }
.op-cust-flag { width: 18px; height: 12px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
@media (max-width: 600px) { .op-cust-mrow { grid-template-columns: 56px minmax(0, 1fr); } .op-cust-thumb { width: 56px; height: 38px; } .op-cust-mside { grid-column: 2; } }
.op-cust-filter { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.op-cust-seg { display: flex; gap: 4px; padding: 4px; border-radius: 11px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); flex-wrap: wrap; }
.op-cust-seg a { padding: 6px 13px; border-radius: 8px; font-weight: 700; font-size: .84rem; color: var(--rh-mut, #9d9daa); text-decoration: none; }
.op-cust-seg a.on { background: #f5f5f7; color: #0b0b10; }
.op-cust-search { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 38px; border-radius: 10px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); color: var(--rh-mut, #9d9daa); flex: 1; max-width: 340px; min-width: 200px; margin: 0; }
.op-cust-search input { border: 0; background: none; color: #f5f5f7; outline: 0; width: 100%; font: inherit; font-size: .88rem; }
/* beatmap page of a custom map */
.op-cust-mapnote { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; font-size: .86rem; margin-top: 14px;
  background: rgba(255, 210, 94, .06); box-shadow: inset 0 0 0 1px rgba(255, 210, 94, .25); }
.op-cust-mapnote b { color: #ffd25e; }
.op-cust-mapnote.op-cust-mapnote-ok { background: rgba(124, 245, 160, .06); box-shadow: inset 0 0 0 1px rgba(124, 245, 160, .25); }
.op-cust-mapnote.op-cust-mapnote-ok b { color: #7cf5a0; }
html[data-op-rh] .op-cust-search input { box-shadow: none !important; background: none !important; padding: 0 !important; height: auto !important; border-radius: 0 !important; }
/* Supporter hearts + Supporter Plus (owner 29.10.2026): one heart per purchase (max. 3), slim "Plus" mark */
html[data-op-rh][data-op-rh] .op-lbx-pl .op-supporter-heart.op-sup-hearts { width: auto; padding: 0 5px; border-radius: 9px; gap: 2px; display: inline-flex; align-items: center; }
html[data-op-rh][data-op-rh][data-op-rh] .op-pf-tags .op-pf-tag.op-pf-supporter { gap: 2px !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-pf-tags .op-pf-tag.op-pf-supporter > i + i { margin-left: 2px !important; }
html[data-op-rh] .op-sup-plus-mk { margin-left: 5px; padding: 1px 6px; border-radius: 6px; font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgb(var(--st, 255, 143, 200)); box-shadow: inset 0 0 0 1px rgba(var(--st, 255, 143, 200), .45); line-height: 1.4; }
html[data-op-rh] .op-sup-plus-tag { margin-left: 4px; padding: 0 5px; border-radius: 5px; font-size: .62rem; font-style: normal; font-weight: 700; text-transform: uppercase; color: #ff8fc8; box-shadow: inset 0 0 0 1px rgba(255, 143, 200, .4); }
/* home: Recent supporters */
html[data-op-rh] .gh-sups { padding-bottom: 12px; }
html[data-op-rh] .gh-sup { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 7px 0; }
html[data-op-rh] .gh-sup + .gh-sup { background: linear-gradient(rgba(255, 255, 255, .06), rgba(255, 255, 255, .06)) top / 100% 1px no-repeat; }
html[data-op-rh] .gh-sup .gh-flag { width: 16px; height: 11px; border-radius: 2px; grid-row: 1 / 3; }
html[data-op-rh] .gh-sup-n { min-width: 0; grid-row: 1 / 3; font-size: .82rem; font-weight: 700; overflow: hidden; }
html[data-op-rh] .gh-sup-n > a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
html[data-op-rh] .gh-sup-n small { display: block; font-weight: 500; font-size: .72rem; color: #9d9daa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-op-rh] .gh-sup-n small a { color: #c9c9d3; }
html[data-op-rh] .gh-sup-h { color: #ff5ea8; font-size: .62rem; display: inline-flex; gap: 2px; justify-content: flex-end; }
html[data-op-rh] .gh-sup-t { font-size: .68rem; color: #7d7d8a; text-align: right; white-space: nowrap; }
/* /supporter: Supporter Plus (owner 29.10.2026) */
html[data-op-rh] .op-supa-price.op-supa-plus { margin-top: -.2rem; }
html[data-op-rh] .op-supa-price.op-supa-plus b { font-size: 1.9rem; }
html[data-op-rh] .op-supa-price.op-supa-plus strong { color: #ff8fc8; font-weight: 700; }
html[data-op-rh] .op-supa-h2 { font-size: 1.05rem; font-weight: 700; margin: .4rem 0 0; }
html[data-op-rh] .op-supa-h2 small { font-size: .8rem; font-weight: 500; color: var(--rh-mut, #9d9daa); margin-left: 6px; }
html[data-op-rh] .op-supa-h2 + .op-supa-list { margin-top: .8rem; padding-top: .8rem; }
html[data-op-rh] .op-supa-h2 + .op-supa-list > div > i { color: #ff8fc8; }
html[data-op-rh] .op-supa-h { color: #ff5ea8; font-size: .78em; margin-right: 2px; }
html[data-op-rh] .op-supa-hearts { margin: 0 0 1.4rem; font-size: .86rem; }

/* Name history (29.10.2026): "formerly ..." under the profile name, calm grey line */
html[data-op-rh] .op-pf-former { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: -2px 0 8px; font-size: .8rem; color: var(--rh-mut, #9d9daa); line-height: 1.4; }
html[data-op-rh] .op-pf-former i { font-size: .72rem; margin-right: 3px; opacity: .8; }
html[data-op-rh] .op-pf-former b { font-weight: 600; color: var(--rh-txt, #d4d4dc); overflow-wrap: anywhere; }


/* Profile (owner 29.10.2026, screenshots "PLUS" + "On the website": no outline, then "no background at all, like the heart or
   Germany") - Plus mark and online status are plain text + dot, no fill, no ring/border/outline */
html[data-op-rh][data-op-rh][data-op-rh] .op-sup-plus-mk { box-shadow: none !important; border: 0 !important; outline: 0 !important; background: none !important; padding-left: 2px !important; padding-right: 2px !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-pf-tags .op-pf-tag.op-pf-status { box-shadow: none !important; border: 0 !important; outline: 0 !important; background: none !important; background-image: none !important; padding-left: 4px !important; padding-right: 4px !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-pf-tags .op-pf-tag.op-pf-status::before, html[data-op-rh][data-op-rh][data-op-rh] .op-pf-tags .op-pf-tag.op-pf-status::after { content: none !important; }
html[data-op-rh][data-op-rh][data-op-rh] .op-pf-tags .op-pf-tag.op-pf-status .op-dot { box-shadow: none !important; }

/* App icons (29.10.2026, owner screenshot "fix the logo"): the launcher icon is its own rounded tile with a transparent edge -
   a radius on the img cut its corners off. No clipping, no shadow. */
html[data-op-rh][data-op-rh][data-op-rh] .op-dl-icon, html[data-op-rh][data-op-rh][data-op-rh] .gh-launch-icon { border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; }

/* ===== home page, owner 30.10.2026: variant C of branding/rhythia/home-preview-v3.html with head 4 =====
   Full width head with four fixed cover pictures (branding/home-wall, stay like this for good) and a soft fade round the edges,
   top players as an overlay, light Silkscreen for headings, numbers and buttons, running text stays Inter. Classes: gh-head*, gh-big, gh-row*, gh-comm*. */
html[data-op-rh][data-op-rh] .pt-4:has(> .gh) { overflow-x: clip; }
html[data-op-rh][data-op-rh] .gh-head { position: relative; overflow: hidden; width: 100vw; margin-left: calc(50% - 50vw); min-height: 540px; display: flex; align-items: center; }
html[data-op-rh] .gh-head-wall { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); opacity: .42; }
html[data-op-rh] .gh-head-wall img { width: 100%; height: 100%; object-fit: cover; min-width: 0; }
html[data-op-rh] .gh-head::after { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(ellipse 72% 78% at 56% 44%, transparent 32%, rgba(9, 9, 11, .62) 72%, #09090b 100%),
  linear-gradient(90deg, rgba(9, 9, 11, .62), transparent 58%),
  linear-gradient(180deg, #09090b, transparent 16%, transparent 66%, #09090b); }
html[data-op-rh] .gh-head-in { position: relative; z-index: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 36px 16px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
html[data-op-rh] .gh-head-title { margin: 0; line-height: 1; }
html[data-op-rh][data-op-rh] .gh-head-title .op-rainbow-logo { font-size: clamp(2.2rem, 5.4vw, 3.6rem) !important; letter-spacing: .12em !important; }
html[data-op-rh] .gh-head-lead { margin: 14px 0 0; font-size: 1.05rem; line-height: 1.5; font-weight: 500; color: #e4e4ea; }
html[data-op-rh] .gh-head-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
html[data-op-rh][data-op-rh] .gh-head-cta .gh-btn { min-height: 44px; padding: 0 18px !important; border-radius: 6px !important; font-family: "Silkscreen", monospace !important; font-weight: 400 !important; font-size: .84rem !important; }
html[data-op-rh][data-op-rh] .gh-head-cta .gh-btn:not(.gh-btn-play) { background: #16161b !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2) !important; }
html[data-op-rh][data-op-rh] .gh-head-cta .gh-btn:not(.gh-btn-play):hover { background: #26262c !important; }
html[data-op-rh] .gh-board { background: rgba(9, 9, 11, .92); border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13); padding: 8px 20px 12px; }
html[data-op-rh][data-op-rh] .gh-board h2 { margin: 0; padding: 12px 0 8px; font-family: "Silkscreen", monospace !important; font-weight: 400 !important; font-size: .78rem !important; letter-spacing: 0 !important; color: #b4b4c0; }
html[data-op-rh] .gh-board > a:not(.gh-sidemore) { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; color: inherit; text-decoration: none; background: linear-gradient(rgba(255, 255, 255, .08), rgba(255, 255, 255, .08)) top / 100% 1px no-repeat; }
html[data-op-rh][data-op-rh] .gh-board > a:not(.gh-sidemore) > i { font-family: "Silkscreen", monospace; font-style: normal; font-size: 1.7rem; line-height: 1; color: var(--c); }
html[data-op-rh] .gh-board-n { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 700; overflow: hidden; white-space: nowrap; }
html[data-op-rh] .gh-board-n [data-op-name] { overflow: hidden; text-overflow: ellipsis; }
html[data-op-rh] .gh-board .gh-flag { width: 18px; height: 12px; border-radius: 2px; flex: none; }
html[data-op-rh] .gh-board em { font-family: "Silkscreen", monospace; font-style: normal; font-size: .92rem; white-space: nowrap; }
html[data-op-rh] .gh-board > a:not(.gh-sidemore):hover .gh-board-n { text-decoration: underline; text-underline-offset: 3px; }
html[data-op-rh] .gh-big { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 10px; color: inherit; text-decoration: none; }
html[data-op-rh] .gh-big span { display: block; padding: 20px; border-radius: 8px; background: #121216; }
html[data-op-rh] .gh-big:hover span { background: #17171c; }
html[data-op-rh] .gh-big b { display: block; font-family: "Silkscreen", monospace; font-weight: 400; font-size: clamp(1.25rem, 4vw, 2.3rem); line-height: 1; color: #fff; }
html[data-op-rh] .gh-big small { display: block; margin-top: 10px; font-size: .8rem; color: #9d9daa; }
html[data-op-rh][data-op-rh] .gh-rh .gh-sec { font-family: "Silkscreen", monospace !important; font-weight: 400 !important; font-size: 1.02rem !important; letter-spacing: 0 !important; margin: 38px 0 12px; justify-content: space-between; gap: 12px; }
html[data-op-rh][data-op-rh] .gh-rh .gh-sec-link { font-family: Inter, system-ui, sans-serif !important; font-size: .8rem !important; font-weight: 600 !important; }
html[data-op-rh] .gh-rh .gh-box { border-radius: 8px; }
html[data-op-rh] .gh-mrows { overflow: hidden; }
html[data-op-rh] .gh-mrow { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 9px; color: inherit; text-decoration: none; background: linear-gradient(rgba(255, 255, 255, .06), rgba(255, 255, 255, .06)) top / 100% 1px no-repeat; }
html[data-op-rh] .gh-mrow:first-child { background: none; }
html[data-op-rh][data-op-rh] .gh-mrow:hover { background: #17171c; color: inherit; }
html[data-op-rh] .gh-mrow-cv { height: 64px; border-radius: 5px; background-size: cover; background-position: center; }
html[data-op-rh] .gh-mrow-tx { min-width: 0; }
html[data-op-rh] .gh-mrow-tx b { display: block; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-op-rh] .gh-mrow-tx small { display: block; margin-top: 4px; font-size: .78rem; color: #9d9daa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-op-rh] .gh-mrow em { font-family: "Silkscreen", monospace; font-style: normal; font-size: .95rem; padding-right: 10px; white-space: nowrap; }
html[data-op-rh] .gh-comm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
html[data-op-rh] .gh-comm > .gh-box { padding: 16px; font-size: .86rem; line-height: 1.55; color: #d6d6de; min-width: 0; }
html[data-op-rh] .gh-comm p { margin: 0; }
html[data-op-rh] .gh-comm-link { display: inline-block; margin-top: 8px; font-weight: 700; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
html[data-op-rh] .gh-comm-t { display: block; margin-bottom: 4px; font-weight: 700; color: #fff; }
html[data-op-rh] .gh-comm .gh-none { padding: 0; }
html[data-op-rh] .gh-comm-on { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
html[data-op-rh] .gh-comm-on a { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 5px; background: rgba(255, 255, 255, .05); font-size: .78rem; font-weight: 600; color: inherit; text-decoration: none; max-width: 100%; overflow: hidden; white-space: nowrap; }
html[data-op-rh] .gh-comm-on .gh-flag { width: 18px; height: 12px; border-radius: 2px; flex: none; }
html[data-op-rh] .gh-comm-sups { margin-top: 16px; }
html[data-op-rh] .gh-comm .gh-sup { padding: 5px 0; }
@media (max-width: 860px) {
  html[data-op-rh][data-op-rh] .gh-head { min-height: 0; }
  html[data-op-rh] .gh-head-in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  html[data-op-rh] .gh-head-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-op-rh] .gh-head::after { background: radial-gradient(ellipse 110% 70% at 50% 40%, rgba(9, 9, 11, .35) 30%, rgba(9, 9, 11, .75) 75%, #09090b), linear-gradient(180deg, #09090b, transparent 14%, transparent 60%, #09090b); }
  html[data-op-rh] .gh-comm { grid-template-columns: minmax(0, 1fr); }
  html[data-op-rh] .gh-mrow { grid-template-columns: 96px minmax(0, 1fr) auto; gap: 12px; }
  html[data-op-rh] .gh-mrow-cv { height: 54px; }
  html[data-op-rh] .gh-mrow-tx small { white-space: normal; }
  html[data-op-rh] .gh-mrow em { font-size: .8rem; padding-right: 4px; }
}
@media (max-width: 480px) {
  html[data-op-rh] .gh-head-cta .gh-btn { flex: 1 1 auto; justify-content: center; }
  html[data-op-rh] .gh-big { gap: 8px; }
  html[data-op-rh] .gh-big span { padding: 14px 12px; }
}

/* ===== Kuro, the mascot (owner 30.10.2026, cat "Bohne", branding/mascot/gen-kuro.py). One sprite sheet per animation, moved with steps(): sits on the top players box,
   sleeps when nobody is online, lost on the 404 page. --n = number of frames (steps jump-none). Calm frame by frame movement only, off with op-lite / reduced motion (first frame stays). ===== */
html[data-op-rh][data-op-rh] .op-kuro { --s: 72px; position: relative; display: inline-block; width: var(--s); height: var(--s); overflow: hidden; flex: none; }
html[data-op-rh][data-op-rh] .op-kuro img { position: absolute; left: 0; top: 0; width: auto; height: 100%; max-width: none; image-rendering: pixelated; animation: opu-kuro-sheet var(--d) steps(var(--n), jump-none) infinite; }
@keyframes opu-kuro-sheet { to { transform: translateX(calc(-100% + var(--s))); } }
html[data-op-rh][data-op-lite] .op-kuro img { animation: none; }
@media (prefers-reduced-motion: reduce) { html[data-op-rh][data-op-rh] .op-kuro img { animation: none; } }
html[data-op-rh][data-op-rh] .op-kuro-idle { --n: 47; --d: 9.4s; }
html[data-op-rh][data-op-rh] .op-kuro-sleep { --n: 20; --d: 6s; --s: 48px; }
html[data-op-rh][data-op-rh] .op-kuro-lost { --n: 20; --d: 5s; --s: .9em; }
html[data-op-rh] .gh-board { position: relative; }
html[data-op-rh][data-op-rh] .gh-kuro { position: absolute; right: 24px; bottom: 100%; margin-bottom: -2px; }
/* a click: happy face, meow, hearts (osupompa-kuro-v1.js), owner 30.10.2026, the one exception to "no click effects" */
html[data-op-rh][data-op-rh] .op-kuro-pet { display: inline-flex; padding: 0; border: 0; background: none; box-shadow: none; font: inherit; color: inherit; cursor: pointer; }
html[data-op-rh] .op-kuro-pet:not(.gh-kuro) { position: relative; flex: none; }
html[data-op-rh] .op-kuro-pet:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
html[data-op-rh][data-op-rh] .op-kuro img.op-kuro-happy { display: none; width: 100%; height: 100%; animation: none; }
html[data-op-rh][data-op-rh] .is-happy .op-kuro img { visibility: hidden; }
html[data-op-rh][data-op-rh] .is-happy .op-kuro img.op-kuro-happy { display: block; visibility: visible; }
html[data-op-rh][data-op-rh] .op-kuro-heart { position: absolute; bottom: 72%; width: 21px; height: 18px; margin-left: -10px; opacity: 0; pointer-events: none; image-rendering: pixelated; animation: opu-kuro-heart 1.1s ease-out forwards; }
@keyframes opu-kuro-heart { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-48px); } }
html[data-op-rh] .gh-kuro-none { display: flex; align-items: center; gap: 10px; }
@media (max-width: 860px) { html[data-op-rh] .gh-head-in { gap: 84px; } }

/* Kuro, more of him (owner 30.10.2026): wave, point, nap, hats, big heart, small version for empty lists */
html[data-op-rh][data-op-rh] .op-kuro-wave { --n: 24; --d: 4.8s; --s: 64px; }
html[data-op-rh][data-op-rh] .op-kuro-point { --n: 18; --d: 3.6s; --s: 60px; }
html[data-op-rh][data-op-rh] .op-kuro-idle.op-kuro-nap { --n: 20; --d: 6s; }
html[data-op-rh][data-op-rh] .op-kuro.op-kuro-small { --s: 64px; }
html[data-op-rh][data-op-rh] .op-kuro img.op-kuro-hat { left: 0; top: 0; width: 100%; height: 100%; animation: none; transform: none; }
html[data-op-rh][data-op-rh] .is-happy .op-kuro img.op-kuro-hat { visibility: visible; }
html[data-op-rh][data-op-rh] .op-kuro-heart-big { width: 49px; height: 42px; margin-left: -24px; }
html[data-op-rh][data-op-rh] .op-kuro-note { display: flex; width: max-content; margin: 0 auto .6rem; }
html[data-op-rh][data-op-rh] .op-kuro-pet.op-kuro-auth { position: absolute; top: 20px; right: 20px; left: auto; width: max-content !important; height: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0; background: none !important; box-shadow: none !important; z-index: 1; }
html[data-op-rh][data-op-rh] .op-auth-main { position: relative; }
html[data-op-rh][data-op-rh] .op-supb-info { position: relative; }
html[data-op-rh][data-op-rh] .op-kuro-pet.op-kuro-sup { position: absolute; top: 12px; right: 14px; }
html[data-op-rh][data-op-rh] .op-kuro-sup .op-kuro { --s: 64px; }
html[data-op-rh] .op-dl-actions { align-items: center; }
html[data-op-rh][data-op-rh] .op-kuro-say { position: absolute; left: 50%; bottom: 96%; transform: translateX(-50%); padding: 3px 7px; border-radius: 4px; background: #fff; color: #09090b; font-family: "Silkscreen", monospace; font-size: 13px; line-height: 1.2; white-space: nowrap; pointer-events: none; z-index: 2; }

/* ---------- vote page, vote tab, home vote strip, pixel badges (owner 31.10.2026, look B of branding/votes/preview-v1.html) ---------- */
html[data-op-rh] .op-nav-links .nav-link.op-nav-vote { background: #fff !important; border-radius: 6px; }
html[data-op-rh] .op-nav-links .nav-link.op-nav-vote, html[data-op-rh] .op-nav-links .nav-link.op-nav-vote > span, html[data-op-rh] .op-nav-links .nav-link.op-nav-vote i { color: #0a0a0c !important; }
html[data-op-rh] .op-nav-links .nav-link.op-nav-vote i { animation: none; }
html[data-op-rh] .gh-votebar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 12px; padding: 12px 16px; border-radius: 8px; background: #121216; }
html[data-op-rh] .gh-votebar p { flex: 1 1 280px; min-width: 0; margin: 0; color: var(--op-muted); }
html[data-op-rh] .gh-votebar p b { color: #fff; }
html[data-op-rh] .gh-votebar-more { color: var(--op-muted); font-size: .86rem; }
html[data-op-rh] .gh-votebar-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border-radius: 6px; background: #fff; color: #0a0a0c !important; font: 400 .82rem "Silkscreen", monospace; text-decoration: none; }
html[data-op-rh] .op-vt-clock { margin-top: 1.2rem; padding: 30px 18px; border-radius: 8px; background: #121216; text-align: center; }
html[data-op-rh] .op-vt-clock .op-kuro { --s: 72px; }
html[data-op-rh] .op-vt-clock h1 { margin: 10px 0 0; color: var(--op-muted); font: 400 .82rem "Silkscreen", monospace !important; letter-spacing: 0; }
html[data-op-rh] .op-vt-big { margin: 8px 0; font: 400 clamp(1.9rem, 10vw, 4.4rem)/1.05 "Silkscreen", monospace; white-space: nowrap; font-variant-numeric: tabular-nums; }
html[data-op-rh] .op-vt-clock p { max-width: 560px; margin: 0 auto 14px; color: var(--op-muted); }
html[data-op-rh] .op-vt-clock p.op-vt-place { margin: 14px auto 0; font-size: .86rem; }
html[data-op-rh] .op-vt-go { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 6px; background: #fff; color: #0a0a0c !important; font: 400 .95rem "Silkscreen", monospace; text-decoration: none; }
html[data-op-rh] .op-vt-grid { margin: 12px 0 0; gap: 12px; }
html[data-op-rh][data-op-rh] .op-vt-card { padding: 18px; border-radius: 8px; background: #121216; box-shadow: none; }
html[data-op-rh] .op-vt-card h2 { font: 400 .95rem "Silkscreen", monospace !important; margin-bottom: 12px; }
html[data-op-rh] .op-vt-card h2 small { font-family: Inter, system-ui, sans-serif; }
html[data-op-rh] .op-vt-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 12px; }
html[data-op-rh] .op-vt-days i { display: flex; align-items: center; justify-content: center; height: 34px; background: #1a1a20; color: var(--op-muted); font: 400 .72rem "Silkscreen", monospace; }
html[data-op-rh] .op-vt-days i.on { background: #6ee7a8; color: #0a0a0c; }
html[data-op-rh][data-op-rh] .op-vt-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 0; }
html[data-op-rh] .op-vt-stats span { border-radius: 6px; background: #1a1a20; box-shadow: none; }
html[data-op-rh] .op-vt-stats b { font: 400 1.25rem "Silkscreen", monospace; }
html[data-op-rh] .op-vt-stats small { text-transform: none; letter-spacing: 0; }
html[data-op-rh][data-op-rh] .op-vt-rw { display: block; }
html[data-op-rh][data-op-rh] .op-vt-rwi { padding: 8px 0; border-radius: 0; background: none; box-shadow: 0 -1px 0 rgba(255, 255, 255, .06); }
html[data-op-rh][data-op-rh] .op-vt-rwi:first-child { padding-top: 0; box-shadow: none; }
html[data-op-rh][data-op-rh] .op-badge { padding: 0; border-radius: 0; background: none; box-shadow: none; animation: none; overflow: visible; }
html[data-op-rh][data-op-rh] .op-badge::after { display: none; }
html[data-op-rh][data-op-rh] .op-badge img { border-radius: 0; background: none; }
html[data-op-rh][data-op-rh] .op-badge:hover { transform: none; box-shadow: none; opacity: .85; }
html[data-op-rh] .gh-votebar-btn i, html[data-op-rh] .op-vt-go i { color: #0a0a0c !important; }
html[data-op-rh] .op-vt-card h2 { flex-wrap: wrap; }

/* ---------- top right of the menu bar, variant B of branding/nav/preview-v1.html (owner 31.10.2026): no boxes, thin line icons, rank under the name ---------- */
html[data-op-rh] .op-ln { display: block; line-height: 0; }
html[data-op-rh] .op-ln svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
html[data-op-rh][data-op-rh] .op-nav .op-theme-btn, html[data-op-rh][data-op-rh] .op-nav .op-bell-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px !important; min-width: 34px; height: 34px; padding: 0 !important; border-radius: 50% !important; color: #b9b9c3; text-decoration: none; transform: none !important; transition: color .15s, background .15s; }
html[data-op-rh][data-op-rh] .op-nav .op-bell-btn:hover, html[data-op-rh][data-op-rh] .op-nav .op-bell-btn[aria-expanded="true"], html[data-op-rh][data-op-rh] .op-nav .op-theme-btn:hover { background: rgba(255, 255, 255, .07) !important; color: #fff; }
html[data-op-rh][data-op-rh] .op-nav .op-bell-btn > i { color: inherit; font-size: inherit; animation: none !important; }
html[data-op-rh][data-op-rh] .op-nav .op-chat-btn { margin-right: 0; }
html[data-op-rh][data-op-rh] .op-nav .op-nav-discord { margin-right: 0; }
html[data-op-rh][data-op-rh] .op-nav .op-nav-discord i { font-size: inherit; }
html[data-op-rh][data-op-rh] .op-nav .op-theme-btn .op-theme-flag { width: 20px !important; height: 20px !important; border-radius: 50% !important; object-fit: cover; }
html[data-op-rh][data-op-rh] .op-nav-search > i.op-ln { color: #b9b9c3; font-size: inherit; }
html[data-op-rh][data-op-rh] .op-nav-search:focus-within > i.op-ln { color: #fff; }
html[data-op-rh][data-op-rh] .op-nav .op-bell-count { top: 1px; right: -1px; min-width: 16px; height: 16px; padding: 0 4px; border: 0; background: #ff5f6d; color: #fff; font: 700 10px/16px Inter, system-ui, sans-serif; box-shadow: 0 0 0 2px #000; animation: none; }
html[data-op-rh] .op-nav-user { align-items: center; gap: 4px; }
html[data-op-rh][data-op-rh] .op-nav-user-btn { display: flex; align-items: center; gap: 10px; height: auto; padding: 3px 8px 3px 3px; margin-left: 10px; border: 0; border-radius: 12px; background: none !important; background-image: none !important; box-shadow: none !important; color: #fff; text-align: left; position: relative; transform: none !important; }
html[data-op-rh][data-op-rh] .op-nav-user-btn::before { content: ""; position: absolute; left: -9px; top: 50%; width: 1px; height: 26px; margin-top: -13px; background: rgba(255, 255, 255, .09); }
html[data-op-rh][data-op-rh] .op-nav-user-btn:hover, html[data-op-rh][data-op-rh] .op-nav-user-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .06) !important; }
html[data-op-rh][data-op-rh] .op-nav-user-btn img { width: 36px; height: 36px; border-radius: 50%; box-shadow: none; flex: none; }
html[data-op-rh] .op-nav-me { display: block; max-width: 124px !important; min-width: 0; overflow: visible !important; }
html[data-op-rh] .op-nav-me b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; font-weight: 600; line-height: 1.2; }
html[data-op-rh] .op-nav-me small { display: block; color: #9d9da8; font-size: .74rem; font-weight: 500; line-height: 1.25; white-space: nowrap; }
html[data-op-rh][data-op-glass][data-bs-theme] .op-nav .op-nav-menu.show { animation: none !important; }
html[data-op-rh][data-op-rh] .op-nav-menu { width: 280px; padding: 8px !important; border: 0; border-radius: 14px !important; background: #121216 !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 18px 40px rgba(0, 0, 0, .55) !important; }
html[data-op-rh] .op-nav-menu-head a { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; padding: 10px; border-radius: 10px; background: #1b1b21; color: #fff; text-decoration: none; }
html[data-op-rh] .op-nav-menu-head a:hover { background: #24242b; }
html[data-op-rh] .op-nav-menu-head img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; }
html[data-op-rh] .op-nav-menu-head span { min-width: 0; }
html[data-op-rh] .op-nav-menu-head b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; font-weight: 700; line-height: 1.2; }
html[data-op-rh] .op-nav-menu-head small { display: block; color: #9d9da8; font-size: .78rem; }
html[data-op-rh][data-op-rh] .op-nav-menu .dropdown-item { gap: 11px; padding: 8px 10px !important; border-radius: 9px !important; color: #dcdce2; font-size: .9rem; font-weight: 500 !important; }
html[data-op-rh][data-op-rh] .op-nav-menu .dropdown-item:hover { background: rgba(255, 255, 255, .06) !important; color: #fff; }
html[data-op-rh] .op-nav-menu .op-ln { color: #9d9da8; }
html[data-op-rh] .op-nav-menu .op-ln svg { width: 18px; height: 18px; }
html[data-op-rh] .op-nav-menu .dropdown-divider { margin: 6px 10px; border-color: rgba(255, 255, 255, .09); opacity: 1; }
/* the column is 1100 px: links + search + the icons + the name must fit, also with a long name (31.10.2026) */
@media (min-width: 1400px) {
  html[data-op-rh][data-op-rh] .op-nav-links .nav-link { padding-left: .5rem !important; padding-right: .5rem !important; }
  html[data-op-rh] .op-nav-links { flex: none; }
  html[data-op-rh] .op-nav .navbar-collapse { min-width: 0; }
  html[data-op-rh] .op-nav-me { max-width: 108px !important; }
}
/* search in the menu bar (owner 31.10.2026): only the magnifier; clicked, the bar rolls open and pushes Discord, flag, chat and bell out to the right.
   Stays open while results are showing. A long name makes it shorter (flex-shrink), it never runs over the menu links. */
@media (min-width: 1400px) {
  html[data-op-rh][data-op-rh] .op-nav-search { flex: 0 1 auto; width: 34px; min-width: 34px; height: 34px; margin: 0 .1rem !important; transition: width .34s cubic-bezier(.22, 1, .36, 1), margin .34s cubic-bezier(.22, 1, .36, 1); }
  html[data-op-rh][data-op-rh] .op-nav-search:is(:focus-within, :has(#fable-search:not(.d-none))) { width: 320px; margin: 0 .4rem 0 .6rem !important; }
  html[data-op-rh][data-op-rh] .op-nav-search > i.op-ln, html[data-op-rh][data-op-rh] .op-nav-search:focus-within > i.op-ln { left: 17px; right: auto; transform: translate(-50%, -50%); z-index: 4; }
  html[data-op-rh][data-op-rh] .op-nav-search .fable-search-input, html[data-op-rh][data-op-rh] .op-nav-search:focus-within .fable-search-input {
    position: absolute; inset: 0; width: 100% !important; height: 34px; min-height: 0; padding: 0 !important; transform: none; border: 0; border-radius: 17px !important;
    font-size: .9rem !important; cursor: pointer; color: transparent; background: transparent !important; box-shadow: none !important; transition: background .2s, box-shadow .2s; }
  html[data-op-rh][data-op-rh] .op-nav-search .fable-search-input:hover { background: rgba(255, 255, 255, .07) !important; }
  html[data-op-rh][data-op-rh] .op-nav-search .fable-search-input::placeholder { color: transparent !important; transition: color .2s; }
  html[data-op-rh][data-op-rh] .op-nav-search .fable-search-input::-webkit-search-cancel-button { display: none; }
  html[data-op-rh][data-op-rh] .op-nav-search:is(:focus-within, :has(#fable-search:not(.d-none))) .fable-search-input { padding: 0 12px 0 40px !important; color: #fff; cursor: text; background: #1b1b21 !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13) !important; }
  html[data-op-rh][data-op-rh] .op-nav-search:focus-within .fable-search-input::placeholder { color: #8b8b96 !important; transition-delay: .1s; }
  html[data-op-rh][data-op-rh] .op-nav-search #fable-search { top: calc(100% + 8px); left: 0; right: auto; width: max(100%, 340px); }
  html[data-op-rh][data-op-rh] .op-nav .op-nav-discord, html[data-op-rh][data-op-rh] .op-nav .op-lang-only, html[data-op-rh][data-op-rh] .op-nav .op-chat-btn, html[data-op-rh][data-op-rh] .op-nav .op-bell {
    transition: margin-right .34s cubic-bezier(.22, 1, .36, 1), opacity .22s .08s, visibility 0s; }
  html[data-op-rh][data-op-rh] .op-nav .op-nav-search:is(:focus-within, :has(#fable-search:not(.d-none))) ~ .op-nav-discord,
  html[data-op-rh][data-op-rh] .op-nav .op-nav-search:is(:focus-within, :has(#fable-search:not(.d-none))) ~ .op-lang-only,
  html[data-op-rh][data-op-rh] .op-nav .op-nav-search:is(:focus-within, :has(#fable-search:not(.d-none))) ~ .op-nav-user .op-chat-btn,
  html[data-op-rh][data-op-rh] .op-nav .op-nav-search:is(:focus-within, :has(#fable-search:not(.d-none))) ~ .op-nav-user .op-bell {
    margin-right: -34px; opacity: 0; visibility: hidden; pointer-events: none; transition: margin-right .34s cubic-bezier(.22, 1, .36, 1), opacity .14s, visibility 0s .14s; }
}
@media (min-width: 1400px) {
  /* the name steps aside too, the column is too tight for a usable bar otherwise; the picture stays */
  html[data-op-rh][data-op-rh] .op-nav-user-btn .op-nav-me { transition: max-width .34s cubic-bezier(.22, 1, .36, 1), opacity .22s .08s; }
  html[data-op-rh][data-op-rh] .op-nav .op-nav-search:is(:focus-within, :has(#fable-search:not(.d-none))) ~ .op-nav-user :is(.op-chat-btn, .op-bell) { margin-right: -38px; }
  html[data-op-rh][data-op-rh] .op-nav .op-nav-search:is(:focus-within, :has(#fable-search:not(.d-none))) ~ .op-nav-user .op-nav-me { max-width: 0 !important; overflow: hidden !important; opacity: 0; transition: max-width .34s cubic-bezier(.22, 1, .36, 1), opacity .14s; }
}
@media (min-width: 1400px) and (prefers-reduced-motion: reduce) {
  html[data-op-rh][data-op-rh] .op-nav-user-btn .op-nav-me, html[data-op-rh][data-op-rh] .op-nav-search, html[data-op-rh][data-op-rh] .op-nav .op-nav-discord, html[data-op-rh][data-op-rh] .op-nav .op-lang-only, html[data-op-rh][data-op-rh] .op-nav .op-chat-btn, html[data-op-rh][data-op-rh] .op-nav .op-bell { transition: none !important; }
}
@media (max-width: 1399.98px) {
  html[data-op-rh] .op-nav .navbar-collapse.show, html[data-op-rh] .op-nav .navbar-collapse.collapsing { display: flex; flex-flow: row wrap; align-items: center; gap: 4px; }
  html[data-op-rh] .op-nav .navbar-collapse > .op-nav-links, html[data-op-rh] .op-nav .navbar-collapse > .op-nav-search { flex: 0 0 100%; width: 100%; }
  html[data-op-rh] .op-nav .op-nav-user { padding-bottom: 0; }
}
html[data-op-rh][data-op-rh] .op-nav-user-btn .op-nav-me { display: block !important; }
html[data-op-rh][data-op-rh] .op-nav-user-btn .op-nav-me b span { display: inline !important; max-width: none !important; }
/* ---------- home page: "On Kuroosu" film strip (owner 31.10.2026, variant B of branding/showcase/preview-v1.html), drag or swipe, nothing moves by itself ---------- */
html[data-op-rh] .gh-film-h { align-items: center; justify-content: space-between; }
html[data-op-rh] .gh-film-ar { display: flex; gap: 6px; }
html[data-op-rh][data-op-rh] .gh-film-ar button { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 9px; background: #1b1b21; color: #c8c8d0; font-size: .8rem; cursor: pointer; transition: background .15s, color .15s; }
html[data-op-rh][data-op-rh] .gh-film-ar button:hover:not(:disabled) { background: #24242b; color: #fff; }
html[data-op-rh][data-op-rh] .gh-film-ar button:disabled { opacity: .35; cursor: default; }
html[data-op-rh] .gh-film { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 24px) / 3); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; cursor: grab; }
html[data-op-rh] .gh-film::-webkit-scrollbar { display: none; }
html[data-op-rh] .gh-film.drag { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; user-select: none; }
html[data-op-rh] .gh-film.drag .gh-film-c { pointer-events: none; }
html[data-op-rh] .gh-film-c { display: flex; flex-direction: column; min-width: 0; overflow: hidden; scroll-snap-align: start; border-radius: 14px; background: #121216; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); color: inherit; text-decoration: none; transition: background .15s; }
html[data-op-rh] .gh-film-c:hover { background: #17171c; color: inherit; }
html[data-op-rh][data-op-rh] .gh-film-c img { display: block; width: 100%; height: auto; aspect-ratio: 20 / 11; object-fit: cover; object-position: top left; pointer-events: none; }
html[data-op-rh] .gh-film-c > span { display: block; padding: 12px 14px 14px; }
html[data-op-rh] .gh-film-c b { display: block; color: #fff; font-size: .98rem; font-weight: 700; }
html[data-op-rh] .gh-film-c small { display: block; color: #9d9da8; font-size: .84rem; line-height: 1.4; }
html[data-op-rh] .gh-film-bar { height: 2px; margin-top: 12px; overflow: hidden; border-radius: 2px; background: #1b1b21; }
html[data-op-rh] .gh-film-bar i { display: block; height: 100%; background: #fff; }
@media (max-width: 760px) { html[data-op-rh] .gh-film { grid-auto-columns: 78%; } html[data-op-rh][data-op-rh] .gh-film-ar { display: none; } }
@media (prefers-reduced-motion: reduce) { html[data-op-rh] .gh-film { scroll-behavior: auto; } }
html[data-op-rh][data-op-lite] .gh-film { scroll-behavior: auto; }

/* weekly league */
html[data-op-rh][data-op-rh] .op-lea-card, html[data-op-rh][data-op-rh] .op-lea-stats > div { background: #121216; box-shadow: none; }
html[data-op-rh] .op-lea-top h1 { font: 400 clamp(1.5rem, 5vw, 2.4rem)/1.1 "Silkscreen", monospace !important; letter-spacing: 0; }
html[data-op-rh] .op-lea-card h2 { font: 400 .95rem "Silkscreen", monospace !important; }
html[data-op-rh] .op-lea-card h2 small { margin-left: auto; opacity: .68; font: 500 .82rem Inter, system-ui, sans-serif; }

/* search results: a solid box, the page behind them must not show through */
html[data-op-rh][data-op-rh] #fable-search { background: #121216 !important; border: 1px solid rgba(255, 255, 255, .13); border-radius: 8px; box-shadow: 0 12px 28px rgba(0, 0, 0, .6); }
html[data-op-rh][data-op-rh] #fable-search .list-group, html[data-op-rh][data-op-rh] #fable-search .list-group-item { background: transparent; }
html[data-op-rh][data-op-rh] #fable-search a:hover, html[data-op-rh][data-op-rh] #fable-search .list-group-item:hover { background: #1a1a20; }
/* sad Kuro in empty boxes */
html[data-op-rh][data-op-rh] .op-kuro-sad { --n: 16; --d: 4s; }

/* leaderboard + clan leaderboard: tiles of look C in branding/redesign/preview-v2.html, owner 31.10.2026 */
html[data-op-rh][data-op-rh] .op-lbx-table { gap: 4px; }
html[data-op-rh][data-op-rh] .op-lbx-row:not(.op-lbx-head) { min-height: 46px; border-radius: 6px !important; background: #121216 !important; box-shadow: none !important; }
html[data-op-rh][data-op-rh] .op-lbx-row:not(.op-lbx-head):hover { background: #1a1a20 !important; }
html[data-op-rh][data-op-rh] .op-lbx-row.op-lbx-top1, html[data-op-rh][data-op-rh] .op-lbx-row.op-lbx-top2, html[data-op-rh][data-op-rh] .op-lbx-row.op-lbx-top3 { background: #1a1a20 !important; }
html[data-op-rh][data-op-rh] .op-lbx-row.op-lbx-top1:hover, html[data-op-rh][data-op-rh] .op-lbx-row.op-lbx-top2:hover, html[data-op-rh][data-op-rh] .op-lbx-row.op-lbx-top3:hover { background: #222229 !important; }
html[data-op-rh][data-op-rh] .op-lbx-row.op-lbx-top1 { box-shadow: inset 3px 0 0 #ffd25e !important; }
html[data-op-rh][data-op-rh] .op-lbx-row.op-lbx-top2 { box-shadow: inset 3px 0 0 #d9dde6 !important; }
html[data-op-rh][data-op-rh] .op-lbx-row.op-lbx-top3 { box-shadow: inset 3px 0 0 #e3a06b !important; }
html[data-op-rh][data-op-rh] .op-lbx-row.op-lbx-top1 .op-lbx-no { color: #ffd25e; }
html[data-op-rh][data-op-rh] .op-lbx-row.op-lbx-top2 .op-lbx-no { color: #d9dde6; }
html[data-op-rh][data-op-rh] .op-lbx-row.op-lbx-top3 .op-lbx-no { color: #e3a06b; }
html[data-op-rh][data-op-rh] .op-lbx-row.op-lbx-me { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3) !important; }
html[data-op-rh] .op-cbd .op-lbx-grp .op-cbd-search { width: min(340px, 100%); margin: 0; }
html[data-op-rh] .op-cbd .op-cbd-search input { height: 36px; border-radius: 8px; }
/* tournaments: look A of branding/redesign/preview-v2.html, owner 31.10.2026 */
html[data-op-rh] .op-tnp-hero { position: relative; display: flex; align-items: flex-end; min-height: 340px; margin: 18px 0 12px; padding: 24px; border-radius: 8px; overflow: hidden; background: #15151b center / cover no-repeat; color: #fff; text-decoration: none; }
html[data-op-rh] .op-tnp-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9, 9, 11, .15), rgba(9, 9, 11, .92)); }
html[data-op-rh] .op-tnp-in { position: relative; z-index: 1; width: 100%; min-width: 0; }
html[data-op-rh] .op-tnp-state { color: #d5d5dc; font-weight: 700; font-size: .92rem; }
html[data-op-rh][data-op-rh] .op-tnp-hero h1 { margin: 2px 0 0; font: 800 clamp(1.9rem, 6vw, 3.2rem)/1.08 Inter, system-ui, sans-serif !important; letter-spacing: -.03em; color: #fff; overflow-wrap: anywhere; }
html[data-op-rh] .op-tnp-facts { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 14px; }
html[data-op-rh] .op-tnp-facts span { display: block; color: #c0c0c8; font-size: .8rem; }
html[data-op-rh] .op-tnp-facts b { display: block; font-size: 1.05rem; overflow-wrap: anywhere; }
html[data-op-rh] .op-tnp-facts img { width: 22px; height: 15px; margin-right: 6px; border-radius: 2px; object-fit: cover; vertical-align: -2px; }
html[data-op-rh] .op-tnp-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 14px 16px; border-radius: 8px; background: #121216; }
html[data-op-rh] .op-tnp-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 16px; border-radius: 6px; background: #fff; color: #0a0a0c !important; font-weight: 700; font-size: .9rem; text-decoration: none; }
@media (max-width: 640px) { html[data-op-rh] .op-tnp-hero { min-height: 300px; padding: 16px; } }
/* hall of fame: look A of branding/redesign/preview-v3.html, owner 31.10.2026 */
html[data-op-rh] .op-hb { max-width: 1040px; }
html[data-op-rh] .op-hb-top { margin: 18px 0 14px; }
html[data-op-rh][data-op-rh] .op-hb-top h1 { margin: 0; font: 800 clamp(1.9rem, 6vw, 3.2rem)/1.08 Inter, system-ui, sans-serif !important; letter-spacing: -.03em; }
html[data-op-rh] .op-hb-top p { margin: 4px 0 0; color: var(--op-muted); }
html[data-op-rh] .op-hb-box { min-width: 0; padding: 16px; border-radius: 8px; background: #121216; }
html[data-op-rh][data-op-rh] .op-hb-box h2 { margin: 0; font: 700 1rem Inter, system-ui, sans-serif !important; letter-spacing: 0; text-transform: none; }
html[data-op-rh] .op-hb-box > p { margin: 2px 0 12px; color: var(--op-muted); font-size: .84rem; }
html[data-op-rh] .op-hb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
html[data-op-rh] .op-hb-race svg { display: block; width: 100%; overflow: visible; touch-action: pan-y; }
html[data-op-rh] .op-hb-race text { fill: #9d9da8; font: 500 11px Inter, system-ui, sans-serif; }
html[data-op-rh] .op-hb-race text.n { fill: #f4f4f6; font-weight: 700; font-size: 12px; }
html[data-op-rh] .op-hb-tip { position: fixed; z-index: 1040; display: none; max-width: 230px; padding: 7px 10px; border-radius: 6px; background: #1a1a20; box-shadow: 0 0 0 1px rgba(255, 255, 255, .13); font-size: .82rem; pointer-events: none; }
html[data-op-rh] .op-hb-tip b { display: block; }
html[data-op-rh] .op-hb-tip div { display: flex; align-items: center; gap: 7px; }
html[data-op-rh] .op-hb-tip i { width: 9px; height: 9px; border-radius: 2px; }
html[data-op-rh] .op-hb-row { display: grid; grid-template-columns: minmax(0, 160px) minmax(0, 1fr) 66px; gap: 10px; align-items: center; min-height: 28px; border-radius: 4px; color: inherit; font-size: .9rem; text-decoration: none; }
html[data-op-rh] .op-hb-row:hover { background: #1a1a20; }
html[data-op-rh] .op-hb-who { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
html[data-op-rh] .op-hb-track i { display: block; height: 14px; border-radius: 0 4px 4px 0; background: #d7d7de; }
html[data-op-rh] .op-hb-row b { font-size: .86rem; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
html[data-op-rh] .op-hb-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; font-size: .9rem; }
html[data-op-rh] .op-hb-line > span { display: flex; align-items: center; gap: 10px; min-width: 0; }
html[data-op-rh] .op-hb-line em { flex: none; color: var(--op-muted); font-style: normal; font-size: .84rem; }
@media (max-width: 760px) {
  html[data-op-rh] .op-hb-grid { grid-template-columns: minmax(0, 1fr); }
  html[data-op-rh] .op-hb-row { grid-template-columns: 124px minmax(0, 1fr) 62px; }
}

/* Profile look "Cover" (owner 01.11.2026, picked B from branding/profile/preview-v8.html): the layout stays, colour comes from
   the pictures. The banner runs into the page and every score shows its whole map cover. Only /u/ (.op-pf-user), .op-pf is also
   used by clans and scores. Profile looks from gem boxes keep their colour (:not(.op-gmt), themes-v1.css). */
html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user:not(.op-gmt) .op-pf-header { background: transparent !important; box-shadow: none !important; }
html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user .op-pf-header { overflow: visible !important; }
html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user .op-pf-cover { position: relative; border-radius: 14px 14px 0 0; }
html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user:not(.op-gmt) .op-pf-cover { background-color: #121216; }
html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user .op-pf-cover::after { content: ""; position: absolute; inset: 0; display: block !important; opacity: 1 !important; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 12%, rgba(9, 9, 11, .5) 52%, rgba(9, 9, 11, .88) 78%, #09090b 100%) !important; pointer-events: none; }
html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user .op-pf-name { font-size: 2.6rem !important; font-weight: 800 !important; letter-spacing: -.02em; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .9)) drop-shadow(0 2px 10px rgba(0, 0, 0, .7)); }
html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user .op-pf-bar::before, html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user .op-pf-stats::before, html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user .op-pf-stats::after { display: none !important; }
html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user .op-pf-rank strong { font-size: 2.5rem !important; font-weight: 800 !important; letter-spacing: -.02em; }
html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user .op-pf-stat strong { font-size: 1.25rem !important; font-weight: 700 !important; }
html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user .op-pfa-extra .op-pf-stat small, html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user .op-pfa-extra .op-pf-stat strong { font-size: .8rem !important; font-weight: 600 !important; white-space: nowrap; }
html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user .op-pf-stat small, html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user .op-pf-rank small { font-size: .74rem !important; letter-spacing: 0 !important; text-transform: none !important; }

html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user .op-sc.op-sc-rh { min-height: 72px; overflow: hidden; border-radius: 10px !important; box-shadow: inset 3px 0 0 var(--gc, #8a8a96) !important; }
html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user:not(.op-gmt) .op-sc.op-sc-rh, html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user:not(.op-gmt) .op-sc.op-sc-rh:hover { background: #121216 !important; }
html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user .op-sc-rh .op-sc-bg { inset: 0 !important; width: 100% !important; opacity: 1 !important; background-position: center 30% !important; transition: transform .35s ease; }
html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user .op-sc-rh .op-sc-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 12, 15, .78) 0%, rgba(12, 12, 15, .5) 45%, rgba(12, 12, 15, .82) 100%); }
html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user .op-sc.op-sc-rh:hover .op-sc-bg { transform: scale(1.03); }
html[data-op-rh][data-op-lite] .op-pf-user .op-sc.op-sc-rh:hover .op-sc-bg { transform: none; }
@media (prefers-reduced-motion: reduce) { html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user .op-sc.op-sc-rh:hover .op-sc-bg { transform: none; } }
html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user .op-sc-rh .rh-acc { font-size: 1.1rem !important; }
html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user .op-sc-rh .rh-acc::after { display: none; }
html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user .op-sc-rh .rh-g img { height: 32px !important; }
html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user .op-sc-title { font-size: .98rem !important; font-weight: 700 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user .rh-sub, html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user .op-sc-weight { color: #d6d6de !important; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user .op-sc-rh .rh-tag { background: rgba(9, 9, 11, .62) !important; box-shadow: none !important; }
html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user .op-played { position: relative; overflow: hidden; border-radius: 10px !important; }
html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user .op-played-bg { opacity: .42 !important; }
html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user .op-pf-section h5, html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user .op-rankgraph-head h5, html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user .op-medals-head h5 { font-size: 1.15rem !important; font-weight: 800 !important; letter-spacing: -.01em !important; text-transform: none !important; }
html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user .op-pf-section h5 i, html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user .op-rankgraph-head h5 i, html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user .op-medals-head h5 i { display: none !important; }
html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user .op-pf-section .flex-grow-1 { visibility: hidden; }
html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user .op-rankgraph { border-radius: 14px !important; box-shadow: none !important; }
html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user:not(.op-gmt) .op-rankgraph { background: #121216 !important; }
html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user .op-medal-hex { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)) !important; }
html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user:not(.op-gmt) .op-pf-stat small, html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user:not(.op-gmt) .op-pf-rank small { color: #a8a8b4 !important; }
html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user:not(.op-gmt) .op-pf-section h5, html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user:not(.op-gmt) .op-rankgraph-head h5, html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user:not(.op-gmt) .op-medals-head h5 { color: #f5f5f7 !important; }

/* the same look with a gem box theme: covers stay visible, tinted in the colour of the look (--t-*, themes-v1.css) */
html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user.op-gmt .op-pf-stat small, html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user.op-gmt .op-pf-rank small { color: var(--t-b) !important; opacity: .82; }
html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user.op-gmt .op-rankgraph-head h5, html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user.op-gmt .op-medals-head h5 { color: var(--t-b) !important; }
html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user.op-gmt .op-pf-cover { background: rgb(var(--t-row)) !important; }
html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user.op-gmt .op-pf-cover::after { background: linear-gradient(180deg, rgba(var(--t-box), 0) 12%, rgba(var(--t-box), .5) 52%, rgba(var(--t-box), .88) 78%, rgb(var(--t-box)) 100%) !important; }
html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user.op-gmt .op-pf-section { padding: 14px 16px 16px !important; }
html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user.op-gmt .op-pf-section:has(> .op-rankgraph) { padding: 0 !important; }
html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user.op-gmt .op-rankgraph { background: transparent !important; }
html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user.op-gmt .op-sc-rh .op-sc-bg::after { background: linear-gradient(90deg, rgba(var(--t-row), .86) 0%, rgba(var(--t-row), .58) 45%, rgba(var(--t-row), .88) 100%); }
html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user.op-gmt .op-played { background: rgb(var(--t-row)) !important; }
html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user.op-gmt .op-pf-section .card { background: rgba(var(--t-row), .7) !important; }
@media (max-width: 700px) {
  html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user .op-pf-name { font-size: 1.9rem !important; }
  html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user .op-pf-rank strong { font-size: 1.9rem !important; }
  html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user .op-sc.op-sc-rh { min-height: 64px; }
  html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user .op-pfa-main .op-pf-stat strong { font-size: .95rem !important; white-space: nowrap; }
  html[data-op-rh][data-op-rh][data-op-rh][data-op-rh] .op-pf-user .op-pfa-main .op-pf-stat small { font-size: .62rem !important; }
}