/* =========================================================================
   beekeeper.css — მეფუტკრე: თაფლის ამოღება სკიდან (CEF.BEEKEEPER = 14 / page-beekeeper)
   ყველა სელექტორი დასკოპულია #page-beekeeper-ზე, კლასები იწყება bk- პრეფიქსით.
   ========================================================================= */
#page-beekeeper {
  --red: #ff4747; --honey: #ffb627; --honey-d: #e08a00; --wax: #f3dd9a;
  --light: #eaeaea; --muted: #eaeaea8c; --black: #0a0a0a; --line: #eaeaea1f;
  --bee-speed: 1;
  font-family: "Noto Sans Georgian", "Manrope", "Segoe UI", Arial, sans-serif;
  color: var(--light); background: var(--black); overflow: hidden; user-select: none;
}
#page-beekeeper * { box-sizing: border-box; margin: 0; padding: 0; }
#page-beekeeper .bk-bg { position: absolute; inset: 0; background:
  radial-gradient(60% 50% at 50% 0%, #ffb62733, transparent 70%),
  radial-gradient(45% 45% at 85% 60%, #ffb62722, transparent 70%),
  linear-gradient(180deg, #0f0e0a 0%, #060606 100%); }
#page-beekeeper .bk-vignette { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 45%, #000000b3 100%); }
#page-beekeeper .bk-bees { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
#page-beekeeper .bk-bee { position: absolute; font-size: 18px; left: var(--x); top: var(--y); opacity: .85;
  animation: bkFly calc(var(--d) / var(--bee-speed)) ease-in-out infinite alternate; }
@keyframes bkFly { 0% { transform: translate(0,0) rotate(0); } 50% { transform: translate(var(--dx), var(--dy)) rotate(14deg); } 100% { transform: translate(calc(var(--dx) * -.6), calc(var(--dy) * .5)) rotate(-10deg); } }
#page-beekeeper.calm .bk-bee { opacity: .25; }

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

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

#page-beekeeper .bk-main { display: flex; gap: 18px; }
#page-beekeeper .bk-stage { flex: 1; min-height: 300px; 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-beekeeper .bk-stage h3 { font-size: 15px; font-weight: 700; }
#page-beekeeper .bk-stage p { font-size: 12.5px; color: var(--muted); text-align: center; max-width: 420px; line-height: 1.5; }
#page-beekeeper .bk-hide { display: none !important; }

#page-beekeeper .bk-side { width: 170px; display: flex; flex-direction: column; gap: 12px; }
#page-beekeeper .bk-meter small { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
#page-beekeeper .bk-bar { height: 10px; border-radius: 6px; background: #eaeaea14; overflow: hidden; }
#page-beekeeper .bk-bar i { display: block; height: 100%; width: 0; border-radius: 6px; transition: width .1s linear; }
#page-beekeeper .bk-smoke i { background: linear-gradient(90deg, #8a8a8a, #d8d8d8); }
#page-beekeeper .bk-anger i { background: linear-gradient(90deg, var(--honey), var(--red)); }
#page-beekeeper .bk-qual i { background: linear-gradient(90deg, var(--honey-d), var(--honey)); }
#page-beekeeper .bk-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-beekeeper .bk-btn:hover, #page-beekeeper .bk-btn.hold { border-color: var(--honey); background: #ffb62722; }
#page-beekeeper .bk-btn.primary { background: var(--honey); color: #111; border-color: var(--honey); font-weight: 800; }
#page-beekeeper .bk-hint { margin-top: 12px; font-size: 11.5px; color: var(--muted); text-align: center; }
#page-beekeeper .bk-hint b { color: var(--honey); }

/* სკა + ჩარჩოები */
#page-beekeeper .bk-hive { display: flex; gap: 10px; padding: 14px; background: linear-gradient(180deg, #5b3a1c, #3f2812);
  border: 3px solid #2a1a0a; border-radius: 10px; box-shadow: inset 0 0 20px #0008; }
#page-beekeeper .bk-fr { width: 54px; height: 150px; border-radius: 6px; cursor: pointer; position: relative; transition: transform .3s, opacity .3s;
  background: repeating-linear-gradient(60deg, #f3dd9a 0 8px, #e2c36f 8px 16px); border: 3px solid #8b5a2b; }
#page-beekeeper .bk-fr:hover { transform: translateY(-8px); box-shadow: 0 0 14px #ffb62799; }
#page-beekeeper .bk-fr.out { transform: translateY(-60px); opacity: 0; pointer-events: none; }
#page-beekeeper .bk-fr.gone { visibility: hidden; pointer-events: none; }
#page-beekeeper .bk-fr.next { animation: bkPulse 1s infinite alternate; }
@keyframes bkPulse { to { box-shadow: 0 0 16px #ffb627cc; } }

/* გაწმენდა */
#page-beekeeper .bk-frame { position: relative; width: 420px; height: 240px; border-radius: 8px; border: 4px solid #8b5a2b; overflow: hidden;
  background: radial-gradient(circle at 30% 30%, #ffc94a, #e08a00); cursor: crosshair; }
#page-beekeeper .bk-frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#page-beekeeper .bk-knife { position: absolute; pointer-events: none; font-size: 26px; transform: translate(-6px, -22px) rotate(-30deg); display: none; z-index: 2; }

/* ცენტრიფუგა */
#page-beekeeper .bk-ext-wrap { display: flex; align-items: center; gap: 28px; }
#page-beekeeper .bk-drum { width: 170px; height: 170px; border-radius: 50%; position: relative; cursor: pointer;
  background: radial-gradient(circle at 50% 50%, #9aa0a6 0 14%, #5d636a 15% 60%, #3d4349 61%); border: 6px solid #2b2f33; box-shadow: inset 0 0 18px #000a; }
#page-beekeeper .bk-drum::before { content: ""; position: absolute; inset: 20px; border-radius: 50%; border: 2px dashed #ffffff30; }
#page-beekeeper .bk-drum i { position: absolute; left: 50%; top: 50%; width: 6px; height: 64px; margin-left: -3px; margin-top: -64px; background: var(--honey);
  border-radius: 3px; transform-origin: 50% 100%; }
#page-beekeeper .bk-drum i:nth-child(2) { transform: rotate(120deg); }
#page-beekeeper .bk-drum i:nth-child(3) { transform: rotate(240deg); }
#page-beekeeper .bk-spin { position: absolute; inset: 0; border-radius: 50%; }
#page-beekeeper .bk-gauge { width: 230px; }
#page-beekeeper .bk-gauge .bk-bar { height: 16px; position: relative; }
#page-beekeeper .bk-zone { position: absolute; top: 0; bottom: 0; left: 55%; width: 22%; background: #3ddc6c55; border-left: 2px solid #3ddc6c; border-right: 2px solid #3ddc6c; }
#page-beekeeper .bk-needle { position: absolute; top: -3px; bottom: -3px; width: 4px; background: #fff; border-radius: 2px; left: 0; transition: left .05s linear; }
#page-beekeeper .bk-jar { width: 70px; height: 100px; border: 3px solid #ffffff55; border-top: none; border-radius: 0 0 14px 14px; position: relative; overflow: hidden; margin: 10px auto 0; }
#page-beekeeper .bk-jar i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(180deg, #ffc94a, #e08a00); transition: height .1s linear; }

/* შედეგი */
#page-beekeeper .bk-result { text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
#page-beekeeper .bk-big { font: 800 44px "Rajdhani", sans-serif; color: var(--honey); }
#page-beekeeper .bk-result.fail .bk-big { color: var(--red); }