.screen-theme-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.screen-theme-option { position:relative; padding:14px; text-align:left; background:#f4f7f6; color:#173d35; border:2px solid #d9e5e0; border-radius:12px; min-width:0; }
.screen-theme-option[aria-pressed="true"] { border-color:#178e78; box-shadow:0 0 0 2px #178e7818; }
.screen-theme-option strong,.screen-theme-option small { display:block; margin-top:8px; }
.screen-theme-option small { color:#52695f; line-height:1.5; }
.theme-selected { display:none; position:absolute; top:20px; right:20px; background:#178e78; color:white; padding:3px 8px; border-radius:4px; font-size:11px; }
[aria-pressed="true"] .theme-selected { display:block; }
.theme-preview { height:120px; padding:16px; display:grid; gap:7px; background:#182a29; border-radius:8px; grid-template-columns:1.1fr 1fr; }
.theme-preview i { background:#4c7269; border-radius:3px; }
.preview-classic i:first-child { grid-row:span 3; background:repeating-linear-gradient(#487e72 0 8px,#203c34 8px 18px); }
.preview-honor { background:#191714; grid-template-columns:repeat(3,1fr); align-items:end; }
.preview-honor i { height:36px; background:#8f723b; }
.preview-honor i:nth-child(2) { height:58px; background:#d4b779; }
.preview-honor i:last-child { grid-column:span 3; height:12px; background:#474036; }
.preview-large { background:#e6f0ec; grid-template-columns:1fr; }
.preview-large i { background:#488674; }
.reward-preset-card { display:flex; gap:20px; align-items:center; justify-content:space-between; padding:22px; background:#eff6f2; border:1px solid #c9ded1; border-radius:10px; margin:16px 0; }
.reward-preset-card h3 { margin:5px 0 8px; font-size:22px; }
.reward-preset-card p { margin:5px 0; line-height:1.65; }
.reward-preset-card button { flex:0 0 auto; }
#rewardPresetStatus { color:#14624c; line-height:1.6; }
.merchant-screen-tools { display:flex; align-items:center; gap:8px; margin-left:auto; margin-right:20px; }
.merchant-screen-tools[hidden],.ladder-podium[hidden] { display:none; }
.merchant-screen-tools button { background:#ffffff12; color:#e0e9e5; border:1px solid #ffffff30; padding:8px 12px; font-size:12px; }
.screen-rank-page { flex:0 0 auto; color:#a5b7b0; font-size:13px; letter-spacing:1px; margin-bottom:5px; }
.screen-rank-page:empty { display:none; }
.client-match-record { display:grid; gap:5px; padding:14px 0; border-bottom:1px solid #e3e9e6; }
.client-match-record span,.client-match-record small { color:#62756c; font-size:13px; line-height:1.5; }
.client-match-record b { color:#14624c; }
body.role-screen #screen[data-theme="honor"] { background:radial-gradient(ellipse at top,#373025,#151512 70%); }
body.role-screen #screen[data-theme="honor"] .screen-hero { background:#252219; border-bottom:1px solid #ac8b4a; }
body.role-screen #screen[data-theme="honor"] .screen-brand h2 { color:#f0dba7; }
body.role-screen #screen[data-theme="honor"] .screen-panel { background:#26241f; border:1px solid #514733; }
body.role-screen #screen[data-theme="honor"] .screen-grid { grid-template-columns:minmax(0,1.28fr) minmax(0,1fr); }
body.role-screen #screen[data-theme="honor"] .screen-ranking { grid-template-rows:repeat(7,minmax(0,1fr)); }
body.role-screen #screen[data-theme="honor"] .screen-panel-title span,body.role-screen #screen[data-theme="honor"] .screen-rank-page { color:#d6bd86; }
.ladder-podium { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; flex:0 0 auto; margin:3px 0 14px; }
.podium-player { display:flex; flex-direction:column; text-align:center; align-items:center; justify-content:center; padding:10px 8px; min-height:132px; border:1px solid #887044; background:linear-gradient(150deg,#49402d,#28251e); border-radius:7px; min-width:0; }
.podium-1 { order:2; transform:translateY(-4px); border-color:#dbc185; background:linear-gradient(150deg,#665333,#2a251c); }
.podium-2 { order:1; }.podium-3 { order:3; }
.podium-player span { color:#c7b789; font-size:12px; letter-spacing:2px; }.podium-player strong { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#fff2cb; font-size:clamp(18px,1.6vw,28px); }
.podium-player em { font-size:12px; color:#c8bda3; font-style:normal; }.podium-player b { font-size:25px; color:#f3dd9e; }.podium-player b small { font-size:11px; }
body.role-screen #screen[data-theme="large"] { background:#e8f0ed; color:#143b30; }
body.role-screen #screen[data-theme="large"] .screen-hero { background:#fff; border-bottom:4px solid #178e78; }
body.role-screen #screen[data-theme="large"] .screen-brand h2,body.role-screen #screen[data-theme="large"] .screen-clock { color:#143b30; }
body.role-screen #screen[data-theme="large"] .screen-hero span { color:#52695f; }
body.role-screen #screen[data-theme="large"] .screen-grid { grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); }
body.role-screen #screen[data-theme="large"] .screen-panel { background:#fff; border-radius:8px; }
body.role-screen #screen[data-theme="large"] .screen-panel-title h2 { color:#143b30; }
body.role-screen #screen[data-theme="large"] .screen-panel-title span,body.role-screen #screen[data-theme="large"] .screen-rank-page { color:#387b65; }
body.role-screen #screen[data-theme="large"] .screen-ranking { grid-template-rows:repeat(5,minmax(0,1fr)); gap:10px; }
body.role-screen #screen[data-theme="large"] .screen-rank-row { background:#f1f6f3; grid-template-columns:44px minmax(0,1fr) 76px 90px; padding:8px 12px; }
body.role-screen #screen[data-theme="large"] .screen-rank-row.top { background:#e2f0e7; }
body.role-screen #screen[data-theme="large"] .screen-player strong { color:#173f32; font-size:clamp(22px,2.25vw,38px); }
body.role-screen #screen[data-theme="large"] .screen-score strong { font-size:clamp(26px,2.5vw,40px); color:#14624c; }
body.role-screen #screen[data-theme="large"] .rank-num { font-size:26px; }
body.role-screen #screen[data-theme="large"] .screen-player span,body.role-screen #screen[data-theme="large"] .screen-division { color:#52695f; }
body.role-screen #screen[data-theme="large"] .screen-match-card,body.role-screen #screen[data-theme="large"] .screen-reward-card,body.role-screen #screen[data-theme="large"] .screen-winner-card,body.role-screen #screen[data-theme="large"] .screen-challenge-card { background:#eff5f1; color:#173f32; }
body.role-screen #screen[data-theme="large"] .screen-side strong { color:#173f32; font-size:18px; }
body.role-screen #screen[data-theme="large"] .screen-side span,body.role-screen #screen[data-theme="large"] .screen-side small { color:#49695a; }
body.role-screen #screen[data-theme="large"] .merchant-screen-tools button { color:#173f32; border-color:#c4d5cc; }
@media (max-width:760px) { .screen-theme-options { grid-template-columns:1fr; }.theme-preview { height:100px; }.reward-preset-card { display:block; }.reward-preset-card button { width:100%; margin-top:12px; } }
@media (max-height:800px) { .podium-player { min-height:96px; padding:5px; }.podium-player strong { font-size:20px; }.podium-player b { font-size:21px; }.ladder-podium { margin-bottom:7px; gap:6px; } }

/* Rank name and stars occupy their own column; the score always keeps its full width. */
body.role-screen #screen .screen-ranking .screen-rank-row { grid-template-columns:32px minmax(0,1fr) clamp(84px,8vw,140px) max-content; column-gap:12px; }
body.role-screen #screen .screen-division { min-width:0; max-width:100%; white-space:normal; }
body.role-screen #screen .screen-rank-badge { display:flex; flex-direction:column; align-items:center; justify-content:center; box-sizing:border-box; width:100%; max-width:100%; padding:3px 5px; gap:1px; line-height:1.05; white-space:normal; overflow:hidden; }
body.role-screen #screen .screen-rank-name { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; line-height:1.1; }
body.role-screen #screen .screen-rank-stars { display:block; font-size:13px; line-height:1.05; letter-spacing:1px; white-space:nowrap; }
body.role-screen #screen .screen-score { min-width:4ch; white-space:nowrap; font-variant-numeric:tabular-nums; }
body.role-screen #screen .screen-score strong { display:block; min-width:6.5ch; }
body.role-screen #screen .podium-player em { max-width:100%; }
body.role-screen #screen .podium-player .rank-tone { max-width:100%; box-sizing:border-box; overflow:hidden; text-overflow:ellipsis; }
body.role-screen #screen[data-theme="large"] .screen-rank-name { font-size:18px; }
body.role-screen #screen[data-theme="large"] .screen-rank-stars { font-size:16px; }
@media (max-height:580px) {
  body.role-screen #screen .screen-ranking .screen-rank-row { grid-template-columns:24px minmax(0,1fr) 80px max-content; column-gap:8px; }
  body.role-screen #screen .screen-rank-badge { padding:1px 3px; gap:0; }
  body.role-screen #screen .screen-rank-name { font-size:12px; line-height:1.05; }
  body.role-screen #screen .screen-rank-stars { font-size:11px; line-height:1; }
  body.role-screen #screen[data-theme="large"] .screen-rank-name { font-size:14px; }
  body.role-screen #screen[data-theme="large"] .screen-rank-stars { font-size:13px; }
}

body.role-screen #screen .screen-player{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:0;min-width:0}
body.role-screen #screen .screen-player-achievements{display:flex;align-items:center;gap:6px;min-width:0;max-width:100%;overflow:hidden;margin-top:3px}
body.role-screen #screen .screen-growth{font-size:12px;color:#d0e4b8!important;display:inline-block;flex-shrink:0;padding:2px 5px;background:#334235;border-radius:5px;line-height:1.3}
body.role-screen #screen .historical-honor{font-size:11px;padding:2px 5px;min-width:0;color:var(--honor-color)!important}
body.role-screen #screen .historical-honor span{color:inherit!important}
body.role-screen #screen .screen-player>strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.role-screen #screen .podium-player .historical-honor{font-size:10px}
body.role-screen #screen[data-theme="large"] .screen-growth{font-size:16px}
body.role-screen #screen[data-theme="large"] .historical-honor{font-size:14px}
@media(max-height:800px){body.role-screen #screen .screen-player>span{display:none}}
@media(max-height:580px){body.role-screen #screen .screen-growth,body.role-screen #screen .historical-honor{font-size:10px;padding:1px 4px}body.role-screen #screen .screen-player-achievements{margin-top:1px;gap:3px}}
@media(max-height:800px){body.role-screen #screen[data-theme="honor"] .screen-player>strong{font-size:16px;line-height:1.15}body.role-screen #screen[data-theme="honor"] .screen-player-achievements{margin-top:1px}}
@media(max-height:580px){body.role-screen #screen .screen-player{flex-direction:row;align-items:center;gap:6px}body.role-screen #screen .screen-player>strong{flex:1;min-width:0;font-size:16px;line-height:1.1}body.role-screen #screen .screen-player-achievements{flex-shrink:0;margin:0}body.role-screen #screen[data-theme="large"] .screen-player{flex-direction:column;align-items:flex-start}body.role-screen #screen[data-theme="large"] .screen-player>strong{flex:initial;font-size:22px}}
@media(max-width:1100px) and (max-height:650px){body.role-screen #screen .screen-client-join{flex-direction:column;gap:4px}body.role-screen #screen .screen-client-join img{width:min(18vh,100px);height:min(18vh,100px)}body.role-screen #screen .screen-client-join strong{font-size:12px;line-height:1.25}body.role-screen #screen .screen-client-join span{font-size:10px;line-height:1.2;margin-top:2px}}

body.role-screen #screen .screen-winrate100{display:block!important;font-size:clamp(11px,.9vw,18px);font-weight:400;line-height:1.2;color:inherit;opacity:.8;white-space:nowrap}
body.role-screen #screen .screen-contender .screen-winrate100{margin-top:4px}
@media(max-height:800px){body.role-screen #screen .screen-player{gap:1px}body.role-screen #screen .screen-player>.screen-winrate100{font-size:11px}body.role-screen #screen .podium-player .screen-winrate100{font-size:11px}}