/* Local compatibility layer for the original utility-class layout. */
html { scroll-behavior: smooth; }
body.modal-open { overflow: hidden; }
[data-modal-backdrop] { background: rgba(0, 0, 0, .5); }
[data-modal-backdrop][hidden] { display: none !important; }
[data-auth-form][hidden] { display: none !important; }
[data-auth-message].error { color: #dc2626; }
[data-auth-message].success { color: #16a34a; }
button:disabled { cursor: wait; opacity: .65; }
.btn-nro-red { background-color: #ff4d4d; color: #fff; }
/* Compatibility styles for the existing ranking view. */
.container { width: min(1100px, calc(100% - 32px)); margin: 0 auto; }
.page-stack { padding: 22px 0 38px; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 315px; gap: 18px; align-items: start; }
.content-main { min-width: 0; }
.card { background: rgba(255,255,255,.94); border: 1px solid #e67e22; border-radius: .25rem; box-shadow: 0 1px 3px rgb(0 0 0 / .1); padding: 20px; }
.ranking-card { padding: 20px; }
.ranking-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.eyebrow { display: block; font-size: 10px; color: #ff4d4d; font-weight: 900; letter-spacing: .11em; }
.ranking-head h1 { margin: 5px 0 3px; font-size: 20px; }
.muted { color: #8c7462; font-size: 12px; line-height: 1.6; }
.live-dot { font-size: 10px; color: #16824b; font-weight: 900; white-space: nowrap; }
.live-dot i { display: inline-block; width: 7px; height: 7px; background: #2ab66f; border-radius: 50%; margin-right: 4px; }
.ranking-tabs { display: flex; gap: 4px; overflow: auto; white-space: nowrap; border-bottom: 1px solid #e67e22; margin: 18px -20px 0; padding: 0 14px; }
.ranking-tabs a { padding: 14px 11px; color: #8c7462; text-decoration: none; font-size: 12px; font-weight: 800; }
.ranking-tabs a.active, .ranking-tabs a:hover { color: #ff4d4d; border-bottom: 2px solid #ff4d4d; }
.table-wrap { overflow: auto; }
.ranking-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 680px; }
.ranking-table th { background: #fff7e9; color: #8c7462; font-size: 10px; text-transform: uppercase; text-align: left; padding: 11px 9px; border-bottom: 1px solid #e67e22; }
.ranking-table td { padding: 11px 9px; border-bottom: 1px solid #f2e7d8; white-space: nowrap; }
.rank { font-weight: 900; color: #8c7462; width: 30px; }
.rank-1 { color: #d28a14; } .rank-2 { color: #86909c; } .rank-3 { color: #a76a3c; }
.player-cell { display: flex; align-items: center; gap: 8px; }
.player-avatar { width: 25px; height: 25px; display: inline-flex; align-items: center; justify-content: center; background: #f4d7af; border-radius: 50%; font-size: 11px; color: #663300; font-weight: 900; }
.total-power { font-weight: 900; color: #ff4d4d; }
.status-badge { color: #16824b; background: #e8f8ee; border-radius: 99px; padding: 4px 7px; font-size: 10px; }
.empty-ranking { text-align: center; padding: 50px 20px; color: #8c7462; }
.empty-ranking h2 { color: #663300; margin: 10px 0; }
.btn-soft { display: inline-flex; padding: 9px 14px; background: #ffcc99; color: #663300; border-radius: .25rem; text-decoration: none; }
@media (max-width: 820px) { .content-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .container { width: calc(100% - 20px); } .card { padding: 15px; } .ranking-tabs { margin-left: -15px; margin-right: -15px; } }