/* ==========================================================================
   OkeyDeck ıstaka ve taşlar: turuncu ahşap, gri uç başlıkları, iki düz raf.
   Logo 1. rafa, "OkeyDeck" yazısı 2. rafa ahşabın içine kazınmıştır (taşların altında kalır).
   Taşlar düz beyaz yüzlü, altında gri halka; masadaki perlere işlenebilen (işlek) taşlarda halka
   kırmızı hedef olur (app.js içinde .layoffable sınıfı).
   Istaka düzeni yalnızca masaüstü genişliğinde (>=761px); dar ekranlar önceki düzenini korur.
   Tüm ölçüler --rw (ıstaka genişliği) üzerinden türer; boyutu değiştirmek için yalnızca --rw'yi ayarlayın.
   ========================================================================== */

/* ---- Taş yüzü (her genişlikte, masadaki tüm okey taşları) ---------------- */
:root {
  --tile-edge: 0 1px 0 rgba(58, 28, 0, .55);
  --tile-drop: 0 2px 3px rgba(40, 18, 0, .32);
}
body .tile,
body #okeyView .tile {
  border: 1px solid #d2d2d2;
  background: linear-gradient(180deg, #f9f9f9 0, #f2f2f2 4%, #f2f2f2 70%, #e3e3e3 71%, #dcdcdc 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), var(--tile-edge), var(--tile-drop);
  font-family: Arial, "Helvetica Neue", Helvetica, "Liberation Sans", sans-serif;
  font-weight: 700;
}
body .tile::before,
body #okeyView .tile::before { display: none; }
body .tile .tile-number,
body #okeyView .tile .tile-number { text-shadow: none; }
/* alt şeritteki gri halka (düz, üstten hafif içe gömülü) */
body .tile .tile-symbol,
body #okeyView .tile .tile-symbol {
  bottom: 4%;
  width: 40%;
  max-width: none;
  background: #dedede;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .75);
  opacity: 1;
}
body .tile .tile-symbol::before,
body #okeyView .tile .tile-symbol::before { display: none; }
/* işlek taş: halka kırmızı hedef olur */
body .tile.layoffable .tile-symbol::before,
body #okeyView .tile.layoffable .tile-symbol::before {
  display: block;
  inset: 9%;
  border-radius: 50%;
  background: radial-gradient(circle, #d3202c 0 20%, #fff 23% 38%, #d3202c 41% 60%, transparent 63%);
  -webkit-mask: none;
  mask: none;
}

@media (min-width: 761px), (orientation: landscape) and (max-height: 520px) {
  body #okeyView:not([hidden]) {
    --rw: clamp(420px, min(46vw, calc(100vw - 330px)), 640px);
    --cap: 12px;
    --tg: 2px;
    --groove: 4px;
    --lip: 3px;
    --tw: calc((var(--rw) - var(--cap) * 2 - var(--tg) * 14) / 15);
    --th: calc(var(--tw) * 1.38);
    --rowh: calc(var(--th) + 4px);
    grid-template-rows: minmax(0, 1fr) calc(var(--rowh) * 2 + var(--groove) + var(--lip) + 12px);
  }
  body #okeyView .rack-panel { position: relative; }

  /* ahşap: iki raf üstte parlak, altta koyulaşan turuncu; aralarında koyu oluk; uç başlıkları gri metal */
  body #okeyView .rack {
    left: 50%;
    right: auto;
    top: 0;
    bottom: auto;
    width: var(--rw);
    height: auto;
    justify-content: flex-start;
    transform: translateX(-50%);
    gap: var(--groove);
    padding: 0 var(--cap) var(--lip);
    border-radius: 4px;
    background:
      radial-gradient(circle at center, #2f2e2c 0 2.3px, #6b6455 2.7px 3.7px, transparent 4.2px) left center / var(--cap) 14px no-repeat,
      radial-gradient(circle at center, #2f2e2c 0 2.3px, #6b6455 2.7px 3.7px, transparent 4.2px) right center / var(--cap) 14px no-repeat,
      linear-gradient(90deg, #bab5a6 0, #9b9480 26%, #b4afa2 52%, #9e9783 76%, #797263 100%) left top / var(--cap) calc(100% - var(--lip)) no-repeat,
      linear-gradient(270deg, #bab5a6 0, #9b9480 26%, #b4afa2 52%, #9e9783 76%, #797263 100%) right top / var(--cap) calc(100% - var(--lip)) no-repeat,
      linear-gradient(180deg, #eaa713, #c98509) left bottom / 100% var(--lip) no-repeat,
      repeating-linear-gradient(92deg, rgba(60, 25, 0, .06) 0 1px, transparent 1px 11px) var(--cap) 0 / calc(100% - var(--cap) * 2) calc(var(--rowh) * 2 + var(--groove)) no-repeat,
      linear-gradient(180deg, #fbbb36 0, #fbbb36 1px, #e59d04 2px, #d68d04 22%, #be7503 50%, #a46105 80%, #7d4504 100%) var(--cap) 0 / calc(100% - var(--cap) * 2) var(--rowh) no-repeat,
      linear-gradient(180deg, #db8d0b 0, #d38209 14%, #c27a0b 40%, #b3650a 66%, #9b5508 86%, #85460a 100%) var(--cap) calc(var(--rowh) + var(--groove)) / calc(100% - var(--cap) * 2) var(--rowh) no-repeat,
      #5a2e03;
    box-shadow:
      0 0 0 1px rgba(64, 31, 0, .6),
      0 5px 9px -1px rgba(0, 0, 0, .5),
      0 12px 16px rgba(0, 0, 0, .22);
  }

  /* kazınmış marka: logo 1. rafa, isim 2. rafa. ::after koyu iz, ::before alt kenarda ince ışık.
     Raflar saydamdır, taşlar kazıntının üstünde durur. */
  body #okeyView .rack::before,
  body #okeyView .rack::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    pointer-events: none;
    -webkit-mask:
      url("/img/rack-logo.svg") 50% calc(var(--rowh) / 2 - var(--th) * .43) / calc(var(--th) * .86) calc(var(--th) * .86) no-repeat,
      url("/img/rack-name.svg") 50% calc(var(--rowh) * 1.5 + var(--groove) - var(--th) * .14) / calc(var(--th) * 1.3) calc(var(--th) * .28) no-repeat;
    mask:
      url("/img/rack-logo.svg") 50% calc(var(--rowh) / 2 - var(--th) * .43) / calc(var(--th) * .86) calc(var(--th) * .86) no-repeat,
      url("/img/rack-name.svg") 50% calc(var(--rowh) * 1.5 + var(--groove) - var(--th) * .14) / calc(var(--th) * 1.3) calc(var(--th) * .28) no-repeat;
  }
  body #okeyView .rack::after { background: rgba(84, 38, 0, .4); }
  body #okeyView .rack::before { background: rgba(255, 216, 120, .45); transform: translateY(1px); }

  body #okeyView .rack-row {
    position: relative;
    flex: none;
    width: 100%;
    height: var(--rowh);
    padding: 3px 0 1px;
    gap: var(--tg);
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
  }
  body #okeyView .rack-row[data-rack-row="top"] { z-index: 1; }
  body #okeyView .rack-row[data-rack-row="bottom"] { z-index: 2; }
  body #okeyView .rack-slot {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: 100%;
    border-radius: calc(var(--tw) * .13);
  }
  body #okeyView .rack-row .tile {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 100%;
    flex: 1 1 0;
    justify-content: flex-start;
    padding: calc(var(--th) * .094) 0 0;
    border-radius: calc(var(--tw) * .13);
    font-size: calc(var(--tw) * .74);
  }
  body #okeyView .rack-row .tile:hover { transform: translateY(-3px); }

  /* yan düğmeler ıstakaya bitişik; sol sütun tek düğme, sağ sütun toplam + seri diz */
  body #okeyView #sortPairs { left: calc(50% - var(--rw) / 2 - 82px); top: 6px; bottom: 12px; width: 72px; }
  body #okeyView #sortSeries { right: calc(50% - var(--rw) / 2 - 82px); width: 72px; top: calc(50% + 2px); bottom: 12px; }
  body #okeyView .rack-totals { right: calc(50% - var(--rw) / 2 - 82px); top: 6px; width: 72px; height: calc(50% - 8px); min-height: 0; }
  /* küçük ıstakaya göre küçültülmüş düğmeler */
  body #okeyView .sort-btn { gap: 4px; padding: 4px 3px; border-radius: 8px; font-size: 12px; letter-spacing: .2px; white-space: nowrap; }
  body #okeyView #sortSeries::before { width: 40px; height: 20px; }
  body #okeyView #sortPairs::before { width: 28px; height: 22px; }
  body #okeyView .rack-totals { padding: 4px 3px; }
  body #okeyView .rack-totals .rt-main b { font-size: 22px; }
}

@media (min-width: 761px) and (max-width: 1100px), (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  body #okeyView:not([hidden]) { --cap: 10px; }
  body #okeyView #sortPairs, body #okeyView #sortSeries, body #okeyView .rack-totals { width: 64px; }
  body #okeyView #sortPairs { left: calc(50% - var(--rw) / 2 - 74px); }
  body #okeyView #sortSeries, body #okeyView .rack-totals { right: calc(50% - var(--rw) / 2 - 74px); }
}