[hidden]{display:none!important}
.top{gap:14px}
.nav a[href="#leaderboard"]{color:var(--cyan);font-weight:750}
.auth-trigger{white-space:nowrap;min-height:42px;padding:8px 15px;font-size:13px}
.online-section{margin:30px 0 46px;scroll-margin-top:90px}
.online-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(250px,.8fr);gap:14px}
.online-card{border:1px solid var(--line);background:linear-gradient(145deg,#151a27,#10131d);border-radius:18px;padding:18px}
.online-card h3{margin:0 0 8px;font-size:17px}
.online-card p{margin:0;color:var(--muted);font-size:13px}
.online-controls{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.online-controls label{font-size:13px;font-weight:750;color:var(--muted)}
.online-controls select{min-width:210px}
#leaderboardStatus{min-height:22px;margin:0 0 10px;color:var(--muted);font-size:13px}
#leaderboardStatus.is-error,.online-message.is-error{color:#ff98b9}
.leaderboard-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:13px}
.leaderboard-table{width:100%;border-collapse:collapse;min-width:370px;text-align:left}
.leaderboard-table th,.leaderboard-table td{padding:12px 14px;border-bottom:1px solid #ffffff0d;font-size:13px}
.leaderboard-table th{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.leaderboard-table td:first-child{width:58px;color:var(--cyan);font-weight:850}
.leaderboard-table td:last-child{text-align:right;font-weight:800}
.leaderboard-table tr:last-child td{border-bottom:0}
.empty-row{text-align:center!important;color:var(--muted);padding:22px!important}
.online-refresh{margin-top:12px;min-height:42px;padding:8px 13px;border:1px solid #71f5e144;border-radius:11px;background:#71f5e10d;color:var(--cyan);font-weight:800}
.account-card{display:flex;flex-direction:column;gap:12px}
.account-card .control-btn{width:100%}
.account-balance{display:flex;justify-content:space-between;align-items:center;padding:12px 13px;border:1px solid var(--line);border-radius:12px;background:#ffffff06;font-size:13px}
.account-balance span{color:var(--muted)}
.account-balance strong{color:var(--yellow)}
.online-message{min-height:20px;color:var(--muted);font-size:13px;margin:0}
.auth-dialog{position:fixed;inset:0;z-index:100;background:#04060bd9;backdrop-filter:blur(10px);display:grid;place-items:center;padding:18px}
.auth-window{width:min(440px,100%);position:relative;border:1px solid #ffffff22;border-radius:22px;background:linear-gradient(145deg,#171d2b,#0d111a);padding:28px;box-shadow:0 26px 90px #000b}
.auth-window h2{font-size:25px;margin:0 0 7px}
.auth-window>p{color:var(--muted);font-size:14px;margin:0 0 18px}
.auth-close{position:absolute;top:12px;right:12px;width:40px;height:40px;border:1px solid var(--line);border-radius:12px;background:#ffffff08;font-size:21px}
#googleButton{min-height:48px;display:flex;justify-content:center}
#authStatus{min-height:22px;color:var(--muted);font-size:13px;margin:16px 0 0}
#authStatus.is-error{color:#ff98b9}
.nick-form{display:grid;gap:9px}
.nick-form label{font-weight:750;font-size:13px}
.nick-form input{min-height:50px;border:1px solid #ffffff24;border-radius:12px;background:#090d16;color:var(--text);padding:11px 13px;font:inherit}
.nick-form small{color:var(--muted)}
.nick-form button{min-height:48px;border:0;border-radius:12px;background:linear-gradient(100deg,var(--cyan),#83d7ff);color:#08151b;font-weight:900}
.nick-form button:disabled{opacity:.55;cursor:wait}
body.dialog-open{overflow:hidden}
@media(max-width:700px){
 .top{height:auto;min-height:68px;flex-wrap:wrap;padding:8px 0;gap:6px}
 .nav{order:3;width:100%;justify-content:center;gap:12px;font-size:12px}
 .auth-trigger{min-height:38px;padding:7px 12px;font-size:12px}
 .online-section{margin:22px 0 34px}
 .online-layout{grid-template-columns:1fr;gap:10px}
 .online-card{padding:15px}
 .online-controls{align-items:flex-start;flex-direction:column}
 .online-controls select{width:100%}
 .auth-window{padding:25px 19px}
}

.auth-window>.auth-privacy{margin:-7px 0 16px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:#ffffff05;font-size:12px;line-height:1.5}


.online-arena-section{margin:34px 0 48px;scroll-margin-top:90px}
.online-arena-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(240px,.75fr);gap:14px}
.online-arena-card{border:1px solid var(--line);border-radius:18px;padding:18px;background:linear-gradient(145deg,#151a27,#10131d)}
.online-arena-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.online-arena-top h3{font-size:20px;margin:4px 0}
.online-arena-top p{color:var(--muted);font-size:13px;margin:0;min-height:20px}
#pongOnlineStatus.is-error{color:#ff98b9}
.arena-live-dot{width:11px;height:11px;flex:none;border-radius:50%;background:var(--cyan);box-shadow:0 0 18px var(--cyan);margin:8px}
#onlinePongCanvas{display:block;width:100%;height:auto;aspect-ratio:16/9;border:1px solid #ffffff18;border-radius:14px;background:#080c14;touch-action:none}
.online-arena-controls{display:flex;gap:10px;margin-top:12px}
.online-arena-controls button{min-height:48px}
#pongQueueButton{flex:1}
#pongQueueButton:disabled{opacity:.55;cursor:not-allowed}
.arena-rules h3{margin:2px 0 12px}
.arena-rules ul{display:grid;gap:10px;padding-left:20px;color:var(--muted);font-size:13px;line-height:1.55}
.arena-rules li::marker{color:var(--cyan)}
.arena-rules p{padding:12px;border:1px solid var(--line);border-radius:12px;color:var(--text);font-size:13px;line-height:1.55}
.arena-touch-controls{display:none;justify-content:center;gap:12px;margin-top:11px}
.arena-touch-controls button{width:76px;min-height:58px;border:1px solid #71f5e155;border-radius:14px;background:#71f5e112;color:var(--cyan);font-size:25px;font-weight:900;touch-action:none;user-select:none}
.arena-touch-controls button:active{background:#71f5e133;transform:translateY(1px)}
@media(max-width:700px){
 .online-arena-section{margin:24px 0 36px}
 .online-arena-layout{grid-template-columns:1fr;gap:10px}
 .online-arena-card{padding:14px}
 .arena-touch-controls{display:flex}
 .online-arena-controls{flex-direction:column}
 .online-arena-controls button{width:100%}
}
@media(max-width:700px){.nav{justify-content:flex-start;overflow-x:auto;white-space:nowrap;scrollbar-width:none}.nav::-webkit-scrollbar{display:none}}

.developer-section{margin:30px 0 46px;padding:24px;border:1px solid #71f5e144;border-radius:20px;background:linear-gradient(145deg,#151a27,#10131d)}
.developer-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}
.developer-heading h2{margin:6px 0;font-size:clamp(24px,4vw,34px)}
.developer-heading p,.developer-status{color:var(--muted);font-size:13px;line-height:1.55}
.developer-heading p{margin:0}
.developer-status{min-height:20px;margin:18px 0 12px}
.developer-status.is-error{color:#ff98b9}
.developer-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.developer-stat{display:flex;flex-direction:column;gap:10px;padding:16px;border:1px solid var(--line);border-radius:14px;background:#ffffff06}
.developer-stat span{color:var(--muted);font-size:12px}
.developer-stat strong{color:var(--cyan);font-size:22px}
@media(max-width:850px){.developer-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.developer-section{padding:16px}.developer-heading{flex-direction:column}.developer-heading .online-refresh{width:100%}.developer-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.developer-stat{padding:13px}.developer-stat strong{font-size:19px}}