/* (Сонголтоор) Roboto фонт оруулах */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;800&display=swap");

.aztan-wrap{
  max-width: 560px;
  margin: 24px auto;
  text-align: center;
  padding: 10px;
}

.aztan-wrap h2{
  font-family: "Roboto", Arial, sans-serif;
  font-size: 44px;         /* хүсвэл өөрчил */
  font-weight: 800;
  margin-top: 0;
  margin-bottom: 10px;
  transform: translateY(-25px); /* дээш нь хөдөлгөнө: -12px / -20px гэх мэт */
}

.aztan-wheel{
  position: relative;
  width: 340px;
  height: 340px;
  margin: 16px auto;
}

/* Pointer */
.aztan-pointer{
  position:absolute;
  top:-55px;
  left:50%;
  transform: translateX(-50%) rotate(180deg);
  transform-origin: 50% 100%;
  width:0;
  height:0;
  border-left:14px solid transparent;
  border-right:14px solid transparent;
  border-bottom:26px solid #111;
  z-index: 30;
}

.aztan-pointer::after{
  content:"";
  position:absolute;
  left:50%;
  top:28px;
  transform:translateX(-50%);
  width:12px;
  height:12px;
  background:#111;
  border-radius:50%;
}

/* Disk */
.aztan-disk{
  position: relative;
  width:100%;
  height:100%;
  border-radius:50%;
  border:10px solid #d7d7d7;
  overflow:hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);

  /* эргүүлэх animation */
  transition: transform 4.5s cubic-bezier(.15,.85,.1,1);

  /* 12 сегмент = 30deg, Blue/Yellow */
  background: conic-gradient(
    #1e63d6 0deg 30deg,
    #f6c21a 30deg 60deg,
    #1e63d6 60deg 90deg,
    #f6c21a 90deg 120deg,
    #1e63d6 120deg 150deg,
    #f6c21a 150deg 180deg,
    #1e63d6 180deg 210deg,
    #f6c21a 210deg 240deg,
    #1e63d6 240deg 270deg,
    #f6c21a 270deg 300deg,
    #1e63d6 300deg 330deg,
    #f6c21a 330deg 360deg
  );
}

/* Center cap (төвийн цагаан дугуй) */
.aztan-disk::after{
  content:"";
  position:absolute;
  inset: 40%;
  background: rgba(255,255,255,.92);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  z-index: 2;
}

/* SVG overlay (label-үүд) */
.aztan-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index: 20;
  pointer-events:none;
}

/* Text styling (SVG) */
.aztan-svg text{
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 700;
  paint-order: stroke fill;
  letter-spacing: 0;
}

/* Blue segment => цайвар текст */
.aztan-svg .label-light{
  fill: rgba(255,255,255,.95);
  stroke: rgba(0,0,0,.28);
  stroke-width: .8px;
}

/* Yellow segment => бараан текст */
.aztan-svg .label-dark{
  fill: rgba(0,0,0,.88);
  stroke: rgba(255,255,255,.18);
  stroke-width: .8px;
}

/* Button / message */
.aztan-btn{
  padding: 11px 20px;
  font-size: 16px;
  margin-top: 18px;
  border: 0;
  border-radius: 10px;
  background: #f6c21a;
  font-weight: 800;
  cursor: pointer;
  font-family: "Roboto", Arial, sans-serif;
}

.aztan-btn:disabled{
  opacity: .55;
  cursor: not-allowed;
}

.aztan-msg{
  margin-top: 12px;
  min-height: 20px;
  font-family: "Roboto", Arial, sans-serif;
}
/* ====== DIV LABELS (renderLabels ашиглаж байгаа үед) ====== */
.aztan-label{
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 25;              /* төвийн cap (z=2)-оос дээр гарна */
  pointer-events: none;
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 800;
  font-size: 12px;          /* эндээс багасгана/томруулна */
  line-height: 1.05;
  text-align: center;
  white-space: normal;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/* Цэнхэр сектор дээр цагаан текст */
.aztan-label.label-light{
  color: rgba(255,255,255,.96);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* Шар сектор дээр хар текст */
.aztan-label.label-dark{
  color: rgba(0,0,0,.88);
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

/* төвийн cap нь label дээр дарж болохгүй */
.aztan-disk::after{
  z-index: 2;
}