/* Dots and Boxes board – only what's specific to this game.
   Header, difficulty, score and status come from /css/style.css. */

/* The holder sits in a centred column, so it needs its own width */
.db-holder {
  width: min(100%, 420px);
}

.db-board {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  touch-action: manipulation; /* no double-tap zoom while tapping lines */
}

/* ---------- Boxes ---------- */

.db-box {
  fill: transparent;
  transition: fill 200ms ease;
}

.db-box.is-mine {
  fill: var(--accent);
  fill-opacity: 0.32;
}

.db-box.is-theirs {
  fill: var(--text);
  fill-opacity: 0.16;
}

/* ---------- Lines ---------- */

.db-line {
  stroke: transparent;
  stroke-width: 6;
  stroke-linecap: round;
}

.db-line.is-mine {
  stroke: var(--accent);
}

.db-line.is-theirs {
  stroke: var(--text);
}

/* Lines the other player just drew get a soft glow behind them */
.db-line.is-fresh {
  filter: drop-shadow(0 0 4px var(--accent));
}

.db-line.is-theirs.is-fresh {
  filter: drop-shadow(0 0 5px var(--text-muted));
}

.db-line.is-preview {
  stroke: var(--accent);
  stroke-opacity: 0.35;
}

/* A new line draws itself in from one dot to the other */
.db-line.is-new {
  stroke-dasharray: 60;
  animation: db-draw 180ms ease-out;
}

.db-box.is-new {
  transform-box: fill-box;
  transform-origin: center;
  animation: db-box-in 0.35s cubic-bezier(0.2, 1.5, 0.4, 1);
}

@keyframes db-box-in {
  from { transform: scale(0.2); opacity: 0; }
}

@keyframes db-draw {
  from {
    stroke-dashoffset: 60;
  }
}

/* ---------- Dots ---------- */

.db-dots circle {
  fill: var(--text-muted);
}

/* ---------- Clickable strips ---------- */

.db-hit {
  fill: transparent;
  outline: none;
}

.db-hit.is-open {
  cursor: pointer;
}

.db-hit.is-open:focus-visible {
  stroke: var(--accent);
  stroke-width: 2;
}

/* ---------- Score dots + help text ---------- */

.db-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 2px;
  border-radius: 3px;
  vertical-align: 0;
}

.db-dot.is-mine {
  background: var(--accent);
}

.db-dot.is-theirs {
  background: var(--text);
}

.db-help {
  max-width: 420px;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .db-box.is-new,
  .db-line.is-new {
    animation: none;
  }
  .db-box {
    transition: none;
  }
}

/* ---------- Online room ---------- */

/* "You 6 – 4 Alex" above the board */
.db-online-score {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
}

.db-online-score .is-mine {
  color: var(--accent);
}

/* Phone held sideways: fit the screen height (see css/style.css) */
@media (orientation: landscape) and (max-height: 540px) {
  .db-holder { width: min(420px, var(--play-w), var(--play-h)); }
}