/* Pentago board: a walnut tray, four turning wooden plates, glass-like Siyah and Beyaz marbles.
   Motion is transform/opacity only; body.reduced-motion and prefers-reduced-motion disable it. */
.pentago {
  --pentago-size: 480px;
  --pentago-turn: 56px;
  --pentago-gap: 11px;
  --pentago-p0: #1f6fd0;
  --pentago-p1: #e8590c;
  --pentago-tray: #3a2414;
  --pentago-tray-light: #6b4426;
  --pentago-plate: #d9a265;
  --pentago-plate-light: #ecc28a;
  --pentago-plate-deep: #a8703a;
  --pentago-hole: #5a3519;
  --pentago-danger: #d23b3b;
  --pentago-gold: #ffc531;
  --pentago-me: var(--pentago-p0);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  color: var(--navy, #0b1628);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.pentago[data-turn="1"] { --pentago-me: var(--pentago-p1); }

/* ---------- Two-step phase indicator ---------- */
.pentago-phase { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; min-height: 40px; font-weight: 800; font-size: 15px; }
.pentago-phase__step { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; color: var(--ink-soft, #3a4a5f); background: var(--surface-soft, #eef2f7); border: 2px solid transparent; border-radius: 999px; transition: transform .25s var(--ease-bounce, ease), color .2s, border-color .2s, background .2s; }
.pentago-phase__step b { display: grid; place-items: center; width: 22px; height: 22px; color: var(--surface, #fff); background: var(--ink-soft, #3a4a5f); border-radius: 50%; font-size: 13px; }
.pentago-phase__step.is-active { color: var(--navy, #0b1628); background: var(--surface, #fff); border-color: var(--pentago-me); transform: scale(1.06); }
.pentago-phase__step.is-active b { color: var(--surface, #fff); background: var(--ink, #0b1628); }
.pentago[data-interactive="false"] .pentago-phase__step.is-active { border-style: dashed; }

/* ---------- Stage: the board with its four turn buttons beside it (wide) or above and below it (tall) ---------- */
.pentago-stage { display: grid; place-items: center; min-height: 0; min-width: 0; contain: size; }
.pentago-frame { display: grid; gap: var(--pentago-gap); }
.pentago[data-layout="wide"] .pentago-frame {
  grid-template-columns: var(--pentago-turn) var(--pentago-size) var(--pentago-turn);
  grid-template-rows: repeat(2, calc(var(--pentago-size) / 2 - var(--pentago-gap) / 2));
}
.pentago[data-layout="wide"] .pentago-board { grid-column: 2; grid-row: 1 / span 2; }
.pentago[data-layout="wide"] .pentago-turn[data-quad="0"] { grid-column: 1; grid-row: 1; align-self: start; }
.pentago[data-layout="wide"] .pentago-turn[data-quad="1"] { grid-column: 3; grid-row: 1; align-self: start; }
.pentago[data-layout="wide"] .pentago-turn[data-quad="2"] { grid-column: 1; grid-row: 2; align-self: end; }
.pentago[data-layout="wide"] .pentago-turn[data-quad="3"] { grid-column: 3; grid-row: 2; align-self: end; }
.pentago[data-layout="tall"] .pentago-frame {
  grid-template-columns: repeat(2, calc(var(--pentago-size) / 2 - var(--pentago-gap) / 2));
  grid-template-rows: var(--pentago-turn) var(--pentago-size) var(--pentago-turn);
}
.pentago[data-layout="tall"] .pentago-board { grid-column: 1 / span 2; grid-row: 2; }
.pentago[data-layout="tall"] .pentago-turn[data-quad="0"] { grid-column: 1; grid-row: 1; justify-self: start; }
.pentago[data-layout="tall"] .pentago-turn[data-quad="1"] { grid-column: 2; grid-row: 1; justify-self: end; }
.pentago[data-layout="tall"] .pentago-turn[data-quad="2"] { grid-column: 1; grid-row: 3; justify-self: start; }
.pentago[data-layout="tall"] .pentago-turn[data-quad="3"] { grid-column: 2; grid-row: 3; justify-self: end; }

/* ---------- Turn buttons ---------- */
.pentago-turn {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--pentago-turn);
  height: var(--pentago-turn);
  margin: 0;
  padding: 0;
  color: #fff;
  background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .35), transparent 55%), var(--pentago-me);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .25), 0 10px 22px rgba(11, 27, 51, .25);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s var(--ease-bounce, ease), opacity .2s, filter .2s;
}
.pentago-turn__arrow { font-size: calc(var(--pentago-turn) * .56); font-weight: 900; line-height: 1; }
.pentago-turn__key { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: calc(var(--pentago-turn) * .36); height: calc(var(--pentago-turn) * .36); color: var(--navy, #0b1628); background: var(--surface, #fff); border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); font-size: calc(var(--pentago-turn) * .2); font-weight: 900; }
.pentago-turn:disabled { opacity: .32; filter: grayscale(1); cursor: default; box-shadow: none; }
.pentago-turn.is-ready { animation: pentago-ready 1.3s ease-in-out infinite; }
.pentago-turn.is-ready:active { transform: scale(.92) rotate(30deg); }
.pentago-turn:focus-visible { outline: 4px solid var(--focus, #ffbf3c); outline-offset: 3px; }
@keyframes pentago-ready { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* ---------- Tray, plates and holes ---------- */
.pentago-board {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: calc(var(--pentago-size) * .022);
  width: var(--pentago-size);
  height: var(--pentago-size);
  padding: calc(var(--pentago-size) * .026);
  box-sizing: border-box;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, .14), transparent 55%),
    linear-gradient(160deg, var(--pentago-tray-light), var(--pentago-tray) 70%);
  border-radius: calc(var(--pentago-size) * .045);
  box-shadow: 0 2px 0 rgba(255, 255, 255, .12) inset, 0 -6px 0 rgba(0, 0, 0, .25) inset, 0 22px 50px rgba(11, 27, 51, .28), 0 4px 0 #1c0f06;
  touch-action: none;
}
.pentago-plate {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  min-width: 0;
  min-height: 0;
  padding: calc(var(--pentago-size) * .01);
  background:
    repeating-linear-gradient(100deg, rgba(120, 70, 25, .07) 0 3px, transparent 3px 11px),
    radial-gradient(110% 90% at 25% 15%, var(--pentago-plate-light), var(--pentago-plate) 55%, var(--pentago-plate-deep));
  border-radius: calc(var(--pentago-size) * .03);
  box-shadow: 0 2px 0 rgba(255, 255, 255, .35) inset, 0 -3px 0 rgba(0, 0, 0, .18) inset, 0 4px 8px rgba(0, 0, 0, .35);
  transform-origin: 50% 50%;
}
.pentago-plate.is-turning { z-index: 2; box-shadow: 0 2px 0 rgba(255, 255, 255, .35) inset, 0 12px 24px rgba(0, 0, 0, .45); }
.pentago-plate.is-turned { box-shadow: 0 0 0 3px rgba(255, 255, 255, .55), 0 2px 0 rgba(255, 255, 255, .35) inset, 0 -3px 0 rgba(0, 0, 0, .18) inset, 0 4px 8px rgba(0, 0, 0, .35); }
.pentago-plate.is-flash { box-shadow: 0 0 0 5px var(--pentago-gold), 0 4px 8px rgba(0, 0, 0, .35); }
.pentago-hole {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 50%;
  font: inherit;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.pentago-hole::before {
  content: "";
  position: absolute;
  inset: 17%;
  background: radial-gradient(circle at 50% 40%, rgba(0, 0, 0, .55), var(--pentago-hole) 70%);
  border-radius: 50%;
  box-shadow: 0 2px 0 rgba(255, 255, 255, .35), 0 3px 5px rgba(0, 0, 0, .45) inset;
}
.pentago-hole.is-open { cursor: pointer; }
.pentago-hole.is-locked { cursor: not-allowed; }
.pentago-hole:focus-visible { outline: 4px solid var(--focus, #ffbf3c); outline-offset: -2px; }
@media (hover: hover) {
  .pentago-hole.is-open:hover::after { content: ""; position: absolute; inset: 12%; border: 3px solid var(--pentago-me); border-radius: 50%; opacity: .85; }
}

/* ---------- Marbles: Siyah (the starting seat, rule 5) and Beyaz; each seat keeps its emblem and rim colour ---------- */
.pentago-marble {
  --m-hi: #ffffff;
  --m-mid: #eef1f5;
  --m-lo: #b9c0ca;
  --m-emblem: rgba(18, 26, 40, .5);
  --m-ring: var(--pentago-p0);
  position: absolute;
  inset: 9%;
  display: none;
  background: radial-gradient(circle at 34% 28%, var(--m-hi) 0, var(--m-mid) 38%, var(--m-lo) 88%);
  border-radius: 50%;
  box-shadow: 0 0 0 calc(var(--pentago-size) * .006 + 1px) var(--m-ring), 0 4px 6px rgba(0, 0, 0, .45);
}
.pentago-hole[data-seat] .pentago-marble { display: block; }
.pentago-hole[data-seat="1"] .pentago-marble { --m-ring: var(--pentago-p1); }
.pentago[data-first="0"] .pentago-hole[data-seat="0"] .pentago-marble,
.pentago[data-first="1"] .pentago-hole[data-seat="1"] .pentago-marble { --m-hi: #8a93a3; --m-mid: #262c38; --m-lo: #04060a; --m-emblem: rgba(255, 255, 255, .5); }
.pentago-marble__face { position: absolute; inset: 0; border-radius: 50%; }
.pentago-marble__face::after { content: ""; position: absolute; top: 12%; left: 20%; width: 34%; height: 22%; background: radial-gradient(ellipse at center, rgba(255, 255, 255, .85), transparent 70%); border-radius: 50%; transform: rotate(-30deg); }
.pentago-marble__emblem { position: absolute; inset: 27%; width: 46%; height: 46%; fill: var(--m-emblem); }
.pentago-hole[data-seat="0"] .pentago-emblem-1, .pentago-hole[data-seat="1"] .pentago-emblem-0 { display: none; }

/* ---------- Move marks ---------- */
.pentago-hole.is-pending::after { content: ""; position: absolute; inset: 2%; border: 4px solid var(--pentago-me); border-radius: 50%; animation: pentago-pending 1s ease-in-out infinite; }
@keyframes pentago-pending { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: .55; } }
.pentago-hole.is-last::after { content: ""; position: absolute; inset: 3%; border: 3px solid rgba(255, 255, 255, .9); border-radius: 50%; box-shadow: 0 0 0 2px rgba(0, 0, 0, .35); }
.pentago-hole.is-threat::after { content: ""; position: absolute; inset: 4%; border: 4px dashed var(--pentago-danger); border-radius: 50%; animation: pentago-threat 1.6s linear infinite; }
@keyframes pentago-threat { to { transform: rotate(360deg); } }
.pentago-hole.is-five .pentago-marble { box-shadow: 0 0 0 calc(var(--pentago-size) * .006 + 2px) var(--pentago-gold), 0 0 calc(var(--pentago-size) * .04) var(--pentago-gold); animation: pentago-five .9s ease-in-out 3; }
@keyframes pentago-five { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

.pentago-live { min-height: 1.3em; margin: 0; line-height: 1.3; color: var(--ink-soft, #3a4a5f); font-size: 14px; font-weight: 650; text-align: center; }

/* ---------- Reduced motion and high contrast ---------- */
body.reduced-motion .pentago *, body.reduced-motion .pentago *::before, body.reduced-motion .pentago *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .pentago *, .pentago *::before, .pentago *::after { animation: none !important; transition: none !important; } }
body.high-contrast .pentago { --pentago-tray: #000; --pentago-tray-light: #000; --pentago-plate: #fff; --pentago-plate-light: #fff; --pentago-plate-deep: #fff; --pentago-hole: #000; --pentago-p0: var(--player-a); --pentago-p1: var(--player-b); }
body.high-contrast .pentago-plate { background: #fff; box-shadow: 0 0 0 2px #000 inset; }
/* Black and white marbles keep their seat's rim colour (blue or orange); a black marble gets a white gap before it. */
body.high-contrast .pentago-marble { --m-hi: #fff; --m-mid: #fff; --m-lo: #fff; --m-emblem: #000; box-shadow: 0 0 0 4px var(--m-ring); }
body.high-contrast .pentago[data-first="0"] .pentago-hole[data-seat="0"] .pentago-marble,
body.high-contrast .pentago[data-first="1"] .pentago-hole[data-seat="1"] .pentago-marble { --m-hi: #000; --m-mid: #000; --m-lo: #000; --m-emblem: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 6px var(--m-ring); }
body.high-contrast .pentago-marble__face::after { display: none; }
body.high-contrast .pentago-turn { color: #fff; background: #000; }
body.high-contrast .pentago-hole.is-threat::after { border-color: #000; border-width: 5px; }
@media (forced-colors: active) {
  .pentago-plate { border: 2px solid CanvasText; }
  .pentago-hole::before { border: 1px solid CanvasText; }
  .pentago-marble { forced-color-adjust: none; }
  .pentago-hole.is-pending::after, .pentago-hole.is-threat::after { border-color: Highlight; }
}

/* ---------- Compact screens ---------- */
@media (max-width: 520px) {
  .pentago { gap: 6px; }
  .pentago-phase { gap: 5px; min-height: 34px; font-size: 13px; }
  .pentago-phase__step { padding: 5px 10px; }
  .pentago-live { font-size: 12px; }
  /* Phones: the move sentence stays for screen readers only; the corner referee needs the space. */
  .arena-play--board .pentago-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* The corner referee (z-index 9) can land on turn button 4 when the board sits low; the control stays on top. */
  .pentago-turn { z-index: 10; }
}

/* Dark theme: a darker walnut tray and oiled plates; the marbles keep their tones. */
html[data-theme="dark"] .pentago {
  --pentago-tray: #160c05;
  --pentago-tray-light: #3d2615;
  --pentago-plate: #a8723e;
  --pentago-plate-light: #c48d55;
  --pentago-plate-deep: #7a4c24;
  --pentago-hole: #2b1709;
}