/* styles.css */
* {
    box-sizing: border-box;
}
html,body,#app { height:100%; margin:0; }
#app { position:relative; }
#ui {
  position:absolute; bottom:12px; left:12px; right:12px;
  background:#fff; border-radius:12px; padding:12px 14px;
  display:grid; gap:10px; z-index:1000;
  font:14px system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  max-width:620px; box-shadow:0 6px 18px #0002;
}
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
/* .row > * { flex:0 0 auto; } */
.grow { flex:1 1 auto; min-width:120px; }
.muted { opacity:.8; }
.meta { opacity:.9; }
.stamp { opacity:.8; font-variant-numeric:tabular-nums; }
.hole-label select { padding:6px 8px; border-radius:8px; border:1px solid #e3e3e3; }
.btn, .btn-nav {
  border:1px solid #e3e3e3; background:#fafafa; border-radius:10px;
  padding:8px 10px; cursor:pointer;
}
.btn-nav { width:36px; height:36px; display:grid; place-items:center;padding:5px; font-size:16px; }
.btn:active, .btn-nav:active { transform:translateY(1px); }

/* Yardage list */
#yardageReadout { display:grid; gap:10px; }
.yrow {
  display:grid; grid-template-columns: auto 1fr auto; gap:8px 12px;
  align-items:center; padding:8px 0;
  border-top:1px solid #00000012;
}
.yrow:first-child { border-top:none; }
.ytitle { display:flex; align-items:center; gap:8px; font-weight:700; text-transform:capitalize; }
.dot { width:10px; height:10px; border-radius:50%; display:inline-block; }

/* Stat block */
.stat { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 14px; }
.stat-yd, .stat-pl { font-weight:800; font-size:1.2rem; line-height:1.2; }
.stat-yd .label, .stat-pl .label {
  font-weight:700; font-size:.78rem; opacity:.7; margin-right:4px;
  text-transform:uppercase; letter-spacing:.03em;
}
.stat-los { opacity:.85; }
.meters { display:none; } /* keep meters in DOM, hidden */
.stat-slope { font-size:.95rem; opacity:.9; }

/* Mobile: title on left, YDS/PL stacked on right, other stats underneath */
@media (max-width: 640px) {
  .yrow {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "title main"
      "sub sub";
    align-items: start;
  }
  .ytitle { grid-area: title; }
  .stat-main {
    grid-area: main;
    display: flex;
    flex-direction: column;   /* stack YDS + PL */
    align-items: flex-end;    /* on the right */
    gap: 4px;
  }
  .stat-sub {
    grid-area: sub;           /* underneath the green part */
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
}

/* Desktop: keep three columns; show slope on the right, hide sub’s extras */
@media (min-width: 641px) {
  .yrow {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "title main sub";
    align-items: center;
  }
  .ytitle { grid-area: title; }
  .stat-main {
    grid-area: main;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
  .stat-sub {
    grid-area: sub;
    justify-self: end;
  }
  .stat-sub .meters,
  .stat-sub .stat-los { display: none; } /* keep slope only on the right */
}
.inner-ui-holder {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    /* align-items: center; */
}
.inner-ui-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}