/* Grup A oyunları: Türk Daması, Mangala, Noktalar ve Kutular, Reversi, Amiral Battı.
   Tüm sınıflar oyun tipiyle öneklidir. Oyuncu renkleri: 1 = mavi, 2 = pembe (app.css .dot.p1/.p2 ile aynı). */

/* ---------- ortak görünüm (her oyunun kendi sınıfıyla) ---------- */
.dama-hile, .mangala-hile, .kutular-hile, .reversi-hile, .amiral-hile {
  width: min(100%, 400px); margin: 0 auto 12px; padding: 10px 14px; border-radius: 16px;
  background: linear-gradient(135deg, #2e1065, #6d28d9); color: #f5f3ff; font-size: .88rem; line-height: 1.4;
  box-shadow: 0 6px 18px rgba(109, 40, 217, .3);
}
.dama-hile > b, .mangala-hile > b, .kutular-hile > b, .reversi-hile > b, .amiral-hile > b { display: block; margin-bottom: 2px; color: #fde68a; }
.dama-hile small, .mangala-hile small, .reversi-hile small { opacity: .8; }
.dama-alt, .mangala-alt, .kutular-alt, .reversi-alt {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; width: min(100%, 400px);
  margin-top: 10px; font-weight: 700; font-size: .85rem; color: var(--muted);
}
.mangala-alt { justify-content: center; text-align: center; }

/* ---------- Türk Daması ---------- */
.dama-tahta {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr)); width: min(100%, 400px); aspect-ratio: 1;
  border-radius: 16px; overflow: hidden; border: 6px solid #c084fc; box-shadow: var(--shadow); background: #fff;
}
.dama-kare { border: 0; padding: 0; min-width: 0; min-height: 0; display: grid; place-items: center; position: relative; }
.dama-kare:disabled { opacity: 1; color: inherit; cursor: default; }
.dama-acik { background: #fff0f7; }
.dama-koyu { background: #f9c6dd; }
.dama-son { box-shadow: inset 0 0 0 3px rgba(225, 48, 108, .45); }
.dama-alindi::after { content: '✖'; color: rgba(225, 48, 108, .55); font-weight: 800; font-size: 1rem; position: absolute; }
.dama-oynar .dama-tas { box-shadow: 0 0 0 3px #fde68a, 0 2px 4px rgba(0, 0, 0, .25); }
.dama-secili { background: #fde68a !important; }
.dama-hedef::before {
  content: ''; position: absolute; width: 34%; height: 34%; border-radius: 50%;
  background: var(--pink-d); opacity: .55; animation: dama-nabiz 1s infinite alternate;
}
.dama-ipucu { background: #c4b5fd !important; }
@keyframes dama-nabiz { to { transform: scale(1.35); opacity: .85; } }
.dama-tas {
  display: block; width: 78%; height: 78%; border-radius: 50%; position: relative; z-index: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .25), inset 0 -3px 0 rgba(0, 0, 0, .15);
}
.dama-p1 { background: radial-gradient(circle at 35% 35%, #93c5fd, #2563eb); }
.dama-p2 { background: radial-gradient(circle at 35% 35%, #ffb3d1, #e1306c); }
.dama-kral::after { content: '👑'; position: absolute; inset: 0; display: grid; place-items: center; font-size: .95rem; }
.dama-mini { display: inline-block; width: 16px; height: 16px; vertical-align: middle; }

/* ---------- Mangala ---------- */
.mangala-tahta {
  display: grid; grid-template-columns: 1.1fr repeat(6, 1fr) 1.1fr; grid-template-rows: auto auto; gap: 5px;
  width: min(100%, 420px); padding: 8px; border-radius: 22px;
  background: linear-gradient(135deg, #c084fc, #f472b6); box-shadow: var(--shadow);
}
.mangala-hazine {
  grid-row: 1 / span 2; border-radius: 18px; background: #fff7fb; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; padding: 6px 2px; min-height: 130px; text-align: center;
}
.mangala-ohaz { grid-column: 1; }
.mangala-bhaz { grid-column: 8; background: #ffe4f0; }
.mangala-hazine b { font-size: 1.35rem; color: var(--pink-d); }
.mangala-hazine small { font-size: .9rem; font-weight: 800; color: var(--muted); line-height: 1.1; word-break: break-word; }
.mangala-kuyu {
  border: 0; border-radius: 999px; background: #fff7fb; min-height: 64px; min-width: 0; padding: 4px 1px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; position: relative;
}
.mangala-kuyu b { font-size: 1rem; color: var(--text); }
.mangala-kuyu:disabled { opacity: 1; color: inherit; cursor: default; }
.mangala-rakip { background: #fdf2f8; }
.mangala-benim:not(:disabled) { background: #fff; box-shadow: 0 0 0 3px #fde68a; }
.mangala-benim:not(:disabled):active { transform: scale(.94); }
.mangala-son { box-shadow: 0 0 0 3px var(--pink-d) !important; }
.mangala-ipucu { background: #c4b5fd !important; box-shadow: 0 0 0 3px #6d28d9 !important; }
.mangala-not { font-style: normal; font-size: .62rem; font-weight: 800; color: #6d28d9; line-height: 1; }
.mangala-taslar { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-width: 30px; min-height: 8px; }
.mangala-taslar i { width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fef3c7, #d97706); }
.mangala-olay { font-size: .82rem; font-weight: 700; margin-top: 4px; opacity: .9; }

/* ---------- Noktalar ve Kutular ---------- */
.kutular-tahta {
  display: grid; width: min(100%, 360px); aspect-ratio: 1; padding: 14px; border-radius: 20px; background: #fff; box-shadow: var(--shadow);
  grid-template-columns: repeat(5, 10px 1fr) 10px; grid-template-rows: repeat(5, 10px 1fr) 10px;
}
.kutular-nokta { display: block; width: 10px; height: 10px; border-radius: 50%; background: #c084fc; z-index: 3; }
.kutular-kutu { display: grid; place-items: center; font-size: 1.4rem; border-radius: 6px; margin: 2px; transition: background .2s; }
.kutular-kutu.kutular-p1 { background: #dbeafe; }
.kutular-kutu.kutular-p2 { background: #ffe4f0; }
.kutular-cizgi {
  border: 0; padding: 0; margin: 0; background: transparent; position: relative; z-index: 2; min-width: 0; min-height: 0;
}
.kutular-cizgi::before { content: ''; position: absolute; border-radius: 4px; background: #f3e8ff; transition: background .15s; }
.kutular-h::before { left: 2px; right: 2px; top: 2px; bottom: 2px; }
.kutular-v::before { top: 2px; bottom: 2px; left: 2px; right: 2px; }
/* Dokunma alanını büyüt (en az ~36px) */
.kutular-cizgi::after { content: ''; position: absolute; }
.kutular-h::after { left: 0; right: 0; top: -14px; bottom: -14px; }
.kutular-v::after { top: 0; bottom: 0; left: -14px; right: -14px; }
.kutular-cizgi:disabled { cursor: default; opacity: 1; }
.kutular-cizgi:not(:disabled):hover::before { background: #e9d5ff; }
.kutular-cizgi.kutular-p1::before { background: #2563eb; }
.kutular-cizgi.kutular-p2::before { background: #e1306c; }
.kutular-son::before { box-shadow: 0 0 0 3px #fde68a; }
.kutular-kapat::before { background: #4ade80; animation: kutular-yanip 0.8s infinite alternate; }
.kutular-guvenli::before { background: repeating-linear-gradient(90deg, #a78bfa 0 5px, transparent 5px 9px); }
.kutular-v.kutular-guvenli::before { background: repeating-linear-gradient(0deg, #a78bfa 0 5px, transparent 5px 9px); }
@keyframes kutular-yanip { to { background: #16a34a; } }
.kutular-renk { display: inline-block; width: 22px; height: 6px; border-radius: 3px; vertical-align: middle; }
.kutular-renk.kutular-p1 { background: #2563eb; }
.kutular-renk.kutular-p2 { background: #e1306c; }

/* ---------- Reversi ---------- */
.reversi-tahta {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr)); gap: 3px; width: min(100%, 400px); aspect-ratio: 1;
  padding: 6px; border-radius: 18px; background: #8b5cf6; box-shadow: var(--shadow);
}
.reversi-kare {
  border: 0; padding: 0; min-width: 0; min-height: 0; border-radius: 8px; background: #ede9fe;
  display: grid; place-items: center; position: relative;
}
.reversi-kare:disabled { opacity: 1; cursor: default; }
.reversi-yasal::before { content: ''; width: 26%; height: 26%; border-radius: 50%; background: rgba(139, 92, 246, .45); position: absolute; }
.reversi-son { box-shadow: inset 0 0 0 3px #fde68a; }
.reversi-ipucu { background: #fde68a; animation: reversi-parla .9s infinite alternate; }
@keyframes reversi-parla { to { background: #facc15; } }
.reversi-tas { display: block; width: 82%; height: 82%; border-radius: 50%; box-shadow: 0 2px 3px rgba(0, 0, 0, .25); }
.reversi-p1 { background: radial-gradient(circle at 35% 35%, #93c5fd, #2563eb); }
.reversi-p2 { background: radial-gradient(circle at 35% 35%, #ffb3d1, #e1306c); }
.reversi-cevrildi .reversi-tas { animation: reversi-don .45s; }
@keyframes reversi-don { from { transform: rotateY(180deg); } }
.reversi-not {
  position: absolute; font-style: normal; font-weight: 800; font-size: .8rem; color: #4c1d95; z-index: 1;
}
.reversi-mini { display: inline-block; width: 16px; height: 16px; vertical-align: middle; }

/* ---------- Amiral Battı ---------- */
.amiral-baslik { width: min(100%, 400px); font-weight: 800; margin: 2px 0 6px; display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.amiral-baslik small { color: var(--muted); font-weight: 700; font-size: .78rem; }
.amiral-tahta {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr)); gap: 3px; width: min(100%, 400px); aspect-ratio: 1;
  padding: 6px; border-radius: 18px; background: linear-gradient(135deg, #60a5fa, #a78bfa); box-shadow: var(--shadow);
}
.amiral-hucre {
  line-height: 1; overflow: hidden; border: 0; padding: 0; min-width: 0; min-height: 0; border-radius: 8px; background: #e0f2fe;
  display: grid; place-items: center; font-size: 1.1rem; color: #64748b;
}
.amiral-hucre:not(:disabled):active { transform: scale(.9); background: #fde68a; }
.amiral-hucre:disabled { opacity: 1; cursor: default; }
.amiral-iska { background: #bfdbfe; font-size: 1.4rem; }
.amiral-vurus { background: #fecdd3; }
.amiral-batik { background: #fda4af; font-size: .95rem; }
.amiral-hayalet { background: repeating-linear-gradient(45deg, #e0f2fe 0 4px, #c4b5fd 4px 8px); }
.amiral-son { box-shadow: inset 0 0 0 3px #fde68a; }
.amiral-kalan { width: min(100%, 400px); margin: 8px 0 14px; font-size: .85rem; font-weight: 700; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.amiral-gemiboy { color: var(--pink-d); letter-spacing: -1px; }
.amiral-benim {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr)); gap: 2px; width: min(70%, 240px); aspect-ratio: 1;
  padding: 4px; border-radius: 12px; background: #bfdbfe;
}
.amiral-mini { line-height: 1; overflow: hidden; border-radius: 4px; background: #e0f2fe; display: grid; place-items: center; font-size: .7rem; color: #64748b; }
.amiral-gemi { background: #f9a8d4; }
.amiral-gemi:empty::after { content: ''; width: 40%; height: 40%; border-radius: 2px; background: #db2777; opacity: .5; }