*{box-sizing:border-box}
:root{
  --bg:#0b0f13;--panel:#1a2129;--panel2:#242d37;--edge:#536170;
  --text:#eef5fb;--muted:#aebbc7;--accent:#62dff8;--ok:#7ef29a;
  --warn:#ffd16b;--copper:#c88749;--danger:#ff6b74
}
body{
  margin:0;min-height:100vh;padding:14px;color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:radial-gradient(circle at 50% 0,#2f3944 0,#151b21 38%,#080b0e 100%);
}
button{font:inherit}
.shell{width:min(1050px,100%);margin:auto}
.hero{
  border:2px solid #5a6875;border-radius:22px;padding:18px;
  background:linear-gradient(145deg,#2c3540,#171d24 58%,#11161b);
  box-shadow:0 18px 45px #0008;
}
.hero-top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start}
h1{margin:0;font-size:clamp(1.45rem,4vw,2.5rem);letter-spacing:.05em}
.kicker{color:var(--muted);margin-top:5px}
.progress-box{min-width:min(270px,100%);background:#0c1116;border:1px solid #4a5662;border-radius:12px;padding:10px}
.progress-line{display:flex;justify-content:space-between;gap:10px;font-size:.9rem}
.progress-track{height:13px;background:#202832;border-radius:99px;overflow:hidden;margin-top:8px}
.progress-fill{height:100%;width:0;background:linear-gradient(90deg,#31bdf1,#75f6ce);transition:width .3s}
.hub{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px
}
.module-card{
  border:1px solid #4b5966;background:#141a20;border-radius:14px;padding:12px;
  min-width:0;position:relative
}
.module-card.done{border-color:#4ea76c;background:#13221a}
.module-card h3{margin:0 0 5px;font-size:1rem}
.module-card p{margin:0 0 10px;color:var(--muted);font-size:.86rem;line-height:1.35}
.module-card button,.btn{
  border:1px solid #627181;background:#26323d;color:#fff;border-radius:10px;
  padding:9px 12px;cursor:pointer;font-weight:700
}
.module-card button:hover,.btn:hover{background:#34424f}
.badge{position:absolute;right:9px;top:9px;font-size:.78rem;color:var(--ok);font-weight:800}
.stage{
  margin-top:14px;border:2px solid #52606e;border-radius:18px;
  background:#151b21;padding:16px;display:none
}
.stage.active{display:block}
.stage-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:12px}
.stage h2{margin:0;font-size:clamp(1.15rem,3vw,1.7rem)}
.stage .desc{color:var(--muted);margin-top:5px;max-width:720px}
.gamebox{border:1px solid #44515d;border-radius:14px;padding:14px;background:#0e1318}
.status{min-height:28px;margin-top:12px;text-align:center;font-weight:800}
.status.ok{color:var(--ok)}
.status.bad{color:var(--danger)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center}
.small{font-size:.85rem;color:var(--muted)}
.gamebox > .small{
  position:relative;
  display:block;
  max-width:780px;
  margin:0 auto 14px;
  padding:10px 13px 11px 15px;
  border:1px solid #4b6070;
  border-left:3px solid var(--accent);
  border-radius:11px;
  background:linear-gradient(145deg,#182832,#101920);
  color:#e4edf2;
  font-size:.9rem;
  line-height:1.45;
  text-align:left !important;
  overflow-wrap:anywhere;
}
.gamebox > .small::before{
  content:'CONSIGNE';
  display:block;
  margin-bottom:3px;
  color:var(--accent);
  font-size:.57rem;
  font-weight:900;
  letter-spacing:.14em;
}
.gamebox > .small b{color:var(--warn);white-space:nowrap}
footer{padding:14px 0;color:#92a0ad;text-align:center;font-size:.8rem}
.rot-wrap{display:grid;grid-template-columns:62px minmax(0,480px) 62px;gap:7px;align-items:center;justify-content:center}
.rot-side{text-align:center;font-size:.67rem;font-weight:800}
.rot-orb{width:46px;height:46px;margin:auto auto 5px;border-radius:50%;display:grid;place-items:center;background:#182028;border:2px solid #60707e;font-size:1.25rem}
.rot-grid{display:grid;gap:4px;padding:7px;border:2px solid #536170;border-radius:12px;background:#0b1014;aspect-ratio:1}
.g7{grid-template-columns:repeat(7,1fr)}


/* mécanisme 6 — serrure à combinaison */
.code-lock-explain{
  max-width:760px;margin:0 auto 14px;padding:11px 14px;border:1px solid #4b6070;
  border-radius:12px;background:#18232d;color:#dbe7ee;line-height:1.45;text-align:center
}
.code-dials{
  display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:16px auto 14px
}
.code-wheel{
  width:82px;height:102px;border:2px solid #647789;border-radius:14px;padding:8px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:linear-gradient(145deg,#334351,#17212a);color:#fff;cursor:pointer;
  box-shadow:inset 0 0 18px #0008,0 5px 12px #0005;transition:transform .15s,border-color .15s,box-shadow .15s
}
.code-wheel:hover{transform:translateY(-2px);border-color:#72e7ff}
.code-wheel.empty{border-style:dashed;color:#a7b8c5}
.code-wheel-position{font-size:.72rem;color:#9eb3c2;font-weight:800}
.code-wheel-value{font-size:2.2rem;line-height:1;font-weight:900;color:#f1c678}
.code-wheel.empty .code-wheel-value{color:#8da1af}
.code-wheel-help{font-size:.62rem;color:#aebbc7;text-transform:uppercase;letter-spacing:.06em}
.code-dials.solved .code-wheel{border-color:#7ef29a;background:linear-gradient(145deg,#2d6748,#11261b);box-shadow:0 0 18px #7ef29a66}
.code-clues-title{margin:16px 0 8px;text-align:center;color:#f0c98b;font-weight:900}
.code-clues{display:grid;gap:8px;max-width:680px;margin:0 auto}
.code-clue{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 11px;border:1px solid #40515f;border-radius:10px;background:#141d24
}
.code-guess{display:flex;gap:5px;flex:none}
.code-clue-number{
  width:32px;height:32px;border-radius:8px;display:grid;place-items:center;
  background:#2d3c49;border:1px solid #6a7c8a;color:#fff;font-weight:900
}
.code-feedback{display:flex;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.code-badge{
  display:inline-flex;align-items:center;gap:4px;border-radius:99px;padding:4px 8px;
  font-size:.72rem;font-weight:800;white-space:nowrap
}
.code-badge.exact{background:#173d2b;color:#8ff0ae;border:1px solid #3e9760}
.code-badge.misplaced{background:#48361b;color:#ffd778;border:1px solid #a67c37}
.code-legend{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.code-legend .code-badge{font-size:.7rem}
@media(max-width:520px){
  .code-wheel{width:68px;height:92px}
  .code-clue{align-items:flex-start;flex-direction:column}
  .code-feedback{justify-content:flex-start}
}
.g7{grid-template-columns:repeat(7,1fr)}
.tower-rules{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:12px auto 14px}
.tower-rules span{padding:6px 9px;border:1px solid #596b76;border-radius:8px;background:#111a20;color:#dbe7ee;font-size:.78rem}
.tower-meta{display:flex;justify-content:space-between;gap:12px;max-width:650px;margin:0 auto 8px;color:#aebbc7;font-size:.85rem;font-weight:800}
.tower-board{display:flex;justify-content:center;align-items:flex-end;gap:clamp(8px,3vw,24px);max-width:720px;margin:10px auto 14px}
.tower-peg{position:relative;flex:1 1 0;width:30%;max-width:180px;min-width:92px;height:250px;padding:0;border:2px solid #536675;border-radius:14px;background:linear-gradient(145deg,#2b3944,#111920);color:#fff;cursor:pointer;overflow:hidden;touch-action:manipulation;user-select:none;-webkit-user-select:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.tower-peg:hover{border-color:#72e7ff;transform:translateY(-2px)}
.tower-peg:focus-visible{outline:3px solid #f0c675;outline-offset:3px}
.tower-peg::before{content:"";position:absolute;z-index:0;left:50%;bottom:30px;width:8px;height:192px;transform:translateX(-50%);border-radius:99px;background:linear-gradient(90deg,#5d6870,#d3a45e,#58656e);box-shadow:0 0 8px #d2a45e66}
.tower-peg::after{content:"";position:absolute;z-index:1;left:7%;right:7%;bottom:16px;height:20px;border-radius:7px;background:linear-gradient(#a87843,#55351d);box-shadow:0 4px 8px #0009}
.tower-peg.selected{border-color:#f0c675;box-shadow:0 0 18px #f0c67566,inset 0 0 18px #f0c67522}
.tower-peg-label{position:absolute;z-index:3;top:10px;left:0;right:0;color:#aebbc7;font-size:.72rem;font-weight:900;letter-spacing:.08em}
.tower-stack{position:absolute;z-index:2;inset:0;pointer-events:none}
.tower-disc{position:absolute;left:50%;height:28px;transform:translateX(-50%);display:grid;place-items:center;border:2px solid #f4d19a;border-radius:8px;color:#2b2117;font-weight:900;box-shadow:0 3px 5px #0009}
.tower-disc b{font-size:.9rem}
.tower-disc.size-1{width:36%;background:linear-gradient(#f8d98e,#ad6d34)}
.tower-disc.size-2{width:54%;background:linear-gradient(#f2b86e,#98572c)}
.tower-disc.size-3{width:72%;background:linear-gradient(#e89560,#7d3c2b)}
.tower-disc.size-4{width:90%;background:linear-gradient(#dd7166,#642b36)}
.tower-board+.status{margin-top:6px}
@media(max-width:460px){
  .tower-board{gap:5px}
  .tower-peg{min-width:0;height:220px}
  .tower-peg::before{height:164px}
  .tower-peg-label{font-size:.6rem}
  .tower-meta{font-size:.72rem}
  .tower-disc{height:26px}
}
.secret-reveal{display:none;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:10px auto 0;padding:9px 12px;border:1px solid #8f7045;border-radius:10px;background:linear-gradient(90deg,#171f25,#332919,#171f25);box-shadow:0 0 14px #d6a65833,inset 0 0 14px #d6a65811}
.secret-reveal.show{display:flex;animation:secret-reveal-in .35s ease-out both}
.secret-caption{color:#f0c675;font-size:.72rem;font-weight:900;letter-spacing:.1em}
.secret-reveal strong{color:#fff0bd;font-size:1.2rem;letter-spacing:.12em;text-shadow:0 0 10px #f0c67599}
.secret-reveal small{color:#b7c4cc;font-size:.75rem}
@keyframes secret-reveal-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
.g9{grid-template-columns:repeat(9,1fr)}
.g5{grid-template-columns:repeat(5,1fr)}
.rot-cell{
  border:1px solid #485561;border-radius:7px;background:linear-gradient(145deg,#313b45,#1b232a);
  padding:0;position:relative;overflow:hidden;aspect-ratio:1
}
.rot-cell.path,.rot-cell.decoy{cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.tile8,.light,.mag-btn,.symbol-btn{touch-action:manipulation;user-select:none;-webkit-user-select:none}
.rot-cell.blank{opacity:.45}
.rot-cell svg{width:100%;height:100%;display:block;pointer-events:none}
.wire-base{stroke:#6f4b2b;stroke-width:16;stroke-linecap:round}
.wire-core{stroke:var(--copper);stroke-width:8;stroke-linecap:round}
.rot-cell.powered .wire-core{stroke:var(--accent);filter:drop-shadow(0 0 5px var(--accent))}
.pipe-base{stroke:#374653;stroke-width:20;stroke-linecap:round}
.pipe-core{stroke:#8bb9c8;stroke-width:11;stroke-linecap:round}
.rot-cell.powered .pipe-core{stroke:#63e6ff;filter:drop-shadow(0 0 5px #63e6ff)}
.gears{display:flex;justify-content:center;align-items:center;gap:4px;flex-wrap:wrap;padding:18px 4px}
.gear-slot{text-align:center}
.gear{
  width:82px;height:82px;border-radius:50%;border:10px dashed #b67b42;
  background:#2b3137;color:#f0c58e;display:grid;place-items:center;font-weight:900;
  font-size:1.25rem;margin:auto;transition:.15s
}
.gear-slot button{margin-top:8px}
.gear-arrow{font-size:1.5rem;color:#7b8996}
.lights{display:grid;grid-template-columns:repeat(4,64px);gap:8px;justify-content:center}
.lights.g5{grid-template-columns:repeat(5,64px)}
.light{
  width:64px;height:64px;border-radius:12px;border:2px solid #596774;background:#2a3037;
  cursor:pointer;box-shadow:inset 0 0 18px #000
}
.light.on{background:#d6ff7c;box-shadow:0 0 14px #d6ff7c,inset 0 0 10px #fff8}
.puzzle8{display:grid;grid-template-columns:repeat(3,78px);gap:6px;justify-content:center}
.tile8{width:78px;height:78px;border:1px solid #687784;border-radius:10px;background:#2b3742;color:#fff;font-size:1.25rem;font-weight:900;cursor:pointer}
.tile8.blank{visibility:hidden}
.magnet-layout{display:grid;grid-template-columns:52px minmax(0,330px) 52px;grid-template-rows:52px auto 52px;gap:5px;justify-content:center;align-items:center}
.mag-btn{width:52px;height:52px;border-radius:12px;border:1px solid #687784;background:#293640;color:#fff;font-size:1.2rem;cursor:pointer}
.mag-grid{grid-column:2;grid-row:2;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;background:#0b1014;padding:6px;border:2px solid #536170;border-radius:12px}
.mag-grid.g7{grid-template-columns:repeat(7,1fr)}
.mag-cell{aspect-ratio:1;border-radius:6px;background:#1e2730;border:1px solid #44515d;display:grid;place-items:center;font-size:1.25rem}
.mag-cell.wall{background:#4d5965}
.mag-cell.target{box-shadow:inset 0 0 0 3px #f0c75e}
.mag-cell.ball{background:#15364b}
.north{grid-column:2;grid-row:1;justify-self:center}
.south{grid-column:2;grid-row:3;justify-self:center}
.west{grid-column:1;grid-row:2}
.east{grid-column:3;grid-row:2}
.clocks{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.clock-card{background:#11171d;border:1px solid #4d5a66;border-radius:14px;padding:12px;text-align:center}
.dial{width:115px;height:115px;border-radius:50%;border:5px solid #7a6549;margin:auto;position:relative;background:#efe1c1;color:#2d2923}
.dial:before{content:"12";position:absolute;top:5px;left:50%;transform:translateX(-50%);font-weight:800}
.dial:after{content:"6";position:absolute;bottom:5px;left:50%;transform:translateX(-50%);font-weight:800}
.hand{position:absolute;width:4px;height:39px;background:#2d2923;left:calc(50% - 2px);top:18px;transform-origin:50% 39px}
.clock-num{font-weight:900;font-size:1.2rem;margin:7px 0}
.core-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:560px;margin:auto}
.gauge{background:#11171d;border:1px solid #4d5a66;border-radius:12px;padding:12px;text-align:center}
.gauge-val{font-size:2rem;font-weight:900}
.gauge-bar{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;margin:8px 0}
.gauge-dot{height:13px;border-radius:3px;background:#2b333a}
.gauge-dot.on{background:#6de6f9}
.symbols{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:12px 0}
.symbol-btn{width:58px;height:58px;border-radius:12px;border:1px solid #617181;background:#26333e;color:#fff;font-size:1.5rem;cursor:pointer}
.sequence{min-height:54px;display:flex;gap:8px;justify-content:center;align-items:center;font-size:1.7rem}
.machine-final{display:none;text-align:center;padding:22px;border:1px solid #56ad73;background:#10251a;border-radius:14px;margin-top:14px}
.machine-final.show{display:block}
.machine-final .big{font-size:clamp(1.6rem,5vw,3rem);font-weight:900;color:var(--ok)}
@media(max-width:760px){
  .hub{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rot-wrap{grid-template-columns:40px minmax(0,1fr) 40px;gap:3px}
  .rot-orb{width:34px;height:34px;font-size:.9rem;border-width:1px}
  .rot-side{font-size:.5rem}
  .lights{grid-template-columns:repeat(4,52px)}
  .lights.g5{grid-template-columns:repeat(5,minmax(0,1fr));width:min(100%,300px);margin:auto}
  .light{width:52px;height:52px}
  .lights.g5 .light{width:100%;height:auto;aspect-ratio:1}
}
@media(max-width:460px){
  body{padding:6px}
  .magnet-layout{grid-template-columns:36px minmax(0,1fr) 36px;gap:3px}
  .mag-btn{width:36px;height:36px;font-size:1rem}
  .mag-grid{padding:4px;gap:3px}
  .hero,.stage{padding:11px;border-radius:14px}
  .gamebox > .small{
    margin-bottom:10px;
    padding:8px 10px 9px 12px;
    font-size:.78rem;
    line-height:1.35;
  }
  .gamebox > .small::before{margin-bottom:2px;font-size:.5rem}
  .hub{grid-template-columns:1fr}
  .gear{width:62px;height:62px;border-width:8px}
  .puzzle8{grid-template-columns:repeat(3,68px)}
  .tile8{width:68px;height:68px}
  .clock-card{width:100%}
  .core-controls{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════
   MACHINE GÉANTE — SCÈNE CENTRALE
   ═══════════════════════════════════════════════════════════════ */
body{
  background:
    radial-gradient(circle at 50% 12%,#495665 0,#222b34 25%,#10161c 58%,#05070a 100%);
  overflow-x:hidden;
}
.machine-hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border-color:#8a744f;
  background:
    linear-gradient(145deg,#303c47e8,#111820f5 58%,#090d12f8),
    radial-gradient(circle at 50% 40%,#52606e55,transparent 58%);
  box-shadow:0 24px 70px #000c, inset 0 1px #ffffff1c;
}
.machine-hero:before,
.machine-hero:after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:-1;
}
.machine-hero:before{
  inset:0;
  opacity:.16;
  background-image:
    linear-gradient(90deg,transparent 49%,#b98b5c 50%,transparent 51%),
    linear-gradient(0deg,transparent 49%,#b98b5c 50%,transparent 51%);
  background-size:34px 34px;
  mask-image:linear-gradient(to bottom,#fff,transparent 75%);
}
.machine-hero:after{
  left:4%;
  right:4%;
  bottom:0;
  height:3px;
  background:linear-gradient(90deg,transparent,#d49a54,#72ebff,#d49a54,transparent);
  box-shadow:0 0 18px #72ebff;
}
.eyebrow{
  color:#d7a667;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.2em;
  margin-bottom:6px;
}
.network-state{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:8px;
  color:#7fe8fa;
  font-size:.69rem;
  font-weight:900;
  letter-spacing:.05em;
}
.status-led{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#56616b;
  box-shadow:0 0 0 2px #1a222b;
}
.machine-scene{
  --power:0%;
  position:relative;
  height:500px;
  margin:18px -4px 0;
  border:1px solid #68583f;
  border-radius:22px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 50%,#33424c 0 17%,#1a252e 35%,#0c1218 72%);
  box-shadow:
    inset 0 0 0 8px #090d12aa,
    inset 0 0 45px #000,
    0 0 0 1px #d2a26422,
    0 0 35px #000b;
}
.machine-grid{
  position:absolute;
  inset:0;
  opacity:.22;
  background-image:
    linear-gradient(#7a8a95 1px,transparent 1px),
    linear-gradient(90deg,#7a8a95 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(ellipse at center,#fff 5%,transparent 78%);
}
.machine-rim{
  position:absolute;
  left:50%;
  top:50%;
  border:1px solid #8f704b55;
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.rim-one{width:270px;height:270px}
.rim-two{width:345px;height:345px;border-style:dashed;opacity:.65}
.rim-three{width:465px;height:465px;border-color:#93a5ae22}
.machine-pipe-map{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  z-index:2;
}
.pipe-rail,
.machine-pipe{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.pipe-rail{
  stroke:#17232c;
  stroke-width:18;
  opacity:.95;
}
.machine-pipe{
  stroke:#46535c;
  stroke-width:9;
  stroke-dasharray:13 8;
  opacity:.4;
  transition:stroke .5s,opacity .5s,filter .5s;
}
.machine-pipe.active{
  stroke:#66e8ff;
  opacity:1;
  filter:url(#pipeGlow);
  animation:energy-flow 1.8s linear infinite;
}
@keyframes energy-flow{
  to{stroke-dashoffset:-42}
}
.machine-core{
  position:absolute;
  z-index:5;
  left:50%;
  top:50%;
  width:172px;
  height:172px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:3px solid #675338;
  background:radial-gradient(circle,#40505a 0 24%,#1c2730 25% 57%,#0a1015 58%);
  box-shadow:0 0 0 8px #121a20,0 0 0 11px #765b3d55, inset 0 0 28px #000,0 0 26px #000;
  transition:box-shadow .6s,border-color .6s;
}
.machine-core.active{
  border-color:#70e4f2;
  box-shadow:0 0 0 8px #121a20,0 0 0 11px #6cddf566,inset 0 0 28px #000,0 0 42px #4ce7ff99;
}
.core-orbit{
  position:absolute;
  inset:10px;
  border-radius:50%;
  border:1px solid #71859155;
  transform:rotate(-25deg);
}
.orbit-two{inset:22px;transform:rotate(55deg);border-style:dashed}
.orbit-three{inset:34px;border-color:#c4914e77}
.machine-core.active .orbit-one{border-color:#7beeff;animation:orbit-spin 9s linear infinite}
.machine-core.active .orbit-two{border-color:#dba15d;animation:orbit-spin-reverse 7s linear infinite}
.machine-core.active .orbit-three{border-color:#8effd5;animation:orbit-spin 5s linear infinite}
@keyframes orbit-spin{to{transform:rotate(335deg)}}
@keyframes orbit-spin-reverse{to{transform:rotate(-305deg)}}
.core-lens{
  position:absolute;
  left:50%;
  top:50%;
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  transform:translate(-50%,-50%);
  border-radius:50%;
  color:#53616c;
  font-size:2rem;
  background:radial-gradient(circle,#26343d 0 40%,#0a1116 42%);
  border:2px solid #54646e;
  transition:color .6s,text-shadow .6s,background .6s;
}
.machine-core.active .core-lens{
  color:#8df4ff;
  background:radial-gradient(circle,#b8ffff 0 10%,#28b7d3 25%,#103f52 55%,#08141c 70%);
  text-shadow:0 0 14px #fff,0 0 30px #54eaff;
  animation:core-pulse 1.7s ease-in-out infinite;
}
@keyframes core-pulse{50%{transform:translate(-50%,-50%) scale(1.08)}}
.core-bolt{
  position:absolute;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#91683f;
  border:1px solid #dca966;
  box-shadow:0 0 0 2px #111820;
}
.core-bolt-a{left:22px;top:72px}
.core-bolt-b{right:22px;top:72px}
.core-bolt-c{left:72px;top:22px}
.core-bolt-d{left:72px;bottom:22px}
.machine-core.active .core-bolt{background:#83f5ff;box-shadow:0 0 10px #57eaff,0 0 0 2px #111820}
.core-label{
  position:absolute;
  left:50%;
  bottom:-38px;
  width:170px;
  transform:translateX(-50%);
  text-align:center;
  color:#a17e52;
  font-size:.58rem;
  letter-spacing:.12em;
  white-space:nowrap;
}
.machine-core.active .core-label{color:#87ebf8}
.core-label b,.core-label small{display:block}
.core-label small{font-size:.47rem;color:#71808a;margin-top:3px}
.machine-gear{
  position:absolute;
  z-index:3;
  width:84px;
  height:84px;
  border-radius:50%;
  opacity:.42;
  background:repeating-conic-gradient(from 0deg,#8b5a2f 0deg 8deg,#c28a4b 8deg 13deg,#6e4728 13deg 20deg);
  box-shadow:inset 0 0 0 5px #10171d,0 0 0 2px #c28a4b44,0 6px 12px #000b;
  transition:opacity .6s,filter .6s;
  animation-play-state:paused;
}
.machine-gear:before{
  content:"";
  position:absolute;
  inset:14px;
  border-radius:50%;
  background:radial-gradient(circle,#31404a 0 20%,#131c23 21% 48%,#0a1015 49%);
  border:4px solid #a46e38;
  box-shadow:inset 0 0 12px #000;
}
.machine-gear:after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:14px;
  height:14px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#0a1015;
  border:3px solid #d29b58;
}
.machine-gear.active{
  opacity:1;
  filter:drop-shadow(0 0 9px #e1a15e);
  animation:gear-spin 12s linear infinite;
}
.machine-gear:nth-of-type(even).active{animation-direction:reverse}
@keyframes gear-spin{to{transform:rotate(360deg)}}
.gear-one{left:3%;top:18%}
.gear-two{right:3%;top:12%;width:72px;height:72px}
.gear-three{left:7%;bottom:7%;width:98px;height:98px}
.gear-four{right:8%;bottom:7%;width:94px;height:94px}
.gear-five{left:25%;top:3%;width:56px;height:56px}
.gear-six{right:25%;bottom:3%;width:58px;height:58px}
.gear-seven{left:50%;top:7%;width:48px;height:48px;transform:translateX(-50%)}
.machine-station{
  position:absolute;
  z-index:6;
  width:126px;
  min-height:78px;
  padding:8px 9px 7px 31px;
  border:1px solid #6c5b43;
  border-radius:11px;
  color:#a7b4bc;
  background:linear-gradient(145deg,#28333c,#10171d);
  box-shadow:0 8px 16px #0009,inset 0 1px #ffffff12;
  transition:color .5s,border-color .5s,box-shadow .5s,background .5s;
}
.machine-station.active{
  color:#e9ffff;
  border-color:#68dfea;
  background:linear-gradient(145deg,#205064,#12262d);
  box-shadow:0 0 18px #49dff866,0 8px 16px #0009,inset 0 1px #ffffff22;
}
.station-number{
  position:absolute;
  left:8px;
  top:8px;
  color:#bd8b4e;
  font-size:.62rem;
  font-weight:900;
}
.station-icon{display:block;font-size:1.3rem;line-height:1.1}
.machine-station strong{
  display:block;
  margin-top:2px;
  font-size:.67rem;
  letter-spacing:.08em;
}
.machine-station small{
  display:block;
  margin-top:4px;
  color:#6d7a84;
  font-size:.52rem;
  letter-spacing:.09em;
}
.machine-station.active small{color:#83f4d3}
.station-led{
  position:absolute;
  right:8px;
  top:9px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#4a555e;
  box-shadow:0 0 0 2px #111820;
}
.machine-station.active .station-led{
  background:#7fffe0;
  box-shadow:0 0 10px #66ffe2,0 0 0 2px #111820;
  animation:led-blink 1.5s ease-in-out infinite;
}
@keyframes led-blink{50%{opacity:.45}}
.station-1{left:50%;top:5%;transform:translateX(-50%)}
.station-2{left:60%;top:14%}
.station-3{right:5%;top:37%}
.station-4{right:10%;top:65%}
.station-5{right:24%;bottom:3%}
.station-6{left:24%;bottom:3%}
.station-7{left:10%;top:65%}
.station-8{left:5%;top:37%}
.station-9{left:40%;top:14%}
.machine-steam{
  position:absolute;
  z-index:4;
  width:80px;
  height:70px;
  opacity:0;
  pointer-events:none;
  transition:opacity .8s;
}
.machine-steam.active{opacity:1}
.steam-one{left:14%;top:5%}
.steam-two{right:13%;top:3%}
.steam-three{right:2%;bottom:24%}
.machine-steam i{
  position:absolute;
  display:block;
  width:28px;
  height:28px;
  border-radius:50%;
  background:#d8e9e8aa;
  filter:blur(4px);
  animation:steam-rise 3.5s ease-in-out infinite;
}
.machine-steam i:nth-child(1){left:8px;bottom:3px}
.machine-steam i:nth-child(2){left:27px;bottom:18px;animation-delay:.7s}
.machine-steam i:nth-child(3){left:47px;bottom:0;animation-delay:1.4s}
@keyframes steam-rise{
  0%{transform:translateY(12px) scale(.65);opacity:0}
  35%{opacity:.7}
  100%{transform:translateY(-35px) scale(1.35);opacity:0}
}
.machine-console{
  position:relative;
  margin:10px 4px 0;
  padding:10px 13px;
  border:1px solid #6a593e;
  border-radius:10px;
  background:#0a1015dd;
  box-shadow:inset 0 0 15px #000,0 0 18px #0008;
}
.console-line{
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:#b4864c;
  font-size:.63rem;
  font-weight:900;
  letter-spacing:.1em;
}
.console-line b{color:#70e5f2}
.console-track{
  height:7px;
  margin-top:8px;
  overflow:hidden;
  border-radius:99px;
  background:#1c2931;
}
.console-fill{
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#b5793d,#61e6f5,#9dffdc);
  box-shadow:0 0 14px #5be9ff;
  transition:width .8s cubic-bezier(.2,.8,.2,1);
}
.machine-feed{
  margin-top:7px;
  overflow:hidden;
  color:#6e8b92;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.62rem;
  letter-spacing:.05em;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.machine-hero .hub{position:relative;z-index:8}
.machine-final{
  border-color:#64e9ee;
  background:
    radial-gradient(circle at 50% 0,#1f6170,#10251a 68%),
    #10251a;
  box-shadow:0 0 35px #3ddde766,inset 0 0 30px #0008;
}
.machine-final.show{animation:final-reveal .9s ease both}
@keyframes final-reveal{
  from{opacity:0;transform:translateY(12px);filter:brightness(.5)}
  to{opacity:1;transform:translateY(0);filter:brightness(1)}
}
@media(max-width:760px){
  .machine-scene{height:590px;margin-left:-2px;margin-right:-2px}
  .machine-station{width:108px;min-height:71px;padding-left:28px}
  .station-icon{font-size:1.1rem}
  .machine-station strong{font-size:.58rem}
  .machine-station small{font-size:.46rem}
  .station-1{top:4%}
  .station-2{left:58%;top:13%}
  .station-9{left:30%;top:13%}
  .station-3{right:2%;top:37%}
  .station-8{left:2%;top:37%}
  .station-4{right:5%;top:65%}
  .station-7{left:5%;top:65%}
  .station-5{right:17%;bottom:3%}
  .station-6{left:17%;bottom:3%}
  .machine-core{width:142px;height:142px}
  .core-label{width:145px;font-size:.51rem}
  .gear-one{left:1%;top:23%;width:64px;height:64px}
  .gear-two{right:1%;top:19%;width:58px;height:58px}
  .gear-three{left:3%;bottom:15%;width:72px;height:72px}
  .gear-four{right:3%;bottom:15%;width:72px;height:72px}
  .gear-five{left:20%;top:3%;width:44px;height:44px}
  .gear-six{right:20%;bottom:3%;width:44px;height:44px}
  .gear-seven{top:8%;width:40px;height:40px}
  .machine-feed{font-size:.53rem}
}
@media(max-width:460px){
  .eyebrow{font-size:.55rem;letter-spacing:.13em}
  .machine-scene{height:550px;margin-top:13px;border-radius:15px}
  .machine-station{width:86px;min-height:64px;padding:6px 6px 5px 24px;border-radius:9px}
  .station-number{left:6px;top:6px;font-size:.52rem}
  .station-icon{font-size:.9rem}
  .machine-station strong{font-size:.48rem;letter-spacing:.04em}
  .machine-station small{font-size:.39rem;margin-top:3px}
  .station-led{right:6px;top:7px;width:6px;height:6px}
  .station-2{left:57%;top:14%}
  .station-9{left:27%;top:14%}
  .station-3{right:1%;top:38%}
  .station-8{left:1%;top:38%}
  .station-4{right:3%;top:67%}
  .station-7{left:3%;top:67%}
  .station-5{right:13%;bottom:3%}
  .station-6{left:13%;bottom:3%}
  .machine-core{width:116px;height:116px}
  .core-lens{width:43px;height:43px;font-size:1.45rem}
  .core-bolt{width:7px;height:7px}
  .core-bolt-a{left:15px;top:49px}
  .core-bolt-b{right:15px;top:49px}
  .core-bolt-c{left:49px;top:15px}
  .core-bolt-d{left:49px;bottom:15px}
  .core-label{bottom:-31px;width:120px;font-size:.42rem}
  .core-label small{font-size:.36rem}
  .rim-one{width:190px;height:190px}
  .rim-two{width:250px;height:250px}
  .rim-three{width:355px;height:355px}
  .machine-gear{opacity:.32}
  .gear-one{left:0;top:25%;width:50px;height:50px}
  .gear-two{right:0;top:22%;width:46px;height:46px}
  .gear-three{left:1%;bottom:16%;width:58px;height:58px}
  .gear-four{right:1%;bottom:16%;width:58px;height:58px}
  .gear-five{left:14%;top:4%;width:36px;height:36px}
  .gear-six{right:14%;bottom:4%;width:36px;height:36px}
  .gear-seven{top:8%;width:32px;height:32px}
  .console-line{font-size:.5rem}
  .machine-feed{font-size:.44rem}
}


/* ═══════════════════════════════════════════════════════════════
   COLOSSUS MK.IV — REFONTE INDUSTRIELLE EN VOLUME
   ═══════════════════════════════════════════════════════════════ */
:root{
  --machine-steel:#18232b;
  --machine-steel-dark:#080e13;
  --machine-steel-light:#53636d;
  --machine-brass:#c18a4b;
  --machine-brass-light:#f0bd72;
  --machine-cyan:#63e9ff;
  --machine-green:#81ffb1;
}
.machine-hero h1{
  text-shadow:0 2px 0 #05080b,0 0 18px #63e9ff22;
}
.machine-hero .progress-box{
  border-color:#937348;
  box-shadow:inset 0 1px #ffffff12,0 0 24px #0008;
}
.machine-scene{
  height:560px;
  margin-top:20px;
  border:2px solid #99764b;
  border-radius:24px;
  perspective:1000px;
  background:
    radial-gradient(ellipse at 50% 47%,#3a505b 0 8%,#23343e 22%,#101b23 46%,#070b10 78%),
    linear-gradient(135deg,#364650,#080d12);
  box-shadow:
    inset 0 0 0 10px #050a0f,
    inset 0 0 0 12px #7e5e3a55,
    inset 0 0 70px #000,
    0 20px 40px #000c,
    0 0 0 1px #f0bd7233;
}
.machine-scene::before{
  content:"";
  position:absolute;
  inset:12px;
  z-index:0;
  border:1px solid #d09a5d77;
  border-radius:17px;
  pointer-events:none;
  box-shadow:
    inset 0 0 0 5px #0a111688,
    inset 0 0 35px #000,
    0 0 0 1px #060b10;
}
.machine-scene::after{
  content:"";
  position:absolute;
  inset:21px;
  z-index:0;
  border:1px solid #6d899555;
  border-radius:13px;
  pointer-events:none;
  opacity:.65;
  background:
    linear-gradient(135deg,transparent 0 46%,#d09a5d18 46% 47%,transparent 47% 53%,#d09a5d12 53% 54%,transparent 54%),
    repeating-linear-gradient(135deg,transparent 0 22px,#b6824b0b 22px 24px);
}
.machine-grid{
  z-index:0;
  opacity:.11;
  background-size:27px 27px;
  mask-image:radial-gradient(ellipse at center,#fff 0 20%,transparent 83%);
}
.machine-scanline{
  position:absolute;
  inset:0;
  z-index:20;
  pointer-events:none;
  opacity:.08;
  background:linear-gradient(to bottom,transparent 0%,#83f6ff 48%,transparent 52%);
  background-size:100% 180px;
  mix-blend-mode:screen;
  animation:colossus-scan 8s linear infinite;
}
@keyframes colossus-scan{
  from{background-position:0 -180px}
  to{background-position:0 740px}
}
.machine-header-plate{
  position:absolute;
  z-index:9;
  top:14px;
  left:50%;
  width:310px;
  min-height:28px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:6px 10px;
  color:#f0c17b;
  border:1px solid #aa7b43;
  border-radius:4px;
  background:linear-gradient(180deg,#3a3022,#171b1c);
  box-shadow:0 4px 0 #080c0e,0 0 16px #0009,inset 0 1px #ffe1a433;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.08em;
  text-align:center;
}
.machine-header-plate::before,
.machine-header-plate::after{
  content:"";
  position:absolute;
  top:50%;
  width:22px;
  height:3px;
  background:#c18a4b;
  box-shadow:0 0 8px #c18a4b;
}
.machine-header-plate::before{right:100%;margin-right:8px}
.machine-header-plate::after{left:100%;margin-left:8px}
.machine-header-plate strong{font-size:.59rem}
.machine-header-plate .plate-id{font-size:.48rem;color:#a38761}
.plate-lamps{display:flex;gap:4px}
.plate-lamps i{
  width:6px;height:6px;border-radius:50%;
  background:#3a4246;
  border:1px solid #9b7547;
}
.machine-scene[data-level="1"] .plate-lamps i:nth-child(-n+1),
.machine-scene[data-level="2"] .plate-lamps i:nth-child(-n+2),
.machine-scene[data-level="3"] .plate-lamps i:nth-child(-n+3),
.machine-scene[data-level="4"] .plate-lamps i:nth-child(-n+4),
.machine-scene[data-level="5"] .plate-lamps i:nth-child(-n+4),
.machine-scene[data-level="6"] .plate-lamps i:nth-child(-n+4),
.machine-scene[data-level="7"] .plate-lamps i:nth-child(-n+4),
.machine-scene[data-level="8"] .plate-lamps i:nth-child(-n+4),
.machine-scene[data-level="9"] .plate-lamps i:nth-child(-n+4){
  background:var(--machine-green);
  box-shadow:0 0 9px var(--machine-green);
}
.machine-frame{
  position:absolute;
  z-index:1;
  top:31px;
  bottom:31px;
  width:134px;
  overflow:hidden;
  border:2px solid #705738;
  background:
    linear-gradient(90deg,#0c141a,#26343d 48%,#0c141a),
    repeating-linear-gradient(135deg,transparent 0 14px,#c18a4b22 14px 18px);
  box-shadow:
    inset 0 0 0 5px #0a111688,
    inset 0 0 18px #000,
    0 10px 20px #000b;
  opacity:.92;
}
.frame-left{left:17px;transform:skewY(-1.2deg)}
.frame-right{right:17px;transform:skewY(1.2deg)}
.machine-frame::before{
  content:"";
  position:absolute;
  inset:11px 13px;
  border:1px solid #a8794577;
  background:repeating-linear-gradient(135deg,transparent 0 14px,#d3a06516 14px 18px);
}
.machine-frame b{
  position:absolute;
  z-index:1;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  color:#dba05b;
  font-size:2rem;
  font-family:Georgia,serif;
  text-shadow:0 0 12px #dba05b66;
}
.machine-frame small{
  position:absolute;
  z-index:1;
  left:50%;
  bottom:30px;
  width:100%;
  transform:translateX(-50%);
  color:#74858e;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.44rem;
  letter-spacing:.11em;
  line-height:1.5;
  text-align:center;
}
.frame-rivet{
  position:absolute;
  z-index:2;
  width:10px;height:10px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff0b4 0 8%,#b57a3d 18% 50%,#3c2818 53%);
  border:1px solid #e2b26b;
  box-shadow:0 0 0 2px #0b1116;
}
.rivet-a{top:18px;left:19px}
.rivet-b{bottom:18px;right:19px}
.frame-strut{
  position:absolute;
  z-index:1;
  top:58px;
  bottom:58px;
  width:4px;
  background:linear-gradient(#b77a3d,#3f2e1e 35% 65%,#b77a3d);
  box-shadow:0 0 7px #b77a3d77;
}
.frame-strut:nth-of-type(3){left:28px}
.frame-strut:nth-of-type(4){right:28px}
.machine-rim{
  z-index:2;
  border-color:#8e6a43;
  pointer-events:none;
}
.rim-one{
  width:316px;height:316px;
  border:13px solid #121c23;
  box-shadow:
    0 0 0 2px #d29b5d88,
    0 0 0 8px #0a111777,
    inset 0 0 0 2px #c48d50,
    0 0 25px #000;
}
.rim-one::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:50%;
  background:repeating-conic-gradient(from 2deg,#d29b5d 0 5deg,transparent 5deg 14deg);
  -webkit-mask:radial-gradient(transparent 0 47%,#000 48% 54%,transparent 55%);
  mask:radial-gradient(transparent 0 47%,#000 48% 54%,transparent 55%);
  opacity:.8;
}
.rim-two{
  width:382px;height:382px;
  border:2px dashed #9ab1b955;
  box-shadow:0 0 0 7px #121b22aa,0 0 0 8px #b7834a33;
}
.rim-three{
  width:508px;height:508px;
  border:15px solid #0c151b;
  box-shadow:
    0 0 0 2px #ad804f88,
    0 0 0 8px #050a0e,
    0 0 0 10px #5f493366,
    inset 0 0 0 2px #6f8a8e33;
}
.rim-three::before{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:50%;
  border:2px dashed #d19b5c66;
  animation:outer-ring-spin 24s linear infinite;
}
.rim-three::after{
  content:"";
  position:absolute;
  inset:17px;
  border-radius:50%;
  border:1px solid #71d8e555;
}
.machine-scene:not([data-level="0"]) .rim-one::before{
  animation:inner-ring-spin 16s linear infinite;
}
.machine-scene:not([data-level="0"]) .rim-three::before{
  animation-duration:12s;
}
@keyframes inner-ring-spin{to{transform:rotate(360deg)}}
@keyframes outer-ring-spin{to{transform:rotate(-360deg)}}
.machine-belt{
  position:absolute;
  z-index:2;
  left:50%;top:50%;
  border:6px double #46545d;
  border-radius:50%;
  opacity:.35;
  transform:translate(-50%,-50%);
  box-shadow:inset 0 0 15px #000,0 0 10px #000;
  transition:opacity .6s,border-color .6s,filter .6s;
}
.belt-one{width:438px;height:156px;transform:translate(-50%,-50%) rotate(23deg)}
.belt-two{width:438px;height:156px;transform:translate(-50%,-50%) rotate(-23deg)}
.machine-belt.active{
  opacity:1;
  border-color:#69e9f2;
  filter:drop-shadow(0 0 7px #69e9f2);
  animation:belt-pulse 1.5s ease-in-out infinite;
}
@keyframes belt-pulse{50%{opacity:.55}}
.machine-belt-svg{
  fill:none;
  stroke:#2e424c;
  stroke-width:7;
  stroke-dasharray:4 14;
  opacity:.7;
}
.belt-svg-two{stroke:#9b6f3e;stroke-width:3;stroke-dasharray:2 19;opacity:.72}
.machine-pipe-map{
  z-index:3;
  filter:drop-shadow(0 5px 4px #0008);
}
.pipe-rail{
  stroke:#091117;
  stroke-width:30;
  opacity:1;
}
.machine-pipe{
  stroke:#364953;
  stroke-width:14;
  stroke-dasharray:18 9;
  opacity:.7;
}
.machine-pipe::selection{stroke:#fff}
.machine-pipe.active{
  stroke:#6feeff;
  stroke-width:12;
  opacity:1;
  filter:url(#pipeGlow) drop-shadow(0 0 9px #53eaff);
  animation:energy-flow 1.15s linear infinite;
}
.pipe-joints{
  fill:#17242b;
  stroke:#ad7841;
  stroke-width:5;
  filter:drop-shadow(0 2px 2px #000);
}
.pipe-joints circle{
  fill:#34454d;
}
.machine-scene[data-level="1"] .pipe-joints circle:nth-child(-n+1),
.machine-scene[data-level="2"] .pipe-joints circle:nth-child(-n+2),
.machine-scene[data-level="3"] .pipe-joints circle:nth-child(-n+3),
.machine-scene[data-level="4"] .pipe-joints circle:nth-child(-n+4),
.machine-scene[data-level="5"] .pipe-joints circle:nth-child(-n+5),
.machine-scene[data-level="6"] .pipe-joints circle:nth-child(-n+6),
.machine-scene[data-level="7"] .pipe-joints circle:nth-child(-n+7),
.machine-scene[data-level="8"] .pipe-joints circle:nth-child(-n+8),
.machine-scene[data-level="9"] .pipe-joints circle:nth-child(-n+9){
  fill:var(--machine-green);
  stroke:#e6fff1;
  filter:drop-shadow(0 0 8px var(--machine-green));
}
.machine-piston{
  position:absolute;
  z-index:4;
  width:154px;
  height:40px;
  opacity:.38;
  filter:drop-shadow(0 5px 4px #000);
  transition:opacity .6s,filter .6s;
}
.piston-left{left:105px;top:48%;transform:rotate(-13deg)}
.piston-right{right:105px;top:48%;transform:rotate(13deg)}
.piston-bottom{left:50%;bottom:8%;transform:translateX(-50%) rotate(90deg)}
.piston-cylinder{
  position:absolute;
  left:0;top:5px;
  width:85px;height:30px;
  border:3px solid #927047;
  border-radius:5px;
  background:linear-gradient(180deg,#60717a,#1b2830 48%,#0a1116);
  box-shadow:inset 0 0 8px #000,0 0 0 2px #101820;
}
.piston-cylinder::after{
  content:"";
  position:absolute;
  inset:5px 8px;
  border:1px solid #c18a4b66;
}
.piston-rod{
  position:absolute;
  left:74px;top:17px;
  width:70px;height:8px;
  border-radius:99px;
  background:linear-gradient(#e4b36d,#8b5d31 50%,#e4b36d);
  box-shadow:0 0 8px #d49958;
}
.piston-joint{
  position:absolute;
  right:0;top:8px;
  width:24px;height:24px;
  border-radius:50%;
  border:4px solid #b37a40;
  background:#16232a;
  box-shadow:inset 0 0 7px #000;
}
.machine-piston.active{
  opacity:1;
  filter:drop-shadow(0 0 10px #d79a56);
}
.machine-piston.active .piston-rod{animation:piston-stroke 1.2s ease-in-out infinite alternate}
@keyframes piston-stroke{to{transform:translateX(14px)}}
.machine-column{
  position:absolute;
  z-index:4;
  top:148px;
  width:116px;
  height:246px;
  padding:19px 12px 12px;
  opacity:.34;
  border:2px solid #725738;
  border-radius:8px;
  background:
    linear-gradient(90deg,#0a1218,#344650 47%,#111b22),
    repeating-linear-gradient(0deg,transparent 0 14px,#d39c5d14 14px 17px);
  box-shadow:inset 0 0 0 5px #0b121888,inset 0 0 20px #000,0 12px 22px #000b;
  transition:opacity .7s,border-color .7s,filter .7s;
}
.column-left{left:29px;transform:perspective(500px) rotateY(7deg)}
.column-right{right:29px;transform:perspective(500px) rotateY(-7deg)}
.machine-column::before{
  content:"";
  position:absolute;
  inset:8px;
  border:1px solid #b1814b55;
  border-radius:4px;
  pointer-events:none;
}
.machine-column.active{
  opacity:1;
  border-color:#69d9db;
  filter:drop-shadow(0 0 10px #57e7ef55);
}
.column-cap{
  position:absolute;
  left:9px;right:9px;top:-10px;
  height:20px;
  border:2px solid #a27543;
  border-radius:4px;
  background:linear-gradient(#687780,#202d34 50%,#10171c);
  box-shadow:0 0 0 3px #0b1116;
}
.column-title{
  display:block;
  color:#e0ac65;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.57rem;
  letter-spacing:.12em;
  text-align:center;
}
.machine-column small{
  display:block;
  margin-top:4px;
  color:#75878e;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.42rem;
  letter-spacing:.08em;
  text-align:center;
}
.pressure-gauge{
  position:relative;
  width:77px;height:77px;
  margin:20px auto 13px;
  border:5px solid #aa7a45;
  border-radius:50%;
  background:radial-gradient(circle,#efe0b9 0 49%,#92734e 50% 54%,#17242b 55%);
  box-shadow:inset 0 0 0 5px #3b2b1b,0 0 0 2px #0c1318,0 0 12px #000;
}
.pressure-gauge::before{
  content:"0  4  8";
  position:absolute;
  left:50%;top:7px;
  transform:translateX(-50%);
  color:#473522;
  font:700 .45rem Georgia,serif;
  white-space:nowrap;
}
.gauge-ticks{
  position:absolute;
  inset:7px;
  border:3px dotted #6a4a2c;
  border-radius:50%;
  opacity:.8;
}
.gauge-needle{
  position:absolute;
  left:50%;top:50%;
  width:3px;height:27px;
  transform:translate(-50%,-100%) rotate(-58deg);
  transform-origin:50% 100%;
  background:#382517;
  border-radius:99px;
}
.pressure-gauge i{
  position:absolute;
  left:50%;top:50%;
  width:9px;height:9px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#9f6836;
  border:2px solid #372417;
}
.machine-column.active .gauge-needle{
  transform:translate(-50%,-100%) rotate(52deg);
  transition:transform 1s ease;
}
.column-valve{
  position:absolute;
  left:50%;bottom:21px;
  width:34px;height:34px;
  transform:translateX(-50%);
  border:5px solid #a8753e;
  border-radius:50%;
  background:#26353d;
  box-shadow:0 0 0 3px #10171c,inset 0 0 8px #000;
}
.column-valve::before,.column-valve::after{
  content:"";position:absolute;left:50%;top:50%;
  width:44px;height:5px;
  transform:translate(-50%,-50%);
  border-radius:4px;background:#9a6b39;
}
.column-valve::after{transform:translate(-50%,-50%) rotate(90deg)}
.column-valve i{
  position:absolute;inset:7px;border-radius:50%;background:#0b1116;border:1px solid #d0a060;
}
.column-port{
  position:absolute;
  left:10px;right:10px;bottom:7px;height:5px;
  border-radius:99px;
  background:#10171d;
  box-shadow:0 0 0 1px #b07b43;
}
.machine-column.active .column-valve{
  animation:valve-spin 3s linear infinite;
  filter:drop-shadow(0 0 7px #d89b57);
}
@keyframes valve-spin{to{transform:translateX(-50%) rotate(360deg)}}
.machine-vent{
  position:absolute;
  z-index:5;
  width:78px;height:45px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:7px;
  opacity:.35;
  border:2px solid #795c3d;
  border-radius:7px;
  background:linear-gradient(#45545c,#121b21);
  box-shadow:inset 0 0 12px #000,0 5px 12px #0008;
  transition:opacity .6s,border-color .6s,filter .6s;
}
.vent-left{left:149px;top:91px;transform:rotate(-12deg)}
.vent-right{right:149px;top:91px;transform:rotate(12deg)}
.machine-vent span{
  width:7px;height:27px;
  border-radius:99px;
  background:#0b1217;
  border:1px solid #b17a40;
}
.machine-vent.active{
  opacity:1;
  border-color:#7ce8e7;
  filter:drop-shadow(0 0 9px #65e8ef);
}
.machine-vent.active span{
  background:linear-gradient(#8effd0,#1b8190);
  box-shadow:0 0 9px #6effd0;
  animation:vent-flare 1.1s ease-in-out infinite alternate;
}
@keyframes vent-flare{to{opacity:.42}}
.machine-turbine{
  position:absolute;
  z-index:4;
  left:50%;top:50%;
  width:244px;height:244px;
  transform:translate(-50%,-50%);
  border:2px solid #8f693e66;
  border-radius:50%;
  opacity:.28;
  transition:opacity .8s,filter .8s;
}
.machine-turbine::before{
  content:"";
  position:absolute;
  inset:20px;
  border:1px solid #5b737c;
  border-radius:50%;
}
.machine-turbine i{
  position:absolute;
  left:50%;top:50%;
  width:102px;height:10px;
  transform-origin:0 50%;
  border-radius:99px 5px 5px 99px;
  background:linear-gradient(90deg,#d2a264,#42545e 62%,#18242b);
  box-shadow:0 0 7px #d2a26466;
}
.machine-turbine i:nth-child(1){transform:rotate(0deg)}
.machine-turbine i:nth-child(2){transform:rotate(90deg)}
.machine-turbine i:nth-child(3){transform:rotate(180deg)}
.machine-turbine i:nth-child(4){transform:rotate(270deg)}
.machine-turbine b{
  position:absolute;left:50%;top:50%;
  width:27px;height:27px;
  transform:translate(-50%,-50%);
  border:5px solid #af7a42;
  border-radius:50%;
  background:#111a20;
}
.machine-turbine.active{
  opacity:1;
  filter:drop-shadow(0 0 10px #e1a25e);
}
.machine-turbine.active i{animation:turbine-blades 2.5s linear infinite}
@keyframes turbine-blades{to{rotate:360deg}}
.machine-reactor-coil{
  position:absolute;
  z-index:5;
  left:50%;top:50%;
  width:228px;height:228px;
  transform:translate(-50%,-50%);
  border:2px solid #4e7e89;
  border-radius:50%;
  opacity:.08;
  transition:opacity .8s,filter .8s;
}
.machine-reactor-coil::before,.machine-reactor-coil::after{
  content:"";
  position:absolute;
  inset:11px;
  border:1px solid #c78d4e;
  border-radius:50%;
}
.machine-reactor-coil::after{inset:28px;border-style:dotted;border-color:#6eeaff}
.machine-reactor-coil i{
  position:absolute;
  left:50%;top:50%;
  width:9px;height:100px;
  transform-origin:50% 0;
  background:linear-gradient(#62eaff,transparent);
  box-shadow:0 0 8px #62eaff;
}
.machine-reactor-coil i:nth-child(1){transform:translate(-50%,0) rotate(0deg)}
.machine-reactor-coil i:nth-child(2){transform:translate(-50%,0) rotate(120deg)}
.machine-reactor-coil i:nth-child(3){transform:translate(-50%,0) rotate(240deg)}
.machine-reactor-coil.active{
  opacity:1;
  filter:drop-shadow(0 0 12px #62eaff);
  animation:coil-charge 1.8s ease-in-out infinite;
}
@keyframes coil-charge{50%{filter:drop-shadow(0 0 24px #62eaff);opacity:.62}}
.machine-core{
  z-index:11;
  width:202px;height:202px;
  border:8px solid #111a21;
  background:
    radial-gradient(circle at 45% 40%,#8fdce0 0 3%,#285d69 10%,#122d39 25%,transparent 26%),
    radial-gradient(circle,#3a4f58 0 25%,#1c2b33 26% 52%,#091118 53%);
  box-shadow:
    0 0 0 3px #be8b4e,
    0 0 0 9px #0b1217,
    0 0 0 12px #5d778055,
    inset 0 0 28px #000,
    0 16px 24px #000c;
}
.machine-core::before{
  content:"";
  position:absolute;
  inset:-19px;
  border:4px solid transparent;
  border-top-color:#d59a56;
  border-right-color:#54747c;
  border-radius:50%;
  transform:rotate(-25deg);
}
.machine-core::after{
  content:"";
  position:absolute;
  inset:-5px;
  border:1px dashed #7bd4df88;
  border-radius:50%;
}
.machine-core.active::before{
  animation:core-ring-spin 4s linear infinite;
  filter:drop-shadow(0 0 9px #6eeaff);
}
@keyframes core-ring-spin{to{transform:rotate(335deg)}}
.machine-core.active{
  border-color:#8deeff;
  box-shadow:
    0 0 0 3px #69e9f0,
    0 0 0 9px #0b1217,
    0 0 0 12px #68e5ff99,
    inset 0 0 28px #000,
    0 0 60px #4eeaffdd;
}
.core-orbit{inset:13px;border-color:#b9e9e355}
.orbit-two{inset:27px;border-color:#c3904f88}
.orbit-three{inset:42px;border-color:#6eeaff88}
.core-lens{width:70px;height:70px;border-color:#87a5ab;background:radial-gradient(circle,#9ff9ff 0 8%,#2aa4ba 22%,#0c2b3b 56%,#071017 70%);font-size:2.2rem}
.machine-core:not(.active) .core-lens{filter:grayscale(.8);opacity:.72}
.machine-core.active .core-lens{box-shadow:0 0 0 5px #1d7181,0 0 30px #64eaff;animation:core-pulse 1.25s ease-in-out infinite}
.core-label{bottom:-46px;color:#d5a260;font-size:.62rem;text-shadow:0 2px 2px #000}
.machine-core.active .core-label{color:var(--machine-green);text-shadow:0 0 10px #65ffb2}
.machine-gear{
  z-index:6;
  opacity:.5;
  background:repeating-conic-gradient(from 0deg,#6d4527 0 7deg,#d29a58 7deg 12deg,#80552f 12deg 20deg);
  box-shadow:inset 0 0 0 6px #0d151a,0 0 0 2px #d29a5866,0 7px 14px #000b;
}
.machine-gear.active{filter:drop-shadow(0 0 12px #e1a15e)}
.gear-one{left:3%;top:17%;width:96px;height:96px}
.gear-two{right:3%;top:13%;width:82px;height:82px}
.gear-three{left:7%;bottom:8%;width:112px;height:112px}
.gear-four{right:7%;bottom:8%;width:108px;height:108px}
.gear-five{left:22%;top:5%;width:62px;height:62px}
.gear-six{right:22%;bottom:4%;width:66px;height:66px}
.gear-seven{left:50%;top:8%;width:54px;height:54px;transform:translateX(-50%)}
.gear-eight{left:18%;top:32%;width:52px;height:52px}
.gear-nine{right:18%;top:32%;width:52px;height:52px}
.machine-steam{
  z-index:8;
  width:122px;height:100px;
  filter:blur(.2px);
}
.steam-one{left:12%;top:4%}
.steam-two{right:12%;top:4%}
.steam-three{right:0;bottom:22%}
.machine-steam i{
  width:39px;height:39px;
  background:#e2f6f3aa;
  filter:blur(5px);
}
.machine-station{
  z-index:12;
  width:150px;
  min-height:88px;
  padding:10px 12px 9px 39px;
  border:2px solid #687984;
  border-left:5px solid #a67842;
  border-radius:5px 13px 13px 5px;
  background:
    linear-gradient(90deg,#273a43 0 7%,transparent 7%),
    linear-gradient(145deg,#344650,#111a20 66%);
  box-shadow:
    inset 0 1px #ffffff1b,
    inset 0 -7px 0 #0a111655,
    0 10px 20px #000c,
    0 0 0 1px #0a1116;
  backdrop-filter:blur(3px);
}
.machine-station::before{
  content:"";
  position:absolute;
  left:-6px;top:18px;bottom:18px;
  width:3px;
  background:#c28a4b;
  box-shadow:0 0 7px #c28a4b;
}
.machine-station::after{
  content:"";
  position:absolute;
  left:10px;right:10px;bottom:5px;
  height:2px;
  background:linear-gradient(90deg,transparent,#8faab1,transparent);
  opacity:.55;
}
.machine-station.active{
  color:#efffff;
  border-color:#6df0d0;
  border-left-color:var(--machine-green);
  background:
    linear-gradient(90deg,#1c554e 0 7%,transparent 7%),
    linear-gradient(145deg,#24525b,#10262a 66%);
  box-shadow:
    inset 0 1px #ffffff33,
    inset 0 -7px 0 #083b3455,
    0 0 25px #55efcf88,
    0 10px 20px #000c;
}
.machine-station.active::before{background:var(--machine-green);box-shadow:0 0 10px var(--machine-green)}
.station-number{color:#f0b970;font-size:.68rem}
.station-icon{font-size:1.45rem;text-shadow:0 0 10px #63e9ff55}
.machine-station strong{font-size:.7rem;letter-spacing:.1em}
.machine-station small{font-size:.54rem}
.machine-station.active small{color:var(--machine-green)}
.station-led{width:8px;height:8px;background:#424e55}
.machine-station.active .station-led{
  background:var(--machine-green);
  box-shadow:0 0 13px var(--machine-green),0 0 0 2px #111820;
}
.station-bolt{
  position:absolute;
  width:7px;height:7px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff2bd 0 8%,#ad793e 20% 55%,#302016 58%);
  border:1px solid #e1b16a;
  box-shadow:0 0 0 1px #0b1116;
}
.bolt-tl{left:7px;top:7px}
.bolt-br{right:7px;bottom:7px}
.station-1{top:8%;transform:translateX(-50%)}
.station-2{left:61%;top:17%}
.station-9{left:31%;top:17%}
.station-3{right:3%;top:42%}
.station-8{left:3%;top:42%}
.station-4{right:8%;top:64%}
.station-7{left:8%;top:64%}
.station-5{right:24%;bottom:4%}
.station-6{left:24%;bottom:4%}
.machine-console{
  margin-top:12px;
  border:2px solid #8c6a43;
  background:linear-gradient(180deg,#17242a,#070d12);
  box-shadow:inset 0 0 18px #000,0 7px 16px #0009;
}
.console-line{color:#e0a45d}
.console-line b{color:var(--machine-green)}
.status-led.online{background:var(--machine-green);box-shadow:0 0 10px var(--machine-green),0 0 0 2px #18222a}
.machine-hero .hub .module-card{
  border-color:#66563f;
  background:linear-gradient(145deg,#1c292f,#0e151a);
  box-shadow:inset 0 1px #ffffff10,0 7px 12px #0006;
}
.machine-hero .hub .module-card.done{
  border-color:#51cf8a;
  background:linear-gradient(145deg,#16352b,#0c1c17);
}
.machine-scene.complete{
  border-color:#7cf0bb;
  box-shadow:
    inset 0 0 0 10px #07120f,
    inset 0 0 0 12px #6cf0bd55,
    inset 0 0 90px #07140f,
    0 0 0 2px #7cf0bb,
    0 0 55px #5cf0c599;
}
.machine-scene.complete .machine-header-plate{
  color:#b4ffdc;
  border-color:#6df0b3;
  box-shadow:0 0 20px #52f0b477,inset 0 1px #ffffff33;
}
.machine-scene.complete .machine-frame{
  border-color:#4fbc91;
}
.machine-scene.complete .machine-frame b{color:var(--machine-green)}
@media(max-width:760px){
  .machine-scene{height:600px}
  .machine-frame{width:91px;top:30px;bottom:30px}
  .frame-left{left:8px}.frame-right{right:8px}
  .machine-frame small{font-size:.35rem}
  .machine-frame b{font-size:1.55rem}
  .machine-header-plate{width:250px}
  .machine-header-plate strong{font-size:.5rem}
  .machine-header-plate .plate-id{font-size:.4rem}
  .machine-column{transform:scale(.78);transform-origin:top left}
  .column-left{left:4px}.column-right{right:4px;transform:scale(.78) translateX(28%)}
  .machine-piston{scale:.78}
  .piston-left{left:77px}.piston-right{right:77px}
  .machine-station{width:112px;min-height:76px;padding:8px 8px 7px 30px}
  .machine-station strong{font-size:.6rem}
  .machine-station small{font-size:.47rem}
  .station-icon{font-size:1.15rem}
  .station-2{left:58%}.station-9{left:30%}
  .station-3{right:1%}.station-8{left:1%}
  .station-4{right:5%}.station-7{left:5%}
  .station-5{right:16%}.station-6{left:16%}
  .machine-core{width:164px;height:164px}
  .core-lens{width:57px;height:57px}
  .machine-belt{scale:.82}
  .rim-one{width:270px;height:270px}.rim-two{width:335px;height:335px}.rim-three{width:470px;height:470px}
}
@media(max-width:460px){
  .machine-scene{height:570px;border-radius:16px}
  .machine-header-plate{top:11px;width:192px;gap:5px;padding:5px 6px}
  .machine-header-plate strong{font-size:.39rem}
  .machine-header-plate .plate-id{display:none}
  .plate-lamps{gap:2px}
  .plate-lamps i{width:5px;height:5px}
  .machine-frame{width:61px;top:27px;bottom:27px}
  .frame-left{left:4px}.frame-right{right:4px}
  .frame-rivet{width:7px;height:7px}
  .rivet-a{left:9px}.rivet-b{right:9px}
  .frame-strut:nth-of-type(3){left:16px}.frame-strut:nth-of-type(4){right:16px}
  .machine-frame b{font-size:1.05rem}
  .machine-frame small{display:none}
  .machine-column{transform:scale(.55);transform-origin:top left}
  .column-left{left:-8px;top:155px}.column-right{right:-8px;top:155px;transform:scale(.55) translateX(82%)}
  .machine-vent{scale:.7}
  .vent-left{left:86px;top:104px}.vent-right{right:86px;top:104px}
  .machine-piston{scale:.55}
  .piston-left{left:58px}.piston-right{right:58px}.piston-bottom{bottom:11%}
  .machine-station{width:86px;min-height:67px;padding:7px 6px 6px 24px;border-radius:4px 9px 9px 4px}
  .station-number{left:5px;top:6px;font-size:.5rem}
  .station-icon{font-size:.9rem}
  .machine-station strong{font-size:.47rem;letter-spacing:.04em}
  .machine-station small{font-size:.38rem}
  .station-led{right:5px;top:6px;width:6px;height:6px}
  .station-bolt{width:5px;height:5px}
  .bolt-tl{left:5px;top:5px}.bolt-br{right:5px;bottom:5px}
  .station-1{top:9%}
  .station-2{left:57%;top:16%}.station-9{left:27%;top:16%}
  .station-3{right:0;top:40%}.station-8{left:0;top:40%}
  .station-4{right:2%;top:65%}.station-7{left:2%;top:65%}
  .station-5{right:12%;bottom:4%}.station-6{left:12%;bottom:4%}
  .machine-core{width:132px;height:132px;border-width:6px}
  .machine-core::before{inset:-13px}
  .core-lens{width:45px;height:45px;font-size:1.5rem}
  .core-orbit{inset:9px}.orbit-two{inset:19px}.orbit-three{inset:30px}
  .core-bolt{width:6px;height:6px}
  .core-bolt-a{left:17px;top:55px}.core-bolt-b{right:17px;top:55px}
  .core-bolt-c{left:55px;top:17px}.core-bolt-d{left:55px;bottom:17px}
  .core-label{bottom:-33px;width:125px;font-size:.43rem}
  .core-label small{font-size:.35rem}
  .machine-belt{scale:.6}
  .machine-turbine{scale:.64}
  .machine-reactor-coil{scale:.62}
  .rim-one{width:205px;height:205px}.rim-two{width:270px;height:270px}.rim-three{width:380px;height:380px}
  .machine-gear{scale:.72}
  .gear-one{left:0;top:24%}.gear-two{right:0;top:21%}
  .gear-three{left:0;bottom:16%}.gear-four{right:0;bottom:16%}
  .gear-five{left:12%;top:5%}.gear-six{right:12%;bottom:5%}
  .gear-seven{top:9%}.gear-eight{left:17%;top:34%}.gear-nine{right:17%;top:34%}
  .machine-steam{scale:.68}
  .steam-one{left:8%}.steam-two{right:8%}.steam-three{right:-5%;bottom:23%}
  .machine-console{margin-left:0;margin-right:0}
  .console-line{font-size:.46rem}
  .machine-feed{font-size:.4rem}
}


/* ═══════════════════════════════════════════════════════════════
   ACCÈS DIRECT AUX STATIONS — FENÊTRE DE JEU
   ═══════════════════════════════════════════════════════════════ */
.machine-station[role="button"]{
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  transition:color .25s,border-color .25s,box-shadow .25s,background .25s,filter .25s;
}
.machine-station[role="button"]:hover{
  filter:brightness(1.18);
  border-color:#9eeaf0;
  box-shadow:0 0 22px #62e9f077,0 12px 20px #000d;
}
.machine-station[role="button"]:focus-visible{
  outline:3px solid var(--machine-green);
  outline-offset:4px;
  filter:brightness(1.22);
}
.station-action{
  position:absolute;
  right:10px;
  bottom:8px;
  color:#91a8ae;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.42rem;
  font-style:normal;
  font-weight:900;
  letter-spacing:.12em;
}
.machine-station.active .station-action{
  color:var(--machine-green);
  text-shadow:0 0 8px #69ffb3;
}

/* L’obscurité reste derrière la fenêtre, la machine reste visible en dessous. */
body.game-open{
  overflow:hidden;
}
.game-modal{
  position:fixed;
  inset:0;
  z-index:2000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:clamp(8px,3vw,34px);
}
.game-modal.active{
  display:flex;
  animation:modal-fade-in .28s ease both;
}
.game-modal-backdrop{
  position:absolute;
  inset:0;
  cursor:pointer;
  background:
    radial-gradient(ellipse at 50% 42%,#1e5360aa 0%,#081015e8 54%,#020406f5 100%);
  backdrop-filter:blur(8px) saturate(1.15);
}
.game-modal .stage{
  position:relative;
  z-index:1;
  display:block;
  width:min(920px,100%);
  max-height:min(94svh,900px);
  overflow:auto;
  margin:0;
  padding:clamp(14px,3vw,26px);
  border:2px solid #bd8b51;
  border-radius:20px;
  background:
    linear-gradient(145deg,#2b3d46f5,#121c23f7 52%,#080e13f9),
    radial-gradient(circle at 50% 0,#4c6a72aa,transparent 65%);
  box-shadow:
    0 28px 80px #000e,
    0 0 0 6px #071017cc,
    0 0 0 8px #b27d4544,
    inset 0 1px #ffffff22,
    inset 0 -18px 35px #0009;
  animation:modal-rise-in .34s cubic-bezier(.2,.85,.2,1) both;
}
.game-modal .stage::-webkit-scrollbar{width:9px}
.game-modal .stage::-webkit-scrollbar-track{background:#0a1116;border-radius:99px}
.game-modal .stage::-webkit-scrollbar-thumb{background:#997144;border-radius:99px;border:2px solid #0a1116}
.modal-titlebar{
  position:sticky;
  top:-26px;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:34px;
  margin:-26px -26px 17px;
  padding:10px 14px;
  border-bottom:1px solid #9b7144;
  background:linear-gradient(180deg,#1b2b33f8,#101a20f5);
  box-shadow:0 8px 17px #0008;
}
.modal-signal{
  color:#78f1dc;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.58rem;
  font-weight:900;
  letter-spacing:.1em;
}
.modal-signal i{
  display:inline-block;
  width:7px;height:7px;
  margin-right:5px;
  border-radius:50%;
  background:#7dffbc;
  box-shadow:0 0 9px #7dffbc;
  vertical-align:middle;
}
.modal-hint{
  flex:1;
  color:#9babb0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.5rem;
  letter-spacing:.08em;
  text-align:center;
}
.modal-close{
  padding:7px 11px;
  border-color:#af7c48;
  border-radius:6px;
  color:#ffe0aa;
  background:#2a2924;
  font-size:.73rem;
  white-space:nowrap;
}
.modal-close:hover{
  color:#fff;
  border-color:#7fffd2;
  background:#193b3b;
}
.game-modal .stage-head{
  margin-bottom:16px;
  padding-bottom:12px;
  border-bottom:1px solid #62777b55;
}
.game-modal .stage h2{
  color:#e9fbff;
  text-shadow:0 0 12px #5bddeb44;
}
.game-modal .stage .desc{color:#a9bdc1}
.game-modal .stage,
.game-modal .gamebox,
.game-modal .gamebox button,
.game-modal .gamebox [role="button"]{
  touch-action:manipulation;
}
.game-modal .gamebox{
  border-color:#876641;
  background:
    linear-gradient(145deg,#17262d,#090f14),
    repeating-linear-gradient(135deg,transparent 0 16px,#c18a4b0b 16px 19px);
  box-shadow:inset 0 0 22px #000,0 8px 15px #0008;
}
.game-modal .status.ok{
  color:var(--machine-green);
  text-shadow:0 0 12px #6bffb088;
}
@keyframes modal-fade-in{from{opacity:0}to{opacity:1}}
@keyframes modal-rise-in{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}

@media(max-width:760px){
  .game-modal{padding:8px}
  .game-modal .stage{
    max-height:calc(100svh - 16px);
    border-radius:15px;
  }
  .modal-titlebar{
    top:-14px;
    margin:-14px -14px 14px;
    padding:9px 10px;
  }
  .modal-hint{display:none}
  .modal-signal{font-size:.5rem}
  .modal-close{font-size:.66rem;padding:7px 9px}
}
@media(max-width:460px){
  .station-action{right:6px;bottom:7px;font-size:.34rem}
  .game-modal{padding:5px}
  .game-modal .stage{
    max-height:calc(100svh - 10px);
    padding:11px;
    border-radius:13px;
  }
  .modal-titlebar{
    top:-11px;
    margin:-11px -11px 12px;
    padding:8px 8px;
  }
  .modal-signal{font-size:.43rem}
  .modal-close{font-size:.6rem;padding:6px 7px}
  .game-modal .stage-head{margin-bottom:11px;padding-bottom:9px}
  .game-modal .stage h2{font-size:1.05rem;line-height:1.2}
  .game-modal .stage .desc{max-width:100%;font-size:.74rem;line-height:1.35}
  .code-lock-explain{padding:8px 10px;font-size:.76rem;line-height:1.35;text-align:left}
}


/* Les stations intégrées à la machine remplacent l’ancien hub de cartes. */
.hub-fallback{
  display:none !important;
  height:0 !important;
  margin:0 !important;
  overflow:hidden !important;
}


/* Mécanisme 3 — matrice logique de vapeur */
.steam-picross-layout{
  display:grid;
  grid-template-columns:64px minmax(0,420px);
  grid-template-rows:64px minmax(0,420px);
  gap:6px;
  width:min(100%,500px);
  margin:15px auto 10px;
}
.steam-picross-corner{
  display:grid;
  place-items:center;
  border:1px solid #876641;
  border-radius:10px;
  background:radial-gradient(circle,#31515a,#111a20 72%);
  font-size:1.55rem;
  box-shadow:inset 0 0 15px #000,0 0 12px #49d9e833;
}
.steam-clues{
  color:#d6b477;
  font-weight:900;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  text-shadow:0 0 8px #d89d4b55;
}
.steam-col-clues{
  grid-column:2;
  grid-row:1;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:5px;
  align-items:end;
  padding:0 7px 5px;
}
.steam-row-clues{
  grid-column:1;
  grid-row:2;
  display:grid;
  grid-template-rows:repeat(5,minmax(0,1fr));
  gap:5px;
  align-items:center;
  justify-items:end;
  padding-right:5px;
}
.steam-col-clues>div{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:2px;
}
.steam-row-clues>div{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:3px;
}
.steam-clues span{
  display:grid;
  place-items:center;
  min-width:20px;
  height:20px;
  padding:0 3px;
  border:1px solid #a77b49;
  border-radius:5px;
  background:#202b32;
  font-size:.72rem;
}
.steam-board{
  grid-column:2;
  grid-row:2;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:5px;
  padding:7px;
  border:2px solid #876641;
  border-radius:13px;
  background:#080f14;
  box-shadow:inset 0 0 22px #000,0 7px 15px #0008;
}
.steam-cell{
  display:grid;
  place-items:center;
  aspect-ratio:1;
  padding:0;
  border:1px solid #4d606a;
  border-radius:8px;
  background:linear-gradient(145deg,#263740,#101920);
  color:#9ffaff;
  cursor:pointer;
  font-size:1.25rem;
  touch-action:manipulation;
  user-select:none;
  -webkit-user-select:none;
  transition:background .16s,border-color .16s,box-shadow .16s,transform .16s;
}
.steam-cell:hover{
  border-color:#7debf2;
  transform:translateY(-1px);
}
.steam-cell.active{
  border-color:#62eaff;
  background:radial-gradient(circle at 50% 35%,#adffff 0 5%,#2b9eae 22%,#164754 58%,#0b1b22 100%);
  box-shadow:0 0 12px #56eaff99,inset 0 0 13px #bfffff55;
}
.steam-cell.active span{
  color:#e8ffff;
  text-shadow:0 0 10px #fff,0 0 18px #64eaff;
}
.steam-board.solved .steam-cell.active{
  border-color:#7ef29a;
  background:radial-gradient(circle,#baffd3 0 6%,#279d75 25%,#123d34 70%);
  box-shadow:0 0 15px #66f0b088,inset 0 0 13px #d4ffe355;
}
.steam-legend{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  color:#aebbc7;
  font-size:.75rem;
}
.steam-legend-swatch{
  width:15px;
  height:15px;
  display:inline-block;
  border:1px solid #62eaff;
  border-radius:4px;
  background:#2b9eae;
  box-shadow:0 0 8px #56eaff77;
}
@media(max-width:460px){
  .steam-picross-layout{
    grid-template-columns:45px minmax(0,1fr);
    grid-template-rows:54px minmax(0,1fr);
    gap:4px;
    width:100%;
  }
  .steam-picross-corner{
    border-radius:7px;
    font-size:1.15rem;
  }
  .steam-col-clues{gap:3px;padding:0 5px 4px}
  .steam-row-clues{gap:3px;padding-right:3px}
  .steam-clues span{
    min-width:16px;
    height:17px;
    padding:0 2px;
    border-radius:4px;
    font-size:.6rem;
  }
  .steam-board{
    gap:3px;
    padding:5px;
    border-radius:9px;
  }
  .steam-cell{border-radius:5px;font-size:1rem}
}


/* Mécanisme 6 — chambre de polarités magnétiques */
.magnetic-rules{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px 12px;
  max-width:720px;
  margin:12px auto 14px;
  color:#b9c8d0;
  font-size:.76rem;
  line-height:1.35;
  text-align:center;
}
.magnetic-rules span{
  padding:5px 8px;
  border:1px solid #596b76;
  border-radius:7px;
  background:#111a20;
}
.magnetic-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:6px;
  width:min(100%,480px);
  margin:14px auto;
  padding:9px;
  border:2px solid #82613e;
  border-radius:14px;
  background:
    linear-gradient(145deg,#172b34,#080e13),
    repeating-linear-gradient(135deg,transparent 0 14px,#7bbbc20c 14px 17px);
  box-shadow:inset 0 0 25px #000,0 8px 16px #0009;
}
.magnetic-cell{
  position:relative;
  display:grid;
  place-items:center;
  aspect-ratio:1;
  min-width:0;
  padding:0;
  border:1px solid #526772;
  border-radius:9px;
  background:linear-gradient(145deg,#273b44,#101a20);
  color:#dceff3;
  cursor:pointer;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:clamp(1.1rem,4vw,1.55rem);
  font-weight:900;
  touch-action:manipulation;
  user-select:none;
  -webkit-user-select:none;
  transition:transform .14s,border-color .14s,background .14s,box-shadow .14s;
}
.magnetic-cell:hover:not(:disabled){
  transform:translateY(-2px);
  border-color:#a8faff;
}
.magnetic-cell.unknown{
  color:#7d929d;
  background:linear-gradient(145deg,#23313a,#10171c);
}
.magnetic-cell.north{
  color:#dfffff;
  border-color:#5deaff;
  background:radial-gradient(circle at 50% 35%,#b9ffff 0 4%,#299eb5 25%,#123f50 68%);
  box-shadow:0 0 11px #5deaff77,inset 0 0 14px #d5ffff44;
}
.magnetic-cell.south{
  color:#fff0cf;
  border-color:#e1a45c;
  background:radial-gradient(circle at 50% 35%,#fff0bd 0 4%,#bd6f38 25%,#4c281e 68%);
  box-shadow:0 0 11px #e1a45c66,inset 0 0 14px #fff2cb44;
}
.magnetic-cell.clue{
  cursor:default;
  border-style:dashed;
}
.magnetic-cell.clue::before{
  content:"";
  position:absolute;
  inset:4px;
  border:1px solid #ffffff33;
  border-radius:5px;
  pointer-events:none;
}
.magnetic-cell:disabled{
  opacity:1;
}
.magnetic-cell small{
  position:absolute;
  right:4px;
  bottom:3px;
  font-size:.52rem;
  line-height:1;
  opacity:.9;
}
.magnetic-cell.invalid{
  border-color:#ff6b74 !important;
  box-shadow:0 0 13px #ff596666,inset 0 0 15px #ff394422 !important;
  animation:magnetic-shake .18s linear 2;
}
.magnetic-grid.solved .magnetic-cell{
  border-color:#72f2b0;
  box-shadow:0 0 13px #6af0b077,inset 0 0 12px #d0ffe533;
}
@keyframes magnetic-shake{
  25%{transform:translateX(-2px)}
  75%{transform:translateX(2px)}
}
.magnetic-legend{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:7px;
  color:#adbbc3;
  font-size:.75rem;
}
.magnetic-key{
  display:inline-grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:900;
}
.magnetic-key.north{
  color:#dfffff;
  border:1px solid #5deaff;
  background:#1d7d93;
}
.magnetic-key.south{
  color:#fff0cf;
  border:1px solid #e1a45c;
  background:#98552f;
}
.magnetic-key.locked{
  width:auto;
  font-size:.85rem;
}
@media(max-width:460px){
  .magnetic-rules{
    gap:4px;