@charset "UTF-8";

/*
 * landscape.css — Telefon YATAY (landscape) düzeni
 *
 * Sahip kararı (2026-05-31): "Her şey yatay olsun".
 * Android tarafı: AndroidManifest sensorLandscape (uygulama hep yatay).
 * Bu dosya: web SPA'nın 3 oyun masasını (TOTO / 81 / Tavla) yatay-kısa
 * ekrana göre yeniden düzenler.
 *
 * GATE: (orientation: landscape) and (max-height: 600px)
 *   → SADECE telefon yatayda (yükseklik ~360-430px) devreye girer.
 *   → Tablet/desktop yatay (yükseklik ≥ ~700px) ETKİLENMEZ — geniş ekranda
 *     mevcut düzen zaten iyi.
 *
 * YÜKLEME SIRASI (index.html): tüm oyun CSS'lerinden SONRA, perf-patch.css'ten
 *   ÖNCE. Böylece gm-* kurallarını eşit-specificity'de cascade ile geçer
 *   (az !important gerekir). perf-patch.css en sonda kalır (regression-watch #10).
 *
 * ÖLÇÜM NOTU: 844×390 (yaygın telefon yatay) viewport'ta ölçüldü.
 *   Kart boyutu --card-w/--card-h CSS değişkenleri ile kontrol edilir;
 *   el yelpaze bindirmesi (game.js --h-overlap) bu değişkeni okur → değişken
 *   override'ı yelpazeyi otomatik yeniden hesaplatır.
 */

@media (orientation: landscape) and (max-height: 600px) {

  /* ═══════════════════════════════════════════════════════════════
     GLOBAL — tüm oyunlar için ortak
     ═══════════════════════════════════════════════════════════════ */

  /* Skor tablosu yan-sütun yerine kayan overlay olsun → masa TAM GENİŞLİK.
     (≤1024 kuralı zaten fixed yapıyor ama gm-* / density kuralları flow'a
     geri sokabiliyor; burada kesin garanti.) */
  #scoreboard {
    position: fixed !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 300px !important; max-width: 84vw !important;
    z-index: 60 !important;
  }
  #sb-toggle { display: inline-flex !important; }

  #game-layout { padding: 3px !important; gap: 0 !important; }

  /* Yatayda kart boyutları — yüksekliğe sığsın diye küçült.
     --card-w/h: insan eli · --card-w/h-sm: rakip kapalı kartlar */
  :root {
    --card-w: 62px;  --card-h: 88px;
    --card-w-sm: 38px; --card-h-sm: 54px;
  }

  /* "Çık" + skor-toggle butonları küçülsün (üst köşeleri yemesin) */
  #game-back-btn, #sb-toggle {
    padding: 4px 10px !important;
    font-size: 0.72rem !important;
    min-height: 32px !important;
  }

  /* ═══════════════════════════════════════════════════════════════
     TOTO (body.gm-toto)
     ═══════════════════════════════════════════════════════════════ */

  /* Masa iç boşluğu küçük — dikey alanı geri kazan */
  body.gm-toto #table {
    padding: 4px 14px !important;
    border-radius: 36px / 28px !important;
  }

  /* Dikey bütçe (390px): üst rakip ~52 · orta band esner · alt el ~98 */
  body.gm-toto #area-top {
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 !important;
    max-height: 58px !important;
  }
  body.gm-toto #table-mid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
  body.gm-toto #area-bottom {
    flex: 0 0 auto !important;
    padding: 0 !important;
  }

  /* Üst rakip: avatar pill + minik yatay kapalı yelpaze yan yana.
     .hand min-height:var(--card-h) (88px) leak'ini iptal et → 58px satıra otursun. */
  body.gm-toto #hand-top {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    min-height: 0 !important;
    height: var(--card-h-sm) !important;
  }
  body.gm-toto #hand-top .card-back,
  body.gm-toto #hand-top .card {
    width: var(--card-w-sm) !important;
    height: var(--card-h-sm) !important;
    margin-left: -22px !important;
    margin-top: 0 !important;
  }
  body.gm-toto #hand-top .card-back:first-child,
  body.gm-toto #hand-top .card:first-child { margin-left: 0 !important; }

  /* Sol/sağ rakip: kenara yaslı, orta bandın dikey ortasında.
     Dik kapalı deste yüksekliğini sınırla (taşmasın). */
  body.gm-toto #area-left,
  body.gm-toto #area-right { gap: 4px !important; }
  body.gm-toto #hand-left .card-back, body.gm-toto #hand-left .card,
  body.gm-toto #hand-right .card-back, body.gm-toto #hand-right .card {
    width: var(--card-w-sm) !important;
    height: var(--card-h-sm) !important;
    margin-top: -38px !important;
    margin-left: 0 !important;
  }
  body.gm-toto #hand-left .card-back:first-child, body.gm-toto #hand-left .card:first-child,
  body.gm-toto #hand-right .card-back:first-child, body.gm-toto #hand-right .card:first-child {
    margin-top: 0 !important;
  }

  /* Koltuk pill'leri kompakt */
  body.gm-toto .pinfo { gap: 5px !important; }
  body.gm-toto .pavatar { width: 30px !important; height: 30px !important; font-size: 0.8rem !important; }
  body.gm-toto .pname-label { font-size: 0.62rem !important; }
  body.gm-toto .pbid-label { font-size: 0.68rem !important; }

  /* Alt (insan) eli — pill'i elin yanına al, dikey yığma yapma */
  body.gm-toto #area-bottom {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1px !important;
  }
  body.gm-toto #pinfo-bottom {
    order: 2 !important;
    transform: scale(0.85);
    margin-top: -2px !important;
  }
  body.gm-toto #hand-bottom { order: 1 !important; }

  /* Trump rozeti + tur bilgisi küçült */
  body.gm-toto #trump-badge { transform: scale(0.78); transform-origin: top right; }
  body.gm-toto #round-info { transform: scale(0.82); transform-origin: top left; }

  /* İhale (bid) paneli — yatayda elin ÜSTÜNE binmesin.
     Orta bandın (table-mid) tam ortasına, küçük butonlu kompakt overlay.
     table-mid position:relative (gm-toto kuralı) → buraya yaslanır. */
  body.gm-toto #bid-controls:not(.hidden) {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 45 !important;
    max-width: 72vw !important;
    padding: 6px 10px !important;
    background: rgba(0, 0, 0, 0.62) !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5) !important;
  }
  body.gm-toto #bid-prompt {
    font-size: 0.72rem !important;
    margin: 0 0 5px !important;
    text-align: center !important;
  }
  body.gm-toto #bid-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 5px !important;
  }
  body.gm-toto #bid-buttons .bid-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    font-size: 0.82rem !important;
  }

  /* ═══════════════════════════════════════════════════════════════
     ARTIRMALI 81 (body.gm-81)
     ═══════════════════════════════════════════════════════════════ */

  /* Masa iç boşluğu küçük — dikey alanı geri kazan */
  body.gm-81 #table {
    padding: 4px 14px !important;
    border-radius: 30px !important;
  }

  /* Dikey bütçe (390px): üst rakip ~52 · orta band (ıskarta) esner · alt ~150 */
  body.gm-81 #area-top {
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 !important;
    max-height: 56px !important;
  }
  body.gm-81 #table-mid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }

  /* Üst rakip kapalı eli — minik yatay istif, .hand min-height (88) leak iptal */
  body.gm-81 #hand-top {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    min-height: 0 !important;
    height: var(--card-h-sm) !important;
    max-height: var(--card-h-sm) !important;
  }
  body.gm-81 #hand-top .card-back,
  body.gm-81 #hand-top .card {
    width: var(--card-w-sm) !important;
    height: var(--card-h-sm) !important;
    margin-top: 0 !important;
  }

  /* Yan rakipler: dik istifi kısalt (taşmasın) */
  body.gm-81 #hand-left,
  body.gm-81 #hand-right {
    max-height: 150px !important;
  }
  body.gm-81 #hand-left .card-back, body.gm-81 #hand-left .card,
  body.gm-81 #hand-right .card-back, body.gm-81 #hand-right .card {
    width: var(--card-w-sm) !important;
    height: var(--card-h-sm) !important;
  }

  /* Köşe desteler — yatayda üst banda kompakt otursun (mobil ≤760 kuralı
     844px genişlikte ETKİSİZ; burası geniş-ama-kısa yatay için ayrı). */
  body.gm-81 #o81-draw {
    top: 16px !important;
    left: 132px !important;
  }
  body.gm-81 #o81-draw .o81-pile-stack .card-back,
  body.gm-81 #o81-draw .o81-pile-stack .card {
    width: var(--card-w-sm) !important;
    height: var(--card-h-sm) !important;
  }
  body.gm-81 #o81-draw .o81-pile-label { font-size: 0.56rem !important; }
  body.gm-81 #o81-draw { min-width: 0 !important; min-height: 0 !important; padding: 2px !important; }
  body.gm-81 #o81-baraj-badge {
    top: 16px !important;
    right: 46px !important;
    padding: 4px 10px !important;
  }
  body.gm-81 .o81-baraj-val { font-size: 1.15rem !important; }
  body.gm-81 .o81-baraj-label { font-size: 0.52rem !important; }

  /* Iskarta merkezde — biraz küçült (orta band dar) */
  body.gm-81 #o81-center .o81-pile { min-width: 0 !important; min-height: 0 !important; padding: 2px 6px !important; }
  body.gm-81 #o81-discard .card,
  body.gm-81 #o81-discard .card-back {
    width: var(--card-w-sm) !important;
    height: var(--card-h-sm) !important;
  }

  /* Üst rakip açtıkları — top opponent'in hemen altına çek (224px → üst banda) */
  body.gm-81 #o81-opens-top { top: 56px !important; }
  /* Yan açtıklar zaten top:50% ortalı — kenara biraz daha yasla */
  body.gm-81 #o81-opens-left  { left: 84px !important; max-width: 140px !important; }
  body.gm-81 #o81-opens-right { right: 84px !important; max-width: 140px !important; }

  /* Alt bölge: açtıklarım + el + pill + aksiyon barı — dikey sıkı */
  body.gm-81 #area-bottom {
    flex: 0 0 auto !important;
    padding: 0 !important;
    gap: 1px !important;
  }
  /* Açtıklarım (mypers) — kapalı yükseklik, kısa yelpaze */
  body.gm-81 #o81-mypers {
    max-height: 44px !important;
    padding: 2px 8px !important;
    margin-bottom: 0 !important;
  }
  body.gm-81 #o81-mypers .o81-per .card {
    width: 28px !important;
    height: 40px !important;
    margin-left: -14px !important;
  }
  /* Koltuk pill kompakt */
  body.gm-81 #pinfo-bottom {
    transform: scale(0.82);
    margin-top: -2px !important;
  }
  body.gm-81 .pinfo { gap: 5px !important; }
  body.gm-81 .pavatar { width: 30px !important; height: 30px !important; font-size: 0.8rem !important; }
  body.gm-81 .pname-label { font-size: 0.62rem !important; }

  /* AKSİYON BARI — yatayda tek satır, kompakt, GÖRÜNÜR (kesilmesin!).
     6 buton (Çifte/Tek/Eli Aç/Ek Aç/İşle/Oto) 844px'e tek satır sığar. */
  body.gm-81 #o81-actions {
    flex-wrap: nowrap !important;
    gap: 4px !important;
    padding: 2px 4px !important;
    max-width: 100% !important;
  }
  body.gm-81 #o81-actions .o81-btn {
    padding: 5px 9px !important;
    font-size: 0.72rem !important;
    border-radius: 6px !important;
  }

  /* Round-info / çık / status üst köşeleri yemesin */
  body.gm-81 #round-info { transform: scale(0.82); transform-origin: top left; }
  body.gm-81 #status-msg { font-size: 0.7rem !important; }

  /* ═══════════════════════════════════════════════════════════════
     TAVLA (#tavla-game / #tg-*)
     Tavla zaten yatay-doğal (board geniş). Sorun: üst bar (76px) + alt
     kontrol kolonu (129px) dikey bütçeyi yiyor → board 110px'e iniyor,
     34px taşlar noktalardan taşıyor. Mevcut responsive kurallar GENİŞLİK
     kapılı (max-width 768/480) → 844px geniş-ama-kısa yatayda DEVREYE
     GİRMİYOR. Burada yükseklik kapılı kompakt sürüm.
     ═══════════════════════════════════════════════════════════════ */

  /* Üst bar — tek satır kompakt (76px → ~34px) */
  #tg-topbar {
    padding: 3px 12px !important;
    gap: 8px !important;
  }
  #tg-back-btn { padding: 3px 9px !important; font-size: 0.72rem !important; }
  #tg-info { flex-direction: row !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; }
  #tg-variant-label { font-size: 0.82rem !important; white-space: nowrap !important; }
  #tg-turn-label { font-size: 0.6rem !important; white-space: nowrap !important; }
  #tg-direction-hint { display: none !important; }
  #tg-scoreboard { gap: 4px !important; padding: 2px 6px !important; flex: 0 0 auto !important; }
  #tg-scoreboard .tg-sb-row { padding: 1px 4px !important; gap: 4px !important; }
  #tg-scoreboard .tg-sb-name { display: none !important; }
  #tg-scoreboard .tg-sb-val { font-size: 0.88rem !important; min-width: 16px !important; }
  #tg-scoreboard .tg-sb-dot { width: 8px !important; height: 8px !important; }
  #tg-cube { min-width: 28px !important; height: 22px !important; font-size: 0.74rem !important; }

  /* Board sarmalayıcı — boşluk küçük (board'a yer aç) */
  #tg-board-wrap { padding: 4px 10px !important; gap: 8px !important; }

  /* Taşlar + zar + kovalar + bar — kompakt (kısa board'a sığsın) */
  .tg-piece { width: 24px !important; height: 24px !important; font-size: 0.55rem !important; }
  .tg-bar-half .tg-piece { width: 20px !important; height: 20px !important; }
  #tg-top-row .tg-point-pieces .tg-piece { margin-bottom: -11px !important; }
  #tg-bot-row .tg-point-pieces .tg-piece { margin-top: -11px !important; }
  .tg-die { width: 34px !important; height: 34px !important; }
  .tg-pip { width: 6px !important; height: 6px !important; }
  .tg-bear-zone { width: 42px !important; }
  .tg-bowl { width: 34px !important; min-height: 52px !important; padding: 4px 2px !important; }
  .tg-bowl-piece { width: 20px !important; height: 20px !important; }
  .tg-bear-label { font-size: 0.5rem !important; }
  #tg-center-bar { flex: 0 0 30px !important; }
  .tg-board-bar { flex: 0 0 30px !important; }
  .tg-num-bar-gap { flex: 0 0 30px !important; }
  .tg-num-row { height: 14px !important; }
  .tg-num-cell { font-size: 0.46rem !important; }

  /* Kontrol barı — DİKEY kolon yerine TEK YATAY satır (129px → ~48px).
     Zar At + Pes/Çifte + (varsa Geri Al / Sırayı Bitir) yan yana. */
  #tg-controls {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 5px 14px !important;
  }
  #tg-roll-btn, #tg-end-btn {
    padding: 7px 18px !important;
    font-size: 0.82rem !important;
  }
  #tg-undo-btn { padding: 7px 14px !important; font-size: 0.78rem !important; }
  #tg-pes-btn { padding: 7px 12px !important; font-size: 0.78rem !important; }
  /* Mesaj — butonların yanında, kısa; satırı şişirmesin */
  #tg-msg {
    flex: 0 1 auto !important;
    font-size: 0.74rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 40vw !important;
  }
}