/* ============================================================
   Dream Day V5 — live dashboard (projector / big screen)
   ============================================================ */

.dash { min-height: 100vh; display: flex; flex-direction: column; overflow: auto; }

.dash-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px clamp(16px, 2.5vw, 36px);
}
.dash-live { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: 0.04em; }
.dash-clock { font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 34px); font-variant-numeric: tabular-nums; }

.dash-grid {
  flex: 1; display: grid; gap: clamp(12px, 1.4vw, 20px);
  padding: 0 clamp(16px, 2.5vw, 36px) clamp(16px, 2.5vw, 36px);
  grid-template-columns: 1fr 1.35fr 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "now   board goal"
    "fn    board goal";
}
.panel { padding: clamp(20px, 2vw, 32px); min-width: 0; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; }
.updated { font-size: 12px; color: var(--dim); }

.now-panel { grid-area: now; }
.board-panel { grid-area: board; display: flex; flex-direction: column; }
.goal-panel { grid-area: goal; display: flex; flex-direction: column; }
.fn-panel { grid-area: fn; }

.now-title { margin: 4px 0 6px; font-family: var(--font-serif); font-size: clamp(26px, 2.6vw, 44px); line-height: 1.1; }
.now-time { margin: 0 0 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
.now-progress { margin-bottom: 26px; }
.next { padding-top: 20px; border-top: 1px solid var(--line); }
.next h3 { margin: 0 0 4px; font-family: var(--font-serif); font-size: clamp(18px, 1.6vw, 26px); }
.next p { margin: 0; }

.dash-board { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; flex: 1; align-content: start; }
.db-row {
  display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 16px;
  padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.04);
  transition: transform 0.6s var(--ease), background 0.4s;
}
.db-row.is-up { background: rgba(139, 224, 164, 0.14); }
.db-n { font-family: var(--font-display); font-size: 18px; color: var(--dim); text-align: center; }
.db-row:nth-child(1) { background: linear-gradient(90deg, rgba(212, 21, 31, 0.45), rgba(212, 21, 31, 0.08)); }
.db-row:nth-child(1) .db-n { color: #f5c451; }
.db-row:nth-child(2) .db-n { color: #d9dde3; }
.db-row:nth-child(3) .db-n { color: #d69a6b; }
.db-name { font-family: var(--font-serif); font-weight: 700; font-size: clamp(16px, 1.4vw, 22px); min-width: 0; }
.db-name .rank-meter { margin-top: 8px; }
.db-pts { font-family: var(--font-display); font-size: clamp(18px, 1.6vw, 26px); font-variant-numeric: tabular-nums; }

.dash-goal { display: flex; align-items: baseline; gap: 12px; margin: 6px 0 18px; }
.dash-goal b { font-family: var(--font-display); font-size: clamp(56px, 6vw, 110px); line-height: 1; }
.dash-goal span { color: var(--muted); font-size: clamp(16px, 1.4vw, 22px); }
.goal-panel .progress { height: 18px; }
.dash-kpis { display: grid; gap: 12px; margin-top: auto; padding-top: 24px; }
.dash-kpis div { padding: 18px; border-radius: 14px; background: rgba(0, 0, 0, 0.4); border: 1px solid var(--line); }
.dash-kpis b { display: block; font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 40px); overflow-wrap: anywhere; }
.dash-kpis span { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

.bars { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.bars li { display: grid; grid-template-columns: 56px 1fr 40px; align-items: center; gap: 12px; font-weight: 600; }
.bars .bar { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.bars .bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--red-deep), var(--red-hi)); transition: width 1s var(--ease); }
.bars b { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 1100px) {
  .dash-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "now goal" "board board" "fn fn";
  }
}
@media (max-width: 680px) {
  .dash-grid { grid-template-columns: 1fr; grid-template-areas: "now" "goal" "board" "fn"; }
  .dash-live { display: none; }
}

/* Fit one projector screen without scrolling on wide displays. */
@media (min-width: 1101px) {
  .dash { height: 100vh; overflow: hidden; }
  .dash-grid { min-height: 0; }
  .panel { min-height: 0; overflow: hidden; }
  .dash-board { grid-auto-rows: minmax(0, 1fr); min-height: 0; }
  .db-row { padding: 0 16px; min-height: 0; }
}
.dash-kpis b.is-text { font-family: var(--font-serif); font-weight: 800; }