:root {
  --brand: #009040;
  --brand-dark: #007a36;
  --ink: #15201a;
  --font-display: "Syne", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #dcebe0;
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

button { font: inherit; cursor: pointer; }

.oyun {
  position: fixed;
  inset: 0;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

.oyun-sahne {
  position: absolute;
  inset: 0;
  touch-action: none;
}

.oyun-sahne canvas { display: block; width: 100%; height: 100%; }
.oyun.is-fly .oyun-sahne { cursor: crosshair; }

/* Üst bilgi çubuğu */
.oyun-hud {
  position: absolute;
  top: calc(10px + var(--safe-top));
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}

.oyun-hud > * { pointer-events: auto; }

.oyun-marka {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(20, 50, 30, 0.12);
}

.oyun-marka img { height: 28px; width: 73px; display: block; object-fit: cover; object-position: left center; }

.oyun-bilgi {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(20, 50, 30, 0.12);
}

.oyun-bilgi b { font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums; }

.oyun-bolum {
  margin: 0 auto;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.18), 0 6px 18px rgba(0, 60, 25, 0.35);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.oyun-hud-sag { display: flex; align-items: center; gap: 8px; }

.oyun-puan {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 74px;
  padding: 4px 12px;
  background: var(--brand);
  color: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--brand-dark), 0 8px 18px rgba(0, 80, 35, 0.25);
  line-height: 1.1;
}

.oyun-puan span { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.85; }
.oyun-puan b { font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.oyun-puan.is-down { background: #d64545; box-shadow: 0 4px 0 #a73030, 0 8px 18px rgba(120, 20, 20, 0.25); }

.oyun-ikon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: #2f8ef0;
  color: #fff;
  box-shadow: 0 4px 0 #1f6dc0, 0 8px 18px rgba(20, 60, 120, 0.25);
  transition: transform 0.12s;
}

.oyun-ikon:active { transform: translateY(3px); box-shadow: 0 1px 0 #1f6dc0; }
.oyun-ikon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.oyun-ikon svg path:first-child { fill: currentColor; }
.oyun-ikon[data-act="restart"] svg path:first-child { fill: none; }
.oyun-ikon .ses-kapali { display: none; }
.oyun.is-muted .oyun-ikon .ses-kapali { display: block; }
.oyun.is-muted .oyun-ikon .ses-dalga { display: none; }

/* Alt çubuk */
.oyun-alt {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(12px + var(--safe-bottom));
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 12px;
  pointer-events: none;
}

.oyun-alt > * { pointer-events: auto; }

.oyun-ucur {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 92px;
  padding: 10px 14px 8px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(#ffb22e, #f08c00);
  color: #fff;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 0 #c26f00, 0 10px 22px rgba(160, 90, 0, 0.3);
  transition: transform 0.12s, filter 0.2s;
}

.oyun-ucur svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.oyun-ucur span { font-size: 0.95rem; line-height: 1.1; }
.oyun-ucur small { font-size: 0.72rem; opacity: 0.9; }
.oyun-ucur:active { transform: translateY(4px); box-shadow: 0 1px 0 #c26f00; }
.oyun.is-fly .oyun-ucur { background: linear-gradient(#2f8ef0, #1f6dc0); box-shadow: 0 5px 0 #154f8f, 0 0 0 4px rgba(47, 142, 240, 0.35); animation: oyun-nabiz 1s infinite; }

@keyframes oyun-nabiz {
  50% { box-shadow: 0 5px 0 #154f8f, 0 0 0 10px rgba(47, 142, 240, 0); }
}

/* Araç üzeri etiketler */
.oyun-etiketler { position: absolute; inset: 0; pointer-events: none; }

.oyun-etiket {
  position: absolute;
  left: 0;
  top: 0;
  padding: 3px 8px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 0.74rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
  will-change: transform;
}

.oyun-arti {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25), 0 0 12px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
}

.oyun-arti.is-neg { color: #ffdddd; }

/* Bildirim */
.oyun-toast {
  position: absolute;
  left: 50%;
  top: calc(70px + var(--safe-top));
  transform: translate(-50%, -12px);
  max-width: min(92vw, 420px);
  padding: 10px 16px;
  border-radius: 14px;
  background: rgba(21, 32, 26, 0.88);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 700;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}

.oyun-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Modal */
.oyun-modal {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(10, 30, 18, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 5;
}

.oyun-modal[hidden] { display: none; }

.oyun-modal.is-alt {
  align-items: end;
  padding-bottom: calc(24px + var(--safe-bottom));
  background: linear-gradient(transparent 45%, rgba(10, 30, 18, 0.45));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.oyun-modal.is-alt .oyun-kart-logo { display: none; }

.oyun-kart {
  width: min(100%, 400px);
  max-height: calc(100vh - 40px - var(--safe-top) - var(--safe-bottom));
  max-height: calc(100dvh - 40px - var(--safe-top) - var(--safe-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 26px 24px 22px;
  border-radius: 24px;
  background: #fff;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
}

.oyun-kart-logo:empty { display: none; }

.oyun-kart-logo {
  display: grid;
  place-items: center;
  height: 96px;
  margin: 0 auto 14px;
}

.oyun-kart-logo img { max-height: 96px; max-width: 240px; object-fit: contain; }

.oyun-kart-ust {
  margin: 0 0 4px;
  color: var(--brand);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.oyun-kart-baslik {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1.15;
}

.oyun-kart-metin { color: #4a5a50; font-size: 0.92rem; line-height: 1.55; }
.oyun-kart-metin ul { margin: 10px 0 0; padding: 0; list-style: none; text-align: left; }
.oyun-kart-metin li { position: relative; padding: 4px 0 4px 26px; }
.oyun-kart-metin li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--brand);
}

.oyun-kart-metin strong { color: var(--ink); }
.oyun-kart-butonlar { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }

.oyun-btn {
  padding: 14px 18px;
  border: 0;
  border-radius: 16px;
  background: var(--brand);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
  box-shadow: 0 5px 0 var(--brand-dark);
  transition: transform 0.12s;
}

.oyun-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--brand-dark); }
.oyun-btn--ikincil { background: #eef3f0; color: var(--ink); box-shadow: 0 4px 0 #cfd9d3; }
.oyun-btn[hidden] { display: none; }

/* Yükleniyor */
.oyun-yukleniyor {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: #dcebe0;
  color: #2c4a37;
  font-weight: 700;
  z-index: 6;
  transition: opacity 0.4s;
}

.oyun-yukleniyor.is-done { opacity: 0; pointer-events: none; }

.oyun-spinner {
  width: 42px;
  height: 42px;
  border: 4px solid rgba(0, 144, 64, 0.2);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: oyun-don 0.8s linear infinite;
}

@keyframes oyun-don { to { transform: rotate(360deg); } }

@media (max-width: 520px) {
  .oyun-hud { left: 8px; right: 8px; gap: 5px; }
  .oyun-hud-sag { gap: 5px; }
  .oyun-marka { height: 34px; padding: 4px 7px; border-radius: 11px; }
  .oyun-marka img { height: 20px; width: 52px; object-fit: cover; object-position: left center; }
  .oyun-bilgi { min-width: 34px; height: 34px; padding: 0 8px; border-radius: 11px; }
  .oyun-bilgi b { font-size: 0.95rem; }
  .oyun-bolum { min-width: 0; overflow: hidden; font-size: 0.78rem; letter-spacing: 0; }
  .oyun-ikon { width: 34px; height: 34px; border-radius: 11px; box-shadow: 0 3px 0 #1f6dc0, 0 6px 14px rgba(20, 60, 120, 0.25); }
  .oyun-ikon svg { width: 19px; height: 19px; }
  .oyun-puan { min-width: 46px; padding: 2px 7px; border-radius: 11px; box-shadow: 0 3px 0 var(--brand-dark), 0 6px 14px rgba(0, 80, 35, 0.25); }
  .oyun-puan span { font-size: 0.56rem; }
  .oyun-puan b { font-size: 0.92rem; }

  .oyun-modal { padding: 12px; }
  .oyun-kart {
    max-height: calc(100vh - 24px - var(--safe-top) - var(--safe-bottom));
    max-height: calc(100dvh - 24px - var(--safe-top) - var(--safe-bottom));
    padding: 18px 16px 16px;
    border-radius: 20px;
  }
  .oyun-kart-logo { height: 64px; margin-bottom: 8px; }
  .oyun-kart-logo img { max-height: 64px; max-width: 180px; }
  .oyun-kart-ust { font-size: 0.66rem; }
  .oyun-kart-baslik { margin-bottom: 6px; font-size: 1.25rem; }
  .oyun-kart-metin { font-size: 0.8rem; line-height: 1.45; }
  .oyun-kart-metin ul { margin-top: 6px; }
  .oyun-kart-metin li { padding: 3px 0 3px 22px; }
  .oyun-kart-metin li::before { top: 8px; width: 8px; height: 8px; }
  .oyun-kart-butonlar { gap: 8px; margin-top: 14px; }
  .oyun-btn { padding: 11px 16px; font-size: 0.95rem; }
}

@media (max-width: 330px) {
  .oyun-marka { display: none; }
}