:root {
  --bg: #0a0a12;
  --panel: rgba(255, 255, 255, 0.05);
  --panel-border: rgba(255, 255, 255, 0.09);
  --text: #eceaf6;
  --muted: #9b96b8;
  --accent: #8b5cf6;
  --accent-2: #a78bfa;
  --sq-light: #f7f7f7;
  --sq-dark: #141414;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: radial-gradient(1200px 800px at 20% -10%, rgba(139, 92, 246, 0.22), transparent 60%),
              radial-gradient(1000px 700px at 110% 110%, rgba(124, 58, 237, 0.16), transparent 55%),
              var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh;
}
.wrap { max-width: 1060px; margin: 0 auto; padding: 28px 18px 40px; }
.game { display: block; }
.board-col { max-width: 640px; margin: 0 auto; }
.player-bar {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  height: clamp(88px, 15vw, 132px); padding: 0 14px; border-radius: 12px; border: 1px solid var(--panel-border); margin-bottom: 12px;
}
.player-bar.purple { margin: 12px 0 0; background: #9333ea; border-color: #9333ea; }
.player-bar.green { background: #16a34a; border-color: #16a34a; }
.player-bar select {
  background: transparent; color: #ffffff; border: none; border-radius: 10px;
  padding: 0 8px; font-size: 64px; line-height: 1; font-weight: 800; text-align: center; text-align-last: center;
  outline: none; width: 100%; cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none; /* no chevron (Marc, 2026-10-17) - bar still opens the picker */
}
.player-bar select::-ms-expand { display: none; }
.player-bar select:focus-visible { outline: 2px solid rgba(255,255,255,0.8); outline-offset: 2px; }
.player-bar select option { color: #14121f; background: #ffffff; font-size: 16px; font-weight: 600; }
.player-bar.green.active { animation: barglow-g 1s ease-in-out infinite; }
.player-bar.purple.active { animation: barglow-p 1s ease-in-out infinite; }
@keyframes barglow-g { 50% { box-shadow: 0 0 22px rgba(34, 197, 94, 0.9); background: #22c55e; border-color: #22c55e; } }
@keyframes barglow-p { 50% { box-shadow: 0 0 22px rgba(168, 85, 247, 0.9); background: #a855f7; border-color: #a855f7; } }
.status {
  text-align: center; font-size: 15px; font-weight: 600; min-height: 44px; display: grid; place-items: center;
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: 12px; margin-bottom: 12px; padding: 8px 12px;
}
.status .think { color: var(--accent-2); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.45; } }
.board {
  position: relative;
  width: 100%; aspect-ratio: 1; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr);
  border-radius: 14px; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); user-select: none;
}
.sq { position: relative; display: grid; place-items: center; }
.sq.light { background: var(--sq-light); }
.sq.dark { background: var(--sq-dark); }
.sq.last-w::before { content: ""; position: absolute; inset: 0; background: rgba(167, 139, 250, 0.5); }
.sq.last-b::before { content: ""; position: absolute; inset: 0; background: rgba(22, 163, 74, 0.5); }
.sq.path-w::before { content: ""; position: absolute; inset: 0; background: rgba(167, 139, 250, 0.28); }
.sq.path-b::before { content: ""; position: absolute; inset: 0; background: rgba(22, 163, 74, 0.28); }
.pc.ghost-static { opacity: 0.3; filter: grayscale(1); }
.sq.capred::before { content: ""; position: absolute; inset: 0; background: rgba(239, 68, 68, 0.55); }
.sq.capflash::before { content: ""; position: absolute; inset: 0; background: rgba(239, 68, 68, 0.8); animation: capflash 0.42s ease-in-out 2; z-index: 4; }
@keyframes capflash { 50% { opacity: 0.25; } }
.anim .doomed {
  position: absolute; transform: translate(-50%, -50%); z-index: 5;
  filter: grayscale(1) sepia(1) saturate(8) hue-rotate(-55deg) brightness(1.1) drop-shadow(0 0 6px rgba(239, 68, 68, 0.9));
}
.sq.check { background: radial-gradient(circle, rgba(239, 68, 68, 0.85) 20%, transparent 75%); }
.pc { width: 82%; height: 82%; z-index: 1; pointer-events: none; }
.coord { position: absolute; font-size: 10px; font-weight: 700; opacity: 0.75; z-index: 1; pointer-events: none; }
.coord.r { top: 3px; left: 4px; }
.coord.f { bottom: 3px; right: 5px; }
.sq.light .coord { color: #666; }
.sq.dark .coord { color: #e9e4f8; }
.score { text-align: center; margin-top: 14px; font-size: 13px; color: var(--muted); line-height: 1.7; white-space: pre-line; }
.foot { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; color: var(--muted); font-size: 12px; }
.foot a { color: var(--accent-2); text-decoration: none; }

.anim { position: absolute; inset: 0; pointer-events: none; z-index: 5; transition: opacity 0.25s; }
.anim.fade { opacity: 0; }
.anim svg.trail { position: absolute; inset: 0; width: 100%; height: 100%; }
.trail-line { stroke: var(--accent-2); stroke-width: 4; stroke-linecap: round; opacity: 0.75; }
.anim .ghost, .anim .mover { position: absolute; transform: translate(-50%, -50%); }
.anim .ghost { opacity: 0.3; filter: grayscale(1); }
.anim .mover { transition: transform 380ms ease-in-out; z-index: 6; }

svg.trail-static { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.trail-static-line { stroke-width: 4; stroke-linecap: round; opacity: 0.8; }
.trail-static-line.pw { stroke: #a78bfa; }
.trail-static-line.pb { stroke: #16a34a; }

.trail-static-dot { opacity: 0.8; }
.trail-static-dot.pw { fill: #a78bfa; }
.trail-static-dot.pb { fill: #16a34a; }

.anim .blink { position: absolute; transform: translate(-50%, -50%); z-index: 6; animation: sideblink 0.5s ease-in-out 4; }
@keyframes sideblink { 50% { opacity: 0.15; } }
.anim .blink.pw { filter: drop-shadow(0 0 10px rgba(167, 139, 250, 1)); }
.anim .blink.pb { filter: drop-shadow(0 0 10px rgba(22, 163, 74, 1)); }