/* Oyun Kahvesi — ORTAK DİKEY TEMA (kk-dikey.css)
   ------------------------------------------------------------------
   Kenan'ın 51 HD referansıyla 51'de olgunlaştırılan portrait şablonu — kart/taş oyunlarının
   ortak ID iskeleti (#masa, #k-ust/sol/sag/ben, #istaka, #butonlar, #orta, .slot, .sira …)
   üzerine kurulur. Yatay (landscape) düzenlere DOKUNMAZ (yalnız orientation:portrait).
   Sayfa ayrıca <head> başında KK_FIT_KAPALI=true bayrağını (portrait'te) set etmelidir —
   dikey sabit tasarımda zoom-fit gereksiz ve zararlıdır (geçici taşma kalıcı küçültür).
   Oyun-özel farklar (ör. 51'in kendi bloğu) sayfanın kendi CSS'inde kalabilir. */

.yan-ray { display:none; }

@media (orientation: portrait) {
  body { min-height:100vh; min-height:100dvh;
    background:url("/assets/oyun-zemin-v224.svg") center/cover no-repeat, #2e5e3a; }
  /* üst bant: kumar masası KOYU KIRMIZISI + çapraz kumaş dokusu */
  header { background:
      repeating-linear-gradient(135deg, rgba(0,0,0,.13) 0 2px, transparent 2px 5px),
      repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 6px),
      linear-gradient(180deg,#7c1a1a,#560f0f);
    border-bottom:3px solid #3c0a0a; }
  main { padding:0; gap:0; }
  #masa { border-radius:0; overflow:hidden; flex:1 1 auto; min-height:212px; }

  /* ahşap yan raylar */
  .yan-ray { display:block; position:absolute; top:0; bottom:0; width:32px; z-index:2;
    background:
      repeating-linear-gradient(175deg, rgba(0,0,0,.07) 0 3px, transparent 3px 9px),
      linear-gradient(90deg,#a4713d,#7a5233 48%,#59391f);
    box-shadow:inset -5px 0 9px rgba(0,0,0,.38), 2px 0 6px rgba(0,0,0,.3); }
  .ray-sol { left:0; }
  .ray-sag { right:0; transform:scaleX(-1); }

  /* koltuk plakaları: ALTIN metalik (Kenan) — koyu ahşap plakalar 'siyah' görünüyordu */
  .koltuk { background:linear-gradient(158deg,#7a5514 0%,#c9992e 20%,#f7e08a 47%,#e8c14e 60%,#a9781f 84%,#6e4a10 100%);
    border:2px solid #5a3d0c; border-radius:11px;
    box-shadow:0 3px 9px rgba(0,0,0,.5), inset 0 1px 2px rgba(255,255,255,.55), inset 0 -3px 6px rgba(80,52,10,.45); }
  #k-ust { top:0; border-top:none; border-radius:0 0 12px 12px; display:flex; align-items:center;
    gap:7px; padding:3px 13px; white-space:nowrap; left:50%; transform:translateX(-50%); }
  #k-ust .ad { font-size:14px; } #k-ust .adet { font-size:12px; opacity:1; }
  #k-ust .adet:empty, #k-ust .acti:empty { display:none; }
  #k-sol, #k-sag { top:41%; min-width:0; padding:12px 5px; z-index:3; }
  #k-sol { left:0; border-radius:0 11px 11px 0; border-left:none; }
  #k-sag { right:0; border-radius:11px 0 0 11px; border-right:none; }
  #k-sol .ad, #k-sag .ad, #k-sol .adet, #k-sag .adet, #k-sol .acti, #k-sag .acti {
    writing-mode:vertical-rl; margin:2px auto; letter-spacing:1px; }
  #k-sol .ad, #k-sol .adet, #k-sol .acti { transform:rotate(180deg); }
  #k-sol .adet, #k-sag .adet { font-size:11.5px; } #k-sol .acti, #k-sag .acti { font-size:10.5px; }
  #k-ben { display:none; }               /* alttaki plaka #istaka-ad'de */

  /* ıskartalar: köşe yakını, hafif eğik */
  #i-sol-ust { transform:rotate(-9deg); left:12%; top:8%; }
  #i-sag-ust { transform:rotate(9deg); right:12%; top:8%; }
  #i-sol-alt { transform:rotate(7deg); left:12%; bottom:9%; }
  #i-sag-alt { transform:rotate(-7deg); right:12%; bottom:9%; }

  /* orta deste: kırmızı desenli kart arkası + küçük sayaç */
  #yigin-kutu .kart-arka, #yigin-kutu .tas-arka { width:39px;
    background:
      repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 4px, transparent 4px 8px),
      radial-gradient(circle at 50% 38%,#8f2f22,#5f1a12 78%);
    border:2px solid #f5efdd; box-shadow:0 3px 8px rgba(0,0,0,.5), inset 0 0 0 3px rgba(245,239,221,.28); }
  #yigin-adet { font-size:11px; padding:1px 7px; }

  /* aksiyon şeridi: ahşap masa başlangıcı */
  #butonlar { background:
      repeating-linear-gradient(92deg, rgba(0,0,0,.05) 0 4px, transparent 4px 11px),
      linear-gradient(180deg,#a4713d,#7a5233);
    border-top:3px solid #4e3115; margin:0; padding:10px 6px 8px; gap:6px; min-height:0; }
  #butonlar button { background:linear-gradient(#efd3a0,#c79b5a); color:#3a2408; font-weight:800;
    border:1px solid #6e4a2f; border-bottom-width:3px; border-radius:9px; padding:7px 12px;
    font-size:13.5px; letter-spacing:.4px; box-shadow:0 2px 4px rgba(0,0,0,.3); }
  #butonlar button:disabled { opacity:.5; }
  #butonlar button.duzen.aktif { outline:3px solid #f4c542; }
  #butonlar button.cift-ac { background:linear-gradient(#d9c2ef,#a985c9); }

  /* el: ahşap masada SABİT 3-SIRA ISTAKA (okey rafı) — sıra başına 10 hücre,
     kart/taş 74px hücreden taşarak sağ komşunun altına girer (yelpaze) */
  #istaka { background:
      repeating-linear-gradient(88deg, rgba(0,0,0,.05) 0 5px, transparent 5px 13px),
      linear-gradient(180deg,#7a5233,#4e3115);
    border-radius:0; margin:0; padding:6px 8px 14px; gap:5px; max-height:none; overflow:visible;
    flex:0 0 auto; }
  #istaka-ad { display:block; position:static; transform:none; width:max-content; margin:6px auto 8px;
    background:linear-gradient(158deg,#7a5514 0%,#c9992e 20%,#f7e08a 47%,#e8c14e 60%,#a9781f 84%,#6e4a10 100%);
    border:2px solid #5a3d0c; border-radius:12px; color:#2e2205; font-weight:bold;
    text-shadow:0 1px 0 rgba(255,255,255,.35);
    padding:4px 18px; text-align:center; font-size:15px; z-index:4; pointer-events:none;
    box-shadow:0 3px 9px rgba(0,0,0,.5), inset 0 1px 2px rgba(255,255,255,.55), inset 0 -3px 6px rgba(80,52,10,.45); }
  #istaka-ad.sirada { border-color:#fff2b0; box-shadow:0 0 16px 3px #ffd75e, 0 3px 9px rgba(0,0,0,.5), inset 0 1px 2px rgba(255,255,255,.6); }
  .sira { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:0; padding-right:44px;
    margin:0 0 6px; }   /* minmax(0,..): 1fr içerik-min tuzağı (kolon kilitlenir, taşar) */
  .slot { position:relative; width:auto; height:106px; margin:0; background:none; }
  .slot .krt, .slot img { position:absolute; left:0; top:0; width:74px; height:106px;
    border-radius:8px; box-shadow:none; }
  .slot .tas-arka { position:absolute; left:0; top:0; width:74px; height:106px; }
  .slot.bos { background:rgba(0,0,0,.16); border-radius:6px; }
  .slot.bos::after { content:""; position:absolute; inset:8px 3px; border:1.5px dashed rgba(245,239,221,.18); border-radius:5px; }
  .slot.secili { z-index:40 !important; }
  .slot.secili .krt, .slot.secili img { transform:translateY(-14px); }
  .slot.hedef { z-index:41 !important; }
  .slot.hedef::after { content:""; position:absolute; inset:-3px; border:3px dashed #f4c542;
    border-radius:9px; background:rgba(244,197,66,.22); pointer-events:none; }
  #ghost { width:84px; }               /* sürüklenen, eldekinden az daha büyük */

  /* açık perler masada sütun olarak DEĞİL — plakalara iliştirilmiş isimsiz göz çipleri */
  #acik-sol, #acik-sag { display:none; }
  .acik-cip { display:inline-block; margin:2px 0 0 6px; background:#f4c542; color:#3a2408;
    border-radius:9px; font-size:11px; font-weight:800; padding:1px 7px; cursor:pointer;
    pointer-events:auto; box-shadow:0 2px 5px rgba(0,0,0,.35); }
  #k-sol .acik-cip, #k-sag .acik-cip { margin:4px auto 0; padding:1px 4px; font-size:10px;
    display:block; width:max-content; }

  /* el sonu / skor: ahşap çerçeve + koyu çuha (51 HD kazanma ekranı) */
  #son-eller .se-kutu, #skor-kutu { background:#10301d; color:#f5efdd;
    border:10px solid transparent; border-radius:14px;
    border-image:linear-gradient(#a4713d,#59391f) 1; box-shadow:0 14px 50px rgba(0,0,0,.6); }
  #son-eller h2 { color:#f4c542; text-align:center; letter-spacing:1px; }
  #son-eller.kazandim .se-kutu::before { content:"🏆"; display:block; text-align:center;
    font-size:56px; line-height:1.15; filter:drop-shadow(0 6px 12px rgba(0,0,0,.5)); }
  #skor-kutu table { color:#f5efdd; }
  #skor-kutu th { background:#1c4a2e; color:#f4c542; border-color:#2e5e3a; }
  #skor-kutu td { border-color:#2e5e3a; }
  #skor-kutu .toplam { background:#24492d; color:#f4c542; }
}