:root {
  --bg: #15171c;
  --panel: #1e2128;
  --text: #f1f2f4;
  --muted: #9aa0ab;
  --light: #eedcb7;
  --dark: #b48a63;
  --accent: #5fc77a;
  --bad: #e5604f;
  --hl: rgba(255, 214, 79, 0.45);
  --sel: rgba(95, 199, 122, 0.55);
  --bar-h: 52px;
  --top-h: 58px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font: 15px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow: hidden; }

#app { height: 100vh; height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; }

.top { height: var(--top-h); width: var(--size); display: flex; align-items: center; gap: 10px; padding: 0 4px; }
.side { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #555; flex: none; }
.side.white { background: #fafafa; }
.side.black { background: #111; border-color: #777; }
.head-text { min-width: 0; flex: 1; }
.status { font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status.good { color: var(--accent); }
.status.bad { color: var(--bad); }
.sub { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sub a { color: var(--muted); }

.board {
  --size: min(100vw - 12px, 100dvh - var(--bar-h) - var(--top-h) - 8px);
  width: var(--size); height: var(--size);
  display: grid; grid-template: repeat(8, 1fr) / repeat(8, 1fr);
  border-radius: 6px; overflow: hidden; touch-action: none; user-select: none; position: relative;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
#app { --size: min(100vw - 12px, 100dvh - var(--bar-h) - var(--top-h) - 8px); }
.sq { position: relative; display: flex; align-items: center; justify-content: center; }
.sq.l { background: var(--light); }
.sq.d { background: var(--dark); }
.sq.last::before { content: ""; position: absolute; inset: 0; background: var(--hl); }
.sq.sel::before { content: ""; position: absolute; inset: 0; background: var(--sel); }
.sq.hint::before { content: ""; position: absolute; inset: 0; background: rgba(80, 160, 255, 0.55); animation: pulse 1s ease-in-out infinite alternate; }
.sq.check::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255, 40, 40, 0.9) 0%, rgba(255, 40, 40, 0.35) 45%, transparent 72%); }
.sq.dot::after { content: ""; position: absolute; width: 30%; height: 30%; border-radius: 50%; background: rgba(20, 40, 20, 0.28); z-index: 2; pointer-events: none; }
.sq.cap::after { content: ""; position: absolute; inset: 3%; border-radius: 50%; border: 5px solid rgba(20, 40, 20, 0.28); z-index: 2; pointer-events: none; }
.sq.wrong::before { content: ""; position: absolute; inset: 0; background: rgba(229, 96, 79, 0.6); }
.coord { position: absolute; font-size: 10px; font-weight: 700; z-index: 1; pointer-events: none; }
.coord.f { right: 3px; bottom: 1px; }
.coord.r { left: 3px; top: 1px; }
.sq.l .coord { color: var(--dark); }
.sq.d .coord { color: var(--light); }
.pc { width: 100%; height: 100%; position: relative; z-index: 3; pointer-events: none; transition: transform 0.22s ease; }
.pc.drag { transition: none; z-index: 10; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.4)); }
/* Hover affordances while it's the player's turn: own pieces can be grabbed, targets clicked. */
.playing .sq.own { cursor: grab; }
.playing .sq.own:hover .pc { filter: brightness(1.08) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); }
.playing .sq.dot, .playing .sq.cap { cursor: pointer; }
.playing .sq.dot:hover, .playing .sq.cap:hover { box-shadow: inset 0 0 0 100vmax rgba(20, 85, 30, 0.3); }
.board.dragging, .board.dragging .sq { cursor: grabbing; }
@keyframes pulse { from { opacity: 0.35; } to { opacity: 1; } }

.bar { height: var(--bar-h); width: var(--size); display: flex; gap: 8px; align-items: center; }
.bar button {
  flex: 1; height: 38px; border: 0; border-radius: 9px; background: var(--panel); color: var(--text);
  font: 600 14px system-ui, sans-serif; cursor: pointer;
}
.bar button:hover { background: #2a2e37; }
.bar button:disabled { opacity: 0.4; cursor: default; }

.solved .board { box-shadow: 0 0 0 3px var(--accent), 0 6px 24px rgba(0, 0, 0, 0.45); }