* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
}

/* The stage is sized to the pitch's true physical dimensions (see
   calibration.js) and can be bigger than the viewport, so this wrapper
   scrolls to it and centers it when it's smaller. */
#stage-wrapper {
  position: fixed;
  inset: 0;
  overflow: auto;
  display: flex;
}

/* margin: auto (not parent justify/align-content) centers the stage when
   it's smaller than the viewport, while still allowing the wrapper to
   scroll to EVERY edge when it's bigger — centering via the parent's
   justify-content/align-items clips the "start" side of the overflow and
   makes it unreachable by scrolling. */
#stage {
  position: relative;
  flex-shrink: 0;
  margin: auto;
}

#pitch-canvas,
#fx-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}

#fx-canvas {
  pointer-events: none;
}

/* Pinned to the viewport (not the scrolling stage) so controls stay
   reachable no matter how large the calibrated pitch is. */
#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

#weather-banner {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  padding: 10px 24px;
  border-radius: 8px;
  text-align: center;
  font-size: 1.1rem;
  pointer-events: none;
}

#weather-banner.hidden {
  display: none;
}

#weather-name {
  display: block;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

#weather-desc {
  display: block;
  opacity: 0.85;
  font-size: 0.95rem;
  margin-top: 2px;
}

#controls {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 92vw;
  pointer-events: auto;
}

#controls button {
  background: rgba(20, 20, 20, 0.75);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  padding: 10px 16px;
  font-size: 0.95rem;
  white-space: nowrap;
  cursor: pointer;
}

#controls button:hover {
  background: rgba(50, 50, 50, 0.9);
}

body.ui-hidden #controls > *:not(#hud-toggle-btn) {
  display: none;
}

body.ui-hidden #weather-banner {
  opacity: 0.6;
}

.field {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(20, 20, 20, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  padding: 6px 12px;
  color: #fff;
  font-size: 0.9rem;
  white-space: nowrap;
}

.field input {
  width: 3.4em;
  box-sizing: border-box;
  text-align: right;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  color: #fff;
  font-size: 0.9rem;
  padding: 4px 6px;
}

#calibrate-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

#calibrate-modal.hidden {
  display: none;
}

.calibrate-panel {
  background: #14100c;
  color: #f0e6d2;
  border: 1px solid rgba(212, 160, 40, 0.85);
  border-radius: 10px;
  padding: 24px 28px;
  max-width: 420px;
  width: calc(100% - 48px);
}

.calibrate-panel h2 {
  margin: 0 0 10px;
  font-size: 1.2rem;
}

.calibrate-panel p {
  margin: 0 0 18px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: rgba(240, 230, 210, 0.85);
}

#calibrate-bar {
  height: 14px;
  background: linear-gradient(90deg, #d4a028, #f0c96a);
  border-radius: 3px;
  margin-bottom: 18px;
}

.calibrate-field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.calibrate-field input {
  width: 6ch;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  color: #fff;
  font-size: 0.95rem;
  padding: 6px 8px;
}

.calibrate-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.calibrate-actions button {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 0.9rem;
  cursor: pointer;
}

#calibrate-save {
  background: rgba(212, 160, 40, 0.85);
  border-color: rgba(212, 160, 40, 0.85);
  color: #14100c;
  font-weight: 700;
}