:root {
  --bg1: #1d648d;
  --bg2: #124869;
  --bg3: #0b2d44;
  --carpet1: #0c354c;
  --carpet2: #082738;
  --gold: #f5c542;
  --c0: #d62828;
  --c1: #e09400;
  --c2: #1d75d8;
  --c3: #1b1b1b;
  --tw: 46px;
  --mw: 24px;
  --mh: 33px;
  --cell-w: 26px;
  --cell-h: 35px;
  --carpet-rows: 12;
  --side: clamp(82px, 11.5vw, 150px);
  --team0: #3fa9f5;
  --team1: #ff7a45;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg3); color: #f3f3f3; }
body { touch-action: manipulation; user-select: none; -webkit-user-select: none; }
input, select, textarea { user-select: text; -webkit-user-select: text; font: inherit; }
button { font: inherit; cursor: pointer; }
.hidden { display: none !important; }
.muted { color: #b9d2e2; font-size: 14px; }

.screen { display: none; position: fixed; inset: 0; }
.screen.active { display: flex; }

/* -------------------------- Buttons ------------------------------- */
.btn {
  border: 0; border-radius: 10px; padding: 8px 14px; color: #fff;
  background: linear-gradient(#32566e, #1f394a); box-shadow: 0 2px 0 #0d1c26, 0 3px 8px rgba(0,0,0,.35);
  font-weight: 600; font-size: 14px; white-space: nowrap; transition: transform .08s, filter .15s;
}
.btn:hover { filter: brightness(1.15); }
.btn:active { transform: translateY(2px); box-shadow: 0 0 0 #0d1c26; }
.btn:disabled { opacity: .45; cursor: default; filter: none; transform: none; }
.btn.primary { background: linear-gradient(#ffcf4d, #e09b00); color: #3a2600; box-shadow: 0 2px 0 #9a6400, 0 3px 8px rgba(0,0,0,.35); }
.btn.danger { background: linear-gradient(#e2554f, #a8231d); box-shadow: 0 2px 0 #6c120e, 0 3px 8px rgba(0,0,0,.35); }
.btn.green { background: linear-gradient(#3cc47c, #1d8b51); box-shadow: 0 2px 0 #0d5631, 0 3px 8px rgba(0,0,0,.35); }
.btn.ghost { background: transparent; box-shadow: none; border: 1px solid rgba(255,255,255,.25); }
.btn.big { padding: 12px 20px; font-size: 16px; }
.btn.small { padding: 5px 9px; font-size: 12px; border-radius: 8px; }
.icon-btn {
  background: linear-gradient(#264c69, #173247); border: 1px solid rgba(255,255,255,.18);
  color: #fff; width: 34px; height: 32px; border-radius: 8px; font-size: 16px; position: relative;
  box-shadow: 0 2px 4px rgba(0,0,0,.4);
}
.icon-btn:hover { filter: brightness(1.15); }
.badge { position: absolute; top: -4px; right: -4px; background: #e53935; color: #fff; font-size: 10px; border-radius: 9px; padding: 1px 5px; }

/* -------------------------- Home & Lobby --------------------------- */
#screen-home, #screen-lobby {
  background: radial-gradient(ellipse at center, var(--bg1) 0%, var(--bg2) 60%, var(--bg3) 100%);
  align-items: center; justify-content: center; overflow: auto;
}
.home-card {
  width: min(440px, 92vw); background: rgba(6, 24, 38, .65); border-radius: 18px; padding: 24px 24px 18px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.12); max-height: 96vh; overflow: auto;
}
.logo { text-align: center; margin-bottom: 14px; }
.logo h1 { margin: 8px 0 2px; font-size: 36px; letter-spacing: 1px; text-shadow: 0 3px 0 rgba(0,0,0,.35); }
.logo .sub { margin: 0; color: #cfe0ec; }
.logo-tiles { display: flex; gap: 6px; justify-content: center; }
.mini-tile {
  display: inline-flex; width: 42px; height: 58px; align-items: center; justify-content: center; font-weight: 900; font-size: 28px;
  background: linear-gradient(#fffdf8, #ece3cc); border-radius: 7px; box-shadow: 0 3px 0 #b9a77a, 0 5px 10px rgba(0,0,0,.4);
}
.mini-tile.c0 { color: var(--c0); transform: rotate(-8deg); }
.mini-tile.c2 { color: var(--c2); }
.mini-tile.c3 { color: var(--c3); transform: rotate(8deg); }
.field { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; font-size: 14px; color: #d8e6f0; }
.field.row { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
.field.check { margin: 5px 0; font-size: 13px; }
.field.check input { width: 18px; height: 18px; accent-color: var(--gold); cursor: pointer; }
.rule-toggles {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-direction: column; gap: 2px;
}
.field input, .field select, .join-row input {
  padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.35); color: #fff; outline: none;
}
.field select { min-width: 150px; }
.field select option { color: #000; }
.field input:focus, .join-row input:focus { border-color: var(--gold); }
.home-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.join-row { display: flex; gap: 8px; }
.join-row input { flex: 1; text-transform: uppercase; letter-spacing: 3px; font-weight: 700; min-width: 0; }
.rules-box { margin-top: 16px; font-size: 13px; color: #d2e2ec; background: rgba(0,0,0,.25); border-radius: 10px; padding: 8px 12px; }
.rules-box summary { cursor: pointer; font-weight: 600; }
.rules-box ul { padding-left: 18px; margin: 8px 0; }
.rules-box li { margin: 4px 0; }

.lobby { width: min(1100px, 96vw); max-height: 96vh; display: flex; flex-direction: column; gap: 12px; }
.lobby-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.room-code { font-size: 20px; }
.room-code b { letter-spacing: 4px; color: var(--gold); font-size: 26px; }
.lobby-body { display: flex; gap: 16px; min-height: 0; flex-wrap: wrap; }
.lobby-table { flex: 1 1 480px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.felt-mini {
  position: relative; width: min(520px, 92vw); aspect-ratio: 1.45; border-radius: 40px;
  background: radial-gradient(ellipse at center, #1c6b97, #0c3954 75%); border: 10px solid #5b3618;
  box-shadow: inset 0 0 40px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.5);
}
.felt-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 46px; font-weight: 900; color: rgba(255,255,255,.08); pointer-events: none; }
.seat-box {
  position: absolute; width: 150px; min-height: 76px; background: rgba(0,0,0,.48); border-radius: 12px; padding: 8px; text-align: center;
  border: 2px solid rgba(255,255,255,.14); display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center; z-index: 1;
}
.seat-box[data-seat="0"] { bottom: -26px; left: 50%; transform: translateX(-50%); }
.seat-box[data-seat="2"] { top: -26px; left: 50%; transform: translateX(-50%); }
.seat-box[data-seat="1"] { right: -30px; top: 50%; transform: translateY(-50%); }
.seat-box[data-seat="3"] { left: -30px; top: 50%; transform: translateY(-50%); }
.seat-box.team0 { border-color: var(--team0); }
.seat-box.team1 { border-color: var(--team1); }
.seat-box .nm { font-weight: 700; font-size: 15px; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat-box .tag { font-size: 11px; color: #bcd; }
.seat-box .btns { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.seat-box.me { box-shadow: 0 0 0 2px var(--gold); }
.lobby-buttons { display: flex; gap: 10px; align-items: center; margin-top: 30px; flex-wrap: wrap; justify-content: center; }
.lobby-side { flex: 0 1 340px; display: flex; flex-direction: column; gap: 12px; min-width: 280px; }
.panel { background: rgba(0,0,0,.32); border-radius: 14px; padding: 12px 14px; }
.panel h3 { margin: 0 0 6px; font-size: 16px; }
.chat-panel { display: flex; flex-direction: column; min-height: 200px; }
.chat-log { flex: 1; overflow-y: auto; max-height: 220px; font-size: 13px; display: flex; flex-direction: column; gap: 3px; padding: 4px 0; user-select: text; }
.chat-log .msg b { color: var(--gold); }
.chat-form { display: flex; gap: 6px; margin-top: 6px; }
.chat-form input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.3); color: #fff; }
body.not-host .host-only { display: none !important; }
body.is-host .guest-only { display: none !important; }

/* =================== 101 Okey Plus Masa Düzeni ==================== */
#screen-game { background: var(--bg3); }
.table {
  position: relative; width: 100%; height: 100%;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(65,160,220,.22), transparent 60%),
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.03) 0 2px, transparent 3px) 0 0 / 28px 28px,
    linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 55%, var(--bg3) 100%);
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Üst çubuk */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 3px 10px; gap: 8px; flex: 0 0 auto; min-height: 38px;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 6px; }
.room-pill {
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px; padding: 3px 8px; font-size: 12px; color: #dbeeff;
}
.room-pill b { color: var(--gold); }

/* Orta masa satırı: sol oyuncu sütunu | orta halı | sağ oyuncu + butonlar sütunu */
.board-row {
  flex: 1 1 auto; min-height: 0;
  display: grid;
  grid-template-columns: var(--side) minmax(0, 1fr) var(--side);
  gap: 6px;
  padding: 0 6px;
}
.side-col {
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  min-height: 0; padding: 2px 0;
}
.right-mid {
  display: flex; flex-direction: column; align-items: center; gap: 5px; width: 100%;
}

/* Oyuncu plakaları */
.player-plate {
  display: flex; align-items: center; gap: 7px;
  background: linear-gradient(180deg, rgba(16,32,48,.88), rgba(8,18,28,.92));
  border-radius: 10px; padding: 4px 10px 4px 5px;
  border: 1.5px solid rgba(255,255,255,.18);
  position: relative; box-shadow: 0 3px 10px rgba(0,0,0,.45);
  transition: box-shadow .2s, border-color .2s;
}
.player-plate.vertical {
  flex-direction: column; text-align: center; padding: 6px 4px;
  width: calc(var(--side) - 10px); gap: 3px;
}
.player-plate.team0 { border-color: rgba(63,169,245,.75); }
.player-plate.team1 { border-color: rgba(255,122,69,.75); }
.player-plate.active {
  border-color: #9be858;
  box-shadow: 0 0 0 2px #7ed321, 0 0 18px rgba(126,211,33,.65);
}
.avatar {
  width: 30px; height: 30px; border-radius: 7px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; color: #fff;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.3);
}
.plate-info { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.plate-name { font-weight: 700; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 125px; }
.player-plate.vertical .plate-name { max-width: calc(var(--side) - 18px); font-size: 11px; }
.plate-meta { display: flex; gap: 3px; flex-wrap: wrap; font-size: 10px; justify-content: inherit; }
.player-plate.vertical .plate-meta { justify-content: center; }
.chip { background: rgba(255,255,255,.13); border-radius: 5px; padding: 1px 5px; white-space: nowrap; }
.chip.open { background: #1f8f55; color: #fff; font-weight: 700; }
.chip.pairs { background: #8b44c7; color: #fff; font-weight: 700; }
.chip.pen { background: #a8231d; }
.chip.bonus { background: #1d6fa8; }
.chip.off { background: #555; }
.timer-bar { position: absolute; left: 6px; right: 6px; bottom: 1px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.15); overflow: hidden; }
.timer-bar > i { display: block; height: 100%; background: #8be234; width: 100%; transition: width .25s linear; }
.timer-bar.low > i { background: #ff5252; }

/* =================== Orta 101 Okey Plus Halısı =================== */
.carpet-wrap {
  min-width: 0; min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 2px 0;
}

.meld-carpet {
  position: relative;
  box-sizing: content-box;
  display: grid;
  grid-template-columns: calc(var(--cell-w) * 13) calc(var(--cell-w) * 13);
  column-gap: 2px;
  width: calc(var(--cell-w) * 26 + 2px);
  height: calc(var(--cell-h) * var(--carpet-rows));
  background: rgba(185, 228, 255, 0.45);
  border: 2px solid rgba(150, 210, 245, 0.48);
  border-radius: 4px;
  box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0,0,0,.35);
  overflow: hidden;
  flex: 0 0 auto;
  --w: var(--mw);
}
.carpet-pane {
  position: relative;
  box-sizing: content-box;
  width: calc(var(--cell-w) * 13);
  height: calc(var(--cell-h) * var(--carpet-rows));
  overflow: hidden;
  padding: 0;
  margin: 0;
  background:
    linear-gradient(rgba(135, 205, 250, 0.14) 1px, transparent 1px) 0 0 / var(--cell-w) var(--cell-h),
    linear-gradient(90deg, rgba(135, 205, 250, 0.14) 1px, transparent 1px) 0 0 / var(--cell-w) var(--cell-h),
    linear-gradient(180deg, var(--carpet1), var(--carpet2));
}
.carpet-pane:first-child {
  border-right: 0;
}
.carpet-watermark {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: clamp(32px, 5vw, 58px); font-weight: 900; letter-spacing: 2px;
  color: rgba(140, 205, 245, 0.065);
  pointer-events: none; line-height: .9;
}
.carpet-watermark span { font-size: .36em; letter-spacing: 5px; margin-top: 2px; }

.pane-melds {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 0;
  margin: 0;
  padding: 0;
}

.meld-row {
  display: flex; align-items: flex-start;
  height: var(--cell-h);
  flex: 0 0 var(--cell-h);
  margin: 0;
  padding: 0;
}

.meld {
  display: inline-flex; align-items: flex-start;
  gap: 0;
  height: var(--cell-h);
  padding: 0;
  margin: 0;
  border-radius: 2px;
  position: relative;
  flex: 0 0 auto;
  transition: transform .12s, box-shadow .12s, background .12s;
}
.meld > .tile {
  --w: var(--mw);
  box-sizing: border-box !important;
  width: var(--mw) !important;
  height: var(--mh) !important;
  flex: 0 0 var(--mw) !important;
  font-size: calc(var(--mw) * .48) !important;
  padding-top: calc(var(--mw) * .08) !important;
  border-radius: calc(var(--mw) * .12) !important;
  margin: 1px !important;
  letter-spacing: -0.5px;
}
.meld > .tile .dot {
  width: calc(var(--mw) * .2) !important;
  height: calc(var(--mw) * .2) !important;
  margin-bottom: calc(var(--mw) * .09) !important;
}
.meld.pos-0 > .tile:first-child { box-shadow: -2px 0 0 #f5c542, 0 calc(var(--w) * .055) 0 #bfb08a; }
.meld.pos-1 > .tile:first-child { box-shadow: -2px 0 0 #6ee7b7, 0 calc(var(--w) * .055) 0 #bfb08a; }
.meld.pos-2 > .tile:first-child { box-shadow: -2px 0 0 #60a5fa, 0 calc(var(--w) * .055) 0 #bfb08a; }
.meld.pos-3 > .tile:first-child { box-shadow: -2px 0 0 #f472b6, 0 calc(var(--w) * .055) 0 #bfb08a; }
.meld.can-attach { background: rgba(60,196,124,.38); box-shadow: 0 0 0 2px #3cc47c; cursor: pointer; }
.meld.can-swap { background: rgba(245,197,66,.38); box-shadow: 0 0 0 2px var(--gold); cursor: pointer; }
.meld.drop-hover { transform: scale(1.06); }
.meld.fresh { animation: fresh 1.2s ease-out; }
@keyframes fresh { from { box-shadow: 0 0 0 3px #fff, 0 0 18px #fff; } to { box-shadow: none; } }
.meld .meld-val {
  position: absolute; bottom: 1px; right: 2px;
  font-size: 8px; font-weight: 800; line-height: 1;
  color: #fff; background: rgba(0,0,0,.68); border-radius: 3px; padding: 1px 3px;
  pointer-events: none;
}

/* Hazırlanan (henüz indirilmeyen) per katmanı */
.staging-overlay {
  position: absolute; left: 6px; right: 6px; bottom: 5px; z-index: 5;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: rgba(8, 28, 42, 0.9);
  border: 1.5px dashed rgba(245, 197, 66, 0.65);
  border-radius: 8px; padding: 4px 8px;
  --w: var(--mw);
}
.staging-overlay.drop-hover { background: rgba(245,197,66,.2); }
.stage-group {
  display: inline-flex; gap: 1px; padding: 2px 4px 10px; border-radius: 6px;
  background: rgba(0,0,0,.35); position: relative; border: 1.5px solid transparent;
}
.stage-group.valid { border-color: #3cc47c; }
.stage-group.invalid { border-color: #e2554f; }
.stage-group .gv { position: absolute; bottom: -1px; left: 4px; font-size: 9px; font-weight: 700; }
.stage-group .gx {
  position: absolute; top: -6px; right: -6px; width: 16px; height: 16px;
  border-radius: 50%; border: 0; background: #e2554f; color: #fff; font-size: 10px; line-height: 16px; padding: 0;
}
.stage-total {
  font-weight: 800; font-size: 12px; padding: 3px 7px; border-radius: 6px; background: rgba(0,0,0,.45);
}
.stage-total.ok { color: #6ef0a8; }
.stage-total.no { color: #ffb4b4; }

/* Bilgi sütunu: Mod rozetleri + Gösterge + Deste + Dijital Sayaç */
.info-strip {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  gap: 4px; padding: 2px 2px; width: clamp(54px, 6.2vw, 74px);
}
.mode-badges { display: flex; flex-direction: column; gap: 3px; width: 100%; }
.mode-pill {
  font-size: 10px; font-weight: 700; text-align: center;
  padding: 2px 4px; border-radius: 5px;
  background: rgba(8, 25, 38, 0.78);
  border: 1px solid rgba(255,255,255,.16);
  color: #e2f1ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mode-pill.green { background: linear-gradient(#1f7a44, #14522d); }
.mode-pill.red { background: linear-gradient(#9b2626, #6b1616); }

.indicator-slot {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  --w: clamp(34px, 4.2vw, 44px);
}
.okey-mini {
  font-size: 10px; font-weight: 800; padding: 1px 5px; border-radius: 4px;
  background: rgba(0,0,0,.45); color: var(--gold); white-space: nowrap;
}

.deck {
  position: relative;
  width: clamp(36px, 4.4vw, 46px);
  height: calc(clamp(36px, 4.4vw, 46px) * 1.38);
  cursor: pointer;
}
.deck-stack {
  position: absolute; inset: 0; border-radius: 6px;
  background: linear-gradient(180deg, #fffdf8, #e8dec4);
  box-shadow: 0 3px 0 #b8a57a, 0 5px 10px rgba(0,0,0,.45);
}
.deck-stack::after {
  content: ""; position: absolute; left: 50%; top: 34%;
  width: 34%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; background: rgba(180,165,130,.35);
}
.deck span {
  position: absolute; left: 0; right: 0; bottom: 14%;
  text-align: center; font-weight: 900; color: #222;
  font-size: clamp(12px, 1.5vw, 15px);
}
.deck.can-draw { animation: pulse 1.1s infinite; }
.deck.empty .deck-stack { opacity: .25; }
@keyframes pulse { 0%,100% { filter: drop-shadow(0 0 0 rgba(245,197,66,0)); } 50% { filter: drop-shadow(0 0 11px rgba(245,197,66,.95)); } }

/* Dijital 3 haneli el sayı sayacı (049 gibi) */
.digital-counter {
  display: inline-flex; gap: 2px; padding: 3px 5px;
  background: linear-gradient(#1b242c, #0c1116);
  border: 1.5px solid rgba(255,255,255,.28);
  border-radius: 6px; box-shadow: inset 0 2px 4px rgba(0,0,0,.7);
  font-family: "Consolas", "Courier New", monospace;
  font-weight: 900; font-size: 13px; letter-spacing: 1px; color: #fff;
}
.digital-counter.ready { border-color: #4ade80; color: #86efac; }
.digital-counter i {
  font-style: normal; background: rgba(255,255,255,.08);
  padding: 1px 3px; border-radius: 3px;
}

/* Çift açma sütunu: 4 dikey kare sütun (her 2 kareye 1 çift sığar, dikey çizgilerle tam hizalı) */
.pairs-strip {
  position: relative;
  box-sizing: content-box;
  width: calc(var(--cell-w) * 4);
  height: calc(var(--cell-h) * var(--carpet-rows));
  flex: 0 0 auto;
  background:
    linear-gradient(90deg, transparent calc(var(--cell-w) * 2 - 1px), rgba(185, 228, 255, 0.45) calc(var(--cell-w) * 2 - 1px), rgba(185, 228, 255, 0.45) calc(var(--cell-w) * 2 + 1px), transparent calc(var(--cell-w) * 2 + 1px)),
    linear-gradient(rgba(135, 205, 250, 0.14) 1px, transparent 1px) 0 0 / var(--cell-w) var(--cell-h),
    linear-gradient(90deg, rgba(135, 205, 250, 0.14) 1px, transparent 1px) 0 0 / var(--cell-w) var(--cell-h),
    linear-gradient(180deg, var(--carpet1), var(--carpet2));
  border: 2px solid rgba(150, 210, 245, 0.48);
  border-radius: 4px;
  box-shadow: inset 0 0 18px rgba(0,0,0,.55);
  overflow: hidden;
  --w: var(--mw);
}
.pairs-grid {
  display: grid;
  grid-template-columns: repeat(2, calc(var(--cell-w) * 2));
  grid-auto-rows: var(--cell-h);
}
.pair-meld {
  display: inline-flex; align-items: flex-start;
  width: calc(var(--cell-w) * 2);
  height: var(--cell-h);
  padding: 0;
  margin: 0;
  gap: 0;
}
.pair-meld > .tile {
  --w: var(--mw);
  box-sizing: border-box !important;
  width: var(--mw) !important;
  height: var(--mh) !important;
  flex: 0 0 var(--mw) !important;
  font-size: calc(var(--mw) * .48) !important;
  padding-top: calc(var(--mw) * .08) !important;
  border-radius: calc(var(--mw) * .12) !important;
  margin: 1px !important;
  letter-spacing: -0.5px;
}
.pair-meld > .tile .dot {
  width: calc(var(--mw) * .2) !important;
  height: calc(var(--mw) * .2) !important;
  margin-bottom: calc(var(--mw) * .09) !important;
}

/* Sağ sütun aksiyon butonları (SERİ AÇ / ÇİFT AÇ / GERİ TOPLA / TAŞLARI İŞLE) */
.side-actions {
  display: flex; flex-direction: column; gap: 4px; width: calc(var(--side) - 8px);
}
.act-tile-btn {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 6px 4px; border-radius: 8px;
  border: 1.5px solid rgba(255,255,255,.45);
  background: linear-gradient(180deg, #f5f7fa 0%, #cfd8e3 100%);
  color: #1c2b39; font-weight: 900; font-size: clamp(10px, 1.05vw, 12px);
  box-shadow: 0 2px 0 #7a8b99, 0 3px 7px rgba(0,0,0,.4);
  letter-spacing: .2px;
}
.act-tile-btn.sub {
  background: linear-gradient(180deg, #62849d 0%, #3e5b72 100%);
  color: #e9f3fb; border-color: rgba(255,255,255,.25);
  box-shadow: 0 2px 0 #233646, 0 3px 6px rgba(0,0,0,.35);
}
.act-tile-btn.ready {
  background: linear-gradient(180deg, #ffe066 0%, #f59f00 100%);
  color: #2b1700; border-color: #fff3bf;
  box-shadow: 0 0 10px rgba(255, 212, 59, 0.65);
}
.act-tile-btn.sub.ready {
  background: linear-gradient(180deg, #4cd97b 0%, #1f9d4c 100%);
  color: #fff; border-color: #b2f2bb;
}
.act-tile-btn:disabled { opacity: .42; cursor: default; filter: grayscale(.3); box-shadow: none; }
.act-icons { display: inline-flex; gap: 1px; }
.act-icons b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 12px; height: 16px; border-radius: 2px;
  background: #fff; font-size: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.act-icons b.c0 { color: var(--c0); }
.act-icons b.c2 { color: var(--c2); }
.act-icons b.c3 { color: var(--c3); }

/* Köşe atılan taş yığınları */
.discard-pile {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: calc(var(--tw) * 1.15); height: calc(var(--tw) * 1.5);
  border-radius: 10px;
}
.discard-pile::before {
  content: ""; position: absolute; inset: 2px; border-radius: 9px;
  border: 2px dashed rgba(255,255,255,.18); background: rgba(0,0,0,.16);
}
.discard-pile .stack { position: relative; width: var(--tw); height: calc(var(--tw) * 1.38); }
.discard-pile .stack .tile { position: absolute; left: 0; top: 0; }
.discard-pile .cnt { position: absolute; bottom: -2px; right: 2px; font-size: 10px; color: #cde; z-index: 2; }
.discard-pile.takeable { cursor: pointer; }
.discard-pile.takeable .stack .tile:last-child { animation: pulse 1.1s infinite; }
.discard-pile.drop-target::before { border-color: var(--gold); background: rgba(245,197,66,.14); }
.discard-pile.drop-hover::before { background: rgba(245,197,66,.34); }
.discard-pile .pile-label {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  font-size: 9px; color: rgba(255,255,255,.65); white-space: nowrap;
}

/* =================== Alt Istaka ve Oyuncu Şeridi =================== */
.bottom {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 2px 6px 5px;
}
.me-strip {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; max-width: calc(var(--tw) * 15 + 170px); flex-wrap: wrap;
}
.my-score-bubble {
  display: inline-flex; align-items: baseline; gap: 4px;
  background: linear-gradient(180deg, #2b6cb0, #1a4475);
  border: 1.5px solid rgba(255,255,255,.45);
  padding: 3px 11px; border-radius: 12px;
  box-shadow: 0 3px 8px rgba(0,0,0,.45);
}
.my-score-bubble span { font-weight: 900; font-size: 15px; color: #fff; }
.my-score-bubble small { font-size: 10px; color: #cfe6ff; }
.my-score-bubble.ready {
  background: linear-gradient(180deg, #2f9e44, #1e6b2d);
  border-color: #b2f2bb;
}

.quick-actions { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.quick-actions .hint {
  font-size: 12px; color: #fff3c4; background: rgba(0,0,0,.38);
  padding: 3px 9px; border-radius: 8px; border: 1px solid rgba(245,197,66,.3);
}

/* Istaka satırı: [ÇİFT DİZ] [2 katlı ahşap ıstaka] [SERİ DİZ] */
.rack-bar {
  display: flex; align-items: stretch; justify-content: center; gap: 6px;
}
.rack-side-btn {
  width: clamp(46px, 5.4vw, 62px);
  border-radius: 10px;
  border: 2px solid #9aa8b6;
  background: linear-gradient(180deg, #3c4854 0%, #1d242b 55%, #12171c 100%);
  color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 6px 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 5px 12px rgba(0,0,0,.55);
}
.rack-side-btn:hover { filter: brightness(1.15); }
.rack-side-btn:active { transform: translateY(2px); }
.rack-side-btn b { font-size: clamp(11px, 1.2vw, 14px); line-height: 1.05; text-align: center; letter-spacing: .4px; }
.mini-pair { display: flex; gap: 2px; }
.mini-pair i {
  font-style: normal; font-weight: 900; font-size: 11px;
  width: 15px; height: 21px; border-radius: 3px;
  background: linear-gradient(#fff, #e5dcc5);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.45);
}
.mini-pair i.c0 { color: var(--c0); }
.mini-pair i.c2 { color: var(--c2); }
.mini-pair i.c3 { color: var(--c3); }

.rack-wrap { position: relative; }
.rack {
  --gap: calc(var(--tw) * .055);
  display: grid; grid-template-columns: repeat(15, var(--tw)); grid-auto-rows: calc(var(--tw) * 1.38);
  gap: calc(var(--tw) * .18) var(--gap);
  padding: calc(var(--tw) * .11) calc(var(--tw) * .22) calc(var(--tw) * .18);
  background:
    linear-gradient(180deg, transparent calc(50% - 4px), rgba(40,18,4,.65) calc(50% - 4px), rgba(255,220,160,.25) calc(50% + 1px), transparent calc(50% + 2px)),
    linear-gradient(180deg, #d79528 0%, #b57316 47%, #c7831e 52%, #8c520b 100%);
  border-radius: 10px;
  border-left: 8px solid #d5dde5;
  border-right: 8px solid #d5dde5;
  box-shadow: inset 0 2px 0 rgba(255,240,200,.45), inset 0 -5px 0 rgba(60,30,5,.65), 0 8px 18px rgba(0,0,0,.6);
}
.slot { position: relative; border-radius: 5px; }
.slot.drop-hover { background: rgba(255,255,255,.22); }

/* ============================ Taşlar ============================== */
.tile {
  --w: var(--tw);
  width: var(--w); height: calc(var(--w) * 1.38); border-radius: calc(var(--w) * .13);
  background: linear-gradient(180deg, #ffffff 0%, #f8f3e6 68%, #e8dec5 100%);
  box-shadow: 0 calc(var(--w) * .055) 0 #bfb08a, 0 calc(var(--w) * .09) calc(var(--w) * .13) rgba(0,0,0,.45), inset 0 1px 0 #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding-top: calc(var(--w) * .09);
  font-weight: 900; font-size: calc(var(--w) * .56); line-height: 1;
  position: relative; cursor: grab; transition: transform .12s, box-shadow .12s;
  font-family: "Arial Black", "Segoe UI", Arial, sans-serif; touch-action: none; flex: 0 0 auto;
}
.staging-overlay .tile, .indicator-slot .tile, .modal .tile, .discard-pile .tile {
  width: var(--w); height: calc(var(--w) * 1.38); font-size: calc(var(--w) * .5);
}
.tile .dot {
  width: calc(var(--w) * .24); height: calc(var(--w) * .24); border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.7), rgba(0,0,0,.18));
  border: 1px solid rgba(0,0,0,.12);
  margin-top: auto; margin-bottom: calc(var(--w) * .14);
}
.tile.c0 { color: var(--c0); }
.tile.c1 { color: var(--c1); }
.tile.c2 { color: var(--c2); }
.tile.c3 { color: var(--c3); }
.tile.fake { color: #2b9348; font-size: calc(var(--w) * .56); }
.tile.joker::after {
  content: "★"; position: absolute; top: calc(var(--w) * .03); right: calc(var(--w) * .06);
  font-size: calc(var(--w) * .24); color: #d97706;
}
.tile.joker {
  box-shadow: 0 calc(var(--w) * .055) 0 #c8a03a, 0 0 0 2px rgba(245,197,66,.9), 0 calc(var(--w) * .09) calc(var(--w) * .13) rgba(0,0,0,.45);
}

/* Ters çevrilmiş taş (101 Okey Plus'ta okeyi ters çevirme) */
.tile.flipped {
  color: transparent !important;
  background: linear-gradient(180deg, #fffdf8 0%, #f3ebd6 65%, #e2d5b5 100%);
}
.tile.flipped .num { visibility: hidden; }
.tile.flipped .dot {
  margin: auto;
  width: calc(var(--w) * .32); height: calc(var(--w) * .32);
  background: radial-gradient(circle at 35% 35%, #f5efe0, #cbbd99);
  box-shadow: inset 0 2px 3px rgba(0,0,0,.28);
}
.tile.flipped::after {
  content: "↻"; position: absolute; bottom: calc(var(--w) * .05); right: calc(var(--w) * .08);
  font-size: calc(var(--w) * .22); color: rgba(120, 95, 45, 0.75);
}

/* Eldeki işlek taş göstergesi */
.rack .tile.islek::before {
  content: "İŞLEK";
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(180deg, #22c55e, #15803d);
  color: #fff; font-size: calc(var(--w) * .16); font-weight: 900;
  padding: 1px 4px; border-radius: 4px; letter-spacing: .3px;
  box-shadow: 0 1px 4px rgba(0,0,0,.5); z-index: 3;
  font-family: "Segoe UI", Arial, sans-serif;
}
.rack .tile.islek {
  box-shadow: 0 calc(var(--w) * .055) 0 #15803d, 0 0 0 2px #22c55e, 0 0 10px rgba(34,197,94,.55);
}
.rack .tile.islek-swap::before {
  content: "OKEY AL";
  background: linear-gradient(180deg, #f59e0b, #b45309);
}
.rack .tile.islek-swap {
  box-shadow: 0 calc(var(--w) * .055) 0 #b45309, 0 0 0 2px #fbbf24, 0 0 12px rgba(251,191,36,.75);
}

.rack .tile.selected {
  transform: translateY(calc(var(--w) * -.22));
  box-shadow: 0 0 0 3px #38bdf8, 0 calc(var(--w) * .12) calc(var(--w) * .2) rgba(0,0,0,.55);
}
.rack .tile.new { animation: newTile 1.5s ease-out; }
@keyframes newTile { 0% { box-shadow: 0 0 0 4px #fff, 0 0 18px #fff; } 100% { } }
.rack .tile.took { box-shadow: 0 0 0 3px #ff9800, 0 calc(var(--w) * .08) calc(var(--w) * .12) rgba(0,0,0,.4); }
.tile.dragging { opacity: .25; }
.drag-ghost { position: fixed; z-index: 1000; pointer-events: none; transform: translate(-50%, -60%) rotate(-3deg) scale(1.08); box-shadow: 0 12px 24px rgba(0,0,0,.55) !important; }
.tile.back { background: linear-gradient(135deg, #f7efda, #dccca2); color: transparent; }

/* Turn banner & feed */
.turn-banner {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%);
  background: rgba(6, 20, 32, 0.82); border: 1.5px solid rgba(245,197,66,.5);
  padding: 10px 24px; border-radius: 14px;
  font-size: 20px; font-weight: 800; color: var(--gold); pointer-events: none;
  animation: banner 1.4s ease forwards; z-index: 50;
}
@keyframes banner { 0% { opacity: 0; transform: translate(-50%, -40%); } 15% { opacity: 1; transform: translate(-50%, -50%); } 80% { opacity: 1; } 100% { opacity: 0; } }
.event-feed { position: absolute; left: calc(var(--side) + 12px); bottom: calc(var(--tw) * 3.1 + 52px); display: flex; flex-direction: column; gap: 3px; pointer-events: none; z-index: 10; max-width: 38vw; }
.event-feed .ev { font-size: 11px; background: rgba(0,0,0,.55); padding: 3px 8px; border-radius: 7px; animation: evIn .25s ease; }
.event-feed .ev b { color: var(--gold); }
@keyframes evIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; } }

/* Modal */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 200; }
.modal-card {
  background: linear-gradient(#163d57, #0c2436); border-radius: 18px; padding: 18px 20px; width: min(760px, 94vw); max-height: 92vh; overflow: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.65); border: 1px solid rgba(255,255,255,.16); --w: calc(var(--tw) * .62);
}
.modal-card h2 { margin: 0 0 8px; }
.modal-card .reasons { color: var(--gold); margin-bottom: 8px; font-weight: 600; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; align-items: center; }
table.scores { width: 100%; border-collapse: collapse; font-size: 13px; }
table.scores th, table.scores td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,.1); text-align: center; }
table.scores th { position: sticky; top: 0; background: #14364e; z-index: 2; }
table.scores th:first-child, table.scores td:first-child { text-align: left; }
table.scores tr.win td { color: #6ef0a8; font-weight: 700; }
table.scores tr.rank-1 td { background: rgba(245, 197, 66, 0.14); font-weight: 700; }
table.scores td.neg { color: #6ef0a8; }
table.scores td.pos { color: #ffb4b4; }
.scores-scroll { max-height: 44vh; overflow-y: auto; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; margin: 8px 0; }
.standings-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 8px; margin: 10px 0; }
.standing-card {
  background: rgba(0,0,0,.32); border: 1.5px solid rgba(255,255,255,.16); border-radius: 10px; padding: 8px 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.standing-card.first { border-color: var(--gold); background: rgba(245, 197, 66, 0.15); }
.standing-card .rk { font-size: 18px; font-weight: 900; color: var(--gold); }
.standing-card .nm { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.standing-card .sc { font-weight: 900; font-size: 16px; }
.result-hand { display: flex; gap: 1px; flex-wrap: wrap; margin: 2px 0 6px; }
.final-winner { font-size: 24px; font-weight: 900; color: var(--gold); text-align: center; margin: 8px 0 12px; }

/* Drawer */
.drawer { position: fixed; right: 0; top: 0; bottom: 0; width: min(340px, 90vw); background: #0d2538; z-index: 150; display: flex; flex-direction: column; padding: 10px; box-shadow: -8px 0 30px rgba(0,0,0,.5); }
.drawer .chat-log { max-height: none; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.quick-msgs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.quick-msgs button { background: rgba(255,255,255,.1); border: 0; color: #fff; border-radius: 8px; padding: 4px 8px; font-size: 12px; }

/* Toasts */
.toast-wrap { position: fixed; top: 48px; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.toast { background: rgba(12,24,36,.94); padding: 8px 15px; border-radius: 10px; font-size: 13px; box-shadow: 0 6px 18px rgba(0,0,0,.45); animation: evIn .25s ease; max-width: 90vw; text-align: center; border: 1px solid rgba(255,255,255,.14); }
.toast.err { background: rgba(170,30,30,.95); }
.toast.ok { background: rgba(25,120,70,.95); }

.rotate-hint { display: none; }
@media (orientation: portrait) and (max-width: 700px) {
  body.in-game .rotate-hint {
    display: block; position: fixed; bottom: 8px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.78); padding: 6px 12px;
    border-radius: 10px; font-size: 12px; z-index: 400; pointer-events: none; white-space: nowrap;
  }
  .event-feed { display: none; }
}
@media (max-height: 520px) {
  .avatar { width: 24px; height: 24px; font-size: 12px; }
  .player-plate { padding: 2px 6px 2px 3px; }
  .plate-name { font-size: 11px; }
  .topbar { min-height: 30px; padding: 2px 8px; }
  .icon-btn { width: 28px; height: 26px; font-size: 13px; }
  .act-tile-btn { padding: 4px 3px; font-size: 10px; }
  .event-feed { display: none; }
}