/* static/css/competitive_ui.css */
:root {
  --bg: #07131c;
  --panel: #0b2230;
  --line: #1f4658;
  --teal: #00d1b2;
  --text: #e7fbf8;
  --muted: #92c9c2;
  --danger: #ff7b7b;
}

* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at top, #0e2634 0%, var(--bg) 60%); color: var(--text); font-family: Inter, system-ui, sans-serif; }

.competitive-shell { max-width: 1200px; margin: 0 auto; padding: 16px; display: grid; grid-template-columns: 1fr 320px; gap: 16px; }
.main-column { min-width: 0; }

.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.topbar-controls { display: flex; gap: 10px; align-items: center; }

.panel { border: 1px solid var(--line); border-top: 2px solid color-mix(in srgb, var(--match-accent, var(--line)) 55%, var(--line)); background: linear-gradient(180deg, #0c2532, #0a1d29); border-radius: 12px; padding: 14px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.panel h3 { margin: 0; }
.match-icon { display: inline-block; width: 1.25em; text-align: center; margin-right: 6px; filter: drop-shadow(0 0 6px rgba(255,255,255,0.15)); }

.pool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.pool-card { border: 1px solid var(--line); border-left: 4px solid var(--match-accent, var(--line)); border-radius: 10px; padding: 10px; background: rgba(0,0,0,.2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--match-accent, #2dd4bf) 20%, transparent); }
.pool-top { display: flex; justify-content: space-between; gap: 8px; }
.pool-top h4 { margin: 0 0 4px; }
.pool-top p { margin: 0; color: var(--muted); font-size: 13px; }
.pool-stats { margin-top: 10px; display: flex; justify-content: space-between; font-size: 13px; }
.pool-actions { display: flex; gap: 8px; margin-top: 12px; }

.btn { border: 1px solid var(--line); color: var(--text); background: #163849; border-radius: 8px; padding: 8px 12px; cursor: pointer; }
.btn:hover { filter: brightness(1.1); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--teal); color: #03231f; border-color: #17d9bc; font-weight: 700; }
.btn-secondary { background: #1a3648; }
.btn-success { background: #23a57f; color: #05261d; border-color: #2ec898; }
.btn-ghost { background: transparent; }

.pill { border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font-size: 12px; color: var(--muted); }
.muted { color: var(--muted); }
.error { color: var(--danger); }

.lobby-stats, .live-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px; }
.status-line { margin-top: 0; color: var(--muted); }
.player-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.player-list li { display: flex; justify-content: space-between; gap: 8px; }
.lobby-actions { margin-top: 12px; display: flex; gap: 10px; align-items: center; }
.lobby-actions .btn { min-width: 120px; }

.leaderboard { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.leader-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; padding: 9px 10px; border-bottom: 1px solid rgba(255,255,255,.06); transition: transform 220ms ease, background 220ms ease; }
.leader-row.rank-up { background: rgba(0, 209, 178, .16); transform: translateX(4px); }
.leader-row.rank-down { background: rgba(255, 122, 122, .14); transform: translateX(-4px); }
.live-actions { margin-top: 10px; display: flex; gap: 10px; align-items: center; }

.outcome { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 10px; position: relative; overflow: hidden; }
.outcome.win { border-color: #00d1b2; }
.outcome-actions { display: flex; gap: 8px; margin-top: 10px; }
#confetti-canvas { width: 100%; height: 140px; display: block; border-radius: 8px; border: 1px solid rgba(255,255,255,.1); }

.sidebar { position: sticky; top: 14px; }
.activity-list, .streak-list { display: grid; gap: 6px; margin-bottom: 12px; }
.activity-item, .streak-item { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.activity-link { text-decoration: none; color: inherit; }
.activity-link:hover { border-color: #2a667c; background: rgba(8, 29, 40, 0.7); }

#share-modal-root { position: fixed; inset: 0; display: none; z-index: 50; }
#share-modal-root.open { display: grid; place-items: center; }
.share-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.65); }
.share-modal-panel { position: relative; max-width: 860px; width: calc(100% - 24px); background: #0b2230; border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
#share-card-canvas { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; background: #09151f; }
.share-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

@media (max-width: 980px) {
  .competitive-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; }
}