header{display:flex;align-items:center;justify-content:space-between;gap:20px;letter-spacing:normal}
.brand{letter-spacing:.14em}
nav{display:flex;gap:18px}
nav a{color:var(--muted);font-size:13px}
nav a:hover{color:var(--text)}
.online-heading .muted{margin:4px 0 0}
.online-count{background:linear-gradient(90deg,#1bbdd1,#36a8ff);color:#fff;border-radius:999px;padding:9px 16px;font-weight:800;box-shadow:0 8px 25px #29c8ee33;white-space:nowrap}
.player-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.player-card{position:relative;display:flex;align-items:center;gap:16px;min-height:100px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(120deg,#13242d,#0c181f);overflow:hidden;box-shadow:0 10px 30px #0003}
.player-card.playing{border-color:#bd7b24;background:linear-gradient(120deg,#2b2117,#111b20)}
.player-card:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:#43d999}
.player-card.playing:before{background:#ffad36}
.player-mark{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;flex:none;background:linear-gradient(145deg,#2a5362,#19313b);border:2px solid #d9fbff;color:var(--cyan);font-size:22px;font-weight:900;box-shadow:0 0 0 4px #ffffff0d}
.player-card.playing .player-mark{color:#ffb13d;background:linear-gradient(145deg,#5b3b1c,#2f2419)}
.player-info{min-width:0}
.player-info h2{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player-info p{margin:5px 0 0;color:var(--muted);font-size:12px;letter-spacing:.08em}
.player-info p b{color:var(--text);font-size:15px}
.presence{margin-left:auto;font-weight:900;white-space:nowrap}
.presence.resting{color:#43d999}
.presence.playing{color:#ffad36}
.empty-online{grid-column:1/-1;text-align:center;padding:64px 24px}
.empty-online h2{margin:14px 0 4px}
.pulse-dot{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 8px #43e8f41b}
@media(max-width:760px){header{align-items:flex-start;flex-direction:column}nav{width:100%;justify-content:space-between}.player-list{grid-template-columns:1fr}.online-heading{align-items:flex-end}.player-card{padding:15px}.player-mark{width:50px;height:50px}.presence{font-size:13px}}