/* Draft 2 · lazer — the site as the osu!lazer client. */
:root {
  color-scheme: light dark;
  --bg: light-dark(#ece8f3, #1c1a24);
  --bg-glow: light-dark(#f9e1ee, #2a2036);
  --rail: light-dark(#fbfaffd9, #15131bcc);
  --panel: light-dark(#ffffff, #26232f);
  --panel-2: light-dark(#f5f2fa, #2e2a38);
  --panel-3: light-dark(#e8e3f1, #393444);
  --line: light-dark(#e0d9ea, #36313f);
  --text: light-dark(#211e2a, #f2f0f7);
  --muted: light-dark(#665f74, #aaa4ba);
  --faint: light-dark(#8a8399, #7f798f);
  --pink: light-dark(#cf2f78, #ff66aa);
  --pink-fill: light-dark(#d6337d, #ff66aa);
  --pink-ink: light-dark(#ffffff, #2b0d1c);
  --pink-soft: light-dark(#fbe3ef, #3a2236);
  --lime: light-dark(#5d8a00, #b8f04a);
  --yellow: light-dark(#a06d00, #ffd966);
  --blue: light-dark(#2a6ad1, #66ccff);
  --green: light-dark(#23934a, #84e36a);
  --red: light-dark(#d23a4f, #ff6b7d);
  --tri-a: light-dark(#f2cfe2, #262230);
  --tri-b: light-dark(#ddd4f0, #2c2838);
  --shadow: light-dark(0 1px 2px #2a1e4012, 0 6px 22px #2a1e401a);
  --shadow-lift: light-dark(0 2px 4px #2a1e401a, 0 14px 34px #2a1e4026);
  --gold: #ffcc22; --silver: light-dark(#b5c0cf, #dfe6ef); --bronze: #e58f55;
  --g-x: #ffcc22; --g-s: #ffcc22; --g-xh: light-dark(#b9c4d4, #e3e9f2); --g-sh: light-dark(#b9c4d4, #e3e9f2);
  --g-a: #88da20; --g-b: #5cb2ff; --g-c: #c27bff; --g-d: #ff5a5a; --g-f: light-dark(#a39cb1, #6c667a);
  --display: "Exo 2", system-ui, sans-serif;
  --body: Inter, system-ui, sans-serif;
  --r: 12px;
  --rail-w: 84px;
  --hero: linear-gradient(120deg, #ff5fa2, #a45cff 55%, #4f8bff);
}
:root[data-theme=light] { color-scheme: light; }
:root[data-theme=dark] { color-scheme: dark; }
:root[data-theme=midnight] { --hero: linear-gradient(120deg, #3b6cff, #5a4dff 55%, #1fb6ff); color-scheme: dark; --bg: #0b0d16; --bg-glow: #141a33; --rail: #0a0c14d9; --panel: #131726; --panel-2: #1a1f31; --panel-3: #242a40; --line: #232a40;
  --text: #eef1fb; --muted: #9aa3c0; --faint: #6f7896; --pink: #6fa8ff; --pink-fill: #6fa8ff; --pink-ink: #081226; --pink-soft: #1a2645; --tri-a: #10131f; --tri-b: #141828; }
:root[data-theme=sakura] { --hero: linear-gradient(120deg, #ff6fa8, #f78fc4 50%, #b88bff); color-scheme: light; --bg: #fbeef3; --bg-glow: #ffd6e7; --rail: #fff8fbd9; --panel: #ffffff; --panel-2: #fdf1f6; --panel-3: #f6dfe9; --line: #f0d6e2;
  --text: #2a1a22; --muted: #7a5a68; --faint: #9b7f8b; --pink: #c42468; --pink-fill: #e0457f; --pink-ink: #ffffff; --pink-soft: #ffe0ee; --tri-a: #f8d9e6; --tri-b: #f3dcef; }
:root[data-theme=forest] { --hero: linear-gradient(120deg, #2f9e66, #2a8a7f 55%, #8ccf4a); color-scheme: dark; --bg: #121a16; --bg-glow: #1b2b22; --rail: #0f1612d9; --panel: #1a241f; --panel-2: #212d27; --panel-3: #2b3a32; --line: #2a3730;
  --text: #edf5ef; --muted: #a3b8aa; --faint: #74897b; --pink: #8fe36a; --pink-fill: #8fe36a; --pink-ink: #10240a; --pink-soft: #22382a; --tri-a: #16201b; --tri-b: #1b2620; }
:root[data-theme=sunset] { --hero: linear-gradient(120deg, #ff6a5a, #e8457f 50%, #ffb347); color-scheme: dark; --bg: #1f1418; --bg-glow: #3a1f22; --rail: #1a1114d9; --panel: #2a1b20; --panel-2: #33222a; --panel-3: #3f2b33; --line: #3d2a31;
  --text: #fbefe9; --muted: #c9a99f; --faint: #957a72; --pink: #ffa65c; --pink-fill: #ffa65c; --pink-ink: #2b1405; --pink-soft: #3f2a22; --tri-a: #251a1d; --tri-b: #2b1d22; }
/* Light: mint (fresh greens), lavender (soft lilac), paper (warm newsprint with ink red) */
:root[data-theme=mint] { --hero: linear-gradient(120deg, #3fd3a0, #2bb3c0 50%, #7cc7ff); color-scheme: light; --bg: #e9f6f1; --bg-glow: #cff2e3; --rail: #f7fdfad9; --panel: #ffffff; --panel-2: #f1faf6; --panel-3: #ddf0e8; --line: #d3e9df;
  --text: #13261f; --muted: #4f6e63; --faint: #7b968c; --pink: #0d8a68; --pink-fill: #12a37b; --pink-ink: #ffffff; --pink-soft: #d5f3e8; --tri-a: #d4efe4; --tri-b: #dcefea; }
:root[data-theme=lavender] { --hero: linear-gradient(120deg, #9b7bff, #c38bff 50%, #ff8bd0); color-scheme: light; --bg: #f1eefb; --bg-glow: #e3dcff; --rail: #fbfaffd9; --panel: #ffffff; --panel-2: #f6f3fe; --panel-3: #e7e1fb; --line: #e1daf7;
  --text: #221b38; --muted: #625a80; --faint: #8a83a6; --pink: #5b3fd6; --pink-fill: #7458f0; --pink-ink: #ffffff; --pink-soft: #e8e2ff; --tri-a: #e6defd; --tri-b: #ece6fb; }
:root[data-theme=paper] { --hero: linear-gradient(120deg, #c8412f, #e07a3a 55%, #e8b54d); color-scheme: light; --bg: #f4efe4; --bg-glow: #efe2c9; --rail: #fbf8f1d9; --panel: #fffdf8; --panel-2: #f8f3e8; --panel-3: #ece4d3; --line: #e4dac6;
  --text: #2a241c; --muted: #6c6253; --faint: #958a78; --pink: #b13627; --pink-fill: #c8412f; --pink-ink: #ffffff; --pink-soft: #f6e0d6; --tri-a: #ebe2d0; --tri-b: #efe7d8; }
/* Dark: aurora (night teal, aurora green), arcade (neon cyan and magenta), mocha (coffee and caramel) */
:root[data-theme=aurora] { --hero: linear-gradient(120deg, #2ee6a8, #3fb8e8 50%, #9b6bff); color-scheme: dark; --bg: #0b1418; --bg-glow: #10302c; --rail: #091115d9; --panel: #12201f; --panel-2: #182a29; --panel-3: #213634; --line: #1f3532;
  --text: #e8f6f2; --muted: #9cc0b8; --faint: #6c8f88; --pink: #5ef2c2; --pink-fill: #5ef2c2; --pink-ink: #04201a; --pink-soft: #173a33; --tri-a: #0f1c1c; --tri-b: #132422; }
:root[data-theme=arcade] { --hero: linear-gradient(120deg, #ff2fd1, #7a3cff 50%, #22e3ff); color-scheme: dark; --bg: #0c0a12; --bg-glow: #2a0f3a; --rail: #09070ed9; --panel: #15111e; --panel-2: #1c1728; --panel-3: #272035; --line: #2a2238;
  --text: #f4f0ff; --muted: #b0a6cc; --faint: #7d7398; --pink: #22e3ff; --pink-fill: #22e3ff; --pink-ink: #04161c; --pink-soft: #10283a; --tri-a: #130f1b; --tri-b: #1a1426; }
:root[data-theme=mocha] { --hero: linear-gradient(120deg, #c8875a, #e8b17a 50%, #f3d9b1); color-scheme: dark; --bg: #1a1512; --bg-glow: #2e221a; --rail: #15110ed9; --panel: #241d18; --panel-2: #2c241e; --panel-3: #382e26; --line: #3a2f27;
  --text: #f5ebe0; --muted: #c4b09d; --faint: #92806f; --pink: #e8b17a; --pink-fill: #e8b17a; --pink-ink: #2a1a0c; --pink-soft: #3d2d20; --tri-a: #201914; --tri-b: #261e18; }
/* More: ocean (deep blue, sky cyan), crimson (near-black red), slate (neutral grey, lime), peach (warm light) */
:root[data-theme=ocean] { --hero: linear-gradient(120deg, #1f7cff, #29b5e8 50%, #4ff0d8); color-scheme: dark; --bg: #08141f; --bg-glow: #0d2a40; --rail: #07111ad9; --panel: #0f1f2e; --panel-2: #142839; --panel-3: #1c3448; --line: #1c3245;
  --text: #e8f3fb; --muted: #9ab6cc; --faint: #6a879c; --pink: #3fb6ff; --pink-fill: #3fb6ff; --pink-ink: #03182a; --pink-soft: #13334d; --tri-a: #0c1a27; --tri-b: #10202f; }
:root[data-theme=crimson] { --hero: linear-gradient(120deg, #ff4d6d, #c9184a 50%, #ff8fa3); color-scheme: dark; --bg: #160b0e; --bg-glow: #33121b; --rail: #12090cd9; --panel: #221216; --panel-2: #2b171c; --panel-3: #381e25; --line: #3a1f26;
  --text: #fbecef; --muted: #c9a3ab; --faint: #94737b; --pink: #ff4d6d; --pink-fill: #ff4d6d; --pink-ink: #2a0610; --pink-soft: #401a23; --tri-a: #1c0f12; --tri-b: #231317; }
:root[data-theme=slate] { --hero: linear-gradient(120deg, #6b7280, #9ca3af 50%, #c6f432); color-scheme: dark; --bg: #16181c; --bg-glow: #23272e; --rail: #121418d9; --panel: #1f2228; --panel-2: #262a31; --panel-3: #30353d; --line: #30343c;
  --text: #eef0f3; --muted: #a8adb6; --faint: #777d87; --pink: #c6f432; --pink-fill: #c6f432; --pink-ink: #182000; --pink-soft: #2c3420; --tri-a: #1b1e22; --tri-b: #20242a; }
:root[data-theme=peach] { --hero: linear-gradient(120deg, #ef6a3c, #f59a62 50%, #ffc98b); color-scheme: light; --bg: #fdf1ea; --bg-glow: #ffdcc8; --rail: #fffaf6d9; --panel: #ffffff; --panel-2: #fff6f1; --panel-3: #f8e3d8; --line: #f2dacd;
  --text: #2d1c14; --muted: #7a5d4f; --faint: #9e8274; --pink: #c94c20; --pink-fill: #ef6a3c; --pink-ink: #ffffff; --pink-soft: #ffe2d4; --tri-a: #f8e0d3; --tri-b: #f6e6dc; }
/* Custom: the player's background, accent and second color (set on the root by setTheme); the rest is mixed from them. */
:root[data-theme=custom] { --bg: var(--c-bg); --rail: color-mix(in srgb, var(--c-bg) 85%, transparent); --bg-glow: color-mix(in oklab, var(--c-bg), var(--c-accent) 16%);
  --hero: linear-gradient(120deg, var(--c-accent), var(--c-accent2)); --pink-fill: var(--c-accent); --pink-ink: var(--c-ink); }
:root[data-theme=custom][data-scheme=dark] { color-scheme: dark; --panel: color-mix(in oklab, var(--c-bg), white 6%); --panel-2: color-mix(in oklab, var(--c-bg), white 10%);
  --panel-3: color-mix(in oklab, var(--c-bg), white 16%); --line: color-mix(in oklab, var(--c-bg), white 13%); --text: color-mix(in oklab, white 94%, var(--c-bg));
  --muted: color-mix(in oklab, white 64%, var(--c-bg)); --faint: color-mix(in oklab, white 44%, var(--c-bg)); --pink: var(--c-accent);
  --pink-soft: color-mix(in oklab, var(--c-bg), var(--c-accent) 20%); --tri-a: color-mix(in oklab, var(--c-bg), white 3%); --tri-b: color-mix(in oklab, var(--c-bg), white 6%); }
:root[data-theme=custom][data-scheme=light] { color-scheme: light; --panel: color-mix(in oklab, var(--c-bg), white 85%); --panel-2: color-mix(in oklab, var(--c-bg), white 45%);
  --panel-3: color-mix(in oklab, var(--c-bg), black 6%); --line: color-mix(in oklab, var(--c-bg), black 10%); --text: color-mix(in oklab, black 86%, var(--c-bg));
  --muted: color-mix(in oklab, black 58%, var(--c-bg)); --faint: color-mix(in oklab, black 42%, var(--c-bg)); --pink: color-mix(in oklab, var(--c-accent), black 22%);
  --pink-soft: color-mix(in oklab, var(--c-bg), var(--c-accent) 16%); --tri-a: color-mix(in oklab, var(--c-bg), var(--c-accent) 9%); --tri-b: color-mix(in oklab, var(--c-bg), black 4%); }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); }
body { position: relative; }
body::before { content: ""; position: absolute; z-index: 0; inset: 0 auto 0 0; width: var(--rail-w); background: var(--rail); border-right: 1px solid var(--line); }
body {
  margin: 0; min-height: 100vh; color: var(--text); font: 15px/1.5 var(--body);
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--display); margin: 0; line-height: 1.15; }
p { margin: 0; }
a { color: inherit; }
img { display: block; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link {
  position: fixed; z-index: 100; left: 12px; top: -60px; padding: 10px 16px; border-radius: 10px;
  background: var(--pink-fill); color: var(--pink-ink); font: 700 14px var(--display); text-decoration: none; transition: top .15s;
}
.skip-link:focus { top: 12px; }

/* ---- backdrop: viewport-sized triangles, painted once ---- */
.backdrop {
  position: fixed; z-index: -1; inset: 0; overflow: hidden; pointer-events: none;
  background: radial-gradient(1200px 600px at 85% -10%, var(--bg-glow), transparent 70%) no-repeat, var(--bg);
}
.backdrop-drift {
  position: absolute; inset: 0; background: var(--tri-a);
  -webkit-mask: var(--tile-a) 0 0 / 1600px 1000px repeat; mask: var(--tile-a) 0 0 / 1600px 1000px repeat;
}
.backdrop-drift.b { background: var(--tri-b); -webkit-mask-image: var(--tile-b); mask-image: var(--tile-b); }

/* ---- rail (lazer toolbar) ---- */
.rail {
  position: fixed; z-index: 20; inset: 0 auto 0 0; width: var(--rail-w);
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 0 14px;
}
.logo { --s: 52px; display: grid; place-items: center; width: var(--s); height: var(--s); flex: none; text-decoration: none; transition: transform .15s cubic-bezier(.3, 1.6, .5, 1); filter: drop-shadow(0 4px 12px #ff6fae55); }
.logo img, .logo svg { width: 100%; height: 100%; }
a.logo:hover { transform: scale(1.08) rotate(-4deg); }
.logo.big { --s: 92px; }
.rail-nav { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; width: 100%; }
.rail-nav a, .theme-toggle {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0 8px; margin: 0 10px;
  border-radius: 12px; color: var(--muted); text-decoration: none; font: 600 12px/1 var(--display); transition: color .1s linear, background-color .1s linear;
}
.rail-nav a:hover, .theme-toggle:hover { color: var(--text); background: var(--panel-2); }
.rail-nav a[aria-current=page] { color: var(--text); background: var(--pink-soft); }
.rail-nav a[aria-current=page] svg { color: var(--pink); filter: drop-shadow(0 0 6px light-dark(#ff66aa00, #ff66aa88)); }
.rail-nav a[aria-current=page]::before {
  content: ""; position: absolute; left: -10px; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0;
  background: var(--pink-fill); box-shadow: 0 0 10px #ff66aa99;
}
.rail-me { margin-top: auto; }
.rail-me + .rail-foot { margin-top: 8px; }
.rail-nav a[hidden] { display: none; }
.rail-nav .rail-chat { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0 8px; margin: 0 10px; border: 0; border-radius: 12px;
  background: none; color: var(--muted); font: 600 12px/1 var(--display); cursor: pointer; transition: color .1s linear, background-color .1s linear; }
.rail-nav .rail-chat:hover, .rail-nav .rail-chat[aria-expanded=true] { color: var(--text); background: var(--panel-2); }
.rail-nav .rail-chat[hidden] { display: none; }
.rail-foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.server-state { display: flex; flex-direction: column; align-items: center; gap: 7px; font: 600 11px/1 var(--display); color: var(--faint); }
.server-state i { width: 10px; height: 10px; border-radius: 50%; background: var(--faint); }
.server-state[data-online=true] { color: var(--green); }
.server-state[data-online=true] i { background: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 22%, transparent); }
.server-state[data-online=false] { color: var(--red); }
.server-state[data-online=false] i { background: var(--red); }
.theme-toggle { border: 0; background: none; cursor: pointer; width: calc(100% - 20px); }
.theme-toggle svg { display: none; }
.theme-toggle[data-theme=system] .t-system, .theme-toggle[data-theme=light] .t-light, .theme-toggle[data-theme=dark] .t-dark, .theme-toggle:not([data-theme]) .t-system { display: block; }

/* ---- shell ---- */
.shell { position: relative; margin-left: var(--rail-w); min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; outline: none; }
.page { max-width: 1120px; margin: 0 auto; padding: 36px 40px 40px; }
.footer { padding: 18px 40px 26px; text-align: center; color: var(--faint); font-size: 13px; }
.footer a { color: var(--muted); }
.noscript { margin: 40px auto; max-width: 480px; text-align: center; }

.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 24px; margin-bottom: 26px; }
.page-head h1 { font-size: 40px; font-weight: 700; letter-spacing: -.01em; }
.controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ruleset pills + segmented control + tabs */
.rulesets, .segmented {
  display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--panel); box-shadow: var(--shadow);
}
.rulesets a, .segmented a, .segmented button {
  display: flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; color: var(--muted);
  text-decoration: none; font: 600 14px/1 var(--display); transition: background-color .1s linear, color .1s linear;
}
.rulesets a:hover, .segmented a:hover, .segmented button:hover { color: var(--text); background: var(--panel-2); }
.rulesets a[aria-current=true] { color: var(--pink-ink); background: var(--pink-fill); box-shadow: 0 2px 12px #ff66aa55; }
.segmented a[aria-current=true], .segmented button[aria-current=true] { color: var(--text); background: var(--panel-3); }
.tabs { display: flex; gap: 22px; }
.tabs a { position: relative; padding: 6px 0 10px; color: var(--muted); text-decoration: none; font: 600 15px/1 var(--display); }
.tabs a:hover { color: var(--text); }
.tabs a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px; background: transparent; transition: background .15s; }
.tabs a[aria-current=true] { color: var(--text); }
.tabs a[aria-current=true]::after { background: var(--pink-fill); box-shadow: 0 0 10px #ff66aa88; }

/* buttons */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px;
  border: 0; border-radius: 10px; font: 700 14px/1 var(--display); text-decoration: none; cursor: pointer; overflow: hidden;
  transition: transform .12s ease-out, background-color .1s linear, filter .1s linear;
}
.btn.primary, .dialog-submit { color: var(--pink-ink); background: var(--btn-tri) center / 320px 60px, var(--pink-fill); box-shadow: 0 3px 14px #ff66aa40; }
.btn.primary:hover { filter: brightness(1.08); box-shadow: 0 4px 22px #ff66aa70; }
.btn.ghost { color: var(--text); background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.btn.ghost:hover { background: var(--panel-3); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: default; transform: none; filter: none; }
.btn.small { min-height: 34px; font-size: 13px; }
.btn.wide { width: 100%; min-height: 46px; font-size: 15px; }
.text-link { color: var(--pink); font-weight: 600; text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.link-btn { border: 0; padding: 2px 4px; background: none; color: var(--pink); font: 600 13px var(--body); cursor: pointer; border-radius: 6px; }
.link-btn:hover { text-decoration: underline; }

/* avatars + flags */
.av {
  --size: 44px; position: relative; display: grid; place-items: center; flex: none; width: var(--size); height: var(--size);
  border-radius: calc(var(--size) * .28); overflow: hidden; color: #fff; font: 700 calc(var(--size) * .42)/1 var(--display);
  background: linear-gradient(140deg, hsl(var(--h) 70% 62%), hsl(calc(var(--h) + 50) 60% 44%));
}
.av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.av.md { --size: 64px; }
.av.lg { --size: 84px; }
.av.xl { --size: 132px; }
.flag { font-size: 1.05em; line-height: 1; font-family: "Noto Color Emoji", "Twemoji Mozilla", "Apple Color Emoji", "Segoe UI Emoji", sans-serif; }
.name { font: 700 16px/1.2 var(--display); }

/* triangle covers */
.tri-cover { position: absolute; inset: 0; background: linear-gradient(120deg, hsl(var(--h) 62% 52%), hsl(calc(var(--h) + 45) 58% 38%)); }
.tri-cover .tri { width: 100%; height: 100%; }
.tri path { fill: #fff; fill-opacity: .1; }
.tri path:nth-child(3n) { fill: #000; fill-opacity: .08; }

/* ---- rankings ---- */
.podiums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: end; margin-bottom: 22px; }
.podium {
  --medal: var(--gold); position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 92px 18px 20px; border-radius: 16px; background: var(--panel); text-decoration: none; overflow: hidden;
  box-shadow: var(--shadow), inset 0 0 0 1px color-mix(in srgb, var(--medal) 30%, transparent);
  transition: transform .12s ease-out;
}
.podium.p1 { order: 2; padding-top: 112px; }
.podium.p2 { --medal: var(--silver); order: 1; }
.podium.p3 { --medal: var(--bronze); order: 3; }
.podium:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift), 0 0 0 2px var(--medal), 0 0 26px color-mix(in srgb, var(--medal) 40%, transparent); }
.podium-cover { position: absolute; inset: 0 0 auto; height: 120px; }
.podium.p1 .podium-cover { height: 140px; }
.podium-cover img, .podium-cover .tri-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.podium-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, #0000 20%, var(--panel)); }
.podium .av { position: relative; box-shadow: 0 0 0 4px var(--panel), 0 0 0 7px var(--medal), 0 8px 24px #0005; }
.podium.p1 .av { --size: 100px; }
.medal {
  position: absolute; top: 14px; left: 14px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--medal); color: #1c1a24; font: italic 800 22px/1 var(--display); box-shadow: 0 4px 14px #0004, inset 0 -3px 0 #0002;
}
.podium-name { display: flex; align-items: center; gap: 8px; margin-top: 8px; max-width: 100%; }
.podium-name .name { font-size: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium-value, .row-value, .score-pp { display: flex; align-items: baseline; gap: 4px; font-family: var(--display); }
.podium-value strong { font: 800 34px/1 var(--display); letter-spacing: -.01em; }
.podium.p1 .podium-value strong { font-size: 42px; color: light-dark(#a87700, var(--gold)); }
.podium-value small, .row-value small, .score-pp small { font: 700 15px/1 var(--display); color: var(--pink); }
.podium-stats, .row-stats { display: flex; gap: 18px; }
.podium-stats { justify-content: center; flex-wrap: wrap; margin-top: 4px; font: 600 15px/1.2 var(--display); }
.podium-stats > span, .row-stats > span { display: flex; flex-direction: column; gap: 3px; }
.podium-stats > span { align-items: center; }
small { font: 500 12px/1.2 var(--body); color: var(--muted); }

.board { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.board-row {
  display: grid; grid-template-columns: 54px auto minmax(0, 1fr) auto 150px; align-items: center; gap: 16px;
  padding: 10px 22px 10px 10px; border-radius: var(--r); background: var(--panel); text-decoration: none; box-shadow: var(--shadow);
  transition: transform .12s ease-out, background-color .1s linear;
}
.board-row:hover { transform: translateX(4px); background: light-dark(#fff, #2c2936); box-shadow: var(--shadow-lift), inset 3px 0 0 var(--pink-fill); }
.row-rank { text-align: center; font: italic 800 22px/1 var(--display); color: var(--muted); }
.row-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.row-who .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-country { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; }
.row-stats { font: 600 15px/1.2 var(--display); }
.row-stats > span { min-width: 80px; }
.row-value { justify-content: flex-end; }
.row-value strong { font: 700 25px/1 var(--display); }

.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; color: var(--muted); font-size: 13px; }
.pager-buttons { display: flex; gap: 8px; }

/* ---- states ---- */
.state { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 64px 24px; text-align: center; }
.state h2, .state h3 { font-size: 22px; }
.state p { color: var(--muted); max-width: 42ch; }
.state .btn, .state .actions { margin-top: 8px; }
.state .actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.state.panel { background: var(--panel); border-radius: 16px; box-shadow: var(--shadow); max-width: 560px; margin: 40px auto; }
.state-mark {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; margin-bottom: 6px;
  background: var(--pink-soft); color: var(--pink); font: 800 30px/1 var(--display);
}
.state.loading { padding: 80px 24px; }
.spinner {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: var(--pink-fill);
  box-shadow: 0 4px 22px #ff66aa66; animation: spin 1.6s cubic-bezier(.6, 0, .4, 1) infinite;
}
.spinner i { width: 26px; height: 26px; border-radius: 50%; border: 4px solid #fff; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- players ---- */
.search {
  display: flex; align-items: center; gap: 10px; flex: 1 1 360px; max-width: 520px; padding: 5px 5px 5px 16px;
  border-radius: 14px; background: var(--panel); box-shadow: var(--shadow), inset 0 0 0 1px var(--line); color: var(--muted);
}
.search:focus-within { box-shadow: var(--shadow), inset 0 0 0 2px var(--pink); }
.search input { flex: 1; min-width: 0; border: 0; background: none; padding: 8px 0; outline: none; color: var(--text); }
.search input::placeholder { color: var(--faint); }
.search-result { margin: -12px 0 20px; color: var(--muted); font-size: 14px; white-space: pre-line; }
.player-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.pcard {
  position: relative; display: flex; flex-direction: column; height: 100%; border-radius: 16px; overflow: hidden; background: var(--panel);
  text-decoration: none; box-shadow: var(--shadow); transition: transform .12s ease-out;
}
.pcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift), 0 0 0 2px var(--pink-fill), 0 0 22px #ff66aa40; }
.pcard-cover { position: relative; height: 92px; }
.pcard-cover img { width: 100%; height: 100%; object-fit: cover; }
.pcard .av { margin: -34px 0 0 16px; box-shadow: 0 0 0 4px var(--panel); }
.pcard-body { display: flex; flex-direction: column; gap: 4px; padding: 10px 16px 0; min-width: 0; }
.pcard-body .name { font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard-meta { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13.5px; }
.pcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding: 14px 16px 14px; }
.pcard-mode { display: flex; align-items: center; gap: 6px; color: var(--muted); font: 600 13px/1 var(--display); }
.presence { display: inline-flex; align-items: center; gap: 7px; color: var(--faint); font: 600 13px/1 var(--display); }
.presence::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: .6; }
.presence.on { color: var(--green); }
.presence.on::before { opacity: 1; box-shadow: 0 0 8px currentColor; }

/* ---- profile ---- */
.hero { position: relative; border-radius: 18px; overflow: hidden; background: var(--panel); box-shadow: var(--shadow); }
.hero-cover { position: relative; height: 210px; }
.hero-cover img, .hero-cover .tri-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, #0000 45%, color-mix(in srgb, var(--panel) 70%, transparent)); }
.hero-body { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 24px; padding: 0 30px 24px; }
.hero .av.xl { margin-top: -70px; box-shadow: 0 0 0 5px var(--panel), 0 10px 30px #0004; }
.hero-id { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-top: 14px; }
.hero-id h1 { font-size: 38px; font-weight: 800; overflow-wrap: anywhere; }
.hero-country { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--muted); font-weight: 500; }
.hero-country .flag { font-size: 20px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); font-size: 14px; }
.level { position: relative; width: 96px; height: 96px; flex: none; }
.level svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.level circle { fill: none; stroke-width: 7; }
.level .track { stroke: var(--panel-3); }
.level .fill { stroke: var(--pink-fill); stroke-linecap: round; filter: drop-shadow(0 0 4px #ff66aa88); }
.level-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.level-num small { font: 600 11px/1 var(--display); }
.level-num strong { font: 800 30px/1 var(--display); }
.level-pct {
  position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); padding: 3px 8px; border-radius: 999px;
  background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); font: 700 11px/1 var(--display); color: var(--muted);
}
.profile-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 22px 0 16px; }
.stats {
  display: grid; grid-template-columns: repeat(5, 1fr); border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); overflow: hidden;
}
.stat { display: flex; flex-direction: column; gap: 6px; padding: 18px 22px; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat small { font-size: 13px; }
.stat span { font: 700 28px/1 var(--display); white-space: nowrap; }
.stat em { font-style: normal; font-size: .6em; margin-left: 2px; color: var(--muted); }
.stat.rank span { color: var(--lime); }
.stat.pp em { color: var(--pink); }

.profile-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.card { border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); padding: 20px 22px; }
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.card-head h2 { font-size: 19px; font-weight: 700; }
.muted { color: var(--muted); font-size: 13px; }
.card.about { margin-top: 16px; }
.card.about p + p { margin-top: 4px; color: var(--muted); }

/* the rank graph screen stays dark in both themes, like lazer's graph */
.card.graph { --g-line: #c6f25a; background: linear-gradient(160deg, #24212e, #1a1822); color: #f2f0f7; color-scheme: dark; }
.card.graph .muted { color: #a59fb5; }
.rank-chart { display: block; width: 100%; height: auto; overflow: visible; }
.rank-chart .grid { stroke: #3a3547; stroke-width: 1; stroke-dasharray: 3 5; fill: none; }
.rank-chart .line { stroke: var(--g-line); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px #c6f25a77); }
.rank-chart .dot { fill: #1a1822; stroke: var(--g-line); stroke-width: 3; }
.graph-axis { display: flex; justify-content: space-between; margin-top: 8px; color: #8d879e; font: 600 12px/1 var(--display); }
.graph-empty { padding: 36px 0; color: #a59fb5; text-align: center; }

.grades { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.gbadge { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gletter {
  position: relative; display: grid; place-items: center; width: 100%; max-width: 64px; height: 34px; border-radius: 10px;
  background: var(--gc); color: #1c1a24; font: italic 800 17px/1 var(--display); box-shadow: inset 0 -3px 0 #0002;
}
.gletter i, .score-grade i { position: absolute; top: 5px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px #1c1a2455; }
.gcount { font: 700 15px/1 var(--display); }
.g-xh { --gc: var(--g-xh); } .g-x { --gc: var(--g-x); } .g-sh { --gc: var(--g-sh); } .g-s { --gc: var(--g-s); }
.g-a { --gc: var(--g-a); } .g-b { --gc: var(--g-b); } .g-c { --gc: var(--g-c); } .g-d { --gc: var(--g-d); } .g-f { --gc: var(--g-f); }
.facts { margin: 0; display: grid; gap: 0; }
.facts div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.facts dt { color: var(--muted); font-size: 14px; }
.facts dd { margin: 0; font: 700 15px/1.4 var(--display); }

/* scores: a compact table; the map cover peeks in on hover */
.scores-card { margin-top: 16px; padding-bottom: 22px; }
.scores-card .card-head { margin-bottom: 18px; border-bottom: 1px solid var(--line); padding-bottom: 0; }
.scores-card .card-head h2 { padding-bottom: 10px; }
.score-head, .score { display: grid; grid-template-columns: 34px minmax(0, 1fr) 96px 74px 64px 150px; align-items: center; gap: 14px; padding: 0 14px; }
.score-head { padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line); color: var(--faint); font: 600 12px/1 var(--body); }
.score-head span:nth-child(n+4) { text-align: right; }
.score-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.score { position: relative; isolation: isolate; min-height: 56px; padding-block: 8px; border-radius: 10px; overflow: hidden; transition: background .12s; }
.score:nth-child(even) { background: color-mix(in srgb, var(--panel-2) 55%, transparent); }
.score:hover { background: var(--panel-2); }
.score-peek { position: absolute; z-index: -1; inset: 0 0 0 auto; width: 45%; opacity: 0; transition: opacity .2s; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #0009); mask-image: linear-gradient(90deg, transparent, #0009); }
.score-peek img { width: 100%; height: 100%; object-fit: cover; }
.score:hover .score-peek, .score:focus-within .score-peek { opacity: .5; }
.score-grade { position: relative; justify-self: center; color: var(--gc); font: italic 800 22px/1 var(--display); }
.score-grade i { top: -3px; right: -7px; }
.score-main { min-width: 0; }
.score-title { font: 600 15px/1.25 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-title a { text-decoration: none; }
.score-title a:hover { color: var(--pink); }
.score-artist { color: var(--muted); font-weight: 500; }
.score-map { display: flex; align-items: center; gap: 8px; margin-top: 4px; min-width: 0; color: var(--muted); font-size: 12.5px; }
.score-map .status, .score-map .stars { padding: 2px 6px; font-size: 10.5px; }
.score-map .version { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-map time { flex: none; color: var(--faint); }
.score-map time::before { content: "· "; }
.score-brief { display: none; }
.score-mods { gap: 3px; } .score-mods .mod { min-width: 32px; height: 20px; padding: 0 7px; font-size: 10.5px; }
.score-num { text-align: right; font: 700 14px/1 var(--display); }
.status, .stars { flex: none; padding: 4px 8px; border-radius: 999px; font: 700 11.5px/1 var(--display); }
.status { color: #1c1a24; background: #a8a2b5; }
.st-ranked, .st-approved { background: #b3ff66; }
.st-loved { background: #ff66ab; }
.st-qualified { background: #66ccff; }
.st-pending { background: #ffd966; }
.st-wip { background: #ff9966; }
.st-graveyard { background: #3d3946; color: #e8e5ef; }
.stars { background: var(--sc); color: var(--st); box-shadow: 0 0 10px color-mix(in srgb, var(--sc) 40%, transparent); }
.mods { display: flex; gap: 4px; }
.mod {
  display: grid; place-items: center; min-width: 38px; height: 24px; padding: 0 9px; color: #1c1a24; font: 800 12px/1 var(--display);
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 9px 100%, 0 50%); background: #ff66aa;
}
.mod-increase { background: #ff6b6b; }
.mod-reduction { background: #b2ff66; }
.mod-automation { background: #66ccff; }
.mod-conversion { background: #a98cff; }
.mod-system { background: #d9d6e0; }
.score-pp { flex-direction: column; align-items: flex-end; gap: 3px; }
.pp-line { display: flex; align-items: baseline; gap: 3px; }
.score-pp strong { font: 800 20px/1 var(--display); }
.score-pp small { font-size: 12px; }
.score-pp .fail { font-size: 15px; color: var(--red); }
.score-pp .score-weight { color: var(--faint); font: 500 11.5px/1 var(--body); white-space: nowrap; }
.score.failed .score-main, .score.failed .score-num, .score.failed .score-mods { opacity: .62; }

/* ---- play: lazer first-run overlay ---- */
.page.play { max-width: 760px; }
.overlay { border-radius: 20px; overflow: hidden; background: var(--panel); box-shadow: var(--shadow-lift); }
.overlay-head {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 38px 24px 30px;
  background: linear-gradient(135deg, #ff66aa, #b05cff 60%, #6b5cff); color: #fff; text-align: center; overflow: hidden;
}
.overlay-head .tri { position: absolute; inset: 0; width: 100%; height: 100%; }
.overlay-head .logo, .overlay-head h1 { position: relative; }
.overlay-head .logo { background: radial-gradient(circle at 35% 30%, #ff9cc9, #ff66aa 55%, #e84d92); box-shadow: inset 0 0 0 6px #fff, 0 10px 30px #4b1a5a66; }
.overlay-head h1 { font-size: 34px; font-weight: 800; text-shadow: 0 2px 14px #4b1a5a55; }
.overlay-body { padding: 8px 34px 34px; }
.block { padding: 26px 0; }
.block + .block { border-top: 1px solid var(--line); }
.block h2 { font-size: 22px; margin-bottom: 8px; }
.block > p { color: var(--muted); }
.block > p strong { color: var(--text); }
.address {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 4px; align-items: center;
  margin: 18px 0; padding: 12px 12px 12px 18px; border-radius: 14px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line);
}
.address-label { grid-column: 1; font: 600 12px/1 var(--display); color: var(--muted); }
.address code { grid-column: 1; font: 700 18px/1.3 ui-monospace, "JetBrains Mono", monospace; color: var(--pink); overflow-wrap: anywhere; }
.address .btn { grid-column: 2; grid-row: 1 / span 2; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.steps li { display: flex; align-items: center; gap: 14px; }
.step-num {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--pink-soft); color: var(--pink); font: 800 15px/1 var(--display); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pink) 45%, transparent);
}
.drawer { margin-top: 18px; border-radius: 12px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.drawer summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; list-style: none; font: 700 15px/1.2 var(--display); border-radius: 12px; }
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary::before { content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform .15s; margin: 0 4px 0 2px; }
.drawer[open] summary::before { transform: rotate(45deg); }
.drawer summary:hover { color: var(--pink); }
.drawer-body { display: grid; gap: 10px; justify-items: start; padding: 0 18px 18px 40px; color: var(--muted); }
.drawer.owner { background: color-mix(in srgb, var(--yellow) 12%, var(--panel-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--yellow) 40%, transparent); }
.drawer.owner summary { color: var(--yellow); }
.drawer code { font: 600 13px ui-monospace, monospace; color: var(--text); }
.form { display: grid; gap: 14px; margin-top: 18px; }
.form label, .country-dialog label { display: grid; gap: 6px; font: 600 13px/1 var(--display); color: var(--muted); }
.form input, .form textarea, .country-dialog select {
  width: 100%; min-height: 46px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--panel-2); color: var(--text);
  font: 500 15px var(--body); box-shadow: inset 0 0 0 1.5px var(--line); outline: none; transition: box-shadow .15s, background .15s;
}
.form input:hover, .form textarea:hover, .country-dialog select:hover { box-shadow: inset 0 0 0 1.5px var(--faint); }
.form input:focus, .form textarea:focus, .country-dialog select:focus { background: var(--panel); box-shadow: inset 0 0 0 2px var(--pink), 0 0 0 4px color-mix(in srgb, var(--pink) 18%, transparent); }
.form .btn { margin-top: 6px; }
.form textarea { min-height: 84px; padding: 11px 14px; font: 500 14.5px/1.45 var(--body); resize: vertical; }
.form-result { margin-top: 12px; color: var(--text); font-weight: 500; white-space: pre-line; }
.form-result:empty { display: none; }
.notice { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--pink-soft); color: var(--text); box-shadow: inset 4px 0 0 var(--pink-fill); }

/* ---- country dialog: lazer popup ---- */
.country-dialog {
  width: min(440px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 18px; background: var(--panel); color: var(--text);
  box-shadow: 0 30px 80px #0007, 0 0 0 1px var(--line);
}
.country-dialog[open] { animation: pop .22s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pop { from { transform: scale(.92); opacity: 0; } }
.country-dialog::backdrop { background: #110f17aa; backdrop-filter: blur(6px); }
.country-dialog .dialog-heading {
  display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 20px 24px;
  background: linear-gradient(135deg, #ff66aa, #b05cff); color: #fff;
}
.country-dialog h2 { font-size: 21px; font-weight: 800; }
.dialog-close { width: 34px; height: 34px; border: 0; border-radius: 50%; background: #ffffff2e; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.dialog-close:hover { background: #ffffff4d; }
.country-dialog > p { padding: 18px 24px 0; color: var(--muted); }
.country-dialog form { display: grid; gap: 14px; padding: 16px 24px 4px; }
.dialog-submit {
  min-height: 46px; border: 0; border-radius: 10px; font: 700 15px var(--display); cursor: pointer;
}
.dialog-submit:disabled { opacity: .5; cursor: default; }
.country-dialog .form-result { margin: 0; padding: 4px 24px 22px; }
.country-dialog .form-result:empty { display: block; padding: 0 0 20px; }

/* ---- account: toolbar button, login panel, user panel ---- */
[hidden] { display: none !important; }
.account { width: 100%; }
.account-button {
  display: flex; flex-direction: column; align-items: center; gap: 9px; width: calc(100% - 20px); margin: 0 10px; padding: 12px 0 9px;
  border: 0; border-radius: 12px; background: none; color: var(--muted); font: 600 12px/1 var(--display); cursor: pointer;
  transition: color .1s linear, background-color .1s linear;
}
.account-button:hover, .account-button[aria-expanded=true] { color: var(--text); background: var(--panel-2); }
.account-button.current { color: var(--text); background: var(--pink-soft); }
.account-label { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; }
.av.sm { --size: 38px; border-radius: 50%; font-size: 16px; }
.account-button .av { box-shadow: 0 0 0 2px var(--rail), 0 0 0 4px var(--pink-fill), 0 0 14px #ff66aa66; }
.account-panel {
  position: fixed; z-index: 30; left: calc(var(--rail-w) + 12px); bottom: 14px; width: 340px; max-height: calc(100vh - 28px); overflow: auto;
  border-radius: 18px; background: var(--panel); color: var(--text); box-shadow: 0 24px 70px #0006, 0 0 0 1px var(--line);
  animation: pop .2s cubic-bezier(.2, 1.4, .4, 1); transform-origin: left bottom;
}
.panel-head {
  position: relative; overflow: hidden; padding: 22px 22px 18px; color: #fff;
  background: var(--hero);
}
.panel-head .tri { position: absolute; inset: 0; width: 100%; height: 100%; }
.panel-head h2 { position: relative; font-size: 22px; font-weight: 800; }
.panel-head.has-cover { display: flex; align-items: flex-end; aspect-ratio: 2.8; padding-top: 0; background: #2a2433; }
.panel-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panel-head.has-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0000 30%, #000000a6); }
.panel-head.has-cover .panel-user { z-index: 1; text-shadow: 0 1px 4px #0008; }
.panel-user { position: relative; display: flex; align-items: center; gap: 14px; }
.panel-user .av { box-shadow: 0 0 0 3px #fff; }
.panel-user h2 { font-size: 20px; overflow-wrap: anywhere; }
.panel-country { display: flex; align-items: center; gap: 6px; margin-top: 2px; font: 600 13px/1 var(--display); opacity: .9; }
.panel-body { padding: 4px 22px 20px; }
.panel-body .form { margin-top: 14px; gap: 12px; }
.signin-note { margin-top: 14px; color: var(--muted); font-size: 13.5px; }
.signin-forgot { justify-self: center; font-size: 13.5px; }
.form .signin-remember { display: flex; align-items: center; gap: 10px; justify-self: start; font: 600 14px/1.2 var(--body); color: var(--text); cursor: pointer; }
.form .signin-remember input { width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; box-shadow: none; accent-color: var(--pink-fill); cursor: pointer; }
/* forgot password, reset and confirm pages */
.recovery-card { display: grid; gap: 14px; max-width: 480px; margin: 6vh auto 0; padding: 28px 30px; }
.recovery-card h1 { font-size: 26px; }
.recovery-card .form { gap: 14px; }
.recovery-card .notice { margin-top: 0; }
.recovery-foot { color: var(--muted); font-size: 13.5px; line-height: 1.8; }
.recovery-box { display: grid; gap: 12px; }
.recovery-box .notice { margin-top: 0; }
.form.signin .form-result { margin: 0; font-size: 14px; }
.menu { display: grid; gap: 2px; padding: 10px 10px 12px; }
.menu-item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 0; border-radius: 10px; background: none;
  color: var(--text); text-decoration: none; font: 600 15px/1.2 var(--display); text-align: left; cursor: pointer;
}
.menu-item svg { color: var(--muted); }
.menu-item:hover, .menu-item:focus-visible { background: var(--panel-2); }
.menu-item:hover svg { color: var(--pink); }
#panel-signout { color: var(--red); }
#panel-signout svg { color: currentColor; }
.menu .avatar-status { padding: 4px 12px 0; }
.avatar-status { color: var(--muted); font-size: 13px; }
.avatar-status:empty { display: none; }

/* your own profile */
.you-tag {
  display: inline-block; vertical-align: middle; margin-left: 12px; padding: 5px 10px; border-radius: 999px; background: var(--pink-fill); color: var(--pink-ink);
  font: 700 13px/1 var(--display); box-shadow: 0 2px 10px #ff66aa55; transform: translateY(-4px);
}
.av-edit { position: relative; display: block; align-self: start; margin-top: -70px; border-radius: 37px; cursor: pointer; }
.hero .av-edit .av.xl { margin-top: 0; }
.av-edit::after {
  content: ""; position: absolute; inset: 0; border-radius: 37px; background: #1c1a24; opacity: 0; transition: opacity .15s;
}
.av-edit:hover::after { opacity: .35; }
.av-edit:focus-within { outline: 3px solid var(--pink); outline-offset: 7px; }
.av-edit-badge {
  position: absolute; z-index: 1; right: -6px; bottom: -6px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--pink-fill); color: var(--pink-ink); box-shadow: 0 0 0 4px var(--panel), 0 4px 14px #ff66aa66; transition: transform .15s;
}
.av-edit:hover .av-edit-badge { transform: scale(1.1); }
.own-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 6px; }
.own-actions .btn { gap: 7px; }
.own-actions .avatar-status { flex-basis: 100%; }

/* signed-out #/me */
.ghost-av {
  position: relative; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 28px; color: #fff;
  background: #ffffff2e; box-shadow: inset 0 0 0 3px #ffffffaa; backdrop-filter: blur(4px);
}
.me-prompt .lead { color: var(--text); font-size: 16px; }
.me-elsewhere { display: flex; justify-content: center; gap: 24px; padding: 18px 0 4px; border-top: 1px solid var(--line); }

/* ---- responsive ---- */
@media (max-width: 980px) {
  .board-row { grid-template-columns: 46px auto minmax(0, 1fr) auto; }
  .row-stats { display: none; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .stat:nth-child(4) { border-left: 0; }
  .stat:nth-child(n+4) { border-top: 1px solid var(--line); }
  .profile-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  :root { --rail-w: 0px; }
  body::before { display: none; }
  .rail { background: var(--rail); backdrop-filter: blur(18px); }
  body { padding-bottom: 76px; }
  .rail {
    inset: auto 0 0 0; width: auto; height: 68px; flex-direction: row; padding: 0 6px; gap: 0;
    border-right: 0; border-top: 1px solid var(--line);
  }
  .rail > .logo { display: none; }
  .rail-nav { flex-direction: row; margin: 0; flex: 3; gap: 0; }
  .rail-nav.rail-me { flex: .5; margin: 0; }
  .rail-nav a, .theme-toggle, .rail-nav .rail-chat { flex: 1; margin: 6px 2px; padding: 8px 0 7px; }
  .rail-nav a[aria-current=page]::before { left: 30%; right: 30%; top: -7px; bottom: auto; width: auto; height: 3px; border-radius: 0 0 3px 3px; }
  .rail-foot { flex: 3; flex-direction: row; margin: 0; gap: 0; }
  .server-state, .account { flex: 1; }
  .account-button { width: auto; margin: 6px 2px; padding: 6px 0 7px; gap: 4px; }
  .account-button .av.sm { --size: 26px; font-size: 12px; }
  .account-label { max-width: 58px; }
  .rail-nav a, .theme-toggle, .account-button { font-size: 11px; }
  .account-panel { left: 10px; right: 10px; bottom: 78px; width: auto; max-height: calc(100vh - 100px); transform-origin: center bottom; }
  .av-edit { grid-area: av; margin-top: -52px; border-radius: 27px; justify-self: start; }
  .av-edit::after { border-radius: 27px; }
  .av-edit-badge { width: 36px; height: 36px; }
  .you-tag { font-size: 12px; padding: 4px 9px; margin-left: 8px; }
  .page { padding: 22px 16px 24px; }
  .footer { padding: 6px 16px 18px; }
  .page-head { margin-bottom: 18px; }
  .page-head h1 { font-size: 30px; }
  .controls { width: 100%; }
  .rulesets { width: 100%; }
  .rulesets a { flex: 1; justify-content: center; padding: 9px 4px; gap: 5px; font-size: 13px; }
  .segmented { width: 100%; }
  .segmented a { flex: 1; justify-content: center; }
  .podiums { grid-template-columns: 1fr; gap: 10px; }
  .podium, .podium.p1 {
    order: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "av name value" "av stats value";
    align-items: center; gap: 4px 14px; padding: 16px 16px 16px 16px; text-align: left;
  }
  .podium-cover, .podium.p1 .podium-cover { height: 100%; opacity: .35; }
  .podium-cover::after { background: linear-gradient(to right, color-mix(in srgb, var(--panel) 40%, transparent), var(--panel) 70%); }
  .podium .av, .podium.p1 .av { --size: 58px; grid-area: av; box-shadow: 0 0 0 3px var(--panel), 0 0 0 5px var(--medal); }
  .medal { top: auto; left: 52px; bottom: 8px; width: 26px; height: 26px; font-size: 14px; z-index: 1; }
  .podium-name { grid-area: name; margin: 0; }
  .podium-name .name { font-size: 17px; }
  .podium-value { grid-area: value; flex-direction: column; align-items: flex-end; gap: 2px; }
  .podium-value strong, .podium.p1 .podium-value strong { font-size: 24px; }
  .podium-stats { grid-area: stats; justify-content: flex-start; gap: 14px; margin: 0; font-size: 13px; }
  .podium-stats > span { align-items: flex-start; }
  .podium-stats > span:nth-child(3) { display: none; }
  .board-row { grid-template-columns: 30px auto minmax(0, 1fr) auto; gap: 12px; padding: 10px 14px 10px 8px; }
  .row-rank { font-size: 17px; }
  .board-row .av { --size: 40px; }
  .row-value { flex-direction: column; align-items: flex-end; gap: 1px; }
  .row-value strong { font-size: 20px; }
  .search { flex-basis: 100%; }
  .player-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pcard-cover { height: 64px; }
  .pcard .av { --size: 52px; margin: -28px 0 0 12px; }
  .pcard-body { padding: 8px 12px 0; }
  .pcard-body .name { font-size: 16px; }
  .pcard-foot { padding: 10px 12px 12px; }
  .pcard-mode span { display: none; }
  .hero-cover { height: 130px; }
  .hero-body { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "av level" "id id"; gap: 12px; padding: 0 18px 20px; align-items: end; }
  .hero .av.xl { --size: 96px; grid-area: av; margin-top: -52px; }
  .hero .av-edit .av.xl { margin-top: 0; }
  .hero-id { grid-area: id; padding: 0; }
  .hero-id h1 { font-size: 30px; }
  .level { grid-area: level; width: 78px; height: 78px; }
  .level-num strong { font-size: 24px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding: 14px 16px; }
  .stat span { font-size: 23px; }
  .stat:nth-child(n) { border-left: 0; border-top: 1px solid var(--line); }
  .stat:nth-child(1) { grid-column: 1 / -1; border-top: 0; }
  .stat:nth-child(odd):not(:first-child) { border-left: 1px solid var(--line); }
  .card { padding: 16px; }
  .scores-card { padding: 16px 12px; }
  .scores-card .card-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .tabs { gap: 18px; }
  .score-head { display: none; }
  .score { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; padding: 8px 10px; }
  .score-mods, .score-num { display: none; }
  .score-brief { display: flex; align-items: center; gap: 8px; margin-top: 4px; font: 600 12.5px/1 var(--display); }
  .score-brief .mod { min-width: 28px; height: 18px; padding: 0 6px; font-size: 10px; }
  .score-map .version { min-width: 0; }
  .score-pp .score-weight { display: none; }
  .overlay-body { padding: 0 18px 22px; }
  .overlay-head h1 { font-size: 27px; }
  .logo.big { --s: 72px; }
  .address code { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
  .country-dialog[open], .account-panel { animation: none !important; }
  .spinner { animation: breathe 2s ease-in-out infinite; }
  @keyframes breathe { 50% { opacity: .5; } }
}
.podium > :not(.podium-cover):not(.medal) { position: relative; }
.podium .medal { z-index: 1; }

/* ---- own profile: banner button + crop dialog ---- */
.cover-edit {
  position: absolute; z-index: 2; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px;
  border-radius: 999px; background: #15131bb3; color: #fff; font: 700 13px/1 var(--display); cursor: pointer; backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px #ffffff26, 0 4px 14px #0004; transition: background .15s, transform .12s;
}
.cover-edit:hover { background: var(--pink-fill); color: var(--pink-ink); }
.cover-edit:active { transform: scale(.97); }
.cover-edit:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }

.crop-dialog {
  width: min(560px, calc(100vw - 24px)); padding: 0; border: 0; border-radius: 18px; background: var(--panel); color: var(--text);
  box-shadow: 0 30px 80px #0007, 0 0 0 1px var(--line);
}
.crop-dialog.crop-cover { width: min(880px, calc(100vw - 24px)); }
.crop-dialog[open] { animation: pop .22s cubic-bezier(.2, 1.4, .4, 1); }
.crop-dialog::backdrop { background: #110f17cc; backdrop-filter: blur(6px); }
.crop-dialog .dialog-heading {
  display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 18px 24px;
  background: linear-gradient(135deg, #ff66aa, #b05cff); color: #fff;
}
.crop-dialog h2 { font-size: 21px; font-weight: 800; }
.crop-stage {
  position: relative; overflow: hidden; margin: 20px 24px 0; border-radius: 12px; touch-action: none;
  background: repeating-conic-gradient(var(--panel-2) 0 25%, var(--panel-3) 0 50%) 0 0 / 20px 20px;
}
.crop-avatar .crop-stage { width: min(360px, 100% - 48px); margin-inline: auto; }
.crop-canvas { display: block; width: 100%; height: 100%; cursor: grab; outline: none; }
.crop-canvas.dragging { cursor: grabbing; }
.crop-stage:has(.crop-canvas:focus-visible) { box-shadow: 0 0 0 3px var(--pink); }
/* Shows the shape the picture will have on the site: rounded square for avatars, the visible band for banners. */
.crop-mask { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 2px #ffffffb3; border-radius: 12px; }
.crop-avatar .crop-mask { border-radius: 28%; box-shadow: 0 0 0 100vmax #0009, inset 0 0 0 2px #ffffffd9; }
.crop-cover .crop-mask { border-radius: 0; box-shadow: inset 0 0 0 2px #ffffffb3; }
.crop-zoom { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; margin: 18px 24px 0; font: 600 13px var(--display); color: var(--muted); }
.crop-zoom input { width: 100%; accent-color: var(--pink-fill); }
.crop-hint { margin: 10px 24px 0; color: var(--faint); font-size: 13px; }
.crop-animated { margin: 10px 24px 0; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--pink-fill) 14%, var(--panel-2)); color: var(--text); font-size: 13px; font-weight: 600; }
.crop-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 24px 22px; }
.crop-actions .dialog-submit { padding: 0 20px; }
@media (max-width: 720px) {
  .cover-edit { top: 10px; right: 10px; min-height: 32px; padding: 0 11px; }
  .crop-stage { margin: 16px 16px 0; }
  .crop-zoom, .crop-hint, .crop-animated { margin-inline: 16px; }
  .crop-actions { padding: 16px; }
  .crop-actions .btn, .crop-actions .dialog-submit { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .crop-dialog[open] { animation: none; } }

/* ---- pp tools: shared controls ---- */
.footer-tools { display: none; }
.footer p { margin: 0; }
.tabs button {
  position: relative; padding: 6px 0 10px; border: 0; background: none; color: var(--muted); cursor: pointer; font: 600 15px/1 var(--display);
}
.tabs button:hover { color: var(--text); }
.tabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px; background: transparent; transition: background .15s; }
.tabs button[aria-current=true] { color: var(--text); }
.tabs button[aria-current=true]::after { background: var(--pink-fill); box-shadow: 0 0 10px #ff66aa88; }
.tabs .count { margin-left: 3px; color: var(--faint); font-size: 13px; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend, .field-label { display: block; margin-bottom: 8px; padding: 0; font: 600 13px/1 var(--display); color: var(--muted); }
.finder-filters input[type=number], .finder-filters select, .calc-controls input[type=number] {
  width: 100%; min-height: 42px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--panel-2); color: var(--text);
  font: 600 15px var(--display); box-shadow: inset 0 0 0 1.5px var(--line); outline: none; transition: box-shadow .15s, background .15s;
}
.finder-filters input:hover, .finder-filters select:hover, .calc-controls input[type=number]:hover { box-shadow: inset 0 0 0 1.5px var(--faint); }
.finder-filters input:focus, .finder-filters select:focus, .calc-controls input[type=number]:focus {
  background: var(--panel); box-shadow: inset 0 0 0 2px var(--pink), 0 0 0 4px color-mix(in srgb, var(--pink) 18%, transparent);
}
.finder-filters input::placeholder, .calc-controls input::placeholder { color: var(--faint); font-weight: 500; }
.finder-filters select { padding-right: 32px; cursor: pointer; }
.check { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-size: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--pink-fill); }
.mod-toggle {
  display: inline-grid; place-items: center; gap: 4px; padding: 4px; border: 0; border-radius: 10px; background: none; cursor: pointer;
  transition: transform .12s, opacity .15s, filter .15s;
}
.mod-toggle .mod { min-width: 46px; height: 28px; font-size: 13px; }
.mod-toggle[aria-pressed=false] .mod { background: var(--panel-3); color: var(--muted); }
.mod-toggle[aria-pressed=true] .mod { filter: drop-shadow(0 0 6px color-mix(in srgb, currentColor 0%, #ff66aa66)); }
.mod-toggle:hover:not(:disabled) { transform: translateY(-1px); }
.mod-toggle:hover:not(:disabled)[aria-pressed=false] .mod { color: var(--text); }
.mod-toggle:disabled { opacity: .3; cursor: not-allowed; }
.mod-toggle small { font: 600 11.5px/1.15 var(--display); color: var(--muted); text-align: center; }
.mod-toggle[aria-pressed=true] small { color: var(--text); }

/* ---- map finder ---- */
.finder-profile {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 16px;
}
.finder-profile > div { display: flex; flex-direction: column; gap: 8px; padding: 16px 20px; }
.finder-profile > div + div { border-left: 1px solid var(--line); }
.finder-profile small { font-size: 13px; }
.finder-profile span { font: 700 22px/1.1 var(--display); }
.finder-profile .stretch { color: var(--lime); }
.finder-profile .usual { display: flex; flex-wrap: wrap; gap: 4px; font-size: 16px; }
.finder-profile .usual .mod { font: 800 12px/1 var(--display); min-width: 36px; height: 24px; }
.mod-picker .mod-toggle .mod { min-width: 42px; }
.finder-filters {
  display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); align-items: end; gap: 18px 20px; margin-bottom: 26px;
}
.ff-mods { grid-row: span 2; align-self: start; }
.mod-picker { display: flex; flex-wrap: wrap; gap: 2px; margin: -4px; }
.ff-mods .link-btn { margin-top: 8px; padding-left: 0; }
.range-pair { display: flex; align-items: center; gap: 8px; color: var(--faint); font-size: 13px; }
.finder-filters .ff-checks { grid-column: 2 / 4; }
.finder-filters [type=submit] { min-height: 42px; }
.finder-progress {
  display: flex; align-items: center; gap: 22px; padding: 26px 28px; border-radius: 16px; background: var(--panel); box-shadow: var(--shadow);
}
.finder-progress .spinner { flex: none; }
.fp-text { flex: 1; min-width: 0; display: grid; gap: 10px; }
.fp-msg { font: 700 18px/1.3 var(--display); }
.progress-bar { position: relative; height: 6px; border-radius: 6px; background: var(--panel-3); overflow: hidden; }
.progress-bar span {
  position: absolute; inset: 0 auto 0 0; width: 35%; border-radius: 6px; background: linear-gradient(90deg, #ff66aa, #b05cff);
  box-shadow: 0 0 12px #ff66aa88; animation: sweep 1.6s cubic-bezier(.5, 0, .5, 1) infinite;
}
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
.results-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.results-head .tabs { flex-wrap: wrap; gap: 6px 22px; }
.results-head .reroll { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.results-head .reroll small { color: var(--muted); font-weight: 500; }
.finder-more { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 64px; margin-top: 18px; padding: 14px; color: var(--muted); font-size: 14px; text-align: center; }
.finder-more[data-state="done"] { border-top: 1px solid var(--line); }
.spinner.small { width: 30px; height: 30px; border-radius: 10px; box-shadow: 0 2px 12px #ff66aa55; }
.spinner.small i { width: 14px; height: 14px; border-width: 3px; }
.rec-grid { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 16px; align-items: start; }
.rec-col { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; align-content: start; }
/* Finder results: one card per beatmapset, a two-line row per suggested difficulty */
.rec-set { border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); overflow: hidden; }
.rs-head { position: relative; height: 92px; }
.rs-cover, .rs-cover img, .rs-cover .tri-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rs-head::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, #000a, #0000 70%); }
.rs-title { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 10px; color: #fff; min-width: 0; display: flex; align-items: center; gap: 10px; }
.rs-title-copy { flex: 1; min-width: 0; }
.rs-title h3 { font: 800 19px/1.15 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-title h3 a { color: inherit; text-decoration: none; }
.rs-title h3 a:hover { text-decoration: underline; }
.rs-title p { font-size: 13px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 18px 4px; color: var(--muted); font-size: 13px; }
.rs-facts .rs-peers { margin-left: auto; }
.rs-diffs { list-style: none; margin: 0; padding: 4px 10px 10px; }
.rec-row { display: grid; gap: 6px; padding: 11px 8px; border-radius: 10px; }
.rec-row + .rec-row { border-top: 1px solid var(--line); }
.rec-row:hover { background: var(--panel-2); }
/* Finder top: Le Chonk's case file (what he learned, in his voice) and the filters as chips with popovers */
.fc-case { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.fc-case .chonk { flex: none; }
.fc-note { position: relative; flex: 1; min-width: 0; display: grid; gap: 6px; padding: 14px 18px; border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); }
.fc-note::before { content: ""; position: absolute; left: -7px; top: 34px; width: 14px; height: 14px; background: var(--panel); transform: rotate(45deg); }
.fc-voice { font: 600 19px/1.45 var(--display); }
.fc-voice .stretch { color: var(--lime); }
.fc-mods { display: inline-flex; gap: 3px; vertical-align: -2px; }
.fc-keep { white-space: nowrap; }
.fc-mods .mod { min-width: 30px; height: 19px; font-size: 10px; padding: 0 7px; }
.fc-small { color: var(--muted); font-size: 13px; line-height: 1.6; }
.fc-small .from-osu { color: var(--text); }
.fc-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; padding: 0; list-style: none; }
.fc-facts li { padding: 5px 10px; border-radius: 999px; background: var(--panel-2); color: var(--muted); font-size: 13px; line-height: 1.3; }
.fc-facts li[hidden] { display: none; }
.fc-facts b { color: var(--text); font: 700 13.5px/1 var(--display); font-variant-numeric: tabular-nums; }
.fc-small .osu-link { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0; background: none; box-shadow: none; margin: 0; }
.fc-small .osu-link .link-btn { display: inline-flex; align-items: center; gap: 5px; padding: 0; }
.fc-small .osu-link-form { display: inline-flex; gap: 6px; }
.fc-small .osu-link-form input { width: 230px; min-height: 30px; padding: 4px 10px; font-size: 13px; }
/* Tuning: which top plays the Finder learns from */
.fc-tune-fact { padding: 0 !important; background: none !important; }
.fc-tune-fact .link-btn { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--panel-2); font-size: 13px; line-height: 1.3; }
.fc-tune-fact .link-btn[aria-expanded=true] { background: var(--pink-fill); color: var(--pink-ink); }
.fc-tune-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); }
.fc-tune { display: grid; gap: 14px; margin: 0 0 14px; padding: 16px 18px; border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); }
.fc-tune[hidden] { display: none; }
.fc-tune > header { display: flex; align-items: center; justify-content: space-between; }
.fc-tune h3 { margin: 0; font: 700 17px/1.2 var(--display); }
.fc-tune h4 { margin: 0; }
.fc-tune-close { width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--panel-2); color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.fc-tune-close:hover { color: var(--text); }
.fc-tune-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.fc-tune-preview { display: grid; gap: 2px; margin: 0; color: var(--muted); font-size: 13px; text-align: right; }
.fc-tune-preview b { color: var(--text); font: 700 14px/1.3 var(--display); font-variant-numeric: tabular-nums; }
.fc-tune-preview s { color: var(--faint); }
.fc-tune-peaks { margin: 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--pink-fill) 14%, var(--panel-2)); font-size: 13px; line-height: 1.5; }
.fc-tune-peaks > span { color: var(--muted); font-weight: 600; }
.fc-tune-list { display: grid; gap: 4px; max-height: 340px; overflow-y: auto; margin: 0; padding: 0 4px 0 0; list-style: none; }
.fc-tune-row label { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto 76px 64px 40px; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: var(--panel-2); cursor: pointer; }
.fc-tune-row label:has(:disabled) { cursor: default; }
.fc-tune-row .stars { justify-self: start; }
.fc-tune-map { display: grid; min-width: 0; }
.fc-tune-map b, .fc-tune-map small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-tune-map b { font-size: 13.5px; }
.fc-tune-map small { color: var(--muted); font-size: 12px; }
.fc-tune-tag { padding: 3px 8px; border-radius: 999px; background: var(--pink-fill); color: var(--pink-ink); font: 600 11.5px/1 var(--body); white-space: nowrap; }
.fc-tune-row .fc-mods { display: flex; gap: 3px; grid-column: 4; }
.fc-tune-tag { grid-column: 3; }
.fc-tune-pp { grid-column: 5; }
.fc-tune-row .fp-toggle { grid-column: 6; }
.fc-tune-pp { color: var(--muted); font: 600 13px/1 var(--display); font-variant-numeric: tabular-nums; text-align: right; }
.fc-tune-row.off label { background: transparent; box-shadow: inset 0 0 0 1px var(--panel-3); }
.fc-tune-row.off :is(.stars, .fc-tune-map, .fc-mods, .fc-tune-pp) { opacity: .55; }
.fc-tune-row.off .fc-tune-map b { text-decoration: line-through; text-decoration-color: var(--faint); }
.fc-tune > footer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fc-tune-count { margin-right: auto; color: var(--muted); font-size: 13px; }
.fc-tune-count b { color: var(--text); }
.fc-tune-status { color: var(--pink); font-size: 13px; }
.fc-tune .link-btn:disabled { color: var(--faint); cursor: default; }
@media (max-width: 640px) {
  .fc-tune-preview { text-align: left; }
  .fc-tune-row label { grid-template-columns: 62px auto auto minmax(0, 1fr) 40px; row-gap: 5px; }
  .fc-tune-row .stars { grid-row: 1 / 3; }
  .fc-tune-map { grid-column: 2 / 5; }
  .fc-tune-row :is(.fc-tune-tag, .fc-mods, .fc-tune-pp) { grid-row: 2; grid-column: auto; }
  .fc-tune-pp { text-align: left; }
  .fc-tune-row .fp-toggle { grid-column: 5; grid-row: 1 / 3; }
}
.fc-note .chonk-say { padding: 0; background: none; box-shadow: none; color: var(--pink); font-size: 13px; font-weight: 600; }
.fc-note .chonk-say::before { display: none; }
.fc-filters { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.fc-filter { position: relative; }
.fc-chip { display: inline-grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center; padding: 7px 10px 7px 14px; border: 0; border-radius: 12px;
  background: var(--panel); box-shadow: var(--shadow); color: var(--text); cursor: pointer; text-align: left; }
.fc-chip:hover { background: var(--panel-2); }
.fc-chip small { grid-column: 1; color: var(--muted); font: 500 11px/1.2 var(--body); }
.fc-chip [data-value] { grid-column: 1; display: inline-flex; align-items: center; gap: 5px; min-height: 20px; font: 700 14px/1.3 var(--display); white-space: nowrap; }
.fc-chip [data-value] .stars { font-size: 11px; padding: 1px 6px; }
.fc-chip > svg { grid-column: 2; grid-row: 1 / 3; color: var(--muted); transition: transform .15s; }
.fc-chip[aria-expanded=true] { box-shadow: 0 0 0 2px var(--pink-fill), var(--shadow); }
.fc-chip[aria-expanded=true] > svg { transform: rotate(180deg); }
.fc-pop { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; width: max-content; min-width: 260px; max-width: min(480px, calc(100vw - 32px)); display: grid; gap: 12px;
  padding: 16px; border-radius: 14px; background: var(--panel); box-shadow: 0 12px 40px #0006, 0 0 0 1px var(--line); }
.fc-pop.end { left: auto; right: 0; }
.fc-pop[hidden] { display: none; }
.fc-pop .mod-picker { margin: 0; max-width: 400px; }
.fc-pop .range-pair input { width: 86px; }
.fc-hint { color: var(--faint); font-size: 12px; margin-left: 4px; }
.fc-go { display: flex; gap: 8px; margin-left: auto; }
.fc-go .btn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; }
.fc-go #reroll small { color: var(--muted); font-weight: 500; }
.fc-filters + .chonk-chat { margin: 0 0 18px; max-width: none; text-align: left; }
/* two-handle star slider over a track with the comfort zone and the stretch target */
.fc-range { position: relative; width: 420px; max-width: 100%; height: 28px; }
.fc-track { position: absolute; left: 9px; right: 9px; top: 10px; height: 8px; border-radius: 8px; background: var(--panel-3); }
.fc-comfort { position: absolute; top: -4px; bottom: -4px; border-radius: 6px; background: color-mix(in srgb, var(--lime) 18%, transparent); }
.fc-sel { position: absolute; top: 0; bottom: 0; border-radius: 8px; background: linear-gradient(90deg, #ff8068, #ff4e6f 45%, #c645b8); }
.fc-stretch { position: absolute; top: -8px; bottom: -8px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--lime); }
.fc-thumb { position: absolute; inset: 0; width: 100%; height: 28px; margin: 0; padding: 0; background: none; appearance: none; -webkit-appearance: none; pointer-events: none; }
.fc-thumb::-webkit-slider-runnable-track { background: none; border: 0; }
.fc-thumb::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 6px #0006, 0 0 0 3px var(--pink-fill); pointer-events: auto; cursor: grab; }
.fc-thumb::-moz-range-track { background: none; border: 0; }
.fc-thumb::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 6px #0006, 0 0 0 3px var(--pink-fill); pointer-events: auto; cursor: grab; }
.fc-presets, .fc-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.fc-preset, .fc-seg button { padding: 6px 11px; border: 0; border-radius: 999px; background: var(--panel-2); color: var(--muted); font: 600 12.5px/1 var(--body); cursor: pointer; }
.fc-preset:hover, .fc-seg button:hover { color: var(--text); }
.fc-preset[aria-pressed=true], .fc-seg button[aria-pressed=true] { background: var(--pink-fill); color: var(--pink-ink); }
.fc-field { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.fc-options { display: grid; gap: 2px; }
.fc-option { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; cursor: pointer; font-size: 14px; }
.fc-option:hover { background: var(--panel-2); }
.fc-option input { accent-color: var(--pink-fill); }
@media (max-width: 760px) {
  .fc-case { align-items: flex-start; }
  .fc-case .chonk svg { width: 64px; height: auto; }
  .fc-voice { font-size: 16px; }
  .fc-go { width: 100%; margin-left: 0; }
  .fc-go .btn.primary { flex: 1; justify-content: center; }
  .fc-filter { position: static; }
  .fc-pop, .fc-pop.end { left: 0; right: 0; width: auto; max-width: none; }
  .fc-range { width: 100%; }
}
/* Pinned maps: pin buttons on difficulty rows and in the detail pane, a shelf of pinned maps above the results */
.fp-pin { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 9px; background: none; color: var(--faint); cursor: pointer; }
.fp-pin:hover { background: var(--panel-3); color: var(--text); }
.fp-pin.on { color: var(--pink); }
.fp-pin.labelled { display: inline-flex; align-items: center; gap: 6px; width: auto; height: auto; min-height: 42px; padding: 0 14px; border-radius: 12px; background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font: 600 14px/1 var(--body); }
.fp-pin.labelled.on { color: var(--pink); }
.fp-marker { display: inline-flex; margin-left: 6px; color: var(--pink); vertical-align: 1px; }
.fp-marker[hidden] { display: none; }
.fp-shelf { margin-bottom: 18px; }
.fp-shelf > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 8px; }
.fp-shelf h2 { display: inline-flex; align-items: center; gap: 6px; font: 700 17px/1 var(--display); }
.fp-shelf h2 svg { color: var(--pink); }
.fp-shelf h2 .count { color: var(--muted); font-size: 13px; }
.fp-shelf-hint { color: var(--faint); font-size: 12px; }
.fp-shelf > header .link-btn { margin-left: auto; }
.fp-shelf ul { list-style: none; margin: 0; padding: 2px 2px 8px; display: grid; grid-auto-flow: column; grid-auto-columns: 240px; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; }
.fp-card { scroll-snap-align: start; border-radius: 12px; background: var(--panel); box-shadow: var(--shadow); overflow: hidden; }
.fp-card.played { opacity: .78; }
.fp-card-art { position: relative; height: 58px; }
.fp-card-art > img, .fp-card-art > .tri-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fp-x { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 7px; background: #000a; color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
.fp-x:hover { background: var(--pink-fill); color: var(--pink-ink); }
.fp-card-body { display: grid; gap: 6px; padding: 8px 10px 10px; }
.fp-card-body > b { font: 700 14px/1.2 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-card-body > span { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; }
.fp-card-body .stars { font-size: 10.5px; padding: 2px 6px; }
.fp-card-pp { justify-content: space-between; }
.fp-card-pp strong { font: 800 18px/1 var(--display); color: var(--text); }
.fp-card-pp strong small { font-size: 11px; color: var(--pink); }
.fp-card-pp .rs-mods .mod { min-width: 26px; height: 18px; font-size: 9.5px; }
.fp-card-pp .rs-icon { width: 28px; height: 28px; }
.fp-done .grade-tag { min-width: 26px; height: 18px; font-size: 11px; }
/* Maps filter: one row per question, statuses as toggles in osu!'s colours, a farmed-only switch */
.fp-sec { display: grid; gap: 7px; }
.fp-sec h4 { color: var(--muted); font: 600 12px/1 var(--body); }
.fp-status { display: flex; flex-wrap: wrap; gap: 6px; }
.fp-status .status { border: 0; padding: 6px 11px; font-size: 12px; cursor: pointer; }
.fp-status .status[aria-pressed=false] { background: var(--panel-3); color: var(--faint); }
.fp-status .status:disabled { cursor: default; }
.fp-switch-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); cursor: pointer; }
.fp-switch-row > span:first-child { display: grid; gap: 3px; }
.fp-switch-row b { font-size: 14px; }
.fp-switch-row small { color: var(--muted); font-size: 12px; }
.fp-toggle-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fp-toggle { position: relative; flex: none; width: 40px; height: 22px; border-radius: 999px; background: var(--panel-3); transition: background .15s; }
.fp-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.fp-toggle-input:checked + .fp-toggle { background: var(--pink-fill); }
.fp-toggle-input:checked + .fp-toggle::after { transform: translateX(18px); }
.fp-toggle-input:focus-visible + .fp-toggle { outline: 2px solid var(--pink); outline-offset: 2px; }
.fp-foot { display: flex; justify-content: flex-end; }
.fp-desc { color: var(--faint); font-size: 12px; line-height: 1.4; max-width: 400px; }
/* Finder results as song select: sets on the left (one line per difficulty when open), the selected difficulty on the right */
.fs-select { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 420px); gap: 18px; align-items: start; }
.fs-carousel { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fs-set { border-radius: 12px; background: var(--panel); overflow: hidden; }
.fs-set.open { box-shadow: 0 0 0 2px var(--pink-fill), var(--shadow); }
.fs-head { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 74px; align-items: center; gap: 12px; padding: 6px 14px 6px 6px; cursor: pointer; outline-offset: -2px; }
.fs-head:hover { background: var(--panel-2); }
.fs-set.open .fs-head { background: linear-gradient(90deg, color-mix(in srgb, var(--pink-fill) 16%, transparent), transparent 65%); }
.fs-art { position: relative; width: 64px; height: 40px; border-radius: 8px; overflow: hidden; }
.fs-art img, .fs-art .tri-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fs-set.played .fs-art img { filter: saturate(.5); }
.fs-title { display: grid; min-width: 0; }
.fs-title b { font: 700 15px/1.25 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-title span { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-dots { display: flex; gap: 3px; }
.fs-dots i { width: 7px; height: 16px; border-radius: 3px; background: var(--sc); }
.fs-dots i.played { background: none; box-shadow: inset 0 0 0 2px var(--gc); }
.fs-best { display: grid; justify-items: end; font-variant-numeric: tabular-nums; }
.fs-best strong { font: 800 17px/1 var(--display); }
.fs-best strong small { font-size: 11px; color: var(--pink); margin-left: 1px; }
.fs-best > small { color: var(--lime); font-size: 11px; font-weight: 700; }
.fs-body { display: none; padding: 2px 8px 8px; }
.fs-set.open .fs-body { display: block; }
.fs-diffs { list-style: none; margin: 0; padding: 0 0 0 70px; display: grid; gap: 2px; }
.fs-diffs .rec-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto 84px 30px 30px; align-items: center; gap: 10px; padding: 5px 6px 5px 10px; border-radius: 9px; cursor: pointer; outline-offset: -2px; }
.fs-diffs .rec-row + .rec-row { border-top: 0; }
.fs-diffs .rec-row:hover { background: var(--panel-2); }
.fs-diffs .rec-row[aria-selected=true] { background: var(--panel-3); box-shadow: inset 3px 0 0 var(--pink-fill); }
.fs-diffs .rs-pp { justify-content: flex-end; }
.rs-stars { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rs-base { color: var(--muted); font: 600 11.5px/1 var(--display); font-variant-numeric: tabular-nums; }
.rs-base::before { content: "from "; color: var(--faint); font-weight: 500; }
.fs-pane-diff .rs-base::before { content: none; }
.fs-diffs .rs-pp strong { font-size: 16px; }
.fs-diffs .rs-icon { width: 30px; height: 30px; }
.fs-select .rs-more { width: calc(100% - 70px); margin: 4px 0 0 70px; }
.fs-list .finder-more { margin-top: 10px; }
.fs-pane { position: sticky; top: 16px; display: grid; gap: 14px; max-height: calc(100vh - 32px); overflow: auto; padding-bottom: 16px; border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); }
.fs-pane:empty { display: none; }
.fs-pane-art { position: relative; height: 150px; flex: none; }
.fs-pane-art > img, .fs-pane-art > .tri-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fs-pane-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, #000c, #0000 70%); }
.fs-pane-title { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 12px; display: flex; align-items: center; gap: 12px; min-width: 0; color: #fff; }
.fs-pane-title > div { min-width: 0; }
.fs-pane-title h3 { font: 800 20px/1.15 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-pane-title h3 a { color: inherit; text-decoration: none; }
.fs-pane-title h3 a:hover { text-decoration: underline; }
.fs-pane-title p { font-size: 13px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-pane > :not(.fs-pane-art) { margin-inline: 16px; }
.fs-pane-diff { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.fs-version { flex: 1; min-width: 0; font: 700 18px/1.2 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-tiles { display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 12px; background: var(--panel-2); }
.fs-tiles div { display: grid; gap: 4px; padding: 12px 14px; min-width: 0; }
.fs-tiles div + div { border-left: 1px solid var(--line); }
.fs-tiles strong { font: 800 24px/1 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fs-tiles strong small { font-size: 12px; color: var(--pink); margin-left: 1px; }
.fs-tiles strong.gain { color: var(--lime); }
.fs-tiles > div > small { color: var(--muted); font-size: 12px; }
.fs-ladder, .fs-bars { display: grid; gap: 6px; }
.fs-bar { display: grid; grid-template-columns: 44px 1fr 58px; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
.fs-bar i { height: 6px; border-radius: 6px; background: var(--panel-3); overflow: hidden; }
.fs-bar b { display: block; height: 100%; border-radius: 6px; background: color-mix(in srgb, var(--text) 70%, transparent); }
.fs-ladder .fs-bar b { background: linear-gradient(90deg, #ff66aa, #b05cff); }
.fs-bar em { font-style: normal; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.fs-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); font-size: 13px; }
.fs-reasons { margin-block: -6px 0; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.45; }
/* Download fills the first row; Pin and Calculator share the second, all the same height, corners and type */
.fs-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fs-actions > * { min-height: 42px; margin: 0; }
.fs-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.fs-actions .btn.primary { grid-column: 1 / -1; }
.fs-actions .fp-pin.labelled { justify-content: center; border-radius: 10px; font: 700 14px/1 var(--display); }
@media (max-width: 1100px) {
  .fs-select { grid-template-columns: minmax(0, 1fr); }
  .fs-set .fs-pane { position: static; max-height: none; margin: 10px 0 0; box-shadow: none; background: var(--panel-2); }
  .fs-set .fs-pane .fs-tiles { background: var(--panel-3); }
}
@media (max-width: 640px) {
  .fs-head { grid-template-columns: 52px minmax(0, 1fr) 64px; }
  .fs-dots { display: none; }
  .fs-diffs { padding-left: 0; }
  .fs-select .rs-more { width: 100%; margin-left: 0; }
  .fs-diffs .rec-row { grid-template-columns: auto minmax(0, 1fr) auto 64px 30px 30px; }
  .fs-diffs .rec-cat, .fs-diffs .rs-yours { display: none; }
}
/* Sets you already passed: a slimmer header, your played difficulties in the ladder as scores to improve */
.rec-set.played .rs-head { height: 72px; }
.rs-improve { position: relative; padding-left: 14px; background: color-mix(in srgb, var(--gc) 11%, transparent); }
.rs-improve::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--gc); }
.rs-improve + .rec-row, .rec-row + .rs-improve { border-top-color: transparent; }
.rs-improve:hover { background: color-mix(in srgb, var(--gc) 16%, transparent); }
.rs-yours { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rs-yours .grade-tag { min-width: 28px; height: 20px; font-size: 12px; }
.rs-step { gap: 4px; }
.rs-was { color: var(--muted); font: 700 14px/1 var(--display); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.rs-arrow { color: var(--muted); font-size: 14px; }
.rs-retry { color: var(--muted); font-size: 12px; }
.rs-more { display: flex; align-items: center; gap: 10px; width: calc(100% - 20px); margin: 0 10px 10px; padding: 9px 12px; border: 1px dashed var(--line); border-radius: 10px;
  background: none; color: var(--muted); font: 600 13px/1 var(--body); cursor: pointer; }
.rs-more:hover { background: var(--panel-2); color: var(--text); }
.rs-more span { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin-left: auto; }
.rs-more .stars { font-size: 10px; padding: 2px 6px; }
.rs-hidden { padding-top: 0; }
.rs-main { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto auto; align-items: center; gap: 10px; }
.rs-name { font: 700 14px/1.2 var(--display); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-mods { display: inline-flex; gap: 3px; }
.rs-mods .mod { min-width: 30px; height: 20px; font: 800 10px/1 var(--display); }
.rs-mods.nm { padding: 2px 7px; border-radius: 6px; background: var(--panel-3); color: var(--muted); font: 800 10px/1.4 var(--display); }
.rec-cat { padding: 3px 8px; border-radius: 999px; font: 700 11px/1 var(--display); white-space: nowrap; }
.rec-cat.cat-safe { background: color-mix(in srgb, var(--blue) 18%, transparent); color: var(--blue); }
.rec-cat.cat-potential-top-play { background: color-mix(in srgb, var(--yellow) 22%, transparent); color: var(--yellow); }
.rec-cat.cat-skill-improvement { background: color-mix(in srgb, var(--lime) 18%, transparent); color: var(--lime); }
.rec-cat.cat-exploration { background: color-mix(in srgb, #b05cff 20%, transparent); color: light-dark(#7a3fd0, #c79bff); }
.rs-pp { display: inline-flex; align-items: baseline; gap: 2px; font-variant-numeric: tabular-nums; }
.rs-pp strong { font: 800 19px/1 var(--display); }
.rs-pp small { color: var(--pink); font: 700 12px/1 var(--display); }
.rec-actions { display: inline-flex; gap: 6px; }
.rs-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--text); background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.rs-icon:hover { background: var(--panel-3); color: var(--text); }
.rs-icon.download-in-osu { color: var(--pink-ink); background: var(--pink-fill); box-shadow: none; }
.rs-icon.download-in-osu:hover { filter: brightness(1.08); color: var(--pink-ink); }
.rs-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding-left: 2px; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.rs-ladder { margin-left: auto; color: var(--faint); }
.rs-why { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.rs-pattern { margin: 0; padding-left: 2px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.rs-gain { color: var(--lime); font: 700 12px/1 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rs-rank { display: inline-flex; align-items: center; gap: 4px; color: var(--yellow); font: 700 12px/1 var(--display); white-space: nowrap; }
.rs-comfort { font-size: 12px; white-space: nowrap; }
.rs-comfort.ok { color: var(--green); }
.rs-comfort.up { color: var(--yellow); }
.rs-comfort.down { color: var(--muted); }
.rs-peers { display: inline-flex; align-items: center; gap: 5px; color: var(--pink); font: 700 12px/1 var(--display); white-space: nowrap; }

/* ---- calculator ---- */
.map-jump { flex: 1 1 360px; max-width: 520px; }
.map-hero { display: grid; grid-template-columns: 300px minmax(0, 1fr); border-radius: 18px; background: var(--panel); box-shadow: var(--shadow); overflow: hidden; }
.map-cover { position: relative; min-height: 170px; }
.map-cover img, .map-cover .tri-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.map-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, #0000 55%, var(--panel)); }
.map-hero-body { display: flex; flex-direction: column; justify-content: center; gap: 5px; min-width: 0; padding: 22px 26px; }
.map-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.map-badges .stars { font-size: 13px; padding: 5px 10px; }
.map-hero h2 { font-size: 30px; font-weight: 800; overflow-wrap: anywhere; margin-top: 4px; }
.map-artist { color: var(--muted); }
.map-version { font: 700 15px/1.3 var(--display); }
.map-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.calc-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: start; }
.calc-controls { display: grid; gap: 20px; }
.calc-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.calc-row .field-label { margin: 0; }
.calc-row .rulesets a { padding: 7px 11px; font-size: 13px; }
.mod-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.mod-toggle.big { padding: 8px 2px 7px; border-radius: 12px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.mod-toggle.big[aria-pressed=true] { background: var(--pink-soft); box-shadow: inset 0 0 0 1.5px var(--pink-fill); }
.acc-row { display: flex; align-items: center; gap: 14px; }
.acc-row input[type=range] { flex: 1; min-width: 0; accent-color: var(--pink-fill); height: 6px; }
.acc-box { position: relative; flex: none; width: 112px; }
.acc-box input { padding-right: 30px !important; }
.acc-box span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font: 600 14px var(--display); pointer-events: none; }
.pair, .hits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.calc-controls label:not(.check) { display: grid; gap: 7px; font: 600 13px/1 var(--display); color: var(--muted); }
.calc-result { position: sticky; top: 20px; display: grid; gap: 18px; transition: opacity .2s; }
.calc-result.pending { opacity: .62; }
.result-main { display: grid; gap: 6px; padding: 18px 20px; border-radius: 14px; color: #fff;
  background: linear-gradient(135deg, #ff66aa, #b05cff 75%, #7a5cff); box-shadow: 0 8px 26px #b05cff40; }
.result-main small { color: #ffffffd9; font: 600 13px var(--display); }
.result-main .pp-line { display: flex; align-items: baseline; gap: 6px; }
.result-main strong { font: 800 54px/1 var(--display); letter-spacing: -.01em; }
.result-main .pp-line small { color: #fff; font: 700 22px/1 var(--display); }
.result-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.result-pair > div { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.result-pair b { font: 700 22px/1 var(--display); }
.acc-ladder { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.acc-ladder li { display: grid; gap: 5px; justify-items: center; padding: 9px 4px; border-radius: 10px; background: var(--panel-2); }
.acc-ladder b { font: 700 15px/1 var(--display); }
.acc-ladder li.current { background: var(--pink-soft); box-shadow: inset 0 0 0 1.5px var(--pink-fill); }
.calc-status { min-height: 1.2em; color: var(--muted); font-size: 13.5px; }
.calc-status:empty { display: none; }
.attr-card { margin-top: 16px; }
.table-scroll { overflow-x: auto; }
.attr-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.attr-table th, .attr-table td { padding: 10px 12px; text-align: right; border-top: 1px solid var(--line); }
.attr-table thead th { border-top: 0; color: var(--muted); font: 600 13px var(--display); }
.attr-table th:first-child { text-align: left; }
.attr-table tbody th { font: 500 14px var(--body); color: var(--muted); }
.attr-table td { font: 700 15px var(--display); }
.attr-table td.up { color: var(--red); }
.attr-table td.down { color: var(--green); }
.attr-table td.up::after { content: " ↑"; }
.attr-table td.down::after { content: " ↓"; }
.calc-start .muted { font-size: 14px; }
.quick-maps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.quick-maps a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title pp" "meta pp"; align-items: center; gap: 4px 16px;
  padding: 12px 16px; border-radius: 12px; background: var(--panel-2); text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); transition: transform .12s ease-out;
}
.quick-maps a:hover { transform: translateX(4px); box-shadow: inset 0 0 0 1.5px var(--pink-fill); }
.qm-title { grid-area: title; font: 700 16px/1.2 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qm-meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.qm-meta .mod { min-width: 30px; height: 20px; font-size: 11px; padding: 0 7px; }
.qm-pp { grid-area: pp; font: 800 22px/1 var(--display); }
.qm-pp small { margin-left: 2px; color: var(--pink); font: 700 13px var(--display); }

/* ---- your own plays: what if ---- */
.score-whatif { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 7px; font: 600 12.5px/1.2 var(--display); color: var(--muted); }
.whatif-pp b { color: var(--lime); font-weight: 700; }
.whatif-link { color: var(--pink); text-decoration: none; font-weight: 700; }
.whatif-link:hover { text-decoration: underline; }

@media (max-width: 1100px) {
  .finder-profile { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .finder-profile > div:nth-child(n+4) { border-top: 1px solid var(--line); }
  .finder-profile > div:nth-child(4) { border-left: 0; }
  .finder-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ff-mods { grid-column: 1 / -1; grid-row: auto; }
  .finder-filters .ff-checks { grid-column: 1 / 3; }
  .calc-grid { grid-template-columns: 1fr; }
  .calc-result { position: static; }
}
@media (max-width: 720px) {
  .rail .server-state, .rail .theme-toggle { display: none; }
  .rail-nav { flex: 6; min-width: 0; }
  .rail-nav.rail-me { flex: 1; }
  .rail-foot { flex: 1; min-width: 0; }
  .rail-nav a, .account-button { min-width: 0; font-size: 10px; margin: 6px 1px; }
  .rail-nav a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rail-badge { top: 2px; right: calc(50% - 22px); }
  .rail-nav a svg { width: 21px; height: 21px; }
  .footer-tools { display: flex; justify-content: center; align-items: center; gap: 18px; margin-bottom: 10px; }
  .server-state.inline { flex-direction: row; gap: 7px; font-size: 12.5px; }
  .theme-toggle.inline { flex: none; flex-direction: row; width: auto; margin: 0; padding: 7px 12px; gap: 7px; font-size: 12.5px; background: var(--panel); border-radius: 999px; }
  .finder-profile { grid-template-columns: 1fr 1fr; }
  .finder-profile > div { padding: 12px 14px; border-top: 1px solid var(--line); }
  .finder-profile > div + div { border-left: 0; }
  .finder-profile > div:nth-child(even) { border-left: 1px solid var(--line); }
  .finder-profile > div:nth-child(-n+2) { border-top: 0; }
  .finder-profile > div:last-child { grid-column: 1 / -1; border-left: 0; }
  .finder-profile span { font-size: 19px; }
  .finder-filters { grid-template-columns: 1fr 1fr; gap: 16px; }
  .finder-filters .ff-checks { grid-column: 1 / -1; }
  .finder-filters [type=submit] { grid-column: 1 / -1; }
  .finder-progress { flex-direction: column; text-align: center; padding: 24px 18px; }
  .results-head .tabs { gap: 4px 16px; }
  .rs-main { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .rs-main .rec-cat, .rs-main .rs-mods { display: none; }
  .rs-ladder { margin-left: 0; }
  .map-hero { grid-template-columns: 1fr; }
  .map-cover { min-height: 110px; }
  .map-cover::after { background: linear-gradient(to bottom, #0000 40%, var(--panel)); }
  .map-hero-body { padding: 4px 18px 18px; }
  .map-hero h2 { font-size: 24px; }
  .mod-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .calc-row .rulesets { width: 100%; }
  .result-main strong { font-size: 44px; }
  .acc-ladder { gap: 4px; }
  .acc-ladder b { font-size: 13px; }
  .hits { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .attr-table th, .attr-table td { padding: 9px 8px; }
}
@media (prefers-reduced-motion: reduce) { .progress-bar span { animation-duration: 6s; } }
.download-in-osu { gap: 7px; }
.ff-checks { display: grid; gap: 8px; align-content: start; }
.ff-played { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--muted); font-size: 13px; }
.ff-played select { width: auto; min-height: 32px; padding-block: 4px; font-size: 13px; }
.peer-tile em { font-style: normal; font-size: 14px; color: var(--muted); margin-left: 4px; }
.peer-tile .peer-note { color: var(--faint); font-size: 12px; line-height: 1.3; }
.mod.mod-any { width: auto; min-width: 46px; padding: 0 10px; clip-path: none; border-radius: 999px; background: var(--pink-soft); color: var(--pink); }

/* ---- profile page (profile-page.mjs): player card header, movable sections, customise drawer ---- */
.pv, .pv-drawer, .pv-dialog {
  --hue: 335;
  --pink: light-dark(oklch(.55 .2 var(--hue)), oklch(.77 .15 var(--hue)));
  --pink-fill: light-dark(oklch(.57 .21 var(--hue)), oklch(.74 .17 var(--hue)));
  --pink-ink: light-dark(#fff, oklch(.2 .06 var(--hue)));
  --soft: color-mix(in oklch, var(--pink-fill) 16%, transparent);
  --glow: color-mix(in oklch, var(--pink-fill) 40%, transparent);
}
.pv .btn.primary, .pv-drawer .btn.primary { background: var(--btn-tri) center / 320px 60px, var(--pink-fill); box-shadow: 0 3px 14px var(--glow); }
.pv .rulesets a[aria-current=true] { background: var(--pink-fill); box-shadow: 0 2px 12px var(--glow); }
.pv .tabs a[aria-current=true]::after { background: var(--pink-fill); box-shadow: 0 0 10px var(--glow); }
.pv .you-tag { box-shadow: 0 2px 10px var(--glow); }
.pv-dialog .dialog-heading { background: linear-gradient(135deg, var(--pink-fill), oklch(.6 .18 calc(var(--hue) + 50))); }

.pv-pronouns { display: inline-block; padding: 5px 11px; border-radius: 999px; background: var(--soft); color: var(--pink); font: 600 13px/1 var(--body); }
.pv-status { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-weight: 600; }
.pv-status-emoji { font-size: 18px; }
.pv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 8px; color: var(--muted); font-size: 14px; }
.pv-meta .hero-country { font-weight: 500; }
.pv-clock { display: inline-flex; align-items: center; gap: 6px; }
.pv-online { color: var(--green); font-weight: 600; }
.pv-online::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: currentColor; animation: pv-pulse 2s infinite; }
@keyframes pv-pulse { 0% { box-shadow: 0 0 0 0 currentColor; } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
.pv-muted { color: var(--muted); }
.pv-links { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.pv-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 0; border-radius: 999px; background: var(--panel-2); color: var(--text); font: 600 13px/1 var(--body); text-decoration: none; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); transition: transform .15s, background .15s, color .15s; }
.pv-link:hover { background: var(--soft); color: var(--pink); transform: translateY(-1px); }
.pv-play { display: inline-flex; gap: 4px; color: var(--muted); }
.pv-play span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--panel-2); }
.pv-icon { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border: 0; border-radius: 9px; background: var(--panel-2); color: var(--muted); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.pv-icon:hover { color: var(--text); background: var(--panel-3); }
.pv-icon.on { color: var(--pink); background: var(--soft); box-shadow: none; }
.pv-icon:disabled { opacity: .35; cursor: default; }
.pv-md { overflow-wrap: anywhere; }
.pv-md h3 { margin: 0 0 6px; font: 700 21px/1.2 var(--display); }
.pv-md p, .pv-md ul, .pv-md blockquote { margin: 0 0 10px; }
.pv-md > :last-child { margin-bottom: 0; }
.pv-md ul { padding-left: 20px; }
.pv-md li::marker { color: var(--pink); }
.pv-md blockquote { padding: 6px 14px; border-left: 3px solid var(--pink-fill); color: var(--muted); font-style: italic; }
.pv-md a { color: var(--pink); }
.pv-md code { padding: 1px 5px; border-radius: 5px; background: var(--panel-2); font-size: 13px; }
.spoiler { padding: 0 3px; border-radius: 4px; background: var(--text); color: transparent; cursor: pointer; transition: background .25s, color .25s; }
.spoiler.shown { background: var(--soft); color: inherit; }
.pv-grade { display: grid; place-items: center; width: 40px; height: 26px; flex: none; border-radius: 8px; background: var(--gc, var(--g-f)); color: #1c1a24; font: italic 800 15px/1 var(--display); box-shadow: inset 0 -3px 0 #0002; }
.pv-bar { height: 10px; border-radius: 999px; background: var(--panel-3); overflow: hidden; }
.pv-bar i, .pv-cbar i { display: block; height: 100%; width: var(--to); border-radius: inherit; background: linear-gradient(90deg, var(--pink-fill), oklch(.8 .14 calc(var(--hue) + 40))); animation: pv-grow 1.2s cubic-bezier(.2, .8, .2, 1) both; }
.pv.quiet .pv-bar i { animation: none; }
@keyframes pv-grow { from { width: 0; } }
.pv-goals { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pv-goal-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: 14px; }
.pv-goal-head span { color: var(--muted); font-variant-numeric: tabular-nums; }
.pv-setup { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin: 0; }
.pv-setup div { padding: 10px 12px; border-radius: 12px; background: var(--panel-2); }
.pv-setup dt { color: var(--muted); font-size: 12px; }
.pv-setup dd { margin: 2px 0 0; font: 700 14px/1.3 var(--display); overflow-wrap: anywhere; }
.pv-toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 12px; background: var(--text); color: var(--bg); font-weight: 600; transform: translate(-50%, 20px); opacity: 0; transition: .25s; pointer-events: none; }
.pv-toast.show { transform: translate(-50%, 0); opacity: 1; }
.pv-trail { position: fixed; inset: 0; z-index: 40; width: 100vw; height: 100vh; pointer-events: none; }
.pv:not(.quiet) .p1-section, .pv:not(.quiet) .p2-shelf li { animation: pv-rise .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 60ms); }
@keyframes pv-rise { from { opacity: 0; transform: translateY(14px); } }

/* header: banner backdrop, card, identity */
.p5-hero { position: relative; display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 44px; align-items: center; padding: 36px 40px; border-radius: 24px; overflow: hidden; background: var(--panel); box-shadow: var(--shadow); }
.p5-backdrop { --scroll: 0px; position: absolute; inset: 0; overflow: hidden; }
.p5-backdrop .hero-cover { position: absolute; inset: -40px; height: auto; filter: blur(18px) saturate(1.3); }
.p5-backdrop .hero-cover::after { display: none; }
.p5-backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, color-mix(in srgb, var(--panel) 20%, transparent), color-mix(in srgb, var(--panel) 82%, transparent) 42%, var(--panel) 85%); }
.p1-drift { position: absolute; inset: 0; z-index: 1; display: none; }
.p1-drift svg { width: 100%; height: 100%; }
.p1-drift path { fill: #fff; fill-opacity: .12; animation: pv-drift 9s linear infinite; }
.p1-drift path:nth-child(odd) { animation-duration: 13s; animation-delay: -4s; }
.p1-drift path:nth-child(3n) { animation-duration: 17s; animation-delay: -8s; fill: color-mix(in oklch, var(--pink-fill) 70%, white); fill-opacity: .18; }
@keyframes pv-drift { from { transform: translateY(60px); opacity: 0; } 20%, 80% { opacity: 1; } to { transform: translateY(-120px); opacity: 0; } }
.p5-backdrop.fx-drift .p1-drift { display: block; }
.p5-backdrop.fx-parallax .hero-cover { transform: translateY(var(--scroll)); }
.p5-backdrop.fx-aurora::before { content: ""; position: absolute; inset: -50%; z-index: 1; background: conic-gradient(from 0deg, transparent, color-mix(in oklch, var(--pink-fill) 55%, transparent), transparent 30%, oklch(.75 .15 calc(var(--hue) + 120) / .45), transparent 60%); mix-blend-mode: screen; filter: blur(30px); animation: pv-spin 14s linear infinite; }
@keyframes pv-spin { to { transform: rotate(1turn); } }
.p5-hero > .cover-edit { z-index: 3; }
.p5-card { position: relative; z-index: 2; display: grid; justify-items: center; gap: 14px; perspective: 1200px; }
.p5-id { position: relative; z-index: 2; display: grid; gap: 4px; min-width: 0; }
.p5-name { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.p5-name h1 { font: 800 40px/1.1 var(--display); overflow-wrap: anywhere; }
.p5-name .you-tag { transform: translateY(-6px); }
.p5-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; }
.p1-numbers { display: flex; flex-wrap: wrap; gap: 16px 26px; justify-content: space-between; margin: 16px 0 0; padding: 16px 0; border-block: 1px solid var(--line); }
.p1-numbers dt { color: var(--muted); font-size: 12px; }
.p1-numbers dd { margin: 0; font: 800 22px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.p1-numbers small { margin-left: 2px; color: var(--pink); font-size: 13px; }
.p5-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.p5-row:empty { display: none; }
.p5-row .btn { gap: 7px; }

/* the card */
.p2-tilt { --rx: 0deg; --ry: 0deg; position: relative; width: 100%; justify-self: stretch; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .3s ease-out; transform-style: preserve-3d; }
.p2-tilt:hover { transition-duration: .08s; }
.p2-card { --mx: 50%; --my: 30%; --dx: 0; --dy: 0; position: relative; aspect-ratio: 5 / 7.2; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3, 1.2, .5, 1); }
.p2-card.flipped { transform: rotateY(180deg); }
.p2-face { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 14px; border-radius: 22px; backface-visibility: hidden; overflow: hidden;
  background: var(--card-bg, var(--panel)); color: var(--card-ink, var(--text)); box-shadow: 0 0 0 var(--frame-w, 6px) var(--frame, var(--pink-fill)) inset, 0 24px 60px #0006; }
.p2-back { transform: rotateY(180deg); gap: 12px; padding: 22px 20px 18px; overflow: hidden; font-size: 14px; }
/* The back has the card's fixed size: setup and signature keep their place, the bio gets the rest (player-card.mjs fitCardBack). */
.p2-back .p2-bio { flex: 0 1 auto; min-height: 0; overflow: hidden; font-size: 13.5px; line-height: 1.45; }
.p2-back .p2-bio p { margin-bottom: 8px; }
.p2-back .p2-bio.clipped { mask-image: linear-gradient(#000 calc(100% - 44px), transparent); }
.p2-bio-more { flex: none; align-self: flex-start; margin-top: -8px; padding: 2px 0; border: 0; background: none; color: var(--pink); font: 700 13px/1.2 var(--display); cursor: pointer; }
.p2-bio-more:hover { text-decoration: underline; }
.p2-back .pv-setup { flex: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.p2-back .pv-setup div { padding: 6px 9px; border-radius: 9px; }
.p2-back .pv-setup dt { font-size: 11px; }
.p2-back .pv-setup dd { display: -webkit-box; overflow: hidden; font-size: 12.5px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.p2-back-foot { flex: none; }
.p2-back.reading .pv-setup { display: none; }
.p2-back.reading .p2-bio { overflow: auto; overscroll-behavior: contain; mask-image: none; padding-right: 4px; }
.frame-holo .p2-face { --frame-w: 0px; border: 3px solid color-mix(in oklch, var(--pink-fill) 60%, white);
  background: linear-gradient(160deg, color-mix(in oklch, var(--pink-fill) 22%, var(--panel)), var(--panel) 45%, color-mix(in oklch, oklch(.7 .15 calc(var(--hue) + 160)) 18%, var(--panel))); }
.frame-classic .p2-face { --frame: #d8b04a; --card-bg: light-dark(#fbf6e9, #2a2418); }
.frame-gold .p2-face { --frame: #e2b33c; --card-bg: light-dark(#fff7df, #221a09); background-image: linear-gradient(135deg, #ffe9a333, transparent 40%, #e2b33c22 70%, transparent);
  box-shadow: 0 0 0 6px #e2b33c inset, 0 0 0 8px #fff3c4 inset, 0 0 0 10px #b5841c inset, 0 24px 60px #0006, 0 0 24px #e2b33c55; }
.frame-neon .p2-face { --card-bg: #0d0a1a; --card-ink: #f2eefc; box-shadow: 0 0 0 3px var(--pink-fill) inset, 0 0 22px var(--pink-fill) inset, 0 0 26px var(--glow), 0 24px 60px #0006; }
.frame-neon .p2-face .pv-muted, .frame-neon .p2-sub, .frame-neon .p2-stats dt { color: #b9b0d4; }
.frame-pixel .p2-face { --frame-w: 8px; border-radius: 0; font-family: ui-monospace, monospace; box-shadow: 0 0 0 8px var(--pink-fill) inset, 8px 8px 0 #0006; }
.frame-pixel .p2-art, .frame-pixel .p2-card .av { border-radius: 0; }
.frame-sakura .p2-face { --frame: #f6a5c0; --card-bg: light-dark(#fff3f7, #2b1c24); background-image: radial-gradient(circle at 90% 10%, #f6a5c033 0 60px, transparent 61px), radial-gradient(circle at 8% 92%, #f6a5c022 0 90px, transparent 91px); }
.frame-midnight .p2-face { --frame: #3a3f8f; --card-bg: #0f1024; --card-ink: #eef; background-image: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 60%, #fff, transparent), radial-gradient(1.5px 1.5px at 40% 80%, #fffa, transparent), radial-gradient(1px 1px at 85% 20%, #fff, transparent); }
.frame-midnight .p2-sub, .frame-midnight .p2-stats dt, .frame-midnight .pv-muted { color: #aab0dd; }
.p2-art { position: relative; height: 42%; flex: none; border-radius: 14px; overflow: hidden; }
.p2-art-img { position: absolute; inset: 0; }
.p2-art-img img, .p2-art-img .tri-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.p2-rarity { position: absolute; z-index: 3; top: 10px; right: 10px; padding: 4px 10px; border-radius: 999px; background: linear-gradient(90deg, #ffd966, #fff3c4, #ffd966) 0 0 / 200%; color: #3b2a00; font: 800 12px/1 var(--display); animation: pv-shine 3s linear infinite; }
@keyframes pv-shine { to { background-position: 200% 0; } }
.sticker { position: absolute; left: var(--x); top: var(--y); z-index: 2; font-size: 32px; line-height: 1; transform: translate(-50%, -50%) rotate(var(--r)); user-select: none; touch-action: none;
  filter: drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 4px 6px #0006); transition: transform .15s; }
.sticker.movable { cursor: grab; }
.sticker.dragging { cursor: grabbing; transform: translate(-50%, -50%) rotate(var(--r)) scale(1.25); transition: none; }
.p2-av-wrap { position: relative; z-index: 2; align-self: center; margin-top: -42px; }
.p2-card .av.p2-av { --size: 84px; border-radius: 50%; box-shadow: 0 0 0 5px var(--card-bg, var(--panel)), 0 6px 18px #0005; }
.p2-av-edit { position: absolute; right: -4px; bottom: -2px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--pink-fill); color: var(--pink-ink); cursor: pointer; box-shadow: 0 0 0 3px var(--card-bg, var(--panel)); }
.p2-av-edit svg { width: 16px; height: 16px; }
.p2-title { margin-top: 8px; text-align: center; font: 800 22px/1.15 var(--display); overflow-wrap: anywhere; }
.p2-sub { margin-top: 4px; text-align: center; color: var(--muted); font-size: 13px; }
.p2-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: auto 0 10px; text-align: center; }
.p2-stats dt { color: var(--muted); font-size: 11px; }
.p2-stats dd { margin: 0; font: 800 17px/1.2 var(--display); font-variant-numeric: tabular-nums; }
.p2-fav { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--panel-2) 80%, transparent); font-size: 13px; }
.p2-fav span { color: var(--pink); font-weight: 700; font-size: 11px; }
.p2-fav strong { font: 700 15px/1.2 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p2-fav small { color: var(--muted); }
.p2-fav .pv-bar { height: 7px; margin: 4px 0 2px; }
.p2-back-foot { display: flex; justify-content: space-between; align-items: end; gap: 10px; margin-top: auto; }
.p2-signature { max-width: 60%; max-height: 60px; }
.p2-signature-text { font: italic 700 26px/1 var(--display); color: var(--pink); }
.p2-card-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.p2-card-actions .btn { gap: 6px; }

/* card effects */
.has-foil .p2-face::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; mix-blend-mode: color-dodge; opacity: .5;
  background: radial-gradient(circle at var(--mx) var(--my), #fff8, transparent 35%), linear-gradient(115deg, transparent 20%, oklch(.85 .15 calc(var(--hue) + 60) / .5) 35%, oklch(.85 .15 calc(var(--hue) + 180) / .5) 50%, oklch(.85 .15 var(--hue) / .5) 65%, transparent 80%) var(--mx) var(--my) / 250% 250%; }
.has-glow .p2-face { animation: pv-glow 3s ease-in-out infinite; }
@keyframes pv-glow { 0%, 100% { filter: drop-shadow(0 0 8px var(--pink-fill)); } 50% { filter: drop-shadow(0 0 20px var(--pink-fill)) drop-shadow(0 0 50px var(--pink-fill)); } }
.fx-sweep { position: absolute; inset: 0; z-index: 3; overflow: hidden; border-radius: inherit; pointer-events: none; }
.fx-sweep::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: -90%; width: 45%; background: linear-gradient(100deg, transparent, #ffffff14 30%, #ffffff66 50%, #ffffff14 70%, transparent); transform: skewX(-18deg); animation: pv-sweep 3.2s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes pv-sweep { 0%, 30% { left: -90%; } 75%, 100% { left: 150%; } }
.fx-spark { position: absolute; left: var(--x); top: var(--y); z-index: 4; width: 14px; height: 14px; pointer-events: none; background: #fff; filter: drop-shadow(0 0 4px #fff);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: pv-twinkle 2.6s ease-in-out infinite; animation-delay: var(--d); }
@keyframes pv-twinkle { 0%, 100% { transform: scale(0) rotate(0); opacity: 0; } 50% { transform: scale(1) rotate(90deg); opacity: 1; } }
.fx-circles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.fx-circles i { position: absolute; left: calc(var(--k) * 19% - 6%); top: calc(28% + (var(--k) - 2.5) * (var(--k) - 2.5) * 9%); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--pink-fill); box-shadow: 0 0 0 3px #fff, 0 4px 10px #0005; opacity: 0; animation: pv-hit 2.4s ease-out infinite; animation-delay: calc(var(--k) * .45s); }
.fx-circles b { color: #fff; font: italic 800 15px/1 var(--display); text-shadow: 0 1px 2px #0006; }
.fx-circles i::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid #fff; animation: pv-approach 2.4s linear infinite; animation-delay: inherit; }
@keyframes pv-hit { 0% { opacity: 0; transform: scale(1); } 8% { opacity: 1; } 45% { opacity: 1; transform: scale(1); } 55% { opacity: 0; transform: scale(1.4); } 100% { opacity: 0; } }
@keyframes pv-approach { 0% { transform: scale(2.6); opacity: 0; } 10% { opacity: .9; } 45% { transform: scale(1); opacity: .9; } 46%, 100% { opacity: 0; } }
.fx-confetti { position: absolute; left: 50%; top: 40%; z-index: 6; width: 8px; height: 12px; border-radius: 2px; background: var(--c); pointer-events: none; animation: pv-confetti 1.2s cubic-bezier(.2, .7, .4, 1) var(--d) forwards; }
@keyframes pv-confetti { to { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); opacity: 0; } }

/* sections */
.p1-nav { position: sticky; top: 8px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 20px 0 16px; padding: 6px 6px 6px 8px; border-radius: 16px;
  background: color-mix(in srgb, var(--panel) 90%, transparent); backdrop-filter: blur(10px); box-shadow: var(--shadow); }
.p1-nav nav { display: flex; gap: 2px; overflow-x: auto; }
.p1-nav nav a { padding: 8px 12px; border-radius: 10px; color: var(--muted); font: 700 14px/1 var(--display); text-decoration: none; white-space: nowrap; }
.p1-nav nav a:hover { color: var(--text); background: var(--panel-2); }
.p1-sections { display: grid; gap: 16px; }
.p1-section { scroll-margin-top: 90px; }
.p1-section.is-hidden { opacity: .6; background: transparent; box-shadow: inset 0 0 0 2px var(--line); padding-block: 12px; }
.p1-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.p1-section.is-hidden .p1-section-head { margin: 0; }
.p1-section-head h2 { font-size: 20px; font-weight: 800; }
.score-switch { display: inline-flex; gap: 2px; margin-right: auto; padding: 3px; border-radius: 999px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.score-switch a { padding: 7px 14px; font-size: 13.5px; }
.score-switch a[aria-current=true] { color: var(--pink-ink); background: var(--pink-fill); box-shadow: 0 2px 10px color-mix(in srgb, var(--pink-fill) 35%, transparent); }
#scores { transition: opacity .15s; }
#scores[aria-busy=true] { opacity: .5; pointer-events: none; }
#s-me-title { color: var(--pink); font-style: italic; }
.p1-tools { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.p1-history { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: center; }
.pv .rank-chart .grid { stroke: var(--line); }
.pv .rank-chart .line { stroke: var(--pink-fill); filter: drop-shadow(0 2px 6px var(--glow)); stroke-dasharray: 1400; animation: pv-draw 1.6s ease-out both; }
.pv.quiet .rank-chart .line { animation: none; }
.pv .rank-chart .dot { fill: var(--panel); stroke: var(--pink-fill); }
.pv .graph-axis { color: var(--muted); }
.pv-chart { position: relative; }
.pv .rank-chart { cursor: crosshair; border-radius: 8px; }
.pv .rank-chart:focus-visible { outline: 2px solid var(--pink-fill); outline-offset: 4px; }
.pv .rank-chart .hover-dot { fill: var(--pink-fill); stroke: var(--panel); stroke-width: 3; opacity: 0; transition: opacity .15s; pointer-events: none; }
.pv-chart-tip { position: absolute; z-index: 2; display: grid; gap: 1px; padding: 6px 10px; border-radius: 10px; background: var(--text); color: var(--bg); font-size: 12px; white-space: nowrap; pointer-events: none; transform: translate(-50%, calc(-100% - 12px)); box-shadow: 0 6px 18px #0004; }
.pv-chart-tip strong { font: 800 15px/1.1 var(--display); }
@keyframes pv-draw { from { stroke-dashoffset: 1400; } to { stroke-dashoffset: 0; } }
.p1-grades { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; text-align: center; font-variant-numeric: tabular-nums; }
.p1-grades li { display: grid; gap: 6px; justify-items: center; font-weight: 700; }
.p2-shelf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.p2-shelf li { display: grid; justify-items: center; gap: 4px; padding: 14px 10px; border-radius: 14px; background: var(--panel-2); text-align: center; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.p2-shelf li:hover { transform: translateY(-6px) rotate(-2deg); }
.p2-shelf strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 13px/1.2 var(--display); }
.p2-shelf a { color: inherit; text-decoration: none; }
.p2-shelf small { color: var(--muted); font-size: 12px; }
.p2-disc { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: repeating-radial-gradient(circle, #1118 0 2px, #2228 2px 4px), #111; box-shadow: 0 4px 12px #0005; }
.p2-shelf li:hover .p2-disc { animation: pv-spin 2s linear infinite; }
.score-pp:has(.score-pin) { display: grid; grid-template-columns: auto auto; justify-items: end; align-items: center; column-gap: 8px; }
.score-pin { grid-column: 2; grid-row: 1 / span 2; min-width: 28px; height: 28px; }
.pv-compare-body { padding: 18px 24px 22px; }
.pv-compare { list-style: none; margin: 14px 0 10px; padding: 0; display: grid; gap: 10px; }
.pv-compare li { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13px; }
.pv-compare small { color: var(--muted); font-variant-numeric: tabular-nums; }
.pv-cbar { display: grid; gap: 3px; }
.pv-cbar i { height: 7px; }
.pv-cbar i.them { background: var(--muted); opacity: .6; }
.pv-legend { display: flex; gap: 14px; color: var(--muted); font-size: 12px; }
.pv-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; background: var(--pink-fill); vertical-align: -1px; }
.pv-legend .them::before { background: var(--muted); }

/* customise drawer */
.pv-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; display: flex; flex-direction: column; width: min(420px, 100vw); background: var(--panel); color: var(--text); box-shadow: -20px 0 60px #0005; animation: pv-slide .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes pv-slide { from { transform: translateX(100%); } }
.dr-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.dr-head h2 { font-size: 20px; font-weight: 800; }
.dr-saved { margin-left: auto; color: var(--muted); font-size: 13px; }
.dr-saved.error { color: var(--red); }
.dr-body { flex: 1; overflow: auto; padding: 4px 20px 30px; }
.dr-body h3 { margin: 22px 0 10px; color: var(--pink); font-size: 17px; font-weight: 700; }
.dr-field { display: grid; gap: 7px; margin-bottom: 16px; }
.dr-label { font: 700 13px/1 var(--display); }
.dr-field small, .dr-note { color: var(--muted); font-size: 12px; }
.dr-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.dr-chips button, .dr-toolbar button { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border: 0; border-radius: 999px; background: var(--panel-2); color: var(--text); font: 600 13px/1 var(--body); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.dr-chips button svg { width: 15px; height: 15px; }
.dr-chips button[aria-pressed=true] { background: var(--pink-fill); color: var(--pink-ink); box-shadow: none; }
.dr-chips button[style*="--sw"]::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: oklch(.7 .17 var(--sw)); }
.dr-chips.emoji button { padding: 5px 8px; font-size: 18px; }
.dr-toolbar { display: flex; gap: 4px; }
.dr-toolbar button { border-radius: 8px; font-weight: 800; }
.dr-row { display: flex; gap: 6px; align-items: center; }
.dr-kv span { width: 70px; flex: none; color: var(--muted); font-size: 13px; }
.dr-num { max-width: 90px; }
.pv-drawer input:not([type=checkbox]):not([type=range]), .pv-drawer select, .pv-drawer textarea { min-width: 0; flex: 1; width: 100%; padding: 9px 11px; border: 0; border-radius: 10px; background: var(--panel-2); color: var(--text); font: 14px/1.4 var(--body); box-shadow: inset 0 0 0 1px var(--line); }
.pv-drawer textarea { resize: vertical; font: 13px/1.5 ui-monospace, monospace; }
.pv-drawer :is(input, select, textarea):focus-visible { outline: 2px solid var(--pink-fill); outline-offset: 0; }
.dr-goal select { flex: 0 0 120px; }
.dr-hue { display: flex; gap: 10px; align-items: center; }
.dr-hue input { flex: 1; height: 12px; border-radius: 999px; appearance: none; background: linear-gradient(90deg, oklch(.7 .17 0), oklch(.7 .17 60), oklch(.7 .17 120), oklch(.7 .17 180), oklch(.7 .17 240), oklch(.7 .17 300), oklch(.7 .17 360)); }
.dr-hue input::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px #0006; }
.dr-hue input::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px #0006; }
.dr-swatch { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--pink-fill); }
.dr-sign { width: 100%; aspect-ratio: 3.5; border-radius: 12px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); touch-action: none; cursor: crosshair; }
.pv-switch { position: relative; display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.pv-switch input { position: absolute; opacity: 0; }
.pv-switch span { position: relative; width: 38px; height: 22px; flex: none; border-radius: 999px; background: var(--panel-3); transition: background .2s; }
.pv-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s cubic-bezier(.3, 1.5, .6, 1); box-shadow: 0 1px 3px #0004; }
.pv-switch input:checked + span { background: var(--pink-fill); }
.pv-switch input:checked + span::after { transform: translateX(16px); }
.pv-switch input:focus-visible + span { outline: 2px solid var(--pink); outline-offset: 2px; }

@media (max-width: 900px) {
  .p5-hero { grid-template-columns: 1fr; gap: 26px; padding: 22px 18px; }
  .p5-card { width: 100%; max-width: 320px; margin: 0 auto; }
  .p5-name h1 { font-size: 30px; }
  .p1-numbers { justify-content: flex-start; }
  .p5-row { justify-content: flex-start; }
  .p1-history { grid-template-columns: 1fr; }
  .p1-nav { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .pv *, .pv-drawer { animation: none !important; transition: none !important; }
}

/* ---- map cards (cards-kit.mjs, cards-page.mjs) ---- */
.rail-badge { position: absolute; top: 4px; right: 14px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--pink-fill); color: var(--pink-ink); font: 800 11px/18px var(--display); text-align: center; box-shadow: 0 0 0 2px var(--rail); }
.r-common { --rc: #9aa7bd; } .r-rare { --rc: #4fc0ff; } .r-epic { --rc: #b072ff; } .r-legendary { --rc: #ffcc33; }
.map-card { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 30%; --rc: #9aa7bd; container-type: inline-size; position: relative; width: 230px; aspect-ratio: 5 / 7.1; flex: none; border-radius: 16px; overflow: hidden; isolation: isolate;
  background: var(--panel); color: var(--text); transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .3s ease-out; box-shadow: 0 0 0 3px var(--rc), 0 14px 34px #0005; text-align: left; }
.map-card.r-common { --rc: #9aa7bd; } .map-card.r-rare { --rc: #4fc0ff; } .map-card.r-epic { --rc: #b072ff; } .map-card.r-legendary { --rc: #ffcc33; }
.map-card:hover { transition-duration: .08s; }
.map-card.r-rare { box-shadow: 0 0 0 3px var(--rc), 0 0 18px color-mix(in srgb, var(--rc) 45%, transparent), 0 14px 34px #0005; }
.map-card.r-epic { box-shadow: 0 0 0 3px var(--rc), 0 0 26px color-mix(in srgb, var(--rc) 60%, transparent), 0 14px 34px #0005; }
.map-card.r-legendary { box-shadow: 0 0 0 3px #ffe7a0, 0 0 0 6px var(--rc), 0 0 34px color-mix(in srgb, var(--rc) 70%, transparent), 0 14px 34px #0005; }
.map-card.r-legendary::before { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; pointer-events: none; background: linear-gradient(120deg, transparent 35%, #fff6 50%, transparent 65%) 0 0 / 300% 100%; animation: mc-shine 3.4s linear infinite; mix-blend-mode: overlay; }
@keyframes mc-shine { from { background-position: 150% 0; } to { background-position: -150% 0; } }
.map-card.holo::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; mix-blend-mode: color-dodge; opacity: .55;
  background: radial-gradient(circle at var(--mx) var(--my), #fff9, transparent 35%), linear-gradient(115deg, transparent 15%, #ff7ad980 30%, #7afcff80 45%, #fff27a80 60%, #b97aff80 75%, transparent 90%) var(--mx) var(--my) / 250% 250%; }
:root[data-theme=light] .map-card.holo::after { opacity: .25; }
@media (prefers-color-scheme: light) { :root:not([data-theme=dark]) .map-card.holo::after { opacity: .25; } }
.mc-art { position: relative; overflow: hidden; }
.mc-art img, .mc-art-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mc-art-fallback { background: linear-gradient(135deg, hsl(var(--h) 60% 50%), hsl(calc(var(--h) + 50) 55% 32%)); }
.mc-gem { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 5px; border-radius: 999px; background: color-mix(in srgb, var(--rc) 22%, #000a); color: #fff; font: 700 11px/1 var(--display); backdrop-filter: blur(4px); }
.mc-gem i { width: 10px; height: 10px; transform: rotate(45deg); border-radius: 2px; background: var(--rc); box-shadow: 0 0 8px var(--rc); }
.mc-grade { display: grid; place-items: center; flex: none; min-width: 38px; height: 26px; padding: 0 6px; border-radius: 8px; background: var(--gc, var(--g-f)); color: #1c1a24; font: italic 800 15px/1 var(--display); box-shadow: inset 0 -3px 0 #0002; }
.map-card h3 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-serial { color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.look-classic { display: flex; flex-direction: column; background: linear-gradient(175deg, color-mix(in srgb, var(--rc) 16%, var(--panel)), var(--panel) 55%); }
.look-classic .mc-art { height: 48%; flex: none; }
.look-classic .mc-body { flex: 1; }
.look-classic .mc-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, #0006, transparent 32%, transparent 70%, color-mix(in srgb, var(--panel) 70%, transparent)); }
.look-classic .mc-art-top { position: absolute; z-index: 1; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: center; }
.mc-body { display: flex; flex-direction: column; flex: 1; padding: 10px 14px 12px; min-height: 0; }
.look-classic h3 { font: 800 17px/1.2 var(--display); }
.mc-artist { margin: 1px 0 0; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-diff { display: grid; margin: 8px 0 0; font: 700 13px/1.25 var(--display); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mc-diff small { overflow: hidden; text-overflow: ellipsis; color: var(--muted); font: 500 11px/1.3 var(--body); }
.mc-pass { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--rc) 35%, var(--line)); }
.mc-pass-text { display: grid; flex: 1; min-width: 0; line-height: 1.2; }
.mc-pass strong { font: 800 16px/1.1 var(--display); color: color-mix(in srgb, var(--rc) 55%, var(--text)); }
.mc-pass small { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.look-full { display: flex; flex-direction: column; }
.look-full .mc-art { position: absolute; inset: 0; height: auto; }
.look-full .mc-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, #0006, transparent 30%, transparent 40%, #000d 70%); }
.look-full .mc-art-top { position: absolute; z-index: 1; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: center; }
.look-full .mc-body { position: absolute; top: 48%; left: 0; right: 0; bottom: 0; z-index: 1; color: #fff; text-shadow: 0 1px 6px #0009; }
.look-full h3 { font: 800 17px/1.2 var(--display); }
.look-full .mc-artist, .look-full .mc-diff small, .look-full .mc-pass small, .look-full .mc-serial { color: #ffffffc0; }
.look-full .mc-pass { border-top-color: #ffffff40; }
.look-full .mc-pass strong { color: var(--rc); }

.cards-page h1 { font-size: 32px; font-weight: 800; }
.cards-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 20px; margin-bottom: 18px; }
.cards-lead { margin-top: 4px; color: var(--muted); }
.cards-wallet { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); font-size: 14px; }
.cards-wallet strong { font: 800 20px/1 var(--display); }
.shard { width: 16px; height: 22px; background: linear-gradient(160deg, #a8f0ff, #4fc0ff 50%, #2a6ad1); clip-path: polygon(50% 0, 100% 35%, 70% 100%, 30% 100%, 0 35%); }
.cards-tabs { margin-bottom: 20px; }
.cards-tabs .count, .pack-actions .count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: var(--pink-fill); color: var(--pink-ink); font-size: 11px; }
.cards-tabs .count.quiet { background: var(--panel-3); color: var(--muted); }
.cards-toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 12px; background: var(--text); color: var(--bg); font-weight: 600; transform: translate(-50%, 20px); opacity: 0; transition: .25s; pointer-events: none; }
.cards-toast.show { transform: translate(-50%, 0); opacity: 1; }
.muted.block { display: block; }

/* opening */
.pack-open { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 30px; align-items: center; }
.pack-stage { --rc: #8a5cff; position: relative; display: grid; place-items: center; min-height: 560px; border-radius: 24px; overflow: hidden; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--rc) 22%, var(--panel)), var(--bg) 70%); }
.pack-stage.landed.r-common { --rc: #9aa7bd; } .pack-stage.landed.r-rare { --rc: #4fc0ff; } .pack-stage.landed.r-epic { --rc: #b072ff; } .pack-stage.landed.r-legendary { --rc: #ffcc33; }
.pack-rays { position: absolute; inset: -40%; opacity: 0; -webkit-mask: radial-gradient(circle, #000 15%, transparent 55%); mask: radial-gradient(circle, #000 15%, transparent 55%);
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 45%, transparent) 0 6deg, transparent 6deg 18deg); transition: opacity .6s; animation: mc-spin 18s linear infinite; }
@keyframes mc-spin { to { transform: rotate(1turn); } }
.pack-stage.landed.r-rare .pack-rays { opacity: .12; } .pack-stage.landed.r-epic .pack-rays { opacity: .25; } .pack-stage.landed.r-legendary .pack-rays { opacity: .4; }
.pack:hover, .pack:focus-visible { animation-play-state: paused; }
.pack { position: relative; width: 240px; height: 360px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; animation: mc-float 3s ease-in-out infinite; }
.pack:focus-visible { outline: 3px solid var(--pink); outline-offset: 8px; border-radius: 16px; }
@keyframes mc-float { 50% { transform: translateY(-10px) rotate(-1deg); } }
.pack-top, .pack-body { position: absolute; left: 0; right: 0; background: linear-gradient(135deg, #ff66aa, #8a5cff 60%, #4fc0ff); box-shadow: 0 20px 50px #0006, inset 0 0 0 2px #ffffff40; }
.pack-top { top: 0; height: 46px; border-radius: 14px 14px 4px 4px; clip-path: polygon(0 0, 100% 0, 100% 80%, 92% 100%, 84% 80%, 76% 100%, 68% 80%, 60% 100%, 52% 80%, 44% 100%, 36% 80%, 28% 100%, 20% 80%, 12% 100%, 4% 80%, 0 100%); }
.pack-body { top: 40px; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; overflow: hidden; border-radius: 4px 4px 14px 14px; }
.pack-body::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, #ffffff55 45%, transparent 60%) 0 0 / 250% 100%; animation: mc-shine 2.6s linear infinite; }
.pack-logo { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; background: #fff; color: #ff66aa; font: italic 800 24px/1 var(--display); box-shadow: 0 0 0 6px #ffffff40; }
.pack-title { font: 800 22px/1 var(--display); }
.pack-map { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.pack-diff { display: flex; align-items: center; gap: 6px; max-width: 100%; font-size: 13px; white-space: nowrap; }
.pack-hint { position: absolute; left: 0; right: 0; bottom: -34px; color: var(--muted); font-weight: 600; font-size: 13px; }
.pack-stage[data-phase=tearing] .pack { animation: mc-shake .35s ease-in-out 2; }
.pack-stage[data-phase=tearing] .pack-top { animation: mc-tear .6s cubic-bezier(.5, 0, .7, .4) .35s forwards; }
.pack-stage[data-phase=tearing] .pack-body { animation: mc-drop .5s ease-in .55s forwards; }
@keyframes mc-shake { 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@keyframes mc-tear { to { transform: translate(140px, -160px) rotate(38deg); opacity: 0; } }
@keyframes mc-drop { to { transform: translateY(260px); opacity: 0; } }
/* A card that turns over: the back turns to its edge, then the front comes round from the other side. Neither side is
   ever drawn mirrored, so this does not rely on backface-visibility (Firefox drops it for cards with blur effects). */
.turn-wrap { --tell: #9aa7bd; --from: 1; position: relative; }
.turn { position: relative; z-index: 1; width: 206px; aspect-ratio: 5 / 7.1; }
.turn > .card-back, .turn-front { position: absolute; inset: 0; }
.turn-front { visibility: hidden; }
.turn-front .map-card { width: 100%; }
.turned .turn-front { visibility: visible; }
.turned .turn > .card-back { visibility: hidden; }
.turning .turn { animation: card-turn .62s linear both; }
.turning .turn > .card-back { animation: turn-hide .62s linear both; }
.turning .turn-front { animation: turn-show .62s linear both; }
.charged { --from: 1.1; }
@keyframes card-turn {
  0% { transform: perspective(900px) rotateY(0) scale(var(--from)); animation-timing-function: cubic-bezier(.5, 0, 1, .5); }
  40% { transform: perspective(900px) rotateY(90deg) scale(1.08); animation-timing-function: steps(1, end); }
  40.1% { transform: perspective(900px) rotateY(-90deg) scale(1.08); animation-timing-function: cubic-bezier(0, .5, .4, 1); }
  80% { transform: perspective(900px) rotateY(10deg) scale(1.04); animation-timing-function: ease-in-out; }
  100% { transform: perspective(900px) rotateY(0) scale(1); }
}
@keyframes turn-hide { 0%, 40% { visibility: visible; } 40.1%, 100% { visibility: hidden; } }
@keyframes turn-show { 0%, 40% { visibility: hidden; } 40.1%, 100% { visibility: visible; } }
/* The back: the same for every card, osu! triangles behind a framed emblem */
.card-back { container-type: inline-size; display: block; border-radius: 16px; overflow: hidden; color: #fff; transition: box-shadow .3s;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='%23fff'%3E%3Cpath d='M20 8l14 24H6z' opacity='.08'/%3E%3Cpath d='M86 30l22 38H64z' opacity='.05'/%3E%3Cpath d='M44 70l18 31H26z' opacity='.09'/%3E%3Cpath d='M100 92l10 17H90z' opacity='.06'/%3E%3C/svg%3E") 0 0 / 120px,
    radial-gradient(circle at 50% 42%, #5a2f8f, #24133f 58%, #140a26);
  box-shadow: 0 0 0 3px #ffffff2e, 0 14px 34px #0006; }
.cb-frame { position: absolute; inset: 10px; display: grid; place-content: center; justify-items: center; gap: 16px; border-radius: 10px; box-shadow: inset 0 0 0 2px #ff66aa8c, inset 0 0 0 6px #ff66aa1a; }
.cb-frame::before, .cb-frame::after { content: ""; position: absolute; width: 9px; height: 9px; transform: rotate(45deg); border-radius: 2px; background: #ff66aa; box-shadow: 0 0 8px #ff66aa; }
.cb-frame::before { top: 11px; left: 11px; } .cb-frame::after { bottom: 11px; right: 11px; }
.cb-logo { position: relative; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: linear-gradient(145deg, #ff8cc0, #ff4f9a); font: italic 800 28px/1 var(--display); text-shadow: 0 2px 0 #c02a6a; box-shadow: 0 0 0 5px #ffffff26, 0 0 28px #ff66aa88; }
.cb-logo::before { content: ""; position: absolute; inset: -22px; border-radius: 50%; background: repeating-conic-gradient(#ff66aa70 0 4deg, transparent 4deg 12deg);
  -webkit-mask: radial-gradient(circle, transparent 63%, #000 65% 72%, transparent 74%); mask: radial-gradient(circle, transparent 63%, #000 65% 72%, transparent 74%); animation: mc-spin 24s linear infinite; }
.cb-name { color: #ffffffb3; font: 700 13px/1 var(--display); }
.cb-sheen { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 38%, #ffffff2a 48%, transparent 58%) 0 0 / 300% 100%; animation: mc-shine 4.5s linear infinite; }
@container (max-width: 200px) { .cb-logo { width: 62px; height: 62px; font-size: 21px; } .cb-frame { gap: 12px; } .cb-name { font-size: 11px; } }
/* Face down, special cards give themselves away by their glow; right before turning they shake and blaze */
.turn-wrap:not(.turned)[data-tier="1"] .card-back { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tell) 80%, #fff), 0 0 18px color-mix(in srgb, var(--tell) 45%, transparent), 0 14px 34px #0006; }
.turn-wrap:not(.turned):is([data-tier="2"], [data-tier="3"]) .card-back { animation: cb-tell 1.6s ease-in-out infinite; }
.turn-wrap:not(.turned)[data-tier="3"] .card-back { animation-duration: 1s; }
@keyframes cb-tell { 0%, 100% { box-shadow: 0 0 0 3px var(--tell), 0 0 14px color-mix(in srgb, var(--tell) 50%, transparent), 0 14px 34px #0006; }
  50% { box-shadow: 0 0 0 3px #fff, 0 0 34px var(--tell), 0 14px 34px #0006; } }
.charging .turn { animation: cb-charge .7s ease-in both; }
.charging[data-tier="3"] .turn { animation-duration: 1.15s; }
.turn-wrap.charging .card-back { animation: none; box-shadow: 0 0 0 3px #fff, 0 0 50px 8px var(--tell), 0 14px 34px #0006; }
@keyframes cb-charge { 20% { transform: scale(1.03) rotate(-1.5deg); } 35% { transform: scale(1.04) rotate(1.5deg); } 50% { transform: scale(1.05) rotate(-2.5deg); }
  62% { transform: scale(1.06) rotate(2.5deg); } 74% { transform: scale(1.07) rotate(-3deg); } 86% { transform: scale(1.08) rotate(3deg); } 100% { transform: scale(1.1); } }
/* The flare behind a special card as it lands: a ring for rare ones, rays as well from epic up */
.turn-burst { position: absolute; left: 50%; top: 50%; pointer-events: none; }
.turn-burst::before, .turn-burst::after { content: ""; position: absolute; left: 0; top: 0; border-radius: 50%; opacity: 0; transform: translate(-50%, -50%); }
.turn-burst::before { width: 260px; height: 260px; border: 4px solid var(--tell); box-shadow: 0 0 24px var(--tell), inset 0 0 24px var(--tell); }
.turn-burst::after { width: 540px; height: 540px; background: repeating-conic-gradient(color-mix(in srgb, var(--tell) 55%, transparent) 0 5deg, transparent 5deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 12%, transparent 60%); mask: radial-gradient(circle, #000 12%, transparent 60%); }
.burst .turn-burst::before { animation: burst-ring .8s cubic-bezier(.2, .8, .3, 1) .22s both; }
.burst:not([data-tier="1"]) .turn-burst::after { animation: burst-rays 1.5s ease-out .2s both; }
.burst[data-tier="3"] .turn-burst::before { border-width: 6px; animation-duration: 1.1s; }
@keyframes burst-ring { from { opacity: 1; transform: translate(-50%, -50%) scale(.3); } to { opacity: 0; transform: translate(-50%, -50%) scale(1.3); } }
@keyframes burst-rays { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(0) scale(.5); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(40deg) scale(1.1); } }
/* One pack: a pile of the other waiting packs behind it; the card rises out face down */
.pack-pile { position: absolute; left: 50%; top: 50%; width: 240px; height: 360px; margin: -180px 0 0 -120px; pointer-events: none; }
.pack-pile span { position: absolute; inset: 40px 0 0; border-radius: 6px 6px 14px 14px; background: linear-gradient(135deg, #e0559a, #6f48d6 60%, #3a9ad0);
  box-shadow: 0 14px 30px #0005, inset 0 0 0 2px #ffffff30; filter: brightness(calc(1 - var(--k) * .09));
  transform: translate(calc(var(--k) * 10px), calc(var(--k) * -8px)) rotate(calc(var(--k) * 2.5deg)); }
.pack-count { position: absolute; z-index: 2; top: 30px; right: -16px; padding: 7px 11px; border-radius: 999px; background: #fff; color: #d6337d; font: 800 15px/1 var(--display); box-shadow: 0 6px 16px #0004; transform: rotate(8deg); }
.pack-stage.all[data-phase=tearing] .pack-pile span { animation: pile-burst .7s cubic-bezier(.4, 0, .6, .5) forwards; animation-delay: calc(.2s + var(--k) * 70ms); }
@keyframes pile-burst { to { transform: translate(calc((var(--k) - 2.5) * 150px), -320px) rotate(calc(var(--k) * 30deg - 75deg)); opacity: 0; } }
.pack-stage.all[data-phase=tearing] .pack-count { animation: count-out .3s ease-in forwards; }
@keyframes count-out { to { transform: rotate(8deg) scale(0); opacity: 0; } }
.pack-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 45%, #fffa, transparent 45%); }
.pack-stage[data-phase=tearing]::after { animation: tear-flash .7s ease-out .55s; }
@keyframes tear-flash { 30% { opacity: 1; } }
.pack-reveal .turn { width: 270px; }
.pack-stage[data-phase=reveal] .pack-reveal { animation: card-rise .7s cubic-bezier(.2, .9, .3, 1.15) both; }
@keyframes card-rise { from { transform: translateY(170px) scale(.75); opacity: 0; } 25% { opacity: 1; } }
/* Many packs: dealt from the middle of the screen, then turned; legendary cards light up the page */
.pack-spread { position: relative; overflow-x: clip; }
/* Cascade: each card flies out of the pack into its place and turns over in mid-air; special ones flare as they land */
.pack-spread.cascading .turn-wrap.flying { animation: card-fly .75s cubic-bezier(.25, .9, .3, 1) var(--delay) both; }
@keyframes card-fly { from { transform: translate(var(--dx, 0), var(--dy, 60px)) rotate(var(--dr, 0)) scale(.3); opacity: 0; } 12% { opacity: 1; } }
.pack-spread.cascading .turning .turn, .pack-spread.cascading .turning .turn > .card-back, .pack-spread.cascading .turning .turn-front { animation-delay: calc(var(--delay) + 120ms); }
.pack-spread.cascading .burst .turn-burst::before { animation-delay: calc(var(--delay) + 520ms); }
.pack-spread.cascading .burst:not([data-tier="1"]) .turn-burst::after { animation-delay: calc(var(--delay) + 500ms); }
.pack-spread.shake .spread-grid { animation: spread-shake .5s ease-out; }
@keyframes spread-shake { 15% { transform: translate(-6px, 3px); } 30% { transform: translate(5px, -4px); } 45% { transform: translate(-4px, -2px); } 60% { transform: translate(3px, 3px); } 80% { transform: translate(-1px, 1px); } }
.spread-grid li.star { z-index: 1; animation: spread-star 1.8s ease-in-out infinite; }
@keyframes spread-star { 0%, 100% { filter: drop-shadow(0 0 10px #ffcc3399); } 50% { filter: drop-shadow(0 0 26px #ffcc33); transform: translateY(-4px); } }
.spread-best.r-legendary { color: #ffcc33; } .spread-best.r-epic { color: #b072ff; } .spread-best.r-rare { color: #4fc0ff; }
.spread-grid li:not(:has(.turned)):hover { transform: none; }
.pack-spread.flash::after { content: ""; position: fixed; inset: 0; z-index: 30; pointer-events: none; background: radial-gradient(circle at 50% 50%, #ffcc3355, transparent 65%); animation: spread-flash 1.1s ease-out both; }
@keyframes spread-flash { from { opacity: 0; } 15% { opacity: 1; } to { opacity: 0; } }
.spread-tally li[hidden] { display: none; }
.spread-tally li.bump { animation: tally-bump .35s ease-out; }
@keyframes tally-bump { 40% { transform: scale(1.14); } }
@media (prefers-reduced-motion: reduce) {
  .turn-wrap, .turn, .turn *, .turn-burst::before, .turn-burst::after, .pack-pile span, .pack-count, .pack-stage::after, .pack-reveal, .pack-spread::after, .spread-tally li, .spread-grid, .spread-grid li { animation: none !important; transition: none !important; }
  .cb-sheen { display: none; }
}
.pack-side h2 { font-size: 30px; font-weight: 800; }
.pack-stage.landed + .pack-side h2 { animation: mc-pop .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes mc-pop { from { transform: scale(.7); opacity: 0; } }
.pack-side .cards-lead { margin: 6px 0 18px; }
.pack-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
/* Open all: every pulled card face down, turned over one by one (rarest last). */
.pack-spread { display: grid; gap: 20px; }
.spread-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding: 18px 22px; border-radius: 20px; background: var(--panel); box-shadow: var(--shadow); }
.spread-head h2 { font-size: 26px; font-weight: 800; }
.spread-head .cards-lead { margin: 4px 0 0; }
.pack-spread.done .spread-head h2 { animation: mc-pop .5s cubic-bezier(.3, 1.6, .5, 1); }
.spread-head .pack-actions { margin: 0 0 0 auto; }
.spread-tally { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.spread-tally li { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; background: var(--panel-2); font: 700 13px/1 var(--display); }
.spread-tally li i { width: 9px; height: 9px; transform: rotate(45deg); border-radius: 2px; background: var(--rc); box-shadow: 0 0 6px var(--rc); }
.spread-tally .r-holo { --rc: #ff7ad9; } .spread-tally .r-full { --rc: #7afcff; }
.spread-grid li.gone { opacity: .45; }
.pack-odds { padding: 18px; border-radius: 18px; background: var(--panel); box-shadow: var(--shadow); }
.pack-odds h3 { margin: 0 0 6px; font-size: 15px; font-weight: 800; }
.pack-odds .muted { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.pack-odds ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.pack-odds li { display: grid; grid-template-columns: 80px 1fr 52px; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.pack-odds b { text-align: right; font-variant-numeric: tabular-nums; }
.odds-bar { height: 8px; border-radius: 999px; background: var(--panel-3); overflow: hidden; }
.odds-bar i { display: block; height: 100%; width: var(--to); min-width: 3px; border-radius: inherit; background: var(--rc); }
.pack-odds .look .odds-bar i { background: linear-gradient(90deg, #ff7ad9, #7afcff, #fff27a); }

/* collection */
.cards-sort { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.cards-sort select { padding: 7px 10px; border: 0; border-radius: 10px; background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.card-grid { list-style: none; margin: 0; padding: 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); gap: 26px 20px; justify-items: center; }
.card-grid li { position: relative; transition: transform .2s; }
.card-grid .map-card { width: 206px; }
.card-grid li:hover { transform: translateY(-4px); }
.card-hit { position: absolute; inset: 0; z-index: 8; border: 0; border-radius: 16px; background: none; cursor: pointer; }
.card-hit:focus-visible { outline: 3px solid var(--pink); outline-offset: 6px; }
.card-copies, .card-lock, .card-shown { position: absolute; z-index: 9; pointer-events: none; font: 800 12px/1 var(--display); }
.card-copies { top: -8px; right: -8px; display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 999px; background: var(--text); color: var(--bg); }
.card-lock, .card-shown { left: 50%; bottom: -10px; transform: translateX(-50%); padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.card-lock { background: var(--yellow); color: #2b2100; }
.card-shown { background: var(--pink-fill); color: var(--pink-ink); }
.card-grid.scrapping li { opacity: .75; }
.card-grid li.picked { opacity: 1; transform: scale(.94); }
.card-grid li.picked::after { content: "✓"; position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; border-radius: 16px; background: color-mix(in srgb, var(--pink-fill) 35%, transparent); color: #fff; font: 800 48px/1 var(--display); pointer-events: none; }
.card-grid li.locked { opacity: .55; }
.card-dialog { max-width: min(760px, calc(100vw - 24px)); padding: 30px; border: 0; border-radius: 24px; background: var(--panel); color: var(--text); box-shadow: 0 30px 80px #0007; }
.card-dialog[open] { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; animation: pop .25s cubic-bezier(.2, 1.4, .4, 1); }
.card-dialog::backdrop { background: #110f17bb; backdrop-filter: blur(6px); }
.card-dialog .dialog-close { position: absolute; top: 14px; right: 14px; background: var(--panel-2); color: var(--text); }
.card-dialog-card .map-card { width: 280px; }
/* someone's cards: a filter shelf over the grid */
.shelf-head { justify-content: flex-start; align-items: center; }
.shelf-head > div { margin-right: auto; }
.shelf-avatar { width: 56px; height: 56px; border-radius: 22%; object-fit: cover; background: var(--panel-2); }
.shelf-bar { position: sticky; top: 12px; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 22px; padding: 10px;
  border-radius: 16px; background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(14px); box-shadow: var(--shadow); }
.shelf-chips { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.shelf-chips button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border: 0; border-radius: 999px; background: var(--panel-2); color: var(--muted); font: 700 13px/1 var(--display); cursor: pointer; }
.shelf-chips button:hover { color: var(--text); }
.shelf-chips button small { color: var(--faint); font-weight: 600; }
.shelf-chips button i { width: 9px; height: 9px; transform: rotate(45deg); border-radius: 2px; background: var(--rc); box-shadow: 0 0 6px var(--rc); }
.shelf-chips button[aria-pressed=true] { background: color-mix(in srgb, var(--rc, var(--pink-fill)) 20%, var(--panel-2)); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--rc, var(--pink-fill)); }
.shelf-chips .r-holo { --rc: #ff7ad9; } .shelf-chips .r-full { --rc: #7afcff; }
.shelf-bar input[type=search] { flex: 1; min-width: 160px; max-width: 420px; margin-right: auto; height: 34px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--panel-2); color: var(--text); font: 500 14px var(--body); box-shadow: inset 0 0 0 1px var(--line); }
.shelf-empty { padding: 30px; text-align: center; }

/* a card, zoomed in */
.card-zoom { max-width: min(900px, calc(100vw - 24px)); padding: 34px; }
.card-zoom[open] { flex-wrap: nowrap; align-items: flex-start; gap: 36px; }
/* Firefox drops the gem blur, holo and shine blend modes and sparkle glows inside a modal with a blurred backdrop, a
   scale animation or a scroll box, so the zoom keeps to a plain dim, a fade and visible overflow (it scrolls on phones only). */
.card-zoom[open] { overflow: visible; animation: card-zoom-in .2s ease-out; }
.card-zoom::backdrop { background: #0d0b12d9; backdrop-filter: none; }
@keyframes card-zoom-in { from { opacity: 0; } }
/* Firefox also stops drawing those effects while a card is rotated in 3D, so there the foil follows the pointer without the tilt. */
@supports (-moz-appearance: none) { .map-card { transform: none; } }
.card-zoom-card { flex: none; padding: 8px; }
/* The same card as in the grid (206px wide), scaled up as a whole so the layout stays identical. */
.card-zoom-card { zoom: 1.55; }
.card-zoom-card .map-card { width: 206px; }
.card-zoom-info { display: grid; align-content: start; gap: 14px; min-width: 0; flex: 1; }
.card-zoom-kicker { display: flex; align-items: center; gap: 8px; color: var(--rc); font: 700 13px/1 var(--display); }
.card-zoom-kicker i { width: 10px; height: 10px; transform: rotate(45deg); border-radius: 2px; background: var(--rc); box-shadow: 0 0 8px var(--rc); }
.card-zoom-info h2 { font-size: 26px; font-weight: 800; line-height: 1.15; margin-top: -4px; }
.card-zoom-artist { margin-top: -10px; color: var(--muted); }
.card-zoom dl { margin: 0; }
.card-zoom dd { margin: 0; }
.card-zoom-play { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.card-zoom-play > div { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); }
.card-zoom-play dt, .card-zoom-facts dt { color: var(--faint); font-size: 12px; }
.card-zoom-play dd { font: 800 18px/1 var(--display); }
.card-zoom-play dd small { margin-left: 2px; color: var(--pink); font-size: 12px; }
.card-zoom-grade { color: var(--gc); font-style: italic !important; }
.card-zoom-facts { display: grid; gap: 0; }
.card-zoom-facts > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.card-zoom-facts dd { display: flex; align-items: center; gap: 8px; font: 600 14px/1.3 var(--display); text-align: right; }
.card-zoom-links { display: flex; flex-wrap: wrap; gap: 16px; font-size: 14px; }
.card-zoom-actions { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
@media (max-width: 760px) {
  .card-zoom { padding: 26px 18px; }
  .card-zoom[open] { flex-direction: column; align-items: center; gap: 20px; overflow: auto; }
  .card-zoom-card { zoom: 1.2; }
  .card-zoom-info { width: 100%; }
  .shelf-bar input[type=search] { max-width: none; flex-basis: 100%; }
}
.card-dialog-side { display: grid; align-content: start; gap: 10px; max-width: 330px; }
.card-dialog-side h2 { font-size: 24px; font-weight: 800; }
.card-dialog-side .muted { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.card-note { padding: 8px 12px; border-radius: 10px; background: var(--panel-2); font-size: 14px; }
.card-trade-start { display: flex; gap: 6px; align-items: center; }
.card-trade-start label { display: flex; flex: 1; align-items: center; gap: 8px; font-size: 14px; }
.card-trade-start select { flex: 1; min-width: 0; padding: 7px 10px; border: 0; border-radius: 10px; background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }

/* trades */
.trades h2 { margin: 24px 0 12px; font-size: 20px; font-weight: 800; }
.trade-start { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); }
.trade-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.trade { padding: 16px 18px; border-radius: 18px; background: var(--panel); box-shadow: var(--shadow); }
.trade:not(.trade-pending) { opacity: .7; }
.trade-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.trade-head .muted { margin-right: auto; }
.trade-status { padding: 4px 10px; border-radius: 999px; background: var(--panel-2); font-size: 13px; font-weight: 600; }
.trade-accepted .trade-status { background: color-mix(in srgb, var(--green) 20%, transparent); color: var(--green); }
.trade-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.trade-side h4 { margin: 0 0 8px; color: var(--muted); font: 700 13px/1 var(--display); }
.trade-cards { list-style: none; margin: 0; padding: 4px; display: flex; flex-wrap: wrap; gap: 12px; }
.trade-cards .map-card { width: 130px; font-size: 10px; }
.trade-cards .map-card h3 { font-size: 12px; }
.trade-cards .mc-diff, .trade-cards .mc-art-top .stars, .trade-cards .mc-artist, .trade-cards .mc-serial { display: none; }
.trade-cards .mc-body { padding: 8px 10px; } .trade-cards .mc-pass strong { font-size: 13px; }
.trade-builder h2 { margin: 22px 0 10px; font-size: 19px; font-weight: 800; }
.trade-builder-bar { position: sticky; top: 8px; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 16px; background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(10px); box-shadow: var(--shadow); }
.trade-builder-bar p { margin-right: auto; }
.card-grid.picking li { opacity: .8; }
.card-grid.picking li.picked { opacity: 1; transform: translateY(-6px); }
.card-grid.picking li.picked::after { content: "✓"; inset: auto -8px auto auto; top: -8px; width: 32px; height: 32px; border-radius: 50%; background: var(--pink-fill); color: var(--pink-ink); font-size: 16px; }
.card-showcase, .pv .card-showcase { display: flex; justify-content: center; padding: 26px 10px 40px; }
.card-showcase > div { margin: 0 -14px; transform: rotate(calc((var(--i) - 1) * 7deg)) translateY(calc((var(--i) - 1) * (var(--i) - 1) * 14px)); transition: transform .3s; }
.card-showcase > div:only-child { transform: none; }
.card-showcase > div:hover { z-index: 2; transform: translateY(-16px) scale(1.05); }
.pv-cards-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px; margin: 0; padding-top: 16px; border-top: 1px solid var(--line); }
.pv-cards-stats dt { color: var(--muted); font-size: 12px; }
.pv-cards-stats dd { margin: 0; font: 800 17px/1.2 var(--display); }
.pv-cards-link { margin-left: auto; }
@media (max-width: 900px) {
  .pack-open { grid-template-columns: 1fr; }
  .pack-stage { min-height: 470px; }
  .trade-sides { grid-template-columns: 1fr; }
  .card-showcase .map-card { width: 150px; }
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .card-grid .map-card { width: 160px; }
  .spread-head .pack-actions { margin-left: 0; }
  .spread-grid .turn { width: 160px; }
}
/* Small cards (trades, phones): tighter type so nothing gets cut off. */
@container (max-width: 200px) {
  .mc-body { padding: 7px 10px 9px; }
  .look-classic h3 { font-size: 14px; }
  .mc-artist, .mc-diff small, .mc-pass small { font-size: 10px; }
  .mc-diff { margin-top: 4px; font-size: 12px; }
  .mc-pass { gap: 7px; padding-top: 7px; }
  .mc-pass strong { font-size: 14px; }
  .mc-grade { min-width: 30px; height: 22px; font-size: 13px; }
  .mc-serial { display: none; }
  .mc-gem { font-size: 10px; padding: 2px 7px 2px 4px; }
  .mc-art-top .stars { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .map-card, .map-card::before, .pack, .pack *, .pack-rays, .card-showcase > div { animation: none !important; transition: none !important; } }

/* ---- wide page layouts: rankings hall, player directory, calculator home, play steps ---- */
.page.wide, .page.calc.calc-home { max-width: 1320px; }
.av.xs { --size: 24px; border-radius: 50%; font-size: 11px; }
.grade-tag { display: grid; place-items: center; flex: none; min-width: 36px; height: 24px; padding: 0 5px; border-radius: 7px; background: var(--gc, var(--g-f)); color: #1c1a24; font: italic 800 14px/1 var(--display); box-shadow: inset 0 -3px 0 #0002; }
.server-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.server-stats div { padding: 12px 14px; border-radius: 12px; background: var(--panel-2); }
.server-stats dt { color: var(--muted); font-size: 12px; }
.server-stats dd { margin: 2px 0 0; font: 800 22px/1.1 var(--display); font-variant-numeric: tabular-nums; }

/* rankings hall */
.hall .podiums { gap: 20px; margin-bottom: 20px; }
@media (min-width: 721px) { .hall .podium { min-height: 300px; justify-content: center; } .hall .podium.p1 { min-height: 340px; } }
.podium.open-spot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 30px 20px; background: transparent; box-shadow: inset 0 0 0 2px var(--line); text-align: center; }
.podium.open-spot:hover { transform: none; box-shadow: inset 0 0 0 2px var(--line); }
.podium.open-spot .medal { background: var(--panel-3); color: var(--muted); box-shadow: none; }
.open-title { font: 800 18px/1.2 var(--display); }
.open-spot .btn { margin-top: 6px; }
.hall-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.hall-main .board { margin-bottom: 14px; }
.hall-main .pager { margin-top: 14px; }
.play-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.feed-row { display: grid; grid-template-columns: 84px auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: 14px; background: var(--panel-2); color: inherit; text-decoration: none; transition: transform .15s, background .15s; }
.feed-row:hover { transform: translateX(4px); background: var(--panel-3); }
.feed-art, .best-play-art, .preview-cover { position: relative; overflow: hidden; }
.feed-art { height: 48px; border-radius: 10px; }
.feed-art img, .feed-art .tri-cover, .best-play-art img, .best-play-art .tri-cover, .preview-cover img, .preview-cover .tri-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feed-text { display: grid; min-width: 0; }
.feed-text strong { font: 700 15px/1.3 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-text small { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.feed-text .mod { min-width: 28px; height: 19px; padding: 0 6px; font-size: 10.5px; }
.feed-who { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.play-feed.compact .feed-row { grid-template-columns: 64px auto minmax(0, 1fr) auto; }
.play-feed.compact .feed-who { display: none; }
.play-feed.compact .feed-art { height: 40px; }
.best-play { display: grid; gap: 10px; color: inherit; text-decoration: none; }
.best-play-art { height: 130px; border-radius: 14px; transition: transform .2s; }
.best-play:hover .best-play-art { transform: scale(1.02); }
.best-play-body { display: flex; align-items: center; gap: 10px; }
.best-play-text { display: grid; flex: 1; min-width: 0; }
.best-play-text strong { font: 700 15px/1.3 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.best-play-text small { color: var(--muted); }
.best-play-who { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; }

/* player directory */
.directory { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 20px; align-items: start; }
.directory-list { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow: auto; }
.player-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.player-list .pcard { display: flex; flex-direction: row; min-height: 0; height: auto; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: 14px; background: none; box-shadow: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .15s; overflow: visible; }
.player-list .pcard:hover { transform: none; background: var(--panel-2); box-shadow: none; }
.player-list .pcard[aria-pressed=true] { background: var(--panel-3); box-shadow: inset 3px 0 0 var(--pink-fill); }
.player-list .pcard .av { margin: 0; box-shadow: none; }
.pcard-text { display: grid; flex: 1; min-width: 0; }
.pcard-text .name { font: 700 15px/1.3 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-list .presence::before { width: 9px; height: 9px; }
.player-preview { padding: 0 24px 22px; overflow: hidden; }
.preview-cover { height: 180px; margin: 0 -24px; }
.preview-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 35%, var(--panel)); }
.preview-id { position: relative; display: flex; align-items: flex-end; gap: 18px; margin-top: -64px; }
.preview-id > div { flex: 1; min-width: 0; }
.preview-id .av { box-shadow: 0 0 0 5px var(--panel), 0 8px 24px #0005; }
.preview-id h2 { font-size: 32px; font-weight: 800; overflow-wrap: anywhere; }
.preview-id p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; color: var(--muted); }
.preview-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 22px 0 6px; }
.preview-stats div { padding: 12px 14px; border-radius: 12px; background: var(--panel-2); }
.preview-stats dt { color: var(--muted); font-size: 12px; }
.preview-stats dd { margin: 2px 0 0; font: 800 20px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.preview-stats small { margin-left: 2px; color: var(--pink); font-size: 12px; }
.player-preview .card-head { margin: 16px 0 10px; }
.player-preview h3 { font-size: 16px; font-weight: 800; }

/* calculator home: the pp waiting in your plays */
.calc-home .calc-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; margin-bottom: 18px; padding: 26px 28px; }
.calc-intro { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.calc-home .page-head h1 { font-size: 36px; }
.calc-lead { margin: 4px 0 14px; color: var(--muted); }
.calc-home .map-jump { flex: none; box-sizing: border-box; width: 100%; max-width: 620px; padding: 6px 6px 6px 16px; background: var(--panel-2); }
.calc-home .map-jump input { font-size: 16px; padding: 10px 4px; }
.calc-home #jump-result:not(:empty) { margin-top: 8px; }
.calc-sum { display: grid; gap: 4px; justify-items: end; text-align: right; }
.calc-sum:empty { display: none; }
.calc-sum small { color: var(--muted); font: 700 13px var(--display); }
.calc-sum b { color: var(--lime); font: 800 54px/1 var(--display); font-variant-numeric: tabular-nums; }
.calc-sum b i { margin-left: 4px; font-size: 20px; font-style: normal; }
.calc-sum span { max-width: 340px; color: var(--faint); font-size: 13px; }
.calc-waiting-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 12px; }
.calc-waiting-head h2 { font-size: 18px; }
.calc-tabs { margin: 0; }
.calc-legend { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--muted); font-size: 12.5px; }
.calc-legend i { width: 12px; height: 8px; border-radius: 3px; }
.calc-legend .now, .calc-bars .now { background: var(--pink-fill); }
.calc-legend .fc, .calc-bars .fc { background: var(--lime); }
.calc-legend .fc { margin-left: 8px; }
.calc-waiting:has(.calc-none) .calc-legend { display: none; }
.calc-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.calc-row { display: grid; grid-template-columns: 64px minmax(0, 300px) minmax(80px, 1fr) 96px auto; align-items: center; gap: 14px; padding: 8px 12px 8px 8px;
  border-radius: 12px; background: var(--panel-2); color: inherit; text-decoration: none; transition: box-shadow .15s, background .15s; }
.calc-row:hover, .calc-row:focus-visible { box-shadow: 0 0 0 2px var(--pink-fill); }
.calc-row-art { position: relative; overflow: hidden; display: block; width: 64px; height: 44px; border-radius: 10px; }
.calc-row-art img, .calc-row-art .tri-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.calc-row-text { display: grid; gap: 3px; min-width: 0; }
.calc-row-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 15px var(--display); }
.calc-row-text small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--muted); font-size: 12.5px; }
.calc-row-text .mod { min-width: 26px; height: 18px; padding: 0 6px; font-size: 10.5px; }
.calc-row-text em { color: #ff8da0; font-style: normal; }
.calc-bars { display: flex; height: 12px; border-radius: 99px; background: var(--panel-3); overflow: hidden; }
.calc-bars i { width: var(--w); transition: width .4s; }
.calc-row-pp { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; }
.calc-row-pp b { font: 800 20px var(--display); font-variant-numeric: tabular-nums; }
.calc-gain { color: var(--lime); font: 800 13px var(--display); white-space: nowrap; }
.calc-gain.none { color: var(--faint); font-size: 12px; }
.calc-row-go { color: var(--pink); font: 700 13px var(--display); white-space: nowrap; }
@media (max-width: 1180px) { .calc-home .calc-hero { grid-template-columns: 1fr; } .calc-sum { justify-items: start; text-align: left; } }
.calc-none { text-align: center; padding: 30px 0; }

/* play steps */
.page.play-steps { max-width: 940px; }
.step-bar { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 18px; padding: 0; }
.step-bar button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); color: var(--muted); font: 700 14px/1.2 var(--display); text-align: left; cursor: pointer; }
.step-bar .step-num { flex: none; background: var(--panel-3); color: var(--text); box-shadow: none; }
.step-bar .now button { color: var(--text); box-shadow: 0 0 0 2px var(--pink-fill), var(--shadow); }
.step-bar .now .step-num { background: var(--pink-fill); color: var(--pink-ink); }
.step-bar .done .step-num { background: var(--green); color: #fff; }
.step-panel { padding: 30px; }
.step-grid { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 30px; align-items: start; }
.step-grid h2 { margin-bottom: 8px; font-size: 26px; font-weight: 800; }
.step-grid .muted { font-size: 15px; margin-bottom: 18px; }
.step-grid .address { margin-bottom: 14px; }
.step-art { display: grid; place-items: center; aspect-ratio: 1; border-radius: 30px; background: linear-gradient(135deg, var(--pink-soft), var(--panel-2)); color: var(--pink); }
.step-next { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.step-next a { display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; background: var(--panel-2); color: inherit; text-decoration: none; transition: transform .15s; }
.step-next a:hover { transform: translateX(4px); box-shadow: inset 3px 0 0 var(--pink-fill); }
.step-next span { color: var(--muted); font-size: 14px; }
.step-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 26px; }
.step-signin { margin-top: 16px; text-align: center; color: var(--muted); }
@media (max-width: 1000px) {
  .hall-cols, .directory { grid-template-columns: 1fr; }
  .directory-list { position: static; max-height: none; }
  .preview-stats { grid-template-columns: repeat(2, 1fr); }
  .feed-row { grid-template-columns: 60px minmax(0, 1fr) auto; } .feed-row .grade-tag, .feed-row .feed-who { display: none; }
}
@media (max-width: 720px) {
  .step-bar { grid-template-columns: 1fr; }
  .step-grid { grid-template-columns: 1fr; } .step-art { display: none; }
  .step-panel { padding: 20px; }
  .calc-home .page-head h1 { font-size: 30px; }
  .calc-home .calc-hero { padding: 20px; }
  .calc-sum b { font-size: 42px; }
  .calc-row { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; }
  .calc-row-art { width: 52px; height: 38px; }
  .calc-bars, .calc-row-go, .calc-legend { display: none; }
  .preview-id { flex-wrap: wrap; align-items: center; gap: 12px; margin-top: -48px; }
  .preview-id .av.xl { --size: 84px; }
  .preview-id > div { flex: 1 1 160px; }
  .preview-id h2 { font-size: 24px; }
  .preview-id .btn { width: 100%; }
  .player-preview { order: -1; }
  .directory-list { max-height: 360px; overflow: auto; }
}

/* Flip: animated or transformed children (stickers, badges, sparkles) can ignore backface-visibility in some
   browsers and show through mirrored, so each face hides its own content half-way through the turn. */
.p2-front > *, .p2-back > * { transition: visibility 0s linear .32s; }
.p2-card.flipped .p2-front > * { visibility: hidden; }
.p2-card:not(.flipped) .p2-back > * { visibility: hidden; }
.p2-card.flipped .p2-front::after { opacity: 0; }

/* more profile card effects */
.fx-weather { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; border-radius: inherit; }
.fx-flake, .fx-petal { position: absolute; top: -12px; left: var(--x); animation: pv-fall var(--t) linear var(--d) infinite; }
.fx-flake { width: calc(6px * var(--s)); height: calc(6px * var(--s)); border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff9; opacity: .85; }
.fx-petal { width: calc(11px * var(--s)); height: calc(8px * var(--s)); border-radius: 80% 0 80% 0; background: linear-gradient(135deg, #ffd1e2, #f78fb3); opacity: .9; }
@keyframes pv-fall { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(18px, 270px) rotate(180deg); } 100% { transform: translate(-8px, 560px) rotate(360deg); } }
.has-beat { border-radius: 22px; animation: pv-beat .5s ease-out infinite; }
@keyframes pv-beat { 0% { box-shadow: 0 0 0 0 var(--pink-fill); } 30% { box-shadow: 0 0 0 6px color-mix(in oklch, var(--pink-fill) 55%, transparent); } 100% { box-shadow: 0 0 0 16px transparent; } }
.has-beat.flipped { animation: none; }
.has-beat .p2-av-wrap { animation: pv-thump .5s ease-out infinite; }
@keyframes pv-thump { 15% { transform: scale(1.06); } 100% { transform: scale(1); } }
.fx-orbit { position: absolute; inset: -14px; pointer-events: none; animation: pv-spin 6s linear infinite; }
.fx-orbit i { position: absolute; left: 50%; top: 50%; font: 800 16px/1 var(--display); font-style: normal; color: var(--pink); text-shadow: 0 0 6px var(--glow);
  transform: rotate(var(--a)) translate(58px) rotate(calc(-1 * var(--a))); margin: -8px 0 0 -6px; }
.fx-scan { position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; background: repeating-linear-gradient(to bottom, #0000 0 2px, #00000026 2px 4px); mix-blend-mode: multiply; }
.fx-scan::after { content: ""; position: absolute; left: 0; right: 0; height: 30%; background: linear-gradient(to bottom, transparent, #ffffff14, transparent); animation: pv-scan 4s linear infinite; }
@keyframes pv-scan { from { top: -30%; } to { top: 100%; } }
.has-shiny .p2-title { background: linear-gradient(100deg, var(--card-ink, var(--text)) 30%, #fff6c4 45%, #ffd966 50%, var(--card-ink, var(--text)) 65%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: pv-shine 3s linear infinite; }

/* map card rarity effects */
.mc-fx { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; border-radius: inherit; }
.mc-glint { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px transparent;
  background: linear-gradient(120deg, transparent 40%, #ffffff55 50%, transparent 60%) 0 0 / 300% 300%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 3px; animation: mc-glint 4s ease-in-out infinite; }
@keyframes mc-glint { 0%, 60% { background-position: 120% 120%; } 100% { background-position: -20% -20%; } }
.mc-twinkle { position: absolute; left: var(--x); top: var(--y); width: 10px; height: 10px; background: #fff; filter: drop-shadow(0 0 4px var(--rc));
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: pv-twinkle 2.8s ease-in-out var(--d) infinite; }
.mc-ember { position: absolute; left: var(--x); bottom: -6px; width: 4px; height: 4px; border-radius: 50%; background: #ffd966; box-shadow: 0 0 6px #ffb300; animation: mc-rise 3.5s ease-in var(--d) infinite; }
@keyframes mc-rise { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(10px, -330px); opacity: 0; } }
@keyframes mc-land { 40% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .mc-fx, .fx-weather, .fx-orbit, .fx-scan::after { display: none; } .has-beat, .has-beat .p2-av-wrap, .has-shiny .p2-title { animation: none; } }

/* ---- beatmap page (beatmap-page.mjs) ---- */
.score-title a { color: inherit; text-decoration: none; } .score-title a:hover { color: var(--pink); text-decoration: underline; }
.bm-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 30px; align-items: end; min-height: 320px; padding: 30px 34px; border-radius: 24px; overflow: hidden; color: #fff; box-shadow: var(--shadow); margin-bottom: 20px; }
.bm-hero-art { position: absolute; inset: 0; }
.bm-hero-art img, .bm-hero-art .tri-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bm-hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, #0d0b14ee 25%, #0d0b1499 60%, #0d0b14cc); }
.bm-hero-body, .bm-stats { position: relative; z-index: 1; min-width: 0; }
.bm-diffs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.bm-diffs a { display: inline-flex; align-items: center; gap: 6px; max-width: 240px; padding: 5px 10px 5px 5px; border-radius: 999px; background: #ffffff1a; color: #fffc; font: 600 13px/1 var(--display); text-decoration: none; }
.bm-diffs a span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-diffs a:hover { background: #ffffff2e; color: #fff; }
.bm-diffs a[aria-current=true] { background: #fff; color: #1c1a24; }
.bm-hero h1 { font-size: 40px; font-weight: 800; text-shadow: 0 2px 16px #0008; overflow-wrap: anywhere; }
.bm-artist { margin-top: 4px; font-size: 18px; color: #ffffffd0; }
.bm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; color: #ffffffc0; }
.bm-meta strong { color: #fff; }
.bm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.bm-actions .btn.ghost { background: #ffffff1f; color: #fff; box-shadow: inset 0 0 0 1px #ffffff33; }
.bm-stats { display: grid; gap: 14px; padding: 18px; border-radius: 18px; background: #0d0b1499; backdrop-filter: blur(8px); }
.bm-numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0; text-align: center; }
.bm-numbers dt { color: #ffffffa0; font-size: 11px; } .bm-numbers dd { margin: 2px 0 0; font: 800 17px/1.1 var(--display); }
.bm-attrs { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.bm-attrs li { display: grid; grid-template-columns: 100px 1fr 34px; align-items: center; gap: 10px; font-size: 13px; }
.bm-attrs span { color: #ffffffb0; } .bm-attrs b { text-align: right; font-variant-numeric: tabular-nums; }
.bm-bar { height: 6px; border-radius: 999px; background: #ffffff26; overflow: hidden; }
.bm-bar i { display: block; height: 100%; width: var(--to); border-radius: inherit; background: var(--pink-fill); }
.bm-board .card-head { margin-bottom: 12px; }
.bm-filter { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }
.bm-filter button { padding: 6px 12px; border: 0; border-radius: 999px; background: var(--panel-2); color: var(--text); font: 600 13px/1 var(--display); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.bm-filter button[aria-pressed=true] { background: var(--pink-fill); color: var(--pink-ink); box-shadow: none; }
.bm-mine-note { margin-bottom: 12px; padding: 10px 14px; border-radius: 12px; background: var(--pink-soft); }
.bm-head, .bm-row { display: grid; grid-template-columns: 52px 44px minmax(160px, 1fr) 110px 80px 80px 56px 120px 80px 100px; align-items: center; gap: 10px; }
.bm-head { padding: 0 14px 8px; color: var(--muted); font: 700 12px/1 var(--display); }
.bm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.bm-row { padding: 8px 14px; border-radius: 12px; background: var(--panel-2); font-variant-numeric: tabular-nums; }
.bm-row.top { box-shadow: inset 4px 0 0 var(--mc); } .bm-row.t1 { --mc: var(--gold, #ffcc33); background: color-mix(in srgb, #ffcc33 8%, var(--panel-2)); } .bm-row.t2 { --mc: var(--silver, #c8d2e0); } .bm-row.t3 { --mc: var(--bronze, #d79a5e); }
.bm-row.mine { box-shadow: inset 0 0 0 2px var(--pink-fill); }
.bm-place { font: italic 800 17px/1 var(--display); color: var(--muted); } .bm-row.t1 .bm-place { color: #e0a800; }
.bm-player { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; }
.bm-name { display: flex; align-items: center; gap: 6px; min-width: 0; } .bm-player strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-player:hover strong { color: var(--pink); }
.bm-cell { font-weight: 600; white-space: nowrap; } .bm-score { font-weight: 800; }
.bm-fc { margin-left: 5px; padding: 2px 5px; border-radius: 5px; background: var(--lime); color: #1c2400; font: 800 10px/1 var(--display); vertical-align: 2px; }
.bm-mods { display: flex; gap: 2px; } .bm-mods .mod { min-width: 28px; height: 19px; padding: 0 6px; font-size: 10.5px; }
.bm-pp .pp-line, .bm-pp { display: flex; align-items: baseline; gap: 2px; } .bm-pp strong { font: 800 16px/1 var(--display); } .bm-pp small { font-size: 11px; }
.bm-date { color: var(--muted); font-weight: 500; font-size: 13px; }
.bm-note { margin-top: 12px; }
@media (max-width: 1100px) {
  .bm-head, .bm-row { grid-template-columns: 44px 40px minmax(0, 1fr) 100px 76px 90px; }
  .bm-row .md-hide, .bm-head .md-hide { display: none; }
}
@media (max-width: 900px) { .bm-hero { grid-template-columns: 1fr; padding: 22px 18px; } .bm-hero h1 { font-size: 30px; } }
@media (max-width: 600px) {
  .bm-head { display: none; }
  .bm-row { grid-template-columns: 34px 36px minmax(0, 1fr) auto; gap: 8px; }
  .bm-row .bm-cell:not(.bm-pp) { display: none; }
  .bm-player .av { --size: 28px; }
}

.combo-note { margin: -6px 0 0; padding: 9px 12px; border-radius: 10px; background: var(--panel-2); color: var(--muted); font-size: 13px; line-height: 1.4; }

/* ---- calculator: studio layout ---- */
.page.calc:not(.calc-home) { max-width: 1400px; }
.studio-hero { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 24px; min-height: 230px; padding: 26px 30px; border-radius: 24px; overflow: hidden; color: #fff; box-shadow: var(--shadow); }
.studio-art { position: absolute; inset: 0; }
.studio-art img, .studio-art .tri-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.studio-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, #0d0b14f0, #0d0b1466 75%); }
.studio-body, .studio-actions { position: relative; z-index: 1; min-width: 0; }
.studio-body h2 { margin-top: 12px; font-size: 40px; font-weight: 800; text-shadow: 0 2px 14px #0008; overflow-wrap: anywhere; }
.studio-body .map-artist { margin-top: 4px; color: #ffffffc8; }
.studio-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; color: #ffffffc8; }
.studio-meta .map-version { color: #fff; font-weight: 700; }
.studio-diffs { display: flex; flex-wrap: wrap; gap: 6px; }
.studio-diffs:empty { display: none; }
.studio-diffs a { display: inline-flex; align-items: center; gap: 6px; max-width: 230px; padding: 5px 10px 5px 5px; border-radius: 999px; background: #ffffff1c; color: #fffc; font: 600 13px/1 var(--display); text-decoration: none; }
.studio-diffs a span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-diffs a:hover { background: #ffffff30; color: #fff; }
.studio-diffs a[aria-current=true] { background: #fff; color: #1c1a24; }
.studio-actions { display: flex; gap: 8px; }
.studio-actions .btn.ghost { background: #ffffff1f; color: #fff; box-shadow: inset 0 0 0 1px #ffffff33; }
.studio-grid { display: grid; grid-template-columns: 370px minmax(0, 1fr) 340px; gap: 18px; margin-top: 18px; align-items: start; }
.studio-title { margin-bottom: 4px; font-size: 18px; font-weight: 800; }
.studio-grid .mod-grid { grid-template-columns: repeat(4, 1fr); }
.studio-grid .calc-result { position: sticky; top: 20px; }
.studio-grid .result-main { padding: 22px 24px; border-radius: 18px; background: linear-gradient(120deg, var(--pink-fill), #9a5cff); color: #fff; box-shadow: 0 10px 30px #ff66aa40; }
.studio-grid .result-main small { color: #ffffffd0; }
.studio-grid .result-main strong { font-size: 64px; }
.result-pair.three { grid-template-columns: repeat(3, 1fr); }
.studio-grade { color: var(--yellow); font-style: italic; }
.studio-sub { margin: 4px 0 -6px; color: var(--muted); font-size: 13px; font-weight: 700; }
.studio-curve svg { display: block; width: 100%; height: auto; }
.studio-curve .grid { stroke: var(--line); }
.studio-curve text { fill: var(--muted); font: 600 11px var(--display); text-anchor: middle; }
.studio-curve .area { fill: color-mix(in srgb, var(--pink-fill) 18%, transparent); }
.studio-curve .line { fill: none; stroke: var(--pink-fill); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.studio-curve .marker { stroke: var(--text); stroke-dasharray: 3 4; opacity: .5; }
.studio-curve .dot { fill: var(--pink-fill); stroke: var(--panel); stroke-width: 3; }
.studio-curve .label { fill: var(--text); font: 800 14px var(--display); text-anchor: start; }
.studio-attrs th, .studio-attrs td { padding-block: 9px; }
.studio-attrs .bar-col { width: 34%; }
.studio-bar { position: relative; height: 8px; border-radius: 999px; background: var(--panel-3); overflow: hidden; }
.studio-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--to); border-radius: inherit; transition: width .25s; }
.studio-bar .base { background: var(--muted); opacity: .35; }
.studio-bar .now { background: var(--blue); }
.studio-bar .now.up { background: var(--red); }
.studio-bar .now.down { background: var(--lime); }
@media (max-width: 1250px) {
  .studio-grid { grid-template-columns: 360px minmax(0, 1fr); }
  .studio-grid .attr-card { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .studio-grid { grid-template-columns: 1fr; }
  .studio-grid .calc-result { position: static; order: -1; }
  .studio-body h2 { font-size: 28px; }
  .studio-hero { padding: 20px; }
}

/* ---- profile pets (pets-kit.mjs) ---- */
.pixel-pet { image-rendering: pixelated; overflow: visible; filter: drop-shadow(0 3px 0 #0004); }
.pet-walk { position: absolute; z-index: 3; left: 380px; right: 30px; bottom: 6px; height: 100px; pointer-events: none; }
.pet-buddy { position: absolute; left: 0; bottom: 0; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; animation: pet-walk 22s linear infinite; }
.pet-buddy .walker { display: block; animation: pet-step .45s steps(2) infinite, pet-face 22s steps(1) infinite; }
@keyframes pet-walk { 0% { left: 0; } 42% { left: calc(100% - 84px); } 50% { left: calc(100% - 84px); } 92% { left: 0; } 100% { left: 0; } }
@keyframes pet-step { 50% { transform: translateY(-3px); } }
@keyframes pet-face { 0%, 46% { scale: 1 1; } 46.01%, 96% { scale: -1 1; } }
.pet-buddy:hover, .pet-buddy:focus-visible { animation-play-state: paused; }
.pet-buddy:hover .walker, .pet-buddy:focus-visible .walker { animation-play-state: paused; }
.pet-buddy.happy .walker { animation: pet-hop .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pet-hop { 40% { transform: translateY(-22px); } }
.pet-walk.still .pet-buddy { left: auto; right: 0; animation: none; }
.pet-walk.still .walker { animation: none; }
.pet-name { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); padding: 3px 9px; border-radius: 999px; background: var(--panel-2); color: var(--text); font: 700 11px/1 var(--display); white-space: nowrap; opacity: 0; transition: opacity .2s; }
.pet-buddy:hover .pet-name, .pet-buddy:focus-visible .pet-name { opacity: 1; }
.pet-hearts { position: absolute; left: 50%; top: 0; }
.pet-hearts i { position: absolute; color: #ff5c9a; font: normal 22px/1 sans-serif; opacity: 0; animation: pet-heart 1.1s ease-out var(--d) forwards; }
@keyframes pet-heart { 0% { opacity: 0; transform: translate(0, 0) scale(.5); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), -70px) scale(1.2); } }
.pet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; margin: 10px 0; }
.pet-grid.off { opacity: .55; }
.pet-tile { position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 4px 6px; border: 0; border-radius: 12px; background: var(--panel-2); color: var(--text); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); font: inherit; }
.pet-tile:hover:not(:disabled) { background: var(--panel-3); }
.pet-tile.chosen { box-shadow: inset 0 0 0 2px var(--pink-fill); background: var(--soft); }
.pet-tile.locked .pixel-pet { filter: brightness(0) opacity(.3); }
.pet-tile.shop .pixel-pet { filter: grayscale(.5) opacity(.8); }
.pet-tile:disabled { cursor: not-allowed; }
.pet-tile-name { font: 700 12px/1.2 var(--display); }
.pet-tile-tag { display: inline-flex; align-items: center; gap: 3px; min-height: 14px; color: var(--muted); font: 700 11px/1 var(--display); }
.pet-tile.chosen .pet-tile-tag { color: var(--pink); }
.stardust-icon { display: inline-block; vertical-align: -2px; }
@media (max-width: 900px) { .pet-walk { left: 20px; } }

/* your view / visitor view on your own profile */
.view-toggle { display: inline-flex; gap: 2px; padding: 3px; margin-right: auto; border-radius: 999px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.view-toggle button { padding: 7px 13px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 700 13px/1 var(--display); cursor: pointer; }
.view-toggle button[aria-pressed=true] { background: var(--pink-fill); color: var(--pink-ink); }
.visitor-preview .score-pin, .visitor-preview .score-whatif { display: none; }
.visitor-preview .p5-hero { box-shadow: 0 0 0 2px var(--pink-fill), var(--shadow); }

/* rankings podium with player cards */
.podiums .podium.podium-card { display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 0; padding: 0; background: none; box-shadow: none; overflow: visible; perspective: 1200px; }
.podium.podium-card:hover { transform: translateY(-6px); box-shadow: none; }
.podium-card-wrap { display: block; width: min(100%, 250px); }
.podium-card.p1 .podium-card-wrap { width: min(100%, 290px); }
.podium-card-wrap .p2-tilt { pointer-events: auto; }
.podium-card-wrap .p2-back { display: none; }
.podium-card .medal { position: relative; inset: auto; order: -1; margin-bottom: -2px; }
.podium-card .podium-name { margin: 2px 0 0; }
.podium-card.p1 .p2-face { box-shadow: 0 0 0 var(--frame-w, 6px) var(--frame, var(--pink-fill)) inset, 0 24px 60px #0006, 0 0 40px #ffcc3355; }
@media (min-width: 721px) { .hall .podium.podium-card, .hall .podium.podium-card.p1 { min-height: 0; } }
@media (max-width: 720px) {
  .podiums.count-3 { gap: 26px; }
  .podium-card-wrap, .podium-card.p1 .podium-card-wrap { width: min(78vw, 260px); }
}
.podium-card .podium-value { flex-direction: row; align-items: baseline; }

/* The player card scales its contents with its width (podium cards are narrower than the profile one). */
.p2-tilt { container-type: inline-size; }
@container (max-width: 300px) {
  .p2-face { padding: 10px; }
  .p2-art { height: 38%; }
  .p2-card .av.p2-av { --size: 66px; }
  .p2-av-wrap { margin-top: -33px; }
  .p2-title { margin-top: 4px; font-size: 18px; }
  .p2-sub { font-size: 11.5px; }
  .p2-stats { margin-bottom: 7px; } .p2-stats dd { font-size: 14px; } .p2-stats dt { font-size: 10px; }
  .p2-fav { padding: 7px 10px; font-size: 11.5px; } .p2-fav strong { font-size: 13px; } .p2-fav span { font-size: 10px; }
  .p2-fav .pv-bar { height: 5px; margin: 3px 0 1px; }
  .p2-rarity { font-size: 10.5px; padding: 3px 8px; }
  .sticker { font-size: 24px; }
}

/* Banner crop: compact places (the account menu, in-game user cards) show the middle 2.8:1, i.e. 74.7% of the 3.75:1 banner. */
.crop-stage { position: relative; }
.crop-card-guide { position: absolute; top: 0; bottom: 0; left: 12.65%; width: 74.7%; pointer-events: none; border: 2px dashed #ffffffd0; border-radius: 10px; box-shadow: 0 0 0 100vmax #0004; }
.crop-stage { overflow: hidden; }
.crop-card-guide span { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); padding: 3px 9px; border-radius: 999px; background: #000a; color: #fff; font: 700 11px/1 var(--display); white-space: nowrap; }

/* crop tools */
.crop-zoom { grid-template-columns: auto 1fr 52px; }
.crop-zoom output { color: var(--text); font: 700 13px var(--display); text-align: right; font-variant-numeric: tabular-nums; }
.crop-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 24px 0; }
.crop-tool { display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 10px; border: 0; border-radius: 10px; background: var(--panel-2); color: var(--text); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); font: 700 13px var(--display); }
.crop-tool:hover { background: var(--panel-3); }
.crop-tool[aria-pressed=true] { background: var(--pink-fill); color: var(--pink-ink); box-shadow: none; }
.crop-fill { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--muted); font: 600 12px var(--display); }
.crop-fill[hidden] { display: none; }
.crop-fill > span { margin-right: 4px; }
.crop-fill button { padding: 6px 10px; border: 0; border-radius: 999px; background: var(--panel-2); color: var(--text); font: 600 12px var(--display); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.crop-fill button[aria-pressed=true] { background: var(--pink-fill); color: var(--pink-ink); box-shadow: none; }
.recrop-dialog { width: min(440px, calc(100vw - 24px)); }
.recrop-choices { display: grid; gap: 10px; padding: 22px 24px 24px; }
.recrop-choices .btn, .recrop-choices .dialog-submit { min-height: 46px; }
@media (max-width: 600px) { .crop-tools { margin-inline: 16px; } .crop-fill { margin-left: 0; } }
.crop-step { margin-left: 8px; padding: 3px 9px; border-radius: 999px; background: #ffffff2e; color: #fff; font: 700 12px/1 var(--display); vertical-align: 3px; }

/* ---- home (home-page.mjs) ---- */
.home-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 30px; align-items: stretch; min-height: 320px; padding: 44px 46px; border-radius: 28px; overflow: hidden; color: #fff; background: var(--hero); box-shadow: var(--shadow); }
.home-hero-art { position: absolute; inset: 0; } .home-hero-art svg { width: 100%; height: 100%; }
.home-hero-art path { fill: #fff; fill-opacity: .1; animation: home-drift 14s linear infinite; } .home-hero-art path:nth-child(odd) { animation-duration: 20s; animation-delay: -6s; }
@keyframes home-drift { from { transform: translateY(40px); opacity: 0; } 20%, 80% { opacity: 1; } to { transform: translateY(-80px); opacity: 0; } }
.home-hero-body, .home-hero-side { position: relative; z-index: 1; }
.home-kicker { margin-bottom: 6px; color: #ffffffc8; font: 700 14px var(--display); }
.home-hero h1 { max-width: 640px; font-size: 52px; font-weight: 800; line-height: 1.05; text-shadow: 0 4px 24px #3a1a5a55; }
.home-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.home-actions .btn.primary { background: #fff; color: #c2387a; box-shadow: 0 6px 20px #0003; }
.home-actions .btn.ghost { background: #ffffff26; color: #fff; box-shadow: inset 0 0 0 1px #ffffff55; }
.home-hero-side { display: grid; align-content: start; gap: 14px; padding: 20px; border-radius: 20px; background: #ffffff1f; backdrop-filter: blur(10px); }
.home-online { font-weight: 700; } .home-online i { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: #7cff4f; box-shadow: 0 0 10px #7cff4f; }
.home-hero-body { display: flex; flex-direction: column; }
.hero-pick { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 18px; align-items: center; max-width: 720px; margin-top: auto; padding: 12px; border-radius: 20px; background: #ffffff1f; backdrop-filter: blur(10px); }
.home-actions + .hero-pick { margin-top: 30px; }
.pick-art { position: relative; display: block; height: 118px; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 24px #0003; }
.pick-art img, .pick-art .tri-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.pick-art:hover img { transform: scale(1.05); }
.pick-info { display: grid; gap: 3px; min-width: 0; color: #ffffffd8; font-size: 13.5px; }
.pick-info small { color: #ffffffb0; font-weight: 700; }
.pick-info strong { overflow: hidden; color: #fff; font: 800 19px/1.2 var(--display); text-overflow: ellipsis; white-space: nowrap; }
.pick-info > span { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pick-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pick-actions .btn { background: #ffffff26; color: #fff; box-shadow: inset 0 0 0 1px #ffffff40; }
.pick-actions .btn:first-child { background: #fff; color: #c2387a; box-shadow: none; }
.hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.hero-stats div { padding: 10px 12px; border-radius: 12px; background: #ffffff1a; }
.hero-stats dt { color: #ffffffc0; font-size: 12px; }
.hero-stats dd { margin: 2px 0 0; font: 800 21px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.hero-streak { font-size: 13.5px; color: #ffffffe0; }
section.home-topmap { grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: center; }
.home-topmap .random-art.small { height: 76px; margin: 0; }
.home-topmap > div { display: grid; gap: 2px; min-width: 0; } .home-topmap h2 { margin-bottom: 4px; font-size: 15px; color: var(--muted); }
.home-topmap strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-leader { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid #ffffff33; color: #fff; text-decoration: none; }
.home-leader span { display: grid; } .home-leader small { color: #ffffffd0; } .home-leader strong { font: 800 18px var(--display); } .home-leader em { font-style: normal; font-weight: 700; }
.home-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; margin-top: 20px; align-items: start; }
.home-side { display: grid; gap: 20px; }
.home-best h2 { margin-bottom: 12px; }
.home .feed-row { grid-template-columns: 84px auto minmax(0, 1fr) auto auto 76px; }
.feed-when { color: var(--muted); font-size: 12px; text-align: right; }
.home-random { display: grid; }
.random-art { position: relative; display: block; width: 100%; height: 140px; margin-bottom: 8px; border-radius: 14px; overflow: hidden; }
.random-art.small { height: 100px; }
.random-art img, .random-art .tri-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.random-art:hover img { transform: scale(1.04); }
.home-random strong, .home-topmap strong { font: 800 17px/1.25 var(--display); }
.home-random small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.random-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.home-week-line { padding: 0 6px; color: var(--muted); font-size: 14px; }
.home-fact { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--pink-soft); font-size: 14px; }
.home-topmap { display: grid; gap: 2px; }
.menu-start { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: default; }
.menu-start select { padding: 6px 8px; border: 0; border-radius: 9px; background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); font: 600 13px var(--body); }

/* ---- insights (insights-page.mjs) ---- */
.ins-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.ins-kpis .card { display: grid; gap: 2px; padding: 16px 18px; } .ins-kpis small { color: var(--muted); font-size: 12px; }
.ins-kpis strong { font: 800 28px/1.1 var(--display); font-variant-numeric: tabular-nums; } .ins-kpis span { color: var(--pink); font-size: 12px; font-weight: 600; }
.ins-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.ins-grid h2, .ins-ml h2 { margin-bottom: 12px; font-size: 18px; font-weight: 800; }
.ins-grades { grid-row: span 2; }
.ins-radar { display: grid; place-items: center; } .ins-radar.small svg { max-width: 280px; }
.radar { width: 100%; max-width: 340px; height: auto; overflow: visible; }
.radar .ring { fill: none; stroke: var(--line); } .radar .spoke { stroke: var(--line); }
.radar .shape { fill: color-mix(in srgb, var(--c) 22%, transparent); stroke: var(--c); stroke-width: 2.5; stroke-linejoin: round; transform-origin: center; transform-box: view-box; animation: ins-bloom .8s cubic-bezier(.3, 1.4, .6, 1) both; animation-delay: calc(var(--i) * .12s); }
@keyframes ins-bloom { from { transform: scale(0); opacity: 0; } }
.radar text { fill: var(--muted); font: 700 12px var(--display); text-anchor: middle; }
.ins-legend { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 6px; }
.ins-legend li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--panel-2); box-shadow: inset 3px 0 0 var(--c); font-size: 13px; }
.ins-legend a { color: inherit; font-weight: 700; text-decoration: none; } .ins-legend span { color: var(--muted); }
.ins-clock { display: grid; grid-template-columns: repeat(24, 1fr); align-items: end; gap: 3px; height: 140px; }
.ins-clock i { height: var(--to); min-height: 3px; border-radius: 4px 4px 0 0; background: linear-gradient(to top, var(--pink-fill), #b38bff); }
.ins-clock-axis { display: flex; justify-content: space-between; margin: 6px 0 10px; color: var(--muted); font-size: 11px; }
.ins-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ins-bars li { display: grid; grid-template-columns: 88px 1fr 52px; align-items: center; gap: 10px; font-size: 13px; }
.ins-bars span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ins-bars b { text-align: right; font-variant-numeric: tabular-nums; }
.ins-bars div { height: 10px; border-radius: 999px; background: var(--panel-3); overflow: hidden; }
.ins-bars i { display: block; height: 100%; width: var(--to); border-radius: inherit; background: var(--pink-fill); animation: pv-grow 1s cubic-bezier(.2, .8, .2, 1) both; }
.ins-grid .muted { margin-top: 10px; }
.ins-maps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ins-maps a { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.ins-maps .feed-art { height: 40px; } .ins-maps a > span:nth-child(2) { display: grid; min-width: 0; }
.ins-maps strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ins-maps small { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.ins-records { grid-column: 1 / -1; } .ins-records dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 0; }
.ins-records dl > div { padding: 12px 14px; border-radius: 12px; background: var(--panel-2); } .ins-records dt { color: var(--muted); font-size: 12px; }
.ins-records dd { display: grid; margin: 2px 0 0; } .ins-records dd a { color: inherit; font: 800 18px var(--display); text-decoration: none; } .ins-records dd small { color: var(--muted); }
.ins-facts ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .ins-facts li { padding: 10px 12px; border-radius: 12px; background: var(--panel-2); font-size: 14px; }
.ins-ml { margin-top: 18px; }
.ins-catalog { margin-top: 18px; }
.ins-catalog h2 { margin-bottom: 12px; font-size: 18px; font-weight: 800; }
.ins-catalog > .muted { margin-top: 12px; font-size: 13px; }
.cat-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cat-rows li { display: grid; grid-template-columns: 130px minmax(0, 1fr) 64px; grid-template-rows: auto auto; align-items: center; gap: 4px 14px; }
.cat-mode { display: inline-flex; align-items: center; gap: 8px; font: 700 15px/1 var(--display); }
.cat-rows li.current .cat-mode { color: var(--pink); }
.cat-bar { height: 10px; border-radius: 999px; background: var(--panel-3); overflow: hidden; }
.cat-bar i { display: block; height: 100%; width: var(--to); border-radius: inherit; background: linear-gradient(90deg, #ff66aa, #b05cff); animation: pv-grow 1s cubic-bezier(.2, .8, .2, 1) both; }
.cat-rows b { text-align: right; font: 800 16px/1 var(--display); font-variant-numeric: tabular-nums; }
.cat-rows small { grid-column: 2 / 4; color: var(--muted); font-size: 12px; }
.cat-rows li.counting .cat-bar i { background: repeating-linear-gradient(-45deg, var(--faint) 0 6px, transparent 6px 12px); opacity: .7; animation: cat-count 1s linear infinite; background-size: 17px 17px; }
.cat-rows li.counting b { color: var(--muted); font-size: 14px; }
@keyframes cat-count { to { background-position: 17px 0; } }
@media (prefers-reduced-motion: reduce) { .cat-rows li.counting .cat-bar i { animation: none; } }
@media (max-width: 640px) { .cat-rows li { grid-template-columns: 100px minmax(0, 1fr) 54px; } }
.ml-lead { margin: -4px 0 14px; font-size: 15px; }
.ml-steps { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; counter-reset: none; }
.ml-steps li { position: relative; display: grid; gap: 6px; align-content: start; padding: 14px; border-radius: 14px; background: var(--panel-2); font-size: 13.5px; line-height: 1.45; }
.ml-steps li:not(:last-child)::after { content: "→"; position: absolute; right: -10px; top: 18px; z-index: 1; color: var(--pink); font-weight: 800; }
.ml-steps b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--pink-fill); color: var(--pink-ink); font: 800 13px var(--display); }
.ml-steps strong { font: 800 15px var(--display); } .ml-steps span { color: var(--muted); }
.ml-rebuild { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.ml-rebuild .muted { font-size: 13px; }
.ins-radar .shape[style*="--faint"] { fill: none; stroke-dasharray: 4 4; }
/* what the finder learned about you: verdicts first, then the radar and "You play", details folded */
.ml-head { display: grid; gap: 18px; }
.ml-head h3 { margin-bottom: 10px; font: 800 15px var(--display); }
.ml-verdicts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ml-verdict { display: grid; gap: 4px; align-content: start; padding: 16px 18px; border-radius: 14px; background: var(--panel-2); }
.ml-verdict span { color: var(--muted); font: 700 12px/1 var(--display); text-transform: uppercase; letter-spacing: .06em; }
.ml-verdict b { font: 800 26px/1.1 var(--display); } .ml-verdict small { color: var(--muted); font-size: 13px; }
.ml-verdict.strong b { color: var(--green); } .ml-verdict.weak b { color: var(--pink); } .ml-verdict.none b { color: var(--muted); font-size: 22px; }
.ml-head-body { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 28px; align-items: center; }
.ml-legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; color: var(--muted); font-size: 12.5px; }
.ml-legend.left { justify-content: flex-start; margin-top: 10px; }
.ml-dash, .ml-solid { display: inline-block; width: 18px; border-top: 2px dashed var(--faint); } .ml-solid { border-top: 2px solid var(--pink-fill); }
.ml-tick-key { display: inline-block; width: 2px; height: 12px; border-radius: 2px; background: var(--text); opacity: .6; }
.ml-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ml-tile { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--panel-2); }
.ml-tile span { color: var(--muted); font: 700 12px/1 var(--display); } .ml-tile b { font: 800 19px/1 var(--display); }
.ml-scale { position: relative; height: 6px; border-radius: 99px; background: var(--panel-3); }
.ml-fill { position: absolute; top: 0; bottom: 0; left: var(--from); right: calc(100% - var(--to)); min-width: 6px; border-radius: 99px; background: var(--pink-fill); }
.ml-tick { position: absolute; top: -4px; bottom: -4px; left: var(--at); width: 2px; border-radius: 2px; background: var(--text); opacity: .6; }
.ml-mods { display: flex; gap: 10px; margin-top: 12px; }
.ml-mod { flex: 1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); }
.ml-mod b { font: 800 14px var(--display); } .ml-mod small { color: var(--muted); font-weight: 600; }
.ml-mod i { height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--pink-fill) var(--to), var(--panel-3) var(--to)); }
.ml-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.ml-foot > span { flex: 1 1 260px; } .ml-foot .ml-rebuild { margin-top: 0; }
.ml-more { flex-basis: 100%; } .ml-more summary { cursor: pointer; color: var(--pink); font-weight: 600; }
.ml-rowhead, .ml-rows li { display: grid; grid-template-columns: 110px 1fr 200px; align-items: center; gap: 14px; }
.ml-rowhead { margin: 12px 0 4px; color: var(--faint); font-size: 12px; } .ml-rowhead span:nth-child(2) { text-align: center; } .ml-rowhead span:last-child { text-align: right; }
.ml-rows { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.ml-rows b { color: var(--muted); font: 700 14.5px var(--display); } .ml-rows li.sure b { color: var(--text); }
.ml-dotline { position: relative; height: 4px; border-radius: 99px; background: var(--panel-3); }
.ml-dotline::before { content: ""; position: absolute; left: 50%; top: -5px; bottom: -5px; width: 2px; background: var(--faint); }
.ml-dotline i { position: absolute; left: var(--at); top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--pink-fill); box-shadow: 0 0 0 3px var(--panel); }
.ml-effect { text-align: right; font: 800 15px var(--display); } .ml-effect.up { color: var(--green); } .ml-effect.down { color: var(--pink); }
.ml-effect em { color: var(--faint); font: 500 12.5px var(--body); font-style: normal; }
.ml-small { font-size: 12.5px; }
@media (max-width: 1100px) { .ins-kpis { grid-template-columns: repeat(3, 1fr); } .ins-grid { grid-template-columns: 1fr 1fr; } .ml-steps { grid-template-columns: repeat(3, 1fr); } .ml-steps li:nth-child(3)::after { display: none; } .ml-head-body { grid-template-columns: 1fr; } }
@media (max-width: 1000px) { .home-hero, .home-cols { grid-template-columns: 1fr; } .home .feed-row { grid-template-columns: 60px minmax(0, 1fr) auto; } .home .feed-row .grade-tag, .home .feed-who, .feed-when { display: none; } }
@media (max-width: 720px) {
  .rail-nav a[data-nav=insights], .rail-nav a[data-nav=calc] { display: none; }
  .home-hero { padding: 26px 22px; } .home-hero h1 { font-size: 34px; } .hero-pick { grid-template-columns: 1fr; }
  .ins-kpis, .ins-grid, .ml-steps, .ml-verdicts { grid-template-columns: 1fr; } .ml-tiles { grid-template-columns: 1fr 1fr; } .ml-rowhead { display: none; } .ml-rows li { grid-template-columns: 84px 1fr 76px; gap: 10px; } .ml-effect em { font-size: 11px; } .ins-grades, .ins-records { grid-row: auto; grid-column: auto; } .ml-steps li::after { display: none; }
}

/* records: the player first */
.records { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.record { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: var(--panel-2); }
.record-who { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.record-who > span { display: grid; min-width: 0; } .record-who small { color: var(--muted); font: 700 12px var(--display); }
.record-who strong { font: 800 19px/1.2 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-who:hover strong { color: var(--pink); }
.record-what { position: relative; display: grid; gap: 2px; padding: 12px; border-radius: 12px; overflow: hidden; color: #fff; text-decoration: none; min-height: 84px; align-content: end; }
.record-art { position: absolute; inset: 0; } .record-art img, .record-art .tri-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.record-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, #0d0b14e6, #0d0b1433); }
.record-value, .record-what small { position: relative; } .record-value { font: 800 24px/1 var(--display); } .record-what small { color: #ffffffc8; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.osu-link { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 16px; padding: 14px 18px; border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); }
.osu-link p { margin: 0; flex: 1 1 280px; font-size: 14px; } .osu-link-form { display: flex; gap: 6px; flex: 1 1 320px; }
.osu-link-form input { flex: 1; min-width: 0; padding: 8px 12px; border: 0; border-radius: 10px; background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); font: 14px var(--body); }
.osu-link-status { flex-basis: 100%; color: var(--muted); } .osu-link-status:empty { display: none; }
.osu-link.linked { padding: 10px 16px; } .osu-link-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff66aa; box-shadow: 0 0 8px #ff66aa; }
.from-osu { display: block; color: var(--pink); font: 700 11px var(--display); }

/* ---- beatmap browser ---------------------------------------------------------------------- */
.browse-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.browse-bar .search { max-width: none; padding: 9px 16px; }
.browse-select { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 14px; background: var(--panel); box-shadow: var(--shadow), inset 0 0 0 1px var(--line); color: var(--muted); font-size: 14px; }
.browse-select select { border: 0; background: var(--panel-2); color: var(--text); padding: 7px 10px; border-radius: 10px; font: inherit; font-weight: 600; }
/* Filters live in a panel beside the results (a bottom sheet on phones). Edits are staged until "Show results". */
.browse-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 22px; align-items: start; }
.browse-main { min-width: 0; }
.browse-rail { position: sticky; top: 16px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: calc(100vh - 32px); padding: 0; overflow: hidden; }
.browse-rail-head { display: flex; align-items: center; gap: 10px; padding: 18px 20px 6px; }
.browse-rail-head h2 { font-size: 19px; }
.browse-count { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--pink-fill); color: var(--pink-ink); font: 800 12px var(--display); }
.browse-close { display: none; margin-left: auto; width: 34px; height: 34px; border: 0; border-radius: 10px; background: var(--panel-2); color: var(--text); font-size: 20px; cursor: pointer; }
.browse-rail-body { overflow: auto; padding: 4px 20px 16px; scrollbar-width: thin; }
.browse-group { padding: 14px 0; border-top: 1px solid var(--line); }
.browse-group:first-child { border-top: 0; }
.browse-group h3 { margin-bottom: 10px; font: 600 14px var(--display); }
.browse-settings summary { display: flex; align-items: baseline; gap: 8px; font: 600 14px var(--display); cursor: pointer; list-style: none; }
.browse-settings summary::-webkit-details-marker { display: none; }
.browse-settings summary::after { content: "+"; margin-left: auto; color: var(--muted); }
.browse-settings[open] summary { margin-bottom: 12px; }
.browse-settings[open] summary::after { content: "–"; }
.browse-settings small { color: var(--faint); font-weight: 500; }
.browse-apply { display: flex; gap: 8px; padding: 14px 20px 18px; border-top: 1px solid var(--line); background: var(--panel); }
.browse-apply .btn.primary { flex: 1; }
.browse-filters-button { display: none; align-items: center; gap: 8px; }
.browse-radios { display: flex; flex-wrap: wrap; gap: 6px; }
.browse-radio input, .browse-check input { position: absolute; opacity: 0; pointer-events: none; }
.browse-radio span { display: block; padding: 6px 11px; border-radius: 999px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font: 600 13px var(--display); cursor: pointer; }
.browse-radio span:hover { color: var(--text); }
.browse-radio input:checked + span { background: var(--pink-fill); color: var(--pink-ink); box-shadow: none; }
.browse-radio input:focus-visible + span, .browse-check input:focus-visible + span::before { outline: 2px solid var(--pink); outline-offset: 2px; }
.browse-check { position: relative; display: flex; padding: 5px 0; font-size: 14px; cursor: pointer; }
.browse-check span { position: relative; display: flex; align-items: center; gap: 10px; }
.browse-check span::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 6px; background: var(--panel-2); box-shadow: inset 0 0 0 1.5px var(--faint); }
.browse-check input:checked + span::before { background: var(--pink-fill); box-shadow: none; }
.browse-check input:checked + span::after { content: ""; position: absolute; left: 4px; top: 50%; width: 10px; height: 5px; border-bottom: 2.5px solid var(--pink-ink); border-left: 2.5px solid var(--pink-ink); transform: translateY(-75%) rotate(-45deg); }
.browse-language { width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font: inherit; font-weight: 600; }
.browse-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.browse-mini { padding: 5px 10px; border: 0; border-radius: 999px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font: 600 12.5px var(--display); cursor: pointer; }
.browse-mini:hover { color: var(--text); }
.browse-mini[aria-pressed=true] { background: var(--pink-fill); color: var(--pink-ink); box-shadow: none; }
/* Two thumbs on one track; the part between --lo and --hi is filled. Stars paint osu!'s difficulty spectrum. */
.browse-range { display: grid; gap: 8px; }
.browse-range + .browse-range { margin-top: 14px; }
.browse-range-head { display: flex; justify-content: space-between; gap: 10px; font: 600 14px var(--display); }
.browse-range-head output { color: var(--muted); font-variant-numeric: tabular-nums; }
.browse-range-track { position: relative; height: 22px; }
.browse-range-track::before, .browse-range-track i { content: ""; position: absolute; top: 9px; height: 5px; border-radius: 99px; }
.browse-range-track::before { inset: 9px 0 auto; background: var(--panel-3); }
.browse-range-track i { left: var(--lo); right: calc(100% - var(--hi)); background: var(--pink-fill); }
.browse-range.spectrum { --spectrum: linear-gradient(90deg, #4290fb 1%, #4fc0ff 12.5%, #4fffd5 20%, #7cff4f 25%, #f6f05c 33%, #ff8068 42%, #ff4e6f 49%, #c645b8 58%, #6563de 67%, #18158e 77%, #000 90%); }
.browse-range.spectrum .browse-range-track::before { background: var(--spectrum); opacity: .28; }
.browse-range.spectrum .browse-range-track i { left: 0; right: 0; background: var(--spectrum); clip-path: inset(0 calc(100% - var(--hi)) 0 var(--lo) round 99px); }
.browse-range input { position: absolute; inset: 0; width: 100%; height: 22px; margin: 0; background: none; pointer-events: none; appearance: none; -webkit-appearance: none; }
.browse-range input::-webkit-slider-runnable-track { background: none; }
.browse-range input::-moz-range-track { background: none; }
.browse-range input::-webkit-slider-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px #0006, inset 0 0 0 4px var(--pink-fill); pointer-events: auto; cursor: grab; -webkit-appearance: none; }
.browse-range input::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px #0006, inset 0 0 0 4px var(--pink-fill); pointer-events: auto; cursor: grab; }
.browse-range input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--pink); outline-offset: 2px; }
.browse-range input:focus-visible::-moz-range-thumb { outline: 2px solid var(--pink); outline-offset: 2px; }
.browse-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; min-height: 34px; margin-bottom: 16px; }
.browse-total { margin-left: auto; font-size: 14px; }
.browse-active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.browse-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border-radius: 999px; background: var(--pink-soft); color: var(--text); font: 600 13px var(--display); text-decoration: none; }
.browse-pill span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--text) 12%, transparent); font-size: 13px; line-height: 1; }
.browse-pill:hover span, .browse-pill:focus-visible span { background: var(--pink-fill); color: var(--pink-ink); }
.browse-clear { font-size: 13.5px; }
.set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.set-card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: 20px; background: var(--panel); box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
.set-card:hover { transform: translateY(-3px); }
.set-cover { position: relative; display: block; height: 104px; overflow: hidden; }
.set-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.set-card:hover .set-cover img { transform: scale(1.05); }
.set-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0000 45%, #0000008c); }
.set-cover .status { position: absolute; z-index: 1; top: 10px; left: 10px; text-transform: capitalize; }
.set-cover .status-date { font-weight: 600; text-transform: none; }
.set-range { position: absolute; z-index: 1; right: 12px; bottom: 9px; color: #fff; font: 700 13px var(--display); text-shadow: 0 1px 3px #0009; }
.set-body { display: grid; align-content: start; gap: 4px; padding: 12px 16px 14px; min-width: 0; }
.set-title { overflow: hidden; color: var(--text); font: 800 16px/1.3 var(--display); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.set-title:hover { color: var(--pink); }
.set-artist { overflow: hidden; color: var(--muted); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.set-by { color: var(--faint); }
.set-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 2px; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.set-tag { padding: 1px 6px; border-radius: 6px; background: var(--panel-3); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.set-diffs { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 0; padding: 0; list-style: none; }
.set-diff { display: block; min-width: 40px; padding: 3px 7px; border-radius: 8px; background: var(--sc); color: var(--si); font: 800 12px/1.3 var(--display); text-align: center; text-decoration: none; font-variant-numeric: tabular-nums; transition: transform .15s; }
.set-diff.miss { background: none; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sc) 55%, transparent); color: var(--faint); }
.set-diff:hover, .set-diff:focus-visible { transform: translateY(-2px); }
.set-diffs .more { align-self: center; color: var(--muted); font-size: 12px; }
@media (max-width: 900px) {
  .browse-layout { grid-template-columns: 1fr; }
  .browse-filters-button { display: inline-flex; }
  .browse-rail { display: none; position: fixed; inset: auto 0 0; z-index: 60; max-height: 86vh; border-radius: 22px 22px 0 0; box-shadow: 0 -10px 40px #0008; }
  .browse-rail.open { display: grid; }
  .browse-close { display: grid; place-items: center; }
}
@media (max-width: 600px) { .browse-bar .search { flex-basis: 100%; min-width: 0; } .set-grid { grid-template-columns: 1fr; } }
.browse-more, .browse-pager { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 24px; }
.browse-more { min-height: 56px; flex-wrap: wrap; }
.browse-more p { margin: 0; }

/* ---- theme picker (account panel) ---- */
.menu-theme > span b { color: var(--text); font-weight: 600; }
.menu-theme { display: grid; gap: 8px; padding: 10px 12px; font-size: 14px; color: var(--muted); }
.panel-body:not(.menu) .menu-theme { margin-top: 12px; padding: 12px 0 0; border-top: 1px solid var(--line); }
.theme-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.theme-swatches button { position: relative; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: conic-gradient(var(--c) 0 25%, var(--b) 0 62%, var(--a) 0); box-shadow: inset 0 0 0 1px #0002, 0 0 0 1px var(--line); transition: transform .15s, box-shadow .15s; }
.theme-swatches button:hover { transform: scale(1.08); }
.theme-swatches button[aria-checked=true] { box-shadow: inset 0 0 0 1px #0002, 0 0 0 2px var(--panel), 0 0 0 4px var(--pink); }
.theme-swatches button[data-theme-pick=system]::after { content: "A"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font: 800 13px var(--display); text-shadow: 0 1px 3px #000a; }

/* ---- Le Chonk, the finder's detective cat ---- */
.chonk-desk { display: flex; align-items: center; gap: 14px; margin: 18px 0 14px; }
.chonk { flex: none; display: block; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 14px; line-height: 0; }
.chonk:hover .chonk-svg { transform: translateY(-2px); }
.chonk-svg { transition: transform .15s; image-rendering: pixelated; }
.chonk-say { position: relative; margin: 0; padding: 10px 14px; border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); font-size: 14px; }
.chonk-chat { margin: 0 0 0 auto; max-width: 270px; color: var(--muted); font-size: 13px; text-align: right; }
.chonk-chat code { padding: 1px 6px; border-radius: 6px; background: var(--panel-2); color: var(--text); font-size: 12.5px; }
.chonk-say::before { content: ""; position: absolute; left: -6px; top: 50%; width: 12px; height: 12px; background: var(--panel); transform: translateY(-50%) rotate(45deg); }
@media (max-width: 720px) { .chonk-desk { gap: 10px; flex-wrap: wrap; } .chonk-svg { width: 72px; height: auto; } .chonk-chat { margin: 0; max-width: none; text-align: left; } }

/* ---- Le Chonk's drawer on the Finder: tonight's plays as a chat, with a breakdown pane for fails ---- */
.chonk-open { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 5px 16px 5px 5px; border: 0; border-radius: 999px; background: var(--panel); box-shadow: var(--shadow);
  color: var(--text); font: 700 14px/1 var(--display); cursor: pointer; transition: transform .15s, background .15s; }
.chonk-open:hover { background: var(--panel-2); transform: translateY(-1px); }
.chonk-open[aria-expanded=true] { background: var(--pink-fill); color: var(--pink-ink); }
.chonk-open small { display: block; margin-top: 3px; color: var(--muted); font: 500 11.5px/1 var(--body); text-align: left; }
.chonk-open[aria-expanded=true] small { color: inherit; opacity: .75; }
.chonk-open .count { position: absolute; top: -4px; left: 28px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: var(--pink); color: #fff; font: 800 11px/1 var(--display); box-shadow: 0 0 0 3px var(--bg); animation: cd-bump .4s cubic-bezier(.3, 1.6, .5, 1); }
.chonk-open .count[hidden] { display: none; }
@keyframes cd-bump { from { transform: scale(.4); } }
.cd-ava { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--panel-3) url(le-chonk.png) center / 120%; image-rendering: pixelated; }
.cd-peek { position: fixed; z-index: 55; right: 20px; bottom: 20px; display: flex; align-items: center; gap: 10px; max-width: min(340px, calc(100vw - 40px)); padding: 10px 16px 10px 10px;
  border: 0; border-radius: 16px; background: var(--panel-2); box-shadow: 0 12px 40px #0007; color: var(--text); font: 600 13.5px/1.3 var(--display); text-align: left; cursor: pointer;
  animation: cd-peek 6s ease forwards; }
@keyframes cd-peek { 0% { opacity: 0; transform: translateY(10px); } 6%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(10px); } }

.chonk-drawer { --nav-w: 0px; position: fixed; z-index: 50; top: 12px; right: 12px; bottom: 12px; width: calc(440px + var(--nav-w)); max-width: calc(100vw - 24px); display: flex; border-radius: 20px; background: var(--panel);
  box-shadow: 0 24px 70px #000a, 0 0 0 1px var(--line); overflow: hidden; transform: translateX(110%); transition: transform .35s cubic-bezier(.3, 1.1, .4, 1), width .3s ease; }
.chonk-drawer.open { transform: none; }
.chonk-drawer.wide { width: min(calc(960px + var(--nav-w)), calc(100vw - var(--rail-w) - 36px)); }
.chonk-drawer.nav { --nav-w: 270px; }
.chonk-drawer:not(.nav) .cd-nav { display: none; }
@media (max-width: 1400px) { .chonk-drawer.nav.wide { --nav-w: 0px; } .chonk-drawer.wide .cd-nav { display: none; } }
.cd-col { flex: none; width: 440px; max-width: 100%; display: flex; flex-direction: column; min-height: 0; }
.cd-detail { flex: 1; min-width: 0; overflow-y: auto; border-left: 1px solid var(--line); }
.chonk-drawer:not(.wide) .cd-detail { display: none; }
.cd-top { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.cd-top h2 { font: 700 18px/1.1 var(--display); }
/* sessions: the list beside the chat, the session's name with its star */
.cd-icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--panel-2); color: var(--muted); cursor: pointer; }
.cd-icon:hover, .cd-icon[aria-expanded=true] { color: var(--text); background: var(--panel-3); }
.cd-top .cd-icon[data-nav] { background: none; margin-right: -6px; }
.cd-top .cd-icon[data-nav]:hover, .cd-top .cd-icon[data-nav][aria-expanded=true] { background: var(--panel-2); }
.cd-title { flex: 1; min-width: 0; }
.cd-title h2 { display: flex; align-items: center; gap: 4px; min-width: 0; }
.cd-star { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--faint); fill: none; cursor: pointer; }
.cd-star:hover { color: var(--yellow); background: var(--panel-2); }
.cd-star[aria-pressed=true] { color: var(--yellow); fill: currentColor; }
.cd-star[aria-pressed=true] svg { animation: cd-star .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes cd-star { from { transform: scale(.6) rotate(-30deg); } }
.cd-rename { width: 100%; min-width: 0; padding: 3px 8px; margin: -4px 0 -4px -8px; border: 1.5px solid var(--pink); border-radius: 8px; background: var(--panel-2); color: var(--text); font: inherit; }
.cd-name:has(.cd-rename) { flex: 1; overflow: visible; }
.cd-live.ended::before { display: none; }
.cd-col { position: relative; }
.cd-nav { flex: none; width: 270px; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.cd-nav-top { display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px 18px; min-height: 64px; }
/* The drawer's two views (Le Chonk, Chat) and the Chat view itself (chonk-chat.mjs). */
.cd-views { display: flex; gap: 4px; margin: 12px 16px 0; padding: 4px; border-radius: 12px; background: var(--panel-2); }
.cd-views button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 32px; padding: 4px 10px; border: 0; border-radius: 9px;
  background: none; color: var(--muted); font: 700 13px var(--display); cursor: pointer; }
.cd-views button[aria-selected=true] { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px #0002; }
.cd-views .cd-ava { width: 20px; height: 20px; }
.cd-views .count { min-width: 18px; padding: 0 5px; border-radius: 99px; background: var(--pink-fill); color: var(--pink-ink); font: 800 11px/18px var(--display); }
.cd-views .count[hidden] { display: none; }
.chonk-drawer.chat > .cd-nav:not(.cc-nav), .chonk-drawer.chat > .cd-col:not(.cc-col), .chonk-drawer.chat > .cd-detail,
.chonk-drawer:not(.chat) > .cc-nav, .chonk-drawer:not(.chat) > .cc-col { display: none; }
.chonk-drawer.chat.wide { width: calc(440px + var(--nav-w)); }
.cc-top .cd-live::before { display: none; } .cc-top .cd-live svg { flex: none; }
.cc-none { padding: 6px 10px; color: var(--muted); font-size: 12.5px; }
.cc-item.cd-irow { grid-template-columns: 32px minmax(0, 1fr); gap: 3px 10px; align-items: center; padding: 8px 10px; }
.cc-item > :first-child { grid-row: span 2; }
.cc-item .cd-itop .cd-ititle { min-width: 0; }
.cc-item > small { min-width: 0; color: var(--faint); font-size: 12px; }
.cc-item.unread > small { color: var(--text); }
.cc-hash { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--panel-3); color: var(--muted); font: 800 16px var(--display); }
.cc-find { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; margin: 0 14px 8px; } .cc-find[hidden] { display: none; }
.cc-find .form-result { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 12px; } .cc-find .form-result:empty { display: none; }
.cc-av { position: relative; display: inline-grid; place-items: center; flex: none; width: var(--z); height: var(--z); border-radius: 50%; overflow: hidden;
  background: hsl(var(--h) 45% 40%); color: #fff; font: 800 calc(var(--z) * .44) var(--display); }
.cc-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cc-chonk { align-self: start; background-size: 130%; }   /* Le Chonk's pixel portrait (.cd-ava) in chat */
.cc-log { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 8px 16px 12px; }
.cc-log > :first-child { margin-top: auto; }
.cc-empty { margin: auto; padding: 24px; color: var(--muted); text-align: center; }
.cc-older { align-self: center; margin: 4px 0 8px; padding: 5px 12px; border: 0; border-radius: 99px; background: var(--panel-2); color: var(--muted); font: 700 12px var(--display); cursor: pointer; }
.cc-day { display: flex; align-items: center; gap: 10px; margin: 10px 0 6px; color: var(--faint); font: 700 11.5px var(--display); }
.cc-day::before, .cc-day::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.cc-run { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: 5px 0; }
.cc-head { display: flex; align-items: baseline; gap: 6px; margin: 0 0 1px; } .cc-head a { color: inherit; text-decoration: none; } .cc-head a:hover b { text-decoration: underline; }
.cc-head b { font: 700 13.5px var(--display); } .cc-head time { color: var(--faint); font-size: 11.5px; }
.cc-run.mine .cc-head b { color: var(--pink); }
.cc-tag { padding: 0 6px; border-radius: 99px; background: var(--panel-2); color: var(--muted); font: 700 10.5px var(--display); }
.cc-text { position: relative; margin: 0; padding-right: 18px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.cc-text a { color: var(--pink); } .cc-text mark { padding: 0 2px; border-radius: 4px; background: color-mix(in srgb, var(--pink) 22%, transparent); color: inherit; }
.cc-from { position: absolute; right: 0; top: 4px; color: var(--faint); opacity: 0; transition: opacity .15s; } .cc-text:hover .cc-from { opacity: 1; }
.cc-run.bot > div { padding: 6px 10px; border-radius: 12px; background: color-mix(in srgb, #ff9a5c 10%, var(--panel-2)); }
.cc-run.action em { color: var(--muted); }
.cc-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 10px 16px 14px; border-top: 1px solid var(--line); }
.cc-error { grid-column: 1 / -1; margin: 0; color: var(--red, #e5484d); font-size: 12.5px; } .cc-error:empty { display: none; }
.cd-nav-top h2 { flex: 1; font: 700 18px/1.1 var(--display); }
.cd-sess { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; width: 100%; padding: 10px; border: 0; border-radius: 12px; background: none; color: var(--text); text-align: left; cursor: pointer; }
.cd-sess:hover { background: var(--panel-2); }
.cd-sess[aria-current=true] { background: var(--panel-3); box-shadow: inset 3px 0 0 var(--pink-fill); }
.cd-sess b { display: block; font: 700 14px/1.25 var(--display); }
.cd-sess small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.cd-sess .cd-sess-gone { color: var(--faint); font-style: italic; }
.cd-sess.fading:not([aria-current=true]) { opacity: .62; }
.cd-sess-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--panel-2); color: var(--faint); fill: none; }
.cd-sess.saved .cd-sess-icon { color: var(--yellow); fill: currentColor; }
.cd-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #7ee0a0; animation: cd-ping 2s infinite; }
.cd-sessions-none { padding: 14px 10px; color: var(--faint); font-size: 13px; line-height: 1.45; }
.cd-nav-foot { display: flex; align-items: center; min-height: 64px; margin: 0; padding: 12px 16px; border-top: 1px solid var(--line); color: var(--faint); font-size: 12px; line-height: 1.4; }
.chonk-drawer.past .cd-sum { opacity: .9; }
.cd-live { display: inline-flex; align-items: center; gap: 7px; margin: 4px 0 0; color: var(--muted); font: 600 12.5px/1 var(--body); }
.cd-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #7ee0a0; animation: cd-ping 2s infinite; }
@keyframes cd-ping { 0% { box-shadow: 0 0 0 0 #7ee0a088; } 70%, 100% { box-shadow: 0 0 0 7px #7ee0a000; } }
.cd-x { flex: none; margin-left: auto; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--panel-2); color: var(--muted); font-size: 18px; cursor: pointer; }
.cd-x:hover { color: var(--text); }
.cd-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0 16px 14px; border-bottom: 1px solid var(--line); }
.cd-sum div { padding: 9px 10px; border-radius: 12px; background: var(--panel-2); }
.cd-sum small { display: block; color: var(--muted); font-size: 11.5px; } .cd-sum b { font: 800 18px/1.3 var(--display); }
.cd-log { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 18px; overflow-y: auto; overscroll-behavior: contain; }
.cd-day { align-self: center; color: var(--faint); font: 600 12px/1 var(--body); }
.cd-replies { display: flex; gap: 8px; flex-wrap: wrap; align-content: center; align-items: center; min-height: 64px; padding: 12px 16px; border-top: 1px solid var(--line); }
.cd-replies[hidden] { display: none; }
.cd-replies > button { padding: 9px 14px; border: 1.5px solid var(--pink); border-radius: 999px; background: none; color: var(--pink); font: 700 13.5px/1 var(--display); cursor: pointer; }
.cd-replies > button:hover { background: var(--pink-fill); color: var(--pink-ink); border-color: transparent; }

.cd-msg { display: flex; gap: 10px; align-items: flex-end; }
.cd-msg.cd-new { animation: cd-pop .35s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes cd-pop { from { transform: translateY(8px) scale(.97); opacity: 0; } }
.cd-msg.you { justify-content: flex-end; }
.cd-msg .cd-ava { visibility: hidden; } .cd-msg.last-of .cd-ava { visibility: visible; }
.cd-msg time { display: block; color: var(--faint); font: 500 11.5px/1 var(--body); }
.cd-bub { min-width: 0; width: 352px; max-width: calc(100% - 46px); border-radius: 18px 18px 18px 6px; background: var(--panel-2); font-size: 14.5px; line-height: 1.45; }
.cd-bub.cd-text { width: auto; padding: 11px 14px; }
.cd-bub.cd-text time { margin-top: 5px; text-align: right; }
.cd-msg.you .cd-text { max-width: 85%; border-radius: 18px 18px 6px 18px; background: var(--pink-fill); color: var(--pink-ink); }
.cd-msg.you .cd-text time { color: inherit; opacity: .6; }
.cd-bub > time { padding: 0 16px 12px; text-align: right; }
.cd-bub > :last-child:not(time) { margin-bottom: 14px; }
.cd-ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cd-min { min-width: 0; }
.cd-cov { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cd-tri { position: absolute; z-index: -2; inset: 0; background: linear-gradient(135deg, hsl(var(--h) 45% 32%), hsl(calc(var(--h) + 40) 50% 22%)); }
.cd-gl { flex: none; color: var(--gc); font: italic 800 1em/1 var(--display); text-shadow: 0 2px 10px #000c; }
.cd-up { color: #7ee0a0; } .cd-flat { color: var(--faint); }
.cd-play { position: relative; isolation: isolate; width: 320px; max-width: 88%; padding: 14px 16px; border-radius: 18px 18px 6px 18px; overflow: hidden; color: #fff; }
/* a retry streak: the newest try on top of a loose, slightly crooked pile of the earlier ones */
.cd-stack { position: relative; isolation: isolate; display: flex; justify-content: flex-end; width: 320px; max-width: 88%; margin: 14px 4px 2px 0; border-radius: 18px 18px 6px 18px; cursor: pointer; outline: none; }
.cd-stack .cd-play { width: 100%; max-width: none; box-shadow: 0 4px 14px #0006; }
.cd-layer { position: absolute; z-index: -1; inset: 0; border-radius: 18px; overflow: hidden; isolation: isolate; box-shadow: 0 2px 10px #0006, 0 0 0 1px #ffffff14;
  transform: translate(var(--x), var(--y)) rotate(var(--r)); transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.cd-layer::after { content: ""; position: absolute; z-index: -1; inset: 0; background: #0d0b12c8; }
.cd-stack:hover .cd-layer, .cd-stack:focus-visible .cd-layer, .cd-stack[aria-pressed=true] .cd-layer { transform: translate(calc(var(--x) * 1.5), calc(var(--y) * 1.5)) rotate(calc(var(--r) * 1.7)); }
.cd-stack:focus-visible .cd-play { outline: 2px solid var(--pink); outline-offset: 2px; }
.cd-count { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; border-radius: 999px; background: #000b; color: #fff; font: 800 13px/1 var(--display); }
.cd-try-pin { position: absolute; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--text); box-shadow: 0 0 0 2px var(--panel-2); opacity: .75; }
.cd-try-pin.quick { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; background: var(--faint); }
/* the overview of every try in a streak */
.cd-dsub { margin: 3px 0 0; color: var(--muted); font-size: 12.5px; }
.cd-dtop .cd-min { flex: 1; }
.cd-back-to { flex: none; padding: 7px 10px; border: 0; border-radius: 999px; background: var(--panel-2); color: var(--pink); font: 700 12.5px/1 var(--display); cursor: pointer; }
.cd-back-to:hover { background: var(--pink-fill); color: var(--pink-ink); }
.cd-tries-chart { position: relative; display: flex; align-items: flex-end; gap: var(--gap); height: 130px; margin: 30px 20px 26px; border-bottom: 1px solid var(--line); }
.cd-tries-chart i { position: relative; flex: 1; min-width: 2px; height: var(--to); border-radius: 4px 4px 1px 1px; background: color-mix(in srgb, var(--pink-fill) 55%, transparent); }
.cd-tries-chart i.quick { background: var(--panel-3); }
.cd-tries-chart i.best { background: var(--pink-fill); box-shadow: 0 0 10px var(--pink-fill); }
.cd-tries-chart i.pass { background: #7ee0a0; box-shadow: 0 0 10px #7ee0a088; }
.cd-tries-chart i b { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding-bottom: 4px; color: var(--muted); font: 600 10px/1 var(--display); font-style: normal; white-space: nowrap; }
.cd-tries-band { position: absolute; left: 0; right: 0; background: color-mix(in srgb, var(--yellow) 14%, transparent); border-block: 1px dashed color-mix(in srgb, var(--yellow) 50%, transparent); pointer-events: none; }
.cd-tries-axis { position: absolute; bottom: -18px; left: 0; color: var(--faint); font-size: 11px; } .cd-tries-axis.end { left: auto; right: 0; }
.cd-tries-legend { display: flex; align-items: center; gap: 6px; margin: 0 20px; color: var(--muted); font-size: 12px; }
.cd-tries-legend span { width: 14px; height: 8px; border-radius: 2px; } .cd-tries-legend .band { background: color-mix(in srgb, var(--yellow) 30%, transparent); }
.cd-tries-legend .quick { margin-left: 10px; background: var(--panel-3); } .cd-tries-legend .quick:first-child { margin-left: 0; }
.cd-tries-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 20px 8px; color: var(--muted); font-size: 12.5px; }
.cd-tries-bar b { color: var(--text); font: 700 14px/1 var(--display); }
.cd-switch { position: relative; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.cd-try-list { list-style: none; margin: 0 16px; padding: 0; display: grid; gap: 6px; }
.cd-try-list li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--panel-2); }
.cd-try-list li[data-detail] { cursor: pointer; } .cd-try-list li[data-detail]:hover, .cd-try-list li[data-detail]:focus-visible { background: var(--panel-3); outline: none; }
.cd-try-list li.best { box-shadow: inset 0 0 0 1.5px var(--pink-fill); }
.cd-try-list li.pass { box-shadow: inset 0 0 0 1.5px #7ee0a0; } .cd-try-list li.pass .cd-try-bar i { background: #7ee0a0; }
.cd-try-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--panel-3); font: 700 13px/1 var(--display); }
.cd-try-bar { position: relative; height: 8px; border-radius: 8px; background: var(--panel-3); overflow: hidden; }
.cd-try-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 8px; background: var(--pink-fill); }
.cd-try-band { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--yellow) 40%, transparent); }
.cd-try-list small { display: block; margin-top: 5px; color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.cd-try-list .cd-try-folded { display: block; padding: 4px 10px; background: none; color: var(--faint); font-size: 12px; font-style: italic; }
.cd-advice { display: flex; gap: 10px; align-items: flex-start; margin: 16px 20px 22px; color: var(--muted); font-size: 13.5px; font-style: italic; line-height: 1.45; }
.cd-detail .cd-tiles + .cd-tries-bar { margin-top: 18px; }
.cd-play::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, #0d0b12f0 35%, #0d0b1288); }
.cd-row { display: flex; align-items: center; gap: 12px; } .cd-play .cd-gl { width: 40px; font-size: 36px; text-align: center; }
.cd-play h4 { font: 700 15.5px/1.25 var(--display); }
.cd-play p, .cd-pick p, .cd-dmap p { display: flex; gap: 6px; align-items: center; min-width: 0; margin: 4px 0 0; color: #fffc; font-size: 12.5px; }
.cd-play .mod, .cd-play .stars, .cd-pick .mod, .cd-pick .stars, .cd-dmap .mod, .cd-dmap .stars { flex: none; }
.cd-foot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; padding-top: 9px; border-top: 1px solid #ffffff22; font: 600 13px/1 var(--display); color: #fffd; }
.cd-foot b { color: #fff; font-size: 15px; }
.cd-head { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 16px 4px; font: 700 16.5px/1.25 var(--display); }
.cd-badge { margin-left: auto; padding: 5px 10px; border-radius: 999px; background: var(--pink-fill); color: var(--pink-ink); font: 700 12px/1 var(--display); white-space: nowrap; }
.cd-badge.green { background: #7ee0a022; color: #7ee0a0; } .cd-badge.grey { background: var(--panel-3); color: var(--muted); }
.cd-spot { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0; padding: 6px 16px 0; }
.cd-spot strong { font: 800 40px/1 var(--display); } .cd-spot strong small { margin-left: 2px; color: var(--pink); font-size: 18px; }
.cd-spot span { color: var(--muted); font-size: 14px; }
.cd-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 10px 0; }
.cd-tiles div { min-width: 0; padding: 10px 12px; border-radius: 12px; background: var(--panel-3); }
.cd-tiles dt { color: var(--muted); font-size: 12.5px; } .cd-tiles dd { margin: 4px 0 0; font: 800 20px/1.1 var(--display); overflow-wrap: anywhere; }
.cd-tiles dd small { display: block; margin-top: 5px; color: var(--muted); font: 500 12.5px/1.2 var(--body); }
.cd-note { margin: 0; padding: 10px 16px 0; color: var(--muted); font-size: 14px; } .cd-note b { color: var(--text); }
.cd-hl { color: #ffcc33; }
.cd-attach { display: flex; align-items: center; gap: 14px; margin: 12px 10px 0; padding: 12px 12px 12px 14px; border-radius: 14px; background: var(--panel-3); }
.cd-attach p { flex: 1; min-width: 0; margin: 0; font: 700 14.5px/1.25 var(--display); } .cd-attach p small { display: block; margin-top: 3px; color: var(--muted); font: 500 12.5px var(--body); }
.cd-attach .btn { padding: 9px 18px; font-size: 14px; }
.cd-pack { position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 56px; border-radius: 5px 5px 8px 8px; overflow: hidden;
  background: linear-gradient(135deg, #ff66aa, #8a5cff 60%, #4fc0ff); box-shadow: 0 4px 12px #0005, inset 0 0 0 1.5px #ffffff40; }
.cd-pack::before { content: "osu!"; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: #ff66aa; font: italic 800 8px/1 var(--display); }
.cd-pack::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, #ffffff66 45%, transparent 60%) 0 0 / 250% 100%; animation: mc-shine 2.6s linear infinite; }
.cd-lead { margin: 0; padding: 14px 16px 0; font: 600 15px/1.35 var(--display); }
.cd-pick { position: relative; isolation: isolate; margin: 12px 10px 0; padding: 14px; border-radius: 14px; overflow: hidden; color: #fff; }
.cd-pick::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, #0d0b12f0 35%, #0d0b1260); }
.cd-pick h4 { padding-top: 40px; font: 700 16px/1.2 var(--display); }
.cd-pick .cd-by { margin-top: 2px; color: #fffb; font-size: 12.5px; display: block; }
.cd-pick-stats { display: flex; gap: 6px; margin: 8px 10px 0; }
.cd-pick-stats div { flex: 1; min-width: 0; padding: 7px 9px; border-radius: 10px; background: var(--panel-3); }
.cd-pick-stats dt { color: var(--muted); font-size: 11px; } .cd-pick-stats dd { margin: 2px 0 0; font: 800 14.5px/1.15 var(--display); white-space: nowrap; }
.cd-pick-stats dd small { display: block; margin-top: 2px; color: var(--muted); font: 500 10.5px/1.2 var(--body); }
.cd-pick-stats .cd-pick-len { flex: 1.5; }
.cd-pick-stats .cd-pick-pp { flex: 1.6; background: var(--pink-fill); color: var(--pink-ink); } .cd-pick-stats .cd-pick-pp dt, .cd-pick-stats .cd-pick-pp small { color: inherit; opacity: .75; }
.cd-pick-act { display: flex; gap: 8px; padding: 10px 10px 0; } .cd-pick-act .btn { flex: 1; justify-content: center; padding: 9px; font-size: 13.5px; }
.cd-track { position: relative; height: 8px; margin: 12px 16px 0; border-radius: 99px; background: var(--panel-3); overflow: hidden; }
.cd-track .cd-band { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, #ffcc33 45%, transparent); }
.cd-track .cd-fill { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--pink); }
.cd-track .cd-end { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: #ff6b6b; }
.cd-more { display: flex; align-items: center; justify-content: space-between; width: calc(100% - 20px); margin: 12px 10px 0; padding: 10px 14px; border: 0; border-radius: 12px;
  background: var(--panel-3); color: var(--text); font: 700 13.5px/1 var(--display); cursor: pointer; }
.cd-more:hover, .cd-more[aria-pressed=true] { background: var(--pink-fill); color: var(--pink-ink); }
.cd-more span { color: var(--muted); font: 500 12.5px var(--body); } .cd-more:hover span, .cd-more[aria-pressed=true] span { color: inherit; opacity: .75; }
/* older answers fold to their headline; a tap opens them again */
.cd-verdict.folded .cd-bub > :not(.cd-head):not(.cd-spot) { display: none; }
.cd-verdict.folded .cd-bub { cursor: pointer; } .cd-verdict.folded .cd-spot { padding-bottom: 12px; }
.cd-verdict.folded .cd-spot strong { font-size: 26px; } .cd-verdict.folded .cd-spot strong small { font-size: 14px; }
.cd-verdict.folded .cd-head::after { content: "Show"; color: var(--faint); font: 600 12px var(--body); }
.cd-typing .cd-bub { display: flex; gap: 4px; width: auto; padding: 14px 16px; }
.cd-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: cd-dot 1s infinite; }
.cd-typing i:nth-child(2) { animation-delay: .15s; } .cd-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes cd-dot { 30% { transform: translateY(-4px); opacity: .5; } }
/* the breakdown pane */
.cd-dtop { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--panel); border-bottom: 1px solid var(--line); }
.cd-dtop h3 { font: 700 16px/1.1 var(--display); }
.cd-back { display: none; }
.cd-dmap { position: relative; isolation: isolate; display: flex; align-items: flex-end; gap: 14px; min-height: 120px; margin: 16px 16px 0; padding: 16px; border-radius: 16px; overflow: hidden; color: #fff; }
.cd-dmap::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, #0d0b12f0 25%, #0d0b1260); }
.cd-dmap .cd-gl { font-size: 46px; } .cd-dmap h4 { font: 700 19px/1.2 var(--display); }
.cd-detail .cd-spot { padding: 16px 20px 0; } .cd-detail .cd-spot strong { font-size: 52px; }
.cd-strain { display: grid; grid-template-columns: 50px minmax(0, 1fr); column-gap: 8px; margin: 12px 16px 0; padding: 10px 12px 8px; border-radius: 12px; background: var(--panel-3); }
.cd-strain figcaption { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.cd-strain figcaption b { color: var(--text); font-family: var(--display); }
.cd-strain svg, .cd-strain .cd-axis, .cd-strain .cd-lane, .cd-none-curve { grid-column: 2; }
.cd-strain svg { display: block; width: 100%; height: 96px; overflow: visible; }
.cd-none-curve { margin: 0; padding: 20px 0; color: var(--faint); font-size: 13px; }
.cd-all { fill: color-mix(in srgb, var(--muted) 22%, transparent); } .cd-done { fill: color-mix(in srgb, var(--pink) 55%, transparent); }
.cd-hard { fill: color-mix(in srgb, #ffcc33 14%, transparent); } .cd-mark { stroke: #ff6b6b; stroke-width: 2; }
.cd-lab { grid-column: 1; align-self: center; margin-top: 4px; color: var(--muted); font: 600 11.5px/1 var(--body); }
.cd-lane { position: relative; height: 24px; margin-top: 4px; border-radius: 6px; background: color-mix(in srgb, var(--panel-2) 70%, transparent); }
.cd-lane::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--h0); width: var(--hw); background: color-mix(in srgb, #ffcc33 14%, transparent); }
.cd-lane-none { position: absolute; inset: 0; display: grid; place-items: center; color: var(--faint); font-size: 11px; }
.cd-pin { position: absolute; top: 50%; left: var(--p); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; }
.cd-pin.now { z-index: 2; width: 12px; height: 12px; margin: -6px 0 0 -6px; background: #ff6b6b; box-shadow: 0 0 0 3px #ff6b6b44; }
.cd-pin.was { border: 2px solid var(--pink); background: var(--panel-3); }
.cd-pin.other { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: color-mix(in srgb, var(--text) 55%, transparent); }
.cd-pin.other.j1 { top: 30%; } .cd-pin.other.j2 { top: 70%; }
.cd-pin[data-tip]:hover::after { content: attr(data-tip); position: absolute; z-index: 3; bottom: 16px; left: 50%; transform: translateX(-50%); padding: 5px 8px; border-radius: 8px;
  background: var(--bg); box-shadow: 0 4px 14px #0008; color: var(--text); font: 600 11.5px/1.2 var(--body); white-space: nowrap; pointer-events: none; }
.cd-axis { position: relative; display: flex; justify-content: space-between; margin-top: 6px; color: var(--faint); font: 600 11px/1 var(--body); }
.cd-at { position: absolute; left: var(--at); transform: translateX(-50%); color: #ff8a8a; white-space: nowrap; }
.cd-at.start { transform: translateX(-4px); } .cd-at.end { transform: translateX(-100%); }
.cd-detail .cd-tiles { margin: 12px 16px 0; }
.cd-tiles .cd-wide, .cd-tiles .cd-judge { grid-column: 1 / -1; }
.cd-tiles .cd-wide { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cd-tiles .cd-wide dd { margin: 0; text-align: right; } .cd-tiles .cd-wide dd small { display: inline; margin-left: 6px; }
.cd-judge dd { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: 17px; }
.cd-judge dd span small { display: inline; margin: 0 0 0 3px; font: 600 11.5px var(--body); }
.cd-judge .j300 { color: #66ccff; } .cd-judge .j100 { color: #b3d944; } .cd-judge .j50 { color: #ffcc22; } .cd-judge .jx { color: #ff6b6b; }
.cd-judge .cd-acc { margin-left: auto; color: var(--text); }
.cd-detail .cd-note { padding: 14px 20px 22px; font-size: 14.5px; }
/* the inbox (sessions and learning goals in one list, after T3 Code's thread list) and the learning threads */
.cd-nav-top { position: relative; }
.cd-plus { position: absolute; z-index: 8; top: calc(100% - 6px); right: 12px; display: grid; gap: 2px; width: 250px; padding: 6px; border-radius: 14px; background: var(--panel); box-shadow: 0 12px 40px #0008, 0 0 0 1px var(--line); }
.cd-plus[hidden] { display: none; }
.cd-plus button { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border: 0; border-radius: 10px; background: none; color: var(--text); text-align: left; cursor: pointer; }
.cd-plus button:hover, .cd-plus button:focus-visible { background: var(--panel-2); outline: none; }
.cd-plus button > b, .cd-plus span > b { display: block; font: 700 13.5px/1.2 var(--display); }
.cd-plus button[data-act="new"] { display: grid; padding-left: 35px; }
.cd-plus small { display: block; color: var(--muted); font-size: 12px; }
.cd-plus svg { flex: none; margin-top: 1px; color: var(--pink); }
.cd-nav-foot .link-btn { margin-left: 6px; font-weight: 700; }
/* The zones of the inbox and the chat list (chonk-zones.mjs), after T3 Code's thread list: a header with a rule, rows
   that can be dragged from one zone to another, and each row's actions on hover. */
.cd-sessions { flex: 1; min-height: 0; margin: 0; padding: 0 8px 10px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; overscroll-behavior: contain; }
.cd-zone { border-radius: 12px; transition: background .15s, box-shadow .15s, opacity .15s; }
.cd-zrows { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.cd-zhead { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0; padding: 10px 8px 6px 12px; border: 0; background: none; color: var(--pink); font: 700 12.5px/1 var(--display); text-align: left; }
.cd-zlabel { white-space: nowrap; }
.cd-zhead > i { flex: 1; height: 1px; background: var(--line); }
.cd-zhead small { color: var(--faint); font: 600 11.5px/1 var(--body); }
button.cd-zhead { cursor: pointer; border-radius: 8px; } button.cd-zhead:hover > i { background: var(--faint); }
button.cd-zhead svg { flex: none; color: var(--faint); transition: transform .2s; }
.cd-zone.folded button.cd-zhead svg { transform: rotate(-90deg); }
.cd-zone.archived .cd-zhead { color: var(--muted); }
.cd-zhint { margin: 2px 2px 4px; padding: 10px 12px; border: 1.5px dashed var(--line); border-radius: 10px; color: var(--faint); font-size: 12px; line-height: 1.4; }
.cd-zempty { margin: 0; padding: 4px 12px 8px; color: var(--faint); font-size: 12.5px; line-height: 1.45; }
.cd-zone.only-drag { display: none; } .dragging .cd-zone.only-drag { display: block; }
/* While a row is dragged: zones that take it are outlined, the one under the pointer fills, the others dim. */
.dragging .cd-zone[data-drop=ok] { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--pink) 35%, transparent); }
.dragging .cd-zone.over { background: color-mix(in srgb, var(--pink-fill) 9%, transparent); box-shadow: inset 0 0 0 2px var(--pink); }
.dragging .cd-zone.over .cd-zhint { border-color: var(--pink); color: var(--pink); }
.dragging .cd-zone[data-drop=no] { opacity: .4; }
.dragging .cd-iacts { display: none; }
.cd-iitem.drop-before::before, .cd-iitem.drop-after::after { content: ""; position: absolute; z-index: 2; left: 6px; right: 6px; height: 3px; border-radius: 3px;
  background: var(--pink); box-shadow: 0 0 0 2px var(--panel); pointer-events: none; }
.cd-iitem.drop-before::before { top: -2.5px; } .cd-iitem.drop-after::after { bottom: -2.5px; }
.cd-irow[draggable=true] { cursor: pointer; }
.drag-src { opacity: .35; }
/* A row's actions: on hover or focus they cover its right side (the status and the end of its lines). */
.cd-iitem { position: relative; --row-bg: var(--panel-2); }
.cd-iitem:has(> [aria-current=true]) { --row-bg: var(--panel-3); }
.cd-iacts { position: absolute; top: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 1px; padding: 0 6px 0 22px; border-radius: 0 10px 10px 0;
  background: linear-gradient(to right, transparent, var(--row-bg) 18px); opacity: 0; pointer-events: none; transition: opacity .12s; }
.cd-iitem:hover .cd-iacts, .cd-iitem:focus-within .cd-iacts { opacity: 1; }
.cd-iitem:hover .cd-iact, .cd-iitem:focus-within .cd-iact { pointer-events: auto; }   /* the fade itself still grabs the row */
.cd-iitem:has(.cd-iacts:hover) > .cd-irow:not([aria-current=true]) { background: var(--panel-2); }
.cd-iact { pointer-events: none; display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.cd-iact:hover, .cd-iact:focus-visible { color: var(--text); background: var(--panel); box-shadow: 0 1px 4px #0003; outline: none; }
.cd-iact[data-row-act=star][aria-pressed=true] { color: var(--yellow); } .cd-iact[data-row-act=star][aria-pressed=true] svg { fill: currentColor; }
.cd-iact[aria-pressed=true]:not([data-row-act=star]) { color: var(--pink); }
.cd-iact.danger:hover, .cd-iact.danger:focus-visible { color: var(--red); }
.cd-iact.armed, .cd-iact.armed:hover { padding: 0 10px; background: var(--red); color: #fff; font: 700 12px/1 var(--body); white-space: nowrap; }
.cd-iitem.renaming .cd-irow { cursor: default; }
.cd-irename { margin: 0; padding: 4px 8px; font: 700 14px/1.25 var(--display); }
@media (hover: none) {
  .cd-iitem:has(> [aria-current=true]) .cd-iacts { opacity: 1; } .cd-iitem:has(> [aria-current=true]) .cd-iact { pointer-events: auto; }
  .cd-irow[draggable=true] { -webkit-user-drag: none; }
}
.cd-irow { position: relative; display: grid; gap: 3px; width: 100%; padding: 9px 10px 9px 12px; border: 0; border-radius: 10px; background: none; color: var(--text); text-align: left; cursor: pointer; }
.cd-irow:hover { background: var(--panel-2); }
.cd-irow[aria-current=true] { background: var(--panel-3); }
.cd-itop, .cd-ibottom { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cd-ikind { display: inline-flex; align-items: center; gap: 5px; color: var(--faint); font: 600 11.5px/1 var(--body); }
.cd-irow.unread .cd-ikind { color: var(--pink); }
.cd-ipin { display: inline-flex; color: var(--yellow); }
.cd-istatus, .cd-iwhen { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: var(--faint); font: 600 11.5px/1 var(--body); white-space: nowrap; }
.cd-istatus i { width: 7px; height: 7px; border-radius: 50%; }
.cd-istatus.new { color: var(--pink); } .cd-istatus.new i { background: var(--pink-fill); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink-fill) 25%, transparent); }
.cd-istatus.live { color: var(--green); } .cd-istatus.live i { background: #7ee0a0; animation: cd-ping 2s infinite; }
.cd-istatus.watching { color: var(--muted); } .cd-istatus.learned { color: var(--lime); }
.cd-istatus.draft { padding: 3px 7px; border-radius: 6px; background: var(--panel-2); }
.cd-ring { flex: none; animation: cd-spin 6s linear infinite; }
@keyframes cd-spin { to { transform: rotate(360deg); } }
.cd-ititle { font: 600 14px/1.25 var(--display); color: var(--muted); }
.cd-irow.unread .cd-ititle, .cd-irow[aria-current=true] .cd-ititle, .cd-irow.live .cd-ititle { color: var(--text); font-weight: 800; }
.cd-irow.unread::before { content: ""; position: absolute; left: 3px; top: 50%; width: 4px; height: 18px; margin-top: -9px; border-radius: 2px; background: var(--pink-fill); }
.cd-irow.done:not([aria-current=true]), .cd-irow.fading:not([aria-current=true]) { opacity: .65; }
.cd-ibottom small { min-width: 0; color: var(--faint); font-size: 12px; }
.cd-ibottom .cd-iwhen { font-weight: 500; }
.cd-irow .cd-sess-gone { color: var(--faint); font-size: 11.5px; font-style: italic; }
.cd-dots { display: inline-flex; gap: 3px; flex: none; }
.cd-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--panel-3); box-shadow: inset 0 0 0 1.5px var(--line); }
.cd-dots i.on { background: var(--lime); box-shadow: none; }
.cd-sum .cd-dots { gap: 4px; height: 23px; align-items: center; } .cd-sum .cd-dots i { width: 10px; height: 10px; }
.cd-sum[hidden] { display: none; }
.cd-live.learning { gap: 5px; } .cd-live.learning::before { display: none; } .cd-live.learning svg { color: var(--lime); }
.cd-gname { display: inline-flex; align-items: center; gap: 5px; }
.cd-gnote .cd-gnote-body { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; max-width: 352px; padding: 8px 12px; border-radius: 12px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.cd-gnote .cd-gnote-body > svg { flex: none; } .cd-gnote b { color: var(--text); } .cd-gnote .cd-dots { margin-left: auto; }
.cd-gnote.on .cd-gnote-body { background: color-mix(in srgb, var(--lime) 12%, transparent); } .cd-gnote.on svg { color: var(--lime); }
.cd-gnote.try .cd-gnote-body { background: color-mix(in srgb, var(--pink-fill) 10%, transparent); } .cd-gnote.try svg { color: var(--pink); }
.cd-gnote.off .cd-gnote-body { background: var(--panel-2); } .cd-gnote.off svg { color: var(--faint); }
.cd-stage .cd-bub { box-shadow: inset 3px 0 0 var(--lime); }
.cd-unread { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--pink); font: 700 11.5px/1 var(--body); text-transform: uppercase; letter-spacing: .06em; }
.cd-unread::before, .cd-unread::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--pink-fill) 50%, transparent); }
.cd-msg:has(> .cd-unread) { flex-direction: column; align-items: stretch; }
.cd-fresh .cd-bub { box-shadow: 0 0 0 1.5px var(--pink), 0 8px 30px color-mix(in srgb, var(--pink-fill) 20%, transparent); }
.cd-new-tag { display: inline-block; margin-right: 6px; padding: 3px 7px; border-radius: 6px; background: var(--pink-fill); color: var(--pink-ink); font: 800 10.5px/1 var(--body); text-transform: uppercase; letter-spacing: .05em; vertical-align: 2px; }
.cd-why { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 10px 0; }
.cd-why span { padding: 4px 8px; border-radius: 8px; font: 700 11.5px/1 var(--body); white-space: nowrap; }
.cd-why small { font-weight: 500; opacity: .75; }
.cd-why .ok { background: color-mix(in srgb, var(--lime) 14%, transparent); color: var(--lime); }
.cd-why .warn { background: color-mix(in srgb, var(--yellow) 16%, transparent); color: var(--yellow); }
.cd-gempty { display: grid; justify-items: center; gap: 8px; margin: auto 0; padding: 24px 8px; text-align: center; }
.cd-gempty-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: color-mix(in srgb, var(--pink-fill) 14%, var(--panel-2)); color: var(--pink); }
.cd-gempty h3 { margin: 6px 0 0; font: 800 20px/1.2 var(--display); }
.cd-gempty p { margin: 0; max-width: 320px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.cd-suggest { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.cd-suggest button { display: grid; gap: 2px; padding: 8px 12px; border: 0; border-radius: 12px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); text-align: left; cursor: pointer; }
.cd-suggest button[aria-pressed=true] { box-shadow: inset 0 0 0 2px var(--pink); background: color-mix(in srgb, var(--pink-fill) 12%, var(--panel-2)); }
.cd-suggest b { font: 700 13.5px/1.1 var(--display); } .cd-suggest small { color: var(--muted); font-size: 11.5px; }
.cd-replies.composer { display: block; min-height: 0; padding: 0; border-top: 0; }
.cd-composer { display: grid; gap: 10px; margin: 0 12px 12px; padding: 14px; border-radius: 16px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line), 0 -8px 24px #0003; }
.cd-sentence { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 700 17px/1 var(--display); }
.cd-ar { display: inline-flex; align-items: center; border: 0; border-radius: 10px; background: var(--panel-3); box-shadow: inset 0 0 0 1.5px var(--pink); color: var(--text); }
.cd-ar button { width: 30px; height: 32px; border: 0; background: none; color: var(--text); font: 700 17px/1 var(--body); cursor: pointer; }
.cd-ar button:hover:not(:disabled) { color: var(--pink); }
.cd-ar button:disabled { opacity: .35; cursor: default; }
.cd-ar b { min-width: 56px; text-align: center; font: 800 15px/1 var(--display); }
.cd-ar .cd-ar-x { width: 26px; color: var(--faint); font-size: 15px; }
.cd-ar.add { padding: 9px 12px; box-shadow: inset 0 0 0 1.5px var(--line); color: var(--muted); font: 700 13.5px/1 var(--display); cursor: pointer; }
.cd-modset { display: inline-flex; gap: 2px; } .cd-modset .mod-toggle { padding: 2px; }
.cd-preview { display: flex; gap: 8px; margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.cd-preview svg { flex: none; margin-top: 2px; color: var(--blue); } .cd-preview b { color: var(--text); }
.cd-composer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cd-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--panel-3); }
.cd-seg button { padding: 7px 12px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 700 12.5px/1 var(--body); cursor: pointer; white-space: nowrap; }
.cd-seg button[aria-pressed=true] { background: var(--panel); color: var(--text); box-shadow: 0 1px 4px #0005; }
.cd-kind button { padding: 7px 11px; font: 700 15px/1 var(--display); }
.cd-length { justify-self: start; flex-wrap: wrap; }   /* how long his maps are, as played */   /* Learn | Climb, the composer's first word */
.cd-suggest button.climb b { display: inline-flex; align-items: center; gap: 5px; } .cd-suggest button.climb svg { color: var(--pink); }
.cd-go { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 760px) {
  .chonk-drawer, .chonk-drawer.wide { inset: 0; width: auto; max-width: none; border-radius: 0; transform: translateY(100%); }
  .chonk-drawer.open { transform: none; }
  .cd-col { width: 100%; } .chonk-drawer.wide .cd-col { display: none; } .cd-detail { border: 0; }
  .chonk-drawer.nav { --nav-w: 0px; } .cd-nav { position: absolute; z-index: 6; inset: 0; width: auto; background: var(--panel); }
  .cd-nav-top { padding-left: 60px; } .chonk-drawer.nav .cd-top .cd-icon[data-nav] { position: relative; z-index: 7; }
  .cd-back { display: inline-grid; margin-left: 0; } .cd-dtop .cd-x:not(.cd-back) { display: none; }
  .cd-bub { width: 100%; } .cd-play { width: 88%; }
  .cd-peek { left: 12px; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .chonk-drawer, .cd-msg.cd-new, .cd-peek, .chonk-open .count, .cd-ring, .cd-istatus.live i { animation: none; transition: none; } }

/* Snipes in Le Chonk's chat: a #1 lost (Take it back) or taken, both plays side by side. */
.snipe-bub { padding: 12px 12px 0; }
.snipe-bub > time { padding: 0 4px 12px; }
.snipe-head { padding: 0 4px; }
.snipe-head b { font-weight: 700; }
.snipe-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin-top: 10px; padding: 8px; border-radius: 14px; background: var(--panel-3); }
.snipe-map, .snipe-item { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; }
.snipe-map { padding: 2px 2px 6px; }
.snipe-map b, .snipe-item b { display: block; font: 700 14px/1.25 var(--display); }
.snipe-map small, .snipe-item small { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.snipe-thumb { position: relative; isolation: isolate; flex: none; width: 52px; height: 36px; border-radius: 9px; overflow: hidden; }
.snipe-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 52px; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; font-size: 13px; }
.snipe-row.now { background: color-mix(in srgb, var(--pink-fill) 22%, transparent); }
.snipe-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.snipe-who img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.snipe-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.snipe-who small { color: var(--faint); font-size: 11px; white-space: nowrap; }
.snipe-acc { font-variant-numeric: tabular-nums; }
.snipe-mods { display: flex; gap: 3px; } .snipe-mods .mod { min-width: 24px; height: 17px; padding: 0 5px; font-size: 10px; }
.snipe-pp { text-align: right; font: 800 13.5px var(--display); font-variant-numeric: tabular-nums; }
.snipe-act { display: flex; align-items: center; gap: 8px; padding: 6px 2px 2px; }
.snipe-tag { padding: 3px 9px; border-radius: 99px; background: var(--panel-2); color: var(--muted); font: 700 11.5px var(--display); white-space: nowrap; }
.snipe-tag.back { background: color-mix(in srgb, var(--lime) 18%, transparent); color: var(--lime); }
.snipe-list { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 10px 0 0; padding: 0; }
.snipe-item { padding: 6px 10px 6px 6px; border-radius: 12px; background: var(--panel-3); }
.snipe-item:hover, .snipe-map:hover b { color: var(--pink); }
.snipe-item .cd-min { flex: 1; }
.snipe-take { color: var(--pink); font: 700 12.5px var(--display); white-space: nowrap; }
.snipe-more { padding: 6px 4px 0; color: var(--muted); font-size: 12.5px; }
.snipe-msg.took .snipe-bub { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pink-fill) 55%, transparent); }
@media (max-width: 420px) { .snipe-row { grid-template-columns: minmax(0, 1fr) auto 46px; } .snipe-mods { display: none; } }

/* Song previews share the existing card controls and never download on hover. */
.set-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.set-title-row .set-title { flex: 1; min-width: 0; }
.song-preview { display: inline-flex; flex: none; align-items: center; }
.preview-button { width: 34px; height: 34px; padding: 0 !important; justify-content: center; font-size: 14px; }
.preview-button[aria-pressed=true] { background: var(--pink-fill); color: var(--pink-ink); }
.preview-button[data-state=error] { color: var(--muted); }
.preview-button:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }

/* Ghost data: a linked official osu! profile, faint and dashed under the player's own numbers and chart */
.ghost-val { display: inline-flex; align-items: center; gap: 4px; width: fit-content; margin-top: 6px; padding: 2px 7px; border: 1px dashed color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 6px; color: color-mix(in srgb, currentColor 55%, transparent); font: 600 12.5px/1.2 var(--display); font-variant-numeric: tabular-nums; }
.p1-numbers > div { display: flex; flex-direction: column; }
.ghost-meta { display: inline-flex; align-items: center; gap: 4px; opacity: .65; font-style: italic; }
.ghost-meta a { color: inherit; }
.rank-chart .ghost-line { fill: none; stroke: var(--faint); stroke-width: 2.5; stroke-dasharray: 6 6; stroke-linecap: round; opacity: .85; }
.ghost-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; color: var(--muted); font-size: 12px; }
.ghost-legend span { width: 18px; height: 3px; border-radius: 2px; background: var(--pink-fill); }
.ghost-legend span.ghost { margin-left: 10px; background: repeating-linear-gradient(90deg, var(--faint) 0 5px, transparent 5px 9px); }
/* The official account in the account menu */
.menu-official { display: grid; gap: 10px; margin: 8px 0; padding: 14px; border-radius: 14px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.menu-official:empty { display: none; }
.menu-official h3 { display: flex; align-items: center; gap: 6px; color: var(--muted); font: 700 13px/1 var(--body); }
.menu-official .osu-link-form { display: flex; gap: 6px; }
.menu-official .osu-link-form input { flex: 1; min-width: 0; min-height: 34px; font-size: 13px; }
.menu-official .osu-link-status:empty, .mo-status:empty { display: none; }
.mo-note, .mo-desc { color: var(--faint); font-size: 12px; line-height: 1.45; }
.mo-linked { display: flex; align-items: center; gap: 10px; }
.mo-ava { width: 38px; height: 38px; flex: none; border-radius: 11px; object-fit: cover; background: var(--panel-3); opacity: .85; box-shadow: inset 0 0 0 1.5px var(--faint); }
.mo-who { flex: 1; display: grid; gap: 2px; min-width: 0; }
.mo-who b { font: 700 14px/1.2 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo-who small { color: var(--muted); font-size: 12px; }
.mo-row { padding: 0; background: none; }
.mo-row b { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; }
.mo-model { display: grid; gap: 7px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.mo-model .fc-seg button { padding: 6px 10px; font-size: 12px; }
.mo-status { color: var(--red); font-size: 12px; }
.score-scope { margin-left: 8px; }
.score-scope button { border: 0; background: none; cursor: pointer; }
.score-scope[hidden] { display: none; }
.score.ghost-score { background: none; box-shadow: inset 0 0 0 1px var(--line); border: 1px dashed var(--line); }
.score.ghost-score > *:not(.score-pp) { opacity: .7; }
.ghost-tag { display: inline-flex; align-items: center; gap: 3px; color: var(--faint); font-size: 11px; font-style: italic; }

/* ---- recovering missed scores (#/recover) and the owner's page (#/admin) ---- */
.recover-page, .admin-page { max-width: 1100px; }
.rc-lead { max-width: 640px; margin: 6px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.rc-head .btn .count, .owner-head .count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--pink-fill); color: var(--pink-ink); font-size: 11.5px; }
.rc-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; margin-bottom: 26px; }
.rc-drop { display: grid; place-items: center; align-content: center; gap: 6px; min-height: 200px; padding: 24px; border: 2px dashed color-mix(in srgb, var(--pink) 45%, var(--line)); border-radius: 20px;
  background: color-mix(in srgb, var(--pink-fill) 6%, var(--panel)); color: var(--muted); text-align: center; cursor: pointer; transition: background .15s, border-color .15s; }
.rc-drop svg { color: var(--pink); }
.rc-drop b { color: var(--text); font: 700 18px/1.2 var(--display); }
.rc-drop u { color: var(--pink); text-decoration: none; font-weight: 600; }
.rc-drop:hover, .rc-drop.over, .rc-drop:focus-within { border-color: var(--pink); background: color-mix(in srgb, var(--pink-fill) 14%, var(--panel)); }
.rc-how { padding: 18px 22px; border-radius: 20px; background: var(--panel); box-shadow: var(--shadow); }
.rc-how h2, .rc-section h2, .owner-card h2 { margin: 0 0 10px; font: 700 18px/1.2 var(--display); }
.rc-how ol { display: grid; gap: 8px; margin: 0; padding-left: 20px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.rc-how b { color: var(--text); }
.rc-section { margin-bottom: 26px; }
.rc-outages { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.rc-outages li { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--panel-2); color: var(--muted); font-size: 13px; }
.rc-outages b { color: var(--text); font-weight: 600; }
.rc-outages small { color: var(--faint); }
.rc-rows { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rc-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto; grid-template-areas: "art map play state" "art checks checks checks" "art actions actions actions";
  align-items: center; gap: 6px 18px; padding: 10px 16px 10px 10px; border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); }
.rc-row:has(.rc-who) { grid-template-columns: 96px minmax(0, 1fr) auto auto auto; grid-template-areas: "art map who play state" "art checks checks checks checks" "art actions actions actions actions"; }
.rc-art { grid-area: art; align-self: start; position: relative; width: 96px; height: 60px; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, #5a2f8f, #24133f); }
.rc-art img { width: 100%; height: 100%; object-fit: cover; }
.rc-map { grid-area: map; min-width: 0; }
.rc-map b { display: grid; font: 700 15px/1.3 var(--display); }
.rc-map b, .rc-map small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-map small { color: var(--muted); font: 500 12.5px/1.4 var(--body); }
.rc-map p { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 5px 0 0; color: var(--faint); font-size: 12px; }
.rc-who { grid-area: who; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; }
.rc-play { grid-area: play; display: flex; align-items: center; gap: 10px; }
.rc-play > span:not(.grade-tag):not(.rc-pp) { display: grid; line-height: 1.2; }
.rc-play b { font: 700 15px/1.2 var(--display); font-variant-numeric: tabular-nums; }
.rc-play small { color: var(--muted); font-size: 12px; }
.rc-pp { padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--pink-fill) 16%, var(--panel-2)); color: var(--pink); font: 700 13px/1 var(--display); }
.rc-state { grid-area: state; display: grid; justify-items: end; gap: 3px; max-width: 260px; text-align: right; }
.rc-state small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.rc-chip { padding: 5px 11px; border-radius: 999px; font: 600 12.5px/1 var(--body); white-space: nowrap; }
.rc-chip.wait { background: color-mix(in srgb, #f6c344 20%, var(--panel-2)); color: color-mix(in srgb, #b8860b 70%, var(--text)); }
.rc-chip.good { background: color-mix(in srgb, #3ccf7a 20%, var(--panel-2)); color: color-mix(in srgb, #1f9d55 75%, var(--text)); }
.rc-chip.bad { background: color-mix(in srgb, #ff5a6e 18%, var(--panel-2)); color: color-mix(in srgb, #d6334a 80%, var(--text)); }
.st-checking .rc-chip { animation: rc-breathe 1.2s ease-in-out infinite; }
@keyframes rc-breathe { 50% { opacity: .5; } }
.rc-checks { grid-area: checks; font-size: 13px; }
.rc-checks summary { display: inline-flex; gap: 8px; color: var(--muted); font-weight: 600; cursor: pointer; }
.rc-checks summary span { color: var(--faint); font-weight: 500; }
.rc-checks ul { display: grid; gap: 4px; margin: 8px 0 2px; padding: 0; list-style: none; }
.rc-checks li { display: flex; gap: 8px; align-items: baseline; color: var(--muted); line-height: 1.4; }
.rc-checks li i { display: inline-grid; place-items: center; flex: none; width: 17px; height: 17px; border-radius: 50%; font: 800 10px/1 var(--body); font-style: normal; }
.ck-ok i { background: color-mix(in srgb, #3ccf7a 22%, transparent); color: #1f9d55; }
.ck-warn i { background: color-mix(in srgb, #f6c344 30%, transparent); color: #b8860b; }
.ck-fail i { background: color-mix(in srgb, #ff5a6e 24%, transparent); color: #d6334a; }
.ck-warn, .ck-fail { color: var(--text) !important; }
.rc-actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 4px; }
.rc-reject { display: flex; gap: 8px; flex: 1 1 320px; }
.rc-reject[hidden] { display: none; }
.rc-reject input { flex: 1; min-height: 34px; padding: 4px 12px; font-size: 13px; }
.btn.danger { background: #d6334a; color: #fff; }
.rc-rows.compact .rc-row { padding-block: 6px; box-shadow: none; background: var(--panel-2); }
.rc-rows.compact .rc-checks:not([open]) { display: none; }
.owner-status { min-height: 1.4em; margin: -12px 0 12px; color: var(--pink); font-weight: 600; }
.owner-card { margin-bottom: 22px; padding: 18px 20px; border-radius: 20px; background: color-mix(in srgb, var(--panel) 55%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
.owner-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 12px; }
.owner-head h2 { margin: 0; }
.owner-auto { max-width: 440px; }
.owner-outages { display: grid; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.owner-outages li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 8px 12px; border-radius: 12px; background: var(--panel-2); font-size: 13.5px; }
.owner-outages li > span:first-child { display: inline-flex; align-items: baseline; gap: 6px; }
.owner-outages small { color: var(--faint); }
.owner-source { padding: 3px 9px; border-radius: 999px; background: var(--panel-3); color: var(--muted); font-size: 12px; font-weight: 600; }
.owner-source.src-owner { background: color-mix(in srgb, var(--pink-fill) 18%, var(--panel-3)); color: var(--pink); }
.owner-outages .link-btn { margin-left: auto; }
.owner-outage-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.owner-outage-form label { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.owner-outage-form input { min-height: 36px; padding: 4px 10px; font-size: 13px; }
.owner-outage-form input[name=note] { flex: 1 1 200px; }
@media (max-width: 760px) {
  .rc-top { grid-template-columns: 1fr; }
  .rc-row, .rc-row:has(.rc-who) { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "art map" "art who" "art play" "state state" "checks checks" "actions actions"; }
  .rc-art { width: 64px; height: 44px; }
  .rc-state { justify-items: start; text-align: left; max-width: none; }
}
/* The owner's replay watcher */
.rw-overlay { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: #0009; backdrop-filter: blur(3px); }
.rw-panel { display: grid; gap: 12px; width: min(1180px, 100%); max-height: calc(100dvh - 40px); overflow: auto; padding: 16px 18px 18px; border-radius: 22px; background: var(--panel); box-shadow: 0 30px 80px #0008; }
.rw-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rw-head h2 { margin: 0; font: 700 18px/1.3 var(--display); }
.rw-close { width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--panel-2); color: var(--muted); font-size: 20px; cursor: pointer; }
.rw-close:hover { color: var(--text); }
.rw-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "stage info" "controls info" "marks info"; gap: 8px 18px; }
.rw-loading { grid-column: 1 / -1; padding: 60px 0; color: var(--muted); text-align: center; }
.rw-stage { grid-area: stage; position: relative; }
.rw-canvas { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 14px; background: #0d0b14; }
.rw-keys { position: absolute; top: 10px; right: 10px; display: grid; gap: 4px; }
.rw-keys span { display: grid; grid-template-columns: 24px 34px; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 8px; background: #ffffff14; color: #ffffffa0; font: 700 11px/1.4 var(--display); }
.rw-keys b { text-align: right; font-variant-numeric: tabular-nums; }
.rw-keys span.on { background: #ff66aa; color: #fff; }
.rw-controls { grid-area: controls; display: flex; align-items: center; gap: 10px; }
.rw-play { min-width: 72px; }
.rw-seek { flex: 1; accent-color: var(--pink); }
.rw-time { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rw-speed { min-height: 32px; padding: 2px 8px; font-size: 13px; }
.rw-marks { grid-area: marks; position: relative; height: 10px; margin: -4px 92px 0 82px; }
.rw-mark { position: absolute; top: 0; width: 3px; height: 10px; border-radius: 2px; transform: translateX(-1px); }
.rw-mark.miss { background: #ff4e6f; } .rw-mark.ok { background: #7cff4f; opacity: .7; } .rw-mark.meh { background: #ffb84d; }
.rw-info { grid-area: info; display: grid; align-content: start; gap: 14px; font-size: 13.5px; }
.rw-counts { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rw-counts th, .rw-counts td { padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--line); }
.rw-counts thead th { color: var(--muted); font-weight: 600; font-size: 12px; }
.rw-counts tbody th { text-align: left; font-weight: 700; }
.rw-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.rw-facts div { padding: 8px 10px; border-radius: 10px; background: var(--panel-2); }
.rw-facts dt { color: var(--muted); font-size: 12px; }
.rw-facts dd { margin: 2px 0 0; font: 700 16px/1.2 var(--display); font-variant-numeric: tabular-nums; }
.rw-note { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.rw-jumps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; color: var(--muted); }
.rw-verdict { margin: 0; padding: 9px 12px; border-radius: 12px; background: var(--panel-2); font-size: 13px; line-height: 1.45; }
.rw-verdict.tone-good { background: color-mix(in srgb, #3ccf7a 16%, var(--panel-2)); color: color-mix(in srgb, #1f9d55 70%, var(--text)); }
.rw-verdict.tone-warn { background: color-mix(in srgb, #f6c344 18%, var(--panel-2)); color: color-mix(in srgb, #b8860b 65%, var(--text)); }
.rw-verdict.tone-bad { background: color-mix(in srgb, #ff5a6e 18%, var(--panel-2)); color: color-mix(in srgb, #d6334a 80%, var(--text)); font-weight: 600; }
.rw-verdict.tone-wait { color: var(--muted); animation: rc-breathe 1.6s ease-in-out infinite; }
.rw-verdict.tone-none { color: var(--muted); }
.rw-counts td small { color: var(--muted); font-size: 11px; }
.rw-counts tr.rw-diff th, .rw-counts tr.rw-diff td { background: color-mix(in srgb, #ff5a6e 14%, transparent); color: color-mix(in srgb, #d6334a 75%, var(--text)); }
.rw-counts tr.rw-diff th::after { content: ' ≠'; }
.rw-counts tr.rw-diff.close th, .rw-counts tr.rw-diff.close td { background: color-mix(in srgb, #f6c344 16%, transparent); color: color-mix(in srgb, #b8860b 65%, var(--text)); }
.rw-counts tr.rw-diff.info th, .rw-counts tr.rw-diff.info td { background: none; color: inherit; }
.rw-counts tr.rw-diff.info th::after { content: ''; }
.rw-mark.break { top: 5px; height: 5px; background: #ff4e6f; opacity: .75; }
.rw-checks { margin-bottom: 22px; padding: 18px 20px; border-radius: 20px; background: color-mix(in srgb, var(--panel) 55%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
.rw-checks h2 { margin: 0; font: 700 18px/1.2 var(--display); }
.rw-checks > .muted { margin: 0 0 10px; }
.rw-checks .rw-check-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rw-checks .rw-check-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px 14px; padding: 8px 12px; border-radius: 12px; background: var(--panel-2); }
.rw-checks .rw-check-list b small { display: block; color: var(--muted); font-weight: 500; font-size: 12px; }
.rw-checks .rw-check-list .rw-check-why { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 12.5px; }
.rw-checks .rw-check-list li.v-differs .rw-check-why { color: color-mix(in srgb, #d6334a 80%, var(--text)); }
@media (max-width: 900px) {
  .rw-body { grid-template-columns: 1fr; grid-template-areas: "stage" "controls" "marks" "info"; }
  .rw-marks { margin: -4px 0 0; }
}
@media (prefers-reduced-motion: reduce) { .rw-overlay { backdrop-filter: none; } .rw-verdict.tone-wait { animation: none; } }
.owner-problem { padding: 12px 16px; border-radius: 12px; background: color-mix(in srgb, #ff5a6e 16%, var(--panel)); color: var(--text); font-size: 14px; }
.security-page .mfa-qr{display:block;background:#fff;padding:16px;border-radius:8px;box-sizing:content-box;max-width:calc(100% - 32px);height:auto;margin:16px 0}
.security-page #recovery-codes{overflow-x:auto;user-select:all;padding:12px;line-height:1.7}

/* ---- access: sign-in gate, joining, invitations, account security, getting started ---------- */
/* Signed out: one whole page, no rail. */
body.gated { --rail-w: 0px; padding-bottom: 0; }
body.gated .rail, body.gated::before { display: none; }
body.gated .account-panel { display: none; }
.access h2 { font: 700 22px/1.2 var(--display); margin-bottom: 6px; }
.access h3 { font: 700 16px/1.3 var(--display); margin: 14px 0 6px; }
.access .muted { font-size: 14px; line-height: 1.5; }
.access .form { display: grid; gap: 14px; margin-top: 16px; }
.access .form small { font: 400 12.5px/1.4 var(--body); color: var(--muted); }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.btn-row.end { justify-content: flex-end; }
.copy-btn svg { flex: none; }

.gate { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr); gap: 34px; align-items: start; max-width: 1080px; min-height: calc(100vh - 80px); align-content: center; }
.gate-hero { padding: 10px 4px; }
.gate-brand { display: flex; gap: 16px; align-items: center; }
.gate-logo svg { width: 64px; height: 64px; filter: drop-shadow(0 6px 18px #ffc85740); }
.gate-domain { color: var(--muted); font: 600 14px/1.3 var(--display); }
.gate-brand h1 { font: 800 clamp(30px, 4vw, 44px)/1.05 var(--display); letter-spacing: -.01em; }
.gate-status { display: flex; align-items: center; gap: 7px; margin-top: 6px; color: var(--muted); font: 600 13px var(--display); }
.gate-status i { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); }
.gate-status.live i { background: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 22%, transparent); }
.gate-lead { margin: 22px 0 0; font-size: 17px; line-height: 1.55; color: var(--text); max-width: 34em; }
.gate-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 24px; }
.gate-stats:empty { display: none; }
.gate-stat { padding: 14px 16px; border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); }
.gate-stat b { display: block; font: 800 26px/1.1 var(--display); color: var(--pink); }
.gate-stat span { font: 600 12.5px var(--display); color: var(--muted); }
.gate-week { margin-top: 22px; }
.gate-week:empty { display: none; }
.gate-week h2 { font-size: 15px; color: var(--muted); margin: 0; }
.gate-week > p { margin: 4px 0 0; font-weight: 600; }
.gate-map { position: relative; margin-top: 12px; padding: 16px 18px; border-radius: 14px; overflow: hidden; color: #fff; display: grid; gap: 2px;
  background: linear-gradient(90deg, #1b1424ee 30%, #1b142488), var(--cover) center / cover, #2a2035; box-shadow: var(--shadow); }
.gate-map b { font: 700 18px/1.2 var(--display); }
.gate-map small { color: #ffffffcc; opacity: 1; }
.gate-map-label { font: 700 11.5px var(--display); color: #ffb3d6; }
.gate-lock { display: flex; gap: 10px; align-items: center; margin-top: 22px; color: var(--muted); font-size: 14px; }
.gate-lock svg { flex: none; color: var(--pink); }
.gate-card { padding: 22px 24px 24px; }
/* ---- landing: the sign-in gate as a whole page (cover wall, sign-in card, players, latest passes) ----
   Sizes follow the window (clamp with vw), so it fills a phone, a laptop and a 1440p or 4K screen alike. */
.landing { position: relative; isolation: isolate; min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto;
  padding-bottom: clamp(52px, 3.4vw, 64px); overflow: hidden; background: #110c19; color: #fff; --landing-w: min(92vw, clamp(1100px, 78vw, 1900px)); }
.landing-mosaic { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.landing-mosaic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #110c19eb 0%, #110c19b8 42%, #110c1966 100%), linear-gradient(0deg, #110c19f0 0%, #110c1900 45%); }
.landing-tiles { --tile: clamp(150px, 13vw, 360px); --gap: clamp(8px, .6vw, 14px); position: absolute; left: 50%; top: 50%; width: 170vmax; height: 170vmax;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tile), 1fr)); gap: var(--gap); align-content: start; overflow: hidden;
  transform: translate(-50%, -50%) rotate(-8deg); animation: landing-drift 120s linear infinite alternate; }
.landing-tiles span { aspect-ratio: 2 / 1; border-radius: clamp(8px, .7vw, 14px); background: var(--img) center / cover, #2a2238; opacity: var(--o); }
@keyframes landing-drift { to { transform: translate(calc(-50% - var(--tile)), calc(-50% - var(--tile) * .5)) rotate(-8deg); } }
.landing-top { display: flex; align-items: center; gap: 16px; width: var(--landing-w); margin: 0 auto; padding: clamp(16px, 1.6vw, 30px) 0; }
.landing-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.landing-logo svg { display: block; width: clamp(34px, 2.4vw, 48px); height: auto; }
.landing-brand b { font: 800 clamp(20px, 1.5vw, 28px) var(--display); } .landing-brand small { color: #ffffffa0; font: 600 clamp(12.5px, .8vw, 15px) var(--display); }
.landing-live { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 7px 12px; border-radius: 99px; background: #0007; backdrop-filter: blur(8px); color: #ffffffb8; font: 700 clamp(12.5px, .8vw, 15px) var(--display); white-space: nowrap; }
.landing-live i { width: 9px; height: 9px; border-radius: 50%; background: #ffffff60; flex: none; }
.landing-live.on { color: #fff; } .landing-live.on i { background: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 25%, transparent); animation: landing-pulse 2s infinite; }
@keyframes landing-pulse { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--green) 4%, transparent); } }
.landing-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(28px, 4vw, 90px); width: var(--landing-w); margin: 0 auto; padding: clamp(12px, 2vw, 40px) 0; }
.landing-kicker { color: #ff9fcb; font: 800 clamp(12px, .8vw, 16px) var(--display); letter-spacing: .12em; text-transform: uppercase; }
.landing h1 { margin: .3em 0 .25em; font: 800 clamp(40px, 5.4vw, 116px)/.95 var(--display); letter-spacing: -.02em; } .landing h1 span { color: var(--pink); }
.landing-lead { max-width: 36em; color: #ffffffd9; font-size: clamp(15.5px, 1.05vw, 21px); line-height: 1.55; }
.landing-lock { display: flex; gap: 10px; align-items: center; margin-top: 1.2em; max-width: 40em; color: #ffffffa0; font-size: clamp(13.5px, .85vw, 16px); }
.landing-lock svg { flex: none; color: var(--pink); } .landing-lock a { color: #ff9fcb; }
.landing .gate-card { width: 380px; }
/* The reel: a paper stop-motion film of what the server does (gate-reel.mjs). */
.gate-reel { width: min(100%, clamp(560px, 38vw, 900px)); margin: .4em 0 .9em; }
.gate-reel-stage { aspect-ratio: 2 / 1; border-radius: 18px; overflow: hidden; background: #140e25; box-shadow: 0 18px 40px #0008, inset 0 0 0 1px #ffffff14; }
.gate-reel-stage svg { display: block; width: 100%; height: 100%; font-family: var(--display); font-weight: 800; }
.gate-reel-bar { display: flex; align-items: center; gap: 12px; margin-top: 10px; min-height: 28px; }
.gate-reel-play { flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: #ffffff1a; color: #fff; cursor: pointer; }
.gate-reel-play:hover { background: #ffffff30; }
.gate-reel-play i { width: 9px; height: 10px; border-inline: 3px solid currentColor; }
.gate-reel-play.paused i { width: 0; height: 0; border: 0; border-block: 5.5px solid transparent; border-left: 9px solid currentColor; margin-left: 3px; }
.gate-reel-dots { display: flex; gap: 6px; flex: none; }
.gate-reel-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: #ffffff38; cursor: pointer; }
.gate-reel-dots button:hover { background: #ffffff70; }
.gate-reel-dots button[aria-current] { width: 22px; border-radius: 5px; background: var(--pink); }
.gate-reel-caption { min-width: 0; margin: 0; color: #ffffffd9; font: 700 clamp(13.5px, .85vw, 16px) var(--display); }
/* The card's form uses the site's fixed sizes; on big screens it grows as a whole. */
@media (min-width: 1800px) { .landing .gate-card { zoom: 1.15; } }
@media (min-width: 2300px) { .landing .gate-card { zoom: 1.3; } }
/* Past ~2000 px the sizes above stop growing; a 4K screen gets the whole page larger. */
@media (min-width: 3000px) {
  .landing { padding-bottom: 96px; }
  .landing-top, .landing-main, .landing-wall, .landing-ticker > div { zoom: 1.5; }
  .landing { --landing-w: 1900px; }  /* ×1.5 zoom: 2850 px of a 3840 px screen */
  .landing .gate-card { zoom: 1.3; }
}
.landing-wall { width: var(--landing-w); margin: 0 auto; padding: clamp(14px, 1.4vw, 28px) 0 clamp(16px, 1.4vw, 28px); }
.landing-wall header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 12px; }
.landing-wall h2 { font-size: clamp(15px, 1vw, 20px); } .landing-wall header span { color: #ffffffa0; font-size: clamp(13px, .8vw, 15.5px); } .landing-wall header b { color: #fff; }
.landing-players { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(240px, 17vw, 380px); gap: clamp(8px, .7vw, 14px); overflow-x: auto; scrollbar-width: none;
  mask-image: linear-gradient(90deg, #000 calc(100% - 60px), transparent); }
.landing-players::-webkit-scrollbar { display: none; }
.landing-player { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: clamp(10px, .7vw, 14px) clamp(12px, .8vw, 16px); border-radius: 14px;
  background: #1a1426c4; backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px #ffffff14; }
.landing-player.on { box-shadow: inset 0 0 0 1px #6ef0a060, 0 0 24px #6ef0a018; }
a.landing-player { color: inherit; text-decoration: none; transition: transform .15s, background .15s; }
a.landing-player:hover, a.landing-player:focus-visible { transform: translateY(-2px); background: #ffffff1c; outline: none; }
/* The peek: a player's link for visitors (access-pages.mjs peekPage), beside the sign-in card. */
a.landing-brand { color: inherit; text-decoration: none; }
.peek-main { align-items: start; }
.peek { min-width: 0; max-width: 760px; border-radius: 22px; overflow: hidden; background: #1b1428f2; box-shadow: 0 30px 80px #0009, inset 0 0 0 1px #ffffff14; color: #fff; }
.peek-wait { display: grid; place-items: center; min-height: 320px; }
.peek-head { height: clamp(110px, 9vw, 160px); background: linear-gradient(0deg, #1b1428, #1b142800 70%), var(--cover, linear-gradient(120deg, #3a2160, #1b1428)) center / cover; }
.peek-id { position: relative; display: flex; align-items: end; gap: 16px; margin: -52px 24px 0; }
.peek-id .landing-av { width: 96px; height: 96px; box-shadow: 0 0 0 4px #1b1428; font-size: 36px; }
.peek-id h1 { margin: 2px 0 0; font: 800 clamp(26px, 2vw, 36px) var(--display); }
.peek-id .landing-kicker { margin: 0; }
.peek-state { display: flex; align-items: center; gap: 6px; color: #ffffff99; font-size: 14px; }
.peek-state.on { color: #8ef0a8; } .peek-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; }
.peek-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 18px 24px 0; }
.peek-stats > span { display: grid; justify-items: start; align-content: start; gap: 4px; min-width: 0; padding: 10px 12px; border-radius: 12px; background: #ffffff0d; color: #ffffff90; font-size: 12px; }
.peek-stats b { color: #fff; font: 800 19px var(--display); white-space: nowrap; }
.peek-best { display: grid; gap: 3px; margin: 12px 24px 0; padding: 14px 16px; border-radius: 14px; background: linear-gradient(90deg, #1b1428f2 35%, #1b142899), var(--cover, none) center / cover; }
.peek-best small, .peek-row small { color: #ff9fcb; font: 800 11px var(--display); letter-spacing: .08em; text-transform: uppercase; }
.peek-best b { font: 800 19px var(--display); } .peek-best span { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: #ffffffb8; font-size: 13.5px; } .peek-best strong { color: #ff9fcb; }
.peek-row { display: grid; grid-template-columns: 1.3fr .7fr 1.2fr; gap: 8px; margin: 12px 24px 0; }
.peek-row > section { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 12px; border-radius: 12px; background: #ffffff0d; }
.peek-row > section > b { font: 800 22px var(--display); }
.peek-note { color: #ffffff90; font-size: 12.5px; }
.peek-week { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.peek-week li { display: grid; justify-items: center; gap: 4px; } .peek-week small { color: #ffffff80; font-size: 10.5px; }
.peek-week .daylist-tiles { flex-direction: column; } .peek-week li.won .daylist-tiles { box-shadow: 0 0 0 2px #ffc857; border-radius: 4px; }
.peek-none { display: block; width: 12px; height: 72px; border-radius: 3px; background: repeating-linear-gradient(0deg, #ffffff14 0 12px, transparent 12px 15px); }
.peek-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.peek-badge { padding: 2px 8px; border-radius: 99px; background: #ff66aa26; color: #ffb3d4; font: 700 11.5px var(--display); }
.peek-locked { position: relative; margin-top: 14px; padding: 4px 24px 24px; }
.peek-ghost { filter: blur(3px); opacity: .45; }
.peek-ghost p { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #ffffff14; } .peek-ghost b { width: 170px; font-size: 13px; }
.peek-ghost i { flex: 1; height: 9px; border-radius: 5px; background: #ffffff40; } .peek-ghost i + i { flex: .5; }
.peek-lock { position: absolute; inset: 8px 24px 24px; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; border-radius: 16px;
  background: radial-gradient(closest-side, #1b1428f5, #1b1428b8); color: #ffc857; }
.peek-lock p { max-width: 30em; color: #ffffffd6; font-size: 14px; } .peek-lock span { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.peek-missing { padding: 36px 28px; } .peek-missing h1 { font: 800 28px var(--display); margin-bottom: 8px; } .peek-missing p { color: #ffffffc0; margin-bottom: 14px; }
@media (max-width: 1100px) { .peek-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .peek-row { grid-template-columns: 1fr 1fr; } .peek-row > section:first-child { grid-column: 1 / -1; } }
@media (max-width: 520px) { .peek-id { margin-inline: 16px; } .peek-stats, .peek-best, .peek-row { margin-inline: 16px; } .peek-locked { padding-inline: 16px; } .peek-lock { inset-inline: 16px; }
  .peek-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .peek-row { grid-template-columns: 1fr; } .peek-ghost b { width: 110px; } }
.landing-av { width: clamp(40px, 2.6vw, 54px); height: clamp(40px, 2.6vw, 54px); border-radius: 50%; object-fit: cover; flex: none; background: #2a2238; }
.landing-av-letter { display: grid; place-items: center; background: hsl(var(--h, 300) 45% 34%); font: 800 clamp(16px, 1.1vw, 22px) var(--display); }
.landing-player.on .landing-av { box-shadow: 0 0 0 2px var(--green); }
.landing-who { display: grid; gap: 1px; min-width: 0; } .landing-who b { font: 700 clamp(14px, .9vw, 17px) var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.landing-who small { color: #ffffff99; font-size: clamp(12px, .75vw, 14px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.landing-state { display: flex; align-items: center; gap: 5px; } .landing-player.on .landing-state { color: #8ef0a8; }
.landing-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; }
.landing-usual { display: grid; justify-items: end; gap: 2px; } .landing-usual small { color: #ffffff70; font-size: 10.5px; }
.landing-star { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 99px; background: color-mix(in srgb, #66ccff calc(100% - var(--s) * 100%), #ff66aa);
  color: #14101c; font: 800 clamp(11.5px, .72vw, 13.5px)/1.2 var(--display); white-space: nowrap; vertical-align: middle; }
.landing-ticker { position: absolute; left: 0; right: 0; bottom: 0; overflow: hidden; border-top: 1px solid #ffffff1a; background: #110c19d9; backdrop-filter: blur(8px); }
.landing-ticker > div { display: flex; width: max-content; padding: clamp(12px, .8vw, 16px) 0; animation: landing-scroll calc(var(--items) * 6s) linear infinite;
  color: #ffffffa8; font-size: clamp(13px, .8vw, 15.5px); }
.landing-ticker:hover > div { animation-play-state: paused; }
.landing-ticker span { white-space: nowrap; } .landing-ticker > div > span:not(.landing-ticker-copy), .landing-ticker-copy > span { margin-right: 44px; }
.landing-ticker-copy { display: flex; }
.landing-ticker b { color: #fff; font-family: var(--display); } .landing-ticker small { color: #ffffff70; }
.landing-grade { font: 800 13px var(--display); font-style: normal; } .landing-grade.gSS { color: #fff1a8; } .landing-grade.gS { color: #ffd76a; } .landing-grade.gA { color: #8cf07a; } .landing-grade.gB { color: #6ec3ff; }
.landing-ticker .landing-pp { color: #ff9fcb; }
@keyframes landing-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .landing-tiles, .landing-live.on i { animation: none; }
  .landing-ticker { overflow-x: auto; } .landing-ticker > div { animation: none; } .landing-ticker-copy { display: none; }
}
@media (max-width: 860px) {
  .landing-main { grid-template-columns: 1fr; } .landing .gate-card { width: auto; }
  .landing-players { grid-auto-columns: 82%; }
  .landing-brand small { display: none; }
}

.gate-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: var(--panel-2); margin-bottom: 6px; }
.gate-tabs button { border: 0; padding: 10px 8px; border-radius: 9px; background: none; color: var(--muted); font: 700 13.5px var(--display); cursor: pointer; }
.gate-tabs button[aria-selected=true] { background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
.gate-card :is([data-panel=invite], [data-panel=request]) > p { margin-top: 14px; }
.hp-field { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.request-sent h3 { margin: 6px 0 6px; }
.request-sent p { margin: 0; }
.gate .join-main { min-width: 0; }

.join-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 14px; padding: 0; }
.join-steps li { display: flex; align-items: center; gap: 7px; color: var(--faint); font: 600 13px var(--display); }
.join-steps .step-num { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-3); color: var(--muted); font-size: 11.5px; }
.join-steps .now { color: var(--text); }
.join-steps .now .step-num { background: var(--pink-fill); color: var(--pink-ink); }
.join-steps .done .step-num { background: var(--green); color: #fff; }
.join-card { padding: 26px 28px; }
.join:not(.gate) { max-width: 760px; }
.join-hero { display: grid; gap: 8px; justify-items: start; }
.join-art { color: var(--pink); margin-bottom: 4px; }
.join-meta { color: var(--muted); font-size: 13.5px; margin: 6px 0 4px; }
.join-hero .btn { margin-top: 10px; }
.pw-field { display: flex; align-items: center; gap: 8px; }
.pw-field input { flex: 1; }
.pw-meter { display: block; height: 5px; border-radius: 4px; background: var(--panel-3); overflow: hidden; }
.pw-meter i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--red); transition: width .2s, background .2s; }
.pw-meter i[data-level=ok] { background: var(--yellow); }
.pw-meter i[data-level=good] { background: var(--green); }

.mfa-flow { margin-top: 14px; }
.mfa-steps { margin: 0; padding: 0; list-style: none; counter-reset: mfa; display: grid; gap: 16px; }
.mfa-steps > li { counter-increment: mfa; display: grid; grid-template-columns: 28px 1fr; gap: 4px 12px; }
.mfa-steps > li::before { content: counter(mfa); grid-row: span 3; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--pink-soft); color: var(--pink); font: 800 13px var(--display); }
.mfa-steps b, .setup-steps b { font: 700 15px/1.3 var(--display); }
.mfa-steps span, .setup-steps > li > span { color: var(--muted); font-size: 14px; }
.mfa-scan { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 8px; }
.mfa-qr { width: 200px; height: 200px; padding: 10px; border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.mfa-key { display: grid; gap: 6px; justify-items: start; font: 600 12.5px var(--display); color: var(--muted); }
.mfa-key code { font: 600 15px/1.4 ui-monospace, "JetBrains Mono", monospace; color: var(--text); letter-spacing: .04em; word-break: break-all; }
.mfa-confirm { grid-template-columns: minmax(0, 200px) auto; justify-content: start; align-items: end; margin-top: 6px !important; }
.recovery-codes { columns: 2; gap: 18px; margin: 12px 0 0; padding: 14px 18px 14px 36px; border-radius: 12px; background: var(--panel-2); }
.recovery-codes code { font: 600 13.5px/1.9 ui-monospace, monospace; }
.check-row { display: flex !important; align-items: center; gap: 10px; margin: 16px 0 12px; font: 600 14px var(--body) !important; color: var(--text) !important; }

.os-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--panel-2); margin: 14px 0 6px; }
.os-tabs button { border: 0; padding: 8px 16px; border-radius: 9px; background: none; color: var(--muted); font: 700 13.5px var(--display); cursor: pointer; }
.os-tabs button[aria-selected=true] { background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
.setup-steps { margin: 10px 0 0; padding: 0; list-style: none; counter-reset: setup; display: grid; gap: 14px; }
.setup-steps > li { counter-increment: setup; position: relative; padding-left: 40px; display: grid; gap: 4px; }
.setup-steps > li[hidden] { display: none; }
.setup-steps > li::before { content: counter(setup); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--pink-soft); color: var(--pink); font: 800 13px var(--display); }
.command { display: flex; gap: 10px; align-items: center; margin-top: 6px; padding: 10px 10px 10px 14px; border-radius: 12px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.command code { flex: 1; min-width: 0; font: 600 13.5px/1.45 ui-monospace, "JetBrains Mono", monospace; color: var(--pink); overflow-wrap: anywhere; }
.setup-drawers { display: grid; gap: 8px; margin-top: 20px; }
.setup-drawers > .drawer { margin-top: 0; }
.setup-trust ul { display: grid; gap: 6px; margin: 0; padding-left: 20px; color: var(--muted); font-size: 14px; }
.setup-trust code, .script-drawer p code { font: 600 12.5px ui-monospace, monospace; color: var(--text); overflow-wrap: anywhere; }
.setup-trust > p { font-size: 13.5px; }
.script-drawer .drawer-body { justify-items: stretch; padding-left: 18px; }
.script-drawer .command { margin-top: 0; }
.script-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.script-tabs button { padding: 7px 12px; border: 0; border-radius: 9px; background: none; color: var(--muted); font: 600 13px ui-monospace, monospace; cursor: pointer; }
.script-tabs button[aria-selected=true] { background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
.script-view { max-height: 420px; margin: 0; padding: 14px 16px; overflow: auto; border-radius: 10px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.script-view code { font: 500 12.5px/1.55 ui-monospace, "JetBrains Mono", monospace; color: var(--text); white-space: pre; }
.script-meta { font-size: 13px; overflow-wrap: anywhere; }
.script-meta code { font: 500 12px ui-monospace, monospace; color: var(--muted); }

.welcome-list { list-style: none; margin: 16px 0 18px; padding: 0; display: grid; gap: 10px; }
.welcome-list li { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--panel-2); }
.welcome-list li span:nth-child(2) { display: grid; gap: 2px; }
.welcome-list small { color: var(--muted); font-size: 13px; }
.welcome-av, .welcome-icon { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--pink-soft); color: var(--pink); font: 800 18px var(--display); }
.welcome-av img { width: 100%; height: 100%; object-fit: cover; }
.welcome-icon.card-ico { border-radius: 10px; width: 34px; height: 46px; justify-self: center; background: linear-gradient(135deg, #ff6fae, #ffb35c); box-shadow: 4px 3px 0 var(--panel-3); }

.invites { max-width: 900px; }
.stepup-card { margin-bottom: 16px; box-shadow: var(--shadow), inset 0 0 0 2px var(--pink-fill); }
.stepup-form { display: grid; grid-template-columns: minmax(0, 1fr) 140px auto; gap: 8px 14px; align-items: center; }
.stepup-form h2 { font-size: 18px; margin: 0; }
.stepup-form input, .invite-more input, .invite-link input { width: 100%; padding: 11px 13px; border: 0; border-radius: 10px; background: var(--panel-2); color: var(--text); font: 600 15px var(--body); box-shadow: inset 0 0 0 1px var(--line); }
.stepup-form .form-result { grid-column: 1 / -1; margin: 0; }
.invite-maker { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; padding: 26px 28px; margin-bottom: 16px; }
.invite-maker:has(.invite-result[hidden]) { grid-template-columns: 1fr; }
.invite-form { display: grid; gap: 14px; justify-items: start; margin-top: 16px; }
.seg-choice { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--panel-2); }
.seg-choice button { border: 0; padding: 8px 14px; border-radius: 9px; background: none; color: var(--muted); font: 700 13.5px var(--display); cursor: pointer; }
.seg-choice button[aria-pressed=true] { background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
.invite-more summary { cursor: pointer; color: var(--pink); font: 600 13.5px var(--display); }
.invite-more label { display: grid; gap: 6px; margin-top: 10px; font: 600 13px var(--display); color: var(--muted); }
.invite-result { padding: 18px; border-radius: 14px; background: var(--pink-soft); }
.invite-result h3 { margin-top: 0; }
.invite-result .btn-row { margin-top: 10px; }
.invite-qr { display: flex; gap: 14px; align-items: center; margin-top: 14px; color: var(--muted); font-size: 13px; }
.invite-qr img { width: 120px; height: 120px; padding: 8px; border-radius: 12px; background: #fff; }
.invite-list-card { padding: 22px 26px; }
.invite-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.access-requests-card { padding: 22px 26px; margin-bottom: 16px; }
.access-requests-card h2 { margin-top: 0; }
.request-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.request-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: start; padding: 12px 14px; border-radius: 12px; background: var(--panel-2); }
.request-who { display: grid; gap: 3px; min-width: 0; }
.request-who small { color: var(--muted); }
.request-message { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); font-size: 14px; }
.request-warn { color: var(--pink) !important; }
.request-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.request-state { color: var(--muted); font-size: 13px; }
.request-row .form-result { grid-column: 1 / -1; margin: 0; }
.request-row .form-result:empty { display: none; }
.invite-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); }
.invite-who { flex: 1; display: grid; gap: 2px; font-weight: 600; }
.invite-who small { color: var(--muted); font-weight: 400; }
.invite-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pink-fill); flex: none; }
.invite-row.used .invite-dot { background: var(--green); }
.invite-row.expired .invite-dot, .invite-row.revoked .invite-dot { background: var(--faint); }
.invite-past { margin-top: 14px; }
.invite-past summary { cursor: pointer; color: var(--muted); font: 600 13.5px var(--display); margin-bottom: 8px; }

.security { max-width: 820px; }
.sec-summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 22px 24px; margin-bottom: 16px; }
.sec-summary h2 { font-size: 19px; margin: 0 0 2px; }
.sec-summary p { margin: 0; color: var(--muted); }
.sec-shield { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; }
.sec-summary.on .sec-shield { background: color-mix(in srgb, var(--green) 18%, var(--panel)); color: var(--green); }
.sec-summary.off .sec-shield { background: color-mix(in srgb, var(--yellow) 18%, var(--panel)); color: var(--yellow); }
.sec-card { padding: 22px 26px; margin-bottom: 16px; }
.sec-card .form { max-width: 420px; }
.sec-card .drawer .form { margin-top: 4px; }

.getting-started { margin-bottom: 22px; padding: 18px 22px; box-shadow: var(--shadow), inset 4px 0 0 var(--pink-fill); }
.gs-head { display: flex; align-items: baseline; gap: 12px; }
.gs-head h2 { font: 700 19px var(--display); }
.gs-count { color: var(--muted); font: 600 13px var(--display); flex: 1; }
.gs-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gs-list li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--panel-2); font-weight: 600; }
.gs-list li > span:nth-child(2) { flex: 1; }
.gs-list li.done { color: var(--muted); }
.gs-list li.done > span:nth-child(2) { text-decoration: line-through; text-decoration-color: var(--faint); }
.gs-check { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; box-shadow: inset 0 0 0 2px var(--line); font: 800 12px var(--display); }
.gs-list li.done .gs-check { background: var(--green); color: #fff; box-shadow: none; }

@media (max-width: 860px) {
  .gate { grid-template-columns: 1fr; min-height: 0; padding-top: 28px; }
  .invite-maker { grid-template-columns: 1fr; }
  .gs-list { grid-template-columns: 1fr; }
  .stepup-form { grid-template-columns: 1fr; }
  .sec-summary { grid-template-columns: auto minmax(0, 1fr); }
  .sec-summary .btn { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 520px) {
  .gate-stats { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .gate-stat { padding: 10px; }
  .gate-stat b { font-size: 20px; }
  .join-card, .gate-card { padding: 20px 18px; }
  .recovery-codes { columns: 1; }
  .mfa-confirm { grid-template-columns: 1fr; }
}
.sec-card .form .btn { justify-self: start; }
.perm-rows { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.perm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); }
.perm-av { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; flex: none; background: var(--pink-soft); color: var(--pink); font: 800 15px var(--display); }
.perm-av img { width: 100%; height: 100%; object-fit: cover; }
.perm-who { flex: 1; min-width: 160px; display: grid; gap: 2px; }
.perm-who small { color: var(--muted); font-size: 12.5px; }
.perm-toggle { gap: 10px; }
.invite-by { color: var(--muted); font-weight: 400; }
.admin-unlock { max-width: 460px; margin: 40px auto 0; padding: 30px 32px; display: grid; justify-items: start; gap: 6px; }
.admin-unlock h1 { font: 700 26px/1.2 var(--display); }
.admin-unlock .form { width: 100%; display: grid; gap: 14px; margin-top: 12px; }
.admin-unlock small { font-size: 12.5px; color: var(--muted); }
.admin-lock-icon { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--pink-soft); color: var(--pink); margin-bottom: 6px; }
.admin-lock-bar { display: flex; align-items: center; gap: 12px; }
.score-find { display: flex; gap: 8px; margin-top: 10px; }
.score-find input, .score-tools input[data-score-reason] { flex: 1; min-width: 0; padding: 9px 12px; border: 0; border-radius: 10px; background: var(--panel-2); color: var(--text); font: 500 14px var(--body); box-shadow: inset 0 0 0 1px var(--line); }
.score-maps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.score-map-pick { width: 100%; text-align: left; display: grid; gap: 2px; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--panel-2); color: var(--text); font: 14px var(--body); cursor: pointer; }
.score-map-pick:hover { background: var(--panel-3); }
.score-map-pick span { color: var(--muted); font-size: 13px; }
.score-map { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: baseline; margin-top: 14px; }
.score-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0 8px; }
.score-tools .check-row { margin: 0; }
.danger-btn:not(:disabled) { color: var(--red); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 45%, transparent); }
.score-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.score-row { display: grid; grid-template-columns: minmax(150px, 1.4fr) repeat(3, minmax(64px, .6fr)) minmax(44px, .4fr) minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 12px; border-radius: 10px; background: var(--panel-2); font-size: 13.5px; }
.score-row.failed { opacity: .7; }
.score-row .check-row { margin: 0; font-weight: 600 !important; }
.score-who { display: grid; gap: 1px; }
.score-who small { color: var(--muted); font-weight: 400; font-size: 12px; }
.score-num { font-variant-numeric: tabular-nums; text-align: right; }
.score-mods { font: 700 12px var(--display); color: var(--pink); }
.score-flags { display: flex; flex-wrap: wrap; gap: 4px; }
.score-flags i { font-style: normal; font-size: 11.5px; padding: 2px 7px; border-radius: 999px; background: var(--pink-soft); color: var(--pink); }
.score-log { margin-top: 14px; }
.score-log summary { cursor: pointer; color: var(--muted); font: 600 13.5px var(--display); }
.score-log ul { margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; display: grid; gap: 3px; }
@media (max-width: 760px) { .score-row { grid-template-columns: 1fr auto; } .score-row > .score-num:nth-of-type(n+2), .score-row .score-flags { display: none; } }

/* ---- rankings: board controls, opened players (a card laid over the list), the full list ---- */
.board-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: -8px 0 26px; }
.board-controls .segmented a, .board-controls .rulesets a { white-space: nowrap; }
.board-variant a, .board-variant span { display: inline-flex; align-items: center; gap: 6px; }
.board-variant [aria-disabled=true] { padding: 7px 14px; border-radius: 9px; color: var(--faint); font: 600 14px/1 var(--display); cursor: not-allowed; opacity: .55; }
.board-variant a[aria-current=true]:has(.rx-tag) { color: light-dark(#fff, #062320); background: var(--rx); box-shadow: 0 2px 12px color-mix(in srgb, var(--rx) 45%, transparent); }
.board-variant a[aria-current=true] .rx-tag { padding: 0; background: none; color: inherit; }
:root { --rx: light-dark(#0f8f86, #3ee0cf); }
.rx-tag { display: inline-grid; place-items: center; padding: 2px 6px; border-radius: 6px; background: var(--rx); color: light-dark(#fff, #062320); font: 800 11px/1.2 var(--display); letter-spacing: .04em; vertical-align: middle; }
.board-search { flex: 0 1 300px; }
.page-head .controls:has(.board-search) { flex-wrap: nowrap; }
.online-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 0; border-radius: 12px; background: var(--panel); color: var(--muted); box-shadow: var(--shadow); font: 600 14px/1 var(--display); white-space: nowrap; cursor: pointer; }
.online-chip[aria-pressed=true] { color: var(--text); box-shadow: var(--shadow), inset 0 0 0 2px var(--green); }
/* "You" in rankings rows and lists (the profile header has its own .you-tag) */
.board-you { flex: none; padding: 3px 7px; border-radius: 99px; background: var(--pink-soft); color: var(--pink); font: 700 11px/1 var(--display); }
.row-who .name .board-you, .table-player b .board-you { display: inline-block; margin-left: 6px; vertical-align: 2px; }
.board-head-side { display: flex; align-items: center; gap: 12px; }
.board-feed { margin-top: 20px; }
.board-more { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding: 14px 18px; border-radius: var(--r); background: var(--panel-2); color: var(--muted); text-decoration: none; font: 600 15px/1 var(--display); }
.board-more span { color: var(--pink); }
.board-more:hover { background: var(--panel-3); color: var(--text); }
.board-note { margin-top: 10px; font-size: 13px; }
.unranked { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.board[hidden] + div .unranked:first-child, .hall-main > .unranked:first-child { margin-top: 0; padding-top: 0; border: 0; }
.unranked h3 { margin-bottom: 10px; color: var(--muted); font: 700 13px/1 var(--display); text-transform: uppercase; letter-spacing: .06em; }
.unranked ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; }
.mini-player { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; color: inherit; text-decoration: none; }
.mini-player:hover { background: var(--panel-2); }
.mini-player > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mini-player b { display: flex; align-items: center; gap: 6px; font: 700 15px/1.2 var(--display); }
.mini-player small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.board-item { position: relative; list-style: none; border-radius: var(--r); }
button.board-row { width: 100%; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.board-row .av { transform-origin: top left; }
.board-item.you > .board-row { box-shadow: var(--shadow), inset 3px 0 0 var(--pink-fill); }
.board-row .row-country .presence { margin-left: 2px; }
/* Open: the row keeps its place (invisible), the card lies over it and the rows below, which dim. Nothing moves. */
.board-item.open { z-index: 6; }
.board-spot { visibility: hidden; }
.board > .board-item { transition: opacity .3s ease; }
.board:has(> .board-item.open) > .board-item:not(.open) { opacity: .4; }
.board-card { position: absolute; inset: 0 0 auto; border-radius: 16px; background: var(--panel); overflow: hidden; box-shadow: 0 26px 70px #000a, 0 0 0 1px var(--line); }
.board-banner { position: absolute; inset: 0 0 auto; height: 132px; overflow: hidden; }
.board-banner img, .board-banner .tri-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.board-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, #0000 30%, color-mix(in srgb, var(--panel) 85%, transparent) 88%, var(--panel)); }
.board-card .board-row { position: relative; grid-template-columns: 54px auto minmax(0, 1fr) auto; align-items: end; padding: 82px 24px 4px 10px; background: transparent; box-shadow: none; transform: none; }
.board-card .board-row:hover { background: transparent; transform: none; box-shadow: none; }
.board-card .row-stats { display: none; }
.board-card .row-rank { padding-bottom: 20px; color: var(--text); }
.board-card .board-row .av { --size: 96px; box-shadow: 0 0 0 5px var(--panel), 0 10px 28px #0007; }
.board-card .row-who { padding-bottom: 10px; }
.board-card .name { font-size: 26px; }
.board-card .row-value { padding-bottom: 14px; }
.board-card .row-value strong { font-size: 32px; }
.board-peek { position: relative; padding: 2px 24px 20px 74px; }
.board-peek .preview-stats { margin-top: 14px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.board-peek .play-feed { margin: 12px 0 14px; }
.peek-seen { font-size: 15px !important; }
.board-item.fresh .board-banner { animation: board-banner .6s cubic-bezier(.2, .8, .2, 1) both; }
.board-item.fresh .board-peek > * { animation: board-rise .5s cubic-bezier(.2, .8, .2, 1) both; }
.board-item.fresh .board-peek > :nth-child(2) { animation-delay: .06s; }
.board-item.fresh .board-peek > :nth-child(3) { animation-delay: .12s; }
.board-ghost { position: fixed; z-index: 7; margin: 0; pointer-events: none; }
@keyframes board-banner { from { opacity: 0; transform: scale(1.08); } }
@keyframes board-rise { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .board-item.fresh .board-banner, .board-item.fresh .board-peek > * { animation: none; } .board > .board-item { transition: none; } }

.back-link { display: inline-block; margin-bottom: 6px; color: var(--muted); font: 600 14px/1 var(--display); text-decoration: none; }
.back-link:hover { color: var(--pink); }
.rank-table { overflow-x: auto; }
.rank-table table { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-variant-numeric: tabular-nums; }
.rank-table th { padding: 6px 12px; color: var(--muted); font: 600 12px/1 var(--display); text-align: left; text-transform: uppercase; letter-spacing: .06em; }
.rank-table td { padding: 6px 12px; background: var(--panel-2); }
.rank-table td:first-child { border-radius: 12px 0 0 12px; } .rank-table td:last-child { border-radius: 0 12px 12px 0; }
.rank-table tbody tr:hover td { background: var(--panel-3); }
.rank-table .num { text-align: right; white-space: nowrap; }
.rank-table td.num b { font: 700 17px/1 var(--display); }
.rank-table td.num small { margin-left: 2px; color: var(--pink); }
.rank-table tr.you b { color: var(--pink); }
.rank-cell { width: 44px; text-align: center; font: italic 800 18px/1 var(--display); color: var(--muted); }
.rank-cell .medal { position: static; width: 30px; height: 30px; margin: 0 auto; font-size: 16px; }
.rank-table tr:nth-child(1) .medal { background: var(--gold); } .rank-table tr:nth-child(2) .medal { background: var(--silver); } .rank-table tr:nth-child(3) .medal { background: var(--bronze); }
.table-player { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.table-player > span { display: flex; flex-direction: column; gap: 2px; }
.table-player b { font: 700 15px/1.2 var(--display); }
.table-player:hover b { color: var(--pink); }
.table-player small { display: flex; align-items: center; gap: 6px; }
.rank-table .seen { color: var(--muted); font-size: 13px; white-space: nowrap; }
.rank-table .pager { margin-top: 14px; }
@media (max-width: 720px) {
  .page-head .controls:has(.board-search) { flex-wrap: wrap; }
  .board-search { flex: 1 1 100%; }
  .board-card .board-row { grid-template-columns: 30px auto minmax(0, 1fr) auto; padding: 70px 14px 4px 8px; }
  .board-card .board-row .av { --size: 72px; }
  .board-card .name { font-size: 20px; }
  .board-card .row-value strong { font-size: 24px; }
  .board-peek { padding: 2px 14px 16px; }
  .rank-table .seen, .rank-table .score-col { display: none; }
}

/* ---- profile Scores: pinned plays as cards above the list, Classic | Relax switch ---- */
.pin-strip-box:empty { display: none; }
.pin-strip-box { margin-bottom: 18px; }
.pin-strip-title { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; color: var(--muted); font: 700 13px/1 var(--display); text-transform: uppercase; letter-spacing: .06em; }
.pin-strip { list-style: none; margin: 0; padding: 0 0 4px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; }
.pin-card { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 4px; min-height: 132px; padding: 12px 14px; border-radius: 14px; overflow: hidden;
  background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); scroll-snap-align: start; }
.pin-card-art { position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, color-mix(in srgb, var(--gc) 30%, transparent), transparent 70%); }
.pin-card-art img { width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.pin-card-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--panel-2) 15%, color-mix(in srgb, var(--panel-2) 40%, transparent)); }
.pin-card-grade { color: var(--gc); font: italic 800 26px/1 var(--display); }
.pin-card-title { overflow: hidden; color: var(--text); font: 700 15px/1.25 var(--display); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
a.pin-card-title:hover { color: var(--pink); }
.pin-card-map { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; color: var(--muted); white-space: nowrap; }
.pin-card-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: auto; }
.pin-card-pp { font: 800 20px/1 var(--display); }
.pin-card-pp small { margin-left: 1px; color: var(--pink); font: 700 12px/1 var(--display); }
.pin-card-tools { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.pin-card:hover .pin-card-tools, .pin-card:focus-within .pin-card-tools { opacity: 1; }
.pin-card-tools [data-pin] { color: var(--pink); }
@media (hover: none) { .pin-card-tools { opacity: 1; } }
.score-relax { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px 6px 8px; border-radius: 999px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line);
  font: 700 13.5px/1 var(--display); cursor: pointer; }
.score-relax input { position: absolute; opacity: 0; pointer-events: none; }
.score-relax-ui { position: relative; width: 34px; height: 20px; border-radius: 99px; background: var(--panel-3); transition: background .15s; }
.score-relax-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); transition: transform .15s, background .15s; }
.score-relax input:checked + .score-relax-ui { background: var(--rx); }
.score-relax input:checked + .score-relax-ui::after { transform: translateX(14px); background: #fff; }
.score-relax input:focus-visible + .score-relax-ui { outline: 2px solid var(--rx); outline-offset: 2px; }
.p1-section.score-rx { box-shadow: var(--shadow), inset 0 3px 0 var(--rx); }
.score-rx .score-switch a[aria-current=true] { background: var(--rx); color: #062320; box-shadow: none; }
.score-rx .score-pp small:not(.score-weight), .score-rx .pin-card-pp small { color: var(--rx); }
@media (prefers-reduced-motion: reduce) { .pin-card-tools, .score-relax-ui, .score-relax-ui::after { transition: none; } }

/* ---- account menu: places you go; settings live on #/settings ---- */
.menu-group { margin: 10px 12px 2px; color: var(--faint); font: 700 11.5px/1 var(--display); text-transform: uppercase; letter-spacing: .07em; }
.menu-rule { height: 1px; margin: 8px 6px; border: 0; background: var(--line); }
.menu-hint { margin-left: auto; color: var(--faint); font: 500 12px/1 var(--body); }
.panel-av { position: relative; flex: none; }
.panel-av-edit { position: absolute; right: -6px; bottom: -6px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--panel); color: var(--text); box-shadow: 0 2px 8px #0006; cursor: pointer; text-shadow: none; }
.panel-av-edit svg { width: 15px; height: 15px; }
.panel-av-edit:hover, .panel-av-edit:focus-visible { color: var(--pink); }
.panel-av-edit:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }

/* ---- settings page ---- */
.settings-page { max-width: 820px; }
.set-section { display: grid; gap: 14px; margin-bottom: 16px; }
.set-section h2 { font-size: 19px; }
.set-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.set-text { flex: 1 1 260px; display: grid; gap: 4px; }
.set-row .btn-row { margin-top: 0; }
.set-section .menu-official { margin: 0; padding: 0; background: none; box-shadow: none; }
.apikey-form { display: flex; flex-wrap: wrap; gap: 8px; }
.apikey-form input { flex: 1 1 160px; min-width: 0; padding: 8px 12px; border: 0; border-radius: 10px; background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); font: 14px var(--body); }
.apikey-form input[name=client_id] { flex: 0 1 140px; }
.apikey-warn { color: var(--yellow); }
.set-apikey .drawer { margin-top: 0; }
.set-apikey .drawer ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.set-apikey.flash { animation: key-flash 1.6s ease-out; }
@keyframes key-flash { from { box-shadow: var(--shadow), 0 0 0 3px var(--pink); } }
/* The finder's nudge towards a key of your own: a signal strip across the top of the content, beside the rail. */
.key-banner { background: #ffc94a; color: #2b1f00; box-shadow: inset 0 -1px 0 #0002; }
.key-banner.failing { background: #ff5f6f; color: #2e0006; }
.key-banner-in { display: flex; align-items: center; gap: 10px 16px; max-width: 1120px; margin: 0 auto; padding: 12px 40px; }
.key-banner p { flex: 1 1 auto; margin: 0; font-size: 14.5px; line-height: 1.4; } .key-banner p b { font-weight: 700; }
.key-banner-icon { flex: none; }
.key-banner .btn { flex: none; background: #1d1724; color: #fff; box-shadow: none; }
.key-banner .btn:hover, .key-banner .btn:focus-visible { background: #000; color: #fff; }
.key-banner .btn:focus-visible { outline: 2px solid #1d1724; outline-offset: 2px; }
.key-banner-close { flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: inherit; font: 22px/1 var(--body); cursor: pointer; }
.key-banner-close:hover, .key-banner-close:focus-visible { background: #0000001f; }
@media (max-width: 640px) {
  .key-banner-in { position: relative; flex-wrap: wrap; padding: 12px 48px 12px 16px; }
  .key-banner p { flex-basis: calc(100% - 38px); } .key-banner .btn { margin-left: 38px; }
  .key-banner-close { position: absolute; top: 8px; right: 8px; }
}
@media (prefers-reduced-motion: reduce) { .set-apikey.flash { animation: none; } }
.set-section .menu-official h3 { font: 700 19px/1.2 var(--display); color: var(--text); }
.set-section .menu-theme { padding: 0; }
.set-section .theme-swatches button { width: 38px; height: 38px; }
/* the theme gallery: named previews by group, then your own */
.look-themes { display: grid; gap: 16px; }
.theme-gallery { display: grid; gap: 18px; }
.theme-group h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 10px; color: var(--muted); font: 700 12px/1 var(--display); text-transform: uppercase; letter-spacing: .07em; }
.theme-group h3 small { color: var(--faint); font: 500 12.5px/1 var(--body); text-transform: none; letter-spacing: 0; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 10px; }
.theme-card { display: grid; gap: 8px; padding: 6px 6px 9px; border: 0; border-radius: 14px; background: var(--panel-2); color: var(--text); font: 600 13px/1.2 var(--display);
  text-align: center; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); transition: transform .12s ease, box-shadow .12s ease; }
.theme-card:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line), 0 6px 18px #0003; }
.theme-card:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.theme-card[aria-checked=true] { box-shadow: inset 0 0 0 2px var(--pink); }
.tc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; }
.tc-art { position: relative; display: block; height: 64px; overflow: hidden; border-radius: 9px; background: var(--a); box-shadow: inset 0 0 0 1px #8883; }
.tc-panel { position: absolute; inset: 11px 24px 11px 10px; display: grid; align-content: center; gap: 6px; padding: 0 9px; border-radius: 6px; background: var(--b); }
.tc-panel i { display: block; width: 72%; height: 4px; border-radius: 2px; background: var(--t); opacity: .4; }
.tc-panel i + i { width: 46%; opacity: .25; }
.tc-pill { position: absolute; right: 8px; bottom: 8px; width: 30px; height: 12px; border-radius: 99px; background: linear-gradient(90deg, var(--c), var(--d)); box-shadow: 0 1px 4px #0003; }
.tc-auto { background: linear-gradient(135deg, #ece8f3 50%, #1c1a24 50%); }
.tc-auto::before { content: "A"; position: absolute; inset: 0; display: grid; place-items: center; color: #ff66aa; font: 800 22px/1 var(--display); text-shadow: 0 1px 6px #0006; }
.theme-card[aria-checked=true] .tc-art::after { content: "✓"; position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--pink-fill); color: var(--pink-ink); font: 800 12px/1 var(--display); box-shadow: 0 1px 4px #0004; }
.tc-new .tc-art { display: grid; place-items: center; background: none; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--muted) 35%, transparent); color: var(--muted); font: 300 30px/1 var(--display); }
.tc-new:hover .tc-art { color: var(--pink); box-shadow: inset 0 0 0 2px var(--pink); }
.tc-new .tc-name { color: var(--muted); }
.look-hint { font-size: 13.5px; }
.custom-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.custom-name input { width: min(280px, 100%); padding: 8px 12px; border: 0; border-radius: 10px; background: var(--panel); color: var(--text); font: 700 16px/1.2 var(--display);
  box-shadow: inset 0 0 0 1px var(--line); }
.custom-name input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--pink); }
.link-btn.danger { color: var(--red); }
.custom-theme { display: grid; gap: 10px; padding: 14px; border-radius: 14px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.custom-theme h3 { font-size: 15px; }
.custom-theme > p { font-size: 13.5px; }
.custom-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.custom-row .segmented { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.custom-row .segmented button { border: 0; background: none; cursor: pointer; }
.custom-row .segmented button[aria-pressed=true] { color: var(--pink-ink); background: var(--pink-fill); }
.color-pick { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 var(--display); cursor: pointer; }
.color-pick input { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px; background: none; cursor: pointer; }
.color-pick input::-webkit-color-swatch-wrapper { padding: 0; }
.color-pick input::-webkit-color-swatch { border: 0; border-radius: 10px; box-shadow: inset 0 0 0 1px #0003; }
.color-pick input::-moz-color-swatch { border: 0; border-radius: 10px; }
.set-start { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 600 15px/1.2 var(--display); }
.set-start select { padding: 7px 10px; border: 0; border-radius: 9px; background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); font: 600 13px var(--body); }

/* ---- contact ---- */
.contact-page { display: grid; gap: 18px; max-width: 760px; }
.contact-card { display: grid; gap: 14px; }
.contact-form { gap: 14px; }
.contact-topics { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.contact-topics legend { margin-bottom: 8px; color: var(--muted); font: 600 13px/1 var(--display); }
.chip-radio { position: relative; cursor: pointer; }
.chip-radio input { position: absolute; opacity: 0; pointer-events: none; }
.chip-radio span { display: inline-block; padding: 8px 13px; border-radius: 999px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font: 600 13.5px/1 var(--display); }
.chip-radio input:checked + span { background: var(--pink-fill); color: var(--pink-ink); box-shadow: none; }
.chip-radio input:focus-visible + span { outline: 2px solid var(--pink); outline-offset: 2px; }
.contact-form textarea { width: 100%; padding: 12px 14px; border: 0; border-radius: 12px; background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); font: 15px/1.5 var(--body); resize: vertical; }
.contact-form textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--pink); }
.contact-count { justify-self: end; color: var(--faint); }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.contact-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px 12px; padding: 12px 14px; border-radius: 12px; background: var(--panel-2); }
.contact-who { display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font: 700 15px/1 var(--display); }
.contact-topic { color: var(--pink); font: 600 13px/1 var(--display); }
.contact-item time { color: var(--faint); font-size: 13px; }
.contact-text { grid-column: 1 / -1; white-space: pre-wrap; overflow-wrap: anywhere; }
.contact-page.wide { max-width: 1000px; }
.contact-lead { margin-top: -6px; color: var(--muted); font-size: 16px; }
.contact-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.contact-choice { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; padding: 20px; }
.contact-choice-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: color-mix(in srgb, var(--pink) 18%, transparent); color: var(--pink); }
.contact-choice h2 { font-size: 18px; }
.contact-choice p { color: var(--muted); font-size: 14px; line-height: 1.5; }
.contact-choice-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 4px; }
.contact-address-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; color: var(--muted); font-size: 14px; }
.contact-address-line > svg { flex: none; width: 18px; height: 18px; color: var(--pink); }
.contact-address-line a { overflow-wrap: anywhere; }
.contact-copy { min-height: 30px; padding: 0 10px; gap: 6px; font-size: 12.5px; }
.contact-note { color: var(--faint); font-size: 13px; line-height: 1.5; }
.contact-note b { color: var(--muted); font-weight: 600; }

/* ---- server status ---- */
a.server-state { padding: 6px 8px; border-radius: 10px; text-decoration: none; transition: background-color .1s linear; }
a.server-state:hover, a.server-state[aria-current=page] { background: var(--panel-2); }
a.server-state.inline { padding: 4px 8px; }
.status-page { max-width: 860px; }
/* The changelog card follows the status cards; keep the same gap between them. */
.status-page > .status-changes, .status-page > .status-api { margin-top: 18px; }
/* Set up the game: the setup card and the "Then" card. */
.play-setup > .card + .card { margin-top: 18px; }
.status-body { display: grid; gap: 18px; }
.status-body h2 { font-size: 17px; }
.status-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px color-mix(in srgb, var(--green) 20%, transparent); }
.status-hero { display: flex; align-items: center; gap: 20px; padding: 24px 26px; }
.status-hero .status-dot { width: 18px; height: 18px; box-shadow: 0 0 0 7px color-mix(in srgb, var(--green) 20%, transparent); }
.status-hero h2 { margin-bottom: 4px; font-size: 22px; }
.status-hero[data-state=partial] .status-dot { background: var(--yellow); box-shadow: 0 0 0 7px color-mix(in srgb, var(--yellow) 22%, transparent); }
.status-hero[data-state=down] .status-dot { background: var(--red); box-shadow: 0 0 0 7px color-mix(in srgb, var(--red) 22%, transparent); }
.status-parts ul, .status-log ol { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; }
.status-parts li { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); }
.status-parts li > span:not(.status-dot) { display: grid; gap: 3px; flex: 1; }
.status-parts b { font: 700 15px/1.2 var(--display); }
.status-parts small { color: var(--muted); font-size: 13px; }
.status-parts em { color: var(--green); font: 600 13.5px/1 var(--display); font-style: normal; }
.status-parts li[data-ok=false] .status-dot { background: var(--red); box-shadow: 0 0 0 5px color-mix(in srgb, var(--red) 20%, transparent); }
.status-parts li[data-ok=false] em { color: var(--red); }
.status-uptime-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 24px; margin-bottom: 14px; }
.status-uptime dl { display: flex; gap: 22px; margin: 0; }
.status-uptime dl div { display: grid; gap: 4px; }
.status-uptime dt { color: var(--faint); font: 600 12px/1 var(--display); }
.status-uptime dd { margin: 0; font: 800 18px/1 var(--display); }
.status-bars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(90, minmax(0, 1fr)); gap: 2px; height: 38px; }
.status-bars li, .status-legend i { border-radius: 3px; background: var(--green); }
.status-bars li:hover { filter: brightness(1.25); }
.status-bars li[data-level=minor], .status-legend i[data-level=minor] { background: var(--yellow); }
.status-bars li[data-level=major], .status-legend i[data-level=major] { background: var(--red); }
.status-bars li[data-level=none] { background: var(--panel-3); }
.status-bars-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; color: var(--faint); font-size: 12.5px; }
.status-legend { display: inline-flex; align-items: center; gap: 6px; }
.status-legend i { display: inline-block; width: 10px; height: 10px; margin-left: 8px; }
.status-note { margin-top: 12px; font-size: 13px; }
.status-log li { display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--panel-2); font-size: 14px; }
.status-log time { color: var(--muted); }
.status-log li span { font-weight: 600; }
@media (max-width: 640px) { .status-uptime dl { gap: 14px; } .status-legend { display: none; } .status-bars { height: 30px; gap: 1px; } }
/* osu! API use: requests on the server's own key, stacked by kind, with the busiest minute and the limits. */
.status-api { --api-server: var(--pink); --api-players: #6aa8ff; --api-background: var(--faint); }
.status-api .status-uptime-head { margin-bottom: 6px; }
.api-spans { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--panel-2); }
.api-spans button { padding: 6px 12px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 600 13px/1 var(--display); cursor: pointer; }
.api-spans button[aria-pressed=true] { background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
.api-lead { margin: 0 0 14px; font-size: 13.5px; }
.api-stats { display: flex; flex-wrap: wrap; gap: 22px; margin: 0 0 16px; }
.api-stats div { display: grid; gap: 4px; } .api-stats dt { color: var(--faint); font: 600 12px/1 var(--display); }
.api-stats dd { margin: 0; font: 800 18px/1 var(--display); } .api-stats small { color: var(--faint); font-size: 12px; font-weight: 600; }
.api-stats .api-bad { color: var(--red); }
.api-chart { position: relative; height: 150px; padding-top: 4px; border-bottom: 1px solid var(--line); }
.api-axis-top { position: absolute; top: -2px; left: 0; z-index: 2; padding-right: 4px; background: var(--panel); color: var(--faint); font-size: 11.5px; line-height: 1; }
.api-line { position: absolute; left: 0; right: 0; z-index: 1; border-top: 1px dashed var(--yellow); pointer-events: none; }
.api-line[data-kind=advised] { border-color: var(--red); }
.api-line span { position: absolute; right: 0; bottom: 2px; padding: 0 4px; border-radius: 4px; background: var(--panel); color: var(--yellow); font-size: 11px; font-weight: 600; }
.api-line[data-kind=advised] span { color: var(--red); }
.api-bars { list-style: none; position: absolute; inset: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--bars), minmax(0, 1fr)); gap: 1px; align-items: end; }
.api-bars li { position: relative; height: 100%; display: flex; flex-direction: column-reverse; border-radius: 2px 2px 0 0; }
.api-bars li:hover { background: var(--panel-2); }
.api-bars li[data-empty] { background: repeating-linear-gradient(135deg, transparent 0 3px, var(--panel-2) 3px 5px); }
.api-bars i { display: block; min-height: 2px; background: var(--api-server); }
.api-bars i[data-kind=players] { background: var(--api-players); } .api-bars i[data-kind=background] { background: var(--api-background); }
.api-bars i:last-child { border-radius: 2px 2px 0 0; }
.api-bars b { position: absolute; left: 0; right: 0; height: 2px; background: var(--text); opacity: .55; }
.api-bars li[data-limited]::after { content: ''; position: absolute; top: 0; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--red); }
.api-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; color: var(--muted); font-size: 12.5px; }
.api-legend span { display: inline-flex; align-items: center; gap: 6px; } .api-legend i { width: 10px; height: 10px; margin: 0; border-radius: 3px; background: var(--api-server); }
.api-legend i[data-kind=players] { background: var(--api-players); } .api-legend i[data-kind=background] { background: var(--api-background); }
.api-legend i[data-kind=peak] { height: 2px; background: var(--text); opacity: .55; } .api-legend i[data-kind=limited] { width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
@media (max-width: 640px) { .api-chart { height: 120px; } .api-legend { display: flex; } .api-stats { gap: 14px; } }


/* the start page's text for crawlers without JavaScript (home_share.py); the app replaces it on start */
/* Crawler text from home_share.py: hidden while the app starts (a signed-in reload flashed it), shown by index.html's <noscript>. */
.seo-intro { display: none; gap: 12px; max-width: 720px; color: var(--muted); }
.seo-intro h1 { color: var(--text); font-size: 34px; }
.status-changes { display: grid; gap: 14px; justify-items: start; }
.changes-list { display: grid; gap: 18px; width: 100%; }
.release h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font: 800 17px/1.2 var(--display); }
.release-now { padding: 4px 9px; border-radius: 99px; background: var(--pink-soft); color: var(--pink); font: 700 11.5px/1 var(--display); }
.release ul { display: grid; gap: 6px; margin: 0; padding-left: 20px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.release ul ul { margin-top: 6px; }
.release code { padding: 1px 5px; border-radius: 5px; background: var(--panel-2); color: var(--text); font: 600 12.5px ui-monospace, monospace; }
.release b { color: var(--text); }

/* daylist: five maps a day, a home card and #/daylist */
.daylist-slot:empty { display: none; }
.daylist-slot { margin: 22px 0; }
.daylist-chonk { flex: none; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 22px; background: var(--panel-2); }
.daylist-chonk svg { max-width: 84px; height: auto; }
.daylist-kicker { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--pink); font: 800 12.5px var(--display); letter-spacing: .05em; text-transform: uppercase; }
.daylist-kicker span { color: var(--muted); letter-spacing: 0; text-transform: none; font-weight: 600; }
.card .daylist-quote { margin-top: 6px; color: var(--text); font-size: 14.5px; font-style: italic; }
.daylist-quote span { color: var(--muted); font-style: normal; font-size: 13px; }
.card .daylist-rule { margin-top: 4px; color: var(--faint); font-size: 12.5px; }
.card .daylist-note { margin-top: 12px; color: var(--faint); font-size: 12.5px; }
.daylist-tiles { display: inline-flex; gap: 4px; flex: none; }
.daylist-tile { position: relative; display: block; width: 18px; height: 18px; border-radius: 4px; overflow: hidden; background: var(--panel-3); box-shadow: inset 0 0 0 1px var(--line); }
.daylist-tiles.big .daylist-tile { width: 30px; height: 30px; border-radius: 7px; }
.daylist-tiles.huge { gap: 8px; } .daylist-tiles.huge .daylist-tile { width: 52px; height: 52px; border-radius: 11px; }
.daylist-tiles.mini { gap: 3px; } .daylist-tiles.mini .daylist-tile { width: 12px; height: 12px; border-radius: 3px; }
.daylist-tile.great { background: #6ccb5f; box-shadow: none; }
.daylist-tile.pass { background: #e3c446; box-shadow: none; }
.daylist-tile.skip { background: #0d0c12; }
.daylist-tile.fail { background: color-mix(in srgb, #ff5f74 25%, var(--panel-3)); box-shadow: none; }
.daylist-tile.fail b { position: absolute; inset: auto 0 0 0; height: calc(var(--p) * 100%); background: #ff5f74; }
.daylist-card { display: grid; grid-template-columns: auto minmax(0, 1fr) 280px; align-items: center; gap: 22px; padding: 22px;
  background: linear-gradient(110deg, color-mix(in srgb, var(--pink-fill) 18%, var(--panel)), var(--panel) 60%); }
.daylist-card h2 { margin-top: 4px; font: 800 28px/1.1 var(--display); }
.daylist-card h2 a { color: inherit; text-decoration: none; }
.daylist-card-you { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; }
.daylist-card-you > span:not(.daylist-tiles) { flex: 1 1 180px; color: var(--muted); font-size: 13.5px; }
.daylist-card pre { margin: 10px 0 0; white-space: pre-wrap; font: 600 13px/1.5 ui-monospace, monospace; }
.daylist-card-side { display: grid; gap: 8px; align-self: stretch; padding: 14px; border-radius: 14px; background: var(--panel-2); }
.daylist-card-side h3 { color: var(--muted); font: 800 12px var(--display); letter-spacing: .05em; text-transform: uppercase; }
.daylist-card-side ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.daylist-card-side li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 30px; align-items: center; gap: 8px; font-size: 13.5px; }
.daylist-card-side li span:not(.daylist-tiles) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.daylist-card-side li b { text-align: right; font: 800 14px var(--display); }
.daylist-card-side > a { align-self: end; color: var(--pink); font: 700 13px var(--display); }
.daylist-page { display: grid; gap: 16px; }
.daylist-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, auto); align-items: center; gap: 24px; }
.daylist-head { display: flex; align-items: center; gap: 18px; min-width: 0; }
.daylist-head h1 { margin-top: 4px; font: 800 30px/1.1 var(--display); }
.daylist-me { display: grid; justify-items: center; gap: 10px; text-align: center; }
.card .daylist-score { display: grid; color: var(--text); font: 800 46px/1 var(--display); }
.daylist-score small { margin-top: 4px; color: var(--muted); font: 700 12.5px var(--display); }
.card .daylist-standing { max-width: 340px; color: var(--muted); font-size: 13.5px; }
.daylist-share { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 12px; background: var(--panel-2); text-align: left; }
.daylist-share pre { flex: 1; margin: 0; white-space: pre-wrap; font: 600 13px/1.5 ui-monospace, monospace; color: var(--text); }
.daylist-sec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.daylist-sec-head h2 { font-size: 18px; }
.card .daylist-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--muted); font-size: 12px; }
.daylist-legend .daylist-tile { width: 12px; height: 12px; border-radius: 3px; margin-left: 6px; }
.daylist-maps, .daylist-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.daylist-map { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 12px; background: var(--panel-2); }
.daylist-map.next { box-shadow: inset 0 0 0 2px var(--pink-fill); }
.daylist-num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--panel-3); color: var(--muted); font: 800 13px var(--display); }
.daylist-map.great .daylist-num { background: #6ccb5f; color: #10200c; } .daylist-map.pass .daylist-num { background: #e3c446; color: #2a2208; }
.daylist-map.fail .daylist-num { background: #ff5f74; color: #2a080e; } .daylist-map.skip .daylist-num { background: #0d0c12; color: var(--faint); }
.daylist-map.skip .daylist-map-text { opacity: .55; }
.daylist-map-text { display: grid; gap: 3px; min-width: 0; }
.daylist-map-text a { color: inherit; text-decoration: none; }
.daylist-map-text b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 15px var(--display); }
.daylist-map-text small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--muted); font-size: 12.5px; }
.daylist-map-res { display: grid; justify-items: end; gap: 1px; min-width: 70px; }
.daylist-map-res b { font: 800 20px/1 var(--display); }
.daylist-map-res small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.daylist-map-res em { color: var(--faint); font: 700 13px var(--display); font-style: normal; }
.daylist-map.fail .daylist-map-res b { color: #ff8da0; } .daylist-map.great .daylist-map-res b { color: var(--lime); }
.daylist-map-act { display: flex; gap: 6px; }
.daylist-rows { gap: 4px; }
.daylist-rows li { display: grid; grid-template-columns: 22px 24px minmax(70px, 160px) auto 46px 1fr; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: var(--panel-2); }
.daylist-rows li.me { box-shadow: inset 0 0 0 2px var(--pink-fill); }
.daylist-rows li.daylist-unranked { opacity: .7; }
.daylist-rows b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.daylist-place { color: var(--muted); font: 800 14px var(--display); text-align: center; }
.daylist-row-score { font: 800 18px var(--display); text-align: right; }
.daylist-rows small { color: var(--faint); font-size: 12px; }
@media (max-width: 900px) {
  .daylist-card, .daylist-hero { grid-template-columns: 1fr; }
  .daylist-card .daylist-chonk { display: none; }
}
.daylist-streak { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 9px; border-radius: 99px; background: color-mix(in srgb, #ff7a3d 20%, transparent);
  color: #ff9a5c; font: 800 12.5px var(--display); white-space: nowrap; vertical-align: middle; }
.daylist-streak.open { background: var(--panel-2); color: var(--muted); }
.daylist-dust { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; } .daylist-dust b { font-family: var(--display); }
.daylist-hero > .daylist-pay { grid-column: 1 / -1; }
.daylist-pay { display: grid; gap: 6px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, #9b7bff 12%, var(--panel-2)); text-align: left; font-size: 13.5px; }
.daylist-pay p { display: flex; align-items: flex-start; gap: 8px; margin: 0; } .daylist-pay p > .daylist-dust b { font-size: 18px; }
.daylist-pay small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.daylist-pay-streak { color: #ff9a5c; } .daylist-pay-streak span { color: var(--text); }
.daylist-pay-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 99px; background: color-mix(in srgb, #9b7bff 16%, transparent); color: var(--muted); font: 700 12.5px var(--display); white-space: nowrap; }
.daylist-day-dust { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
/* The day's firework: a band chip, the ladder of bands, rare maps. */
.daylist-fw { --fw: #ffd38a; display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 6px; border-radius: 99px; vertical-align: middle;
  background: color-mix(in srgb, var(--fw) 18%, transparent); color: color-mix(in srgb, var(--fw) 70%, var(--text)); font: 700 12px var(--display); white-space: nowrap; }
.daylist-fw svg { color: var(--fw); width: 14px; height: 14px; } .daylist-fw small { color: var(--muted); font-weight: 600; }
.daylist-fw.big { gap: 6px; padding: 5px 14px 5px 10px; font-size: 15px; } .daylist-fw.big svg { width: 20px; height: 20px; }
.fw-sparkler { --fw: #f4c76c; } .fw-fountain { --fw: #66ccff; } .fw-rocket { --fw: #ff9a5c; } .fw-peony { --fw: #ff6fae; }
.fw-chrysanthemum { --fw: #ffc857; } .fw-willow { --fw: #e2b33c; } .fw-finale { --fw: #b07cff; }
.daylist-hero-fw { margin: 6px 0 0; }
.daylist-ladder { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 0 0 4px; padding: 0; list-style: none; }
.daylist-ladder li { display: grid; gap: 2px; min-width: 0; text-align: center; }
.daylist-ladder i { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--fw) 22%, var(--panel-3)); }
.daylist-ladder li.lit i { background: var(--fw); } .daylist-ladder li.here i { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--fw); }
.daylist-ladder span { overflow: hidden; color: var(--muted); font: 700 11px var(--display); text-overflow: ellipsis; white-space: nowrap; }
.daylist-ladder li.here span { color: var(--text); } .daylist-ladder small { color: var(--faint); font-size: 10.5px; }
.daylist-rare { display: inline-block; padding: 0 6px; border-radius: 99px; background: color-mix(in srgb, #b07cff 18%, transparent); color: light-dark(#6c3fc4, #c9a6ff); font: 800 11px var(--display); }
@media (max-width: 640px) { .daylist-ladder small { display: none; } .daylist-ladder span { font-size: 9.5px; } }
.daylist-days { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.daylist-days a { display: grid; grid-template-columns: 112px auto minmax(0, 1fr) 64px 64px; align-items: center; gap: 14px; padding: 8px 12px; border-radius: 10px;
  background: var(--panel-2); color: inherit; text-decoration: none; }
.daylist-days a:hover { background: var(--panel-3); } .daylist-days a.none { opacity: .6; } .daylist-days a.won { box-shadow: inset 0 0 0 1px #ffc85780; }
.daylist-day-date { display: grid; } .daylist-day-date small, .daylist-day-theme small { color: var(--faint); font-size: 12px; }
.daylist-day-theme { display: grid; min-width: 0; font-weight: 600; } .daylist-day-theme, .daylist-day-theme small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.daylist-day-none { width: 72px; color: var(--faint); font-size: 12px; }
.daylist-day-score { display: grid; justify-items: end; font: 800 18px var(--display); } .daylist-day-score small { color: var(--muted); font-size: 12px; } .daylist-days a.won .daylist-day-score small { color: light-dark(#a06d00, #ffc857); }
.daylist-rows-full li { grid-template-columns: 22px 24px minmax(70px, 160px) auto auto 46px 1fr; }
.daylist-points { display: inline-flex; gap: 4px; } .daylist-points i { width: 26px; color: var(--muted); font: 700 12px var(--display); font-style: normal; text-align: center; }
@media (max-width: 640px) {
  .daylist-days a { grid-template-columns: 1fr auto 52px; } .daylist-day-theme, .daylist-day-dust { display: none; }
  .daylist-rows-full li { grid-template-columns: 22px 24px minmax(0, 1fr) auto 40px; } .daylist-rows-full .daylist-points, .daylist-rows-full small { display: none; }
}
@media (max-width: 600px) {
  .daylist-card { padding: 18px; }
  .daylist-card h2, .daylist-head h1 { font-size: 24px; }
  .daylist-head { align-items: flex-start; gap: 12px; } .daylist-head .daylist-chonk { width: 64px; height: 64px; border-radius: 16px; } .daylist-head .daylist-chonk svg { max-width: 56px; }
  .daylist-tiles.huge { gap: 6px; } .daylist-tiles.huge .daylist-tile { width: 44px; height: 44px; }
  .daylist-rows li { grid-template-columns: 22px 24px minmax(0, 1fr) auto 36px; } .daylist-rows small { display: none; }
  .daylist-map { grid-template-columns: 26px minmax(0, 1fr); } .daylist-map-res { grid-column: 2; justify-items: start; }
}

/* seasonal events and card sets (cards-seasons.mjs): event frames on cards, the reward track, the Sets tab, badges */
:root { --season-pumpkin: #ff8a2a; --season-night: #2b1740; }
.mc-frame { position: absolute; inset: 0; z-index: 7; border-radius: inherit; pointer-events: none; }
.mc-frame::before { content: ""; position: absolute; inset: 0; padding: 6px; border-radius: inherit;
  background: repeating-linear-gradient(45deg, var(--season-pumpkin) 0 9px, var(--season-night) 9px 18px);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.frame-festival .mc-frame::before { background: conic-gradient(from 0deg, #ff5c8a, #ffd166, #6ee7ff, #b38bff, #ff5c8a); }
.mc-frame b { position: absolute; top: 3px; left: 50%; translate: -50% 0; max-width: 70%; padding: 2px 9px; border-radius: 99px; overflow: hidden; text-overflow: ellipsis;
  background: var(--season-night); color: #ffd9b8; box-shadow: 0 0 0 2px var(--season-pumpkin); font: 800 10px/1.4 var(--display); white-space: nowrap; }
.frame-festival .mc-frame b { background: #3a1240; color: #ffe6f1; box-shadow: 0 0 0 2px #ff5c8a; }
.map-card.framed .mc-art-top { top: 26px; left: 12px; right: 12px; }   /* below the frame's label */
.map-card.framed { box-shadow: 0 0 18px color-mix(in srgb, var(--season-pumpkin) 40%, transparent), var(--shadow); }
.map-card.frame-festival { box-shadow: 0 0 18px #ff5c8a55, var(--shadow); }
.card-back.back-pumpkin { background: repeating-linear-gradient(45deg, #ffffff08 0 10px, transparent 10px 20px), radial-gradient(circle at 50% 42%, #5a2a7a, var(--season-night) 60%, #140a1d); }
.card-back.back-pumpkin .cb-frame { box-shadow: inset 0 0 0 2px #ff8a2a99, inset 0 0 0 6px #ff8a2a1f; }
.card-back.back-pumpkin .cb-frame::before, .card-back.back-pumpkin .cb-frame::after { background: var(--season-pumpkin); box-shadow: 0 0 8px var(--season-pumpkin); }
.card-back.back-pumpkin .cb-logo { background: linear-gradient(145deg, #ffb35c, #ff7a1a); text-shadow: 0 2px 0 #a8460a; box-shadow: 0 0 0 5px #ffffff26, 0 0 28px #ff8a2a88; }
.card-back.back-pumpkin .cb-logo::before { background: repeating-conic-gradient(#ff8a2a70 0 4deg, transparent 4deg 12deg); }

.season-event { margin-bottom: 22px; padding: 24px 28px 18px; border-radius: 22px; color: #fff; box-shadow: var(--shadow-lift);
  background: radial-gradient(70% 120% at 100% 0%, #5a2a7a, transparent 60%), linear-gradient(120deg, #1d1028, var(--season-night)); }
.season-event.frame-festival { background: radial-gradient(70% 120% at 100% 0%, #7a2a5c, transparent 60%), linear-gradient(120deg, #24102a, #3a1240); }
.season-event-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 30px; }
.season-event h2 { margin: 6px 0 4px; font: 800 26px/1.15 var(--display); }
.season-about { max-width: 640px; color: #d9c9ea; font-size: 14px; }
.season-kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--season-pumpkin); font: 800 12.5px var(--display); text-transform: uppercase; letter-spacing: .04em; }
.season-kicker.quiet { color: var(--muted); }
.season-live { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 25%, transparent); }
.season-count { display: grid; justify-items: end; } .season-count b { color: var(--season-pumpkin); font: 800 46px/1 var(--display); } .season-count small { color: #d9c9ea; }
.season-track { position: relative; list-style: none; margin: 28px 60px 0 22px; padding: 0; height: 132px; }
.season-track::before, .season-track::after { content: ""; position: absolute; left: 0; top: 18px; height: 8px; border-radius: 99px; }
.season-track::before { right: 0; background: #ffffff1f; } .season-track::after { width: var(--p); background: linear-gradient(90deg, #ffb36b, var(--season-pumpkin)); }
.season-track li { position: absolute; left: var(--at); top: 0; z-index: 1; display: grid; justify-items: center; gap: 8px; width: 118px; translate: -50% 0; text-align: center; }
.season-node { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #2a1840; box-shadow: inset 0 0 0 3px #ffffff33; font: 800 15px var(--display); }
.season-track li.got .season-node { background: var(--season-pumpkin); color: #3a1d00; box-shadow: 0 0 16px color-mix(in srgb, var(--season-pumpkin) 60%, transparent); }
.season-reward { display: grid; justify-items: center; gap: 2px; } .season-reward b { font: 700 13px/1.25 var(--display); } .season-reward small { color: #cdb9e2; font-size: 11.5px; line-height: 1.3; }
.season-reward svg { margin-bottom: 2px; } .season-track li:not(.got) .season-reward { opacity: .8; }
.season-pet { image-rendering: pixelated; }
.season-next { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 8px; padding-top: 14px; border-top: 1px solid #ffffff1f; color: #e3d6f0; font-size: 14px; }
.season-next > span { flex: 1 1 260px; }
.season-backs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; color: #cdb9e2; font: 700 12.5px var(--display); }
.season-backs button { padding: 5px 10px; border: 0; border-radius: 99px; background: #ffffff1a; color: #fff; font: 700 12.5px var(--display); cursor: pointer; }
.season-backs button[aria-checked=true] { background: var(--season-pumpkin); color: #3a1d00; }

.season-badge { --s: 52px; display: inline-grid; place-items: center; flex: none; width: var(--s); height: var(--s); margin: calc(var(--s) * .15); border-radius: 30%; rotate: 45deg;
  background: linear-gradient(135deg, #7af5c8, #2bb3a0); box-shadow: inset 0 0 0 3px #fff6, 0 6px 16px #0005; }
.season-badge.k-event { background: linear-gradient(135deg, #ffd166, var(--season-pumpkin)); }
.season-badge i { rotate: -45deg; color: #11312a; font: 800 calc(var(--s) * .42) / 1 var(--display); font-style: normal; }
.season-badge.k-event i { color: #3a1d00; }
.season-badge.k-daylist { background: linear-gradient(135deg, #ff9fcb, #a46bff); } .season-badge.k-daylist i { color: #2b0d1c; }
.season-badge.locked { background: var(--panel-3); box-shadow: inset 0 0 0 2px var(--line); } .season-badge.locked i { color: var(--faint); }
.season-progress { display: block; height: 6px; border-radius: 99px; background: var(--panel-3); overflow: hidden; }
.season-progress i { display: block; width: var(--p); height: 100%; border-radius: inherit; background: var(--lime); }
.season-sets { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 22px; align-items: start; }
.season-shelf { position: sticky; top: 16px; }
.season-shelf ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: calc(100vh - 140px); overflow: auto; }
.season-shelf a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--panel); color: inherit; text-decoration: none; box-shadow: var(--shadow); }
.season-shelf a[aria-current] { box-shadow: inset 0 0 0 2px var(--pink-fill), var(--shadow); }
.season-shelf a > span:last-child { display: grid; gap: 4px; flex: 1; min-width: 0; }
.season-shelf b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 14.5px var(--display); } .season-shelf small { color: var(--muted); font-size: 12px; }
.season-note { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--season-pumpkin) 14%, var(--panel)); color: var(--muted); font-size: 13px; }
.season-album { min-width: 0; padding: 20px 22px; border-radius: 22px; background: var(--panel); box-shadow: var(--shadow); }
.season-album-head { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.season-album-head > div { flex: 1; min-width: 0; } .season-album-head h2 { font: 800 24px/1.15 var(--display); }
.season-total { color: var(--muted); font: 700 18px var(--display); } .season-total b { color: var(--text); font-size: 38px; }
.season-slot { display: grid; align-content: center; justify-items: center; gap: 6px; width: 206px; aspect-ratio: 5 / 7.1; padding: 16px; border-radius: 16px; text-align: center;
  border: 2px dashed var(--line); background: repeating-linear-gradient(135deg, transparent 0 12px, color-mix(in srgb, var(--panel-3) 50%, transparent) 12px 24px); }
.card-grid li.season-slot:hover { transform: none; }
.season-slot-n { color: var(--faint); font: 800 32px var(--display); } .season-slot b { font: 700 15px/1.25 var(--display); } .season-slot small { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.season-slot-hint { color: var(--faint); font-size: 12.5px; }
.season-cabinet { margin-top: 26px; padding: 20px 22px; border-radius: 22px; background: var(--panel); box-shadow: var(--shadow); }
.season-cabinet h3 { margin-bottom: 14px; font: 800 18px var(--display); } .season-cabinet h3 small { margin-left: 8px; color: var(--muted); font-size: 13px; }
.season-cabinet ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 16px 10px; }
.season-cabinet li { display: grid; justify-items: center; gap: 4px; text-align: center; }
.season-cabinet b { font: 700 13px/1.25 var(--display); } .season-cabinet small { color: var(--muted); font-size: 12px; } .season-cabinet li.locked b { color: var(--muted); }
.season-badge-row { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.season-badge-row li { display: flex; align-items: center; gap: 8px; font: 700 13px var(--display); }
@media (max-width: 900px) {
  .season-sets { grid-template-columns: 1fr; } .season-shelf { position: static; } .season-shelf ul { max-height: 260px; }
  .season-track { height: auto; margin: 22px 0 0; display: grid; gap: 12px; }
  .season-track::before, .season-track::after { left: 21px; top: 0; width: 6px; height: auto; bottom: 0; } .season-track::after { height: var(--p); bottom: auto; }
  .season-track li { position: relative; left: 0; translate: none; width: auto; display: flex; align-items: center; gap: 14px; text-align: left; }
  .season-reward { justify-items: start; }
}
@media (max-width: 720px) {
  .season-event { padding: 20px; } .season-event h2 { font-size: 22px; } .season-count b { font-size: 36px; }
  .season-binder .map-card, .season-slot { width: 100%; max-width: 160px; } .card-grid.season-binder { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 8px; padding: 4px 0; justify-items: stretch; }
  .season-binder > li { display: grid; justify-items: center; }
  .season-slot { padding: 10px; } .season-slot-n { font-size: 24px; }
  .season-album { padding: 16px; } .season-album-head h2 { font-size: 20px; } .season-total b { font-size: 28px; }
}

/* bounty board: stardust pinned on maps, taped to a dark board; the first later score that does it collects */
.bounty-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.bounty-head p { margin-top: 4px; }
.bounty-pool { display: grid; justify-items: end; gap: 2px; padding: 12px 18px; border-radius: 16px; background: var(--panel); box-shadow: var(--shadow), inset 0 0 0 1px var(--line); }
.bounty-pool small { color: var(--muted); font: 700 12px var(--display); }
.bounty-pool p { display: flex; align-items: center; gap: 6px; }
.bounty-pool p b { color: light-dark(#6b3fd9, #c9b0ff); font: 900 30px/1 var(--display); text-shadow: 0 0 18px light-dark(#9a6bff33, #9a6bff99); }
.bounty-pool > span { color: var(--faint); font-size: 12.5px; }
.bounty-dust { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; vertical-align: middle; }
.bounty-dust b { color: light-dark(#6b3fd9, #c9b0ff); font: 800 14px var(--display); font-variant-numeric: tabular-nums; }
.bounty-news { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 6px; }
.bounty-news li { padding: 10px 14px; border-radius: 12px; background: var(--panel); box-shadow: inset 3px 0 0 var(--pink-fill); font-size: 14px; }
.bounty-news a, .bounty-map a { color: inherit; }
.bounty-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); align-items: start; gap: 26px 22px; padding: 30px 24px; border-radius: 22px;
  background: radial-gradient(60% 50% at 15% 0%, color-mix(in srgb, var(--pink) 16%, transparent), transparent 70%),
    radial-gradient(50% 50% at 100% 100%, #7b5cff26, transparent 70%),
    repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--line) 45%, transparent) 14px 15px), var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 10px 40px #0004; }
.bounty-card { position: relative; border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); transform: rotate(var(--tilt)); transition: transform .2s, box-shadow .2s; }
.bounty-card:not(.blank):hover, .bounty-card:not(.blank):focus-within { transform: rotate(0) translateY(-4px); box-shadow: var(--shadow-lift), 0 0 0 2px var(--pink-fill); }
.bounty-tape { position: absolute; z-index: 3; top: -9px; left: 50%; width: 74px; height: 20px; margin-left: -37px; border-radius: 3px; transform: rotate(-3deg);
  background: color-mix(in srgb, var(--pink) 45%, transparent); box-shadow: 0 2px 6px #0004; backdrop-filter: blur(2px); }
.bounty-card-art { position: relative; overflow: hidden; border-radius: 16px 16px 0 0; }
.bounty-art { position: relative; display: block; overflow: hidden; height: 92px;
  background: radial-gradient(120% 120% at 20% 10%, hsl(var(--h) 70% 62%), hsl(calc(var(--h) + 40) 55% 32%) 60%, hsl(calc(var(--h) + 80) 45% 16%)); }
.bounty-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bounty-ribbon { position: absolute; left: 0; bottom: 10px; padding: 4px 12px 4px 10px; border-radius: 0 99px 99px 0; background: #000b; color: #fff; font: 800 11px var(--display); letter-spacing: .1em; text-transform: uppercase; }
.bounty-hot { position: absolute; top: 16px; right: 10px; padding: 4px 9px; border-radius: 99px; background: linear-gradient(90deg, #ff5f6d, #ffb05c); color: #2a0d12; font: 800 11.5px var(--display); box-shadow: 0 0 16px #ff7a5c88; }
.bounty-card.hot, .bounty-card.hot:hover { box-shadow: var(--shadow), 0 0 0 2px #ff8a5c, 0 0 34px #ff7a5c77; }
.bounty-card.collected .bounty-ribbon, .bounty-card.expired .bounty-ribbon { display: none; }
.bounty-stamp { position: absolute; top: 50%; left: 50%; display: grid; justify-items: center; padding: 6px 16px; border: 3px solid; border-radius: 12px; transform: translate(-50%, -50%) rotate(-9deg);
  background: #000a; font: 900 22px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.bounty-stamp small { margin-top: 3px; font: 700 11px var(--display); letter-spacing: .02em; text-transform: none; }
.bounty-stamp.ok { border-color: var(--lime); color: var(--lime); box-shadow: 0 0 18px color-mix(in srgb, var(--lime) 35%, transparent); }
.bounty-stamp.off { border-color: var(--faint); color: #d8d3e4; }
.bounty-body { display: grid; gap: 10px; padding: 13px 15px 15px; }
.bounty-map { display: grid; gap: 3px; min-width: 0; }
.bounty-map a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 15.5px var(--display); text-decoration: none; }
.bounty-map a:hover { text-decoration: underline; }
.bounty-map small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--muted); font-size: 12.5px; }
.bounty-ask { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; font-size: 13.5px; }
.bounty-ask small { color: var(--faint); font-size: 12px; }
.bounty-reward { display: flex; align-items: center; gap: 7px; }
.bounty-reward b { color: light-dark(#6b3fd9, #d4bfff); font: 900 34px/1 var(--display); font-variant-numeric: tabular-nums; text-shadow: 0 0 20px light-dark(#9a6bff44, #9a6bffaa); }
.bounty-reward small { color: var(--muted); font: 700 12px var(--display); }
.bounty-card footer { display: flex; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.bounty-pet { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--panel-2); }
.bounty-av { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: hsl(var(--h) 55% 45%); color: #fff; font: 800 16px var(--display); }
.bounty-card footer > span:last-child { display: grid; gap: 1px; min-width: 0; font-size: 13px; }
.bounty-card footer em { color: var(--faint); font-style: normal; font-weight: 500; }
.bounty-card footer i { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.bounty-card footer small { color: var(--faint); font-size: 12px; }
.bounty-actions { display: flex; justify-content: flex-end; }
.bounty-card.collected .bounty-art, .bounty-card.expired .bounty-art { filter: grayscale(.7) brightness(.55); }
.bounty-card.collected .bounty-body, .bounty-card.expired .bounty-body { opacity: .7; }
.bounty-card.expired .bounty-reward b { text-decoration: line-through; text-shadow: none; color: var(--muted); }
.bounty-card.blank { background: color-mix(in srgb, var(--panel) 75%, transparent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pink) 55%, transparent); }
.bounty-card.blank .bounty-body { padding-top: 22px; }
.bounty-card.blank h2 { font: italic 900 22px var(--display); text-transform: uppercase; color: var(--pink); }
.bounty-post { display: grid; gap: 14px; }
.bounty-field { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.bounty-field > span:first-child, .bounty-field legend { padding: 0; color: var(--muted); font: 700 12.5px var(--display); }
.bounty-field legend { margin-bottom: 6px; }
.bounty-field small { color: var(--faint); font-weight: 500; }
.bounty-field input { width: 100%; min-width: 0; box-sizing: border-box; padding: 9px 11px; border: 0; border-radius: 10px; background: var(--panel-2); color: var(--text); font: inherit; font-size: 13.5px; }
.bounty-find { display: flex; gap: 6px; }
.bounty-picked { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; background: var(--panel-2); min-width: 0; }
.bounty-picked .bounty-art { width: 60px; height: 42px; flex: none; border-radius: 10px; }
.bounty-picked > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; flex: 1; }
.bounty-picked b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 14px var(--display); }
.bounty-picked small { color: var(--muted); font-size: 12px; }
.bounty-chip, .bounty-seg button, .bounty-targets button { border: 0; border-radius: 9px; background: var(--panel-2); color: var(--text); font: 700 12.5px var(--display); cursor: pointer; }
.bounty-chip { flex: none; padding: 6px 10px; background: var(--panel-3); }
.bounty-seg, .bounty-targets { display: flex; flex-wrap: wrap; gap: 6px; }
.bounty-seg button { display: inline-flex; align-items: center; gap: 4px; padding: 8px 11px; }
.bounty-seg.small button { padding: 6px 10px; font-size: 12px; }
.bounty-seg button[aria-pressed=true], .bounty-targets button[aria-pressed=true] { background: var(--pink-fill); color: var(--pink-ink); }
.bounty-seg button[disabled] { opacity: .45; cursor: not-allowed; }
.bounty-targets { display: grid; gap: 4px; margin-bottom: 6px; }
.bounty-targets button { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; text-align: left; }
.bounty-targets button span { color: inherit; opacity: .8; font-weight: 600; }
.bounty-hint { color: var(--faint); font-size: 12.5px; }
.bounty-wallet { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.bounty-wallet.short { padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, #ff6b6b 14%, transparent); color: light-dark(#c22d43, #ff9aa6); }
.bounty-error:empty { display: none; }
.bounty-error { color: light-dark(#c22d43, #ff9aa6); font-size: 13px; }
.bounty-post .btn.primary { justify-self: start; }
.bounty-post .btn.primary[disabled] { opacity: .5; cursor: not-allowed; }
.bounty-empty { margin-top: 14px; text-align: center; }
.bounty-rules { margin-top: 14px; font-size: 13px; }
@media (max-width: 720px) {
  .rail-nav a[data-nav=bounties] { display: none; }
  .bounty-pool { justify-items: start; }
  .bounty-board { padding: 22px 12px; grid-template-columns: 1fr; }
}


/* ---- Social: one day on the server as a digest (social-page.mjs) ----------------------------------------------------- */
.so-page { max-width: 1500px; }
.so-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 14px 24px; margin-bottom: 16px; }
.so-kicker { margin: 0 0 4px; color: var(--pink); font: 800 12px var(--display); letter-spacing: .08em; text-transform: uppercase; }
.so-head h1 { font: 800 32px var(--display); }
.so-summary { max-width: 48em; margin: 6px 0 0; color: var(--muted); font-size: 16px; line-height: 1.5; } .so-summary b { color: var(--text); }
.so-days { display: flex; align-items: end; gap: 10px; }
.so-week { display: flex; align-items: end; gap: 4px; height: 44px; }
.so-week a { display: flex; align-items: end; width: 14px; height: 100%; } .so-week i { width: 100%; height: calc(var(--v) * 100%); min-height: 4px; border-radius: 3px; background: color-mix(in srgb, var(--pink) 28%, var(--panel-3)); }
.so-week a:hover i { background: color-mix(in srgb, var(--pink) 45%, var(--panel-3)); } .so-week a.on i { background: var(--pink); }
.so-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 16px; }
.so-hl { position: relative; display: grid; align-content: start; gap: 8px; min-width: 0; padding: 14px 16px; border-radius: 18px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-soft, 0 1px 3px #0002); }
.so-hl > small { color: var(--pink); font: 800 11px var(--display); letter-spacing: .08em; text-transform: uppercase; }
.so-hl p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 13.5px; } .so-hl p a { color: inherit; font-weight: 700; } .so-hl strong { color: var(--pink); }
.so-hl.top { background: linear-gradient(0deg, color-mix(in srgb, var(--panel) 94%, transparent) 45%, color-mix(in srgb, var(--panel) 45%, transparent)), var(--c) center / cover; }
.so-hl-title { color: inherit; font: 800 19px var(--display); text-decoration: none; } .so-hl-title span { color: var(--muted); font-size: 14px; }
.so-hl.fw { background: radial-gradient(120% 120% at 100% 0, color-mix(in srgb, #b07cff 18%, var(--panel)), var(--panel) 60%); }
.so-hl-fw { font: 800 23px var(--display) !important; color: light-dark(#6c3fc4, #c9a6ff); } .so-hl-fw span { color: var(--muted); font-size: 14px; }
.so-hl-big { font: 800 24px var(--display) !important; color: var(--green); }
.so-hl-link { justify-self: start; color: var(--pink); font: 700 12.5px var(--display); }
.so-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 16px; align-items: start; } .so-grid.past { grid-template-columns: minmax(0, 1fr); }
.so-list > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .so-list h2 { font-size: 17px; }
.so-tabs { display: flex; gap: 3px; padding: 3px; border-radius: 10px; background: var(--panel-2); }
.so-tabs a { padding: 5px 11px; border-radius: 8px; color: var(--muted); font: 700 12.5px var(--display); text-decoration: none; }
.so-tabs a[aria-selected=true] { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px #0002; }
.so-list ol { display: grid; margin: 0; padding: 0; list-style: none; }
.so-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto 70px; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 12px; }
.so-row + .so-row { box-shadow: 0 -1px 0 var(--line); } .so-row:hover, .so-row:hover + .so-row { box-shadow: none; } .so-row:hover { background: var(--panel-2); }
.so-row.top { background: color-mix(in srgb, var(--pink) 7%, transparent); }
.so-row p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; font-size: 13.5px; line-height: 1.35; }
.so-row p a { color: inherit; } .so-row p a b, .so-who { font-weight: 700; } .so-who { text-decoration: none; } .so-row p strong { color: var(--pink); } .so-row p small { color: var(--muted); }
.so-row time { justify-self: end; color: var(--faint); font-size: 12px; white-space: nowrap; }
.so-thumb { width: 64px; height: 28px; border-radius: 6px; background: var(--c) center / cover, var(--panel-3); }
.so-run { display: inline-flex; gap: 3px; } .so-more { align-self: center; margin-left: 2px; color: var(--muted); font: 700 11px var(--display); }
.so-mini { display: inline-grid; place-items: end start; width: 34px; height: 22px; padding: 0 3px; border-radius: 5px; background: linear-gradient(0deg, #000a, #0000 70%), var(--c) center / cover, var(--panel-3); text-decoration: none; }
.so-mini .so-grade { font-size: 10.5px; text-shadow: 0 1px 2px #000; }
.so-grade { font: 800 13px var(--display); font-style: normal; } .so-grade.gSS { color: #ffe27a; } .so-grade.gS { color: #e0a92a; } .so-grade.gA { color: #5cbf4a; } .so-grade.gB { color: #4aa8e0; } .so-grade.gC, .so-grade.gD { color: #b58ad8; }
.so-mods { padding: 0 6px; border-radius: 6px; background: var(--panel-2); font: 700 11.5px var(--display); }
.so-mode { padding: 0 7px; border-radius: 99px; background: var(--panel-2); color: var(--muted); font: 700 11px var(--display); }
.so-badge { padding: 1px 8px; border-radius: 99px; background: var(--pink-soft); color: var(--pink); font: 700 12px var(--display); }
.so-hi { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.so-cheers { display: inline-flex; gap: 3px; }
.so-cheer { display: inline-flex; align-items: center; gap: 3px; min-width: 28px; height: 25px; padding: 0 7px; border: 0; border-radius: 99px; background: var(--panel-2); color: var(--muted); font: 700 11.5px var(--display); cursor: pointer; }
span.so-cheer { cursor: default; } button.so-cheer:hover { background: var(--panel-3); color: var(--text); }
.so-cheer[aria-pressed=true] { background: color-mix(in srgb, #ff7a3d 22%, transparent); color: #ff8a4a; }
.so-cheer[data-cheer=heart][aria-pressed=true] { background: color-mix(in srgb, var(--pink) 20%, transparent); color: var(--pink); }
.so-cheer[data-cheer=gg][aria-pressed=true] { background: color-mix(in srgb, #ffc857 22%, transparent); color: #c99a20; }
.so-cheer.popped { animation: so-pop .35s ease-out; } @keyframes so-pop { 40% { transform: scale(1.25); } }
.so-more-box { display: grid; justify-items: center; padding: 12px 0 4px; } .so-empty { margin: 8px 0; }
.so-online h2 { font-size: 17px; margin-bottom: 8px; } .so-online h2 small { color: var(--muted); font-size: 13px; }
.so-online ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.so-online li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 4px; }
.so-online li span { display: grid; min-width: 0; } .so-online a { color: inherit; text-decoration: none; } .so-online small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-dm { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--panel-2); color: var(--muted); cursor: pointer; } .so-dm:hover { color: var(--pink); }
@media (max-width: 1000px) { .so-grid { grid-template-columns: minmax(0, 1fr); } .so-side { order: -1; } }
@media (max-width: 640px) { .so-row { grid-template-columns: 38px minmax(0, 1fr) auto; } .so-row .so-thumb, .so-row > span:empty { display: none; }
  .so-row .so-cheers { grid-column: 2; grid-row: 2; } .so-row time { grid-column: 3; grid-row: 1; } .so-head h1 { font-size: 26px; } }
@media (prefers-reduced-motion: reduce) { .so-cheer.popped { animation: none; } }

/* ---- Ranked Play (ranked-page.mjs, ranked-kit.mjs; the profile block and the Social digest use these too) ------------ */
/* Tier badges: a small gem in the tier's color and its name. --t is the gem, --t-ink the text (darker on light themes). */
.rk-tier { --t: #9aa0b5; --t-ink: var(--muted); display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 2px 8px 2px 7px; border-radius: 99px;
  background: color-mix(in srgb, var(--t) 17%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t) 30%, transparent);
  color: var(--t-ink); font: 700 11.5px/1.35 var(--display); white-space: nowrap; }
.rk-tier i { width: 7px; height: 7px; border-radius: 2px; rotate: 45deg; background: linear-gradient(135deg, color-mix(in srgb, var(--t) 45%, #fff), var(--t)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--t) 60%, #000); }
.rk-tier.big { gap: 7px; padding: 4px 12px 4px 10px; font-size: 14px; } .rk-tier.big i { width: 10px; height: 10px; }
.rk-tier.t-copper { --t: #c8693f; --t-ink: light-dark(#97401c, #f0a581); }
.rk-tier.t-bronze { --t: #b48a45; --t-ink: light-dark(#76561c, #e1bd80); }
.rk-tier.t-silver { --t: #9eabbd; --t-ink: light-dark(#4f5b6c, #d4dce8); }
.rk-tier.t-gold { --t: #e8b21f; --t-ink: light-dark(#7f5c00, #ffd75e); }
.rk-tier.t-platinum { --t: #34c1ae; --t-ink: light-dark(#0f6f62, #7cefdb); }
.rk-tier.t-diamond { --t: #5aa7ff; --t-ink: light-dark(#1f5cb3, #a3cbff); }
.rk-tier.t-champion { --t: #e0459b; --t-ink: light-dark(#a8175f, #ff9ccd); background: linear-gradient(100deg, color-mix(in srgb, #e0459b 20%, transparent), color-mix(in srgb, #8a5cff 20%, transparent)); }
.rk-tier.t-champion i { background: linear-gradient(135deg, #ffd2ea, #e0459b 55%, #8a5cff); }
.rk-tier.placing { box-shadow: inset 0 0 0 1px var(--line); background: var(--panel-2); } .rk-tier.placing i { background: none; box-shadow: inset 0 0 0 1.5px var(--faint); }
.rk-delta { font: 800 12.5px var(--display); font-style: normal; white-space: nowrap; } .rk-delta.up { color: var(--green); } .rk-delta.down { color: var(--red); } .rk-delta.even { color: var(--muted); }
.rk-upset { padding: 1px 7px; border-radius: 99px; background: color-mix(in srgb, #ffc857 22%, transparent); color: light-dark(#8a6400, #ffd27a); font: 800 10.5px/1.5 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.rk-hidden { color: var(--muted); font-style: italic; }
.rk-verb { color: var(--muted); font-size: 12.5px; }
/* the page */
.rk-me { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-bottom: 16px; }
.rk-me.empty h2 { font-size: 18px; } .rk-me.empty p { margin: 4px 0 0; font-size: 14px; }
.rk-me-head { display: grid; justify-items: start; gap: 6px; } .rk-me-head > small { color: var(--pink); font: 800 11px var(--display); letter-spacing: .08em; text-transform: uppercase; }
.rk-dots { display: flex; gap: 5px; } .rk-dots i { width: 22px; height: 6px; border-radius: 3px; background: var(--panel-3); } .rk-dots i.on { background: var(--pink-fill); }
.rk-facts { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0; }
.rk-facts dt { color: var(--muted); font: 600 11.5px var(--display); text-transform: uppercase; letter-spacing: .06em; } .rk-facts dd { margin: 0; font: 800 19px/1.3 var(--display); }
.rk-progress { display: grid; gap: 6px; flex: 1 1 220px; max-width: 360px; }
.rk-bar { height: 8px; border-radius: 99px; background: var(--panel-3); overflow: hidden; }
.rk-bar i { display: block; width: var(--to); height: 100%; border-radius: inherit; background: var(--pink-fill); }
.rk-next { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; color: var(--muted); font-size: 13.5px; } .rk-next b { color: var(--text); }
.rk-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; } .rk-head h2, .rk-panel h2 { font-size: 17px; }
.rk-panel h2 { margin-bottom: 8px; } .rk-panel h2 small { color: var(--muted); font-size: 13px; }
.rk-ladder .table-player small { margin-top: 2px; }
.rk-streak.up { color: var(--green); } .rk-streak.down { color: var(--red); }
.rk-wl, .rk-col-streak { font: 700 14px var(--display); }
.rk-side-col { display: grid; gap: 16px; }
.rk-matches, .rk-placing, .rk-history, .rk-rounds { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.rk-match { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 7px 8px; border-radius: 12px; color: inherit; text-decoration: none; font-size: 13.5px; }
.rk-matches li + li .rk-match { box-shadow: 0 -1px 0 var(--line); } .rk-matches li:hover .rk-match, .rk-matches li:hover + li .rk-match { box-shadow: none; }
.rk-pair { display: grid; gap: 3px; min-width: 0; }
.rk-pair .rk-side { display: flex; } .rk-pair .rk-delta { margin-left: auto; padding-left: 8px; }
.rk-side.loss b { color: var(--muted); font-weight: 600; } .rk-pair .rk-side b, .rk-pair .rk-hidden { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-draw { padding: 1px 7px; border-radius: 99px; background: var(--panel-3); color: var(--muted); font: 800 10.5px/1.5 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.rk-all { justify-self: center; margin-top: 8px; } .rk-panel { display: grid; }
.rk-match:hover, .rk-hist:hover { background: var(--panel-2); }
.rk-side { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .rk-side b { font-weight: 700; } .rk-side.me b { color: var(--pink); }
.rk-when { display: grid; justify-items: end; gap: 4px; color: var(--faint); font-size: 12px; white-space: nowrap; }
.rk-placing li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 5px 4px; } .rk-placing a { color: inherit; text-decoration: none; } .rk-placing .rk-tier { margin-left: auto; }
/* one match */
.rk-match-page h1 { overflow-wrap: anywhere; } .rk-vs { color: var(--muted); font-size: .6em; }
.rk-players { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 16px; }
.rk-player { display: flex; align-items: center; gap: 16px; } .rk-player p { margin: 0; }
.rk-player.win { box-shadow: inset 0 3px 0 var(--green); } .rk-player.loss { box-shadow: inset 0 3px 0 var(--red); }
.rk-player-name { font: 800 20px var(--display); } .rk-player-name a { color: inherit; text-decoration: none; }
.rk-result { color: var(--muted); font: 700 13px var(--display); text-transform: uppercase; letter-spacing: .06em; } .rk-player.win .rk-result { color: var(--green); }
.rk-rating { font-size: 14px; color: var(--muted); } .rk-rating b { color: var(--text); font: 800 17px var(--display); }
.rk-rounds > li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 4px; }
.rk-rounds > li + li { box-shadow: 0 -1px 0 var(--line); }
.rk-rounds a { color: inherit; } .rk-rounds div { display: grid; gap: 2px; min-width: 0; } .rk-rounds div small { color: var(--muted); }
.rk-round { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--panel-2); font: 800 13px var(--display); }
.rk-scores { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.rk-scores li { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); } .rk-scores li.best { color: var(--text); } .rk-scores li.best b { color: var(--pink); }
/* the profile block */
.rk-pro { display: grid; gap: 14px; }
.rk-pro-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.rk-pro-rating { display: flex; align-items: baseline; gap: 6px; margin: 0; } .rk-pro-rating b { font: 800 30px/1 var(--display); } .rk-pro-rating small { color: var(--muted); }
.rk-chart { position: relative; height: 140px; margin: 6px 0; border-radius: 8px; cursor: crosshair; }
.rk-chart:focus-visible { outline: 2px solid var(--pink-fill); outline-offset: 4px; }
.rk-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rk-chart .rk-tierline { stroke: var(--faint); stroke-opacity: .55; stroke-width: 1; stroke-dasharray: 4 5; fill: none; vector-effect: non-scaling-stroke; }
.rk-chart .rk-line { stroke: var(--pink-fill); stroke-width: 2.5; fill: none; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rk-chart .rk-area { fill: color-mix(in srgb, var(--pink-fill) 10%, transparent); }
.rk-tiername { position: absolute; right: 2px; translate: 0 -120%; color: var(--faint); font: 700 11px var(--display); pointer-events: none; }
.rk-dot { position: absolute; width: 10px; height: 10px; translate: -50% -50%; border-radius: 50%; background: var(--panel); box-shadow: inset 0 0 0 2.5px var(--pink-fill); pointer-events: none; }
.rk-dot.hover { background: var(--pink-fill); box-shadow: 0 0 0 3px var(--panel); }
.rk-sub { margin: 4px 0 0; color: var(--muted); font: 700 12px var(--display); text-transform: uppercase; letter-spacing: .06em; }
.rk-hist { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto 76px; align-items: center; gap: 10px; padding: 6px; border-radius: 10px; color: inherit; text-decoration: none; font-size: 13.5px; }
.rk-hist time { justify-self: end; color: var(--faint); font-size: 12px; white-space: nowrap; }
.rk-opp { display: flex; align-items: center; gap: 6px; min-width: 0; } .rk-opp b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-after { font: 700 14px var(--display); white-space: nowrap; }
.rk-res { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--panel-3); color: var(--muted); font: 800 12px var(--display); }
.rk-res.win { background: color-mix(in srgb, var(--green) 20%, transparent); color: var(--green); } .rk-res.loss { background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red); }
.rk-more { display: grid; justify-items: center; } .rk-more:empty { display: none; }
/* the Social digest */
.so-hl.duel { background: radial-gradient(120% 120% at 0 0, color-mix(in srgb, #5aa7ff 16%, var(--panel)), var(--panel) 60%); }
.so-hl p.so-hl-duel { flex-wrap: nowrap; } .so-hl-duel > a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-hl-rating { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--muted); white-space: nowrap; } .so-hl-rating b { color: var(--text); }
.so-hl .rk-upset { letter-spacing: .04em; }
.so-side { display: grid; gap: 16px; }
.so-ranked h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 17px; } .so-ranked h2 a { font: 700 12.5px var(--display); }
.so-ranked > p { margin: 2px 0 8px; } .so-ranked h3 { margin: 12px 0 4px; color: var(--muted); font: 700 12px var(--display); text-transform: uppercase; letter-spacing: .06em; }
.so-rk-climb { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; } .so-rk-climb a, .so-rk-top a { color: inherit; text-decoration: none; } .so-rk-climb span { color: var(--muted); }
.so-rk-top { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.so-rk-top li { display: flex; align-items: center; gap: 8px; padding: 4px 2px; font-size: 13.5px; } .so-rk-top .rk-tier { margin-left: auto; }
.so-rk-place { width: 14px; color: var(--muted); font: italic 800 14px var(--display); text-align: center; } .so-rk-rating { min-width: 3.2em; font: 700 14px var(--display); text-align: right; }
@media (max-width: 1000px) { .rk-grid .so-side { order: 0; } }
/* The phone's tab bar has no room for an eighth tab: Ranked Play opens from Social's "Ranked today" there. */
@media (max-width: 720px) { .rail-nav a[data-nav=ranked] { display: none; } .rk-col-streak, .rk-col-seen { display: none; } .rk-ladder td, .rk-ladder th { padding-inline: 8px; } .rk-facts { gap: 6px 18px; } .rk-facts dd { font-size: 17px; }
  .rk-hist { grid-template-columns: 26px minmax(0, 1fr) auto; } .rk-hist time { display: none; } .rk-rounds > li { grid-template-columns: 28px minmax(0, 1fr); } .rk-scores { grid-column: 2; } }
.rk-map { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; } .rk-map small { color: var(--muted); }
.rk-player > a { text-decoration: none; }