/* ===== Kurban Bayramı Şaka Sitesi ===== */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --green:   #0e5c3a;
  --green-2: #137a4d;
  --gold:    #f4c430;
  --cream:   #fff8e7;
}

html, body {
  height: 100%;
  overflow: hidden;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  background: radial-gradient(circle at 50% 20%, var(--green-2), var(--green) 70%);
  color: var(--cream);
  user-select: none;
  touch-action: none;
}

/* ===== Ekran yönetimi ===== */
.screen {
  position: fixed; inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4vh 5vw;
  gap: 2.4vh;
}
.screen.active { display: flex; animation: fadeIn .5s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ===== Yıldız/hilal arka plan deseni ===== */
.stars {
  position: absolute; inset: 0; z-index: -1; opacity: .35;
  background-image:
    radial-gradient(2px 2px at 20% 30%, #fff, transparent),
    radial-gradient(2px 2px at 70% 20%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 40% 70%, #fff, transparent),
    radial-gradient(2px 2px at 85% 60%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 15% 80%, #fff, transparent),
    radial-gradient(2px 2px at 60% 85%, #fff, transparent);
  animation: twinkle 4s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .2; } to { opacity: .5; } }

/* ===== Başlıklar ===== */
.title {
  font-size: clamp(1.6rem, 6vw, 3rem);
  line-height: 1.25;
  text-shadow: 0 3px 0 rgba(0,0,0,.25);
  max-width: 900px;
}
.name { color: var(--gold); text-shadow: 0 0 14px rgba(244,196,48,.6); }
.subtitle { font-size: clamp(1rem, 3.5vw, 1.4rem); opacity: .9; max-width: 600px; }
.hint { font-size: clamp(.85rem, 3vw, 1.05rem); opacity: .75; font-style: italic; }

/* ===== Buton ===== */
.big-btn {
  margin-top: 1vh;
  padding: 18px 38px;
  font-size: clamp(1.1rem, 4.5vw, 1.6rem);
  font-weight: bold;
  font-family: inherit;
  color: #4a2c00;
  background: linear-gradient(180deg, #ffe48a, var(--gold));
  border: none; border-radius: 999px;
  box-shadow: 0 8px 0 #b8860b, 0 12px 22px rgba(0,0,0,.35);
  cursor: pointer;
  transition: transform .08s, box-shadow .08s;
}
.big-btn:active { transform: translateY(6px); box-shadow: 0 2px 0 #b8860b, 0 4px 12px rgba(0,0,0,.35); }
.big-btn.small { padding: 14px 30px; }

/* ===== Keçi sahnesi ===== */
.goat-stage {
  position: relative;
  width: clamp(180px, 55vw, 300px);
  height: clamp(180px, 55vw, 300px);
}
.intro-goat { animation: sway 2.4s ease-in-out infinite; }
@keyframes sway { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

.goat { position: absolute; inset: 0; }
.goat-body { display: block; filter: drop-shadow(0 10px 14px rgba(0,0,0,.3)); }

/* Yüz, keçinin kafa dairesine oturur */
.goat-face {
  position: absolute;
  left: 24%; top: 13%;
  width: 52%; height: 52%;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #cfc7ba;
  box-shadow: inset 0 0 0 2px #fff;
}

/* ===== Oyun ekranı HUD ===== */
.hud {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px;
  font-size: clamp(.9rem, 3.5vw, 1.2rem);
  background: linear-gradient(180deg, rgba(0,0,0,.3), transparent);
}
.hud b { color: var(--gold); }
.hud-title { font-weight: bold; }

/* Oyun keçisi serbest konumlanır (JS translate eder) */
.game-goat {
  position: fixed;
  left: 50%; top: 45%;
  margin-left: calc(clamp(180px, 55vw, 300px) / -2);
  margin-top:  calc(clamp(180px, 55vw, 300px) / -2);
  transition: transform .28s cubic-bezier(.34,1.56,.64,1);
  will-change: transform;
}
.game-goat.panic .goat { animation: shake .25s linear infinite; }
@keyframes shake { 0%,100%{transform:translateX(-3px) rotate(-3deg);} 50%{transform:translateX(3px) rotate(3deg);} }

/* ===== Konuşma balonu ===== */
.speech {
  position: fixed;
  z-index: 30;
  background: #fff; color: #222;
  padding: 8px 14px; border-radius: 14px;
  font-weight: bold; font-size: clamp(.85rem, 3.2vw, 1.1rem);
  box-shadow: 0 6px 16px rgba(0,0,0,.3);
  opacity: 0; transform: scale(.6);
  transition: opacity .15s, transform .15s, left .28s, top .28s;
  pointer-events: none; white-space: nowrap;
}
.speech::after {
  content: ""; position: absolute; bottom: -8px; left: 24px;
  border: 8px solid transparent; border-top-color: #fff; border-bottom: 0;
}
/* keçinin altındayken kuyruk yukarı baksın */
.speech.below::after {
  bottom: auto; top: -8px;
  border-top-color: transparent; border-bottom: 8px solid #fff; border-top: 0;
}
.speech.show { opacity: 1; transform: scale(1); }

/* ===== Bıçak (sürüklenebilir) ===== */
.knife {
  position: fixed; left: 75%; top: 70%;
  z-index: 40;
  transform: translate(-50%, -10%) rotate(20deg);
  cursor: grab; filter: drop-shadow(0 6px 8px rgba(0,0,0,.4));
  transition: filter .1s;
}
.knife.grab { cursor: grabbing; }
.knife svg { display: block; }
.game.active { cursor: default; }

.mobile-hint { position: fixed; bottom: 18px; left: 0; right: 0; }

/* ===== Final ekranı ===== */
.final-title {
  font-size: clamp(1.5rem, 6vw, 2.8rem);
  line-height: 1.3; text-shadow: 0 3px 0 rgba(0,0,0,.25);
  animation: pop .6s ease;
}
@keyframes pop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.final-sub { font-size: clamp(1rem, 3.6vw, 1.4rem); max-width: 560px; opacity: .95; }

.final-goat.angel { animation: float 3s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-22px);} }
.wing { position: absolute; top: 22%; font-size: clamp(2.6rem, 12vw, 4.6rem); z-index: 2; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.wing.left  { left: -34%; transform: scaleX(-1); animation: flap 1.2s ease-in-out infinite; }
.wing.right { right: -34%; animation: flap 1.2s ease-in-out infinite; }
@keyframes flap { 0%,100%{transform:rotate(0) scaleX(1);} 50%{transform:rotate(-18deg) scaleX(1);} }
.wing.left { animation-name: flapL; }
.halo {
  position: absolute; top: -14%; left: 50%; transform: translateX(-50%);
  font-size: clamp(1.6rem, 7vw, 2.6rem); z-index: 3;
  animation: haloBob 3s ease-in-out infinite;
}
@keyframes haloBob { 0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(-6px);} }
@keyframes flapL { 0%,100%{transform:rotate(0) scaleX(-1);} 50%{transform:rotate(18deg) scaleX(-1);} }

/* ===== Flash & konfeti ===== */
#flash {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: #fff; opacity: 0;
}
#flash.go { animation: flash .45s ease; }
@keyframes flash { 0%{opacity:0;} 25%{opacity:.95;} 100%{opacity:0;} }

#confetti {
  position: fixed; inset: 0; z-index: 80; pointer-events: none;
}