/* The journal: treasure counter, found card, and the page on J. Uses the HUD's own type and inks. */

/* ---------- counter (in .hud-tl, under the seeds) ---------- */
.treasures { display: flex; align-items: center; gap: 8px; margin-top: 4px; font: 500 13px "Karla", sans-serif; letter-spacing: 0.08em; }
.treasures-gem {
  width: 11px; height: 11px; transform: rotate(45deg); border-radius: 2px; margin: 0 4px 0 2px;
  background: linear-gradient(135deg, #fff, #ffd9ec 45%, #b9a3ff); box-shadow: 0 0 12px rgba(255, 200, 235, 0.9);
}
.treasures-n { font: italic 400 22px "Fraunces", serif; letter-spacing: 0; }
.treasures-of { opacity: 0.72; text-transform: lowercase; }
.treasures kbd { margin-left: 6px; opacity: 0.6; min-width: 20px; padding: 2px 6px; text-align: center; }
.treasures.bump .treasures-n { animation: treasure-bump 0.9s ease; }
@keyframes treasure-bump { 0% { transform: scale(1); } 25% { transform: scale(1.7); color: var(--gold); } 100% { transform: scale(1); } }

/* ---------- found card ---------- */
.treasure-card {
  --tint: #ffe2a8;
  position: fixed; left: 50%; bottom: 12%; transform: translate(-50%, 18px); z-index: 4; pointer-events: none;
  width: min(620px, 86vw); padding: 22px 34px 24px; text-align: center; color: var(--ink);
  background: linear-gradient(180deg, rgba(10, 22, 40, 0.50), rgba(10, 22, 40, 0.66));
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0, 10, 30, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.treasure-card.show { opacity: 1; transform: translate(-50%, 0); }
.treasure-card::before {
  content: ""; position: absolute; left: 50%; top: -9px; width: 16px; height: 16px; transform: translateX(-50%) rotate(45deg); border-radius: 3px;
  background: linear-gradient(135deg, #fff, var(--tint)); box-shadow: 0 0 22px var(--tint);
}
.tc-kicker { margin: 0 0 6px; font-size: 11px; letter-spacing: 0.36em; text-transform: uppercase; opacity: 0.75; }
.tc-name { margin: 0; font: italic 400 clamp(28px, 3.4vw, 46px)/1.05 "Fraunces", Georgia, serif; text-shadow: 0 2px 24px rgba(0, 20, 50, 0.5); }
.tc-lore { margin: 12px auto 0; max-width: 46ch; font-size: 15px; line-height: 1.5; opacity: 0.92; }
.tc-place { margin: 12px 0 0; font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; opacity: 0.6; }

/* ---------- the page ---------- */
.journal {
  position: fixed; inset: 0; z-index: 6; display: grid; place-items: center; padding: 3vh 3vw; color: var(--ink);
  background: radial-gradient(120% 100% at 50% 40%, rgba(8, 20, 38, 0.62), rgba(5, 12, 26, 0.86));
  -webkit-backdrop-filter: blur(7px) saturate(0.9); backdrop-filter: blur(7px) saturate(0.9);
  opacity: 0; transition: opacity 0.35s ease;
}
.journal.show { opacity: 1; }
.journal-inner { width: min(1120px, 100%); max-height: 94vh; display: flex; flex-direction: column; }
.journal header { text-align: center; margin-bottom: 2.2vh; }
.j-kicker { margin: 0 0 6px; font-size: 11px; letter-spacing: 0.36em; text-transform: uppercase; opacity: 0.7; }
.journal h2 { margin: 0; font: italic 340 clamp(30px, 4.2vw, 58px)/1 "Fraunces", Georgia, serif; letter-spacing: -0.01em; }
.j-sum { margin: 10px 0 0; font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); opacity: 0.95; }
.j-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 10px 22px; overflow-y: auto; padding: 4px 6px; }
.j-entry {
  --tint: rgba(255, 255, 255, 0.5);
  display: flex; gap: 14px; align-items: flex-start; padding: 12px 16px 13px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.09);
}
.j-entry.found { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.22); }
.j-gem { flex: none; width: 12px; height: 12px; margin-top: 7px; transform: rotate(45deg); border-radius: 2px; border: 1px solid rgba(255, 255, 255, 0.45); }
.j-entry.found .j-gem { border: 0; background: linear-gradient(135deg, #fff, var(--tint)); box-shadow: 0 0 14px var(--tint); }
.j-entry h3 { margin: 0; font: italic 400 21px/1.15 "Fraunces", Georgia, serif; }
.j-entry:not(.found) h3 { opacity: 0.55; font-size: 17px; }
.j-where { margin: 4px 0 0; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.62; }
.j-lore { margin: 6px 0 0; font-size: 14px; line-height: 1.45; opacity: 0.9; }
.j-entry:not(.found) .j-lore { font-style: italic; opacity: 0.74; }
.journal footer { margin-top: 2vh; text-align: center; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.6; }