/* Masa araç takımı stilleri: masa örtüsü değişkenleri, oyuncu plakası, görünüm paneli. Oyundan bağımsızdır. */

/* ---- Masa örtüsü (tema) değişkenleri: .tk-felt ve [data-theme] taşıyan her masa kök öğesi ---- */
[data-theme] { --felt-a: #1f8a55; --felt-b: #0a3322; --rim-a: #8a5a2e; --rim-b: #3b2410; --felt-line: rgba(255, 255, 255, .1); --felt-ink: rgba(255, 255, 255, .88); --felt-glow: transparent; }
[data-theme="graphite"] { --felt-a: #4a5160; --felt-b: #14171d; --rim-a: #3a404c; --rim-b: #101319; }
[data-theme="midnight"] { --felt-a: #2a56c0; --felt-b: #0a1634; --rim-a: #2a4a94; --rim-b: #0a1534; }
[data-theme="burgundy"] { --felt-a: #9b2b3d; --felt-b: #2b0a10; --rim-a: #7a2434; --rim-b: #25080e; }
[data-theme="royal"] { --felt-a: #7a45d6; --felt-b: #1e0f45; --rim-a: #5a34a8; --rim-b: #1a0d3c; }
[data-theme="sand"] { --felt-a: #c8a56d; --felt-b: #5e4524; --rim-a: #8a6a3c; --rim-b: #4a3519; }
[data-theme="ocean"] { --felt-a: #1593a8; --felt-b: #052c3a; --rim-a: #0f6f80; --rim-b: #041f29; }
[data-theme="forest"] { --felt-a: #3f7d3a; --felt-b: #10270f; --rim-a: #5a4a2a; --rim-b: #2a2012; }
[data-theme="rose"] { --felt-a: #d77a97; --felt-b: #5a1f35; --rim-a: #a8506c; --rim-b: #4a1a2c; }
[data-theme="ice"] { --felt-a: #5aa8d6; --felt-b: #17415f; --rim-a: #8fc8e8; --rim-b: #2a6a96; }
[data-theme="neon"] { --felt-a: #1a2340; --felt-b: #05070f; --rim-a: #19f0ff; --rim-b: #ff2bd6; --felt-line: rgba(25, 240, 255, .25); --felt-glow: rgba(25, 240, 255, .28); }
[data-theme="gold"] { --felt-a: #c99a2e; --felt-b: #4a3208; --rim-a: #f1d16a; --rim-b: #7a5a12; }

/* ---- Oyuncu plakası ---- */
.tk-plate { position: relative; display: flex; align-items: center; gap: 10px; min-width: 190px; max-width: 100%; padding: 8px 14px 8px 8px; border-radius: 16px; color: #fff;
  background: linear-gradient(180deg, rgba(14, 20, 32, .62), rgba(8, 12, 20, .5)); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(6px); box-shadow: 0 6px 18px rgba(0, 0, 0, .28); transition: transform .12s, box-shadow .12s, border-color .12s; }
.tk-plate.clickable { cursor: pointer; } .tk-plate.clickable:hover, .tk-plate.clickable:focus-visible { transform: translateY(-2px); border-color: rgba(255, 255, 255, .4); outline: none; box-shadow: 0 10px 22px rgba(0, 0, 0, .35); }
.tk-plate.me { border-color: color-mix(in srgb, var(--accent) 55%, rgba(255, 255, 255, .2)); }
.tk-plate.turn { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 24px color-mix(in srgb, var(--accent) 38%, transparent); }
.tk-plate.away { opacity: .6; }
.tk-ava { position: relative; flex: none; }
.tk-ava .avatar { width: 46px; height: 46px; } .tk-ava .avatar img { border-radius: 14px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .22); }
.tk-plate.turn .tk-ava .avatar img { box-shadow: 0 0 0 2px var(--accent); }
.tk-crown { position: absolute; top: -9px; right: -8px; font-size: .95rem; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.tk-info { display: grid; gap: 1px; min-width: 0; }
.tk-name-line { display: flex; align-items: center; gap: 5px; min-width: 0; }
.tk-name { font-size: .92rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.tk-info small { color: rgba(255, 255, 255, .72); font-size: .7rem; }
.tk-chips { display: flex; gap: 5px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.tk-chip { font-size: .68rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; white-space: nowrap; }
.tk-chip.hot { background: var(--accent); color: var(--accent-ink); }
.tk-plate .badge { font-size: .56rem; padding: 1px 5px; }

/* ---- Görünüm paneli ---- */
.modal:has(.tk-look-wrap) { width: min(560px, 100%); }
.tk-look-wrap { display: grid; gap: 12px; } .tk-look-head { display: flex; align-items: center; justify-content: space-between; } .tk-look-head h3 { margin: 0; }
.tk-look { display: grid; gap: 16px; } .tk-look h4 { margin: 0 0 8px; font-size: .9rem; }
.tk-look-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.tk-look-item { display: grid; justify-items: center; gap: 6px; padding: 10px 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); text-align: center; }
.tk-look-item.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }
.tk-look-item.locked .tk-sw, .tk-look-item.locked .tk-back { opacity: .6; }
.tk-look-item b { font-size: .8rem; }
.tk-sw { width: 84px; height: 56px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .18); }
.tk-back { display: grid; place-items: center; width: 56px; height: 76px; }
.tk-back .pc { --cw: 52px; }

.seat-card.clickable { cursor: pointer; transition: transform .12s, border-color .12s; } .seat-card.clickable:hover, .seat-card.clickable:focus-visible { transform: translateY(-2px); border-color: var(--accent); outline: none; }

/* 101 Okey: istaka / taş stili önizlemeleri (Görünüm paneli ve mağaza) */
.lk-rack { width: 96px; height: 44px; border-radius: 10px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 4px; padding: 6px; box-shadow: inset 0 0 0 2px var(--edge); }
.lk-rack i { border-radius: 3px; background: rgba(0, 0, 0, .26); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.lk-tiles { display: inline-flex; gap: 3px; padding: 6px 8px; border-radius: 10px; background: linear-gradient(180deg, #7a4a1e, #54300f); }
.lk-tile { position: relative; width: 24px; height: 34px; border-radius: 4px; background: #faf8f0 url('/games/okey101/client/taslar.png') no-repeat; background-size: 1300% 500%; background-position: var(--bx) var(--by); box-shadow: 0 2px 0 #b9ad84; }
.lk-tile::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--tint); mix-blend-mode: multiply; }
/* Tavla önizlemeleri */
.lk-board { width: 96px; height: 56px; display: block; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); } .lk-checkers { width: 88px; height: 44px; display: block; }
.lk-dice { display: inline-flex; gap: 6px; } .lk-dice .tv-die-svg { width: 36px; height: 36px; display: block; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .4)); }