/* Koz Kimde — mağaza görselleriyle eşleşen tema. style.css'ten SONRA yüklenir. */
/* Fontlar uygulamanın içinde (client/fonts): çevrimdışı çalışır, Google'a istek gitmez. */
@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;
  --panel: #1d1510;
  --paper: #f6eedc;
  --paper-ink: #1d1915;
  --cream: #f6eedc;
  --forest: #1d4a38;
  --brown: #4a2e1c;
  --serif: 'DM Serif Display', Georgia, serif;
  --slab: 'Roboto Slab', Rockwell, Georgia, serif;
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html, body { font-family: var(--sans); background: var(--felt-3); }

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

/* Düğmeler */
.btn { font-family: var(--sans); font-weight: 700; }
.btn.primary, .modal .btn.primary, .seg button.on, .day.now {
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 55%, var(--gold-lo) 100%);
  color: var(--gold-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* Kartlar: krem yüz, slab rakam */
.card {
  background: var(--card);
  border-color: var(--card-edge);
  border-radius: calc(var(--cw) * 0.1);
  box-shadow: 0 1px 2px rgba(40, 25, 10, 0.3), 0 6px 14px rgba(20, 12, 4, 0.25);
}
.card .ix b { font-family: var(--slab); font-weight: 800; letter-spacing: -0.03em; }
.card .pip .face { font-family: var(--slab); font-weight: 800; }

/* Marka */
.brand h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 46px;
  letter-spacing: 0;
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 50%, var(--gold-lo) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
}
.brand .tag { font-family: var(--sans); }

/* Kurulum ve paneller: koyu kahve + altın çerçeve */
.setup {
  background: rgba(29, 21, 16, 0.88);
  border: 1px solid rgba(217, 178, 106, 0.35);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
.setup h2, .panel h3, .modal h2 { font-family: var(--serif); font-weight: 400; letter-spacing: 0.01em; }
.setup h2 { font-size: 22px; }
.seg { background: rgba(0, 0, 0, 0.35); }
.panel { background: var(--panel); border-color: rgba(217, 178, 106, 0.45); }
.panel h3 { font-size: 20px; }

/* Masa üst bilgisi: krem rozetler */
.icon, .chip, .sc {
  background: var(--cream);
  color: var(--forest);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.icon { color: var(--forest); }
.chip { font-weight: 600; }
.sc { color: #5a6b60; }
.sc b { color: var(--forest); }
.topbar .suit, .sc .suit { color: var(--black); }
.topbar .suit.red, .sc .suit.red { color: var(--red); }

/* Oyuncular: krem avatar, serif harf */
.seat .av {
  background: var(--cream);
  color: var(--forest);
  border: 2px solid var(--gold);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 21px;
}
.seat.team0 .av { background: var(--cream); color: var(--team0); border-color: var(--team0); }
.seat.team1 .av { background: var(--cream); color: var(--team1); border-color: var(--team1); }
.seat.turn .av { border-color: var(--gold-hi); box-shadow: 0 0 0 5px rgba(217, 178, 106, 0.32); }
.seat .st { background: var(--cream); color: var(--forest); }
.seat.bidder .st { background: var(--gold); color: var(--gold-ink); }
.me-bar .msg.mine { color: var(--gold-hi); }

/* Modallar: koyu kahve, krem yazı */
.modal {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid rgba(217, 178, 106, 0.45);
  color-scheme: dark;
}
.modal h2 { font-size: 26px; color: var(--ink); }
.modal .sub, .modal .cl, .modal label, .modal .countdown,
table.score th, .day small, .trump-announce small { color: rgba(247, 239, 221, 0.66); }
.modal .seg { background: rgba(255, 255, 255, 0.06); }
.modal .seg button { color: var(--ink-dim); }
.modal .btn { background: rgba(255, 255, 255, 0.08); color: var(--ink); }
.modal .btn.ghost { background: transparent; color: var(--ink-dim); }
.modal .btn.danger { background: rgba(168, 50, 42, 0.22); color: #f0a49c; }
.modal .suit { color: var(--ink); }
.modal .suit.red { color: #e0675c; }
table.score td { border-top-color: rgba(217, 178, 106, 0.18); }
.pos { color: #6cc28f; }
.neg { color: #e0675c; }
.day { background: rgba(255, 255, 255, 0.07); }
.day b { color: var(--ink); }
.day.now b, .day.now small { color: var(--gold-ink); }
.day.now { box-shadow: none; }
.day.done { background: rgba(108, 194, 143, 0.22); }
.modal .sweep { color: var(--gold-hi); }
.codein { border-color: rgba(217, 178, 106, 0.45); background: var(--cream); }

/* Koz seçimi ve duyuru: krem kart */
.suitbtn { background: var(--card); }
.trump-announce { background: var(--card); border-color: var(--gold); }
.trump-announce small { color: #7a6a52; }
.trump-announce span { font-family: var(--serif); font-weight: 400; }

/* Chip rozeti, kod, büyük sayılar */
.chips-pill { background: rgba(29, 21, 16, 0.75); border-color: rgba(217, 178, 106, 0.55); }
.chips-pill span { background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo)); }
.code, .big { font-family: var(--serif); font-weight: 400; color: var(--gold-hi); }
.seatlist li { background: rgba(0, 0, 0, 0.3); }
.toast { background: rgba(29, 21, 16, 0.95); border: 1px solid rgba(217, 178, 106, 0.35); }
.dummy-side { background: rgba(0, 0, 0, 0.25); }
#rotate { font-family: var(--serif); font-weight: 400; }

/* Giriş düğmeleri Apple/Google'ın kendi görünümünde kalmalı (Apple kuralı); modal düğme stilini ezmesin. */
.signbtn.apple, .modal .signbtn.apple { background: #000; color: #fff; }
.signbtn.google, .modal .signbtn.google { background: #fff; color: #1f1f1f; }

/* Modal içindeki seçili düğme: koyu yazı (".modal .seg button" kuralı ezmesin) */
.modal .seg button.on { color: var(--gold-ink); }

/* Seçilen masa rengi (dükkandan). Varsayılan yeşil yukarıdaki :root'ta. */
:root[data-felt="lacivert"] { --felt-1: #2c4a7a; --felt-2: #1d3358; --felt-3: #121f38; }
:root[data-felt="bordo"] { --felt-1: #7a2c36; --felt-2: #561e26; --felt-3: #3a1218; }
:root[data-felt="siyah"] { --felt-1: #3a3a3a; --felt-2: #232323; --felt-3: #121212; }