/* 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: 116px; flex: none; align-self: stretch; padding: 0 12px; position: relative;
  font-weight: 800; font-variant-numeric: tabular-nums; font-size: .92rem; }
html[data-op-rh] .op-sc-rh .rh-acc::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gc, #8a8a96); }
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 { font-weight: 900; font-size: 1.02rem; color: var(--gc, #8a8a96); min-width: 18px; text-align: center; }
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: 98px; 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 18.10.: "ich will k-Kachel" = draft Q in branding/kuroosu/logo2-preview-v4.html) =====
   white rounded tile with a black k; the name in Outfit: "kuro" bold white, "osu" thin grey */
html[data-op-rh][data-op-rh] .op-rainbow-logo { font-family: "Outfit", var(--op-font-text) !important; font-weight: 800 !important; letter-spacing: -.02em !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important; background: none !important; filter: none !important; padding: 0 .04em .06em !important; margin-bottom: 0 !important; line-height: 1.1 !important; }
html[data-op-rh][data-op-rh] .op-rainbow-logo .op-wm-osu { font-style: normal; font-weight: 300; color: #a9a9b4; -webkit-text-fill-color: #a9a9b4; }
html[data-op-rh] .op-nav .op-nav-logo { border-radius: 13px !important; }
html[data-op-rh] .op-nav .op-logo-text { font-size: 1.3rem !important; }
html[data-op-rh] .gh-hero .gh-hero-logo { border-radius: 42px !important; box-shadow: none !important; }
html[data-op-rh] .gh-hero .gh-title .op-rainbow-logo { font-size: 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: 3.5rem !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: 22px !important; margin-bottom: 10px !important; }
html[data-op-rh][data-op-rh] .gh-hero2-title .op-rainbow-logo { font-size: 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: 200, 200, 210; }
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 18.10.2026: chat draft A "Zeilen" (branding/chat/preview-v1.html) - no bubbles: every message is a row with a thin
   line on the left (white = you, supporters' message colour = their line), a block of messages starts with name + time ===== */
html[data-op-rh][data-op-rh] .op-chat-msgs { gap: 0 !important; }
html[data-op-rh][data-op-rh] .op-chat-msg { position: relative; max-width: none !important; width: 100%; align-self: stretch !important; align-items: stretch !important;
  padding: 1px 120px 1px 18px !important; margin: 0 !important; border-radius: 8px; }
html[data-op-rh][data-op-rh] .op-chat-msg.op-chat-first { margin-top: 12px !important; padding-top: 6px !important; }
html[data-op-rh][data-op-rh] .op-chat-msg::before { content: ""; position: absolute; left: 6px; top: 3px; bottom: 3px; width: 3px; border-radius: 3px; background: rgba(255, 255, 255, .08); }
html[data-op-rh][data-op-rh] .op-chat-msg.mine::before { background: #f5f5f7; }
html[data-op-rh][data-op-rh] .op-chat-msg.has-bub::before { background: var(--bub); }
html[data-op-rh][data-op-rh] .op-chat-msg:hover { background: rgba(255, 255, 255, .025); }
html[data-op-rh][data-op-rh] .op-chat-rowhead { display: flex; align-items: baseline; gap: 8px; margin: 0 0 2px; }
html[data-op-rh][data-op-rh] .op-chat-rowhead a { color: #fff; text-decoration: none; font-weight: 700; font-size: .88rem; }
html[data-op-rh][data-op-rh] .op-chat-rowhead small { font-size: .72rem !important; color: var(--rh-mut) !important; margin: 0 !important; }
html[data-op-rh][data-op-rh] .op-chat-msg .op-chat-bubble, html[data-op-rh][data-op-rh] .op-chat-msg.mine .op-chat-bubble,
html[data-op-rh][data-op-rh] .op-chat-msg.has-bub .op-chat-bubble:not(.is-photo):not(.is-sticker):not(.is-deleted) {
  background: none !important; background-image: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 1px 0 !important;
  color: #dcdce3 !important; font-weight: 400 !important; max-width: 100%; }
html[data-op-rh][data-op-rh] .op-chat-msg .op-chat-bubble.is-photo { padding: 4px 0 !important; }
html[data-op-rh][data-op-rh] .op-chat-msg .op-chat-bubble.is-photo img { border-radius: 8px; }
html[data-op-rh][data-op-rh] .op-chat-msg .op-chat-bubble.is-deleted { color: rgba(255, 255, 255, .4) !important; }
html[data-op-rh][data-op-rh] .op-chat-msg .op-chat-quote { border-radius: 6px !important; }
/* time + read ticks of each message: small on the right, only on hover (the block head already shows the time) */
html[data-op-rh][data-op-rh] .op-chat-msg > small { position: absolute; right: 10px; top: 4px; margin: 0 !important; opacity: 0; transition: opacity .15s; }
html[data-op-rh][data-op-rh] .op-chat-msg:hover > small, html[data-op-rh][data-op-rh] .op-chat-msg.mine:last-child > small { opacity: 1; }
/* react / reply / more buttons: on the right of the row */
html[data-op-rh][data-op-rh] .op-chat-msg .op-chat-acts, html[data-op-rh][data-op-rh] .op-chat-msg.mine .op-chat-acts { left: auto !important; right: 64px !important; top: 0 !important; transform: none !important; flex-direction: row !important; }
html[data-op-rh][data-op-rh] .op-chat-msg.pinned .op-chat-bubble::after { display: none !important; }
html[data-op-rh][data-op-rh] .op-chat-msg.pinned::before { background: #3b9dff; }
html[data-op-rh][data-op-rh] .op-chat-msg .op-react-pick, html[data-op-rh][data-op-rh] .op-chat-msg.mine .op-react-pick { left: 18px !important; right: auto !important; }
@media (max-width: 640px) { html[data-op-rh][data-op-rh] .op-chat-msg { padding-right: 12px !important; } html[data-op-rh][data-op-rh] .op-chat-msg > small { display: none; } }
/* chat draft A: flags instead of small profile pictures */
html[data-op-rh][data-op-rh] .op-chat-av-flag img { width: 24px !important; height: 17px !important; border-radius: 3px !important; object-fit: cover; box-shadow: none !important; outline: 0 !important; }
html[data-op-rh][data-op-rh] .op-chat-av-flag { width: 28px; 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; }
/* chat draft A: the action buttons belong to the row (not to the text), on the right, only on hover */
html[data-op-rh][data-op-rh] .op-chat-msg .op-chat-bubble { position: static !important; }
html[data-op-rh][data-op-rh] .op-chat-msg .op-chat-acts, html[data-op-rh][data-op-rh] .op-chat-msg.mine .op-chat-acts { right: 10px !important; top: 50% !important; transform: translateY(-50%) !important; opacity: 0 !important; padding: 2px; border-radius: 10px; background: #18181d; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
html[data-op-rh][data-op-rh] .op-chat-msg:hover .op-chat-acts, html[data-op-rh][data-op-rh] .op-chat-msg .op-chat-acts:focus-within { opacity: 1 !important; }
html[data-op-rh][data-op-rh] .op-chat-msg:hover > small { opacity: 0 !important; }
html[data-op-rh][data-op-rh] .op-chat-msg > small { opacity: 0; }
html[data-op-rh][data-op-rh] .op-chat-msg.mine:last-child > small { opacity: 1; }
@media (hover: none) { html[data-op-rh][data-op-rh] .op-chat-msg .op-chat-acts { display: none !important; } 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 !important; opacity: 1 !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; }