/* R2 排名与段位：信息密度高于普通卡片页，沿用首页品牌蓝（2026-09-14 由毡绿改蓝）、黄铜与正文比例。 */
.competitive-page{
  min-height:100%;
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",sans-serif;
  --competitive-brand:#001040;
  --competitive-brass:#aa8138;
}
.competitive-page *{font-family:inherit}
.competitive-page button,.competitive-page select{font:inherit}
.competitive-page main{padding-bottom:12px}
.competitive-header{
  min-height:70px;padding:12px 16px 11px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  color:#fff;background:linear-gradient(112deg,#002080,#001040);border-bottom:2px solid var(--competitive-brass)
}
.competitive-header h1{font-size:22px;line-height:1.2;letter-spacing:.02em}
.competitive-header p{font-size:12px;color:rgba(255,255,255,.8);white-space:nowrap}

.competitive-personal{margin:12px 14px;padding:13px 14px;background:#f0f3f9;border:1px solid #e4e9f1;border-radius:10px}
.competitive-personal-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.competitive-personal-title>span{font-size:13px;font-weight:700;color:var(--ink-2)}
.competitive-personal-title>a{min-height:44px;margin:-12px -4px -10px 0;padding:0 4px;display:flex;align-items:center;font-size:13px;font-weight:700;text-decoration:none}
.competitive-personal-ranks{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0}
.competitive-personal-ranks>span{min-width:0;display:flex;flex-direction:column;gap:1px;padding-right:10px}
.competitive-personal-ranks>span+span{padding-left:10px;border-left:1px solid var(--line)}
.competitive-personal-ranks small{font-size:12px;color:var(--ink-3)}
.competitive-personal-ranks strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.competitive-personal.guest,.competitive-personal.error{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.competitive-personal.guest>div,.competitive-personal.error>div{min-width:0;display:flex;flex-direction:column;gap:2px}
.competitive-personal.guest b,.competitive-personal.error b{font-size:14px}
.competitive-personal.guest span,.competitive-personal.error span{font-size:13px;line-height:1.4;color:var(--ink-2)}
.competitive-personal.guest .btn{flex:none;min-width:72px;margin:0;box-shadow:none}
.competitive-personal.muted{font-size:13px;color:var(--ink-2)}

.competitive-controls{padding:4px 14px 11px;border-bottom:1px solid var(--line);background:#fff}
.competitive-tabs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);padding:3px;background:#e8ecf3;border-radius:10px}
.competitive-tabs>button,.competitive-region-tab>button{min-width:0;min-height:44px;padding:0 8px;border:0;border-radius:8px;background:transparent;color:var(--ink-2);font-size:14px;font-weight:700;cursor:pointer}
.competitive-tabs>button.on,.competitive-region-tab.on{background:#fff;color:var(--felt-700);box-shadow:0 1px 4px rgba(10,20,45,.14)}
.competitive-region-tab{min-width:0;display:grid;grid-template-columns:minmax(60px,.75fr) minmax(0,1.25fr);align-items:center;border-radius:8px}
.competitive-region-tab:not(.on){display:block}
.competitive-region-tab:not(.on)>button{width:100%}
.competitive-region{position:relative;min-width:0;min-height:44px;display:block}
.competitive-region:before,.competitive-region-compact:before{content:"";position:absolute;left:0;top:10px;width:1px;height:24px;background:#ccd3e0}
.competitive-region select{width:100%;min-width:0;min-height:44px;padding:0 24px 0 9px;border:0;border-radius:0;color:var(--felt-700);background:transparent;font-size:13px;font-weight:700;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}
.competitive-region-compact{position:relative;min-width:0;min-height:44px;padding:0 7px;border:0;background:transparent;color:var(--ink-3);font-size:13px;text-align:center}
.competitive-region-compact.error{color:var(--red);cursor:pointer}
.competitive-region-note{margin-top:7px;font-size:12px;line-height:1.4;color:var(--ink-2)}
.text-action{min-height:44px;padding:0 5px;border:0;background:transparent;color:var(--felt-700);font-size:13px;font-weight:700;cursor:pointer}

.competitive-board{background:#fff;padding:0 0 12px}
.competitive-table-wrap{width:100%;overflow:hidden;border-bottom:1px solid var(--line)}
.competitive-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:14px;background:#fff}
.competitive-table th{height:39px;padding:5px 6px;color:var(--ink-3);background:#f5f7fb;font-size:13px;font-weight:600;text-align:left}
.competitive-table th:first-child,.competitive-table td:first-child{width:54px;text-align:center}
.competitive-table th:nth-child(3),.competitive-table td:nth-child(3){width:58px;text-align:center}
.competitive-table th:last-child,.competitive-table td:last-child{width:66px;text-align:right;padding-right:14px}
.competitive-table td{height:57px;padding:7px 6px;border-top:1px solid var(--line);vertical-align:middle}
.competitive-table tr.rank-medal-gold{background:#fffaf0}
.competitive-table tr.rank-medal-silver{background:#f5f8fa}
.competitive-table tr.rank-medal-bronze{background:#fff7f1}
.competitive-table tr.is-me{background:var(--felt-100)}
.competitive-table tr.is-me td:first-child{box-shadow:inset 3px 0 var(--felt-600)}
.rank-place{font-family:var(--font-disp);font-size:17px;font-weight:800;color:var(--competitive-brass)}
.rank-medal-mark{width:31px;height:31px;margin:0 auto;display:flex;align-items:center;justify-content:center;border:2px solid currentColor;border-radius:50%;font-family:var(--font-disp);font-size:18px;line-height:1;background:#fff8df;color:#ad7814;box-shadow:0 0 0 3px rgba(184,130,27,.1)}
.rank-medal-silver .rank-medal-mark{background:#f2f5f6;color:#75818a;box-shadow:0 0 0 3px rgba(117,129,138,.1)}
.rank-medal-bronze .rank-medal-mark{background:#fff0e3;color:#a45f2f;box-shadow:0 0 0 3px rgba(164,95,47,.1)}
.rank-tie{display:block;margin-top:2px;font-family:var(--font-body);font-size:12px;font-weight:700;line-height:1;color:var(--gold-deep)}
.rank-name{max-width:100%;display:flex;align-items:center;gap:5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-name i{flex:none;padding:0 5px;border-radius:4px;background:var(--felt-700);color:#fff;font-size:10px;font-style:normal;font-weight:700}
.competitive-table td>small{display:block;margin-top:1px;color:var(--ink-3);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-tier{display:inline-block;max-width:100%;padding:2px 5px;border-radius:6px;background:var(--gold-bg);color:var(--gold-deep);font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-rating{font-family:var(--font-disp);font-size:15px;font-weight:800;color:var(--felt-700)}
.competitive-auto-more,.competitive-limit{min-height:44px;padding:12px 16px 0;text-align:center;color:var(--ink-3);font-size:12px}
.competitive-snapshot{padding:10px 16px 0;font-size:12px;line-height:1.55;color:var(--ink-3)}
.competitive-inline-error{margin:10px 16px 0;padding:8px 10px;background:var(--red-bg);border-radius:8px;color:var(--red);font-size:13px}
.competitive-state{margin:12px 16px;padding:24px 16px;min-height:112px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;background:#f8f9fd;border:1px solid var(--line);border-radius:10px;font-size:14px;color:var(--ink-2)}
.competitive-state b{font-size:16px;color:var(--ink)}
.competitive-state span{line-height:1.55}
.competitive-state.error{color:var(--red)}
.competitive-state .btn{min-width:128px;margin-top:8px}
.competitive-state.loading{background:linear-gradient(90deg,#f5f7fb 25%,#edf0f7 50%,#f5f7fb 75%);background-size:220% 100%;animation:competitive-loading 1.4s ease infinite}
@keyframes competitive-loading{to{background-position:-220% 0}}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.competitive-tier-hero{padding:24px 16px 21px;color:#fff;background:var(--hero-bg);border-bottom:2px solid var(--competitive-brass)}
.competitive-tier-hero>span{font-size:12px;color:rgba(255,255,255,.75)}
.competitive-tier-hero h1{margin-top:1px;font-family:var(--font-disp);font-size:36px;line-height:1.25;color:#f1d58e;letter-spacing:.04em}
.tier-current-scores{margin-top:6px;display:flex;gap:8px}
.tier-current-scores span{padding:2px 8px;border:1px solid rgba(255,255,255,.2);border-radius:5px;background:rgba(255,255,255,.08);font-size:12px;color:#fff}
.competitive-tier-hero p{margin-top:7px;font-size:14px;color:rgba(255,255,255,.82)}
.competitive-notice{padding:12px 16px;display:flex;flex-direction:column;gap:2px;background:#fff7e6;border-bottom:1px solid #ead8ad}
.competitive-notice b{font-size:14px;color:var(--gold-deep)}
.competitive-notice span{font-size:14px;line-height:1.5;color:var(--ink-2)}
.competitive-profile-stats{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;background:#fff;border-bottom:8px solid var(--body-bg)}
.competitive-profile-stats>div{min-width:0;padding:13px 7px;text-align:center}
.competitive-profile-stats>div+div{border-left:1px solid var(--line)}
.competitive-profile-stats small{display:block;color:var(--ink-3);font-size:11px;white-space:nowrap}
.competitive-profile-stats strong{display:block;margin-top:2px;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.competitive-growth{padding:17px 16px 18px;background:#fff;border-bottom:8px solid var(--body-bg)}
.competitive-section-title{margin-bottom:12px}
.competitive-section-title h2{font-size:19px;line-height:1.3}
.tier-goal{padding:15px;border-left:3px solid var(--competitive-brass);background:#f8f9fd}
.tier-goal.max{border-left-color:var(--felt-600);background:var(--felt-100)}
.tier-goal.max>span{font-size:12px;font-weight:700;color:var(--felt-700)}
.tier-goal.max h3{margin-top:2px;font-family:var(--font-disp);font-size:22px;color:var(--felt-700)}
.tier-goal-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.tier-goal-head span{font-size:13px;color:var(--ink-2)}
.tier-goal-head strong{font-family:var(--font-disp);font-size:20px;color:var(--gold-deep)}
.tier-progress{height:8px;margin-top:13px;border-radius:4px;background:#dfe4ee;overflow:hidden}
.tier-progress i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#c59a43,#aa8138)}
.tier-progress-label{margin-top:7px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;font-size:12px;color:var(--ink-2)}
.tier-progress-label b{text-align:right;color:var(--gold-deep)}
.tier-goal>p,.tier-reserve p{margin-top:12px;font-size:14px;line-height:1.6;color:var(--ink-2)}
.tier-condition{margin-top:10px;padding:10px 11px;display:flex;flex-direction:column;gap:2px;border:1px solid #c9d6ee;background:var(--felt-100)}
.tier-condition b{font-size:13px;color:var(--felt-700)}
.tier-condition span{font-size:14px;line-height:1.5;color:var(--ink-2)}
.tier-reserve{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.tier-reserve.compact{margin-top:13px}
.tier-reserve>div:first-child{display:flex;justify-content:space-between;gap:10px;font-size:13px}
.competitive-links{background:#fff}
.competitive-links>a{min-height:66px;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.competitive-links>a>div{min-width:0;display:flex;flex-direction:column;gap:2px}
.competitive-links b{font-size:15px}
.competitive-links span{font-size:14px;line-height:1.5;color:var(--ink-2);white-space:normal}
.competitive-links i{flex:none;color:var(--ink-3);font-size:22px;font-style:normal}

@media(max-width:350px){
  .competitive-header,.competitive-controls,.competitive-tier-hero,.competitive-growth{padding-left:12px;padding-right:12px}
  .competitive-header p{display:none}
  .competitive-personal{margin-left:12px;margin-right:12px;padding-left:12px;padding-right:12px}
  .competitive-personal-ranks>span{padding-right:6px}.competitive-personal-ranks>span+span{padding-left:6px}
  .competitive-tabs{grid-template-columns:minmax(0,.9fr) minmax(0,1.55fr)}
  .competitive-region-tab{grid-template-columns:minmax(58px,.72fr) minmax(0,1.28fr)}
  .competitive-region select{padding-left:6px;font-size:12px}
  .competitive-table{font-size:13px}.competitive-table th:first-child,.competitive-table td:first-child{width:48px}.competitive-table th:nth-child(3),.competitive-table td:nth-child(3){width:54px}.competitive-table th:last-child,.competitive-table td:last-child{width:60px;padding-right:10px}
  .rank-medal-mark{width:28px;height:28px;font-size:16px}
  .competitive-profile-stats small{font-size:10px}.competitive-profile-stats strong{font-size:13px}
  .tier-progress-label{flex-direction:column;gap:2px}.tier-progress-label b{text-align:left}
}
@media(prefers-reduced-motion:reduce){.competitive-state.loading{animation:none}}
