/* The ranking page on the shared Metal Strogg sheet (public/ui/metal.css, loaded first).
   Mockup: docs/superpowers/specs/2026-09-27-sitio-metal-strogg/capturas/ranking.webp */
:root{color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
body.m-page{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--m-ink);color:var(--m-text);font:400 16px/1.5 var(--m-f-body)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.rk-main{--rk-gutter:clamp(16px,4vw,56px);flex:1;width:100%;max-width:1440px;margin:0 auto;padding:0 var(--rk-gutter) 32px}

/* Embedded (inside the game or the home overlay): a slim bar instead of the site chrome. */
.rk-embed-bar{display:none}
html[data-embedded] .rk-embed-bar{display:flex;align-items:center;gap:18px;padding:10px clamp(16px,3vw,32px);background:linear-gradient(180deg,#24211c,#15130f);border-bottom:1px solid #3d372d}
.rk-embed-bar .m-label{margin-right:auto}
.rk-embed-bar .m-link{font-size:13px}

/* Heading: q2dm2 behind a dark wash; texture never sits behind long text. */
.rk-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:18px 24px;margin:0 calc(-1 * var(--rk-gutter));padding:40px var(--rk-gutter) 0;border-bottom:1px solid var(--m-edge);background:linear-gradient(90deg,var(--m-ink) 30%,rgba(12,11,9,.72)),linear-gradient(0deg,var(--m-ink),rgba(12,11,9,0) 60%),url(/ui/maps/q2dm2.webp) center 40%/cover}
html[data-embedded] .rk-head{padding-top:22px}
.rk-title{margin:10px 0 0;font:900 clamp(56px,7vw,84px)/.9 var(--m-f-title);text-transform:uppercase}
.rk-sub{margin:10px 0 0;font:500 18px/1.45 var(--m-f-body);color:var(--m-text)}
.rk-counters{display:flex;gap:14px}
.rk-counters .m-lcdbox{min-width:120px;justify-items:center;text-align:center}
.rk-lcd-slot{display:inline-flex;align-items:flex-end;gap:6px;min-height:40px}
.rk-lcd-slot small{font:700 14px/1 var(--m-f-ui);color:var(--m-lcd)}
.rk-lcd-empty{font:700 32px/40px var(--m-f-ui);color:var(--m-dim)}
.rk-tabs{grid-column:1/-1;margin-top:8px;border-bottom:0}

/* Podium: first place in the middle, taller and in gold. */
@keyframes rk-in{from{opacity:0;transform:translateY(10px)}}
.rk-podium{list-style:none;margin:0;padding:34px 0 10px;display:grid;grid-template-columns:1fr 1.18fr 1fr;gap:20px;align-items:end}
.rk-podium:empty{display:none}
.rk-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 18px 20px;text-align:center;animation:rk-in .35s ease-out both}
.rk-card[data-place="1"]{order:2}
.rk-card[data-place="2"]{order:1}
.rk-card[data-place="3"]{order:3}
.rk-crown{margin:0;font:700 12px var(--m-f-ui);letter-spacing:.26em;text-transform:uppercase;color:var(--m-amber)}
.rk-crown::before{content:"★ "}
.rk-crown::after{content:" ★"}
/* The portrait well matches the home podium (app/lobby.css .m-podium-card img) and the mockup. */
.rk-card img{display:block;width:170px;height:200px;object-fit:cover;object-position:center 30%;border:1px solid var(--m-edge2);background:radial-gradient(ellipse at 50% 60%,#2a3421,#12160f);box-shadow:inset 0 0 26px rgba(0,0,0,.7)}
.rk-card[data-place="1"] img{width:210px;height:250px;border-color:#b98a2c;box-shadow:0 0 30px rgba(255,177,59,.25)}
.rk-card-name{margin:8px 0 0;font:900 34px/1 var(--m-f-title);letter-spacing:.03em;text-transform:uppercase;overflow-wrap:anywhere}
.rk-card-name a{color:var(--m-cream);text-decoration:none}
.rk-card-name a:hover{color:var(--m-amber)}
.rk-card-name a:focus-visible{outline:2px solid var(--m-amber);outline-offset:4px}
.rk-card-meta{margin:0;font:600 12.5px var(--m-f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--m-mute)}
/* One tag row height whether or not a weapon tag is present, so the side cards line up. */
.rk-card-tags{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;min-height:20px;margin-top:4px}

/* Search, order and summary */
.rk-tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:20px 0 8px}
.rk-search{flex:0 1 380px;min-width:0;height:46px;padding:0 14px;background:var(--m-field);border:1px solid #4a4336;border-radius:0;box-shadow:inset 0 2px 8px rgba(0,0,0,.6);color:var(--m-cream);font:500 16px var(--m-f-body)}
.rk-search::placeholder{color:var(--m-dim)}
.rk-search:focus-visible{outline:none;border-color:var(--m-amber);box-shadow:0 0 0 3px rgba(255,177,59,.2),inset 0 2px 8px rgba(0,0,0,.6)}
.rk-sorts{display:flex;flex-wrap:wrap;gap:8px}
.rk-chip{appearance:none;cursor:pointer;min-height:40px;padding:8px 14px;border:1px solid #4a4336;background:transparent;color:var(--m-mute);font:600 13px var(--m-f-ui);letter-spacing:.12em;text-transform:uppercase}
.rk-chip[aria-pressed=true]{color:var(--m-on-hot);background:var(--m-amber);border-color:var(--m-amber)}
.rk-chip:not([aria-pressed=true]):hover{color:var(--m-cream);border-color:var(--m-amber)}
.rk-chip:focus-visible{outline:2px solid var(--m-amber);outline-offset:2px}
.rk-summary{margin-left:auto;font:600 13px var(--m-f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--m-mute)}
.rk-rule{margin:6px 0 0;font:500 13px/1.6 var(--m-f-body);color:var(--m-mute)}
.rk-status{min-height:21px;margin:6px 0;font:500 14px/1.6 var(--m-f-body);color:var(--m-text)}

/* Table */
/* Positioned so the absolutely positioned .sr-only labels inside the rows are clipped by this
   scroller instead of widening the page on phones. */
.table-scroll{position:relative;overflow-x:auto;border-top:1px solid var(--m-edge)}
.table-scroll:focus-visible{outline:2px solid var(--m-amber);outline-offset:3px}
.rk-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.rk-table th{padding:12px 14px;border-bottom:1px solid var(--m-edge);text-align:left;white-space:nowrap;font:600 11px var(--m-f-ui);letter-spacing:.22em;text-transform:uppercase;color:var(--m-mute)}
.rk-table td{padding:10px 14px;border-bottom:1px solid #26231e;vertical-align:middle;color:var(--m-text);font:500 16px var(--m-f-body)}
.rk-table tbody tr:hover td{background:rgba(255,255,255,.025)}
.rk-row[data-me] td{background:rgba(255,177,59,.07)}
.rk-row[data-me] td:first-child{box-shadow:inset 3px 0 0 var(--m-amber)}
.rk-pos{width:70px}
.rk-who{display:flex;align-items:center;gap:12px;min-width:220px}
.rk-avatar{flex:none;width:44px;height:44px;object-fit:cover;object-position:center 22%;border:1px solid var(--m-edge2);background:radial-gradient(ellipse at 50% 60%,#2a3421,#12160f)}
.rank-player{font:700 18px/1.1 var(--m-f-ui);letter-spacing:.02em;color:var(--m-cream);text-decoration:none;overflow-wrap:anywhere}
.rank-player:hover{color:var(--m-amber);text-decoration:underline}
.rank-player:focus-visible{outline:2px solid var(--m-amber);outline-offset:3px}
.rk-me{margin-left:8px;color:var(--m-amber);vertical-align:2px}
.rk-skin{display:block;margin-top:3px}
.rk-meta{display:block;margin-top:2px;font:500 12px/1.4 var(--m-f-body);color:var(--sb-accent,var(--m-mute))}
[data-theme=founder],[data-theme=copper]{--sb-accent:#edac46}
[data-theme=supporter]{--sb-accent:#e3a371}
[data-theme=supporter-silver]{--sb-accent:#d0e5ef}
[data-theme=supporter-gold]{--sb-accent:#ffdc72}
[data-theme=polar]{--sb-accent:#a1ddec}
[data-theme=pikachu]{--sb-accent:#f8d958}
[data-theme=segador]{--sb-accent:#aab9d7}
[data-theme=marea]{--sb-accent:#65bbc8}
[data-theme=centinela]{--sb-accent:#8fb0c9}
.rk-level b{display:block;font:900 26px/1 var(--m-f-title);color:var(--m-cream)}
.rk-level small{display:block;margin-top:2px;font:600 12px var(--m-f-ui);letter-spacing:.08em;color:var(--m-mute);white-space:nowrap}
/* Beats `.rk-table td` for the kills, deaths and streak cells, not only the B/M span. */
.rk-num,.rk-table td.rk-num{font:600 17px var(--m-f-ui);color:var(--m-cream);white-space:nowrap}
.rk-kd{width:130px}
.rk-bar{display:block;height:6px;margin-top:6px;background:#2a2620}
.rk-bar i{display:block;height:100%;background:linear-gradient(90deg,#d8661a,#ffb13b)}
.rk-build{min-width:170px}
.rk-build .m-tag{margin:2px 6px 2px 0}
.rk-resist{color:var(--m-mute)}
.rk-none{font:500 13px var(--m-f-body);color:var(--m-mute)}
.rk-empty{padding:28px 20px;border:1px solid var(--m-edge);color:var(--m-text)}
.rk-pager{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px 0 8px;font:600 13px var(--m-f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--m-mute)}

/* Hall of Fame */
.rk-season-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 28px;padding-top:26px}
.rk-season-pick{min-width:min(100%,320px)}
.rk-season-name{flex:1;min-width:0}
.rk-season-title{margin:0;font:900 clamp(30px,4vw,44px)/1 var(--m-f-title);text-transform:uppercase;color:var(--m-cream);overflow-wrap:anywhere}
.rk-rules{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px;padding:26px 0;border-top:1px solid var(--m-edge)}
.rk-rules span{font:900 28px var(--m-f-title);color:var(--m-amber)}
.rk-rules h3{margin:6px 0;font:700 16px var(--m-f-ui);letter-spacing:.06em;color:var(--m-cream)}
.rk-rules p{margin:0;font:500 14px/1.7 var(--m-f-body);color:var(--m-text)}
.rk-notes{margin-top:18px;padding-top:12px;border-top:1px solid var(--m-edge);font:500 13px/1.7 var(--m-f-body);color:var(--m-mute)}
.rk-notes p{margin:4px 0}
.rk-noscript{padding:16px;color:var(--m-text)}

/* The public profile keeps its markup (public/engine/player-profile.mjs, also used in the game's
   scoreboard with player-profile.css); here only its frame and type follow the sheet. */
body.m-page #player-profile{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.3)),var(--m-plate);border:1px solid var(--m-edge2);border-top:3px solid var(--m-amber);color:var(--m-text);font-family:var(--m-f-body)}
body.m-page #player-profile::backdrop{background:rgba(6,5,4,.78)}
body.m-page .profile-bar{background:#15130f;border-bottom:1px solid var(--m-edge)}
body.m-page .profile-bar p{font:600 12px var(--m-f-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--m-amber)}
body.m-page #profile-close,body.m-page .profile-share button{appearance:none;cursor:pointer;border:0;min-height:0;padding:9px 14px;background:#1a1814;box-shadow:inset 0 0 0 1px #6b604c;color:var(--m-cream);font:700 12px var(--m-f-ui);letter-spacing:.14em;text-transform:uppercase}
body.m-page #profile-close:focus-visible,body.m-page .profile-share button:focus-visible{outline:2px solid var(--m-amber);outline-offset:2px}
body.m-page .profile-share a{color:var(--m-amber)}
body.m-page .profile-hero h2{font:900 40px/1 var(--m-f-title);text-transform:uppercase;color:var(--m-cream)}
body.m-page .profile-eyebrow{font:600 11px var(--m-f-ui);letter-spacing:.22em;color:var(--m-mute)}
body.m-page .profile-stats{background:var(--m-edge);border-color:var(--m-edge)}
body.m-page .profile-stats div{background:#15130f}
body.m-page .profile-stats dt{font:600 11px var(--m-f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--m-mute)}
body.m-page .profile-stats dd{font:600 24px var(--m-f-ui);color:var(--m-cream)}
body.m-page .profile-loadout{border-left-color:var(--m-amber);background:rgba(255,177,59,.05);color:var(--m-text)}
body.m-page #player-profile h3{font:700 16px var(--m-f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--m-cream)}
body.m-page .profile-build thead{color:var(--m-mute)}
body.m-page .profile-build td{color:var(--m-amber)}
body.m-page .profile-footnote,body.m-page #profile-status{color:var(--m-mute)}

@media (max-width:760px){
  .rk-head{grid-template-columns:1fr;padding-top:24px}
  .rk-title{font-size:56px}
  .rk-sub{font-size:15px}
  .rk-counters .m-lcdbox{flex:1;min-width:0}
  .rk-tabs{overflow-x:auto;scrollbar-width:none}
  .rk-tabs button{flex:none;padding:12px;font-size:12px;white-space:nowrap}
  .rk-podium{grid-template-columns:1fr;gap:12px;padding-top:20px}
  .rk-card{display:grid;grid-template-columns:96px 1fr;justify-items:start;align-items:center;column-gap:14px;row-gap:4px;text-align:left}
  .rk-card[data-place]{order:0}
  .rk-card>*{grid-column:2}
  .rk-card>img,.rk-card[data-place="1"]>img{grid-column:1;grid-row:1/span 5;width:96px;height:120px}
  .rk-card-name{font-size:28px}
  .rk-card-tags{justify-content:flex-start}
  /* Phones: search and «Buscar» share a row, the four orders fit on one, the crown on one line
     and the pager keeps each button on a single line with the page count above them. */
  .rk-search{flex:1 1 180px}
  .rk-chip{padding:8px 10px;font-size:12px;letter-spacing:.08em}
  .rk-crown{font-size:11px;letter-spacing:.12em}
  .rk-pager{flex-wrap:wrap}
  .rk-pager>span{order:-1;flex-basis:100%;text-align:center}
  .rk-pager .m-btn{white-space:nowrap}
  .rk-summary{margin-left:0;flex-basis:100%}
  .rk-rules{grid-template-columns:1fr;gap:12px}
  .rk-embed-bar .m-label{display:none}
  .rk-embed-bar #ranking-close{margin-left:auto}
  /* Match player-profile.css's own phone size (26px ≤700px): without this the more specific
     body.m-page selector above keeps the 40px desktop size at every width, breaking long names
     mid-word in the narrow phone column. */
  body.m-page .profile-hero h2{font-size:26px}
}