/* =========================================================
   Played For Both — style.css
   Palet: Saha Yesili + Elektrik Mavisi  (#00e5ff / #2bff88)
   ========================================================= */
:root {
  --bg-0:    #05120c;
  --bg-1:    #07180f;
  --bg-2:    #0b2418;
  --accent:  #00e5ff;   /* elektrik mavisi */
  --accent-2:#2bff88;   /* saha yesili */
  --ok:      #2bff88;
  --bad:     #ff4d5e;
  --text:    #eafff5;
  --muted:   #8fb3a6;
  --glass:   rgba(255,255,255,0.06);
  --glass-br:rgba(0,229,255,0.18);
  --ring-track: rgba(255,255,255,0.10);
  /* dinamik kulup renkleri (her soruda uiController gunceller) */
  --club-a:  #00e5ff;  --club-a2: #03243a;
  --club-b:  #2bff88;  --club-b2: #063d24;
  --spark-color: #2bff88;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Poppins', system-ui, sans-serif;
  background: radial-gradient(120% 120% at 50% 0%, var(--bg-2) 0%, var(--bg-1) 45%, var(--bg-0) 100%);
  color: var(--text);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

/* ---- arka plan lekeleri ---- */
.bg-blobs { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.35; }
.blob { transition: background 0.6s ease; }
.blob-1 { width: 320px; height: 320px; background: var(--club-a);  top: -80px; left: -60px; }
.blob-2 { width: 280px; height: 280px; background: var(--club-b); bottom: -90px; right: -50px; }
.blob-3 { width: 220px; height: 220px; background: #0a6cff; top: 40%; right: -80px; opacity: 0.22; }

/* ---- uygulama cercevesi ---- */
.app {
  position: relative; z-index: 1;
  max-width: 480px; margin: 0 auto;
  min-height: 100vh; min-height: 100dvh;
  padding: max(20px, env(safe-area-inset-top)) 18px max(20px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; justify-content: center;
}
.screen { width: 100%; }
.hidden { display: none !important; }

/* ---- cam efekti ---- */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-br);
  border-radius: 18px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ---- yukleniyor ---- */
.loading-screen { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.spinner {
  width: 54px; height: 54px; border-radius: 50%;
  border: 4px solid rgba(0,229,255,0.18);
  border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}
.loading-text { color: var(--muted); letter-spacing: 0.04em; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- hata ---- */
.error-screen { text-align: center; padding: 28px 18px; }
.err-title { font-size: 18px; color: var(--bad); margin-bottom: 12px; }
.err-body { color: var(--muted); font-size: 14px; line-height: 1.6; }
.err-body code, .hint code { background: rgba(0,229,255,0.10); color: var(--accent); padding: 1px 6px; border-radius: 6px; font-size: 12px; }
.err-cmd { display: inline-block; margin-top: 10px; background: rgba(0,0,0,0.35); border: 1px solid var(--glass-br); padding: 8px 12px; border-radius: 10px; color: var(--accent-2); }

/* ---- baslangic ---- */
.start-screen { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.brand { line-height: 0.92; margin-top: 6px; }
.brand-line { display: block; font-family: 'Playfair Display', serif; font-weight: 700; font-size: clamp(34px, 11vw, 56px); letter-spacing: 0.06em; color: var(--text); }
.brand-line.accent { color: var(--accent); text-shadow: 0 0 24px rgba(0,229,255,0.45); }
.tagline { color: var(--muted); font-size: 15px; margin-bottom: 4px; }

.mute-btn {
  position: absolute; top: 14px; right: 14px;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--glass); border: 1px solid var(--glass-br);
  color: var(--text); font-size: 18px; cursor: pointer;
  backdrop-filter: blur(10px);
}

.start-stats { display: flex; width: 100%; justify-content: space-between; padding: 14px 6px; gap: 4px; }
.start-stats .stat { flex: 1; display: flex; flex-direction: column; align-items: center; }
.start-stats .stat-v { font-size: 22px; font-weight: 800; color: var(--accent-2); }
.start-stats .stat-l { font-size: 10px; color: var(--muted); margin-top: 2px; letter-spacing: 0.02em; }

.rule-card { padding: 16px 18px; text-align: left; }
.rule-card h3 { font-size: 15px; color: var(--accent); margin-bottom: 10px; }
.rule-card ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.rule-card li { font-size: 13.5px; color: var(--text); line-height: 1.45; padding-left: 18px; position: relative; }
.rule-card li::before { content: "▸"; position: absolute; left: 0; color: var(--accent-2); }
.rule-card b { color: var(--accent-2); }

/* ---- butonlar ---- */
.btn-primary {
  margin-top: 4px; width: 100%; padding: 16px;
  font-family: 'Poppins', sans-serif; font-size: 17px; font-weight: 700;
  color: #03130c; cursor: pointer; border: none; border-radius: 16px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  box-shadow: 0 10px 30px rgba(0,229,255,0.35);
  transition: transform 0.12s ease, box-shadow 0.2s ease;
}
.btn-primary:active { transform: scale(0.97); }
.hint { color: var(--muted); font-size: 12px; margin-top: 2px; }

/* ---- oyun HUD ---- */
.game-screen { display: flex; flex-direction: column; gap: 14px; }
.hud { display: flex; justify-content: space-between; padding: 10px 6px; }
.hud-item { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; }
.hud-label { font-size: 10px; color: var(--muted); letter-spacing: 0.04em; }
.hud-value { font-size: 22px; font-weight: 800; color: var(--text); transition: transform 0.15s ease; }
.hud-item.hot .hud-value { color: var(--accent-2); text-shadow: 0 0 16px rgba(43,255,136,0.6); }
.hud-item.hot { animation: hotGlow 1.2s ease-in-out infinite; }
@keyframes hotGlow { 0%,100% { filter: none; } 50% { filter: drop-shadow(0 0 6px rgba(43,255,136,0.5)); } }

/* skor ucus efekti */
.score-fly {
  position: absolute; top: 50%; left: 50%;
  font-size: 18px; font-weight: 800; pointer-events: none;
  transform: translate(-50%,-50%); opacity: 0;
}
.score-fly.up   { color: var(--ok); animation: flyUp 0.9s ease-out forwards; }
.score-fly.down { color: var(--bad); animation: flyDown 0.9s ease-out forwards; }
@keyframes flyUp   { 0% { opacity: 0; transform: translate(-50%,0) scale(0.8);} 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-46px) scale(1.1);} }
@keyframes flyDown { 0% { opacity: 0; transform: translate(-50%,0) scale(0.8);} 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,18px) scale(1);} }

/* ---- dairesel timer ---- */
.timer-ring { position: relative; width: 108px; height: 108px; margin: 2px auto 0; }
.timer-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--ring-track); stroke-width: 9; }
.ring-fg {
  fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round;
  transition: stroke-dashoffset 0.1s linear, stroke 0.3s ease;
  filter: drop-shadow(0 0 6px rgba(0,229,255,0.55));
}
.ring-fg.danger { stroke: var(--bad); filter: drop-shadow(0 0 8px rgba(255,77,94,0.8)); animation: ringPulse 0.6s ease-in-out infinite; }
@keyframes ringPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
.timer-num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 800; color: var(--text);
}

/* ---- amblemler ---- */
.crest-row {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin: 4px 0;
  padding: 10px 6px; border-radius: 20px; position: relative;
  background:
    radial-gradient(60% 120% at 18% 50%, color-mix(in srgb, var(--club-a) 22%, transparent), transparent 70%),
    radial-gradient(60% 120% at 82% 50%, color-mix(in srgb, var(--club-b) 22%, transparent), transparent 70%);
  border: 1px solid color-mix(in srgb, var(--club-a) 28%, transparent);
  box-shadow: 0 8px 30px color-mix(in srgb, var(--club-a) 14%, transparent),
              inset 0 0 24px color-mix(in srgb, var(--club-b) 10%, transparent);
  transition: background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}
.crest-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.crest-wrap:nth-child(1) .crest { filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--club-a) 45%, transparent)); }
.crest-wrap:nth-child(3) .crest { filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--club-b) 45%, transparent)); }
.crest { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4)); }
.crest-fallback {
  width: 64px; height: 64px; border-radius: 14px;
  background: linear-gradient(135deg, var(--club-a), var(--club-b));
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #03130c; font-size: 18px;
}
.crest-name { font-size: 11px; color: var(--muted); text-align: center; min-height: 14px; }
.vs {
  font-weight: 800; font-size: 16px;
  background: linear-gradient(135deg, var(--club-a), var(--club-b));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--club-a) 30%, transparent));
}

/* ---- secenekler ---- */
.options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.option {
  padding: 18px 10px; border-radius: 16px; cursor: pointer;
  font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 600;
  color: var(--text); background: var(--glass); border: 1px solid var(--glass-br);
  backdrop-filter: blur(8px); transition: transform 0.12s ease, background 0.2s ease, border-color 0.2s ease;
}
.option:active { transform: scale(0.96); }
.option.locked { cursor: default; opacity: 0.65; }
.option.correct, .option.reveal-correct {
  background: rgba(43,255,136,0.18); border-color: var(--ok); color: var(--ok); opacity: 1;
}
.option.wrong { background: rgba(255,77,94,0.18); border-color: var(--bad); color: var(--bad); opacity: 1; }
.option.pop { animation: pop 0.45s ease; }
@keyframes pop { 0% { transform: scale(1);} 35% { transform: scale(1.07);} 100% { transform: scale(1);} }

/* ---- geri bildirim ---- */
.feedback { text-align: center; min-height: 22px; font-weight: 700; font-size: 15px; transition: opacity 0.2s ease; }
.feedback.ok  { color: var(--ok); }
.feedback.bad { color: var(--bad); }

/* ---- bitir ---- */
.btn-quit {
  margin: 2px auto 0; padding: 9px 22px; font-size: 13px; font-weight: 600;
  color: var(--muted); background: transparent; border: 1px solid var(--glass-br);
  border-radius: 12px; cursor: pointer;
}

/* ---- seri kutlamasi ---- */
.streak-toast {
  position: fixed; left: 50%; top: 16%; transform: translate(-50%, -12px) scale(0.8);
  padding: 12px 24px; border-radius: 999px; font-size: 18px; font-weight: 800;
  color: #03130c; background: linear-gradient(135deg, var(--accent-2), var(--accent));
  box-shadow: 0 12px 40px rgba(0,229,255,0.45); opacity: 0; pointer-events: none; z-index: 5;
  white-space: nowrap;
}
.streak-toast.show { animation: toastIn 1.4s ease forwards; }
@keyframes toastIn {
  0% { opacity: 0; transform: translate(-50%, -12px) scale(0.8); }
  15% { opacity: 1; transform: translate(-50%, 0) scale(1.05); }
  80% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -8px) scale(0.95); }
}

/* ---- kivilcim (sparkle) ---- */
.spark {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: var(--spark-color); pointer-events: none;
  box-shadow: 0 0 8px var(--spark-color);
  animation: spark 0.7s ease-out forwards;
}
@keyframes spark {
  0% { opacity: 1; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0.3); }
}

/* ---- ekran titremesi (yanlis / danger) ---- */
.shake-screen { animation: shake 0.42s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake {
  10%,90% { transform: translateX(-2px); }
  20%,80% { transform: translateX(4px); }
  30%,50%,70% { transform: translateX(-7px); }
  40%,60% { transform: translateX(7px); }
}
/* son 3 sn: uygulama hafif titrer */
.app.danger-active { animation: dangerShake 0.5s ease-in-out infinite; }
@keyframes dangerShake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

@media (max-height: 680px) {
  .crest { width: 52px; height: 52px; }
  .crest-fallback { width: 52px; height: 52px; }
  .option { padding: 14px 8px; }
  .rule-card { display: none; }
}