/* ============================================================
   KURT KOŞUSU — oyun sayfası stilleri
   ============================================================ */
.wr-page { padding: 18px 16px 40px; display: flex; justify-content: center; }
#wr { width: 100%; max-width: 900px; display: flex; flex-direction: column; align-items: center; }
.wr-head { text-align: center; margin-bottom: 10px; }
.wr-head h1 { font-size: 28px; }
.wr-head p { margin: 4px 0 0; color: var(--ink-dim); font-size: 14px; }

#wr-hud { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 10px; margin-bottom: 10px; }
.wr-stat { display: flex; flex-direction: column; line-height: 1.1; }
.wr-stat.right { align-items: flex-end; }
.wr-stat small, .wr-wordbox small { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.wr-stat b { font-family: "Fredoka", sans-serif; font-size: 26px; color: var(--ink); }
.wr-wordbox { display: flex; flex-direction: column; align-items: center; gap: 4px; }
#wr-word { display: flex; gap: 4px; min-height: 32px; }
#wr-word span {
  width: 28px; height: 32px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 17px;
  background: var(--bg-soft-2); color: var(--ink-faint);
  border: 1px solid var(--line);
  transition: background 0.2s, color 0.2s, transform 0.25s cubic-bezier(.34,1.56,.64,1);
}
#wr-word span.next { border-color: var(--violet); color: var(--ink); box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.3); animation: wr-next 1s ease-in-out infinite; }
@keyframes wr-next { 50% { transform: translateY(-3px); } }
#wr-word span.got { background: var(--violet); color: #fff; border-color: transparent; transform: scale(1.06); }
#wr-word.flash span { background: #ffcc33; color: #17102e; animation: wr-flash 0.6s ease both; animation-delay: calc(var(--i) * 0.05s); }
@keyframes wr-flash { 40% { transform: translateY(-8px) scale(1.15); } }

#wr-stage {
  position: relative;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  touch-action: none;
  user-select: none;
  cursor: pointer;
  background: #120c26;
}
#wr-canvas { display: block; width: 100%; height: 300px; }
#wr-stage.shake { animation: wr-shake 0.4s ease; }
@keyframes wr-shake { 20% { transform: translate(-6px, 2px); } 40% { transform: translate(6px, -2px); } 60% { transform: translate(-4px, 1px); } 80% { transform: translate(3px, 0); } }
#wr-tap {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 10px 18px; border-radius: 999px;
  background: rgba(11, 8, 24, 0.75); color: #f5f3ff;
  font-family: "Fredoka", sans-serif; font-size: 15px;
  pointer-events: none; white-space: nowrap;
  animation: wr-pulse 1.4s ease-in-out infinite;
}
@keyframes wr-pulse { 50% { opacity: 0.6; } }

/* Telefon düğmeleri (sadece dokunmatik ekranlarda) */
.wr-controls { display: none; width: 100%; gap: 12px; margin-top: 12px; }
.wr-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 64px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--ink);
  font-family: "Fredoka", sans-serif; font-size: 16px;
  touch-action: none; user-select: none;
}
.wr-btn b { font-size: 24px; }
.wr-btn:active { transform: scale(0.96); background: var(--badge-bg); border-color: var(--violet); }
#wr-btn-jump { flex: 1.6; background: var(--violet); color: #fff; border-color: transparent; }
@media (hover: none) and (pointer: coarse) { .wr-controls { display: flex; } }
.wr-keys-hint { margin-top: 10px; font-size: 13px; color: var(--ink-faint); text-align: center; }
@media (hover: none) and (pointer: coarse) { .wr-keys-hint { display: none; } }

/* Pencereler */
.wr-modal {
  position: fixed; inset: 0; z-index: 4500;
  background: rgba(6, 4, 14, 0.72);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: wr-fade 0.2s ease-out;
}
@keyframes wr-fade { from { opacity: 0; } to { opacity: 1; } }
.wr-card {
  width: min(420px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: radial-gradient(ellipse at 50% 0%, rgba(139, 92, 246, 0.25), transparent 70%), var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 24px 22px 20px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  animation: wr-card-in 0.35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes wr-card-in { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.wr-card h3 { font-size: 24px; margin: 6px 0 10px; }
.wr-card p { color: var(--ink-dim); font-size: 14.5px; margin: 0 0 10px; }
.wr-intro-wolf { height: 90px; display: flex; justify-content: center; }
.wr-intro-wolf img { height: 100%; width: auto; animation: wr-hop 1.2s ease-in-out infinite; }
@keyframes wr-hop { 0%, 100% { transform: translateY(0) rotate(0); } 45% { transform: translateY(-14px) rotate(-6deg); } }
.wr-how { list-style: none; padding: 0; margin: 8px 0 16px; text-align: left; display: flex; flex-direction: column; gap: 10px; }
.wr-how li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-dim); font-size: 14.5px; }
.wr-how li span {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--violet); color: #fff; font-size: 14px;
}
.wr-go { font-size: 17px; padding: 13px 32px; }
.wr-end-emoji { font-size: 40px; line-height: 1; }
.wr-end-score { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 54px; line-height: 1; color: var(--ink); margin: 4px 0 6px; }
.wr-newbest { color: #ffcc33 !important; font-family: "Fredoka", sans-serif; font-size: 16px !important; }
.wr-muted { color: var(--ink-faint) !important; }
.wr-end-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 10px; }
.wr-end-stats div { display: flex; flex-direction: column; align-items: center; }
.wr-end-stats b { font-family: "Fredoka", sans-serif; font-size: 20px; color: var(--ink); }
.wr-end-stats span { font-size: 12px; color: var(--ink-faint); }
.wr-found { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-bottom: 14px; }
.wr-found span { font-family: "Fredoka", sans-serif; font-size: 13px; padding: 2px 9px; border-radius: 999px; background: var(--badge-bg); border: 1px solid var(--badge-border); color: var(--violet-bright); }
.wr-end-actions { display: flex; gap: 10px; margin-top: 6px; }
.wr-end-actions .btn { flex: 1 1 0; justify-content: center; padding-left: 10px; padding-right: 10px; }

@media (max-width: 640px) {
  .wr-page { padding-top: 10px; }
  .wr-head h1 { font-size: 22px; }
  .wr-head p { display: none; }
  #wr-word span { width: 24px; height: 28px; font-size: 15px; }
  .wr-stat b { font-size: 22px; }
  body:has(#wr) .egg-moon { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #wr-word span.next, .wr-intro-wolf img, #wr-tap { animation: none; }
}

/* Oyun sonu penceresi: ortadan, büyükten küçüğe yavaşça gelir */
.wr-modal:has(.wr-card.end) { animation: wr-fade 0.6s ease-out; }
.wr-card.end { animation: wr-end-in 0.6s cubic-bezier(.22, 1.2, .36, 1) both; }
@keyframes wr-end-in {
  0% { transform: scale(1.9); opacity: 0; filter: blur(6px); }
  60% { opacity: 1; filter: blur(0); }
  100% { transform: scale(1); opacity: 1; }
}
.wr-card.end .wr-end-emoji { animation: wr-dizzy 1.6s ease-in-out infinite; display: inline-block; }
@keyframes wr-dizzy { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }

/* Başlangıç penceresi: kurt olduğu yerde koşar (6 karelik koşu görseli) */
.wr-intro-run {
  width: 147px; height: 90px;
  background-repeat: no-repeat;
  background-size: 882px 90px;
  animation: wr-run-steps 0.6s steps(6) infinite;
}
@keyframes wr-run-steps { from { background-position: 0 0; } to { background-position: -882px 0; } }
@media (prefers-reduced-motion: reduce) { .wr-intro-run { animation: none; } }

/* Kontrol açıklamaları */
.wr-keys-hint, .wr-touch-hint { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; font-size: 13.5px; color: var(--ink-dim); }
.wr-touch-hint { display: none; }
@media (hover: none) and (pointer: coarse) { .wr-touch-hint { display: flex; } }
.wr-k { display: inline-flex; align-items: center; gap: 5px; }
.wr-k b { font-weight: 600; color: var(--ink); }
.wr-k i { font-style: normal; color: var(--ink-faint); font-size: 12.5px; }
.wr-k kbd {
  min-width: 26px; height: 24px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  border: 1px solid var(--line);
  border-bottom-width: 3px;
  background: var(--bg-soft);
  color: var(--ink);
  font-family: "Fredoka", sans-serif; font-size: 12.5px;
}
@media (hover: none) and (pointer: coarse) { .wr-keys-hint { display: none; } }

/* Oyun alanında ve pencerelerde çift tıklayınca yazılar mavi seçilmesin */
.page:has(#wr) main, #wr, #wr *, .wr-modal, .wr-modal * { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
#wr ::selection, .wr-modal ::selection, .page:has(#wr) main ::selection { background: transparent; }