/* Portraits centrés et véritables ornements, indépendants du cercle du visage. */
.avatar-frame[data-prestige] {
  isolation: isolate;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
.avatar-frame[data-prestige]::before { content: none; }
.avatar-frame[data-prestige] .avatar-crop {
  position: absolute;
  z-index: 0;
  left: var(--frame-face-x);
  top: var(--frame-face-y);
  width: var(--frame-face-size);
  height: var(--frame-face-size);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px var(--frame-accent), 0 3px 10px #0008;
}
.frame-ornaments, .frame-art, .frame-aura, .frame-radiance, .frame-motes {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  user-select: none;
}
.frame-ornaments { z-index: 1; }
.frame-art, .frame-radiance { background: var(--frame-art) center / contain no-repeat; }
.frame-art { filter: var(--frame-material, brightness(1)); }
.frame-aura {
  inset: 13%;
  border-radius: 50%;
  box-shadow: 0 0 15px color-mix(in srgb, var(--frame-accent) 45%, transparent);
  opacity: 0;
}
.frame-radiance { filter: var(--frame-material, brightness(1)) brightness(1.65) saturate(1.15); opacity: 0; }
.frame-motes { display: none; }
.frame-motes i {
  position: absolute;
  width: 3px;
  height: 3px;
  left: var(--mote-x);
  top: var(--mote-y);
  border-radius: 50%;
  background: #fff4d9;
  box-shadow: 0 0 5px 1px var(--frame-accent);
  opacity: 0;
}
.frame-motes i:nth-child(1) { --mote-x: 26%; --mote-y: 15%; --mote-delay: -1s; }
.frame-motes i:nth-child(2) { --mote-x: 76%; --mote-y: 23%; --mote-delay: -3.7s; }
.frame-motes i:nth-child(3) { --mote-x: 11%; --mote-y: 57%; --mote-delay: -5.3s; }
.frame-motes i:nth-child(4) { --mote-x: 86%; --mote-y: 67%; --mote-delay: -2.4s; }
.frame-motes i:nth-child(5) { --mote-x: 60%; --mote-y: 88%; --mote-delay: -6.2s; }
.frame-motes i:nth-child(6) { --mote-x: 51%; --mote-y: 9%; --mote-delay: -4.6s; }
.avatar-frame[data-prestige="3"] .frame-aura,
.avatar-frame[data-prestige="4"] .frame-aura { opacity: .35; }
.avatar-frame[data-prestige="4"] .frame-motes { display: block; }
.screen.active .avatar-frame:is([data-prestige="3"], [data-prestige="4"]) .frame-aura,
.profile-art-preview .avatar-frame:is([data-prestige="3"], [data-prestige="4"]) .frame-aura { animation: profile-aura 6s ease-in-out infinite; }
.screen.active .avatar-frame[data-prestige="4"] .frame-radiance,
.profile-art-preview .avatar-frame[data-prestige="4"] .frame-radiance { animation: profile-radiance 8s ease-in-out infinite; }
.screen.active .avatar-frame[data-prestige="4"] .frame-motes i,
.profile-art-preview .avatar-frame[data-prestige="4"] .frame-motes i { animation: profile-mote 7s ease-in-out var(--mote-delay) infinite; }
@keyframes profile-aura { 0%, 100% { opacity: .2; transform: scale(.97); } 50% { opacity: .65; transform: scale(1.03); } }
@keyframes profile-radiance { 0%, 35%, 100% { opacity: 0; } 65% { opacity: .32; } }
@keyframes profile-mote { 0%, 15%, 85%, 100% { opacity: 0; transform: translateY(3px) scale(.55); } 45% { opacity: .85; } 75% { opacity: 0; transform: translateY(-7px) scale(1); } }

/* Les portraits de collection restent lisibles, y compris ceux à gagner. */
.avatar-choice-grid { gap: 10px; }
.avatar-choice { gap: 8px; padding: 13px 7px; }
.avatar-choice .avatar-face { width: 76px; height: 76px; box-shadow: 0 0 0 1px #9b8d7355; }
.avatar-choice b { font-size: .875rem; }
.avatar-choice small { font-size: .75rem; min-height: 2.6em; }
.avatar-choice.locked { filter: none; cursor: default; }
.avatar-choice.locked .avatar-face { opacity: .85; }
.avatar-lock { top: 80px; left: calc(50% + 25px); width: 22px; height: 22px; }

/* Une galerie où le décor reste visible avant son déblocage. */
.frame-choice-list { gap: 12px; }
.frame-option {
  grid-template-columns: 120px minmax(0, 1fr);
  min-width: 0;
  gap: 14px;
  padding: 14px 12px;
  background: radial-gradient(ellipse at 15% 45%, #29354a55, transparent 65%), #100e18;
  border-color: #414051;
}
.frame-option[data-prestige="3"] { border-color: #666086; background: radial-gradient(ellipse at 15% 45%, #4f367347, transparent 65%), #120f1d; }
.frame-option[data-prestige="4"] { border-color: #8d743d; background: radial-gradient(ellipse at 15% 45%, #80622c3b, transparent 65%), #17121e; }
.frame-display { position: relative; display: grid; place-items: center; min-height: 130px; padding-bottom: 10px; }
.frame-option .avatar-frame { width: 120px; height: 120px; padding: 0; }
.frame-option-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.frame-option-copy b { font-size: 1rem; line-height: 1.2; }
.frame-rarity { color: #b7bfce; font-size: .75rem; font-weight: 700; letter-spacing: .04em; }
[data-prestige="3"] > .frame-option-copy .frame-rarity { color: #c9b4f4; }
[data-prestige="4"] > .frame-option-copy .frame-rarity { color: #f0ce78; }
.frame-motif { color: #d0c9d8; font-size: .875rem; line-height: 1.35; }
.frame-option-copy .frame-bonus { color: #a7b2c8; font-size: .75rem; line-height: 1.35; margin: 0; }
.frame-requirement { display: block; margin-top: 3px; color: #dccba8; font-size: .8125rem; line-height: 1.4; }
.frame-option.selected { border-color: #f0cd72; box-shadow: inset 0 0 0 1px #f0cd7245, 0 0 16px #c296331c; }
.frame-option.selected .frame-requirement { color: #f9df9d; font-weight: 700; }
.frame-option.locked { opacity: 1; filter: none; cursor: default; }
.frame-live-label { position: absolute; bottom: 0; color: #d4c7e9; border: 1px solid #aa91d244; background: #14101fe6; border-radius: 99px; padding: 2px 7px; font-size: .6875rem; line-height: 1.3; }
.frame-option:focus-visible, .avatar-choice:focus-visible { outline: 2px solid #f6d983; outline-offset: 3px; }
.avatar-frame-large[data-prestige] { width: 112px; height: 112px; }

@media (max-width: 390px) {
  .frame-option { grid-template-columns: 98px minmax(0, 1fr); gap: 10px; padding: 12px 8px; }
  .frame-option .avatar-frame { width: 98px; height: 98px; }
  .frame-display { min-height: 116px; }
  .frame-option-copy b { font-size: .9375rem; }
  .frame-motif { font-size: .8125rem; }
  .avatar-choice .avatar-face { width: 66px; height: 66px; }
  .avatar-lock { top: 72px; left: calc(50% + 22px); }
  .avatar-frame-large[data-prestige] { width: 90px; height: 90px; }
}
@media (max-width: 320px) {
  .avatar-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .frame-option { grid-template-columns: 1fr; }
  .frame-option-copy { align-items: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .frame-ornaments *, .frame-ornaments *::before, .frame-ornaments *::after { animation: none !important; }
  .frame-motes { display: none !important; }
}
.profile-motion-paused .frame-ornaments * { animation-play-state: paused !important; }