/* Kuroosu UI v1 – navbar, leaderboard, profile (osu!-style) and beatmap listing.
   Loaded after osupompa-v10.css, uses its --op-* colors. */

:root {
  --op-orange: #ff9a3c;
  --op-pink: #ff5ea8;
  --op-grad: linear-gradient(90deg, var(--op-yellow), var(--op-orange), var(--op-pink), var(--op-yellow));
  --op-ease: cubic-bezier(.2, .8, .2, 1);
  --op-card: rgba(var(--op-dk-22-20-12, 22, 20, 12), .78);
  --op-card-2: rgba(255, 224, 110, .045);
}

@keyframes op-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes op-grad-move { to { background-position: 300% 0; } }
@keyframes op-pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
@keyframes opu-shine { from { transform: translateX(-120%) skewX(-20deg); } to { transform: translateX(220%) skewX(-20deg); } }
@keyframes op-pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(58, 214, 120, .6); } 100% { box-shadow: 0 0 0 10px rgba(58, 214, 120, 0); } }
@keyframes opu-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* =========================================================== NAVBAR */
.op-nav {
  position: sticky; top: 0; z-index: 1030;
  padding: .55rem 0;
  background: rgba(var(--op-dk-14-13-8, 14, 13, 8), .72);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  transition: padding .3s var(--op-ease), background .3s ease, box-shadow .3s ease;
}
.op-nav.op-nav-scrolled { padding: .3rem 0; background: rgba(var(--op-dk-12-11-7, 12, 11, 7), .9); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.op-nav-glow {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--op-grad); background-size: 300% 100%;
  animation: op-grad-move 8s linear infinite; opacity: .85;
}
.op-nav .container-fluid { max-width: 1500px; }
.op-nav-brand { display: flex; align-items: center; margin-right: 1.25rem; }
.op-nav-brand .op-logo { height: 40px; width: auto; transition: transform .35s var(--op-ease), filter .35s ease; }
.op-nav-brand:hover .op-logo { transform: rotate(-4deg) scale(1.07); filter: drop-shadow(0 0 12px rgba(var(--op-yellow-rgb), .55)); }
.op-nav.op-nav-scrolled .op-logo { height: 34px; }

.op-nav-links { gap: .15rem; }
.op-nav-links .nav-link {
  position: relative; display: flex; align-items: center; gap: .45rem;
  padding: .5rem .8rem !important; border-radius: 12px;
  color: var(--op-muted) !important; font-weight: 600; font-size: .93rem;
  transition: color .2s ease, background .25s ease;
}
.op-nav-links .nav-link i { font-size: .85rem; opacity: .75; transition: transform .3s var(--op-ease), opacity .2s; }
.op-nav-links .nav-link::after {
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .2rem; height: 2px; border-radius: 2px;
  background: var(--op-grad); background-size: 300% 100%; animation: op-grad-move 6s linear infinite;
  transform: scaleX(0); transform-origin: center; transition: transform .3s var(--op-ease);
}
.op-nav-links .nav-link:hover { color: #fff !important; background: rgba(255, 255, 255, .05); }
.op-nav-links .nav-link:hover i { transform: translateY(-2px) scale(1.12); opacity: 1; }
.op-nav-links .nav-link:hover::after { transform: scaleX(.6); }
.op-nav-links .nav-link.active { color: #fff !important; background: rgba(var(--op-yellow-rgb), .1); }
.op-nav-links .nav-link.active i { color: var(--op-yellow); opacity: 1; }
.op-nav-links .nav-link.active::after { transform: scaleX(1); }
.op-nav-links .nav-link.op-nav-supporter, .op-nav-links .nav-link.op-nav-supporter i { color: var(--op-yellow) !important; }
.op-nav-links .nav-link.op-nav-supporter i { animation: opu-bob 2.4s ease-in-out infinite; }
.op-nav .dropdown-menu {
  background: rgba(var(--op-dk-20-18-11, 20, 18, 11), .96); border: 1px solid var(--op-border); border-radius: 14px;
  padding: .4rem; box-shadow: 0 18px 40px rgba(0, 0, 0, .5); animation: op-rise .22s var(--op-ease);
}
.op-nav .dropdown-item { border-radius: 9px; padding: .45rem .75rem; font-weight: 500; transition: background .15s, padding-left .2s var(--op-ease); }
.op-nav .dropdown-item:hover { background: rgba(var(--op-yellow-rgb), .12); padding-left: 1rem; color: #fff; }
.op-nav .dropdown-item i { width: 1.2rem; color: var(--op-yellow); opacity: .85; }

.op-nav-search { position: relative; margin: 0 .75rem; }
.op-nav-search > i {
  position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
  color: var(--op-muted); font-size: .8rem; pointer-events: none; z-index: 2; transition: color .2s;
}
.op-nav-search .fable-search-input {
  width: 220px; padding: .45rem .9rem .45rem 2.2rem; border-radius: 999px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--op-border); color: #fff;
  transition: width .35s var(--op-ease), border-color .2s, background .2s, box-shadow .2s;
}
.op-nav-search .fable-search-input:focus {
  width: 300px; background: rgba(0, 0, 0, .35); border-color: var(--op-border-strong);
  box-shadow: 0 0 0 4px rgba(var(--op-yellow-rgb), .12);
}
.op-nav-search:focus-within > i { color: var(--op-yellow); }

.op-nav-user-btn {
  display: flex; align-items: center; gap: .55rem;
  padding: .25rem .8rem .25rem .3rem; border-radius: 999px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--op-border); color: #fff; font-weight: 600;
  transition: background .2s, border-color .2s, transform .2s var(--op-ease);
}
.op-nav-user-btn:hover, .op-nav-user-btn[aria-expanded="true"] { background: rgba(var(--op-yellow-rgb), .1); border-color: var(--op-border-strong); color: #fff; }
.op-nav-user-btn img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--op-yellow); }
.op-nav-user-btn .fa-chevron-down { font-size: .65rem; color: var(--op-muted); transition: transform .25s var(--op-ease); }
.op-nav-user-btn[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }
.op-nav-auth .btn { border-radius: 999px; padding: .4rem 1.1rem; font-weight: 700; }

.op-nav-toggler { border: 0 !important; box-shadow: none !important; padding: .4rem; }
.op-burger { display: inline-flex; flex-direction: column; gap: 5px; width: 24px; }
.op-burger i { display: block; height: 2px; border-radius: 2px; background: #fff; transition: transform .3s var(--op-ease), opacity .2s; }
.op-nav-toggler[aria-expanded="true"] .op-burger i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.op-nav-toggler[aria-expanded="true"] .op-burger i:nth-child(2) { opacity: 0; }
.op-nav-toggler[aria-expanded="true"] .op-burger i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1399.98px) {
  .op-nav-links { padding: .5rem 0; }
  .op-nav-search { margin: .5rem 0; }
  .op-nav-search .fable-search-input, .op-nav-search .fable-search-input:focus { width: 100%; }
  .op-nav-user { padding-bottom: .5rem; }
}

/* =========================================================== MODE BAR (leaderboard + profile) */
.op-modebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem; }
.op-seg {
  position: relative; display: inline-flex; flex-wrap: wrap; gap: .25rem; padding: .3rem;
  border-radius: 16px; background: rgba(0, 0, 0, .3); border: 1px solid var(--op-border);
}
.op-seg-btn {
  position: relative; display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .9rem; border: 0; border-radius: 12px; background: transparent;
  color: var(--op-muted); font-weight: 700; font-size: .85rem; white-space: nowrap;
  transition: color .2s ease, background .25s ease, transform .2s var(--op-ease);
}
.op-seg-btn img { width: 20px; height: 20px; opacity: .6; transition: opacity .2s, transform .35s var(--op-ease); }
.op-seg-btn:hover:not(:disabled) { color: #fff; background: rgba(255, 255, 255, .06); }
.op-seg-btn:hover:not(:disabled) img { opacity: 1; transform: rotate(-12deg) scale(1.12); }
.op-seg-btn:active:not(:disabled) { transform: scale(.95); }
.op-seg-btn.active {
  color: var(--op-ink); background: linear-gradient(135deg, var(--op-yellow), var(--op-orange));
  box-shadow: 0 6px 18px rgba(var(--op-orange-rgb, 255, 170, 40), .3);
}
.op-seg-btn.active img { opacity: 1; filter: brightness(0); }
.op-seg-btn:disabled { opacity: .35; cursor: not-allowed; }
.op-seg-btn .fa-solid { font-size: .8rem; }

/* =========================================================== LEADERBOARD */
.op-lb { animation: op-rise .5s var(--op-ease) both; }
.op-lb-controls { margin: 1.5rem 0 1rem; }

.op-country-strip {
  display: flex; gap: .55rem; align-items: center; justify-content: center; flex-wrap: wrap;
  margin: 1.1rem 0 1.6rem;
}
.op-country-chip {
  display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem .35rem .4rem;
  border-radius: 999px; border: 1px solid transparent; background: transparent;
  color: var(--op-muted); font-weight: 700; font-size: .8rem; letter-spacing: .04em; cursor: pointer;
  transition: transform .25s var(--op-ease), background .2s, color .2s, border-color .2s;
  animation: op-pop .45s var(--op-ease) both; animation-delay: calc(var(--i, 0) * 45ms);
}
.op-country-chip img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; box-shadow: 0 3px 10px rgba(0, 0, 0, .45); transition: transform .3s var(--op-ease), box-shadow .2s; }
.op-country-chip .op-country-globe {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(var(--op-yellow-rgb), .14); color: var(--op-yellow);
}
.op-country-chip:hover { transform: translateY(-3px); color: #fff; background: rgba(255, 255, 255, .05); }
.op-country-chip:hover img { transform: scale(1.12) rotate(-6deg); }
.op-country-chip.active { color: #fff; background: rgba(var(--op-yellow-rgb), .12); border-color: var(--op-border-strong); }
.op-country-chip.active img { box-shadow: 0 0 0 2px var(--op-yellow), 0 4px 14px rgba(var(--op-yellow-rgb), .4); }

.op-lb-table { display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1.25rem; }
.op-lb-head, .op-lb-row {
  display: grid; align-items: center; gap: 1rem;
  grid-template-columns: 64px 44px minmax(0, 1fr) repeat(3, 110px) 130px;
  padding: .5rem 1.1rem;
}
.op-lb-head { color: var(--op-muted); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding-top: 0; padding-bottom: .1rem; }
.op-lb-head > :nth-child(n+4), .op-lb-row > :nth-child(n+4) { text-align: right; }
.op-lb-row {
  position: relative; overflow: hidden; border-radius: 14px; text-decoration: none; color: var(--op-text);
  background: var(--op-card); border: 1px solid rgba(255, 255, 255, .04);
  transition: transform .25s var(--op-ease), border-color .2s, background .2s, box-shadow .25s;
  animation: op-rise .45s var(--op-ease) both; animation-delay: calc(var(--i, 0) * 30ms);
}
.op-lb-row::before { /* sheen on hover */
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent);
  transform: translateX(-120%) skewX(-20deg); pointer-events: none;
}
.op-lb-row:hover { transform: translateX(6px); color: #fff; border-color: var(--op-border-strong); background: rgba(var(--op-dk-34-30-16, 34, 30, 16), .9); box-shadow: 0 10px 26px rgba(0, 0, 0, .35); }
.op-lb-row:hover::before { animation: opu-shine .8s ease; }
.op-lb-rank { font-weight: 800; font-size: 1.05rem; color: var(--op-muted); }
.op-lb-row.op-top-1 { background: linear-gradient(90deg, rgba(var(--op-yellow-rgb), .2), var(--op-card) 55%); border-color: rgba(var(--op-yellow-rgb), .35); }
.op-lb-row.op-top-2 { background: linear-gradient(90deg, rgba(210, 220, 235, .14), var(--op-card) 55%); }
.op-lb-row.op-top-3 { background: linear-gradient(90deg, rgba(222, 140, 70, .16), var(--op-card) 55%); }
.op-lb-row.op-top-1 .op-lb-rank { color: var(--op-yellow); }
.op-lb-row.op-top-2 .op-lb-rank { color: #d9e2ee; }
.op-lb-row.op-top-3 .op-lb-rank { color: #e0955a; }
.op-lb-avatar { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; transition: transform .3s var(--op-ease); }
.op-lb-row:hover .op-lb-avatar { transform: scale(1.1) rotate(-3deg); }
.op-lb-player { display: flex; align-items: center; gap: .55rem; min-width: 0; flex-wrap: wrap; }
.op-lb-player .op-lb-flag { width: 24px; height: 18px; border-radius: 3px; object-fit: cover; flex-shrink: 0; }
.op-lb-name { font-weight: 700; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.op-lb-name.supporter { color: var(--op-yellow); }
.op-lb-clan { font-size: .72rem; font-weight: 800; color: var(--op-yellow); background: rgba(var(--op-yellow-rgb), .1); border-radius: 6px; padding: .05rem .4rem; }
.op-lb-group { font-size: .7rem; padding: .1rem .5rem; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #fff; }
.op-lb-stat { font-weight: 600; color: var(--op-muted); font-variant-numeric: tabular-nums; font-size: .9rem; }
.op-lb-stat.op-acc { color: #7fe0a0; }
.op-lb-main { font-weight: 800; font-size: 1.15rem; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.op-lb-main small { color: var(--op-muted); font-size: .7em; margin-left: 2px; font-weight: 700; }
.op-lb-row:hover .op-lb-main { color: var(--op-yellow); }
@media (max-width: 991.98px) {
  .op-lb-head, .op-lb-row { grid-template-columns: 52px 40px minmax(0, 1fr) 110px; gap: .75rem; }
  .op-lb-head > .op-lb-hide-md, .op-lb-row > .op-lb-hide-md { display: none; }
}
@media (max-width: 575.98px) {
  .op-lb-head, .op-lb-row { grid-template-columns: 40px 34px minmax(0, 1fr) auto; padding: .5rem .7rem; }
  .op-lb-avatar { width: 34px; height: 34px; }
  .op-lb-main { font-size: 1rem; }
}

.op-pager { display: flex; align-items: center; justify-content: center; gap: .75rem; margin: 1rem 0 2rem; }
.op-pager-btn {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px;
  background: var(--op-card); border: 1px solid var(--op-border); color: #fff;
  transition: transform .2s var(--op-ease), background .2s, border-color .2s;
}
.op-pager-btn:hover:not(:disabled) { transform: translateY(-3px); background: rgba(var(--op-yellow-rgb), .14); border-color: var(--op-border-strong); color: var(--op-yellow); }
.op-pager-btn:disabled { opacity: .3; cursor: not-allowed; }
.op-pager-label { font-weight: 700; color: var(--op-muted); min-width: 5.5rem; text-align: center; }
.op-pager-label strong { color: #fff; }
a.op-pager-btn { text-decoration: none; }
.op-pager-num {
  min-width: 40px; height: 40px; display: grid; place-items: center; padding: 0 .6rem; border-radius: 12px; cursor: pointer;
  color: var(--op-muted); font-weight: 700; background: transparent; border: 0; transition: background .2s, color .2s, transform .2s var(--op-ease);
}
.op-pager-num:hover { background: rgba(255, 255, 255, .06); color: #fff; transform: translateY(-2px); }
.op-pager-num.active { background: linear-gradient(135deg, var(--op-yellow), var(--op-orange)); color: var(--op-ink); }

/* =========================================================== PROFILE (osu!-style) */
.op-pf { animation: op-rise .5s var(--op-ease) both; }
.op-pf-header { border-radius: 20px; overflow: hidden; background: var(--op-card); border: 1px solid var(--op-border); box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
.op-pf-cover { position: relative; height: 250px; overflow: hidden; background:
  radial-gradient(120% 140% at 10% 0%, rgba(var(--op-yellow-rgb), .45), transparent 55%),
  radial-gradient(100% 120% at 100% 100%, rgba(255, 94, 168, .35), transparent 60%),
  linear-gradient(135deg, #3a2a08, rgb(var(--op-dk-27-20-10, 27, 20, 10)) 55%, #2a1020); }
.op-pf-cover::before { /* osu! triangles */
  content: ""; position: absolute; inset: -40%;
  background-image:
    linear-gradient(60deg, rgba(255, 255, 255, .05) 25%, transparent 25.5%, transparent 75%, rgba(255, 255, 255, .05) 75.5%),
    linear-gradient(120deg, rgba(255, 255, 255, .04) 25%, transparent 25.5%, transparent 75%, rgba(255, 255, 255, .04) 75.5%);
  background-size: 80px 140px; animation: op-cover-drift 40s linear infinite;
}
@keyframes op-cover-drift { to { transform: translate(80px, -140px); } }
.op-pf-cover img.op-pf-banner { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 8s ease; }
.op-pf-header:hover .op-pf-cover img.op-pf-banner { transform: scale(1.1); }
.op-pf-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .05) 30%, rgba(var(--op-dk-14-13-8, 14, 13, 8), .92)); }
.op-pf-cover .op-modebar { position: absolute; top: 1rem; right: 1rem; z-index: 3; justify-content: flex-end; }
.op-pf-cover .op-seg { background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.op-pf-cover .op-seg-btn { padding: .35rem .7rem; font-size: .78rem; }

.op-pf-info { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 1.5rem; padding: 0 2rem 1.25rem; margin-top: -90px; flex-wrap: wrap; }
.op-pf-avatar-wrap { position: relative; flex-shrink: 0; animation: op-pop .6s var(--op-ease) both; }
.op-pf-avatar { width: 150px; height: 150px; border-radius: 28px; object-fit: cover; border: 4px solid rgba(var(--op-dk-14-13-8, 14, 13, 8), .95); box-shadow: 0 14px 40px rgba(0, 0, 0, .55), 0 0 0 2px rgba(var(--op-yellow-rgb), .55); transition: transform .4s var(--op-ease); }
.op-pf-avatar-wrap:hover .op-pf-avatar { transform: rotate(-3deg) scale(1.03); }
.op-pf-online { position: absolute; right: 6px; bottom: 6px; width: 24px; height: 24px; border-radius: 50%; background: #3ad678; border: 4px solid rgb(var(--op-dk-20-18-9, 20, 18, 9)); animation: op-pulse-ring 1.6s ease-out infinite; }
.op-pf-id { flex: 1 1 280px; min-width: 0; padding-bottom: .4rem; }
.op-pf-name { font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 800; line-height: 1.05; margin: 0 0 .5rem; color: #fff; text-shadow: 0 4px 20px rgba(0, 0, 0, .5); overflow-wrap: anywhere; }
.op-pf-name.supporter { background: linear-gradient(90deg, var(--op-light, #ffe58a), var(--op-yellow), var(--op-orange), var(--op-light, #ffe58a)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: op-grad-move 6s linear infinite; }
.op-pf-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.op-pf-tag { display: inline-flex; align-items: center; gap: .4rem; padding: .28rem .7rem; border-radius: 999px; background: rgba(255, 255, 255, .07); color: #fff; font-size: .8rem; font-weight: 600; text-decoration: none; border: 1px solid rgba(255, 255, 255, .06); transition: background .2s, transform .2s var(--op-ease); }
a.op-pf-tag:hover, .op-pf-tag:hover { background: rgba(var(--op-yellow-rgb), .14); transform: translateY(-2px); color: #fff; }
.op-pf-tag img { width: 20px; height: 15px; border-radius: 3px; object-fit: cover; }
.op-pf-tag.op-pf-supporter { color: var(--op-yellow); border-color: rgba(var(--op-yellow-rgb), .3); }
.op-pf-tag.op-pf-status { color: #7fe0a0; }
.op-pf-tag.op-pf-status .op-dot { width: 8px; height: 8px; border-radius: 50%; background: #3ad678; animation: op-pulse-ring 1.6s ease-out infinite; }
.op-pf-actions { display: flex; align-items: center; gap: .5rem; padding-bottom: .5rem; }
.op-pf-actions .fable-btn-follow { border-radius: 999px; font-weight: 700; padding: .45rem 1.1rem; }
.op-pf-followers { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .95rem; border-radius: 999px; background: rgba(255, 255, 255, .06); font-weight: 700; }
.op-pf-followers i { color: var(--op-yellow); }

.op-pf-bar { display: grid; grid-template-columns: auto auto 1fr auto; gap: 2rem; align-items: center; padding: 1.1rem 2rem; background: rgba(0, 0, 0, .28); border-top: 1px solid var(--op-border); }
.op-pf-rank small { display: block; font-size: .7rem; font-weight: 700; color: var(--op-muted); text-transform: uppercase; letter-spacing: .08em; }
.op-pf-rank strong { font-size: 2.1rem; font-weight: 800; color: #fff; line-height: 1.1; }
.op-pf-rank.op-country strong { font-size: 1.6rem; }
.op-pf-rank img { width: 22px; height: 16px; border-radius: 3px; margin-left: .3rem; vertical-align: -1px; }
.op-pf-grades { display: flex; gap: 1.1rem; justify-content: center; flex-wrap: wrap; }
.op-pf-grade { display: flex; flex-direction: column; align-items: center; gap: .15rem; transition: transform .25s var(--op-ease); }
.op-pf-grade:hover { transform: translateY(-4px) scale(1.08); }
.op-pf-grade img { height: 26px; }
.op-pf-grade small { font-weight: 700; color: #fff; font-size: .85rem; }
.op-pf-level { display: flex; align-items: center; gap: .8rem; min-width: 220px; }
.op-pf-level-hex { width: 50px; height: 50px; display: grid; place-items: center; font-weight: 800; color: var(--op-ink);
  background: linear-gradient(135deg, var(--op-yellow), var(--op-orange)); clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); }
.op-pf-level-bar { flex: 1; }
.op-pf-level-track { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.op-pf-level-fill { height: 100%; border-radius: 99px; background: var(--op-grad); background-size: 300% 100%; animation: op-grad-move 5s linear infinite, op-level-grow 1.2s var(--op-ease) both; transform-origin: left; }
@keyframes op-level-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.op-pf-level-bar small { display: block; margin-top: .3rem; color: var(--op-muted); font-size: .72rem; font-weight: 700; }

.op-pf-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); background: rgba(var(--op-dk-18-17-10, 18, 17, 10), .96); border-top: 1px solid var(--op-border); }
.op-pf-stat { padding: .9rem 1.3rem; box-shadow: inset -1px 0 var(--op-border), inset 0 -1px var(--op-border); transition: background .2s; animation: op-rise .5s var(--op-ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
.op-pf-stat:hover { background: rgba(var(--op-yellow-rgb), .06); }
.op-pf-stat small { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--op-muted); }
.op-pf-stat strong { display: block; font-size: 1.15rem; font-weight: 800; color: #fff; margin-top: .15rem; font-variant-numeric: tabular-nums; }
.op-pf-stat.op-hl strong { color: var(--op-yellow); }
@media (max-width: 991.98px) {
  .op-pf-bar { grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; }
  .op-pf-grades, .op-pf-level { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 575.98px) {
  .op-pf-cover { height: 200px; }
  .op-pf-cover .op-modebar { left: .5rem; right: .5rem; justify-content: center; }
  .op-pf-info { padding: 0 1rem 1rem; margin-top: -70px; }
  .op-pf-avatar { width: 110px; height: 110px; border-radius: 22px; }
  .op-pf-bar { padding: 1rem; }
}

.op-pf-section { margin-top: 1.25rem; padding: 1.1rem .4rem .6rem; border-radius: 18px; background: var(--op-card); border: 1px solid rgba(255, 255, 255, .04); animation: op-rise .5s var(--op-ease) both; }
.op-pf-section:empty { display: none; }
.op-pf-section h5.text-uppercase { color: #fff !important; font-size: .95rem !important; }
.op-pf-section h5.text-uppercase i { color: var(--op-yellow) !important; }
.op-pf-section .osu-score-card { transition: transform .25s var(--op-ease); }
.op-pf-section .osu-score-card:hover { transform: translateX(5px); }

/* =========================================================== BEATMAPS */
.op-bm-hero { position: relative; padding: 1.4rem; border-radius: 22px; margin-bottom: 1.25rem; overflow: hidden;
  background: radial-gradient(90% 140% at 0% 0%, rgba(var(--op-yellow-rgb), .18), transparent 60%), radial-gradient(80% 120% at 100% 100%, rgba(255, 94, 168, .14), transparent 60%), var(--op-card);
  border: 1px solid var(--op-border); animation: op-rise .5s var(--op-ease) both; }
.op-bm-hero h1 { font-weight: 800; font-size: 1.8rem; margin: 0 0 .15rem; }
.op-bm-hero p { color: var(--op-muted); margin: 0 0 1rem; }
.op-bm-hero p strong { color: var(--op-yellow); }
.op-bm-search { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: .6rem; margin-bottom: .9rem; }
.op-bm-field { position: relative; }
.op-bm-field i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--op-muted); pointer-events: none; transition: color .2s; }
.op-bm-field input { width: 100%; padding: .7rem 1rem .7rem 2.6rem; border-radius: 14px; background: rgba(0, 0, 0, .35); border: 1px solid var(--op-border); color: #fff; transition: border-color .2s, box-shadow .2s; }
.op-bm-field input:focus { outline: 0; border-color: var(--op-border-strong); box-shadow: 0 0 0 4px rgba(var(--op-yellow-rgb), .12); }
.op-bm-field:focus-within i { color: var(--op-yellow); }
.op-bm-go { border-radius: 14px; font-weight: 800; padding: 0 1.4rem; }
.op-bm-filters { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; }
.op-bm-status .op-seg-btn[data-status="2"].active { background: linear-gradient(135deg, #66ccff, #4a9dff); box-shadow: 0 6px 18px rgba(80, 170, 255, .35); }
.op-bm-status .op-seg-btn[data-status="3"].active { background: linear-gradient(135deg, #66ccff, #4a9dff); }
.op-bm-status .op-seg-btn[data-status="4"].active { background: linear-gradient(135deg, #9be870, #56c46a); }
.op-bm-status .op-seg-btn[data-status="5"].active { background: linear-gradient(135deg, #ff8fc4, #ff5ea8); box-shadow: 0 6px 18px rgba(255, 94, 168, .35); }
@media (max-width: 767.98px) { .op-bm-search { grid-template-columns: 1fr; } .op-bm-go { padding: .6rem; } }

.op-bm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.op-bm-card {
  position: relative; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; text-decoration: none; color: var(--op-text);
  background: var(--op-card); border: 1px solid rgba(255, 255, 255, .05);
  transition: transform .3s var(--op-ease), box-shadow .3s, border-color .2s;
  animation: op-rise .5s var(--op-ease) both; animation-delay: calc(var(--i, 0) * 25ms);
}
.op-bm-card:hover { transform: translateY(-6px); border-color: var(--op-border-strong); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); color: var(--op-text); }
.op-bm-cover { position: relative; height: 128px; overflow: hidden; background: linear-gradient(135deg, rgb(var(--op-dk-42-33-16, 42, 33, 16)), rgb(var(--op-dk-22-19-11, 22, 19, 11))); }
.op-bm-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--op-ease), filter .3s; }
.op-bm-card:hover .op-bm-cover img { transform: scale(1.1); filter: brightness(.7); }
.op-bm-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(var(--op-dk-14-13-8, 14, 13, 8), .9)); }
.op-bm-status-badge { position: absolute; top: .7rem; left: .7rem; z-index: 2; padding: .2rem .6rem; border-radius: 999px; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #111; background: #bbb; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
.op-bm-status-badge.s2, .op-bm-status-badge.s3 { background: #66ccff; }
.op-bm-status-badge.s4 { background: #9be870; }
.op-bm-status-badge.s5 { background: #ff8fc4; }
.op-bm-status-badge.s0, .op-bm-status-badge.s1 { background: #d2c8a8; }
.op-bm-stars { position: absolute; top: .7rem; right: .7rem; z-index: 2; display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 800; color: #111; background: var(--sr, #66ccff); box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
.op-bm-stars.op-dark-text { color: #111; }
.op-bm-stars.op-light-text { color: #fff; }
.op-bm-actions { position: absolute; right: .7rem; bottom: .7rem; z-index: 2; display: flex; gap: .4rem; opacity: 0; transform: translateY(10px); transition: opacity .25s, transform .3s var(--op-ease); }
.op-bm-card:hover .op-bm-actions, .op-bm-card:focus-within .op-bm-actions { opacity: 1; transform: none; }
.op-bm-action { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: rgba(0, 0, 0, .6); color: #fff; border: 1px solid rgba(255, 255, 255, .15); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s, transform .2s var(--op-ease); text-decoration: none; }
.op-bm-action:hover { background: var(--op-yellow); color: var(--op-ink); transform: scale(1.1); }
.op-bm-body { padding: .8rem 1rem 1rem; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.op-bm-title { font-weight: 800; font-size: 1rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-bm-artist { color: var(--op-muted); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-bm-diff { font-size: .82rem; color: var(--op-yellow); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-bm-meta { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin-top: .55rem; font-size: .78rem; color: var(--op-muted); font-weight: 600; }
.op-bm-meta i { color: var(--op-yellow); opacity: .8; margin-right: .25rem; }
.op-bm-mapper { margin-top: .5rem; font-size: .78rem; color: var(--op-muted); }
.op-bm-mapper strong { color: #fff; }
.op-bm-empty { grid-column: 1 / -1; text-align: center; padding: 3rem 1rem; color: var(--op-muted); }
.op-bm-empty i { font-size: 2rem; color: var(--op-yellow); display: block; margin-bottom: .6rem; }

/* =========================================================== SCORE CARDS (profile) */
.op-sc {
  position: relative; display: flex; align-items: center; gap: 1rem; min-height: 86px; margin-bottom: .7rem;
  padding: .7rem 1rem .7rem .7rem; border-radius: 16px; overflow: hidden; isolation: isolate;
  border: 1px solid rgba(255, 255, 255, .08); background: rgb(var(--op-dk-28-24-16, 28, 24, 16));
  transition: transform .25s var(--op-ease), border-color .2s, box-shadow .25s;
  animation: op-rise .4s var(--op-ease) both;
}
.op-sc-bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; filter: saturate(1.15) brightness(.85); transform: scale(1.02); transition: transform .6s var(--op-ease), filter .3s; }
.op-sc::before { /* readable text on the left, cover stays bright on the right */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(var(--op-dk-18-16-9, 18, 16, 9), .92) 0%, rgba(var(--op-dk-18-16-9, 18, 16, 9), .78) 45%, rgba(var(--op-dk-18-16-9, 18, 16, 9), .35) 100%);
}
.op-sc:hover { transform: translateY(-3px); border-color: var(--op-border-strong); box-shadow: 0 14px 30px rgba(0, 0, 0, .4), 0 0 0 1px rgba(var(--op-yellow-rgb), .15); }
.op-sc:hover .op-sc-bg { transform: scale(1.08); filter: saturate(1.25) brightness(1); }
.op-sc-link { position: absolute; inset: 0; z-index: 1; }
.op-sc-link:focus-visible { outline: 2px solid var(--op-yellow); outline-offset: -2px; border-radius: 16px; }
.op-sc-thumb { width: 88px; height: 62px; border-radius: 10px; object-fit: cover; flex-shrink: 0; box-shadow: 0 6px 16px rgba(0, 0, 0, .45); transition: transform .3s var(--op-ease); }
.op-sc:hover .op-sc-thumb { transform: scale(1.06) rotate(-2deg); }
.op-sc-grade { width: 44px; flex-shrink: 0; display: grid; place-items: center; }
.op-sc-grade img { height: 34px; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .6)); }
.op-sc-failed { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 80, 80, .18); color: #ff6b6b; font-size: 1.1rem; }
.op-sc-info { flex: 1; min-width: 0; }
.op-sc-title { font-weight: 800; color: #fff; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
.op-sc-diff { color: var(--op-yellow); font-size: .82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-sc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin-top: .3rem; font-size: .78rem; }
.op-sc-mod { display: inline-block; padding: .05rem .45rem; border-radius: 6px; font-size: .7rem; font-weight: 800; color: var(--op-ink); background: linear-gradient(135deg, var(--op-yellow), var(--op-orange)); }
.op-sc-acc { color: #7fe0a0; font-weight: 700; }
.op-sc-when { color: rgba(255, 255, 255, .6); }
.op-sc-right { text-align: right; flex-shrink: 0; }
.op-sc-pp { font-size: 1.45rem; font-weight: 800; color: #fff; line-height: 1; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.op-sc-pp small { font-size: .55em; color: var(--op-yellow); margin-left: 2px; }
.op-sc-weight { margin-top: .3rem; font-size: .7rem; font-weight: 700; color: rgba(255, 255, 255, .7); }
.op-sc-replay { position: relative; z-index: 2; width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; color: #fff; text-decoration: none; background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .15); opacity: .7; transition: opacity .2s, background .2s, transform .2s var(--op-ease); }
.op-sc:hover .op-sc-replay { opacity: 1; }
.op-sc-replay:hover { background: var(--op-yellow); color: var(--op-ink); transform: scale(1.1); }
.op-sc-f .op-sc-bg { filter: grayscale(.6) brightness(.6); }
@media (max-width: 575.98px) {
  .op-sc { gap: .6rem; padding: .6rem; }
  .op-sc-thumb { display: none; }
  .op-sc-pp { font-size: 1.15rem; }
  .op-sc-replay { display: none; }
}

/* =========================================================== CLANS */
.op-clan-search { display: grid; grid-template-columns: 1fr auto; gap: .6rem; margin-bottom: .9rem; }
.op-clan-filters { justify-content: flex-start; }
.op-clan-searchinfo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1rem; color: var(--op-muted); }
.op-clan-searchinfo strong { color: #fff; }
.op-clan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
@media (max-width: 575.98px) { .op-clan-grid { grid-template-columns: 1fr; } .op-clan-search { grid-template-columns: 1fr; } }
.op-clan-card {
  position: relative; display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.2rem; min-height: 110px;
  border-radius: 18px; overflow: hidden; isolation: isolate; text-decoration: none; color: var(--op-text);
  background: radial-gradient(120% 140% at 0% 0%, rgba(var(--op-yellow-rgb), .12), transparent 60%), var(--op-card);
  border: 1px solid rgba(255, 255, 255, .06);
  transition: transform .3s var(--op-ease), border-color .2s, box-shadow .3s;
  animation: op-rise .5s var(--op-ease) both; animation-delay: calc(var(--i, 0) * 50ms);
}
.op-clan-card:hover { transform: translateY(-5px); color: #fff; border-color: var(--op-border-strong); box-shadow: 0 16px 36px rgba(0, 0, 0, .45); }
.op-clan-banner { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: brightness(.55) saturate(1.1); transition: transform .8s var(--op-ease); }
.op-clan-card:hover .op-clan-banner { transform: scale(1.06); }
.op-clan-card:has(.op-clan-banner)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(var(--op-dk-14-13-8, 14, 13, 8), .85), rgba(var(--op-dk-14-13-8, 14, 13, 8), .35)); }
.op-clan-card.op-top-1 { border-color: rgba(var(--op-yellow-rgb), .45); box-shadow: 0 0 0 1px rgba(var(--op-yellow-rgb), .15), 0 10px 30px rgba(var(--op-orange-rgb, 255, 190, 40), .12); }
.op-clan-card.op-top-2 { border-color: rgba(210, 220, 235, .3); }
.op-clan-card.op-top-3 { border-color: rgba(222, 140, 70, .35); }
.op-clan-rank { position: absolute; top: .6rem; right: .8rem; font-weight: 800; font-size: .85rem; color: var(--op-muted); }
.op-clan-card.op-top-1 .op-clan-rank { color: var(--op-yellow); }
.op-clan-card.op-top-2 .op-clan-rank { color: #d9e2ee; }
.op-clan-card.op-top-3 .op-clan-rank { color: #e0955a; }
.op-clan-avatar { width: 72px; height: 72px; border-radius: 18px; object-fit: cover; flex-shrink: 0; box-shadow: 0 8px 20px rgba(0, 0, 0, .45), 0 0 0 2px rgba(var(--op-yellow-rgb), .35); transition: transform .35s var(--op-ease); }
.op-clan-card:hover .op-clan-avatar { transform: rotate(-4deg) scale(1.06); }
.op-clan-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.op-clan-tag { font-weight: 800; color: var(--op-yellow); font-size: .8rem; letter-spacing: .05em; }
.op-clan-name { font-weight: 800; font-size: 1.2rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-clan-members { display: flex; align-items: center; gap: .5rem; margin-top: .35rem; font-size: .8rem; color: var(--op-muted); font-weight: 600; }
.op-clan-stack { display: inline-flex; }
.op-clan-stack img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; border: 2px solid rgb(var(--op-dk-23-20-11, 23, 20, 11)); margin-left: -8px; transition: transform .25s var(--op-ease), margin .25s var(--op-ease); }
.op-clan-stack img:first-child { margin-left: 0; }
.op-clan-card:hover .op-clan-stack img { margin-left: -3px; }
.op-clan-card:hover .op-clan-stack img:first-child { margin-left: 0; }
.op-clan-value { font-size: 1.4rem; font-weight: 800; color: #fff; white-space: nowrap; align-self: flex-end; }
.op-clan-value small { font-size: .55em; color: var(--op-yellow); margin-left: 3px; }

/* =========================================================== BEATMAP PAGE */
.op-map-hero { position: relative; border-radius: 22px; overflow: hidden; isolation: isolate; border: 1px solid var(--op-border); box-shadow: 0 20px 50px rgba(0, 0, 0, .35); animation: op-rise .5s var(--op-ease) both; }
.op-map-cover { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; filter: saturate(1.15); transform: scale(1.03); animation: op-cover-zoom 20s ease-in-out infinite alternate; }
@keyframes op-cover-zoom { to { transform: scale(1.12); } }
.op-map-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(var(--op-dk-14-13-8, 14, 13, 8), .9) 0%, rgba(var(--op-dk-14-13-8, 14, 13, 8), .6) 50%, rgba(var(--op-dk-14-13-8, 14, 13, 8), .82) 100%), linear-gradient(0deg, rgba(var(--op-dk-14-13-8, 14, 13, 8), .7), transparent 50%); }
.op-map-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 2rem; padding: 2rem; }
@media (max-width: 991.98px) { .op-map-hero-inner { grid-template-columns: 1fr; padding: 1.25rem; } }
.op-map-badges { display: flex; align-items: center; gap: .5rem; margin-bottom: .8rem; }
.op-map-mode { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 800; background: rgba(0, 0, 0, .45); color: #fff; }
.op-map-mode img { width: 14px; height: 14px; }
.op-map-title { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; color: #fff; margin: 0; line-height: 1.1; text-shadow: 0 4px 24px rgba(0, 0, 0, .6); overflow-wrap: anywhere; }
.op-map-artist { font-size: 1.2rem; color: rgba(255, 255, 255, .85); font-weight: 600; margin-top: .25rem; }
.op-map-mapper { margin-top: .6rem; color: var(--op-muted); }
.op-map-mapper strong { color: var(--op-yellow); }
.op-map-updated { opacity: .8; }
.op-map-diffs { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.4rem 0 .6rem; }
.op-map-diff {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px;
  background: rgba(0, 0, 0, .45); border: 2px solid transparent;
  transition: transform .25s var(--op-ease), border-color .2s, background .2s;
}
.op-map-diff img { width: 22px; height: 22px; }
.op-map-diff { box-shadow: inset 0 0 0 3px var(--sr); }
.op-map-diff:hover { transform: translateY(-4px) scale(1.08); background: rgba(0, 0, 0, .65); }
.op-map-diff.active { border-color: #fff; transform: translateY(-2px); box-shadow: inset 0 0 0 3px var(--sr), 0 0 18px var(--sr); }
.op-map-diffname { display: flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.1rem; color: #fff; }
.op-map-sr { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border-radius: 999px; font-size: .85rem; background: var(--sr); color: #111; }
.op-map-buttons { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.op-map-buttons .btn { border-radius: 12px; font-weight: 700; }
.op-map-fav.active i { color: #ff5e8a; }
.op-map-fav:hover i { transform: scale(1.2); }
.op-map-fav i { transition: transform .2s var(--op-ease); }

.op-map-side { align-self: end; padding: 1.1rem; border-radius: 18px; background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .08); }
.op-map-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: .9rem; text-align: center; }
.op-map-facts div { padding: .5rem .2rem; border-radius: 12px; background: rgba(255, 255, 255, .05); }
.op-map-facts i { color: var(--op-yellow); display: block; margin-bottom: .2rem; }
.op-map-facts strong { display: block; color: #fff; font-size: 1rem; }
.op-map-facts small { color: var(--op-muted); font-size: .7rem; font-weight: 700; }
.op-map-attr { display: grid; grid-template-columns: 105px 1fr 38px; align-items: center; gap: .6rem; margin: .45rem 0; font-size: .8rem; }
.op-map-attr span { color: var(--op-muted); font-weight: 700; }
.op-map-attr strong { color: #fff; text-align: right; }
.op-map-bar { height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.op-map-bar > div { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--op-yellow), var(--op-orange)); transform-origin: left; animation: op-level-grow 1s var(--op-ease) both; animation-delay: calc(var(--i, 0) * 90ms + .2s); }
.op-map-attr-sr .op-map-bar > div { background: var(--sr); }
.op-map-rate { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .8rem; font-weight: 700; color: #fff; }
.op-map-rate small { display: block; margin-top: .35rem; color: var(--op-muted); }
.op-map-bar-rate { margin-top: .45rem; }
.op-map-bar-rate > div { background: linear-gradient(90deg, #56c46a, #9be870); }

.op-map-board { margin-top: 1.5rem; padding: 1.25rem; border-radius: 20px; background: var(--op-card); border: 1px solid rgba(255, 255, 255, .05); animation: op-rise .5s var(--op-ease) both; animation-delay: .1s; }
.op-map-board-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.op-map-board-head h3 { font-size: 1.15rem; font-weight: 800; margin: 0; }
.op-map-board-head h3 i { color: var(--op-yellow); margin-right: .4rem; }
.op-map-board .op-modebar { justify-content: flex-start; }
.op-map-scores { display: flex; flex-direction: column; gap: .45rem; }
.op-map-score { display: grid; align-items: center; gap: .9rem; grid-template-columns: 52px 40px minmax(0, 1fr) 80px 70px 70px 110px; padding: .5rem 1rem; border-radius: 14px; text-decoration: none; color: var(--op-text); background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .04); transition: transform .25s var(--op-ease), border-color .2s, background .2s; animation: op-rise .4s var(--op-ease) both; animation-delay: calc(var(--i, 0) * 30ms); }
.op-map-score > :nth-child(n+4) { text-align: right; }
.op-map-score:hover { transform: translateX(6px); color: #fff; border-color: var(--op-border-strong); background: rgba(var(--op-yellow-rgb), .06); }
.op-map-score.op-top-1 { background: linear-gradient(90deg, rgba(var(--op-yellow-rgb), .18), rgba(255, 255, 255, .03) 60%); border-color: rgba(var(--op-yellow-rgb), .35); }
.op-map-score.op-top-1 .op-lb-rank { color: var(--op-yellow); }
.op-map-score.op-top-2 .op-lb-rank { color: #d9e2ee; }
.op-map-score.op-top-3 .op-lb-rank { color: #e0955a; }
.op-map-score-grade img { height: 26px; }
.op-map-when { color: var(--op-muted); font-size: .75rem; }
@media (max-width: 991.98px) {
  .op-map-score { grid-template-columns: 44px 34px minmax(0, 1fr) 90px; }
  .op-map-score > .op-lb-hide-md { display: none; }
}
@media (max-width: 575.98px) {
  .op-map-score { grid-template-columns: 36px 28px minmax(0, 1fr) auto; gap: .5rem; padding: .5rem .6rem; }
}

/* =========================================================== SCORE PAGE */
.op-sp-hero { position: relative; border-radius: 22px; overflow: hidden; isolation: isolate; border: 1px solid var(--op-border); box-shadow: 0 20px 50px rgba(0, 0, 0, .35); animation: op-rise .5s var(--op-ease) both; }
.op-sp-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(var(--op-dk-14-13-8, 14, 13, 8), .88), rgba(var(--op-dk-14-13-8, 14, 13, 8), .45) 60%, rgba(var(--op-dk-14-13-8, 14, 13, 8), .8)); }
.op-sp-hero-inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2rem; padding: 2.2rem 2rem; }
.op-sp-grade { width: 130px; height: 130px; display: grid; place-items: center; animation: op-pop .7s var(--op-ease) both .15s; }
.op-sp-grade img { width: 100%; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .6)); }
.op-sp-grade.op-sc-failed { border-radius: 50%; font-size: 3rem; }
.op-sp-map { display: block; text-decoration: none; }
.op-sp-title { display: block; font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 800; line-height: 1.1; color: #fff; text-shadow: 0 4px 20px rgba(0, 0, 0, .6); transition: color .2s; overflow-wrap: anywhere; }
.op-sp-artist { display: block; color: rgba(255, 255, 255, .8); font-size: 1.1rem; font-weight: 600; margin-top: .2rem; }
.op-sp-map:hover .op-sp-title { color: var(--op-yellow); }
.op-sp-diffline { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .8rem 0 1.1rem; }
.op-sp-version { color: var(--op-yellow); font-weight: 700; text-decoration: none; }
.op-sp-version:hover { text-decoration: underline; color: var(--op-yellow); }
.op-sp-player { display: inline-flex; align-items: center; gap: .75rem; padding: .45rem 1rem .45rem .45rem; border-radius: 16px; text-decoration: none; color: #fff; background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .2s var(--op-ease), border-color .2s; }
.op-sp-player:hover { transform: translateY(-2px); border-color: var(--op-border-strong); color: #fff; }
.op-sp-player > img { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; }
.op-sp-player small { display: block; color: var(--op-muted); font-size: .72rem; }
.op-sp-player strong { display: flex; align-items: center; gap: .4rem; }
.op-sp-player strong.supporter { color: var(--op-yellow); }
.op-sp-pp { text-align: right; }
.op-sp-pp strong { display: block; font-size: 3.4rem; font-weight: 800; line-height: 1; color: #fff; text-shadow: 0 6px 24px rgba(0, 0, 0, .6); }
.op-sp-pp strong small { font-size: .4em; color: var(--op-yellow); margin-left: 3px; }
.op-sp-pp span { display: inline-block; margin-top: .5rem; padding: .15rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 700; background: rgba(0, 0, 0, .45); color: var(--op-muted); }
@media (max-width: 767.98px) {
  .op-sp-hero-inner { grid-template-columns: 1fr; text-align: center; padding: 1.5rem 1rem; gap: 1rem; }
  .op-sp-grade { width: 100px; height: 100px; margin: 0 auto; }
  .op-sp-diffline { justify-content: center; }
  .op-sp-pp { text-align: center; }
}
.op-sp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
@media (max-width: 991.98px) { .op-sp-grid { grid-template-columns: 1fr; } }
.op-sp-stats { display: grid; grid-template-columns: 1fr 1fr; border-radius: 18px; overflow: hidden; background: var(--op-card); border: 1px solid rgba(255, 255, 255, .05); }
.op-sp-hits { padding: 1.1rem 1.2rem; border-radius: 18px; background: var(--op-card); border: 1px solid rgba(255, 255, 255, .05); animation: op-rise .5s var(--op-ease) both .1s; }
.op-sp-hitbar { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: rgba(255, 255, 255, .08); margin-bottom: 1rem; }
.op-sp-hitbar span { height: 100%; transform-origin: left; animation: op-level-grow 1s var(--op-ease) both .3s; }
.op-sp-hitgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; text-align: center; }
@media (max-width: 575.98px) { .op-sp-hitgrid { grid-template-columns: repeat(3, 1fr); } }
.op-sp-hitgrid div { padding: .55rem .2rem; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.op-sp-hitgrid strong { display: block; font-size: 1.25rem; font-weight: 800; }
.op-sp-hitgrid small { color: var(--op-muted); font-weight: 700; font-size: .72rem; }
.h300 { --hc: #66ccff; } .h100 { --hc: #7fe07f; } .h50 { --hc: var(--op-yellow-strong); } .hmiss { --hc: #ff5e6b; } .hgeki { --hc: #b98cff; } .hkatu { --hc: #9ee2c9; }
.op-sp-hitbar span { background: var(--hc); }
.op-sp-hitgrid strong { color: var(--hc); }
.op-sp-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin: 1.25rem 0 2rem; }
.op-sp-actions .btn { border-radius: 12px; font-weight: 700; padding: .6rem 1.2rem; }

/* =========================================================== DOCS */
.op-docpage { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 1.5rem; align-items: start; margin-bottom: 2rem; }
@media (max-width: 991.98px) { .op-docpage { grid-template-columns: 1fr; } }
.op-doc-nav { position: sticky; top: 90px; display: flex; flex-direction: column; gap: .2rem; padding: 1rem; border-radius: 18px; background: var(--op-card); border: 1px solid rgba(255, 255, 255, .05); animation: op-rise .5s var(--op-ease) both; }
.op-doc-nav h6 { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--op-muted); margin: 0 0 .5rem .5rem; }
.op-doc-nav a { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: 11px; color: var(--op-muted); font-weight: 600; text-decoration: none; transition: background .2s, color .2s, padding-left .25s var(--op-ease); animation: op-rise .4s var(--op-ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
.op-doc-nav a i { width: 1.1rem; text-align: center; color: var(--op-yellow); opacity: .75; }
.op-doc-nav a:hover { background: rgba(255, 255, 255, .05); color: #fff; padding-left: .95rem; }
.op-doc-nav a.active { background: rgba(var(--op-yellow-rgb), .12); color: #fff; box-shadow: inset 3px 0 0 var(--op-yellow); }
.op-doc-nav a.active i { opacity: 1; }
@media (max-width: 991.98px) { .op-doc-nav { position: static; flex-direction: row; flex-wrap: wrap; } .op-doc-nav h6 { width: 100%; } }

.op-doc { border-radius: 22px; overflow: hidden; background: var(--op-card); border: 1px solid var(--op-border); animation: op-rise .5s var(--op-ease) both .05s; }
.op-doc-hero { display: flex; align-items: center; gap: 1.3rem; padding: 2rem 2rem 1.6rem; background: radial-gradient(110% 160% at 0% 0%, rgba(var(--op-yellow-rgb), .2), transparent 60%), radial-gradient(90% 140% at 100% 100%, rgba(255, 94, 168, .12), transparent 60%); border-bottom: 1px solid var(--op-border); }
.op-doc-icon { width: 68px; height: 68px; flex-shrink: 0; display: grid; place-items: center; border-radius: 20px; font-size: 1.7rem; color: var(--op-ink); background: linear-gradient(135deg, var(--op-yellow), var(--op-orange)); box-shadow: 0 10px 26px rgba(var(--op-orange-rgb, 255, 170, 40), .3); animation: op-pop .6s var(--op-ease) both .1s; }
.op-doc-hero h1 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); font-weight: 800; margin: .1rem 0 0; color: #fff; }
.op-doc-body { padding: 1.6rem 2rem 2rem; line-height: 1.7; color: var(--op-text); }
.op-doc-body > h1, .op-doc-body > h2, .op-doc-body > h3 { color: #fff; font-weight: 800; margin: 1.8rem 0 .8rem; }
.op-doc-body > :first-child { margin-top: 0; }
.op-doc-body a:not(.btn) { color: var(--op-yellow); }
.op-doc-body code { color: var(--op-yellow); background: rgba(var(--op-yellow-rgb), .1); padding: .1rem .4rem; border-radius: 6px; font-size: .88em; }
.op-doc-body ul, .op-doc-body ol { padding-left: 1.3rem; }
.op-doc-body hr { border-color: var(--op-border); opacity: 1; }
.op-doc-body table { width: 100%; margin: 1rem 0; }
.op-doc-body th, .op-doc-body td { padding: .5rem .7rem; border-bottom: 1px solid var(--op-border); }
@media (max-width: 575.98px) { .op-doc-hero { padding: 1.4rem 1.1rem; } .op-doc-body { padding: 1.2rem 1.1rem 1.5rem; } }

.op-doc-lead { font-size: 1.05rem; color: rgba(255, 255, 255, .85); }
.op-doc-h { display: flex; align-items: center; gap: .75rem; font-size: 1.25rem !important; }
.op-doc-h > span { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 11px; font-size: .95rem; color: var(--op-ink); background: linear-gradient(135deg, var(--op-yellow), var(--op-orange)); }
.op-doc-h em { font-style: normal; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #7fe0a0; background: rgba(80, 200, 120, .14); padding: .15rem .5rem; border-radius: 999px; }
.op-doc-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .75rem; margin: 1rem 0; }
.op-doc-step { position: relative; padding: 1rem; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06); transition: transform .25s var(--op-ease), border-color .2s; line-height: 1.45; }
.op-doc-step:hover { transform: translateY(-4px); border-color: var(--op-border-strong); }
.op-doc-step i { display: block; font-size: 1.3rem; color: var(--op-yellow); margin-bottom: .5rem; }
.op-doc-step strong { display: block; color: #fff; }
.op-doc-step small { color: var(--op-muted); }
.op-doc-copy { display: flex; align-items: center; gap: .75rem; padding: .6rem .6rem .6rem 1.1rem; border-radius: 16px; background: rgba(0, 0, 0, .35); border: 1px dashed var(--op-border-strong); margin: 1.2rem 0 .6rem; }
.op-doc-copy code { flex: 1; background: none !important; font-size: 1.05rem !important; padding: 0 !important; }
.op-doc-copy .btn { border-radius: 12px; font-weight: 700; white-space: nowrap; transition: transform .2s var(--op-ease), background .2s; }
.op-doc-copy .btn.op-copied { background: #56c46a; border-color: #56c46a; color: #fff; transform: scale(1.05); }
.op-doc-note { font-size: .85rem; color: var(--op-muted); overflow-wrap: anywhere; }
.op-doc-card { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.2rem; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06); margin: 1rem 0; line-height: 1.45; }
.op-doc-card > i { font-size: 1.8rem; color: var(--op-yellow); width: 2.4rem; text-align: center; }
.op-doc-card > div { flex: 1; min-width: 200px; }
.op-doc-card strong { display: block; color: #fff; }
.op-doc-card small { color: var(--op-muted); }
.op-doc-card .btn { border-radius: 12px; font-weight: 700; }
.op-doc-discord > i { color: #8b9cff; }
.op-doc-cmds { display: grid; gap: .5rem; margin: .8rem 0 1.2rem; }
.op-doc-cmds > div { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: .4rem 1rem; align-items: baseline; padding: .7rem 1rem; border-radius: 14px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .05); line-height: 1.5; transition: border-color .2s, background .2s; }
.op-doc-cmds > div:hover { border-color: var(--op-border-strong); background: rgba(var(--op-yellow-rgb), .05); }
.op-doc-cmds > div > code { font-weight: 700; justify-self: start; }
.op-doc-cmds small { color: var(--op-muted); font-size: .88rem; }
@media (max-width: 767.98px) { .op-doc-cmds > div { grid-template-columns: 1fr; } }

/* =========================================================== SUBMIT MAP */
.op-sub-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
@media (max-width: 767.98px) { .op-sub-steps { grid-template-columns: 1fr; } }
.op-sub-steps > div { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .75rem; align-items: center; padding: .8rem 1rem; border-radius: 14px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .06); animation: op-rise .5s var(--op-ease) both; animation-delay: calc(var(--i, 0) * 80ms + .1s); }
.op-sub-steps span { grid-row: span 2; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; font-weight: 800; color: var(--op-ink); background: linear-gradient(135deg, var(--op-yellow), var(--op-orange)); }
.op-sub-steps strong { color: #fff; }
.op-sub-steps small { color: var(--op-muted); }
.op-sub-card { padding: 1.5rem; border-radius: 20px; background: var(--op-card); border: 1px solid var(--op-border); margin-bottom: 1.25rem; animation: op-rise .5s var(--op-ease) both .1s; }
.op-sub-label { display: block; font-weight: 800; color: #fff; margin: 0 0 .5rem; }
.op-sub-label:not(:first-child) { margin-top: 1.3rem; }
.op-sub-linkrow { display: grid; grid-template-columns: 1fr 150px; gap: .75rem; align-items: stretch; }
@media (max-width: 575.98px) { .op-sub-linkrow { grid-template-columns: 1fr; } .op-sub-preview { display: none !important; } }
.op-sub-preview { border-radius: 14px; background: rgba(0, 0, 0, .35) center / cover no-repeat; border: 1px dashed var(--op-border); display: grid; place-items: center; color: var(--op-muted); min-height: 50px; transition: border-color .2s; }
.op-sub-preview.has-cover { border-style: solid; border-color: var(--op-border-strong); animation: op-pop .4s var(--op-ease); }
.op-sub-preview.has-cover i { display: none; }
.op-sub-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
@media (max-width: 991.98px) { .op-sub-types { grid-template-columns: repeat(2, 1fr); } }
.op-sub-type { --tc: #66ccff; position: relative; display: flex; flex-direction: column; gap: .2rem; padding: 1rem; border-radius: 16px; cursor: pointer; background: rgba(255, 255, 255, .04); border: 2px solid rgba(255, 255, 255, .06); transition: transform .25s var(--op-ease), border-color .2s, background .2s, box-shadow .25s; animation: op-rise .45s var(--op-ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
.op-sub-type.op-t-loved { --tc: #ff8fc4; }
.op-sub-type.op-t-grave { --tc: #b9b29c; }
.op-sub-type.op-t-down { --tc: #ffae5c; }
.op-sub-type i { font-size: 1.3rem; color: var(--tc); margin-bottom: .3rem; transition: transform .3s var(--op-ease); }
.op-sub-type strong { color: #fff; }
.op-sub-type small { color: var(--op-muted); font-size: .8rem; line-height: 1.35; }
.op-sub-type:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .15); }
.op-sub-type:hover i { transform: scale(1.15) rotate(-6deg); }
.btn-check:checked + .op-sub-type { border-color: var(--tc); background: color-mix(in srgb, var(--tc) 12%, transparent); box-shadow: 0 8px 24px color-mix(in srgb, var(--tc) 25%, transparent); }
.btn-check:checked + .op-sub-type::after { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; top: .7rem; right: .8rem; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-size: .7rem; color: #111; background: var(--tc); }
.btn-check:focus-visible + .op-sub-type { outline: 2px solid var(--op-yellow); outline-offset: 2px; }
.op-sub-reason { border-radius: 14px; background: rgba(0, 0, 0, .35); border-color: var(--op-border); }
.op-sub-send { margin-top: 1.2rem; border-radius: 14px; font-weight: 800; padding: .7rem 1.6rem; }

.op-sub-mine { margin-bottom: 2rem; }
.op-sub-mine h3 { font-size: 1.15rem; font-weight: 800; margin: 0 0 .9rem; }
.op-sub-mine h3 i { color: var(--op-yellow); margin-right: .4rem; }
.op-sub-item { display: flex; align-items: center; gap: 1rem; padding: .7rem 1rem .7rem .7rem; margin-bottom: .55rem; border-radius: 16px; text-decoration: none; color: var(--op-text); background: var(--op-card); border: 1px solid rgba(255, 255, 255, .05); transition: transform .25s var(--op-ease), border-color .2s; animation: op-rise .45s var(--op-ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
.op-sub-item:hover { transform: translateX(6px); border-color: var(--op-border-strong); color: #fff; }
.op-sub-item img { width: 92px; height: 60px; border-radius: 11px; object-fit: cover; flex-shrink: 0; }
.op-sub-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.op-sub-item-info strong { color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-sub-item-info span { color: var(--op-muted); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-sub-item-info em { color: rgba(255, 255, 255, .75); font-size: .82rem; font-style: normal; margin-top: .2rem; }
.op-sub-req { font-weight: 700; font-size: .85rem; color: var(--op-muted); white-space: nowrap; }
.op-sub-state { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .75rem; border-radius: 999px; font-size: .78rem; font-weight: 800; white-space: nowrap; }
.op-s-pending { color: var(--op-yellow); background: rgba(var(--op-yellow-rgb), .14); }
.op-s-accepted { color: #7fe0a0; background: rgba(80, 200, 120, .15); }
.op-s-declined { color: #ff7b7b; background: rgba(255, 90, 90, .15); }
.op-s-unranked { color: #b9b29c; background: rgba(255, 255, 255, .08); }
@media (max-width: 575.98px) { .op-sub-item img, .op-sub-req { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .op-nav-glow, .op-nav-links .nav-link::after, .op-pf-cover::before, .op-pf-name.supporter, .op-pf-level-fill,
  .op-lb-row, .op-country-chip, .op-bm-card, .op-pf-stat, .op-pf-section, .op-lb, .op-pf, .op-bm-hero,
  .op-sc, .op-clan-card, .op-map-hero, .op-map-cover, .op-map-bar > div, .op-map-board, .op-map-score,
  .op-sp-hero, .op-sp-grade, .op-sp-hits, .op-sp-hitbar span, .op-doc-nav, .op-doc-nav a, .op-doc, .op-doc-icon,
  .op-sub-steps > div, .op-sub-card, .op-sub-type, .op-sub-item { animation: none !important; }
}
.op-sc-stars { display: inline-flex; align-items: center; gap: .25rem; padding: .05rem .45rem; border-radius: 6px; font-size: .72rem; font-weight: 800; color: var(--op-yellow); background: rgba(0, 0, 0, .45); border: 1px solid rgba(var(--op-yellow-rgb), .35); }
.op-map-sr.op-sr-light { color: var(--op-yellow); box-shadow: inset 0 0 0 1px rgba(var(--op-yellow-rgb), .35); }
.op-sp-player .op-lb-flag { width: 22px; height: 16px; border-radius: 3px; object-fit: cover; }

/* home hero: name-only logo, large, upper middle of the video */
.op-video .op-video-logo { left: 48%; top: 40%; width: 66%; max-width: 520px; filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .75)) drop-shadow(0 0 30px rgba(var(--op-orange-rgb, 255, 190, 40), .25)); }

/* home hero: logo instead of the text title */
.op-title-logo { display: block; width: min(560px, 100%); height: auto; margin: .35rem 0 .6rem -.4rem; filter: drop-shadow(0 10px 28px rgba(0, 0, 0, .55)) drop-shadow(0 0 34px rgba(var(--op-orange-rgb, 255, 190, 40), .22)); animation: opu-hero-logo 6s ease-in-out infinite; }
@keyframes opu-hero-logo { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(5px) rotate(0deg); } }

/* home hero: news ticker on the video */
.op-news { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); width: min(82%, 520px); z-index: 2;
  padding: .85rem 1rem .7rem; border-radius: 18px; background: rgba(var(--op-dk-14-13-8, 14, 13, 8), .74); border: 1px solid var(--op-border-strong);
  -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .04); }
.op-news-head { display: flex; align-items: center; gap: .45rem; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--op-yellow); margin-bottom: .55rem; }
.op-news-items { position: relative; min-height: 64px; }
.op-news-item { position: absolute; inset: 0; display: flex; align-items: center; gap: .8rem; text-decoration: none; color: #fff;
  opacity: 0; transform: translateY(-10px); pointer-events: none; transition: opacity .22s ease, transform .22s ease; }
/* the new item only fades in once the old one is gone, so texts never overlap */
.op-news-item.active { opacity: 1; transform: none; pointer-events: auto; transition: opacity .45s ease .25s, transform .55s var(--op-ease) .25s; }
.op-news-item:hover strong { color: var(--op-yellow); }
.op-news-icon { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: 14px; font-size: 1.1rem; color: #111; background: var(--nc, var(--op-yellow)); box-shadow: 0 6px 18px color-mix(in srgb, var(--nc, var(--op-yellow)) 40%, transparent); }
.op-news-item.active .op-news-icon { animation: op-pop .5s var(--op-ease); }
.op-news-body { min-width: 0; display: flex; flex-direction: column; }
.op-news-body small { color: var(--op-muted); font-size: .72rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-news-body small .op-ago { margin-left: .3rem; font-weight: 600; }
.op-news-body strong { font-size: .95rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .2s; }
.op-news-dots { display: flex; gap: .35rem; justify-content: center; margin-top: .55rem; }
.op-news-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .25); transition: width .3s var(--op-ease), background .2s; }
.op-news-dots button.active { width: 20px; background: var(--op-yellow); }
@media (max-width: 575.98px) { .op-news { width: 92%; padding: .6rem .7rem; } .op-news-body strong { font-size: .82rem; } .op-news-icon { width: 36px; height: 36px; } }
@media (prefers-reduced-motion: reduce) { .op-title-logo, .op-news-item.active .op-news-icon { animation: none; } }

/* submit: icon must never overlap the title */
.op-sub-type i { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start;
  width: 1.9rem; height: 1.9rem; font-size: 1.2rem; line-height: 1; margin: 0 0 .4rem; transform-origin: 50% 50%; }
.op-sub-type:hover i { transform: scale(1.12) rotate(-6deg); }

/* rounded display font for names, titles and big numbers (the system font turns into
   a blocky "Segoe UI Black" on Windows at weight 800) */
:root { --op-font-display: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif; }
.op-pf-name, .op-lb-name, .op-clan-name, .op-sc-title, .op-bm-title, .op-map-title, .op-sp-title,
.op-bm-hero h1, .op-doc-hero h1, .op-page-head h1, .op-panel-head h3, .op-map-board-head h3, .op-sub-mine h3,
.op-pf-rank strong, .op-pf-stat strong, .op-pf-level-hex, .op-lb-main, .op-lb-rank, .op-sc-pp, .op-sp-pp strong,
.op-clan-value, .op-map-facts strong, .op-sp-hitgrid strong, .op-stat-num, .op-podium-name, .op-podium-pp,
.op-news-body strong, .op-doc-h, .op-sub-type strong, .op-score-title, .op-pf-tag {
  font-family: var(--op-font-display);
}
.op-pf-name { font-weight: 900; letter-spacing: .005em; }

/* Verified check next to a name */
.op-verified { display: inline-flex; align-items: center; margin-left: .45rem; font-size: .5em; vertical-align: middle; color: #3ad678;
  filter: drop-shadow(0 0 10px rgba(58, 214, 120, .45)); -webkit-text-fill-color: #3ad678; cursor: help; }
.op-verified-sm { font-size: .85rem; margin-left: .1rem; filter: none; }

/* profile badges (osu! tournament badge format 86x40) */
.op-pf-badges { display: flex; flex-wrap: wrap; gap: .55rem; padding: 0 2rem 1.1rem; position: relative; z-index: 2; }
.op-badge { display: inline-flex; border-radius: 8px; overflow: hidden; cursor: help; background: rgba(0, 0, 0, .35);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .08);
  transition: transform .25s var(--op-ease), box-shadow .25s; animation: op-pop .45s var(--op-ease) both; animation-delay: calc(var(--i, 0) * 60ms + .2s); }
.op-badge img { display: block; width: 86px; height: 40px; object-fit: contain; }
.op-badge.op-badge-event img, .op-badge.op-badge-special img { width: auto; min-width: 40px; max-width: 120px; }
.op-badge:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 8px 22px rgba(0, 0, 0, .5), 0 0 0 1px var(--op-border-strong); }
@media (max-width: 575.98px) { .op-pf-badges { padding: 0 1rem 1rem; } }
@media (prefers-reduced-motion: reduce) { .op-badge { animation: none; } }

/* profile header: name sits higher, next to the middle of the avatar instead of on the bottom edge */
.op-pf-info { align-items: center; margin-top: -118px; }
.op-pf-id { padding-bottom: 0; padding-top: .4rem; }
.op-pf-name { text-shadow: 0 3px 18px rgba(0, 0, 0, .75), 0 1px 2px rgba(0, 0, 0, .6); margin-bottom: .6rem; }
.op-pf-actions { align-self: flex-end; padding-bottom: .9rem; }
@media (max-width: 575.98px) { .op-pf-info { margin-top: -80px; align-items: flex-end; } }

/* notification bell */
.op-bell { margin-right: .5rem; }
.op-bell-btn { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--op-border); color: var(--op-muted); transition: color .2s, background .2s, transform .2s var(--op-ease); }
.op-bell-btn:hover, .op-bell-btn[aria-expanded="true"] { color: var(--op-yellow); background: rgba(var(--op-yellow-rgb), .1); }
.op-bell-btn:hover i { animation: opu-ring .6s ease; }
@keyframes opu-ring { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(14deg); } 50% { transform: rotate(-12deg); } 75% { transform: rotate(6deg); } }
.op-bell-count { position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; display: grid; place-items: center;
  font-size: .68rem; font-weight: 800; color: #fff; background: #ff4e5b; box-shadow: 0 0 0 2px rgb(var(--op-dk-20-18-10, 20, 18, 10)); animation: op-pop .4s var(--op-ease); }
.op-bell-menu { width: 360px; max-width: calc(100vw - 2rem); padding: .4rem !important; max-height: 70vh; overflow-y: auto; }
.op-bell-head { padding: .45rem .7rem .55rem; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--op-muted); }
.op-bell-item { display: flex; gap: .7rem; padding: .6rem .7rem; border-radius: 11px; text-decoration: none; color: var(--op-text); transition: background .15s; }
.op-bell-item:hover { background: rgba(var(--op-yellow-rgb), .08); color: #fff; }
.op-bell-item.unread { background: rgba(var(--op-yellow-rgb), .06); box-shadow: inset 3px 0 0 var(--op-yellow); }
.op-bell-icon { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; color: #111; background: var(--nc, var(--op-yellow)); }
.op-bell-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.op-bell-text strong { font-size: .86rem; }
.op-bell-text small { color: var(--op-muted); font-size: .78rem; overflow-wrap: anywhere; }
.op-bell-text em { font-style: normal; font-size: .7rem; color: rgba(255, 255, 255, .45); margin-top: .15rem; }
.op-bell-empty { padding: 1.4rem .7rem; text-align: center; color: var(--op-muted); font-size: .88rem; }
.op-bell-empty i { display: block; font-size: 1.4rem; margin-bottom: .4rem; color: var(--op-yellow); opacity: .6; }

/* profile comments (plain text) */
.op-comments { padding: 1.3rem 1.4rem 1rem !important; }
.op-comments-title { font-size: 1.05rem; font-weight: 800; margin: 0 0 1rem; display: flex; align-items: center; gap: .5rem; }
.op-comments-title i { color: var(--op-yellow); }
.op-comments-title span { font-size: .75rem; padding: .1rem .5rem; border-radius: 99px; background: rgba(255, 255, 255, .08); color: var(--op-muted); }
.op-comment-form { display: flex; gap: .8rem; margin-bottom: 1.2rem; }
.op-comment-form > img, .op-comment > a > img { width: 42px; height: 42px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.op-comment-input { flex: 1; min-width: 0; }
.op-comment-input textarea { width: 100%; resize: vertical; min-height: 60px; padding: .65rem .85rem; border-radius: 14px; color: #fff;
  background: rgba(0, 0, 0, .35); border: 1px solid var(--op-border); transition: border-color .2s, box-shadow .2s; }
.op-comment-input textarea:focus { outline: 0; border-color: var(--op-border-strong); box-shadow: 0 0 0 4px rgba(var(--op-yellow-rgb), .1); }
.op-comment-bar { display: flex; align-items: center; justify-content: space-between; margin-top: .45rem; color: var(--op-muted); }
.op-comment-bar .btn { border-radius: 10px; font-weight: 700; }
.op-comment { display: flex; gap: .8rem; padding: .8rem 0; border-top: 1px solid rgba(255, 255, 255, .06); animation: op-rise .4s var(--op-ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
.op-comment-body { flex: 1; min-width: 0; }
.op-comment-head { display: flex; align-items: center; gap: .6rem; }
.op-comment-head a { font-weight: 800; color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; font-family: var(--op-font-display); }
.op-comment-head a.supporter { color: var(--op-yellow); }
.op-comment-head small { color: var(--op-muted); font-size: .75rem; }
.op-comment-body p { margin: .25rem 0 0; white-space: pre-line; overflow-wrap: anywhere; color: var(--op-text); }
.op-comment-del { border: 0; background: none; color: var(--op-muted); opacity: .6; padding: .2rem .4rem; border-radius: 8px; transition: color .2s, opacity .2s, background .2s; }
.op-comment-del:hover { color: #ff6b6b; opacity: 1; background: rgba(255, 90, 90, .1); }
.op-comment-empty, .op-comment-login { color: var(--op-muted); margin: .5rem 0 0; }
@media (prefers-reduced-motion: reduce) { .op-comment, .op-bell-count { animation: none; } }
/* small flag next to names everywhere */
.op-lb-flag { width: 22px; height: 16px; border-radius: 3px; object-fit: cover; flex-shrink: 0; }
/* supporter heart next to names (lists) */
.op-supporter-heart { color: #ff5e8a; font-size: .8rem; filter: drop-shadow(0 0 6px rgba(255, 94, 138, .45)); cursor: help; }

/* =========================================================== LEADERBOARD PODIUM (pedestals) */
@keyframes opu-sweep { 0%, 65% { transform: translateX(-160%) skewX(-20deg); } 100% { transform: translateX(320%) skewX(-20deg); } }
@media (max-width: 575.98px) {
}

/* =========================================================== CHAMPION TITLES (profile) */
.op-rank-titles { display: flex; flex-wrap: wrap; gap: .45rem; margin: -.1rem 0 .6rem; }
.op-rank-title { --metal: linear-gradient(90deg, var(--op-metal-hi, #fff3b0), var(--op-yellow), var(--op-metal-lo, #e6a91c), var(--op-yellow), var(--op-metal-hi, #fff3b0)); --edge: rgba(var(--op-yellow-rgb), .6);
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: .45rem; padding: .28rem .8rem .28rem .65rem; border-radius: 999px;
  font-family: var(--op-font-display); font-weight: 900; font-size: .88rem; letter-spacing: .02em;
  background: rgba(0, 0, 0, .55); border: 1px solid var(--edge); box-shadow: 0 0 18px color-mix(in srgb, var(--edge) 45%, transparent);
  animation: op-pop .5s var(--op-ease) both; animation-delay: calc(var(--i, 0) * 90ms + .3s); }
.op-rank-title, .op-rank-title i { background-clip: padding-box; }
.op-rank-title i { font-size: .85rem; color: var(--op-yellow); filter: drop-shadow(0 0 6px var(--edge)); }
.op-rank-title { color: var(--op-light, #ffe27a); }
.op-rank-title small { font-size: .68rem; font-weight: 800; opacity: .75; margin-left: .15rem; }
.op-rank-title::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 35%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: translateX(-160%) skewX(-20deg); animation: opu-sweep 3.8s ease-in-out infinite; }
.op-rank-title-silver { --edge: rgba(210, 222, 238, .6); color: #e8eef6; }
.op-rank-title-silver i { color: #d3dce8; }
.op-rank-title-bronze { --edge: rgba(224, 149, 90, .6); color: #f3c29a; }
.op-rank-title-bronze i { color: #e0955a; }
.op-rank-title-ex { --edge: rgba(var(--op-yellow-rgb), .28); color: var(--op-metal-mid, #cdb66a); box-shadow: none; }
.op-rank-title-ex i { color: #b89a3c; filter: none; }
.op-rank-title-ex::after { display: none; }
@media (prefers-reduced-motion: reduce) { .op-stage-col, .op-stage-crown, .op-stage-block::after, .op-rank-title, .op-rank-title::after { animation: none; } }

/* banners and covers stay still (no drifting pattern, no slow zoom, no zoom on hover) */
.op-pf-cover::before { animation: none !important; }
.op-pf-cover img.op-pf-banner, .op-pf-header:hover .op-pf-cover img.op-pf-banner { transform: none !important; transition: none !important; }
.op-map-cover { animation: none !important; transform: none !important; }
.op-bm-card:hover .op-bm-cover img { transform: none !important; }
.op-sc-bg, .op-sc:hover .op-sc-bg { transform: none !important; }
.op-clan-banner, .op-clan-card:hover .op-clan-banner { transform: none !important; }
.op-sc:hover .op-sc-thumb { transform: none !important; }

/* =========================================================== RANK HISTORY (osu!-style) */
.op-rankgraph { padding: .3rem .9rem .5rem; }
.op-rankgraph-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .8rem; margin-bottom: .6rem; }
.op-rankgraph-head h5 { margin: 0; font-size: .95rem; font-weight: 800; color: #fff; font-family: var(--op-font-display); text-transform: uppercase; letter-spacing: .05em; }
.op-rankgraph-head h5 i { color: var(--op-yellow); margin-right: .4rem; }
.op-rankgraph-head h5 span { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: .75rem; color: var(--op-muted); margin-left: .4rem; }
.op-rankgraph-info { display: flex; gap: 1.6rem; }
.op-rankgraph-info div { display: flex; flex-direction: column; line-height: 1.15; }
.op-rankgraph-info small { font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--op-muted); }
.op-rankgraph-info strong { font-family: var(--op-font-display); font-weight: 900; font-size: 1.35rem; color: #fff; }
.op-rankgraph-info em { font-style: normal; font-size: .72rem; color: var(--op-muted); }
.op-rankgraph-chart { position: relative; height: 140px; border-radius: 14px; background: rgba(0, 0, 0, .22); padding: .6rem .4rem .3rem; }
.op-rankgraph-chart canvas { width: 100% !important; height: 100% !important; }
.op-rankgraph-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--op-muted); font-size: .9rem; pointer-events: none; }

/* ===== Profile: play history + most watched (qw26_21) ===== */
.op-playgraph .op-rankgraph-head h5 i { color: #ff7eb6; }
.op-playgraph-chart { height: 190px; padding: .7rem .6rem .4rem; }
.op-sc-views { margin-top: .3rem; font-size: .72rem; font-weight: 800; color: #ff9fca; white-space: nowrap; }
.op-sc-views i { margin-right: .3rem; }

/* ===== Login / Register / Recover (.op-auth) ===== */
.op-auth { display: grid; grid-template-columns: 1.05fr 1fr; max-width: 1020px; margin: 1.5rem auto 3rem; border-radius: 24px; overflow: hidden;
  background: var(--op-card); border: 1px solid var(--op-border); box-shadow: 0 30px 70px rgba(0, 0, 0, .45); animation: op-rise .45s var(--op-ease); }
.op-auth-side { position: relative; padding: 2.6rem 2.4rem; display: flex; flex-direction: column; justify-content: space-between; min-height: 540px;
  background: linear-gradient(160deg, rgba(var(--op-dk-20-16-6, 20, 16, 6), .55), rgba(var(--op-dk-20-16-6, 20, 16, 6), .92)), url('/img/osupompa/bg-v2.jpg') center / cover; }
.op-auth-side::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--op-grad); background-size: 300% 100%; animation: op-grad-move 6s linear infinite; }
.op-auth-logo { width: 230px; max-width: 80%; height: auto; filter: drop-shadow(0 6px 20px rgba(0, 0, 0, .5)); }
.op-auth-side h2 { font-family: var(--op-font-display); font-weight: 900; font-size: 2rem; color: #fff; margin: 1.6rem 0 .5rem; line-height: 1.15; }
.op-auth-side p { color: rgba(255, 255, 255, .72); margin: 0; }
.op-auth-perks { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .75rem; }
.op-auth-perks li { display: flex; align-items: center; gap: .8rem; color: #fff; font-weight: 600; font-size: .95rem; }
.op-auth-perks i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; flex-shrink: 0;
  background: rgba(var(--op-yellow-rgb), .14); color: var(--op-yellow); font-size: .85rem; }
.op-auth-side-foot { margin-top: 2rem; font-size: .85rem; color: rgba(255, 255, 255, .6); }
.op-auth-side-foot a { color: var(--op-yellow); font-weight: 700; text-decoration: none; }
.op-auth-main { padding: 2.6rem 2.4rem; display: flex; flex-direction: column; justify-content: center; }
.op-auth-main h1 { font-family: var(--op-font-display); font-weight: 900; font-size: 1.9rem; color: #fff; margin: 0 0 .25rem; }
.op-auth-sub { color: var(--op-muted); margin-bottom: 1.6rem; }
.op-auth-alert { display: flex; gap: .6rem; align-items: flex-start; padding: .75rem .9rem; border-radius: 12px; margin-bottom: 1.2rem; font-size: .9rem; font-weight: 600; }
.op-auth-alert.err { background: rgba(255, 94, 107, .12); border: 1px solid rgba(255, 94, 107, .35); color: #ffb3b9; }
.op-auth-alert.ok { background: rgba(58, 214, 120, .1); border: 1px solid rgba(58, 214, 120, .32); color: #9ff0bf; }
.op-auth-alert i { margin-top: .15rem; }
.op-field { margin-bottom: 1.05rem; }
.op-field label { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--op-muted); margin-bottom: .4rem; }
.op-input { position: relative; }
.op-input > i { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); color: var(--op-muted); font-size: .9rem; pointer-events: none; transition: color .2s; }
.op-input input, .op-input select, .op-input textarea { width: 100%; height: 48px; padding: 0 2.9rem 0 2.6rem; border-radius: 12px; color: #fff; font-size: .98rem;
  background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .1); outline: none; transition: border-color .2s, box-shadow .2s, background .2s; }
.op-input select { appearance: none; padding-right: 2.4rem; cursor: pointer; }
.op-input select option { background: rgb(var(--op-dk-27-23-12, 27, 23, 12)); }
.op-input input::placeholder { color: rgba(255, 255, 255, .3); }
.op-input input:focus, .op-input select:focus, .op-input textarea:focus { border-color: var(--op-border-strong); background: rgba(0, 0, 0, .42); box-shadow: 0 0 0 4px rgba(var(--op-yellow-rgb), .12); }
.op-input:focus-within > i { color: var(--op-yellow); }
.op-input-eye { position: absolute; right: .45rem; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 9px;
  background: transparent; color: var(--op-muted); transition: color .2s, background .2s; }
.op-input-eye:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.op-hint { font-size: .78rem; color: var(--op-muted); margin-top: .4rem; }
.op-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: .55rem; }
.op-meter span { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .1); transition: background .25s; }
.op-meter[data-level="1"] span:nth-child(-n+1) { background: #ff5e6b; }
.op-meter[data-level="2"] span:nth-child(-n+2) { background: #ff9a3c; }
.op-meter[data-level="3"] span:nth-child(-n+3) { background: var(--op-yellow); }
.op-meter[data-level="4"] span { background: #3ad678; }
.op-auth-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .3rem 0 1.1rem; font-size: .9rem; }
.op-auth-row a { color: var(--op-yellow); text-decoration: none; font-weight: 600; }
.op-check { display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; color: rgba(255, 255, 255, .85); user-select: none; }
.op-check input { appearance: none; width: 38px; height: 22px; border-radius: 22px; background: rgba(255, 255, 255, .12); position: relative; cursor: pointer; transition: background .2s; margin: 0; }
.op-check input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .25s var(--op-ease); }
.op-check input:checked { background: var(--op-yellow); }
.op-check input:checked::after { transform: translateX(16px); background: rgb(var(--op-dk-27-23-12, 27, 23, 12)); }
.op-auth #turnstile { margin: .4rem 0 1rem; min-height: 65px; }
.op-btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; height: 48px; padding: 0 1.4rem; border: 0; border-radius: 12px;
  font-weight: 800; font-size: 1rem; text-decoration: none; cursor: pointer; transition: transform .2s var(--op-ease), box-shadow .2s, filter .2s; }
.op-btn-main { background: linear-gradient(135deg, var(--op-light, #ffe07a), var(--op-yellow) 45%, var(--op-orange)); color: rgb(var(--op-dk-27-20-5, 27, 20, 5)); box-shadow: 0 10px 26px rgba(var(--op-yellow-rgb), .25); }
.op-btn-main:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(var(--op-yellow-rgb), .35); color: rgb(var(--op-dk-27-20-5, 27, 20, 5)); }
.op-btn-block { width: 100%; }
.op-btn-ghost { background: rgba(255, 255, 255, .06); color: #fff; border: 1px solid rgba(255, 255, 255, .1); }
.op-btn-ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.op-btn-danger { background: rgba(255, 94, 107, .14); color: #ff9aa2; border: 1px solid rgba(255, 94, 107, .35); }
.op-btn-danger:hover { background: rgba(255, 94, 107, .24); color: #fff; }
.op-btn-sm { height: 38px; padding: 0 1rem; font-size: .88rem; border-radius: 10px; }
.op-auth-switch { margin-top: 1.4rem; text-align: center; color: var(--op-muted); font-size: .92rem; }
.op-auth-switch a { color: var(--op-yellow); font-weight: 800; text-decoration: none; }
.op-auth-legal { margin-top: .9rem; font-size: .78rem; color: var(--op-muted); text-align: center; }
.op-auth-legal a { color: rgba(255, 255, 255, .8); }
@media (max-width: 860px) {
  .op-auth { grid-template-columns: 1fr; margin-top: .5rem; }
  .op-auth-side { min-height: 0; padding: 1.8rem 1.4rem; }
  .op-auth-side h2 { font-size: 1.5rem; margin-top: 1rem; }
  .op-auth-perks, .op-auth-side-foot { display: none; }
  .op-auth-main { padding: 1.8rem 1.4rem; }
}

/* ===== Settings (.op-set) ===== */
.op-set-hero { position: relative; border-radius: 22px; overflow: hidden; margin: .5rem 0 1.4rem; border: 1px solid var(--op-border); background: rgb(var(--op-dk-21-18-10, 21, 18, 10)); min-height: 170px; }
.op-set-hero-bg { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(var(--op-yellow-rgb), .25), rgba(255, 94, 168, .18)), url('/img/osupompa/bg-v2.jpg') center / cover; }
.op-set-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.op-set-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--op-dk-12-10-5, 12, 10, 5), .92) 0%, rgba(var(--op-dk-12-10-5, 12, 10, 5), .6) 55%, rgba(var(--op-dk-12-10-5, 12, 10, 5), .3)); }
.op-set-hero-in { position: relative; z-index: 1; display: flex; align-items: center; gap: 1.3rem; padding: 1.8rem 2rem; min-height: 170px; }
.op-set-hero-in img.op-set-av { width: 96px; height: 96px; border-radius: 22px; object-fit: cover; border: 3px solid rgba(var(--op-yellow-rgb), .55); box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
.op-set-hero small { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--op-yellow); }
.op-set-hero h1 { font-family: var(--op-font-display); font-weight: 900; font-size: 2rem; color: #fff; margin: .1rem 0 .5rem; }
.op-set-hero .op-btn { margin-left: auto; }
.op-set { display: grid; grid-template-columns: 250px 1fr; gap: 1.4rem; align-items: start; margin-bottom: 3rem; }
.op-set-nav { position: sticky; top: 90px; display: flex; flex-direction: column; gap: .3rem; padding: .6rem; border-radius: 18px; background: var(--op-card); border: 1px solid var(--op-border); }
.op-set-nav a { display: flex; align-items: center; gap: .8rem; padding: .7rem .8rem; border-radius: 12px; color: var(--op-muted); font-weight: 700; text-decoration: none; transition: background .2s, color .2s, padding-left .25s var(--op-ease); }
.op-set-nav a i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, .05); font-size: .85rem; transition: background .2s, color .2s; }
.op-set-nav a span { display: flex; flex-direction: column; line-height: 1.2; }
.op-set-nav a em { font-style: normal; font-weight: 500; font-size: .74rem; opacity: .75; }
.op-set-nav a:hover { color: #fff; background: rgba(255, 255, 255, .04); padding-left: 1rem; }
.op-set-nav a.active { color: #fff; background: rgba(var(--op-yellow-rgb), .1); }
.op-set-nav a.active i { background: var(--op-yellow); color: rgb(var(--op-dk-27-20-5, 27, 20, 5)); }
.op-set-main { display: flex; flex-direction: column; gap: 1.2rem; min-width: 0; }
.op-set-card { border-radius: 18px; background: var(--op-card); border: 1px solid var(--op-border); padding: 1.4rem 1.5rem; animation: op-rise .4s var(--op-ease) both; }
.op-set-card:nth-child(2) { animation-delay: .04s; } .op-set-card:nth-child(3) { animation-delay: .08s; } .op-set-card:nth-child(4) { animation-delay: .12s; }
.op-set-card-head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.2rem; }
.op-set-card-head > i { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; flex-shrink: 0; background: rgba(var(--op-yellow-rgb), .12); color: var(--op-yellow); }
.op-set-card-head h3 { margin: 0; font-family: var(--op-font-display); font-weight: 800; font-size: 1.12rem; color: #fff; }
.op-set-card-head p { margin: 0; font-size: .85rem; color: var(--op-muted); }
.op-set-card-head .op-set-tag { margin-left: auto; font-size: .7rem; font-weight: 800; padding: .25rem .6rem; border-radius: 20px; background: rgba(255, 94, 168, .14); color: #ff9fca; white-space: nowrap; }
.op-set-card.danger { border-color: rgba(255, 94, 107, .3); }
.op-set-card.danger .op-set-card-head > i { background: rgba(255, 94, 107, .14); color: #ff7b86; }
.op-set-alert { display: flex; gap: .6rem; align-items: center; padding: .85rem 1rem; border-radius: 14px; font-weight: 600; }
.op-set-alert.err { background: rgba(255, 94, 107, .12); border: 1px solid rgba(255, 94, 107, .35); color: #ffb3b9; }
.op-set-alert.ok { background: rgba(58, 214, 120, .1); border: 1px solid rgba(58, 214, 120, .32); color: #9ff0bf; }
.op-set-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.op-set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.op-set-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.op-set-split > div + div { border-left: 1px solid rgba(255, 255, 255, .07); padding-left: 1.2rem; }
.op-set-split h4 { font-size: .8rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--op-muted); margin: 0 0 .8rem; }
/* upload with preview */
.op-upload { display: flex; gap: 1.3rem; align-items: center; }
.op-upload-av { width: 120px; height: 120px; border-radius: 24px; object-fit: cover; flex-shrink: 0; border: 3px solid rgba(var(--op-yellow-rgb), .4); background: rgba(0, 0, 0, .3); }
.op-drop { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; min-height: 120px; padding: 1rem;
  border: 2px dashed rgba(var(--op-yellow-rgb), .28); border-radius: 16px; background: rgba(0, 0, 0, .18); color: var(--op-muted); text-align: center; transition: border-color .2s, background .2s; cursor: pointer; }
.op-drop:hover, .op-drop.over { border-color: var(--op-yellow); background: rgba(var(--op-yellow-rgb), .06); color: #fff; }
.op-drop i { font-size: 1.5rem; color: var(--op-yellow); }
.op-drop strong { color: #fff; }
.op-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.op-drop-name { font-size: .8rem; color: var(--op-yellow); font-weight: 700; }
.op-banner-prev { position: relative; height: 150px; border-radius: 14px; overflow: hidden; margin-bottom: 1rem; background: linear-gradient(120deg, rgba(var(--op-yellow-rgb), .18), rgba(255, 94, 168, .14)); border: 1px solid rgba(255, 255, 255, .08); }
.op-banner-prev img { width: 100%; height: 100%; object-fit: cover; }
.op-banner-prev span { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, .45); font-weight: 700; }
.op-banner-prev img + span { display: none; }
/* favorite mode tiles */
.op-modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.op-modes label { position: relative; cursor: pointer; }
.op-modes input { position: absolute; opacity: 0; pointer-events: none; }
.op-modes span { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .85rem .5rem; border-radius: 14px; text-align: center; font-weight: 700; font-size: .86rem;
  background: rgba(0, 0, 0, .22); border: 1px solid rgba(255, 255, 255, .08); color: var(--op-muted); transition: all .2s var(--op-ease); }
.op-modes span i { font-size: 1.1rem; }
.op-modes label:hover span { color: #fff; border-color: var(--op-border-strong); transform: translateY(-2px); }
.op-modes input:checked + span { color: rgb(var(--op-dk-27-20-5, 27, 20, 5)); background: var(--op-yellow); border-color: var(--op-yellow); box-shadow: 0 8px 22px rgba(var(--op-yellow-rgb), .25); }
.op-modes input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.op-set-textarea { width: 100%; min-height: 230px; padding: .9rem 1rem; border-radius: 12px; color: #fff; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .1); outline: none; font-family: ui-monospace, Consolas, monospace; font-size: .9rem; resize: vertical; }
.op-set-textarea:focus { border-color: var(--op-border-strong); box-shadow: 0 0 0 4px rgba(var(--op-yellow-rgb), .12); }
.op-set-lock { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border-radius: 14px; background: rgba(255, 94, 168, .07); border: 1px solid rgba(255, 94, 168, .22); }
.op-set-lock > i { font-size: 1.4rem; color: #ff7eb6; }
.op-set-lock div { flex: 1; color: rgba(255, 255, 255, .85); font-size: .92rem; }
.op-set-lock strong { display: block; color: #fff; }
.op-set-note { display: flex; gap: .6rem; align-items: center; padding: .8rem 1rem; border-radius: 12px; background: rgba(255, 255, 255, .04); color: var(--op-muted); font-size: .9rem; }
/* sessions */
.op-sessions { display: grid; gap: .6rem; }
.op-session { display: flex; align-items: center; gap: 1rem; padding: .85rem 1rem; border-radius: 14px; background: rgba(0, 0, 0, .2); border: 1px solid rgba(255, 255, 255, .06); }
.op-session > i { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, .06); color: #fff; font-size: 1.05rem; flex-shrink: 0; }
.op-session div { flex: 1; min-width: 0; }
.op-session strong { color: #fff; display: block; }
.op-session small { color: var(--op-muted); }
.op-session-cur { font-size: .68rem; font-weight: 800; padding: .15rem .5rem; border-radius: 20px; background: rgba(58, 214, 120, .15); color: #7eeaa9; margin-left: .4rem; vertical-align: middle; }
@media (max-width: 900px) {
  .op-set { grid-template-columns: 1fr; }
  .op-set-nav { position: static; flex-direction: row; overflow-x: auto; }
  .op-set-nav a { flex-shrink: 0; }
  .op-set-nav a em { display: none; }
  .op-set-grid, .op-set-split { grid-template-columns: 1fr; }
  .op-set-split > div + div { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255, 255, 255, .07); padding-top: 1.2rem; }
  .op-modes { grid-template-columns: repeat(2, 1fr); }
  .op-upload { flex-direction: column; align-items: stretch; }
  .op-upload-av { align-self: center; }
  .op-set-hero-in { padding: 1.3rem; }
  .op-set-hero .op-btn { display: none; }
}
/* country picker (select2 with flags) inside .op-input */
.op-input .select2-container { width: 100% !important; }
.op-input .select2-container .select2-selection--single { height: 48px; display: flex; align-items: center; padding-left: 2.1rem; border-radius: 12px;
  background: rgba(0, 0, 0, .3) !important; border: 1px solid rgba(255, 255, 255, .1) !important; }
.op-input .select2-container--open .select2-selection--single, .op-input .select2-container--focus .select2-selection--single { border-color: var(--op-border-strong) !important; box-shadow: 0 0 0 4px rgba(var(--op-yellow-rgb), .12); }
.op-input .select2-selection__rendered { color: #fff !important; }
.op-input .select2-selection__arrow { height: 46px !important; right: 8px !important; }
.op-input > i { z-index: 2; }

/* ===== Settings: profile layout (drag & drop) ===== */
.op-layout { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.op-layout-item { display: flex; align-items: center; gap: .8rem; padding: .6rem .7rem; border-radius: 12px; background: rgba(0, 0, 0, .24);
  border: 1px solid rgba(255, 255, 255, .07); cursor: grab; user-select: none; transition: border-color .2s, background .2s, box-shadow .2s; }
.op-layout-item:hover { border-color: var(--op-border-strong); background: rgba(var(--op-yellow-rgb), .05); }
.op-layout-item.dragging { opacity: .55; cursor: grabbing; border-style: dashed; border-color: var(--op-yellow); }
.op-layout-item.op-layout-moved { animation: opu-layout-flash .5s ease; }
@keyframes opu-layout-flash { from { background: rgba(var(--op-yellow-rgb), .2); } to { background: rgba(0, 0, 0, .24); } }
.op-layout-grip { color: var(--op-muted); padding: 0 .1rem; }
.op-layout-num { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: rgba(255, 255, 255, .06); font-size: .75rem; font-weight: 800; color: var(--op-muted); }
.op-layout-icon { width: 20px; text-align: center; color: var(--op-yellow); }
.op-layout-label { flex: 1; color: #fff; font-weight: 700; }
.op-layout-btns { display: flex; gap: .3rem; }
.op-layout-btns button { width: 32px; height: 32px; border: 0; border-radius: 9px; background: rgba(255, 255, 255, .06); color: var(--op-muted); transition: background .2s, color .2s; }
.op-layout-btns button:hover { background: rgba(var(--op-yellow-rgb), .18); color: #fff; }
.op-layout-item:first-child [data-op-move="-1"], .op-layout-item:last-child [data-op-move="1"] { opacity: .3; pointer-events: none; }
.op-pf-layout-link { display: flex; justify-content: flex-end; margin: 1rem 0 -.4rem; }
.op-pf-layout-link a { display: inline-flex; align-items: center; gap: .4rem; line-height: 1.2; font-size: .8rem; font-weight: 700; color: var(--op-muted); text-decoration: none; padding: .3rem .7rem; border-radius: 20px; background: rgba(255, 255, 255, .04); transition: color .2s, background .2s; }
.op-pf-layout-link a:hover { color: var(--op-yellow); background: rgba(var(--op-yellow-rgb), .1); }

/* ===== Supporter extras (qw26_23) ===== */
/* coloured names: rules per player come from /css/names.css ([data-op-name="ID"]) */
@keyframes opu-name-flow { to { background-position: -200% center; } }
@media (prefers-reduced-motion: reduce) { [data-op-name] { animation: none !important; } }
/* custom title under the name */
.op-pf-custom-title { display: inline-flex; align-items: center; gap: .45rem; margin: .1rem 0 .45rem; padding: .22rem .75rem; border-radius: 20px;
  font-weight: 800; font-size: .86rem; color: #fff; background: rgba(255, 126, 182, .14); border: 1px solid rgba(255, 126, 182, .35); }
.op-pf-custom-title i { font-size: .7rem; color: #ff9fca; }
/* supporter time tiers on the supporter tag */
.op-pf-tag.op-pf-supporter small { margin-left: .4rem; padding: .05rem .45rem; border-radius: 10px; font-size: .68rem; font-weight: 800; background: rgba(255, 255, 255, .1); }
.op-pf-tag.op-sup-tier-1 { color: #ff9fca; border-color: rgba(255, 159, 202, .4); }
.op-pf-tag.op-sup-tier-2 { color: #d9dde6; border-color: rgba(217, 221, 230, .45); }
.op-pf-tag.op-sup-tier-3 { color: var(--op-yellow); border-color: rgba(var(--op-yellow-rgb), .5); }
.op-pf-tag.op-sup-tier-4 { color: #fff; border-color: transparent; background: linear-gradient(90deg, #ff5ea8, var(--op-orange), var(--op-yellow)); }
.op-pf-tag.op-sup-tier-4 i, .op-pf-tag.op-sup-tier-4 small { color: #2a1405; }
.op-pf-tag.op-sup-tier-4 { color: #2a1405; }
/* profile colour (supporter, one colour, not animated; --pf-c2 = --pf-c1) */
.op-pf-custom .op-pf-header { border-color: color-mix(in srgb, var(--pf-c1) 45%, transparent); box-shadow: 0 20px 50px rgba(0, 0, 0, .35), 0 0 0 1px color-mix(in srgb, var(--pf-c2) 20%, transparent); }
.op-pf-custom .op-pf-header::before { content: ""; display: block; height: 4px; background: linear-gradient(90deg, var(--pf-c1), var(--pf-c2)); }
.op-pf-custom .op-pf-section { border-color: color-mix(in srgb, var(--pf-c1) 22%, transparent); background-image: linear-gradient(160deg, color-mix(in srgb, var(--pf-c1) 7%, transparent), transparent 45%, color-mix(in srgb, var(--pf-c2) 6%, transparent)); }
.op-pf-custom .op-pf-section h5 i, .op-pf-custom .op-rankgraph-head h5 i, .op-pf-custom .op-comments-title i { color: var(--pf-c1) !important; }
.op-pf-custom .op-pf-stat strong, .op-pf-custom .op-pf-stat strong * { color: var(--pf-c1) !important; -webkit-text-fill-color: var(--pf-c1); }
.op-pf-custom .op-pf-rank strong, .op-pf-custom .op-rankgraph-info strong, .op-pf-custom .op-sc-pp, .op-pf-custom .op-sc-pp small, .op-pf-custom .op-played-count { color: var(--pf-c1) !important; }
.op-pf-custom .op-level-bar span, .op-pf-custom .op-pf-level-bar span { background: linear-gradient(90deg, var(--pf-c1), var(--pf-c2)) !important; }
/* pinned profile comment */
.op-comment-pinned { border: 1px solid rgba(255, 126, 182, .35); background: rgba(255, 126, 182, .06); border-radius: 14px; }
.op-comment-pin { margin-left: .5rem; font-size: .7rem; font-weight: 800; color: #ff9fca; }

/* ===== Settings: supporter page ===== */
.op-sup-preview { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.2rem; border-radius: 14px; margin-bottom: 1.1rem; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .07); }
.op-sup-preview img { width: 54px; height: 54px; border-radius: 14px; object-fit: cover; }
.op-sup-preview .op-sup-name { font-family: var(--op-font-display); font-weight: 900; font-size: 1.7rem; color: #fff; line-height: 1.1; }
.op-sup-preview small { display: block; color: var(--op-muted); font-size: .78rem; }
.op-sup-effects { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-bottom: 1rem; }
.op-sup-effects label { cursor: pointer; }
.op-sup-effects input { position: absolute; opacity: 0; pointer-events: none; }
.op-sup-effects span { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .7rem .4rem; border-radius: 12px; font-weight: 700; font-size: .84rem;
  background: rgba(0, 0, 0, .22); border: 1px solid rgba(255, 255, 255, .08); color: var(--op-muted); transition: all .2s var(--op-ease); text-align: center; }
.op-sup-effects label:hover span { color: #fff; border-color: var(--op-border-strong); }
.op-sup-effects input:checked + span { color: rgb(var(--op-dk-27-20-5, 27, 20, 5)); background: var(--op-yellow); border-color: var(--op-yellow); }
.op-sup-colors { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.op-sup-color { position: relative; display: flex; align-items: center; gap: .35rem; padding: .3rem .35rem .3rem .3rem; border-radius: 12px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .1); }
.op-sup-color input[type=color] { width: 40px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.op-sup-color input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.op-sup-color input[type=color]::-webkit-color-swatch { border: 0; border-radius: 8px; }
.op-sup-color button { width: 26px; height: 26px; border: 0; border-radius: 7px; background: rgba(255, 255, 255, .06); color: var(--op-muted); font-size: .75rem; }
.op-sup-color button:hover { color: #fff; background: rgba(255, 94, 107, .3); }
.op-sup-add { height: 44px; padding: 0 .9rem; border-radius: 12px; border: 1px dashed rgba(255, 255, 255, .25); background: transparent; color: var(--op-muted); font-weight: 700; }
.op-sup-add:hover { color: #fff; border-color: var(--op-yellow); }
.op-sup-presets { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .3rem; }
.op-sup-presets button { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .15); cursor: pointer; transition: transform .2s var(--op-ease); }
.op-sup-presets button:hover { transform: scale(1.12); border-color: #fff; }
.op-sup-disabled { opacity: .45; pointer-events: none; }
.op-sup-pfprev { height: 90px; border-radius: 14px; margin-bottom: 1rem; border: 1px solid rgba(255, 255, 255, .08); position: relative; overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--pf-c1) 16%, rgb(var(--op-dk-21-18-10, 21, 18, 10))), rgb(var(--op-dk-21-18-10, 21, 18, 10)) 50%, color-mix(in srgb, var(--pf-c2) 14%, rgb(var(--op-dk-21-18-10, 21, 18, 10)))); }
.op-sup-pfprev::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--pf-c1), var(--pf-c2)); }
.op-sup-pfprev span { position: absolute; left: 1rem; bottom: .8rem; font-weight: 900; font-family: var(--op-font-display); font-size: 1.3rem;
  background: linear-gradient(90deg, #fff 30%, color-mix(in srgb, var(--pf-c2) 70%, #fff)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.op-sup-time { display: flex; align-items: center; gap: 1.2rem; }
.op-sup-time-big { font-family: var(--op-font-display); font-weight: 900; font-size: 2.2rem; color: #fff; line-height: 1; }
.op-sup-time-big small { font-size: .9rem; color: var(--op-muted); font-weight: 700; margin-left: .3rem; }
.op-sup-tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-top: 1rem; }
.op-sup-tiers div { text-align: center; padding: .7rem .4rem; border-radius: 12px; background: rgba(0, 0, 0, .22); border: 1px solid rgba(255, 255, 255, .07); color: var(--op-muted); font-size: .8rem; font-weight: 700; }
.op-sup-tiers div i { display: block; font-size: 1.1rem; margin-bottom: .3rem; }
.op-sup-tiers div.got { color: #fff; border-color: rgba(255, 126, 182, .45); background: rgba(255, 126, 182, .1); }
.op-sup-tiers div.got i { color: #ff7eb6; }
.op-sup-bar { height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .08); overflow: hidden; margin-top: .5rem; }
.op-sup-bar span { display: block; height: 100%; background: linear-gradient(90deg, #ff5ea8, var(--op-yellow)); border-radius: 8px; }
.op-sup-status { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .7rem; border-radius: 20px; font-size: .78rem; font-weight: 800; }
.op-sup-status.pending { background: rgba(var(--op-yellow-rgb), .12); color: var(--op-yellow); }
.op-sup-status.approved { background: rgba(58, 214, 120, .12); color: #7eeaa9; }
.op-sup-status.rejected { background: rgba(255, 94, 107, .12); color: #ff9aa2; }
@media (max-width: 900px) { .op-sup-effects, .op-sup-tiers { grid-template-columns: repeat(2, 1fr); } }
/* YouTube on userpages (supporters) */
.op-yt { position: relative; width: 100%; max-width: 720px; aspect-ratio: 16 / 9; margin: .6rem 0; border-radius: 12px; overflow: hidden; background: #000; }
.op-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ===== Recent activity + most played (profile) ===== */
.op-activity { display: grid; gap: .4rem; }
.op-activity-item { display: flex; align-items: center; gap: .8rem; padding: .6rem .8rem; border-radius: 12px; text-decoration: none; color: rgba(255, 255, 255, .88);
  background: rgba(0, 0, 0, .18); border: 1px solid rgba(255, 255, 255, .04); transition: background .2s, border-color .2s, transform .2s var(--op-ease); animation: op-rise .35s var(--op-ease) both; animation-delay: calc(var(--i) * 25ms); }
.op-activity-item:hover { background: rgba(255, 255, 255, .05); border-color: color-mix(in srgb, var(--c) 40%, transparent); transform: translateX(3px); color: #fff; }
.op-activity-item > i { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); font-size: .85rem; }
.op-activity-item span { flex: 1; min-width: 0; font-size: .9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-activity-item small { color: var(--op-muted); font-size: .76rem; white-space: nowrap; }
.op-played { position: relative; display: flex; align-items: center; gap: 1rem; padding: .7rem .9rem; margin-bottom: .5rem; border-radius: 14px; overflow: hidden; text-decoration: none; color: #fff;
  border: 1px solid rgba(255, 255, 255, .06); background: rgb(var(--op-dk-21-18-10, 21, 18, 10)); transition: border-color .2s, transform .2s var(--op-ease); }
.op-played:hover { border-color: var(--op-border-strong); transform: translateY(-2px); color: #fff; }
.op-played-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .22; }
.op-played::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--op-dk-15-13-7, 15, 13, 7), .92) 30%, rgba(var(--op-dk-15-13-7, 15, 13, 7), .55)); }
.op-played > * { position: relative; z-index: 1; }
.op-played img { width: 88px; height: 52px; object-fit: cover; border-radius: 9px; flex-shrink: 0; }
.op-played-info { flex: 1; min-width: 0; }
.op-played-info strong { display: block; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-played-info small { color: var(--op-muted); }
.op-played-count { text-align: right; font-family: var(--op-font-display); font-weight: 900; font-size: 1.35rem; line-height: 1; }
.op-played-count small { display: block; font-size: .7rem; font-weight: 700; color: var(--op-muted); font-family: inherit; }

.op-activity:not(.open) .op-activity-item:nth-child(n+9) { display: none; }

/* ===== Daily Challenge, Clan Wars, Server Stats (qw26_25) ===== */
.op-daily-hero, .op-cw-hero { position: relative; display: flex; align-items: center; gap: 1.5rem; margin: 1rem 0 1.4rem; border-radius: 22px; overflow: hidden;
  background: rgb(var(--op-dk-21-18-10, 21, 18, 10)); border: 1px solid var(--op-border); min-height: 230px; }
.op-daily-cover { position: absolute; inset: 0; background-size: cover; background-position: center; }
.op-daily-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--op-dk-12-10-5, 12, 10, 5), .95) 20%, rgba(var(--op-dk-12-10-5, 12, 10, 5), .55) 70%, rgba(var(--op-dk-12-10-5, 12, 10, 5), .75)); }
.op-daily-in, .op-daily-timer { position: relative; z-index: 1; }
.op-daily-in { flex: 1; padding: 1.8rem 2rem; min-width: 0; }
.op-daily-kicker { font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--op-yellow); }
.op-daily-hero h1, .op-cw-hero h1 { font-family: var(--op-font-display); font-weight: 900; color: #fff; font-size: 2.2rem; margin: .25rem 0; line-height: 1.1; }
.op-daily-artist { color: rgba(255, 255, 255, .8); }
.op-daily-artist span { color: var(--op-yellow); }
.op-daily-stats { display: flex; flex-wrap: wrap; gap: .45rem; margin: .9rem 0 1.1rem; }
.op-daily-stats span { padding: .25rem .65rem; border-radius: 20px; background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .1); font-size: .82rem; font-weight: 700; color: #fff; }
.op-daily-stats i { color: var(--op-yellow); margin-right: .3rem; }
.op-daily-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.op-daily-timer { display: flex; flex-direction: column; align-items: center; margin-right: 2rem; padding: 1rem 1.4rem; border-radius: 18px; background: rgba(0, 0, 0, .45); border: 1px solid var(--op-border); min-width: 180px; }
.op-daily-timer small { font-size: .72rem; color: var(--op-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.op-daily-timer strong { font-family: var(--op-font-display); font-weight: 900; font-size: 1.9rem; color: #fff; font-variant-numeric: tabular-nums; }
.op-daily-grid { display: grid; grid-template-columns: 1fr 330px; gap: 1.2rem; align-items: start; margin-bottom: 1.2rem; }
.op-daily-box { padding: 1.1rem 1.2rem; margin-bottom: 1rem; border-radius: 18px; background: var(--op-card); border: 1px solid var(--op-border); }
.op-daily-box h3 { font-size: 1rem; font-weight: 800; color: #fff; margin: 0 0 .9rem; font-family: var(--op-font-display); }
.op-daily-box h3 i { color: var(--op-yellow); margin-right: .4rem; }
.op-daily-box h3 span { font-size: .74rem; font-weight: 600; color: var(--op-muted); margin-left: .4rem; }
.op-daily-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto 70px 64px 120px; align-items: center; gap: .7rem; padding: .55rem .7rem; margin-bottom: .35rem;
  border-radius: 12px; background: rgba(0, 0, 0, .2); border: 1px solid rgba(255, 255, 255, .04); color: #fff; text-decoration: none; transition: background .2s, transform .2s var(--op-ease); }
.op-daily-row:hover { background: rgba(255, 255, 255, .05); transform: translateX(3px); color: #fff; }
.op-daily-row b { color: var(--op-muted); }
.op-daily-top1 b { color: var(--op-yellow); } .op-daily-top2 b { color: #d9dde6; } .op-daily-top3 b { color: #e0a36b; }
.op-daily-top1 { border-color: rgba(var(--op-yellow-rgb), .35); background: rgba(var(--op-yellow-rgb), .06); }
.op-daily-av { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; }
.op-daily-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-daily-name img { margin-right: .35rem; }
.op-daily-mods { font-size: .75rem; font-weight: 800; color: var(--op-yellow); }
.op-daily-acc, .op-daily-combo { font-size: .85rem; color: rgba(255, 255, 255, .75); text-align: right; }
.op-daily-row strong { text-align: right; font-family: var(--op-font-display); font-weight: 900; }
.op-daily-streak { display: flex; align-items: baseline; gap: .5rem; }
.op-daily-streak strong { font-family: var(--op-font-display); font-weight: 900; font-size: 2.6rem; color: var(--op-orange); line-height: 1; }
.op-daily-streak span { color: var(--op-muted); font-weight: 700; }
.op-daily-mini { display: flex; gap: 1rem; margin-top: .4rem; font-size: .85rem; color: var(--op-muted); }
.op-daily-mini b { color: #fff; }
.op-daily-past { display: flex; align-items: center; gap: .7rem; padding: .45rem 0; border-top: 1px solid rgba(255, 255, 255, .05); color: #fff; text-decoration: none; }
.op-daily-past img { width: 64px; height: 38px; object-fit: cover; border-radius: 8px; }
.op-daily-past span { min-width: 0; }
.op-daily-past strong { display: block; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-daily-past small { color: var(--op-muted); font-size: .75rem; }
.op-mini-row { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-top: 1px solid rgba(255, 255, 255, .05); }
.op-mini-row b { width: 22px; color: var(--op-muted); font-size: .8rem; }
.op-mini-row em { margin-left: auto; font-style: normal; font-weight: 800; color: var(--op-orange); white-space: nowrap; }
.op-mini-user { color: #fff; text-decoration: none; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-mini-user img { margin-right: .35rem; }
/* clan wars */
.op-cw-link { display: inline-flex; align-items: center; gap: .45rem; margin-top: .6rem; padding: .35rem .9rem; border-radius: 20px; font-size: .88rem; font-weight: 700;
  color: var(--op-yellow); background: rgba(var(--op-yellow-rgb), .1); border: 1px solid rgba(var(--op-yellow-rgb), .3); text-decoration: none; }
.op-cw-link:hover { background: rgba(var(--op-yellow-rgb), .2); color: #fff; }
.op-cw-hero { justify-content: space-between; padding: 1.8rem 2rem; min-height: 0; background: linear-gradient(120deg, rgba(var(--op-yellow-rgb), .14), rgba(var(--op-dk-20-17-9, 20, 17, 9), .92) 60%); }
.op-cw-hero > div:first-child { max-width: 640px; }
.op-cw-hero p { color: var(--op-muted); margin: 0; }
.op-cw-hero .op-daily-timer { margin-right: 0; }
.op-cw-row { display: flex; align-items: center; gap: .9rem; padding: .7rem .8rem; margin-bottom: .45rem; border-radius: 14px; background: rgba(0, 0, 0, .2);
  border: 1px solid rgba(255, 255, 255, .05); color: #fff; text-decoration: none; transition: background .2s, transform .2s var(--op-ease); }
.op-cw-row:hover { background: rgba(255, 255, 255, .05); transform: translateX(3px); color: #fff; }
.op-cw-row b { width: 34px; color: var(--op-muted); }
.op-cw-av { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; }
.op-cw-info { flex: 1; min-width: 0; }
.op-cw-info strong { display: block; }
.op-cw-tag { color: var(--op-yellow); }
.op-cw-info small { color: var(--op-muted); font-size: .76rem; }
.op-cw-bar { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .07); margin: .35rem 0; overflow: hidden; }
.op-cw-bar span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--op-orange), var(--op-yellow)); }
.op-cw-row em { font-style: normal; font-family: var(--op-font-display); font-weight: 900; font-size: 1.3rem; white-space: nowrap; }
.op-cw-row em small { font-size: .72rem; color: var(--op-yellow); margin-left: .1rem; }
/* server stats */
.op-sstats-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-bottom: 1.2rem; }
.op-sstats-tiles div { display: flex; flex-direction: column; gap: .15rem; padding: 1rem 1.1rem; border-radius: 16px; background: var(--op-card); border: 1px solid var(--op-border); animation: op-rise .4s var(--op-ease) both; }
.op-sstats-tiles i { color: var(--op-yellow); margin-bottom: .3rem; }
.op-sstats-tiles strong { font-family: var(--op-font-display); font-weight: 900; font-size: 1.6rem; color: #fff; line-height: 1.1; }
.op-sstats-tiles small { color: var(--op-muted); font-size: .8rem; font-weight: 700; }
.op-sstats-chart { position: relative; height: 240px; }
.op-sstats-grid { grid-template-columns: 1.6fr 1fr; }
@media (max-width: 900px) {
  .op-daily-grid, .op-sstats-grid { grid-template-columns: 1fr; }
  .op-daily-hero, .op-cw-hero { flex-direction: column; align-items: stretch; }
  .op-daily-timer { margin: 0 1rem 1rem; }
  .op-daily-row { grid-template-columns: 34px minmax(0, 1fr) 90px; }
  .op-daily-mods, .op-daily-combo, .op-daily-acc { display: none; }
  .op-sstats-tiles { grid-template-columns: repeat(2, 1fr); }
}

/* supporter settings for non-supporters: controls greyed + locked, the name preview keeps its colour */
/* non-supporters can try everything (live preview), only saving is locked */
.op-sup-locked .op-sup-effects, .op-sup-locked .op-sup-colors, .op-sup-locked [data-op-colors-wrap] { filter: grayscale(.35); opacity: .8; transition: filter .2s, opacity .2s; }
.op-sup-locked .op-sup-effects:hover, .op-sup-locked .op-sup-colors:hover, .op-sup-locked [data-op-colors-wrap]:hover { filter: none; opacity: 1; }
.op-btn-locked { background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .5); border: 1px solid rgba(255, 255, 255, .1); cursor: not-allowed; }
.op-btn-locked i { color: var(--op-yellow); }
.op-sup-lockhint { align-self: center; font-size: .8rem; font-weight: 700; color: #ff9fca; text-decoration: none; }
.op-sup-lockhint:hover { color: #fff; }

/* ===== Clan page (qw26_25.0.1) — --cl = clan colour ===== */
.op-cl-hero { margin-top: 1rem; border-radius: 22px; overflow: hidden; background: var(--op-card); border: 1px solid var(--op-border); box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
.op-cl-cover { position: relative; height: 210px; background: linear-gradient(135deg, color-mix(in srgb, var(--cl) 55%, #111), rgb(var(--op-dk-21-18-10, 21, 18, 10)) 70%); }
.op-cl-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(var(--op-dk-15-13-7, 15, 13, 7), .95)); }
.op-cl-cover img { width: 100%; height: 100%; object-fit: cover; }
.op-cl-info { position: relative; display: flex; align-items: flex-end; gap: 1.4rem; padding: 0 2rem 1.4rem; margin-top: -80px; }
.op-cl-avatar { width: 136px; height: 136px; border-radius: 28px; object-fit: cover; flex-shrink: 0; border: 4px solid color-mix(in srgb, var(--cl) 70%, #000); background: rgb(var(--op-dk-21-18-10, 21, 18, 10)); box-shadow: 0 14px 34px rgba(0, 0, 0, .5); }
.op-cl-id { flex: 1; min-width: 0; padding-bottom: .2rem; }
.op-cl-tag { display: inline-block; padding: .15rem .6rem; border-radius: 8px; font-weight: 900; font-size: .85rem; letter-spacing: .04em; color: rgb(var(--op-dk-27-20-5, 27, 20, 5)); background: var(--cl); }
.op-cl-id h1 { font-family: var(--op-font-display); font-weight: 900; font-size: 2.4rem; color: #fff; margin: .3rem 0 .6rem; line-height: 1.05; overflow-wrap: anywhere; text-shadow: 0 4px 18px rgba(0, 0, 0, .5); }
.op-cl-meta { display: flex; flex-wrap: wrap; gap: .45rem; }
.op-cl-meta .op-pf-tag { text-decoration: none; }
.op-cl-meta .op-pf-tag img { width: 18px; height: 13px; border-radius: 2px; margin-right: .35rem; }
.op-cl-meta .op-pf-tag i { color: var(--cl); margin-right: .35rem; }
.op-cl-wins { border-color: rgba(var(--op-yellow-rgb), .45) !important; color: var(--op-yellow) !important; }
.op-cl-wins i { color: var(--op-yellow) !important; }
.op-cl-recruit i { color: #3ad678 !important; }
.op-cl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding-bottom: .3rem; }
.op-cl-member i { color: #ff7eb6; margin-right: .35rem; }
.op-cl-ranks, .op-cl-stats { display: flex; flex-wrap: wrap; border-top: 1px solid rgba(255, 255, 255, .06); }
.op-cl-ranks > *, .op-cl-stats > * { flex: 1 1 150px; display: flex; flex-direction: column; gap: .15rem; padding: 1rem 1.4rem; border-right: 1px solid rgba(255, 255, 255, .06); text-decoration: none; }
.op-cl-ranks > *:last-child, .op-cl-stats > *:last-child { border-right: 0; }
.op-cl-ranks small, .op-cl-stats small { font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--op-muted); }
.op-cl-ranks strong { font-family: var(--op-font-display); font-weight: 900; font-size: 1.9rem; color: #fff; line-height: 1.1; }
.op-cl-stats strong { font-family: var(--op-font-display); font-weight: 800; font-size: 1.15rem; color: #fff; }
.op-cl-war { background: linear-gradient(120deg, rgba(var(--op-yellow-rgb), .12), transparent); }
.op-cl-war strong { color: var(--op-yellow) !important; }
.op-cl-war em { font-style: normal; font-size: .8rem; font-weight: 700; color: var(--op-muted); }
.op-cl-war:hover { background: linear-gradient(120deg, rgba(var(--op-yellow-rgb), .2), transparent); }
.op-cl-section { padding: 1.2rem 1.4rem 1.3rem !important; }
.op-cl-h { font-size: 1rem; font-weight: 800; color: #fff; margin: 0 0 1rem; font-family: var(--op-font-display); text-transform: uppercase; letter-spacing: .05em; }
.op-cl-h i { color: var(--cl); margin-right: .45rem; }
.op-cl-h span { display: inline-block; margin-left: .4rem; padding: .05rem .5rem; border-radius: 10px; font-size: .75rem; background: color-mix(in srgb, var(--cl) 20%, transparent); color: var(--cl); letter-spacing: 0; }
.op-cl-about { white-space: pre-wrap; overflow-wrap: anywhere; color: rgba(255, 255, 255, .85); line-height: 1.6; }
.op-cl-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: .6rem; }
.op-cl-mem { display: flex; align-items: center; gap: .8rem; padding: .7rem .8rem; border-radius: 14px; text-decoration: none; color: #fff; background: rgba(0, 0, 0, .2);
  border: 1px solid rgba(255, 255, 255, .05); transition: border-color .2s, transform .2s var(--op-ease), background .2s; animation: op-rise .35s var(--op-ease) both; animation-delay: calc(var(--i) * 30ms); }
.op-cl-mem:hover { color: #fff; transform: translateY(-2px); border-color: color-mix(in srgb, var(--cl) 50%, transparent); background: rgba(255, 255, 255, .04); }
.op-cl-mem.d-none { display: none !important; }
.op-cl-owner { border-color: rgba(var(--op-yellow-rgb), .3); }
.op-cl-mem-av { position: relative; flex-shrink: 0; }
.op-cl-mem-av img { width: 50px; height: 50px; border-radius: 13px; object-fit: cover; }
.op-cl-mem-av i { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-size: .62rem; background: var(--op-yellow); color: rgb(var(--op-dk-27-20-5, 27, 20, 5)); border: 2px solid rgb(var(--op-dk-21-18-10, 21, 18, 10)); }
.op-cl-mem-info { flex: 1; min-width: 0; }
.op-cl-mem-info strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-cl-mem-info strong img { margin-right: .35rem; }
.op-cl-mem-info small { color: var(--op-muted); font-size: .76rem; }
.op-cl-mem-stats { display: flex; flex-direction: column; align-items: flex-end; font-size: .8rem; color: var(--op-muted); white-space: nowrap; }
.op-cl-mem-stats b { font-family: var(--op-font-display); font-size: 1rem; color: #fff; margin-right: .1rem; }
@media (max-width: 767px) {
  .op-cl-info { flex-direction: column; align-items: flex-start; padding: 0 1.2rem 1.2rem; }
  .op-cl-avatar { width: 108px; height: 108px; }
  .op-cl-id h1 { font-size: 1.8rem; }
  .op-cl-ranks > *, .op-cl-stats > * { flex-basis: 45%; border-bottom: 1px solid rgba(255, 255, 255, .06); }
}
.op-cl-ownerlabel { display: inline-block; padding: 0 .4rem; margin-right: .2rem; border-radius: 6px; font-size: .66rem; font-weight: 800; color: rgb(var(--op-dk-27-20-5, 27, 20, 5)); background: var(--op-yellow); }
/* home hero: more room between "welcome to" and the logo (owner: they sat too close) */
.op-title .op-title-small { display: block; margin-bottom: 1.5rem; }
.op-title .op-title-logo { margin-top: 1rem; }

/* ===== Profile badges: roles, supporter, clan, country (qw26_25.0.7) ===== */
.op-pf-tags .op-pf-tag { position: relative; overflow: hidden; padding: .3rem .8rem .3rem .45rem; gap: .45rem; font-weight: 700; letter-spacing: .01em;
  border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .06); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.op-pf-tags .op-pf-tag > i, .op-pf-tags .op-pf-tag > .groupEmoji { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-size: .72rem; background: rgba(255, 255, 255, .1); flex-shrink: 0; }
/* light sweep on hover (the tag only, nothing else moves) */
.op-pf-tags .op-pf-tag::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); opacity: 0; }
.op-pf-tags .op-pf-tag:hover::after { opacity: 1; animation: opu-tag-sweep .7s ease; }
@keyframes opu-tag-sweep { from { left: -60%; } to { left: 130%; } }
/* roles */
.op-role { color: #fff; }
.op-role-owner { background: linear-gradient(120deg, var(--op-light, #ffe07a), var(--op-orange) 55%, #ff8a3c) !important; color: #2a1405 !important; border-color: rgba(var(--op-light-rgb, 255, 224, 122), .8) !important;
  box-shadow: 0 0 18px rgba(var(--op-orange-rgb, 255, 190, 60), .35), inset 0 1px 0 rgba(255, 255, 255, .5); }
.op-role-owner > i { background: rgba(42, 20, 5, .85) !important; color: var(--op-yellow); }
.op-role-co-owner { background: linear-gradient(120deg, #b98cff, #ff6ad5) !important; color: #fff !important; border-color: rgba(255, 150, 230, .7) !important; box-shadow: 0 0 16px rgba(200, 120, 255, .35); }
.op-role-co-owner > i { background: rgba(40, 10, 50, .6) !important; color: #ffd1f3; }
.op-role-admin, .op-role-administrator { background: linear-gradient(120deg, rgba(255, 94, 107, .35), rgba(255, 94, 107, .12)) !important; border-color: rgba(255, 94, 107, .55) !important; }
.op-role-admin > i, .op-role-administrator > i { background: #ff5e6b !important; color: #fff; }
.op-role-moderator, .op-role-mod { background: linear-gradient(120deg, rgba(72, 198, 255, .32), rgba(72, 198, 255, .1)) !important; border-color: rgba(72, 198, 255, .55) !important; }
.op-role-moderator > i, .op-role-mod > i { background: #48c6ff !important; color: #07202b; }
.op-role-developer, .op-role-dev { background: linear-gradient(120deg, rgba(58, 214, 120, .3), rgba(58, 214, 120, .1)) !important; border-color: rgba(58, 214, 120, .5) !important; }
.op-role-developer > i, .op-role-dev > i { background: #3ad678 !important; color: #06240f; }
.op-role-nominator, .op-role-beatmap-nominator { background: linear-gradient(120deg, rgba(138, 123, 255, .32), rgba(138, 123, 255, .1)) !important; border-color: rgba(138, 123, 255, .55) !important; }
.op-role-nominator > i, .op-role-beatmap-nominator > i { background: #8a7bff !important; color: #fff; }
/* supporter */
.op-pf-tags .op-pf-supporter { background: linear-gradient(120deg, rgba(255, 94, 168, .35), rgba(255, 94, 168, .12)) !important; border-color: rgba(255, 126, 182, .6) !important; color: #ffd1e6 !important; box-shadow: 0 0 14px rgba(255, 94, 168, .25); }
.op-pf-tags .op-pf-supporter > i { background: #ff5ea8 !important; color: #fff !important; animation: opu-heartbeat 1.6s ease-in-out infinite; }
@keyframes opu-heartbeat { 0%, 60%, 100% { transform: scale(1); } 20% { transform: scale(1.18); } 40% { transform: scale(.96); } }
.op-pf-tags .op-pf-supporter small { background: rgba(0, 0, 0, .25); color: #fff; }
.op-pf-tags .op-pf-supporter.op-sup-tier-4 { background: linear-gradient(120deg, #ff5ea8, var(--op-orange), var(--op-yellow)) !important; color: #2a1405 !important; }
/* clan + country */
.op-pf-tags .op-pf-clan { color: var(--op-yellow); border-color: rgba(var(--op-yellow-rgb), .35); background: rgba(var(--op-yellow-rgb), .08); font-weight: 900; letter-spacing: .04em; }
.op-pf-tags .op-pf-clan > i { background: var(--op-yellow); color: rgb(var(--op-dk-27-20-5, 27, 20, 5)); }
.op-pf-tags .op-pf-country img { width: 22px; height: 16px; border-radius: 4px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15); }
@media (prefers-reduced-motion: reduce) { .op-pf-tags .op-pf-supporter > i, .op-pf-tags .op-pf-tag:hover::after { animation: none; } }
/* role badges outside the profile header (leaderboard etc.) */
.op-role { display: inline-flex; align-items: center; gap: .4rem; }
.op-role > i, .op-role > .groupEmoji { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; font-size: .66rem; background: rgba(255, 255, 255, .12); flex-shrink: 0; }
.op-role-sm { padding: .12rem .6rem .12rem .18rem; font-size: .7rem; font-weight: 800; gap: .3rem; margin-left: .15rem; vertical-align: middle; }
.op-role-sm > i, .op-role-sm > .groupEmoji { width: 17px; height: 17px; font-size: .58rem; }
.op-lb-row:hover .op-role-sm { transform: none; }
/* leaderboard: clan tag and supporter heart to match the profile badges */
.op-lb-clan { display: inline-flex; align-items: center; padding: .08rem .45rem; border-radius: 7px; font-size: .72rem; font-weight: 900; letter-spacing: .03em;
  color: var(--op-yellow); background: rgba(var(--op-yellow-rgb), .1); border: 1px solid rgba(var(--op-yellow-rgb), .28); }
.op-supporter-heart { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 94, 168, .18); color: #ff5ea8; font-size: .66rem; }
.op-supporter-heart i { animation: opu-heartbeat 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .op-supporter-heart i { animation: none; } }

/* ===== Hall of Fame, Compare, Invites (qw26_26) ===== */
.op-lb-links { display: flex; justify-content: center; gap: .6rem; margin-top: .9rem; flex-wrap: wrap; }
.op-lb-links a { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .9rem; border-radius: 20px; font-size: .85rem; font-weight: 700; text-decoration: none;
  color: var(--op-yellow); background: rgba(var(--op-yellow-rgb), .08); border: 1px solid rgba(var(--op-yellow-rgb), .25); transition: background .2s, color .2s; }
.op-lb-links a:hover { background: rgba(var(--op-yellow-rgb), .18); color: #fff; }
.op-hof-hero { position: relative; display: flex; align-items: center; gap: 1.4rem; margin: 1rem 0 1.2rem; padding: 1.7rem 2rem; border-radius: 22px; overflow: hidden;
  background: radial-gradient(500px 220px at 90% 0%, rgba(var(--op-yellow-rgb), .22), transparent 70%), linear-gradient(120deg, rgb(var(--op-dk-34-27-10, 34, 27, 10)), rgb(var(--op-dk-21-18-10, 21, 18, 10))); border: 1px solid var(--op-border); }
.op-hof-hero h1 { font-family: var(--op-font-display); font-weight: 900; color: #fff; font-size: 2.2rem; margin: .2rem 0 .3rem; }
.op-hof-hero p { color: var(--op-muted); margin: 0; }
.op-hof-icon { font-size: 2.4rem; color: var(--op-yellow); width: 78px; height: 78px; display: grid; place-items: center; border-radius: 22px; background: rgba(var(--op-yellow-rgb), .12); flex-shrink: 0; }
.op-hof-play { position: relative; display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem; margin-bottom: .45rem; border-radius: 14px; overflow: hidden; text-decoration: none; color: #fff;
  background: rgb(var(--op-dk-21-18-10, 21, 18, 10)); border: 1px solid rgba(255, 255, 255, .06); transition: transform .2s var(--op-ease), border-color .2s; }
.op-hof-play::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--op-dk-15-13-7, 15, 13, 7), .95) 35%, rgba(var(--op-dk-15-13-7, 15, 13, 7), .6)); }
.op-hof-play > * { position: relative; z-index: 1; }
.op-hof-play:hover { transform: translateY(-2px); border-color: var(--op-border-strong); color: #fff; }
.op-hof-play b { width: 36px; color: var(--op-muted); }
.op-hof-play-info { flex: 1; min-width: 0; }
.op-hof-play-info strong { display: block; }
.op-hof-play-info strong img { margin-right: .35rem; }
.op-hof-play-info small { display: block; color: var(--op-muted); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-hof-play em { font-style: normal; font-family: var(--op-font-display); font-weight: 900; font-size: 1.45rem; }
.op-hof-play em small { font-size: .75rem; color: var(--op-yellow); margin-left: .1rem; }
.op-hof-ms { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .6rem; }
.op-hof-ms-item { display: flex; flex-direction: column; gap: .25rem; padding: .9rem 1rem; border-radius: 14px; background: rgba(0, 0, 0, .22); border: 1px solid rgba(var(--op-yellow-rgb), .18); }
.op-hof-ms-pp { font-family: var(--op-font-display); font-weight: 900; font-size: 1.5rem; color: var(--op-yellow); }
.op-hof-ms-pp small { font-size: .8rem; margin-left: .1rem; }
.op-hof-ms-item > small { color: var(--op-muted); font-size: .75rem; }
/* compare */
.op-cmp-form { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: .7rem; align-items: center; margin-bottom: 1.2rem; }
.op-cmp-vs { font-family: var(--op-font-display); font-weight: 900; color: var(--op-yellow); font-size: 1.2rem; }
.op-cmp-heads { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.op-cmp-head { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-decoration: none; color: #fff; }
.op-cmp-head > img { width: 92px; height: 92px; border-radius: 22px; object-fit: cover; border: 3px solid rgba(var(--op-yellow-rgb), .4); }
.op-cmp-head strong { font-family: var(--op-font-display); font-weight: 900; font-size: 1.25rem; }
.op-cmp-head strong img { margin-right: .35rem; }
.op-cmp-score { display: flex; align-items: center; gap: .8rem; }
.op-cmp-score span { font-family: var(--op-font-display); font-weight: 900; font-size: 2.2rem; color: var(--op-muted); }
.op-cmp-score span.win { color: var(--op-yellow); }
.op-cmp-score small { color: var(--op-muted); font-size: .75rem; text-align: center; max-width: 80px; }
.op-cmp-row { display: grid; grid-template-columns: 1fr 1.4fr 1fr; align-items: center; gap: 1rem; padding: .55rem 0; border-top: 1px solid rgba(255, 255, 255, .05); }
.op-cmp-val { font-family: var(--op-font-display); font-weight: 800; font-size: 1.05rem; color: rgba(255, 255, 255, .7); text-align: center; }
.op-cmp-val.win { color: #fff; }
.op-cmp-val.win::before { content: "\25B2 "; color: #3ad678; font-size: .7rem; }
.op-cmp-mid { text-align: center; }
.op-cmp-mid small { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--op-muted); margin-bottom: .3rem; }
.op-cmp-bar { display: flex; height: 6px; border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, .06); }
.op-cmp-bar .a { background: var(--op-yellow); }
.op-cmp-bar .b { background: #ff7eb6; margin-left: auto; }
.op-cmp-map { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: .6rem; align-items: center; padding: .45rem 0; border-top: 1px solid rgba(255, 255, 255, .05); }
.op-cmp-side { display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem; border-radius: 10px; text-decoration: none; color: rgba(255, 255, 255, .6); font-weight: 700; }
.op-cmp-side.b { justify-content: flex-end; text-align: right; }
.op-cmp-side img { width: 26px; }
.op-cmp-side small { display: block; font-size: .72rem; color: var(--op-muted); font-weight: 600; }
.op-cmp-side.win { color: #fff; background: rgba(58, 214, 120, .1); box-shadow: inset 0 0 0 1px rgba(58, 214, 120, .3); }
.op-cmp-mapinfo { display: flex; align-items: center; gap: .6rem; min-width: 0; text-decoration: none; color: #fff; }
.op-cmp-mapinfo img { width: 64px; height: 38px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.op-cmp-mapinfo span { min-width: 0; }
.op-cmp-mapinfo strong { display: block; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-cmp-mapinfo small { color: var(--op-muted); font-size: .72rem; }
.op-pf-compare { margin-right: .4rem; }
/* invites */
.op-inv-link { display: flex; gap: .6rem; align-items: center; margin-bottom: 1rem; }
.op-inv-link .op-input { flex: 1; }
.op-inv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.op-inv-stats div { padding: .9rem 1rem; border-radius: 14px; background: rgba(0, 0, 0, .22); border: 1px solid rgba(255, 255, 255, .06); text-align: center; }
.op-inv-stats strong { display: block; font-family: var(--op-font-display); font-weight: 900; font-size: 1.7rem; color: #fff; }
.op-inv-stats small { color: var(--op-muted); font-size: .8rem; }
.op-inv-stats div.got { border-color: rgba(var(--op-yellow-rgb), .45); background: rgba(var(--op-yellow-rgb), .08); }
.op-inv-stats div.got strong { color: var(--op-yellow); }
.op-inv-av { width: 42px; height: 42px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.op-auth-inviter { width: 22px; height: 22px; border-radius: 6px; margin-right: .4rem; vertical-align: -5px; }
@media (max-width: 767px) {
  .op-cmp-form { grid-template-columns: 1fr; } .op-cmp-vs { text-align: center; }
  .op-cmp-map { grid-template-columns: 1fr 1fr; } .op-cmp-mapinfo { grid-column: 1 / -1; order: -1; }
  .op-inv-stats { grid-template-columns: 1fr; } .op-hof-hero { flex-direction: column; align-items: flex-start; }
}

/* ===== Kuroosu medals on profiles (qw26_27) ===== */
.op-medals { margin-bottom: 1.2rem; padding: 1.1rem 1.2rem; border-radius: 16px; background: rgba(0, 0, 0, .18); border: 1px solid rgba(var(--op-yellow-rgb), .15); }
.op-medals-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .9rem; }
.op-medals-head h5 { margin: 0; font-size: .9rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; }
.op-medals-head h5 i { color: var(--op-yellow); margin-right: .4rem; }
.op-medals-head span { font-family: var(--op-font-display); font-weight: 900; color: var(--op-yellow); }
.op-medals-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .7rem; }
.op-medal { display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: .7rem .3rem; border-radius: 14px; text-align: center; cursor: help;
  transition: transform .2s var(--op-ease), background .2s; }
.op-medal:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .04); }
.op-medal-hex { width: 58px; height: 64px; display: grid; place-items: center; font-size: 1.35rem; color: rgb(var(--op-dk-27-20-5, 27, 20, 5));
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(160deg, color-mix(in srgb, var(--mc) 70%, #fff), var(--mc) 55%, color-mix(in srgb, var(--mc) 70%, #000));
  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--mc) 45%, transparent)); }
.op-medal span { font-size: .72rem; font-weight: 700; color: rgba(255, 255, 255, .88); line-height: 1.2; }
.op-medal.locked .op-medal-hex { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .25); filter: none; }
.op-medal.locked span { color: var(--op-muted); opacity: .7; }

/* ===== Tournaments (qw26_28) ===== */
.op-tn-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.op-tn-card { display: flex; flex-direction: column; gap: .5rem; padding: 1.2rem 1.3rem; border-radius: 18px; text-decoration: none; color: #fff;
  background: var(--op-card); border: 1px solid var(--op-border); transition: transform .2s var(--op-ease), border-color .2s; }
.op-tn-card:hover { transform: translateY(-3px); border-color: var(--op-border-strong); color: #fff; }
.op-tn-card h3 { font-family: var(--op-font-display); font-weight: 900; font-size: 1.3rem; margin: 0; }
.op-tn-card-top { display: flex; justify-content: space-between; align-items: center; }
.op-tn-status { display: inline-flex; align-items: center; padding: .15rem .6rem; border-radius: 20px; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.st-signup .op-tn-status { background: rgba(58, 214, 120, .15); color: #7eeaa9; }
.st-running .op-tn-status { background: rgba(var(--op-orange-rgb, 255, 178, 56), .18); color: var(--op-orange); }
.st-finished .op-tn-status { background: rgba(255, 255, 255, .08); color: var(--op-muted); }
.op-tn-meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .82rem; color: var(--op-muted); align-items: center; }
.op-tn-meta i { color: var(--op-yellow); margin-right: .3rem; }
.op-tn-winner { display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; color: var(--op-yellow); }
.op-tn-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1rem; align-items: end; }
.op-tn-wide { grid-column: 1 / -1; }
.op-tn-hero { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; margin: 1rem 0 1.2rem; padding: 1.7rem 2rem; border-radius: 22px;
  background: radial-gradient(520px 240px at 100% 0%, rgba(var(--op-orange-rgb, 255, 178, 56), .22), transparent 70%), linear-gradient(120deg, rgb(var(--op-dk-34-27-10, 34, 27, 10)), rgb(var(--op-dk-21-18-10, 21, 18, 10))); border: 1px solid var(--op-border); }
.op-tn-hero h1 { font-family: var(--op-font-display); font-weight: 900; color: #fff; font-size: 2.3rem; margin: .25rem 0 .6rem; }
.op-tn-cta { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.op-tn-champion { display: inline-flex; align-items: center; gap: .8rem; margin-top: 1rem; padding: .5rem 1rem .5rem .5rem; border-radius: 16px; text-decoration: none; color: #fff;
  background: linear-gradient(120deg, rgba(var(--op-yellow-rgb), .22), rgba(var(--op-orange-rgb, 255, 178, 56), .08)); border: 1px solid rgba(var(--op-yellow-rgb), .5); box-shadow: 0 0 22px rgba(var(--op-orange-rgb, 255, 190, 60), .2); }
.op-tn-champion img { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; }
.op-tn-champion small { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--op-yellow); }
.op-tn-champion strong img { width: 18px; height: 13px; border-radius: 2px; margin-right: .3rem; }
.op-tn-champion > i { color: var(--op-yellow); font-size: 1.2rem; }
/* bracket */
.op-tn-bracket { display: flex; gap: 1.2rem; overflow-x: auto; padding-bottom: .5rem; }
.op-tn-round { display: flex; flex-direction: column; min-width: 230px; }
.op-tn-round-name { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--op-yellow); margin-bottom: .6rem; text-align: center; }
.op-tn-round-matches { display: flex; flex-direction: column; justify-content: space-around; flex: 1; gap: .7rem; }
.op-tn-match { border-radius: 12px; overflow: hidden; background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .08); }
.op-tn-match.bye { opacity: .55; }
.op-tn-slot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .45rem .65rem; font-size: .85rem; font-weight: 700; }
.op-tn-slot + .op-tn-slot { border-top: 1px solid rgba(255, 255, 255, .06); }
.op-tn-slot a { color: #fff; text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-tn-slot a img { margin-right: .35rem; }
.op-tn-slot em { color: var(--op-muted); font-weight: 600; }
.op-tn-slot b { font-family: var(--op-font-display); font-weight: 900; min-width: 16px; text-align: right; }
.op-tn-slot.win { background: rgba(58, 214, 120, .1); }
.op-tn-slot.win b { color: #7eeaa9; }
.op-tn-slot.lose { opacity: .55; }
.op-tn-mp { display: block; padding: .2rem .65rem; font-size: .72rem; color: var(--op-muted); text-decoration: none; border-top: 1px solid rgba(255, 255, 255, .06); }
.op-tn-result { display: flex; gap: .3rem; padding: .4rem; border-top: 1px dashed rgba(var(--op-yellow-rgb), .3); }
.op-tn-result input { width: 42px; min-width: 0; padding: .2rem .3rem; border-radius: 7px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(0, 0, 0, .35); color: #fff; font-size: .8rem; }
.op-tn-result input[name=mp] { flex: 1; width: auto; }
.op-tn-result button { border: 0; border-radius: 7px; background: var(--op-yellow); color: rgb(var(--op-dk-27-20-5, 27, 20, 5)); padding: 0 .55rem; }
/* mappool */
.op-tn-poolround { margin: .9rem 0 .4rem; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--op-yellow); }
.op-tn-map { display: flex; align-items: center; gap: .7rem; padding: .4rem 0; border-top: 1px solid rgba(255, 255, 255, .05); }
.op-tn-map .op-cmp-mapinfo { flex: 1; }
.op-tn-slotname { width: 44px; text-align: center; padding: .25rem 0; border-radius: 8px; font-weight: 900; font-size: .78rem; color: #fff; background: rgba(255, 255, 255, .1); flex-shrink: 0; }
.slot-nm .op-tn-slotname { background: #48c6ff; color: #07202b; } .slot-hd .op-tn-slotname { background: #ffd84d; color: #2a1d05; }
.slot-hr .op-tn-slotname { background: #ff5e6b; } .slot-dt .op-tn-slotname { background: #8a7bff; }
.slot-fm .op-tn-slotname { background: #3ad678; color: #06240f; } .slot-tb .op-tn-slotname { background: linear-gradient(120deg, #ff5ea8, #ffb238); }
.op-tn-addmap { display: flex; gap: .4rem; margin-top: 1rem; flex-wrap: wrap; }
.op-tn-addmap select, .op-tn-addmap input { padding: .35rem .6rem; border-radius: 9px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(0, 0, 0, .35); color: #fff; }
.op-tn-addmap input[name=slot] { width: 70px; } .op-tn-addmap input[name=map] { flex: 1; min-width: 160px; }
.op-tn-staff details summary { cursor: pointer; font-weight: 700; color: #fff; }
@media (max-width: 767px) { .op-tn-form { grid-template-columns: 1fr; } .op-tn-hero h1 { font-size: 1.7rem; } }
/* navbar: more items since Daily/Tourneys → never wrap, tighter on medium screens */
.op-nav-links .nav-link span { white-space: nowrap; }
@media (min-width: 1200px) and (max-width: 1599px) {
  .op-nav-links .nav-link { padding-left: .55rem !important; padding-right: .55rem !important; gap: .3rem; font-size: .88rem; }
  .op-nav-search input { width: 170px; }
}
@media (min-width: 1200px) and (max-width: 1299px) { .op-nav-links .nav-link i { display: none; } }
@media (min-width: 1200px) and (max-width: 1299px) {
  .op-nav-search input { width: 120px !important; }
  .op-nav-search:focus-within input { width: 200px !important; }
  .op-nav-brand .op-logo { height: 32px; }
  .op-nav-links .nav-link { padding-left: .45rem !important; padding-right: .45rem !important; }
}

/* ===== Profile ranks: top 3 gold/silver/bronze (qw26_28.0.1) ===== */
.op-pf .op-rk { position: relative; display: flex; align-items: center; gap: .75rem; padding: .55rem 1.1rem .55rem .7rem; border-radius: 16px;
  background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .06); }
.op-pf .op-rk small { display: flex; align-items: center; gap: .35rem; }
.op-pf .op-rk small i { font-size: .72rem; opacity: .8; }
.op-pf .op-rk small img { width: 18px; height: 13px; margin: 0; border-radius: 2px; }
.op-pf .op-rk strong { font-family: var(--op-font-display); font-weight: 900; }
.op-rk-medal { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; font-size: 1.15rem; flex-shrink: 0; }
.op-pf .op-rk.op-rk-gold, .op-pf .op-rk.op-rk-silver, .op-pf .op-rk.op-rk-bronze { --rk1: var(--op-metal-hi, #fff6cc); --rk2: var(--op-yellow); --rk3: var(--op-metal-lo, #e6a100); --rkg: rgba(var(--op-yellow-rgb), .35); }
.op-pf .op-rk.op-rk-silver { --rk1: #ffffff; --rk2: #d9dde6; --rk3: #8e97a8; --rkg: rgba(210, 220, 235, .28); }
.op-pf .op-rk.op-rk-bronze { --rk1: #ffe1c2; --rk2: #e0a36b; --rk3: #a0592b; --rkg: rgba(224, 150, 90, .3); }
.op-pf .op-rk.op-rk-gold, .op-pf .op-rk.op-rk-silver, .op-pf .op-rk.op-rk-bronze {
  background: linear-gradient(120deg, color-mix(in srgb, var(--rk2) 16%, transparent), rgba(255, 255, 255, .02));
  border-color: color-mix(in srgb, var(--rk2) 55%, transparent); box-shadow: 0 0 26px var(--rkg), inset 0 1px 0 rgba(255, 255, 255, .08); }
.op-pf .op-rk.op-rk-gold strong, .op-pf .op-rk.op-rk-silver strong, .op-pf .op-rk.op-rk-bronze strong,
.op-pf.op-pf-custom .op-rk.op-rk-gold strong, .op-pf.op-pf-custom .op-rk.op-rk-silver strong, .op-pf.op-pf-custom .op-rk.op-rk-bronze strong {
  background: linear-gradient(180deg, var(--rk1) 10%, var(--rk2) 55%, var(--rk3)); -webkit-background-clip: text; background-clip: text;
  color: transparent !important; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 8px var(--rkg)); }
.op-pf .op-rk .op-rk-medal { background: linear-gradient(160deg, var(--rk1), var(--rk2) 55%, var(--rk3)); color: rgba(0, 0, 0, .7); box-shadow: 0 4px 16px var(--rkg), inset 0 1px 0 rgba(255, 255, 255, .6); }
.op-pf .op-rk.op-rk-gold small, .op-pf .op-rk.op-rk-silver small, .op-pf .op-rk.op-rk-bronze small { color: var(--rk2); }

/* ===== Profile colour: much stronger (qw26_28.0.1) ===== */
.op-pf-custom { --pfc: var(--pf-c1); }
.op-pf-custom::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(1100px 600px at 50% -5%, color-mix(in srgb, var(--pfc) 26%, transparent), transparent 70%),
              radial-gradient(700px 500px at 100% 60%, color-mix(in srgb, var(--pfc) 10%, transparent), transparent 70%); }
.op-pf-custom .op-pf-header { border-color: color-mix(in srgb, var(--pfc) 65%, transparent) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pfc) 20%, rgb(var(--op-dk-22-19-10, 22, 19, 10))), rgb(var(--op-dk-20-17-10, 20, 17, 10)) 60%) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pfc) 25%, transparent), 0 20px 60px color-mix(in srgb, var(--pfc) 22%, transparent) !important; }
.op-pf-custom .op-pf-header::before { height: 5px; background: linear-gradient(90deg, transparent, var(--pfc), transparent) !important; }
.op-pf-custom .op-pf-cover::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pfc) 28%, transparent), transparent 55%, color-mix(in srgb, var(--pfc) 22%, rgba(var(--op-dk-15-13-7, 15, 13, 7), .7))); }
.op-pf-custom .op-pf-info { background: linear-gradient(90deg, color-mix(in srgb, var(--pfc) 12%, transparent), transparent 70%); }
.op-pf-custom .op-pf-avatar { border-color: var(--pfc) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--pfc) 25%, transparent), 0 14px 40px color-mix(in srgb, var(--pfc) 35%, transparent) !important; }
.op-pf-custom .op-pf-bar { background: linear-gradient(90deg, color-mix(in srgb, var(--pfc) 10%, transparent), transparent 60%); }
.op-pf-custom .op-pf-stats { background: color-mix(in srgb, var(--pfc) 7%, rgb(var(--op-dk-18-15-8, 18, 15, 8))) !important; border-top-color: color-mix(in srgb, var(--pfc) 35%, transparent) !important; }
.op-pf-custom .op-pf-stat { box-shadow: inset -1px 0 color-mix(in srgb, var(--pfc) 20%, transparent), inset 0 -1px color-mix(in srgb, var(--pfc) 20%, transparent) !important; }
.op-pf-custom .op-pf-stat:hover { background: color-mix(in srgb, var(--pfc) 12%, transparent); }
.op-pf-custom .op-pf-stat small { color: color-mix(in srgb, var(--pfc) 45%, #b9b29c); }
.op-pf-custom .op-pf-level-hex { background: linear-gradient(160deg, color-mix(in srgb, var(--pfc) 60%, #fff), var(--pfc)) !important; color: rgb(var(--op-dk-20-15-5, 20, 15, 5)); }
.op-pf-custom .op-pf-level-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--pfc) 60%, #fff), var(--pfc)) !important; animation: op-level-grow 1.2s var(--op-ease) both !important; }
.op-pf-custom .op-modebar .op-seg-btn.active { background: color-mix(in srgb, var(--pfc) 75%, #fff) !important; color: rgb(var(--op-dk-20-15-5, 20, 15, 5)) !important; box-shadow: 0 6px 18px color-mix(in srgb, var(--pfc) 35%, transparent) !important; }
.op-pf-custom .op-pf-actions .btn-primary, .op-pf-custom .op-pf-actions .fable-btn-follow.btn-primary { background: color-mix(in srgb, var(--pfc) 80%, #fff) !important; border-color: transparent !important; color: rgb(var(--op-dk-20-15-5, 20, 15, 5)) !important; }
.op-pf-custom .op-pf-section { border-color: color-mix(in srgb, var(--pfc) 35%, transparent) !important;
  background-image: linear-gradient(170deg, color-mix(in srgb, var(--pfc) 13%, transparent), transparent 55%) !important; }
.op-pf-custom .op-pf-section h5, .op-pf-custom .op-rankgraph-head h5 { color: #fff !important; }
.op-pf-custom .op-sc { border-left: 3px solid color-mix(in srgb, var(--pfc) 70%, transparent); }
.op-pf-custom .op-activity-item > i { color: var(--pfc); background: color-mix(in srgb, var(--pfc) 16%, transparent); }
.op-pf-custom .op-rankgraph-chart, .op-pf-custom .op-playgraph-chart { background: color-mix(in srgb, var(--pfc) 7%, rgba(0, 0, 0, .25)); }

/* ===== Profile stats as tiles (qw26_28.0.2): no grid lines that stop in the middle ===== */
.op-pf .op-pf-stats { display: flex !important; flex-wrap: wrap; gap: .6rem; padding: 1rem 1.3rem 1.2rem; background: rgba(0, 0, 0, .22) !important; }
.op-pf .op-pf-stat { flex: 1 1 150px; padding: .75rem 1rem !important; border-radius: 14px; box-shadow: none !important;
  background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .06); transition: background .2s, border-color .2s, transform .2s var(--op-ease); }
.op-pf .op-pf-stat:hover { background: rgba(255, 255, 255, .06); border-color: var(--op-border-strong); transform: translateY(-2px); }
.op-pf.op-pf-custom .op-pf-stats { background: color-mix(in srgb, var(--pfc) 6%, rgba(0, 0, 0, .25)) !important; }
.op-pf.op-pf-custom .op-pf-stat { background: color-mix(in srgb, var(--pfc) 7%, rgba(255, 255, 255, .02)); border-color: color-mix(in srgb, var(--pfc) 22%, transparent); box-shadow: none !important; }
.op-pf.op-pf-custom .op-pf-stat:hover { background: color-mix(in srgb, var(--pfc) 14%, transparent); border-color: color-mix(in srgb, var(--pfc) 45%, transparent); }

/* ===== Hall of Fame: longest #1 chart (qw26_28.1) ===== */
.op-reign-chart { display: grid; gap: .55rem; }
.op-reign-row { display: grid; grid-template-columns: 210px 1fr 130px; align-items: center; gap: .9rem; }
.op-reign-who { display: flex; align-items: center; gap: .55rem; min-width: 0; color: #fff; text-decoration: none; font-weight: 700; }
.op-reign-who > img { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.op-reign-who > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-reign-who > span img { margin-right: .3rem; }
.op-reign-track { height: 26px; border-radius: 8px; background: rgba(255, 255, 255, .05); overflow: hidden; }
.op-reign-bar { height: 100%; min-width: 64px; display: flex; align-items: center; justify-content: flex-end; padding-right: .55rem; border-radius: 8px;
  background: linear-gradient(90deg, rgba(var(--op-yellow-rgb), .35), rgba(var(--op-yellow-rgb), .75)); animation: opu-reign-grow .9s var(--op-ease) both; transform-origin: left; }
.op-reign-row.top .op-reign-bar { background: linear-gradient(90deg, var(--op-orange), var(--op-yellow) 60%, var(--op-metal-hi, #fff0a8)); box-shadow: 0 0 18px rgba(var(--op-yellow-rgb), .35); }
.op-reign-bar span { font-family: var(--op-font-display); font-weight: 900; font-size: .8rem; color: rgb(var(--op-dk-27-20-5, 27, 20, 5)); white-space: nowrap; }
.op-reign-bar.live { background-size: 200% 100%; }
.op-reign-row small { color: var(--op-muted); font-size: .75rem; white-space: nowrap; }
.op-reign-live { color: #3ad678; font-size: .5rem; vertical-align: 2px; margin-right: .2rem; animation: op-pulse-ring 1.8s infinite; border-radius: 50%; }
.op-reign-note { margin: 1rem 0 0; font-size: .82rem; color: var(--op-muted); }
.op-reign-note i { color: var(--op-yellow); margin-right: .3rem; }
@keyframes opu-reign-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 767px) { .op-reign-row { grid-template-columns: 1fr; gap: .3rem; } }

/* ===== Hall of Fame: Longest #1 podium (qw26_29) ===== */
.op-kings { position: relative; overflow: hidden; margin-bottom: 1.2rem; padding: 1.6rem 1.8rem 1.4rem; border-radius: 22px;
  background: radial-gradient(700px 300px at 50% 100%, rgba(var(--op-yellow-rgb), .16), transparent 70%), linear-gradient(160deg, rgb(var(--op-dk-36-28-9, 36, 28, 9)), rgb(var(--op-dk-21-18-10, 21, 18, 10)) 60%);
  border: 1px solid rgba(var(--op-yellow-rgb), .35); box-shadow: 0 20px 60px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .05); }
.op-kings::before { content: ""; position: absolute; inset: -40% -10% auto; height: 120%; pointer-events: none;
  background: conic-gradient(from 180deg at 50% 100%, transparent 0deg, rgba(var(--op-yellow-rgb), .08) 20deg, transparent 40deg, rgba(var(--op-yellow-rgb), .06) 60deg, transparent 80deg,
    rgba(var(--op-yellow-rgb), .08) 280deg, transparent 300deg, rgba(var(--op-yellow-rgb), .06) 320deg, transparent 340deg); }
.op-kings > * { position: relative; }
.op-kings-head { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.op-kings-head h2 { font-family: var(--op-font-display); font-weight: 900; font-size: 2rem; color: #fff; margin: .2rem 0 .3rem;
  background: linear-gradient(180deg, var(--op-metal-hi, #fff6cc), var(--op-yellow) 60%, var(--op-metal-lo, #e6a100)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.op-kings-head p { color: var(--op-muted); margin: 0; max-width: 520px; }
.op-kings-now { display: flex; flex-direction: column; gap: .4rem; min-width: 240px; }
.op-kings-now > small { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--op-yellow); }
.op-kings-nowitem { display: flex; align-items: center; gap: .6rem; padding: .4rem .7rem .4rem .4rem; border-radius: 12px; text-decoration: none; color: #fff;
  background: rgba(var(--op-yellow-rgb), .08); border: 1px solid rgba(var(--op-yellow-rgb), .25); }
.op-kings-nowitem img { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; }
.op-kings-nowitem span { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.op-kings-nowitem em { font-style: normal; font-size: .72rem; color: var(--op-muted); }
.op-kings-nowitem > i { color: var(--op-yellow); }
.op-kings-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 1rem; max-width: 820px; margin: .5rem auto 1rem; }
.op-king { position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; text-decoration: none; color: #fff; text-align: center;
  animation: op-rise .5s var(--op-ease) both; animation-delay: calc(var(--i) * 120ms); }
.op-king-crown { font-size: 1.8rem; color: var(--op-yellow); filter: drop-shadow(0 0 12px rgba(var(--op-yellow-rgb), .7)); animation: opu-bob 2.6s ease-in-out infinite; }
.op-king-av { position: relative; }
.op-king-av img { width: 88px; height: 88px; border-radius: 24px; object-fit: cover; border: 3px solid var(--kc); box-shadow: 0 0 26px var(--kg); }
.op-king-1 .op-king-av img { width: 112px; height: 112px; border-radius: 30px; }
.op-king-av span { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 50%; font-family: var(--op-font-display); font-weight: 900; color: rgb(var(--op-dk-27-20-5, 27, 20, 5)); background: var(--kc); box-shadow: 0 3px 10px rgba(0, 0, 0, .4); }
.op-king strong { margin-top: .5rem; font-family: var(--op-font-display); font-weight: 900; font-size: 1.1rem; }
.op-king strong img { margin-right: .35rem; }
.op-king-time { font-family: var(--op-font-display); font-weight: 900; font-size: 1.5rem;
  background: linear-gradient(180deg, #fff, var(--kc)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.op-king-1 .op-king-time { font-size: 1.9rem; }
.op-king small { color: var(--op-muted); font-size: .75rem; }
.op-king-live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3ad678; margin-right: .35rem; animation: op-pulse-ring 1.8s infinite; }
.op-king-step { width: 100%; margin-top: .6rem; border-radius: 14px 14px 4px 4px; background: linear-gradient(180deg, color-mix(in srgb, var(--kc) 55%, transparent), color-mix(in srgb, var(--kc) 10%, transparent));
  border: 1px solid color-mix(in srgb, var(--kc) 60%, transparent); }
.op-king-1 { --kc: var(--op-yellow); --kg: rgba(var(--op-yellow-rgb), .55); } .op-king-1 .op-king-step { height: 90px; }
.op-king-2 { --kc: #d9dde6; --kg: rgba(210, 220, 235, .4); } .op-king-2 .op-king-step { height: 62px; }
.op-king-3 { --kc: #e0a36b; --kg: rgba(224, 150, 90, .45); } .op-king-3 .op-king-step { height: 44px; }
.op-king:hover .op-king-av img { transform: translateY(-3px); transition: transform .2s var(--op-ease); }
.op-reign-who b { width: 30px; color: var(--op-muted); font-size: .85rem; }
@media (max-width: 767px) { .op-kings-podium { grid-template-columns: 1fr; } .op-king-step { display: none; } }

/* ===== News page (qw26_29) ===== */
.op-news-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.op-news-filter button { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .95rem; border-radius: 20px; font-weight: 700; font-size: .88rem;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); color: var(--op-muted); transition: all .2s var(--op-ease); }
.op-news-filter button:hover { color: #fff; border-color: var(--op-border-strong); }
.op-news-filter button.active { background: var(--op-yellow); color: rgb(var(--op-dk-27-20-5, 27, 20, 5)); border-color: var(--op-yellow); }
.op-newslist { display: grid; gap: .6rem; margin-bottom: 3rem; }
.op-newscard { position: relative; display: flex; align-items: center; gap: 1rem; padding: .95rem 1.1rem; border-radius: 16px; overflow: hidden; text-decoration: none; color: #fff;
  background: var(--op-card); border: 1px solid rgba(255, 255, 255, .06); transition: transform .2s var(--op-ease), border-color .2s; animation: op-rise .35s var(--op-ease) both; animation-delay: calc(var(--i) * 25ms); }
.op-newscard:hover { transform: translateX(4px); border-color: color-mix(in srgb, var(--nc) 55%, transparent); color: #fff; }
.op-newscard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--nc); }
.op-newscard-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .22; }
.op-newscard-bg + .op-newscard-icon::before { content: none; }
.op-newscard:has(.op-newscard-bg)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--op-dk-15-13-7, 15, 13, 7), .95) 35%, rgba(var(--op-dk-15-13-7, 15, 13, 7), .6)); }
.op-newscard > *:not(.op-newscard-bg) { position: relative; z-index: 1; }
.op-newscard::before { z-index: 2; }
.op-newscard-icon { width: 44px; height: 44px; display: grid; place-items: center; flex-shrink: 0; border-radius: 13px; color: var(--nc); background: color-mix(in srgb, var(--nc) 16%, transparent); font-size: 1.05rem; }
.op-newscard-body { flex: 1; min-width: 0; }
.op-newscard-body small { display: block; font-size: .74rem; font-weight: 700; color: var(--nc); text-transform: uppercase; letter-spacing: .04em; }
.op-newscard-body strong { display: block; font-size: 1rem; }
.op-newscard-go { color: var(--op-muted); }

/* ===== Home: spotlight with rotating tabs + explore (qw26_29) ===== */
.op-spot { position: relative; min-height: 460px; border-radius: 24px; overflow: hidden; display: flex; flex-direction: column;
  border: 1px solid var(--op-border-strong); box-shadow: 0 30px 70px rgba(0, 0, 0, .5), 0 0 60px rgba(var(--op-yellow-rgb), .08); background: rgb(var(--op-dk-13-11-6, 13, 11, 6)); }
.op-spot-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.op-spot-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--op-dk-10-9-5, 10, 9, 5), .55), rgba(var(--op-dk-10-9-5, 10, 9, 5), .78) 45%, rgba(var(--op-dk-10-9-5, 10, 9, 5), .93)); }
.op-spot-top, .op-spot-body { position: relative; z-index: 1; }
.op-spot-top { padding: .9rem .9rem 0; }
.op-spot-tabs { display: flex; gap: .35rem; flex-wrap: wrap; padding: .3rem; border-radius: 14px; background: rgba(0, 0, 0, .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .08); }
.op-spot-tabs button { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .45rem .7rem; border: 0; border-radius: 10px;
  background: transparent; color: var(--op-muted); font-weight: 700; font-size: .85rem; transition: background .2s, color .2s; }
.op-spot-tabs button:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.op-spot-tabs button.active { background: var(--op-yellow); color: rgb(var(--op-dk-27-20-5, 27, 20, 5)); }
.op-spot-progress { height: 3px; margin: .5rem .2rem 0; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.op-spot-progress span { display: block; height: 100%; width: 0; background: var(--op-yellow); transition: width .1s linear; }
.op-spot-manual .op-spot-progress { visibility: hidden; }
.op-spot-body { flex: 1; padding: 1rem 1.1rem 1.2rem; }
.op-spot-pane { display: none; animation: op-rise .45s var(--op-ease); }
.op-spot-pane.active { display: block; }
.op-spot-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: .7rem; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--op-yellow); }
.op-spot-title a { color: var(--op-muted); text-decoration: none; text-transform: none; letter-spacing: 0; font-weight: 700; }
.op-spot-title a:hover { color: #fff; }
.op-spot-maps { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.op-spot-map { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 130px; padding: .75rem .85rem; border-radius: 14px; overflow: hidden;
  text-decoration: none; color: #fff; border: 1px solid rgba(255, 255, 255, .1); transition: transform .2s var(--op-ease), border-color .2s; }
.op-spot-map:hover { transform: translateY(-3px); border-color: var(--op-border-strong); color: #fff; }
.op-spot-map-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.op-spot-map::after, .op-spot-daily::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--op-dk-10-9-5, 10, 9, 5), .15), rgba(var(--op-dk-10-9-5, 10, 9, 5), .92)); }
.op-spot-map > *:not(.op-spot-map-bg), .op-spot-daily > *:not(.op-spot-map-bg) { position: relative; z-index: 1; }
.op-spot-map strong { font-size: .95rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.op-spot-map small { color: rgba(255, 255, 255, .7); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-spot-map span { margin-top: .25rem; font-size: .72rem; color: var(--op-yellow); font-weight: 700; }
.op-spot-map span i { margin-right: .2rem; }
.op-spot-news { display: flex; align-items: center; gap: .8rem; padding: .65rem .75rem; margin-bottom: .5rem; border-radius: 13px; text-decoration: none; color: #fff;
  background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .07); border-left: 3px solid var(--nc); transition: transform .2s var(--op-ease), background .2s; }
.op-spot-news:hover { transform: translateX(3px); background: rgba(0, 0, 0, .5); color: #fff; }
.op-spot-news-icon { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; color: var(--nc); background: color-mix(in srgb, var(--nc) 16%, transparent); }
.op-spot-news small { display: block; font-size: .7rem; color: var(--nc); font-weight: 700; }
.op-spot-news strong { display: block; font-size: .88rem; line-height: 1.3; }
.op-spot-play { display: flex; align-items: center; gap: .8rem; padding: .6rem .7rem; margin-bottom: .5rem; border-radius: 13px; text-decoration: none; color: #fff;
  background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .07); transition: transform .2s var(--op-ease); }
.op-spot-play:hover { transform: translateX(3px); color: #fff; }
.op-spot-play > img { width: 64px; height: 42px; border-radius: 9px; object-fit: cover; flex-shrink: 0; }
.op-spot-play > span { flex: 1; min-width: 0; }
.op-spot-play strong { display: block; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-spot-play strong em { font-style: normal; color: var(--op-yellow); font-weight: 600; }
.op-spot-play small { color: var(--op-muted); font-size: .75rem; }
.op-spot-play b { font-family: var(--op-font-display); font-weight: 900; font-size: 1.3rem; }
.op-spot-play b small { font-size: .7rem; color: var(--op-yellow); }
.op-spot-daily { position: relative; display: flex; flex-direction: column; gap: .15rem; min-height: 190px; justify-content: flex-end; padding: 1rem 1.1rem; border-radius: 16px; overflow: hidden;
  text-decoration: none; color: #fff; border: 1px solid rgba(72, 198, 255, .35); }
.op-spot-daily small { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #48c6ff; }
.op-spot-daily strong { font-family: var(--op-font-display); font-weight: 900; font-size: 1.5rem; line-height: 1.15; }
.op-spot-daily span { color: rgba(255, 255, 255, .75); font-size: .82rem; }
.op-spot-daily em { font-style: normal; margin-top: .3rem; font-size: .82rem; color: var(--op-muted); }
.op-spot-daily em b { color: #fff; font-variant-numeric: tabular-nums; }
.op-spot-dailytop { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.op-spot-dailytop > span { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 20px; background: rgba(0, 0, 0, .4); font-size: .82rem; font-weight: 700; color: #fff; }
.op-spot-dailytop b { color: var(--op-yellow); }
.op-spot-tourney { display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem; margin-bottom: 1rem; border-radius: 16px; text-decoration: none; color: #fff;
  background: linear-gradient(120deg, rgba(var(--op-orange-rgb, 255, 178, 56), .25), rgba(0, 0, 0, .4)); border: 1px solid rgba(var(--op-orange-rgb, 255, 178, 56), .45); }
.op-spot-tourney > i { font-size: 1.6rem; color: var(--op-orange); }
.op-spot-tourney > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.op-spot-tourney small { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--op-orange); }
.op-spot-tourney strong { font-family: var(--op-font-display); font-weight: 900; font-size: 1.15rem; }
.op-spot-tourney em { font-style: normal; font-size: .78rem; color: var(--op-muted); }
.op-spot-tourney b { white-space: nowrap; font-size: .85rem; color: var(--op-orange); }
.op-spot-war { display: flex; align-items: center; gap: .7rem; padding: .5rem .75rem; margin-bottom: .4rem; border-radius: 12px; text-decoration: none; color: #fff; background: rgba(0, 0, 0, .35); }
.op-spot-war b { color: var(--op-yellow); width: 26px; }
.op-spot-war span { flex: 1; font-weight: 700; }
.op-spot-war em { font-style: normal; font-family: var(--op-font-display); font-weight: 900; }
.op-explore { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.op-explore-card { position: relative; display: flex; flex-direction: column; gap: .3rem; padding: 1.2rem 1.3rem; border-radius: 18px; overflow: hidden; text-decoration: none; color: #fff;
  background: linear-gradient(150deg, color-mix(in srgb, var(--ec) 16%, var(--op-card)), var(--op-card) 60%); border: 1px solid color-mix(in srgb, var(--ec) 30%, transparent);
  transition: transform .25s var(--op-ease), border-color .25s, box-shadow .25s; }
.op-explore-card:hover { transform: translateY(-4px); border-color: var(--ec); box-shadow: 0 14px 34px color-mix(in srgb, var(--ec) 22%, transparent); color: #fff; }
.op-explore-card i { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; font-size: 1.2rem; color: var(--ec); background: color-mix(in srgb, var(--ec) 16%, transparent); margin-bottom: .4rem; }
.op-explore-card strong { font-family: var(--op-font-display); font-weight: 900; font-size: 1.1rem; }
.op-explore-card small { color: var(--op-muted); }
@media (max-width: 991.98px) { .op-explore { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .op-explore { grid-template-columns: 1fr; } .op-spot-maps { grid-template-columns: 1fr; } .op-spot { min-height: 0; } }

/* podium: fixed columns so #1 is always in the middle, also with only 1 or 2 players */
.op-king-2 { grid-column: 1; grid-row: 1; } .op-king-1 { grid-column: 2; grid-row: 1; } .op-king-3 { grid-column: 3; grid-row: 1; }
@media (max-width: 767px) { .op-king-1, .op-king-2, .op-king-3 { grid-column: 1; grid-row: auto; } .op-king-1 { order: -1; } }

/* ===== Home v2 layout: video banner + main column + sidebar (qw26_29.0.1) ===== */
.op-home2 { padding-top: 1.2rem; }
.op-banner { position: relative; overflow: hidden; border-radius: 26px; min-height: 420px; display: flex; flex-direction: column; justify-content: space-between;
  border: 1px solid var(--op-border-strong); box-shadow: 0 30px 70px rgba(0, 0, 0, .45), 0 0 60px rgba(var(--op-yellow-rgb), .08); background: rgb(var(--op-dk-13-11-6, 13, 11, 6)); }
.op-banner-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.op-banner-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--op-dk-10-9-5, 10, 9, 5), .94) 0%, rgba(var(--op-dk-10-9-5, 10, 9, 5), .78) 42%, rgba(var(--op-dk-10-9-5, 10, 9, 5), .55) 75%, rgba(var(--op-dk-10-9-5, 10, 9, 5), .7)),
  linear-gradient(180deg, transparent 55%, rgba(var(--op-dk-10-9-5, 10, 9, 5), .9)); }
.op-banner-in { position: relative; z-index: 1; max-width: 640px; padding: 2.2rem 2.6rem 1rem; }
.op-banner .op-title { margin-bottom: 1rem; }
.op-banner .op-title-logo { width: min(460px, 100%); }
.op-banner .op-lead { margin-bottom: 1.3rem; }
.op-banner-stats { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: 0 2.6rem 1.6rem; }
.op-banner-stats > div { display: flex; flex-direction: column; padding: .55rem 1.1rem; border-radius: 14px; background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.op-banner-stats strong { font-family: var(--op-font-display); font-weight: 900; font-size: 1.35rem; color: #fff; line-height: 1.1; }
.op-banner-stats small { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--op-muted); }
.op-banner-stats .op-banner-modes { flex-direction: row; align-items: center; gap: .5rem; margin-left: auto; color: #fff; font-weight: 700; font-size: .85rem; }
.op-banner-modes i { color: var(--op-yellow); }
.op-banner .op-eyebrow { gap: .45rem; }
.op-eyebrow-sep { opacity: .5; }
.op-eyebrow-bolt { color: var(--op-yellow); }
.op-home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.3rem; margin-top: 1.4rem; align-items: start; }
.op-home-main, .op-home-side { display: flex; flex-direction: column; gap: 1.3rem; min-width: 0; }
.op-home-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
.op-spot-flat { min-height: 0; background: linear-gradient(160deg, rgb(var(--op-dk-29-23-10, 29, 23, 10)), rgb(var(--op-dk-19-16-10, 19, 16, 10)) 60%); }
.op-spot-flat .op-spot-maps { grid-template-columns: repeat(2, 1fr); }
.op-spot-flat .op-spot-map { min-height: 150px; }
.op-side-daily { position: relative; display: flex; flex-direction: column; gap: .15rem; padding: 1.1rem 1.2rem; min-height: 220px; justify-content: flex-end; border-radius: 20px; overflow: hidden;
  text-decoration: none; color: #fff; border: 1px solid rgba(72, 198, 255, .4); box-shadow: 0 14px 34px rgba(72, 198, 255, .1); transition: transform .2s var(--op-ease); }
.op-side-daily:hover { transform: translateY(-3px); color: #fff; }
.op-side-daily::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--op-dk-10-9-5, 10, 9, 5), .2), rgba(var(--op-dk-10-9-5, 10, 9, 5), .94) 70%); }
.op-side-daily > *:not(.op-spot-map-bg) { position: relative; z-index: 1; }
.op-side-daily small { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #48c6ff; }
.op-side-daily strong { font-family: var(--op-font-display); font-weight: 900; font-size: 1.3rem; line-height: 1.15; }
.op-side-daily > span { color: rgba(255, 255, 255, .75); font-size: .8rem; }
.op-side-daily-foot { display: flex; justify-content: space-between; align-items: center; margin-top: .5rem; }
.op-side-daily-foot em { font-style: normal; font-size: .8rem; color: var(--op-muted); }
.op-side-daily-foot em b { color: #fff; font-variant-numeric: tabular-nums; }
.op-side-go { padding: .3rem .8rem; border-radius: 20px; background: #48c6ff; color: #07202b; font-size: .8rem; }
.op-side-daily .op-spot-dailytop { margin-top: .6rem; }
.op-home-side .op-spot-tourney { margin-bottom: 0; }
.op-home-side .op-members { grid-template-columns: repeat(4, 1fr); }
.op-side-cta { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; border-radius: 18px; text-decoration: none; color: #fff; transition: transform .2s var(--op-ease); }
.op-side-cta:hover { transform: translateY(-3px); color: #fff; }
.op-side-cta > i { font-size: 1.6rem; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; background: rgba(255, 255, 255, .15); flex-shrink: 0; }
.op-side-cta span { display: flex; flex-direction: column; }
.op-side-cta small { opacity: .8; font-size: .78rem; }
.op-side-discord { background: linear-gradient(120deg, #5865f2, #4450c9); box-shadow: 0 12px 30px rgba(88, 101, 242, .3); }
.op-side-kofi { background: linear-gradient(120deg, #ff5e6b, #e0445a); box-shadow: 0 12px 30px rgba(255, 94, 107, .25); }
@media (max-width: 1199.98px) { .op-home-grid { grid-template-columns: 1fr; } .op-home-side { display: grid; grid-template-columns: 1fr 1fr; } }
@media (max-width: 767.98px) {
  .op-home-two, .op-home-side { grid-template-columns: 1fr; } .op-home-side { display: flex; }
  .op-banner-in { padding: 1.5rem 1.3rem .8rem; } .op-banner-stats { padding: 0 1.3rem 1.2rem; } .op-banner-stats .op-banner-modes { margin-left: 0; }
  .op-banner-shade { background: linear-gradient(180deg, rgba(var(--op-dk-10-9-5, 10, 9, 5), .75), rgba(var(--op-dk-10-9-5, 10, 9, 5), .92)); }
}
/* home v2: keep long titles/names inside their columns */
.op-home-grid > *, .op-home-two > *, .op-home-main .op-panel, .op-home-side .op-panel { min-width: 0; }
.op-home-main .op-panel, .op-home-side .op-panel { overflow: hidden; }
.op-home-main .op-score-body, .op-home-main .op-score-title { min-width: 0; }
.op-home-main .op-score-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-home-side .op-members { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem .4rem; }
.op-home-side .op-member { min-width: 0; }
.op-home-side .op-member span { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .72rem; }

/* pinned scores: pin button on own score cards (fable.js loadScorePanel) */
.op-sc-pin { position: relative; z-index: 2; width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; color: #fff; background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .15); opacity: 0; cursor: pointer; transition: opacity .2s, background .2s, transform .2s var(--op-ease); }
.op-sc:hover .op-sc-pin, .op-sc-pin:focus-visible { opacity: .85; }
.op-sc-pin:hover { opacity: 1; background: var(--op-pink); transform: scale(1.1); }
.op-sc-pin.op-pinned { opacity: 1; color: #fff; background: var(--op-pink); border-color: transparent; }
.op-sc-pin.op-pinned i { transform: rotate(-30deg); }
@media (max-width: 575.98px) { .op-sc-pin { opacity: .85; width: 32px; height: 32px; } }

/* ================= qw26_32 ================= */

/* animated page background (templates/assets/base.html .op-bgfx): drifting light orbs + slow osu! triangles */
.op-bgfx { position: fixed; inset: 0; z-index: -3; overflow: hidden; pointer-events: none; }
.op-bgfx { --orb1: var(--op-yellow-rgb); --orb2: 255, 94, 168; --orb3: var(--op-orange-rgb, 255, 150, 40); --orb4: 140, 120, 255; }
.op-bgfx i { position: absolute; border-radius: 50%; opacity: .5; will-change: transform; }
.op-bgfx i:nth-child(1) { width: 46vmax; height: 46vmax; left: -12vmax; top: -16vmax; background: radial-gradient(circle, rgba(var(--orb1), .38), rgba(var(--orb1), .12) 38%, transparent 68%); animation: opu-orb-a 38s ease-in-out infinite alternate; }
.op-bgfx i:nth-child(2) { width: 38vmax; height: 38vmax; right: -10vmax; top: 8vmax; background: radial-gradient(circle, rgba(var(--orb2), .28), rgba(var(--orb2), .09) 38%, transparent 68%); animation: opu-orb-b 46s ease-in-out infinite alternate; }
.op-bgfx i:nth-child(3) { width: 42vmax; height: 42vmax; left: 20vmax; bottom: -22vmax; background: radial-gradient(circle, rgba(var(--orb3), .26), rgba(var(--orb3), .08) 38%, transparent 68%); animation: opu-orb-c 52s ease-in-out infinite alternate; }
.op-bgfx i:nth-child(4) { width: 24vmax; height: 24vmax; left: 55vmax; top: 30vmax; background: radial-gradient(circle, rgba(var(--orb4), .18), rgba(var(--orb4), .05) 38%, transparent 68%); animation: opu-orb-b 60s ease-in-out infinite alternate-reverse; }
.op-bgfx::before { /* faint triangles drifting up */
  content: none; }
/* light particles slowly rising (qw26_32.0.1, replaces the diamond pattern the owner didn't like); every dot twice, 100vh apart, so the loop is seamless */
.op-bgfx b { position: absolute; left: 0; top: 0; border-radius: 50%; background: transparent; will-change: transform; }
.op-bgfx b.op-p1 { width: 2px; height: 2px; animation: opu-rise-up 110s linear infinite, opu-twinkle 4s ease-in-out infinite alternate;
  box-shadow: 5vw 12vh rgba(var(--op-light-rgb, 255,232,160),.6), 5vw 112vh rgba(var(--op-light-rgb, 255,232,160),.6), 13vw 67vh rgba(var(--op-light-rgb, 255,232,160),.4), 13vw 167vh rgba(var(--op-light-rgb, 255,232,160),.4),
    21vw 34vh rgba(var(--op-light-rgb, 255,232,160),.7), 21vw 134vh rgba(var(--op-light-rgb, 255,232,160),.7), 28vw 88vh rgba(var(--op-light-rgb, 255,232,160),.4), 28vw 188vh rgba(var(--op-light-rgb, 255,232,160),.4),
    34vw 8vh rgba(var(--op-light-rgb, 255,232,160),.5), 34vw 108vh rgba(var(--op-light-rgb, 255,232,160),.5), 41vw 53vh rgba(var(--op-light-rgb, 255,232,160),.6), 41vw 153vh rgba(var(--op-light-rgb, 255,232,160),.6),
    47vw 77vh rgba(var(--op-light-rgb, 255,232,160),.4), 47vw 177vh rgba(var(--op-light-rgb, 255,232,160),.4), 55vw 21vh rgba(var(--op-light-rgb, 255,232,160),.7), 55vw 121vh rgba(var(--op-light-rgb, 255,232,160),.7),
    62vw 95vh rgba(var(--op-light-rgb, 255,232,160),.5), 62vw 195vh rgba(var(--op-light-rgb, 255,232,160),.5), 68vw 44vh rgba(var(--op-light-rgb, 255,232,160),.4), 68vw 144vh rgba(var(--op-light-rgb, 255,232,160),.4),
    74vw 6vh rgba(var(--op-light-rgb, 255,232,160),.6), 74vw 106vh rgba(var(--op-light-rgb, 255,232,160),.6), 81vw 71vh rgba(var(--op-light-rgb, 255,232,160),.5), 81vw 171vh rgba(var(--op-light-rgb, 255,232,160),.5),
    87vw 29vh rgba(var(--op-light-rgb, 255,232,160),.7), 87vw 129vh rgba(var(--op-light-rgb, 255,232,160),.7), 93vw 58vh rgba(var(--op-light-rgb, 255,232,160),.4), 93vw 158vh rgba(var(--op-light-rgb, 255,232,160),.4),
    97vw 90vh rgba(var(--op-light-rgb, 255,232,160),.6), 97vw 190vh rgba(var(--op-light-rgb, 255,232,160),.6), 9vw 45vh rgba(var(--op-light-rgb, 255,232,160),.5), 9vw 145vh rgba(var(--op-light-rgb, 255,232,160),.5),
    38vw 30vh rgba(var(--op-light-rgb, 255,232,160),.4), 38vw 130vh rgba(var(--op-light-rgb, 255,232,160),.4), 58vw 62vh rgba(var(--op-light-rgb, 255,232,160),.6), 58vw 162vh rgba(var(--op-light-rgb, 255,232,160),.6),
    77vw 50vh rgba(var(--op-light-rgb, 255,232,160),.5), 77vw 150vh rgba(var(--op-light-rgb, 255,232,160),.5), 90vw 14vh rgba(var(--op-light-rgb, 255,232,160),.4), 90vw 114vh rgba(var(--op-light-rgb, 255,232,160),.4); }
.op-bgfx b.op-p2 { width: 4px; height: 4px; animation: opu-rise-up 160s linear infinite, opu-twinkle 6s ease-in-out infinite alternate-reverse;
  box-shadow: 7vw 80vh rgba(255,140,200,.45), 7vw 180vh rgba(255,140,200,.45), 19vw 18vh rgba(var(--op-orange-rgb, 255,190,90),.5), 19vw 118vh rgba(var(--op-orange-rgb, 255,190,90),.5),
    31vw 58vh rgba(255,140,200,.35), 31vw 158vh rgba(255,140,200,.35), 45vw 40vh rgba(var(--op-yellow-rgb),.45), 45vw 140vh rgba(var(--op-yellow-rgb),.45),
    52vw 90vh rgba(255,140,200,.4), 52vw 190vh rgba(255,140,200,.4), 66vw 12vh rgba(var(--op-orange-rgb, 255,190,90),.45), 66vw 112vh rgba(var(--op-orange-rgb, 255,190,90),.45),
    72vw 65vh rgba(180,160,255,.4), 72vw 165vh rgba(180,160,255,.4), 84vw 38vh rgba(255,140,200,.45), 84vw 138vh rgba(255,140,200,.45),
    95vw 76vh rgba(var(--op-yellow-rgb),.4), 95vw 176vh rgba(var(--op-yellow-rgb),.4), 26vw 5vh rgba(180,160,255,.35), 26vw 105vh rgba(180,160,255,.35),
    60vw 32vh rgba(255,140,200,.4), 60vw 132vh rgba(255,140,200,.4), 88vw 94vh rgba(var(--op-orange-rgb, 255,190,90),.4), 88vw 194vh rgba(var(--op-orange-rgb, 255,190,90),.4); }
@keyframes opu-rise-up { to { transform: translateY(-100vh); } }
/* a shooting star now and then */
.op-bgfx em { position: absolute; top: 12%; left: 70%; width: 140px; height: 2px; border-radius: 2px; opacity: 0; transform: rotate(-35deg);
  background: linear-gradient(90deg, rgba(255, 255, 255, .9), rgba(var(--op-yellow-rgb), .5) 30%, transparent); box-shadow: 0 0 10px rgba(var(--op-yellow-rgb), .6);
  animation: opu-star 14s linear infinite; animation-delay: 4s; }
.op-bgfx em + em { top: 38%; left: 35%; width: 100px; animation-duration: 19s; animation-delay: 11s; }
@keyframes opu-star { 0%, 90% { opacity: 0; transform: rotate(-35deg) translateX(0); } 91% { opacity: 1; } 97% { opacity: 0; transform: rotate(-35deg) translateX(-420px); } 100% { opacity: 0; transform: rotate(-35deg) translateX(-420px); } }
@keyframes opu-twinkle { from { opacity: .45; } to { opacity: 1; } }
.op-bgfx::after { /* soft vignette so text stays readable */
  content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(var(--op-dk-8-7-3, 8, 7, 3), .55)); }
@keyframes opu-orb-a { to { transform: translate(18vmax, 14vmax) scale(1.15); } }
@keyframes opu-orb-b { to { transform: translate(-16vmax, 18vmax) scale(.9); } }
@keyframes opu-orb-c { to { transform: translate(12vmax, -16vmax) scale(1.1); } }

/* scroll progress line + navbar when scrolled (fable.js) */
.op-scrollbar { position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 2000; pointer-events: none; transform-origin: left; transform: scaleX(var(--op-scroll, 0));
  background: linear-gradient(90deg, var(--op-yellow), var(--op-orange), var(--op-pink)); box-shadow: 0 0 10px rgba(255, 94, 168, .6); }
html[data-bs-theme] .navbar { transition: background .3s, box-shadow .3s, padding .3s; }
html[data-bs-theme].op-scrolled .navbar { background: rgba(var(--op-dk-16-14-7, 16, 14, 7), .86) !important; box-shadow: 0 10px 36px rgba(0, 0, 0, .45); }

/* click effects (fable.js, qw26_32.0.1): glowing ripple inside buttons, a ring + sparks where you click, cards press in */
/* overflow only while a ripple runs, so badges/icons on buttons are never cut off */
@keyframes opu-ripple { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
@keyframes opu-click-ring { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
@keyframes opu-click-spark { from { transform: translate(0, 0) scale(1); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
.op-sc:active, .op-lb-row:active, .op-played:active, .op-newscard:active, .op-bm-card:active, .op-btn:active, .btn:active { transform: scale(.97) !important; transition: transform .08s !important; }

/* sections fade in when they scroll into view (fable.js adds .op-reveal / .op-in) */
.op-reveal { animation: none !important; opacity: 0; transform: translateY(18px); transition: opacity .6s var(--op-ease), transform .6s var(--op-ease); }
.op-reveal.op-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .op-bgfx i, .op-bgfx b { animation: none; }
  .op-bgfx em { display: none; }
  .op-reveal { opacity: 1; transform: none; transition: none; }
}

/* supporter profile background (settings > supporter, user.html .op-pf-bg): two colour gradient, still / moving / rainbow */
.op-pfbg { position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(125deg, color-mix(in srgb, var(--pfbg1) 42%, rgb(var(--op-dk-13-11-5, 13, 11, 5))), color-mix(in srgb, var(--pfbg2) 42%, rgb(var(--op-dk-13-11-5, 13, 11, 5))), color-mix(in srgb, var(--pfbg1) 42%, rgb(var(--op-dk-13-11-5, 13, 11, 5))));
  background-size: 300% 300%; }
.op-pfbg-flow { animation: none; }
.op-pfbg-rainbow { background: linear-gradient(125deg, #5a1830, #5a3a10, #4d4a10, #104a2a, #103f5a, #2c1f5c, #52164a, #5a1830); background-size: 400% 400%; animation: opu-pfbg-move 20s linear infinite alternate; }
@keyframes opu-pfbg-move { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
body:has(.op-pfbg) .op-bgfx { opacity: .35; }
.op-sup-bgprev { position: relative; height: 120px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); margin-bottom: 1rem; background: rgb(var(--op-dk-20-17-10, 20, 17, 10)); }
.op-sup-bgprev::after { content: ""; position: absolute; inset: 0; background: linear-gradient(125deg, color-mix(in srgb, var(--pfbg1) 55%, rgb(var(--op-dk-13-11-5, 13, 11, 5))), color-mix(in srgb, var(--pfbg2) 55%, rgb(var(--op-dk-13-11-5, 13, 11, 5))), color-mix(in srgb, var(--pfbg1) 55%, rgb(var(--op-dk-13-11-5, 13, 11, 5)))); background-size: 300% 300%; }
.op-sup-bgprev.fx-off::after { background: rgb(var(--op-dk-20-17-10, 20, 17, 10)); }
.op-sup-bgprev.fx-flow::after { animation: opu-pfbg-move 6s ease-in-out infinite alternate; }
.op-sup-bgprev.fx-rainbow::after { background: linear-gradient(125deg, #7a2040, #7a5010, #6d6a10, #106a3a, #10577a, #3c2a7c, #72206a, #7a2040); background-size: 400% 400%; animation: opu-pfbg-move 8s linear infinite alternate; }
.op-sup-bgprev span { position: absolute; z-index: 1; left: 1rem; bottom: .8rem; font-family: var(--op-font-display); font-weight: 800; font-size: 1.2rem; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }

/* supporter banner as background of their leaderboard row (Leaderboard.java bannerIds) */
.op-lb-row.op-lb-banner { background: linear-gradient(90deg, rgba(var(--op-dk-20-17-9, 20, 17, 9), .96) 0%, rgba(var(--op-dk-20-17-9, 20, 17, 9), .8) 40%, rgba(var(--op-dk-20-17-9, 20, 17, 9), .66) 100%), var(--lb-banner) center / cover no-repeat; border-color: rgba(255, 94, 168, .25); }
.op-lb-row.op-lb-banner:hover { background: linear-gradient(90deg, rgba(var(--op-dk-20-17-9, 20, 17, 9), .92) 0%, rgba(var(--op-dk-20-17-9, 20, 17, 9), .7) 40%, rgba(var(--op-dk-20-17-9, 20, 17, 9), .5) 100%), var(--lb-banner) center / cover no-repeat; }
.op-lb-row.op-top-1.op-lb-banner { background: linear-gradient(90deg, rgba(var(--op-dk-60-48-10, 60, 48, 10), .96), rgba(var(--op-dk-20-17-9, 20, 17, 9), .8) 45%, rgba(var(--op-dk-20-17-9, 20, 17, 9), .45)), var(--lb-banner) center / cover no-repeat; border-color: rgba(var(--op-yellow-rgb), .4); }
.op-lb-row.op-top-2.op-lb-banner { background: linear-gradient(90deg, rgba(45, 48, 55, .96), rgba(var(--op-dk-20-17-9, 20, 17, 9), .8) 45%, rgba(var(--op-dk-20-17-9, 20, 17, 9), .45)), var(--lb-banner) center / cover no-repeat; }
.op-lb-row.op-top-3.op-lb-banner { background: linear-gradient(90deg, rgba(60, 35, 15, .96), rgba(var(--op-dk-20-17-9, 20, 17, 9), .8) 45%, rgba(var(--op-dk-20-17-9, 20, 17, 9), .45)), var(--lb-banner) center / cover no-repeat; }

.op-lb-banner .op-lb-stat, .op-lb-banner .op-lb-main, .op-lb-banner .op-lb-name { text-shadow: 0 1px 6px rgba(0, 0, 0, .9); }
.op-lb-banner .op-lb-stat { color: #e6e0cc; }

/* owner: no diamond / triangle patterns anywhere (qw26_32.0.1) */
.op-pf-cover::before { display: none; }

/* flags always small, even inside cards with their own img rules (home spotlight had 64px flags) */
img.op-flag, .op-spot img.op-flag, .op-side img.op-flag { width: 20px !important; height: 14px !important; border-radius: 3px; object-fit: cover; vertical-align: -1px; margin-right: .25rem; display: inline-block; box-shadow: none; }

/* ================= qw26_33 ================= */

/* avatar frames (Cosmetics.java writes the same declarations into names.css for img[data-op-av]) */

/* settings: frame picker, fonts, particle chars */
.op-frames { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .7rem; }
.op-frame-opt { cursor: pointer; }
.op-frame-opt input { position: absolute; opacity: 0; pointer-events: none; }
.op-frame-opt > span { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .9rem .5rem .7rem; border-radius: 16px; background: rgba(255, 255, 255, .03);
  border: 2px solid rgba(255, 255, 255, .06); transition: border-color .2s, background .2s, transform .2s var(--op-ease); text-align: center; }
.op-frame-opt > span img { width: 54px; height: 54px; border-radius: 14px; object-fit: cover; margin-bottom: .35rem; }
.op-frame-opt strong { font-size: .82rem; } .op-frame-opt small { font-size: .7rem; color: var(--op-muted); }
.op-frame-opt:hover > span { transform: translateY(-2px); border-color: var(--op-border-strong); }
.op-frame-opt input:checked + span { border-color: var(--op-yellow); background: rgba(var(--op-yellow-rgb), .08); box-shadow: 0 0 0 3px rgba(var(--op-yellow-rgb), .12); }
.op-frame-opt.locked { cursor: not-allowed; } .op-frame-opt.locked > span { opacity: .45; filter: grayscale(.6); }
.op-sup-fonts { display: flex; flex-wrap: wrap; gap: .45rem; }
.op-sup-fonts label { cursor: pointer; } .op-sup-fonts input { position: absolute; opacity: 0; pointer-events: none; }
.op-sup-fonts span { display: inline-block; padding: .4rem .85rem; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 2px solid rgba(255, 255, 255, .07); font-size: .95rem; transition: border-color .2s; }
.op-sup-fonts input:checked + span { border-color: var(--op-yellow); background: rgba(var(--op-yellow-rgb), .08); }
.op-pchar { font-weight: 400; margin-right: .35rem; }
.op-sup-music-now { margin-bottom: .9rem; }

/* profile particles (supporter) */
.op-pfx { position: fixed; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.op-pfx span { position: absolute; top: -8vh; opacity: .8; animation: opu-pfx-fall linear infinite; will-change: transform; }
.op-pfx-hearts span { color: #ff5ea8; }
.op-pfx-rise span { top: auto; bottom: -8vh; animation-name: opu-pfx-rise; }
.op-pfx-stars span { color: var(--op-yellow); } .op-pfx-snow span { color: #eef6ff; } .op-pfx-notes span { color: #b9a6ff; }
@keyframes opu-pfx-fall { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(30px, 58vh) rotate(180deg); } 100% { transform: translate(-10px, 118vh) rotate(360deg); } }
@keyframes opu-pfx-rise { 0% { transform: translate(0, 0) scale(.8); opacity: 0; } 10% { opacity: .8; } 100% { transform: translate(-25px, -118vh) scale(1.1); opacity: 0; } }

/* profile music + beatmap preview buttons ([data-op-audio]) */
.op-pf-music { display: inline-flex; align-items: center; gap: .55rem; max-width: 100%; margin: 0 0 .35rem; padding: .3rem .8rem .3rem .35rem; border-radius: 999px; cursor: pointer; color: #fff;
  background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(8px); transition: background .2s, border-color .2s, transform .2s var(--op-ease); }
.op-pf-music:hover { background: rgba(255, 94, 168, .2); border-color: rgba(255, 94, 168, .5); transform: translateY(-1px); }
.op-pf-music > i { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; font-size: .75rem; color: rgb(var(--op-dk-22-20-12, 22, 20, 12)); background: linear-gradient(135deg, var(--op-yellow), var(--op-pink)); }
.op-pf-music > span { display: flex; flex-direction: column; min-width: 0; text-align: left; font-size: .8rem; font-weight: 700; line-height: 1.15; }
.op-pf-music > span small { font-size: .62rem; color: var(--op-muted); text-transform: uppercase; letter-spacing: .08em; }
.op-pf-music > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.op-eq { display: none; align-items: flex-end; gap: 2px; height: 14px; }
.op-eq i { width: 3px; height: 4px; border-radius: 2px; background: var(--op-pink); animation: opu-eq .9s ease-in-out infinite; }
.op-eq i:nth-child(2) { animation-delay: .2s; } .op-eq i:nth-child(3) { animation-delay: .4s; }
.playing .op-eq, .op-eq.playing { display: inline-flex; }
@keyframes opu-eq { 0%, 100% { height: 4px; } 50% { height: 14px; } }
.op-map-preview .op-eq { margin-left: .45rem; } .op-map-preview.playing { box-shadow: 0 0 0 2px var(--op-pink); }

/* hover card on names (fable.js) */
.op-hc { position: fixed; z-index: 3500; width: 300px; border-radius: 18px; overflow: hidden; color: var(--op-text); pointer-events: auto;
  background: rgb(var(--op-dk-22-19-11, 22, 19, 11)); border: 1px solid var(--op-border-strong); box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
  opacity: 0; transform: translateY(6px) scale(.97); transition: opacity .18s, transform .18s var(--op-ease); }
.op-hc.in { opacity: 1; transform: none; }
.op-hc-custom { border-color: color-mix(in srgb, var(--hc) 70%, transparent); box-shadow: 0 20px 50px rgba(0, 0, 0, .55), 0 0 30px color-mix(in srgb, var(--hc) 30%, transparent); }
.op-hc-bg { background: linear-gradient(135deg, color-mix(in srgb, var(--hc1) 40%, rgb(var(--op-dk-13-11-5, 13, 11, 5))), color-mix(in srgb, var(--hc2) 40%, rgb(var(--op-dk-13-11-5, 13, 11, 5)))); }
.op-hc-rainbow { background: linear-gradient(125deg, #5a1830, #5a3a10, #104a2a, #103f5a, #2c1f5c, #52164a); background-size: 300% 300%; animation: opu-pfbg-move 8s linear infinite alternate; }
.op-hc-top { height: 74px; background: linear-gradient(135deg, #3a2a08, rgb(var(--op-dk-27-20-10, 27, 20, 10)) 55%, #2a1020); background-size: cover; background-position: center; }
.op-hc-top.has-banner { box-shadow: inset 0 -30px 30px -10px rgba(0, 0, 0, .7); }
.op-hc-body { display: flex; gap: .7rem; align-items: flex-end; padding: 0 1rem; margin-top: -30px; }
.op-hc-av { width: 62px; height: 62px; border-radius: 16px; object-fit: cover; border: 3px solid rgb(var(--op-dk-22-19-11, 22, 19, 11)); flex-shrink: 0; }
.op-hc-id { min-width: 0; padding-bottom: .1rem; }
.op-hc-id strong { display: block; font-family: var(--op-font-display); font-weight: 900; font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-hc-id small { display: flex; align-items: center; gap: .3rem; color: var(--op-muted); font-size: .75rem; } .op-hc-id small b { color: var(--op-yellow); }
.op-hc-heart { color: #ff5ea8; font-size: .8rem; }
.op-hc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; padding: .8rem 1rem 1rem; }
.op-hc-stats div { padding: .4rem .5rem; border-radius: 10px; background: rgba(0, 0, 0, .25); text-align: center; }
.op-hc-stats small { display: block; font-size: .6rem; color: var(--op-muted); text-transform: uppercase; letter-spacing: .08em; }
.op-hc-stats strong { font-family: var(--op-font-display); font-weight: 900; font-size: .95rem; }
.op-hc-custom .op-hc-stats strong { color: var(--hc); }

/* live ticker under the navbar */
.op-ticker { position: relative; z-index: 1020; display: flex; align-items: center; height: 34px; overflow: hidden; font-size: .8rem;
  background: rgba(var(--op-dk-16-14-7, 16, 14, 7), .78); border-bottom: 1px solid var(--op-border); backdrop-filter: blur(10px); }
.op-ticker[hidden] { display: none; }
.op-ticker-live { flex-shrink: 0; display: inline-flex; align-items: center; gap: .35rem; height: 100%; padding: 0 .8rem; font-weight: 900; font-size: .68rem; letter-spacing: .12em; color: #fff;
  background: linear-gradient(90deg, #ff4e5b, #ff5ea8); }
.op-ticker-live i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: op-pulse-ring 1.6s ease-out infinite; }
.op-ticker-track { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.op-ticker-run { display: inline-flex; align-items: center; white-space: nowrap; gap: .9rem; padding-left: 1rem; animation: opu-ticker 60s linear infinite; }
.op-ticker:hover .op-ticker-run { animation-play-state: paused; }
.op-ticker-run a { display: inline-flex; align-items: center; gap: .4rem; color: var(--op-text); text-decoration: none; }
.op-ticker-run a:hover { color: var(--op-yellow); }
.op-ticker-run a b { color: var(--op-muted); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.op-ticker-dot { color: var(--op-border-strong); }
.op-ticker-x { flex-shrink: 0; width: 34px; height: 100%; border: 0; background: transparent; color: var(--op-muted); font-size: 1.1rem; cursor: pointer; }
.op-ticker-x:hover { color: #fff; }
@keyframes opu-ticker { to { transform: translateX(-50%); } }

/* colour themes (navbar palette, stored per browser) */
html[data-bs-theme][data-op-theme="pink"], html[data-bs-theme][data-bs-core][data-op-theme="pink"] { --op-yellow: #ff6fb5; --op-yellow-rgb: 255, 111, 181; --op-yellow-strong: #ff4fa3; --op-orange: #ff8fa0; --op-pink: #b98cff;
  --op-border: rgba(255, 111, 181, .16); --op-border-strong: rgba(255, 111, 181, .34); --op-glass: rgba(255, 140, 200, .055); --bs-link-hover-color: #ffa3cf; }
html[data-bs-theme][data-op-theme="blue"], html[data-bs-theme][data-bs-core][data-op-theme="blue"] { --op-yellow: #5cc8ff; --op-yellow-rgb: 92, 200, 255; --op-yellow-strong: #38b6ff; --op-orange: #6f9bff; --op-pink: #9b7bff;
  --op-border: rgba(92, 200, 255, .16); --op-border-strong: rgba(92, 200, 255, .34); --op-glass: rgba(120, 200, 255, .055); --bs-link-hover-color: #9adcff; }
html[data-bs-theme][data-op-theme="purple"], html[data-bs-theme][data-bs-core][data-op-theme="purple"] { --op-yellow: #b08cff; --op-yellow-rgb: 176, 140, 255; --op-yellow-strong: #9b6bff; --op-orange: #d77bff; --op-pink: #ff6fb5;
  --op-border: rgba(176, 140, 255, .16); --op-border-strong: rgba(176, 140, 255, .34); --op-glass: rgba(176, 140, 255, .055); --bs-link-hover-color: #cdb6ff; }
html[data-bs-theme][data-op-theme="green"], html[data-bs-theme][data-bs-core][data-op-theme="green"] { --op-yellow: #4fe08a; --op-yellow-rgb: 79, 224, 138; --op-yellow-strong: #2fd174; --op-orange: #a6e05a; --op-pink: #48c6ff;
  --op-border: rgba(79, 224, 138, .16); --op-border-strong: rgba(79, 224, 138, .34); --op-glass: rgba(79, 224, 138, .05); --bs-link-hover-color: #8ff0b6; }
html[data-bs-theme][data-op-theme="red"], html[data-bs-theme][data-bs-core][data-op-theme="red"] { --op-yellow: #ff6b6b; --op-yellow-rgb: 255, 107, 107; --op-yellow-strong: #ff4d4d; --op-orange: #ff9a5c; --op-pink: #ff5ea8;
  --op-border: rgba(255, 107, 107, .16); --op-border-strong: rgba(255, 107, 107, .34); --op-glass: rgba(255, 107, 107, .05); --bs-link-hover-color: #ffa0a0; }
html[data-op-theme="pink"] .op-bgfx { --orb1: 255, 111, 181; --orb2: 185, 140, 255; --orb3: 255, 143, 160; }
html[data-op-theme="blue"] .op-bgfx { --orb1: 92, 200, 255; --orb2: 155, 123, 255; --orb3: 111, 155, 255; }
html[data-op-theme="purple"] .op-bgfx { --orb1: 176, 140, 255; --orb2: 255, 111, 181; --orb3: 215, 123, 255; }
html[data-op-theme="green"] .op-bgfx { --orb1: 79, 224, 138; --orb2: 72, 198, 255; --orb3: 166, 224, 90; }
html[data-op-theme="red"] .op-bgfx { --orb1: 255, 107, 107; --orb2: 255, 94, 168; --orb3: 255, 154, 92; }
html[data-op-theme] body { background-image: none !important; background-color: #100f0c !important; }
.op-theme-pick { display: flex; align-items: center; margin-right: .4rem; }
.op-theme-btn { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--op-border); background: rgba(255, 255, 255, .04); color: var(--op-yellow); cursor: pointer; transition: transform .2s var(--op-ease), background .2s; }
.op-theme-btn:hover { transform: rotate(-12deg) scale(1.06); background: rgba(var(--op-yellow-rgb), .12); }
.op-theme-menu { min-width: 190px; padding: .5rem; }
.op-theme-title { font-size: .7rem; font-weight: 800; color: var(--op-muted); text-transform: uppercase; letter-spacing: .1em; padding: .2rem .5rem .45rem; }
.op-theme-opt { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .45rem .55rem; border: 0; border-radius: 10px; background: transparent; color: var(--op-text); font-weight: 600; text-align: left; }
.op-theme-opt:hover { background: rgba(255, 255, 255, .06); }
/* design switch Celestial / Classic (qw26_47.1) */
.op-design-pick { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-bottom: .5rem; }
.op-design-opt { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .55rem .4rem; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .03); color: var(--op-text); font-weight: 800; font-size: .85rem; line-height: 1.15; }
.op-design-opt small { font-weight: 600; font-size: .68rem; color: var(--op-muted); }
.op-design-opt:hover { background: rgba(255, 255, 255, .07); }
.op-design-opt.active { border-color: rgba(var(--op-yellow-rgb), .8); background: rgba(var(--op-yellow-rgb), .12); }
.op-design-sw { width: 100%; height: 26px; border-radius: 8px; }
.op-design-sw-celestial { background: radial-gradient(circle at 30% 40%, #3b1d6e, #0a0618 70%), #0a0618; box-shadow: inset 0 0 0 2px #c59cff; }
.op-design-sw-classic { background: linear-gradient(135deg, #1b170e, #121109); box-shadow: inset 0 0 0 2px #ffd84d; }
.op-lb-rank-emb { width: 24px; height: 24px; vertical-align: middle; margin-left: .25rem; flex-shrink: 0; }
.op-theme-opt span { width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, .15); }
.op-theme-opt.active { background: rgba(var(--op-yellow-rgb), .12); } .op-theme-opt.active span { box-shadow: 0 0 0 2px #fff; }

/* confetti on a new record (own profile) */
.op-confetti { position: fixed; inset: 0; z-index: 4000; pointer-events: none; overflow: hidden; }
.op-confetti i { position: absolute; top: -20px; border-radius: 2px; animation: opu-confetti linear forwards; }
@keyframes opu-confetti { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--sway), 105vh) rotate(var(--rot)); opacity: .9; } }
.op-confetti-toast { position: absolute; left: 50%; top: 110px; transform: translateX(-50%); padding: .8rem 1.4rem; border-radius: 16px; font-family: var(--op-font-display); font-weight: 900; font-size: 1.2rem;
  color: rgb(var(--op-dk-22-20-12, 22, 20, 12)); background: linear-gradient(135deg, var(--op-yellow), var(--op-orange)); box-shadow: 0 12px 40px rgba(0, 0, 0, .45); animation: op-pop .5s var(--op-ease) both, opu-toast-out .5s ease 4.5s forwards; }
@keyframes opu-toast-out { to { opacity: 0; transform: translateX(-50%) translateY(-10px); } }

/* grade stamp on the score page */
.op-stamp img { animation: opu-stamp .7s cubic-bezier(.2, 1.4, .4, 1) both .15s; }
.op-stamp-x img, .op-stamp-xh img, .op-stamp-ss img { animation: opu-stamp .7s cubic-bezier(.2, 1.4, .4, 1) both .15s, opu-stamp-shine 2.4s ease-in-out 1s infinite; }
.op-stamp { position: relative; }
.op-stamp::after { content: ""; position: absolute; inset: 10%; border-radius: 50%; border: 3px solid rgba(var(--op-yellow-rgb), .8); opacity: 0; pointer-events: none; animation: opu-stamp-ring .8s ease-out .45s both; }
@keyframes opu-stamp { 0% { transform: scale(2.6) rotate(-18deg); opacity: 0; filter: blur(4px); } 60% { transform: scale(.9) rotate(4deg); opacity: 1; filter: none; } 80% { transform: scale(1.06) rotate(-2deg); } 100% { transform: none; } }
@keyframes opu-stamp-ring { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes opu-stamp-shine { 0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 255, 255, .3)); } 50% { filter: drop-shadow(0 0 18px rgba(var(--op-light-rgb, 255, 230, 150), .95)); } }

/* weekly challenges page */
@media (max-width: 991.98px) { }

/* supporter page: wall + new demos */
.op-sup-wall { padding: 1.3rem 1.4rem; border-radius: 20px; background: linear-gradient(135deg, rgba(255, 94, 168, .1), var(--op-card) 60%); border: 1px solid rgba(255, 94, 168, .25); }
.op-sup-wall h3 { font-family: var(--op-font-display); font-weight: 900; font-size: 1.2rem; margin-bottom: 1rem; } .op-sup-wall h3 i { color: #ff5ea8; animation: opu-heartbeat 1.4s ease-in-out infinite; }
.op-sup-wall h3 span { font-size: .8rem; color: var(--op-muted); font-weight: 600; margin-left: .4rem; }
.op-sup-wall-grid { display: flex; flex-wrap: wrap; gap: .8rem; }
.op-sup-wall-grid a { display: flex; flex-direction: column; align-items: center; gap: .4rem; width: 92px; text-decoration: none; color: var(--op-text); font-weight: 700; font-size: .8rem; animation: op-pop .5s var(--op-ease) both; animation-delay: calc(var(--i) * 50ms); }
.op-sup-wall-grid img { width: 64px; height: 64px; border-radius: 18px; object-fit: cover; transition: transform .25s var(--op-ease); }
.op-sup-wall-grid a:hover img { transform: translateY(-4px) rotate(-3deg); }
.op-sup-wall-grid span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes opu-heartbeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(1); } 45% { transform: scale(1.15); } }
.op-sup-demo-frames { flex-direction: row !important; gap: .9rem !important; }
.op-sup-demo-frames img { width: 38px; height: 38px; border-radius: 11px; object-fit: cover; }
.op-sup-demo-fonts { flex-direction: row !important; gap: 1rem !important; font-size: 1.05rem; color: #ff9fca; }
.op-sup-demo-pfx { flex-direction: row !important; gap: .9rem !important; font-size: 1.3rem; }
.op-sup-demo-pfx span { animation: opu-bob 2s ease-in-out infinite; } .op-sup-demo-pfx span:nth-child(2n) { animation-delay: .5s; }
.op-sup-demo-pfx span:nth-child(1) { color: #ff5ea8; } .op-sup-demo-pfx span:nth-child(3) { color: var(--op-yellow); } .op-sup-demo-pfx span:nth-child(4) { color: #eef6ff; } .op-sup-demo-pfx span:nth-child(5) { color: #b9a6ff; }
.op-sup-demo-music { margin: 0; cursor: default; }
.op-sup-demo-gif { flex-direction: row !important; gap: .6rem !important; font-family: var(--op-font-display); font-weight: 900; font-size: 1.4rem; color: #48c6ff; }
.op-sup-demo-gif i { animation: opu-bob 1.6s ease-in-out infinite; }

/* navbar fits again with the theme button (qw26_33): the old 170px rule was weaker than .fable-search-input */
@media (min-width: 1200px) and (max-width: 1699px) {
  .op-nav-search .fable-search-input { width: 160px !important; }
  .op-nav-search .fable-search-input:focus { width: 230px !important; }
  .op-nav-search { margin: 0 .5rem !important; }
  .op-theme-btn { width: 34px; height: 34px; border-radius: 10px; }
}
@media (min-width: 1200px) and (max-width: 1499px) {
  .op-nav-search .fable-search-input { width: 120px !important; }
  .op-nav-links .nav-link i { display: none; }
}

/* mobile profile: the two mode bars wrap into two rows, so the cover needs room above the avatar (qw26_33.0.1) */
@media (max-width: 575.98px) {
  .op-pf-cover { height: 270px; }
  .op-pf-cover .op-modebar { top: .6rem; gap: .4rem; }
  .op-pf-cover .op-seg-btn { padding: .3rem .55rem; font-size: .74rem; }
}

/* ===== qw26_33.0.2: frame card layout, locks on supporter options, save toast ===== */
.op-frames { margin-bottom: .2rem; }
.op-frame-opt > span { position: relative; height: 100%; }
.op-sup-locked .op-frames, .op-sup-locked .op-sup-fonts { filter: grayscale(.35); opacity: .8; transition: filter .2s, opacity .2s; }
.op-sup-locked .op-frames:hover, .op-sup-locked .op-sup-fonts:hover { filter: none; opacity: 1; }
/* small lock on every option a non-supporter can only preview */
.op-sup-locked .op-sup-effects label > span, .op-sup-locked .op-sup-fonts label > span { position: relative; }
.op-sup-locked .op-sup-effects label > span::after, .op-sup-locked .op-sup-fonts label > span::after, .op-sup-locked .op-frame-opt > span::after {
  content: "\f023"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; display: grid; place-items: center;
  font-size: .55rem; border-radius: 50%; color: rgb(var(--op-dk-22-20-12, 22, 20, 12)); background: #ff9fca; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.op-sup-locked .op-frame-opt > span::after { top: 6px; right: 6px; }
.op-sup-locked .op-sup-effects label:first-child > span::after, .op-sup-locked .op-sup-fonts label:first-child > span::after, .op-sup-locked .op-frame-opt:first-child > span::after { display: none; }

/* toast after saving (fable.js turns .op-set-alert into a floating message) */
.op-toast { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 3600; display: flex; align-items: center; gap: .7rem; max-width: min(420px, calc(100vw - 2.4rem));
  padding: .9rem 1.1rem; border-radius: 16px; font-weight: 700; color: #fff; background: rgba(20, 30, 20, .96); border: 1px solid rgba(58, 214, 120, .6);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5), 0 0 24px rgba(58, 214, 120, .25); animation: opu-toast-in .45s cubic-bezier(.2, 1.3, .4, 1) both; }
.op-toast i { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; color: #0e1a10; background: #3ad678; }
.op-toast.err { background: rgba(34, 16, 16, .96); border-color: rgba(255, 94, 107, .65); box-shadow: 0 16px 40px rgba(0, 0, 0, .5), 0 0 24px rgba(255, 94, 107, .25); }
.op-toast.err i { background: #ff5e6b; color: rgb(var(--op-dk-26-14-14, 26, 14, 14)); }
.op-toast.out { animation: opu-toast-away .35s ease forwards; }
@keyframes opu-toast-in { from { opacity: 0; transform: translateY(20px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes opu-toast-away { to { opacity: 0; transform: translateY(12px); } }
/* the card that was just saved lights up */
.op-set-card.op-saved { animation: opu-saved 1.6s ease both; }
@keyframes opu-saved { 0% { box-shadow: 0 0 0 0 rgba(58, 214, 120, 0); } 20% { box-shadow: 0 0 0 3px rgba(58, 214, 120, .8), 0 0 30px rgba(58, 214, 120, .35); } 100% { box-shadow: 0 0 0 0 rgba(58, 214, 120, 0); } }
/* save buttons show that they are working */
.op-btn.op-saving { pointer-events: none; opacity: .75; }

/* colour themes: supporter only */
.op-theme-opt:disabled { opacity: .55; cursor: not-allowed; }
.op-theme-opt:disabled::after { content: "\f023"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-left: auto; font-size: .7rem; color: #ff9fca; }
.op-theme-lock { display: block; margin: .4rem .2rem .1rem; padding: .45rem .6rem; border-radius: 10px; font-size: .78rem; font-weight: 700; text-align: center; text-decoration: none; color: rgb(var(--op-dk-22-20-12, 22, 20, 12)); background: linear-gradient(135deg, #ff9fca, #ff5ea8); }

/* supporter page: colour theme demo (qw26_33.0.3) */
.op-sup-demo-themes { flex-direction: row !important; gap: .55rem !important; }
.op-sup-demo-themes span { width: 26px; height: 26px; border-radius: 50%; background: var(--t); box-shadow: 0 0 0 2px rgba(255, 255, 255, .15), 0 0 14px var(--t); animation: opu-bob 2.2s ease-in-out infinite; }
.op-sup-demo-themes span:nth-child(2n) { animation-delay: .4s; } .op-sup-demo-themes span:nth-child(3n) { animation-delay: .8s; }

/* home page trailer (pompa.html #trailer, fable.js loads the YouTube player on click) */
.op-trailer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.4rem; align-items: center; margin-top: 1.4rem; padding: 1.4rem 1.4rem 1.4rem 2.6rem;
  border-radius: 24px; background: var(--op-card); border: 1px solid var(--op-border); }
.op-trailer-kicker { font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #ff5e6b; }
.op-trailer h2 { font-family: var(--op-font-display); font-weight: 900; font-size: 2.1rem; line-height: 1.15; margin: .4rem 0 .6rem; }
.op-trailer p { color: var(--op-muted); margin-bottom: 1.3rem; font-size: 1rem; max-width: 34ch; }
.op-trailer-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.op-trailer-player { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 20px 50px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06); }
.op-trailer-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.op-trailer-poster { position: absolute; inset: 0; padding: 0; border: 0; cursor: pointer; background: #000; }
.op-trailer-poster img { width: 100%; height: 100%; object-fit: cover; transition: filter .3s; }
.op-trailer-poster:hover img { filter: brightness(.85); }
.op-trailer-btn { position: absolute; left: 50%; top: 50%; width: 82px; height: 82px; margin: -41px 0 0 -41px; display: grid; place-items: center; border-radius: 50%; font-size: 1.8rem; color: #fff;
  background: linear-gradient(135deg, #ff5ea8, #ff4e5b); box-shadow: 0 10px 30px rgba(255, 78, 91, .5); animation: opu-trailer-pulse 2s ease-in-out infinite; transition: transform .25s var(--op-ease); }
.op-trailer-btn i { margin-left: 5px; }
.op-trailer-poster:hover .op-trailer-btn { transform: scale(1.1); }
.op-trailer-poster small { position: absolute; right: .8rem; bottom: .6rem; font-size: .7rem; color: rgba(255, 255, 255, .85); background: rgba(0, 0, 0, .55); padding: .15rem .5rem; border-radius: 8px; }
@keyframes opu-trailer-pulse { 0%, 100% { box-shadow: 0 10px 30px rgba(255, 78, 91, .5), 0 0 0 0 rgba(255, 94, 168, .5); } 50% { box-shadow: 0 10px 30px rgba(255, 78, 91, .5), 0 0 0 16px rgba(255, 94, 168, 0); } }
@media (max-width: 991.98px) { .op-trailer { grid-template-columns: 1fr; gap: 1.2rem; padding: 1.1rem; } .op-trailer h2 { font-size: 1.5rem; } }

/* ================= qw26_34.0.1: performance, default cover, particles ================= */

/* PERFORMANCE: glass blur (backdrop-filter) over the animated background had to be recalculated every frame -> lag.
   Solid, slightly more opaque backgrounds instead. */
html[data-bs-theme] *, html[data-bs-theme] *::before, html[data-bs-theme] *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html[data-bs-theme] .navbar { background: rgba(var(--op-dk-18-16-9, 18, 16, 9), .94) !important; }
html[data-bs-theme].op-scrolled .navbar { background: rgba(var(--op-dk-14-12-7, 14, 12, 7), .97) !important; }
.op-ticker { background: rgba(var(--op-dk-16-14-7, 16, 14, 7), .96); }
.op-pf-cover .op-seg { background: rgba(0, 0, 0, .68); }
.op-map-side { background: rgba(0, 0, 0, .7) !important; }
.op-pf-music { background: rgba(0, 0, 0, .62); }
.op-bgfx, .op-pfbg, .op-pfx { contain: strict; }

/* moving profile background: a large layer that is only moved (GPU), not repainted */
.op-pfbg { overflow: hidden; }
.op-pfbg-flow, .op-pfbg-rainbow { background: rgb(var(--op-dk-13-11-5, 13, 11, 5)) !important; animation: none !important; }
.op-pfbg-flow::before, .op-pfbg-rainbow::before { content: ""; position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; will-change: transform;
  background: linear-gradient(125deg, color-mix(in srgb, var(--pfbg1) 42%, rgb(var(--op-dk-13-11-5, 13, 11, 5))), color-mix(in srgb, var(--pfbg2) 42%, rgb(var(--op-dk-13-11-5, 13, 11, 5))), color-mix(in srgb, var(--pfbg1) 42%, rgb(var(--op-dk-13-11-5, 13, 11, 5))), color-mix(in srgb, var(--pfbg2) 42%, rgb(var(--op-dk-13-11-5, 13, 11, 5))));
  animation: opu-pfbg-slide 16s ease-in-out infinite alternate; }
.op-pfbg-rainbow::before { background: linear-gradient(125deg, #5a1830, #5a3a10, #4d4a10, #104a2a, #103f5a, #2c1f5c, #52164a, #5a1830); animation-duration: 22s; }
@keyframes opu-pfbg-slide { from { transform: translate(-12%, -8%) rotate(0deg); } to { transform: translate(12%, 8%) rotate(8deg); } }

/* DEFAULT COVER (no banner): soft glows in the profile colour instead of the muddy brown block,
   and every cover fades out at the bottom instead of ending in a hard line */
.op-pf-cover { -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%); mask-image: linear-gradient(180deg, #000 58%, transparent 100%); }
.op-pf-cover::after { background: linear-gradient(180deg, rgba(0, 0, 0, .1), transparent 45%) !important; }
.op-pf-cover:not(:has(img.op-pf-banner)) {
  background: linear-gradient(135deg, color-mix(in srgb, var(--pfc, var(--op-yellow)) 34%, rgb(var(--op-dk-21-17-10, 21, 17, 10))) 0%, color-mix(in srgb, var(--pfc, var(--op-orange)) 16%, rgb(var(--op-dk-19-15-9, 19, 15, 9))) 50%, rgb(var(--op-dk-17-14-8, 17, 14, 8)) 100%) !important; }
.op-pf-cover:not(:has(img.op-pf-banner))::before { content: none !important; }

/* particles settings: kinds, own emoji, amount, direction, preview */
.op-pfx-kinds { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.op-pfx-opts { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 1rem; margin-top: 1rem; }
@media (max-width: 767.98px) { .op-pfx-opts { grid-template-columns: 1fr; } }
.op-pfx-seg { display: flex; gap: .35rem; flex-wrap: wrap; }
.op-pfx-seg label { cursor: pointer; } .op-pfx-seg input { position: absolute; opacity: 0; pointer-events: none; }
.op-pfx-seg span { display: inline-block; padding: .45rem .8rem; border-radius: 10px; font-size: .85rem; font-weight: 700; background: rgba(255, 255, 255, .04); border: 2px solid rgba(255, 255, 255, .07); }
.op-pfx-seg input:checked + span { border-color: var(--op-yellow); background: rgba(var(--op-yellow-rgb), .08); }
.op-pfx-prev { position: relative; height: 140px; margin-bottom: 1rem; border-radius: 16px; overflow: hidden; background: linear-gradient(160deg, rgb(var(--op-dk-29-24-16, 29, 24, 16)), rgb(var(--op-dk-17-14-8, 17, 14, 8))); border: 1px solid rgba(255, 255, 255, .06); }
.op-pfx-prev span { position: absolute; top: -24px; animation: opu-pfxp-fall linear infinite; will-change: transform; }
.op-pfx-prev.rise span { top: auto; bottom: -24px; animation-name: opu-pfxp-rise; }
@keyframes opu-pfxp-fall { from { transform: translate(0, 0) rotate(0); } to { transform: translate(14px, 180px) rotate(300deg); } }
@keyframes opu-pfxp-rise { from { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } to { transform: translate(-12px, -180px); opacity: 0; } }

/* LITE MODE ("Reduce effects" in the palette menu, automatic on weak devices): no moving background, no particles, no click effects */
html[data-op-lite] .op-bgfx i, html[data-op-lite] .op-pfbg::before, html[data-op-lite] .op-ticker-run { animation: none !important; }
html[data-op-lite] .op-bgfx b, html[data-op-lite] .op-bgfx em, html[data-op-lite] .op-pfx, html[data-op-lite] .op-clickfx, html[data-op-lite] .op-ripple { display: none !important; }
html[data-op-lite] img[data-op-av], html[data-op-lite] .op-frame-demo { animation: none !important; }
html[data-op-lite] .op-reveal { opacity: 1 !important; transform: none !important; }
html[data-op-lite] .op-ticker-track { overflow-x: auto; }
.op-theme-lite { display: flex; align-items: center; gap: .5rem; margin: .5rem .2rem .1rem; padding: .5rem .55rem; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .82rem; font-weight: 700; cursor: pointer; }
.op-theme-lite input { accent-color: var(--op-yellow); width: 16px; height: 16px; }
.op-theme-lite small { display: block; font-weight: 500; color: var(--op-muted); font-size: .7rem; }

/* avatar frames (qw26_34.0.2): colour via outline-color (not !important, or the animation is blocked) and glow via filter
   (box-shadow lost against the !important profile-colour shadow on .op-pf-avatar -> rainbow looked only purple) */
@keyframes opu-frame-rainbow { 0% { outline-color: #ff5e6b; filter: drop-shadow(0 0 7px #ff5e6b); } 17% { outline-color: var(--op-orange); filter: drop-shadow(0 0 7px var(--op-orange)); } 33% { outline-color: var(--op-light, #ffe066); filter: drop-shadow(0 0 7px var(--op-light, #ffe066)); }
  50% { outline-color: #3ad678; filter: drop-shadow(0 0 7px #3ad678); } 67% { outline-color: #48c6ff; filter: drop-shadow(0 0 7px #48c6ff); } 83% { outline-color: #8a7bff; filter: drop-shadow(0 0 7px #8a7bff); } 100% { outline-color: #ff5e6b; filter: drop-shadow(0 0 7px #ff5e6b); } }
@keyframes opu-frame-glow { 0%, 100% { filter: drop-shadow(0 0 4px rgba(var(--op-yellow-rgb), .55)); } 50% { filter: drop-shadow(0 0 14px rgba(var(--op-yellow-rgb), 1)); } }
@keyframes opu-frame-flame { from { outline-color: #ff5a14; filter: drop-shadow(0 -3px 7px rgba(255, 80, 20, .9)); } to { outline-color: var(--op-yellow-strong); filter: drop-shadow(0 -6px 12px rgba(255, 170, 30, .95)); } }
@keyframes opu-frame-neon { 0%, 100% { filter: drop-shadow(0 0 3px #ff5ea8) drop-shadow(0 0 8px rgba(255, 94, 168, .7)); } 50% { filter: drop-shadow(0 0 5px #ff5ea8) drop-shadow(0 0 16px rgba(255, 94, 168, .95)); } }
@keyframes opu-frame-diamond { 0%, 100% { outline-color: #7fe7ff; filter: drop-shadow(0 0 6px rgba(127, 231, 255, .7)); } 50% { outline-color: #d6b8ff; filter: drop-shadow(0 0 14px rgba(200, 160, 255, .9)); } }
.op-frame-demo-bronze { outline:3px solid #cd7f32;outline-offset:2px;filter:drop-shadow(0 0 6px rgba(205,127,50,.55)); }
.op-frame-demo-silver { outline:3px solid #dfe7f2;outline-offset:2px;filter:drop-shadow(0 0 7px rgba(217,226,238,.55)); }
.op-frame-demo-gold { outline:3px solid var(--op-yellow);outline-offset:2px;filter:drop-shadow(0 0 9px rgba(var(--op-yellow-rgb),.65)); }
.op-frame-demo-diamond { outline-style:solid;outline-width:3px;outline-offset:2px;outline-color:#7fe7ff;animation:opu-frame-diamond 2.6s ease-in-out infinite; }
.op-frame-demo-glow { outline:3px solid var(--op-yellow);outline-offset:2px;animation:opu-frame-glow 2s ease-in-out infinite; }
.op-frame-demo-rainbow { outline-style:solid;outline-width:3px;outline-offset:2px;outline-color:#ff5e6b;animation:opu-frame-rainbow 3s linear infinite; }
.op-frame-demo-flame { outline-style:solid;outline-width:3px;outline-offset:2px;outline-color:#ff7a1a;animation:opu-frame-flame .9s ease-in-out infinite alternate; }
.op-frame-demo-neon { outline:2px solid #ffd6ec;outline-offset:2px;animation:opu-frame-neon 2.4s ease-in-out infinite; }

/* qw26_34.0.2: profile header without "box around the box" and without a band across it */
.op-pf { animation: opu-pf-fade .45s ease both; } /* fade only: a transform animation made the fixed page glow stick to the container (visible edges left/right) */
@keyframes opu-pf-fade { from { opacity: 0; } to { opacity: 1; } }
.op-pf-custom .op-pf-info, .op-pf-info { background: transparent !important; }
.op-pf-custom .op-pf-header { box-shadow: 0 20px 60px color-mix(in srgb, var(--pfc) 18%, rgba(0, 0, 0, .4)) !important; }

/* qw26_34.0.3: the colour line on top of the profile header lies over the cover instead of taking its own row (left a dark gap) */
.op-pf-header { position: relative; }
.op-pf-header::before { position: absolute !important; top: 0; left: 0; right: 0; z-index: 4; margin: 0 !important; pointer-events: none; }

/* ===== chat with friends (qw26_35, templates/chat.html) ===== */
.op-chat { margin-top: 1.5rem; margin-bottom: 2rem; }
.op-chat-notice { display: flex; gap: .7rem; align-items: flex-start; padding: .8rem 1rem; margin-bottom: 1rem; border-radius: 14px; font-size: .85rem; color: var(--op-text);
  background: rgba(var(--op-orange-rgb, 255, 170, 40), .08); border: 1px solid rgba(var(--op-orange-rgb, 255, 170, 40), .3); }
.op-chat-notice i { color: var(--op-orange); margin-top: .15rem; }
.op-chat-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1rem; height: min(72vh, 720px); }
.op-chat-side { display: flex; flex-direction: column; min-height: 0; padding: .9rem; border-radius: 20px; background: var(--op-card); border: 1px solid rgba(255, 255, 255, .06); overflow-y: auto; }
.op-chat-side-head { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--op-muted); margin-bottom: .5rem; }
.op-chat-item { display: flex; align-items: center; gap: .65rem; padding: .55rem .6rem; border-radius: 12px; color: var(--op-text); text-decoration: none; transition: background .2s; }
.op-chat-item:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.op-chat-item.active { background: rgba(var(--op-yellow-rgb), .1); box-shadow: inset 3px 0 0 var(--op-yellow); }
.op-chat-item img, .op-chat-friend img { width: 38px; height: 38px; border-radius: 11px; object-fit: cover; flex-shrink: 0; }
.op-chat-item-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.op-chat-item-txt strong { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-chat-item-txt small { font-size: .75rem; color: var(--op-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-chat-unread { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center; font-size: .7rem; color: #fff; background: #ff4e5b; }
.op-chat-friends { display: flex; flex-direction: column; gap: .15rem; }
.op-chat-friend { display: flex; align-items: center; gap: .6rem; padding: .4rem .6rem; border-radius: 12px; color: var(--op-text); text-decoration: none; font-weight: 700; font-size: .88rem; }
.op-chat-friend:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.op-chat-friend img { width: 30px; height: 30px; border-radius: 9px; }
.op-chat-empty { font-size: .82rem; color: var(--op-muted); margin: .2rem .3rem .6rem; }
.op-chat-main { display: flex; flex-direction: column; min-height: 0; border-radius: 20px; background: var(--op-card); border: 1px solid rgba(255, 255, 255, .06); overflow: hidden; }
.op-chat-head { display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.op-chat-head img { width: 42px; height: 42px; border-radius: 12px; object-fit: cover; }
.op-chat-head a { font-family: var(--op-font-display); font-weight: 900; font-size: 1.1rem; color: #fff; text-decoration: none; }
.op-chat-head small { margin-left: auto; color: var(--op-muted); font-size: .75rem; }
.op-chat-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .45rem; }
.op-chat-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 75%; }
.op-chat-msg.mine { align-self: flex-end; align-items: flex-end; }
.op-chat-bubble { padding: .55rem .85rem; border-radius: 16px 16px 16px 4px; background: rgba(255, 255, 255, .07); color: var(--op-text); white-space: pre-wrap; word-break: break-word; }
.op-chat-msg.mine .op-chat-bubble { border-radius: 16px 16px 4px 16px; color: rgb(var(--op-dk-22-20-12, 22, 20, 12)); background: linear-gradient(135deg, var(--op-yellow), var(--op-orange)); font-weight: 600; }
.op-chat-msg small { font-size: .65rem; color: var(--op-muted); margin: .15rem .4rem 0; }
.op-chat-none, .op-chat-loading { margin: auto; color: var(--op-muted); }
.op-chat-form { display: flex; gap: .5rem; padding: .8rem; border-top: 1px solid rgba(255, 255, 255, .06); }
.op-chat-form input { flex: 1; min-width: 0; padding: .65rem 1rem; border-radius: 999px; border: 1px solid var(--op-border); background: rgba(0, 0, 0, .3); color: #fff; outline: none; }
.op-chat-form input:focus { border-color: var(--op-yellow); }
.op-chat-form .op-btn { border-radius: 999px; padding: .6rem 1.1rem; }
.op-chat-blocked { padding: .9rem 1rem; border-top: 1px solid rgba(255, 255, 255, .06); color: var(--op-muted); font-size: .88rem; }
.op-chat-welcome { margin: auto; text-align: center; padding: 2rem; color: var(--op-muted); }
.op-chat-welcome i { font-size: 2.6rem; color: var(--op-yellow); margin-bottom: .8rem; }
.op-chat-welcome h2 { font-family: var(--op-font-display); font-weight: 900; color: #fff; font-size: 1.5rem; }
.op-chat-btn { margin-right: .4rem; text-decoration: none; }
.op-chat-btn:hover { color: var(--op-yellow); background: rgba(var(--op-yellow-rgb), .1); }
.op-chat-btn .op-bell-count[hidden] { display: none; }
@media (max-width: 767.98px) {
  .op-chat-grid { grid-template-columns: 1fr; height: auto; }
  .op-chat-side { max-height: 260px; }
  .op-chat-main { height: 70vh; }
}

/* ===== chat extras (qw26_35.0.1): emoji, photos, read ticks, pop-ups ===== */
.op-chat-form { position: relative; align-items: center; }
.op-chat-tool { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; margin: 0; cursor: pointer; font-size: 1.1rem;
  color: var(--op-muted); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); transition: color .2s, background .2s; }
.op-chat-tool:hover { color: var(--op-yellow); background: rgba(var(--op-yellow-rgb), .1); }
.op-chat-tool.busy { pointer-events: none; opacity: .6; }
.op-chat-tool.busy i::before { content: "\f110"; font-family: "Font Awesome 6 Free"; font-weight: 900; display: inline-block; animation: fa-spin 1s linear infinite; }
.op-chat-emojis { position: absolute; left: .8rem; bottom: calc(100% + .4rem); z-index: 5; width: min(340px, calc(100% - 1.6rem)); display: grid; grid-template-columns: repeat(10, 1fr); gap: .15rem;
  padding: .5rem; border-radius: 16px; background: rgb(var(--op-dk-27-23-14, 27, 23, 14)); border: 1px solid var(--op-border-strong); box-shadow: 0 14px 40px rgba(0, 0, 0, .5); }
.op-chat-emojis[hidden] { display: none; }
.op-chat-emojis button { border: 0; background: transparent; font-size: 1.25rem; line-height: 1; padding: .25rem; border-radius: 8px; cursor: pointer; transition: transform .15s, background .15s; }
.op-chat-emojis button:hover { background: rgba(255, 255, 255, .08); transform: scale(1.2); }
.op-chat-bubble.is-photo { padding: .3rem; background: rgba(255, 255, 255, .05) !important; }
.op-chat-photo img { display: block; max-width: min(320px, 60vw); max-height: 320px; border-radius: 12px; object-fit: cover; }
.op-chat-tick { margin-left: .25rem; color: var(--op-muted); }
.op-chat-msg.read .op-chat-tick { color: #48c6ff; }

/* pop-up for new messages / notifications (bottom left, with sound) */
.op-pop { position: fixed; left: 1.2rem; bottom: 1.2rem; z-index: 3700; display: flex; align-items: center; gap: .75rem; max-width: min(380px, calc(100vw - 2.4rem));
  padding: .8rem 1rem; border-radius: 16px; text-decoration: none; color: var(--op-text); background: rgba(var(--op-dk-24-20-12, 24, 20, 12), .97); border: 1px solid var(--op-border-strong);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55); animation: opu-toast-in .45s cubic-bezier(.2, 1.3, .4, 1) both; }
.op-pop:hover { color: #fff; border-color: var(--op-yellow); }
.op-pop > i { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; color: rgb(var(--op-dk-22-20-12, 22, 20, 12)); }
.op-pop span { min-width: 0; display: flex; flex-direction: column; }
.op-pop strong { font-size: .9rem; } .op-pop small { font-size: .78rem; color: var(--op-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-pop.out { animation: opu-toast-away .35s ease forwards; }

/* voice messages (qw26_35.0.2) */
.op-chat-mic.recording { color: #fff; background: #ff4e5b; border-color: #ff4e5b; animation: op-pulse-ring 1.4s ease-out infinite; }
.op-chat-mic.recording i::before { content: "\f1d8"; }
.op-chat-mic.busy { pointer-events: none; opacity: .6; }
.op-chat-rec { flex: 1; min-width: 0; display: flex; align-items: center; gap: .6rem; padding: .55rem 1rem; border-radius: 999px; background: rgba(255, 78, 91, .12); border: 1px solid rgba(255, 78, 91, .4); }
.op-chat-rec[hidden] { display: none; }
.op-chat-rec b { font-variant-numeric: tabular-nums; color: #fff; }
.op-chat-rec small { flex: 1; min-width: 0; color: var(--op-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff4e5b; animation: opu-twinkle .8s ease-in-out infinite alternate; }
.op-rec-cancel { border: 0; background: transparent; color: var(--op-muted); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.op-rec-cancel:hover { color: #fff; }
.op-chat-bubble.is-voice { padding: .35rem .5rem; }
.op-chat-voice { display: flex; align-items: center; gap: .5rem; }
.op-chat-voice > i { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .25); }
.op-chat-voice audio { height: 36px; width: min(260px, 55vw); }

/* ===== voice calls (qw26_35.0.3) ===== */
.op-chat-callbtn { width: 40px; height: 40px; margin-left: .6rem; display: grid; place-items: center; border-radius: 50%; border: 0; cursor: pointer; font-size: 1rem;
  color: #0e1a10; background: #3ad678; box-shadow: 0 6px 18px rgba(58, 214, 120, .35); transition: transform .2s var(--op-ease); }
.op-chat-callbtn:hover { transform: scale(1.08) rotate(-8deg); }
.op-call { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 3800; display: flex; align-items: center; gap: .8rem; width: min(360px, calc(100vw - 2.4rem));
  padding: .9rem 1rem; border-radius: 20px; background: rgba(var(--op-dk-22-19-11, 22, 19, 11), .98); border: 1px solid var(--op-border-strong); box-shadow: 0 20px 50px rgba(0, 0, 0, .6);
  animation: opu-toast-in .45s cubic-bezier(.2, 1.3, .4, 1) both; }
.op-call > img { width: 52px; height: 52px; border-radius: 16px; object-fit: cover; flex-shrink: 0; }
.op-call-incoming > img { animation: opu-call-ring 1.2s ease-in-out infinite; }
@keyframes opu-call-ring { 0%, 100% { transform: rotate(0); } 10% { transform: rotate(-8deg); } 20% { transform: rotate(8deg); } 30% { transform: rotate(-5deg); } 40% { transform: rotate(0); } }
.op-call-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.op-call-txt strong { font-family: var(--op-font-display); font-weight: 900; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-call-txt small { color: var(--op-muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.op-call-active .op-call-txt small { color: #3ad678; }
.op-call-btns { display: flex; gap: .45rem; }
.op-call-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 0; cursor: pointer; font-size: 1rem; color: #fff; transition: transform .2s var(--op-ease), filter .2s; }
.op-call-btn:hover { transform: scale(1.1); }
.op-call-btn.ok { background: #3ad678; color: #0e1a10; animation: op-pulse-ring 1.4s ease-out infinite; }
.op-call-btn.no { background: #ff4e5b; }
.op-call-btn.mute { background: rgba(255, 255, 255, .1); }
.op-call-btn.mute.on { background: var(--op-orange); color: rgb(var(--op-dk-22-20-12, 22, 20, 12)); }

/* ===== calls v2 (qw26_36.0.1): centered ringing screen, nicer buttons ===== */
.op-callmodal { position: fixed; inset: 0; z-index: 3900; display: grid; place-items: center; padding: 1rem;
  background: radial-gradient(circle at 50% 40%, rgba(58, 214, 120, .14), rgba(6, 5, 2, .82) 60%); animation: opu-pf-fade .25s ease both; }
.op-call-calling.op-callmodal { background: radial-gradient(circle at 50% 40%, rgba(var(--op-yellow-rgb), .14), rgba(6, 5, 2, .82) 60%); }
.op-callcard { display: flex; flex-direction: column; align-items: center; gap: .35rem; width: min(360px, 100%); padding: 2.2rem 1.6rem 1.6rem; border-radius: 28px; text-align: center;
  background: linear-gradient(180deg, rgba(var(--op-dk-34-29-17, 34, 29, 17), .98), rgba(var(--op-dk-18-15-9, 18, 15, 9), .98)); border: 1px solid var(--op-border-strong); box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  animation: op-pop .45s var(--op-ease) both; }
.op-callav { position: relative; width: 118px; height: 118px; margin-bottom: 1rem; }
.op-callav img { position: relative; z-index: 2; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 4px solid rgba(255, 255, 255, .12); }
.op-callav i { position: absolute; inset: 0; border-radius: 50%; border: 3px solid #3ad678; animation: opu-call-wave 1.8s ease-out infinite; }
.op-callav i + i { animation-delay: .9s; }
.op-call-calling .op-callav i { border-color: var(--op-yellow); }
@keyframes opu-call-wave { from { transform: scale(1); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
.op-callcard strong { font-family: var(--op-font-display); font-weight: 900; font-size: 1.6rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-callcard small { color: var(--op-muted); font-size: .92rem; margin-bottom: 1.2rem; }
.op-callcard .op-call-btns { gap: 2.2rem; margin-bottom: 1.3rem; }
.op-callcard .op-call-btn { width: 68px; height: 68px; font-size: 1.5rem; }
.op-call-btn { position: relative; display: grid; place-items: center; border-radius: 50%; border: 0; cursor: pointer; color: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .2s var(--op-ease), box-shadow .2s; }
.op-call-btn:hover { transform: translateY(-3px) scale(1.06); }
.op-call-btn span { position: absolute; top: calc(100% + .45rem); left: 50%; transform: translateX(-50%); font-size: .75rem; font-weight: 700; color: var(--op-muted); white-space: nowrap; }
.op-call-btn.ok { background: linear-gradient(135deg, #4ee68c, #22b862); color: #fff; animation: opu-accept 1.6s ease-in-out infinite; }
.op-call-btn.ok i { animation: opu-call-ring 1.2s ease-in-out infinite; }
@keyframes opu-accept { 0%, 100% { box-shadow: 0 10px 24px rgba(0, 0, 0, .35), 0 0 0 0 rgba(58, 214, 120, .55); } 50% { box-shadow: 0 10px 24px rgba(0, 0, 0, .35), 0 0 0 14px rgba(58, 214, 120, 0); } }
.op-call-btn.no { background: linear-gradient(135deg, #ff6b75, #e5323f); }
.op-call-btn.mute { background: rgba(255, 255, 255, .1); }
.op-call-btn.mute.on { background: linear-gradient(135deg, var(--op-yellow-strong), var(--op-orange)); color: rgb(var(--op-dk-22-20-12, 22, 20, 12)); }
.op-call { padding: .7rem .8rem .7rem .7rem; border-radius: 999px; border-color: rgba(58, 214, 120, .45); box-shadow: 0 20px 50px rgba(0, 0, 0, .6), 0 0 24px rgba(58, 214, 120, .2); }
.op-call > img { width: 46px; height: 46px; border-radius: 50%; }
.op-call .op-call-btn { width: 42px; height: 42px; font-size: .95rem; }
.op-chat-callbtn { width: auto; height: 38px; padding: 0 1rem 0 .85rem; gap: .45rem; display: inline-flex; align-items: center; border-radius: 999px; font-weight: 800; font-size: .85rem;
  color: #fff; background: linear-gradient(135deg, #4ee68c, #22b862); box-shadow: 0 8px 20px rgba(58, 214, 120, .3), inset 0 1px 0 rgba(255, 255, 255, .3); }
.op-chat-callbtn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(58, 214, 120, .4), inset 0 1px 0 rgba(255, 255, 255, .3); }
.op-chat-callbtn::after { content: "Call"; }
.op-chat-notify { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; width: 100%; margin-bottom: .8rem; padding: .6rem .8rem; border-radius: 12px; border: 1px dashed rgba(58, 214, 120, .5);
  background: rgba(58, 214, 120, .08); color: #3ad678; font-weight: 800; font-size: .85rem; text-align: left; cursor: pointer; }
.op-chat-notify[hidden] { display: none; }
.op-chat-notify small { color: var(--op-muted); font-weight: 500; font-size: .72rem; }
/* chat header button during a call: red "Hang up" (qw26_36.0.4) */
.op-chat-callbtn.in-call { background: linear-gradient(135deg, #ff6b75, #e5323f); box-shadow: 0 8px 20px rgba(229, 50, 63, .35), inset 0 1px 0 rgba(255, 255, 255, .3); }
.op-chat-callbtn.in-call::after { content: "Hang up"; }
.op-chat-callbtn.in-call:hover { box-shadow: 0 12px 26px rgba(229, 50, 63, .45), inset 0 1px 0 rgba(255, 255, 255, .3); }

/* ===== video calls (qw26_37) ===== */
.op-chat-videobtn { margin-left: auto; background: linear-gradient(135deg, #6fb6ff, #3a7bff); box-shadow: 0 8px 20px rgba(58, 123, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .3); }
.op-chat-videobtn::after { content: "Video"; }
.op-chat-videobtn[hidden] { display: none; }
.op-chat-head .op-chat-callbtn:not(.op-chat-videobtn) { margin-left: .5rem; }
.op-chat-head small { margin-left: auto; }
.op-chat-head small + .op-chat-videobtn { margin-left: 1rem; }
.op-call-btn.audio { background: rgba(255, 255, 255, .12); }
.op-vcall { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 3850; width: min(560px, calc(100vw - 2.4rem)); aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden;
  background: rgb(var(--op-dk-11-9-6, 11, 9, 6)); border: 1px solid rgba(58, 214, 120, .45); box-shadow: 0 24px 70px rgba(0, 0, 0, .7), 0 0 30px rgba(58, 214, 120, .15); animation: opu-toast-in .45s cubic-bezier(.2, 1.3, .4, 1) both; }
.op-vcall:fullscreen { width: 100vw; height: 100vh; border-radius: 0; aspect-ratio: auto; }
.op-vcall-remote { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; opacity: 0; transition: opacity .3s; }
.op-vcall.has-remote .op-vcall-remote { opacity: 1; }
.op-vcall-noimg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; color: var(--op-muted); font-weight: 700; }
.op-vcall-noimg img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px rgba(58, 214, 120, .35); }
.op-vcall.has-remote .op-vcall-noimg { display: none; }
.op-vcall-local { position: absolute; right: .8rem; top: .8rem; width: 26%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; border: 2px solid rgba(255, 255, 255, .25);
  background: #000; transform: scaleX(-1); display: none; box-shadow: 0 8px 20px rgba(0, 0, 0, .5); }
.op-vcall.has-local .op-vcall-local { display: block; }
.op-vcall-top { position: absolute; left: 0; right: 0; top: 0; padding: .8rem 1rem 2rem; display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(0, 0, 0, .65), transparent); pointer-events: none; }
.op-vcall-top strong { font-family: var(--op-font-display); font-weight: 900; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
.op-vcall-top small { color: #3ad678; font-size: .8rem; font-variant-numeric: tabular-nums; }
.op-vcall-btns { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: .7rem; padding: 2.2rem 1rem .9rem; background: linear-gradient(0deg, rgba(0, 0, 0, .7), transparent); }
.op-vcall-btns .op-call-btn { width: 48px; height: 48px; font-size: 1.05rem; }
@media (max-width: 575.98px) { .op-vcall { right: .6rem; left: .6rem; bottom: .6rem; width: auto; } }
/* call: short network drop (qw26_37.0.1) */
.op-vcall.reconnecting::after, .op-call.reconnecting::after { content: "Reconnecting…"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: .4rem .9rem; border-radius: 999px;
  font-size: .8rem; font-weight: 800; color: rgb(var(--op-dk-22-20-12, 22, 20, 12)); background: var(--op-orange); z-index: 3; }
.op-call.reconnecting { position: fixed; }
/* relayed call (qw26_37.0.2): pictures come as images */
.op-vcall-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; display: none; }
.op-vcall.relay .op-vcall-img { display: block; }
.op-vcall.relay:not(.has-remote) .op-vcall-img { display: none; }
.op-vcall.relay .op-vcall-remote { display: none; }

/* ===== chat: stickers, reactions, typing, picture preview (qw26_38) ===== */
.op-chat-bubble { position: relative; }
.op-chat-bubble.is-sticker { background: transparent !important; padding: 0; box-shadow: none; }
.op-chat-sticker { display: block; width: 132px; height: 132px; transition: transform .2s var(--op-ease); }
.op-chat-sticker:hover { transform: scale(1.06) rotate(-3deg); }
.op-react-btn { position: absolute; top: 50%; right: -38px; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; color: var(--op-muted); background: rgba(255, 255, 255, .06); opacity: 0; transition: opacity .15s; }
.op-chat-msg.mine .op-react-btn { right: auto; left: -38px; }
.op-chat-msg:hover .op-react-btn, .op-react-btn:focus { opacity: 1; }
.op-react-btn:hover { color: var(--op-yellow); background: rgba(var(--op-yellow-rgb), .12); }
.op-react-pick { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 6; display: flex; gap: .15rem; padding: .3rem; border-radius: 999px;
  background: rgb(var(--op-dk-31-26-16, 31, 26, 16)); border: 1px solid var(--op-border-strong); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); animation: op-pop .25s var(--op-ease) both; }
.op-chat-msg.mine .op-react-pick { left: auto; right: 0; }
.op-react-pick button { border: 0; background: transparent; font-size: 1.3rem; line-height: 1; padding: .2rem .25rem; border-radius: 50%; cursor: pointer; transition: transform .15s; }
.op-react-pick button:hover { transform: scale(1.3); }
.op-reacts { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .2rem; }
.op-reacts:empty { display: none; }
.op-react { border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .06); color: var(--op-text); border-radius: 999px; padding: .05rem .45rem; font-size: .85rem; cursor: pointer; }
.op-react.mine { border-color: var(--op-yellow); background: rgba(var(--op-yellow-rgb), .15); }
.op-chat-typing { display: flex; align-items: center; gap: .25rem; padding: .2rem 1rem .4rem; font-size: .78rem; color: var(--op-muted); }
.op-chat-typing[hidden] { display: none; }
.op-chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--op-yellow); animation: opu-typing 1s ease-in-out infinite; }
.op-chat-typing span:nth-child(2) { animation-delay: .15s; } .op-chat-typing span:nth-child(3) { animation-delay: .3s; margin-right: .3rem; }
@keyframes opu-typing { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.op-chat-stickers { position: absolute; left: .8rem; bottom: calc(100% + .4rem); z-index: 5; width: min(420px, calc(100% - 1.6rem)); max-height: 300px; overflow-y: auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; padding: .6rem; border-radius: 18px; background: rgb(var(--op-dk-27-23-14, 27, 23, 14)); border: 1px solid var(--op-border-strong); box-shadow: 0 14px 40px rgba(0, 0, 0, .5); }
.op-chat-stickers[hidden] { display: none; }
.op-chat-stickers button { border: 0; background: transparent; padding: .2rem; border-radius: 12px; cursor: pointer; transition: transform .15s, background .15s; }
.op-chat-stickers button:hover { background: rgba(255, 255, 255, .06); transform: scale(1.08) rotate(-3deg); }
.op-chat-stickers img { width: 100%; height: auto; display: block; }
.op-chat-preview { position: absolute; left: .8rem; right: .8rem; bottom: calc(100% + .4rem); z-index: 5; display: flex; align-items: center; gap: .8rem; padding: .7rem;
  border-radius: 18px; background: rgb(var(--op-dk-27-23-14, 27, 23, 14)); border: 1px solid var(--op-border-strong); box-shadow: 0 14px 40px rgba(0, 0, 0, .5); animation: op-pop .3s var(--op-ease) both; }
.op-chat-preview[hidden] { display: none; }
.op-chat-preview img { width: 96px; height: 96px; object-fit: cover; border-radius: 12px; flex-shrink: 0; background: #000; }
.op-chat-preview > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.op-chat-preview small { color: var(--op-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-react-pick { position: fixed !important; bottom: auto !important; right: auto !important; z-index: 3700 !important; }

/* qw26_38: emoji panel stays inside its box (grid cells could grow wider than the panel) */
.op-chat-emojis { width: min(360px, calc(100% - 1.6rem)); grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); max-height: 240px; overflow-y: auto; overflow-x: hidden; box-sizing: border-box; }
.op-chat-emojis button { width: 100%; min-width: 0; height: 34px; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; overflow: hidden; }
.op-chat-emojis button:hover { transform: scale(1.12); }

/* qw26_38: blue = has the website open right now (green stays in-game online) */
.op-chat-av { position: relative; display: inline-flex; flex-shrink: 0; }
.op-web-dot { position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%; background: #3b9dff; border: 2px solid rgb(var(--op-dk-20-18-9, 20, 18, 9)); box-shadow: 0 0 8px rgba(59, 157, 255, .7); }
.op-web-dot[hidden] { display: none; }
.op-web-txt { color: #7cc0ff; font-weight: 700; }
.op-web-txt::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #3b9dff; margin-right: .35rem; vertical-align: middle; }
.op-pf-online.op-web { background: #3b9dff; animation-name: opu-web-ring; }
.op-pf-tag.op-pf-status.op-web { color: #7cc0ff; }
.op-pf-tag.op-pf-status.op-web .op-dot { background: #3b9dff; animation-name: opu-web-ring; }
@keyframes opu-web-ring { 0% { box-shadow: 0 0 0 0 rgba(59, 157, 255, .6); } 100% { box-shadow: 0 0 0 10px rgba(59, 157, 255, 0); } }
/* qw26_38.0.1: desktop notification button, green when on */
.op-chat-notify.on { border-color: rgba(58, 214, 120, .35); background: rgba(58, 214, 120, .06); }
.op-chat-notify.on, .op-chat-notify.on i { color: #7fe0a0; }
.op-chat-notify > span { display: block; }

/* qw26_38.0.2: Settings > Notifications */
.op-nset-status { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); margin-bottom: .9rem; }
.op-nset-status strong { display: block; color: #fff; }
.op-nset-status small { color: rgba(255, 255, 255, .6); }
.op-nset-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; background: rgba(255, 255, 255, .3); }
[data-state="on"] .op-nset-dot { background: #3ad678; box-shadow: 0 0 10px rgba(58, 214, 120, .7); }
[data-state="on"] .op-nset-status { border-color: rgba(58, 214, 120, .3); background: rgba(58, 214, 120, .06); }
[data-state="blocked"] .op-nset-dot, [data-state="no"] .op-nset-dot { background: #ff5c5c; }
[data-state="ask"] .op-nset-dot, [data-state="off"] .op-nset-dot { background: var(--op-yellow); }
.op-nset-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.op-nset-count { margin: .9rem 0 0; color: rgba(255, 255, 255, .55); font-size: .85rem; }
.op-nset-count i { margin-right: .35rem; }
.op-nset-help { margin-top: .8rem; border-radius: 12px; background: rgba(0, 0, 0, .2); padding: .6rem .9rem; }
.op-nset-help summary { cursor: pointer; color: rgba(255, 255, 255, .8); font-weight: 700; }
.op-nset-help summary i { color: var(--op-yellow); margin-right: .35rem; }
.op-nset-help ul { margin: .6rem 0 .2rem; padding-left: 1.1rem; color: rgba(255, 255, 255, .7); font-size: .88rem; }
.op-nset-help li { margin: .3rem 0; }
.op-nset-list { display: flex; flex-direction: column; gap: .5rem; }
.op-nset-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem .95rem; border-radius: 14px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .06); cursor: pointer; transition: border-color .2s, background .2s; }
.op-nset-row:hover { border-color: var(--op-border); background: rgba(255, 255, 255, .05); }
.op-nset-row > span:first-child { display: grid; grid-template-columns: 30px 1fr; column-gap: .5rem; align-items: center; min-width: 0; }
.op-nset-row > span:first-child i { grid-row: span 2; color: var(--op-yellow); font-size: 1.05rem; text-align: center; }
.op-nset-row b { color: #fff; }
.op-nset-row small { color: rgba(255, 255, 255, .55); }
.op-nset-list > .op-btn { align-self: flex-start; margin-top: .4rem; }
.op-chat-nset { display: block; margin: -.2rem 0 .8rem; font-size: .8rem; color: rgba(255, 255, 255, .55); text-decoration: none; }
.op-chat-nset:hover { color: var(--op-yellow); }
.op-chat-nset i { margin-right: .3rem; }

/* ===== qw26_39: group chats ===== */
.op-chat-side-head { display: flex; align-items: center; gap: .4rem; }
.op-chat-newgroup { margin-left: auto; border: 1px solid var(--op-border); background: rgba(var(--op-yellow-rgb), .08); color: var(--op-yellow); border-radius: 999px; padding: .15rem .6rem; font-size: .68rem; font-weight: 800; letter-spacing: .06em; cursor: pointer; }
.op-chat-newgroup:hover { background: rgba(var(--op-yellow-rgb), .18); }
.op-chat-gicon { --gc: var(--op-yellow); width: 38px; height: 38px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem;
  background: color-mix(in srgb, var(--gc) 22%, rgb(var(--op-dk-27-23-14, 27, 23, 14))); border: 1px solid color-mix(in srgb, var(--gc) 55%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--gc) 25%, transparent); }
.op-chat-gicon-lg { width: 44px; height: 44px; font-size: 1.4rem; }
.op-chat-gname { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; min-width: 0; display: flex; flex-direction: column; }
.op-chat-gname span { font-family: var(--op-font-display); font-weight: 900; font-size: 1.1rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-chat-head .op-chat-gname small { margin-left: 0; }
.op-chat-gfaces { margin-left: auto; display: flex; cursor: pointer; }
.op-chat-head .op-chat-gfaces img { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgb(var(--op-dk-27-23-14, 27, 23, 14)); margin-left: -8px; }
.op-chat-gbtn { background: rgba(var(--op-yellow-rgb), .12) !important; color: var(--op-yellow) !important; border: 1px solid var(--op-border) !important; box-shadow: none !important; }
@media (max-width: 600px) { .op-chat-gfaces { display: none; } .op-chat-gbtn span { display: none; } .op-chat-gbtn { margin-left: auto !important; } }
.op-chat-sys { align-self: center; margin: .4rem auto; padding: .25rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .05); color: var(--op-muted); font-size: .76rem; text-align: center; max-width: 90%; }
.op-chat-from { display: flex; align-items: center; gap: .4rem; margin: .5rem 0 .2rem; font-size: .78rem; font-weight: 800; }
.op-chat-from img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.op-chat-from a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.op-chat-from a:hover { color: var(--op-yellow); }
.op-chat-welcome .op-btn { margin-top: 1rem; }

.op-gmodal { position: fixed; inset: 0; z-index: 3500; display: grid; place-items: center; padding: 16px; background: rgba(var(--op-dk-8-6-3, 8, 6, 3), .72); animation: opu-fade-in .15s ease; }
.op-gmodal[hidden] { display: none; }
.op-gmodal-box { position: relative; width: min(460px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 1.3rem 1.3rem 1.1rem; border-radius: 22px;
  background: rgb(var(--op-dk-27-23-14, 27, 23, 14)); border: 1px solid var(--op-border-strong); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); display: flex; flex-direction: column; gap: .8rem; }
.op-gmodal-box h3 { margin: 0; font-family: var(--op-font-display); font-weight: 900; font-size: 1.25rem; color: #fff; display: flex; align-items: center; gap: .6rem; padding-right: 2rem; }
.op-gmodal-box h3 > i { color: var(--op-yellow); }
.op-gmodal-x { position: absolute; top: .7rem; right: .8rem; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .06); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.op-gmodal-x:hover { background: rgba(255, 255, 255, .14); }
.op-gmodal-label { margin: .2rem 0 0; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--op-muted); }
.op-gmodal-label small { text-transform: none; letter-spacing: 0; font-weight: 600; }
.op-gmodal-err { margin: 0; padding: .5rem .8rem; border-radius: 10px; background: rgba(255, 92, 92, .12); color: #ff8a8a; font-size: .85rem; }
.op-gicon-pick { display: flex; flex-wrap: wrap; gap: .3rem; }
.op-gicon-pick button { width: 36px; height: 36px; border-radius: 10px; border: 1px solid transparent; background: rgba(255, 255, 255, .04); font-size: 1.15rem; cursor: pointer; transition: transform .15s, background .15s; }
.op-gicon-pick button:hover { transform: scale(1.1); }
.op-gicon-pick button.on { border-color: var(--op-yellow); background: rgba(var(--op-yellow-rgb), .15); }
.op-gcolor-pick { display: flex; gap: .4rem; }
.op-gcolor-pick button { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; background: var(--gc); cursor: pointer; }
.op-gcolor-pick button.on { border-color: #fff; box-shadow: 0 0 0 2px var(--gc); }
.op-gpick { display: flex; flex-direction: column; gap: .3rem; max-height: 240px; overflow-y: auto; }
.op-gpick label { display: flex; align-items: center; gap: .6rem; padding: .4rem .6rem; border-radius: 12px; cursor: pointer; background: rgba(255, 255, 255, .03); border: 1px solid transparent; transition: background .15s, border-color .15s; }
.op-gpick label:hover { background: rgba(255, 255, 255, .06); }
.op-gpick input { display: none; }
.op-gpick img { width: 30px; height: 30px; border-radius: 9px; object-fit: cover; }
.op-gpick span { flex: 1; min-width: 0; color: #fff; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-gpick label > i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; color: transparent; border: 2px solid rgba(255, 255, 255, .2); }
.op-gpick label:has(input:checked) { border-color: var(--op-border); background: rgba(var(--op-yellow-rgb), .08); }
.op-gpick label:has(input:checked) > i { background: var(--op-yellow); border-color: var(--op-yellow); color: rgb(var(--op-dk-27-23-12, 27, 23, 12)); }
.op-gedit { display: flex; flex-direction: column; gap: .6rem; padding: .8rem; border-radius: 14px; background: rgba(255, 255, 255, .03); }
.op-gedit .op-btn { align-self: flex-start; }
.op-gmembers { display: flex; flex-direction: column; gap: .25rem; }
.op-gmember { display: flex; align-items: center; gap: .5rem; padding: .3rem .4rem; border-radius: 10px; }
.op-gmember:hover { background: rgba(255, 255, 255, .04); }
.op-gmember a { display: flex; align-items: center; gap: .55rem; flex: 1; min-width: 0; color: #fff; font-weight: 700; text-decoration: none; }
.op-gmember a img { width: 30px; height: 30px; border-radius: 9px; object-fit: cover; }
.op-gowner { font-style: normal; font-size: .72rem; font-weight: 800; color: var(--op-yellow); }
.op-gkick { border: 0; background: rgba(255, 92, 92, .1); color: #ff8a8a; width: 30px; height: 30px; border-radius: 9px; cursor: pointer; }
.op-gkick:hover { background: rgba(255, 92, 92, .25); }
.op-gleave { align-self: flex-start; margin-top: .3rem; }
@keyframes opu-fade-in { from { opacity: 0; } to { opacity: 1; } }
.op-chat-gbtn::after { content: none !important; }
.op-gmodal-box, .op-gmodal-box * { box-sizing: border-box; }
.op-gmodal-box { padding: 1.3rem 1.3rem 1.1rem !important; margin: 0; }
.op-chat-notify small { display: block; }
.op-chat-welcome .op-btn { display: inline-flex; align-items: center; gap: .5rem; } .op-chat-welcome .op-btn i { font-size: 1rem; color: inherit; margin: 0; }

/* qw26_39.0.2: phones could scroll sideways (grid columns grew with long unbroken text) */
.op-activity { grid-template-columns: minmax(0, 1fr); }
.op-activity-item { min-width: 0; }
.op-daily-grid { grid-template-columns: minmax(0, 1fr) 330px; }
.op-daily-grid > * { min-width: 0; }
@media (max-width: 900px) { .op-daily-grid { grid-template-columns: minmax(0, 1fr); } }
.op-pager { flex-wrap: wrap; justify-content: center; max-width: 100%; }

/* ===== qw26_40: /download (Kuroosu Launcher) ===== */
.op-dl { max-width: 1060px; padding-bottom: 3rem; }
.op-dl-hero { display: flex; align-items: center; gap: 2.4rem; padding: 2.4rem; border-radius: 28px; margin-bottom: 1.4rem;
  background: radial-gradient(900px 400px at 0% 0%, rgba(var(--op-yellow-rgb), .14), transparent 60%), rgb(var(--op-dk-27-23-14, 27, 23, 14)); border: 1px solid var(--op-border); }
.op-dl-icon { width: 190px; height: 190px; flex-shrink: 0; border-radius: 42px; box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 60px rgba(var(--op-orange-rgb, 255, 159, 28), .25); }
.op-dl-txt { min-width: 0; }
.op-dl-kicker { display: inline-flex; align-items: center; gap: .45rem; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--op-muted); }
.op-dl-hero h1 { font-family: var(--op-font-display); font-weight: 900; font-size: clamp(2rem, 4vw, 3rem); color: #fff; margin: .3rem 0 .6rem; }
.op-dl-hero p { color: rgba(255, 255, 255, .78); font-size: 1.05rem; max-width: 560px; }
.op-dl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin: 1.2rem 0 .6rem; }
.op-dl-btn { display: inline-flex !important; align-items: center; gap: .8rem; padding: .8rem 1.6rem !important; font-size: 1.15rem !important; border-radius: 16px !important; }
.op-dl-btn i { font-size: 1.3rem; }
.op-dl-btn span { display: flex; flex-direction: column; line-height: 1.15; text-align: left; font-weight: 900; }
.op-dl-btn small { font-size: .72rem; font-weight: 700; opacity: .75; }
.op-dl-small { font-size: .82rem !important; color: var(--op-muted) !important; }
.op-dl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; margin-bottom: 1.4rem; }
.op-dl-feat { padding: 1.1rem 1.2rem; border-radius: 18px; background: rgb(var(--op-dk-27-23-14, 27, 23, 14)); border: 1px solid rgba(255, 255, 255, .06); display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.op-dl-feat i { --c: var(--op-yellow); width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); margin-bottom: .3rem; font-size: 1.05rem; }
.op-dl-feat strong { color: #fff; font-family: var(--op-font-display); font-weight: 900; }
.op-dl-feat small { color: var(--op-muted); line-height: 1.45; }
.op-dl-card { padding: 1.3rem 1.4rem; border-radius: 20px; background: rgb(var(--op-dk-27-23-14, 27, 23, 14)); border: 1px solid rgba(255, 255, 255, .06); margin-bottom: 1rem; }
.op-dl-card h2 { font-family: var(--op-font-display); font-weight: 900; font-size: 1.2rem; color: #fff; display: flex; align-items: center; gap: .6rem; }
.op-dl-card h2 i { color: var(--op-yellow); }
.op-dl-card p { color: rgba(255, 255, 255, .75); }
.op-dl-steps { list-style: none; padding: 0; margin: .6rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.op-dl-steps li { flex: 1 1 200px; display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; border-radius: 14px; background: rgba(255, 255, 255, .03); color: rgba(255, 255, 255, .85); }
.op-dl-steps span { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: rgb(var(--op-dk-27-20-6, 27, 20, 6)); background: linear-gradient(135deg, var(--op-yellow), var(--op-orange)); }
.op-dl-faq details { border-top: 1px solid rgba(255, 255, 255, .06); padding: .75rem 0; }
.op-dl-faq details:first-child { border-top: 0; }
.op-dl-faq summary { cursor: pointer; font-weight: 800; color: #fff; }
.op-dl-faq p { margin: .5rem 0 0; }
@media (max-width: 900px) { .op-dl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .op-dl-hero { flex-direction: column; text-align: center; padding: 1.6rem 1.2rem; } .op-dl-icon { width: 130px; height: 130px; border-radius: 30px; } .op-dl-actions { justify-content: center; } .op-dl-grid { grid-template-columns: minmax(0, 1fr); } }
.op-dl-steps em { font-style: normal; }
/* qw26_41.0.2: launcher download locked (coming soon) */
.op-dl-locked { cursor: not-allowed; background: rgba(255, 255, 255, .06) !important; color: rgba(255, 255, 255, .7) !important; border: 1px dashed rgba(var(--op-yellow-rgb), .45) !important; box-shadow: none !important; }
.op-dl-locked i { color: var(--op-yellow); }

/* ===== Wide layout (qw26_41.6): pages grow up to 2100 px on big screens instead of 1320/1600 ===== */
@media (min-width: 1700px) {
  .container { max-width: min(2100px, calc(100vw - 5rem)); }
  .op-nav .container-fluid, .op-home .container-xxl { max-width: min(2100px, calc(100vw - 5rem)); padding-inline: 0; }
}

/* home banner: text + stats left, trailer card right (the trailer used to be its own section) */
.op-banner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px); grid-template-rows: 1fr auto; column-gap: 2rem; }
.op-banner-in { grid-column: 1; grid-row: 1; }
.op-banner-stats { grid-column: 1; grid-row: 2; }
.op-banner-trailer { grid-column: 2; grid-row: 1 / 3; align-self: center; position: relative; z-index: 1; margin: 2rem 2.4rem 2rem 0; }
.op-banner-trailer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; font-size: .75rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; }
.op-banner-trailer-head span { color: #ff5e6b; }
.op-banner-trailer-head a { color: var(--op-muted); text-decoration: none; letter-spacing: .04em; }
.op-banner-trailer-head a:hover { color: #fff; }
.op-banner-trailer .op-trailer-player { box-shadow: 0 20px 50px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .1); }
.op-banner-trailer .op-trailer-poster img { filter: brightness(.82); }
.op-banner-trailer .op-trailer-btn { width: 68px; height: 68px; margin: -34px 0 0 -34px; font-size: 1.5rem; }
.op-banner-shade { background: linear-gradient(90deg, rgba(var(--op-dk-10-9-5, 10, 9, 5), .94) 0%, rgba(var(--op-dk-10-9-5, 10, 9, 5), .8) 45%, rgba(var(--op-dk-10-9-5, 10, 9, 5), .72) 100%),
  linear-gradient(180deg, transparent 55%, rgba(var(--op-dk-10-9-5, 10, 9, 5), .9)); }
@media (max-width: 1199.98px) {
  .op-banner { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .op-banner-in, .op-banner-stats, .op-banner-trailer { grid-column: 1; grid-row: auto; }
  .op-banner-trailer { margin: 0 2.6rem 2rem; max-width: 640px; }
}
@media (max-width: 767.98px) { .op-banner-trailer { margin: 0 1.3rem 1.3rem; } }

/* home main column: spotlight + activity, then recent/best/star plays */
.op-home-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.3rem; }
.op-home-plays { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.3rem; align-items: start; }
.op-home-plays > .op-home-recent { grid-column: 1 / -1; }
.op-home-top > *, .op-home-plays > * { min-width: 0; }
@media (min-width: 1700px) {
  .op-home-top { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: stretch; }
  .op-home-plays { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .op-home-plays > .op-home-recent { grid-column: auto; }
  .op-home-grid { grid-template-columns: minmax(0, 1fr) 400px; }
}
@media (max-width: 767.98px) { .op-home-plays { grid-template-columns: minmax(0, 1fr); } }

/* server activity panel */
.op-act { display: flex; flex-direction: column; }
.op-act-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.op-act-nums > div { display: flex; flex-direction: column; padding: .55rem .8rem; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06); }
.op-act-nums strong { font-family: var(--op-font-display); font-weight: 900; font-size: 1.3rem; color: #fff; line-height: 1.1; }
.op-act-nums small { font-size: .66rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--op-muted); }
.op-act-chart { display: flex; align-items: flex-end; gap: 4px; height: 110px; flex: 1 1 110px; min-height: 90px; }
.op-act-bar { flex: 1; height: 100%; display: flex; align-items: flex-end; border-radius: 6px; cursor: default; }
.op-act-bar i { display: block; width: 100%; height: var(--h); border-radius: 6px 6px 3px 3px; background: rgba(var(--op-yellow-rgb), .35); transition: background .2s; }
.op-act-bar:hover i { background: rgba(var(--op-yellow-rgb), .7); }
.op-act-bar.today i { background: var(--op-yellow); }
.op-act-axis { display: flex; justify-content: space-between; margin-top: .4rem; font-size: .7rem; color: var(--op-muted); }
.op-act-seen-head { margin: 1rem 0 .5rem; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--op-muted); }
.op-act-seen { display: flex; flex-wrap: wrap; gap: .45rem; }
.op-act-seen a { position: relative; display: block; }
.op-act-seen img { width: 38px; height: 38px; border-radius: 12px; object-fit: cover; border: 2px solid rgba(255, 255, 255, .08); transition: transform .2s var(--op-ease); }
.op-act-seen a:hover img { transform: translateY(-2px); }
.op-act-seen a.on::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; background: #3ad678; border: 2px solid rgb(var(--op-dk-21-18-11, 21, 18, 11)); }
@media (min-width: 1700px) { .op-nav-search .fable-search-input { width: 300px !important; } }

/* ===== Suggestions & bugs (/feedback, qw26_45; replaced the forum and the community feed) ===== */
.op-fb { padding-bottom: 3rem; }
.op-fb-hero { display: flex; align-items: center; gap: 1.3rem; margin-top: 1rem; padding: 1.5rem 1.8rem; border-radius: 22px;
  background: linear-gradient(120deg, rgba(var(--op-yellow-rgb), .14), rgb(var(--op-dk-21-18-11, 21, 18, 11)) 60%); border: 1px solid var(--op-border); }
.op-fb-hero-icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 18px; font-size: 1.7rem; flex-shrink: 0;
  color: var(--op-yellow); background: rgba(var(--op-yellow-rgb), .14); }
.op-fb-hero > div { min-width: 0; }
.op-fb-hero h1 { font-family: var(--op-font-display); font-weight: 900; color: #fff; font-size: 1.9rem; margin: 0 0 .2rem; }
.op-fb-hero p { margin: 0; color: var(--op-muted); }
.op-fb-alert { margin-top: 1rem; padding: .7rem 1rem; border-radius: 14px; font-weight: 700; font-size: .9rem; }
.op-fb-alert.ok { background: rgba(58, 214, 120, .12); border: 1px solid rgba(58, 214, 120, .35); color: #7ff0ae; }
.op-fb-alert.err { background: rgba(255, 94, 107, .12); border: 1px solid rgba(255, 94, 107, .35); color: #ff9aa3; }
.op-fb-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.3rem; margin-top: 1.3rem; align-items: start; }
.op-fb-grid > * { min-width: 0; }
@media (min-width: 1200px) { .op-fb-grid { grid-template-columns: minmax(0, 1fr) 340px; } .op-fb-side { position: sticky; top: 90px; } }
.op-fb-card { border-radius: 18px; background: var(--op-card); border: 1px solid var(--op-border); padding: 1.4rem 1.5rem; }
.op-fb-card h3 { font-family: var(--op-font-display); font-size: 1rem; font-weight: 800; color: #fff; margin: 0 0 .7rem; }
.op-fb-card h3 i { color: var(--op-yellow); margin-right: .35rem; }
.op-fb-side ul { margin: 0; padding-left: 1.1rem; color: var(--op-muted); font-size: .88rem; display: grid; gap: .45rem; }
.op-fb-side b { color: #fff; }
.op-fb-login { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.op-fb-login > i { font-size: 1.6rem; color: var(--op-yellow); }
.op-fb-login > div { flex: 1 1 220px; display: grid; }
.op-fb-login strong { color: #fff; }
.op-fb-login span { color: var(--op-muted); font-size: .88rem; }
.op-fb-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin-bottom: 1rem; }
.op-fb-tab { cursor: pointer; }
.op-fb-tab input { position: absolute; opacity: 0; pointer-events: none; }
.op-fb-tab span { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .7rem; align-items: center; height: 100%; padding: .9rem 1rem; border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, .08); background: rgba(0, 0, 0, .18); transition: border-color .2s, background .2s; }
.op-fb-tab i { grid-row: span 2; font-size: 1.4rem; color: var(--fc); }
.op-fb-tab strong { color: #fff; font-family: var(--op-font-display); font-weight: 800; }
.op-fb-tab small { color: var(--op-muted); font-size: .78rem; line-height: 1.3; }
.op-fb-tab:hover span { border-color: color-mix(in srgb, var(--fc) 45%, transparent); }
.op-fb-tab input:checked + span { border-color: var(--fc); background: color-mix(in srgb, var(--fc) 12%, transparent); }
.op-fb-tab input:focus-visible + span { outline: 2px solid var(--fc); outline-offset: 2px; }
.op-fb-hint { display: none; margin-bottom: 1rem; padding: .6rem .8rem; border-radius: 12px; font-size: .86rem; background: rgba(255, 255, 255, .04); color: rgba(255, 255, 255, .78); }
.op-fb-hint i { margin-right: .3rem; color: var(--op-yellow); }
.op-fb-form:has(input[value="suggestion"]:checked) .op-fb-hint-suggestion,
.op-fb-form:has(input[value="bug"]:checked) .op-fb-hint-bug { display: block; }
.op-fb-row { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 1rem; }
@media (min-width: 768px) { .op-fb-row { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); } }
.op-fb-row .op-input input, .op-fb-row .op-input select { padding-right: 1rem; }
.op-fb-text { width: 100%; min-height: 180px; padding: .8rem 1rem; border-radius: 12px; color: #fff; font-size: .96rem; resize: vertical;
  background: rgba(0, 0, 0, .3); border: 1px solid var(--op-border); outline: none; transition: border-color .2s, box-shadow .2s; }
.op-fb-text:focus { border-color: var(--op-border-strong); box-shadow: 0 0 0 4px rgba(var(--op-yellow-rgb), .12); }
.op-fb-text::placeholder { color: rgba(255, 255, 255, .3); }
.op-fb-bottom { display: flex; gap: 1rem; flex-wrap: wrap; align-items: stretch; }
.op-fb-drop { min-height: 90px; flex: 1 1 260px; }
.op-fb-drop i { font-size: 1.2rem; }
.op-fb-preview:empty { display: none; }
.op-fb-preview { position: relative; cursor: pointer; }
.op-fb-preview img { max-height: 120px; max-width: 220px; border-radius: 12px; border: 1px solid var(--op-border); display: block; }
.op-fb-preview::after { content: "\f00d"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; top: 6px; right: 6px; width: 24px; height: 24px;
  display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .7); color: #fff; font-size: .75rem; }
.op-fb-bar { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; margin-top: 1rem; }
.op-fb-count { color: var(--op-muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.op-fb-h2 { font-family: var(--op-font-display); font-size: 1.15rem; font-weight: 800; color: #fff; margin: 2rem 0 .8rem; }
.op-fb-h2 i { color: var(--op-yellow); margin-right: .4rem; }
.op-fb-item { border-radius: 16px; background: var(--op-card); border: 1px solid var(--op-border); border-left: 4px solid var(--fc); padding: 1rem 1.2rem; margin-bottom: .8rem; scroll-margin-top: 110px; }
.op-fb-item:target { box-shadow: 0 0 0 2px rgba(var(--op-yellow-rgb), .5); }
.op-fb-item header { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.op-fb-item header small { color: var(--op-muted); margin-left: auto; font-size: .78rem; }
.op-fb-type { color: var(--fc); font-weight: 800; font-size: .8rem; }
.op-fb-status { padding: .12rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 800; color: var(--sc);
  background: color-mix(in srgb, var(--sc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--sc) 40%, transparent); }
.op-fb-item h3 { font-size: 1.02rem; font-weight: 800; color: #fff; margin: 0 0 .3rem; overflow-wrap: anywhere; }
.op-fb-item p { margin: 0; color: rgba(255, 255, 255, .8); font-size: .9rem; white-space: pre-line; overflow-wrap: anywhere; }
.op-fb-img img { margin-top: .6rem; max-width: min(100%, 320px); max-height: 200px; border-radius: 10px; border: 1px solid var(--op-border); }
.op-fb-reply { display: flex; gap: .7rem; margin-top: .8rem; padding: .7rem .8rem; border-radius: 12px; background: rgba(var(--op-yellow-rgb), .07); border: 1px solid rgba(var(--op-yellow-rgb), .2); }
.op-fb-reply img { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; object-fit: cover; }
.op-fb-reply > div { display: grid; min-width: 0; }
.op-fb-reply small { color: var(--op-yellow); font-weight: 800; font-size: .76rem; }
.op-fb-reply span:last-child { color: #fff; font-size: .9rem; white-space: pre-line; overflow-wrap: anywhere; }
.op-fb-empty { padding: 1.4rem; text-align: center; color: var(--op-muted); border-radius: 16px; border: 1px dashed var(--op-border); }
.op-fb-empty i { margin-right: .4rem; }
@media (max-width: 575.98px) { .op-fb-tabs { grid-template-columns: minmax(0, 1fr); } .op-fb-hero { padding: 1.2rem; } .op-fb-hero h1 { font-size: 1.5rem; } .op-fb-hero-icon { width: 52px; height: 52px; font-size: 1.4rem; } }
/* home page: small "ideas & bugs" box under the plays */
.op-home-fb { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.op-home-fb-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; font-size: 1.4rem; flex-shrink: 0;
  color: var(--op-yellow); background: rgba(var(--op-yellow-rgb), .14); }
.op-home-fb-text { flex: 1 1 240px; min-width: 0; }
.op-home-fb-text h3 { font-family: var(--op-font-display); font-size: 1.05rem; font-weight: 800; color: #fff; margin: 0 0 .15rem; }
.op-home-fb-text p { margin: 0; color: var(--op-muted); font-size: .88rem; }
.op-home-fb-btns { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ===== Ranked (/ranked, qw26_46; replaced Daily + Weekly Challenges) ===== */
.op-rnk-tier { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 800; white-space: nowrap;
  color: var(--tc); background: color-mix(in srgb, var(--tc) 13%, transparent); border: 1px solid color-mix(in srgb, var(--tc) 40%, transparent); }
.op-rnk-tier.sm { font-size: .7rem; padding: .12rem .5rem; }
.op-rnk-tier i { font-size: .85em; }
.op-rnk-legend, .op-rnk-celestial { box-shadow: 0 0 14px color-mix(in srgb, var(--tc) 35%, transparent); }
.op-rnk-me { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin: 1.2rem 0; padding: 1.2rem 1.4rem; border-radius: 20px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--tc, #8d8d97) 14%, rgba(var(--op-dk-20-17-9, 20, 17, 9), .92)), rgba(var(--op-dk-20-17-9, 20, 17, 9), .92) 65%);
  border: 1px solid color-mix(in srgb, var(--tc, #8d8d97) 40%, transparent); }
.op-rnk-emblem { width: 76px; height: 76px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; font-size: 2rem;
  color: var(--tc, #8d8d97); background: radial-gradient(circle, color-mix(in srgb, var(--tc, #8d8d97) 25%, transparent), transparent 70%);
  border: 2px solid color-mix(in srgb, var(--tc, #8d8d97) 60%, transparent); }
.op-rnk-emblem.op-rnk-legend, .op-rnk-emblem.op-rnk-celestial { box-shadow: 0 0 26px color-mix(in srgb, var(--tc) 45%, transparent); }
.op-rnk-me-main { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.op-rnk-me-main small { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--op-muted); }
.op-rnk-me-main strong { font-family: var(--op-font-display); font-weight: 900; font-size: 1.9rem; line-height: 1.1; color: var(--tc, #fff); }
.op-rnk-me-main span { color: rgba(255, 255, 255, .8); font-size: .9rem; }
.op-rnk-me-main em { font-style: normal; font-size: .8rem; color: var(--op-muted); }
.op-rnk-bar { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; margin: .45rem 0 .15rem; max-width: 420px; }
.op-rnk-bar i { display: block; height: 100%; border-radius: inherit; background: var(--tc, var(--op-yellow)); }
.op-rnk-me-side { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.op-rnk-me-side > div { display: flex; flex-direction: column; align-items: center; }
.op-rnk-me-side b { font-family: var(--op-font-display); font-weight: 900; font-size: 1.6rem; color: #fff; font-variant-numeric: tabular-nums; }
.op-rnk-me-side small { font-size: .72rem; color: var(--op-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.op-rnk-me-side small i { color: var(--op-orange); }
.op-rnk-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto 44px 110px; align-items: center; gap: .7rem; padding: .55rem .7rem; margin-bottom: .35rem;
  border-radius: 12px; background: rgba(0, 0, 0, .2); border: 1px solid rgba(255, 255, 255, .04); color: #fff; text-decoration: none; transition: background .2s, transform .2s var(--op-ease); }
.op-rnk-row:hover { background: rgba(255, 255, 255, .05); transform: translateX(3px); color: #fff; }
.op-rnk-row b { color: var(--op-muted); }
.op-rnk-row.top1 b { color: var(--op-yellow); } .op-rnk-row.top2 b { color: #d9dde6; } .op-rnk-row.top3 b { color: #e0a36b; }
.op-rnk-row.top1 { border-color: rgba(var(--op-yellow-rgb), .35); background: rgba(var(--op-yellow-rgb), .06); }
.op-rnk-row strong { text-align: right; font-family: var(--op-font-display); font-weight: 900; font-variant-numeric: tabular-nums; }
.op-rnk-row strong small, .op-daily-row strong small { font-size: .7em; color: var(--op-muted); margin-left: 2px; }
.op-rnk-days { color: var(--op-muted); font-size: .82rem; text-align: right; }
.op-rnk-how { padding-left: 1.1rem; margin: 0 0 1rem; color: rgba(255, 255, 255, .78); font-size: .86rem; display: grid; gap: .4rem; }
.op-rnk-ladder { display: grid; gap: .35rem; }
.op-rnk-ladder > div { display: grid; grid-template-columns: 22px 80px minmax(0, 1fr); align-items: center; gap: .5rem; padding: .35rem .5rem; border-radius: 10px;
  background: color-mix(in srgb, var(--tc) 8%, transparent); }
.op-rnk-ladder i { color: var(--tc); text-align: center; }
.op-rnk-ladder b { color: var(--tc); font-size: .85rem; }
.op-rnk-ladder small { color: var(--op-muted); font-size: .74rem; }
.op-mini-row .op-rnk-tier { margin-left: auto; }
/* profile tag */
.op-pf-tag.op-pf-ranked { color: var(--tc) !important; background: color-mix(in srgb, var(--tc) 14%, transparent) !important; border-color: color-mix(in srgb, var(--tc) 45%, transparent) !important; }
@media (max-width: 767.98px) {
  .op-rnk-row { grid-template-columns: 28px minmax(0, 1fr) auto 70px; gap: .45rem; padding: .5rem; }
  .op-rnk-row .op-rnk-days { display: none; }
  .op-rnk-me { gap: 1rem; }
  .op-rnk-me-side { width: 100%; justify-content: space-around; }
}
/* Ranked section on the profile (qw26_46) */
.op-rnk-pf { margin: 0 0 .6rem; }
.op-rnk-pf .op-rnk-me-main span a { color: var(--op-yellow); }
.op-rnk-past { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .4rem; }
.op-rnk-past-head { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--op-muted); margin-right: .3rem; }
.op-rnk-tier small { font-weight: 600; opacity: .7; margin-left: .25rem; }

/* ===== Ranked Play per mode + locked season rewards (qw26_47) ===== */
.op-rnk-modes { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1.4rem 0 1rem; }
.op-rnk-mode { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1.2rem; border-radius: 999px; font-weight: 800; text-decoration: none;
  color: var(--op-muted); background: rgba(255, 255, 255, .04); border: 1px solid rgba(var(--op-yellow-rgb), .2); transition: color .2s, background .2s; }
.op-rnk-mode:hover { color: #fff; background: rgba(var(--op-yellow-rgb), .1); }
.op-rnk-mode.active { color: #fff; background: var(--op-accent, var(--op-yellow)); border-color: transparent; box-shadow: 0 6px 20px rgba(var(--op-yellow-rgb), .25); }
/* reward path: emblems on a winding dashed line, everything locked behind "Coming soon" */
.op-rnk-rewards { position: relative; margin: 0 0 1.4rem; padding: 1.2rem 1.4rem 1.4rem; border-radius: 22px; overflow: hidden;
  background: rgba(var(--op-dk-20-17-9, 20, 17, 9), .92); border: 1px solid rgba(var(--op-yellow-rgb), .22); }
.op-rnk-rewards-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; position: relative; z-index: 2; }
.op-rnk-rewards-head h3 { margin: 0; font-size: 1.15rem; }
.op-rnk-soon { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .85rem; border-radius: 999px; font-size: .78rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em; color: #fff; background: rgba(var(--op-yellow-rgb), .16); border: 1px solid rgba(var(--op-yellow-rgb), .4); }
.op-rnk-path { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .4rem; padding: 1.2rem 0 .4rem;
  filter: grayscale(.75) brightness(.7); opacity: .65; pointer-events: none; user-select: none; }
.op-rnk-path-line { position: absolute; left: 2%; right: 2%; top: 18%; width: 96%; height: 120px; overflow: visible; }
.op-rnk-path-line path { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 3; stroke-dasharray: 10 10; vector-effect: non-scaling-stroke; }
.op-rnk-stop { position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; min-width: 0; }
.op-rnk-stop.low { margin-top: 2.6rem; }
.op-rnk-stop img { width: 58px; height: 58px; border-radius: 50%; background: rgba(var(--op-dk-20-17-9, 20, 17, 9), .95); }
.op-rnk-stop b { font-size: .85rem; color: #fff; }
.op-rnk-gift { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; position: relative;
  background: rgba(255, 255, 255, .06); border: 1px dashed rgba(255, 255, 255, .3); }
.op-rnk-gift em { font-style: normal; font-family: var(--op-font-display); font-weight: 900; font-size: 1.6rem; color: rgba(255, 255, 255, .55); }
.op-rnk-gift i { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; font-size: .7rem;
  color: #fff; background: rgb(var(--op-dk-56-42-14, 56, 42, 14)); border: 1px solid rgba(255, 255, 255, .3); }
.op-rnk-rewards-lock { position: absolute; inset: 3.4rem 0 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
  text-align: center; padding: 0 1rem; background: radial-gradient(closest-side, rgba(10, 6, 24, .85), rgba(10, 6, 24, .35) 70%, transparent); }
.op-rnk-rewards-lock > i { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; font-size: 1.5rem; color: #fff;
  background: var(--op-accent, var(--op-yellow)); box-shadow: 0 8px 30px rgba(var(--op-yellow-rgb), .35); }
.op-rnk-rewards-lock strong { font-family: var(--op-font-display); font-size: 1.6rem; color: #fff; letter-spacing: .04em; }
.op-rnk-rewards-lock small { color: rgba(255, 255, 255, .75); font-size: .88rem; max-width: 380px; }
@media (max-width: 767.98px) {
  .op-rnk-path { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 1rem; }
  .op-rnk-path-line { display: none; }
  .op-rnk-stop.low { margin-top: 0; }
  .op-rnk-stop img { width: 44px; height: 44px; }
  .op-rnk-gift { width: 48px; height: 48px; }
}
/* home: maps of the day (one per Ranked mode) */
.op-side-maps .op-panel-head em { font-style: normal; font-size: .78rem; color: var(--op-muted); }
.op-side-maps .op-panel-head em b { color: #fff; font-variant-numeric: tabular-nums; }
.op-side-map { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .5rem; margin-top: .4rem; border-radius: 14px;
  color: #fff; text-decoration: none; background: rgba(0, 0, 0, .2); border: 1px solid rgba(255, 255, 255, .05); transition: background .2s, transform .2s var(--op-ease); }
.op-side-map:hover { color: #fff; background: rgba(var(--op-yellow-rgb), .08); transform: translateX(3px); }
.op-side-map-img { width: 64px; height: 48px; border-radius: 10px; background: rgb(var(--op-dk-34-25-12, 34, 25, 12)) center / cover; }
.op-side-map-txt { display: flex; flex-direction: column; min-width: 0; }
.op-side-map-txt small { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--op-yellow); }
.op-side-map-txt strong { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-side-map-txt em { font-style: normal; font-size: .75rem; color: var(--op-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-side-map > i { color: var(--op-muted); font-size: .8rem; }
.op-home-rnk .op-tabs { margin: .2rem 0 .5rem; }
/* profile: one card per ranked mode */
.op-rnk-pf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: .7rem; }
.op-rnk-pf-grid .op-rnk-me { margin: 0; color: #fff; text-decoration: none; }
.op-rnk-pf-grid .op-rnk-me:hover { color: #fff; filter: brightness(1.08); }
.op-rnk-pf-grid .op-rnk-emblem { width: 64px; height: 64px; }
.op-rnk-pf-grid .op-rnk-me-main strong { font-size: 1.5rem; }
.op-rnk-pf-foot { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; align-items: center; margin: .7rem 0 .5rem; font-size: .88rem; color: var(--op-muted); }
.op-rnk-pf-foot b { color: #fff; }
.op-rnk-pf-foot i { color: var(--op-orange); }
.op-rnk-pf-un a { color: var(--op-yellow); font-weight: 700; }
.op-pf-ranked-mode { margin-left: .35rem; font-size: .72em; opacity: .75; font-weight: 700; }

/* restored in qw26_46.0.2 (was removed together with the forum CSS by mistake in qw26_45) */
/* navbar with the Community dropdown (qw26_43): a bit tighter up to 1699 px so Login/Register (or the user menu) still fit */
@media (min-width: 1200px) and (max-width: 1699px) {
  .op-nav-links { gap: 0; }
  .op-nav-links .nav-link { padding-left: .45rem !important; padding-right: .45rem !important; font-size: .86rem; }
  .op-nav-links .nav-link.dropdown-toggle::after { margin-left: .15rem; }
  .op-nav-brand { margin-right: .6rem; }
}
@media (min-width: 1200px) and (max-width: 1499px) {
  .op-nav-search .fable-search-input { width: 96px !important; }
  .op-nav-brand .op-logo { height: 32px; }
}
/* navbar collapses below 1400 px now (navbar-expand-xxl, qw26_43); top-level icons only from 1920 px, search 220 px until then */
@media (min-width: 1400px) and (max-width: 1919px) { .op-nav-links .nav-link i { display: none; } }
@media (min-width: 1700px) and (max-width: 1919px) { .op-nav-search .fable-search-input { width: 220px !important; } }
@media (min-width: 1400px) and (max-width: 1699px) { .op-nav-user-btn span { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
/* qw26_46.0.2: Ranked Play + Tournaments are top-level links now (one item more) */
@media (min-width: 1400px) and (max-width: 1499px) {
  .op-nav-links .nav-link { padding-left: .34rem !important; padding-right: .34rem !important; font-size: .82rem; }
  .op-nav-search { margin: 0 .35rem !important; }
}
@media (min-width: 1920px) and (max-width: 2199px) { .op-nav-search .fable-search-input { width: 200px !important; } .op-nav-links .nav-link { padding-left: .6rem !important; padding-right: .6rem !important; } }
/* qw26_46.0.2: from 1400 to 2199 px the search is a round magnifier button that opens to the left when you click it,
   so the menu (Ranked Play + Tournaments as own links) fits also when logged in (chat, bell, avatar + name) */
@media (min-width: 1400px) and (max-width: 2199px) {
  .op-nav-search { flex: 0 0 38px; width: 38px; height: 38px; margin: 0 .45rem !important; }
  .op-nav-search > i { left: 50%; transform: translate(-50%, -50%); font-size: .85rem; }
  .op-nav-search .fable-search-input, .op-nav-search .fable-search-input:focus {
    position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 1; height: 38px;
  }
  .op-nav-search .fable-search-input { width: 38px !important; padding: 0 !important; cursor: pointer; color: transparent; font-size: 0 !important; border-radius: 50% !important; }
  .op-nav-search .fable-search-input::placeholder { color: transparent; }
  .op-nav-search .fable-search-input::-webkit-search-cancel-button { display: none; }
  .op-nav-search:focus-within .fable-search-input { width: 280px !important; padding: 0 2.4rem 0 1rem !important; cursor: text; color: #fff; font-size: .9rem !important; border-radius: 999px !important;
    background: rgb(var(--op-dk-23-20-11, 23, 20, 11)) !important; z-index: 3; }
  .op-nav-search:focus-within .fable-search-input::placeholder { color: rgba(255, 255, 255, .35); }
  .op-nav-search:focus-within > i { left: auto; right: 0; transform: translate(-13px, -50%); z-index: 4; }
  .op-nav-search #fable-search { left: auto; right: 0; width: 320px; }
}
@media (min-width: 1400px) and (max-width: 1499px) { .op-nav-user-btn span { display: none; } }
/* home page: Ranked Play panel in the sidebar (qw26_46.0.3) */
.op-home-rnk-season { display: flex; justify-content: space-between; gap: .5rem; font-size: .78rem; color: var(--op-muted); margin: -.4rem 0 .8rem; }
.op-home-rnk-season span { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #b77cff; }
.op-home-rnk-season em { font-style: normal; }
.op-home-rnk-season b { color: #fff; font-variant-numeric: tabular-nums; }
.op-home-rnk-me { display: flex; align-items: center; gap: .8rem; padding: .7rem .8rem; margin-bottom: .7rem; border-radius: 14px; text-decoration: none; color: #fff;
  background: color-mix(in srgb, var(--tc) 10%, rgba(0, 0, 0, .25)); border: 1px solid color-mix(in srgb, var(--tc) 35%, transparent); transition: border-color .2s; }
.op-home-rnk-me:hover { color: #fff; border-color: var(--tc); }
.op-home-rnk-emblem { width: 46px; height: 46px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; font-size: 1.2rem; color: var(--tc);
  border: 2px solid color-mix(in srgb, var(--tc) 60%, transparent); background: radial-gradient(circle, color-mix(in srgb, var(--tc) 22%, transparent), transparent 70%); }
.op-home-rnk-me-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.op-home-rnk-me-main small { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--op-muted); }
.op-home-rnk-me-main strong { font-family: var(--op-font-display); font-weight: 900; font-size: 1.15rem; line-height: 1.1; color: var(--tc); }
.op-home-rnk-me-main em { font-style: normal; font-size: .78rem; color: rgba(255, 255, 255, .75); }
.op-home-rnk-me .op-rnk-bar { height: 5px; margin: .35rem 0 0; }
.op-home-rnk-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; align-items: center; gap: .55rem; padding: .4rem .2rem;
  border-top: 1px solid rgba(255, 255, 255, .05); text-decoration: none; color: #fff; }
.op-home-rnk-row:hover { color: #fff; background: rgba(255, 255, 255, .03); }
.op-home-rnk-row > b { color: var(--op-muted); font-size: .85rem; }
.op-home-rnk-row.first > b { color: var(--op-yellow); }
.op-home-rnk-row > img { width: 30px; height: 30px; border-radius: 9px; object-fit: cover; }
.op-home-rnk-name { min-width: 0; font-weight: 700; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-home-rnk-row > em { font-style: normal; font-family: var(--op-font-display); font-weight: 900; font-size: .85rem; font-variant-numeric: tabular-nums; min-width: 3.2rem; text-align: right; }
/* rank emblems as pictures (style C "osu! hit circle", branding/ranks/circle/*.svg, qw26_46.0.6) */
.op-rnk-ico { width: 1.45em; height: 1.45em; margin: -.25em .05em -.25em -.3em; vertical-align: middle; flex-shrink: 0; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); }
.op-rnk-tier.sm .op-rnk-ico { width: 1.6em; height: 1.6em; }
.op-rnk-emblem:has(> img), .op-home-rnk-emblem:has(> img) { border: 0 !important; background: none !important; box-shadow: none !important; }
.op-rnk-emblem > img { width: 112%; height: 112%; }
.op-home-rnk-emblem > img { width: 118%; height: 118%; }
.op-rnk-ladder .op-rnk-ico { width: 24px; height: 24px; margin: 0; }
.op-pf-tag.op-pf-ranked .op-rnk-ico { width: 1.5em; height: 1.5em; margin-left: -.35em; }
.op-rnk-ladder > div { grid-template-columns: 26px 80px minmax(0, 1fr); }
.op-rnk-tier.sm .op-rnk-ico { width: 1.95em; height: 1.95em; margin: -.45em .1em -.45em -.45em; }
.op-rnk-ladder .op-rnk-ico { width: 28px; height: 28px; }
.op-rnk-ladder > div { grid-template-columns: 30px 80px minmax(0, 1fr); }
/* 404 page (templates/errors/notfound.html, qw26_46.0.9) */
.op-404 { text-align: center; padding: 4.5rem 1rem 3rem; max-width: 760px; }
.op-404-num { display: flex; align-items: center; justify-content: center; gap: .1em; font-family: var(--op-font-display); font-weight: 900; font-size: clamp(5rem, 18vw, 9rem); line-height: 1;
  color: var(--op-yellow); text-shadow: 0 8px 40px rgba(var(--op-yellow-rgb), .35); }
.op-404-num span { display: inline-block; width: .9em; height: .9em; }
.op-404-num img { width: 100%; height: 100%; animation: opu-404-bob 3s ease-in-out infinite; }
@keyframes opu-404-bob { 50% { transform: translateY(-6px); } }
.op-404 h1 { font-family: var(--op-font-display); font-weight: 900; color: #fff; font-size: 2rem; margin: 1.2rem 0 .4rem; }
.op-404 p { color: var(--op-muted); margin: 0 auto 1.6rem; max-width: 440px; }
.op-404-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
@media (prefers-reduced-motion: reduce) { .op-404-num img { animation: none; } }

/* ===== Team page /team (qw26_48) – colours via variables so it works in Celestial and Classic ===== */
.op-team-hero { text-align: center; padding: 2.4rem 1rem 1.2rem; }
.op-team-hero h1 { font-family: var(--op-font-display); font-weight: 900; font-size: clamp(2.2rem, 5vw, 3.4rem); margin: .2rem 0 .6rem; }
.op-team-hero p { color: var(--op-muted); max-width: 640px; margin: 0 auto; }
.op-team-hero a { color: var(--op-yellow); }
.op-team-sec { margin: 1.6rem 0; }
.op-team-sec h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem .8rem; font-size: 1.3rem; margin-bottom: .9rem; }
.op-team-sec h2 small { font-family: var(--op-font-text, inherit); font-size: .85rem; font-weight: 600; color: var(--op-muted); letter-spacing: 0; }
.op-team-emoji { font-size: 1.1em; }
.op-team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: .8rem; }
.op-team-card { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border-radius: 18px; text-decoration: none; color: #fff; min-width: 0;
  background: rgba(var(--op-dk-20-17-9, 20, 17, 9), .9); border: 1px solid rgba(var(--op-yellow-rgb), .18); transition: transform .2s var(--op-ease), border-color .2s; }
.op-team-card:hover { color: #fff; transform: translateY(-3px); border-color: rgba(var(--op-yellow-rgb), .5); }
.op-team-av { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid rgba(var(--op-yellow-rgb), .5); }
.op-team-info { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.op-team-info strong { font-size: 1.1rem; display: flex; align-items: center; gap: .35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-team-roles { display: flex; flex-wrap: wrap; gap: .3rem; }
.op-team-roles-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: .5rem; }
.op-team-roles-list > div { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: .4rem; padding: .7rem .9rem; border-radius: 14px;
  background: rgba(var(--op-dk-20-17-9, 20, 17, 9), .8); border: 1px solid rgba(255, 255, 255, .06); }
.op-team-roles-list b { grid-column: 2; }
.op-team-roles-list small { grid-column: 2; color: var(--op-muted); }
.op-team-roles-list .op-team-emoji { grid-row: span 2; }
.op-team-note { margin-top: 1rem; color: var(--op-muted); font-size: .88rem; }

/* ===== Report a player /report, Account standing /standing (qw26_48), reuse .op-fb-* ===== */
.op-fb-hero-icon.op-rep-icon { background: linear-gradient(135deg, #ff5e8a, #ff8fc4); }
.op-fb-hero-icon.op-std-icon { background: linear-gradient(135deg, #2fd174, #3ad678); }
.op-fb-hero-icon.op-std-icon.warn { background: linear-gradient(135deg, #ff9a3c, #ffb238); }
.op-fb-hero-icon.op-std-icon.bad { background: linear-gradient(135deg, #ff4d4d, #ff6b6b); }
.op-rep-target { display: flex; align-items: center; gap: .9rem; padding: .8rem 1rem; border-radius: 16px; margin-bottom: 1rem;
  background: rgba(var(--op-dk-20-17-9, 20, 17, 9), .7); border: 1px solid rgba(var(--op-yellow-rgb), .2); flex-wrap: wrap; }
.op-rep-target > img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.op-rep-target > div { display: flex; flex-direction: column; min-width: 0; }
.op-rep-target small { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--op-muted); font-weight: 800; }
.op-rep-target strong { font-size: 1.15rem; display: flex; align-items: center; gap: .35rem; }
.op-rep-score { font-size: .82rem; color: var(--op-muted); overflow-wrap: anywhere; }
.op-rep-tip { display: block; margin-top: .35rem; color: var(--op-muted); font-size: .8rem; }
.op-rep-reasons { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: .5rem; }
.op-rep-reason { position: relative; cursor: pointer; }
.op-rep-reason input { position: absolute; opacity: 0; pointer-events: none; }
.op-rep-reason span { display: flex; align-items: center; gap: .55rem; padding: .65rem .85rem; border-radius: 12px; font-weight: 700; font-size: .9rem;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); transition: background .15s, border-color .15s; }
.op-rep-reason span i { color: var(--op-muted); width: 18px; text-align: center; }
.op-rep-reason:hover span { background: rgba(255, 255, 255, .07); }
.op-rep-reason input:checked + span { border-color: #ff8fc4; background: rgba(255, 143, 196, .14); }
.op-rep-reason input:checked + span i { color: #ff8fc4; }
.op-rep-reason input:focus-visible + span { outline: 2px solid #ff8fc4; outline-offset: 2px; }
.op-rep-ev { display: inline-flex; gap: .4rem; align-items: center; font-size: .85rem; color: var(--op-yellow); overflow-wrap: anywhere; margin-bottom: .4rem; }
.op-rep-staff { font-size: 1.2rem; color: var(--op-yellow); width: 34px; text-align: center; flex-shrink: 0; }
.op-std-box.bad { border-color: rgba(255, 94, 107, .45) !important; }
.op-std-box h3 { font-size: 1.05rem; margin-bottom: .6rem; }
.op-std-reason { font-size: 1.05rem; font-weight: 700; margin-bottom: .3rem; overflow-wrap: anywhere; }
.op-std-box > small { color: var(--op-muted); }
.op-std-second { margin-top: .9rem; padding: .7rem .9rem; border-radius: 12px; font-size: .88rem; background: rgba(255, 94, 107, .1); border: 1px solid rgba(255, 94, 107, .3); }
.op-std-second.ok { background: rgba(58, 214, 120, .08); border-color: rgba(58, 214, 120, .3); }
.op-std-second i { margin-right: .35rem; }
.op-std-count { font-family: var(--op-font-text, inherit); font-size: .8rem; color: var(--op-muted); font-weight: 700; margin-left: .5rem; }
.op-std-warn.old { opacity: .6; }
.op-restricted-bar { display: block; text-align: center; padding: .55rem 1rem; margin: .6rem auto 0; max-width: min(1320px, calc(100% - 24px)); border-radius: 14px;
  background: rgba(255, 77, 77, .15); border: 1px solid rgba(255, 94, 107, .45); color: #ffd0d4; text-decoration: none; font-size: .92rem; }
.op-restricted-bar:hover { color: #fff; background: rgba(255, 77, 77, .22); }
.op-restricted-bar i { margin-right: .4rem; }
.op-rep-reason span { text-transform: none; letter-spacing: 0; }
.op-std-box { margin-bottom: 1rem; }
.op-fb-form + .op-fb-h2, .op-std-box + .op-fb-h2 { margin-top: 1.6rem; }
.op-team-sec h2 .op-team-emoji { color: var(--op-yellow); font-size: .95em; }
.op-team-roles-list .op-team-emoji { color: var(--op-yellow); margin-top: .2rem; }

/* ===== Multiplayer match history /mp, /mp/ID (qw26_48.1) ===== */
.op-mp-hero { text-align: center; padding: 2.2rem 1rem 1.4rem; }
.op-mp-hero h1, .op-mp-head h1 { font-family: var(--op-font-display); font-weight: 900; font-size: clamp(1.8rem, 4vw, 3rem); margin: .2rem 0 .5rem; overflow-wrap: anywhere; }
.op-mp-hero p, .op-mp-head p { color: var(--op-muted); }
.op-mp-head { padding: 1.6rem 0 .8rem; }
.op-mp-list { display: grid; gap: .5rem; }
.op-mp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 16px; align-items: center; gap: 1rem; padding: .8rem 1.1rem; border-radius: 16px; color: #fff; text-decoration: none;
  background: rgba(var(--op-dk-20-17-9, 20, 17, 9), .88); border: 1px solid rgba(var(--op-yellow-rgb), .14); transition: border-color .2s, transform .2s var(--op-ease); }
.op-mp-row:hover { color: #fff; border-color: rgba(var(--op-yellow-rgb), .45); transform: translateX(3px); }
.op-mp-name { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-mp-name i { color: var(--op-muted); font-size: .8em; }
.op-mp-players { display: flex; }
.op-mp-players img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; margin-left: -8px; border: 2px solid rgb(var(--op-dk-20-17-9, 20, 17, 9)); }
.op-mp-meta { color: var(--op-muted); font-size: .85rem; white-space: nowrap; }
.op-mp-meta b { color: #fff; }
.op-mp-row > i { color: var(--op-muted); }
.op-mp-pages { display: flex; justify-content: center; align-items: center; gap: 1rem; margin: 1.2rem 0; color: var(--op-muted); }
.op-mp-empty { display: flex; flex-direction: column; align-items: center; gap: .4rem; text-align: center; padding: 3rem 1rem; color: var(--op-muted); }
.op-mp-empty i { font-size: 2.4rem; color: var(--op-yellow); }
.op-mp-empty strong { color: #fff; font-size: 1.15rem; }
.op-mp-standings { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.4rem; }
.op-mp-st { display: flex; align-items: center; gap: .6rem; padding: .6rem 1rem; border-radius: 14px; min-width: 0;
  background: rgba(var(--op-dk-20-17-9, 20, 17, 9), .88); border: 1px solid rgba(255, 255, 255, .08); }
.op-mp-st.first { border-color: rgba(var(--op-yellow-rgb), .6); box-shadow: 0 0 18px rgba(var(--op-yellow-rgb), .18); }
.op-mp-st img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.op-mp-st strong a { color: #fff; }
.op-mp-st b { font-family: var(--op-font-display); font-weight: 900; font-size: 1.4rem; margin-left: .3rem; }
.op-mp-st small { color: var(--op-muted); font-size: .75rem; }
.op-mp-teamdot { width: 14px; height: 14px; border-radius: 50%; }
.op-mp-st.team-red .op-mp-teamdot { background: #ff5e6b; } .op-mp-st.team-blue .op-mp-teamdot { background: #48a6ff; }
.op-mp-game { margin-bottom: 1.2rem; border-radius: 20px; overflow: hidden; background: rgba(var(--op-dk-20-17-9, 20, 17, 9), .9); border: 1px solid rgba(var(--op-yellow-rgb), .14); }
.op-mp-map { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; min-height: 110px; padding: 1rem 1.2rem; color: #fff; text-decoration: none;
  background: linear-gradient(90deg, rgba(10, 6, 20, .92), rgba(10, 6, 20, .55)), var(--cover) center / cover; }
.op-mp-map:hover { color: #fff; }
.op-mp-map-txt { display: flex; flex-direction: column; min-width: 0; }
.op-mp-map-txt small { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--op-yellow); }
.op-mp-map-txt strong { font-size: 1.15rem; overflow-wrap: anywhere; }
.op-mp-map-txt em { font-style: normal; color: rgba(255, 255, 255, .75); font-size: .85rem; }
.op-mp-teamscore { display: flex; gap: .5rem; font-family: var(--op-font-display); font-weight: 900; }
.op-mp-teamscore span { padding: .2rem .7rem; border-radius: 999px; }
.op-mp-teamscore .red { background: rgba(255, 94, 107, .25); } .op-mp-teamscore .blue { background: rgba(72, 166, 255, .25); }
.op-mp-scores { padding: .5rem .7rem .7rem; }
.op-mp-score { display: grid; grid-template-columns: 26px minmax(0, 1fr) 70px 34px 70px 60px 150px 120px; align-items: center; gap: .6rem; padding: .45rem .6rem; border-radius: 10px; }
.op-mp-score:nth-child(odd) { background: rgba(255, 255, 255, .025); }
.op-mp-score.win { background: rgba(var(--op-yellow-rgb), .1); }
.op-mp-score.win > b { color: var(--op-yellow); }
.op-mp-score.team-red { box-shadow: inset 3px 0 0 #ff5e6b; } .op-mp-score.team-blue { box-shadow: inset 3px 0 0 #48a6ff; }
.op-mp-score.failed { opacity: .6; }
.op-mp-score > b { color: var(--op-muted); }
.op-mp-who { display: flex; align-items: center; gap: .35rem; color: #fff; min-width: 0; white-space: nowrap; overflow: hidden; }
.op-mp-who > img:first-child { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.op-mp-mods { color: var(--op-muted); font-size: .8rem; font-weight: 700; }
.op-mp-grade { font-family: var(--op-font-display); font-weight: 900; text-align: center; }
.op-mp-grade.g-ss { color: #e8f2ff; } .op-mp-grade.g-s { color: #ffd84d; } .op-mp-grade.g-a { color: #3ad678; } .op-mp-grade.g-b { color: #48c6ff; } .op-mp-grade.g-c { color: #b98cff; } .op-mp-grade.g-d, .op-mp-grade.g-f { color: #ff5e6b; }
.op-mp-acc, .op-mp-combo { font-size: .88rem; text-align: right; }
.op-mp-hits { font-size: .78rem; color: var(--op-muted); text-align: right; white-space: nowrap; }
.op-mp-hits i { font-style: normal; color: #ff5e6b; }
.op-mp-score strong { text-align: right; font-family: var(--op-font-display); font-weight: 900; font-variant-numeric: tabular-nums; }
.op-mp-score strong a { color: #fff; }
.op-mp-nosub { grid-column: 3 / -1; color: var(--op-muted); font-size: .85rem; font-style: italic; }
@media (max-width: 991.98px) {
  .op-mp-score { grid-template-columns: 22px minmax(0, 1fr) 34px 64px 100px; }
  .op-mp-mods, .op-mp-combo, .op-mp-hits { display: none; }
  .op-mp-row { grid-template-columns: minmax(0, 1fr) auto 16px; }
  .op-mp-players { display: none; }
}
@media (max-width: 991.98px) {
  .op-mp-score { grid-template-columns: 20px minmax(0, 1fr) 26px 56px 82px; gap: .4rem; padding: .45rem .4rem; }
  .op-mp-who .op-lb-flag { display: none; }
  .op-mp-who > img:first-child { width: 22px; height: 22px; }
  .op-mp-acc { font-size: .8rem; }
  .op-mp-score strong { font-size: .9rem; }
}

/* language switch in the palette menu (qw26_48.2) */
.op-lang-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; margin-bottom: .5rem; }
.op-lang-opt { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .45rem .3rem; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .03); color: var(--op-text); font-weight: 700; font-size: .78rem; }
.op-lang-opt img { width: 24px; height: 16px; border-radius: 3px; object-fit: cover; }
.op-lang-opt:hover { background: rgba(255, 255, 255, .07); }
.op-lang-opt.active { border-color: rgba(var(--op-yellow-rgb), .8); background: rgba(var(--op-yellow-rgb), .12); }

/* website settings button (qw26_49, owner: bigger and easier to see): flag of the language + sliders + "Settings" on wide screens */
.op-theme-btn { width: auto !important; min-width: 46px; height: 42px !important; padding: 0 .75rem; border-radius: 999px !important; display: inline-flex; align-items: center; gap: .45rem;
  border: 1.5px solid rgba(var(--op-yellow-rgb), .55) !important; background: rgba(var(--op-yellow-rgb), .14) !important; color: #fff !important; font-weight: 800; font-size: .9rem; }
.op-theme-btn i { font-size: 1.05rem; color: var(--op-yellow); }
.op-theme-btn:hover { transform: none !important; background: rgba(var(--op-yellow-rgb), .26) !important; }
.op-theme-flag { width: 22px; height: 15px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.op-theme-btn-label { display: none; }
@media (min-width: 1920px) { .op-theme-btn-label { display: inline; } }
@media (max-width: 1399.98px) { .op-theme-btn { height: 40px !important; } .op-theme-btn-label { display: inline; } }
.op-theme-head { font-family: var(--op-font-display); font-weight: 800; font-size: 1rem; padding: .2rem .3rem .5rem; margin-bottom: .3rem; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.op-theme-head i { color: var(--op-yellow); margin-right: .3rem; }
/* warn button on profiles (staff) */
.op-pf-warn { position: relative; color: #ff9a3c !important; }
.op-pf-warn b { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; border-radius: 9px; background: #ff9a3c; color: #1a0f00; font-size: .7rem; display: grid; place-items: center; padding: 0 4px; }
.op-warned-toast { position: fixed; right: 18px; bottom: 18px; z-index: 1080; max-width: 360px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
/* 13 languages (qw26_48.0.4): 4 per row, scrolls if the menu gets too tall */
.op-lang-pick { grid-template-columns: repeat(4, 1fr) !important; }
.op-lang-opt { font-size: .7rem !important; padding: .4rem .2rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-theme-menu { max-height: calc(100vh - 90px); overflow-y: auto; }

/* two-factor login card + code page (qw26_48.0.5) */
.op-2fa-need { border-color: rgba(255, 94, 107, .55) !important; }
.op-2fa-on { color: #3ad678; }
.op-2fa-steps { padding-left: 1.2rem; color: rgba(255, 255, 255, .85); font-size: .9rem; display: grid; gap: .3rem; }
.op-2fa-setup { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; margin: 1rem 0; }
.op-2fa-qr { width: 196px; height: 196px; padding: 8px; background: #fff; border-radius: 14px; flex-shrink: 0; }
.op-2fa-qr img, .op-2fa-qr canvas { display: block; }
.op-2fa-key { display: flex; flex-direction: column; gap: .5rem; min-width: 0; flex: 1 1 260px; }
.op-2fa-key small { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--op-muted); font-weight: 800; }
.op-2fa-key code { font-size: .95rem; letter-spacing: .08em; word-break: break-all; color: #fff; background: rgba(0, 0, 0, .3); padding: .5rem .7rem; border-radius: 10px; }
.op-2fa-form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.op-2fa-form .op-input { flex: 1 1 160px; max-width: 220px; }
.op-2fa-note { font-size: .8rem; color: var(--op-muted); margin: .6rem 0 0; }

/* ---------- Vote card: osu-server-list.com (qw26_48.0.7) ---------- */
.op-vote { position: relative; display: flex; flex-direction: column; gap: .75rem; padding: 1.1rem 1.15rem 1.15rem; border-radius: 20px;
  text-decoration: none; color: #fff; overflow: hidden; isolation: isolate;
  background: linear-gradient(160deg, rgba(var(--op-dk-27-23-14, 27, 23, 14), .97), rgba(var(--op-dk-14-12-7, 14, 12, 7), .97)) padding-box,
    var(--op-prism, linear-gradient(135deg, #ffd84d, #ff9f1c, #ffd84d)) border-box;
  border: 2px solid transparent; box-shadow: 0 14px 36px rgba(var(--op-yellow-rgb, 255, 216, 77), .16); transition: transform .2s var(--op-ease), box-shadow .2s; }
.op-vote:hover { transform: translateY(-3px); color: #fff; box-shadow: 0 18px 44px rgba(var(--op-yellow-rgb, 255, 216, 77), .28); }
.op-vote-glow { position: absolute; inset: -40% -30% auto auto; width: 220px; height: 220px; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--op-yellow-rgb, 255, 216, 77), .28), transparent 65%); animation: opu-vote-pulse 5s ease-in-out infinite; }
@keyframes opu-vote-pulse { 0%, 100% { opacity: .55; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.08); } }
.op-vote-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.op-vote-kicker { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--op-muted, #b9b3a3); }
.op-vote-kicker i { color: var(--op-yellow); margin-right: .25rem; }
.op-vote-place { font-family: var(--op-font-display); font-weight: 800; font-size: 1.15rem; line-height: 1; padding: .35rem .65rem; border-radius: 999px;
  background: rgba(var(--op-yellow-rgb, 255, 216, 77), .14); border: 1px solid rgba(var(--op-yellow-rgb, 255, 216, 77), .35); color: var(--op-yellow); }
.op-vote-place small { font-size: .7rem; opacity: .7; margin-left: 1px; }
.op-vote-main { display: flex; align-items: center; gap: .95rem; min-width: 0; }
.op-vote-count { display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; width: 78px; height: 78px; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .12), rgba(255, 255, 255, .02) 70%);
  box-shadow: inset 0 0 0 3px rgba(var(--op-yellow-rgb, 255, 216, 77), .55), 0 0 22px rgba(var(--op-yellow-rgb, 255, 216, 77), .25); }
.op-vote-count b { font-family: var(--op-font-display); font-size: 1.75rem; line-height: 1; }
.op-vote-count small { font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; opacity: .75; font-weight: 800; }
.op-vote-text { display: flex; flex-direction: column; min-width: 0; gap: .2rem; }
.op-vote-text strong { font-family: var(--op-font-display); font-size: 1.12rem; line-height: 1.2; }
.op-vote-text small { font-size: .8rem; color: var(--op-muted, #b9b3a3); line-height: 1.35; }
.op-vote-next { font-size: .8rem; font-weight: 700; color: #8ff0b5; display: flex; align-items: center; gap: .4rem; }
.op-vote-btn { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem 1rem; border-radius: 999px; font-weight: 800;
  background: var(--op-accent, linear-gradient(135deg, #ffd84d, #ff9f1c)); color: #fff; box-shadow: 0 8px 24px rgba(var(--op-yellow-rgb, 255, 216, 77), .3); }
.op-vote-btn { text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.op-vote-btn .fa-heart { animation: opu-vote-beat 1.6s ease-in-out infinite; }
@keyframes opu-vote-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(1); } }
.op-vote-ext { font-size: .7rem; opacity: .75; }
html[data-op-lite] .op-vote-glow, html[data-op-lite] .op-vote-btn .fa-heart { animation: none; }
@media (prefers-reduced-motion: reduce) { .op-vote-glow, .op-vote-btn .fa-heart { animation: none; } }
/* vote card: rewards + your next vote (qw26_79). The card is no link any more, the two buttons are */
.op-vote:hover { transform: none; }
.op-vote-me { display: flex; align-items: center; gap: .45rem; font-size: .84rem; font-weight: 700; color: var(--op-text, #fff); }
.op-vote-me i { color: var(--op-muted, #b9b3a3); }
.op-vote-me.ok, .op-vote-me.ok i { color: #8ff0b5; }
.op-vote-me b { font-variant-numeric: tabular-nums; }
.op-vote-goal { font-size: .78rem; color: var(--op-muted, #b9b3a3); margin-top: -.45rem; }
.op-vote-rw { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; font-size: .76rem; font-weight: 700; color: var(--op-muted, #b9b3a3); }
.op-vote-rw i { color: var(--op-yellow); }
.op-vote-links { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; }
.op-vote-btn { text-decoration: none; transition: transform .2s var(--op-ease), box-shadow .2s; }
.op-vote-btn:hover { color: #fff; transform: translateY(-2px); }
.op-vote-more { display: flex; align-items: center; gap: .4rem; padding: .7rem .95rem; border-radius: 999px; font-weight: 800; font-size: .88rem; text-decoration: none;
  color: var(--op-yellow); background: rgba(var(--op-yellow-rgb, 255, 216, 77), .1); }
.op-vote-more:hover { color: #fff; background: rgba(var(--op-yellow-rgb, 255, 216, 77), .2); }

/* /vote page (qw26_79) */
.op-vt { max-width: 1100px; }
.op-vt-hero { text-align: center; padding: 2.4rem 1rem 1.4rem; }
.op-vt-hero h1 { font-family: var(--op-font-display); font-weight: 900; font-size: clamp(2.2rem, 5vw, 3.4rem); margin: .2rem 0 .6rem; }
.op-vt-hero p { color: var(--op-muted); max-width: 640px; margin: 0 auto 1.2rem; }
.op-vt-hero .op-btn { margin: .2rem; }
.op-vt-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem; margin-bottom: 1.2rem; }
.op-vt-card { padding: 1.3rem 1.4rem; border-radius: 20px; background: rgba(var(--op-dk-20-17-9, 20, 17, 9), .72); min-width: 0; }
.op-vt-card h2 { font-size: 1.15rem; font-weight: 800; margin: 0 0 .9rem; display: flex; align-items: center; gap: .5rem; }
.op-vt-card h2 small { margin-left: auto; font-size: .78rem; font-weight: 600; color: var(--op-muted); }
.op-vt-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin-bottom: .9rem; }
.op-vt-stats span { display: flex; flex-direction: column; align-items: center; padding: .7rem .3rem; border-radius: 14px; background: rgba(255, 255, 255, .05); }
.op-vt-stats b { font-size: 1.5rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.op-vt-stats small { font-size: .72rem; color: var(--op-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.op-vt-steps { margin: 0; padding-left: 1.2rem; color: var(--op-muted); line-height: 1.6; }
.op-vt-steps b { color: var(--op-text, #fff); }
.op-vt-rw { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .7rem; }
.op-vt-rwi { display: flex; align-items: center; gap: .8rem; padding: .7rem .8rem; border-radius: 14px; background: rgba(255, 255, 255, .05); min-width: 0; }
.op-vt-rwi img { width: 86px; height: 40px; object-fit: contain; flex-shrink: 0; }
.op-vt-rwi img.stk { width: 48px; height: 48px; margin: 0 19px; }
.op-vt-rwi strong { display: block; font-size: .92rem; }
.op-vt-rwi small { display: block; font-size: .78rem; color: var(--op-muted); line-height: 1.35; }
.op-vt-top { list-style: none; margin: 0; padding: 0; }
.op-vt-top li { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; font-weight: 600; }
.op-vt-top li + li { box-shadow: 0 -1px 0 rgba(255, 255, 255, .06); }
.op-vt-top li > b { width: 1.8rem; color: var(--op-muted); }
.op-vt-top li > a { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit; }
.op-vt-top li > em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--op-muted); }
.op-vt-note { font-size: .8rem; color: var(--op-muted); margin: .9rem 0 0; }
@media (max-width: 800px) { .op-vt-grid { grid-template-columns: minmax(0, 1fr); } .op-vt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.op-footer-vote { display: inline-flex; align-items: center; gap: .45rem; margin-top: .4rem; padding: .45rem .9rem; border-radius: 999px; font-size: .85rem; font-weight: 700;
  text-decoration: none; color: var(--op-yellow); background: rgba(var(--op-yellow-rgb, 255, 216, 77), .1); border: 1px solid rgba(var(--op-yellow-rgb, 255, 216, 77), .35); transition: background .2s, transform .2s; }
.op-footer-vote:hover { background: rgba(var(--op-yellow-rgb, 255, 216, 77), .2); color: #fff; transform: translateY(-2px); }
.op-footer-vote .fa-arrow-right { font-size: .72rem; }

/* ---------- Home page: more room between everything (owner, qw26_48.0.8) ---------- */
.op-home2 .op-banner { margin-bottom: 0; }
.op-home2 .op-ladder { margin-top: 2.2rem; margin-bottom: .4rem; }
.op-home2 .op-home-grid { gap: 2.2rem; margin-top: 2.6rem; }
.op-home2 .op-home-main, .op-home2 .op-home-side { gap: 2.2rem; }
.op-home2 .op-home-top, .op-home2 .op-home-plays { gap: 2.2rem; }
.op-home2 .op-home-grid ~ .op-section { padding-top: 3rem; padding-bottom: 1.5rem; }
@media (max-width: 767.98px) {
  .op-home2 .op-home-grid { gap: 1.8rem; margin-top: 1.8rem; }
  .op-home2 .op-home-main, .op-home2 .op-home-side, .op-home2 .op-home-top, .op-home2 .op-home-plays { gap: 1.8rem; }
  .op-home2 .op-home-grid ~ .op-section { padding-top: 2.2rem; }
}

/* ---------- Home: Newest members, Clan War, Discord/Ko-fi under the plays (qw26_48.0.9) ----------
   They were at the bottom of the sidebar, which made it much longer than the main column (big empty space). */
.op-home-more { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.2rem; align-items: start; }
.op-home-more-col { display: flex; flex-direction: column; gap: 1.3rem; min-width: 0; }
.op-home-more .op-panel { min-width: 0; overflow: hidden; }
.op-home-more .op-spot-tourney { margin-bottom: 0; }
.op-home-more .op-members { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem .4rem; }
.op-home-more .op-member { min-width: 0; }
.op-home-more .op-member span { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .72rem; }
@media (max-width: 767.98px) { .op-home-more { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; } }
/* the same boxes are rendered twice: under the plays (wide screens and phones) or at the end of the sidebar (1200-1699 px,
   where the main column is already longer than the sidebar) */
.op-hm-side { display: none; flex-direction: column; gap: 2.2rem; }
.op-hm-side .op-home-more-col { gap: 2.2rem; }
@media (min-width: 1200px) and (max-width: 1699.98px) { .op-hm-main { display: none; } .op-hm-side { display: flex; } }
/* 1200-1699 px: only Clan War + Discord/Ko-fi go to the sidebar, Newest members stays under the plays (full width) */
.op-hm-main { display: flex; flex-direction: column; min-width: 0; }
.op-hm-main > .op-home-more-col { flex: 1; }
@media (min-width: 1200px) and (max-width: 1699.98px) { .op-hm-main { display: none; } .op-home-more { grid-template-columns: minmax(0, 1fr); } .op-home-more .op-members { grid-template-columns: repeat(8, minmax(0, 1fr)); } }

/* ---------- Menu music player (qw26_49, fable.js opMusic) ---------- */
.op-music { position: fixed; left: 1.2rem; bottom: 1.2rem; z-index: 3600; font-family: var(--op-font-text, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); line-height: 1.4; display: flex; align-items: center; gap: .8rem; width: min(420px, calc(100vw - 2.4rem));
  padding: .65rem .8rem .65rem .65rem; border-radius: 22px; color: #fff; font-size: .85rem;
  background: linear-gradient(160deg, rgba(var(--op-dk-27-23-14, 27, 23, 14), .97), rgba(var(--op-dk-14-12-7, 14, 12, 7), .97)) padding-box,
    var(--op-prism, linear-gradient(135deg, #ffd84d, #ff9f1c)) border-box;
  border: 2px solid transparent; box-shadow: 0 16px 40px rgba(0, 0, 0, .5), 0 0 26px rgba(var(--op-yellow-rgb, 255, 216, 77), .14);
  animation: opu-music-in .35s var(--op-ease, ease) both; }
@keyframes opu-music-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.op-music-disc { position: relative; flex-shrink: 0; width: 58px; height: 58px; padding: 0; border: 0; border-radius: 50%; background: #000; cursor: default; overflow: hidden;
  box-shadow: 0 0 0 3px rgba(var(--op-yellow-rgb, 255, 216, 77), .55); }
.op-music-disc img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; animation: opu-music-spin 9s linear infinite; animation-play-state: paused; }
.op-music.playing .op-music-disc img { animation-play-state: running; }
.op-music-disc::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: rgba(var(--op-dk-14-12-7, 14, 12, 7), 1); box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); }
@keyframes opu-music-spin { to { transform: rotate(360deg); } }
.op-music-eq { position: absolute; left: 0; right: 0; bottom: 6px; display: none; justify-content: center; gap: 2px; height: 14px; z-index: 1; }
.op-music-eq i { width: 3px; height: 100%; border-radius: 2px; background: #fff; transform-origin: bottom; transform: scaleY(.3); }
.op-music.min.playing .op-music-eq { display: flex; }
.op-music.playing .op-music-eq i { animation: opu-music-eq .9s ease-in-out infinite; }
.op-music-eq i:nth-child(2) { animation-delay: -.3s !important; } .op-music-eq i:nth-child(3) { animation-delay: -.6s !important; } .op-music-eq i:nth-child(4) { animation-delay: -.15s !important; }
@keyframes opu-music-eq { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
.op-music-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.op-music-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.op-music-kicker { font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--op-yellow); }
.op-music-title { font-weight: 800; color: #fff; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-music-title:hover { color: var(--op-yellow); }
.op-music-artist { font-size: .75rem; color: var(--op-muted, #b9b3a3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-music-ctrl { display: flex; align-items: center; gap: .2rem; }
.op-music-ctrl button { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #fff; font-size: .85rem; transition: background .15s; }
.op-music-ctrl button:hover { background: rgba(255, 255, 255, .1); }
.op-music-ctrl .op-music-play { width: 34px; height: 34px; background: var(--op-accent, linear-gradient(135deg, #ffd84d, #ff9f1c)); }
.op-music-ctrl .op-music-play:hover { background: var(--op-accent, linear-gradient(135deg, #ffd84d, #ff9f1c)); filter: brightness(1.1); }
.op-music-vol { display: flex; align-items: center; gap: .35rem; margin: 0 .2rem 0 .3rem; flex: 1; min-width: 50px; color: var(--op-muted, #b9b3a3); font-size: .75rem; }
.op-music-vol input { width: 100%; min-width: 0; accent-color: var(--op-yellow); }
.op-music-x { color: var(--op-muted, #b9b3a3) !important; font-size: .75rem !important; width: 26px !important; height: 26px !important; }
.op-music-bar { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.op-music-bar i { display: block; height: 100%; background: var(--op-accent, var(--op-yellow)); transform-origin: left; transform: scaleX(0); transition: transform .25s linear; }
.op-music-hint { display: none; font-size: .72rem; color: var(--op-yellow); font-weight: 700; }
.op-music.blocked .op-music-hint { display: block; }
.op-music.blocked .op-music-play { animation: opu-music-pulse 1.4s ease-in-out infinite; }
@keyframes opu-music-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--op-yellow-rgb, 255, 216, 77), .6); } 50% { box-shadow: 0 0 0 8px rgba(var(--op-yellow-rgb, 255, 216, 77), 0); } }
/* small: only the spinning disc */
.op-music.min { width: auto; padding: .35rem; border-radius: 50%; }
.op-music.min .op-music-body { display: none; }
.op-music.min .op-music-disc { cursor: pointer; }
.op-music.min.blocked .op-music-disc { animation: opu-music-pulse 1.4s ease-in-out infinite; }
html.op-music-on .op-pop { bottom: 7rem; }
@media (max-width: 575.98px) {
  .op-music { left: .6rem; bottom: .6rem; width: calc(100vw - 1.2rem); }
  .op-music-vol { display: none; }
  html.op-music-on .op-pop { bottom: 6.5rem; }
}
html[data-op-lite] .op-music-disc img, html[data-op-lite] .op-music-eq i { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .op-music-disc img, .op-music-eq i, .op-music { animation: none !important; } }

/* ---------- qw26_49.1: page loading bar (Turbo) + empty states ---------- */
.turbo-progress-bar { height: 3px !important; background: var(--op-accent, linear-gradient(90deg, #ffd84d, #ff9f1c)) !important;
  box-shadow: 0 0 12px rgba(var(--op-yellow-rgb, 255, 216, 77), .8), 0 0 4px rgba(255, 255, 255, .6); z-index: 99999 !important; }
.op-empty { gap: .45rem; }
.op-empty-face { width: 54px; height: 54px; color: var(--op-yellow); animation: opu-empty-bob 3.2s ease-in-out infinite; }
.op-empty-line { display: block; font-size: .75rem; opacity: .7; font-style: italic; }
@keyframes opu-empty-bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-5px) rotate(4deg); } }
html[data-op-lite] .op-empty-face { animation: none; }
@media (prefers-reduced-motion: reduce) { .op-empty-face { animation: none; } }

/* ---------- pp calculator /pp (qw26_49.2) ---------- */
.container.op-pp { padding-top: 1.5rem; padding-bottom: 3rem; } /* only the page container: .op-pp alone is the pp number in the score rows of the home page */
.op-pp-hero { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.8rem; }
.op-pp-hero h1 { font-family: var(--op-font-display); font-weight: 800; margin: 0; font-size: clamp(1.7rem, 3vw, 2.3rem); }
.op-pp-hero p { margin: .2rem 0 0; color: var(--op-muted); }
.op-pp-hero-ico { flex-shrink: 0; width: 62px; height: 62px; display: grid; place-items: center; border-radius: 18px; font-size: 1.6rem; color: #fff;
  background: var(--op-accent, linear-gradient(135deg, #ffd84d, #ff9f1c)); box-shadow: 0 10px 30px rgba(var(--op-yellow-rgb, 255, 216, 77), .3); }
.op-pp-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.op-pp-form, .op-pp-out { padding: 1.4rem; }
.op-pp-label { display: block; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--op-muted); margin: 1.2rem 0 .5rem; }
.op-pp-label small { text-transform: none; letter-spacing: 0; font-weight: 600; opacity: .8; }
.op-pp-modes { display: flex; flex-wrap: wrap; gap: .35rem; padding: .3rem; border-radius: 14px; background: rgba(0, 0, 0, .25); }
.op-pp-mode { flex: 1 1 auto; border: 0; background: transparent; color: var(--op-muted); padding: .5rem .8rem; border-radius: 10px; font-weight: 700; font-size: .88rem; }
.op-pp-mode.active { color: #fff; background: var(--op-accent, var(--op-yellow)); }
.op-pp-search { position: relative; display: flex; align-items: center; gap: .6rem; padding: 0 .9rem; border-radius: 14px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .1); }
.op-pp-search > i { color: var(--op-muted); }
.op-pp-search input { flex: 1; min-width: 0; background: transparent; border: 0; color: #fff; padding: .8rem 0; outline: none; }
.op-pp-results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden;
  background: rgba(var(--op-dk-14-12-7, 14, 12, 7), .99); box-shadow: 0 18px 40px rgba(0, 0, 0, .55); }
.op-pp-results:empty { display: none; }
.op-pp-results button { display: flex; align-items: center; gap: .7rem; padding: .55rem .8rem; border: 0; background: transparent; color: #fff; text-align: left; }
.op-pp-results button:hover { background: rgba(255, 255, 255, .07); }
.op-pp-results img, .op-pp-map img { width: 64px; height: 40px; object-fit: cover; border-radius: 8px; flex-shrink: 0; background: rgba(255, 255, 255, .05); }
.op-pp-results span, .op-pp-map > div { display: flex; flex-direction: column; min-width: 0; }
.op-pp-results b, .op-pp-map strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .88rem; }
.op-pp-results small, .op-pp-map small { color: var(--op-muted); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-pp-none { padding: .8rem 1rem; color: var(--op-muted); font-size: .85rem; }
.op-pp-map { display: flex; align-items: center; gap: .8rem; margin-top: .7rem; padding: .7rem; border-radius: 14px; background: rgba(var(--op-yellow-rgb, 255, 216, 77), .08); border: 1px solid rgba(var(--op-yellow-rgb, 255, 216, 77), .3); }
.op-pp-map > div { flex: 1; }
.op-pp-map a, .op-pp-map button { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .07); color: #fff; flex-shrink: 0; }
.op-pp-mods { display: flex; flex-wrap: wrap; gap: .45rem; }
.op-pp-mod { min-width: 52px; padding: .5rem .7rem; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); color: var(--op-muted); font-weight: 800; font-size: .85rem; transition: transform .12s; }
.op-pp-mod:hover { transform: translateY(-2px); color: #fff; }
.op-pp-mod.active { color: #fff; border-color: transparent; background: var(--op-accent, var(--op-yellow)); box-shadow: 0 6px 18px rgba(var(--op-yellow-rgb, 255, 216, 77), .3); }
.op-pp-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.op-pp-accwrap { display: flex; align-items: center; gap: .6rem; }
.op-pp-accwrap input[type=range] { flex: 1; min-width: 0; accent-color: var(--op-yellow); }
.op-pp-accwrap input[type=number] { width: 84px; }
.op-pp-accwrap input[type=number], .op-pp-num { padding: .55rem .6rem; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(0, 0, 0, .3); color: #fff; width: 100%; }
.op-pp-accwrap input[type=number] { width: 84px; }
.op-pp-out { position: sticky; top: 90px; text-align: center; }
.op-pp-big small { display: block; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--op-muted); }
.op-pp-big strong { display: block; font-family: var(--op-font-display); font-weight: 800; font-size: clamp(3rem, 6vw, 4.6rem); line-height: 1.1;
  background: var(--op-accent, linear-gradient(135deg, #ffd84d, #ff9f1c)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.op-pp-big strong em { font-style: normal; font-size: .45em; margin-left: .15em; }
.op-pp-stars { display: inline-block; margin-top: .2rem; font-size: .85rem; color: var(--op-muted); font-weight: 700; }
.op-pp-stars i { color: var(--op-yellow); }
.op-pp.loading .op-pp-big strong { opacity: .5; }
.op-pp-msg { margin-top: .8rem; color: var(--op-muted); font-size: .9rem; }
.op-pp-gain { display: flex; align-items: center; gap: .8rem; text-align: left; margin: 1.1rem 0 0; padding: .85rem 1rem; border-radius: 14px; background: rgba(58, 214, 120, .1); border: 1px solid rgba(58, 214, 120, .35); }
.op-pp-gain > i { font-size: 1.3rem; color: #6ee7a0; }
.op-pp-gain strong { font-size: 1.15rem; }
.op-pp-gain small { display: block; color: var(--op-muted); font-size: .8rem; }
.op-pp-login { margin-top: 1rem; font-size: .85rem; color: var(--op-muted); }
.op-pp-table { width: 100%; margin-top: 1.2rem; border-collapse: separate; border-spacing: 0 4px; font-size: .9rem; }
.op-pp-table th { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--op-muted); font-weight: 800; padding: 0 .8rem; text-align: left; }
.op-pp-table th:last-child, .op-pp-table td:last-child { text-align: right; }
.op-pp-table td { padding: .5rem .8rem; background: rgba(255, 255, 255, .04); }
.op-pp-table td:first-child { border-radius: 10px 0 0 10px; } .op-pp-table td:last-child { border-radius: 0 10px 10px 0; }
@media (max-width: 991.98px) { .op-pp-grid { grid-template-columns: minmax(0, 1fr); } .op-pp-out { position: static; } }
@media (max-width: 575.98px) { .op-pp-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .op-pp-acc { grid-column: 1 / -1; } }

/* ---------- What should I play? /recommend (qw26_49.3) ---------- */
.op-rec-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.op-rec-bar .op-pp-modes { flex: 1 1 420px; }
.op-rec-bar .op-pp-mode { text-decoration: none; text-align: center; }
.op-rec-stars { display: flex; align-items: center; gap: .6rem; padding: .45rem .8rem; border-radius: 14px; background: rgba(0, 0, 0, .25); }
.op-rec-stars label { font-size: .8rem; font-weight: 800; color: var(--op-muted); white-space: nowrap; }
.op-rec-stars label i { color: var(--op-yellow); }
.op-rec-stars input { width: 150px; accent-color: var(--op-yellow); }
.op-rec-stars output { font-weight: 800; min-width: 3.2em; }
.op-rec-dice i { margin-right: .3rem; }
.op-rec-dice:hover i { animation: opu-rec-roll .6s ease; }
@keyframes opu-rec-roll { to { transform: rotate(360deg); } }
.op-rec-h { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; font-family: var(--op-font-display); font-weight: 800; font-size: 1.3rem; margin: 2.2rem 0 1rem; }
.op-rec-h > i { color: var(--op-yellow); }
.op-rec-h small { font-family: var(--op-font-text, inherit); font-size: .8rem; font-weight: 600; color: var(--op-muted); }
.op-rec-more { margin-left: auto; font-size: .85rem; font-family: var(--op-font-text, inherit); text-decoration: none; }
.op-rec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.3rem; }
.op-rec-card { display: flex; flex-direction: column; min-width: 0; border-radius: 18px; overflow: hidden; background: rgba(var(--op-dk-20-17-9, 20, 17, 9), .92);
  border: 1px solid rgba(var(--op-yellow-rgb, 255, 216, 77), .18); transition: transform .2s var(--op-ease, ease), box-shadow .2s; }
.op-rec-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0, 0, 0, .45); }
.op-rec-cover { position: relative; display: block; aspect-ratio: 16 / 6; background: var(--img) center / cover, rgba(255, 255, 255, .05); }
.op-rec-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent 60%); }
.op-rec-sr { position: absolute; left: .7rem; bottom: .6rem; z-index: 1; padding: .2rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 800; color: #fff; background: var(--sr); box-shadow: 0 2px 10px rgba(0, 0, 0, .4); }
.op-rec-grade { position: absolute; right: .7rem; bottom: .3rem; z-index: 1; font-family: var(--op-font-display); font-size: 1.8rem; font-weight: 900; }
.op-rec-body { display: flex; flex-direction: column; gap: .15rem; padding: .85rem 1rem 1rem; min-width: 0; }
.op-rec-title { font-weight: 800; color: #fff; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-rec-title:hover { color: var(--op-yellow); }
.op-rec-artist, .op-rec-meta { font-size: .8rem; color: var(--op-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-rec-yours { font-size: .78rem; font-weight: 700; color: #6ee7a0; }
.op-rec-btns { display: flex; gap: .5rem; margin-top: .6rem; }
.op-rec-btns .op-btn { flex: 1; justify-content: center; }
@media (max-width: 575.98px) { .op-rec-stars { width: 100%; } .op-rec-stars input { flex: 1; width: auto; min-width: 0; } .op-rec-dice { width: 100%; justify-content: center; } }

/* ---------- Rivals (qw26_49.4) + profile views ---------- */
.op-pf-rival i { margin-right: .35rem; }
.op-pf-rival.active { color: #fff !important; background: var(--op-accent, linear-gradient(135deg, #ffd84d, #ff9f1c)) !important; border-color: transparent !important; }
.op-pf-views { border: 0; font: inherit; color: inherit; background: transparent; padding: 0; }
.op-pf-views-wrap { position: relative; display: inline-flex; }
button.op-pf-views { cursor: pointer; }
.op-pf-visitors { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; width: 260px; display: flex; flex-direction: column; gap: .2rem; padding: .7rem;
  border-radius: 16px; background: rgba(var(--op-dk-14-12-7, 14, 12, 7), .99); border: 1px solid rgba(var(--op-yellow-rgb, 255, 216, 77), .25); box-shadow: 0 18px 40px rgba(0, 0, 0, .55); }
.op-pf-visitors[hidden] { display: none; }
.op-pf-visitors strong { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--op-muted); margin-bottom: .2rem; }
.op-pf-visitors a { display: flex; align-items: center; gap: .55rem; padding: .35rem .4rem; border-radius: 10px; color: #fff; text-decoration: none; font-size: .88rem; min-width: 0; }
.op-pf-visitors a:hover { background: rgba(255, 255, 255, .06); }
.op-pf-visitors img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.op-pf-visitors a > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-pf-visitors small { color: var(--op-muted); font-size: .72rem; white-space: nowrap; }
.op-pf-visitors em { font-size: .8rem; color: var(--op-muted); }
.op-riv-list { display: flex; flex-direction: column; gap: 1.6rem; }
.op-riv-card { padding: 1.4rem; }
.op-riv-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1rem; }
.op-riv-p { display: flex; flex-direction: column; align-items: center; gap: .35rem; text-decoration: none; color: #fff; min-width: 0; text-align: center; }
.op-riv-p img { width: 86px; height: 86px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px rgba(var(--op-yellow-rgb, 255, 216, 77), .5); }
.op-riv-p span { font-weight: 800; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-riv-p b { font-size: .85rem; color: var(--op-muted); }
.op-riv-score { text-align: center; display: flex; flex-direction: column; gap: .2rem; }
.op-riv-score small { color: var(--op-muted); font-size: .78rem; }
.op-riv-score strong { font-family: var(--op-font-display); font-size: 2.6rem; font-weight: 900; line-height: 1.1; color: rgba(255, 255, 255, .55); }
.op-riv-score strong .win { color: var(--op-yellow); text-shadow: 0 0 18px rgba(var(--op-yellow-rgb, 255, 216, 77), .5); }
.op-riv-lost { margin-top: 1.2rem; }
.op-riv-lost h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--op-muted); font-weight: 800; margin-bottom: .5rem; }
.op-riv-lost h3 i { color: #ff6b7a; }
.op-riv-row { display: flex; align-items: center; gap: .8rem; padding: .45rem .55rem; border-radius: 12px; text-decoration: none; color: #fff; min-width: 0; }
.op-riv-row:hover { background: rgba(255, 255, 255, .05); }
.op-riv-row img { width: 64px; height: 40px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.op-riv-map { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.op-riv-map b, .op-riv-map small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-riv-map small { color: var(--op-muted); font-size: .75rem; }
.op-riv-cmp { font-size: .82rem; font-weight: 700; white-space: nowrap; }
.op-riv-cmp i { color: var(--op-muted); margin: 0 .25rem; font-size: .7rem; }
.op-riv-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; justify-content: flex-end; }
.op-riv-sugg { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.2rem; }
.op-riv-sp { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 1.1rem; border-radius: 18px; text-align: center; min-width: 0;
  background: rgba(var(--op-dk-20-17-9, 20, 17, 9), .92); border: 1px solid rgba(var(--op-yellow-rgb, 255, 216, 77), .18); }
.op-riv-sp img:not(.op-lb-flag) { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.op-riv-sn { color: #fff; font-weight: 800; text-decoration: none; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-riv-sp small { color: var(--op-muted); font-size: .8rem; }
@media (max-width: 575.98px) {
  .op-riv-p img { width: 58px; height: 58px; }
  .op-riv-score strong { font-size: 1.9rem; }
  .op-riv-cmp { display: none; }
}

/* ---------- medal progress (qw26_49.5) ---------- */
.op-medal-prog { display: block; width: 70%; height: 5px; margin: .3rem auto 0; border-radius: 5px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.op-medal-prog i { display: block; height: 100%; width: var(--p); border-radius: 5px; background: var(--mc, var(--op-yellow)); box-shadow: 0 0 8px var(--mc, var(--op-yellow)); }
.op-medal-num { display: block; font-size: .65rem; color: var(--op-muted); margin-top: .15rem; font-variant-numeric: tabular-nums; }
.op-medal.locked .op-medal-prog, .op-medal.locked .op-medal-num { filter: none; opacity: 1; }

/* ---------- Kuroosu Wrapped /wrapped/ID (qw26_49.6) ---------- */
.op-wr { display: flex; justify-content: center; padding: 1.2rem 12px 3rem; }
.op-wr-story { position: relative; width: min(460px, 100%); height: min(820px, calc(100vh - 130px)); min-height: 560px; border-radius: 28px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 2px rgba(255, 255, 255, .08); user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.op-wr-bars { position: absolute; top: 12px; left: 14px; right: 54px; z-index: 5; display: flex; gap: 4px; }
.op-wr-bars span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.op-wr-bars i { display: block; height: 100%; background: #fff; transform-origin: left; transform: scaleX(0); }
.op-wr-close { position: absolute; top: 6px; right: 10px; z-index: 6; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .25); color: #fff; }
.op-wr-nav { position: absolute; top: 0; bottom: 0; z-index: 1; width: 30%; border: 0; background: transparent; }
.op-wr-nav.prev { left: 0; } .op-wr-nav.next { right: 0; width: 70%; }
.op-wr-slide { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: 3.4rem 1.6rem 2rem;
  text-align: center; color: #fff; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility .45s; }
.op-wr-slide.on { opacity: 1; visibility: visible; z-index: 2; }
.op-wr-slide > * { position: relative; z-index: 4; }
.op-wr-slide a, .op-wr-slide button { position: relative; z-index: 4; }
.op-wr-slide.on > * { animation: opu-wr-up .6s cubic-bezier(.2, .8, .2, 1) both; }
.op-wr-slide.on > *:nth-child(2) { animation-delay: .1s; } .op-wr-slide.on > *:nth-child(3) { animation-delay: .2s; } .op-wr-slide.on > *:nth-child(4) { animation-delay: .3s; }
.op-wr-slide.on > *:nth-child(5) { animation-delay: .4s; } .op-wr-slide.on > *:nth-child(6) { animation-delay: .5s; } .op-wr-slide.on > *:nth-child(n+7) { animation-delay: .6s; }
@keyframes opu-wr-up { from { opacity: 0; transform: translateY(22px) scale(.97); } to { opacity: 1; transform: none; } }
.op-wr-slide.s0 { background: radial-gradient(circle at 30% 20%, #ff6fd0 0, transparent 45%), radial-gradient(circle at 80% 80%, #6cb8ff 0, transparent 45%), linear-gradient(160deg, #2a1050, #12082a); }
.op-wr-slide.s1 { background: radial-gradient(circle at 80% 10%, #ffb3ec 0, transparent 40%), linear-gradient(160deg, #ff4fb0, #7a2cff); }
.op-wr-slide.s2 { background: radial-gradient(circle at 20% 90%, #7cf0c8 0, transparent 45%), linear-gradient(160deg, #1d7cf2, #3a1a8a); }
.op-wr-slide.s3 { background: radial-gradient(circle at 80% 20%, #ffd36b 0, transparent 40%), linear-gradient(160deg, #ff7a59, #b0207a); }
.op-wr-slide.s4 { background: linear-gradient(160deg, #1b1240, #3b1670 60%, #0f2b5c); }
.op-wr-slide.s5 { background: linear-gradient(180deg, rgba(10, 6, 24, .55), rgba(10, 6, 24, .92)), var(--img) center / cover, #20103a; }
.op-wr-slide.s6 { background: radial-gradient(circle at 50% 30%, #ffe08a 0, transparent 35%), linear-gradient(160deg, #3a2a8f, #0d0b2b); }
.op-wr-slide.s7 { background: radial-gradient(circle at 10% 10%, #7cf0c8 0, transparent 40%), linear-gradient(160deg, #0f6b5a, #10224a); }
.op-wr-slide.s8 { background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .35) 0, transparent 40%), linear-gradient(160deg, #6a3df0, #ff6fd0); }
.op-wr-slide.s9 { background: radial-gradient(circle at 30% 20%, #ff6fd0 0, transparent 40%), radial-gradient(circle at 80% 85%, #7cf0c8 0, transparent 40%), linear-gradient(160deg, #2a1050, #0f1030); }
.op-wr-kicker { font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.op-wr-gap { margin-top: 1.4rem; }
.op-wr-year { font-family: var(--op-font-display, inherit); font-weight: 900; font-size: 5.2rem; line-height: 1; margin: 0;
  background: linear-gradient(90deg, #fff, #ffd1f2, #c9e6ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.op-wr-av { width: 130px; height: 130px; border-radius: 50%; object-fit: cover; margin: 1rem 0 .3rem; box-shadow: 0 0 0 5px rgba(255, 255, 255, .85), 0 16px 40px rgba(0, 0, 0, .4); }
.op-wr-slide h2 { font-family: var(--op-font-display, inherit); font-weight: 800; font-size: 1.6rem; margin: 0; }
.op-wr-title { font-size: 2.1rem !important; line-height: 1.15; }
.op-wr-slide p { margin: .4rem 0 0; font-size: 1rem; line-height: 1.5; opacity: .95; max-width: 340px; }
.op-wr-slide p a { color: #fff; }
.op-wr-small { font-size: .88rem !important; opacity: .8 !important; }
.op-wr-big { font-family: var(--op-font-display, inherit); font-weight: 900; font-size: clamp(3.6rem, 16vw, 5.4rem); line-height: 1; text-shadow: 0 8px 30px rgba(0, 0, 0, .25); }
.op-wr-emoji { font-size: 4.6rem; line-height: 1; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .3)); }
.op-wr-list { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: .5rem; margin-top: .8rem; }
.op-wr-barrow { display: grid; grid-template-columns: 90px minmax(0, 1fr) 44px; align-items: center; gap: .6rem; font-size: .88rem; font-weight: 700; text-align: left; }
.op-wr-barrow i { display: block; height: 10px; border-radius: 10px; background: rgba(255, 255, 255, .2); position: relative; overflow: hidden; }
.op-wr-barrow i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: 10px; background: #fff; }
.op-wr-barrow b { text-align: right; }
.op-wr-mods { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.op-wr-mods span { display: flex; flex-direction: column; padding: .55rem 1rem; border-radius: 14px; background: rgba(255, 255, 255, .16); font-weight: 900; font-size: 1.1rem; }
.op-wr-mods span.top { background: #fff; color: #b0207a; }
.op-wr-mods small { font-size: .7rem; font-weight: 700; opacity: .8; }
.op-wr-maps { width: 100%; display: flex; flex-direction: column; gap: .55rem; margin-top: .6rem; }
.op-wr-map { position: relative; display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; border-radius: 16px; overflow: hidden; color: #fff; text-decoration: none; text-align: left;
  background: linear-gradient(90deg, rgba(15, 8, 34, .9), rgba(15, 8, 34, .55)), var(--img) center / cover; box-shadow: 0 8px 20px rgba(0, 0, 0, .3); }
.op-wr-map b { font-family: var(--op-font-display, inherit); font-size: 1.3rem; width: 2rem; flex-shrink: 0; }
.op-wr-map span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.op-wr-map strong, .op-wr-map small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-wr-map small { font-size: .74rem; opacity: .8; }
.op-wr-map em { font-style: normal; font-weight: 900; font-size: .9rem; flex-shrink: 0; }
.op-wr-grade { font-family: var(--op-font-display, inherit); font-size: 4.4rem; font-weight: 900; line-height: 1; filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .5)); }
.op-wr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; width: 100%; max-width: 360px; margin-top: .8rem; }
.op-wr-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.op-wr-grid div { display: flex; flex-direction: column; gap: .15rem; padding: .8rem .5rem; border-radius: 16px; background: rgba(255, 255, 255, .14); min-width: 0; }
.op-wr-grid strong { font-family: var(--op-font-display, inherit); font-weight: 900; font-size: 1.35rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-wr-grid small { font-size: .7rem; opacity: .85; font-weight: 700; }
.op-wr-emblem { width: 150px; height: 150px; filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .35)); }
.op-wr-sum { display: flex; flex-direction: column; align-items: center; gap: .3rem; width: 100%; }
.op-wr-sum img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px rgba(255, 255, 255, .8); }
.op-wr-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.2rem; }
@media (max-width: 575.98px) { .op-wr { padding: .4rem 8px 2rem; } .op-wr-story { height: calc(100vh - 110px); min-height: 520px; border-radius: 22px; } }
@media (prefers-reduced-motion: reduce) { .op-wr-slide.on > * { animation: none; } }

/* Ranked Play menu entry: the real Celestial rank emblem instead of a generic icon (qw26_52.0.1) */
.op-nav-links .nav-link i.op-nav-rank { opacity: 1; font-style: normal; line-height: 0; vertical-align: middle; }
.op-nav-links .nav-link i.op-nav-rank img { width: 20px; height: 20px; display: block; filter: drop-shadow(0 0 5px rgba(183, 124, 255, .55)); transition: transform .3s var(--op-ease, ease); }
.op-nav-links .nav-link:hover i.op-nav-rank img { transform: rotate(20deg) scale(1.15); }

/* pp calculator on every beatmap page (qw26_55, templates/beatmap.html, reuses .op-pp-*) */
.op-map-pp.op-pp { margin-top: 1.5rem; padding: 1.25rem; border-radius: 20px; background: var(--op-card); }
.op-map-pp-full { font-size: .85rem; font-weight: 700; color: var(--op-muted); text-decoration: none; }
.op-map-pp-full:hover { color: #fff; }
.op-map-pp-full i { margin-left: .3rem; font-size: .8em; }
.op-map-pp-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 2rem; align-items: center; }
.op-map-pp-form > .op-pp-label:first-child { margin-top: 0; }
.op-map-pp-out { text-align: center; min-width: 0; }
.op-pp-embed .op-pp-big strong { font-size: clamp(2.6rem, 5vw, 3.8rem); }
.op-pp-embed .op-pp-gain { margin-top: .9rem; }
.op-pp-embed .op-pp-table { display: block; margin-top: 1.3rem; }
.op-pp-embed .op-pp-table thead { display: none; }
.op-pp-embed .op-pp-table tbody { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
.op-pp-embed .op-pp-table tr { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .55rem .3rem; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.op-pp-embed .op-pp-table td, .op-pp-embed .op-pp-table td:last-child { padding: 0; background: transparent; border-radius: 0; text-align: center; }
.op-pp-embed .op-pp-table td:first-child { font-size: .72rem; font-weight: 800; color: var(--op-muted); }
@media (max-width: 991.98px) { .op-map-pp-grid { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; } }
@media (max-width: 575.98px) { .op-pp-embed .op-pp-table tbody { gap: .3rem; } }

/* ===== qw26_57: country leaderboard, map collections, skill chart ===== */
.op-ctry-modes { margin-bottom: 1.4rem; }
.op-ctry-list { display: flex; flex-direction: column; gap: .6rem; }
.op-ctry-row { display: flex; align-items: center; gap: 1rem; padding: .85rem 1.1rem; border-radius: 18px; background: var(--op-card); color: #fff; text-decoration: none; min-width: 0; transition: transform .15s; }
.op-ctry-row:hover { transform: translateX(4px); color: #fff; }
.op-ctry-place { width: 3rem; font-family: var(--op-font-display); font-weight: 800; font-size: 1.15rem; color: var(--op-muted); flex-shrink: 0; }
.op-ctry-top1 .op-ctry-place { color: var(--op-metal-hi, #ffd84d); } .op-ctry-top2 .op-ctry-place { color: #d5dbe6; } .op-ctry-top3 .op-ctry-place { color: #d99a6c; }
.op-ctry-flag { width: 46px; height: 32px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.op-ctry-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.op-ctry-name b { font-size: 1.05rem; }
.op-ctry-name small, .op-ctry-num small { color: var(--op-muted); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-ctry-bar { height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .07); overflow: hidden; margin-top: .2rem; }
.op-ctry-bar i { display: block; height: 100%; border-radius: 99px; background: var(--op-accent, var(--op-yellow)); }
.op-ctry-num { display: flex; flex-direction: column; align-items: flex-end; min-width: 92px; flex-shrink: 0; }
.op-ctry-num b { font-family: var(--op-font-display); font-size: 1.1rem; }

.op-col-back { display: inline-block; margin: -.8rem 0 1.2rem; color: var(--op-muted); text-decoration: none; font-weight: 700; font-size: .88rem; }
.op-col-back:hover { color: #fff; }
.op-col-info { margin-bottom: 1.2rem; }
.op-col-mine, .op-col-all, .op-col-maps, .op-col-edit { padding: 1.25rem; margin-bottom: 1.6rem; }
.op-col-count { color: var(--op-muted); font-size: .85rem; font-weight: 700; }
.op-col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.op-col-grid .op-empty { grid-column: 1 / -1; }
.op-col-card { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: rgba(255, 255, 255, .04); color: #fff; text-decoration: none; min-width: 0; transition: transform .15s; }
.op-col-card:hover { transform: translateY(-3px); color: #fff; }
.op-col-cover { display: block; height: 84px; background: linear-gradient(135deg, rgba(var(--op-yellow-rgb, 255, 216, 77), .25), rgba(255, 255, 255, .03)); }
.op-col-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.op-col-body { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .85rem .85rem; min-width: 0; }
.op-col-body b, .op-col-body small, .op-col-body em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-col-body small { color: var(--op-muted); font-size: .8rem; }
.op-col-body em { font-style: normal; font-size: .82rem; opacity: .8; }
.op-col-new { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.1rem; }
.op-col-new input[type=text] { flex: 1 1 200px; width: auto; }
.op-col-check { display: inline-flex; align-items: center; gap: .4rem; color: var(--op-muted); font-size: .88rem; margin: 0; }
.op-col-search input { width: 240px; max-width: 100%; }
.op-col-edit form + form { margin-top: 1rem; }
.op-col-map { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.op-col-map .op-riv-row { flex: 1; }
.op-col-meta { color: var(--op-muted); font-size: .84rem; font-weight: 700; white-space: nowrap; margin-left: .8rem; }
.op-col-meta i { color: var(--op-yellow); font-size: .8em; }
.op-col-dl { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; flex-shrink: 0; }
.op-col-dl:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.op-col-rm:hover { background: rgba(255, 90, 90, .35); }
.op-col-menu { padding: .5rem; min-width: 250px; }
.op-col-menu-list { display: flex; flex-direction: column; max-height: 240px; overflow-y: auto; }
.op-col-menu-item { display: flex; align-items: center; gap: .55rem; padding: .45rem .55rem; border: 0; border-radius: 9px; background: transparent; color: #fff; text-align: left; min-width: 0; }
.op-col-menu-item:hover { background: rgba(255, 255, 255, .07); }
.op-col-menu-item i { opacity: 0; color: #6ee7a0; }
.op-col-menu-item.active i { opacity: 1; }
.op-col-menu-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-col-menu-empty { display: block; padding: .4rem .55rem; color: var(--op-muted); font-size: .85rem; white-space: normal; }
.op-col-menu-new { display: flex; gap: .4rem; margin-top: .5rem; }
.op-col-menu-new input { flex: 1; min-width: 0; padding: .4rem .6rem; border-radius: 9px; border: 0; background: rgba(255, 255, 255, .07); color: #fff; }
.op-col-menu-new button { width: 34px; border: 0; border-radius: 9px; background: var(--op-accent, var(--op-yellow)); color: #fff; }
.op-col-menu-all { display: block; margin-top: .5rem; text-align: center; font-size: .82rem; color: var(--op-muted); text-decoration: none; }

.op-skills-body { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 1.5rem; align-items: center; }
.op-skills-chart svg { width: 100%; height: auto; display: block; }
.op-skills-grid { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 1; }
.op-skills-shape { fill: rgba(var(--op-yellow-rgb, 255, 216, 77), .28); stroke: var(--pfc, var(--op-yellow)); stroke-width: 2; stroke-linejoin: round; }
.op-skills-dot { fill: var(--pfc, var(--op-yellow)); }
.op-skills-label { fill: #fff; font-size: 12px; font-weight: 700; }
.op-skills-list { display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.op-skills-row { display: grid; grid-template-columns: 110px 38px minmax(0, 1fr); align-items: center; column-gap: .7rem; }
.op-skills-row span { font-weight: 700; }
.op-skills-row b { font-family: var(--op-font-display); text-align: right; }
.op-skills-row i { display: block; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.op-skills-row em { display: block; height: 100%; border-radius: 99px; background: var(--pfc, var(--op-accent, var(--op-yellow))); }
.op-skills-row small { grid-column: 1 / -1; color: var(--op-muted); font-size: .76rem; }
@media (max-width: 767.98px) {
  .op-ctry-hide { display: none !important; }
  .op-ctry-row { gap: .6rem; padding: .7rem .8rem; }
  .op-ctry-place { width: 2.2rem; font-size: 1rem; }
  .op-ctry-num { min-width: 64px; }
  .op-skills-body { grid-template-columns: minmax(0, 1fr); }
  .op-col-meta { margin-left: .3rem; }
}

/* ===== qw26_57: clan level, badges, statistics ===== */
.op-cl-discord-tag { text-decoration: none; }
.op-cl-lvl-head { display: flex; align-items: center; gap: 1.2rem; }
.op-cl-lvl-num { width: 72px; height: 72px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; font-family: var(--op-font-display); font-weight: 900; font-size: 1.9rem; color: #fff;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .35), transparent 55%), var(--cl, var(--op-yellow)); box-shadow: 0 0 24px rgba(var(--op-yellow-rgb, 255, 216, 77), .25); }
.op-cl-lvl-info { flex: 1; min-width: 0; }
.op-cl-lvl-info .op-cl-h { margin-bottom: .55rem; }
.op-cl-lvl-info small { display: block; margin-top: .45rem; color: var(--op-muted); font-size: .8rem; }
.op-cl-lvl-bar { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.op-cl-lvl-bar i { display: block; height: 100%; border-radius: 99px; background: var(--cl, var(--op-accent, var(--op-yellow))); }
.op-cl-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .7rem; margin-top: 1.2rem; }
.op-cl-badge { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .8rem .4rem; border-radius: 14px; background: rgba(255, 255, 255, .04); text-align: center; }
.op-cl-badge span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; font-size: 1.15rem; color: #1a1426; background: var(--bc); box-shadow: 0 0 16px color-mix(in srgb, var(--bc) 45%, transparent); }
.op-cl-badge b { font-size: .8rem; }
.op-cl-badge-off { opacity: .38; }
.op-cl-badge-off span { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: none; }
.op-cl-statgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.op-cl-statbox { min-width: 0; padding: 1rem; border-radius: 16px; background: rgba(255, 255, 255, .04); display: flex; flex-direction: column; gap: .3rem; }
.op-cl-statbox small { color: var(--op-muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
.op-cl-statbox strong { font-family: var(--op-font-display); font-size: 1.25rem; }
.op-cl-statbox strong em { font-style: normal; font-size: .72rem; font-family: inherit; margin-left: .4rem; }
.op-cl-statbox strong em.up { color: #6ee7a0; } .op-cl-statbox strong em.down { color: #ff8a8a; }
.op-cl-days { display: flex; align-items: flex-end; gap: 2px; height: 78px; margin-top: auto; }
.op-cl-days span { flex: 1; min-width: 0; height: var(--h); min-height: 2px; border-radius: 3px 3px 0 0; background: var(--cl, var(--op-accent, var(--op-yellow))); opacity: .85; }
.op-cl-line { width: 100%; height: 78px; margin-top: auto; overflow: visible; }
.op-cl-line polyline { fill: none; stroke: var(--cl, var(--op-yellow)); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.op-cl-soon { margin: auto 0 0; color: var(--op-muted); font-size: .85rem; }
.op-cl-facts { gap: .7rem; }
.op-cl-facts > div, .op-cl-best { display: flex; flex-direction: column; min-width: 0; }
.op-cl-facts strong { font-size: 1.05rem; }
.op-cl-best { text-decoration: none; color: #fff; }
.op-cl-best strong span { font-family: var(--bs-body-font-family); font-size: .8rem; font-weight: 600; color: var(--op-muted); }
.op-cl-best em { font-style: normal; font-size: .8rem; color: var(--op-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 991.98px) { .op-cl-statgrid { grid-template-columns: minmax(0, 1fr); } }


/* ===== qw26_58: leaderboard "Pro Table" (draft B) ===== */
.op-lbx-top { margin: 1.4rem 0 1.2rem; }
.op-lbx-top h1 { font-family: var(--op-font-display); font-weight: 800; font-size: clamp(1.7rem, 3vw, 2.2rem); margin: 0; }
.op-lbx-top p { color: var(--op-muted); margin: .15rem 0 .6rem; }
.op-lbx-lay { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.op-lbx-side { position: sticky; top: 92px; padding: 1.1rem; border-radius: 22px; background: var(--op-card); display: flex; flex-direction: column; gap: 2px; }
.op-lbx-side h3 { font-family: inherit; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--op-muted); font-weight: 800; margin: 1rem 0 .35rem; }
.op-lbx-side h3:first-child { margin-top: 0; }
.op-lbx-opt { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .42rem .7rem; border: 0; border-radius: 11px; background: transparent; color: #fff; font-weight: 700; font-size: .9rem; text-align: left; }
.op-lbx-opt:hover:not(:disabled) { background: rgba(255, 255, 255, .06); }
.op-lbx-opt.active { background: rgba(var(--op-yellow-rgb, 255, 216, 77), .2); }
.op-lbx-opt:disabled { opacity: .35; }
.op-lbx-opt img { width: 18px; height: 18px; }
.op-lbx-opt img.op-lbx-flag { width: 22px; height: 15px; }
.op-lbx-opt i { width: 18px; text-align: center; color: var(--op-yellow); font-size: .85rem; }
.op-lbx-main { min-width: 0; }
.op-lbx-table { display: flex; flex-direction: column; gap: 5px; }
.op-lbx-row { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr) 6rem 6rem 5rem 4.5rem 5.5rem 9rem 7rem; align-items: center; column-gap: .6rem; padding: .5rem .9rem; border-radius: 14px;
  background: var(--op-card); color: #fff; text-decoration: none; font-variant-numeric: tabular-nums; position: relative; overflow: hidden; }
a.op-lbx-row:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.op-lbx-row > span { text-align: right; white-space: nowrap; position: relative; }
.op-lbx-row > span:nth-child(-n+2) { text-align: left; }
.op-lbx-row > span.on { color: #fff; font-weight: 800; }
.op-lbx-row > span:not(.on):not(.op-lbx-no):not(.op-lbx-pl):not(.op-lbx-pp) { color: var(--op-muted); }
.op-lbx-head { background: transparent; padding-top: .1rem; padding-bottom: .1rem; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; }
.op-lbx-head > span { color: var(--op-muted) !important; }
.op-lbx-head > span.on { color: var(--op-yellow) !important; }
.op-lbx-no { font-family: var(--op-font-display); font-weight: 800; }
.op-lbx-top1 .op-lbx-no { color: var(--op-metal-hi, #ffd84d); } .op-lbx-top2 .op-lbx-no { color: #d5dbe6; } .op-lbx-top3 .op-lbx-no { color: #d99a6c; }
.op-lbx-pl { display: flex; align-items: center; gap: .55rem; min-width: 0; font-weight: 700; }
.op-lbx-av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.op-lbx-flag { width: 22px; height: 15px; border-radius: 3px; object-fit: cover; flex-shrink: 0; }
.op-lbx-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.op-lbx-clan { color: var(--op-muted); font-size: .8rem; font-weight: 600; }
.op-lbx-pp { font-family: var(--op-font-display); font-weight: 800; font-size: 1.05rem; }
.op-lbx-grades b { display: inline-block; min-width: 1.7rem; margin-left: .15rem; padding: .05rem .25rem; border-radius: 6px; background: rgba(255, 255, 255, .07); font-size: .76rem; text-align: center; color: #fff; }
.op-lbx-me { background: rgba(255, 122, 209, .2); box-shadow: inset 4px 0 0 #ff7ad1; }
.op-lbx-me .op-lbx-no { color: #ff9ad8; }
.op-lbx-banner::before { content: ""; position: absolute; inset: 0; background: var(--lb-banner) center / cover; opacity: .2; pointer-events: none; }
@media (max-width: 1699.98px) { .op-lbx-row { grid-template-columns: 3.4rem minmax(0, 1fr) 5.5rem 5.5rem 4.6rem 4.2rem 5.2rem 8.4rem; } .op-lbx-c1 { display: none !important; } }
@media (max-width: 1399.98px) { .op-lbx-row { grid-template-columns: 3.2rem minmax(0, 1fr) 5.2rem 5.2rem 4.4rem 4rem; } .op-lbx-c2 { display: none !important; } .op-lbx-role { display: none; } }
@media (max-width: 991.98px) {
  .op-lbx-lay { grid-template-columns: minmax(0, 1fr); }
  .op-lbx-side { position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .3rem; }
  .op-lbx-side h3 { width: 100%; margin: .5rem 0 .1rem; }
  .op-lbx-opt { width: auto; }
}
@media (max-width: 575.98px) { .op-lbx-row { grid-template-columns: 2.6rem minmax(0, 1fr) 4.4rem 4.6rem; padding: .45rem .6rem; column-gap: .4rem; } .op-lbx-c3, .op-lbx-clan, .op-lbx-row .op-lb-rank-emb { display: none !important; } .op-lbx-av { width: 28px; height: 28px; } }

/* ===== qw26_58: profile from draft A (two columns at the top, no tabs) ===== */
.op-pf-stats.op-pfa-main { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.op-pfa-cols { margin-top: 1.25rem; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.op-pfa-col { min-width: 0; }
.op-pfa-col:empty { display: none; }
.op-pfa-col .op-skills-body { grid-template-columns: minmax(0, 1fr); }
.op-pfa-more .op-pf-stats { background: transparent; border-top: 0; }
@media (max-width: 1199.98px) { .op-pfa-cols { grid-template-columns: minmax(0, 1fr); } .op-pf-stats.op-pfa-main { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .op-pf-stats.op-pfa-main { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* qw26_58.0.2: no empty holes next to a shorter column (profile top block, home page) */
.op-pfa-col .op-skills-chart { max-width: 230px; margin: -.6rem auto -.4rem; }
.op-pfa-col .op-skills-list { gap: .45rem; padding: 0 .6rem .3rem; }
.op-pfa-col .op-skills-row small { display: none; }
.op-pfa-col .op-skills-body { gap: .4rem; }
.op-home-plays { align-items: stretch; }
[data-op-stick] { position: sticky; align-self: start; }
@media (max-width: 1199.98px) { [data-op-stick] { position: static; } }

/* qw26_58.0.11: leaderboard rows with many badges (clan + heart + verified + emblem + two roles): the name shrank to nothing and
   the role badges ran over the pp column. The name is always shown in full now; what does not fit behind it fades out. */
.op-lbx-pl { overflow: hidden; }
.op-lbx-name { flex: 0 0 auto; max-width: 100%; }
.op-lbx-pl > :not(.op-lbx-name):not(.op-lbx-role) { flex-shrink: 0; }
.op-lbx-role { flex: 0 10 auto; min-width: 0; overflow: hidden; white-space: nowrap; }
/* what does not fit fades out instead of ending in a hard cut */
.op-lbx-pl { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); }

/* design menu: third swatch for the Glass design (qw26_59) */
.op-design-sw-glass { background: radial-gradient(circle at 20% 20%, #6a5aff, transparent 60%), radial-gradient(circle at 85% 30%, #ff56aa, transparent 55%), radial-gradient(circle at 70% 100%, #2896ff, transparent 60%), #0b0b14; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 0 0 2px rgba(255, 255, 255, .35); }
.op-design-pick { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

/* ===== click effect "gel" (qw26_59.0.1, owner: the sparks at the cursor are gone, the effect belongs to the button itself) =====
   The clicked thing gives way like soft glass and springs back; inside it light blooms from the spot that was hit and a
   streak runs across. fable.js adds .op-gelling + a <span class="op-gel"> for 0.8 s. Off with "Reduce effects". */
@keyframes opu-gel-bloom { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
@keyframes opu-gel-sweep { to { left: 130%; } }
@keyframes opu-gel-press {
  0% { transform: scale(1); }
  22% { transform: scale(.935, .955); }
  52% { transform: scale(1.04, 1.03); }
  76% { transform: scale(.99, .995); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { }

/* qw26_59.0.3: the fade at the end of the player column (qw26_58.0.11) also cut the ring around the avatars on the left:
   the column gets room around itself, so rings and frames lie inside the part that is drawn */
.op-lbx-pl { padding: 7px 0 7px 8px; margin: -7px 0 -7px -8px; }
.op-design-pick { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

/* ===== friends page (qw26_59.0.4, templates/user/relations.html): head, filter pills, cards. Neutral whites, so it fits Glass and Classic. ===== */
.op-fr { padding-top: 1.6rem; padding-bottom: 3rem; }
.op-fr-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.op-fr-head h1 { font-size: 2.4rem; font-weight: 800; margin: 0 0 .2rem !important; }
.op-fr-head p { margin: 0; color: var(--op-muted); }
.op-fr-alert { padding: .7rem 1rem; border-radius: 14px; margin-bottom: 1rem; background: rgba(255, 255, 255, .08); }
.op-fr-alert-err { background: rgba(255, 94, 107, .18); }
.op-fr-filter { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .07); margin-bottom: 1.3rem; max-width: 100%; }
.op-fr-filter button { border: 0; background: none; color: var(--op-muted); font-weight: 600; font-size: .9rem; padding: .5rem 1rem; border-radius: 999px; display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; }
.op-fr-filter button b { font-weight: 700; font-size: .78rem; padding: .05rem .45rem; border-radius: 999px; background: rgba(255, 255, 255, .1); color: inherit; }
.op-fr-filter button:hover { color: #fff; }
.op-fr-filter button.active { background: rgba(255, 255, 255, .2); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.op-fr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 1rem; }
.op-fr-card { display: flex; flex-direction: column; gap: .9rem; padding: 1.1rem 1.2rem; border-radius: 24px; background: rgba(255, 255, 255, .06); min-width: 0; transition: transform .18s ease, background .18s ease; }
.op-fr-card:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .1); }
.op-fr-card[hidden] { display: none; }
.op-fr-who { display: flex; align-items: center; gap: .9rem; min-width: 0; text-decoration: none; color: inherit; }
.op-fr-av { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.op-fr-txt { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.op-fr-txt strong { font-size: 1.1rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.op-fr-txt small { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; font-size: .78rem; color: var(--op-muted); }
.op-fr-txt em { font-style: normal; white-space: nowrap; }
.op-fr-tag { display: inline-flex; align-items: center; gap: .3rem; padding: .16rem .55rem; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; font-weight: 600; }
.op-fr-tag-mutual { background: rgba(255, 111, 174, .22); color: #ffb3d6; }
.op-fr-tag-new { background: rgba(72, 198, 255, .2); color: #a9e4ff; }
.op-fr-actions { display: flex; gap: .5rem; }
.op-fr-btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .55rem .7rem; border: 0; border-radius: 999px; font-weight: 600; font-size: .88rem;
  background: rgba(255, 255, 255, .1); color: #fff !important; text-decoration: none; cursor: pointer; transition: background .16s ease; }
.op-fr-btn:hover { background: rgba(255, 255, 255, .2); }
.op-fr-btn-main { background: #f5f5f7; color: #0b0b10 !important; }
.op-fr-btn-main:hover { background: #fff; }
.op-fr-none { color: var(--op-muted); padding: 2rem 0; text-align: center; }
.op-fr-empty { text-align: center; padding: 4rem 1.4rem; border-radius: 30px; background: rgba(255, 255, 255, .05); }
.op-fr-empty > i { font-size: 2.6rem; opacity: .6; }
.op-fr-empty h2 { margin: 1rem 0 .4rem !important; font-weight: 800; }
.op-fr-empty p { color: var(--op-muted); max-width: 440px; margin: 0 auto 1.4rem; }
@media (max-width: 575.98px) { .op-fr-grid { grid-template-columns: minmax(0, 1fr); } .op-fr-head h1 { font-size: 1.9rem; } .op-fr-filter { border-radius: 22px; } }

/* qw26_59.0.6: the five smaller numbers (total score, hits, replays, joined, last active) are a second, quieter row in the profile header */
.op-pf-stats.op-pfa-extra { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 0; padding-top: 0; margin-top: -.4rem; }
.op-pfa-extra .op-pf-stat small { font-size: .62rem; opacity: .8; }
.op-pfa-extra .op-pf-stat strong { font-size: .98rem; font-weight: 700; opacity: .92; }
@media (max-width: 1199.98px) { .op-pf-stats.op-pfa-extra { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .op-pf-stats.op-pfa-extra { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* click effect, second part (qw26_59.0.6): a ring of light leaves the button like a ripple, a wave runs through it, the press wobbles like jelly */
@keyframes opu-gel-ring { from { outline-offset: 0; opacity: .95; } to { outline-offset: 16px; outline-color: rgba(255, 255, 255, 0); opacity: 0; } }
@keyframes opu-gel-wave { 0% { transform: translate(-50%, -50%) scale(0); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(.9); opacity: 0; } }
@keyframes opu-gel-press {
  0% { transform: scale(1); }
  16% { transform: scale(.925, .945); }
  38% { transform: scale(1.06, 1.035); }
  56% { transform: scale(.975, .99); }
  74% { transform: scale(1.018, 1.008); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { }

/* supporter page, tidier (qw26_59.0.8): price as a slim band above, comparison table folded */
.op-sup-price .card-body { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 2rem; }
.op-sup-price .card-body > .display-5 { margin: 0; line-height: 1; }
.op-sup-price .card-body > p { margin: 0; }
.op-sup-price .card-body > ul { flex: 1 1 380px; margin: 0; padding-left: 1.1rem; font-size: .92rem; }
.op-sup-compare summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
.op-sup-compare summary::-webkit-details-marker { display: none; }
.op-sup-chev { transition: transform .25s ease; opacity: .7; }
.op-sup-compare details[open] .op-sup-chev { transform: rotate(180deg); }

/* liquid click (qw26_59.0.9): the clicked element ripples like liquid for a second (SVG filter #op-liquid in base.html) */
@media (prefers-reduced-motion: reduce) { }

/* qw26_59.0.10: avatar frames with a glow (neon, flame, rainbow) looked like a square in the leaderboard - the row and the player
   column cut the glow off in a rectangle. The row no longer clips (the banner behind it gets the round corners itself), the player
   column only cuts on its right side, so the glow stays round. */
.op-lbx-row { overflow: visible; }
.op-lbx-banner::before, .op-lbx-row::before { border-radius: inherit; }
.op-lbx-pl { overflow: visible; -webkit-mask-image: none; mask-image: none; clip-path: inset(-24px 0 -24px -24px); }

/* qw26_59.0.15: login / register side uses the rainbow word logo (not in Classic) */
.op-auth-logo-text { display: inline-block; font-size: 3.1rem; line-height: 1.2; white-space: nowrap; max-width: 100%; }
@media (max-width: 767.98px) { .op-auth-logo-text { font-size: 2.3rem; } }

/* ===== qw26_60: chat extras (replies, message menu, pins, cards, polls, search, settings, picture viewer, small chat window) ===== */
.op-chat-info { margin: 0 0 .8rem; padding: .7rem 1rem; border-radius: 14px; background: rgba(255, 255, 255, .07); color: #fff; font-weight: 600; font-size: .92rem; }
.op-chat-search { position: relative; margin-bottom: .6rem; }
.op-chat-search i { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, .45); font-size: .8rem; pointer-events: none; }
.op-chat-search input { width: 100%; height: 38px; padding: 0 .8rem 0 2.1rem; border-radius: 999px; border: 0; outline: 0; color: #fff; background: rgba(255, 255, 255, .07); font-size: .88rem; }
.op-chat-search input:focus { background: rgba(255, 255, 255, .11); box-shadow: 0 0 0 2px rgba(255, 255, 255, .16); }
.op-chat-results { display: grid; gap: .2rem; max-height: 300px; overflow-y: auto; margin-bottom: .8rem; padding: .3rem; border-radius: 16px; background: rgba(0, 0, 0, .22); }
.op-chat-results[hidden] { display: none; }
.op-chat-results a { display: block; min-width: 0; padding: .45rem .6rem; border-radius: 10px; text-decoration: none; color: #fff; }
.op-chat-results a:hover { background: rgba(255, 255, 255, .08); }
.op-chat-results strong { display: block; font-size: .8rem; }
.op-chat-results small { display: block; color: rgba(255, 255, 255, .6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-chat-sidebtns { display: flex; flex-wrap: wrap; gap: .2rem 1rem; margin-bottom: .8rem; }
.op-chat-sidebtns .op-chat-nset { margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.op-chat-keep { margin: 1rem 0 0; font-size: .74rem; line-height: 1.4; color: rgba(255, 255, 255, .45); }
.op-chat-keep a { color: rgba(255, 255, 255, .75); }
.op-chat-gicon.has-img { padding: 0; overflow: hidden; background: none; }
.op-chat-gicon.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.op-chat-status { display: flex; align-items: center; gap: .35rem; min-width: 0; color: #7ee2a0 !important; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-chat-status[hidden] { display: none; }
.op-chat-status i { font-size: .45rem; flex-shrink: 0; }
.op-chat-more { margin-left: auto; width: 38px; height: 38px; flex-shrink: 0; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .07); }
.op-chat-callbtn + .op-chat-more { margin-left: .4rem; }
.op-chat-more:hover { background: rgba(255, 255, 255, .14); }
.op-chat-main { position: relative; }
.op-chat-menu, .op-msg-menu { z-index: 3700; display: grid; min-width: 230px; padding: .35rem; border-radius: 16px; background: rgb(var(--op-dk-28-24-14, 28, 24, 14)); box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.op-chat-menu { position: absolute; top: 62px; right: .8rem; }
.op-msg-menu { position: fixed; min-width: 170px; }
.op-chat-menu[hidden], .op-chat-menu [hidden] { display: none; }
.op-chat-menu button, .op-chat-menu a, .op-msg-menu button, .op-msg-menu a { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .7rem; border: 0; border-radius: 10px; background: none; color: #fff; font-size: .9rem; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; }
.op-chat-menu button:hover, .op-chat-menu a:hover, .op-msg-menu button:hover, .op-msg-menu a:hover { background: rgba(255, 255, 255, .09); }
.op-chat-menu i, .op-msg-menu i { width: 18px; text-align: center; opacity: .8; }
.op-chat-menu .danger, .op-msg-menu .danger { color: #ff8f98; }
.op-chat-mutedbar { display: flex; align-items: center; gap: .5rem; padding: .4rem 1rem; font-size: .8rem; color: rgba(255, 255, 255, .65); background: rgba(255, 255, 255, .04); }
.op-chat-mutedbar[hidden] { display: none; }
.op-chat-mutedbar button { margin-left: auto; border: 0; background: none; color: #fff; font-weight: 700; cursor: pointer; }
.op-chat-pins { display: flex; flex-direction: column; gap: .1rem; position: relative; padding: .35rem .6rem; background: rgba(255, 255, 255, .05); }
.op-chat-pins[hidden] { display: none; }
.op-chat-pins button { display: flex; align-items: center; gap: .5rem; min-width: 0; padding: .3rem .4rem; padding-right: 5.5rem; border: 0; border-radius: 8px; background: none; color: #fff; font-size: .84rem; text-align: left; cursor: pointer; }
.op-chat-pins button:hover { background: rgba(255, 255, 255, .07); }
.op-chat-pins button + button { display: none; }
.op-chat-pins.open button + button { display: flex; }
.op-chat-pins button i { opacity: .7; font-size: .75rem; }
.op-chat-pins button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255, 255, 255, .7); }
.op-chat-pins em { position: absolute; right: .9rem; top: .6rem; font-style: normal; font-size: .74rem; font-weight: 700; color: rgba(255, 255, 255, .6); cursor: pointer; }
.op-chat-msgwrap { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.op-chat-jump { position: absolute; right: 1rem; bottom: 1rem; z-index: 4; width: 42px; height: 42px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; color: #fff;
  background: rgb(var(--op-dk-34-30-18, 34, 30, 18)); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .12); }
.op-chat-jump[hidden] { display: none; }
.op-chat-jump b { position: absolute; top: -6px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; font-size: .7rem; color: #fff; background: #ff4d6d; }
.op-chat-jump b[hidden] { display: none; }
.op-chat-dropzone { position: absolute; inset: .6rem; z-index: 5; display: grid; place-items: center; border-radius: 18px; font-weight: 700; font-size: 1.1rem; color: #fff; background: rgba(20, 20, 30, .78); outline: 2px dashed rgba(255, 255, 255, .45); outline-offset: -8px; pointer-events: none; }
.op-chat-dropzone[hidden] { display: none; }
.op-chat-newline { display: flex; align-items: center; gap: .7rem; align-self: stretch; margin: .5rem 0; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #ff7d95; }
.op-chat-newline::before, .op-chat-newline::after { content: ""; flex: 1; height: 1px; background: rgba(255, 125, 149, .45); }
.op-chat-msg.flash .op-chat-bubble { animation: opu-chat-flash 1.8s ease; }
@keyframes opu-chat-flash { 0%, 40% { box-shadow: 0 0 0 3px rgba(255, 255, 255, .7); } 100% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0); } }
.op-chat-msg.pinned .op-chat-bubble::after { content: "\f08d"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; top: -7px; right: -5px; font-size: .62rem; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; color: #1b1b22; background: #fff; }
.op-chat-msg.mine.pinned .op-chat-bubble::after { right: auto; left: -5px; }
.op-chat-acts { position: absolute; top: 50%; left: calc(100% + 6px); transform: translateY(-50%); display: flex; gap: .2rem; opacity: 0; transition: opacity .15s; white-space: nowrap; }
.op-chat-msg.mine .op-chat-acts { left: auto; right: calc(100% + 6px); flex-direction: row-reverse; }
.op-chat-msg:hover .op-chat-acts, .op-chat-acts:focus-within { opacity: 1; }
.op-chat-acts .op-react-btn, .op-chat-msg.mine .op-chat-acts .op-react-btn { position: static; transform: none; opacity: 1; flex-shrink: 0; font-size: .8rem; }
@media (hover: none) { .op-chat-acts { opacity: .7; } }
@media (max-width: 575.98px) { .op-chat-msg { max-width: 62%; } .op-chat-acts { gap: .1rem; } }
.op-chat-quote { display: block; width: 100%; min-width: 0; margin: 0 0 .35rem; padding: .3rem .55rem; border: 0; border-left: 3px solid currentColor; border-radius: 6px; text-align: left; cursor: pointer; color: inherit; background: rgba(0, 0, 0, .16); font-size: .8rem; font-weight: 500; }
.op-chat-quote strong { display: block; font-size: .74rem; opacity: .85; }
.op-chat-quote span { display: block; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.op-chat-bubble a { color: inherit; text-decoration: underline; }
.op-chat-bubble.is-deleted { background: rgba(255, 255, 255, .04) !important; color: rgba(255, 255, 255, .5) !important; box-shadow: none !important; font-weight: 500 !important; }
.op-chat-deleted { font-style: italic; opacity: .8; }
.op-chat-edited { opacity: .8; }
.op-chat-at { font-weight: 800; padding: 0 .2rem; border-radius: 5px; background: rgba(255, 255, 255, .16); }
.op-chat-msg.has-bub.mine .op-chat-bubble:not(.is-photo):not(.is-sticker):not(.is-deleted) { background: var(--bub) !important; color: #fff !important; }
.op-chat-msg.has-bub:not(.mine) .op-chat-bubble:not(.is-photo):not(.is-sticker):not(.is-deleted) { box-shadow: inset 3px 0 0 var(--bub) !important; }
.op-chat-card { display: block; margin-top: .45rem; white-space: normal; }
.op-chat-card:empty { display: none; }
.op-chat-card a { display: flex; align-items: center; gap: .65rem; min-width: 0; width: min(330px, 62vw); padding: .45rem; border-radius: 12px; text-decoration: none !important; color: #fff !important; background: rgba(0, 0, 0, .32); }
.op-chat-card a:hover { background: rgba(0, 0, 0, .45); }
.op-chat-card img { width: 78px; height: 48px; flex-shrink: 0; border-radius: 8px; object-fit: cover; background: rgba(255, 255, 255, .08); }
.op-chat-card img.av { width: 48px; border-radius: 50%; }
.op-chat-card span { min-width: 0; flex: 1; }
.op-chat-card strong, .op-chat-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-chat-card strong { font-size: .84rem; font-weight: 700; }
.op-chat-card small { font-size: .74rem; font-weight: 500; opacity: .75; }
.op-chat-card .g { font-size: 1.15rem; font-weight: 900; padding: 0 .35rem; color: #ffd76a; }
.op-chat-card .g-A { color: #7ee2a0; } .op-chat-card .g-B { color: #6cb8ff; } .op-chat-card .g-C { color: #c59cff; } .op-chat-card .g-D, .op-chat-card .g-F { color: #ff8f98; } .op-chat-card .g-XH, .op-chat-card .g-SH { color: #e8eef7; }
.op-chat-chal { display: flex; align-items: center; gap: .4rem; font-weight: 800; }
.op-chat-mp { display: flex; align-items: center; gap: .7rem; white-space: normal; }
.op-chat-mp > i { font-size: 1.3rem; }
.op-chat-mp span { min-width: 0; }
.op-chat-mp strong, .op-chat-mp small { display: block; }
.op-chat-mp small { opacity: .75; font-weight: 500; }
.op-chat-mp .op-btn { text-decoration: none !important; flex-shrink: 0; }
.op-chat-bubble.is-poll { width: min(340px, 64vw); white-space: normal; }
.op-chat-poll { display: grid; gap: .35rem; }
.op-poll-q { display: block; margin-bottom: .2rem; }
.op-poll-opt { position: relative; display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 34px; padding: .3rem .65rem; border: 0; border-radius: 10px; overflow: hidden; cursor: pointer; text-align: left; color: inherit; font: inherit; font-weight: 600; background: rgba(0, 0, 0, .22); }
.op-poll-opt i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255, 255, 255, .22); transition: width .4s ease; }
.op-poll-opt span, .op-poll-opt b { position: relative; }
.op-poll-opt.mine { box-shadow: inset 0 0 0 2px currentColor; }
.op-poll-total { opacity: .7; font-weight: 500; }
.op-chat-replybar { position: absolute; left: .8rem; right: .8rem; bottom: calc(100% + .4rem); z-index: 4; display: flex; align-items: center; gap: .7rem; padding: .5rem .8rem; border-radius: 14px; color: #fff;
  background: rgb(var(--op-dk-34-30-18, 34, 30, 18)); box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.op-chat-replybar[hidden] { display: none; }
.op-chat-replybar span { min-width: 0; flex: 1; }
.op-chat-replybar strong, .op-chat-replybar small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-chat-replybar strong { font-size: .82rem; }
.op-chat-replybar small { font-size: .78rem; color: rgba(255, 255, 255, .6); }
.op-chat-replybar button { border: 0; background: none; color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.op-chat-mention, .op-chat-plus { position: absolute; left: .8rem; bottom: calc(100% + .4rem); z-index: 6; display: grid; gap: .15rem; padding: .35rem; border-radius: 16px; background: rgb(var(--op-dk-28-24-14, 28, 24, 14)); box-shadow: 0 20px 50px -16px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.op-chat-mention[hidden], .op-chat-plus[hidden] { display: none; }
.op-chat-mention button { padding: .4rem .7rem; border: 0; border-radius: 9px; background: none; color: #fff; font-weight: 700; text-align: left; cursor: pointer; }
.op-chat-mention button:hover { background: rgba(255, 255, 255, .1); }
.op-chat-plus { width: min(320px, calc(100% - 1.6rem)); }
.op-chat-plus button { display: flex; align-items: center; gap: .75rem; padding: .55rem .65rem; border: 0; border-radius: 11px; background: none; color: #fff; text-align: left; cursor: pointer; }
.op-chat-plus button:hover { background: rgba(255, 255, 255, .09); }
.op-chat-plus button > i { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, .1); }
.op-chat-plus strong, .op-chat-plus small { display: block; }
.op-chat-plus small { font-size: .76rem; color: rgba(255, 255, 255, .6); }
.op-chat-form.editing input[type="text"] { box-shadow: 0 0 0 2px rgba(255, 255, 255, .35) !important; }
.op-usticker-head { grid-column: 1 / -1; margin-top: .4rem; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.op-usticker { position: relative; display: block; }
.op-usticker > button:first-child { width: 100%; }
.op-usticker.wait img { opacity: .35; filter: grayscale(1); }
.op-usticker .x { position: absolute; top: -4px; right: -4px; width: 18px !important; height: 18px; padding: 0; border: 0; border-radius: 50%; line-height: 1; font-size: .8rem; color: #fff; background: #ff4d6d; cursor: pointer; opacity: 0; }
.op-usticker:hover .x { opacity: 1; }
.op-usticker-add { display: grid; place-items: center; min-height: 56px; border-radius: 12px; color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .06); outline: 1px dashed rgba(255, 255, 255, .3); outline-offset: -4px; cursor: pointer; text-decoration: none; }
.op-usticker-add:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.op-react-pick .more { color: rgba(255, 255, 255, .7); font-size: .85rem; }
.op-emoji-any { position: fixed; z-index: 3710; display: grid; grid-template-columns: repeat(8, 34px); gap: .1rem; max-height: 230px; overflow-y: auto; padding: .4rem; border-radius: 16px; background: rgb(var(--op-dk-28-24-14, 28, 24, 14)); box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.op-emoji-any button { width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; font-size: 1.15rem; cursor: pointer; }
.op-emoji-any button:hover { background: rgba(255, 255, 255, .12); }
.op-cset-row { display: flex; align-items: center; gap: .9rem; }
.op-cset-row input[type="color"] { width: 54px; height: 38px; padding: 0; border: 0; border-radius: 10px; background: none; cursor: pointer; }
.op-cset-check { display: flex; align-items: center; gap: .55rem; margin: .35rem 0; color: #fff; font-size: .9rem; font-weight: 600; cursor: pointer; }
.op-cset-bgs { display: flex; flex-wrap: wrap; gap: .5rem; }
.op-cset-bgs button { width: 52px; height: 38px; border: 0; border-radius: 10px; cursor: pointer; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.op-cset-bgs button.on { box-shadow: 0 0 0 2px #fff; }
.op-cset-bgs button:disabled, .op-cset-row input:disabled { opacity: .45; cursor: not-allowed; }
.op-cbg-aurora, [data-cbg="aurora"] .op-chat-msgs { background: linear-gradient(160deg, rgba(40, 200, 170, .28), rgba(70, 110, 255, .22) 55%, rgba(150, 90, 255, .26)) !important; }
.op-cbg-sunset, [data-cbg="sunset"] .op-chat-msgs { background: linear-gradient(160deg, rgba(255, 140, 80, .28), rgba(255, 90, 150, .24) 55%, rgba(120, 80, 220, .26)) !important; }
.op-cbg-ocean, [data-cbg="ocean"] .op-chat-msgs { background: linear-gradient(160deg, rgba(40, 140, 255, .3), rgba(30, 200, 220, .2) 60%, rgba(20, 60, 140, .3)) !important; }
.op-cbg-forest, [data-cbg="forest"] .op-chat-msgs { background: linear-gradient(160deg, rgba(60, 190, 110, .26), rgba(30, 120, 100, .24) 60%, rgba(20, 60, 60, .3)) !important; }
.op-cbg-candy, [data-cbg="candy"] .op-chat-msgs { background: linear-gradient(160deg, rgba(255, 120, 200, .3), rgba(190, 130, 255, .24) 55%, rgba(110, 190, 255, .24)) !important; }
.op-cbg-night, [data-cbg="night"] .op-chat-msgs { background: radial-gradient(120% 90% at 50% 0%, rgba(70, 80, 160, .35), rgba(6, 6, 14, .5) 70%) !important; }
.op-chal-list { display: grid; gap: .3rem; max-height: 52vh; overflow-y: auto; }
.op-chal-list button { display: flex; align-items: center; gap: .7rem; min-width: 0; padding: .4rem; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .05); color: #fff; text-align: left; cursor: pointer; }
.op-chal-list button:hover { background: rgba(255, 255, 255, .11); }
.op-chal-list img { width: 64px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.op-chal-list span { min-width: 0; flex: 1; }
.op-chal-list strong, .op-chal-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-chal-list small { color: rgba(255, 255, 255, .6); font-size: .76rem; }
.op-chal-list b { padding: 0 .4rem; font-weight: 900; }
.op-poll-opts { display: grid; gap: .45rem; margin-bottom: .6rem; }
.op-gpic { display: flex; flex-wrap: wrap; gap: .5rem; }
.op-gpic label { cursor: pointer; }
.op-ginvite { display: flex; flex-wrap: wrap; gap: .4rem; }
.op-ginvite input { flex: 1 1 100%; min-width: 0; height: 36px; padding: 0 .7rem; border: 0; border-radius: 10px; color: #fff; background: rgba(255, 255, 255, .07); font-size: .82rem; }
.op-lightbox { position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center; padding: 3rem 1rem; background: rgba(4, 4, 10, .9); cursor: zoom-out; }
.op-lightbox img { max-width: 100%; max-height: 100%; border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, .7); }
.op-lightbox button, .op-lightbox a { position: absolute; top: 1rem; width: 42px; height: 42px; border: 0; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .14); font-size: 1.4rem; text-decoration: none; cursor: pointer; }
.op-lightbox button { right: 1rem; } .op-lightbox a { right: 4.2rem; font-size: 1rem; }
/* small chat window */
.op-mini { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 3550; font-family: var(--op-font-text, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); }
html:has(.op-call) .op-mini, html:has(.op-toast) .op-mini { bottom: 6.2rem; }
.op-mini-fab { position: relative; width: 52px; height: 52px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; font-size: 1.15rem; color: #fff;
  background: rgb(var(--op-dk-34-30-18, 34, 30, 18)); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(255, 255, 255, .14); }
.op-mini-fab b { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; font-size: .7rem; color: #fff; background: #ff4d6d; }
.op-mini-fab b[hidden] { display: none; }
.op-mini-win { position: absolute; right: 0; bottom: 64px; width: min(340px, calc(100vw - 2.4rem)); height: min(460px, calc(100vh - 9rem)); display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; color: #fff;
  background: rgb(var(--op-dk-22-20-12, 22, 20, 12)); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .1); }
.op-mini-win[hidden] { display: none; }
.op-mini-head { display: flex; align-items: center; gap: .5rem; padding: .7rem .8rem; background: rgba(255, 255, 255, .05); }
.op-mini-head strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-mini-head button, .op-mini-head a { width: 30px; height: 30px; border: 0; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .08); text-decoration: none; cursor: pointer; font-size: .85rem; }
.op-mini-head button[hidden] { display: none; }
.op-mini-body { flex: 1; min-height: 0; overflow-y: auto; padding: .4rem; display: flex; flex-direction: column; gap: .15rem; }
.op-mini-body > a { display: flex; align-items: center; gap: .6rem; min-width: 0; padding: .45rem .5rem; border-radius: 12px; color: #fff; text-decoration: none; }
.op-mini-body > a:hover { background: rgba(255, 255, 255, .08); }
.op-mini-body > a img, .op-mini-body > a .gi { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; object-fit: cover; display: grid; place-items: center; font-style: normal; background: rgba(255, 255, 255, .08); overflow: hidden; }
.op-mini-body > a .gi { border-radius: 11px; } .op-mini-body > a .gi img { border-radius: 0; }
.op-mini-body > a span { min-width: 0; flex: 1; }
.op-mini-body > a strong, .op-mini-body > a small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-mini-body > a small { font-size: .76rem; color: rgba(255, 255, 255, .6); }
.op-mini-body > a b { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; font-size: .7rem; background: #ff4d6d; }
.op-mini-body.msgs { padding: .7rem; gap: .35rem; }
.op-mini-body.msgs > div { align-self: flex-start; max-width: 82%; padding: .4rem .7rem; border-radius: 14px 14px 14px 4px; background: rgba(255, 255, 255, .09); font-size: .88rem; word-break: break-word; white-space: pre-wrap; }
.op-mini-body.msgs > div.mine { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: #2f7cf6; }
.op-mini-body.msgs > div.sys { align-self: center; background: none; font-size: .74rem; color: rgba(255, 255, 255, .5); }
.op-mini-body.msgs img { max-width: 100%; max-height: 160px; border-radius: 10px; display: block; }
.op-mini-form { display: flex; gap: .4rem; padding: .55rem; background: rgba(255, 255, 255, .04); }
.op-mini-form[hidden] { display: none; }
.op-mini-form input { flex: 1; min-width: 0; height: 38px; padding: 0 .8rem; border: 0; outline: 0; border-radius: 999px; color: #fff; background: rgba(255, 255, 255, .09); }
.op-mini-form button { width: 38px; height: 38px; flex-shrink: 0; border: 0; border-radius: 50%; color: #1b1b22; background: #fff; cursor: pointer; }
@media (max-width: 575.98px) { .op-mini { right: .7rem; bottom: .7rem; } }

/* qw26_60.0.1: voice message player (replaces the browser's audio box) + small "60 days" line in the chat */
.op-chat-voice { display: flex; align-items: center; gap: .65rem; min-width: min(250px, 56vw); white-space: nowrap; }
.op-voice-play { width: 38px; height: 38px; flex-shrink: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #16161d; background: #fff; font-size: .85rem; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .6); }
.op-voice-play .fa-play { margin-left: 2px; }
.op-voice-wave { flex: 1; min-width: 0; height: 30px; display: flex; align-items: center; gap: 2px; cursor: pointer; }
.op-voice-wave i { flex: 1; min-width: 2px; border-radius: 2px; background: currentColor; opacity: .32; transition: opacity .12s; }
.op-voice-wave i.on { opacity: 1; }
.op-chat-voice.playing .op-voice-wave i:not(.on) { opacity: .42; }
.op-voice-time { flex-shrink: 0; min-width: 2.4em; text-align: right; font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; opacity: .85; }
.op-chat-voice.broken { opacity: .5; }
.op-chat-bubble.is-voice { padding: .5rem .8rem .5rem .5rem; border-radius: 999px !important; }
.op-chat-keepline { padding: .28rem 1rem; font-size: .7rem; text-align: center; color: rgba(255, 255, 255, .42); }
.op-chat-keepline a { color: rgba(255, 255, 255, .7); }
.op-chat-keepline .fa-heart { color: #ff7ab5; }

/* qw26_61.0.3: leaderboard and hall of fame without profile pictures, names a little bigger; "Longest #1" as a column chart */
.op-lbx-name { font-size: 1.06rem; }
.op-hof .op-mini-user, .op-hof-hero ~ * .op-mini-user, .op-kings-nowitem strong { font-size: 1.04rem; }
.op-hofcols { display: flex; align-items: stretch; justify-content: flex-start; gap: .9rem; margin-top: 1.4rem; overflow-x: auto; padding-bottom: .4rem; }
.op-hofcol { flex: 0 0 104px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .45rem; text-decoration: none; color: #fff; }
.op-hofcol-val { font-family: var(--op-font-display); font-weight: 800; font-size: .92rem; white-space: nowrap; }
.op-hofcol-track { width: 100%; height: 220px; display: flex; align-items: flex-end; border-radius: 14px; background: rgba(255, 255, 255, .04); overflow: hidden; }
.op-hofcol-track i { display: block; width: 100%; min-height: 6px; border-radius: 14px 14px 0 0; background: linear-gradient(180deg, var(--op-yellow, #ffd84d), rgba(var(--op-yellow-rgb, 255, 216, 77), .28)); transition: filter .2s; }
.op-hofcol.now .op-hofcol-track i { background: linear-gradient(180deg, #7ee2a0, rgba(126, 226, 160, .28)); }
.op-hofcol:hover .op-hofcol-track i { filter: brightness(1.2); }
.op-hofcol-who { display: flex; align-items: center; justify-content: center; gap: .35rem; max-width: 100%; font-weight: 700; font-size: .95rem; }
.op-hofcol-who > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-hofcol-who .op-lb-flag { flex-shrink: 0; }
@media (max-width: 575.98px) { .op-hofcol { flex-basis: 84px; } .op-hofcol-track { height: 170px; } }

/* qw26_62.0.1: "Longest #1" as a classic horizontal bar chart: names on the left, bars from the left, scale below */
.op-hofbars { --hofw: 170px; margin-top: 1.4rem; }
.op-hofbars-rows { display: grid; gap: 6px; padding: 8px 0; background: linear-gradient(90deg, transparent calc(var(--hofw) - 1px), rgba(255, 255, 255, .45) calc(var(--hofw) - 1px), rgba(255, 255, 255, .45) var(--hofw), transparent var(--hofw)); }
.op-hofbar { display: grid; grid-template-columns: var(--hofw) minmax(0, 1fr); align-items: center; text-decoration: none; color: #fff; }
.op-hofbar-who { display: flex; align-items: center; justify-content: flex-end; gap: .4rem; min-width: 0; padding-right: .8rem; font-weight: 700; font-size: 1.02rem; }
.op-hofbar-who > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-hofbar-who .op-lb-flag { flex-shrink: 0; }
.op-hofbar-track { position: relative; display: flex; align-items: center; height: 34px; padding-right: 5.5rem;
  background: repeating-linear-gradient(90deg, transparent 0, transparent calc(20% - 1px), rgba(255, 255, 255, .07) calc(20% - 1px), rgba(255, 255, 255, .07) 20%); background-origin: content-box; background-clip: content-box; }
.op-hofbar-track i { display: block; height: 100%; min-width: 3px; background: var(--op-yellow, #ffd84d); opacity: .9; transition: opacity .15s; }
.op-hofbar.now .op-hofbar-track i { background: #7ee2a0; }
.op-hofbar:hover .op-hofbar-track i { opacity: 1; }
.op-hofbar-track b { margin-left: .6rem; font-family: var(--op-font-display); font-weight: 800; font-size: .88rem; white-space: nowrap; }
.op-hofbars-axis { display: grid; grid-template-columns: var(--hofw) minmax(0, 1fr); }
.op-hofbars-axis > div { position: relative; height: 26px; margin-right: 5.5rem; border-top: 1px solid rgba(255, 255, 255, .45); background: linear-gradient(rgba(255, 255, 255, .45), rgba(255, 255, 255, .45)) 0 0 / 100% 1px no-repeat; }
.op-hofbars-axis em { position: absolute; top: 0; transform: translateX(-50%); padding-top: 9px; font-style: normal; font-size: .8rem; color: rgba(255, 255, 255, .7); }
.op-hofbars-axis em::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 6px; background: rgba(255, 255, 255, .45); }
.op-hofbars-label { margin: .35rem 5.5rem 0 var(--hofw); text-align: center; font-size: .8rem; color: rgba(255, 255, 255, .6); }
@media (max-width: 575.98px) { .op-hofbars { --hofw: 104px; } .op-hofbar-who { font-size: .9rem; padding-right: .5rem; } .op-hofbar-track, .op-hofbars-axis > div { padding-right: 0; margin-right: 4.4rem; } .op-hofbar-track { padding-right: 4.4rem; margin-right: 0; } .op-hofbars-label { margin-right: 4.4rem; } }

/* qw26_63.0.1: no medal icons on rank cards; only GLOBAL #1 has a mark (owner picked variant B "Holo number" of
   branding/rank1/preview-v1.html): the "#1" itself flows in rainbow colours, three small sparkles next to it */
.op-pf .op-rk.op-rk-holo { padding-left: 1.1rem; padding-right: 3.6rem; }
.op-pf .op-rk.op-rk-holo strong, .op-pf.op-pf-custom .op-rk.op-rk-holo strong {
  font-size: 1.9rem; background: linear-gradient(90deg, #ff6fd0, #b77cff, #6cb8ff, #7cf0c8, #ffe27a, #ff9a6a, #ff6fd0) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(150, 120, 255, .55)); animation: opu-holo-flow 5s linear infinite; }
.op-rk-sparks { position: absolute; right: .9rem; top: 50%; width: 34px; height: 34px; transform: translateY(-50%); pointer-events: none; }
.op-rk-sparks i { position: absolute; width: 9px; height: 9px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: opu-holo-tw 2.4s ease-in-out infinite; }
.op-rk-sparks i:nth-child(1) { left: 2px; top: 3px; }
.op-rk-sparks i:nth-child(2) { right: 0; top: 11px; width: 13px; height: 13px; animation-delay: .8s; }
.op-rk-sparks i:nth-child(3) { left: 9px; bottom: 0; width: 7px; height: 7px; animation-delay: 1.5s; }
@keyframes opu-holo-flow { to { background-position: 200% 0; } }
@keyframes opu-holo-tw { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }
html[data-op-lite] .op-rk-holo strong, html[data-op-lite] .op-rk-sparks i { animation: none; }
@media (prefers-reduced-motion: reduce) { .op-rk-holo strong, .op-rk-sparks i { animation: none; } }

/* qw26_63: bar for staff while maintenance mode is on */
.op-maint-bar { background: #b8860b !important; color: #fff !important; }

/* ===== qw26_64: restricted pop-up + messages from the staff at the top of every page ===== */
.op-restricted-pop, .op-staffmsg { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem .9rem;
  padding: .7rem 1.1rem; font-size: .95rem; background: rgba(120, 22, 30, .94); color: #ffe3e5; }
.op-restricted-pop:hover { background: rgba(120, 22, 30, .94); color: #ffe3e5; }
.op-staffmsg, .op-staffmsg:hover { background: rgba(20, 62, 104, .95); color: #e2f1ff; }
.op-restricted-why, .op-staffmsg-text { overflow-wrap: anywhere; min-width: 0; }
.op-restricted-do { display: inline-flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.op-restricted-do a, .op-restricted-do button { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .8rem; border-radius: 999px; border: 0;
  background: rgba(255, 255, 255, .16); color: #fff; font-weight: 700; font-size: .86rem; text-decoration: none; cursor: pointer; }
.op-restricted-do a:hover, .op-restricted-do button:hover { background: rgba(255, 255, 255, .28); color: #fff; }
.op-restricted-do i { margin: 0; }
.op-restricted-do button[data-op-staffmsg-ok] { background: #fff; color: #12324f; }
.op-announce .op-restricted-do button { background: rgba(255, 255, 255, .16); color: #fff; padding: .28rem .6rem; }

/* ===== qw26_66: tournaments, more customisable (colour --tn, banner --tn-img) ===== */
.op-tn { --tn: var(--op-yellow, #ffd84d); }
.op-tn-h2 { font-family: var(--op-font-display); font-weight: 900; font-size: 1.25rem; color: #fff; margin: 2rem 0 .9rem; }
.op-tn-draft { display: inline-flex; padding: .15rem .55rem; border-radius: 20px; font-size: .7rem; font-weight: 800; text-transform: uppercase; background: rgba(255, 94, 107, .18); color: #ff9aa3; }
.op-tn-card { position: relative; overflow: hidden; }
.op-tn-card > * { position: relative; }
.op-tn-card-img { position: absolute !important; inset: 0; background-size: cover; background-position: center; opacity: .28; -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); }
.op-tn-card .op-tn-meta i, .op-tn-page .op-tn-meta i, .op-tn-feature .op-tn-meta i { color: var(--tn); }
.op-tn-fill { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .1); overflow: hidden; margin-top: .35rem; }
.op-tn-fill span { display: block; height: 100%; border-radius: 6px; background: var(--tn); }
.op-tn-fill-text { font-size: .76rem; color: var(--op-muted); }
.op-tn-feature { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; overflow: hidden; margin-bottom: 1rem; padding: 2rem 2.2rem;
  border-radius: 24px; text-decoration: none; color: #fff;
  background: linear-gradient(100deg, rgba(var(--op-dk-12-10-6, 12, 10, 6), .93) 30%, rgba(var(--op-dk-12-10-6, 12, 10, 6), .55)), var(--tn-img, none) center / cover no-repeat, rgba(255, 255, 255, .05); }
.op-tn-feature::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--tn); }
.op-tn-feature:hover { color: #fff; }
.op-tn-feature-in { min-width: 0; flex: 1 1 380px; display: flex; flex-direction: column; gap: .55rem; }
.op-tn-feature h2 { font-family: var(--op-font-display); font-weight: 900; font-size: clamp(1.6rem, 3.4vw, 2.5rem); margin: 0; overflow-wrap: anywhere; }
.op-tn-feature p { margin: 0; color: rgba(255, 255, 255, .78); max-width: 62ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.op-tn-feature-side { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
.op-tn-feature-side small, .op-tn-clock small { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--op-muted); }
.op-tn-feature-side strong, .op-tn-clock strong { font-family: var(--op-font-display); font-weight: 900; font-size: 1.7rem; color: #fff; font-variant-numeric: tabular-nums; margin-bottom: .4rem; }
.op-tn-new > summary { cursor: pointer; font-weight: 800; color: #fff; list-style: none; }
.op-tn-new > summary i { color: var(--tn); margin-right: .4rem; }
.op-tn-new > summary span { font-size: .74rem; font-weight: 600; color: var(--op-muted); margin-left: .4rem; }
.op-tn-new[open] > summary { margin-bottom: 1rem; }
.op-tn-formhead { margin: 1rem 0 .7rem; padding-top: .9rem; font-weight: 800; color: #fff; font-size: .95rem; background: linear-gradient(rgba(255, 255, 255, .08), rgba(255, 255, 255, .08)) top / 100% 1px no-repeat; }
.op-tn-formhead:first-child { margin-top: 0; padding-top: 0; background: none; }
.op-tn-formhead i { color: var(--tn); margin-right: .4rem; }
.op-tn-formhead small { color: var(--op-muted); font-weight: 600; }
.op-tn-wide2 { grid-column: span 2; }
.op-tn-form .op-check { align-self: center; margin-bottom: 1.05rem; }
.op-tn-colorpick { display: flex; align-items: center; gap: .7rem; min-height: 44px; }
.op-tn-colorpick .op-check { margin: 0; }
.op-tn-colorpick input[type=color] { width: 46px; height: 34px; padding: 0; border: 0; border-radius: 9px; background: none; cursor: pointer; }
/* page */
.op-tn-page .op-tn-hero { position: relative; overflow: hidden; align-items: stretch;
  background: radial-gradient(520px 240px at 100% 0%, color-mix(in srgb, var(--tn) 22%, transparent), transparent 70%), rgba(255, 255, 255, .05); }
.op-tn-page .op-tn-hero.has-banner { min-height: 250px; background: linear-gradient(100deg, rgba(var(--op-dk-12-10-6, 12, 10, 6), .93) 25%, rgba(var(--op-dk-12-10-6, 12, 10, 6), .5)), var(--tn-img) center / cover no-repeat; }
.op-tn-page .op-tn-hero::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--tn); }
.op-tn-page .op-tn-hero h1 { font-size: clamp(1.7rem, 4vw, 2.8rem); overflow-wrap: anywhere; }
.op-tn-hero-in { min-width: 0; flex: 1 1 360px; display: flex; flex-direction: column; justify-content: center; }
.op-tn-page .op-tn-cta { flex-direction: column; align-items: flex-end; justify-content: center; min-width: 210px; }
.op-tn-cta-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: flex-end; }
.op-tn-clock { display: flex; flex-direction: column; align-items: flex-end; }
.op-tn-page .op-tn-cta .op-tn-fill { width: 100%; }
.op-tn-page .op-daily-kicker, .op-tn-page .op-daily-box h3 i, .op-tn-page .op-tn-round-name, .op-tn-page .op-tn-poolround { color: var(--tn); }
.op-tn-jump { display: flex; gap: .45rem; flex-wrap: wrap; margin: 0 0 1.2rem; position: sticky; top: 84px; z-index: 5; padding: .45rem; border-radius: 999px; width: fit-content; max-width: 100%;
  background: rgba(var(--op-dk-12-10-6, 12, 10, 6), .82); }
.op-tn-jump a { display: inline-flex; align-items: center; gap: .4rem; padding: .38rem .9rem; border-radius: 999px; font-size: .85rem; font-weight: 700; color: rgba(255, 255, 255, .82); text-decoration: none; background: rgba(255, 255, 255, .06); }
.op-tn-jump a:hover { color: #fff; background: rgba(255, 255, 255, .14); }
.op-tn-jump a i { color: var(--tn); }
.op-tn-jump a b { font-size: .75rem; opacity: .7; }
.op-tn-page [id] { scroll-margin-top: 150px; }
.op-tn-mine { margin-bottom: 1.2rem; padding: 1.1rem 1.3rem; border-radius: 20px; background: linear-gradient(100deg, color-mix(in srgb, var(--tn) 20%, transparent), rgba(255, 255, 255, .05)); }
.op-tn-mine-label { font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--tn); margin-bottom: .6rem; }
.op-tn-mine-label span { color: var(--op-muted); margin-left: .5rem; }
.op-tn-mine-vs { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.op-tn-mine-vs > a:first-child { display: inline-flex; align-items: center; gap: .7rem; color: #fff; text-decoration: none; font-size: 1.15rem; min-width: 0; }
.op-tn-mine-vs img:not(.op-lb-flag) { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.op-tn-mine-vs .op-lb-flag { margin-right: .35rem; }
.op-tn-mine-time { margin-left: auto; color: rgba(255, 255, 255, .85); font-weight: 700; }
.op-tn-mine-time em { color: var(--op-muted); font-style: normal; font-weight: 600; }
.op-tn-podium { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .8rem; margin-bottom: 1.2rem; }
.op-tn-place { display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: 1.1rem .8rem; border-radius: 20px; text-decoration: none; color: #fff; background: rgba(255, 255, 255, .05); min-width: 0; }
.op-tn-place:hover { color: #fff; background: rgba(255, 255, 255, .09); }
.op-tn-place img:not(.op-lb-flag) { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.op-tn-place .op-lb-flag { margin-right: .35rem; }
.op-tn-place strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-tn-place-n { font-family: var(--op-font-display); font-weight: 900; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--op-muted); }
.op-tn-place.pl-0 { background: linear-gradient(160deg, color-mix(in srgb, var(--tn) 26%, transparent), rgba(255, 255, 255, .05)); }
.op-tn-place.pl-0 .op-tn-place-n { color: var(--tn); font-size: 1.05rem; }
.op-tn-place.pl-0 img:not(.op-lb-flag) { width: 84px; height: 84px; }
.op-tn-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; margin-bottom: 1.2rem; }
.op-tn-fact { position: relative; display: flex; flex-direction: column; gap: .15rem; padding: 1rem 1.1rem 1rem 3.3rem; border-radius: 18px; background: rgba(255, 255, 255, .05); color: #fff; text-decoration: none; min-width: 0; }
a.op-tn-fact:hover { color: #fff; background: rgba(255, 255, 255, .09); }
.op-tn-fact > i { position: absolute; left: 1.1rem; top: 1.15rem; font-size: 1.15rem; color: var(--tn); }
.op-tn-fact small { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--op-muted); }
.op-tn-fact strong { font-size: 1rem; overflow-wrap: anywhere; }
.op-tn-fact > span { font-size: .82rem; color: rgba(255, 255, 255, .7); overflow-wrap: anywhere; }
.op-tn-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 0 1.2rem; }
.op-tn-round-name small { display: block; margin-top: .15rem; font-size: .68rem; letter-spacing: .03em; text-transform: none; color: var(--op-muted); font-weight: 600; }
.op-tn-match.me { box-shadow: 0 0 0 2px var(--tn); }
div.op-tn-mp { cursor: default; }
.op-tn-edit > summary { cursor: pointer; font-size: .74rem; font-weight: 700; color: var(--op-muted); padding: .25rem .65rem; list-style: none; }
.op-tn-edit > summary:hover { color: #fff; }
.op-tn-result { flex-wrap: wrap; }
.op-tn-result input[type=datetime-local] { flex: 1; width: auto; min-width: 150px; }
.op-tn-result button.danger { background: rgba(255, 94, 107, .2); color: #ff9aa3; padding: .25rem .6rem; font-size: .76rem; font-weight: 700; }
.op-tn-rounds { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .6rem; }
.op-tn-rd { display: flex; flex-direction: column; gap: .1rem; padding: .7rem .9rem; border-radius: 14px; background: rgba(0, 0, 0, .22); min-width: 0; }
.op-tn-rd strong { color: #fff; }
.op-tn-rd span { font-size: .8rem; color: var(--tn); font-weight: 700; }
.op-tn-rd em { font-size: .8rem; color: var(--op-muted); font-style: normal; }
.op-tn-roundform { display: grid; grid-template-columns: minmax(0, 1fr) 90px minmax(0, 210px); gap: .45rem .6rem; align-items: center; margin-top: .7rem; max-width: 620px; }
.op-tn-roundform label { font-weight: 700; color: #fff; font-size: .88rem; }
.op-tn-roundform input, .op-tn-seed input { padding: .35rem .55rem; border-radius: 9px; border: 0; background: rgba(0, 0, 0, .35); color: #fff; min-width: 0; }
.op-tn-roundform button { grid-column: 1 / -1; justify-self: start; margin-top: .3rem; }
.op-tn-player { display: flex; align-items: center; gap: .6rem; padding: .4rem 0; background: linear-gradient(rgba(255, 255, 255, .05), rgba(255, 255, 255, .05)) top / 100% 1px no-repeat; }
.op-tn-player > b { width: 22px; text-align: center; color: var(--tn); font-family: var(--op-font-display); font-weight: 900; font-size: .85rem; flex-shrink: 0; }
.op-tn-player > a { display: flex; align-items: center; gap: .6rem; flex: 1; min-width: 0; color: #fff; text-decoration: none; }
.op-tn-player > a > img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.op-tn-player > a > span { display: flex; flex-direction: column; min-width: 0; }
.op-tn-player strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }
.op-tn-player strong .op-lb-flag { margin-right: .35rem; }
.op-tn-player small { font-size: .74rem; color: var(--op-muted); }
.op-tn-seed { display: flex; gap: .25rem; }
.op-tn-seed input { width: 58px; }
.op-tn-seed button { border: 0; border-radius: 8px; background: var(--tn); color: #111; padding: 0 .5rem; }
.op-tn-champion > i, .op-tn-winner { color: var(--tn); }
@media (max-width: 1399.98px) { .op-tn-jump { top: 8px; } }
@media (max-width: 767px) {
  .op-tn-page .op-tn-cta, .op-tn-feature-side, .op-tn-clock { align-items: flex-start; }
  .op-tn-cta-row { justify-content: flex-start; }
  .op-tn-jump { border-radius: 20px; position: static; }
  .op-tn-mine-time { margin-left: 0; width: 100%; }
  .op-tn-wide2 { grid-column: 1 / -1; }
  .op-tn-roundform { grid-template-columns: 1fr 80px; }
  .op-tn-roundform input[type=datetime-local] { grid-column: 1 / -1; }
  .op-tn-feature { padding: 1.4rem 1.3rem; }
}

/* ===== qw26_67: glass grade letters (pictures in branding/grades/v1, made by branding/grades/gen.cjs) ===== */
.op-grade-img { height: 1.25em; width: auto; vertical-align: -.28em; }
.op-grade > .op-grade-img { height: 1.5em; vertical-align: middle; }
.op-grade { width: auto !important; min-width: 2rem; text-shadow: none !important; }
.op-wr-grade .op-grade-img { height: 5rem; }
.op-rec-grade .op-grade-img { height: 2.2rem; }
.op-chat-card .g .op-grade-img { height: 1.5rem; }
.op-sc-grade img { height: 38px; filter: none; }
.op-pf-grade img { height: 30px; }

/* ===== qw26_68: loading placeholders (owner picked idea 7): shimmering glass shapes of score rows instead of a spinner dot ===== */
.op-skel { display: grid; gap: .6rem; width: 100%; padding: .2rem 0; }
.op-skel i { position: relative; display: block; height: 72px; border-radius: 18px; overflow: hidden;
  background:
    linear-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, .12)) 14px 50% / 84px 48px no-repeat,
    linear-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, .12)) 114px 24px / min(46%, 320px) 12px no-repeat,
    linear-gradient(rgba(255, 255, 255, .08), rgba(255, 255, 255, .08)) 114px 44px / min(28%, 190px) 9px no-repeat,
    linear-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, .12)) calc(100% - 16px) 50% / 62px 22px no-repeat,
    rgba(255, 255, 255, .045); }
.op-skel i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .16) 50%, transparent 75%); transform: translateX(-100%); animation: opu-skel 1.5s ease-in-out infinite; }
.op-skel i:nth-child(2)::after { animation-delay: .12s; } .op-skel i:nth-child(3)::after { animation-delay: .24s; }
@keyframes opu-skel { to { transform: translateX(100%); } }
html[data-op-lite] .op-skel i::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .op-skel i::after { animation: none; } }

/* ===== qw26_68: easter eggs (z x z x combo counter, chat with yourself) ===== */
.op-egg-combo { position: fixed; top: 92px; right: 26px; z-index: 2000; pointer-events: none; opacity: 0; transition: opacity .35s ease;
  font: 900 2.6rem/1 var(--op-font-display, sans-serif); font-style: italic; color: #fff; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .55)); }
.op-egg-combo b { font-size: 1.5em; font-weight: 900; }
.op-egg-combo.on { opacity: 1; }
.op-egg-combo.bump { animation: opu-egg-bump .18s ease-out; }
@keyframes opu-egg-bump { from { transform: scale(1.18); } to { transform: scale(1); } }
.op-egg-msgs { display: flex; flex-direction: column; gap: .5rem; padding: 0 1rem .6rem; max-height: 40vh; overflow-y: auto; }
.op-egg-msgs .op-egg-circle { flex-direction: row; align-items: center; gap: .5rem; }
.op-egg-hit { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; background: radial-gradient(circle, transparent 45%, #fff 46%, #fff 58%, #ff66ab 59%); box-shadow: 0 4px 10px rgba(0, 0, 0, .4); }
.op-egg-form { display: flex; gap: .5rem; padding: .8rem 1rem; }
.op-egg-form input { flex: 1; min-width: 0; padding: .6rem 1rem; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .08); color: #fff; }
.op-egg-form input:focus { outline: 2px solid rgba(255, 255, 255, .35); }
.op-egg-form button { width: 42px; height: 42px; border: 0; border-radius: 50%; background: #fff; color: #14141c; flex-shrink: 0; }

/* ===== qw26_69: Ranked Play, three maps a day (easy, medium, hard) ===== */
.op-rnk-maps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin: 0 0 .5rem; }
.op-rnk-map { --sl: #6fe3a0; position: relative; display: flex; align-items: center; gap: .8rem; min-width: 0; padding: .6rem .9rem .6rem .6rem; border-radius: 18px; text-decoration: none; color: #fff;
  background: rgba(255, 255, 255, .05); }
.op-rnk-map-medium { --sl: #6fc8ff; } .op-rnk-map-hard { --sl: #ff7b86; }
.op-rnk-map:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.op-rnk-map.active { background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 2px var(--sl); }
.op-rnk-map-img { width: 76px; height: 52px; border-radius: 12px; flex-shrink: 0; background: rgba(0, 0, 0, .3) center / cover no-repeat; }
.op-rnk-map-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.op-rnk-map-txt small { font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sl); }
.op-rnk-map-txt strong, .op-rnk-map-txt em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-rnk-map-txt strong { font-size: .95rem; }
.op-rnk-map-txt em { font-size: .78rem; font-style: normal; color: var(--op-muted); }
.op-rnk-maps-note { margin: 0 0 1.2rem; font-size: .86rem; color: var(--op-muted); }
.op-rnk-maps-note b { color: #fff; }
.op-rnk-slot { font-style: normal; font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: .1rem .45rem; border-radius: 999px; background: rgba(111, 227, 160, .16); color: #6fe3a0; }
.op-rnk-slot-medium { background: rgba(111, 200, 255, .16); color: #6fc8ff; } .op-rnk-slot-hard { background: rgba(255, 123, 134, .16); color: #ff7b86; }
@media (max-width: 767px) { .op-rnk-maps { grid-template-columns: 1fr; } }

/* ===== qw26_69.0.1: make open tournaments visible (navbar chip, band on the home page) ===== */
.op-nav-live { margin-left: .4rem; padding: .08rem .5rem; border-radius: 999px; font-style: normal; font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  background: #3ad678; color: #06240f; }
.gh-tourney-band { --tn: #ffd84d; position: relative; display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; overflow: hidden; margin: 0 0 1.2rem; padding: 1.1rem 1.5rem 1.1rem 1.3rem; border-radius: 26px; color: #fff; text-decoration: none;
  background: linear-gradient(100deg, rgba(12, 12, 18, .9) 35%, rgba(12, 12, 18, .5)), var(--tn-img, none) center / cover no-repeat, rgba(255, 255, 255, .06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 4px 0 0 var(--tn); }
.gh-tourney-band:hover { color: #fff; }
.gh-tourney-band-ic { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-size: 1.2rem; color: var(--tn); background: rgba(255, 255, 255, .1); }
.gh-tourney-band-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 260px; line-height: 1.25; }
.gh-tourney-band-txt small, .gh-tourney-band-clock small { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tn); }
.gh-tourney-band-txt strong { font-size: 1.35rem; font-weight: 800; overflow-wrap: anywhere; }
.gh-tourney-band-txt em { font-style: normal; font-size: .86rem; color: rgba(255, 255, 255, .72); }
.gh-tourney-band-clock { display: flex; flex-direction: column; align-items: flex-end; }
.gh-tourney-band-clock small { color: rgba(255, 255, 255, .6); }
.gh-tourney-band-clock b { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
@media (max-width: 767px) { .gh-tourney-band-clock { align-items: flex-start; } .gh-tourney-band .op-btn { width: 100%; justify-content: center; } }
/* on the desktop bar there is no room for a word: a small green dot instead, the word stays in the phone menu */
@media (min-width: 1400px) { .op-nav-live { width: 9px; height: 9px; padding: 0; margin-left: .35rem; font-size: 0; display: inline-block; vertical-align: middle; box-shadow: 0 0 0 3px rgba(58, 214, 120, .22); } }

/* ===== qw26_70: tournament page easier to read: steps for players, mappool as cover cards, host checklist ===== */
.op-tn-steps { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.op-tn-steps li { display: flex; gap: .8rem; align-items: flex-start; padding: .9rem 1rem; border-radius: 18px; background: rgba(255, 255, 255, .05); min-width: 0; }
.op-tn-steps li > b { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-size: .9rem; background: rgba(255, 255, 255, .12); color: #fff; }
.op-tn-steps li.now { background: color-mix(in srgb, var(--tn) 18%, rgba(255, 255, 255, .05)); }
.op-tn-steps li.now > b { background: var(--tn); color: #101018; }
.op-tn-steps span { display: flex; flex-direction: column; min-width: 0; }
.op-tn-steps strong { color: #fff; font-size: .98rem; }
.op-tn-steps small { color: rgba(255, 255, 255, .72); font-size: .82rem; line-height: 1.35; }
.op-tn-pool { margin-bottom: .7rem; border-radius: 18px; background: rgba(0, 0, 0, .2); }
.op-tn-pool > summary { display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; cursor: pointer; list-style: none; }
.op-tn-pool > summary::-webkit-details-marker { display: none; }
.op-tn-pool > summary strong { color: #fff; font-size: 1rem; }
.op-tn-pool > summary span { font-size: .8rem; color: var(--op-muted); }
.op-tn-pool > summary i { margin-left: auto; color: var(--op-muted); transition: transform .2s ease; }
.op-tn-pool[open] > summary i { transform: rotate(180deg); }
.op-tn-mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .7rem; padding: 0 .8rem .9rem; }
.op-tn-mcard { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .35rem; min-height: 138px; padding: .65rem .75rem; border-radius: 16px; background: #15151d; min-width: 0; }
.op-tn-mcard-bg { position: absolute; inset: 0; background: center / cover no-repeat; }
.op-tn-mcard-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 16, .35), rgba(10, 10, 16, .88) 70%); }
.op-tn-mcard > :not(.op-tn-mcard-bg) { position: relative; }
.op-tn-mcard-top { display: flex; align-items: center; gap: .4rem; }
.op-tn-mcard-top form { margin-left: auto; }
.op-tn-mcard-sr { padding: .12rem .5rem; border-radius: 999px; font-size: .74rem; font-weight: 800; background: rgba(0, 0, 0, .55); color: #fff; }
.op-tn-mcard-del { border: 0; width: 26px; height: 26px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #ff9aa3; font-size: .72rem; }
.op-tn-mcard-txt { display: flex; flex-direction: column; margin-top: auto; min-width: 0; color: #fff; text-decoration: none; line-height: 1.25; }
.op-tn-mcard-txt:hover { color: #fff; }
.op-tn-mcard-txt strong, .op-tn-mcard-txt small, .op-tn-mcard-txt em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-tn-mcard-txt strong { font-size: .95rem; text-shadow: 0 1px 4px rgba(0, 0, 0, .7); }
.op-tn-mcard-txt small { font-size: .78rem; color: rgba(255, 255, 255, .8); }
.op-tn-mcard-txt em { font-size: .74rem; font-style: normal; color: rgba(255, 255, 255, .6); }
.op-tn-mcard-foot { display: flex; align-items: center; gap: .7rem; font-size: .72rem; color: rgba(255, 255, 255, .78); }
.op-tn-mcard-foot a { margin-left: auto; color: #fff; text-decoration: none; padding: .15rem .55rem; border-radius: 999px; background: rgba(255, 255, 255, .16); font-weight: 700; white-space: nowrap; }
.op-tn-mcard-foot a:hover { background: rgba(255, 255, 255, .3); }
.op-tn-mcard.unknown { background: repeating-linear-gradient(135deg, rgba(255, 94, 107, .1) 0 12px, rgba(255, 255, 255, .03) 12px 24px); }
.op-tn-guide { margin: 0 0 1rem; padding: 0; list-style: none; counter-reset: g; }
.op-tn-guide li { position: relative; counter-increment: g; padding: 0 0 .7rem 2.2rem; display: flex; flex-direction: column; }
.op-tn-guide li::before { content: counter(g); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 800; background: rgba(255, 255, 255, .12); color: #fff; }
.op-tn-guide li.done::before { content: "\2713"; background: #3ad678; color: #06240f; }
.op-tn-guide strong { color: #fff; font-size: .9rem; }
.op-tn-guide small { color: var(--op-muted); font-size: .78rem; line-height: 1.35; }
.op-tn-guide li.done strong { color: rgba(255, 255, 255, .6); }
@media (max-width: 991px) { .op-tn-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .op-tn-steps { grid-template-columns: 1fr; } .op-tn-mgrid { grid-template-columns: 1fr; padding: 0 .5rem .7rem; } }
/* qw26_70: the jump pills covered the content while scrolling: they stay at the top of the page now; round facts readable on any tournament colour */
.op-tn-jump { position: static !important; }
.op-tn-rd span, .op-tn-page .op-tn-round-name, .op-tn-page .op-tn-poolround { color: color-mix(in srgb, var(--tn) 45%, #fff) !important; }

/* ===== qw26_71: no small profile pictures in lists any more (owner); names stand alone ===== */
.gh-seen a, .op-act-seen a, .op-act .op-seen a { display: inline-flex !important; align-items: center; width: auto !important; height: auto !important; padding: .22rem .7rem; margin: 0 .3rem .35rem 0; border-radius: 999px;
  background: rgba(255, 255, 255, .08); color: #fff; font-size: .82rem; font-weight: 600; text-decoration: none; }
.gh-seen a.on::before, .op-act-seen a.on::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3ad678; margin-right: .4rem; position: static !important; }
.gh-seen a.on::after, .op-act-seen a.on::after { content: none !important; }
.gh-seen { display: flex; flex-wrap: wrap; }
.gh-people a { padding-left: .8rem !important; }
.op-mp-players em { font-style: normal; font-size: .8rem; padding: .1rem .5rem; margin-right: .25rem; border-radius: 999px; background: rgba(255, 255, 255, .08); white-space: nowrap; }
.op-clan-stack:empty { display: none; }

/* ===== qw26_71: tournaments without own colours and accent lines, with the tournament logo and a big picture header ===== */
.op-tn, .gh-tourney-band { --tn: #f5f5f7 !important; }
.op-tn-feature::after, .op-tn-page .op-tn-hero::after { content: none !important; }
.gh-tourney-band { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3) !important; padding: 1rem 1.5rem 1rem 1.1rem !important;
  background: linear-gradient(100deg, rgba(12, 12, 18, .82) 30%, rgba(12, 12, 18, .35)), var(--tn-img, none) center / cover no-repeat, rgba(255, 255, 255, .06) !important; }
.gh-tourney-band-logo { width: 62px; height: 62px; flex-shrink: 0; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .5)); }
.gh-tourney-band-txt small { color: rgba(255, 255, 255, .7) !important; }
.op-tn-logo { width: 84px; height: 84px; flex-shrink: 0; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .5)); }
.op-tn-feature { min-height: 230px; align-items: flex-end !important; padding: 1.6rem 2rem !important;
  background: linear-gradient(180deg, rgba(10, 10, 16, .1) 0%, rgba(10, 10, 16, .88) 82%), var(--tn-img, none) center / cover no-repeat, rgba(255, 255, 255, .05) !important; }
.op-tn-feature-logo { position: absolute; right: 1.6rem; top: 1.3rem; width: 74px; height: 74px; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .5)); }
/* tournament page header: the picture is the header, text and sign-up sit on it */
.op-tn-page .op-tn-hero2, html[data-op-glass] .op-tn-page .op-tn-hero.op-tn-hero2, html[data-bs-theme] .op-tn-page .op-tn-hero.op-tn-hero2 { min-height: 380px; align-items: flex-end !important; padding: 2rem 2.2rem !important; border-radius: 34px !important; border: 0 !important;
  background: linear-gradient(180deg, rgba(10, 10, 16, .05) 0%, rgba(10, 10, 16, .55) 55%, rgba(10, 10, 16, .92) 100%), var(--tn-img, linear-gradient(135deg, #3b2a9c, #1b3f8f)) center / cover no-repeat !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 30px 70px -30px rgba(0, 0, 0, .8) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.op-tn-hero2 .op-tn-hero-in { justify-content: flex-end; }
.op-tn-hero-logo { width: 88px; height: 88px; margin-bottom: .6rem; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55)); }
.op-tn-hero2 .op-daily-kicker { color: rgba(255, 255, 255, .8) !important; }
.op-tn-page .op-tn-hero2 h1 { font-size: clamp(2rem, 5vw, 3.4rem) !important; margin: .1rem 0 .7rem !important; text-shadow: 0 4px 22px rgba(0, 0, 0, .6); }
.op-tn-hero2 .op-tn-meta { gap: .5rem !important; }
.op-tn-hero2 .op-tn-meta > span { padding: .3rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff !important; font-size: .82rem; font-weight: 600; }
.op-tn-hero2 .op-tn-meta > span i { color: #fff !important; opacity: .8; }
.op-tn-hero2 .op-tn-meta > .op-tn-status { background: #3ad678 !important; color: #06240f !important; }
.op-tn-hero2.st-running .op-tn-meta > .op-tn-status { background: #ffb238 !important; color: #2a1405 !important; }
.op-tn-hero2.st-finished .op-tn-meta > .op-tn-status { background: rgba(255, 255, 255, .2) !important; color: #fff !important; }
.op-tn-page .op-tn-hero2 .op-tn-cta { align-self: flex-end; padding: 1.1rem 1.3rem; border-radius: 24px; min-width: 250px; align-items: stretch !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .05) 45%, rgba(255, 255, 255, .03)), rgba(16, 16, 24, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 18px 40px -18px rgba(0, 0, 0, .7); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); }
.op-tn-page .op-tn-hero2 .op-tn-cta:empty { display: none; }
.op-tn-hero2 .op-tn-clock { align-items: flex-start !important; }
.op-tn-hero2 .op-tn-cta-row { justify-content: flex-start !important; }
.op-tn-hero2 .op-tn-cta .op-btn-main { width: 100%; justify-content: center; }
.op-tn-hero2 .op-tn-cta form { flex: 1; }
@media (max-width: 767px) { .op-tn-page .op-tn-hero2 { min-height: 0; padding: 7rem 1.2rem 1.2rem !important; } .op-tn-page .op-tn-hero2 .op-tn-cta { width: 100%; } .op-tn-feature-logo { width: 52px; height: 52px; } }
html[data-op-glass] .op-tn-feature { background: linear-gradient(180deg, rgba(10, 10, 16, .1) 0%, rgba(10, 10, 16, .88) 82%), var(--tn-img, none) center / cover no-repeat, rgba(255, 255, 255, .05) !important; }
.op-tn-feature-logo { display: none; }

/* =====================================================================================================================
   qw26_73: Ranked Play season rewards (RankedRewards.java) - rewards on /ranked, reward titles, last season's rank, frame
   ===================================================================================================================== */
.op-rnk-rw { padding-bottom: 1.4rem; }
.op-rnk-rw-when { font-size: .82rem; font-weight: 600; opacity: .7; }
.op-rnk-rw-lead { margin: 0 0 1rem; font-size: .92rem; opacity: .85; max-width: 62rem; }
.op-rnk-rw-first { display: flex; align-items: center; gap: .9rem; margin: 0 0 1rem; padding: .7rem .9rem; border-radius: 16px; background: rgba(255, 255, 255, .07); }
.op-rnk-rw-first img { height: 40px; width: auto; border-radius: 6px; flex: 0 0 auto; }
.op-rnk-rw-first span { font-size: .88rem; opacity: .9; min-width: 0; }
.op-rnk-rw-first strong { display: block; font-size: .95rem; }
.op-rnk-rw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .8rem; }
.op-rnk-rw-card { min-width: 0; padding: .85rem .9rem; border-radius: 18px; background: rgba(255, 255, 255, .055); opacity: .78; }
.op-rnk-rw-card.got { opacity: 1; background: linear-gradient(160deg, color-mix(in srgb, var(--tc) 26%, transparent), rgba(255, 255, 255, .06)); }
.op-rnk-rw-top { display: flex; align-items: center; gap: .6rem; margin-bottom: .55rem; }
.op-rnk-rw-top img { width: 42px; height: 42px; flex: 0 0 auto; }
.op-rnk-rw-top span { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.2; }
.op-rnk-rw-top b { color: var(--tc); font-size: 1rem; }
.op-rnk-rw-top small { font-size: .76rem; opacity: .7; }
.op-rnk-rw-top > i { color: #46d68a; font-size: 1.05rem; }
.op-rnk-rw-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.op-rnk-rw-card li { display: flex; gap: .5rem; align-items: baseline; font-size: .84rem; line-height: 1.35; }
.op-rnk-rw-card li i { width: 1.05rem; text-align: center; flex: 0 0 auto; color: var(--tc); font-size: .82rem; }
.op-rnk-rw-card li.op-rnk-rw-none { opacity: .6; }
.op-rnk-rw-mine { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.3rem; margin-top: 1rem; padding: .8rem .95rem; border-radius: 16px; background: rgba(255, 255, 255, .07); }
.op-rnk-rw-mine > div { display: flex; align-items: center; gap: .65rem; flex: 1 1 260px; min-width: 0; }
.op-rnk-rw-mine > div img { width: 40px; height: 40px; }
.op-rnk-rw-mine strong { display: block; font-size: .95rem; }
.op-rnk-rw-mine small { opacity: .7; font-size: .8rem; }
.op-rnk-rw-mine .op-check { margin: 0; }
.op-pf-lastrank img { width: 18px; height: 18px; margin-right: .35rem; }
.op-pfx-gems span { filter: drop-shadow(0 0 6px rgba(120, 190, 255, .55)); }
.op-rank-title-legend { --edge: rgba(183, 124, 255, .5); color: #d6b8ff; }
.op-rank-title-celestial { --edge: rgba(255, 111, 208, .55); color: #ffc2ea; }
.op-rank-title-season { --edge: rgba(108, 184, 255, .5); color: #bfe0ff; }
.op-hof-season { display: grid; gap: .3rem; padding: .5rem 0; }
.op-hof-season + .op-hof-season { margin-top: .3rem; background: linear-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, .12)) top / 100% 1px no-repeat; padding-top: .8rem; }
.op-hof-season > b { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; opacity: .65; }
.op-hof-season a { display: flex; align-items: center; gap: .45rem; min-width: 0; color: inherit; font-weight: 700; }
.op-hof-season a em { margin-left: auto; font-style: normal; font-weight: 600; font-size: .8rem; opacity: .75; white-space: nowrap; }
@keyframes opu-frame-celestial {
  0%, 100% { outline-color: #ff9ad5; filter: drop-shadow(0 0 9px #ff9ad5); } 25% { outline-color: #b99cff; filter: drop-shadow(0 0 9px #b99cff); }
  50% { outline-color: #8fd3ff; filter: drop-shadow(0 0 9px #8fd3ff); } 75% { outline-color: #9dffd0; filter: drop-shadow(0 0 9px #9dffd0); }
}
/* qw26_73.0.1: previews of the rewards inside the cards */
.op-rnk-rw-card { display: flex; flex-direction: column; }
.op-rnk-rw-show { position: relative; margin-top: auto; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .6rem; min-height: 78px; padding: .7rem .6rem; border-radius: 14px; background: rgba(0, 0, 0, .26); overflow: hidden; }
.op-rnk-rw-card ul { margin-bottom: .75rem; }
.op-rnk-rw-show em { font-style: normal; font-size: .74rem; opacity: .6; }
.op-rnk-rw-show .op-rank-title { margin: 0; }
.op-rnk-rw-first .op-rank-title { margin: 0; flex: 0 0 auto; }
.op-rnk-rw-stk { width: 60px; height: 60px; margin: -4px; }
.op-rnk-rw-av { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; display: inline-grid; place-items: center; flex: 0 0 auto; background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .8);
  outline: 3px solid var(--tc); outline-offset: 2px; filter: drop-shadow(0 0 7px var(--tc)); margin: 6px; }
.op-rnk-rw-av { --rk: var(--tc); outline: 6px double var(--tc); filter: none; animation: opu-frame-ranked 3.2s ease-in-out infinite; }
.op-rnk-rw-av.cel { outline-style: double; outline-width: 7px; outline-offset: 3px; outline-color: #ff9ad5; animation: opu-frame-celestial 5s linear infinite; }
.op-rnk-rw-gemname { display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; min-width: 0; }
.op-rnk-rw-gemname img { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }
@keyframes opu-frame-ranked { 0%, 100% { filter: drop-shadow(0 0 4px var(--rk)); } 50% { filter: drop-shadow(0 0 13px var(--rk)); } }
.op-rnk-rw-glow { font-weight: 800; font-size: 1.2rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-bottom: .1em;
  background: linear-gradient(90deg, var(--tc) 0%, var(--tc) 35%, color-mix(in srgb, var(--tc) 35%, #fff) 50%, var(--tc) 65%, var(--tc) 100%); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: opu-name-flow 2.8s linear infinite; }
.op-rnk-rw-fall img { position: absolute; top: -30px; animation: opu-rw-fall 6.3s linear infinite; filter: drop-shadow(0 0 5px rgba(120, 190, 255, .6)); }
@keyframes opu-rw-fall { to { transform: translateY(130px) rotate(40deg); } }
@media (prefers-reduced-motion: reduce) { .op-rnk-rw-fall img, .op-rnk-rw-glow, .op-rnk-rw-av.cel { animation: none; } .op-rnk-rw-fall img { top: 30%; } }
html[data-op-lite] .op-rnk-rw-fall img, html[data-op-lite] .op-rnk-rw-glow, html[data-op-lite] .op-rnk-rw-av { animation: none; } html[data-op-lite] .op-rnk-rw-fall img { top: 30%; }
/* qw26_73.0.3: Ranked Play reward titles = colourful moving pills with the rank gem; profile badges get a slow light sweep */
.op-rank-title-rk { --c1: #b77cff; --c2: #6f4bd8; --c3: #e3c8ff; color: #fff !important; border-color: transparent !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  background: linear-gradient(110deg, var(--c2), var(--c1), var(--c3), var(--c1), var(--c2)) !important; background-size: 300% 100% !important;
  box-shadow: 0 0 16px color-mix(in srgb, var(--c1) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, .55) !important; animation: opu-rk-title 7s linear infinite !important; }
.op-rank-title-rk.op-rank-title-legend { --c1: #b77cff; --c2: #6a3fd6; --c3: #ecd6ff; }
.op-rank-title-rk.op-rank-title-celestial { --c1: #ff6fd0; --c2: #7a8bff; --c3: #9dffd0; background: linear-gradient(110deg, #ff6fd0, #b99cff, #7fd0ff, #9dffd0, #ffd27a, #ff6fd0) !important; background-size: 300% 100% !important; }
.op-rank-title-rk.op-rank-title-season { --c1: #4f9dff; --c2: #2a55c8; --c3: #c2e4ff; }
.op-rank-title-rk small { color: rgba(255, 255, 255, .85) !important; opacity: 1 !important; }
.op-rank-title-rk img { width: 20px; height: 20px; margin: -3px 0 -3px -4px; flex: 0 0 auto; filter: drop-shadow(0 0 4px rgba(255, 255, 255, .7)); animation: opu-rk-gem 3.4s ease-in-out infinite; }
.op-rank-title-rk::after { content: "" !important; position: absolute; top: 0; bottom: 0; left: -40%; width: 35%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); animation: opu-rk-sweep 4.2s ease-in-out infinite !important; pointer-events: none; }
@keyframes opu-rk-title { to { background-position: -300% 0; } }
@keyframes opu-rk-gem { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-1.5px) rotate(6deg); } }
@keyframes opu-rk-sweep { 0%, 55% { left: -40%; } 100% { left: 130%; } }
.op-badge { position: relative; }
.op-badge::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-20deg); animation: opu-rk-sweep 5.5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .5s); pointer-events: none; }
.op-rnk-rw-pick { height: 34px; padding: 0 .7rem; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .12); color: inherit; font-weight: 600; font-size: .85rem; }
.op-rnk-rw-pick option { color: #111; }
@media (prefers-reduced-motion: reduce) { .op-rank-title-rk, .op-rank-title-rk img, .op-rank-title-rk::after, .op-badge::after { animation: none !important; } .op-badge::after, .op-rank-title-rk::after { display: none; } }
html[data-op-lite] .op-rank-title-rk, html[data-op-lite] .op-rank-title-rk img { animation: none !important; } html[data-op-lite] .op-rank-title-rk::after, html[data-op-lite] .op-badge::after { display: none; }
.op-rank-title-rk { overflow: hidden !important; }
.op-badge { overflow: hidden; }
/* qw26_73.0.5: every title under the name is a colourful moving badge now (owner), the champion carries the rainbow #1, the season champion a trophy */
.op-rank-title-rk.op-rank-title-gold, .op-rank-title-rk.op-rank-title-1 { --c1: #f3c65a; --c2: #b67a12; --c3: #fff1bd; }
.op-rank-title-rk.op-rank-title-silver { --c1: #c3cede; --c2: #74809a; --c3: #ffffff; }
.op-rank-title-rk.op-rank-title-bronze { --c1: #e0955a; --c2: #96511f; --c3: #ffdcbd; }
.op-rank-title-rk.op-rank-title-ex { --c1: #8a8798; --c2: #4c4a5a; --c3: #c9c6d6; animation-duration: 14s !important; }
.op-rank-title-rk > i { width: 20px; height: 20px; display: inline-grid; place-items: center; margin: -3px 0 -3px -4px; border-radius: 50%; font-size: .66rem !important; color: #fff !important;
  background: rgba(255, 255, 255, .28) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); filter: none !important; }
.op-title-one { display: inline-grid; place-items: center; min-width: 28px; height: 20px; margin: -3px 0 -3px -5px; padding: 0 .35rem; border-radius: 999px; background: rgba(12, 10, 24, .82); font-size: .72rem; font-weight: 900; line-height: 1; }
.op-title-one { background-image: linear-gradient(90deg, #ff6fd0, #b99cff, #7fd0ff, #9dffd0, #ffd27a, #ff6fd0), linear-gradient(rgba(12, 10, 24, .82), rgba(12, 10, 24, .82)); background-size: 200% 100%, 100% 100%;
  -webkit-background-clip: text, padding-box; background-clip: text, padding-box; -webkit-text-fill-color: transparent; color: transparent; animation: opu-holo-flow 4s linear infinite; text-shadow: none; }
@media (prefers-reduced-motion: reduce) { .op-title-one { animation: none; } }
html[data-op-lite] .op-title-one { animation: none; }
/* qw26_73.0.6 (owner: "only the number at the champion, not gold - liquid glass rainbow with a rainbow #1"; "the other badges are still almost the same") */
@keyframes opu-lg-flow { to { background-position: 0 0, -300% 0, 0 0, -300% 0; } }
@keyframes opu-badge-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.op-rank-title-rk.op-rank-title-gold, .op-rank-title-rk.op-rank-title-1 {
  border: 1.5px solid transparent !important; color: #fff !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .4) 0%, rgba(255, 255, 255, .06) 46%, rgba(255, 255, 255, 0) 56%, rgba(255, 255, 255, .2) 100%) padding-box,
    linear-gradient(110deg, rgba(255, 111, 208, .42), rgba(185, 156, 255, .42), rgba(127, 208, 255, .42), rgba(157, 255, 208, .38), rgba(255, 210, 122, .38), rgba(255, 111, 208, .42)) padding-box,
    linear-gradient(rgba(16, 14, 28, .86), rgba(16, 14, 28, .86)) padding-box,
    linear-gradient(110deg, #ff6fd0, #b99cff, #7fd0ff, #9dffd0, #ffd27a, #ff6fd0) border-box !important;
  background-size: 100% 100%, 300% 100%, 100% 100%, 300% 100% !important; animation: opu-lg-flow 7s linear infinite !important;
  box-shadow: 0 0 18px rgba(185, 156, 255, .5), 0 6px 16px -8px rgba(0, 0, 0, .6) !important; }
.op-title-one { display: inline-block !important; min-width: 0 !important; height: auto !important; margin: -4px .05rem -4px -2px !important; padding: 0 !important; border-radius: 0 !important;
  font-size: 1.12rem !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: -.02em;
  background: linear-gradient(90deg, #ff6fd0, #b99cff, #7fd0ff, #9dffd0, #ffd27a, #ff6fd0) !important; background-size: 200% 100% !important;
  -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent; color: transparent !important;
  animation: opu-holo-flow 3.5s linear infinite; filter: drop-shadow(0 0 6px rgba(200, 170, 255, .75)); text-shadow: none !important; }
/* picture badges: a moving rainbow rim, a glow and a slow float */
.op-badge { padding: 2px; border-radius: 12px; overflow: hidden; background: linear-gradient(110deg, #ff6fd0, #b99cff, #7fd0ff, #9dffd0, #ffd27a, #ff6fd0); background-size: 300% 100%;
  box-shadow: 0 0 16px rgba(185, 156, 255, .5), 0 6px 14px -6px rgba(0, 0, 0, .6); animation: opu-rk-title 6s linear infinite, opu-badge-float 4.2s ease-in-out infinite; animation-delay: 0s, calc(var(--i, 0) * .45s); }
.op-badge img { border-radius: 10px; background: #14141c; }
.op-badge:hover { box-shadow: 0 0 24px rgba(200, 170, 255, .8), 0 8px 22px rgba(0, 0, 0, .5); }
@media (prefers-reduced-motion: reduce) { .op-badge, .op-rank-title-rk.op-rank-title-gold, .op-title-one { animation: none !important; } }
html[data-op-lite] .op-badge, html[data-op-lite] .op-rank-title-rk.op-rank-title-gold, html[data-op-lite] .op-title-one { animation: none !important; }
/* qw26_73.0.7: calmer - thinner rim, less glow, no bouncing */
.op-title-one { font-size: 1rem !important; filter: drop-shadow(0 0 3px rgba(200, 170, 255, .45)); animation-duration: 6s; }
.op-rank-title-rk.op-rank-title-gold, .op-rank-title-rk.op-rank-title-1 { border-width: 1px !important; box-shadow: 0 0 9px rgba(185, 156, 255, .25) !important; animation-duration: 12s !important; }
.op-badge { padding: 1.5px; box-shadow: 0 0 8px rgba(185, 156, 255, .28), 0 4px 10px -6px rgba(0, 0, 0, .6); animation: opu-rk-title 12s linear infinite; }
.op-badge::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent); animation-duration: 9s; }
.op-rank-title-rk::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent); animation-duration: 9s !important; }
.op-rank-title-rk img { animation: none; }
/* qw26_74: clan flags (ClanFlags.java) - a small picture instead of the clan tag; the tag in a row can be clicked too */
.op-clanflag { display: inline-flex; flex: 0 0 auto; width: 38px; height: 19px; border-radius: 5px; overflow: hidden; cursor: pointer; vertical-align: middle; background: rgba(255, 255, 255, .1);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 2px 5px -2px rgba(0, 0, 0, .6); transition: transform .15s ease, box-shadow .15s ease; }
.op-clanflag img { width: 100%; height: 100%; object-fit: cover; display: block; }
.op-clanflag:hover { transform: scale(1.08); box-shadow: 0 0 0 1px rgba(255, 255, 255, .6), 0 3px 8px -2px rgba(0, 0, 0, .6); }
.op-clanflag-pf { width: 56px; height: 28px; border-radius: 8px; align-self: center; }
.op-lbx-clan[data-op-go] { cursor: pointer; } .op-lbx-clan[data-op-go]:hover { color: #fff; }
/* the rainbow #1 of the champion title sat on the rim of the pill */
.op-rank-title-rk.op-rank-title-gold, .op-rank-title-rk.op-rank-title-1 { padding-left: .8rem !important; }
.op-title-one { font-size: .86rem !important; margin: 0 .1rem 0 0 !important; padding: 0 .06em !important; letter-spacing: 0 !important; }

/* ---- qw26_75: store + Google login ---- */
.op-auth-or { display: flex; align-items: center; gap: .8rem; margin: 1.1rem 0 .9rem; color: var(--op-muted); font-size: .82rem; }
.op-auth-or::before, .op-auth-or::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .14); }
.op-google-g { width: 18px; height: 18px; flex: none; }
.op-google-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; }
.op-google-mail { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border-radius: 14px; background: rgba(255, 255, 255, .06); font-weight: 700; min-width: 0; }
.op-google-mail span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-store { padding-top: 1.6rem; padding-bottom: 3rem; max-width: 1180px; }
.op-store-head h1 { font-family: var(--op-font-display, inherit); font-weight: 800; font-size: 2.2rem; margin: 0 0 .3rem; }
.op-store-head p { color: var(--op-muted); margin: 0 0 1.2rem; max-width: 62ch; }
.op-store-title { font-size: 1.15rem; font-weight: 800; margin: 2rem 0 .9rem; }
.op-store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.op-store-card { display: flex; flex-direction: column; gap: .5rem; padding: 1.3rem; border-radius: 24px; background: rgba(255, 255, 255, .05); min-width: 0; margin: 0; }
.op-store-card h3 { font-size: 1.05rem; font-weight: 800; margin: 0; }
.op-store-card p { color: var(--op-muted); font-size: .9rem; margin: 0; flex: 1; }
.op-store-ico { font-size: 1.5rem; color: var(--op-yellow, #ffd84d); }
.op-store-sup .op-store-ico { color: #ff7ab8; }
.op-store-gift { margin-top: .3rem; }
.op-store-gift select { width: 100%; min-width: 0; }
.op-store-buy { margin-top: .6rem; display: flex; }
.op-store-buy .op-btn { flex: 1; justify-content: center; }
.op-store-note { color: var(--op-muted); font-size: .86rem; margin-top: 1rem; }
.op-store-list { display: grid; gap: .5rem; }
.op-store-row { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; padding: .7rem 1rem; border-radius: 16px; background: rgba(255, 255, 255, .04); }
.op-store-row time { margin-left: auto; color: var(--op-muted); font-size: .85rem; }
.op-store-row > span { color: var(--op-muted); }
.op-store-order { max-width: 720px; }
.op-store-steps { list-style: none; counter-reset: st; padding: 0; margin: 0; display: grid; gap: 1rem; }
.op-store-steps li { counter-increment: st; position: relative; padding: 1.2rem 1.2rem 1.2rem 4rem; border-radius: 22px; background: rgba(255, 255, 255, .05); display: grid; gap: .6rem; justify-items: start; }
.op-store-steps li::before { content: counter(st); position: absolute; left: 1.2rem; top: 1.1rem; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: rgba(255, 255, 255, .12); }
.op-store-steps li > span { color: var(--op-muted); }
.op-store-code { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; }
.op-store-code code { font-size: 1.5rem; font-weight: 800; letter-spacing: .08em; color: #fff; background: rgba(255, 255, 255, .08); padding: .3rem .8rem; border-radius: 12px; }
.op-store-done { text-align: center; padding: 3rem 1rem; display: grid; gap: .8rem; justify-items: center; }
.op-store-done > i { font-size: 3rem; color: #5fe08a; }
.op-store-done > i.fa-circle-xmark { color: var(--op-muted); }
.op-sup-store { margin-top: .8rem; }

/* ---- qw26_76: store, cleaner with previews ---- */
.op-st-head { text-align: center; margin-bottom: 2rem; }
.op-st-head h1 { font-family: var(--op-font-display, inherit); font-weight: 800; font-size: 2.6rem; margin: 0; }
.op-st-head p { color: var(--op-muted); margin: .2rem 0 1rem; }
.op-st-how { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .7rem; padding: .5rem 1.1rem; border-radius: 999px; background: rgba(255, 255, 255, .06); font-size: .88rem; }
.op-st-how b { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; margin-right: .3rem; border-radius: 50%; background: rgba(255, 255, 255, .16); font-size: .78rem; }
.op-st-how i { font-size: .6rem; opacity: .5; }
.op-st-sup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 2rem; align-items: center; padding: 2rem; border-radius: 30px; background: linear-gradient(135deg, rgba(255, 106, 181, .16), rgba(120, 130, 255, .1)), rgba(255, 255, 255, .04); }
.op-st-sup h2 { font-size: 1.5rem; font-weight: 800; margin: 0; } .op-st-sup h2 i { color: #ff7ab8; margin-right: .3rem; }
.op-st-sup-info > p { color: var(--op-muted); margin: .2rem 0 1rem; }
.op-st-perks { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .9rem; font-size: .88rem; }
.op-st-perks i { width: 1.2rem; text-align: center; margin-right: .3rem; opacity: .85; }
.op-st-more { font-weight: 700; font-size: .9rem; text-decoration: none; color: #fff; } .op-st-more i { font-size: .75rem; margin-left: .2rem; }
.op-st-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; align-items: stretch; }
.op-st-plan { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .15rem; padding: 1.5rem 1rem 1rem; border-radius: 24px; background: rgba(10, 10, 16, .38); min-width: 0; }
.op-st-plan-best { background: rgba(255, 255, 255, .13); box-shadow: 0 0 0 2px rgba(255, 255, 255, .5) inset; }
.op-st-save { position: absolute; top: -.65rem; padding: .15rem .6rem; border-radius: 999px; background: #5fe08a; color: #06220f; font-size: .72rem; font-weight: 800; }
.op-st-plan-len { font-size: .95rem; opacity: .85; }
.op-st-price { font-size: 2.7rem; font-weight: 800; line-height: 1.05; } .op-st-price small { font-size: 1.1rem; margin-left: .15rem; opacity: .8; }
.op-st-per { color: var(--op-muted); font-size: .8rem; margin-bottom: .8rem; flex: 1; }
.op-st-giftbox { width: 100%; margin-bottom: .6rem; font-size: .82rem; } .op-st-giftbox summary { cursor: pointer; color: var(--op-muted); list-style: none; } .op-st-giftbox summary::-webkit-details-marker { display: none; }
.op-st-giftbox[open] summary { margin-bottom: .4rem; color: #fff; } .op-st-giftbox input { min-width: 0; width: 100%; }
.op-st-buy { width: 100%; display: flex !important; justify-content: space-between !important; align-items: center; gap: .6rem; padding-left: 1.1rem !important; padding-right: 1.1rem !important; margin-top: auto; }
.op-st-buy b { font-weight: 800; white-space: nowrap; }
.op-st-title { font-size: 1.3rem; font-weight: 800; margin: 2.6rem 0 1rem; } .op-st-title small { font-size: .85rem; font-weight: 500; color: var(--op-muted); margin-left: .5rem; }
.op-st-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.op-st-card { margin: 0; display: flex; flex-direction: column; gap: .35rem; padding: 1.2rem; border-radius: 26px; background: rgba(255, 255, 255, .05); min-width: 0; }
.op-st-card h3 { font-size: 1.1rem; font-weight: 800; margin: .5rem 0 0; } .op-st-card p { color: var(--op-muted); font-size: .88rem; margin: 0 0 .9rem; flex: 1; }
.op-st-wide { grid-column: 1 / -1; } .op-st-wide h3 { margin-top: 0; } .op-st-wide p { margin-bottom: .2rem; } .op-st-wide .op-st-buy { max-width: 320px; align-self: flex-end; }
.op-st-show { height: 150px; border-radius: 18px; background: rgba(10, 10, 16, .4); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem; overflow: hidden; }
.op-st-namedemo { font-size: 1.35rem; font-weight: 800; max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: linear-gradient(90deg, var(--nc) 0%, var(--nc) 35%, #fff 50%, var(--nc) 65%, var(--nc) 100%) 0 0 / 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: opu-name-flow 2.8s linear infinite; }
.op-st-namedemo-rb { background-image: linear-gradient(90deg, #ff5e6b, #ffb238, #ffe066, #3ad678, #48c6ff, #8a7bff, #ff6ad5, #ff5e6b); }
.op-st-show-rename s { color: var(--op-muted); font-size: 1.1rem; max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .op-st-show-rename i { opacity: .5; font-size: .8rem; } .op-st-show-rename b { font-size: 1.3rem; padding: .25rem .9rem; border-radius: 12px; background: rgba(255, 255, 255, .1); }
.op-st-show-slots b { font-size: 3rem; font-weight: 800; line-height: 1; } .op-st-show-slots span { color: var(--op-muted); font-size: .85rem; }
.op-st-clanmock { position: relative; width: 78%; height: 96px; border-radius: 14px; background: linear-gradient(120deg, #ff6ad5, #7a8bff 55%, #48c6ff); }
.op-st-clanmock i { position: absolute; left: 12px; bottom: -14px; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, #ffe066, #ff7a1a); box-shadow: 0 0 0 3px rgba(12, 12, 18, .9); }
.op-st-clanmock span { position: absolute; left: 70px; bottom: 12px; width: 38%; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .85); } .op-st-clanmock span + span { bottom: 28px; width: 22%; opacity: .6; }
.op-st-frames { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .6rem; margin: .8rem 0 1rem; }
.op-st-frame { cursor: pointer; margin: 0; } .op-st-frame input { position: absolute; opacity: 0; pointer-events: none; }
.op-st-frame > span { display: flex; flex-direction: column; align-items: center; gap: .7rem; padding: 1.1rem .4rem .7rem; border-radius: 18px; background: rgba(10, 10, 16, .4); transition: background .2s ease; }
.op-st-frame img { width: 58px; height: 58px; border-radius: 16px; object-fit: cover; }
.op-st-frame em { font-style: normal; font-size: .82rem; font-weight: 700; } .op-st-frame small { font-size: .7rem; color: #5fe08a; margin-top: -.5rem; }
.op-st-frame:hover > span { background: rgba(255, 255, 255, .09); }
.op-st-frame input:checked + span { background: rgba(255, 255, 255, .16); box-shadow: 0 0 0 2px rgba(255, 255, 255, .7) inset; }
.op-st-frame.owned { cursor: default; } .op-st-frame.owned > span { opacity: .55; }
.op-st-locked { margin-top: auto; padding: .6rem .9rem; border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--op-muted); font-size: .85rem; text-align: center; }
@media (max-width: 991.98px) { .op-st-sup { grid-template-columns: minmax(0, 1fr); padding: 1.3rem; } }
@media (max-width: 575.98px) { .op-st-plans { grid-template-columns: minmax(0, 1fr); } .op-st-perks { grid-template-columns: minmax(0, 1fr); } .op-st-head h1 { font-size: 2rem; } .op-st-wide .op-st-buy { max-width: none; } }
html[data-op-lite] .op-st-namedemo { animation: none; }
@media (prefers-reduced-motion: reduce) { .op-st-namedemo { animation: none; } }
.op-st-framecard { margin-bottom: 1rem; }

/* ===== qw26_77: clan leaderboard (/clans as a table, on top of .op-lbx-*) and clean clan settings (.op-cm-*) ===== */
.op-cbd-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.op-cbd-links { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem; }
.op-cbd-search { position: relative; margin-bottom: .4rem; }
.op-cbd-search i { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--op-muted); font-size: .85rem; pointer-events: none; }
.op-cbd-search input { width: 100%; height: 40px; padding: 0 .8rem 0 2.3rem; border-radius: 11px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(0, 0, 0, .28); color: #fff; outline: none; font-size: .92rem; }
.op-cbd-search input:focus { border-color: rgba(255, 255, 255, .3); }
.op-cbd .op-lbx-row { grid-template-columns: 3rem minmax(0, 1fr) 6rem 5rem 5.4rem 4.8rem 3.6rem 8.6rem 5.2rem; }
.op-cbd .op-lbx-clan { flex-shrink: 0; }
.op-cbd .op-lbx-row > span.op-cbd-v.on { font-family: var(--op-font-display); font-size: 1.05rem; }
.op-cbd .op-lbx-head > span.op-cbd-v.on { font-family: inherit; font-size: inherit; }
.op-cbd .op-lbx-name { font-weight: 800; }
.op-cbd-m i { font-size: .72rem; opacity: .7; margin-right: .15rem; }
.op-cbd .op-clanflag { cursor: inherit; }
@media (max-width: 1399.98px) { .op-cbd .op-lbx-row { grid-template-columns: 3.2rem minmax(0, 1fr) 6rem 5.6rem 5.6rem 5rem 4rem; } .op-cbd .op-cbd-wide:not(.on) { display: none; } .op-cbd .op-lbx-row:has(.op-cbd-wide.on) { grid-template-columns: 3.2rem minmax(0, 1fr) 6rem 5.6rem 5.6rem 5rem 4rem 9rem; } }
@media (max-width: 991.98px) { .op-cbd-search { width: 100%; } }
@media (max-width: 767.98px) {
  .op-cbd .op-lbx-row { grid-template-columns: 2.6rem minmax(0, 1fr) auto 3.4rem; padding: .5rem .65rem; column-gap: .5rem; }
  .op-cbd .op-lbx-row:has(.op-cbd-wide.on) { grid-template-columns: 2.6rem minmax(0, 1fr) auto; }
  .op-cbd .op-lbx-row:has(.op-cbd-wide.on) .op-cbd-m { display: none; }
  .op-cbd .op-lbx-row > span.op-cbd-wide.on { font-size: .9rem; }
  .op-cbd .op-cbd-v:not(.on), .op-cbd .op-cbd-x { display: none !important; }
  .op-cbd .op-lbx-clan { display: none; }
}

.op-cm { max-width: 980px; display: flex; flex-direction: column; gap: 1rem; padding-top: 1.2rem; padding-bottom: 2rem; }
.op-cm-head { display: flex; align-items: center; gap: 1rem; }
.op-cm-av { width: 60px; height: 60px; border-radius: 16px; object-fit: cover; flex-shrink: 0; background: rgba(255, 255, 255, .06); }
.op-cm-title { flex: 1; min-width: 0; }
.op-cm-title small { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--op-muted); }
.op-cm-title h1 { margin: 0; font-family: var(--op-font-display); font-weight: 800; font-size: clamp(1.3rem, 3vw, 1.8rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-cm-title h1 span { color: var(--op-muted); font-weight: 700; font-size: .7em; }
.op-cm-jump { display: flex; flex-wrap: wrap; gap: .4rem; }
.op-cm-jump a { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .85rem; border-radius: 999px; background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; font-weight: 700; font-size: .86rem; }
.op-cm-jump a:hover { background: rgba(255, 255, 255, .12); }
.op-cm-jump a i { font-size: .78rem; opacity: .7; }
.op-cm-jump a b { padding: .05rem .45rem; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: .74rem; }
.op-cm .op-set-card { scroll-margin-top: 100px; animation: none; }
.op-cm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1rem; }
.op-cm-w2 { grid-column: span 2; } .op-cm-w3 { grid-column: 1 / -1; }
.op-cm-text.op-set-textarea { min-height: 96px; font-family: inherit; resize: vertical; }
.op-cm-color { display: flex; gap: .5rem; align-items: center; }
.op-cm-color input[type=color] { width: 48px; height: 48px; padding: 3px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(0, 0, 0, .3); flex-shrink: 0; cursor: pointer; }
.op-cm-color .op-input { flex: 1; min-width: 0; }
.op-cm-check { display: flex; align-items: center; gap: .75rem; padding: .7rem .9rem; border-radius: 12px; background: rgba(255, 255, 255, .04); cursor: pointer; align-self: end; margin-bottom: 1.05rem; min-height: 48px; }
.op-cm-check input { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--op-accent, var(--op-yellow)); }
.op-cm-check strong { display: block; color: #fff; font-size: .92rem; line-height: 1.2; }
.op-cm-check small { color: var(--op-muted); font-size: .78rem; }
.op-cm-pics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.op-cm-pic { display: flex; flex-direction: column; min-width: 0; padding: 1rem; border-radius: 14px; background: rgba(255, 255, 255, .04); }
.op-cm-pic h4 { margin: .8rem 0 .2rem; font-size: 1rem; font-weight: 800; color: #fff; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.op-cm-pic p { margin: 0 0 .8rem; color: var(--op-muted); font-size: .84rem; flex: 1; }
.op-cm-pic p strong { color: #fff; }
.op-cm-sup { font-size: .68rem; font-weight: 800; padding: .18rem .55rem; border-radius: 999px; background: rgba(255, 94, 168, .14); color: #ff9fca; }
.op-cm-prev { height: 96px; border-radius: 12px; background: rgba(0, 0, 0, .28); display: grid; place-items: center; overflow: hidden; color: var(--op-muted); font-size: 1.5rem; }
.op-cm-prev img { display: block; object-fit: cover; }
.op-cm-prev-av img { width: 76px; height: 76px; border-radius: 14px; }
.op-cm-prev-flag img { width: 120px; height: 60px; border-radius: 8px; }
.op-cm-prev-flag span { font-size: 1rem; font-weight: 800; }
.op-cm-prev-banner img { width: 100%; height: 100%; }
.op-cm-file { width: 100%; font-size: .82rem; color: var(--op-muted); }
.op-cm-file::file-selector-button { margin-right: .6rem; padding: .4rem .8rem; border: 0; border-radius: 9px; background: rgba(255, 255, 255, .1); color: #fff; font-weight: 700; cursor: pointer; }
.op-cm-pic .op-set-actions { margin-top: .7rem; }
.op-cm-count { margin-left: auto; padding: .25rem .7rem; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #fff; font-weight: 800; font-size: .82rem; white-space: nowrap; }
.op-cm-bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; margin: -.4rem 0 1rem; }
.op-cm-bar i { display: block; height: 100%; border-radius: inherit; background: var(--op-accent, var(--op-yellow)); }
.op-cm-note { margin-bottom: .9rem; }
.op-cm-list { display: flex; flex-direction: column; gap: 4px; }
.op-cm-row { display: flex; align-items: center; gap: .75rem; min-height: 46px; padding: .35rem .5rem .35rem .85rem; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.op-cm-who { display: flex; align-items: center; gap: .55rem; flex: 1; min-width: 0; color: #fff; text-decoration: none; font-weight: 700; }
.op-cm-who:hover { color: #fff; }
.op-cm-who > img { width: 22px; height: 15px; border-radius: 3px; object-fit: cover; flex-shrink: 0; }
.op-cm-who > span[data-op-name] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-cm-role { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .5rem; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--op-muted); font-size: .7rem; font-weight: 800; white-space: nowrap; flex-shrink: 0; }
.op-cm-role-owner i { color: var(--op-metal-hi, #ffd84d); }
.op-cm-acts { display: flex; gap: .35rem; flex-shrink: 0; }
.op-cm-empty { margin: 0; padding: .7rem .2rem; color: var(--op-muted); font-size: .9rem; }
@media (max-width: 767.98px) {
  .op-cm-grid { grid-template-columns: minmax(0, 1fr); } .op-cm-w2, .op-cm-w3 { grid-column: auto; }
  .op-cm-pics { grid-template-columns: minmax(0, 1fr); }
  .op-cm-head .op-btn { padding-inline: .7rem; }
  .op-cm-acts .op-btn span { display: none; }
  .op-cm-acts .op-btn { padding-inline: .65rem; }
}