ranking-screen{display:flex;flex-direction:column;gap:.9rem;overflow-y:auto;padding:clamp(1.25rem,4vh,2.5rem) clamp(1.25rem,6vw,2rem) max(env(safe-area-inset-bottom),1.5rem);width:min(100%,640px);margin-inline:auto;background:var(--color-surface)}ranking-screen>*{flex-shrink:0}ranking-head{display:flex;align-items:center;gap:.6rem}head-back button{display:grid;place-items:center;width:44px;height:44px;color:var(--color-on-surface-variant);transition:background-color .2s var(--ease-emphasized),transform .25s var(--ease-spring)}head-back button:hover{background:var(--color-surface-container-high)}head-back button:active{transform:scale(.9)}head-title{flex:1;font-family:var(--font-serif);font-weight:640;font-variation-settings:"WONK" 1,"SOFT" 0;font-size:1.65rem}head-help button{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem .7rem;background:var(--color-surface-container-lowest);color:var(--color-on-surface-variant);border:var(--line-thin) solid var(--color-outline-variant);font-weight:700;font-size:.76rem;transition:background-color .2s var(--ease-emphasized),color .2s var(--ease-emphasized)}head-help button:hover{background:var(--color-tertiary-container);color:var(--color-on-tertiary-container)}head-help m-symbol{font-size:18px}metric-block{display:flex;flex-direction:column;gap:.4rem}block-label{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-on-surface-variant)}block-label m-symbol{font-size:17px}metric-block[period=week] block-label m-symbol{color:var(--color-violet)}metric-row{display:grid;grid-template-columns:repeat(3,1fr);border:var(--frame-width) solid var(--frame-color);background:var(--color-surface-container-lowest);box-shadow:4px 4px 0 var(--shadow-ink)}metric-block[period=week] metric-row{box-shadow:4px 4px 0 var(--color-violet);border-color:var(--color-violet)}metric-cell{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.75rem .4rem}metric-cell+metric-cell{border-left:var(--line-thin) solid var(--color-outline-variant)}metric-name{font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-on-surface-variant)}metric-value{font-family:var(--font-serif);font-weight:640;font-size:1.3rem;font-variant-numeric:tabular-nums;text-align:center}champion-card{display:flex;flex-direction:column;gap:.4rem}champion-card block-label m-symbol{color:var(--color-violet)}champion-row{display:flex;align-items:center;gap:.6rem;padding:.7rem .8rem;background:var(--color-violet-container);border:var(--frame-width) solid var(--color-violet);color:var(--color-on-violet-container)}champion-card[state=empty] champion-row{display:none}champion-row user-avatar{width:40px;height:40px;flex-shrink:0;border:var(--line-thin) solid var(--color-violet)}champion-row badge-emblem{flex-shrink:0}champion-name{flex:1;min-width:0;font-family:var(--font-serif);font-weight:640;font-size:1.15rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}champion-score{flex-shrink:0;font-family:var(--font-serif);font-weight:640;font-size:1.05rem;font-variant-numeric:tabular-nums}champion-empty{padding:.7rem .8rem;background:var(--color-surface-container-lowest);border:var(--line-thin) dashed var(--color-outline-variant);font-size:.85rem;color:var(--color-on-surface-variant);text-align:center}champion-card[state=crowned] champion-empty{display:none}rank-tabs{display:flex;border:var(--frame-width) solid var(--frame-color);margin-top:.3rem}rank-tab{flex:1;padding:.6rem 0;text-align:center;font-weight:700;font-size:.86rem;color:var(--color-on-surface-variant);cursor:pointer;transition:background-color .2s var(--ease-emphasized),color .2s var(--ease-emphasized)}rank-tab+rank-tab{border-left:var(--line-thin) solid var(--color-outline-variant)}rank-tab[selected=true]{background:var(--color-primary);color:var(--color-on-primary)}champions-guide{display:flex;flex-direction:column;gap:.7rem;padding:.9rem;background:var(--color-violet-container);border:var(--line-thin) solid var(--color-violet)}champions-guide[shown=false]{display:none}guide-text{font-size:.85rem;line-height:1.45;color:var(--color-on-violet-container);text-align:center}guide-ladder{display:flex;align-items:center;justify-content:center;gap:.2rem}guide-step{display:flex;flex-direction:column;align-items:center;gap:.2rem}guide-tier{font-size:.66rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--color-on-violet-container)}guide-arrow{display:grid;place-items:center;color:var(--color-violet);opacity:.7}guide-arrow m-symbol{font-size:20px}score-table{display:flex;flex-direction:column;border:var(--frame-width) solid var(--frame-color);background:var(--color-surface-container-lowest)}table-head,table-row{display:grid;align-items:center;gap:.5rem;padding:.6rem .7rem}score-table[scope=points] table-head,score-table[scope=points] table-row{grid-template-columns:2rem 1fr 4.5rem 4.5rem}score-table[scope=champions] table-row{grid-template-columns:2rem 1fr auto}table-head{border-bottom:var(--frame-width) solid var(--frame-color);background:var(--color-surface-container);font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-on-surface-variant)}table-head col-day,table-head col-week{text-align:right}table-row+table-row{border-top:var(--line-thin) solid var(--color-outline-variant)}table-row[me=true]{background:var(--color-tertiary-container);color:var(--color-on-tertiary-container)}col-pos{font-family:var(--font-serif);font-weight:640;font-size:1.05rem;color:var(--color-on-surface-variant)}table-row[me=true] col-pos{color:var(--color-on-tertiary-container)}score-table table-row:nth-of-type(1) col-pos{color:var(--color-tertiary)}score-table table-row:nth-of-type(2) col-pos{color:var(--color-secondary)}score-table table-row:nth-of-type(3) col-pos{color:var(--color-coral)}col-user{display:flex;align-items:center;gap:.45rem;min-width:0}col-user user-avatar{width:30px;height:30px;flex-shrink:0;border:var(--line-thin) solid var(--color-outline-variant)}col-user badge-emblem{flex-shrink:0;width:24px;height:24px}col-user badge-emblem[empty=true]{visibility:hidden}user-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}col-day,col-week{font-family:var(--font-serif);font-weight:640;font-size:1rem;font-variant-numeric:tabular-nums;text-align:right}col-week{color:var(--color-violet)}table-row[me=true] col-week{color:var(--color-on-tertiary-container)}col-level{font-weight:700;font-size:.8rem;text-align:right;color:var(--color-on-surface-variant)}table-row[me=true] col-level{color:var(--color-on-tertiary-container)}table-empty{padding:1.4rem .7rem;text-align:center;font-size:.88rem;color:var(--color-on-surface-variant)}@media(max-width:480px){table-head,table-row{gap:.35rem;padding:.6rem .5rem}score-table[scope=points] table-head,score-table[scope=points] table-row{grid-template-columns:1.3rem 1fr 3.4rem 3.4rem}score-table[scope=champions] table-row{grid-template-columns:1.3rem 1fr auto}col-user user-avatar{width:26px;height:26px}col-user badge-emblem{width:18px;height:18px}col-day,col-week{font-size:.92rem}table-head{font-size:.6rem;letter-spacing:.03em}}