:root {
  --felt-1: #13704f;
  --felt-2: #0b3d2e;
  --felt-edge: #062a1f;
  --wood-1: #8a5a2b;
  --wood-2: #5e3a17;
  --wood-3: #3f260e;
  --ivory-1: #fffdf5;
  --ivory-2: #ece2c6;
  --gold: #f2c14e;
  --gold-2: #d99a1e;
  --ink: #f4f1e8;
  --ink-dim: #b9c9bf;
  --panel: rgba(4, 28, 20, .72);
  --panel-2: rgba(255, 255, 255, .07);
  --red: #d32f2f;
  --yellow: #d18f00;
  --blue: #1565c0;
  --black: #1d1d1d;
  --green: #2e7d32;
  --danger: #ff6b5b;
  --cols: 15;
  --tw: min(52px, calc((min(100vw, 980px) - 40px) / var(--cols)));
  --th: calc(var(--tw) * 1.36);
  font-synthesis: none;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(120% 90% at 50% 20%, var(--felt-1), var(--felt-2) 60%, var(--felt-edge));
  color: var(--ink);
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
button { font: inherit; color: inherit; }
.hidden { display: none !important; }
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; }

/* ---------- butonlar ---------- */
.btn {
  border: 0; cursor: pointer; border-radius: 12px; padding: 10px 16px; font-weight: 600;
  background: var(--panel-2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  transition: transform .08s ease, filter .15s ease, opacity .15s;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn:disabled { opacity: .45; cursor: default; filter: none; transform: none; }
.btn.primary { background: linear-gradient(180deg, #ffd66b, var(--gold-2)); color: #3a2400; box-shadow: 0 6px 18px rgba(217,154,30,.35), inset 0 -2px 0 rgba(0,0,0,.15); }
.btn.big { padding: 14px 18px; font-size: 18px; width: 100%; }
.btn.gift { background: linear-gradient(180deg, #ff8a65, #e2553a); color: #fff; }
.btn.ad { background: linear-gradient(180deg, #5cc8ff, #1e88e5); color: #fff; }
.btn.ghost { background: rgba(0,0,0,.22); }
.btn.small { padding: 6px 10px; font-size: 13px; border-radius: 10px; }
.btn.icon { padding-inline: 10px; }
.btn.act { background: linear-gradient(180deg, #2f8f69, #1d6b4c); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 3px 10px rgba(0,0,0,.25); }
.btn.act.hot { background: linear-gradient(180deg, #ffd66b, var(--gold-2)); color: #3a2400; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(242,193,78,.25); } }

/* ---------- giriş ---------- */
#scr-login { align-items: center; justify-content: center; padding: 16px; }
.login-card {
  width: min(420px, 100%); background: var(--panel); border-radius: 22px; padding: 26px 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
}
.logo { text-align: center; margin-bottom: 8px; }
.logo-tiles { display: flex; justify-content: center; gap: 8px; }
.lt {
  width: 52px; height: 70px; border-radius: 9px; display: grid; place-items: center; font-weight: 900; font-size: 36px;
  background: linear-gradient(180deg, var(--ivory-1), var(--ivory-2)); box-shadow: 0 6px 0 #c9bb93, 0 10px 18px rgba(0,0,0,.35);
  transform: rotate(-4deg);
}
.lt:nth-child(2) { transform: rotate(3deg) translateY(-4px); }
.lt:nth-child(3) { transform: rotate(-2deg) translateY(2px); }
.lt:nth-child(4) { transform: rotate(5deg); }
.logo-sub { margin-top: 14px; color: var(--ink-dim); letter-spacing: .04em; }
.logo-sub em { color: var(--gold); font-style: normal; }
.pitch { text-align: center; font-size: 16px; margin: 14px 0 18px; }
.pitch b { color: var(--gold); }
.fld { display: block; font-size: 13px; color: var(--ink-dim); margin: 10px 0 6px; }
.fld input {
  display: block; width: 100%; margin-top: 6px; padding: 12px 14px; border-radius: 12px; border: 0; font-size: 17px;
  background: rgba(255,255,255,.95); color: #1b2a22; outline: 3px solid transparent; user-select: text; -webkit-user-select: text;
}
.fld input:focus { outline-color: rgba(242,193,78,.6); }
.avatars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 18px; }
.avatars button {
  font-size: 26px; padding: 8px 0; border-radius: 12px; border: 0; cursor: pointer; background: rgba(255,255,255,.08);
}
.avatars button.sel { background: rgba(242,193,78,.3); box-shadow: inset 0 0 0 2px var(--gold); }
.fine { font-size: 12px; color: var(--ink-dim); text-align: center; margin: 14px 0 0; }

/* ---------- lobi ---------- */
#scr-lobby { padding: 14px 16px; gap: 12px; overflow-y: auto; align-items: center; }
#scr-lobby > * { width: min(980px, 100%); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.me { display: flex; align-items: center; gap: 10px; }
.avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; background: rgba(0,0,0,.25); box-shadow: inset 0 0 0 2px rgba(255,255,255,.18); }
.me-name { font-weight: 700; font-size: 17px; }
.me-stats { font-size: 12px; color: var(--ink-dim); }
.chips-box {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px;
  background: rgba(0,0,0,.35); font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px rgba(242,193,78,.35);
}
.chips-box.small { font-size: 14px; padding: 4px 10px 4px 5px; }
.chips-box.bump { animation: bump .6s ease; }
@keyframes bump { 30% { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(242,193,78,.25); } }
.chip-ico {
  width: 26px; height: 26px; border-radius: 50%;
  background: repeating-conic-gradient(#f2c14e 0 30deg, #b8860b 30deg 60deg);
  box-shadow: inset 0 0 0 4px #f6d27a, 0 1px 2px rgba(0,0,0,.4);
}
.small .chip-ico { width: 20px; height: 20px; box-shadow: inset 0 0 0 3px #f6d27a; }
.lobby-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tabs { display: flex; gap: 6px; background: rgba(0,0,0,.25); padding: 5px; border-radius: 14px; }
.tab { flex: 1; border: 0; background: transparent; padding: 10px; border-radius: 10px; font-weight: 700; cursor: pointer; }
.tab.active { background: linear-gradient(180deg, #ffd66b, var(--gold-2)); color: #3a2400; }
.tab.soon { opacity: .5; cursor: default; }
.tab small { font-weight: 500; font-size: 11px; }
.tables { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.tcard {
  position: relative; border-radius: 18px; padding: 16px; background: linear-gradient(160deg, rgba(255,255,255,.1), rgba(0,0,0,.25));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 10px 26px rgba(0,0,0,.25); display: flex; flex-direction: column; gap: 6px;
}
.tcard h3 { margin: 0; font-size: 18px; }
.tcard .bet { font-size: 24px; font-weight: 900; color: var(--gold); display: flex; align-items: center; gap: 8px; }
.tcard .meta { font-size: 12.5px; color: var(--ink-dim); }
.tcard .btn { margin-top: 6px; }
.tcard.locked { opacity: .55; }
.fair { font-size: 12.5px; color: var(--ink-dim); text-align: center; }

/* ---------- taş ---------- */
.tile {
  --w: var(--tw); --h: var(--th);
  width: var(--w); height: var(--h); border-radius: calc(var(--w) * .13);
  background: linear-gradient(180deg, var(--ivory-1) 0%, #f7f0dc 55%, var(--ivory-2) 100%);
  box-shadow: 0 calc(var(--w) * .06) 0 #c9bb93, 0 calc(var(--w) * .1) calc(var(--w) * .18) rgba(0,0,0,.35);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding-top: calc(var(--h) * .1); position: relative; font-weight: 900; line-height: 1;
  font-size: calc(var(--w) * .6); font-variant-numeric: tabular-nums; flex: none;
}
.tile::after { content: ''; width: calc(var(--w) * .26); height: calc(var(--w) * .26); border-radius: 50%; background: currentColor; margin-top: calc(var(--h) * .12); opacity: .9; }
.tile.c0 { color: var(--red); } .tile.c1 { color: var(--yellow); } .tile.c2 { color: var(--blue); } .tile.c3 { color: var(--black); }
.tile.fake { color: var(--green); font-size: calc(var(--w) * .7); }
.tile.fake::after { display: none; }
.tile.joker::before {
  content: '★'; position: absolute; top: calc(var(--w) * .04); right: calc(var(--w) * .06); font-size: calc(var(--w) * .26);
  color: var(--gold-2); text-shadow: 0 0 4px rgba(255,200,60,.9);
}
.tile.back { background: linear-gradient(160deg, #2f8f69, #145a40); box-shadow: 0 3px 0 #0d3b2a, 0 5px 10px rgba(0,0,0,.35); }
.tile.back::after { display: none; }
.tile.mini { --w: calc(var(--tw) * .62); --h: calc(var(--th) * .62); }
.tile.mid { --w: calc(var(--tw) * .8); --h: calc(var(--th) * .8); }
.tile.sel { transform: translateY(calc(var(--h) * -.18)); box-shadow: 0 0 0 3px var(--gold), 0 10px 18px rgba(0,0,0,.4); }
.tile.new { animation: newtile 1.6s ease; }
@keyframes newtile { 0%, 40% { box-shadow: 0 0 0 3px #6fe3ff, 0 8px 14px rgba(0,0,0,.35); } }
.tile.taken { box-shadow: 0 0 0 3px #ff9f5b, 0 6px 10px rgba(0,0,0,.35); }
.tile.can-add { box-shadow: 0 0 0 3px #7CFFB2, 0 6px 10px rgba(0,0,0,.35); }

/* ---------- masa ---------- */
#scr-table { overflow: hidden; }
.felt {
  position: relative; flex: 1; display: grid; min-height: 0;
  grid-template-columns: minmax(84px, 1fr) minmax(0, 4fr) minmax(84px, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto auto auto auto;
  grid-template-areas:
    "bar bar bar"
    "tl top tr"
    "left center right"
    "bl status br"
    "time time time"
    "rack rack rack"
    "act act act";
  padding: 0 8px env(safe-area-inset-bottom);
  background:
    radial-gradient(60% 50% at 50% 45%, rgba(255,255,255,.07), transparent 70%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 5px);
}
.tbar { grid-area: bar; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0 4px; }
.tinfo { display: flex; gap: 10px; align-items: baseline; font-size: 13.5px; color: var(--ink-dim); min-width: 0; white-space: nowrap; overflow: hidden; }
.tinfo b { color: var(--ink); font-size: 15px; }
.tright { display: flex; gap: 6px; align-items: center; }

.seat { display: flex; align-items: center; justify-content: center; }
.seat-top { grid-area: top; }
.seat-left { grid-area: left; }
.seat-right { grid-area: right; }
.player {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 10px;
  border-radius: 16px; background: var(--panel); min-width: 84px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.seat-top .player { flex-direction: row; gap: 10px; }
.player .avatar { width: 44px; height: 44px; font-size: 24px; position: relative; }
.player .pname { font-weight: 700; font-size: 13.5px; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player .pmeta { font-size: 11.5px; color: var(--ink-dim); display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; }
.badge { font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 6px; background: rgba(255,255,255,.16); letter-spacing: .04em; }
.badge.bot { background: #5468ff; }
.badge.open { background: #2e9d6a; }
.badge.cift { background: #b04fd1; }
.badge.off { background: #a33; }
.player.turn { box-shadow: 0 0 0 3px var(--gold), 0 0 24px rgba(242,193,78,.35); }
.ring { position: absolute; inset: -5px; border-radius: 50%; pointer-events: none; }
.bubble {
  position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -6px); background: #fff; color: #222; font-size: 12.5px;
  font-weight: 600; padding: 5px 10px; border-radius: 12px; white-space: nowrap; animation: pop .25s ease; z-index: 5;
}
.seat-top .bubble { bottom: auto; top: 100%; transform: translate(-50%, 6px); }
@keyframes pop { from { transform: translate(-50%, 4px) scale(.6); opacity: 0; } }

.pile { display: flex; align-items: center; justify-content: center; min-height: calc(var(--th) * .9); }
.pile-tl { grid-area: tl; } .pile-tr { grid-area: tr; } .pile-bl { grid-area: bl; } .pile-br { grid-area: br; }
.pile .slot {
  position: relative; width: calc(var(--tw) * .9); height: calc(var(--th) * .9); border-radius: 8px;
  border: 2px dashed rgba(255,255,255,.18); display: grid; place-items: center;
}
.pile .slot .tile { --w: calc(var(--tw) * .9); --h: calc(var(--th) * .9); }
.pile .cnt { position: absolute; bottom: -8px; right: -8px; font-size: 11px; background: rgba(0,0,0,.6); border-radius: 8px; padding: 1px 6px; }
.pile.takeable .slot { border-color: var(--gold); cursor: pointer; animation: glow 1.2s infinite; }
.pile.dropzone .slot { border-color: #6fe3ff; border-style: solid; background: rgba(111,227,255,.12); }
.pile.mine .slot::before { content: 'At'; position: absolute; top: -18px; font-size: 11px; color: var(--ink-dim); }
@keyframes glow { 50% { box-shadow: 0 0 0 5px rgba(242,193,78,.25); } }

.center { grid-area: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 0; min-width: 0; }
.deck-area { display: flex; align-items: center; gap: 18px; position: relative; }
.deck {
  position: relative; width: calc(var(--tw) * 1.05); height: calc(var(--th) * 1.05); border-radius: 9px;
  background: linear-gradient(160deg, #2f8f69, #145a40);
  box-shadow: 3px 3px 0 #0d3b2a, 6px 6px 0 #0a3324, 9px 9px 14px rgba(0,0,0,.45);
  display: grid; place-items: center; font-weight: 900; font-size: 18px; color: #d7f5e7;
}
.deck.active { cursor: pointer; box-shadow: 0 0 0 3px var(--gold), 3px 3px 0 #0d3b2a, 6px 6px 0 #0a3324, 9px 9px 14px rgba(0,0,0,.45); animation: glow 1.2s infinite; }
.gosterge-box { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--ink-dim); font-size: 11.5px; }
.finish-zone {
  position: absolute; inset: -10px -14px; border-radius: 14px; border: 2px dashed var(--gold); background: rgba(8,46,34,.92); z-index: 4;
  display: grid; place-items: center; text-align: center; font-weight: 700; color: var(--gold); font-size: 13px; padding: 6px;
}
.finish-zone.over { background: rgba(242,193,78,.3); }

.melds {
  width: 100%; max-height: 100%; overflow: auto; display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center; align-content: flex-start;
  padding: 4px;
}
.meld { display: flex; gap: 2px; padding: 4px 5px 6px; border-radius: 10px; background: rgba(0,0,0,.22); position: relative; }
.meld .who { position: absolute; top: -7px; left: 6px; font-size: 9.5px; background: rgba(0,0,0,.6); padding: 0 5px; border-radius: 6px; }
.meld.target { background: rgba(124,255,178,.18); box-shadow: inset 0 0 0 2px #7CFFB2; cursor: pointer; }
.meld.over { background: rgba(124,255,178,.35); }

.status-row { grid-area: status; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; }
.status { font-weight: 700; font-size: 14.5px; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.status.mine { color: var(--gold); }
.meter { font-size: 12.5px; color: var(--ink-dim); display: flex; gap: 12px; }
.meter b { color: var(--ink); }
.meter .ok { color: #7CFFB2; }
.timebar { grid-area: time; height: 4px; margin: 4px auto 6px; width: min(980px, 100%); background: rgba(0,0,0,.25); border-radius: 4px; overflow: hidden; }
.timebar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #7CFFB2, var(--gold)); transition: width .25s linear; }
.timebar i.low { background: var(--danger); }

.rack-wrap { grid-area: rack; display: flex; justify-content: center; }
.rack {
  display: grid; grid-template-columns: repeat(var(--cols), var(--tw)); gap: calc(var(--tw) * .04) 0; position: relative;
  padding: calc(var(--tw) * .18) calc(var(--tw) * .3) calc(var(--tw) * .3); border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), transparent 30%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 3px, transparent 3px 11px),
    linear-gradient(180deg, var(--wood-1), var(--wood-2) 70%, var(--wood-3));
  box-shadow: 0 10px 24px rgba(0,0,0,.45), inset 0 -4px 0 rgba(0,0,0,.25);
}
.rack .rslot { width: var(--tw); height: calc(var(--th) + var(--tw) * .1); display: flex; align-items: flex-end; justify-content: center; position: relative; }
.rack .rslot:nth-child(n) { border-bottom: calc(var(--tw) * .1) solid rgba(0,0,0,.18); }
.rack .rslot.over::before { content: ''; position: absolute; inset: 2px; border-radius: 6px; background: rgba(111,227,255,.25); }
.rack .tile { cursor: grab; touch-action: none; transition: transform .12s ease; }
.drag-ghost { position: fixed; z-index: 100; pointer-events: none; transform: translate(-50%, -60%) scale(1.08) rotate(-3deg); }

.actions { grid-area: act; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding: 8px 0 10px; }

.chat-pop {
  position: absolute; right: 10px; top: 48px; z-index: 20; background: var(--panel); border-radius: 14px; padding: 8px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.4); backdrop-filter: blur(6px);
}
.event {
  font-size: 12.5px; color: var(--ink-dim); background: rgba(0,0,0,.3); padding: 3px 12px; border-radius: 999px;
  pointer-events: none; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.event:empty { display: none; }

/* ---------- katmanlar ---------- */
.overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(0,0,0,.55); padding: 16px; backdrop-filter: blur(3px); }
.modal {
  position: relative; width: min(560px, 100%); max-height: 88dvh; overflow: auto; background: #0f3a2c; border-radius: 20px; padding: 22px 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.1);
}
.modal h2 { margin: 0 0 12px; }
.modal h3 { margin: 18px 0 6px; color: var(--gold); font-size: 15px; }
.modal p, .modal li { color: #dfe9e3; font-size: 14px; }
.modal ul { padding-left: 18px; }
.x { position: absolute; top: 10px; right: 12px; border: 0; background: rgba(255,255,255,.1); width: 34px; height: 34px; border-radius: 50%; font-size: 22px; cursor: pointer; }
.lead { width: 100%; border-collapse: collapse; }
.lead td { padding: 7px 6px; border-bottom: 1px solid rgba(255,255,255,.08); }
.lead td:last-child { text-align: right; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.ad-box { text-align: center; }
.ad-screen {
  height: 200px; border-radius: 14px; margin: 10px 0 14px; display: grid; place-items: center; text-align: center; padding: 16px;
  background: linear-gradient(135deg, #1e3c72, #2a5298); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); font-size: 14px;
}
.ad-screen b { font-size: 46px; display: block; }
.progress { height: 8px; background: rgba(255,255,255,.12); border-radius: 8px; overflow: hidden; margin-bottom: 14px; }
.progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #5cc8ff, #7CFFB2); transition: width .25s linear; }

.result-card {
  width: min(620px, 100%); background: linear-gradient(170deg, #145a40, #0b3d2e); border-radius: 22px; padding: 22px 20px; text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.12); max-height: 92dvh; overflow: auto;
}
.result-card h2 { margin: 0 0 4px; font-size: 26px; }
.result-card .sub { color: var(--ink-dim); margin-bottom: 14px; }
.win-hand { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; margin: 10px 0 16px; }
.win-hand { gap: 10px 14px; }
.wgroup { display: inline-flex; gap: 3px; }
.wgroup.fin { padding: 3px; border-radius: 8px; box-shadow: 0 0 0 2px var(--gold); }
.pay { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 14px; }
.pay div { background: rgba(0,0,0,.22); border-radius: 12px; padding: 8px; font-size: 13px; }
.pay b { display: block; font-size: 17px; }
.plus { color: #7CFFB2; } .minus { color: #ff9a8a; }
.score { width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.score th, .score td { padding: 6px; border-bottom: 1px solid rgba(255,255,255,.08); }
.score tr.best td { color: var(--gold); font-weight: 800; }
.next-in { color: var(--ink-dim); font-size: 13px; margin-top: 8px; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.confetti i { position: absolute; top: -10px; width: 8px; height: 14px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

.toasts { position: fixed; left: 50%; bottom: 18%; transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.toast { background: rgba(10,20,16,.92); padding: 9px 16px; border-radius: 12px; font-weight: 600; font-size: 14px; box-shadow: 0 8px 22px rgba(0,0,0,.35); animation: pop2 .25s ease; max-width: 90vw; text-align: center; }
.toast.err { background: rgba(140,30,20,.95); }
.toast.good { background: rgba(20,110,60,.95); }
@keyframes pop2 { from { transform: translateY(10px); opacity: 0; } }

.rotate-hint { display: none; }
@media (orientation: portrait) and (max-width: 700px) {
  :root { --tw: calc((100vw - 28px) / var(--cols)); }
  .rotate-hint {
    display: block; position: fixed; top: 6px; left: 50%; transform: translateX(-50%); z-index: 40; font-size: 12px;
    background: rgba(0,0,0,.5); padding: 4px 12px; border-radius: 999px; pointer-events: none; white-space: nowrap;
  }
  .felt { grid-template-columns: 70px minmax(0, 1fr) 70px; }
  .player { min-width: 66px; padding: 6px; }
  .player .avatar { width: 36px; height: 36px; font-size: 20px; }
  .player .pname { max-width: 64px; font-size: 12px; }
  .tinfo span { display: none; }
}
@media (max-height: 520px) and (orientation: landscape) {
  :root { --tw: min(44px, calc((100vw - 40px) / var(--cols)), calc((100dvh - 262px) / 3.4)); }
  .player { flex-direction: row !important; padding: 4px 8px; gap: 6px; }
  .player .avatar { width: 32px; height: 32px; font-size: 18px; }
  .tbar { padding: 4px 0 2px; }
  .actions { padding: 4px 0 6px; }
  .actions .btn { padding: 5px 9px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.lt.c0 { color: var(--red); } .lt.c1 { color: var(--yellow); } .lt.c2 { color: var(--blue); } .lt.c3 { color: var(--black); }

/* 101: masada per varken deste yana geçer, perler ortayı kaplar */
.center.wide { flex-direction: row; align-items: stretch; gap: 12px; }
.center.wide .deck-area { flex-direction: column; justify-content: center; gap: 8px; flex: none; }
.center.wide .deck { width: calc(var(--tw) * .85); height: calc(var(--th) * .85); font-size: 15px; }
.center.wide .melds { flex: 1; align-content: center; }
.center.wide .event { position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); z-index: 3; }
.center { position: relative; }
.melds .tile.mini { --w: calc(var(--tw) * .56); --h: calc(var(--th) * .56); }

/* Küçük yükseklik (yatay telefon): atılan taş yığınları küçülür, kartlar sıkışık */
@media (max-height: 520px) and (orientation: landscape) {
  .pile { min-height: 0; }
  .pile .slot { width: calc(var(--tw) * .7); height: calc(var(--th) * .7); }
  .pile .slot .tile { --w: calc(var(--tw) * .7); --h: calc(var(--th) * .7); }
  .pile.mine .slot::before { top: -14px; }
  .felt { grid-template-columns: minmax(70px, 1fr) minmax(0, 5fr) minmax(70px, 1fr); }
  .player .pname { max-width: 70px; }
  .player { min-width: 0; }
  .player .pmeta { flex-wrap: nowrap; }
  .felt { grid-template-rows: auto auto minmax(54px, 1fr) auto auto auto auto; }
  .status { font-size: 13px; }
  .meter { font-size: 11.5px; }
}
.rotate-hint { animation: hintout .6s ease 6s forwards; }
@keyframes hintout { to { opacity: 0; visibility: hidden; } }

/* =====================================================================
   OKEYİSTAN (eski adı Okeyistan) — Kahvehane teması (2026-10-11). Önceki kuralların üstüne yazar.
   ===================================================================== */
:root {
  --panel: rgba(30, 17, 8, .74);
  --panel-2: rgba(255, 236, 200, .08);
  --ink: #fbf3e4;
  --ink-dim: #d8c6a8;
  --cream: #f6e7c8;
  --brown-1: #2a170a;
  --brown-2: #1a0e05;
}
body { background: var(--brown-2); }
#scr-login, #scr-lobby {
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(20, 10, 3, .35), rgba(12, 6, 2, .82) 70%),
    url(img/lobi.webp) center / cover no-repeat, var(--brown-2);
}
.login-card, .modal, .result-card {
  background: linear-gradient(170deg, rgba(58, 33, 14, .92), rgba(26, 14, 5, .94));
  box-shadow: 0 28px 70px rgba(0,0,0,.55), inset 0 0 0 1px rgba(242,193,78,.28);
}
.logo-img { width: min(300px, 80%); height: auto; display: block; margin: -6px auto 0; filter: drop-shadow(0 10px 18px rgba(0,0,0,.5)); }
.top-logo { height: 54px; width: auto; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
@media (max-width: 560px) { .top-logo { display: none; } }
.avatar { overflow: hidden; background: #c98a2e; box-shadow: 0 0 0 2px rgba(242,193,78,.75), 0 4px 10px rgba(0,0,0,.4); }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatars button { padding: 4px; aspect-ratio: 1; overflow: hidden; background: rgba(255,236,200,.08); }
.avatars button img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; display: block; }
.avatars button.sel { background: rgba(242,193,78,.35); }
.lav { display: inline-block; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; vertical-align: middle; margin-right: 6px; }
.lav img { width: 100%; height: 100%; object-fit: cover; }
.chip-ico { background: url(img/ikon-cip.webp) center / contain no-repeat; box-shadow: none; border-radius: 0; }
.small .chip-ico { box-shadow: none; }
.chips-box { background: rgba(20,10,3,.6); }
.btn .bi { width: 26px; height: 26px; object-fit: contain; margin: -6px 6px -6px -4px; vertical-align: middle; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.btn.gift { background: linear-gradient(180deg, #d9542f, #9e2f17); }
.btn.ad { background: linear-gradient(180deg, #2d7fbf, #19507c); }
.btn.ghost { background: rgba(20,10,3,.45); }
.btn.act { background: linear-gradient(180deg, #7a4a22, #4d2c12); box-shadow: inset 0 0 0 1px rgba(242,193,78,.35), 0 3px 10px rgba(0,0,0,.3); }
.tabs { background: rgba(20,10,3,.55); }
.tcard { padding: 0 0 16px; overflow: hidden; background: linear-gradient(170deg, rgba(58,33,14,.88), rgba(26,14,5,.92)); box-shadow: inset 0 0 0 1px rgba(242,193,78,.22), 0 12px 30px rgba(0,0,0,.4); }
.tcard > *:not(.art) { margin-inline: 16px; }
.tcard .art { height: 128px; background-size: cover; background-position: center; margin-bottom: 8px; box-shadow: inset 0 -30px 30px -10px rgba(26,14,5,.95); }
.tcard:hover .art { filter: brightness(1.08); }
.fair { color: var(--cream); text-shadow: 0 1px 3px rgba(0,0,0,.6); }

/* Masa: gerçek kahvehane masası */
#scr-table { background: var(--brown-2); }
.felt {
  background:
    radial-gradient(70% 55% at 50% 42%, rgba(255,220,150,.10), transparent 70%),
    url(img/masa.webp) center / 100% 100% no-repeat;
}
.player { background: rgba(26,14,5,.78); box-shadow: inset 0 0 0 1px rgba(242,193,78,.22), 0 6px 14px rgba(0,0,0,.35); }
.rack {
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), transparent 28%, rgba(0,0,0,.28)),
    url(img/ahsap.webp) center / 340px auto repeat;
  box-shadow: 0 12px 26px rgba(0,0,0,.55), inset 0 -4px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18);
}
.meld { background: rgba(10,30,20,.35); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.status { color: var(--cream); }
.status.mine { color: var(--gold); }
.event { background: rgba(20,10,3,.55); color: var(--cream); }
.chat-pop { background: rgba(30,17,8,.92); }
.ad-screen { background: linear-gradient(135deg, #3a2410, #6b4220); }
.res-cup { width: 84px; height: auto; display: block; margin: -6px auto 4px; filter: drop-shadow(0 6px 12px rgba(0,0,0,.5)); animation: pop .5s ease; }
.pay div { background: rgba(20,10,3,.45); }
.overlay { background: rgba(10,5,2,.6); }
#scr-login { overflow-y: auto; justify-content: safe center; }
.login-card { margin: auto 0; }
@media (max-height: 760px) { .logo-img { width: 210px; } .pitch { margin: 8px 0 10px; } .avatars { margin-bottom: 12px; } }
.deck {
  background: linear-gradient(180deg, var(--ivory-1), var(--ivory-2));
  color: #5a3a1a;
  box-shadow: 2px 3px 0 #cdbd95, 4px 6px 0 #b9a77c, 6px 9px 0 #a8956a, 8px 13px 16px rgba(0,0,0,.5);
}
.deck.active { box-shadow: 0 0 0 3px var(--gold), 2px 3px 0 #cdbd95, 4px 6px 0 #b9a77c, 6px 9px 0 #a8956a, 8px 13px 16px rgba(0,0,0,.5); }
.tile.back { background: linear-gradient(180deg, var(--ivory-1), var(--ivory-2)); box-shadow: 0 3px 0 #c9bb93, 0 5px 10px rgba(0,0,0,.35); }
.tinfo, .tinfo b { text-shadow: 0 1px 3px rgba(0,0,0,.85); color: var(--cream); }
.pile .slot { border-color: rgba(246,231,200,.25); }

/* =====================================================================
   GERÇEKÇİ MASA / ISTAKA / TAŞ (Owner 2026-10-11: "hepsini gerçekçi yap, çay bardağını kaldır")
   ===================================================================== */
:root {
  --tw: min(48px, calc((min(100vw, 980px) - 60px) / (var(--cols) + 1)));
  --th: calc(var(--tw) * 1.45);
}
/* Masa: gerçek yeşil çuha + ince maun kenar + pirinç çizgi */
.felt {
  background:
    radial-gradient(65% 55% at 50% 40%, rgba(255,230,170,.10), transparent 70%),
    url(img/cuha.webp) center / cover no-repeat, #0d3a24;
  box-shadow:
    inset 0 0 0 9px #2b1709, inset 0 0 0 11px #b88a3e, inset 0 0 0 13px #1e1006,
    inset 0 0 90px rgba(0,0,0,.65);
}
/* Taş: gerçek fildişi okey taşı yüzeyi, rakam kazınmış boya gibi */
.tile {
  background: url(img/tas.webp) center / 100% 100% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 calc(var(--w) * .05) calc(var(--w) * .05) rgba(0,0,0,.45));
  border-radius: calc(var(--w) * .16);
  padding-top: calc(var(--h) * .13);
  font-family: "Arial Black", "Segoe UI Black", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  font-size: calc(var(--w) * .56);
  letter-spacing: -.04em;
  text-shadow: 0 1px 0 rgba(255,255,255,.8), 0 -1px 0 rgba(0,0,0,.28);
}
.tile::after {
  width: calc(var(--w) * .22); height: calc(var(--w) * .22); margin-top: calc(var(--h) * .1);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.8);
}
.tile.c1 { color: #d08a00; }
.tile.fake { font-family: system-ui, sans-serif; text-shadow: 0 1px 0 rgba(255,255,255,.8); }
.tile.back { background: url(img/tas.webp) center / 100% 100% no-repeat; box-shadow: none; }
.tile.sel { box-shadow: 0 0 0 3px var(--gold); filter: drop-shadow(0 8px 10px rgba(0,0,0,.5)); }
.tile.new { animation: none; box-shadow: 0 0 0 2px #6fe3ff; }
.tile.taken { box-shadow: 0 0 0 3px #ff9f5b; }
.tile.can-add { box-shadow: 0 0 0 3px #7CFFB2; }
/* Istaka: gerçek ceviz ıstaka, taşlar iki rafın üstünde durur */
.rack {
  background: url(img/istaka.webp) 0 0 / 100% 100% no-repeat;
  padding: calc(var(--th) * .067) calc(var(--tw) * .55) calc(var(--th) * .65);
  row-gap: calc(var(--th) * .312);
  border-radius: 10px;
  box-shadow: 0 14px 28px rgba(0,0,0,.6);
}
.rack .rslot, .rack .rslot:nth-child(n) { height: var(--th); border-bottom: 0; }
.rack .rslot.over::before { inset: 0 2px; }
/* Deste: üst üste duran gerçek taşlar */
.deck, .center.wide .deck {
  background:
    url(img/tas.webp) 0 0 / calc(100% - 6px) calc(100% - 6px) no-repeat,
    url(img/tas.webp) 3px 3px / calc(100% - 6px) calc(100% - 6px) no-repeat,
    url(img/tas.webp) 6px 6px / calc(100% - 6px) calc(100% - 6px) no-repeat;
  box-shadow: none; border-radius: 8px; color: #6b4a22; text-shadow: 0 1px 0 rgba(255,255,255,.8);
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.5));
  padding: 0 6px 6px 0;
}
.deck.active { box-shadow: 0 0 0 3px var(--gold); }
.pile .slot { border-radius: 10px; }
.meld { background: rgba(0,0,0,.18); }
@media (max-height: 520px) and (orientation: landscape) {
  :root { --tw: min(40px, calc((100vw - 60px) / (var(--cols) + 1)), calc((100dvh - 250px) / 4.4)); }
}
@media (orientation: portrait) and (max-width: 700px) {
  :root { --tw: calc((100vw - 36px) / (var(--cols) + 1)); }
}
/* Taş kalınlığı: alt kenarda koyulaşan fildişi yan yüz */
.tile { box-shadow: 0 calc(var(--w) * .06) 0 #cdbf98, 0 calc(var(--w) * .085) 0 #a9986d; }
.tile.sel { box-shadow: 0 calc(var(--w) * .06) 0 #cdbf98, 0 0 0 3px var(--gold); }
.tile.new { box-shadow: 0 calc(var(--w) * .06) 0 #cdbf98, 0 0 0 2px #6fe3ff; }
.tile.taken { box-shadow: 0 calc(var(--w) * .06) 0 #cdbf98, 0 0 0 3px #ff9f5b; }
.tile.can-add { box-shadow: 0 calc(var(--w) * .06) 0 #cdbf98, 0 0 0 3px #7CFFB2; }
.tile.back { box-shadow: 0 calc(var(--w) * .06) 0 #cdbf98, 0 calc(var(--w) * .085) 0 #a9986d; }
.timebar { background: transparent; }

/* =====================================================================
   Istaka v3 (Owner: "ıstaka berbat") — gerçek iki katlı ıstaka fotoğrafları.
   Yan başlıklar border-image ile korunur, orta kısım uzar. Raf çizgileri ölçüldü.
   ===================================================================== */
:root { --th: calc(var(--tw) * 1.39); }
.rack {
  --rimg: url(img/istaka-ceviz.webp); --rpt: .271; --rpb: .529; --rg: 0;
  background: none; box-shadow: none; border-radius: 0;
  border-style: solid; border-width: 0 calc(var(--tw) * .62);
  border-image: var(--rimg) 0 46 fill / 0 calc(var(--tw) * .62) stretch;
  padding: calc(var(--th) * var(--rpt)) calc(var(--tw) * .1) calc(var(--th) * var(--rpb));
  row-gap: calc(var(--th) * var(--rg));
  filter: drop-shadow(0 14px 16px rgba(0,0,0,.55));
}
.rack.r-krem { --rimg: url(img/istaka-krem.webp); --rpt: .05; --rpb: .312; --rg: .218; }
.rack.r-mese { --rimg: url(img/istaka-mese.webp); --rpt: .051; --rpb: .298; --rg: .051; }
/* Taş v3: kalınlığı görünen gerçek fildişi taş; rakam kazınmış boya */
.tile {
  background: url(img/tas.webp) center / 100% 100% no-repeat;
  box-shadow: none !important;
  border-radius: calc(var(--w) * .14);
  filter: drop-shadow(0 calc(var(--w) * .04) calc(var(--w) * .05) rgba(0,0,0,.5));
  padding-top: calc(var(--h) * .15);
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 700;
  font-size: calc(var(--w) * .62);
  letter-spacing: -.05em;
  text-shadow: 0 1px 0 rgba(255,255,255,.85), 0 -1px 0 rgba(0,0,0,.35), 0 0 1px rgba(0,0,0,.25);
}
.tile::after { width: calc(var(--w) * .2); height: calc(var(--w) * .2); margin-top: calc(var(--h) * .09); box-shadow: inset 0 1px 1px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.85); }
.tile.c0 { color: #c62424; } .tile.c1 { color: #e09a00; } .tile.c2 { color: #1f56b3; } .tile.c3 { color: #161616; }
.tile.sel { outline: 3px solid var(--gold); outline-offset: 1px; filter: drop-shadow(0 8px 10px rgba(0,0,0,.55)); }
.tile.new { outline: 2px solid #6fe3ff; outline-offset: 1px; }
.tile.taken { outline: 3px solid #ff9f5b; outline-offset: 1px; }
.tile.can-add { outline: 3px solid #7CFFB2; outline-offset: 1px; }

/* =====================================================================
   SAHNE v4 (rakip incelemesi: Okey Plus, Okey Extra)
   - Masa oyuncunun gözünden perspektifle görünür (yakın kenar geniş, uzak kenar dar), ahşap kenarlı.
   - Istaka masanın yakın kenarına oturur, ekranın altına kadar iner, büyük taşlar.
   - Seri/Çift diz ve hamle düğmeleri ıstakanın iki ucundaki panellerde.
   - Atılan taşlar çuhanın üstünde yatar; boş yerde kutu çizilmez.
   ===================================================================== */
:root {
  --tw: min(56px, calc((min(100vw, 1240px) - 230px) / (var(--cols) + 1)));
}
.felt {
  grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
  grid-template-areas:
    "bar bar bar"
    "tl top tr"
    "left center right"
    "bl status br"
    "time time time"
    "rack rack rack";
  background:
    linear-gradient(180deg, rgba(12,6,2,.78), rgba(12,6,2,.55) 40%, rgba(12,6,2,.85)),
    url(img/lobi.webp) center / cover no-repeat, #120802;
  box-shadow: none;
  padding-bottom: 0;
}
.felt > *:not(.table3d):not(.chat-pop) { position: relative; z-index: 1; }
.chat-pop { z-index: 20; }
.table3d {
  position: absolute; z-index: 0; pointer-events: none;
  left: 3.5%; right: 3.5%; top: -2%; bottom: -6%;
  transform: perspective(1300px) rotateX(20deg);
  transform-origin: 50% 100%;
  border-radius: 90px 90px 40px 40px / 70px 70px 30px 30px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.25) 60%, rgba(0,0,0,.45)),
    url(img/ahsap.webp) center / 420px auto repeat, #3b1f0c;
  box-shadow: 0 40px 80px rgba(0,0,0,.75), 0 6px 0 #1f0f05, inset 0 2px 0 rgba(255,255,255,.25);
}
.table3d .surface {
  position: absolute; inset: 18px 18px 0;
  border-radius: 74px 74px 28px 28px / 56px 56px 22px 22px;
  background:
    radial-gradient(70% 60% at 50% 40%, rgba(255,232,170,.14), transparent 70%),
    url(img/cuha.webp) center / cover no-repeat, #0d3a24;
  box-shadow: inset 0 10px 30px rgba(0,0,0,.6), inset 0 0 0 2px rgba(0,0,0,.35), 0 0 0 2px #b88a3e;
}
/* Istaka bölümü: yan paneller + ıstaka, ekranın altına oturur */
.rack-wrap { grid-area: rack; align-items: stretch; gap: 0; margin-bottom: calc(var(--th) * -.18); }
.rack-side {
  display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 104px; flex: none;
  padding: 8px 8px calc(var(--th) * .3);
  background: linear-gradient(180deg, #3a2210, #1d0f05); border-radius: 14px 0 0 14px;
  box-shadow: inset 0 0 0 1px rgba(242,193,78,.25), 0 10px 20px rgba(0,0,0,.5);
}
.rack-side.right { border-radius: 0 14px 14px 0; }
.rack-side .btn { width: 100%; padding: 8px 6px; font-size: 13px; border-radius: 10px; }
.rack-side:empty { visibility: hidden; }
.actions { display: none; }
/* Atılan taşlar çuhada yatar */
.pile .slot { border: 0; background: none; }
.pile .slot .tile { transform: rotate(var(--rot, -4deg)); }
.pile-tr .slot .tile { --rot: 5deg; } .pile-bl .slot .tile { --rot: 3deg; } .pile-br .slot .tile { --rot: -6deg; }
.pile.takeable .slot, .pile.dropzone .slot { border: 2px dashed var(--gold); border-radius: 10px; }
.pile.dropzone .slot { border-color: #6fe3ff; background: rgba(111,227,255,.08); }
.pile.mine .slot::before { content: none; }
.pile.dropzone .slot::after { content: 'At'; position: absolute; bottom: -18px; font-size: 11px; color: #bfefff; }
.timebar { margin: 2px auto 4px; }
@media (max-height: 520px) and (orientation: landscape) {
  :root { --tw: min(42px, calc((100vw - 200px) / (var(--cols) + 1)), calc((100dvh - 190px) / 3.9)); }
  .rack-side { width: 84px; padding: 4px 5px; gap: 4px; }
  .rack-side .btn { padding: 5px 4px; font-size: 11.5px; }
  .table3d { top: 36px; }
}
@media (orientation: portrait) and (max-width: 700px) {
  :root { --tw: calc((100vw - 24px) / (var(--cols) + 1)); }
  .rack-wrap { flex-wrap: wrap; justify-content: center; }
  .rack-side { order: 2; width: 50%; flex-direction: row; flex-wrap: wrap; border-radius: 0; padding: 6px; }
  .rack-side .btn { width: auto; flex: 1; }
  .rack { order: 1; }
  .table3d { left: 1%; right: 1%; }
}

/* =====================================================================
   SAHNE v5 (Owner: "masa yarım görünüyor; 101'de perler nasıl sığacak?")
   Masa üst çubuk ile ıstaka arasındaki alanın tamamını kaplar, dört kenarı görünür.
   Istaka yalnız yakın kenara biner. Perler alana göre kendiliğinden küçülür.
   ===================================================================== */
.table3d {
  position: relative; inset: auto; left: auto; right: auto; top: auto; bottom: auto;
  grid-row: 2 / 5; grid-column: 1 / 4;
  margin: 2px 0.5% calc(var(--th) * -.22);
  transform: perspective(1500px) rotateX(12deg);
  transform-origin: 50% 100%;
  border-radius: 80px 80px 46px 46px / 60px 60px 36px 36px;
}
.table3d .surface { inset: 16px; border-radius: 66px 66px 32px 32px / 48px 48px 24px 24px; }
.rack-wrap { margin-bottom: 0; position: relative; z-index: 2; }
.melds { --ms: 1; gap: calc(6px * var(--ms)) calc(12px * var(--ms)); align-content: center; overflow: hidden; }
.melds .tile.mini { --w: calc(var(--tw) * .56 * var(--ms)); --h: calc(var(--th) * .56 * var(--ms)); }
.meld { padding: calc(5px * var(--ms)) calc(5px * var(--ms)) calc(6px * var(--ms)); gap: calc(2px * var(--ms)); }
.meld .who { font-size: calc(9.5px * max(var(--ms), .8)); }
.meld.own0 { box-shadow: inset 0 0 0 1px rgba(242,193,78,.45); }
.center.wide { min-height: 0; }

/* =====================================================================
   101 PER ALANLARI (Owner: "kim açarsa kendi önünde açmalı")
   Her oyuncunun perleri masada kendi önünde: ben altta (ıstakanın önü), karşıdaki üstte,
   soldaki ve sağdaki kendi kenarlarında. Ortada deste ve gösterge.
   ===================================================================== */
.mzone { display: none; }
.center.is101 {
  display: grid; width: 100%; height: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "left top right" "left mid right" "left bot right";
  gap: 6px 12px; align-items: stretch; justify-items: stretch;
}
.center.is101 .mzone {
  --ms: 1;
  display: flex; flex-wrap: wrap; min-width: 0; min-height: 0; overflow: hidden;
  gap: calc(5px * var(--ms)) calc(9px * var(--ms)); padding: 2px 4px;
}
.mzone.top { grid-area: top; justify-content: center; align-content: flex-start; }
.mzone.bot { grid-area: bot; justify-content: center; align-content: flex-end; }
.mzone.left { grid-area: left; justify-content: flex-start; align-content: center; }
.mzone.right { grid-area: right; justify-content: flex-end; align-content: center; }
.zone-who { flex-basis: 100%; font-size: 10.5px; font-weight: 700; color: var(--cream); opacity: .7; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.mzone.top .zone-who, .mzone.bot .zone-who { text-align: center; }
.mzone.bot .zone-who { order: 99; }
.mzone.right .zone-who { text-align: right; }
.mzone .tile.mini { --w: calc(var(--tw) * .52 * var(--ms)); --h: calc(var(--th) * .52 * var(--ms)); }
.mzone .meld { background: rgba(0,0,0,.16); }
.center.is101 .deck-area { grid-area: mid; justify-self: center; align-self: center; flex-direction: row; }
.center.is101 .deck { width: calc(var(--tw) * .85); height: calc(var(--th) * .85); }
.center.is101 .event { position: absolute; left: 50%; top: 50%; transform: translate(-50%, calc(var(--th) * .7)); z-index: 3; }
/* 101: orta sütun geniş, deste ve gösterge ince bir şerit; üst/alt per alanlarına yer kalsın */
.center.is101 { grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr) minmax(0, 1fr); gap: 4px 10px; }
.center.is101 .deck-area { gap: 10px; }
.center.is101 .deck { width: calc(var(--tw) * .62); height: calc(var(--th) * .62); font-size: 12px; padding: 0 4px 4px 0; }
.center.is101 .gosterge-box { flex-direction: row; gap: 6px; }
.center.is101 #gosterge .tile { --w: calc(var(--tw) * .55); --h: calc(var(--th) * .55); }
.center.is101 .event { transform: translate(-50%, -50%); top: 50%; left: calc(50% + var(--tw) * 2.6); font-size: 11px; }
@media (max-height: 700px) and (orientation: landscape) {
  :root { --tw: min(50px, calc((min(100vw, 1240px) - 230px) / (var(--cols) + 1))); }
}

/* =====================================================================
   MASA v6 (Owner: "dikdörtgen masa olmaz, diğerleri gibi; masadaki taşlar çok küçük")
   Rakip masası gibi: üstü dar, altı geniş, üst köşeleri yuvarlak (SVG). Istaka ön kenara biner.
   ===================================================================== */
.table3d {
  transform: none; background: none; box-shadow: none; border-radius: 0;
  margin: 0 0 calc(var(--th) * -.35); filter: drop-shadow(0 18px 30px rgba(0,0,0,.7));
}
.table3d .surface { display: none; }
.table3d svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Yan oyuncular masanın eğik kenarına, per alanları masanın içine */
.center.is101 { padding: 0 1% 0; }
.mzone.left { padding-left: 3%; }
.mzone.right { padding-right: 3%; }
/* Masadaki taşlar büyük: temel boy ıstakadaki taşın %70'i (sığmazsa küçülür) */
.mzone .tile.mini { --w: calc(var(--tw) * .7 * var(--ms)); --h: calc(var(--th) * .7 * var(--ms)); }
.pile .slot .tile, .pile .slot { --w: calc(var(--tw) * .85); --h: calc(var(--th) * .85); }
.center.is101 .event { left: 50%; transform: translate(-50%, calc(var(--th) * .55)); }

/* =====================================================================
   MASA v7 (Owner: "masanın yarısını kesmişsiniz") — Okey Plus düzeni:
   Masa üst çubuğun altındaki bütün alanı kaplar, DÖRT kenarı da görünür.
   Istaka masanın İÇİNDE, alt ahşap kenarın hemen üstünde durur; hiçbir şey masayı kesmez.
   ===================================================================== */
.table3d { grid-row: 2 / -1; grid-column: 1 / 4; margin: 0 0 6px; filter: drop-shadow(0 14px 26px rgba(0,0,0,.7)); }
.felt { padding: 0 2.2% 0; }
.rack-wrap { margin: 0 4.5% calc(6px + 6.5vh); justify-content: center; }
.rack-side { padding: 8px; border-radius: 12px 0 0 12px; }
.rack-side.right { border-radius: 0 12px 12px 0; }
.seat-left { padding-left: 1%; } .seat-right { padding-right: 1%; }
.seat-top { padding-top: 6px; }
.tbar { padding-bottom: 6px; }
@media (max-height: 700px) and (orientation: landscape) {
  :root { --tw: min(46px, calc((min(100vw, 1240px) - 260px) / (var(--cols) + 1))); }
  .rack-wrap { margin-bottom: calc(4px + 5.5vh); }
}
@media (max-height: 520px) and (orientation: landscape) {
  :root { --tw: min(36px, calc((100vw - 220px) / (var(--cols) + 1)), calc((100dvh - 200px) / 4.2)); }
  .rack-wrap { margin-bottom: calc(3px + 5vh); }
}

/* =====================================================================
   DÜZEN v8 — RAKİP DÜZENİ (Owner onaylı, 2026-10-11; rapor: analiz/rakip-101/RAPOR-101-DUZEN.md)
   Ahşap 3B masa yok. Tam ekran düz çuha zemin; ortada ızgaralı per tahtası (101);
   sağda/solda dikey oyuncu şeritleri, köşelerde atılan taşlar, deste+gösterge sağ kolonda,
   çiftler tahtanın sağındaki ayrı sütunda; ıstaka en altta ekran genişliğinde.
   ===================================================================== */
.felt {
  padding: 0 10px;
  grid-template-columns: 96px 70px minmax(0, 1fr) 84px 96px;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
  grid-template-areas:
    "bar bar bar bar bar"
    "lseat tl top tr rseat"
    "lseat lcol board deck rseat"
    "lseat bl status br rseat"
    "time time time time time"
    "rack rack rack rack rack";
  background:
    radial-gradient(80% 70% at 50% 40%, rgba(255,240,200,.08), rgba(0,0,0,.45) 100%),
    url(img/cuha.webp) center / cover no-repeat, #0d3a24;
}
.table3d { display: none !important; }
.seat-top { grid-area: top; padding-top: 0; }
.seat-left { grid-area: lseat; padding: 0; }
.seat-right { grid-area: rseat; padding: 0; }
.pile-tl { grid-area: tl; } .pile-tr { grid-area: tr; } .pile-bl { grid-area: bl; } .pile-br { grid-area: br; }
.center { grid-area: board; }
.status-row { grid-area: status; }
.deck-area { grid-area: deck; flex-direction: column; gap: 10px; align-self: center; justify-self: center; }
.felt.m-okey .deck-area { grid-area: board; flex-direction: row; gap: 18px; }
/* Oyuncu şeritleri */
.seat-left .player, .seat-right .player {
  flex-direction: column !important; width: 90px; min-width: 0; padding: 10px 6px; gap: 6px; border-radius: 14px;
}
.seat-left .player .avatar, .seat-right .player .avatar { width: 52px; height: 52px; }
.seat-left .player .pmeta, .seat-right .player .pmeta { flex-direction: column; gap: 3px; }
.seat-top .player { padding: 6px 12px; }
/* Per tahtası (yalnız 101) */
.felt.m-101 .center {
  border-radius: 10px; padding: 6px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 26px),
    rgba(0, 20, 12, .42);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 6px 18px rgba(0,0,0,.35);
}
.center.is101 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1fr) minmax(58px, .42fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "left top right pairs" "left bot right pairs";
}
.mzone.pairs { grid-area: pairs; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; align-content: center; border-left: 1px solid rgba(255,255,255,.14); padding-left: 6px; }
.center.is101 .mzone.pairs { display: flex; }
.mzone .tile.mini { --w: calc(var(--tw) * .5 * var(--ms)); --h: calc(var(--th) * .5 * var(--ms)); }
.mzone .meld { background: none; padding: 0; gap: 1px; box-shadow: none; }
.center.is101 .mzone { gap: calc(5px * var(--ms)) calc(10px * var(--ms)); }
.center .event { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); z-index: 3; }
.center.is101 .event { top: 6px; transform: translateX(-50%); }
/* Deste ve gösterge sağ kolonda */
.felt.m-101 .deck { width: calc(var(--tw) * .9); height: calc(var(--th) * .9); font-size: 14px; }
.felt.m-101 .gosterge-box { flex-direction: column; }
.felt.m-101 #gosterge .tile { --w: calc(var(--tw) * .8); --h: calc(var(--th) * .8); }
/* Atılan taşlar köşelerde */
.pile .slot { width: calc(var(--tw) * .78); height: calc(var(--th) * .78); }
.pile .slot .tile { --w: calc(var(--tw) * .78); --h: calc(var(--th) * .78); }
/* Istaka en altta */
.rack-wrap { margin: 0 0 6px; }
@media (max-height: 700px) and (orientation: landscape) {
  .rack-wrap { margin-bottom: 4px; }
  .seat-left .player .avatar, .seat-right .player .avatar { width: 42px; height: 42px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .felt { grid-template-columns: 74px 50px minmax(0, 1fr) 60px 74px; }
  .seat-left .player, .seat-right .player { width: 70px; padding: 6px 4px; }
  .seat-left .player .avatar, .seat-right .player .avatar { width: 32px; height: 32px; }
  .rack-wrap { margin-bottom: 2px; }
}
.center .event, .center.is101 .event { top: auto; bottom: 4px; }

/* Hediyeler ve sesli sohbet */
.player { cursor: pointer; }
.player.speaking { box-shadow: 0 0 0 3px #39e07a, 0 0 22px rgba(57,224,122,.55); }
.gift-badge { position: absolute; top: -12px; right: -12px; width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); animation: pop .4s ease; pointer-events: none; }
.gift-fly { position: fixed; z-index: 120; width: 64px; height: 64px; object-fit: contain; margin: -32px 0 0 -32px; pointer-events: none;
  transition: transform 1s cubic-bezier(.3,.7,.3,1), opacity .5s ease; filter: drop-shadow(0 8px 10px rgba(0,0,0,.5)); }
.gift-fly.done { opacity: 0; }
.gift-to { display: flex; flex-wrap: wrap; gap: 6px; }
.gift-to .btn { display: inline-flex; align-items: center; gap: 4px; }
.gift-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.gift-item { border: 0; cursor: pointer; border-radius: 14px; padding: 8px 4px 6px; background: rgba(255,236,200,.07); box-shadow: inset 0 0 0 1px rgba(242,193,78,.2);
  display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--cream); font-size: 12px; transition: transform .1s ease, background .15s; }
.gift-item:hover { background: rgba(242,193,78,.18); transform: translateY(-2px); }
.gift-item:disabled { opacity: .4; cursor: default; transform: none; }
.gift-item img { width: 54px; height: 54px; object-fit: contain; }
.gift-item b { display: flex; align-items: center; gap: 4px; color: var(--gold); font-size: 12.5px; }
.gift-item .chip-ico { width: 15px; height: 15px; }
#btn-voice.live { background: linear-gradient(180deg, #2fbf6a, #1c7d44); }
.modal { width: min(640px, 100%); }

/* Kendi kartım, sohbet penceresi, oyuncu menüsü */
.status-row { flex-direction: row; gap: 14px; }
.status-col { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.seat-me .player { flex-direction: row !important; padding: 4px 10px 4px 4px; gap: 8px; min-width: 0; border-radius: 999px; cursor: default; }
.seat-me .player .avatar { width: 34px; height: 34px; }
.seat-me .player .pname { max-width: 150px; font-size: 13px; }
.seat-me .bubble { bottom: 100%; }
.player.blocked .avatar { filter: grayscale(1) brightness(.6); }
.player.blocked::after { content: '🚫'; position: absolute; top: -8px; left: -8px; font-size: 16px; }
.bubble { max-width: 220px; white-space: normal; text-align: center; z-index: 30; }
.chat-pop { width: min(360px, calc(100vw - 20px)); display: flex; flex-direction: column; gap: 8px; padding: 10px; grid-template-columns: none; }
.chat-head { display: flex; justify-content: space-between; align-items: center; }
.chat-head .x.small { position: static; width: 28px; height: 28px; font-size: 18px; }
.chat-log { max-height: 190px; min-height: 80px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 10px; background: rgba(0,0,0,.25); font-size: 13.5px; user-select: text; -webkit-user-select: text; }
.chat-log .cl b { color: var(--gold); margin-right: 4px; }
.chat-log .cl.mine b { color: #7CFFB2; }
.chat-log .empty { color: var(--ink-dim); }
.chat-form { display: flex; gap: 6px; }
.chat-form input { flex: 1; min-width: 0; border: 0; border-radius: 10px; padding: 8px 10px; font-size: 14px; background: rgba(255,255,255,.95); color: #1b2a22; user-select: text; -webkit-user-select: text; }
.chat-presets { display: flex; flex-wrap: wrap; gap: 5px; }
.chat-presets .btn { padding: 5px 9px; font-size: 12px; }
#btn-chat { position: relative; }
.unread { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #e2553a; color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.psheet { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.psheet h2 { margin: 0; }
.avatar.big { width: 72px; height: 72px; }
.pacts { display: flex; flex-direction: column; gap: 10px; }
.vol { display: flex; align-items: center; gap: 10px; color: var(--cream); }
.vol input { flex: 1; accent-color: var(--gold); }
.btn.danger { background: linear-gradient(180deg, #c8402c, #8e2516); color: #fff; }
.bubble { width: max-content; max-width: 240px; }

.badge.esin { background: #c98a2e; }

/* =====================================================================
   BATAK masası — Okey'deki düz çuha düzeni; el en altta yelpaze, ortada atılan kartlar.
   ===================================================================== */
:root { --cw: min(104px, calc((min(100vw, 1240px) - 120px) / 7.6)); --ch: calc(var(--cw) * 1.5); }
.bhand { display: none; }
.felt.m-batak .bhand { display: flex; grid-area: rack; justify-content: center; align-items: flex-end; padding: 0 0 10px; min-height: calc(var(--ch) * 1.05); }
.felt.m-batak .rack-wrap, .felt.m-batak .pile, .felt.m-batak .deck-area, .felt.m-batak .mzone, .felt.m-batak .timebar { display: none !important; }
.felt.m-batak .center { background: none; box-shadow: none; position: relative; }
.pcard { width: var(--cw); height: var(--ch); border-radius: calc(var(--cw) * .07); box-shadow: 0 3px 10px rgba(0,0,0,.45); background: #fff; flex: none; user-select: none; -webkit-user-drag: none; }
.bhand .pcard { margin-left: calc(var(--cw) * -0.42); transition: transform .12s ease, filter .15s; cursor: default; }
.bhand .pcard:first-child { margin-left: 0; }
.bhand .pcard.legal { cursor: pointer; }
.bhand .pcard.legal:hover { transform: translateY(-14%); }
.bhand .pcard.sel { transform: translateY(-24%); box-shadow: 0 0 0 3px var(--gold), 0 10px 18px rgba(0,0,0,.5); }
.pcard.dim { filter: brightness(.55) saturate(.7); }
/* Ortadaki el: her kart atanın tarafına kaymış */
.trick { position: absolute; inset: 0; pointer-events: none; display: none; }
.felt.m-batak .trick { display: block; }
.trick .tc { position: absolute; left: 50%; top: 50%; transition: transform .35s ease, opacity .35s; }
.trick .pcard { width: calc(var(--cw) * .9); height: calc(var(--ch) * .9); }
.trick .tc.p0 { transform: translate(-50%, -18%) rotate(0deg); }
.trick .tc.p1 { transform: translate(-6%, -50%) rotate(8deg); }
.trick .tc.p2 { transform: translate(-50%, -82%) rotate(-4deg); }
.trick .tc.p3 { transform: translate(-94%, -50%) rotate(-8deg); }
.trick .tc.win .pcard { box-shadow: 0 0 0 3px var(--gold), 0 6px 14px rgba(0,0,0,.5); }
.trick.taken[data-to="0"] .tc { transform: translate(-50%, 120%) scale(.6); opacity: .0; transition-delay: .7s; }
.trick.taken[data-to="1"] .tc { transform: translate(160%, -50%) scale(.6); opacity: 0; transition-delay: .7s; }
.trick.taken[data-to="2"] .tc { transform: translate(-50%, -260%) scale(.6); opacity: 0; transition-delay: .7s; }
.trick.taken[data-to="3"] .tc { transform: translate(-260%, -50%) scale(.6); opacity: 0; transition-delay: .7s; }
/* İhale ve koz paneli */
.bidpanel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; width: min(300px, 92%);
  background: linear-gradient(170deg, rgba(58,33,14,.96), rgba(26,14,5,.97)); border-radius: 16px; padding: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.6), inset 0 0 0 1px rgba(242,193,78,.3); }
.bp-title { text-align: center; font-weight: 800; margin-bottom: 10px; color: var(--cream); }
.bp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.btn.bp { background: linear-gradient(180deg, #ffd66b, var(--gold-2)); color: #3a2400; font-size: 18px; padding: 10px 0; }
.btn.bp.pas { width: 100%; background: linear-gradient(180deg, #7a4a22, #4d2c12); color: var(--cream); }
.bp-suits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.btn.suit { background: #fffdf5; color: #161616; display: flex; flex-direction: column; align-items: center; padding: 8px 0; font-size: 13px; }
.btn.suit span { font-size: 34px; line-height: 1; }
.btn.suit.red { color: #c62424; }
/* Eşli: açık el */
.dummy { position: absolute; left: 50%; transform: translateX(-50%); top: 2px; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.dummy-label { font-size: 12px; color: var(--cream); background: rgba(0,0,0,.4); padding: 2px 10px; border-radius: 999px; }
.dummy-cards { display: flex; }
.dummy .pcard { width: calc(var(--cw) * .55); height: calc(var(--ch) * .55); margin-left: calc(var(--cw) * -.3); }
.dummy .pcard:first-child { margin-left: 0; }
.dummy.active .pcard.legal { cursor: pointer; box-shadow: 0 0 0 2px #7CFFB2; }
.meter .trump { font-weight: 800; color: #161616; background: #fffdf5; padding: 1px 8px; border-radius: 8px; }
.meter .trump.red { color: #c62424; }
@media (max-height: 700px) and (orientation: landscape) { :root { --cw: min(84px, calc((100vw - 120px) / 7.6), calc((100dvh - 230px) / 2.4)); } }
@media (orientation: portrait) and (max-width: 700px) {
  :root { --cw: calc((100vw - 16px) / 7.2); }
  .bhand .pcard { margin-left: calc(var(--cw) * -0.5); }
}
/* Soluk kartın filtresi onu üste çıkarmasın: hepsi aynı katman düzeninde, DOM sırasıyla */
.bhand .pcard, .dummy .pcard { position: relative; z-index: 0; }
.bhand .pcard.sel, .bhand .pcard.legal:hover { z-index: 1; }
/* Ortadaki el: artı (+) şeklinde, her kart atanın tarafına belirgin kaymış */
.trick .tc.p0 { transform: translate(-50%, 4%) rotate(-2deg); }
.trick .tc.p1 { transform: translate(18%, -52%) rotate(9deg); }
.trick .tc.p2 { transform: translate(-50%, -106%) rotate(3deg); }
.trick .tc.p3 { transform: translate(-118%, -48%) rotate(-9deg); }

/* Vektör kartlar (cards.js): div içinde SVG, her çözünürlükte keskin */
.pcard { background: none; overflow: visible; }
.pcard svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.bhand .pcard, .trick .pcard, .dummy .pcard { box-shadow: none; }
.bhand .pcard.sel svg { filter: drop-shadow(0 0 0 #000) drop-shadow(0 8px 12px rgba(0,0,0,.5)); }
.bhand .pcard.sel { box-shadow: 0 0 0 3px var(--gold); border-radius: calc(var(--cw) * .08); }
.trick .tc.win .pcard { box-shadow: 0 0 0 3px var(--gold); border-radius: calc(var(--cw) * .08); }
/* Eşin açık eli: büyük, net, kartın üst kenarında */
.dummy { top: 0; gap: 6px; width: 100%; }
.dummy-label { font-size: 14px; padding: 4px 14px; background: rgba(0,0,0,.55); box-shadow: inset 0 0 0 1px rgba(242,193,78,.4); }
.dummy.active .dummy-label { background: rgba(140,90,10,.85); color: #fff; }
.dummy .pcard { width: calc(var(--cw) * .82); height: calc(var(--ch) * .82); margin-left: calc(var(--cw) * -.38); }
.dummy .pcard:first-child { margin-left: 0; }
.dummy.active .pcard.legal { box-shadow: 0 0 0 3px #7CFFB2; border-radius: calc(var(--cw) * .08); cursor: pointer; transform: translateY(-6%); }
.dummy.active .pcard.legal:hover { transform: translateY(-14%); z-index: 2; }
.center.has-dummy .trick { top: 26%; }

/* Açık el üst sırada, eşin kartının yanında */
.felt.m-batak .seat-top { gap: 12px; align-items: center; }
.seat-top .dummy { position: static; transform: none; width: auto; top: auto; left: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; z-index: 4; }
.seat-top .dummy .pcard { width: calc(var(--cw) * .66); height: calc(var(--ch) * .66); margin-left: calc(var(--cw) * -.36); }
.seat-top .dummy .pcard:first-child { margin-left: 0; }
.center.has-dummy .trick { top: 0; }

/* Takip: ortadaki kartlarda atanın adı, son el, yığın geçmişi */
.trick .tc { display: flex; flex-direction: column; align-items: center; }
.tc-name { font-size: 11px; font-weight: 700; color: var(--cream); background: rgba(0,0,0,.45); padding: 1px 8px; border-radius: 999px; margin-bottom: 3px; white-space: nowrap; }
.trick.taken .tc { transition-delay: 0s; transition-duration: .45s; }
.lt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 8px 0; }
.lt-row { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; }
.lt-row .pcard { width: 90px; height: 135px; }
.pile-all { display: flex; flex-wrap: wrap; gap: 4px; }
.pile { cursor: pointer; }

/* Yandaki oyuncunun açık eli: o oyuncunun tarafında */
.center > .dummy.dpos1, .center > .dummy.dpos3 { position: absolute; top: 50%; transform: translateY(-50%); left: auto; right: auto; width: auto; z-index: 3; }
.center > .dummy.dpos1 { right: 4px; align-items: flex-end; }
.center > .dummy.dpos3 { left: 4px; align-items: flex-start; }
.dummy-rows { display: flex; flex-direction: column; gap: 3px; }
.center > .dummy .pcard { width: calc(var(--cw) * .5); height: calc(var(--ch) * .5); margin-left: calc(var(--cw) * -.28); }
.center > .dummy .dummy-cards .pcard:first-child { margin-left: 0; }
.center > .dummy .dummy-label { font-size: 12px; }
/* Batak: olay yazısı ortadaki kartlara binmesin */
.felt.m-batak .center .event { top: auto; bottom: 4px; left: 8px; transform: none; max-width: 30%; white-space: normal; }

/* Okey rozeti, koz duyurusu */
.gosterge-box { flex-direction: row; gap: 8px; align-items: flex-end; }
.okey-badge { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--gold); font-size: 11px; font-weight: 800; }
.felt.m-101 .gosterge-box { flex-direction: column; align-items: center; }
.trump-announce { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 8; pointer-events: none;
  background: rgba(255,253,245,.96); color: #161616; border-radius: 18px; padding: 12px 26px; font-size: 22px; font-weight: 900;
  display: flex; align-items: center; gap: 10px; box-shadow: 0 16px 40px rgba(0,0,0,.55); animation: trumpin 2.2s ease forwards; }
.trump-announce span { font-size: 46px; line-height: 1; }
.trump-announce.red { color: #c62424; }
@keyframes trumpin { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } 80% { opacity: 1; } 100% { opacity: 0; } }

#gosterge { display: flex; gap: 10px; align-items: flex-end; }
.gosterge-box > small { display: none; }
.gitem { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--ink-dim); font-size: 11px; }
.gitem.okey-badge small { color: var(--gold); font-weight: 800; }
.felt.m-101 #gosterge { flex-direction: column; gap: 6px; }
.felt.m-101 #gosterge .tile { --w: calc(var(--tw) * .6); --h: calc(var(--th) * .6); }

/* Sürükleme: tutulan taş büyür */
.rack .tile.lift { transform: scale(1.14); z-index: 3; }
.drag-ghost { transform: translate(-50%, -60%) scale(1.2) rotate(-3deg); filter: drop-shadow(0 12px 14px rgba(0,0,0,.55)); }
#deck.active, .pile.takeable .slot { touch-action: none; cursor: grab; }
.bhand .pcard.sel { transform: translateY(-24%) scale(1.08); }
/* Sıra balonu (profil resminin üstünde) */
.turn-bubble { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); z-index: 6; white-space: nowrap; pointer-events: none;
  background: linear-gradient(180deg, #ffd66b, var(--gold-2)); color: #3a2400; font-size: 11.5px; font-weight: 800; padding: 2px 10px; border-radius: 999px;
  box-shadow: 0 3px 8px rgba(0,0,0,.4); animation: tbpulse 1.4s ease-in-out infinite; }
.turn-bubble::after { content: ''; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--gold-2); border-bottom: 0; }
.turn-bubble.mine { background: linear-gradient(180deg, #7CFFB2, #2fbf6a); color: #062a14; }
.turn-bubble.mine::after { border-top-color: #2fbf6a; }
@keyframes tbpulse { 50% { transform: translateX(-50%) translateY(-2px); } }
.seat-top .turn-bubble { top: auto; bottom: -14px; }
.seat-top .turn-bubble::after { bottom: auto; top: -5px; border-top-color: transparent; border-bottom: 5px solid var(--gold-2); }
/* Lobide masalar: yana kayan şerit ve oklar */
.tables-wrap { position: relative; }
.tables { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 2px 10px; scrollbar-width: none; }
.tables::-webkit-scrollbar { display: none; }
.tables .tcard { flex: 0 0 min(250px, 78vw); scroll-snap-align: start; }
.tarrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(20,10,3,.85); color: var(--gold); display: flex; align-items: center; justify-content: center; padding: 0; box-shadow: 0 6px 16px rgba(0,0,0,.5), inset 0 0 0 1px rgba(242,193,78,.4); }
.tarrow.l { left: -8px; } .tarrow.r { right: -8px; }
.tarrow.off { opacity: 0; pointer-events: none; }
/* Profil */
.me { cursor: pointer; }
#scr-profile { overflow-y: auto; align-items: center; padding: 14px 16px; background: radial-gradient(120% 90% at 50% 30%, rgba(20,10,3,.35), rgba(12,6,2,.86) 70%), url(img/lobi.webp) center / cover no-repeat; }
.profile-page { width: min(720px, 100%); display: flex; flex-direction: column; gap: 12px; }
#profile-body .prof { background: linear-gradient(170deg, rgba(58,33,14,.92), rgba(26,14,5,.94)); border-radius: 20px; padding: 20px; box-shadow: inset 0 0 0 1px rgba(242,193,78,.28); }
.prof-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.prof-head h2 { margin: 0; }
.avatar.huge { width: 96px; height: 96px; }
.prof-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.prof-stats div { background: rgba(0,0,0,.25); border-radius: 12px; padding: 10px; text-align: center; }
.prof-stats b { display: block; font-size: 20px; color: var(--gold); }
.prof-stats small { color: var(--ink-dim); }
.prof-gifts { display: flex; flex-wrap: wrap; gap: 8px; }
.pg { display: flex; flex-direction: column; align-items: center; width: 74px; background: rgba(0,0,0,.2); border-radius: 12px; padding: 6px 4px; font-size: 11px; }
.pg img { width: 42px; height: 42px; object-fit: contain; }
.pg b { color: var(--gold); }
.lrow { cursor: pointer; }
.lrow:hover td { background: rgba(242,193,78,.08); }

/* Hesap değiştir: bu cihazdaki hesaplar */
.saved-acc { margin-top: 14px; }
.acc-list { display: flex; flex-wrap: wrap; gap: 8px; }
.acc-list .acc { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; }
.acc-list .lav { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; display: inline-block; }
.acc-list .lav img { width: 100%; height: 100%; object-fit: cover; }

/* Koltukta oyuncunun çipi */
.player .pchips { color: var(--gold); font-weight: 800; font-size: 12px; line-height: 1.2; white-space: nowrap; }

/* Istaka yan panelleri: çuhayla uyumlu yeşil (Owner 2026-10-11: kahverengi kutular uyumsuzdu) */
.rack-side {
  background: linear-gradient(180deg, rgba(10,58,36,.78), rgba(4,32,19,.88));
  box-shadow: inset 0 0 0 1px rgba(242,193,78,.45), 0 8px 18px rgba(0,0,0,.4);
  backdrop-filter: blur(2px);
}
.rack-side .btn.act {
  background: linear-gradient(180deg, #2b7d5a, #17563c); color: #fdf6e3;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(242,193,78,.35), 0 2px 6px rgba(0,0,0,.35);
}
.rack-side .btn.act:hover:not(:disabled) { background: linear-gradient(180deg, #34936a, #1c6446); }
.rack-side .btn.act:disabled { background: rgba(255,255,255,.06); color: rgba(253,246,227,.45); box-shadow: inset 0 0 0 1px rgba(242,193,78,.18); }
.rack-side .btn.act.hot { background: linear-gradient(180deg, #ffd66b, var(--gold-2)); color: #3a2400; }

/* Hesap koruma */
.prof-account { margin-top: 18px; padding-top: 12px; border-top: 1px solid rgba(242,193,78,.25); }
#btn-login { margin-top: 10px; width: 100%; }
#btn-profile.unsaved::after { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff5a4f; margin-left: 6px; vertical-align: middle; box-shadow: 0 0 6px #ff5a4f; }

/* Facebook Instant Games: hesap değiştirme, Google, sesli sohbet yok (Facebook hesabı = oyun hesabı) */
body.fb #btn-switch, body.fb #btn-login, body.fb #btn-voice, body.fb #btn-voice-off, body.fb .prof-account > h3 ~ label,
body.fb #acc-save, body.fb #acc-google { display: none !important; }

/* Gizlilik / koşullar bağlantıları */
.fine a, .fair a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }