/* Noirplay 7.2 · wykresy wyników i statusy graczy */

/* ── Status uczestnika w rundzie ── */
.player.st-done{border-color:rgba(162,208,193,.45);background:linear-gradient(135deg,rgba(162,208,193,.10),rgba(246,245,245,.03))}
.player.st-turn{border-color:rgba(246,201,139,.6);background:linear-gradient(135deg,rgba(246,201,139,.16),rgba(246,245,245,.03));box-shadow:0 0 0 1px rgba(246,201,139,.25),0 10px 30px -18px rgba(246,201,139,.9)}
.player-info small.st-pill,.st-pill{display:inline-flex;width:auto;align-items:center;gap:6px;margin-top:3px;padding:2px 9px 2px 7px;border-radius:999px;font-size:11.5px!important;font-weight:750;letter-spacing:.2px;line-height:1.5;border:1px solid var(--line-2);color:var(--soft)!important;background:rgba(255,255,255,.03)}
.st-pill i{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.st-done .st-pill{color:#cbe7dc!important;border-color:rgba(162,208,193,.5);background:rgba(162,208,193,.10)}
.st-turn .st-pill{color:#ffe1b6!important;border-color:rgba(246,201,139,.6);background:rgba(246,201,139,.12)}
.st-waiting .st-pill i{animation:sg-think 1.4s ease-in-out infinite}
@keyframes sg-think{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}
.roster-summary{display:flex;align-items:center;gap:12px;margin:-6px 0 16px;color:var(--muted);font-size:14px}
.roster-summary .rs-bar{flex:1;max-width:260px;height:6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.roster-summary .rs-bar span{display:block;height:100%;background:linear-gradient(90deg,#a2d0c1,#f6c98b);border-radius:inherit;transition:width .5s}

/* ── Wykres kolumnowy ── */
.sgs{overflow:hidden;margin:26px 0 30px;padding:22px 22px 18px;border-radius:24px;border:1px solid var(--line-2);
 background:radial-gradient(120% 90% at 50% 0%,rgba(246,201,139,.10),transparent 55%),linear-gradient(180deg,rgba(26,26,32,.9),rgba(15,15,18,.9));box-shadow:var(--shadow)}
.sgs-head{display:grid;gap:6px;margin-bottom:18px}
.sgs-title{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.6vw,30px)}
.sgs-caption{margin:0;color:var(--muted);font-size:14px}
.sgs-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--muted)}
.sgs-key{display:inline-flex;align-items:center;gap:7px}
.sgs-key i{width:12px;height:12px;border-radius:4px}
.tone-rose{background:linear-gradient(180deg,#ef9da8,#e25063)}
.tone-gold{background:linear-gradient(180deg,#ffdca8,#e9a85a)}
.tone-violet{background:linear-gradient(180deg,#d3dae7,#9baac7)}
.tone-mint{background:linear-gradient(180deg,#c3e4d8,#6fab96)}
.tone-ghost{background:repeating-linear-gradient(135deg,rgba(255,255,255,.18) 0 4px,rgba(255,255,255,.06) 4px 8px)}
.sgs-chart{position:relative;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:clamp(8px,2vw,22px);align-items:end;
 height:300px;padding:54px 6px 0;border-bottom:1px solid var(--line-2);
 background:repeating-linear-gradient(0deg,transparent 0 59px,rgba(237,232,232,.06) 59px 60px)}
.sgs-col{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.sgs-bars{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:center;gap:5px;width:100%;height:calc(100% - 54px)}
.sgs-stack{display:flex;flex-direction:column-reverse;width:min(64px,80%);height:100%;justify-content:flex-start}
.sgs-seg{display:grid;place-items:center;width:100%;min-height:0;overflow:hidden;font-size:12px;font-weight:850;color:#18181e;
 transition:height .9s cubic-bezier(.2,.8,.2,1);border-top:1px solid rgba(255,255,255,.35)}
.sgs-stack .sgs-seg:first-child{border-radius:0 0 4px 4px}
.sgs-stack .sgs-seg:last-child{border-radius:10px 10px 0 0}
.sgs-mode-group .sgs-bar{position:relative;flex:1;max-width:30px;border-radius:9px 9px 3px 3px;transition:height .9s cubic-bezier(.2,.8,.2,1)}
.sgs-bar small{position:absolute;left:50%;top:-20px;transform:translateX(-50%);font-size:12px;font-weight:800;color:var(--muted)}
.sgs-total{position:relative;z-index:2;margin-bottom:6px;font-size:clamp(16px,2vw,21px);font-weight:900;font-variant-numeric:tabular-nums}
.sgs-name{position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);max-width:100%;font-size:13px;font-weight:700;color:var(--muted);
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sgs-chart{margin-bottom:38px}
.sgs-col.is-me .sgs-name{color:var(--rose-2)}
/* Światło reflektora nad zwycięzcą */
.sgs-beam{position:absolute;z-index:1;left:-35%;right:-35%;top:-54px;bottom:0;pointer-events:none;
 background:linear-gradient(180deg,rgba(255,232,190,.55),rgba(246,201,139,.18) 55%,rgba(246,201,139,0));
 clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);filter:blur(1px);animation:sgs-beam 3.6s ease-in-out infinite}
.sgs-col.is-top::after{content:"";position:absolute;z-index:1;bottom:-6px;left:-20%;right:-20%;height:18px;border-radius:50%;
 background:radial-gradient(closest-side,rgba(255,224,170,.65),transparent)}
.sgs-spot{position:absolute;z-index:3;top:-48px;left:50%;transform:translateX(-50%);white-space:nowrap;
 padding:3px 10px;border-radius:999px;font-size:11px;font-weight:850;letter-spacing:.4px;color:#2a1608;
 background:linear-gradient(120deg,#ffe7bf,#f6c98b);box-shadow:0 6px 22px -6px rgba(246,201,139,.9)}
.sgs-col.is-top .sgs-total{color:#ffe1b6;text-shadow:0 0 18px rgba(246,201,139,.7)}
@keyframes sgs-beam{0%,100%{opacity:.85}50%{opacity:1}}
.sgs-verdict{margin:6px 0 0;font-size:14px;color:#ffe1b6;text-align:center}
@media(max-width:560px){
 .sgs{padding:18px 12px 14px}
 .sgs-chart{height:250px;gap:6px}
 .sgs-name{font-size:11px}
 .sgs-spot{font-size:10px;padding:2px 7px}
}

/* ── Podział na dwie opcje ── */
.sgs-split{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}
.sgs-side{position:relative;display:grid;gap:6px;align-content:start;padding:18px 16px 16px;border-radius:20px;border:1px solid var(--line-2);background:var(--surface);overflow:hidden;min-width:0}
.sgs-side.is-lead{border-color:rgba(246,201,139,.6);background:linear-gradient(160deg,rgba(246,201,139,.14),rgba(246,245,245,.03))}
.sgs-side-meter{height:10px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.sgs-side-meter span{display:block;height:100%;border-radius:inherit;transition:width 1s cubic-bezier(.2,.8,.2,1)}
.side-0 .sgs-side-meter span{background:linear-gradient(90deg,#ef9da8,#ddd5d5)}
.side-1 .sgs-side-meter span{background:linear-gradient(90deg,#c0c9db,#a2d0c1)}
.sgs-pct{font-size:clamp(30px,5vw,46px);font-weight:900;line-height:1.05;font-variant-numeric:tabular-nums}
.sgs-opt{font-weight:750;overflow-wrap:break-word}
.sgs-count{color:var(--soft)}
.sgs-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.sgs-chip{padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:700;background:rgba(255,255,255,.07);border:1px solid var(--line)}
.sgs-mine{position:absolute;top:10px;right:10px;font-size:11px;font-weight:850;padding:2px 8px;border-radius:999px;background:var(--grad);color:#19191f}
@media(max-width:420px){.sgs-split{grid-template-columns:1fr}}

/* ── Pierścień, licznik, wyróżnienia ── */
.sgs-ring-box{display:flex;align-items:center;gap:18px;margin:18px 0;padding:16px 18px;border-radius:20px;border:1px solid var(--line-2);background:var(--surface)}
.sgs-ring{--p:0;flex:none;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;
 background:radial-gradient(closest-side,#17171d 72%,transparent 73% 100%),conic-gradient(#ef9da8 calc(var(--p)*1%),rgba(255,255,255,.08) 0)}
.sgs-ring b{font-size:22px;font-weight:900}
.sgs-ring-box p{margin:4px 0 0}
.sgs-meter{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:10px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(0,0,0,.18)}
.sgs-meter-label{font-size:12px;font-weight:850;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold)}
.sgs-dots{display:flex;gap:6px}
.sgs-dots i{width:14px;height:14px;border-radius:50%;border:1px solid rgba(246,201,139,.55)}
.sgs-dots i.on{background:radial-gradient(circle at 35% 35%,#fff1d6,#f6c98b 55%,#b97a2f);box-shadow:0 0 10px rgba(246,201,139,.7)}
.sgs-badges{list-style:none;padding:0;margin:18px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.sgs-badges li{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:18px;border:1px solid var(--line-2);background:var(--grad-soft)}
.sgs-badge-ico{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:18px;background:rgba(0,0,0,.25);border:1px solid var(--line-2)}
.sgs-badges strong,.sgs-badges span{display:block}
.sgs-badges span{color:var(--muted);font-size:14px}

@media(forced-colors:active){
 .sgs-seg,.sgs-bar,.sgs-side-meter span,.sgs-dots i.on{background:Highlight;forced-color-adjust:none}
 .sgs-beam,.sgs-col.is-top::after{display:none}
 .sgs-spot{border:2px solid CanvasText}
 .player.st-turn,.player.st-done{border:2px solid Highlight}
}
@media(prefers-reduced-motion:reduce){.sgs-beam,.st-waiting .st-pill i{animation:none}.sgs-seg,.sgs-bar,.sgs-side-meter span{transition:none}}
.sgs-side.is-mine{padding-top:40px}
.kink-safety{margin:0 0 14px;border:1px solid rgba(235,131,145,.45);border-radius:14px;background:rgba(99,41,50,.22)}
.kink-safety summary{cursor:pointer;padding:10px 14px;font-weight:800;color:#e4dddd}
.kink-safety p{margin:0;padding:0 14px 12px;color:var(--muted);font-size:14.5px}
#kinkField .check{border:1px solid rgba(235,131,145,.45);border-radius:14px;padding:12px;background:rgba(99,41,50,.18)}