/* ============================================================
   KURT TIRMANIŞI — oyun sayfası stilleri
   ============================================================ */
#kt { --sw: max(250px, min(400px, calc(100vw - 32px), calc((100dvh - 290px) * 0.6))); }

.kt-hud { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: var(--sw); margin: 14px 0 12px; }
.kt-box {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 7px 6px; border-radius: 14px; background: var(--bg-soft); border: 1px solid var(--line);
  font-family: "Fredoka", sans-serif; min-height: 54px;
}
.kt-box small { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.kt-box b { font-size: 21px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.kt-box.moon b { color: #ffcc33; }

#kt-stage {
  position: relative; width: var(--sw); aspect-ratio: 3 / 5;
  border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(166, 123, 251, 0.35);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  cursor: pointer; background: #1a1238;
}
#kt-canvas { display: block; width: 100%; height: 100%; }
#kt-over {
  position: absolute; left: 50%; bottom: 22%; transform: translateX(-50%);
  padding: 10px 18px; border-radius: 999px;
  background: rgba(20, 12, 46, 0.78); border: 1px solid rgba(166, 123, 251, 0.5);
  color: #fff; font-family: "Fredoka", sans-serif; font-size: 15px; white-space: nowrap;
  pointer-events: none; animation: kt-pulse 1.6s ease-in-out infinite;
}
#kt-over[hidden] { display: none; }
@keyframes kt-pulse { 50% { transform: translateX(-50%) scale(1.05); } }
#kt-stage.shake { animation: kt-shake 0.4s; }
@keyframes kt-shake { 20% { translate: -6px 0; } 40% { translate: 5px 0; } 60% { translate: -3px 0; } 80% { translate: 2px 0; } }
#kt-stage.nocur, #kt-stage.nocur * { cursor: none; }

/* Kontrol rehberi: oyun alanıyla aynı genişlikte tek panel */
.kt-hint { width: var(--sw); margin: 12px 0 0; }
.kt-guide {
  border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.16), rgba(139, 92, 246, 0.05));
  border: 1px solid rgba(166, 123, 251, 0.3);
}
.kt-auto {
  margin: 0; padding: 9px 12px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: "Fredoka", sans-serif; font-size: 14px; color: #ffe08a; text-align: center;
  background: linear-gradient(90deg, rgba(255, 204, 51, 0.04), rgba(255, 204, 51, 0.16), rgba(255, 204, 51, 0.04));
  border-bottom: 1px solid rgba(255, 204, 51, 0.25);
}
.kt-auto span { display: inline-block; animation: kt-hop 1.2s ease-in-out infinite; }
@keyframes kt-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-4px); } }
.kt-tiles { display: grid; grid-template-columns: 1.45fr 1fr 0.75fr; }
.kt-tiles.one { grid-template-columns: 1fr; }
.kt-t {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px;
  padding: 12px 8px 12px; text-align: center;
  font-family: "Fredoka", sans-serif;
}
.kt-t + .kt-t { border-left: 1px solid rgba(166, 123, 251, 0.18); }
.kt-t b { font-weight: 500; font-size: 12.5px; line-height: 1.25; color: var(--ink-dim); }
.kt-ic { height: 34px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.kt-ic > i { width: 1px; height: 22px; margin: 0 4px; background: rgba(166, 123, 251, 0.35); }
.kt-t kbd {
  min-width: 28px; height: 28px; padding: 0 5px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Fredoka", sans-serif; font-size: 13.5px; font-weight: 600; color: #fff;
  background: linear-gradient(180deg, #4a3690, #2e2163);
  border: 1px solid rgba(166, 123, 251, 0.55);
  box-shadow: 0 3px 0 #1a1238, 0 4px 10px rgba(0, 0, 0, 0.35);
  transition: transform 0.08s, box-shadow 0.08s, background 0.15s;
}
.kt-t kbd.on { transform: translateY(2px); background: linear-gradient(180deg, #a67bfb, #7c3aed); box-shadow: 0 1px 0 #1a1238, 0 0 16px rgba(166, 123, 251, 0.8); }
/* Fare çizimi: sağa-sola kayar */
.kt-mouse { position: relative; width: 20px; height: 30px; border-radius: 10px; border: 2px solid #c9b3ff; animation: kt-swing 2s ease-in-out infinite; }
.kt-mouse::before { content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 11px; margin-left: -1px; background: rgba(201, 179, 255, 0.6); }
.kt-mouse i { position: absolute; left: 50%; top: 5px; width: 4px; height: 6px; margin-left: -2px; border-radius: 2px; background: #ffcc33; }
.kt-finger { font-size: 26px; line-height: 1; display: inline-block; animation: kt-swing 1.6s ease-in-out infinite; }
@keyframes kt-swing { 0%, 100% { translate: -8px 0; } 50% { translate: 8px 0; } }
.kt-t.touch { flex-direction: row; justify-content: center; gap: 14px; padding: 12px; }
.kt-t.touch b { font-size: 14.5px; color: var(--ink); }

.kt-end-img { width: 96px; height: 96px; object-fit: contain; display: block; margin: 0 auto 4px; animation: kt-pop 0.6s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes kt-pop { from { transform: scale(0.5); opacity: 0; } }
.kt-demo { display: flex; align-items: flex-end; justify-content: center; gap: 10px; margin: 4px 0 14px; }
.kt-demo img { width: 64px; height: auto; animation: kt-bob 1.6s ease-in-out infinite; }
.kt-demo img:nth-child(2) { animation-delay: 0.15s; }
.kt-demo img:nth-child(3) { width: 52px; animation-delay: 0.3s; }
.kt-demo img.sm { width: 30px; animation-delay: 0.45s; }
@keyframes kt-bob { 50% { transform: translateY(-6px); } }
.kt-hic { display: inline-flex; align-items: center; justify-content: center; width: 30px; font-size: 17px; margin-right: 4px; }
.kt-hic img { width: 30px; height: 20px; object-fit: contain; }

@media (prefers-reduced-motion: reduce) { #kt-over, .kt-demo img, #kt-stage.shake, .kt-mouse, .kt-finger, .kt-auto span { animation: none; } }