/* axis-scatter — ports the nm4u mood-map card aesthetic. Self-scoped. */
.axsc { --axsc-x: #d99a3a; --axsc-y: #5572a8; margin: 18px 0 8px; }

/* Two flat selector rows (no pills). X = colour-coded per axis,
   Y = subdued black-transparent. Squared, segmented, no rounding. */
.axsc-pick {
  display: flex; align-items: stretch; gap: 0;
  margin-bottom: 8px;
}
.axsc-pk-lab {
  display: flex; align-items: center; justify-content: center;
  width: 22px; flex: none; font: 800 12px/1 inherit;
  color: rgba(255,255,255,.5); border-right: 1px solid rgba(255,255,255,.1);
  margin-right: 8px;
}
.axsc-pk-opts { display: flex; flex-wrap: wrap; gap: 4px; }
.axsc-opt {
  font: 600 11px/1 inherit; letter-spacing: .2px;
  padding: 7px 10px; border-radius: 4px; cursor: pointer;
  border: 1px solid transparent;
  transition: background 120ms, color 120ms, border-color 120ms;
  user-select: none;
}
/* Y row — subdued, black transparent. */
.axsc-pick-y .axsc-opt {
  color: rgba(255,255,255,.55);
  background: rgba(0,0,0,.28);
  border-color: rgba(255,255,255,.08);
}
.axsc-pick-y .axsc-opt:hover { color: #fff; background: rgba(0,0,0,.45); }
.axsc-pick-y .axsc-opt[data-sel="1"] {
  color: #fff; background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.5);
}
/* X row — each option tinted with its own axis hue (--ah). */
.axsc-pick-x .axsc-opt {
  color: #fff;
  background: color-mix(in srgb, var(--ah) 14%, transparent);
  border-color: color-mix(in srgb, var(--ah) 45%, transparent);
}
.axsc-pick-x .axsc-opt:hover {
  background: color-mix(in srgb, var(--ah) 30%, transparent);
}
.axsc-pick-x .axsc-opt[data-sel="1"] {
  color: #11151c; font-weight: 800;
  background: var(--ah); border-color: var(--ah);
}

.axsc-plot {
  position: relative; width: 100%; aspect-ratio: var(--axsc-aspect, 8/5);
  max-height: 72vh; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: var(--axsc-bg, #1b1e27);
  overflow: hidden;
}
.axsc-ax { position: absolute; background: rgba(255,255,255,.28); pointer-events: none; }
.axsc-ax-x { left: 3%; right: 3%; top: 50%; height: 1px; transform: translateY(-50%); }
.axsc-ax-y { top: 3%; bottom: 3%; left: 50%; width: 1px; transform: translateX(-50%); }

/* Axis-end labels on the four mid-edges (reads like a normal chart). */
.axsc-edge {
  position: absolute; font: 700 10px/1 inherit; letter-spacing: .4px;
  color: rgba(255,255,255,.62); pointer-events: none; z-index: 1;
  white-space: nowrap; text-shadow: 0 1px 4px #000;
}
.axsc-e-xneg { left: 10px;  top: 50%; transform: translateY(-50%); }
.axsc-e-xpos { right: 10px; top: 50%; transform: translateY(-50%); }
.axsc-e-ypos { top: 8px;    left: 50%; transform: translateX(-50%); }
.axsc-e-yneg { bottom: 8px; left: 50%; transform: translateX(-50%); }

/* ── Card: ported verbatim from _mood_map .mm-card ─────────────────── */
.axsc-card {
  position: absolute; transform: translate(-50%, -50%);
  border-radius: 10px; z-index: 2;
  text-decoration: none; color: #fff;
  border: 1px solid color-mix(in srgb, var(--acc, #888) 75%, transparent);
  opacity: .88;
  transition: transform 130ms, box-shadow 130ms, filter 130ms, opacity 130ms;
  box-shadow: 0 2px 9px rgba(0,0,0,.32);
  background:
    linear-gradient(180deg, rgba(8,9,14,.18) 0%,
      rgba(8,9,14,.72) 58%, rgba(8,9,14,.95) 100%),
    var(--img) center/cover,
    color-mix(in srgb, var(--acc, #2a2f3a) 45%, #0c0e14);
}
/* FLIP glide enabled by the engine on a pair change. */
.axsc-card.axsc-anim {
  transition: left 480ms cubic-bezier(.22,.61,.36,1),
              top 480ms cubic-bezier(.22,.61,.36,1),
              transform 130ms, box-shadow 130ms, filter 130ms, opacity 130ms;
}
.axsc-card:hover {
  transform: translate(-50%, -50%) scale(1.22); z-index: 30; opacity: 1;
  filter: brightness(1.15); box-shadow: 0 8px 26px rgba(0,0,0,.6);
  text-decoration: none; border-color: #fff;
}
.axsc-card.axsc-land { --img: var(--bd, var(--bg)); width: 124px; height: 72px; }
.axsc-card.axsc-port { --img: var(--bg, var(--bd)); width: 84px; height: 112px; }

.axsc-label {
  position: absolute; left: 0; right: 0; bottom: 15px; inset: auto;
  text-align: center; font-weight: 800; font-size: 13px;
  letter-spacing: -.2px; padding: 0 6px; color: #fff;
  text-shadow: 0 2px 5px #000, 0 0 12px rgba(0,0,0,.85);
}
.axsc-card.axsc-port .axsc-label { bottom: 9px; font-size: 12px; }
.axsc-sub {
  position: absolute; left: 0; right: 0; bottom: 5px; text-align: center;
  font-size: 9px; color: rgba(255,255,255,.82); text-transform: lowercase;
  letter-spacing: .2px; padding: 0 5px;
  text-shadow: 0 1px 4px #000, 0 0 8px rgba(0,0,0,.9);
}
.axsc-card.axsc-port .axsc-sub { display: none; }
.axsc-badge {
  position: absolute; top: -9px; right: -7px; font-size: 10px;
  font-weight: 800; color: #fff; background: #0c0e14;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px; padding: 1px 7px; line-height: 1.45; z-index: 3;
}

@media (max-width: 760px) {
  .axsc-card.axsc-land { width: 104px; height: 60px; }
  .axsc-card.axsc-port { width: 70px; height: 94px; }
  .axsc-label { font-size: 11px; }
}