/* Disc Golf - styles.  One page, no framework, no external font. */
:root {
  --grass: #2c4327; --grass-2: #3b5733; --ink: #f2f5ee; --ink-dim: #bccab3;
  --panel: rgba(18, 28, 16, 0.94); --edge: #55704a; --hi: #dfa93a; --warn: #d2733c;
  --under: #8fd46a; --over: #e08a6a; --font: system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
/* [hidden] loses to ANY class rule that sets display, which is how an invisible panel ends up
   eating every click.  Win that fight once, here, for the whole page. */
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--grass); color: var(--ink); font: 14px/1.45 var(--font);
  overflow: hidden; -webkit-text-size-adjust: 100%;
}
#stage { position: fixed; inset: 0; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

#nogl {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
  padding: 2rem; background: var(--grass);
}
#nogl h2 { margin: 0 0 .5rem; }

#hud {
  position: absolute; top: 0; left: 0; padding: .6rem .85rem;
  background: linear-gradient(180deg, rgba(12,20,10,.82), rgba(12,20,10,0));
  pointer-events: none; max-width: 22rem;
}
#hud h1 {
  margin: 0 0 .35rem; font-size: 1.15rem; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 700;
}
#hud .grid { display: grid; grid-template-columns: auto 1fr; gap: .05rem .6rem; font-size: .84rem; }
#hud .lbl { color: var(--ink-dim); }
#hud .val { font-variant-numeric: tabular-nums; font-weight: 600; }
#hud .val.big { font-size: 1.05rem; color: var(--hi); }

/* left+right+fit-content+auto margins centres the bar at its full available width; the old
   left:50% + translate trick capped a shrink-to-fit box at half the viewport. */
#msg-bar {
  position: absolute; left: 20.4rem; right: .6rem; bottom: 2.9rem; margin: 0 auto;
  width: fit-content; max-width: 62rem; padding: .35rem .8rem; text-align: center;
  background: rgba(12,20,10,.72); border: 1px solid var(--edge); border-radius: .4rem;
  font-size: .82rem; pointer-events: none; min-height: 1.2rem;
}

#controls {
  position: absolute; left: .6rem; bottom: 2.6rem; width: 19rem; max-height: calc(100% - 15.6rem);
  overflow-y: auto; padding: .6rem .7rem; background: var(--panel);
  border: 1px solid var(--edge); border-radius: .5rem;
}
#controls .row { margin: .32rem 0; }
#controls .row.hero { padding: .3rem .35rem; margin: .45rem -.35rem;
  background: rgba(223,169,58,.12); border-left: 3px solid var(--hi); border-radius: .25rem; }
#controls label { display: block; font-size: .76rem; color: var(--ink-dim); margin-bottom: .1rem; }
#controls label b { color: var(--ink); font-variant-numeric: tabular-nums; }
#controls input[type=range] { width: 100%; accent-color: var(--hi); }
#controls select {
  width: 100%; padding: .25rem .3rem; background: #1b2a18; color: var(--ink);
  border: 1px solid var(--edge); border-radius: .25rem; font: inherit; font-size: .82rem;
}
#controls .row.two { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
#controls .row.disc-row label { margin-bottom: .15rem; }
#controls .row.disc-row select { font-size: .84rem; }
#controls .spec { font-size: .7rem; color: var(--ink-dim); margin: .1rem 0 .35rem; line-height: 1.3; }
/* Throw stays in reach: the row sticks to the bottom edge of the scrolling controls panel. */
#controls .buttons { display: flex; gap: .35rem; margin-top: .5rem; flex-wrap: wrap;
  position: sticky; bottom: -.6rem; z-index: 1; padding: .4rem 0 .5rem; background: #141e12;
  box-shadow: 0 .7rem 0 .4rem #141e12, 0 -.5rem .5rem -.2rem #141e12; }
button {
  font: inherit; font-size: .8rem; padding: .32rem .7rem; cursor: pointer; color: var(--ink);
  background: #24371f; border: 1px solid var(--edge); border-radius: .3rem;
}
button:hover { background: #2f4728; }
button.primary { background: var(--hi); color: #1a1206; border-color: var(--hi); font-weight: 700; }
button.primary:hover { background: #eab84c; }
button.on { background: var(--hi); color: #1a1206; border-color: var(--hi); }

#flight-facts { margin-top: .5rem; font-size: .74rem; }
.ff-row { display: flex; justify-content: space-between; gap: .5rem; padding: .06rem 0;
  border-bottom: 1px solid rgba(85,112,74,.35); }
.ff-k { color: var(--ink-dim); }
.ff-v { font-variant-numeric: tabular-nums; }

#tools { position: absolute; right: .6rem; bottom: .6rem; display: flex; gap: .35rem; flex-wrap: wrap; }

.panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(34rem, 94vw); max-height: 88vh; overflow-y: auto; padding: 0 1rem 1rem;
  background: var(--panel); border: 1px solid var(--edge); border-radius: .6rem;
  box-shadow: 0 1.2rem 3rem rgba(0,0,0,.5);
}
.panel.wide { width: min(52rem, 96vw); }
.panel header {
  position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; padding: .7rem 0 .5rem; background: var(--panel); border-bottom: 1px solid var(--edge);
}
.panel h2 { margin: 0; font-size: 1.05rem; }
.panel h3 { margin: 1.1rem 0 .35rem; font-size: .92rem; color: var(--hi); }
.panel p, .panel li { font-size: .82rem; }
.panel ul { padding-left: 1.1rem; margin: .3rem 0; }
.panel .fine { font-size: .74rem; color: var(--ink-dim); }
.panel b { color: var(--hi); font-weight: 600; }
.panel-close { flex: 0 0 auto; }

.card-row { display: grid; grid-template-columns: 2.4rem 1fr 3.4rem 2.4rem 3.4rem 2.6rem 3rem;
  gap: .3rem; padding: .12rem .2rem; font-size: .8rem; align-items: center; }
.card-row.card-head { color: var(--ink-dim); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .04em; border-bottom: 1px solid var(--edge); }
.c-h { text-align: right; }
.c-h:nth-child(2) { text-align: left; }
.card-row.now { background: rgba(223,169,58,.14); border-radius: .2rem; }
.card-row.card-total { border-top: 1px solid var(--edge); font-weight: 700; margin-top: .2rem; }
.c-n { text-align: right; font-variant-numeric: tabular-nums; }
.c-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-score.under { color: var(--under); font-weight: 700; }
.c-score.over { color: var(--over); }
.c-score.even { color: var(--ink); }

.dt-row { display: grid; grid-template-columns: 6.2rem repeat(10, 1fr); gap: .25rem;
  padding: .1rem .2rem; font-size: .74rem; }
.dt-row.dt-head { color: var(--ink-dim); border-bottom: 1px solid var(--edge);
  text-transform: uppercase; letter-spacing: .03em; font-size: .66rem; }
.dt-row:nth-child(even) { background: rgba(255,255,255,.03); }
.dt-c { text-align: right; font-variant-numeric: tabular-nums; }
.dt-c:first-child { text-align: left; }

@media (max-width: 720px) {
  #controls { width: calc(100% - 1.2rem); max-height: 42%; bottom: 3rem; }
  #hud { max-width: 100%; }
  #msg-bar { left: .6rem; right: .6rem; bottom: calc(42% + 3.4rem); max-width: none;
    font-size: .76rem; }
  #tools { left: .6rem; flex-wrap: nowrap; justify-content: flex-end; gap: .25rem; }
  #tools button { padding: .32rem .4rem; font-size: .74rem; white-space: nowrap; }
  .card-row { grid-template-columns: 1.5rem 1fr 2.7rem 1.6rem 2.6rem 2rem 2.4rem; gap: .15rem;
    font-size: .74rem; padding: .12rem 0; }
  .card-row.card-head { font-size: .6rem; letter-spacing: 0; }
  .dt-row { grid-template-columns: 5rem repeat(10, 1fr); font-size: .64rem; }
}
/* Short screens (a phone held sideways): a two-column HUD so it does not sit on the controls. */
@media (max-height: 520px) {
  #hud { max-width: 30rem; padding: .4rem .7rem; }
  #hud h1 { display: none; }
  #hud .grid { grid-template-columns: auto auto auto auto; font-size: .76rem; }
  #controls { width: 19rem; bottom: 2.6rem; max-height: calc(100% - 9.2rem); }
  #msg-bar { left: 20.4rem; right: .6rem; bottom: 2.9rem; max-width: 62rem; }
}