/* ============ crowns, records, honours, profile pictures ============ */
/* avatars: a photo, an emoji on a colour, or an initial. The Monarch wears a spinning gold ring. */
.avatar { position: relative; }
.avatar.photo { background-color: #241552; background-size: cover; background-position: center; }
.avatar.emoji { text-shadow: none; }
.avatar.emoji i { font-style: normal; font-size: 1.45em; line-height: 1; transform: translateY(.03em); }
.avatar.monarch { box-shadow: 0 0 0 2px #140b30, 0 0 16px 1px rgba(255,194,61,.55); }
.avatar.monarch::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; padding: 2.5px; pointer-events: none;
  background: conic-gradient(#fff6c2, #ffc23d, #ff7a2b, #ffc23d, #fff6c2, #ffc23d, #ff7a2b, #fff6c2);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin 5s linear infinite; }

/* song list: the champion's picture as a sticker on the cover */
.cover-wrap { position: relative; flex: none; }
.cover-wrap.yours .cover { box-shadow: 0 0 0 2px var(--gold), 0 0 18px -2px rgba(255,194,61,.6); }
.champ { position: absolute; right: -7px; bottom: -6px; width: 26px; height: 26px; }
.champ .avatar { width: 26px; height: 26px; font-size: 11px; box-shadow: 0 0 0 2px #140b30, 0 0 0 3.5px var(--gold); }
.champ .champ-crown { position: absolute; top: -11px; left: 50%; width: 15px; height: 15px; transform: translateX(-50%) rotate(-10deg); color: var(--gold);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.8)); }
.champ.me .avatar { box-shadow: 0 0 0 2px #140b30, 0 0 0 3.5px var(--gold), 0 0 14px rgba(255,194,61,.8); }

/* song page: the crown */
.champ-card { position: relative; margin: 0 0 16px; padding: 16px; border-radius: var(--r-md); overflow: hidden;
  background: linear-gradient(115deg, rgba(255,194,61,.17), rgba(255,255,255,.035) 58%); border: 1px solid rgba(255,194,61,.3); }
.champ-card::before { content: ""; position: absolute; top: 0; bottom: 0; width: 45%; left: -60%; transform: skewX(-20deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,240,200,.13), transparent); animation: shine 6s ease-in-out 1s infinite; }
.champ-card.yours { background: linear-gradient(115deg, rgba(255,210,74,.34), rgba(255,122,43,.14) 55%, rgba(255,255,255,.04)); border-color: rgba(255,210,74,.65);
  box-shadow: 0 14px 34px -16px rgba(255,160,40,.65); }
.champ-card.open { background: rgba(255,255,255,.03); border: 1.5px dashed rgba(255,194,61,.35); }
.champ-card.open::before { display: none; }
.champ-card.skeleton { height: 118px; border-color: var(--stroke); background: var(--surface); }
.champ-card.skeleton::before { display: none; }
.champ-main { position: relative; display: flex; align-items: center; gap: 14px; cursor: pointer; }
.champ-av { position: relative; flex: none; margin-top: 6px; }
.champ-av .avatar { width: 54px; height: 54px; font-size: 22px; box-shadow: 0 0 0 2.5px var(--gold), 0 10px 22px -8px rgba(255,150,40,.7); }
.champ-av .champ-crown { position: absolute; top: -17px; left: 50%; width: 24px; height: 24px; color: var(--gold); filter: drop-shadow(0 2px 4px rgba(0,0,0,.55));
  transform: translateX(-50%) rotate(-10deg); animation: crownbob 2.6s ease-in-out infinite; }
@keyframes crownbob { 50% { transform: translateX(-50%) rotate(-4deg) translateY(-3px); } }
.champ-slot { flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; border: 2px dashed rgba(255,194,61,.5); color: var(--gold); }
.champ-slot svg { width: 24px; height: 24px; animation: bob 2.6s var(--ease) infinite; }
.champ-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.champ-text .eyebrow { color: var(--gold); font-size: 11px; letter-spacing: 1.6px; }
.champ-text b { font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.champ-text > span:last-child { font-size: 13px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.champ-go { width: 18px; height: 18px; color: var(--text-3); }
.champ-how { position: relative; margin: 12px 0 0; font-size: 12.5px; font-weight: 600; line-height: 1.45; color: var(--text-2); }
.champ-fan { position: relative; display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,.08);
  font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.champ-fan .avatar { width: 22px; height: 22px; font-size: 10px; }
.champ-fan b { color: var(--text); }

/* song page: records + honours for the chosen difficulty */
.records { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 22px; }
.rec { --ic: var(--gold); display: grid; gap: 9px; min-width: 0; padding: 11px 12px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--stroke);
  cursor: pointer; animation: rise .35s var(--ease) both; transition: transform .15s var(--spring); }
.rec:active { transform: scale(.97); }
.rec:nth-child(1) { --ic: #ff8a3d; } .rec:nth-child(2) { --ic: var(--blue); } .rec:nth-child(3) { --ic: var(--great); } .rec:nth-child(4) { --ic: var(--gold); }
.rec:nth-child(2) { animation-delay: 40ms; } .rec:nth-child(3) { animation-delay: 80ms; } .rec:nth-child(4) { animation-delay: 120ms; }
.rec-label { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.rec-label svg { width: 14px; height: 14px; color: var(--ic); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ic) 60%, transparent)); }
.rec-who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.rec-who .avatar { width: 30px; height: 30px; font-size: 12px; }
.rec-who > span:last-child { display: grid; min-width: 0; }
.rec-who b { font-family: var(--display); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-who small { font-size: 12px; font-weight: 700; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec.me { border-color: rgba(255,194,61,.45); background: linear-gradient(rgba(255,194,61,.1), rgba(255,194,61,.04)); }
.rec.vacant { cursor: default; background: transparent; border-style: dashed; }
.rec.vacant b, .rec.vacant small { color: var(--text-3); }
.rec-open { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1.5px dashed var(--stroke-2); color: var(--text-3); }
.rec-open svg { width: 13px; height: 13px; }
.rec.skeleton { height: 78px; cursor: default; }
.skeleton { position: relative; overflow: hidden; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); animation: skel 1.3s ease-in-out infinite; }
@keyframes skel { to { transform: translateX(100%); } }

/* leaderboard: full combo / flawless tags, the champion's crown, the podium */
.ftag { display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .6px; padding: 0 5px; border-radius: 5px; margin-right: 6px; vertical-align: 1px; }
.ftag.fc { color: #062a17; background: var(--great); }
.ftag.flawless { color: #3a2200; background: linear-gradient(135deg, #fff1a8, var(--gold)); }
.entry .king { width: 15px; height: 15px; margin-left: 6px; vertical-align: -2px; color: var(--gold); filter: drop-shadow(0 0 6px rgba(255,194,61,.6)); }
.entry.top1:not(.me) { background: linear-gradient(90deg, rgba(255,216,77,.1), var(--surface) 55%); }

/* results: what this run won */
.glory { display: grid; gap: 8px; margin-top: 18px; }
.glory-item { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--r-md); text-align: left;
  background: linear-gradient(90deg, rgba(255,194,61,.13), rgba(255,255,255,.03)); border: 1px solid rgba(255,194,61,.32); animation: pop .55s var(--spring) both; }
.glory-item.big { padding: 16px; background: linear-gradient(110deg, rgba(255,210,74,.34), rgba(255,122,43,.2) 50%, rgba(255,46,99,.16)); border-color: rgba(255,210,74,.7);
  box-shadow: 0 16px 40px -16px rgba(255,140,40,.75); }
.glory-icon { flex: none; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: var(--flame);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.4), 0 8px 18px -8px rgba(255,90,40,.7); }
.glory-icon svg { width: 22px; height: 22px; }
.glory-item.big .glory-icon { width: 56px; height: 56px; border-radius: 50%; color: #3a2200; background: radial-gradient(circle at 35% 30%, #fff6c2, var(--gold) 50%, #ff6a2b);
  box-shadow: 0 0 24px rgba(255,194,61,.6), inset 0 2px 0 rgba(255,255,255,.6); }
.glory-item.big .glory-icon svg { width: 28px; height: 28px; animation: crownpop .9s var(--spring) .9s both; }
@keyframes crownpop { from { transform: scale(0) rotate(-30deg); } }
.glory-item b { display: block; font-family: var(--display); font-weight: 800; font-size: 16px; }
.glory-item.big b { font-size: 20px; }
.glory-item small { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; line-height: 1.38; color: var(--text-2); }
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 90; }

/* home: crowns in alerts and the feed, your picture, the nudge to add one */
.crown-tag svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 2px; }
.feed-item.crowned { background: linear-gradient(90deg, rgba(255,194,61,.11), transparent 75%); }
.home-player { gap: 8px; padding: 5px 10px 5px 5px; margin-top: 8px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--stroke);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: transform .15s var(--spring); }
.home-player:active { transform: scale(.96); }
.home-player .avatar { width: 28px; height: 28px; font-size: 12px; }
.home-player .chev { width: 14px; height: 14px; color: var(--text-3); }
.mini-crowns { display: inline-flex; align-items: center; gap: 3px; color: var(--gold); font-weight: 800; }
.home-player .mini-crowns svg { width: 14px; height: 14px; color: var(--gold); }
.nudge { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 8px 12px 12px; background: rgba(20,12,46,.82); border-color: rgba(255,194,61,.4);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); animation: rise .4s var(--ease) both; }
.nudge-av { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--flame); box-shadow: 0 6px 16px -6px rgba(255,90,40,.7); }
.nudge-text { flex: 1; min-width: 0; display: grid; }
.nudge-text b { font-family: var(--display); font-weight: 800; font-size: 14px; }
.nudge-text small { font-size: 12.5px; font-weight: 600; color: var(--text-2); line-height: 1.35; }
.nudge .btn.small { flex: none; min-height: 36px; }
.nudge-x { flex: none; width: 30px; height: 30px; display: grid; place-items: center; color: var(--text-3); border-radius: 50%; }
.nudge-x svg { width: 15px; height: 15px; }

/* player page: picture, Monarch, crowns shelf, honours */
.hero-av { position: relative; width: 96px; height: 96px; margin: 0 auto 12px; }
.player-hero .hero-av .avatar { width: 96px; height: 96px; font-size: 40px; margin: 0; }
.player-hero.is-monarch .hero-av .avatar::after { inset: -5px; padding: 3.5px; }
.av-edit { position: absolute; right: -4px; bottom: -2px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--flame);
  box-shadow: 0 0 0 3px #150c33, 0 6px 16px -4px rgba(255,90,40,.6); transition: transform .15s var(--spring); }
.av-edit:active { transform: scale(.9); }
.av-edit svg { width: 18px; height: 18px; }
.monarch-tag { display: inline-flex; align-items: center; gap: 5px; margin: 0 0 8px; padding: 4px 11px 3px; border-radius: 999px; font-family: var(--display); font-weight: 800; font-size: 11px;
  letter-spacing: 1.6px; text-transform: uppercase; color: #3a2200; background: linear-gradient(135deg, #fff1a8, var(--gold) 50%, #ff8a3d); box-shadow: 0 6px 20px -6px rgba(255,170,40,.75); }
.monarch-tag svg { width: 13px; height: 13px; }
.pstats .card.gold { border-color: rgba(255,194,61,.35); background: linear-gradient(rgba(255,194,61,.1), rgba(255,255,255,.03)); }
.pstats .card.gold b { color: var(--gold); }
.shelf { display: flex; gap: 12px; overflow-x: auto; margin: 0 -20px 22px; padding: 12px 20px 4px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.shelf::-webkit-scrollbar { display: none; }
.shelf-item { position: relative; flex: none; width: 108px; text-align: left; scroll-snap-align: start; transition: transform .15s var(--spring); }
.shelf-item:active { transform: scale(.96); }
.shelf-item .cover { width: 108px; height: 108px; border-radius: 18px; font-size: 38px; box-shadow: 0 0 0 2px rgba(255,194,61,.65), 0 14px 26px -12px rgba(0,0,0,.8); }
.shelf-item .cover .dots { display: none; }
.shelf-crown { position: absolute; top: -10px; right: -6px; width: 28px; height: 28px; color: var(--gold); transform: rotate(14deg); filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.shelf-item b { display: block; margin-top: 9px; font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shelf-item small { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; }
.small-empty { margin: 0 0 22px; font-size: 13.5px; }
.honours { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-bottom: 22px; }
.honour { width: 100%; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--stroke); text-align: left; }
.honour > svg { width: 34px; height: 34px; padding: 8px; border-radius: 50%; color: var(--great); background: rgba(93,255,176,.13); }
.honour.firstFlawless > svg { color: var(--gold); background: rgba(255,194,61,.15); }
.honour b { display: block; font-size: 14px; font-weight: 800; }
.honour small { display: block; font-size: 12px; font-weight: 700; color: var(--text-3); }

/* the picture editor */
.av-sheet { display: grid; gap: 12px; max-height: calc(var(--app-h, 100dvh) - 16px); overflow-y: auto; }
.av-stage { display: grid; place-items: center; padding: 6px 0 2px; }
.av-crop { position: relative; width: 210px; height: 210px; border-radius: 50%; overflow: hidden; background: #120a2c; touch-action: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.14), 0 22px 50px -20px rgba(0,0,0,.85); }
.av-crop.can-drag { cursor: grab; }
.av-crop.can-drag:active { cursor: grabbing; }
.av-crop canvas { display: block; width: 100%; height: 100%; }
.av-preview, .av-preview .avatar { width: 100%; height: 100%; }
.av-preview .avatar { font-size: 84px; box-shadow: none; }
.av-zoom { display: flex; align-items: center; gap: 10px; padding: 0 12px; color: var(--text-3); }
.av-zoom svg { width: 18px; height: 18px; }
.av-tabs { margin: 0; }
.av-pane .btn { margin: 0; }
.av-note { margin: 10px 6px 0; text-align: center; line-height: 1.45; }
.av-emojis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; max-height: 172px; overflow-y: auto; padding: 2px; }
.av-emojis button { aspect-ratio: 1; border-radius: 14px; font-size: 25px; line-height: 1; background: var(--surface); border: 1px solid var(--stroke); transition: transform .15s var(--spring), background .15s; }
.av-emojis button.on { background: rgba(255,194,61,.18); border-color: var(--gold); transform: scale(1.06); }
.av-colors { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 12px; }
.av-colors button { width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 1.5px 0 rgba(255,255,255,.3); transition: transform .15s var(--spring); }
.av-colors button.on { box-shadow: 0 0 0 3px #1c1040, 0 0 0 5px #fff; transform: scale(1.08); }
.av-sheet .modal-actions { margin-top: 2px; }
.av-reset { justify-self: center; margin-top: -4px; }
.row-end { display: flex; align-items: center; gap: 8px; }
.row-end .avatar { width: 32px; height: 32px; font-size: 13px; }
@media (min-width: 700px) { .av-sheet { width: 420px; } }

/* results: a second big win, one size down */
.glory-item.mid { background: linear-gradient(110deg, rgba(255,210,74,.2), rgba(255,255,255,.04)); border-color: rgba(255,210,74,.5); }
.glory-item.mid .glory-icon { border-radius: 50%; color: #3a2200; background: radial-gradient(circle at 35% 30%, #fff6c2, var(--gold) 50%, #ff6a2b); }

/* home alerts: a round play button, so the words get the room */
.alert-go { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--flame);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.45), 0 8px 18px -8px rgba(255,90,40,.8); transition: transform .15s var(--spring); }
.alert-go:active { transform: scale(.9); }
.alert-go svg { width: 18px; height: 18px; }
.alert-go.crown { color: #3a2200; background: radial-gradient(circle at 35% 30%, #fff6c2, var(--gold) 50%, #ff6a2b); box-shadow: 0 0 16px rgba(255,194,61,.5), inset 0 1.5px 0 rgba(255,255,255,.6); }
.alert .avatar { width: 34px; height: 34px; font-size: 13px; }

/* song list: the Unclaimed filter */
#sort button { white-space: nowrap; }
.board-empty > svg { width: 26px; height: 26px; color: var(--gold); display: block; margin: 0 auto 8px; }

/* leaderboard names: the name gives way, the YOU tag and crown stay */
.entry-name .nm { display: flex; align-items: center; min-width: 0; }
.entry-name .nm-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry-name .you, .entry-name .king { flex: none; }

/* loading placeholders */
.entry.skeleton { height: 60px; background: var(--surface); border: 0; cursor: default; }
.player-skel { display: grid; justify-items: center; gap: 10px; padding: 8px 0 22px; }
.sk-circle { width: 96px; height: 96px; border-radius: 50%; background: var(--surface-2); }
.sk-line { width: 150px; height: 22px; border-radius: 8px; background: var(--surface-2); }
.sk-line.short { width: 90px; height: 12px; }
.sk-stat { height: 64px; }

/* player page: honours list, admin tools at the bottom */
.honour b { display: flex; align-items: center; gap: 6px; }
.honour small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.honour > span { min-width: 0; }
.show-all { justify-self: center; }
#player-body .admin-card { margin: 22px 0 0; }

/* notifications: settings rows, and the offer after taking a crown */
#notify-status { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--text-3); }
#notify-kinds .row { border-top: 1px solid var(--stroke); }
.glory-cta { margin-top: 10px; min-height: 36px; }