/* Cadres d'avatar — App\View\CadreAvatar (SVG) + App\View\Avatar (helper). Lueur par teinte, éclat par
   rareté, animations. Le <defs> partagé est posé une fois par CadreAvatar::defs() (dans le layout). */
.ava{ position:relative; display:inline-block; line-height:0; }
.ava-img{ display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; }
.ava-glyphe{ display:flex; align-items:center; justify-content:center; width:100%; height:100%;
  border-radius:50%; background:#e9d9b0; color:#5a431f; font-weight:600; }
.ava-cadre{ position:absolute; left:-32%; top:-32%; width:164%; height:164%; pointer-events:none; z-index:1; }
.ava-cadre .cadre-svg{ width:100%; height:100%; display:block; overflow:visible; }

/* teinte -> couleur de lueur */
.cadre-t-or{--lueur:#f4c64a}      .cadre-t-argent{--lueur:#cfd8e2}  .cadre-t-bronze{--lueur:#c98a4a}
.cadre-t-acier{--lueur:#9fb4c8}   .cadre-t-emeraude{--lueur:#46b063} .cadre-t-arcane{--lueur:#6f8cff}
.cadre-t-royal{--lueur:#c08adf}   .cadre-t-aile{--lueur:#ffe9a8}     .cadre-t-flamme{--lueur:#f0792a}
.cadre-t-givre{--lueur:#7fdcf0}   .cadre-t-os{--lueur:#cdbfa0}       .cadre-t-ronce{--lueur:#6fae5a}
.cadre-t-sang{--lueur:#e2452f}

/* éclat (rareté 1..4) -> ombre portée sombre (relief sur le parchemin) + lueur colorée croissante */
.cadre-eclat-1{ filter:drop-shadow(0 1px .6px rgba(30,18,4,.5)) drop-shadow(0 0 1px var(--lueur)); }
.cadre-eclat-2{ filter:drop-shadow(0 1px .8px rgba(30,18,4,.5)) drop-shadow(0 0 2.5px var(--lueur)); }
.cadre-eclat-3{ filter:drop-shadow(0 1.2px 1px rgba(30,18,4,.5)) drop-shadow(0 0 4px var(--lueur)); }
.cadre-eclat-4{ filter:drop-shadow(0 1.2px 1px rgba(30,18,4,.55)) drop-shadow(0 0 3px var(--lueur)) drop-shadow(0 0 8px var(--lueur)); }

@keyframes cadreSpin{ to{ transform:rotate(360deg); } }
@keyframes cadreFlick{ 0%,100%{ opacity:.82; } 50%{ opacity:1; } }
@keyframes cadreTwinkle{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }
.cadre-spin{ animation:cadreSpin 16s linear infinite; transform-origin:60px 60px; }
.cadre-flick{ animation:cadreFlick 1.5s ease-in-out infinite; transform-origin:60px 60px; }
.cadre-twinkle{ animation:cadreTwinkle 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .cadre-spin,.cadre-flick,.cadre-twinkle{ animation:none; } }

/* Sélecteur de cadres (page /personnage/{id}/cadres) */
.cadres-page{ max-width:940px; margin:0 auto; padding:0 4px; }
.cadres-page h1{ margin:.2em 0; }
.cadres-intro{ color:#5a431f; max-width:60ch; }
.cadre-piste{ margin:20px 0; }
.cadre-piste h2{ font-size:18px; margin:.2em 0 .5em; border-bottom:1px solid rgba(120,90,30,.25); padding-bottom:4px; }
.cadre-piste h2 small{ font-weight:400; color:#7a6748; font-size:13px; }
.cadres-grille{ display:flex; flex-wrap:wrap; gap:12px; }
.cadre-tuile{ position:relative; display:flex; flex-direction:column; align-items:center; gap:7px; width:98px;
  padding:9px 4px 7px; border-radius:12px; border:2px solid transparent; cursor:pointer; text-align:center; }
.cadre-tuile input{ position:absolute; opacity:0; width:0; height:0; }
.cadre-tuile.choisi, .cadre-tuile:has(input:checked){ border-color:var(--or-fonce,#6b5526); background:rgba(120,90,30,.10); }
.cadre-tuile:hover{ background:rgba(120,90,30,.06); }
.cadre-nom{ font-size:11.5px; line-height:1.25; color:#3a2c16; font-weight:600; }
.cadre-tuile.verrouille{ opacity:.7; cursor:not-allowed; }
.cadre-tuile.verrouille:hover{ background:transparent; }
.cadre-tuile.verrouille .ava-cadre{ filter:grayscale(.75) opacity(.55); }
.cadre-tuile.verrouille .ava-glyphe{ background:#cdbfa0; }
.cadre-cond{ font-size:11px; color:#8a6a2a; font-weight:700; }
.cadres-actions{ position:sticky; bottom:0; background:linear-gradient(transparent,rgba(243,231,200,.9) 40%); padding:12px 0; }

/* Cadre sur le grand portrait de fiche (avatar circulaire, conteneur .pf-portrait non clippant) */
.pf-portrait{ overflow:visible; }
.pf-portrait .ava-cadre{ position:absolute; left:50%; top:50%; width:172%; height:172%; transform:translate(-50%,-50%); pointer-events:none; z-index:2; }