/* Rewards share sizes; color conveys tier while text separately conveys unlock state. */
.profile-details .reward-note, .profile-details .reward-status { font-size:12px; margin:8px 0; }
.reward-status:empty { display:none; }
.reward-card-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:5px; }
.reward-item { --reward-color:#2088c9; --reward-bg:#e5f5ff; border:2px solid var(--reward-color); background:var(--reward-bg); color:#154763; border-radius:14px; padding:10px; box-sizing:border-box; }
.reward-tier-green { --reward-color:#239966; --reward-bg:#e5f7ed; }
.reward-tier-orange { --reward-color:#cf781b; --reward-bg:#fff1d9; }
.reward-tier-red { --reward-color:#ca4658; --reward-bg:#ffeaed; }
.reward-tier-purple { --reward-color:#8951c6; --reward-bg:#f3eaff; }
.reward-tier-gold { --reward-color:#b88a16; --reward-bg:#fff5cb; }
.reward-card-grid .reward-item { display:flex; flex-direction:column; align-items:center; }
.reward-card-grid img { width:84px; height:126px; object-fit:contain; border-radius:12px; }
.reward-copy { min-width:0; }
.reward-copy strong { font-size:14px; line-height:1.4; }
.reward-copy p { font-size:12px; line-height:1.5; margin:7px 0; overflow-wrap:anywhere; }
.reward-copy small { font-size:11px; font-weight:bold; color:#465467; }
.reward-item:not(.is-earned) img { filter:grayscale(.8); opacity:.65; }
.reward-item.is-earned { box-shadow:0 2px 8px color-mix(in srgb,var(--reward-color) 30%,transparent); }
.reward-badge-section { margin:8px 0 16px; padding:10px; border:1px solid #aacede; border-radius:16px; background:#f3fbffb8; }
.reward-badge-section h3 { margin:0 0 10px; font-size:17px; color:#166486; }
.reward-badge-section .reward-item { display:grid; grid-template-columns:56px minmax(0,1fr) auto; align-items:center; gap:12px; margin-top:8px; text-align:start; }
.reward-badge-section img { width:56px; height:56px; object-fit:contain; }
.profile-details .reward-use { min-width:76px; }
.reward-use:disabled { opacity:.55; cursor:default; }
.reward-use[aria-pressed=true] { background:#198859; color:white; }
#profile-name .profile-equipped-badge { width:38px; height:38px; object-fit:contain; vertical-align:middle; margin-inline-start:9px; }
@media (pointer:coarse) and (orientation:landscape), (max-height:540px) and (orientation:landscape) {
 .reward-card-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
 .reward-card-grid img { width:108px; height:162px; }
 .reward-copy strong, .reward-badge-section h3 { font-size:28px; }
 .reward-copy p, .reward-copy small, .profile-details .reward-note { font-size:23px; }
 .reward-badge-section .reward-item { grid-template-columns:88px minmax(0,1fr) auto; gap:16px; }
 .reward-badge-section img { width:88px; height:88px; }
 #profile-name .profile-equipped-badge { width:48px; height:48px; }
}

.profile-heading #profile-name {
  display:flex; direction:ltr; align-items:center; justify-content:center; gap:14px;
  width:fit-content; max-width:90%; min-height:72px; margin:8px auto 12px;
  padding:6px 22px; box-sizing:border-box; border:2px solid #58cbe9; border-radius:22px;
  background:linear-gradient(135deg,#ffffff,#d9f6ff 65%,#fff4ce);
  box-shadow:0 5px 16px #087aaa25,inset 0 0 0 2px #ffffffb3;
}
.profile-name-text { min-width:0; overflow-wrap:anywhere; line-height:1.2; }
#profile-name .profile-equipped-badge {
  width:84px; height:84px; flex:0 0 84px; margin:0; object-fit:contain;
  filter:drop-shadow(0 3px 4px #805c0038);
}
@media (pointer:coarse) and (orientation:landscape), (max-height:540px) and (orientation:landscape) {
  #profile-name .profile-equipped-badge { width:100px; height:100px; flex-basis:100px; }
}
.profile-heading #profile-name { min-height:0; width:fit-content; max-width:80%; padding:5px 10px; gap:8px; margin:7px auto 3px; border:1px solid #87bfd1; border-radius:10px; background:#effaff; box-shadow:none; font-size:20px; }
#profile-name .profile-equipped-badge { width:56px; height:56px; flex-basis:56px; filter:none; }
.profile-player-number { color:#175978; font:500 14px/1.3 Arial,sans-serif; letter-spacing:.5px; margin:0 auto 8px; }

.profile-name-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.profile-card > .profile-equipped-badge { position:absolute; top:8px; left:16px; width:140px; height:140px; object-fit:contain; margin:0; pointer-events:none; filter:drop-shadow(0 3px 5px #654b0030); }

.profile-card > .profile-equipped-badge { top:-8px; left:34px; }