/* Read the green. The green on the left, everything else beside it.
   On a phone the side panel drops below. */

.green-game {
  display: grid;
  grid-template-columns: minmax(0, 640px) minmax(0, 1fr);
  gap: 32px;
  margin-top: 24px;
  align-items: start;
}

.green-frame {
  margin-top: 0;
  position: relative;
  touch-action: none;   /* pulling back to putt mustn't scroll the page */
  user-select: none;
  cursor: crosshair;
  overflow: hidden;
}
.green-frame canvas { display: block; width: 100%; }

.green-hud {
  position: absolute;
  top: 12px;
  left: 14px;
  right: 14px;
  display: flex;
  justify-content: space-between;
  color: var(--soft);
  font-size: var(--small);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}


/* The WebGL terrain sits under the 2D canvas, which holds the ball, cup and lines. */
.green-terrain { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; }
.green-terrain[hidden] { display: none; }
.green-frame canvas#greenCanvas { position: relative; }
.green-frame.is-camera { cursor: grab; }

/* The slope arrows switch, in the bottom left corner of the green. */
.green-arrows {
  position: absolute;
  left: 10px;
  bottom: 10px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(7, 9, 12, 0.75);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.green-arrows:hover { border-color: var(--ink); }
.green-arrows[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Under the green: Putt / Camera on the left, the camera's views on the right,
   grouped in one outline with a camera icon so it's clear what they move. */
.green-camera {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.green-mode { display: flex; gap: 6px; }
.green-views {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 3px 3px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.green-camera-icon { width: 20px; height: 20px; margin-right: 2px; fill: none; stroke: var(--soft); stroke-width: 1.6; stroke-linejoin: round; }
.green-camera .green-views button { border-color: transparent; white-space: nowrap; }
.green-camera .green-views button:hover { border-color: var(--ink); }
.green-mode button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.green-tip { max-width: 62ch; margin-top: 12px; color: var(--soft); font-size: 14px; }
/* How to play, between the lede and the game. It depends on the input, not the screen size: "right-drag"
   means nothing on a touchscreen, and a phone player needs the aim line explained
   here, since the key that explains it sits far below on a narrow screen. */
.green-tip .for-touch { display: none; }
@media (pointer: coarse) {
  .green-tip .for-touch { display: inline; }
  .green-tip .for-mouse { display: none; }
}
.green-camera button {
  height: 34px;
  min-width: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.green-camera button:hover { border-color: var(--ink); }

@media (max-width: 860px) {
  .green-camera button { height: 40px; min-width: 40px; }
  /* On a phone the camera group takes its own full-width row, buttons spread out. */
  .green-views { flex: 1 1 100%; flex-wrap: wrap; row-gap: 2px; justify-content: space-between; padding-left: 8px; }
  .green-camera .green-views button { padding: 0 8px; }
}

.green-facts { color: var(--soft); font-size: var(--small); }
.green-message { margin-top: 14px; font-size: 19px; }
.green-message:empty { display: none; } /* no gap waiting for a result */

.green-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.green-buttons button {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--small);
  cursor: pointer;
  max-width: 100%;
  overflow-wrap: anywhere;   /* a copied link shown in the button can't push the page sideways */
}
.green-buttons button:hover { border-color: var(--ink); }
.green-buttons button:disabled { cursor: progress; }
.green-buttons button.is-main,
.green-buttons button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.green-key { margin-top: 22px; color: var(--soft); font-size: var(--small); max-width: 42ch; }
.green-stats { margin-top: 12px; color: var(--soft); font-size: var(--small); }
.green-stats:empty { display: none; }

@media (max-width: 860px) {
  .green-game { grid-template-columns: 1fr; gap: 20px; }
}