.rating-page { min-width: 0; display: grid; gap: 14px; padding-bottom: 32px; color: #def6ff; }
.rating-hero { min-width: 0; padding: 16px 18px; border: 1px solid rgba(77,203,244,.5); border-radius: 4px; background: rgba(3,22,34,.92); box-shadow: inset 0 0 34px rgba(39,183,231,.08); }
.rating-season-line,.rating-strength-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.rating-season-line { padding-bottom: 10px; border-bottom: 1px solid rgba(88,188,220,.28); }
.rating-season-line>span,.rating-metrics span,.rating-credit-grid span,.rating-compact-head span { color: #83b5c9; font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.rating-season-line small { color: #8eafbc; font-size: .75rem; }
.rating-hero-main { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) minmax(230px,.4fr); align-items: center; gap: 22px; }
.rating-rank { min-width: 0; min-height: 106px; display: grid; grid-template-columns: 76px minmax(0,1fr); align-items: center; gap: 14px; }
.rating-rank-symbol { width: 72px; aspect-ratio: 1; display: grid; place-items: center; clip-path: polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%); color: #e8fbff; background: #0c6c91; font-size: 2rem; font-weight: 900; text-shadow: 0 0 12px rgba(159,237,255,.88); }
.rating-rank-symbol.is-placement { color: #ffe39a; background: #5c4918; }
.rating-rank-copy { min-width: 0; display: grid; gap: 3px; }
.rating-rank-copy>span { color: #72dfff; font-size: .76rem; font-weight: 900; text-transform: uppercase; }
.rating-rank-copy>strong { overflow-wrap: anywhere; color: #f1fcff; font-size: 1.55rem; line-height: 1.05; }
.rating-rank-copy>small { color: #8eafbc; }
.rating-launch-row { min-width: 0; }
.rating-launch-row button { width: 100%; min-height: 50px; }
.rating-metrics { min-width: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-block: 1px solid rgba(88,188,220,.22); }
.rating-metrics>div { min-width: 0; min-height: 56px; padding: 9px 12px; display: grid; align-content: center; gap: 3px; border-right: 1px solid rgba(88,188,220,.18); }
.rating-metrics>div:last-child { border-right: 0; }
.rating-metrics strong { overflow-wrap: anywhere; color: #e7f9ff; font-size: 1rem; }
.rating-strength { padding-top: 12px; }
.rating-compact-head { margin-bottom: 7px; }
.rating-strength-line { margin-bottom: 7px; color: #b9dce7; }
.rating-strength-line strong { color: #effcff; }
.rating-progress { height: 9px; margin-bottom: 7px; overflow: hidden; border: 1px solid rgba(96,207,239,.6); border-radius: 2px; background: #06131c; }
.rating-progress>span { width: var(--rating-progress,0%); height: 100%; display: block; background: #39bfe8; transition: width 260ms ease; }
.rating-strength-details,.rating-career-details { color: #86a9b7; font-size: .75rem; }
.rating-strength-details summary,.rating-career-details summary { width: fit-content; color: #86cce1; cursor: pointer; }
.rating-strength-details p,.rating-career-details p { margin: 7px 0 0; }
.rating-career-summary { margin-top: 11px; padding-top: 10px; display: grid; gap: 3px; color: #b8d6e0; border-top: 1px solid rgba(88,188,220,.18); }
.rating-career-summary>span { color: #83b5c9; font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.rating-career-summary>strong { color: #e7f9ff; font-size: 1rem; }
.rating-career-summary>small { color: #8eafbc; font-size: .76rem; }
.rating-career-details { margin-top: 6px; }
.rating-credit-grid { margin-top: 9px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; background: rgba(77,171,202,.25); }
.rating-credit-grid>div { min-width: 0; padding: 9px; display: grid; gap: 3px; background: #061722; }
.rating-credit-grid strong { color: #e9faff; }
.rating-placement-note,.rating-empty-line { padding: 13px; color: #91afbb; border-left: 3px solid rgba(89,197,230,.46); background: rgba(4,22,32,.72); }
.rating-tabs-shell { min-width: 0; }
.rating-tabs { min-width: 0; display: flex; overflow-x: auto; scrollbar-width: thin; border-bottom: 1px solid rgba(77,203,244,.42); }
.rating-tabs button { min-width: max-content; min-height: 46px; padding: 0 22px; color: #8db8c8; border: 0; border-bottom: 3px solid transparent; background: transparent; font: inherit; font-weight: 900; cursor: pointer; }
.rating-tabs button[aria-selected="true"] { color: #effcff; border-bottom-color: #4bd6ff; background: rgba(16,94,121,.28); }
.rating-tabs button:focus-visible,.rating-reward-group-toggle:focus-visible,.rating-more-button:focus-visible { outline: 2px solid #ffe076; outline-offset: -3px; }
.rating-tab-panel { min-width: 0; padding-top: 10px; }
.rating-tab-panel:focus { outline: none; }
.rating-table,.rating-history-list,.rating-reward-list,.rating-reward-groups { min-width: 0; display: grid; gap: 6px; }
.rating-table-head,.rating-table-row { min-width: 0; display: grid; grid-template-columns: 72px minmax(0,1fr) 82px 94px 82px 82px; align-items: center; gap: 8px; }
.rating-table-head { min-height: 34px; padding: 0 12px; color: #729cab; font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.rating-table-row { min-height: 48px; padding: 8px 12px; border-bottom: 1px solid rgba(80,168,197,.25); }
.rating-table-row.is-self { border-color: #62dfff; background: rgba(9,62,82,.72); }
.rating-table-row>span { color: #6bdfff; font-weight: 900; }
.rating-table-row>small { color: #a6c2cc; text-align: center; }
.rating-table-row>b { color: #ffe18a; text-align: right; }
.rating-more-button { width: 100%; min-height: 44px; margin-top: 8px; color: #9ddff1; border: 1px solid rgba(78,190,225,.46); border-radius: 3px; background: rgba(4,32,46,.72); font: inherit; font-weight: 900; cursor: pointer; }
.rating-reward-group { border-bottom: 1px solid rgba(75,157,187,.28); }
.rating-reward-group-toggle { width: 100%; min-height: 52px; padding: 8px 10px; display: grid; grid-template-columns: 30px 90px minmax(0,1fr) 24px; align-items: center; gap: 9px; color: #dff7ff; border: 0; background: rgba(3,22,34,.74); font: inherit; text-align: left; cursor: pointer; }
.rating-reward-group-toggle small { color: #83a8b6; }
.rating-reward-group-toggle small b { margin-left: 9px; color: #73e6ff; font-size: .66rem; text-transform: uppercase; white-space: nowrap; }
.rating-reward-group-mark { color: #62dfff; font-weight: 900; text-align: center; }
.rating-reward-chevron { color: #67d9fa; font-size: 1.2rem; transform: rotate(0deg); transition: transform 160ms ease; }
.rating-reward-group.is-open .rating-reward-chevron { transform: rotate(180deg); }
.rating-reward-list { padding: 6px 0 10px 39px; }
.rating-reward { min-height: 60px; padding: 9px; display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 10px; border-left: 3px solid rgba(75,157,187,.42); background: rgba(3,18,28,.82); }
.rating-reward.is-ready { border-left-color: #ffd45e; }
.rating-reward.is-claimed { border-left-color: #57d58a; opacity: .82; }
.rating-reward.is-current { border-left-color: #67ddff; background: rgba(7,49,65,.9); box-shadow: inset 0 0 0 1px rgba(103,221,255,.2); opacity: 1; }
.rating-reward-mark { width: 28px; aspect-ratio: 1; display: grid; place-items: center; color: #dff7ff; clip-path: polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%); background: #0a3547; font-weight: 900; }
.rating-reward-copy { min-width: 0; display: grid; gap: 3px; }
.rating-reward-copy small { color: #86a5b1; }
.rating-reward-status { color: #8baab5; font-size: .78rem; font-weight: 800; }
.rating-reward-status.is-claimed { color: #70d99c; }
.rating-reward-current { display: grid; justify-items: end; gap: 3px; }
.rating-reward-current>strong { color: #73e6ff; font-size: .72rem; text-transform: uppercase; }
.rating-history-row { min-width: 0; min-height: 58px; padding: 9px 11px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: inherit; border-left: 3px solid rgba(75,157,187,.42); background: rgba(3,18,28,.82); text-decoration: none; }
.rating-history-row.is-win { border-left-color: #54d48a; }
.rating-history-row.is-loss { border-left-color: #ff6f67; }
.rating-history-row.is-no-contest { border-left-color: #879ca5; }
.rating-history-row>span { min-width: 0; display: grid; gap: 3px; }
.rating-history-row strong { overflow-wrap: anywhere; }
.rating-history-row small { color: #84a7b5; }
.rating-history-row b { color: #ffe18a; font-size: 1.05rem; }
.matchmaking-choice { display: grid; gap: 10px; }
.matchmaking-choice-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.post-match-rating { margin: 14px 0; padding: 12px; display: grid; gap: 3px; border: 1px solid rgba(89,200,235,.48); border-left-width: 4px; border-radius: 3px; background: rgba(3,25,37,.86); }

.command-promotion-backdrop { position: fixed; inset: 0; z-index: 280; display: grid; place-items: center; padding: max(18px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left)); background: rgba(0,5,10,.82); backdrop-filter: blur(5px); }
.command-promotion-modal { position: relative; width: min(560px,100%); padding: 32px; display: grid; justify-items: center; gap: 14px; overflow: hidden; border: 1px solid rgba(91,216,255,.74); border-radius: 4px; background: radial-gradient(circle at 50% 28%,rgba(24,136,178,.24),transparent 42%),linear-gradient(180deg,rgba(5,29,43,.98),rgba(2,12,21,.99)); box-shadow: 0 0 48px rgba(61,194,239,.24),inset 0 0 40px rgba(61,194,239,.08); text-align: center; clip-path: polygon(22px 0,calc(100% - 22px) 0,100% 22px,100% calc(100% - 22px),calc(100% - 22px) 100%,22px 100%,0 calc(100% - 22px),0 22px); }
.command-promotion-modal::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,transparent,rgba(111,229,255,.18),transparent); transform:translateX(-110%); animation:rating-promotion-scan 900ms ease-out 160ms both; }
.command-promotion-close { position:absolute; z-index:1; top:12px; right:14px; width:44px; height:44px; display:grid; place-items:center; color:#bfefff; border:1px solid rgba(83,203,242,.42); border-radius:3px; background:rgba(4,24,36,.86); font:inherit; font-size:1.45rem; cursor:pointer; }
.command-promotion-eyebrow { color:#6edfff; font-size:.76rem; font-weight:950; text-transform:uppercase; }
.command-promotion-transition { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:18px; width:100%; }
.command-promotion-rank { min-width:0; display:grid; justify-items:center; gap:8px; color:#7599a8; }
.command-promotion-rank b { width:74px; aspect-ratio:1; display:grid; place-items:center; clip-path:polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%); background:#14303c; font-size:2rem; }
.command-promotion-rank small { font-weight:900; text-transform:uppercase; }
.command-promotion-rank.is-current { color:#ffe191; }
.command-promotion-rank.is-current b { background:#0c7398; color:#effdff; text-shadow:0 0 14px #9aeaff; box-shadow:0 0 28px rgba(70,208,255,.34); animation:rating-promotion-rank 640ms ease-out both; }
.command-promotion-arrow { color:#69dcff; font-size:1.8rem; }
.command-promotion-modal h2 { margin:0; color:#f2fcff; font-size:1.7rem; text-transform:uppercase; }
.command-promotion-modal p { margin:0; color:#9dbcc9; }
.command-promotion-continue { position:relative; z-index:1; width:min(300px,100%); margin-top:6px; }
@keyframes rating-promotion-scan { to { transform:translateX(110%); } }
@keyframes rating-promotion-rank { 0% { opacity:.35; transform:scale(.78); } 70% { transform:scale(1.08); } 100% { opacity:1; transform:scale(1); } }

@media (max-width:600px) {
  .command-promotion-modal { padding:28px 18px 22px; gap:12px; }
  .command-promotion-transition { gap:10px; }
  .command-promotion-rank b { width:64px; }
  .command-promotion-rank small { font-size:.7rem; }
}

@media (prefers-reduced-motion:reduce) {
  .command-promotion-modal::before,.command-promotion-rank.is-current b { animation:none; }
}
.post-match-rating>span { color: #7fdfff; font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.post-match-rating>strong { color: #effcff; font-size: 1.05rem; }
.post-match-rating>small { color: #8fb0bc; }
.post-match-rating.is-positive { border-left-color: #54d48a; }
.post-match-rating.is-negative { border-left-color: #ff6f67; }
.post-match-rating.is-no-contest { border-left-color: #879ca5; }

@media (max-width: 600px) {
  .rating-page { gap: 10px; }
  .rating-hero { padding: 12px; }
  .rating-season-line { align-items: flex-start; }
  .rating-hero-main { grid-template-columns: 1fr; gap: 4px; padding-bottom: 11px; }
  .rating-rank { min-height: 94px; grid-template-columns: 62px minmax(0,1fr); gap: 10px; }
  .rating-rank-symbol { width: 58px; font-size: 1.55rem; }
  .rating-rank-copy>strong { font-size: 1.25rem; }
  .rating-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .rating-metrics>div { min-height: 52px; padding: 8px; border-bottom: 1px solid rgba(88,188,220,.18); }
  .rating-strength-line { align-items: flex-end; }
  .rating-credit-grid { grid-template-columns: 1fr; }
  .rating-tabs button { min-height: 48px; padding-inline: 15px; }
  .rating-table-head,.rating-table-row { grid-template-columns: 42px minmax(76px,1fr) 40px 44px 43px 42px; gap: 4px; padding-inline: 5px; }
  .rating-table-head { font-size: .54rem; line-height: 1.05; }
  .rating-reward-group-toggle { grid-template-columns: 26px 72px minmax(0,1fr) 20px; padding-inline: 6px; }
  .rating-reward-list { padding-left: 0; }
  .rating-reward { grid-template-columns: 28px minmax(0,1fr); }
  .rating-reward>button,.rating-reward-status { grid-column: 2; justify-self: start; }
  .rating-reward-current { grid-column: 2; justify-items: start; }
  .rating-reward>button { width: 100%; min-height: 44px; }
  .matchmaking-choice-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .rating-progress>span,.rating-reward-chevron { transition: none; }
}