/* =========================================================================
   waterwork.css — წყლის მილის შეკეთება: მილის შეერთება + შედუღება (CEF.WATERWORK = 17 / page-waterwork)
   ყველა სელექტორი დასკოპულია #page-waterwork-ზე, კლასები იწყება ww- პრეფიქსით.
   ========================================================================= */
#page-waterwork {
  --blue: #3aa6ff; --blue-d: #1673c9; --orange: #ff8c1a; --red: #ff4747; --steel: #9aa3ad;
  --light: #eaeaea; --muted: #eaeaea8c; --black: #0a0a0a; --line: #eaeaea1f;
  font-family: "Noto Sans Georgian", "Manrope", "Segoe UI", Arial, sans-serif;
  color: var(--light); background: var(--black); overflow: hidden; user-select: none;
}
#page-waterwork * { box-sizing: border-box; margin: 0; padding: 0; }
#page-waterwork .ww-bg { position: absolute; inset: 0; background:
  radial-gradient(60% 50% at 50% 0%, #3aa6ff2e, transparent 70%),
  radial-gradient(45% 45% at 85% 75%, #ff8c1a18, transparent 70%),
  repeating-linear-gradient(135deg, #ffffff05 0 14px, transparent 14px 28px),
  linear-gradient(180deg, #0b0f14 0%, #060606 100%); }
#page-waterwork .ww-vignette { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 45%, #000000b3 100%); }
#page-waterwork .ww-sparks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }

#page-waterwork .ww-card { position: relative; z-index: 2; width: min(860px, 96vw); padding: 24px 28px 20px;
  background: #121214f2; border: 1px solid #ffffff14; border-radius: 16px; box-shadow: 0 24px 70px #000000a0; }
#page-waterwork .ww-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
#page-waterwork .ww-title { font: 700 26px "Rajdhani", "Noto Sans Georgian", sans-serif; letter-spacing: .06em; }
#page-waterwork .ww-title span { color: var(--blue); }
#page-waterwork .ww-close { background: none; border: 1px solid var(--line); color: var(--light); border-radius: 8px;
  padding: 6px 12px; cursor: pointer; font: inherit; font-size: 13px; }
#page-waterwork .ww-close:hover { border-color: var(--red); color: var(--red); }

#page-waterwork .ww-steps { display: flex; gap: 8px; margin-bottom: 14px; }
#page-waterwork .ww-step { flex: 1; padding: 8px 6px; text-align: center; font-size: 12px; color: var(--muted);
  border-radius: 8px; background: #eaeaea0a; border: 1px solid var(--line); transition: .2s; }
#page-waterwork .ww-step.on { color: #06121d; background: var(--blue); border-color: var(--blue); font-weight: 700; }
#page-waterwork .ww-step.done { color: var(--blue); border-color: #3aa6ff55; }

#page-waterwork .ww-main { display: flex; gap: 18px; }
#page-waterwork .ww-stage { flex: 1; min-height: 360px; position: relative; border-radius: 12px; background: #eaeaea08;
  border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; gap: 12px; }
#page-waterwork .ww-stage h3 { font-size: 15px; font-weight: 700; }
#page-waterwork .ww-stage h3 span { color: var(--blue); }
#page-waterwork .ww-hide { display: none !important; }

#page-waterwork .ww-side { width: 170px; display: flex; flex-direction: column; gap: 12px; }
#page-waterwork .ww-meter small { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
#page-waterwork .ww-bar { height: 10px; border-radius: 6px; background: #eaeaea14; overflow: hidden; }
#page-waterwork .ww-bar i { display: block; height: 100%; width: 0; border-radius: 6px; transition: width .1s linear; }
#page-waterwork .ww-prog i { background: linear-gradient(90deg, var(--blue-d), var(--blue)); }
#page-waterwork .ww-qual i { background: linear-gradient(90deg, #3ddc6c, #b6f06a); }
#page-waterwork .ww-press i { background: linear-gradient(90deg, #3aa6ff, #ffb347, #ff4747); }
#page-waterwork .ww-btn { width: 100%; padding: 12px 8px; border-radius: 10px; border: 1px solid var(--line); background: #eaeaea0f;
  color: var(--light); font: 600 13px inherit; cursor: pointer; transition: .15s; }
#page-waterwork .ww-btn:hover { border-color: var(--blue); background: #3aa6ff22; }
#page-waterwork .ww-btn.primary { background: var(--blue); color: #06121d; border-color: var(--blue); font-weight: 800; }
#page-waterwork .ww-hint { margin-top: 12px; font-size: 11.5px; color: var(--muted); text-align: center; }
#page-waterwork .ww-hint b { color: var(--blue); }

/* მილის შეერთება */
#page-waterwork .ww-pipe { position: relative; width: 520px; max-width: 100%; aspect-ratio: 520 / 312; border-radius: 8px;
  border: 4px solid #2c3036; overflow: hidden; background: #1a1d22; box-shadow: inset 0 0 30px #000a; }
#page-waterwork .ww-pipe canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }

/* შედუღება */
#page-waterwork .ww-weld { position: relative; width: 340px; max-width: 100%; aspect-ratio: 1; border-radius: 50%;
  border: 4px solid #2c3036; overflow: hidden; cursor: crosshair; background: #15171b; box-shadow: inset 0 0 40px #000c; }
#page-waterwork .ww-weld canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ვენტილი */
#page-waterwork .ww-valve { position: relative; width: 340px; max-width: 100%; aspect-ratio: 1; border-radius: 50%;
  border: 4px solid #2c3036; overflow: hidden; cursor: grab; background: #15171b; box-shadow: inset 0 0 40px #000c; }
#page-waterwork .ww-valve:active { cursor: grabbing; }
#page-waterwork .ww-valve canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* შედეგი */
#page-waterwork .ww-result { text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
#page-waterwork .ww-big { font: 800 44px "Rajdhani", sans-serif; color: var(--blue); }
#page-waterwork .ww-result p { font-size: 12.5px; color: var(--muted); }