/* Trail Locker: persistent player identity, illustrated calling cards, and sticker flair. */

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.locker-button {
  border-color: rgba(125, 227, 184, .58);
  background: linear-gradient(180deg, #315749, #18352f);
  color: #d8ffe7;
  box-shadow: inset 0 1px 0 rgba(228, 255, 233, .18), 0 3px 0 #0e201d, 0 0 15px rgba(99, 232, 177, .12);
}

.locker-button:hover {
  border-color: #c4ffe2;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 3px 0 #0e201d, 0 0 20px rgba(108, 255, 194, .3);
}

.locker-button.profile-unlock {
  animation: profileUnlock 1.05s cubic-bezier(.2, .84, .24, 1.2) both;
}

@keyframes profileUnlock {
  0%, 100% { transform: translateY(0) rotate(0); }
  22% { transform: translateY(-4px) rotate(-1deg) scale(1.08); filter: brightness(1.46); box-shadow: 0 0 0 3px rgba(255, 222, 106, .42), 0 0 24px rgba(255, 218, 98, .68); }
  54% { transform: translateY(1px) rotate(1deg) scale(.98); }
}

/* The equipped card reaches the live HUD, with personality but without hiding game data. */
#playerHero {
  --profile-a: #214d45;
  --profile-b: #10292b;
  --profile-accent: #ffd36a;
  --profile-trim: #9ce4bb;
  --profile-ink: #fff4d2;
  isolation: isolate;
  overflow: hidden;
  border-color: var(--profile-trim);
  background:
    radial-gradient(circle at 77% 15%, color-mix(in srgb, var(--profile-accent) 24%, transparent), transparent 28%),
    linear-gradient(125deg, color-mix(in srgb, var(--profile-a) 89%, #070b0d), var(--profile-b) 72%);
  box-shadow: inset 0 0 0 2px rgba(12, 8, 13, .78), inset 0 1px 0 rgba(255, 255, 255, .17), 0 7px 16px rgba(0, 0, 0, .52), 0 0 17px color-mix(in srgb, var(--profile-trim) 20%, transparent);
}

#playerHero > * { position: relative; z-index: 2; }

#playerHero::before,
.calling-card::before,
.card-skin-choice .skin-art::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: .74;
}

#playerHero::after { z-index: 3; border-color: color-mix(in srgb, var(--profile-trim) 36%, transparent); }

#playerHero .player-details { padding-right: 7px; }

#playerHero .hero-details strong {
  color: var(--profile-ink);
  font-size: 14px;
  letter-spacing: .35px;
  text-shadow: 0 2px rgba(13, 7, 15, .55);
}

#playerHero .hero-details small { color: color-mix(in srgb, var(--profile-ink) 77%, #afbdc4); }

.player-title-ribbon {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  padding: 2px 6px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--profile-accent) 63%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--profile-b) 76%, #0d0a10);
  color: var(--profile-accent) !important;
  font-size: 7px !important;
  letter-spacing: .45px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}

.profile-avatar {
  position: relative;
  overflow: hidden;
  border-left: 1px solid color-mix(in srgb, var(--profile-trim) 35%, transparent);
  background-color: #18242b !important;
  background-image: url("assets/trainer-portrait-atlas.png") !important;
  background-repeat: no-repeat !important;
  background-size: 500% 300% !important;
  background-position: var(--avatar-x, 0%) var(--avatar-y, 0%) !important;
  box-shadow: inset 3px 0 13px rgba(0, 0, 0, .42), -4px 0 12px color-mix(in srgb, var(--avatar-accent, #9ce4bb) 18%, transparent);
}

.profile-avatar::before,
.profile-avatar span { display: none; }

.player-sticker-bar {
  display: flex;
  justify-content: flex-end;
  gap: 3px;
  min-height: 15px;
  margin-top: 2px;
}

.hud-sticker {
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--profile-accent) 70%, #fff);
  border-radius: 50%;
  background: rgba(15, 12, 18, .78);
  color: #fff8d4;
  font-size: 9px;
  line-height: 1;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .7), 0 0 6px color-mix(in srgb, var(--profile-accent) 30%, transparent);
}

/* All fifteen calling-card treatments share a material language but keep their own visual joke. */
[data-card-pattern="embers"]::before { background: radial-gradient(circle at 16% 86%, var(--profile-accent) 0 2px, transparent 3px), radial-gradient(circle at 39% 22%, var(--profile-accent) 0 1px, transparent 3px), radial-gradient(circle at 63% 73%, var(--profile-accent) 0 2px, transparent 3px), radial-gradient(circle at 92% 24%, var(--profile-accent) 0 1px, transparent 3px); background-size: 46px 47px, 63px 66px, 70px 64px, 55px 58px; }
[data-card-pattern="sunflower"]::before { background: repeating-radial-gradient(circle at 91% 14%, transparent 0 11px, color-mix(in srgb, var(--profile-accent) 36%, transparent) 12px 13px, transparent 14px 25px), linear-gradient(115deg, transparent 40%, color-mix(in srgb, var(--profile-trim) 25%, transparent) 41% 42%, transparent 43%); }
[data-card-pattern="roots"]::before { background: repeating-linear-gradient(112deg, transparent 0 20px, color-mix(in srgb, var(--profile-accent) 23%, transparent) 21px 23px, transparent 24px 48px), radial-gradient(ellipse at 25% 110%, color-mix(in srgb, var(--profile-trim) 39%, transparent), transparent 54%); }
[data-card-pattern="checker"]::before { background-image: linear-gradient(45deg, color-mix(in srgb, var(--profile-accent) 21%, transparent) 25%, transparent 25%), linear-gradient(-45deg, color-mix(in srgb, var(--profile-trim) 19%, transparent) 25%, transparent 25%); background-size: 30px 30px; background-position: 0 0, 15px 15px; }
[data-card-pattern="ledger"]::before { background: repeating-linear-gradient(0deg, transparent 0 13px, color-mix(in srgb, var(--profile-accent) 18%, transparent) 14px 15px), linear-gradient(90deg, transparent 0 26%, color-mix(in srgb, var(--profile-trim) 29%, transparent) 27% 28%, transparent 29%); }
[data-card-pattern="ghost-vines"]::before { background: radial-gradient(circle at 86% 22%, color-mix(in srgb, var(--profile-accent) 38%, transparent) 0 9px, transparent 10px), repeating-linear-gradient(140deg, transparent 0 28px, color-mix(in srgb, var(--profile-trim) 18%, transparent) 29px 31px, transparent 32px 56px); }
[data-card-pattern="circuit"]::before { background: linear-gradient(90deg, transparent 20%, color-mix(in srgb, var(--profile-accent) 31%, transparent) 20.7% 21.6%, transparent 22.3%), linear-gradient(0deg, transparent 66%, color-mix(in srgb, var(--profile-trim) 25%, transparent) 66.7% 67.5%, transparent 68.2%); background-size: 41px 31px, 32px 41px; }
[data-card-pattern="constellation"]::before { background: radial-gradient(circle at 11% 31%, var(--profile-accent) 0 1px, transparent 2px), radial-gradient(circle at 41% 18%, var(--profile-trim) 0 1px, transparent 2px), radial-gradient(circle at 74% 48%, var(--profile-accent) 0 2px, transparent 3px), radial-gradient(circle at 92% 80%, var(--profile-trim) 0 1px, transparent 2px), linear-gradient(155deg, transparent 43%, color-mix(in srgb, var(--profile-accent) 20%, transparent) 43.5% 44%, transparent 44.5%); }
[data-card-pattern="bubbles"]::before { background: radial-gradient(circle at 14% 33%, transparent 0 6px, color-mix(in srgb, var(--profile-trim) 32%, transparent) 7px 8px, transparent 9px), radial-gradient(circle at 68% 76%, transparent 0 10px, color-mix(in srgb, var(--profile-accent) 28%, transparent) 11px 12px, transparent 13px), radial-gradient(circle at 85% 20%, transparent 0 4px, color-mix(in srgb, var(--profile-trim) 34%, transparent) 5px 6px, transparent 7px); }
[data-card-pattern="hazard"]::before { background: repeating-linear-gradient(125deg, transparent 0 20px, color-mix(in srgb, var(--profile-accent) 27%, transparent) 21px 34px, transparent 35px 54px); }
[data-card-pattern="thorns"]::before { background: repeating-linear-gradient(37deg, transparent 0 18px, color-mix(in srgb, var(--profile-trim) 25%, transparent) 19px 21px, transparent 22px 41px), repeating-linear-gradient(143deg, transparent 0 26px, color-mix(in srgb, var(--profile-accent) 17%, transparent) 27px 29px, transparent 30px 55px); }
[data-card-pattern="mountains"]::before { background: linear-gradient(145deg, transparent 0 54%, color-mix(in srgb, var(--profile-trim) 25%, transparent) 55% 57%, transparent 58%), linear-gradient(36deg, transparent 0 58%, color-mix(in srgb, var(--profile-accent) 22%, transparent) 59% 61%, transparent 62%); }
[data-card-pattern="curtain"]::before { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--profile-accent) 18%, transparent) 0 8px, transparent 9px 22px), radial-gradient(ellipse at 50% -20%, color-mix(in srgb, var(--profile-trim) 32%, transparent), transparent 58%); }
[data-card-pattern="wanted"]::before { background: repeating-linear-gradient(0deg, transparent 0 16px, color-mix(in srgb, var(--profile-accent) 16%, transparent) 17px 18px), repeating-linear-gradient(90deg, transparent 0 19px, color-mix(in srgb, var(--profile-trim) 11%, transparent) 20px 21px); }
[data-card-pattern="steam"]::before { background: repeating-radial-gradient(ellipse at 65% 100%, transparent 0 16px, color-mix(in srgb, var(--profile-accent) 23%, transparent) 17px 18px, transparent 19px 34px), radial-gradient(circle at 16% 22%, color-mix(in srgb, var(--profile-trim) 28%, transparent), transparent 29%); }

/* Locker shell. It is deliberately its own overlay so reward/game modals cannot advance the run. */
.locker-backdrop {
  z-index: 95;
  background: rgba(8, 5, 12, .79);
  backdrop-filter: blur(10px) saturate(1.08);
}

.locker-modal {
  width: min(970px, 95vw);
  height: min(690px, 94vh);
  max-height: 94vh;
  padding: 18px 20px 15px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 2px solid #c69e66;
  border-radius: 23px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(124, 93, 73, .4), transparent 38%),
    linear-gradient(145deg, #3a292a, #17151d 68%);
  box-shadow: inset 0 0 0 2px rgba(15, 9, 12, .86), inset 0 1px 0 rgba(255, 235, 186, .17), 0 19px 0 rgba(9, 6, 10, .8), 0 28px 60px rgba(0, 0, 0, .7), 0 0 30px rgba(224, 172, 92, .18);
  color: #ffe9c5;
  text-align: left;
}

.locker-modal::after {
  content: "";
  position: absolute;
  inset: 7px;
  pointer-events: none;
  border: 1px solid rgba(255, 225, 164, .13);
  border-radius: 17px;
}

.locker-modal .modal-close {
  z-index: 6;
  right: 14px;
  top: 7px;
  color: #e9c997;
}

.locker-heading {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 39px 12px 3px;
  border-bottom: 1px solid rgba(237, 199, 125, .24);
}

.locker-heading-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid #e6c172;
  border-radius: 12px 15px 12px 15px;
  background: radial-gradient(circle at 33% 25%, #fff1a8, #b266a1 55%, #392241);
  box-shadow: 0 2px 0 #160d1a, 0 0 16px rgba(190, 116, 222, .43);
  color: #fff8cf;
  font-size: 21px;
}

.locker-heading .eyebrow { color: #d9b37b; font-size: 8px; }
.locker-heading h2 { margin: 1px 0 0; color: #ffe4a4; font-family: "Cinzel", Georgia, serif; font-size: 22px; line-height: 1; }
.locker-heading > small { margin-left: auto; color: #c8ae94; font-size: 8px; font-weight: 800; text-align: right; }

.locker-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 303px minmax(0, 1fr);
  gap: 15px;
  padding-top: 14px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.locker-preview {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(216, 176, 105, .34);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(77, 54, 46, .86), rgba(20, 18, 24, .88));
  box-shadow: inset 0 0 20px rgba(0, 0, 0, .23), 0 3px 0 rgba(7, 6, 9, .62);
  overflow: auto;
}

.locker-preview-label {
  display: block;
  margin: 0 0 7px 2px;
  color: #ddba79;
  font-size: 7px;
  font-weight: 1000;
  letter-spacing: 1px;
}

.calling-card {
  --profile-a: #214d45;
  --profile-b: #10292b;
  --profile-accent: #ffd36a;
  --profile-trim: #9ce4bb;
  --profile-ink: #fff4d2;
  position: relative;
  isolation: isolate;
  aspect-ratio: 1.58 / 1;
  overflow: hidden;
  border: 2px solid var(--profile-trim);
  border-radius: 13px;
  background:
    radial-gradient(circle at 76% 14%, color-mix(in srgb, var(--profile-accent) 31%, transparent), transparent 27%),
    linear-gradient(135deg, var(--profile-a), var(--profile-b) 73%);
  box-shadow: inset 0 0 0 2px rgba(10, 8, 12, .62), 0 4px 0 #140e14, 0 12px 18px rgba(0, 0, 0, .34), 0 0 18px color-mix(in srgb, var(--profile-trim) 22%, transparent);
}

.calling-card::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 5px;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--profile-accent) 46%, transparent);
  border-radius: 8px;
}

.calling-card > * { position: absolute; z-index: 2; }

.calling-card-slogan {
  top: 8px;
  right: 9px;
  left: 92px;
  overflow: hidden;
  color: color-mix(in srgb, var(--profile-ink) 87%, #cfbdac);
  font-size: 7px;
  font-weight: 800;
  font-style: italic;
  line-height: 1.12;
  text-align: right;
}

.calling-card-avatar,
.avatar-choice-art {
  display: block;
  background-color: #17242a;
  background-image: url("assets/trainer-portrait-atlas.png");
  background-repeat: no-repeat;
  background-size: 500% 300%;
  background-position: var(--avatar-x, 0%) var(--avatar-y, 0%);
}

.calling-card-avatar {
  bottom: -3px;
  left: 11px;
  width: 94px;
  height: 94px;
  border: 2px solid var(--profile-trim);
  border-radius: 15px 15px 10px 10px;
  box-shadow: 0 3px 0 rgba(7, 6, 10, .65), 0 0 15px color-mix(in srgb, var(--avatar-accent, var(--profile-trim)) 35%, transparent);
}

.calling-card-rank {
  top: 43px;
  left: 113px;
  color: var(--profile-accent);
  font-size: 6px;
  font-weight: 1000;
  letter-spacing: 1.3px;
}

.calling-card-name {
  right: 12px;
  bottom: 33px;
  left: 112px;
  overflow: hidden;
  color: var(--profile-ink);
  font-family: "Cinzel", Georgia, serif;
  font-size: 15px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px rgba(10, 6, 10, .56);
}

.calling-card-title {
  right: 12px;
  bottom: 16px;
  left: 111px;
  padding: 3px 5px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--profile-accent) 58%, transparent);
  border-radius: 5px;
  background: rgba(13, 10, 16, .68);
  color: var(--profile-accent);
  font-size: 7px;
  font-weight: 1000;
  letter-spacing: .25px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calling-card-stickers { right: 11px; bottom: 7px; display: flex; gap: 3px; }
.calling-sticker { display: grid; width: 13px; height: 13px; place-items: center; border: 1px solid var(--profile-trim); border-radius: 50%; background: rgba(12, 9, 14, .86); font-size: 8px; line-height: 1; }

.locker-equipped { margin-top: 11px; }
.locker-equipped > span { display: block; margin: 0 0 5px 1px; color: #d2ad72; font-size: 7px; font-weight: 1000; letter-spacing: .8px; }
.locker-equipped > small { display: block; margin: 6px 1px 0; color: #b8a18d; font-size: 7px; font-weight: 800; line-height: 1.2; }
.locker-equipped-stickers { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; }

.equipped-sticker {
  position: relative;
  min-width: 0;
  min-height: 48px;
  padding: 5px 12px 5px 5px;
  border: 1px solid rgba(255, 231, 178, .35);
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(68, 51, 68, .88), rgba(25, 20, 29, .9));
  color: #fff0d6;
  text-align: center;
  transition: transform .14s ease, filter .14s ease;
}

.equipped-sticker:hover { transform: translateY(-2px); filter: brightness(1.16); }
.equipped-sticker > span { display: block; font-size: 19px; line-height: 1; }
.equipped-sticker b { display: block; overflow: hidden; margin-top: 2px; color: #ead9bf; font-size: 6px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.equipped-sticker i { position: absolute; top: 2px; right: 3px; color: #f0a1a5; font-size: 11px; font-style: normal; font-weight: 1000; }
.equipped-sticker-empty { grid-column: 1 / -1; padding: 9px; border: 1px dashed rgba(224, 184, 116, .35); border-radius: 9px; color: #a8907b; font-size: 8px; font-weight: 800; text-align: center; }

.locker-controls {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(156, 129, 92, .36);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(39, 29, 34, .94), rgba(17, 15, 22, .94));
  box-shadow: inset 0 0 20px rgba(0, 0, 0, .18);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.locker-tabs { display: grid; grid-template-columns: 1.05fr 1.2fr .78fr .8fr .88fr; gap: 5px; padding-bottom: 9px; border-bottom: 1px solid rgba(223, 184, 111, .18); }
.locker-tab { min-height: 31px; padding: 5px 4px; border: 1px solid rgba(184, 146, 100, .33); border-radius: 8px; background: linear-gradient(#4a342f, #281e23); color: #d9c4a6; font-size: 8px; font-weight: 1000; letter-spacing: .25px; text-transform: uppercase; transition: transform .14s ease, filter .14s ease; }
.locker-tab:hover { transform: translateY(-1px); filter: brightness(1.15); }
.locker-tab.active { border-color: #8fe6c0; background: linear-gradient(#356150, #1e362f); box-shadow: 0 0 0 1px rgba(168, 255, 216, .26), 0 0 14px rgba(99, 233, 178, .17); color: #e9ffe6; }

.locker-pane { flex: 1 1 auto; max-height: none; min-height: 0; padding: 12px 2px 3px; overflow: auto; scrollbar-color: #b38c58 #21171b; scrollbar-width: thin; }
.locker-pane::-webkit-scrollbar { width: 7px; }.locker-pane::-webkit-scrollbar-track { background: #20161b; border-radius: 10px; }.locker-pane::-webkit-scrollbar-thumb { border: 2px solid #20161b; border-radius: 10px; background: #aa8052; }

.locker-pane-heading { display: flex; align-items: center; gap: 7px; margin: 0 4px 12px; }
.locker-pane-heading > span { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid rgba(246, 213, 147, .46); border-radius: 8px; background: linear-gradient(145deg, #75523d, #33212a); color: #ffe69d; font-size: 14px; }
.locker-pane-heading b { display: block; color: #f4dfb8; font-family: "Cinzel", Georgia, serif; font-size: 12px; line-height: 1; }
.locker-pane-heading small { display: block; margin-top: 3px; color: #bba492; font-size: 8px; font-weight: 800; }

.profile-name-field { display: block; margin: 0 4px 14px; padding: 9px; border: 1px solid rgba(237, 194, 120, .24); border-radius: 10px; background: rgba(13, 11, 16, .48); }
.profile-name-field > span { display: block; margin-bottom: 5px; color: #d7b477; font-size: 7px; font-weight: 1000; letter-spacing: .9px; }
.profile-name-field input { width: 100%; height: 35px; padding: 0 9px; border: 1px solid #a9845d; border-radius: 8px; outline: none; background: linear-gradient(145deg, #392a2d, #1d1820); color: #fff0cf; font-family: "Cinzel", Georgia, serif; font-size: 13px; font-weight: 700; box-shadow: inset 0 1px 4px rgba(0, 0, 0, .46); }
.profile-name-field input:focus { border-color: #96e5bf; box-shadow: 0 0 0 2px rgba(126, 255, 199, .18), inset 0 1px 4px rgba(0, 0, 0, .46); }
.profile-name-field small { display: block; margin-top: 5px; color: #aa9685; font-size: 7px; font-weight: 800; }

.pane-section-heading { display: flex; justify-content: space-between; gap: 10px; margin: 0 4px 7px; color: #ecd5aa; }
.pane-section-heading b { font-family: "Cinzel", Georgia, serif; font-size: 10px; }
.pane-section-heading small { color: #a99481; font-size: 7px; font-weight: 800; text-align: right; }

.avatar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 3px; }
.avatar-choice { position: relative; display: flex; min-width: 0; min-height: 68px; padding: 4px; overflow: hidden; border: 1px solid rgba(186, 151, 105, .34); border-radius: 9px; background: linear-gradient(145deg, #413035, #211a21); color: #f7e6c7; text-align: left; transition: transform .15s ease, filter .15s ease, border-color .15s ease; }
.avatar-choice:hover { z-index: 1; transform: translateY(-2px); border-color: #e5c986; filter: brightness(1.13); }
.avatar-choice.selected { border-color: #7ce4bb; background: linear-gradient(145deg, #2c5546, #192c29); box-shadow: 0 0 0 1px rgba(149, 255, 211, .28), 0 0 14px rgba(93, 235, 179, .18); }
.avatar-choice-art { flex: 0 0 50px; width: 50px; height: 58px; border: 1px solid var(--avatar-accent); border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13), 0 1px 0 rgba(0, 0, 0, .6); }
.avatar-choice > span:last-child { min-width: 0; padding: 5px 2px 2px 6px; }
.avatar-choice b { display: block; overflow: hidden; color: #ffe5b8; font-size: 8px; font-weight: 1000; line-height: 1.05; text-overflow: ellipsis; }
.avatar-choice small { display: -webkit-box; overflow: hidden; margin-top: 4px; color: #bba997; font-size: 6px; font-weight: 800; line-height: 1.12; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.card-skin-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 3px; }
.card-skin-choice { position: relative; min-height: 112px; padding: 4px 5px 7px; overflow: hidden; border: 1px solid rgba(194, 158, 108, .38); border-radius: 9px; background: linear-gradient(145deg, #3e2d32, #1d1820); color: #ffe9c5; text-align: left; transition: transform .15s ease, filter .15s ease, border-color .15s ease; }
.card-skin-choice:hover { z-index: 2; transform: translateY(-3px) rotate(-.35deg); border-color: var(--profile-accent); filter: brightness(1.13); }
.card-skin-choice.selected { border-color: #8bedc5; box-shadow: 0 0 0 1px rgba(159, 255, 214, .3), 0 0 16px rgba(98, 235, 179, .22); }
.skin-art { position: relative; display: block; height: 55px; margin-bottom: 5px; overflow: hidden; border: 1px solid var(--profile-trim); border-radius: 6px; background: linear-gradient(135deg, var(--profile-a), var(--profile-b)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45); }
.skin-art::before { z-index: 0; opacity: .85; }
.skin-art i { position: absolute; z-index: 1; left: 9px; bottom: 3px; color: var(--profile-ink); font-size: 30px; font-style: normal; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35)); }
.skin-art em { position: absolute; z-index: 1; top: 5px; right: 5px; color: var(--profile-accent); font-size: 5px; font-style: normal; font-weight: 1000; letter-spacing: .6px; text-transform: uppercase; }
.card-skin-choice > b { display: block; overflow: hidden; color: #ffe2a9; font-size: 8px; font-weight: 1000; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.card-skin-choice > small { display: -webkit-box; overflow: hidden; margin-top: 3px; color: #bda995; font-size: 6px; font-weight: 800; line-height: 1.1; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.title-progress,
.sticker-note { display: flex; justify-content: space-between; gap: 10px; margin: 0 4px 8px; padding: 7px 8px; border: 1px solid rgba(190, 150, 98, .24); border-radius: 8px; background: rgba(14, 11, 16, .52); }
.title-progress span,
.sticker-note b { color: #ffdd7d; font-size: 8px; font-weight: 1000; }
.title-progress small,
.sticker-note small { color: #b5a08d; font-size: 7px; font-weight: 800; text-align: right; }

.title-collection { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 3px; }
.title-choice { display: flex; min-width: 0; min-height: 72px; padding: 7px; border: 1px solid rgba(192, 158, 108, .34); border-radius: 9px; background: linear-gradient(145deg, #3d2d33, #201921); color: #fee8c0; text-align: left; transition: transform .15s ease, filter .15s ease; }
.title-choice:not(:disabled):hover { transform: translateY(-2px); filter: brightness(1.15); }
.title-choice > span { display: grid; flex: 0 0 24px; width: 24px; height: 24px; place-items: center; border: 1px solid rgba(255, 219, 139, .5); border-radius: 7px; background: #4c352d; color: #ffde85; font-size: 12px; }
.title-choice > div { min-width: 0; padding-left: 7px; }
.title-choice b { display: block; color: #ffe1a6; font-family: "Cinzel", Georgia, serif; font-size: 8px; line-height: 1.08; }
.title-choice small { display: -webkit-box; overflow: hidden; margin-top: 3px; color: #bca895; font-size: 6px; font-weight: 800; line-height: 1.08; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.title-choice em { display: block; overflow: hidden; margin-top: 3px; color: #a8dcb7; font-size: 6px; font-style: normal; font-weight: 1000; letter-spacing: .25px; text-overflow: ellipsis; white-space: nowrap; }
.title-choice.locked { border-color: rgba(108, 94, 104, .45); background: linear-gradient(145deg, #28232a, #17151b); color: #8d8290; filter: grayscale(.55); opacity: .78; cursor: default; }
.title-choice.locked > span { border-color: rgba(159, 139, 151, .42); background: #2c252d; color: #9b8b99; }
.title-choice.locked b { color: #b6a6b2; }.title-choice.locked small { color: #877d88; }.title-choice.locked em { color: #cfad70; }
.title-choice.selected { border-color: #88e7c0; background: linear-gradient(145deg, #2b5648, #192d2b); box-shadow: 0 0 0 1px rgba(158, 255, 214, .27), 0 0 14px rgba(94, 235, 179, .18); }

.sticker-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 3px; }
.sticker-choice { position: relative; min-width: 0; min-height: 76px; padding: 6px 3px 5px; overflow: hidden; border: 1px solid rgba(221, 197, 143, .28); border-radius: 9px; background: linear-gradient(145deg, #3b2e36, #211a22); color: #ffe9c4; text-align: center; transition: transform .14s ease, filter .14s ease, border-color .14s ease; }
.sticker-choice:hover { z-index: 2; transform: translateY(-3px) rotate(-.6deg); filter: brightness(1.16); }
.sticker-choice > span { display: block; font-size: 23px; line-height: 1; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .36)); }
.sticker-choice b { display: block; overflow: hidden; margin-top: 4px; color: #f8dfb3; font-size: 6px; font-weight: 1000; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.sticker-choice small { display: block; margin-top: 3px; color: #a99381; font-size: 5px; font-weight: 1000; letter-spacing: .4px; }
.sticker-choice i { position: absolute; top: 3px; right: 4px; display: grid; width: 14px; height: 14px; place-items: center; border: 1px solid #c8ffe1; border-radius: 50%; background: #2e996e; color: #f3ffe3; font-size: 8px; font-style: normal; font-weight: 1000; box-shadow: 0 1px 0 #153c2e; }
.sticker-choice.selected { border-color: #85ebc1; background: linear-gradient(145deg, #2b594a, #172b27); box-shadow: 0 0 0 1px rgba(162, 255, 215, .25), 0 0 13px rgba(94, 235, 179, .17); }

.rarity-common { --rarity: #d1c1a2; }.rarity-uncommon { --rarity: #80dca1; }.rarity-rare { --rarity: #7bc1ef; }.rarity-epic { --rarity: #ca91f2; }.rarity-legendary { --rarity: #ffc862; }.rarity-mythic { --rarity: #ff83bb; }
.sticker-choice[class*="rarity-"], .equipped-sticker[class*="rarity-"] { border-color: color-mix(in srgb, var(--rarity) 63%, rgba(247, 222, 171, .28)); }
.sticker-choice[class*="rarity-"] small { color: var(--rarity); }.calling-sticker[class*="rarity-"], .hud-sticker[class*="rarity-"] { border-color: var(--rarity); box-shadow: 0 0 7px color-mix(in srgb, var(--rarity) 43%, transparent); }

.locker-footer { position: relative; z-index: 1; display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 14px; margin-top: 13px; padding-top: 10px; border-top: 1px solid rgba(234, 194, 119, .22); }
.locker-footer small { color: #bba18b; font-size: 8px; font-weight: 800; }
.locker-done { width: auto; min-width: 177px; margin: 0; padding: 9px 13px; border: 1px solid #c9e99a; background: linear-gradient(#628952, #29452d); box-shadow: inset 0 1px 0 rgba(247, 255, 208, .24), 0 3px 0 #152a1b; color: #f2ffcf; font-family: "Cinzel", Georgia, serif; font-size: 10px; }
.locker-done:hover { filter: brightness(1.14); transform: translateY(-1px); }

.calling-card.card-swap { animation: cardSwap .62s cubic-bezier(.16, .86, .24, 1.15) both; }
.calling-card.sticker-pop .calling-card-stickers { animation: stickerPop .56s cubic-bezier(.18, .9, .24, 1.25) both; }
@keyframes cardSwap { 0% { transform: rotateY(0) scale(1); } 42% { transform: rotateY(88deg) scale(.92); filter: brightness(1.5); } 100% { transform: rotateY(0) scale(1); } }
@keyframes stickerPop { 0% { transform: scale(.25) rotate(-16deg); filter: brightness(1.8); } 58% { transform: scale(1.32) rotate(6deg); } 100% { transform: scale(1) rotate(0); } }

@media (max-width: 1130px) {
  .locker-modal { width: min(910px, 96vw); }
  .locker-layout { grid-template-columns: 276px minmax(0, 1fr); gap: 11px; }
  .avatar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .avatar-choice { min-height: 62px; }.avatar-choice-art { flex-basis: 43px; width: 43px; height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .locker-button.profile-unlock,
  .calling-card.card-swap,
  .calling-card.sticker-pop .calling-card-stickers { animation: none !important; }
}