/* ---------- team page: the airship, the happy ghast and the hand of cards (js/team.js) ---------- */
.team-main { max-width: none; padding: 0; }
/* No landscape here (the spawn build and the grass strip): just the sky around the ships */
.world > .w-isle, .world > .w-ground { display: none; }
.voyage {
  position: relative; overflow: hidden;
  height: calc(100vh - var(--topbar-h, 65px)); min-height: 560px;
}
.voyage-title {
  position: absolute; left: 24px; top: 16px; z-index: 3; margin: 0;
  font-size: 29.5px; color: var(--heading);
}
.voyage-title small { display: block; margin-top: 4px; font: 13.5px var(--font-body); color: var(--muted); text-shadow: none; }
.team-empty { padding: 80px 24px; color: var(--muted); }

/* The ships: the near one in the middle, the former members' one further back */
.ship { position: absolute; perspective: 900px; }
.ship img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.ship.near { left: 50%; top: 1%; width: min(440px, 60vw); translate: -50% 0; z-index: 1; }
.ship.far {
  left: 6%; top: 14%; width: min(240px, 32vw); z-index: 0;
  filter: saturate(0.7) brightness(1.08) blur(0.6px); opacity: 0.8;
}
:root[data-theme-now="dark"] .ship img { filter: brightness(0.78) saturate(0.85); }

/* A chibi on deck: .crew is the point at its feet (left/top = the deck spot) */
.crew { position: absolute; width: 0; height: 0; outline: none; transition: opacity 0.4s; }
.crew .scene { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.crew .fig { transform: rotateX(-12deg) rotateY(-28deg); }
.ship.near .crew { cursor: pointer; }
.ship.near .crew::before { content: ""; position: absolute; left: -16px; top: -54px; width: 32px; height: 56px; }
.ship.far .crew { scale: 0.45; }
.crew.away { opacity: 0; pointer-events: none; }
.crew:focus-visible::before { box-shadow: 0 0 0 2px var(--gold); border-radius: 6px; }

/* The happy ghast: its feet (bottom middle) sit at the rider's anchor, above the cards */
.rider {
  position: absolute; left: 50%; bottom: 318px; z-index: 4; width: 0; height: 0;
  transform-origin: 0 0; opacity: 0; pointer-events: none;
}
.rider.shown { opacity: 1; }
.rider.flying { transition: transform 1.4s cubic-bezier(0.45, 0, 0.25, 1); }
.rider:not(.flying).shown .ghast, .rider:not(.flying).shown .seat { animation: rider-bob 3s ease-in-out infinite; }
.rider .ghast, .rider .seat { position: absolute; left: 0; bottom: 0; width: 0; height: 0; }
.rider .ghast .squash, .rider .ghast .mv { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.rider .ghast .spr { position: absolute; image-rendering: pixelated; }
.rider .seat { transform-style: preserve-3d; perspective: 900px; }
.rider .seat .fig { transform: rotateX(-10deg) rotateY(-12deg); }
@keyframes rider-bob { 50% { translate: 0 -8px; } }
/* The member on the ghast: click to hear them (an invisible button over the seated chibi) */
.rider-talk {
  position: absolute; left: -48px; bottom: var(--seat, 200px); width: 96px; height: 120px;
  padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; border-radius: 12px;
}
.rider-talk:focus-visible { outline: 3px solid var(--gold); }
.rider .bubble { left: 0; top: auto; bottom: calc(var(--seat, 200px) + 128px); max-width: 260px; }

/* The hand: cards fanned from a point below the window */
.hand { position: absolute; left: 50%; bottom: 0; z-index: 5; width: 0; height: 0; }
.tcard {
  --w: 200px; --h: 270px;
  position: absolute; left: calc(var(--w) / -2); bottom: 34px; /* whole cards: the fan stays inside the window */
  width: var(--w); height: var(--h); padding: 14px 16px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 10px; text-align: left;
  font: inherit; color: #1d2433; cursor: pointer;
  background: linear-gradient(180deg, var(--role, #9ad7ff) 0 58px, #fdfaf3 58px);
  border: 3px solid #2b2f3a; border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  transform-origin: 50% 160%;
  transform: translateX(calc(var(--k) * 70px)) translateY(calc(var(--ka) * 4px)) rotate(calc(var(--k) * 4deg));
  transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.1), box-shadow 0.2s;
}
.tcard.open { transform: translateY(-14px); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45); }
.tcard:not(.open):hover { transform: translateX(calc(var(--k) * 70px)) translateY(calc(var(--ka) * 6px - 10px)) rotate(calc(var(--k) * 4deg)); }
.tcard:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.tcard-head { display: flex; align-items: center; gap: 10px; }
/* 44 px face = the skin at 5.5×: hat layer (40,8) over the face (8,8) */
.tcard-face {
  width: 44px; height: 44px; flex: none; image-rendering: pixelated; border: 2px solid #fff; border-radius: 6px;
  background-color: #fff; background-repeat: no-repeat; background-size: 352px 352px; background-position: -220px -44px, -44px -44px;
}
.tcard-names { display: flex; flex-direction: column; min-width: 0; }
.tcard-names b {
  font: 21.5px/1.1 var(--font-pixel); color: #fff; overflow-wrap: anywhere;
  text-shadow: 0.07em 0.07em 0 rgba(0, 0, 0, 0.45);
}
.tcard-id { font: 12.5px var(--font-mono); color: rgba(0, 0, 0, 0.6); overflow-wrap: anywhere; }
.tcard.light .tcard-names b { color: #1d2433; text-shadow: 0.07em 0.07em 0 rgba(0, 0, 0, 0.15); }
.tcard.light { background: linear-gradient(180deg, color-mix(in srgb, var(--role) 70%, #c9d3e6) 0 58px, #fdfaf3 58px); }
.tcard-role {
  align-self: flex-start; padding: 1px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 800; color: #fff; background: #2b2f3a;
}
.tcard-more { font-size: 13.5px; line-height: 1.5; color: #3a4252; overflow: hidden; }
.tcard-more:empty { display: none; }
.tcard-aside { display: block; margin-top: 2px; font-size: 0.82em; line-height: 1.4; color: #6b7384; }
.tcard-tags { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* The member's jellybean at the bottom of the card, its name under it */
.tcard-bean { margin: auto 0 0; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tcard-bean img { width: 120px; max-height: 110px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.2)); }
.tcard-bean figcaption { font-size: 13.5px; font-weight: 800; color: #3a4252; }
/* A card with its own text: the bean sits small beside the role, the text gets the room */
.tcard.has-about .tcard-bean { margin: -6px 0; }
.tcard.has-about .tcard-bean img { width: 52px; max-height: 44px; }
.tcard.has-about .tcard-bean figcaption { display: none; }
.tcard.has-about .tcard-more { font-size: 12.5px; line-height: 1.45; }

@media (max-width: 560px) {
  .voyage-title { left: 16px; font-size: 23.5px; }
  .ship.near { top: 9%; width: 92vw; }
  .ship.far { top: 6%; left: 2%; width: 34vw; }
  .tcard { --w: 150px; --h: 200px; padding: 10px 12px; bottom: 30px; }
  .tcard-bean img { width: 84px; max-height: 70px; }
  .tcard.has-about .tcard-more { font-size: 11.5px; overflow-y: auto; } /* small cards: the text scrolls */
  .tcard-names b { font-size: 16.5px; }
  .tcard { transform: translateX(calc(var(--k) * 42px)) translateY(calc(var(--ka) * 5px + 4px)) rotate(calc(var(--k) * 4deg)); }
  .rider { bottom: 240px; scale: 0.7; }
}

/* Server mascots floating in the sky with the Levitation effect (js/team.js) */
.skymob { position: absolute; z-index: 2; width: 0; height: 0; animation: levitate var(--d, 6s) ease-in-out infinite; }
.skymob .squash, .skymob .mv { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.skymob .spr { position: absolute; image-rendering: pixelated; }
@keyframes levitate {
  0%, 100% { translate: 0 0; }
  50% { translate: 6px -22px; }
}
/* Levitation's particles: the game's effect particle, in the effect's colour, rising and fading */
.lev {
  position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; background: #ceffff;
  filter: drop-shadow(0 0 1px rgba(0, 70, 110, 0.7)); /* still visible against the day sky */
  -webkit-mask: var(--mask) center / contain no-repeat; mask: var(--mask) center / contain no-repeat;
  image-rendering: pixelated; pointer-events: none; animation: lev-rise 1.6s ease-out forwards;
}
@keyframes lev-rise {
  0% { translate: 0 0; opacity: 0.95; scale: 1; }
  100% { translate: 0 -34px; opacity: 0; scale: 0.5; }
}
@media (prefers-reduced-motion: reduce) { .skymob { animation: none; } }

/* Members' entrances (js/team.js entrance, team.json "effect") */
.rider .seat .squash, .rider .seat .mv { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.rider .seat .spr { position: absolute; image-rendering: pixelated; }
/* creeper: about to go off, flashing white and swelling */
.rider .seat.fuse { scale: 1.3; transition: scale 1.5s ease-in; animation: fuse-flash 0.3s steps(1) infinite; }
@keyframes fuse-flash { 50% { filter: brightness(3) saturate(0); } }
.rider .boom {
  position: absolute; z-index: 3; width: 70px; height: 70px; margin-left: -35px; pointer-events: none;
  background: center / contain no-repeat; image-rendering: pixelated;
}
/* frogs: pop in, then hop */
.rider .frog {
  position: absolute; z-index: 2; width: 34px; height: 34px; margin-left: -17px; pointer-events: none;
  background: center / contain no-repeat; image-rendering: pixelated;
  animation: frog-in 0.35s ease-out both, frog-hop 1.3s ease-in-out infinite;
}
@keyframes frog-in { from { scale: 0; } }
@keyframes frog-hop { 0%, 55%, 100% { translate: 0 0; } 25% { translate: 0 -14px; } }