/* Layout: covers are the visual. A blurred, slowly drifting backdrop made from the player's own
   covers sits behind glass surfaces. Light / dark / auto. */
:root {
  --bg: #eef0f3;
  --surface: rgba(255, 255, 255, .80);
  --surface-solid: #ffffff;
  --surface-2: rgba(226, 229, 235, .85);
  --ink: #111216;
  --muted: #5d636d;
  --line: rgba(17, 18, 22, .10);
  --glass: rgba(255, 255, 255, .62);
  --shadow: 0 18px 40px rgba(17, 18, 22, .16);
  --bg-o: .55;
  --g-M: #d9a520; --g-NM: #aab2be; --g-VGp: #4d82e8; --g-VG: #3fa37a;
  --g-Gp: #b59a6c; --g-G: #9c8667; --g-F: #8a6a55; --g-P: #6d5850;
  --coin: #e0a526;
  --font: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --hand: "Caveat", "Bradley Hand", "Segoe Print", cursive;
  --size: min(300px, 64vw);
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235d636d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c0d10; --surface: rgba(26, 28, 33, .74); --surface-solid: #1a1c21; --surface-2: rgba(44, 47, 54, .7); --ink: #f1f2f4; --muted: #a2a8b2; --line: rgba(255, 255, 255, .09);
    --glass: rgba(16, 17, 21, .55); --shadow: 0 18px 44px rgba(0, 0, 0, .55); --bg-o: .42; color-scheme: dark; --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a2a8b2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"] { --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a2a8b2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --bg: #0c0d10; --surface: rgba(26, 28, 33, .74); --surface-solid: #1a1c21; --surface-2: rgba(44, 47, 54, .7); --ink: #f1f2f4; --muted: #a2a8b2; --line: rgba(255, 255, 255, .09);
  --glass: rgba(16, 17, 21, .55); --shadow: 0 18px 44px rgba(0, 0, 0, .55); --bg-o: .42; color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
img { max-width: 100%; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -.02em; }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.coin { display: inline-block; width: .82em; height: .82em; border-radius: 50%; vertical-align: -.08em; margin-left: .22em; background: radial-gradient(circle, #1a1206 0 14%, var(--coin) 16% 60%, #b07a10 62% 70%, var(--coin) 72%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }

/* Global backdrop */
.site-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.site-bg span { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; background-size: cover; background-position: center; filter: blur(90px) saturate(1.6); opacity: var(--bg-o); transition: background-image 1.5s, opacity 1.5s; animation: drift 46s ease-in-out infinite alternate; }
.site-bg span:nth-child(1) { left: -25vmax; top: -30vmax; background-color: #ff7a59; }
.site-bg span:nth-child(2) { right: -28vmax; top: 5vmax; background-color: #6c8cff; animation-duration: 58s; animation-delay: -12s; }
.site-bg span:nth-child(3) { left: 15vmax; bottom: -40vmax; background-color: #3fc3a0; animation-duration: 64s; animation-delay: -30s; }
@keyframes drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6vmax, 4vmax) scale(1.08); } 100% { transform: translate(-5vmax, 7vmax) scale(.95); } }

/* Header */
.top { position: sticky; top: 0; z-index: 20; padding-top: env(safe-area-inset-top, 0px); background: var(--glass); backdrop-filter: saturate(1.6) blur(20px); -webkit-backdrop-filter: saturate(1.6) blur(20px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 14px; padding-block: 10px; flex-wrap: wrap; }
.brand { font-weight: 700; font-size: 19px; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; margin-right: 6px; }
.brand-disc { width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle, var(--g-M) 0 22%, #0b0b0c 24% 100%); box-shadow: inset 0 0 0 4px #1d1d20; }
.proto { font-size: 11px; font-weight: 600; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
nav.tabs { display: flex; gap: 2px; margin-left: auto; padding: 3px; background: var(--surface-2); border-radius: 12px; }
.tab { background: none; border: 0; padding: 7px 14px; border-radius: 9px; color: var(--muted); font-weight: 600; font-size: 14px; white-space: nowrap; }
.tab[aria-selected="true"] { background: var(--surface-solid); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.stat { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat .next { color: var(--muted); font-weight: 500; font-size: 12.5px; }
.pips { display: flex; gap: 4px; }
.pip { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--muted); }
.pip.on { background: var(--ink); border-color: var(--ink); }
.pip-extra { font-size: 12px; font-weight: 700; color: #1a1406; background: var(--coin); border-radius: 999px; padding: 0 6px; line-height: 16px; margin-left: 2px; }
.icon-btn { border: 1px solid var(--line); background: var(--surface); border-radius: 9px; height: 32px; min-width: 32px; padding: 0 8px; font-size: 13px; font-weight: 700; color: var(--muted); display: grid; place-items: center; }
.icon-btn[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); }
.icon-btn svg { width: 16px; height: 16px; fill: currentColor; }

main { padding-block: 28px 64px; }
.head { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.head h2 { font-size: clamp(30px, 4.6vw, 44px); line-height: 1.02; font-weight: 700; }
.head p { margin: 8px 0 0; color: var(--muted); max-width: 60ch; }

.btns { display: flex; gap: 10px; flex-wrap: wrap; }
.btn { border: 1px solid var(--line); background: var(--surface-solid); padding: 11px 18px; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.btn.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.small { padding: 6px 12px; font-size: 13px; }
.btn.danger[data-armed] { background: #e5484d; border-color: #e5484d; color: #fff; }
.panel { background: var(--surface); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border: 1px solid var(--line); border-radius: 18px; padding: 22px; }

/* ---------- Bin ---------- */
.bin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 40px; align-items: center; }
.stage-zone { position: relative; height: calc(var(--size) + 110px); perspective: 1200px; touch-action: pan-y; user-select: none; }
.stack { position: absolute; left: 50%; bottom: 26px; width: var(--size); height: var(--size); transform: translateX(-50%); }
.sleeve { position: absolute; inset: 0; border-radius: 4px; box-shadow: 0 1px 0 rgba(0,0,0,.2), 0 16px 30px rgba(0,0,0,.22); transform-origin: 50% 100%; transition: transform .34s cubic-bezier(.3,.7,.3,1), opacity .3s; overflow: hidden; container-type: inline-size; color: var(--sl-ink, #fff); }
.sleeve::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, rgba(255,255,255,.16) 0 9%, transparent 26%), linear-gradient(0deg, rgba(0,0,0,.12), transparent 30%); }
.sleeve .hole { position: absolute; left: 50%; top: 56%; width: 30%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, #0b0b0c 0 5%, var(--lc) 6% 100%); box-shadow: 0 0 0 7px #121214, 0 0 0 8px rgba(255,255,255,.18); z-index: 2; }
.sleeve.flip { transform: rotateX(-84deg) translateY(12px); opacity: 0; }
.sleeve.pulled { transform: translateY(-80%); opacity: 0; }
/* Sleeves of the crate: house sleeves printed in two or three inks on card, one typeface family
   per kind of music (condensed poster type, serif, geometric, script, pixel). Never a real label's artwork. */
.sleeve { --sl-font: "Anton", "Arial Narrow", sans-serif; --sl-size: 22cqw; --sl-top: 6%; --sl-bottom: auto; --sl-align: left; --sl-case: uppercase; --sl-track: .005em; --sl-lh: .86; }
.sleeve::after { background: linear-gradient(118deg, rgba(255,255,255,.18) 0 8%, transparent 24%), linear-gradient(0deg, rgba(0,0,0,.16), transparent 26%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: auto, auto, 180px 180px; mix-blend-mode: overlay; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 0 18px rgba(0,0,0,.25); }
.sl-name { position: absolute; left: 7%; right: 7%; top: var(--sl-top, 6%); bottom: var(--sl-bottom, auto); z-index: 2; font-family: var(--sl-font, "Anton", sans-serif); font-size: var(--sl-size, 22cqw); font-weight: 400;
  line-height: var(--sl-lh, .86); letter-spacing: var(--sl-track, .005em); text-transform: var(--sl-case, uppercase); text-align: var(--sl-align, left); overflow-wrap: normal; }
.sl-sub { position: absolute; left: 7%; top: 25%; max-width: 64%; z-index: 2; font-size: 4.6cqw; font-weight: 650; letter-spacing: .01em; opacity: .9; }
.sl-q { position: absolute; right: 7%; top: 4%; z-index: 2; font-family: "Syne", var(--font, sans-serif); font-weight: 800; font-size: 28cqw; line-height: 1; opacity: .9; }
/* Families of type */
.genre-rock, .genre-metal, .genre-punk, .genre-hiphop, .genre-rapfr, .genre-reggae { --sl-font: "Anton", "Arial Narrow", sans-serif; }
.genre-jazz, .genre-classique, .genre-chanson, .genre-blues, .genre-folk, .genre-bo, .genre-rnb { --sl-font: "DM Serif Display", Georgia, serif; --sl-case: none; --sl-track: -.01em; --sl-lh: .92; --sl-size: 17cqw; }
.genre-electro, .genre-pop, .genre-asia, .genre-afro { --sl-font: "Syne", var(--font, sans-serif); --sl-size: 16cqw; --sl-case: none; --sl-track: -.04em; --sl-lh: .9; }
.genre-electro .sl-name, .genre-pop .sl-name, .genre-asia .sl-name, .genre-afro .sl-name { font-weight: 800; }
.genre-soul, .genre-disco, .genre-latino { --sl-font: "Yellowtail", "Brush Script MT", cursive; --sl-case: none; --sl-size: 21cqw; --sl-track: 0; --sl-lh: .95; }
.genre-jeux { --sl-font: "Press Start 2P", ui-monospace, monospace; --sl-size: 9cqw; --sl-lh: 1.3; --sl-track: 0; --sl-case: none; }
/* Surprise and reward sleeves: condensed capitals that always fit beside the ? or ★ */
.genre-reward, .genre-mystery { --sl-font: "Anton", "Arial Narrow", sans-serif; --sl-case: uppercase; --sl-track: .01em; --sl-lh: 1.05; }
.genre-reward { --sl-size: 11.5cqw; }
.genre-reward .sl-q { font-size: 21cqw; top: 6%; }
.genre-reward .sl-name, .genre-mystery .sl-name { right: 30%; white-space: nowrap; }
.genre-reward .sl-sub, .genre-mystery .sl-sub { top: 24%; max-width: 62%; line-height: 1.3; }

/* With a real cover: another album of the same style, blurred, the style name printed over it */
.sleeve.has-art { --sl-ink: #fff; background: #141416; }
.sl-art { position: absolute; inset: -6%; z-index: 0; background-size: cover; background-position: center; filter: blur(4px) saturate(1.2) brightness(.8); }
.sl-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, color-mix(in srgb, var(--sl-tint, #000) 70%, rgba(0,0,0,.35)) 0%, transparent 46%, transparent 60%, rgba(0,0,0,.55) 100%); }
.sleeve.has-art .sl-name { text-shadow: 0 2px 14px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.5); filter: none; }
.sleeve.has-art.genre-metal .sl-name { filter: drop-shadow(0 2px 6px rgba(0,0,0,.7)); text-shadow: none; }
.sleeve.has-art.genre-classique { box-shadow: inset 0 0 0 9px rgba(0,0,0,0), inset 0 0 0 10px rgba(246,213,139,.8), 0 16px 30px rgba(0,0,0,.22); }
.genre-rock { --sl-tint: #d7262f; }
.genre-metal { --sl-tint: #5b6470; }
.genre-punk { --sl-tint: #ff2e8c; }
.genre-hiphop { --sl-tint: #ffc21a; }
.genre-rapfr { --sl-tint: #ff2e63; }
.genre-reggae { --sl-tint: #1f7144; }
.genre-jazz { --sl-tint: #163866; }
.genre-classique { --sl-tint: #b8964f; }
.genre-chanson { --sl-tint: #d7263d; }
.genre-blues { --sl-tint: #2b4c9b; }
.genre-folk { --sl-tint: #6b8f3a; }
.genre-bo { --sl-tint: #8e1c1c; }
.genre-rnb { --sl-tint: #a22b78; }
.genre-electro { --sl-tint: #5a24b0; }
.genre-pop { --sl-tint: #ff4f9a; }
.genre-asia { --sl-tint: #f2304f; }
.genre-afro { --sl-tint: #d5661a; }
.genre-soul { --sl-tint: #ea7a1f; }
.genre-disco { --sl-tint: #8a2be2; }
.genre-latino { --sl-tint: #e94f37; }
.genre-jeux { --sl-tint: #1f7a32; }
/* Rock: black card, a red slash torn across */
.genre-rock    { --sl-ink: #f3ebdc; --sl-size: 25cqw; 
  background: linear-gradient(-24deg, transparent 0 58%, #d7262f 58% 77%, transparent 77%), linear-gradient(-24deg, transparent 0 79%, #d7262f 79% 81%, transparent 81%), #171415; }
/* Metal: brushed steel, chrome lettering centred at the top */
.genre-metal   { --sl-ink: #e9ecef; --sl-size: 25cqw; --sl-align: center; --sl-track: .04em;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px), linear-gradient(135deg, transparent 0 46%, rgba(255,255,255,.2) 47%, transparent 48%), radial-gradient(120% 90% at 50% 0%, #4a4e55, #0d0e10 70%); }
.genre-metal .sl-name { background: linear-gradient(180deg, #ffffff 0 42%, #8d949c 50%, #f4f6f8 62%, #6c727a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(0,0,0,.6)); }
/* Punk: fluo yellow, pink tape, lettering cut and slanted */
.genre-punk    { --sl-ink: #111; --sl-size: 27cqw;
  background: linear-gradient(-8deg, transparent 0 62%, #ff2e8c 62% 74%, transparent 74%), linear-gradient(172deg, transparent 0 41%, #111 41% 43.5%, transparent 43.5%), #efef1f; }
.genre-punk .sl-name { transform: rotate(-4deg); transform-origin: 0 0; }
/* Rap US: mustard halftone, big black block letters at the bottom */
.genre-hiphop  { --sl-ink: #111; --sl-size: 24cqw; 
  background: linear-gradient(#ffc21a 0 34%, rgba(255,194,26,.55) 46%, transparent 62%), radial-gradient(circle, #151515 0 30%, transparent 33%) 0 0 / 9px 9px, #ffc21a; }
/* Rap FR: asphalt, a pink spray mark, a yellow road line */
.genre-rapfr   { --sl-ink: #fff; --sl-size: 24cqw; 
  background: radial-gradient(ellipse 30% 22% at 78% 24%, #ff2e63 0 55%, rgba(255,46,99,.5) 62%, transparent 70%), linear-gradient(176deg, transparent 0 79%, #ffd60a 79% 81.5%, transparent 81.5%), repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 7px), linear-gradient(160deg, #4a4a50, #18181b); }
/* Reggae: deep green, sun, red and gold bands */
.genre-reggae  { --sl-ink: #fff3c8; --sl-size: 26cqw;
  background: radial-gradient(circle at 78% 72%, #f7c933 0 15%, transparent 15.5%), linear-gradient(0deg, #0f3d26 0 22%, #f7c933 22% 25%, #c8352a 25% 30%, transparent 30%), linear-gradient(180deg, #1f7144, #0f3d26); }
/* Jazz: midnight blue, mid-century blocks, italic serif */
.genre-jazz    { --sl-ink: #f6eedb; --sl-size: 22cqw; 
  background: linear-gradient(90deg, transparent 0 66%, #f08a24 66% 76%, transparent 76%) 0 0 / 100% 38% no-repeat, linear-gradient(90deg, transparent 0 9%, #f6eedb 9% 11%, transparent 11%), linear-gradient(0deg, transparent 0 30%, rgba(246,238,219,.9) 30% 31%, transparent 31%), #163866; }
.genre-jazz .sl-name { font-style: italic; }
/* Classical: ivory card, gold double frame, centred serif */
.genre-classique { --sl-ink: #2a2116; --sl-align: center; --sl-top: 11%;
  background: linear-gradient(#f5efe1, #f5efe1) padding-box, #f5efe1; box-shadow: inset 0 0 0 9px #f5efe1, inset 0 0 0 10px #b8964f, inset 0 0 0 13px #f5efe1, inset 0 0 0 14px #b8964f, 0 16px 30px rgba(0,0,0,.22); }
/* Chanson: cream paper, red stamp, italic serif */
.genre-chanson   { --sl-ink: #1d1d1f; --sl-size: 21cqw;
  background: radial-gradient(circle at 78% 82%, #d7263d 0 12%, transparent 12.5%), radial-gradient(circle at 78% 82%, transparent 0 14%, #d7263d 14% 15%, transparent 15.5%), repeating-linear-gradient(0deg, #f3ead7 0 22px, #ece0c5 22px 23px); }
.genre-chanson .sl-name { font-style: italic; }
/* Blues: indigo like worn denim, cream serif at the bottom */
.genre-blues     { --sl-ink: #eef3ff; --sl-size: 24cqw; 
  background: repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 5px), radial-gradient(circle at 30% 20%, #3459ad, #0e1a3d 72%); }
/* Folk & country: kraft card, a hill and a sun */
.genre-folk      { --sl-ink: #3b2b14; --sl-size: 14.5cqw;
  background: radial-gradient(circle at 76% 70%, #e8a33d 0 11%, transparent 11.5%), radial-gradient(140% 60% at 30% 118%, #5f7f34 0 52%, transparent 52.5%), linear-gradient(180deg, #e2cd9f, #cdb27a); }
/* Film scores: velvet red between two strips of film */
.genre-bo        { --sl-ink: #f6d58b; --sl-size: 15cqw; --sl-align: center; --sl-top: 13%;
  background: radial-gradient(circle, #f1ece0 0 38%, transparent 42%) 0 2.5% / 11% 5% repeat-x, radial-gradient(circle, #f1ece0 0 38%, transparent 42%) 0 97.5% / 11% 5% repeat-x,
    linear-gradient(#0d0d0d 0 10%, transparent 10% 90%, #0d0d0d 90%), radial-gradient(90% 70% at 50% 40%, #8e1c1c, #2a0808 80%); }
.genre-bo .sl-name { font-style: italic; }
/* R&B: plum night, rose glow, silky italic serif */
.genre-rnb       { --sl-ink: #ffe3f1; --sl-size: 24cqw; 
  background: radial-gradient(110% 70% at 85% 0%, rgba(255,95,162,.75), transparent 60%), linear-gradient(165deg, #2d0836, #6d1a60 70%, #a22b78); }
.genre-rnb .sl-name { font-style: italic; }
/* Electronic: neon grid on deep violet */
.genre-electro { --sl-ink: #8af7ff; --sl-size: 15cqw;
  background: linear-gradient(rgba(138,247,255,.28) 1px, transparent 1px) 0 0 / 100% 16px, linear-gradient(90deg, rgba(138,247,255,.28) 1px, transparent 1px) 0 0 / 16px 100%, radial-gradient(circle at 50% 125%, #5a24b0, #0a0920 70%); }
.genre-electro .sl-name { text-shadow: 0 0 .25em rgba(138,247,255,.75); }
/* Pop: candy gradient and bubbles, lowercase geometric */
.genre-pop     { --sl-ink: #fff; --sl-size: 21cqw;
  background: radial-gradient(circle at 82% 80%, #ffe066 0 13%, transparent 13.5%), radial-gradient(circle at 12% 88%, #7fe0d6 0 17%, transparent 17.5%), linear-gradient(150deg, #ff4f9a, #8d5cff); }
/* J-pop & K-pop: pale pink, red sun */
.genre-asia    { --sl-ink: #2a0f1d; --sl-size: 13.5cqw;
  background: radial-gradient(circle at 74% 74%, #f2304f 0 17%, transparent 17.5%), linear-gradient(180deg, #ffe8ef, #ffcfdc); }
/* Afro & world: terracotta, woven zigzags */
.genre-afro    { --sl-ink: #fff3dc; --sl-size: 14cqw;
  background: linear-gradient(135deg, #f2b33d 25%, transparent 25%) -12px 0 / 24px 24px, linear-gradient(225deg, #f2b33d 25%, transparent 25%) -12px 0 / 24px 24px, linear-gradient(transparent 0 76%, #1c1c1c 76%), linear-gradient(160deg, #d5661a, #84290b); background-repeat: repeat-x, repeat-x, no-repeat, no-repeat; background-position: 0 100%, 0 100%, 0 0, 0 0; }
/* Soul & funk: orange sunburst, script */
.genre-soul    { --sl-ink: #fff4e0;
  background: repeating-conic-gradient(from 0deg at 50% 105%, #c2410c 0 6deg, #ea7a1f 6deg 12deg); }
.genre-soul .sl-name, .genre-disco .sl-name, .genre-latino .sl-name { transform: rotate(-6deg); text-shadow: .04em .05em 0 rgba(0,0,0,.35); }
/* Disco: mirror-ball sparkle on violet */
.genre-disco   { --sl-ink: #fff;
  background: repeating-conic-gradient(from 0deg at 72% 70%, rgba(255,255,255,.3) 0 4deg, transparent 4deg 15deg), radial-gradient(circle at 72% 70%, #ff7ad9, #5b1aa5 62%); }
/* Latin: bright fan of colours */
.genre-latino  { --sl-ink: #fff;
  background: repeating-conic-gradient(from 0deg at 50% 120%, #e94f37 0 10deg, #f6c445 10deg 20deg, #2fa38c 20deg 30deg, #3f7fc5 30deg 40deg); }
/* Video games: CRT green on black, pixel type */
.genre-jeux    { --sl-ink: #b9ffb0; image-rendering: pixelated;
  background: linear-gradient(rgba(0,0,0,.4) 50%, transparent 50%) 0 0 / 100% 4px, radial-gradient(circle, rgba(185,255,176,.18) 0 16%, transparent 16.5%) 0 0 / 22px 22px, #0f2a15; }
.genre-jeux .sl-name { text-shadow: 0 0 .4em rgba(185,255,176,.6), .12em .12em 0 #ff4d4d; }
.genre-mystery { --sl-ink: #fff; background: #0e0e10; }
.genre-mystery::before { content: ""; position: absolute; inset: 0; mix-blend-mode: screen; background: linear-gradient(115deg, transparent 15%, rgba(255,214,120,.55) 32%, rgba(120,210,255,.5) 46%, rgba(255,140,220,.45) 58%, transparent 75%); background-size: 260% 100%; animation: holo 3.2s ease-in-out infinite; }
.genre-mystery { --sl-size: 17cqw; }
.genre-mystery .sl-name { background: linear-gradient(90deg, #ffe39a, #9fe3ff, #ffb3e6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.crate-front { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 30; width: calc(var(--size) + 60px); max-width: 100%; height: calc(var(--size) * .36 + 26px); border-radius: 14px 14px 6px 6px; background: var(--glass); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border: 1px solid var(--line); box-shadow: 0 -10px 30px rgba(0,0,0,.08); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12px; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.bin-side h3 { font-size: 22px; }
.bin-side p { color: var(--muted); margin: 8px 0 18px; }
.hint { font-size: 13px; color: var(--muted); margin-top: 14px; }

/* ---------- Covers & wear ---------- */
.cover { position: relative; width: 100%; height: 100%; overflow: hidden; background: #26272b; container-type: inline-size; isolation: isolate; }
.cover > img { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: sepia(calc(var(--wear) * .07)) saturate(calc(1 - var(--wear) * .07)) contrast(calc(1 - var(--wear) * .035)) brightness(calc(1 + var(--wear) * .012)); }
.cover::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  box-shadow: inset 0 0 0 calc(var(--wear) * .5px) rgba(255,255,255,calc(var(--wear) * .05)), inset 0 0 calc(var(--wear) * 7px) rgba(236,226,206,calc(var(--wear) * .07)); }
.w { position: absolute; inset: 0; pointer-events: none; }
.w.scuff { background-size: cover; mix-blend-mode: screen; opacity: calc(.2 + var(--wear) * .09); }
.w.ring { background: radial-gradient(circle closest-side at var(--rx) var(--ry), transparent 84%, rgba(255,255,255,.55) 89%, rgba(255,255,255,.18) 93%, transparent 97%), radial-gradient(circle closest-side at var(--rx) var(--ry), transparent 30%, rgba(255,255,255,.22) 33%, transparent 36%); mix-blend-mode: screen; opacity: var(--ro); }
.w.residue { inset: auto; left: var(--x); top: var(--y); width: 24%; height: 9%; background: rgba(244,236,214,.62); transform: rotate(var(--a)); clip-path: polygon(0 8%, 30% 0, 62% 6%, 100% 0, 97% 55%, 100% 100%, 55% 92%, 12% 100%, 3% 60%); }
.w.seam.top { inset: 0 6% auto 18%; height: 3px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.9) 12% 80%, transparent); box-shadow: 0 2px 0 rgba(0,0,0,.35); }
.w.seam.right { inset: 14% 0 22% auto; width: 3px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.9) 12% 80%, transparent); box-shadow: -2px 0 0 rgba(0,0,0,.35); }
.w.writing { inset: auto; left: var(--x); top: var(--y); font-family: var(--hand); font-size: 12cqw; line-height: 1; color: #1f3d9c; opacity: .82; transform: rotate(var(--a)); white-space: nowrap; }
.w.stain { inset: auto; left: var(--x); top: var(--y); width: 46%; aspect-ratio: 1; border-radius: 47% 53% 41% 59%; background: radial-gradient(circle, rgba(150,110,60,.05) 55%, rgba(120,80,35,.35) 68%, transparent 72%); mix-blend-mode: multiply; }
.w.tear { background: #efece6; }
.w.tear.tr { inset: 0 0 auto auto; width: 32%; height: 26%; clip-path: polygon(0 0, 100% 0, 100% 100%, 82% 74%, 70% 80%, 55% 52%, 40% 44%, 28% 22%, 10% 14%); }
.w.tear.bl { inset: auto auto 0 0; width: 30%; height: 24%; clip-path: polygon(0 0, 18% 16%, 30% 30%, 46% 46%, 60% 52%, 74% 72%, 100% 100%, 0 100%); }
.w.gloss { background: linear-gradient(125deg, rgba(255,255,255,.22) 0 14%, transparent 34%); }
.w.shrink { background: linear-gradient(115deg, rgba(255,255,255,.34) 0 7%, transparent 20% 58%, rgba(255,255,255,.16) 66%, transparent 76%), linear-gradient(35deg, transparent 72%, rgba(255,255,255,.12) 74%, transparent 77%); z-index: 6; }
.w.holo { z-index: 7; mix-blend-mode: color-dodge; background: linear-gradient(115deg, transparent 25%, rgba(255,236,170,.6) 38%, rgba(160,220,255,.55) 48%, rgba(255,170,230,.45) 56%, transparent 68%); background-size: 260% 100%; animation: holo 3.4s ease-in-out infinite; }
@keyframes holo { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
.chip-tl { clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 4%); }
.chip-tr { clip-path: polygon(0 0, 95% 0, 100% 5%, 100% 100%, 0 100%); }
.chip-bl { clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%, 0 95%); }
.chip-br { clip-path: polygon(0 0, 100% 0, 100% 95%, 95% 100%, 0 100%); }
.fallback { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 12%; color: #fff; font-weight: 700; line-height: 1.1; font-size: clamp(7px, 9cqw, 20px); overflow: hidden; background: radial-gradient(circle at 70% 30%, var(--lc) 0 30%, #1b1c20 31%); }
.fallback small { font-weight: 500; opacity: .8; margin-top: 4px; }

/* Grade sticker */
.grade { position: absolute; z-index: 10; left: 8px; top: 8px; display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 9px 5px; border-radius: 7px; background: var(--gc); color: #111; font-weight: 700; font-size: 13px; line-height: 1; box-shadow: 0 3px 10px rgba(0,0,0,.3); white-space: nowrap; }
.grade small { font-size: 10px; font-weight: 600; opacity: .75; }
.grade.M { background: linear-gradient(110deg, #f4d06a, #fff3c4 40%, #e0a92a 70%, #fbe39a); }
.grade.inline { position: static; box-shadow: none; }
.g-M { --gc: var(--g-M); } .g-NM { --gc: var(--g-NM); } .g-VGp { --gc: var(--g-VGp); } .g-VG { --gc: var(--g-VG); }
.g-Gp { --gc: var(--g-Gp); } .g-G { --gc: var(--g-G); } .g-F { --gc: var(--g-F); } .g-P { --gc: var(--g-P); }
.grade.g-VGp, .grade.g-VG, .grade.g-G, .grade.g-F, .grade.g-P { color: #fff; }
.tag-price { position: absolute; z-index: 10; right: 8px; bottom: 8px; padding: 4px 9px; border-radius: 7px; background: #ffe066; color: #1a1406; font-weight: 700; font-size: 13px; transform: rotate(-4deg); box-shadow: 0 3px 10px rgba(0,0,0,.3); font-variant-numeric: tabular-nums; }
.count { position: absolute; z-index: 10; right: 8px; top: 8px; padding: 3px 8px; border-radius: 999px; background: rgba(0,0,0,.72); color: #fff; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Reveal ----------
   The sleeve and the record share the centre of the screen: while the record comes out, the
   sleeve moves left and the record right by the same amount, so the pair stays centred.
   --rv is sized so the pair (1.5 × --rv wide) and the details fit on any screen. */
.reveal { --rv: min(300px, 56vw, 40vh); position: fixed; inset: 0; z-index: 50; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; background: var(--bg);
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: calc(28px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.reveal > .stage { margin-top: auto; }
.reveal > .rv-actions { margin-bottom: auto; }
.ambient { background-size: cover; background-position: center; }
.stage { position: relative; width: var(--rv); height: var(--rv); flex: none; perspective: 1300px; margin-inline: calc(var(--rv) * .28); }
.rv-record, .rv-sleeve { position: absolute; inset: 0; transition: transform .95s cubic-bezier(.2,.8,.2,1); }
.reveal.is-out .rv-record { transform: translateX(28%); }
.disc { position: absolute; inset: 3%; border-radius: 50%; overflow: hidden; background: repeating-radial-gradient(circle, #111 0 1.5px, #1a1a1c 1.5px 3px); box-shadow: 0 0 0 1px #000, 0 12px 34px rgba(0,0,0,.45); display: grid; place-items: center; }
.disc .sheen { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 30deg, transparent 0 9%, rgba(255,255,255,calc(.16 - var(--wear) * .016)) 14%, transparent 21% 58%, rgba(255,255,255,calc(.13 - var(--wear) * .014)) 63%, transparent 70%); }
.disc .scratch { position: absolute; inset: 0; border-radius: 50%; background-size: cover; mix-blend-mode: screen; opacity: calc(var(--wear) * .11); }
.reveal.is-out .disc { animation: spin 1.8s linear infinite; }
.reveal.is-out.paused .disc { animation-play-state: paused; }
@keyframes spin { to { transform: rotate(360deg); } }
.label { position: relative; width: 36%; aspect-ratio: 1; border-radius: 50%; background: var(--lc, #ccc); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #111; padding: 8%; container-type: inline-size; }
.label::after { content: ""; position: absolute; width: 7%; aspect-ratio: 1; border-radius: 50%; background: #0b0b0c; }
.label b { font-size: 13cqw; font-weight: 700; line-height: 1.05; transform: translateY(-62%); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.label small { font-size: 10cqw; transform: translateY(150%); font-variant-numeric: tabular-nums; }
.rv-sleeve { transform-style: preserve-3d; transition: transform .8s cubic-bezier(.3,.7,.2,1); }
.reveal.is-loading .rv-sleeve { animation: wobble 1.4s ease-in-out infinite; }
@keyframes wobble { 50% { transform: translateY(-6px) rotate(-1deg); } }
.reveal.is-flipped .rv-sleeve { transform: rotateY(180deg); }
.reveal.is-out .rv-sleeve { transform: translateX(-28%) rotateY(180deg); transition-duration: .95s; transition-timing-function: cubic-bezier(.2,.8,.2,1); }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 4px; overflow: hidden; box-shadow: 0 16px 34px rgba(0,0,0,.28); }
.face.back { transform: rotateY(180deg); }
.reveal .stage > .grade { left: calc(-28% - 8px); top: -12px; font-size: 17px; padding: 7px 12px 8px; transform: rotate(-6deg) scale(2.4); opacity: 0; transition: transform .3s cubic-bezier(.5,1.8,.5,1), opacity .15s; }
.reveal.is-stamped .stage > .grade { transform: rotate(-6deg) scale(1); opacity: 1; }
.rv-status { color: var(--muted); min-height: 1.5em; margin: 0; text-align: center; max-width: 46ch; }
.reveal.is-done .rv-status:empty { display: none; }
.rv-info { width: min(560px, 100%); text-align: center; opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .45s; display: grid; justify-items: center; }
.rv-info:empty { display: none; }
.reveal.is-done .rv-info { opacity: 1; transform: none; }
.rv-info h3 { font-size: clamp(24px, 5vw, 38px); line-height: 1.06; overflow-wrap: anywhere; }
.rv-info .artist { font-size: clamp(15px, 3.6vw, 18px); color: var(--muted); margin-top: 4px; }
.facts-line { margin-top: 10px; font-size: 14px; color: var(--muted); }
.badges { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.badge { font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); white-space: nowrap; }
.badge.new { background: var(--ink); color: var(--bg); }
.badge.up { background: color-mix(in srgb, var(--g-VG) 26%, var(--surface-2)); }
.badge.money { background: color-mix(in srgb, var(--coin) 30%, var(--surface-2)); }
/* Preview player in the reveal: one centred line, the source credit underneath */
.rv-info { grid-template-columns: minmax(0, 1fr); }
.rv-info .player { margin: 16px auto 0; flex-wrap: nowrap; width: fit-content; max-width: min(520px, 100%); padding-right: 16px; }
.rv-info .player .track { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-info .player .track { flex: 1 1 auto; min-width: 0; text-align: left; }
.rv-info .player .src { display: none; }
.src-line { margin-top: 6px; font-size: 12px; color: var(--muted); }
.src-line a { color: inherit; }
.rv-actions { opacity: 0; transition: opacity .4s .2s; justify-content: center; }
.reveal.is-done .rv-actions, .reveal.is-error .rv-actions { opacity: 1; }
.reveal.is-loading .rv-actions { visibility: hidden; }
.reveal.is-error #rv-album { display: none; }

/* Player */
.player { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--surface-solid); border: 1px solid var(--line); max-width: 100%; flex-wrap: wrap; }
.play { width: 34px; height: 34px; flex: none; border-radius: 50%; border: 0; background: var(--ink); color: var(--bg); display: grid; place-items: center; }
.play svg { width: 14px; height: 14px; fill: currentColor; }
.player .track { font-size: 13.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player .src { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.player .src a { color: inherit; }
.vol { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); flex: none; }
.vol svg { width: 15px; height: 15px; fill: currentColor; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 92px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--ink) var(--p, 50%), rgba(128,128,128,.3) var(--p, 50%)); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); border: 2px solid var(--surface-solid); box-shadow: 0 1px 3px rgba(0,0,0,.3); }
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--ink); border: 2px solid var(--surface-solid); }
.set input[type="range"] { width: min(260px, 100%); }

/* ---------- Collection ---------- */
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.progress { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.bar { flex: 1; min-width: 120px; max-width: 320px; height: 6px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--ink); border-radius: 6px; }
.summary { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 5px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--gc); }
.chip .odds { color: var(--muted); }
select, input[type="password"], input[type="text"], input[type="number"] { background: var(--surface-solid); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; font: inherit; }
/* Our own arrow, inside the box (the browser's one sat on the rounded border) */
select { -webkit-appearance: none; appearance: none; background-image: var(--chev); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px; padding-right: 38px !important; max-width: 100%; min-width: 0; text-overflow: ellipsis; }
select::-ms-expand { display: none; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 26px 18px; margin-top: 22px; }
.card { background: none; border: 0; padding: 0; text-align: left; min-width: 0; }
.art { position: relative; aspect-ratio: 1; max-width: 100%; border-radius: 4px; overflow: hidden; box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.card .art { transition: transform .18s; }
.card:hover .art { transform: translateY(-3px); }
.card .grade { font-size: 12px; padding: 3px 7px 4px; }
.card-title { font-weight: 700; margin-top: 10px; line-height: 1.25; overflow-wrap: anywhere; }
.card-artist { color: var(--muted); font-size: 14px; }
.card-press { color: var(--muted); font-size: 12.5px; }
.empty { border: 1.5px dashed var(--line); border-radius: 14px; padding: 40px 20px; text-align: center; color: var(--muted); grid-column: 1 / -1; background: var(--surface); }
.empty .btn { margin-top: 14px; }

/* Album sheet */
dialog.sheet { overflow-x: hidden; border: 0; padding: 0; background: var(--surface-solid); color: var(--ink); border-radius: 20px; width: min(920px, calc(100% - 24px)); max-height: calc(100% - 32px); box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(0,0,0,.5); backdrop-filter: blur(4px); }
.sheet-in { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr); gap: 28px; padding: 28px; }
.sheet-bg { position: absolute; inset: -30%; z-index: 0; background-size: cover; background-position: center; filter: blur(60px) saturate(1.5); opacity: .28; pointer-events: none; }
.sheet-in > :not(.sheet-bg) { position: relative; z-index: 1; }
.sheet-in .close { position: absolute; z-index: 2; right: 14px; top: 12px; background: var(--surface-2); border: 0; width: 32px; height: 32px; border-radius: 50%; font-size: 16px; line-height: 1; color: var(--muted); }
.sheet .art { box-shadow: 0 14px 30px rgba(0,0,0,.28); }
.sheet .player { display: flex; width: 100%; border-radius: 16px; padding: 8px 12px 8px 8px; }
.sheet .player .track { flex: 1 1 calc(100% - 50px); white-space: normal; }
.sheet .player .vol { flex: 1; }
.sheet h3 { font-size: 32px; line-height: 1.04; padding-right: 36px; }
.sheet .sub { color: var(--muted); font-size: 16px; margin-top: 4px; }
.sheet h4 { margin: 22px 0 10px; font-size: 15px; }
.copies { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.copy { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.copy.sel { border-color: var(--ink); }
.copy .thumb { width: 64px; height: 64px; border-radius: 3px; overflow: hidden; }
.copy-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cote { font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.copy-press { font-size: 13px; color: var(--muted); margin-top: 3px; overflow-wrap: anywhere; }
.copy-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
.list-editor { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.list-editor input { width: 96px; padding: 6px 9px; }
.speed { font-size: 12.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); }
.speed.fast { background: color-mix(in srgb, var(--g-VG) 30%, var(--surface-2)); }
.speed.slow { background: color-mix(in srgb, var(--coin) 30%, var(--surface-2)); }
.speed.vslow { background: color-mix(in srgb, #e5484d 25%, var(--surface-2)); }
dl.facts { display: grid; grid-template-columns: auto 1fr; gap: 5px 16px; margin: 16px 0 0; font-size: 14px; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
ol.tracks { margin: 0; padding-left: 22px; columns: 2 190px; font-size: 13.5px; color: var(--muted); }
.links { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 16px; font-size: 14px; }
.links a { color: var(--ink); }
.attrib { font-size: 12px; color: var(--muted); margin-top: 8px; }

/* ---------- Shop ---------- */
.shop-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; }
input.shop-name { font-size: clamp(26px, 4vw, 38px); font-weight: 700; letter-spacing: -.02em; border: 0; background: none; padding: 0; width: 100%; color: var(--ink); border-bottom: 1.5px dashed transparent; }
input.shop-name:hover { border-bottom-color: var(--line); }
input.shop-name:focus { border-bottom-color: var(--ink); outline: none; }
.wallet { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.wallet-label { font-size: 13px; color: var(--muted); }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 22px 16px; margin-top: 18px; }
.slot { min-width: 0; }
.slot.empty-slot .art { box-shadow: none; border: 1.5px dashed var(--line); background: var(--surface); display: grid; place-items: center; text-align: center; padding: 14px; color: var(--muted); font-size: 13px; }
.shop-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 330px); gap: 22px; margin-top: 22px; align-items: start; }
.ledger { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 13.5px; }
.ledger li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.ledger .when { color: var(--muted); font-size: 12px; }
.ledger .amt { font-weight: 700; font-variant-numeric: tabular-nums; }
.upgrades { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.shop-cols > div { min-width: 0; }
.shop-cols > div > .panel { min-width: 0; }
.upgrade { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.upgrade p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }

/* ---------- Selling editor ---------- */
.editor { width: 100%; }
.market { margin: 2px 0 8px; font-size: 13px; color: var(--ink); line-height: 1.45; }
.market small { color: var(--muted); }
.sugs { display: flex; gap: 6px; flex-wrap: wrap; }
.sug { border: 1px solid var(--line); background: var(--surface-solid); border-radius: 10px; padding: 6px 10px; font-size: 12.5px; text-align: left; line-height: 1.25; }
.sug b { display: block; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.sug:hover { border-color: var(--ink); }
.list-editor label { font-size: 13px; color: var(--muted); }
.list-editor select { padding: 6px 9px; }
.badge.live { white-space: normal; }
.auc-live { display: grid; gap: 2px; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.auc-live .when { color: var(--ink); font-weight: 600; }
.vs { font-weight: 600; margin-left: 4px; }
.vs.up { color: var(--g-VG); }
.vs.down { color: #d9534f; }

/* ---------- Challenges ---------- */
.tab { position: relative; }
.tab.has-dot::after { content: ""; position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: #e5484d; }
.ch-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ch-top h3 { font-size: 20px; }
.ch-top .when { color: var(--muted); font-size: 13px; }
.ch-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ch-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--surface-solid); border: 1px solid var(--line); }
.ch-row.bonus { background: color-mix(in srgb, var(--coin) 14%, var(--surface-solid)); }
.ch-rw { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ch-prog { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ch-prog .bar { max-width: none; }
.ch-section { font-size: 20px; margin: 30px 0 14px; }
.ch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.ch-card { padding: 18px; display: grid; gap: 8px; align-content: start; }
.ch-card.ready { border-color: var(--ink); }
.ch-card .btn { justify-self: start; }
.ch-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.ch-desc { margin: 0; font-size: 13.5px; color: var(--muted); }
.stage-pips { display: flex; gap: 4px; }
.stage-pips i { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); }
.stage-pips i.on { background: var(--ink); border-color: var(--ink); }
.stage-pips i.ready { background: var(--coin); border-color: var(--coin); }
.genre-reward { --sl-ink: #2a1c00; background: linear-gradient(135deg, #f7d77a, #fff1c2 35%, #e3a821 60%, #fbe39a); }
.genre-reward::before { content: ""; position: absolute; inset: 0; mix-blend-mode: soft-light; background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.8) 40%, transparent 60%); background-size: 260% 100%; animation: holo 3s ease-in-out infinite; }

/* ---------- Duel ---------- */
.quiz { max-width: 640px; }
.q-progress { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.q-prompt { font-size: 21px; font-weight: 700; margin: 8px 0 18px; line-height: 1.3; }
.q-cover { width: min(220px, 60vw); aspect-ratio: 1; border-radius: 4px; overflow: hidden; margin-bottom: 18px; position: relative; }
.q-opts { display: grid; gap: 8px; }
.q-opt { text-align: left; background: var(--surface-solid); border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; font-weight: 500; }
.q-opt:hover:not(:disabled) { border-color: var(--ink); }
.q-opt.right { border-color: var(--g-VG); background: color-mix(in srgb, var(--g-VG) 16%, var(--surface-solid)); }
.q-opt.wrong { border-color: #e5484d; background: color-mix(in srgb, #e5484d 14%, var(--surface-solid)); }
.q-next { margin-top: 18px; }
.score { font-size: 64px; font-weight: 700; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }

/* ---------- Settings ---------- */
.settings { columns: 2 380px; column-gap: 16px; }
.settings > .panel { break-inside: avoid; margin-bottom: 16px; }
.keys { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; margin: 10px 0 0; align-items: center; }
.keys dd { margin: 0; color: var(--muted); }
kbd { font: 600 12.5px/1 var(--font); padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface-solid); box-shadow: 0 1px 0 var(--line); white-space: nowrap; }
.set h3 { font-size: 17px; }
.set p { color: var(--muted); margin: 6px 0 14px; font-size: 14px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row input[type="password"] { flex: 1; min-width: 0; }
label.check { display: flex; gap: 10px; align-items: center; }

footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; background: var(--glass); }
footer .wrap { padding-block: 18px calc(28px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 4px; }
footer a { color: var(--muted); }
.toasts { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60; display: grid; gap: 8px; width: max-content; max-width: calc(100% - 32px); }
.toast { background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 12px; font-weight: 600; box-shadow: var(--shadow); animation: toastIn .3s ease-out; }
@keyframes toastIn { from { transform: translateY(10px); opacity: 0; } }

@media (max-width: 820px) {
  .bin, .shop-cols { grid-template-columns: minmax(0, 1fr); }
  .bin { gap: 20px; }
  .sheet-in { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; }
  .sheet .art { max-width: 260px; }
}
@media (max-width: 640px) {
  .ch-row { grid-template-columns: minmax(0, 1fr) auto; }
  .ch-row .btn, .ch-row > .badge { grid-column: 1 / -1; justify-self: start; }
  .shop-head { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}

/* ---------- Self-hosted fonts (no request to Google: no IP sent to a third party) ---------- */
@font-face { font-family: "Instrument Sans"; src: url("/static/fonts/instrument-sans.woff2") format("woff2"); font-weight: 400 700; font-stretch: 75% 100%; font-style: normal; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("/static/fonts/caveat-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Anton"; src: url("/static/fonts/anton.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Serif Display"; src: url("/static/fonts/dm-serif-display.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Serif Display"; src: url("/static/fonts/dm-serif-display-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Syne"; src: url("/static/fonts/syne-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Yellowtail"; src: url("/static/fonts/yellowtail.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Press Start 2P"; src: url("/static/fonts/press-start-2p.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* ---------- Header account button ---------- */
.me-btn { padding: 0; width: 32px; overflow: hidden; }
.me-avatar, .avatar { display: grid; place-items: center; border-radius: 50%; background: var(--ac, #e0a526); color: #111; }
.me-avatar { width: 26px; height: 26px; }
.me-avatar svg, .avatar svg { width: 62%; height: 62%; fill: currentColor; }
.me-avatar.has-photo, .avatar.has-photo { overflow: hidden; background: var(--surface-2); }
.me-avatar img, .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.photo-ctl { display: grid; gap: 6px; min-width: 0; }
.photo-ctl .btns { gap: 6px; }
.photo-ctl label.btn { cursor: pointer; }
.photo-ctl label.btn:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.avatar { width: 56px; height: 56px; flex: none; }
.avatar.big { width: 84px; height: 84px; }

/* ---------- Auth screen ---------- */
/* Sign-in / sign-up: a dialog over the game, which visitors can explore first */
dialog.auth-dialog { border: 0; padding: 0; background: none; color: var(--ink); width: min(460px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; }
dialog.auth-dialog::backdrop { background: rgba(8, 6, 12, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
dialog.auth-dialog .auth-card { background: var(--surface-solid); }
.auth-reason { margin: 0; font-weight: 600; }
body.guest #tokens, body.guest #wallet-top, body.guest #me-btn, body.guest #level-chip, body.guest #bell { display: none; }
body:not(.guest) #login-btn { display: none; }
.guest-card { max-width: 620px; margin: 6vh auto 0; text-align: center; display: grid; gap: 12px; justify-items: center; }
.guest-card h2 { font-size: clamp(26px, 4vw, 36px); }
.guest-card p { color: var(--muted); margin: 0; max-width: 52ch; }
.auth-card { width: min(440px, 100%); display: grid; gap: 14px; }
.auth-brand { justify-content: flex-start; }
.auth-brand #auth-lang { margin-left: auto; }
.auth-pitch { margin: 0; color: var(--muted); }
.auth-tabs { display: flex; gap: 2px; padding: 3px; background: var(--surface-2); border-radius: 12px; }
.auth-tabs button { flex: 1; border: 0; background: none; padding: 8px; border-radius: 9px; font-weight: 600; color: var(--muted); }
.auth-tabs button[aria-selected="true"] { background: var(--surface-solid); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.form { display: grid; gap: 12px; }
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; margin-bottom: 4px; }
.field select, .field input { width: 100%; }
.field > span { font-size: 13px; font-weight: 600; }
.field small, .form small { color: var(--muted); font-size: 12.5px; }
.form input[type="text"], .form input[type="email"], .form input[type="password"], .form textarea, .form select { width: 100%; background-color: var(--surface-solid); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: inherit; }
.form textarea { resize: vertical; min-height: 64px; }
.check-line { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.check-line input { margin-top: 3px; }
.check-line a, .auth a, .linkish { color: var(--ink); }
.linkish { background: none; border: 0; padding: 0; text-decoration: underline; font-size: 13.5px; cursor: pointer; }
.msg { border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.msg.ok { background: color-mix(in srgb, var(--g-VG) 18%, var(--surface-solid)); }
.msg.err { background: color-mix(in srgb, #e5484d 16%, var(--surface-solid)); }

/* ---------- Account view ---------- */
.acc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.acc-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.acc-grid h3 { font-size: 18px; margin-bottom: 12px; }
.acc-grid h4 { font-size: 14px; margin: 16px 0 8px; color: var(--muted); }
.avatar-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.avatar-picker button { border: 2px solid transparent; background: none; padding: 2px; border-radius: 50%; }
.avatar-picker button[aria-pressed="true"] { border-color: var(--ink); }
.avatar-picker .avatar { width: 40px; height: 40px; }
.genre-picks { display: flex; gap: 6px; flex-wrap: wrap; }
.genre-picks label { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-solid); font-size: 13px; }
.people { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.person { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-solid); }
.person .avatar { width: 36px; height: 36px; }
.person .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.person .who small { display: block; color: var(--muted); font-weight: 500; }
.person .acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.row-input { display: flex; gap: 8px; }
.row-input input { flex: 1; min-width: 0; }
.empty-line { color: var(--muted); font-size: 13.5px; margin: 0; }
dialog.small { width: min(460px, calc(100% - 24px)); }
.pf { padding: 26px; display: grid; gap: 12px; position: relative; }
.pf-head { display: flex; gap: 14px; align-items: center; }
.pf-head h3 { font-size: 24px; }

/* ---------- Footer ---------- */
.foot-links { display: flex; gap: 14px; flex-wrap: wrap; }
.sister a { font-weight: 600; }

/* ---------- Legal pages ---------- */
.legal { max-width: 760px; margin: 0 auto; padding-block: 32px 64px; padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); }
.legal h1 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 8px; }
.legal h2 { font-size: 20px; margin: 28px 0 8px; }
.legal p, .legal li { line-height: 1.6; }
.legal table { width: 100%; border-collapse: collapse; font-size: 14px; }
.legal th, .legal td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal .back { display: inline-block; color: var(--muted); }
.legal-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.legal .panel { margin-top: 18px; }

@media (max-width: 820px) {
  .acc-grid { grid-template-columns: minmax(0, 1fr); }
  .acc-col { display: contents; }
  #acc-profile { order: 1; } #acc-page { order: 2; } #acc-friends { order: 3; } #acc-security { order: 4; } #acc-data { order: 5; }
}
.pf .close { position: absolute; right: 14px; top: 12px; background: var(--surface-2); border: 0; width: 32px; height: 32px; border-radius: 50%; font-size: 16px; line-height: 1; color: var(--muted); }
details summary { cursor: pointer; font-weight: 600; font-size: 14px; }

/* Market (lot 4) */
input[type="search"] { background: var(--surface-solid); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; font: inherit; min-width: 0; }
.mk-h { font-size: 24px; margin: 30px 0 0; }
.mk-status { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; color: var(--muted); font-size: 14px; }
.mk-status:empty { display: none; }
.mk-status .badge { font-size: 13px; }
.mk-seller { font-size: 12.5px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-actions { display: grid; gap: 6px; margin-top: 8px; }
.mk-actions .btn { justify-content: center; }
.mk-bid { display: flex; gap: 6px; align-items: center; }
.mk-bid input { width: 0; flex: 1; padding: 6px 8px; }
.mk-lead { font-size: 12.5px; font-weight: 700; }
.mk-lead.up { color: color-mix(in srgb, var(--g-VG) 80%, var(--ink)); }
.mk-lead.down { color: #e5484d; }
.mk-more { margin-top: 16px; }
.mk-more:empty { display: none; }
.mk-empty { grid-column: 1 / -1; color: var(--muted); margin: 0; }

/* Friend's collection (read-only) */
dialog.small.wide { width: min(900px, calc(100% - 24px)); }
.uc-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 18px 14px; margin-top: 4px; }
.uc-card .grade { font-size: 11px; }

/* Duels between friends */
.fd-panel { margin-top: 0; }
.play-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.mode { position: relative; display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: inherit; }
.mode:hover { border-color: var(--muted); }
.mode.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.mode-ico { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; background: var(--chip, rgba(127,127,127,.14)); }
.mode.on .mode-ico { background: var(--ink); color: var(--bg); }
.mode-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mode-txt strong { font-size: 15.5px; }
.mode-txt span { font-size: 13px; color: var(--muted); }
.mode-badge { position: absolute; top: -8px; right: 10px; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #e5484d; color: #fff; }
@media (max-width: 560px) { .play-modes { grid-template-columns: 1fr; } .mode { padding: 12px 14px; } }
.fd-panel h3 { font-size: 18px; }
.fd-panel h4 { font-size: 14px; margin: 18px 0 8px; color: var(--muted); }
.fd-new select { flex: 1; min-width: 0; }
.fd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fd-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-solid); font-size: 14px; }
.fd-row.mine { border-color: var(--ink); }
.fd-row .when { color: var(--muted); font-size: 12.5px; }
.fd-row .acts { display: flex; gap: 6px; }
.fd-res.win { color: color-mix(in srgb, var(--g-VG) 80%, var(--ink)); font-weight: 700; }
.fd-res.lose { color: #e5484d; font-weight: 700; }
.score small { font-size: 28px; color: var(--muted); letter-spacing: 0; }

/* ---------- Phones ---------- */
@media (max-width: 640px) {
  main { padding-block: 18px 48px; }
  .head { margin-bottom: 16px; }
  .head p { font-size: 14px; }
  .top .wrap { padding-block: 8px; gap: 8px; flex-wrap: wrap; }
  .brand { font-size: 17px; gap: 8px; margin-right: auto; min-width: 0; }
  .brand .app-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #lang { display: none; }
  .pips { gap: 3px; }
  .pip { width: 8px; height: 8px; }
  .stat { font-size: 13px; }
  .toolbar { width: 100%; }
  .toolbar select, .toolbar input { flex: 1 1 140px; min-width: 0; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .card-title { font-size: 14px; }
  .card-artist { font-size: 13px; }
  .panel { padding: 16px; border-radius: 16px; }
  .stage-zone { height: calc(var(--size) + 90px); }
  .bin-side .btns .btn { flex: 1; }
  .q-prompt { font-size: 18px; }
  .q-opt { padding: 12px 13px; }
  .sheet-in { gap: 18px; }
  .sheet h3 { font-size: 26px; }
  .copy { grid-template-columns: 52px minmax(0, 1fr); gap: 10px; }
  .copy .thumb { width: 52px; height: 52px; }
  .person { grid-template-columns: auto minmax(0, 1fr); }
  .person .acts { grid-column: 1 / -1; justify-content: flex-start; }
  .upgrade { grid-template-columns: minmax(0, 1fr); }
  .upgrade .btn { justify-self: start; }
  .pf { padding: 20px 16px; }
  .uc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .list-editor input { width: 84px; }
  .ledger { font-size: 13px; }
  .toasts { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .toast { font-size: 14px; }
  .reveal { gap: 14px; }
  .rv-info .player .vol { display: none; }
}
@media (max-width: 640px) {
  body:not(.guest) .brand .app-name { display: none; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .reveal { --rv: min(240px, 46vh); }
}
.auth-brand { margin-right: 0 !important; }

/* Crate genres */
.bin-styles { font-size: 13.5px; color: var(--muted); margin: 14px 0 0; }
.bin-styles .linkish { font-size: 13.5px; }
.genre-picks .gp { position: relative; overflow: hidden; }
.genre-picks .gp:has(input:checked) { border-color: var(--ink); font-weight: 600; }
#genres-field > small { margin-top: -2px; }
#genres-field .btns { gap: 14px; margin-top: 4px; }

/* ---------- Crate: CD cases, back button ---------- */
.sleeve.kind-cd { inset: 9% 6% 0 6%; border-radius: 3px; }
.sleeve.kind-cd::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: 3px;
  background: linear-gradient(115deg, rgba(255,255,255,.38) 0 7%, transparent 22% 62%, rgba(255,255,255,.14) 70%, transparent 80%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), inset 0 0 0 3px rgba(0,0,0,.25); }
.sleeve.kind-cd .sl-name { font-size: calc(var(--sl-size, 22cqw) * .82); left: 13%; }
.sleeve.kind-cd .sl-sub { left: 13%; }
.cd-hinge { position: absolute; left: 0; top: 0; bottom: 0; width: 7%; z-index: 4; background: linear-gradient(90deg, rgba(20,20,24,.85), rgba(70,70,78,.75) 45%, rgba(20,20,24,.85)); box-shadow: 1px 0 0 rgba(255,255,255,.25); }
.cd-logo { position: absolute; right: 6%; bottom: 5%; z-index: 4; font-size: 6cqw; font-weight: 800; letter-spacing: .04em; padding: .1em .45em; border: 2px solid currentColor; border-radius: 999px; opacity: .85; }
.sleeve.unflip { transform: rotateX(-84deg) translateY(12px); opacity: 0; transition: none; }
.bin-side .btns { flex-wrap: nowrap; }
.bin-side .btns .btn { flex: 1 1 auto; }

/* ---------- Collection: search, favourites, tags ---------- */
.toolbar input[type="search"] { min-width: 0; flex: 1 1 180px; }
.fav-toggle[aria-pressed="true"] { background: var(--coin); border-color: var(--coin); color: #1a1406; }
.card-wrap { position: relative; min-width: 0; }
.card-wrap > .card { display: block; width: 100%; }
.card-wrap .fav { position: absolute; z-index: 12; right: 8px; top: 8px; width: 30px; height: 30px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: rgba(0,0,0,.45); color: rgba(255,255,255,.75); font-size: 15px; line-height: 1; backdrop-filter: blur(4px); opacity: 0; transition: opacity .15s; }
.card-wrap:hover .fav, .card-wrap .fav[aria-pressed="true"], .card-wrap .fav:focus-visible { opacity: 1; }
@media (hover: none) { .card-wrap .fav { opacity: 1; } }
.fav[aria-pressed="true"] { color: var(--coin); background: rgba(0,0,0,.65); }
.card-wrap .count { right: 44px; }
.fav.inline { position: static; display: inline-grid; place-items: center; width: 32px; height: 32px; vertical-align: middle; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font-size: 16px; opacity: 1; }
.fav.inline[aria-pressed="true"] { color: var(--coin); }
.kind-tags { position: absolute; z-index: 10; left: 8px; bottom: 8px; display: flex; gap: 5px; align-items: center; }
.kind-tag { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; padding: 2px 6px; border-radius: 999px; background: rgba(0,0,0,.7); color: #fff; }
.var-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--vc); box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 1px 4px rgba(0,0,0,.4); vertical-align: -1px; margin-right: 6px; }
.kind-tags .var-dot { margin: 0; }
.var-note { font-weight: 600; color: var(--ink); }
.badge.special { background: color-mix(in srgb, var(--coin) 22%, var(--surface-2)); white-space: normal; }
.col-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.col-actions:empty { display: none; }

/* ---------- Reveal: CD, special pressings ---------- */
.disc .vlayer { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.reveal.is-cd .disc { background:
    radial-gradient(circle, transparent 0 6.5%, rgba(205,210,218,.96) 7% 14%, rgba(255,255,255,.55) 14.5% 15.5%, rgba(150,158,170,.5) 16% 16.6%, transparent 17%),
    conic-gradient(from 10deg, #d5dbe2, #f7f8fa 8%, #bac6d6 16%, #ecdcf5 24%, #c9ecf4 32%, #f4ecc9 40%, #d5dbe2 50%, #f1f3f6 58%, #b7c3d0 66%, #efe0f6 74%, #cfeaf0 82%, #f2e9c6 90%, #d5dbe2);
  box-shadow: 0 0 0 1px rgba(0,0,0,.18), 0 12px 34px rgba(0,0,0,.32); }
.reveal.is-cd .disc .label { display: none; }
.reveal.is-cd .disc .sheen { background: conic-gradient(from 40deg, transparent 0 10%, rgba(255,255,255,.55) 15%, transparent 22% 58%, rgba(255,255,255,.45) 64%, transparent 72%); mix-blend-mode: soft-light; }
.reveal.is-cd .disc .scratch { opacity: calc(var(--wear) * .07); mix-blend-mode: multiply; filter: invert(1); }
.reveal.v-gold.is-cd .disc { background:
    radial-gradient(circle, transparent 0 6.5%, rgba(230,200,120,.96) 7% 14%, rgba(255,240,200,.6) 14.5% 15.5%, transparent 17%),
    conic-gradient(from 10deg, #c99a2e, #f8e3a0 10%, #b98a25 22%, #f1d27a 34%, #c99a2e 50%, #f8e6aa 60%, #b3841f 74%, #efd07a 88%, #c99a2e); }
.reveal.v-solid .disc, .reveal.v-glow .disc {
  background: repeating-radial-gradient(circle, color-mix(in srgb, var(--vc1) 78%, #000) 0 1.5px, var(--vc1) 1.5px 3px); }
.reveal.v-clear .disc, .reveal.v-liquid .disc {
  background: repeating-radial-gradient(circle, color-mix(in srgb, var(--vc1) 62%, transparent) 0 1.5px, color-mix(in srgb, var(--vc1) 38%, transparent) 1.5px 3px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--vc1) 60%, #000), 0 12px 34px rgba(0,0,0,.3); }
.reveal.v-split .disc { background: repeating-radial-gradient(circle, rgba(0,0,0,.22) 0 1px, transparent 1px 3px), linear-gradient(90deg, var(--vc1) 50%, var(--vc2) 50%); }
.reveal.v-splatter .disc { background: repeating-radial-gradient(circle, rgba(0,0,0,.2) 0 1px, transparent 1px 3px), var(--vc1); }
.reveal.v-marble .disc { background: repeating-radial-gradient(circle, rgba(0,0,0,.18) 0 1px, transparent 1px 3px),
    conic-gradient(from 30deg, var(--vc1), var(--vc2) 9%, var(--vc1) 17%, var(--vc3) 26%, var(--vc1) 33%, var(--vc2) 47%, var(--vc1) 55%, var(--vc2) 66%, var(--vc1) 74%, var(--vc3) 86%, var(--vc1)); }
.reveal.v-marble .disc .vlayer { filter: blur(6px); opacity: .9; }
.reveal.v-picture .disc .label { display: none; }
.reveal.v-splatter .disc .vlayer, .reveal.v-marble .disc .vlayer { -webkit-mask: radial-gradient(circle, transparent 0 18%, #000 19%); mask: radial-gradient(circle, transparent 0 18%, #000 19%); }
.reveal.v-picture .disc { background: repeating-radial-gradient(circle, rgba(0,0,0,.14) 0 1px, transparent 1px 4px), var(--pic) center / cover, #151515; }
.reveal.v-glow .disc { box-shadow: 0 0 0 1px #000, 0 0 36px color-mix(in srgb, var(--vc1) 75%, transparent), 0 12px 34px rgba(0,0,0,.35); }
/* Liquid-filled vinyl: the liquid stays level (it counter-rotates) and sloshes */
.reveal.v-liquid .disc .vlayer { overflow: hidden; -webkit-mask: radial-gradient(circle, transparent 0 39%, #000 40% 94%, transparent 95%); mask: radial-gradient(circle, transparent 0 39%, #000 40% 94%, transparent 95%); }
.reveal.v-liquid .disc .vlayer::before { content: ""; position: absolute; left: -25%; right: -25%; top: 46%; height: 80%; border-radius: 42%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--vc2, #fff) 40%, var(--vc1)), var(--vc1) 30%); opacity: .92; animation: slosh 3.2s ease-in-out infinite; }
.reveal.v-liquid .disc .vlayer::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 70%, rgba(255,255,255,.7) 0 1%, transparent 1.4%), radial-gradient(circle at 62% 80%, rgba(255,255,255,.6) 0 .8%, transparent 1.2%), radial-gradient(circle at 48% 66%, rgba(255,255,255,.5) 0 .7%, transparent 1%); animation: bubbles 2.6s linear infinite; }
.reveal.v-liquid.is-out .disc .vlayer { animation: spin 1.8s linear infinite reverse; }
.reveal.v-liquid.is-out.paused .disc .vlayer { animation-play-state: paused; }
@keyframes slosh { 0%, 100% { transform: rotate(-7deg) translateY(0); } 50% { transform: rotate(7deg) translateY(-3%); } }
@keyframes bubbles { from { transform: translateY(10%); opacity: 1; } to { transform: translateY(-25%); opacity: 0; } }

/* ---------- Reveal: effects by rarity ---------- */
.rv-fx { position: absolute; inset: -45% -60%; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .7s; }
.reveal.is-stamped .rv-fx { opacity: 1; }
.reveal.rar-M .rv-fx { background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,205,80,.42) 0 5deg, transparent 5deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 0 14%, transparent 60%); mask: radial-gradient(circle, #000 0 14%, transparent 60%); animation: rays 16s linear infinite; }
.reveal.rar-NM .rv-fx { background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(200,214,236,.4) 0 4deg, transparent 4deg 16deg);
  -webkit-mask: radial-gradient(circle, #000 0 10%, transparent 50%); mask: radial-gradient(circle, #000 0 10%, transparent 50%); animation: rays 22s linear infinite; }
.reveal.rar-VGp .rv-fx { background: radial-gradient(circle, rgba(77,130,232,.32), transparent 45%); animation: pulse 2.4s ease-in-out infinite; }
@keyframes rays { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { transform: scale(1.08); opacity: .7; } }
.rv-fx .spark { position: absolute; left: 50%; top: 50%; width: var(--s); height: var(--s); border-radius: 50%; background: #ffd54a; box-shadow: 0 0 10px #ffcf3a;
  opacity: 0; animation: spark 1.5s cubic-bezier(.15,.7,.3,1) var(--d) forwards; }
.reveal.rar-NM .rv-fx .spark { background: #eef3fb; box-shadow: 0 0 10px #cfe0ff; }
.reveal.rar-VGp .rv-fx .spark { background: #8db2ff; box-shadow: 0 0 8px #4d82e8; }
@keyframes spark { 0% { transform: translate(-50%, -50%) scale(.4); opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx) * 4), calc(-50% + var(--dy) * 3)) scale(1); opacity: 0; } }
.rv-fx .dust { position: absolute; left: var(--x); top: 30%; width: var(--s); height: var(--s); border-radius: 50%; background: rgba(140,120,95,.55); opacity: 0; animation: dust 2.2s ease-in var(--d) forwards; }
@keyframes dust { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(160%); opacity: 0; } }
.reveal.rar-M.is-stamped::after { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle, rgba(255,230,150,.55), transparent 60%); animation: flash .9s ease-out forwards; }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }
.reveal.rar-M.is-stamped .stage > .grade { box-shadow: 0 0 22px rgba(255,200,60,.85), 0 3px 10px rgba(0,0,0,.3); }
.reveal.rar-P.is-stamped .stage, .reveal.rar-F.is-stamped .stage { animation: thud .45s ease-out; }
@keyframes thud { 20% { transform: translate(-4px, 2px) rotate(-.6deg); } 45% { transform: translate(4px, -1px) rotate(.5deg); } 70% { transform: translate(-2px, 1px); } }
@media (max-width: 640px) {
  .bin-side .btns { flex-wrap: wrap; }
  .bin-side #btn-pull { flex: 1 1 100%; order: -1; }
}

/* ---------- Level ---------- */
.icon-btn.lvl { padding: 0; }
/* Round things in round buttons: level ring and avatar */
.icon-btn.lvl, .icon-btn.me-btn { width: 34px; min-width: 34px; height: 34px; border-radius: 50%; padding: 0; }
.icon-btn.me-btn .me-avatar { width: 28px; height: 28px; }
.icon-btn.lvl .lvl-ring { width: 28px; height: 28px; }
.lvl-ring { --p: 0%; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: conic-gradient(var(--coin) var(--p), color-mix(in srgb, var(--muted) 30%, transparent) 0); }
.lvl-ring b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-solid); color: var(--ink); font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.badge.xp { background: color-mix(in srgb, #7b3fbf 22%, var(--surface-2)); }
.me-btn { position: relative; overflow: visible; }
.me-btn.has-dot::after { content: ""; position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 2px var(--surface-solid); }

/* ---------- Reference ---------- */
.ref-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ref-card .card { display: block; width: 100%; text-align: left; }
.ghost { position: absolute; inset: 0; container-type: inline-size; color: var(--sl-ink, #fff); opacity: .55; filter: saturate(.6); }
.ghost.seen { opacity: .85; filter: none; }
.ghost .sl-name { font-size: calc(var(--sl-size, 22cqw) * .78); }
.ghost-q, .ghost-ok { position: absolute; right: 8%; bottom: 6%; font-size: 26cqw; font-weight: 800; line-height: 1; opacity: .85; }
.ref-card:not(.is-found) .card-title, .ref-card:not(.is-found) .card-artist { opacity: .75; }
.fav.wish[aria-pressed="true"] { color: #ff5d8f; }
.mk-wish { font-size: 12px; font-weight: 700; color: #e5487a; margin-top: 2px; }

/* ---------- Profile page settings ---------- */
.banner-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.banner-swatch { width: 64px; height: 38px; border-radius: 10px; border: 2px solid transparent; padding: 0; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.banner-swatch[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 2px var(--surface-solid) inset; }
.banner-swatch:disabled { opacity: .5; cursor: not-allowed; }
.banner-swatch:disabled span { background: rgba(0,0,0,.6); padding: 2px 7px; border-radius: 999px; text-shadow: none; }
/* The rows get their height from the ::before (an aspect-ratio alone let Chrome squash them in a scrolling grid) */
.pick-scroll { max-height: 312px; overflow-y: auto; overscroll-behavior: contain; padding: 2px; margin-top: 6px; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); align-content: start; gap: 8px; }
.pick::before { content: ""; display: block; padding-top: 100%; }
.pick { position: relative; display: block; width: 100%; min-height: 0; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: none; opacity: .7; }
.pick.on { border-color: var(--coin); opacity: 1; box-shadow: 0 0 0 2px color-mix(in srgb, var(--coin) 40%, transparent); }
.pick .cover { position: absolute; inset: 0; }
.pick-fav { position: absolute; right: 3px; top: 1px; z-index: 6; color: var(--coin); font-size: 13px; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
/* Banners (profile page header) */
.banner-default { background: linear-gradient(120deg, #3a3d46, #1c1d22); }
.banner-sunset { background: linear-gradient(120deg, #ff7a59, #ff4f8b 55%, #8e44ad); }
.banner-ocean { background: linear-gradient(120deg, #1b6ca8, #22c1c3 60%, #8de8d0); }
.banner-forest { background: linear-gradient(120deg, #1f5a32, #3f9e57 55%, #b8d86b); }
.banner-night { background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.7) 0 1px, transparent 2px) 0 0 / 38px 38px, radial-gradient(circle at 70% 60%, rgba(255,255,255,.5) 0 1px, transparent 2px) 0 0 / 52px 52px, linear-gradient(160deg, #141a3a, #2b1f4f); }
.banner-vinyl { background: repeating-radial-gradient(circle at 85% 50%, #141416 0 2px, #23232a 2px 4px); }
.banner-neon { background: linear-gradient(90deg, transparent 0 48%, rgba(255,46,140,.9) 49% 51%, transparent 52%) 0 0 / 60px 100%, linear-gradient(0deg, transparent 0 48%, rgba(34,231,255,.7) 49% 51%, transparent 52%) 0 0 / 100% 30px, #0d0b1e; }
.banner-paper { background: repeating-linear-gradient(-12deg, rgba(0,0,0,.04) 0 2px, transparent 2px 6px), linear-gradient(120deg, #c9a26b, #b48a55); }
.banner-gold { background: linear-gradient(115deg, #b8861d, #f6dd8a 30%, #c99a2e 50%, #fbe8a6 70%, #b58318); }
.banner-aurora { background: radial-gradient(120% 90% at 20% 120%, rgba(63,195,160,.95), transparent 60%), radial-gradient(90% 80% at 80% -10%, rgba(140,92,255,.9), transparent 60%), linear-gradient(160deg, #06121f, #0c2a36); }
.banner-marble { background: repeating-linear-gradient(32deg, transparent 0 18px, rgba(120,110,100,.18) 19px 21px, transparent 22px 41px), radial-gradient(60% 50% at 30% 40%, rgba(160,150,140,.35), transparent 70%), linear-gradient(120deg, #f4f1ec, #dcd6cd); }
.banner-cassette { background: radial-gradient(circle at 34% 52%, #1b1b1d 0 9%, #e9e2d0 9.5% 13%, transparent 13.5%) 0 0 / 100% 100%, radial-gradient(circle at 66% 52%, #1b1b1d 0 9%, #e9e2d0 9.5% 13%, transparent 13.5%), linear-gradient(0deg, transparent 0 22%, #e94f37 22% 30%, #f6c445 30% 38%, transparent 38%), #2b2d33; }
.banner-vapor { background: linear-gradient(rgba(255,113,206,.35) 1px, transparent 1px) 0 60% / 100% 14px, linear-gradient(180deg, #2b1055 0 45%, #7597de 45.5%, #ff71ce 100%); }
.banner-custom { background: linear-gradient(135deg, var(--surface-2), var(--surface-solid)); }
.banner-ember { background: radial-gradient(90% 120% at 20% 110%, rgba(255,120,30,.95), transparent 60%), radial-gradient(70% 90% at 85% 120%, rgba(255,40,40,.8), transparent 60%), linear-gradient(180deg, #120705, #2a0d06); }
.banner-galaxy { background: radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 60%, #fff, transparent), radial-gradient(1.5px 1.5px at 85% 20%, #fff, transparent), radial-gradient(1px 1px at 40% 80%, #fff, transparent), radial-gradient(60% 80% at 60% 50%, rgba(140,80,255,.75), transparent 70%), radial-gradient(50% 70% at 25% 60%, rgba(40,160,255,.6), transparent 70%), #05060f; }
.banner-chrome { background: linear-gradient(180deg, #f4f6f8, #9aa3ad 40%, #e9edf1 52%, #6c7480 70%, #d3d8de); }
.banner-velvet { background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.12), transparent 60%), repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 2px, transparent 2px 6px), linear-gradient(135deg, #5a0b2b, #8e1846 50%, #4a0822); }
.banner-royal { background: radial-gradient(circle at 50% 50%, rgba(246,197,69,.35) 0 2px, transparent 3px) 0 0 / 22px 22px, linear-gradient(135deg, #1b1f6b, #2b2f9a 50%, #14174f); }
.banner-prism { background: linear-gradient(120deg, #ff5f6d, #ffc371 20%, #f9f871 35%, #6dd5a5 50%, #4facfe 65%, #a18cd1 80%, #ff5f9e); background-size: 200% 100%; animation: holo 8s ease-in-out infinite alternate; }
.banner-diamond { background: conic-gradient(from 45deg at 30% 40%, #e8f7ff, #b9dcff, #ffffff, #c9e8ff, #e8f7ff), linear-gradient(135deg, #dff3ff, #ffffff); background-blend-mode: soft-light; }
.banner-holo { background: linear-gradient(115deg, #ffd6f2, #c8f0ff 25%, #fff5c7 50%, #d8ccff 75%, #c7ffe9); background-size: 200% 100%; animation: holo 6s ease-in-out infinite alternate; }

/* ---------- Profile dialog ---------- */
.pf.has-banner { padding-top: 0; overflow: hidden; }
.pf-banner { height: 92px; margin: 0 -26px; }
.pf.has-banner .pf-head { margin-top: -38px; align-items: flex-end; }
.pf.has-banner .pf-head .avatar { box-shadow: 0 0 0 4px var(--surface-solid); }
.pf.has-banner .close { background: rgba(0,0,0,.35); color: #fff; }
.pf-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0; }
.lvl-tag, .title-tag { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.lvl-tag { background: var(--coin); color: #1a1406; }
.title-tag { background: var(--surface-2); }
.pf-song { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 14px; padding: 8px 12px 8px 8px; }
.pf-song small { display: block; color: var(--muted); font-size: 11.5px; }
.play-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--bg); display: grid; place-items: center; font-size: 13px; }
.pf-stats { margin: 0; font-size: 13px; color: var(--muted); }
.pf-show { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.pf-rec .art { box-shadow: 0 6px 14px rgba(0,0,0,.2); }
.pf-rec .grade { font-size: 9px; padding: 2px 5px 3px; left: 4px; top: 4px; }
.pf-rec .grade small { display: none; }
.pf-rec small { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Swaps and gifts ---------- */
.trades { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.trade { border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: var(--surface-solid); display: grid; gap: 8px; }
.trade.mine { border-color: var(--ink); }
.trade-head { font-weight: 700; font-size: 13.5px; }
.trade-head .when { font-weight: 500; color: var(--muted); font-size: 12px; }
.trade-pair { display: grid; gap: 6px; }
.trow { display: grid; grid-template-columns: 60px 40px minmax(0, 1fr); gap: 8px; align-items: center; }
.trow > small { color: var(--muted); font-size: 11.5px; }
.trade .acts { display: flex; gap: 6px; justify-content: flex-end; }
.tthumb { position: relative; display: block; width: 40px; height: 40px; border-radius: 3px; overflow: hidden; flex: none; }
.tthumb .cover { position: absolute; inset: 0; }
.tinfo { min-width: 0; display: grid; }
.tinfo b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tinfo small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tcols h4 { margin: 0 0 8px; font-size: 14px; }
.tlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 46vh; overflow: auto; }
.tpick { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-solid); padding: 6px; }
.tpick.on { border-color: var(--coin); box-shadow: 0 0 0 2px color-mix(in srgb, var(--coin) 35%, transparent); }
@media (max-width: 640px) {
  .tcols { grid-template-columns: minmax(0, 1fr); }
  .tlist { max-height: 30vh; }
  .pf-show { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pf-banner { margin: 0 -16px; }
  .ref-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trow { grid-template-columns: 52px 40px minmax(0, 1fr); }
}

/* Surprise code banner, guarantee line */
.drop { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; border-color: var(--coin);
  background: linear-gradient(115deg, color-mix(in srgb, var(--coin) 28%, var(--surface-solid)), var(--surface-solid) 60%); animation: dropin .5s cubic-bezier(.3,1.6,.5,1); }
.drop p { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }
.drop-code { font-family: ui-monospace, "Courier New", monospace; font-weight: 800; letter-spacing: .06em; padding: 2px 8px; border-radius: 6px; background: var(--surface-2); }
@keyframes dropin { from { transform: translateY(-8px) scale(.97); opacity: 0; } }
.bin-pity { font-size: 13px; color: var(--muted); margin: 6px 0 0; }

/* Players online */
.online { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.online i { width: 8px; height: 8px; border-radius: 50%; background: #2fb35b; box-shadow: 0 0 0 3px color-mix(in srgb, #2fb35b 25%, transparent); animation: pulse 2.4s ease-in-out infinite; }
.online b { color: var(--ink); }
@media (max-width: 640px) { .online-txt { display: none; } }

/* Market sheet */
.mk-sheet-act { margin: 16px 0 6px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mk-sheet-act .mk-bid { display: flex; align-items: center; gap: 8px; }
.mk-sheet-act .mk-bid input { flex: none; width: 130px; padding: 10px 12px; font-size: 16px; }
.mk-quick { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.mk-wishf { white-space: nowrap; }
.mk-wishf[aria-pressed="true"] { background: #ff5fa2; border-color: #ff5fa2; color: #fff; }
.mk-sheet-price { width: 100%; margin: 0; color: var(--muted); font-size: 14px; }

/* ---------- Levels ---------- */
.lv-head { display: flex; align-items: center; gap: 22px; margin-bottom: 26px; }
.lv-big { --p: 0%; flex: none; display: grid; place-items: center; width: 108px; height: 108px; border-radius: 50%;
  background: conic-gradient(var(--coin) var(--p), var(--surface-2) 0); }
.lv-big b { display: grid; place-items: center; width: 86px; height: 86px; border-radius: 50%; background: var(--surface-solid); font-size: 38px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.lv-info { flex: 1; min-width: 0; }
.lv-info h3 { font-size: 24px; margin: 0 0 10px; }
.lv-info p { margin: 10px 0 0; }
.lv-bar { height: 12px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.lv-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f0b93a, var(--coin)); }
.lv-boost { color: var(--coin); font-weight: 700; }
.lv-h { font-size: 20px; margin: 0 0 12px; }
.lv-track { list-style: none; margin: 0 0 26px; padding: 4px 2px 14px; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; }
.lv-step { flex: none; width: 168px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); }
.lv-step.big { border-color: color-mix(in srgb, var(--coin) 55%, var(--line)); }
.lv-step.done { opacity: .55; }
.lv-step.next { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); opacity: 1; }
.lv-n { font-weight: 800; font-size: 15px; }
.lv-rs { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; align-content: flex-start; }
.lv-r { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 650; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); }
.lv-card { background: color-mix(in srgb, var(--coin) 22%, var(--surface-2)); }
.lv-title { background: color-mix(in srgb, #6c8cff 25%, var(--surface-2)); }
.lv-banner i { width: 18px; height: 11px; border-radius: 3px; display: inline-block; }
.lv-st { font-size: 12px; color: var(--muted); }
.lv-step.next .lv-st { color: var(--ink); font-weight: 650; }
.lv-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.lv-cols h3 { font-size: 18px; margin-bottom: 12px; }
.lv-miles { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lv-miles li { display: flex; align-items: center; gap: 10px; }
.lv-miles li.done { opacity: .55; }
.lv-mn { flex: none; width: 82px; font-weight: 700; font-size: 13.5px; }
.lv-ok { margin-left: auto; color: var(--g-VG); font-weight: 800; }
.lv-earn { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; margin: 0; }
.lv-earn dt { color: var(--muted); }
.lv-earn dd { margin: 0; font-weight: 700; text-align: right; }
@media (max-width: 760px) { .lv-cols { grid-template-columns: minmax(0, 1fr); } .lv-head { gap: 14px; } .lv-big { width: 84px; height: 84px; } .lv-big b { width: 66px; height: 66px; font-size: 30px; } }

/* Shop: genre pick and cosmetics */
.style-pick { margin-top: 8px; width: 100%; max-width: 240px; padding-top: 6px; padding-bottom: 6px; }
.cosm { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.cosm p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.cosm-prev { width: 64px; height: 38px; border-radius: 10px; border: 1px solid var(--line); display: grid; place-items: center; font-size: 18px; color: var(--muted); }

/* ---------- Reduced motion (setting, or the system preference) ---------- */
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
.reduce-motion .site-bg span { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .site-bg span { animation: none; } }

/* ---------- Wishlist sleeve ---------- */
.sl-wish { position: absolute; right: 7%; top: 5%; z-index: 3; font-size: 13cqw; color: #ff5fa2; text-shadow: 0 2px 10px rgba(0,0,0,.4); }

/* ---------- Account page ---------- */
.acc-tabs { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 18px; border-radius: 14px; background: var(--surface-2); max-width: 100%; overflow-x: auto; }
.acc-tabs button { border: 0; background: none; padding: 9px 16px; border-radius: 10px; font-weight: 650; color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.acc-tabs button[aria-selected="true"] { background: var(--surface-solid); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.acc-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #e5484d; color: #fff; font-size: 11px; display: inline-grid; place-items: center; }
.acc-narrow { max-width: 760px; }
.acc-preview { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); margin-bottom: 16px; }
.pv-banner { height: 150px; background-size: cover; background-position: center; }
.pv-body { position: relative; display: flex; gap: 18px; align-items: flex-end; padding: 0 22px 18px; margin-top: -42px; }
.pv-body .avatar.big { width: 96px; height: 96px; flex: none; box-shadow: 0 0 0 5px var(--surface-solid); }
.pv-txt { min-width: 0; padding-bottom: 2px; }
.pv-txt h3 { font-size: 26px; margin: 0 0 6px; text-shadow: 0 1px 12px var(--surface-solid), 0 0 2px var(--surface-solid); }
.pv-txt p { margin: 8px 0 0; max-width: 60ch; }
.pv-label { position: absolute; right: 14px; top: 12px; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,.45); color: #fff; }
.acc-savebar { position: sticky; bottom: 12px; z-index: 5; display: flex; gap: 10px; justify-content: flex-end; width: fit-content; max-width: 100%; margin: 16px 0 0 auto; padding: 10px; border-radius: 16px; background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line); }
.color-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--surface-solid); background: var(--c); box-shadow: 0 0 0 1px var(--line); padding: 0; }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }
.swatch.custom { position: relative; overflow: hidden; background: conic-gradient(#e5484d, #f6c445, #3fc3a0, #4d82e8, #8e5cff, #e5484d); cursor: pointer; }
.swatch.custom input { position: absolute; inset: -6px; width: 200%; height: 200%; opacity: 0; cursor: pointer; }
.banner-swatch.to-buy { opacity: .75; }
.banner-swatch.to-buy span { background: rgba(0,0,0,.6); padding: 2px 7px; border-radius: 999px; text-shadow: none; }
.banner-swatch.banner-custom { background-size: cover; background-position: center; }
.custom-banner { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; padding: 10px; border-radius: 12px; border: 1px dashed var(--line); }
.custom-banner small { flex-basis: 100%; color: var(--muted); font-size: 12.5px; }
.custom-banner.locked span { color: var(--muted); font-size: 13.5px; }
.custom-banner label.btn { cursor: pointer; }
@media (max-width: 560px) { .pv-body { flex-direction: column; align-items: flex-start; gap: 10px; } .pv-banner { height: 110px; } }
.pf-banner[style*="background-image"], .pv-banner[style*="background-image"] { background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }

/* ---------- Profile: numbers, finest piece, latest finds ---------- */
.pf-nums { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 4px; }
.pf-nums > div { flex: 1 1 140px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); display: grid; gap: 2px; }
.pf-nums small, .pf-best small { color: var(--muted); font-size: 12px; }
.pf-nums b { font-size: 17px; }
.pf-best { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; margin: 14px 0 6px; padding: 12px; border-radius: 16px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--coin) 22%, transparent), transparent 70%), var(--surface-2); }
.pf-best .art { position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden; box-shadow: 0 8px 18px rgba(0,0,0,.25); }
.pf-best .grade { font-size: 9px; padding: 2px 5px 3px; left: 4px; top: 4px; }
.pf-best .grade small { display: none; }
.pf-best > div:last-child { display: grid; gap: 3px; min-width: 0; }
.pf-best b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-best > div:last-child > span { color: var(--muted); font-size: 13px; }
.pf-best-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pf-h { font-size: 13px; color: var(--muted); margin: 14px 0 8px; }
.pf-recent { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 560px) { .pf-recent { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Leaderboard ---------- */
.lb-ctl { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.lb-ctl select { flex: 1 1 140px; }
.seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--surface-2); }
.seg button { border: 0; background: none; padding: 7px 12px; border-radius: 9px; font-weight: 650; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--surface-solid); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.lb { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.lb-row { display: grid; grid-template-columns: 30px 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 12px; }
.lb-row.me { background: color-mix(in srgb, var(--coin) 16%, var(--surface-2)); }
.lb-row .avatar { width: 32px; height: 32px; }
.lb-rank { font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; color: var(--muted); }
.lb-rank.r1 { color: #d9a520; } .lb-rank.r2 { color: #aab2be; } .lb-rank.r3 { color: #b07a4f; }
.lb-name { text-align: left; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-name small { color: var(--muted); font-weight: 500; }
.lb-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.lb-gap { text-align: center; color: var(--muted); }
.lv-streak { margin: 10px 0 0; font-weight: 700; }
.lv-streak .hint { font-weight: 500; margin: 0; }

/* Clickable player names */
.who-link { font: inherit; color: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 2px; padding: 0; background: none; border: 0; cursor: pointer; }
.who-link:hover { text-decoration-color: currentColor; }

/* Friend search suggestions */
.suggest-wrap { position: relative; }
.suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; list-style: none; margin: 0; padding: 6px; border-radius: 14px; background: var(--surface-solid); border: 1px solid var(--line); box-shadow: var(--shadow); max-height: 320px; overflow-y: auto; }
.suggest .sg { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 10px; cursor: pointer; }
.suggest .sg.on, .suggest .sg:hover { background: var(--surface-2); }
.suggest .avatar { width: 32px; height: 32px; }
.sg-name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-tag { font-size: 12px; color: var(--muted); white-space: nowrap; }
.sg-none { padding: 10px; color: var(--muted); }
@media (max-width: 560px) { .suggest .sg { grid-template-columns: 32px minmax(0, 1fr) auto; } .sg-tag { display: none; } }

/* ===================================================================== Ended auction: the seller decides */
.auc-result { margin-top: 8px; padding: 10px 11px 11px; border-radius: 12px; background: color-mix(in srgb, var(--coin) 12%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--coin) 45%, transparent); display: grid; gap: 6px; font-size: 12.5px; }
.auc-res-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.auc-tag { flex-basis: 100%; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.auc-price { font-size: 20px; font-weight: 800; line-height: 1.1; color: var(--ink); }
.auc-res-head .vs { margin: 0; }
.auc-res-who { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.auc-res-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.auc-res-btns .btn { flex: 1 1 auto; justify-content: center; }
.auc-res-note { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.slot.auc-done .card .tag-price { box-shadow: 0 0 0 2px var(--coin); }
.copy-actions .auc-result, .editor + .auc-result { width: 100%; }

/* ===================================================================== Login calendar */
.dl-panel { margin-bottom: 18px; }
.dl-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px 20px; }
.dl-head h3 { margin: 0; }
.dl-head .hint { margin: 4px 0 0; max-width: 60ch; }
.dl-streak { display: grid; justify-items: end; gap: 2px; font-size: 13px; color: var(--muted); }
.dl-streak strong { font-size: 15px; color: var(--ink); }
.dl-grid { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.dl-day { position: relative; min-width: 0; }
.dl-hit { width: 100%; height: 100%; min-height: 128px; display: grid; justify-items: center; align-content: start; gap: 4px; padding: 12px 6px 12px; border-radius: 16px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); font: inherit; text-align: center; position: relative; overflow: hidden; }
button.dl-hit { cursor: pointer; }
.dl-n { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.dl-ico { height: 44px; display: grid; place-items: center; }
.dl-ico .coin { width: 34px; height: 34px; margin: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), 0 4px 12px rgba(224,165,38,.35); }
.dl-wax { font-weight: 800; font-size: 16px; white-space: nowrap; }
.dl-wax .coin { margin-left: .15em; }
.dl-dig { font-size: 12px; color: var(--muted); white-space: nowrap; }
.dl-card { font-size: 11.5px; font-weight: 700; color: var(--g-M); white-space: nowrap; }
.dl-sleeve { width: 42px; height: 42px; border-radius: 4px; display: grid; place-items: center; background: linear-gradient(135deg, #f7e7b0, #d9a520 45%, #8a6510 55%, #f1d27a); box-shadow: 0 6px 16px rgba(217,165,32,.45); transform: rotate(-6deg); }
.dl-sleeve b { font: 800 13px/1 var(--font); color: #2a1d02; letter-spacing: .04em; }
/* Day 7: the big one */
.dl-day.big .dl-hit { background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--g-M) 30%, transparent), transparent 70%), var(--surface-2); border-color: color-mix(in srgb, var(--g-M) 55%, transparent); }
/* Done: a stamp */
.dl-day.done .dl-hit { border-color: color-mix(in srgb, var(--g-VG) 45%, transparent); background: color-mix(in srgb, var(--g-VG) 9%, var(--surface-2)); }
.dl-day.done .dl-hit > :not(.dl-stamp) { opacity: .6; filter: saturate(.5); }
.dl-stamp { position: absolute; top: 50px; left: calc(50% + 4px); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--g-VG); color: #fff; font-size: 12px; font-weight: 900; box-shadow: 0 3px 8px rgba(0,0,0,.3); pointer-events: none; }
.dl-day.just .dl-hit { animation: dl-pop .7s cubic-bezier(.3,1.6,.5,1); }
.dl-day.just .dl-stamp { animation: dl-stamp .55s .15s cubic-bezier(.4,1.8,.5,1) both; }
@keyframes dl-pop { 0% { transform: scale(.92); } 60% { transform: scale(1.06); } 100% { transform: none; } }
@keyframes dl-stamp { from { transform: scale(3); opacity: 0; } to { transform: none; opacity: 1; } }
/* Today: lit up, waiting for the click */
.dl-day.today .dl-hit { border: 2px solid var(--coin); background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--coin) 26%, transparent), transparent 75%), var(--surface-2);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--coin) 18%, transparent), 0 10px 26px rgba(0,0,0,.25); transform: translateY(-3px); animation: dl-glow 2.2s ease-in-out infinite; }
.dl-day.today .dl-hit:hover { transform: translateY(-5px); }
.dl-day.today .dl-n { color: var(--coin); }
@keyframes dl-glow { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--coin) 10%, transparent), 0 12px 30px rgba(0,0,0,.28); } }
.dl-day.next .dl-hit { opacity: .55; }
.dl-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; }
.dl-foot .hint { margin: 0; font-size: 12.5px; flex: 1 1 220px; }
.dl-msg { margin: 0; font-weight: 650; }
dialog.daily-dialog { width: min(780px, calc(100% - 24px)); }
.daily-dialog .dl-in { display: block; padding: 26px 26px 22px; background: radial-gradient(90% 60% at 50% -10%, color-mix(in srgb, var(--coin) 16%, transparent), transparent 70%); }
.daily-dialog .dl-head { padding-right: 40px; }
.daily-dialog .dl-head h3 { font-size: clamp(22px, 4vw, 28px); }
@media (max-width: 640px) {
  .dl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .dl-day.big { grid-column: span 2; }
  .dl-hit { min-height: 116px; padding: 10px 4px; }
  .dl-wax { font-size: 14px; }
  .dl-streak { justify-items: start; }
  .daily-dialog .dl-in { padding: 22px 16px 18px; }
}

/* ===================================================================== Opening a record: a listening room, not a black screen
   A dark room lit by a spotlight in the colours of the style, the sleeve's own picture glowing
   behind, dust floating in the light. Once the record is out, the room takes the colours of the
   real cover, and the light turns gold, silver or blue for the best grades. */
.reveal { background: #050608; color-scheme: dark; color: #f1f2f4;
  --bg: #0c0d10; --surface: rgba(26, 28, 33, .74); --surface-solid: #1a1c21; --surface-2: rgba(44, 47, 54, .7); --ink: #f1f2f4; --muted: #b3b8c1; --line: rgba(255, 255, 255, .1);
  --glass: rgba(16, 17, 21, .55); --shadow: 0 18px 44px rgba(0, 0, 0, .55); }
.rv-room { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; --beam: 255, 238, 210; --tint: var(--sl-tint, #6a5532);
  background: radial-gradient(80% 55% at 50% 0%, color-mix(in srgb, var(--tint) 50%, transparent), transparent 72%),
              radial-gradient(70% 45% at 50% 105%, color-mix(in srgb, var(--tint) 26%, transparent), transparent 75%),
              linear-gradient(#0d0e13, #050608 70%); }
.rv-room .ambient { position: absolute; inset: -25%; z-index: 0; filter: blur(64px) saturate(1.35) brightness(.58); opacity: 0; transition: opacity 1.4s ease; animation: rv-drift 26s ease-in-out infinite alternate; }
.reveal:not(.is-flipped) #ambient-pre { opacity: .6; }
.reveal.is-flipped #ambient { opacity: .7; }
@keyframes rv-drift { from { transform: scale(1.05) rotate(-3deg) translate(-2%, 1%); } to { transform: scale(1.18) rotate(3deg) translate(2%, -2%); } }
/* The spotlight falling on the sleeve */
.rv-beam { position: absolute; left: 50%; top: -4%; width: 220vmax; height: 105vh; z-index: 1; transform-origin: 50% 0; transform: translateX(-50%);
  background: conic-gradient(from 0deg at 50% 0%, transparent 0 163deg, rgba(var(--beam), .10) 170deg, rgba(var(--beam), .2) 180deg, rgba(var(--beam), .10) 190deg, transparent 197deg 360deg);
  filter: blur(18px); mix-blend-mode: screen; opacity: .9; animation: rv-sway 9s ease-in-out infinite alternate; transition: opacity .8s; }
.rv-beam::after { content: ""; position: absolute; left: 50%; top: 0; width: 46vmin; height: 26vmin; transform: translate(-50%, -55%); border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--beam), .55), transparent); filter: blur(10px); }
@keyframes rv-sway { from { transform: translateX(-50%) rotate(-1.4deg); } to { transform: translateX(-50%) rotate(1.4deg); } }
/* Dust in the light */
.rv-motes { position: absolute; inset: 0; z-index: 2; }
.rv-motes i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: rgba(var(--beam), .85); box-shadow: 0 0 6px rgba(var(--beam), .6); opacity: 0;
  animation: rv-mote var(--d) linear var(--dl) infinite; }
@keyframes rv-mote { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .75; } 80% { opacity: .5; } 100% { transform: translate(var(--dx), -18vh); opacity: 0; } }
/* Vignette and a little film grain */
.rv-room::after { content: ""; position: absolute; inset: 0; z-index: 3; background: radial-gradient(ellipse 70% 65% at 50% 38%, transparent 35%, rgba(0,0,0,.78) 100%), linear-gradient(transparent 45%, rgba(0,0,0,.45)); }
.rv-room::before { content: ""; position: absolute; inset: 0; z-index: 3; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* The best grades change the colour of the light */
.reveal.rar-M .rv-room { --beam: 255, 214, 110; }
.reveal.rar-NM .rv-room { --beam: 214, 228, 250; }
.reveal.rar-VGp .rv-room { --beam: 150, 186, 255; }
.reveal.is-stamped.rar-M .rv-beam, .reveal.is-stamped.rar-NM .rv-beam { opacity: 1; filter: blur(14px) brightness(1.5); }
/* A shadow on the table under the sleeve (and the record once it is out) */
.reveal .stage::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: -9%; height: 11%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.75), transparent); filter: blur(5px); transition: left .95s cubic-bezier(.2,.8,.2,1), right .95s cubic-bezier(.2,.8,.2,1); }
.reveal.is-out .stage::after { left: -30%; right: -30%; }
.reveal .face { box-shadow: 0 22px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06); }
.reveal.is-loading .face, .reveal.is-error .face { box-shadow: 0 22px 50px rgba(0,0,0,.55), 0 0 70px color-mix(in srgb, var(--sl-tint, #e0a526) 45%, transparent); }
.reveal .rv-status { color: #c9cdd4; letter-spacing: .01em; }
.reduce-motion .rv-motes { display: none; }
@media (prefers-reduced-motion: reduce) { .rv-motes { display: none; } .rv-beam, .rv-room .ambient { animation: none; } }

/* Server restarting: a quiet pill instead of an error */
.reconnect { position: fixed; z-index: 200; top: calc(12px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; border-radius: 999px; background: var(--surface-solid); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 14px; font-weight: 600; max-width: calc(100% - 32px); white-space: nowrap; }
.reconnect .spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--coin); animation: spin .8s linear infinite; flex: none; }

/* Notifications */
.icon-btn.bell { width: 34px; min-width: 34px; height: 34px; border-radius: 50%; padding: 0; position: relative; }
.icon-btn.bell svg { width: 16px; height: 16px; fill: currentColor; }
.bell-n { position: absolute; top: -4px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #e5484d; color: #fff; font-size: 10.5px; font-weight: 800; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--surface-solid); }
dialog.inbox-dialog { width: min(520px, calc(100% - 24px)); }
.inbox-in { display: block; padding: 24px 22px 20px; }
.inbox-in h3 { margin: 0 40px 12px 0; }
.inbox-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: min(64vh, 560px); overflow-y: auto; }
.ib { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 10px; border-radius: 12px; }
.ib.unread { background: var(--surface-2); }
.ib > i { width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--muted); }
.ib-money > i { background: var(--g-VG); } .ib-offer > i { background: var(--coin); } .ib-alert > i { background: #e5484d; } .ib-level > i { background: var(--g-VGp); }
.ib p { margin: 0; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.ib .when { font-size: 12px; color: var(--muted); }
@media (max-width: 640px) { .icon-btn.bell { width: 32px; min-width: 32px; height: 32px; } }

/* Levels by tens */
.lv-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: thin; }
.lv-tab { flex: none; border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.lv-tab.done { color: var(--g-VG); }
.lv-tab.here { border-color: var(--coin); color: var(--ink); }
.lv-tab[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.badge.mk-lim { background: var(--surface-2); }
.badge.mk-lim.out { background: color-mix(in srgb, #e5484d 18%, var(--surface-2)); color: var(--ink); }

/* Bid history */
.bh { width: 100%; margin-top: 8px; font-size: 13px; }
.bh h4 { margin: 4px 0 6px; font-size: 13px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
details.bh summary { cursor: pointer; color: var(--muted); font-weight: 650; font-size: 12.5px; }
.bh-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; max-height: 240px; overflow-y: auto; }
.bh-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline; padding: 6px 8px; border-radius: 8px; }
.bh-list li.top { background: color-mix(in srgb, var(--coin) 14%, transparent); font-weight: 700; }
.bh-list li.bh-start { color: var(--muted); border-top: 1px dashed var(--line); border-radius: 0; margin-top: 2px; }
.bh-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-who small { color: var(--muted); font-weight: 400; }
.bh-p { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bh-up { color: var(--g-VG); font-weight: 700; }
.bh-list .when { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.slot .bh-list li { grid-template-columns: minmax(0, 1fr) auto; }
.slot .bh-list .when { display: none; }

/* ===================================================================== Top bar (by device)
   Computer and tablet: brand · status (online, digs and next dig, wax, level) · buttons, then the tabs.
   Phone: brand and buttons, the status on its own line (next dig always visible), the tabs at the
   bottom of the screen with icons, like an app. */
.top .wrap.top-row { display: flex; align-items: center; gap: 12px; padding-block: 10px 8px; flex-wrap: nowrap; }
.top-row .brand { margin-right: auto; min-width: 0; }
.status { display: flex; align-items: center; gap: 14px; padding: 3px 4px 3px 14px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); min-height: 40px; }
.status:empty, body.guest .status { display: none; }
.status .stat .next { color: var(--muted); font-weight: 500; font-size: 12.5px; white-space: nowrap; }
.actions { display: flex; align-items: center; gap: 8px; flex: none; }
.top .wrap.nav-row { display: block; padding-block: 0 10px; }
nav.tabs { margin: 0; width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
nav.tabs::-webkit-scrollbar { display: none; }
.tab-ico, .tab-s { display: none; }
@media (max-width: 1000px) {
  .proto { display: none; }
  .status { gap: 10px; padding-left: 12px; }
}
@media (max-width: 720px) {
  /* no backdrop-filter here: it would trap the bottom tab bar (position: fixed) inside the header */
  .top { backdrop-filter: none; -webkit-backdrop-filter: none; background: color-mix(in srgb, var(--surface-solid) 94%, transparent); }
  .top .wrap.top-row { flex-wrap: wrap; row-gap: 8px; column-gap: 8px; padding-block: 8px; }
  body:not(.guest) .brand .app-name { display: none; }
  .status { order: 3; width: 100%; justify-content: space-between; border-radius: 14px; padding: 4px 4px 4px 12px; gap: 8px; }
  .status .online { margin-right: auto; }
  .status #tokens { gap: 6px; }
  #lang { display: none; }
  /* bottom tab bar */
  .top .wrap.nav-row { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; max-width: none; padding: 0 0 env(safe-area-inset-bottom, 0px); background: color-mix(in srgb, var(--surface-solid) 94%, transparent); backdrop-filter: saturate(1.6) blur(20px); -webkit-backdrop-filter: saturate(1.6) blur(20px); border-top: 1px solid var(--line); }
  nav.tabs { width: 100%; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; padding: 4px 2px; background: none; border-radius: 0; overflow: visible; }
  .tab { display: grid; justify-items: center; gap: 2px; padding: 6px 0 5px; border-radius: 10px; font-size: 10px; font-weight: 650; letter-spacing: -.01em; min-width: 0; }
  .tab[aria-selected="true"] { background: var(--surface-2); box-shadow: none; }
  .tab-ico { display: block; width: 22px; height: 22px; fill: currentColor; }
  .tab-l { display: none; }
  .tab-s { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-inline: 2px; }
  .tab.has-dot::after { top: 3px; right: calc(50% - 17px); }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .toasts { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 360px) { .tab { font-size: 9.5px; } .tab-ico { width: 20px; height: 20px; } .status .stat .next { font-size: 11.5px; } }