:root {
    --primary-blue: #134A8E;
    --primary-red: #E8291C;
    --highlight: #FFFF00;
    --dirt: #b08d57;
    --grass: #2d5a27;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body, html {
    margin: 0; padding: 0; height: 100%; width: 100%;
    background-color: var(--grass); font-family: -apple-system, sans-serif;
    overflow: hidden; touch-action: none; /* Crucial for drawing */
}

#app {
    display: flex; flex-direction: column; height: 100dvh; width: 100vw;
}

header {
    background: #111; padding: env(safe-area-inset-top) 12px 10px;
    border-bottom: 1px solid #333; z-index: 100; flex-shrink: 0;
}

.hud-top, .hud-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

#scenario-picker {
    flex: 1; background: #222; color: #fff; border: 1px solid #444;
    padding: 10px; border-radius: 4px; font-weight: 800; font-size: 0.8rem;
}

#play-explanation {
    background: rgba(255,255,255,0.05); color: #ddd; border-radius: 4px;
    padding: 8px; font-size: 0.75rem; line-height: 1.4; margin: 8px 0;
    border-left: 4px solid var(--highlight);
}

.logo { font-weight: 900; color: #333; font-size: 0.8rem; letter-spacing: 1px; }

button {
    border: none; border-radius: 4px; font-weight: 800; padding: 10px;
    cursor: pointer; text-transform: uppercase; font-size: 0.7rem;
}

.btn-toggle { background: #333; color: var(--primary-red); border: 1px solid var(--primary-red); width: 100px; }
.btn-toggle.active { background: var(--primary-red); color: #fff; }
.btn-tool { background: #fff; color: #000; flex: 1; }
.btn-tool.runner { background: var(--primary-red); color: #fff; }
.btn-alt { background: #444; color: #fff; }

#field-stage { flex: 1; display: flex; justify-content: center; align-items: center; background: var(--grass); overflow: hidden; touch-action: none; }

svg { width: 100%; height: 100%; touch-action: none; }

.dirt-skin { fill: var(--dirt); stroke: #8b6b3a; stroke-width: 2; }
.base-plate { fill: #fff; }
.mound-dirt { fill: #a07d47; stroke: #fff; stroke-width: 2; }

.player-node circle { fill: var(--primary-blue); stroke: #fff; stroke-width: 2.5; }
.player-node.highlight-node circle { fill: var(--highlight); stroke: #000; stroke-width: 3; }
.player-node.highlight-node text { fill: #000; }

.player-node text { fill: #fff; font-size: 20px; font-weight: 900; text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.runner-node circle { fill: var(--primary-red); stroke: #fff; stroke-width: 2.5; }
.ball-node circle { fill: #fff; stroke: #ccc; stroke-width: 1; }
.ball-stitch { stroke: var(--primary-red); stroke-width: 1.5; fill: none; pointer-events: none; }

/* Arrow Styles */
.arrow-line { stroke: var(--primary-red); stroke-width: 7; marker-end: url(#head-user); stroke-linecap: round; }
.ball-hit-line { stroke: black; stroke-width: 6; marker-end: url(#head-ball); stroke-dasharray: 10,5; }
.move-vector-line { stroke: white; stroke-width: 5; marker-end: url(#head-move); stroke-dasharray: 8,4; opacity: 0.8; }