/* ============================================================
   games-extra.css — styles partagés des jeux ajoutés (lots A→E).
   Un seul <link> dans index.html pour tous ces jeux.
   Classes préfixées par jeu pour éviter les collisions.
   ============================================================ */

/* ---------- Commun grilles ---------- */
.gx-hint { color: var(--text-soft); font-size: 14px; text-align: center; margin-top: 8px; }
.gx-scores { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.gx-score { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-weight: 700; }
.gx-seat0 { color: #ffd34d; }
.gx-seat1 { color: #6fe3a8; }

/* ---------- Gomoku (5 en ligne) ---------- */
.gomoku-board { display: grid; gap: 0; background: #c9a05a; border: 6px solid #a87b3c; border-radius: 8px; margin: 0 auto; width: max-content; max-width: 100%; }
.gomoku-cell { width: 26px; height: 26px; position: relative; cursor: pointer; box-sizing: border-box; border: 1px solid #a87b3c55; }
.gomoku-cell.playable:hover::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: rgba(0,0,0,.12); }
.gomoku-stone { position: absolute; inset: 3px; border-radius: 50%; }
.gomoku-stone.s0 { background: radial-gradient(circle at 35% 30%, #fff, #333 80%); }
.gomoku-stone.s1 { background: radial-gradient(circle at 35% 30%, #fff 0%, #d23b57 60%, #8c1f33 100%); }
@media (max-width: 560px) { .gomoku-cell { width: 20px; height: 20px; } }

/* ---------- Morpion ultime ---------- */
.ult-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: max-content; max-width: 100%; margin: 0 auto; }
.ult-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--line); padding: 4px; border-radius: 8px; position: relative; }
.ult-mini.active { outline: 3px solid var(--accent); }
.ult-mini.won { opacity: .92; }
.ult-cell { width: 30px; height: 30px; background: var(--bg-soft); border: none; border-radius: 4px; font-size: 18px; font-weight: 800; cursor: pointer; color: var(--text); }
.ult-cell.playable:hover { background: var(--bg-card); }
.ult-cell.s0 { color: #ffd34d; } .ult-cell.s1 { color: #6fe3a8; }
.ult-mini-win { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 52px; font-weight: 900; background: rgba(15,18,38,.78); border-radius: 8px; }
.ult-mini-win.s0 { color: #ffd34d; } .ult-mini-win.s1 { color: #6fe3a8; }
@media (max-width: 560px) { .ult-cell { width: 24px; height: 24px; font-size: 14px; } }

/* ---------- Points et carrés ---------- */
.pc-grid { position: relative; margin: 10px auto; width: max-content; }
.pc-dot { position: absolute; width: 10px; height: 10px; background: var(--text); border-radius: 50%; transform: translate(-50%, -50%); }
.pc-edge { position: absolute; background: var(--line); border-radius: 4px; cursor: pointer; transition: background .12s; }
.pc-edge.h { height: 6px; transform: translate(0, -50%); }
.pc-edge.v { width: 6px; transform: translate(-50%, 0); }
.pc-edge.playable:hover { background: var(--accent); }
.pc-edge.taken { cursor: default; }
.pc-edge.taken.s0 { background: #ffd34d; } .pc-edge.taken.s1 { background: #6fe3a8; }
.pc-box { position: absolute; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; transform: translate(-50%, -50%); }
.pc-box.s0 { color: #ffd34d; } .pc-box.s1 { color: #6fe3a8; }

/* ---------- Commun ---------- */
.gx-center { text-align: center; margin-top: 10px; }

/* ---------- Jeu de l'oie ---------- */
.oie-wrap { text-align: center; }
.oie-board { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; max-width: 540px; margin: 0 auto; }
.oie-cell {
  position: relative; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 6px;
  min-height: 46px; padding: 2px; display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.oie-cell.start { border-color: var(--good); }
.oie-cell.end { border-color: var(--accent-2); box-shadow: 0 0 0 1px var(--accent-2) inset; }
.oie-num { color: var(--text-soft); font-size: 9px; }
.oie-ic { font-size: 15px; line-height: 1; }
.oie-toks { display: flex; flex-wrap: wrap; gap: 1px; justify-content: center; }
.oie-token { width: 15px; height: 15px; border-radius: 50%; font-size: 9px; font-weight: 800; color: #10131f; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 560px) { .oie-board { grid-template-columns: repeat(6, 1fr); } .oie-cell { min-height: 42px; } }

/* ---------- Taquin ---------- */
.taquin-wrap { text-align: center; }
.taquin-grid { display: grid; grid-template-columns: repeat(3, 66px); grid-template-rows: repeat(3, 66px); gap: 6px; justify-content: center; margin: 14px auto; }
.taquin-tile {
  font-size: 26px; font-weight: 800; border-radius: 10px;
  background: var(--bg-soft); border: 1px solid var(--line); color: var(--text); cursor: default;
}
.taquin-tile.empty { background: transparent; border: 1px dashed var(--line); }
.taquin-tile.playable { cursor: pointer; border-color: var(--accent); }
.taquin-tile.playable:hover { background: var(--bg-card); filter: brightness(1.1); }