/* Personal tournament tools and private match predictions. */
.community-personal-tools { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 0 20px; padding:17px 20px; border:1px solid var(--vault-line-strong); border-radius:16px; background:linear-gradient(105deg,rgba(220,190,100,.07),transparent 65%),var(--vault-panel); }
.community-participation { position:relative; display:flex; align-items:center; gap:13px; min-width:0; }
.community-participation-icon { display:grid; place-items:center; flex:none; width:36px; height:36px; border:1px solid var(--vault-line-strong); border-radius:50%; color:var(--vault-gold); line-height:0; }
.community-participation-icon svg { display:block; width:24px; height:24px; }
.community-participation strong,.community-participation div>span { display:block; }
.community-participation strong { font-size:14px; font-weight:600; }
.community-participation div>span { margin-top:4px; color:var(--vault-muted); font-size:12px; }
.community-participation output { position:absolute; top:50%; left:var(--community-progress-center,50%); transform:translate(-50%,-50%); margin:0; white-space:nowrap; color:var(--vault-gold); font-size:21px; font-variant-numeric:tabular-nums; }
.community-personal-actions { display:flex; flex-wrap:wrap; gap:9px; }
.community-match-navigation { display:flex; align-items:center; flex-wrap:wrap; gap:8px; min-width:0; }
.community-next-unvoted { white-space:nowrap; }
.community-prediction-trigger { display:flex; align-items:center; gap:9px; }
.community-prediction-trigger svg { width:19px; height:19px; color:var(--vault-gold); }
.community-prediction-trigger small { padding-left:9px; border-left:1px solid var(--vault-line-strong); color:var(--vault-muted); font-size:11px; }
.community-prediction-dialog { --prediction-height:min(90dvh,900px); box-sizing:border-box; width:min(1000px,calc(100vw - 48px)); max-width:none; max-height:var(--prediction-height); overflow:hidden; margin:auto; padding:0; border:1px solid var(--vault-line-strong,#38352b); border-radius:22px; background:var(--vault-bg,#111210); color:var(--vault-text,#f3f1e9); box-shadow:0 30px 100px #0009; font:inherit; }
.community-prediction-dialog[open] { display:block; }
.community-prediction-scroll { max-height:calc(var(--prediction-height) - 2px); overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.community-prediction-dialog::backdrop { background:#050605be; backdrop-filter:blur(6px); }
.community-prediction-head { display:flex; justify-content:space-between; gap:16px; padding:26px 78px 18px 28px; }
.community-prediction-head h2 { margin:8px 0; font-size:27px; font-weight:600; letter-spacing:-.035em; }
.community-prediction-head p { margin:0; color:var(--vault-muted); font-size:13px; line-height:1.5; }
.community-prediction-dialog .community-prediction-close { position:absolute; z-index:2; top:16px; right:16px; display:grid; place-items:center; box-sizing:border-box; width:40px; height:40px; min-width:40px; min-height:40px; aspect-ratio:1; padding:0; line-height:1; background:var(--vault-bg,#111210); }
.community-prediction-close svg { display:block; width:18px; height:18px; }
.community-prediction-summary { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:0 28px 16px; padding:14px 18px; border:1px solid var(--vault-line-strong); border-radius:12px; background:rgba(220,190,100,.045); }
.community-prediction-summary strong,.community-prediction-summary div>span { display:block; }
.community-prediction-summary strong { font-size:13px; font-weight:500; color:var(--vault-gold); }
.community-prediction-summary div>span { margin-top:5px; color:var(--vault-muted); font-size:12px; line-height:1.4; }
.community-prediction-count { flex:none; color:var(--vault-gold); font-size:21px; font-variant-numeric:tabular-nums; text-align:right; }
.community-prediction-count small { display:block; margin-top:2px; color:var(--vault-muted); font-size:10px; }
.community-prediction-champion { display:flex; align-items:center; gap:11px; margin:0 28px 16px; }
.community-prediction-champion img { border-radius:8px; object-fit:cover; }
.community-prediction-champion div { flex:1; min-width:0; }
.community-prediction-champion div>span { display:block; margin-bottom:3px; color:var(--vault-muted); font-size:11px; }
.community-prediction-champion strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:500; }
.community-prediction-champion>span { color:var(--vault-gold); font-size:28px; }
.community-prediction-rounds { display:flex; flex:none; gap:8px; overflow-x:auto; padding:0 28px 16px; }
.community-prediction-rounds .community-button { display:flex; align-items:center; gap:12px; flex:none; }
.community-prediction-rounds .community-button[aria-pressed="true"] { border-color:var(--vault-gold); background:rgba(220,190,100,.1); color:var(--vault-gold); }
.community-prediction-rounds small { color:var(--vault-muted); font-size:11px; font-variant-numeric:tabular-nums; }
.community-prediction-statuses { display:flex; flex-wrap:wrap; gap:7px; padding:0 28px 18px; }
.community-prediction-statuses .community-button { display:flex; align-items:center; justify-content:center; gap:9px; min-height:34px; padding:7px 11px; font-size:11px; }
.community-prediction-statuses small { min-width:17px; padding:1px 4px; border-radius:4px; background:rgba(255,255,255,.05); color:var(--vault-muted); font-size:10px; font-variant-numeric:tabular-nums; }
.community-prediction-statuses [aria-pressed="true"] { border-color:var(--vault-gold); color:var(--vault-gold); background:rgba(226,203,129,.08); }
.community-prediction-statuses .is-correct[aria-pressed="true"] { border-color:rgba(134,196,153,.6); color:#a1d6b1; background:rgba(134,196,153,.08); }
.community-prediction-statuses .is-wrong[aria-pressed="true"] { border-color:rgba(220,150,136,.6); color:#e3aa9e; background:rgba(220,150,136,.08); }
.community-prediction-statuses .is-pending[aria-pressed="true"] { border-color:rgba(153,184,215,.6); color:#afc8e3; background:rgba(153,184,215,.08); }
.community-prediction-statuses [aria-pressed="true"] small { color:inherit; }
.community-prediction-body { min-height:100px; padding:2px 28px 24px; }
.community-prediction-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.community-prediction-pair,.community-match-prediction { container:prediction-card / inline-size; --prediction-accent:var(--vault-gold); --prediction-accent-rgb:226,203,129; }
.community-prediction-pair { position:relative; overflow:hidden; min-width:0; padding:16px; border:1px solid var(--vault-line-strong); border-radius:15px; background:var(--vault-panel); }
.community-prediction-pair-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:0 1px 12px; color:var(--vault-muted); font-size:11px; }
.community-prediction-pair-head time { flex:none; font-size:10px; color:var(--vault-muted); }
.community-prediction-verdict { display:flex; align-items:center; gap:12px; min-height:66px; margin:0 0 12px; padding:11px 12px; border:1px solid rgba(var(--prediction-accent-rgb),.22); border-radius:11px; background:rgba(var(--prediction-accent-rgb),.07); }
.community-prediction-verdict-icon { display:grid; place-items:center; flex:none; width:34px; height:34px; border:1px solid rgba(var(--prediction-accent-rgb),.3); border-radius:50%; background:rgba(var(--prediction-accent-rgb),.09); color:var(--prediction-accent); }
.community-prediction-verdict-icon svg { display:block; width:20px; height:20px; }
.community-prediction-verdict>div { min-width:0; }
.community-prediction-verdict strong { display:block; color:var(--prediction-accent); font-size:18px; font-weight:650; line-height:1.25; letter-spacing:-.025em; }
.community-prediction-verdict>div>span { display:block; margin-top:4px; color:var(--vault-muted); font-size:11px; line-height:1.45; }
.community-prediction-option { display:flex; align-items:center; gap:11px; width:100%; min-width:0; min-height:72px; margin-top:6px; padding:10px 11px; border:1px solid transparent; border-radius:10px; background:rgba(255,255,255,.025); color:var(--vault-text); font:inherit; text-align:left; cursor:pointer; transition:background-color .22s ease,border-color .22s ease; }
.community-prediction-option[aria-pressed="true"] { border-color:var(--vault-gold); background:rgba(220,190,100,.08); }
.community-prediction-option:not(:disabled):hover { background:rgba(220,190,100,.1); }
.community-prediction-option img,.community-prediction-placeholder { flex:none; width:40px; height:40px; border-radius:8px; object-fit:cover; }
.community-prediction-placeholder { display:grid; place-items:center; background:var(--vault-bg); color:var(--vault-muted); }
.community-prediction-option>span:not(.community-prediction-placeholder) { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:13px; line-height:1.4; }
.community-prediction-song-copy { display:flex; flex-direction:column; gap:5px; }
.community-prediction-song-name { display:block; font-size:14px; font-weight:500; line-height:1.35; overflow-wrap:anywhere; }
.community-prediction-song-tags { display:flex; align-items:center; flex-wrap:wrap; gap:4px; min-height:16px; }
.community-prediction-song-tag { display:inline-flex; align-items:center; gap:4px; min-width:0; max-width:100%; padding:2px 5px; border:1px solid rgba(226,203,129,.18); border-radius:4px; background:rgba(226,203,129,.07); color:var(--vault-gold); font-size:9px; font-weight:500; line-height:1.2; }
.community-prediction-song-tag>span { min-width:0; overflow-wrap:anywhere; }
.community-prediction-song-tag svg { flex:none; width:11px; height:11px; }
.community-prediction-option-hint { color:var(--vault-muted); font-size:10px; line-height:1.4; }
.community-prediction-option i { display:grid; place-items:center; flex:none; width:20px; height:20px; border:1px solid var(--vault-line-strong); border-radius:50%; color:var(--vault-gold); font-size:11px; font-style:normal; }
.community-prediction-option i svg { display:block; width:14px; height:14px; }
.community-prediction-option:disabled { cursor:default; }
.community-prediction-option:disabled[aria-pressed="false"] { opacity:.6; }
.community-prediction-option[aria-busy="true"]:disabled { opacity:1; }
.community-prediction-option:focus-visible { outline:2px solid var(--vault-gold); outline-offset:2px; }
.community-prediction-pair.is-correct,.community-match-prediction.is-correct { --prediction-accent:#a1d6b1; --prediction-accent-rgb:134,196,153; border-color:rgba(134,196,153,.4); background:linear-gradient(135deg,rgba(134,196,153,.065),transparent 65%),var(--vault-panel); }
.community-prediction-pair.is-wrong,.community-match-prediction.is-wrong { --prediction-accent:#e3aa9e; --prediction-accent-rgb:220,150,136; border-color:rgba(220,150,136,.4); background:linear-gradient(135deg,rgba(220,150,136,.055),transparent 65%),var(--vault-panel); }
.community-prediction-pair.is-awaiting,.community-prediction-pair.is-locked,.community-match-prediction.is-awaiting,.community-match-prediction.is-locked { --prediction-accent:#afc8e3; --prediction-accent-rgb:153,184,215; }
.community-prediction-pair.is-open .community-prediction-verdict { border-color:var(--vault-line-strong); background:rgba(255,255,255,.018); }
.community-prediction-pair.is-open .community-prediction-verdict strong { font-size:17px; font-weight:550; }
.community-prediction-pair.is-saved { border-color:rgba(226,203,129,.35); }
.community-prediction-option.is-winner { border-color:rgba(134,196,153,.58); background:rgba(134,196,153,.085); }
.community-prediction-option.is-winner:disabled { opacity:1; }
.community-prediction-option.is-winner i { border-color:rgba(134,196,153,.45); color:#a1d6b1; background:rgba(134,196,153,.1); }
.community-prediction-song-tag.is-winner { border-color:rgba(134,196,153,.25); background:rgba(134,196,153,.09); color:#a1d6b1; }
.community-prediction-option.is-prediction-miss { border-color:rgba(220,150,136,.6); background:rgba(220,150,136,.075); }
.community-prediction-option.is-prediction-miss:disabled { opacity:1; }
.community-prediction-option.is-prediction-miss i { border-color:rgba(220,150,136,.45); color:#e3aa9e; background:rgba(220,150,136,.08); }
.community-prediction-option.is-prediction-miss .community-prediction-song-tag { border-color:rgba(220,150,136,.25); background:rgba(220,150,136,.08); color:#e3aa9e; }
.community-prediction-option.is-out:disabled { opacity:.5; }
.community-prediction-score-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; margin:2px 1px 9px; color:var(--vault-muted); font-size:10px; line-height:1.4; }
.community-prediction-score-heading>span:last-child { white-space:nowrap; font-variant-numeric:tabular-nums; }
.community-prediction-score-heading .is-live { display:flex; align-items:center; gap:5px; color:#afc8e3; }
.community-prediction-score-heading .is-live::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }
.community-prediction-option.has-score { position:relative; overflow:hidden; padding-bottom:16px; }
.community-prediction-option.has-score:disabled { opacity:1; }
.community-prediction-option.has-score.is-out .community-prediction-song-name { color:var(--vault-muted); }
.community-prediction-option>span.community-prediction-share { flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:3px; margin-left:auto; overflow:visible; white-space:nowrap; line-height:1.2; }
.community-prediction-share strong { color:var(--vault-text); font-size:18px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.035em; }
.community-prediction-share small { color:var(--vault-muted); font-size:9px; font-variant-numeric:tabular-nums; }
.community-prediction-option.is-winner .community-prediction-share strong { color:#a1d6b1; }
.community-prediction-option.is-leading .community-prediction-share strong { color:#afc8e3; }
.community-prediction-song-tag.is-leading { color:#afc8e3; border-color:rgba(153,184,215,.25); background:rgba(153,184,215,.08); }
.community-prediction-option>span.community-prediction-score-track { position:absolute; left:11px; right:11px; bottom:6px; display:block; height:3px; border-radius:3px; background:rgba(255,255,255,.05); overflow:hidden; }
.community-prediction-score-track>span { display:block; height:100%; border-radius:inherit; background:rgba(255,255,255,.25); transition:width .4s ease; }
.community-prediction-option.is-predicted .community-prediction-score-track>span { background:var(--vault-gold); }
.community-prediction-option.is-winner .community-prediction-score-track>span { background:#86c499; }
.community-prediction-option.is-prediction-miss .community-prediction-score-track>span { background:#dc9688; }
.community-prediction-option.is-leading .community-prediction-score-track>span { background:#99b8d7; }
.community-prediction-score-note { display:flex; align-items:flex-start; gap:5px; margin:16px 1px 0; color:var(--vault-muted); font-size:10px; line-height:1.5; }
.community-prediction-score-note svg { flex:none; width:13px; height:13px; margin-top:1px; }
.community-prediction-footer { flex:none; padding:16px 28px 22px; border-top:1px solid var(--vault-line); }
.community-prediction-footer p { margin:0 0 12px; min-height:18px; color:var(--vault-muted); font-size:12px; line-height:1.5; }
.community-prediction-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:9px; }
.community-prediction-match-time { margin:0 2px 11px; color:var(--vault-muted); font-size:11px; }
.community-prediction-card-footer { display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin:10px 2px 0; color:var(--vault-muted); font-size:11px; line-height:1.5; }
.community-prediction-card-footer.is-quiet-footer { margin:0; }
.community-prediction-feedback.is-quiet { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.community-prediction-feedback.is-error { color:#e3aa9e; }
.community-prediction-outcome strong { color:var(--vault-text); font-weight:500; }
.community-prediction-clear { padding:1px 0; border:0; background:transparent; color:var(--vault-gold); font:inherit; font-size:11px; cursor:pointer; }
.community-prediction-clear:hover { text-decoration:underline; }
.community-prediction-clear:focus-visible { outline:2px solid var(--vault-gold); outline-offset:3px; }
.community-prediction-pagination { display:flex; justify-content:center; align-items:center; gap:14px; color:var(--vault-muted); font-size:12px; }
.community-prediction-empty { padding:35px 20px; color:var(--vault-muted); text-align:center; }
.community-prediction-empty strong { color:var(--vault-text); font-size:15px; font-weight:500; }
.community-prediction-empty p { max-width:410px; margin:12px auto; font-size:13px; line-height:1.6; }
.community-match-prediction { margin:20px 0 16px; padding:0; border:1px solid var(--vault-line-strong); border-radius:13px; background:rgba(220,190,100,.035); }
.community-prediction-toggle { display:flex; align-items:center; gap:9px; width:100%; min-width:0; min-height:48px; padding:11px 13px; border:0; border-bottom:1px solid transparent; border-radius:12px; background:transparent; color:var(--vault-text); font:inherit; text-align:left; cursor:pointer; }
.community-prediction-toggle:hover { background:rgba(255,255,255,.025); }
.community-prediction-toggle:focus-visible { outline:2px solid var(--vault-gold); outline-offset:-3px; }
.community-prediction-toggle>svg:first-child { flex:none; width:18px; height:18px; color:var(--prediction-accent); }
.community-prediction-toggle-label { flex:1; min-width:0; font-size:13px; font-weight:500; line-height:1.4; }
.community-prediction-toggle>small { flex:none; color:var(--vault-muted); font-size:10px; }
.community-prediction-toggle-chevron { flex:none; width:16px; height:16px; color:var(--vault-muted); transition:transform .3s cubic-bezier(.22,1,.36,1); }
.community-prediction-reveal { display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s cubic-bezier(.22,1,.36,1); }
.community-prediction-reveal-clip { min-height:0; overflow:hidden; }
.community-match-prediction-body { padding:14px; opacity:0; transform:translateY(-7px); transition:opacity .22s ease,transform .3s cubic-bezier(.22,1,.36,1); }
.community-match-prediction.is-expanded>.community-prediction-toggle { border-bottom-color:var(--vault-line); border-radius:12px 12px 0 0; }
.community-match-prediction.is-expanded .community-prediction-toggle-chevron { transform:rotate(180deg); }
.community-match-prediction.is-expanded>.community-prediction-reveal { grid-template-rows:1fr; }
.community-match-prediction.is-expanded .community-match-prediction-body { opacity:1; transform:translateY(0); }
.community-match-prediction .community-prediction-pair-head { margin-bottom:8px; }
.community-match-prediction .community-prediction-pair-head strong { color:var(--vault-gold); font-size:12px; font-weight:500; }
.community-match-prediction-body>p { margin:0 0 12px; color:var(--vault-muted); font-size:11px; line-height:1.6; }
.community-match-prediction-body>.community-prediction-score-note { margin:16px 1px 0; }
.community-match-prediction .community-prediction-option { padding:8px; gap:8px; }
.community-match-prediction .community-prediction-option>span { font-size:12px; }
.community-match-prediction .community-prediction-verdict { padding:9px; gap:9px; }
.community-match-prediction .community-prediction-verdict strong { font-size:15px; }
.community-match-prediction .community-prediction-verdict-icon { width:28px; height:28px; }
.community-match-prediction .community-prediction-song-name { font-size:12px; }
.community-prediction-saved-name { color:var(--vault-text); font-size:13px; font-weight:500; }
@container prediction-card (max-width:340px) {
  .community-prediction-option.has-score { display:grid; grid-template-columns:40px minmax(0,1fr) 20px; grid-template-areas:"cover copy mark" "cover score mark"; column-gap:9px; row-gap:7px; padding-bottom:16px; }
  .community-prediction-option.has-score>img { grid-area:cover; align-self:start; }
  .community-prediction-option.has-score>.community-prediction-song-copy { grid-area:copy; }
  .community-prediction-option.has-score>.community-prediction-share { grid-area:score; flex-direction:row; align-items:baseline; justify-self:start; gap:7px; margin-left:0; }
  .community-prediction-option.has-score>i { grid-area:mark; }
}
@media(prefers-reduced-motion:reduce) { .community-prediction-option,.community-prediction-score-track>span,.community-prediction-reveal,.community-match-prediction-body,.community-prediction-toggle-chevron { transition:none; } }
@media(max-width:900px) {
  .community-personal-tools { align-items:stretch; flex-direction:column; gap:15px; }
}
@media(max-width:760px) {
  .community-personal-tools.has-open-matches .community-participation { padding-bottom:34px; }
  .community-participation output { top:auto; bottom:0; transform:translateX(-50%); }
  .community-match-navigation { order:2; flex:1 0 100%; }
  .community-match-navigation>[data-active-navigation] { flex:1 0 100%; min-width:0; }
  .community-match-navigation .community-active-nav { display:flex; width:100%; }
  .community-match-navigation>.community-next-unvoted { width:100%; }
}
@media(max-width:600px) {
  .community-personal-tools { padding:15px; border-radius:13px; }
  .community-personal-actions { display:grid; grid-template-columns:1fr; }
  .community-personal-actions .community-button { justify-content:center; }
  .community-prediction-dialog { --prediction-height:calc(100dvh - 24px); width:calc(100vw - 16px); border-radius:17px; }
  .community-prediction-head { padding:20px 68px 15px 16px; }
  .community-prediction-dialog .community-prediction-close { top:12px; right:12px; }
  .community-prediction-head h2 { font-size:23px; }
  .community-prediction-summary { margin:0 16px 14px; padding:13px; }
  .community-prediction-champion { margin:0 16px 14px; }
  .community-prediction-rounds { padding:0 16px 14px; }
  .community-prediction-statuses { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:0 16px 16px; }
  .community-prediction-statuses .community-button { min-height:40px; }
  .community-prediction-body { padding:2px 16px 18px; }
  .community-prediction-grid { grid-template-columns:minmax(0,1fr); gap:10px; }
  .community-prediction-footer { padding:13px 16px 16px; }
  .community-prediction-actions .community-button { flex:1; justify-content:center; }
}
