/* ==========================================================================
   realism.css  (v2)
   style.css'ten SONRA yüklenir. Yalnızca görünümü değiştirir: ölçü, yerleşim
   ve oyun mantığına dokunmaz. Seçiciler, style.css'teki katmanlı kuralları
   ezmek için #okeyView / #pokerView ile başlar.
   ========================================================================== */

:root {
  --felt-hi: #1b8a5f;
  --felt-mid: #10674a;
  --felt-lo: #0a4a34;
  --felt-deep: #062e20;

  --wood-hi: #b27a46;
  --wood-mid: #7a4b26;
  --wood-lo: #4a2a14;
  --wood-ink: #24130a;

  --brass: #e2bd78;
  --brass-lo: #9a7433;

  --glass-1: rgba(22, 36, 30, .93);
  --glass-2: rgba(8, 16, 13, .95);

  --ivory-1: #fffdf7;
  --ivory-2: #f7f0de;
  --ivory-3: #e9dcbd;

  --ink-red: #c62a3b;
  --ink-blue: #1d4fb6;
  --ink-black: #1b2230;
  --ink-yellow: #d68a08;

  --grain-wood: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='160'><filter id='w' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='0.004 0.09' numOctaves='4' seed='9' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.14  0 0 0 0 0.07  0 0 0 0 0.02  0 0 0 1.35 -0.5'/></filter><rect width='100%25' height='100%25' filter='url(%23w)'/></svg>");
  --grain-felt: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='f' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0.05  0 0 0 0 0.03  0 0 0 0.5 -0.08'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>");
  --grain-ivory: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='i' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.36  0 0 0 0 0.2  0 0 0 0.22 -0.04'/></filter><rect width='100%25' height='100%25' filter='url(%23i)'/></svg>");
  --grain-leather: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='l' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='turbulence' baseFrequency='0.65' numOctaves='2' seed='5' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.8 -0.3'/></filter><rect width='100%25' height='100%25' filter='url(%23l)'/></svg>");

  --wood-layers:
    var(--grain-wood),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 14px, rgba(0, 0, 0, .07) 14px 15px, rgba(255, 210, 150, .04) 15px 26px),
    linear-gradient(180deg, var(--wood-hi) 0%, var(--wood-mid) 42%, var(--wood-lo) 100%);
}

/* ==========================================================================
   OKEY  (düz, vektör tarzı: dolu yeşil keçe, yuvarlak avatarlar, beyaz taşlar,
   vidalı meşe ıstaka)
   ========================================================================== */
body #okeyView {
  --ok-felt-hi: #23844b;
  --ok-felt-mid: #186a3b;
  --ok-felt-lo: #0f4c2a;
  --ok-felt-deep: #093520;
  --ok-line: rgba(255, 255, 255, .92);
  --ok-grid: rgba(214, 246, 222, .15);
  --ok-plate: rgba(3, 38, 21, .82);
  --ok-plate-line: #2fa55c;
  --tile-red: #d92b3a;
  --tile-blue: #2a4bd0;
  --tile-black: #33353b;
  --tile-yellow: #f0a400;
}

/* ---- Masa ------------------------------------------------------------- */
body #okeyView .okey-arena {
  border: 7px solid transparent;
  border-radius: 12px;
  padding: 12px 20px;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 60%),
    var(--grain-felt),
    radial-gradient(ellipse 85% 85% at 50% 46%, var(--ok-felt-hi) 0%, var(--ok-felt-mid) 55%, var(--ok-felt-lo) 85%, var(--ok-felt-deep) 100%),
    linear-gradient(180deg, #6a4322, #3d2412);
  background-origin: padding-box, padding-box, padding-box, border-box;
  background-clip: padding-box, padding-box, padding-box, border-box;
  box-shadow:
    0 0 0 1px #1d0f06,
    0 14px 24px rgba(0, 0, 0, .5),
    inset 0 0 0 1px rgba(0, 0, 0, .5),
    inset 0 0 70px rgba(0, 0, 0, .4);
}
body #okeyView .okey-arena::before,
body #okeyView .okey-arena::after { content: none; }

/* ---- Oyuncular: yuvarlak avatar + koyu isim levhası --------------------- */
body #okeyView .okey-profile {
  width: auto;
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  animation: none;
}
body #okeyView .okey-seat { width: auto; max-width: none; }
body #okeyView .okey-seat.position-left,
body #okeyView .okey-seat.position-right { width: 124px; }
body #okeyView .okey-seat .seat-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
}
body #okeyView .okey-seat .avatar-frame { position: relative; z-index: 2; flex: none; }
body #okeyView .okey-seat .avatar.big {
  width: 62px;
  height: 62px;
  font-size: 34px;
  border: 3px solid #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .55);
}
body #okeyView .okey-seat .who {
  min-width: 112px;
  margin-left: -20px;
  padding: 6px 14px 6px 28px;
  border: 1.5px solid var(--ok-plate-line);
  border-radius: 5px;
  background: var(--ok-plate);
  box-shadow: 0 0 14px rgba(47, 205, 105, .28), inset 0 0 12px rgba(0, 0, 0, .35);
}
body #okeyView .okey-seat .who b {
  display: block;
  max-width: 130px;
  overflow: hidden;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body #okeyView .okey-seat .sub { color: #ffe45c; font-size: 11px; font-weight: 700; }
body #okeyView .okey-seat .sub .coin { display: none; }
body #okeyView .okey-seat.turn .who {
  border-color: #ffe08a;
  box-shadow: 0 0 0 1px rgba(255, 224, 138, .6), 0 0 18px rgba(255, 211, 95, .55), inset 0 0 12px rgba(0, 0, 0, .35);
}
/* Sağ ve sol koltuk: avatar üstte, levha altta */
body #okeyView .okey-seat.position-left .seat-top,
body #okeyView .okey-seat.position-right .seat-top { flex-direction: column; }
body #okeyView .okey-seat.position-left .who,
body #okeyView .okey-seat.position-right .who {
  min-width: 0;
  width: 100%;
  margin: -16px 0 0;
  padding: 20px 8px 6px;
  text-align: center;
}
body #okeyView .okey-seat.position-left .who b,
body #okeyView .okey-seat.position-right .who b { max-width: 100%; font-size: 12px; }
body #okeyView .okey-seat.position-left .avatar.big,
body #okeyView .okey-seat.position-right .avatar.big { width: 58px; height: 58px; font-size: 31px; }
body #okeyView .okey-empty-profile {
  border: 1.5px dashed rgba(255, 255, 255, .3);
  border-radius: 8px;
  background: rgba(0, 0, 0, .18);
  box-shadow: none;
}

/* ---- Perler ve atılan taşlar: beyaz çizgili ızgara ---------------------- */
body #okeyView .meld-board,
body #okeyView .discard-board {
  gap: 2px;
  border: 2px solid var(--ok-line);
  border-radius: 0;
  background: var(--ok-line);
}
body #okeyView .meld-zone,
body #okeyView .discard-column {
  border: 0;
  border-radius: 0;
  background-color: rgba(3, 44, 26, .78);
  background-image:
    repeating-linear-gradient(90deg, transparent 0 21px, var(--ok-grid) 21px 22px),
    repeating-linear-gradient(0deg, transparent 0 21px, var(--ok-grid) 21px 22px);
  box-shadow: none;
}
body #okeyView .discard-column {
  background-image: repeating-linear-gradient(0deg, transparent 0 21px, var(--ok-grid) 21px 22px);
}
body #okeyView .meld-zone-heading {
  align-self: flex-end;
  margin-top: 2px;
  padding: 1px 12px;
  border-radius: 0;
  background: rgba(214, 232, 214, .9);
  color: #264a33;
  font-weight: 700;
  letter-spacing: 0;
  text-shadow: none;
}
body #okeyView .meld-zone.is-me .meld-zone-heading { background: rgba(214, 232, 214, .9); color: #264a33; }
body #okeyView .discard-player-label {
  padding: 5px 2px;
  background: rgba(214, 232, 214, .9);
  color: #264a33;
  text-shadow: none;
}
body #okeyView .discard-column.is-me .discard-player-label { color: #1c6a3a; }
body #okeyView .meld-zone .meld-row { border: 0; background: transparent; box-shadow: none; }
/* Taş sürüklerken pere işleme: pere bırakılacak uç (sol/sağ) altın çizgiyle gösterilir */
body #okeyView .meld-zone .meld-row.layoff-hover {
  border-radius: 4px;
  background: rgba(255, 210, 74, .16);
  outline: 2px solid rgba(255, 210, 74, .95);
  outline-offset: 2px;
}
body #okeyView .meld-zone .meld-row.layoff-hover.side-start { box-shadow: inset 4px 0 0 #ffd24a; }
body #okeyView .meld-zone .meld-row.layoff-hover.side-end { box-shadow: inset -4px 0 0 #ffd24a; }

/* ---- Masa ortası -------------------------------------------------------- */
body #okeyView .table-mark {
  color: rgba(255, 255, 255, .34);
  letter-spacing: 5px;
  text-shadow: none;
}
body #okeyView .table-status {
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(0, 0, 0, .3);
  box-shadow: none;
}
body #okeyView .deck-wrap > small,
body #okeyView .last-discard-wrap > small,
body #okeyView .indicator-wrap > small {
  color: rgba(255, 255, 255, .72);
  font-weight: 700;
  letter-spacing: .3px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
}
/* Deste: beyaz boş taş + sayaç */
body #okeyView .deck-stack {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  min-height: 62px;
  padding: 0;
  border: 1px solid #d8d5cd;
  border-radius: 6px;
  background: linear-gradient(180deg, #fff, #f3f2ee);
  box-shadow: 2px 3px 0 #dad7cf, 4px 6px 0 #bcb9b0, 5px 12px 10px rgba(0, 0, 0, .4);
  transform: none;
}
body #okeyView .deck-stack::before { content: none; }
body #okeyView .deck-mark,
body #okeyView .deck-stack small { display: none; }
body #okeyView .deck-stack b {
  position: absolute;
  top: -9px;
  right: -13px;
  z-index: 2;
  min-width: 26px;
  padding: 4px 6px;
  border: 0;
  border-radius: 999px;
  background: #1b1b1f;
  color: #fff;
  font: 800 12px/1 system-ui, sans-serif;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .45);
}

/* ==========================================================================
   OKEY TAŞI: düz beyaz, kalın rakam, altında halka
   ========================================================================== */
body .tile,
body #okeyView .tile {
  border: 1px solid #d9d6cf;
  border-radius: 6px;
  background: linear-gradient(180deg, #ffffff 0%, #f6f5f1 100%);
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", "Segoe UI", Arial, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: 0;
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 0 #c7c3b9,
    0 3px 5px rgba(0, 0, 0, .32);
}
body .tile::before,
body #okeyView .tile::before { display: none; }
body .tile:hover,
body #okeyView .tile:hover { filter: none; }
body .tile-number,
body #okeyView .tile .tile-number { text-shadow: none; font-variant-numeric: tabular-nums; }
/* Halka: rakamın altında içi boş daire */
body .tile .tile-symbol,
body #okeyView .tile .tile-symbol {
  position: absolute;
  left: 50%;
  right: auto;
  bottom: 11%;
  width: 24%;
  max-width: 12px;
  aspect-ratio: 1;
  height: auto;
  font-size: 0;
  line-height: 0;
  transform: translateX(-50%);
  border: 2.2px solid currentColor;
  border-radius: 50%;
  opacity: .85;
  box-shadow: none;
}
/* Sahte okey: yeşil yıldız */
body .tile[data-fake="1"],
body #okeyView .tile[data-fake="1"] { color: #1f9b52 !important; }
body .tile[data-fake="1"] .tile-symbol,
body #okeyView .tile[data-fake="1"] .tile-symbol {
  width: auto;
  max-width: none;
  aspect-ratio: auto;
  border: 0;
  font-size: 12px;
  line-height: 1;
  opacity: .9;
}
body #okeyView .discard-tile .tile-symbol,
body #okeyView .meld-row .tile .tile-symbol { bottom: 8%; }

body #okeyView .tile.wild,
body .tile.wild {
  outline: 0;
  box-shadow: inset 0 0 0 2px rgba(31, 155, 82, .55), 0 2px 0 #c7c3b9, 0 3px 5px rgba(0, 0, 0, .32), 0 0 12px rgba(60, 220, 130, .4);
}
body #okeyView .tile.selected,
body .tile.selected {
  outline: 0;
  box-shadow: inset 0 0 0 2.5px #ffcf3f, 0 2px 0 #c7c3b9, 0 10px 12px rgba(0, 0, 0, .34), 0 0 16px rgba(255, 207, 63, .5);
}
body #okeyView .tile.last-discard {
  outline: 0;
  opacity: 1;
  box-shadow: inset 0 0 0 2px #ffcf3f, 0 2px 0 #c7c3b9, 0 0 12px rgba(255, 207, 63, .5);
}
body #okeyView .tile.discard-tile { opacity: 1; }
body .tile-drag-ghost {
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #c7c3b9, 0 20px 24px rgba(0, 0, 0, .5);
}

.tile-backs { display: flex; flex-wrap: nowrap; gap: 1.5px; margin-top: 5px; }
.tile-back {
  display: block;
  flex: 0 1 8px;
  min-width: 3px;
  height: 12px;
  border-radius: 1.5px;
  background: linear-gradient(180deg, #fff, #e9e7e0);
  box-shadow: 0 1px 0 #b9b5aa, 0 2px 2px rgba(0, 0, 0, .4);
}

/* ==========================================================================
   ISTAKA: açık meşe + vidalı koyu uç başlıkları
   ========================================================================== */
body #okeyView .rack {
  padding: 10px 42px 12px;
  border: 0;
  border-radius: 6px;
  background:
    linear-gradient(rgba(214, 152, 84, .62), rgba(214, 152, 84, .62)),
    var(--grain-wood),
    linear-gradient(180deg, #d79a56 0%, #c2823c 50%, #ad6f30 100%);
  box-shadow:
    0 0 0 1px #3a2010,
    0 8px 14px rgba(0, 0, 0, .5),
    inset 0 2px 0 rgba(255, 228, 176, .5),
    inset 0 -4px 0 rgba(70, 38, 12, .35);
}
/* Uç başlıkları ve vidalar (rack::before tüm ıstakayı kaplar) */
body #okeyView .rack::before {
  inset: 0;
  z-index: 0;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  background:
    radial-gradient(circle at 15px 17px, #d9cebb 0 2.4px, #66553f 3px 4.6px, transparent 5.2px) left / 30px 100% no-repeat,
    radial-gradient(circle at 15px calc(100% - 17px), #d9cebb 0 2.4px, #66553f 3px 4.6px, transparent 5.2px) left / 30px 100% no-repeat,
    radial-gradient(circle at 15px 17px, #d9cebb 0 2.4px, #66553f 3px 4.6px, transparent 5.2px) right / 30px 100% no-repeat,
    radial-gradient(circle at 15px calc(100% - 17px), #d9cebb 0 2.4px, #66553f 3px 4.6px, transparent 5.2px) right / 30px 100% no-repeat,
    linear-gradient(90deg, #2b190c 0%, #4a2d16 55%, #3a2310 100%) left / 30px 100% no-repeat,
    linear-gradient(270deg, #2b190c 0%, #4a2d16 55%, #3a2310 100%) right / 30px 100% no-repeat;
}
/* İki sıra arasındaki ince oluk */
body #okeyView .rack::after {
  left: 42px;
  right: 42px;
  height: 3px;
  border: 0;
  border-radius: 2px;
  background: rgba(70, 38, 12, .5);
  box-shadow: 0 1px 0 rgba(255, 226, 170, .35);
}
body #okeyView .rack-row {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  scrollbar-width: none;
}
body #okeyView .rack-row::-webkit-scrollbar { display: none; }
body #okeyView .rack-slot,
body #okeyView .rack-slot:empty {
  border: 0;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
}
body #okeyView .rack-slot.drop-target {
  background: rgba(255, 255, 255, .22);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8);
}

/* Istaka üstündeki satır: solda "Çift diz", sağda "Seri diz" */
body #okeyView .rack-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  color: rgba(255, 255, 255, .8);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
body #okeyView .rack-sort-controls { display: contents; }
body #okeyView #sortPairs { order: 1; }
body #okeyView .rack-title { order: 2; flex: 1; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .3px; }
body #okeyView .rack-tip { display: none; }
body #okeyView .hand-count { order: 3; color: rgba(255, 255, 255, .7); font-size: 11px; }
body #okeyView #sortSeries { order: 4; }
body #okeyView .sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 4px 16px 4px 8px;
  border: 1px solid #000;
  border-radius: 6px;
  background: linear-gradient(180deg, #34363b, #131417);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 3px 6px rgba(0, 0, 0, .4);
}
body #okeyView .sort-btn::before {
  content: "";
  flex: none;
  width: 46px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: contain;
}
body #okeyView #sortSeries::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 24'><g font-family='Arial' font-weight='800' font-size='13' text-anchor='middle'><rect x='1' y='1' width='13' height='20' rx='2.5' fill='%23fff'/><rect x='16' y='1' width='13' height='20' rx='2.5' fill='%23fff'/><rect x='31' y='1' width='13' height='20' rx='2.5' fill='%23fff'/><text x='7.5' y='14' fill='%231f9bd6'>1</text><text x='22.5' y='14' fill='%231f9bd6'>2</text><text x='37.5' y='14' fill='%231f9bd6'>3</text><path transform='translate(5.7 16.4) scale(.1125)' d='M16 28.5C14.5 27.3 2 18.5 2 9.6 2 4.8 5.6 1.5 9.7 1.5c2.6 0 5 1.4 6.3 3.6C17.3 2.9 19.7 1.5 22.3 1.5 26.4 1.5 30 4.8 30 9.6 30 18.5 17.5 27.3 16 28.5Z' fill='%231f9bd6'/><path transform='translate(20.7 16.4) scale(.1125)' d='M16 28.5C14.5 27.3 2 18.5 2 9.6 2 4.8 5.6 1.5 9.7 1.5c2.6 0 5 1.4 6.3 3.6C17.3 2.9 19.7 1.5 22.3 1.5 26.4 1.5 30 4.8 30 9.6 30 18.5 17.5 27.3 16 28.5Z' fill='%231f9bd6'/><path transform='translate(35.7 16.4) scale(.1125)' d='M16 28.5C14.5 27.3 2 18.5 2 9.6 2 4.8 5.6 1.5 9.7 1.5c2.6 0 5 1.4 6.3 3.6C17.3 2.9 19.7 1.5 22.3 1.5 26.4 1.5 30 4.8 30 9.6 30 18.5 17.5 27.3 16 28.5Z' fill='%231f9bd6'/></g></svg>");
}
body #okeyView #sortPairs::before {
  width: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31 24'><g font-family='Arial' font-weight='800' font-size='13' text-anchor='middle'><rect x='1' y='1' width='13' height='20' rx='2.5' fill='%23fff'/><rect x='16' y='1' width='13' height='20' rx='2.5' fill='%23fff'/><text x='7.5' y='14' fill='%23b3202a'>5</text><text x='22.5' y='14' fill='%23b3202a'>5</text><path transform='translate(5.7 16.4) scale(.1125)' d='M16 28.5C14.5 27.3 2 18.5 2 9.6 2 4.8 5.6 1.5 9.7 1.5c2.6 0 5 1.4 6.3 3.6C17.3 2.9 19.7 1.5 22.3 1.5 26.4 1.5 30 4.8 30 9.6 30 18.5 17.5 27.3 16 28.5Z' fill='%23b3202a'/><path transform='translate(20.7 16.4) scale(.1125)' d='M16 28.5C14.5 27.3 2 18.5 2 9.6 2 4.8 5.6 1.5 9.7 1.5c2.6 0 5 1.4 6.3 3.6C17.3 2.9 19.7 1.5 22.3 1.5 26.4 1.5 30 4.8 30 9.6 30 18.5 17.5 27.3 16 28.5Z' fill='%23b3202a'/></g></svg>");
}
body #okeyView .sort-btn:hover:not(:disabled) { background: linear-gradient(180deg, #44474e, #1b1c20); border-color: #000; }
body #okeyView .sort-btn:active:not(:disabled) { transform: translateY(1px); }

/* Hamle düğmeleri: çekme düğmeleri solda, aç/at düğmeleri sağda, ıstakanın hemen üstünde */
body #okeyView .rack-panel .okey-actions {
  position: static;
  display: contents;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
}
body #okeyView .rack-panel .draw-actions,
body #okeyView .rack-panel .turn-actions {
  position: absolute;
  z-index: 6;
  bottom: calc(100% + 42px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: auto;
}
body #okeyView .rack-panel .draw-actions { left: 10px; align-items: flex-start; }
body #okeyView .rack-panel .turn-actions { right: 10px; align-items: flex-end; }
body #okeyView .rack-panel .turn-actions[hidden] { display: none; }
body #okeyView .rack-panel .okey-actions .btn {
  min-width: 0;
  min-height: 32px;
  padding: 5px 16px;
  border: 1px solid #000;
  border-radius: 6px;
  background: linear-gradient(180deg, #34363b, #131417);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 3px 6px rgba(0, 0, 0, .4);
}
body #okeyView .rack-panel .turn-actions .btn {
  max-width: 138px;
  padding: 5px 12px;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
}
body #okeyView .rack-panel .okey-actions #drawStack,
body #okeyView .rack-panel .okey-actions #openMeld {
  background: linear-gradient(180deg, #34b868, #1b7d42);
  border-color: #0c3d1f;
}
body #okeyView .rack-panel .okey-actions #discardSelected {
  background: linear-gradient(180deg, #d4424a, #96222b);
  border-color: #4a0d12;
}
body #okeyView .rack-panel .okey-actions .btn:disabled { opacity: .45; box-shadow: none; }
body #okeyView .rack-panel .okey-actions .btn:not(:disabled):hover { filter: brightness(1.1); }
body #okeyView .rack-panel .okey-actions .check {
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, .35);
  color: #fff;
  font-size: 11px;
}

/* ==========================================================================
   OKEY PLUS GÖRÜNÜMÜ (v13): petrol mavisi zemin, koyu ızgaralı per alanları,
   kompakt oyuncu levhaları, köşe yığınları, turuncu ıstaka, yan dizme düğmeleri.
   ========================================================================== */
html body.in-game {
  background:
    radial-gradient(ellipse 60% 36% at 50% 0%, rgba(70, 160, 200, .3) 0%, rgba(70, 160, 200, 0) 72%),
    radial-gradient(ellipse 130% 100% at 50% 40%, #0f3d58 0%, #0a2b40 58%, #061b2b 100%);
  background-attachment: fixed;
}
html body.in-game .topbar {
  background: linear-gradient(180deg, rgba(3, 18, 30, .92), rgba(3, 18, 30, .5));
  border-bottom-color: rgba(110, 170, 205, .2);
}

body #okeyView {
  --ok-line: rgba(196, 220, 236, .55);
  --ok-grid: rgba(110, 170, 205, .14);
  --swirl: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><g fill='none' stroke='white' stroke-opacity='.06' stroke-width='3.5' stroke-linecap='round'><path d='M6 78c0-38 28-66 66-66s60 28 60 60-22 50-50 50-38-16-38-38 16-32 38-32 28 13 28 27'/><path d='M150 4c-38 0-66 28-66 62'/><path d='M66 150c38 0 60-28 60-50'/><path d='M0 146c20 0 36-14 36-34'/></g></svg>");
}

/* ---- Masa: petrol mavisi zemin; per alanları koyu ızgara ------------------ */
body #okeyView .okey-arena {
  border: 0;
  border-radius: 10px;
  background:
    var(--swirl) 0 0 / 150px 150px,
    radial-gradient(ellipse 85% 90% at 50% 40%, #1d6a8d 0%, #165a7a 55%, #0f4562 100%);
  background-origin: padding-box;
  background-clip: border-box;
  box-shadow:
    0 0 0 1px rgba(2, 15, 25, .85),
    0 16px 30px rgba(0, 0, 0, .5),
    inset 0 0 60px rgba(0, 20, 40, .45);
}
body #okeyView .table-mark { color: rgba(185, 220, 240, .17); }
body #okeyView .table-status {
  border: 1px solid rgba(130, 180, 210, .3);
  background: rgba(4, 22, 38, .6);
  color: #e6f4ff;
}
body #okeyView .deck-wrap > small,
body #okeyView .last-discard-wrap > small,
body #okeyView .indicator-wrap > small { color: rgba(205, 230, 245, .85); }

body #okeyView .meld-board,
body #okeyView .discard-board {
  gap: 1px;
  border: 1px solid var(--ok-line);
  border-radius: 5px;
  background: var(--ok-line);
  box-shadow: 0 4px 12px rgba(0, 15, 30, .4);
  overflow: hidden;
}
body #okeyView .meld-zone,
body #okeyView .discard-column { background-color: rgba(10, 46, 74, .93); }
body #okeyView .meld-zone-heading,
body #okeyView .discard-player-label {
  background: rgba(3, 18, 32, .75);
  color: #b9d6e8;
  border-radius: 3px;
}
body #okeyView .meld-zone.is-me .meld-zone-heading,
body #okeyView .discard-column.is-me .discard-player-label { background: rgba(3, 18, 32, .75); color: #ffd04d; }

/* Sağdaki alan: açılan çiftler (her oyuncuya bir sütun, çiftler alt alta) */
body #okeyView .discard-board { left: 70%; width: 21%; border-radius: 3px; overflow: visible; }
body #okeyView .discard-board::before {
  content: "ÇİFTLER";
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  color: rgba(205, 230, 245, .75);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-align: center;
}
body #okeyView .discard-column-tiles { gap: 4px; padding: 5px 2px 2px; }
body #okeyView .pair-row {
  display: flex;
  flex: none;
  justify-content: center;
  gap: 1px;
  width: 100%;
}
body #okeyView .pair-row .tile,
body #okeyView .discard-column .pair-row .tile.discard-tile {
  flex: 0 1 auto;
  width: 46%;
  max-width: 30px;
  min-width: 0;
  height: auto;
  aspect-ratio: 0.72;
  padding: 1px 0 4px;
  font-size: clamp(11px, 1.35vw, 18px);
}

/* ---- Oyuncu levhaları: kare avatar + koyu çubuk --------------------------- */
body #okeyView .okey-profile { display: flex; flex-direction: column; align-items: center; }
body #okeyView .okey-seat,
body #okeyView .okey-seat.position-left,
body #okeyView .okey-seat.position-right { width: auto; overflow: visible; max-height: none; }
body #okeyView .okey-seat .seat-top {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-width: 156px;
  height: 42px;
  padding: 3px 14px 3px 3px;
  border: 1px solid rgba(130, 180, 210, .4);
  border-radius: 5px;
  background: linear-gradient(180deg, #162d40, #09171f);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .1);
}
body #okeyView .okey-seat .avatar-frame { position: relative; display: block; flex: none; width: 34px; height: 34px; padding: 0; }
body #okeyView .okey-seat .turn-ring { display: none; }
body #okeyView .okey-seat .avatar.big,
body #okeyView .okey-seat.position-left .avatar.big,
body #okeyView .okey-seat.position-right .avatar.big {
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 19px;
  border: 1.5px solid #d4e4ee;
  border-radius: 3px;
  box-shadow: none;
}
body #okeyView .okey-seat .who,
body #okeyView .okey-seat.position-left .who,
body #okeyView .okey-seat.position-right .who {
  position: static;
  min-width: 0;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: left;
}
body #okeyView .okey-seat .who b,
body #okeyView .okey-seat.position-left .who b,
body #okeyView .okey-seat.position-right .who b {
  max-width: 150px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .2px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
body #okeyView .okey-seat .sub { display: none; }
body #okeyView .okey-seat .who .sub:has(.dot.off) { display: flex; color: #ff9d9d; font-size: 10px; }

/* Sol ve sağ: dikey levha, yazı dikey */
body #okeyView .okey-seat.position-left .seat-top,
body #okeyView .okey-seat.position-right .seat-top {
  flex-direction: column;
  min-width: 0;
  width: 44px;
  height: auto;
  min-height: 128px;
  padding: 4px 4px 10px;
  gap: 8px;
}
body #okeyView .okey-seat.position-left .who,
body #okeyView .okey-seat.position-right .who { writing-mode: vertical-rl; }
body #okeyView .okey-seat.position-left .who { transform: rotate(180deg); }
body #okeyView .okey-seat.position-left .who b,
body #okeyView .okey-seat.position-right .who b { max-width: none; max-height: 130px; }

body #okeyView .okey-seat.turn .who { box-shadow: none; }

/* Sıra göstergesi: levhanın içi süreyle azalan renkli dolgu olur (yeşil → sarı → kırmızı),
   dolgunun ucunda yağmur gibi dökülen noktalar akar. --turn-progress ve --turn-rgb app.js'den gelir. */
body #okeyView .okey-seat .seat-top { --turn-progress: 100%; --turn-rgb: 118, 204, 52; }
body #okeyView .okey-seat.turn .seat-top {
  border-color: rgb(var(--turn-rgb));
  background:
    linear-gradient(90deg, rgba(var(--turn-rgb), .62), rgba(var(--turn-rgb), .38)) no-repeat 0 0 / var(--turn-progress) 100%,
    linear-gradient(180deg, #162d40, #09171f);
  box-shadow: 0 0 0 1px rgb(var(--turn-rgb)), 0 0 16px rgba(var(--turn-rgb), .55), 0 4px 10px rgba(0, 0, 0, .45);
  transition: background-size .26s linear, border-color .26s linear;
  animation: okpTurn 1.6s ease-in-out infinite;
}
@keyframes okpTurn { 50% { box-shadow: 0 0 0 1px rgb(var(--turn-rgb)), 0 0 26px rgba(var(--turn-rgb), .85), 0 4px 10px rgba(0, 0, 0, .45); } }
body #okeyView .okey-seat.turn .seat-top::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 5px 6px, rgba(255, 255, 255, .95) 0 1.3px, transparent 1.9px),
    radial-gradient(circle at 4px 9px, rgba(var(--turn-rgb), 1) 0 1.5px, transparent 2.2px),
    radial-gradient(circle at 3px 4px, rgba(255, 255, 255, .85) 0 1px, transparent 1.6px),
    radial-gradient(circle at 6px 3px, rgba(255, 255, 255, .7) 0 .8px, transparent 1.3px),
    radial-gradient(circle at 4px 5px, rgba(var(--turn-rgb), 1) 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 3px 7px, rgba(255, 255, 255, .9) 0 1.1px, transparent 1.7px);
  background-size: 23px 31px, 17px 29px, 13px 19px, 29px 37px, 11px 23px, 19px 41px;
  background-position: 3px 0, 9px 11px, 1px 5px, 14px 20px, 6px 2px, 2px 17px;
  -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--turn-progress) - 20px), #000 calc(var(--turn-progress) - 6px), #000 calc(var(--turn-progress) + 1px), transparent calc(var(--turn-progress) + 13px));
          mask-image: linear-gradient(90deg, transparent calc(var(--turn-progress) - 20px), #000 calc(var(--turn-progress) - 6px), #000 calc(var(--turn-progress) + 1px), transparent calc(var(--turn-progress) + 13px));
  animation: okpRain .8s linear infinite;
}
@keyframes okpRain {
  to { background-position: 3px 62px, 9px 40px, 1px 43px, 14px 57px, 6px 25px, 2px 58px; }
}
body #okeyView .okey-seat.turn .seat-top .who { position: relative; z-index: 1; }
/* Dikey levhalar (sol/sağ): dolgu yukarıdan aşağı azalır */
body #okeyView .okey-seat.turn.position-left .seat-top,
body #okeyView .okey-seat.turn.position-right .seat-top {
  background:
    linear-gradient(180deg, rgba(var(--turn-rgb), .62), rgba(var(--turn-rgb), .38)) no-repeat 0 0 / 100% var(--turn-progress),
    linear-gradient(180deg, #162d40, #09171f);
}
body #okeyView .okey-seat.turn.position-left .seat-top::before,
body #okeyView .okey-seat.turn.position-right .seat-top::before {
  -webkit-mask-image: linear-gradient(180deg, transparent calc(var(--turn-progress) - 20px), #000 calc(var(--turn-progress) - 6px), #000 calc(var(--turn-progress) + 1px), transparent calc(var(--turn-progress) + 13px));
          mask-image: linear-gradient(180deg, transparent calc(var(--turn-progress) - 20px), #000 calc(var(--turn-progress) - 6px), #000 calc(var(--turn-progress) + 1px), transparent calc(var(--turn-progress) + 13px));
}
/* Üstteki süre göstergesi de aynı renge döner */
body:has(#okeyView:not([hidden])) .timer:not(:empty) {
  color: rgb(var(--turn-rgb, 118, 204, 52));
  border-color: rgb(var(--turn-rgb, 118, 204, 52));
  transition: color .26s linear, border-color .26s linear;
}

/* Rakip taş sayısı: levhanın altında ince taş sırası */
body #okeyView .okey-seat .tile-backs { display: none; }
body #okeyView .okey-seat.position-left .tile-backs,
body #okeyView .okey-seat.position-right .tile-backs { flex-direction: column; width: 14px; gap: 1.5px; }
body #okeyView .okey-seat.position-left .tile-back,
body #okeyView .okey-seat.position-right .tile-back { flex: none; width: 100%; min-width: 0; height: 4px; }

/* ---- Köşe yığınları: her oyuncunun attığı taş --------------------------- */
body #okeyView .okey-piles { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
body #okeyView .seat-pile {
  position: absolute;
  display: grid;
  place-items: center;
  width: 58px;
  height: 76px;
  border: 1px solid rgba(130, 180, 210, .28);
  border-radius: 9px;
  background: rgba(3, 22, 38, .55);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45);
}
/* Okey sırası saat yönünün tersine: attığın taş sağdaki oyuncuya gider, taşı soldaki oyuncunun yığınından çekersin.
   Her oyuncunun yığını kendi sağ elinin tarafındaki köşededir. */
body #okeyView .seat-pile.pile-bottom { right: 22px; bottom: 14px; }
body #okeyView .seat-pile.pile-right { right: 22px; top: 14px; }
body #okeyView .seat-pile.pile-top { left: 22px; top: 14px; }
body #okeyView .seat-pile.pile-left { left: 22px; bottom: 14px; }
/* Taş sürüklerken atma hedefi: sağ alttaki kendi yığının */
body #okeyView .seat-pile.discard-ready {
  border: 2px dashed rgba(255, 210, 74, .85);
  box-shadow: 0 0 14px rgba(255, 210, 74, .45), inset 0 2px 6px rgba(0, 0, 0, .45);
  animation: okpDiscardReady 1s ease-in-out infinite;
}
body #okeyView .seat-pile.discard-hover {
  border: 2px solid #ffd24a;
  background: rgba(255, 210, 74, .26);
  box-shadow: 0 0 0 3px rgba(255, 210, 74, .85), 0 0 26px rgba(255, 210, 74, .95);
  transform: scale(1.1);
  animation: none;
}
@keyframes okpDiscardReady { 50% { box-shadow: 0 0 24px rgba(255, 210, 74, .85), inset 0 2px 6px rgba(0, 0, 0, .45); } }
body #okeyView .seat-pile .tile {
  width: 46px;
  height: 64px;
  padding: 2px;
  font-size: 27px;
  cursor: default;
  pointer-events: none;
  transform: none;
}
body #okeyView .seat-pile .tile .tile-symbol { bottom: 9%; max-width: 16px; }
body #okeyView .seat-pile .pile-count {
  position: absolute;
  top: -8px;
  right: -9px;
  z-index: 2;
  min-width: 20px;
  padding: 3px 5px;
  border-radius: 999px;
  background: #0a2a44;
  color: #fff;
  font: 800 11px/1 system-ui, sans-serif;
  text-align: center;
  box-shadow: 0 0 0 1.5px #bcd8ea, 0 2px 4px rgba(0, 0, 0, .5);
}
body #okeyView .seat-pile.draw-source { pointer-events: auto; cursor: pointer; border-color: #ffb400; box-shadow: 0 0 16px rgba(255, 180, 0, .65), inset 0 2px 6px rgba(0, 0, 0, .45); }
body #okeyView .seat-pile.draw-source .tile { animation: okpBob 1.1s ease-in-out infinite; }
body #okeyView .seat-pile.draw-source * { pointer-events: none; }
@keyframes okpBob { 50% { transform: translateY(-4px); } }

/* ---- Taşlar: 3D, kalın kenarlı, parlak yüzlü ---------------------------- */
:root {
  --tile-edge: 0 1px 0 #dde0e5, 0 2px 0 #c9cdd3, 0 3px 0 #b4b9c0, 0 4px 0 #9ea4ac, 0 5px 0 #868c95;
  --tile-drop: 0 8px 7px rgba(0, 0, 0, .34), 0 14px 18px rgba(0, 0, 0, .26);
  --heart: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29'><path d='M16 28.5C14.5 27.3 2 18.5 2 9.6 2 4.8 5.6 1.5 9.7 1.5c2.6 0 5 1.4 6.3 3.6C17.3 2.9 19.7 1.5 22.3 1.5 26.4 1.5 30 4.8 30 9.6 30 18.5 17.5 27.3 16 28.5Z'/></svg>");
}
body .tile,
body #okeyView .tile {
  border: 1px solid #cdd1d7;
  border-radius: 6px;
  background:
    linear-gradient(158deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 36%),
    linear-gradient(180deg, #ffffff 0%, #f4f5f7 55%, #e5e8ec 100%);
  box-shadow:
    inset 0 2px 1px #ffffff,
    inset 0 0 0 1px rgba(255, 255, 255, .85),
    inset 2px 0 3px rgba(255, 255, 255, .6),
    inset -2px 0 3px rgba(130, 138, 150, .2),
    inset 0 -5px 7px rgba(110, 118, 132, .22),
    var(--tile-edge),
    var(--tile-drop);
  transition: transform .16s cubic-bezier(.2, .8, .25, 1), box-shadow .16s ease;
}
/* Yüzeydeki ışık yansıması */
body .tile::before,
body #okeyView .tile::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .55) 0, rgba(255, 255, 255, 0) 22%),
    radial-gradient(ellipse 70% 45% at 28% 8%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}
body #okeyView .tile .tile-number,
body .tile .tile-number { text-shadow: 0 1px 0 rgba(255, 255, 255, .95), 0 2px 2px rgba(0, 0, 0, .16); }
/* Taşın altındaki oyuk: yuvarlak çukur, içinde rakamla aynı renkte küçük kalp */
body .tile .tile-symbol,
body #okeyView .tile .tile-symbol {
  position: absolute;
  left: 50%;
  right: auto;
  bottom: 8%;
  width: 31%;
  max-width: 23px;
  height: auto;
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 62% 68%, #f7f8fa 0%, #e2e5e9 60%, #ced2d8 100%);
  box-shadow:
    inset 2px 2px 3px rgba(35, 42, 55, .62),
    inset 1px 1px 1px rgba(35, 42, 55, .3),
    inset -1px -1px 2px rgba(255, 255, 255, .95),
    0 1px 0 #ffffff;
  opacity: 1;
  font-size: 0;
  line-height: 0;
  transform: translateX(-50%);
  filter: none;
}
body .tile .tile-symbol::before,
body #okeyView .tile .tile-symbol::before {
  content: "";
  position: absolute;
  inset: 27% 22% 23% 22%;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, 0) 70%),
    currentColor;
  -webkit-mask: var(--heart) center / 100% 100% no-repeat;
  mask: var(--heart) center / 100% 100% no-repeat;
}
/* Sahte okey: yıldız kalır, oyuk yok */
body .tile[data-fake="1"] .tile-symbol,
body #okeyView .tile[data-fake="1"] .tile-symbol {
  width: auto;
  max-width: none;
  aspect-ratio: auto;
  bottom: 11%;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: 12px;
  line-height: 1;
}
body .tile[data-fake="1"] .tile-symbol::before,
body #okeyView .tile[data-fake="1"] .tile-symbol::before { display: none; }

/* Masaüstünde sıralar kaydırmaz; taşın kalınlığı ve gölgesi kesilmesin */
/* Taşlar arası boşluk en aza indirildi */
body #okeyView .rack-row { gap: 1px; padding-left: 1px; padding-right: 1px; }
body #okeyView .meld-row { gap: 1px; }
@media (min-width: 761px), (orientation: landscape) and (max-height: 520px) {
  body #okeyView .rack { gap: 10px; }
  body #okeyView .rack-row { overflow: visible; height: calc((100% - 10px) / 2); }
}
/* Istakadaki taş: üzerine gelince hafifçe kalkar */
body #okeyView .rack-row .tile:hover { transform: translateY(-4px); }
body #okeyView #hand.is-dragging .tile:hover { transform: none; }
body #okeyView .tile.dragging {
  opacity: .3;
  transform: none;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6), var(--tile-edge);
}
body #okeyView .tile.tile-land { animation: okpLand .26s cubic-bezier(.2, .8, .25, 1.2); }
@keyframes okpLand { 40% { transform: translateY(-5px); } }

body #okeyView .tile.wild,
body .tile.wild {
  box-shadow:
    inset 0 0 0 2px rgba(31, 155, 82, .65),
    inset 0 2px 1px #fff,
    var(--tile-edge),
    var(--tile-drop),
    0 0 14px rgba(60, 220, 130, .5);
}
/* Istakadaki gerçek okey kapalı (ters) taş gibi görünür: düz beyaz yüz, sayı ve simge yok */
body #okeyView .tile.okey-closed .tile-number,
body #okeyView .tile.okey-closed .tile-symbol,
body .tile.okey-closed .tile-number,
body .tile.okey-closed .tile-symbol { visibility: hidden; }
body #okeyView .tile.selected,
body .tile.selected {
  transform: translateY(-8px);
  box-shadow:
    inset 0 0 0 2.5px #ffb400,
    inset 0 2px 1px #fff,
    var(--tile-edge),
    0 16px 14px rgba(0, 0, 0, .34),
    0 0 16px rgba(255, 180, 0, .55);
}
body #okeyView .tile.last-discard {
  box-shadow:
    inset 0 0 0 2px #ffb400,
    inset 0 2px 1px #fff,
    var(--tile-edge),
    0 0 12px rgba(255, 180, 0, .5);
}
/* Sürüklenen taş: kaldırılmış, gölgesi derin */
body .tile-drag-ghost {
  left: 0;
  top: 0;
  opacity: 1;
  transform-origin: 50% 50%;
  will-change: transform;
  transition: none !important;
  box-shadow:
    inset 0 2px 1px #fff,
    inset 0 -5px 7px rgba(110, 118, 132, .22),
    var(--tile-edge),
    0 22px 20px rgba(0, 0, 0, .35),
    0 36px 34px rgba(0, 0, 0, .25),
    0 0 0 2px rgba(255, 255, 255, .35);
}
.tile-back {
  background: linear-gradient(180deg, #ffffff, #e9ebee);
  box-shadow: 0 1px 0 #c3c7cd, 0 2px 0 #a5aab1, 0 3px 0 #868c95, 0 5px 4px rgba(0, 0, 0, .4);
}
body #okeyView .deck-stack {
  border-color: #cdd1d7;
  background: linear-gradient(180deg, #ffffff, #f0f1f3);
  box-shadow:
    inset 0 2px 1px #fff,
    2px 3px 0 #e1e3e7, 4px 6px 0 #c3c7cd, 6px 9px 0 #a5aab1, 8px 12px 0 #868c95,
    10px 20px 14px rgba(0, 0, 0, .45);
}
body #okeyView .deck-stack b { background: #0a2a44; box-shadow: 0 0 0 1.5px #bcd8ea, 0 2px 4px rgba(0, 0, 0, .5); }

/* ---- Istaka: turuncu ahşap, krem uç başlıkları ---------------------------- */
body #okeyView .rack-panel {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
body #okeyView .rack {
  left: 100px;
  right: 100px;
  padding: 12px 26px 14px;
  border-radius: 6px;
  background:
    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%);
  box-shadow:
    0 0 0 1px #5a3008,
    0 6px 0 #7d4510,
    0 7px 0 #3d1f05,
    0 14px 18px rgba(0, 0, 0, .5),
    inset 0 2px 0 rgba(255, 238, 176, .7),
    inset 0 -3px 0 rgba(120, 62, 6, .35);
}
body #okeyView .rack::before {
  background:
    radial-gradient(circle at 8px 14px, #3c392f 0 2px, transparent 2.6px) left / 16px 100% no-repeat,
    radial-gradient(circle at 8px calc(100% - 14px), #3c392f 0 2px, transparent 2.6px) left / 16px 100% no-repeat,
    radial-gradient(circle at 8px 14px, #3c392f 0 2px, transparent 2.6px) right / 16px 100% no-repeat,
    radial-gradient(circle at 8px calc(100% - 14px), #3c392f 0 2px, transparent 2.6px) right / 16px 100% no-repeat,
    linear-gradient(90deg, #86806f 0%, #d7d2c3 45%, #aaa595 100%) left / 16px 100% no-repeat,
    linear-gradient(270deg, #86806f 0%, #d7d2c3 45%, #aaa595 100%) right / 16px 100% no-repeat;
}
body #okeyView .rack::after {
  left: 26px;
  right: 26px;
  height: 4px;
  background: linear-gradient(180deg, #a85f12, #cf8a24);
  box-shadow: 0 1px 0 rgba(255, 232, 170, .5);
}

/* Çift Diz / Seri Diz: ıstakanın iki yanında dikey düğme */
body #okeyView .rack-heading { display: contents; }
body #okeyView .rack-title,
body #okeyView .hand-count { display: none; }
body #okeyView .sort-btn {
  position: absolute;
  z-index: 6;
  top: 6px;
  bottom: 14px;
  width: 86px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border: 1px solid #2f6aa0;
  border-radius: 10px;
  background: linear-gradient(180deg, #1d4f80, #0d2a4d);
  color: #fff;
  font: 800 15px/1.05 "Arial Narrow", "Roboto Condensed", "Segoe UI", system-ui, sans-serif;
  letter-spacing: .4px;
  text-align: center;
  text-transform: uppercase;
  white-space: normal;
  box-shadow: inset 0 0 0 2px rgba(8, 26, 54, .9), inset 0 1px 0 rgba(255, 255, 255, .25), 0 4px 8px rgba(0, 0, 0, .45);
}
body #okeyView #sortPairs { left: 6px; }
body #okeyView #sortSeries { right: 6px; }
body #okeyView .sort-btn::before { width: 58px; height: 34px; }
body #okeyView #sortPairs::before { width: 40px; }
body #okeyView .sort-btn:hover:not(:disabled) { background: linear-gradient(180deg, #27619c, #123662); border-color: #66a3dc; }

/* ---- Taş çekme: deste ve atılan yığın sürüklenir, ıstakaya bırakılır ------- */
body #okeyView .deck-stack.draw-ready,
body #okeyView .seat-pile.draw-source {
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
body #okeyView .deck-stack.draw-ready { animation: okpDrawGlow 1.2s ease-in-out infinite; }
@keyframes okpDrawGlow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 190, 40, 0)); }
  50% { filter: drop-shadow(0 0 10px rgba(255, 190, 40, .95)); }
}
body #okeyView .rack.draw-hover {
  outline: 3px solid rgba(255, 214, 80, .95);
  outline-offset: 3px;
  filter: brightness(1.08);
}
body .tile-drag-ghost.draw-ghost { background: linear-gradient(180deg, #ffffff, #f0f1f3); }

/* ---- Hamle düğmeleri: ıstakanın hemen üstünde, oyuncu levhasının yanında --- */
body #okeyView .rack-panel .draw-actions,
body #okeyView .rack-panel .turn-actions {
  bottom: calc(100% + 14px);
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}
body #okeyView .rack-panel .draw-actions { left: auto; right: calc(50% + 120px); justify-content: flex-end; max-width: calc(50% - 170px); }
body #okeyView .rack-panel .turn-actions { right: auto; left: calc(50% + 120px); justify-content: flex-start; max-width: calc(50% - 170px); }
body #okeyView .rack-panel .turn-actions .btn { max-width: 190px; }
body #okeyView .rack-panel .okey-actions .btn {
  border: 1px solid rgba(0, 0, 0, .45);
  background: linear-gradient(180deg, #5a6b86, #39475f);
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 0 rgba(0, 0, 0, .4), 0 6px 8px rgba(0, 0, 0, .3);
}
body #okeyView .rack-panel .okey-actions #drawStack { background: linear-gradient(180deg, #52c25a, #2c8f35); border-color: #145a1a; }
body #okeyView .rack-panel .okey-actions #drawDiscard { background: linear-gradient(180deg, #3f9aee, #1f66bd); border-color: #0d3a73; }
body #okeyView .rack-panel .okey-actions #openMeld,
body #okeyView .rack-panel .okey-actions #showIndicator,
body #okeyView .rack-panel .okey-actions #returnDiscard { background: linear-gradient(180deg, #f6a62a, #d97a0a); border-color: #7a3f00; }
body #okeyView .rack-panel .okey-actions #openPairs { background: linear-gradient(180deg, #9b7be6, #6140b4); border-color: #2f1c63; }
body #okeyView .rack-panel .okey-actions #discardSelected { background: linear-gradient(180deg, #e8545a, #b42a31); border-color: #5e0f14; }
body #okeyView .rack-panel .okey-actions .btn:disabled { opacity: .5; filter: saturate(.55); }
body #okeyView .rack-panel .okey-actions .btn:not(:disabled):active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 0 rgba(0, 0, 0, .4); }
body #okeyView .rack-panel .okey-actions .check { background: rgba(4, 22, 38, .65); }

@media (max-width: 1180px) {
  body #okeyView .rack-row .tile { font-size: clamp(22px, 3.1vw, 36px); }
  body #okeyView .rack { left: 78px; right: 78px; padding-left: 22px; padding-right: 22px; }
  body #okeyView .sort-btn { width: 68px; font-size: 13px; }
  body #okeyView .sort-btn::before { width: 44px; height: 26px; }
  body #okeyView #sortPairs::before { width: 32px; }
  body #okeyView .seat-pile { width: 50px; height: 66px; }
  body #okeyView .seat-pile .tile { width: 40px; height: 56px; font-size: 23px; }
}
@media (max-width:760px) and (orientation: portrait), (max-width:760px) and (min-height: 521px) {
  body #okeyView .okey-seat .seat-top { min-width: 110px; height: 36px; }
  body #okeyView .okey-seat .avatar-frame,
  body #okeyView .okey-seat .avatar.big { width: 28px; height: 28px; font-size: 16px; }
  body #okeyView .okey-seat .who b { font-size: 11px; max-width: 90px; }
  body #okeyView .okey-seat.position-left .seat-top,
  body #okeyView .okey-seat.position-right .seat-top { width: 36px; min-height: 100px; }
  body #okeyView .seat-pile { width: 40px; height: 54px; }
  body #okeyView .seat-pile .tile { width: 32px; height: 44px; font-size: 19px; }
  body #okeyView .seat-pile.pile-left, body #okeyView .seat-pile.pile-top { left: 8px; }
  body #okeyView .seat-pile.pile-bottom, body #okeyView .seat-pile.pile-right { right: 8px; }
  body #okeyView .rack { left: 0; right: 0; padding-left: 22px; padding-right: 22px; }
  body #okeyView .rack-heading {
    position: absolute;
    top: -34px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
  }
  body #okeyView .sort-btn {
    position: static;
    flex-direction: row;
    width: auto;
    height: 30px;
    padding: 2px 10px;
    font-size: 11px;
    pointer-events: auto;
  }
  body #okeyView .sort-btn::before { width: 34px; height: 20px; }
  body #okeyView #sortPairs::before { width: 24px; }
  body #okeyView #sortPairs { order: 1; }
  body #okeyView #sortSeries { order: 2; }
  body #okeyView .rack-panel .draw-actions,
  body #okeyView .rack-panel .turn-actions { bottom: calc(100% + 46px); max-width: 46%; }
  body #okeyView .rack-panel .draw-actions { right: auto; left: 8px; justify-content: flex-start; }
  body #okeyView .rack-panel .turn-actions { left: auto; right: 8px; justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
  body #okeyView .okey-seat.turn .seat-top,
  body #okeyView .okey-seat.turn .seat-top::before,
  body #okeyView .seat-pile.discard-ready,
  body #okeyView .seat-pile.draw-source .tile { animation: none; }
}

/* ==========================================================================
   POKER
   ========================================================================== */
body #pokerView .felt {
  width: min(100%, 1000px);
  min-height: 0;
  aspect-ratio: 2.1 / 1;
  margin: 44px auto 56px;
  padding: 0;
  border: 30px solid transparent;
  border-radius: 50% / 50%;
  background:
    radial-gradient(ellipse 58% 52% at 50% 40%, rgba(176, 255, 214, .2) 0%, rgba(176, 255, 214, 0) 72%),
    var(--grain-felt),
    radial-gradient(ellipse at 50% 42%, var(--felt-hi) 0%, var(--felt-mid) 50%, var(--felt-lo) 84%, var(--felt-deep) 100%),
    var(--wood-layers);
  background-origin: padding-box, padding-box, padding-box, border-box, border-box, border-box;
  background-clip: padding-box, padding-box, padding-box, border-box, border-box, border-box;
  box-shadow:
    0 0 0 1px var(--wood-ink),
    0 30px 40px rgba(0, 0, 0, .55),
    0 8px 12px rgba(0, 0, 0, .4),
    /* yastıklı deri ray */
    inset 0 0 0 11px #26262b,
    inset 0 0 0 12px #0c0c0e,
    inset 0 0 0 13px rgba(0, 0, 0, .5),
    inset 0 14px 30px 12px rgba(0, 0, 0, .35),
    inset 0 0 100px 12px rgba(0, 0, 0, .25);
}
body #pokerView .felt::before {
  content: "";
  position: absolute;
  inset: -30px;
  border-radius: 50% / 50%;
  box-shadow:
    inset 0 2px 0 rgba(255, 228, 180, .38),
    inset 0 -3px 0 rgba(0, 0, 0, .5);
  pointer-events: none;
}
body #pokerView .felt::after { content: none; }

/* Koltuklar oval masanın çevresinde */
body #pokerView .pseats {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 3;
}
body #pokerView .pseats .seat {
  position: absolute;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 10px;
  width: 256px;
  padding: 8px 12px 9px 8px;
  border: 1px solid rgba(226, 189, 120, .34);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--glass-1), var(--glass-2));
  box-shadow:
    0 8px 16px rgba(0, 0, 0, .4),
    inset 0 1px 0 rgba(255, 238, 205, .1);
}
body #pokerView .pseats .seat > .seat-top { grid-column: 1; grid-row: 1; min-width: 0; gap: 8px; }
body #pokerView .pseats .seat .avatar.big { width: 42px; height: 42px; font-size: 23px; }
body #pokerView .pseats .seat .who { min-width: 0; }
body #pokerView .pseats .seat .who b { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body #pokerView .pseats .seat > .board { grid-column: 2; grid-row: 1; }
body #pokerView .pseats .seat > .seat-info { grid-column: 1 / -1; grid-row: 2; }
body #pokerView .pseats .seat.empty { background: rgba(0, 0, 0, .22); border-style: dashed; }
body #pokerView .pseat-0 { left: 50%; bottom: -40px; transform: translateX(-50%); }
body #pokerView .pseat-1 { left: -34px; top: 50%; transform: translateY(-50%); }
body #pokerView .pseat-2 { left: 50%; top: -42px; transform: translateX(-50%); }
body #pokerView .pseat-3 { right: -34px; top: 50%; transform: translateY(-50%); }
body #pokerView .pseats .seat.turn {
  border-color: rgba(255, 224, 138, .95);
  box-shadow: 0 0 0 1px rgba(255, 224, 138, .55), 0 0 26px rgba(255, 211, 95, .42), 0 8px 16px rgba(0, 0, 0, .4);
}
body #pokerView .pseats .seat .seat-info { margin-top: 0; }
body #pokerView .pseats .seat .board { min-height: 0; margin: 0; justify-content: flex-end; gap: 3px; }

/* Masa ortası: ortak kartlar ve havuz */
body #pokerView .center {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 62%;
  margin: 0;
  transform: translate(-50%, -52%);
}
body #pokerView .center .board { min-height: 90px; margin: 0 0 12px; gap: 8px; }
body #pokerView .center::before {
  content: "";
  position: absolute;
  inset: -26px -14px -22px;
  border: 1.5px solid rgba(240, 220, 160, .2);
  border-radius: 50%;
  pointer-events: none;
}
body #pokerView .pot {
  position: relative;
  border-color: rgba(226, 189, 120, .55);
  background: rgba(0, 0, 0, .4);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}
body #pokerView .mycards { margin-top: 62px; }

/* Kartlar: köşe göstergeli klasik yüz */
body .pcard {
  position: relative;
  width: 58px;
  height: 82px;
  border: 1px solid #cdc6b5;
  border-radius: 6px;
  background:
    var(--grain-ivory),
    linear-gradient(160deg, #ffffff 0%, #f7f4ea 70%, #ece7d7 100%);
  color: var(--ink-black);
  font-family: Georgia, "Times New Roman", serif;
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 0 #d3ccb9,
    0 2px 0 #bbb39d,
    0 6px 9px rgba(0, 0, 0, .46),
    0 12px 16px rgba(0, 0, 0, .22);
}
body .pcard.red { color: var(--ink-red); }
body .pcard[data-r]::before,
body .pcard[data-r]::after {
  content: attr(data-r) "\A" attr(data-s);
  white-space: pre;
  position: absolute;
  font: 800 13px/1.05 Georgia, serif;
  text-align: center;
}
body .pcard[data-r]::before { top: 4px; left: 5px; }
body .pcard[data-r]::after { bottom: 4px; right: 5px; transform: rotate(180deg); }
body .pcard[data-r] span:first-child { display: none; }
body .pcard[data-r] span:last-child { font-size: 34px; line-height: 1; }
body .pcard.small { width: 36px; height: 52px; border-radius: 5px; }
body .pcard.small[data-r]::before,
body .pcard.small[data-r]::after { font-size: 8px; }
body .pcard.small[data-r]::before { top: 2px; left: 3px; }
body .pcard.small[data-r]::after { bottom: 2px; right: 3px; }
body .pcard.small[data-r] span:last-child { font-size: 19px; }
/* Kart arkası */
body .pcard.back {
  border: 3px solid #f7f3e8;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .15) 0 5px, transparent 6px),
    repeating-linear-gradient(45deg, #8f2033 0 4px, #6a1424 4px 8px);
  box-shadow:
    inset 0 0 0 2px #7a1727,
    inset 0 0 0 3px rgba(255, 255, 255, .5),
    0 1px 0 #d3ccb9, 0 2px 0 #bbb39d,
    0 6px 9px rgba(0, 0, 0, .46);
}
body .pcard.back::before,
body .pcard.back::after { content: none; }

/* Eldeki kartlar: hafif yelpaze */
body #pokerView .mycards .hole { display: flex; justify-content: center; }
body #pokerView .mycards .hole .pcard { width: 74px; height: 104px; }
body #pokerView .mycards .hole .pcard[data-r] span:last-child { font-size: 44px; }
body #pokerView .mycards .hole .pcard[data-r]::before,
body #pokerView .mycards .hole .pcard[data-r]::after { font-size: 16px; }
body #pokerView .mycards .hole .pcard:nth-child(1) { transform: rotate(-5deg) translateX(8px); }
body #pokerView .mycards .hole .pcard:nth-child(2) { transform: rotate(5deg) translateX(-8px); }

/* Fişler: kenar bantlı casino fişi */
body .chip i {
  display: inline-block;
  width: 17px;
  height: 17px;
  margin-right: 5px;
  vertical-align: -4px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #f4efe2 0 27%, transparent 28%),
    repeating-conic-gradient(#f7f3e8 0 12deg, var(--chip, #1f6f8b) 12deg 45deg);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, .5),
    0 1px 0 rgba(0, 0, 0, .55),
    0 2px 0 var(--chip-dark, #124657),
    0 3px 3px rgba(0, 0, 0, .5);
}
body .chip.gold i { --chip: #c48a14; --chip-dark: #7f560a; }
body .chip.blue i { --chip: #1c55c7; --chip-dark: #123a8a; }
body .betchip .chip i { --chip: #b3202f; --chip-dark: #741019; }

@media (max-width: 920px) {
  body #pokerView .felt {
    width: 100%;
    aspect-ratio: auto;
    margin: 18px 0 24px;
    padding: 16px;
    border-width: 18px;
    border-radius: 80px;
  }
  body #pokerView .felt::before { inset: -18px; border-radius: 80px; }
  body #pokerView .pseats { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  body #pokerView .pseats .seat { position: static; width: auto; transform: none; grid-template-columns: minmax(0, 1fr); }
  body #pokerView .pseats .seat > .seat-top,
  body #pokerView .pseats .seat > .seat-info,
  body #pokerView .pseats .seat > .board { grid-column: 1; grid-row: auto; }
  body #pokerView .pseats .seat > .board { justify-content: flex-start; }
  body #pokerView .center { position: relative; top: auto; left: auto; width: 100%; margin: 14px 0 4px; transform: none; }
  body #pokerView .center::before { display: none; }
  body #pokerView .mycards { margin-top: 18px; }
}

@media (max-width:760px) and (orientation: portrait), (max-width:760px) and (min-height: 521px) {
  .tile-backs { display: none; }
  body #okeyView .okey-seat.position-top,
  body #okeyView .okey-seat.position-bottom { width: max-content; max-width: 100%; }
  body #okeyView .okey-seat.position-top .okey-profile,
  body #okeyView .okey-seat.position-bottom .okey-profile { flex: none; width: auto; }
  body #okeyView .okey-seat .avatar.big { width: 50px; height: 50px; font-size: 27px; }
  body #okeyView .okey-seat .who { min-width: 92px; padding-left: 24px; }
  body #okeyView .okey-seat .who b { font-size: 12px; max-width: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  body .pcard { animation: none; }
}