/* The scorecard at /score. It is used outdoors on a phone, one hand, in sun, so it is always the dark forest
   look with big targets, whatever the phone's own theme. Builds on site.css (fonts, .btn, .board, .eyebrow). */

[hidden] { display: none !important; }

/* A hole in one is the one score that should jump off the card: plain yellow, not the site's sunset orange. */
:root { --ace: #ffd84a; --paper: #fbf6ea; --ink: #1a2420; --rule: #d9cfbb; --birdie-ink: #3f6b33; }

body.sc { background: var(--forest-900); color: #fff8e8; min-height: 100svh; }
.sc .eyebrow { color: var(--sun); }

.sc-bar {
  display: flex; align-items: center; gap: 1rem;
  padding: max(.9rem, env(safe-area-inset-top)) var(--gutter) .9rem;
  background: var(--forest-950); border-bottom: 1px solid rgba(255, 248, 232, .1);
}
.sc-bar .brand { color: #fff8e8; font-size: 1.2rem; }
.sc-bar .mark { width: 2rem; height: 2rem; }
.sc-bar-label { margin-left: auto; font: 700 .8rem/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--sun); }

.sc-main { width: min(100% - 2 * var(--gutter), 34rem); margin: 0 auto; padding: 1.75rem 0 max(3rem, env(safe-area-inset-bottom)); }
.sc h1 { font-size: clamp(2.6rem, 11vw, 3.6rem); line-height: .95; }
.sc h2 { font-size: 2rem; }
.sc-lede { margin-top: .75rem; color: rgba(255, 248, 232, .8); }
.sc-msg { min-height: 1.4em; margin-top: .9rem; font-weight: 600; color: var(--sun); }
.sc-msg.bad { color: #ff9b7a; }
.sc-go { width: 100%; min-height: 3.5rem; font-size: 1.1rem; margin-top: .5rem; }
.sc .btn:disabled { opacity: .55; transform: none; cursor: default; }

/* A quieter pill for the secondary actions: same shape as .btn, no fill. */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 3rem; padding: .7rem 1.3rem; border-radius: 999px;
  font: 700 1rem/1 var(--body); cursor: pointer;
  background: transparent; color: #fff8e8; border: 2px solid rgba(255, 248, 232, .35);
}
@media (hover: hover) { .pill:hover { border-color: #fff8e8; } }
.pill:focus-visible, .step:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.pill.armed { border-color: #ff9b7a; color: #ff9b7a; }

/* ---------- Who's playing ---------- */
.roster { list-style: none; margin: 1.5rem 0 1rem; padding: 0; display: grid; gap: .75rem; }
.roster li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .5rem .75rem; align-items: center;
  padding: .85rem; border-radius: var(--radius); background: var(--forest-800); border: 1px solid rgba(255, 248, 232, .08);
}
.roster .dot { grid-row: span 2; }
.roster input {
  width: 100%; min-width: 0; min-height: 2.9rem; padding: .55rem .85rem;
  border-radius: 10px; border: 1px solid rgba(255, 248, 232, .2); background: var(--forest-950); color: #fff8e8;
  font: 600 1.05rem/1.2 var(--body);
}
.roster input[type="email"] { font-weight: 400; font-size: 1rem; }
.roster input::placeholder { color: rgba(255, 248, 232, .45); }
.roster input:focus { outline: 2px solid var(--sun); outline-offset: 1px; border-color: transparent; }
.roster .remove { grid-row: span 2; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; background: transparent; color: rgba(255, 248, 232, .6); font-size: 1.6rem; cursor: pointer; }
.dot { width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; font: 900 1.05rem/1 var(--display); color: var(--forest-950); flex: none; }

/* ---------- On the hole ---------- */
.dots { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.dots li { width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; font: 800 1rem/1 var(--display); background: var(--forest-800); color: rgba(255, 248, 232, .55); border: 2px solid transparent; }
.dots li.done { background: var(--forest-700); color: #fff8e8; }
.dots li.now { border-color: var(--sun); color: var(--sun); }
.dots li.gap { width: .6rem; background: none; }

.sc-board { display: grid; grid-template-columns: auto 1fr; column-gap: 1.25rem; align-items: end; padding: 1.4rem 1.5rem 1.4rem; }
.sc-board .hole-label { grid-column: 1; }
.sc-board .hole-num { grid-column: 1; font-size: 5rem; }
.sc-board { grid-template-columns: auto 1fr auto; }
.sc-board dl { grid-column: 2; grid-row: 1 / span 2; justify-self: start; margin: 0 0 .5rem; gap: 1.1rem; }
/* The hole's map, small on the right of the board; tapped, it opens across the board. */
.map-btn { grid-column: 3; grid-row: 1 / span 2; align-self: center; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 7px; }
.map-btn img { display: block; width: 4.6rem; height: auto; border-radius: 7px; box-shadow: 0 0 0 2px rgba(43, 29, 17, .6); }
.map-btn:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.sc-board.map-open .map-btn { grid-column: 1 / -1; grid-row: 3; margin-top: 1rem; cursor: zoom-out; }
.sc-board.map-open .map-btn img { width: 100%; }

.players { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .65rem; }
.players li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem; align-items: center;
  padding: .7rem .7rem .7rem .9rem; border-radius: var(--radius); background: var(--forest-800);
}
.players .who b { display: block; font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.players .who span { display: block; font-size: .85rem; color: rgba(255, 248, 232, .65); }
.stepper { display: flex; align-items: center; gap: .35rem; }
.step {
  width: 3.25rem; height: 3.25rem; border-radius: 50%; cursor: pointer;
  border: 2px solid rgba(255, 248, 232, .3); background: var(--forest-950); color: #fff8e8;
  font: 700 1.7rem/1 var(--body); display: grid; place-items: center; touch-action: manipulation;
}
.step:active { background: var(--forest-700); }
.step:disabled { opacity: .3; }
.num { text-align: center; font: 900 2.4rem/1 var(--display); }
/* The score while you play wears the same mark it will get on the card. */
.num { width: 3.2rem; height: 3.2rem; display: grid; place-items: center; border-radius: 0; }
.num.ace { background: var(--ace); color: var(--forest-950); border-radius: 50%; box-shadow: 0 0 0 2px var(--forest-800), 0 0 0 4px var(--ace); }
.num.birdie { border: 3px solid var(--moss); border-radius: 50%; color: var(--moss); }
.num.bogey { border: 3px solid #b0825a; }
.num.double { border: 3px solid #ff9b7a; box-shadow: 0 0 0 2px var(--forest-800), 0 0 0 5px #ff9b7a; color: #ff9b7a; }

.sc-nav { display: grid; grid-template-columns: auto 1fr; gap: .75rem; margin-top: 1.5rem; }
.sc-nav .btn { min-height: 3.5rem; font-size: 1.1rem; }

/* ---------- Finished ---------- */
.standings { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .6rem; }
.standings li {
  display: grid; grid-template-columns: 2.2rem auto minmax(0, 1fr) auto; gap: .75rem; align-items: center;
  padding: .75rem 1rem; border-radius: var(--radius); background: var(--forest-800); border: 1px solid rgba(255, 248, 232, .08);
}
.standings li.first { background: linear-gradient(90deg, #4a3410, var(--forest-800)); border-color: #8a6a2a; }
.standings .place { font: 900 1.6rem/1 var(--display); color: #d9d2c3; text-align: center; }
.standings li.first .place { color: var(--sun); }
.standings .who b { display: block; font-size: 1.1rem; }
.standings .who span { font-size: .85rem; color: rgba(255, 248, 232, .65); }
.standings .tot { text-align: right; font: 900 1.9rem/1 var(--display); }
.standings .tot small { display: block; font: 700 .75rem/1.4 var(--body); letter-spacing: .12em; color: rgba(255, 248, 232, .65); }

.card-wrap { margin-top: 1.5rem; overflow-x: auto; border-radius: 12px; box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .8); }

/* The card is printed stock: cream paper, ruled in thin lines, a green band across each loop. */
.card {
  width: 100%; border-collapse: collapse; background: var(--paper); color: var(--ink);
  font: 600 .95rem/1.2 var(--body); font-variant-numeric: tabular-nums;
}
.card th, .card td { border: 1px solid var(--rule); padding: .45rem .3rem; text-align: center; }
.card tr.band th {
  background: var(--forest-800); color: #fff8e8; border-color: var(--forest-800);
  font: 800 1.15rem/1 var(--display); letter-spacing: .04em; text-transform: uppercase; padding: .55rem .3rem;
}
.card tr.band th:first-child { text-align: left; padding-left: .7rem; font: 700 .7rem/1 var(--body); letter-spacing: .16em; }
.card tr.band th:last-child, .card tr.band th[colspan] { font: 700 .7rem/1 var(--body); letter-spacing: .16em; }
.card tr.info td { font-size: .78rem; color: #6b6253; padding: .3rem; }
.card tr.info td:first-child { text-align: left; padding-left: .7rem; text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; }
.card tr.par td { border-bottom: 2px solid #b8ac93; font-weight: 700; color: var(--ink); }
.card td.name { text-align: left; padding-left: .7rem; font-weight: 700; white-space: nowrap; max-width: 8rem; overflow: hidden; text-overflow: ellipsis; }
.card td.name i { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .45rem; vertical-align: 1px; }
.card td.tot { font: 900 1.45rem/1 var(--display); background: rgba(26, 36, 32, .05); }
.card td.vs { font: 800 1.1rem/1 var(--display); color: #4d5a54; }
.card td, .card th { min-width: 2.9rem; }
.card td.name, .card tr.info td:first-child, .card tr.band th:first-child { min-width: 0; width: 34%; }

/* The marks, pencilled the way golfers do it. */
.m { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; font: 900 1.35rem/1 var(--display); color: var(--ink); }
.m.birdie { border: 2px solid var(--birdie-ink); border-radius: 50%; color: var(--birdie-ink); }
.m.ace { background: var(--ace); border-radius: 50%; box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px #c9a400; }
.m.bogey { border: 2px solid var(--wood); }
.m.double { border: 2px solid var(--disc-deep); box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--disc-deep); color: var(--disc-deep); }

.legend { list-style: none; margin: .9rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.1rem; font-size: .8rem; color: rgba(255, 248, 232, .75); }
.legend li { display: inline-flex; align-items: center; gap: .4rem; }
.legend .m { width: 1.25rem; height: 1.25rem; font-size: .8rem; background-color: var(--paper); }
.legend .m.ace { background: var(--ace); }

.mail { margin-top: 2.25rem; padding: 1.25rem; border-radius: 18px; background: var(--forest-800); }
.mail > p { margin-top: .4rem; color: rgba(255, 248, 232, .75); }
.mail-list { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .6rem; }
.mail-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem .75rem; align-items: center; }
.mail-list label { font-weight: 700; font-size: .95rem; }
.mail-list input { grid-column: 2; }
.mail-list .dot { grid-row: span 2; }
.mail-list input {
  width: 100%; min-width: 0; min-height: 2.9rem; padding: .55rem .85rem; border-radius: 10px;
  border: 1px solid rgba(255, 248, 232, .2); background: var(--forest-950); color: #fff8e8; font: 400 1rem/1.2 var(--body);
}
.mail-list input:focus { outline: 2px solid var(--sun); outline-offset: 1px; border-color: transparent; }

.sc-after { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.sc-after .btn { flex: 1 1 100%; min-height: 3.25rem; }
.sc-after .pill { flex: 1 1 0; }
.sc-after .pill-wide { flex: 1 1 100%; text-decoration: none; }