/* Reversi'ye ozgu stiller. Genel gorunum (ana menu, ayarlar, kariyer merkezi, basarilar...) poker ile
   ayni css/styles.css dosyasindan gelir (poker'in styles.css'i, tum oyunlarda ayni arayuz icin). Bu
   dosya yalniz poker'de karsiligi olmayanlari icerir: tahta, taslar, mac ekrani, tas renkleri. */

:root {
  --me: #111111; --me-hi: #4d4d4d; --me-lo: #0c0c0c;
  --opp: #f4f4f4; --opp-hi: #ffffff; --opp-lo: #ced0ce;
  --board: #1c7a4f;
  --board-line: #0f4d31;
}

/* ---------- Katmanlar (poker'de css/table.css'ten): her ekranin ustunde tam ekran ---------- */
.overlay[hidden] { display: none; }
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 12, 8, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.overlay-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 20px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  max-height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.overlay-card h3 { margin: 0 0 10px; color: var(--gold); }
.overlay-card .btn { margin-top: 12px; flex-shrink: 0; }
.overlay-card input[type="text"], .overlay-card input[type="password"], .overlay-card input[type="file"], .overlay-card textarea { width: 100%; }
.overlay-card .field { text-align: start; }

/* Reklam ekrani her seyin ustunde. */
#breakOverlay { position: fixed; z-index: 1500; }
.match-actions { display: flex; gap: 8px; }
.match-actions .btn { flex: 1; }
#breakSkipBtn { margin-top: 8px; }
.break-card { position: relative; width: min(94vw, 1100px); max-width: none; height: min(88vh, 900px); }
.break-card .break-slot { flex: 1; min-height: 0; }
.break-x {
  position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; width: 44px; height: 44px;
  border-radius: 50%; border: 2px solid #fff; background: #d32f2f; color: #fff; font-size: 20px; font-weight: 700;
  line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); z-index: 1;
}
.break-slot {
  display: flex; align-items: center; justify-content: center; min-height: 220px;
  border: 2px dashed var(--gold-dim); border-radius: 10px; background: rgba(232, 185, 35, .08);
  color: var(--text); font-size: 16px; font-weight: 600;
}

/* ---------- Mac ekrani ---------- */
.match-inner { max-width: 560px; margin: 0 auto; }
.scoreboard { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 10px; }
.side {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 2px solid var(--card-border);
  border-radius: var(--radius); background: var(--card);
}
.side.turn { border-color: var(--gold); }
.side b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side i { font-style: normal; font-size: 1.3rem; font-weight: 800; color: var(--gold); }
.chip { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .5); flex: none; }
.chip.me { background: var(--me); }
.chip.opp { background: var(--opp); }

.board {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; background: var(--board-line); padding: 2px;
  border-radius: 10px; width: 100%; aspect-ratio: 1; touch-action: manipulation;
}
.cell { position: relative; padding: 0; border: 0; background: var(--board); border-radius: 3px; cursor: default; display: grid; place-items: center; }
.cell.legal { cursor: pointer; }
.cell.legal::after { content: ""; width: 30%; height: 30%; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.cell.last { box-shadow: inset 0 0 0 2px var(--gold); }
.disc { width: 84%; height: 84%; border-radius: 50%; transform: scale(0); transition: transform .18s ease, background .25s ease; box-shadow: 0 2px 3px rgba(0, 0, 0, .4); }
/* Taslar role gore boyanir (benim / rakip); renkler js/discs.js tarafindan --me / --opp olarak ayarlanir. */
.cell[data-r="me"] .disc { background: radial-gradient(circle at 35% 30%, var(--me-hi), var(--me-lo)); transform: scale(1); }
.cell[data-r="opp"] .disc { background: radial-gradient(circle at 35% 30%, var(--opp-hi), var(--opp-lo)); transform: scale(1); }
.status { text-align: center; min-height: 1.5em; color: var(--text-dim); margin: 10px 0 4px; }
.rank-note { text-align: center; font-size: .8rem; margin: 0 0 8px; }
.rank-note.on { color: #5ee08a; }
.rank-note.off { color: var(--text-dim); }
.dialog-note { color: var(--text-dim); font-size: .9rem; }

/* ---------- Ogretici ---------- */
.tut-board { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; width: 200px; aspect-ratio: 1; margin: 0 auto 10px; background: var(--board-line); padding: 2px; border-radius: 6px; }
.tut-cell { position: relative; background: var(--board); border-radius: 2px; }
.tut-cell.b::after, .tut-cell.w::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; }
.tut-cell.b::after { background: #111; }
.tut-cell.w::after { background: #f4f4f4; }
.tut-cell.dot::after { content: ""; position: absolute; inset: 35%; border-radius: 50%; background: rgba(255, 255, 255, .6); }
.tut-cell.corner { box-shadow: inset 0 0 0 2px var(--gold); }
.tut-icon { font-size: 4rem; margin-bottom: 10px; }
.tut-row { display: flex; gap: 8px; }
.tut-row .btn { flex: 1; }

/* ---------- Tas renkleri ayari ---------- */
.palette-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.palette { display: flex; align-items: center; gap: 8px; background: var(--bg-1); color: var(--text); border: 2px solid var(--card-border); border-radius: 12px; padding: 8px 10px; cursor: pointer; font: inherit; font-size: 13px; }
.palette.is-selected { border-color: var(--gold); background: rgba(232, 185, 35, .12); }
.swatch { display: inline-flex; }
.swatch i { width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .4); }
.swatch i + i { margin-inline-start: -6px; }
.disc-preview { display: flex; align-items: center; gap: 12px; padding: 8px 0; flex-wrap: wrap; }
.disc-preview .pv { width: 38px; height: 38px; border-radius: 50%; box-shadow: 0 2px 3px rgba(0, 0, 0, .4); }
.disc-preview .pv.me { background: radial-gradient(circle at 35% 30%, var(--me-hi), var(--me-lo)); }
.disc-preview .pv.opp { background: radial-gradient(circle at 35% 30%, var(--opp-hi), var(--opp-lo)); }
.color-row { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.color-row input[type="color"] { width: 46px; height: 34px; padding: 0; border: 0; background: none; }

/* ---------- Yasal metin okuyucu (js/legal.js) ---------- */
.legal-body { overflow-y: auto; max-height: 60vh; text-align: start; line-height: 1.5; font-size: .92rem; }
.legal-body h4 { color: var(--gold); margin: 14px 0 4px; }
.legal-meta { color: var(--text-dim); font-size: .8rem; }

.home-tools { display: flex; align-items: center; gap: 10px; }

/* Mac sonucu penceresi */
.overlay-card .win { color: #5ee08a; font-size: 1.2rem; }
.overlay-card .loss { color: var(--danger); }
.overlay-card .badge { font-weight: 700; color: var(--gold); }
.overlay-card .series { color: var(--gold); }
.overlay-card .confirm-message { margin: 0 0 8px; line-height: 1.4; }
.home-flag { width: 24px; height: 17px; object-fit: cover; border-radius: 3px; margin-inline-end: 6px; vertical-align: middle; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.stats-total td { font-weight: 700; color: var(--gold); }

/* Web: the portal's lantern button sits in the top-left corner; the match screen leaves room for it (js/portal-back.js). */
.has-portal-back .match-inner {
  padding-top: 44px;
}