/* ZeroGrav DM: the ship's log (js/log.js). A tiny black hole in the bottom-left corner, its ring turning slowly, and
   the log that unfolds out of it: the same dark glass as the characters' cards. While the entrance is up it waits,
   like the credits (css/gate.css); during the DM's jump it dims with the rest of the page (css/jump.css). */

/* it grows with the screen: about 68px on a phone, up to 100px on a big monitor (doubled: the DM, 29 Sep 2026) */
.log { position: fixed; left: calc(14px + env(safe-area-inset-left, 0px)); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 21; width: clamp(68px, 4.6vw, 100px); height: clamp(68px, 4.6vw, 100px); }
.log[hidden] { display: none; }
/* a phone: the credits line fills the bottom, so the black hole sits just above it */
@media (max-width: 440px) { .log { bottom: calc(38px + env(safe-area-inset-bottom, 0px)); } }

/* ── the black hole ── */
.log-btn { display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--brass-hi); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.log-btn:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 3px; }
.log-btn svg { display: block; width: 100%; height: 100%; overflow: visible; }
.log-btn .ink { opacity: .72; transition: opacity .3s ease; }
.log-btn:hover .ink, .log-btn:focus-visible .ink, .log.open .log-btn .ink { opacity: 1; }
.log-ring { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-dasharray: 30 6 12 6; stroke-linecap: round; }
/* hovered, it spins fast (js/log.js): many small even dashes, so the speed reads as a steady swirl rather than a throb
   of two long dashes swinging past; the breathing halo and rim hold still meanwhile */
.log-btn:hover .log-ring { stroke-dasharray: 5 4; }
.log-btn:hover .log-halo, .log-btn:hover .log-hole { animation-play-state: paused; }
.log-hole { fill: #000; stroke: rgba(231, 194, 122, .7); stroke-width: .8; transition: stroke .3s ease; animation: log-rim 5.5s ease-in-out infinite; }
/* the light around the hole: a soft halo and a rim that brighten and dim, slowly */
@keyframes log-rim { 50% { stroke: rgba(231, 194, 122, 1); } }
.log-halo { opacity: .55; transform-box: fill-box; transform-origin: center; animation: log-halo 5.5s ease-in-out infinite; transition: opacity .3s ease; }
@keyframes log-halo { 50% { opacity: .95; transform: scale(1.06); } }
.log-btn:hover .log-halo, .log-btn:focus-visible .log-halo, .log.open .log-halo { opacity: 1; }
/* now and then a mote of light spirals in along the ring and is gone (js/log.js moves it) */
.log-mote { fill: #f3dca6; opacity: 0; }
/* (the ring no longer takes a half-turn push on hover: js/log.js speeds up its spin instead) */
.log-kick { transform-box: view-box; transform-origin: 22px 22px; transition: rotate 1.4s cubic-bezier(.2, .7, .2, 1); }
.log-btn:hover .log-hole, .log-btn:focus-visible .log-hole { stroke: rgba(231, 194, 122, .95); }
/* the ring turns once in 14 s; it rests while the tab is hidden */
.log-spin { transform-box: fill-box; transform-origin: center; animation: log-spin 14s linear infinite; }
@keyframes log-spin { to { transform: rotate(360deg); } }
.log.resting .log-spin, .log.resting .log-hole, .log.resting .log-halo { animation-play-state: paused; }
/* notes this browser hasn't seen yet */
.log-new { fill: var(--brass-hi); stroke: #04060c; stroke-width: 1; opacity: 0; transition: opacity .3s ease; }
.log.unread .log-new { opacity: 1; }

/* ── the log ── */
.log-panel {
  position: absolute; left: 0; bottom: calc(100% + 10px); width: 340px; max-width: calc(100vw - 32px);
  background: rgba(10, 13, 26, .94); border: 1px solid rgba(239, 226, 196, .22); border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .55); color: var(--cream); text-align: left;
}
.log-panel[hidden] { display: none; }
.log-scroll {
  max-height: 60vh; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px 14px; border-radius: inherit;
  scrollbar-width: thin; scrollbar-color: rgba(239, 226, 196, .2) transparent;
}
.log-head { padding-right: 24px; }
.log-title { margin: 0; font: 400 20px/1.15 "IM Fell English", Georgia, serif; color: var(--cream); }
.log-title:focus { outline: none; }
.log-sub { margin: 3px 0 0; font-size: 12.5px; line-height: 1.3; color: var(--ink-2); }
.log-close {
  position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; display: grid; place-items: center; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; transition: color .3s ease; -webkit-tap-highlight-color: transparent;
}
.log-close:hover, .log-close:focus-visible { color: var(--cream); }
.log-close:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 1px; }
.log-close svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }

.log-day { margin-top: 14px; }
.log-date { margin: 0 0 6px; font: 400 11px/1.2 "IM Fell English SC", Georgia, serif; letter-spacing: .14em; color: var(--ink-3); }
.log-notes { margin: 0; padding: 0; list-style: none; }
.log-note { display: flex; gap: 9px; margin: 0 0 5px; font: 400 13.5px/1.45 "Alegreya Sans", system-ui, sans-serif; color: #d9ccae; }
.log-dot { flex: none; width: 7px; height: 7px; margin-top: calc((1.45em - 7px) / 2); border-radius: 50%; background: var(--dot, var(--cream)); }
[data-area="arania"] { --dot: rgb(217, 166, 75); }
[data-area="gl"] { --dot: rgb(111, 184, 255); }
[data-area="home"] { --dot: var(--cream); }
.log-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 14px 0 0; padding-top: 10px; border-top: 1px solid rgba(239, 226, 196, .1); font-size: 11.5px; line-height: 1.3; color: var(--ink-3); }
.log-key-item { display: inline-flex; align-items: center; gap: 6px; }
.log-key .log-dot { margin-top: 0; }

/* a secret: a black bar with a brass rim. The words either side lean in toward it, as if pulled. */
.redact {
  display: inline-block; width: calc(var(--n, 8) * .55em); height: .9em; margin: 0 .3em; vertical-align: -.1em; border-radius: 6px;
  background: #000; box-shadow: 0 0 0 1px rgba(231, 194, 122, .55); outline: none; transition: box-shadow .25s ease;
}
.redact.near { box-shadow: 0 0 0 1px rgba(231, 194, 122, .85), 0 0 10px rgba(231, 194, 122, .18); }
.redact:focus-visible { box-shadow: 0 0 0 1px rgba(231, 194, 122, .9), 0 0 0 3px rgba(231, 194, 122, .3); }
.pull { display: inline-block; transform-origin: 50% 85%; transition: transform .25s ease; }
.pull-l.lean { transform: translateX(1.5px) skewX(-5deg); }
.pull-r.lean { transform: translateX(-1.5px) skewX(5deg); }

@media (prefers-reduced-motion: reduce) {
  .log-spin, .log-hole, .log-halo { animation: none; }
  .log-kick { transition: none; }
  .pull { transition: none; }
  .pull-l.lean, .pull-r.lean { transform: none; }
}