/* =========================================================
   TOKAT USTASI — style.css
   Eski Flash oyunu hissi, modern tarayıcı davranışı.
   ========================================================= */

:root {
  --bg-1: #2b4f8e;
  --bg-2: #16264a;
  --ink: #0f1220;
  --accent: #ffd23f;
  --accent-dark: #e0930c;
  --hud-text: #fff8e1;
  --shadow: rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg-2);
  font-family: "Trebuchet MS", "Segoe UI", Verdana, system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

body {
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;   /* çift dokunuş zoom'unu engeller */
  overscroll-behavior: none;
}

/* ---------- SAHNE ---------- */
.stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% 38%, #4a76c4 0%, var(--bg-1) 45%, var(--bg-2) 100%);
}

/* çizgi roman ışın dokusu */
.stage::before {
  content: "";
  position: absolute;
  inset: -25%;
  background: repeating-conic-gradient(
    from 0deg at 50% 45%,
    rgba(255,255,255,.055) 0deg 7deg,
    rgba(255,255,255,0) 7deg 14deg
  );
  pointer-events: none;
  animation: rays 60s linear infinite;
}
/* zemin */
.stage::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 26%;
  background: linear-gradient(to bottom, rgba(9,16,32,0) 0%, rgba(9,16,32,.55) 100%);
  pointer-events: none;
}
@keyframes rays { to { transform: rotate(360deg); } }

/* ---------- HUD / SAYAÇ ---------- */
.hud {
  position: relative;
  z-index: 5;
  margin-top: clamp(10px, 2.4vh, 28px);
  text-align: center;
  pointer-events: none;
}
.hud-label {
  font-size: clamp(12px, 1.6vw, 18px);
  letter-spacing: .22em;
  font-weight: 700;
  color: var(--hud-text);
  opacity: .85;
  text-shadow: 0 2px 0 rgba(0,0,0,.5);
}
.hud-count {
  font-size: clamp(44px, 7vw, 84px);
  line-height: 1;
  font-weight: 900;
  color: var(--accent);
  letter-spacing: .02em;
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 6px 0 rgba(0,0,0,.35);
  transition: transform 90ms ease-out;
}
.hud-count.pop { transform: scale(1.14); }

/* ---------- OYUN ALANI ---------- */
.arena {
  position: relative;
  z-index: 4;
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.character-wrap {
  position: relative;
  height: min(70vh, 560px);
  aspect-ratio: 400 / 580;
  max-width: 92vw;
  --wrap-y: clamp(10px, 4vh, 50px);
  transform: translateY(var(--wrap-y));
  filter: drop-shadow(0 24px 26px var(--shadow));
}

.character {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* ---------- GÖRSEL (PNG) ASSET MODU ---------- */
.art { position: absolute; inset: 0; }
.art-layer { position: absolute; display: block; pointer-events: none; }
.art-body   { left: 0; bottom: 0; width: 100%; height: auto; }
.art-head   { height: auto; transform-origin: 50% 96%; }
.art-single { left: 0; top: 0; width: 100%; height: auto; transform-origin: 50% 92%; }
.art-hitbox { position: absolute; cursor: pointer; }

.stage[data-mood="dizzy"] #art-head,
.stage[data-mood="wrecked"] #art-head { animation: wobble 2.4s ease-in-out infinite; }

/* ---------- HITBOX ---------- */
#head-hitbox {
  cursor: pointer;
  pointer-events: auto;
}
#character-svg { pointer-events: none; }  /* sadece hitbox tıklanabilir */

/* ---------- İFADE VARYANTLARI ---------- */
.variant { display: none; }
.stage[data-mood="calm"]    .v-calm,
.stage[data-mood="annoyed"] .v-annoyed,
.stage[data-mood="dizzy"]   .v-dizzy,
.stage[data-mood="shocked"] .v-shocked,
.stage[data-mood="wrecked"] .v-wrecked { display: inline; }

.stage[data-mood="dizzy"] .swirl,
.stage[data-mood="wrecked"] .swirl {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: swirlSpin 1.4s linear infinite;
}
@keyframes swirlSpin { to { transform: rotate(360deg); } }

/* sersem modlarda hafif sallanma */
.stage[data-mood="wrecked"] #char-head,
.stage[data-mood="dizzy"] #char-head {
  animation: wobble 2.4s ease-in-out infinite;
}
@keyframes wobble {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg); }
}

/* ---------- KAFA TOKAT ANİMASYONU ---------- */
#char-head {
  transform-box: fill-box;
  transform-origin: 50% 96%;
}
/* Tokat animasyonu her ruh halini ezmeli.
   [data-mood] seçicisi, sersem modlarındaki idle wobble kuralıyla aynı
   özgüllüğe çıkıp sonra geldiği için kazanır. SVG ve PNG karakterin ikisi de
   aynı kurala bağlı. */
.stage[data-mood] #char-head.hit-right,
.stage[data-mood] #art-head.hit-right { animation: headHitRight 340ms cubic-bezier(.2,.9,.25,1) 1 both; }
.stage[data-mood] #char-head.hit-left,
.stage[data-mood] #art-head.hit-left  { animation: headHitLeft  340ms cubic-bezier(.2,.9,.25,1) 1 both; }

/* soldan gelen tokat -> kafa SAĞA savrulur */
@keyframes headHitRight {
  0%   { transform: rotate(0deg) translateX(0) scale(1, 1); }
  12%  { transform: rotate(18deg) translateX(26px) scale(1.12, .88); }
  30%  { transform: rotate(15deg) translateX(20px) scale(.95, 1.05); }
  58%  { transform: rotate(-7deg) translateX(-8px) scale(1.03, .97); }
  80%  { transform: rotate(3deg) translateX(3px) scale(1, 1); }
  100% { transform: rotate(0deg) translateX(0) scale(1, 1); }
}
/* sağdan gelen tokat -> kafa SOLA savrulur */
@keyframes headHitLeft {
  0%   { transform: rotate(0deg) translateX(0) scale(1, 1); }
  12%  { transform: rotate(-18deg) translateX(-26px) scale(1.12, .88); }
  30%  { transform: rotate(-15deg) translateX(-20px) scale(.95, 1.05); }
  58%  { transform: rotate(7deg) translateX(8px) scale(1.03, .97); }
  80%  { transform: rotate(-3deg) translateX(-3px) scale(1, 1); }
  100% { transform: rotate(0deg) translateX(0) scale(1, 1); }
}

/* yanak kızarması */
.cheek { transition: opacity 240ms ease-out; }
.cheek.flash { opacity: .55; transition: opacity 40ms; }

/* ---------- IMPACT EFEKTLERİ ---------- */
.fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 6;
}
.impact {
  position: absolute;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}
.impact-word {
  font-family: "Impact", "Haettenschweiler", "Arial Black", sans-serif;
  font-size: clamp(30px, 5.5vw, 62px);
  font-weight: 900;
  letter-spacing: .02em;
  color: var(--accent);
  -webkit-text-stroke: 4px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 5px 0 rgba(0,0,0,.4);
  white-space: nowrap;
  animation: wordPop 460ms cubic-bezier(.2,1.2,.4,1) 1 both;
}
@keyframes wordPop {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.3) rotate(var(--rot, -8deg)); }
  22%  { opacity: 1; transform: translate(-50%,-50%) scale(1.25) rotate(var(--rot, -8deg)); }
  45%  { opacity: 1; transform: translate(-50%,-60%) scale(1) rotate(var(--rot, -8deg)); }
  100% { opacity: 0; transform: translate(-50%,-105%) scale(1.05) rotate(var(--rot, -8deg)); }
}

.impact-star {
  width: clamp(90px, 16vw, 190px);
  height: clamp(90px, 16vw, 190px);
  animation: starPop 320ms ease-out 1 both;
}
@keyframes starPop {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.2) rotate(-25deg); }
  30%  { opacity: 1; transform: translate(-50%,-50%) scale(1.1) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.5) rotate(18deg); }
}

/* uçuşan yıldızlar */
.spark {
  position: absolute;
  font-size: clamp(14px, 2.4vw, 26px);
  transform: translate(-50%, -50%);
  animation: sparkFly 480ms ease-out 1 both;
}
@keyframes sparkFly {
  0%   { opacity: 1; transform: translate(-50%,-50%) translate(0,0) scale(.5) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%,-50%) translate(var(--dx), var(--dy)) scale(1.15) rotate(160deg); }
}

/* ---------- COMBO ---------- */
.combo {
  position: absolute;
  top: 8%;
  right: -6%;
  z-index: 7;
  font-family: "Impact", "Arial Black", sans-serif;
  font-size: clamp(24px, 4vw, 46px);
  color: #fff;
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 4px 0 rgba(0,0,0,.35);
  opacity: 0;
  transform: rotate(9deg) scale(.6);
  transition: opacity 120ms, transform 120ms;
  pointer-events: none;
  white-space: nowrap;
}
.combo.show {
  opacity: 1;
  transform: rotate(9deg) scale(1);
  color: var(--accent);
}
.combo.bump { animation: comboBump 180ms ease-out 1; }
@keyframes comboBump {
  0% { transform: rotate(9deg) scale(1.35); }
  100% { transform: rotate(9deg) scale(1); }
}

/* ---------- EKRAN SARSINTISI ---------- */
.stage.shake { animation: screenShake 150ms cubic-bezier(.36,.07,.19,.97) 1; }
@keyframes screenShake {
  0%   { transform: translate(0, 0) scale(1); }
  12%  { transform: translate(-9px, 5px) scale(1.012); }
  28%  { transform: translate(8px, -6px) scale(1.008); }
  44%  { transform: translate(-6px, -3px) scale(1.006); }
  60%  { transform: translate(5px, 4px) scale(1.003); }
  76%  { transform: translate(-3px, -2px) scale(1.001); }
  100% { transform: translate(0, 0) scale(1); }
}

/* karaktere ayrıca kısa bir "punch" ver — darbe daha çok hissedilsin */
.character-wrap.punch { animation: charPunch 160ms ease-out 1; }
@keyframes charPunch {
  0%   { transform: translateY(var(--wrap-y)) scale(1); }
  25%  { transform: translateY(calc(var(--wrap-y) + 6px)) scale(1.035); }
  100% { transform: translateY(var(--wrap-y)) scale(1); }
}

/* ---------- FOOTER ---------- */
.footer {
  position: relative;
  z-index: 5;
  width: 100%;
  padding: 0 14px calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.reset-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: rgba(255,255,255,.75);
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  opacity: .65;
  transition: opacity 140ms, background 140ms;
}
.reset-btn:hover, .reset-btn:focus-visible { opacity: 1; background: rgba(0,0,0,.45); }
.hint {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  color: rgba(255,255,255,.5);
  transition: opacity 400ms;
}
.hint.hidden { opacity: 0; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 820px), (orientation: portrait) and (max-width: 900px) {
  .character-wrap {
    height: auto;
    width: 82vw;
    max-width: 82vw;
    max-height: 64vh;
    --wrap-y: clamp(4px, 2vh, 24px);
    transform: translateY(var(--wrap-y));
  }
  .combo { right: -2%; top: 4%; }
}

/* alçak ve geniş ekranlar (ör. 1366x768) */
@media (max-height: 800px) and (min-width: 821px) {
  .character-wrap { height: min(66vh, 470px); --wrap-y: 14px; transform: translateY(var(--wrap-y)); }
  .hud { margin-top: 8px; }
}

/* çok küçük telefonlar */
@media (max-width: 380px) {
  .character-wrap { width: 86vw; max-width: 86vw; }
}

@media (prefers-reduced-motion: reduce) {
  .stage::before { animation: none; }
  .stage.shake { animation: none; }
}