.journal-intro { margin: 0 0 10px; font: 12px/1.45 var(--read); color: var(--brown); }
#journal-count { display: block; color: var(--leaf-deep); font: 800 15px var(--read); }
#journal-progress { width: 100%; height: 13px; accent-color: var(--leaf); margin-top: 6px; }
.journal-filter { display: flex; gap: 10px; align-items: center; font: 700 12px var(--read); margin: 10px 0; }
.journal-filter select { flex: 1; min-width: 0; min-height: 36px; font: 700 12px var(--read); }
#journal-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.journal-card { position: relative; display: flex; align-items: center; flex-direction: column; justify-content: flex-end; min-width: 0; padding: 5px 3px 7px; border: 2px solid var(--line); border-radius: 8px; background: #fff8dc; color: var(--ink); box-shadow: none; cursor: pointer; }
.journal-card[hidden] { display: none; }
.journal-card[aria-pressed=true] { border-color: var(--leaf-deep); outline: 2px solid var(--honey); }
.journal-card canvas { width: 100%; aspect-ratio: 1; height: auto; max-width: 100px; }
.journal-card strong { font: 800 11px/1.25 var(--read); text-align: center; }
.journal-card small { font: 10px/1.4 var(--read); color: var(--brown); }
.journal-card.locked { background: #d3c7a9; }
.journal-card.locked canvas { filter: brightness(0); opacity: .8; }
.journal-number { position: absolute; left: 5px; top: 3px; font: 700 9px var(--read); color: var(--brown); }
#journal-detail { grid-column: 1 / -1; margin-top: 12px; padding: 10px; border: 1px solid var(--line); background: #fffaf0; border-radius: 6px; font: 12px/1.5 var(--read); }
#journal-detail h3 { margin: 0; font: 800 16px var(--read); }
#journal-detail p { margin: 6px 0 0; }
#journal-toast { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 30; max-width: min(440px,calc(100vw - 24px)); padding: 10px 12px; background: var(--parchment); color: var(--ink); border: 3px solid var(--ink); border-radius: 10px; box-shadow: var(--ledge); font: 800 13px/1.4 var(--read); }
#journal-toast[hidden] { display: none; }
#journal-toast strong { display: block; padding-right: 22px; margin-bottom: 6px; }
#journal-toast button { min-height: 40px; font: 800 12px var(--read); }
#journal-toast button:last-child { position: absolute; top: 2px; right: 2px; min-width: 30px; background: none; border: 0; box-shadow: none; }
/* On a phone the news comes in over the world, never over the stick, the belts or your health: held upright, just under
   the minimap's zoom; on its side, low between the stick and the belts. */
@media (max-width: 760px), (pointer: coarse) {
  #journal-toast { top: calc(max(8px, env(safe-area-inset-top)) + 160px); width: min(360px,calc(100vw - 24px)); }
}
@media (pointer: coarse) and (max-height: 500px) {
  #journal-toast { top: auto; bottom: calc(72px + env(safe-area-inset-bottom)); width: min(340px,calc(100vw - 240px)); }
}