.floating-calc-wrap{
  position: fixed;
  left: 9px;
  bottom: 200px;
  z-index: 999999;
}

.calc-only{
  display: block;
  text-decoration: none;
  position: relative;
}

/* X ala APK */
.calc-close-android{
  position: absolute;
  top: -9px;
  right: -3px;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff9b9b 0%, #d94a4a 45%, #7f1d1d 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 5px 12px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.35);
  animation: closeBlink 1.35s infinite ease-in-out;
  z-index: 30;
}

@keyframes closeBlink{
  0%,100%{ transform: scale(1); opacity: 1; }
  50%{ transform: scale(1.12); opacity: .72; }
}

/* stage orbit */
.calc-orbit-stage{
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* size samain feel APK 40x60 */
.real-calc{
  width: 50px;
  height: 60px;
  border-radius: 5px;
  background: linear-gradient(180deg,#dce2e8 0%,#7b8490 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    inset 0 -1px 0 rgba(0,0,0,.20),
    0 6px 12px rgba(0,0,0,.34);
  padding: 4px;
  position: relative;
  overflow: hidden;
  z-index: 10;
}

/* bola orbit jauh dari badan kalkulator */
.orbit-ball{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  margin-top: -10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  pointer-events: none;
  animation: orbitBallOutsideFar 4.6s linear infinite;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.35));
}

@keyframes orbitBallOutsideFar{
  0%{
    transform: translate(45px, 0px) scale(1.2);
    opacity: 1;
    z-index: 20;
  }
  12%{
    transform: translate(32px, -22px) scale(1.02);
    opacity: .92;
    z-index: 18;
  }
  25%{
    transform: translate(0px, -40px) scale(.7);
    opacity: .3;
    z-index: 1;
  }
  37%{
    transform: translate(-32px, -22px) scale(.68);
    opacity: .24;
    z-index: 1;
  }
  50%{
    transform: translate(-45px, 0px) scale(.65);
    opacity: .2;
    z-index: 1;
  }
  62%{
    transform: translate(-32px, 22px) scale(.84);
    opacity: .5;
    z-index: 6;
  }
  75%{
    transform: translate(0px, 40px) scale(1.05);
    opacity: 1;
    z-index: 18;
  }
  87%{
    transform: translate(32px, 22px) scale(1.18);
    opacity: 1;
    z-index: 20;
  }
  100%{
    transform: translate(45px, 0px) scale(1.2);
    opacity: 1;
    z-index: 20;
  }
}

/* screen */
.real-calc-screen{
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(180deg,#0c3a2f,#041d17);
  margin-bottom: 3px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 0 8px rgba(74,222,128,.22),
    0 0 4px rgba(34,197,94,.08);
  z-index: 6;
}

.screen-marquee{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.screen-text{
  font-size: 6px;
  font-weight: 900;
  letter-spacing: .6px;
  color: #8df5af;
  text-shadow:
    0 0 4px rgba(134,239,172,.72),
    0 0 8px rgba(134,239,172,.34);
  animation: parlayPulse 1.25s infinite ease-in-out;
}

@keyframes parlayPulse{
  0%,100%{ transform: scale(1); opacity: 1; }
  50%{ transform: scale(1.08); opacity: .74; }
}

/* keys */
.real-calc-keys{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 3px;
  position: relative;
  z-index: 6;
}

.rk{
  height: 6px;
  border-radius: 2px;
  background: linear-gradient(180deg,#ffffff,#d8dde2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    0 1px 1px rgba(0,0,0,.16);
}

.rk-dark{
  background: linear-gradient(180deg,#7b8490,#4b5563);
}

.rk-green{
  background: linear-gradient(180deg,#22c55e,#15803d);
}

.rk-wide{
  grid-column: span 2;
}

@media (max-width:640px){
  .floating-calc-wrap{
    left: 10px;
    bottom: 188px;
  }

  .calc-orbit-stage{
    width: 92px;
    height: 92px;
  }

  .calc-close-android{
    width: 28px;
    height: 28px;
    top: -6px;
    right: -3px;
  }
}