/* MoonTik — cadre commun des éditeurs d'overlay (Battle, personnalisation, Éditer générique).
   Palette nuit-violette / lune-bleu-lilas, distincte du thème neutre d'origine. */
.mt-ed,
.mtbe-ed,
.ov-wizard-overlay.is-perso {
  --mted-bg: #0a0918;
  --mted-stage: radial-gradient(ellipse at 58% 36%, #2a2154 0%, #12102a 42%, #0a0918 72%);
  --mted-panel: #14122a;
  --mted-panel-2: #1b1736;
  --mted-border: rgba(167, 139, 250, 0.28);
  --mted-border-soft: rgba(167, 139, 250, 0.16);
  --mted-accent: #a78bfa;
  --mted-accent-2: #38bdf8;
  --mted-grad: linear-gradient(135deg, #c4b5fd 0%, #38bdf8 100%);
  --mted-text: #f3f0ff;
  --mted-muted: #b4aee0;
  --mted-ink: #0b0a18;
}

/* —— Battle editor: même structure, palette MoonTik —— */
.mtbe-ed {
  background: var(--mted-stage) !important;
  color: var(--mted-text);
}
.mtbe-top { color: var(--mted-text); }
.mtbe-back {
  background: var(--mted-panel-2) !important;
  border-color: var(--mted-border) !important;
  color: var(--mted-text) !important;
}
.mtbe-back:hover { border-color: var(--mted-accent) !important; box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.25); }
.mtbe-opac {
  background: var(--mted-panel-2) !important;
  border-color: var(--mted-border) !important;
  color: var(--mted-muted) !important;
}
.mtbe-opac input { accent-color: var(--mted-accent) !important; }
.mtbe-frame {
  border-color: var(--mted-border) !important;
  box-shadow: 0 16px 40px rgba(8, 6, 24, 0.55), 0 0 0 1px var(--mted-border-soft);
}
.mtbe-bar {
  background: var(--mted-panel) !important;
  border-color: var(--mted-border) !important;
  box-shadow: 0 14px 36px rgba(8, 6, 24, 0.55), 0 0 24px rgba(56, 189, 248, 0.08);
}
.mtbe-bar button { color: var(--mted-text) !important; }
.mtbe-bar button:hover { background: rgba(167, 139, 250, 0.14) !important; }
.mtbe-bar button.primary {
  background: var(--mted-grad) !important;
  color: var(--mted-ink) !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.28);
}
.mtbe-side {
  background: var(--mted-panel) !important;
  border-left-color: var(--mted-border) !important;
  color: var(--mted-text);
}
.mtbe-side-h { border-bottom-color: var(--mted-border-soft) !important; }
.mtbe-side-h svg { color: var(--mted-accent) !important; }
.mtbe-box {
  background: var(--mted-panel-2) !important;
  border-color: var(--mted-border) !important;
  border-radius: 16px !important;
}
.mtbe-box h4 { border-bottom-color: var(--mted-border-soft) !important; color: var(--mted-text) !important; }
.mtbe-box h4 span { color: var(--mted-accent) !important; filter: none; }
.mtbe-seg { background: #100e22 !important; border-color: var(--mted-border-soft) !important; }
.mtbe-seg button { color: var(--mted-muted) !important; }
.mtbe-seg button.on {
  background: var(--mted-grad) !important;
  color: var(--mted-ink) !important;
}
.mtbe-skins button { background: #100e22 !important; border-color: var(--mted-border) !important; color: var(--mted-muted) !important; }
.mtbe-skins button.on {
  background: var(--mted-grad) !important;
  color: var(--mted-ink) !important;
  border-color: transparent !important;
}
.mtbe-sel, .mtbe-font, .mtbe-num input {
  background: #100e22 !important;
  color: var(--mted-text) !important;
  border-color: var(--mted-border) !important;
}
.mtbe-sw { background: #3b3560 !important; }
.mtbe-sw.on { background: var(--mted-grad) !important; }
.mtbe-sw.on i { background: var(--mted-ink) !important; }
.mtbe-acc { border-color: var(--mted-border) !important; }
.mtbe-sl input[type=range] { accent-color: var(--mted-accent) !important; }
.mtbe-note { background: #100e22 !important; border-color: var(--mted-border-soft) !important; color: var(--mted-muted) !important; }

/* —— Wizard perso / Éditer : même coquille plein écran —— */
.ov-wizard-overlay.is-perso {
  background: rgba(6, 5, 18, 0.88);
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
}
.ov-wizard-overlay.is-perso .ov-wizard {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  border-radius: 0 !important;
  border: 0 !important;
  background: var(--mted-stage);
  box-shadow: none;
  color: var(--mted-text);
}
.ov-wizard-overlay.is-perso .ov-wiz-bubble,
.ov-wizard-overlay.is-perso .ov-wiz-chips,
.ov-wizard-overlay.is-perso .ov-wiz-body,
.ov-wizard-overlay.is-perso #ovWizSearch,
.ov-wizard-overlay.is-perso .ov-wiz-perso > h3,
.ov-wizard-overlay.is-perso .rule-shortcut-actions {
  display: none !important;
}
.ov-wizard-overlay.is-perso .ov-wiz-perso {
  flex: 1;
  min-height: 0;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 380px;
  padding: 0 !important;
  overflow: hidden;
  background: transparent;
}
.ov-wizard-overlay.is-perso .ov-perso-layout,
.ov-wizard-overlay.is-perso .ov-perso-layout.is-score {
  display: contents !important;
}
.ov-wizard-overlay.is-perso .mt-ed-stage {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  position: relative;
}
.ov-wizard-overlay.is-perso .mt-ed-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  flex: none;
}
.ov-wizard-overlay.is-perso .mt-ed-back {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid var(--mted-border);
  background: var(--mted-panel-2);
  color: var(--mted-text);
  font-weight: 700;
  cursor: pointer;
  max-width: min(62%, 460px);
}
.ov-wizard-overlay.is-perso .mt-ed-back:hover { box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.3); }
.ov-wizard-overlay.is-perso .mt-ed-back span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ov-wizard-overlay.is-perso .mt-ed-opac {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 12px;
  border: 1px solid var(--mted-border);
  background: var(--mted-panel-2);
  color: var(--mted-muted);
  font-size: 12px;
}
.ov-wizard-overlay.is-perso .mt-ed-opac svg { width: 16px; height: 16px; color: var(--mted-accent); }
.ov-wizard-overlay.is-perso .mt-ed-opac input { width: 110px; accent-color: var(--mted-accent); }
.ov-wizard-overlay.is-perso .mt-ed-canvas {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 12px 20px 88px;
  min-height: 0;
}
.ov-wizard-overlay.is-perso .mt-ed-frame {
  width: min(92%, 760px);
  aspect-ratio: 16 / 7;
  max-height: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--mted-border);
  position: relative;
  background-color: #141320;
  background-image:
    linear-gradient(45deg, #1c1833 25%, transparent 25%),
    linear-gradient(-45deg, #1c1833 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1c1833 75%),
    linear-gradient(-45deg, transparent 75%, #1c1833 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  box-shadow: 0 16px 40px rgba(8, 6, 24, 0.55);
}
.ov-wizard-overlay.is-perso .mt-ed-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(10, 8, 28, calc((100 - var(--mted-bg-op, 70)) / 100));
}
.ov-wizard-overlay.is-perso #ovPersoLivePreview,
.ov-wizard-overlay.is-perso .ov-perso-live,
.ov-wizard-overlay.is-perso .ov-perso-layout .ov-perso-live,
.ov-wizard-overlay.is-perso .ov-perso-layout.is-score .ov-perso-live {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  display: grid !important;
  place-items: center;
  z-index: 1;
}
.ov-wizard-overlay.is-perso .ov-score-skin-bar {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  background: rgba(20, 18, 42, 0.86);
  border: 1px solid var(--mted-border);
  border-radius: 12px;
  padding: 4px;
}
.ov-wizard-overlay.is-perso .mt-ed-bar,
.ov-wizard-overlay.is-perso .ov-flow-bar {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--mted-border);
  background: var(--mted-panel);
  box-shadow: 0 14px 36px rgba(8, 6, 24, 0.55), 0 0 24px rgba(56, 189, 248, 0.08);
  width: auto;
}
.ov-wizard-overlay.is-perso .mt-ed-bar button,
.ov-wizard-overlay.is-perso .ov-flow-bar button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--mted-text);
  font-weight: 700;
  cursor: pointer;
}
.ov-wizard-overlay.is-perso .mt-ed-bar button:hover,
.ov-wizard-overlay.is-perso .ov-flow-bar button:hover {
  background: rgba(167, 139, 250, 0.14);
}
.ov-wizard-overlay.is-perso .mt-ed-bar button.primary,
.ov-wizard-overlay.is-perso .ov-flow-bar .btn-primary,
.ov-wizard-overlay.is-perso #btnOvPersoSaveBar {
  background: var(--mted-grad) !important;
  color: var(--mted-ink) !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.28);
}
.ov-wizard-overlay.is-perso .ov-perso-fields,
.ov-wizard-overlay.is-perso .ov-perso-layout.is-score .ov-perso-fields,
.ov-wizard-overlay.is-perso .mt-ed-side {
  width: 380px !important;
  min-width: 0;
  background: var(--mted-panel) !important;
  border-left: 1px solid var(--mted-border) !important;
  overflow-y: auto;
  padding: 0 0 24px !important;
  color: var(--mted-text);
}
.ov-wizard-overlay.is-perso .mt-ed-side-h,
.ov-wizard-overlay.is-perso .ov-cfg-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  margin: 0;
  border-bottom: 1px solid var(--mted-border-soft);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mted-text);
}
.ov-wizard-overlay.is-perso .ov-cfg-head::before { display: none; }
.ov-wizard-overlay.is-perso .mt-ed-side-b,
.ov-wizard-overlay.is-perso .ov-perso-fields > *:not(.ov-cfg-head):not(.mt-ed-side-h) {
  /* fields keep their padding via a wrapper */
}
.ov-wizard-overlay.is-perso .mt-ed-side-b {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ov-wizard-overlay.is-perso .ov-perso-fields .field,
.ov-wizard-overlay.is-perso .ov-score-section,
.ov-wizard-overlay.is-perso .ov-perso-fields details,
.ov-wizard-overlay.is-perso #ovGenericFields {
  background: var(--mted-panel-2);
  border: 1px solid var(--mted-border);
  border-radius: 16px;
  padding: 12px 14px;
}
.ov-wizard-overlay.is-perso .ov-perso-fields label,
.ov-wizard-overlay.is-perso .ov-perso-fields .field > label { color: var(--mted-text); }
.ov-wizard-overlay.is-perso .ov-perso-fields .input,
.ov-wizard-overlay.is-perso .ov-perso-fields .select,
.ov-wizard-overlay.is-perso .ov-perso-fields textarea,
.ov-wizard-overlay.is-perso .ov-perso-fields input[type="number"],
.ov-wizard-overlay.is-perso .ov-perso-fields input[type="text"] {
  background: #100e22;
  color: var(--mted-text);
  border-color: var(--mted-border);
}
.ov-wizard-overlay.is-perso .ov-flow { display: none !important; } /* le canvas reste un aperçu centré, sans nœuds */

.ov-gen-prev {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 24px;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  max-width: 90%;
}
.ov-gen-prev .ov-gen-title { font-weight: 800; letter-spacing: 0.02em; }
.ov-gen-iframe { width: 100%; height: 100%; border: 0; background: transparent; pointer-events: none; }

@media (max-width: 900px) {
  .ov-wizard-overlay.is-perso .ov-wiz-perso {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(220px, 1fr) minmax(240px, 45vh);
  }
  .ov-wizard-overlay.is-perso .ov-perso-fields,
  .ov-wizard-overlay.is-perso .mt-ed-side { width: auto !important; border-left: 0 !important; border-top: 1px solid var(--mted-border); }
}


/* t70 — Carte membre : le canevas remplit la hauteur, plus de bulle 16/7 trop basse */
.ov-wizard-overlay.is-perso .ov-perso-layout.is-carte-flow + .ov-perso-fields,
.ov-wizard-overlay.is-perso:has(.is-carte-flow) .ov-wiz-perso,
.ov-wizard-overlay.is-perso:has(#cmfEd) .ov-wiz-perso {
  grid-template-columns: minmax(0, 1fr) 340px;
}
.ov-wizard-overlay.is-perso:has(#cmfEd) .mt-ed-canvas {
  padding: 8px 16px 96px;
  align-items: stretch;
  justify-items: stretch;
  display: flex;
  min-height: 0;
}
.ov-wizard-overlay.is-perso:has(#cmfEd) .mt-ed-frame,
.ov-wizard-overlay.is-perso:has(#cmfEd) #ovEdFrame {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 640px;
  aspect-ratio: auto !important;
  max-height: none !important;
  overflow: hidden;
}
.ov-wizard-overlay.is-perso:has(#cmfEd) #ovPersoLivePreview,
.ov-wizard-overlay.is-perso:has(#cmfEd) .ov-perso-live {
  display: block !important;
  place-items: unset;
  overflow: hidden;
}
.ov-wizard-overlay.is-perso:has(#cmfEd) .ov-score-skin-bar,
.ov-wizard-overlay.is-perso:has(#cmfEd) .ov-des-bar {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}


/* Dialogue quitter l'éditeur d'overlay (brouillon / modifications non enregistrées) */
.ov-leave-overlay { z-index: 80; display: grid; place-items: center; background: rgba(8,6,20,.62); }
.ov-leave-overlay[hidden] { display: none !important; }
.ov-leave-card { width: min(440px, 92vw); padding: 22px 24px 18px; }
.ov-leave-card h3 { margin: 0 0 8px; font-size: 18px; }
.ov-leave-card p { margin: 0 0 16px; color: var(--muted, #a1a1aa); line-height: 1.45; }
.ov-leave-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }