/* Field presentation: one readable scale for canvas, controls and the key. */
#field,
.online-field {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
  aspect-ratio: auto;
  /* Vector routes stay smooth; player sprites still use their integer art grid. */
  image-rendering: auto;
}

.field-wrap { position: relative; width: 100%; min-width: 0; overflow: hidden; background: #142e27; }
.game-layout > div,
.game-layout > aside { min-width: 0; }

.field-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 10px 16px;
  background: var(--card);
  border-top: 1px solid var(--line);
}

.field-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  min-width: 0;
}

.field-controls label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--forest);
  cursor: pointer;
}

.field-controls input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--forest);
}

.field-toolbar .text-button {
  min-width: 42px;
  min-height: 36px;
  padding: 8px;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.field-toolbar :focus-visible,
.field-key > summary:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 3px;
}

.field-caption {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 12px 16px;
  font-size: 16px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.field-caption strong { font-size: 16px; }
.field-caption > span { min-width: 0; }
.field-caption .icon { vertical-align: middle; }

.field-key {
  border-bottom: 1px solid var(--line);
  background: #edf0e6;
  color: #435746;
}

.field-key > summary {
  padding: 11px 16px;
  min-height: 40px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.field-key > summary span {
  margin-left: 8px;
  font-weight: 400;
  color: #5a6d5a;
}

.field-key .field-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 12px 18px;
  padding: 4px 16px 12px;
  border: 0;
  font-size: 16px;
  line-height: 1.5;
}

.field-key .field-legend i { flex-shrink: 0; }
.field-key > p {
  margin: 0;
  padding: 0 16px 14px;
  max-width: 72ch;
  font-size: 16px;
  line-height: 1.6;
}

@media (max-width: 760px) {
  .field-toolbar { padding: 8px 12px; gap: 4px 8px; }
  .field-controls { gap: 2px 12px; }
  .field-controls label { min-height: 44px; font-size: 16px; }
  .field-toolbar .text-button { min-height: 44px; }
  .field-caption { padding: 10px 12px; }
  .field-key > summary { padding: 12px; min-height: 44px; }
  .field-key .field-legend { padding: 2px 12px 12px; }
  .field-key > p { padding: 0 12px 14px; }
}

/* A compact shared sequence for franchise and online coaching. */
.pre-snap-steps{display:flex;list-style:none;gap:6px;padding:0;margin:0 0 22px;color:var(--muted,#86958e);font-size:16px;line-height:1.4}
.pre-snap-steps li{display:flex;align-items:center;justify-content:center;gap:5px;flex:1;min-width:0;padding:9px 4px;border:1px solid #d6d9cf;border-radius:3px}
.pre-snap-steps li span{font-size:16px;opacity:.7}
.pre-snap-steps .is-current{background:#173e31;border-color:#173e31;color:#fff5d7;font-weight:700}
.pre-snap-steps .is-done{color:#35674e;background:#e9eee4;border-color:#c7d4c6}
.phase-explanation{font-size:20px;line-height:1.65;color:#59695e;margin:12px 0 20px}
@media(max-width:760px){.pre-snap-steps{font-size:16px;gap:8px}.pre-snap-steps li{padding:11px 4px}}

/* Short result announcements sit above the action and never capture a tap. */
.field-events{position:absolute;z-index:3;inset:68px 12px auto;display:flex;justify-content:center;pointer-events:none}
.field-event-stack{display:grid;justify-items:center;gap:5px;max-width:100%;pointer-events:none}
.field-event{box-sizing:border-box;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 12px;max-width:100%;padding:10px 16px;border:2px solid #eac479;background:#122821f2;color:#fff0c5;box-shadow:0 4px 0 #071a14a6;text-align:center;overflow-wrap:anywhere}
.field-event strong{font:400 24px/1.5 var(--display,'Pixel Operator',monospace);letter-spacing:1px}
.field-event span{font:400 16px/1.5 var(--display,'Pixel Operator',monospace);letter-spacing:0}
.field-event--first-down{border-color:#a2d2ae;color:#d9f3d4}
.field-event--interception{border-color:#ef957d;color:#ffd3c2}
.field-event--flag{border-color:#f0c454;background:#322b17f5;color:#ffe495;padding:7px 12px}
.field-event--flag strong{font-size:20px}
.field-event-stack.is-entering{animation:field-event-enter .18s steps(3,end) both}
.field-event-stack.is-leaving{animation:field-event-leave .35s steps(4,end) both}
.field-event-stack.is-resumed{animation:none}
.field-event-stack.reduced-motion{animation:none!important}
.field-event-stack.reduced-motion.is-leaving{opacity:0}
@keyframes field-event-enter{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@keyframes field-event-leave{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}
@media(max-width:600px){.field-events{inset:62px 8px auto}.field-event{padding:8px 11px;gap:3px 8px}.field-event strong{font-size:20px;letter-spacing:0}.field-event span{font-size:16px}.field-event--flag strong{font-size:20px}}
@media(prefers-reduced-motion:reduce){.field-event-stack.is-entering,.field-event-stack.is-leaving{animation:none}.field-event-stack.is-leaving{opacity:0}}