.subway-rank-dialog { width:min(640px,calc(100vw - 24px)); background:#eef8ff; border:3px solid #092443; border-radius:24px; color:#133558; box-shadow:0 8px 0 #061a32; }
.subway-rank-dialog .modal__header { background:#087fca; color:#fff; border-radius:20px 20px 0 0; padding:22px 24px; border-bottom:3px solid #092443; }
.subway-rank-dialog .modal__header p { color:#ffdb50; font-weight:900; letter-spacing:.1em; }
.subway-rank-dialog .modal__header h2 { font-weight:1000; text-transform:uppercase; }
.subway-rank-dialog .modal__body { padding:20px 24px 24px; }
.subway-rank-dialog .icon-button { color:white; background:#085482; border:2px solid #cbeaff; }
.subway-rank-list { margin:0; padding:0; list-style:none; }
.subway-rank-row { display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:61px; padding:9px 4px; border-bottom:1px solid #b8d5e6; font-size:13px; }
.subway-rank-row > span { min-width:0; }
.subway-rank-row > span > strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.subway-rank-row small { display:block; margin-top:3px; font-size:10px; color:#486b86; }
.subway-rank-row > strong { font-variant-numeric:tabular-nums; white-space:nowrap; }
.subway-rank-row.is-you { background:#ffefb1; border-radius:9px; padding-inline:7px; }
.subway-rank-place { display:grid; place-items:center; height:33px; background:#dbe9f2; color:#1a4167; border-radius:9px; border:2px solid #8bafc7; font-size:14px; }
.subway-rank-place[data-place="1"] { background:#ffd23e; border-color:#d49819; color:#65400a; }
.subway-rank-place[data-place="2"] { background:#ddebf4; border-color:#8aa9bc; }
.subway-rank-place[data-place="3"] { background:#f7c390; border-color:#bf7950; color:#704225; }
.subway-rank-caption { margin:10px 0; font-size:11px; line-height:1.5; color:#4a6a81; }
.subway-rank-empty { padding:20px 3px; font-size:13px; text-align:center; }
.subway-rank-empty strong { display:block; font-size:16px; }
.subway-rank-empty p { margin:8px auto 0; max-width:34ch; line-height:1.55; }
.subway-rank-empty button { margin-top:14px; padding:10px 18px; background:#ffcc37; border:2px solid #123557; border-radius:10px; color:#123557; font-weight:850; cursor:pointer; }
.subway-rank-prizes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:14px 0; }
.subway-rank-prizes > div { background:#fff0b3; border:2px solid #e2bd54; border-radius:12px; padding:11px 5px; text-align:center; }
.subway-rank-prizes small { display:block; color:#725211; font-size:10px; text-transform:uppercase; font-weight:900; }
.subway-rank-prizes strong { display:block; margin-top:5px; color:#203a50; font-size:clamp(11px,3vw,17px); overflow-wrap:anywhere; }
.subway-rank-personal { display:grid; grid-template-columns:1fr auto; gap:4px 12px; margin:20px 0; padding:14px 16px; background:#133e66; color:white; border-radius:12px; }
.subway-rank-personal span { font-size:12px; align-self:center; }
.subway-rank-personal strong { color:#ffda4a; }
.subway-rank-personal b { grid-column:1/-1; font-size:11px; }
.subway-rank-columns { display:flex; justify-content:space-between; font-size:10px; font-weight:900; color:#5a7891; text-transform:uppercase; padding:5px 4px; }
.subway-rank-rules { border-top:1px solid #b8d5e6; padding-top:15px; margin-top:16px; font-size:12px; line-height:1.6; }
.subway-rank-rules summary { cursor:pointer; font-weight:800; }
.subway-rank-notice { padding:12px; border:1px solid #deb257; background:#fff1bf; border-radius:9px; font-size:12px; line-height:1.5; }
@media(max-width:480px) { .subway-rank-dialog .modal__body { padding:15px; } .subway-rank-dialog .modal__header { padding:18px; } .subway-rank-row { font-size:12px; gap:7px; } }