/* ============================================================ tokens */
:root{
  --lane:        #B3CFA6;
  --lane-deep:   #D6AE8E;
  --board:       #150F09;
  --board-soft:  #241A11;
  --amber:       #FFB223;
  --pin-red:     #C0392F;
  --chalk:       #FFFBF2;
  --gutter:      #7A6647;

  --display: "Barlow Condensed", "Oswald", "Haettenschweiler", Impact, sans-serif;
  --body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:    "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radius: 3px;
  --shadow: 0 1px 0 rgba(36,26,17,.10), 0 6px 18px -12px rgba(36,26,17,.55);
}

*,*::before,*::after{ box-sizing:border-box; }

/* The `hidden` attribute must always win. Author rules that set `display`
   (flex/grid layouts especially) otherwise silently override the browser's
   built-in `[hidden]{display:none}`, since author-origin CSS beats the UA
   stylesheet regardless of specificity. This bit us three separate times
   across three unrelated components before landing on one fix that covers
   all of them, and anything added later. */
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--body);
  font-size:15px;
  line-height:1.5;
  color:var(--board-soft);
  background-color:var(--lane);
  /* Lane boards: 39 strips of maple, running the length of the page. */
  background-image:
    repeating-linear-gradient(90deg,
      transparent 0 43px,
      rgba(36,26,17,.055) 43px 44px),
    repeating-linear-gradient(90deg,
      rgba(255,251,242,.16) 0 6px,
      transparent 6px 44px);
}

h1,h2,h3{ margin:0; font-family:var(--display); font-weight:700; letter-spacing:.01em; }

button{ font:inherit; color:inherit; cursor:pointer; }

:focus-visible{ outline:2px solid var(--pin-red); outline-offset:2px; }

.wrap{ max-width:90vw; margin:0 auto; padding:0 20px 80px; }

.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gutter);
}

/* -------------------------------------------------------------- masthead */
.masthead{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px 18px;
  padding:34px 0 22px;
  border-bottom:2px solid var(--board-soft);
}

.mark{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(38px,7vw,58px);
  line-height:.86;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--board);
}
.mark span{ color:var(--pin-red); }
.masthead p{ margin:0; max-width:34ch; color:var(--gutter); font-size:14px; }
.masthead .eyebrow{ margin-left:auto; }

/* ----------------------------------------------------------- scoreboard */
.scoreboard{
  margin:26px 0 30px;
  padding:20px 20px 22px;
  background:var(--board);
  border-radius:var(--radius);
  box-shadow:0 18px 40px -26px rgba(21,15,9,.9);
}
.scoreboard__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding-bottom:14px;
  margin-bottom:16px;
  border-bottom:1px solid rgba(255,178,35,.22);
}
.scoreboard__actions{ display:flex; align-items:center; gap:10px; }
.scoreboard__head h2{
  font-size:15px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--amber);
}
.scoreboard__head h2 + .eyebrow{ margin-top:4px; }
.scoreboard__head .eyebrow{ color:rgba(255,251,242,.45); letter-spacing:.14em; }

.cards{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(248px,1fr));
  gap:14px;
}

.card{
  position:relative;
  padding:14px 15px 15px;
  background:rgba(255,251,242,.045);
  border:1px solid rgba(255,178,35,.16);
  border-radius:var(--radius);
}
.card__name{
  font-family:var(--display);
  font-size:19px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--chalk);
  padding-right:22px;
  overflow-wrap:anywhere;
}
.card__avg{
  font-family:var(--display);
  font-weight:700;
  font-size:52px;
  line-height:.9;
  letter-spacing:-.01em;
  color:var(--amber);
  font-variant-numeric:tabular-nums;
  margin:6px 0 2px;
}
.card__avg.is-empty{ color:rgba(255,251,242,.28); }
.card__meta{
  font-family:var(--mono);
  font-size:11px;
  line-height:1.7;
  color:rgba(255,251,242,.5);
}
.card__drop{
  position:absolute;
  top:8px; right:8px;
  width:24px; height:24px;
  display:grid; place-items:center;
  background:none;
  border:0;
  border-radius:var(--radius);
  color:rgba(255,251,242,.3);
  font-size:16px;
  line-height:1;
}
.card__drop:hover{ color:var(--pin-red); background:rgba(255,251,242,.07); }

/* Signature: a strip of scoresheet frames, oldest game to newest. */
.strip{ display:grid; grid-template-columns:repeat(5, 1fr); gap:3px; margin-top:11px; }
.frame{
  aspect-ratio:1;
  display:grid;
  place-items:center;
  font-family:var(--mono);
  font-size:10px;
  border:1px solid rgba(255,251,242,.16);
  color:rgba(255,251,242,.75);
  background:rgba(255,251,242,.05);
}
.frame.band-mid{ background:rgba(255,178,35,.3); color:var(--chalk); border-color:transparent; }
.frame.band-high{ background:var(--amber); color:var(--board); font-weight:500; border-color:transparent; }
.frame.is-skipped{
  border-style:dashed;
  border-color:rgba(255,251,242,.22);
  color:rgba(255,251,242,.3);
  background:repeating-linear-gradient(135deg,
    transparent 0 3px, rgba(255,251,242,.07) 3px 5px);
}
.strip__caption{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,251,242,.3);
  margin-top:6px;
}

/* -------------------------------------------------------------- layout */
.layout{
  display:grid;
  grid-template-columns:335px minmax(0,1fr);
  gap:30px;
  align-items:start;
}

.panel{
  background:var(--chalk);
  border:1px solid var(--lane-deep);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.panel__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:13px 16px;
  border-bottom:1px solid var(--lane-deep);
}
.panel__head h2{
  font-size:16px;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.log-range{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  padding:10px 16px;
  border-bottom:1px solid var(--lane-deep);
}
.log-range input[type=date]{
  width:auto;
  padding:5px 8px;
  font:inherit;
  font-size:13px;
  color:var(--board-soft);
  background:#fff;
  border:1px solid var(--lane-deep);
  border-radius:var(--radius);
}

.log-calendar{
  margin:4px 16px 4px;
  padding:6px;
  background:#fff;
  border:1px solid var(--lane-deep);
  border-radius:var(--radius);
  max-width:190px;
}
.log-calendar__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:4px;
  margin-bottom:4px;
  font-family:var(--mono);
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--board-soft);
}
.log-calendar__head .btn--tiny{ padding:1px 6px; }
.log-calendar__grid{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:1px;
}
.log-calendar__cell{
  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid transparent;
  border-radius:2px;
  background:none;
  font-family:var(--mono);
  font-size:9px;
  color:var(--board-soft);
  cursor:pointer;
}
.log-calendar__cell--blank{ cursor:default; }
.log-calendar__cell.has-games{
  background:rgba(255,178,35,.28);
  font-weight:700;
}
.log-calendar__cell.has-games:hover{ background:rgba(255,178,35,.45); }
.log-calendar__cell.is-today{ border-color:var(--pin-red); }
.log-calendar__cell.is-selected{
  background:var(--amber);
  color:var(--board);
  font-weight:700;
}

/* -------------------------------------------------------------- form */
.form{ padding:16px; display:grid; gap:14px; }

.field{ display:grid; gap:5px; }
.field > label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gutter);
}
.field input[type=text],
.field input[type=password],
.field input[type=number],
.field input[type=date],
.field textarea,
.select{
  width:100%;
  padding:9px 10px;
  font:inherit;
  color:var(--board-soft);
  background:#fff;
  border:1px solid var(--lane-deep);
  border-radius:var(--radius);
}
.field textarea{ resize:vertical; min-height:64px; }
.field input[type=number]{
  font-family:var(--display);
  font-size:30px;
  font-weight:700;
  letter-spacing:.02em;
  padding:2px 10px;
  font-variant-numeric:tabular-nums;
}
/* .field input[type=number] above is sized for score entry (big, bold,
   easy to read at a glance while looking at a scoreboard). Ordinary
   settings fields that happen to use a number input — games per match,
   days-old cutoffs, etc. — should look like every other normal field. */
.field--plain-number input[type=number]{
  font-family:inherit;
  font-size:15px;
  font-weight:400;
  letter-spacing:normal;
  padding:9px 10px;
}
.row-2{ display:grid; grid-template-columns:1fr 116px; gap:12px; }
.row-3{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,70px) minmax(0,60px); gap:10px; }
.row-3 input,
.row-2b input{ height:42px; }
.row-3 input[type=number],
.row-2b input[type=number]{
  font-family:var(--body);
  font-size:15px;
  font-weight:400;
  text-align:left;
  padding:9px 10px;
}
.field-hint{
  margin:-6px 0 0;
  font-size:12px;
  line-height:1.4;
  color:var(--gutter);
}
.league-card__row-3 + .field-hint{ margin-top:8px; }

.bowler-rows{ display:grid; gap:12px; }
.bowler-row{
  display:grid;
  gap:10px;
  padding:12px;
  border:1px solid var(--lane-deep);
  border-radius:var(--radius);
  background:rgba(122,102,71,.06);
}
.row-2b{ display:grid; grid-template-columns:minmax(0,78px) minmax(0,86px); gap:10px; }
.row-remove{ justify-self:end; }

/* counts-toward-average switch */
.toggle{
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:11px 12px;
  background:var(--lane);
  border:1px solid var(--lane-deep);
  border-radius:var(--radius);
  cursor:pointer;
}
.toggle--inline{
  padding:4px 8px;
  gap:6px;
  align-items:center;
  font-size:12px;
}
.toggle--inline .toggle__text strong{ font-weight:600; font-size:12px; }
.toggle input{
  appearance:none;
  flex:0 0 auto;
  width:38px; height:22px;
  margin:1px 0 0;
  background:#fff;
  border:1px solid var(--lane-deep);
  border-radius:11px;
  position:relative;
  cursor:pointer;
  transition:background .14s ease;
}
.toggle input::after{
  content:"";
  position:absolute;
  top:2px; left:2px;
  width:16px; height:16px;
  border-radius:50%;
  background:var(--gutter);
  transition:transform .14s ease, background .14s ease;
}
.toggle input:checked{ background:var(--board-soft); border-color:var(--board-soft); }
.toggle input:checked::after{ transform:translateX(16px); background:var(--amber); }
.toggle__text strong{ display:block; font-size:14px; font-weight:600; }
.toggle__text span{ display:block; font-size:12.5px; color:var(--gutter); }

/* photo */
.photo{
  display:grid;
  gap:8px;
  padding:11px 12px;
  border:1px dashed var(--lane-deep);
  border-radius:var(--radius);
}
.photo input[type=file]{ font-size:12.5px; max-width:100%; }
.photo__preview{
  display:none;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}
.photo__preview.is-on{ display:flex; }
.photo__preview img{
  width:100%;
  max-height:340px;
  object-fit:contain;
  background:var(--board-soft);
  border-radius:var(--radius);
  border:1px solid var(--lane-deep);
}

.btn{
  padding:11px 16px;
  font-family:var(--display);
  font-size:16px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  background:var(--board-soft);
  color:var(--chalk);
  border:1px solid var(--board-soft);
  border-radius:var(--radius);
}
.btn:hover{ background:var(--board); }
.btn[disabled]{ opacity:.55; cursor:progress; }
.btn--ghost{ background:none; color:var(--board-soft); }
.btn--ghost:hover{ background:var(--lane); }
.btn--tiny{
  padding:4px 9px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:none;
  border:1px solid var(--lane-deep);
  color:var(--gutter);
}
.btn--tiny:hover{ background:var(--lane); color:var(--board-soft); }
.btn--danger:hover{ background:var(--pin-red); border-color:var(--pin-red); color:var(--chalk); }
.form__actions{ display:flex; gap:8px; }
.form__actions .btn{ flex:1; }

.notice{
  margin:0;
  padding:9px 11px;
  font-size:13px;
  border-radius:var(--radius);
  background:rgba(192,57,47,.1);
  border:1px solid rgba(192,57,47,.4);
  color:#8A2820;
}
.notice[hidden]{ display:none; }

/* ------------------------------------------------------------- log */
.select{ width:auto; padding:5px 8px; font-size:13px; }

.games{ list-style:none; margin:0; padding:0; }
.game{
  display:grid;
  grid-template-columns:66px minmax(0,1fr) auto;
  gap:14px;
  align-items:start;
  padding:14px 16px;
  border-bottom:1px solid var(--lane-deep);
}
.game:last-child{ border-bottom:0; }
.game.is-skipped{
  background:repeating-linear-gradient(135deg,
    transparent 0 6px, rgba(122,102,71,.07) 6px 11px);
}
.game.is-pending-delete{
  grid-template-columns:1fr;
  background:rgba(192,57,47,.06);
}
.game__undo{
  margin:0;
  padding:6px 2px;
  font-size:13px;
  color:var(--gutter);
}
.game__undo .btn{ margin-left:8px; vertical-align:middle; }
.game__shots{ display:flex; flex-direction:column; gap:6px; }
.game__shot{
  width:66px; height:66px;
  padding:0;
  border:1px solid var(--lane-deep);
  border-radius:var(--radius);
  background:var(--lane);
  overflow:hidden;
}
.game__shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.game__shot--none{
  display:grid;
  place-items:center;
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gutter);
  cursor:default;
}
.game__name{
  font-family:var(--display);
  font-size:20px;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
  overflow-wrap:anywhere;
}
.game__line{ font-family:var(--mono); font-size:11.5px; color:var(--gutter); }
.game__notes{ margin:5px 0 0; font-size:13.5px; white-space:pre-wrap; overflow-wrap:anywhere; }
.game__tools{ display:flex; gap:6px; margin-top:9px; flex-wrap:wrap; }

.game__score{
  font-family:var(--display);
  font-weight:700;
  font-size:40px;
  line-height:1;
  font-variant-numeric:tabular-nums;
  text-align:right;
}
.game__score small{
  display:block;
  font-family:var(--mono);
  font-size:9.5px;
  font-weight:400;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gutter);
}
.game.is-skipped .game__score{ color:var(--gutter); }
.game__score.is-perfect{ color:var(--pin-red); }

.empty{
  padding:44px 20px;
  text-align:center;
  color:var(--gutter);
}
.empty strong{
  display:block;
  font-family:var(--display);
  font-size:22px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--board-soft);
  margin-bottom:5px;
}

/* --------------------------------------------------------------- lightbox */
.lightbox{
  position:fixed;
  inset:0;
  display:none;
  place-items:center;
  padding:24px;
  background:rgba(21,15,9,.92);
  z-index:50;
}
.lightbox.is-on{ display:grid; }
.lightbox img{ max-width:100%; max-height:88vh; border-radius:var(--radius); }
.lightbox__close{
  position:absolute;
  top:16px; right:20px;
  background:none;
  border:0;
  color:var(--chalk);
  font-size:30px;
  line-height:1;
}

@media (max-width:880px){
  .layout{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .wrap{ padding:0 14px 60px; }
  .game{ grid-template-columns:52px minmax(0,1fr); gap:11px; padding:13px 12px; }
  .game__shot{ width:52px; height:52px; }
  .game__score{ grid-column:2; text-align:left; font-size:32px; margin-top:2px; }
  .game__score small{ display:inline; margin-left:7px; }
}
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}

/* --------------------------------------------------------------- nav */
.nav{ display:flex; gap:4px; margin-left:auto; }
.nav a{
  padding:8px 14px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--board-soft);
  background:rgba(122,102,71,.16);
  border:1px solid var(--lane-deep);
  border-radius:var(--radius);
}
.nav a:hover{ color:var(--board-soft); background:rgba(122,102,71,.26); }
.nav a.is-here{ background:var(--board-soft); border-color:var(--board-soft); color:var(--amber); }

/* Trophy count riding along on the scoreboard cards. */
.card__cups{
  display:inline-block;
  margin-left:7px;
  padding:1px 7px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.06em;
  color:var(--board);
  background:var(--amber);
  border-radius:9px;
  vertical-align:2px;
}

/* -------------------------------------------------------------- trophy case --
 * Signature for this page: every bowler's emblems pressed into the board,
 * the way a league hangs its patches on the wall behind the desk.
 */
.case{ display:grid; gap:2px; }
.case__row{
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:16px;
  align-items:center;
  padding:11px 4px;
  border-bottom:1px solid rgba(255,178,35,.12);
}
.case__row:last-child{ border-bottom:0; }
.case__who{
  font-family:var(--display);
  font-size:19px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--chalk);
  overflow-wrap:anywhere;
}
.case__patches{ display:flex; flex-wrap:wrap; gap:5px; }
.patch{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px 4px 7px;
  font-family:var(--mono);
  font-size:11px;
  color:rgba(255,251,242,.82);
  background:rgba(255,251,242,.06);
  border:1px solid rgba(255,178,35,.22);
  border-radius:14px;
}
.patch--honor{ background:rgba(255,178,35,.16); border-color:var(--amber); color:var(--chalk); }
.patch b{ font-weight:500; color:var(--amber); font-size:10px; }
.case__none{ font-family:var(--mono); font-size:11px; color:rgba(255,251,242,.32); }

/* -------------------------------------------------------------- achievements */
.tier{ padding:0; }
.tier__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  padding:11px 16px;
  background:var(--lane);
  border-bottom:1px solid var(--lane-deep);
}
.tier__head h3{
  font-family:var(--display);
  font-size:15px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.tier__head p{ margin:0; font-size:12px; color:var(--gutter); max-width:44ch; text-align:right; }

.ach{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:13px;
  padding:14px 16px;
  border-bottom:1px solid var(--lane-deep);
}
.ach:last-child{ border-bottom:0; }
.ach.is-cold{ opacity:.5; }
.ach.is-off{
  opacity:.4;
  background:repeating-linear-gradient(135deg,
    transparent 0 6px, rgba(122,102,71,.08) 6px 11px);
}
.ach__emblem{
  width:44px; height:44px;
  display:grid; place-items:center;
  font-size:21px;
  background:var(--lane);
  border:1px solid var(--lane-deep);
  border-radius:50%;
}
.ach__title{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.ach__title h4{
  margin:0;
  font-family:var(--display);
  font-size:20px;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.ach__count{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gutter);
}
.ach__blurb{ margin:2px 0 0; font-size:13.5px; }
.ach__rule{
  margin:5px 0 0;
  font-family:var(--mono);
  font-size:11px;
  color:var(--gutter);
}
.ach__rule b{ font-weight:500; color:var(--pin-red); letter-spacing:.06em; text-transform:uppercase; }
.ach__winners{ list-style:none; margin:9px 0 0; padding:0; display:grid; gap:3px; }
.ach__winners li{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  font-size:13px;
  padding:3px 0;
}
.ach__winners b{ font-weight:600; }
.ach__winners span{ font-family:var(--mono); font-size:11px; color:var(--gutter); }
.ach__tools{ display:flex; gap:6px; margin-top:9px; flex-wrap:wrap; }

/* tabbed form panel */
.tabs{ display:flex; gap:4px; }
.tabs button{
  padding:6px 11px;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  background:none;
  color:var(--gutter);
  border:1px solid var(--lane-deep);
  border-radius:var(--radius);
}
.tabs button.is-on{ background:var(--board-soft); border-color:var(--board-soft); color:var(--amber); }

.field select{
  width:100%;
  padding:9px 10px;
  font:inherit;
  color:var(--board-soft);
  background:#fff;
  border:1px solid var(--lane-deep);
  border-radius:var(--radius);
}
.field__hint{ font-size:12px; color:var(--gutter); }
.knobs{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.knobs:empty{ display:none; }
.emblem-row{ display:grid; grid-template-columns:74px 1fr; gap:10px; }
.emblem-row input{ text-align:center; font-size:19px; }

/* --------------------------------------------------------------- growth */
.growth-controls{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  padding:14px 16px;
  margin-bottom:14px;
}
.row-2-eq{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.row-3-eq{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
@media (max-width:640px){
  .row-3-eq{ grid-template-columns:1fr; }
}
.row-4-eq{ display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:12px; }
@media (max-width:760px){
  .row-4-eq{ grid-template-columns:1fr 1fr; }
}
@media (max-width:480px){
  .row-4-eq{ grid-template-columns:1fr; }
}
.growth-custom{ grid-column:1 / -1; }

.growth-summary{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px;
  margin-bottom:14px;
}
.growth-summary:empty{ display:none; }
.stat-tile{
  background:var(--chalk);
  border:1px solid var(--lane-deep);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:12px 16px;
  text-align:center;
}
.stat-tile__value{
  margin:2px 0 0;
  font-family:var(--display);
  font-size:28px;
  font-weight:700;
  color:var(--board-soft);
}
.stat-tile__delta{
  margin:2px 0 0;
  font-family:var(--mono);
  font-size:12px;
}
.stat-tile__delta.is-up{ color:#3d7a52; }
.stat-tile__delta.is-down{ color:var(--pin-red); }

.growth-charts{ display:grid; gap:14px; }
.chart-wrap{ padding:2px 16px 10px; }
.chart{ display:block; width:100%; height:auto; }
.chart-grid{ stroke:var(--lane-deep); stroke-width:1; opacity:.4; }
.chart-line{ stroke-width:2.5; fill:none; }
.chart-dot{
  fill:var(--chalk);
  stroke-width:1.5;
  cursor:pointer;
  transition:r .1s ease;
  outline:none;
}
.chart-dot:hover,
.chart-dot:focus{ r:6.5; stroke-width:2.5; }
.chart-ylabel,
.chart-xlabel{ font-family:var(--mono); font-size:10px; fill:var(--gutter); }
.chart-empty{
  padding:48px 0;
  text-align:center;
  font-size:13px;
  color:var(--gutter);
}
.chart-tooltip{
  position:fixed;
  z-index:80;
  max-width:220px;
  padding:6px 10px;
  background:var(--board-soft);
  color:var(--chalk);
  font-family:var(--mono);
  font-size:12px;
  white-space:nowrap;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  pointer-events:none;
}
.chart-tooltip__sub{
  margin-top:2px;
  padding-top:2px;
  border-top:1px solid rgba(255,251,242,.18);
  color:rgba(255,251,242,.65);
  font-size:11px;
}

.award-toast{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:90;
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  max-width:320px;
  background:var(--board-soft);
  color:var(--chalk);
  border:1px solid var(--amber);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transform:translateY(12px);
  opacity:0;
  transition:transform .25s ease, opacity .25s ease;
}
.award-toast.is-on{ transform:translateY(0); opacity:1; }
.award-toast__emblem{ font-size:28px; line-height:1; }
.award-toast__text{ display:flex; flex-direction:column; gap:2px; font-size:13px; }
.award-toast__text strong{ font-family:var(--display); font-size:16px; color:var(--amber); }
.award-toast__text span{ color:rgba(255,251,242,.7); }

@media (max-width:520px){
  .case__row{ grid-template-columns:1fr; gap:7px; }
  .tier__head{ flex-direction:column; }
  .tier__head p{ text-align:left; }
  .growth-controls{ grid-template-columns:1fr; }
}

/* --------------------------------------------------------------- accounts */
.wrap--narrow{ max-width:420px; }

.auth-panel{ padding:0; }
.auth-panel .form{ padding:16px; }
.auth-switch{
  margin:0;
  padding:14px 16px;
  border-top:1px solid var(--lane-deep);
  font-size:13px;
  color:var(--gutter);
  text-align:center;
}

.notice.is-success{
  background:rgba(61,122,82,.12);
  border-color:rgba(61,122,82,.45);
  color:#2f6a45;
}

.admin-tabs{
  display:flex;
  gap:8px;
  margin-bottom:20px;
  border-bottom:1px solid var(--lane-deep);
  padding-bottom:0;
}
.admin-tabs__btn{
  padding:9px 16px;
  background:rgba(122,102,71,.16);
  border:1px solid var(--lane-deep);
  border-bottom:none;
  border-radius:var(--radius) var(--radius) 0 0;
  font-family:var(--display);
  font-size:14px;
  letter-spacing:.02em;
  color:var(--board-soft);
  cursor:pointer;
  transform:translateY(1px);
}
.admin-tabs__btn:hover{ background:rgba(122,102,71,.26); }
.admin-tabs__btn.is-active{
  background:var(--chalk);
  color:var(--board-soft);
  border-bottom:1px solid var(--chalk);
  font-weight:600;
}

.account-bar{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
  font-size:13px;
  color:var(--gutter);
}
.account-bar .btn--tiny{
  background:rgba(122,102,71,.16);
  color:var(--board-soft);
}
.account-bar .btn--tiny:hover{ background:rgba(122,102,71,.26); }

.accounts{ list-style:none; margin:0; padding:0; }
.account{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 16px;
  border-bottom:1px solid var(--lane-deep);
}
.account:last-child{ border-bottom:0; }
.account__name{ margin:0; font-weight:600; }
.account__meta{ margin:2px 0 0; font-size:12.5px; color:var(--gutter); }
.account__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.account__actions .select{ width:auto; }

.badge{
  display:inline-block;
  padding:1px 7px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
  border-radius:99px;
  border:1px solid var(--lane-deep);
  color:var(--gutter);
  vertical-align:middle;
}

/* ---------------------------------------------------------------- leagues */
.league-cards{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.league-card{
  background:var(--chalk);
  border:1px solid var(--lane-deep);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
}
.league-card--empty{
  text-align:center;
  color:var(--gutter);
  font-size:13px;
  box-shadow:none;
}
.league-card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.league-card__head h3{
  font-family:var(--display);
  font-size:18px;
  letter-spacing:.02em;
}
.league-card__head h3 a{
  color:var(--board-soft);
  text-decoration:none;
}
.league-card__head h3 a:hover{ text-decoration:underline; }
.league-card__name-input{
  font-family:var(--display);
  font-size:18px;
  letter-spacing:.02em;
  border:1px solid transparent;
  background:transparent;
  padding:2px 6px;
}
.league-card__name-input:hover,
.league-card__name-input:focus{
  border-color:var(--lane-deep);
  background:#fff;
}
.league-card__row-2{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:end;
  margin-bottom:8px;
}
.league-card__row-2fields{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:10px;
  align-items:end;
  margin-bottom:8px;
}
.league-card__row-3fields{
  display:grid;
  grid-template-columns:1fr 1fr 1fr auto;
  gap:10px;
  align-items:end;
  margin-bottom:8px;
}
@media (max-width:640px){
  .league-card__row-3fields{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  .league-card__row-2fields{ grid-template-columns:1fr; }
  .league-card__row-3fields{ grid-template-columns:1fr; }
}
.league-card__next{
  margin:0 0 12px;
  font-size:13px;
  font-family:var(--mono);
  color:var(--gutter);
}
.league-card__section{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--lane-deep);
}
.league-card__list{
  list-style:none;
  margin:8px 0;
  padding:0;
  display:grid;
  gap:6px;
}
.league-card__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:6px 10px;
  background:rgba(122,102,71,.06);
  border-radius:var(--radius);
  font-size:13px;
}
.league-card__row a{
  color:var(--board-soft);
  font-weight:600;
  text-decoration:none;
}
.league-card__row a:hover{ text-decoration:underline; }
.league-card__row--empty{
  color:var(--gutter);
  background:none;
  justify-content:flex-start;
}
.scoreboard .league-card__row{
  background:rgba(255,251,242,.08);
  color:var(--chalk);
}
.scoreboard .league-card__row--empty{
  color:rgba(255,251,242,.5);
  background:none;
}
.league-card__row-3{
  display:grid;
  grid-template-columns:auto auto 1fr auto;
  gap:8px;
  align-items:center;
}
.league-card__row-3 input{ width:auto; }
@media (max-width:640px){
  .league-card__row-3{ grid-template-columns:1fr; }
}

/* -------------------------------------------------------- league detail page */
.league-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:20px; }
@media (max-width:880px){
  .league-grid{ grid-template-columns:1fr; }
}

.match-grid-wrap{ overflow-x:auto; margin:8px 0 4px; }
.match-grid{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.match-grid th,
.match-grid td{
  padding:8px;
  border:1px solid var(--lane-deep);
  text-align:center;
  white-space:nowrap;
}
.match-grid th{
  background:rgba(122,102,71,.08);
  font-family:var(--mono);
  font-weight:500;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.match-grid th select{
  margin-top:4px;
  width:auto;
  font-size:11px;
  padding:3px 4px;
}
.match-grid td:first-child{
  text-align:left;
  font-weight:600;
  white-space:nowrap;
}
.match-grid input[type=number]{
  width:64px;
  text-align:center;
}
.match-grid__absentee{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  margin-top:3px;
  font-size:10px;
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
  color:var(--gutter);
  cursor:pointer;
}
.match-grid__absentee input{ width:auto; margin:0; }

.match-photos{
  display:grid;
  gap:10px;
  padding:11px 12px;
  border:1px dashed var(--lane-deep);
  border-radius:var(--radius);
}
.match-photos__gallery{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}
.match-photos__gallery .photo__preview--compact img{ width:100%; }
.match-photos__label{
  margin:0;
  font-size:11px;
  color:var(--gutter);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.match-photos__item{
  flex:1 1 200px;
  min-width:180px;
  display:grid;
  gap:8px;
}
.photo__preview--compact img{
  width:33.333%;
  height:auto;
  object-fit:contain;
}

.match-history__toggle{
  display:flex;
  align-items:center;
  gap:8px;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  text-align:left;
}
.match-history__chevron{
  font-size:12px;
  color:var(--gutter);
  width:12px;
  display:inline-block;
}
.match-history__summary{
  display:block;
  width:100%;
  background:none;
  border:none;
  padding:0;
  margin-top:2px;
  font-family:var(--mono);
  font-size:12px;
  color:var(--gutter);
  text-align:left;
  cursor:pointer;
}
.match-history__body{ margin-top:14px; }
.match-history__photos{ margin-top:16px; }
.match-history__photo-list{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}
.match-history__photo-item{
  width:calc(25% - 11px);
  min-width:140px;
  display:grid;
  gap:6px;
}
.match-history__photo-item .game__shot--wide{ width:100%; }
.game__shot--wide{ height:auto; }
.game__shot--wide img{ width:100%; height:auto; display:block; }

.match-history__grid-wrap{ overflow-x:auto; }
.match-history__grid{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.match-history__grid th,
.match-history__grid td{
  padding:7px 10px;
  border:1px solid var(--lane-deep);
  text-align:center;
  white-space:nowrap;
}
.match-history__grid > tr:first-child th{
  background:rgba(122,102,71,.08);
  font-family:var(--mono);
  font-weight:500;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.match-history__game-label{
  text-align:left;
  white-space:nowrap;
  font-weight:600;
}
.match-history__result{
  display:block;
  font-family:var(--mono);
  font-size:10px;
  font-weight:500;
  color:var(--gutter);
  text-transform:none;
  letter-spacing:.03em;
}
.match-history__score{ font-weight:600; }
.match-history__score.is-absentee{ color:var(--pin-red); text-decoration:line-through; font-weight:400; }
.match-history__absentee-tag{
  display:block;
  font-size:9px;
  color:var(--pin-red);
  text-transform:uppercase;
  letter-spacing:.05em;
}
.match-history__absentee-link{
  display:block;
  margin-top:2px;
  background:none;
  border:none;
  padding:0;
  font-family:var(--mono);
  font-size:9px;
  color:var(--gutter);
  text-decoration:underline;
  cursor:pointer;
}