.rank-page{position:fixed;inset:0;max-width:480px;margin:auto;z-index:60;background:#11091E;overflow:auto;overscroll-behavior:contain;scrollbar-width:none;isolation:isolate;--rank-accent:#EDCF85}.rank-page[hidden]{display:none}.rank-page.cp{--rank-accent:#F3ADC8}.rank-page.charm{--rank-accent:#D3B5FF}.rank-page.game{--rank-accent:#BB9AFF}.rank-scene{position:absolute;inset:0 0 auto;height:1100px;z-index:-1;background:linear-gradient(180deg,#11091e44,transparent 18%,#11091e22 50%,#11091e 62%),url('assets/royal-palace.webp') center top/100% auto no-repeat;pointer-events:none}.cp .rank-scene{background-image:linear-gradient(180deg,#33132a55,transparent 18%,#33132a22 50%,#11091e 62%),url('assets/royal-palace.webp')}.rank-controls{position:sticky;top:0;z-index:8;padding:calc(9px + env(safe-area-inset-top)) 9px 12px;background:transparent}.rank-nav-row{display:flex;align-items:center;gap:2px}.rank-back,.rank-info{display:grid;place-items:center;width:32px;height:36px;flex-shrink:0;color:#FAF5FF;padding:3px}.rank-info{width:27px;color:#EDCF85}.rank-info svg{width:18px;height:18px}.rank-category-tabs{display:flex;gap:20px;overflow:auto;scrollbar-width:none;flex:1;min-width:0;padding:0 7px}.rank-category-tabs button{position:relative;flex-shrink:0;font-size:13px;font-weight:500;white-space:nowrap;color:#d0c2dc;padding:10px 0 12px}.rank-category-tabs button[aria-pressed=true]{color:#FAF5FF;font-weight:750}.rank-category-tabs button[aria-pressed=true]:after{content:"";position:absolute;bottom:4px;left:25%;right:25%;height:2px;background:#EDCF85;border-radius:2px;box-shadow:0 0 8px #edcf8555}.rank-periods{display:flex;margin:7px 6px 0;padding:3px;border:1px solid #edcf8566;border-radius:24px;box-shadow:inset 0 0 8px #edcf8512;background:#11091e80}.rank-periods button{flex:1;padding:7px 4px;border-radius:20px;font-size:12px;color:#e0d4ea}.rank-periods button[aria-pressed=true]{background:linear-gradient(135deg,#f8e5ae,#EDCF85 60%,#c89850);box-shadow:0 2px 9px #0005,inset 0 1px #fff9;color:#301c27;font-weight:750}.rank-hero{position:relative;aspect-ratio:1 / 1.65;width:100%;max-height:none}.rank-winner{position:absolute;width:44%;aspect-ratio:2 / 3;padding:0;text-align:center;filter:drop-shadow(0 9px 10px #06020b99);isolation:isolate}.rank-winner:active{transform:none}.rank-winner.place-1{left:20%;top:0;width:60%;z-index:3}.rank-winner.place-2{left:0;top:44%;z-index:2}.rank-winner.place-3{right:0;top:44%;z-index:2}.winner-regalia{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:1;pointer-events:none}.winner-photos{position:absolute;inset:0;z-index:0;pointer-events:none}.winner-photos>img{position:absolute;left:27.5%;top:12.3%;width:45%;aspect-ratio:1;border-radius:50%;object-fit:cover;object-position:center;box-shadow:0 0 0 1px #21152F}.couple-winner .winner-photos>img{width:32%;top:16.3%;left:14%}.couple-winner .winner-photos>img+img{left:54%}.winner-position{position:absolute;top:40.5%;left:22%;width:56%;z-index:2;font:bold clamp(12px,3.8vw,17px) Georgia,serif;line-height:1.05;color:#34202b;text-shadow:0 1px #fff1b8}.place-2 .winner-position,.place-3 .winner-position{font-size:clamp(10px,2.8vw,13px)}.winner-details{position:absolute;top:57%;left:17%;right:17%;z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px}.winner-name{display:block;max-width:100%;font-size:clamp(12px,3.7vw,17px);line-height:1.25;font-weight:650;color:#FAF5FF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 4px #000}.place-2 .winner-name,.place-3 .winner-name{font-size:clamp(10px,3.1vw,14px)}.winner-badges{display:flex;align-items:center;justify-content:center;gap:4px;max-width:100%}.winner-badges>span{display:flex;align-items:center;gap:1px;padding:1px 4px 1px 0;background:#9b6cff25;border:1px solid #edcf8522;border-radius:7px;font-size:9px;color:#f5e8ff;line-height:1}.winner-badges img{width:16px;height:16px;object-fit:contain}.place-2 .winner-badges,.place-3 .winner-badges{gap:2px}.place-2 .winner-badges>span,.place-3 .winner-badges>span{font-size:8px;padding-right:2px}.place-2 .winner-badges img,.place-3 .winner-badges img{width:13px;height:13px}.winner-score{display:flex;align-items:center;gap:4px;white-space:nowrap;font-size:clamp(11px,3.3vw,15px);line-height:1.4;color:var(--rank-accent);font-weight:650}.winner-score img{width:17px;height:17px;object-fit:contain}.place-2 .winner-score,.place-3 .winner-score{font-size:11px}.rank-list-section{position:relative;padding:0 15px calc(25px + env(safe-area-inset-bottom));margin-top:-12px}.rank-list{display:flex;flex-direction:column;gap:9px}.leader-row{position:relative;display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:11px 10px;min-height:83px;border:1px solid #edcf8540;border-radius:5px 18px 5px 18px;background:linear-gradient(110deg,#3e295377,#21152fcc 55%,#38224799);box-shadow:inset 0 0 0 3px #11091e55}.leader-row:before,.leader-row:after{content:"";position:absolute;width:5px;height:5px;background:#EDCF85;transform:rotate(45deg);opacity:.8;left:-3px;top:calc(50% - 2px)}.leader-row:after{left:auto;right:-3px}.leader-position{width:18px;flex-shrink:0;color:#EDCF85;font:18px Georgia,serif;text-align:center}.leader-avatar{position:relative;width:53px;height:59px;flex-shrink:0}.leader-photo{position:absolute;left:23.5%;top:25.7%;width:53%;aspect-ratio:1;border-radius:50%;object-fit:cover}.leader-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}.leader-pair{display:flex;width:59px;flex-shrink:0}.leader-pair img{width:35px;height:35px;object-fit:cover;border-radius:50%;border:2px solid #EDCF85;margin-right:-11px}.leader-copy{flex:1;min-width:0}.leader-copy strong{display:block;font-size:13px;font-weight:600;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.leader-copy .winner-badges{justify-content:flex-start;margin-top:7px}.leader-total{display:flex;align-items:center;gap:3px;font-size:12px;color:var(--rank-accent);white-space:nowrap}.leader-total img{width:17px;height:17px;object-fit:contain}.rank-edit{display:flex;align-items:center;gap:6px;margin:21px auto 0;color:#A89AB9;font-size:11px;padding:9px 14px}.rank-edit svg{width:13px;height:13px}.ranking-edit-row{display:grid;grid-template-columns:minmax(0,1fr) 105px;gap:9px;align-items:center;margin:12px 0}.ranking-edit-row label{font-size:11px}.ranking-edit-row input{margin-top:5px;width:100%;min-width:0;font-size:12px}.ranking-edit-row>span{grid-column:1/-1;color:#EDCF85;font-size:11px}.rank-rules p{font-size:13px;line-height:1.6}@media(max-width:350px){.rank-category-tabs{gap:16px}.rank-category-tabs button{font-size:12px}.winner-details{gap:4px;left:16%;right:16%}.winner-badges img{width:13px;height:13px}.leader-row{gap:6px;padding:9px 7px}.leader-total{font-size:11px}.leader-copy strong{font-size:12px}.rank-list-section{padding-left:10px;padding-right:10px}}

.charm .rank-scene{background-image:linear-gradient(180deg,#11091e55,transparent 18%,#11091e22 50%,#11091e 62%),url("assets/royal-palace-charm.webp")}
.cp .rank-scene{background-image:linear-gradient(180deg,#11091e55,transparent 18%,#11091e22 50%,#11091e 62%),url("assets/royal-palace-cp.webp")}
.game .rank-scene{background-image:linear-gradient(180deg,#11091e55,transparent 18%,#11091e22 50%,#11091e 62%),url("assets/royal-palace-game.webp")}

.rank-back:focus-visible,.rank-info:focus-visible{outline:2px solid #EDCF85;outline-offset:0;border-radius:50%}

.rank-page.rank-scrolled .rank-controls{background:linear-gradient(180deg,#11091ef5,#11091ee8 80%,#11091e00)}

/* Reusable generated row artwork. Content remains separate and editable. */
.leader-row{min-height:92px;padding:13px 14px;border:0;border-radius:0;background:none;box-shadow:none;isolation:isolate}
.leader-row:before,.leader-row:after{content:none}
.leader-card-art{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;object-fit:fill}
.rank-list-section{padding-bottom:calc(125px + env(safe-area-inset-bottom))}
.rank-viewer{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;z-index:10;padding:7px 10px calc(7px + env(safe-area-inset-bottom));background:linear-gradient(180deg,#11091e00,#11091ef5 28%,#11091E 80%)}
.rank-viewer[hidden]{display:none}
.viewer-card{position:relative;display:flex;align-items:center;gap:9px;min-height:94px;padding:12px 16px;isolation:isolate}
.viewer-card-art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:-1;filter:brightness(1.12);pointer-events:none}
.viewer-rank{width:22px;flex-shrink:0;text-align:center;color:#EDCF85;font:19px Georgia,serif}
.viewer-avatar{position:relative;display:block;width:58px;height:63px;flex-shrink:0}
.viewer-photo,.viewer-initial{position:absolute;left:23.5%;top:25.7%;width:53%;aspect-ratio:1;border-radius:50%;object-fit:cover}
.viewer-initial{display:grid;place-items:center;background:#21152F;color:#EDCF85;font:19px Georgia,serif}
.viewer-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.viewer-copy{flex:1;min-width:0}.viewer-copy strong{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.viewer-copy small{display:block;color:#d5c4e7;font-size:10px;margin-top:3px}.viewer-vip{display:flex;align-items:center;gap:3px;color:#EDCF85;font-size:9px;margin-top:3px}.viewer-vip img{width:15px;height:15px;object-fit:contain}.viewer-total{display:flex;align-items:center;gap:4px;color:var(--rank-accent);font-size:13px;white-space:nowrap}.viewer-total img{width:19px;height:19px;object-fit:contain}
@media(max-width:350px){.leader-row{padding:12px 10px;gap:6px;min-height:86px}.rank-viewer{padding-left:6px;padding-right:6px}.viewer-card{padding:12px;gap:6px}.viewer-copy strong{font-size:12px}.viewer-copy small{font-size:9px}.viewer-avatar{width:51px;height:58px}.viewer-rank{width:17px}.viewer-total{font-size:12px}}

.viewer-vip>span{display:flex;align-items:center;gap:1px;background:#9b6cff25;border:1px solid #edcf8522;border-radius:6px;padding-right:3px;font-size:8px}
.leader-row{padding-left:24px;padding-right:28px}
.viewer-card{padding-left:24px;padding-right:24px}
@media(max-width:350px){.leader-row{padding-left:21px;padding-right:23px}.viewer-card{padding-left:21px;padding-right:21px}.leader-copy .winner-badges{gap:2px}.leader-copy .winner-badges>span{font-size:8px}.leader-copy .winner-badges img{width:13px;height:13px}}

.rank-gifts{display:grid;place-items:center;width:43px;height:43px;flex-shrink:0;padding:0}.rank-gifts img{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 2px 5px #0008)}
/* Individual portraits in a CP ranking open that member's full profile. */
.winner-photos>img[data-royal-user],.leader-pair>img[data-royal-user]{pointer-events:auto;cursor:pointer}