/* Fenêtres de l'accueil (ui/Dialog.js) : réglages (ui/SettingsPanel.js) et choix de difficulté de l'IA (ui/DifficultyPicker.js).
   Même matière que les autres panneaux (panels.css) : pierre bleu nuit, bordure or, rivets, serif doré. */
.dlg-overlay {
  position: absolute; inset: 0; z-index: 30; display: grid; place-items: center;
  padding: calc(14px + var(--safe-top)) 14px calc(14px + var(--safe-bottom));
  background: rgba(4, 10, 24, 0.7); backdrop-filter: blur(3px);
  animation: dlg-fade 0.18s ease-out;
}
.dlg-overlay.leaving { opacity: 0; transition: opacity 0.16s ease-in; pointer-events: none; }
@keyframes dlg-fade { from { opacity: 0; } }
@keyframes dlg-pop { from { opacity: 0; transform: translateY(14px) scale(0.96); } }

.dlg-card {
  position: relative; width: min(100%, 360px); max-height: 100%; overflow-y: auto; overscroll-behavior: contain; outline: none;
  display: grid; gap: 10px; padding: 14px 14px 12px; color: var(--pn-cream);
  border: 3px solid var(--pn-edge); border-radius: 18px;
  background:
    radial-gradient(circle at 9px 9px, #ffe08a 0 2px, #7a5a20 3px, transparent 4px) top left / 100% 100% no-repeat,
    radial-gradient(circle at calc(100% - 9px) 9px, #ffe08a 0 2px, #7a5a20 3px, transparent 4px) top left / 100% 100% no-repeat,
    radial-gradient(circle at 9px calc(100% - 9px), #ffe08a 0 2px, #7a5a20 3px, transparent 4px) top left / 100% 100% no-repeat,
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #ffe08a 0 2px, #7a5a20 3px, transparent 4px) top left / 100% 100% no-repeat,
    var(--pn-stone);
  box-shadow: inset 0 0 0 1px rgba(255, 224, 160, 0.3), inset 0 0 30px rgba(0, 0, 0, 0.35), 0 14px 40px rgba(0, 0, 0, 0.6);
  font: 600 14px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  animation: dlg-pop 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px; }
.dlg-head h2 { margin: 0; font: 800 24px/1.1 var(--pn-serif); letter-spacing: 0.06em; color: var(--pn-gold); text-shadow: 0 2px 0 #4a3000, 0 0 14px rgba(255, 190, 60, 0.45); }
.dlg-x {
  flex: none; width: 34px; height: 34px; border: 2px solid var(--pn-edge); border-radius: 50%; cursor: pointer;
  font: 700 22px/1 system-ui, sans-serif; color: var(--pn-cream); background: rgba(0, 0, 0, 0.35); touch-action: manipulation;
}
.dlg-x:hover { border-color: var(--pn-gold); color: var(--pn-gold); }
.dlg-x:focus-visible, .dlg-btn:focus-visible, .set-switch:focus-visible, .diff-card:focus-visible, .set-slider input:focus-visible { outline: 2px solid var(--pn-gold); outline-offset: 2px; }
.dlg-body { display: grid; gap: 12px; }
.dlg-lead { margin: 0; color: var(--pn-tan); font-size: 13px; }

/* bouton de fenêtre : planche de bois à cadre doré */
.dlg-btn {
  min-height: 44px; padding: 0 16px; border: 3px solid #9a7a45; border-radius: 12px; cursor: pointer; touch-action: manipulation;
  font: 800 15px/1 var(--pn-serif); color: var(--pn-cream); text-shadow: var(--pn-text-shadow);
  background: var(--pn-wood); box-shadow: inset 0 1px 0 rgba(255, 224, 160, 0.4), 0 3px 8px rgba(0, 0, 0, 0.5);
  transition: transform 0.1s, filter 0.14s;
}
.dlg-btn:active { transform: scale(0.97); }
@media (hover: hover) { .dlg-btn:hover { filter: brightness(1.14) drop-shadow(0 0 6px rgba(255, 200, 70, 0.55)); } }
.dlg-btn.quiet { background: none; border-color: rgba(154, 122, 69, 0.55); box-shadow: none; color: var(--pn-tan); font-weight: 700; }

/* ---------------------------------------------------------------- réglages */
.set-section { display: grid; gap: 7px; }
.set-section h3 { margin: 2px 2px 0; font: 800 12px/1 var(--pn-serif); letter-spacing: 0.14em; text-transform: uppercase; color: var(--pn-tan); }
.set-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; padding: 9px 11px;
  border: 1px solid rgba(154, 122, 69, 0.55); border-radius: 12px; background: rgba(0, 0, 0, 0.28);
}
.set-text b { display: block; font-size: 14.5px; color: var(--pn-cream); }
.set-text small { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 600; color: #b9ad8e; }
.set-switch {
  position: relative; flex: none; width: 52px; height: 30px; padding: 0; border: 2px solid #5a4a2c; border-radius: 99px; cursor: pointer; touch-action: manipulation;
  background: #1a1f2b; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.7); transition: background 0.18s, border-color 0.18s;
}
.set-switch i { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d6d2c4, #8d8671); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); transition: transform 0.18s cubic-bezier(0.3, 1.5, 0.5, 1), background 0.18s; }
.set-switch[aria-checked="true"] { background: linear-gradient(#3fb43c, #17751f); border-color: #d9b25a; }
.set-switch[aria-checked="true"] i { transform: translateX(22px); background: radial-gradient(circle at 35% 30%, #fff4cf, #ffd25e); }
.has-slider { grid-template-areas: "text sw" "slider slider"; }
.has-slider .set-text { grid-area: text; }
.has-slider .set-switch { grid-area: sw; }
.set-slider { grid-area: slider; display: flex; align-items: center; gap: 9px; transition: opacity 0.18s; }
.set-slider svg { flex: none; width: 18px; height: 18px; color: var(--pn-gold); }
.set-slider output { flex: none; width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--pn-tan); }
.has-slider.off .set-slider { opacity: 0.4; }
.set-slider input {
  flex: 1; min-width: 0; height: 28px; margin: 0; background: transparent; cursor: pointer; touch-action: pan-y; -webkit-appearance: none; appearance: none;
  --fill: 50%;
}
.set-slider input::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; border: 1px solid #5a4a2c; background: linear-gradient(90deg, #ffd25e var(--fill), #1a1f2b var(--fill)); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7); }
.set-slider input::-moz-range-track { height: 8px; border-radius: 99px; border: 1px solid #5a4a2c; background: #1a1f2b; }
.set-slider input::-moz-range-progress { height: 8px; border-radius: 99px; background: #ffd25e; }
.set-slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; border: 2px solid #7a5a20; background: radial-gradient(circle at 35% 30%, #fff4cf, #e0a92f); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); }
.set-slider input::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #7a5a20; background: radial-gradient(circle at 35% 30%, #fff4cf, #e0a92f); }
.set-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.set-credit { margin: 0; text-align: center; font-size: 11px; color: #8f8670; }

/* ---------------------------------------------------------------- difficulté de l'IA */
.diff-list { display: grid; gap: 8px; }
.diff-card {
  --c: #6fd06f;
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; text-align: left; cursor: pointer; touch-action: manipulation; color: inherit; font: inherit;
  border: 3px solid #9a7a45; border-radius: 14px; background: var(--pn-wood); box-shadow: inset 0 1px 0 rgba(255, 224, 160, 0.35), 0 3px 8px rgba(0, 0, 0, 0.5);
  transition: transform 0.1s, filter 0.14s, border-color 0.14s;
}
.diff-card.lvl-2 { --c: #ffd25e; }
.diff-card.lvl-3 { --c: #ff9a3d; }
.diff-card.lvl-4 { --c: #ff5a4d; }
.diff-card:active { transform: scale(0.98); }
@media (hover: hover) { .diff-card:hover { filter: brightness(1.12); border-color: var(--c); } }
.diff-card.last { border-color: var(--c); }
.diff-card.picked { border-color: #fff; filter: brightness(1.25); transform: scale(1.02); }
.diff-card:disabled:not(.picked) { opacity: 0.55; }
.diff-pips { flex: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; width: 36px; }
.diff-pips i { aspect-ratio: 1; border-radius: 50%; background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 1px 2px #000; }
.diff-pips i.on { background: radial-gradient(circle at 35% 30%, #fff, var(--c) 60%); box-shadow: 0 0 6px var(--c); }
.diff-text b { display: inline; font: 800 18px/1.1 var(--pn-serif); color: var(--pn-cream); text-shadow: var(--pn-text-shadow); }
.diff-text em { margin-left: 8px; font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--c); text-shadow: 0 1px 2px #000; }
.diff-text small { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; line-height: 1.3; color: #ecdfba; text-shadow: 0 1px 2px #000; }

/* ---------------------------------------------------------------- décor de l'accueil désactivé / entrée */
.home.still .scene-in > :not(.bg) { display: none; }
.home.still .scene-in { animation: none; }

@media (max-height: 640px) {
  .dlg-card { gap: 8px; padding: 10px 12px; }
  .set-row { padding: 6px 10px; }
  .set-text small { display: none; }
  .diff-card { padding: 7px 10px; }
  .diff-text small { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .dlg-overlay, .dlg-card { animation: none; }
  .set-switch, .set-switch i { transition: none; }
}

/* ---------------------------------------------------------------- voile « chargement » (ouverture du compte / de la boutique) */
.home-busy {
  position: absolute; inset: 0; z-index: 25; display: grid; place-content: center; justify-items: center; gap: 12px;
  background: rgba(4, 10, 24, 0.55); backdrop-filter: blur(2px); animation: dlg-fade 0.2s ease-out;
  color: var(--pn-gold); font: 800 15px/1.2 var(--pn-serif); letter-spacing: 0.04em; text-shadow: 0 2px 0 #4a3000, 0 0 10px rgba(0, 0, 0, 0.8);
}
.busy-spin { width: 38px; height: 38px; border-radius: 50%; border: 4px solid rgba(255, 224, 160, 0.25); border-top-color: var(--pn-gold); animation: spin 0.8s linear infinite; }

.set-actions { grid-template-columns: 1fr 1fr; }
.set-actions .quiet { grid-column: 1 / -1; }
.dlg-btn.danger { border-color: #b8504a; color: #ffb8b0; }

/* confirmation (ui/Confirm.js) */
.dlg-confirm { width: min(100%, 330px); text-align: center; }
.dlg-confirm .dlg-head h2 { font-size: 22px; }
.dlg-confirm-text { font-size: 14px; color: var(--pn-cream); }
.confirm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dlg-btn.primary { border-color: #d9b25a; background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(#3fb43c, #17751f); color: #fff; text-shadow: 0 1px 0 #0d3a14, 0 0 3px #0d3a14; }

/* 2026-10-15 : boutons de fenêtre PLATS (plus de planche de bois) — même style que les amis / Mon décor : pastille de verre, vert pour l'action, rouge pour le danger */
.dlg-btn {
  border: 1px solid rgba(255, 224, 160, 0.2); border-radius: 99px; background: rgba(255, 255, 255, 0.07); box-shadow: none; text-shadow: none; color: var(--pn-cream);
}
@media (hover: hover) { .dlg-btn:hover { filter: brightness(1.18); } }
.dlg-btn.quiet { background: none; border-color: rgba(255, 224, 160, 0.16); color: var(--pn-tan); }
.dlg-btn.danger { border-color: rgba(255, 120, 110, 0.6); background: rgba(255, 90, 80, 0.12); color: #ff9d94; }
.dlg-btn.primary { border-color: rgba(160, 255, 170, 0.45); background: linear-gradient(#4cc950, #1f8a2a); color: #fff; text-shadow: 0 1px 2px rgba(0, 40, 10, 0.7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 6px rgba(0, 0, 0, 0.4); }
.dlg-btn.primary.danger { border-color: rgba(255, 150, 140, 0.55); background: linear-gradient(#e0574d, #a8261d); color: #fff; }

/* ---- menu déroulant du profil (ui/ProfileMenu.js) : sous la carte de profil de l'accueil */
.pm {
  position: absolute; z-index: 26; min-width: 214px; padding: 6px; display: grid; gap: 2px; transform-origin: top left; animation: pm-in 0.14s ease-out;
  border: 1.5px solid rgba(201, 164, 90, 0.8); border-radius: 16px; background: linear-gradient(#101a30, #070b17); box-shadow: inset 0 0 0 1px rgba(255, 224, 160, 0.1), 0 14px 32px rgba(0, 0, 0, 0.65);
}
.pm.leaving { opacity: 0; transition: opacity 0.12s ease-in; pointer-events: none; }
@keyframes pm-in { from { opacity: 0; transform: scale(0.94) translateY(-4px); } }
.pm-item {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 0 14px 0 12px; cursor: pointer; touch-action: manipulation; text-align: left; color: var(--pn-cream);
  font: 800 15px/1.15 var(--pn-serif); border: 0; border-radius: 11px; background: none;
}
.pm-item svg { flex: none; width: 20px; height: 20px; color: var(--pn-gold); }
.pm-item small { display: block; margin-top: 2px; font: 600 11.5px/1.2 system-ui, sans-serif; color: var(--pn-tan); }
.pm-item:active, .pm-item:focus-visible { outline: none; background: rgba(255, 255, 255, 0.1); }
@media (hover: hover) { .pm-item:hover { background: rgba(255, 255, 255, 0.07); } }
.pm-item.danger, .pm-item.danger svg { color: #ff8a80; }
.pm-item + .pm-item.danger { margin-top: 2px; border-top: 1px solid rgba(255, 224, 160, 0.12); border-radius: 0 0 11px 11px; }
@media (prefers-reduced-motion: reduce) { .pm { animation: none; } }