/* Mecanopolis : version compilée (minifiée) du jeu. */
/* Mecanopolis — direction artistique « tôle lithographiée » :
   aplats francs, contour encre, laiton et rouge signal sur sarcelle portuaire.
   Tout est confiné sous .mc-jeu : la page appartient au site MisterGames. */

.mc-jeu {
  --harbour: #173f4f;
  --brass: #d9a72e;
  --brass-dark: #8a6512;
  --signal: #c93a2c;
  --ink: #1f2e36;
  --verdigris: #5a9e89;
  --steel: #3e5966;
  --sky: #cadfd6;
  --pale: #eef2ec;
  --bg: #dce8e2;
  --surface: #f4f7f3;
  --text: var(--ink);
  --muted: #4a5f68;
  --line: #9db4ac;
  --focus: var(--signal);
  --display: 'Big Shoulders Display', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --body: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;

  /* Barre commune (css/games.css) aux couleurs du port */
  --mg-jeu-largeur: 1204px; /* barre de 1180 px + marges de 12 px */
  --mgb-fond: linear-gradient(120deg, #173f4f, #1f5566 55%, #2b5f55);
  --mgb-texte: var(--pale);
  --mgb-doux: #b9d3cb;
  --mgb-accent: var(--brass);
  --mgb-titre: var(--mg-degrade, linear-gradient(100deg, #ffb547, #ff4f9a 45%, #a891ff));
  --mgb-ombre: 0 4px 18px rgba(23, 63, 79, 0.25);
  --mg-bulle-fond: var(--ink);
  color: var(--text);
  font: 1rem/1.5 var(--body);
}

/* Neutralise les règles globales du site (police, marges, couleurs des éléments). */
.mc-jeu, .mc-jeu *, .mc-jeu *::before, .mc-jeu *::after { box-sizing: border-box; font-family: var(--body); }
.mc-jeu p { margin: 0; }
.mc-jeu b { color: inherit; }
.mc-jeu h2, .mc-jeu h3 { font-family: var(--display); font-weight: 800; line-height: 1.05; margin: 0; letter-spacing: 0.01em; color: var(--text); }
.mc-jeu ol, .mc-jeu ul { margin: 0; padding: 0; }
.mc-jeu ol li { margin: 0; }
.mc-jeu label { margin: 0; cursor: default; }
.mc-jeu fieldset, .mc-jeu legend { background: none; }
.mc-jeu kbd {
  display: inline-block; min-width: 1.6em; padding: 0 0.35em; border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 4px; background: #fff; color: var(--ink); font: 700 0.85em/1.5 var(--body); text-align: center;
}
.mc-jeu button { font: inherit; color: inherit; }
.mc-jeu :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.mc-jeu svg text { font-family: var(--display); }
.mc-jeu .fatal { padding: 2rem; max-width: 40ch; }

/* ---------- bandeau du jeu ---------- */
.mc-jeu .mg-barre { border-bottom: 3px solid var(--brass); }
.mc-jeu .mc-fil {
  flex: 1; min-width: 0; color: #b9d3cb; font: 600 1.25rem/1.1 var(--display); letter-spacing: 0.03em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mc-jeu .mg-barre-btn:hover:not(:disabled) { background: var(--brass); color: var(--ink); }

/* Même largeur que la barre (css/games.css), sauf en plein écran */
.mc-ecran {
  min-height: 420px;
  box-sizing: border-box;
  align-self: center;
  width: min(var(--mg-barre-largeur, 1180px), calc(100vw - 24px));
}
.mc-jeu.mc-fs > .mg-barre,
.mc-jeu.mc-fs .mc-ecran { align-self: stretch; width: auto; }

/* ---------- boutons : plaques de tôle embouties ---------- */
.mc-jeu .btn {
  font-family: var(--display); font-weight: 600; font-size: 1.15rem; letter-spacing: 0.02em; line-height: 1.2;
  padding: 0.35rem 0.9rem; min-height: 2.5rem; cursor: pointer; color: var(--ink);
  background: var(--surface); border: 2px solid var(--ink); border-radius: 4px;
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.18);
}
.mc-jeu .btn:hover:not(:disabled) { background: color-mix(in srgb, var(--surface) 80%, var(--brass)); }
.mc-jeu .btn:active:not(:disabled) { box-shadow: inset 0 2px 0 rgb(0 0 0 / 0.2); transform: translateY(1px); }
.mc-jeu .btn:disabled { opacity: 0.45; cursor: not-allowed; }
.mc-jeu .btn[hidden] { display: none; }
.mc-jeu .btn.primary { background: var(--brass); }
.mc-jeu .btn.primary:hover:not(:disabled) { background: #e7b843; }
.mc-jeu .btn.danger { background: var(--signal); color: #fff; }
.mc-jeu .btn.danger:hover:not(:disabled) { background: #b03024; }
.mc-jeu .btn.quiet { background: transparent; border-color: transparent; box-shadow: none; }
.mc-jeu .btn.quiet:hover:not(:disabled) { background: color-mix(in srgb, transparent 80%, var(--brass)); }
.mc-jeu .btn.run { min-width: 8.5rem; font-size: 1.45rem; font-weight: 800; }
.mc-jeu .btn.small { font-size: 0.95rem; min-height: 2rem; padding: 0.15rem 0.55rem; }

/* ---------- carte de la ville ---------- */
.map-body { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 12px; align-items: start; }
.map-wrap {
  position: relative; border-radius: 12px; overflow: hidden; background: #0a1e26;
  box-shadow: 0 0 0 3px #1b252a, 0 0 0 5px #b38a2a, 0 0 0 7px #1b252a, 0 18px 40px -14px rgba(5, 20, 26, 0.75);
  margin: 7px;
}
.city-map { display: block; width: 100%; height: auto; }
.city-map text { font-family: var(--display); }

/* Canaux et machinerie */
.map-waves path { fill: none; stroke: #6fb4c8; stroke-width: 0.12; opacity: 0.22; animation: mc-houle 5s linear infinite; }
@keyframes mc-houle { to { transform: translateX(-4px); } }
.map-gear { fill: #0f2a33; stroke: #24505f; stroke-width: 0.15; transform-box: fill-box; transform-origin: center; }
.map-gear.cw { animation: mc-tourne 60s linear infinite; }
.map-gear.ccw { animation: mc-tourne 45s linear infinite reverse; }

/* Plaques des quartiers */
.plate-shadow { fill: #02090c; opacity: 0.6; }
.plate-bevel { fill: none; stroke: rgba(255, 255, 255, 0.28); stroke-width: 0.9; stroke-linejoin: round; }
.plate-edge { fill: none; stroke: #0b1418; stroke-width: 0.35; stroke-linejoin: round; }
.plate-rivets circle { fill: rgba(255, 255, 255, 0.45); stroke: rgba(0, 0, 0, 0.55); stroke-width: 0.12; }
.plate-locked { pointer-events: none; }
.district .plate, .district .landmark { transition: filter 0.25s; }
.district.locked .plate, .district.locked .landmark { filter: saturate(0.25) brightness(0.62); }
.district.open { cursor: pointer; }
.district.open:hover .plate, .district.open:hover .landmark { filter: brightness(1.12); }
.district-current { fill: none; stroke: #ffc83d; stroke-width: 0.55; stroke-linejoin: round; pointer-events: none; animation: mc-veille 2.4s ease-in-out infinite; }
@keyframes mc-veille { 50% { stroke-opacity: 0.35; } }

/* Plaques gravées des noms */
.nameplate { pointer-events: none; }
.nameplate-back { stroke: #05090b; stroke-width: 0.2; }
.nameplate-rim { fill: none; stroke: #c99a2e; stroke-width: 0.14; }
.nameplate-screw { fill: #c99a2e; }
.nameplate-name { font-size: 2.3px; font-weight: 800; letter-spacing: 0.18px; fill: #f2c14e; }
.nameplate-sub { font-size: 1.55px; font-weight: 600; letter-spacing: 0.08px; fill: #9fb2be; }
.nameplate.locked .nameplate-name { fill: #a7b0b3; }
.nameplate.locked .nameplate-sub { fill: #f2c14e; text-transform: uppercase; }

/* Monuments (gravés dans la plaque) */
.lm-dark { fill: rgba(10, 16, 20, 0.5); }
.lm-stroke { fill: none; stroke: rgba(10, 16, 20, 0.72); stroke-width: 0.7; stroke-linecap: round; stroke-linejoin: round; }
.lm-thin { fill: none; stroke: rgba(10, 16, 20, 0.6); stroke-width: 0.15; }
.lm-window { fill: #ffd27a; opacity: 0.75; }
.lm-band { fill: #e9c46a; opacity: 0.7; }
.lm-cargo { fill: #c93a2c; stroke: rgba(0, 0, 0, 0.5); stroke-width: 0.1; }
.lm-container { stroke: rgba(0, 0, 0, 0.45); stroke-width: 0.1; }
.lm-container.a { fill: #c93a2c; }
.lm-container.b { fill: #2f6f8f; }
.lm-container.c { fill: #e3a72f; }
.lm-pipe-deco { fill: none; stroke: rgba(10, 16, 20, 0.45); stroke-width: 0.6; }
.smoke circle { transform-box: fill-box; transform-origin: center; animation: mc-fumee 6s linear infinite; opacity: 0; }
@keyframes mc-fumee {
  0% { transform: translate(0, 0) scale(0.4); opacity: 0; }
  12% { opacity: 0.85; }
  100% { transform: translate(3.2px, -6px) scale(2.1); opacity: 0; }
}
.lm-gear { fill: rgba(70, 45, 5, 0.55); transform-box: fill-box; transform-origin: center; }
.lm-gear.cw { animation: mc-tourne 12s linear infinite; }
.lm-gear.ccw { animation: mc-tourne 8s linear infinite reverse; }
.lm-clock-rim { stroke: #5c3f08; stroke-width: 0.2; }
.lm-clock-face { fill: #f8f1de; stroke: #8a6512; stroke-width: 0.12; }
.lm-ticks { stroke: #3a2a0a; stroke-width: 0.2; }
.lm-hand { stroke: #1f2e36; stroke-linecap: round; animation-name: mc-tourne; animation-timing-function: linear; animation-iteration-count: infinite; }
.lm-hand.seconds { stroke: #c93a2c; animation-timing-function: steps(60); }
.lm-glass { stroke: rgba(220, 235, 245, 0.35); stroke-width: 0.12; }
.lm-sleepers { stroke: rgba(10, 16, 20, 0.45); stroke-width: 0.35; }
.lm-rail { fill: none; stroke: #c4ced3; stroke-width: 0.25; opacity: 0.85; }
.lm-train { animation: mc-train 18s linear infinite; }
@keyframes mc-train { from { transform: translateX(30px); } to { transform: translateX(112px); } }
.lm-loco { fill: #c93a2c; stroke: #1b1f22; stroke-width: 0.15; }
.lm-wagon { fill: #2f3b42; stroke: #1b1f22; stroke-width: 0.15; }
.lm-wheel { fill: #14191c; stroke: #8fa3ad; stroke-width: 0.12; }
.lm-airship { animation: mc-dirigeable 40s linear infinite; }
@keyframes mc-dirigeable { from { transform: translateX(30px); } to { transform: translateX(104px); } }
.lm-envelope { fill: #d9c9a8; stroke: #5b4a2c; stroke-width: 0.15; }
.lm-envelope-rib { fill: none; stroke: #8f7a52; stroke-width: 0.1; }

/* Conduites et passerelles */
.pipe { pointer-events: none; }
.pipe polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pipe-shell { stroke: #0b1418; stroke-width: 1.25; }
.pipe-core { stroke: #56666d; stroke-width: 0.75; }
.pipe-flow { stroke: transparent; stroke-width: 0.3; }
.pipe.lit .pipe-core { stroke: #b8862a; }
.pipe.lit .pipe-flow { stroke: #ffe08a; stroke-dasharray: 0.5 1.1; animation: mc-flux 1.4s linear infinite; }
@keyframes mc-flux { to { stroke-dashoffset: -1.6; } }
.bridge .pipe-shell { stroke-width: 1.7; }
.bridge .pipe-core { stroke-width: 1.1; }
.flange { fill: #8a989f; stroke: #0b1418; stroke-width: 0.15; }
.bridge.lit .flange { fill: #d9a72e; }

/* Niveaux : têtes de boulon à voyant */
.node { cursor: pointer; }
.node-glow { opacity: 0; pointer-events: none; }
.node-shadow { fill: #02090c; opacity: 0.55; }
.node-bolt { stroke: #0b1418; stroke-width: 0.25; }
.node-lamp { stroke: #0b1418; stroke-width: 0.2; }
.node-shine { fill: #fff; opacity: 0.55; pointer-events: none; }
.node-num { font-size: 2.1px; font-weight: 800; fill: #1b1f22; pointer-events: none; }
.node.locked { cursor: not-allowed; }
.node.locked .node-num { fill: #7d8a90; }
.node.locked .node-shine { opacity: 0.15; }
.node.done .node-glow { opacity: 0.55; }
.node.current .node-glow { animation: mc-lueur 1.8s ease-in-out infinite; }
@keyframes mc-lueur { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
.node:hover:not(.locked) .node-bolt, .node:focus-visible .node-bolt { stroke: #ffe08a; stroke-width: 0.45; }
.node:hover:not(.locked) .node-glow, .node:focus-visible .node-glow { opacity: 1; }
.node:focus-visible { outline: none; }

/* Rose des vents, cadre */
.map-compass, .map-frame { pointer-events: none; }
.compass-ring { fill: rgba(10, 30, 38, 0.7); stroke: #b38a2a; stroke-width: 0.2; }
.compass-n { fill: #c93a2c; }
.compass-s { fill: #c4ced3; }
.compass-label { font-size: 1.6px; font-weight: 800; fill: #f2c14e; }
.frame-outer { fill: none; stroke: #b38a2a; stroke-width: 0.7; }
.frame-inner { fill: none; stroke: rgba(0, 0, 0, 0.6); stroke-width: 0.25; }
.frame-bolt { stroke: #3a2a0a; stroke-width: 0.12; }
.levels { background: var(--surface); border: 2px solid var(--line); border-radius: 10px; padding: 0.9rem 1rem; }
.mc-jeu .levels-total { color: var(--muted); margin-bottom: 0.6rem; }
.mc-jeu .levels-total b { font: 800 1.5rem var(--display); color: var(--brass-dark); }
.level-list, .level-list ol { list-style: none; }
.level-list > li + li { margin-top: 0.35rem; }
.level-list > li.workshop { margin-top: 0.9rem; }
.mc-jeu .level-list h3 { font-size: 1.5rem; margin-bottom: 0.3rem; display: flex; align-items: baseline; gap: 0.5rem; }
.mc-jeu .district-section h3 { margin: 0; font-size: inherit; }
.mc-jeu .district-toggle {
  display: flex; align-items: baseline; gap: 0.5rem; width: 100%; padding: 0.3rem 0.1rem; border: 0; border-radius: 4px;
  background: none; cursor: pointer; text-align: left; color: var(--text);
}
.mc-jeu .district-toggle:hover { background: color-mix(in srgb, transparent 85%, var(--brass)); }
.district-title { font: 800 1.5rem/1.05 var(--display); }
.district-toggle::before {
  content: ""; align-self: center; width: 0.45rem; height: 0.45rem; margin: 0 0.15rem 0 0.2rem;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform 0.15s;
}
.district-section.open .district-toggle::before { transform: rotate(45deg); }
.district-section ol[hidden] { display: none; }
.district-count { margin-left: auto; font: 700 0.9rem var(--body); color: var(--muted); }
/* Zone actuelle : quartier et niveau de l'énigme en attente */
.district-section.current .district-toggle { background: color-mix(in srgb, transparent 82%, var(--brass)); }
.district-here {
  align-self: center; padding: 0.05rem 0.45rem; border-radius: 99px; background: var(--brass); color: var(--ink);
  font: 700 0.72rem/1.5 var(--body); text-transform: uppercase; letter-spacing: 0.06em;
}
.mc-jeu .level-link.current .level-name { font-weight: 700; }
.mc-jeu .level-link.current .level-state { color: var(--brass-dark); font-weight: 700; }
.level-list ol { counter-reset: lvl; }
.mc-jeu .level-link {
  counter-increment: lvl; display: flex; gap: 0.5rem; width: 100%; text-align: left; align-items: baseline;
  background: none; border: 0; border-top: 1px solid var(--line); padding: 0.4rem 0.1rem; cursor: pointer; color: var(--text);
}
.level-link::before { content: counter(lvl); font: 800 1.2rem var(--display); color: var(--brass-dark); min-width: 1.1rem; }
.mc-jeu .level-link:disabled { color: var(--muted); cursor: not-allowed; }
.level-link:hover:not(:disabled) .level-name { text-decoration: underline; text-decoration-thickness: 2px; }
.level-state { margin-left: auto; font-size: 0.85rem; color: var(--muted); }
.level-link:not(:disabled) .level-state { color: var(--verdigris); font-weight: 700; }

/* ---------- écran de niveau ---------- */
.level-screen { display: grid; gap: 8px; }
.mc-jeu .bar { display: flex; align-items: center; gap: 0.75rem; }
.bar .title { flex: 1; min-width: 0; }
.mc-jeu .where { font-size: 0.9rem; color: var(--muted); }
.mc-jeu .bar h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
.play { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 10px; align-items: start; }
.stage-wrap { position: relative; border: 3px solid var(--ink); border-radius: 8px; overflow: hidden; background: var(--sky); }
.stage { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; touch-action: none; user-select: none; -webkit-user-select: none; }
.toolbox { background: var(--surface); border: 2px solid var(--line); border-radius: 8px; padding: 0.75rem; }
.mc-jeu .toolbox h3 { font-size: 1.35rem; margin-bottom: 0.5rem; }
.inventory { list-style: none; display: grid; gap: 0.4rem; }
.mc-jeu .part {
  display: grid; grid-template-columns: 3.4rem 1fr auto; align-items: center; gap: 0.5rem; width: 100%; color: var(--text);
  padding: 0.3rem 0.5rem; background: var(--bg); border: 2px solid var(--line); border-radius: 4px; cursor: pointer; text-align: left;
}
.mc-jeu .part:hover:not(:disabled) { border-color: var(--brass); }
.mc-jeu .part.active { border-color: var(--ink); background: var(--brass); }
.mc-jeu .part:disabled { opacity: 0.45; cursor: not-allowed; }
.part-icon { width: 3.4rem; height: 1.7rem; overflow: visible; }
.part .name { font-weight: 700; }
.part .count { font: 800 1.2rem var(--display); }
.selection { display: flex; gap: 0.35rem; margin-top: 0.75rem; flex-wrap: wrap; }
.selection[hidden] { display: none; }
.mc-jeu .keys { margin-top: 0.75rem; font-size: 0.85rem; color: var(--muted); line-height: 1.7; }
.controls { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.brief { flex: 1 1 22rem; max-width: 70ch; }
.mc-jeu .status { margin-top: 0.25rem; min-height: 1.5em; font-weight: 700; }
.status[data-tone="warn"] { color: var(--signal); }
.actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.overlay { position: absolute; inset: 0; display: grid; place-items: start center; background: rgb(23 63 79 / 0.25); padding: 6% 1rem 1rem; }
.overlay[hidden] { display: none; }
.card {
  background: var(--pale); color: var(--ink); border: 3px solid var(--ink); border-radius: 6px; padding: 1.25rem 1.5rem;
  max-width: 28rem; box-shadow: 6px 6px 0 var(--signal); animation: mc-apparition 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mc-jeu .card-title { font: 800 2.3rem/1.05 var(--display); }
.mc-jeu .card p:not(.card-title) { margin: 0.4rem 0 1rem; }
.mc-jeu .card .btn { background: #fff; }
.mc-jeu .card .btn.primary { background: var(--brass); }

/* ---------- scène SVG (unités monde) ---------- */
.sky { fill: var(--sky); }
.sun { fill: #f2d58a; }
.far { fill: none; stroke: #a8c8bd; stroke-width: 0.14; stroke-linecap: square; }
.far-thin { fill: none; stroke: #a8c8bd; stroke-width: 0.05; }
.far-fill, .far-solid { fill: #aecdc2; }
.theme-usine .sky { fill: #ecdfcd; }
.theme-usine .far-fill { fill: #d8c4aa; }
.theme-usine .far-solid { fill: #c9b095; }
.theme-usine .window { fill: #ecdfcd; }
.theme-usine .smoke { fill: none; stroke: #fffaf2; stroke-width: 0.22; stroke-linecap: round; opacity: 0.8; }
.theme-gare .sky { fill: #dbe2ea; }
.theme-gare .far, .theme-gare .far-thin { stroke: #b6c3cf; }
.theme-gare .far-fill { fill: #c6cfd8; }
.theme-gare .far-clock { fill: #f2f5f8; stroke: #b6c3cf; stroke-width: 0.1; }
.theme-toits .sky { fill: #d3e6f1; }
.theme-toits .far-fill { fill: #b9cbd6; }
.theme-toits .far-solid { fill: #a9bcc8; }
.theme-toits .far-thin { stroke: #a9bcc8; }
.theme-toits .balloon { fill: #ebc0b2; stroke: #d3a291; stroke-width: 0.05; }
.theme-horlogerie .sky { fill: #f1e6c9; }
.theme-horlogerie .far-clock { fill: #f8f1de; stroke: #dccb9f; stroke-width: 0.12; }
.theme-horlogerie .far-thin { stroke: #cdb684; stroke-width: 0.08; }
.theme-horlogerie .far-gear { fill: none; stroke: #e0cfa4; stroke-width: 0.3; }
.theme-horlogerie .far-teeth { stroke: #e0cfa4; stroke-width: 0.28; }
.build-area { fill: rgb(217 167 46 / 0.12); stroke: var(--brass-dark); stroke-width: 0.035; stroke-dasharray: 0.22 0.14; }
.running .build-area { display: none; }
.goal-zone { fill: rgb(201 58 44 / 0.12); stroke: var(--signal); stroke-width: 0.04; stroke-dasharray: 0.3 0.15; }
.goal-flag { fill: var(--signal); stroke: var(--ink); stroke-width: 0.04; stroke-linejoin: round; }
.goal-progress { fill: var(--signal); }
.steel { fill: var(--steel); stroke: var(--ink); stroke-width: 0.04; }
.rivet { fill: #a9bec5; }
.girder { fill: var(--brass); stroke: var(--ink); stroke-width: 0.04; }
.truss { fill: none; stroke: var(--brass-dark); stroke-width: 0.035; }
.art-spring .base { fill: var(--ink); }
.art-spring .coil { fill: none; stroke: #59656b; stroke-width: 0.06; stroke-linejoin: round; }
.art-spring .plate { fill: var(--signal); stroke: var(--ink); stroke-width: 0.03; }
.art-spring .arrow { fill: var(--signal); opacity: 0.55; }
.running .art-spring .arrow { display: none; }
.art-crate .wood { fill: #bb7a40; stroke: var(--ink); stroke-width: 0.04; }
.art-crate .brace, .art-crate .frame { fill: none; stroke: #7a4a22; stroke-width: 0.06; }
.art-ball .paint { fill: var(--signal); stroke: var(--ink); stroke-width: 0.035; }
.art-ball .band { fill: none; stroke: var(--pale); stroke-width: 0.06; }
.art-ball .shine { fill: #fff; opacity: 0.7; }
.art-weight .iron { fill: #2b3236; stroke: var(--ink); stroke-width: 0.04; }
.art-weight .seam { fill: none; stroke: #66737a; stroke-width: 0.04; }
.art-barrel .wood { fill: #9c5a2c; stroke: var(--ink); stroke-width: 0.04; }
.art-barrel .stave { stroke: #6e3b17; stroke-width: 0.03; }
.art-barrel .hoop { fill: none; stroke: var(--brass); stroke-width: 0.07; }
.art-barrel .bung { fill: #3a2a1a; }
.art-seesaw .plank { fill: #c58a4a; stroke: var(--ink); stroke-width: 0.035; }
.art-seesaw .grain { stroke: #8a5a2a; stroke-width: 0.025; }
.art-pivot { fill: var(--steel); stroke: var(--ink); stroke-width: 0.04; stroke-linejoin: round; }
.art-conveyor .belt { fill: #2b3236; stroke: var(--ink); stroke-width: 0.04; }
.art-conveyor .flow { stroke: #77858c; stroke-width: 0.05; stroke-dasharray: 0.2 0.2; }
.running .art-conveyor .flow { animation: mc-defile 0.13s linear infinite; }
.art-conveyor .roller { fill: #a9bec5; stroke: var(--ink); stroke-width: 0.03; }
.art-conveyor .chevron { fill: none; stroke: var(--brass); stroke-width: 0.06; stroke-linecap: round; stroke-linejoin: round; }
.art-wagon .tub { fill: var(--signal); stroke: var(--ink); stroke-width: 0.04; stroke-linejoin: round; }
.art-wagon .trim { stroke: var(--brass); stroke-width: 0.05; }
.art-wagon .wheel { fill: #2b3236; stroke: var(--ink); stroke-width: 0.03; }
.art-wagon .hub { fill: #a9bec5; }
.art-fan .housing { fill: var(--steel); stroke: var(--ink); stroke-width: 0.04; }
.art-fan .grille { fill: #cfe0e6; stroke: var(--ink); stroke-width: 0.03; }
.art-fan .blade { fill: var(--brass); stroke: var(--ink); stroke-width: 0.02; }
.running .art-fan .blades { animation: mc-tourne 0.3s linear infinite; }
.art-fan .wind { pointer-events: none; }
.art-fan .wind-zone { fill: rgb(255 255 255 / 0.2); stroke: #7fb0c2; stroke-width: 0.03; stroke-dasharray: 0.15 0.12; }
.art-fan .wind-line { stroke: #ffffff; stroke-width: 0.04; stroke-dasharray: 0.35 0.45; opacity: 0.7; }
.running .art-fan .wind-line { animation: mc-souffle 0.3s linear infinite; }
.art-rotor .sweep { fill: rgb(217 167 46 / 0.1); stroke: var(--brass-dark); stroke-width: 0.03; stroke-dasharray: 0.15 0.1; }
.running .art-rotor .sweep { fill: none; stroke: none; }
.art-rotor .paddle { fill: var(--brass); stroke: var(--ink); stroke-width: 0.035; }
.art-rotor .gear { fill: var(--steel); stroke: var(--ink); stroke-width: 0.04; }
.art-rotor .teeth { stroke: var(--ink); stroke-width: 0.09; }
.part-icon .art-rotor .sweep { display: none; }
.placed { cursor: grab; }
.placed:active { cursor: grabbing; }
.placed.selected > g > :first-child { stroke: var(--signal); stroke-width: 0.09; }
.placed.invalid { opacity: 0.6; }
.placed.invalid > g > :first-child { stroke: var(--signal); stroke-width: 0.07; stroke-dasharray: 0.12 0.08; }
.ghost { opacity: 0.55; pointer-events: none; }
.ghost.invalid > g > :first-child { fill: var(--signal); }
.layer-ghost, .layer-goal, .layer-area { pointer-events: none; }
.layer-objects { pointer-events: none; }
.editing .layer-objects { pointer-events: auto; }
.editing .build-area { stroke-width: 0.05; }

@keyframes mc-defile { to { stroke-dashoffset: -0.4; } }
@keyframes mc-souffle { to { stroke-dashoffset: -0.8; } }
@keyframes mc-tourne { to { transform: rotate(360deg); } }
@keyframes mc-apparition { from { opacity: 0; transform: scale(0.92) translateY(10px); } }
@keyframes mc-fondu { from { opacity: 0; } }

/* ---------- atelier ---------- */
.mc-jeu .name-input {
  font: 800 clamp(1.5rem, 3.5vw, 2.3rem) / 1.05 var(--display); color: var(--text); background: transparent;
  border: 0; border-bottom: 2px dashed var(--line); width: 100%; padding: 0; margin: 0;
}
.mc-jeu .name-input:focus { border-bottom-color: var(--brass); outline: none; }
.palette { grid-template-columns: 1fr 1fr; }
.mc-jeu .palette .part { grid-template-columns: 2.2rem 1fr; padding: 0.2rem 0.35rem; font-size: 0.9rem; min-width: 0; }
.palette .part-icon { width: 2.2rem; height: 1.1rem; }
.palette .part .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zone-tools { display: grid; gap: 0.35rem; margin-top: 0.6rem; }
.mc-jeu .zone-tools .btn { font-size: 1rem; }
.mc-jeu .zone-tools .btn.active { background: var(--brass); }
.props:not(:empty) { margin-top: 0.75rem; border-top: 2px solid var(--line); padding-top: 0.6rem; }
.mc-jeu .props h3 { font-size: 1.2rem; }
.prop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 0.5rem; margin: 0.4rem 0 0.6rem; }
.mc-jeu .prop-grid label, .mc-jeu .settings label { display: grid; gap: 0.1rem; font-size: 0.85rem; color: var(--muted); }
.mc-jeu input[type="number"], .mc-jeu textarea {
  font: 1rem/1.4 var(--body); color: var(--text); background: var(--bg); border: 2px solid var(--line); border-radius: 4px;
  padding: 0.2rem 0.35rem; width: 100%; height: auto; margin: 0;
}
.editor-controls { align-items: stretch; }
.settings { flex: 2 1 30rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.6rem; }
.settings .wide { grid-column: 1 / -1; }
.mc-jeu .settings fieldset {
  border: 2px solid var(--line); border-radius: 6px; margin: 0; padding: 0.4rem 0.6rem 0.6rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 0.5rem; align-items: end; align-content: start;
}
.mc-jeu .settings legend { font: 700 1.05rem var(--display); padding: 0 0.25rem; color: var(--text); border: 0; border-radius: 0; }
.editor-controls .brief { flex: 1 1 18rem; display: flex; flex-direction: column; gap: 0.35rem; }
.editor-controls .actions { margin-top: auto; justify-content: flex-end; }
.mc-jeu .solution-state { font-size: 0.95rem; }
.solution-state[data-tone="ok"] { color: #2f7a62; font-weight: 700; }
.solution-state[data-tone="warn"], .mc-jeu .errors { color: var(--signal); }
.mc-jeu .errors { padding-left: 1.1rem; font-size: 0.9rem; list-style: disc; }
.errors:empty { display: none; }
.wide-card { max-width: 40rem; width: 100%; }
.mc-jeu .json { font: 0.8rem/1.4 ui-monospace, Menlo, Consolas, monospace; background: #fff; color: var(--ink); margin: 0.5rem 0; }
.mc-jeu .file { display: block; font-size: 0.9rem; margin-bottom: 0.5rem; }
.workshop .btn { margin-top: 0.5rem; }
.custom-list { list-style: none; }
.custom-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; border-top: 1px solid var(--line); padding: 0.4rem 0; }
.custom-list .level-name { flex: 1 1 8rem; }
.custom-actions { display: flex; gap: 0.25rem; }
.mc-jeu .muted { color: var(--muted); font-size: 0.95rem; }
.editor-screen .overlay { position: fixed; z-index: 2500; place-items: center; overflow: auto; }
.editor-screen .play { grid-template-columns: minmax(0, 1fr) 19rem; }
.editor-screen .layer-placed { opacity: 0.75; pointer-events: none; }

/* ---------- fenêtres (règles, confirmation) ---------- */
.mc-modal {
  position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(15, 40, 50, 0.55); backdrop-filter: blur(3px); animation: mc-fondu 0.2s ease;
}
.mc-modal[hidden] { display: none; }
.mc-modal-box {
  width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 24px 28px 22px;
  background: var(--pale); color: var(--ink); border: 3px solid var(--ink); border-radius: 10px;
  box-shadow: 8px 8px 0 var(--signal); animation: mc-apparition 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mc-modal-titre { font: 800 2.2rem/1.05 var(--display); color: var(--ink); }
.mc-jeu .mc-modal-sous { margin: 2px 0 12px; color: var(--muted); font-weight: 700; }
.mc-jeu .mc-modal-box p { margin: 10px 0; line-height: 1.5; }
.mc-jeu .mc-etapes { counter-reset: etape; list-style: none; display: grid; gap: 8px; }
.mc-jeu .mc-etapes li { counter-increment: etape; position: relative; padding-left: 2.2rem; }
.mc-etapes li::before {
  content: counter(etape); position: absolute; left: 0; top: 0; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--brass); border: 2px solid var(--ink); font: 800 1rem var(--display);
}
.mc-jeu .mc-pieces { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 8px 0 12px; }
.mc-pieces li { display: grid; grid-template-columns: 3.2rem 1fr; gap: 8px; align-items: center; font-size: 0.88rem; line-height: 1.3; }
.mc-pieces li b { display: block; font: 700 1.05rem var(--display); }
.mc-pieces .part-icon { width: 3.2rem; height: 1.6rem; }
.mc-raccourcis { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.85rem; color: var(--muted); }
.mc-modal-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.mc-confirm { width: min(440px, 100%); }
/* Règles : assez large pour la liste des pièces sur trois colonnes */
.mc-regles-box { width: min(860px, 100%); }
@media (min-width: 861px) { .mc-jeu .mc-regles-box .mc-pieces { grid-template-columns: repeat(3, 1fr); } }
.mc-confirm .mc-modal-titre { font-size: 1.9rem; }

/* ---------- infobulle (attribut data-bulle) ----------
   Celle de la barre commune (js/tools.js) est affichée : celle de game.js reste cachée */
.mc-jeu .mc-bulle { display: none !important; }
.mc-bulle {
  position: fixed; z-index: 4000; max-width: min(280px, calc(100vw - 16px)); padding: 6px 11px; border-radius: 8px;
  background: var(--ink); color: #fff; font-size: 0.85rem; font-weight: 500; line-height: 1.3; pointer-events: none;
  box-shadow: 0 6px 18px rgba(15, 40, 50, 0.3); opacity: 0; transform: translateY(-3px); transition: opacity 0.15s, transform 0.15s;
}
.mc-bulle.dessus { transform: translateY(3px); }
.mc-bulle.visible { opacity: 1; transform: none; }
.mc-bulle[hidden] { display: none; }
.mc-bulle::before {
  content: ""; position: absolute; top: -5px; left: var(--pointe, 50%); width: 10px; height: 10px; margin-left: -5px;
  border-radius: 2px; background: inherit; transform: rotate(45deg);
}
.mc-bulle.dessus::before { top: auto; bottom: -5px; }

/* ---------- messages éphémères ---------- */
.mc-toasts { position: fixed; left: 50%; bottom: 60px; z-index: 3500; transform: translateX(-50%); display: grid; gap: 6px; pointer-events: none; }
.mc-toast {
  padding: 8px 16px; border-radius: 8px; background: var(--ink); color: var(--pale); font-weight: 700;
  box-shadow: 0 6px 18px rgba(15, 40, 50, 0.3); animation: mc-apparition 0.25s ease; transition: opacity 0.3s, transform 0.3s;
}
.mc-toast.sort { opacity: 0; transform: translateY(6px); }

/* ---------- plein écran ---------- */
.mc-jeu.mc-fs {
  position: fixed; inset: 0; z-index: 2000; max-width: none; margin: 0; padding: 10px; overflow: auto; background: #cfdcd6;
}
/* Hors plein écran, la scène se règle sur la hauteur de la fenêtre pour que
   bandeau du site + barre du jeu + scène + commandes tiennent sans défiler. */
.level-screen:not(.editor-screen) .play { grid-template-columns: minmax(0, max(30rem, calc((100vh - 22.5rem) * 1.6))) 15rem; justify-content: center; }
.map-body { grid-template-columns: minmax(0, max(30rem, calc((100vh - 14rem) * 1.61))) 18rem; justify-content: center; }
.mc-jeu.mc-fs .play { grid-template-columns: minmax(0, calc((100vh - 13rem) * 1.6)) 15rem; justify-content: center; }
.mc-jeu.mc-fs .editor-screen .play { grid-template-columns: minmax(0, calc((100vh - 17rem) * 1.6)) 19rem; }
.mc-jeu.mc-fs .map-body { grid-template-columns: minmax(0, calc((100vh - 6.5rem) * 1.61)) 18rem; justify-content: center; }
body.mc-noscroll { overflow: hidden; }

/* Le pied de page du site est fixe : inutile de garder 60 px de vide sous le jeu */
body:has(#mc-jeu) { padding-bottom: 34px; }

/* ---------- petits écrans ---------- */
@media (max-width: 860px) {
  .map-body, .play, .editor-screen .play, .level-screen:not(.editor-screen) .play, .mc-jeu.mc-fs .play, .mc-jeu.mc-fs .map-body, .mc-jeu.mc-fs .editor-screen .play { grid-template-columns: 1fr; }
  .inventory { grid-auto-flow: column; grid-auto-columns: minmax(9.5rem, 1fr); overflow-x: auto; padding-bottom: 0.25rem; }
  .palette { grid-auto-flow: row; overflow: visible; }
  .mc-jeu .keys { display: none; }
  .mc-jeu .btn.run { flex: 1 0 100%; }
  .mc-jeu .mc-pieces { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .mc-jeu { padding: 0; }
  .mc-barre { padding: 6px 8px 6px 12px; gap: 8px; }
  .mc-titre { font-size: 1.3em; padding-right: 10px; }
  .mc-jeu .mc-fil { font-size: 1rem; }
  .mc-icon-btn { width: 34px; height: 34px; }
  .mc-modal-box { padding: 18px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-jeu .btn:active:not(:disabled) { transform: none; }
  .mc-jeu *, .mc-bulle { animation: none !important; transition: none !important; }
}