* { box-sizing: border-box; }
:root {
  --display-title-color: #00d4aa;
  --display-text-color: #e2e2e2;
  --display-accent-color: #00d4aa;
  --display-muted-color: #aaaaaa;
}
body { margin: 0; font-family: system-ui, sans-serif; background: #0a0a0f; color: var(--display-text-color); min-height: 100vh; overflow: hidden; }
#app { position: relative; min-height: 100vh; height: 100vh; padding: 1.5rem; display: flex; flex-direction: column; overflow: hidden; }
/* Arka plan: araba görseli burada, yeterince görünsün ki buzlu camda belli olsun */
.bg-layer { position: fixed; inset: 0; z-index: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.85; }
/* Header: yükseklik SOL tarafın içeriğine göre. Sağ taraf SOL ile aynı yükseklikte (geçmez). Scroll yok. */
#app > header.live-header {
  position: relative; z-index: 1; text-align: left; margin-bottom: 0.75rem; flex-shrink: 0;
}
@media (min-width: 768px) {
  #app > header.live-header {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    gap: 1.25rem;
  }
  .live-header .header-left {
    flex: 0 0 50%;
    min-width: 0;
  }
  .live-header .header-right {
    flex: 1;
    min-width: 0;
    display: flex;
    align-self: stretch;
  }
}
.title { font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 800; color: var(--display-title-color); margin: 0; text-shadow: 0 0 20px rgba(0,212,170,0.3); }
.race-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; align-items: center; }
.race-chip {
  display: inline-flex; align-items: center; padding: 0.25rem 0.65rem; border-radius: 999px;
  font-size: clamp(0.8rem, 1.2vw, 0.95rem); font-weight: 600; letter-spacing: 0.02em;
  background: color-mix(in srgb, var(--display-accent-color) 15%, transparent); color: var(--display-accent-color); border: 1px solid color-mix(in srgb, var(--display-accent-color) 40%, transparent);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.race-chip-car { background: rgba(255, 255, 255, 0.06); color: var(--display-text-color); border-color: rgba(255, 255, 255, 0.15); }
.prize-row { margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; }
/* Ödül: sol header içeriği – satır ne kadar olursa olsun tam gösterilir, scroll yok */
.prize-block {
  margin-top: 0; padding: 0.65rem 0.85rem; display: flex; flex-direction: column; min-height: 0;
  background: linear-gradient(135deg, rgba(255,215,0,0.08) 0%, rgba(255,180,0,0.04) 100%);
  border: 1px solid rgba(255,215,0,0.25); border-radius: 10px;
  box-shadow: 0 0 24px rgba(255,215,0,0.12), inset 0 1px 0 rgba(255,255,255,0.06);
}
.prize-title {
  margin: 0 0 0.4rem 0; font-size: clamp(1.05rem, 1.8vw, 1.35rem); font-weight: 800; letter-spacing: 0.03em;
  color: #ffd700; text-shadow: 0 0 20px rgba(255,215,0,0.5), 0 0 40px rgba(255,215,0,0.25), 0 2px 4px rgba(0,0,0,0.8);
  animation: prize-title-glow 2.5s ease-in-out infinite;
}
@keyframes prize-title-glow {
  0%, 100% { text-shadow: 0 0 20px rgba(255,215,0,0.5), 0 0 40px rgba(255,215,0,0.25), 0 2px 4px rgba(0,0,0,0.8); filter: brightness(1); }
  50% { text-shadow: 0 0 28px rgba(255,215,0,0.7), 0 0 56px rgba(255,215,0,0.35), 0 2px 4px rgba(0,0,0,0.8); filter: brightness(1.08); }
}
.prize-info {
  flex: 1; min-height: 0; overflow: hidden; display: flex; align-items: flex-start; justify-content: flex-start;
}
.prize-text {
  margin: 0; font-size: clamp(0.95rem, 1.35vw, 1.1rem); font-weight: 600; color: var(--display-text-color); line-height: 1.45;
  overflow: auto; max-height: 100%; text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.prize-image { max-width: 100%; max-height: 140px; width: auto; height: auto; object-fit: contain; display: block; margin-top: 0; }
/* QR + Link: sağ taraf = .header-left ile aynı yükseklik (stretch), bu yüksekliği geçmez */
.qr-link-block {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  padding: 0.6rem;
  min-width: 0;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  isolation: isolate;
}
@media (min-width: 768px) {
  .live-header .header-right {
    align-items: center;
  }
  .live-header .qr-link-block {
    height: 100%;
    align-self: stretch;
  }
}
/* QR kare: blok yüksekliğine göre kare, ama devasa olmasın diye üst sınır 200px */
.qr-link-box {
  flex-shrink: 0;
  height: 100%;
  width: auto;
  aspect-ratio: 1;
  max-height: 200px;
  max-width: 200px;
  min-width: 0;
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qr-link-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.qr-link-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
}
.qr-link-title {
  font-size: clamp(0.8rem, 1.5vw, 1.1rem);
  font-weight: 700;
  color: var(--display-title-color);
  line-height: 1.2;
  flex-shrink: 0;
}
.qr-link-text {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 0;
  font-size: clamp(0.7rem, 1.4vw, 1.15rem);
  color: var(--display-text-color);
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
@media (max-width: 767px) {
  .qr-link-block { display: none !important; }
}
body.layout-mobile .qr-link-block { display: none !important; }

#results-view, #ads-view { position: relative; z-index: 1; }
#results-view { margin-top: auto; flex: 1; min-height: 0; overflow: auto; }
body.layout-mobile #results-view {
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
  padding-bottom: 3rem;
}
.results-desktop { display: flex; gap: 1rem; width: 100%; align-items: flex-end; }
/* Varsayılan: masaüstünde sadece üst tablo görünsün, mobil tablo gizli */
.results-mobile { display: none !important; width: 100%; }

/* Mobil cihaz (telefon/tablet): başlık + pist/araç ortada, aynı chip tasarımı */
body.layout-mobile #app > header.live-header { text-align: center; }
body.layout-mobile .race-meta { justify-content: center; }
body.layout-mobile .results-desktop { display: none !important; }
body.layout-mobile .results-mobile { display: flex !important; flex-direction: column; padding-bottom: 0; }
body.layout-mobile .mobile-table-wrap { flex: 0 0 auto; width: 100%; max-height: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.mobile-footer { display: none; height: 0; overflow: hidden; }
body.layout-mobile .mobile-footer { display: block !important; height: 7rem; min-height: 112px; flex-shrink: 0; }
body.layout-mobile .mobile-results-table th:nth-child(1),
body.layout-mobile .mobile-results-table td:nth-child(1) { width: 4rem; max-width: 4rem; }
body.layout-mobile .mobile-results-table td:nth-child(2) { word-break: break-word; }

@media (max-width: 767px) {
  #app > header.live-header { text-align: center; }
  .race-meta { justify-content: center; }
  .results-desktop { display: none !important; }
  .results-mobile { display: flex !important; flex-direction: column; padding-bottom: 0; }
  .mobile-table-wrap { flex: 0 0 auto; width: 100%; max-height: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .mobile-footer { display: block !important; height: 7rem; min-height: 112px; flex-shrink: 0; }
  .mobile-results-table th:nth-child(1),
  .mobile-results-table td:nth-child(1) { width: 4rem; max-width: 4rem; }
  .mobile-results-table td:nth-child(2) { word-break: break-word; }
  #results-view { -webkit-overflow-scrolling: touch; overflow-y: scroll; padding-bottom: 0; }
}

/* Masaüstü canlı ekran: tam ekran arka plan, sol kolon (cam blur), sağda sadece QR */
.live-desktop-wrap { display: none; position: relative; }
@media (min-width: 768px) {
  body.layout-mobile .live-desktop-wrap { display: none !important; }
  body:not(.layout-mobile) .live-desktop-wrap {
    display: flex;
    position: absolute;
    inset: 0;
    z-index: 1;
    min-height: 0;
  }
  body:not(.layout-mobile) .live-mobile-wrap { display: none !important; }
  body:not(.layout-mobile) #app > .bg-layer { display: none !important; }
}
/* Arka plan tam ekran (kaydırma yok) */
.desktop-bg-full {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.92;
}
/* İlk 3 + tablo: kutu tam 75vw x 75vh, oran korunuyor */
.desktop-left {
  flex: 0 0 auto;
  width: 75vw;
  max-width: 75vw;
  min-width: 0;
  min-height: 0;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: visible;
  background: rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: none;
  z-index: 1;
}
.desktop-left .title { margin: 0; }
/* Saat: desktop-left’e yaklaşacak kadar büyük, sol panele yakın */
.desktop-clock {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 50;
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  font-weight: 800;
  color: var(--display-title-color);
  text-shadow: 0 0 20px rgba(0,212,170,0.3);
  font-variant-numeric: tabular-nums;
}
/* Başlık solda, pist/araba bilgisi sağda – sadece ikon + isim (referans görsel) */
.desktop-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.desktop-header-row .title { flex-shrink: 0; }
.race-meta-desktop {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  justify-content: flex-end;
}
.race-meta-desktop .meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5vw;
  padding: 0.5vw 0.9vw;
  font-size: 1.35vw;
  background: color-mix(in srgb, var(--display-accent-color) 15%, transparent);
  font-weight: 600;
  color: var(--display-accent-color);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--display-accent-color) 35%, transparent);
}
.race-meta-desktop .meta-item.car-item {
  color: var(--display-text-color);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}
.race-meta-desktop .meta-item img { width: 2.2vw; height: 2.2vw; min-width: 20px; min-height: 20px; object-fit: contain; flex-shrink: 0; }
/* İlk 3: genişliğe göre (vw) ölçeklenir, yükseklik kendiliğinden orantılı */
.top3-desktop {
  margin-top: 1.2vw;
  display: flex;
  gap: 0.8vw 1.2vw;
  justify-content: space-between;
  flex: 0 0 auto;
  max-width: 100%;
  min-height: 0;
}
.top3-desktop .podium-block {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4vw;
  padding: 0.8vw 0.6vw;
  border-radius: 0.8vw;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.top3-desktop .podium-block .medal-img { width: 6.5vw; height: 6.5vw; min-width: 44px; min-height: 44px; object-fit: contain; flex-shrink: 0; }
.top3-desktop .podium-block .podium-name { font-weight: 700; font-size: 1.25vw; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; text-align: center; }
.top3-desktop .podium-block .podium-date { font-size: 1.15vw; color: var(--display-muted-color); }
.top3-desktop .podium-block .podium-times { font-size: 1.3vw; font-family: monospace; color: var(--display-accent-color); }
/* Tablo sol tarafta, QR’ın yüksekliğinden başlar (ticker’ın üst kenarı QR kutusunun üst kenarıyla hizalı) */
.ticker-wrap {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  position: relative;
  background: transparent;
  margin-top: 0.8vw;
}
.ticker-table-head { flex-shrink: 0; }
.ticker-body-wrap {
  flex: 0 1 auto;
  overflow: visible;
  position: relative;
}
.list-ticker-inner { }
.ticker-table { width: 100%; border-collapse: collapse; table-layout: fixed; background: transparent; }
.ticker-table thead th {
  text-align: left;
  padding: 0.5vw 0.6vw;
  font-size: 1.2vw;
  color: var(--display-muted-color);
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  font-weight: 600;
}
.ticker-table td { padding: 0.45vw 0.6vw; border-top: 1px solid rgba(255,255,255,0.08); font-size: 1.25vw; color: var(--display-text-color); background: transparent; }
.ticker-table .time { font-family: monospace; color: var(--display-accent-color); font-size: 1.25vw; }
.desktop-right {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  z-index: 1;
}
/* QR: sağ alt, orantılı çok az büyük */
.desktop-qr-overlay {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  padding: 1.35rem 1.6rem;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 14px;
  box-sizing: border-box;
}
.desktop-qr-overlay .desktop-qr-copy { order: 1; text-align: center; }
.desktop-qr-img-wrap {
  order: 2;
  width: 230px;
  height: 230px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
}
.desktop-qr-overlay .desktop-qr-img-wrap img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.desktop-qr-link-title { font-size: 1.05rem; font-weight: 700; color: var(--display-title-color); margin-bottom: 0.3rem; }
.desktop-qr-link-text { font-size: 0.95rem; color: var(--display-text-color); word-break: break-all; max-width: 260px; }

/* Buzlu cam: arka plan blur’lu görünsün, yazılar okunaklı */
/* Buzlu cam: renkler arka plandan, beyaz katman yok */
.results-desktop.has-side .table-wrap { flex: 0 1 70%; }
.results-desktop.full-width .table-wrap { flex: 1 1 100%; min-width: 0; }
.table-wrap {
  min-width: 0; overflow: auto;
  background: rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  isolation: isolate;
}
.results-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.results-table .col-sira { width: 6%; }
.results-table .col-isim { width: 26%; }
.results-table .col-tarih { width: 20%; }
.results-table .col-best { width: 24%; }
.results-table .col-total { width: 24%; }
.results-table th {
  text-align: left; padding: 0.65rem 0.85rem;
  background: rgba(0, 0, 0, 0.08);
  color: var(--display-text-color); font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.results-table td {
  padding: 0.65rem 0.85rem; border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: clamp(1rem, 2vw, 1.35rem);
  background: rgba(0, 0, 0, 0.04);
  color: var(--display-text-color);
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.6);
}
.results-table td.date-cell { font-size: clamp(0.9rem, 1.2vw, 1rem); color: var(--display-muted-color); }
.results-desktop.full-width .results-table th { font-size: clamp(1.1rem, 2.2vw, 1.45rem); }
.results-desktop.full-width .results-table td { font-size: clamp(1.15rem, 2.5vw, 1.6rem); }
.results-desktop.full-width .results-table td.date-cell { font-size: clamp(1rem, 1.8vw, 1.2rem); }
.results-desktop.full-width .results-table .time { font-size: clamp(1.15rem, 2.5vw, 1.6rem); }
.results-table tr.p1 td { background: rgba(255, 215, 0, 0.2); color: #ffd700; text-shadow: 0 1px 3px rgba(0,0,0,0.95); }
.results-table tr.p2 td { background: rgba(192, 192, 192, 0.2); color: #e8e8e8; text-shadow: 0 1px 3px rgba(0,0,0,0.95); }
.results-table tr.p3 td { background: rgba(205, 127, 50, 0.2); color: #e8b886; text-shadow: 0 1px 3px rgba(0,0,0,0.95); }
.results-table .time { font-family: monospace; color: var(--display-accent-color); }

.side {
  flex: 0 1 30%; min-width: 12rem; overflow: auto;
  background: rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1rem;
  isolation: isolate;
}
.side h3 { margin: 0 0 0.75rem 0; font-size: 0.8rem; color: var(--display-muted-color); flex-shrink: 0; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.side-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; table-layout: fixed; }
.side-table th {
  text-align: left; padding: 0.5rem 0.55rem;
  background: rgba(0, 0, 0, 0.08);
  color: var(--display-text-color); font-size: 0.85rem; white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.side-table th:nth-child(1) { width: 14%; }
.side-table th:nth-child(2) { width: 54%; }
.side-table th:nth-child(3) { width: 32%; }
.side-table td {
  padding: 0.5rem 0.55rem; border-top: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden; text-overflow: ellipsis; font-size: 0.92rem;
  background: rgba(0, 0, 0, 0.04);
  color: var(--display-text-color);
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.6);
}
.side-table td:nth-child(1) { width: 14%; }
.side-table td:nth-child(2) { width: 54%; }
.side-table td:nth-child(3) { width: 32%; }
.side-table .time { font-family: monospace; color: var(--display-accent-color); }
#ads-view { position: fixed; inset: 0; z-index: 20; background: rgba(10,10,15,0.95); display: flex; align-items: center; justify-content: center; }
#ads-view img, #ads-view video { max-width: 100%; max-height: 100%; object-fit: contain; }
#ads-view video { width: 100%; height: 100%; }

/* Reklama giriş – yarış uyumlu (sağdan kayma + fade) */
#ads-view.ad-enter { animation: adEnter 0.45s ease-out forwards; }
@keyframes adEnter {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}

/* Reklamdan çıkış – yarışlara dönüş (sola kayma + fade) */
#ads-view.ad-exit { animation: adExit 0.4s ease-in forwards; }
@keyframes adExit {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-100%); }
}

/* Tam ekran butonu – tam ekranda gizlenir */
.fullscreen-btn {
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 50;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 8px;
  background: rgba(0,0,0,0.4);
  color: #fff;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
}
.fullscreen-btn:hover {
  background: rgba(0,0,0,0.6);
  border-color: rgba(255,255,255,0.5);
}
body.is-fullscreen .fullscreen-btn { display: none !important; }