/* Today's standings (dailyboard.js): the daily dig's own board, a wooden notice board that drops in beside the camp,
   so it can never be mistaken for the camp's blue all-time tally board. First a gold "Nice dig!" plaque, then the
   board, where your nameplate climbs the real rows to its place. Rows reuse the tally board's parts (leaderboard.css)
   on darkened wood; your row is the light plank. Wood colours come from hub.css (--plank*). */
html.db-open :is(.hero .wordmark, .hero-line, .hero-dock) { opacity: 0; visibility: hidden; }
.db .lb-num { font-family: var(--f-num); font-variant-numeric: tabular-nums; }

.db { padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible; max-width: none; max-height: none;
  margin: auto max(16px, 4vw) auto auto; width: min(calc(440px * var(--ui, 1)), calc(100vw - 20px)); height: min(calc(720px * var(--ui, 1)), calc(100dvh - 32px)); }
.db::backdrop { background: rgba(20, 8, 2, 0.25); }
.db:focus { outline: none; }

/* ---------- the moment: a gold plaque over the camp ---------- */
.db-moment { display: none; }
.db.in-moment { margin: auto; width: min(560px, calc(100vw - 20px)); height: fit-content; }
.db.in-moment::backdrop { background: transparent; }
.db.in-moment .db-panel { display: none; }
.db.in-moment .db-moment { display: grid; justify-items: center; gap: 6px; padding: 22px 36px 24px; text-align: center; clip-path: var(--notch);
  background: linear-gradient(#3a2a08, #241703);
  box-shadow: inset 0 0 0 var(--u) #000, inset 0 0 0 calc(var(--u) * 2) var(--gold), inset 0 0 0 calc(var(--u) * 4) #000;
  animation: db-plaque .45s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes db-plaque { from { opacity: 0; transform: scale(.6) translateY(-30px); } }
.db-kick { margin: 0; font: 700 1.05rem/1 var(--f-label); color: #fff3d6; text-shadow: var(--ol); }
.db-big { margin: 0; font: 700 clamp(2.6rem, 9vw, 4.2rem)/1 var(--f-pixel); color: var(--gold); text-shadow: var(--ol), 0 5px 0 #000, 0 8px 0 rgba(0, 0, 0, 0.4); }
.db-sub { margin: 0; font: 700 1.15rem/1.25 var(--f-label); color: #fff; text-shadow: var(--ol); }

/* ---------- the board: planks, a darker sign for the title, hanging tabs ---------- */
.db-panel { position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; height: 100%; overflow: hidden; clip-path: var(--notch);
  background: repeating-linear-gradient(180deg, var(--plank) 0 30px, var(--plank-lo) 30px 32px, var(--plank-hi) 32px 34px);
  box-shadow: inset 0 0 0 var(--u) var(--plank-rim), inset 0 0 0 calc(var(--u) * 3) var(--plank-lo); }
.db[open]:not(.in-moment) .db-panel { animation: db-drop .5s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes db-drop { from { transform: translateY(-105vh); } }
.db-head { position: relative; display: flex; align-items: center; gap: 10px; margin: 12px 14px 0; padding: 10px 56px 10px 12px; clip-path: var(--notch);
  background: #5a3416; box-shadow: inset 0 0 0 var(--u) var(--plank-rim), inset 0 calc(var(--u) * 2) 0 #7a4a22; }
.db-head h2 { margin: 0; font: 700 1.3rem/1.1 var(--f-label); color: var(--plank-ink); text-shadow: 0 2px 0 var(--plank-rim); white-space: nowrap; }
.db-ico { display: grid; place-items: center; flex: none; width: 32px; height: 32px; }
.db-ico img { max-width: 32px; max-height: 32px; image-rendering: pixelated; }
.db-x { position: absolute; top: 50%; right: 8px; translate: 0 -50%; width: 40px; height: 40px; border: 0; clip-path: var(--notch); background: var(--plank);
  box-shadow: inset 0 0 0 var(--u) var(--plank-rim), inset 0 calc(var(--u) * 2) 0 var(--plank-hi); font: 700 1.4rem/1 var(--f-label); color: var(--plank-ink);
  text-shadow: 0 2px 0 var(--plank-rim); cursor: pointer; }
.db-x:hover { color: #fff; }
.db-switch { display: flex; justify-content: center; gap: 6px; padding: 10px 14px 4px; }
.db-sw { min-height: 44px; padding: 9px 16px; border: 0; clip-path: var(--notch); background: var(--plank);
  box-shadow: inset 0 0 0 var(--u) var(--plank-rim), inset 0 calc(var(--u) * 2) 0 var(--plank-hi); font: 700 1rem/1 var(--f-label); color: var(--plank-ink);
  text-shadow: 0 2px 0 var(--plank-rim); cursor: pointer; }
.db-sw:hover { color: #fff; }
.db-sw.on { background: #f3d58a; color: #3a2008; text-shadow: none; }
.db :is(.db-sw, .db-x, .btn):focus-visible { outline: none; box-shadow: var(--ring-on); }

.db-list { position: relative; min-height: 0; margin: 10px 14px 0; padding: 10px 10px 12px; overflow-y: auto; clip-path: var(--notch); background: rgba(28, 14, 5, 0.55); scrollbar-width: thin; }
.db-listhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.db .lb-head { margin: 0; min-width: 0; font: 700 0.95rem/1.3 var(--f-label); color: #f0d9b0; text-shadow: var(--ol1); }
.db-compact { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.db .lb-row { min-height: 48px; padding-block: 4px; background: rgba(28, 14, 5, 0.72); box-shadow: inset 0 0 0 var(--u) var(--plank-rim); }
.db .lb-row.top { --mc: #c7d0e8; box-shadow: inset 0 0 0 var(--u) var(--plank-rim), inset calc(var(--u) * 3) 0 0 var(--mc); }
.db .lb-row.p1 { --mc: #ffcf4a; }
.db .lb-row.p3 { --mc: #d98a4e; }
.db .lb-row.top .lb-rank { color: var(--mc); }
.db .lb-row.me { background: #f3d58a; box-shadow: inset 0 0 0 var(--u) var(--plank-rim), inset 0 0 0 calc(var(--u) * 2) #fff; }
.db .lb-row.me :is(.lb-name, .lb-val b, .lb-rank) { color: #2a1604; text-shadow: none; }
.db .lb-row.me :is(.lb-who small, .lb-val small) { color: #6b4419; text-shadow: none; }
.db-gap { padding: 2px 0; text-align: center; font: 700 1.1rem/1 var(--f-label); color: var(--plank-ink); letter-spacing: 4px; }
.db .db-more { flex: none; min-height: 36px; padding: 6px 10px; font-size: 0.9rem; }
.db .btn { min-height: 44px; padding: 8px 12px; font: 700 1rem/1.15 var(--f-label); background: var(--plank); box-shadow: inset 0 0 0 var(--u) var(--plank-rim), inset 0 calc(var(--u) * 2) 0 var(--plank-hi); color: var(--plank-ink); }
.db .btn.primary { background: #347a22; color: #fff; }
/* the climb: your plate rides up over the rows to your place, then lands there */
.db-plate { position: absolute; left: 10px; right: 10px; z-index: 2; box-shadow: inset 0 0 0 var(--u) var(--plank-rim), inset 0 0 0 calc(var(--u) * 2) #fff, 0 0 0 3px var(--gold) !important; }
.db-plate .lb-rank { font-size: 1.25rem; }
.db .lb-row.db-waiting { visibility: hidden; }
.db .lb-row.db-landed { animation: db-land .5s cubic-bezier(.2, 1.6, .4, 1); }
/* a live redraw: a row whose place changed glints once */
.db .lb-row.db-moved { animation: db-moved 1.2s ease-out; }
@keyframes db-moved { from { box-shadow: inset 0 0 0 var(--u) var(--plank-rim), inset 0 0 0 calc(var(--u) * 2) var(--gold); } }
@keyframes db-land { from { transform: scale(1.06); } }

/* your place, along the bottom */
.db-foot { display: grid; gap: 8px; margin: 10px 14px 14px; padding: 8px 12px 10px; clip-path: var(--notch); background: #5a3416;
  box-shadow: inset 0 0 0 var(--u) var(--plank-rim), inset 0 calc(var(--u) * 2) 0 var(--gold); }
.db-you { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 12px; }
.db-you > p { margin: 0; }
.db-you-rank { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; grid-row: span 2; }
.db-you-rank b { font: 700 1.8rem/1 var(--f-num); color: var(--gold); text-shadow: var(--ol); }
.db-you-rank span { font: 700 0.95rem/1 var(--f-label); color: #f0d9b0; text-shadow: var(--ol1); }
.db-you-line { display: flex; flex-wrap: wrap; gap: 2px 10px; font: 700 0.95rem/1.25 var(--f-label); color: #f0d9b0; text-shadow: var(--ol1); }
.db-you-line b { color: #fff; }
.db-you small { grid-column: 2; font: 600 0.88rem/1.3 var(--f-text); color: #f0d9b0; }
.db-acts { display: flex; gap: 6px; }
.db-acts .btn { flex: 1; }

html[data-motion="reduce"] .db, html[data-motion="reduce"] .db * { animation: none !important; }

/* ---------- phones: the board is a full-height sheet ---------- */
@media (max-width: 760px) {
  .db { margin: auto 0 0; width: 100vw; height: 100dvh; }
  .db.in-moment { margin: auto; width: calc(100vw - 20px); height: fit-content; }
  .db.in-moment .db-moment { padding: 18px 16px 20px; }
  .db-panel { clip-path: none; }
  .db[open]:not(.in-moment) .db-panel { animation-name: db-rise; }
  @keyframes db-rise { from { transform: translateY(100%); } }
  .db-head { margin: calc(env(safe-area-inset-top, 0px) + 10px) 10px 0; }
  .db-head h2 { font-size: 1.15rem; }
  .db-switch .db-sw { flex: 1; }
  .db-list { margin: 8px 10px 0; padding: 8px; }
  .db .lb-row { grid-template-columns: 26px 32px minmax(0, 1fr) auto; gap: 8px; padding-right: 8px; }
  .db-foot { margin: 8px 10px calc(env(safe-area-inset-bottom, 0px) + 10px); }
  .db-you-rank b { font-size: 1.6rem; }
}