:root {
  --navy-950: #06182e;
  --navy-900: #0a2444;
  --navy-800: #10345d;
  --blue-600: #1476e8;
  --blue-500: #2395ff;
  --blue-300: #8dd8ff;
  --ice: #eaf6ff;
  --white: #ffffff;
  --steel-100: #e8edf1;
  --steel-300: #aeb9c3;
  --steel-500: #6f7c88;
  --ink: #0e2339;
  --red: #e64b4b;
  --green: #21a36b;
  --amber: #ffc83d;
  --cell: clamp(42px, 12.7vw, 60px);
  --side: clamp(46px, 14.4vw, 66px);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #dfeaf3;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; margin: 0; }

body {
  min-width: 320px;
  background:
    radial-gradient(circle at 20% 10%, rgba(35, 149, 255, .12), transparent 30rem),
    #dfeaf3;
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; }
button:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
[hidden] { display: none !important; }

.app-shell {
  width: min(100%, 580px);
  min-height: 100svh;
  margin: 0 auto;
  background: #f7fbff;
  box-shadow: 0 0 45px rgba(6, 24, 46, .17);
  overflow: hidden;
}

.primary-button,
.secondary-button,
.link-button {
  border: 0;
  cursor: pointer;
  min-height: 52px;
  font-weight: 900;
  letter-spacing: .035em;
}

.primary-button {
  color: var(--white);
  background: linear-gradient(135deg, var(--blue-600), #0756ba);
  border-radius: 15px;
  box-shadow: 0 9px 22px rgba(20, 118, 232, .31), inset 0 1px 0 rgba(255,255,255,.22);
}

.primary-button:active { transform: translateY(1px); box-shadow: 0 4px 12px rgba(20, 118, 232, .28); }
.primary-button:disabled { opacity: .58; cursor: wait; }

/* Start */
.start-screen {
  position: relative;
  min-height: 100svh;
  padding: max(28px, env(safe-area-inset-top)) 26px max(22px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white);
  background:
    radial-gradient(circle at 50% 35%, rgba(26, 129, 238, .32), transparent 18rem),
    linear-gradient(150deg, #0d3159 0%, var(--navy-950) 62%, #041120 100%);
  isolation: isolate;
}

.start-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .13;
  background-image:
    linear-gradient(rgba(255,255,255,.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.2) 1px, transparent 1px);
  background-size: 38px 38px;
}

.start-screen::after {
  content: "";
  position: absolute;
  inset: auto -80px -90px;
  height: 260px;
  z-index: -1;
  background: linear-gradient(160deg, transparent 26%, rgba(32, 139, 250, .16) 26% 54%, transparent 54%);
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  font-style: italic;
  font-size: 2rem;
  letter-spacing: -.09em;
  margin-bottom: 24px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.2));
}

.brand-scs { font-weight: 950; }
.brand-67 {
  display: grid;
  place-items: center;
  width: 44px;
  height: 34px;
  margin-left: 7px;
  border-radius: 8px;
  color: var(--white);
  background: var(--blue-600);
  font-size: 1.18rem;
  letter-spacing: -.05em;
  transform: skew(-8deg);
}

.eyebrow,
.mission-kicker,
.result-kicker {
  margin: 0;
  color: var(--blue-300);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .2em;
}

.start-screen h1 {
  margin: 8px 0 14px;
  font-size: clamp(2.55rem, 12vw, 4.2rem);
  line-height: .92;
  letter-spacing: -.055em;
  text-shadow: 0 8px 28px rgba(0,0,0,.25);
}

.start-copy {
  max-width: 340px;
  margin: 0;
  color: #dcecff;
  font-size: 1.05rem;
  line-height: 1.45;
}

.start-fixture {
  position: relative;
  width: 220px;
  height: 76px;
  margin: 36px 0 25px;
}

.fixture-pipe {
  position: absolute;
  left: 22px;
  top: 31px;
  width: 166px;
  height: 16px;
  border: 2px solid #d6e0e8;
  border-radius: 8px;
  background: linear-gradient(#8a98a4, #e9eef2 43%, #71808c 48%, #aab5be);
  box-shadow: 0 8px 17px rgba(0,0,0,.27);
}

.fixture-valve,
.valve-handle {
  position: absolute;
  background: var(--red);
  border: 3px solid #ff8f8f;
  box-shadow: 0 3px 7px rgba(0,0,0,.3);
}

.fixture-valve { left: 13px; top: 17px; width: 16px; height: 43px; border-radius: 5px; }
.fixture-valve::after { content: ""; position: absolute; left: -12px; top: 10px; width: 35px; height: 12px; border-radius: 6px; background: #d63d3d; border: 2px solid #ff8f8f; }
.fixture-drop { position: absolute; right: 12px; top: 42px; width: 13px; height: 19px; border-radius: 10px 10px 12px 12px; background: var(--blue-500); transform: rotate(45deg); animation: drop-bob 1.5s ease-in-out infinite; }

@keyframes drop-bob { 50% { transform: translateY(8px) rotate(45deg); opacity: .55; } }

.start-button { width: min(100%, 340px); font-size: 1rem; }
.start-button span { margin-left: 12px; font-size: 1.2rem; }
.brand-footer { margin: 26px 0 0; color: #85a9cf; font-size: .62rem; font-weight: 800; letter-spacing: .12em; }

/* Game */
.game-screen { min-height: 100svh; padding-bottom: max(18px, env(safe-area-inset-bottom)); }

.game-header {
  min-height: 58px;
  padding: max(10px, env(safe-area-inset-top)) 14px 10px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  color: var(--white);
  background: var(--navy-950);
}

.mini-brand { font-size: 1.05rem; font-style: italic; letter-spacing: -.055em; }
.mini-brand span { margin-left: 4px; padding: 3px 5px; border-radius: 4px; font-weight: 900; background: var(--blue-600); }
.level-chip { padding: 6px 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: #c9e7ff; font-size: .72rem; font-weight: 900; letter-spacing: .08em; }
.timer-pill { justify-self: end; display: flex; gap: 6px; align-items: center; font-variant-numeric: tabular-nums; }
.timer-pill span { color: var(--blue-300); font-size: 1.1rem; }

.mission-card {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 18px;
  row-gap: 2px;
  padding: 16px 18px 13px;
  color: var(--white);
  background: linear-gradient(135deg, var(--navy-800), var(--navy-900));
  border-bottom: 4px solid var(--blue-600);
}

.mission-card h2 { margin: 2px 0 0; font-size: 1.35rem; line-height: 1; }
.mission-card > p { margin: 0; align-self: center; font-size: .86rem; line-height: 1.35; color: #eff7ff; }
.mission-card small { grid-column: 2; color: #8fb4d5; font-size: .72rem; font-style: italic; }

.objective {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  padding: 12px 14px 9px;
}

.objective-point { display: flex; align-items: center; gap: 7px; font-size: .68rem; font-weight: 900; letter-spacing: .04em; }
.objective-point:last-child { justify-content: flex-end; text-align: right; }
.objective-point b { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; color: var(--white); font-size: .82rem; }
.tone-cold b { background: var(--blue-600); }
.tone-hot b { background: #e64242; }
.tone-ok b { background: var(--green); }
.tone-drain b { background: #536d7d; }
.objective-line { position: relative; min-width: 96px; height: 22px; display: grid; place-items: center; color: var(--blue-600); font-size: .65rem; font-weight: 950; letter-spacing: .08em; }
.objective-line::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--blue-300); }
.objective-line::after { content: "›"; position: absolute; right: -1px; top: -3px; font-size: 1.2rem; }
.objective-line span { position: relative; padding: 0 6px; background: #f7fbff; }
.objective-dual { padding-block: 8px 7px; }
.objective-dual .objective-line { min-width: 104px; }
.objective-stack { display: grid; gap: 4px; }
.objective-stack .objective-point { justify-content: flex-start; gap: 5px; text-align: left; font-size: .65rem; }
.objective-stack .objective-point b { width: 22px; height: 22px; flex-basis: 22px; font-size: .7rem; }
.objective-stack-right .objective-point { justify-content: flex-end; text-align: right; }
.objective-heating .objective-line { min-width: 154px; }
.objective-heating .objective-line span { font-size: .55rem; letter-spacing: .035em; }
.objective-complete { display: block; padding-block: 7px; }
.objective-supply,
.objective-drain { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.objective-drain { margin-top: 5px; padding-top: 5px; border-top: 1px solid #d7e2ea; }
.objective-drain .objective-point:last-child { justify-content: flex-end; }
.objective-line-drain { min-width: 142px; color: #536d7d; }
.objective-line-drain::before { background: #a6b7c2; }
.objective-line-drain span { font-size: .58rem; color: #455e6e; }
.objective-final { display: grid; grid-template-columns: 1fr; gap: 4px; padding-block: 6px; }
.objective-final-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 7px; align-items: center; }
.objective-final-row + .objective-final-row { padding-top: 4px; border-top: 1px solid #dce6ed; }
.objective-final .objective-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.objective-final .objective-line { min-width: 92px; }
.objective-final .objective-line span { font-size: .56rem; letter-spacing: .05em; }
.objective-final-drain .objective-point:last-child { justify-content: flex-end; }

.board-shell {
  position: relative;
  width: calc(var(--cell) * var(--cols, 5) + var(--side) * 2);
  margin: 0 auto;
  padding: 0 var(--side);
}

.board {
  display: grid;
  padding: 3px;
  border: 2px solid #bccad6;
  border-radius: 12px;
  background: #d3dee7;
  box-shadow: 0 9px 24px rgba(9, 37, 68, .15), inset 0 1px 0 #fff;
}

.board-cell {
  position: relative;
  width: var(--cell);
  height: var(--cell);
  padding: 0;
  border: 1px solid #c4d0da;
  background:
    linear-gradient(135deg, rgba(255,255,255,.72), rgba(236,242,247,.68)),
    #eef4f8;
  cursor: pointer;
  overflow: visible;
}

.board-cell:nth-child(5n + 1) { border-left-color: #aab9c6; }
.board-cell:active { background: #dceaf5; }
.pipe-arm {
  position: absolute;
  z-index: 2;
  overflow: hidden;
  border: 1px solid #64727e;
  background: linear-gradient(90deg, #74818c 0%, #dfe5e9 26%, #fff 43%, #9aa6af 69%, #66737e 100%);
  box-shadow: 0 2px 3px rgba(7, 28, 54, .18);
}

.pipe-arm::after {
  content: "";
  position: absolute;
  z-index: 3;
  opacity: 0;
  background: #28a9ff;
  box-shadow: 0 0 6px #28a9ff, 0 0 11px rgba(40,169,255,.8);
  transition: opacity .16s ease;
}

.dir-n, .dir-s { left: calc(50% - 7px); width: 14px; height: calc(50% + 1px); }
.dir-n { top: -1px; border-radius: 5px 5px 0 0; }
.dir-s { top: 50%; border-radius: 0 0 5px 5px; }
.dir-e, .dir-w { top: calc(50% - 7px); width: calc(50% + 1px); height: 14px; }
.dir-e { left: 50%; border-radius: 0 5px 5px 0; }
.dir-w { left: -1px; border-radius: 5px 0 0 5px; }

.dir-n::after, .dir-s::after { left: 5px; top: 0; bottom: 0; width: 3px; }
.dir-e::after, .dir-w::after { top: 5px; left: 0; right: 0; height: 3px; }
.board-cell.water .pipe-arm::after,
.board-cell.water-cold .pipe-arm::after,
.board-cell.water-hot .pipe-arm::after { opacity: 1; }
.board-cell.water-hot .pipe-arm::after { background: #ff4f45; box-shadow: 0 0 6px #ff4f45, 0 0 11px rgba(255,79,69,.82); }
.board-cell.water-drain .pipe-arm::after { opacity: 1; background: #80d8ff; box-shadow: 0 0 6px #80d8ff, 0 0 11px rgba(128,216,255,.72); }
.board-cell.water-mixed .pipe-arm::after { background: linear-gradient(90deg, #ff4f45 0 45%, #a96cff 48% 52%, #28a9ff 55% 100%); box-shadow: 0 0 7px #aa68ff; }

.pipe-joint {
  position: absolute;
  z-index: 4;
  left: calc(50% - 10px);
  top: calc(50% - 10px);
  width: 20px;
  height: 20px;
  border: 2px solid #63717c;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff 0 16%, #bdc7ce 30%, #73808a 73%, #53616c);
  box-shadow: 0 2px 4px rgba(0,0,0,.22);
}

.board-cell.water .pipe-joint,
.board-cell.water-cold .pipe-joint { box-shadow: 0 0 0 2px var(--blue-500), 0 0 10px rgba(35,149,255,.9); }
.board-cell.water-hot .pipe-joint { box-shadow: 0 0 0 2px #ff5148, 0 0 10px rgba(255,81,72,.9); }
.board-cell.water-drain .pipe-joint { box-shadow: 0 0 0 2px #80d8ff, 0 0 10px rgba(128,216,255,.78); }
.board-cell.water-mixed .pipe-joint { box-shadow: 0 0 0 2px #a96cff, 0 0 11px rgba(169,108,255,.9); }
.board-cell.family-gravity .pipe-arm {
  border-color: #66737b;
  background: linear-gradient(90deg, #56636b 0%, #c8d0d5 22%, #f4f6f7 43%, #9aa5ab 70%, #515e66 100%);
}
.board-cell.family-gravity .dir-n,
.board-cell.family-gravity .dir-s { left: calc(50% - 9px); width: 18px; }
.board-cell.family-gravity .dir-e,
.board-cell.family-gravity .dir-w { top: calc(50% - 9px); height: 18px; }
.board-cell.family-gravity .dir-n::after,
.board-cell.family-gravity .dir-s::after { left: 7px; }
.board-cell.family-gravity .dir-e::after,
.board-cell.family-gravity .dir-w::after { top: 7px; }
.board-cell.family-gravity .pipe-joint { left: calc(50% - 12px); top: calc(50% - 12px); width: 24px; height: 24px; border-color: #5d6970; }
.board-cell.piece-drain-elbow45 .pipe-joint { border-radius: 7px; transform: rotate(45deg) scale(.82); }
.siphon-mark {
  position: absolute;
  z-index: 8;
  left: calc(50% - 9px);
  top: calc(50% - 7px);
  width: 18px;
  height: 16px;
  border: 4px solid #4c5961;
  border-top: 0;
  border-radius: 0 0 9px 9px;
  box-shadow: inset 0 -3px 0 #83d8ff;
  pointer-events: none;
}
.board-cell.component-selected { z-index: 9; box-shadow: inset 0 0 0 3px var(--amber), 0 0 0 2px #fff; }
.board-cell.component-error { z-index: 9; box-shadow: inset 0 0 0 3px #e64b4b, 0 0 12px rgba(230,75,75,.65); }
.board-cell.flow-blocked { z-index: 9; box-shadow: inset 0 0 0 3px #ff9d2e, 0 0 12px rgba(255,157,46,.6); }
.valve-mark {
  position: absolute;
  z-index: 8;
  left: calc(50% - 14px);
  top: calc(50% - 9px);
  width: 28px;
  height: 18px;
  border: 2px solid #82551e;
  border-radius: 6px;
  background: linear-gradient(135deg, #956222, #f0c968 45%, #98621e);
  box-shadow: 0 2px 4px rgba(7,28,54,.3);
  pointer-events: none;
}
.valve-mark::before { content: ""; position: absolute; left: 10px; top: -8px; width: 5px; height: 8px; background: #8a5b23; }
.valve-mark::after { content: ""; position: absolute; left: 7px; top: -12px; width: 28px; height: 6px; border: 1px solid #9e1e25; border-radius: 5px; background: linear-gradient(#ff655d, #c72d35); transform-origin: 5px 50%; transition: transform .18s ease; }
.board-cell[data-rotation="1"] .valve-mark { transform: rotate(90deg); }
.board-cell.state-closed .valve-mark::after { transform: rotate(90deg); }
.board-cell.state-closed .valve-mark { filter: saturate(.72); }
.circulator-mark {
  position: absolute;
  z-index: 8;
  left: calc(50% - 14px);
  top: calc(50% - 14px);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 3px solid #7c2227;
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle at 35% 30%, #ff6a60, #c52e35 58%, #751b22);
  box-shadow: 0 2px 5px rgba(7,28,54,.34);
  font-size: .8rem;
  font-weight: 950;
  line-height: 1;
  pointer-events: none;
}
.board-cell[data-rotation="1"] .circulator-mark { transform: rotate(90deg); }
.board-cell[data-rotation="2"] .circulator-mark { transform: rotate(180deg); }
.board-cell[data-rotation="3"] .circulator-mark { transform: rotate(-90deg); }
.board-cell.water-hot .circulator-mark,
.board-cell.water-cold .circulator-mark { animation: pump-pulse .55s ease-in-out infinite alternate; box-shadow: 0 0 0 3px rgba(255,255,255,.7), 0 0 14px currentColor; }
@keyframes pump-pulse { to { filter: brightness(1.35); } }
.board-cell.leaking { z-index: 12; }

.spray {
  position: absolute;
  z-index: 20;
  width: 12px;
  height: 12px;
  pointer-events: none;
}
.spray::before,
.spray::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 10px;
  border-radius: 60% 40% 60% 40%;
  background: #21a8ff;
  box-shadow: 0 0 5px rgba(33,168,255,.8);
  animation: spray .55s ease-out infinite;
}
.spray::after { animation-delay: .22s; transform: scale(.65); }
.spray.hot::before,
.spray.hot::after { background: #ff5148; box-shadow: 0 0 5px rgba(255,81,72,.85); }
.spray.dir-n { top: -8px; left: calc(50% - 6px); transform: rotate(180deg); }
.spray.dir-s { bottom: -9px; left: calc(50% - 6px); }
.spray.dir-e { right: -9px; top: calc(50% - 6px); transform: rotate(-90deg); }
.spray.dir-w { left: -9px; top: calc(50% - 6px); transform: rotate(90deg); }

@keyframes spray { from { transform: translateY(0) scale(.65) rotate(45deg); opacity: 1; } to { transform: translateY(18px) scale(1) rotate(45deg); opacity: 0; } }
.board-cell.drain-problem { z-index: 12; box-shadow: inset 0 0 0 3px #ff9d2e; }
.drain-drop { position: absolute; z-index: 20; width: 9px; height: 13px; border-radius: 60% 40% 60% 40%; background: #72cfff; box-shadow: 0 0 7px #72cfff; animation: drain-drip .75s ease-in infinite; }
.drain-drop.dir-n { top: -8px; left: calc(50% - 5px); }
.drain-drop.dir-s { bottom: -10px; left: calc(50% - 5px); }
.drain-drop.dir-e { right: -9px; top: calc(50% - 6px); }
.drain-drop.dir-w { left: -9px; top: calc(50% - 6px); }
@keyframes drain-drip { 50% { transform: translateY(9px) rotate(45deg); opacity: .55; } }

.endpoint {
  position: absolute;
  z-index: 8;
  width: var(--side);
  height: var(--cell);
  pointer-events: none;
}

/* Point A: canalisation, vanne d'arrêt en laiton, puis sortie vers la grille. */
.endpoint-source { left: 0; top: calc(var(--cell) * 3 + 3px); }
.source-pipe {
  position: absolute;
  top: calc(50% - 6px);
  height: 12px;
  border: 1px solid #65727d;
  background: linear-gradient(#6e7d88 0%, #eef2f4 34%, #a6b0b8 58%, #5e6d78 100%);
  box-shadow: 0 2px 4px rgba(7, 28, 54, .22);
}
.source-pipe::after,
.sink-feed::after,
.sink-riser::after {
  content: "";
  position: absolute;
  opacity: 0;
  background: #24a7ff;
  box-shadow: 0 0 5px #24a7ff;
  transition: opacity .16s ease;
}
.source-pipe::after,
.sink-feed::after { left: 0; right: 0; top: 4px; height: 2px; }
.source-pipe-in { left: 0; width: 14px; border-radius: 0 3px 3px 0; }
.source-pipe-out { left: 34px; right: -2px; border-radius: 3px 0 0 3px; }
.valve-body {
  position: absolute;
  z-index: 3;
  left: 11px;
  top: calc(50% - 12px);
  width: 27px;
  height: 24px;
  border: 1px solid #8b581c;
  border-radius: 7px;
  background:
    radial-gradient(circle at 38% 32%, #fff0a4 0 8%, transparent 9%),
    linear-gradient(135deg, #8f5b1d 0%, #e4b553 33%, #f8d779 51%, #a86c24 77%, #704315 100%);
  box-shadow: 0 3px 6px rgba(7, 28, 54, .28), inset 0 1px 1px rgba(255,255,255,.65);
}
.valve-body::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid #7a4c17;
  background: #dca744;
}
.valve-collar {
  position: absolute;
  top: 4px;
  width: 6px;
  height: 14px;
  border: 1px solid #80501a;
  background: linear-gradient(90deg, #7b4a14, #f0c267 46%, #8a561b);
}
.valve-collar-in { left: -4px; border-radius: 3px 0 0 3px; }
.valve-collar-out { right: -4px; border-radius: 0 3px 3px 0; }
.valve-stem {
  position: absolute;
  left: 10px;
  top: -9px;
  width: 6px;
  height: 11px;
  border: 1px solid #7b4c19;
  background: linear-gradient(90deg, #906124, #e1b657, #86531d);
}
.valve-lever {
  position: absolute;
  left: 8px;
  top: -14px;
  width: 34px;
  height: 7px;
  border: 1px solid #0756a9;
  border-radius: 5px 8px 8px 5px;
  background: linear-gradient(#28a4ff, #0873d9 55%, #0757ae);
  box-shadow: 0 2px 3px rgba(7, 28, 54, .28), inset 0 1px rgba(255,255,255,.45);
  transform: rotate(-4deg);
  transform-origin: 3px 50%;
}
.endpoint-source.pressurized .source-pipe::after { opacity: 1; }
.endpoint-source.pressurized .valve-body { box-shadow: 0 0 0 2px rgba(35,149,255,.65), 0 0 11px rgba(35,149,255,.8), inset 0 1px 1px rgba(255,255,255,.65); }
.endpoint-leak { display: none; position: absolute; right: -2px; top: 28px; width: 8px; height: 13px; border-radius: 60% 40% 60% 40%; background: var(--blue-500); animation: drop-bob .7s ease-in infinite; }
.endpoint-source.leaking .endpoint-leak,
.valve-endpoint.leaking .endpoint-leak { display: block; }

/* Niveau 2 : deux arrivées indépendantes. */
.endpoint-hot { left: 0; top: calc(var(--cell) + 3px); }
.endpoint-cold { left: 0; top: calc(var(--cell) * 3 + 3px); }
.endpoint-hot .valve-lever { border-color: #a81f25; background: linear-gradient(#ff6a63, #df383f 55%, #aa1f28); }
.endpoint-hot .endpoint-leak { background: #ff5148; }
.valve-endpoint.pressurized .source-pipe::after { opacity: 1; }
.endpoint-hot .source-pipe::after { background: #ff5148; box-shadow: 0 0 5px #ff5148; }
.endpoint-hot.pressurized .valve-body { box-shadow: 0 0 0 2px rgba(255,81,72,.68), 0 0 11px rgba(255,81,72,.8), inset 0 1px 1px rgba(255,255,255,.65); }
.endpoint-cold.pressurized .valve-body { box-shadow: 0 0 0 2px rgba(35,149,255,.65), 0 0 11px rgba(35,149,255,.8), inset 0 1px 1px rgba(255,255,255,.65); }
.endpoint-letter { display: none; position: absolute; z-index: 12; right: 3px; top: -13px; width: 20px; height: 20px; place-items: center; border-radius: 50%; color: #fff; font-size: .64rem; font-weight: 950; box-shadow: 0 2px 5px rgba(7,28,54,.22); }
.endpoint-letter-hot { background: #e64242; }
.endpoint-letter-cold { background: var(--blue-600); }
.game-screen[data-level="3"] .endpoint-letter { display: grid; }

/* Point B: attente EF au bord de la grille, remontée vers un lavabo identifiable. */
.endpoint-sink { right: 0; top: calc(var(--cell) + 3px); }
.sink-feed {
  position: absolute;
  left: -2px;
  right: 15px;
  top: calc(50% - 6px);
  height: 12px;
  border: 1px solid #65727d;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(#6e7d88 0%, #eef2f4 34%, #a6b0b8 58%, #5e6d78 100%);
  box-shadow: 0 2px 4px rgba(7, 28, 54, .22);
}
.sink-riser {
  position: absolute;
  z-index: 2;
  right: 14px;
  top: -15px;
  width: 11px;
  height: calc(50% + 21px);
  border: 1px solid #65727d;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(90deg, #687782 0%, #f2f5f6 42%, #98a4ad 66%, #5e6d78 100%);
  box-shadow: 2px 0 4px rgba(7, 28, 54, .2);
}
.sink-riser::after { top: 0; bottom: 0; left: 4px; width: 2px; }
.washbasin { position: absolute; z-index: 5; right: -4px; top: -18px; width: 74px; height: 42px; }
.basin-rim {
  position: absolute;
  left: 0;
  right: 0;
  top: 5px;
  height: 12px;
  border: 2px solid #8e9ca6;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #dce6eb 0 43%, #fff 47% 70%, #c2cdd4 74% 100%);
  box-shadow: 0 3px 5px rgba(7, 28, 54, .18);
}
.basin-bowl {
  position: absolute;
  left: 6px;
  right: 6px;
  top: 11px;
  height: 24px;
  border: 2px solid #9daab3;
  border-top: 0;
  border-radius: 4px 4px 32px 32px / 3px 3px 23px 23px;
  background: linear-gradient(90deg, #b5c0c8, #fff 25% 72%, #b7c2c9);
  box-shadow: 0 4px 5px rgba(7, 28, 54, .2);
}
.basin-drain {
  position: absolute;
  left: 33px;
  top: 33px;
  width: 8px;
  height: 12px;
  border: 1px solid #65727d;
  background: linear-gradient(90deg, #65737e, #eef2f4, #697782);
}
.basin-drain::after {
  content: "";
  position: absolute;
  left: -2px;
  top: 9px;
  width: 13px;
  height: 8px;
  border: 3px solid #73818b;
  border-top: 0;
  border-radius: 0 0 8px 8px;
}
.faucet { position: absolute; z-index: 7; right: 8px; top: -43px; width: 34px; height: 35px; }
.faucet-neck {
  position: absolute;
  right: 4px;
  bottom: 0;
  width: 8px;
  height: 30px;
  border: 2px solid #687680;
  border-radius: 5px;
  background: linear-gradient(90deg, #65737e, #f5f7f8 44%, #788690);
  box-shadow: 1px 1px 3px rgba(7, 28, 54, .24);
}
.faucet-spout {
  position: absolute;
  right: 4px;
  top: 0;
  width: 27px;
  height: 17px;
  border: 7px solid #7a8790;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0 11px 0 0;
  filter: drop-shadow(1px 2px 1px rgba(7,28,54,.2));
}
.faucet-handle {
  position: absolute;
  right: 1px;
  top: 3px;
  width: 13px;
  height: 5px;
  border: 1px solid #687680;
  border-radius: 4px;
  background: linear-gradient(#eef2f4, #788690);
}
.endpoint-sink.flowing .sink-feed::after,
.endpoint-sink.flowing .sink-riser::after { opacity: 1; }
.water-flow { display: none; position: absolute; z-index: 8; right: 37px; top: -29px; width: 3px; height: 21px; border-radius: 3px; background: var(--blue-500); box-shadow: 0 0 5px var(--blue-500); animation: flow .45s linear infinite; }
.endpoint-sink.flowing .water-flow { display: block; }
@keyframes flow { 50% { opacity: .52; transform: scaleY(.8); transform-origin: top; } }

/* Niveau 2 : lavabo à mitigeur et deux attentes distinctes C/D. */
.endpoint-mixer {
  position: absolute;
  z-index: 8;
  right: 0;
  top: 3px;
  width: var(--side);
  height: calc(var(--cell) * 5);
  pointer-events: none;
}
.mixer-feed {
  position: absolute;
  left: -2px;
  width: 27px;
  height: 12px;
  border: 1px solid #65727d;
  background: linear-gradient(#6e7d88 0%, #eef2f4 34%, #a6b0b8 58%, #5e6d78 100%);
  box-shadow: 0 2px 4px rgba(7,28,54,.2);
}
.mixer-feed::before {
  content: "";
  position: absolute;
  left: 2px;
  right: 5px;
  top: 4px;
  height: 2px;
  border-radius: 2px;
}
.mixer-feed-hot { top: calc(var(--cell) * .5 - 6px); }
.mixer-feed-cold { top: calc(var(--cell) * 4.5 - 6px); }
.mixer-feed-hot::before { background: #ff5148; box-shadow: 0 0 4px rgba(255,81,72,.8); }
.mixer-feed-cold::before { background: #2395ff; box-shadow: 0 0 4px rgba(35,149,255,.8); }
.mixer-riser {
  position: absolute;
  z-index: 2;
  width: 10px;
  border: 1px solid #65727d;
  background: linear-gradient(90deg, #65747f, #f4f6f7 44%, #72808b);
  box-shadow: 1px 1px 3px rgba(7,28,54,.2);
}
.mixer-riser::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0;
  bottom: 0;
  width: 2px;
  opacity: .35;
}
.mixer-riser-hot { left: 18px; top: calc(var(--cell) * .5); height: calc(var(--cell) * 1.8); border-radius: 0 0 5px 5px; }
.mixer-riser-cold { left: 34px; top: calc(var(--cell) * 2.7); height: calc(var(--cell) * 1.8); border-radius: 5px 5px 0 0; }
.mixer-riser-hot::after { background: #ff5148; }
.mixer-riser-cold::after { background: #2395ff; }
.mixer-basin { position: absolute; z-index: 5; right: -5px; top: calc(var(--cell) * 2.1); width: 76px; height: 50px; }
.mixer-basin-rim {
  position: absolute;
  left: 0;
  right: 0;
  top: 5px;
  height: 13px;
  border: 2px solid #8e9ca6;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #dce6eb 0 43%, #fff 47% 70%, #c2cdd4 74% 100%);
  box-shadow: 0 3px 5px rgba(7,28,54,.18);
}
.mixer-basin-bowl {
  position: absolute;
  left: 6px;
  right: 6px;
  top: 12px;
  height: 27px;
  border: 2px solid #9daab3;
  border-top: 0;
  border-radius: 4px 4px 34px 34px / 3px 3px 25px 25px;
  background: linear-gradient(90deg, #b5c0c8, #fff 25% 72%, #b7c2c9);
  box-shadow: 0 4px 5px rgba(7,28,54,.2);
}
.mixer-basin-drain {
  position: absolute;
  left: 34px;
  top: 38px;
  width: 9px;
  height: 15px;
  border: 1px solid #65727d;
  background: linear-gradient(90deg, #65737e, #eef2f4, #697782);
}
.mixer-basin-drain::after {
  content: "";
  position: absolute;
  left: -2px;
  top: 11px;
  width: 14px;
  height: 9px;
  border: 3px solid #73818b;
  border-top: 0;
  border-radius: 0 0 8px 8px;
}
.mixer-tap { position: absolute; z-index: 7; right: 7px; top: calc(var(--cell) * 2.1 - 29px); width: 37px; height: 38px; }
.mixer-tap-body { position: absolute; right: 5px; bottom: 0; width: 10px; height: 31px; border: 2px solid #687680; border-radius: 5px; background: linear-gradient(90deg, #65737e, #f5f7f8 44%, #788690); }
.mixer-tap-spout { position: absolute; right: 5px; top: 0; width: 29px; height: 18px; border: 7px solid #7a8790; border-bottom: 0; border-left: 0; border-radius: 0 12px 0 0; filter: drop-shadow(1px 2px 1px rgba(7,28,54,.2)); }
.mixer-tap-handle { position: absolute; right: 0; top: 1px; width: 15px; height: 6px; border: 1px solid #687680; border-radius: 4px; background: linear-gradient(#eef2f4, #788690); }
.mixer-water-flow { display: none; position: absolute; z-index: 9; right: 39px; top: calc(var(--cell) * 2.1 - 14px); width: 4px; height: 23px; border-radius: 4px; background: #2395ff; box-shadow: 0 0 6px #2395ff; animation: flow .45s linear infinite; }
.endpoint-mixer.flowing .mixer-water-flow { display: block; }
.endpoint-mixer.flowing .mixer-riser::after { opacity: 1; box-shadow: 0 0 5px currentColor; }

/* Niveau 3 : lavabo complet, bonde visible et attente PVC F. */
.game-screen[data-level="3"] { --cell: clamp(35px, 10.6vw, 50px); --side: clamp(46px, 14vw, 64px); }
.game-screen[data-level="3"] .endpoint-hot { top: calc(var(--cell) + 3px); }
.game-screen[data-level="3"] .endpoint-cold { top: calc(var(--cell) * 3 + 3px); }
.endpoint-complete {
  position: absolute;
  z-index: 8;
  right: 0;
  top: 3px;
  width: var(--side);
  height: calc(var(--cell) * 6);
  pointer-events: none;
}
.complete-feed,
.complete-drain-feed {
  position: absolute;
  left: -2px;
  width: 29px;
  border: 1px solid #65727d;
  box-shadow: 0 2px 4px rgba(7,28,54,.2);
}
.complete-feed {
  height: 12px;
  background: linear-gradient(#6e7d88 0%, #eef2f4 34%, #a6b0b8 58%, #5e6d78 100%);
}
.complete-feed::after,
.complete-drain-feed::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 4px;
  top: 4px;
  height: 2px;
  opacity: .38;
}
.complete-feed-hot { top: calc(var(--cell) * .5 - 6px); }
.complete-feed-cold { top: calc(var(--cell) * 2.5 - 6px); }
.complete-feed-hot::after { background: #ff5148; }
.complete-feed-cold::after { background: #2395ff; }
.complete-riser {
  position: absolute;
  z-index: 2;
  width: 10px;
  border: 1px solid #65727d;
  border-radius: 5px;
  background: linear-gradient(90deg, #65747f, #f4f6f7 44%, #72808b);
}
.complete-riser::after { content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 2px; opacity: .35; }
.complete-riser-hot { left: 17px; top: calc(var(--cell) * .5); height: calc(var(--cell) * 2.8); }
.complete-riser-cold { left: 34px; top: calc(var(--cell) * 2.5); height: calc(var(--cell) * .8); }
.complete-riser-hot::after { background: #ff5148; }
.complete-riser-cold::after { background: #2395ff; }
.complete-basin { position: absolute; z-index: 5; right: -5px; top: calc(var(--cell) * 3.1); width: 78px; height: 55px; }
.complete-basin-rim { position: absolute; left: 0; right: 0; top: 5px; height: 13px; border: 2px solid #8e9ca6; border-radius: 50%; background: radial-gradient(ellipse at center, #dce6eb 0 43%, #fff 47% 70%, #c2cdd4 74% 100%); box-shadow: 0 3px 5px rgba(7,28,54,.18); }
.complete-basin-water { position: absolute; z-index: 1; left: 11px; right: 11px; top: 11px; height: 8px; border-radius: 50%; background: #67c8ff; opacity: 0; transition: opacity .2s ease; }
.complete-basin-bowl { position: absolute; z-index: 2; left: 6px; right: 6px; top: 12px; height: 29px; border: 2px solid #9daab3; border-top: 0; border-radius: 4px 4px 34px 34px / 3px 3px 25px 25px; background: linear-gradient(90deg, rgba(181,192,200,.9), rgba(255,255,255,.72) 25% 72%, rgba(183,194,201,.9)); box-shadow: 0 4px 5px rgba(7,28,54,.2); }
.complete-basin-drain { position: absolute; z-index: 3; left: 34px; top: 39px; width: 10px; height: calc(var(--cell) * 1.25); border: 2px solid #66737b; background: linear-gradient(90deg, #56636b, #f4f6f7 44%, #59666e); }
.complete-tap { position: absolute; z-index: 7; right: 7px; top: calc(var(--cell) * 3.1 - 29px); width: 37px; height: 38px; }
.complete-tap-body { position: absolute; right: 5px; bottom: 0; width: 10px; height: 31px; border: 2px solid #687680; border-radius: 5px; background: linear-gradient(90deg, #65737e, #f5f7f8 44%, #788690); }
.complete-tap-spout { position: absolute; right: 5px; top: 0; width: 29px; height: 18px; border: 7px solid #7a8790; border-bottom: 0; border-left: 0; border-radius: 0 12px 0 0; }
.complete-tap-handle { position: absolute; right: 0; top: 1px; width: 15px; height: 6px; border: 1px solid #687680; border-radius: 4px; background: linear-gradient(#eef2f4, #788690); }
.complete-water-flow { display: none; position: absolute; z-index: 9; right: 39px; top: calc(var(--cell) * 3.1 - 14px); width: 4px; height: 25px; border-radius: 4px; background: #2395ff; box-shadow: 0 0 6px #2395ff; animation: flow .45s linear infinite; }
.complete-drain-feed { top: calc(var(--cell) * 4.5 - 9px); height: 18px; border-color: #5d6970; background: linear-gradient(#56636b, #f4f6f7 43%, #6a767e); }
.complete-drain-feed::after { top: 7px; height: 3px; background: #80d8ff; opacity: 0; }
.endpoint-complete.flowing .complete-water-flow { display: block; }
.endpoint-complete.filling .complete-basin-water { opacity: .82; animation: basin-fill 1s ease-in-out infinite alternate; }
.endpoint-complete.draining .complete-basin-water { opacity: .34; animation: none; }
.endpoint-complete.draining .complete-drain-feed::after { opacity: 1; box-shadow: 0 0 6px #80d8ff; }
@keyframes basin-fill { to { transform: scaleY(1.7); transform-origin: bottom; opacity: 1; } }
.complete-point { position: absolute; z-index: 12; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; color: #fff; font-size: .65rem; font-weight: 950; box-shadow: 0 2px 5px rgba(7,28,54,.22); }
.complete-point-c { left: 7px; top: calc(var(--cell) * .5 - 25px); background: #e64242; }
.complete-point-d { left: 7px; top: calc(var(--cell) * 2.5 - 25px); background: var(--blue-600); }
.complete-point-e { left: 7px; top: calc(var(--cell) * 4.5 - 30px); background: #536d7d; }
.endpoint-drain-target { position: absolute; z-index: 9; left: 0; top: calc(var(--cell) * 5 + 3px); width: var(--side); height: var(--cell); pointer-events: none; }
.drain-target-pipe { position: absolute; left: 0; right: -2px; top: calc(50% - 9px); height: 18px; border: 1px solid #5d6970; border-radius: 0 5px 5px 0; background: linear-gradient(#56636b, #f4f6f7 43%, #6a767e); }
.drain-target-pipe::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 3px; opacity: 0; background: #80d8ff; box-shadow: 0 0 6px #80d8ff; }
.drain-target-collar { position: absolute; right: 8px; top: calc(50% - 12px); width: 9px; height: 24px; border: 1px solid #4f5c64; border-radius: 3px; background: linear-gradient(90deg, #4e5a62, #dbe1e4, #5b6870); }
.complete-point-f { right: 2px; top: -8px; background: #536d7d; }
.endpoint-drain-target.draining .drain-target-pipe::after { opacity: 1; }

/* Niveau 4 : chaudière, boucle de chauffage et radiateur traversé. */
.game-screen[data-level="4"] { --cell: clamp(35px, 10.6vw, 50px); --side: clamp(48px, 14.5vw, 66px); }
.game-screen[data-level="5"] { --cell: clamp(31px, 9.35vw, 44px); --side: clamp(46px, 14vw, 62px); }
.game-screen[data-level="5"] .board { border-radius: 10px; }
.game-screen[data-level="5"] .board-cell:nth-child(6n + 1) { border-left-color: #aab9c6; }
.game-screen[data-level="5"] .endpoint-letter { display: grid; }
.game-screen[data-level="5"] .endpoint-hot { top: 3px; }
.game-screen[data-level="5"] .endpoint-cold { top: calc(var(--cell) * 2 + 3px); }
.game-screen[data-level="5"] .endpoint-complete { height: calc(var(--cell) * 8); }
.game-screen[data-level="5"] .complete-feed-hot { top: calc(var(--cell) * .5 - 6px); }
.game-screen[data-level="5"] .complete-feed-cold { top: calc(var(--cell) * 2.5 - 6px); }
.game-screen[data-level="5"] .complete-riser-hot { top: calc(var(--cell) * .5); height: calc(var(--cell) * .8); }
.game-screen[data-level="5"] .complete-riser-cold { top: calc(var(--cell) * 1.3); height: calc(var(--cell) * 1.2); }
.game-screen[data-level="5"] .complete-basin { top: calc(var(--cell) * 1.05); }
.game-screen[data-level="5"] .complete-tap { top: calc(var(--cell) * 1.05 - 29px); }
.game-screen[data-level="5"] .complete-water-flow { top: calc(var(--cell) * 1.05 - 14px); }
.game-screen[data-level="5"] .complete-basin-drain { height: calc(var(--cell) * 5.25); }
.game-screen[data-level="5"] .complete-drain-feed { top: calc(var(--cell) * 6.5 - 9px); }
.game-screen[data-level="5"] .complete-point-c { top: calc(var(--cell) * .5 - 25px); }
.game-screen[data-level="5"] .complete-point-d { top: calc(var(--cell) * 2.5 - 25px); }
.game-screen[data-level="5"] .complete-point-e { top: calc(var(--cell) * 6.5 - 30px); }
.game-screen[data-level="5"] .endpoint-drain-target { top: calc(var(--cell) * 7 + 3px); }
.game-screen[data-level="5"] .endpoint-boiler,
.game-screen[data-level="5"] .endpoint-radiator { height: calc(var(--cell) * 8); }
.game-screen[data-level="5"] .boiler-case { top: calc(var(--cell) * 3.9); height: calc(var(--cell) * 1.65); }
.game-screen[data-level="5"] .boiler-pipe-flow { top: calc(var(--cell) * 4.5 - 6px); }
.game-screen[data-level="5"] .boiler-pipe-return { top: calc(var(--cell) * 5.5 - 6px); }
.game-screen[data-level="5"] .heating-point-a { top: calc(var(--cell) * 4.5 - 27px); }
.game-screen[data-level="5"] .heating-point-b { top: calc(var(--cell) * 5.5 - 27px); }
.game-screen[data-level="5"] .radiator-feed-in { top: calc(var(--cell) * 4.5 - 6px); }
.game-screen[data-level="5"] .radiator-feed-out { top: calc(var(--cell) * 5.5 - 6px); }
.game-screen[data-level="5"] .radiator-body { top: calc(var(--cell) * 4.05); height: calc(var(--cell) * 1.9); }
.game-screen[data-level="5"] .radiator-glow { top: calc(var(--cell) * 4.1); height: calc(var(--cell) * 1.8); }
.game-screen[data-level="5"] .heating-point-c { top: calc(var(--cell) * 4.5 - 27px); }
.game-screen[data-level="5"] .heating-point-d { top: calc(var(--cell) * 5.5 - 27px); }
.endpoint-boiler,
.endpoint-radiator { position: absolute; z-index: 8; top: 3px; width: var(--side); height: calc(var(--cell) * 6); pointer-events: none; }
.endpoint-boiler { left: 0; }
.endpoint-radiator { right: 0; }
.boiler-case {
  position: absolute;
  z-index: 4;
  left: 1px;
  top: calc(var(--cell) * 1.7);
  width: calc(var(--side) - 14px);
  height: calc(var(--cell) * 2.15);
  border: 2px solid #aeb9c1;
  border-radius: 7px;
  background: linear-gradient(135deg, #d5dde2, #fff 34% 66%, #b8c3ca);
  box-shadow: 0 5px 10px rgba(7,28,54,.2);
}
.boiler-brand { position: absolute; left: 6px; top: 9px; color: #1679d8; font-size: .52rem; font-weight: 950; transform: skew(-7deg); }
.boiler-screen { position: absolute; left: 7px; right: 7px; bottom: 10px; padding: 3px 1px; border-radius: 3px; color: #85ffcb; background: #142730; text-align: center; font-size: .52rem; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 5px #000; }
.boiler-flame { position: absolute; left: calc(50% - 5px); bottom: -16px; color: #ff7a2e; opacity: 0; transform: rotate(45deg); text-shadow: 0 0 7px #ff7a2e; }
.boiler-pipe { position: absolute; left: 27px; right: -2px; height: 12px; border: 1px solid #65727d; background: linear-gradient(#6e7d88, #eef2f4 36%, #5e6d78); box-shadow: 0 2px 4px rgba(7,28,54,.2); }
.boiler-pipe::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 2px; opacity: 0; }
.boiler-pipe-flow { top: calc(var(--cell) * 1.5 - 6px); }
.boiler-pipe-return { top: calc(var(--cell) * 4.5 - 6px); }
.boiler-pipe-flow::after { background: #ff5148; box-shadow: 0 0 6px #ff5148; }
.boiler-pipe-return::after { background: #2395ff; box-shadow: 0 0 6px #2395ff; }
.endpoint-boiler.running .boiler-flame { opacity: 1; animation: boiler-fire .45s ease-in-out infinite alternate; }
.endpoint-boiler.running .boiler-pipe::after { opacity: 1; }
.endpoint-boiler.leaking .boiler-pipe-flow::before { content: ""; position: absolute; right: -2px; top: 10px; width: 8px; height: 12px; border-radius: 60% 40% 60% 40%; background: #2395ff; animation: drain-drip .7s infinite; }
@keyframes boiler-fire { to { transform: translateY(-3px) rotate(45deg) scale(1.18); } }
.heating-point { position: absolute; z-index: 12; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; color: #fff; font-size: .65rem; font-weight: 950; box-shadow: 0 2px 5px rgba(7,28,54,.25); }
.heating-point-a { right: 3px; top: calc(var(--cell) * 1.5 - 27px); background: #e64242; }
.heating-point-b { right: 3px; top: calc(var(--cell) * 4.5 - 27px); background: var(--blue-600); }
.radiator-feed { position: absolute; left: -2px; width: 29px; height: 12px; border: 1px solid #65727d; background: linear-gradient(#6e7d88, #eef2f4 36%, #5e6d78); box-shadow: 0 2px 4px rgba(7,28,54,.2); }
.radiator-feed::after { content: ""; position: absolute; left: 2px; right: 3px; top: 4px; height: 2px; opacity: .4; }
.radiator-feed-in { top: calc(var(--cell) * .5 - 6px); }
.radiator-feed-out { top: calc(var(--cell) * 5.5 - 6px); }
.radiator-feed-in::after { background: #ff5148; }
.radiator-feed-out::after { background: #2395ff; }
.radiator-body { position: absolute; z-index: 4; right: -4px; top: calc(var(--cell) * 1.05); width: calc(var(--side) - 5px); height: calc(var(--cell) * 3.9); display: flex; gap: 2px; padding: 5px; border: 2px solid #8f9ca4; border-radius: 7px; background: #d8e0e4; box-shadow: 0 5px 10px rgba(7,28,54,.2); }
.radiator-body i { flex: 1; border: 1px solid #9da8ae; border-radius: 4px; background: linear-gradient(90deg, #aeb9bf, #fff 45%, #9ca8af); box-shadow: inset 0 0 3px rgba(7,28,54,.12); }
.radiator-glow { position: absolute; z-index: 5; right: 1px; top: calc(var(--cell) * 1.1); width: calc(var(--side) - 9px); height: calc(var(--cell) * 3.8); border-radius: 7px; opacity: 0; background: linear-gradient(rgba(255,94,62,.15), rgba(255,53,42,.62)); box-shadow: 0 0 18px rgba(255,76,48,.7); }
.endpoint-radiator.heating .radiator-glow { opacity: 1; animation: radiator-heat .9s ease-in-out infinite alternate; }
.endpoint-radiator.heating .radiator-feed::after { opacity: 1; box-shadow: 0 0 6px currentColor; }
@keyframes radiator-heat { to { filter: brightness(1.2); opacity: .72; } }
.heating-point-c { left: 5px; top: calc(var(--cell) * .5 - 27px); background: #e64242; }
.heating-point-d { left: 5px; top: calc(var(--cell) * 5.5 - 27px); background: var(--blue-600); }

.instruction { margin: 10px 16px 8px; text-align: center; color: #60758a; font-size: .76rem; line-height: 1.35; }
.instruction span { color: var(--blue-600); }

.toolbox {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin: 0 12px;
  padding: 8px;
  border: 1px solid #d5e0e9;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 7px 18px rgba(10,36,68,.08);
}
.toolbox-complete { grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 6px; }
.toolbox-complete .tool { min-height: 54px; font-size: .61rem; }
.toolbox-complete .tool-icon { height: 22px; transform: scale(.84); }
.tool-gravity { background: #edf1f3; color: #526672; }
.tool-gravity.selected { color: #38576a; border-color: #6d91a6; background: #e1edf3; }
.toolbox-heating { grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 6px; }
.toolbox-heating .tool { min-height: 54px; font-size: .61rem; }
.toolbox-heating .tool-icon { height: 22px; transform: scale(.84); }
.toolbox-final { grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 6px; }
.toolbox-final .tool { min-height: 47px; font-size: .58rem; }
.toolbox-final .tool-icon { height: 20px; transform: scale(.76); }
.tool-active { color: #7a3434; background: #f8eeee; }
.tool-active.selected { color: #a8272e; border-color: #e14a50; background: #fff0f0; }

.tool {
  min-height: 62px;
  padding: 5px 3px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  border-radius: 10px;
  color: #496076;
  background: #f1f6fa;
  font-size: .7rem;
  font-weight: 850;
  cursor: pointer;
}
.tool.selected { color: var(--blue-600); border-color: var(--blue-500); background: #e8f5ff; box-shadow: inset 0 0 0 1px #fff; }
.tool-icon { position: relative; width: 34px; height: 28px; display: block; }
.tool-icon i { position: absolute; display: block; border: 1px solid #6d7984; background: linear-gradient(90deg, #788691, #eef2f4 45%, #76838e); }
.straight-icon i { left: 2px; right: 2px; top: 9px; height: 10px; border-radius: 4px; }
.elbow-icon i:first-child { left: 5px; top: 3px; width: 10px; height: 20px; border-radius: 4px; }
.elbow-icon i:last-child { left: 10px; bottom: 5px; width: 20px; height: 10px; border-radius: 4px; }
.elbow45-icon { transform: rotate(-14deg); }
.elbow45-icon i:first-child { left: 5px; top: 3px; width: 10px; height: 20px; border-radius: 4px; }
.elbow45-icon i:last-child { left: 10px; bottom: 5px; width: 20px; height: 10px; border-radius: 4px; }
.tee-icon i:first-child { left: 3px; right: 3px; top: 4px; height: 10px; border-radius: 4px; }
.tee-icon i:last-child { left: 12px; top: 9px; width: 10px; height: 16px; border-radius: 4px; }
.drain-straight-icon i { left: 1px; right: 1px; top: 7px; height: 14px; border-width: 2px; border-color: #59666e; border-radius: 5px; background: linear-gradient(90deg, #56636b, #f4f6f7 45%, #5b6870); }
.drain-elbow90-icon i,
.drain-elbow45-icon i { border-width: 2px; border-color: #59666e; background: linear-gradient(90deg, #56636b, #f4f6f7 45%, #5b6870); }
.drain-elbow90-icon i:first-child { left: 4px; top: 1px; width: 14px; height: 23px; border-radius: 5px; }
.drain-elbow90-icon i:last-child { left: 10px; bottom: 1px; width: 23px; height: 14px; border-radius: 5px; }
.drain-elbow45-icon { width: 38px; }
.drain-elbow45-icon i:first-child { left: 3px; top: 1px; width: 10px; height: 15px; border-radius: 5px; }
.drain-elbow45-icon i:nth-child(2) { left: 10px; top: 9px; width: 19px; height: 11px; border-radius: 5px; transform: rotate(45deg); }
.drain-elbow45-icon i:last-child { right: 0; bottom: 1px; width: 16px; height: 10px; border-radius: 5px; }
.siphon-icon i { left: 4px; top: 2px; width: 27px; height: 21px; border: 5px solid #5b6870; border-top: 0; border-radius: 0 0 13px 13px; background: transparent; }
.valve-icon i { left: 3px; right: 3px; top: 9px; height: 11px; border-color: #83551e; border-radius: 4px; background: linear-gradient(90deg, #966023, #f0c96a, #8c591e); }
.valve-icon em { position: absolute; left: 13px; top: 1px; width: 27px; height: 6px; border: 1px solid #9e1e25; border-radius: 5px; background: #d9363d; transform: rotate(-7deg); }
.circulator-icon i { left: 3px; top: 0; width: 28px; height: 28px; display: grid; place-items: center; border: 3px solid #7c2227; border-radius: 50%; color: #fff; background: radial-gradient(circle at 35% 30%, #ff6a60, #c52e35 60%, #751b22); font-style: normal; font-size: .78rem; }
.erase-icon { display: grid; place-items: center; font-size: 1.8rem; font-weight: 500; color: #8ca0b3; }

.component-controls { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; margin: 0 12px 7px; padding: 7px 8px; border: 1px solid #e0c98d; border-radius: 11px; background: #fff7dc; box-shadow: 0 4px 12px rgba(10,36,68,.08); }
.component-controls b { padding-left: 4px; color: #74511b; font-size: .68rem; }
.component-controls button { min-height: 34px; padding: 5px 9px; border: 1px solid #c6a453; border-radius: 8px; color: #704a13; background: #fff; font-size: .63rem; font-weight: 900; cursor: pointer; }
.component-controls #valve-toggle { color: #92262b; border-color: #e2a4a7; background: #fff0f0; }
.component-controls #valve-toggle.open-action { color: #126940; border-color: #8bcaaa; background: #e6f8ee; }

.live-row { display: grid; grid-template-columns: 56px 1fr 56px; gap: 7px; align-items: center; margin: 9px 14px; }
.mini-stat { text-align: center; color: #72879a; }
.mini-stat b { display: block; color: var(--navy-900); font-size: 1rem; line-height: 1; }
.mini-stat span { font-size: .57rem; line-height: 1; }
.status { min-height: 34px; margin: 0; display: grid; place-items: center; padding: 5px 9px; border-radius: 9px; text-align: center; color: #526a80; background: #eaf1f6; font-size: .72rem; line-height: 1.2; font-weight: 750; }
.status[data-tone="error"] { color: #9b2020; background: #ffe4e4; }
.status[data-tone="success"] { color: #126940; background: #dcf8e9; }
.status[data-tone="testing"] { color: #0756ba; background: #dff1ff; }
.status[data-tone="warning"] { color: #875008; background: #fff1ce; }
.subsystem-status { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: -2px 14px 8px; }
.subsystem-status span { display: flex; justify-content: center; gap: 5px; padding: 6px 3px; border-radius: 8px; color: #60758a; background: #edf2f6; font-size: .56rem; font-weight: 900; }
.subsystem-status span.ok { color: #116b43; background: #dff7e9; }
.subsystem-status span.ko { color: #a02727; background: #ffe5e5; }
.subsystem-status b { font-size: .68rem; }

.actions { display: grid; grid-template-columns: 54px 1fr; gap: 9px; margin: 0 14px; }
.secondary-button { color: var(--navy-800); border: 1px solid #c6d4df; border-radius: 13px; background: #fff; font-size: 1.4rem; }
.water-button { font-size: .96rem; }
.drop-icon { display: inline-block; margin-right: 7px; color: #8bddff; transform: rotate(45deg) scale(.68); }

/* Result */
.modal-backdrop { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(3, 15, 29, .78); backdrop-filter: blur(6px); }
.result-card { width: min(100%, 390px); max-height: calc(100svh - 36px); overflow-y: auto; padding: 24px 22px 20px; text-align: center; border-radius: 24px; background: #fff; box-shadow: 0 28px 80px rgba(0,0,0,.36); animation: result-in .34s cubic-bezier(.2,.8,.2,1); }
@keyframes result-in { from { opacity: 0; transform: translateY(20px) scale(.96); } }
.success-badge { width: 56px; height: 56px; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--green); box-shadow: 0 8px 22px rgba(33,163,107,.3); font-size: 1.8rem; font-weight: 950; }
.result-kicker { color: var(--blue-600); }
.result-card h2 { margin: 6px 0 5px; color: var(--navy-950); font-size: 2rem; line-height: .95; letter-spacing: -.045em; }
.stars { margin: 8px 0 10px; color: var(--amber); font-size: 2rem; letter-spacing: .08em; text-shadow: 0 2px 0 #d79800; }
.checks { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px 12px; color: #167b50; font-size: .78rem; font-weight: 850; }
.result-warning { margin: 10px 0 0; padding: 8px 10px; border-radius: 9px; color: #84500a; background: #fff1ce; font-size: .72rem; line-height: 1.3; font-weight: 800; }
.result-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 18px 0 10px; border-block: 1px solid #dce6ee; }
.result-stats div { padding: 12px 4px; }
.result-stats div + div { border-left: 1px solid #dce6ee; }
.result-stats b { display: block; color: var(--navy-900); font-size: 1.15rem; }
.result-stats span { color: #718598; font-size: .64rem; }
.result-comment { min-height: 38px; margin: 8px 0 12px; color: #50677c; font-size: .84rem; line-height: 1.35; }
.result-card .primary-button { width: 100%; }
.link-button { margin-top: 8px; color: var(--blue-600); background: transparent; font-size: .78rem; }
.final-result { max-height: calc(100svh - 20px); padding: 13px 16px 12px; }
.final-result .success-badge { width: 42px; height: 42px; margin-bottom: 3px; background: linear-gradient(145deg, #ffd454, #e79a00); box-shadow: 0 6px 16px rgba(225,153,0,.3); font-size: 1.35rem; }
.final-result .result-kicker { margin: 0; font-size: .63rem; }
.final-result h2 { margin: 2px 0; font-size: 1.55rem; }
.final-result .stars { margin: 3px 0; font-size: 1.25rem; }
.final-result .checks { display: none; }
.final-result .result-warning { margin-top: 5px; padding: 6px 8px; font-size: .64rem; }
.final-result .result-stats { margin: 5px 0; }
.final-result .result-stats div { padding: 6px 3px; }
.final-result .result-stats b { font-size: .95rem; }
.final-result .result-comment { min-height: 0; margin: 4px 0 5px; padding: 6px; border-radius: 9px; color: var(--navy-900); background: #eef6fc; font-size: .86rem; font-weight: 950; }
.final-result #next-button { display: none; }
.final-result #replay-button { display: none; }
.final-actions { margin-top: 4px; padding-top: 6px; border-top: 1px solid #dce6ee; }
.share-prompt { margin: 0 0 9px; color: var(--navy-900); font-size: .88rem; font-weight: 850; }
.final-share { display: grid; grid-template-columns: 1fr 1.35fr; gap: 7px; align-items: center; margin-top: 7px; }
.final-share .share-prompt { margin: 0; font-size: .68rem; line-height: 1.2; }
.share-button { min-height: 42px; }
.final-share .share-feedback { grid-column: 1 / -1; }
.share-feedback,
.interest-feedback { margin: 7px 0 0; color: #24734f; font-size: .7rem; line-height: 1.35; }
.recruitment-card { padding: 11px 12px; border: 1px solid #b9d8ef; border-radius: 13px; text-align: left; background: linear-gradient(145deg, #f7fbff, #e8f5ff); box-shadow: 0 4px 14px rgba(10,87,151,.1); }
.recruitment-card h3 { margin: 0 0 3px; color: var(--blue-600); font-size: 1.12rem; }
.recruitment-card p { margin: 0 0 3px; color: #405a70; font-size: .72rem; line-height: 1.28; }
.recruitment-card strong { display: block; margin-bottom: 7px; color: var(--navy-900); font-size: .72rem; }
.curious-button,
.decline-button { width: 100%; min-height: 42px; border-radius: 10px; font-size: .72rem; font-weight: 900; }
.curious-button { color: #fff; background: var(--blue-600); box-shadow: 0 5px 12px rgba(11,116,220,.22); }
.decline-button { margin-top: 8px; color: #4f677b; border: 1px solid #b8c9d6; background: #fff; }
.interest-form { display: grid; gap: 8px; margin-top: 10px; }
.interest-form label { display: grid; gap: 4px; color: #405a70; font-size: .68rem; font-weight: 850; }
.interest-form input,
.interest-form textarea { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid #b9cbd9; border-radius: 9px; color: var(--navy-900); background: #fff; font: inherit; font-size: .88rem; }
.interest-form textarea { min-height: 66px; resize: vertical; }
.interest-form small { color: #6a7e90; font-size: .62rem; line-height: 1.35; text-align: center; }
.interest-form .privacy-note { text-align: left; }
.interest-form .consent-field { display: grid; grid-template-columns: 24px 1fr; align-items: start; gap: 8px; color: #405a70; font-size: .66rem; font-weight: 700; line-height: 1.35; cursor: pointer; }
.interest-form .consent-field input { width: 22px; min-height: 22px; margin: 0; accent-color: var(--blue-600); }
.honeypot-field { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.legal-links { display: grid; gap: 4px; text-align: center; }
.legal-links a { color: var(--blue-600); font-size: .64rem; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.recruitment-modal { z-index: 80; }
.interest-dialog { position: relative; width: min(100%, 360px); max-height: calc(100svh - 36px); overflow-y: auto; padding: 24px 20px 18px; border-radius: 20px; text-align: left; background: #fff; box-shadow: 0 28px 80px rgba(0,0,0,.42); }
.modal-close { position: absolute; top: 9px; right: 11px; width: 34px; height: 34px; border-radius: 50%; color: #516b80; background: #edf3f7; font-size: 1.35rem; line-height: 1; }
.interest-kicker { margin: 0 0 4px; color: var(--blue-600); font-size: .7rem; font-weight: 950; letter-spacing: .12em; }
.interest-dialog h2 { margin: 0 34px 7px 0; color: var(--navy-950); font-size: 1.45rem; line-height: 1.05; }
.interest-dialog > p:not(.interest-kicker):not(.interest-feedback) { margin: 0; color: #4e6578; font-size: .84rem; line-height: 1.4; }
.legal-page { width: min(100% - 28px, 760px); margin: 24px auto; padding: 24px; border-radius: 18px; color: var(--navy-900); background: #fff; box-shadow: 0 16px 45px rgba(7,28,54,.16); }
.legal-page h1 { margin-top: 0; color: var(--navy-950); font-size: clamp(1.6rem, 6vw, 2.3rem); }
.legal-page h2 { margin: 24px 0 7px; color: var(--blue-600); font-size: 1.05rem; }
.legal-page p, .legal-page li { color: #405a70; font-size: .9rem; line-height: 1.55; }
.legal-page .placeholder { padding: 10px 12px; border-left: 4px solid #e7a82f; background: #fff8e8; }
.legal-page a { color: var(--blue-600); font-weight: 800; }
.soon-toast { position: fixed; z-index: 70; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(calc(100% - 32px), 360px); padding: 14px 18px; border-radius: 12px; color: #fff; text-align: center; background: var(--navy-950); box-shadow: 0 12px 35px rgba(0,0,0,.35); font-weight: 800; }

@media (min-width: 600px) {
  body { padding: 24px 0; }
  .app-shell { min-height: calc(100svh - 48px); border-radius: 24px; }
  .start-screen, .game-screen { min-height: calc(100svh - 48px); }
}

@media (max-height: 720px) and (max-width: 599px) {
  .mission-card { padding-top: 11px; padding-bottom: 9px; }
  .objective { padding-top: 8px; padding-bottom: 6px; }
  .instruction { margin-block: 7px 5px; }
  .tool { min-height: 55px; }
  .tool-icon { height: 23px; transform: scale(.86); }
}

@media (max-height: 620px) and (max-width: 599px) {
  .final-result .success-badge,
  .final-result .result-kicker { display: none; }
  .final-result h2 { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}