/* ===========================================================================
   THE GAME — a hole seen from above, a bag, and a throw meter. Tokens come from style.css; the disc chips, sliders and
   dialogs borrow flightguide.css. Built for a phone first: the hole on top, the controls under it.
   =========================================================================== */

.gm-page { overflow: hidden; }
.gm-page .masthead { position: relative; }
.gm {
  display: grid; grid-template-columns: minmax(0, 1fr) 420px;
  height: calc(100dvh - var(--gm-top, 66px)); min-height: 420px;
}

/* ---------- the stage ---------- */
.gm-stage { position: relative; min-height: 0; overflow: hidden; background: #0a110b; }
#gm-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
.gm-hud {
  position: absolute; left: 12px; top: 10px; display: grid; gap: 4px; pointer-events: none;
  font: 700 0.7rem/1.2 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone);
  text-shadow: 0 1px 3px #000, 0 0 8px #000;
}
.gm-hud small { font-weight: 400; color: var(--bone-dim); letter-spacing: 0.1em; }
.gm-hud b { color: var(--lime); }
.gm-wind {
  position: absolute; right: 12px; top: 10px; display: flex; align-items: center; gap: 8px; pointer-events: none;
  font: 700 0.7rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone); text-shadow: 0 1px 3px #000;
}
.gm-wind svg { width: 30px; height: 30px; fill: var(--bone); filter: drop-shadow(0 1px 2px #000); }
.gm-toast {
  position: absolute; left: 50%; top: 16%; max-width: 90%; transform: translate(-50%, 8px); opacity: 0; pointer-events: none;
  font: 400 clamp(1.8rem, 7vw, 3rem)/1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; text-align: center; color: var(--bone);
  text-shadow: 0 2px 0 #000, 0 0 18px rgba(0, 0, 0, 0.8); transition: opacity 0.2s ease, transform 0.2s ease;
}
.gm-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.gm-toast[data-tone="good"] { color: var(--lime); }
.gm-toast[data-tone="bad"] { color: var(--rust-lift); }

/* ---------- the panel ---------- */
.gm-panel {
  display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow-y: auto;
  padding: 16px 18px calc(18px + env(safe-area-inset-bottom)); background: var(--panel); border-left: 1px solid var(--hair);
}
.gm-panel > * { flex-shrink: 0; } /* a tall panel scrolls; it does not squash what is in it */
.gm-loading { margin: 0; color: var(--bone-faint); font: 0.76rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.gm-h { margin: 0; font: 700 0.66rem/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--lime); }
.gm-h span { color: var(--bone-faint); font-weight: 400; }
.gm-sub { margin: 0; color: var(--bone-dim); font-size: 0.9rem; line-height: 1.5; }
.gm-block { display: grid; gap: 10px; }
.gm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }

.gm-bagbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font: 0.7rem var(--mono); letter-spacing: 0.08em; color: var(--bone-dim); }
.gm-bagbar select {
  height: 34px; max-width: 200px; padding: 0 10px; background: var(--panel-2); color: var(--bone);
  border: 1px solid var(--hair); border-radius: var(--radius); font: 0.74rem var(--mono);
}
.gm-bagbar .chip { padding: 7px 12px; font-size: 0.68rem; }

/* the discs of your bag, in a row you can swipe */
.gm-discs { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 2px 8px; margin: 0 -2px; } /* every disc in the bag shows, in rows: nothing hides behind a sideways scroll */
.gm-more { display: none; margin: 0; text-align: center; font: 700 0.64rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--lime); }
.gm-discs.is-more + .gm-more { display: block; }
.gm-disc {
  flex: none; width: 66px; padding: 4px 0 2px; background: none; border: 0; text-align: center; cursor: pointer; scroll-snap-align: start;
  font: 0.58rem/1.2 var(--mono); letter-spacing: 0.04em; color: var(--bone-faint);
}
.gm-disc .disc { --disc: 46px; margin: 0 auto 6px; cursor: pointer; pointer-events: none; }
.gm-disc small { display: block; max-width: 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-disc[aria-pressed="true"] { color: var(--bone); }
.gm-disc[aria-pressed="true"] .disc { box-shadow: 0 0 0 3px var(--bone), 0 0 0 6px var(--lime), 0 9px 12px -6px rgba(0, 0, 0, 0.85); }
.gm-disc[disabled] { opacity: 0.3; cursor: default; }
.gm-disc[disabled] .disc { filter: grayscale(1); }
.gm-disc:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.gm-pick {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline; padding: 10px 12px;
  background: var(--void); border: 1px solid var(--hair); border-radius: var(--radius);
}
.gm-pick b { font: 700 1rem/1.2 var(--body); }
.gm-pick small { font: 0.62rem/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-faint); }
.gm-pick output { grid-row: 1 / 3; grid-column: 2; text-align: right; font: 400 1.7rem/1 var(--display); color: var(--bone); }
.gm-pick output small { display: block; font-size: 0.56rem; }

/* the settings reuse the flight guide's controls; tighten them for a small screen */
.gm-settings .fg-rng { margin: 0; padding-top: 10px; }
.gm-settings .fg-throw { margin: 0; padding-top: 10px; }
.gm-settings .fg-arm { margin: 0; padding-top: 10px; }
.gm-aimrow { display: flex; gap: 8px; align-items: center; }
.gm-aimrow .chip { padding: 6px 10px; font-size: 0.64rem; }

.gm-go {
  position: sticky; bottom: calc(-18px - env(safe-area-inset-bottom)); z-index: 3; display: grid; gap: 8px;
  margin: 4px -18px calc(-18px - env(safe-area-inset-bottom)); padding: 12px 18px calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--panel) 72%, transparent);
}
.gm-go .btn { width: 100%; padding: 17px 20px; font-size: 1.05rem; }
.gm-go__line { margin: 0; text-align: center; font: 0.64rem/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-dim); }
.gm-go__line b { color: var(--bone); }

/* ---------- the throw meter ---------- */
.gm-meter { display: grid; gap: 12px; }
.gm-meter__t { margin: 0; font: 400 2rem/1 var(--display); text-transform: uppercase; }
.gm-meter__t span { color: var(--lime); }
.gm-meter__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gm-backout { flex: none; min-height: 36px; padding: 0 12px; font-size: 0.7rem; opacity: 0.85; }
.gm-meter__h { display: grid; color: var(--bone-dim); font-size: 0.9rem; }
/* every stage's hint (and the longest one) sits in the same cell, so the box is as tall as the tallest and the Tap button never moves */
.gm-meter__h p { grid-area: 1 / 1; margin: 0; }
.gm-meter__h .is-off { visibility: hidden; }
.gm-bar {
  position: relative; height: 54px; background: var(--void); border: 1px solid var(--hair); border-radius: var(--radius); overflow: hidden; touch-action: manipulation;
}
.gm-zone { position: absolute; top: 0; bottom: 0; background: rgba(163, 230, 53, 0.28); border-inline: 2px solid var(--lime); }
.gm-hard { position: absolute; top: 0; bottom: 0; right: 0; background: repeating-linear-gradient(135deg, rgba(211, 84, 0, 0.35) 0 6px, rgba(211, 84, 0, 0.12) 6px 12px); }
.gm-tick { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--bone); opacity: 0.55; z-index: 1; }
.gm-zone--sweet { background: rgba(163, 230, 53, 0.24); border-inline-width: 1px; }
.gm-read { display: flex; justify-content: center; align-items: baseline; gap: 10px; height: 1.9rem; white-space: nowrap; overflow: hidden; color: var(--lime); }
.gm-read b { flex: none; font: 400 1.7rem/1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; }
.gm-read small { min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 0.62rem var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone-dim); }
.gm-mark { position: absolute; top: 0; bottom: 0; width: 8px; margin-left: -4px; border-radius: 4px; background: var(--bone); box-shadow: 0 0 12px rgba(238, 241, 232, 0.8); }
.gm-ends { display: flex; justify-content: space-between; margin-top: -6px; font: 0.6rem var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--bone-faint); }
.gm-tap {
  width: 100%; min-height: 96px; border: 0; border-radius: var(--radius); background: var(--rust); color: #fff;
  font: 400 2rem/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.gm-tap:active { transform: scale(0.985); filter: brightness(1.12); }
.gm-tap:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.gm-steps { display: flex; gap: 8px; font: 0.62rem var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-faint); }
.gm-steps i { flex: 1; height: 3px; border-radius: 2px; background: var(--hair); }
.gm-steps i.is-on { background: var(--lime); }

/* ---------- results ---------- */
.gm-card { display: grid; gap: 10px; padding: 16px; background: var(--void); border: 1px solid var(--hair); border-radius: var(--radius); }
.gm-card h2 { margin: 0; font-size: 2.2rem; line-height: 1; }
.gm-card h2.is-good { color: var(--lime); }
.gm-card h2.is-bad { color: var(--rust-lift); }
.gm-card p { margin: 0; color: var(--bone-dim); line-height: 1.5; font-size: 0.94rem; }
.gm-card .btn { width: 100%; padding: 16px 20px; }
.gm-score { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.gm-score div { padding: 10px 4px; border: 1px solid var(--hair); border-radius: var(--radius); }
.gm-score b { display: block; font: 400 2rem/1 var(--display); }
.gm-score span { font: 0.58rem var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone-faint); }
.gm-log { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font: 0.7rem/1.4 var(--mono); letter-spacing: 0.04em; color: var(--bone-dim); }
.gm-log b { color: var(--bone); }

/* the zoom buttons over the hole */
.gm-zoom { position: absolute; left: 10px; bottom: 10px; display: grid; gap: 6px; }
.gm-zoom button {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(238, 241, 232, 0.35); background: rgba(6, 11, 7, 0.72);
  color: var(--bone); font: 400 1.4rem/1 var(--display); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.gm-cambtn {
  position: absolute; right: 10px; bottom: 10px; z-index: 3; padding: 7px 12px; border: 1px solid rgba(163, 230, 53, 0.6); border-radius: 999px; cursor: pointer;
  background: rgba(6, 11, 7, 0.78); color: var(--lime); font: 700 0.62rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
}
.gm-cambtn--sound { right: 84px; }
.gm-cambtn--bear { right: 182px; }
.gm-stage .gm-cambtn--view { left: 12px; right: auto; top: auto; bottom: calc(var(--dock, 0px) + 12px); z-index: 1; } /* where the zoom buttons are, which are hidden while you aim in 3D */
.gm-cambtn--view[hidden] { display: none; }
.gm-cambtn--view.is-behind { opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.gm-stage.is-aim .gm-zoom { visibility: hidden; }
.gm-cambtn[aria-pressed="false"] { color: var(--bone-dim); border-color: var(--hair); }
.gm-stage.is-3d .gm-zoom, .gm-stage.is-3d .gm-bubble, .gm-stage.is-3d .gm-cambtn { visibility: hidden; }
.gm-zoom button:disabled { opacity: 0.35; cursor: default; }
.gm-zoom button:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

/* floating remarks (Marebear, the caddy) over the hole on a phone; they fade on their own */
.gm-bubble { display: none; }
/* the step tabs and the dock only exist on a phone, but are styled here so they are ready */
.gm-dock { display: grid; gap: 10px; }
.gm-dock__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gm-tabs { display: flex; gap: 5px; }
.gm-tab {
  padding: 6px 12px; border: 1px solid var(--hair); border-radius: 999px; background: none; cursor: pointer; color: var(--bone-dim);
  font: 700 0.64rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.gm-tab b { margin-right: 6px; color: var(--bone-faint); }
.gm-tab[aria-selected="true"] { background: var(--lime); border-color: var(--lime); color: #0b1000; }
.gm-tab[aria-selected="true"] b { color: #0b1000; }
.gm-tab:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.gm-dock__body { display: grid; gap: 8px; }
.gm-dock__go { display: grid; gap: 6px; }
.gm-dock__go .btn { width: 100%; padding: 14px 18px; }
.gm-dock__go .btn small { margin-left: 6px; }
@keyframes gm-bubble { 0% { opacity: 0; transform: translateY(-6px); } 6% { opacity: 1; transform: none; } 88% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 900px) {
  /* a phone: the hole fills the screen, and the controls are a dock along the bottom, one step at a time */
  .gm-page .masthead__inner { padding: 8px 0; }
  .gm-page .logo__mark { width: 28px; height: 28px; }
  .gm { display: block; position: relative; }
  .gm-stage { position: absolute; inset: 0; }
  .gm-panel {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; max-height: 66dvh; border-left: 0; border-top: 1px solid var(--hair);
    border-radius: 14px 14px 0 0; padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); gap: 8px;
    background: rgba(17, 23, 15, 0.97); box-shadow: 0 -10px 26px rgba(0, 0, 0, 0.5);
  }
  .gm-zoom { bottom: calc(var(--dock, 0px) + 12px); }
  .gm-cambtn { bottom: calc(var(--dock, 0px) + 12px); }
  .gm-bubble {
    display: block; position: absolute; left: 12px; right: 112px; top: 98px; z-index: 3; padding: 8px 11px; opacity: 0; pointer-events: none; /* right: clear of the 3D and sound chips */
    background: rgba(6, 11, 7, 0.82); border-left: 3px solid var(--rust); border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 0.8rem; line-height: 1.35; color: var(--bone);
  }
  .gm-bubble.is-on { animation: gm-bubble 6s ease forwards; }
  .gm-bubble b { color: var(--lime); }
  .gm-bubble small { display: block; margin-top: 3px; font: 700 0.54rem/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--rust-lift); }
  .gm-bubble:not(.is-on) { visibility: hidden; }
  /* the pieces of the dock, tightened */
  .gm-dock .gm-bagbar { font-size: 0.64rem; gap: 6px 10px; }
  .gm-dock .gm-bagbar > span:first-child { display: none; }
  .gm-dock .chip, .gm-dock__top .chip { padding: 6px 11px; font-size: 0.62rem; }
  .gm-dock .gm-discs { padding: 2px 2px 4px; }
  .gm-dock .gm-disc { width: 58px; }
  .gm-dock .gm-disc .disc { --disc: 38px; margin-bottom: 4px; }
  .gm-dock .gm-pick { padding: 7px 10px; }
  .gm-dock .gm-pick output { font-size: 1.35rem; }
  .gm-dock .fg-rng, .gm-dock .fg-throw { margin: 0; padding-top: 4px; }
  .gm-dock .gm-note { font-size: 0.6rem; }
  .gm-dock .gm-go__line { font-size: 0.58rem; }
  /* the throw meters */
  .gm-meter { gap: 8px; }
  .gm-backout { min-height: 40px; }
  .gm-meter__t { font-size: 1.5rem; }
  .gm-meter__h { font-size: 0.76rem; line-height: 1.3; }
  .gm-read { height: 1.5rem; }
  .gm-read b { font-size: 1.35rem; }
  .gm-bar { height: 44px; }
  .gm-tap { min-height: 64px; font-size: 1.6rem; }
  .gm-meter .gm-putt { width: min(100%, 250px, 30dvh); }
  .gm-meter--putt .gm-meter__h { font-size: 0.72rem; }
  .gm-card h2 { font-size: 1.6rem; }
}
@media (max-width: 900px) and (max-height: 700px) { .gm-panel { max-height: 72dvh; } }
@media (prefers-reduced-motion: reduce) { .gm-toast { transition: none; } }


.gm-tip { position: relative; padding: 12px 36px 12px 14px; background: rgba(163, 230, 53, 0.08); border: 1px solid rgba(163, 230, 53, 0.35); border-radius: var(--radius); }
.gm-tip p { margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--bone-dim); }
.gm-tip b { color: var(--bone); }
.gm-tip button { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: var(--bone-dim); font-size: 1.1rem; cursor: pointer; }
.gm-tip button:hover { color: var(--lime); }

.gm-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gm-menu .btn { display: grid; gap: 4px; padding: 18px 12px; }
.btn small, .gm-card .btn small { display: block; margin-top: 3px; font: 400 0.6rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; }
.gm-practice { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; flex: 1 1 240px; min-width: 0; }
.gm-practice select { min-width: 160px; }
.gm-practice select, .gm-row select { flex: 1; min-width: 0; height: 36px; padding: 0 8px; background: var(--panel-2); color: var(--bone); border: 1px solid var(--hair); border-radius: var(--radius); font: 0.72rem var(--mono); }
.gm-roundbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 0.66rem/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone-dim); }
.gm-roundbar b { color: var(--lime); }
.gm-roundbar .chip { padding: 6px 12px; font-size: 0.62rem; }
.gm-quip { margin: 0; padding: 8px 10px; border-left: 3px solid var(--rust); background: var(--void); font-size: 0.86rem; line-height: 1.4; font-style: italic; color: var(--bone); }
.gm-quip small { display: block; margin-top: 3px; font: 700 0.56rem/1 var(--mono); font-style: normal; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rust-lift); }
.gm-caddy { margin: 0; padding: 8px 10px; border-left: 3px solid var(--lime); background: var(--void); font-size: 0.82rem; line-height: 1.4; color: var(--bone-dim); }
.gm-caddy b { color: var(--bone); }
.gm-card-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: var(--radius); overflow: hidden; }
.gm-card-list li { display: grid; grid-template-columns: 1fr auto 34px; gap: 10px; padding: 8px 10px; background: var(--void); font: 0.7rem/1.3 var(--mono); letter-spacing: 0.04em; color: var(--bone-dim); }
.gm-card-list li b { text-align: right; color: var(--bone); }
.gm-card-list li.is-under b { color: var(--lime); }
.gm-card-list li.is-over b { color: var(--rust-lift); }
.gm-card .btn--ghost { background: transparent; border: 1px solid var(--hair); color: var(--bone); }

.gm-putt { display: block; width: min(100%, 280px, 36dvh); aspect-ratio: 1; margin: 0 auto; border-radius: 50%; touch-action: manipulation; cursor: pointer; }

/* ---------- head to head ---------- */
.gm-note { margin: 0; font: 0.64rem/1.5 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone-faint); }
.gm-error { margin: 0; padding: 10px 12px; border: 1px solid var(--rust); border-radius: var(--radius); font: 0.74rem/1.5 var(--mono); color: var(--rust-lift); }
.gm-field { display: grid; gap: 6px; }
.gm-field input, .gm-code-in, .gm-link {
  width: 100%; height: 42px; padding: 0 12px; background: var(--panel-2); color: var(--bone);
  border: 1px solid var(--hair); border-radius: var(--radius); font: 0.84rem var(--mono); outline: none;
}
.gm-field input:focus, .gm-code-in:focus, .gm-link:focus { border-color: var(--lime); }
.gm-code-in { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 0.3em; font-weight: 700; }
.gm-code { padding: 14px; text-align: center; font: 700 2.2rem/1 var(--mono); letter-spacing: 0.4em; padding-left: 0.4em; color: var(--lime); border: 1px dashed var(--hair); border-radius: var(--radius); background: var(--panel-2); user-select: all; }
.gm-link { font-size: 0.7rem; }
.gm-matches { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: var(--radius); overflow: hidden; }
.gm-matches li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: var(--void); font: 0.78rem/1.3 var(--body); }
.gm-matches small { display: block; margin-top: 3px; font: 0.6rem/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-faint); }
.gm-matches b { color: var(--lime); }
.gm-matches .chip { padding: 7px 12px; font-size: 0.64rem; }

.gm-board, .gm-vs-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: var(--radius); overflow: hidden; }
.gm-board li { display: grid; grid-template-columns: 1fr 76px 38px 52px; gap: 8px; padding: 9px 10px; background: var(--void); font: 0.7rem/1.3 var(--mono); letter-spacing: 0.04em; color: var(--bone-dim); }
.gm-board li b { text-align: center; color: var(--bone); }
.gm-board li span:nth-child(n+2) { text-align: right; }
.gm-board__h { font-size: 0.56rem !important; letter-spacing: 0.16em !important; text-transform: uppercase; color: var(--bone-faint) !important; }
.gm-board .is-me span:first-child { color: var(--lime); }
.gm-board .is-them span:first-child { color: var(--bone); }
.gm-board .is-left, .gm-vs-list .is-left { opacity: 0.5; }
.gm-boardbar {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; background: var(--void); border: 1px solid var(--hair);
  border-radius: var(--radius); color: var(--bone-dim); font: 700 0.62rem/1.2 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; text-align: left;
}
.gm-boardbar em { margin-left: auto; font-style: normal; font-weight: 400; letter-spacing: 0.06em; color: var(--lime); }
.gm-boardbar i { font-style: normal; width: 1em; text-align: center; color: var(--bone); }
.gm-boardbar:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.gm-dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--pc, var(--bone)); }
.gm-seats { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: var(--radius); overflow: hidden; }
.gm-seats li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; background: var(--void); font: 0.74rem/1.3 var(--mono); color: var(--bone-dim); }
.gm-seats li.is-me span { color: var(--lime); }
.gm-seats small { font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-faint); }
.gm-board .is-turn { box-shadow: inset 3px 0 0 var(--lime); background: rgba(163, 230, 53, 0.06); }
.gm-vs-list li { display: grid; grid-template-columns: 1fr auto 34px; gap: 10px; padding: 9px 10px; background: var(--void); font: 0.72rem/1.3 var(--mono); color: var(--bone-dim); }
.gm-vs-list li b { text-align: right; color: var(--bone); }
.gm-vs-list .is-me span:first-child { color: var(--lime); }
.gm-vs-list--card li { grid-template-columns: 1fr auto 40px 40px; }
.gm-vs-list__h { font-size: 0.56rem !important; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone-faint) !important; }
.gm-vs-list .is-under { color: var(--lime); }

.gm-check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.8rem; line-height: 1.4; color: var(--bone-dim); cursor: pointer; }
.gm-check input { margin-top: 3px; accent-color: var(--lime); }

/* Marebear's bet, the throw to watch again, and the boards */
.gm-bet { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid rgba(212, 18, 42, 0.5); border-left-width: 4px; border-radius: var(--radius); background: rgba(212, 18, 42, 0.08); }
.gm-bet p { margin: 0; font-size: 0.86rem; line-height: 1.4; color: var(--bone); }
.gm-bet small { display: block; margin-top: 3px; font: 0.62rem/1.4 var(--mono); letter-spacing: 0.06em; color: var(--bone-dim); }
.gm-bet__go { display: flex; gap: 8px; }
.gm-bet-on { color: var(--rust-lift); }
.gm-replay { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.gm-board li small, .gm-standings li small { display: block; font: 0.6rem/1.3 var(--mono); letter-spacing: 0.06em; color: var(--bone-faint); }

.gm-swatch { display: inline-block; width: 12px; height: 12px; margin-right: 8px; border-radius: 50%; background: var(--c); border: 1px solid rgba(255,255,255,0.5); vertical-align: -1px; }

/* ---------- on a phone: touch, targets, room ---------- */
.gm-page { overscroll-behavior: none; }
.gm-panel { touch-action: manipulation; overscroll-behavior: contain; }
.gm-stage, .gm-panel button, .gm-panel .gm-bar { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.gm-hud { left: max(12px, env(safe-area-inset-left)); }
.gm-wind { right: max(12px, env(safe-area-inset-right)); }
.gm-bet--tight { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; }
.gm-bet--tight p { font-size: 0.84rem; }
.gm-bet--tight small { display: inline; margin: 0 0 0 6px; font-size: 0.7rem; }

@media (max-width: 900px) {
  .gm-panel { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  /* fingers: every control at least 40px tall */
  .gm-dock .chip, .gm-dock__top .chip, .gm-bet .chip, .gm-roundbar .chip, .gm-matches .chip, .gm-replay .chip, .gm-card .chip { min-height: 40px; padding: 8px 14px; font-size: 0.7rem; }
  .gm-tab { min-height: 40px; padding: 8px 9px; font-size: 0.66rem; letter-spacing: 0.05em; }
  .gm-aimrow .chip { min-height: 40px; min-width: 40px; }
  /* words you have to read: not tiny */
  .gm-note, .gm-dock .gm-note { font-size: 0.72rem; line-height: 1.45; }
  .gm-card .btn small, .gm-dock .btn small { line-height: 1.4; }
  .gm-dock .gm-go__line { font-size: 0.66rem; }
  /* the site's header steps aside while you play, and the floating notes move up with it */
  .gm-page.gm-playing .masthead { display: none; }
  .gm-page.gm-playing .gm-bubble { top: 116px; }
  .gm-stage.is-tight .gm-zoom { display: none; }
  .gm-hud { max-width: calc(100% - 124px); }
  /* the 3D and sound chips ride at the top right, under the wind, out of the hole's way */
  .gm-cambtn { bottom: auto; top: 58px; right: max(10px, env(safe-area-inset-right)); }
  .gm-cambtn--sound { top: 94px; right: max(10px, env(safe-area-inset-right)); }
  .gm-cambtn--bear { top: 130px; right: max(10px, env(safe-area-inset-right)); }
  .gm-stage .gm-cambtn--view { left: auto; bottom: auto; top: 166px; right: max(10px, env(safe-area-inset-right)); } /* on a phone it joins the chips down the right, well clear of where Marebear's balloon sits low on the screen */
  .gm-cambtn--view.is-behind { opacity: 1; pointer-events: auto; } /* (so it need not hide while she talks) */
  /* screens you read rather than play on: tall, with a peek of the hole above */
  .gm-panel[data-phase="menu"], .gm-panel[data-phase="lobby"], .gm-panel[data-phase="daily"], .gm-panel[data-phase="standings"], .gm-panel[data-phase="trophies"],
  .gm-panel[data-phase="summary"], .gm-panel[data-phase="mdone"], .gm-panel[data-phase="mwait"], .gm-panel[data-phase="mhole"], .gm-panel[data-phase="done"] { max-height: calc(100% - 56px); }
}

/* a phone held sideways: the hole on the left, the controls in a column on the right */
@media (max-width: 900px) and (max-height: 520px) {
  .gm-page .masthead { display: none; }
  .gm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 46%); height: 100dvh; min-height: 0; }
  .gm-stage { position: relative; inset: auto; }
  .gm-panel, .gm-panel[data-phase] {
    position: relative; max-height: none; height: 100%; border-radius: 0; border-top: 0; border-left: 1px solid var(--hair); box-shadow: none;
    padding: 8px max(12px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) 12px;
  }
  .gm-zoom { bottom: 10px; }
  .gm-cambtn { top: 50px; }
  .gm-cambtn--sound { top: 84px; }
  .gm-cambtn--bear { top: 118px; }
  .gm-stage .gm-cambtn--view { top: 152px; }
  .gm-hud { font-size: 0.6rem; gap: 2px; }
  .gm-page.gm-playing .gm-bubble { top: 70px; }
  .gm-tap { min-height: 52px; font-size: 1.4rem; }
  .gm-bar { height: 38px; }
  .gm-meter { gap: 6px; }
  .gm-meter .gm-putt { width: min(100%, 170px, 44dvh); }
  .gm-card h2 { font-size: 1.4rem; }
}

@media (max-width: 900px) {
  .gm-panel { overflow-x: hidden; }
  .gm-dock, .gm-dock__body, .gm-dock__top { min-width: 0; }
  .gm-dock__top { gap: 6px; }
  .gm-tabs { gap: 4px; min-width: 0; }
}
@media (max-width: 380px) {
  .gm-tab { padding: 8px 7px; font-size: 0.6rem; letter-spacing: 0.04em; }
  .gm-tab b { margin-right: 3px; }
  .gm-dock .chip, .gm-dock__top .chip { padding: 8px 10px; }
  .gm-bet--tight p { font-size: 0.78rem; }
}

@media (max-width: 900px) {
  /* in the dock the rows are capped to about two and a half, so the next row peeks out and the bag scrolls up and down */
  .gm-dock .gm-discs { max-height: 168px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; justify-content: flex-start; }
  .gm-dock .gm-discs.is-more { -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
}
@media (max-width: 900px) and (max-height: 520px) { .gm-dock .gm-discs { max-height: 120px; } }

/* the strip that says what the keys or the controller do */
.gm-keys {
  position: absolute; left: 50%; bottom: calc(var(--dock, 0px) + 12px); transform: translateX(-50%); z-index: 3; max-width: 92%; padding: 7px 14px; border-radius: 999px;
  background: rgba(6, 11, 7, 0.82); border: 1px solid rgba(163, 230, 53, 0.45); color: var(--bone); white-space: nowrap; pointer-events: none;
  font: 700 0.66rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
}
.gm-keys[hidden] { display: none; }

/* the course cards on the menu and in the match lobby */
.gm-courses { display: grid; gap: 8px; margin: 4px 0 6px; }
.gm-course {
  display: grid; gap: 2px; text-align: left; padding: 10px 12px; border-radius: var(--radius); cursor: pointer;
  border: 1px solid var(--hair); background: rgba(255, 255, 255, 0.03); color: var(--bone);
}
.gm-course b { font: 400 1.15rem/1.1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; }
.gm-course small { font: 0.78rem/1.3 var(--body, inherit); color: var(--bone-dim); }
.gm-course span { font: 0.62rem var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-faint); }
.gm-course[aria-pressed="true"] { border-color: var(--lime); background: rgba(163, 230, 53, 0.08); }
.gm-course[aria-pressed="true"] b { color: var(--lime); }
.gm-course:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }

/* the planned flight: three slim rows (label, slider, value), kept in the always-visible block beside the Throw button */
.gm-plan { display: grid; gap: 2px; }
.gm-plan .fg-rng { display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: 6px; margin: 0; padding: 2px 0; border-top: 0; }
.gm-plan .fg-rng__top { display: contents; }
.gm-plan .fg-rng__top .fg-wind__l { order: 1; font-size: 0.6rem; }
.gm-plan .fg-rng__bar { order: 2; margin: 0; min-width: 0; }
.gm-plan .fg-rng__top output { order: 3; margin: 0; min-width: 96px; font-size: 0.72rem; text-align: right; white-space: nowrap; }
.gm-plan .fg-rng__bar button { min-width: 34px; min-height: 34px; }
.gm-go .gm-plan { margin-bottom: 8px; }
.gm-go--plan { background: var(--panel); border-top: 1px solid var(--hair); }
@media (max-width: 900px) {
  .gm-plan .fg-rng { grid-template-columns: 62px 1fr auto; }
  .gm-plan .fg-rng__top output { min-width: 84px; font-size: 0.68rem; }
  .gm-plan .fg-rng__bar button { min-width: 40px; min-height: 40px; }
}

/* ---------- the meters style: the timing window over the 3D view ---------- */
.gm-mini { position: absolute; left: 0; right: 0; margin: 0 auto; bottom: calc(var(--dock, 0px) + 52px); z-index: 3; width: min(470px, calc(100% - 24px)); } /* (no transform here: a transformed parent would stop the Tap button being pinned to the screen) */
.gm-mini__box {
  display: grid; gap: 8px; padding: 10px 12px 12px; border: 1px solid var(--hair); border-radius: 14px;
  background: rgba(17, 23, 15, 0.94); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}
.gm-mini.is-fresh .gm-mini__box { animation: gm-mini-in 0.18s ease-out; }
@keyframes gm-mini-in { from { opacity: 0; } to { opacity: 1; } }
.gm-mini__t { margin: 0; min-height: 2.7em; display: flex; align-items: center; justify-content: center; font: 700 0.66rem/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-dim); text-align: center; } /* two lines tall whatever it says, so the Tap button never moves between stages */
.gm-dials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gm-dialcell { display: grid; justify-items: center; gap: 2px; padding: 6px 4px 4px; border: 1px solid var(--hair); border-radius: 10px; background: var(--void); transition: opacity 0.15s; }
.gm-dial { width: 100%; max-width: 132px; aspect-ratio: 1; display: block; }
.gm-dialcell__l { font: 700 0.62rem var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-dim); }
.gm-dialcell output { min-height: 1em; font: 700 0.6rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--lime); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.gm-dialcell.is-wait { opacity: 0.45; }
.gm-dialcell.is-on { border-color: var(--lime); box-shadow: 0 0 0 1px var(--lime), 0 0 14px rgba(163, 230, 53, 0.25); }
.gm-dialcell.is-on .gm-dialcell__l { color: var(--bone); }
.gm-tap--mini { min-height: 52px; font-size: 1.4rem; }
@media (max-width: 900px) {
  .gm-mini { bottom: calc(var(--dock, 0px) + 12px); }
  .gm-dial { max-width: 104px; }
  .gm-tap--mini { min-height: 48px; font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) { .gm-mini__box { animation: none; } }

/* the readout of the push stage, on a phone, sits in the title row between the title and Back out (so nothing is under the Tap button) */
.gm-meter__top .gm-read { flex: 1; min-width: 0; height: auto; justify-content: flex-end; flex-direction: column; align-items: flex-end; gap: 2px; }
.gm-meter__top .gm-read b { font-size: 1.15rem; }
.gm-meter__top .gm-read small { font-size: 0.56rem; }

/* The main button of every screen that has one (Throw, the next step, Tap, Putt, Next throw, Next hole...) is lifted out of the panel into a layer of its own pinned to the very
   bottom centre of the screen, on a phone and on a computer, so a thumb or a mouse always finds it in the same place whatever is written above it. The panel leaves room (.has-fab). */
.gm-fabhost { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40; display: grid; }
.gm-fabhost:empty { display: none; }
.gm-fabhost .gm-fab {
  width: min(88vw, 340px); min-height: 60px; height: auto; padding: 8px 16px; font-size: 1.45rem; line-height: 1.1; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.gm-fabhost .gm-fab small { font-size: 0.7rem; }
.gm-panel.has-fab { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }

/* the Throw button is pinned to the corner now, so the line under it is plain text in the flow, not a sticky bar over the controls */
.gm-go { position: static; margin: 0; padding: 0; background: none; }

/* On a computer the middle of the bottom of the screen is over the stage, where the chips (Marebear, Sound, 3D) and the timing window sit: they step up out of the way. */
@media (min-width: 901px) {
  .gm-stage .gm-cambtn:not(.gm-cambtn--view) { bottom: 84px; }
  .gm-mini { bottom: 132px; }
}

/* a throw that cannot be made (the marker is red) cannot be started */
.gm-fabhost .gm-fab:disabled { background: #8a1f1f; color: #ffd9d6; opacity: 0.85; cursor: not-allowed; }

/* ---------- music: play, skip, volume and a drop-up of vibes, under the main button ---------- */
.gm-music { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 41; width: min(88vw, 340px); }
.gm-music__bar { display: flex; align-items: center; gap: 4px; height: 38px; padding: 0 6px 0 4px; background: rgba(17, 23, 15, 0.94); border: 1px solid var(--hair); border-radius: 999px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); }
.gm-mbtn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 30px; min-width: 30px; padding: 0 7px; border: 0; border-radius: 999px; background: transparent; color: var(--bone); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; font: 700 0.6rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.gm-mbtn svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.gm-mbtn:hover, .gm-mbtn:focus-visible { background: rgba(238, 241, 232, 0.12); outline: none; }
.gm-mbtn--vibe { flex: 1; min-width: 0; justify-content: flex-start; color: var(--lime); }
.gm-mbtn--vibe span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-mbtn--vibe svg { fill: none; }
.gm-mbtn--vibe i { font-style: normal; color: var(--bone-dim); }
.gm-music.is-open .gm-mbtn--vibe i { transform: rotate(180deg); }
.gm-music.is-on .gm-mbtn[data-m="play"] { color: var(--lime); }
.gm-mbtn.is-stuck { color: var(--rust-lift); animation: gm-pulse 1s ease-in-out infinite; }
@keyframes gm-pulse { 50% { opacity: 0.45; } }
.gm-mvol { width: 64px; flex: none; accent-color: var(--lime); height: 30px; margin: 0 2px; cursor: pointer; touch-action: manipulation; }
.gm-music__drawer { position: absolute; left: 0; right: 0; bottom: 46px; max-height: min(60vh, 420px); overflow-y: auto; padding: 10px; background: rgba(17, 23, 15, 0.97); border: 1px solid var(--hair); border-radius: 14px; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.6); }
.gm-music__h { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 700 0.64rem var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--lime); white-space: nowrap; }
.gm-music__q { flex: 1; min-width: 0; height: 28px; padding: 0 10px; border: 1px solid var(--hair); border-radius: 999px; background: var(--void); color: var(--bone); font: 0.66rem var(--mono); letter-spacing: 0.04em; text-transform: none; }
.gm-music__q::placeholder { color: var(--bone-faint); }
.gm-music__q:focus { outline: none; border-color: var(--lime); }
@media (max-width: 900px) { .gm-music__q { font-size: 16px; height: 32px; } } /* (16px: a phone will not zoom the page when it is tapped) */
.gm-music__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.gm-vibe { display: grid; gap: 1px; text-align: left; padding: 8px 10px; border: 1px solid var(--hair); border-radius: 10px; background: var(--void); color: var(--bone); cursor: pointer; touch-action: manipulation; }
.gm-vibe b { font: 400 1.05rem/1.1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; }
.gm-vibe small { font: 0.58rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone-faint); }
.gm-vibe[aria-pressed="true"] { border-color: var(--lime); box-shadow: 0 0 0 1px var(--lime); }
.gm-vibe[aria-pressed="true"] b { color: var(--lime); }
.gm-music__now { min-height: 1em; margin: 8px 0 0; font: 0.62rem/1.4 var(--mono); letter-spacing: 0.04em; color: var(--bone-dim); }
.gm-music__yt { position: fixed; left: 0; bottom: 0; width: 200px; height: 200px; opacity: 0.001; pointer-events: none; z-index: -1; overflow: hidden; } /* (the YouTube player: it has to be on the page to play, and is not shown) */
/* the main button sits above the music bar, and the panel leaves room for both */
.gm-fabhost { bottom: calc(54px + env(safe-area-inset-bottom)); }
.gm-panel { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
.gm-panel.has-fab { padding-bottom: calc(134px + env(safe-area-inset-bottom)); }
@media (min-width: 901px) {
  .gm-stage .gm-cambtn:not(.gm-cambtn--view) { bottom: 124px; }
  .gm-mini { bottom: 172px; }
}

/* the drop from the woods, in the pick panel's note */
.gm-woods .chip { margin: 2px 4px 2px 0; border-color: var(--rust); color: var(--rust-lift); }

/* ---------- the phone, tightened (the hole is nearly the whole screen; the controls are small and low) ---------- */
.gm-chips { display: contents; } /* (on a computer the chips are placed one by one, as ever) */
@media (max-width: 900px) {
  :root { --gm-sb: calc(env(safe-area-inset-bottom, 0px) * 0.25); } /* (the music bar goes nearly to the edge of the glass: only a sliver is kept for the phone's home bar) */
  /* the four chips: one slim row under the title, not a column down the side */
  .gm-chips { position: absolute; z-index: 3; left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); top: 42px; display: flex; gap: 4px; flex-wrap: nowrap; justify-content: flex-start; }
  .gm-chips .gm-cambtn, .gm-chips .gm-stage .gm-cambtn--view, .gm-stage .gm-chips .gm-cambtn--view { position: static; top: auto; right: auto; bottom: auto; left: auto; min-height: 0; padding: 4px 8px; font-size: 0.5rem; letter-spacing: 0.1em; }
  .gm-stage .gm-chips .gm-cambtn { visibility: visible; }
  .gm-stage.is-3d .gm-chips .gm-cambtn { visibility: hidden; }
  /* the title over the hole: two short lines */
  .gm-hud { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; row-gap: 1px; max-width: calc(100% - 84px); font-size: 0.54rem; letter-spacing: 0.1em; top: 8px; }
  .gm-hud small { font-size: 0.5rem; letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gm-wind { top: 6px; transform: scale(0.8); transform-origin: top right; }
  .gm-zoom { bottom: calc(var(--dock, 0px) + 8px); gap: 4px; }
  .gm-zoom button { width: 30px; height: 30px; font-size: 1.1rem; }
  /* the dock: a slim strip of controls, a little see-through, with the main button and the music below it */
  .gm-panel { padding-top: 6px; padding-bottom: calc(44px + var(--gm-sb)); gap: 6px; background: rgba(17, 23, 15, 0.88); border-radius: 12px 12px 0 0; }
  .gm-panel.has-fab { padding-bottom: calc(84px + var(--gm-sb)); }
  .gm-dock { gap: 6px; }
  .gm-dock__body { gap: 5px; }
  .gm-dock .chip, .gm-dock__top .chip, .gm-roundbar .chip, .gm-card .chip { min-height: 26px; padding: 4px 10px; font-size: 0.56rem; }
  /* the step pills (1 Disc, 2 Grip, 3 Aim) */
  .gm-tab { min-height: 24px; padding: 4px 9px; font-size: 0.54rem; letter-spacing: 0.06em; }
  .gm-tab b { margin-right: 3px; }
  /* the bag: one row of small discs, scrolling sideways */
  .gm-dock .gm-discs { display: flex; flex-wrap: nowrap; gap: 6px; max-height: none; overflow-x: auto; overflow-y: hidden; padding: 2px 0 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .gm-dock .gm-discs::-webkit-scrollbar { display: none; }
  .gm-dock .gm-discs.is-more { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .gm-dock .gm-disc { width: 40px; flex: none; }
  .gm-dock .gm-disc .disc { --disc: 32px; margin-bottom: 0; }
  .gm-dock .gm-disc small, .gm-more { display: none; }
  /* the disc's name on one line, the wind beside it; the rest of the words stay off the screen */
  .gm-dock .gm-pick { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 2px 4px; border: 0; background: none; }
  .gm-dock .gm-pick b { font-size: 0.9rem; }
  .gm-dock .gm-pick > small { display: none; }
  .gm-dock .gm-pick output { font-size: 0.8rem; }
  .gm-dock .gm-pick output small { display: inline; margin-left: 4px; font-size: 0.5rem; }
  .gm-dock .gm-note:not(.gm-woods), .gm-tip, .gm-caddy, .gm-quip, .gm-dock .gm-go__line { display: none; }
  .gm-dock .gm-woods { font-size: 0.62rem; margin: 0; }
  .gm-dock .fg-rng, .gm-dock .fg-throw { padding-top: 0; gap: 4px; }
  .gm-dock .fg-seg .chip { min-height: 28px; }
  .gm-bubble { top: 76px; font-size: 0.66rem; line-height: 1.3; padding: 5px 8px; right: 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .gm-page.gm-playing .gm-bubble { top: 76px; }
  /* the throw stages: a thin dock (steps, a small Back out), words off, the meters do the talking */
  .gm-meter { gap: 4px; }
  .gm-meter__t { font-size: 0.95rem; }
  .gm-meter__h { display: none; }
  .gm-steps i { height: 2px; }
  .gm-backout { min-height: 26px; padding: 3px 10px; font-size: 0.54rem; }
  .gm-read { height: auto; min-height: 1.2rem; }
  .gm-read b { font-size: 1.05rem; }
  .gm-read small { font-size: 0.5rem; }
  .gm-card { gap: 6px; }
  .gm-card h2 { font-size: 1.15rem; }
  .gm-card p { font-size: 0.74rem; line-height: 1.35; margin: 0; }
  /* the main button: smaller, just above the music */
  .gm-fabhost { bottom: calc(38px + var(--gm-sb)); }
  .gm-fabhost .gm-fab { width: min(64vw, 240px); min-height: 40px; padding: 4px 14px; font-size: 1.05rem; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55); }
  .gm-fabhost .gm-fab small { font-size: 0.55rem; }
  /* the music: a slim bar on the very bottom edge of the screen, the full width */
  .gm-music { left: 0; right: 0; transform: none; width: auto; bottom: 0; }
  .gm-music__bar { height: 34px; padding: 0 10px var(--gm-sb); border-radius: 0; border-width: 1px 0 0; box-sizing: content-box; background: rgba(10, 15, 9, 0.96); box-shadow: none; }
  .gm-music__drawer { bottom: calc(36px + var(--gm-sb)); left: 6px; right: 6px; border-radius: 12px; }
  /* the timing window: small dials */
  .gm-mini { bottom: calc(var(--dock, 0px) + 6px); }
  .gm-mini__box { padding: 6px 8px 8px; gap: 5px; border-radius: 12px; }
  .gm-mini__t { font-size: 0.54rem; min-height: 2.2em; }
  .gm-dials { gap: 5px; }
  .gm-dialcell { padding: 3px 3px 2px; }
  .gm-dial { max-width: 70px; }
  .gm-dialcell__l { font-size: 0.5rem; }
  .gm-dialcell output { font-size: 0.5rem; }
  /* screens you read: leave room for the music only */
  .gm-card .btn, .gm-menu .btn { padding-top: 12px; padding-bottom: 12px; }
}
/* sideways on a phone: the main button sits in the controls' column, the music still runs along the bottom */
@media (max-width: 900px) and (max-height: 520px) {
  .gm-fabhost { left: auto; right: max(150px, 23%); transform: translateX(50%); bottom: calc(40px + var(--gm-sb)); }
  .gm-fabhost .gm-fab { width: min(240px, 40vw); }
  .gm-panel, .gm-panel.has-fab { padding-bottom: calc(86px + var(--gm-sb)); }
  .gm-chips { top: 40px; }
}

/* ---------- the shared quick-play page (/play): no site header, a fixed bag ---------- */
.gm-quick { --gm-top: 0px; }
.gm-quickbag { list-style: none; margin: 4px 0 2px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; }
.gm-quickbag li { display: flex; align-items: center; gap: 8px; min-width: 0; font: 700 0.9rem/1.1 var(--body, inherit); color: var(--bone); }
.gm-quickbag .disc { --disc: 34px; flex: none; }
.gm-quickbag span { display: grid; gap: 1px; min-width: 0; }
.gm-quickbag small { font: 0.56rem/1.2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--bone-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the "playing now" footnote, bottom right */
.gm-online { position: fixed; right: 10px; bottom: 5px; z-index: 39; pointer-events: none; font: 700 0.5rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-faint, rgba(238, 241, 232, 0.4)); text-shadow: 0 1px 2px #000; white-space: nowrap; }
.gm-online[hidden] { display: none; }
@media (max-width: 900px) {
  .gm-online { right: 8px; bottom: calc(36px + var(--gm-sb, 0px)); font-size: 0.46rem; }
}