/* Online ranked lobby and leaderboard. Shares the night palette; flat panels, no glow. */
.online-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;align-items:start}
.online-layout>div{display:grid;gap:16px;min-width:0}
.online-card,.online-profile,.online-rules{border:1px solid #2c3a5c;background:#0d1528;border-radius:6px;padding:18px;color:#e9eeff}
.online-card h2,.online-rules h2{font-size:15px;margin:0 0 12px}
.online-card .hint{font-size:12px;line-height:1.8;color:#a6b4d4;margin:10px 0 0}
.online-register form{display:grid;gap:9px;margin-top:12px}
.online-register label{font-size:12px;color:#c8d2ec}
.online-register input[type=text],.online-register input:not([type]),.online-rename input{width:100%;min-height:44px;padding:8px 12px;border:1px solid #3f4f7a;border-radius:4px;background:#060c1c;color:#fff;font-size:16px}
.online-register-face{display:flex;align-items:center;gap:12px;font-size:11px;color:#a6b4d4}
.online-consent{display:flex;gap:9px;align-items:flex-start;line-height:1.7;margin:4px 0 6px}
.online-consent input{margin-top:4px;flex:none;width:18px;height:18px;accent-color:#ff5cc0}
.online-error{margin:8px 0;padding:9px 12px;border-left:3px solid #ff5d8f;background:#2a0f22;color:#ffd5e6;font-size:12px;line-height:1.7}
.online-profile{display:grid;grid-template-columns:auto 1fr;gap:12px 16px;align-items:center}
.online-profile-name{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.online-profile-name strong{font-size:20px;line-height:1.3;overflow-wrap:anywhere}
.online-stats{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:4px 0 0;border-top:1px solid #26314f}
.online-stats div{padding:12px 4px 0}.online-stats dt{font-size:11px;color:#94a3c6}.online-stats dd{margin:4px 0 0;font-size:18px;font-weight:700;color:#fff}
.online-rename{grid-column:1/-1;font-size:12px;color:#a6b4d4}
.online-rename summary{cursor:pointer;min-height:32px;display:flex;align-items:center}
.online-rename form{display:flex;gap:8px;margin-top:6px}.online-rename input{min-height:40px}
.online-tier{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;border:1px solid currentColor;white-space:nowrap}
.tier-bronze{color:#d79a6b}.tier-silver{color:#c9d3e6}.tier-gold{color:#ffd46b}.tier-platinum{color:#7fe3e0}.tier-diamond{color:#a9b8ff}
.online-match .btn.full{width:100%;min-height:52px;font-size:15px}
.online-searching{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid #3f4f7a;border-radius:6px;background:#0a1124;margin-bottom:6px}
.online-searching strong{display:block;font-size:15px}.online-searching small{font-size:13px;color:#ffb6e6;font-variant-numeric:tabular-nums}
.online-rules ul{margin:0;padding-left:18px;display:grid;gap:7px;font-size:12px;line-height:1.7;color:#c8d2ec}
.online-ranking-link{display:flex;align-items:center;gap:12px;padding:16px 18px;border:1px solid #2c3a5c;border-radius:6px;background:#0d1528;color:#e9eeff;margin-top:16px}
.online-layout .online-ranking-link{margin-top:0}
.online-ranking-link .icon{width:22px;height:22px;color:#ffd46b}
.online-ranking-link b,.online-ranking-link small{display:block}.online-ranking-link small{font-size:11px;color:#94a3c6;margin-top:3px}
.ranking-me{margin:0 0 12px;font-size:13px;color:#c8d2ec}.ranking-me b{color:#fff;font-size:16px}
.ranking-scroll{overflow-x:auto;margin:0 -4px}
.ranking-table{width:100%;border-collapse:collapse;font-size:13px;min-width:460px}
.ranking-table th{font-size:11px;font-weight:600;color:#94a3c6;text-align:left;padding:8px 6px;border-bottom:1px solid #2c3a5c}
.ranking-table td{padding:8px 6px;border-bottom:1px solid #1d2742;vertical-align:middle}
.ranking-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ranking-table .rank{width:44px;font-weight:700;font-variant-numeric:tabular-nums}
.ranking-table tbody tr:nth-child(-n+3) .rank{color:#ffd46b}
.ranking-table .who{display:flex;align-items:center;gap:9px;min-width:0}
.ranking-table .who .avatar{width:30px;height:30px}
.ranking-table .who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ranking-table .who em{font-style:normal;font-size:11px;margin-left:6px;padding:1px 6px;border-radius:999px;background:#ff5cc0;color:#1b0718}
.ranking-table tr.mine td{background:#22153a}
.ranking-table tr.gap td{text-align:center;color:#5d6a8c;padding:2px}
.online-table-status small{font-variant-numeric:tabular-nums}
@media(max-width:900px){.online-layout{grid-template-columns:1fr}}
@media(max-width:650px){
 .online-card,.online-profile,.online-rules{padding:15px}
 .online-stats dd{font-size:16px}
 .ranking-table{font-size:12px;min-width:0}
 .ranking-table th:nth-child(3),.ranking-table td:nth-child(3){display:none}
}

/* Account: login, sign-up, verification, reset, sign-out, delete */
.account-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;align-items:start}
.account-layout>div{display:grid;gap:16px;min-width:0}
.account-form{display:grid;gap:8px;margin-top:6px}
.account-form label{font-size:12px;color:#c8d2ec;margin-top:4px}
.account-form input[type=email],.account-form input[type=password],.account-form input[type=text]{width:100%;min-height:46px;padding:8px 12px;border:1px solid #3f4f7a;border-radius:4px;background:#060c1c;color:#fff;font-size:16px}
.account-form input:focus{border-color:#ff5cc0;outline:none}
.account-form .btn.full,.online-gate .btn.full,.account-layout .btn.full{width:100%;min-height:48px;margin-top:8px}
.account-tabs{display:grid;grid-template-columns:1fr 1fr;margin:-4px 0 14px;border-bottom:1px solid #2c3a5c}
.account-tabs button{min-height:46px;font-size:14px;font-weight:700;color:#94a3c6;border-bottom:2px solid transparent}
.account-tabs button.active{color:#fff;border-bottom-color:#ff5cc0}
.account-link{display:block;margin:14px auto 0;font-size:12px;color:#9fd9ff;text-decoration:underline;min-height:36px}
.online-consent a{color:#9fd9ff;text-decoration:underline}
.online-info{margin:8px 0;padding:9px 12px;border-left:3px solid #5cd6c3;background:#0d2526;color:#d3fff6;font-size:12px;line-height:1.7}
.account-summary{display:flex;align-items:center;gap:14px}
.account-summary strong{display:block;font-size:19px}.account-summary small{display:block;font-size:12px;color:#94a3c6;margin:2px 0 6px;overflow-wrap:anywhere}
.account-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.account-danger summary{cursor:pointer;font-weight:700;min-height:28px;color:#ffb0c8}
.online-gate h2{font-size:17px}
@media(max-width:900px){.account-layout{grid-template-columns:1fr}}

/* Table format picker and final standings */
.online-formats{display:grid;gap:10px}
.online-format{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;min-height:60px;padding:12px 16px;text-align:left;border:1px solid #3f4f7a;border-radius:6px;background:#0a1124;color:#fff}
.online-format b{font-size:15px}.online-format span{font-size:12px;color:#a6b4d4}
.online-format.ranked{background:#ee5bb8;border-color:#ee5bb8;color:#1b0718}.online-format.ranked span{color:#3d0c2e}
.online-format:hover{border-color:#ff8fd2}
.online-standings{list-style:none;margin:10px 0;padding:0;text-align:left;font-size:13px}
.online-standings li{display:grid;grid-template-columns:44px 1fr auto;gap:8px;padding:6px 4px;border-bottom:1px solid #26314f}
.online-standings li.mine{background:#22153a}
.online-standings small{color:#a6b4d4}

.google-signin{display:grid;gap:10px;margin:20px 0}.google-signin>div{min-height:40px;max-width:100%}.google-signin .hint{margin:0}
.apple-signin{display:grid;justify-items:center;gap:8px;margin:16px 0}
.apple-signin .hint{margin:0;text-align:center}
.apple-signin-button{display:flex;justify-content:center;align-items:center;width:min(100%,360px);min-height:44px;padding:0;border:1px solid #777;border-radius:5px;background:#000;cursor:pointer}
.apple-signin-button img{display:block;width:280px;max-width:100%;height:auto;min-height:44px;object-fit:contain}
.apple-signin-button:focus-visible{outline:3px solid var(--accent,#eb626c);outline-offset:3px}
.apple-signin-button:disabled{opacity:.5;cursor:wait}
/* Home: online ranking top five (ui/online.js homeRanking) */
.home-ranking{margin:0 0 14px;padding:14px 16px;border:1px solid #6b4a9a;border-radius:10px;background:linear-gradient(135deg,#1d1238,#0a1020 75%);box-shadow:inset 0 0 18px #b45cff1f}
.home-ranking header{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:10px}
.home-ranking h2{display:flex;flex-direction:column;margin:0;font-size:15px;color:#f4eaff;letter-spacing:.04em}
.home-ranking h2 small{font-size:10px;letter-spacing:.22em;color:#ff8be0;font-weight:700}
.home-ranking header a{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:#c9b8ff;text-decoration:none;white-space:nowrap}
.home-ranking header a .icon{width:14px;height:14px}
.home-ranking ol{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.home-ranking li{display:grid;grid-template-columns:26px 30px minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;background:#ffffff08}
.home-ranking li .avatar{width:30px;height:30px}
.home-rank{font:700 15px/1 Georgia,serif;text-align:center;color:#b9c3dc}
.home-ranking li.r1 .home-rank{color:#ffd76a;text-shadow:0 0 8px #ffbf3a88}
.home-ranking li.r2 .home-rank{color:#dfe7f2}
.home-ranking li.r3 .home-rank{color:#e6a46b}
.home-ranking li.r1{background:linear-gradient(90deg,#ffcf5a1f,#ffffff08)}
.home-rank-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:#f1ecff}
.home-rank-rate{font-variant-numeric:tabular-nums;font-size:14px;color:#7fe7ff}
.home-ranking .online-tier{font-size:10px;padding:1px 7px}
.home-ranking-note{margin:8px 0 0;font-size:11px;color:#9aa6c2}
.home-ranking-empty{display:grid;gap:6px;justify-items:start}
.home-ranking-empty b{font-size:14px;color:#ffd6f4}
.home-ranking-empty p{margin:0;font-size:12px;line-height:1.6;color:#c4cde1}
.home-ranking-empty .btn{margin-top:4px}