.arcade-game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.arcade-game-layout > #gameView { min-width: 0; }
.arcade-game-layout.is-versus { grid-template-columns: minmax(0, 1fr); }
.arcade-ranking { --ranking-accent: #e9c879; --ranking-panel: #172c30; --ranking-row: #1c3438; --ranking-border: #49605a; align-self: start; min-width: 0; margin-top: 16px; padding: 18px 14px 14px; border: 1px solid var(--ranking-border); border-radius: 14px; background: var(--ranking-panel); color: #edf0e4; box-shadow: 0 12px 30px #00000017; font: 13px/1.5 var(--arcade-font-family, Arial, sans-serif); }
.arcade-ranking *, .arcade-ranking *::before, .arcade-ranking *::after { box-sizing: border-box; }
.arcade-ranking-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.arcade-ranking-kicker { display: block; color: #a6b9ae; font-size: 9px; letter-spacing: 1.7px; }
.arcade-ranking h2 { font: 700 21px/1.3 var(--arcade-font-family, Arial, sans-serif); color: var(--ranking-accent); margin: 3px 0 0; letter-spacing: 0; }
.arcade-ranking button { background: #ffffff0c; color: var(--ranking-accent); border: 1px solid var(--ranking-border); border-radius: 7px; padding: 4px 9px; font: 22px/1.2 var(--arcade-font-family, Arial, sans-serif); }
.arcade-ranking button:disabled { opacity: .5; }
.arcade-ranking .arcade-ranking-own { min-height: 36px; display: flex; align-items: center; margin: 12px 0; padding: 7px 9px; background: #e9c87912; border: 0; border-left: 2px solid var(--ranking-accent); color: var(--ranking-accent); font-size: 11px; line-height: 1.5; }
.arcade-ranking #ownRank { padding: 7px 9px; border: 0; border-left: 2px solid var(--ranking-accent); color: var(--ranking-accent); line-height: 1.5; }
.arcade-ranking-scroll { max-height: 478px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; border: 1px solid var(--ranking-border); border-radius: 8px; scrollbar-width: thin; scrollbar-color: #7f927b var(--ranking-panel); }
.arcade-ranking table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font: 12px/1.5 var(--arcade-font-family, Arial, sans-serif); white-space: nowrap; }
.arcade-ranking col:first-child { width: 36px; }
.arcade-ranking col:last-child { width: 78px; }
.arcade-ranking th { position: sticky; top: 0; z-index: 1; background: #10252a; color: #b9c9be; padding: 10px 5px; height: 38px; text-align: left; font-size: 10px; border-bottom: 1px solid var(--ranking-border); }
.arcade-ranking td { height: 44px; padding: 7px 5px; border-bottom: 1px solid #ffffff09; text-align: left; background: var(--ranking-row); }
.arcade-ranking th:first-child, .arcade-ranking td.arcade-ranking-position { text-align: center; }
.arcade-ranking th:last-child, .arcade-ranking td.arcade-ranking-score { text-align: right; padding-right: 9px; font-variant-numeric: tabular-nums; font-weight: 700; }
.arcade-ranking-player { display: flex; align-items: center; gap: 7px; min-width: 0; }
.arcade-ranking-avatar { display: grid; place-items: center; position: relative; width: 27px; height: 27px; flex: 0 0 27px; border-radius: 50%; background: #435e56; color: #fff; font-size: 12px; overflow: hidden; }
.arcade-ranking-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.arcade-ranking-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.arcade-ranking .podium-1 { color: #ffe29a; }
.arcade-ranking .podium-2 { color: #d9e0ec; }
.arcade-ranking .podium-3 { color: #e9b18e; }
.arcade-ranking .is-own td { background: #345044; }
.arcade-ranking .is-own td:first-child { box-shadow: inset 2px 0 var(--ranking-accent); }
.arcade-ranking td.arcade-ranking-empty { height: 130px; white-space: normal; text-align: center; padding: 25px 16px; color: #bfcdc3; }
.arcade-ranking-status { min-height: 17px; margin: 10px 0 0; color: #b6c7bb; font-size: 10px; }
.arcade-ranking-note { margin: 7px 0 0; color: #95aaa0; font-size: 10px; line-height: 1.65; }
.arcade-ranking :focus-visible { outline: 2px solid var(--ranking-accent); outline-offset: 3px; }
.arcade-ranking [hidden] { display: none !important; }
@media (max-width: 999px) {
    .arcade-game-layout { grid-template-columns: minmax(0, 1fr); }
    .arcade-ranking { width: 100%; max-width: 620px; margin: 6px auto 20px; }
    .arcade-ranking col:last-child { width: 100px; }
}
@media (min-width: 1000px) and (min-height: 600px) {
    .arcade-game-layout { min-height: 0; gap: 18px; align-items: stretch; }
    .arcade-ranking { display: flex; flex-direction: column; margin-top: 0; max-height: 100%; padding: 14px; }
    .arcade-ranking > * { flex-shrink: 0; }
    .arcade-ranking .arcade-ranking-scroll { flex: 0 1 auto; min-height: 80px; }
}

.arcade-game-layout:has(> #topView[hidden]) { grid-template-columns: minmax(0, 1fr); }
.arcade-ranking-cheat { color: inherit; text-decoration-color: #ef4444; text-decoration-thickness: 2px; }