/* Read-only ladder presentation. No rank, GP or performance calculations. */
#rankingScreen.theme-sky { background: #96d5f6 var(--sky-background) center / cover no-repeat; color: var(--sky-ink); }
#rankingScreen.theme-sky #rankingShell { position: absolute; inset: 0; width: auto; height: auto; display: grid; grid-template-columns: minmax(0,2fr) minmax(190px,1fr); grid-template-rows: 54px minmax(0,1fr) auto; gap: 10px; padding: 10px var(--theme-safe-right,10px) max(10px,env(safe-area-inset-bottom)) var(--theme-safe-left,10px); font: 15px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
#rankingScreen.theme-sky :is(#rankingTopBar,#rankingPanel,#performancePanel) { position: relative; inset: auto; width: auto; height: auto; min-height: 0; min-width: 0; border: 1.5px solid var(--sky-line); border-radius: 18px; background: #effaffee; box-shadow: var(--sky-shadow); color: var(--sky-ink); }
#rankingScreen.theme-sky #rankingTopBar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 0; border: 0; box-shadow: none; background: none; gap: 12px; }
#rankingScreen.theme-sky #rankingTopBar > div { min-width: 0; padding: 6px 12px; border-radius: 12px; background: #effaffee; }
#rankingScreen.theme-sky #rankingTopBar h1 { margin: 0; font-size: 22px; line-height: 26px; }
#rankingScreen.theme-sky #rankingTopBar h1 span { margin-left: 8px; font-size: 15px; font-weight: 650; color: #276786; }
#rankingScreen.theme-sky #rankingTopBar p { margin: 1px 0 0; font-size: 13px; line-height: 17px; color: var(--sky-muted); }
#rankingScreen.theme-sky #rankingBack { position: static; flex-shrink: 0; min-height: 44px; padding: 8px 14px; border: 1.5px solid #a7c8dd; background: #f7fcff; color: var(--sky-ink); font-size: 15px; }
#rankingScreen.theme-sky #rankingPanel { grid-column: 1; grid-row: 2; padding: 8px; overflow: hidden; }
#rankingScreen.theme-sky #rankingTable { height: 100%; min-height: 0; display: flex; flex-direction: column; }
#rankingScreen.theme-sky :is(#rankingColumns,.rankingRow) { grid-template-columns: 24px minmax(64px,1fr) minmax(57px,.7fr) minmax(32px,.3fr) minmax(44px,.3fr) minmax(54px,.4fr); column-gap: 5px; }
#rankingScreen.theme-sky #rankingColumns { position: static; flex: 0 0 36px; padding: 0 6px; height: auto; color: var(--sky-muted); font-size: 12px; text-transform: none; }
#rankingScreen.theme-sky #rankingColumns > span { white-space: nowrap; overflow-wrap: normal; }
#rankingScreen.theme-sky #rankingList { min-height: 0; flex: 1; height: auto; padding: 0; overflow: hidden auto; overscroll-behavior: contain; }
#rankingScreen.theme-sky .rankingRow { min-height: 48px; margin: 0; padding: 8px 6px; border: 0; border-bottom: 1px solid #cde0ec; border-radius: 0; background: transparent; color: var(--sky-ink); font-size: 14px; line-height: 19px; font-variant-numeric: tabular-nums; }
#rankingScreen.theme-sky .rankingRow.me { border-radius: 9px; background: #d8efff; box-shadow: inset 3px 0 #187cac; }
#rankingScreen.theme-sky .rankingRow > strong { color: #1c7097; font-size: 15px; }
#rankingScreen.theme-sky .rankingRow > div { gap: 4px; }
#rankingScreen.theme-sky .rankingRow > div > span:last-child { color: var(--sky-ink); white-space: normal; overflow-wrap: anywhere; }
#rankingScreen.theme-sky .rankingRow .rank { flex: 0 0 26px; }
#rankingScreen.theme-sky :is(#rankingColumns,.rankingRow) > :nth-child(n+3) { text-align: right; min-width: 0; overflow-wrap: anywhere; }
#rankingScreen.theme-sky #performancePanel { grid-column: 2; grid-row: 2; padding: 12px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
#rankingScreen.theme-sky #performancePanel .lobbyEyebrow { color: #276786; font-size: 11px; letter-spacing: 1px; }
#rankingScreen.theme-sky #performancePlayer { flex: 0 0 auto; margin: 0 0 2px; font-size: 17px; line-height: 22px; overflow-wrap: anywhere; }
#rankingScreen.theme-sky #performanceStats { min-height: 0; display: block; overflow: hidden auto; touch-action: pan-y; overscroll-behavior: contain; }
#rankingScreen.theme-sky #performanceStats div { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; margin: 0; padding: 8px 0; border: 0; border-bottom: 1px solid #cde0ec; border-radius: 0; background: none; font-size: 14px; line-height: 19px; }
#rankingScreen.theme-sky #performanceStats span { color: var(--sky-muted); }
#rankingScreen.theme-sky #performanceStats strong { color: var(--sky-ink); font-variant-numeric: tabular-nums; margin-left: auto; overflow-wrap: anywhere; max-width: 100%; }
#rankingScreen.theme-sky #rankingMessage { position: static; grid-column: 1; grid-row: 3; padding: 8px 12px; min-height: 0; border-radius: 10px; background: #effaff; color: var(--sky-muted); font-size: 14px; text-align: left; }
#rankingScreen.theme-sky #rankingMessage:empty { display: none; }
#rankingScreen.theme-sky #rankingRetry { grid-column: 2; grid-row: 3; min-height: 44px; font-size: 15px; }
#rankingScreen.theme-sky :is(#rankingList,#performanceStats)::-webkit-scrollbar { width: 4px; }
#rankingScreen.theme-sky :is(#rankingList,#performanceStats)::-webkit-scrollbar-thumb { background: #79aecb; border-radius: 4px; }
#rankingScreen.theme-sky :is(button,[tabindex]):focus-visible { outline: 2px solid #165f96; outline-offset: -3px; }
@media (min-width:1000px) and (min-height:600px) {
    #rankingScreen.theme-sky #rankingShell { grid-template-rows: 64px minmax(0,1fr) auto; gap: 16px; padding-top: 16px; padding-bottom: 16px; }
    #rankingScreen.theme-sky #rankingPanel { padding: 14px; }
    #rankingScreen.theme-sky .rankingRow { min-height: 56px; font-size: 17px; }
    #rankingScreen.theme-sky #rankingColumns { font-size: 14px; flex-basis: 38px; }
    #rankingScreen.theme-sky #performancePanel { padding: 20px; gap: 10px; }
    #rankingScreen.theme-sky #performanceStats div { font-size: 17px; line-height: 24px; padding: 12px 0; }
    #rankingScreen.theme-sky #performancePlayer { font-size: 22px; line-height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
    #rankingScreen.theme-sky * { animation: none !important; transition: none !important; }
}