/* Player stats modal (js/stats-modal.js). Self-contained colors so it looks the same on every page. */
.ss-overlay {
  --ss-bg: #0f2430; --ss-line: #1f3b49; --ss-text: #eaf1f4; --ss-muted: #8aa3b0;
  --ss-coral: #ff5e5b; --ss-sea: #39d6b0; --ss-sand: #f0c27b;
  position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 1rem;
  background: rgba(3, 10, 16, .66); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .2s ease;
}
.ss-overlay.on { opacity: 1; }
body.ss-lock { overflow: hidden; }
.ss-modal {
  width: 560px; max-width: 100%; max-height: min(86vh, 860px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--ss-bg); color: var(--ss-text); border: 1px solid var(--ss-line); border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55); outline: none;
  transform: translateY(14px) scale(.98); transition: transform .25s cubic-bezier(.2, .8, .2, 1);
  font-size: 15px; line-height: 1.45;
}
.ss-overlay.on .ss-modal { transform: none; }
.ss-loading { display: flex; gap: 6px; justify-content: center; padding: 4rem 0; }
.ss-loading span { width: 8px; height: 8px; border-radius: 50%; background: var(--ss-muted); animation: ssDot 1s infinite ease-in-out; }
.ss-loading span:nth-child(2) { animation-delay: .15s; } .ss-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes ssDot { 50% { opacity: .25; transform: translateY(-4px); } }

.ss-head { display: flex; align-items: center; gap: .9rem; padding: 1.3rem 1.3rem 1rem; position: sticky; top: 0; background: var(--ss-bg); z-index: 1; border-bottom: 1px solid transparent; }
.ss-avatar { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 800; color: #fff; overflow: hidden; }
.ss-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ss-who { flex: 1; min-width: 0; }
.ss-who h2 { margin: 0; font-family: var(--font-display, inherit); font-size: 1.45rem; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-who p { margin: .25rem 0 0; display: flex; gap: .5rem; align-items: center; color: var(--ss-muted); font-size: .85rem; flex-wrap: wrap; }
.ss-kind { font-weight: 700; font-size: .78rem; padding: .1rem .55rem; border-radius: 99px; }
.ss-kind.agent { background: rgba(57, 214, 176, .14); color: var(--ss-sea); }
.ss-kind.human { background: rgba(255, 94, 91, .14); color: var(--ss-coral); }
.ss-x { width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .06); color: var(--ss-muted); font-size: 1rem; cursor: pointer; flex-shrink: 0; }
.ss-x:hover, .ss-x:focus-visible { background: rgba(255, 255, 255, .12); color: var(--ss-text); }

.ss-overall { display: flex; align-items: center; gap: 1.2rem; margin: 0 1.3rem; padding: 1rem 1.1rem; border-radius: 16px; background: rgba(255, 255, 255, .035); border: 1px solid var(--ss-line); }
.ss-wr { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.ss-wr b { display: block; font-size: 1.35rem; line-height: 1; }
.ss-wr small { color: var(--ss-muted); font-size: .75rem; }
.ss-ring { width: 56px; height: 56px; transform: rotate(-90deg); }
.ss-ring-bg { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 7; }
.ss-ring-fg { fill: none; stroke: var(--ss-sea); stroke-width: 7; stroke-linecap: round; }
.ss-overall dl { flex: 1; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: 0; }
.ss-overall dl div { min-width: 56px; }
.ss-overall dt { color: var(--ss-muted); font-size: .75rem; }
.ss-overall dd { margin: 0; font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.ss-sec { padding: 1.1rem 1.3rem 0; }
.ss-sec h3 { margin: 0 0 .55rem; font-size: .95rem; font-weight: 700; display: flex; align-items: baseline; gap: .4rem; }
.ss-sec h3 small { color: var(--ss-muted); font-weight: 500; font-size: .8rem; }
.ss-empty { color: var(--ss-muted); font-size: .88rem; margin: 0; }

.ss-games { display: flex; flex-direction: column; }
.ss-game { display: grid; grid-template-columns: 32px 1fr auto auto; gap: .7rem; align-items: center; padding: .55rem 0; border-top: 1px solid var(--ss-line); }
.ss-game:first-child { border-top: 0; }
.ss-game-icon { font-size: 1.25rem; text-align: center; }
.ss-game-name { font-weight: 650; display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.ss-game-name small { color: var(--ss-muted); font-weight: 400; font-size: .75rem; }
.ss-game-wl { font-variant-numeric: tabular-nums; font-size: .88rem; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ss-bar { width: 72px; height: 4px; border-radius: 99px; background: rgba(255, 94, 91, .35); overflow: hidden; }
.ss-bar i { display: block; height: 100%; background: var(--ss-sea); }
.ss-game-elo { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 64px; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ss-streak { font-size: .68rem; font-weight: 700; padding: 0 .35rem; border-radius: 99px; }
.ss-streak.up { background: rgba(57, 214, 176, .14); color: var(--ss-sea); }
.ss-streak.down { background: rgba(255, 94, 91, .14); color: var(--ss-coral); }

.ss-hist { list-style: none; margin: 0; padding: 0; }
.ss-hist li { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-top: 1px solid var(--ss-line); font-size: .88rem; }
.ss-hist li:first-child { border-top: 0; }
.ss-res { width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .75rem; }
.ss-res.W { background: rgba(57, 214, 176, .16); color: var(--ss-sea); }
.ss-res.L { background: rgba(255, 94, 91, .16); color: var(--ss-coral); }
.ss-res.D { background: rgba(240, 194, 123, .16); color: var(--ss-sand); }
.ss-h-main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-elo-d { font-weight: 700; font-variant-numeric: tabular-nums; font-size: .8rem; }
.ss-elo-d.up { color: var(--ss-sea); } .ss-elo-d.down { color: var(--ss-coral); }
.ss-h-when { color: var(--ss-muted); font-size: .75rem; white-space: nowrap; }

.ss-badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.ss-badge { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1.5px var(--tier); cursor: default; }

.ss-foot { display: flex; gap: .6rem; padding: 1.2rem 1.3rem 1.3rem; flex-wrap: wrap; }
.ss-btn { flex: 1; min-width: 140px; text-align: center; padding: .7rem 1rem; border-radius: 12px; font-weight: 700; text-decoration: none !important; color: var(--ss-text) !important; background: rgba(255, 255, 255, .07); border: 1px solid var(--ss-line); }
.ss-btn.primary { background: var(--ss-coral); border-color: var(--ss-coral); color: #fff !important; }
.ss-btn:hover { filter: brightness(1.1); }
.ss-btn:focus-visible, .ss-x:focus-visible { outline: 2px solid var(--ss-sea); outline-offset: 2px; }

@media (max-width: 600px) {
  .ss-overlay { align-items: flex-end; padding: 0; }
  .ss-modal { width: 100%; max-height: 90vh; border-radius: 22px 22px 0 0; transform: translateY(40px); padding-bottom: env(safe-area-inset-bottom, 0); }
  .ss-overall { flex-direction: column; align-items: flex-start; }
  .ss-game { grid-template-columns: 28px 1fr auto; }
  .ss-game-wl { display: none; }
  .ss-h-when { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ss-overlay, .ss-modal { transition: none; }
  .ss-loading span { animation: none; }
}