:root {
    --bg:#030306; --surface-1:#09090e; --surface-2:#101118; --surface-3:#181924;
    --border:rgba(255,255,255,.08); --border-metal:rgba(226,232,240,.2);
    --silver-1:#f1f5f9; --silver-2:#cbd5e1; --silver-3:#94a3b8; --silver-dim:#64748b;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--silver-1); font-family:Inter,sans-serif; background-image:radial-gradient(ellipse 90% 40% at 50% 0%,rgba(203,213,225,.06),transparent 70%); }
a { color:var(--silver-2); }
button,input,select { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:default; opacity:.45; }
.pugs-page { max-width:1600px; width:100%; margin:auto; padding:clamp(36px,5vw,60px) clamp(16px,3.5vw,56px) 88px; }
.page-header { margin-bottom:52px; }
.page-eyebrow { display:flex; align-items:center; gap:8px; font-size:11px; letter-spacing:3px; font-weight:700; color:var(--silver-3); margin-bottom:12px; }
.page-eyebrow .material-symbols-outlined { font-size:16px; }
.page-title { font-family:Rajdhani,sans-serif; font-size:clamp(40px,5.5vw,64px); line-height:1.05; font-weight:800; letter-spacing:.5px; margin:0 0 12px; background:linear-gradient(135deg,#fff 0%,#cbd5e1 55%,#94a3b8 100%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.page-sub { max-width:660px; color:var(--silver-3); font-size:15px; line-height:1.7; margin:0; }
.hero-links { display:flex; align-items:center; flex-wrap:wrap; gap:24px; margin-top:24px; }
.silver-button { display:inline-flex; justify-content:center; align-items:center; gap:8px; padding:10px 18px; background:#09090e linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.04)); border:1px solid var(--border-metal); border-radius:8px; color:#fff; font-size:13px; font-weight:600; text-decoration:none; transition:background-color .18s,border-color .18s; }
.silver-button:hover:not(:disabled) { background-color:#333337; border-color:rgba(255,255,255,.4); }
.silver-button .material-symbols-outlined { font-size:18px; }
.text-link { display:inline-flex; align-items:center; gap:8px; font-size:13px; text-decoration:none; color:var(--silver-3); }
.text-link .material-symbols-outlined { font-size:16px; }
.pugs-page section { scroll-margin-top:90px; margin-top:44px; }
.section-heading { display:flex; align-items:center; gap:18px; margin-bottom:18px; flex-wrap:wrap; }
.section-heading h2 { font-family:Rajdhani,sans-serif; margin:0; font-size:24px; font-weight:700; letter-spacing:.5px; }
.section-heading::after { content:''; height:1px; background:var(--border); flex:1; order:1; min-width:20px; }
.section-meta { order:2; display:flex; align-items:center; gap:7px; font-size:11px; color:var(--silver-dim); }
.sync-dot { width:5px; height:5px; border-radius:50%; background:#86efac; }
.queue-status { color:var(--silver-dim); font-size:12px; margin:0 0 16px; }
.login-banner { display:flex; align-items:center; gap:12px; border:1px solid var(--border-metal); background:rgba(203,213,225,.04); padding:12px 18px; border-radius:10px; margin-bottom:16px; color:var(--silver-3); }
.login-banner p { margin:0; font-size:13px; line-height:1.6; }
.queue-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:16px; }
.queue-card { position:relative; overflow:hidden; background:var(--surface-1); border:1px solid var(--border); border-radius:12px; padding:22px; display:flex; flex-direction:column; transition:border-color .18s; }
.queue-card::before { position:absolute; content:''; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.17),transparent); }
.queue-card:hover { border-color:var(--border-metal); }
.queue-card-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.queue-server-tag { align-self:flex-start; max-width:100%; overflow-wrap:anywhere; border:1px solid var(--border-metal); border-radius:5px; padding:4px 8px; margin-bottom:12px; color:var(--silver-2); background:var(--surface-3); font-size:10px; font-weight:600; }
.queue-card h3 { font-family:Rajdhani,sans-serif; font-size:30px; letter-spacing:.5px; margin:0; }
.queue-badge { border:1px solid var(--border-metal); background:rgba(255,255,255,.04); border-radius:100px; padding:5px 9px; font-size:10px; font-weight:600; color:var(--silver-3); }
.queue-capacity { display:flex; align-items:center; justify-content:space-between; color:var(--silver-dim); font-size:11px; margin-top:16px; }
.queue-capacity strong { color:var(--silver-2); font-size:12px; }
.queue-progress { height:3px; background:var(--surface-3); border-radius:4px; overflow:hidden; margin:8px 0 16px; }
.queue-progress span { display:block; height:100%; background:linear-gradient(90deg,#64748b,#e2e8f0); }
.queue-roster { list-style:none; padding:0; margin:0 0 18px; display:grid; gap:8px; flex:1; }
.queue-roster li { display:flex; align-items:center; gap:9px; font-size:12px; min-width:0; overflow-wrap:anywhere; }
.queue-player { display:flex; align-items:center; gap:9px; min-width:0; color:inherit; text-decoration:none; }
a.queue-player:hover { text-decoration:underline; }
.roster-avatar { flex-shrink:0; border-radius:7px; object-fit:cover; }
.queue-roster small { margin-left:auto; white-space:nowrap; color:var(--silver-3); }
.queue-roster button { margin-left:auto; padding:5px 10px; }
.pug-password-dialog { max-width:calc(100% - 32px); background:var(--surface-2); color:var(--silver-1); border:1px solid var(--border-metal); border-radius:12px; padding:24px; overflow-wrap:anywhere; }
.pug-password-dialog::backdrop { background:rgba(0,0,0,.7); }
.roster-initial,.player-initial { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--surface-3); color:var(--silver-3); border:1px solid var(--border); border-radius:7px; width:26px; height:26px; font-weight:600; font-size:11px; }
.queue-empty { display:flex; align-items:center; gap:10px; color:var(--silver-dim); font-size:12px; min-height:38px; margin:0 0 18px; flex:1; }
.queue-empty .material-symbols-outlined { font-size:22px; }
.queue-actions { border-top:1px solid var(--border); padding-top:16px; display:flex; align-items:center; gap:14px; }
.queue-actions button { flex:1; }
.queue-actions a { display:inline-flex; align-items:center; gap:5px; text-decoration:none; font-size:11px; color:var(--silver-3); white-space:nowrap; }
.queue-actions a .material-symbols-outlined { font-size:14px; }
.summary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:22px; }
.summary-card { display:flex; align-items:center; gap:16px; padding:18px 20px; border:1px solid var(--border); border-radius:12px; background:var(--surface-1); }
.summary-card>.material-symbols-outlined { color:var(--silver-dim); font-size:24px; }
.summary-card strong { display:block; font-family:Rajdhani,sans-serif; font-size:30px; font-weight:700; line-height:1.1; }
.summary-card div>span { display:block; color:var(--silver-dim); font-size:10px; letter-spacing:1px; text-transform:uppercase; margin-top:5px; }
.stats-filters { display:flex; align-items:end; gap:12px; flex-wrap:wrap; margin:0 0 20px; }
.stats-filters label { display:grid; gap:8px; color:var(--silver-3); font-size:11px; font-weight:500; }
.stats-filters .search-filter { flex:1; min-width:180px; }
.stats-filters input,.stats-filters select { padding:11px 13px; border:1px solid var(--border); border-radius:8px; background:var(--surface-1); color:var(--silver-2); font-size:12px; min-height:40px; }
.stats-filters input:focus,.stats-filters select:focus { outline:1px solid var(--border-metal); }
.input-wrap { position:relative; }
.input-wrap input { width:100%; padding-left:38px; }
.input-wrap .material-symbols-outlined { position:absolute; top:12px; left:12px; font-size:16px; color:var(--silver-dim); }
.stats-filters button { min-height:40px; }
.stats-table { border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--surface-1); }
.leaderboard-heading { display:flex; align-items:center; gap:9px; padding:18px 20px; border-bottom:1px solid var(--border); font-size:13px; font-weight:600; }
.leaderboard-heading .material-symbols-outlined { font-size:18px; color:var(--silver-3); }
.leaderboard-heading>span:last-child { margin-left:auto; color:var(--silver-dim); font-size:11px; font-weight:400; }
.leaderboard-columns,.leaderboard-row { display:grid; grid-template-columns:40px minmax(100px,1fr) 110px 80px 70px 42px; align-items:center; gap:12px; padding:13px 20px; }
.leaderboard-columns { background:rgba(255,255,255,.025); color:var(--silver-dim); font-size:10px; text-transform:uppercase; letter-spacing:.8px; }
.leaderboard-columns>span:nth-child(n+3),.leaderboard-row>span.extra-stat,.rank-value { text-align:right; }
.player-entry { border-top:1px solid var(--border); }
.leaderboard-row { list-style:none; cursor:pointer; min-height:72px; font-size:13px; }
.leaderboard-row::-webkit-details-marker { display:none; }
.leaderboard-row:hover { background:rgba(255,255,255,.025); }
.leaderboard-row:focus-visible { outline:1px solid var(--silver-3); outline-offset:-2px; }
.player-rank { color:var(--silver-dim); font-family:Rajdhani,sans-serif; font-size:20px; font-weight:700; }
.rank-1 { color:#e8c84a; } .rank-2 { color:#cbd5e1; } .rank-3 { color:#b99a7d; }
.player-identity { display:flex; align-items:center; gap:10px; min-width:0; font-weight:500; }
.player-identity>span:last-child { overflow-wrap:anywhere; min-width:0; }
.player-initial { width:34px; height:34px; border-radius:8px; font-size:13px; }
.player-identity small { display:block; color:var(--silver-dim); font-size:10px; margin-top:5px; font-weight:400; }
.rank-value { font-family:Rajdhani,sans-serif; font-size:23px; color:#f1f5f9; }
.leaderboard-row .extra-stat { color:var(--silver-3); font-size:12px; }
.detail-toggle { justify-self:end; color:var(--silver-dim); }
.detail-toggle .material-symbols-outlined { font-size:20px; transition:transform .18s; }
.player-entry[open] .detail-toggle .material-symbols-outlined { transform:rotate(180deg); }
.player-expanded { padding:20px; border-top:1px solid var(--border); background:var(--surface-2); }
.player-expanded-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; font-size:12px; }
.player-expanded-heading a { display:inline-flex; align-items:center; gap:5px; font-size:11px; text-decoration:none; color:var(--silver-3); }
.player-expanded-heading .material-symbols-outlined { font-size:14px; }
.player-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px; }
.player-metrics>div { display:flex; flex-direction:column; gap:8px; padding:12px; border:1px solid var(--border); border-radius:7px; background:var(--surface-1); }
.player-metrics span { font-size:10px; color:var(--silver-3); }
.player-metrics strong { font-family:Rajdhani,sans-serif; font-size:22px; }
.empty-state { padding:42px 20px; text-align:center; color:var(--silver-dim); }
.empty-state>.material-symbols-outlined { font-size:32px; }
.empty-state h3 { font-family:Rajdhani,sans-serif; font-size:22px; color:var(--silver-2); margin:12px 0 6px; }
.empty-state p { font-size:12px; margin:0; }
.site-footer { border-top:1px solid var(--border); padding:24px 16px; text-align:center; color:var(--silver-dim); font-size:11px; }
.site-footer strong { color:var(--silver-3); letter-spacing:1px; }
@media(min-width:1200px) { .queue-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:700px) {
    .leaderboard-columns,.leaderboard-row { grid-template-columns:24px minmax(0,1fr) 60px 24px; gap:8px; padding:12px; }
    .extra-stat { display:none; }
    .leaderboard-columns>span:last-child { font-size:0; }
    .summary-card { padding:14px 10px; gap:8px; } .summary-card>.material-symbols-outlined { display:none; }
    .summary-card strong { font-size:25px; } .summary-card div>span { font-size:8px; letter-spacing:.5px; }
    .stats-filters label:not(.search-filter) { flex:1; min-width:120px; }
    .stats-filters .search-filter { flex-basis:100%; }
    .stats-filters select { width:100%; min-width:0; }
    .stats-filters button { width:100%; }
    .section-heading { gap:10px; }.section-meta { font-size:10px; }
    .player-initial { width:26px; height:26px; font-size:11px; }.player-identity { gap:7px; font-size:12px; }
    .player-expanded { padding:14px; }.player-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
}