/* Desktop page: 排行榜 (left pillar 「榜」). Every selector starts at .pg-board.
   Unit: --bu = the shell's 1u, shrunk only when the page is too narrow for the 150 × 90 design box, so nothing overlaps or scrolls.
   Art: ./assets/leaderboard/ (Higgsfield; placeholders of the same name and size until the final files land). */
body.desktop-game .pg-board{--bu:min(var(--pg-u),calc((100vw - var(--ds-rail,0px) - var(--pg-u)*10)/150));position:absolute;inset:0;overflow:hidden;color:var(--uk-text);background:#07101b}
body.desktop-game .pg-board-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
body.desktop-game .pg-board-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
body.desktop-game .pg-board-shade{position:absolute;inset:0;background:linear-gradient(90deg,#03080ee6,#03080e66 22%,#03080e40 50%,#03080e80 100%),linear-gradient(180deg,#05101a99,transparent 24%,transparent 70%,#040a12d9)}

body.desktop-game .pg-board-stage{--pg-u:var(--bu);--uk-body:max(var(--uk-min,12px),calc(var(--bu)*1.5));--uk-pad:calc(var(--bu)*2.4);--uk-gap:calc(var(--bu)*1.6);position:absolute;inset:0;z-index:1;margin:auto;width:calc(var(--bu)*150);height:calc(var(--bu)*90);display:grid;grid-template-rows:calc(var(--bu)*9) calc(var(--bu)*6) 1fr;row-gap:calc(var(--bu)*1.6)}
body.desktop-game .pg-board-stage>.uk-page-head{min-width:0}
body.desktop-game .pg-board-stage>.uk-page-head>.uk-plaque{flex:none}

/* Board tabs: stone tabs with the art-lane icons. */
body.desktop-game .pg-board-tabs{display:flex;gap:calc(var(--bu)*1)}
body.desktop-game .pg-board-tab{--uk-bh:calc(var(--bu)*5.6);display:inline-flex;align-items:center;gap:calc(var(--bu)*.6);min-width:calc(var(--bu)*15);font-size:max(var(--uk-min,12px),calc(var(--bu)*1.7))!important}
body.desktop-game .pg-board-tab img{width:calc(var(--bu)*3.4);height:calc(var(--bu)*3.4);object-fit:contain;flex:none;filter:drop-shadow(0 2px 3px #000a)}
body.desktop-game .pg-board-tab span{white-space:nowrap}

/* Second row: board note, or the Boss / difficulty pickers of 速通. */
body.desktop-game .pg-board-note{margin:0;align-self:center;justify-self:center;max-width:calc(var(--bu)*120);font:400 var(--uk-body)/1.4 var(--uk-sans);color:#d9c9a0;text-align:center;text-shadow:0 1px 3px #000}
body.desktop-game .pg-board-filter{display:flex;align-items:center;justify-content:center;gap:calc(var(--bu)*3)}
body.desktop-game .pg-board-select{display:flex;align-items:center;gap:calc(var(--bu)*1);font:700 calc(var(--bu)*1.8)/1 var(--uk-serif);color:#f1d896;letter-spacing:.08em}
body.desktop-game .pg-board-select select{height:calc(var(--bu)*4.6);min-width:calc(var(--bu)*34);padding:0 calc(var(--bu)*1.2);border:1px solid #c9a25a99;border-radius:6px;background:#07101bee;color:#fff2d2;font:700 max(var(--uk-min,12px),calc(var(--bu)*1.7))/1 var(--uk-sans);cursor:pointer}
body.desktop-game .pg-board-select select:focus-visible{outline:2px solid #f1d896;outline-offset:2px}
body.desktop-game .pg-board-diffs{display:flex;gap:calc(var(--bu)*.8)}
body.desktop-game .pg-board-diff{--uk-bh:calc(var(--bu)*4.6);min-width:calc(var(--bu)*10)}

/* Main row: my card (left) + the table. */
body.desktop-game .pg-board-main{position:relative;display:grid;grid-template-columns:calc(var(--bu)*32) 1fr;gap:calc(var(--bu)*2.4);min-height:0}
body.desktop-game .pg-board-me-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--bu)*1.2);min-height:0;text-align:center}
body.desktop-game .pg-board-me-ava{position:relative;width:calc(var(--bu)*16);height:calc(var(--bu)*16);flex:none}
body.desktop-game .pg-board-me-face{position:absolute;left:13.7%;top:14.7%;width:76%;height:76%;border-radius:50%;object-fit:cover}
body.desktop-game .pg-board-me-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
body.desktop-game .pg-board-me-name{font:700 calc(var(--bu)*2.8)/1.1 var(--uk-serif);color:#fff2d2;letter-spacing:.06em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.desktop-game .pg-board-me-board{margin:0;display:flex;flex-direction:column;gap:4px;font:700 calc(var(--bu)*1.8)/1.2 var(--uk-serif);color:#d9c9a0;letter-spacing:.08em}
body.desktop-game .pg-board-me-board small{font:400 max(var(--uk-min,12px),calc(var(--bu)*1.4))/1.3 var(--uk-sans);color:#a8b3b9;letter-spacing:0}
body.desktop-game .pg-board-me-rank{margin:0;font:700 calc(var(--bu)*3.6)/1 var(--uk-serif);background:linear-gradient(180deg,var(--uk-title-a),var(--uk-title-b));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 1px #000a)}
body.desktop-game .pg-board-me-value{margin:0;font:700 calc(var(--bu)*2.2)/1 var(--uk-serif);color:#fff2d2;font-variant-numeric:tabular-nums}

body.desktop-game .pg-board-table{position:relative;display:grid;grid-template-rows:calc(var(--bu)*3.6) 1fr auto calc(var(--bu)*4.6);min-height:0;box-sizing:border-box;padding:calc(var(--bu)*1.2) calc(var(--bu)*2.4);border-style:solid;border-color:transparent;border-width:calc(var(--bu)*2.6);border-image:url("./assets/leaderboard/board-panel.webp") 120 fill / calc(var(--bu)*2.6) stretch;background:linear-gradient(#0b1622d9,#07101be6) padding-box}
body.desktop-game .pg-board-cols,body.desktop-game .pg-board-row{display:grid;grid-template-columns:calc(var(--bu)*8) minmax(0,1.5fr) calc(var(--bu)*15) minmax(0,1.4fr) calc(var(--bu)*11);align-items:center;column-gap:calc(var(--bu)*1.4)}
body.desktop-game .pg-board-cols{padding:0 calc(var(--bu)*2.6);font:700 max(var(--uk-min,12px),calc(var(--bu)*1.4))/1 var(--uk-serif);color:#c9a25a;letter-spacing:.12em;border-bottom:1px solid #c9a25a55}
body.desktop-game .pg-board-body{min-height:0;overflow:hidden;padding-top:calc(var(--bu)*.5)}
body.desktop-game .pg-board-rows,body.desktop-game .pg-board-pinned{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:calc(var(--bu)*.4)}
body.desktop-game .pg-board-row{height:calc(var(--bu)*4.4);box-sizing:border-box;padding:0 calc(var(--bu)*.6);border:solid transparent;border-width:0 calc(var(--bu)*2);border-image:url("./assets/leaderboard/row-frame.webp") 40 150 fill / calc(var(--bu)*4.4*40/264) calc(var(--bu)*4.4*150/264) stretch;font:400 max(var(--uk-min,12px),calc(var(--bu)*1.6))/1 var(--uk-sans);animation:pg-board-in .28s ease-out both;animation-delay:calc(var(--i,0) * 30ms)}
body.desktop-game .pg-board-row.is-self{border-image-source:url("./assets/leaderboard/row-self-frame.webp");filter:drop-shadow(0 0 6px #ffd27a66)}
body.desktop-game .pg-board-pinned{padding-top:calc(var(--bu)*.5);border-top:1px dashed #c9a25a66}
body.desktop-game .pg-board-row.is-pinned{animation:none}
body.desktop-game .pg-board-rank{position:relative;display:grid;place-items:center;width:calc(var(--bu)*3.8);height:calc(var(--bu)*3.8);justify-self:center}
body.desktop-game .pg-board-rank b{position:relative;font:700 calc(var(--bu)*2.2)/1 var(--uk-serif);color:#ede7d8;font-variant-numeric:tabular-nums}
body.desktop-game .pg-board-rank.is-top img{position:absolute;inset:-12%;width:124%;height:124%;object-fit:contain;filter:drop-shadow(0 2px 3px #000b)}
body.desktop-game .pg-board-rank.is-top b{font-size:calc(var(--bu)*1.8);color:#fff6dc;text-shadow:0 1px 2px #000,0 0 6px #000}
body.desktop-game .pg-board-who{display:flex;align-items:center;gap:calc(var(--bu)*1);min-width:0}
body.desktop-game .pg-board-ava{flex:none;width:calc(var(--bu)*3.5);height:calc(var(--bu)*3.5);border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #b0894a}
body.desktop-game .pg-board-row.is-self .pg-board-ava{box-shadow:0 0 0 2px #f1d896,0 0 8px #ffd27a}
body.desktop-game .pg-board-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 max(var(--uk-min,12px),calc(var(--bu)*1.8))/1 var(--uk-serif);color:#fff2d2;letter-spacing:.04em}
body.desktop-game .pg-board-me{flex:none;padding:2px 6px;border-radius:4px;background:#d4b477;color:#3a2410;font:700 max(var(--uk-min,12px),calc(var(--bu)*1.2))/1.2 var(--uk-serif);font-style:normal}
body.desktop-game .pg-board-value{font:700 max(var(--uk-min,12px),calc(var(--bu)*2))/1 var(--uk-serif);color:#ffe7a0;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;text-align:right}
body.desktop-game .pg-board-detail{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#d9c9a0}
body.desktop-game .pg-board-date{color:#a8b3b9;font-variant-numeric:tabular-nums;white-space:nowrap}
body.desktop-game .pg-board-empty{margin:calc(var(--bu)*8) auto 0;max-width:calc(var(--bu)*60);font:400 calc(var(--bu)*2)/1.6 var(--uk-sans);color:#d9c9a0;text-align:center}
body.desktop-game .pg-board-foot{display:flex;align-items:center;justify-content:center;gap:calc(var(--bu)*3)}
body.desktop-game .pg-board-total{font:400 max(var(--uk-min,12px),calc(var(--bu)*1.4))/1 var(--uk-sans);color:#a8b3b9}

/* Rules face (info medallion). */
body.desktop-game .pg-board-info{position:relative;align-self:center;justify-self:center;box-sizing:border-box;width:min(100%,calc(var(--bu)*84));max-height:100%;display:flex;flex-direction:column;align-items:center;gap:calc(var(--bu)*1.4)}
body.desktop-game .pg-board-info h2{margin:0;font:700 calc(var(--bu)*2.6)/1.2 var(--uk-serif);color:#f1d896;letter-spacing:.12em}
body.desktop-game .pg-board-info ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:calc(var(--bu)*.9);font:400 var(--uk-body)/1.5 var(--uk-sans)}
body.desktop-game .pg-board-info b{display:inline-block;min-width:calc(var(--bu)*14);margin-right:calc(var(--bu)*1);color:#f1d896;font-family:var(--uk-serif)}

@keyframes pg-board-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){body.desktop-game .pg-board-row{animation:none}}