/* tournament_view */ body.page-tournament-view * { box-sizing: border-box; margin: 0; padding: 0; } body.page-tournament-view { font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: #0a0a18 url('/static/bg.png') center top / cover no-repeat fixed; color: #e0e0e0; min-height: 100vh; } body.page-tournament-view .container { max-width: 1100px; margin: 0 auto; padding: 32px 16px; background: rgba(10,10,24,.85); min-height: 100vh; border-left: 1px solid rgba(255,255,255,.05); border-right: 1px solid rgba(255,255,255,.05); } body.page-tournament-view h1 { text-align: center; font-size: 1.6rem; margin-bottom: 6px; color: #fff; } body.page-tournament-view .subtitle { text-align: center; font-size: .9rem; color: #888; margin-bottom: 24px; } body.page-tournament-view .nav { text-align: center; margin-bottom: 24px; } body.page-tournament-view .nav a { color: #fff; opacity: .85; text-decoration: none; margin: 0 12px; font-size: .95rem; } body.page-tournament-view .nav a:hover { opacity: 1; text-decoration: underline; } body.page-tournament-view .tabs { display: flex; gap: 0; margin-bottom: 24px; border-bottom: 2px solid #333; } body.page-tournament-view .tab { padding: 10px 24px; cursor: pointer; color: #999; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: .2s; } body.page-tournament-view .tab:hover { color: #ccc; } body.page-tournament-view .tab.active { color: #6c8cff; border-bottom-color: #6c8cff; } body.page-tournament-view .panel { display: none; } body.page-tournament-view .panel.active { display: block; } body.page-tournament-view .approved-registration-toolbar, body.page-tournament-settings .registration-management-toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; color:#888; font-size:.84rem; } body.page-tournament-view .registration-toolbar-actions, body.page-tournament-settings .registration-toolbar-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } body.page-tournament-view .registration-intent-summary, body.page-tournament-settings .registration-intent-summary { display:flex; align-items:center; justify-content:flex-end; gap:6px 16px; flex-wrap:wrap; margin-left:auto; text-align:right; color:#8d96a8; } body.page-tournament-view .registration-intent-summary span, body.page-tournament-settings .registration-intent-summary span { white-space:nowrap; } body.page-tournament-view .registration-intent-summary strong, body.page-tournament-settings .registration-intent-summary strong { color:#e2e7f2; font-variant-numeric:tabular-nums; } body.page-tournament-view .approved-registration-toolbar select { min-width:120px; padding:7px 28px 7px 10px; color:#e0e0e0; background:#111827; border:1px solid rgba(255,255,255,.14); border-radius:6px; } body.page-tournament-view .approved-registration-toolbar strong { color:#d8dff0; } body.page-tournament-view .approved-registration-table { width:100%; min-width:880px; border-collapse:collapse; font-size:.88rem; } body.page-tournament-view .approved-registration-table th, body.page-tournament-view .approved-registration-table td { padding:10px 12px; text-align:left; vertical-align:middle; border-bottom:1px solid rgba(255,255,255,.07); } body.page-tournament-view .approved-registration-table th { color:#9aa6d6; font-weight:700; background:rgba(0,0,0,.18); } body.page-tournament-view .approved-registration-table th[onclick] { cursor:pointer; user-select:none; white-space:nowrap; } body.page-tournament-view .approved-registration-table tbody tr:last-child td { border-bottom:none; } body.page-tournament-view .registration-sort-arrow { margin-left:5px; color:#4c5368; font-size:.76rem; } body.page-tournament-view .registration-sort-arrow.active { color:#8ea2ff; } body.page-tournament-view .registration-player-link, body.page-tournament-settings .registration-player-link { appearance:none; padding:0; border:0; background:none; color:#8ea2ff; font:inherit; font-weight:700; cursor:pointer; text-align:left; } body.page-tournament-view .registration-player-link:hover, body.page-tournament-settings .registration-player-link:hover { color:#b4c2ff; text-decoration:underline; } body.page-tournament-view .registration-tag-list { display:flex; align-items:center; gap:5px; flex-wrap:wrap; } body.page-tournament-view .registration-position, body.page-tournament-view .registration-strength, body.page-tournament-view .registration-intent, body.page-tournament-view .registration-skill { display:inline-flex; align-items:center; min-height:24px; padding:2px 8px; border:1px solid; border-radius:6px; font-size:.76rem; font-weight:600; white-space:nowrap; } body.page-tournament-view .registration-position.position-1 { color:#f0b429; background:rgba(240,180,41,.12); border-color:rgba(240,180,41,.35); } body.page-tournament-view .registration-position.position-2 { color:#5b9cff; background:rgba(91,156,255,.12); border-color:rgba(91,156,255,.35); } body.page-tournament-view .registration-position.position-3 { color:#ef6a6a; background:rgba(239,106,106,.12); border-color:rgba(239,106,106,.35); } body.page-tournament-view .registration-position.position-4 { color:#5fd38d; background:rgba(95,211,141,.12); border-color:rgba(95,211,141,.35); } body.page-tournament-view .registration-position.position-5 { color:#c58cff; background:rgba(197,140,255,.12); border-color:rgba(197,140,255,.35); } body.page-tournament-view .registration-strength { color:#c9d2e5; background:rgba(201,210,229,.07); border-color:rgba(201,210,229,.18); } body.page-tournament-view .registration-intent.intent-main { color:#5fd38d; background:rgba(95,211,141,.11); border-color:rgba(95,211,141,.3); } body.page-tournament-view .registration-intent.intent-sub { color:#f0b429; background:rgba(240,180,41,.11); border-color:rgba(240,180,41,.3); } body.page-tournament-view .registration-intent.intent-spectator { color:#7da7ff; background:rgba(125,167,255,.11); border-color:rgba(125,167,255,.3); } body.page-tournament-view .registration-intent.intent-organizer { color:#c58cff; background:rgba(197,140,255,.11); border-color:rgba(197,140,255,.3); } body.page-tournament-view .registration-skill.skill-tyrannosaurus { color:#ef6a6a; background:rgba(239,106,106,.11); border-color:rgba(239,106,106,.3); } body.page-tournament-view .registration-skill.skill-siege_lion { color:#f0b429; background:rgba(240,180,41,.11); border-color:rgba(240,180,41,.3); } body.page-tournament-view .registration-skill.skill-swift_leopard { color:#c58cff; background:rgba(197,140,255,.11); border-color:rgba(197,140,255,.3); } body.page-tournament-view .registration-skill.skill-dire_hound { color:#7da7ff; background:rgba(125,167,255,.11); border-color:rgba(125,167,255,.3); } body.page-tournament-view .registration-skill.skill-white_rabbit, body.page-tournament-view .registration-skill.skill-unranked { color:#c9d2e5; background:rgba(201,210,229,.07); border-color:rgba(201,210,229,.18); } .rank-medal-icon { position:relative; display:inline-block; width:var(--rank-icon-size); height:var(--rank-icon-size); flex-shrink:0; vertical-align:middle; } .rank-medal-icon > img { display:block; width:100%; height:100%; object-fit:contain; } .rank-medal-icon .immortal-rank-number { position:absolute; left:10%; right:10%; bottom:9%; color:#fff6cf; font-size:calc(var(--rank-icon-size) * .22); font-weight:800; line-height:1; text-align:center; text-shadow:0 1px 2px #000, 0 0 2px #000; font-variant-numeric:tabular-nums; pointer-events:none; } /* Standings table - Liquipedia style */ body.page-tournament-view .group-container { display: flex; flex-direction: column; gap: 48px; margin-bottom: 32px; } body.page-tournament-view .group-section { display: flex; flex-direction: column; } body.page-tournament-view .group-box { background: #16213e; border-radius: 10px; overflow: hidden; border: 1px solid rgba(108,140,255,.18); box-shadow: 0 2px 16px rgba(0,0,0,.3); } body.page-tournament-view .group-header { background: linear-gradient(135deg, #1e3a5f, #16213e); padding: 14px 18px; font-weight: 700; font-size: 1.05rem; color: #fff; border-bottom: 2px solid rgba(108,140,255,.3); letter-spacing: .03em; } /* Combined standings + h2h layout */ body.page-tournament-view .group-content { overflow-x: auto; } body.page-tournament-view .standings-table { border-collapse: collapse; width: 100%; table-layout: fixed; } body.page-tournament-view .standings-table th { padding: 0 10px; text-align: left; font-size: .82rem; color: #888; text-transform: uppercase; border-bottom: 1px solid #2a2a4a; background: rgba(0,0,0,.2); white-space: nowrap; height: 38px; vertical-align: middle; } body.page-tournament-view .standings-table td { padding: 0 10px; border-bottom: 1px solid #2a2a4a; font-size: .95rem; height: 42px; vertical-align: middle; } body.page-tournament-view .standings-table tr:last-child td { border-bottom: none; } body.page-tournament-view .standings-table col.col-rank { width: 28px; } body.page-tournament-view .standings-table col.col-icon { width: 20px; } body.page-tournament-view .standings-table col.col-name { width: auto; } body.page-tournament-view .standings-table col.col-record { width: 64px; } body.page-tournament-view .standings-table .rank { text-align: center; font-weight: 700; color: #888; padding: 0 4px 0 8px; white-space: nowrap; } body.page-tournament-view .standings-table .team-name { font-weight: 600; word-break: break-word; white-space: normal; line-height: 1.3; } body.page-tournament-view .standings-table .team-name a { color: #e0e0e0; text-decoration: none; } body.page-tournament-view .standings-table .team-name a:hover { color: #6c8cff; text-decoration: underline; } body.page-tournament-view .standings-table .record { text-align: center; font-weight: 600; white-space: nowrap; } /* Row advancement colors */ body.page-tournament-view .row-upper td { background: rgba(95,221,95,.22); } body.page-tournament-view .row-upper:hover td { background: rgba(95,221,95,.32) !important; } body.page-tournament-view .row-upper td:first-child { box-shadow: inset 5px 0 0 #5fdd5f; } body.page-tournament-view .row-lower td { background: rgba(251,191,36,.20); } body.page-tournament-view .row-lower:hover td { background: rgba(251,191,36,.30) !important; } body.page-tournament-view .row-lower td:first-child { box-shadow: inset 5px 0 0 #fbbf24; } body.page-tournament-view .row-elim td { background: rgba(221,95,95,.18); } body.page-tournament-view .row-elim:hover td { background: rgba(221,95,95,.28) !important; } body.page-tournament-view .row-elim td:first-child { box-shadow: inset 5px 0 0 #dd5f5f; } /* H2H matrix */ body.page-tournament-view .h2h-table { border-collapse: collapse; width: 100%; } body.page-tournament-view .h2h-table th { padding: 0 4px; text-align: center; font-size: .75rem; color: #888; font-weight: 600; border-bottom: 1px solid #2a2a4a; background: rgba(0,0,0,.2); white-space: normal; word-break: break-all; vertical-align: middle; min-width: 58px; height: 38px; } body.page-tournament-view .h2h-table td { padding: 0; border-bottom: 1px solid #2a2a4a; text-align: center; vertical-align: middle; height: 42px; } body.page-tournament-view .h2h-table tr:last-child td { border-bottom: none; } body.page-tournament-view .h2h-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 4px 6px; font-size: .88rem; font-weight: 700; min-width: 58px; } body.page-tournament-view .h2h-date { font-size: .65rem; font-weight: 400; color: #888; margin-top: 1px; } body.page-tournament-view .h2h-cell.win { background: rgba(95,221,95,.12); color: var(--niuma-win); } body.page-tournament-view .h2h-cell.lose { background: rgba(221,95,95,.10); color: var(--niuma-loss); } body.page-tournament-view .h2h-cell.draw { background: rgba(251,191,36,.1); color: #fbbf24; } body.page-tournament-view .h2h-cell.self { background: rgba(40,40,60,.4); } body.page-tournament-view .h2h-cell.pending { color: #444; } /* Bottom row: team icons/names as column footer */ body.page-tournament-view .h2h-footer { display: flex; border-top: 1px solid #2a2a4a; } body.page-tournament-view .h2h-footer-cell { flex: 1; min-width: 58px; text-align: center; padding: 8px 4px; font-size: .75rem; color: #888; font-weight: 600; word-break: break-all; } /* H2H rows: no background, no left inset shadow */ body.page-tournament-view .h2h-table .row-upper td, body.page-tournament-view .h2h-table .row-lower td, body.page-tournament-view .h2h-table .row-elim td { background: none !important; } body.page-tournament-view .h2h-table .row-upper td:first-child, body.page-tournament-view .h2h-table .row-lower td:first-child, body.page-tournament-view .h2h-table .row-elim td:first-child { box-shadow: none; } /* Combined standings+h2h single table — guarantees row alignment */ body.page-tournament-view .combined-table { border-collapse: collapse; width: 100%; } body.page-tournament-view .combined-table th { padding: 0 8px; height: 38px; vertical-align: middle; font-size: .82rem; color: #888; text-transform: uppercase; border-bottom: 1px solid #2a2a4a; background: rgba(0,0,0,.2); white-space: nowrap; } body.page-tournament-view .combined-table th.h2h-col { text-align: center; font-size: .75rem; text-transform: none; white-space: normal; word-break: break-word; min-width: 62px; border-left: 1px solid #2a2a4a; font-weight: 600; } body.page-tournament-view .combined-table td { padding: 0 8px; height: 42px; vertical-align: middle; border-bottom: 1px solid #2a2a4a; font-size: .95rem; } body.page-tournament-view .combined-table tr:last-child td { border-bottom: none; } body.page-tournament-view .combined-table td.h2h-col { padding: 0; border-left: 1px solid #2a2a4a; background: transparent !important; } body.page-tournament-view .combined-table .rank { text-align: center; font-weight: 700; color: #888; } body.page-tournament-view .combined-table .team-name { font-weight: 600; } body.page-tournament-view .combined-table .team-name a { color: #e0e0e0; text-decoration: none; } body.page-tournament-view .combined-table .team-name a:hover { color: #6c8cff; text-decoration: underline; } body.page-tournament-view .combined-table .record { text-align: center; font-weight: 600; white-space: nowrap; } body.page-tournament-view .combined-table .h2h-footer-row td { height: 32px; font-size: .72rem; color: #888; text-align: center; background: rgba(0,0,0,.1) !important; border-top: 1px solid #2a2a4a; padding: 4px; word-break: break-word; } body.page-tournament-view .legend { display: flex; gap: 16px; margin-bottom: 16px; font-size: .85rem; flex-wrap: wrap; } body.page-tournament-view .legend-item { display: flex; align-items: center; gap: 6px; } body.page-tournament-view .legend-color { width: 14px; height: 14px; border-radius: 3px; } body.page-tournament-view .legend-color.upper { background: #5fdd5f; } body.page-tournament-view .legend-color.lower { background: #fbbf24; } body.page-tournament-view .legend-color.elim { background: #dd5f5f; } /* Match results */ body.page-tournament-view .matchup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; } body.page-tournament-view .match-result { background: #16213e; border-radius: 7px; padding: 8px 10px; } body.page-tournament-view .match-result .round-label { font-size: .68rem; color: #888; margin-bottom: 4px; } body.page-tournament-view .match-result .teams-row { display: flex; align-items: center; justify-content: space-between; } body.page-tournament-view .match-result .team-side { flex: 1; display: flex; align-items: center; gap: 5px; min-width: 0; } body.page-tournament-view .match-result .team-side.right { justify-content: flex-end; text-align: right; } body.page-tournament-view .match-result .team-name-r { font-weight: 600; font-size: .86rem; line-height: 1.2; } body.page-tournament-view .match-result .team-name-r.winner { color: var(--niuma-win); } body.page-tournament-view .match-result .team-name-r.loser { color: #888; } body.page-tournament-view .team-hover { position: relative; display: inline-flex; max-width: 100%; align-items: center; cursor: default; } body.page-tournament-view .team-hover .team-tip { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) translateY(4px); min-width: 150px; max-width: 240px; padding: 9px 11px; background: rgba(9,13,28,.98); border: 1px solid rgba(108,140,255,.32); border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.38); opacity: 0; pointer-events: none; transition: opacity .14s, transform .14s; z-index: 50; text-align: left; white-space: normal; } body.page-tournament-view .team-hover .team-tip::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 9px; height: 9px; background: rgba(9,13,28,.98); border-right: 1px solid rgba(108,140,255,.32); border-bottom: 1px solid rgba(108,140,255,.32); transform: translateX(-50%) rotate(45deg); } body.page-tournament-view .team-hover:hover .team-tip { opacity: 1; transform: translateX(-50%) translateY(0); } body.page-tournament-view .team-tip-title { font-size: .74rem; color: #8ea2ff; margin-bottom: 5px; font-weight: 700; } body.page-tournament-view .team-tip-member { font-size: .82rem; color: #ddd; line-height: 1.55; overflow: hidden; text-overflow: ellipsis; } body.page-tournament-view .team-tip-empty { font-size: .8rem; color: #777; } body.page-tournament-view .match-result .score-box { display: flex; align-items: center; gap: 3px; padding: 0 8px; } body.page-tournament-view .match-result .score-num { font-size: 1.02rem; font-weight: 700; min-width: 18px; text-align: center; } body.page-tournament-view .match-result .score-num.win { color: var(--niuma-win); } body.page-tournament-view .match-result .score-num.lose { color: #888; } body.page-tournament-view .match-result .score-sep { color: #555; } body.page-tournament-view .match-result .bo-label { font-size: .64rem; color: #666; text-align: center; margin-top: 2px; } /* Date-grouped matches under standings */ body.page-tournament-view .group-matches { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; } body.page-tournament-view .date-group { background: #16213e; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,.07); } body.page-tournament-view .date-group-header { display: flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: .82rem; font-weight: 700; color: #6c8cff; background: rgba(108,140,255,.06); border-bottom: 1px solid rgba(108,140,255,.12); cursor: pointer; user-select: none; } body.page-tournament-view .date-group-header:hover { background: rgba(108,140,255,.12); } body.page-tournament-view .date-group-header .toggle-arrow { margin-left: auto; font-size: .7rem; color: #888; transition: transform .2s; } body.page-tournament-view .date-group.collapsed .toggle-arrow { transform: rotate(-90deg); } body.page-tournament-view .date-group-body { overflow: hidden; } body.page-tournament-view .date-group.collapsed .date-group-body { display: none; } body.page-tournament-view .date-match-row { display: flex; align-items: center; padding: 5px 12px; border-bottom: 1px solid rgba(255,255,255,.04); gap: 6px; } body.page-tournament-view .date-match-row:last-child { border-bottom: none; } body.page-tournament-view .date-match-row .dm-team { flex: 1; font-size: .85rem; font-weight: 600; color: #e0e0e0; } body.page-tournament-view .date-match-row .dm-team.right { text-align: right; } body.page-tournament-view .date-match-row .dm-team.winner { color: var(--niuma-win); } body.page-tournament-view .date-match-row .dm-team.loser { color: #777; } body.page-tournament-view .date-match-row .dm-score { display: flex; align-items: center; gap: 6px; min-width: 68px; justify-content: center; } body.page-tournament-view .date-match-row .dm-score .sn { font-size: .95rem; font-weight: 700; min-width: 16px; text-align: center; } body.page-tournament-view .date-match-row .dm-score .sn.win { color: var(--niuma-win); } body.page-tournament-view .date-match-row .dm-score .sn.lose { color: #777; } body.page-tournament-view .date-match-row .dm-score .sep { color: #555; font-size: .8rem; } body.page-tournament-view .date-match-row .dm-bo { font-size: .68rem; color: #6c8cff; background: rgba(108,140,255,.1); border-radius: 5px; padding: 1px 6px; white-space: nowrap; } body.page-tournament-view .date-match-row .dm-expand { font-size: .68rem; color: #888; background: rgba(255,255,255,.06); border: none; border-radius: 5px; padding: 2px 8px; cursor: pointer; white-space: nowrap; } body.page-tournament-view .date-match-row .dm-expand:hover { background: rgba(255,255,255,.12); color: #e0e0e0; } body.page-tournament-view .bk-dtl-btn { font-size: .62rem; color: #6c8cff; background: rgba(108,140,255,.1); border: 1px solid rgba(108,140,255,.22); border-radius: 5px; padding: 1px 7px; cursor: pointer; margin: 3px auto 0; display: block; white-space: nowrap; transition: background .15s, color .15s; } body.page-tournament-view .bk-dtl-btn:hover { background: rgba(108,140,255,.22); color: #aac0ff; } body.page-tournament-view .bk-dtl-btn.active { background: rgba(108,140,255,.3); color: #c0d0ff; border-color: rgba(108,140,255,.5); } /* Match game detail (Liquipedia style) */ body.page-tournament-view .match-detail { background: rgba(0,0,0,.25); border-top: 1px solid rgba(255,255,255,.05); } body.page-tournament-view .match-detail-wide { grid-column: 1 / -1; border: 1px solid rgba(108,140,255,.16); border-radius: 8px; background: rgba(8,14,26,.92); overflow-x: auto; margin: -4px 0 8px; box-shadow: 0 8px 24px rgba(0,0,0,.25); } body.page-tournament-view .match-detail-wide .game-block { min-width: 760px; } body.page-tournament-view .match-detail-loading { padding: 10px 16px; color: #666; font-size: .8rem; } body.page-tournament-view .game-block { border-bottom: 1px solid rgba(255,255,255,.04); } body.page-tournament-view .game-block:last-child { border-bottom: none; } body.page-tournament-view .game-header { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 7px 16px; background: rgba(0,0,0,.15); font-size: .78rem; color: #888; } body.page-tournament-view .game-header .gh-label { font-weight: 700; color: #6c8cff; } body.page-tournament-view .game-header .gh-result { font-weight: 700; } body.page-tournament-view .game-header .gh-result.radiant-win { color: var(--niuma-win); } body.page-tournament-view .game-header .gh-result.dire-win { color: var(--niuma-loss); } body.page-tournament-view .picks-row { display: flex; align-items: center; gap: 0; } body.page-tournament-view .picks-side { display: flex; gap: 2px; align-items: center; padding: 5px 10px; } body.page-tournament-view .picks-side.radiant { flex-direction: row; } body.page-tournament-view .picks-side.dire { flex-direction: row-reverse; } body.page-tournament-view .picks-mid { flex: 1; display: flex; align-items: center; justify-content: center; font-size: .78rem; color: #888; gap: 8px; } body.page-tournament-view .hero-icon { width: 34px; height: 34px; border-radius: 4px; object-fit: cover; background: #1a1a2e; } body.page-tournament-view .hero-icon-sm { width: 24px; height: 24px; border-radius: 3px; object-fit: cover; background: #1a1a2e; } body.page-tournament-view .bans-row { display: flex; align-items: center; padding: 3px 10px; gap: 6px; border-top: 1px solid rgba(255,255,255,.04); } body.page-tournament-view .bans-label { font-size: .68rem; color: #666; min-width: 28px; } body.page-tournament-view .bans-heroes { display: flex; gap: 2px; flex-wrap: wrap; } body.page-tournament-view .hero-icon-ban { width: 22px; height: 22px; border-radius: 3px; object-fit: cover; filter: grayscale(60%) brightness(.6); background: #1a1a2e; } body.page-tournament-view .game-player-list { display: grid; gap: 6px; padding: 6px; } body.page-tournament-view .game-player-card { display: grid; grid-template-columns: 54px minmax(0,1fr) auto 90px; align-items: center; gap: 7px; padding: 6px 7px; min-height: 54px; font-size: .8rem; line-height: 1.25; border: 1px solid rgba(255,255,255,.06); border-radius: 7px; background: linear-gradient(135deg, rgba(22,27,38,.96), rgba(12,16,27,.96)); } body.page-tournament-view .game-player-card.radiant { border-left: 3px solid #3a9a4a; } body.page-tournament-view .game-player-card.dire { border-left: 3px solid #aa5050; } body.page-tournament-view .game-player-hero { position: relative; width: 54px; height: 31px; flex-shrink: 0; } body.page-tournament-view .game-player-hero .hero-icon-sm { width: 54px; height: 31px; object-fit: cover; object-position: center top; border-radius: 4px; background: #2a2a4a; display: block; } body.page-tournament-view .game-player-level { position: absolute; left: 2px; bottom: 2px; min-width: 16px; padding: 0 4px; border-radius: 3px; background: rgba(0,0,0,.68); color: #f5c518; font-size: .64rem; line-height: 15px; font-weight: 700; text-align: center; } body.page-tournament-view .game-player-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; } body.page-tournament-view .game-player-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #ddd; font-weight: 700; } body.page-tournament-view .game-player-statline { display: flex; align-items: center; justify-content: space-between; gap: 4px 12px; color: #888; font-size: .72rem; flex-wrap: wrap; min-width: 0; } body.page-tournament-view .game-player-statline .val { color: #ddd; font-weight: 600; } body.page-tournament-view .game-stat-side { display: inline-flex; align-items: center; gap: 9px; min-width: 0; flex: 0 1 auto; } body.page-tournament-view .game-stat-side.right { justify-content: flex-end; margin-left: auto; } body.page-tournament-view .game-stat-chip { display: inline-flex; align-items: center; gap: 4px; } body.page-tournament-view .game-stat-icon { width: auto; min-width: 0; height: auto; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; border-radius: 0; color: #d6a84a; font-size: .78rem; font-weight: 800; line-height: 1; } body.page-tournament-view .game-stat-icon.econ { color: #d6a84a; } body.page-tournament-view .game-stat-icon.damage { color: #d45d5d; } body.page-tournament-view .game-player-kda { color: #aaa; white-space: nowrap; font-weight: 700; } body.page-tournament-view .game-player-kda .k { color: var(--niuma-kill); } body.page-tournament-view .game-player-kda .d { color: var(--niuma-death); } body.page-tournament-view .game-player-kda .a { color: var(--niuma-assist); } body.page-tournament-view .game-player-extra { display: flex; flex-direction: column; justify-content: center; gap: 2px; align-items: center; } body.page-tournament-view .game-aghs-icon { width: 20px; height: 20px; object-fit: contain; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); } body.page-tournament-view .game-neutral-slot, body.page-tournament-view .game-item-slot { width: 28px; height: 20px; border-radius: 3px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.06); overflow: hidden; } body.page-tournament-view .game-neutral-slot { border-radius: 50%; width: 20px; height: 20px; } body.page-tournament-view .game-item-icon, body.page-tournament-view .game-neutral-slot img { width: 100%; height: 100%; object-fit: cover; display: block; } body.page-tournament-view .game-items { display: grid; grid-template-columns: repeat(3, 28px); grid-auto-rows: 20px; gap: 2px; } body.page-tournament-view .game-inventories { display: flex; flex-direction: column; gap: 4px; } body.page-tournament-view .game-bear-inventory { display: flex; flex-direction: column; gap: 2px; padding-top: 3px; border-top: 1px solid rgba(201,162,85,.25); } body.page-tournament-view .game-bear-label { color: #c9a255; font-size: .62rem; font-weight: 700; line-height: 1; } @media (max-width: 760px) { body.page-tournament-view .game-stat-side.right { flex-basis: 100%; } } body.page-tournament-view .team-label { font-size: .72rem; font-weight: 700; padding: 4px 8px; background: rgba(0,0,0,.2); color: #888; } /* Stats panel */ body.page-tournament-view .stats-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } body.page-tournament-view .stats-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .85rem; } body.page-tournament-view .stats-table th { padding: 8px 12px; color: #888; font-weight: 600; text-align: center; border-bottom: 2px solid #2a2a4a; background: #111b2a; white-space: nowrap; cursor: pointer; user-select: none; } body.page-tournament-view .stats-table th:hover { color: #ccc; } body.page-tournament-view .stats-table th.left { text-align: left; } body.page-tournament-view .stats-table th.sorted { color: #6c8cff; } body.page-tournament-view .stats-table td { padding: 7px 12px; border-bottom: 1px solid rgba(255,255,255,.04); color: #ccc; text-align: center; white-space: nowrap; } body.page-tournament-view .stats-table td.left { text-align: left; } body.page-tournament-view .stats-table th.left, body.page-tournament-view .stats-table td.left { position: sticky; left: 0; z-index: 4; background: #0f1923; box-shadow: 1px 0 0 rgba(255,255,255,.06), 8px 0 12px rgba(0,0,0,.18); } body.page-tournament-view .stats-table th.left { z-index: 6; background: #111b2a; } body.page-tournament-view .stats-table tr:hover td { background: rgba(255,255,255,.03); } body.page-tournament-view .stats-table tr:hover td.left { background: #152131; } body.page-tournament-view .stats-table tr:last-child td { border-bottom: none; } body.page-tournament-view .stats-table .kda-val { font-weight: 700; color: #e0e0e0; } body.page-tournament-view .stats-table .kda-val.high { color: var(--niuma-win); } body.page-tournament-view .stats-table .kda-val.mid { color: #f5c518; } body.page-tournament-view .stats-table .kda-val.low { color: var(--niuma-loss); } body.page-tournament-view .stats-table .wr-pill { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: .78rem; font-weight: 700; } body.page-tournament-view .stats-table .wr-pill.high { background: rgba(95,221,95,.12); color: var(--niuma-win); } body.page-tournament-view .stats-table .wr-pill.mid { background: rgba(245,197,24,.10); color: #f5c518; } body.page-tournament-view .stats-table .wr-pill.low { background: rgba(221,95,95,.12); color: var(--niuma-loss); } body.page-tournament-view .stats-section { background: #0f1923; border-radius: 10px; border: 1px solid rgba(255,255,255,.06); margin-bottom: 20px; } body.page-tournament-view .stats-filterbar { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.14); color: #888; font-size: .82rem; } body.page-tournament-view .stats-filterbar input { width: 72px; padding: 5px 8px; border-radius: 6px; border: 1px solid #333; background: #0b1220; color: #e0e0e0; outline: none; } body.page-tournament-view .stats-filterbar input:focus { border-color: #6c8cff; } body.page-tournament-view #statsStickyHeader { display: none; position: fixed; top: 0; left: 0; z-index: 850; overflow: hidden; background: #0f1923; border: 1px solid rgba(108,140,255,.22); border-bottom: none; box-shadow: 0 6px 18px rgba(0,0,0,.35); } body.page-tournament-view #statsStickyHeader .stats-table { margin: 0; } body.page-tournament-view #statsStickyHeader th { background: #111b2a; } /* Points league leaderboard */ body.page-tournament-view .league-leaderboard { background: #16213e; border-radius: 10px; overflow: hidden; border: 1px solid rgba(108,140,255,.18); margin-bottom: 20px; } body.page-tournament-view .league-leaderboard-header { background: linear-gradient(135deg,#1e3a5f,#16213e); padding: 14px 18px; font-weight: 700; font-size: 1.05rem; color: #fff; border-bottom: 2px solid rgba(108,140,255,.3); display: flex; align-items: center; justify-content: space-between; } body.page-tournament-view .league-table { width: 100%; border-collapse: collapse; } body.page-tournament-view .league-table th { padding: 8px 16px; font-size: .82rem; color: #888; text-transform: uppercase; border-bottom: 1px solid #2a2a4a; background: rgba(0,0,0,.2); } body.page-tournament-view .league-table th.right { text-align: right; } body.page-tournament-view .league-table th.sortable { cursor: pointer; user-select: none; transition: color .15s, background .15s; } body.page-tournament-view .league-table th.sortable:hover { color: #c8d4ff; background: rgba(108,140,255,.08); } body.page-tournament-view .league-table th.sorted { color: #8ea2ff; } body.page-tournament-view .league-table th .sort-arrow { display: inline-block; min-width: 10px; margin-left: 4px; font-size: .68rem; color: #8ea2ff; } body.page-tournament-view .league-table td { padding: 10px 16px; border-bottom: 1px solid #2a2a4a; font-size: .95rem; } body.page-tournament-view .league-table tr:last-child td { border-bottom: none; } body.page-tournament-view .league-table tr:hover td { background: rgba(255,255,255,.03); } body.page-tournament-view .league-table .rank { text-align: center; font-weight: 700; color: #888; width: 40px; } body.page-tournament-view .league-table .rank.top1 { color: #ffd700; } body.page-tournament-view .league-table .rank.top2 { color: #c0c0c0; } body.page-tournament-view .league-table .rank.top3 { color: #cd7f32; } body.page-tournament-view .league-table .pts { text-align: right; font-weight: 700; font-size: 1.1rem; color: var(--niuma-win); } body.page-tournament-view .league-table .player-name { font-weight: 600; } body.page-tournament-view .league-avatar-fallback { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:linear-gradient(135deg, rgba(108,140,255,.38), rgba(95,221,95,.22)); color:#f2f5ff; font-weight:800; border:1px solid rgba(108,140,255,.35); text-transform:uppercase; } body.page-tournament-view .league-upload-btn { display: inline-flex; align-items: center; gap: 6px; background: rgba(108,140,255,.15); border: 1px solid rgba(108,140,255,.35); color: #6c8cff; border-radius: 8px; padding: 8px 18px; font-size: .9rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: background .15s; } body.page-tournament-view .league-upload-btn:hover { background: rgba(108,140,255,.28); color: #aac0ff; } /* Bracket */ body.page-tournament-view .bracket-section { margin-top: 24px; } body.page-tournament-view .bracket-round { margin-bottom: 20px; } body.page-tournament-view .bracket-round h4 { color: #6c8cff; font-size: .9rem; margin-bottom: 10px; border-bottom: 1px solid #333; padding-bottom: 6px; } /* Liquipedia-style double-elimination bracket */ body.page-tournament-view .bracket-wrapper { display: flex; gap: 16px; overflow-x: auto; padding: 8px 0 16px; } body.page-tournament-view .bracket-column { display: flex; flex-direction: column; min-width: 220px; flex-shrink: 0; } body.page-tournament-view .bracket-column-header { text-align: center; font-size: .78rem; color: #6c8cff; font-weight: 600; margin-bottom: 6px; padding: 3px 8px; background: rgba(108,140,255,.1); border-radius: 6px; white-space: nowrap; } body.page-tournament-view .bracket-column-header.gf-header { color: #fbbf24; background: rgba(251,191,36,.1); } body.page-tournament-view .bracket-match { background: #16213e; border: 1px solid #333; border-radius: 8px; overflow: hidden; min-width: 200px; } body.page-tournament-view .bracket-match .bm-team { display: flex; align-items: center; justify-content: space-between; padding: 7px 11px; border-bottom: 1px solid #2a2a4a; } body.page-tournament-view .bracket-match .bm-team:last-child { border-bottom: none; } body.page-tournament-view .bracket-match .bm-team.winner { background: rgba(95,221,95,.06); } body.page-tournament-view .bracket-match .bm-team.winner .bm-name { color: var(--niuma-win); font-weight: 700; } body.page-tournament-view .bracket-match .bm-team.loser .bm-name { color: #666; } body.page-tournament-view .bracket-match .bm-name { font-size: .88rem; color: #e0e0e0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; text-decoration: none; } body.page-tournament-view .bracket-match a.bm-name:hover { color: #6c8cff; text-decoration: underline; } body.page-tournament-view .bracket-match .bm-score { font-size: .88rem; font-weight: 700; min-width: 20px; text-align: center; } body.page-tournament-view .bracket-match .bm-score.win { color: var(--niuma-win); } body.page-tournament-view .bracket-match .bm-score.lose { color: #888; } body.page-tournament-view .bracket-match-label { font-size: .68rem; color: #555; text-align: center; padding: 2px; background: rgba(0,0,0,.2); } body.page-tournament-view .bm-date-inline { color: #b0c4ff; font-size: .72rem; font-weight: 500; } body.page-tournament-view .bm-champ-banner { text-align: center; font-size: .8rem; font-weight: 700; color: #fbbf24; padding: 4px 6px 2px; text-shadow: 0 0 8px rgba(251,191,36,.6); letter-spacing: .04em; } body.page-tournament-view .de-bracket { display: flex; flex-direction: column; gap: 0; } body.page-tournament-view .bracket-section-label { font-size: .78rem; font-weight: 700; letter-spacing: .04em; padding: 6px 10px; border-radius: 4px; margin: 14px 0 4px; display: inline-block; } body.page-tournament-view .bracket-section-label.ub-label { color: #5fdd5f; background: rgba(95,221,95,.08); border-left: 3px solid #5fdd5f; } body.page-tournament-view .bracket-section-label.lb-label { color: #fbbf24; background: rgba(251,191,36,.08); border-left: 3px solid #fbbf24; } body.page-tournament-view .phase-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid #333; } body.page-tournament-view .phase-header h3 { color: #fff; font-size: 1.1rem; margin: 0; } body.page-tournament-view .phase-badge { font-size: .75rem; padding: 2px 10px; border-radius: 10px; font-weight: 600; } body.page-tournament-view .phase-badge.upper { background: rgba(95,221,95,.15); color: #5fdd5f; } body.page-tournament-view .phase-badge.lower { background: rgba(251,191,36,.15); color: #fbbf24; } body.page-tournament-view .phase-badge.final { background: rgba(255,100,100,.15); color: #ff8888; } body.page-tournament-view .empty-msg { text-align: center; color: #666; padding: 40px; } body.page-tournament-view .phase-section { margin-bottom: 32px; } body.page-tournament-view .phase-section h3 { color: #fff; font-size: 1.1rem; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid #333; } /* Prediction (梦幻预测) styles */ body.page-tournament-view .pk-section { margin-bottom: 24px; } body.page-tournament-view .pk-section-label { font-size: .82rem; font-weight: 700; letter-spacing: .04em; padding: 5px 10px; border-radius: 4px; margin-bottom: 10px; display: inline-block; } body.page-tournament-view .pk-round { margin-bottom: 14px; } body.page-tournament-view .pk-round-label { font-size: .75rem; color: #6c8cff; font-weight: 600; margin-bottom: 6px; padding: 2px 0; border-bottom: 1px solid #2a2a4a; } body.page-tournament-view .pk-match { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.04); } body.page-tournament-view .pk-match:last-child { border-bottom: none; } body.page-tournament-view .pk-slot { flex: 1; background: #1a2035; border: 1.5px solid #333; border-radius: 8px; padding: 8px 10px; font-size: .88rem; color: #ccc; cursor: pointer; text-align: center; transition: .15s; appearance: none; -webkit-appearance: none; } body.page-tournament-view .pk-slot:hover:not([disabled]) { border-color: #6c8cff; color: #fff; background: rgba(108,140,255,.12); } body.page-tournament-view .pk-slot.pk-picked { border-color: #6c8cff; background: rgba(108,140,255,.18); color: #b0c4ff; font-weight: 700; } body.page-tournament-view .pk-slot.pk-correct { border-color: #5fdd5f; background: rgba(95,221,95,.12); color: #5fdd5f; font-weight: 700; cursor: default; } body.page-tournament-view .pk-slot.pk-wrong { border-color: #555; background: transparent; color: #555; cursor: default; text-decoration: line-through; } body.page-tournament-view .pk-slot.pk-predicted { border-style: dashed; } body.page-tournament-view .pk-slot.pk-tbd { color: #555; cursor: default; font-size: .78rem; border-style: dashed; } body.page-tournament-view .pk-slot[disabled] { cursor: default; } body.page-tournament-view .pk-vs { color: #555; font-size: .78rem; flex-shrink: 0; } body.page-tournament-view .pk-submit-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 20px; padding: 14px; background: #16213e; border-radius: 10px; } body.page-tournament-view .pk-submit-row input { flex: 1 1 150px; min-width: 0; background: #0f172a; border: 1.5px solid #4a5568; border-radius: 6px; padding: 8px 12px; color: #e0e0e0; font-size: 1rem; -webkit-appearance: none; appearance: none; } body.page-tournament-view .pk-submit-row input:focus { outline: none; border-color: #4a6cf7; } body.page-tournament-view .pk-btn { border: none; border-radius: 6px; padding: 8px 18px; cursor: pointer; font-size: .9rem; font-weight: 600; } body.page-tournament-view .pk-btn-primary { background: #4a6cf7; color: #fff; } body.page-tournament-view .pk-btn-primary:hover { background: #3a5ce7; } body.page-tournament-view .pk-btn-primary:disabled { background: #334; color: #777; cursor: default; } body.page-tournament-view .pk-btn-danger { background: rgba(255,80,80,.15); color: #ff8888; border: 1px solid rgba(255,80,80,.3); } body.page-tournament-view .pk-btn-danger:hover { background: rgba(255,80,80,.25); } body.page-tournament-view .pk-btn-warn { background: rgba(251,191,36,.15); color: #fbbf24; border: 1px solid rgba(251,191,36,.3); } body.page-tournament-view .pk-btn-warn:hover { background: rgba(251,191,36,.25); } body.page-tournament-view .pk-banner { padding: 10px 14px; border-radius: 8px; font-size: .88rem; margin-bottom: 14px; } body.page-tournament-view .pk-banner.open { background: rgba(95,221,95,.1); border: 1px solid rgba(95,221,95,.3); color: #5fdd5f; } body.page-tournament-view .pk-banner.closed { background: rgba(108,140,255,.07); border: 1px solid rgba(108,140,255,.18); color: #aaa; } body.page-tournament-view .pk-banner.nobracket { background: rgba(251,191,36,.07); border: 1px solid rgba(251,191,36,.18); color: #fbbf24; } body.page-tournament-view .pk-admin-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; padding: 10px 14px; background: rgba(0,0,0,.3); border-radius: 8px; align-items: center; } body.page-tournament-view .pk-admin-bar span { font-size: .78rem; color: #888; margin-right: 4px; } body.page-tournament-view .pk-lb { background: #16213e; border-radius: 10px; overflow: hidden; margin-top: 24px; } body.page-tournament-view .pk-lb-title { padding: 10px 16px; font-size: .85rem; font-weight: 700; color: #6c8cff; border-bottom: 1px solid #2a2a4a; } body.page-tournament-view .pk-lb-row { display: flex; align-items: center; padding: 9px 16px; border-bottom: 1px solid rgba(255,255,255,.04); gap: 10px; font-size: .88rem; } body.page-tournament-view .pk-lb-row:last-child { border-bottom: none; } body.page-tournament-view .pk-lb-rank { min-width: 26px; font-weight: 700; color: #888; text-align: center; } body.page-tournament-view .pk-lb-rank.top1 { color: #fbbf24; } body.page-tournament-view .pk-lb-rank.top2 { color: #aaa; } body.page-tournament-view .pk-lb-rank.top3 { color: #cd7f32; } body.page-tournament-view .pk-lb-name { flex: 1; font-weight: 600; } body.page-tournament-view .pk-lb-score { color: #6c8cff; font-weight: 700; min-width: 40px; text-align: right; } body.page-tournament-view .pk-lb-date { font-size: .72rem; color: #555; } body.page-tournament-view .pk-lb-del { background: none; border: none; color: #664; cursor: pointer; font-size: .85rem; padding: 2px 6px; border-radius: 4px; transition: color .15s; margin-left: 4px; } body.page-tournament-view .pk-lb-del:hover { color: #e55; } body.page-tournament-view .pk-lb-view { background: none; border: 1px solid #2a2a4a; color: #888; cursor: pointer; font-size: .72rem; padding: 2px 7px; border-radius: 4px; transition: all .15s; } body.page-tournament-view .pk-lb-view:hover { border-color: #6c8cff; color: #6c8cff; } body.page-tournament-view .pk-picks-detail { padding: 8px 16px 12px 52px; background: rgba(108,140,255,.04); border-bottom: 1px solid rgba(255,255,255,.04); display: flex; flex-wrap: wrap; gap: 6px; } body.page-tournament-view .pk-picks-detail .pk-pick-chip { background: #1a1a3a; border: 1px solid #2a2a4a; border-radius: 12px; padding: 3px 10px; font-size: .75rem; color: #aaa; } body.page-tournament-view .pk-picks-detail .pk-pick-chip b { color: #6c8cff; } body.page-tournament-view .pk-submitted-info { padding: 12px 14px; background: rgba(95,221,95,.07); border: 1px solid rgba(95,221,95,.2); border-radius: 8px; font-size: .88rem; color: #7be07b; margin-bottom: 14px; } /* Prediction bracket interaction states */ body.page-tournament-view .pk-bracket-match .bm-team { transition: background .12s; } body.page-tournament-view .pk-bracket-match .bm-team.pk-clickable { cursor: pointer; } body.page-tournament-view .pk-bracket-match .bm-team.pk-clickable:hover { background: rgba(108,140,255,.12); } body.page-tournament-view .pk-bracket-match .bm-team.pk-picked { background: rgba(108,140,255,.22) !important; border-left: 3px solid #6c8cff; padding-left: 8px; } body.page-tournament-view .pk-bracket-match .bm-team.pk-picked .bm-name { color: #b0c4ff; font-weight: 700; } body.page-tournament-view .pk-bracket-match .bm-team.pk-predicted .bm-name { color: #bbb; font-style: italic; } body.page-tournament-view .pk-bracket-match .bm-team.pk-tbd-row .bm-name { color: #555; font-style: italic; } body.page-tournament-view .pk-bracket-match .bm-team.pk-correct { background: rgba(95,221,95,.14) !important; } body.page-tournament-view .pk-bracket-match .bm-team.pk-correct .bm-name { color: #5fdd5f; font-weight: 700; } body.page-tournament-view .pk-bracket-match .bm-team.pk-wrong { opacity: .45; } body.page-tournament-view .pk-bracket-match .bm-team.pk-wrong .bm-name { text-decoration: line-through; } /* Champion prediction top 3 */ body.page-tournament-view .pk-champ-pred { background: #16213e; border-radius: 10px; overflow: hidden; margin-bottom: 20px; } body.page-tournament-view .pk-champ-pred-title { padding: 10px 16px; font-size: .85rem; font-weight: 700; color: #fbbf24; border-bottom: 1px solid #2a2a4a; } body.page-tournament-view .pk-champ-row { display: flex; align-items: center; padding: 9px 16px; border-bottom: 1px solid rgba(255,255,255,.04); gap: 10px; font-size: .88rem; } body.page-tournament-view .pk-champ-row:last-child { border-bottom: none; } body.page-tournament-view .pk-champ-medal { min-width: 26px; text-align: center; font-size: 1rem; } body.page-tournament-view .pk-champ-name { min-width: 100px; font-weight: 700; } body.page-tournament-view .pk-champ-bar-wrap { flex: 1; height: 8px; background: rgba(255,255,255,.06); border-radius: 4px; overflow: hidden; } body.page-tournament-view .pk-champ-bar { height: 100%; background: linear-gradient(90deg,#fbbf24,#f59e0b); border-radius: 4px; } body.page-tournament-view .pk-champ-pct { min-width: 70px; text-align: right; color: #fbbf24; font-weight: 600; font-size: .82rem; } /* Bracket win rate percentage */ body.page-tournament-view .bm-pred-pct { font-size: .72rem; color: #888; margin-left: 5px; flex-shrink: 0; white-space: nowrap; } @media (max-width: 760px) { body.page-tournament-view { overflow-x: auto; } body.page-tournament-view .container { width: 100%; padding-left: 10px; padding-right: 10px; overflow-x: visible; } body.page-tournament-view .tabs, body.page-tournament-view .group-content, body.page-tournament-view .bracket-wrapper, body.page-tournament-view .match-detail-wide, body.page-tournament-view .stats-scroll, body.page-tournament-view .league-leaderboard { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x pan-y; } body.page-tournament-view .tabs { flex-wrap: nowrap; padding-bottom: 2px; } body.page-tournament-view .tab { flex: 0 0 auto; padding-left: 18px; padding-right: 18px; } body.page-tournament-view .group-content, body.page-tournament-view .match-detail-wide, body.page-tournament-view .stats-scroll, body.page-tournament-view .league-leaderboard { max-width: 100%; } body.page-tournament-view .combined-table { min-width: 720px; } body.page-tournament-view .league-table { min-width: 680px; } body.page-tournament-view .stats-table { min-width: 760px; } } /* about */ body.page-about * { box-sizing: border-box; margin: 0; padding: 0; } body.page-about { font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: #0a0a18 url('/static/bg.png') center top / cover no-repeat fixed; color: #e0e0e0; min-height: 100vh; } body.page-about .container { max-width: 720px; margin: 0 auto; padding: 32px 16px; background: rgba(10,10,24,.85); min-height: 100vh; border-left: 1px solid rgba(255,255,255,.05); border-right: 1px solid rgba(255,255,255,.05); } body.page-about .img-wrap img { display: block; width: 100%; height: auto; border-radius: 12px; } body.page-about .nav { text-align: center; margin-bottom: 24px; padding: 10px 0; } body.page-about .nav a { color: #fff; text-decoration: none; margin: 0 12px; font-size: .95rem; opacity: .85; } body.page-about .nav a:hover { opacity: 1; text-decoration: underline; } body.page-about .social-section { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; } body.page-about .social-btn { display: flex; align-items: center; gap: 14px; background: rgba(22,33,62,.9); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 14px 18px; } body.page-about .social-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } body.page-about .social-icon.douyin { background: #000; } body.page-about .social-icon.bili { background: #00a1d6; } body.page-about .social-handle { font-size: 1rem; font-weight: 700; color: #fff; } /* friendly */ body.page-friendly * { box-sizing: border-box; margin: 0; padding: 0; } body.page-friendly { font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: #0a0a18 url('/static/bg.png') center top / cover no-repeat fixed; color: #e0e0e0; min-height: 100vh; } body.page-friendly .container { max-width: 1100px; margin: 0 auto; padding: 32px 16px; background: rgba(10,10,24,.88); min-height: 100vh; border-left: 1px solid rgba(255,255,255,.05); border-right: 1px solid rgba(255,255,255,.05); } body.page-friendly h1 { text-align: center; font-size: 1.6rem; margin-bottom: 4px; color: #fff; letter-spacing: .04em; } body.page-friendly .subtitle { text-align: center; color: #888; font-size: .9rem; margin-bottom: 20px; } body.page-friendly .nav { text-align: center; margin-bottom: 24px; } body.page-friendly .nav a { color: #fff; opacity: .85; text-decoration: none; margin: 0 12px; font-size: .95rem; } body.page-friendly .nav a:hover { opacity: 1; text-decoration: underline; } /* Admin panel */ body.page-friendly .admin-panel { background: #16213e; border: 1px solid rgba(108,140,255,.25); border-radius: 10px; padding: 14px 18px; margin-bottom: 22px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } body.page-friendly .admin-panel label { font-size: .82rem; color: #999; margin-right: 4px; } body.page-friendly .admin-panel input[type=number] { width: 110px; background: #1a1a2e; border: 1px solid #333; border-radius: 6px; padding: 6px 10px; color: #e0e0e0; font-size: .9rem; } body.page-friendly .admin-panel input[type=number]:focus { outline: none; border-color: #4a6cf7; } body.page-friendly .admin-panel .sep { color: #444; font-size: .9rem; } body.page-friendly .admin-panel .cached-info { font-size: .82rem; color: #888; } body.page-friendly .admin-panel details { flex-basis: 100%; margin-top: 2px; } body.page-friendly .admin-panel summary { display: inline-flex; align-items: center; gap: 4px; color: #777; font-size: .78rem; cursor: pointer; user-select: none; } body.page-friendly .admin-panel summary:hover { color: #aaa; } body.page-friendly .advanced-settings { margin-top: 10px; padding: 10px 12px; border: 1px dashed rgba(255,255,255,.12); border-radius: 8px; background: rgba(0,0,0,.14); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } body.page-friendly .danger-note { flex-basis: 100%; color: #b58b5b; font-size: .78rem; } body.page-friendly .match-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: -4px 0 14px; padding: 10px 12px; background: rgba(19,25,46,.72); border: 1px solid rgba(255,255,255,.06); border-radius: 10px; } body.page-friendly .match-toolbar label { font-size: .82rem; color: #888; } body.page-friendly .match-toolbar input[type=date] { background: #1a1a2e; border: 1px solid #333; border-radius: 6px; padding: 6px 10px; color: #e0e0e0; font-size: .88rem; color-scheme: dark; } body.page-friendly .match-toolbar .hint { color: #666; font-size: .78rem; margin-left: auto; } body.page-friendly .btn { display: inline-flex; align-items: center; gap: 5px; padding: 8px 16px; font-size: .88rem; font-weight: 600; border: none; border-radius: 8px; cursor: pointer; color: #fff; background: #4a6cf7; transition: background .2s, opacity .2s; } body.page-friendly .btn:hover { background: #3a5ce5; } body.page-friendly .btn:disabled { opacity: .5; cursor: default; } body.page-friendly .btn-sm { padding: 5px 12px; font-size: .82rem; } body.page-friendly .btn-outline { background: none; border: 1px solid #4a6cf7; color: #6c8cff; } body.page-friendly .btn-outline:hover { background: rgba(74,108,247,.12); } body.page-friendly .btn-green { background: #2d7a3a; } body.page-friendly .btn-green:hover { background: #3a9a4a; } /* Tabs */ body.page-friendly .tabs { display: flex; gap: 0; margin-bottom: 24px; border-bottom: 2px solid #2a2a4a; } body.page-friendly .tab { padding: 10px 28px; cursor: pointer; color: #888; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: .2s; font-size: .95rem; } body.page-friendly .tab:hover { color: #ccc; } body.page-friendly .tab.active { color: #6c8cff; border-bottom-color: #6c8cff; } body.page-friendly .panel { display: none; } body.page-friendly .panel.active { display: block; } /* Loading */ body.page-friendly .loading { text-align: center; color: #888; padding: 40px; font-size: .95rem; } body.page-friendly .empty-msg { text-align: center; color: #666; padding: 40px; font-size: .95rem; } /* Stats table */ body.page-friendly .stats-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; } body.page-friendly .stats-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9rem; } body.page-friendly #statsTable { table-layout: fixed; min-width: 780px; } body.page-friendly #statsTable th:nth-child(1), body.page-friendly #statsTable td:nth-child(1) { width: 42px; } body.page-friendly #statsTable th:nth-child(2), body.page-friendly #statsTable td:nth-child(2) { width: 128px; max-width: 128px; } body.page-friendly #statsTable th:nth-child(3), body.page-friendly #statsTable td:nth-child(3), body.page-friendly #statsTable th:nth-child(4), body.page-friendly #statsTable td:nth-child(4), body.page-friendly #statsTable th:nth-child(5), body.page-friendly #statsTable td:nth-child(5), body.page-friendly #statsTable th:nth-child(7), body.page-friendly #statsTable td:nth-child(7), body.page-friendly #statsTable th:nth-child(8), body.page-friendly #statsTable td:nth-child(8), body.page-friendly #statsTable th:nth-child(9), body.page-friendly #statsTable td:nth-child(9) { width: 58px; } body.page-friendly #statsTable th:nth-child(6), body.page-friendly #statsTable td:nth-child(6), body.page-friendly #statsTable th:nth-child(10), body.page-friendly #statsTable td:nth-child(10) { width: 68px; } body.page-friendly #statsTable th:nth-child(11), body.page-friendly #statsTable td:nth-child(11) { width: 118px; } body.page-friendly .stats-table th { padding: 10px 14px; color: #888; font-size: .8rem; font-weight: 700; text-align: center; border-bottom: 2px solid #2a2a4a; background: #131a2e; white-space: nowrap; cursor: pointer; user-select: none; text-transform: uppercase; letter-spacing: .03em; } body.page-friendly .stats-table th.left { text-align: left; } body.page-friendly .stats-table th:hover { color: #ccc; } body.page-friendly .stats-table th.sorted { color: #6c8cff; } body.page-friendly .stats-table th .arrow { font-size: .65rem; margin-left: 3px; vertical-align: middle; } body.page-friendly .stats-table td { padding: 9px 14px; border-bottom: 1px solid rgba(255,255,255,.04); color: #ccc; text-align: center; white-space: nowrap; } body.page-friendly .stats-table td.left { text-align: left; } body.page-friendly .stats-table tr:hover td { background: rgba(108,140,255,.05); } body.page-friendly .stats-table tr:last-child td { border-bottom: none; } body.page-friendly .stats-table .rank { color: #666; font-size: .8rem; width: 28px; } body.page-friendly .win { font-weight: 600; } body.page-friendly .loss { font-weight: 600; } body.page-friendly .wr-high { color: var(--niuma-win); font-weight: 700; } body.page-friendly .wr-mid { color: #e0e0e0; font-weight: 600; } body.page-friendly .wr-low { color: var(--niuma-loss); font-weight: 600; } body.page-friendly .kda-val { font-weight: 700; } body.page-friendly .kda-high { color: var(--niuma-win); } body.page-friendly .kda-mid { color: #f5c518; } body.page-friendly .kda-low { color: #e0e0e0; } /* Hero thumbnails */ body.page-friendly .hero-icons { display: inline-flex; gap: 3px; align-items: center; } body.page-friendly .hero-icon { width: 28px; height: 16px; object-fit: cover; border-radius: 3px; background: #2a2a4a; vertical-align: middle; } body.page-friendly .hero-icon-sm { width: 44px; height: 25px; object-fit: cover; object-position: center top; border-radius: 3px; background: #2a2a4a; flex-shrink: 0; } /* Match cards */ body.page-friendly .match-card { background: #13192e; border: 1px solid rgba(255,255,255,.06); border-radius: 10px; padding: 14px 18px; margin-bottom: 10px; } body.page-friendly .match-card.radiant-win { border-left: 3px solid #3a9a4a; } body.page-friendly .match-card.dire-win { border-left: 3px solid #aa3a3a; } body.page-friendly .match-card.uncached { border-left:3px solid #717b91; } body.page-friendly .match-card.cache-failed { border-left-color:#c85b64; background:rgba(63,25,35,.42); } body.page-friendly .match-card.uncached .match-meta { margin-bottom:0; } body.page-friendly .match-card.uncached .match-fetch-error { margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,.06); color:#c58b91; font-size:.78rem; line-height:1.5; overflow-wrap:anywhere; } body.page-friendly .match-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; flex-wrap: wrap; } body.page-friendly .match-id { font-size: .78rem; color: #555; } body.page-friendly .match-date { font-size: .82rem; color: #777; } body.page-friendly .match-duration { font-size: .82rem; color: #777; } body.page-friendly .match-winner-badge { font-size: .82rem; font-weight: 700; padding: 2px 10px; border-radius: 10px; } body.page-friendly .match-winner-badge.radiant { background: rgba(60,154,74,.18); color: var(--niuma-win); } body.page-friendly .match-winner-badge.dire { background: rgba(170,58,58,.18); color: var(--niuma-loss); } body.page-friendly .match-winner-badge.unknown { background: rgba(255,255,255,.06); color: #888; } body.page-friendly .match-link { font-size: .78rem; color: #6c8cff; text-decoration: none; } body.page-friendly .match-link:hover { text-decoration: underline; } body.page-friendly .match-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } body.page-friendly .score-btn { background: rgba(108,140,255,.1); border: 1px solid rgba(108,140,255,.5); border-radius: 5px; color: #9cb3ff; font-size: .75rem; padding: 2px 9px; cursor: pointer; transition: border-color .2s, color .2s; } body.page-friendly .score-btn:hover { border-color: #9cb3ff; color: #d4ddff; } body.page-friendly .score-btn:disabled { opacity: .45; cursor: default; } body.page-friendly .match-score-panel { margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(108,140,255,.2); } body.page-friendly .score-panel-title { color: #d9e1ff; font-size: .86rem; font-weight: 700; margin-bottom: 8px; } body.page-friendly .score-panel-title span { color: #9aabdb; font-size: .72rem; font-weight: 500; margin-left: 6px; } body.page-friendly .score-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } body.page-friendly .score-team { border: 1px solid rgba(255,255,255,.07); border-radius: 7px; overflow: hidden; } body.page-friendly .score-team.radiant { border-left: 3px solid #3a9a4a; } body.page-friendly .score-team.dire { border-left: 3px solid #aa5050; } body.page-friendly .score-team-title { padding: 5px 8px; background: rgba(255,255,255,.035); color: #b7c1e5; font-size: .75rem; font-weight: 700; } body.page-friendly .score-player-row { display: grid; grid-template-columns: 46px minmax(0,1fr) 58px; gap: 6px; align-items: center; padding: 5px 8px; border-top: 1px solid rgba(255,255,255,.045); color: #c7cbd7; font-size: .75rem; cursor: help; } body.page-friendly .score-position { color: #8b95b6; } body.page-friendly .score-player-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.page-friendly .score-value { color: #f3cf72; font-weight: 700; text-align: right; } body.page-friendly .score-empty, body.page-friendly .score-error { padding: 8px; color: #858da5; font-size: .75rem; } body.page-friendly .score-error { color: var(--niuma-loss); } body.page-friendly .score-panel-hint { margin-top: 7px; color: #69718b; font-size: .69rem; } @media (max-width: 600px) { body.page-friendly .match-teams { grid-template-columns: 1fr; } body.page-friendly .score-teams { grid-template-columns: 1fr; } } body.page-friendly .match-team-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; } body.page-friendly .match-team-label.radiant { color: #3a9a4a; } body.page-friendly .match-team-label.dire { color: #aa5050; } body.page-friendly .player-row { display: grid; grid-template-columns: 54px minmax(0,1fr) auto 90px; align-items: center; gap: 7px; padding: 6px 7px; margin-bottom: 6px; min-height: 54px; font-size: .8rem; line-height: 1.25; border: 1px solid rgba(255,255,255,.06); border-radius: 7px; background: linear-gradient(135deg, rgba(22,27,38,.96), rgba(12,16,27,.96)); } body.page-friendly .player-row.radiant { border-left: 3px solid #3a9a4a; } body.page-friendly .player-row.dire { border-left: 3px solid #aa5050; } body.page-friendly .player-hero-wrap { position: relative; width: 54px; height: 31px; flex-shrink: 0; } body.page-friendly .hero-icon-sm { width: 54px; height: 31px; object-fit: cover; object-position: center top; border-radius: 4px; background: #2a2a4a; display: block; } body.page-friendly .player-level { position: absolute; left: 2px; bottom: 2px; min-width: 16px; padding: 0 4px; border-radius: 3px; background: rgba(0,0,0,.68); color: #f5c518; font-size: .64rem; line-height: 15px; font-weight: 700; text-align: center; } body.page-friendly .player-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; } body.page-friendly .player-name-line { display: flex; align-items: center; gap: 5px; min-width: 0; } body.page-friendly .player-name-line .player-name, body.page-friendly .player-name-line .player-name-btn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #ddd; font-weight: 700; } body.page-friendly .player-hero-name { color: #777; font-size: .68rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.page-friendly .player-statline { display: flex; align-items: center; justify-content: space-between; gap: 4px 12px; color: #888; font-size: .72rem; flex-wrap: wrap; min-width: 0; } body.page-friendly .player-statline .val { color: #ddd; font-weight: 600; } body.page-friendly .player-stat-side { display: inline-flex; align-items: center; gap: 9px; min-width: 0; flex: 0 1 auto; } body.page-friendly .player-stat-side.right { justify-content: flex-end; margin-left: auto; } body.page-friendly .player-stat-chip { display: inline-flex; align-items: center; gap: 4px; } body.page-friendly .player-stat-icon { width: auto; min-width: 0; height: auto; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; border-radius: 0; color: #d6a84a; font-size: .78rem; font-weight: 800; line-height: 1; } body.page-friendly .player-stat-icon.econ { color: #d6a84a; } body.page-friendly .player-stat-icon.damage { color: #d45d5d; } @media (max-width: 760px) { body.page-friendly .player-stat-side.right { flex-basis: 100%; } } body.page-friendly .player-kda { color: #aaa; white-space: nowrap; font-weight: 700; } body.page-friendly .player-kda .k { color: var(--niuma-kill); } body.page-friendly .player-kda .d { color: var(--niuma-death); } body.page-friendly .player-kda .a { color: var(--niuma-assist); } body.page-friendly .player-extra { display: flex; flex-direction: column; justify-content: center; gap: 2px; align-items: center; } body.page-friendly .aghs-icon { width: 20px; height: 20px; object-fit: contain; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); } body.page-friendly .neutral-slot, body.page-friendly .item-slot { width: 28px; height: 20px; border-radius: 3px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.06); overflow: hidden; } body.page-friendly .neutral-slot { border-radius: 50%; width: 20px; height: 20px; } body.page-friendly .item-icon, body.page-friendly .neutral-slot img { width: 100%; height: 100%; object-fit: cover; display: block; } body.page-friendly .p-items { display: grid; grid-template-columns: repeat(3, 28px); grid-auto-rows: 20px; gap: 2px; } body.page-friendly .player-inventories { display: flex; flex-direction: column; gap: 4px; } body.page-friendly .bear-inventory { display: flex; flex-direction: column; gap: 2px; padding-top: 3px; border-top: 1px solid rgba(201,162,85,.25); } body.page-friendly .bear-label { color: #c9a255; font-size: .62rem; font-weight: 700; line-height: 1; } body.page-friendly .match-pending { color: #888; font-size: .85rem; font-style: italic; } /* Refresh status */ body.page-friendly .refresh-msg { font-size: .82rem; padding: 6px 12px; border-radius: 6px; } body.page-friendly .refresh-msg.ok { color: var(--niuma-win); background: rgba(95,221,95,.08); } body.page-friendly .refresh-msg.err { color: var(--niuma-loss); background: rgba(221,95,95,.08); } /* Excluded match */ body.page-friendly .match-card.excluded { opacity: .45; filter: grayscale(.5); } body.page-friendly .excluded-badge { font-size: .75rem; font-weight: 700; color: #ff6666; background: rgba(255,60,60,.1); border-radius: 6px; padding: 1px 8px; } body.page-friendly .exclude-btn { background: none; border: 1px solid rgba(255,255,255,.15); border-radius: 5px; color: #888; font-size: .75rem; padding: 2px 9px; cursor: pointer; margin-left: auto; transition: border-color .2s, color .2s; } body.page-friendly .exclude-btn:hover { border-color: var(--niuma-loss); color: #ff6666; } body.page-friendly .exclude-btn.is-excluded { border-color: #2d7a3a; color: var(--niuma-win); } body.page-friendly .exclude-btn.is-excluded:hover { border-color: var(--niuma-win); } body.page-friendly .refresh-btn { background: none; border: 1px solid rgba(255,255,255,.12); border-radius: 5px; color: #888; font-size: .75rem; padding: 2px 9px; cursor: pointer; margin-left: 4px; transition: border-color .2s, color .2s; } body.page-friendly .refresh-btn:hover { border-color: #5b9bd5; color: #7ec8ff; } body.page-friendly .refresh-btn:disabled { opacity: .4; cursor: default; } /* Player clickable name */ body.page-friendly .player-name-btn { background: none; border: none; padding: 0; cursor: pointer; color: #ccc; font-size: inherit; text-align: left; line-height: inherit; } body.page-friendly .player-name-btn:hover { color: #6c8cff; } body.page-friendly .stats-name-link { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #6c8cff; text-decoration: none; cursor: pointer; font-size: .88rem; } body.page-friendly .stats-name-link:hover { color: #9cb3ff; } /* Player detail modal */ body.page-friendly .pdetail-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.75); display: flex; align-items: center; justify-content: center; z-index: 300; } body.page-friendly .pdetail-box { background: #1a1a2e; border: 1px solid #333; border-radius: 12px; padding: 24px; width: 96%; max-width: 700px; max-height: 86vh; overflow-y: auto; position: relative; } body.page-friendly .pdetail-title { font-size: 1.05rem; font-weight: 700; color: #fff; margin-bottom: 4px; padding-right: 30px; } body.page-friendly .pdetail-steam-id { color:#7f8798; font-size:.8rem; margin-bottom:14px; } body.page-friendly .pdetail-steam-id a { color:#7da7ff; text-decoration:none; } body.page-friendly .pdetail-steam-id a:hover { color:#a9c2ff; text-decoration:underline; } body.page-friendly .pdetail-close { position: absolute; top: 12px; right: 14px; background: none; border: none; color: #888; font-size: 1.2rem; cursor: pointer; line-height: 1; } body.page-friendly .pdetail-close:hover { color: #fff; } body.page-friendly .pdetail-tabs { display: flex; gap: 0; border-bottom: 2px solid #2a2a4a; margin-bottom: 14px; } body.page-friendly .pdetail-tab { padding: 7px 22px; cursor: pointer; color: #888; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -2px; font-size: .88rem; } body.page-friendly .pdetail-tab.active { color: #6c8cff; border-bottom-color: #6c8cff; } body.page-friendly .pdetail-panel { display: none; } body.page-friendly .pdetail-panel.active { display: block; } body.page-friendly .detail-table { width: 100%; border-collapse: collapse; font-size: .86rem; } body.page-friendly .detail-table th { padding: 7px 10px; color: #888; font-size: .78rem; border-bottom: 1px solid #2a2a4a; text-align: center; font-weight: 600; white-space: nowrap; } body.page-friendly .detail-table th.left { text-align: left; } body.page-friendly .detail-table td { padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,.04); color: #ccc; text-align: center; white-space: nowrap; } body.page-friendly .detail-table td.left { text-align: left; } body.page-friendly .detail-table tr:last-child td { border-bottom: none; } body.page-friendly .detail-table tr:hover td { background: rgba(108,140,255,.05); } body.page-friendly .hero-icon-md { width: 56px; height: 32px; object-fit: cover; object-position: center top; border-radius: 3px; background: #2a2a4a; vertical-align: middle; margin-right: 6px; flex-shrink: 0; } body.page-friendly .relation-section-title { font-size: .85rem; font-weight: 700; color: #9aa6d6; margin: 0 0 8px; } /* Player matches in detail */ body.page-friendly .pmatch-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.04); } body.page-friendly .pmatch-item:last-child { border-bottom: none; } body.page-friendly .pmatch-hero-img { width: 44px; height: 25px; object-fit: cover; border-radius: 3px; flex-shrink: 0; background: #2a2a4a; } body.page-friendly .pmatch-info { flex: 1; min-width: 0; } body.page-friendly .pmatch-result { font-size: .85rem; font-weight: 600; } body.page-friendly .pmatch-result.win { color: var(--niuma-win); } body.page-friendly .pmatch-result.loss { color: var(--niuma-loss); } body.page-friendly .pmatch-meta { font-size: .78rem; color: #777; margin-top: 2px; } body.page-friendly .pmatch-kda { font-size: .82rem; color: #aaa; } body.page-friendly .pmatch-kda .k { color: var(--niuma-kill); } body.page-friendly .pmatch-kda .d { color: var(--niuma-death); } body.page-friendly .pmatch-kda .a { color: var(--niuma-assist); } .friendly-player-detail.pdetail-overlay { position:fixed; inset:0; background:rgba(0,0,0,.75); display:flex; align-items:center; justify-content:center; z-index:950; } .friendly-player-detail .pdetail-box { box-sizing:border-box; background:#1a1a2e; border:1px solid #333; border-radius:8px; padding:24px; width:96%; max-width:700px; max-height:86vh; overflow-y:auto; position:relative; color:#e0e0e0; } .friendly-player-detail .pdetail-title { font-size:1.05rem; font-weight:700; color:#fff; margin-bottom:4px; padding-right:30px; } .friendly-player-detail .pdetail-steam-id { color:#7f8798; font-size:.8rem; margin-bottom:14px; } .friendly-player-detail .pdetail-steam-id a { color:#7da7ff; text-decoration:none; } .friendly-player-detail .pdetail-steam-id a:hover { color:#a9c2ff; text-decoration:underline; } .friendly-player-detail .pdetail-close { position:absolute; top:12px; right:14px; padding:0; background:none; border:0; color:#888; font-size:1.2rem; cursor:pointer; line-height:1; } .friendly-player-detail .pdetail-close:hover { color:#fff; } .friendly-player-detail .pdetail-tabs { display:flex; gap:0; border-bottom:2px solid #2a2a4a; margin-bottom:14px; } .friendly-player-detail .pdetail-tab { padding:7px 22px; cursor:pointer; color:#888; font-weight:600; border-bottom:2px solid transparent; margin-bottom:-2px; font-size:.88rem; } .friendly-player-detail .pdetail-tab.active { color:#6c8cff; border-bottom-color:#6c8cff; } .friendly-player-detail .pdetail-panel { display:none; } .friendly-player-detail .pdetail-panel.active { display:block; } .friendly-player-detail .loading, .friendly-player-detail .empty-msg { text-align:center; color:#888; padding:40px 12px; font-size:.95rem; } .friendly-player-detail .friendly-no-records { color:#aab2c3; } .friendly-player-detail .detail-table { width:100%; border-collapse:collapse; font-size:.86rem; } .friendly-player-detail .detail-table th { padding:7px 10px; color:#888; font-size:.78rem; border-bottom:1px solid #2a2a4a; text-align:center; font-weight:600; white-space:nowrap; } .friendly-player-detail .detail-table th.left, .friendly-player-detail .detail-table td.left { text-align:left; } .friendly-player-detail .detail-table td { padding:6px 10px; border-bottom:1px solid rgba(255,255,255,.04); color:#ccc; text-align:center; white-space:nowrap; } .friendly-player-detail .detail-table tr:last-child td { border-bottom:0; } .friendly-player-detail .detail-table tr:hover td { background:rgba(108,140,255,.05); } .friendly-player-detail .hero-icon-md { width:56px; height:32px; object-fit:cover; object-position:center top; border-radius:3px; background:#2a2a4a; vertical-align:middle; margin-right:6px; } .friendly-player-detail .wr-high, .friendly-player-detail .stat-win { color:var(--niuma-win); font-weight:700; } .friendly-player-detail .wr-mid { color:#e0e0e0; font-weight:600; } .friendly-player-detail .wr-low, .friendly-player-detail .stat-loss { color:var(--niuma-loss); font-weight:600; } .friendly-player-detail .relation-section { margin-bottom:22px; } .friendly-player-detail .relation-section-title { font-size:.85rem; font-weight:700; color:#9aa6d6; margin-bottom:8px; } .friendly-player-detail .relation-empty { color:#666; font-size:.85rem; margin-bottom:16px; } .friendly-player-detail .pmatch-item { display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.04); } .friendly-player-detail .pmatch-item:last-child { border-bottom:0; } .friendly-player-detail .pmatch-hero-img { width:44px; height:25px; object-fit:cover; border-radius:3px; flex-shrink:0; background:#2a2a4a; } .friendly-player-detail .pmatch-info { flex:1; min-width:0; } .friendly-player-detail .pmatch-result { font-size:.85rem; font-weight:600; } .friendly-player-detail .pmatch-result.win { color:var(--niuma-win); } .friendly-player-detail .pmatch-result.loss { color:var(--niuma-loss); } .friendly-player-detail .pmatch-side { color:#aaa; } .friendly-player-detail .pmatch-id { color:#777; font-size:.78rem; } .friendly-player-detail .pmatch-meta { font-size:.78rem; color:#777; margin-top:2px; } .friendly-player-detail .pmatch-kda { font-size:.82rem; color:#aaa; } .friendly-player-detail .pmatch-kda .k { color:var(--niuma-kill); } .friendly-player-detail .pmatch-kda .d { color:var(--niuma-death); } .friendly-player-detail .pmatch-kda .a { color:var(--niuma-assist); } body.page-tournament-view .stats-name-link { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #6c8cff; text-decoration: none; cursor: pointer; font-size: .88rem; font-weight: 700; } body.page-tournament-view .stats-name-link:hover { color: #9cb3ff; } body.page-tournament-view .wr-high { color: var(--niuma-win); font-weight: 700; } body.page-tournament-view .wr-mid { color: #e0e0e0; font-weight: 600; } body.page-tournament-view .wr-low { color: var(--niuma-loss); font-weight: 600; } body.page-tournament-view .pdetail-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.75); display: flex; align-items: center; justify-content: center; z-index: 300; } body.page-tournament-view .pdetail-box { background: #1a1a2e; border: 1px solid #333; border-radius: 12px; padding: 24px; width: 96%; max-width: 700px; max-height: 86vh; overflow-y: auto; position: relative; } body.page-tournament-view .pdetail-title { font-size: 1.05rem; font-weight: 700; color: #fff; margin-bottom: 14px; padding-right: 30px; } body.page-tournament-view .pdetail-close { position: absolute; top: 12px; right: 14px; background: none; border: none; color: #888; font-size: 1.2rem; cursor: pointer; line-height: 1; } body.page-tournament-view .pdetail-close:hover { color: #fff; } body.page-tournament-view .pdetail-tabs { display: flex; gap: 0; border-bottom: 2px solid #2a2a4a; margin-bottom: 14px; } body.page-tournament-view .pdetail-tab { padding: 7px 22px; cursor: pointer; color: #888; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -2px; font-size: .88rem; } body.page-tournament-view .pdetail-tab.active { color: #6c8cff; border-bottom-color: #6c8cff; } body.page-tournament-view .pdetail-panel { display: none; } body.page-tournament-view .pdetail-panel.active { display: block; } body.page-tournament-view .detail-table { width: 100%; border-collapse: collapse; font-size: .86rem; } body.page-tournament-view .detail-table th { padding: 7px 10px; color: #888; font-size: .78rem; border-bottom: 1px solid #2a2a4a; text-align: center; font-weight: 600; white-space: nowrap; } body.page-tournament-view .detail-table th.left { text-align: left; } body.page-tournament-view .detail-table td { padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,.04); color: #ccc; text-align: center; white-space: nowrap; } body.page-tournament-view .detail-table td.left { text-align: left; } body.page-tournament-view .detail-table tr:last-child td { border-bottom: none; } body.page-tournament-view .detail-table tr:hover td { background: rgba(108,140,255,.05); } body.page-tournament-view .hero-icon-md { width: 56px; height: 32px; object-fit: cover; object-position: center top; border-radius: 3px; background: #2a2a4a; vertical-align: middle; margin-right: 6px; flex-shrink: 0; } body.page-tournament-view .relation-section-title { font-size: .85rem; font-weight: 700; color: #9aa6d6; margin: 0 0 8px; } body.page-tournament-view .pmatch-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.04); } body.page-tournament-view .pmatch-item:last-child { border-bottom: none; } body.page-tournament-view .pmatch-hero-img { width: 44px; height: 25px; object-fit: cover; border-radius: 3px; flex-shrink: 0; background: #2a2a4a; } body.page-tournament-view .pmatch-info { flex: 1; min-width: 0; } body.page-tournament-view .pmatch-result { font-size: .85rem; font-weight: 600; } body.page-tournament-view .pmatch-result.win { color: var(--niuma-win); } body.page-tournament-view .pmatch-result.loss { color: var(--niuma-loss); } body.page-tournament-view .pmatch-meta { font-size: .78rem; color: #777; margin-top: 2px; } body.page-tournament-view .pmatch-kda { font-size: .82rem; color: #aaa; } body.page-tournament-view .pmatch-kda .k { color: var(--niuma-kill); } body.page-tournament-view .pmatch-kda .d { color: var(--niuma-death); } body.page-tournament-view .pmatch-kda .a { color: var(--niuma-assist); } /* index */ body.page-index * { box-sizing: border-box; margin: 0; padding: 0; } body.page-index { font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: #0a0a18 url('/static/bg.png') center top / cover no-repeat fixed; color: #e0e0e0; min-height: 100vh; } body.page-index .container { max-width: 720px; margin: 0 auto; padding: 32px 16px; background: rgba(10,10,24,.85); min-height: 100vh; border-left: 1px solid rgba(255,255,255,.05); border-right: 1px solid rgba(255,255,255,.05); } body.page-index h1 { text-align: center; font-size: 2.4rem; margin-bottom: 6px; color: transparent; font-weight: 900; letter-spacing: 6px; background: linear-gradient(135deg, #6c8cff 0%, #c8a2ff 50%, #ff8888 100%); -webkit-background-clip: text; background-clip: text; } body.page-index .title-sub { text-align: center; font-size: .75rem; color: #888; margin-bottom: 28px; letter-spacing: 6px; text-transform: uppercase; } body.page-index .nav { text-align: center; margin-bottom: 24px; padding: 10px 0; border-radius: 8px; } body.page-index .nav a { color: #fff; text-decoration: none; margin: 0 12px; font-size: .95rem; opacity: .85; } body.page-index .nav a:hover { opacity: 1; text-decoration: underline; } body.page-index .tournament-banner { background: rgba(22,33,62,.9); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; margin-bottom: 16px; display: flex; flex-direction: column; overflow: hidden; text-decoration: none; transition: border-color .2s, background .2s; } body.page-index .tournament-banner:hover { border-color: rgba(255,255,255,.3); background: rgba(22,33,62,.95); } body.page-index .tournament-banner .tb-poster { width: 100%; height: 120px; overflow: hidden; flex-shrink: 0; } body.page-index .tournament-banner .tb-poster img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; } body.page-index .tournament-banner .tb-body { display: flex; align-items: center; gap: 16px; padding: 14px 18px; } body.page-index .tournament-banner .tb-icon { font-size: 2rem; } body.page-index .tournament-banner .tb-info { flex: 1; } body.page-index .tournament-banner .tb-name { font-size: 1.1rem; font-weight: 700; color: #fff; } body.page-index .tournament-banner .tb-desc { font-size: .85rem; color: #aaa; margin-top: 2px; } body.page-index .tournament-banner .tb-status { font-size: .75rem; color: var(--niuma-win); background: rgba(95,221,95,.15); padding: 3px 10px; border-radius: 10px; font-weight: 600; white-space: nowrap; } body.page-index .tournament-banner .tb-arrow { color: #fff; font-size: 1.2rem; opacity: .6; } body.page-index .section-title { font-size: .9rem; color: #ccc; margin-bottom: 10px; font-weight: 600; text-transform: uppercase; } /* login */ body.page-login * { box-sizing: border-box; margin: 0; padding: 0; } body.page-login { font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: #0a0a18 url('/static/bg.png') center top / cover no-repeat fixed; color: #e0e0e0; min-height: 100vh; display: flex; align-items: center; justify-content: center; } body.page-login .login-card { background: #16213e; border-radius: 12px; padding: 40px 32px; width: 100%; max-width: 360px; box-shadow: 0 8px 32px rgba(0,0,0,.4); } body.page-login h1 { text-align: center; font-size: 1.3rem; margin-bottom: 24px; color: #fff; } body.page-login label { display: block; font-size: .9rem; color: #999; margin-bottom: 6px; } body.page-login input[type="password"] { width: 100%; padding: 12px 14px; font-size: 1rem; border: 1px solid #333; border-radius: 8px; background: #0f1a30; color: #e0e0e0; outline: none; } body.page-login input[type="password"]:focus { border-color: #4a6cf7; } body.page-login .btn { display: block; width: 100%; margin-top: 20px; padding: 14px; font-size: 1rem; font-weight: 600; border: none; border-radius: 8px; cursor: pointer; color: #fff; background: #4a6cf7; transition: background .2s; } body.page-login .btn:hover { background: #3a5ce5; } body.page-login .error { margin-top: 12px; padding: 10px; background: #3a1a1a; border: 1px solid #662222; border-radius: 8px; color: #ff8888; text-align: center; font-size: .9rem; } body.page-login .back { text-align: center; margin-top: 16px; } body.page-login .back a { color: #fff; opacity: .85; text-decoration: none; font-size: .9rem; } body.page-login .back a:hover { opacity: 1; text-decoration: underline; } /* player */ body.page-player * { box-sizing: border-box; margin: 0; padding: 0; } body.page-player { font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: #0a0a18 url('/static/bg.png') center top / cover no-repeat fixed; color: #e0e0e0; min-height: 100vh; } body.page-player .container { max-width: 960px; margin: 0 auto; padding: 16px 16px 32px; background: rgba(10,10,24,.85); min-height: 100vh; border-left: 1px solid rgba(255,255,255,.05); border-right: 1px solid rgba(255,255,255,.05); } body.page-player .sticky-header { position: sticky; top: 0; z-index: 10; background: #1a1a2e; padding: 12px 0 0; margin: 0 -16px; padding-left: 16px; padding-right: 16px; border-bottom: 1px solid #333; } body.page-player .sticky-header h1 { text-align: center; font-size: 1.3rem; margin-bottom: 4px; color: #fff; } body.page-player .sticky-header .nav { text-align: center; margin-top: 6px; } body.page-player .sticky-header .nav a { color: #fff; opacity: .85; text-decoration: none; margin: 0 12px; font-size: .9rem; } body.page-player .sticky-header .nav a:hover { opacity: 1; text-decoration: underline; } body.page-player .tabs { display: flex; justify-content: center; gap: 0; margin-top: 10px; } body.page-player .tab-btn { background: none; border: none; color: #888; font-size: .9rem; padding: 8px 20px; cursor: pointer; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; } body.page-player .tab-btn:hover { color: #ccc; } body.page-player .tab-btn.active { color: #6c8cff; border-bottom-color: #6c8cff; } body.page-player .section { margin-bottom: 32px; } body.page-player .section-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #333; } body.page-player .section-title.teammate { color: #5fdd5f; } body.page-player .section-title.opponent { color: #dd5f5f; } body.page-player .section-title.hero-title { color: #c8a2ff; } body.page-player table { width: 100%; border-collapse: collapse; } body.page-player th, body.page-player td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #2a2a4a; } body.page-player th { color: #999; font-size: .85rem; font-weight: 600; cursor: pointer; user-select: none; position: sticky; top: var(--header-h, 90px); background: #1a1a2e; z-index: 5; } body.page-player th:hover { color: #ccc; } body.page-player td { font-size: .95rem; } body.page-player tr:hover td { background: rgba(108,140,255,.06); } body.page-player .win { color: var(--niuma-win); } body.page-player .loss { color: var(--niuma-loss); } body.page-player .wr-high { color: var(--niuma-win); } body.page-player .wr-mid { color: #ddd; } body.page-player .wr-low { color: var(--niuma-loss); } body.page-player .player-link { color: #6c8cff; text-decoration: none; } body.page-player .player-link:hover { text-decoration: underline; } body.page-player .empty-msg { text-align: center; color: #666; padding: 40px; } body.page-player .loading { text-align: center; color: #888; padding: 40px; } body.page-player .hero-img { width: 36px; height: 20px; object-fit: cover; border-radius: 3px; vertical-align: middle; margin-right: 8px; background: #2a2a4a; } body.page-player .match-card { background: #16213e; border-radius: 10px; padding: 16px 20px; margin-bottom: 12px; position: relative; } body.page-player .match-date { font-size: .85rem; color: #888; margin-bottom: 6px; } body.page-player .match-winner { font-size: .9rem; font-weight: 600; margin-bottom: 8px; } body.page-player .match-winner.radiant { color: var(--niuma-win); } body.page-player .match-winner.dire { color: var(--niuma-loss); } body.page-player .match-teams { display: flex; gap: 24px; } body.page-player .match-team { flex: 1; } body.page-player .match-team-label { font-size: .8rem; color: #888; margin-bottom: 4px; } body.page-player .match-team-label.t1 { color: #5fdd5f88; } body.page-player .match-team-label.t2 { color: #dd5f5f88; } body.page-player .match-players { font-size: .9rem; line-height: 1.8; } body.page-player .hero-icon { width: 32px; height: 18px; object-fit: cover; border-radius: 3px; vertical-align: middle; margin-right: 4px; background: #2a2a4a; } body.page-player .match-actions { position: absolute; top: 12px; right: 14px; } body.page-player .match-actions button { background: none; border: 1px solid #444; border-radius: 6px; color: #999; padding: 4px 10px; cursor: pointer; font-size: .8rem; } body.page-player .match-actions button:hover { border-color: #6c8cff; color: #fff; } body.page-player .img-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.8); display: flex; align-items: center; justify-content: center; z-index: 200; cursor: zoom-out; } body.page-player .img-modal-overlay img { max-width: 95vw; max-height: 90vh; border-radius: 8px; cursor: default; } body.page-player .highlight-name { font-weight: 700; color: #fff; } body.page-player .match-filter { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; } body.page-player .match-filter label { font-size: .85rem; color: #999; } body.page-player .match-filter input { background: #16213e; border: 1px solid #333; border-radius: 6px; padding: 5px 8px; color: #e0e0e0; font-size: .85rem; } body.page-player .match-filter input:focus { outline: none; border-color: #4a6cf7; } body.page-player .match-filter button { background: none; border: 1px solid #444; border-radius: 6px; color: #999; padding: 5px 12px; cursor: pointer; font-size: .85rem; transition: .2s; } body.page-player .match-filter button:hover { border-color: #6c8cff; color: #6c8cff; } body.page-player .match-filter button.active { background: #4a6cf7; border-color: #4a6cf7; color: #fff; } /* Alias panel */ body.page-player .alias-box { background: #16213e; border-radius: 10px; padding: 16px 20px; margin-bottom: 12px; } body.page-player .alias-box-title { font-size: .95rem; font-weight: 700; color: #fff; margin-bottom: 10px; } body.page-player .alias-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } body.page-player .alias-tag { display: inline-flex; align-items: center; gap: 4px; background: #2a2a4a; border-radius: 6px; padding: 4px 10px; font-size: .85rem; } body.page-player .alias-tag .rm { cursor: pointer; color: #888; font-size: .75rem; margin-left: 2px; } body.page-player .alias-tag .rm:hover { color: #ff6666; } body.page-player .alias-add-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } body.page-player .alias-add-row input { flex: 1 1 160px; min-width: 0; background: #0f172a; border: 1.5px solid #4a5568; border-radius: 6px; padding: 8px 12px; color: #e0e0e0; font-size: 1rem; -webkit-appearance: none; appearance: none; } body.page-player .alias-add-row input:focus { outline: none; border-color: #4a6cf7; box-shadow: 0 0 0 2px rgba(74,108,247,.25); } body.page-player .alias-add-row button { flex-shrink: 0; background: #4a6cf7; border: none; border-radius: 6px; color: #fff; padding: 8px 18px; cursor: pointer; font-size: .95rem; } body.page-player .alias-add-row button:hover { background: #3a5ce7; } body.page-player .alias-note { font-size: .8rem; color: #888; padding: 8px 0; } /* signup */ body.page-signup * { box-sizing: border-box; margin: 0; padding: 0; } body.page-signup { font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: #0a0a18 url('/static/bg.png') center top / cover no-repeat fixed; color: #e0e0e0; min-height: 100vh; } body.page-signup .container { max-width: 800px; margin: 0 auto; padding: 32px 16px; } body.page-signup h1 { text-align: center; font-size: 1.4rem; margin-bottom: 6px; color: #fff; } body.page-signup .subtitle { text-align: center; color: #999; font-size: .9rem; margin-bottom: 24px; } body.page-signup .nav { text-align: center; margin-bottom: 24px; } body.page-signup .nav a { color: #fff; opacity: .85; text-decoration: none; margin: 0 12px; font-size: .95rem; } body.page-signup .nav a:hover { opacity: 1; text-decoration: underline; } body.page-signup .signup-form { background: #16213e; border-radius: 10px; padding: 20px; margin-bottom: 24px; } body.page-signup .form-title { font-size: 1rem; font-weight: 700; margin-bottom: 14px; color: #fff; } body.page-signup .form-row { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 12px; flex-wrap: wrap; } body.page-signup .form-group { display: flex; flex-direction: column; gap: 4px; } body.page-signup .form-group label { font-size: .8rem; color: #999; } body.page-signup .form-group input[type="text"] { background: #1a1a2e; border: 1px solid #333; border-radius: 6px; padding: 8px 10px; color: #e0e0e0; font-size: .9rem; } body.page-signup .form-group input[type="text"]:focus { outline: none; border-color: #4a6cf7; } body.page-signup .pos-group { display: flex; flex-direction: column; gap: 4px; } body.page-signup .pos-group label.title { font-size: .8rem; color: #999; } body.page-signup .pos-checks { display: flex; gap: 8px; } body.page-signup .pos-check { display: flex; align-items: center; gap: 3px; } body.page-signup .pos-check input[type="checkbox"] { accent-color: #4a6cf7; width: 18px; height: 18px; cursor: pointer; } body.page-signup .pos-check label { font-size: .9rem; cursor: pointer; color: #ccc; user-select: none; } body.page-signup .btn { display: inline-block; padding: 10px 20px; font-size: .95rem; font-weight: 600; border: none; border-radius: 8px; cursor: pointer; color: #fff; background: #4a6cf7; transition: background .2s; } body.page-signup .btn:hover { background: #3a5ce5; } body.page-signup .btn:disabled { background: #555; cursor: not-allowed; } body.page-signup .btn-sm { padding: 6px 14px; font-size: .85rem; } body.page-signup .msg { margin-top: 10px; padding: 10px; border-radius: 8px; font-size: .9rem; text-align: center; } body.page-signup .msg-ok { background: #1a3a1a; border: 1px solid #2d6a3f; color: #7fff7f; } body.page-signup .msg-err { background: #3a1a1a; border: 1px solid #662222; color: #ff8888; } /* Table */ body.page-signup .signup-table { width: 100%; border-collapse: collapse; margin-top: 8px; } body.page-signup .signup-table th, body.page-signup .signup-table td { padding: 10px 12px; text-align: center; border-bottom: 1px solid #2a2a4a; } body.page-signup .signup-table th { color: #999; font-size: .85rem; font-weight: 600; background: #1a1a2e; position: sticky; top: 0; z-index: 5; } body.page-signup .signup-table th:first-child, body.page-signup .signup-table td:first-child { text-align: left; } body.page-signup .signup-table td { font-size: .9rem; } body.page-signup .signup-table tr:hover td { background: rgba(108,140,255,.06); } body.page-signup .check-mark { color: #5fdd5f; font-size: 1.1rem; } body.page-signup .signup-count { text-align: center; color: #888; font-size: .9rem; margin-bottom: 12px; } body.page-signup .del-btn { background: none; border: none; color: #884444; cursor: pointer; font-size: .95rem; } body.page-signup .del-btn:hover { color: #ff4444; } body.page-signup .edit-btn { background: none; border: none; color: #6c8cff; cursor: pointer; font-size: .85rem; } body.page-signup .edit-btn:hover { color: #fff; } body.page-signup .empty-msg { text-align: center; color: #666; padding: 40px; } /* Inline edit */ body.page-signup .edit-input { background: #1a1a2e; border: 1px solid #4a6cf7; border-radius: 4px; padding: 4px 6px; color: #e0e0e0; font-size: .85rem; width: 100%; } body.page-signup .edit-cb { accent-color: #4a6cf7; width: 16px; height: 16px; } body.page-signup .edit-actions button { background: none; border: 1px solid #444; border-radius: 4px; color: #999; padding: 2px 8px; cursor: pointer; font-size: .8rem; margin: 0 2px; } body.page-signup .edit-actions button:hover { border-color: #6c8cff; color: #fff; } /* stats */ body.page-stats * { box-sizing: border-box; margin: 0; padding: 0; } body.page-stats { font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: #0a0a18 url('/static/bg.png') center top / cover no-repeat fixed; color: #e0e0e0; min-height: 100vh; } body.page-stats .container { max-width: 960px; margin: 0 auto; padding: 32px 16px; background: rgba(10,10,24,.85); min-height: 100vh; border-left: 1px solid rgba(255,255,255,.05); border-right: 1px solid rgba(255,255,255,.05); } body.page-stats h1 { text-align: center; font-size: 1.5rem; margin-bottom: 8px; color: #fff; } body.page-stats .nav { text-align: center; margin-bottom: 24px; } body.page-stats .nav a { color: #fff; opacity: .85; text-decoration: none; margin: 0 12px; font-size: .95rem; } body.page-stats .nav a:hover { opacity: 1; text-decoration: underline; } body.page-stats .tabs { display: flex; gap: 0; margin-bottom: 24px; border-bottom: 2px solid #333; } body.page-stats .tab { padding: 10px 24px; cursor: pointer; color: #999; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: .2s; } body.page-stats .tab:hover { color: #ccc; } body.page-stats .tab.active { color: #6c8cff; border-bottom-color: #6c8cff; } body.page-stats .panel { display: none; } body.page-stats .panel.active { display: block; } /* Stats table */ body.page-stats table { width: 100%; border-collapse: collapse; } body.page-stats th, body.page-stats td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #2a2a4a; } body.page-stats th { color: #999; font-size: .85rem; font-weight: 600; text-transform: uppercase; cursor: pointer; user-select: none; position: sticky; top: 0; background: #1a1a2e; z-index: 5; } body.page-stats th:hover { color: #ccc; } body.page-stats th .arrow { font-size: .7rem; margin-left: 4px; } body.page-stats td { font-size: .95rem; } body.page-stats tr:hover td { background: rgba(108,140,255,.06); } body.page-stats .win { color: var(--niuma-win); } body.page-stats .loss { color: var(--niuma-loss); } body.page-stats .wr-high { color: var(--niuma-win); } body.page-stats .wr-mid { color: #ddd; } body.page-stats .wr-low { color: var(--niuma-loss); } /* Match list */ body.page-stats .match-card { background: #16213e; border-radius: 10px; padding: 16px 20px; margin-bottom: 12px; position: relative; } body.page-stats .match-date { font-size: .85rem; color: #888; margin-bottom: 6px; } body.page-stats .match-winner { font-size: .9rem; font-weight: 600; margin-bottom: 8px; } body.page-stats .match-winner.radiant { color: var(--niuma-win); } body.page-stats .match-winner.dire { color: var(--niuma-loss); } body.page-stats .match-teams { display: flex; gap: 16px; } body.page-stats .match-team { flex: 1; } body.page-stats .match-team-label { font-size: .8rem; color: #888; margin-bottom: 4px; } body.page-stats .match-team-label.t1 { color: #5fdd5f88; } body.page-stats .match-team-label.t2 { color: #dd5f5f88; } body.page-stats .match-players { display: grid; gap: 6px; font-size: .9rem; line-height: 1.35; } body.page-stats .match-player-card { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 46px; padding: 5px 8px; border-radius: 8px; background: rgba(10,10,24,.38); border: 1px solid rgba(255,255,255,.05); } body.page-stats .hero-icon { width: 42px; height: 30px; object-fit: cover; border-radius: 4px; background: #2a2a4a; } body.page-stats .mp-main { min-width: 0; } body.page-stats .mp-name-line { display: flex; align-items: baseline; gap: 6px; min-width: 0; } body.page-stats .mp-name { color: #e8e8f0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.page-stats .mp-hero { color: #6c8cff; font-size: .78rem; white-space: nowrap; } body.page-stats .mp-row { display: flex; align-items: center; gap: 10px; margin-top: 2px; color: #999; font-size: .78rem; white-space: nowrap; } body.page-stats .mp-row .val { color: #d8d8e8; font-weight: 700; } body.page-stats .mp-statline { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2px; color: #999; font-size: .78rem; white-space: nowrap; } body.page-stats .mp-stat-side { display: inline-flex; align-items: center; gap: 10px; } body.page-stats .mp-stat-side.right { justify-content: flex-end; margin-left: auto; } body.page-stats .mp-stat-chip { display: inline-flex; align-items: center; gap: 4px; } body.page-stats .mp-stat-chip .val { color: #d8d8e8; font-weight: 700; } body.page-stats .mp-stat-icon { min-width: 16px; height: 16px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: .62rem; font-weight: 800; line-height: 1; color: #111827; } body.page-stats .mp-stat-icon.econ { background: #d6a84a; } body.page-stats .mp-stat-icon.damage { background: #d45d5d; color: #160909; } body.page-stats .mp-aghs { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); } body.page-stats .match-actions { position: absolute; top: 12px; right: 14px; display: flex; gap: 8px; } body.page-stats .match-actions button { background: none; border: 1px solid #444; border-radius: 6px; color: #999; padding: 4px 10px; cursor: pointer; font-size: .8rem; } body.page-stats .match-actions button:hover { border-color: #888; color: #fff; } body.page-stats .match-actions button.del:hover { border-color: #ff6666; color: #ff6666; } body.page-stats .match-actions button.img-btn { color: #6c8cff; } body.page-stats .match-actions button.img-btn:hover { border-color: #6c8cff; color: #fff; } /* Image modal */ body.page-stats .img-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.8); display: flex; align-items: center; justify-content: center; z-index: 200; cursor: zoom-out; } body.page-stats .img-modal-overlay img { max-width: 95vw; max-height: 90vh; border-radius: 8px; cursor: default; } /* Add match form */ body.page-stats .btn { display: inline-block; padding: 10px 20px; font-size: .95rem; font-weight: 600; border: none; border-radius: 8px; cursor: pointer; color: #fff; background: #4a6cf7; transition: background .2s; } body.page-stats .btn:hover { background: #3a5ce5; } body.page-stats .btn-sm { padding: 6px 14px; font-size: .85rem; } body.page-stats .btn-outline { background: none; border: 1px solid #4a6cf7; color: #6c8cff; } body.page-stats .btn-outline:hover { background: rgba(74,108,247,.1); } body.page-stats .btn-outline.btn-active { background: #4a6cf7; color: #fff; } body.page-stats .form-row { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 12px; flex-wrap: wrap; } body.page-stats .form-group { display: flex; flex-direction: column; gap: 4px; } body.page-stats .form-group label { font-size: .8rem; color: #999; } body.page-stats .form-group input, body.page-stats .form-group select, body.page-stats .form-group textarea { background: #16213e; border: 1px solid #333; border-radius: 6px; padding: 8px 10px; color: #e0e0e0; font-size: .9rem; font-family: inherit; } body.page-stats .form-group textarea { resize: vertical; min-height: 60px; } body.page-stats .form-group input:focus, body.page-stats .form-group select:focus, body.page-stats .form-group textarea:focus { outline: none; border-color: #4a6cf7; } body.page-stats .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 100; } body.page-stats .modal { background: #1a1a2e; border: 1px solid #333; border-radius: 12px; padding: 24px; width: 95%; max-width: 680px; max-height: 90vh; overflow-y: auto; } body.page-stats .modal h2 { font-size: 1.1rem; margin-bottom: 16px; color: #fff; } body.page-stats .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; } body.page-stats .modal-team-label { font-size: .9rem; font-weight: 600; margin: 12px 0 6px; } body.page-stats .modal-team-label.t1 { color: #5fdd5f; } body.page-stats .modal-team-label.t2 { color: #dd5f5f; } body.page-stats .m-player-row { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; } body.page-stats .m-player-row input { background: #16213e; border: 1px solid #333; border-radius: 4px; color: #e0e0e0; padding: 5px 6px; font-size: .85rem; } body.page-stats .m-player-row input:focus { outline: none; border-color: #4a6cf7; } body.page-stats .m-player-row .mp-name { flex: 1; min-width: 0; } body.page-stats .m-player-row .mp-hero { width: 80px; } body.page-stats .m-player-row .mp-kda { width: 36px; text-align: center; } body.page-stats .m-player-row .mp-sep { color: #555; font-size: .8rem; user-select: none; } body.page-stats .m-player-row .mp-del { background: none; border: none; color: #884444; cursor: pointer; font-size: 1rem; padding: 0 2px; } body.page-stats .m-player-row .mp-del:hover { color: #ff4444; } body.page-stats .m-add-btn { background: none; border: 1px dashed rgba(255,255,255,.2); border-radius: 6px; color: #888; cursor: pointer; padding: 3px 0; width: 100%; margin-top: 4px; font-size: .8rem; } body.page-stats .m-add-btn:hover { border-color: #6c8cff; color: #6c8cff; } body.page-stats .empty-msg { text-align: center; color: #666; padding: 40px; } /* Aliases */ body.page-stats .alias-group { background: #16213e; border-radius: 10px; padding: 16px 20px; margin-bottom: 12px; } body.page-stats .alias-primary { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 8px; } body.page-stats .alias-tags { display: flex; flex-wrap: wrap; gap: 6px; } body.page-stats .alias-tag { display: inline-flex; align-items: center; gap: 4px; background: #2a2a4a; border-radius: 6px; padding: 4px 10px; font-size: .85rem; } body.page-stats .alias-tag .remove { cursor: pointer; color: #888; font-size: .75rem; margin-left: 2px; } body.page-stats .alias-tag .remove:hover { color: #ff6666; } body.page-stats .alias-sub { color: #999; font-size: .8rem; } body.page-stats .name-cell { position: relative; } body.page-stats .alias-tip { display: inline-block; margin-left: 4px; color: #888; font-size: .75rem; cursor: default; position: relative; } body.page-stats .alias-tip:hover .alias-tip-text { visibility: visible; opacity: 1; } body.page-stats .alias-tip-text { visibility: hidden; opacity: 0; position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%); background: #222; color: #ccc; padding: 6px 10px; border-radius: 6px; font-size: .8rem; white-space: nowrap; z-index: 20; pointer-events: none; transition: opacity .15s; box-shadow: 0 2px 8px rgba(0,0,0,.4); } body.page-stats .add-alias-row { display: flex; gap: 8px; margin-top: 8px; } body.page-stats .add-alias-row input { flex: 1; background: #1a1a2e; border: 1px solid #333; border-radius: 6px; padding: 6px 10px; color: #e0e0e0; font-size: .85rem; } body.page-stats .add-alias-row input:focus { outline: none; border-color: #4a6cf7; } body.page-stats .add-alias-row button { padding: 6px 12px; } /* Filter bar */ body.page-stats .filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; background: #16213e; border-radius: 10px; padding: 12px 16px; } body.page-stats .filter-bar .form-group { display: flex; flex-direction: column; gap: 3px; } body.page-stats .filter-bar .form-group label { font-size: .75rem; color: #999; } body.page-stats .filter-bar input, body.page-stats .filter-bar select { background: #1a1a2e; border: 1px solid #333; border-radius: 6px; padding: 6px 10px; color: #e0e0e0; font-size: .85rem; font-family: inherit; } body.page-stats .filter-bar input:focus, body.page-stats .filter-bar select:focus { outline: none; border-color: #4a6cf7; } body.page-stats .filter-bar .btn-sm { padding: 6px 14px; font-size: .85rem; align-self: flex-end; } /* Tournament cards */ body.page-stats .tournament-card { background: #16213e; border-radius: 10px; padding: 16px 20px; margin-bottom: 12px; display: flex; align-items: center; gap: 12px; } body.page-stats .tournament-info { flex: 1; } body.page-stats .tournament-name { font-size: 1rem; font-weight: 700; color: #fff; } body.page-stats .tournament-desc { font-size: .85rem; color: #888; margin-top: 3px; } body.page-stats .tournament-count { font-size: .8rem; color: #6c8cff; background: rgba(108,140,255,.12); border-radius: 12px; padding: 2px 10px; white-space: nowrap; } body.page-stats .tournament-actions { display: flex; gap: 6px; } body.page-stats .tournament-actions button { background: none; border: 1px solid #444; border-radius: 6px; color: #999; padding: 4px 10px; cursor: pointer; font-size: .8rem; } body.page-stats .tournament-actions button:hover { border-color: #888; color: #fff; } body.page-stats .tournament-actions button.del:hover { border-color: #ff6666; color: #ff6666; } body.page-stats .match-tournament-tag { display: inline-block; font-size: .75rem; color: #fbbf24; background: rgba(251,191,36,.1); border-radius: 8px; padding: 1px 8px; margin-left: 6px; vertical-align: middle; } /* stats_archive */ body.page-stats-archive * { box-sizing: border-box; margin: 0; padding: 0; } body.page-stats-archive { font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: #0a0a18 url('/static/bg.png') center top / cover no-repeat fixed; color: #e0e0e0; min-height: 100vh; } body.page-stats-archive .container { max-width: 960px; margin: 0 auto; padding: 32px 16px; background: rgba(10,10,24,.85); min-height: 100vh; border-left: 1px solid rgba(255,255,255,.05); border-right: 1px solid rgba(255,255,255,.05); } body.page-stats-archive h1 { text-align: center; font-size: 1.5rem; margin-bottom: 8px; color: #fff; } body.page-stats-archive .nav { text-align: center; margin-bottom: 24px; } body.page-stats-archive .nav a { color: #fff; opacity: .85; text-decoration: none; margin: 0 12px; font-size: .95rem; } body.page-stats-archive .nav a:hover { opacity: 1; text-decoration: underline; } body.page-stats-archive .tabs { display: flex; gap: 0; margin-bottom: 24px; border-bottom: 2px solid #333; } body.page-stats-archive .tab { padding: 10px 24px; cursor: pointer; color: #999; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: .2s; } body.page-stats-archive .tab:hover { color: #ccc; } body.page-stats-archive .tab.active { color: #6c8cff; border-bottom-color: #6c8cff; } body.page-stats-archive .panel { display: none; } body.page-stats-archive .panel.active { display: block; } /* Stats table */ body.page-stats-archive table { width: 100%; border-collapse: collapse; } body.page-stats-archive th, body.page-stats-archive td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #2a2a4a; } body.page-stats-archive th { color: #999; font-size: .85rem; font-weight: 600; text-transform: uppercase; cursor: pointer; user-select: none; position: sticky; top: 0; background: #1a1a2e; z-index: 5; } body.page-stats-archive th:hover { color: #ccc; } body.page-stats-archive th .arrow { font-size: .7rem; margin-left: 4px; } body.page-stats-archive td { font-size: .95rem; } body.page-stats-archive tr:hover td { background: rgba(108,140,255,.06); } body.page-stats-archive .win { color: var(--niuma-win); } body.page-stats-archive .loss { color: var(--niuma-loss); } body.page-stats-archive .wr-high { color: var(--niuma-win); } body.page-stats-archive .wr-mid { color: #ddd; } body.page-stats-archive .wr-low { color: var(--niuma-loss); } /* Match list */ body.page-stats-archive .match-card { background: #16213e; border-radius: 10px; padding: 16px 20px; margin-bottom: 12px; position: relative; } body.page-stats-archive .match-date { font-size: .85rem; color: #888; margin-bottom: 6px; } body.page-stats-archive .match-winner { font-size: .9rem; font-weight: 600; margin-bottom: 8px; } body.page-stats-archive .match-winner.radiant { color: var(--niuma-win); } body.page-stats-archive .match-winner.dire { color: var(--niuma-loss); } body.page-stats-archive .match-teams { display: flex; gap: 24px; } body.page-stats-archive .match-team { flex: 1; } body.page-stats-archive .match-team-label { font-size: .8rem; color: #888; margin-bottom: 4px; } body.page-stats-archive .match-team-label.t1 { color: #5fdd5f88; } body.page-stats-archive .match-team-label.t2 { color: #dd5f5f88; } body.page-stats-archive .match-players { font-size: .9rem; line-height: 1.8; } body.page-stats-archive .hero-icon { width: 32px; height: 18px; object-fit: cover; border-radius: 3px; vertical-align: middle; margin-right: 4px; background: #2a2a4a; } body.page-stats-archive .match-actions { position: absolute; top: 12px; right: 14px; display: flex; gap: 8px; } body.page-stats-archive .match-actions button { background: none; border: 1px solid #444; border-radius: 6px; color: #999; padding: 4px 10px; cursor: pointer; font-size: .8rem; } body.page-stats-archive .match-actions button:hover { border-color: #888; color: #fff; } body.page-stats-archive .match-actions button.del:hover { border-color: #ff6666; color: #ff6666; } body.page-stats-archive .match-actions button.img-btn { color: #6c8cff; } body.page-stats-archive .match-actions button.img-btn:hover { border-color: #6c8cff; color: #fff; } /* Image modal */ body.page-stats-archive .img-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.8); display: flex; align-items: center; justify-content: center; z-index: 200; cursor: zoom-out; } body.page-stats-archive .img-modal-overlay img { max-width: 95vw; max-height: 90vh; border-radius: 8px; cursor: default; } /* Add match form */ body.page-stats-archive .btn { display: inline-block; padding: 10px 20px; font-size: .95rem; font-weight: 600; border: none; border-radius: 8px; cursor: pointer; color: #fff; background: #4a6cf7; transition: background .2s; } body.page-stats-archive .btn:hover { background: #3a5ce5; } body.page-stats-archive .btn-sm { padding: 6px 14px; font-size: .85rem; } body.page-stats-archive .btn-outline { background: none; border: 1px solid #4a6cf7; color: #6c8cff; } body.page-stats-archive .btn-outline:hover { background: rgba(74,108,247,.1); } body.page-stats-archive .btn-outline.btn-active { background: #4a6cf7; color: #fff; } body.page-stats-archive .form-row { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 12px; flex-wrap: wrap; } body.page-stats-archive .form-group { display: flex; flex-direction: column; gap: 4px; } body.page-stats-archive .form-group label { font-size: .8rem; color: #999; } body.page-stats-archive .form-group input, body.page-stats-archive .form-group select, body.page-stats-archive .form-group textarea { background: #16213e; border: 1px solid #333; border-radius: 6px; padding: 8px 10px; color: #e0e0e0; font-size: .9rem; font-family: inherit; } body.page-stats-archive .form-group textarea { resize: vertical; min-height: 60px; } body.page-stats-archive .form-group input:focus, body.page-stats-archive .form-group select:focus, body.page-stats-archive .form-group textarea:focus { outline: none; border-color: #4a6cf7; } body.page-stats-archive .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 100; } body.page-stats-archive .modal { background: #1a1a2e; border: 1px solid #333; border-radius: 12px; padding: 24px; width: 95%; max-width: 680px; max-height: 90vh; overflow-y: auto; } body.page-stats-archive .modal h2 { font-size: 1.1rem; margin-bottom: 16px; color: #fff; } body.page-stats-archive .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; } body.page-stats-archive .modal-team-label { font-size: .9rem; font-weight: 600; margin: 12px 0 6px; } body.page-stats-archive .modal-team-label.t1 { color: #5fdd5f; } body.page-stats-archive .modal-team-label.t2 { color: #dd5f5f; } body.page-stats-archive .m-player-row { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; } body.page-stats-archive .m-player-row input { background: #16213e; border: 1px solid #333; border-radius: 4px; color: #e0e0e0; padding: 5px 6px; font-size: .85rem; } body.page-stats-archive .m-player-row input:focus { outline: none; border-color: #4a6cf7; } body.page-stats-archive .m-player-row .mp-name { flex: 1; min-width: 0; } body.page-stats-archive .m-player-row .mp-hero { width: 80px; } body.page-stats-archive .m-player-row .mp-kda { width: 36px; text-align: center; } body.page-stats-archive .m-player-row .mp-sep { color: #555; font-size: .8rem; user-select: none; } body.page-stats-archive .m-player-row .mp-del { background: none; border: none; color: #884444; cursor: pointer; font-size: 1rem; padding: 0 2px; } body.page-stats-archive .m-player-row .mp-del:hover { color: #ff4444; } body.page-stats-archive .m-add-btn { background: none; border: 1px dashed rgba(255,255,255,.2); border-radius: 6px; color: #888; cursor: pointer; padding: 3px 0; width: 100%; margin-top: 4px; font-size: .8rem; } body.page-stats-archive .m-add-btn:hover { border-color: #6c8cff; color: #6c8cff; } body.page-stats-archive .empty-msg { text-align: center; color: #666; padding: 40px; } /* Aliases */ body.page-stats-archive .alias-group { background: #16213e; border-radius: 10px; padding: 16px 20px; margin-bottom: 12px; } body.page-stats-archive .alias-primary { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 8px; } body.page-stats-archive .alias-tags { display: flex; flex-wrap: wrap; gap: 6px; } body.page-stats-archive .alias-tag { display: inline-flex; align-items: center; gap: 4px; background: #2a2a4a; border-radius: 6px; padding: 4px 10px; font-size: .85rem; } body.page-stats-archive .alias-tag .remove { cursor: pointer; color: #888; font-size: .75rem; margin-left: 2px; } body.page-stats-archive .alias-tag .remove:hover { color: #ff6666; } body.page-stats-archive .alias-sub { color: #999; font-size: .8rem; } body.page-stats-archive .name-cell { position: relative; } body.page-stats-archive .alias-tip { display: inline-block; margin-left: 4px; color: #888; font-size: .75rem; cursor: default; position: relative; } body.page-stats-archive .alias-tip:hover .alias-tip-text { visibility: visible; opacity: 1; } body.page-stats-archive .alias-tip-text { visibility: hidden; opacity: 0; position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%); background: #222; color: #ccc; padding: 6px 10px; border-radius: 6px; font-size: .8rem; white-space: nowrap; z-index: 20; pointer-events: none; transition: opacity .15s; box-shadow: 0 2px 8px rgba(0,0,0,.4); } body.page-stats-archive .add-alias-row { display: flex; gap: 8px; margin-top: 8px; } body.page-stats-archive .add-alias-row input { flex: 1; background: #1a1a2e; border: 1px solid #333; border-radius: 6px; padding: 6px 10px; color: #e0e0e0; font-size: .85rem; } body.page-stats-archive .add-alias-row input:focus { outline: none; border-color: #4a6cf7; } body.page-stats-archive .add-alias-row button { padding: 6px 12px; } /* Filter bar */ body.page-stats-archive .filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; background: #16213e; border-radius: 10px; padding: 12px 16px; } body.page-stats-archive .filter-bar .form-group { display: flex; flex-direction: column; gap: 3px; } body.page-stats-archive .filter-bar .form-group label { font-size: .75rem; color: #999; } body.page-stats-archive .filter-bar input, body.page-stats-archive .filter-bar select { background: #1a1a2e; border: 1px solid #333; border-radius: 6px; padding: 6px 10px; color: #e0e0e0; font-size: .85rem; font-family: inherit; } body.page-stats-archive .filter-bar input:focus, body.page-stats-archive .filter-bar select:focus { outline: none; border-color: #4a6cf7; } body.page-stats-archive .filter-bar .btn-sm { padding: 6px 14px; font-size: .85rem; align-self: flex-end; } /* Tournament cards */ body.page-stats-archive .tournament-card { background: #16213e; border-radius: 10px; padding: 16px 20px; margin-bottom: 12px; display: flex; align-items: center; gap: 12px; } body.page-stats-archive .tournament-info { flex: 1; } body.page-stats-archive .tournament-name { font-size: 1rem; font-weight: 700; color: #fff; } body.page-stats-archive .tournament-desc { font-size: .85rem; color: #888; margin-top: 3px; } body.page-stats-archive .tournament-count { font-size: .8rem; color: #6c8cff; background: rgba(108,140,255,.12); border-radius: 12px; padding: 2px 10px; white-space: nowrap; } body.page-stats-archive .tournament-actions { display: flex; gap: 6px; } body.page-stats-archive .tournament-actions button { background: none; border: 1px solid #444; border-radius: 6px; color: #999; padding: 4px 10px; cursor: pointer; font-size: .8rem; } body.page-stats-archive .tournament-actions button:hover { border-color: #888; color: #fff; } body.page-stats-archive .tournament-actions button.del:hover { border-color: #ff6666; color: #ff6666; } body.page-stats-archive .match-tournament-tag { display: inline-block; font-size: .75rem; color: #fbbf24; background: rgba(251,191,36,.1); border-radius: 8px; padding: 1px 8px; margin-left: 6px; vertical-align: middle; } /* team_detail */ body.page-team-detail * { box-sizing: border-box; margin: 0; padding: 0; } body.page-team-detail { font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: #0a0a18 url('/static/bg.png') center top / cover no-repeat fixed; color: #e0e0e0; min-height: 100vh; } body.page-team-detail .container { max-width: 900px; margin: 0 auto; padding: 32px 16px; background: rgba(10,10,24,.85); min-height: 100vh; border-left: 1px solid rgba(255,255,255,.05); border-right: 1px solid rgba(255,255,255,.05); } body.page-team-detail h1 { text-align: center; font-size: 1.5rem; margin-bottom: 6px; color: #fff; } body.page-team-detail .subtitle { text-align: center; font-size: .9rem; color: #888; margin-bottom: 24px; } body.page-team-detail .nav { text-align: center; margin-bottom: 24px; } body.page-team-detail .nav a { color: #fff; opacity: .85; text-decoration: none; margin: 0 12px; font-size: .95rem; } body.page-team-detail .nav a:hover { opacity: 1; text-decoration: underline; } body.page-team-detail .card { background: #16213e; border-radius: 10px; padding: 20px; margin-bottom: 16px; } body.page-team-detail .card h3 { font-size: 1rem; color: #fff; margin-bottom: 12px; border-bottom: 1px solid #333; padding-bottom: 8px; } body.page-team-detail .team-header { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; } body.page-team-detail .team-icon { width: 100%; text-align: center; margin-bottom: 16px; font-size: 2rem; } body.page-team-detail .team-icon img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,.5); object-fit: cover; } body.page-team-detail .team-info h2 { font-size: 1.3rem; color: #fff; margin-bottom: 4px; } body.page-team-detail .team-info .group-badge { font-size: .85rem; color: #fbbf24; background: rgba(251,191,36,.1); border-radius: 8px; padding: 2px 10px; display: inline-block; } body.page-team-detail .stats-row { display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; } body.page-team-detail .stat-box { background: #1a1a2e; border: 1px solid #333; border-radius: 8px; padding: 12px 16px; text-align: center; min-width: 100px; flex: 1; } body.page-team-detail .stat-box .stat-num { font-size: 1.4rem; font-weight: 700; } body.page-team-detail .stat-box .stat-label { font-size: .75rem; color: #888; margin-top: 2px; } body.page-team-detail .stat-box.win .stat-num { color: var(--niuma-win); } body.page-team-detail .stat-box.lose .stat-num { color: var(--niuma-loss); } body.page-team-detail .stat-box.rate .stat-num { color: var(--niuma-assist); } body.page-team-detail .stat-box.games .stat-num { color: #fbbf24; } body.page-team-detail .roster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } body.page-team-detail .player-card { background: #1a1a2e; border: 1px solid #333; border-radius: 8px; padding: 10px 12px; text-align: center; } body.page-team-detail .player-card .player-name { font-size: .9rem; font-weight: 600; color: #e0e0e0; } body.page-team-detail .player-card .player-role { font-size: .75rem; color: #888; margin-top: 2px; } body.page-team-detail .player-card.captain { border-color: #fbbf24; } body.page-team-detail .player-card.captain .player-role { color: #fbbf24; } body.page-team-detail .player-card.sub { border-color: #555; opacity: .8; } body.page-team-detail .player-card.sub .player-role { color: #666; } body.page-team-detail .match-list { display: flex; flex-direction: column; gap: 8px; } body.page-team-detail .match-item { background: #1a1a2e; border: 1px solid #333; border-radius: 8px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; } body.page-team-detail .match-item .phase-tag { font-size: .7rem; padding: 2px 8px; border-radius: 6px; font-weight: 600; } body.page-team-detail .match-item .phase-tag.group { background: rgba(108,140,255,.1); color: #6c8cff; } body.page-team-detail .match-item .phase-tag.upper { background: rgba(95,221,95,.1); color: #5fdd5f; } body.page-team-detail .match-item .phase-tag.lower { background: rgba(251,191,36,.1); color: #fbbf24; } body.page-team-detail .match-item .phase-tag.grand_final { background: rgba(255,100,100,.1); color: #ff8888; } body.page-team-detail .match-item .match-vs { flex: 1; display: flex; align-items: center; gap: 8px; } body.page-team-detail .match-item .match-vs .opp-name { font-weight: 600; font-size: .95rem; } body.page-team-detail .match-item .match-vs .opp-name a { color: #e0e0e0; text-decoration: none; } body.page-team-detail .match-item .match-vs .opp-name a:hover { color: #6c8cff; } body.page-team-detail .match-item .match-score { font-weight: 700; font-size: 1rem; min-width: 50px; text-align: center; } body.page-team-detail .match-item .match-score.win { color: var(--niuma-win); } body.page-team-detail .match-item .match-score.lose { color: var(--niuma-loss); } body.page-team-detail .match-item .match-score.pending { color: #666; } body.page-team-detail .match-item .match-result-tag { font-size: .75rem; font-weight: 700; padding: 2px 8px; border-radius: 4px; } body.page-team-detail .match-item .match-result-tag.w { background: rgba(95,221,95,.15); color: var(--niuma-win); } body.page-team-detail .match-item .match-result-tag.l { background: rgba(221,95,95,.15); color: var(--niuma-loss); } body.page-team-detail .match-item .match-result-tag.tbd { background: rgba(136,136,136,.15); color: #888; } body.page-team-detail .match-item .bo-tag { font-size: .7rem; color: #666; } body.page-team-detail .empty-msg { text-align: center; color: #666; padding: 30px; } /* tournament_settings */ body.page-tournament-settings * { box-sizing: border-box; margin: 0; padding: 0; } body.page-tournament-settings { font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: #0a0a18 url('/static/bg.png') center top / cover no-repeat fixed; color: #e0e0e0; min-height: 100vh; } body.page-tournament-settings .container { max-width: 1100px; margin: 0 auto; padding: 32px 16px; background: rgba(10,10,24,.85); min-height: 100vh; border-left: 1px solid rgba(255,255,255,.05); border-right: 1px solid rgba(255,255,255,.05); } body.page-tournament-settings h1 { text-align: center; font-size: 1.5rem; margin-bottom: 8px; color: #fff; } body.page-tournament-settings .subtitle { text-align: center; font-size: .9rem; color: #888; margin-bottom: 24px; } body.page-tournament-settings .nav { text-align: center; margin-bottom: 24px; } body.page-tournament-settings .nav a { color: #fff; opacity: .85; text-decoration: none; margin: 0 12px; font-size: .95rem; } body.page-tournament-settings .nav a:hover { opacity: 1; text-decoration: underline; } body.page-tournament-settings .tabs { display: flex; gap: 0; margin-bottom: 24px; border-bottom: 2px solid #333; } body.page-tournament-settings .tab { padding: 10px 24px; cursor: pointer; color: #999; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: .2s; text-decoration: none; } body.page-tournament-settings .tab:hover { color: #ccc; } body.page-tournament-settings .tab.active { color: #6c8cff; border-bottom-color: #6c8cff; } body.page-tournament-settings .panel { display: none; } body.page-tournament-settings .panel.active { display: block; } body.page-tournament-settings .card { background: #16213e; border-radius: 10px; padding: 20px; margin-bottom: 16px; } body.page-tournament-settings .card h3 { font-size: 1rem; color: #fff; margin-bottom: 12px; } body.page-tournament-settings .form-row { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 12px; flex-wrap: wrap; } body.page-tournament-settings .form-group { display: flex; flex-direction: column; gap: 4px; } body.page-tournament-settings .form-group label { font-size: .8rem; color: #999; } body.page-tournament-settings .form-group input, body.page-tournament-settings .form-group select { background: #1a1a2e; border: 1px solid #333; border-radius: 6px; padding: 8px 10px; color: #e0e0e0; font-size: .9rem; } body.page-tournament-settings .form-group input:focus, body.page-tournament-settings .form-group select:focus { outline: none; border-color: #4a6cf7; } body.page-tournament-settings .btn { display: inline-block; padding: 10px 20px; font-size: .95rem; font-weight: 600; border: none; border-radius: 8px; cursor: pointer; color: #fff; background: #4a6cf7; transition: background .2s; } body.page-tournament-settings .btn:hover { background: #3a5ce5; } body.page-tournament-settings .btn-sm { padding: 6px 14px; font-size: .85rem; } body.page-tournament-settings .btn-outline { background: none; border: 1px solid #4a6cf7; color: #6c8cff; } body.page-tournament-settings .btn-outline:hover { background: rgba(74,108,247,.1); } body.page-tournament-settings .btn-danger { background: #c0392b; } body.page-tournament-settings .btn-danger:hover { background: #a93226; } body.page-tournament-settings .btn-success { background: #27ae60; } body.page-tournament-settings .btn-success:hover { background: #219a52; } /* Team cards */ body.page-tournament-settings .team-card { background: #1a1a2e; border: 1px solid #333; border-radius: 8px; padding: 14px 16px; margin-bottom: 10px; display: flex; align-items: center; gap: 12px; } body.page-tournament-settings .team-card .team-name { font-weight: 700; color: #fff; min-width: 120px; } body.page-tournament-settings .team-card .team-group { font-size: .85rem; color: #fbbf24; background: rgba(251,191,36,.1); border-radius: 8px; padding: 2px 10px; } body.page-tournament-settings .team-card .team-players { flex: 1; font-size: .85rem; color: #999; } body.page-tournament-settings .team-card .team-actions { display: flex; gap: 6px; } body.page-tournament-settings .team-card .team-actions button { background: none; border: 1px solid #444; border-radius: 6px; color: #999; padding: 4px 10px; cursor: pointer; font-size: .8rem; } body.page-tournament-settings .team-card .team-actions button:hover { border-color: #888; color: #fff; } body.page-tournament-settings .team-card .team-actions button.del:hover { border-color: #ff6666; color: #ff6666; } /* Matchup cards */ body.page-tournament-settings .matchup-card { background: #1a1a2e; border: 1px solid #333; border-radius: 8px; padding: 14px 16px; margin-bottom: 10px; } body.page-tournament-settings .matchup-header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } body.page-tournament-settings .matchup-round { font-size: .8rem; color: #888; } body.page-tournament-settings .matchup-teams { display: flex; align-items: center; gap: 8px; font-size: 1rem; } body.page-tournament-settings .matchup-teams .team { font-weight: 600; color: #e0e0e0; } body.page-tournament-settings .matchup-teams .team.winner { color: #5fdd5f; } body.page-tournament-settings .matchup-teams .vs { color: #666; font-size: .85rem; } body.page-tournament-settings .matchup-teams .score { color: #fbbf24; font-weight: 700; margin: 0 4px; } body.page-tournament-settings .matchup-bo { font-size: .8rem; color: #6c8cff; background: rgba(108,140,255,.1); border-radius: 8px; padding: 2px 8px; } body.page-tournament-settings .matchup-actions { display: flex; gap: 6px; margin-top: 8px; } body.page-tournament-settings .matchup-actions button { background: none; border: 1px solid #444; border-radius: 6px; color: #999; padding: 4px 10px; cursor: pointer; font-size: .8rem; } body.page-tournament-settings .matchup-actions button:hover { border-color: #888; color: #fff; } body.page-tournament-settings .matchup-actions button.del:hover { border-color: #ff6666; color: #ff6666; } body.page-tournament-settings .group-section { margin-bottom: 24px; } body.page-tournament-settings .group-section h4 { color: #fbbf24; font-size: .95rem; margin-bottom: 10px; border-bottom: 1px solid #333; padding-bottom: 6px; } body.page-tournament-settings .empty-msg { text-align: center; color: #666; padding: 40px; } body.page-tournament-settings .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 100; } body.page-tournament-settings .modal { background: #1a1a2e; border: 1px solid #333; border-radius: 12px; padding: 24px; width: 95%; max-width: 560px; max-height: 90vh; overflow-y: auto; } body.page-tournament-settings .modal h2 { font-size: 1.1rem; margin-bottom: 16px; color: #fff; } body.page-tournament-settings .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; } body.page-tournament-settings .info-box { background: rgba(108,140,255,.08); border: 1px solid rgba(108,140,255,.2); border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; font-size: .85rem; color: #aab; } body.page-tournament-settings .msg { margin-top: 8px; font-size: .85rem; } body.page-tournament-settings .msg.ok { color: #5fdd5f; } body.page-tournament-settings .msg.err { color: #ff6666; } body.page-tournament-settings .league-avatar-fallback { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:linear-gradient(135deg, rgba(108,140,255,.38), rgba(95,221,95,.22)); color:#f2f5ff; font-weight:800; border:1px solid rgba(108,140,255,.35); text-transform:uppercase; vertical-align:middle; } body.page-tournament-settings .admin-table { width:100%; border-collapse: collapse; font-size:.86rem; } body.page-tournament-settings .admin-table th, body.page-tournament-settings .admin-table td { border-bottom:1px solid rgba(255,255,255,.08); padding:9px 8px; text-align:left; vertical-align:top; } body.page-tournament-settings .admin-table th { color:#9aa6d6; font-weight:700; background:rgba(255,255,255,.03); } body.page-tournament-settings .admin-table td { color:#d8d8e8; } body.page-tournament-settings .registration-tag-list { display:flex; align-items:center; gap:5px; flex-wrap:wrap; } body.page-tournament-settings .registration-position, body.page-tournament-settings .registration-strength, body.page-tournament-settings .registration-intent { display:inline-flex; align-items:center; min-height:24px; padding:2px 8px; border:1px solid; border-radius:6px; font-size:.76rem; font-weight:600; white-space:nowrap; } body.page-tournament-settings .registration-position.position-1 { color:#f0b429; background:rgba(240,180,41,.12); border-color:rgba(240,180,41,.35); } body.page-tournament-settings .registration-position.position-2 { color:#5b9cff; background:rgba(91,156,255,.12); border-color:rgba(91,156,255,.35); } body.page-tournament-settings .registration-position.position-3 { color:#ef6a6a; background:rgba(239,106,106,.12); border-color:rgba(239,106,106,.35); } body.page-tournament-settings .registration-position.position-4 { color:#5fd38d; background:rgba(95,211,141,.12); border-color:rgba(95,211,141,.35); } body.page-tournament-settings .registration-position.position-5 { color:#c58cff; background:rgba(197,140,255,.12); border-color:rgba(197,140,255,.35); } body.page-tournament-settings .registration-strength { color:#c9d2e5; background:rgba(201,210,229,.07); border-color:rgba(201,210,229,.18); } body.page-tournament-settings .registration-intent.intent-main { color:#5fd38d; background:rgba(95,211,141,.11); border-color:rgba(95,211,141,.3); } body.page-tournament-settings .registration-intent.intent-sub { color:#f0b429; background:rgba(240,180,41,.11); border-color:rgba(240,180,41,.3); } body.page-tournament-settings .registration-intent.intent-spectator { color:#7da7ff; background:rgba(125,167,255,.11); border-color:rgba(125,167,255,.3); } body.page-tournament-settings .registration-intent.intent-organizer { color:#c58cff; background:rgba(197,140,255,.11); border-color:rgba(197,140,255,.3); } body.page-tournament-settings .badge { display:inline-flex; align-items:center; border-radius:999px; padding:2px 8px; font-size:.76rem; font-weight:700; background:rgba(108,140,255,.12); color:#9fb2ff; border:1px solid rgba(108,140,255,.24); } body.page-tournament-settings .badge.sub { color:#fbbf24; border-color:rgba(251,191,36,.28); background:rgba(251,191,36,.1); } body.page-tournament-settings .badge.spectator { color:#aaa; border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.06); } body.page-tournament-settings .table-wrap { width:100%; overflow-x:auto; border:1px solid rgba(255,255,255,.07); border-radius:8px; } body.page-tournament-settings .check-row { display:flex; gap:10px; flex-wrap:wrap; } body.page-tournament-settings .check-pill { display:inline-flex; align-items:center; gap:5px; background:#1a1a2e; border:1px solid #333; border-radius:999px; padding:6px 10px; font-size:.86rem; color:#ddd; cursor:pointer; } /* tournaments */ body.page-tournaments * { box-sizing: border-box; margin: 0; padding: 0; } body.page-tournaments { font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: #0a0a18 url('/static/bg.png') center top / cover no-repeat fixed; color: #e0e0e0; min-height: 100vh; } body.page-tournaments .container { max-width: 960px; margin: 0 auto; padding: 32px 16px; background: rgba(10,10,24,.85); min-height: 100vh; border-left: 1px solid rgba(255,255,255,.05); border-right: 1px solid rgba(255,255,255,.05); } body.page-tournaments h1 { text-align: center; font-size: 1.5rem; margin-bottom: 8px; color: #fff; } body.page-tournaments .nav { text-align: center; margin-bottom: 24px; } body.page-tournaments .nav a { color: #fff; opacity: .85; text-decoration: none; margin: 0 12px; font-size: .95rem; } body.page-tournaments .nav a:hover { opacity: 1; text-decoration: underline; } body.page-tournaments .btn { display: inline-block; padding: 10px 20px; font-size: .95rem; font-weight: 600; border: none; border-radius: 8px; cursor: pointer; color: #fff; background: #4a6cf7; transition: background .2s; } body.page-tournaments .btn:hover { background: #3a5ce5; } body.page-tournaments .btn-sm { padding: 6px 14px; font-size: .85rem; } body.page-tournaments .btn-outline { background: none; border: 1px solid #4a6cf7; color: #6c8cff; } body.page-tournaments .btn-outline:hover { background: rgba(74,108,247,.1); } body.page-tournaments .form-row { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 12px; flex-wrap: wrap; } body.page-tournaments .form-group { display: flex; flex-direction: column; gap: 4px; } body.page-tournaments .form-group label { font-size: .8rem; color: #999; } body.page-tournaments .form-group input, body.page-tournaments .form-group select { background: #16213e; border: 1px solid #333; border-radius: 6px; padding: 8px 10px; color: #e0e0e0; font-size: .9rem; } body.page-tournaments .form-group input:focus, body.page-tournaments .form-group select:focus { outline: none; border-color: #4a6cf7; } body.page-tournaments .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 100; } body.page-tournaments .modal { background: #1a1a2e; border: 1px solid #333; border-radius: 12px; padding: 24px; width: 95%; max-width: 680px; max-height: 90vh; overflow-y: auto; } body.page-tournaments .modal h2 { font-size: 1.1rem; margin-bottom: 16px; color: #fff; } body.page-tournaments .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; } body.page-tournaments .empty-msg { text-align: center; color: #666; padding: 40px; } body.page-tournaments .tournament-card { background: #16213e; border-radius: 10px; margin-bottom: 12px; overflow: hidden; } body.page-tournaments .tournament-card-poster { width: 100%; height: 100px; overflow: hidden; position: relative; background: #0a0f1a; } body.page-tournaments .tournament-card-poster img { width: 100%; object-fit: cover; object-position: top; display: block; } body.page-tournaments .tournament-card-body { padding: 16px 20px; display: flex; align-items: center; gap: 12px; } body.page-tournaments .tournament-info { flex: 1; } body.page-tournaments .tournament-name { font-size: 1rem; font-weight: 700; color: #fff; } body.page-tournaments .tournament-desc { font-size: .85rem; color: #888; margin-top: 3px; } body.page-tournaments .tournament-count { font-size: .8rem; color: #6c8cff; background: rgba(108,140,255,.12); border-radius: 12px; padding: 2px 10px; white-space: nowrap; } body.page-tournaments .tournament-actions { display: flex; gap: 6px; } body.page-tournaments .tournament-actions button { background: none; border: 1px solid #444; border-radius: 6px; color: #999; padding: 4px 10px; cursor: pointer; font-size: .8rem; } body.page-tournaments .tournament-actions button:hover { border-color: #888; color: #fff; } body.page-tournaments .tournament-actions button.del:hover { border-color: #ff6666; color: #ff6666; } /* User management */ body.page-user-management * { box-sizing: border-box; margin: 0; padding: 0; } body.page-user-management { font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: #0a0a18 url('/static/bg.png') center top / cover no-repeat fixed; color: #e0e0e0; min-height: 100vh; } body.page-user-management .container { max-width: 960px; margin: 0 auto; padding: 32px 16px; background: rgba(10,10,24,.85); min-height: 100vh; border-left: 1px solid rgba(255,255,255,.05); border-right: 1px solid rgba(255,255,255,.05); } body.page-user-management h1 { text-align: center; font-size: 1.5rem; margin-bottom: 6px; color: #fff; } body.page-user-management .subtitle { text-align: center; color: #888; font-size: .9rem; margin-bottom: 20px; } body.page-user-management .nav { text-align: center; margin-bottom: 24px; } body.page-user-management .nav a { color: #fff; opacity: .85; text-decoration: none; margin: 0 12px; font-size: .95rem; } body.page-user-management .nav a:hover { opacity: 1; text-decoration: underline; } body.page-user-management .nav .nav-user { display: inline-block; margin: 5px 12px; padding: 4px 9px; border: 1px solid rgba(108,140,255,.3); border-radius: 999px; background: rgba(108,140,255,.1); color: #b8c7ff; font-size: .84rem; } body.page-user-management .user-management-note { margin-bottom: 16px; padding: 12px 14px; border: 1px solid rgba(108,140,255,.22); border-radius: 8px; background: rgba(22,33,62,.78); color: #aeb8d2; font-size: .84rem; line-height: 1.6; } body.page-user-management .user-table-wrap { overflow-x: auto; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: #16213e; } body.page-user-management .user-table { width: 100%; min-width: 820px; border-collapse: collapse; font-size: .86rem; } body.page-user-management .user-table th, body.page-user-management .user-table td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.08); text-align: left; vertical-align: middle; } body.page-user-management .user-table th { color: #9aa6d6; font-weight: 700; background: rgba(255,255,255,.03); } body.page-user-management .sort-btn { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 700; white-space: nowrap; cursor: pointer; } body.page-user-management .sort-btn span { color: #657093; font-size: .68rem; } body.page-user-management .sort-btn:hover, body.page-user-management .sort-btn.active { color: #d2dbff; } body.page-user-management .sort-btn.active span { color: #6c8cff; } body.page-user-management .user-table td { color: #d8d8e8; } body.page-user-management .user-table tr:last-child td { border-bottom: 0; } body.page-user-management .user-table tbody tr:hover td { background: rgba(108,140,255,.05); } body.page-user-management .role { font-weight: 700; } body.page-user-management .role.admin { color: #f0c45c; } body.page-user-management .role.owner { color: #f0c45c; } body.page-user-management .role.user { color: #a5b0c8; } body.page-user-management .role-btn { border: 1px solid #4a6cf7; background: none; color: #6c8cff; border-radius: 6px; padding: 5px 10px; cursor: pointer; font-size: .8rem; transition: background .2s, border-color .2s, color .2s; } body.page-user-management .role-btn:hover { background: rgba(74,108,247,.12); } body.page-user-management .role-btn.revoke { border-color: rgba(221,95,95,.55); color: #dd8585; } body.page-user-management .role-btn.revoke:hover { background: rgba(221,95,95,.1); border-color: #dd5f5f; color: #ff9b9b; } body.page-user-management .owner-protected { color: #f0c45c; font-size: .8rem; } body.page-user-management .steam-ids { min-width: 118px; } body.page-user-management .steam-id { display: block; width: max-content; max-width: 170px; margin: 2px 0; padding: 2px 6px; border-radius: 4px; background: rgba(108,140,255,.1); color: #b8c7ff; font-family: Consolas, monospace; font-size: .78rem; overflow-wrap: anywhere; } body.page-user-management .steam-id-empty { color: #6f7890; font-size: .8rem; } body.page-user-management .empty, body.page-user-management .load-error { padding: 40px; text-align: center; color: #777; } .nav .nav-user { display: inline-block; margin: 5px 8px; color: #b8c7ff; font-size: .88rem; } body.page-user-management .load-error { color: #dd8585; }