/* ============================================================
   GLOBAL RESET
============================================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

body {
  background: #050505;
  font-family: "Orbitron", sans-serif;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
  color: white;
}

/* ============================================================
   BACKGROUND FX
============================================================ */
.bg-nebula {
  position: fixed;
  inset: 0;
  z-index: -3;
  background: radial-gradient(circle at 50% 120%, #1a0b2e 0%, #000 70%);
  animation: nebulaPulse 8s ease-in-out infinite;
}
@keyframes nebulaPulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

.stars {
  position: fixed;
  inset: 0;
  z-index: -2;
  opacity: 0.6;
  background-image:
    radial-gradient(1px 1px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 70px 120px, #fff, transparent),
    radial-gradient(1px 1px at 150px 180px, #fff, transparent);
  background-size: 200px 200px;
  animation: starsDrift 120s linear infinite;
}
@keyframes starsDrift {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-1400px); }
}

.cyber-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.25;
  background:
    linear-gradient(transparent 0%, rgba(188, 19, 254, 0.3) 2%, transparent 3%),
    linear-gradient(90deg, transparent 0%, rgba(0, 243, 255, 0.2) 2%, transparent 3%);
  background-size: 80px 80px;
  transform: perspective(400px) rotateX(60deg) translateY(-200px);
  animation: gridMove 22s linear infinite;
}
@keyframes gridMove {
  0%   { background-position: 0 0; }
  100% { background-position: 0 80px; }
}

.scanlines {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  background: linear-gradient(
    rgba(255, 255, 255, 0) 0%,
    rgba(0, 0, 0, 0.12) 50%,
    rgba(255, 255, 255, 0) 50%
  );
  background-size: 100% 4px;
}

/* ============================================================
   START SCREEN — STATIC LOGO
============================================================ */
#startScreen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  text-align: center;
  z-index: 10;
}

.logo-container {
  position: relative;
  width: min(60vw, 260px);
  height: min(60vw, 260px);
  background-image: url("logo.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 0 18px #00f3ff);
  margin-bottom: 10px;
}

.intro-glow {
  display: none;
}

.load-line {
  width: 200px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #00eaff, transparent);
  animation: loadSlide 2s infinite linear;
  opacity: 0.75;
}
@keyframes loadSlide {
  0%   { transform: translateX(-60px); }
  100% { transform: translateX(60px); }
}

#startButton {
  padding: 16px 50px;
  font-size: 22px;
  background: rgba(0, 40, 60, 0.45);
  border: 2px solid #00eaff;
  border-radius: 6px;
  letter-spacing: 2px;
  color: #dff;
  cursor: pointer;
  text-shadow: 0 0 12px #00eaff;
  box-shadow: 0 0 22px rgba(0, 255, 255, 0.25);
  transition: 0.25s ease;
}
#startButton:hover {
  transform: scale(1.05);
  box-shadow: 0 0 40px rgba(0, 255, 255, 0.35);
  background: rgba(0, 80, 120, 0.45);
}

.start-hint {
  font-size: 14px;
  opacity: 0.65;
  color: #b8eafd;
}

/* ============================================================
   GAME SCREEN
============================================================ */
#gameScreen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  gap: 26px;
  align-items: center;
  justify-content: center;
}
#gameScreen.visible {
  display: flex;
  animation: fadeIn 0.5s ease forwards;
}
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

#status {
  font-family: "Rajdhani", sans-serif;
  font-size: 26px;
  letter-spacing: 2px;
  font-weight: 700;
  color: #8ad7ff;
  text-shadow: 0 0 8px #00eaff;
  min-height: 32px;
}

.best-score-box {
  font-size: 14px;
  letter-spacing: 2px;
  color: #aaa;
}

/* ============================================================
   TAP BUTTON (REACTOR CORE) – ADVANCED
============================================================ */
.reactor-core {
  width: 260px;
  height: 260px;
  position: relative;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  /* Ana neon halka */
  border: 6px solid rgba(0, 255, 255, 0.55);
  background: radial-gradient(circle at 50% 35%,
      rgba(0, 60, 90, 0.25),
      rgba(0, 20, 40, 0.78),
      rgba(0, 0, 0, 0.96)
  );

  /* Dış neon aura */
  box-shadow:
    0 0 20px rgba(0, 255, 255, 0.7),
    0 0 45px rgba(0, 255, 255, 0.35),
    inset 0 0 20px rgba(0, 255, 255, 0.3);

  transition: 0.25s ease;
}

/* Dıştaki dönen kesik halka */
.reactor-core::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px dashed rgba(0, 255, 255, 0.45);
  box-shadow:
    0 0 18px rgba(0, 255, 255, 0.5),
    0 0 36px rgba(0, 255, 255, 0.3);
  animation: orbitSpin 10s linear infinite;
  opacity: 0.85;
}

/* İçteki ince enerji halkası */
.reactor-core::after {
  content: "";
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 0 18px rgba(0, 255, 255, 0.4),
    0 0 10px rgba(0, 255, 255, 0.2);
  opacity: 0.9;
}

/* Buton içindeki görsel */
.tap-img {
  width: 78%;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 0 14px rgba(0, 255, 255, 0.6));
}

/* WAIT = turuncu uyarı */
.mode-wait {
  border-color: #ffae00 !important;
  box-shadow:
    0 0 22px rgba(255, 174, 0, 0.7),
    0 0 48px rgba(255, 174, 0, 0.4),
    inset 0 0 18px rgba(255, 174, 0, 0.4) !important;
}

/* GO = parlak neon yeşil */
.mode-go {
  border-color: #00ff66 !important;
  box-shadow:
    0 0 28px rgba(0, 255, 102, 0.8),
    0 0 60px rgba(0, 255, 102, 0.45),
    inset 0 0 30px rgba(0, 255, 102, 0.5) !important;
  transform: scale(1.06);
}

/* FAIL = mor neon */
.mode-fail {
  border-color: #bc13fe !important;
  box-shadow:
    0 0 28px rgba(188, 19, 254, 0.8),
    0 0 56px rgba(188, 19, 254, 0.45),
    inset 0 0 20px rgba(188, 19, 254, 0.45) !important;
  animation: failShake 0.25s;
}

/* Shake animasyonu (fail) */
@keyframes failShake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-8px); }
  75%      { transform: translateX(8px); }
}

/* Dış kesik halkanın dönüşü */
@keyframes orbitSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}


/* ============================================================
   SCORE SCREEN
============================================================ */
#scoreScreen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.82);
}
#scoreScreen.visible {
  display: flex;
  animation: fadeIn 0.5s ease forwards;
}

/* SCORE PANEL ANA STİL */
.score-panel {
  background: #05070f;
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-radius: 24px;

  padding: 42px 36px;
  max-width: 440px;
  width: min(90%, 440px);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;

  opacity: 0;
  transform: translateY(18px) scale(0.96);
  pointer-events: none;
  transition: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.score-panel.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.paid-run-badge {
  display: none;
  margin-top: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffcfff;
  border: 1px solid rgba(255, 100, 255, 0.7);
  box-shadow:
    0 0 8px rgba(255, 0, 180, 0.7),
    0 0 16px rgba(255, 0, 200, 0.45);
  background: radial-gradient(circle at 50% 0%, #3b003b, rgba(0, 0, 0, 0.9));
}


/* Rank başlığı ve rozet */
#rankTitle {
  font-family: "Rajdhani", sans-serif;
  font-size: 26px;
  font-weight: 900;
  text-align: center;
  letter-spacing: 2px;
}

.new-record-badge {
  background: #fff;
  color: #000;
  padding: 4px 12px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 900;
  display: none;
}

/* TIER RENKLERİ */
.score-panel.rank-diamond {
  border-color: #3cf4ff;
  box-shadow: 0 0 45px rgba(60, 244, 255, 0.5);
}
.score-panel.rank-diamond #rankTitle {
  color: #3cf4ff;
  text-shadow: 0 0 16px #3cf4ff;
}

.score-panel.rank-platinum {
  border-color: #E5E4E2;
  box-shadow: 0 0 40px rgba(229,228,226,0.5);
}
.score-panel.rank-platinum #rankTitle {
  color: #E5E4E2;
  text-shadow: 0 0 14px #E5E4E2;
}

.score-panel.rank-gold {
  border-color: #FFD700;
  box-shadow: 0 0 40px rgba(255,215,0,0.5);
}
.score-panel.rank-gold #rankTitle {
  color: #FFD700;
  text-shadow: 0 0 14px #FFD700;
}

.score-panel.rank-silver {
  border-color: #C0C0C0;
  box-shadow: 0 0 40px rgba(192,192,192,0.5);
}
.score-panel.rank-silver #rankTitle {
  color: #C0C0C0;
  text-shadow: 0 0 14px #C0C0C0;
}

.score-panel.rank-bronze {
  border-color: #CD7F32;
  box-shadow: 0 0 40px rgba(205,127,50,0.5);
}
.score-panel.rank-bronze #rankTitle {
  color: #CD7F32;
  text-shadow: 0 0 14px #CD7F32;
}

/* SCORE SAYISI */
#score {
  font-size: 84px;
  font-weight: 900;
  background: linear-gradient(to bottom, #fff, #ccc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.32));
}

/* BUTONLAR */
.btn-group {
  display: flex;
  width: 100%;
  gap: 14px;
  margin-top: 14px;
}

.cyber-btn {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 14px;
  border-radius: 10px;
  font-family: "Orbitron", sans-serif;
  font-weight: 700;
  color: white;
  cursor: pointer;
  transition: 0.25s;
  text-transform: uppercase;
}
.cyber-btn:hover {
  background: white;
  color: black;
  box-shadow: 0 0 25px white;
}

/* ============================================================
   GO ANIMASYONLARI
============================================================ */

/* Ekran flaşı */
.go-flash {
  position: fixed;
  inset: 0;
  background: white;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  animation: flash 0.12s ease-out;
}

@keyframes flash {
  0%   { opacity: 0.8; }
  100% { opacity: 0; }
}

/* Tap butonunun yay gibi büyüyüp küçülmesi */
.reactor-go-pulse {
  animation: goPulse 0.35s ease-out;
}

@keyframes goPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* GO anında status yazısının hafif titremesi */
.status-shake {
  animation: statusShake 0.25s ease-out;
}

@keyframes statusShake {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-3px); }
  50%  { transform: translateX(3px); }
  75%  { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}