#modal[data-kind=rankings]{width:min(790px,94cqw);max-height:92cqh;padding:28px 34px;background:#101b16;border:0;border-image:url('/public/assets/ui-valencia-ranking-frame-v1.webp') 145 fill / 32px / 0 stretch;box-shadow:0 10px 42px #0009;overflow:hidden}
#modal[data-kind=rankings] #modal-body{min-height:0;overflow:hidden}#modal[data-kind=rankings]>header{margin:0 0 12px;padding:0 44px 14px 0}#modal[data-kind=rankings] #modal-kicker{font-size:11px;letter-spacing:.1em}
.ranking-ledger{color:#e9e3d1;min-width:0}.ranking-toolbar,.ranking-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px}.ranking-toolbar p{font-size:14px;margin:0!important}.ranking-toolbar p span{display:block;color:#a9afa2;font-size:11px;margin-top:3px}
#modal .ranking-ledger button{min-width:44px;min-height:36px;padding:5px 12px;background:#233026;border:1px solid #756846;color:#e3d8ba;font-size:12px}#modal .ranking-ledger button:disabled{opacity:.35}
.ranking-columns,.ranking-list li{display:grid;grid-template-columns:52px 76px minmax(0,1fr) 72px;align-items:center;gap:12px}.ranking-columns{padding:10px 14px 8px;color:#b2ac94;font-size:11px;border-bottom:1px solid #82734b}.ranking-columns>:last-child{text-align:right}
.ranking-list{list-style:none;margin:0;padding:0 14px 0 0;max-height:min(400px,49cqh);overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;overscroll-behavior:contain}.ranking-list li{height:70px;padding:0 12px;border-bottom:1px solid #5c66562c}.ranking-list li.is-self{background:#66794c2d;border-left:2px solid #c2ae74;padding-left:10px}.ranking-place{font-size:22px;color:#c5b481;font-variant-numeric:tabular-nums}.ranking-place small{font-size:10px;margin-left:3px;color:#9c9f91}.ranking-list [data-rank="1"] .ranking-place{color:#f0cd70}.ranking-list [data-rank="2"] .ranking-place{color:#c8d5da}.ranking-list [data-rank="3"] .ranking-place{color:#cea180}.ranking-list canvas{width:64px;height:64px;image-rendering:pixelated}.ranking-name{min-width:0}.ranking-name strong{display:block;overflow-wrap:anywhere;font-size:14px;font-weight:500}.ranking-name small{display:block;font-size:10px;color:#d2bd80;margin-top:3px}.ranking-level{font-size:17px;font-weight:500;text-align:right;font-variant-numeric:tabular-nums}.ranking-level small{font-size:10px;color:#a5ac9d}.ranking-bottom{padding-top:12px;border-top:1px solid #82734b}.ranking-bottom p{margin:0!important;font-size:12px}.ranking-bottom p strong{color:#e4c477;margin:0 8px}.ranking-bottom p span{color:#a9afa2}.ranking-bottom nav{display:flex;align-items:center;gap:10px;font-size:12px;font-variant-numeric:tabular-nums}.ranking-updated{text-align:right;font-size:10px;color:#969e8e;margin:8px 0 0!important}.ranking-list .ranking-empty{display:block;height:auto;padding:35px 12px;color:#a9afa2}
#town-landmark-hint{position:absolute;z-index:15;transform:translateX(-50%);max-width:220px;padding:9px 13px;border:1px solid #adb4a32c;background:#101714f2;pointer-events:none;text-align:center;color:#e8dcc0}#town-landmark-hint[hidden]{display:none}#town-landmark-hint strong{display:block;font-size:13px;font-weight:500}#town-landmark-hint span{display:block;font-size:12px;color:#b9bdac;margin-top:4px}
@container game-viewport (max-height:500px){#modal[data-kind=rankings]{padding:17px 23px;border-image-width:22px;max-height:94cqh}#modal[data-kind=rankings]>header{margin-bottom:5px;padding-bottom:7px}#modal[data-kind=rankings] h2{font-size:20px}.ranking-toolbar p{font-size:12px}.ranking-toolbar p span{font-size:10px;display:inline;margin-left:9px}.ranking-columns{padding-top:6px;padding-bottom:5px}.ranking-list{max-height:43cqh}.ranking-list li{height:59px}.ranking-list canvas{width:54px;height:54px}.ranking-place{font-size:19px}.ranking-name strong{font-size:12px}.ranking-bottom{padding-top:6px}.ranking-updated{margin-top:4px!important}.ranking-bottom nav{gap:7px}#modal .ranking-ledger button{min-height:31px}}
@container game-viewport (max-width:700px){.ranking-columns,.ranking-list li{grid-template-columns:36px 56px minmax(0,1fr) 55px;gap:7px}.ranking-list{padding-right:12px}.ranking-toolbar p span{display:block;margin:2px 0 0}.ranking-name strong{font-size:12px}.ranking-bottom p span{display:none}.ranking-level{font-size:15px}.ranking-place{font-size:18px}}
/* The shared window foundation is intentionally overridden only for these
   ranking board. Phone type/hitboxes stay in physical screen pixels. */
#game #modal[data-kind=rankings]{
 position:relative;
 --board-scale:1;--ui-frame:url('/public/assets/ui-valencia-ranking-frame-v1.webp');
 width:min(820px,94cqw);padding:28px 32px 22px;
 border:12px solid transparent;border-image:var(--ui-frame) 145 fill / 20px / 0 stretch!important;
 background:#101b16!important;
}
#game #modal[data-kind=rankings]>header{padding-bottom:10px;margin-bottom:10px}
body.gamepad #game #modal[data-kind=rankings]{--board-scale:var(--inverse-ui-scale);width:94cqw;padding:var(--ui-pad);border-width:6px;border-image-width:14px}
body.gamepad #game #modal[data-kind=rankings]>header{padding-bottom:calc(6px * var(--board-scale));margin-bottom:calc(6px * var(--board-scale))}
body.gamepad #game #modal[data-kind=rankings] #modal-kicker{display:none}
body.gamepad #game #modal[data-kind=rankings] .ranking-toolbar{gap:calc(8px * var(--board-scale))}
body.gamepad #game #modal[data-kind=rankings] .ranking-toolbar p{font-size:var(--ui-body)}
body.gamepad #game #modal[data-kind=rankings] .ranking-toolbar p span{display:inline;margin-left:calc(8px * var(--board-scale));font-size:var(--ui-meta)}
body.gamepad #game #modal[data-kind=rankings] .ranking-columns,
body.gamepad #game #modal[data-kind=rankings] .ranking-list li{grid-template-columns:calc(38px * var(--board-scale)) calc(62px * var(--board-scale)) minmax(0,1fr) calc(62px * var(--board-scale));gap:calc(9px * var(--board-scale));padding-inline:calc(8px * var(--board-scale))}
body.gamepad #game #modal[data-kind=rankings] .ranking-columns{font-size:var(--ui-meta);padding-block:calc(4px * var(--board-scale))}
body.gamepad #game #modal[data-kind=rankings] .ranking-list{max-height:43cqh;padding-right:calc(10px * var(--board-scale))}
body.gamepad #game #modal[data-kind=rankings] .ranking-list li{height:calc(60px * var(--board-scale))}
body.gamepad #game #modal[data-kind=rankings] .ranking-list canvas{width:calc(58px * var(--board-scale));height:calc(58px * var(--board-scale))}
body.gamepad #game #modal[data-kind=rankings] .ranking-name strong{font-size:calc(12px * var(--board-scale))}
body.gamepad #game #modal[data-kind=rankings] .ranking-name small,
body.gamepad #game #modal[data-kind=rankings] .ranking-place small,
body.gamepad #game #modal[data-kind=rankings] .ranking-level small{font-size:var(--ui-meta)}
body.gamepad #game #modal[data-kind=rankings] .ranking-place{font-size:calc(19px * var(--board-scale))}
body.gamepad #game #modal[data-kind=rankings] .ranking-level{font-size:calc(16px * var(--board-scale))}
body.gamepad #game #modal[data-kind=rankings] .ranking-bottom{padding-top:calc(6px * var(--board-scale))}
body.gamepad #game #modal[data-kind=rankings] .ranking-bottom :is(p,nav){font-size:var(--ui-body)}
body.gamepad #game #modal[data-kind=rankings] .ranking-bottom nav{gap:calc(8px * var(--board-scale))}
body.gamepad #game #modal[data-kind=rankings] .ranking-ledger button{font-size:var(--ui-body);min-height:var(--ui-control);min-width:calc(38px * var(--board-scale));padding:calc(4px * var(--board-scale)) calc(10px * var(--board-scale))}
body.gamepad #game #modal[data-kind=rankings] .ranking-updated{font-size:calc(9px * var(--board-scale));margin-top:calc(4px * var(--board-scale))!important}
body.gamepad #town-landmark-hint{font-size:var(--ui-body);max-width:calc(200px * var(--inverse-ui-scale));padding:calc(6px * var(--inverse-ui-scale)) calc(10px * var(--inverse-ui-scale))}
body.gamepad #town-landmark-hint strong{font-size:var(--ui-body)}body.gamepad #town-landmark-hint span{font-size:var(--ui-meta)}