:root {
  --bg: #f3f2ee;
  --text: #1f1e1d;
  --muted: #6b6a64;
  --border: #c9c7bd;
  --btn-bg: #ffffff;
  --btn-hover: #ebe9e2;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1b19;
    --text: #ecebe6;
    --muted: #a09f98;
    --border: #4a4a46;
    --btn-bg: #2a2a28;
    --btn-hover: #353532;
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* 工具栏 */
.toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 12px 16px;
}
.toolbar h1 { margin: 0; font-size: 18px; font-weight: 600; white-space: nowrap; }
.hint { flex: 1 1 160px; color: var(--muted); font-size: 14px; }
.rotate-tip { display: none; }
@media (orientation: portrait) and (max-width: 600px) {
  .rotate-tip { display: inline; }
}

button, select {
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--btn-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
}
select { max-width: 220px; padding: 6px 8px; }
button:hover, select:hover { background: var(--btn-hover); }
button:disabled, select:disabled { opacity: 0.45; cursor: default; }
button:disabled:hover, select:disabled:hover { background: var(--btn-bg); }

main {
  flex: 1;
  min-height: 0;
  display: flex;
  padding: 0 16px;
}

/* 步骤栏 */
.steps-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
}
.step-list { display: flex; flex-wrap: wrap; gap: 6px; }
.step { min-width: 34px; padding: 6px 10px; }
.step.active, .step.active:hover { background: #1f6fc5; border-color: #1f6fc5; color: #fff; }
.spacer { flex: 1; }

#board {
  flex: 1;
  min-width: 0;
  display: block;
  touch-action: none; /* 触屏拖动时不滚动页面 */
  user-select: none;
  -webkit-user-select: none;
}

/* 球场（单位：米） */
.surround { fill: #3b6d11; }
.lines { fill: none; stroke: rgba(255, 255, 255, 0.9); stroke-width: 0.1; }
.lines .goal { fill: rgba(255, 255, 255, 0.2); }
.spots { fill: rgba(255, 255, 255, 0.9); }

/* 球员与足球 */
.player, .ball { cursor: grab; }
#board.is-dragging, #board.is-dragging * { cursor: grabbing; }
.hit { fill: #000; fill-opacity: 0; } /* 透明的放大点击区域 */

.player .body { stroke: #fff; stroke-width: 0.12; }
.player.home .body { fill: #1f6fc5; }
.player.away .body { fill: #c0392b; }
.player.home.gk .body { fill: #f0a52a; }
.player.away.gk .body { fill: #3d3d3a; }
.player.dragging .body,
.player.snap-target .body { stroke: #ffe066; stroke-width: 0.18; }

.num {
  fill: #fff;
  font-size: 18px; /* 配合 scale(0.05)，实际约 0.9m */
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}
.player.home.gk .num { fill: #3d2604; }

.ball .body { fill: #fff; stroke: #222; stroke-width: 0.06; }
.ball .patch { fill: #222; }

/* 吸附范围提示圈 */
.snap-ring {
  fill: rgba(255, 255, 255, 0.12);
  stroke: #ffe066;
  stroke-width: 0.06;
  stroke-dasharray: 0.3 0.2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s;
}
.snap-ring.visible { opacity: 1; }

/* 上一步的残影与箭头 */
.ghosts { pointer-events: none; }
.ghost {
  fill: rgba(255, 255, 255, 0.15);
  stroke: rgba(255, 255, 255, 0.75);
  stroke-width: 0.08;
  stroke-dasharray: 0.25 0.15;
}
.run, .pass { stroke-width: 0.12; stroke-dasharray: 0.4 0.25; }
.run { stroke: #fff; }
.pass { stroke: #fac775; }