/* Record art wrappers (SARecordArt.mount). S copies carry their own light: a slow sweep round the disc and a few
   glints that breathe; the sleeve gets a sheen that crosses it now and then. Nothing moves for reduced motion. */
.sra-disc,.sra-sleeve{position:relative;display:block;line-height:0}
.sra-disc{border-radius:50%}
.sra-disc>canvas,.sra-sleeve>canvas{display:block;width:100%;height:100%}
.sra-disc>canvas{border-radius:50%}
@property --sra-a{syntax:'<angle>';inherits:false;initial-value:0deg}
/* SS and SSS (v4) carry the same light in their own colour — rose gold, starlight — and SSS a second sweep turning the
   other way. */
.sra-disc{--sra-glint:rgba(255,246,214,.6)}.sra-disc.is-SS{--sra-glint:color-mix(in srgb,var(--sra-gem,#f4a3cf) 70%,#fff)}.sra-disc.is-SSS{--sra-glint:color-mix(in srgb,var(--sra-gem,#d8cbff) 55%,#fff)}
.sra-disc:is(.is-S,.is-SS,.is-SSS)::after{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;mix-blend-mode:screen;
 background:conic-gradient(from var(--sra-a),transparent 0 19%,var(--sra-glint) 21%,transparent 23% 69%,rgba(255,255,255,.28) 71%,transparent 73%);opacity:.8;
 animation:sra-sweep 4.2s linear infinite}
.sra-disc:is(.is-S,.is-SS,.is-SSS)::before{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:1;mix-blend-mode:screen;
 background:radial-gradient(circle at 28% 30%,#fff 0 1.2%,rgba(255,250,230,.5) 2.4%,transparent 4.5%),radial-gradient(circle at 72% 64%,#fff 0 1%,rgba(255,250,230,.45) 2.2%,transparent 4%),
  radial-gradient(circle at 60% 18%,#fff 0 .8%,rgba(255,250,230,.4) 1.8%,transparent 3.4%);animation:sra-twinkle 2.6s ease-in-out infinite}
.sra-sleeve:is(.is-S,.is-SS,.is-SSS){overflow:hidden}
.sra-sleeve:is(.is-S,.is-SS,.is-SSS)::after{content:'';position:absolute;inset:-20%;pointer-events:none;mix-blend-mode:screen;
 background:linear-gradient(115deg,transparent 40%,rgba(255,248,222,.45) 48%,rgba(255,255,255,.15) 52%,transparent 60%);transform:translateX(-70%);animation:sra-pass 5.5s ease-in-out infinite}
@keyframes sra-sweep{to{--sra-a:360deg}}
@keyframes sra-twinkle{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes sra-pass{0%,55%{transform:translateX(-70%)}85%,100%{transform:translateX(70%)}}
.sra-grade{display:inline-grid;place-items:center;flex:none;white-space:nowrap;min-width:1.5em;height:1.5em;padding:0 .35em;border-radius:.35em;font:800 .8em/1 system-ui,sans-serif;color:#1b130b;background:#9aa0a8}
.sra-grade[data-grade=C]{background:#5fa8d3}.sra-grade[data-grade=B]{background:#b58cff}.sra-grade[data-grade=A]{background:#ff9f43}
.sra-grade[data-grade=S]{background:linear-gradient(120deg,#fff3c4,#ffd76a 45%,#fff8e0 55%,#e6b23c);box-shadow:0 0 10px #ffd76a99}
.sra-grade[data-grade=SS]{letter-spacing:-.03em;background:linear-gradient(120deg,#ffe3f1,#f4a3cf 45%,#fff0f7 55%,#d06a9e);box-shadow:0 0 10px #f4a3cf99}
.sra-grade[data-grade=SSS]{letter-spacing:-.05em;color:#ffe6a6;background:linear-gradient(120deg,#1d1636,#3d2f6e 45%,#5a4796 55%,#1d1636);box-shadow:inset 0 0 0 1px #ffd77a,0 0 12px #b9a5ff99}
/* The three top grades read apart: S a gold sweep and white glints; SS glitter in its diamonds' own colour (--sra-gem, set
   by SARecordArt.mount), quicker; SSS a counter-turning second sweep, a breathing aura in its diamond's colour and
   prismatic fire on the sleeve. */
.sra-disc.is-SS::before{background:radial-gradient(circle at 26% 32%,#fff 0 1%,color-mix(in srgb,var(--sra-gem,#f4a3cf) 80%,transparent) 2.2%,transparent 4.2%),radial-gradient(circle at 70% 26%,#fff 0 .9%,color-mix(in srgb,var(--sra-gem,#f4a3cf) 80%,transparent) 2%,transparent 3.8%),radial-gradient(circle at 78% 66%,#fff 0 1%,color-mix(in srgb,var(--sra-gem,#f4a3cf) 80%,transparent) 2.2%,transparent 4%),radial-gradient(circle at 38% 78%,#fff 0 .8%,color-mix(in srgb,var(--sra-gem,#f4a3cf) 80%,transparent) 1.8%,transparent 3.4%),radial-gradient(circle at 16% 58%,#fff 0 .7%,color-mix(in srgb,var(--sra-gem,#f4a3cf) 80%,transparent) 1.6%,transparent 3%);animation:sra-twinkle 1.7s ease-in-out infinite}
/* the aura's colour lives on the element (a keyframe can't see the element's own --sra-gem); only its reach breathes */
@property --sra-aura{syntax:'<length>';inherits:false;initial-value:5px}
.sra-disc.is-SSS{filter:drop-shadow(0 0 var(--sra-aura) color-mix(in srgb,var(--sra-gem,#d8cbff) 85%,transparent));animation:sra-aura 3.2s ease-in-out infinite}
@keyframes sra-aura{0%,100%{--sra-aura:5px}50%{--sra-aura:18px}}
.sra-sleeve.is-SS::after{background:linear-gradient(115deg,transparent 40%,color-mix(in srgb,var(--sra-gem,#f4a3cf) 55%,#fff) 48%,rgba(255,255,255,.18) 52%,transparent 60%);animation-duration:4.2s}
.sra-sleeve.is-SSS::after{background:linear-gradient(115deg,transparent 38%,color-mix(in srgb,var(--sra-gem,#d8cbff) 60%,#fff) 46%,#fff8 50%,color-mix(in srgb,var(--sra-gem,#d8cbff) 40%,transparent) 54%,transparent 62%);animation-duration:3.4s}
.sra-sleeve.is-SSS::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;animation:sra-twinkle 1.3s ease-in-out infinite;background:radial-gradient(circle at 18% 22%,#fff 0 .7%,#ff9ad5 1.4%,transparent 2.6%),radial-gradient(circle at 74% 30%,#fff 0 .7%,#8fd8ff 1.4%,transparent 2.6%),radial-gradient(circle at 62% 74%,#fff 0 .7%,#ffe27a 1.4%,transparent 2.6%),radial-gradient(circle at 30% 64%,#fff 0 .6%,#b49bff 1.3%,transparent 2.4%),radial-gradient(circle at 86% 82%,#fff 0 .6%,#9dffc9 1.3%,transparent 2.4%)}
/* SSS: a second, counter-turning sweep over the first */
.sra-disc.is-SSS::after{background:conic-gradient(from var(--sra-a),transparent 0 19%,var(--sra-glint) 21%,transparent 23% 69%,rgba(255,255,255,.28) 71%,transparent 73%),conic-gradient(from calc(var(--sra-a) * -1.4),transparent 0 33%,color-mix(in srgb,var(--sra-gem,#d8cbff) 70%,#fff) 35%,transparent 37%)}

/* a sleeve on a material ground (metal, stone, a gem's substance) keeps that material's own look: no twinkles over it */
.sra-sleeve.has-bg::before{display:none}
@media (prefers-reduced-motion:reduce){.sra-disc:is(.is-S,.is-SS,.is-SSS)::after,.sra-disc:is(.is-S,.is-SS,.is-SSS)::before,.sra-sleeve:is(.is-S,.is-SS,.is-SSS)::after,.sra-sleeve.is-SSS::before,.sra-disc.is-SSS{animation:none}}
/* 唱片 3D 查看 */
#saRecord3D.sr3{box-sizing:border-box;width:min(1100px,96vw);height:min(760px,92dvh);max-width:96vw;max-height:92dvh;padding:0;border:1px solid #6b4b2e;border-radius:22px;
 background:radial-gradient(70% 70% at 40% 40%,#3a2a1c,#120c07 75%);color:#f3e6cf;font:14px/1.6 system-ui,-apple-system,"PingFang SC",sans-serif;overflow:hidden;box-shadow:0 30px 120px #000c}
#saRecord3D[open]{display:grid;grid-template-columns:minmax(0,1fr) 280px}
#saRecord3D::backdrop{background:#0b0704d0}
.sr3-stage{position:relative;min-height:0}
.sr3-canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}
.sr3-canvas:active{cursor:grabbing}
.sr3-note{padding:30px;color:#cbb594}
.sr3-info{display:grid;align-content:start;gap:8px;padding:22px 20px;border-left:1px solid #ffffff14;background:#1a120bcc}
.sr3-info>small:first-child{color:#bba382;font-size:12px}
.sr3-info strong{font:600 21px/1.35 'Songti SC','Noto Serif SC',serif;color:#fff2da}
.sr3-line{margin:0;display:flex;align-items:center;gap:6px;font-size:13px;color:#e7d3b1}
.sr3-wear{margin:0;font-size:12.5px;color:#d9b98a;font-variant-numeric:tabular-nums}
.sr3-craft{margin:0;padding:3px 10px;justify-self:start;border-radius:999px;background:#ffffff10;font-size:12px;color:#f0dcb6}
.sr3-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.sr3-btn{padding:8px 14px;border-radius:11px;border:1px solid #ffffff2a;background:#ffffff0d;color:#f3e6cf;font:inherit;cursor:pointer}
.sr3-btn[aria-pressed=true]{background:#f3e6cf;color:#24170b}
.sr3-close{margin-left:auto}
.sr3-hint{color:#8d7a5f;font-size:11.5px}
.sra-3d{cursor:zoom-in}
@media (max-width:760px){
 #saRecord3D.sr3{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:0}
 #saRecord3D[open]{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
 .sr3-info{border-left:0;border-top:1px solid #ffffff14;padding:14px 16px 22px}
}

/* 出货广播 (js/record-feed.js): a banner gliding in at the top, gold for S, rose for SS, night-violet for SSS */
.sa-feed{position:fixed;z-index:2147483000;left:50%;top:calc(12px + env(safe-area-inset-top,0px));display:flex;align-items:center;gap:10px;box-sizing:border-box;
 max-width:min(560px,calc(100vw - 24px));padding:8px 9px 8px 13px;border-radius:999px;border:1px solid #f3cf8a88;color:#fbead0;
 background:linear-gradient(110deg,#2a1b0ef2,#3a2612f2);box-shadow:0 12px 34px #000a,0 0 22px #f3cf8a33;
 font:13.5px/1.4 system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;transform:translate(-50%,-150%);opacity:0;
 transition:transform .38s cubic-bezier(.2,.8,.2,1),opacity .3s}
.sa-feed.is-in{transform:translate(-50%,0);opacity:1}
.sa-feed[data-grade=SS]{border-color:#f4a3cf99;box-shadow:0 12px 34px #000a,0 0 24px #f4a3cf44}
.sa-feed[data-grade=SSS]{border-color:#c9b6ff;background:linear-gradient(110deg,#1d1636f2,#3d2f6ef2);box-shadow:0 12px 34px #000a,0 0 30px #b9a5ff66}
.sa-feed-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sa-feed-text b{color:#fff3c4;font-weight:700}
.sa-feed-text em{font-style:normal;color:#fff;margin-left:2px}
.sa-feed .sra-grade{font-size:11px;vertical-align:1px;margin:0 1px}
.sa-feed-spark{flex:none;width:18px;height:18px;background:radial-gradient(circle,#fff 0 12%,#ffd76a 30%,transparent 62%);animation:sa-feed-tw 1.4s ease-in-out infinite}
.sa-feed-look{flex:none;padding:5px 12px;border-radius:999px;border:0;background:#f3e6cf;color:#24170b;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.sa-feed-close{flex:none;width:24px;height:24px;padding:0;border-radius:50%;border:0;background:#ffffff14;color:#e9d6b3;font-size:15px;line-height:1;cursor:pointer}
@keyframes sa-feed-tw{50%{transform:scale(.6);opacity:.6}}
@media (prefers-reduced-motion:reduce){.sa-feed{transition:opacity .2s}.sa-feed-spark{animation:none}}
/* 唱片上桌 in a hall member's card */
.member-desk{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:4px 0 10px;padding:8px 10px;border-radius:12px;background:#f6efe2;color:#3a2c20;font-size:13px}
.member-desk small{color:#8a7458}
.member-desk b{font-weight:700}
.member-desk .sra-grade{font-size:11px}
.member-desk-tag{font-style:normal;font-size:10.5px;font-weight:700;padding:0 6px;border-radius:999px;border:1px solid #d0a24a;color:#8a5d17}
.member-desk-tag.is-set{color:#3a2507;border:0;background:linear-gradient(120deg,#fff3c4,#e6b23c)}
.member-desk button{margin-left:auto;padding:4px 12px;border-radius:999px;font-size:12px}
/* 唱片上桌 on one's own room desk (js/room-desk.js), in percent of the 16:9 frame: between the desk mat and the bookends */
.sa-room-desk{position:absolute;z-index:14;left:62.4%;bottom:30.6%;width:4.6%;aspect-ratio:1/1.05;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:filter 1.1s ease}
.sa-room-desk[hidden]{display:none}
.srd-sleeve{position:absolute;left:6%;bottom:27%;width:64%;aspect-ratio:1;transform:rotate(-4deg);transform-origin:50% 100%;border-radius:2px;overflow:hidden;box-shadow:0 3px 7px #000a;transition:transform .25s ease}
.srd-sleeve>.sra-sleeve{width:100%;height:100%}
.srd-deck{position:absolute;left:0;right:0;bottom:0;height:27%;border-radius:3px;background:linear-gradient(#5a493b,#2b221c 26%,#1d1611);box-shadow:0 4px 6px #0007}
.srd-platter{position:absolute;left:14%;width:62%;aspect-ratio:1;top:0;transform:translateY(-50%) scaleY(.3)}
.srd-disc{display:block;width:100%;height:100%;border-radius:50%}
.srd-disc>*{width:100%!important;height:100%!important}
.sa-room-desk.is-playing .srd-disc{animation:srd-spin 1.8s linear infinite}
@keyframes srd-spin{to{transform:rotate(360deg)}}
.srd-arm{position:absolute;right:5%;top:-4%;width:28%;height:2px;border-radius:2px;background:#d9d0c2;transform:rotate(-22deg);transform-origin:right center}
.sa-room-desk.is-set .srd-sleeve{outline:2px solid #e6b23c;box-shadow:0 0 12px #ffd76aaa,0 3px 7px #000a}
.sa-room-desk:hover .srd-sleeve,.sa-room-desk:focus-visible .srd-sleeve{transform:rotate(-4deg) translateY(-7%)}
body.lights-off .sa-room-desk{filter:brightness(.5) saturate(.7)}
@media (prefers-reduced-motion:reduce){.sa-room-desk.is-playing .srd-disc{animation:none}}
/* 倾斜光效 (record-art.js mount): holo, 彩钻 and 流麻 sleeves catch the light as the phone tilts or the pointer moves */
.sra-tilt{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;opacity:.6}
.sra-tilt[data-tilt=holo]{background:linear-gradient(115deg,transparent 18%,#ff6ad540 30%,#6ae8ff4d 40%,#fff86a40 50%,#7dff8a40 60%,transparent 74%);background-size:260% 260%;
 background-position:calc(50% + var(--sa-tx,0) * 48%) calc(50% + var(--sa-ty,0) * 48%)}
.sra-tilt[data-tilt=diamond]{background:radial-gradient(circle at calc(30% + var(--sa-tx,0) * 30%) calc(30% + var(--sa-ty,0) * 30%),#fffa 0 1.8%,transparent 8%),
 radial-gradient(circle at calc(70% - var(--sa-tx,0) * 26%) calc(62% + var(--sa-ty,0) * 26%),#fff9 0 1.5%,transparent 7%),
 radial-gradient(circle at calc(55% + var(--sa-ty,0) * 30%) calc(24% - var(--sa-tx,0) * 22%),#dff4ffaa 0 1.2%,transparent 6%),
 linear-gradient(125deg,transparent 35%,#ffffff33 50%,transparent 65%);background-size:100% 100%,100% 100%,100% 100%,250% 250%;
 background-position:0 0,0 0,0 0,calc(50% + var(--sa-tx,0) * 55%) 50%}
.sra-tilt[data-tilt=flow]{background:linear-gradient(160deg,transparent 30%,#ffffff22 45%,#ffffff44 50%,#ffffff22 55%,transparent 70%);background-size:220% 220%;
 background-position:calc(50% + var(--sa-tx,0) * 42%) calc(50% + var(--sa-ty,0) * 42%)}
@media (prefers-reduced-motion:reduce){.sra-tilt{display:none}}
/* 套装 gold light: the angle that turns it (used by 唱片铺, the profile wall and the room desk) */
@property --sa-set-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes sa-set-spin{to{--sa-set-a:360deg}}