/* creator.css — le créateur de personnage (même langage papier / cuir que le reste). */
.creator-screen { background: radial-gradient(ellipse at 35% 50%, rgba(20, 10, 6, 0.15), rgba(20, 10, 6, 0.7)); pointer-events: auto; }
.creator {
  position: absolute; inset: 0; display: flex; gap: 28px; align-items: center; justify-content: center;
  padding: 24px; font-family: var(--pixel); word-spacing: 0.3em; color: var(--ink);
}
.cr-stage { width: 330px; padding: 18px 20px 20px; text-align: center; animation: cr-in 0.35s ease both; }
.cr-kicker {
  display: inline-block; padding: 2px 10px; border-radius: 6px; font-size: 0.75em;
  background: var(--gold); box-shadow: 0 2px 0 var(--gold-d);
}
.cr-title { margin: 8px 0 4px; font-size: 1.6em; font-weight: normal; }
.cr-podium { display: flex; align-items: center; justify-content: center; gap: 6px; }
.cr-view {
  width: 160px; height: 240px; image-rendering: pixelated;
  background: radial-gradient(ellipse at 50% 92%, rgba(232, 176, 72, 0.35), transparent 55%),
              linear-gradient(180deg, #f6ecd4 0%, #e4cfa2 100%);
  border-radius: 10px; box-shadow: inset 0 0 0 2px rgba(78, 39, 22, 0.25);
}
.cr-turn {
  width: 34px; height: 46px; border: none; border-radius: 8px; font-size: 1em; color: var(--ink);
  background: linear-gradient(180deg, #fff, var(--paper-2)); box-shadow: 0 0 0 2px var(--leather), 0 3px 0 2px var(--leather-d);
}
.cr-turn:active { transform: translateY(2px); }
.cr-anims { display: flex; gap: 6px; justify-content: center; margin: 12px 0 8px; }
.cr-anim {
  font: inherit; font-size: 0.72em; padding: 4px 8px; border: none; border-radius: 6px; color: var(--ink-soft);
  background: rgba(78, 39, 22, 0.08); box-shadow: inset 0 0 0 2px rgba(78, 39, 22, 0.18);
}
.cr-anim.on { color: var(--scr-ink); background: var(--scr); box-shadow: 0 0 0 2px var(--leather), 0 0 10px rgba(143, 255, 208, 0.35); }
.cr-id { display: flex; gap: 10px; align-items: center; text-align: left; margin: 6px 0 14px; }
.cr-id p { margin: 0; font-family: var(--pixel); font-size: 0.78em; color: var(--ink-soft); word-spacing: normal; line-height: 1.35; }
.cr-face {
  width: 56px; height: 56px; flex: none; image-rendering: pixelated; border-radius: 8px;
  background: #e8d6ae; box-shadow: 0 0 0 2px var(--leather), 0 3px 0 2px var(--leather-d);
}
.cr-actions { display: flex; gap: 10px; justify-content: center; }
.cr-panel {
  width: min(560px, 52vw); max-height: calc(100vh - 60px); overflow: auto; padding: 14px 18px;
  animation: cr-in 0.35s 0.08s ease both;
}
.cr-group + .cr-group { border-top: 2px dashed rgba(78, 39, 22, 0.18); margin-top: 8px; padding-top: 6px; }
.cr-group h3 { margin: 4px 0 6px; font-size: 0.95em; font-weight: normal; color: var(--leather); }
.cr-row { display: grid; grid-template-columns: 118px 1fr; align-items: center; gap: 8px; margin: 5px 0; }
.cr-label { font-size: 0.72em; color: var(--ink-soft); }
.cr-opts { display: flex; flex-wrap: wrap; gap: 5px; }
.cr-opt { border: none; cursor: pointer; font: inherit; transition: transform 0.08s ease; }
.cr-opt:hover { transform: translateY(-1px); }
.cr-opt.word {
  font-size: 0.7em; padding: 4px 8px; border-radius: 6px; color: var(--ink);
  background: rgba(255, 255, 255, 0.55); box-shadow: inset 0 0 0 2px rgba(78, 39, 22, 0.2);
}
.cr-opt.swatch {
  width: 22px; height: 22px; border-radius: 6px;
  background: linear-gradient(135deg, var(--c) 55%, var(--c2) 55%);
  box-shadow: inset 0 0 0 2px rgba(43, 29, 42, 0.55);
}
.cr-opt.word.on { background: var(--gold); box-shadow: 0 0 0 2px var(--leather), 0 2px 0 2px var(--leather-d); }
.cr-opt.swatch.on { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--leather); transform: scale(1.08); }
@keyframes cr-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) {
  .creator { flex-direction: column; overflow: auto; justify-content: flex-start; }
  .cr-panel { width: 100%; max-height: none; }
}

/* ---------- intégré au menu (scenes/title.js, écran « creator ») : même fond animé, panneau du menu ---------- */
.sm-panel.sm-creator { width: min(1060px, 96vw); height: min(660px, calc(100vh - 140px)); }
.sm-creator .sm-body { overflow: hidden; }
.creator.cr-embed { position: static; inset: auto; height: calc(100% - 6px); padding: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr);
  gap: 18px; align-items: stretch; word-spacing: 0.2em; }
.cr-embed .cr-stage { width: auto; padding: 14px 14px 16px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: radial-gradient(ellipse at 50% 30%, rgba(255, 243, 200, 0.9), rgba(232, 214, 174, 0.55)); box-shadow: inset 0 0 0 2px rgba(120, 85, 50, 0.22); }
.cr-embed .cr-hint { margin: 0 0 8px; font-size: 0.72em; color: var(--ink-soft); line-height: 1.4; }
.cr-embed .cr-pair { margin: 0 0 8px; font-size: 0.85em; }
.cr-embed .cr-view { width: 176px; height: 264px; }
.cr-embed .cr-id { margin: 4px 0 8px; align-self: stretch; }
.cr-embed .cr-namebox { align-self: stretch; margin: 0 0 10px; }
.cr-embed .cr-actions { margin-top: auto; align-self: stretch; }
.cr-embed .cr-actions .btn { flex: 1; font-family: var(--pixel); }
.cr-embed .cr-panel { width: auto; max-height: none; height: 100%; overflow-y: auto; padding: 4px 8px 8px 4px; background: none; box-shadow: none; }
.cr-embed .cr-group { padding: 4px 0 8px; }
.cr-embed .cr-row { grid-template-columns: 130px 1fr; margin: 7px 0; }
.cr-embed .cr-label { font-size: 0.76em; }
.cr-embed .cr-opt.swatch { width: 26px; height: 26px; }
.cr-embed .cr-opt.word { font-size: 0.76em; padding: 5px 10px; }
@media (max-width: 760px) {
  .creator.cr-embed { grid-template-columns: 1fr; overflow-y: auto; }
  .sm-creator .sm-body { overflow-y: auto; }
  .cr-embed .cr-panel { height: auto; overflow: visible; }
}
/* écrans peu hauts : aperçu plus petit, la colonne de gauche peut défiler */
.cr-embed .cr-stage { overflow-y: auto; min-height: 0; }
@media (max-height: 820px) {
  .cr-embed .cr-view { width: 128px; height: 192px; }
  .cr-embed .cr-id { margin: 2px 0 4px; }
  .cr-embed .cr-face { width: 44px; height: 44px; }
  .cr-embed .cr-anims { margin: 6px 0 4px; }
}

/* ---------- les options en boutons-bascules groupés (un seul bloc par option) ---------- */
.cr-embed .cr-group { padding: 0 0 4px; }
.cr-embed .cr-group h3 { margin: 2px 0 4px; font-size: 0.85em; }
.cr-embed .cr-row { margin: 4px 0; align-items: center; }
.cr-embed .cr-opts { gap: 0; flex-wrap: wrap; width: fit-content; max-width: 100%; border-radius: 9px; overflow: hidden;
  box-shadow: 0 0 0 2px var(--leather), 0 3px 0 2px var(--leather-d); background: var(--paper); }
.cr-embed .cr-opt.word { border-radius: 0; box-shadow: inset -1px 0 0 rgba(120, 85, 50, 0.25); background: transparent; padding: 6px 11px; font-size: 0.74em; }
.cr-embed .cr-opt.word:hover { background: #fff8e4; transform: none; }
.cr-embed .cr-opt.word.on { background: linear-gradient(180deg, #ffe07c, var(--gold)); box-shadow: inset -1px 0 0 rgba(120, 85, 50, 0.25), inset 0 -3px 0 rgba(120, 85, 50, 0.25); }
.cr-embed .cr-opts:has(.swatch) { padding: 3px; gap: 3px; }
.cr-embed .cr-opt.swatch { width: 24px; height: 24px; border-radius: 5px; }
.cr-embed .cr-opt.swatch.on { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--leather); transform: none; }
/* pas de marge sous la dernière ligne ; aperçu un peu plus petit quand la carte du compte est au-dessus */
.cr-embed .cr-group:last-child { padding-bottom: 0; }
.cr-embed .cr-group:last-child .cr-row:last-child { margin-bottom: 2px; }
@media (max-height: 820px) {
  .cr-embed .cr-row { margin: 2px 0; }
  .cr-embed .cr-group h3 { margin: 0 0 2px; }
  .cr-embed .cr-opt.word { padding: 5px 10px; }
  .cr-embed .cr-opt.swatch { width: 22px; height: 22px; }
}
/* le conteneur du créateur prend toute la hauteur du panneau (sinon les colonnes prennent la taille de leur contenu
   et un petit défilement apparaît) */
.sm-creator .sm-cr { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sm-creator .sm-cr > .creator.cr-embed { flex: 1; min-height: 0; height: auto; }

/* ---------- Personnaliser (menu, v8.57) : carte du compte en haut, aperçu à gauche, options dépliables à droite ---------- */
.sm-creator .sm-body { display: flex; flex-direction: column; gap: 12px; }
.cr-bar { flex: none; display: flex; align-items: center; gap: 14px; padding: 8px 14px 8px 8px; border-radius: 12px;
  background: var(--paper); box-shadow: 0 0 0 2px var(--leather), 0 4px 0 2px var(--leather-d); }
.cr-bar-pic { flex: none; width: 56px; height: 56px; border-radius: 10px; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #fff3c8, #e8c890); box-shadow: inset 0 0 0 2px rgba(120, 85, 50, 0.3); }
.cr-bar-face { width: 56px; height: 56px; image-rendering: pixelated; display: block; }
.cr-bar-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cr-bar-name { font-weight: normal; font-size: 1.35em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.cr-bar-txt small { font-size: 0.66em; color: var(--ink-soft); }
.cr-bar-btn { flex: none; font: inherit; font-size: 0.74em; padding: 7px 12px; border: none; border-radius: 8px; cursor: pointer; color: var(--ink);
  background: linear-gradient(180deg, #fff, var(--paper-2)); box-shadow: 0 0 0 2px var(--leather), 0 3px 0 2px var(--leather-d); }
.cr-bar-btn:is(:hover, :focus-visible) { outline: none; background: linear-gradient(180deg, #fff8e4, #f6e6bc); }
.cr-bar-btn:active { transform: translateY(2px); box-shadow: 0 0 0 2px var(--leather), 0 1px 0 2px var(--leather-d); }
.cr-bar-coins { flex: none; font-size: 0.85em; padding: 5px 11px; border-radius: 999px; color: #4a2c08;
  background: linear-gradient(180deg, #fff3c8, #f5d36a); box-shadow: inset 0 0 0 2px #cf9a22; }

.cr-embed .cr-stage { justify-content: center; }
.cr-embed .cr-view { width: 168px; height: 252px; }
.cr-accordion { display: flex; flex-direction: column; gap: 6px; }
.cr-acc { flex: none; border-radius: 10px; background: rgba(255, 255, 255, 0.55); box-shadow: inset 0 0 0 2px rgba(120, 85, 50, 0.2); }
.cr-acc.open { background: #fffaf0; box-shadow: 0 0 0 2px var(--leather), 0 3px 0 2px var(--leather-d); }
.cr-acc-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: none; background: none; cursor: pointer;
  font: inherit; color: var(--ink); text-align: left; border-radius: 10px; }
.cr-acc-head:is(:hover, :focus-visible) { outline: none; background: rgba(255, 224, 124, 0.25); }
.cr-acc-ico { flex: none; width: 1.5em; text-align: center; }
.cr-acc-head b { flex: 1; font-weight: normal; font-size: 0.9em; }
.cr-acc-now { display: flex; align-items: center; gap: 6px; font-size: 0.7em; color: var(--ink-soft); }
.cr-acc-sw { display: inline-block; width: 16px; height: 16px; border-radius: 4px; background: linear-gradient(135deg, var(--c) 55%, var(--c2) 55%);
  box-shadow: inset 0 0 0 2px rgba(43, 29, 42, 0.5); }
.cr-acc-chev { flex: none; font-size: 0.7em; color: var(--leather); transition: transform 0.15s ease; transform: rotate(-90deg); }
.cr-acc.open .cr-acc-chev { transform: none; }
.cr-acc-body { display: none; padding: 2px 12px 12px; }
.cr-acc.open .cr-acc-body { display: flex; flex-direction: column; gap: 8px; animation: cr-open 0.16s ease both; }
@keyframes cr-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.cr-accordion .cr-row { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0; }
.cr-accordion .cr-label:empty { display: none; }
.cr-accordion .cr-label { font-size: 0.68em; }
/* l'en-tête du panneau n'a pas besoin de la pastille du compte : la carte est juste dessous */
.sm-creator .sm-head-acc { visibility: hidden; }
.sm-creator .cr-embed .cr-view { width: 192px; height: 288px; }
@media (max-height: 820px) {
  .cr-bar { padding: 5px 12px 5px 6px; }
  .cr-bar-pic, .cr-bar-face { width: 44px; height: 44px; }
  .cr-bar-name { font-size: 1.1em; }
  .sm-creator .cr-embed .cr-view { width: 176px; height: 264px; }
  .cr-acc-head { padding: 7px 10px; }
}
@media (max-height: 700px) { .sm-creator .cr-embed .cr-view { width: 128px; height: 192px; } }