/* ===========================================================
   Dots and Boxes — game-specific styles only.
   Chrome, buttons, #status, .hint, .score-box come from shared.css.
   =========================================================== */

body { gap: 16px; }

/* score chips sit in a row and wrap on tiny screens */
#scores {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* the board scales to fit narrow screens via clamp() */
#boardWrap {
  width: clamp(280px, 88vw, 440px);
}

#board {
  display: block;
  width: 100%;
  height: auto;
  background: var(--surface);
  border-radius: 14px;
  padding: 0;            /* padding handled inside the SVG viewBox */
  box-shadow: 0 10px 40px var(--shadow);
  touch-action: manipulation;
}

/* --- dots --- */
.dot { fill: var(--text); }

/* --- edges --- */
/* every edge is two stacked shapes: a fat invisible hit area + the visible line */
.edge-hit {
  fill: transparent;
  stroke: transparent;
  cursor: pointer;
}
.edge-line {
  stroke: var(--surface-3);
  stroke-linecap: round;
  transition: stroke 0.12s;
  pointer-events: none;     /* clicks go to the hit area */
}
/* hover highlight only while the board accepts input */
#board:not(.locked) .edge-hit:hover + .edge-line.open {
  stroke: var(--accent);
  opacity: 0.7;
}
#board.locked .edge-hit { cursor: default; }

/* claimed edges keep their owner colour */
.edge-line.you { stroke: var(--green); }
.edge-line.cpu { stroke: var(--red); }

/* freshly drawn edges animate in */
.edge-line.draw { animation: edgePop 0.25s ease-out; }
@keyframes edgePop {
  from { stroke-width: 2; opacity: 0.3; }
  to   { stroke-width: 7; opacity: 1; }
}

/* --- claimed box fills + initials --- */
.box-fill { opacity: 0; transition: opacity 0.25s; }
.box-fill.you { fill: var(--green); opacity: 0.16; }
.box-fill.cpu { fill: var(--red);   opacity: 0.16; }

.box-label {
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: central;
  opacity: 0;
  transition: opacity 0.25s;
}
.box-label.show { opacity: 1; }
.box-label.you { fill: var(--green); }
.box-label.cpu { fill: var(--red); }