/* ════════════════════════════════════════════════════════════════
   touch-controls.css — Game Boy / handheld style on-screen pad
   İZOLE: bu dosyayı silmek tüm efekti geri alır.
   ════════════════════════════════════════════════════════════════ */

/* EmulatorJS'in mobilde otomatik gösterdiği built-in virtual gamepad'i
   gizle — biz kendi panelimizi kullanıyoruz, çakışmasın. */
.ejs_virtualGamepad_parent { display: none !important; }

#touch-controls {
  position: relative;
  z-index: 12;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

/* NOT: tc-toggle (⌨) butonu kaldırıldı — panel her zaman görünür */

/* ════════════════════════════════════════════════════════════════
   Panel — flexbox, kompakt ve responsive
   ════════════════════════════════════════════════════════════════ */
.tc-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 18px;
  margin: -12px auto 32px;
  max-width: 640px;            /* küçük tut, ortada kal */
  background: linear-gradient(180deg, rgba(13, 4, 32, .85) 0%, rgba(7, 3, 15, .95) 100%);
  border: 2px solid var(--magenta, #ff2bd6);
  border-top: none;
  border-radius: 0 0 18px 18px;
  box-shadow:
    inset 0 4px 18px rgba(255, 43, 214, .15),
    0 6px 28px rgba(0, 0, 0, .6);
}

.tc-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.tc-side-mid {
  flex-direction: column;
  gap: 8px;
}

/* ── Buttons base ────────────────────────────────────────────────── */
.tc-btn {
  appearance: none;
  background: linear-gradient(180deg, #2a1454, #0d0420);
  border: 2px solid var(--gold, #ffd24a);
  color: var(--gold, #ffd24a);
  font-family: var(--font-pixel, 'Press Start 2P'), monospace;
  font-size: .55rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  /* GPU compositing: 60fps drag/press için promote to layer */
  will-change: transform;
  transform: translateZ(0);
  transition: transform .08s, background .12s, box-shadow .12s;
  box-shadow:
    0 3px 0 #000,
    0 0 8px rgba(255, 210, 74, .3),
    inset 0 1px 0 rgba(255, 255, 255, .1);
  text-shadow: 0 0 6px var(--gold, #ffd24a);
  -webkit-tap-highlight-color: transparent;
  padding: 0;
  position: relative;
}
.tc-btn:active,
.tc-btn.tc-pressed {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #000, 0 0 14px var(--gold, #ffd24a), inset 0 0 12px rgba(255, 210, 74, .25);
  background: linear-gradient(180deg, #3a1f6e, #1a0838);
}

/* ── Analog Stick (8-way, touch+drag) ──────────────────────────── */
.tc-stick {
  position: relative;
  width: 132px;
  height: 132px;
  flex-shrink: 0;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Outer base — synthwave neon ring */
.tc-stick-base {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at center,
      rgba(0, 240, 255, .12) 0%,
      rgba(13, 4, 32, .85) 60%,
      rgba(7, 3, 15, .95) 100%);
  border: 2px solid rgba(0, 240, 255, .55);
  box-shadow:
    0 0 18px rgba(0, 240, 255, .35),
    inset 0 0 22px rgba(0, 240, 255, .15),
    inset 0 0 0 6px rgba(0, 240, 255, .04),
    0 4px 16px rgba(0, 0, 0, .6);
  pointer-events: none;
}

/* Direction tick marks — 4 yön ipucu (basit ince çubuklar) */
.tc-stick-tick {
  position: absolute;
  background: rgba(0, 240, 255, .55);
  box-shadow: 0 0 4px rgba(0, 240, 255, .55);
  pointer-events: none;
}
.tc-tick-up    { top: 8px;    left: 50%; width: 2px; height: 10px; transform: translateX(-50%); }
.tc-tick-down  { bottom: 8px; left: 50%; width: 2px; height: 10px; transform: translateX(-50%); }
.tc-tick-left  { top: 50%;    left: 8px;  width: 10px; height: 2px; transform: translateY(-50%); }
.tc-tick-right { top: 50%;    right: 8px; width: 10px; height: 2px; transform: translateY(-50%); }

/* The thumb (parmak takip eden iç daire) */
.tc-stick-thumb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #fff8c4 0%, #ffd24a 35%, #c75215 90%);
  border: 2px solid var(--gold, #ffd24a);
  box-shadow:
    0 0 12px rgba(255, 210, 74, .55),
    0 0 22px rgba(255, 158, 31, .35),
    inset 0 -4px 8px rgba(0, 0, 0, .35),
    inset 0 3px 4px rgba(255, 255, 255, .35);
  /* GPU layer: 60fps drag esnasında repaint maliyeti yok */
  will-change: transform, filter;
  transform: translate(-50%, -50%) translateZ(0);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1),
              box-shadow .15s,
              filter .15s;
  pointer-events: none;
  /* hızlı drag esnasında transition'ı kapatacağız */
}
.tc-stick-thumb-active {
  transition: box-shadow .15s, filter .15s;
  filter: brightness(1.15);
  box-shadow:
    0 0 18px var(--gold, #ffd24a),
    0 0 36px rgba(255, 158, 31, .55),
    inset 0 -4px 8px rgba(0, 0, 0, .35),
    inset 0 3px 4px rgba(255, 255, 255, .5);
}

/* Stick alanına basıldığında hafif outer glow pulse */
.tc-stick:has(.tc-stick-thumb-active) .tc-stick-base {
  border-color: var(--cyan, #00f0ff);
  box-shadow:
    0 0 26px rgba(0, 240, 255, .55),
    inset 0 0 28px rgba(0, 240, 255, .22),
    0 4px 18px rgba(0, 0, 0, .6);
}

/* ── Arcade Stick F700 Elite — Vewlix 6-button layout ──────────
   Sanwa OBSF-30 translucent dome buttons, 2-row staggered curve.
   Üst sıra: Y X L  | Alt sıra: B A R (sağa offset, parmak kavisi) */

.tc-arcade {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px;
  flex-shrink: 0;
}
.tc-arc-row {
  display: flex;
  gap: 10px;
  justify-content: center;
}
/* Alt sıra primary (B, A) — biraz daha büyük + daha parlak */
.tc-arc-row-bot .tc-arc-btn {
  width: 56px;
  height: 56px;
}
.tc-arc-row-bot .tc-arc-btn span {
  bottom: 11px;
  font-size: .55rem;
}

.tc-arc-btn {
  appearance: none;
  position: relative;
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  /* GPU compositing: press animasyonu (translateY + scale) için layer */
  will-change: transform, filter;
  transform: translateZ(0);
  /* Sanwa OBSF-30 translucent shell:
     1) glossy üst yansıma (hafif beyaz)
     2) konkav iç (orta açık halka, kenarda renk yoğunluğu)
     3) renkli halka (--btn-color)
     4) iç kubbe gölgesi */
  background:
    radial-gradient(circle at 50% 35%,
      rgba(255, 255, 255, .85) 0%,
      rgba(255, 255, 255, .6) 18%,
      var(--btn-color, #ffffff) 70%,
      var(--btn-deep, #cccccc) 95%);
  box-shadow:
    /* base PCB depth — buton plastik kapakta oturuyor */
    0 4px 0 rgba(10, 10, 15, .65),
    0 6px 14px rgba(0, 0, 0, .55),
    /* outer color glow (LED) */
    0 0 14px var(--btn-glow, rgba(255, 255, 255, .35)),
    /* concave inner — alt-orta'da koyu, üstte parlak */
    inset 0 -8px 14px rgba(0, 0, 0, .25),
    inset 0 5px 8px rgba(255, 255, 255, .55),
    /* outer plastic rim (Sanwa metalik ring) */
    inset 0 0 0 2.5px rgba(255, 255, 255, .25);
  transition: transform .07s, box-shadow .1s, filter .12s;
}

/* Top glossy reflection — küçük yarımay highlight */
.tc-arc-btn::before {
  content: '';
  position: absolute;
  top: 5px; left: 50%;
  width: 60%;
  height: 22%;
  border-radius: 50%;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, .8) 0%,
    rgba(255, 255, 255, 0) 100%);
  transform: translateX(-50%);
  filter: blur(1px);
  pointer-events: none;
}

/* Etiket span (üst yarıda, küçük) */
.tc-arc-btn span {
  position: absolute;
  bottom: 9px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-pixel, 'Press Start 2P'), monospace;
  font-size: .5rem;
  color: rgba(0, 0, 0, .55);
  letter-spacing: .04em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
  pointer-events: none;
}

/* Pressed state — buton içeri batar, parlak LED yanar */
.tc-arc-btn:active,
.tc-arc-btn.tc-pressed {
  transform: translateY(4px);
  filter: brightness(1.12) saturate(1.2);
  background:
    radial-gradient(circle at 50% 38%,
      rgba(255, 255, 255, .95) 0%,
      var(--btn-color, #ffffff) 50%,
      var(--btn-deep, #cccccc) 95%);
  box-shadow:
    0 1px 0 rgba(10, 10, 15, .65),
    0 2px 5px rgba(0, 0, 0, .5),
    0 0 22px var(--btn-glow, rgba(255, 255, 255, .7)),
    inset 0 -6px 10px rgba(0, 0, 0, .35),
    inset 0 4px 6px rgba(255, 255, 255, .7),
    inset 0 0 0 2.5px rgba(255, 255, 255, .35);
}

/* F700 Elite 4-button — fonksiyonel renk şeması:
   Sol-üst  Y = OYUN-SPESİFİK (mute, muted morumsu — varies by game)
   Sağ-üst  X = ÖZEL HAREKET (parlak magenta — distinctive special)
   Sol-alt  B = YUMRUK / VURUŞ (sarı — high contrast hit)
   Sağ-alt  A = ZIPLAMA (kırmızı — most prominent action) */
.tc-arc-y { --btn-color: #9d8cb8; --btn-deep: #4d3c6e; --btn-glow: rgba(157, 140, 184, .45); }
.tc-arc-x { --btn-color: #ff2bd6; --btn-deep: #8a1075; --btn-glow: rgba(255, 43, 214, .65); }
.tc-arc-b { --btn-color: #ffc41c; --btn-deep: #b87a00; --btn-glow: rgba(255, 196, 28, .55); }
.tc-arc-a { --btn-color: #ff2638; --btn-deep: #99101c; --btn-glow: rgba(255, 38, 56, .65); }

/* Özel hareket (X) butonuna sürekli hafif pulse — dikkat çek */
.tc-arc-x {
  animation: tc-special-pulse 2.4s ease-in-out infinite;
}
@keyframes tc-special-pulse {
  0%, 100% { box-shadow:
    0 4px 0 rgba(10, 10, 15, .65),
    0 6px 14px rgba(0, 0, 0, .55),
    0 0 14px var(--btn-glow),
    inset 0 -8px 14px rgba(0, 0, 0, .25),
    inset 0 5px 8px rgba(255, 255, 255, .55),
    inset 0 0 0 2.5px rgba(255, 255, 255, .25); }
  50%      { box-shadow:
    0 4px 0 rgba(10, 10, 15, .65),
    0 6px 14px rgba(0, 0, 0, .55),
    0 0 24px var(--btn-glow),
    0 0 38px rgba(255, 43, 214, .35),
    inset 0 -8px 14px rgba(0, 0, 0, .25),
    inset 0 5px 8px rgba(255, 255, 255, .55),
    inset 0 0 0 2.5px rgba(255, 255, 255, .35); }
}
.tc-arc-x:active,
.tc-arc-x.tc-pressed {
  animation: none; /* basıldığında pulse durdur */
}

/* ── Start / Select (center column) ────────────────────────────── */
.tc-sys {
  width: 70px;
  height: 22px;
  border-radius: 11px;
  font-size: .38rem;
  letter-spacing: .12em;
  border-color: rgba(255, 255, 255, .35);
  color: var(--text-dim, #9a8cc4);
  text-shadow: none;
  background: linear-gradient(180deg, #1a0838, #07030f);
}

/* Start butonu — hafif yeşil aksent (klasik arcade Start/Player1 vibesi) */
.tc-start {
  border-color: rgba(43, 214, 110, .55);
  color: rgba(43, 214, 110, .9);
  background: linear-gradient(180deg,
    rgba(43, 214, 110, .18) 0%,
    rgba(13, 4, 32, .9) 60%,
    rgba(7, 3, 15, .95) 100%);
  text-shadow: 0 0 4px rgba(43, 214, 110, .4);
  box-shadow:
    0 2px 0 #000,
    0 0 8px rgba(43, 214, 110, .25),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}
.tc-start:active,
.tc-start.tc-pressed {
  background: linear-gradient(180deg,
    rgba(43, 214, 110, .35) 0%,
    rgba(13, 4, 32, .9) 80%);
  color: #fff;
  box-shadow:
    0 1px 0 #000,
    0 0 14px rgba(43, 214, 110, .65),
    inset 0 0 10px rgba(43, 214, 110, .25);
}

/* ════════════════════════════════════════════════════════════════
   ORIENTATION / SIZE VARIANTS
   ════════════════════════════════════════════════════════════════ */

/* Landscape mode: aynı stacked layout — sadece daha kompakt */
@media (orientation: landscape) and (min-width: 901px) {
  .tc-panel {
    /* PC landscape: hafif yarı saydam, oyun deneyimine müdahale etmez */
    background: linear-gradient(180deg, rgba(13, 4, 32, .55), rgba(7, 3, 15, .85));
    opacity: .82;
    transition: opacity .2s;
    max-width: 580px;
  }
  .tc-panel:hover,
  .tc-panel:has(.tc-pressed) { opacity: 1; }
}

/* Çok küçük ekran (≤380px): biraz daha sıkıştır */
@media (max-width: 380px) {
  .tc-panel {
    gap: 6px;
    padding: 10px 8px 14px;
  }
  .tc-stick {
    width: 116px;
    height: 116px;
  }
  .tc-stick-thumb { width: 48px; height: 48px; }
  .tc-arc-btn { width: 42px; height: 42px; }
  .tc-arc-btn span { font-size: .42rem; bottom: 7px; }
  .tc-arc-row-bot { margin-left: 12px; }
  .tc-sys { width: 60px; font-size: .34rem; }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE LANDSCAPE — kompakt panel, vertikal alan kazan
   Telefon yataya döndüğünde panel viewport altına itilmesin.
   ════════════════════════════════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 500px) {
  .tc-panel {
    max-width: 100vw;
    margin: 0 auto;
    padding: 6px 12px 8px;
    gap: 8px;
    border-width: 1.5px;
    border-radius: 0 0 12px 12px;
  }
  .tc-stick {
    width: 100px;
    height: 100px;
  }
  .tc-stick-thumb { width: 42px; height: 42px; }
  .tc-stick-base { border-width: 2px; }
  .tc-arc-btn {
    width: 42px;
    height: 42px;
  }
  .tc-arc-btn span { font-size: .4rem; bottom: 6px; }
  .tc-arc-row-bot { margin-left: 10px; }
  .tc-sys {
    width: 54px;
    font-size: .34rem;
    padding: 4px 6px;
  }
}