/* Kanasta — yeşil çuha + altın tema (Koz Kimde ile aynı aile). Fontlar uygulamanın içinde. */
@import url('fonts/fonts.css');

:root {
  --felt-1: #2b6a50;
  --felt-2: #1f5541;
  --felt-3: #143a2c;
  --ink: #f7efdd;
  --ink-dim: rgba(247, 239, 221, 0.74);
  --gold: #d9b26a;
  --gold-hi: #f0d595;
  --gold-lo: #b88a3e;
  --gold-ink: #2a1d08;
  --card: #fdf8ec;
  --card-edge: #e3d8c0;
  --red: #a8322a;
  --black: #1d1915;
  --paper: #f6eedc;
  --paper-ink: #1d1915;
  --muted: #6b6352;
  --us: #3b7bd1;
  --them: #c0573c;
  --serif: 'DM Serif Display', Georgia, serif;
  --slab: 'Roboto Slab', Rockwell, Georgia, serif;
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --cw: clamp(44px, 12.6vw, 74px); /* eldeki kart genişliği */
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--felt-3);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
}

button { font: inherit; color: inherit; }

.screen {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse 85% 75% at 50% 45%, var(--felt-1) 0%, var(--felt-2) 60%, var(--felt-3) 100%);
}

/* ---------- Düğmeler ---------- */

.btn {
  border: 0;
  border-radius: 12px;
  padding: 11px 14px;
  font-weight: 700;
  font-size: 15px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.08s, background 0.15s, opacity 0.15s;
}
.btn:active { transform: scale(0.96); }
.btn:disabled { opacity: 0.35; cursor: default; transform: none; }
.btn.primary { background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 55%, var(--gold-lo) 100%); color: var(--gold-ink); }
.btn.ghost { background: transparent; color: var(--ink-dim); }
.btn.wide { width: 100%; }
.btn.small { padding: 6px 10px; font-size: 13px; }
.row { display: flex; gap: 8px; align-items: center; }
.row > .btn { flex: 1; }

.seg { display: flex; gap: 3px; padding: 3px; border-radius: 12px; background: rgba(0, 0, 0, 0.28); }
.seg button { flex: 1; border: 0; border-radius: 9px; padding: 9px 4px; background: transparent; font-weight: 700; font-size: 14px; color: var(--ink-dim); cursor: pointer; }
.seg button.on { background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 55%, var(--gold-lo) 100%); color: var(--gold-ink); }

/* ---------- Kartlar ---------- */

.card {
  position: relative;
  width: var(--cw);
  height: calc(var(--cw) * 1.4);
  border-radius: calc(var(--cw) * 0.1);
  background: var(--card);
  border: 1px solid var(--card-edge);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 3px 8px rgba(0, 0, 0, 0.2);
  color: var(--black);
  font-family: var(--slab);
  font-weight: 800;
  flex: none;
}
.card.red { color: var(--red); }
.card .ix { position: absolute; left: calc(var(--cw) * 0.06); top: calc(var(--cw) * 0.05); display: flex; flex-direction: column; align-items: center; line-height: 1; }
.card .ix b { font-size: calc(var(--cw) * 0.3); letter-spacing: -0.06em; }
.card .ix i { font-style: normal; font-size: calc(var(--cw) * 0.26); margin-top: 1px; }
.card .pip { position: absolute; right: calc(var(--cw) * 0.1); bottom: calc(var(--cw) * 0.07); font-size: calc(var(--cw) * 0.5); line-height: 1; }
.card .pip .face { font-size: calc(var(--cw) * 0.44); }
.card.joker { color: #6b3fa0; }
.card.joker .pip { font-size: calc(var(--cw) * 0.17); letter-spacing: 0.04em; right: calc(var(--cw) * 0.08); }
.card.back {
  background: repeating-linear-gradient(45deg, #7a1f2b 0 4px, #8f2a37 4px 8px);
  border: 2px solid var(--card);
}
.card.ghost { background: rgba(0, 0, 0, 0.18); border: 1px dashed rgba(255, 255, 255, 0.25); box-shadow: none; }
.card .as {
  position: absolute; left: 1px; bottom: 1px;
  font-style: normal; font-family: var(--sans); font-size: 9px; font-weight: 800; line-height: 1.3;
  background: var(--gold); color: var(--gold-ink); border-radius: 6px; padding: 0 3px; white-space: nowrap;
}
.card.mini { --cw: clamp(26px, 7.6vw, 40px); }
.card.mini .pip { display: none; }
.card.mini .ix b { font-size: calc(var(--cw) * 0.42); }
.card.mini .ix i { font-size: calc(var(--cw) * 0.36); }

/* ---------- Ana menü ---------- */

.home {
  overflow-y: auto;
  padding: calc(var(--safe-top) + 24px) 16px calc(var(--safe-bottom) + 20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.home > * { width: min(100%, 420px); }
.brand { text-align: center; }
.brand .fan { position: relative; height: calc(var(--cw) * 1.7); margin: 6px auto 0; width: calc(var(--cw) * 3.2); }
.brand .fan .card {
  position: absolute; left: 50%; bottom: 0;
  transform-origin: 50% 120%;
  transform: translateX(-50%) rotate(calc((var(--i) - 2) * 12deg));
}
.brand h1 { margin: 10px 0 0; font-family: var(--serif); font-weight: 400; font-size: 44px; color: var(--gold-hi); letter-spacing: 0.02em; }
.brand .tag { margin: 0; color: var(--ink-dim); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-size: 12px; }
.setup { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 16px; background: rgba(0, 0, 0, 0.22); }
.setup h2 { margin: 0; font-size: 17px; font-family: var(--serif); font-weight: 400; color: var(--gold-hi); }
.setup label, .modal label { font-size: 13px; font-weight: 700; color: var(--ink-dim); }
.setup .hint { margin: 0; font-size: 13px; color: var(--ink-dim); }

/* ---------- Masa ---------- */

.table {
  display: flex;
  flex-direction: column;
  padding: calc(var(--safe-top) + 6px) 8px calc(var(--safe-bottom) + 4px);
  gap: 6px;
}
.banner { background: #8f2a37; text-align: center; padding: 6px; border-radius: 8px; font-size: 13px; font-weight: 700; }
.topbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.topbar .icon { border: 0; background: rgba(0, 0, 0, 0.25); border-radius: 10px; width: 36px; height: 32px; font-size: 18px; cursor: pointer; }
.chip { background: rgba(0, 0, 0, 0.28); border-radius: 999px; padding: 5px 10px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.chip b { color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.topbar .scores { display: flex; gap: 6px; margin-left: auto; }
.chip.score.mine { outline: 1px solid var(--gold); }

.opps { display: flex; gap: 6px; justify-content: space-between; }
.opps .seat { flex: 1; }
.seat {
  display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 12px;
  background: rgba(0, 0, 0, 0.22); min-width: 0; position: relative; border: 1px solid transparent;
}
.seat.turn { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(217, 178, 106, 0.25); }
.seat.partner .av { background: var(--us); }
.seat .av {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--them); font-weight: 800; font-size: 13px;
}
.seat .who { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.seat .who b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat .who small { font-size: 11px; color: var(--ink-dim); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cicon { display: inline-block; width: 8px; height: 11px; margin-right: 3px; vertical-align: -1px; border-radius: 2px; background: repeating-linear-gradient(45deg, #7a1f2b 0 2px, #8f2a37 2px 4px); border: 1px solid var(--card); }
.seat .clock { position: absolute; right: 6px; top: -9px; background: var(--gold); color: var(--gold-ink); font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: 999px; }
.pill { display: inline-block; background: var(--gold); color: var(--gold-ink); font-size: 10px; font-weight: 800; padding: 1px 5px; border-radius: 6px; margin-left: 4px; }
.pill.lone { background: #e7d3a6; }

.center {
  display: flex; align-items: flex-end; justify-content: center; gap: 12px;
  padding: 4px 0; --cw: clamp(38px, 10.5vw, 60px);
}
.center .lbl { display: block; text-align: center; font-size: 11px; font-weight: 700; color: var(--ink-dim); margin-top: 3px; white-space: nowrap; }
.stock, .pile { cursor: default; }
.stock.can, .pile.can { cursor: pointer; }
.stock.can .card, .pile.can .fanned { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: calc(var(--cw) * 0.1); }
.pile .fanned { display: flex; }
.pile .fanned .card + .card { margin-left: calc(var(--cw) * -0.62); }
.pile .card.fresh { transform: translateY(-4px); }
.altwrap { display: flex; flex-direction: column; align-items: center; }
.angels { display: flex; gap: 6px; }
.angel { display: flex; flex-direction: column; align-items: center; }

.melds { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.side { background: rgba(0, 0, 0, 0.16); border-radius: 12px; padding: 6px 8px; }
.side.us { background: rgba(59, 123, 209, 0.14); }
.side h3 { margin: 0 0 4px; font-size: 12px; font-weight: 800; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.mlist { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.mlist .empty { margin: 0; font-size: 12px; color: var(--ink-dim); }
.meld { position: relative; padding: 4px 4px 6px; border-radius: 9px; background: rgba(0, 0, 0, 0.18); border: 1px solid transparent; }
.meld .mcards { display: flex; }
.meld .mcards .card + .card { margin-left: calc(var(--cw) * -0.5); }
.meld .mcount { position: absolute; right: -4px; top: -6px; font-size: 10px; font-weight: 800; background: rgba(0, 0, 0, 0.55); border-radius: 999px; padding: 0 5px; }
.meld.canasta.clean { border-color: var(--gold); background: rgba(217, 178, 106, 0.18); }
.meld.canasta.dirty { border-color: #b9c2c9; background: rgba(185, 194, 201, 0.14); }
.meld .badge { position: absolute; left: 4px; top: -8px; font-size: 10px; font-weight: 800; background: var(--gold); color: var(--gold-ink); border-radius: 6px; padding: 0 4px; z-index: 30; }
.meld.canasta.dirty .badge { background: #b9c2c9; }
.meld.target { border-color: var(--gold-hi); box-shadow: 0 0 0 2px rgba(240, 213, 149, 0.5); cursor: pointer; }
.meld.ghost { border: 1px dashed var(--gold); background: rgba(217, 178, 106, 0.12); cursor: pointer; }
.staged { display: contents; }

.bottom { display: flex; flex-direction: column; gap: 6px; }
.me-row { display: flex; align-items: center; gap: 6px; }
.me-row .seat { flex: 1; }
.status { text-align: center; font-size: 13px; font-weight: 700; color: var(--ink-dim); min-height: 18px; }
.status.mine { color: var(--gold-hi); }
.acts { display: flex; gap: 6px; }
.acts .btn { flex: 1; padding: 10px 6px; font-size: 14px; }
.hand { position: relative; width: 100%; }
.hand .card { position: absolute; transition: transform 0.12s, left 0.18s; cursor: pointer; }
/* Takımın serisine eklenebilen kart: köşede altın "+" */
.hand .card .fit {
  position: absolute; left: 3px; bottom: 3px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--gold); color: var(--gold-ink); font: 800 13px/16px var(--sans); text-align: center; font-style: normal;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
/* Rakibin serisine uyan kart: kırmızı "!" (atarsan rakibe yarar) */
.hand .card .feed {
  position: absolute; left: 3px; bottom: 3px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--red); color: #fff; font: 800 12px/17px var(--sans); text-align: center; font-style: normal;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.hand .card .feed.up { bottom: 23px; }
.hand .card.feeds { box-shadow: 0 0 0 2px var(--red), 0 3px 8px rgba(0, 0, 0, 0.25); }
.hand .card.fits { box-shadow: 0 0 0 2px var(--gold), 0 3px 8px rgba(0, 0, 0, 0.25); }
.hand .card.sel { transform: translateY(-6px); box-shadow: 0 0 0 3px var(--gold-hi), 0 6px 14px rgba(0, 0, 0, 0.35); }

/* ---------- Modal ---------- */

.modal-bg { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); display: grid; place-items: center; z-index: 100; padding: 16px; }
.modal {
  width: min(100%, 420px); max-height: 88vh; overflow-y: auto; background: var(--paper); color: var(--paper-ink);
  border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}
.modal h2 { margin: 0; font-size: 22px; text-align: center; font-family: var(--serif); font-weight: 400; }
.modal h3 { margin: 6px 0 0; font-size: 15px; }
.modal p { margin: 0; line-height: 1.45; font-size: 14px; }
.modal .sub { text-align: center; color: var(--muted); }
.modal label { color: var(--muted); }
.modal .seg { background: #ebe4d2; }
.modal .seg button { color: var(--muted); }
.modal .btn { background: #ebe4d2; color: var(--paper-ink); }
.modal .btn.primary { background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 55%, var(--gold-lo) 100%); color: var(--gold-ink); }
.modal .actions { display: flex; gap: 8px; margin-top: 4px; }
.modal .actions .btn { flex: 1; }
.modal .actions.col { flex-direction: column; }
.modal .btn.danger { background: #a8322a; color: #fff; }
.modal .acct { color: var(--muted); }
.modal .menu { display: flex; flex-direction: column; gap: 8px; }
.modal .confirm { text-align: center; font-size: 16px; padding: 8px 0; }
.modal .name { flex: 1; }
.modal .code { text-align: center; font-family: var(--slab); font-size: 34px; letter-spacing: 0.2em; margin: 0; }
.modal .countdown { text-align: center; color: var(--muted); }
.modal .totals { text-align: center; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.modal .totals .chip { background: #ebe4d2; color: var(--paper-ink); }
.modal .totals .chip b { color: var(--gold-ink); }
.lobby-seats { margin: 0; padding-left: 22px; line-height: 1.8; }
.code-input { font: 700 28px var(--slab); letter-spacing: 0.25em; text-align: center; padding: 10px; border-radius: 12px; border: 1px solid #d8cfb8; background: #fff; color: var(--paper-ink); }
.score-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.score-table th, .score-table td { padding: 6px 4px; border-bottom: 1px solid #e4dccb; text-align: right; }
.score-table th:first-child { text-align: left; color: var(--muted); font-weight: 700; }
.score-table thead th { color: var(--paper-ink); text-align: right; }
.layouts { display: flex; flex-direction: column; gap: 8px; }
.layout { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 1px solid #d8cfb8; background: #fff; border-radius: 12px; padding: 10px; cursor: pointer; }
.layout .mcards { display: flex; }
.layout .mcards .card + .card { margin-left: calc(var(--cw) * -0.35); }
.layout small { color: var(--muted); font-weight: 700; }

.toast {
  position: fixed; left: 50%; top: 46%; transform: translateX(-50%);
  background: rgba(20, 16, 10, 0.92); color: var(--ink); padding: 9px 14px; border-radius: 12px;
  font-weight: 700; font-size: 14px; z-index: 90; max-width: 90vw; text-align: center; pointer-events: none;
  animation: toast-in 0.2s ease-out;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -6px); } }