/* =========================================================================
   roadwork.css — გზის შეკეთება: შედუღება + ასფალტის დაგება (CEF.ROADWORK = 15 / page-roadwork)
   ყველა სელექტორი დასკოპულია #page-roadwork-ზე, კლასები იწყება rw- პრეფიქსით.
   ========================================================================= */
#page-roadwork {
  --red: #ff4747; --orange: #ff8c1a; --orange-d: #d96a00; --steel: #9aa3ad; --asphalt: #2b2c30;
  --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-roadwork * { box-sizing: border-box; margin: 0; padding: 0; }
#page-roadwork .rw-bg { position: absolute; inset: 0; background:
  radial-gradient(60% 50% at 50% 0%, #ff8c1a2e, transparent 70%),
  radial-gradient(45% 45% at 15% 70%, #ff8c1a1c, transparent 70%),
  repeating-linear-gradient(135deg, #ffffff05 0 14px, transparent 14px 28px),
  linear-gradient(180deg, #100e0b 0%, #060606 100%); }
#page-roadwork .rw-vignette { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 45%, #000000b3 100%); }
#page-roadwork .rw-sparks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }

#page-roadwork .rw-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-roadwork .rw-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
#page-roadwork .rw-title { font: 700 26px "Rajdhani", "Noto Sans Georgian", sans-serif; letter-spacing: .06em; }
#page-roadwork .rw-title span { color: var(--orange); }
#page-roadwork .rw-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-roadwork .rw-close:hover { border-color: var(--red); color: var(--red); }

#page-roadwork .rw-steps { display: flex; gap: 8px; margin-bottom: 14px; }
#page-roadwork .rw-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-roadwork .rw-step.on { color: #111; background: var(--orange); border-color: var(--orange); font-weight: 700; }
#page-roadwork .rw-step.done { color: var(--orange); border-color: #ff8c1a55; }

#page-roadwork .rw-main { display: flex; gap: 18px; }
#page-roadwork .rw-stage { flex: 1; min-height: 340px; 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-roadwork .rw-stage h3 { font-size: 15px; font-weight: 700; }
#page-roadwork .rw-stage h3 span { color: var(--orange); }
#page-roadwork .rw-hide { display: none !important; }

#page-roadwork .rw-side { width: 170px; display: flex; flex-direction: column; gap: 12px; }
#page-roadwork .rw-meter small { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
#page-roadwork .rw-bar { height: 10px; border-radius: 6px; background: #eaeaea14; overflow: hidden; }
#page-roadwork .rw-bar i { display: block; height: 100%; width: 0; border-radius: 6px; transition: width .1s linear; }
#page-roadwork .rw-prog i { background: linear-gradient(90deg, var(--orange-d), var(--orange)); }
#page-roadwork .rw-qual i { background: linear-gradient(90deg, #3ddc6c, #b6f06a); }
#page-roadwork .rw-heat i { background: linear-gradient(90deg, #4a90ff, #ffb347, #ff4747); }
#page-roadwork .rw-heat.cold i { filter: saturate(.3); }
#page-roadwork .rw-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-roadwork .rw-btn:hover { border-color: var(--orange); background: #ff8c1a22; }
#page-roadwork .rw-btn.primary { background: var(--orange); color: #111; border-color: var(--orange); font-weight: 800; }
#page-roadwork .rw-hint { margin-top: 12px; font-size: 11.5px; color: var(--muted); text-align: center; }
#page-roadwork .rw-hint b { color: var(--orange); }

/* არმატურის ბადე */
#page-roadwork .rw-mesh { position: relative; width: 520px; max-width: 100%; aspect-ratio: 520 / 280; border-radius: 8px; border: 4px solid #3b3d42;
  overflow: hidden; cursor: crosshair;
  background: radial-gradient(circle at 50% 40%, #6b6358, #4a443b 70%), #4a443b; box-shadow: inset 0 0 30px #000a; }
#page-roadwork .rw-bar-h, #page-roadwork .rw-bar-v { position: absolute; border-radius: 4px; pointer-events: none;
  background: linear-gradient(#c7773a, #7a3d16); box-shadow: 0 2px 4px #0009; }
#page-roadwork .rw-bar-h { left: 3%; right: 3%; height: 9px; transform: translateY(-50%); }
#page-roadwork .rw-bar-v { top: 4%; bottom: 4%; width: 9px; transform: translateX(-50%); background: linear-gradient(90deg, #c7773a, #7a3d16); }
#page-roadwork .rw-joint { position: absolute; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; pointer-events: none;
  --p: 0; display: flex; align-items: center; justify-content: center; }
#page-roadwork .rw-joint::before { content: ""; width: 26px; height: 26px; border-radius: 50%; background: #1d1d20; border: 2px dashed #ffffff44; }
#page-roadwork .rw-joint.cur { background: conic-gradient(var(--orange) calc(var(--p) * 1%), #ffffff22 0); -webkit-mask: radial-gradient(circle, transparent 20px, #000 21px);
  mask: radial-gradient(circle, transparent 20px, #000 21px); }
#page-roadwork .rw-joint.cur::before { display: none; }
#page-roadwork .rw-joint.cur::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; border: 2px solid #ffd27a; animation: rwPulse .7s infinite alternate; }
#page-roadwork .rw-joint.done { -webkit-mask: none; mask: none; }
#page-roadwork .rw-joint.done::before { width: 22px; height: 22px; border: none; background: radial-gradient(circle at 35% 35%, #d7d7d7, #7c7c80 70%); box-shadow: 0 0 8px #ffb34788; }
@keyframes rwPulse { to { transform: scale(1.35); opacity: .35; } }
#page-roadwork .rw-arc { position: absolute; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; pointer-events: none; display: none; z-index: 3;
  background: radial-gradient(circle, #fff 0 8%, #bfe4ff 14%, #4aa8ff66 36%, transparent 70%); mix-blend-mode: screen; animation: rwFlick .08s infinite alternate; }
#page-roadwork .rw-arc.bad { background: radial-gradient(circle, #fff 0 6%, #ffb0a0 14%, #ff474766 36%, transparent 70%); }
@keyframes rwFlick { to { transform: scale(1.18); opacity: .8; } }

/* ასფალტის დაგება */
#page-roadwork .rw-pit { position: relative; width: 520px; max-width: 100%; aspect-ratio: 520 / 240; border-radius: 8px; border: 4px solid #3b3d42; overflow: hidden; cursor: crosshair; background: #4a443b; }
#page-roadwork .rw-pit canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#page-roadwork .rw-roller { position: absolute; pointer-events: none; display: none; z-index: 2; width: 64px; height: 20px; margin: -10px 0 0 -32px; border-radius: 10px;
  background: linear-gradient(#c8ccd2, #6d727a 55%, #3d4046); border: 2px solid #22242a; box-shadow: 0 6px 10px #0009; }
#page-roadwork .rw-roller::before { content: ""; position: absolute; left: 50%; top: -22px; width: 4px; height: 22px; margin-left: -2px; background: #8b5a2b; border-radius: 2px; }

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