/* ==========================================================================
   CORNER — character.css — le Corner (personnage + espace) et le SAS.
   ========================================================================== */

.scene-panel{
  position: relative; margin: var(--sp-4) -2px var(--sp-1); border-radius: var(--r-lg); overflow: hidden;
  background: radial-gradient(ellipse 90% 70% at 50% 30%, var(--ember-dim), transparent 72%), var(--surface);
}
/* la plateforme circulaire lumineuse sous le personnage (§4/§14 référence) */
.scene-svg-wrap{ position: relative; }
.scene-svg-wrap::after{
  content: ""; position: absolute; left: 50%; bottom: 6%; width: 58%; height: 14px;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse, rgba(139,92,246,0.55), rgba(139,92,246,0.12) 55%, transparent 78%);
  filter: blur(1px); pointer-events: none;
}
/* Aperçu discret sur la Home (§10 brief Phase B/C) — le même Corner, en
   plus compact, qui ouvre l'espace Personnage complet au clic. */
.scene-panel.compact{ cursor: pointer; max-height: 190px; }
.scene-panel.compact .scene-svg-wrap{ margin-top: -18px; }
.scene-panel.compact:focus-visible{ outline: 2px solid var(--paper); outline-offset: -2px; }
.scene-chev{ color: var(--faint); }
.scene-chev svg{ width: 15px; height: 15px; }
.scene-top{ display: flex; justify-content: space-between; align-items: flex-start; padding: var(--sp-5) var(--sp-5) 0; }
.scene-lvl{ font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.scene-lvl b{ color: var(--ember); font-weight: 500; }
.scene-line{ font-family: var(--font-display); font-size: 15px; font-style: italic; color: var(--paper-dim); text-align: right; max-width: 55%; }
.scene-svg-wrap{ padding: 0 2px; }
.scene-svg{ width: 100%; height: auto; display: block; }
.xp-bar-wrap{ padding: 0 var(--sp-5) var(--sp-5); }
.xp-row{ display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); margin-bottom: 7px; }

.room-object{ opacity: 0; transform: scale(.86); transform-origin: center bottom; transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.room-object.unlocked{ opacity: 1; transform: scale(1); }

.cc-wrap{ transform-origin: center bottom; }
.cc-breathe{ animation: cc-breathe 4.6s ease-in-out infinite; }
@keyframes cc-breathe{ 0%,100%{ transform: translateY(0) scale(1); } 50%{ transform: translateY(-2.5px) scale(1.012); } }
.cc-eye{ animation: cc-blink 6.5s ease-in-out infinite; transform-origin: center; }
.cc-eye:nth-child(1){ animation-delay: .1s; }
@keyframes cc-blink{ 0%, 92%, 100%{ transform: scaleY(1); } 95%{ transform: scaleY(.12); } }
.cc-core{ animation: cc-pulse 3.2s ease-in-out infinite; transform-origin: center; }
@keyframes cc-pulse{ 0%,100%{ opacity: .78; } 50%{ opacity: 1; } }

/* ---------- SAS : scène d'entrée, brève, non-bloquante ---------- */
#sas{
  position: fixed; inset: 0; z-index: 200; background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity var(--dur-slow) var(--ease);
}
#sas.sas-in{ opacity: 1; }
#sas.sas-out{ opacity: 0; }
.sas-inner{ display: flex; flex-direction: column; align-items: center; gap: var(--sp-6); transform: scale(.92); transition: transform 620ms var(--ease); }
#sas.sas-in .sas-inner{ transform: scale(1); }
.sas-scene{ width: 140px; height: 160px; }
.sas-scene svg{ width: 100%; height: 100%; }
.sas-line{ font-family: var(--font-display); font-size: 19px; font-style: italic; color: var(--paper-dim); text-align: center; letter-spacing: .01em; }

/* ---------- révélation à l'onboarding (le moment WOW) ---------- */
.ob-reveal svg{ animation: ob-reveal-in 900ms var(--ease) both; }
@keyframes ob-reveal-in{ from{ opacity: 0; transform: scale(.7) translateY(10px); } to{ opacity: 1; transform: none; } }