/* Land maps on /land/:id (src/art/land-map.js): the map with its pins, faces, critter and stars, and the numbered list
   that goes with it. Every loop is transform or opacity on an HTML box (an animation inside an SVG repaints the whole SVG on
   the main thread), only runs when the OS asks for no reduced motion, and stops under .reduce-motion (the server also leaves
   the lm-a-* classes off then) and the shell's battery rule (html.anim-paused, .anim-off). */
:root {
  --lm-sign: #e8b276; /* signpost boards, the same wood as the map's posts */
}

.lm-block { display: grid; gap: var(--gap); margin-bottom: var(--gap); }
@media (min-width: 1000px) { .lm-block { grid-template-columns: minmax(0, 2.1fr) minmax(250px, 1fr); align-items: start; } }
.lm-fig { margin: 0; display: grid; gap: var(--gap-sm); }
.lm-news { margin: 0; display: grid; gap: 4px; }
.lm-news p { margin: 0; color: var(--page-ink); font-size: var(--fs-sm); }

/* ---------- the map ---------- */
.lm { position: relative; aspect-ratio: var(--lm-ar); container-type: inline-size; border: var(--line) solid var(--ink); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow); background: var(--card); }
.lm-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lm-piece { position: absolute; pointer-events: none; }
.lm-piece > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lm-pins { position: absolute; inset: 0; pointer-events: none; }
.lm-pin, .lm-face, .lm-critter, .lm-star { position: absolute; translate: -50% -50%; pointer-events: auto; display: grid; place-items: center; width: 44px; height: 44px;
  text-decoration: none; color: var(--ink); -webkit-tap-highlight-color: transparent; }
.lm-dot { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: var(--line) solid var(--ink); background: var(--land-accent); color: #fff;
  font: 600 .94rem/1 var(--display); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; box-shadow: 0 3px 0 var(--ink); }
.lm-pin.is-sign .lm-dot { width: 30px; height: 22px; border-radius: 4px; background: var(--lm-sign); color: var(--ink); -webkit-text-stroke: 0; font-size: .82rem; rotate: -4deg; border-width: 2.5px; }
.lm-pin.is-ready .lm-dot { background: var(--sun); color: var(--ink); -webkit-text-stroke: 0; }
/* The ready glint rides on the dot, whichever side the name pill takes. */
.lm-dot { position: relative; }
.lm-glint { position: absolute; width: 18px; height: 18px; right: -10px; top: -10px; }
.lm-glint > svg { display: block; width: 100%; height: 100%; }
/* Something the player hasn't opened yet (the Builders' Board): a still pink dot on the pin's corner, ringed white so it reads on a pink pin. */
.lm-new { position: absolute; right: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--pink); border: 2px solid var(--ink); box-shadow: 0 0 0 2px var(--card); }
.lm-row .lm-new { position: static; display: inline-block; width: 12px; height: 12px; margin-left: 6px; vertical-align: 2px; }
/* Phone-sized maps show numbers only; the name stays in the link for screen readers (the list below names them on screen). */
.lm-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lm-face { border-radius: 50%; }
.lm-face > :is(svg, img) { width: 36px; height: 36px; border-radius: 50%; background: var(--card); box-shadow: 0 0 0 2.5px var(--ink), 2px 3px 0 2px var(--ink); }
.lm-critter svg, .lm-star svg { width: 40px; height: 40px; display: block; }
.lm-hop, .lm-turn { display: block; }
.lm :focus-visible { outline: 3px solid var(--ink); outline-offset: 1px; border-radius: var(--r-sm); box-shadow: 0 0 0 7px var(--sky); } /* the site's two-tone ring */
@media (hover: hover) and (pointer: fine) { .lm-pin:hover .lm-dot { translate: 0 -2px; box-shadow: 0 5px 0 var(--ink); } }

/* Desktop-sized maps: the name rides beside its number as one sticker pill, on the side labelSides() picked. */
@container (min-width: 560px) {
  .lm-pin { width: auto; min-width: 44px; height: 34px; grid-auto-flow: column; gap: 0; }
  .lm-pin .lm-name { position: static; width: auto; height: auto; overflow: visible; clip-path: none; margin-left: -10px; padding: 3px 10px 3px 14px;
    border: 2.5px solid var(--ink); border-left: 0; border-radius: 0 999px 999px 0; background: var(--card); font: 600 .82rem/1.1 var(--display); box-shadow: 0 3px 0 var(--ink); }
  .lm-pin .lm-dot { position: relative; z-index: 1; width: 28px; height: 28px; font-size: .875rem; }
  .lm-pin.is-sign { width: 44px; height: 44px; }
  .lm-pin.is-sign .lm-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .lm-pin.is-sign .lm-dot { width: 28px; height: 20px; }
  .lm-pin.lm-side-r { translate: -14px -50%; }
  .lm-pin.lm-side-l { direction: rtl; translate: calc(-100% + 14px) -50%; }
  .lm-pin.lm-side-l .lm-name { direction: ltr; margin: 0 -10px 0 0; padding: 3px 14px 3px 10px; border: 2.5px solid var(--ink); border-right: 0; border-radius: 999px 0 0 999px; }
  /* Under or over the dot: centered (b, t) or reading from the dot's left or right edge (br, tr, bl, tl), for pins near an edge. */
  .lm-pin:is(.lm-side-b, .lm-side-t, .lm-side-br, .lm-side-bl, .lm-side-tr, .lm-side-tl) { grid-auto-flow: row; height: auto; justify-items: center; }
  .lm-pin:is(.lm-side-br, .lm-side-tr) { justify-items: start; }
  .lm-pin:is(.lm-side-bl, .lm-side-tl) { justify-items: end; }
  .lm-pin.lm-side-b { translate: -50% -14px; }
  .lm-pin.lm-side-t { translate: -50% calc(-100% + 14px); }
  .lm-pin.lm-side-br { translate: -14px -14px; }
  .lm-pin.lm-side-bl { translate: calc(-100% + 14px) -14px; }
  .lm-pin.lm-side-tr { translate: -14px calc(-100% + 14px); }
  .lm-pin.lm-side-tl { translate: calc(-100% + 14px) calc(-100% + 14px); }
  .lm-pin:is(.lm-side-b, .lm-side-t, .lm-side-br, .lm-side-bl, .lm-side-tr, .lm-side-tl) .lm-name { margin: -6px 0 0; padding: 3px 10px; border: 2.5px solid var(--ink); border-radius: 999px; }
  .lm-pin:is(.lm-side-t, .lm-side-tr, .lm-side-tl) .lm-name { order: -1; margin: 0 0 -6px; }
}

/* ---------- the list: number chips match the pins ---------- */
.lm-list { padding-block: 16px; }
.lm-kind + .lm-kind { margin-top: 14px; padding-top: 12px; border-top: 2px dashed var(--rule); }
.lm-kind h2 { display: flex; align-items: center; gap: 8px; font-size: 1.1rem; margin: 0 0 8px; }
.lm-kind > ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lm-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 6px; border-radius: var(--r-sm); color: var(--link); text-decoration: none; }
.lm-txt { display: grid; justify-items: start; min-width: 0; }
.lm-row b { font: 600 1rem/1.15 var(--display); }
.lm-txt .badges { margin: 4px 0 0; }
.lm-desc { color: var(--muted); font-size: var(--fs-sm); line-height: 1.35; margin-top: 2px; }
.lm-n { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--land-accent); color: #fff;
  font: 600 .82rem/1 var(--display); -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; }
.lm-row.is-sign .lm-n { border-radius: 4px; height: 22px; background: var(--lm-sign); color: var(--ink); -webkit-text-stroke: 0; }
.lm-row.is-sign b { font-weight: 500; }
.lm-row.is-ready .lm-n { background: var(--sun); color: var(--ink); -webkit-text-stroke: 0; }
/* Starfall Isle's accent is the same yellow as "ready", so its other numbers take grape and ready ones still stand out. */
.land-starfall-isle :is(.lm-pin:not(.is-sign, .is-ready) .lm-dot, .lm-row:not(.is-sign, .is-ready) .lm-n) { background: var(--grape); }
@media (hover: hover) and (pointer: fine) { .lm-row:hover { background: var(--hi-soft); } }
/* Every place has its plain hint under its name: one place per line on phones and desktops (the list sits beside the map),
   two to a line on tablets, where the list runs full width under the map. */
.lm-row { align-items: flex-start; }
.lm-row .lm-n { margin-top: 1px; }
@media (min-width: 600px) and (max-width: 999px) { .lm-kind > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; } }
@media (max-width: 999px) { .lm-row b { font-size: .95rem; } }
@media (min-width: 1000px) { .lm-row { min-height: 32px; padding-block: 3px; } .lm-kind > ul { gap: 0; } .lm-n { width: 26px; height: 26px; } }

/* Who's around, for screen readers (the faces on the map are the sighted version). */
.lm-around { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- motion: the lm-a-* classes ---------- */
@media (prefers-reduced-motion: no-preference) {
  .lm-a-glint { animation: lm-glint 1.6s ease-in-out infinite alternate; }
  .lm-a-glow { animation: lm-glow 2.2s ease-in-out infinite alternate; }
  .lm-a-blink { animation: lm-glow 1.3s ease-in-out infinite alternate; }
  .lm-a-turn { animation: lm-turn 2.4s ease-in-out infinite alternate; }
  .lm-a-hop { animation: lm-hop 2.6s ease-in-out infinite; }
  .lm-a-puff { animation: lm-puff 3.6s ease-out infinite; }
  .lm-a-ripple { animation: lm-ripple 3s ease-out infinite; }
  .lm-a-trundle { animation: lm-trundle 9s ease-in-out infinite; }
  .lm-a-bob { animation: lm-bob 3s ease-in-out infinite alternate; }
  .lm-a-sway { animation: lm-sway 3.4s ease-in-out infinite alternate; }
}
@keyframes lm-glint { from { scale: .55; rotate: 0deg; opacity: .5; } to { scale: 1.1; rotate: 30deg; opacity: 1; } }
@keyframes lm-glow { from { opacity: .25; } to { opacity: 1; } }
@keyframes lm-turn { from { rotate: -8deg; } to { rotate: 8deg; scale: 1.06; } }
@keyframes lm-hop { 0%, 60%, 100% { translate: 0 0; } 70% { translate: 0 -9px; } 80% { translate: 0 0; } 87% { translate: 0 -4px; } }
@keyframes lm-puff { from { translate: 0 0; scale: .5; opacity: 0; } 15% { opacity: .9; } to { translate: 12% -150%; scale: 1.5; opacity: 0; } }
@keyframes lm-ripple { from { scale: .4; opacity: .9; } to { scale: 1.25; opacity: 0; } }
@keyframes lm-trundle { 0% { translate: -120% 0; } 45%, 100% { translate: 0 0; } }
@keyframes lm-bob { to { translate: 0 -8%; rotate: 3deg; } }
@keyframes lm-sway { from { rotate: -3deg; } to { rotate: 3deg; } }