/* Cadres en bambou ficelé de rouge (d'après le design de Sarah).
   cadres.js ajoute un <span class="bambou"> dans chaque cadre ; trois niveaux de détail :
   riche (liens, pompon, cordes, plus utilisé depuis le cadre 3D des objets), moyen (panneaux : bambous + liens), fin (barre des vues). */
.encadre { position: relative; }
.cadre-bambou { position: absolute; inset: 0; z-index: 4; pointer-events: none; --e: 16px; --d: 20px; --l: 46px; }
.cadre-bambou.moyen { --e: 12px; --d: 15px; --l: 34px; }
.cadre-bambou.fin { --e: 6px; --d: 9px; --l: 16px; }
.cadre-bambou > i { position: absolute; display: block; filter: drop-shadow(0 3px 3px rgba(0,0,0,.45)); }
.cadre-bambou .b-h { left: calc(var(--d) * -1); right: calc(var(--d) * -1); height: var(--e); background: url("images/cadre/bambou-h.svg") repeat-x; background-size: auto 100%; }
.cadre-bambou .b-v { top: calc(var(--d) * -1); bottom: calc(var(--d) * -1); width: var(--e); background: url("images/cadre/bambou-v.svg") repeat-y; background-size: 100% auto; }
.cadre-bambou .haut { top: calc(var(--e) / -2); }
.cadre-bambou .bas { bottom: calc(var(--e) / -2); background-position: 57px 0; }
.cadre-bambou .g { left: calc(var(--e) / -2); background-position: 0 31px; }
.cadre-bambou .d { right: calc(var(--e) / -2); background-position: 0 83px; }
.cadre-bambou .ligature { width: var(--l); height: var(--l); background: url("images/cadre/lien.svg") center / contain no-repeat; }
.cadre-bambou .ligature.hg { left: calc(var(--l) / -2); top: calc(var(--l) / -2); }
.cadre-bambou .ligature.hd { right: calc(var(--l) / -2); top: calc(var(--l) / -2); transform: scaleX(-1); }
.cadre-bambou .ligature.bg { left: calc(var(--l) / -2); bottom: calc(var(--l) / -2); transform: scaleY(-1); }
.cadre-bambou .ligature.bd { right: calc(var(--l) / -2); bottom: calc(var(--l) / -2); transform: scale(-1); }
.cadre-bambou .corde { top: 1px; height: 30px; background: url("images/cadre/corde.svg") 0 0 / 100% 100% no-repeat; filter: none; }
.cadre-bambou .corde.g { left: 6px; width: 30%; }
.cadre-bambou .corde.d { right: 6px; width: 24%; height: 22px; }
.cadre-bambou .pompon { left: 7%; top: 2px; width: 22px; height: 96px; background: url("images/cadre/pompon.svg") top center / contain no-repeat;
  transform-origin: 50% 0; animation: pompon-balance 5.5s ease-in-out infinite; }
.cadre-bambou .pompon.d { left: auto; right: 16%; top: 1px; height: 78px; width: 18px; animation-duration: 6.5s; animation-delay: -2s; }
@keyframes pompon-balance { 0%, 100% { transform: rotate(2.5deg); } 50% { transform: rotate(-2.5deg); } }
@media (prefers-reduced-motion: reduce) { .cadre-bambou .pompon { animation: none; } }

/* Objets 3D : cadre en bambou 3D dessiné dans la scène (cadre3d.js) ; le filet doré ne reste qu'en plein écran.
   Les boutons et indications sont rentrés à l'intérieur du cadre. */
.o3d .o3d-socle { border-color: transparent; background: radial-gradient(ellipse 70% 55% at 50% 42%, #2a4433, #14241a 60%, #0b140f) center / 91% 91% no-repeat; }
.o3d .o3d-socle .o3d-stats { top: 11%; left: 11%; right: 20%; }
.o3d .o3d-socle .o3d-agrandir { top: 10%; right: 10%; }
.o3d .o3d-socle .o3d-vues { bottom: 9.5%; }
.o3d .o3d-socle .o3d-glissiere { right: 10%; top: 22%; bottom: 22%; }
.o3d-socle .o3d-cadre-seul { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; cursor: default; }
.o3d-modale .o3d-socle { border-color: var(--or-doux); background: radial-gradient(ellipse 70% 55% at 50% 42%, #2a4433, #14241a 60%, #0b140f); }

/* Panneaux du personnage : bambou plus discret, sans les coins dorés */
.inv-panneau.encadre::before, .inv-panneau.encadre::after { display: none; }
.inventaire > .encadre { border-color: rgba(209,170,94,.12); }
.inventaire:has(> .encadre) { gap: 30px; padding: 12px; }

@media (max-width: 767px) {
  .cadre-bambou { --e: 9px; --d: 10px; --l: 24px; }
  .cadre-bambou.moyen { --e: 7px; --d: 8px; --l: 20px; }
  .cadre-bambou .pompon { height: 70px; width: 16px; }
  .cadre-bambou .pompon.d { display: none; }
  /* petites cartes : boutons resserrés pour rester entre les bambous, agrandir sous le pompon de droite */
  .o3d .o3d-socle .o3d-vues button { padding: 6px 6px; letter-spacing: .06em; font-size: .5rem; }
  .o3d .o3d-socle .o3d-agrandir { top: 25%; right: 9%; width: 30px; height: 30px; }
  .o3d .o3d-socle .o3d-glissiere { top: 40%; bottom: 22%; right: 9%; }
}