.mechanism-puzzle { --mechanism-ink:#263c32; --mechanism-copper:#a76242; width:100%; color:var(--mechanism-ink); text-align:left; }
.mechanism-puzzle,.mechanism-puzzle * { box-sizing:border-box; }
.mechanism-puzzle button { font:inherit; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.mechanism-puzzle button:focus-visible { outline:3px solid #a76242; outline-offset:3px; position:relative; z-index:2; }
.mechanism-puzzle button:disabled { cursor:default; }
.mechanism-heading { padding-right:38px; }
.mechanism-eyebrow { display:block; color:#8c694a; font-size:10px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.mechanism-puzzle h2 { font-family:Georgia,'Times New Roman',serif; font-size:clamp(23px,4vw,32px); font-weight:500; letter-spacing:-.045em; line-height:1.15; margin:6px 0 0; }
.mechanism-instructions { max-width:58ch; margin:13px 0 20px; color:#5c6557; font-size:13px; line-height:1.5; }
.mechanism-controls { display:grid; grid-template-columns:1fr 1fr 1.4fr; gap:8px; margin-top:18px; }
.mechanism-controls button { min-height:44px; padding:8px 5px; border:1px solid #b7a78c; border-radius:5px; background:transparent; color:#5d604e; font-size:12px; }
.mechanism-controls button:disabled { opacity:.35; }
.mechanism-status { min-height:37px; margin:15px 0 0; padding-top:10px; border-top:1px solid #bdab8d66; color:#52684f; font-size:12px; line-height:1.45; }
.mechanism-keyboard { display:block; margin-top:6px; color:#9b896f; font-size:9px; line-height:1.45; }
.mechanism-note-label { display:block; color:#8c694a; font-size:9px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.mechanism-moves { display:block; color:#8d7c62; font-size:10px; line-height:1.5; }
.water-mechanism-layout { display:grid; grid-template-columns:minmax(220px,1.2fr) minmax(145px,.8fr); gap:26px; align-items:center; }
.water-frame-wrap { width:100%; max-width:310px; justify-self:center; }
.water-endpoint { display:flex; align-items:center; gap:7px; color:#5d7768; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.water-endpoint > span { font-size:19px; line-height:1; color:#769c96; }
.water-inlet { margin:0 0 6px 2px; }
.water-outlet { justify-content:flex-end; margin:6px 2px 0 0; }
.water-board { display:grid; grid-template-columns:repeat(4,minmax(44px,1fr)); gap:4px; padding:8px; border:1px solid #8d714b; border-radius:8px; background:#344b3e; box-shadow:inset 0 0 0 3px #b69b6c,0 8px 20px #3b493215; }
.water-tile { display:block; min-width:44px; min-height:44px; padding:0; aspect-ratio:1; border:1px solid #c7c29f52; border-radius:4px; background:#657763; overflow:hidden; transition:background .15s; }
.water-tile.is-flowing { background:#477e75; border-color:#bcdfcb88; }
.mechanism-puzzle .water-tile:disabled { opacity:1; }
.mechanism-pipe-icon { width:100%; height:100%; display:block; }
.water-notes { display:flex; flex-direction:column; gap:15px; }
.water-flow-legend { display:flex; align-items:center; gap:9px; color:#516454; font-size:12px; line-height:1.4; }
.water-flow-legend i { width:14px; height:7px; flex:0 0 14px; border-radius:4px; background:#81bcb6; box-shadow:0 0 0 3px #477e7540; }
.water-flow-legend.dry i { background:#b9ad87; box-shadow:0 0 0 3px #65776340; }
.mechanism-note-detail { color:#7a7e68; font-size:11px; line-height:1.5; }
.mechanism-puzzle.is-solved .water-board { box-shadow:inset 0 0 0 3px #d1ae68,0 0 25px #c9a45933; }
.signal-layout { display:grid; grid-template-columns:minmax(260px,1.2fr) minmax(170px,.8fr); gap:26px; align-items:start; }
.signal-workspace { min-width:0; }
.signal-slots { display:grid; grid-template-columns:repeat(5,minmax(44px,1fr)); gap:5px; padding:8px; border-radius:8px; border:1px solid #8d714b; background:#344b3e; box-shadow:inset 0 0 0 3px #b69b6c; }
.signal-slot { position:relative; min-width:44px; min-height:84px; padding:15px 2px 7px; color:#f0e2bf; background:#253e32; border:1px solid #c8ccac3b; border-radius:4px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.signal-slot.is-filled { background:#596f53; border-color:#f1ddb066; }
.mechanism-puzzle .signal-slot:disabled { opacity:1; }
.signal-slot-number { position:absolute; top:5px; left:6px; font-size:9px; color:#cfcaad; }
.signal-slot-name { display:block; min-height:12px; font-size:9px; line-height:1.2; }
.signal-slot .mechanism-symbol-icon { width:42px; max-width:100%; height:42px; }
.signal-empty-mark { font-size:30px; line-height:1.25; color:#a7b28f; }
.signal-reading-direction { display:block; text-align:center; font-size:7px; letter-spacing:.13em; color:#9b896f; margin-top:8px; }
.signal-symbol-tray { display:grid; grid-template-columns:repeat(5,minmax(44px,1fr)); gap:6px; margin-top:20px; }
.signal-symbol { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:44px; min-height:74px; padding:6px 2px; border:1px solid #b6a68c; border-radius:5px; background:#f4ead7; color:#647651; font-size:10px!important; }
.signal-symbol.is-selected { background:#fff9ea; border-color:#a76242; box-shadow:0 0 0 2px #a76242; }
.signal-symbol:disabled { opacity:.35; }
.mechanism-symbol-icon { display:block; width:40px; height:40px; max-width:100%; }
.signal-check { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; min-height:46px; margin:18px 0 8px; padding:10px 15px; border:1px solid #314c3d; border-radius:5px; background:#314c3d; color:#fff1d4; font-size:12px!important; font-weight:650!important; }
.signal-check > span { font-size:20px; font-weight:400; }
.signal-check:disabled { opacity:1; background:#667c4f; border-color:#667c4f; }
.signal-workspace > .mechanism-moves { text-align:center; }
.signal-clues { padding:14px 0 0 16px; border-left:1px solid #b7a78c66; }
.signal-clues ol { padding-left:19px; margin:12px 0 0; color:#5a6452; font-size:12px; line-height:1.55; }
.signal-clues li { padding-left:4px; margin-bottom:10px; }
.signal-clues li::marker { color:#a76242; font-size:10px; font-weight:700; }
@media (hover:hover) {
  .mechanism-controls button:not(:disabled):hover { background:#e7dcc5; }
  .water-tile:not(:disabled):hover { box-shadow:inset 0 0 0 2px #f1d8a6; }
  .signal-symbol:not(:disabled):hover { background:#fff9ea; border-color:#a76242; }
  .signal-check:not(:disabled):hover { background:#456149; }
}
@media (max-width:700px) {
  .water-mechanism-layout { grid-template-columns:minmax(210px,1fr) minmax(130px,.65fr); gap:18px; }
  .signal-layout { grid-template-columns:1fr; gap:18px; }
  .signal-clues { padding:12px 0 0; border-left:0; border-top:1px solid #b7a78c66; }
  .signal-clues ol { display:grid; grid-template-columns:1fr 1fr; gap:8px 24px; margin-bottom:0; }
  .signal-clues li { margin:0; }
}
@media (max-width:520px) {
  .mechanism-heading { padding-right:36px; }
  .mechanism-eyebrow { font-size:9px; }
  .mechanism-puzzle h2 { font-size:25px; }
  .mechanism-instructions { font-size:12px; margin:11px 0 16px; }
  .water-mechanism-layout { grid-template-columns:1fr; gap:16px; }
  .water-frame-wrap { max-width:290px; }
  .water-notes { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
  .water-notes > .mechanism-note-label,.water-notes > .mechanism-note-detail { grid-column:1/-1; }
  .water-notes .mechanism-moves { grid-column:1/-1; }
  .water-flow-legend { font-size:10px; gap:8px; }
  .signal-slots { padding:6px; gap:4px; }
  .signal-slot { min-height:79px; }
  .signal-slot-name { font-size:8px; }
  .signal-symbol-tray { gap:5px; }
  .signal-symbol { font-size:9px!important; min-height:67px; }
  .signal-symbol .mechanism-symbol-icon { width:34px; height:34px; }
  .signal-clues ol { grid-template-columns:1fr; gap:8px; font-size:11px; }
  .mechanism-controls { gap:6px; }
  .mechanism-controls button { font-size:11px; }
  .mechanism-status { font-size:11px; }
  .mechanism-keyboard { display:none; }
}
@media (prefers-reduced-motion:reduce) { .mechanism-puzzle * { transition:none!important; } }