/* ============================================================
TPG – Scope Circle Component (top right)
Self-contained. No layout responsibilities outside component.
============================================================ */

.tpg-scopeCard{
  display:flex;
  align-items:center;
  justify-content:center;
  height: 100%;
}

/* Big blue circle with subtle background pattern feel */
.tpg-scopeCircle{
  width: min(420px, 92%);
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  position: relative;
  background: #4aa3ff; /* close to sample */
  overflow: hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Optional subtle pattern overlay (very light) 
.tpg-scopeCircle::before{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.10) 0px,
      rgba(255,255,255,0.10) 2px,
      rgba(255,255,255,0.00) 2px,
      rgba(255,255,255,0.00) 12px);
  opacity: 0.08;
  pointer-events:none;
}*/

/* Center icon holder */
.tpg-scopeCenter{
  width: 44%;
  aspect-ratio: 1/1;
  border-radius: 999px;
  background: rgba(255,255,255,0.0); /* the icon itself has white bulb */
  display:flex;
  align-items:center;
  justify-content:center;
  position: relative;
  z-index: 2;
}

.tpg-scopeIcon{
  width: 100%;
  height: 100%;
  display:block;
}

/* Labels */
.tpg-scopeLabel{
  position:absolute;
  color:#fff;
  font-weight: 800;
  letter-spacing: 0.2px;
  text-align:center;
  font-size: 1.05rem;
  line-height: 1.12;
  z-index: 3;
  text-shadow: 0 1px 0 rgba(0,0,0,0.06);
}

/* Position map (tuned to match your reference) */
.tpg-lTop{ top: 14%; left: 50%; transform: translateX(-50%); }

.tpg-lTopLeft{ top: 23%; left: 22%; transform: translateX(-50%); }
.tpg-lTopRight{ top: 23%; left: 78%; transform: translateX(-50%); }

.tpg-lLeft{ top: 44%; left: 15%; transform: translateX(-50%); }
.tpg-lRight{ top: 44%; left: 85%; transform: translateX(-50%); }

.tpg-lBottomLeft{ top: 70%; left: 23%; transform: translateX(-50%); }
.tpg-lBottomRight{ top: 70%; left: 77%; transform: translateX(-50%); }

/* Ticks (small white dashes around) */
.tpg-scopeTick{
  position:absolute;
  width: 26px;
  height: 6px;
  border-radius: 6px;
  background: rgba(255,255,255,0.92);
  z-index: 2;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.05));
}

/* Manually placed like the reference */
.tpg-t1{ top: 20%; left: 50%; transform: translateX(-50%) rotate(90deg); }   /* top */
.tpg-t2{ top: 30%; left: 36%; transform: rotate(35deg); }                   /* upper-left */
.tpg-t3{ top: 30%; left: 64%; transform: rotate(-35deg); }                  /* upper-right */
.tpg-t4{ top: 45%; left: 28%; transform: rotate(0deg); }                    /* left-mid */
.tpg-t5{ top: 45%; left: 72%; transform: rotate(0deg); }                    /* right-mid */
.tpg-t6{ top: 63%; left: 36%; transform: rotate(-35deg); }                  /* lower-left */
.tpg-t7{ top: 63%; left: 64%; transform: rotate(35deg); }                   /* lower-right */

/* Bottom pill */
.tpg-scopePill{
  position:absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  background: #F6B21A;
  color: #fff;
  font-weight: 800;
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 1.0rem;
  z-index: 4;
}

/* Responsive text scaling */
@media (max-width: 520px){
  .tpg-scopeLabel{ font-size: 0.92rem; }
  .tpg-scopePill{ font-size: 0.92rem; padding: 9px 18px; }
  .tpg-scopeTick{ width: 22px; height: 5px; }
}