/* scrapbook.css
   The trip scrapbook grid and its export controls, plus the inventory and
   journal panels which share the same warm keepsake feel. */

.scrapbook, .inventory, .journal, .certificate-panel, .dashboard { max-width: 760px; margin: 0 auto; }
.scrapbook-actions, .cert-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.scrapbook-empty { color: #cdd6ef; background: var(--panel); border-radius: 12px; padding: 16px; text-align: center; }
.scrapbook-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.scrap-cell {
  margin: 0;
  background: var(--cream);
  border: 1px solid rgba(201,168,76,0.5);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.scrap-img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.scrap-cap { font-size: 12px; color: #2c2208; padding: 8px; }

/* inventory */
.inv-runes { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; }
.inv-rune {
  text-align: center;
  border: 1px solid rgba(201,168,76,0.35);
  border-radius: 12px;
  padding: 12px 8px;
  background: var(--panel);
}
.inv-rune.locked { opacity: 0.45; }
.inv-rune.has { border-color: var(--gold); box-shadow: inset 0 0 18px rgba(201,168,76,0.25); }
.rune-glyph { font-family: var(--font-rune); font-size: 40px; color: var(--gold-bright); }
.rune-name { font-family: var(--font-head); color: var(--gold); }
.rune-meaning { font-size: 11px; color: #cdd6ef; }

.inv-staff { margin: 16px 0; background: var(--panel); border-radius: 12px; padding: 14px; border: 1px solid rgba(201,168,76,0.35); }
.inv-staff.lit { border-color: var(--gold-bright); box-shadow: 0 0 24px rgba(255,224,138,0.4); }
.staff-title { font-family: var(--font-head); color: var(--gold); margin-bottom: 8px; }
.staff-note { font-size: 13px; color: #cdd6ef; margin-top: 6px; }

.inv-relics { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.inv-relic { border: 1px solid rgba(201,168,76,0.35); border-radius: 12px; padding: 12px; background: var(--panel); }
.inv-relic.locked { opacity: 0.45; }
.inv-relic.has { border-color: var(--gold); }
.relic-name { font-family: var(--font-head); color: var(--gold); }
.relic-norse { font-size: 12px; color: #aebbe0; font-style: italic; }
.relic-status { font-size: 12px; color: var(--amber); margin-top: 4px; }

.inv-currencies { display: flex; gap: 16px; }
.inv-coin { background: var(--panel); border-radius: 12px; padding: 14px; text-align: center; flex: 1; border: 1px solid rgba(201,168,76,0.35); }
.coin-amount { display: block; font-family: var(--font-head); font-size: 30px; color: var(--gold-bright); }
.coin-name { font-size: 12px; color: #cdd6ef; }

/* journal */
.journal-score { text-align: center; background: var(--panel); border-radius: var(--radius); padding: 18px; border: 1px solid rgba(201,168,76,0.35); }
.score-big { font-family: var(--font-head); font-size: 48px; color: var(--gold-bright); }
.score-label { color: var(--amber); }
.score-pct { font-size: 13px; color: #cdd6ef; margin-top: 4px; }
.score-title { font-family: var(--font-head); color: var(--gold); margin-top: 8px; }
.journal-stamps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 10px; }
.stamp { text-align: center; border: 2px solid rgba(201,168,76,0.4); border-radius: 12px; padding: 10px 4px; opacity: 0.6; }
.stamp.open { opacity: 1; }
.stamp.done { opacity: 1; border-color: #6fcf97; background: rgba(45,122,45,0.18); }
.stamp-n { font-family: var(--font-head); font-size: 22px; color: var(--gold); }
.stamp-loc { font-size: 11px; color: #cdd6ef; }
.stamp-state { font-size: 10px; color: var(--amber); }
.journal-players { display: flex; flex-direction: column; gap: 8px; }
.journal-player { border-left: 6px solid var(--gold); background: var(--panel); border-radius: 12px; padding: 12px; }
.jp-name { font-family: var(--font-head); color: var(--gold); font-size: 17px; }
.jp-real { font-size: 13px; color: #aebbe0; }
.jp-stats { font-size: 13px; color: #cdd6ef; margin-top: 4px; }

/* dashboard (Saga so far) */
.dash-runes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.dash-rune {
  text-align: center;
  border: 1px solid rgba(201,168,76,0.35);
  border-radius: 12px;
  padding: 12px 6px;
  background: var(--panel);
  transition: opacity 160ms ease, transform 160ms ease;
}
.dash-rune.locked { opacity: 0.4; }
.dash-rune.has { border-color: var(--gold); box-shadow: inset 0 0 18px rgba(201,168,76,0.25); }
.dash-rune-img { width: 48px; height: 48px; display: block; margin: 0 auto 4px; }
.dash-rune-glyph { display: block; font-family: var(--font-rune); font-size: 26px; color: var(--gold-bright); }
.dash-rune-name { font-family: var(--font-head); font-size: 13px; color: var(--gold); }

.dash-staff {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px 0;
  background: var(--panel);
  border-radius: 12px;
  padding: 14px;
  border: 1px solid rgba(201,168,76,0.35);
  transition: box-shadow 200ms ease, border-color 200ms ease;
}
.dash-staff.lit { border-color: var(--gold-bright); box-shadow: 0 0 24px rgba(255,224,138,0.4); }
.dash-staff-img { width: 56px; height: 56px; flex: 0 0 auto; }
.dash-staff-body { flex: 1 1 auto; min-width: 0; }
.dash-staff-title { font-family: var(--font-head); color: var(--gold); margin-bottom: 8px; }
.dash-staff-bar { height: 12px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; border: 1px solid rgba(201,168,76,0.35); }
.dash-staff-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--amber), var(--gold-bright));
  border-radius: 999px;
  transition: width 320ms ease;
}
.dash-staff-note { font-size: 13px; color: #cdd6ef; margin-top: 6px; }

.dash-stamps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.dash-stamp { text-align: center; border: 2px solid rgba(201,168,76,0.4); border-radius: 12px; padding: 10px 4px; opacity: 0.6; }
.dash-stamp.done { opacity: 1; border-color: #6fcf97; background: rgba(45,122,45,0.18); }
.dash-stamp-n { font-family: var(--font-head); font-size: 22px; color: var(--gold); }
.dash-stamp-loc { font-size: 11px; color: #cdd6ef; }
.dash-stamp-state { font-size: 10px; color: var(--amber); }

.dash-treasure { display: flex; gap: 16px; }
.dash-tile { flex: 1; background: var(--panel); border-radius: 12px; padding: 14px; text-align: center; border: 1px solid rgba(201,168,76,0.35); }
.dash-tile-icon { width: 40px; height: 40px; display: block; margin: 0 auto 6px; }
.dash-tile-amount { display: block; font-family: var(--font-head); font-size: 30px; color: var(--gold-bright); }
.dash-tile-name { font-size: 12px; color: #cdd6ef; }

.dash-players { display: flex; flex-direction: column; gap: 8px; }
.dash-player { display: flex; align-items: center; gap: 12px; border-left: 6px solid var(--gold); background: var(--panel); border-radius: 12px; padding: 12px; }
.dash-player-avatar { width: 44px; height: 44px; flex: 0 0 auto; }
.dash-player-body { min-width: 0; }
.dash-player-name { font-family: var(--font-head); color: var(--gold); font-size: 17px; }
.dash-player-stats { font-size: 13px; color: #cdd6ef; margin-top: 4px; }

body.reduce-motion .dash-rune,
body.reduce-motion .dash-staff,
body.reduce-motion .dash-staff-fill { transition: none !important; }