:root {
  --bg: #0a0a0f;
  --deck-bg: #0f0f18;
  --panel: rgba(30, 30, 44, 0.6);
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.6);
  --accent: #ff2d76;
  --accent-2: #7c5cff;
  --star: #ffd23f;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

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

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
}

/* ---- Feed: tam ekran dikey scroll-snap ---- */
#feed {
  height: 100dvh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
#feed::-webkit-scrollbar { display: none; }

/* Her oyun = tam ekran kart; DİKEY iki bölge: oyun alanı + kontrol şeridi */
.slide {
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---- ÜST: oynanabilir alan (sadece oyun burada) ---- */
.stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: #0d0d16;
}
.stage .game-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #0d0d16;
}

/* iframe yüklenene kadar kapak */
.stage .cover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: radial-gradient(120% 120% at 50% 30%, #1b1b2e 0%, #0d0d16 70%);
  transition: opacity 0.35s ease;
  z-index: 2;
}
.slide.loaded .cover { opacity: 0; pointer-events: none; }
.cover .cover-emoji { font-size: 60px; }
.cover .cover-title { font-size: 20px; font-weight: 700; }
.cover .spinner {
  width: 28px; height: 28px;
  border: 3px solid rgba(255,255,255,0.15);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* En iyi skor rozeti — oyun alanının üst köşesinde, oyunla çakışmayan küçük çip */
.stage .best-chip {
  position: absolute;
  top: calc(var(--safe-top) + 10px);
  left: 12px;
  z-index: 3;
  background: rgba(10, 10, 16, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--star);
  pointer-events: none;
}

/* ---- ALT: kontrol şeridi (açıklama + aksiyonlar) — oyun alanının DIŞINDA ---- */
.deck {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px calc(12px + var(--safe-bottom));
  background: var(--deck-bg);
  border-top: 1px solid rgba(255,255,255,0.07);
}
.deck-info {
  flex: 1 1 auto;
  min-width: 0;
}
.deck-info .game-name {
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 3px;
}
.deck-info .game-desc {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.deck-info .tags {
  margin-top: 7px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.deck-info .tag {
  font-size: 10.5px;
  background: rgba(255,255,255,0.1);
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--muted);
}

/* Aksiyonlar: şeridin sağında dikey küçük sütun */
.deck-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 14px;
  align-items: center;
}
.action-btn {
  background: none;
  border: 0;
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  padding: 0;
}
.action-btn .icon {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--panel);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: transform 0.15s ease;
}
.action-btn:active .icon { transform: scale(0.85); }
.action-btn.active.like .icon { color: var(--accent); }
.action-btn.active.star .icon { color: var(--star); }
.action-btn.active.save .icon { color: var(--accent-2); }

/* ---- Boot ekranı ---- */
#boot {
  position: fixed; inset: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 50;
  transition: opacity 0.4s ease;
}
#boot.hidden { opacity: 0; pointer-events: none; }
.boot-logo { font-size: 34px; font-weight: 900; letter-spacing: -1px; }
.boot-logo span { color: var(--accent); }
.boot-hint { color: var(--muted); font-size: 13px; }

/* ---- Kaydırma ipucu ---- */
#swipe-hint {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-bottom) + 108px);
  transform: translateX(-50%);
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  z-index: 20;
  pointer-events: none;
  animation: bob 1.4s ease-in-out infinite;
}
#swipe-hint.hidden { display: none; }
.swipe-arrow { font-size: 26px; line-height: 1; }
@keyframes bob {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.9; }
  50% { transform: translate(-50%, -8px); opacity: 0.5; }
}

.hidden { display: none !important; }