/* ==========================================================================
   v2 — Πεσσοί (antik tahta oyunları): bölüm girişi + pente grammai tahtası
   Renkler base.css / page.css değişkenlerinden; tahta ve taşlar Cengiz'in SVG'leri.
   ========================================================================== */

.v2 .ps-body { --ps-pad: clamp(20px, 4vw, 64px); padding: 0 var(--ps-pad) 64px; max-width: 1280px; }
.v2 .ps-head .pg-title small { font-size: .42em; color: var(--fg-3); letter-spacing: .04em; margin-left: .4em; }
.v2 .ps-h2 {
  margin: 48px 0 18px; font-weight: 400; font-size: clamp(20px, 1.6vw, 26px); color: var(--fg);
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.v2 .ps-note { color: var(--fg-3); font-size: 14px; line-height: 1.6; max-width: 70ch; }

/* ── giriş: kapak + metin ── */
.v2 .ps-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: end; margin-top: 24px; }
.v2 .ps-hero.is-empty { grid-template-columns: minmax(0, 70ch); }
.v2 .ps-cover { margin: 0; }
.v2 .ps-cover img { display: block; width: 100%; height: auto; }
.v2 .ps-cover figcaption { margin-top: 8px; font-size: 12px; color: var(--fg-3); letter-spacing: .04em; }
.v2 .ps-intro p { margin: 0 0 1em; font-size: clamp(16px, 1.1vw, 19px); line-height: 1.65; color: var(--fg-2); }

/* ── oyun listesi ── */
.v2 .ps-game-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 18px; }
.v2 .ps-game {
  display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; align-items: start;
  padding: 16px; border: 1px solid var(--lx-card-line); background: var(--lx-card);
  color: inherit; text-decoration: none; transition: background .2s, border-color .2s;
}
.v2 a.ps-game:hover { background: var(--lx-hover); border-color: var(--line-2); }
.v2 .ps-game-img { width: 132px; aspect-ratio: 1; display: grid; place-items: center; background: rgba(var(--tint), .04); overflow: hidden; }
.v2 .ps-game-img img { width: 100%; height: 100%; object-fit: cover; }
.v2 .ps-game-img i { font-style: normal; font-size: 54px; color: var(--fg-3); }
.v2 .ps-game-txt { display: flex; flex-direction: column; gap: 6px; }
.v2 .ps-game-txt b { font-weight: 400; font-size: 24px; color: var(--fg); }
.v2 .ps-game-txt small { font-size: 12px; color: var(--fg-3); letter-spacing: .04em; }
.v2 .ps-game-txt span { font-size: 15px; line-height: 1.55; color: var(--fg-2); }
.v2 .ps-game-txt em { font-style: normal; font-size: 13px; color: var(--lx-accent); margin-top: 4px; }
.v2 .ps-game.is-soon { opacity: .55; }
.v2 .ps-game.is-soon em { color: var(--fg-3); }

.v2 .ps-sources ul { margin: 0; padding-left: 1.1em; color: var(--fg-2); line-height: 1.8; font-size: 14px; }

/* ── oyun: tahta + yan panel ── */
.v2 .pt-game {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: clamp(20px, 3vw, 44px); align-items: center; margin-top: 18px;
}
.v2 .pt-board { display: flex; justify-content: center; }
.v2 .pt-svg {
  width: 100%; max-width: calc((100vh - 60px) * 1200 / 1540); height: auto; display: block;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.v2 .pt-tray { fill: rgba(var(--tint), .05); stroke: rgba(var(--tint), .12); stroke-width: 2; }

.v2 .pt-piece { transition: transform .38s cubic-bezier(.3, .7, .3, 1); cursor: default; }
.v2 .pt-piece image { filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .45)); }
.v2 .pt-ring { fill: none; stroke-width: 3; }
.v2 .pt-piece--0 .pt-ring { stroke: rgba(239, 230, 210, .7); stroke-width: 3.5; }
.v2 .pt-piece--1 .pt-ring { stroke: rgba(0, 0, 0, .28); }
.v2 .pt-halo { fill: none; stroke: none; stroke-width: 7; }
.v2 .pt-piece.is-movable { cursor: grab; }
.v2 .pt-piece.is-movable .pt-halo { stroke: #f4e6c4; animation: pt-pulse 1.4s ease-in-out infinite; }
.v2 .pt-piece.is-drag { transition: none; cursor: grabbing; }
.v2 .pt-piece.is-drag image { filter: drop-shadow(0 14px 12px rgba(0, 0, 0, .5)); }
.v2 .pt-piece.is-hit .pt-halo { stroke: #e0583a; animation: none; }
@keyframes pt-pulse { 50% { stroke-opacity: .25; } }

.v2 .pt-target { fill: rgba(244, 230, 196, .22); stroke: #f4e6c4; stroke-width: 4; stroke-dasharray: 10 8; pointer-events: none; }
.v2 .pt-target.is-hit { fill: rgba(224, 88, 58, .25); stroke: #e0583a; }

.v2 .pt-panel { display: flex; flex-direction: column; gap: 16px; }
.v2 .pt-card {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 12px; border: 1px solid var(--lx-card-line); background: var(--lx-card); position: relative;
  transition: border-color .25s, background .25s;
}
.v2 .pt-card.is-turn { border-color: var(--lx-accent); background: var(--lx-hover); }
.v2 .pt-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: block; background: rgba(var(--tint), .06); }
.v2 .pt-avatar--blank { display: grid; place-items: center; font-size: 22px; color: var(--fg-3); }
.v2 .pt-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v2 .pt-who b { font-weight: 400; font-size: 19px; color: var(--fg); }
.v2 .pt-who span { font-size: 15px; color: var(--fg-2); }
.v2 .pt-who small { font-size: 12px; color: var(--fg-3); }
.v2 .pt-machine { letter-spacing: .03em; }
.v2 .pt-machine i { font-style: normal; }
.v2 .pt-score { font-size: 13px; color: var(--fg-2); white-space: nowrap; }
.v2 .pt-piece-mark { position: absolute; left: 56px; top: 56px; width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 2px var(--bg); }
.v2 .pt-piece-mark--0 { background: #000; }
.v2 .pt-piece-mark--1 { background: #555; }

.v2 .pt-table { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px 0; text-align: center; }
.v2 .pt-dice { display: flex; gap: 14px; min-height: 64px; }
.v2 .pt-die {
  width: 64px; height: 64px; border-radius: 13px; background: #efe6d2;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12), 0 4px 10px rgba(0, 0, 0, .3); display: grid; place-items: center;
}
.v2 .pt-die img { width: 100%; height: 100%; display: block; }
.v2 .pt-die--1 { background: #ddd3bd; }
.v2 .pt-die.is-rolling { transform: rotate(-8deg) scale(.96); }
.v2 .pt-msg { margin: 0; min-height: 3.2em; font-size: 15px; line-height: 1.55; color: var(--fg-2); }
.v2 .pt-btn {
  font: inherit; font-size: 15px; letter-spacing: .04em; padding: 11px 26px; cursor: pointer;
  background: var(--fg); color: var(--on-fg); border: 0; transition: opacity .2s;
}
.v2 .pt-btn:disabled { opacity: .35; cursor: default; }
.v2 .pt-btn[hidden] { display: none; }
.v2 .pt-tools { display: flex; justify-content: space-between; gap: 12px; }
.v2 .pt-link { font: inherit; font-size: 13px; color: var(--fg-3); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
.v2 .pt-link:hover { color: var(--fg); }

/* ── kurallar ── */
.v2 .ps-rules-list { margin: 0; padding-left: 1.3em; max-width: 72ch; }
.v2 .ps-rules-list li { margin: 0 0 .7em; font-size: 16px; line-height: 1.65; color: var(--fg-2); }
.v2 .ps-rules-list b { color: var(--fg); font-weight: 600; }

/* ── telefon ── */
@media (max-width: 900px) {
  .v2 .ps-hero { grid-template-columns: 1fr; }
  .v2 .pt-game { grid-template-columns: 1fr; }
  .v2 .pt-svg { max-width: 560px; }
  .v2 .pt-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .v2 .pt-table { grid-column: 1 / -1; order: -1; padding: 0; }
  .v2 .pt-tools { grid-column: 1 / -1; }
  .v2 .pt-card { grid-template-columns: 44px minmax(0, 1fr); padding: 8px; }
  .v2 .pt-avatar { width: 44px; height: 44px; }
  .v2 .pt-piece-mark { left: 40px; top: 40px; width: 14px; height: 14px; }
  .v2 .pt-score { grid-column: 2; }
  .v2 .pt-who b { font-size: 16px; }
}
@media (max-width: 520px) {
  .v2 .ps-game { grid-template-columns: 88px minmax(0, 1fr); }
  .v2 .ps-game-img { width: 88px; }
}

/* ── oyun sonu: sonuç cümlesi büyük ve vurgulu (hamle cümleleriyle aynı metin) ── */
.v2 .pt-game.is-over .pt-msg {
  min-height: 0; padding: 16px 18px; font-size: clamp(19px, 1.5vw, 24px); line-height: 1.4; color: var(--fg);
  border: 1px solid var(--lx-accent); background: color-mix(in srgb, var(--lx-accent) 12%, transparent);
  animation: pt-final .6s cubic-bezier(.3, .7, .3, 1);
}
.v2 .pt-game.is-over .pt-dice { opacity: .45; }
.v2 .pt-card.is-winner { border-color: var(--lx-accent); box-shadow: 0 0 0 1px var(--lx-accent); }
.v2 .pt-card.is-winner .pt-score { color: var(--lx-accent); font-weight: 700; }
@keyframes pt-final { from { opacity: 0; transform: translateY(6px) scale(.98); } }

.v2 .pt-turn { display: block; margin-top: 4px; font-size: 13px; letter-spacing: .04em; color: var(--lx-accent); }
.v2 .pt-card.is-empty { opacity: .55; border-style: dashed; }
.v2 .pt-btn--ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-2); }
.v2 a.pt-btn { display: inline-block; text-decoration: none; }

/* davet kutusu */
.v2 .pt-invite { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; width: 100%; }
.v2 .pt-invite input {
  font: inherit; font-size: 13px; padding: 9px 10px; width: 100%; box-sizing: border-box;
  background: var(--field); color: var(--fg); border: 1px solid var(--line-2);
}
.v2 .pt-invite small { font-size: 12px; color: var(--fg-3); }
.v2 .pt-invite b { color: var(--fg); letter-spacing: .12em; font-size: 14px; }

/* bir rakiple oyna */
.v2 .ps-lobby-row { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
.v2 .ps-code { display: flex; gap: 8px; }
.v2 .ps-code input {
  font: inherit; font-size: 15px; width: 9em; padding: 10px 12px; text-transform: uppercase; letter-spacing: .1em;
  background: var(--field); color: var(--fg); border: 1px solid var(--line-2);
}
.v2 .ps-err { color: #e0583a; }
.v2 .ps-note a { color: var(--lx-accent); }
.v2 .ps-mygames { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.v2 .ps-mygames a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 12px;
  border: 1px solid var(--lx-card-line); background: var(--lx-card); color: inherit; text-decoration: none;
}
.v2 .ps-mygames a:hover { background: var(--lx-hover); }
.v2 .ps-mygames b { font-weight: 400; color: var(--fg); }
.v2 .ps-mygames small { font-size: 12px; color: var(--fg-3); letter-spacing: .1em; }
.v2 .ps-mygames em { grid-column: 1 / -1; font-style: normal; font-size: 12px; color: var(--fg-3); }
.v2 .ps-mygames .is-mine a { border-color: var(--lx-accent); }
.v2 .ps-mygames .is-mine em { color: var(--lx-accent); }
.v2 .pt-avatar[hidden], .v2 .pt-invite[hidden] { display: none; }