/* İhale · ekran düzenleri — mobil (~375px) ve geniş ekran (1440px) için.
 * Kural: yatay kaydırma yok (html/body overflow-x: clip, base.css'te),
 * grid izleri minmax(0, 1fr), butonlar tek satır. 320-414-768-1440 test edilir.
 */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) var(--gutter);
  background: color-mix(in oklab, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: var(--border-w-thin) solid var(--color-ink);
}
.topbar__brand { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; }
.topbar__brand img { height: 32px; width: auto; }
.topbar__brand span { font-weight: 700; font-size: var(--text-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__actions { display: flex; align-items: center; gap: var(--space-sm); flex-shrink: 0; }

.screen {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-lg) var(--gutter) var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-height: calc(100dvh - 60px);
}

.screen-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.screen-header__title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
}

.screen__footer {
  position: sticky;
  bottom: 0;
  z-index: 10;
  padding: var(--space-md) 0 var(--space-sm);
  margin-top: auto;
  background: linear-gradient(to top, var(--color-bg) 65%, transparent);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* ---------------------------------------------------------------- */
/* Landing                                                           */
/* ---------------------------------------------------------------- */
.landing__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: center;
  padding-block: var(--space-lg);
}
@media (max-width: 900px) {
  .landing__hero { grid-template-columns: minmax(0, 1fr); }
}
.landing__hero-copy { display: flex; flex-direction: column; gap: var(--space-md); align-items: flex-start; }
.landing__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.5rem, 5vw + 1rem, var(--text-display));
  line-height: 1.02;
}
.landing__desc { font-size: var(--text-lg); color: var(--color-muted); max-width: 52ch; }
.landing__hero-art {
  border: var(--border-w) solid var(--color-ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.landing__hero-art img { width: 100%; height: 100%; object-fit: cover; }

.landing__modes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-lg);
}
@media (max-width: 640px) {
  .landing__modes { grid-template-columns: minmax(0, 1fr); }
}
.mode-card {
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  border: none;
  font: inherit;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.mode-card:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-lg); }
.mode-card:active { transform: translate(var(--shadow-x), var(--shadow-y)); box-shadow: none; }
.mode-card__title { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); }
.mode-card__desc { color: var(--color-muted); font-size: var(--text-sm); }

/* ---------------------------------------------------------------- */
/* Setup                                                              */
/* ---------------------------------------------------------------- */
.setup-players {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--space-md);
  align-items: end;
}
@media (max-width: 460px) {
  .setup-players { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .setup-players .vs-divider { grid-column: 1 / -1; order: 2; text-align: center; }
  .setup-players .field:nth-child(1) { order: 1; }
  .setup-players .field:nth-child(3) { order: 3; }
}
.vs-divider {
  font-weight: 800;
  font-size: var(--text-md);
  color: var(--color-faint);
  padding-bottom: 16px;
}

/* ---------------------------------------------------------------- */
/* Kategori galerisi                                                  */
/* ---------------------------------------------------------------- */
.cat-themes { display: flex; flex-direction: column; gap: var(--space-2xl); }
.cat-theme__head { display: flex; align-items: center; gap: var(--space-md); }
.cat-theme__dot { width: 14px; height: 14px; border-radius: 50%; border: var(--border-w-thin) solid var(--color-ink); background: var(--theme-color); flex-shrink: 0; }
.cat-theme__title { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); }
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-lg);
}
.cat-card {
  min-height: 208px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  text-align: center;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.cat-card:hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: var(--shadow); }
.cat-card:active:not(:disabled) { transform: translate(var(--shadow-sm-x), var(--shadow-sm-y)); box-shadow: none; }
.cat-card:disabled { opacity: 0.4; cursor: not-allowed; }
.cat-card__icon { width: 64px; height: 64px; }
.cat-card__label { font-weight: 700; font-size: var(--text-sm); overflow-wrap: anywhere; }
.cat-card__count { font-size: var(--text-xs); color: var(--color-faint); font-weight: 600; }

/* Mobil sayfalama */
.cat-themes[data-paged="true"] .cat-theme { display: none; }
.cat-themes[data-paged="true"] .cat-theme.is-active { display: flex; flex-direction: column; gap: var(--space-lg); }
.cat-pager { display: flex; align-items: center; gap: var(--space-sm); justify-content: center; }
.cat-pager__nums { display: flex; gap: var(--space-xs); }

/* ---------------------------------------------------------------- */
/* Lobi (online)                                                     */
/* ---------------------------------------------------------------- */
.lobby-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
@media (min-width: 760px) {
  .lobby-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
.lobby-code {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: center;
}
.lobby-code__value {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-3xl);
  letter-spacing: 0.12em;
  padding: var(--space-md) var(--space-xl);
}
.lobby-code__actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; justify-content: center; }
.lobby-seats { display: flex; flex-direction: column; gap: var(--space-md); }
.lobby-seat { display: flex; align-items: center; gap: var(--space-md); }
.lobby-seat__dot { width: 16px; height: 16px; border-radius: 50%; border: var(--border-w-thin) solid var(--color-ink); flex-shrink: 0; }
.lobby-seat--empty { color: var(--color-faint); font-style: normal; }
.lobby-join { display: flex; flex-direction: column; gap: var(--space-md); }
.lobby-join__row { display: flex; gap: var(--space-sm); }
.lobby-join__row .input { flex: 1; text-transform: uppercase; letter-spacing: 0.1em; text-align: center; }

/* ---------------------------------------------------------------- */
/* Tahta                                                              */
/* ---------------------------------------------------------------- */
.board {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "sides" "banner" "card" "status" "actions";
  gap: var(--space-md);
  flex: 1;
}
@media (min-width: 900px) {
  .board {
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr) minmax(0, 280px);
    grid-template-areas:
      "sideA banner sideB"
      "sideA card sideB"
      "sideA status sideB"
      "sideA actions sideB";
    align-items: start;
  }
}
.board__sides { display: flex; gap: var(--space-md); grid-area: sides; }
@media (min-width: 900px) {
  .board__sides { display: contents; }
}
.board__side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.board__side--a { grid-area: sideA; }
.board__side--b { grid-area: sideB; }
.board__side.is-active { box-shadow: var(--shadow); border-color: var(--side-color, var(--color-ink)); }
.board__side-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-xs); }
.board__side-name { font-weight: 800; color: var(--side-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board__side-budget { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); }
.board__slots { display: flex; gap: 4px; flex-wrap: wrap; }
.board__slot { width: 14px; height: 14px; border-radius: 3px; border: 2px solid var(--color-ink); }
.board__slot.is-filled { background: var(--side-color); }
.board__roster { display: flex; flex-direction: column; gap: 4px; max-height: 168px; overflow-y: auto; }
.board__roster-row { display: flex; justify-content: space-between; gap: var(--space-xs); font-size: var(--text-xs); }
.board__roster-row span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board__roster-row span:last-child { flex-shrink: 0; font-weight: 700; }

.board__banner {
  grid-area: banner;
  text-align: center;
  font-weight: 800;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  border: var(--border-w-thin) solid var(--color-ink);
  background: color-mix(in oklab, var(--banner-color, var(--color-ink)) 12%, var(--color-surface));
}

.board__card {
  grid-area: card;
  position: relative;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow-y: auto;
}
.board__card-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw + 1rem, var(--text-3xl));
  overflow-wrap: anywhere;
}

.board__status {
  grid-area: status;
  text-align: center;
  color: var(--color-muted);
  font-weight: 600;
  min-height: 1.4em;
}

.board__actions { grid-area: actions; display: flex; flex-direction: column; gap: var(--space-md); }
.board__bid-row { display: flex; gap: var(--space-md); }
.board__bid-row .btn { flex: 1; }
.board__dictator-row { display: flex; gap: var(--space-md); }
.board__dictator-row .btn { flex: 1; }

/* Sıra sende değilken aksiyon alanının yerini alan durum şeridi */
.board__waiting {
  grid-area: actions;
  text-align: center;
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  border: var(--border-w-thin) dashed var(--color-ink);
  color: var(--color-muted);
  font-weight: 700;
}

/* Bağlantı bandı (online) */
.link-banner {
  position: sticky;
  top: 60px;
  z-index: 15;
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 4px var(--space-md);
  background: var(--color-amber);
  border-bottom: var(--border-w-thin) solid var(--color-ink);
}
.link-banner[hidden] { display: none; }

/* ---------------------------------------------------------------- */
/* Kadro overlay                                                      */
/* ---------------------------------------------------------------- */
.roster-overlay { display: flex; flex-direction: column; gap: var(--space-md); }
.roster-overlay__list { display: flex; flex-direction: column; gap: var(--space-sm); overflow-y: auto; max-height: 60vh; }
.roster-overlay__row { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-xs); border-bottom: 2px solid color-mix(in oklab, var(--color-ink) 12%, transparent); }
.roster-overlay__row span:first-child { overflow-wrap: anywhere; }
.roster-overlay__row span:last-child { flex-shrink: 0; font-weight: 800; }

/* ---------------------------------------------------------------- */
/* Reveal                                                             */
/* ---------------------------------------------------------------- */
.reveal { display: flex; flex-direction: column; align-items: center; gap: var(--space-xl); text-align: center; flex: 1; justify-content: center; }
.reveal__cards { display: flex; gap: var(--space-xl); }
.reveal-card {
  width: 140px;
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 800px;
}
.reveal-card__face {
  width: 100%;
  height: 100%;
  border: var(--border-w) solid var(--color-ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-3xl);
  color: var(--reveal-color, var(--color-ink));
  transform-style: preserve-3d;
  transition: transform var(--dur-slow) var(--ease-in-out);
}
.reveal-card.is-flipped .reveal-card__face { transform: rotateY(180deg); }
@media (prefers-reduced-motion: reduce) {
  .reveal-card__face { transition: opacity var(--dur-base) linear; }
  .reveal-card.is-flipped .reveal-card__face { transform: none; opacity: 0.85; }
}
.reveal__status { font-weight: 700; font-size: var(--text-lg); color: var(--color-muted); min-height: 1.4em; }
.reveal__name { font-weight: 800; }

/* ---------------------------------------------------------------- */
/* Kazanan                                                            */
/* ---------------------------------------------------------------- */
.winner { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); text-align: center; }
.winner__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.5rem, 6vw, var(--text-display)); }
.winner__sub { font-size: var(--text-lg); color: var(--color-muted); }
.winner__sides { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); width: 100%; margin-top: var(--space-lg); }
@media (min-width: 900px) {
  .winner__sides { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.winner-side { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); text-align: center; }
.winner-side__count { font-family: var(--font-display); font-weight: 900; font-size: var(--text-2xl); }

/* Eğik "SATILDI" damgası */
.stamp-sold {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-xl);
  color: var(--stamp-color, var(--color-red));
  border: var(--border-w-thin) solid currentColor;
  border-radius: var(--radius-xs);
  padding: 2px var(--space-md);
  transform: rotate(-8deg);
  pointer-events: none;
  opacity: 0;
  animation: stamp-in var(--dur-slow) var(--ease-out) forwards;
}
@keyframes stamp-in {
  from { opacity: 0; transform: rotate(-8deg) scale(1.6); }
  to { opacity: 1; transform: rotate(-8deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .stamp-sold { animation-duration: 150ms; }
}