/* wheel.css — რგოლისებრი ინტერაქციული მენიუ (ფერები style.css-ის :root-იდან) */
#page-wheel {   --red: #ff4747; --red-dim: #ff474722; --light: #eaeaea; --light-dim: #eaeaea99; --light-faint: #eaeaea4d;
  --black: #0a0a0a; --panel: #131313; --line: #eaeaea1a; --radius: 14px;
  --font-head: "Rajdhani", "Manrope", "Segoe UI", Arial, sans-serif; --font-body: "Manrope", "Segoe UI", Arial, sans-serif;
  backdrop-filter: none; position: fixed; inset: 0; z-index: 21000; display: none; align-items: center; justify-content: center; flex-direction: column;
  background: radial-gradient(circle at center, rgba(0,0,0,.25), rgba(0,0,0,.78)); font-family: var(--font-body); color: #eaeaea; user-select: none; }
#page-wheel.visible { animation: whBg .25s ease-out; }
.wh-box { position: relative; width: min(88vh, 88vw, 680px); aspect-ratio: 1; }
#page-wheel.visible .wh-box { animation: whPop .35s cubic-bezier(.2,1.2,.4,1); }
#whSvg { width: 100%; height: 100%; overflow: visible; }
.wh-deco { fill: none; stroke: #ff4747; stroke-width: 1.5; opacity: .5; }
.wh-deco2 { fill: none; stroke: rgba(234,234,234,.25); stroke-width: 1; stroke-dasharray: 2 7; }
.seg-g { transition: transform .15s ease-out; cursor: pointer; }
.seg-g.hov { transform: translate(var(--tx), var(--ty)); }
.seg { fill: rgba(10,10,10,.92); stroke: rgba(234,234,234,.12); stroke-width: 1.5; transition: fill .15s, stroke .15s; }
.seg-g.hov .seg { fill: rgba(255,71,71,.28); stroke: #ff4747; stroke-width: 2.5; filter: drop-shadow(0 0 12px rgba(255,71,71,.55)); }
.seg-ic { fill: none; stroke: #eaeaea; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.seg-tx { fill: #eaeaea; font: 700 15px var(--font-head); letter-spacing: .06em; text-anchor: middle; text-transform: uppercase; pointer-events: none; }
.seg-g.on .seg-ic { stroke: #ff4747; }
.seg-g.on .seg-tx { fill: #ff4747; }
.seg-dot { fill: #ff4747; filter: drop-shadow(0 0 5px #ff4747); }
.wh-hub { position: absolute; left: 50%; top: 50%; width: 40%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(10,10,10,.97), rgba(0,0,0,.95)); border: 1px solid rgba(234,234,234,.12); box-shadow: 0 0 40px rgba(0,0,0,.6), inset 0 0 30px rgba(255,71,71,.08);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; pointer-events: none; }
.wh-name { font: 700 clamp(22px, 3.6vh, 34px) var(--font-head); letter-spacing: .1em; text-transform: uppercase; }
.wh-sub  { font: 600 11px var(--font-body); letter-spacing: .3em; color: #ff4747; }
.wh-arr { position: absolute; left: 50%; transform: translateX(-50%); width: 34px; height: 24px; background: none; border: 0; color: rgba(234,234,234,.6); cursor: pointer; pointer-events: auto; }
.wh-arr:hover { color: #ff4747; } .wh-arr.u { top: 34%; } .wh-arr.d { bottom: 34%; } .wh-arr[hidden] { display: none; }
.wh-arr svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.wh-hint { margin-top: 10px; font: 600 12px var(--font-body); letter-spacing: .12em; color: rgba(234,234,234,.6); }
@keyframes whBg { from { opacity: 0; } } @keyframes whPop { from { opacity: 0; transform: scale(.85) rotate(-6deg); } }