#triangleMaster{
  --ink:#163047;
  --blue:#36aee2;
  --green:#2f9f59;
  --orange:#f47a3d;
  --line:#d9e7ef;

  max-width:900px;
  margin:20px auto;
  padding:14px;

  color:var(--ink);

  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;
}

#triangleMaster *{
  box-sizing:border-box;
}


/* ÜST BİLGİ */

#triangleMaster .tm-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;

  margin-bottom:10px;
}

#triangleMaster .tm-brand{
  font-size:15px;
  font-weight:900;
}

#triangleMaster .tm-stats{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

#triangleMaster .tm-pill,
#triangleMaster .tm-sound{
  padding:7px 11px;

  background:#ffffff;

  border:
    1px solid var(--line);

  border-radius:999px;

  color:var(--ink);

  font-size:14px;
  font-weight:800;

  box-shadow:
    0 3px 10px
    rgba(20,50,70,.05);
}

#triangleMaster .tm-sound{
  cursor:pointer;
  background:#eef8fd;
}


/* OYUN ALANI */

#triangleMaster .tm-gamebox{
  position:relative;

  min-height:650px;

  overflow:hidden;

  background:
    linear-gradient(
      180deg,
      #fbfeff,
      #f3faff
    );

  border:
    2px solid #dceaf1;

  border-radius:22px;

  box-shadow:
    0 16px 40px
    rgba(30,80,110,.12);
}


/* GÖREV */

#triangleMaster .tm-hud{
  padding:
    17px 15px 10px;

  text-align:center;
}

#triangleMaster .tm-small-title{
  margin-bottom:5px;

  color:#7a8d9b;

  font-size:11px;
  font-weight:900;

  letter-spacing:1.5px;
}

#triangleMaster .tm-mission{
  display:inline-block;

  padding:
    11px 22px;

  background:#163047;

  color:#ffe173;

  border-radius:15px;

  font-size:
    clamp(19px,3vw,25px);

  font-weight:900;

  box-shadow:
    0 6px 15px
    rgba(22,48,71,.18);
}

#triangleMaster .tm-help{
  margin-top:8px;

  color:#607685;

  font-size:13px;
  font-weight:700;
}


/* ÇİZİM ALANI */

#triangleMaster .tm-blueprint{
  position:relative;

  margin:
    5px 24px 0;

  overflow:hidden;

  background:#ffffff;

  border:
    1px solid #d9e9f1;

  border-radius:18px;

  box-shadow:
    inset 0 0 30px
    rgba(54,174,226,.04);
}

#triangleMaster .tm-stage{
  display:block;

  width:100%;
  height:410px;

  touch-action:none;
  user-select:none;
}

#triangleMaster .tm-svg-label{
  fill:#163047;

  font-size:25px;
  font-weight:900;
}

#triangleMaster .tm-c-label{
  fill:#2394ca;
}

#triangleMaster #tmHandle{
  cursor:grab;
}

#triangleMaster #tmHandle:active{
  cursor:grabbing;
}

#triangleMaster .tm-drag-note{
  position:absolute;

  left:50%;
  bottom:8px;

  transform:
    translateX(-50%);

  padding:
    6px 12px;

  background:
    rgba(255,255,255,.90);

  color:#708392;

  border-radius:999px;

  font-size:12px;
  font-weight:800;
}


/* ÖLÇÜM */

#triangleMaster .tm-measure{
  min-height:25px;

  padding:
    10px 15px 0;

  color:#667b89;

  text-align:center;

  font-size:13px;
}

#triangleMaster .tm-result{
  min-height:48px;

  padding:
    9px 18px;

  text-align:center;

  font-size:17px;
  font-weight:800;
}


/* BUTONLAR */

#triangleMaster .tm-controls{
  display:flex;

  justify-content:center;
  align-items:center;

  flex-wrap:wrap;

  gap:9px;

  padding:
    3px 15px 19px;
}

#triangleMaster .tm-check,
#triangleMaster .tm-hint,
#triangleMaster .tm-next,
#triangleMaster .tm-start{
  border:0;

  border-radius:14px;

  padding:
    13px 22px;

  color:#ffffff;

  font-size:16px;
  font-weight:900;

  cursor:pointer;

  transition:
    transform .15s ease,
    filter .15s ease;
}

#triangleMaster .tm-check{
  background:
    linear-gradient(
      135deg,
      #2f9f59,
      #48b76d
    );

  box-shadow:
    0 6px 16px
    rgba(47,159,89,.24);
}

#triangleMaster .tm-hint{
  background:#697f90;
}

#triangleMaster .tm-next{
  display:none;

  background:
    linear-gradient(
      135deg,
      #2e9fd5,
      #49b9e8
    );
}

#triangleMaster .tm-start{
  padding:
    15px 30px;

  background:
    linear-gradient(
      135deg,
      #2f9f59,
      #45b66d
    );

  font-size:19px;

  box-shadow:
    0 7px 17px
    rgba(47,159,89,.25);
}

#triangleMaster button:hover{
  transform:
    translateY(-2px);

  filter:
    brightness(.98);
}

#triangleMaster button:disabled{
  opacity:.45;

  cursor:not-allowed;

  transform:none;
}


/* BAŞLANGIÇ / SON EKRANI */

#triangleMaster .tm-overlay{
  position:absolute;

  inset:0;

  z-index:50;

  display:flex;

  justify-content:center;
  align-items:center;

  padding:20px;

  background:
    rgba(244,251,255,.97);

  text-align:center;
}

#triangleMaster .tm-panel{
  width:
    min(100%,600px);

  padding:30px;

  background:#ffffff;

  border:
    1px solid #d9e7ef;

  border-radius:24px;

  box-shadow:
    0 20px 55px
    rgba(25,65,90,.17);
}

#triangleMaster .tm-main-icon{
  margin-bottom:2px;

  font-size:65px;
}

#triangleMaster .tm-panel h2{
  margin:0;

  color:#163047;

  font-size:
    clamp(31px,6vw,48px);
}

#triangleMaster .tm-subtitle{
  margin-top:-3px;

  color:#2f9f59;

  font-size:22px;
  font-weight:900;
}

#triangleMaster .tm-panel p{
  margin:
    15px auto;

  max-width:520px;

  color:#5f7381;

  line-height:1.6;
}

#triangleMaster .tm-rules{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:9px;

  margin:
    20px 0;
}

#triangleMaster .tm-rules div{
  display:flex;

  flex-direction:column;

  gap:4px;

  padding:
    14px 8px;

  background:#f4f9fc;

  border-radius:14px;
}

#triangleMaster .tm-rules span{
  font-size:27px;
}

#triangleMaster .tm-rules strong{
  color:#213d53;

  font-size:14px;
}

#triangleMaster .tm-rules small{
  color:#728794;

  font-size:12px;
}


/* BAŞARI EFEKTİ */

#triangleMaster #tmPoly{
  transition:
    fill .25s ease,
    filter .25s ease;
}

#triangleMaster #tmPoly.tm-success{
  fill:
    rgba(47,159,89,.30);

  filter:
    drop-shadow(
      0 0 14px
      rgba(47,159,89,.6)
    );
}


/* YILDIZ PATLAMASI */

#triangleMaster .tm-burst{
  position:absolute;

  inset:0;

  z-index:40;

  overflow:hidden;

  pointer-events:none;
}

#triangleMaster .tm-burst span{
  position:absolute;

  font-size:27px;

  animation:
    tmBurst .85s ease-out forwards;
}

@keyframes tmBurst{

  from{
    opacity:1;

    transform:
      translate(0,0)
      scale(.6);
  }

  to{
    opacity:0;

    transform:
      translate(
        var(--dx),
        var(--dy)
      )
      scale(1.3);
  }

}


/* HATA SARSINTISI */

#triangleMaster.tm-shake{
  animation:
    tmShake .28s ease;
}

@keyframes tmShake{

  0%,100%{
    transform:
      translateX(0);
  }

  25%{
    transform:
      translateX(-6px);
  }

  75%{
    transform:
      translateX(6px);
  }

}


/* ALT BİLGİ */

#triangleMaster .tm-footer{
  margin-top:9px;

  color:#718593;

  text-align:center;

  font-size:12px;
}


/* MOBİL */

@media(max-width:620px){

  #triangleMaster{
    padding:5px;
  }

  #triangleMaster .tm-gamebox{
    min-height:650px;
  }

  #triangleMaster .tm-blueprint{
    margin:
      5px 8px 0;
  }

  #triangleMaster .tm-stage{
    height:370px;
  }

  #triangleMaster .tm-rules{
    grid-template-columns:1fr;
  }

  #triangleMaster .tm-panel{
    padding:20px;
  }

  #triangleMaster .tm-pill,
  #triangleMaster .tm-sound{
    padding:6px 9px;

    font-size:12px;
  }

  #triangleMaster .tm-check,
  #triangleMaster .tm-hint,
  #triangleMaster .tm-next{
    width:100%;
  }

}