/* Clean decorative background: no flattened interface behind the real UI. */
.reference-background{clip-path:none;background:#031e18 url('/assets/pro/lounge-v50.png') center/100% 100% no-repeat;opacity:1;overflow:hidden}
.reference-table{display:none}
main{background:linear-gradient(120deg,rgba(2,27,21,.43),rgba(3,30,24,.24));border-radius:12px;box-shadow:0 12px 32px #0002}
.panel,.leaders-panel{background:linear-gradient(130deg,rgba(3,33,26,.83),rgba(2,25,20,.72));backdrop-filter:blur(3px)}
.left-column{background:rgba(3,32,25,.76)}
.create-panel{background:transparent;backdrop-filter:none}
.salon-footer{background:rgba(3,28,22,.35);min-height:56px;padding:15px 8px;border-radius:0 0 12px 12px}
/* Compact rankings. Real global rank remains legible below a simple crown. */
.leader-row{min-height:58px;padding:7px 8px;margin-bottom:6px;gap:8px;grid-template-columns:30px 32px minmax(0,1fr) auto;background:rgba(4,29,23,.55);border-color:#b09a5e35}
.leader-avatar{width:30px;height:30px;font-size:12px}
.leader-name{font-size:12px}.leader-meta{font-size:10px;margin-top:2px}.leader-score{font-size:12px}
.leader-rank{--metal-light:#c2ccd0;--metal-mid:#78858b;--metal-dark:#465156;display:flex;align-items:flex-end;justify-content:center;width:30px;height:40px;padding:0 0 1px;border:0!important;border-radius:0;outline:none;outline-offset:0;background:none!important;box-shadow:none;color:#bdc6c5;font:600 10px/12px 'Segoe UI',sans-serif;text-shadow:0 1px 2px #000;position:relative}
.leader-rank:before{content:'';position:absolute;top:0;left:0;width:30px;height:25px;color:inherit!important;background:linear-gradient(135deg,var(--metal-light) 5%,var(--metal-mid) 48%,var(--metal-light) 59%,var(--metal-dark) 100%);-webkit-mask:url('/assets/pro/rank-crown-v53.svg') center/contain no-repeat;mask:url('/assets/pro/rank-crown-v53.svg') center/contain no-repeat;filter:drop-shadow(0 1px 1px #0008);text-shadow:none}
.leader-row:nth-child(1) .leader-rank{--metal-light:#fff0b8;--metal-mid:#d5a43c;--metal-dark:#92601c}
.leader-row:nth-child(2) .leader-rank{--metal-light:#f4c49c;--metal-mid:#bb7b48;--metal-dark:#744123}
.leader-row:nth-child(3) .leader-rank{--metal-light:#f3f7f8;--metal-mid:#a6b5bd;--metal-dark:#64737d}
#leaders-refresh{margin-top:10px;padding:8px}.leader-empty{padding:12px 4px}.leader-scope{margin-bottom:10px}
/* Intermittent glints on the approved crown/shield, never over controls. */
.royal-banner,.reference-shield{position:relative;overflow:hidden}
.royal-banner:after{content:'';display:block;position:absolute;inset:0 auto 0 0;width:22%;background:linear-gradient(115deg,transparent 32%,#fff2c600 40%,#fff2c65c 49%,#fff8dc12 56%,transparent 65%);transform:translateX(-110%);opacity:0;animation:pro-crown-glint 13s ease-in-out infinite;pointer-events:none;mix-blend-mode:screen}
.reference-shield:after{content:'';position:absolute;inset:8% 0 18%;background:linear-gradient(112deg,transparent 30%,#fff0bf00 41%,#fff0bf55 49%,#fff0bf00 57%,transparent 69%);transform:translateX(-110%);opacity:0;animation:pro-shield-glint 17s ease-in-out 4s infinite;pointer-events:none;mix-blend-mode:screen}
.reference-background:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 3% 10%,#ffd47b28,transparent 10%),radial-gradient(ellipse at 97% 10%,#ffd47b22,transparent 10%),radial-gradient(ellipse at 89% 88%,#ffe5b017,transparent 12%);opacity:.35;animation:pro-warm-light 9s ease-in-out infinite;pointer-events:none}
@keyframes pro-crown-glint{0%,76%{transform:translateX(-110%);opacity:0}79%{opacity:.65}90%{transform:translateX(100%);opacity:0}100%{transform:translateX(100%);opacity:0}}
@keyframes pro-shield-glint{0%,78%{transform:translateX(-110%);opacity:0}81%{opacity:.55}94%,100%{transform:translateX(110%);opacity:0}}
@keyframes pro-warm-light{0%,100%{opacity:.25}50%{opacity:.65}}
@media(max-width:700px){.reference-background{background-size:auto 100%;background-position:center}.leader-row{grid-template-columns:30px 32px minmax(0,1fr) auto}.salon-footer{letter-spacing:1px}.royal-banner:after{width:22%}}
@media(prefers-reduced-motion:reduce){.royal-banner:after,.reference-shield:after,.reference-background:after{animation:none!important;opacity:0}}
