/* Paper, page and typography. Clean sheet: no coil, no board, no binding. */

@font-face {
  font-family: 'Excalifont';
  src: url('../assets/fonts/Excalifont-Regular.woff2?v=1.8.18') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+20-7e, U+a0-a3, U+a5-a6, U+a8-ab, U+ad-b1, U+b4, U+b6-b8,
                 U+ba-ff, U+2013-2014, U+2018-201a, U+201c-201e, U+2022, U+2026, U+2212;
}

:root {
  --desk: #eceadf;
  --paper: #f6f4ec;
  --ink: #22301f;
  --ink-soft: #57684f;
  --ink-faint: #93a18c;
  --rule: #ddd9c9;

  /* The course, in the same values the renderer uses. Kept here too so the
     legend swatches and the interface never drift from the board itself. */
  --rough: #8fb56d;
  --rough-edge: #7da35d;
  --fairway: #cfe6a2;
  --sand: #f0dda1;
  --sand-line: #dcc179;
  --water: #8cc3e0;
  --tree: #2f6b3d;
  --flag: #d63b2f;

  --gold: #d99a1d;
  --page-max: 560px;
  --radius: 18px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--desk);
  color: var(--ink);
  font-family: 'Excalifont', 'Comic Sans MS', 'Segoe Print', cursive;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  overscroll-behavior: none;   /* no rubber-banding while aiming on touch */
  /* Sky down to turf. The menus sit on a course, not on a desk. */
  background:
    radial-gradient(120% 70% at 50% -10%, #dff0f7 0%, transparent 60%),
    linear-gradient(180deg, #eef1e4 0%, #e2e9d4 55%, #d6e3c4 100%);
  background-attachment: fixed;
}

/* Mobile first: one column, the sheet takes what it can get, and the safe-area
   insets keep clear of notches and home indicators. */
.app {
  width: 100%;
  max-width: var(--page-max);
  padding: 14px 12px calc(16px + env(safe-area-inset-bottom));
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
}

.sheet {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--paper);
  border-radius: var(--radius);
  padding: 22px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 8px 22px rgba(40, 50, 35, .12), 0 1px 2px rgba(40, 50, 35, .08);
}

/* ------------------------------------------------------------------ typography */

h1, h2, h3 { font-weight: 400; margin: 0; letter-spacing: .01em; }
h1 { font-size: 2rem; line-height: 1.1; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .7em; line-height: 1.55; }

.hand-rule {
  border: 0;
  height: 1px;
  background: var(--rule);
  margin: 14px 0;
}

.tiny { font-size: .82rem; color: var(--ink-soft); }
.center { text-align: center; }
.muted { color: var(--ink-soft); }