/* ZeroGrav DM: the DM's characters, a constellation across the upper sky. Each is a small star in its own colour,
   twinkling. The lines between them are all but invisible until a star is pointed at, when the lines to its
   neighbours light and its card opens. js/stars.js places them and draws the lines. */

.stars { position: fixed; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }   /* clipped: a star at the edge never widens the page */
.star-lines { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.star-lines line { stroke: #efe2c4; stroke-width: .8; stroke-opacity: .07; transition: stroke-opacity .4s ease; }
.star-lines line.lit { stroke-opacity: .42; }
.star-lines line.dim { stroke-opacity: 0; }

/* hidden until js/stars.js has placed it */
.star:not(.placed) { visibility: hidden; }
.star {
  position: absolute; left: -19px; top: -19px; width: 38px; height: 38px; margin: 0; padding: 0; border: 0; background: none;
  cursor: default; outline: none; color: inherit; -webkit-tap-highlight-color: transparent; pointer-events: auto;
  animation: star-twinkle var(--tw, 5s) ease-in-out var(--td, 0s) infinite;
}
.star::before, .star::after, .star i { content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
/* a white-hot core in its colour's glow, and four fine points */
.star::before {
  width: var(--core, 4px); height: var(--core, 4px); border-radius: 50%; background: #fffcf5;
  box-shadow: 0 0 5px 2px rgba(var(--c), .95), 0 0 16px 5px rgba(var(--c), .35);
  transition: box-shadow .3s ease, scale .3s ease;
}
.star::after { width: var(--ray, 20px); height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--c), .9), transparent); }
.star i { width: 1px; height: var(--ray, 20px); background: linear-gradient(transparent, rgba(var(--c), .9), transparent); }
@keyframes star-twinkle { 0%, 100% { opacity: .78; } 50% { opacity: 1; } }
.star:hover, .star:focus-visible, .star.on { animation-play-state: paused; opacity: 1; }
.star:hover::before, .star:focus-visible::before, .star.on::before { scale: 1.5; box-shadow: 0 0 7px 3px rgba(var(--c), 1), 0 0 26px 9px rgba(var(--c), .45); }
.star.near::before { box-shadow: 0 0 6px 2px rgba(var(--c), 1), 0 0 20px 7px rgba(var(--c), .4); }

/* the card: the character's token (or initial), name, race, class and level, and subclass */
.star-card {
  /* it grows with the page on big screens (--k is the page's own scale), up to half as big again */
  --ck: clamp(1, var(--k, 1), 1.5);
  position: fixed; left: 0; top: 0; z-index: 20; display: flex; gap: calc(14px * var(--ck)); align-items: center; max-width: calc(320px * var(--ck));
  padding: calc(12px * var(--ck)) calc(18px * var(--ck)) calc(12px * var(--ck)) calc(12px * var(--ck)); border-radius: calc(12px * var(--ck)); pointer-events: none;
  background: rgba(8, 10, 20, .92); border: 1px solid rgba(var(--c, 239, 226, 196), .3); color: var(--cream);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .55); opacity: 0; translate: 0 4px; transition: opacity .25s ease, translate .25s ease;
}
.star-card.on { opacity: 1; translate: 0 0; }
.star-card .tok { position: relative; flex: none; width: calc(76px * var(--ck)); height: calc(76px * var(--ck)); }
.star-card .token, .star-card .initial { display: block; width: calc(76px * var(--ck)); height: calc(76px * var(--ck)); border-radius: 50%; box-shadow: 0 0 0 2px rgba(var(--c), .7), 0 0 18px rgba(var(--c), .35); }
.star-card .initial {
  display: grid; place-items: center; font: 400 calc(34px * var(--ck))/1 "IM Fell English", Georgia, serif; color: rgb(var(--c));
  background: radial-gradient(circle at 40% 35%, rgba(var(--c), .5), rgba(var(--c), .1) 70%);
}
.star-card .pal { position: absolute; right: calc(-10px * var(--ck)); bottom: calc(-6px * var(--ck)); width: calc(36px * var(--ck)); height: calc(36px * var(--ck)); border-radius: 50%; box-shadow: 0 0 0 2px rgba(8, 10, 20, .95), 0 0 0 3px rgba(var(--c), .6); }
.star-card [hidden] { display: none; }
.star-card h3 { margin: 0 0 2px; font: 400 calc(21px * var(--ck))/1.1 "IM Fell English", Georgia, serif; color: rgb(var(--c)); text-wrap: balance; }
.star-card .full { margin: 0 0 4px; font: italic 400 calc(13px * var(--ck))/1.2 "IM Fell English", Georgia, serif; color: var(--ink-2); }
.star-card .meta { margin: 0; font: 400 calc(12px * var(--ck))/1.4 "IM Fell English SC", Georgia, serif; letter-spacing: .05em; color: var(--ink-2); }
.star-card .meta span { display: block; }
.star-card .meta .sub { color: rgba(239, 226, 196, .86); }
.star-card .pal-name { margin: 4px 0 0; font: italic 400 calc(13px * var(--ck))/1.3 "IM Fell English", Georgia, serif; color: var(--ink-2); }
.star-card .story { margin: calc(8px * var(--ck)) 0 0; font: 400 calc(14px * var(--ck))/1.45 "IM Fell English", Georgia, serif; color: rgba(239, 226, 196, .88); }
/* a card with a backstory is wider, so the story reads in a few lines, not a column */
.star-card.told { max-width: calc(420px * var(--ck)); align-items: flex-start; }
/* the art credit, quietly at the foot of the card */
.star-card .art-credit { margin: calc(8px * var(--ck)) 0 0; font: italic 400 calc(12px * var(--ck))/1.3 "IM Fell English", Georgia, serif; color: var(--ink-3); }
.star-card .full:empty, .star-card .pal-name:empty, .star-card .story:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .star { animation: none; opacity: .92; }
  .star-card, .star-lines line { transition-duration: .01s; }
}