/* ============================================================
   ROLLO SIMULATOR — windows.css
   Thème WINDOWS XP "Luna" (bleu) — bureau + fenêtres + apps.
   À inclure APRÈS main.css.
   ============================================================ */

/* Variables du thème XP */
:root {
  --xp-blue-1: #2A8EF0;
  --xp-blue-2: #0050E9;
  --xp-blue-3: #003BC2;
  --xp-blue-deep: #1B3F8F;
  --xp-title-1: #0058E8;
  --xp-title-2: #2566D8;
  --xp-title-3: #1457D2;
  --xp-title-inactive-1: #7A96DF;
  --xp-title-inactive-2: #6080C2;
  --xp-frame: #0831D9;
  --xp-taskbar-1: #245EDB;
  --xp-taskbar-2: #245EDB;
  --xp-taskbar-3: #1941A5;
  --xp-start-1: #5EAC56;
  --xp-start-2: #469A3C;
  --xp-start-3: #3F7937;
  --xp-close-1: #E76A52;
  --xp-close-2: #C04632;
  --xp-close-3: #A22C20;
  --xp-btn-1: #4793E0;
  --xp-btn-2: #1E5DC5;
  --xp-body: #ECE9D8;
  --xp-window-text: #fff;
}

/* ----- LE BUREAU (wallpaper "Bliss" reconstitué) ----- */
#scene-computer #desktop {
  position: relative;
  width: 100%;
  height: calc(100vh - 110px);
  font-family: "Tahoma", "Segoe UI", Verdana, sans-serif;
  background:
    /* nuages */
    radial-gradient(ellipse 60% 30% at 30% 25%, rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(ellipse 40% 20% at 70% 30%, rgba(255,255,255,0.35), transparent 65%),
    radial-gradient(ellipse 30% 15% at 50% 45%, rgba(255,255,255,0.3), transparent 70%),
    /* colline verte */
    radial-gradient(ellipse 90% 50% at 50% 110%, #6FA84B 0%, #8BBD52 40%, transparent 70%),
    /* ciel bleu dégradé */
    linear-gradient(180deg, #3B8AD9 0%, #5BB0F2 50%, #8FD0FF 80%, #C4E3F5 100%);
  overflow: hidden;
}

/* ----- ICÔNES DU BUREAU (style XP) ----- */
#scene-computer #desktop-icons {
  position: absolute;
  top: 60px;   /* sous le topbar overlay du jeu */
  left: 12px;
  display: grid;
  grid-template-columns: 76px;
  gap: 8px;
  z-index: 5;
}
#scene-computer .desktop-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 76px;
  padding: 4px 2px;
  background: transparent;
  border: 1px dotted transparent;
  border-radius: 0;
  color: #fff;
  font-family: inherit;
  font-size: 11px;
  text-align: center;
  cursor: pointer;
  transition: none;
}
#scene-computer .desktop-icon:hover {
  background: rgba(49, 106, 197, 0.35);
  border-color: rgba(255, 255, 255, 0.6);
}
#scene-computer .desktop-icon:active,
#scene-computer .desktop-icon.selected {
  background: rgba(49, 106, 197, 0.55);
  border-color: rgba(255, 255, 255, 0.8);
}
#scene-computer .desktop-icon .di-img {
  position: relative;
  width: 48px;
  height: 48px;
  background: linear-gradient(145deg, #6BA9F0, #1F5BC5);
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.4),
    1px 2px 3px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#scene-computer .desktop-icon .di-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
#scene-computer .desktop-icon .di-img::before {
  content: attr(data-fallback);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6);
  z-index: 0;
}
#scene-computer .desktop-icon .di-label {
  font-size: 11px;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);
  word-break: break-word;
  line-height: 1.2;
  padding: 0 2px;
  background: transparent;
}

/* Icônes conditionnelles : Stream 2 n'apparaît qu'avec l'upgrade Multi-stream */
#scene-computer .desktop-icon.requires-multistream { display: none; }
body.has-screen2 #scene-computer .desktop-icon.requires-multistream { display: flex; }

/* ----- BARRE DES TÂCHES XP ----- */
#scene-computer #desktop-taskbar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 0 0 0;
  background:
    linear-gradient(180deg, #0C59D2 0%, #1F76E6 8%, #2580ED 50%, #1565D9 92%, #0747B3 100%);
  border-top: 1px solid #2580ED;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
  z-index: 9999;
  gap: 4px;
  font-size: 11px;
  color: #fff;
  font-family: "Tahoma", "Segoe UI", Verdana, sans-serif;
}
/* Bouton "démarrer" — vert XP avec courbure à droite */
#scene-computer #desktop-taskbar .tb-start {
  height: 24px;
  padding: 0 18px 0 28px;
  background:
    linear-gradient(180deg, #79C268 0%, #5EAC56 40%, #4A9742 60%, #3F8636 100%);
  border: 1px solid #2C6E26;
  border-radius: 4px 12px 12px 4px;
  color: #fff;
  font-weight: 800;
  font-style: italic;
  font-size: 13px;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.4),
    inset -1px -1px 0 rgba(0, 0, 0, 0.15),
    1px 1px 2px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.5px;
  text-transform: none;
  margin-left: 2px;
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
#scene-computer #desktop-taskbar .tb-start::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background:
    radial-gradient(circle, #fff 30%, transparent 32%) center / 8px 8px no-repeat,
    linear-gradient(180deg, #f5f5f5, #ddd);
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
#scene-computer #desktop-taskbar .tb-spacer { flex: 1; }

/* Boutons de fenêtres minimisées dans la taskbar (style XP) */
#scene-computer #desktop-taskbar .taskbar-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 10px;
  background: linear-gradient(180deg, #3B89E6 0%, #1E5EC8 50%, #1657BD 100%);
  border: 1px solid #0F3F94;
  border-radius: 3px;
  color: #fff;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  max-width: 200px;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.25),
    inset -1px -1px 0 rgba(0, 0, 0, 0.15);
  margin: 0 1px;
}
#scene-computer #desktop-taskbar .taskbar-item:hover {
  background: linear-gradient(180deg, #56A0F0 0%, #2870D9 50%, #1F66CD 100%);
}
#scene-computer #desktop-taskbar .taskbar-item .win-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
#scene-computer #desktop-taskbar .taskbar-item .ti-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Bouton "Réorganiser bureau" — discret, style barre système XP */
#scene-computer #btn-reset-layout {
  height: 22px;
  padding: 0 10px;
  margin-right: 6px;
  background: linear-gradient(180deg, #4C92E4 0%, #1B5FCA 100%);
  border: 1px solid #0F3F94;
  border-radius: 3px;
  color: #fff;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.25);
}
#scene-computer #btn-reset-layout:hover {
  background: linear-gradient(180deg, #6BA8EE 0%, #2870D9 100%);
}

/* ----- FENÊTRES XP ----- */
.window {
  position: absolute;
  background: var(--xp-body);
  border: 1px solid var(--xp-frame);
  border-radius: 8px 8px 0 0;
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 260px;
  min-height: 160px;
  font-family: "Tahoma", "Segoe UI", Verdana, sans-serif;
  color: #000;
}
.window.dragging {
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 0, 0, 0.3);
  cursor: grabbing;
}
.window.dragging * { user-select: none; pointer-events: none; }
.window.dragging .window-titlebar { pointer-events: auto; }
.window.closed { display: none !important; }
.window.minimized { display: none !important; }

/* Title bar XP — gradient bleu Luna */
.window-titlebar {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 4px 0 8px;
  background:
    linear-gradient(180deg,
      #0058EE 0%,
      #3072E2 8%,
      #2566D8 40%,
      #1457D2 88%,
      #0050E9 100%);
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom: 1px solid #1457D2;
  cursor: grab;
  user-select: none;
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}
.window-titlebar:active { cursor: grabbing; }

/* Petite icône à gauche de la titlebar (pastille colorée par app) */
.window-titlebar .win-dot {
  width: 16px; height: 16px;
  border-radius: 3px;
  background: linear-gradient(135deg, #fff, #c0d4f0);
  border: 1px solid rgba(0, 0, 0, 0.35);
  margin-right: 6px;
  flex-shrink: 0;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.5);
}
.window-titlebar .win-dot.green   { background: linear-gradient(135deg, #b8f0b0, #4fb143); }
.window-titlebar .win-dot.cyan    { background: linear-gradient(135deg, #b8eef5, #2ba8c5); }
.window-titlebar .win-dot.purple  { background: linear-gradient(135deg, #d8b8f5, #7e3ab8); }
.window-titlebar .win-dot.orange  { background: linear-gradient(135deg, #ffd5a0, #d97a1e); }
.window-titlebar .win-dot.red     { background: linear-gradient(135deg, #ffb8b0, #c93020); }
.window-titlebar .win-dot.blurple { background: linear-gradient(135deg, #b8c0f5, #4050c0); }

.window-titlebar .win-title {
  flex: 1;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: inherit;
}
.window-titlebar .win-controls {
  display: flex;
  gap: 2px;
  margin-right: 2px;
}

/* Boutons de fenêtre XP — petits boutons rectangulaires arrondis */
.window-titlebar .win-btn {
  width: 22px; height: 20px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 2px 0;
  font-family: "Marlett", "Tahoma", sans-serif;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
}
.window-titlebar .win-min,
.window-titlebar .win-btn.win-min {
  background: linear-gradient(180deg, #4793E0 0%, #1E5DC5 50%, #134AA9 100%);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.35);
}
.window-titlebar .win-min:hover {
  background: linear-gradient(180deg, #6BB0EE 0%, #2870D9 50%, #1559C2 100%);
}
.window-titlebar .win-close,
.window-titlebar .win-btn.win-close {
  background: linear-gradient(180deg, #E76A52 0%, #C04632 50%, #A22C20 100%);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.35);
}
.window-titlebar .win-close:hover {
  background: linear-gradient(180deg, #F08A75 0%, #D85540 50%, #B83020 100%);
}
.window-titlebar .win-btn:active {
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.4);
}

/* Bordure latérale XP : 3px de bleu */
.window {
  border-left: 3px solid var(--xp-frame);
  border-right: 3px solid var(--xp-frame);
  border-bottom: 3px solid var(--xp-frame);
  border-top: none;
}

/* Corps de fenêtre */
.window-body {
  flex: 1;
  overflow: auto;
  min-height: 0;
  position: relative;
  padding: 0;
  background: var(--xp-body);
}

/* Poignée de resize */
.window-resize {
  position: absolute;
  right: 0; bottom: 0;
  width: 14px; height: 14px;
  cursor: nwse-resize;
  z-index: 10;
  background:
    linear-gradient(135deg,
      transparent 0%, transparent 45%,
      rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0.4) 50%,
      transparent 50%, transparent 65%,
      rgba(0, 0, 0, 0.4) 65%, rgba(0, 0, 0, 0.4) 70%,
      transparent 70%, transparent 85%,
      rgba(0, 0, 0, 0.4) 85%, rgba(0, 0, 0, 0.4) 90%,
      transparent 90%);
}
.window.resizing { user-select: none; }
.window.resizing iframe { pointer-events: none; }

/* ----- APP TWITCH (stream + chat côte à côte) ----- */
.window.win-twitch .window-body { background: #000; padding: 0; }
.window.win-twitch .twitch-layout {
  display: grid;
  grid-template-columns: 1fr 240px;
  width: 100%; height: 100%;
}
.window.win-twitch .twitch-stream-pane {
  min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
}
.window.win-twitch .twitch-chat-pane {
  border-left: 1px solid #999;
  min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--xp-body);
}
.window.win-twitch #screen-1 {
  width: 100%; height: 100%;
  border: none; border-radius: 0;
  background: transparent;
  display: flex; flex-direction: column;
  min-height: 0;
}
.window.win-twitch .screen-header,
.window.win-twitch .screen-footer { flex: 0 0 auto; }
.window.win-twitch .screen-body {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: auto !important;
  max-height: none !important;
  grid-template-columns: none !important;
}
.window.win-twitch .stream-feed {
  position: relative;
  flex: 1 1 auto;
  width: 100%; height: 100%;
  min-height: 0;
  aspect-ratio: auto !important;
  overflow: hidden;
}
.window.win-twitch .stream-iframe {
  position: absolute;
  left: 0; top: -40px;
  width: 100%;
  height: calc(100% + 80px);
  border: 0;
}
.window.win-twitch .chat {
  width: 100%; height: 100%;
  border-radius: 0; border: none;
  background: #fff;
  color: #000;
}
.window.win-twitch .screen-body > .chat { display: none; }

/* ----- APP STREAM 2 ----- */
.window.win-stream .window-body { background: #000; padding: 0; }
.window.win-stream #screen-2 {
  width: 100%; height: 100%;
  border: none; border-radius: 0;
  background: transparent;
  display: flex; flex-direction: column;
  min-height: 0;
}
.window.win-stream .screen-header,
.window.win-stream .screen-footer { flex: 0 0 auto; }
.window.win-stream .screen-body {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: auto !important;
  max-height: none !important;
  grid-template-columns: none !important;
}
.window.win-stream .stream-feed {
  position: relative;
  flex: 1 1 auto;
  width: 100%; height: 100%;
  min-height: 0;
  aspect-ratio: auto !important;
}
.window.win-stream .stream-iframe {
  position: absolute;
  left: 0; top: -40px;
  width: 100%; height: calc(100% + 80px);
  border: 0;
}

/* ----- APP BOUTIQUE ----- */
.window.win-shop .window-body { padding: 8px; background: var(--xp-body); }
.window.win-shop .panel {
  background: #fff;
  border: 1px solid #999;
  padding: 8px;
  margin: 0;
  border-radius: 0;
  color: #000;
}
.window.win-shop .panel h3 {
  background: linear-gradient(180deg, #C5D8F0, #8AB1E0);
  color: #000;
  padding: 4px 8px;
  margin: 0 -8px 6px -8px;
  font-size: 12px;
  font-weight: 700;
  border-bottom: 1px solid #6080BC;
}

/* ============================================================
   APP UBER EATS — design fidèle à la vraie app
   ============================================================ */
.window.win-ubereats .window-body {
  padding: 0;
  background: #fff;
  color: #06080A;
}
.ubereats-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: "UberMove", "Helvetica Neue", "Inter", Arial, sans-serif;
  background: #fff;
}

/* ----- Header noir ----- */
.ue-header {
  background: #06080A;
  color: #fff;
  padding: 14px 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.ue-brand {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1;
}
.ue-logo-uber { color: #fff; }
.ue-logo-eats { color: #06C167; }
.ue-address {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  cursor: pointer;
}
.ue-address-label { color: #06C167; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.ue-address-value { color: #fff; font-size: 13px; font-weight: 500; }
.ue-chev { font-size: 10px; opacity: 0.7; }

/* ----- Barre de recherche ----- */
.ue-search {
  position: relative;
  margin: 12px 14px 0;
  flex-shrink: 0;
}
.ue-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  opacity: 0.5;
}
.ue-search-input {
  width: 100%;
  background: #F3F3F3;
  border: 1px solid transparent;
  border-radius: 24px;
  padding: 10px 16px 10px 38px;
  font-family: inherit;
  font-size: 13px;
  color: #06080A;
  outline: none;
  transition: all 0.15s;
}
.ue-search-input:focus {
  background: #fff;
  border-color: #06080A;
}

/* ----- Bandeau promo ----- */
.ue-banner {
  margin: 12px 14px 0;
  background: linear-gradient(135deg, #06C167 0%, #00A05B 100%);
  color: #fff;
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.ue-banner-tag {
  background: rgba(255,255,255,0.25);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
}
.ue-banner-text { font-size: 12px; flex: 1; }
.ue-banner-text strong { font-weight: 800; }

/* ----- Pills catégories ----- */
.ue-cats {
  display: flex;
  gap: 14px;
  padding: 14px 14px 8px;
  overflow-x: auto;
  flex-shrink: 0;
  scrollbar-width: none;
}
.ue-cats::-webkit-scrollbar { display: none; }
.ue-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
}
.ue-cat-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.ue-cat-label {
  font-size: 11px;
  font-weight: 600;
  color: #545454;
}
.ue-cat.active { border-bottom-color: #06080A; }
.ue-cat.active .ue-cat-label { color: #06080A; }

/* ----- Section titre ----- */
.ue-section-title {
  padding: 14px 18px 8px;
  font-size: 18px;
  font-weight: 800;
  color: #06080A;
}
.ue-count { color: #888; font-size: 13px; font-weight: 500; }

/* ----- Liste de cards ----- */
.ue-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 14px 12px;
}
.ue-card {
  display: flex;
  gap: 12px;
  padding: 10px;
  margin-bottom: 8px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #EEEEEE;
  align-items: stretch;
  transition: all 0.15s;
  position: relative;
}
.ue-card:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.10);
  transform: translateY(-1px);
}
.ue-card.disabled { opacity: 0.55; }

.ue-card-img {
  width: 88px; height: 88px;
  flex-shrink: 0;
  border-radius: 8px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ue-card-emoji {
  font-size: 42px;
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.15));
}
.ue-card-badge {
  position: absolute;
  bottom: 6px;
  left: 6px;
  background: rgba(255,255,255,0.95);
  color: #06080A;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}

.ue-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}
.ue-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #06080A;
  line-height: 1.2;
}
.ue-card-desc {
  font-size: 12px;
  color: #545454;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ue-card-meta {
  font-size: 11px;
  color: #888;
  display: flex;
  gap: 5px;
  align-items: center;
  margin-top: 2px;
}
.ue-card-rating { color: #06080A; font-weight: 600; }
.ue-card-dest { color: #06C167; font-weight: 600; }

.ue-card-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  padding: 4px 0;
  flex-shrink: 0;
}
.ue-card-price {
  font-size: 16px;
  font-weight: 800;
  color: #06080A;
}
.ue-card-add {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #06080A;
  color: #fff;
  border: none;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 3px;
  transition: all 0.15s;
}
.ue-card-add:hover { background: #06C167; transform: scale(1.1); }
.ue-card-add:active { transform: scale(0.95); }
.ue-card-add:disabled {
  background: #DDD;
  cursor: not-allowed;
  transform: none;
}

.ue-empty {
  text-align: center;
  padding: 40px 20px;
  color: #888;
  font-style: italic;
  font-size: 13px;
}

.ue-footer {
  padding: 8px 18px;
  font-size: 10px;
  color: #888;
  text-align: center;
  border-top: 1px solid #EEEEEE;
  flex-shrink: 0;
}

/* ----- Badge quantité sur la carte ----- */
.ue-card-qty {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: #06C167;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.ue-card.in-cart {
  border-color: #06C167;
  box-shadow: 0 0 0 1px #06C167 inset;
}

/* ----- Panier (barre + sheet dépliable) ----- */
.ue-cart {
  flex-shrink: 0;
  border-top: 1px solid #EEEEEE;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.ue-cart.empty { display: none; }

/* Sheet : détail des articles, déplié vers le haut */
.ue-cart-sheet {
  display: none;
  max-height: 220px;
  overflow-y: auto;
  padding: 8px 14px;
  border-bottom: 1px solid #EEEEEE;
}
.ue-cart.open .ue-cart-sheet { display: block; }

.ue-cart-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #F3F3F3;
}
.ue-cart-line:last-of-type { border-bottom: none; }
.ue-cart-line-emoji { font-size: 22px; flex-shrink: 0; width: 28px; text-align: center; }
.ue-cart-line-info { flex: 1; min-width: 0; }
.ue-cart-line-name { font-size: 13px; font-weight: 700; color: #06080A; line-height: 1.2; }
.ue-cart-line-unit { font-size: 11px; color: #888; }
.ue-cart-line-total {
  font-size: 14px;
  font-weight: 800;
  color: #06080A;
  min-width: 48px;
  text-align: right;
}
.ue-cart-line-del {
  border: none;
  background: transparent;
  color: #BBB;
  font-size: 14px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  border-radius: 4px;
  transition: all 0.15s;
}
.ue-cart-line-del:hover { color: #FF3B30; background: #FFE9E7; }

/* Stepper − qty + */
.ue-step {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ue-step-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid #06080A;
  background: #fff;
  color: #06080A;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 2px;
  transition: all 0.12s;
}
.ue-step-btn:hover { background: #06080A; color: #fff; }
.ue-step-btn:active { transform: scale(0.92); }
.ue-step-qty { font-size: 14px; font-weight: 800; color: #06080A; min-width: 16px; text-align: center; }

.ue-cart-sheet-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
}
.ue-cart-clear {
  border: none;
  background: transparent;
  color: #FF3B30;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background 0.15s;
}
.ue-cart-clear:hover { background: #FFE9E7; }
.ue-cart-sheet-total { font-size: 13px; color: #545454; }
.ue-cart-sheet-total strong { color: #06080A; font-weight: 800; }
.ue-cart-empty { text-align: center; color: #888; font-style: italic; font-size: 12px; padding: 16px; }

/* Barre panier (toujours visible quand non vide) */
.ue-cart-bar {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 10px 14px;
}
.ue-cart-toggle {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #F3F3F3;
  border: none;
  border-radius: 10px;
  padding: 0 14px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.ue-cart-toggle:hover { background: #EAEAEA; }
.ue-cart-icon { font-size: 18px; }
.ue-cart-count {
  background: #06C167;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  min-width: 22px;
  height: 22px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}
.ue-cart-toggle-label { flex: 1; text-align: left; font-size: 13px; font-weight: 700; color: #06080A; }
.ue-cart-total { font-size: 15px; font-weight: 800; color: #06080A; }
.ue-cart-checkout {
  background: #06C167;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0 22px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.ue-cart-checkout:hover { background: #05A658; }
.ue-cart-checkout:active { transform: scale(0.97); }
.ue-cart-checkout:disabled {
  background: #DDD;
  color: #999;
  cursor: not-allowed;
  transform: none;
}

/* ----- APP BANQUE — Style XP, fond clair ----- */
.window.win-bank .window-body { padding: 0; background: var(--xp-body); }
.bank-app {
  padding: 12px;
  color: #000;
  font-size: 12px;
  font-family: "Tahoma", "Segoe UI", Verdana, sans-serif;
}
.bank-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.bank-account {
  background: linear-gradient(180deg, #f8f8f8, #e8e8e0);
  border: 1px solid #999;
  border-radius: 4px;
  padding: 10px 12px;
  box-shadow: inset 1px 1px 0 #fff;
}
.bank-account-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #555;
}
.bank-balance {
  font-size: 26px;
  font-weight: 800;
  color: #007030;
  margin: 2px 0;
}
.bank-account-sub {
  font-size: 10px;
  color: #777;
}
.bank-kpis {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 4px;
}
.bank-kpi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid #aaa;
  border-radius: 3px;
}
.bank-kpi .kpi-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #555;
}
.bank-kpi .kpi-val { font-weight: 700; color: #000; }
.bank-kpi .kpi-val.in { color: #007030; }
.bank-kpi .kpi-val.out { color: #B22222; }
.bank-section { margin-bottom: 14px; }
.bank-section-title {
  background: linear-gradient(180deg, #C5D8F0, #8AB1E0);
  color: #000;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
  border: 1px solid #6080BC;
  border-radius: 3px 3px 0 0;
  margin-bottom: 0;
  letter-spacing: 0;
}
.bank-chart-wrap {
  background: #fff;
  border: 1px solid #6080BC;
  border-top: none;
  padding: 8px;
  height: 140px;
}
.bank-chart { width: 100%; height: 100%; }
.bank-chart .bar-axis { stroke: #aaa; stroke-width: 0.4; }
.bank-chart .bar-in  { fill: #2D9A4A; }
.bank-chart .bar-out { fill: #C03020; }
.bank-chart .bar-label {
  font-size: 4px;
  fill: #555;
  text-anchor: middle;
  font-family: inherit;
}
.bank-chart-empty {
  text-align: center;
  color: #888;
  padding: 40px 0;
  font-style: italic;
}
.bank-chart-legend {
  font-size: 10px;
  color: #555;
  margin-top: 6px;
  padding: 0 4px;
}
.legend-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 4px;
  border: 1px solid rgba(0,0,0,0.2);
}
.legend-dot.in { background: #2D9A4A; }
.legend-dot.out { background: #C03020; }
.bank-tx-list {
  list-style: none; margin: 0; padding: 0;
  max-height: 200px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #6080BC;
  border-top: none;
  border-radius: 0 0 3px 3px;
}
.bank-tx {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-bottom: 1px solid #eee;
  font-size: 12px;
}
.bank-tx:nth-child(odd) { background: #f8f8f8; }
.bank-tx:last-child { border-bottom: none; }
.bank-tx-day {
  font-size: 9px;
  letter-spacing: 0.5px;
  color: #777;
  text-transform: uppercase;
}
.bank-tx-label { color: #000; }
.bank-tx-amt { font-weight: 700; }
.bank-tx.in .bank-tx-amt { color: #007030; }
.bank-tx.out .bank-tx-amt { color: #B22222; }
.bank-tx-empty {
  padding: 16px;
  text-align: center;
  color: #888;
  font-style: italic;
}

/* ----- APPS PLACEHOLDER (Discord, Pôle Emploi) ----- */
.app-placeholder {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  color: #000;
  background: var(--xp-body);
}
.app-placeholder h2 {
  font-size: 22px;
  margin-bottom: 10px;
  color: #1457D2;
}
.app-placeholder p {
  margin: 4px 0;
  color: #333;
}
.app-placeholder .hint {
  font-size: 11px;
  color: #777;
  margin-top: 8px;
  font-style: italic;
}

/* ----- NEUTRALISATIONS contre main.css ----- */
body.window-mode #scene-computer .computer-grid { display: block; }
body.window-mode.has-screen2 #scene-computer .screen-body {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  grid-template-columns: none !important;
}
body.window-mode.has-screen2 #scene-computer .stream-feed {
  aspect-ratio: auto !important;
  max-height: none !important;
}

/* ============================================================
   TOASTS — notifications flottantes en haut centre
   ============================================================ */
#toasts {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  width: max-content;
  max-width: 90vw;
}
.toast {
  background: rgba(15, 15, 25, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  padding: 12px 22px;
  border-radius: 999px;
  font-family: "Tahoma", "Segoe UI", Verdana, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: toastIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
             toastOut 0.4s ease-in 2.6s forwards;
  pointer-events: auto;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 200px;
  justify-content: center;
}
.toast::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #888;
  flex-shrink: 0;
}
.toast.good {
  background: linear-gradient(135deg, rgba(15, 50, 25, 0.95), rgba(20, 70, 35, 0.95));
  border-color: rgba(74, 222, 128, 0.5);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 24px rgba(74, 222, 128, 0.25);
}
.toast.good::before { background: #4ade80; box-shadow: 0 0 8px #4ade80; }
.toast.bad {
  background: linear-gradient(135deg, rgba(60, 15, 20, 0.95), rgba(80, 20, 25, 0.95));
  border-color: rgba(239, 68, 68, 0.5);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 24px rgba(239, 68, 68, 0.25);
}
.toast.bad::before { background: #ef4444; box-shadow: 0 0 8px #ef4444; }
.toast.warn {
  background: linear-gradient(135deg, rgba(60, 40, 10, 0.95), rgba(80, 55, 15, 0.95));
  border-color: rgba(251, 191, 36, 0.55);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 24px rgba(251, 191, 36, 0.25);
}
.toast.warn::before { background: #fbbf24; box-shadow: 0 0 8px #fbbf24; }
.toast.money {
  background: linear-gradient(135deg, rgba(45, 35, 10, 0.95), rgba(70, 55, 15, 0.95));
  border-color: rgba(251, 191, 36, 0.6);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 28px rgba(251, 191, 36, 0.3);
  color: #fde68a;
}
.toast.money::before { background: #fcd34d; box-shadow: 0 0 8px #fcd34d; }

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(-40px) scale(0.85);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-20px) scale(0.9); }
}

@media (max-width: 720px) {
  #toasts { top: 55px; }
  .toast { font-size: 12px; padding: 10px 18px; min-width: 160px; }
}

/* ============================================================
   LAYOUT FULLSCREEN — le jeu prend toute la fenêtre.
   Le topbar et les jauges sont des overlays POSITIONNÉS SUR le
   stage, plus aucun élément en dehors de l'aire de jeu.
   ============================================================ */
html, body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* Topbar en overlay flottant en haut du stage */
#topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  padding: .5rem 1rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.2) 80%, transparent);
  border-bottom: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none; /* Laisse passer les clics, sauf sur les boutons */
}
#topbar > * { pointer-events: auto; }

/* Needs HUD en overlay en haut à droite, sous le topbar */
#needs-hud {
  position: fixed;
  top: 60px;
  right: 12px;
  width: 200px;
  z-index: 500;
  background: rgba(15, 15, 25, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Le stage occupe TOUTE la fenêtre, plus de marges/max-width */
#stage {
  position: fixed;
  inset: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: 0;
  height: 100vh;
  width: 100vw;
}

/* Chaque scène remplit le stage et centre son contenu */
.scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.scene[data-active="true"] {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* L'appartement garde son aspect-ratio 3:2 (image source 900×600).
   Il NE grossit JAMAIS au-delà de sa taille naturelle (900×600) pour que les
   meubles (positionnés en pixels) gardent leur poids visuel. Mais il se
   rétrécit proportionnellement sur petit écran. */
#apartment {
  position: relative;
  width: min(900px, 95vw, calc((100vh - 80px) * 1.5));
  height: auto;
  aspect-ratio: 3 / 2;
  max-height: calc(100vh - 80px);
  margin: 0;
  background-size: 100% 100%;
  background-position: center;
}

/* ============================================================
   ZONE "SAFE AREA" — Les scènes kitchen et bed laissent de la
   place en haut pour le topbar (~50px) et à droite pour le HUD
   des jauges (~220px), pour qu'aucun contenu ne passe dessous.
   ============================================================ */
#scene-kitchen[data-active="true"],
#scene-bed[data-active="true"] {
  align-items: flex-start;
  justify-content: flex-start;
  padding: 60px 230px 20px 20px;
  overflow: auto;
}

#scene-kitchen .kitchen-grid,
#scene-bed .bed-panel {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

/* On supprime les anciens boutons "Retour à l'appart" par scène : il y a
   maintenant un seul bouton global dans le topbar (#btn-home). */
.scene .btn-back { display: none !important; }

/* La scène computer occupe tout l'écran ; le bureau passe sous le topbar. */
#scene-computer[data-active="true"] {
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
}
#scene-computer > #desktop {
  width: 100%;
}

/* ----- Bouton #btn-home dans le topbar ----- */
#topbar #btn-home {
  background: linear-gradient(180deg, #b388ff 0%, #7a5fd6 100%);
  color: #fff;
  border: 1px solid rgba(179, 136, 255, 0.55);
  padding: .4rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-right: 8px;
  box-shadow: 0 0 12px rgba(179, 136, 255, 0.35);
  transition: all 0.15s;
}
#topbar #btn-home:hover {
  background: linear-gradient(180deg, #c9a5ff 0%, #8d72e3 100%);
  box-shadow: 0 0 18px rgba(179, 136, 255, 0.6);
  transform: translateY(-1px);
}
#topbar #btn-home:active { transform: translateY(0); }

/* Caché quand on est dans l'appartement (pas besoin de retour vers soi-même).
   Tant que data-current-scene n'est pas posé, on cache aussi (état initial). */
body[data-current-scene="apartment"] #btn-home,
body:not([data-current-scene]) #btn-home { display: none; }

/* ----- Bouton "Éditer l'appart" : visible uniquement dans l'appart ----- */
#topbar #btn-edit-apt {
  background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);
  color: #1a1a1a;
  border: 1px solid #b45309;
  padding: .35rem .8rem;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-right: 6px;
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.4);
  transition: all 0.15s;
}
#topbar #btn-edit-apt:hover {
  background: linear-gradient(180deg, #fcd34d 0%, #f59e0b 100%);
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.6);
}
body:not([data-current-scene="apartment"]) #btn-edit-apt,
body:not([data-current-scene]) #btn-edit-apt { display: none; }

/* ----- Meubles cuisine — sprites ----- */
#scene-apartment #furn-pantry {
  background-image: url("../img/appart/level0/kitchinettelevel0.png");
  background-image: image-set(
    url("../img/appart/level0/kitchinettelevel0.webp") type("image/webp"),
    url("../img/appart/level0/kitchinettelevel0.png") type("image/png"));
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
#scene-apartment #furn-fridge {
  background-image: url("../img/appart/level0/frigolevel0.png");
  background-image: image-set(
    url("../img/appart/level0/frigolevel0.webp") type("image/webp"),
    url("../img/appart/level0/frigolevel0.png") type("image/png"));
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
#scene-apartment #furn-stove {
  background-image: url("../img/appart/level0/gazinierelevel0.png");
  background-image: image-set(
    url("../img/appart/level0/gazinierelevel0.webp") type("image/webp"),
    url("../img/appart/level0/gazinierelevel0.png") type("image/png"));
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

/* Items inventaire : différenciation visuelle */
.inv-item.raw {
  border-left: 3px solid #fbbf24;
}
.inv-item.crafted {
  border-left: 3px solid #ef4444;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(251, 191, 36, 0.05));
}

/* Hint message dans les scènes cuisine */
.kitchen-hint {
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-dim, #888);
  font-style: italic;
}

/* ============================================================
   MODALES "INTERACTION AVEC UN MEUBLE"
   Quand on entre dans pantry / fridge / stove, l'apartment reste
   visible derrière, flouté + assombri. La scène cible devient un
   overlay transparent avec un menu flottant centré.
   ============================================================ */
body[data-current-scene="fridge"] #scene-apartment,
body[data-current-scene="pantry"] #scene-apartment,
body[data-current-scene="stove"]  #scene-apartment {
  /* On force l'appart à rester visible derrière la modale,
     en gardant son centrage horizontal et vertical. */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute;
  inset: 0;
  filter: blur(6px) brightness(0.55) saturate(0.8);
  pointer-events: none;
  z-index: 1;
}

/* Les 3 scènes-meubles sont en overlay transparent par-dessus l'appart */
#scene-fridge,
#scene-pantry,
#scene-stove {
  background: rgba(0, 0, 0, 0.35);
  z-index: 10;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
}
#scene-fridge[data-active="true"],
#scene-pantry[data-active="true"],
#scene-stove[data-active="true"] {
  display: flex !important;
  padding: 0 !important;
}

/* ----- Frigo : image frigo ouvert au centre + menu collé à côté ----- */
#scene-fridge .fridge-bg,
#scene-pantry .pantry-bg,
#scene-stove  .stove-bg {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.7));
}
#scene-fridge .fridge-bg {
  background-image: url("../img/appart/level0/frigoouvertlevel0.png");
  background-image: image-set(
    url("../img/appart/level0/frigoouvertlevel0.webp") type("image/webp"),
    url("../img/appart/level0/frigoouvertlevel0.png") type("image/png"));
}
#scene-pantry .pantry-bg {
  background-image: url("../img/appart/level0/kitchinetteouverte.png");
  background-image: image-set(
    url("../img/appart/level0/kitchinetteouverte.webp") type("image/webp"),
    url("../img/appart/level0/kitchinetteouverte.png") type("image/png"));
}
#scene-stove  .stove-bg  {
  background-image: url("../img/appart/level0/gaziniereoff.png");
  background-image: image-set(
    url("../img/appart/level0/gaziniereoff.webp") type("image/webp"),
    url("../img/appart/level0/gaziniereoff.png") type("image/png"));
}

#scene-fridge .fridge-overlay,
#scene-pantry .pantry-overlay,
#scene-stove  .stove-overlay {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 230px 20px 20px;
}

/* ----- Menu flottant universel (réutilisable pour fridge/pantry/stove) ----- */
.panel-floating {
  width: 100%;
  max-width: 520px;
  background: rgba(20, 20, 28, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(179, 136, 255, 0.45);
  border-radius: 14px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.75),
    0 0 30px rgba(179, 136, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  padding: 20px 22px;
  color: var(--text, #e8e8f0);
  animation: panelPop 0.25s ease-out;
}
@keyframes panelPop {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.panel-floating h3 {
  margin: 0 0 14px 0;
  font-size: 18px;
  letter-spacing: 1px;
  color: #b8d8f0;
  text-shadow: 0 0 12px rgba(184, 216, 240, 0.4);
  text-transform: uppercase;
}
.panel-floating .hint {
  font-size: 11px;
  color: #888;
  font-weight: normal;
  letter-spacing: 0.5px;
  text-transform: none;
}
.panel-floating .inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
}
.panel-floating .kitchen-hint {
  color: #888;
  margin-top: 14px;
  text-align: center;
}

@media (max-width: 720px) {
  #scene-fridge .fridge-overlay {
    padding: 50px 12px 12px 12px;
  }
}

/* Zone gazinière */
#stove-area {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 200px;
}
.stove-checklist {
  font-size: 12px;
  color: var(--text-dim, #888);
}

/* ============================================================
   MINI-JEU CUISSON
   ============================================================ */
.cook-intro {
  text-align: center;
  padding: 20px 10px;
}
.cook-intro h4 {
  color: #fbbf24;
  margin: 0 0 8px;
  font-size: 16px;
  letter-spacing: 1px;
}
.cook-intro p { color: #b8b8d0; margin: 6px 0 14px; font-size: 12px; }

.cook-start-btn {
  background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);
  color: #1a1a1a;
  border: 1px solid #b45309;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: all 0.15s;
}
.cook-start-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #fcd34d 0%, #f59e0b 100%);
  transform: translateY(-1px);
}
.cook-start-btn:disabled {
  background: #444;
  color: #888;
  cursor: not-allowed;
  border-color: #333;
}

.cook-step h4 {
  color: #fbbf24;
  margin: 0 0 10px;
  font-size: 14px;
  text-align: center;
  letter-spacing: 1px;
}
.cook-hint {
  text-align: center;
  font-size: 11px;
  color: #b8b8d0;
  margin: 0 0 10px;
  font-style: italic;
}

/* --- Étape 1 : plaques --- */
.cook-stove-img {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 0 auto;
  background: center / contain no-repeat;
  background-image: url("../img/appart/level0/gaziniereoff.png");
  background-image: image-set(
    url("../img/appart/level0/gaziniereoff.webp") type("image/webp"),
    url("../img/appart/level0/gaziniereoff.png") type("image/png"));
}
.cook-plate {
  position: absolute;
  width: 70px; height: 70px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid rgba(251, 191, 36, 0.5);
  cursor: pointer;
  transition: all 0.15s;
}
.cook-plate:nth-child(1) { top: 32px;  left: 30px; }
.cook-plate:nth-child(2) { top: 32px;  right: 30px; }
.cook-plate:nth-child(3) { bottom: 50px; left: 30px; }
.cook-plate:nth-child(4) { bottom: 50px; right: 30px; }
.cook-plate:hover {
  border-color: #fbbf24;
  box-shadow: 0 0 18px rgba(251, 191, 36, 0.6) inset;
  background: rgba(251, 191, 36, 0.15);
}

/* --- Étape 2 : préparation --- */
.cook-prep-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.cook-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}
.cook-card-title {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fbbf24;
  margin-bottom: 6px;
}
.cook-shallot-img,
.cook-meat-img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  margin: 4px auto 8px;
  display: block;
  image-rendering: pixelated;
}

/* ----- FRUIT NINJA ÉCHALOTES ----- */
.ninja-pad {
  position: relative;
  width: 100%;
  height: 180px;
  background: radial-gradient(circle at center, rgba(251, 191, 36, 0.08), rgba(0, 0, 0, 0.2));
  border: 1px dashed rgba(251, 191, 36, 0.4);
  border-radius: 8px;
  margin: 4px 0 8px;
  cursor: crosshair;
  overflow: hidden;
  user-select: none;
  touch-action: none;
}
.ninja-shallot {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 110px;
  height: 110px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
}
.ninja-shallot.sliced {
  animation: ninjaSlice 0.25s ease-out;
}
@keyframes ninjaSlice {
  0%   { transform: translate(-50%, -50%) scale(1); }
  30%  { transform: translate(-50%, -50%) scale(1.18) rotate(-6deg); filter: drop-shadow(0 0 20px rgba(255,255,0,0.8)); }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0); }
}
.ninja-trace {
  position: absolute;
  height: 4px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0) 100%);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.9), 0 0 20px rgba(251, 191, 36, 0.6);
  transform-origin: left center;
  pointer-events: none;
  opacity: 0;
  border-radius: 2px;
}
.ninja-hint {
  position: absolute;
  bottom: 6px;
  right: 8px;
  font-size: 9px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.5px;
  pointer-events: none;
}
.ninja-done {
  text-align: center;
  padding: 12px;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 6px;
  color: #4ade80;
  font-size: 12px;
  font-weight: 700;
  margin: 4px 0;
}

/* --- Échalote vivante --- */
.ninja-shallot {
  transition: none; /* mouvement géré en JS */
}
.ninja-meta {
  position: absolute;
  bottom: 4px;
  left: 6px;
  right: 6px;
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: rgba(255,255,255,0.6);
  pointer-events: none;
  letter-spacing: 0.3px;
}
.ninja-fails { color: #ef4444; }
.ninja-feedback {
  position: absolute;
  left: 50%; top: 30%;
  transform: translate(-50%, -50%) scale(0.6);
  background: rgba(239, 68, 68, 0.9);
  color: #fff;
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, transform 0.2s;
}
.ninja-feedback.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* --- Massage RYTHMIQUE --- */
.rhythm-pad {
  position: relative;
  width: 100%;
  height: 180px;
  background: radial-gradient(circle at center, rgba(239, 68, 68, 0.06), rgba(0,0,0,0.2));
  border: 1px dashed rgba(239, 68, 68, 0.4);
  border-radius: 8px;
  margin: 4px 0 8px;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rhythm-meat {
  width: 70px !important;
  height: 70px !important;
  margin: 0 !important;
  position: relative;
  z-index: 3;
  filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.5));
  pointer-events: none;
}
.rhythm-meat.miss-shake {
  animation: missShake 0.25s ease-in-out;
}
@keyframes missShake {
  0%, 100% { transform: translateX(0); }
  20%  { transform: translateX(-6px); }
  40%  { transform: translateX(6px); }
  60%  { transform: translateX(-4px); }
  80%  { transform: translateX(4px); }
}
.rhythm-ring {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
  border: 3px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.3);
  transition: width 0.05s, height 0.05s;
}
.rhythm-ring.hit-flash {
  border-color: #4ade80;
  box-shadow: 0 0 24px rgba(74, 222, 128, 1);
  animation: hitFlash 0.2s ease-out;
}
@keyframes hitFlash {
  0%   { transform: translate(-50%, -50%) scale(1); }
  50%  { transform: translate(-50%, -50%) scale(1.2); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
.rhythm-core {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border: 2px dashed rgba(74, 222, 128, 0.6);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}
.rhythm-hint {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  text-align: center;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.5px;
  pointer-events: none;
}
.rhythm-fails {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 9px;
  color: #ef4444;
  letter-spacing: 0.3px;
  pointer-events: none;
}

/* --- Retournement cuisson --- */
.cook-flip-btn {
  display: block;
  margin: 8px auto;
  background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);
  color: #1a1a1a;
  border: 2px solid #b45309;
  padding: 10px 20px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  cursor: pointer;
  animation: flipPulse 0.5s ease-in-out infinite alternate;
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.7);
}
@keyframes flipPulse {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}
.cook-flip-btn:hover { background: linear-gradient(180deg, #fcd34d 0%, #f59e0b 100%); }
.flip-status {
  font-size: 10px;
  margin-left: 8px;
  font-weight: 700;
}
.flip-status.done   { color: #4ade80; }
.flip-status.missed { color: #ef4444; }
.cook-meat-cooking.flipped-anim {
  animation: flipSpin 0.5s ease-in-out;
}
@keyframes flipSpin {
  0%   { transform: translate(-50%, -50%) rotateY(0); }
  50%  { transform: translate(-50%, -50%) rotateY(180deg) scale(1.1); }
  100% { transform: translate(-50%, -50%) rotateY(360deg); }
}

/* --- Liste de règles dans l'intro --- */
.cook-rules {
  text-align: left;
  font-size: 11px;
  color: #b8b8d0;
  list-style: none;
  padding: 0;
  margin: 10px 0;
}
.cook-rules li {
  padding: 4px 8px;
  margin: 3px 0;
  background: rgba(251, 191, 36, 0.08);
  border-left: 2px solid #fbbf24;
  border-radius: 0 4px 4px 0;
}
.cook-rules strong { color: #fbbf24; }
.cook-req {
  font-size: 10px;
  color: #888;
  margin: 10px 0 14px;
  font-style: italic;
}
.cook-meat-img.massaging {
  animation: meatMassage 0.25s ease-out;
}
@keyframes meatMassage {
  0%   { transform: scale(1) rotate(0); }
  30%  { transform: scale(1.08) rotate(-3deg); }
  70%  { transform: scale(0.94) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}

.cook-action {
  width: 100%;
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.5);
  color: #fbbf24;
  padding: 6px 8px;
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: all 0.15s;
  margin-top: 4px;
}
.cook-action:hover:not(:disabled) {
  background: rgba(251, 191, 36, 0.3);
  transform: scale(1.02);
}
.cook-action.done {
  background: rgba(34, 197, 94, 0.2);
  border-color: rgba(34, 197, 94, 0.6);
  color: #4ade80;
}
.cook-action:disabled { cursor: not-allowed; }
.cook-actions-row {
  display: flex;
  gap: 6px;
}
.cook-actions-row .cook-action {
  flex: 1;
}
.cook-cta {
  width: 100%;
  display: block;
  margin-top: 6px;
}
.cook-abort {
  background: none;
  border: none;
  color: #888;
  font-size: 10px;
  cursor: pointer;
  width: 100%;
  text-align: center;
  margin-top: 8px;
  text-decoration: underline;
}
.cook-abort:hover { color: #ef4444; }

/* --- Étape 3 : cuisson --- */
.cook-pan {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 0 auto 10px;
}
.cook-pan-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: panHeat 1s ease-in-out infinite alternate;
}
@keyframes panHeat {
  from { filter: brightness(1); }
  to   { filter: brightness(1.2) drop-shadow(0 0 16px rgba(255, 80, 0, 0.5)); }
}
.cook-meat-cooking {
  position: absolute;
  left: 50%; top: 55%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 90px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.cook-state {
  text-align: center;
  font-size: 12px;
  color: #b8b8d0;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.cook-state.sweet strong { color: #4ade80; }
.cook-state strong { color: #fbbf24; }
.cook-progress {
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 4px;
  position: relative;
}
.cook-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #94a3b8 0%, #fbbf24 35%, #22c55e 50%, #fbbf24 65%, #ef4444 100%);
  transition: width 0.2s;
}
.cook-zones {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  color: #888;
}
.cook-zone-mark.sweet { color: #4ade80; font-weight: 700; }
.cook-zone-mark.bad   { color: #ef4444; font-weight: 700; }
.cook-cta.ready {
  background: linear-gradient(180deg, #4ade80 0%, #16a34a 100%);
  color: #fff;
  border-color: #15803d;
  animation: ctaPulse 0.8s ease-in-out infinite alternate;
}
@keyframes ctaPulse {
  from { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); }
  to   { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); }
}

/* --- Étape 4 : résultat --- */
.cook-step-done {
  text-align: center;
}
.cook-step-done h4 { font-size: 18px; }
.cook-meat-done {
  width: 140px;
  height: 140px;
  object-fit: contain;
  margin: 10px auto;
  display: block;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.5));
}
.cook-step-done p {
  font-size: 12px;
  color: #b8b8d0;
  margin: 10px 0;
}
.cook-step-done p strong { color: #fbbf24; }

/* ----- MODE ÉDITION DE L'APPART ----- */
body.apt-edit-mode #apartment {
  outline: 3px dashed rgba(251, 191, 36, 0.6);
  outline-offset: -4px;
  cursor: crosshair;
}
body.apt-edit-mode .furniture {
  cursor: grab;
  outline: 2px solid rgba(251, 191, 36, 0.6);
  outline-offset: 2px;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.5);
}
body.apt-edit-mode .furniture:hover {
  outline-color: #fbbf24;
  box-shadow: 0 0 18px rgba(251, 191, 36, 0.9);
}
body.apt-edit-mode .furniture.editing-drag {
  opacity: 0.85;
  cursor: grabbing;
}
body.apt-edit-mode .furniture.editing-resize { opacity: 0.85; }

/* Poignée de resize en bas-droite de chaque meuble — invisible hors édition */
.furn-resize {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  z-index: 100;
  background:
    linear-gradient(135deg,
      transparent 0%, transparent 40%,
      #fbbf24 40%, #fbbf24 50%,
      transparent 50%, transparent 65%,
      #fbbf24 65%, #fbbf24 75%,
      transparent 75%, transparent 90%,
      #fbbf24 90%);
  display: none;
}
body.apt-edit-mode .furn-resize { display: block; }

/* En mode édition, le prompt d'interaction et le sprite player passent au second plan */
body.apt-edit-mode #player,
body.apt-edit-mode #interact-prompt,
body.apt-edit-mode #controls-help {
  opacity: 0.4;
  pointer-events: none;
}

/* Badge "ÉDITION" en haut du stage pour rappeler le mode */
body.apt-edit-mode #stage::before {
  content: "✎ MODE ÉDITION";
  position: fixed;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(251, 191, 36, 0.9);
  color: #1a1a1a;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
  padding: 4px 12px;
  border-radius: 0 0 6px 6px;
  z-index: 9999;
  pointer-events: none;
}

/* Le topbar ne déborde pas sur les jauges (z-index ordonné) */
#needs-hud { z-index: 510; }
#topbar    { z-index: 500; }

/* Sur petits écrans, on diminue la réserve droite pour le HUD */
@media (max-width: 720px) {
  #scene-kitchen[data-active="true"],
  #scene-bed[data-active="true"] {
    padding: 50px 170px 12px 12px;
  }
}

/* Le bureau computer prend lui aussi tout l'écran (sans déduire le topbar) */
#scene-computer #desktop {
  height: 100vh;
}

/* Le bouton "Retour à l'appart" passe au-dessus de tout */
#scene-computer .btn-back {
  position: absolute;
  top: 50px;
  left: 12px;
  z-index: 600;
}

/* Bouton Reset accessible dans le topbar overlay */
#topbar .topbar-actions { pointer-events: auto; }

/* ----- Responsive ----- */
@media (max-width: 720px) {
  .window { min-width: 220px; min-height: 140px; }
  .window-titlebar { height: 24px; }
  .window-titlebar .win-title { font-size: 11px; }
  #scene-computer #desktop-icons {
    grid-template-columns: 72px 72px;
  }
  #scene-computer .desktop-icon { width: 72px; }
  .window.win-twitch .twitch-layout {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 180px;
  }
  .window.win-twitch .twitch-chat-pane {
    border-left: none;
    border-top: 1px solid #999;
  }
  .bank-head { grid-template-columns: 1fr; }
  #needs-hud { width: 150px; top: 50px; }
  #topbar { padding: .4rem .6rem; font-size: .9rem; }
}

@media (max-height: 600px) {
  #needs-hud { top: 50px; }
}