:root {
  --panel: #161b22;
  --text: #e6edf3;
  --muted: #9aa4b2;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: radial-gradient(1000px 600px at 20% 0%, #0f141b, #0b0e12 60%, #090b0f 100%);
}

.app { max-width: 1100px; margin: 0 auto; padding: 16px; }

header { margin-bottom: 8px; }
header h1 { font-size: 22px; margin: 0 0 4px; }
header p { margin: 0; color: var(--muted); font-size: 13px; }

main { display: flex; justify-content: center; align-items: start; }

.canvas-wrap { background: var(--panel); border: 1px solid #202733; border-radius: 10px; padding: 8px; }

#court { 
  width: 100%; 
  height: 640px; 
  display: block; 
  border-radius: 8px; 
  background: #0c1911; 
  touch-action: none; /* Disable browser touch gestures */
  user-select: none; /* Prevent text selection */
  -webkit-user-select: none;
  -webkit-touch-callout: none; /* Disable iOS callout */
}


footer { margin-top: 10px; color: var(--muted); font-size: 12px; }

/* Court theme helpers for drawing */
.hint { color: var(--muted); font-size: 12px; }