:root {
  --ok: #2ecc71;
  /* yeşil */
  --no: #e74c3c;
  /* kırmızı */
  --bg: #0e1116;
  --card: #171b22;
  --muted: #AAB2C0;
  --text: #eaeef6;
  --line: #232a35;
  --mid: #f39c12;
  /* turuncu */
}

* {
  box-sizing: border-box
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, Segoe UI, Roboto, Arial
}

.app {
  max-width: 920px;
  margin: 32px auto;
  padding: 16px;
  margin-top: -10px;
  margin-bottom: 0px;
}

h1 {
  margin: 0 0 16px
}

.video-wrap {
  background: #000;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 10px;
  width: 80%;
  margin-inline: auto;
}

video {
  display: block;
  width: 100%;
  height: auto
}

.search-area {
  position: relative;
  margin-bottom: 16px
}

label {
  display: block;
  margin: 8px 0 6px;
  color: var(--muted);
  font-size: 14px
}

input#playerSearch {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
}

input:focus {
  outline: 1px solid #24f0a2;
  /* istediğin renge göre değiştir */
}

.suggestions {
  position: absolute;
  left: 0;
  right: 0;
  top: 80px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px;
  margin: 6px 0 0;
  list-style: none;
  max-height: 280px;
  overflow: auto;
  z-index: 10
}

.suggestions li {
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  gap: 10px;
  align-items: center;
  /*justify-content:space-between*/
}

.suggestions li:hover {
  background: #202633
}

.suggestions em {
  color: var(--muted);
  font-style: normal;
  font-size: 12px
}

.flag {
  width: 1.6em
}

.guesses {
  margin-top: 12px;
  overflow: auto;
}

.guesses ::-webkit-scrollbar {
  display: none;
}

.guesses-head,
.guess-row {
  display: grid;
  grid-template-columns: 1.2fr 2fr 1fr 0.7fr 2fr;
  gap: 1px;
  align-items: stretch
}

.guesses-head {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 6px
}

.guess-row {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--card);
  margin-bottom: 8px
}

.guess-row>span {
  padding: 10px 12px
}

.guess-row>span.ok {
  background: color-mix(in oklab, var(--ok) 18%, transparent);
  /*border-left: 3px solid var(--ok)*/
  min-width: 100px;
}

.guess-row>span.no {
  background: color-mix(in oklab, var(--no) 18%, transparent);
  /*border-left: 3px solid var(--no)*/
  min-width: 100px;
}

.guess-row>span.maybe {
  background: color-mix(in oklab, var(--mid) 18%, transparent);
  /*border-left:3px solid var(--mid)*/
  ;
  min-width: 100px;
}

.row-correct {
  box-shadow: 0 0 0 2px var(--ok) inset
}

.row-wrong {
  box-shadow: 0 0 0 2px transparent inset
}

.guesses-head>span {
  min-width: 100px;
  max-width: 100px;
}


/* WebKit */
video::-webkit-media-controls-timeline,
video::-webkit-media-controls-mute-button,
video::-webkit-media-controls-volume-slider,
video::-webkit-media-controls-time-remaining-display,
video::-webkit-media-controls-current-time-display,
/*video::-webkit-media-controls-fullscreen-button,*/
video::-webkit-media-controls-seek-back-button,
video::-webkit-media-controls-seek-forward-button,
video::-webkit-media-controls-playback-rate-button {
  display: none !important;
}

#logo_wrapper {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

#footer {
  position: relative;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  padding: 12px;
  flex-wrap: wrap;
}

#copyright {
  display: flex;
  justify-content: center;
  font-size: 12px;
  font-size: 12px;
  color: #777777;
  padding-bottom: 30px;
}


/* Tüm sayfa veya belirli bir div için */
::-webkit-scrollbar {
  width: 6px;
  /* scroll çubuğunun kalınlığı */
  height: 6px;
}

/* Scroll arka planı (track) — istersen tamamen kaldırabilirsin */
::-webkit-scrollbar-track {
  background: transparent;
  /* arka plan görünmez */
}

/* Scroll çubuğu (thumb) */
::-webkit-scrollbar-thumb {
  background-color: #24f0a2;
  /* yeşil ton */
  border-radius: 4px;
}

/* Hover efekti (isteğe bağlı) */
::-webkit-scrollbar-thumb:hover {
  background-color: #7dfccb;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}

/* Ekranı kaplayan overlay (örnek) */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s;
}

.overlay:target {
  visibility: visible;
  opacity: 1;
}

/* Popup kutusu */
.popup {
  width: min(800px, 90vw);
  max-height: 80dvh;
  /* kritik: ebeveyn yüksekliği tanımlı */
  margin: 90px auto;
  padding: 20px 24px;
  background: #171a21;
  border-radius: 12px;

  display: flex;
  /* kritik: içeriği sütun yap */
  flex-direction: column;
  position: relative;
}

/* Başlık/close üstte kalsın */
.popup h1 {
  margin: 0 32px 12px 0;
}

/* İçerik alanı kaydırılabilir */
.popup .content {
  overflow: auto;
  /* kritik: scroll */
  flex: 1 1 auto;
  /* boşluk kadar uzasın */
  min-height: 0;
  /* flex-child scroll için gerekli */
}

/* Kapat butonu */
.popup .close {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 30px;
  color: #aab2c0;
  text-decoration: none;
}


.popup a.enhanced {
  text-decoration: none;
  color: #24f0a2;
  transition: all 0.3s ease-out;
  padding: .2em;
  margin: -.2em;
}

.popup a.enhanced:hover {
  color: #1bb47a;
}

div.container {
  text-align: center;
  margin: 0px 5px 0px 5px;
}

div.container a {
  display: inline-flex;
  background-color: #171b22;
  color: #aab2c0;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 7px;
  -moz-transition: 0.1s;
  -webkit-transition: 0.1s;
  transition: 0.1s;
  position: relative;
  align-items: center;
  height: 40px;
}

div.container a:hover {
  background-color: #2b313a;
  border-bottom-width: 0;
}



@media (max-width: 1200px) {
  .popup {
    width: 80%;
  }
}

@media (max-width: 545px) {

  /*#footer { flex-direction: column; }*/
  div.container {
    margin-right: 0px;
    margin-top: 5px;
  }

  .video-wrap {
    width: 100%;
  }

  .guess-row {
    display: inline-grid;
  }
}


.hintText {
  text-align: center;
  /* tüm içerikleri ortalar */
  /*margin-top: 10px;*/
  padding: 6px;
  background: #000000;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 16px;
  width: 80%;
  margin-inline: auto;
}

.hintText details summary {
  list-style: none;
  /* üçgeni kaldırır */
  font-size: 0.9em;
  /* yazıyı biraz küçültür */
  cursor: pointer;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hintText details summary::-webkit-details-marker {
  display: none;
  /* Chrome/Safari için üçgeni gizler */
}

.hintText p {
  font-size: 0.85em;
  /* ipucu metnini daha da küçük yapar */
  color: var(--muted);
}

/* içerik (p) kısmı animasyonlu */
.hintText details p {
  font-size: 0.85em;
  text-align: center;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.4s ease;
}

/* details açıkken içerik görünür hale gelsin */
.hintText details[open] p {
  max-height: 50px;
  /* içerik uzunluğuna göre artırabilirsin */
  opacity: 1;
}

.countdown {
  margin: 6px 0 6px;
  font: 14px/1.4 system-ui, Segoe UI, Roboto, Arial;
  text-align: center;
  font-size: 0.9em;
  color: var(--muted);
}

.countdown strong {
  color: #eaeef6;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.patreon_button a {
  background-color: #f25a2c !important;
  color: #000 !important;
}

.patreon_button a:hover {
  background-color: #cf4c24 !important;
}

.support {
  background: var(--bg);
  margin-top: 20px;
  padding: 16px;
  border-radius: 12px;
}

.supportPopup {
  width: min(500px, 90vw) !important;
}

.ad {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.ad-general {
  display: flex;
}

/* Mobilde (örnek: 768px altı) büyük reklamı gizle */
@media (max-width: 768px) {
  .ad-general {
    display: none;
  }
}

.twitter {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.left-frame-count {
  background-color: #db143c;
  color: #ffffffb0;
  font-size: 12px;
  padding: 1px 6px;
  display: inline-block;
  border-radius: 2px;
  right: -3px;
  position: absolute;
  top: -7px;
}