* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  color-scheme: dark; /* açılır menüler ve kaydırma çubukları koyu görünsün */
  --bg1: #1b2838;
  --bg2: #0e1621;
  --accent: #66c0f4;
  --like: #2ecc71;
  --nope: #e74c3c;
  --card-w: min(92vw, 400px);
  --card-h: min(70vh, 600px);
}

body {
  font-family: "Segoe UI", system-ui, sans-serif;
  background: radial-gradient(ellipse at top, var(--bg1), var(--bg2) 70%);
  color: #e8eef4;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ---------- Ortam arka planı (aktif oyunun bulanık görseli) ---------- */
.ambient {
  position: fixed;
  inset: -60px;
  background: center/cover no-repeat;
  filter: blur(42px) brightness(.32) saturate(1.25);
  opacity: 0;
  transition: opacity 1.1s ease;
  z-index: 0;
  pointer-events: none;
}
.ambient.visible { opacity: 1; }

.screen {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh; /* mobilde araç çubuğu açılıp kapanınca hayalet kaydırma olmasın */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.hidden { display: none !important; }

/* ---------- Kurulum ---------- */
/* arka planda yumuşak renk ışıltıları */
#setup-screen::before, #setup-screen::after {
  content: '';
  position: fixed;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .35;
  pointer-events: none;
  z-index: 0;
}
#setup-screen::before { background: #1f5d8f; top: -140px; left: -120px; }
#setup-screen::after { background: #3b2a6e; bottom: -160px; right: -140px; }

/* dikey ortalama auto margin ile: kart ekrandan uzunsa (mobil) justify-content: center
   gibi üstten taşırmaz, üstü kaydırılarak erişilebilir kalır */
#setup-screen { justify-content: flex-start; }

.setup-card {
  position: relative;
  z-index: 1;
  margin-top: auto;
  margin-bottom: auto;
  width: min(100%, 460px); /* 94vw + .screen iç boşluğu dar ekranda taşıyordu */
  background: rgba(20, 32, 46, .72);
  border: 1px solid rgba(102,192,244,.18);
  border-radius: 18px;
  padding: 32px 28px;
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03) inset;
  animation: setup-in .4s ease;
}
@keyframes setup-in { from { transform: translateY(14px) scale(.98); opacity: 0; } }

.setup-card h1 { font-size: 1.8rem; margin-bottom: 6px; }
.setup-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  background: linear-gradient(180deg, #ffffff, #9cc6e6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.setup-brand img {
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 3px 10px rgba(102,192,244,.5));
}
.title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.title-row h1 { margin-bottom: 0 !important; }

.lang-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(102,192,244,.14);
  border: 1px solid rgba(102,192,244,.45);
  border-radius: 999px;
  padding: 7px 12px;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
}
.lang-wrap:hover { background: rgba(102,192,244,.22); border-color: rgba(102,192,244,.7); }
.lang-wrap .globe { font-size: .95rem; }
.lang-wrap select {
  background: transparent;
  color: #a8dcff;
  border: none;
  font-size: .85rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.lang-wrap select:focus { outline: none; }
.lang-wrap select option { background: #16222f; color: #dce8f2; }
.subtitle { color: #a5b8c9; font-size: .92rem; line-height: 1.6; margin-bottom: 18px; }
.subtitle.center { text-align: center; margin: 4px 0 16px; }

.setup-card label { display: block; font-weight: 600; font-size: .9rem; margin: 18px 0 8px; }

.detect-status {
  color: #9db2c4;
  font-size: .88rem;
  line-height: 1.5;
  padding: 11px 14px;
  border-radius: 12px;
}
.detect-status:empty { display: none; }
.detect-status.ok {
  color: #a9e8c3;
  background: rgba(46,204,113,.1);
  border: 1px solid rgba(46,204,113,.28);
}
.detect-status.err {
  color: #ffb3ab;
  background: rgba(231,76,60,.1);
  border: 1px solid rgba(231,76,60,.3);
}

.account-list { display: flex; flex-direction: column; gap: 8px; }
.account-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  color: #e8eef4;
  font-size: .95rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s, transform .15s;
}
.account-btn:hover { background: rgba(102,192,244,.1); transform: translateX(3px); }
.account-btn.selected {
  border-color: var(--accent);
  background: rgba(102,192,244,.14);
  box-shadow: 0 4px 18px rgba(102,192,244,.18);
}
.account-btn .avatar { font-size: 1.4rem; }
.account-btn .avatar-img {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.2);
  flex-shrink: 0;
}
.account-btn .tag {
  margin-left: auto;
  font-size: .68rem;
  font-weight: 400;
  color: #8fd0a5;
  background: rgba(46,204,113,.12);
  border: 1px solid rgba(46,204,113,.3);
  border-radius: 999px;
  padding: 3px 9px;
}

/* filtre seçenekleri: hap görünümlü segment */
.radio-row { display: flex; gap: 8px; flex-wrap: wrap; }
.radio {
  font-weight: 600 !important;
  font-size: .84rem !important;
  display: flex !important;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  margin: 0 !important;
  padding: 9px 15px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  color: #9db2c4;
  transition: border-color .15s, background .15s, color .15s;
}
.radio:hover { background: rgba(102,192,244,.08); }
.radio:has(input:checked) {
  border-color: var(--accent);
  background: rgba(102,192,244,.14);
  color: #a8dcff;
}
.radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.primary-btn {
  width: 100%;
  margin-top: 24px;
  padding: 13px;
  font-size: 1rem;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  background: linear-gradient(90deg, #47bfff, #1a44c2);
  color: #fff;
  cursor: pointer;
  transition: transform .15s, filter .15s;
}
.primary-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
  box-shadow: 0 8px 28px rgba(71, 191, 255, .35);
}
.error { color: #ff8a80; font-size: .85rem; margin-top: 12px; text-align: center; }

/* ---------- Yükleme ---------- */
.loader {
  width: 52px; height: 52px;
  border: 5px solid rgba(255,255,255,.15);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 18px;
}
@keyframes spin { to { transform: rotate(360deg); } }
#loading-text { color: #9db2c4; }

/* ---------- Üst bar + ilerleme ---------- */
.topbar {
  width: 100%;
  max-width: 720px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 4px 10px;
}
.topbar h2 { font-size: 1.1rem; font-weight: 700; }
/* kaydırma ekranında üst bar ve ilerleme, alttaki üç sütunla aynı genişliği izler */
.topbar.wide, .progress-track.wide { max-width: 1400px; }
/* marka yazısı her zaman tam ortada kalsın diye kenarlar eşit genişlikte tutulur */
.topbar.wide { display: grid; grid-template-columns: 1fr auto 1fr; }
.topbar.wide .topbar-left { justify-self: start; display: flex; gap: 8px; align-items: center; }
.topbar.wide .topbar-right { justify-self: end; }
.top-lang { padding: 5px 11px; }

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 1.15rem !important;
  letter-spacing: .3px;
  background: linear-gradient(180deg, #ffffff, #9cc6e6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.brand img {
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 2px 6px rgba(102,192,244,.45));
}

.pill {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: .82rem;
  color: #cfe1ef;
  white-space: nowrap;
}
.pill-btn { cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s; font-family: inherit; }
.pill-btn:hover { background: rgba(255,255,255,.16); }

.count-pill {
  background: rgba(102,192,244,.1);
  border-color: rgba(102,192,244,.3);
  color: #a8dcff;
  font-weight: 600;
}
.list-btn {
  background: rgba(255,90,120,.1);
  border-color: rgba(255,90,120,.35);
  color: #ffc4cf;
  font-weight: 600;
}
.list-btn:hover {
  background: rgba(255,90,120,.2);
  border-color: rgba(255,90,120,.6);
  box-shadow: 0 4px 16px rgba(255,90,120,.25);
}

.progress-track {
  width: 100%;
  max-width: 720px;
  height: 5px;
  border-radius: 5px;
  background: rgba(255,255,255,.07);
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.4);
}
#progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--accent), #2ecc71);
  box-shadow: 0 0 10px rgba(102,192,244,.6);
  transition: width .35s ease;
}

/* ---------- Tür sekmeleri ---------- */
/* ızgaranın üç sütununu kaplayan, panellerle aynı hizada kayan şerit */
.genre-tabs {
  grid-column: 1 / -1;
  min-width: 0; /* grid öğesinin taşma yerine kaydırabilmesi için şart */
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 12px;
  scrollbar-width: none;              /* Firefox */
  /* kenar solmaları: yalnızca o yönde kayacak içerik varken (JS sınıfları) */
  --fadeL: 0px;
  --fadeR: 0px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fadeL), #000 calc(100% - var(--fadeR)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--fadeL), #000 calc(100% - var(--fadeR)), transparent);
}
.genre-tabs::-webkit-scrollbar { display: none; } /* Chrome/Edge */
.genre-tabs.fade-left { --fadeL: 28px; }
.genre-tabs.fade-right { --fadeR: 28px; }

.genre-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 7px 13px;
  font-size: .8rem;
  font-family: inherit;
  color: #b9cbdb;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  flex-shrink: 0;
}
.genre-tab:hover { background: rgba(102,192,244,.12); color: #dcebf7; }
.genre-tab.active {
  background: rgba(102,192,244,.2);
  border-color: rgba(102,192,244,.55);
  color: #a8dcff;
  font-weight: 700;
}
.genre-tab .cnt {
  font-size: .7rem;
  font-weight: 400;
  color: #7e93a6;
  background: rgba(0,0,0,.3);
  border-radius: 999px;
  padding: 2px 8px;
}
.genre-tab.active .cnt { color: #a8dcff; }

/* ---------- Kart destesi + yan paneller ---------- */
#swipe-screen { justify-content: flex-start; padding-top: 18px; }

.swipe-layout {
  display: grid;
  /* orta sütun kart genişliğinde sabit; "auto" olursa boş alanı yutup panelleri iki yana itiyor */
  grid-template-columns: minmax(280px, 340px) var(--card-w) minmax(280px, 340px);
  gap: 22px;
  align-items: start;
  justify-content: center;
  width: 100%;
  max-width: 1400px;
}
.deck-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 5; /* uçan/sürüklenen kartlar panellerin üstünden geçsin, altından değil */
}

.side-panel {
  position: relative;
  z-index: 1;
  background: rgba(16, 27, 39, .62);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  padding: 16px;
  height: var(--card-h);
  display: flex;
  flex-direction: column;
  box-shadow: 0 14px 40px rgba(0,0,0,.4);
}
.side-panel h4 {
  font-size: .9rem;
  color: #cfe1ef;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 12px;
  flex-shrink: 0;
}
.panel-head h4 { border-bottom: none; margin-bottom: 0; }
.lang-toggle { display: flex; gap: 4px; padding-bottom: 8px; }
.lang-toggle button {
  padding: 4px 11px;
  font-size: .72rem;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.25);
  color: #8fa7bb;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, color .15s, border-color .15s;
}
.lang-toggle button:hover { color: #cfe1ef; }
.lang-toggle button.active {
  background: rgba(102,192,244,.18);
  border-color: rgba(102,192,244,.5);
  color: #a8dcff;
}

/* Bilgi paneli: kart yüksekliğinde, içerik sade olduğu için kaydırmasız sığar;
   mağaza butonu panelin dibine yaslanır */
#info-panel .side-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}
#info-panel .store-link { margin-top: auto; }

/* Sol panel medya alanı: fragman + ekran görüntüleri */
.side-media { flex-shrink: 0; margin-bottom: 12px; }
.media-viewer {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 10px;
  overflow: hidden;
  background: #0a121b center/cover no-repeat;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.1);
}
.media-viewer video, .media-viewer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media-thumbs {
  display: flex;
  gap: 6px;
  margin-top: 7px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none; /* kaydırma çubuğu gizli; tekerlek ve sürükleme çalışır */
}
.media-thumbs::-webkit-scrollbar { display: none; }
.media-thumbs img {
  height: 40px;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .15s;
}
.media-thumbs img:hover { border-color: rgba(102,192,244,.5); }
.media-thumbs img.active { border-color: var(--accent); }
.media-thumbs .video-thumb { position: relative; flex-shrink: 0; }
.media-thumbs .video-thumb::after {
  content: '▶';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  color: #fff;
  background: rgba(0,0,0,.35);
  border-radius: 6px;
  pointer-events: none;
}
.side-content {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(102,192,244,.35) transparent;
  animation: side-in .3s ease;
}
@keyframes side-in { from { opacity: 0; transform: translateY(6px); } }
.side-empty { color: #62788c; font-size: .84rem; text-align: center; padding: 20px 0; }

/* Bilgi paneli */
.rating-box {
  background: rgba(102,192,244,.08);
  border: 1px solid rgba(102,192,244,.22);
  border-radius: 10px;
  padding: 11px 12px;
  margin-bottom: 12px;
}
.rating-box .score-desc { font-weight: 700; font-size: .95rem; color: #78c8ff; }
.rating-box .score-detail { font-size: .76rem; color: #8fa7bb; margin-top: 3px; }
.rating-bar {
  height: 5px;
  border-radius: 4px;
  background: rgba(231,76,60,.45);
  margin-top: 8px;
  overflow: hidden;
}
.rating-bar > div { height: 100%; background: #47bfff; border-radius: 4px; }

.info-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 2px;
  font-size: .82rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.info-row .k { color: #7e93a6; flex-shrink: 0; }
.info-row .v { color: #dce8f2; text-align: right; }
.info-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

.store-link {
  display: block;
  margin-top: 14px;
  padding: 10px;
  text-align: center;
  font-size: .85rem;
  font-weight: 700;
  color: #a8dcff;
  text-decoration: none;
  background: rgba(102,192,244,.12);
  border: 1px solid rgba(102,192,244,.4);
  border-radius: 10px;
  transition: background .15s, border-color .15s, transform .15s;
}
.store-link:hover {
  background: rgba(102,192,244,.22);
  border-color: rgba(102,192,244,.7);
  transform: translateY(-1px);
}

/* İnceleme kartları */
.review-card {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 11px 12px;
  margin-bottom: 10px;
}
.review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}
.review-verdict { font-size: .78rem; font-weight: 700; }
.review-verdict.up { color: #6fe3a1; }
.review-verdict.down { color: #ff8a80; }
.review-hours { font-size: .72rem; color: #7e93a6; }
.review-text {
  font-size: .8rem;
  line-height: 1.5;
  color: #c2d3e2;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review-foot {
  margin-top: 7px;
  font-size: .7rem;
  color: #62788c;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.review-lang { text-transform: uppercase; letter-spacing: .5px; }

/* Dar ekranda yan paneller gizlenir (her şey detay panelinde zaten var) */
@media (max-width: 1160px) {
  .swipe-layout { grid-template-columns: auto; }
  .side-panel { display: none; }
}

.deck {
  position: relative;
  /* sürüklenen kart aksiyon butonlarının (backdrop-filter'lı ↩/ⓘ dahil)
     üzerinden geçsin; butonlar kartın önünde kalmasın */
  z-index: 2;
  width: var(--card-w);
  height: var(--card-h);
}

.card {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  overflow: hidden;
  background: #182430;
  box-shadow: 0 18px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.07) inset;
  cursor: grab;
  user-select: none;
  touch-action: none;
  will-change: transform;
  animation: card-in .35s ease;
}
@keyframes card-in { from { transform: scale(.96); opacity: .6; } }
.card:active { cursor: grabbing; }
.card.behind1 { transform: scale(.95) translateY(16px); filter: brightness(.65); }
.card.behind2 { transform: scale(.9) translateY(32px); filter: brightness(.4); }
.card.behind1, .card.behind2 { pointer-events: none; transition: transform .3s, filter .3s; animation: none; }

.card-bg {
  position: absolute;
  inset: 0;
  background: center/cover no-repeat;
  transition: opacity .3s;
}

/* Üst rozetler */
.top-badges {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
  z-index: 2;
}
.badge {
  font-size: .78rem;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 8px;
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.badge.price { background: rgba(10, 22, 34, .78); color: #b8e986; }
.badge.meta { color: #fff; }

.card .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(3,7,12,.98) 0%, rgba(3,7,12,.88) 28%, rgba(3,7,12,.5) 52%, transparent 72%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  pointer-events: none;
}
/* metin bölgesinin arkasına buzlu cam: parlak kapaklarda da okunur kalsın */
.card .overlay::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 52%;
  z-index: -1;
  backdrop-filter: blur(12px) saturate(.9);
  -webkit-mask-image: linear-gradient(to top, #000 55%, transparent);
  mask-image: linear-gradient(to top, #000 55%, transparent);
}
.card h3 { font-size: 1.45rem; line-height: 1.15; text-shadow: 0 2px 12px rgba(0,0,0,.95), 0 0 4px rgba(0,0,0,.8); }
.card .byline { font-size: .8rem; color: #aec3d6; margin-top: 4px; text-shadow: 0 1px 8px rgba(0,0,0,.9); }
.card .meta-row { display: flex; align-items: center; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.genre-chip {
  background: rgba(102,192,244,.2);
  border: 1px solid rgba(102,192,244,.42);
  color: #a8dcff;
  font-size: .7rem;
  padding: 3px 9px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.cat-chip {
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.18);
  color: #c8d8e6;
  font-size: .7rem;
  padding: 3px 9px;
  border-radius: 999px;
}
.recs-chip { font-size: .72rem; color: #8fa7bb; }
.metacritic {
  font-size: .75rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: #4c8a1f;
  color: #fff;
}
.card .desc {
  margin-top: 9px;
  font-size: .82rem;
  color: #d8e5f1;
  line-height: 1.45;
  text-shadow: 0 1px 6px rgba(0,0,0,.9);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card .more-hint {
  margin-top: 9px;
  font-size: .72rem;
  color: #9db2c4;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0,0,0,.9);
}

/* kart üzerindeki etiketler: parlak görsellerde de seçilsin */
.card .genre-chip {
  background: rgba(16, 42, 62, .82);
  border-color: rgba(102,192,244,.55);
}
.card .cat-chip {
  background: rgba(12, 20, 28, .78);
  border-color: rgba(255,255,255,.3);
}
.card .recs-chip {
  color: #b9cede;
  text-shadow: 0 1px 5px rgba(0,0,0,.9);
}

/* LIKE / NOPE damgaları */
.stamp {
  position: absolute;
  top: 52px;
  max-width: 46%;
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: 2px;
  padding: 6px 16px;
  border: 4px solid;
  border-radius: 10px;
  opacity: 0;
  text-transform: uppercase;
  z-index: 3;
  backdrop-filter: blur(3px);
}
.stamp.like { left: 18px; color: var(--like); border-color: var(--like); transform: rotate(-16deg); background: rgba(46,204,113,.12); }
.stamp.nope { right: 18px; color: var(--nope); border-color: var(--nope); transform: rotate(16deg); background: rgba(231,76,60,.12); }

.card.flying { transition: transform .45s ease-out, opacity .45s; }
.card.restoring { transition: transform .3s ease-out; }

/* Deste boş mesajı */
.deck-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  color: #9db2c4;
  border: 2px dashed rgba(255,255,255,.15);
  border-radius: 20px;
  padding: 24px;
}
.deck-empty .big { font-size: 3rem; }

/* ---------- Aksiyon butonları ---------- */
.actions { display: flex; gap: 20px; margin-top: 20px; align-items: center; }
.action-btn {
  width: 66px; height: 66px;
  border-radius: 50%;
  border: none;
  font-size: 1.65rem;
  cursor: pointer;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  transition: transform .12s, filter .12s, box-shadow .12s;
}
.action-btn:hover { transform: scale(1.12); filter: brightness(1.12); }
.action-btn:active { transform: scale(.94); }
.action-btn.nope { background: linear-gradient(135deg, #ff6b5e, #d5321f); }
.action-btn.nope:hover { box-shadow: 0 8px 28px rgba(231,76,60,.5); }
.action-btn.like { background: linear-gradient(135deg, #4ae08a, #14a04c); }
.action-btn.like:hover { box-shadow: 0 8px 28px rgba(46,204,113,.5); }
.action-btn.undo, .action-btn.info {
  width: 50px; height: 50px;
  font-size: 1.2rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(6px);
}
.action-btn.info { color: var(--accent); }
.keys-hint { margin-top: 13px; font-size: .74rem; color: #62788c; }

.lucky-btn {
  margin-top: 16px;
  padding: 11px 26px;
  font-size: .92rem;
  font-weight: 700;
  font-family: inherit;
  color: #1a1205;
  background: linear-gradient(135deg, #ffd25e, #ff9d2e);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 8px 26px rgba(255, 160, 40, .35);
  transition: transform .15s, filter .15s, box-shadow .15s;
}
.lucky-btn:hover {
  transform: translateY(-2px) rotate(-1deg);
  filter: brightness(1.08);
  box-shadow: 0 10px 32px rgba(255, 160, 40, .5);
}
.lucky-btn:active { transform: scale(.96); }

.bonus-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.bonus-row .lucky-btn { margin-top: 0; }

/* zamanlayıcı düğmesi: kapalı -> 5s -> 10s -> 15s */
.timer-btn {
  padding: 11px 18px;
  font-size: .88rem;
  font-weight: 700;
  font-family: inherit;
  color: #9db2c4;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
  white-space: nowrap;
}
.timer-btn:hover { background: rgba(102,192,244,.1); color: #cfe1ef; }
.timer-btn.active {
  color: #a8dcff;
  background: rgba(102,192,244,.16);
  border-color: rgba(102,192,244,.5);
  box-shadow: 0 4px 16px rgba(102,192,244,.22);
}

/* kartın üstündeki geri sayım */
.card-timer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  pointer-events: none;
}
.card-timer .ct-fill {
  height: 5px;
  width: 100%;
  background: linear-gradient(90deg, #ffd25e, #ff9d2e);
  box-shadow: 0 0 10px rgba(255,160,40,.6);
}
.card-timer .ct-num {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 30px;
  text-align: center;
  font-size: .8rem;
  font-weight: 800;
  color: #ffd25e;
  background: rgba(10, 16, 24, .75);
  border: 1px solid rgba(255,210,94,.4);
  border-radius: 999px;
  padding: 3px 9px;
  backdrop-filter: blur(4px);
}

/* ---------- Dumbbell Games tanıtımı ---------- */
/* sekmeler gibi ızgaranın üç sütununu kaplar, panellerle aynı hizada */
.promo {
  grid-column: 1 / -1;
  min-width: 0; /* içerideki şeridin taşmak yerine kayabilmesi için */
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.promo-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  color: #8fa7bb;
  margin-bottom: 10px;
  padding: 4px;
}
.promo-title:hover { color: #b9cbdb; }
.promo-title a { color: #a8dcff; text-decoration: none; }
.promo-title a:hover { text-decoration: underline; }
.promo-chev { display: inline-block; transition: transform .2s; margin-right: 4px; }
.promo.collapsed .promo-chev { transform: rotate(-90deg); }
.promo.collapsed .promo-games { display: none; }
.promo-games {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none; /* tekerlek ve sürüklemeyle kayar */
}
.promo-games::-webkit-scrollbar { display: none; }
.promo-game {
  position: relative;
  flex: 0 0 196px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #cfe1ef;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  overflow: hidden;
  transition: transform .15s, border-color .15s, background .15s;
}
.promo-game:hover {
  transform: translateY(-3px);
  border-color: rgba(102,192,244,.5);
  background: rgba(102,192,244,.1);
}
.promo-game img {
  width: 100%;
  aspect-ratio: 460 / 215;
  object-fit: cover;
  display: block;
}
.promo-game span {
  padding: 7px 10px;
  font-size: .8rem;
  font-weight: 600;
  text-align: center;
}
.promo-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  font-style: normal;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .3px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #1a1205;
  background: linear-gradient(135deg, #ffd25e, #ff9d2e);
  box-shadow: 0 2px 8px rgba(0,0,0,.45);
}
.promo-badge.free {
  color: #06180d;
  background: linear-gradient(135deg, #6ee7a0, #1db954);
}

/* ---------- Detay paneli ---------- */
#detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(3, 8, 14, .75);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  animation: fade-in .2s ease;
}
@keyframes fade-in { from { opacity: 0; } }

.detail-panel {
  position: relative;
  width: min(96vw, 680px);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: #131f2b;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,.7);
  animation: panel-in .25s ease;
}
@keyframes panel-in { from { transform: translateY(24px) scale(.97); opacity: 0; } }

.detail-close {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 5;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  backdrop-filter: blur(4px);
}
.detail-close:hover { background: rgba(231,76,60,.8); }

.detail-hero {
  width: 100%;
  aspect-ratio: 16/9;
  background: #0a121b center/cover no-repeat;
  flex-shrink: 0;
}
.detail-hero video, .detail-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.detail-body {
  padding: 18px 20px 8px;
  overflow-y: auto;
}
.detail-body h2 { font-size: 1.5rem; line-height: 1.2; padding-right: 30px; }
.detail-byline { color: #8fa7bb; font-size: .86rem; margin-top: 5px; }
.detail-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 11px; }
.detail-desc { margin-top: 13px; font-size: .9rem; line-height: 1.55; color: #c9d8e5; }

.detail-gallery {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 15px 0 12px;
  padding-bottom: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(102,192,244,.4) transparent;
}
.detail-gallery img {
  height: 92px;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
  flex-shrink: 0;
}
.detail-gallery img:hover { transform: translateY(-2px); }
.detail-gallery img.active { border-color: var(--accent); }
.detail-gallery .gallery-video-thumb { position: relative; flex-shrink: 0; }
.detail-gallery .gallery-video-thumb::after {
  content: '▶';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: #fff;
  background: rgba(0,0,0,.35);
  border-radius: 8px;
  pointer-events: none;
}

.detail-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 10px 16px 16px;
  border-top: 1px solid rgba(255,255,255,.07);
  background: rgba(0,0,0,.18);
}
.detail-actions .action-btn { width: 56px; height: 56px; font-size: 1.4rem; flex-shrink: 0; }

.detail-link {
  padding: 12px 18px;
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  color: #a8dcff;
  background: rgba(102,192,244,.12);
  border: 1px solid rgba(102,192,244,.4);
  border-radius: 999px;
  transition: background .15s, transform .15s;
  white-space: nowrap;
}
.detail-link:hover { background: rgba(102,192,244,.24); transform: translateY(-1px); }
.detail-link.launch {
  color: #b8f5cd;
  background: rgba(46,204,113,.14);
  border-color: rgba(46,204,113,.45);
}
.detail-link.launch:hover { background: rgba(46,204,113,.26); }

/* ---------- Sonuçlar ---------- */
#results-screen { justify-content: flex-start; padding-top: 20px; }
#results-screen .topbar { max-width: 1100px; }

.results-filter {
  width: 100%;
  max-width: 1100px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
#results-search {
  flex: 0 0 240px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.3);
  color: #e8eef4;
  font-size: .85rem;
  font-family: inherit;
}
#results-search:focus { outline: none; border-color: var(--accent); background: rgba(102,192,244,.06); }
#results-search::placeholder { color: #62788c; }
.results-genres {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.results-groups { width: 100%; max-width: 1100px; display: flex; flex-direction: column; gap: 26px; padding-bottom: 20px; }

.genre-group h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.02rem;
  color: #a8dcff;
  border-bottom: 1px solid rgba(102,192,244,.22);
  padding-bottom: 8px;
  margin-bottom: 14px;
}
.group-count {
  font-style: normal;
  font-size: .72rem;
  font-weight: 700;
  color: #78c8ff;
  background: rgba(102,192,244,.14);
  border: 1px solid rgba(102,192,244,.35);
  border-radius: 999px;
  padding: 2px 10px;
}

.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }

.game-item {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: background .15s, transform .15s, border-color .15s, box-shadow .15s;
}
.game-item:hover {
  background: rgba(102,192,244,.1);
  border-color: rgba(102,192,244,.45);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.4);
}

.game-thumb { position: relative; }
.game-thumb img {
  width: 100%;
  aspect-ratio: 460 / 215;
  object-fit: cover;
  display: block;
}
.mini-meta {
  position: absolute;
  bottom: 6px;
  left: 6px;
  font-style: normal;
  font-size: .68rem;
  font-weight: 700;
  color: #fff;
  padding: 2px 7px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.remove-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  color: #ffb3ab;
  font-size: .8rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, background .15s, transform .15s;
  backdrop-filter: blur(4px);
}
.game-item:hover .remove-btn { opacity: 1; }
.remove-btn:hover { background: rgba(231,76,60,.85); color: #fff; transform: scale(1.1); }

.game-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 12px 11px;
}
.game-name { font-size: .85rem; font-weight: 600; line-height: 1.3; }
.game-meta { font-size: .73rem; color: #7e95aa; }
.game-review { font-size: .73rem; font-weight: 600; }
.game-review.pos { color: #78c8ff; }
.game-review.mixed { color: #d8a13c; }
.game-review.neg { color: #ff8a80; }

.results-footer { padding: 10px 0 30px; }
.danger-btn {
  background: transparent;
  border: 1px solid rgba(231,76,60,.5);
  color: #ff8a80;
  padding: 9px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-size: .85rem;
}
.danger-btn:hover { background: rgba(231,76,60,.12); }

.empty-msg { text-align: center; color: #7e93a6; padding: 40px 0; }

.export-row { display: flex; gap: 6px; margin-left: auto; }
.export-row .pill-btn { font-size: .74rem; padding: 6px 12px; }

/* ---------- Üst bar sağ grubu ---------- */
.topbar-right { display: flex; gap: 8px; align-items: center; }

/* ---------- İstatistik ekranı ---------- */
#stats-screen { justify-content: flex-start; padding-top: 20px; }
#stats-screen .topbar { max-width: 860px; }
.stats-wrap {
  width: min(96vw, 860px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 40px;
}
.stats-hero {
  position: relative;
  text-align: center;
  padding: 42px 28px 36px;
  border-radius: 20px;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(102,192,244,.16), transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(46,204,113,.12), transparent 55%),
    rgba(16, 27, 39, .75);
  border: 1px solid rgba(102,192,244,.25);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.stats-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: .85rem;
  font-weight: 700;
  color: #7e95aa;
  margin-bottom: 18px;
}
.stats-brand img { width: 20px; height: 20px; }
.stats-worth {
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.3;
  background: linear-gradient(90deg, #ffd25e, #ff9d2e);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stats-worth-sub { margin-top: 10px; color: #9db2c4; font-size: .95rem; }
.stats-progress { margin-top: 14px; font-size: .8rem; color: #62788c; }

.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.stat-tile {
  text-align: center;
  padding: 20px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
}
.stat-tile b { display: block; font-size: 1.35rem; color: #a8dcff; }
.stat-tile span { display: block; margin-top: 6px; font-size: .76rem; color: #7e95aa; }

.stats-chart-box {
  padding: 20px 22px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
}
.stats-chart-box h4 { font-size: .9rem; color: #cfe1ef; margin-bottom: 16px; }
.chart-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.chart-label { flex: 0 0 150px; font-size: .8rem; color: #b9cbdb; text-align: right; }
.chart-track { flex: 1; height: 16px; border-radius: 8px; background: rgba(255,255,255,.06); overflow: hidden; }
.chart-bar {
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, #47bfff, #2ecc71);
  box-shadow: 0 0 8px rgba(102,192,244,.4);
  transition: width .5s ease;
}
.chart-num { flex: 0 0 48px; font-size: .78rem; font-weight: 700; color: #a8dcff; }

@media (max-width: 640px) {
  .stats-row { grid-template-columns: 1fr; }
  .chart-label { flex-basis: 100px; }
}

/* ---------- Paylaşılan liste ---------- */
#shared-screen { justify-content: flex-start; padding-top: 20px; }
.shared-title { color: #a8dcff; margin: 6px 0 18px; }
.shared-grid { width: min(96vw, 1100px); padding-bottom: 40px; }

/* ---------- İstek listesi modu: silinecekler bölümü ---------- */
#results-removed { margin-top: 8px; }
.removed-group > h3 span { color: #ff9a8a; }
.remove-hint { color: #9db2c4; font-size: .85rem; margin: 2px 0 12px; max-width: 720px; }
.removed-item .game-thumb img { filter: saturate(.65) brightness(.9); }
.removed-item .remove-btn { font-size: 1rem; }
.script-row { margin: 0 0 10px; }
.script-how { color: #ffd28a; }

/* ---------- Hosted giriş (profil linkiyle) ---------- */
.profile-row { display: flex; gap: 10px; align-items: stretch; }
#profile-input {
  flex: 1;
  min-width: 0;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  padding: 10px 13px;
  color: #dce8f2;
  font-family: inherit;
  font-size: .9rem;
}
#profile-input:focus { outline: none; border-color: rgba(102,192,244,.6); }
.primary-btn.slim { width: auto; margin: 0; padding: 10px 18px; font-size: .9rem; }
.field-hint { color: #9db2c4; font-size: .8rem; margin: 8px 0 0; }

/* ---------- Dar ekran (telefon): kaydırma ekranı ----------
   Amaç: üst bar + sekmeler + kart + aksiyon butonları tek ekrana sığsın,
   swipe için sayfa kaydırmak gerekmesin. Dosyanın SONUNDA durmalı ki aynı
   özgüllükteki taban kurallarını ezebilsin. */
@media (max-width: 700px) {
  :root {
    /* kart yüksekliği: görünür yükseklikten üst/alt şeridin payı düşülür;
       dvh bilmeyen tarayıcılar vh satırında kalır (iOS'ta vh araç çubuğunu
       saymaz, o yüzden payı daha bol bırakılır) */
    --card-h: max(calc(100vh - 290px), 380px);
    --card-h: max(calc(100dvh - 262px), 380px);
  }

  /* üst bar: marka ve dil seçici gizlenir (dil kurulum ekranında seçiliyor),
     düğmeler yalnızca emojiyle kalır -> tek satıra sığar */
  .topbar.wide {
    display: flex;
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .topbar.wide .brand { display: none; }
  .topbar.wide .top-lang { display: none; }
  .topbar.wide .topbar-left { flex: 1; }
  .topbar.wide .pill { padding: 6px 10px; }
  .topbar.wide .pill-btn span[data-i18n] { display: none; }
  .topbar.wide .count-pill { font-size: .74rem; }

  #swipe-screen { padding-top: 8px; }
  .progress-track.wide { margin-bottom: 8px; }
  .swipe-layout { gap: 0; }
  .genre-tabs { padding-bottom: 8px; }

  .actions { gap: 14px; margin-top: 12px; }
  .action-btn { width: 56px; height: 56px; font-size: 1.4rem; }
  .action-btn.undo, .action-btn.info { width: 44px; height: 44px; font-size: 1.05rem; }
  .keys-hint { display: none; } /* klavye kısayolları dokunmatikte anlamsız */
  .bonus-row { margin-top: 8px; }
  .lucky-btn, .timer-btn { padding: 8px 16px; font-size: .8rem; }

  /* kısalan kartta görsele yer kalsın diye alt yazı alanı sıkılaşır */
  .card h3 { font-size: 1.3rem; }
  .card .desc { -webkit-line-clamp: 2; }
  .card .overlay { padding: 13px; }

  /* detay paneli: ✕ + iki link + ❤ tek satıra sığmıyordu — 2 sütunlu grid:
     üst satırda linkler, alt satırda ✕/❤ (her genişlikte aynı dizilim);
     yükseklik görünür alana (dvh) göre */
  #detail-overlay { padding: 10px; }
  .detail-panel { max-height: 92vh; max-height: 94dvh; }
  .detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 12px 14px; }
  .detail-actions .detail-link { order: -1; padding: 11px 10px; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; }
  .detail-actions .action-btn { width: 48px; height: 48px; font-size: 1.2rem; justify-self: center; }
}

/* ---------- Alt bilgi: X takip ---------- */
.site-footer {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding: 4px 16px 26px;
}
.x-follow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  color: #cfe1ef;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, border-color .15s, transform .15s;
}
.x-follow:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.32); transform: translateY(-1px); }
.x-follow svg { width: 15px; height: 15px; fill: currentColor; }