/*
  Oyun masası (36-oyun.js): telsiz kartının araç satırındaki Oyun düğmesi (#radio-game) ve durumları (Davet,
  Oyun Sürüyor, Sıra Sizde), yayın sahnesinin game kipindeki masa (#cast[data-mode="game"] .cast-game): Masa Kur,
  lobi, davet, kişi listeleri ve durum çipleri, güven notu, onay satırı, sonuçlar, durum satırı ve eşitleme şeridi,
  telefonda sahne yüksekliği, birden çok oyun kayıtlıyken Oyun Seç listesi. Oyunun masa ortası uygulamanın kendi stil
  dosyasındadır (ör. renk.css).
  Kurallar: renkler yalnızca var(--...) ile, ölçüler rem, grid, flex gap, clamp, :is, :where, aspect-ratio ve
  inset kullanılmaz (aralık margin ile, konum top, right, bottom, left ile). z-index en çok 3.
*/

/* =========================================================
   1. Telsiz kartındaki Oyun düğmesi (radio.css .radio-tool)
   ========================================================= */

.game-tool.is-invited,
.game-tool.is-turn {
  border-style: solid;
  border-color: var(--live);
  background-color: var(--live-bg);
  color: var(--live);
}

.game-tool.is-busy {
  border-color: var(--line-strong);
  color: var(--text-2);
  cursor: default;
}

.game-tool[aria-expanded="true"] {
  border-style: solid;
  border-color: var(--accent);
  background-color: var(--surface-active);
}

.game-tool .radio-tool-count {
  background-color: var(--live);
  color: var(--on-accent);
  font-weight: 700;
}

/* =========================================================
   2. Masa alanı (#cast[data-mode="game"])
   ========================================================= */

.cast-panel.is-game .cast-screen {
  background-color: var(--surface-sunken);
}

.cast-game {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 1rem 1.25rem 1.25rem;
  color: var(--text);
  -webkit-overflow-scrolling: touch;
}

.game-body {
  max-width: 48rem;
  margin: 0 auto;
}

.game-section {
  margin: 0 0 1rem;
}

.game-h {
  margin: 0 0 0.5rem;
  color: var(--text-strong);
  font-size: var(--text-md);
  font-weight: var(--weight-strong);
}

.game-intro {
  margin: 0 0 1rem;
}

.game-intro-name {
  margin: 0;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
}

.game-intro-text {
  margin: 0.25rem 0 0;
  color: var(--text-2);
}

.game-lead {
  margin: 0 0 1rem;
  color: var(--text-strong);
  font-size: var(--text-lg);
  font-weight: var(--weight-strong);
}

.game-rules {
  margin: 0;
}

.game-rules-name {
  margin: 0;
  color: var(--text-strong);
  font-weight: var(--weight-strong);
}

.game-rules-hint {
  margin: 0.125rem 0 0;
  color: var(--text-2);
  font-size: var(--text-sm);
}

/* Oyun Seç (birden çok oyun kayıtlıyken): her oyun adı ve kısa açıklamasıyla bir düğme */
.game-picks {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.game-pick-item + .game-pick-item {
  margin-top: 0.5rem;
}

.game-pick {
  display: flex;
  align-items: flex-start;
  width: 100%;
  min-height: var(--target);
  padding: 0.75rem 0.875rem;
  border: var(--border-width) solid var(--line-strong);
  border-radius: var(--radius-card);
  background-color: var(--surface-2);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.game-pick:hover {
  border-color: var(--accent);
  background-color: var(--surface-hover);
}

.game-pick-icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.0625rem 0.625rem 0 0;
  color: var(--accent);
}

.game-pick-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.game-pick-name {
  color: var(--text-strong);
  font-weight: var(--weight-strong);
}

.game-pick-hint {
  margin-top: 0.125rem;
  color: var(--text-2);
  font-size: var(--text-sm);
}

/* Kişi listeleri: koltuklar ve odadakiler */
.game-people {
  margin: 0;
  padding: 0;
  list-style: none;
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-card);
  background-color: var(--surface-1);
}

.game-person {
  display: flex;
  align-items: center;
  min-height: var(--target);
  padding: 0.5rem 0.75rem;
}

.game-person + .game-person {
  border-top: var(--border-width) solid var(--line);
}

.game-person-avatar {
  flex: none;
  margin-right: 0.625rem;
}

.game-person-text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.game-person-name {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  color: var(--text-strong);
  font-weight: var(--weight-strong);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.game-crown {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-left: 0.375rem;
  color: var(--warn);
}

.game-person-reason {
  margin-top: 0.125rem;
  color: var(--text-2);
  font-size: var(--text-sm);
}

.game-remove {
  flex: none;
  margin-left: 0.5rem;
}

/* Durum çipleri (yalnızca kurpiyerde): renk tek başına anlam taşımaz, her çipte yazı vardır */
.game-chip {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 1.75rem;
  margin-left: 0.5rem;
  padding: 0 0.625rem;
  border: var(--border-width) solid var(--line-strong);
  border-radius: var(--radius-pill);
  background-color: var(--surface-3);
  color: var(--text-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  white-space: nowrap;
}

.game-chip.is-dealer,
.game-chip.is-joined {
  border-color: var(--live);
  background-color: var(--live-bg);
  color: var(--live);
}

.game-chip.is-waiting,
.game-chip.is-away,
.game-chip.is-offline {
  border-style: dashed;
  border-color: var(--warn-line);
  background-color: var(--warn-bg);
  color: var(--warn);
}

.game-chip.is-declined,
.game-chip.is-full {
  color: var(--text-3);
}

.game-chip.is-cannot,
.game-chip.is-blocked,
.game-chip.is-keys {
  border-color: var(--danger);
  background-color: var(--danger-bg);
  color: var(--danger);
}

/* Notlar: güven notu, bekleme, ipucu, anahtar sorunu ve hata */
.game-note {
  display: flex;
  align-items: flex-start;
  margin: 0 0 1rem;
  color: var(--text-2);
  font-size: var(--text-sm);
}

.game-note-icon {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0.0625rem 0.5rem 0 0;
}

.game-note-text {
  min-width: 0;
}

.game-trust {
  padding: 0.625rem 0.75rem;
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-control);
  background-color: var(--surface-1);
  color: var(--text);
}

.game-trust .game-note-icon {
  color: var(--accent-text);
}

.game-alert,
.game-error {
  padding: 0.625rem 0.75rem;
  border: var(--border-width) solid var(--danger);
  border-radius: var(--radius-control);
  background-color: var(--danger-bg);
  color: var(--text);
}

.game-alert .game-note-icon,
.game-error .game-note-icon {
  color: var(--danger);
}

.game-ended {
  color: var(--text-strong);
  font-size: var(--text-md);
}

.game-wait {
  color: var(--text);
}

.game-locked .game-note-icon,
.game-share-warn .game-note-icon {
  color: var(--warn);
}

/* Düğme satırı: ikincil solda, birincil sağda */
.game-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin: 0.5rem -0.25rem 0;
}

.game-actions > .button {
  margin: 0.25rem;
}

.game-actions > .button[aria-disabled="true"] {
  cursor: default;
  opacity: 0.55;
}

/* Onay satırı */
.game-confirm {
  margin: 0.5rem 0 0;
  padding: 0.75rem;
  border: var(--border-width) solid var(--danger);
  border-radius: var(--radius-card);
  background-color: var(--danger-bg);
}

.game-confirm-text {
  margin: 0;
  color: var(--text-strong);
  font-weight: var(--weight-strong);
}

/* =========================================================
   3. Oyun sürerken: durum satırı, eşitleme şeridi, alt satır ve sonuçlar
   ========================================================= */

.game-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 0.75rem;
}

.game-status > * {
  margin: 0 0.5rem 0.25rem 0;
}

.game-status-turn {
  color: var(--text-strong);
  font-weight: var(--weight-strong);
}

.game-status-turn.is-me {
  padding: 0.125rem 0.625rem;
  border-radius: var(--radius-pill);
  background-color: var(--live-bg);
  color: var(--live);
}

.game-status-chip {
  padding: 0.125rem 0.625rem;
  border: var(--border-width) solid var(--line-strong);
  border-radius: var(--radius-pill);
  color: var(--text-2);
  font-size: var(--text-sm);
}

.game-status .game-note {
  margin-bottom: 0.25rem;
}

.game-sync {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border-radius: var(--radius-pill);
  background-color: var(--surface-3);
  color: var(--text-2);
  font-size: var(--text-sm);
}

.game-sync.is-slow {
  background-color: var(--warn-bg);
  color: var(--warn);
}

.game-sync-dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.375rem;
  border-radius: 50%;
  background-color: currentColor;
  -webkit-animation: game-pulse 1.2s ease-in-out infinite alternate;
  animation: game-pulse 1.2s ease-in-out infinite alternate;
}

@-webkit-keyframes game-pulse {
  0% { opacity: 1; }
  100% { opacity: 0.3; }
}

@keyframes game-pulse {
  0% { opacity: 1; }
  100% { opacity: 0.3; }
}

.game-app {
  position: relative;
  z-index: 1;
}

.game-foot {
  margin: 1rem 0 0;
  padding: 0.75rem 0 0;
  border-top: var(--border-width) solid var(--line);
}

.game-trust-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.game-trust-chip {
  display: inline-flex;
  align-items: center;
  margin: 0 0.5rem 0.25rem 0;
  padding: 0.125rem 0.625rem;
  border: var(--border-width) solid var(--line-strong);
  border-radius: var(--radius-pill);
  color: var(--text-2);
  font-size: var(--text-sm);
}

.game-trust-chip .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.375rem;
  color: var(--accent-text);
}

.game-trust-more,
.game-seats-more {
  margin: 0 0.5rem 0.25rem 0;
}

/* Kurpiyerin oyun sırasındaki koltuk listesi (Koltuklar düğmesiyle açılır) */
.game-seats-detail {
  margin: 0.5rem 0 0;
}

.game-seats-detail .game-section {
  margin: 0;
}

.game-trust-detail {
  margin: 0.5rem 0 0;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-control);
  background-color: var(--surface-1);
}

.game-trust-text {
  margin: 0;
  color: var(--text);
  font-size: var(--text-sm);
}

.game-trust-text + .game-trust-text {
  margin-top: 0.5rem;
}

.game-results-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-card);
  background-color: var(--surface-1);
}

.game-winner {
  margin: 0 0 0.5rem;
  color: var(--text-strong);
  font-size: var(--text-lg);
  font-weight: var(--weight-strong);
}

.game-winner.is-none {
  color: var(--text-2);
}

.game-results-reason {
  margin: 0 0 0.5rem;
  color: var(--text-2);
}

.game-result {
  display: flex;
  align-items: center;
  min-height: var(--target);
  padding: 0.375rem 0.75rem;
}

.game-result + .game-result {
  border-top: var(--border-width) solid var(--line);
}

.game-result.is-winner {
  background-color: var(--live-bg);
}

.game-result-rank {
  flex: none;
  width: 1.75rem;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.game-result-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--text-strong);
  font-weight: var(--weight-strong);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.game-result-meta {
  flex: none;
  margin-left: 0.5rem;
  color: var(--text-2);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   4. Dar ekran (759 px ve altı, telefon)
   ========================================================= */

@media (max-width: 759px) {
  /* Düğmenin etiketi görsel olarak gizlenir (erişilebilir adı korunur), simge ve rozet kalır */
  .game-tool .radio-tool-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .game-tool > .radio-tool-icon {
    margin-right: 0;
  }

  /* Etiketsiz düğme büyümez, yalnızca simgesi ve rozeti kadar yer alır: kalan genişlik etiketli araçlara (Büyüt,
     Telsiz DJ) kalır (radio.css .radio-tools) */
  .radio-tools > .game-tool {
    flex: 0 0 auto;
  }

  /* Sohbet daraltılmışken (oyunda varsayılan) sahne cast.css'teki 16:9 yükseklik yerine kalan yüksekliği alır, masa
     .cast-game içinde kayar. Alt sınır küçüktür: büyük bir sabit alt sınır (ör. 20rem) küçük telefonda ve büyük yazı
     boyutunda paneli taşırır, başlık (Küçült, Tam Ekran) panelin kırpılan üst kısmında kalırdı. Sohbet açıkken
     cast.css'teki 16:9 yükseklik geçerlidir. Özgüllük cast.css'ten büyüktür, bu dosya sonra yüklenir. */
  body[data-cast="live"][data-cast-mode="game"][data-cast-chat="closed"] .cast-screen {
    height: auto;
    flex: 1 1 auto;
    min-height: 8rem;
  }

  .cast-game {
    padding: 0.75rem 0.75rem 1rem;
  }

  .game-person {
    flex-wrap: wrap;
  }

  .game-actions {
    justify-content: flex-start;
  }

  .game-actions > .button {
    flex: 1 1 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .game-sync-dot {
    -webkit-animation: none;
    animation: none;
  }
}