/* ==========================================================================
   Su Yolu — aile oyunu
   Tahta laptopta, kumanda telefon ve tablette.
   ========================================================================== */

/* --------------------------------------------------------------- KUMANDA */

.hs-kumanda__kod {
  font-family: monospace;
  font-size: 15px;
  letter-spacing: 3px;
  color: #fff;
  background: rgba(255, 255, 255, .2);
  padding: 6px 10px;
  border-radius: var(--hs-radius-nav);
}

.hs-kumanda__ben {
  display: flex;
  align-items: center;
  gap: var(--hs-space-5);
  padding: var(--hs-space-5) var(--hs-space-7);
  background: var(--hs-gradient-header);
  color: #fff;
  flex-shrink: 0;
}

.hs-kumanda__piyon {
  width: 54px;
  height: 54px;
  border-radius: var(--hs-radius-card);
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, .85);
  flex-shrink: 0;
}

.hs-kumanda__piyon--bos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .2);
  font-size: 26px;
}

.hs-kumanda__ad { font-size: 17px; font-weight: 600; }
.hs-kumanda__ben .hs-text-meta { color: rgba(255, 255, 255, .8); }

.hs-kumanda__sayac {
  font-size: 15px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: end;
  flex-shrink: 0;
}

.hs-kumanda__liste { display: flex; flex-direction: column; gap: var(--hs-space-3); }

.hs-kumanda__oyuncu {
  display: flex;
  align-items: center;
  gap: var(--hs-space-4);
  padding: var(--hs-space-3);
  border-radius: var(--hs-radius-card);
  background: var(--hs-divider-3);
}

.hs-kumanda__oyuncu img,
.hs-kumanda__oyuncu .hs-kumanda__piyon--bos {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  object-fit: cover;
  border: 0;
}

.hs-kumanda__oyuncu b {
  margin-inline-start: auto;
  font-size: var(--hs-text-caption);
  color: var(--hs-blue);
}

.hs-kumanda__kartlar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--hs-space-3);
  padding: var(--hs-space-5);
}

.hs-kumanda__kart {
  min-height: 56px;
  border: 2px solid var(--hs-divider);
  border-radius: var(--hs-radius-card);
  background: var(--hs-surface);
  font-size: var(--hs-text-body-sm);
  font-weight: 600;
  color: var(--hs-ink);
}

.hs-kumanda__kart:disabled { opacity: .5; }

/* Tablette iki sütun yerine dört, kartlar sürekli görünür */
@media (min-width: 600px) {
  .hs-kumanda__kartlar { grid-template-columns: repeat(4, 1fr); }
}

/* ----------------------------------------------------------------- TAHTA */

.hs-tahta {
  display: grid;
  grid-template-columns: 1fr 280px;
  grid-template-rows: auto 1fr;
  grid-template-areas: 'ust ust' 'govde panel';
  width: 100%;
  height: 100svh;
  background: var(--hs-background);
}

.hs-tahta__ust {
  grid-area: ust;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hs-space-6);
  padding: var(--hs-space-6) var(--hs-space-9);
  background: var(--hs-gradient-header);
  color: #fff;
}

.hs-tahta__ust .hs-text-caption { color: rgba(255, 255, 255, .75); }

.hs-tahta__baslik { font-size: 28px; margin: 2px 0; font-weight: 700; }

.hs-tahta__deger {
  font-size: var(--hs-text-body-sm);
  color: rgba(255, 255, 255, .85);
}

.hs-tahta__ustsag {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--hs-space-4);
}

.hs-tahta__tur {
  font-size: var(--hs-text-body-sm);
  background: rgba(255, 255, 255, .2);
  padding: 8px 14px;
  border-radius: var(--hs-radius-pill);
}

/*
 * Başlıktaki düğmeler koyu gradyan üzerinde durur; .hs-btn--outline'ın beyaz
 * zeminiyle beyaz yazı görünmez oluyordu. Burada saydamlaştırılıyor.
 */
.hs-tahta__ustsag .hs-btn--outline {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
  white-space: nowrap;
}

.hs-tahta__ustsag .hs-btn--outline:hover {
  background: rgba(255, 255, 255, .26);
}

.hs-tahta__govde { grid-area: govde; position: relative; overflow: hidden; }

.hs-tahta__harita {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
}

.hs-tahta__yertutucu { color: var(--hs-muted); font-size: var(--hs-text-body); }

/* Lobi */

.hs-tahta__lobi {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: var(--hs-space-9);
  padding: var(--hs-space-9);
  align-content: start;
}

.hs-tahta__kod-kutu {
  background: var(--hs-surface);
  border-radius: var(--hs-radius-card);
  padding: var(--hs-space-8);
  box-shadow: var(--hs-shadow-2);
  text-align: center;
}

.hs-tahta__kod {
  font-family: monospace;
  font-size: 52px;
  font-weight: 700;
  letter-spacing: 10px;
  color: var(--hs-blue);
  margin: var(--hs-space-4) 0;
}

.hs-tahta__link {
  font-size: var(--hs-text-caption);
  color: var(--hs-muted);
  word-break: break-all;
  margin: 0;
}

.hs-tahta__piyonlar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--hs-space-4);
}

.hs-tahta__piyon {
  display: flex;
  align-items: center;
  gap: var(--hs-space-4);
  padding: var(--hs-space-4);
  background: var(--hs-surface);
  border-radius: var(--hs-radius-card);
  box-shadow: var(--hs-shadow-1);
}

.hs-tahta__piyon img,
.hs-tahta__piyon--bos {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--hs-divider-3);
  font-size: 24px;
}

.hs-tahta__piyon b { display: block; font-size: var(--hs-text-body-sm); }
.hs-tahta__piyon span { font-size: var(--hs-text-caption); color: var(--hs-muted); }

/* Yan panel */

.hs-tahta__panel {
  grid-area: panel;
  background: var(--hs-surface);
  border-inline-start: 1px solid var(--hs-divider);
  padding: var(--hs-space-7);
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-6);
  overflow-y: auto;
}

.hs-tahta__skor { display: flex; flex-direction: column; gap: var(--hs-space-3); }

.hs-tahta__skor-satir {
  display: flex;
  align-items: center;
  gap: var(--hs-space-3);
  font-size: var(--hs-text-body-sm);
}

.hs-tahta__skor-ad { flex: 1; font-weight: 600; }
.hs-tahta__skor-deger { font-variant-numeric: tabular-nums; color: var(--hs-muted); }

.hs-tahta__gunluk {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid var(--hs-divider-3);
  padding-top: var(--hs-space-5);
}

.hs-tahta__gunluk-satir { font-size: var(--hs-text-caption); color: var(--hs-muted); }

/*
 * Tam ekran: laptop masanın ortasında duracak, iki metre öteden okunmalı.
 * Yan panel daralır, yazılar bir kademe büyür.
 */
body.hs-tamekran .hs-tahta { grid-template-columns: 1fr 320px; }
body.hs-tamekran .hs-tahta__baslik { font-size: 36px; }
body.hs-tamekran .hs-tahta__kod { font-size: 68px; letter-spacing: 12px; }
body.hs-tamekran .hs-tahta__skor-satir { font-size: var(--hs-text-body); }
body.hs-tamekran .hs-tahta__gunluk-satir { font-size: var(--hs-text-body-sm); }

/* Dar ekranda tahta tek sütuna iner (nadir; tahta laptop içindir) */
@media (max-width: 900px) {
  .hs-tahta {
    grid-template-columns: 1fr;
    grid-template-areas: 'ust' 'govde' 'panel';
    grid-template-rows: auto 1fr auto;
  }

  .hs-tahta__lobi { grid-template-columns: 1fr; }
  .hs-tahta__panel { border-inline-start: 0; border-top: 1px solid var(--hs-divider); }
}

/* ------------------------------------------------ Tahta — Monopoly düzeni */

.hs-tahta__harita {
  position: relative;
  box-sizing: border-box;
  padding: var(--hs-space-4);
  /*
   * Flex, ızgaraya tercih edildi: place-items:center ile kurulan otomatik
   * satırda çocuğun yüzde yüksekliği belirsiz kalıyor ve tahta taşıyordu.
   */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  min-width: 0;
  /* Palet görselindeki koyu zemin */
  background: #1E1E21;
}

/*
 * 22 kutu, 6 sütun × 7 satırlık ızgaranın çevresinde halka oluşturur.
 * Kare bir tahta olsun diye en-boy oranı sabit; ekranın kısa kenarına oturur.
 */
.hs-tahta__izgara {
  display: grid;
  grid-template-columns: 1.3fr repeat(6, 1fr) 1.3fr;
  grid-template-rows: 1.3fr repeat(3, 1fr) 1.3fr;
  gap: 3px;
  /*
   * Tahta kabının kendi ölçüsüne oturur — görünüm yüksekliğinden hesaplamak
   * kırılgan, başlığın ve kenar boşluklarının payını hesaba katmıyordu.
   * max-height/max-width ikisi birden konunca hangi kenar darsa ona sığar.
   */
  aspect-ratio: 8 / 5;
  flex: 0 0 auto;

  /*
   * Kutu içeriği tahtanın ölçüsüyle birlikte büyür.
   * Sabit piksel verilince büyük ekranda minicik kalıyordu; min() ile hem
   * yükseklik hem genişlik sınırı gözetilir, tahta hangisi darsa ona uyar.
   */
  font-size: clamp(11px, min(2vh, 1.25vw), 22px);
  height: 100%;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  padding: 7px;
  background: #26262A;
  border: 3px solid #34343A;
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .06),
    0 10px 34px rgba(0, 0, 0, .45);
}

/* ---- Kutu ---- */

.hs-kutu {
  position: relative;
  /* Baskılı karton hissi: hafif dikey gradyan ve iç çizgi */
  background: linear-gradient(#FDFBF6, #F2EEE4);
  border: 1px solid #151518;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 3px;
  min-width: 0;
  overflow: hidden;
}

/*
 * Renk şeridi Monopoly'deki gibi kutunun DIŞ kenarında durur — yani tahtanın
 * kenarına bakan tarafta. Hangi kenarda olduğuna göre yeri değişir.
 */
/*
 * Renk şeridi — Monopoly'deki gibi kutunun dış kenarında, altında ince bir
 * ayırıcı çizgiyle. Çizgi olmayınca şerit kutuya "boyanmış" gibi duruyordu.
 */
.hs-kutu__serit {
  position: absolute;
  background: var(--kutu-renk);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

.hs-kutu--alt .hs-kutu__serit { border-top: 1px solid #151518; }
.hs-kutu--ust .hs-kutu__serit { border-bottom: 1px solid #151518; }
.hs-kutu--sol .hs-kutu__serit { border-inline-end: 1px solid #151518; }
.hs-kutu--sag .hs-kutu__serit { border-inline-start: 1px solid #151518; }


.hs-kutu--alt .hs-kutu__serit { inset: auto 0 0 0; height: 22%; }
.hs-kutu--ust .hs-kutu__serit { inset: 0 0 auto 0; height: 22%; }
.hs-kutu--sol .hs-kutu__serit { inset: 0 auto 0 0; width: 22%; }
.hs-kutu--sag .hs-kutu__serit { inset: 0 0 0 auto; width: 22%; }

/* Şerit yer kaplasın, içerik üstüne binmesin */
.hs-kutu--alt { padding-bottom: 24%; }
.hs-kutu--ust { padding-top: 24%; }
.hs-kutu--sol { padding-inline-start: 24%; }
.hs-kutu--sag { padding-inline-end: 24%; }

.hs-kutu__ikon {
  font-size: 1.45em;
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(16, 24, 48, .18));
}

/* Düz "yol" kutularının simgesi yok; boş kutu aralık açmasın */
.hs-kutu__ikon:empty { display: none; }

/*
 * Kutu adı: büyük harf ve hafif harf aralığı — masa oyunu tahtalarının
 * kendi tipografisi bu ve küçük punto da olsa okunurluğu artırıyor.
 */
.hs-kutu__ad {
  font-size: 0.88em;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: .02em;
  text-align: center;
  text-transform: uppercase;
  color: #33302A;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Köşeler büyük ve şeritsiz — Monopoly'deki BAŞLA / HAPİS kareleri gibi */
/* Köşeler: şeritsiz, hafif farklı zemin — tahtanın çapaları */
.hs-kutu--kose {
  justify-content: center;
  gap: 3px;
  padding: 4px;
  background: linear-gradient(#FFFEFB, #EDE7DA);
}

.hs-kutu--kose .hs-kutu__serit { display: none; }
/* Köşeler tahtanın çapaları: daha büyük simge, daha kalın ad */
.hs-kutu--kose .hs-kutu__ikon { font-size: 2.3em; }

.hs-kutu--kose .hs-kutu__ad {
  font-size: 1.02em;
  font-weight: 700;
  letter-spacing: .04em;
}

/* ---- Piyonlar kutunun içinde ---- */

/*
 * Piyonlar tahtanın asıl kahramanı — kutuda görünür olmalılar. Kalabalık
 * kutuda hafifçe üst üste binerler, küçülmezler.
 */
.hs-kutu__piyonlar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  min-height: 0;
}

.hs-kutu__piyon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #fff;
  box-shadow: 0 2px 5px rgba(16, 24, 48, .55);
  background: var(--hs-divider-3);
  display: grid;
  place-items: center;
  font-size: 18px;
  flex-shrink: 0;
}

/* Üçten fazlaysa üst üste binerler ki kutudan taşmasınlar */
.hs-kutu__piyonlar > .hs-kutu__piyon:nth-child(n + 4) { margin-inline-start: -16px; }

.hs-kutu__piyon img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Ortadaki alan: bölge görseli ve adı ---- */

.hs-tahta__orta {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #26262A;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.hs-tahta__orta-gorsel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hs-tahta__orta-yazi {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 18px;
  border-radius: 8px;
  background: rgba(16, 24, 48, .55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  rotate: -6deg;
}

.hs-tahta__orta-baslik {
  font-size: clamp(18px, 2.6vw, 30px);
  font-weight: 700;
  letter-spacing: 2px;
  color: #fff;
  text-transform: uppercase;
}

.hs-tahta__orta-deger {
  font-size: clamp(11px, 1.3vw, 14px);
  letter-spacing: 3px;
  color: rgba(255, 255, 255, .85);
  text-transform: uppercase;
}

.hs-tahta__gun { font-weight: 400; opacity: .85; margin-inline-start: 4px; }

/* Tam ekranda tahta ve yazılar büyür */
/* Tam ekranda kap zaten büyür; tahta onunla birlikte büyür. */
/* Tam ekranda tahta büyüdüğü için yazılar da kendiliğinden büyür. */
body.hs-tamekran .hs-kutu__piyon { width: 46px; height: 46px; font-size: 22px; }

/* ------------------------------------------------------- Meydan okuma */

.hs-meydan__sayac {
  font-size: 28px;
  font-weight: 700;
  color: var(--hs-orange);
  font-variant-numeric: tabular-nums;
}

.hs-meydan__secenekler {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--hs-space-4);
  margin-bottom: var(--hs-space-5);
}

.hs-meydan__secenek {
  min-height: 72px;
  border: 2px solid var(--hs-divider);
  border-radius: var(--hs-radius-card);
  background: var(--hs-surface);
  font-size: 19px;
  font-weight: 600;
  color: var(--hs-ink);
  padding: var(--hs-space-4);
}

.hs-meydan__secenek:active { background: var(--hs-divider-3); }
.hs-meydan__secenek:focus-visible { outline: 3px solid var(--hs-blue); outline-offset: 2px; }

/* Tablette şıklar tek sırada ve daha ferah */
@media (min-width: 600px) {
  .hs-meydan__secenekler { grid-template-columns: repeat(4, 1fr); }
  .hs-meydan__secenek { min-height: 88px; font-size: 21px; }
}

/* ------------------------------------------------------------- Karar */

.hs-karar__secenekler {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-4);
  margin-bottom: var(--hs-space-5);
}

/* Tablette yan yana */
@media (min-width: 600px) {
  .hs-karar__secenekler { flex-direction: row; }
  .hs-karar__secenekler .hs-btn { flex: 1; }
}

/* ------------------------------------------------- Sayaç ve kart simgeleri */

.hs-sayac { display: inline-flex; align-items: center; gap: 4px; }

.hs-sayac__ikon {
  width: 1.1em;
  height: 1.1em;
  object-fit: contain;
  vertical-align: -.15em;
}

.hs-kumanda__kart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 88px;
}

.hs-kumanda__kart img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

@media (min-width: 600px) {
  .hs-kumanda__kart { min-height: 104px; }
  .hs-kumanda__kart img { width: 42px; height: 42px; }
}

/* Karar ekranındaki soru şıkları — meydan okumadakiyle aynı dil */
.hs-karar__siklar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--hs-space-4);
  margin-bottom: var(--hs-space-4);
}

@media (min-width: 600px) {
  .hs-karar__siklar { grid-template-columns: repeat(4, 1fr); }
}

/* ---------------------------------------------------------------------------
   Bölge sahnesi — açılış ve kapanış
   Yalnızca tahtada görünür: laptop ekranı ortak, biri sesli okur.
   --------------------------------------------------------------------------- */

.hs-sahne {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #10151f;
    overflow: hidden;
}

.hs-sahne__gorsel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Metin görselin üstünde okunur kalmalı; perde alt yarıyı koyulaştırır. */
.hs-sahne__perde {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(16, 21, 31, .35) 0%,
        rgba(16, 21, 31, .72) 45%,
        rgba(16, 21, 31, .94) 100%
    );
}

.hs-sahne__icerik {
    position: relative;
    width: min(880px, 88vw);
    max-height: 88vh;
    overflow-y: auto;
    text-align: center;
    color: #fff;
    padding: 24px;
}

.hs-sahne__ust {
    font-size: 13px;
    letter-spacing: .18em;
    text-transform: uppercase;
    opacity: .75;
    margin-bottom: 10px;
}

.hs-sahne__baslik {
    margin: 0;
    font-size: clamp(30px, 5vw, 54px);
    line-height: 1.1;
    letter-spacing: .01em;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}

.hs-sahne__deger {
    margin-top: 8px;
    font-size: 14px;
    letter-spacing: .22em;
    text-transform: uppercase;
    opacity: .8;
}

.hs-sahne__metin {
    margin: 22px auto 26px;
    max-width: 62ch;
    font-size: clamp(16px, 1.7vw, 21px);
    line-height: 1.75;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}

.hs-sahne__buton {
    min-height: 52px;
    padding: 0 34px;
    font-size: 17px;
}

/* Tam ekranda masanın ortasındaki laptoptan okunacak: her şey büyür. */
.hs-tamekran .hs-sahne__baslik { font-size: clamp(40px, 6vw, 72px); }
.hs-tamekran .hs-sahne__metin { font-size: clamp(19px, 2.1vw, 27px); }