/* ==========================================================================
   okeydeck.css
   OkeyDeck masa katmanı. style.css ve realism.css'ten SONRA yüklenir.
   - Yalnızca masalarda (Okey / Poker) işleme ve süs katmanı ekler; ölçü,
     yerleşim ve oyun mantığı değişmez.
   - Giriş sayfası, lobi, üst çubuk ve cüzdan penceresi css/home.css içindedir.
   Palet: gece petrolü, ceviz, pirinç, fildişi.
   Yazı: Lora (masa yazıları, marka ile aynı ailede), gövde: sistem yazı tipi.
   ========================================================================== */

@font-face {
  font-family: "Lora";
  src: url("/fonts/Lora-Variable.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --od-night: #04121b;
  --od-night-2: #061a26;
  --od-petrol: #0b3a52;
  --od-petrol-2: #0f4a68;
  --od-ivory: #f6efdd;
  --od-text: #dbe5e9;
  --od-muted: #9db3bd;
  --od-brass: #e0b24e;
  --od-brass-hi: #fbe7a3;
  --od-brass-lo: #8f6420;
  --od-line: rgba(224, 178, 78, .28);
  --od-line-soft: rgba(224, 178, 78, .16);
  --od-ink: #1c1608;
  --od-serif: "Lora", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --od-brass-grad: linear-gradient(180deg, #fbe7a3 0%, #e0b24e 50%, #b88a2c 100%);
  --od-star: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cdefs%3E%3ClinearGradient%20id='b'%20x1='0'%20y1='0'%20x2='1'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%23fbe7a3'/%3E%3Cstop%20offset='.5'%20stop-color='%23e0b24e'/%3E%3Cstop%20offset='1'%20stop-color='%239a6d1f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d='M12.00,0.60%20L15.34,3.94%20L20.06,3.94%20L20.06,8.66%20L23.40,12.00%20L20.06,15.34%20L20.06,20.06%20L15.34,20.06%20L12.00,23.40%20L8.66,20.06%20L3.94,20.06%20L3.94,15.34%20L0.60,12.00%20L3.94,8.66%20L3.94,3.94%20L8.66,3.94Z'%20fill='url(%23b)'%20stroke='%233b2208'%20stroke-width='.7'%20stroke-linejoin='round'/%3E%3Cpath%20d='M14.01,7.16%20L14.84,9.16%20L16.84,9.99%20L16.01,12.00%20L16.84,14.01%20L14.84,14.84%20L14.01,16.84%20L12.00,16.01%20L9.99,16.84%20L9.16,14.84%20L7.16,14.01%20L7.99,12.00%20L7.16,9.99%20L9.16,9.16%20L9.99,7.16%20L12.00,7.99Z'%20fill='%235a3512'%20fill-opacity='.55'/%3E%3Ccircle%20cx='12.0'%20cy='12.0'%20r='1.68'%20fill='%23fbe7a3'/%3E%3C/svg%3E");
}

/* Oyun dışı sayfalar (üst çubuk, giriş, lobi, cüzdan penceresi) css/home.css içindedir. */

/* Oyun içinde: kompakt logo sol üstte */
body.in-game .topbar .brand {
  display: flex;
  align-items: center;
  flex: none;
  margin-right: 6px;
  line-height: 0;
}
body.in-game .topbar .brand picture { display: block; }
body.in-game .topbar .brand img { display: block; height: 42px; width: auto; max-width: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
body.in-game .topbar .userbox { width: auto; flex: 1 1 auto; min-width: 0; }

/* ==========================================================================
   OYUN İÇİ: OKEY MASASI İŞLEMELERİ
   Ceviz çerçeve, pirinç kakma çizgisi, köşe yıldızları, pirinç ıstaka başlıkları,
   kazınmış marka ve elmas zincirli ray.
   ========================================================================== */
body #okeyView .okey-arena {
  position: relative;
  box-shadow:
    inset 0 0 0 7px #4a2810,
    inset 0 0 0 8px #e0b24e,
    inset 0 0 0 9px #26130a,
    0 0 0 1px rgba(2, 15, 25, .85),
    0 16px 30px rgba(0, 0, 0, .5),
    inset 0 0 70px 9px rgba(0, 20, 40, .5);
}
/* ceviz damarı */
body #okeyView .okey-arena::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 7px;
  border: 0;
  border-radius: inherit;
  opacity: 1;
  background:
    var(--grain-wood),
    linear-gradient(180deg, rgba(255, 214, 160, .2), rgba(255, 214, 160, 0) 40%, rgba(0, 0, 0, .28));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
/* köşe yıldızları + ikinci ince kakma çizgisi */
body #okeyView .okey-arena::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 0;
  border-radius: inherit;
  opacity: 1;
  outline: 1px solid rgba(251, 231, 163, .34);
  outline-offset: -13px;
  background:
    var(--od-star) left 0 top 0 / 22px 22px no-repeat,
    var(--od-star) right 0 top 0 / 22px 22px no-repeat,
    var(--od-star) left 0 bottom 0 / 22px 22px no-repeat,
    var(--od-star) right 0 bottom 0 / 22px 22px no-repeat;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .55));
  pointer-events: none;
}
body #okeyView .okey-seat .who {
  border-color: rgba(224, 178, 78, .5);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 5px 12px rgba(0, 0, 0, .4), inset 0 0 12px rgba(0, 0, 0, .35);
}

/* Istaka */
body #okeyView .rack {
  background:
    url("/img/rack-engrave.svg") center bottom 1px / var(--engrave, auto 12px) no-repeat,
    linear-gradient(90deg, rgba(255, 238, 176, 0), rgba(255, 238, 176, .6) 50%, rgba(255, 238, 176, 0)) left 26px top 4px / calc(100% - 52px) 1px no-repeat,
    linear-gradient(90deg, rgba(90, 48, 8, 0), rgba(90, 48, 8, .45) 50%, rgba(90, 48, 8, 0)) left 26px bottom 11px / calc(100% - 52px) 1px no-repeat,
    linear-gradient(180deg, rgba(255, 228, 150, .6) 0, rgba(255, 228, 150, 0) 14px),
    linear-gradient(rgba(242, 170, 50, .62), rgba(242, 170, 50, .62)),
    var(--grain-wood),
    linear-gradient(180deg, #f4b440 0%, #e49c26 50%, #c97e14 100%);
}
body #okeyView .rack::before {
  background:
    var(--od-star) left 2px center / 12px 12px no-repeat,
    var(--od-star) right 2px center / 12px 12px no-repeat,
    radial-gradient(circle at 8px 14px, #2c1a05 0 2px, transparent 2.6px) left / 16px 100% no-repeat,
    radial-gradient(circle at 8px calc(100% - 14px), #2c1a05 0 2px, transparent 2.6px) left / 16px 100% no-repeat,
    radial-gradient(circle at 8px 14px, #2c1a05 0 2px, transparent 2.6px) right / 16px 100% no-repeat,
    radial-gradient(circle at 8px calc(100% - 14px), #2c1a05 0 2px, transparent 2.6px) right / 16px 100% no-repeat,
    linear-gradient(90deg, #8f6420 0%, #fbe7a3 38%, #e0b24e 62%, #9a6d1f 100%) left / 16px 100% no-repeat,
    linear-gradient(270deg, #8f6420 0%, #fbe7a3 38%, #e0b24e 62%, #9a6d1f 100%) right / 16px 100% no-repeat;
}
/* orta ray: pirinç çubuk */
body #okeyView .rack::after {
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(180deg, #fbe7a3 0%, #e0b24e 42%, #8f6420 100%);
  box-shadow: 0 1px 0 rgba(255, 238, 190, .45), 0 2px 3px rgba(60, 30, 4, .55);
}

body #okeyView .sort-btn {
  border-color: #c9a24a;
  box-shadow: inset 0 0 0 1px rgba(251, 231, 163, .28), inset 0 1px 0 rgba(255, 255, 255, .16), 0 3px 6px rgba(0, 0, 0, .4);
}

/* Çift sayısı: "Çift Diz" düğmesinin üstünde */
body #okeyView .sort-btn .sort-count {
  position: absolute;
  top: 7px;
  left: 50%;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 3px 9px 4px;
  transform: translateX(-50%);
  border: 1px solid #a98a3a;
  border-radius: 999px;
  background: linear-gradient(180deg, #fffdf6, #efe5c9);
  box-shadow: 0 2px 0 #8c7a4a, 0 3px 6px rgba(0, 0, 0, .4);
  color: #5a4724;
  font: 700 11px/1 "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
body #okeyView .sort-btn .sort-count[hidden] { display: none; }
body #okeyView .sort-btn .sort-count b { color: #b3261e; font: 800 17px/1 var(--od-serif); font-variant-numeric: lining-nums; }
body #okeyView .sort-btn .sort-count.ok { border-color: #2f9a58; background: linear-gradient(180deg, #eafff1, #c6f0d4); box-shadow: 0 2px 0 #1e6b3a, 0 0 12px rgba(82, 210, 124, .5); color: #1c5a34; }
body #okeyView .sort-btn .sort-count.ok b { color: #17803f; }
@media (max-width: 1180px) {
  body #okeyView .sort-btn .sort-count { top: 6px; padding: 2px 8px 3px; }
  body #okeyView .sort-btn .sort-count b { font-size: 15px; }
}
@media (max-width:760px) and (orientation: portrait), (max-width:760px) and (min-height: 521px) {
  body #okeyView .sort-btn .sort-count {
    position: static;
    order: 2;
    margin-left: 6px;
    padding: 1px 7px 2px;
    transform: none;
    box-shadow: 0 1px 0 #8c7a4a;
  }
  body #okeyView .sort-btn .sort-count b { font-size: 13px; }
}

/* Istaka toplamı: ıstakanın sağında, Seri Diz düğmesinin üstünde */
body #okeyView .rack-totals {
  position: absolute;
  z-index: 6;
  top: 6px;
  right: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 86px;
  height: 104px;
  padding: 6px 4px;
  overflow: hidden;
  border: 1px solid rgba(224, 178, 78, .75);
  border-radius: 10px;
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(36, 120, 160, .35), transparent 75%),
    linear-gradient(180deg, #0f3552, #071e31);
  box-shadow: inset 0 0 0 2px rgba(4, 16, 28, .9), inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 8px rgba(0, 0, 0, .45);
  color: var(--od-ivory);
  text-align: center;
  pointer-events: auto;
  cursor: default;
  transition: border-color .2s ease, box-shadow .2s ease;
}
body #okeyView .rack-totals[hidden] { display: none; }
body #okeyView .rack-totals .rt-label { display: block; color: #b9cdd6; font: 700 11px/1.1 "Segoe UI", system-ui, sans-serif; letter-spacing: .01em; }
body #okeyView .rack-totals .rt-main b {
  display: block;
  margin-top: 2px;
  color: var(--od-ivory);
  font: 700 31px/1 var(--od-serif);
  font-variant-numeric: lining-nums tabular-nums;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
body #okeyView .rack-totals .rt-hint {
  display: block;
  max-width: 100%;
  color: #e6c978;
  font: 600 10.5px/1.15 "Segoe UI", system-ui, sans-serif;
}
body #okeyView .rack-totals .rt-hint[hidden] { display: none; }
body #okeyView .rack-totals.ready {
  border-color: #52d27c;
  box-shadow: inset 0 0 0 2px rgba(4, 16, 28, .9), inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 14px rgba(82, 210, 124, .45), 0 4px 8px rgba(0, 0, 0, .45);
}
body #okeyView .rack-totals.ready .rt-main b,
body #okeyView .rack-totals.ready .rt-hint { color: #8ff5ad; }
body #okeyView .rack-totals.pairs-only { display: none; }
body #okeyView #sortSeries { top: 118px; }

@media (max-width: 1180px) {
  body #okeyView .rack-totals { width: 68px; height: 100px; }
  body #okeyView .rack-totals .rt-main b { font-size: 26px; }
  body #okeyView #sortSeries { top: 114px; }
}
@media (max-width:760px) and (orientation: portrait), (max-width:760px) and (min-height: 521px) {
  body #okeyView .rack-totals {
    position: static;
    flex-direction: row;
    gap: 10px;
    width: auto;
    height: 30px;
    padding: 2px 12px;
    order: 2;
  }
  body #okeyView .rack-totals .rt-main { display: flex; align-items: baseline; gap: 6px; }
  body #okeyView .rack-totals .rt-main b { margin: 0; font-size: 17px; }
  body #okeyView .rack-totals .rt-label { font-size: 10px; }
  body #okeyView .rack-totals .rt-hint { display: none; }
  body #okeyView #sortSeries { top: auto; order: 3; }
}

/* ==========================================================================
   OYUN İÇİ: POKER MASASI İŞLEMELERİ
   ========================================================================== */
body #pokerView .felt::before {
  outline: 1.5px solid rgba(251, 231, 163, .6);
  outline-offset: -9px;
  background:
    var(--od-star) left 14.645% top 14.645% / 19px 19px no-repeat,
    var(--od-star) right 14.645% top 14.645% / 19px 19px no-repeat,
    var(--od-star) left 14.645% bottom 14.645% / 19px 19px no-repeat,
    var(--od-star) right 14.645% bottom 14.645% / 19px 19px no-repeat;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .55));
}
body #pokerView .felt::after {
  content: "";
  position: absolute;
  inset: 34px 7%;
  z-index: 0;
  border: 1.5px solid rgba(255, 236, 180, .2);
  border-radius: 50%;
  background: url("/img/felt-emblem-faint.svg") 50% 37% / min(400px, 46%) auto no-repeat;
  pointer-events: none;
}

/* ==========================================================================
   DUYARLI DÜZEN
   ========================================================================== */
@media (max-width: 900px) {
  body.in-game .topbar .brand img {
    content: url("/img/okeydeck-mark.svg");
    width: 38px;
    height: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .game, .game .game-art, .btn { transition: none !important; }
  .game:hover .game-art { transform: none; }
}

/* Masadaki okey: yerini tutan taş elimizdeyse alınabilir */
body #okeyView .tile.okey-takeable {
  cursor: pointer;
  outline: 2px solid #ffe08a;
  outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(255, 224, 138, .28), 0 0 14px rgba(255, 224, 138, .75), 0 3px 0 #a99a78;
  animation: od-take-pulse 1.6s ease-in-out infinite;
}
body #okeyView .tile.okey-takeable:hover { transform: translateY(-2px); }
@keyframes od-take-pulse {
  50% { box-shadow: 0 0 0 4px rgba(255, 224, 138, .12), 0 0 6px rgba(255, 224, 138, .4), 0 3px 0 #a99a78; }
}
@media (prefers-reduced-motion: reduce) {
  body #okeyView .tile.okey-takeable { animation: none; }
}

/* Masaüstü ıstaka ölçüleri ve marka izi css/rack.css içindedir. */

/* Masa: ortadaki per alanında soluk altın amblem */
body #okeyView .meld-board { isolation: isolate; }
body #okeyView .meld-board::before {
  content: "";
  position: absolute;
  inset: 4% 3%;
  z-index: 1;
  background: url("/img/felt-emblem.svg") center / contain no-repeat;
  opacity: .26;
  pointer-events: none;
}
body #okeyView .meld-zone-content { position: relative; z-index: 2; }
/* Kapalı deste: simge yerine logo madalyonu */
body #okeyView .deck-stack .deck-mark {
  display: block;
  width: 30px;
  height: 30px;
  font-size: 0;
  background: url("/img/okeydeck-mark.svg") center / contain no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5));
}
@media (max-width:760px) and (orientation: portrait), (max-width:760px) and (min-height: 521px) { body #okeyView .deck-stack .deck-mark { display: none; } }

/* Poker kademeleri: masa renginde fişler, kademe notu */
.chip.tier i { background: radial-gradient(circle, var(--tg, #f4c453) 0 30%, transparent 32%), repeating-conic-gradient(#fff 0 12deg, var(--tc, #d83b4a) 12deg 30deg); border-color: color-mix(in srgb, var(--tc, #d83b4a) 60%, #000); }
#stakeSel.seg { gap: 8px; }
body:not(.in-game) .seg .stake-btn { min-width: 0; }
.tier-note { margin-top: 8px; padding: 7px 12px; border-radius: 10px; font-size: 13px; color: #e7ecf7; background: linear-gradient(90deg, color-mix(in srgb, var(--tc, #d83b4a) 38%, transparent), transparent); border-left: 3px solid var(--tc, #d83b4a); }
.tier-note b { color: #ffe9a3; }

/* Poker lobisi: 30 masa tutarı şehir adlarıyla ızgarada, ardından masa boyutu (oyuncu sayılarıyla) */
#stakeSel.stake-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
body:not(.in-game) .seg.stake-grid .stake-btn { padding: 7px 10px; font-size: 15px; text-align: left; }
.stake-grid .chip.tier { gap: 8px; align-items: center; }
.stake-grid .chip-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.stake-grid .chip-text b { font-size: 15px; }
.stake-grid .chip-text small { font-size: 11px; font-weight: 600; opacity: .78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stake-grid .chip i { width: 22px; height: 22px; }
.size-opt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.size-opt small { font-size: 11px; font-weight: 600; opacity: .8; }
@media (max-width: 560px) { #stakeSel.stake-grid { grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); } }
.join-fields .field.field-wide { flex: 1 1 100%; }
.field-wide #stakeSel.stake-grid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
/* uzun çevirilerde yazı düğmenin dışına taşmasın */
body #okeyView .sort-btn { overflow: hidden; overflow-wrap: anywhere; text-align: center; line-height: 1.1; }