/* Keyfi 101 — tasarım belirteçleri, ölçekleme, üst çubuk */

:root {
  /* Tasarım tuvali: tüm koordinatlar bu ölçüye göre yazılır, ekrana
     tek bir scale() ile sığdırılır. Görseldeki oranlar böyle korunur.

     Buradaki ölçü ASGARİdir, sabit değil: js/ui.js ölçekten sonra artan
     yeri tuvale ekler (#board üzerinde bu iki değişkeni ezer), böylece
     tuval pencereyi her zaman tam kaplar — kenarda siyah bant kalmaz.
     Pencere genişken fazlalık ene, uzunken boya gider. */
  --design-w: 1904px;
  --design-h: 1070px;

  /* Kaydırma çubukları da temanın parçası. `scrollbar-color` kalıtsaldır:
     burada bir kez verilince her kaydırılan kutuda geçerli. Genişlik
     kalıtsal değil, o yüzden kutuların kendisinde duruyor.
     `color-scheme: dark` tarayıcının kendi çizdiği çubuğu da koyultur;
     Chrome, `scrollbar-width` verilen bir öğede ::-webkit-scrollbar
     kurallarını yok saydığı için renk standart özellikten geliyor. */
  color-scheme: dark;
  scrollbar-color: rgba(215, 165, 63, .38) rgba(255, 255, 255, .04);

  --bg-0: #07080b;
  --bg-1: #0e1117;
  --panel: rgba(18, 21, 28, .92);
  --panel-2: rgba(30, 34, 43, .92);
  --panel-line: rgba(255, 255, 255, .09);

  --gold: #d7a53f;
  --gold-hi: #f2d089;
  --gold-lo: #8a6416;
  --green: #2f9e57;
  --green-hi: #47c173;
  --red: #c4362e;

  --txt: #e9e6df;
  --txt-dim: #9aa0aa;
  --txt-mute: #6d7480;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;

  --shadow-1: 0 2px 6px rgba(0, 0, 0, .45);
  --shadow-2: 0 10px 34px rgba(0, 0, 0, .6);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg-0);
  color: var(--txt);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; cursor: pointer; }
svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ——————————————————————————————————————— açılış ekranı */

/* Oturum çözülene kadar her şeyi örter (bkz. js/ui.js start); karar verilince
   söner. Ölçekli tuvalin dışında, ekranın kendisine göre durur. */
.acilis {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  background:
    radial-gradient(70% 60% at 50% 38%, #252e3f 0%, #0a0d13 62%, #06080c 100%),
    #06080c;
  transition: opacity .25s ease;
}
.acilis.is-kapaniyor { opacity: 0; pointer-events: none; }
.acilis-marka {
  font-size: clamp(34px, 6vw, 56px); font-weight: 900; letter-spacing: -1.5px; line-height: 1;
  color: var(--txt);
}
.acilis-marka b { margin-left: 5px; font-weight: 900; color: var(--gold); }
.acilis-yukleme { display: flex; gap: 9px; }
.acilis-yukleme i {
  width: 10px; height: 10px;
  background: var(--gold);
  border-radius: 50%;
  animation: acilis-nokta 1s ease-in-out infinite;
}
.acilis-yukleme i:nth-child(2) { animation-delay: .15s; }
.acilis-yukleme i:nth-child(3) { animation-delay: .3s; }
@keyframes acilis-nokta {
  0%, 80%, 100% { opacity: .25; transform: scale(.7); }
  40% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .acilis-yukleme i { animation: none; opacity: .7; }
}

/* ——————————————————————————————————————— sahne ve ölçekleme */

#stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, #1a2030 0%, #0c0f15 55%, #05070a 100%);
}

/* Tuval sol ustten olceklenir; ortalama JS'ten gelen --ox/--oy ile yapilir.
   (grid ile ortalamak tasan kutuyu guvenli hizalamaya dusurup sag kenari
   ekran disinda birakiyordu.) */
#board {
  position: absolute;
  left: 0; top: 0;
  width: var(--design-w);
  height: var(--design-h);
  transform: translate(var(--ox, 0px), var(--oy, 0px)) scale(var(--scale, 1));
  transform-origin: 0 0;
  background:
    radial-gradient(85% 70% at 50% 42%, #232a38 0%, #141922 45%, #0a0d13 100%);
  overflow: hidden;
}

/* ——————————————————————————————————————— üst bar */

/* Menüyle aynı tasarım dili: koyu panel (#191d25 → #12161d), ince çizgi,
   vurgu altın. Sol üstte masanın künyesi, sağ üstte araçlar ve sohbet. */
.topbar { position: absolute; inset: 0 0 auto 0; height: 64px; z-index: 30; }

/* ——— künye: ücret · tur · kural; tıklanınca puan durumu */
.masa-kunye { position: absolute; left: 12px; top: 10px; }
.mk-dugme {
  display: flex; align-items: center; gap: 14px;
  height: 50px; padding: 0 14px 0 16px;
  font-size: 12px; font-weight: 800; letter-spacing: 1.2px; color: var(--txt-dim);
  background: linear-gradient(180deg, #191d25 0%, #12161d 100%);
  border: 1px solid var(--panel-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  transition: border-color .15s, color .15s;
}
.mk-dugme:hover, .mk-dugme[aria-expanded="true"] { border-color: rgba(215, 165, 63, .45); color: var(--txt); }
.mk-oge { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.mk-oge b { font-size: 16px; font-weight: 800; letter-spacing: .3px; color: var(--txt); }
.mk-ucret .coin { width: 20px; height: 20px; }
.mk-ucret b { color: var(--gold-hi); }
.mk-kural { color: var(--gold-hi); }
.mk-ayrac { width: 1px; height: 20px; background: var(--panel-line); }
.mk-dugme .chev { width: 18px; height: 18px; margin-left: -4px; opacity: .6; transition: transform .2s; }
.mk-dugme[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* Puan durumu: künyenin altından açılan panel. */
.mk-panel {
  position: absolute; left: 0; top: 58px; width: 400px;
  background: linear-gradient(180deg, #191d25 0%, #12161d 100%);
  border: 1px solid rgba(215, 165, 63, .32);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  animation: mk-ac .16s ease-out;
}
.mk-panel[hidden] { display: none; }
@keyframes mk-ac { from { opacity: 0; transform: translateY(-6px); } }
.mk-bas {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--panel-line);
}
.mk-bas > b { font-size: 13px; font-weight: 800; letter-spacing: 1.6px; color: var(--gold-hi); }
.mk-bas span { font-size: 12px; font-weight: 600; color: var(--txt-mute); }
.mk-bas span b { color: var(--txt); }
.mk-sutunlar, .mk-satir {
  display: grid; grid-template-columns: 26px 1fr 60px 64px; align-items: center; gap: 12px;
}
.mk-sutunlar {
  height: 30px; padding: 0 20px;
  font-size: 10px; font-weight: 700; letter-spacing: 1px; color: var(--txt-mute);
}
.mk-sutunlar > :nth-child(n+3), .mk-satir > :nth-child(n+3) { text-align: right; }
.mk-liste { margin: 0; padding: 0 10px 10px; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.mk-satir {
  height: 50px; padding: 0 10px;
  background: rgba(255, 255, 255, .025);
  border: 1px solid transparent;
  border-radius: var(--r-md);
}
.mk-satir.is-ben { background: rgba(215, 165, 63, .08); border-color: rgba(215, 165, 63, .3); }
.mk-sira {
  width: 26px; height: 26px; display: grid; place-items: center;
  font-size: 13px; font-weight: 800; color: var(--txt-dim);
  background: rgba(255, 255, 255, .06); border-radius: 50%;
}
/* Önde giden (en düşük puan) altın rozetle. */
.mk-satir.is-lider .mk-sira {
  color: #2a1c00;
  background: linear-gradient(180deg, #f0c063 0%, var(--gold) 55%, #b4821f 100%);
}
.mk-ad { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mk-ad b { font-size: 14px; font-weight: 700; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-ad > span { font-size: 11px; color: var(--txt-mute); }
.mk-ad > span.is-acik { color: var(--green-hi); }
.mk-sen {
  margin-left: 6px; padding: 1px 6px;
  font-size: 9px; font-style: normal; font-weight: 800; letter-spacing: 1px;
  color: var(--gold-hi); border: 1px solid rgba(215, 165, 63, .45); border-radius: 999px;
  vertical-align: 2px;
}
.mk-el { font-size: 13px; font-weight: 700; color: var(--txt-mute); font-variant-numeric: tabular-nums; }
.mk-el.is-eksi { color: var(--green-hi); }
.mk-el.is-arti { color: #e88a82; }
.mk-puan { font-size: 17px; font-weight: 800; color: var(--txt); font-variant-numeric: tabular-nums; }
.mk-bos { margin: 0; padding: 16px 18px 6px; font-size: 13px; line-height: 1.55; color: var(--txt-mute); text-align: center; }
.mk-alt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 18px 13px;
  border-top: 1px solid var(--panel-line);
  font-size: 12px; color: var(--txt-mute);
}
.mk-kasa { display: inline-flex; align-items: center; gap: 6px; }
.mk-kasa b { color: var(--gold-hi); font-size: 13px; }
.mk-kasa .coin { width: 15px; height: 15px; }
.mk-kurallar {
  height: 30px; padding: 0 14px; flex: none;
  font-size: 11px; font-weight: 800; letter-spacing: 1.1px; color: var(--gold-hi);
  background: rgba(215, 165, 63, .08);
  border: 1px solid rgba(215, 165, 63, .38);
  border-radius: 999px;
  transition: background .15s, color .15s;
}
.mk-kurallar:hover {
  color: #2a1c00; border-color: #6f5014;
  background: linear-gradient(180deg, #f0c063 0%, var(--gold) 55%, #b4821f 100%);
}

/* ——— otomatik oynama şeridi (ortada, yalnızca açıkken) */
.oto-serit {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  height: 42px; padding: 0 6px 0 16px;
  font-size: 12px; font-weight: 800; letter-spacing: 1.4px; color: var(--gold-hi);
  background: linear-gradient(180deg, #191d25 0%, #12161d 100%);
  border: 1px solid rgba(215, 165, 63, .55);
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(215, 165, 63, .08), var(--shadow-1);
}
.oto-serit[hidden] { display: none; }
.oto-serit i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold-hi);
  animation: oto-nabiz 1.4s ease-in-out infinite;
}
@keyframes oto-nabiz { 50% { opacity: .25; } }
.oto-serit span {
  height: 30px; padding: 0 13px; display: grid; place-items: center;
  font-size: 11px; color: #2a1c00;
  background: linear-gradient(180deg, #f0c063 0%, var(--gold) 55%, #b4821f 100%);
  border-radius: 999px;
}
.oto-serit:hover span { filter: brightness(1.08); }

/* ——— sağ üst: araç düğmeleri + sohbet */
.masa-sag {
  position: absolute; right: 24px; top: 10px;
  display: flex; align-items: flex-start; gap: 10px;
}
.arac-dugme {
  width: 50px; height: 50px; flex: none;
  display: grid; place-items: center;
  color: var(--txt-dim);
  background: linear-gradient(180deg, #191d25 0%, #12161d 100%);
  border: 1px solid var(--panel-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  transition: color .15s, border-color .15s, background .15s, transform .15s;
}
.arac-dugme svg { width: 22px; height: 22px; }
.arac-dugme:hover { color: var(--gold-hi); border-color: rgba(215, 165, 63, .45); }
.arac-dugme:active { transform: translateY(1px); }
/* Otomatik oynama açık: düğme dolu altın. */
.arac-dugme[aria-pressed="true"] {
  color: #2a1c00;
  background: linear-gradient(180deg, #f0c063 0%, var(--gold) 55%, #b4821f 100%);
  border-color: #6f5014;
}
/* Çıkış kapısı: üstüne gelince kırmızıya döner. */
.arac-dugme.is-exit:hover { color: #ff8a80; border-color: rgba(196, 54, 46, .5); background: rgba(196, 54, 46, .14); }

/* —————————————————————————————————— masa öbeği (dikey ortalanır) */

/* Masa, oyuncu levhaları, istaka ve eylem düğmeleri tek öbektir. Öbek
   1070px boyundadır ve tuvalin ortasına oturur; tuval daha uzunsa artan
   yer altına ve üstüne eşit dağılır. Eni tuval kadardır: içindeki masa
   iki kenara da dayandığı için pencere genişledikçe masa da genişler.

   Adı `field` DEĞİL: o ad pencerelerdeki form satırlarının (css/panels.css)
   ve masanın öbeğin kendisi olmadığı her yerin sınıfı. Çakışınca ayarlar,
   lobi ve profil pencereleri dağılıyordu. */
.play-field {
  position: absolute;
  left: 0; right: 0;
  top: 50%; height: 1070px;
  margin-top: -535px;
}

/* ——————————————————————————————————————— eylem düğmeleri */

/* Şerit tuvalle birlikte genişlemez; istaka gibi ortalanmış sabit bir
   kutudur, içindeki düğmeler eski koordinatlarını korur. Menüyle aynı dil:
   solda dolu altın TAŞ AL, ortada koyu panel şerit (ince çizgi, altın
   vurgu), sağda kırmızı TAŞ AT. Üçü de aynı boyda. */
.actions {
  position: absolute; left: 50%; top: 938px;
  width: 1904px; margin-left: -952px; height: 62px;
  z-index: 20;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 46px; padding: 0 22px;
  border-radius: var(--r-md); border: 1px solid transparent;
  font-size: 15px; font-weight: 600; letter-spacing: .2px;
  white-space: nowrap;
  transition: filter .15s, transform .1s, opacity .15s, background .15s, color .15s, border-color .15s;
}
.btn svg { width: 19px; height: 19px; flex: none; }
/* `display` kuralları `hidden` özniteliğini eziyordu: gizli düğme görünüyordu. */
.btn[hidden] { display: none; }
.btn:disabled { opacity: .34; cursor: default; filter: grayscale(.5); }
.btn:not(:disabled):hover { filter: brightness(1.12); }
.btn:not(:disabled):active { transform: translateY(1px); }

/* Renkler ortak (pencerelerdeki düğmeler de kullanıyor; onlar konumunu
   satır içi `position:static` ile ezer). Boy ve yazı yalnızca masadaki
   uç düğmelerde büyür: TAŞ AL ve TAŞ AT. */
.btn-primary, .btn-danger { position: absolute; top: 0; }
.actions .btn-primary, .actions .btn-danger {
  height: 59px;
  font-size: 16px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
  border-radius: var(--r-lg);
}
.actions .btn-primary svg, .actions .btn-danger svg { width: 20px; height: 20px; stroke-width: 2; }

.btn-primary {
  left: 287px; width: 138px;
  color: #2a1c00;
  background: linear-gradient(180deg, #f0c063 0%, var(--gold) 55%, #b4821f 100%);
  border-color: #6f5014;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 3px 0 #6f5014, var(--shadow-1);
}
.btn-primary:not(:disabled) { animation: pulse-gold 2s ease-in-out infinite; }
/* Masadaki TAŞ AL'ın parıltısı ayrı katmanda, yalnızca saydamlığıyla
   canlanır (gölge canlandırmak her karede yeniden çizim: sürükleme kasardı). */
.actions .btn-primary:not(:disabled) { animation: none; }
.actions .btn-primary:not(:disabled)::after {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 22px rgba(224, 175, 79, .5);
  pointer-events: none;
  animation: parilti 2s ease-in-out infinite;
}
@keyframes parilti { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes pulse-gold {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 3px 0 #6f5014, var(--shadow-1); }
  50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 3px 0 #6f5014, 0 0 22px rgba(224, 175, 79, .45); }
}

.btn-danger {
  left: 1452px; width: 136px;
  color: #ffe9e6;
  background: linear-gradient(180deg, #d9493f 0%, #a52a22 100%);
  border-color: #6e1c16;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 3px 0 #5d1812, var(--shadow-1);
}

/* Orta şerit: koyu panel. Düğmeler sağa dayalı; geri koy (yalnızca yerden
   alınmış taş kullanılmadıysa görünür) solda, Taş al'ın hemen yanında. */
.action-strip {
  position: absolute; left: 430px; top: 0; width: 915px; height: 62px;
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  padding: 0 7px 0 8px;
  background: linear-gradient(180deg, #191d25 0%, #12161d 100%);
  border: 1px solid var(--panel-line);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), var(--shadow-1);
}

/* Sade düğme (pencerelerde de kullanılıyor). */
.btn-ghost {
  height: 38px; padding: 0 16px;
  color: var(--txt-dim); background: transparent; border-color: transparent;
}
.btn-ghost:not(:disabled):hover { color: var(--txt); background: rgba(255, 255, 255, .06); }

/* Şeridin düğmeleri: simgeli; üstüne gelince altın. */
.action-strip .btn-ghost {
  height: 46px; padding: 0 18px;
  font-size: 14px; font-weight: 700; letter-spacing: .3px;
}
.action-strip .btn-ghost svg { width: 18px; height: 18px; opacity: .85; }
.action-strip .btn-ghost:not(:disabled):hover {
  filter: none;
  color: var(--gold-hi);
  background: rgba(215, 165, 63, .08);
  border-color: rgba(215, 165, 63, .28);
}
/* Hazır olan hamle (ör. el açılabilir): altın çerçeve, hafif nabız (ayrı
   katmanda saydamlıkla). */
.btn-ghost.is-active {
  position: relative;
  color: var(--gold-hi);
  background: rgba(215, 165, 63, .13);
  border-color: rgba(215, 165, 63, .45);
}
.btn-ghost.is-active::after,
.btn-geri-koy::after {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 16px rgba(215, 165, 63, .35);
  pointer-events: none;
  animation: parilti 1.8s ease-in-out infinite;
}

/* Taşı geri koy: şeridin solunda, altın çerçeveli uyarı düğmesi. */
.btn-geri-koy {
  position: relative;
  margin-right: auto;
  height: 46px; padding: 0 18px 0 14px;
  font-size: 13px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: var(--gold-hi);
  background: rgba(215, 165, 63, .1);
  border-color: rgba(215, 165, 63, .5);
}
.btn-geri-koy svg { width: 18px; height: 18px; stroke-width: 2; }
.btn-geri-koy:not(:disabled):hover {
  filter: none;
  color: #2a1c00;
  background: linear-gradient(180deg, #f0c063 0%, var(--gold) 55%, #b4821f 100%);
  border-color: #6f5014;
}

/* ——————————————————————————————————————— bildirim */

.toast {
  position: absolute; left: 50%; top: 470px;
  transform: translate(-50%, 8px);
  padding: 13px 26px;
  background: rgba(10, 12, 17, .94);
  border: 1px solid rgba(215, 165, 63, .35);
  border-radius: var(--r-md);
  font-size: 16px; font-weight: 600;
  box-shadow: var(--shadow-2);
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 60;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.warn { border-color: rgba(196, 54, 46, .6); color: #ffd9d5; }

/* Sunucu geç cevap verirken altta duran şerit; her şeyin üstünde. Üst
   şeritteki düğmelere binmesin diye altta. */
.ag-bekle {
  position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  font-size: 14px; font-weight: 600; color: var(--gold-hi);
  background: rgba(10, 12, 17, .95);
  border: 1px solid rgba(215, 165, 63, .45);
  border-radius: 999px;
  box-shadow: var(--shadow-2);
  z-index: 95;
  pointer-events: none;
}
.ag-bekle[hidden] { display: none; }
.ag-bekle i {
  width: 14px; height: 14px; flex: none;
  border: 2px solid rgba(242, 208, 137, .3);
  border-top-color: var(--gold-hi);
  border-radius: 50%;
  animation: ag-don .8s linear infinite;
}
@keyframes ag-don { to { transform: rotate(360deg); } }

/* sıra sende parlaması */
/* Sıra sendeyken masanın kenarları altın parlar. Bulanık gölge bir kez
   çizilir, kendi katmanında durur; yalnızca saydamlığı değişir. Önceden
   gölgenin kendisi değişiyordu ve altında her değişiklikte (sürüklenen taşın
   izi, süre çubuğu) bu büyük bulanıklık yeniden çiziliyordu. */
.turn-flash {
  position: absolute; inset: 0; pointer-events: none; z-index: 15;
  box-shadow: inset 0 0 90px -20px rgba(215, 165, 63, .5);
  opacity: 0;
  transition: opacity .4s;
  will-change: opacity;
}
.turn-flash.on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ————————————————————————————————— metin seçimi

   Oyun arayüzünde yazı seçmek işe yaramıyor, taş sürüklerken yanlışlıkla
   yarım ekranı maviye boyuyordu. Seçim kapalı; yalnızca yazı yazılan
   kutularda açık kalıyor. */
* { -webkit-user-select: none; user-select: none; }
input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }