/* Player insights overlay — shared by leaderboard.html and the match organiser's results screen
   (the organiser's build appends this file to psq-game.css). Needs --hot-pink and --pink-on-ink. */
.ins-backdrop{ position:fixed; inset:0; background:rgba(10,6,14,.72); z-index:200; display:flex; align-items:flex-end; justify-content:center; padding-top:max(12px, env(safe-area-inset-top)); }
/* The sheet is a column: the name + close button stay pinned at the top and only the content scrolls.
   max-height is a percentage of the fixed backdrop (the *visible* screen), not vh, so a phone's
   collapsing address bar can never push the top of the sheet off-screen. */
.ins-sheet{ width:100%; max-width:560px; max-height:100%; display:flex; flex-direction:column; overflow:hidden; background:#16111d; color:#fff; border-radius:22px 22px 0 0; box-shadow:0 -10px 40px rgba(0,0,0,.45); animation: ins-up .22s ease; }
.ins-head{ flex:0 0 auto; display:flex; align-items:center; gap:14px; padding:18px 18px 12px; border-bottom:1px solid rgba(255,255,255,.08); }
.ins-body{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:4px 18px max(28px, env(safe-area-inset-bottom)); }
@media (min-width:700px){ .ins-backdrop{ align-items:center; padding:20px; } .ins-sheet{ border-radius:22px; max-height:min(100%, 820px); } .ins-head{ padding:22px 24px 14px; } .ins-body{ padding:6px 24px 28px; } }
@keyframes ins-up{ from{ transform:translateY(24px); opacity:0; } to{ transform:none; opacity:1; } }
@media (prefers-reduced-motion:reduce){ .ins-sheet{ animation:none; } }
.ins-avatar{ width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; flex-shrink:0; color:#fff; }
.ins-name{ font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:24px; margin:0; line-height:1.1; overflow-wrap:anywhere; }
.ins-sub{ font-size:13px; opacity:.7; margin:3px 0 0; }
.ins-close{ margin-left:auto; width:40px; height:40px; border-radius:50%; border:none; background:rgba(255,255,255,.12); color:#fff; font-size:22px; line-height:1; cursor:pointer; flex-shrink:0; }
.ins-close:focus-visible{ outline:3px solid var(--hot-pink); }
.ins-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:16px 0; }
.ins-stat{ background:rgba(255,255,255,.07); border-radius:14px; padding:12px 6px; text-align:center; }
.ins-stat b{ display:block; font-family:'Bricolage Grotesque', sans-serif; font-size:22px; font-weight:800; }
.ins-stat span{ font-size:10.5px; opacity:.65; text-transform:uppercase; letter-spacing:.06em; }
.ins-h{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; opacity:.6; margin:18px 0 8px; }
.ins-bars{ display:flex; align-items:flex-end; gap:8px; height:96px; }
.ins-bar{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%; }
.ins-bar i{ display:block; width:100%; background:linear-gradient(180deg, var(--pink-on-ink), var(--hot-pink)); border-radius:6px 6px 2px 2px; min-height:4px; }
.ins-bar em{ font-style:normal; font-size:11px; font-weight:700; margin-bottom:3px; }
.ins-bar-labels{ display:flex; gap:8px; margin-top:4px; }
.ins-bar-labels span{ flex:1; min-width:0; font-size:10.5px; opacity:.6; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ins-card{ display:flex; gap:12px; background:rgba(255,255,255,.06); border-radius:14px; padding:12px 14px; margin-bottom:8px; }
.ins-card .ic{ font-size:22px; line-height:1.2; flex-shrink:0; }
.ins-card h4{ margin:0 0 2px; font-size:14.5px; }
.ins-card p{ margin:0; font-size:13.5px; opacity:.85; line-height:1.4; }
.ins-card[hidden]{ display:none; }
.ins-recent{ display:flex; gap:5px; flex-wrap:wrap; }
.ins-dot{ width:24px; height:24px; border-radius:50%; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; background:#555; }
.ins-dot.W{ background:#1f9d55; } .ins-dot.L{ background:#c0392b; } .ins-dot.D{ background:#777; }
.ins-nudge{ font-size:13px; opacity:.75; background:rgba(255,255,255,.05); border:1px dashed rgba(255,255,255,.2); border-radius:12px; padding:10px 12px; margin-top:6px; }
.ins-actions{ display:flex; gap:10px; margin-top:18px; align-items:center; }
.ins-share{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:10px; border:none; border-radius:999px; padding:14px 18px; font-weight:800; font-size:15px; color:#fff; cursor:pointer; font-family:'DM Sans',sans-serif; background:linear-gradient(135deg, var(--hot-pink), var(--deep-pink)); }
.ins-share svg{ width:20px; height:20px; }
.ins-fine{ font-size:12px; opacity:.55; margin:10px 0 0; text-align:center; }

.ins-more{ margin-top:2px; border:1.5px solid rgba(255,255,255,.3); background:transparent; color:#fff; border-radius:999px; padding:7px 14px; font-weight:700; font-size:13px; cursor:pointer; font-family:'DM Sans',sans-serif; }
.ins-more:hover{ background: rgba(255,255,255,.14); }

/* Progress charts (trend line + ranked bars) — used on the group page and the results screen. Colours inherit
   from the card they sit in, so they read on any of the dark panels. */
.pc{ margin:4px 0 0; }
.pc-title{ margin:0 0 4px; font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:18px; }
.pc-note{ margin:0 0 12px; font-size:13px; opacity:.7; line-height:1.45; }
.pc-tabs{ display:inline-flex; gap:2px; padding:3px; border-radius:999px; background:rgba(255,255,255,.1); margin-bottom:12px; }
.pc-tabs button{ border:none; background:transparent; color:inherit; font:inherit; font-size:13px; font-weight:700; padding:7px 16px; border-radius:999px; cursor:pointer; opacity:.75; }
.pc-tabs button.active{ background:#fff; color:#16111d; opacity:1; }
.pc-tabs button:focus-visible, .pc-chip:focus-visible, .pc-pick select:focus-visible{ outline:3px solid var(--hot-pink, #ff2e8a); outline-offset:2px; }
.pc-svg{ display:block; width:100%; height:auto; overflow:visible; }
.pc-legend{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.pc-chip{ display:inline-flex; align-items:center; gap:7px; border:1.5px solid rgba(255,255,255,.22); background:transparent; color:inherit; font:inherit; font-size:12.5px; font-weight:700; padding:5px 11px; border-radius:999px; cursor:pointer; opacity:.55; }
.pc-chip.on{ opacity:1; background:rgba(255,255,255,.1); }
.pc-chip i{ width:10px; height:10px; border-radius:50%; display:inline-block; flex-shrink:0; }
.pc-pick{ display:flex; align-items:center; gap:10px; margin-bottom:12px; font-size:13px; }
.pc-pick select{ flex:1; min-width:0; max-width:260px; padding:8px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.1); color:inherit; font:inherit; }
.pc-pick select option{ color:#16111d; }
.pc-bars{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.pc-bars li{ display:grid; grid-template-columns:20px minmax(54px, 30%) 1fr 48px; align-items:center; gap:8px; font-size:13.5px; }
.pc-bar-rank{ opacity:.55; font-weight:700; text-align:center; font-variant-numeric:tabular-nums; }
.pc-bar-name{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pc-bar-track{ display:block; height:12px; border-radius:6px; background:rgba(255,255,255,.1); overflow:hidden; }
.pc-bar-track i{ display:block; height:100%; border-radius:6px; }
.pc-bar-val{ text-align:right; font-weight:800; font-variant-numeric:tabular-nums; }
.pc-empty{ display:block !important; opacity:.7; }
@media (prefers-reduced-motion:no-preference){ .pc-bar-track i{ transition:width .25s ease; } }

/* Game history: one collapsible block per tournament, a row per match */
.ins-hist{ background:rgba(255,255,255,.06); border-radius:14px; margin-bottom:8px; overflow:hidden; }
.ins-hist summary{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; cursor:pointer; list-style:none; font-weight:700; font-size:14px; }
.ins-hist summary::-webkit-details-marker{ display:none; }
.ins-hist summary::after{ content:'\25BE'; opacity:.6; margin-left:2px; }
.ins-hist[open] summary::after{ content:'\25B4'; }
.ins-hist-title{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ins-hist-rec{ font-size:12px; opacity:.7; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ins-hist summary:focus-visible{ outline:3px solid var(--hot-pink, #ff2e8a); outline-offset:-3px; border-radius:14px; }
.ins-hist-list{ list-style:none; margin:0; padding:0 14px 8px; }
.ins-hist-list li{ display:grid; grid-template-columns:32px 1fr auto; align-items:center; gap:10px; padding:9px 0; border-top:1px solid rgba(255,255,255,.08); font-size:13.5px; }
.ins-hist-round{ font-size:11px; font-weight:800; opacity:.6; }
.ins-hist-who b{ display:block; overflow-wrap:anywhere; }
.ins-hist-who small{ display:block; opacity:.65; font-size:12px; overflow-wrap:anywhere; }
.ins-hist-score{ font-weight:800; font-variant-numeric:tabular-nums; padding:4px 10px; border-radius:999px; background:#555; white-space:nowrap; }
.ins-hist-score.W{ background:#1f9d55; } .ins-hist-score.L{ background:#c0392b; } .ins-hist-score.D{ background:#777; }

/* Luck of the draw: a verdict plus two split bars (good for you / level / against you) */
.ins-draw{ background:rgba(255,255,255,.06); border-radius:14px; padding:12px 14px 10px; margin-bottom:8px; }
.ins-draw-verdict{ display:flex; flex-direction:column; gap:3px; margin-bottom:10px; }
.ins-draw-verdict b{ font-size:15px; }
.ins-draw.kind .ins-draw-verdict b{ color:#6fdc9a; }
.ins-draw.tough .ins-draw-verdict b{ color:#ffb08a; }
.ins-draw-verdict span{ font-size:13.5px; opacity:.85; line-height:1.4; }
.ins-split{ display:grid; grid-template-columns:76px 1fr; gap:4px 10px; align-items:center; margin:8px 0; }
.ins-split-label{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; opacity:.7; }
.ins-split-bar{ display:flex; height:12px; border-radius:6px; overflow:hidden; background:rgba(255,255,255,.1); }
.ins-split-bar i{ display:block; min-width:6px; }
.ins-split-bar i.good{ background:#2faa63; }
.ins-split-bar i.mid{ background:#8a8498; }
.ins-split-bar i.bad{ background:#d2553f; }
.ins-split-text{ grid-column:2; font-size:12.5px; opacity:.8; font-variant-numeric:tabular-nums; }
.ins-draw .ins-fine{ margin:8px 0 0; font-size:12px; opacity:.6; }