/* ============================================================
   Shared score-mark + skin styles (scoring.html & scorecard.html)
   A .mark wraps a single number. Shape classes draw golf notation:
     birdie  -> circle        eagle+  -> double circle
     bogey   -> square        dbl+    -> double square
   .skin adds the green "lowest unique score" highlight.
   Colours come from each page's :root (--green etc.).
   ============================================================ */
.mark{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  min-width:1.55em; height:1.55em; padding:0 .1em; line-height:1; border-radius:6px;
}
.mark.m-birdie, .mark.m-eagle{ border:2px solid currentColor; border-radius:50%; }
.mark.m-bogey,  .mark.m-double{ border:2px solid currentColor; border-radius:5px; }
.mark.m-eagle::after{
  content:''; position:absolute; inset:-4px; border:2px solid currentColor; border-radius:50%;
}
.mark.m-double::after{
  content:''; position:absolute; inset:-4px; border:2px solid currentColor; border-radius:6px;
}
/* Skin: unique low score on the hole. Green fill, white number + white shape. */
.mark.skin{ background:var(--green,#2a6e41); color:#fff; }

/* ---- Press feedback ---- */
/* :active is unreliable on iOS; the .tapped class (added on pointerdown via
   scoring-lib.js) guarantees an obvious press is shown on every device. */
.tapped{ opacity:.55 !important; transform:scale(.96) !important; }
button:active{ transform:scale(.96); }
.group-btn:active, .team-row:active, tbody tr:active{ filter:brightness(.96); }
.card-actions a:active, .cta:active, .btn-clear-hole:active{ transform:scale(.985); }

/* ---- Shared loading overlay (spinner shown during loads/navigation) ---- */
.load-overlay{
  position:fixed; inset:0; z-index:95; display:none;
  flex-direction:column; align-items:center; justify-content:center; gap:.85rem;
  background:rgba(247,244,237,.74); -webkit-backdrop-filter:blur(1.5px); backdrop-filter:blur(1.5px);
}
.load-overlay.show{ display:flex; }
.load-overlay .load-logo{ position:relative; width:128px; height:128px; display:flex; align-items:center; justify-content:center; }
.load-overlay .load-logo img{ width:84px; height:84px; object-fit:contain; }
.load-overlay .load-ring{
  position:absolute; inset:0; border-radius:50%;
  border:5px solid rgba(15,95,138,.18); border-top-color:var(--blue-dark,#0f5f8a);
  animation:tbiSpin .9s linear infinite;
}
@keyframes tbiSpin{ to{ transform:rotate(360deg); } }
.load-overlay .load-text{
  font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:.5px;
  color:var(--blue-dark,#0f5f8a); font-size:1.05rem;
}