/* =========================================================================
   interact.css — ინტერაქციის მინიშნება ("დააჭირეთ H")
   ფერები: #FF4747 · #EAEAEA · მუქი შავი
   პოზიციის შესაცვლელად: --ip-top (ეკრანის ზემოდან დაშორება)
   ========================================================================= */
#ip-root {
  --ip-top: 110px;
  --ip-red: #ff4747;
  --ip-light: #eaeaea;
  --ip-dark: #0b0b0d;
  position: fixed; top: var(--ip-top); left: 50%;
  transform: translateX(-50%);
  z-index: 24000; pointer-events: none;
  font-family: 'Noto Sans Georgian', 'Manrope', sans-serif;
}

.ip {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 10px 22px 10px 10px; border-radius: 16px; overflow: hidden;
  background: linear-gradient(135deg, rgba(14, 14, 17, .78), rgba(8, 8, 10, .78));
  border: 1px solid rgba(234, 234, 234, .10);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5), 0 0 26px rgba(255, 71, 71, .20);
  backdrop-filter: blur(8px) saturate(1.15);
  -webkit-backdrop-filter: blur(8px) saturate(1.15);
  color: var(--ip-light);
  opacity: 0; transform: translateY(-18px) scale(.94);
  transition: opacity .28s ease, transform .38s cubic-bezier(.2, 1.25, .4, 1);
}
/* წითელი ზოლი, რომელიც კონტეინერის გარშემო ერთ წრეს ირბენს, ჩერდება და ცოტა ხანში თავიდან იწყებს
   ხანგრძლივობა: --ip-lap (მთელი ციკლი) · წრე იკავებს ციკლის პირველ 60%-ს (~2.7წმ), დანარჩენი ~1.8წმ პაუზაა; ზოლი არ ქრება */
@property --ip-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.ip::before {
  --ip-lap: 4.5s;
  content: ''; position: absolute; inset: -1px; padding: 2px; border-radius: inherit;
  background: conic-gradient(from var(--ip-a), transparent 0deg, transparent 280deg, rgba(255, 71, 71, .55) 330deg, #ff4747 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(0 0 5px #ff4747);
  pointer-events: none;
  animation: ipLap var(--ip-lap) linear infinite;
}
.ip.show { opacity: 1; transform: none; }

/* ღილაკი (კლავიშის ფორმა) */
.ip-key {
  position: relative; flex: 0 0 auto;
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Rajdhani', 'Manrope', sans-serif; font-size: 25px; font-weight: 700; line-height: 1;
  color: var(--ip-light); background: var(--ip-dark);
  border: 2px solid var(--ip-red);
  box-shadow: 0 4px 0 #b32d2d, 0 0 18px rgba(255, 71, 71, .45), inset 0 0 12px rgba(255, 71, 71, .18);
  text-shadow: 0 0 10px rgba(255, 71, 71, .8);
  animation: ipPress 1.6s ease-in-out infinite;
}
.ip-key::after {                                /* გარეთ გავარდნილი რგოლი */
  content: ''; position: absolute; inset: -2px; border-radius: 12px;
  border: 2px solid var(--ip-red); opacity: 0;
  animation: ipRing 1.6s ease-out infinite;
}

.ip-body { display: flex; flex-direction: column; min-width: 0; }
.ip-text {
  font-size: 15px; font-weight: 800; letter-spacing: .02em; color: var(--ip-light); white-space: nowrap;
}
.ip-text b { color: var(--ip-red); font-weight: 800; text-shadow: 0 0 10px rgba(255, 71, 71, .55); }
.ip-sub {
  margin-top: 2px; font-size: 12px; font-weight: 600; color: rgba(234, 234, 234, .62); white-space: nowrap;
}
.ip-sub:empty { display: none; }

/* სხვა გვერდის გახსნისას (მენიუ, ინვენტარი...) მინიშნება იმალება */
body.cef-focused #ip-root { opacity: 0; }

@keyframes ipPress {
  0%, 100% { transform: translateY(0);   box-shadow: 0 4px 0 #b32d2d, 0 0 18px rgba(255, 71, 71, .45), inset 0 0 12px rgba(255, 71, 71, .18); }
  50%      { transform: translateY(3px); box-shadow: 0 1px 0 #b32d2d, 0 0 24px rgba(255, 71, 71, .65), inset 0 0 14px rgba(255, 71, 71, .28); }
}
@keyframes ipRing { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.55); opacity: 0; } }
@keyframes ipLap {
  0%   { --ip-a: 0deg; }
  60%  { --ip-a: 360deg; }
  100% { --ip-a: 360deg; }
}