/* ==========================================================================
   SoundPad — Styles
   Dark / Premium / Modern / Purple / Minimal / Broadcast theme.
   No scroll, iPad safe-area aware.

   Yerleşim mantığı (iPad Air 5. nesil — 2360x1640px / 1180x820pt landscape
   referans alınarak ayarlandı, ama her ekranda orantılı çalışır):

     #stage       -> tüm ekranı kaplar, arka planı design/background.png
                     dosyasından gelir. BU DOSYAYI DEĞİŞTİRİNCE tasarım
                     değişir; kod tarafında hiçbir şey değiştirmen gerekmez.
     #soundboard  -> #stage'in ortasında, HER ZAMAN KARE kalan bir blok.
                     3x3 grid eşit sütun/satır olduğu için içindeki 9
                     buton da otomatik olarak kare olur.

   Üstte/altta/sağda/solda kalan boşluk, #stage'in arka plan görselinin
   göründüğü "tasarım alanı"dır — sen buraya kendi çalışmanı ekleyeceksin.
   ========================================================================== */

:root {
  --bg: #0d0316;
  --bg-radial-a: #1a0a2e;
  --bg-radial-b: #12051f;

  --tile-1: #17171a;
  --tile-2: #3c3c42;
  --tile-3: #6e6e78;

  --green-1: #16a34a;
  --green-2: #22c55e;
  --green-3: #4ade80;

  --tile-border: rgba(255, 255, 255, 0.14);
  --tile-highlight: rgba(255, 255, 255, 0.16);
  --tile-shadow: rgba(0, 0, 0, 0.55);

  --text-color: rgba(255, 255, 255, 0.92);
  --text-color-dim: rgba(255, 255, 255, 0.55);

  --gap: clamp(8px, 1.4vmin, 14px);
  --radius: clamp(18px, 2.6vmin, 28px);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  color: var(--text-color);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "Segoe UI", Roboto, sans-serif;

  /* Dokunmatik kullanım için: yanlışlık scroll / zoom / seçim engelle */
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

body {
  /* İki tasarım dosyasından biri yüklenemezse veya kenarlarda şeffaflık
     olursa diye altta duran yedek renk — görseldeki en koyu ton ile aynı. */
  background:
    radial-gradient(120% 120% at 50% 0%, var(--bg-radial-a) 0%, var(--bg-radial-b) 55%, var(--bg) 100%);
}

/* ==========================================================================
   Stage — tam ekran tasarım tuvali
   İki tasarım görseli (<img id="bg-landscape">, <img id="bg-portrait">)
   burada "contain" ile HİÇ KIRPILMADAN gösterilir; app.js hangisinin
   görüneceğine ve #soundboard'un tam olarak nereye yerleşeceğine karar
   verir (bkz. app.js — layoutStage / SAFE_ZONES). Bu sayede iPad, iPhone,
   hangi ekran oranı olursa olsun buton karesi görselin üstünde her zaman
   doğru yerde kalır.
   ========================================================================== */

#stage {
  position: relative;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;

  /* Görsel "contain" ile sığdırıldığında kenarlarda kalan boşluk
     (letterbox) bu renkle dolar — tasarımların köşe tonuna yakın koyu
     mor, boşluklar göze batmasın diye. */
  background: var(--bg);

  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

/* TASARIM GÖRSELLERİ: bu iki dosyayı aynı isimle (design/background-
   landscape.png = 2360x1640, design/background-portrait.png = 1640x2360)
   değiştirerek tasarımı güncelleyebilirsin — kod tarafında hiçbir şey
   değiştirmen gerekmez. app.js sayfa yüklendiğinde/döndürüldüğünde
   hangisinin gösterileceğine kendisi karar verir (display: none/block). */
.bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  display: none; /* app.js açar */
}

/* ==========================================================================
   Soundboard grid — konumu ve boyutu app.js tarafından piksel piksel
   hesaplanıp inline style ile (left/top/width/height) set edilir, çünkü
   bu değerler o anki ekranda gösterilen tasarım görselinin gerçek
   boyutuna bağlıdır. Buradaki kurallar sadece güvenli bir varsayılan/
   fallback (JS çalışmadan önceki an veya JS hata verirse).
   ========================================================================== */

#soundboard {
  position: absolute;
  /* Fallback: JS henüz çalışmadıysa ortada, oranlı bir kare göster. */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(78vmin, 760px);
  aspect-ratio: 1 / 1;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: var(--gap);
}

/* app.js konumu hesaplayıp bu sınıfı eklediğinde transform/aspect-ratio
   fallback'i devre dışı kalır; left/top/width/height doğrudan px olarak
   inline style'dan gelir. */
#soundboard.is-positioned {
  transform: none;
  aspect-ratio: auto;
}

/* ==========================================================================
   Sound tile (button)
   ========================================================================== */

.sound-tile {
  appearance: none;
  border: 1px solid var(--tile-border);
  border-radius: var(--radius);
  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, 0.9vmin, 10px);

  position: relative;
  overflow: hidden;

  cursor: pointer;
  touch-action: manipulation;

  color: var(--text-color);
  font-size: clamp(17px, 2.9vmin, 34px);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  padding: 0 clamp(6px, 1.5vmin, 14px);

  background: linear-gradient(135deg, var(--tile-1), var(--tile-2) 55%, var(--tile-3));
  box-shadow:
    inset 0 1px 0 var(--tile-highlight),
    inset 0 -12px 24px rgba(0, 0, 0, 0.25),
    0 10px 24px var(--tile-shadow);

  transition: background 150ms ease, transform 100ms ease, box-shadow 150ms ease, opacity 150ms ease;
}

.sound-tile:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: -3px;
}

/* Basma anındaki fiziksel his */
.sound-tile:active {
  transform: scale(0.98);
}

/* Aktif (çalıyor) durum — mor -> yeşil */
.sound-tile.is-active {
  background: linear-gradient(135deg, var(--green-1), var(--green-2) 55%, var(--green-3));
  box-shadow:
    inset 0 1px 0 var(--tile-highlight),
    inset 0 -12px 24px rgba(0, 0, 0, 0.25),
    0 0 0 2px rgba(74, 222, 128, 0.35),
    0 10px 26px rgba(0, 0, 0, 0.6);
}

/* Sesi henüz yüklenen/decode edilen buton — geçici, kısa süreli durum.
   Sayfa yeni açıldığında dosyalar indirilene kadar butonlar bu hâlde
   görünür; her ses hazır olduğunda kendi butonu otomatik aktive olur. */
.sound-tile.is-loading {
  opacity: 0.55;
  cursor: default;
}

/* Sesi yüklenemeyen (kalıcı hata) buton — soluk, gri ve devre dışı */
.sound-tile:disabled,
.sound-tile.is-errored {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

/* is-loading, is-errored'dan daha spesifik olmalı ki geçici durum
   yanlışlıkla kalıcı-hata görünümüne bürünmesin. */
.sound-tile.is-loading:disabled {
  opacity: 0.55;
  cursor: default;
  filter: none;
}

.sound-tile:disabled:active,
.sound-tile.is-errored:active {
  transform: none;
}

/* İkon (emoji) — küçük kalması için metinden daha ufak, ekstra satır
   yüksekliği olmadan tek karakter olarak gösterilir. */
.sound-tile__icon {
  display: block;
  font-size: clamp(15px, 2.4vmin, 26px);
  line-height: 1;
  pointer-events: none;
}

.sound-tile__label {
  display: block;
  line-height: 1.15;
  pointer-events: none;
  max-width: 100%;
  /* Flex item'ların varsayılan min-width:auto'su, içindeki kırılmasız
     uzun kelimenin tam genişliğini "en az genişlik" sayıp taşmaya sebep
     olabiliyordu. 0'a çekince yukarıdaki break-word gerçekten işliyor. */
  min-width: 0;
  /* "Applaudissements" gibi tek parça uzun kelimeler taşarak komşu
     butona binmesin diye: normal kelime aralarında sar, gerekirse
     kelime İÇİNDE de kır. */
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}