:root {
  --paper: #efe7d4;
  --panel: rgba(255, 249, 238, 0.88);
  --ink: #201714;
  --muted: #6b5c53;
  --pitch: #4b9b60;
  --pitch-deep: #3d8650;
  --line: rgba(255, 255, 255, 0.9);
  --anchor: rgba(255, 255, 255, 0.55);
  --def: #3a68d9;
  --mid: #d89a2b;
  --att: #d94c3f;
  --gk: #5b6772;
  --roam: rgba(255, 255, 255, 0.17);
  --ball: #161616;
  --select: #f2f0c9;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.65), transparent 42%),
    linear-gradient(180deg, #d8ccb3, var(--paper));
  font-family: Georgia, "Times New Roman", serif;
}

.shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 280px;
  gap: 18px;
  padding: 18px;
  min-height: 100vh;
}

.panel {
  border: 1px solid rgba(35, 26, 22, 0.12);
  border-radius: 22px;
  background: var(--panel);
  box-shadow: 0 18px 40px rgba(38, 24, 20, 0.12);
  backdrop-filter: blur(10px);
}

.controls-panel,
.inspector-panel {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pitch-panel {
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pitch-wrap {
  width: 100%;
  max-width: 760px;
}

.single-grid,
.compare-grid {
  display: grid;
  gap: 14px;
}

.compare-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.compare-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.compare-card-header {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.pitch-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 700 / 980;
  border-radius: 28px;
  overflow: hidden;
}

.pitch-image-layer,
.pitch-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.pitch-image-layer {
  object-fit: fill;
  pointer-events: none;
}

.pitch-base-layer {
  z-index: 0;
}

.pitch-pattern-layer {
  z-index: 1;
}

.pitch-svg {
  z-index: 2;
  border-radius: 28px;
  overflow: hidden;
  touch-action: none;
}

.eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

h1, h2 {
  margin: 0;
  font-weight: 700;
}

h1 { font-size: 30px; }
h2 { font-size: 24px; }

.subtle {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.4;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field > span {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

select,
button {
  font: inherit;
}

select {
  width: 100%;
  border: 1px solid rgba(34, 26, 22, 0.15);
  background: rgba(255,255,255,0.82);
  border-radius: 14px;
  padding: 12px 14px;
}

input[type="number"] {
  width: 100%;
  border: 1px solid rgba(34, 26, 22, 0.15);
  background: rgba(255,255,255,0.9);
  border-radius: 12px;
  padding: 8px 10px;
  font: inherit;
}

.toggles {
  gap: 10px;
}

.toggles label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
}

.preset-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.preset-buttons button {
  border: 1px solid rgba(35, 26, 22, 0.14);
  background: rgba(255,255,255,0.82);
  border-radius: 14px;
  padding: 10px 12px;
  cursor: pointer;
}

.preset-buttons button:hover {
  background: rgba(255,255,255,0.95);
}

.inspector-content {
  min-height: 220px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.65);
  line-height: 1.45;
}

.inspector-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.inspector-row strong {
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.legend {
  display: grid;
  gap: 8px;
  font-size: 14px;
}

.roam-editor {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(35, 26, 22, 0.12);
}

.roam-editor h3 {
  margin: 0 0 6px;
  font-size: 18px;
}

.roam-note {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
}

.roam-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.7fr 1fr;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.roam-grid-header {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.roam-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.roam-actions-single {
  grid-template-columns: 1fr;
}

.legend-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border-radius: 50%;
  vertical-align: middle;
}

.legend-swatch.anchor { background: var(--anchor); }
.legend-swatch.defense { background: var(--def); }
.legend-swatch.midfield { background: var(--mid); }
.legend-swatch.attack { background: var(--att); }
.legend-swatch.ball { background: var(--ball); }
.legend-swatch.roam {
  border-radius: 4px;
  background: var(--roam);
  border: 1px solid rgba(255,255,255,0.35);
}

.pitch-bg { fill: url(#pitch-gradient); }
.pitch-line { fill: none; stroke: var(--line); stroke-width: 4; }
.pitch-soft-line { fill: none; stroke: rgba(255,255,255,0.55); stroke-width: 2; }
.anchor-dot { fill: var(--anchor); }
.roam-box {
  fill: var(--roam);
  stroke: rgba(255,255,255,0.35);
  stroke-width: 2;
}
.raw-final-line {
  stroke: rgba(255, 245, 160, 0.8);
  stroke-width: 2;
  stroke-dasharray: 6 6;
}

.raw-target-dot {
  fill: rgba(255, 245, 160, 0.92);
  stroke: rgba(0,0,0,0.28);
  stroke-width: 2;
}
.player-dot { cursor: pointer; stroke: rgba(255,255,255,0.95); stroke-width: 3; }
.player-dot.defense { fill: var(--def); }
.player-dot.midfield { fill: var(--mid); }
.player-dot.attack { fill: var(--att); }
.player-dot.keeper { fill: var(--gk); }
.player-dot.selected { stroke: var(--select); stroke-width: 5; }
.player-label {
  fill: white;
  text-anchor: middle;
  font-size: 15px;
  font-weight: 700;
  paint-order: stroke;
  stroke: rgba(0,0,0,0.35);
  stroke-width: 3;
  stroke-linejoin: round;
}
.ball {
  cursor: grab;
  fill: #fff7cf;
  stroke: var(--ball);
  stroke-width: 4;
  filter: drop-shadow(0 0 8px rgba(255, 244, 190, 0.85));
}
.ball:active { cursor: grabbing; }
.ball-core {
  fill: var(--ball);
  pointer-events: none;
}
.ball-label {
  fill: rgba(255,255,255,0.96);
  text-anchor: middle;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  paint-order: stroke;
  stroke: rgba(0,0,0,0.28);
  stroke-width: 3;
  pointer-events: none;
}
.clamp-line {
  stroke: rgba(255, 240, 160, 0.9);
  stroke-width: 3;
  stroke-dasharray: 8 8;
}
.clamp-label {
  fill: rgba(255, 245, 200, 0.95);
  font-size: 14px;
  text-anchor: end;
}

@media (max-width: 1200px) {
  .shell {
    grid-template-columns: 1fr;
  }

  .compare-grid {
    grid-template-columns: 1fr;
  }
}

button {
  width: 100%;
  border: 1px solid rgba(35, 26, 22, 0.14);
  background: rgba(255,255,255,0.82);
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
}

button:hover {
  background: rgba(255,255,255,0.95);
}

button:disabled,
select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.zone-box {
  fill: rgba(250, 245, 200, 0.08);
  stroke: rgba(255,255,255,0.55);
  stroke-width: 2;
  stroke-dasharray: 10 8;
}

.zone-center-dot {
  fill: rgba(255,255,255,0.92);
  stroke: rgba(0,0,0,0.25);
  stroke-width: 2;
}

.player-dot.active-chaser {
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.75));
}

.behavior-label {
  fill: rgba(255,255,255,0.92);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  paint-order: stroke;
  stroke: rgba(0,0,0,0.28);
  stroke-width: 3;
}


input[type="file"],
input[type="range"] {
  width: 100%;
}

.subtle-inline {
  color: var(--muted);
  font-size: 13px;
}